/* Gem Experience — Home
   Built to the mobile design spec at 390px: every colour, size, letter-spacing,
   padding and gap below is taken from it. Wider viewports scale the same
   layout up; nothing is re-composed except the three collection cards, which
   move from a stack to a row at 900px. */

:root {
  --ink: #000;
  --muted: #6b7280;
  --rule: #e5e7eb;
  --cream: #f9f8f3;
  --sans: Jost, -apple-system, "Segoe UI", sans-serif;
  --serif: Tinos, "Liberation Serif", "Times New Roman", Times, serif;
  --script: "Cormorant Garamond", "Cormorant", Georgia, serif;

  /* the mobile action bar's height, reserved by the hero and the page foot */
  --bar: calc(58px + env(safe-area-inset-bottom, 0px));

  /* 32px at 390, opening up on wider screens */
  --gutter: 32px;
  /* footer blocks sit 24px in on mobile */
  --ftr-gutter: 24px;
}

@media (min-width: 700px) {
  :root { --gutter: 48px; --ftr-gutter: 48px; --bar: 0px; }
}
@media (min-width: 1100px) {
  :root { --gutter: 64px; --ftr-gutter: 64px; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: var(--bar);
}

body.is-locked { overflow: hidden; }

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: inherit;
  cursor: pointer;
}

:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #fff;
  padding: 12px 20px;
  font-size: 12px;
  letter-spacing: 3.6px;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------ type scale */

.display {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
  letter-spacing: clamp(3.2px, 0.6vw, 5px);
  text-transform: uppercase;
  color: #fff;
}

.display--sm {
  text-align: center;
  color: var(--ink);
}

.display--left { text-align: left; }

.lede {
  margin: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
  color: var(--ink);
}

.lede--left { text-align: left; }

.eyebrow {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 3.6px;
  text-transform: uppercase;
}

.eyebrow--light { color: #fff; }

.hero-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.15;
  letter-spacing: clamp(5px, 1vw, 7px);
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.4);
}

.hero-tagline {
  margin: 0;
  font-family: var(--script);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.card-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 20px;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: var(--ink);
}

/* Label over a full-width hairline. */
.rule-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 3.8px;
  text-transform: uppercase;
  color: #fff;
}

.rule-link::after {
  content: "";
  display: block;
  align-self: stretch;
  height: 1px;
  background: currentColor;
  transition: opacity 0.3s ease;
}

.rule-link:hover::after { opacity: 0.5; }

/* Label with a tight underline beneath it. */
.box-link {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: var(--ink);
  transition: opacity 0.3s ease;
}

.box-link:hover { opacity: 0.6; }

/* ----------------------------------------------------------- header */

.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 19.6px;
  padding: 24px 20px;
  height: 72px;
  background: #fff;
}

/* Wide screens centre the wordmark between the menu and the icons. */
@media (min-width: 700px) {
  .hdr {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding: 24px var(--gutter);
  }
  .hdr-icons { justify-self: end; }
}

.hdr-brand {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 5.6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: opacity 0.3s ease;
}

.icon-btn:hover { opacity: 0.55; }

.hdr-menu { width: 24px; height: 24px; }

.hdr-icons {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ------------------------------------------------------------- hero */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  /* One screen, header included. svh is the viewport minus the mobile
     browser chrome, so the hero never ends up half-scrolled. */
  height: 100vh;
  height: calc(100svh - var(--bar));
}

@media (min-width: 700px) {
  .hero { max-height: 980px; }
}

.hero-media {
  position: relative;
  isolation: isolate;
  align-self: stretch;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* <picture> must not become a flex item between the media box and the frame. */
.hero-media picture { display: contents; }

.hero-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  z-index: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.24) 50%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.hero-copy {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(36px, 5vh, 64px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.hero-copy .rule-link { margin-top: 20px; }

@media (min-width: 700px) {
  .hero-copy { bottom: 64px; gap: 12px; }
  .hero-img { object-position: 50% 46%; }
}

/* ------------------------------------------------------ collections */

.collections {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
  background: var(--cream);
}

.collections-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 760px;
  padding: 0 15px;
}

/* The design sets this block 359.64px wide, which breaks the lede in two. */
.collections-head .lede {
  max-width: 360px;
  margin: 0 auto;
}

@media (min-width: 700px) {
  .collections-head { padding: 0 var(--gutter); }
  .collections-head .lede { max-width: none; }
}

.cards {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  margin-top: 48px;
}

@media (min-width: 900px) {
  .collections { padding-top: 120px; }
  .cards {
    flex-direction: row;
    margin-top: 64px;
  }
  .card { flex: 1 1 0; min-width: 0; }
}

.card {
  position: relative;
  isolation: isolate;
  align-self: stretch;
  aspect-ratio: 390 / 582.16;
  overflow: hidden;
}

/* Absolute, so the photograph's intrinsic height can never override the
   card's aspect ratio. */
.card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 1.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.card:hover .card-img { transform: scale(1.03); }

.card-copy {
  position: absolute;
  left: var(--gutter);
  bottom: 32px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card-copy .box-link { margin-top: 8px; }

/* -------------------------------------------------------- film band */

.film {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 780px;
  min-height: 600px;
  background: #000;
  overflow: hidden;
}

.film-band {
  position: relative;
  align-self: stretch;
  height: 260.5px;
  z-index: 1;
}

.film-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film-copy {
  position: relative;
  z-index: 4;
  align-self: stretch;
  padding: 88px var(--gutter) 0;
  text-align: center;
}

.film-copy .play { margin-left: auto; margin-right: auto; }

.play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-top: 26px;
  padding-left: 3px;
  border: 1px solid #fff;
  border-radius: 9999px;
  color: #fff;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.play:hover { background: #fff; color: #000; }

@media (min-width: 700px) {
  .film-band { height: 40vh; max-height: 440px; }
  .film-copy { padding-top: 96px; }
}

@media (min-width: 900px) {
  .film { height: 820px; }
  .film .display { font-size: clamp(30px, 3.2vw, 42px); letter-spacing: 5px; }
}

/* ----------------------------------------------------------- footer */

.ftr { background: var(--cream); }

.ftr-inner {
  padding: 80px var(--ftr-gutter);
  max-width: 1400px;
  margin: 0 auto;
}

/* newsletter */

.signup {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.signup .lede--left,
.signup .display--left { text-align: center; }

.signup-form { margin: 0; }

.signup-field {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
}

.signup-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.7px;
  color: var(--ink);
}

.signup-input::placeholder { color: var(--muted); }
.signup-input:focus { outline: none; }
.signup-field:focus-within { border-bottom-color: var(--ink); }

.signup-submit {
  margin-left: 8px;
  display: flex;
  transition: transform 0.3s ease;
}

.signup-submit:hover { transform: translateX(3px); }

.signup-note {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.7px;
  color: var(--muted);
}

.signup-note:not(:empty) { margin-top: 12px; }

/* editorial banner */

.banner {
  position: relative;
  isolation: isolate;
  display: block;
  height: 400px;
  margin-top: 48px;
  border-radius: 8px;
  overflow: hidden;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 1.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.banner:hover .banner-img { transform: scale(1.03); }

.banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.2);
}

.banner-copy {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.banner-copy .rule-link {
  align-items: flex-start;
}

.banner-tagline {
  font-family: var(--script);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.3px;
}

@media (min-width: 900px) {
  .banner { height: 480px; }
}

/* client services — the one block in the footer that asks for a conversation
   rather than a click, so it gets rules above and below and room to breathe */

.advisor {
  margin-top: 48px;
  padding: 36px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

.advisor-kicker {
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}

.advisor-line {
  margin: 16px auto 0;
  max-width: 34ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: var(--ink);
}

.advisor-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 24px;
}

@media (min-width: 900px) {
  .advisor { padding: 48px 0; }
  .advisor-line { max-width: 44ch; font-size: 24px; line-height: 36px; }
}

/* link groups — shown open rather than folded behind a plus. There is no
   reason to hide five links behind a tap, and the collapsed version left the
   footer looking empty. */

.ftr-groups {
  margin-top: 44px;
  display: grid;
  gap: 36px;
}

.ftr-group-title {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink);
}

.ftr-groups { text-align: center; }

.ftr-group-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ftr-group-links a {
  font-weight: 300;
  font-size: 15px;
  line-height: 22px;
  color: var(--muted);
  transition: color 0.3s ease;
}

.ftr-group-links a:hover { color: var(--ink); }

@media (min-width: 700px) {
  .ftr-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 64px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* region + socials */

.region {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}

.region-btn {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.7px;
  transition: opacity 0.3s ease;
}

.region-btn:hover { opacity: 0.6; }
.region-current { margin-left: 4px; }

.region-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.region-list[hidden] { display: none; }

.region-list button {
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.7px;
  color: var(--muted);
  transition: color 0.3s ease;
}

.region-list button:hover { color: var(--ink); }

.social {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
}

.social a {
  display: flex;
  color: var(--ink);
  transition: opacity 0.3s ease;
}

.social a:hover { opacity: 0.55; }

/* signature — the design left 128px of air above the wordmark. The brand line
   now occupies some of it, so the gap closes to 88px and the block reads as
   one thing rather than a mark adrift at the bottom of the page. */

.signature {
  padding: 48px 0 0;
  text-align: center;
}

.signature-mark {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 5.6px;
  text-transform: uppercase;
}

.signature-line {
  margin: 14px auto 0;
  max-width: 30ch;
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  color: var(--muted);
}

.signature-line--script {
  font-family: var(--script);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.5;
  color: #6b7280;
  max-width: 36ch;
  letter-spacing: 0.2px;
}

/* legal */

.legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.legal-copy,
.legal-links a {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
}

.legal-links {
  display: flex;
  gap: 24px;
}

.legal-links a { transition: color 0.3s ease; }
.legal-links a:hover { color: var(--ink); }

@media (min-width: 900px) {
  .legal { margin-top: 56px; }
  .signature-line { max-width: 42ch; }
}

/* ------------------------------------------------------------- menu */

.nav {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.nav-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.nav-panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(420px, 88vw);
  display: flex;
  flex-direction: column;
  padding: 24px 20px 40px;
  background: #fff;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nav.is-open .nav-scrim { opacity: 1; }
.nav.is-open .nav-panel { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-scrim, .nav-panel { transition: none; }
}

.nav-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
}

.nav-brand {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 5.6px;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  flex-direction: column;
  margin-top: 48px;
}

.nav-links a {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 1px;
  transition: opacity 0.3s ease;
}

.nav-links a:hover { opacity: 0.55; }

.nav-sub {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 40px;
}

.nav-sub a {
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.7px;
  color: var(--muted);
}

.nav-sub a:hover { color: var(--ink); }

/* ---------------------------------------------------------- video */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox[hidden] { display: none; }

.lightbox-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
}

.lightbox-body {
  position: relative;
  width: min(1100px, 92vw);
}

.lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  color: #fff;
}

.lightbox-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.lightbox-stage video,
.lightbox-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lightbox-fallback {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 28px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 3.6px;
  text-transform: uppercase;
}

/* ------------------------------------------- small-screen tracking

   The High Jewellery page steps its letter-spacing down below 700px — its
   wordmark goes 14/5.6 to 12/4, its title 6px to 4px — while this page held
   the design's 390px values at every width. Set beside each other the home
   page read noticeably looser. These are the same values that page uses, so
   one tracking scale now runs across the site. */

@media (max-width: 700px) {
  .hdr-brand { font-size: 12px; letter-spacing: 4px; }
  .nav-brand { font-size: 12px; letter-spacing: 4px; }

  .hero-title { font-size: 22px; letter-spacing: 5px; }
  .hero-tagline { font-size: 20px; }
  .card-title { letter-spacing: 2.6px; }
  .eyebrow { letter-spacing: 2.6px; }
  .rule-link { letter-spacing: 3px; }
  .box-link { letter-spacing: 3px; }
  .ftr-group-title { letter-spacing: 2.6px; }
  .skip { letter-spacing: 3px; }

  .signature-mark { font-size: 13px; letter-spacing: 5.6px; }
  .signature-line--script { font-size: 18px; }
}

@media (max-width: 380px) {
  .hdr-brand { font-size: 11px; letter-spacing: 2.4px; }
  .hero-title { font-size: 19px; letter-spacing: 4px; }
  .hero-tagline { font-size: 18px; }
  .card-title { letter-spacing: 2.4px; }
}

/* --------------------------------------------------- mobile action bar

   Menu, phone and enquiry within thumb reach, in the same restrained
   register as the header: a hairline rule, line icons, small tracked
   labels. Hidden from 700px up, where the header already carries these. */

.bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #fff;
  border-top: 1px solid var(--rule);
}

.bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 6px calc(9px + env(safe-area-inset-bottom, 0px));
  color: var(--ink);
  transition: opacity 0.3s ease;
}

.bar-item + .bar-item { box-shadow: inset 1px 0 0 var(--rule); }

.bar-item:active { opacity: 0.5; }

.bar-label {
  font-weight: 500;
  font-size: 9px;
  line-height: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

@media (min-width: 700px) {
  .bar { display: none; }
}