/* ═══════════════════════════════════════════════════════════
   CROWN & COLLAR — homepage
   Dark, gold, cinematic — the whole page follows the crest:
   gold relief on near black. Desktop first, breaks at 1024/767.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* palette, taken from the logo: gold on charcoal */
  --gold:        #A8863F;
  --gold-lt:     #C9A45C;
  --gold-bar:    #B8975C;              /* announcement bar */
  --gold-pale:   #E8D9B8;
  --ink-deep:    #0C0A09;              /* nav */
  --bg0:         #0B0908;              /* base ground */
  --bg1:         #110D0A;              /* raised ground */
  --bg2:         #060406;              /* deepest — matches the cutaway artwork */
  --ivory:       #EDE5D6;              /* headings */
  --dim:         rgba(232,222,205,.62);/* body copy on dark */
  --faint:       rgba(232,222,205,.42);
  --hair:        rgba(196,164,104,.16);/* gold hairlines */
  --hair-strong: rgba(196,164,104,.30);

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1360px;
  --pad: 56px;              /* horizontal page padding, desktop */
  --sec-y: 112px;           /* one vertical rhythm for every section */

  /* Gutter for full bleed sections whose copy must line up with .wrap.
     Uses cqw, NOT vw. 100vw includes the scrollbar but .wrap centres on the
     content width, which does not, so a vw based gutter pushes those sections
     about 7px right of every other section the moment a scrollbar appears.
     cqw measures the container, so the two agree. Every element using this
     must sit inside an ancestor with container-type: inline-size. */
  --gutter: max(var(--pad), calc((100cqw - var(--wrap)) / 2 + var(--pad)));
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }

body{
  margin:0;
  /* clip, not hidden: kills the sideways pre-reveal offsets of the
     data-rv-dir elements without creating a scroll container, so the
     sticky nav keeps working (overflow:hidden here would break it) */
  overflow-x:clip;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.65;
  color:var(--dim);
  background:var(--bg0);
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
blockquote{ margin:0; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.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;
}

/* ───────── shared type ───────── */
.display{
  font-family:var(--serif);
  font-weight:400;
  color:var(--ivory);
  line-height:1.14;
  letter-spacing:-.01em;
  font-size:56px;
}
.display--sm{ font-size:40px; line-height:1.18; }

.kicker{
  font-size:11px;
  font-weight:500;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--gold-lt);
  margin-bottom:18px;
}
.kicker--gold{ color:var(--gold-lt); }
.kicker--tight{ margin-top:34px; margin-bottom:14px; }

.todo{ color:var(--gold-lt); font-style:italic; }

/* ───────── buttons + links ───────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 30px;
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  border:0; cursor:pointer; white-space:nowrap;
  transition:background .25s ease, color .25s ease, box-shadow .25s ease;
}
.btn--gold{ background:var(--gold); color:#fff; }
.btn--gold:hover{ background:#96762F; box-shadow:0 0 34px rgba(168,134,63,.35); }

.link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ivory);
  padding-bottom:6px;
  border-bottom:1px solid var(--gold);
}
.link-arrow::after{ content:"→"; font-size:13px; letter-spacing:0; transition:transform .25s ease; }
.link-arrow:hover::after{ transform:translateX(4px); }
.link-arrow--light{ color:#fff; border-bottom-color:rgba(255,255,255,.5); }

/* ═══════════════════════════════════════════════════════════
   REVEAL + PARALLAX
   [data-rv] and [data-rv-group]>[data-rv-child] rise in when the
   IntersectionObserver in main.js adds .in. --d staggers children.
   [data-plx="0.05"] elements drift with scroll via a rAF loop.
   With JS off or prefers-reduced-motion, everything renders in its
   final state: html.js gates the hidden initial state.
   ═══════════════════════════════════════════════════════════ */
.js [data-rv], .js [data-rv-child]{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.22,.6,.2,1), transform .8s cubic-bezier(.22,.6,.2,1);
  transition-delay:calc(var(--d, 0) * 110ms);
}
/* directional variants: the element slides in from a side instead of below.
   ⚠️ These MUST come before the .in rule: both selectors are (0,3,0), so
   source order decides, and with these later every side-entering element
   froze at its offset forever. */
.js [data-rv][data-rv-dir="left"]{ transform:translateX(-72px); }
.js [data-rv][data-rv-dir="right"]{ transform:translateX(72px); }

/* descendant, not child: some groups (.vows) hold their children one level
   down inside a grid, and a > combinator left those at opacity 0 forever */
.js [data-rv].in, .js .in [data-rv-child], .js [data-rv-child].in{
  opacity:1; transform:none;
}
[data-plx]{ will-change:transform; }

/* scroll-driven scenes: --p runs 0 to 1 through each [data-scrub] wrapper.
   The default is 1 so that with JS off (or reduced motion) every scene
   renders complete and still. */
[data-scrub]{ --p:1; }

@media (prefers-reduced-motion:reduce){
  .js [data-rv], .js [data-rv-child]{ opacity:1; transform:none; transition:none; }
}

/* ═══════════════════════════════════════════════════════════
   IMAGE PLACEHOLDERS
   Every photo slot is a .ph. If the file is missing, main.js adds
   .is-missing and a labelled placeholder shows instead of a broken
   image icon. The whole site is dark now, so dark is the default.
   ═══════════════════════════════════════════════════════════ */
.ph{ position:relative; display:block; overflow:hidden; background:#161210; }
.ph > img{ width:100%; height:100%; object-fit:cover; }
.ph.is-missing > img{ display:none; }
.ph.is-missing{
  background:
    repeating-linear-gradient(45deg, rgba(196,164,104,.07) 0 12px, transparent 12px 24px),
    #1A1613;
  border:1px dashed rgba(196,164,104,.4);
}
.ph.is-missing::after{
  content:attr(data-label);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:16px; text-align:center;
  font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-lt); line-height:1.6;
}
.ph--fill{ position:absolute; inset:0; }
/* full bleed slots sit behind real copy, so drop their label to the bottom */
.ph--fill.is-missing::after{ align-items:flex-end; padding-bottom:14px; }

/* ═══════════ 01 ANNOUNCEMENT ═══════════
   Not sticky — scrolls away. Messages rotate via main.js. */
.announce{
  background:var(--gold-bar); color:#fff; text-align:center;
  overflow:hidden;
}
.announce__track{ position:relative; height:42px; }
.announce__msg{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:0 20px;
  font-size:11px; letter-spacing:.10em; font-weight:400;
  opacity:0; transform:translateY(6px);
  transition:opacity .5s ease, transform .5s ease;
  pointer-events:none;
}
.announce__msg.is-on{ opacity:1; transform:none; }
.announce .dot{ padding:0 8px; opacity:.75; }

/* ═══════════ 02 NAV — the only sticky element ═══════════
   ⚠️ .nav must remain a DIRECT child of <body>. position: sticky is
   constrained by the parent's box; inside a wrapper it stops sticking. */
.nav{
  position:sticky; top:0; z-index:60;
  background:var(--ink-deep);
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
.nav.is-stuck{
  background:rgba(12,10,9,.93);
  border-bottom-color:rgba(196,164,104,.22);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.nav__inner{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--pad);
  height:74px;
}
.nav__links{ display:flex; gap:34px; }
.nav__links a{
  font-size:11px; font-weight:400; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.86);
  transition:color .2s ease;
}
.nav__links a:hover{ color:var(--gold-lt); }

/* the crest overlaps the hero; once stuck it tucks up into the bar */
.crest{
  position:absolute; left:50%; top:8px;
  transform:translateX(-50%);
  width:132px;
  transition:width .32s cubic-bezier(.4,0,.2,1), top .32s cubic-bezier(.4,0,.2,1);
}
.nav.is-stuck .crest{ width:66px; top:5px; }
.ph--crest{ background:transparent; border:0; }
.ph--crest > img{ height:auto; object-fit:contain; }
.ph--crest.is-missing{
  aspect-ratio:300/312; border:1px dashed rgba(196,164,104,.55); background:transparent;
}
.ph--crest.is-missing::after{ color:var(--gold-lt); font-size:9px; }

.nav__utils{ display:flex; align-items:center; gap:22px; }
.icon{
  width:22px; height:22px; padding:0;
  background:none; border:0; cursor:pointer; color:rgba(255,255,255,.86);
  transition:color .2s ease;
}
.icon:hover{ color:var(--gold-lt); }
.icon svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.icon--burger{ display:none; }

.nav__mobile{ display:none; }

/* ═══════════ 03 HERO ═══════════ */
.hero{
  position:relative;
  /* the opening frame should dominate the page: near full viewport,
     minus the announcement bar and nav above it */
  min-height:clamp(660px, calc(100svh - 116px), 940px);
  display:flex; align-items:center;
  background:#100D0B;
  overflow:hidden;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    /* top blend: starts at exactly the nav colour so there is no seam between
       the black bar and the photograph, they read as one dark space */
    linear-gradient(to bottom,
      var(--ink-deep) 0%,
      rgba(12,10,9,.82) 5%,
      rgba(12,10,9,.42) 13%,
      rgba(12,10,9,0) 26%),
    /* bottom blend into the story section so the page flows as one film */
    linear-gradient(to top,
      var(--bg0) 0%,
      rgba(11,9,8,.55) 7%,
      rgba(11,9,8,0) 18%),
    /* side scrim: holds the headline against the bright product */
    linear-gradient(100deg,
      rgba(9,7,6,.86) 0%,
      rgba(9,7,6,.66) 34%,
      rgba(9,7,6,.12) 62%,
      rgba(9,7,6,.30) 100%);
}
/* 16:9 into a 2.3:1 band: held above centre so the crop takes floor */
.hero .ph--fill img{ object-position:center 42%; }
/* the opening frame settles: a slow quarter-zoom out as the page arrives */
@keyframes heroSettle{ from{ transform:scale(1.07); } to{ transform:scale(1); } }
.js .hero .ph--fill img{ animation:heroSettle 2.6s cubic-bezier(.2,.6,.25,1) both; }
.hero__inner{ position:relative; z-index:2; }
.hero__copy{ max-width:560px; padding:64px 0; }
.hero h1{ color:#F7F3EC; font-size:52px; line-height:1.16; }
.hero__sub{
  margin-top:26px;
  color:rgba(240,234,224,.82);
  font-size:14px; line-height:1.85; font-weight:300;
}
.hero__cta{ display:flex; align-items:center; gap:34px; margin-top:38px; flex-wrap:wrap; }

/* ═══════════ 04 STORY — the problem, then the founder ═══════════ */
.story{
  position:relative;
  background:
    radial-gradient(900px 500px at 50% 12%, rgba(168,134,63,.07), transparent 70%),
    var(--bg0);
  padding-block:var(--sec-y);
  overflow:hidden;
}
/* the crest as a layer of depth: huge, ghosted, drifting behind the statement */
.story__ghost{
  position:absolute; left:50%; top:-40px;
  width:640px; margin-left:-320px;
  opacity:.05; pointer-events:none;
}
.story__ghost img{ width:100%; height:auto; }

.story__opening{
  position:relative; z-index:2;
  text-align:center;
  padding-block:44px 0;
}
.story__line{
  font-family:var(--serif);
  font-size:clamp(28px, 3.4vw, 46px);
  line-height:1.3;
  color:var(--ivory);
}
.story__line--gold{ color:var(--gold-lt); margin-top:18px; }

.story__founder{
  position:relative; z-index:2;
  display:grid; grid-template-columns:42fr 58fr; gap:clamp(40px,5vw,84px);
  align-items:center;
  margin-top:96px;
}
.story__frame{
  aspect-ratio:3/4;
  border:1px solid var(--hair);
  padding:14px;                       /* a mount, like a framed print */
  background:var(--bg1);
}
.story__frame > img{ width:100%; height:100%; object-fit:cover; }

.story__copy p{ margin-top:20px; font-size:14px; line-height:1.95; font-weight:300; }
.story__quote{
  margin-top:8px;
  font-family:var(--serif); font-size:26px; line-height:1.45; color:var(--gold-pale);
  border-left:2px solid var(--gold); padding-left:24px;
}
.story__by{ display:flex; flex-direction:column; gap:3px; margin-top:30px; }
.story__sig{ font-family:var(--serif); font-size:18px; color:var(--ivory); }
.story__role{
  font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint);
}

/* ═══════════ 05 THE HOUSE ═══════════ */
.house{ background:var(--bg1); }
.house__head{ text-align:center; padding-block:var(--sec-y) 64px; max-width:820px; }
.house__head.wrap{ margin-inline:auto; }
.house__lede{
  margin:22px auto 0; max-width:560px;
  font-size:14px; line-height:1.9; font-weight:300;
}

/* 05a — the diptych. Two full bleed halves, each a doorway. */
.dip{ display:grid; grid-template-columns:1fr 1fr; overflow:hidden; /* contains the pre-reveal side offsets */ }
.dip__half{
  position:relative; display:flex; align-items:flex-end;
  min-height:580px; overflow:hidden;
}
.dip__half .ph--fill img{
  object-position:center 38%;
  transition:transform 1.1s cubic-bezier(.2,.6,.2,1);
}
/* the medicine still life is darker and its bottles sit lower in frame, so it
   gets its own crop and a lift, or the panel reads as an empty black square */
.dip__half:last-child .ph--fill img{
  object-position:center 58%;
  filter:brightness(1.28) saturate(1.05);
}
.dip__half:hover .ph--fill img{ transform:scale(1.045); }
.dip__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,4,4,.88) 0%, rgba(6,4,4,.30) 40%, rgba(6,4,4,.08) 100%);
  transition:background .5s ease;
}
.dip__body{
  position:relative; z-index:2;
  padding:0 clamp(30px,4vw,64px) 52px;
  display:flex; flex-direction:column; gap:12px;
}
.dip__label{
  font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-lt);
}
.dip__title{ font-family:var(--serif); font-size:36px; line-height:1.15; color:#F5F0E7; }
.dip__go{
  margin-top:8px;
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.66);
  transition:color .3s ease, letter-spacing .3s ease;
}
.dip__go::after{ content:"  →"; }
.dip__half:hover .dip__go{ color:var(--gold-lt); letter-spacing:.22em; }
.dip__half:first-child{ border-right:1px solid rgba(196,164,104,.14); }

/* 05b — the machine, examined */
.machine{
  background:
    radial-gradient(760px 520px at 30% 40%, rgba(168,134,63,.06), transparent 70%),
    var(--bg2);
  padding-block:var(--sec-y);
}
.machine__grid{
  display:grid; grid-template-columns:52fr 48fr;
  gap:clamp(40px,5vw,80px);
  align-items:center;
}
/* Pinned on desktop: the wrapper is tall, the scene sticks, and scroll
   progress scrubs the X-ray video. Below 1025px there is no pin and the
   video plays as a loop instead, because a sticky scene taller than the
   viewport traps the layout on phones. */
.machine__pinWrap{ position:relative; }
@media (min-width:1025px){
  .js .machine__pinWrap{ height:270vh; }
  .js .machine__scene{
    position:sticky; top:0; height:100svh;
    display:flex; align-items:center;
  }
}
.machine__stage{ position:relative; }
.xray{ position:relative; margin:0; }
.xray img, .xray video{ width:100%; height:auto; display:block; }
/* display:block above beats the UA's [hidden]{display:none} (author rules
   outrank UA rules), which put the fallback on screen UNDER the video and
   doubled the product. Hidden must be restated at author level. */
.xray .xray__fallback[hidden]{ display:none; }
.xray.no-vid video{ display:none; }
.xray.no-vid .xray__fallback{ display:block; }
.machine__hint--touch{ display:none; }
@media (max-width:1024px){
  /* below 1025 there is no pin and the video loops, so do not promise scroll */
  .machine__hint--desk{ display:none; }
  .machine__hint--touch{ display:inline; }
}
.machine__hint{
  margin-top:10px; text-align:center;
  font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint);
}

/* the hotspots */
.spot{
  position:absolute; left:var(--x); top:var(--y);
  width:34px; height:34px; margin:-17px 0 0 -17px;
  padding:0; border:0; background:none; cursor:pointer;
  /* hidden while the shell is still solid, lit once the scrub passes 70% */
  opacity:clamp(0, calc((var(--p, 1) - .7) / .2), 1);
}
.spot i{
  position:absolute; inset:8px;
  border-radius:50%;
  background:rgba(201,164,92,.16);
  border:1px solid var(--gold-lt);
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.spot i::after{
  content:""; position:absolute; inset:6px;
  border-radius:50%; background:var(--gold-lt);
  transition:background .3s ease;
}
.spot::before{                        /* slow breathing ring */
  content:""; position:absolute; inset:0;
  border-radius:50%; border:1px solid rgba(201,164,92,.35);
  animation:spot-pulse 3.2s ease-out infinite;
}
@keyframes spot-pulse{
  0%{ transform:scale(.55); opacity:.9; }
  70%,100%{ transform:scale(1.25); opacity:0; }
}
.spot:hover i, .spot:focus-visible i, .spot.is-live i{
  background:rgba(201,164,92,.32);
  transform:scale(1.18);
  box-shadow:0 0 26px rgba(201,164,92,.5);
}
.spot:focus-visible{ outline:1px solid var(--gold-lt); outline-offset:4px; }

.machine__lede{ font-size:14px; line-height:1.9; font-weight:300; max-width:420px; }

.mlist{ margin-top:34px; border-top:1px solid var(--hair); }
.mline{
  display:grid; grid-template-columns:44px 172px 1fr;
  gap:0 14px; align-items:baseline;
  padding:13px 12px 13px 4px;
  border-bottom:1px solid var(--hair);
  cursor:pointer;
  transition:background .3s ease, padding-left .3s ease;
}
.mline__n{ font-size:10px; font-weight:500; letter-spacing:.16em; color:var(--gold-lt); }
.mline__t{ font-size:12.5px; font-weight:500; letter-spacing:.02em; color:var(--ivory); }
.mline__d{ font-size:11.5px; line-height:1.6; font-weight:300; color:var(--faint); }
.mline:hover, .mline.is-live{
  background:rgba(201,164,92,.07);
  padding-left:12px;
}
.mline.is-live .mline__t{ color:var(--gold-pale); }

/* spec strip under the machine */
.specrow{
  display:grid; grid-template-columns:repeat(5, auto);
  justify-content:space-between; gap:22px 34px;
  margin-top:72px; padding:26px 30px;
  border:1px solid var(--hair);
  background:rgba(17,13,10,.6);
}
.specrow__item dt{
  font-size:9.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-lt); margin-bottom:6px;
}
.specrow__item dd{ margin:0; font-size:13px; color:var(--dim); }
.machine__cta{ display:flex; justify-content:center; margin-top:44px; }

/* 05c — the supporting devices */
.trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  padding-top:68px;
}
.tcard{
  padding:36px 30px 34px;
  background:var(--bg1);
  border:1px solid var(--hair);
  transition:border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.tcard:hover{
  border-color:var(--hair-strong);
  transform:translateY(-4px);
  box-shadow:0 24px 50px rgba(0,0,0,.45);
}
.tcard__icon{
  width:30px; height:30px; margin-bottom:20px;
  fill:none; stroke:var(--gold-lt); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
}
.tcard h3{
  font-family:var(--serif); font-size:19px; color:var(--ivory); margin-bottom:10px;
}
.tcard p{ font-size:12.5px; line-height:1.8; font-weight:300; color:var(--faint); }

/* 05d — the apothecary */
.apoth{ background:var(--bg1); container-type:inline-size; }
.apoth__grid{
  display:grid; grid-template-columns:48fr 52fr; min-height:560px;
  overflow:hidden; /* contains the shot sliding in from the right */
}
.apoth__copy{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:var(--sec-y) clamp(32px,5vw,72px) var(--sec-y) var(--gutter);
}
.apoth__lede{
  margin-top:22px; max-width:440px;
  font-size:14px; line-height:1.9; font-weight:300;
}
.apoth__copy .link-arrow{ margin-top:36px; }
.apoth__shot{ position:relative; overflow:hidden; }
.apoth__shot img{ object-position:center; }

.chips{ display:flex; flex-wrap:wrap; gap:9px; max-width:520px; }
.chips li{
  padding:9px 20px;
  background:rgba(201,164,92,.06);
  border:1px solid var(--hair);
  border-radius:999px;
  font-size:11.5px; color:var(--dim);
  transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.chips li:hover{
  border-color:var(--hair-strong); color:var(--gold-pale);
  background:rgba(201,164,92,.12);
}

/* the laboratory band — to the supplied design: solid charcoal panel on the
   left dissolving into the bright cleanroom photograph on the right, the
   copy set large inside a chamfered gold frame with a crest tag hanging
   from its top edge. The photo stays bright: no darkening filter. */
.labband{
  position:relative; min-height:620px;
  display:flex; align-items:center;
  overflow:hidden;
  background:#131110;
}
.labband .ph--fill img{ object-position:72% 45%; }
.labband__scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    #131110 0%, #131110 30%,
    rgba(19,17,16,.86) 44%,
    rgba(19,17,16,.38) 62%,
    rgba(19,17,16,0) 78%);
}
.labband__body{ position:relative; z-index:2; padding-block:96px; }

/* chamfered frame: two stacked clip-paths — the outer layer IS the gold
   hairline, the inner layer paints the panel back over it 1px smaller.
   A plain border cannot follow the cut corners. */
.labframe{
  display:inline-block;
  max-width:660px;
  background:rgba(196,164,104,.42);
  clip-path:polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px),
    calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  padding:1px;
}
.labframe__inner{
  position:relative; display:block;
  background:#141210;
  clip-path:polygon(17.6px 0, calc(100% - 17.6px) 0, 100% 17.6px, 100% calc(100% - 17.6px),
    calc(100% - 17.6px) 100%, 17.6px 100%, 0 calc(100% - 17.6px), 0 17.6px);
  padding:56px 58px 54px;
}

.labwrap{ position:relative; display:inline-block; }
/* the crest tag, hanging through the frame top edge like a bookmark */
.labframe__tag{
  position:absolute; z-index:2; top:1px; left:52px;
  transform:translateY(-42%);
  width:52px; height:74px;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:12px;
  background:#181411;
  border:1px solid rgba(196,164,104,.45); border-bottom:0;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
}
.labframe__tag img{ width:32px; height:auto; }

/* hairline running into a small crown */
.labframe__rule{
  display:flex; align-items:center; gap:14px;
  margin:4px 0 30px;
  color:var(--gold-lt);
}
.labframe__rule i{ display:block; width:120px; height:1px; background:rgba(196,164,104,.45); }
.labframe__rule svg{ width:22px; height:14px; }

.labband__line{
  font-family:var(--serif); font-size:31px; line-height:1.6; color:var(--gold-pale);
}

/* ═══════════ 06 PROOF — THE STANDARD ═══════════ */
.standard{
  background:
    radial-gradient(900px 500px at 70% 10%, rgba(168,134,63,.05), transparent 70%),
    var(--bg0);
  padding-block:var(--sec-y);
}
.standard__head{ max-width:640px; }
.standard__lede{ margin-top:20px; font-size:14px; line-height:1.9; font-weight:300; }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:64px;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
.stat{
  padding:38px 22px 34px;
  border-right:1px solid var(--hair);
  text-align:center;
}
.stat:last-child{ border-right:0; }
.stat dt{
  font-family:var(--serif); color:var(--gold-pale);
  font-size:44px; line-height:1;
  display:flex; align-items:baseline; justify-content:center; gap:7px;
}
.stat__unit{
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-lt);
}
.stat dd{ margin:12px 0 0; font-size:12px; line-height:1.7; color:var(--faint); }

.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:72px; }
.pillar{ transition:transform .35s ease; }
.pillar:hover{ transform:translateY(-4px); }
.pillar__shot{
  aspect-ratio:4/3; margin-bottom:20px;
  border:1px solid var(--hair);
}
.pillar__shot img{ filter:saturate(.82); transition:transform 1s cubic-bezier(.2,.6,.2,1); }
.pillar:hover .pillar__shot img{ transform:scale(1.04); }
.pillar h3{
  font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-lt); margin-bottom:9px;
}
.pillar p{ font-size:12.5px; line-height:1.8; font-weight:300; color:var(--faint); }

.certs{
  display:grid; grid-template-columns:repeat(6, 1fr); align-items:center;
  gap:26px 24px;
  margin-top:72px; padding-top:38px;
  border-top:1px solid var(--hair);
}
.certs__item{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  text-align:center;
  font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ivory);
}
.certs__item em{ font-style:normal; font-size:9px; letter-spacing:.12em; color:var(--faint); }
.certs__item--wide{ letter-spacing:.22em; }
.certs__mark{ width:22px; height:22px; fill:none; stroke:var(--gold-lt); stroke-width:1.4; }
/* logo slots: fixed height, contained, greyscale-gold treatment when real */
.certs__logo{
  height:58px; width:100%; max-width:150px; margin-inline:auto;
  background:transparent;
}
.certs__logo > img{ object-fit:contain; filter:grayscale(1) brightness(1.6) sepia(.35); opacity:.8; }
.certs__logo.is-missing{ background:transparent; }
/* the patent has no official mark, so it wears the same box as the others */
.certs__patent{
  height:58px; width:100%; max-width:150px; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  border:1px dashed rgba(196,164,104,.4);
  padding:6px 10px; text-align:center;
}
.certs__patent b{
  font-weight:500; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-lt);
}
.certs__patent em{ font-style:normal; font-size:8px; letter-spacing:.06em; color:var(--faint); }
.certs__logo.is-missing::after{ font-size:8.5px; letter-spacing:.12em; }

/* the four promises */
.vows{ margin-top:96px; }
.vows__title{
  font-family:var(--serif); font-size:28px; color:var(--ivory);
  text-align:center; margin-bottom:52px;
}
.vows__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.vow{
  padding:34px 28px 32px;
  background:var(--bg1);
  border:1px solid var(--hair);
  border-top:2px solid var(--gold);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.vow:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 50px rgba(0,0,0,.45);
  border-color:var(--hair-strong); border-top-color:var(--gold-lt);
}
.vow__big{
  display:flex; align-items:baseline; gap:8px;
  font-family:var(--serif); font-size:46px; line-height:1; color:var(--gold-pale);
  margin-bottom:18px;
}
.vow__big span{
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-lt);
}
.vow h4{
  font-size:12.5px; font-weight:500; letter-spacing:.06em; color:var(--ivory);
  margin-bottom:8px;
}
.vow p{ font-size:12px; line-height:1.75; font-weight:300; color:var(--faint); }

/* ═══════════ 07 FAQ ═══════════ */
.faq{ background:var(--bg1); padding-block:var(--sec-y); }
.faq__grid{ display:grid; grid-template-columns:30fr 70fr; gap:60px; align-items:start; }
.faq__lede{ margin-top:18px; max-width:280px; font-size:13px; line-height:1.85; font-weight:300; color:var(--faint); }
/* Capped measure so the plus never strands hundreds of px from its question */
.faq__list{ max-width:760px; }

.faq__list details{ border-bottom:1px solid var(--hair); }
.faq__list details:first-child{ border-top:1px solid var(--hair); }
.faq__list summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:23px 2px;
  font-size:15px; color:var(--ivory);
  cursor:pointer; list-style:none;
  transition:color .2s ease;
}
.faq__list summary:hover{ color:var(--gold-pale); }
.faq__list summary::-webkit-details-marker{ display:none; }
.faq__list summary::after{
  content:"+"; flex:none;
  font-size:18px; font-weight:300; color:var(--gold-lt); line-height:1;
}
.faq__list details[open] summary::after{ content:"−"; }
.faq__a{ padding:0 40px 24px 2px; }
.faq__a p{ font-size:13px; line-height:1.9; font-weight:300; color:var(--dim); }

/* ═══════════ 08 FOOTER ═══════════ */
.foot{
  background:var(--bg2);
  border-top:1px solid var(--hair);
  color:rgba(232,225,214,.62); padding-top:64px;
}
.foot__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:44px; padding-bottom:48px;
}
.ph--crestFoot{ width:96px; margin-bottom:16px; }
.foot__brand > p{ font-size:12px; line-height:1.75; color:rgba(232,225,214,.55); }
.foot__social{ display:flex; gap:16px; margin-top:24px; }
.foot__social a{ width:19px; height:19px; color:rgba(232,225,214,.7); transition:color .2s ease; }
.foot__social a:hover{ color:var(--gold-lt); }
.foot__social svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

.foot__col{ display:flex; flex-direction:column; }
.foot__col h4{
  font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:#F0EAE0; margin-bottom:18px;
}
.foot__col a{ font-size:12.5px; line-height:2.15; color:rgba(232,225,214,.58); transition:color .2s ease; }
.foot__col a:hover{ color:var(--gold-lt); }

.foot__bar{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-block:20px;
  border-top:1px solid var(--hair);
  font-size:11px; color:rgba(232,225,214,.42);
}
.foot__mid{ display:flex; gap:26px; }
.foot__mid a:hover{ color:var(--gold-lt); }
.foot__legal{ display:flex; gap:26px; }
.foot__legal a:hover{ color:var(--gold-lt); }

/* ═══════════════════════════════════════════════════════════
   TABLET  ≤1024px
   ═══════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  :root{ --pad:34px; --sec-y:76px; }

  .display{ font-size:42px; }
  .display--sm{ font-size:32px; }
  .hero h1{ font-size:40px; }

  .nav__links{ display:none; }
  .icon--burger{ display:block; }
  .nav__inner{ height:64px; justify-content:flex-end; }
  .icon--burger{ position:absolute; left:var(--pad); top:50%; transform:translateY(-50%); }
  /* tablet gets the PC crest behaviour: large and overhanging the hero at the
     top of the page, tucking into the bar once scrolled. The base rule already
     carries the width/top transition, so only the two sizes change here. */
  .crest{ top:6px; width:112px; }
  .nav.is-stuck .crest{ width:56px; top:4px; }
  .nav__mobile[hidden]{ display:none; }
  .nav__mobile{
    display:flex; flex-direction:column;
    padding:6px var(--pad) 20px;
    border-top:1px solid var(--hair);
  }
  .nav__mobile a{
    padding:13px 0;
    font-size:12px; letter-spacing:.18em; text-transform:uppercase;
    color:rgba(255,255,255,.86);
    border-bottom:1px solid rgba(255,255,255,.07);
  }

  .hero{ min-height:clamp(560px, calc(100svh - 106px), 820px); }
  /* pan the photograph so the machine and cat sit further left in the frame */
  .hero .ph--fill img{ object-position:64% 42%; }
  .hero__copy{ max-width:none; }
  .hero__sub br{ display:none; }
  .hero__sub{ max-width:440px; }

  .story__ghost{ width:480px; margin-left:-240px; }
  .story__founder{ margin-top:72px; gap:40px; }   /* keeps the PC two column split */

  .dip__half{ min-height:440px; }
  .dip__title{ font-size:28px; }   /* side by side as on PC */

  .machine__grid{ grid-template-columns:1fr; gap:52px; }
  .machine__stage{ max-width:620px; margin-inline:auto; }
  /* stacked under a centred stage, the header reads better centred too;
     the mechanism list below it stays left aligned */
  .machine__copy > div[data-rv-group]{ text-align:center; }
  .machine__lede{ margin-inline:auto; }
  .mline{ grid-template-columns:40px 150px 1fr; }
  .specrow{ grid-template-columns:repeat(3, 1fr); justify-content:start; }

  .tcard{ padding:28px 22px 26px; }   /* trio stays three across as on PC */
  .labband{ min-height:520px; }
  .labband__line{ font-size:25px; }
  .labframe{ max-width:540px; }
  .labframe__inner{ padding:46px 42px 44px; }

  /* apothecary, the lab band and the standard all read centred on tablet */
  .apoth__copy{ align-items:center; text-align:center; }
  .apoth__lede{ margin-inline:auto; }
  .chips{ justify-content:center; }
  .apoth__copy .link-arrow{ align-self:center; }

  .labband__body{ display:flex; justify-content:center; }
  .labframe__inner{ text-align:center; }
  .labframe__rule{ justify-content:center; }
  .labframe__tag{ left:50%; margin-left:-26px; }

  .standard__head{ text-align:center; margin-inline:auto; }
  .standard__lede{ margin-inline:auto; }
  .pillar{ text-align:center; }
  .vow{ text-align:center; }
  .vow__big{ justify-content:center; }
  .vows__title{ text-align:center; }

  .apoth__grid{ grid-template-columns:1fr; }
  .apoth__copy{ padding:var(--sec-y) var(--pad); order:2; }
  .apoth__shot{ position:relative; min-height:360px; order:1; }

  .stat{ padding:30px 16px 28px; }
  .stat dt{ font-size:36px; }   /* four across as on PC */

  .pillars{ gap:20px; }   /* three across as on PC */
  .certs{ grid-template-columns:repeat(3,1fr); gap:22px 18px; }
  .vows__grid{ grid-template-columns:1fr 1fr; }

  .faq__grid{ gap:40px; }   /* two column as on PC */

  /* one row, as on PC: brand plus the three link columns side by side */
  .foot__grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:26px; }
  .foot__col a{ font-size:12px; }
}

/* ═══════════════════════════════════════════════════════════
   PHONE  ≤767px
   Side padding is preserved at every width. Content never hugs
   the screen edge.
   ═══════════════════════════════════════════════════════════ */
@media (max-width:767px){
  :root{ --pad:22px; --sec-y:60px; }

  body{ font-size:14px; }
  .display{ font-size:32px; }
  .display--sm{ font-size:26px; }
  .hero h1{ font-size:30px; }
  .hero h1 br{ display:none; }

  /* the phone now gets the PC crest behaviour too: large and overhanging at
     the top, tucking into the bar once scrolled */
  .crest{ top:6px; width:92px; }
  .nav.is-stuck .crest{ width:52px; top:5px; }

  .announce__msg{ font-size:9.5px; letter-spacing:.06em; padding:0 14px; }
  .announce .dot{ padding:0 5px; }

  /* Stacked hero on the phone: the photograph is a plain block on top and the
     words sit below it on the dark ground. No background treatment, no scrim,
     nothing overlaid on the image. */
  .hero{ display:block; min-height:0; }
  .hero .ph--fill{ position:relative; inset:auto; aspect-ratio:4/3; }
  .hero__scrim{ display:none; }
  .hero__copy{ padding:38px 0 52px; }
  .hero__cta{ gap:20px; }
  .hero__cta .btn{ width:100%; }

  .story__ghost{ width:340px; margin-left:-170px; }
  .story__line{ font-size:22px; }
  .story__founder{ grid-template-columns:1fr; }
  .story__frame{ max-width:420px; margin-inline:auto; }

  /* the phone reads as one centred column */
  .hero__copy, .story__copy, .labband__body,
  .apoth__copy, .standard__head, .faq__head,
  .tcard, .vow, .specrow__item, .foot__brand{ text-align:center; }
  .hero__sub, .standard__lede, .faq__lede{ margin-inline:auto; }
  .hero__cta{ justify-content:center; }
  .story__quote{ font-size:20px; border-left:0; padding-left:0; }
  .story__by{ align-items:center; }
  .apoth__copy{ align-items:center; }
  .chips{ justify-content:center; }
  .apoth__copy .link-arrow{ align-self:center; }
  .tcard__icon{ margin-inline:auto; }
  .vow__big{ justify-content:center; }
  .foot__social{ justify-content:center; }
  .ph--crestFoot{ margin-inline:auto; }

  /* the hero photograph re-aims so the machine and the cat sit centre frame
     instead of falling off the right edge of the crop */
  .hero .ph--fill img{ object-position:66% 45%; }

  .dip{ grid-template-columns:1fr; }
  .dip__half:first-child{ border-right:0; border-bottom:1px solid rgba(196,164,104,.14); }
  .trio{ grid-template-columns:1fr; gap:18px; }
  .pillars{ grid-template-columns:1fr; gap:36px; }
  .faq__grid{ grid-template-columns:1fr; gap:36px; }
  .stat{ padding:26px 14px 24px; }
  .stat:nth-child(2n){ border-right:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--hair); }

  .dip__half{ min-height:360px; }
  .dip__title{ font-size:27px; }

  .mline{ grid-template-columns:34px 1fr; }
  .mline__d{ grid-column:2; margin-top:2px; }
  .specrow{ grid-template-columns:1fr; gap:18px; padding:22px; }
  .machine__hint--touch{ display:none; }
@media (max-width:1024px){
  /* below 1025 there is no pin and the video loops, so do not promise scroll */
  .machine__hint--desk{ display:none; }
  .machine__hint--touch{ display:inline; }
}
.machine__hint{ letter-spacing:.16em; }
  .spot{ width:40px; height:40px; margin:-20px 0 0 -20px; }  /* larger touch targets */

  .apoth__shot{ min-height:280px; }
  .labband{ min-height:0; }
  .labband__body{ padding-block:72px; }
  .labband__line{ font-size:20px; }
  .labband__line br{ display:none; }
  .labframe{ display:block; }
  .labframe__inner{ padding:44px 24px 38px; }
  .labframe__tag{ left:50%; margin-left:-26px; }
  .labframe__rule{ justify-content:center; }
  .labframe__rule i{ width:70px; }

  .stats{ grid-template-columns:1fr 1fr; }
  .stat dt{ font-size:32px; }
  .vows__grid{ grid-template-columns:1fr; }
  .certs{ grid-template-columns:repeat(2,1fr); gap:18px 12px; }
  .certs__item{ font-size:11px; }
  .certs__item em{ font-size:8px; }
  .vows__title{ font-size:22px; }

  .faq__a{ padding-right:8px; }


  /* footer to the supplied design: centred crest and tagline, then each
     link group as full width serif rows with a gold chevron, hairlines
     between groups, and a centred bottom block with pipe separators */
  .foot{ padding-top:44px; }
  .foot__grid{ grid-template-columns:1fr; gap:0; padding-bottom:0; }
  .foot__brand{ padding-bottom:28px; }
  .ph--crestFoot{ width:148px; margin-bottom:16px; }
  .foot__brand > p{
    font-family:var(--serif); font-size:14.5px; line-height:1.6;
    color:rgba(238,229,214,.85);
  }
  .foot__social{ gap:26px; margin-top:20px; }
  .foot__social a{ width:20px; height:20px; }

  .foot__col{ border-top:1px solid var(--hair); padding:16px 0 18px; }
  .foot__col h4{ color:var(--gold-lt); margin-bottom:6px; }
  .foot__col a{
    display:flex; align-items:center; justify-content:space-between;
    font-family:var(--serif); font-size:15.5px; line-height:2.3;
    color:var(--ivory);
  }
  .foot__col a::after{
    content:"\203A";   /* single right angle chevron */
    font-size:17px; color:var(--gold-lt);
  }

  .foot__bar{
    flex-direction:column; align-items:center; gap:9px;
    padding-block:22px 26px;
    font-family:var(--serif); font-size:12.5px; color:var(--dim);
  }
  .foot__mid, .foot__legal{ gap:0; flex-wrap:wrap; justify-content:center; }
  .foot__mid a + a::before, .foot__legal a + a::before{
    content:"|"; margin:0 10px; color:var(--faint);
  }
}

/* ───────── reduced motion ───────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .machine__pinWrap{ height:auto !important; }
  .js .machine__scene{ position:static !important; height:auto !important; padding-block:44px; }
  .js .hero .ph--fill img{ animation:none; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  .spot::before{ animation:none; opacity:0; }
}