/* ════════════════════════════════════════════════════════════════
     CONCEPT D — "THE CELEBRATION"
     The site is a celebration you attend: the invitation opens (intro),
     the work processes past (hero), you read the menu (services), the
     guestbook signs itself (testimonials), you meet the hosts (about),
     and you send your reply (CTA). Synthesised from the client review
     of concepts A/B/C — see plans/concept-d-v2-the-celebration.md.
     ════════════════════════════════════════════════════════════════ */
  @font-face{font-family:"Bickham";src:url("ds/fonts/BickhamScriptPro-Regular.woff2") format("woff2");font-weight:400;font-display:swap;}

  :root{
    --maroon:#6C131E;--maroon-deep:#51161B;--maroon-900:#3D0F15;
    --gold:#B38C45;--gold-soft:#D5B471;--champagne:#F3D8B4;--champagne-50:#FBEEDB;
    /* gold as small LABEL TEXT on light grounds — the bright --gold fails AA (~3:1) at label size;
       this deeper ink clears 4.5:1 on ivory/paper/shade/champagne. Decorative gold stays --gold. */
    --gold-ink:#856327;
    --ivory:#FFFAF1;--ivory-shade:#F5ECDD;--paper:#FFFDF8;--taupe:#CCC0B2;--taupe-soft:#E4DCD0;
    --plum-black:#2A1E28;--gold-tint:#E7D3A8;
    --grad-gold:linear-gradient(135deg,#E7D3A8 0%,#D5B471 32%,#B38C45 64%,#8A6A30 100%);
    --grad-gold-text:linear-gradient(100deg,#C9A35A 0%,#E3CB91 38%,#B38C45 70%,#9A7634 100%);
    /* gilding for headings on maroon — kept bright end to end so no word dulls into the ground */
    --grad-gild:linear-gradient(100deg,#D5B471 0%,#EFD9A9 42%,#D5B471 74%,#C9A35A 100%);
    --text-primary:var(--plum-black);--text-body:#45323D;--text-muted:#736570;
    --text-on-dark:var(--ivory);--text-on-dark-muted:#E0CFC0;
    --line:var(--taupe-soft);--line-gold:var(--gold-tint);--line-on-dark:rgba(243,216,180,.28);
    /* DS type: display = ARPONA (licensed via Adobe Fonts kit yxt8fof; Cormorant Garamond
       is the graceful fallback). script = BICKHAM SCRIPT PRO (we ship the .woff2, so it's
       the real brand hand — no Pinyon substitute). body = Montserrat. */
    --font-display:'arpona','Cormorant Garamond',Georgia,serif;
    --font-body:'Montserrat',system-ui,-apple-system,Arial,sans-serif;
    --font-script:'Bickham',cursive;
    --fs-h1:clamp(38px,4.6vw,60px);--fs-h2:clamp(30px,3.4vw,44px);--fs-sub:clamp(24px,3vw,38px);
    --fs-lead:18px;--fs-body:16px;--fs-small:14px;--fs-caption:12.5px;--lh-body:1.7;
    --fs-eyebrow:12.5px;--tracking-eyebrow:.28em;--fs-meta:11px;--tracking-meta:.18em;--tracking-label:.16em;
    --fs-script:clamp(32px,4.2vw,54px);
    --script-display:clamp(40px,4.6vw,66px);
    --script-md:28px;
    --gutter:clamp(20px,5vw,64px);--section-y:clamp(64px,9vw,140px);--container:1200px;
    --radius-md:12px;--radius-lg:18px;
    --shadow-sm:0 2px 10px rgba(42,30,40,.06);--shadow-md:0 10px 30px -12px rgba(42,30,40,.16);
    --shadow-lg:0 26px 60px -22px rgba(42,30,40,.26);--shadow-gold:0 18px 44px -20px rgba(138,106,48,.30);
    --ease-soft:cubic-bezier(.22,.61,.36,1);--ease-inout:cubic-bezier(.65,0,.35,1);
    --dur-fast:180ms;--dur-base:340ms;--dur-slow:560ms;
    --slide:.62s;
    --hero-maroon:linear-gradient(157deg,#51161B 0%,#390F13 100%);
  }
  *{box-sizing:border-box;}
  /* buttons and form fields take the page font, not the browser's Arial (audit C1, 4 Nov) */
  button,input,select,textarea{font-family:inherit;}
  html{scroll-behavior:auto;}
  html,body{margin:0;padding:0;}
  body{font-family:var(--font-body);color:var(--text-body);background:var(--ivory);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;
    /* flex column so the global footer is always anchored to the viewport bottom —
       short sub-pages (contact, thin archive stories) never end on a slab of bare ivory */
    display:flex;flex-direction:column;min-height:100vh;}
  main{flex:1 0 auto;}
  @media (pointer:fine){a,button{cursor:pointer;}}
  ::selection{background:var(--champagne);color:var(--maroon);}
  a{color:inherit;text-decoration:none;}
  h1,h2,h3,h4{font-family:var(--font-display);font-weight:300;margin:0;line-height:1.12;color:var(--text-primary);text-wrap:balance;}
  p{margin:0;}
  img{max-width:100%;}
  .wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);}
  /* darker gold on light grounds — the #B38C45 gold failed AA at this small size; #8A6A30 passes */
  .eyebrow{font-family:var(--font-body);font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;font-weight:600;color:#8A6A30;}
  .eyebrow.on-dark{color:var(--champagne);}
  .script{font-family:var(--font-script);font-weight:400;line-height:.9;color:var(--maroon);}
  .i-tail{font-family:var(--font-display);font-style:italic;font-weight:300;color:inherit;}
  /* section heads: gold accent tick; the same light weight as the hero line (27 Oct) */
  .shead h2{font-weight:300;font-size:var(--fs-h2);color:var(--maroon);margin-top:12px;}
  .shead{position:relative;}
  .shead::before{content:"";display:block;width:44px;height:2px;border-radius:2px;background:var(--grad-gold);margin-bottom:18px;}
  .shead.centered{text-align:center;}
  .shead.centered::before{margin-left:auto;margin-right:auto;}

  /* ── the wax seal (engraved, actually reads as gold) ── */
  .wax{position:relative;display:grid;place-items:center;border-radius:999px;background:var(--grad-gold);
    box-shadow:inset 0 2px 3px rgba(255,255,255,.55),inset 0 -4px 7px rgba(120,88,36,.55),0 4px 14px rgba(61,15,21,.35);flex:0 0 auto;}
  .wax img{width:72%;height:72%;object-fit:contain;opacity:.75;filter:drop-shadow(0 1px 0 rgba(255,255,255,.35));}

  /* ── The Seal button ── */
  /* the wax seal came off the buttons (client feedback) — a small diamond closes the label instead */
  .seal-btn{position:relative;display:inline-flex;align-items:center;gap:14px;background:var(--maroon);color:var(--ivory);padding:16px 28px 16px 30px;border:0;border-radius:999px;font-family:var(--font-body);font-size:var(--fs-caption);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:600;overflow:hidden;transition:background var(--dur-base) var(--ease-soft);}
  .seal-btn .label{position:relative;z-index:2;display:inline-flex;align-items:center;gap:14px;}
  .seal-btn .label::after{content:"";width:6px;height:6px;flex:0 0 auto;background:var(--grad-gold);transform:rotate(45deg);transition:transform var(--dur-base) var(--ease-soft);}
  .seal-btn:hover .label::after{transform:rotate(45deg) scale(1.1);}
  .seal-btn .wax{position:relative;z-index:2;width:32px;height:32px;box-shadow:inset 0 1px 2px rgba(255,255,255,.55),inset 0 -3px 5px rgba(120,88,36,.55);}
  /* hover state: a subtle gold shimmer sweeps across (replaces the removed translate) */
  .seal-btn::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(231,211,168,.32) 50%,transparent 62%);transform:translateX(-130%);transition:transform .7s var(--ease-soft);}
  /* ivory (on-dark) buttons need a darker, warmer gold sweep or it washes out on the light ground */
  .seal-btn.on-dark::before{background:linear-gradient(115deg,transparent 36%,rgba(179,140,69,.34) 50%,transparent 64%);}
  .seal-btn:hover::before{transform:translateX(130%);}
  .seal-btn:hover{background:var(--maroon-900);}
  .seal-btn.is-stamp{animation:sealPress 560ms var(--ease-soft);}
  @keyframes sealPress{0%{transform:scale(1);}18%{transform:scale(.928);}42%{transform:scale(.936);}100%{transform:scale(1);}}
  .seal-btn .emboss{position:absolute;inset:0;border-radius:999px;pointer-events:none;}
  .seal-btn.is-stamp .emboss{animation:emboss 660ms var(--ease-soft);}
  @keyframes emboss{
    0%{box-shadow:inset 0 0 0 2px rgba(231,211,168,.9),0 0 0 0 rgba(231,211,168,.55);}
    50%{box-shadow:inset 0 0 0 12px rgba(231,211,168,.42),0 0 0 8px rgba(231,211,168,.22);}
    100%{box-shadow:inset 0 0 0 22px rgba(231,211,168,0),0 0 0 18px rgba(231,211,168,0);}}
  .seal-btn.on-dark{background:var(--champagne);color:var(--maroon-900);}
  /* gold on hover, not paler cream (19 Oct review) */
.seal-btn.on-dark:hover{background:var(--gold);}
  .seal-btn.on-dark .label::after{background:var(--maroon);}
  .seal-btn.ghost{background:transparent;color:var(--maroon);padding-left:2px;}
  .seal-btn.ghost:hover{background:transparent;color:var(--maroon-900);}
  .seal-btn.ghost .wax{width:24px;height:24px;}
  /* Start Your Story wears the View cursor's gilding (27 Oct); the sheen sweep is its hover */
  .seal-btn.seal-btn--gild,.seal-btn.seal-btn--gild:hover{background:var(--grad-gold);color:var(--maroon-900);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -3px 6px rgba(120,88,36,.4);}
  .seal-btn.seal-btn--gild::before{background:linear-gradient(115deg,transparent 36%,rgba(255,250,241,.5) 50%,transparent 64%);}
  .seal-btn.seal-btn--gild .label::after{background:var(--maroon);}

  /* ── photo plate ── */
  .plate{position:relative;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line-gold);background:var(--ivory);box-shadow:var(--shadow-lg);}
  .plate img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease-soft);}
  .plate .cap{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 16px;background:linear-gradient(transparent,rgba(42,30,40,.30) 32%,rgba(42,30,40,.84));}
  .plate .cap .nm{font-family:var(--font-script);font-size:var(--script-md);line-height:.9;color:var(--ivory);text-shadow:0 1px 8px rgba(42,30,40,.55);}
  .plate .cap .mt{font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:var(--champagne);margin-top:7px;text-shadow:0 1px 6px rgba(42,30,40,.5);}

  /* reveal */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity var(--slide) var(--ease-soft),transform var(--slide) var(--ease-soft);}
  .reveal.in{opacity:1;transform:none;}
  .reveal[data-d="1"]{transition-delay:.09s;}.reveal[data-d="2"]{transition-delay:.18s;}
  .reveal[data-d="3"]{transition-delay:.27s;}.reveal[data-d="4"]{transition-delay:.36s;}

  /* ═════ SHELL ═════ */
  .view{display:none;}.view.active{display:block;}
  .view.slidein{animation:slidein calc(var(--slide) + .12s) var(--ease-soft);}
  @keyframes slidein{0%{opacity:0;transform:translateY(32px);}68%{opacity:1;transform:translateY(-7px);}100%{opacity:1;transform:none;}}

  .topbar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);border-bottom:0;
    transition:background var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft),backdrop-filter var(--dur-base) var(--ease-soft);}
  /* over the hero: no chrome — the panel gradient shows through as one surface */
  .topbar.on-hero{background:transparent;box-shadow:none;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;}
  /* turns solid at once, not on a fade: mid-fade the page text showed through the logo and menu */
  .topbar.is-bar{background:var(--maroon-900);box-shadow:0 1px 0 rgba(243,216,180,.12);transition:none;}
  .topbar.is-bar .logo img,.topbar.is-bar .menu-btn{transition:none;}
  /* on a celebration's page the solid bar wears the couple's colour, as the hero above it does (4 Nov) */
  .topbar.is-themed.is-bar{background:var(--bar-acc,var(--maroon-900));}
  .topbar .logo{position:relative;display:block;height:44px;width:260px;}
  .topbar .logo img{position:absolute;inset:0;height:100%;width:100%;object-fit:contain;object-position:left center;transition:opacity var(--dur-base) var(--ease-soft);}
  /* every dark-background mark is the gilded lockup; the pale sections keep the deep
     maroon one, where gold would lose too much contrast to read */
  .topbar .logo .cream{opacity:0;}
  .topbar.is-bar .logo .maroon{opacity:0;}
  .topbar.is-bar .logo .cream{opacity:1;}
  .topbar.is-bar .menu-btn{color:var(--champagne);}
  .topbar.on-hero .logo .maroon{opacity:0;}
  .topbar.on-hero .logo .cream{opacity:1;}
  .topbar.on-hero .menu-btn{color:var(--champagne);}
  .menu-btn{display:flex;align-items:center;gap:12px;font-size:var(--fs-caption);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:600;color:var(--maroon);background:none;border:0;font-family:var(--font-body);transition:color var(--dur-base) var(--ease-soft);}
  /* the nav slides down cleanly — same vertical language and easing as the curtain page-wipe */
  .topbar__brand{opacity:0;transform:translateY(calc(-100% - 26px));}
  .topbar.is-ready .topbar__brand{animation:navSlide .72s var(--ease-inout) both;}
  .topbar.is-ready .logo.topbar__brand{animation-delay:0s;}   /* in step with the headline (5 Nov) */
  .topbar.is-ready .menu-btn.topbar__brand{animation-delay:.1s;}
  @keyframes navSlide{
    0%{opacity:0;transform:translateY(calc(-100% - 26px));}
    /* ends on no transform at all: a held translate keeps the logo on its own layer, which
       some phones paint at a lower resolution, so the lockup read slightly soft (4 Nov) */
    100%{opacity:1;transform:none;}
  }
  @media (prefers-reduced-motion:reduce){.topbar__brand{opacity:1;transform:none;}.topbar.is-ready .topbar__brand{animation:none;}}
  .menu-btn .bars{display:inline-flex;flex-direction:column;gap:5px;}
  .menu-btn .bars i{width:24px;height:1.5px;background:currentColor;}
  @media(max-width:560px){.topbar .logo{height:36px;width:200px;}}
  /* ── live IST clock — sits in the top bar, just before the Menu control ── */
  .topbar__clock{margin-left:auto;margin-right:clamp(16px,2vw,28px);display:flex;align-items:center;gap:8px;
    font-family:var(--font-body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
    color:var(--champagne);transition:color var(--dur-base) var(--ease-soft);white-space:nowrap;}
  .topbar.is-bar .topbar__clock{color:var(--champagne);}
  .topbar.on-hero .topbar__clock{color:var(--champagne);}
  .topbar__clock-dot{width:6px;height:6px;border-radius:50%;background:var(--gold-soft);animation:clockPulse 2.6s ease-in-out infinite;}
  @keyframes clockPulse{0%,100%{box-shadow:0 0 0 0 rgba(213,180,113,.55);}55%{box-shadow:0 0 0 5px rgba(213,180,113,0);}}
  .topbar__clock-city{opacity:.85;}
  .topbar__clock-time{font-variant-numeric:tabular-nums;letter-spacing:.08em;}
  .topbar__clock-z{color:var(--gold-soft);font-size:9.5px;}
  /* live studio status — green + pulsing dot within working hours (Mon–Fri 10–18 IST), dimmed otherwise */
  .topbar__clock-sep{opacity:.4;}
  .topbar__clock-status{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;}
  /* open = gold pulse (brand), not SaaS green */
  .topbar__clock.is-open .topbar__clock-dot{background:var(--gold-soft);box-shadow:0 0 10px rgba(213,180,113,.75);}
  .topbar__clock.is-open .topbar__clock-status{color:var(--gold-soft);}
  .topbar.is-bar .topbar__clock.is-open .topbar__clock-status{color:var(--champagne);}
  .topbar__clock.is-closed .topbar__clock-dot{background:currentColor;opacity:.45;animation:none;box-shadow:none;}
  .topbar__clock.is-closed .topbar__clock-status{opacity:.6;}
  @media(max-width:640px){.topbar__clock{display:none;}}

  /* ═════ §0 INTRO — the invitation arrives (once per session) ═════ */
  .intro{position:fixed;inset:0;z-index:100;background:var(--maroon-deep);display:grid;place-items:center;overflow:hidden;transition:transform .9s var(--ease-inout);}
  .intro::before{content:"";position:absolute;inset:0;background:url('assets/logo/mubaarak-badge-gold.svg') center/min(70vmin,640px) no-repeat;opacity:.05;pointer-events:none;}
  .intro.lift{transform:translateY(-100%);}
  .env{position:relative;width:min(440px,86vw);aspect-ratio:5/6;perspective:1600px;transform:scale(1.04);transition:transform .9s var(--ease-inout);}
  .intro.lift .env{transform:scale(.94) translateY(-30px);}
  .env__inner{position:absolute;inset:0;border-radius:10px;overflow:hidden;background:var(--ivory);color:var(--maroon);
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(24px,6vw,44px);
    border:1px solid var(--gold-tint);box-shadow:var(--shadow-lg);}
  .env__inner::after{content:"";position:absolute;inset:16px;pointer-events:none;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:3px;}
  .env__inner .eyebrow{font-size:11px;}
  .env__inner h1{font-size:clamp(28px,5.4vw,40px);margin-top:16px;color:var(--maroon);font-weight:400;}
  .env__inner .script{font-size:clamp(28px,5vw,40px);color:var(--gold);margin-top:12px;display:block;}
  .env__msg > *{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease-soft),transform .6s var(--ease-soft);}
  .env.open .env__msg > *{opacity:1;transform:none;}
  .env.open .env__msg > *:nth-child(1){transition-delay:.45s;}
  .env.open .env__msg > *:nth-child(2){transition-delay:.58s;}
  .env.open .env__msg > *:nth-child(3){transition-delay:.71s;}
  .env__cover{position:absolute;inset:0;z-index:3;border-radius:10px;overflow:hidden;transform-origin:left center;
    background:var(--maroon);background-image:linear-gradient(157deg,#5a1a20 0%,#3a0f14 100%);color:var(--ivory);
    border:1px solid rgba(231,211,168,.4);box-shadow:var(--shadow-lg);backface-visibility:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding:30px;
    transition:transform 1.15s var(--ease-inout);}
  .env__cover::after{content:"";position:absolute;inset:16px;pointer-events:none;border:1px solid rgba(213,180,113,.42);border-radius:3px;}
  .env.open .env__cover{transform:rotateY(-165deg);}
  .env__cover .wax{width:132px;height:132px;transition:transform .5s var(--ease-soft);}
  .env.pressed .env__cover .wax{animation:waxPress .7s var(--ease-soft);}
  @keyframes waxPress{0%{transform:scale(1);}30%{transform:scale(.86);}55%{transform:scale(.9);}100%{transform:scale(1);}}
  .env__cover .wax::after{content:"";position:absolute;inset:-6px;border-radius:999px;border:1px solid var(--gold-soft);opacity:0;}
  .env.pressed .env__cover .wax::after{animation:waxRing .9s var(--ease-soft);}
  @keyframes waxRing{0%{opacity:.9;transform:scale(.7);}100%{opacity:0;transform:scale(1.6);}}
  .env__cover .wm{font-family:var(--font-display);font-size:19px;letter-spacing:.34em;text-transform:uppercase;color:var(--champagne);}
  .env__cover .inv{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft);font-weight:600;}
  .intro .skip{position:absolute;bottom:26px;right:30px;background:none;border:0;color:var(--gold-soft);font-family:var(--font-body);font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;opacity:.75;}
  .intro .skip:hover{opacity:1;color:var(--ivory);}
  .noscroll{overflow:hidden;height:100vh;}

  /* ═════ §1 HERO — Dv2: maroon invitation panel (top) + pinned work reel (bottom) ═════ */
  /* the panel sits in normal flow; you scroll past it, then the reel pins and scrubs (C's reel__pin) */
  .celeb{position:relative;background:var(--ivory);}

  /* ── top: the invitation panel — a maroon band (not full-height) holding the motif + tagline (from C's pagehead) ── */
  .celeb__panel{position:relative;background:var(--maroon);background-image:var(--hero-maroon);color:var(--ivory);
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    min-height:67vh;padding:clamp(96px,13vh,150px) var(--gutter) clamp(76px,9vh,104px);overflow:hidden;}
  .celeb__panelInner{position:relative;z-index:1;max-width:min(760px,92vw);}
  .celeb__panel .motif{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold);margin:20px 0 8px;}
  .celeb__panel .motif .ln{height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--gold));}
  .celeb__panel .motif .ln.r{background:linear-gradient(90deg,var(--gold),transparent);}
  .celeb__panel .motif .dia{width:6px;height:6px;background:var(--grad-gold);transform:rotate(45deg);flex:0 0 auto;}
  /* headings on maroon are gilded (client feedback: gold, not white, on the dark ground);
     body copy stays cream — gold at body size fails the contrast check */
  .gild{background:var(--grad-gild);-webkit-background-clip:text;background-clip:text;color:var(--gold-soft);-webkit-text-fill-color:transparent;}
  .celeb__panel h1{font-size:var(--fs-h1);color:var(--gold-soft);text-wrap:balance;}
  .celeb__panel h1 .he-lift{background:var(--grad-gild);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.08em;}
  @media(min-width:901px){.celeb__panel h1{font-size:clamp(36px,4.2vw,58px);}}
  .celeb__panel h1 .hs{font-family:var(--font-script);color:var(--gold-soft);font-size:var(--fs-script);display:block;margin-top:.12em;line-height:1;}
  .celeb__panel .lede{max-width:52ch;margin:18px auto 0;color:var(--text-on-dark-muted);font-size:var(--fs-lead);line-height:1.7;}
  /* desktop: the intro runs wider so it reads in three lines, not five (26 Oct review);
     the headline keeps its old measure */
  @media(min-width:901px){
    .celeb__panelInner{max-width:min(1040px,92vw);}
    .celeb__panel h1{max-width:760px;margin-inline:auto;}
    .celeb__panel .lede{max-width:80ch;}
  }
  /* no word left alone on a paragraph's last line ("…keepsakes of your / story.", 26 Oct) —
     the browser pulls a word or two down so the last line never holds a single word, while
     the lines keep their full width */
  p{text-wrap:pretty;}
  /* project Idea and Outcome: plain wrapping, because "pretty" pulled a word down mid-paragraph and left a short line (audit W4) */
  .csec__body p{text-wrap:wrap;}
  /* the home intro is short enough to share its words evenly — three full lines, no tail */
  .celeb__panel .lede{text-wrap:balance;}

  /* ── hero entrance — one quiet motion: the whole panel fades and rises as a single unit.
     No staggering, no mask-rise; the words simply arrive. Plays on every visit. */
  .celeb__panel .he{opacity:0;}
  .celeb__panel.entered .he{animation:heRise .75s var(--ease-soft) both;}
  /* in order (audit A2): headline at 0, subline at +150ms, marquee and top bar at +300ms, the celebrations below at +450ms */
  .celeb__panel.entered .he--lede{animation-delay:.15s;}
  .reel__stage,.reel__nav,.celeb__cta{transition:opacity .7s var(--ease-soft);}
  .celeb.reel-wait .reel__pin > :not(.reel__bg){opacity:0 !important;}
  @media (prefers-reduced-motion:reduce){ .celeb.reel-wait .reel__pin > :not(.reel__bg){opacity:1 !important;} }
  @keyframes heRise{0%{opacity:0;transform:translateY(10px);}100%{opacity:1;transform:none;}}
  @media (prefers-reduced-motion:reduce){
    .celeb__panel .he{opacity:1 !important;animation:none !important;}
  }
  /* the final state, for any path that skips the entrance entirely */
  .celeb__panel.no-entry .he,
  .celeb__panel.no-entry .celeb__marquee,
  .celeb__panel.no-entry .celeb__panelCta{opacity:1 !important;animation:none !important;}
  .celeb__panel .cta-row{margin-top:30px;display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap;}
  /* the CTAs live inside the pinned reel — visible while browsing the work */
  .celeb__cta{position:relative;z-index:4;margin-top:clamp(28px,4.5vh,48px);display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 var(--gutter);pointer-events:auto;opacity:1;}
  /* primary CTA now lives in the hero panel, under the lede */
  .celeb__panelCta{margin-top:clamp(24px,3.4vh,38px);opacity:0;}
  .celeb__panel.entered .celeb__panelCta{animation:heRise .75s var(--ease-soft) .06s both;}
  @media (prefers-reduced-motion:reduce){.celeb__panelCta{opacity:1 !important;animation:none !important;}}


  /* ── animated marquee line, foot of the panel (placeholder pointers) ── */
  .celeb__marquee{position:absolute;left:0;bottom:0;width:100vw;max-width:100vw;
    overflow:hidden;border-top:1px solid var(--line-on-dark);
    padding:13px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    opacity:0;transition:opacity 1s var(--ease-soft) .3s;}
  .celeb__panel.entered .celeb__marquee{opacity:1;}
  /* the line starts moving only once the panel is shown, so it starts fresh in view. Started
     earlier (behind the opening, at opacity 0), iPhone Safari could keep the masked strip
     unpainted: the hem showed as an empty band until a reload (4 Nov) */
  .celeb__marquee-track{display:flex;width:max-content;}
  .celeb__panel.entered .celeb__marquee-track,.celeb__panel.no-entry .celeb__marquee-track{animation:celebMq 34s linear infinite;}
  .celeb__mq-seg{display:flex;align-items:center;flex:0 0 auto;}
  .celeb__mq-item{flex:0 0 auto;font-family:var(--font-body);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--champagne);white-space:nowrap;}
  .celeb__mq-sep{flex:0 0 auto;margin:0 clamp(18px,2.4vw,30px);color:var(--gold);font-size:9px;}
  @keyframes celebMq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion:reduce){.celeb__panel .celeb__marquee-track,.celeb__panel.entered .celeb__marquee-track{animation:none;justify-content:center;width:100%;}.celeb__mq-seg:nth-child(2){display:none;}}

  /* secondary action = a quiet text link (the wax seal only belongs on the primary CTA) */
  .text-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:var(--fs-caption);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:600;color:var(--maroon);position:relative;padding-bottom:3px;}
  .text-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--grad-gold);transform:scaleX(.32);transform-origin:left;transition:transform var(--dur-base) var(--ease-soft);}
  .text-link:hover::after{transform:scaleX(1);}
  .text-link.on-dark{color:var(--champagne);}
  .text-link.on-dark::after{background:var(--gold-soft);}

  /* ── bottom: the work reel — pinned, scroll-scrubbed horizontal filmstrip (ported from Concept C) ── */
  /* no longer scroll-scrubbed: the spreads stack in one stage and turn on their own; the
     dial beneath is the control (client feedback — the tile movement is not tied to scroll) */
  .reel{position:relative;background:var(--ivory-shade);transition:background-color 1.2s var(--ease-soft);overflow:hidden;}
  .reel__bg{position:absolute;inset:-8%;z-index:0;pointer-events:none;background-size:cover;background-position:center;filter:blur(52px) saturate(1.12);opacity:0;transition:opacity 1.2s var(--ease-soft);transform:scale(1.06);}
  .reel__bg.on{opacity:.24;}
  .reel__pin{position:relative;display:flex;flex-direction:column;align-items:center;padding:clamp(64px,9vh,96px) 0 clamp(48px,6vh,72px);}
  .reel__head{position:relative;text-align:center;z-index:3;margin-bottom:clamp(30px,4.5vh,52px);}
  .reel__head::before{content:"";display:block;width:44px;height:2px;border-radius:2px;background:var(--grad-gold);margin:0 auto 16px;}
  .reel__head .eyebrow{color:var(--gold-ink);}
  /* the same firm weight as every other section title on the page (it had inherited the light h2 default) */
  .reel__head h2{font-weight:300;font-size:var(--fs-h2);color:var(--maroon);text-wrap:balance;margin-top:12px;}
  /* the reel scroll-progress now fills the BUTTON ITSELF left→right with the golden gradient
     (client feedback): the fill grows from the left edge as the filmstrip is scrubbed, landing on
     the solid gold "final state" — no border-ring fill, no hover slide on the arrow */
  /* the reel's closing CTA is the design-system seal button (the bespoke outline pill left a border artefact) */
  /* the stage: every spread occupies the same cell; only the active one is visible. The
     incoming spread drifts in from the right, the outgoing one slips left — a page turning */
  /* ── the reel: an endless filmstrip. Full spreads side by side, the neighbours dimmed and a
     touch smaller; the strip slides to centre the chosen celebration — by the arrows beside the
     indicators, a diamond, auto-play, or a click on a dimmed neighbour. Copies of the outer
     spreads sit beyond each end, so the rollover is one continuous slide and there is never
     empty space beside the first or last (the strip re-syncs silently once it settles). ── */
  .reel__stage{position:relative;z-index:2;width:100%;}
  .reel__cap{display:none;} /* the phone caption panel; see the 900px block */
  .reel__track{position:relative;display:flex;align-items:center;width:auto;margin:0;gap:clamp(40px,6vw,90px);padding:0 12vw;will-change:transform;
    transition:transform .8s cubic-bezier(.3,.75,.2,1);}
  .reel__track.no-anim,.spread.no-anim{transition:none !important;}
  /* (written as .reel__track .spread so the dimming outranks the generic .reveal.in fade-in) */
  .reel__track .spread{flex:0 0 auto;width:min(880px,90vw);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;cursor:pointer;
    opacity:.42;transform:scale(.94);filter:blur(.4px);transition:opacity .65s var(--ease-soft),transform .65s var(--ease-soft),filter .65s var(--ease-soft);}
  .reel__track .spread.is-active{opacity:1;transform:scale(1);filter:none;cursor:auto;}
  /* inactive neighbour: brighten on hover so the photo isn't held dim under the pointer */
  @media(pointer:fine){
    .reel__track .spread:not(.is-active):hover{opacity:.88;filter:none;}
  }
  .reel__track .spread:not(.is-active) .spread__copy{pointer-events:none;}
  .reel__track .spread:not(.is-active) .rcard::after{display:none;}
  .reel__track .spread.is-active .rcard{box-shadow:0 30px 60px -28px rgba(42,30,40,.55);}
  .reel__clone{display:none;}
  @media(min-width:901px){.reel__clone{display:grid;}}
  /* the indicator row: prev arrow · diamonds · next arrow; "View All Work" sits beneath it */
  .reel__nav{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.4vw,36px);margin-top:clamp(28px,4.5vh,48px);}
  .reel__nav .reel__dial{margin-top:0;}
  /* the arrows — a paper disc holding a faceted gold arrow, with a short thread toward the diamonds */
  .reel__arw{display:flex;align-items:center;gap:0;padding:0;background:none;border:0;cursor:pointer;color:var(--gold);}
  .reel__arw .arw-icon{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;background:var(--paper);border:1px solid var(--gold-tint);
    box-shadow:0 10px 26px -12px rgba(42,30,40,.45);display:grid;place-items:center;transition:transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft);}
  .reel__arw .arw-icon::before{content:"";width:18px;height:12px;background:var(--grad-gold);
    clip-path:polygon(0 42%,64% 42%,45% 12%,58% 0,100% 50%,58% 100%,45% 88%,64% 58%,0 58%);
    transition:transform .35s var(--ease-soft);}
  .reel__arw.prev .arw-icon::before{transform:scaleX(-1);}
  .reel__arw .ln{width:22px;height:1px;background:var(--gold);transition:width .35s var(--ease-soft);}
  .reel__arw.prev .ln{background:linear-gradient(90deg,var(--gold),transparent);margin-left:-1px;}
  .reel__arw.next .ln{background:linear-gradient(90deg,transparent,var(--gold));margin-right:-1px;}
  .reel__arw:hover .ln{width:32px;}
  .reel__arw:hover .arw-icon{box-shadow:0 14px 30px -12px rgba(42,30,40,.55);transform:translateX(2px);}
  .reel__arw.prev:hover .arw-icon{transform:translateX(-2px);}
  .reel__arw:hover .arw-icon::before{transform:scale(1.12);}
  .reel__arw.prev:hover .arw-icon::before{transform:scaleX(-1) scale(1.12);}
  .reel__arw:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:999px;}
  @media (prefers-reduced-motion:reduce){.reel__track,.spread{transition:none;}}

  /* ── the dial — the site's diamond motif as a control. A gold hairline carries one
     diamond per entry; a thread fills the segment after the active diamond while it plays,
     so the timing is visible. Click a diamond (or the line) to go there, hover holds it. ── */
  .dial{--dial-c:var(--gold);--dial-faint:color-mix(in srgb,var(--gold) 34%,transparent);--dial-ink:var(--gold-ink);--dial-t:6.5s;
    display:flex;flex-direction:column;align-items:center;gap:8px;user-select:none;-webkit-user-select:none;}
  .dial__row{display:flex;align-items:center;justify-content:center;}
  .dial__seg{position:relative;flex:0 0 auto;width:clamp(48px,5.6vw,84px);height:34px;cursor:pointer;background:none;border:0;padding:0;}
  .dial__seg::before,.dial__seg i{content:"";position:absolute;left:0;right:0;top:50%;height:1px;}
  .dial__seg::before{background:var(--dial-faint);}
  .dial__seg i{background:var(--dial-c);transform:scaleX(0);transform-origin:left center;}
  .dial__seg.lead,.dial__seg.tail{width:clamp(30px,3.4vw,52px);cursor:default;}
  .dial__seg.lead::before{background:linear-gradient(90deg,transparent,var(--dial-faint));}
  .dial__seg.tail::before{background:linear-gradient(90deg,var(--dial-faint),transparent);}
  .dial__seg.tail i{background:linear-gradient(90deg,var(--dial-c),transparent);}
  .dial__seg.is-done i{transform:scaleX(1);}
  .dial__seg.is-live i{animation:dialThread var(--dial-t) linear forwards;}
  .dial.is-held .dial__seg.is-live i{animation-play-state:paused;}
  @keyframes dialThread{from{transform:scaleX(0);}to{transform:scaleX(1);}}
  .dial__stop{position:relative;flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer;}
  .dial__stop::before{content:"";width:8px;height:8px;transform:rotate(45deg);border:1px solid var(--dial-c);background:transparent;
    transition:background .45s var(--ease-soft),transform .45s var(--ease-soft),box-shadow .45s var(--ease-soft);}
  .dial__stop:hover::before,.dial__stop:focus-visible::before{transform:rotate(45deg) scale(1.1);}
  .dial__stop.on::before{background:var(--grad-gold);border-color:transparent;transform:rotate(45deg) scale(1.35);box-shadow:0 0 0 5px color-mix(in srgb,var(--dial-c) 16%,transparent);}
  .dial__stop:focus-visible{outline:2px solid var(--dial-c);outline-offset:2px;border-radius:50%;}
  .dial__lbl{position:absolute;bottom:calc(100% + 3px);left:50%;transform:translate(-50%,0);white-space:nowrap;pointer-events:none;
    padding:6px 9px 5px;border:1px solid color-mix(in srgb,var(--dial-c) 24%,transparent);border-radius:2px;
    background:color-mix(in srgb,var(--paper) 94%,transparent);box-shadow:0 8px 22px -14px rgba(42,30,40,.48);
    font-family:var(--font-display);font-size:15px;font-style:italic;font-weight:500;letter-spacing:.01em;line-height:1.1;color:var(--dial-ink);opacity:0;
    transition:opacity .3s var(--ease-soft),transform .3s var(--ease-soft);}
  .dial--dark .dial__lbl{background:color-mix(in srgb,var(--maroon-deep) 94%,transparent);}
  .dial__stop:hover .dial__lbl,.dial__stop:focus-visible .dial__lbl{opacity:1;transform:translate(-50%,-4px);}
  .dial.no-cap .dial__cap{display:none;}
  .dial__cap{display:flex;align-items:baseline;gap:12px;font-family:var(--font-display);font-size:14px;letter-spacing:.06em;color:var(--dial-ink);min-height:1.4em;}
  .dial__cap b{font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.14em;}
  .dial__cap .nm{font-family:var(--font-script);font-size:22px;letter-spacing:0;color:var(--maroon);line-height:1;transition:opacity .4s var(--ease-soft);}
  .dial__cap .nm.fade{opacity:0;}
  .dial--dark{--dial-c:var(--gold-soft);--dial-faint:rgba(213,180,113,.32);--dial-ink:var(--champagne);}
  .dial--dark .dial__cap .nm{color:var(--champagne);}
  @media (prefers-reduced-motion:reduce){.dial__seg.is-live i{animation:none;transform:scaleX(1);}}
  .spread__card{width:min(380px,82vw);justify-self:center;cursor:pointer;}
  .spread__copy .eyebrow{color:var(--gold-ink);}
  .spread__copy h3{font-size:clamp(26px,2.7vw,40px);color:var(--maroon);margin-top:10px;line-height:1.05;text-wrap:balance;font-weight:300;}
  .spread__names{font-family:var(--font-script);font-size:clamp(22px,2.4vw,32px);color:var(--maroon);margin-top:4px;}
  .spread__brief{margin-top:16px;max-width:42ch;color:var(--text-body);}
  .spread__meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:14px 26px;font-size:var(--fs-caption);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-body);font-weight:600;}
  .spread__tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;}
  /* framed as small pills so they stay legible over every reel background tint (client feedback) */
  .spread__tag{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8A6A30;display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:1px solid var(--line-gold);border-radius:999px;background:color-mix(in srgb,var(--paper) 72%,transparent);}
  .spread__tag::before{content:"#";color:var(--gold);}

  /* reel photo card — D imagery in a matted frame with a caption (self-contained) */
  .rcard{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--gold-tint);box-shadow:var(--shadow-lg);
    background:var(--ivory-shade);transition:transform .3s var(--ease-soft),box-shadow .3s var(--ease-soft);}
  .rcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .55s var(--ease-soft),transform .5s var(--ease-soft);}
  .rcard img.is-out{opacity:0;}
  /* the hover page-through's second layer: it fades over the photo on screen (5 Nov) */
  .rcard img.rcard__next{opacity:0;z-index:1;transition:opacity .6s var(--ease-soft);}
  .rcard img.rcard__next.on{opacity:1;}
  .rcard__mat{position:absolute;inset:clamp(12px,1.5vw,18px);z-index:2;pointer-events:none;border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);border-radius:2px;}
  .rcard__cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(16px,1.8vw,22px);color:var(--ivory);background:linear-gradient(transparent 6%,rgba(42,30,40,.66) 80%);}
  .rcard__word{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);font-weight:600;margin-bottom:6px;}
  .rcard__name{font-family:var(--font-script);font-size:clamp(22px,2.6vw,30px);line-height:1.02;}
  /* a quiet hover: the faintest lift, no drift (client feedback) */
  .spread__card:hover .rcard{transform:none;box-shadow:var(--shadow-lg);}
  .spread__card:hover .rcard img{transform:none;}
  /* a whisper-quiet cue that the active card rewards a hover — a soft gold dot that breathes,
     and quietly retires the moment you actually hover in */
  @media(pointer:fine){
    .spread__card[data-gal] .rcard::after{content:"";position:absolute;top:14px;right:14px;z-index:4;width:8px;height:8px;border-radius:50%;
      background:var(--gold-soft);opacity:0;transition:opacity .5s var(--ease-soft);pointer-events:none;}
    .spread.is-active .spread__card[data-gal] .rcard::after{opacity:.85;animation:reelHint 2.4s ease-in-out infinite;}
    .spread__card[data-gal]:hover .rcard::after{opacity:0;animation:none;}
  }
  @keyframes reelHint{
    0%,100%{box-shadow:0 0 0 0 rgba(213,180,113,.5);}
    55%{box-shadow:0 0 0 6px rgba(213,180,113,0);}
  }
  /* closing "view all" spread — stacked work mosaic with a wax-sealed paper card */
  .rcard--all{position:relative;overflow:hidden;background:var(--maroon-deep);text-align:center;}
  .rcard--all__stack{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;}
  .rcard--all__stack img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease-soft),opacity .65s var(--ease-soft);}
  .rcard--all__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(168deg,rgba(81,22,27,.52) 0%,rgba(42,30,40,.78) 58%,rgba(57,15,19,.88) 100%);transition:background .45s var(--ease-soft);}
  .rcard--all__paper{
    position:absolute;inset:clamp(28px,5vw,42px);z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:clamp(24px,3vw,34px) clamp(20px,2.8vw,28px);background:var(--paper);border:1px solid var(--gold-tint);
    box-shadow:0 18px 44px -18px rgba(42,30,40,.42);border-radius:3px;
  }
  .rcard--all__paper::after{content:"";position:absolute;inset:12px;border:1px solid color-mix(in srgb,var(--gold) 42%,transparent);border-radius:2px;pointer-events:none;}
  /* a real gold wax seal (matches the page's other seals) — the maroon monogram sits
     dead-centre via object-fit + place-items, so it never reads as misaligned */
  .rcard--all .wax{
    position:relative;z-index:1;width:60px;height:60px;margin:0 auto 16px;display:grid;place-items:center;
    border-radius:999px;background:var(--grad-gold);
    box-shadow:inset 0 2px 3px rgba(255,255,255,.55),inset 0 -4px 7px rgba(120,88,36,.5),0 8px 20px -10px rgba(61,15,21,.4);
  }
  /* reset the absolute .rcard img rule so the seal's mark centres inside the wax (was pinned top-left) */
  .rcard--all .wax img{position:relative;inset:auto;width:58%;height:58%;object-fit:contain;object-position:center;opacity:.82;filter:drop-shadow(0 1px 0 rgba(255,255,255,.3));}
  .rcard--all__count{
    position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:center;gap:2px;
    font-family:var(--font-display);font-weight:500;line-height:1;color:var(--maroon);
  }
  .rcard--all__count .n{font-size:clamp(34px,4vw,46px);letter-spacing:-.02em;}
  .rcard--all__count .plus{font-size:clamp(18px,2.2vw,24px);color:var(--gold);margin-top:.12em;}
  .rcard--all .t{
    position:relative;z-index:1;margin-top:10px;font-size:var(--fs-meta);letter-spacing:.22em;text-transform:uppercase;
    color:var(--text-muted);font-weight:600;line-height:1.45;
  }
  .rcard--all .t .script{
    display:block;margin-top:6px;font-family:var(--font-script);font-size:clamp(24px,2.8vw,32px);
    letter-spacing:0;text-transform:none;color:var(--maroon);font-weight:400;line-height:1.05;
  }
  .rcard--all .s{
    position:relative;z-index:1;display:block;margin-top:clamp(14px,2vw,18px);font-size:var(--fs-meta);
    letter-spacing:var(--tracking-meta);text-transform:uppercase;color:var(--gold);font-weight:600;
  }
  .spread__card:hover .rcard--all__stack img{transform:scale(1.02);}
  .spread__card:hover .rcard--all__shade{background:linear-gradient(168deg,rgba(81,22,27,.62) 0%,rgba(42,30,40,.84) 58%,rgba(57,15,19,.94) 100%);}
  .spread__card:hover .rcard--all__paper{transform:none;box-shadow:0 24px 52px -16px rgba(42,30,40,.48);}
  .rcard--all__paper{transition:transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft);}

  /* the phone reel lives in the MOBILE HOMEPAGE block further down */
  /* "Read their story" under each reel card on desktop too, not only the photo (audit R5) */
  .spread__more{display:inline-flex;margin-top:22px;}

  /* ═════ §2 IN THE PAPERS — recognition ═════ */
  .papers{position:relative;padding:var(--section-y) 0;background:var(--champagne-50);text-align:center;overflow:hidden;}
  .papers .wrap{position:relative;}
  .papers .shead{margin-bottom:34px;}
  /* the recognition framed like a pressed certificate / press page */
  /* wide enough that every title sits on one line on desktop — the box grows, the type does not shrink (19 Oct review) */
  .press-page{position:relative;max-width:1020px;margin:0 auto;background:var(--paper);border:1px solid var(--gold-tint);box-shadow:var(--shadow-md);border-radius:4px;padding:clamp(26px,4vw,48px) clamp(24px,4vw,56px) clamp(28px,4vw,44px);}
  .press-page::after{content:"";position:absolute;inset:12px;border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);border-radius:2px;pointer-events:none;}
  .press-page .kicker{position:relative;font-size:var(--fs-meta);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;margin-bottom:18px;display:flex;align-items:center;justify-content:center;gap:12px;}
  .press-page .kicker .ln{height:1px;width:clamp(24px,5vw,44px);background:linear-gradient(90deg,transparent,var(--gold));}
  .press-page .kicker .ln.r{background:linear-gradient(90deg,var(--gold),transparent);}
  .awards{position:relative;max-width:none;margin:0;text-align:left;border-top:1px solid var(--line);}
  a.award{text-decoration:none;color:inherit;cursor:pointer;}
  .award{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:22px;padding:19px 6px;border-bottom:1px solid var(--line);transition:padding var(--dur-base) var(--ease-soft);}
  .award:last-child{border-bottom:0;}
  .award:hover{padding-left:0;}
  .award .yr{font-family:var(--font-display);font-size:22px;color:var(--gold-ink);font-weight:500;}
  .award .ttl{position:relative;font-family:var(--font-display);font-size:clamp(19px,2.2vw,26px);color:var(--text-primary);
    transition:color var(--dur-slow) var(--ease-soft);}
  /* foil span kept for a11y structure; hover is a clean ink→gold color fade (no clip wipe) */
  .award .ttl .foil{display:none;}
  .award:hover .ttl{color:var(--gold);}
  .award .by{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;}
  .proof{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,6vw,84px);margin-top:clamp(40px,5vw,58px);}
  .proof__num{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,3.6vw,46px);color:var(--maroon);line-height:1;}
  .proof__label{margin-top:8px;font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:var(--text-muted);font-weight:600;}
  @media(max-width:720px){.award{grid-template-columns:1fr;gap:6px;}.award .by{display:block;}}

  /* ═════ §3 THE MENU — services ═════ */
  .menu{padding:clamp(40px,4.4vw,60px) 0;background:var(--ivory-shade);}
  .menu .wrap{max-width:1320px;}   /* the section had ample width going unused — use it */
  .menu__head{text-align:center;margin-bottom:clamp(16px,2vw,24px);position:relative;z-index:1;}
  .menu__head::before{content:"";display:block;width:44px;height:2px;border-radius:2px;background:var(--grad-gold);margin:0 auto 16px;}
  .menu__head h2{font-size:var(--fs-h2);font-weight:300;color:var(--maroon);}
  /* the plate earns more of the row and hangs as a framed portrait print whose top edge sits
     on the menu card's top edge (client feedback: the small square read as un-premium) */
  .menu__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4vw,64px);align-items:start;}
  .menu__card{position:relative;background:var(--paper);border:1px solid var(--gold-tint);box-shadow:var(--shadow-md);padding:clamp(22px,2.6vw,34px) clamp(26px,3.4vw,44px);border-radius:4px;}
  .menu__card::after{content:"";position:absolute;inset:clamp(12px,1.5vw,18px);pointer-events:none;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:2px;}
  .menu__list{position:relative;z-index:1;}
  /* marker column keeps the diamond aligned to the name line; content column lets long names wrap */
  .mitem{display:grid;grid-template-columns:20px 1fr;gap:0 12px;padding:9px 6px;border-bottom:1px dotted var(--taupe);transition:background .3s var(--ease-soft);}
  .mitem:last-child{border-bottom:0;}
  .mitem__mark{grid-column:1;grid-row:1;width:7px;height:7px;margin-top:.5em;justify-self:center;background:var(--taupe);transform:rotate(45deg);transition:background .3s var(--ease-soft),transform .3s var(--ease-soft);}
  .mitem__main{grid-column:2;min-width:0;}
  .mitem__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
  .mitem__name{font-family:var(--font-display);font-weight:500;font-size:clamp(18px,1.6vw,21px);color:var(--text-primary);transition:color .3s var(--ease-soft);}
  .mitem__from{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);white-space:nowrap;}
  .mitem__desc{margin-top:4px;font-size:12.5px;color:var(--text-muted);line-height:1.55;max-width:60ch;}
  /* the studio's placeholder flag on the two new-for-2026 offerings — visibly a note, not copy */
  .mitem__note{display:block;margin-top:5px;padding-left:10px;border-left:2px solid var(--gold-tint);
    font-size:11px;line-height:1.55;color:var(--text-muted);max-width:56ch;}
  /* the active row steps in by sliding, not by padding — padding narrowed the text, the
     description re-wrapped and every row below jumped (26 Oct review) */
  .mitem__mark,.mitem__main{transition:transform .3s var(--ease-soft);}
  .mitem.is-on{background:linear-gradient(90deg,rgba(213,180,113,.16),transparent 70%);}
  .mitem.is-on .mitem__main{transform:translateX(8px);}
  .mitem.is-on .mitem__name{color:var(--maroon);}
  .mitem.is-on .mitem__mark{background:var(--grad-gold);transform:translateX(8px) rotate(45deg) scale(1.15);}
  /* the plate — one sharp square photo, crossfading real pieces */
  /* the plate rides along as you read down the list (sticky under the topbar), so the
     photo is always beside the offering you are looking at */
  .menu__plate{position:sticky;top:clamp(88px,12vh,120px);display:flex;flex-direction:column;justify-content:flex-start;}
  .menu__frame{position:relative;aspect-ratio:4/5;max-width:min(100%,calc(min(58vh,520px) * .8));margin:0 auto;width:100%;border-radius:2px;overflow:hidden;border:1px solid var(--gold-tint);box-shadow:var(--shadow-lg);background:var(--taupe-soft);}
  /* a gold mat inside the frame, the same one the reel cards wear */
  .menu__frame::after{content:"";position:absolute;inset:clamp(12px,1.5vw,18px);pointer-events:none;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:2px;z-index:3;}
  .menu__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease-soft);}
  .menu__frame img.show{opacity:1;}
  .menu__tag{position:absolute;left:14px;top:14px;z-index:4;background:rgba(61,15,21,.78);color:var(--champagne);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;padding:7px 12px;border-radius:999px;backdrop-filter:blur(4px);transition:opacity .4s var(--ease-soft);}
  /* the caption is set like a gallery plaque: a hairline and diamond, then the piece's name in italic */
  .menu__tag.fade{opacity:0;}
  /* placeholder plate — shown for services not yet shot (Venue/Decor/Graphics) */
  .menu__ph{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
    background:linear-gradient(155deg,var(--champagne-50),var(--ivory-shade));opacity:0;transition:opacity .8s var(--ease-soft);pointer-events:none;text-align:center;padding:24px;}
  .menu__frame.is-ph .menu__ph{opacity:1;}
  .menu__ph-mark{width:66px;height:66px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
    background:var(--paper);border:1px solid var(--line-gold);box-shadow:var(--shadow-sm);}
  .menu__ph-mark img{width:34px;height:34px;max-width:34px;max-height:34px;object-fit:contain;opacity:.6;}
  .menu__ph-lbl{font-family:var(--font-body);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--gold-ink);line-height:1.7;}
  /* mobile placeholder tile */
  .m-entry__img.is-ph{display:grid;place-items:center;background:linear-gradient(155deg,var(--champagne-50),var(--ivory-shade));}
  .m-entry__ph{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
  .m-entry__ph img{width:44px;height:44px;object-fit:contain;opacity:.5;}
  .m-entry__ph em{font-style:normal;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--gold-ink);}
  /* ── mobile: a paged menu card (course by course), preview inline ── */
  .menu__pager{display:none;}
  .menu__pcard{position:relative;background:var(--paper);border:1px solid var(--gold-tint);box-shadow:var(--shadow-md);border-radius:4px;padding:26px 20px 22px;}
  .menu__pcard::after{content:"";position:absolute;inset:10px;border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);border-radius:2px;pointer-events:none;}
  .menu__course-h{position:relative;z-index:1;text-align:center;margin-bottom:16px;}
  .menu__course-h h3{font-family:var(--font-display);font-size:26px;font-weight:300;color:var(--maroon);margin-top:4px;line-height:1.14;}
  /* the price line sits with the offering's name, not squeezed onto the entry row */
  .menu__course-from{display:block;margin-top:7px;font-size:11px;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:var(--gold-ink);}
  .menu__entries{position:relative;z-index:1;display:flex;flex-direction:column;gap:22px;transition:opacity .3s var(--ease-soft),transform .3s var(--ease-soft);}
  .menu__entries.fade{opacity:0;transform:translateY(8px);}
  /* one offering fills the page, so the entry is the card's body rather than a list row */
  .m-entry{position:relative;z-index:1;display:block;}
  .m-entry__img{position:relative;aspect-ratio:4/3;border-radius:3px;overflow:hidden;border:1px solid var(--gold-tint);box-shadow:var(--shadow-sm);background:var(--taupe-soft);}
  .m-entry__img img{width:100%;height:100%;object-fit:cover;display:block;}
  .m-entry__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:12px;}
  .m-entry__name{font-family:var(--font-display);font-weight:500;font-size:21px;color:var(--maroon);}
  .m-entry__from{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);white-space:nowrap;}
  .m-entry__desc{margin-top:12px;font-size:13.5px;color:var(--text-body);line-height:1.62;}
  /* the studio's own "this is placeholder" flag — kept visibly apart from the offering copy */
  .m-entry__note{display:block;margin-top:11px;padding-left:11px;border-left:2px solid var(--gold-tint);
    font-size:11px;line-height:1.55;color:var(--text-muted);}
  .m-entry__more{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-size:11px;
    letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--maroon);}
  .m-entry__more .a{transition:transform var(--dur-base) var(--ease-soft);}
  .m-entry:hover .m-entry__more .a{transform:translateX(2px);}
  .menu__nav{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
  .menu__nav button{background:none;border:0;font-family:var(--font-body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--maroon);display:flex;align-items:center;gap:8px;padding:8px 4px;}
  .menu__nav button:disabled{opacity:.28;}
  /* the dots page the card themselves — 7px of ink, 44px of hit area */
  .menu__pagedots{display:flex;gap:0;}
  .menu__pagedots button{background:none;border:0;padding:0 6px;min-height:44px;display:inline-flex;align-items:center;}
  .menu__pagedots button::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--taupe);
    transition:background var(--dur-base) var(--ease-soft),transform var(--dur-base) var(--ease-soft);}
  .menu__pagedots button.on::before{background:var(--grad-gold);transform:scale(1.2);}
  @media(max-width:900px){
    .menu__grid{display:none;}
    .menu__pager{display:block;}
  }

  /* ═════ §4 THE GUESTBOOK — testimonials (scroll-scrubbed) ═════ */
  /* no longer pinned or scroll-stepped: the notes turn on their own and the dial pages them */
  .gb{position:relative;background:var(--maroon-deep);}
  .gb__sticky{position:relative;color:var(--ivory);display:grid;grid-template-rows:auto auto auto;row-gap:clamp(28px,4vh,44px);padding-bottom:clamp(48px,7vh,80px);}
  .gb__open{display:inline-block;margin-top:clamp(22px,2.6vw,30px);opacity:0;transition:opacity .6s var(--ease-soft) 1.6s;}
  .sig-line.active.signing + .gb__open{opacity:1;}
  .gb__top{position:relative;text-align:center;padding:clamp(76px,10vh,96px) var(--gutter) 0;}
  .gb__top .shead h2{color:var(--gold-soft);background:var(--grad-gild);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  .gb__top .count{position:absolute;right:var(--gutter);top:clamp(76px,10vh,96px);font-family:var(--font-display);font-size:20px;color:var(--gold-soft);}.gb__top .count b{color:var(--ivory);font-weight:500;}
  /* text-first: the quote gets the wider column, the artefact shrinks (client feedback) */
  .gb__stage{position:relative;display:grid;grid-template-columns:.66fr 1.34fr;align-items:center;gap:clamp(40px,5vw,76px);padding:clamp(10px,2vh,24px) var(--gutter) 0;max-width:1360px;margin:0 auto;width:100%;}
  .gb__spot{position:relative;height:100%;display:grid;place-items:center;}
  .artefact{position:relative;width:min(19vw,270px);height:min(48vh,380px);transition:opacity .3s var(--ease-soft),transform .3s var(--ease-soft),filter .3s var(--ease-soft);}
  .artefact.gone{opacity:0;transform:translateY(8px) scale(.98);filter:blur(5px);}
  /* monogram card — initials stand in for a photo (or a client logo, later) */
  .gb__mono{position:absolute;inset:0;background:var(--paper);border-radius:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:26px 22px;text-align:center;}
  .gb__mono::after{content:"";position:absolute;inset:12px;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:2px;pointer-events:none;}
  .gb__mono-mark{width:40px;height:40px;display:grid;place-items:center;border-radius:999px;background:var(--grad-gold);margin-bottom:6px;
    box-shadow:inset 0 1px 2px rgba(255,255,255,.55),inset 0 -3px 5px rgba(120,88,36,.5);}
  .gb__mono-mark img{width:62%;height:62%;object-fit:contain;opacity:.8;}
  .gb__mono-ini{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,3.4vw,44px);color:var(--maroon);line-height:1;}
  .gb__mono-nm{font-family:var(--font-script);font-size:clamp(22px,2.4vw,28px);color:var(--maroon);line-height:1;margin-top:4px;}
  .gb__mono-sub{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--text-muted);margin-top:8px;line-height:1.5;}
  .gb__book{position:relative;min-width:0;padding-right:min(3vw,30px);}
  /* the note block is held to the longest note so the stage never jumps between them */
  .gb__book{align-self:start;}
  /* desktop: every note shows at most eight lines, so all four read at one height and the
     words start in the same place each time (centring them made the text jump as notes
     turned). A long note fades out and offers "Read the full note" (19 + 26 Oct reviews). */
  .gb__more{display:none;}
  @media(min-width:901px){
    .gb__quote.is-clamped{max-height:calc(1.62em * 8);overflow:hidden;
      -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent);}
    .gb__more{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:0;background:none;border:0;
      font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gold-soft);cursor:pointer;}
    .gb__more:hover{color:var(--champagne);}
    .gb__more:focus-visible{outline:2px solid var(--champagne);outline-offset:4px;}
    /* 5 Nov: the book keeps the height of a full eight-line note (measured in JS while
       .is-sizing is on) so the stage never jumps, but the note and its sign-off sit
       together, centred against the photo. A short note no longer leaves a gap above
       "Regards" (client sheet: "align the content in center as per the box"). */
    .gb__book{display:flex;flex-direction:column;justify-content:center;align-self:center;}
    .gb__book .gb__more,.gb__book .gb__open{align-self:flex-start;}
    .gb__more[hidden]{display:none;}
    .gb__book.is-sizing .gb__quote{min-height:calc(1.62em * 8);}
    .gb__book.is-sizing .gb__more{display:inline-flex;visibility:hidden;}
    .gb__book.is-sizing .gb__open[hidden]{display:inline-block !important;visibility:hidden;}
  }
  /* the notes run in full now, so the type steps down and the measure widens — the note
     still fills the stage, but as a letter you read rather than a headline */
  .gb__quote{font-family:var(--font-display);font-weight:300;font-size:clamp(15px,1.45vw,19px);line-height:1.62;color:var(--champagne);max-width:58ch;transition:opacity .34s var(--ease-soft),transform .34s var(--ease-soft);}
  .gb__quote .gb__para{display:block;}
  .gb__quote .gb__para + .gb__para{margin-top:.85em;}
  .gb__quote .qm{color:var(--gold-soft);font-size:1.4em;line-height:0;vertical-align:-.32em;margin-right:2px;}
  .gb__quote.gone{opacity:0;transform:translateY(12px);}
  .sig-line{position:relative;transition:opacity .45s var(--ease-soft),transform .45s var(--ease-soft);}
  .sig-line .nm{font-family:var(--font-script);color:var(--champagne);line-height:.95;white-space:nowrap;font-feature-settings:'calt' 0;}
  .sig-line .sig-off{font-size:var(--fs-small);color:var(--text-on-dark-muted);margin-bottom:4px;}
  .sig-line.ghost1 .sig-off{display:none;}
  .sig-line.active .sig-off{opacity:0;transition:opacity .5s var(--ease-soft) .1s;}
  .sig-line.active.present .sig-off{opacity:1;}
  .sig-line .sub{font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:var(--text-on-dark-muted);margin-top:10px;}
  .sig-line.ghost1{opacity:.4;margin-top:26px;}.sig-line.ghost1 .nm{font-size:30px;color:var(--gold-soft);}.sig-line.ghost1 .sub{display:none;}
  /* signature lives in its own beat — space below the quote, then ink draws */
  .sig-line.active{margin-top:clamp(20px,2.5vw,28px);padding-top:0;border-top:0;opacity:0;transform:translateY(16px);pointer-events:none;}
  .sig-line.active.present{opacity:1;transform:none;transition:opacity .65s var(--ease-soft),transform .65s var(--ease-soft);}
  .sig-line.active .nm{font-size:clamp(38px,3.8vw,58px);}
  /* the script's flourishes reach past its box (the R's lead-in, the y's tail), so the ink
     window reaches past it too, or the signature is drawn with its ends cut off (27 Oct) */
  .sig-line.active .ink{display:inline-block;clip-path:inset(-.35em calc(100% + .45em) -.5em -.45em);-webkit-clip-path:inset(-.35em calc(100% + .45em) -.5em -.45em);filter:blur(.55px);opacity:.65;transition:clip-path 2.15s cubic-bezier(.48,.04,.22,1),-webkit-clip-path 2.15s cubic-bezier(.48,.04,.22,1),filter 1.5s var(--ease-soft),opacity 1.2s var(--ease-soft);}
  .sig-line.active.signing .ink{clip-path:inset(-.35em -.45em -.5em -.45em);-webkit-clip-path:inset(-.35em -.45em -.5em -.45em);filter:blur(0);opacity:1;}
  .sig-line.active .rule{display:block;height:1px;margin-top:12px;background:linear-gradient(90deg,rgba(213,180,113,.85),transparent 90%);transform:scaleX(0);transform-origin:left center;transition:transform 1.35s cubic-bezier(.48,.04,.22,1) .55s;}
  .sig-line.active.signing .rule{transform:scaleX(1);}
  .sig-line.active .sub{opacity:0;transform:translateY(6px);transition:opacity .55s var(--ease-soft) 1.35s,transform .55s var(--ease-soft) 1.35s;}
  .sig-line.active.signing .sub{opacity:1;transform:none;}
  .gb__foot{padding:0 var(--gutter) 30px;display:none;align-items:flex-end;justify-content:space-between;color:var(--text-on-dark-muted);max-width:1360px;margin:0 auto;width:100%;}
  .gb__foot .phrase{font-family:var(--font-display);font-size:clamp(18px,2.2vw,24px);color:var(--gold-soft);}
  .gb__foot .open{font-size:var(--fs-meta);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);}
  .gb__foot .open:hover{color:var(--ivory);}
  .gb__dial{justify-self:center;}
  /* the dial's own caption carries the count now */
  .gb__top .count{display:none;}
  @media(max-width:900px){
    .gb__dial{display:none;}
    .gb__top{padding-top:80px;}
    .gb__stage{grid-template-columns:1fr;gap:22px;align-content:center;}
    .artefact{width:min(52vw,260px);height:min(36vh,330px);margin:0 auto;}
    .gb__book{padding-right:0;}
    .gb__quote{font-size:18px;min-height:7em;max-width:100%;}
    .sig-line.ghost1{display:none;}
    .sig-line.active .nm{font-size:clamp(34px,9vw,48px);white-space:normal;}
    .sig-line.active .ink{clip-path:none;-webkit-clip-path:none;filter:none;opacity:1;}
    .sig-line.active .rule{transform:scaleX(1);}
    .sig-line.active .sub{opacity:1;transform:none;}
    .gb__foot .phrase{display:none;}
  }

  /* ═════ §5 THE APPROACH — programme with a gold thread ═════ */
  .approach{padding:var(--section-y) 0;background:var(--ivory);}
  .approach .shead{margin-bottom:54px;}
  .ap-track{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:0;max-width:960px;margin:0 auto;}
  .ap-line{position:absolute;left:calc(12.5% - 11px);right:calc(12.5% - 11px);top:11px;height:1px;background:var(--line-gold);overflow:hidden;z-index:0;}
  .ap-line .fill{position:absolute;left:0;top:0;height:100%;width:var(--ap-fill,0%);background:linear-gradient(90deg,var(--gold),var(--gold-soft) 55%,var(--gold));transition:width 1.1s var(--ease-soft);}
  .ap-step{position:relative;flex:1 1 0;min-width:0;text-align:center;padding:0 8px;background:none;border:0;font-family:var(--font-body);color:inherit;z-index:1;display:flex;flex-direction:column;align-items:center;cursor:pointer;}
  .ap-node{position:relative;width:22px;height:22px;flex:0 0 auto;margin:0 0 14px;}
  .ap-node .dia{position:absolute;inset:0;margin:auto;width:9px;height:9px;background:var(--taupe);transform:rotate(45deg);transition:background var(--dur-slow) var(--ease-soft),box-shadow var(--dur-slow) var(--ease-soft),transform var(--dur-slow) var(--ease-soft);}
  .ap-node .ring{position:absolute;inset:-5px;border:1px solid var(--line-gold);border-radius:50%;transform:scale(.4);opacity:0;transition:transform var(--dur-slow) var(--ease-soft),opacity var(--dur-slow) var(--ease-soft);}
  .ap-step.lit .ap-node .dia{background:var(--grad-gold);}
  .ap-step.sel .ap-node .dia{background:var(--grad-gold);transform:rotate(45deg) scale(1.18);box-shadow:0 0 0 4px rgba(179,140,69,.13),0 0 14px rgba(213,180,113,.55);}
  .ap-step.sel .ap-node .ring{transform:scale(1);opacity:1;}
  .ap-step .no{display:none;}
  .ap-step__lbl{min-height:3.4em;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;gap:0;}
  .ap-step h3{font-family:var(--font-display);font-size:clamp(17px,1.5vw,21px);color:var(--text-muted);margin:0;font-weight:400;line-height:1.2;transition:color var(--dur-base) var(--ease-soft);}
  .ap-step.sel h3{color:var(--maroon);font-weight:300;}
  /* the "when" line + the underline always reserve their space (opacity/width toggle only), so
     moving between steps never changes a step's height — no reflow, no panel jump (client feedback) */
  .ap-step__when{display:block;height:1.1em;opacity:0;margin-top:7px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;transition:opacity var(--dur-base) var(--ease-soft);}
  .ap-step.sel .ap-step__when{opacity:1;}
  .ap-step__lbl::after{content:"";display:block;width:0;height:2px;border-radius:2px;background:var(--grad-gold);margin-top:10px;transition:width var(--dur-base) var(--ease-soft);}
  .ap-step.sel .ap-step__lbl::after{width:26px;}
  /* shared detail panel (desktop) */
  .ap-panel{position:relative;margin:44px auto 0;max-width:840px;display:grid;grid-template-columns:200px 1fr;gap:clamp(24px,3vw,44px);align-items:center;
    border:1px solid var(--line-gold);border-radius:var(--radius-md);background:var(--paper);box-shadow:var(--shadow-sm);padding:clamp(22px,2.6vw,32px);
    /* fixed floor so swapping steps never reflows the card height (the source of the jank) */
    min-height:296px;}
  .ap-panel__img{aspect-ratio:3/4;border-radius:8px;overflow:hidden;border:1px solid var(--line-gold);transition:opacity .5s var(--ease-soft);}
  .ap-panel__img img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block;}
  .ap-panel__img.fade{opacity:0;}
  /* crossfade the copy; the swap happens at opacity 0 so nothing pops mid-transition.
     kept unhurried (in step with the site's other transitions) so hovering across steps feels graceful, not flickery */
  .ap-panel__body{transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft);will-change:opacity,transform;}
  .ap-panel__body.fade{opacity:0;transform:translateY(6px);}
  .ap-panel__body h4{font-family:var(--font-display);font-size:24px;font-weight:300;color:var(--maroon);}
  .ap-panel__body p{margin-top:10px;color:var(--text-body);font-size:var(--fs-small);line-height:1.7;max-width:56ch;}
  .ap-panel__body .when{margin-top:12px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;}
  /* the final step is "sealed & delivered" — on the desktop card a real wax seal is
     pressed into the bottom-right corner (the same seal from the page-load invitation) */
  .ap-sealed{display:flex;align-items:center;gap:clamp(16px,2.4vw,22px);margin-top:18px;padding-top:16px;border-top:1px solid var(--line-gold);}
  .ap-sealed__mark{width:clamp(68px,9vw,92px);height:auto;flex:0 0 auto;display:block;opacity:1;filter:none;}
  .ap-sealed__label{font-family:var(--font-display);font-style:italic;font-size:clamp(16px,1.6vw,18px);color:var(--maroon);line-height:1.25;}
  /* desktop-only text note that sits above the corner stamp */
  .ap-sealed-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-gold);}
  /* the pressed wax seal, bottom-right of the card */
  .ap-stamp{position:absolute;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,28px);z-index:5;pointer-events:none;
    width:clamp(60px,6.6vw,82px);height:clamp(60px,6.6vw,82px);opacity:0;transform:scale(1.55) rotate(-16deg);}
  /* a lighter, brighter wax than the default gold — softer bottom shading so it doesn't read dark */
  .ap-stamp .wax{width:100%;height:100%;background:linear-gradient(135deg,#EFDDB6 0%,#DEC488 38%,#CDA85E 72%,#B98F44 100%);
    box-shadow:inset 0 2px 3px rgba(255,255,255,.7),inset 0 -4px 8px rgba(150,115,55,.38),0 8px 20px -8px rgba(61,15,21,.36);}
  .ap-stamp .wax img{opacity:.74;}
  .ap-panel--sealed .ap-stamp{animation:apStamp .62s cubic-bezier(.32,1.18,.5,1) both;}
  /* keep the copy clear of the seal when it's present */
  .ap-panel--sealed .ap-panel__body{padding-right:clamp(52px,7vw,86px);}
  @keyframes apStamp{
    0%{opacity:0;transform:scale(1.6) rotate(-22deg);}
    52%{opacity:1;transform:scale(.9) rotate(-8deg);}
    74%{transform:scale(1.03) rotate(-11deg);}
    100%{opacity:1;transform:scale(1) rotate(-10deg);}
  }
  @media (prefers-reduced-motion:reduce){.ap-stamp{animation:none;}.ap-panel--sealed .ap-stamp{opacity:1;transform:rotate(-10deg);}}
  @media(max-width:860px){
    .ap-track{flex-direction:column;gap:0;max-width:460px;margin:0 auto;}
    .ap-line{left:27px;right:auto;top:20px;bottom:24px;width:1px;height:auto;}
    .ap-line .fill{width:100%;height:var(--ap-fill,0%);transition:height 1.1s var(--ease-soft);}
    .ap-track.drawn .ap-line .fill{height:var(--ap-fill,0%);}
    .ap-step{display:block;position:relative;flex:none;text-align:left;padding:12px 0 8px 64px;align-items:flex-start;}
    /* the desktop label is a centred flex column; left it inherited that here, so every step
       title sat centre-aligned above its own left-aligned body */
    .ap-step__lbl{min-height:0;justify-content:flex-start;align-items:flex-start;text-align:left;}
    .ap-step__lbl::after{margin-left:0;}
    .ap-node{position:absolute;left:16px;top:14px;margin:0;}
    .ap-step .no{display:none;}
    /* accordion body inline on mobile.
       display:block is load-bearing: .ap-mbody is a <span>, and max-height / overflow do not
       apply to a non-replaced INLINE box — so every unselected step kept its full body height
       and only lost its ink, putting ~280px of blank ivory between each pair of steps. */
    .ap-step .ap-mbody{display:block;max-height:0;overflow:hidden;opacity:0;transition:max-height var(--dur-slow) var(--ease-soft),opacity var(--dur-base) var(--ease-soft);}
    .ap-step.sel .ap-mbody{max-height:340px;opacity:1;}
    .ap-step .ap-mbody p{font-size:var(--fs-small);color:var(--text-body);margin-top:8px;max-width:56ch;}
    /* the duration already prints under the title on the open step — twice in one card is once too many */
    .ap-step .ap-mbody .when{display:block;margin-top:10px;font-size:10px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;}
    .ap-step .ap-mbody .ap-sealed{margin-top:12px;margin-bottom:14px;}
    .ap-step .ap-mbody .ap-sealed__mark{width:clamp(60px,16vw,76px);}
    .ap-panel{display:none;}
  }
  @media(min-width:861px){.ap-step .ap-mbody{display:none;}}

  /* ═════ HOME — approach teaser (full programme moved to the Studio page) ═════ */
  .approach-teaser{padding:var(--section-y) 0;background:var(--ivory);}
  .ap-teaser{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center;
    background:var(--paper);border:1px solid var(--gold-tint);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
    padding:clamp(30px,4vw,56px);position:relative;overflow:hidden;}
  .ap-teaser::after{content:"";position:absolute;inset:clamp(12px,1.5vw,18px);pointer-events:none;border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);border-radius:3px;}
  .ap-teaser__body{position:relative;z-index:1;}
  .ap-teaser__body h2{font-size:var(--fs-h2);font-weight:300;color:var(--maroon);margin-top:12px;}
  .ap-teaser__body p{margin-top:16px;color:var(--text-body);font-size:var(--fs-body);line-height:1.7;max-width:44ch;}
  .ap-teaser__body .text-link{margin-top:22px;}
  .ap-teaser__steps{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px;}
  .ap-teaser__steps span{display:flex;align-items:baseline;gap:14px;padding:15px 4px;border-bottom:1px dotted var(--taupe);font-family:var(--font-display);font-size:clamp(17px,1.7vw,21px);color:var(--text-primary);font-weight:400;}
  .ap-teaser__steps span:last-child{border-bottom:0;}
  .ap-teaser__steps b{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--gold);flex:0 0 auto;}
  @media(max-width:860px){.ap-teaser{grid-template-columns:1fr;gap:26px;}}

  /* ═════ SHARED — unified page hero band (solid stripe + centred header) ═════
     Every sub-page opens on the same full-bleed maroon stripe (~1/3 viewport),
     header centred on it, then the page content begins on ivory below. */
  .page-hero{position:relative;background:var(--maroon);background-image:var(--hero-maroon);color:var(--ivory);
    text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-height:clamp(300px,34vh,410px);
    padding:clamp(104px,13vh,146px) var(--gutter) clamp(48px,6vh,70px);}
  .page-hero__inner{position:relative;z-index:1;max-width:min(760px,92vw);margin:0 auto;}
  .page-hero .eyebrow{display:block;color:var(--champagne);}
  .page-hero h1{font-size:var(--fs-h1);color:var(--gold-soft);margin-top:14px;background:var(--grad-gild);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  /* page titles read as one plain line, like every section heading on the site — no light
     weight with an italic tail (26 Oct review) */
  .page-hero h1{font-weight:300;}
  .page-hero h1 .i-tail{font-style:normal;font-weight:inherit;-webkit-text-fill-color:inherit;}
  .page-hero .lede{max-width:56ch;margin:16px auto 0;color:var(--text-on-dark-muted);font-size:var(--fs-lead);line-height:1.7;}
  .page-hero .lede b{color:var(--champagne);font-weight:600;}
  /* the gold hairline motif from the home hero, echoed under the stripe eyebrow */
  .page-hero__motif{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold);margin:0 0 4px;}
  .page-hero .eyebrow + .page-hero__motif{margin:12px 0 6px;}
  .page-hero__motif .ln{height:1px;width:56px;background:linear-gradient(90deg,transparent,var(--gold));}
  .page-hero__motif .ln.r{background:linear-gradient(90deg,var(--gold),transparent);}
  .page-hero__motif .dia{width:6px;height:6px;background:var(--grad-gold);transform:rotate(45deg);flex:0 0 auto;}
  @media(max-width:560px){
    .page-hero{min-height:clamp(260px,42vh,360px);}
    /* the mixed roman/italic headlines wrapped wherever the measure ran out — "Partners in /
       life. *Partners* / in purpose." on the Studio page was the worst of them. Breaking at
       the italic tail is where the line wants to break anyway, so every page hero gets the
       same deliberate two-line shape instead of an arbitrary one — and the size comes down
       to the home hero's mobile step so the tail actually fits the line it was given. */
    .page-hero h1{font-size:clamp(31px,8vw,40px);}
    .page-hero h1 .i-tail{display:block;}
  }
  /* the studio's own notes on the preview — visibly the studio talking to the client, not
     copy written for a couple. They used to run as bold text inside the hero lede, where on
     a phone they took four of the seven lines the hero shows. */
  .studio-note{max-width:680px;margin:clamp(22px,3vw,32px) auto 0;padding:13px 17px;
    background:var(--ivory-shade);border-left:2px solid var(--gold);border-radius:0 var(--radius-md) var(--radius-md) 0;
    font-size:var(--fs-caption);line-height:1.65;color:var(--text-muted);}
  .studio-note b{color:var(--maroon);font-weight:600;letter-spacing:.02em;}
  /* the studio's scale, now that the individual roster is gone (client, 15 Jul) */
  .team__scale{max-width:52ch;margin:clamp(6px,1.6vw,14px) auto 0;text-align:center;
    font-size:var(--fs-small);line-height:1.7;color:var(--text-muted);}
  .team__scale b{color:var(--maroon);font-weight:600;}
  /* Snap It opens on the sub-brand's own plum/charcoal ground (same as the homepage Snap It
     card) for continuity, with an inset gold hairline so it reads as a distinct offering */
  .page-hero--snapit{background:var(--plum-black);background-image:linear-gradient(145deg,#33232f,#211722);}
  .page-hero--snapit::after{content:"";position:absolute;inset:clamp(14px,2vw,22px);pointer-events:none;border:1px solid rgba(213,180,113,.24);border-radius:4px;}
  .page-hero--snapit .page-hero__motif{color:var(--gold-soft);}

  /* ═════ STUDIO — team roster (monogram placeholders for illustrated portraits) ═════ */
  .team{padding:var(--section-y) 0 clamp(40px,6vw,72px);background:var(--ivory-shade);}
  .team .shead.centered{margin-bottom:16px;}
  .team .shead h2{color:var(--maroon);font-weight:300;}
  .team__note{max-width:56ch;margin:0 auto clamp(28px,3.4vw,44px);text-align:center;font-size:var(--fs-small);color:var(--text-muted);line-height:1.7;}
  .team__note b{color:var(--maroon);}
  /* founders sit apart in two larger tiles, above the rest of the team */
  .team__founders{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,34px);max-width:760px;margin:clamp(30px,4vw,46px) auto clamp(30px,3.6vw,44px);}
  .tmember--founder{padding:clamp(28px,3vw,40px);}
  .tmember--founder .tmember__avatar{width:clamp(104px,11vw,140px);height:clamp(104px,11vw,140px);border-style:solid;}
  .tmember--founder .tmember__ini{font-size:clamp(32px,4vw,46px);}
  .tmember__avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:50%;}
  .tmember--founder .tmember__nm{font-size:clamp(22px,2.2vw,27px);}
  .tmember--founder .tmember__bio{font-size:14px;max-width:34ch;margin-left:auto;margin-right:auto;}
  .team__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px);}
  /* placeholder seats — the team can grow to eight; muted so they read as open, not real people */
  .tmember--seat{background:transparent;box-shadow:none;border-style:dashed;border-color:color-mix(in srgb,var(--gold) 40%,transparent);}
  .tmember--seat:hover{transform:none;box-shadow:none;}
  .tmember--seat .tmember__avatar{background:none;border-style:dashed;opacity:.7;}
  .tmember--seat .tmember__ini{color:var(--gold);font-weight:400;}
  .tmember--seat .tmember__nm{color:var(--text-muted);font-weight:500;}
  .tmember--seat .tmember__role{color:var(--text-muted);opacity:.75;}
  .tmember--seat .tmember__bio{opacity:.75;}
  .tmember{margin:0;background:var(--paper);border:1px solid var(--gold-tint);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);
    padding:clamp(20px,2.4vw,28px);text-align:center;transition:transform var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft);}
  .tmember:hover{transform:none;box-shadow:var(--shadow-md);}
  .tmember__avatar{position:relative;width:clamp(78px,9vw,104px);height:clamp(78px,9vw,104px);margin:0 auto 16px;border-radius:50%;
    display:grid;place-items:center;background:radial-gradient(120% 120% at 50% 20%,var(--champagne-50),var(--ivory-shade));
    border:1px dashed color-mix(in srgb,var(--gold) 55%,transparent);}
  .tmember__ini{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,3vw,32px);color:var(--maroon);}
  .tmember__nm{font-family:var(--font-display);font-weight:500;font-size:20px;color:var(--maroon);}
  .tmember__role{margin-top:4px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--gold-ink);}
  .tmember__bio{margin-top:12px;font-size:13px;line-height:1.6;color:var(--text-muted);}
  @media(max-width:900px){.team__grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:460px){.team__grid{grid-template-columns:1fr;max-width:320px;margin:0 auto;}.team__founders{grid-template-columns:1fr;max-width:320px;}}

  /* ═════ STUDIO — join us (now sits inside the team section) ═════ */
  .team .joinus__card{margin-top:clamp(44px,6vw,76px);}
  /* kept understated so it doesn't compete with the maroon page-hero stripe — a soft paper
     card on the ivory-shade team section, gold-hairline framed rather than a bold fill */
  .joinus__card{position:relative;overflow:hidden;max-width:820px;margin:0 auto;text-align:center;color:var(--text-body);
    background:var(--paper);background-image:linear-gradient(155deg,var(--paper),var(--champagne-50));border:1px solid var(--line-gold);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);padding:clamp(36px,5vw,60px) clamp(28px,5vw,64px);}
  .joinus__card::before{content:"";position:absolute;right:-70px;bottom:-70px;width:260px;height:260px;background:url('assets/logo/mubaarak-badge-maroon.svg') center/contain no-repeat;opacity:.05;pointer-events:none;}
  .joinus__card h2{font-size:var(--fs-h2);font-weight:300;color:var(--maroon);margin-top:12px;position:relative;z-index:1;}
  .joinus__card p{max-width:46ch;margin:16px auto 0;color:var(--text-body);font-size:var(--fs-small);line-height:1.7;position:relative;z-index:1;}
  .joinus__card .seal-btn{margin-top:28px;position:relative;z-index:1;text-transform:none;letter-spacing:.04em;}

  /* ═════ §6 THE HOSTS — about ═════ */
  .hosts{padding:var(--section-y) 0;background:var(--paper);}
  .hosts__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,4vw,64px);align-items:center;}
  .hosts__collage{position:relative;height:min(66vh,560px);}
  .hosts__collage .plate{position:absolute;}
  /* the couple leads: largest, in front, gold-shadowed — the two solo portraits sit behind it */
  .hosts__collage .h1p{width:70%;aspect-ratio:3/4;left:0;top:9%;z-index:3;box-shadow:var(--shadow-gold);}
  .hosts__collage .h2p{width:34%;aspect-ratio:3/4;right:0;bottom:0;z-index:2;}
  .hosts__collage .h3p{width:34%;aspect-ratio:3/4;right:0;top:0;z-index:1;opacity:.92;}
  /* the solo portraits are shot loose: bias the crop up so neither head is clipped */
  .hosts__collage .h2p img,.hosts__collage .h3p img{object-position:50% 22%;}
  /* one portrait of the two founders, not the three-photo collage (19 + 26 Oct reviews) */
  .hosts__collage.is-single{height:auto;display:flex;justify-content:center;}
  .hosts__collage.is-single .h1p{position:relative;inset:auto;width:min(100%,440px);}
  /* the text sits on a maroon accent card, so the section reads in two shades, not one flat ground */
  .hosts__note{position:relative;overflow:hidden;background:var(--maroon-deep);background-image:linear-gradient(155deg,#5a1a20,#3a0f14);color:var(--text-on-dark);border-radius:var(--radius-lg);padding:clamp(30px,4vw,54px);box-shadow:var(--shadow-lg);}
  .hosts__note::before{content:"";position:absolute;right:-70px;bottom:-70px;width:280px;height:280px;background:url('assets/logo/mubaarak-badge-gold.svg') center/contain no-repeat;opacity:.06;pointer-events:none;}
  .hosts .shead.centered{margin-bottom:clamp(28px,3.5vw,46px);}
  .hosts .shead h2{color:var(--maroon);font-weight:300;}
  .hosts__note .eyebrow{color:var(--champagne);}
  .hosts__note h2{font-size:var(--fs-h2);font-weight:300;color:var(--champagne);margin-top:12px;}
  .hosts .lede{margin-top:18px;color:var(--text-on-dark-muted);font-size:var(--fs-lead);line-height:1.75;max-width:52ch;}
  /* founders' signature — the detailed bios now live on the About page (team section) */
  .hosts__sign{margin-top:clamp(26px,3.4vw,40px);}
  .hosts__sign-nm{display:block;font-family:var(--font-script);font-size:clamp(30px,3.2vw,44px);line-height:1;color:var(--champagne);white-space:nowrap;}
  .hosts__sign-sub{display:block;margin-top:12px;font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:var(--gold-soft);font-weight:600;}
  @media(max-width:900px){
    .hosts__grid{grid-template-columns:1fr;gap:26px;}
    .hosts__collage{height:auto;display:grid;grid-template-columns:1.2fr .8fr;gap:14px;}
    .hosts__collage .plate{position:static;width:100%;}
    .hosts__collage .h1p{grid-row:span 2;}
    .hosts__note{padding:28px 22px;}
  }

  /* ═════ §7 GOOD TO KNOW — FAQ ═════ */
  .faq{padding:var(--section-y) 0;background:var(--ivory);}
  .faq .shead{text-align:center;margin-bottom:44px;}
  .faq .shead::before{margin-left:auto;margin-right:auto;}
  .faq-list{max-width:760px;margin:0 auto;border-top:1px solid var(--line);}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 6px;background:none;border:0;font-family:var(--font-display);font-size:clamp(19px,2.2vw,25px);color:var(--text-primary);text-align:left;font-weight:400;transition:color var(--dur-base) var(--ease-soft);}
  .faq-q:hover,.faq-item.open .faq-q{color:var(--maroon);}
  .faq-q .dia{flex:0 0 auto;width:9px;height:9px;background:var(--grad-gold);transform:rotate(45deg);transition:transform var(--dur-base) var(--ease-soft);}
  .faq-item.open .faq-q .dia{transform:rotate(135deg) scale(1.12);}
  .faq-a{max-height:0;overflow:hidden;opacity:0;transition:max-height var(--dur-slow) var(--ease-soft),opacity var(--dur-base) var(--ease-soft);}
  .faq-item.open .faq-a{opacity:1;}
  .faq-a .in{padding:0 6px 24px;color:var(--text-body);font-size:var(--fs-body);line-height:1.7;max-width:62ch;}

  /* ═════ §8 THE REPLY — CTA ═════ */
  .reply{background:var(--maroon);color:var(--ivory);padding:var(--section-y) 0;position:relative;overflow:hidden;}
  .soon{background:var(--ivory);padding:clamp(48px,7vw,84px) 0;text-align:center;}
  .soon__inner{max-width:640px;}
  .soon h2{font-size:var(--fs-h2);color:var(--maroon);font-weight:300;margin:10px 0 14px;}
  .soon p{color:var(--text-muted,inherit);font-size:var(--fs-small);margin:0 auto 6px;max-width:52ch;}
  .reply-card{position:relative;max-width:760px;margin:0 auto;text-align:center;border:1px solid var(--line-on-dark);border-radius:var(--radius-lg);padding:clamp(40px,6vw,72px) clamp(28px,5vw,64px);}
  .reply-card::before,.reply-card::after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--gold-soft);}
  .reply-card::before{left:16px;top:16px;border-right:0;border-bottom:0;}
  .reply-card::after{right:16px;bottom:16px;border-left:0;border-top:0;}
  .reply-card .eyebrow{color:var(--champagne);}
  .reply-card h2{font-size:clamp(34px,4.6vw,54px);color:var(--gold-soft);margin-top:14px;font-weight:300;background:var(--grad-gild);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  .reply-card h2 .script{display:block;-webkit-text-fill-color:var(--champagne);margin-top:.1em;font-size:clamp(38px,5vw,62px);}
  .reply-card .sub{color:var(--text-on-dark-muted);max-width:44ch;margin:18px auto 0;font-size:var(--fs-small);}
  .reply-card .seal-btn{margin-top:32px;}
  .reply-card .lines{margin-top:26px;display:flex;justify-content:center;gap:26px;flex-wrap:wrap;font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:var(--champagne);}
  .reply-card .lines a:hover{color:var(--ivory);}

  /* ── FOOTER ── */
  .foot{flex-shrink:0;background:var(--plum-black);color:var(--text-on-dark-muted);padding:clamp(56px,7vw,92px) 0 clamp(28px,3vw,40px);position:relative;overflow:hidden;}
  /* a crisp gold rule separates the footer from whatever section sits above it —
     fixes the muddy maroon→plum-black seam on the home view */
  .foot::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad-gold);}
  .foot::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 14% 32%,rgba(213,180,113,.10),transparent 68%);pointer-events:none;}
  .foot .wrap{position:relative;z-index:1;}
  /* brand + two link columns, baseline-aligned */
  .foot-top{display:grid;grid-template-columns:1.6fr .8fr .8fr;gap:36px 44px;align-items:start;}
  .foot-brand{max-width:40ch;}
  .foot-logo{display:block;height:clamp(46px,5vw,66px);width:auto;transition:filter var(--dur-slow) var(--ease-soft);}
  .foot-brand a:hover .foot-logo{filter:brightness(1.12) drop-shadow(0 0 20px rgba(213,180,113,.22));}
  .foot-tag{margin-top:18px;font-size:var(--fs-small);line-height:1.7;color:var(--text-on-dark-muted);max-width:38ch;}
  .foot .fnav{display:flex;flex-direction:column;align-items:flex-start;gap:11px;}
  .foot-col-lbl{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft);font-weight:600;margin-bottom:5px;}
  .foot .fnav a{font-size:var(--fs-small);color:var(--text-on-dark-muted);transition:color var(--dur-base) var(--ease-soft),transform var(--dur-base) var(--ease-soft);}
  .foot .fnav a:hover{color:var(--ivory);}
  /* social row — line-drawn marks so they sit with the gold rules, not with app-store glyphs */
  .foot-social{display:flex;align-items:center;gap:14px;margin-top:6px;}
  .foot-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid rgba(179,140,69,.34);border-radius:50%;color:var(--text-on-dark-muted);transition:color var(--dur-base) var(--ease-soft),border-color var(--dur-base) var(--ease-soft),transform var(--dur-base) var(--ease-soft);}
  .foot-social a:hover{color:var(--ivory);border-color:var(--gold-soft);transform:translateY(-2px);}
  .foot-social svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
  .foot-social svg .dot{fill:currentColor;stroke:none;}
  @media(prefers-reduced-motion:reduce){.foot-social a:hover{transform:none;}}
  /* divider + baseline row */
  .foot-rule{height:1px;background:linear-gradient(90deg,transparent,rgba(179,140,69,.4) 22%,rgba(179,140,69,.4) 78%,transparent);margin:clamp(34px,4vw,52px) 0 clamp(18px,2.2vw,26px);}
  .foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;}
  .foot .fine{margin:0;font-size:11px;letter-spacing:.06em;opacity:.62;}
  .foot-toplink{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);font-weight:600;transition:color var(--dur-base) var(--ease-soft);}
  .foot-toplink:hover{color:var(--ivory);}
  @media(max-width:720px){
    .foot-top{grid-template-columns:1fr 1fr;}
    .foot-brand{grid-column:1 / -1;}
    .foot-bottom{justify-content:center;text-align:center;}
  }

  /* ── WORK / The Album ── */
  /* work listing now opens on the shared .page-hero stripe; keep a gap before the filter bar */
  .work-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 26px;flex-wrap:wrap;margin-top:clamp(30px,4vw,44px);padding:26px 0 8px;}
  .filters{display:flex;flex-wrap:wrap;gap:10px;}
  .chip{background:none;border:1px solid var(--line);border-radius:999px;padding:8px 18px;font-family:var(--font-body);font-size:var(--fs-caption);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);transition:all .2s var(--ease-soft);}
  .chip:hover{border-color:var(--gold);color:var(--maroon);}
  .chip.is-on{background:var(--maroon);border-color:var(--maroon);color:var(--ivory);}
  .work-count{font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:var(--text-muted);font-weight:600;white-space:nowrap;padding-bottom:6px;}
  .work-count b{color:var(--maroon);}
  /* phones page the album rather than scrolling thirteen viewports of it */
  .work-more{display:flex;justify-content:center;padding:0 0 clamp(56px,9vw,80px);}
  .work-more__btn{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 26px;
    font-family:var(--font-body);font-size:var(--fs-caption);letter-spacing:var(--tracking-label);
    text-transform:uppercase;font-weight:700;color:var(--maroon);background:var(--paper);
    border:1.5px solid var(--maroon);border-radius:999px;box-shadow:var(--shadow-sm);
    transition:background var(--dur-base) var(--ease-soft),color var(--dur-base) var(--ease-soft);}
  .work-more__btn:hover{background:var(--maroon);color:var(--ivory);}
  .work-more__btn .n{font-weight:600;opacity:.62;letter-spacing:.08em;}
  .work-more__btn:hover .n{opacity:.8;}
  /* the gutter is spelled out because this element is ALSO the .wrap — a padding shorthand
     here overrides `.wrap{padding:0 var(--gutter)}`, which is how the album's cards came to
     sit flush against both screen edges on a phone */
  .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px);padding:28px var(--gutter) 90px;}
  /* each project reads as a paper card (name, region, what we made) — not a bare tile with hover-only text */
  .work-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--gold-tint);border-radius:6px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft),opacity .4s var(--ease-soft);}
  .work-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-gold);}
  .work-card__img{position:relative;aspect-ratio:4/5;overflow:hidden;}
  .work-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease-soft);}
  .work-card:hover .work-card__img img{transform:scale(1.02);}
  .work-card__word{position:absolute;left:12px;top:12px;background:rgba(61,15,21,.72);color:var(--champagne);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px);}
  .work-card__body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1 0 auto;}
  .work-card__nm{font-family:var(--font-display);font-weight:300;font-size:21px;color:var(--maroon);line-height:1.12;}
  .work-card__place{margin-top:4px;font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:var(--text-muted);}
  .work-card__tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;}
  .work-card__tags span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#8A6A30;border:1px solid var(--line-gold);border-radius:999px;padding:4px 9px;line-height:1.1;}
  .work-card__view{margin-top:auto;padding-top:14px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--maroon);display:inline-flex;align-items:center;gap:7px;}
  .work-card__view .a{transition:transform var(--dur-base) var(--ease-soft);}
  .work-card:hover .work-card__view .a{transform:translateX(2px);}
  @media(max-width:900px){.work-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:600px){.work-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto;}}

  /* ── JOURNAL (blog) grid ── */
  .blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,40px);padding:34px 0 90px;}
  .blog-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--gold-tint);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft);}
  .blog-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-gold);}
  .blog-card__img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--taupe-soft);}
  .blog-card__img.is-ph{display:grid;place-items:center;background:linear-gradient(155deg,var(--champagne-50),var(--ivory-shade));}
  .blog-card__ph{display:flex;flex-direction:column;align-items:center;gap:8px;}
  .blog-card__ph img{width:46px;height:46px;object-fit:contain;opacity:.45;}
  .blog-card__ph em{font-style:normal;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--gold-ink);}
  .blog-card__cat{position:absolute;left:12px;top:12px;background:rgba(61,15,21,.72);color:var(--champagne);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px);}
  .blog-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;}
  .blog-card__meta{font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);font-weight:600;}
  .blog-card__title{font-family:var(--font-display);font-weight:300;font-size:clamp(20px,2vw,25px);color:var(--maroon);line-height:1.18;margin-top:10px;}
  .blog-card__excerpt{margin-top:10px;font-size:14px;line-height:1.65;color:var(--text-body);flex:1;}
  .blog-card__more{margin-top:16px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--maroon);display:inline-flex;align-items:center;gap:7px;}
  .blog-card__more .a{transition:transform var(--dur-base) var(--ease-soft);}
  .blog-card:hover .blog-card__more .a{transform:translateX(2px);}
  @media(max-width:680px){.blog-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto;}}
  /* covers, once the studio supplies them — the placeholder plate above still stands in */
  .blog-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease-soft);}
  .blog-card:hover .blog-card__img img{transform:scale(1.02);}

  /* ── JOURNAL — the lead note (newest, runs wide above the grid) ── */
  .jlead-wrap{padding-top:clamp(30px,4vw,48px);}
  .jlead{display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;gap:0;overflow:hidden;
    background:var(--paper);border:1px solid var(--gold-tint);border-radius:var(--radius-md);box-shadow:var(--shadow-md);
    transition:transform var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft);}
  .jlead:hover{transform:translateY(-2px);box-shadow:var(--shadow-gold);}
  /* the cover is pinned inside its cell rather than sized by it: a stretched grid item with
     an aspect-ratio inflates its own width past the column (and paints over the body text),
     and a plain height:100% img resolves against an indefinite height and runs portrait-tall.
     Absolute fill sidesteps both — the row height comes from the body column alone. */
  .jlead__img{position:relative;overflow:hidden;background:var(--taupe-soft);min-width:0;min-height:clamp(250px,26vw,340px);}
  .jlead__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease-soft);}
  .jlead:hover .jlead__img img{transform:scale(1.02);}
  .jlead__img.is-ph{display:grid;place-items:center;background:linear-gradient(155deg,var(--champagne-50),var(--ivory-shade));}
  .jlead__body{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;justify-content:center;}
  .jlead__k{font-size:var(--fs-meta);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;font-weight:600;color:#8A6A30;}
  .jlead__title{font-family:var(--font-display);font-weight:300;font-size:clamp(25px,3vw,38px);color:var(--maroon);line-height:1.14;margin-top:12px;}
  .jlead__excerpt{margin-top:14px;font-size:var(--fs-small);line-height:1.7;color:var(--text-body);}
  .jlead__meta{margin-top:16px;font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;font-weight:600;color:var(--text-muted);}
  .jlead .blog-card__more{margin-top:20px;}
  .jlead:hover .blog-card__more .a{transform:translateX(2px);}
  @media(max-width:780px){.jlead{grid-template-columns:1fr;max-width:460px;margin:0 auto;}
    .jlead__img{aspect-ratio:16/9;min-height:0;}}
  /* the blog-card covers need the same pinning — same stretched-cell trap */
  .blog-card__img{min-width:0;}
  /* the "more from the studio" rule that separates the lead from the grid */
  .jgrid-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
    margin-top:clamp(44px,6vw,78px);padding-bottom:14px;border-bottom:1px solid var(--line-gold);}
  .jgrid-count{font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;font-weight:600;color:var(--text-muted);}
  /* on a phone the eyebrow's wide tracking broke it over two lines beside the count */
  @media(max-width:560px){.jgrid-head .eyebrow{font-size:11px;letter-spacing:.18em;}.jgrid-count{white-space:nowrap;}}
  .blog-grid{padding-top:clamp(22px,3vw,34px);}

  /* ── POST — the journal reading view ──
     One narrow measure for the prose, with figures allowed to break out wider.
     Type is deliberately larger and looser here than anywhere else on the site. */
  .post-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:41;pointer-events:none;background:rgba(61,15,21,.10);}
  .post-prog i{display:block;height:100%;width:var(--p,0%);background:var(--grad-gold);transition:width 120ms linear;}
  .post-hero__meta{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
    font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;font-weight:600;color:var(--text-on-dark-muted);}
  .post-hero__meta .dot{color:var(--gold-soft);}
  .post{--post-col:min(720px,100%);padding:0 0 clamp(50px,7vw,96px);background:var(--ivory);}
  .post .back{display:inline-block;margin-top:22px;font-size:var(--fs-caption);letter-spacing:.16em;text-transform:uppercase;color:#8A6A30;font-weight:600;}
  .post .back:hover{color:var(--maroon);}
  /* the cover lifts over the maroon stripe, the way the reply card does elsewhere */
  /* the lift stays inside the hero's bottom padding (min 48px) — a deeper overlap swallowed
     the date/read-time row and clipped a three-line headline */
  .post-cover{position:relative;z-index:2;margin:clamp(-40px,-3vw,-20px) auto 0;max-width:min(1000px,100%);aspect-ratio:16/9;
    overflow:hidden;border-radius:var(--radius-md);border:1px solid var(--line-gold);box-shadow:var(--shadow-lg);background:var(--taupe-soft);}
  .post-cover img{width:100%;height:100%;object-fit:cover;display:block;}
  .post-col{max-width:var(--post-col);margin:0 auto;}
  .post-byline{display:flex;align-items:center;gap:13px;margin-top:clamp(30px,4vw,46px);
    padding-bottom:20px;border-bottom:1px solid var(--line);}
  .post-byline__av{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
    background:var(--grad-gold);color:var(--maroon-900);font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:.04em;
    box-shadow:inset 0 1px 2px rgba(255,255,255,.5);}
  .post-byline__txt{display:flex;flex-direction:column;gap:2px;}
  .post-byline__nm{font-size:var(--fs-small);font-weight:600;color:var(--text-primary);}
  .post-byline__r{font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:var(--text-muted);font-weight:600;}
  .post-lede{margin-top:clamp(24px,3vw,34px);font-family:var(--font-display);font-weight:400;
    font-size:clamp(20px,2.2vw,25px);line-height:1.5;color:var(--text-primary);}
  /* a display initial opens the note — dropped on narrow screens where it crowds the measure */
  @media(min-width:720px){
    .post-lede::first-letter{float:left;font-family:var(--font-display);font-weight:500;font-size:66px;line-height:.82;
      padding:5px 12px 0 0;color:var(--maroon);}
  }
  .post-body{margin-top:6px;}
  .post-p{margin-top:22px;font-size:17px;line-height:1.85;color:var(--text-body);}
  .post-p b{color:var(--text-primary);font-weight:600;}
  .post-h{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,2.6vw,31px);color:var(--maroon);
    line-height:1.2;margin-top:clamp(38px,4.5vw,58px);}
  .post-h::before{content:"";display:block;width:34px;height:2px;border-radius:2px;background:var(--grad-gold);margin-bottom:16px;}
  .post-list{margin:22px 0 0;padding:0;list-style:none;}
  .post-list li{position:relative;padding-left:26px;margin-top:12px;font-size:16.5px;line-height:1.75;color:var(--text-body);}
  .post-list li::before{content:"";position:absolute;left:2px;top:.68em;width:7px;height:7px;background:var(--grad-gold);transform:rotate(45deg);}
  .post-list li b{color:var(--text-primary);font-weight:600;}
  /* figures — captions in the meta voice, images open in the shared lightbox */
  .post-fig{margin:clamp(30px,4vw,46px) 0 0;}
  /* the studio shoots mostly square/portrait, so an uncapped figure can run 1200px tall
     and swallow the article — every plate is bounded and cropped to fit instead */
  .post-fig img{width:100%;display:block;max-height:min(660px,74vh);object-fit:cover;
    border-radius:8px;border:1px solid var(--line-gold);box-shadow:var(--shadow-sm);background:var(--taupe-soft);}
  .post-fig img[data-pi]{cursor:zoom-in;transition:box-shadow var(--dur-base) var(--ease-soft);}
  .post-fig img[data-pi]:hover{box-shadow:var(--shadow-gold);}
  .post-cap{margin-top:11px;font-size:var(--fs-caption);line-height:1.6;color:var(--text-muted);text-align:center;}
  .post-fig--wide{width:min(1020px,92vw);margin-left:50%;transform:translateX(-50%);}
  .post-fig--wide img{aspect-ratio:16/9;max-height:none;}
  /* a matched pair — one ratio so the two plates align whatever crops are uploaded */
  .post-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .post-duo img{aspect-ratio:4/5;max-height:none;}
  @media(max-width:600px){.post-duo{grid-template-columns:1fr;}}
  /* pull quote — the studio's voice, centred, in the display face */
  .post-quote{margin:clamp(34px,4.5vw,52px) 0 0;padding:0;text-align:center;position:relative;}
  .post-quote::before{content:"";display:block;width:7px;height:7px;background:var(--grad-gold);transform:rotate(45deg);margin:0 auto 20px;}
  .post-quote .qm{display:none;}
  .post-quote__x{display:block;font-family:var(--font-display);font-style:italic;font-weight:400;
    font-size:clamp(21px,2.5vw,28px);line-height:1.42;color:var(--maroon);}
  .post-quote__by{display:block;margin-top:14px;font-family:var(--font-body);font-style:normal;
    font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;font-weight:600;color:var(--text-muted);}
  /* studio aside — the honest "this is placeholder" flag, styled as an inset card */
  .post-note{margin:clamp(28px,3.5vw,40px) 0 0;padding:18px 20px;background:var(--ivory-shade);
    border-left:2px solid var(--gold);border-radius:0 var(--radius-md) var(--radius-md) 0;}
  .post-note__k{display:block;font-size:var(--fs-meta);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;font-weight:600;color:#8A6A30;}
  .post-note p{margin-top:7px;font-size:var(--fs-small);line-height:1.7;color:var(--text-body);}
  /* film — poster + wax play seal; the player is only built on click */
  .post-video{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:8px;border:1px solid var(--line-gold);
    background:var(--plum-black);box-shadow:var(--shadow-md);}
  .post-video__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;border-radius:0;box-shadow:none;
    transition:transform var(--dur-slow) var(--ease-soft),opacity var(--dur-base) var(--ease-soft);}
  .post-video:hover .post-video__poster{transform:scale(1.015);}
  .post-video__play{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;
    background:linear-gradient(180deg,rgba(42,30,40,.16),rgba(42,30,40,.52));border:0;padding:0;
    transition:opacity var(--dur-base) var(--ease-soft);}
  /* a gold seal with a maroon triangle — unmistakably "play", where the studio badge read as a logo */
  .post-video__seal{width:74px;height:74px;transition:transform var(--dur-base) var(--ease-soft);}
  .post-video__play:hover .post-video__seal{transform:scale(1.03);}
  .post-video__arw{width:0;height:0;margin-left:5px;
    border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:19px solid var(--maroon-900);}
  .post-video__el{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000;object-fit:cover;}
  .post-video.is-live .post-video__poster,.post-video.is-live .post-video__play{opacity:0;pointer-events:none;}
  /* foot — share row + the next note */
  .post-foot{max-width:var(--post-col);margin:clamp(44px,6vw,78px) auto 0;padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--line-gold);
    display:flex;flex-direction:column;gap:26px;}
  .post-share{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
  .post-share__k{font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;font-weight:600;color:var(--text-muted);}
  .post-share a,.post-share button{font-family:var(--font-body);font-size:var(--fs-caption);letter-spacing:.1em;text-transform:uppercase;font-weight:600;
    color:var(--maroon);background:none;border:1px solid var(--line-gold);border-radius:999px;padding:7px 15px;
    transition:background var(--dur-base) var(--ease-soft),color var(--dur-base) var(--ease-soft);}
  .post-share a:hover,.post-share button:hover{background:var(--champagne-50);}
  .post-share button.is-done{background:var(--maroon);color:var(--ivory);border-color:var(--maroon);}
  .post-next{display:flex;align-items:center;gap:15px;padding:16px 18px;background:var(--paper);
    border:1px solid var(--gold-tint);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);
    transition:transform var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft);}
  .post-next:hover{transform:translateY(-2px);box-shadow:var(--shadow-gold);}
  .post-next__chip{flex:0 0 auto;width:52px;height:52px;border-radius:10px;overflow:hidden;border:1px solid var(--line-gold);background:var(--ivory-shade);}
  .post-next__chip img{width:100%;height:100%;object-fit:cover;display:block;}
  .post-next__txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
  .post-next__k{font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;font-weight:600;color:var(--text-muted);}
  .post-next__nm{font-family:var(--font-display);font-size:19px;font-weight:500;color:var(--maroon);line-height:1.25;}
  .post-next__arw{margin-left:auto;color:var(--maroon);transition:transform var(--dur-base) var(--ease-soft);}
  .post-next:hover .post-next__arw{transform:translateX(2px);}
  /* share row then the next note, stacked — side by side squeezed the title to six lines */
  @media(max-width:560px){.post-cover{margin-top:clamp(-28px,-4vw,-16px);border-radius:8px;}
    .post-fig--wide{width:100%;margin-left:0;transform:none;}}

  /* ── SNAP IT — brand-identity teaser (home banner) ── */
  .snapit{padding:clamp(44px,6vw,88px) 0;background:var(--ivory);}
  .snapit__card{position:relative;overflow:hidden;max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(24px,4vw,56px);
    background:var(--plum-black);background-image:linear-gradient(145deg,#33232f,#211722);color:var(--text-on-dark);
    border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:clamp(32px,4.5vw,56px) clamp(28px,5vw,60px);}
  .snapit__card::after{content:"";position:absolute;inset:clamp(12px,1.5vw,18px);pointer-events:none;border:1px solid rgba(213,180,113,.24);border-radius:3px;}
  .snapit__body{position:relative;z-index:1;}
  .snapit__body h2{font-size:var(--fs-h2);font-weight:300;color:var(--ivory);margin-top:12px;}
  .snapit__by{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:.6em;color:var(--gold-soft);}
  .snapit__body p{max-width:52ch;margin-top:14px;color:var(--text-on-dark-muted);font-size:var(--fs-small);line-height:1.7;}
  .snapit__body .text-link{margin-top:20px;}
  .snapit__mark{position:relative;z-index:1;width:clamp(80px,10vw,130px);height:clamp(80px,10vw,130px);flex:0 0 auto;opacity:.9;}
  .snapit__mark img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 22px rgba(0,0,0,.4));}
  @media(max-width:680px){.snapit__card{grid-template-columns:1fr;text-align:center;}.snapit__mark{display:none;}.snapit__body .text-link{justify-content:center;}}

  /* Snap It → recessive sub-brand card, pinned to the CTA section's bottom-right corner.
     It wears the Snap It plum gradient so it reads as a distinct sub-brand beside the
     wedding maroon, but stays smaller and quieter than the reply card so it never pulls
     focus from the primary CTA. On the home CTA we release the section's overflow and
     reserve a bottom lane so the card sits clear of the centred reply card; below the wide
     breakpoint it drops out of the corner into normal flow, centred under the CTA. */
  #view-home .reply{overflow:visible;}

  .snapfab{position:absolute;right:clamp(20px,3.5vw,56px);bottom:clamp(24px,4vw,52px);z-index:4;
    width:clamp(300px,26vw,364px);display:flex;gap:16px;align-items:flex-start;text-align:left;
    background:var(--plum-black);background-image:linear-gradient(150deg,#33232f,#1f151f);
    color:var(--text-on-dark);border:1px solid var(--line-gold);border-radius:var(--radius-md);
    padding:20px 22px;box-shadow:0 22px 46px -18px rgba(18,10,16,.7);
    transition:transform var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft);}
  .snapfab::after{content:"";position:absolute;inset:6px;pointer-events:none;border:1px solid rgba(213,180,113,.2);border-radius:calc(var(--radius-md) - 5px);}
  .snapfab:hover{transform:none;box-shadow:0 28px 54px -18px rgba(18,10,16,.78);}
  .snapfab__mark{flex:0 0 auto;width:40px;height:40px;opacity:.92;position:relative;z-index:1;}
  .snapfab__mark img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.4));}
  .snapfab__body{position:relative;z-index:1;}
  .snapfab__eyebrow{display:block;font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);}
  .snapfab__nm{display:block;font-family:var(--font-display);font-size:20px;font-weight:500;line-height:1.1;color:var(--ivory);margin-top:5px;}
  .snapfab__by{font-style:italic;font-weight:400;font-size:.62em;color:var(--champagne);letter-spacing:.02em;}
  .snapfab__desc{margin-top:8px;font-size:12.5px;line-height:1.6;color:var(--text-on-dark-muted);max-width:34ch;}
  .snapfab__link{display:inline-flex;align-items:center;gap:7px;margin-top:13px;font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);text-decoration:none;transition:color var(--dur-base) var(--ease-soft),gap var(--dur-base) var(--ease-soft);}
  .snapfab__link:hover{color:var(--ivory);}
  .snapfab__link .arw{transition:transform var(--dur-base) var(--ease-soft);}
  .snapfab__link:hover .arw{transform:translateX(2px);}
  /* narrow: no room in the corner beside the centred reply card — fall into normal flow */
  @media(max-width:980px){
    .snapfab{position:static;width:min(440px,calc(100% - 40px));margin:clamp(32px,5vw,48px) auto 0;}
  }
  @media(max-width:560px){
    .snapfab{flex-direction:column;align-items:center;text-align:center;gap:12px;}
    .snapfab__desc{margin-inline:auto;}
    .snapfab__link{justify-content:center;}
  }

  /* Snap It placeholder page — three simple offering blocks */
  .snapit-page{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);padding:34px 0 90px;}
  .snapit-page__item{position:relative;background:var(--paper);border:1px solid var(--gold-tint);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:clamp(24px,3vw,36px);}
  .snapit-page__k{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--gold-ink);}
  .snapit-page__item h3{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,2.2vw,28px);color:var(--maroon);margin-top:10px;}
  .snapit-page__item p{margin-top:10px;font-size:14px;line-height:1.65;color:var(--text-body);}
  @media(max-width:760px){.snapit-page{grid-template-columns:1fr;max-width:440px;margin:0 auto;}}

  /* nav brand-identity teaser (foot of the full-page nav) */
  .nav-snapit{display:block;margin-top:26px;padding-top:22px;border-top:1px solid var(--line-on-dark);}
  .nav-snapit__lbl{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft);font-weight:600;margin-bottom:7px;}
  .nav-snapit__nm{display:block;font-family:var(--font-display);font-size:19px;color:var(--champagne);font-weight:500;transition:color var(--dur-base) var(--ease-soft);}
  .nav-snapit:hover .nav-snapit__nm{color:var(--ivory);}

  /* ── STORY (project detail) — immersive, browsable case study ── */
  /* top space now comes from the .page-hero stripe above; keep a light gap here */
  /* padding-BLOCK, not a shorthand. The Studio view's container is `<div class="wrap story">`,
     so a `padding: … 0 …` here won the cascade over `.wrap{padding:0 var(--gutter)}` and ran
     the founders' plate and the whole "Our story" column edge to edge on a phone. */
  .story{padding-block:clamp(52px,7vh,84px) var(--section-y);}
  .story .back{display:inline-block;font-size:var(--fs-caption);letter-spacing:.16em;text-transform:uppercase;color:#8A6A30;font-weight:600;}
  /* story header sits centred on the maroon stripe — echoes the reference detail page */
  /* the detail hero takes the couple's own accent (same ground as the curtain that opened it) */
  .page-hero.story-hero{background:var(--acc,var(--maroon));background-image:linear-gradient(157deg,var(--acc,var(--maroon)),color-mix(in srgb,var(--acc,var(--maroon)) 40%,#160709));}
  .story-hero .story__word{font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:var(--champagne);font-weight:600;}
  .story-hero h1{font-family:var(--font-script);font-weight:400;font-size:clamp(46px,6vw,84px);line-height:.96;color:var(--ivory);margin-top:12px;}
  .story__ttl{font-family:var(--font-display);font-style:italic;font-size:clamp(20px,2.2vw,27px);color:var(--gold-soft);margin-top:10px;}
  .story__place{font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:var(--text-on-dark-muted);margin-top:14px;}
  .story__galwrap{margin-top:32px;display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(28px,4vw,56px);align-items:start;}
  /* left: a large viewer + thumbnails you can step through and open full-screen */
  .story__viewer{position:sticky;top:96px;}
  .story__stage{display:block;width:100%;padding:0;margin:0;border:1px solid var(--line-gold);background:var(--taupe-soft);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;position:relative;}
  .story__stage img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .35s var(--ease-soft),transform var(--dur-slow) var(--ease-soft);}
  .story__stage:hover img{transform:scale(1.015);}
  .story__stage .zoom{position:absolute;right:14px;bottom:12px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(61,15,21,.6);color:var(--champagne);font-size:16px;opacity:0;transition:opacity var(--dur-base) var(--ease-soft);backdrop-filter:blur(3px);}
  .story__stage:hover .zoom{opacity:1;}
  .story__thumbs{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;}
  .story__thumbs button{width:78px;height:78px;border-radius:6px;overflow:hidden;border:1px solid var(--line-gold);padding:0;background:none;opacity:.55;transition:opacity var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft);}
  .story__thumbs button img{width:100%;height:100%;object-fit:cover;display:block;}
  .story__thumbs button.on{opacity:1;box-shadow:0 0 0 2px var(--gold);}
  /* right: the story, what we made, the couple's words */
  .story__lbl{font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:#8A6A30;font-weight:600;margin-bottom:10px;}
  .story__body{color:var(--text-body);font-size:var(--fs-body);line-height:1.75;}
  .story__made{margin-top:26px;}
  .story__tags{display:flex;flex-wrap:wrap;gap:8px;}
  .story__tags span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--maroon);border:1px solid var(--line-gold);border-radius:999px;padding:6px 12px;line-height:1.1;}
  .story__quote{margin-top:26px;padding:20px 22px;border-left:2px solid var(--gold);background:var(--ivory-shade);border-radius:0 var(--radius-md) var(--radius-md) 0;font-family:var(--font-display);font-size:19px;line-height:1.45;color:var(--text-primary);}
  .story__quote .qm{color:var(--gold);font-size:1.4em;line-height:0;vertical-align:-.3em;margin-right:2px;}
  .story__quote.by::after{content:"— " attr(data-by);display:block;margin-top:12px;font-family:var(--font-body);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);}
  .story__next{margin-top:42px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
  /* symmetric detail footer — next celebration (name + chip) on the left, seal on the right */
  .cstory__foot{margin-top:clamp(40px,6vw,64px);border-top:1px solid var(--line);padding-top:clamp(28px,4vw,44px);
    display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
  .cstory__next{display:flex;align-items:center;gap:15px;text-decoration:none;}
  .cstory__nextChip{flex:0 0 auto;width:52px;height:52px;border-radius:12px;overflow:hidden;border:1px solid var(--line-gold);background:var(--ivory-shade);box-shadow:var(--shadow-sm);}
  .cstory__nextChip img{width:100%;height:100%;object-fit:cover;display:block;}
  /* the arrow follows the name on its line — as its own flex row it dropped underneath */
  .cstory__nextTxt{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:baseline;gap:3px 10px;}
  .cstory__nextK{grid-column:1 / -1;}
  .cstory__nextK{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--text-muted);}
  .cstory__nextName{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--maroon);line-height:1.1;transition:color var(--dur-base) var(--ease-soft);}
  .cstory__nextArw{color:var(--gold);transition:transform var(--dur-base) var(--ease-soft);display:inline-block;}
  .cstory__next:hover .cstory__nextName{color:var(--gold);}
  .cstory__next:hover .cstory__nextArw{transform:translateX(2px);}
  @media(max-width:860px){
    .story__galwrap{grid-template-columns:1fr;gap:26px;}
    .story__viewer{position:static;}
    .story__stage{aspect-ratio:4/3;}
    .cstory__foot{gap:22px;}
  }

  /* ── PROJECT DETAIL — "The Cabinet" layout (ported from the work-showcase concept) ──
     A masonry band of the creatives (clamped, with a faded "show all"), then the
     narrative as two open columns on desktop / a single-open accordion on mobile. */
  .cgalK{display:flex;align-items:baseline;gap:12px;margin:clamp(30px,4vw,44px) 0 16px;}
  .cgalK h3{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,2.4vw,30px);color:var(--maroon);margin:0;}
  .cgalK .n{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--text-muted);}
  .cgalWrap{position:relative;}
  .cgalWrap.clamped{max-height:min(56vh,520px);overflow:hidden;}
  .cgal{columns:3 240px;column-gap:16px;}
  .cgal__item{break-inside:avoid;margin:0 0 16px;position:relative;border-radius:10px;overflow:hidden;
    background:var(--ivory-shade);border:1px solid var(--line-gold);box-shadow:var(--shadow-sm);cursor:zoom-in;
    transition:transform .4s var(--ease-soft),box-shadow .4s var(--ease-soft);}
  .cgal__item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
  .cgal__item img{width:100%;height:auto;display:block;transition:transform .6s var(--ease-soft);}
  .cgal__item:hover img{transform:scale(1.015);}
  .cgal__item:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
  .cgalMore{position:absolute;inset:auto 0 0 0;z-index:3;display:flex;justify-content:center;align-items:flex-end;
    height:150px;padding-bottom:14px;pointer-events:none;
    background:linear-gradient(transparent, color-mix(in srgb,var(--ivory) 88%,transparent) 62%, var(--ivory));}
  .cgalMore button{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);
    padding:12px 24px;border-radius:999px;border:1px solid var(--line-gold);background:var(--paper);
    color:var(--maroon);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;cursor:pointer;
    box-shadow:var(--shadow-md);transition:transform .25s var(--ease-soft),background .3s var(--ease-soft);}
  .cgalMore button:hover{background:var(--ivory);}
  .cgalWrap.open .cgalMore{display:none;}
  .csections{margin-top:clamp(30px,4vw,50px);border-top:1px solid var(--line);padding-top:clamp(24px,4vw,38px);
    display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3.4vw,44px) clamp(48px,5vw,80px);}
  /* The Idea + The Outcome (the Story column left at the 15 Jul review); with no Outcome
     authored, The Idea runs on its own at a readable measure */
  .csections.no-outcome{grid-template-columns:1fr;}
  .csections .csec__body{max-width:64ch;}
  /* WHAT WE MADE — a labelled chip row sitting right under "The work" title, above the gallery */
  .story-made{margin:0 0 clamp(18px,2.4vw,26px);display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;}
  .story-made__k{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--acc,#8A6A30);flex:0 0 auto;}
  .csec__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
    background:none;border:0;padding:0 0 10px;text-align:left;cursor:default;font-family:var(--font-body);}
  .csec__head h4{font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--acc,#8A6A30);margin:0;}
  .csec__toggle{display:none;}
  .csec__body{font-size:15px;line-height:1.78;color:var(--text-body);}
  .csec__body p{margin:0;}
  .csec__made{display:flex;flex-wrap:wrap;gap:8px;}
  .csec__tag{font-size:11.5px;letter-spacing:.05em;font-weight:600;color:var(--maroon);
    padding:7px 13px;border:1px solid var(--line-gold);border-radius:999px;background:var(--paper);}
  /* the couple's words, closing the page */
  .cstory__quote{max-width:640px;margin:clamp(28px,4vw,40px) 0 0;padding:22px 24px;border-left:2px solid var(--gold);
    background:var(--ivory-shade);border-radius:0 var(--radius-md) var(--radius-md) 0;
    font-family:var(--font-display);font-style:italic;font-size:20px;line-height:1.5;color:var(--text-primary);}
  .cstory__quote .qm{color:var(--gold);font-size:1.4em;line-height:0;vertical-align:-.3em;margin-right:2px;}
  .cstory__quote.by::after{content:"— " attr(data-by);display:block;margin-top:12px;font-family:var(--font-body);font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);}
  @media(max-width:860px){
    .cgalWrap.clamped{max-height:none;overflow:visible;}
    .cgalMore{display:none !important;}
    .cgal{columns:auto;display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:4px;}
    .cgal::-webkit-scrollbar{display:none;}
    .cgal__item{flex:0 0 76%;margin:0;scroll-snap-align:center;}
    .cgal__item img{height:50vh;width:100%;object-fit:cover;}
    /* `.csections.no-outcome` (0,2,0) outranks a bare `.csections` here, so any celebration
       with no Outcome authored kept its two-column desktop layout on a phone — The Story and
       The Idea sat side by side in 190px columns instead of stacking as an accordion */
    .csections,.csections.no-outcome{grid-template-columns:1fr;gap:0;}
    .csec{border-bottom:1px solid var(--line);}
    .csec--made{grid-column:auto;border-top:0;padding-top:0;}
    .csec__head{padding:18px 0;cursor:pointer;}
    .csec__toggle{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-gold);color:var(--maroon);font-size:16px;transition:transform .3s var(--ease-soft);}
    .csec__body{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s var(--ease-soft),opacity .3s,padding .3s;}
    .csec.open .csec__body{max-height:560px;opacity:1;padding-bottom:20px;}
    .csec.open .csec__toggle{transform:rotate(45deg);}
  }

  /* shared text layout reused by the About view (project detail uses .story__* instead) */
  .story-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,5vw,64px);align-items:start;margin-top:26px;}
  .story-grid > .plate{aspect-ratio:4/5;position:sticky;top:110px;}
  .story .word{font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:#8A6A30;font-weight:600;}
  .story h1{font-size:var(--fs-h1);color:var(--maroon);margin-top:10px;}
  .story .body{margin-top:20px;color:var(--text-body);font-size:var(--fs-lead);line-height:1.75;max-width:58ch;}
  .story .next{margin-top:32px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
  @media(max-width:860px){.story-grid{grid-template-columns:1fr;gap:28px;}.story-grid > .plate{position:static;}}

  /* ── CONTACT — the inquiry, contained in an RSVP card ── */
  .contact__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,4vw,60px);align-items:start;margin-top:26px;}
  .contact__intro{position:sticky;top:104px;}
  .contact__intro h1{font-size:var(--fs-h1);color:var(--maroon);margin-top:10px;}
  .contact__intro .body{margin-top:18px;color:var(--text-body);font-size:var(--fs-lead);line-height:1.75;max-width:44ch;}
  .contact__lines{margin-top:28px;list-style:none;padding:0;display:flex;flex-direction:column;gap:16px;}
  .contact__lines li{display:flex;flex-direction:column;gap:3px;}
  .contact__lines .k{font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:#8A6A30;font-weight:600;}
  .contact__lines .v,.contact__lines a{font-family:var(--font-display);font-size:19px;color:var(--text-primary);}
  .contact__lines a:hover{color:var(--maroon);}
  .contact__card{position:relative;background:var(--paper);border:1px solid var(--gold-tint);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:clamp(28px,4vw,46px);}
  .contact__card::before,.contact__card::after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--gold-soft);}
  .contact__card::before{left:14px;top:14px;border-right:0;border-bottom:0;}
  .contact__card::after{right:14px;bottom:14px;border-left:0;border-top:0;}
  .contact__card .inq{margin-top:0;max-width:none;}
  @media(max-width:860px){.contact__grid{grid-template-columns:1fr;gap:26px;}.contact__intro{position:static;}}

  /* full-screen lightbox for zooming any creative */
  /* three rows: close on top, the image in all the room left, the counter in its own row
     below, so the counter never lands on the image; arrows get their own columns on a
     desktop and flank the counter on a phone */
  .lightbox{position:fixed;inset:0;z-index:95;background:rgba(30,12,16,.94);display:none;cursor:auto;
    padding:12px 18px 20px;grid-template-columns:56px minmax(0,1fr) 56px;column-gap:14px;grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"top top top" "prev img next" ". count .";align-items:center;justify-items:center;}
  .lightbox.open{display:grid;}
  .lightbox:focus{outline:none;}
  .lightbox img{grid-area:img;max-width:100%;max-height:100%;min-height:0;object-fit:contain;border-radius:4px;box-shadow:var(--shadow-lg);}
  .lightbox button{cursor:pointer;}
  .lightbox__close{grid-area:top;justify-self:end;min-width:44px;min-height:44px;background:none;border:0;color:var(--ivory);font-size:28px;line-height:1;}
  .lightbox__nav{grid-area:prev;background:rgba(255,255,255,.08);border:1px solid var(--line-on-dark);color:var(--ivory);width:46px;height:46px;border-radius:50%;font-size:20px;display:grid;place-items:center;}
  .lightbox__nav.next{grid-area:next;}
  .lightbox__count{grid-area:count;padding-top:14px;color:var(--champagne);font-size:11px;letter-spacing:.2em;text-transform:uppercase;}
  @media (max-width:600px){
    .lightbox{padding:6px 10px 16px;column-gap:8px;grid-template-columns:44px minmax(0,1fr) 44px;grid-template-areas:"top top top" "img img img" "prev count next";}
    .lightbox__nav{width:44px;height:44px;margin-top:14px;}
  }

  /* ── INQUIRY FORM ── */
  .inq{margin-top:34px;display:grid;gap:22px;max-width:620px;}
  .inq .row{display:grid;gap:20px;}
  @media(min-width:620px){.inq .row.two{grid-template-columns:1fr 1fr;}}
  .inq .field{display:flex;flex-direction:column;gap:8px;}
  .inq label{font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;font-weight:600;color:var(--maroon);}
  .inq label .opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--text-muted);}
  .inq input,.inq select,.inq textarea{font-family:var(--font-body);font-size:var(--fs-body);color:var(--text-primary);background:var(--ivory);border:0;border-bottom:1px solid var(--taupe);padding:10px 2px;transition:border-color var(--dur-base) var(--ease-soft);}
  .inq input::placeholder,.inq textarea::placeholder{color:var(--text-muted);}
  .inq input:focus,.inq select:focus,.inq textarea:focus{outline:none;border-color:var(--gold);}
  .inq textarea{resize:vertical;min-height:100px;line-height:1.6;}
  .inq .actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px;}
  .inq .note{font-size:var(--fs-caption);color:var(--text-muted);}
  .inq.sent{opacity:.35;pointer-events:none;filter:saturate(.6);transition:opacity var(--dur-slow) var(--ease-soft);}
  .inq-done{margin-top:26px;padding:26px 28px;border:1px solid var(--line-gold);border-radius:var(--radius-md);background:var(--ivory-shade);opacity:0;transform:translateY(10px);max-height:0;overflow:hidden;transition:opacity var(--dur-slow) var(--ease-soft),transform var(--dur-slow) var(--ease-soft);}
  .inq-done.show{opacity:1;transform:none;max-height:400px;}
  .inq-done .h{font-family:var(--font-display);font-style:italic;font-size:24px;color:var(--maroon);}
  .inq-done p{margin-top:8px;color:var(--text-body);font-size:var(--fs-small);}

  /* ═════ FULL-PAGE NAV ═════ */
  /* each column of the menu scrolls inside the panel on a short window (logo and Close stay
     put), and the panel is fully hidden once it has slid away — its content used to spill out
     under it and hang over the top bar on laptops with little height (26 Oct: "the navbar
     flickers") */
  .fullnav{position:fixed;inset:0;z-index:60;background:var(--maroon);color:var(--ivory);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);overflow:hidden;transform:translateY(-100%);visibility:hidden;transition:transform var(--slide) var(--ease-inout),visibility 0s linear var(--slide);pointer-events:none;}

  .fullnav.open{transform:translateY(0);visibility:visible;transition:transform var(--slide) var(--ease-inout),visibility 0s;pointer-events:auto;}
  .nav-close{position:absolute;top:24px;right:var(--gutter);background:none;border:0;color:var(--champagne);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;font-family:var(--font-body);display:flex;align-items:center;gap:10px;z-index:2;}
  .nav-close .x{font-size:20px;line-height:1;}
  /* studio logo, top-left of the overlay */
  .nav-logo{position:absolute;top:22px;left:var(--gutter);height:38px;z-index:2;}
  .nav-logo img{height:100%;width:auto;object-fit:contain;display:block;}
  /* both columns share one frame: the same top/bottom padding, the same gutters, the same
     eyebrow label and the same hairline between rows — so left and right read as one plate
     split in two, not two unrelated panels (client feedback, 6 Sep) */
  .fullnav > .nav-left,.fullnav > .nav-right{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:clamp(96px,13vh,150px) 8% clamp(40px,6vh,80px);}
  @media(min-width:821px){
    /* "safe": when a column is taller than the window it starts at its top instead of being
       centred off both ends */
    .fullnav > .nav-left,.fullnav > .nav-right{min-height:0;overflow-y:auto;overscroll-behavior:contain;justify-content:safe center;}
  }
  .fullnav .lbl{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft);font-weight:600;margin-bottom:12px;}
  .nav-right{gap:26px;}
  /* your-hosts card in the right rail — one row per founder, each with the studio's own
     portrait; the circle sits a little above centre so the face lands in it */
  .nav-hosts{padding-top:22px;border-top:1px solid rgba(231,211,168,.16);}
  .nav-hosts__list{display:flex;flex-direction:column;gap:14px;}
  .nav-hosts__row{display:flex;align-items:center;gap:14px;}
  .nav-hosts__ph{position:relative;width:74px;height:74px;border-radius:50%;overflow:hidden;border:1px solid var(--line-on-dark);flex:0 0 auto;}
  .nav-hosts__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;display:block;}
  .nav-hosts__nm{font-family:var(--font-display);font-size:19px;color:var(--champagne);font-weight:500;}
  .nav-hosts__r{font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:var(--gold-soft);margin-top:3px;}
  .nav-left{padding-right:6%;}
  .nav-links a{display:flex;align-items:baseline;gap:20px;padding:12px 0;border-bottom:1px solid rgba(231,211,168,.16);font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,4.6vw,3.4rem);color:var(--champagne);transition:color var(--dur-base) var(--ease-soft),padding-left var(--dur-base) var(--ease-soft);}
  /* the page you are on (5 Nov): no number, no underline. Its name turns gold and italic,
     with the site's small gold diamond after it, so the menu says "you are here" quietly */
  .nav-links a{align-items:center;}
  .nav-links a::after{content:"";width:7px;height:7px;flex:0 0 auto;transform:rotate(45deg) scale(0);background:linear-gradient(135deg,var(--champagne),var(--gold-soft));box-shadow:0 0 10px rgba(231,211,168,.45);opacity:0;transition:transform var(--dur-base) var(--ease-soft),opacity var(--dur-base) var(--ease-soft);}
  .nav-links a.is-current{color:var(--gold-soft);font-style:italic;}
  .nav-links a.is-current::after{transform:rotate(45deg) scale(1);opacity:1;}
  .nav-links a:hover{color:var(--gold-soft);padding-left:6px;}
  /* Snap It — deliberately NOT a menu row: a small sub-brand card, unnumbered, its own type */
  .nav-sub{margin-top:28px;max-width:440px;display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid rgba(231,211,168,.24);border-radius:var(--radius-lg);background:rgba(231,211,168,.05);color:var(--ivory);transition:background var(--dur-base) var(--ease-soft),border-color var(--dur-base) var(--ease-soft),transform var(--dur-base) var(--ease-soft);}
  .nav-sub:hover{background:rgba(231,211,168,.1);border-color:var(--gold-soft);transform:translateY(-2px);}
  .nav-sub__mark{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;}
  .nav-sub__mark img{width:100%;height:100%;object-fit:contain;opacity:.9;}
  .nav-sub__txt{display:flex;flex-direction:column;gap:4px;}
  .nav-sub__nm{font-family:var(--font-display);font-weight:400;font-size:1.6rem;line-height:1;color:var(--champagne);}
  .nav-sub__desc{font-size:12px;letter-spacing:.05em;color:var(--gold-soft);opacity:.82;}
  .nav-sub__arw{margin-left:auto;color:var(--gold-soft);font-size:15px;}
  .nav-right{background:var(--maroon-deep);}
  .nav-feat{display:flex;flex-direction:column;}
  .nav-feat a{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid rgba(231,211,168,.16);transition:padding-left var(--dur-base) var(--ease-soft);}
  /* the hosts block draws its own line above itself, so the last celebration drops its
     one — two hairlines were stacking up in the gap between the two */
  .nav-feat a:last-child{border-bottom:0;}
  .nav-feat a:hover{padding-left:6px;}
  .nav-feat .th{width:72px;height:72px;border-radius:8px;overflow:hidden;border:1px solid var(--line-on-dark);flex:0 0 auto;}
  .nav-feat .th img{width:100%;height:100%;object-fit:cover;display:block;}
  .nav-feat .nm{font-family:var(--font-script);font-size:24px;line-height:.95;color:var(--champagne);}
  .nav-feat .mt{font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:var(--gold-soft);margin-top:5px;}
  .nav-contact{padding-top:22px;border-top:1px solid rgba(231,211,168,.16);display:flex;flex-wrap:wrap;gap:8px 28px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--champagne);}
  .nav-contact a:hover{color:var(--ivory);}
  @media(max-width:820px){
    .fullnav{grid-template-columns:1fr;grid-template-rows:1fr auto;overflow-y:auto;}
    .fullnav > .nav-left{align-self:center;padding:104px 9% 22px;}
    .nav-links a{font-size:clamp(2.1rem,9vw,3rem);padding:14px 0;}
    .fullnav > .nav-right{display:flex;align-self:end;justify-content:flex-end;gap:0;background:rgba(0,0,0,.16);border-top:1px solid var(--line-on-dark);padding:26px 9% 34px;}
    .nav-right .lbl{margin-bottom:14px;}
    .nav-feat a{padding:8px 0;}
    .nav-feat .th{width:54px;height:54px;}
    .nav-feat .nm{font-size:22px;}
    .nav-hosts{display:none;}
    .nav-contact{margin-top:22px;padding-top:20px;font-size:11px;}
  }

  /* ═════ PAGE TRANSITION — two-colour wipe (route changes only; trimmed) ═════ */
  /* single-panel curtain — one colour, chosen for the destination. Slides up from below to
     cover, holds a beat while the view swaps, then continues up and off. */
  .drape{position:fixed;left:0;top:0;width:100%;height:100dvh;z-index:80;pointer-events:none;transform:translateY(100%);will-change:transform;
    display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;
    --drape-acc:var(--maroon);background:var(--maroon);background-image:var(--hero-maroon);}
  /* on a celebration transition, the ground takes the couple's accent */
  .drape.is-project{background:var(--drape-acc);background-image:linear-gradient(157deg,var(--drape-acc),color-mix(in srgb,var(--drape-acc) 40%,#160709));}
  /* faint watermark badge sitting behind the monogram */
  .drape__badge{position:absolute;left:50%;top:50%;width:min(58vw,420px);height:min(58vw,420px);transform:translate(-50%,-50%);
    background:url('assets/logo/mubaarak-badge-gold.svg') center/contain no-repeat;opacity:.14;pointer-events:none;}
  .drape.is-project .drape__badge{opacity:.05;}
  .drape__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;color:var(--ivory);
    opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-soft) .12s,transform .5s var(--ease-soft) .12s;}
  .drape.d-cover .drape__inner{opacity:1;transform:none;}
  /* the couple monogram only shows on a celebration transition */
  .drape:not(.is-project) .drape__inner{display:none;}
  .drape__motif{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold);margin-bottom:16px;}
  .drape__motif .ln{height:1px;width:52px;background:linear-gradient(90deg,transparent,var(--gold));}
  .drape__motif .ln.r{background:linear-gradient(90deg,var(--gold),transparent);}
  .drape__motif .dia{width:6px;height:6px;background:var(--grad-gold);transform:rotate(45deg);flex:0 0 auto;}
  .drape__ini{font-family:var(--font-script);font-weight:400;font-size:clamp(66px,13.5vw,140px);line-height:.9;color:color-mix(in srgb,var(--ivory) 80%,transparent);}
  .drape__word{margin-top:16px;font-size:var(--fs-meta);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:var(--champagne);opacity:.9;}
  .drape.d-cover{transform:translateY(0);transition:transform .62s var(--ease-inout);}
  .drape.d-reveal{transform:translateY(-100%);transition:transform .72s var(--ease-inout);}
  .drape.d-park{transition:none;transform:translateY(100%);}

  /* ═════ GOLDEN WORD-CURSOR — over a labelled tile the pointer becomes the gold action button ═════ */
  .wcursor{position:fixed;left:0;top:0;z-index:92;pointer-events:none;will-change:transform;}
  .wcursor__btn{display:flex;align-items:center;gap:9px;transform:translate(-50%,-50%) scale(.4);opacity:0;transform-origin:center;
    padding:11px 18px;border-radius:999px;background:var(--grad-gold);color:var(--maroon-900);
    font-family:var(--font-body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;white-space:nowrap;
    box-shadow:0 12px 28px -10px rgba(61,15,21,.55),inset 0 1px 1px rgba(255,255,255,.55),inset 0 -3px 6px rgba(120,88,36,.4);
    transition:opacity .3s var(--ease-soft),transform .38s var(--ease-soft);}
  .wcursor.is-on .wcursor__btn{opacity:1;transform:translate(-50%,-50%) scale(1);}
  .wcursor.is-on.is-press .wcursor__btn{transform:translate(-50%,-50%) scale(.9);}
  .wcursor__arw{font-size:13px;line-height:1;transform:translateY(-1px);}
  /* the native cursor steps aside over a labelled target (only after JS mounts the button);
     inactive reel neighbours keep a plain pointer — View chip is for the current spread only */
  @media(pointer:fine){
    .wcursor-on [data-word],.wcursor-on [data-word] *{cursor:none;}
    .wcursor-on .spread:not(.is-active) [data-word],
    .wcursor-on .spread:not(.is-active) [data-word] *{cursor:pointer;}
  }

  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1 !important;transform:none !important;}
    .sig-line.active .nm,.sig-line.active.signing .nm{transform:none;}
    .sig-line.active .ink,.sig-line.active.signing .ink{clip-path:none;-webkit-clip-path:none;filter:none;opacity:1;}
    .sig-line.active .rule,.sig-line.active.signing .rule{transform:scaleX(1);}
    .sig-line.active .sub,.sig-line.active.signing .sub{opacity:1;transform:none;}
    .celeb{height:auto;}
    .celeb__sticky{position:static;height:auto;}
    .gb{height:auto;}
    .gb__sticky{position:static;height:auto;padding:60px 0;}
  }

  /* ════════════════════════════════════════════════════════════════
     MOBILE HOMEPAGE — "the invitation in your hands"
     Desktop pins and scrubs; the phone snaps and swipes. One rule:
     vertical scroll moves between sections, horizontal swipe browses
     within one (reel · menu · guestbook). See
     plans/concept-Dv3-mobile-homepage-plan.md.
     ════════════════════════════════════════════════════════════════ */
  /* elements that only exist for the mobile build stay hidden until the breakpoint */
  .reel__count{display:none;}
  .rcard__place{display:none;}
  .gb__mtrack{display:none;}
  .gb__dots{display:none;}
  .gb__thumb{display:none;}
  .reply-wa{display:none;}

  @media(max-width:900px){
    /* ── §0 envelope — the seal is broken by the visitor's own thumb (JS on touch) ── */
    .env__hint{display:block;margin-top:2px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
      font-weight:600;color:var(--gold-soft);animation:envHint 2.2s ease-in-out infinite;transition:opacity .4s var(--ease-soft);}
    .env__hint.gone{opacity:0;}
    @keyframes envHint{0%,100%{opacity:.55;}50%{opacity:1;}}

    /* ── §1a hero — one complete object: panel fills the small viewport, marquee is its hem ── */
    .he-bespoke{display:none;}
    /* 58svh (2 Nov). At 80 the first screen was all words: the reel's heading filled what the
       panel left and no photograph cleared the fold. At 58 the top of the first celebration
       shows under the heading, so the work itself says there is more below — which is why
       the scroll cue is gone. min-height, so a short phone still grows the panel to fit its
       own content; the 72px floor keeps the lede clear of the marquee hem. */
    .celeb__panel{min-height:58svh;justify-content:center;padding:clamp(64px,9vh,92px) var(--gutter) 72px;}
    /* .2em tracking ran the 39-character eyebrow just past 350px, wrapping it to two lines
       with an orphaned "DESIGN". At .14em it holds one line to 360px, and balances if not. */
    .celeb__panel .eyebrow{font-size:11px;letter-spacing:.14em;text-wrap:balance;}
    .celeb__panel h1{font-size:clamp(31px,8.4vw,42px);}
    .celeb__panel .lede{font-size:var(--fs-body);max-width:38ch;}

    /* ── §1b reel — the album, one page at a time ──
       The desktop spread is a matted photograph with its story set beside it, the
       neighbours waiting dimmed at the edges. The phone keeps every part of that and only
       turns the spread upright: the photograph large, its caption set beneath it, the
       neighbours peeking in at the edges at the same dim. Since the 6 Sep filmstrip the
       desktop rules are written as `.reel__track .spread`, which outranked the old phone
       rules — each celebration had shrunk to a 160px thumbnail in the left half of a
       desktop grid with its story hidden. Everything here is scoped to match. */
    .reel{background:var(--ivory-shade);}
    /* position:relative is load-bearing. The desktop rule drops .reel__pin to `static`
       here, which stops it being a containing block — so .reel__bg (absolute, inset:-8%,
       scale(1.06)) resolved against .reel instead and sailed straight through the pin's
       own overflow:hidden, pushing the document 45px wide. Earlier audits saw the 45px
       and blamed the local review widget; it was this.
       The bottom pad is not decoration either: the CTA is the last thing in the pin, and
       with a 0 tail the "View All Work" button's own edge was the section's edge. */
    /* the top pad and the head's tail are trimmed so the first photograph reaches the fold */
    .reel__pin{position:relative;padding:32px 0 clamp(40px,8vw,60px);}
    .reel__head{position:static;margin:0 var(--gutter) 16px;text-align:center;}
    .reel__head::before{margin:0 auto 14px;}
    /* the dial's caption carries the count now */
    .reel__count{display:none;margin-top:14px;font-family:var(--font-display);font-weight:500;
      font-size:17px;letter-spacing:.14em;color:var(--gold);font-variant-numeric:tabular-nums;}
    /* the track pads by half the leftover width, so the first and last pages centre too */
    .reel__track{display:flex;flex-direction:row;align-items:flex-start;gap:14px;padding:6px calc((100vw - min(76vw,340px)) / 2) 4px;
      transform:none !important;transition:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
      scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
    .reel__track::-webkit-scrollbar{display:none;}
    .reel__track .spread{flex:0 0 min(76vw,340px);width:min(76vw,340px);display:flex;flex-direction:column;gap:0;
      scroll-snap-align:center;scroll-snap-stop:always;cursor:pointer;
      opacity:.46;transform:scale(.93);transform-origin:50% 0;filter:none;
      transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft);}
    .reel__track .spread.is-active{opacity:1;transform:none;cursor:auto;}
    /* the desktop's endless-loop copies stay out of the phone strip. They only exist if the
       page first opened wider than a phone (a desktop window narrowed, a big phone turned
       sideways and back), and the display:flex above outranked the rule that hides them — so a
       caption-less copy of a celebration sat beside the real one. */
    .reel__track .spread.reel__clone{display:none;}
    .reel__track .spread__card{order:0;width:100%;}
    .reel__track .rcard{aspect-ratio:4/5;}
    .reel__track .spread.is-active .rcard{box-shadow:0 26px 50px -26px rgba(42,30,40,.55);}
    /* the photograph stays clean — its caption is set beneath it, as on desktop */
    .reel__track .rcard__cap{display:none;}
    /* the captions live in one still panel under the indicators (.reel__cap, built by the
       script), so only the photographs slide; the copies inside the spreads are desktop's */
    .reel__track .spread__copy{display:none;}
    .reel__cap{display:grid;width:min(76vw,340px);margin:0 auto;padding-top:60px;}
    .reel__cap .spread__copy{grid-area:1/1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 4px;
      opacity:0;visibility:hidden;transition:opacity .3s var(--ease-soft),visibility 0s linear .3s;}
    .reel__cap .spread__copy.is-on{opacity:1;visibility:visible;transition:opacity .35s var(--ease-soft) .12s,visibility 0s;}
    .spread__copy .eyebrow{font-size:11px;letter-spacing:.2em;}
    .spread__copy h3{font-size:clamp(26px,7.4vw,32px);margin-top:8px;}
    /* place and date sit with the names; the story follows */
    .spread__meta{order:1;flex-wrap:nowrap;justify-content:center;gap:4px 18px;margin-top:10px;font-size:11px;letter-spacing:clamp(.8px,calc((100vw - 360px) * .03 + .8px),1.76px);color:var(--text-muted);white-space:nowrap;}
    .spread__meta span + span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 14px 0 -8px;vertical-align:.25em;background:var(--gold);transform:rotate(45deg);}
    .spread__brief{order:2;margin:12px auto 0;max-width:34ch;font-size:14.5px;line-height:1.62;
      display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
    .spread__tags{display:none;}
    .spread__more{order:3;display:inline-flex;margin-top:14px;}
    /* the controls sit right under the photograph (2 Nov), moved into the stage by the script.
       After the caption they shifted with every story's length and ran 27px wider than a 393px
       phone. Now one quiet line: bare gold arrows and the diamonds, set in a lane the caption
       leaves open — photo bottom is the 6px track pad plus the 4:5 card's height. Centred at
       its own width, so a swipe either side of it still turns the strip. */
    .reel__stage{position:relative;}
    .reel__nav{position:absolute;z-index:2;left:50%;top:calc(6px + min(76vw,340px) * 1.25 + 8px);transform:translateX(-50%);
      width:max-content;margin:0;gap:0;}
    .reel__arw .ln{display:none;}
    .reel__nav .reel__arw .arw-icon{width:44px;height:44px;background:transparent;border-color:transparent;box-shadow:none;}
    .reel__nav .reel__arw .arw-icon::before{width:14px;height:9px;}
    .reel__nav .reel__arw:hover .arw-icon{box-shadow:none;}
    /* 44px tall touch areas round each diamond, 32px wide so the row fits a 360px phone */
    .reel__dial .dial__stop{width:32px;height:44px;}
    .reel__dial .dial__seg{width:10px;}
    .reel__dial .dial__seg.lead,.reel__dial .dial__seg.tail{display:none;}
    .celeb__cta{position:static;display:flex;justify-content:center;margin-top:clamp(22px,6vw,30px);padding:0 var(--gutter);background:transparent;}

    /* ── section rhythm ──
       The mobile plan's promise was a scroll "roughly half" the stacked fallback's. The
       carousels did the structural work; this is the spacing that was still running desktop
       values on a phone — six sections' worth of 64px bands and 34px section-head gaps. */
    :root{--section-y:56px;}
    .papers .shead{margin-bottom:26px;}
    .menu__head{margin-bottom:22px;}
    .press-page{padding:24px 20px 26px;}

    /* ── §3 menu — the paper card turns, now by swipe too (buttons stay for a11y) ── */
    .menu__pager{display:block;max-width:520px;margin-inline:auto;}
    .menu__ptrack{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
      scroll-padding-inline:0;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
    .menu__ptrack::-webkit-scrollbar{display:none;}
    /* The track is as tall as its tallest page, so the SECTION never reflows — but centring
       the card in that slack moved the card itself: the course kicker started 27px down on
       one offering and 71px down on the next, so paging looked like the page jumping. The
       card now fills its panel and the content hangs from the top, which pins the kicker,
       the title and the photograph to the same y on all six pages. */
    .menu__ppanel{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;}
    .menu__ppanel > .menu__pcard{flex:1 1 auto;display:flex;flex-direction:column;}
    /* the photograph is tipped into the page inside its gold rule, the way the desktop plate
       hangs framed beside the list; a portrait print, held to half the screen so a short
       phone still sees the name and the words with it */
    .menu__pcard{padding:14px 14px 22px;}
    .menu__pcard::after{inset:7px;}
    .m-entry__img{aspect-ratio:4/5;max-height:min(50svh,430px);width:100%;border-radius:2px;box-shadow:none;}
    .m-entry__img::after{content:"";position:absolute;inset:12px;pointer-events:none;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:2px;}
    .m-entry__no{position:absolute;left:12px;bottom:12px;z-index:2;padding:6px 11px;border-radius:999px;
      background:rgba(61,15,21,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
      font-family:var(--font-display);font-size:13px;letter-spacing:.12em;color:var(--champagne);font-variant-numeric:tabular-nums;}
    .menu__course-h{margin:20px 6px 0;}
    .menu__course-h .menu__course-from{margin:0 0 6px;}
    .m-entry__desc{margin:10px 8px 0;text-align:center;font-size:14.5px;line-height:1.62;}
    /* the page is turned with the reel's own controls: paper-disc arrows either side of the diamonds */
    .menu__nav{justify-content:center;gap:14px;margin-top:18px;}
    .menu__nav .reel__arw{padding:0;}
    .menu__nav .reel__arw:disabled{opacity:.32;cursor:default;}
    .menu__pagedots button::before{border-radius:0;width:7px;height:7px;transform:rotate(45deg);background:transparent;border:1px solid var(--gold);}
    .menu__pagedots button.on::before{background:var(--grad-gold);border-color:transparent;transform:rotate(45deg) scale(1.3);}

    /* ── §4 guestbook — unpinned; leaf through pages, the ink signs as each one centres ── */
    .gb{height:auto;}
    .gb__sticky{position:static;height:auto;display:block;overflow:visible;}
    .gb__top{padding:clamp(58px,11vw,80px) var(--gutter) 0;}
    /* absolutely positioned against the section head, which is centred type on a phone —
       "01 / 04" landed on top of "In their own words." The dots below the pages already
       say which page you are on, and they say it where your thumb is. */
    .gb__top .count{display:none;}
    .gb__stage{display:none;}
    /* The gap is 30px, not 16px, on purpose. The reel and the menu can afford a peeking
       neighbour because their pages have edges — a matted photo, a paper card. A guestbook
       page is bare type on maroon, so the next quote peeking in read as *clipped text*,
       not as another page: the one carousel where the peek cost credibility instead of
       buying an affordance. A gap wide enough to clear the viewport keeps every page
       whole, and the gold page-edge rule + dots below carry the "there's more" job. */
    /* overflow-y:hidden is load-bearing (2 Nov). A sideways strip with overflow-x:auto is
       quietly a scroll box both ways, and the waiting signatures (translateY(16px), sub 6px
       more) hung 22px past its foot. A thumb or wheel landing on the notes scrolled those
       22px first and the page stuck there until the gesture ended. The reel says the same. */
    .gb__mtrack{display:flex;gap:calc(var(--gutter) + 12px);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
      scroll-padding-inline:var(--gutter);padding:clamp(26px,6vw,40px) var(--gutter) 0;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;}
    .gb__mtrack::-webkit-scrollbar{display:none;}
    .gb__page{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;justify-content:flex-start;}
    /* the letter. The desktop guestbook pairs each note with that couple's own stationery on
       the stage beside it; here the same photograph is tucked into the page and the opening
       lines run around it, the way a print sits clipped to a letter. (It was a 58px circle
       on 6 Aug — too small to show what the couple was thanking the studio for.) */
    .gb__letter{position:relative;overflow:hidden;max-height:none;transition:max-height .7s var(--ease-soft);}
    .gb__page.is-folded:not(.is-open) .gb__letter{max-height:19em;
      -webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent);}
    .gb__thumb{position:relative;float:left;display:block;width:34%;max-width:130px;aspect-ratio:4/5;margin:4px 18px 10px 0;
      border:1px solid rgba(213,180,113,.55);box-shadow:0 18px 30px -18px rgba(0,0,0,.8);overflow:hidden;}
    .gb__thumb::after{content:"";position:absolute;inset:7px;border:1px solid rgba(213,180,113,.5);pointer-events:none;}
    .gb__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
    .gb__more{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:4px;padding:0;background:none;border:0;
      font-family:var(--font-body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--gold-soft);}
    .gb__more[hidden]{display:none;}
    .gb__more .arw{transition:transform var(--dur-base) var(--ease-soft);}
    .gb__page.is-open .gb__more .arw{transform:rotate(180deg);}
    /* diamonds between the reel's arrow discs, set dark for the maroon ground */
    .gb__dots{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;}
    .gb__diamonds{display:flex;}
    .gb__diamonds button{background:none;border:0;padding:0 6px;min-height:44px;display:inline-flex;align-items:center;}
    .gb__diamonds button::before{content:"";width:7px;height:7px;transform:rotate(45deg);border:1px solid rgba(213,180,113,.6);background:transparent;
      transition:background var(--dur-base) var(--ease-soft),transform var(--dur-base) var(--ease-soft);}
    .gb__diamonds button.on::before{background:var(--gold-soft);border-color:transparent;transform:rotate(45deg) scale(1.3);}
    .gb__arw .arw-icon{width:44px;height:44px;background:transparent;border-color:rgba(213,180,113,.5);box-shadow:none;}
    .gb__arw .arw-icon::before{background:var(--gold-soft);}
    .gb__arw:disabled{opacity:.3;cursor:default;}
    .gb__page .gb__quote{font-family:var(--font-display);font-weight:400;font-size:15px;line-height:1.6;
      color:var(--ivory);max-width:100%;min-height:0;}
    .gb__page .gb__quote .gb__para + .gb__para{margin-top:.8em;}
    .gb__page .gb__quote .qm{color:var(--gold-soft);font-size:1.4em;line-height:0;vertical-align:-.32em;margin-right:2px;}
    .gb__page .sig-line.active{margin-top:22px;opacity:0;transform:translateY(16px);}
    .gb__page .sig-line.active.present{opacity:1;transform:none;transition:opacity .6s var(--ease-soft),transform .6s var(--ease-soft);}
    .gb__page .sig-line.active .nm{white-space:normal;}
    .gb__page .sig-line.active .ink{font-size:clamp(34px,9vw,48px);display:inline-block;
      clip-path:inset(-.35em calc(100% + .45em) -.5em -.45em);-webkit-clip-path:inset(-.35em calc(100% + .45em) -.5em -.45em);filter:blur(.5px);opacity:.65;
      transition:clip-path 1.4s cubic-bezier(.48,.04,.22,1),-webkit-clip-path 1.4s cubic-bezier(.48,.04,.22,1),filter 1s var(--ease-soft),opacity .85s var(--ease-soft);}
    .gb__page .sig-line.active.signing .ink{clip-path:inset(-.35em -.45em -.5em -.45em);-webkit-clip-path:inset(-.35em -.45em -.5em -.45em);filter:blur(0);opacity:1;}
    .gb__page .sig-line.active .rule{display:block;height:1px;margin-top:12px;background:linear-gradient(90deg,rgba(213,180,113,.85),transparent 90%);transform:scaleX(0);transform-origin:left center;transition:transform 1.1s cubic-bezier(.48,.04,.22,1) .45s;}
    .gb__page .sig-line.active.signing .rule{transform:scaleX(1);}
    .gb__page .sig-line.active .sub{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease-soft) 1.15s,transform .5s var(--ease-soft) 1.15s;}
    .gb__page .sig-line.active.signing .sub{opacity:1;transform:none;}
    .gb__foot{display:flex;padding:0 var(--gutter) 30px;justify-content:center;}
    .gb__open{display:none;}

    /* ── §6 hosts — the desktop collage, squared up; the note card layered over it ──
       The 1 Aug plan cut this to one photo because the other two were stand-in crops of the
       same picture. Since 20 Sep they are each founder's own portrait, so the phone shows
       all three again: the two of them together, and each of them alone, as a triptych —
       the joint portrait spanning two rows, a solo portrait in each. Every photograph is
       2:3, so a 2:1 column split lines their edges up exactly. */
    /* held to a phone-and-a-half so a tablet in portrait doesn't blow the prints up to 800px */
    .hosts__grid{grid-template-columns:1fr;gap:0;max-width:600px;}
    .hosts__collage{display:grid;grid-template-columns:2fr 1fr;gap:10px;height:auto;}
    .hosts__collage .plate{position:relative;inset:auto;z-index:1;width:auto;opacity:1;box-shadow:var(--shadow-md);}
    .hosts__collage .h1p{grid-column:1;grid-row:1 / span 2;z-index:1;aspect-ratio:auto;box-shadow:var(--shadow-lg);}
    .hosts__collage .h3p{grid-column:2;grid-row:1;aspect-ratio:2/3;}
    .hosts__collage .h2p{grid-column:2;grid-row:2;aspect-ratio:2/3;}
    /* the card is laid over the foot of all three prints, edge to edge with them — inset, it
       left a photo corner poking out beside it */
    .hosts__note{position:relative;z-index:2;margin:-36px 0 0;padding:28px 24px;}
    .hosts .lede{font-size:15.5px;line-height:1.72;margin-top:0;}
    .hosts .shead.centered{margin-bottom:clamp(20px,4vw,30px);}
    .hosts__sign{margin-top:22px;}

    /* ── §8 reply — WhatsApp is the reply card on a phone ── */
    .reply-card .reply-wa{display:flex;width:fit-content;margin:20px auto 0;}

    /* ── Snap It: recessive by rank, not by disguise ──
       The 1 Aug pass stripped this to one hairline rule so it could not compete with the
       reply seal. It stopped competing and stopped communicating with it: shorn of its
       plate, eyebrow and description, "Snap It by Mubaarak · Explore Snap It" read as a
       stray footer link, and nothing on the phone said what the sub-brand IS (client,
       5 Aug). It goes back to being the card it is on desktop — same plum plate, same gold
       inner rule, same four lines — just smaller than the reply card and set below it, so
       the ranking is carried by size and order instead of by amputation. */
    .snapfab{margin-top:clamp(32px,6vw,44px);padding:20px 20px;gap:13px;}
    .snapfab__mark{width:34px;height:34px;}
    .snapfab__nm{font-size:19px;}
    .snapfab__by{font-size:12px;}   /* the .62em inherit landed under the 11px type floor */
    .snapfab__desc{font-size:13px;max-width:30ch;}
  }

  /* the publication leads on the phone. On desktop the name sits at the end of a wide row
     where the eye lands on it anyway; stacked, it came last and smallest — under the
     headline, in grey — when "Vogue" and "ELLE" are the whole reason the section exists.
     A gold diamond marks each masthead, and a small arrow says the row opens the feature. */
  @media(max-width:720px){
    .award{position:relative;display:flex;flex-direction:column;gap:7px;padding:18px 30px 18px 2px;}
    .award .by{order:-1;display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.22em;font-weight:600;color:var(--gold-ink);}
    .award .by::before{content:"";width:5px;height:5px;flex:0 0 auto;background:var(--grad-gold);transform:rotate(45deg);}
    .award .ttl{font-size:19px;line-height:1.3;}
    a.award::after{content:"↗";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--gold);}
  }

  /* full-page nav on a phone: single column, hosts + reach kept, the recent-work tiles cut.
     It also has to FIT: at 390×844 the overlay ran 940px, so the phone number and Instagram —
     the two things someone opens the menu to find — sat below the fold of the primary nav,
     needing a scroll inside a full-screen overlay to reach. Everything below trims height. */
  @media(max-width:820px){
    .nav-right{flex-direction:column;align-items:flex-start;}
    .nav-right > .lbl{display:none;}
    .nav-feat{display:none;}
    .nav-hosts{display:block;margin-top:0;padding-top:18px;border-top:0;}
    .nav-hosts .lbl{margin-bottom:10px;}
    /* the two founders side by side, so the second one costs no extra height */
    .nav-hosts__list{flex-direction:row;flex-wrap:wrap;gap:10px 22px;}
    .nav-hosts__ph{width:58px;height:58px;}
    .nav-hosts__nm{font-size:17px;}
    .nav-left{padding:92px 9% 16px;}
    .nav-links a{padding:11px 0;}
    .nav-sub{margin-top:18px;padding:12px 16px;}
    .nav-right{padding:20px 9% 24px;}
    /* the reach links as a wrapped row, not a column — three 44px rows became one */
    .nav-contact{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 14px;margin-top:16px;padding-top:16px;font-size:11px;letter-spacing:.1em;}
  }
  /* short phones give up the hosts row rather than the contact links. The line used to be
     730px, meant for an SE (667 tall), but Safari's own bars leave a 6.1" iPhone only about
     660px of page, so every iPhone lost the founders (4 Nov). 600px still catches an SE in
     Safari (about 550px) and a phone on its side. */
  @media(max-width:820px) and (max-height:600px){
    .nav-hosts{display:none;}
    .nav-left{padding-top:72px;}
    .nav-links a{font-size:clamp(1.8rem,7.6vw,2.4rem);padding:7px 0;}
    .nav-sub{margin-top:12px;padding:10px 16px;}
    .nav-right{padding:16px 9% 20px;}
  }

  /* ═════ THE INNER VIEWS ON A PHONE ═════ */
  /* The home scroll got its own body (above); these are the pages you land on from it.
     Same grammar: vertical scroll moves between sections, horizontal swipe browses within one. */
  @media(max-width:900px){
    /* ── WORK — the filter set is browsed by thumb, not stacked into a wall ──
       Nine chips wrapping one-per-line put 334px of chrome between the hero and the first
       celebration. As a single full-bleed swipe rail it costs one row, and it's the same
       gesture the reel, menu and guestbook already taught. */
    /* flex-wrap:nowrap matters here: the desktop rule wraps, and a *column* container that
       wraps sizes its items to content on the cross axis instead of stretching them — which
       lets the rail balloon to its full 1860px run and clip rather than scroll */
    .work-bar{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:14px;padding:22px 0 4px;}
    .work-count{order:-1;padding-bottom:0;}
    .filters{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
      scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;
      /* min-width:0 is load-bearing — as a flex item it defaults to min-width:auto, which
         sizes to the full chip run (~1860px) so it clips instead of scrolling and the last
         six filters become unreachable */
      min-width:0;
      /* break the .wrap gutter so the rail bleeds to both edges — the cut-off chip is the affordance */
      margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
      scroll-padding-inline:var(--gutter);}
    .filters::-webkit-scrollbar{display:none;}
    .chip{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;
      min-height:44px;padding:0 18px;display:inline-flex;align-items:center;}
    /* the grid's own 90px tail sat between the last card and the "show more" control.
       Spell the gutter out again — this element is the .wrap, so the shorthand replaces it */
    .work-grid{padding:24px var(--gutter) 26px;}

    /* ── STORY — the page a phone lands on from the album ──
       It used to open on 354px of flat colour: on the single most important page of a
       portfolio site, on the one device with nothing beside it to compensate, the visitor
       met a swatch before a photograph. The couple's own cover now carries the band, with
       the accent scrim holding the script headline legible over it. */
    .story-hero{overflow:hidden;}
    .story-hero__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;}
    .story-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
      background:linear-gradient(178deg,
        color-mix(in srgb,var(--acc,var(--maroon)) 62%,transparent) 0%,
        color-mix(in srgb,var(--acc,var(--maroon)) 84%,transparent) 58%,
        color-mix(in srgb,var(--acc,var(--maroon)) 93%,transparent) 100%);}
    .story-hero .page-hero__inner{position:relative;z-index:1;}
    .story-hero h1,.story-hero .story__ttl{text-shadow:0 2px 14px rgba(24,10,14,.5);}

    /* "What we made" — three pills stacked one per line built a 130px wall between the back
       link and the first photograph. Same defect the Work filters had; same fix, a full-bleed
       swipe rail, which is also the gesture the reel, menu and guestbook already taught. */
    .story-made{display:block;margin-bottom:clamp(16px,3vw,22px);}
    .story-made__k{display:block;margin-bottom:10px;}
    .csec__made{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
      scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;min-width:0;
      margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);}
    .csec__made::-webkit-scrollbar{display:none;}
    .csec__tag{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;
      min-height:44px;padding:0 15px;display:inline-flex;align-items:center;}

    /* ── CONTACT — the form is the conversion path; every field is thumb-sized ── */
    .inq input,.inq select,.inq textarea{min-height:44px;}
    .inq textarea{min-height:104px;}
    .contact__intro a{min-height:44px;display:inline-flex;align-items:center;}

    /* ── Tap targets: the mobile plan set 48px+; inline text links were inheriting a line box ── */
    /* `.gb__foot .open`, not a bare `.open` — "open" is also the state class on
       .fullnav / .lightbox / .csec, and matching those rewrites their display and
       collapses the nav overlay */
    .text-link,.gb__foot .open,.snapfab__link,.back,.cstory__next{
      min-height:44px;display:inline-flex;align-items:center;}
    /* the journal article's share row — the one view the 30 Jul and 1 Aug sweeps never
       opened, so its three 31–37px controls were never caught */
    .post-share a,.post-share button{min-height:44px;display:inline-flex;align-items:center;}

    /* ── Type floor ──
       The plan's smallest step is 11px, but a dozen labels had drifted to 9–10.5px. Every
       sub-11px declaration in this sheet is raised here, with tracking eased back a touch so
       the extra pixel doesn't buy a new line. Selectors mirror the source rules' specificity.
       Deliberate exception: the envelope's `.env__hint` / `.inv` stay at 10px — the mobile
       plan specifies that "Tap the seal" caps size by name. */
    .rcard__word,.rcard__place{font-size:11px;letter-spacing:.16em;}
    .work-card__word{font-size:11px;letter-spacing:.14em;}
    .work-card__tags span{font-size:11px;letter-spacing:.08em;}
    .work-card__view{font-size:11px;}
    .mitem__from,.m-entry__from{font-size:11px;}
    .menu__tag{font-size:11px;letter-spacing:.08em;}
    .ap-step__when,.ap-panel__body .when,.ap-step .ap-mbody .when{font-size:11px;}
    .tmember__role{font-size:11px;}
    .story__tags span{font-size:11px;letter-spacing:.08em;}
    .story__quote.by::after,.cstory__quote.by::after{font-size:11px;}
    .cstory__nextK{font-size:11px;}
    .blog-card__cat,.blog-card__more{font-size:11px;}
    .snapfab__eyebrow{font-size:11px;letter-spacing:.16em;}
    .nav-snapit__lbl{font-size:11px;}
    .intro .skip{font-size:11px;}
    /* the "imagery to come" placeholders sit inside empty plates — still has to be legible */
    .m-entry__ph em,.blog-card__ph em,.ph em,.plate em{font-size:11px;}
  }

  /* ── The chrome that wraps every view: topbar, full-page nav, footer ──
     These sit outside the view sections, so the per-view passes never covered them.
     The Menu button was the worst of it: a 17px-tall hit area on the one control that
     has to work on every single screen. */
  @media(max-width:900px){
    #menuBtn{min-height:44px;display:inline-flex;align-items:center;gap:10px;}
    .topbar .logo{min-height:44px;}
    /* once the bar is solid it gives the screen back: 80px of maroon on an 844px phone was a
       tenth of every view spent on chrome */
    .topbar{transition:background var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft),padding var(--dur-base) var(--ease-soft);}
    .topbar.is-bar{padding-top:8px;padding-bottom:8px;}
  }
  @media(max-width:720px){
    /* two columns sized by what they hold: the email address needs the wider one, and an even
       split pushed "The Celebrations" onto two lines */
    .foot-top{grid-template-columns:auto minmax(0,1fr);gap:30px 36px;}
    .foot .fnav{gap:2px;}
  }
  @media(max-width:900px){
    .foot a{min-height:44px;display:inline-flex;align-items:center;}
    .foot-col-lbl,.foot .fine,.foot-toplink{font-size:11px;}
  }

  /* the nav's display face was inheriting the body's 1.7 line-height, so "The Celebrations"
     wrapped into a 148px row with a gap you could park a car in */
  @media(max-width:820px){
    .nav-links a{line-height:1.12;}
    .nav-hosts .lbl,.nav-left .lbl,.nav-right .lbl{font-size:11px;}
    /* Close is the only way out of a full-screen overlay — it gets a real hit area */
    #navClose{min-height:44px;display:inline-flex;align-items:center;gap:10px;}
    .nav-logo{min-height:44px;display:inline-flex;align-items:center;}
    .nav-contact a{min-height:44px;display:inline-flex;align-items:center;}
  }

  /* Photos and films: no iPhone long-press save menu and no dragging them to the desktop.
     Right-click and Android long-press are blocked in concept-Dv3.js. */
  img,video{-webkit-touch-callout:none;-webkit-user-drag:none;}

/* contact form: the field only spam fills in, and the message when a note can't be sent */
.inq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.inq-err{margin:0 0 16px;color:#8a1f2b;font-size:15px;line-height:1.5}
.inq-ts{margin:0 0 12px}.inq-ts:empty{display:none}

  /* ═════ the studio's change sheet, 3 Nov 2026 ═════ */
  /* lines the studio asked to break in two: kept on wide screens, free to wrap on phones */
  @media(max-width:900px){ .br-wide{display:none;} }
  @media(min-width:901px){
    .celeb__panelInner .lede:has(.br-wide),
    .page-hero .lede:has(.br-wide){max-width:none;}
    .foot-tag:has(.br-wide){max-width:none;}
  }
  /* each celebration's hashtags read as the studio writes them (#BoxInvites), not in capitals */
  .spread__tag{text-transform:none;letter-spacing:.04em;font-size:12px;}
  /* every celebration's copy sits flush left, whatever the length of its words */
  @media(min-width:901px){
    .spread__copy{text-align:left;align-self:center;}
    .spread__copy .spread__brief{margin-left:0;}
    .spread__meta,.spread__tags{justify-content:flex-start;}
    /* place and date on lines of their own (4 Nov) */
    .spread__meta{flex-direction:column;gap:6px;}
  }
  /* What we make: no hashtag on the photo, tighter lines, and the list centred on the photo */
  .menu__tag{display:none;}
  .mitem{padding:6px 6px;}
  .mitem__desc{display:block;line-height:1.32;margin-top:2px;}
  .mitem__name{line-height:1.2;}
  .m-entry__desc{line-height:1.5;}
  .menu__grid{align-items:center;}
  /* the press list sits straight inside the card's frame, without a second rule on top (4 Nov) */
  .awards{border-top:0;}
  /* the guestbook signs with the sign-off and the names only */
  .sig-line .sub{display:none;}
  /* the reply card: "Uniquely" sized to sit with the serif line, each sentence on its own line */
  .reply-card h2 .script{font-size:clamp(46px,6.2vw,78px);line-height:1;margin-top:.04em;}
  @media(min-width:901px){
    .reply-card{max-width:860px;}
    .reply-card .sub{max-width:none;}
    .reply-card .sub .sub-line{display:block;}
  }
  /* The approach: words only. The step names sit on the rail, the card shows what each step means */
  .ap-panel{grid-template-columns:1fr;min-height:0;text-align:center;max-width:720px;}
  .ap-panel__img{display:none;}
  .ap-panel__body p{margin:0 auto;}
  .ap-panel--sealed .ap-panel__body{padding-right:0;}
  .ap-panel .ap-sealed-note{display:none;}
  .ap-stamp{display:none;}
  /* The approach: the card hangs from the active step — same width as the rail, closer to it,
     with a pointer that slides under whichever step is lit (4 Nov) */
  @media(min-width:861px){
    .ap-panel{margin-top:26px;max-width:768px;overflow:visible;}
    .ap-panel::before{content:"";position:absolute;top:-7px;left:var(--ap-caret,50%);width:12px;height:12px;margin-left:-6px;
      background:var(--paper);border-left:1px solid var(--line-gold);border-top:1px solid var(--line-gold);
      transform:rotate(45deg);transition:left .6s var(--ease-soft);z-index:2;}
    .ap-step__lbl::after{margin-top:8px;}
  }
  /* What we make: description lines opened up again — between the old double spacing and today's (4 Nov) */
  .mitem__desc{line-height:1.6;margin-top:3px;}
  /* Menu: the celebration names in script read larger beside their thumbnails, and the hosts'
     names sit lighter (4 Nov) */
  .nav-feat .nm{font-size:32px;} /* +4px, 5 Nov: names still read small beside the thumbnails */
  @media(max-width:820px){ .nav-feat .nm{font-size:28px;} }
  .nav-hosts__nm{font-weight:400;}

  /* ═════ the 2 Nov call, applied 4 Nov ═════ */
  /* The Journal launches as "Coming Soon": one quiet card in place of the notes */
  .jsoon{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
    margin:clamp(40px,6vw,72px) auto clamp(56px,8vw,96px);max-width:520px;
    padding:clamp(36px,5vw,56px) 24px;border:1px solid var(--line-gold);border-radius:var(--radius-md);background:var(--paper);}
  .jsoon__badge{width:54px;height:auto;opacity:.9;}
  .jsoon__txt{margin:0;font-family:var(--font-display);font-weight:300;font-size:clamp(22px,3vw,30px);line-height:1.3;color:var(--maroon);}
  /* The Identity Edit: a slim strip on Home for branding and packaging enquiries */
  .idstrip{background:var(--ivory-shade);border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold);}
  .idstrip__inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 22px;
    padding-top:16px;padding-bottom:16px;text-align:center;}
  .idstrip__k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--gold-ink);}
  .idstrip__t{font-family:var(--font-display);font-weight:300;font-size:clamp(17px,1.6vw,20px);color:var(--maroon);}
  .idstrip__a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--maroon);
    text-decoration:none;border-bottom:1px solid var(--line-gold);padding-bottom:2px;min-height:32px;display:inline-flex;align-items:center;}
  .idstrip__a:hover{border-color:var(--gold);}
  @media(max-width:600px){
    .idstrip__inner{flex-direction:column;gap:6px;padding-top:18px;padding-bottom:18px;}
    /* Home hero: the "Luxury wedding invitations…" line one step smaller on phones */
    .celeb__panel .lede{font-size:14.5px;line-height:1.65;}
    /* The Studio reads smaller on phones: the About copy and its heading */
    #view-about .page-hero .lede{font-size:15px;}
    #view-about .story h2{font-size:clamp(25px,7vw,30px) !important;}
    #view-about .story .body{font-size:15px;line-height:1.7;}
    #view-about .ap-panel__body p{font-size:13.5px;}
  }

  /* ═════ phone parity, 4 Nov: desktop fixes the phone layout had missed ═════ */
  /* the guestbook link shows only for a couple with their own page; hidden must win over display */
  .gb__open[hidden],.gb__plink[hidden]{display:none !important;}
  /* footer icons keep their circle: never squeezed by the row, never stretched by a tap-target floor */
  .foot-social a{flex:0 0 auto;}
  .foot-social svg{flex:0 0 auto;}
  /* the reply card's two sentences each on a line of their own, on every screen */
  .reply-card .sub .sub-line{display:block;}
  @media(max-width:860px){
    /* The approach on a phone: the step's words only, as the desktop card (3 Nov sheet) */
    .ap-step .ap-mbody .when,.ap-step .ap-mbody .ap-sealed{display:none;}
    .ap-step .ap-mbody p{margin-top:10px;}
    /* guestbook: "See their celebrations" under that couple's signature, above the diamonds */
    .gb__plink{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;
      font-size:var(--fs-meta);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);text-decoration:none;}
    .gb__foot{display:none !important;}
  }
  /* place and date stay on one line on phones, joined by the diamond (owner, 4 Nov);
     only desktop gives each its own line */
  @media(max-width:820px){
    /* menu: "Your hosts" sits close to the two founders it introduces */
    .nav-hosts{padding-top:14px;}
    .nav-hosts .lbl{margin-bottom:4px;}
    /* footer icons: a 42px circle instead of a 34×44 oval; four fit the column's one row */
    .foot-social{gap:10px;}
    .foot-social a{width:42px;height:42px;min-height:42px;}
    .foot-social svg{width:19px;height:19px;}
  }
  /* 360px phones (many Androids): the email stayed on one line and all four icons fit the
     column, instead of "…studio.co / m" and a clipped YouTube icon (audit L5, 4 Nov) */
  @media(max-width:400px){
    .foot-top{column-gap:22px;}
    .foot .fnav a{font-size:13px;}
    .foot-social{gap:6px;}
    .foot-social a{width:40px;height:40px;min-height:40px;}
    .foot-social svg{width:18px;height:18px;}
  }
  /* Home on desktop, 4 Nov: a shorter maroon hero (about 540px on a 929px screen), so the first
     screen shows more of the work. "Inside the Celebrations" keeps the same spacing as the other
     section titles (owner, 4 Nov). */
  @media(min-width:901px){
    .celeb__panel{min-height:58vh;padding-top:clamp(88px,11vh,124px);padding-bottom:clamp(64px,8vh,88px);}
  }
  /* What we make: the descriptions one point larger, they read too small (4 Nov) */
  .mitem__desc{font-size:14px;}
  /* What we make: each item gets room above and below, so no description sits on the divider (4 Nov) */
  .mitem{padding:10px 6px;}
  /* Section tops on desktop, 4 Nov: every section's title sits the same, shorter distance below
     its top edge (about a fifth less than before). The section spacing comes down a step, and
     the sections that set their own top (What we make, Inside the Celebrations, the guestbook)
     now use the same one. Phones keep their own spacing. */
  @media(min-width:901px){
    :root{--section-y:clamp(64px,6.5vw,100px);}
    .menu{padding-top:var(--section-y);}
    .reel__pin{padding-top:var(--section-y);}
    .gb__top{padding-top:var(--section-y);}
  }

  /* ═════ photos arriving (public/photos.js) ═════
     A photo still on its way waits invisibly over a soft tone and fades in once it has
     arrived, instead of appearing all at once or painting in bands (4 Nov). */
  .ms-ph{background-color:rgba(176,138,79,.12);}
  img.ms-wait{opacity:0 !important;}
  img.ms-in{animation:msIn .5s var(--ease-soft);}
  @keyframes msIn{from{opacity:0;}}
  /* the full-screen viewers keep the photo on screen, dimmed, under a small gold ring while the
     next one arrives (4 Nov: a second of the old photo read as the press not working) */
  .lightbox img,.lb__frame > img{transition:filter .2s var(--ease-soft);}
  .lightbox.is-loading img,.lb.is-loading .lb__frame > img{filter:brightness(.5) saturate(.8);}
  .lb__frame{position:relative;}
  .lightbox.is-loading::after,.lb.is-loading .lb__frame::after,.has-vctl.is-buffering::after{
    content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;z-index:3;
    border-radius:50%;border:1.5px solid rgba(231,211,168,.22);border-top-color:var(--gold-soft);
    animation:msSpin .8s linear infinite;pointer-events:none;}
  .has-vctl.is-buffering::after{border-color:rgba(255,250,241,.25);border-top-color:var(--champagne);}
  @keyframes msSpin{to{transform:rotate(360deg);}}
  @media (prefers-reduced-motion:reduce){
    img.ms-in{animation:none;}
    .lightbox.is-loading::after,.lb.is-loading .lb__frame::after,.has-vctl.is-buffering::after{animation-duration:2.4s;}
  }

  /* a phone in Safari (600 to 780px of page; kept last so it outranks the phone rules above):
     the founders stay, on two compact rows with each
     role on one line, and the menu rows tighten, so the contact links still end above the fold */
  @media(max-width:820px) and (min-height:601px) and (max-height:780px){
    .nav-left{padding-top:76px;}
    .nav-links a{font-size:clamp(1.9rem,8vw,2.5rem);padding:8px 0;}
    .nav-right{padding:16px 9% 20px;}
    .nav-hosts{padding-top:6px;}
    .nav-hosts .lbl{margin-bottom:8px;}
    .nav-hosts__list{flex-direction:column;gap:8px;}
    .nav-hosts__row{gap:12px;}
    .nav-hosts__ph{width:42px;height:42px;}
    .nav-hosts__nm{font-size:16px;line-height:1.15;}
    .nav-hosts__r{font-size:9px;letter-spacing:.12em;margin-top:2px;}
    .nav-contact{margin-top:14px;padding-top:14px;}
    .fullnav > .nav-left{padding-bottom:12px;}
  }
  @media(max-width:820px) and (min-height:601px) and (max-height:700px){
    .nav-left{padding-top:70px;}
    .nav-links a{font-size:clamp(1.8rem,7.4vw,2.3rem);padding:6px 0;}
    .nav-right{padding-top:12px;padding-bottom:14px;}
  }

  /* the founders photos come as WebP with a JPEG fallback; the wrapper takes no box of its own */
  .plate > picture{display:contents;}

  /* ═════ 5 Nov: one rhythm for every section head, phone and desktop alike ═════
     gold line → 18px → eyebrow → 12px → title. The page heroes take the same order (ornament
     first, then the eyebrow, then the title) with the ornament's own spacing. */
  .shead::before,.reel__head::before,.menu__head::before{margin-bottom:18px;}
  .shead .eyebrow + h2,.reel__head .eyebrow + h2,.menu__head .eyebrow + h2,.reply-card .eyebrow + h2{margin-top:12px;}
  .page-hero__motif,.page-hero .eyebrow + .page-hero__motif{margin:0 0 14px;}
  .page-hero .eyebrow + h1{margin-top:12px;}
  @media(max-width:900px){
    .shead::before,.reel__head::before,.menu__head::before{margin-bottom:18px;}
  }
  /* The approach reads larger (5 Nov): the words under each step were a size below body text */
  .ap-panel__body p{font-size:17px;line-height:1.7;max-width:60ch;}
  @media(max-width:860px){ .ap-step .ap-mbody p{font-size:16px;line-height:1.65;} }
  @media(max-width:600px){ #view-about .ap-panel__body p{font-size:16px;} }
  .page-hero .eyebrow + h1{margin-top:16px;}

/* ── 5 Nov sheet: phone and tablet framing ──
   What We Make: the photographs are 4:5, but the frame was held to half the screen's height
   while staying full width, so on a phone or iPad it turned landscape and cut the top and
   bottom off. The frame now keeps 4:5 and narrows instead, so the whole photograph shows.
   The photo also sat inside four nested rules (card edge, card inset, photo edge, photo
   inset); it keeps only the card's edge.
   The Hosts: the portrait has a deep band of plain red backdrop above their heads, which on a
   narrow screen filled the top third of the frame. Phones and tablets crop it to 4:5 from
   the bottom, so the two of them fill the frame. */
@media(max-width:900px){
  .menu__pcard::after{display:none;}
  .m-entry__img{aspect-ratio:4/5;width:min(100%, calc(min(60svh,520px) * .8));height:auto;max-height:none;margin-inline:auto;border:0;border-radius:2px;}
  .m-entry__img::after{display:none;}
  .hosts__collage.is-single .h1p{aspect-ratio:4/5;}
  .hosts__collage.is-single .h1p img{object-position:50% 88%;}
}

/* ── Home hero on tablets in portrait (601–900px, e.g. iPad Air at 820), 5 Nov ──
   These widths took the phone rules, so the sub-tagline lost the studio's line break and
   wrapped into three lines that split its phrases. Tablets now keep its two halves, a step
   smaller so each fits a line, as on a laptop. (The headline already sits on one line here,
   as it does on laptops up to about 1200px.) Phones (600px and under) and laptops are unchanged. */
@media(min-width:601px) and (max-width:900px){
  .celeb__panel .lede{max-width:none;font-size:15.5px;}
  .celeb__panel .lede .br-wide{display:inline;}
}