/* ============================================================
   KEVO — Art of Jewels · futuristic light theme
   Cormorant (display) + Montserrat (body)
   ============================================================ */
:root{
  --bg:#ffffff;
  --bg-soft:#faf9f6;
  --bg-warm:#f5f1ea;
  --ink:#003145;         /* was #0c0a09 — all copy now uses the logo navy */
  --brand:#003145;         /* logo navy — sampled from Kevologo-website-new.png */
  --brand-soft:#1b4a5e;    /* lighter navy for hovers */
  --ink-soft:#4a5b66;    /* cooled to sit under the navy copy */
  --line:#ece7dd;
  --line-2:#e2dccf;
  --gold:#a97e34;          /* AA-contrast gold for text/links */
  --gold-2:#c6a15b;        /* decorative */
  --gold-3:#e9d5a1;        /* light champagne */
  --grad-gold:linear-gradient(120deg,#e9d5a1 0%,#c6a15b 45%,#a97e34 100%);
  --shadow-s:0 4px 24px rgba(60,48,20,.06);
  --shadow-m:0 18px 60px rgba(60,48,20,.10);
  --radius:18px;
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Noctado is a licensed face and is NOT bundled — drop the files into
     assets/fonts/ (see @font-face below) and it takes over automatically.
     Until then the stack falls back to Cormorant, the current display serif. */
  --font-display:'Noctado','Cormorant',Georgia,'Times New Roman',serif;
  --font-body:'Helvetica Neue','HelveticaNeue',Helvetica,Arial,'Segoe UI',system-ui,sans-serif;
}

/* Helvetica Neue ships with macOS/iOS only. On Windows and Android the stack
   falls through to Arial, which shares Helvetica's metrics so the layout holds. */
/* Noctado ships as Regular + Italic only (Letterena Studios) — there is no
   Medium or SemiBold to buy. The site asks for weights 500 and 600 in ~15
   places, so a single face is declared across the whole 400-700 range: every
   one of those requests resolves to the Regular file instead of 404-ing and
   dropping back to Cormorant. Italic is optional; drop the file in and
   uncomment to enable it. */
@font-face{
  font-family:'Noctado';
  src:url('assets/fonts/Noctado-Regular.woff2') format('woff2'),
      url('assets/fonts/Noctado-Regular.woff') format('woff');
  font-weight:400 700; font-style:normal; font-display:swap;
}
/*
@font-face{
  font-family:'Noctado';
  src:url('assets/fonts/Noctado-Italic.woff2') format('woff2');
  font-weight:400 700; font-style:italic; font-display:swap;
}
*/
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:italic}

/* ---------- shared type ---------- */
.display{font-family:var(--font-display);font-weight:500;line-height:.98;letter-spacing:-.01em;
  font-size:clamp(2.8rem,7.2vw,5.6rem)}
.display em{color:var(--gold);font-weight:500}
.display-2{font-family:var(--font-display);font-weight:500;line-height:1.02;letter-spacing:-.01em;
  font-size:clamp(2.3rem,5vw,3.6rem)}
.eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  font-weight:500;color:var(--gold);margin-bottom:1rem}
.eyebrow.center{display:block;text-align:center}
.section-sub{max-width:46ch;margin:.9rem auto 0;text-align:center;color:var(--ink-soft)}

/* ---------- buttons ---------- */
.btn-gold,.btn-line,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-body);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:1rem 2rem;border-radius:100px;cursor:pointer;transition:.4s var(--ease);border:1px solid transparent;
  white-space:nowrap;
}
.btn-gold{background:var(--grad-gold);
  /* The button keeps a 1px TRANSPARENT border for size parity with .btn-line.
     Left at the defaults the gradient tile is sized to the padding box and then
     tiled to fill the border box, so that 1px ring shows the gradient wrapping —
     its light start colour butted against its dark end — as a pale fringe round
     the whole pill. Painting one copy from the border box removes it. */
  background-origin:border-box;background-clip:border-box;
  background-repeat:no-repeat;   /* no background-size: 'auto' already fills the
     border-box positioning area, and setting it here would fight the fx sheen,
     whose first layer must stay narrower than the button. */
  color:var(--brand);box-shadow:0 6px 18px rgba(169,126,52,.18)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(169,126,52,.30);filter:brightness(1.04)}
.btn-line{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.btn-ghost{padding:.6rem 1.3rem;border-color:var(--line-2);color:var(--ink);font-size:.7rem}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ============ TOP BAR ============ */
.switch{display:flex;gap:.15rem}
.switch button{background:none;border:none;color:#9db3bd;font-size:.68rem;letter-spacing:.1em;
  padding:.2rem .45rem;cursor:pointer;border-radius:4px;transition:.25s;font-family:inherit}
.switch button.on,.switch button:hover{color:var(--gold-3)}
.divider-dot{width:4px;height:4px;border-radius:50%;background:#3b6274}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:100;transition:.5s var(--ease);
  background:rgba(255,255,255,.62);border-bottom:1px solid rgba(236,231,221,.7)}
/* Blur lives on a child, not on .nav itself: backdrop-filter on an element makes it
   the containing block for position:fixed descendants, which shrank the mobile
   drawer to a stub inside the header. */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4)}
.nav.scrolled{background:rgba(255,255,255,.9);box-shadow:var(--shadow-s)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:1rem 24px;display:flex;align-items:center;
  gap:1.5rem;justify-content:space-between}
.brand img{height:74px;width:auto;transition:.4s}
.nav.scrolled .brand img{height:58px}
.brand-text{font-family:var(--font-display);font-size:2rem;font-weight:600;letter-spacing:.18em;color:var(--brand)}
.brand-text.big{font-size:2.6rem}
.nav-links{display:flex;gap:2rem;flex:1;justify-content:center}
.nav-links a{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--brand);
  position:relative;padding:.3rem 0;transition:.3s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;
  background:var(--grad-gold);transition:.4s var(--ease)}
.nav-links a:hover{color:var(--gold)}
.nav-links a:hover::after{width:100%}
.nav-links a[aria-current=page]{color:var(--gold)}
.nav-links a[aria-current=page]::after{width:100%}
.dd-panel a[aria-current=page]{color:var(--gold)}
.nav-actions{display:flex;align-items:center;gap:.9rem}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:var(--brand);
  border:1px solid transparent;transition:.3s}
.icon-btn svg{width:19px;height:19px}
.icon-btn:hover{color:var(--gold);border-color:var(--line-2)}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.nav-burger span{width:24px;height:1.5px;background:var(--brand);transition:.35s var(--ease)}
.nav-burger.open span:first-child{transform:translateY(6.5px) rotate(45deg)}
.nav-burger.open span:last-child{transform:translateY(-6.5px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{position:relative;padding:clamp(1.25rem,3vw,2.5rem) 24px clamp(2rem,4vw,3.5rem);overflow:hidden;
  min-height:calc(100vh - 224px);min-height:calc(100dvh - 224px);
  display:flex;flex-direction:column;justify-content:center}
.hero-glow{position:absolute;top:-15%;right:-5%;width:60vw;max-width:720px;aspect-ratio:1;
  background:radial-gradient(circle,rgba(233,213,161,.5),rgba(233,213,161,0) 62%);
  filter:blur(20px);z-index:0;animation:floaty 9s ease-in-out infinite}

.hero .hero-grid{position:relative;z-index:2}
.hero .scroll-hint{z-index:2}
.hero-grid{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero-copy .lede{font-size:1.02rem;color:var(--ink-soft);max-width:44ch;margin:1.2rem 0 1.7rem}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}
.hero-foot{margin-top:1.7rem;font-size:.8rem;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase;text-wrap:balance}
.hero-foot b{color:var(--ink);white-space:nowrap}
.hero-piece{position:relative;display:grid;place-items:center;min-height:360px}
.halo{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(245,241,234,.6) 40%,rgba(245,241,234,0) 70%);
  box-shadow:inset 0 0 80px rgba(198,161,91,.15);animation:pulse 7s ease-in-out infinite}
.halo::after{content:"";position:absolute;inset:6%;border-radius:50%;border:1px solid rgba(198,161,91,.25)}
.hero-img{position:relative;z-index:2;width:86%;max-width:440px;border-radius:50%;
  aspect-ratio:1;object-fit:cover;box-shadow:var(--shadow-m)}
.hero-piece.img-fallback .hero-img{display:none}
.hero-piece.img-fallback .halo::before{content:"◆";position:absolute;inset:0;display:grid;place-items:center;
  font-size:5rem;color:var(--gold-2)}
.scroll-hint{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:1}
.scroll-hint span{display:block;width:1px;height:46px;background:linear-gradient(var(--gold-2),transparent);
  position:relative;overflow:hidden}
.scroll-hint span::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;
  background:var(--gold);animation:scrolldot 2.4s var(--ease) infinite}

/* ============ MARQUEE ============ */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-soft);overflow:hidden;padding:1.1rem 0}
.marquee-track{display:flex;align-items:center;gap:2.6rem;white-space:nowrap;width:max-content;
  animation:marquee 34s linear infinite;font-family:var(--font-display);font-size:1.7rem;color:var(--ink)}
.marquee-track .dia{color:var(--gold-2);font-size:.8rem}

/* ============ SECTIONS ============ */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(4.5rem,9vw,8rem) 24px}
.section-head{text-align:center;margin-bottom:3.2rem}

/* categories */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;max-width:820px;margin:0 auto}
.chip{padding:.85rem 1.7rem;border:1px solid var(--line-2);border-radius:100px;font-size:.82rem;
  letter-spacing:.06em;color:var(--ink);transition:.35s var(--ease);background:var(--bg)}
.chip:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow-s)}

/* collections */
.collections{background:linear-gradient(var(--bg),var(--bg-soft))}
.col-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.col-card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;
  display:flex;align-items:flex-end;border:1px solid var(--line);background:var(--bg-warm);
  box-shadow:var(--shadow-s);transition:.5s var(--ease)}
.col-media{position:absolute;inset:0;background-image:var(--img);background-size:var(--size,cover);background-position:var(--pos,center);
  transition:1.1s var(--ease)}
.col-card::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.72) 72%,rgba(255,255,255,.95) 100%)}
.col-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.col-card:hover .col-media{transform:scale(1.06)}
.col-body{position:relative;z-index:2;padding:2rem;width:100%}
.col-body h3{font-family:var(--font-display);font-size:2.6rem;font-weight:600;line-height:1}
.col-body p{color:var(--ink-soft);font-size:.9rem;margin:.5rem 0 1rem;max-width:34ch}
.col-link{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
.col-link::after{content:" →";transition:.3s}
.col-card:hover .col-link::after{margin-left:4px}

/* featured pieces */
.piece-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.piece{border-radius:14px;overflow:hidden;background:var(--bg-soft);border:1px solid var(--line);transition:.5s var(--ease)}
.piece-img{aspect-ratio:1;overflow:hidden;background:var(--bg-warm)}
.piece-img img{width:100%;height:100%;object-fit:cover;transition:1s var(--ease)}
.piece:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:var(--line-2)}
.piece:hover .piece-img img{transform:scale(1.08)}
.piece figcaption{padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.15rem}
.piece figcaption span{font-family:var(--font-display);font-size:1.3rem;font-weight:600;line-height:1}
.piece figcaption em{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-style:normal}
.center-cta{text-align:center;margin-top:3rem}

/* story */
.story{max-width:100%;background:var(--bg-soft);padding-left:0;padding-right:0}
.story-grid{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:grid;
  grid-template-columns:1fr 1fr;gap:3.5rem;align-items:stretch}
.story-media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-m);
  min-height:520px;background:var(--bg-warm)}
.story-media img{width:100%;height:100%;object-fit:cover}
.story-media.img-fallback{display:grid;place-items:center}
.story-media.img-fallback img{display:none}
.story-media.img-fallback::after{content:"◆";font-size:5rem;color:var(--gold-2)}
.story-badge{position:absolute;left:1.2rem;bottom:1.2rem;z-index:2;padding:.9rem 1.3rem;border-radius:12px;
  background:rgba(255,255,255,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.6);box-shadow:var(--shadow-s)}
.story-badge b{display:block;font-family:var(--font-display);font-size:1.3rem;font-weight:600}
.story-badge span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.story-copy p{color:var(--ink-soft);margin-bottom:1.1rem;max-width:48ch}
.story-copy blockquote{font-family:var(--font-body);font-style:normal;font-size:1rem;line-height:1.75;
  color:var(--ink-soft);margin:0 0 1.1rem;padding:0;border:none;max-width:48ch}

/* celebrities */
.celeb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.celeb{text-align:center}
.celeb-img{aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--bg-warm);
  border:1px solid var(--line);position:relative}
.celeb-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(169,126,52,.06))}
.celeb-img img{width:100%;height:100%;object-fit:cover;transition:1s var(--ease);filter:saturate(.96)}
.celeb:hover .celeb-img img{transform:scale(1.06)}
.celeb figcaption{margin-top:.9rem;font-family:var(--font-display);font-size:1.25rem;font-weight:600}

/* newsletter */
.newsletter{padding-top:0}
.news-card{position:relative;overflow:hidden;text-align:center;border-radius:26px;padding:clamp(2.5rem,4.5vw,3.6rem) 1.5rem;
  background:linear-gradient(160deg,var(--bg-warm),#fff);border:1px solid var(--line-2);box-shadow:var(--shadow-s)}
.news-glow{position:absolute;top:-18%;left:50%;transform:translateX(-50%);width:46%;aspect-ratio:1;z-index:0;
  background:radial-gradient(circle,rgba(233,213,161,.45),transparent 62%);filter:blur(6px)}
.news-card>*:not(.news-glow){position:relative;z-index:1}
.news-card p{color:var(--ink-soft);max-width:40ch;margin:.6rem auto 1.8rem}
.news-form{display:flex;gap:.7rem;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.news-form input{flex:1;min-width:220px;padding:1rem 1.4rem;border-radius:100px;border:1px solid var(--line-2);
  background:#fff;font-family:inherit;font-size:.9rem}
.news-form input:focus{outline:none;border-color:var(--gold)}
.news-msg{min-height:1.2em;margin-top:1rem;font-size:.82rem;color:var(--gold);letter-spacing:.04em}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.contact-grid{max-width:960px;margin-left:auto;margin-right:auto}
.contact-grid.two{grid-template-columns:1fr 1fr;gap:1.5rem;max-width:var(--maxw)}
@media(max-width:560px){ .contact-grid.two{grid-template-columns:1fr} }
.contact-card{padding:1.4rem 1.3rem;border:1px solid var(--line);border-radius:12px;background:transparent;
  transition:.4s var(--ease);display:flex;flex-direction:column;gap:.5rem;text-align:center;align-items:center}
.contact-card:hover{border-color:var(--gold-3);background:var(--bg-soft);transform:translateY(-3px)}
.cc-k{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600}
.cc-v{font-family:var(--font-body);font-size:.92rem;font-weight:500;color:var(--ink);letter-spacing:.01em;overflow-wrap:anywhere}

/* ============ FOOTER ============ */
.footer{background:var(--brand);color:#bcccd4;padding:4.5rem 24px 2rem}
.footer-top{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.14)}
.footer-brand img{height:106px;width:auto;max-width:100%;filter:brightness(0) invert(1);opacity:.92;margin-bottom:1.1rem}
.footer-brand .brand-text{color:#fff}
.footer-brand p{font-size:.85rem;max-width:34ch;line-height:1.7}
.footer-social{display:flex;gap:.7rem;margin-top:1.3rem}
.footer-social a{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);color:#bcccd4;transition:.3s}
.footer-social a svg{width:18px;height:18px}
.footer-social a:hover{color:var(--gold-3);border-color:var(--gold)}
.footer-col h4{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:#fff;margin-bottom:1rem}
.footer-col a{display:block;font-size:.85rem;padding:.35rem 0;color:#bcccd4;transition:.25s}
.footer-col a:hover{color:var(--gold-3);padding-left:5px}
.footer-bottom{max-width:var(--maxw);margin:2rem auto 0;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:.72rem;letter-spacing:.06em;color:#8aa3b0}

/* ============ REVEAL ANIMATION ============ */
.js .reveal{opacity:0;transform:translateY(28px);transition:1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ============ KEYFRAMES ============ */
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(26px)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.04);opacity:.85}}
@keyframes scrolldot{0%{top:-40%}100%{top:100%}}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  .piece-grid,.celeb-grid{grid-template-columns:repeat(3,1fr)}
  .col-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:820px){
  .nav-links{display:none;position:fixed;inset:0 0 0 auto;width:min(calc(100vw - 78px),340px);flex-direction:column;
    justify-content:center;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    padding:2rem;gap:1.4rem;box-shadow:-20px 0 60px rgba(0,0,0,.08);z-index:90}
  .nav-links.open{display:flex;animation:navIn .35s var(--ease)}
  /* The panel is anchored to the right edge (inset:0 0 0 auto), so sliding it in
     with translateX pushed it 24px PAST the viewport for the whole 350ms and gave
     the page a transient horizontal scroll. A clip-path wipe reads the same way
     — revealing right to left — but the box never moves, so it cannot overflow.
     (Clipping this at the root instead would risk the overflow-x trap that broke
     page scroll and the sticky nav here before.) */
  @keyframes navIn{from{opacity:0;clip-path:inset(0 0 0 35%)}to{opacity:1;clip-path:inset(0 0 0 0)}}
  .nav-links a{font-size:1rem}
  .nav-burger{display:flex;order:-1}
  .brand{position:absolute;left:50%;transform:translateX(-50%)}
  .brand img{height:50px}
  .nav.scrolled .brand img{height:44px}
  .nav-actions .icon-btn{display:none}
  .nav-inner{justify-content:space-between}
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:1.5rem}
  .hero::before{background-position:center, center, 58% 14%}
  .hero-copy .lede,.hero-foot{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .hero-piece{order:-1;min-height:300px}
  .hero-img{width:66%}
  .story-grid{grid-template-columns:1fr;gap:2rem}
  .story-media{order:-1;min-height:0;width:100%;aspect-ratio:4/5}
}
@media(max-width:560px){
      .piece-grid,.celeb-grid{grid-template-columns:1fr 1fr}
  .contact-grid,.contact-grid.two{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .nav-actions .btn-ghost{display:none}
  .btn-gold,.btn-line{padding:.9rem 1.5rem}
  .section{padding:4rem 20px}
}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-glow,.halo{animation:none}
}

/* ============ NAV DROPDOWN ============ */
.has-dd{position:relative;display:flex;align-items:center}
.dd-toggle{display:none;background:none;border:none;color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer}
/* Scoped to desktop deliberately. These were unscoped, so the mobile block had to
   undo them one property at a time — it unset background, border and box-shadow but
   left backdrop-filter, border-radius, padding and top/left in place. On iOS those
   leftovers painted a frosted white card over the drawer submenu and swallowed the
   links. Confined here, mobile starts from a clean slate instead. */
@media(min-width:821px){
  .dd-panel{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(8px);
    background:rgba(255,255,255,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-m);padding:1.6rem 2rem;display:flex;gap:2.6rem;
    opacity:0;visibility:hidden;transition:.35s var(--ease);z-index:120}
  .has-dd:hover .dd-panel,.has-dd:focus-within .dd-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
}
.dd-col{display:flex;flex-direction:column;min-width:140px}
.dd-h{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem;font-weight:600}
.dd-panel a{font-size:.85rem;letter-spacing:.03em;color:var(--brand);padding:.42rem 0;text-transform:none;font-weight:400}
.dd-panel a::after{display:none!important}
.dd-panel a:hover{color:var(--gold);padding-inline-start:5px}
.dd-all{border-top:1px solid var(--line);margin-top:.5rem;padding-top:.7rem!important;color:var(--gold)!important;font-weight:500!important}

/* ============ INNER PAGE HERO ============ */
.page-hero{position:relative;text-align:center;overflow:hidden;
  padding:clamp(3rem,6vw,5rem) 24px clamp(2rem,3.5vw,3rem)}
.page-hero .hero-glow{top:-30%;right:auto;left:50%;transform:translateX(-50%);width:50vw}
.page-hero .eyebrow{position:relative;z-index:1}
.page-hero h1{position:relative;z-index:1;font-family:var(--font-display);font-weight:500;line-height:1;
  letter-spacing:-.01em;font-size:clamp(2.8rem,7vw,5rem)}
.page-hero .page-sub{position:relative;z-index:1;max-width:52ch;margin:1rem auto 0;color:var(--ink-soft)}

/* ============ SHOP / FILTER ============ */
.filter-bar{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:2.6rem}
.filter-bar button{padding:.6rem 1.3rem;border:1px solid var(--line-2);border-radius:100px;background:var(--bg);
  font-family:inherit;font-size:.76rem;letter-spacing:.05em;color:var(--ink-soft);cursor:pointer;transition:.3s var(--ease)}
.filter-bar button.on,.filter-bar button:hover{border-color:var(--gold);color:var(--gold)}
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.shop-empty{grid-column:1/-1;text-align:center;color:var(--ink-soft);padding:3.5rem 1rem;
  font-family:var(--font-display);font-size:1.6rem}
.piece.hide{display:none}
.piece-tag{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.2rem}
.piece-price{color:var(--gold)!important;text-transform:none!important;font-weight:500;letter-spacing:.02em!important;font-style:normal;margin-top:.15rem}
.shop-count{text-align:center;color:var(--ink-soft);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;margin:-1rem 0 1.8rem}

/* ============ OUR WORLD PAGE ============ */
.ow-values{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1rem}
.ow-value{padding:2rem;border:1px solid var(--line);border-radius:16px;background:var(--bg-soft)}
.ow-value h3{font-family:var(--font-display);font-size:1.7rem;font-weight:600;margin-bottom:.5rem}
.ow-value p{color:var(--ink-soft);font-size:.9rem}
.ow-value .num{font-family:var(--font-display);font-size:2.6rem;color:var(--gold);line-height:1}
.world-kevo .wk-body{max-width:760px;margin:0 auto;text-align:center}
.wk-body p{color:var(--ink-soft);margin-bottom:1.5rem;line-height:1.95;font-size:1.02rem}
.wk-body .wk-italic{font-family:var(--font-display);font-style:italic;font-size:clamp(1.35rem,2.4vw,1.7rem);
  line-height:1.55;color:var(--ink);max-width:640px;margin:2rem auto 0}
[dir=rtl] .wk-body .wk-italic{font-family:'Noto Kufi Arabic',sans-serif;font-style:normal}

/* ============ CONTACT PAGE ============ */
.addr-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:var(--maxw);margin:0 auto 1.5rem}
.addr{padding:2.2rem;border:1px solid var(--line-2);border-radius:18px;background:var(--bg-soft);transition:.4s var(--ease)}
.addr:hover{border-color:var(--gold);box-shadow:var(--shadow-s)}
.addr h3{font-family:var(--font-display);font-size:1.9rem;font-weight:600;margin-bottom:.3rem}
.addr .addr-line{color:var(--ink-soft);margin-bottom:1rem;line-height:1.7}
.addr a{display:inline-flex;align-items:center;gap:.5rem;color:var(--gold);font-size:.9rem;font-weight:500;margin-inline-end:1.2rem}
.addr-map{width:100%;height:210px;border:0;border-radius:12px;margin-top:1.3rem;filter:grayscale(.35) contrast(1.03);
  border:1px solid var(--line)}
.enquiry{max-width:var(--maxw);margin:0 auto;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:22px;padding:clamp(2rem,4vw,3rem)}
.enquiry .form-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.enquiry input,.enquiry textarea{width:100%;padding:.95rem 1.2rem;border:1px solid var(--line-2);border-radius:12px;
  font-family:inherit;font-size:.9rem;background:#fff}
.enquiry input:focus,.enquiry textarea:focus{outline:none;border-color:var(--gold)}
.enquiry .full{grid-column:1/-1}
.enquiry textarea{min-height:120px;resize:vertical}

/* ============ RTL / ARABIC ============ */
[dir=rtl] body{font-family:'Noto Kufi Arabic',var(--font-body)}
[dir=rtl] .display,[dir=rtl] .display-2,[dir=rtl] .page-hero h1,[dir=rtl] .col-body h3,
[dir=rtl] .footer-col h4,[dir=rtl] .cc-v,[dir=rtl] .story-badge b,[dir=rtl] .piece figcaption span,
[dir=rtl] .celeb figcaption,[dir=rtl] .brand-text,[dir=rtl] .story-copy blockquote,
[dir=rtl] .addr h3,[dir=rtl] .ow-value h3,[dir=rtl] .shop-empty{font-family:'Noto Kufi Arabic',sans-serif;font-weight:600}
[dir=rtl] .display{line-height:1.25}
[dir=rtl] .eyebrow,[dir=rtl] .nav-links a,[dir=rtl] .chip,[dir=rtl] .btn-gold,[dir=rtl] .btn-line,
[dir=rtl] .btn-ghost,[dir=rtl] .cc-k,[dir=rtl] .dd-h,[dir=rtl] .hero-foot,[dir=rtl] .topbar-note,
[dir=rtl] .filter-bar button,[dir=rtl] .piece-tag,[dir=rtl] .footer-locale,[dir=rtl] .col-link,
[dir=rtl] .piece figcaption em{letter-spacing:normal}
[dir=rtl] .marquee-track{animation-direction:reverse}
[dir=rtl] .story-copy blockquote{border:none;padding:0}
[dir=rtl] .story-badge{left:auto;right:1.2rem}
[dir=rtl] .col-link::after{content:" ←"}
[dir=rtl] .footer-col a:hover{padding-left:0;padding-right:5px}

/* ============ EXTRA RESPONSIVE ============ */
@media(max-width:1024px){ .shop-grid{grid-template-columns:repeat(3,1fr)} .ow-values{grid-template-columns:1fr} }
@media(max-width:820px){
  .dd-toggle{display:block;order:3}
  .has-dd{flex-wrap:wrap;justify-content:space-between;align-items:center;width:100%;gap:.4rem}
  .dd-panel{position:static;transform:none;opacity:1;visibility:visible;display:none;box-shadow:none;border:none;
    background:transparent;padding:.6rem 0 0;flex-basis:100%;flex-direction:row;justify-content:center;gap:2rem}
  .has-dd.open .dd-panel{display:flex}
  .dd-panel a{text-align:center}
  .addr-grid,.enquiry .form-2{grid-template-columns:1fr}
}
@media(max-width:560px){ .shop-grid{grid-template-columns:1fr 1fr} .dd-panel{flex-direction:column;gap:1.2rem;text-align:center} }

/* ============ BRAND HEADER (logo navy #003145) ============
   Everything inside the header carries the logo colour. Scoped to .nav so
   the "Enquire" ghost button elsewhere on the page keeps its own styling. */
.nav .dd-toggle{ color:var(--brand); border-color:var(--brand); }
.nav .btn-ghost{ color:var(--brand); }
.nav .btn-ghost:hover{ color:var(--gold); }

/* active currency in the footer strip */
.footer-locale [data-cur]{opacity:.55;transition:.25s}
.footer-locale [data-cur].cur-on{opacity:1;color:var(--gold-3);font-weight:600}

/* the logo is 2.81:1 — at full height it would outgrow a narrow footer column */
@media(max-width:900px){ .footer-brand img{height:88px} }
@media(max-width:560px){ .footer-brand img{height:72px} }

/* build credit — quiet by default, brand gold on hover */
.footer-credit{color:#7f97a4}
.footer-credit a{color:#a8bcc7;border-bottom:1px solid rgba(168,188,199,.32);
  padding-bottom:1px;transition:.25s}
.footer-credit a:hover{color:var(--gold-3);border-bottom-color:var(--gold)}
@media(max-width:640px){ .footer-bottom{flex-direction:column;align-items:flex-start;gap:.6rem} }

/* Honeypot. It used to be parked at left:-9999px, which is invisible in LTR but
   in RTL sits OUTSIDE the flipped origin and stretched the page ~10,000px wide.
   The clip technique hides it with no off-screen coordinates, so it is
   direction-safe and still looks like a real field to a bot. */
.hp-field{position:absolute!important;width:1px!important;height:1px!important;
  min-width:0!important;max-width:1px!important;margin:-1px!important;padding:0!important;
  border:0!important;overflow:hidden!important;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;opacity:0}

/* ============================================================
   MOBILE TOUCH & LEGIBILITY
   These were all comfortable with a mouse and awkward with a thumb:
   the burger was 36x20, the currency and language buttons 18px tall,
   and the contact card's call/directions links 23px. Padding only —
   the type scale is deliberately small and stays as designed, apart
   from the few labels that fell under 11px on a phone.
   ============================================================ */
@media(max-width:900px){
  /* the primary way to navigate on a phone — must be a full target */
  .nav-burger{padding:12px;gap:5px;min-width:44px;min-height:44px;
    align-items:center;justify-content:center}
  .nav-burger span{width:26px}

  /* currency + language: 18px tall was barely tappable */
  .switch{gap:.25rem}
  .switch button{padding:.55rem .6rem;min-height:36px;display:inline-flex;align-items:center}
  }
@media(max-width:720px){
  /* contact card actions — 'Call' is the point of this page on a phone */
  .addr a{display:inline-block;padding-block:.5rem;min-height:36px}
  .addr a + a{margin-inline-start:1rem}

  /* labels that dropped below 11px on mobile */
  .cc-k{font-size:.68rem}
  /* .piece figcaption em (0,1,2) outranks .piece-price (0,1,0) — a media query
     adds no specificity, so the selector has to match it. */
  .piece figcaption em.piece-price{font-size:.82rem}
}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pd-wrap{max-width:var(--maxw);margin-inline:auto;padding:clamp(1.5rem,4vw,3rem) 24px 5rem}
.pd-back{display:inline-block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:2rem;transition:color .25s}
.pd-back:hover{color:var(--gold)}
.pd{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.pd-main{background:var(--bg-soft);border-radius:6px;overflow:hidden;aspect-ratio:1;
  display:grid;place-items:center}
.pd-main img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pd-thumbs{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}
.pd-thumb{width:70px;height:70px;padding:0;border:1px solid var(--line);border-radius:4px;
  background:var(--bg-soft);cursor:pointer;overflow:hidden;transition:border-color .25s}
.pd-thumb.on,.pd-thumb:hover{border-color:var(--gold)}
.pd-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pd-collection{display:block;margin-bottom:.7rem}
.pd h1{font-family:var(--font-display);font-size:clamp(2rem,3.6vw,2.9rem);font-weight:500;
  line-height:1.05;margin-bottom:.6rem}
.pd-price{font-family:var(--font-display);font-size:1.5rem;color:var(--gold);margin-bottom:.3rem}
.pd-ref{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:1.6rem}
.pd-desc{line-height:1.85;color:var(--ink-soft);margin-bottom:1.8rem;max-width:52ch}
.pd-specs{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.4rem;margin-bottom:1.9rem;
  padding-block:1.3rem;border-block:1px solid var(--line);font-size:.9rem}
.pd-specs dt{color:var(--ink-soft)}
.pd-specs dd{font-weight:500}
.pd-opt{margin-bottom:1.4rem}
.pd-opt-label{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.6rem}
.pd-swatches{display:flex;gap:1.1rem;flex-wrap:wrap}
.pd-sw{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem}
.pd-sw i{width:17px;height:17px;border-radius:50%;border:1px solid var(--line-2);display:inline-block}
.pd-select{padding:.7rem .9rem;border:1px solid var(--line-2);border-radius:4px;background:#fff;
  font-family:inherit;font-size:.9rem;color:var(--ink);min-width:min(280px,100%)}
.pd-cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}
.pd-note{margin-top:1.3rem;font-size:.82rem;color:var(--ink-soft);line-height:1.7;max-width:48ch}
.pd-missing{text-align:center;padding:5rem 0;color:var(--ink-soft)}
@media(max-width:820px){
  .pd{grid-template-columns:1fr;gap:2rem}
  .pd-thumb{width:58px;height:58px}
}
/* the grid tile is an <a> now, so keep it looking like the old figure */
a.piece{display:block;color:inherit;text-decoration:none}
a.piece:hover figcaption span:nth-child(2){color:var(--gold)}
/* banner shown when an enquiry arrives from a product page */
.enq-about{background:var(--bg-warm);border-left:2px solid var(--gold);border-radius:3px;
  padding:.85rem 1.1rem;margin-bottom:1.4rem;font-size:.9rem;color:var(--ink)}
.enq-about strong{font-family:var(--font-display);font-size:1.05rem;font-weight:600}
.enq-about span{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:.2rem}


/* ============================================================
   HERO — film, Option B1
   The scrim runs LEFT-TO-RIGHT rather than only bottom-up. The text
   column then sits on shade at any height, which is what failed
   before: a bottom-only scrim was outgrown by the text block and the
   headline landed on bare yellow. The right of the frame stays clear
   so the footage still reads.
   ============================================================ */
.hero.hero-film{
  position:relative; overflow:hidden;
  min-height:min(92vh,780px);
  /* the base .hero is flex-direction:column, so the vertical axis is the MAIN
     axis — justify-content moves the block down, align-items would not. */
  display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch;
  padding:0;
}
/* The still frame sits behind the video at every size. If the video is blocked,
   still loading, or missing a source, the hero degrades to the poster instead of
   going blank — which is exactly what the missing hero.webm caused in production. */
.hero.hero-film{background:#0b1a22 url('assets/hero-poster.jpg') center/cover no-repeat}
.hero-film .hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:64% 26%;
  z-index:0; pointer-events:none;
}
.hero-film .hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right, rgba(0,18,28,.86) 0%, rgba(0,18,28,.66) 34%,
      rgba(0,18,28,.22) 58%, rgba(0,18,28,0) 78%),
    linear-gradient(to top, rgba(0,18,28,.54) 0%, rgba(0,18,28,0) 56%);
}
.hero-film .hero-film-in{
  position:relative; z-index:3; width:100%;
  max-width:min(var(--maxw),100%); margin-inline:auto;
  padding:0 clamp(24px,5vw,48px) clamp(26px,4vh,52px);
}
.hero-film .hero-film-in > *{max-width:40rem}
.hero-film .eyebrow{display:block; color:var(--gold-3); margin-bottom:1.1rem}
.hero-film .display{color:#fff; margin-bottom:1.4rem}
/* pale champagne, not the solid --gold: that vanished against the yellow footage */
/* fx.css paints .display em with a gold gradient via background-clip:text and
   -webkit-text-fill-color:transparent. A plain `color` cannot override that —
   the word rendered fully transparent. Cancel the gradient on the film hero and
   set the fill explicitly. The shimmer was designed for a white background and
   is invisible on the footage anyway. */
.hero-film .display em,
html.fx .hero-film .display em{
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
  -webkit-text-fill-color:var(--gold-3); color:var(--gold-3);
  animation:none;
}
/* the site display size is tuned for a light hero; a touch smaller here keeps the
   block low in frame instead of pushing the headline up out of the scrim */
.hero-film .display{font-size:clamp(2.5rem,5.6vw,4.6rem)}
.hero-film .hero-cta{display:flex; gap:.9rem; flex-wrap:wrap}
.hero-film .scroll-hint{position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:3}
/* belonged to the old light hero */
.hero-film .hero-glow{display:none}
/* the fx sparkles read as dust on top of moving film */
html.fx .hero-film .fx-sparkle,
html.fx .hero-film canvas{display:none!important}

[dir=rtl] .hero-film .hero-scrim{
  background:
    linear-gradient(to left, rgba(0,18,28,.86) 0%, rgba(0,18,28,.66) 34%,
      rgba(0,18,28,.22) 58%, rgba(0,18,28,0) 78%),
    linear-gradient(to top, rgba(0,18,28,.54) 0%, rgba(0,18,28,0) 56%);
}

@media(max-width:900px){ .hero.hero-film{min-height:min(84vh,660px)} }
@media(max-width:720px){
  /* a ~1MB autoplay video on mobile data is hostile and iOS low-power mode
     refuses to autoplay anyway — the poster carries it */
  /* the video plays on phones too — muted + playsinline satisfy iOS/Android autoplay */
  .hero-film .hero-video{display:block; object-position:center}
  .hero.hero-film{
    background:#0b1a22 url('assets/hero-poster.jpg') center/cover no-repeat;
    min-height:min(78vh,580px);
  }
  .hero-film .hero-scrim{
    background:linear-gradient(to top, rgba(0,18,28,.80) 0%, rgba(0,18,28,.46) 46%,
      rgba(0,18,28,.18) 100%);
  }
  .hero-film .hero-film-in > *{max-width:100%}
}
/* The hero video used to be suppressed under prefers-reduced-motion, which hid it
   on any phone with iOS "Reduce Motion" / Android "Remove animations" switched on.
   The clip is silent, slow and central to the page, so it now plays for everyone;
   the poster still paints underneath while it loads. */


/* ============================================================
   HEADER — reclaim vertical space without shrinking the logo or menu
   Only the padding changes; .brand img stays 74px and .nav-links keeps
   its size. Saves ~34px, which matters on a 768px-tall laptop.
   ============================================================ */
.nav-inner{padding-block:.45rem}

/* ============================================================
   HERO FILM — laptop fit + text closer to the left edge
   ============================================================ */
/* text starts nearer the edge instead of inside the 1240px column */
.hero-film .hero-film-in{
  max-width:none;
  margin-inline:0;
  padding-inline:clamp(24px,9vw,172px) clamp(24px,5vw,48px);
}

/* On a 14in laptop the hero ran past the fold and cut off the regions line.
   Size it against the space actually left under the header rather than a
   fixed 92vh, and ease the headline down a little on short screens. */
.hero.hero-film{ min-height:min(calc(100vh - 130px), 780px); }
@media (max-height:820px){
  .hero.hero-film{ min-height:calc(100vh - 132px); }
  .hero-film .display{ font-size:clamp(2.2rem,4.6vw,3.5rem) }
  .hero-film .hero-film-in{ padding-bottom:clamp(20px,3vh,38px) }
  .hero-film .eyebrow{ margin-bottom:.7rem }
  .hero-film .display{ margin-bottom:1rem }
  }
@media (max-height:700px){
  .hero.hero-film{ min-height:calc(100vh - 132px) }
  .hero-film .display{ font-size:clamp(2rem,4vw,2.9rem) }
}

@media(max-width:720px){ .hero-film .hero-film-in{ padding-inline:24px } }

/* ============================================================
   FILM HOMEPAGE — the header floats over the video instead of
   sitting on a white band above it. Scoped to body.film-home so
   every other page keeps the normal white header.
   ============================================================ */

/* one fixed unit: topbar + nav + the gradient that keeps them legible */
.film-home .site-head{position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .5s var(--ease), box-shadow .5s var(--ease)}
/* NB: no backdrop-filter on this wrapper — it would become the containing
   block for the fixed mobile drawer inside it. See .nav::before above. */

/* the "fade behind" — dark at the very top, gone by the time it clears the nav */
.film-home .head-fade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(0,18,28,.78) 0%, rgba(0,18,28,.52) 42%, rgba(0,18,28,.22) 74%, rgba(0,18,28,0) 100%);
  transition:opacity .5s var(--ease)}

/* header sheds its own backgrounds and borders */
.film-home .nav{position:static;background:transparent;border-bottom:0;box-shadow:none}
.film-home .nav::before{display:none}

/* logo and menu align to the same left rule as the headline below them */
.film-home .nav-inner{max-width:none;padding-inline:clamp(24px,9vw,172px)}

/* everything reads white over the film */
.film-home .nav-links a,
.film-home .brand-text,
.film-home .icon-btn{color:#fff}
.film-home .nav-links a:hover,
.film-home .nav-links a[aria-current=page]{color:var(--gold-3)}
.film-home .nav .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.film-home .nav .btn-ghost:hover{color:var(--brand);background:#fff;border-color:#fff}
.film-home .icon-btn:hover{color:var(--gold-3);border-color:rgba(255,255,255,.4)}
.film-home .nav-burger span{background:#fff}
.film-home .nav .dd-toggle{color:#fff}
.film-home .switch button{color:rgba(255,255,255,.7)}
.film-home .switch button.on,
.film-home .switch button:hover{color:var(--gold-3)}
/* the logo is a single flat navy silhouette, so a knockout to white is lossless */
.film-home .brand img{filter:brightness(0) invert(1)}
/* soft lift so white type never sits on a bright frame of the film */
.film-home .nav-links a,.film-home .brand img{
  text-shadow:0 1px 14px rgba(0,18,28,.45)}
.film-home .brand img{filter:brightness(0) invert(1) drop-shadow(0 2px 14px rgba(0,18,28,.45))}

/* the dropdown and mobile drawer stay light-on-white — they are their own surface */
.film-home .dd-panel a,.film-home .nav-links.open a{color:var(--brand);text-shadow:none}
.film-home .dd-panel a:hover,.film-home .nav-links.open a:hover{color:var(--gold)}

/* ---- scrolled past the film: collapse to a compact white bar ---- */
.film-home .site-head.solid{background:rgba(255,255,255,.94);box-shadow:var(--shadow-s)}
.film-home .site-head.solid .head-fade{opacity:0}
/* the announcement strip has done its job by now — reclaim the space */
.film-home .site-head.solid .nav-links a,
.film-home .site-head.solid .brand-text,
.film-home .site-head.solid .icon-btn,
.film-home .site-head.solid .nav .dd-toggle{color:var(--brand);text-shadow:none}
.film-home .site-head.solid .nav-links a:hover,
.film-home .site-head.solid .nav-links a[aria-current=page]{color:var(--gold)}
.film-home .site-head.solid .nav .btn-ghost{color:var(--brand);border-color:var(--line-2)}
.film-home .site-head.solid .nav .btn-ghost:hover{color:var(--gold);background:none;border-color:var(--gold)}
.film-home .site-head.solid .nav-burger span{background:var(--brand)}
.film-home .site-head.solid .brand img{filter:none}

/* ---- the film now owns the whole first screen ---- */
.film-home .hero.hero-film{min-height:100vh;min-height:100dvh}
@media(max-width:720px){
  .film-home .hero.hero-film{min-height:100svh}
  .film-home .nav-inner{padding-inline:20px}
}
/* a touch more top scrim so the header never fights a bright frame */
.film-home .hero-film .hero-scrim{background:
  linear-gradient(to right, rgba(0,18,28,.86) 0%, rgba(0,18,28,.66) 34%,
    rgba(0,18,28,.22) 58%, rgba(0,18,28,0) 78%),
  linear-gradient(to top, rgba(0,18,28,.54) 0%, rgba(0,18,28,0) 56%),
  linear-gradient(to bottom, rgba(0,18,28,.34) 0%, rgba(0,18,28,0) 26%)}

/* ============================================================
   HEADER CONTROLS — language + currency moved out of the removed
   announcement strip and into the nav, beside the Instagram icon.
   ============================================================ */
.lang-switch{display:flex;gap:.1rem;align-items:center}
.lang-switch button{background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:.68rem;letter-spacing:.12em;padding:.34rem .42rem;border-radius:4px;
  color:var(--ink-soft,#5b6b74);transition:.25s}
.lang-switch button.on{color:var(--brand);font-weight:600}
.lang-switch button:hover{color:var(--gold)}
.lang-switch button+button{position:relative;margin-inline-start:.34rem}
.lang-switch button+button::before{content:"";position:absolute;inset-inline-start:-.34rem;top:50%;
  transform:translateY(-50%);width:1px;height:11px;background:var(--line-2)}

.cur-dd{position:relative}
.cur-trigger{display:inline-flex;align-items:center;gap:.4rem;background:none;cursor:pointer;
  font-family:inherit;font-size:.68rem;letter-spacing:.12em;font-weight:500;color:var(--brand);
  border:1px solid var(--line-2);border-radius:100px;padding:.42rem .8rem;transition:.3s}
.cur-trigger:hover{border-color:var(--gold);color:var(--gold)}
.cur-caret{width:9px;height:6px;flex:none;transition:transform .3s var(--ease)}
.cur-dd.open .cur-caret{transform:rotate(180deg)}
.cur-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:104px;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-m);
  padding:.35rem;display:flex;flex-direction:column;z-index:130;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.28s var(--ease)}
.cur-dd.open .cur-menu{opacity:1;visibility:visible;transform:translateY(0)}
.cur-menu button{background:none;border:none;cursor:pointer;font-family:inherit;text-align:start;
  font-size:.74rem;letter-spacing:.1em;color:var(--brand);padding:.5rem .7rem;border-radius:7px;transition:.2s}
.cur-menu button:hover{background:var(--bg-soft);color:var(--gold)}
.cur-menu button.on{color:var(--gold);font-weight:600}

/* over the film the controls read white, like the rest of the nav */
.film-home .lang-switch button{color:rgba(255,255,255,.72)}
.film-home .lang-switch button.on{color:#fff}
.film-home .lang-switch button:hover{color:var(--gold-3)}
.film-home .lang-switch button+button::before{background:rgba(255,255,255,.3)}
.film-home .cur-trigger{color:#fff;border-color:rgba(255,255,255,.45)}
.film-home .cur-trigger:hover{color:var(--gold-3);border-color:rgba(255,255,255,.75)}
/* the menu itself is its own white surface in both states */
.film-home .site-head.solid .lang-switch button{color:var(--ink-soft,#5b6b74)}
.film-home .site-head.solid .lang-switch button.on{color:var(--brand)}
.film-home .site-head.solid .lang-switch button+button::before{background:var(--line-2)}
.film-home .site-head.solid .cur-trigger{color:var(--brand);border-color:var(--line-2)}
.film-home .site-head.solid .cur-trigger:hover{color:var(--gold);border-color:var(--gold)}

/* phones: script.js moves both controls to the foot of the open drawer */
.drawer-controls{display:flex;align-items:center;justify-content:center;gap:1.1rem;
  margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.film-home .drawer-controls .lang-switch button{color:var(--ink-soft,#5b6b74)}
.film-home .drawer-controls .lang-switch button.on{color:var(--brand)}
.film-home .drawer-controls .cur-trigger{color:var(--brand);border-color:var(--line-2)}
.drawer-controls .cur-menu{inset-inline-end:auto;inset-inline-start:0;bottom:calc(100% + 8px);top:auto}

/* ---- the shipping promise, rehomed to the top of the footer ---- */
.footer-assure{display:flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 24px;border-bottom:1px solid rgba(255,255,255,.12);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.footer-assure svg{width:17px;height:17px;flex:none;color:var(--gold-2)}
@media(max-width:560px){
  .footer-assure{font-size:.62rem;letter-spacing:.1em;padding:.9rem 20px;text-align:center}
}

/* ============================================================
   MOBILE DRAWER — RTL mirroring
   The burger sits at the start edge of the header, so in LTR (burger left)
   the panel comes from the right and the X stays clear of it. In RTL the
   burger moves to the right, where the panel was — so the close button ended
   up underneath it, white on white, with no way to shut the menu. Mirror the
   panel to the left so the X stays over the film, exactly as in English.
   ============================================================ */
@media(max-width:820px){
  [dir=rtl] .nav-links{inset:0 auto 0 0; box-shadow:20px 0 60px rgba(0,0,0,.08)}
  [dir=rtl] .nav-links.open{animation:navInRtl .35s var(--ease)}
  @keyframes navInRtl{from{opacity:0;clip-path:inset(0 35% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
  /* belt and braces: the close control must never be buried by the panel */
  .nav-burger{position:relative;z-index:120}
}

@media(max-width:720px){
  /* portrait poster to match the portrait cut swapped in by index.html */
  .hero.hero-film{background-image:url('assets/hero-poster-mobile.jpg')}
}

/* ============================================================
   MOBILE HERO — the film is the impression, not the overlay
   The desktop scrim runs dark right across the left of the frame so a
   left-aligned text column always sits on shade. On a phone the copy is
   centred at the bottom, so that wash just greyed out most of the film.
   Here the frame stays clear and only the strip under the text is shaded.
   ============================================================ */
@media(max-width:720px){
  .film-home .hero-film .hero-scrim{
    background:linear-gradient(to top,
      rgba(0,18,28,.80) 0%, rgba(0,18,28,.62) 16%,
      rgba(0,18,28,.28) 32%, rgba(0,18,28,.06) 46%, rgba(0,18,28,0) 58%);
  }
  /* the gold aurora blob leaked past the left edge and washed the footage */
  .film-home .hero-film .fx-aurora{display:none}


  /* --- copy: centred, smaller, sitting in the lower third --- */
  .hero-film .hero-film-in{
    text-align:center;
    padding-inline:26px;
    padding-bottom:clamp(30px,6vh,60px);
  }
  .hero-film .hero-film-in > *{max-width:100%; margin-inline:auto}
  .hero-film .hero-cta{justify-content:center}

  /* "Art of Jewels" over "by Kevork Khatcherian" — the interpunct only makes
     sense when the two halves share a line */
  .hero-film .eyebrow{
    font-size:.6rem; letter-spacing:.22em; line-height:1.7; margin-bottom:.9rem;
  }
  .hero-film .eyebrow .eb-a,
  .hero-film .eyebrow .eb-b{display:block}
  .hero-film .eyebrow .eb-sep{display:none}

  .hero-film .display{
    font-size:clamp(2rem,9vw,2.7rem); line-height:1.04; margin-bottom:1.15rem;
  }
  .hero-film .hero-cta .btn-gold{font-size:.68rem; padding:.85rem 1.7rem}
}

/* The 1px champagne scroll cue is centred with position:absolute + left:50%, but
   fx.css forces `html.fx .scroll-hint{position:relative}`, which turns it into a
   full-width flex item — the transform then parks the line against a screen edge
   as a stray gold tick. Decorative only, so it goes on the film hero at all sizes. */
.hero-film .scroll-hint{display:none}

/* ============================================================
   MOBILE DRAWER — must survive the submenu being open
   With justify-content:center and no overflow, opening Fine Jewelry pushed the
   content (886px) past the panel height (844px) and it spilled off BOTH ends:
   "Home" sat at y=-42 and the language/currency row at y=850, neither reachable
   because a centred flex container has no scrollable overflow. Anchor the content
   to the top and let it scroll.
   ============================================================ */
@media(max-width:820px){
  .nav-links{
    justify-content:flex-start;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;      /* don't chain the scroll to the page behind */
    padding:5.25rem 1.6rem 2.25rem;   /* top clears the floating close button */
    gap:.55rem;
  }
  /* the + belongs beside its link, not after the submenu it opens */
  .nav-links .dd-toggle{order:2}
  .nav-links .dd-panel{order:3}

  /* submenu: one column, indented under its parent, sized so the whole menu
     usually fits without scrolling at all */
  .nav-links .dd-panel{
    flex-direction:column; gap:0; padding:.2rem 0 .5rem; align-items:stretch;
  }
  .nav-links .dd-col{min-width:0; width:100%}
  .nav-links .dd-panel a{
    text-align:start; font-size:.82rem; letter-spacing:.02em;
    padding:.34rem 0 .34rem 1rem; opacity:.9;
  }
  .nav-links .dd-h{padding-inline-start:1rem; margin:.5rem 0 .25rem}
  .nav-links .dd-all{margin-top:.35rem; padding-top:.5rem!important}
  /* a little breathing room under the last row when it does scroll */
  .drawer-controls{margin-top:1.3rem; padding-top:1.2rem}
}

@media(max-width:820px){
  /* last-resort legibility: if the close button ever overlaps the panel, it must
     still be visible rather than white-on-white */
  .nav-links.open ~ * .nav-burger.open span,
  .nav-burger.open span{box-shadow:0 0 0 .5px rgba(0,49,69,.25)}
}

@media(max-width:820px){
  /* stated positively — there is no desktop card to undo any more */
  .nav-links .dd-panel{
    position:static; inset:auto; transform:none; z-index:auto;
    background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    border:0; border-radius:0; box-shadow:none;
    opacity:1; visibility:visible; transition:none;
  }
}

/* ============================================================
   DRAWER CONTENTS ARE ALWAYS ON WHITE
   The film header paints its controls white so they read over the video. The
   mobile drawer, though, is an opaque white panel — so anything inside it must
   use drawer colours regardless of what the header behind it is doing. The "+"
   next to Fine Jewelry was inheriting the header's white and vanished until the
   page happened to be scrolled (which turns the header solid and the icon navy).
   ============================================================ */
@media(max-width:820px){
  .film-home .nav .nav-links .dd-toggle,
  .film-home .nav .nav-links a,
  .film-home .nav .nav-links .dd-panel a{color:var(--brand); text-shadow:none}
  .film-home .nav .nav-links a[aria-current=page]{color:var(--gold)}
  .film-home .nav .nav-links a:hover{color:var(--gold)}
  .film-home .nav .nav-links .dd-h{color:var(--gold)}
  .film-home .nav .nav-links .dd-all{color:var(--gold)!important}
}