/* =====================================================================
   Berolink — Home (warm system · v2)
   Design source of record. Section arc:
     Hero(dark·kept) → Sub-Hero(umber) → the silence → the source →
     Reading → the north star(umber) → the scale → the house → Footer(umber)
   Type: Elms Sans (titles) · Manrope (body) · IBM Plex Mono (eyebrows, kept)
         Newsreader (hero headline only, kept) · Breve SC (wordmark, kept)
   Colour: CDO-06 §4 — Gardenia field, Periwinkle jewel, Umber gravitas.
   The HERO block (.chrome through .hero…) is preserved verbatim from v1.
   ===================================================================== */

/* ===== Self-hosted fonts (zero external dependency) ===== */
@font-face{ font-family:"Elms Sans"; src:url("../fonts/ElmsSans.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Elms Sans"; src:url("../fonts/ElmsSans-Italic.woff2") format("woff2");
  font-weight:100 900; font-style:italic; font-display:swap; }
@font-face{ font-family:"Manrope"; src:url("../fonts/Manrope.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap; }
@font-face{ font-family:"Newsreader"; src:url("../fonts/Newsreader.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap; }
@font-face{ font-family:"Newsreader"; src:url("../fonts/Newsreader-Italic.woff2") format("woff2");
  font-weight:200 800; font-style:italic; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Breve SC"; src:url("../fonts/BreveSC.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Baumans"; src:url("../fonts/Baumans.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Quicksand"; src:url("../fonts/Quicksand.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap; }

:root{
  /* --- hero/chrome heritage tokens (kept so the preserved hero renders identically) --- */
  --bone:#F2ECE2; --ash:#8C8073; --ash-dim:#5C544A;
  --line-2:rgba(242,236,226,0.22);
  --signal:#8398CA; --signal-rgb:131,152,202; --signal-deep:#54639C;

  /* --- warm system · CDO-06 §4 --- */
  --gardenia:#F1E9E0; --gardenia-2:#E8DFD2;     /* field · slightly deeper surface */
  --umber:#221A15; --umber-2:#2B221B;           /* ink / gravitas ground · panel top */
  --peri-deep:#4E5FA2;                          /* periwinkle on light grounds */
  --peri:#7A85B8;                               /* periwinkle on dark grounds */
  --cream-hi:#FAFAF8;                            /* neutral near-white ground (who-we-are) */
  --mocha:#A47764;                              /* signature — display accent only */
  --rose:#D19C98; --willow:#9B8A4E; --cobble:#A89A8E;
  --taupe:rgba(34,26,21,0.76);                  /* softened ink — secondary text (no brown) */
  --ink-faint:rgba(34,26,21,0.5);               /* micro meta / captions / labels */
  --line:rgba(34,26,21,0.12);                   /* hairline on Gardenia */
  --line-um:rgba(241,233,224,0.14);             /* hairline on Umber */

  --title:"Quicksand",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Newsreader",Georgia,serif;           /* HERO headline only */
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;  /* eyebrows */
  --pad:clamp(22px,5vw,64px); --maxw:1100px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--gardenia); color:var(--umber);
  font-family:var(--body); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
::selection{ background:rgba(78,95,162,0.20); }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--peri-deep); outline-offset:5px; border-radius:2px; }

/* ============================ CHROME (kept) ============================ */
.chrome{ position:absolute; inset:0 0 auto 0; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:clamp(20px,2.6vw,30px) var(--pad); }
.chrome::before{ content:""; position:absolute; inset:0 0 auto 0; height:140px; pointer-events:none; z-index:-1;
  background:linear-gradient(180deg, rgba(8,9,12,0.66) 0%, rgba(8,9,12,0.30) 55%, rgba(8,9,12,0) 100%); }
.chrome .mark{ font-family:"Breve SC",var(--mono); font-weight:400; font-size:1.18rem; letter-spacing:0.34em; color:#A9BAE2; opacity:0.98; position:relative; display:inline-block; text-shadow:0 1px 22px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.5); }
.chrome .mark::before{ content:""; position:absolute; inset:-22px -34px -22px -30px; z-index:-1; border-radius:50%;
  background:radial-gradient(58% 88% at 46% 50%, rgba(8,9,12,0.60) 0%, rgba(8,9,12,0.28) 55%, rgba(8,9,12,0) 100%); filter:blur(5px); }

/* ============================ SHARED ============================ */
.wrap{ position:relative; z-index:1; }
.eyebrow{ font-family:var(--mono); font-weight:500; font-size:0.7rem; letter-spacing:0.4em; text-transform:uppercase; color:var(--taupe); }
.nb{ white-space:nowrap; }
.scrollcue{ font-family:var(--mono); font-size:0.62rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--taupe); display:flex; flex-direction:column; align-items:center; gap:0.8em; }
.scrollcue .bar{ width:1px; height:30px; background:linear-gradient(var(--line),transparent); }

/* a thin periwinkle key-rule used to open a few light sections (the "signal" motif) */
.keyline{ width:34px; height:2px; background:var(--peri-deep); border-radius:2px; }

/* ===== HERO = the collage — PRESERVED VERBATIM FROM v1 (instruction: keep as-is) ===== */
.hero{ position:relative; width:100%; min-height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; text-align:center; background:#0a0908; }
.hero-collage{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:1fr; gap:4px; background:#0a0908; }
.tile{ position:relative; overflow:hidden; background:#0c0a08; }
.tile img{ width:100%; height:100%; object-fit:cover; object-position:50% 36%; display:block; filter:brightness(0.46) saturate(0.85) contrast(1.04); transform:scale(1.002); transition:filter .55s ease, transform .75s cubic-bezier(.2,.6,.2,1); will-change:filter,transform; }
.tile:hover{ z-index:4; }
.tile:hover img{ filter:brightness(0.9) saturate(1.02) contrast(1.0); transform:scale(1.045); }
.tile.t-manhorse img{ object-position:50% 32%; }
.tile.t-horsewoman img{ object-position:28% 40%; }
.hero-collage .tile:nth-child(1):hover img,
.hero-collage .tile:nth-child(5):hover img{ filter:brightness(0.66) saturate(0.98) contrast(1.02); }
.hero-veil{ position:absolute; inset:0; pointer-events:none; background:
    radial-gradient(66% 56% at 50% 50%, rgba(8,9,12,0.74) 0%, rgba(8,9,12,0.40) 52%, rgba(8,9,12,0.16) 100%),
    linear-gradient(180deg, rgba(10,11,16,0.72) 0%, rgba(10,11,16,0.10) 18%, rgba(9,8,7,0.10) 80%, rgba(9,8,7,0.74) 100%); }
.hero-inner{ position:relative; z-index:5; max-width:var(--maxw); margin:0 auto; padding:clamp(4rem,11vh,7rem) var(--pad); display:flex; flex-direction:column; align-items:center; gap:clamp(20px,3vh,32px); pointer-events:none; }
.hero-inner > *{ pointer-events:auto; }
.hero .eyebrow{ color:rgba(244,238,228,0.58); }
.hero h1{ font-family:var(--serif); font-weight:300; letter-spacing:-0.018em; font-size:clamp(2.1rem,5.4vw,3.9rem); line-height:1.04; color:#F4EEE4; margin:0; max-width:30ch;
  text-shadow:0 1px 40px rgba(0,0,0,0.5); }
.hero h1 em{ font-style:italic; }
.hero .scrollcue{ margin-top:clamp(8px,1.6vh,16px); color:rgba(244,238,228,0.42); }
.hero .scrollcue .bar{ background:linear-gradient(var(--line-2),transparent); }

/* ============================ SUB-HERO (umber · symbolic) ============================ */
/* The bridge out of the dark doorway — one gravitas statement before the light body. */
.subhero{ background:var(--umber); color:var(--gardenia); padding:clamp(4.5rem,11vh,8rem) var(--pad); }
.subhero-inner{ max-width:var(--maxw); margin:0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:clamp(20px,3.4vh,30px); }
.subhero .keyline{ background:var(--peri); }
.subhero p{ font-family:var(--title); font-weight:360; font-size:clamp(1.5rem,3.4vw,2.55rem); line-height:1.28; letter-spacing:-0.01em; margin:0; max-width:24ch; color:#F4ECE3; }
.subhero p .em{ color:var(--peri); font-style:normal; }

/* ============================ THE SILENCE (gardenia · the problem) ============================ */
.silence{ position:relative; }
.silence-grid{ display:grid; grid-template-columns:1fr 0.94fr; align-items:stretch; min-height:clamp(560px,84vh,780px); }
.silence-arg{ padding:clamp(4.5rem,10vh,7.5rem) clamp(28px,5vw,72px); display:flex; flex-direction:column; justify-content:center; }
.silence-arg .inner{ max-width:520px; margin-left:auto; }
.silence-arg .eyebrow{ color:var(--ink-faint); margin-bottom:clamp(24px,4vh,40px); }
.silence-arg h2{ font-family:var(--title); font-weight:400; letter-spacing:-0.014em; font-size:clamp(1.85rem,3.7vw,2.75rem); line-height:1.12; margin:0; max-width:15ch; color:var(--umber); }
.silence-arg h2 em{ font-style:normal; color:var(--peri-deep); }
.silence-arg .lead{ font-family:var(--body); color:var(--taupe); font-size:clamp(1rem,1.5vw,1.14rem); line-height:1.64; max-width:46ch; margin:clamp(20px,3.4vh,30px) 0 0; }
.silence-arg .lead em{ font-style:normal; color:var(--umber); font-weight:600; }
.silence-photo{ position:relative; overflow:hidden; background:var(--umber); }
.silence-photo img{ width:100%; height:100%; object-fit:cover; object-position:52% 18%; display:block; }
.silence-photo::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(18,16,14,0) 26%, rgba(18,16,14,0.55) 50%, rgba(18,16,14,0.95) 100%); }
.silence-ev{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(1.8rem,3.4vw,3rem) clamp(1.6rem,3.4vw,2.8rem) clamp(2rem,3.8vw,3.2rem); }
.pe-line{ font-family:var(--body); font-weight:400; font-size:clamp(1.12rem,1.6vw,1.34rem); line-height:1.62; color:#F0EEE9; margin:0; max-width:46ch; }
.pe-fig{ font-family:var(--title); font-weight:400; font-size:1.5em; letter-spacing:-0.01em; color:#F0EEE9; white-space:nowrap; line-height:1; }
.pe-key{ color:#F0EEE9; font-weight:400; font-size:1.32em; line-height:1; }
.pe-note{ font-family:var(--body); font-weight:700; color:var(--peri); font-size:clamp(1.04rem,1.5vw,1.2rem); margin:clamp(14px,2vh,20px) 0 0; }
.pe-src{ font-family:var(--mono); font-size:0.64rem; letter-spacing:0.12em; color:rgba(240,238,233,0.55); line-height:1.5; margin:clamp(16px,2.4vh,22px) 0 0; max-width:42ch; }

/* ============================ THE SOURCE (gardenia · the spine / signature) ============================ */
.source{ position:relative; min-height:clamp(440px,74vh,680px); display:flex; align-items:center; overflow:hidden; }
.source .bg{ position:absolute; inset:0; background:url("../images/source-dog-h.webp") 40% 26%/cover no-repeat; }
.source .bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(241,233,224,0) 56%, rgba(241,233,224,0.86) 74%, rgba(241,233,224,0.97) 100%); }
.source .copy{ position:relative; margin-left:auto; width:min(42%,470px); padding:0 clamp(28px,6vw,80px) 0 0; }
.source .copy .eyebrow{ color:var(--ink-faint); margin-bottom:clamp(16px,2.6vh,22px); }
.source .hl{ font-family:var(--title); font-weight:430; letter-spacing:-0.022em; font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.06; margin:0; color:var(--umber); }
.source .hl .out{ color:rgba(34,26,21,0.42); font-weight:340; }
.source .hl .src{ color:var(--peri-deep); }
.source .refrain{ font-family:var(--title); font-style:normal; font-weight:430; font-size:clamp(1.05rem,1.8vw,1.38rem); color:var(--taupe); margin:clamp(1.2rem,2.4vh,1.7rem) 0 0; }
.source .lead{ font-family:var(--body); color:var(--umber); font-size:clamp(0.96rem,1.4vw,1.08rem); line-height:1.6; max-width:40ch; margin:clamp(1rem,2vh,1.4rem) 0 0; }

/* ============================ READING (gardenia · how it begins · #sig) ============================ */
.reading{ position:relative; padding:clamp(5.5rem,12vh,8.5rem) var(--pad) clamp(4.5rem,9vh,7rem); display:flex; flex-direction:column; align-items:center; text-align:center; }
.reading > *{ position:relative; max-width:var(--maxw); }
.reading .eyebrow{ margin-bottom:clamp(18px,3vh,28px); }
.reading h2{ font-family:var(--title); font-weight:380; letter-spacing:-0.012em; font-size:clamp(1.9rem,4.4vw,3.1rem); line-height:1.1; margin:0; max-width:18ch; color:var(--umber); }
.reading h2 em{ font-style:normal; color:var(--peri-deep); }
.reading h2 .lead{ display:block; font-family:var(--title); font-style:normal; font-weight:400; font-size:0.46em; line-height:1.3; letter-spacing:0; color:var(--taupe); margin-bottom:0.6em; max-width:34ch; }
.signal-wrap{ width:100%; max-width:var(--maxw); margin:clamp(20px,3.4vh,32px) 0 clamp(10px,1.6vh,16px); }
canvas#sig{ display:block; width:100%; height:clamp(180px,30vh,280px); }
.readout{ height:1.3em; display:flex; align-items:center; justify-content:center; gap:0.7em; margin-bottom:clamp(14px,2.4vh,22px); opacity:0; transition:opacity .55s ease; }
.readout .dot{ width:5px; height:5px; border-radius:50%; background:var(--peri-deep); }
.readout .name{ font-family:var(--mono); font-size:0.62rem; letter-spacing:0.32em; text-transform:uppercase; color:var(--taupe); }
.reading .sub{ font-family:var(--body); color:var(--taupe); font-size:clamp(0.99rem,1.5vw,1.14rem); line-height:1.62; max-width:52ch; }
.reading .sub em{ font-style:normal; color:var(--umber); font-weight:600; }
.reading .scrollcue{ margin-top:clamp(28px,6vh,52px); }
.reading .scrollcue .bar{ background:linear-gradient(var(--line),transparent); }

/* ============================ THE NORTH STAR (umber · symbolic · #comm) ============================ */
.comm{ background:var(--umber); color:#E9E2DA; padding:clamp(4.5rem,11vh,8rem) var(--pad) clamp(5.5rem,12vh,9rem); text-align:center; display:flex; flex-direction:column; align-items:center; }
.comm > *{ max-width:var(--maxw); }
.comm .eyebrow{ color:var(--peri); margin-bottom:clamp(18px,2.8vh,28px); }
.comm h2{ font-family:var(--title); font-weight:380; letter-spacing:-0.014em; font-size:clamp(1.85rem,4vw,2.95rem); line-height:1.12; margin:0; max-width:18ch; color:#F4ECE3; }
.comm h2 em{ font-style:italic; color:var(--peri); }
.comm .sub{ font-family:var(--body); font-size:clamp(0.99rem,1.5vw,1.16rem); line-height:1.62; max-width:54ch; margin:clamp(1.4rem,3vh,2rem) auto 0; color:rgba(233,226,218,0.74); }
.comm .sub b{ color:#F4ECE3; font-weight:600; }
.comm .sub i{ color:var(--peri); font-style:italic; }
.comm-film-wrap{ position:relative; width:100%; max-width:var(--maxw); height:clamp(360px,58vh,600px); margin:clamp(8rem,14vh,10rem) auto 0; }
canvas#comm{ display:block; position:absolute; left:0; top:-20%; width:100%; height:140%; pointer-events:none; }
.clab{ position:absolute; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.3em; text-transform:uppercase; pointer-events:none; }
.clab.human{ left:0; top:14%; color:#B6A6D6; }
.clab.animal{ left:0; bottom:16%; color:#9FC6CC; }
.clab.bero{ right:0; top:48%; transform:translateY(-50%); color:#ADB6D2; letter-spacing:0.34em; }

/* ============================ THE SCALE (gardenia) ============================ */
.scale{ position:relative; padding:clamp(6rem,14vh,10rem) var(--pad) clamp(6rem,13vh,9rem); }
.scale-inner{ max-width:var(--maxw); margin:0 auto; }
.scale .eyebrow{ margin-bottom:clamp(34px,6vh,58px); }
.scale-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2.4rem,6vw,5.5rem); align-items:start; }
.tally{ display:flex; flex-direction:column; }
.tally-row{ display:flex; align-items:baseline; gap:0.7em; border-bottom:1px solid var(--line); padding:clamp(12px,2vh,18px) 0; }
.tally-row:first-child{ padding-top:0; }
.t-fig{ font-family:var(--title); font-weight:430; letter-spacing:-0.02em; font-size:clamp(2.05rem,4.4vw,3.35rem); line-height:0.98; color:var(--umber); white-space:nowrap; }
.t-lab{ font-family:var(--mono); font-size:clamp(0.62rem,1vw,0.74rem); letter-spacing:0.4em; text-transform:uppercase; color:var(--ink-faint); margin-left:auto; }
.tally-coda{ font-family:var(--title); font-weight:430; font-size:clamp(1.02rem,1.7vw,1.26rem); line-height:1.42; color:var(--taupe); margin:clamp(16px,2.6vh,24px) 0 0; max-width:30ch; }
.scale-state{ display:flex; align-items:flex-end; min-height:100%; }
.scale-quote{ font-family:var(--title); font-weight:380; letter-spacing:-0.01em; font-size:clamp(1.5rem,2.9vw,2.3rem); line-height:1.26; color:var(--umber); margin:0; max-width:24ch; }
.scale-quote .em{ color:var(--peri-deep); }

/* ============================ THE HOUSE (gardenia · quiet trust beat) ============================ */
.house{ background:var(--cream-hi); padding:clamp(4.5rem,11vh,8rem) var(--pad) clamp(5rem,12vh,9rem); }
.house-inner{ max-width:var(--maxw); margin:0 auto; }
.house-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.house .eyebrow{ color:var(--ink-faint); margin-bottom:clamp(18px,3vh,26px); }
.house-title{ font-family:var(--title); font-weight:400; font-size:clamp(1.45rem,3vw,2.2rem); line-height:1.22; letter-spacing:-0.012em; margin:0; max-width:18ch; color:var(--umber); }
.house-title .em{ font-family:"Baumans",var(--title); font-weight:400; letter-spacing:0.02em; text-transform:uppercase; white-space:nowrap; color:var(--umber); }
.house-title .em .amp{ margin:0 0.1em; }
.house-body{ display:flex; flex-direction:column; gap:clamp(18px,3vh,28px); padding-top:clamp(4px,1vh,10px); }
.house .lead{ font-family:var(--body); font-weight:400; font-size:clamp(1rem,1.5vw,1.12rem); line-height:1.62; letter-spacing:0; max-width:46ch; margin:0; color:var(--taupe); }
.house .lead b{ color:var(--umber); font-weight:600; }
.house .meta{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--ink-faint); }

/* ============================ FOOTER (umber · symbolic) ============================ */
.site-footer{ position:relative; display:grid; grid-template-columns:1.08fr 1fr; min-height:clamp(440px,68vh,640px); background:var(--umber); border-top:1px solid var(--line-um); }
.ft-photo{ position:relative; overflow:hidden; background:#0c0a08; }
.ft-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; display:block; filter:saturate(0.98) contrast(1.02); }
.ft-photo::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(34,26,21,0) 60%, rgba(34,26,21,0.66) 100%); }
.ft-panel{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:clamp(16px,2.4vh,26px); padding:clamp(2.4rem,5vw,4.4rem) clamp(2rem,5vw,4.6rem); color:var(--gardenia);
  background:linear-gradient(180deg,var(--umber-2) 0%, var(--umber) 100%); }
.ft-panel::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:220px 220px; opacity:0.05; mix-blend-mode:soft-light; }
.ft-panel > *{ position:relative; z-index:1; }
.ft-eyebrow{ font-family:var(--mono); font-weight:500; font-size:0.66rem; letter-spacing:0.34em; text-transform:uppercase; color:var(--peri); display:flex; align-items:center; gap:0.7em; }
.ft-eyebrow .pip{ width:5px; height:5px; border-radius:50%; background:var(--peri); box-shadow:0 0 0 3px rgba(122,133,184,0.18); }
.ft-invite{ font-family:var(--title); font-weight:380; letter-spacing:-0.01em; font-size:clamp(1.55rem,2.8vw,2.25rem); line-height:1.2; color:#F4ECE3; margin:0; max-width:20ch; }
.ft-invite .nb{ white-space:nowrap; }
.cta-row{ display:flex; align-items:center; gap:clamp(12px,1.4vw,18px); flex-wrap:wrap; margin-top:clamp(4px,1vh,10px); }
.cta{ font-family:var(--body); font-weight:600; font-size:clamp(0.92rem,1.3vw,1.0rem); padding:0.85em 1.5em; border-radius:999px; display:inline-flex; align-items:center; gap:0.55em; white-space:nowrap; transition:transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.cta .ar{ transition:transform .3s ease; }
.cta:hover .ar, .cta:focus-visible .ar{ transform:translateX(4px); }
.cta-primary{ background:var(--gardenia); color:var(--umber); }
.cta-primary:hover, .cta-primary:focus-visible{ transform:translateY(-2px); box-shadow:0 16px 40px -18px rgba(0,0,0,0.6); background:#FBF6EE; }
.cta-ghost{ background:transparent; color:var(--gardenia); border:1px solid rgba(241,233,224,0.26); }
.cta-ghost:hover, .cta-ghost:focus-visible{ border-color:rgba(241,233,224,0.52); background:rgba(241,233,224,0.06); transform:translateY(-2px); }
.f-meta{ font-family:var(--mono); font-size:0.62rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--cobble); display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 1.3rem; margin-top:clamp(8px,1.6vh,16px); }

/* ============================ RESPONSIVE ============================ */
@media (hover:none){ .tile img{ filter:brightness(0.54) saturate(0.92) contrast(1.02); } .tile:hover img{ transform:none; } }
@media (max-width:960px){
  .scale-grid{ grid-template-columns:1fr; gap:clamp(1.8rem,5vh,2.6rem); }
  .scale-state{ align-items:flex-start; }
  .house-grid{ grid-template-columns:1fr; gap:clamp(1.4rem,4vh,2rem); }
  .silence-grid{ grid-template-columns:1fr; min-height:0; }
  .silence-photo{ min-height:82vw; }
  .silence-arg{ padding:clamp(3rem,8vw,4.5rem) clamp(22px,6vw,40px); }
  .silence-arg .inner{ margin-left:0; }
  .source{ min-height:0; flex-direction:column; align-items:stretch; }
  .source .bg{ position:relative; height:48vw; }
  .source .bg::after{ background:linear-gradient(180deg, rgba(241,233,224,0) 55%, rgba(241,233,224,0.96) 100%); }
  .source .copy{ width:auto; margin:0; padding:clamp(1.6rem,5vw,2.4rem) clamp(22px,6vw,40px) clamp(2.4rem,6vw,3rem); }
}
@media (max-width:860px){
  .site-footer{ grid-template-columns:1fr; }
  .ft-photo{ min-height:clamp(220px,38vh,340px); }
  .ft-photo::after{ background:linear-gradient(180deg, rgba(34,26,21,0) 60%, rgba(34,26,21,0.5) 100%); }
}
@media (max-width:760px){
  .hero-collage{ grid-template-columns:repeat(2,1fr); }
  .hero-veil{ background:radial-gradient(82% 48% at 50% 50%, rgba(8,9,12,0.8) 0%, rgba(8,9,12,0.5) 55%, rgba(8,9,12,0.3) 100%), linear-gradient(180deg, rgba(10,11,16,0.78) 0%, rgba(10,11,16,0.28) 16%, rgba(9,8,7,0.28) 84%, rgba(9,8,7,0.82) 100%); }
  .subhero-inner, .house-inner{ align-items:flex-start; }
}
@media (max-width:620px){
  .stat-div{ display:none; }
  .stat-row{ flex-direction:column; gap:clamp(26px,5vh,40px); }
}
@media (max-width:560px){
  .cta-row{ flex-direction:column; width:100%; align-items:stretch; } .cta{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }


/* Footer — Company link column (Privacy; room for Terms/Cookie) */
.ft-links{display:flex; flex-direction:column; gap:10px}
.ft-links ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.ft-links a{font-family:Manrope,system-ui,sans-serif; font-size:14px; line-height:1.2; color:var(--gardenia); opacity:.82; text-decoration:none; width:fit-content; transition:color .18s, opacity .18s}
.ft-links a:hover{color:var(--peri); opacity:1}