/* ==========================================================
   FAMIO — stylesheet  (v8 — dark + tan)
   ========================================================== */

:root{
  /* palette from Famio.dc.html */
  --bg:#0E0C0A;          /* page */
  --bg-2:#141110;        /* alternate band, footer */
  --panel:#1b1714;       /* cards */
  --panel-2:#221d19;
  --light:#E8E2D6;       /* light sections */
  --light-ink:#17140F;
  --text:#E8E2D6;
  --muted:#9a9184;
  --line:rgba(232,226,214,.16);
  --line-soft:rgba(232,226,214,.08);
  --tan:#C9A46B;         /* accent */
  --tan-soft:#dcbb88;
  --serif:"Instrument Serif", "Times New Roman", Times, serif;
  --sans:"Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pad:clamp(18px, 4.5vw, 64px);
  --maxw:1320px;
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
[id]{scroll-margin-top:96px}

/* ---------- accessibility ---------- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--tan); outline-offset:3px; border-radius:2px}
.skip{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--tan); color:#1a1614; padding:12px 20px; border-radius:var(--r);
  font-size:13px; font-weight:600; transition:top .25s;
}
.skip:focus{top:12px}
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* long unbroken strings — an email address in a narrow column, a URL — wrap
     instead of pushing the layout sideways on a phone */
  overflow-wrap:break-word;
  /* no grey flash box on tap */
  -webkit-tap-highlight-color:transparent;
}

img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
::selection{background:var(--tan); color:#1a1614}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:400; line-height:1.16; letter-spacing:0}

.display{font-size:clamp(40px, 6.4vw, 84px); line-height:1.1}
.h2{font-size:clamp(30px, 3.8vw, 56px)}
.h3{font-size:clamp(23px, 2.4vw, 34px)}

.label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:500; color:var(--tan);
}
/* square bullet before every micro-label */
.label::before{content:"▪"; margin-right:8px; font-size:8px; vertical-align:1px; opacity:.9}
.label--bare::before{content:none}
.label--muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums; letter-spacing:.06em}

/* corner crop marks — printer's registration, borrowed from the reference */
.marks{position:relative}
.marks::before, .marks::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none; z-index:5;
  border:1px solid var(--tan); opacity:.55;
}
.marks::before{top:14px; left:14px; border-right:0; border-bottom:0}
.marks::after{bottom:14px; right:14px; border-left:0; border-top:0}
.marks--wide::before{left:var(--pad); top:18px}
.marks--wide::after{right:var(--pad); bottom:18px}

.lede{font-size:16px; line-height:1.8; color:var(--muted); max-width:52ch; margin:0}

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

/* ---------- buttons ---------- */
.cta{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--tan); color:#1a1614; border:1px solid var(--tan);
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:14px 26px; border-radius:var(--r); transition:.3s; white-space:nowrap;
}
.cta:hover{background:var(--tan-soft); border-color:var(--tan-soft)}
.cta--ink, .cta--ghost{
  background:transparent; color:var(--text); border-color:var(--line);
}
.cta--ink:hover, .cta--ghost:hover{border-color:var(--tan); color:var(--tan); background:transparent}

/* ---------- announcement ---------- */
.ticker{background:var(--bg-2); overflow:hidden; white-space:nowrap; padding:10px 0; border-bottom:1px solid var(--line-soft)}
/* two identical groups, each wider than any screen, shifted by exactly half — no gap, no jump */
.ticker__track{display:flex; width:max-content; will-change:transform; animation:slide 30s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__group{display:flex; flex:0 0 auto; gap:64px; padding-right:64px}
.ticker span{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- header ---------- */
.head{position:sticky; top:0; z-index:60; background:rgba(22,19,18,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-soft)}
.head__in{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  height:70px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
}
.head__nav{display:flex; gap:28px}
.head__nav a{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(232,226,214,.62); transition:color .25s; position:relative; padding-block:6px;
}
/* the bullet follows the link's own colour instead of staying tan */
.head__nav a::before{content:"▪"; margin-right:6px; font-size:8px; vertical-align:1px; color:currentColor; opacity:.5; transition:opacity .25s}
.head__nav a:hover{color:var(--text)}
.head__nav a:hover::before{opacity:1; color:var(--tan)}
.head__nav a[aria-current="page"]{color:var(--tan)}
.head__nav a[aria-current="page"]::before{color:var(--tan); opacity:1}

.mark{font-family:var(--serif); font-size:26px; letter-spacing:.34em; text-indent:.34em; text-transform:uppercase; white-space:nowrap; color:var(--text)}

.head__right{display:flex; justify-content:flex-end; gap:18px; align-items:center}
.head__right a{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(232,226,214,.62); transition:color .25s}
.head__right a:hover{color:var(--text)}
.head__right .cta{color:#1a1614; padding:10px 18px; font-size:11px}
.head__right .cta:hover{color:#1a1614}

/* the bars stay 24x12; the button itself is padded out to a 44x44 touch target,
   which is the minimum a thumb can hit reliably */
.burger{display:none; width:44px; height:44px; position:relative; margin-right:-10px}
.burger i{position:absolute; left:10px; right:10px; height:1.5px; background:currentColor; transition:.3s}
.burger i:first-child{top:16px}
.burger i:last-child{bottom:16px}
.nav-open .burger i:first-child{transform:translateY(6px) rotate(45deg)}
.nav-open .burger i:last-child{transform:translateY(-6px) rotate(-45deg)}
/* the drawer covers the screen, so the floating button must not float over it */
.nav-open .wafab{display:none}

.drawer{
  position:fixed; inset:0; z-index:55; background:var(--bg-2); color:var(--text);
  display:flex; flex-direction:column; justify-content:center; gap:4px; padding:0 var(--pad);
  transform:translateY(-100%); transition:transform .5s cubic-bezier(.65,0,.2,1); visibility:hidden;
}
.nav-open .drawer{transform:none; visibility:visible}
.drawer a{font-family:var(--serif); font-size:clamp(30px,7vw,50px); font-weight:400; line-height:1.35; display:flex; align-items:baseline; gap:14px}
.drawer a small{font-size:11px; font-weight:500; letter-spacing:.2em; color:var(--tan)}
.drawer__foot{margin-top:36px; display:flex; gap:22px; flex-wrap:wrap}
.drawer__foot a{font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

/* header floating over the film, as in the design file */
.head--over{position:absolute; top:0; left:0; right:0; width:100%; background:linear-gradient(180deg, rgba(10,8,6,.55), rgba(10,8,6,0)); backdrop-filter:none; border-bottom:0; box-shadow:none}
.head--over .head__in{height:clamp(64px,7vw,92px)}
.head--over.stuck{position:fixed; top:0; left:0; right:0; width:100%; background:rgba(14,12,10,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-soft)}

/* ---------- hero ---------- */
/* svh, not vh. On phones `100vh` is the *largest* viewport height — the one you get
   with the address bar collapsed — so a sticky 100vh pin is taller than the screen
   while the bar is showing, and the film crops and jumps as the bar hides on scroll.
   `svh` is the smallest viewport, which is stable. vh stays as the fallback for
   browsers without svh. */
.hero{position:relative; height:420vh; height:420svh; background:var(--bg)}
.hero__pin{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden}
.hero__img{position:absolute; inset:0; overflow:hidden}
.hero__img img{width:100%; height:100%; object-fit:cover; animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.02)} to{transform:scale(1.09)}}
.hero__actions{display:flex; flex-wrap:wrap; gap:12px}
/* NOTE: the hero used to carry a full-height scrim here, left over from when it
   was a photograph. The hero is 420vh and the film is pinned inside it, so that
   gradient sat *above* the film and darkened it more the further you scrolled —
   90% black by the end. That, not the wordmark, is why the film read bright to
   dark. Removed in v9.12. Do not reintroduce it. */
.hero__in{position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(30px,5vw,68px)}
.hero h1{margin:14px 0 18px}
.hero__foot{display:flex; flex-wrap:wrap; gap:26px 48px; align-items:flex-end; justify-content:space-between; border-top:1px solid rgba(239,233,226,.2); padding-top:20px; margin-top:24px}
.hero__foot p{margin:0; max-width:46ch; font-size:15px; color:rgba(239,233,226,.82)}

/* justified monospace note, bottom-left — straight from the reference */
.note{max-width:34ch}
.note p{
  font-family:var(--mono); font-size:11px; line-height:1.85; letter-spacing:.02em;
  text-transform:uppercase; text-align:justify; color:rgba(239,233,226,.78); margin:10px 0 0;
}

/* "latest" card, bottom-right — their NEXT UP block */
.latest{display:flex; align-items:stretch; gap:14px; background:rgba(22,19,18,.72); backdrop-filter:blur(6px);
  border:1px solid rgba(239,233,226,.16); border-radius:var(--r); padding:10px; transition:.35s}
.latest:hover{border-color:var(--tan)}
.latest img{width:74px; height:74px; object-fit:cover; border-radius:2px; flex:0 0 auto}
.latest__txt{display:flex; flex-direction:column; justify-content:center; padding-right:8px}
.latest__txt strong{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; line-height:1.5}
.latest__txt span{font-family:var(--mono); font-size:11px; color:var(--tan); letter-spacing:.06em}



/* ---------- brand film (port of famio-film.jsx) ---------- */
.film{position:absolute; inset:0; overflow:hidden; background:#0E0C0A}
.film__stage{
  position:absolute; left:50%; top:50%; width:1600px; height:900px;
  transform:translate(-50%,-50%) scale(var(--s,1)); transform-origin:50% 50%;
}
/* Ambient warmth. This was a radial gradient — lit in the middle, transparent by 62% —
   which meant the corners and edges sat at bare #0E0C0A while the centre glowed. That
   falloff was the "shadow on all sides": a vignette by omission rather than by drawing
   one. Removing .film__roomvig in v9.13 only took away half of it.
   It is now a flat wash with no falloff anywhere, so every edge matches the centre.
   The raking light on the hide comes from .film__rake / .film__sweep, which still move. */
/* inset:-100% rather than 0 — since v9.21 the stage is smaller than the frame on a
   phone (contain, not cover), so a wash bounded by the stage would leave two darker
   bands above and below it. Overflow is clipped by .film. */
.film__light{position:absolute; inset:-100%; background:rgba(201,164,107,.07)}
.film__cam{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transform-origin:50% 50%}
.film__frame{position:relative; width:1600px; height:900px; display:flex; align-items:center; justify-content:center}

/* the hide sits as one slab: a plate, four offcuts, and the panel that survives.
   .film__base carried `box-shadow:0 60px 90px -40px rgba(0,0,0,.9)` — a 90px black
   pool ringing the whole hide on all four sides, for the entire film. It read as a
   black smear rather than as depth for a simple reason: the ground behind it is
   #0E0C0A, luminance 12, and a 90%-black shadow drives that to about 1. The shadow
   was darker than the darkest thing on the page, so there was nothing for it to be a
   shadow *on*. Removed in v9.16. The element now only carries opacity. */
.film__base{position:absolute; width:1000px; height:600px}
.film__offcut{
  position:absolute; left:50%; top:50%;
  background-image:linear-gradient(152deg,#3A2A20 0%,#241811 42%,#16100C 100%);
}
.film__grain{position:absolute; inset:0; opacity:.9; mix-blend-mode:overlay;
  background:
    repeating-linear-gradient(48deg, rgba(255,255,255,.030) 0 1px, rgba(0,0,0,.028) 1px 3px),
    repeating-linear-gradient(-38deg, rgba(255,255,255,.018) 0 1px, rgba(0,0,0,.022) 1px 4px);
}
.film__panel{
  position:absolute; width:560px; height:372px; overflow:hidden;
  background-image:linear-gradient(152deg,#3A2A20 0%,#241811 42%,#16100C 100%);
  background-size:1000px 600px; background-position:-220px -114px;
}
.film__edge{position:absolute; inset:0; border-radius:10px; border:3px solid rgba(110,42,40,.85); opacity:0}
.film__finish{position:absolute; top:-40%; width:30%; height:180%; transform:rotate(14deg); filter:blur(8px);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,236,205,.26), rgba(255,255,255,0))}

/* raking light across the whole hide */
.film__rake{position:absolute; width:1000px; height:600px; overflow:hidden; pointer-events:none}
.film__sweep{position:absolute; top:-40%; width:26%; height:180%; transform:rotate(14deg); filter:blur(6px);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,236,205,.22), rgba(255,255,255,0))}

/* the paper pattern, drawn on before anything is cut */
.film__pattern{position:absolute; width:562px; height:374px; border:1px dashed #C9A46B; opacity:0; pointer-events:none}

/* the round knife riding the pattern line */
.film__knife{position:absolute; top:0; bottom:0; width:0; opacity:0}
.film__blade{position:absolute; top:50%; left:-0.75px; width:1.5px; height:660px; transform:translateY(-50%);
  background:linear-gradient(180deg, rgba(201,164,107,0), #C9A46B, rgba(201,164,107,0));
  box-shadow:0 0 18px #C9A46B}
.film__round{position:absolute; top:calc(50% - 388px); left:-33px; width:66px; height:100px; transform-origin:50% 100%}
.film__handle{position:absolute; left:28px; top:0; width:10px; height:46px; border-radius:5px;
  background:linear-gradient(180deg,#2A1D14,#4A3524)}
.film__disc{position:absolute; left:0; top:42px; width:66px; height:58px; border-radius:4px 4px 33px 33px;
  background:linear-gradient(160deg,#F0EDE6 0%,#B9B4AA 46%,#6E6A62 100%);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.9)}
.film__shine{position:absolute; left:6px; top:74px; width:54px; height:24px; border-radius:0 0 27px 27px;
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.05))}

.film__stitches{position:absolute; width:560px; height:372px}

/* the room vignette was removed in v9.13 — it darkened the frame through the last
   third of the scroll and read as the film dimming. The element is gone from the
   stage in film.js too. Do not reintroduce it. */

/* ---- type inside the film, sized against the VISIBLE slice of the stage ----
   film.js publishes --vw / --vh: the part of the 1600x900 stage actually on screen,
   in stage coordinates. On a 390px phone that's about 416 x 900, because the stage
   scales to cover and the sides are cropped off. Every value below is
   `min(<desktop size>, <fraction of --vw>)`, so desktop is untouched and narrow
   screens shrink to fit rather than overflowing. The fractions come from each
   string's own length at its own tracking.

   v9.21: since the stage now fits rather than covers on a phone, `--s` gets small
   (~0.36 on a 390px screen) and a size fixed in stage pixels renders tiny — 13 stage
   px is under 5 real pixels. So each size is now the larger of its design size and a
   floor expressed in *screen* pixels (`Npx * var(--is)`), then capped by the fraction
   of --vw that keeps the string on screen. Desktop is untouched: there the floor is
   below the design size and the cap is far above it. */
.film__intro{position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(14px,3vw,28px); text-align:center; padding:0 28px}
.film__introword{font-family:var(--serif); font-size:min(max(88px, calc(30px * var(--is,1))), calc(var(--vw,1600px) * .101)); line-height:1.1; color:#F5F1E9; text-shadow:0 2px 40px rgba(0,0,0,.5)}
.film__introtag{font-family:var(--mono); font-size:min(max(13px, calc(10px * var(--is,1))), calc(var(--vw,1600px) * .026)); letter-spacing:.34em; text-transform:uppercase; color:rgba(240,235,226,.72)}

/* anchored to the visible edge, not to the stage's own edge — at 84px from a 1600px
   stage this sat well off-screen on a phone */
.film__label{position:absolute; opacity:0; color:rgba(232,226,214,.72);
  left:calc(50% - var(--vw,1600px)/2 + 40px);
  bottom:calc(50% - var(--vh,900px)/2 + 40px);
  font-family:var(--mono); font-size:min(max(20px, calc(11px * var(--is,1))), calc(var(--vw,1600px) * .036)); letter-spacing:.28em}
/* Instrument Serif is a high-contrast display face — its hairlines are ~1px at this
   size. Three things were blunting them, all fixed in v9.14:
     · the v9.13 bloom (26px + 78px) haloed those hairlines and killed edge contrast
     · `will-change` promoted the word to its own layer, which the stage's scale()
       then resampled — the classic composited-layer blur
     · `-webkit-font-smoothing:antialiased` (set on body) thins light-on-dark strokes
   The wordmark is now flat white with no glow, rasterised in the stage's own space. */
.film__mark{position:absolute; inset:0; z-index:3; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:clamp(14px,2.4vw,26px); opacity:0;
  -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto}
/* FAMIO is five caps at .3em tracking — about 4.6em wide. .187 of the visible width
   lands it at ~86% of the screen on a phone instead of running off both edges. */
.film__word{font-family:var(--serif); font-size:min(max(130px, calc(56px * var(--is,1))), calc(var(--vw,1600px) * .187)); line-height:1; color:#FFFFFF; opacity:0;
  text-shadow:none; text-rendering:geometricPrecision; white-space:nowrap}
.film__rule{width:0; height:1px; background:rgba(245,241,233,.9)}
.film__tag{font-family:var(--mono); font-size:min(max(19px, calc(11px * var(--is,1))), calc(var(--vw,1600px) * .040)); font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:#F5F1E9; opacity:0; white-space:nowrap}

/* ---------- page banner (inner pages) ---------- */
.pagehead{position:relative; overflow:hidden; background:var(--bg-2); padding:clamp(56px,9vw,120px) 0 clamp(40px,6vw,80px)}
.pagehead img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pagehead::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,17,15,.78), rgba(20,17,15,.92))}
.pagehead__in{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}
.pagehead h1{margin:0}
.pagehead .crumbs{padding:14px 0 0}

/* ---------- sections ---------- */
.sec{padding-block:clamp(56px,8vw,110px)}
.sec--tight{padding-block:clamp(38px,5vw,72px)}
.sec--alt{background:var(--bg-2)}
.sec__head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:clamp(26px,3.5vw,50px)}
.sec__head .label{display:block; margin-bottom:14px}

/* ---------- trust strip ---------- */
.trust{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.5vw,36px); align-items:start; text-align:center}
.trust__item svg{margin:0 auto 14px; display:block; color:var(--tan)}
.trust__item h4{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:500}
.trust h4{font-size:14px; margin-bottom:6px}
.trust p{margin:0; font-size:12.5px; color:var(--muted); line-height:1.6}

/* ---------- category index ---------- */
.index{border-top:1px solid var(--line)}
.index a{
  display:grid; grid-template-columns:52px 1fr auto; gap:18px; align-items:center;
  padding:clamp(16px,2vw,26px) 0; border-bottom:1px solid var(--line); transition:.4s;
}
.index a:hover{padding-left:14px; background:linear-gradient(90deg, rgba(226,154,86,.09), transparent 60%)}
.index a:hover .index__name{color:var(--tan)}
.index__name{font-family:var(--serif); font-size:clamp(24px,3.6vw,44px); font-weight:400; line-height:1.1; transition:color .3s}
.index__note{font-size:12.5px; color:var(--muted)}
.index .soon{opacity:.4; pointer-events:none}

/* ---------- product grid ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,40px)}
.grid--2{grid-template-columns:repeat(2,1fr)}

.card{display:block; background:var(--panel); border-radius:var(--r); overflow:hidden; border:1px solid transparent; transition:border-color .35s, opacity .35s}
.card:hover{border-color:rgba(226,154,86,.4)}
/* hovering one piece dims its neighbours — the reference's shop behaviour */
.grid:hover .card{opacity:.4}
.grid:hover .card:hover{opacity:1}
.card__media{position:relative; overflow:hidden; background:var(--panel-2); aspect-ratio:1/1}
.card__media img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__media img{transform:scale(1.05)}
.card__tag{
  position:absolute; top:12px; left:12px; z-index:2; background:var(--bg-2); color:var(--tan);
  padding:5px 10px; border-radius:2px; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
}
.card__body{display:flex; justify-content:space-between; gap:14px; align-items:baseline; padding:18px 20px 0}
.card__name{font-family:var(--serif); font-size:24px; font-weight:400}
.card__colour{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:5px}
.card__price{font-family:var(--mono); font-size:13.5px; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--tan)}
.card__blurb{font-size:13px; color:var(--muted); margin:10px 0 0; padding:0 20px 20px; line-height:1.6}

/* ---------- filters ---------- */
.filterbar{
  position:sticky; top:70px; z-index:40; background:var(--bg);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-block:16px; margin-bottom:clamp(24px,3vw,42px);
}
.filterbar__in{display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center}
.filtergroup{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.filtergroup > .label{margin-right:4px}
.filterbar__end{margin-left:auto; display:flex; gap:18px; align-items:center}
.reset{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid transparent; transition:.3s}
.reset:hover{color:var(--tan); border-bottom-color:var(--tan)}
.reset[hidden]{display:none}

.filters{display:flex; flex-wrap:wrap; gap:8px}
.filters button{
  border:1px solid var(--line); border-radius:100px; padding:8px 16px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; transition:.3s; color:var(--muted);
}
.filters button:hover{border-color:var(--tan); color:var(--tan)}
.filters button.on{background:var(--tan); border-color:var(--tan); color:#1a1614}
.filters button .n{opacity:.55; margin-left:6px; font-variant-numeric:tabular-nums}
.filters button.on .n{opacity:.7}
.filters button[disabled]{opacity:.32; pointer-events:none}

.head__nav .n{font-size:9.5px; vertical-align:super; margin-left:3px; color:var(--tan); opacity:.85}

/* ---------- split ---------- */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,72px); align-items:center}
.split__media img{width:100%; height:auto; border-radius:var(--r)}

/* ---------- feature cards (why choose us) ---------- */
.feats{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.6vw,22px)}
.feat{background:var(--panel); border-radius:var(--r); padding:clamp(24px,2.6vw,36px); text-align:center; transition:.35s}
.feat:hover{background:var(--panel-2)}
.feat__icon{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  background:var(--tan); color:#1a1614; display:grid; place-items:center;
}
.feat h4{font-size:16px; font-weight:600; margin-bottom:8px}
.feat p{margin:0; font-size:13px; color:var(--muted); line-height:1.65}

/* ---------- notes ---------- */
.notes{list-style:none; margin:28px 0 0; padding:0; border-top:1px solid var(--line)}
.notes li{display:grid; grid-template-columns:44px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--line)}
.notes h4{font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px}
.notes p{margin:0; font-size:14px; color:var(--muted); line-height:1.7; max-width:46ch}

/* ---------- order channels ---------- */
.channels{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px)}
.channels a{background:var(--panel); border-radius:var(--r); padding:clamp(24px,3vw,36px); transition:.35s; position:relative; display:block}
.channels a:hover{background:var(--panel-2)}
.channels h4{font-size:22px; font-weight:700; margin:14px 0 8px}
.channels p{margin:0; font-size:13.5px; color:var(--muted); max-width:34ch}
.channels .arrow{position:absolute; top:clamp(24px,3vw,36px); right:clamp(20px,2vw,30px); font-size:15px; color:var(--tan); transition:.35s}
.channels a:hover .arrow{transform:translate(4px,-4px)}

/* ---------- photo CTA band ---------- */
.band{position:relative; overflow:hidden; padding:clamp(56px,8vw,110px) 0; text-align:center}
.band img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.band::after{content:""; position:absolute; inset:0; background:rgba(20,17,15,.82)}
.band__in{position:relative; z-index:2; max-width:640px; margin:0 auto; padding-inline:var(--pad)}
.band p{margin:16px auto 26px; color:var(--muted); font-size:15px}

/* ---------- product page ---------- */
.pdp{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(26px,4vw,64px); align-items:start}
.gallery__main{background:var(--panel); border-radius:var(--r); overflow:hidden}
.gallery__main img{width:100%; aspect-ratio:1/1; object-fit:cover}
.gallery__thumbs{display:flex; gap:10px; margin-top:10px}
.gallery__thumbs button{width:78px; aspect-ratio:1/1; overflow:hidden; border-radius:var(--r); opacity:.45; transition:.3s; border:1px solid transparent}
.gallery__thumbs button.on{opacity:1; border-color:var(--tan)}
.gallery__thumbs img{width:100%; height:100%; object-fit:cover}

.pdp__side{position:sticky; top:100px}
.pdp__price{font-size:24px; font-weight:700; color:var(--tan); margin:18px 0 0; font-variant-numeric:tabular-nums}
.pdp__price s{color:var(--muted); font-size:16px; font-weight:400; margin-right:10px}
.pdp__desc{font-size:15px; line-height:1.8; color:var(--muted); margin:18px 0 0}
.specs{width:100%; border-collapse:collapse; margin-top:28px}
.specs th,.specs td{text-align:left; padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px; font-weight:400; vertical-align:top}
.specs th{width:44%; color:var(--muted); font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding-top:15px}

.order{display:grid; gap:9px; margin-top:28px}
.order a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--line); border-radius:var(--r); padding:15px 20px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; transition:.3s;
}
.order a:first-child{background:var(--tan); border-color:var(--tan); color:#1a1614}
.order a:first-child:hover{background:var(--tan-soft); border-color:var(--tan-soft)}
.order a:hover{border-color:var(--tan); color:var(--tan)}
.order a:first-child:hover{color:#1a1614}
.order .sub{font-size:10px; font-weight:400; letter-spacing:.08em; opacity:.6; text-transform:none}
.ship{margin-top:20px; border-top:1px solid var(--line); padding-top:16px}
.ship p{margin:0 0 6px; font-size:12.5px; color:var(--muted)}

.crumbs{display:flex; gap:10px; align-items:center; padding:20px 0; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.crumbs a:hover{color:var(--tan)}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px)}
.dl{margin:0; border-top:1px solid var(--line)}
.dl > div{display:grid; grid-template-columns:34% 1fr; gap:16px; padding:15px 0; border-bottom:1px solid var(--line)}
.dl dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tan)}
.dl dd{margin:0; font-size:15px; color:var(--muted)}

/* ---------- blog ---------- */
.article{max-width:70ch}
.article__meta{display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin:18px 0 0}
.article h2{font-size:clamp(24px,2.6vw,34px); margin:46px 0 14px}
.article h3{font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin:30px 0 10px; color:var(--tan)}
.article p{font-size:16px; line-height:1.85; color:var(--muted); margin:0 0 18px}
.article ul,.article ol{margin:0 0 20px; padding-left:20px}
.article li{font-size:16px; line-height:1.85; color:var(--muted); margin-bottom:10px}
.article li::marker{color:var(--tan)}
.article a:not(.cta){color:var(--tan); border-bottom:1px solid rgba(226,154,86,.4)}
.article a:not(.cta):hover{border-bottom-color:var(--tan)}
.article strong{font-weight:600; color:var(--text)}

.answer{background:var(--panel); border-left:3px solid var(--tan); border-radius:var(--r); padding:22px 26px; margin:26px 0 32px}
.answer p{margin:0; font-size:16.5px; color:var(--text); line-height:1.75}
.answer .label{display:block; margin-bottom:8px}

.faq{border-top:1px solid var(--line); margin-top:44px}
.faq details{border-bottom:1px solid var(--line); padding:18px 0}
.faq summary{cursor:pointer; font-size:18px; font-weight:600; list-style:none; letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; font-weight:400; font-size:20px; color:var(--tan)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:14px 0 0; font-size:15px; line-height:1.8; color:var(--muted)}

.postlist{display:grid; gap:clamp(14px,1.6vw,22px)}
.postlist a{display:block; background:var(--panel); border-radius:var(--r); padding:clamp(24px,3vw,38px); border:1px solid transparent; transition:.35s}
.postlist a:hover{border-color:rgba(226,154,86,.4); background:var(--panel-2)}
.postlist h2{font-size:clamp(21px,2.4vw,30px); line-height:1.2; margin:12px 0 10px}
.postlist p{margin:0; font-size:14px; color:var(--muted); max-width:66ch; line-height:1.7}

.cta-band{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(26px,4vw,40px) 0; margin:48px 0 0;
  display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between}
.cta-band h3{font-size:clamp(20px,2.2vw,26px); text-transform:none; letter-spacing:-.01em; margin:0; color:var(--text)}

/* ---------- footer ---------- */
.foot{background:var(--bg-2); padding-block:clamp(48px,6vw,84px) 26px; margin-top:clamp(40px,6vw,88px); border-top:1px solid var(--line-soft)}
.foot a{color:var(--muted); transition:color .3s}
.foot a:hover{color:var(--tan)}
.foot__top{
  display:grid; grid-template-columns:1.6fr repeat(5, minmax(0,1fr));
  gap:34px 26px; padding-bottom:44px; border-bottom:1px solid var(--line-soft);
}
.foot h5{font-family:var(--mono); font-size:11px; letter-spacing:.1em; margin:0 0 18px; font-weight:500; color:var(--tan); text-transform:uppercase}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.04em}
.foot a[target="_blank"]::before{content:"↗"; margin-right:7px; color:var(--tan); font-size:11px}
.foot li{color:var(--muted)}
.foot__mark{font-family:var(--serif); font-size:38px; letter-spacing:.2em; text-transform:uppercase; line-height:1}
.foot__blurb{font-size:13.5px; color:var(--muted); margin:16px 0 0; max-width:32ch; line-height:1.7}
.foot__bot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px; padding-top:22px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase}
.foot__bot .credit{border:0; padding:0; margin:0}

/* ---------- studio credit ---------- */
.credit{
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted);
}
.credit a{color:var(--text); border-bottom:1px solid rgba(226,154,86,.45); padding-bottom:1px}
.credit a:hover{color:var(--tan); border-bottom-color:var(--tan)}
.credit__dot{width:4px; height:4px; border-radius:50%; background:var(--tan); display:inline-block}

/* ---------- case study ---------- */
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px); margin:36px 0 0}
.metric{background:var(--panel); border-radius:var(--r); padding:clamp(20px,2.4vw,30px)}
.metric strong{display:block; font-size:clamp(28px,3.4vw,44px); line-height:1; color:var(--tan); font-weight:700; letter-spacing:-.02em}
.metric span{display:block; margin-top:10px; font-size:12px; color:var(--muted); line-height:1.5}
.stack{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0}
.stack li{list-style:none; font-size:12px; letter-spacing:.06em; color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:6px 14px}

/* ==========================================================
   v10 — components from Famio.dc.html
   ========================================================== */

/* light sections, and everything that has to flip inside them */
.sec--light{background:var(--light); color:var(--light-ink)}
.sec--light .label{color:rgba(23,20,15,.5)}
.sec--light .lede, .sec--light p{color:rgba(23,20,15,.72)}
.sec--light h1,.sec--light h2,.sec--light h3,.sec--light h4{color:var(--light-ink)}
.sec--light a:hover{color:var(--tan)}

/* products always sit on bone, on every page — one presentation, one colour */
.sec--light .card{background:#DFD8C9; border-color:transparent}
.sec--light .card:hover{border-color:rgba(110,42,40,.35)}
.sec--light .card__media{background:#D4CCBC}
.sec--light .card__name{color:var(--light-ink)}
.sec--light .card__colour{color:rgba(23,20,15,.55)}
.sec--light .card__price{color:#6E2A28}
.sec--light .card__blurb{color:rgba(23,20,15,.6)}
.sec--light .card__tag{background:var(--light); color:#6E2A28}
.sec--light .filters button{border-color:rgba(23,20,15,.2); color:rgba(23,20,15,.6)}
.sec--light .filters button:hover{border-color:#6E2A28; color:#6E2A28}
.sec--light .filters button.on{background:var(--light-ink); border-color:var(--light-ink); color:var(--light)}
.sec--light .filterbar{background:var(--light); border-color:rgba(23,20,15,.18)}
.sec--light .reset{color:rgba(23,20,15,.55)}
.sec--light .reset:hover{color:#6E2A28; border-bottom-color:#6E2A28}
.sec--light .marker, .sec--light .label--muted{color:rgba(23,20,15,.5)}


/* product detail on the same bone panel as every other product view */
.sec--light .pdp__desc{color:rgba(23,20,15,.72)}
.sec--light .pdp__price{color:#6E2A28}
.sec--light .pdp__colour{color:rgba(23,20,15,.55)}
.sec--light .gallery__main{background:#D4CCBC}
.sec--light .gallery__thumbs button.on{border-color:#6E2A28}
.sec--light .specs th,.sec--light .specs td{border-bottom-color:rgba(23,20,15,.14)}
.sec--light .specs th{color:rgba(23,20,15,.5)}
.sec--light .specs td{color:var(--light-ink)}
.sec--light .order a{border-color:rgba(23,20,15,.25); color:var(--light-ink)}
.sec--light .order a:first-child{background:var(--light-ink); border-color:var(--light-ink); color:var(--light)}
.sec--light .order a:first-child:hover{background:#6E2A28; border-color:#6E2A28; color:var(--light)}
.sec--light .order a:hover{background:var(--light-ink); border-color:var(--light-ink); color:var(--light)}
.sec--light .ship{border-top-color:rgba(23,20,15,.18)}
.sec--light .ship p{color:rgba(23,20,15,.6)}
.sec--light .crumbs{color:rgba(23,20,15,.55)}
.sec--light .crumbs a:hover{color:#6E2A28}
.sec--light .cta--ink, .sec--light .cta--ghost{color:var(--light-ink); border-color:rgba(23,20,15,.25)}
.sec--light .cta--ink:hover, .sec--light .cta--ghost:hover{border-color:#6E2A28; color:#6E2A28}
.sec--light .sec__head .label{color:rgba(23,20,15,.5)}

/* section marker — "01 — THE PREMISE" */
.marker{font-family:var(--mono); font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:rgba(23,20,15,.5)}
.marker--dark{color:rgba(232,226,214,.5)}

/* the big serif statement */
.statement{max-width:var(--maxw); margin:0 auto}
.statement__marker{margin-bottom:clamp(28px,4vw,48px)}
.statement p{
  margin:0; max-width:20ch; font-family:var(--serif); font-size:clamp(32px,4.4vw,68px);
  line-height:1.18; text-wrap:pretty; color:inherit;
}

/* craft rows — number | title | body */
.rows{max-width:var(--maxw); margin:0 auto; display:grid}
.row{
  display:grid; grid-template-columns:90px 1fr 1.15fr; gap:40px; align-items:start;
  padding:clamp(30px,3.4vw,46px) 0; border-top:1px solid rgba(23,20,15,.18);
}
.row:last-child{border-bottom:1px solid rgba(23,20,15,.18)}
.row__n{font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:rgba(23,20,15,.45); padding-top:10px}
.row h3{font-size:clamp(26px,2.4vw,34px); line-height:1.2}
.row p{margin:0; font-size:17px; line-height:1.7; color:rgba(23,20,15,.72); text-wrap:pretty}

/* full-bleed photo band with parallax */
.photoband{position:relative; height:min(86vh,720px); min-height:460px; overflow:hidden; background:var(--bg)}
.photoband__img{position:absolute; inset:-12% 0; background-size:cover; background-position:52% 55%; will-change:transform}
.photoband::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,8,6,.45), rgba(10,8,6,.05) 45%, rgba(10,8,6,.72))}
.photoband__cap{
  position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(30px,5vw,52px); z-index:2;
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;
}
.photoband__cap p{margin:0; font-family:var(--serif); font-size:clamp(26px,3vw,46px); line-height:1.25; max-width:620px; color:var(--text)}
.photoband__cap span{font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(232,226,214,.6); white-space:nowrap}

/* objects grid */
.objects{max-width:var(--maxw); margin:0 auto}
.objects__head{display:flex; justify-content:space-between; align-items:baseline; gap:30px; margin-bottom:clamp(38px,5vw,62px); flex-wrap:wrap}
.objects__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,34px)}
.object{display:block}
.object__media{position:relative; aspect-ratio:4/5; overflow:hidden; background:#DAD3C5}
.object__media img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.object:hover .object__media img{transform:scale(1.04)}
.object__row{display:flex; justify-content:space-between; align-items:baseline; gap:18px; margin-top:20px}
.object h3{font-size:25px}
.object__code{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(23,20,15,.5); white-space:nowrap}
.object__price{font-family:var(--mono); font-size:13px; color:#6E2A28; font-variant-numeric:tabular-nums; white-space:nowrap}
.object__meta{display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-top:6px}
.object__cta{display:inline-block; margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(23,20,15,.55); border-bottom:1px solid rgba(23,20,15,.25); padding-bottom:3px; transition:.3s}
.object:hover .object__cta{color:#6E2A28; border-bottom-color:#6E2A28}
.object p{margin:8px 0 0; font-size:15px; line-height:1.6; color:rgba(23,20,15,.65)}
.objects__grid:hover .object{opacity:.45; transition:opacity .35s}
.objects__grid:hover .object:hover{opacity:1}

/* orders block */
.orders{max-width:var(--maxw); margin:0 auto; display:grid; gap:clamp(46px,7vw,90px)}
.orders__top{display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:end}
.orders__top p{margin:0; font-family:var(--serif); font-size:clamp(28px,3.2vw,50px); line-height:1.25; max-width:620px; text-wrap:pretty; color:var(--text)}
.orders__links{display:grid; gap:0}
.orders__links a{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  border-bottom:1px solid rgba(232,226,214,.3); padding:16px 0;
  font-family:var(--mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase; transition:.3s;
}
.orders__links a span:last-child{color:var(--tan); transition:.3s}
.orders__links a:hover{color:var(--tan); border-bottom-color:var(--tan)}
.orders__links a:hover span:last-child{transform:translateX(4px)}
.orders__bot{
  display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
  border-top:1px solid rgba(232,226,214,.16); padding-top:30px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(232,226,214,.45);
}


.scrollcue{
  position:absolute; left:var(--pad); bottom:clamp(28px,4vw,42px); z-index:5; transition:opacity .4s;
  display:flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:rgba(232,226,214,.5);
}
.scrollcue i{display:block; width:1px; height:34px; background:rgba(232,226,214,.35); animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.5); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top}}

@media (max-width:900px){
  .row{grid-template-columns:56px 1fr; gap:18px}
  .row p{grid-column:2}
  .objects__grid{grid-template-columns:1fr 1fr}
  .orders__top{grid-template-columns:1fr; gap:34px}
}
@media (max-width:600px){
  .objects__grid{grid-template-columns:1fr}
}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(16px); transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1; transform:none}

/* images fade in once decoded — no flash of half-drawn photo */
.card__media img, .gallery__main img, .split__media img{opacity:0; transition:opacity .6s ease, transform 1.1s cubic-bezier(.2,.7,.2,1)}
.card__media img.ready, .gallery__main img.ready, .split__media img.ready{opacity:1}

/* header gains weight once you scroll past the hero */
.head{box-shadow:0 0 0 rgba(0,0,0,0); transition:box-shadow .4s, background .4s}
.head.stuck{box-shadow:0 10px 30px rgba(0,0,0,.35); background:rgba(22,19,18,.98)}

/* button + card lift */
.cta{transform:translateY(0)}
.cta:hover{transform:translateY(-2px)}
.feat, .channels a, .postlist a, .card{transform:translateY(0); transition:transform .35s cubic-bezier(.2,.7,.2,1), background .35s, border-color .35s}
.feat:hover, .channels a:hover, .postlist a:hover, .card:hover{transform:translateY(-4px)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .trust{grid-template-columns:repeat(2,1fr); gap:28px}
  .channels{grid-template-columns:1fr}
  .pdp{grid-template-columns:1fr}
  .pdp__side{position:static}
  .foot__top{grid-template-columns:1fr 1fr 1fr}
  .foot__brand{grid-column:1/-1}
  .contact-grid{grid-template-columns:1fr}
  .filterbar{position:static}
}

/* The header collapses at 900px, not 700px. Measured intrinsic width of the full
   desktop header — five nav links, wordmark, Instagram, Contact CTA — is about
   830px, so between 701px and 830px it was overflowing. That range is exactly
   iPad portrait (768px), where it was worst. */
@media (max-width:900px){
  .head__nav, .head__right a:not(.cta){display:none}
  .burger{display:block}
  /* Two columns, not three. The base rule is `1fr auto 1fr` for a centred
     wordmark; once the nav is hidden the first column empties, but the third
     `1fr` still claims a share equal to the wordmark's column — a phantom
     column roughly 100px wide pushing the Contact button off the right edge on
     every phone. `overflow-x:hidden` on body hid the scrollbar, so it read as a
     clipped button rather than as a layout error. */
  .head__in{grid-template-columns:1fr auto}
}

@media (max-width:700px){
  .head__in{height:62px}
  .mark{font-size:21px}
  .grid, .grid--2{grid-template-columns:1fr}
  .feats{grid-template-columns:1fr}
  .index a{grid-template-columns:34px 1fr}
  .index__note{grid-column:2; margin-top:-6px}
  .foot__top{grid-template-columns:1fr 1fr; gap:28px 20px}
  .dl > div{grid-template-columns:1fr; gap:4px}
  .filterbar__end{margin-left:0; width:100%; justify-content:space-between}
  /* a shorter run of the film on a phone — three screens of scrubbing, not four,
     since thumb-scrolling covers less distance per gesture. The type overrides that
     used to live here are gone: sizes now come from --vw and fit by construction. */
  .hero{height:300vh; height:300svh}
  /* The chapter label sits bottom-left and the floating WhatsApp button sits
     bottom-right, and on a phone they were landing on top of each other — the
     button covered the last four characters of "…AND THE PATTERN", which read as
     the text being cut off. Measured at 414x800: 79px of overlap. The label now
     clears the button's full height (52px + 14px offset) with room to spare. */
  .film__label{left:calc(50% - var(--vw,1600px)/2 + 26px); bottom:calc(50% - var(--vh,900px)/2 + 96px)}

  /* the button floats over the footer's last lines otherwise */
  .foot{padding-bottom:86px}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .marks--wide::before{left:16px; top:14px}
  .marks--wide::after{right:16px; bottom:14px}
  .scrollcue{letter-spacing:.18em}
}

/* Narrow phones — 320 to 420px. The Contact CTA is shrunk rather than hidden;
   at full size the header still ran about 10px over on a 320px screen. */
@media (max-width:420px){
  .head__right .cta{padding:9px 12px; font-size:10px; letter-spacing:.06em}
  .mark{font-size:19px}
  .trust{grid-template-columns:1fr; gap:22px; text-align:left}
  .trust__item{display:grid; grid-template-columns:26px 1fr; gap:14px; align-items:start}
  .trust__item svg{grid-row:1/3; margin-top:3px}
  .foot__top{grid-template-columns:1fr; gap:26px}
  .metrics{grid-template-columns:1fr 1fr}
}

/* ---------- floating WhatsApp button (mobile only) ----------
   Bangladeshi retail convention: one thumb-reach tap to order from any page.
   Hidden from 701px up, where the header's Contact CTA is always visible. */
.wafab{
  position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:50;
  display:none; align-items:center; justify-content:center; gap:9px;
  width:auto; min-height:52px; padding:0 18px 0 15px;
  background:#1FA855; color:#fff; border-radius:999px;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.7);
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
}
.wafab svg{width:21px; height:21px; flex:0 0 auto; fill:currentColor}
.wafab:active{transform:scale(.97)}
@media (max-width:700px){ .wafab{display:inline-flex} }
@media (prefers-reduced-motion:reduce){ .wafab{transition:none} }
@media (prefers-reduced-motion:reduce){
  .hero{height:100vh}
  *{animation:none !important; transition:none !important}
  .rv{opacity:1; transform:none}
  .card__media img, .gallery__main img, .split__media img{opacity:1}
  html{scroll-behavior:auto}
}