/* ==========================================================================
   KĀFFI GALLE FORT — main.css
   Rebuilt to the shared Kāffi design system used by Colombo, Ahangama and
   Arugam Bay: the same three families, rule-led eyebrows, full-bleed dark
   photography, rectangles, pill CTAs, a scroll rail, and saturated bands.

   Galle Fort's own colour is Fort Brown, sampled from logo.jpg (#4D3119).
   No inline styles anywhere: the CSP is style-src 'self' with no
   unsafe-inline, so an inline style= breaks the page in production.
   ========================================================================== */

/* --- fonts: Familjen Grotesk · Inter Tight · Martian Mono SemiExpanded ---------
   The macron in "Kāffi" lives in latin-ext, so display and body each split by
   unicode-range. Martian Mono has no ext cut — QC rule 24 blocks labels that
   contain "Kāffi" so the wordmark never falls back mid-word.                */
@font-face{font-family:'Familjen Grotesk';src:url(fonts/d7.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2013-2026,U+00A9,U+00D7,U+2192}
@font-face{font-family:'Familjen Grotesk';src:url(fonts/d7x.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-017F}
@font-face{font-family:'Inter Tight';src:url(fonts/b4.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2013-2026,U+00A9,U+00D7,U+2192}
@font-face{font-family:'Inter Tight';src:url(fonts/b4x.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-017F}
@font-face{font-family:'Inter Tight';src:url(fonts/b6.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2013-2026,U+00A9,U+00D7,U+2192}
@font-face{font-family:'Inter Tight';src:url(fonts/b6x.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-017F}
@font-face{font-family:'Martian Mono SemiExpanded';src:url(fonts/m4.woff2) format('woff2');font-weight:400;font-style:normal;font-stretch:112.5%;font-display:swap}
@font-face{font-family:'Martian Mono SemiExpanded';src:url(fonts/m5.woff2) format('woff2');font-weight:500;font-style:normal;font-stretch:112.5%;font-display:swap}

/* --- tokens -------------------------------------------------------------- */
:root{
  --paper:#F6EFE4;
  --paper2:#EFE5D6;
  --cream2:#E6D7C2;
  --brown:#4D3119;   /* THE LOGO, measured */
  --dark:#2B1B0F;    /* hero and heavy bands */
  --darker:#1C1109;  /* footer */
  --ink:#17120E;
  --ink2:#3B3128;
  --ochre:#E8A63F;
  --ochrelt:#F2C173;
  --terra:#A8481F;
  --terratx:#9A3F1C;

  --bg:var(--paper);--fg:var(--ink);--fg2:var(--ink2);--acc:var(--terratx);
  --rule:rgba(23,18,14,.14);

  /* Typography roles — one stack, referenced everywhere below. */
  --font-display:'Familjen Grotesk',Helvetica,Arial,sans-serif;
  --font-body:'Inter Tight',Helvetica,Arial,sans-serif;
  --font-label:'Martian Mono SemiExpanded',ui-monospace,SFMono-Regular,monospace;
  --weight-display:700;
  --weight-body:400;
  --weight-emphasis:600;
  --weight-label:400;
  --weight-label-strong:500;

  --wrap:1260px;
  --gut:clamp(1.15rem,4vw,3.25rem);
  --sect:clamp(4rem,8vw,8rem);

  --h1:clamp(2.9rem,8.4vw,7.4rem);
  --h2:clamp(2.1rem,5vw,4.6rem);
  --h3:clamp(1.2rem,1.9vw,1.6rem);
  --big:clamp(3.2rem,11vw,9rem);
  --num:clamp(2.6rem,5.6vw,5.2rem);
  --lede:clamp(1.02rem,1.35vw,1.24rem);

  --e:cubic-bezier(.22,1,.36,1);
  --curtain:cubic-bezier(.65,0,.35,1);
  --r:10px;
}

/* --- reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-weight:var(--weight-body);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word;-webkit-tap-highlight-color:transparent}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--ochre);outline-offset:3px;border-radius:3px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--dark);color:var(--paper);padding:.85rem 1.25rem;font-family:var(--font-body);font-weight:var(--weight-emphasis)}
.skip:focus{left:.5rem;top:.5rem}

/* --- type ---------------------------------------------------------------- */
h1,h2,h3,h4,.big{font-family:var(--font-display);font-weight:var(--weight-display);letter-spacing:-.03em}
h1{font-size:var(--h1);line-height:1.0}
h2{font-size:var(--h2);line-height:1.04}
h3{font-size:var(--h3);line-height:1.2;letter-spacing:-.015em}
h4{font-size:1.02rem;line-height:1.3;letter-spacing:-.01em;font-family:var(--font-display);font-weight:var(--weight-display)}
.big{font-size:var(--big);line-height:.92;font-weight:var(--weight-display);text-transform:uppercase;letter-spacing:-.035em}
.lede{font-size:var(--lede);line-height:1.55;color:var(--fg2);max-inline-size:46ch}
.prose{margin-top:1.1rem}
.prose p{color:var(--fg2);max-inline-size:60ch}
.prose p+p{margin-top:.85rem}
.prose em{font-style:italic}
.mt-s{margin-top:.6rem}.mt-m{margin-top:1.3rem}.mt-l{margin-top:2.2rem}
.measure{max-inline-size:15ch}

/* the rule-led eyebrow — the strongest shared signature in the family */
.eb{display:flex;align-items:flex-start;gap:.85rem;font-family:var(--font-label);
  font-size:.68rem;font-weight:var(--weight-label-strong);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
/* If a long label does wrap, the rule aligns to the first line and the
   continuation hangs under the text rather than under the rule. */
.eb::before{content:"";width:clamp(26px,3vw,42px);height:2px;background:currentColor;
  flex:0 0 auto;margin-top:.62em}

/* --- layout -------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.band{padding-block:var(--sect);background:var(--bg);color:var(--fg);position:relative}
.shead{display:grid;gap:1.2rem;margin-bottom:clamp(2rem,4vw,3.4rem)}
.shead .eb{margin-bottom:1rem}
.split{display:grid;gap:clamp(1.6rem,3.5vw,3.2rem);align-items:center}
.grid{display:grid;gap:clamp(1rem,1.8vw,1.5rem)}

.b-paper{--bg:var(--paper);--fg:var(--ink);--fg2:var(--ink2);--acc:var(--terratx);--rule:rgba(23,18,14,.14)}
.b-paper2{--bg:var(--paper2);--fg:var(--ink);--fg2:var(--ink2);--acc:var(--terratx);--rule:rgba(23,18,14,.14)}
.b-cream{--bg:var(--cream2);--fg:var(--ink);--fg2:var(--ink2);--acc:var(--terratx);--rule:rgba(23,18,14,.16)}
.b-brown{--bg:var(--brown);--fg:var(--paper);--fg2:var(--cream2);--acc:var(--ochre);--rule:rgba(246,239,228,.22)}
.b-dark{--bg:var(--dark);--fg:var(--paper);--fg2:var(--cream2);--acc:var(--ochre);--rule:rgba(246,239,228,.2)}
.b-darker{--bg:var(--darker);--fg:var(--paper);--fg2:var(--cream2);--acc:var(--ochre);--rule:rgba(246,239,228,.2)}
.b-terra{--bg:var(--terra);--fg:#fff;--fg2:#FDF1EA;--acc:#fff;--rule:rgba(255,255,255,.3)}
.b-ochre{--bg:var(--ochre);--fg:var(--ink);--fg2:#4A3413;--acc:var(--dark);--rule:rgba(23,18,14,.28)}

/* --- buttons ------------------------------------------------------------- */
.btns{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.9rem}
.btn{--bb:transparent;--bf:var(--fg);--bd:var(--fg);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.8rem 1.6rem;border:1.5px solid var(--bd);background:var(--bb);color:var(--bf);
  font-family:var(--font-body);font-weight:var(--weight-emphasis);font-size:.95rem;text-decoration:none;border-radius:999px;
  transition:transform .26s var(--e),background-color .26s var(--e),color .26s var(--e),border-color .26s var(--e)}
.btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.btn-primary{--bb:var(--brown);--bf:var(--paper);--bd:var(--brown)}
.btn-fill{--bb:var(--brown);--bf:var(--paper);--bd:var(--brown)}
.btn-cream{--bb:var(--paper);--bf:var(--dark);--bd:var(--paper)}
/* Explicit cream pill for primary actions on dark surfaces (sticky bar, drawer). */
.btn-dark-surface{
  --bb:#F6EFE4;--bf:#2B1B0F;--bd:#F6EFE4;
  background-color:#F6EFE4;color:#2B1B0F;border-color:#F6EFE4;opacity:1}
.btn-dark-surface:visited{color:#2B1B0F;--bf:#2B1B0F;background-color:#F6EFE4}
.btn-dark-surface svg{color:inherit;stroke:currentColor;fill:none}
.btn-dark-surface:hover{
  --bb:#E6D7C2;--bf:#2B1B0F;--bd:#E6D7C2;
  background-color:#E6D7C2;color:#2B1B0F;filter:none;transform:none}
.btn-dark-surface:active{--bb:#E6D7C2;background-color:#E6D7C2;transform:none}
.btn-ink{--bb:var(--ink);--bf:var(--paper);--bd:var(--ink)}
.btn-ochre{--bb:var(--ochre);--bf:var(--dark);--bd:var(--ochre)}
.btn-line{--bb:transparent}
.btn-sm{min-height:46px;padding:.55rem 1.2rem;font-size:.88rem}
.btn:hover{transform:translateY(-2px)}
.btn-line:hover{--bb:var(--fg);--bf:var(--bg)}
.btn-fill:hover,.btn-primary:hover,.btn-cream:hover,.btn-ink:hover,.btn-ochre:hover{filter:brightness(1.1)}

.arrow{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-family:var(--font-body);font-weight:var(--weight-emphasis);font-size:.95rem;
  color:var(--fg);text-decoration:none;border-bottom:2px solid var(--acc);align-self:flex-start}
.arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--e)}
.arrow:hover svg{transform:translateX(5px)}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.tag{display:inline-flex;align-items:center;min-height:40px;padding:.4rem 1rem;border:1px solid var(--rule);
  border-radius:999px;font-family:var(--font-label);font-size:.68rem;font-weight:var(--weight-label);letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
.tag-no{border-style:dashed}

/* --- scroll rail: the thin accent line the siblings all carry ------------ */
.rail{position:fixed;top:0;left:0;height:3px;width:0;background:var(--ochre);z-index:200;transition:width .08s linear}

/* --- header -------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:120;background:var(--paper);border-bottom:1px solid rgba(23,18,14,.08)}
.hdr-in{max-width:var(--wrap);margin-inline:auto;padding:.75rem var(--gut);display:flex;align-items:center;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand-mk{width:44px;height:44px;display:grid;place-items:center;background:var(--brown);border-radius:10px;flex:0 0 auto}
.brand-mk svg{width:24px;height:24px;color:var(--paper)}
.brand-tx{display:flex;flex-direction:column;line-height:1}
.brand-tx b{font-family:var(--font-display);font-weight:var(--weight-display);font-size:1.16rem;letter-spacing:-.025em}
.brand-tx span{font-family:var(--font-label);font-weight:var(--weight-label-strong);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--terratx);margin-top:.34rem}
.nav{display:none;margin-left:auto;gap:.1rem}
.nav a{position:relative;padding:.6rem .75rem;font-family:var(--font-body);font-size:.93rem;font-weight:var(--weight-emphasis);text-decoration:none;color:var(--ink2);border-radius:8px}
.nav a:hover{color:var(--ink)}
.nav a[aria-current=page]{color:var(--ink);font-weight:var(--weight-emphasis)}
.nav a[aria-current=page]::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:.3rem;height:2px;background:var(--terra)}
.hdr .btn{display:none;flex:0 0 auto}
.burger{margin-left:auto;width:46px;height:46px;display:grid;place-items:center;border:1.5px solid rgba(23,18,14,.18);border-radius:10px}
.burger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* --- drawer -------------------------------------------------------------- */
.drawer{position:fixed;inset:0;z-index:300;background:var(--dark);color:var(--paper);
  padding:.75rem var(--gut) calc(2rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;
  transform:translateY(-100%);visibility:hidden;
  transition:transform .5s var(--curtain),visibility 0s linear .5s;overflow-y:auto}
.drawer.open{transform:translateY(0);visibility:visible;transition:transform .5s var(--curtain),visibility 0s}
.drawer .brand{color:var(--paper)}
.drawer .brand-mk{background:var(--paper)}
.drawer .brand-mk svg{color:var(--brown)}
.drawer .brand-tx span{color:var(--ochre)}
.drawer .burger{border-color:rgba(246,239,228,.32)}
.drawer-top{display:flex;align-items:center;justify-content:space-between}
.drawer nav{margin-top:2rem;display:flex;flex-direction:column;flex:1 1 auto}
.drawer nav a{font-family:var(--font-display);display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.5rem 0;
  border-bottom:1px solid rgba(246,239,228,.15);font-weight:var(--weight-display);font-size:clamp(1.8rem,7.5vw,2.6rem);
  line-height:1.15;letter-spacing:-.03em;text-decoration:none}
.drawer nav a span{font-family:var(--font-label);font-weight:var(--weight-label-strong);font-size:.64rem;letter-spacing:.12em;color:var(--ochre)}
.drawer .btns{margin-top:1.6rem}
.drawer .btn{flex:1 1 200px}
.drawer .btn-line{--bd:rgba(246,239,228,.55);--bf:var(--paper)}
.drawer .btn-line:hover{--bb:rgba(246,239,228,.14);--bf:var(--paper)}
.drawer nav a[aria-current=page]{color:var(--ochre)}

/* --- splash: cream field, one enormous mark, the rule, the eyebrow ------- */
.splash{position:fixed;inset:0;z-index:500;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;
  transform:translateY(0);transition:transform .6s var(--curtain)}
.splash svg{width:clamp(120px,26vw,290px);height:auto;color:var(--brown);animation:sp 1.9s var(--e) forwards}
.splash-r{width:clamp(90px,14vw,150px);height:3px;background:var(--ochre)}
.splash p{font-family:var(--font-label);font-size:clamp(.56rem,1.25vw,.7rem);font-weight:var(--weight-label-strong);
  letter-spacing:.18em;text-transform:uppercase;color:var(--brown);text-align:center;padding-inline:1.5rem}
@keyframes sp{from{transform:scale(.97);opacity:.8}to{transform:scale(1);opacity:1}}
.splash.lift{transform:translateY(-100%);pointer-events:none}

/* --- hero: full-bleed dark photograph, white type across it -------------- */
.hero{--fg:var(--paper);--fg2:var(--cream2);--acc:var(--ochre);--rule:rgba(246,239,228,.3);
  position:relative;min-height:clamp(560px,86vh,860px);display:flex;align-items:flex-end;
  padding-block:clamp(3rem,9vw,7rem);background:var(--dark);color:var(--paper);overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;
  /* Two layers, not one: the horizontal scrim alone left the bottom-left over a
     sunlit patch of grass and the meta row measured 2.0:1 on real pixels. */
  background:
    linear-gradient(to top,rgba(20,12,6,.95) 0%,rgba(20,12,6,.80) 30%,rgba(20,12,6,.30) 72%,rgba(20,12,6,.18) 100%),
    linear-gradient(100deg,rgba(20,12,6,.92) 0%,rgba(20,12,6,.80) 38%,rgba(20,12,6,.40) 72%,rgba(20,12,6,.26) 100%)}
.hero .wrap{position:relative;z-index:1}
.hero .eb{color:var(--ochre)}
.hero h1{margin:1.1rem 0 1.3rem;max-inline-size:16ch}
.hero .lede{color:var(--cream2);max-inline-size:42ch}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem;margin-top:2.2rem;
  font-family:var(--font-label);font-size:.66rem;font-weight:var(--weight-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--cream2)}
.hero-meta span{display:inline-flex;align-items:center;gap:.55rem}
.hero-meta span+span::before{content:"";width:1px;height:14px;background:rgba(246,239,228,.4)}
.hero-meta i{font-style:normal;color:var(--ochre)}
.hero-meta a{color:var(--paper);text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}

/* --- media --------------------------------------------------------------- */
.ph{width:100%;border-radius:var(--r);overflow:hidden}
.ph img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s var(--e)}
.ph-w img{aspect-ratio:3/2}
.ph-s img{aspect-ratio:1/1}
.strip{width:100%;height:clamp(230px,40vw,520px);object-fit:cover}
.bleed{position:relative;overflow:hidden;display:flex;align-items:flex-end;
  min-height:clamp(300px,44vw,600px)}
.bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bleed::after{content:"";position:absolute;inset:0;
  /* the eyebrow sits high enough to clear the old scrim and landed on sunlit
     whitewash at 1.67:1 — measured, not guessed */
  background:linear-gradient(to top,rgba(20,12,6,.95) 0%,rgba(20,12,6,.88) 26%,
    rgba(20,12,6,.58) 50%,rgba(20,12,6,.12) 86%)}
.bleed .wrap{position:relative;z-index:1;padding-bottom:clamp(1.6rem,3vw,3rem);color:var(--paper)}
.bleed .eb{color:var(--ochre)}
.bleed b{display:block;margin-top:.6rem;font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:clamp(2.8rem,10vw,8rem);line-height:.88;letter-spacing:-.04em;text-transform:uppercase}
.bleed p{margin-top:.7rem;color:var(--cream2);max-inline-size:38ch}

/* overlay card: photo, scrim, title and link sitting on it */
.ocard{position:relative;display:block;border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--paper)}
.ocard img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .65s var(--e)}
.ocard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(28,17,9,.9) 0%,rgba(28,17,9,.45) 45%,rgba(28,17,9,.12) 100%)}
.ocard-b{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(1.1rem,2vw,1.8rem)}
.ocard-b p{margin-top:.45rem;font-size:.95rem;color:var(--cream2);max-inline-size:34ch}
.ocard-b .arrow{margin-top:.9rem;color:var(--paper);border-color:var(--ochre)}
.ocard:hover img{transform:scale(1.05)}

/* the giant-word split band: two photographs, one word each */
.words{display:grid;grid-template-columns:1fr;gap:2px}
.word{position:relative;overflow:hidden;min-height:clamp(230px,32vw,420px);display:flex;align-items:flex-end}
.word img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.word::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(28,17,9,.88),rgba(28,17,9,.22))}
.word-b{position:relative;z-index:1;padding:clamp(1.2rem,2.4vw,2.2rem);color:var(--paper)}
.word-b b{display:block;font-family:var(--font-display);font-size:clamp(2.6rem,7vw,5.6rem);font-weight:var(--weight-display);line-height:.9;
  letter-spacing:-.035em;text-transform:uppercase}
.word-b span{display:block;margin-top:.5rem;font-size:.95rem;color:var(--cream2)}

/* numbered case grid: image, then a caption bar under it */
.cases{display:grid;grid-template-columns:1fr;gap:clamp(1rem,1.6vw,1.4rem)}
.case{border-radius:var(--r);overflow:hidden;background:var(--paper);
  transition:transform .4s var(--e)}
.case:hover{transform:translateY(-4px)}
.case img{transition:transform .6s var(--e)}
.case:hover img{transform:scale(1.04)}
.case img{width:100%;aspect-ratio:16/10;object-fit:cover}
.case-b{display:flex;align-items:baseline;gap:.85rem;padding:.9rem 1.1rem;background:var(--paper)}
.case-b i{font-style:normal;font-family:var(--font-label);font-size:.68rem;font-weight:var(--weight-label-strong);letter-spacing:.08em;color:var(--terra)}
.case-b b{font-family:var(--font-body);font-size:1rem;font-weight:var(--weight-emphasis);letter-spacing:-.01em;color:var(--ink)}

/* --- marquee ------------------------------------------------------------- */
.marqband{padding-block:clamp(1.4rem,2.6vw,2.4rem);overflow:hidden;background:var(--bg);color:var(--fg)}
.marq{overflow:hidden;padding-block:.3rem}
.marq-row{display:flex;width:max-content;will-change:transform;align-items:center}
.marq-i{font-family:var(--font-display);font-size:clamp(2.1rem,5.4vw,4.4rem);font-weight:var(--weight-display);line-height:1.1;letter-spacing:-.03em;
  padding-inline:clamp(.7rem,1.6vw,1.4rem);white-space:nowrap}
.marq-i:nth-child(even){color:var(--ochre)}
.marq-d{padding-inline:.2rem;color:var(--acc);opacity:.65;font-size:clamp(1.6rem,3.4vw,2.6rem)}

/* --- stats --------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.4vw,2rem)}
.stat{padding-left:1.1rem;border-left:2px solid var(--acc)}
.stat b{display:block;font-family:var(--font-display);font-size:var(--num);line-height:.95;font-weight:var(--weight-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:.45rem;font-family:var(--font-label);font-size:.64rem;font-weight:var(--weight-label-strong);letter-spacing:.13em;text-transform:uppercase;color:var(--fg2)}

/* --- feature list -------------------------------------------------------- */
.feats{display:grid;grid-template-columns:1fr;gap:0}
.feat{padding:1.3rem 0;border-top:1px solid var(--rule)}
.feat h4{display:flex;align-items:center;gap:.6rem;color:var(--acc)}
.feat h4 svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.feat p{margin-top:.45rem;font-size:.95rem;color:var(--fg2);max-inline-size:42ch}

/* --- steps / rows -------------------------------------------------------- */
.steps{display:grid;gap:1.3rem}
.step{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;padding-bottom:1.3rem;border-bottom:1px solid var(--rule)}
.step:last-child{border-bottom:0;padding-bottom:0}
.step b{font-family:var(--font-label);font-size:1.05rem;font-weight:var(--weight-label-strong);color:var(--acc);line-height:1.2}
.step h4{font-family:var(--font-body);font-weight:var(--weight-emphasis)}
.step p{color:var(--fg2);font-size:.96rem;margin-top:.25rem}
.rows{display:grid}
.row{display:grid;grid-template-columns:1fr;gap:.15rem;padding-block:.95rem;border-bottom:1px solid var(--rule)}
.row:last-child{border-bottom:0}
.row .u{font-family:var(--font-label);font-size:.64rem;font-weight:var(--weight-label-strong);letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.row .v{font-family:var(--font-body);font-size:1rem;font-weight:var(--weight-body);color:var(--fg)}
.row a{display:inline-flex;align-items:center;min-height:44px;color:var(--fg);text-underline-offset:4px}

/* --- menu list ----------------------------------------------------------- */
.mlist{display:grid;margin-top:1.1rem}
.mitem{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-block:.75rem;border-bottom:1px solid var(--rule)}
.mitem:last-child{border-bottom:0}
.mitem b{font-size:1.05rem;font-weight:var(--weight-emphasis);letter-spacing:-.01em}
.mnote{margin-top:1.3rem;padding:1rem 1.15rem;border-left:3px solid var(--terra);background:var(--paper2);font-size:.93rem;color:var(--ink2)}

/* --- tabs ---------------------------------------------------------------- */
.tabs{margin-bottom:2rem}
.tablist{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;scrollbar-width:none}
.tablist::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;scroll-snap-align:start;min-height:48px;padding:.65rem 1.25rem;border:1.5px solid var(--rule);
  border-radius:999px;white-space:nowrap;font-family:var(--font-body);font-weight:var(--weight-emphasis);font-size:.9rem;color:var(--ink2);
  transition:background-color .22s,color .22s,border-color .22s}
.tab:hover{border-color:var(--ink)}
.tab[aria-selected=true]{background:var(--brown);border-color:var(--brown);color:var(--paper)}
.panel[hidden]{display:none}
.panel-grid{display:grid;gap:clamp(1.5rem,3vw,2.6rem);align-items:start}

/* --- reviews ------------------------------------------------------------- */
.rev-top{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem;margin-bottom:1.8rem}
.rev-top b{font-family:var(--font-display);font-size:var(--num);font-weight:var(--weight-display);line-height:1;letter-spacing:-.04em}
.rev-top p{font-size:.9rem;color:var(--fg2)}
.stars{display:inline-flex;gap:3px}
.stars svg{width:17px;height:17px;fill:var(--ochre)}
.revq{border-top:2px solid var(--rule);padding-top:1rem}
.revq blockquote{font-size:clamp(1.08rem,1.5vw,1.3rem);font-weight:var(--weight-emphasis);line-height:1.35;letter-spacing:-.015em}
.revq-lead{grid-column:1/-1;border-top-width:3px;border-top-color:var(--acc)}
.revq-lead blockquote{font-family:var(--font-display);font-weight:var(--weight-display);letter-spacing:-.03em;
  font-size:clamp(1.6rem,3.6vw,3.1rem);line-height:1.08;max-inline-size:20ch}
.revq figcaption{margin-top:.7rem;font-family:var(--font-label);font-size:.64rem;font-weight:var(--weight-label-strong);letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}

/* --- map facade ---------------------------------------------------------- */
.mapf{position:relative;background:var(--paper2);border-radius:var(--r);min-height:clamp(300px,42vw,440px);
  display:grid;place-items:center;padding:2rem;overflow:hidden}
.mapf-in{position:relative;z-index:1;text-align:center;max-width:34ch}
.mapf-in p{color:var(--ink2);font-size:.95rem}
.mapf .btns{justify-content:center}
.mapf iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- video --------------------------------------------------------------- */
.vid{position:relative;border-radius:var(--r);background:var(--darker);overflow:hidden}
.vid video,.vid img{width:100%;aspect-ratio:9/16;object-fit:cover}
.vid-ctl{position:absolute;left:1rem;bottom:1rem;display:flex;gap:.5rem;z-index:2}
.vid-ctl button{width:48px;height:48px;display:grid;place-items:center;border-radius:999px;
  background:rgba(28,17,9,.85);color:var(--paper);border:1px solid rgba(246,239,228,.4)}
.vid-ctl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vid-fb{position:absolute;left:0;right:0;bottom:0;margin:0;padding:1rem 1.2rem;
  background:rgba(28,17,9,.88);color:var(--paper);font-size:.92rem;text-align:center}

/* --- dwell --------------------------------------------------------------- */
.dwell{margin-top:1.8rem}
.dwell-bar{height:8px;background:rgba(246,239,228,.2);border-radius:999px;overflow:hidden}
.dwell-fill{height:100%;width:0;background:var(--ochre);transition:width .18s linear}
.dwell-lb{display:flex;justify-content:space-between;margin-top:.55rem;font-family:var(--font-label);
  font-size:.64rem;font-weight:var(--weight-label-strong);letter-spacing:.1em;text-transform:uppercase;color:var(--fg2)}

/* --- cta ----------------------------------------------------------------- */
.cta-grid{display:grid;gap:clamp(1.6rem,3vw,2.8rem)}
.cta-side{border-top:1px solid var(--rule);padding-top:1.2rem}

/* --- footer -------------------------------------------------------------- */
.foot{background:var(--darker);color:var(--paper);padding-block:clamp(3rem,6vw,5rem) 2rem;
  --fg:var(--paper);--fg2:var(--cream2);--acc:var(--ochre);--rule:rgba(246,239,228,.18)}
.foot-grid{display:grid;gap:2.2rem}
.foot-mk{width:104px;height:auto;color:var(--paper)}
.foot p{color:var(--cream2);font-size:.94rem}
.foot h4{font-family:var(--font-label);font-size:.64rem;font-weight:var(--weight-label-strong);letter-spacing:.12em;text-transform:uppercase;color:var(--ochre);margin-bottom:.8rem}
.foot li a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-body);font-size:.95rem;color:#EFE3D2;text-decoration:none}
.foot li a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:4px}
.foot-end{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid rgba(246,239,228,.16);
  display:grid;gap:.4rem;font-size:.82rem;color:#D9C9B4}
.foot-end a{color:var(--ochre)}

/* --- story: Norwegian roots (editorial 44/56) ----------------------------- */
.story-roots-in{display:grid;gap:clamp(1.2rem,2.5vw,2rem)}
.story-roots-fig{margin:0}
.story-roots-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.cap{margin-top:.65rem;font-family:var(--font-label);font-size:.64rem;font-weight:var(--weight-label);letter-spacing:.06em;color:var(--fg2)}

/* --- sticky mobile bar --------------------------------------------------- */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:150;display:flex;gap:.55rem;
  padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
  background:var(--dark);border-top:1px solid rgba(246,239,228,.18)}
.stick .btn{flex:1 1 0;min-height:48px;padding:.65rem .85rem;font-size:.88rem}
.stick .btn-line{--bb:transparent;--bd:rgba(246,239,228,.55);--bf:var(--paper)}
.stick .btn-line:visited{--bf:var(--paper)}
.stick .btn-line:hover{--bb:rgba(246,239,228,.12);--bf:var(--paper);transform:none}
.stick .btn-line:active{--bb:rgba(246,239,228,.18);transform:none}
.stick .btn:focus-visible{outline-color:var(--ochre);outline-offset:2px}
body{padding-bottom:calc(4.85rem + env(safe-area-inset-bottom))}

/* Dark bands: primary actions read as cream pills, not invisible outlines. */
.b-dark .btn-primary,.b-brown .btn-primary,.b-darker .btn-primary,.b-terra .btn-primary{
  --bb:var(--paper);--bf:var(--dark);--bd:var(--paper)}
.b-terra .btn-primary{--bf:var(--ink)}

/* --- motion -------------------------------------------------------------- */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .6s var(--e),transform .6s var(--e)}
.rv.in{opacity:1;transform:none}

/* --- breakpoints --------------------------------------------------------- */
@media (max-width:420px){
  /* Martian Mono SemiExpanded is wide; the longest eyebrow orphaned its last
     word at 375px. Size comes down, tracking stays at .16em to match the
     sibling sites. */
  .hero .eb{font-size:.55rem}
}
@media (max-width:639px){
  .btns > .btn{flex:1 1 100%}
  /* a divider that lands at the start of a wrapped line reads as a stray mark */
  .hero-meta{gap:.35rem 1rem}
  .hero-meta span+span::before{display:none}
}
@media (min-width:480px){
  .hdr .btn{display:inline-flex}
  .stats{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:720px){
  .shead{grid-template-columns:1.25fr 1fr;align-items:end;gap:2.4rem}
  .g2{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
  .words{grid-template-columns:1fr 1fr}
  .cases{grid-template-columns:repeat(2,1fr)}
  .feats{grid-template-columns:1fr 1fr;column-gap:2.4rem}
  .row{grid-template-columns:150px 1fr;gap:1rem;align-items:baseline}
  .panel-grid{grid-template-columns:1.1fr .9fr}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr}
  .foot-end{grid-template-columns:1fr auto;align-items:center}
  .vid video,.vid img{aspect-ratio:16/9}
}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split.flip > *:first-child{order:2}
  .split.wide{grid-template-columns:1.12fr .88fr;align-items:start}
  .story-roots-in{grid-template-columns:44fr 56fr;column-gap:clamp(1.6rem,3.5vw,3.2rem);align-items:start}
  .story-roots-fig{grid-column:1;grid-row:1/span 12}
  .story-roots-in > .eb,.story-roots-in > h2,.story-roots-in > .prose{grid-column:2}
  .cta-grid{grid-template-columns:1.2fr .8fr;align-items:start}
  .cta-side{border-top:0;border-left:1px solid var(--rule);padding:0 0 0 2.2rem}
  .cases-4{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1024px){
  .nav{display:flex}
  .burger{display:none}
  .stick{display:none}
  body{padding-bottom:0}
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
}

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .rv{opacity:1!important;transform:none!important}
  .marq-row{transform:none!important;width:100%;flex-wrap:wrap;justify-content:center}
  .splash{display:none!important}
  .ocard:hover img,.ph img{transform:none}
}
@media print{ .hdr,.drawer,.stick,.splash,.marqband,.vid,.rail{display:none!important} body{padding-bottom:0;background:#fff;color:#000} }