/* =============================================================
   ASTOR MARKHOR  ·  Hunting Experts Pakistan
   Alternating dark / light bands. The switch inverts the rhythm.
   ============================================================= */

:root{
  --shell:min(1300px, 100% - 3rem);
  /* ONE family across the whole page. Hierarchy comes from optical size,
     weight, case and letterspacing, never from a second typeface. */
  --f: "Barlow Condensed", "Arial Narrow", Helvetica, sans-serif;
  --f-d:var(--f); --f-l:var(--f); --f-b:var(--f);
  --e:cubic-bezier(.22,.61,.36,1);

  /* --- INK BAND (dark) --- */
  --ink-bg:#0B120E;      --ink-bg2:#111C16;   --ink-panel:rgba(240,235,222,.045);
  --ink-tx:#F2EDE1;      --ink-tx2:rgba(242,237,225,.86);  --ink-tx3:rgba(242,237,225,.62);
  --ink-line:rgba(242,237,225,.22);  --ink-line2:rgba(242,237,225,.12);
  --ink-brand:#DDBD9C;
  --ink-mark:#D3A140;   /* single-series mark, 8.1:1 on ink */
  --ink-cold:#4A9BD6;   /* annotation zone, 6.3:1 on ink */

  /* --- PAPER BAND (light) --- */
  --pap-bg:#F7F3EA;      --pap-bg2:#EFE9DA;   --pap-panel:rgba(20,26,22,.028);
  --pap-tx:#12180F;      --pap-tx2:rgba(18,24,15,.84);     --pap-tx3:rgba(18,24,15,.62);
  --pap-line:rgba(18,24,15,.16);     --pap-line2:rgba(18,24,15,.08);
  --pap-brand:#6E5A46;
  --pap-mark:#9A6F16;    /* validated data mark on light */
  --pap-cold:#2E7BB0;    /* validated diverging pole on light */
}

/* Band tones. data-theme="a" = odd sections dark. "b" inverts everything. */
.band--1{--bg:var(--ink-bg);--bg2:var(--ink-bg2);--panel:var(--ink-panel);--tx:var(--ink-tx);--tx2:var(--ink-tx2);--tx3:var(--ink-tx3);--line:var(--ink-line);--line2:var(--ink-line2);--brand:var(--ink-brand);--mark:var(--ink-mark);--cold:var(--ink-cold)}
.band--2{--bg:var(--pap-bg);--bg2:var(--pap-bg2);--panel:var(--pap-panel);--tx:var(--pap-tx);--tx2:var(--pap-tx2);--tx3:var(--pap-tx3);--line:var(--pap-line);--line2:var(--pap-line2);--brand:var(--pap-brand);--mark:var(--pap-mark);--cold:var(--pap-cold)}
html[data-theme="b"] .band--1{--bg:var(--pap-bg);--bg2:var(--pap-bg2);--panel:var(--pap-panel);--tx:var(--pap-tx);--tx2:var(--pap-tx2);--tx3:var(--pap-tx3);--line:var(--pap-line);--line2:var(--pap-line2);--brand:var(--pap-brand);--mark:var(--pap-mark);--cold:var(--pap-cold)}
html[data-theme="b"] .band--2{--bg:var(--ink-bg);--bg2:var(--ink-bg2);--panel:var(--ink-panel);--tx:var(--ink-tx);--tx2:var(--ink-tx2);--tx3:var(--ink-tx3);--line:var(--ink-line);--line2:var(--ink-line2);--brand:var(--ink-brand);--mark:var(--ink-mark);--cold:var(--ink-cold)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:4.5rem}
body{
  margin:0; background:var(--ink-bg); color:var(--ink-tx);
  font-family:var(--f-b); font-size:19px; line-height:1.55; font-weight:400; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
.shell{width:var(--shell); margin-inline:auto; position:relative}
::selection{background:var(--ink-brand); color:#0B120E}

.band{background:var(--bg); color:var(--tx); transition:background .5s var(--e), color .5s var(--e)}
.sec{padding-block:clamp(3.2rem,6vw,5.2rem)}

/* ---------- HEADER ---------- */
.hdr{position:fixed; inset:0 0 auto 0; z-index:100; padding-block:.4rem;
  transition:background .35s var(--e), border-color .35s var(--e); border-bottom:1px solid transparent}
.hdr.stuck{backdrop-filter:blur(14px)}
/* the bar follows the BAND it is sitting over, not the theme, so text and
   background can never disagree (this is what made the menu unreadable) */
.hdr.stuck.on-ink{background:color-mix(in srgb, var(--ink-bg) 92%, transparent); border-bottom-color:rgba(242,237,225,.1)}
.hdr.stuck.on-paper{background:color-mix(in srgb, var(--pap-bg) 94%, transparent); border-bottom-color:rgba(18,24,15,.12)}
/* Three columns: nav left, wordmark dead centre, nav and CTA right. The
   centre column is auto width and the two side columns share what is left,
   so the logo stays optically centred whatever the links say. */
.hdr .shell{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(1rem,2.5vw,2.4rem); min-height:4.6rem}

.brand{grid-column:2; grid-row:1; justify-self:center; display:block; line-height:0}
/* OPTION A, the wordmark. To switch to the stacked lockup: point the two
   <img> tags at lock-light.webp / lock-dark.webp, set this height to
   clamp(68px,7vw,104px), the bar min-height to 8rem and the phone
   .brand img height to 52px. Both asset sets ship in images/logo/. */
.brand img{height:clamp(30px,2.7vw,42px); width:auto; display:block}
.hdr.on-paper .brand .lg-a{display:none} .hdr.on-paper .brand .lg-b{display:block}
.hdr.on-ink   .brand .lg-b{display:none} .hdr.on-ink   .brand .lg-a{display:block}

.nav{display:flex; align-items:center; gap:.15rem; margin:0; padding:0; list-style:none}
.nav--l{grid-column:1; grid-row:1; justify-content:flex-start}
.nav--r{grid-column:3; grid-row:1; justify-content:flex-end; gap:.6rem}
.nav a:not(.cta), .nav button.navtrig{
  display:inline-flex; align-items:center; gap:.4rem; background:none; border:0; cursor:pointer;
  font-family:var(--f-l); font-weight:500; font-size:.88rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hdr-tx3); text-decoration:none; padding:.5rem .7rem; border-radius:2px; white-space:nowrap;
  transition:color .25s var(--e), background .25s var(--e);
}
.nav a:not(.cta):hover, .nav button.navtrig:hover, .nav a.on, .nav.open button.navtrig{color:var(--hdr-tx)}
.nav a.on{background:color-mix(in srgb, var(--hdr-brand) 14%, transparent)}
.nav.open button.navtrig{background:color-mix(in srgb, var(--hdr-brand) 14%, transparent)}
.navtrig .chev{width:9px; height:9px; margin-left:.1rem; transition:transform .3s var(--e)}
.navtrig .chev path{stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round}
.nav.open .navtrig .chev{transform:rotate(180deg)}

.hdr{--hdr-tx:#F2EDE1; --hdr-tx3:rgba(242,237,225,.5); --hdr-brand:#DDBD9C; --cta-tx:#0B120E}
.hdr.on-paper{--hdr-tx:#12180F; --hdr-tx3:rgba(18,24,15,.5); --hdr-brand:#6E5A46; --cta-tx:#F7F3EA}


.cta{flex:0 0 auto; font-family:var(--f-l); font-weight:500; font-size:.92rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--cta-tx,#0B120E); background:var(--hdr-brand); padding:.62rem 1.25rem; border-radius:99px; white-space:nowrap;
  transition:transform .28s var(--e), filter .28s}
.cta:hover{transform:translateY(-2px); filter:brightness(1.12)}
.mtrig{display:none; grid-column:1; grid-row:1; justify-self:start; width:44px; height:44px; padding:0;
  background:none; border:0; cursor:pointer; flex-direction:column; justify-content:center; gap:5px}
.mtrig span{display:block; width:22px; height:2px; background:var(--hdr-tx); margin-inline:auto;
  transition:transform .3s var(--e), opacity .3s var(--e)}
.burger{display:none}

/* ---------- HERO ---------- */
/* Height comes from the width (47vw), so the visible image box is 2:1 on
   every desktop size once the 3% parallax overscan is added. min-height,
   not aspect-ratio: the box may grow if the headline needs it, and phones
   simply take the floor instead of stretching sideways. */
/* Height comes from the width (47vw), so once the 3% parallax overscan is
   added the visible image box is 2:1 on every desktop size. min-height
   rather than aspect-ratio: the box may grow if the headline needs it, and
   a phone takes the floor instead of stretching sideways. */
.hero{position:relative; min-height:100svh;
  display:flex; align-items:flex-end; overflow:hidden; background:#0B120E}
/* no overscan: the plate fills the frame exactly, so a 16:9 source lands
   edge to edge on a 16:9 screen. The drift supplies the movement instead
   of a parallax offset, which would expose the edges at inset:0. */
.hero__img{position:absolute; inset:0; overflow:hidden}
/* the plate must fill the frame: <picture> is inline by default and the <img>
   would otherwise render at its natural width, leaving bare hero background. */
.hero__img picture{display:block; width:100%; height:100%}
.hero__img img{display:block; width:100%; height:100%; object-fit:cover;
  object-position:50% 50%}
/* three plates, one visible at a time, each drifting slowly while it shows */
.hslide{position:absolute; inset:0; opacity:0; transition:opacity 1.5s var(--e)}
.hslide.on{opacity:1}
.hslide img{width:100%; height:100%; object-fit:cover; object-position:50% 50%; transform:scale(1.02)}
.hslide.on img{animation:drift 11s linear forwards}
@keyframes drift{from{transform:scale(1.02)} to{transform:scale(1.09)}}
@media (prefers-reduced-motion:reduce){
  .hslide.on img{animation:none}
  .hslide{transition:none}
}

/* slide dots */
.hero__dots{position:absolute; right:clamp(1rem,4vw,3rem); bottom:clamp(1.6rem,4vw,3rem);
  z-index:3; display:flex; gap:.55rem}
.hdot{width:34px; height:3px; padding:0; border:0; border-radius:99px; cursor:pointer;
  background-color:rgba(242,237,225,.3); transition:background-color .35s var(--e), width .35s var(--e)}
.hdot:hover{background-color:rgba(242,237,225,.6)}
.hdot.on{background-color:var(--ink-brand); width:52px}
.hdot:focus-visible{outline:2px solid var(--ink-brand); outline-offset:4px}
@media (max-width:640px){ .hero__dots{right:auto; left:clamp(1rem,5vw,2rem)} }
.hero__scrim{position:absolute; inset:0; background:
  linear-gradient(75deg, rgba(6,11,8,.92) 0%, rgba(6,11,8,.62) 32%, rgba(6,11,8,.10) 62%, rgba(6,11,8,.35) 100%),
  linear-gradient(180deg, rgba(6,11,8,.62) 0%, transparent 22%, transparent 55%, #0B120E 100%)}
.hero .shell{z-index:2; padding-top:calc(var(--hdr-h,4.1rem) + clamp(.9rem,2.5vw,2rem));
  padding-bottom:clamp(2.2rem,5vw,4rem)}
.eyebrow{font-family:var(--f-l); font-weight:500; font-size:.95rem; letter-spacing:.34em; text-transform:uppercase; color:#E3C9AE;
  margin:0 0 1.1rem; display:flex; align-items:center; gap:.9rem}
.eyebrow::before{content:""; width:2.6rem; height:1px; background:#E3C9AE}
.hero h1{font-family:var(--f-d); font-weight:600; font-size:clamp(2.7rem,9vw,8rem); line-height:.88;
  letter-spacing:.005em; text-transform:uppercase; margin:0; color:#FBF7EE}
.hero h1 em{display:block; font-style:italic; font-weight:300; color:#E3C9AE; margin-left:.06em}
.mask{display:block; overflow:hidden; padding-bottom:.06em}
.mask > span{display:block; transform:translateY(104%); animation:rise 1.05s var(--e) forwards}
@keyframes rise{to{transform:translateY(0)}}
.hero__sub{display:flex; flex-wrap:wrap; align-items:flex-end; gap:2rem 3rem; margin-top:2.2rem;
  padding-top:1.6rem; border-top:1px solid rgba(251,247,238,.22); opacity:0; animation:fade 1s .95s var(--e) forwards}
@keyframes fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero__sci{font-family:var(--f-d); font-style:italic; font-weight:300; font-size:1.15rem; color:rgba(251,247,238,.75); margin:0; flex:1 1 14rem}
.hero__stat dt{font-family:var(--f-l); font-weight:500; font-size:.85rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(251,247,238,.55); margin:0 0 .1rem}
.hero__stat dd{margin:0; font-family:var(--f-l); font-weight:400; font-size:1.4rem; color:#FBF7EE; letter-spacing:.02em}

/* ---------- SECTION MARKER ---------- */
.mk{display:flex; align-items:flex-end; gap:clamp(1rem,2.5vw,2rem); margin-bottom:clamp(1.8rem,3.5vw,3rem); flex-wrap:wrap}
.mk__n{font-family:var(--f-l); font-weight:700; font-variant-numeric:lining-nums; font-size:clamp(3.8rem,8vw,7rem); line-height:.72; color:var(--brand); opacity:.5; letter-spacing:-.03em}
.mk__t h2{font-family:var(--f-d); font-weight:600; font-size:clamp(2.2rem,5vw,4rem); letter-spacing:.02em; text-transform:uppercase; margin:0; line-height:.94; color:var(--tx)}
.mk__t p{margin:.4rem 0 0; font-family:var(--f-l); font-weight:500; font-size:.85rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brand)}
.mk__r{flex:1 1 4rem; height:1px; background:var(--line); margin-bottom:1rem; min-width:2rem}

/* ---------- REVEAL ---------- */
[data-r]{opacity:0; transform:translateY(26px); transition:opacity .8s var(--e), transform .8s var(--e)}
[data-r].in{opacity:1; transform:none}
[data-r="l"]{transform:translateX(-30px)} [data-r="r"]{transform:translateX(30px)}
[data-r].in{transform:none}
.clip{overflow:hidden}
.clip img{transform:scale(1.12); transition:transform 1.4s var(--e)}
.clip.in img{transform:scale(1)}

/* ---------- 01 PROFILE ---------- */
.prof{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(1.8rem,4vw,3.5rem); align-items:center}
.prof p{font-size:1.08rem; color:var(--tx2); margin:0 0 1.1rem}
.prof p b{color:var(--tx); font-weight:500}
.plate{margin:0; position:relative; border-radius:3px; overflow:hidden; aspect-ratio:4/3; background:var(--bg2)}
.plate img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.plate figcaption{position:absolute; inset:auto 0 0 0; padding:3rem 1.1rem .8rem;
  background:linear-gradient(180deg,transparent,rgba(6,11,8,.55) 42%,rgba(6,11,8,.94));
  font-family:var(--f-l); font-weight:500; font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(251,247,238,.85)}
.kpi{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line)}
.kpi div{padding:1.7rem 1.8rem; border-right:1px solid var(--line2)}
.kpi div:first-child{padding-left:0}
.kpi div:last-child{padding-right:0}
.kpi div:last-child{border-right:0}
.kpi dt{font-family:var(--f-l); font-weight:500; font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tx3); margin:0 0 .35rem}
.kpi dd{margin:0; font-family:var(--f-d); font-weight:500; font-size:2.1rem; line-height:1.05; color:var(--tx); letter-spacing:-.02em}
.kpi .hi{color:var(--brand)}
.kpi small{display:block; font-family:var(--f-b); font-size:.78rem; font-weight:300; color:var(--tx3); margin-top:.3rem; letter-spacing:0}

/* =============================================================
   02  THE CHART
   ============================================================= */
.chart-wrap{border:1px solid var(--line); border-radius:4px; background:var(--panel); overflow:hidden}
.chart-head{display:flex; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; padding:1.4rem clamp(1rem,2.2vw,1.8rem) 0}
.chart-head > div:first-child{flex:1 1 26rem; min-width:0}
.chart-head h3{font-family:var(--f-d); font-weight:600; font-size:1.6rem; letter-spacing:.03em; text-transform:uppercase; margin:0; color:var(--tx)}
.chart-head p{margin:.3rem 0 0; font-size:1rem; color:var(--tx2); max-width:52ch}
.legend{display:flex; gap:1.1rem; flex-wrap:wrap; margin-left:auto; align-items:center; flex:0 0 auto; padding-bottom:.2rem}
.legend span{display:inline-flex; align-items:center; gap:.45rem; font-family:var(--f-l); font-weight:500; font-size:.85rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--tx3); white-space:nowrap}
.legend i{width:14px; height:10px; border-radius:2px; display:block}
.legend .k-line{height:2px; width:16px; border-radius:99px; background:var(--mark)}
.legend .k-band{background:color-mix(in srgb, var(--mark) 22%, transparent); border:1px solid color-mix(in srgb, var(--mark) 45%, transparent)}
.legend .k-win{background:color-mix(in srgb, var(--cold) 20%, transparent); border:1px solid color-mix(in srgb, var(--cold) 50%, transparent)}

.chart{position:relative; padding:.6rem clamp(.6rem,1.4vw,1.2rem) .4rem; touch-action:pan-y}
#svgChart{width:100%; height:auto; display:block; overflow:visible}
.gridline{stroke:var(--line2); stroke-width:1}
.axis-t{font-family:var(--f); font-weight:500; font-size:16px; letter-spacing:.06em; text-transform:uppercase}
.axis-t.dim{fill:var(--tx2)} .axis-t.mid{fill:var(--tx2)}
.zone-band{fill:var(--mark); opacity:.10}
.zone-band-line{stroke:var(--mark); stroke-width:1; stroke-opacity:.35}
.zone-win{fill:var(--cold); opacity:.09}
.zone-win-line{stroke:var(--cold); stroke-width:1; stroke-opacity:.42}
.zone-hot{fill:var(--mark); opacity:.13}
.area{fill:var(--mark); opacity:0; transition:opacity 1.1s .5s var(--e)}
.in .area{opacity:.10}
.line{fill:none; stroke:var(--mark); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:2600; stroke-dashoffset:2600; transition:stroke-dashoffset 2.1s var(--e)}
.in .line{stroke-dashoffset:0}
.anchor{fill:var(--mark); stroke:var(--bg); stroke-width:2; r:0; transition:r .45s var(--e)}
.in .anchor{r:5.5}
.in .anchor:nth-of-type(1){transition-delay:1.1s}
.anchor-lb{font-family:var(--f); font-weight:500; font-size:16px; letter-spacing:.05em; fill:var(--tx2);
  opacity:0; transition:opacity .7s 1.3s var(--e)}
.in .anchor-lb{opacity:1}
.anchor-lb tspan.v{fill:var(--mark); font-weight:600}
.hit{fill:transparent; cursor:crosshair}
.cross{stroke:var(--tx3); stroke-width:1; stroke-dasharray:3 4; opacity:0; transition:opacity .18s}
.cross.show{opacity:1}
.cursor-dot{fill:var(--mark); stroke:var(--bg); stroke-width:2.5; opacity:0; transition:opacity .18s}
.cursor-dot.show{opacity:1}
.tip{position:absolute; pointer-events:none; z-index:5; min-width:12.5rem; padding:.75rem .9rem;
  background:var(--bg2); border:1px solid var(--line); border-radius:4px; box-shadow:0 16px 40px -16px rgba(0,0,0,.5);
  opacity:0; transform:translateY(4px); transition:opacity .16s, transform .16s}
.tip.show{opacity:1; transform:none}
.tip h4{margin:0 0 .5rem; font-family:var(--f-l); font-weight:600; font-size:1rem; letter-spacing:.13em; text-transform:uppercase; color:var(--tx)}
.tip dl{margin:0; display:grid; grid-template-columns:auto auto; gap:.28rem 1rem}
.tip dt{font-size:.82rem; color:var(--tx3)}
.tip dd{margin:0; font-family:var(--f-l); font-size:.98rem; color:var(--tx); text-align:right; white-space:nowrap}
.tip dd.mk{color:var(--mark)}
.tip .st{margin:.6rem 0 0; padding-top:.5rem; border-top:1px solid var(--line2);
  font-family:var(--f-l); font-weight:500; font-size:.9rem; letter-spacing:.12em; text-transform:uppercase}
.tip .st.open{color:var(--mark)} .tip .st.shut{color:var(--tx3)}

.chart-foot{display:flex; gap:1.2rem 2rem; flex-wrap:wrap; align-items:center; justify-content:space-between;
  padding:.4rem clamp(1rem,2.2vw,1.8rem) 1.2rem; border-top:1px solid var(--line2); margin-top:.4rem}
.chart-foot p{margin:0; font-size:.92rem; color:var(--tx2); max-width:62ch}
.tbtn{appearance:none; font:inherit; cursor:pointer; background:transparent; color:var(--tx2);
  border:1px solid var(--line); border-radius:99px; padding:.4rem 1rem;
  font-family:var(--f-l); font-weight:500; font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; transition:color .25s, border-color .25s}
.tbtn:hover{color:var(--brand); border-color:var(--brand)}
.dtable{width:100%; border-collapse:collapse; margin-top:1rem; font-size:.88rem}
.dtable caption{text-align:left; font-family:var(--f-l); font-weight:500; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--tx3); padding-bottom:.6rem}
.dtable th,.dtable td{text-align:left; padding:.5rem .8rem; border-bottom:1px solid var(--line2)}
.dtable th{font-family:var(--f-l); font-weight:600; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--tx3)}
.dtable td{color:var(--tx2)} .dtable td:first-child{color:var(--tx)}
.dtable tr.peak td{color:var(--mark)}

.hab-side{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(1.2rem,2.5vw,2rem); margin-top:clamp(1.2rem,2.5vw,2rem); align-items:start}
.note-card{border:1px solid var(--line); border-radius:4px; padding:clamp(1.2rem,2.2vw,1.8rem); background:var(--panel)}
.note-card h4{font-family:var(--f-l); font-weight:600; font-size:.9rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brand); margin:0 0 1rem}
.note-card p{margin:0 0 .9rem; font-size:.98rem; color:var(--tx2)}
.note-card p:last-child{margin-bottom:0}
.note-card b{color:var(--tx); font-weight:500}
.map-card{border:1px solid var(--line); border-radius:4px; padding:1rem; background:#0E1A14; display:flex; align-items:center}
.map-card img{width:100%; height:auto}

/* ---------- 03 THE HUNT ---------- */
.hunt-top{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(1.8rem,4vw,3.5rem); align-items:center; margin-bottom:clamp(2rem,4vw,3rem)}
.hunt-top > p{margin:0; font-size:1.08rem; color:var(--tx2)}
.days{display:flex; align-items:center; gap:1.4rem; border-left:2px solid var(--brand); padding-left:1.5rem}
.days .n{font-family:var(--f-d); font-weight:500; font-size:clamp(3.4rem,6vw,4.6rem); line-height:.82; color:var(--brand); letter-spacing:-.04em}
.days h3{font-family:var(--f-l); font-weight:600; font-size:1rem; letter-spacing:.01em; margin:0 0 .3rem; color:var(--tx)}
.days p{margin:0; font-size:.9rem; color:var(--tx2)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); list-style:none; padding:0; margin:0; border-top:1px solid var(--line)}
.step{padding:1.7rem 1.8rem 0; border-right:1px solid var(--line2); position:relative}
.step:last-child{border-right:0; padding-right:0}
.step:first-child{padding-left:0}
.step::before{content:""; position:absolute; top:-1px; left:0; height:1px; width:0; background:var(--brand); transition:width .7s var(--e)}
.in .step::before{width:100%}
.in .step:nth-child(1)::before{transition-delay:.1s} .in .step:nth-child(2)::before{transition-delay:.3s}
.in .step:nth-child(3)::before{transition-delay:.5s} .in .step:nth-child(4)::before{transition-delay:.7s}
.step .sn{font-family:var(--f-l); font-weight:600; font-size:.88rem; letter-spacing:.2em; color:var(--brand); display:block; margin-bottom:.5rem}
.step h4{font-family:var(--f-d); font-weight:600; font-size:1.25rem; letter-spacing:.06em; text-transform:uppercase; margin:0 0 .4rem; color:var(--tx)}
.step p{margin:0; font-size:.92rem; color:var(--tx2)}
.quote{font-family:var(--f-d); font-style:italic; font-weight:400; font-size:clamp(1.6rem,3.2vw,2.4rem);
  line-height:1.35; letter-spacing:.01em; color:var(--tx); max-width:24em; margin:clamp(2.2rem,4vw,3.2rem) 0 0}
.quote b{font-style:normal; font-weight:500; color:var(--brand)}
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; margin-top:clamp(2rem,4vw,3rem)}
.gal figure{margin:0; position:relative; overflow:hidden; border-radius:3px; aspect-ratio:4/3; background:var(--bg2)}
.gal img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--e)}
.gal figure:hover img{transform:scale(1.07)}
.gal figcaption{position:absolute; inset:auto 0 0 0; padding:2.2rem .8rem .7rem;
  background:linear-gradient(180deg,transparent,rgba(6,11,8,.55) 42%,rgba(6,11,8,.94));
  font-family:var(--f-l); font-weight:500; font-size:.82rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(251,247,238,.9)}

/* ---------- 04 ACCOMMODATION ---------- */
.stay-top{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,3.5rem); margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.stay-top p{margin:0; font-size:1.05rem; color:var(--tx2)}
.stay-top .it{font-family:var(--f-d); font-style:italic; font-weight:300; font-size:1.22rem; color:var(--tx3)}
.rooms{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem}
.room{margin:0; position:relative; overflow:hidden; border-radius:3px; aspect-ratio:4/3; background:var(--bg2)}
.room img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--e)}
.room:hover img{transform:scale(1.05)}
.room__c{position:absolute; inset:auto 0 0 0; padding:3.5rem 1.1rem 1rem; background:linear-gradient(180deg,transparent,rgba(6,11,8,.6) 42%,rgba(6,11,8,.95))}
.room__c h4{font-family:var(--f-l); font-weight:600; font-size:.95rem; letter-spacing:.17em; text-transform:uppercase; color:#FBF7EE; margin:0}
.room__c p{margin:.45rem 0 0; font-size:.87rem; color:rgba(251,247,238,.75); line-height:1.5;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .5s var(--e), opacity .4s, margin .5s var(--e)}
.room:hover .room__c p{max-height:8rem; opacity:1}
.amen{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:2.6rem; border-top:1px solid var(--line)}
.amen div{padding:2rem 1.8rem; border-right:1px solid var(--line2)}
.amen div:first-child{padding-left:0}
.amen div:last-child{padding-right:0}
.amen div:last-child{border-right:0}
.amen img{width:32px; height:32px; margin-bottom:1.1rem}
.amen h4{font-family:var(--f-l); font-weight:600; font-size:.9rem; letter-spacing:.17em; text-transform:uppercase; color:var(--brand); margin:0 0 .6rem}
.amen p{margin:0; font-size:.88rem; color:var(--tx2)}

/* ---------- CLOSE ---------- */
.close{position:relative; overflow:hidden; text-align:center; padding-block:clamp(3.5rem,7vw,6rem); background:#0B120E}
.close__bg{position:absolute; inset:-12% 0; will-change:transform}
.close__bg img{width:100%; height:100%; object-fit:cover; filter:brightness(.38)}
.close__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,#0B120E,rgba(11,18,14,.45) 45%,#0B120E)}
.close .shell{z-index:2}
.close h2{font-family:var(--f-d); font-weight:600; font-size:clamp(2.3rem,5.4vw,4.2rem); letter-spacing:.02em; text-transform:uppercase; line-height:1.04; margin:0 0 .8rem; color:#FBF7EE}
.close h2 em{font-style:italic; color:#E3C9AE}
.close > .shell > p{color:rgba(251,247,238,.7); max-width:32rem; margin:0 auto 2rem}
.crow{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}
.btn{font-family:var(--f-l); font-weight:500; font-size:.95rem; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; padding:.8rem 1.7rem; border-radius:99px; transition:transform .3s var(--e), filter .3s, border-color .3s, color .3s}
.btn--g{background:#DDBD9C; color:#0B120E} .btn--g:hover{transform:translateY(-2px); filter:brightness(1.1)}
.btn--o{border:1px solid rgba(251,247,238,.32); color:#FBF7EE} .btn--o:hover{border-color:#E3C9AE; color:#E3C9AE; transform:translateY(-2px)}
.foot{background:#0B120E; border-top:1px solid rgba(242,237,225,.1); padding-block:1.3rem}
.foot .shell{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--f-l); font-weight:500; font-size:.88rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(242,237,225,.62)}
.foot a{text-decoration:none} .foot a:hover{color:#E3C9AE}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1040px){
  /* horizontal reveals would push past the viewport once columns stack */
  [data-r="l"],[data-r="r"]{transform:translateY(26px)}
  .prof,.hunt-top,.stay-top,.hab-side{grid-template-columns:1fr}
  .kpi,.steps,.amen{grid-template-columns:repeat(2,1fr)}
  .kpi div:nth-child(2),.amen div:nth-child(2){border-right:0}
  .kpi div:nth-child(-n+2),.amen div:nth-child(-n+2){padding-bottom:1.2rem; border-bottom:1px solid var(--line2)}
  .step{border-right:0; border-bottom:1px solid var(--line2); padding-bottom:1.3rem}
  .step:nth-child(2n){padding-right:0}
  .gal{grid-template-columns:repeat(2,1fr)}
  .rooms{grid-template-columns:1fr} .room__c p{max-height:8rem; opacity:1}
  .hnav{display:none}
  .hnav.open{display:flex; flex-direction:column; position:absolute; top:calc(100% + .4rem); right:0; min-width:15rem;
    background:var(--ink-bg2); border:1px solid rgba(242,237,225,.14); border-radius:4px; padding:.4rem}
  html[data-theme="b"] .hnav.open{background:var(--pap-bg2); border-color:rgba(18,24,15,.14)}
  .hnav.open a{padding:.75rem .9rem}
  .burger{display:flex; flex-direction:column; gap:4px; margin-left:auto; width:38px; height:26px; padding:0; cursor:pointer;
    align-items:center; justify-content:center; background:none; border:1px solid color-mix(in srgb, var(--hdr-tx) 25%, transparent); border-radius:99px}
  .burger span{width:13px; height:1px; background:var(--hdr-tx); display:block; transition:transform .3s, opacity .3s}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(2.5px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-2.5px) rotate(-45deg)}
}
@media (max-width:640px){
  :root{--shell:min(1300px, 100% - 1.6rem)}
  .kpi,.steps,.amen,.gal{grid-template-columns:1fr}
  .kpi div,.amen div{border-right:0; border-bottom:1px solid var(--line2); padding-bottom:1.1rem}
  .brand img{height:36px} .cta{padding:.5rem .85rem; font-size:.66rem; letter-spacing:.08em}
  .hdr .shell{gap:.5rem} .mk__r{display:none}
  .legend{margin-left:0; width:100%; padding-top:.5rem}
  .chart-head{padding-bottom:.4rem}
  .hero__sub{gap:1.2rem 2rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
  [data-r]{opacity:1 !important; transform:none !important}
  .mask > span{transform:none}
  .line{stroke-dashoffset:0 !important} .area{opacity:.10 !important} .anchor{r:5.5 !important} .anchor-lb{opacity:1 !important}
}

/* ---- the four exotics ---- */
.lineup{margin-top:clamp(2.4rem,4.5vw,3.4rem)}
.lineup h3{margin:0 0 1.4rem; font-family:var(--f-d); font-weight:600; font-size:1.5rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--tx)}
.lineup__g{display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem}
.lu{margin:0; border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--panel);
  transition:border-color .3s var(--e)}
.lu:hover{border-color:color-mix(in srgb, var(--brand) 55%, transparent)}
.lu__img{display:block; position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg2)}
.lu__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--e)}
.lu:hover .lu__img img{transform:scale(1.05)}
.lu figcaption{display:block; padding:1.1rem 1.3rem 1.35rem}
.lu h4{margin:0; font-family:var(--f-d); font-weight:600; font-size:1.3rem; letter-spacing:.03em;
  text-transform:uppercase; color:var(--tx)}
.lu .sci{display:block; font-style:italic; font-size:.95rem; color:var(--tx3); margin-top:.2rem}
.lu p{margin:.8rem 0 0; font-size:.98rem; color:var(--tx2); line-height:1.5}
@media (max-width:640px){ .lineup__g{grid-template-columns:1fr} }

/* ---- trophy photographs: the horns are the point, so any crop that is
   still needed takes it off the bottom, never off the top ---- */
.scard__img img, .feature__img img, .mega__pic img, .plate img,
.lu__img img, .gal figure img, .ss-c__img img{object-position:50% 22%}

/* reveal animations slide elements in from the side; clip stops that from
   ever producing a transient horizontal scrollbar (clip, not hidden, so
   position:sticky keeps working) */
html{overflow-x:clip}
body{overflow-x:clip}


/* ---- phone tap targets: nothing interactive under ~40px ---- */
@media (max-width:760px){
  .cta{min-height:40px; display:inline-flex; align-items:center; padding:.55rem 1rem !important; font-size:.72rem !important}
  .tbtn{min-height:42px; padding-inline:1.1rem}
  /* the dot stays a thin bar, the hit area around it does not */
  .hdot{box-sizing:content-box; height:3px; padding:16px 0; background-clip:content-box; border-radius:0}
  .hero__dots{gap:.35rem}
  .mtrig{width:46px; height:46px}
}

/* ---- phone header: burger left, wordmark centre, CTA right ---- */
@media (max-width:1100px){
  .hdr .nav--r button.navtrig{display:none}
  .hdr .shell{grid-template-columns:44px 1fr auto; gap:.6rem; min-height:4rem}
  .mtrig{display:flex; align-self:center}
  .brand{justify-self:center; align-self:center}
  .nav--r{gap:.4rem; align-self:center}
}
@media (max-width:420px){
  .brand img{height:26px}
  .hdr .shell{grid-template-columns:40px 1fr auto; gap:.4rem}
}


/* ---- home teaser links ---- */
.introlinks{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:clamp(2rem,4vw,3rem)}
.introlink{display:inline-flex; align-items:center; gap:.9rem; text-decoration:none;
  border:1px solid var(--line); border-radius:99px; padding:.85rem 1.5rem;
  font-family:var(--f-l); font-weight:500; font-size:.9rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx2);
  transition:border-color .3s var(--e), color .3s var(--e), transform .3s var(--e)}
.introlink i{font-style:normal; color:var(--brand); transition:transform .3s var(--e)}
.introlink:hover{border-color:var(--brand); color:var(--tx); transform:translateY(-2px)}
.introlink:hover i{transform:translateX(3px)}
@media (max-width:560px){ .introlink{width:100%; justify-content:space-between} }


/* ==== moved from the home page: these now serve species.html,
   who-we-are.html and gallery.html as well ==== */

/* ============ HOME PAGE ONLY ============ */

/* hero: country scale, not one animal */
.hero h1{font-size:clamp(2.8rem,8.4vw,7rem); line-height:.94}
.hero__lede{max-width:34em; margin:1.6rem 0 0; font-size:1.12rem; color:rgba(251,247,238,.82); line-height:1.6}
.hero__cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem}
.hero__cta .btn{font-family:var(--f-l); font-weight:500; font-size:.95rem; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; padding:.85rem 1.7rem; border-radius:99px; transition:transform .3s var(--e), filter .3s, border-color .3s, color .3s}
.hero__cta .btn--g{background:#DDBD9C; color:#0B120E}
.hero__cta .btn--g:hover{filter:brightness(1.1); transform:translateY(-2px)}
.hero__cta .btn--o{border:1px solid rgba(251,247,238,.35); color:#FBF7EE}
.hero__cta .btn--o:hover{border-color:#E3C9AE; color:#E3C9AE; transform:translateY(-2px)}

/* ---- FULL BLEED STATEMENT BAND: breaks the 1300px box ---- */
.statement{position:relative; min-height:clamp(20rem,52vw,34rem); display:flex; align-items:flex-end;
  overflow:hidden; background:#0B120E}
.statement__img{position:absolute; inset:-12% 0; will-change:transform}
.statement__img img{width:100%; height:100%; object-fit:cover}
.statement__scrim{position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(6,11,8,.9) 0%, rgba(6,11,8,.5) 42%, rgba(6,11,8,.12) 75%),
             linear-gradient(180deg, rgba(6,11,8,.5), transparent 30%, rgba(6,11,8,.55))}
.statement .shell{position:relative; z-index:2; padding-block:clamp(2.5rem,5vw,4rem)}
.statement p.k{font-family:var(--f-l); font-weight:600; font-size:.88rem; letter-spacing:.3em;
  text-transform:uppercase; color:#E3C9AE; margin:0 0 1rem; display:flex; align-items:center; gap:.9rem}
.statement p.k::before{content:""; width:2.6rem; height:1px; background:#E3C9AE}
.statement h2{font-family:var(--f-d); font-weight:600; font-size:clamp(1.9rem,4.6vw,3.6rem);
  letter-spacing:.02em; text-transform:uppercase; line-height:1.02; margin:0; color:#FBF7EE; max-width:18ch}
.statement h2 em{font-style:italic; color:#E3C9AE}
.statement .sub{margin:1.1rem 0 0; font-size:1.08rem; color:rgba(251,247,238,.78); max-width:40ch}

/* ---- the country: stats as an inline line, not a ruled table ---- */
.statline{display:flex; flex-wrap:wrap; gap:clamp(1.6rem,4vw,3.4rem); margin-top:clamp(2rem,4vw,3rem);
  padding-top:1.6rem; border-top:1px solid var(--line)}
.statline div{min-width:8rem}
.statline dt{margin:0 0 .3rem; font-family:var(--f-l); font-weight:500; font-size:.82rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--tx3)}
.statline dd{margin:0; font-family:var(--f-d); font-weight:600; font-size:clamp(1.7rem,3vw,2.4rem);
  line-height:1; color:var(--tx); letter-spacing:.01em}
.statline dd.hi{color:var(--brand)}
.statline small{display:block; font-family:var(--f-b); font-size:.82rem; font-weight:400;
  color:var(--tx3); margin-top:.4rem; letter-spacing:0}

/* ---- three ranges, as photo cards rather than a bordered row ---- */
.rangecards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:clamp(2rem,4vw,3rem)}
.rangecard{position:relative; margin:0; aspect-ratio:3/4; overflow:hidden; border-radius:3px; background:var(--bg2)}
.rangecard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--e); filter:brightness(.72)}
.rangecard:hover img{transform:scale(1.06)}
.rangecard figcaption{position:absolute; inset:auto 0 0 0; padding:4.5rem 1.3rem 1.4rem;
  background:linear-gradient(180deg,transparent,rgba(6,11,8,.5) 40%,rgba(6,11,8,.95))}
.rangecard h4{margin:0 0 .5rem; font-family:var(--f-d); font-weight:600; font-size:1.35rem;
  letter-spacing:.04em; text-transform:uppercase; color:#FBF7EE}
.rangecard p{margin:0; font-size:.94rem; color:rgba(251,247,238,.8); line-height:1.5}

/* ---- species: one feature, then the rest ---- */
.feature{display:grid; grid-template-columns:1.25fr 1fr; gap:0; border-radius:4px; overflow:hidden;
  margin-top:clamp(2rem,4vw,3rem); background:var(--panel); border:1px solid var(--line);
  text-decoration:none; color:inherit; transition:border-color .3s var(--e)}
.feature:hover{border-color:var(--brand)}
.feature__img{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg2)}
.feature__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--e)}
.feature:hover .feature__img img{transform:scale(1.04)}
.feature__b{padding:clamp(1.6rem,3vw,2.6rem); display:flex; flex-direction:column; justify-content:center}
.feature__k{font-family:var(--f-l); font-weight:600; font-size:.82rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--brand); margin:0 0 .8rem}
.feature__b h3{margin:0; font-family:var(--f-d); font-weight:600; font-size:clamp(1.9rem,3.4vw,2.9rem);
  letter-spacing:.02em; text-transform:uppercase; line-height:1; color:var(--tx)}
.feature__b .sci{margin:.4rem 0 0; font-style:italic; font-size:1.05rem; color:var(--tx3)}
.feature__b p{margin:1.1rem 0 0; font-size:1.02rem; color:var(--tx2); max-width:40ch}
.feature__m{display:flex; gap:2rem; flex-wrap:wrap; margin:1.4rem 0 0; padding-top:1.1rem; border-top:1px solid var(--line2)}
.feature__m dt{margin:0 0 .2rem; font-family:var(--f-l); font-weight:500; font-size:.76rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tx3)}
.feature__m dd{margin:0; font-family:var(--f-l); font-weight:500; font-size:1.1rem; color:var(--tx)}
.feature__go{display:inline-flex; align-items:center; gap:.6rem; margin-top:1.4rem;
  font-family:var(--f-l); font-weight:600; font-size:.85rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brand)}
.feature__go::after{content:"\2192"; transition:transform .25s var(--e)}
.feature:hover .feature__go::after{transform:translateX(5px)}

/* ---- company: pillars without the table ---- */
.pcards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:clamp(2rem,4vw,3rem)}
.pcard{border:1px solid var(--line); border-radius:4px; padding:clamp(1.4rem,2.4vw,1.9rem); background:var(--panel);
  transition:border-color .3s var(--e), transform .3s var(--e)}
.pcard:hover{border-color:var(--brand); transform:translateY(-3px)}
.pcard .pn{display:block; font-family:var(--f-l); font-weight:600; font-size:.82rem;
  letter-spacing:.24em; color:var(--brand); margin-bottom:.9rem}
.pcard h4{margin:0 0 .6rem; font-family:var(--f-d); font-weight:600; font-size:1.3rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--tx)}
.pcard p{margin:0; font-size:.96rem; color:var(--tx2)}
.teamline{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-top:clamp(1.8rem,3vw,2.4rem);
  padding-top:1.4rem; border-top:1px solid var(--line2)}
.teamline span{font-family:var(--f-l); font-weight:500; font-size:.98rem; letter-spacing:.04em; color:var(--tx2)}
.teamline span b{color:var(--tx); font-weight:600}

@media (max-width:1040px){
  .rangecards,.pcards{grid-template-columns:1fr}
  .rangecard{aspect-ratio:16/9}
  .feature{grid-template-columns:1fr}
}

/* the map is square; show all of it rather than cropping to a 16:10 plate */
.mapplate{margin:0; border:1px solid var(--line); border-radius:3px; background:#0E1A14; padding:1rem}
.mapplate img{width:100%; height:auto}
.mapplate figcaption{margin:.8rem .2rem 0; font-family:var(--f-l); font-weight:500; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(242,237,225,.55)}

/* the country: facts as a ruled ledger */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); margin-top:clamp(2rem,4vw,3rem)}
.facts div{padding:1.7rem 1.8rem; border-right:1px solid var(--line2)}
.facts div:first-child{padding-left:0} .facts div:last-child{padding-right:0; border-right:0}
.facts dt{margin:0 0 .4rem; font-family:var(--f-l); font-weight:500; font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tx3)}
.facts dd{margin:0; font-family:var(--f-d); font-weight:500; font-size:2.1rem; line-height:1.05; color:var(--tx)}
.facts dd.hi{color:var(--brand)}
.facts small{display:block; font-family:var(--f-b); font-size:.82rem; font-weight:400; color:var(--tx3); margin-top:.35rem; letter-spacing:0}

.ranges{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:clamp(1.8rem,3vw,2.6rem)}
.ranges div{border-left:2px solid var(--brand); padding:.2rem 0 .2rem 1.2rem}
.ranges h4{margin:0 0 .35rem; font-family:var(--f-l); font-weight:600; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tx)}
.ranges p{margin:0; font-size:.95rem; color:var(--tx2)}

/* ============ THE ATLAS: relief map + the six blocks ============ */
.lede{max-width:70ch; font-size:1.1rem; color:var(--tx2); margin:0 0 clamp(2rem,4vw,3rem)}
.atlas{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(1.5rem,3vw,3rem); align-items:center}
.atlas__map{position:relative}
.atlas__map img{width:100%; height:auto; display:block;
  filter:saturate(.96); transition:filter .5s var(--e)}
.atlas.lit .atlas__map img{filter:saturate(.7) brightness(.82)}
.atlas__pins{position:absolute; inset:0}

.pin{position:absolute; width:46px; height:46px; margin:-23px 0 0 -23px; padding:0; border:0; cursor:pointer;
  background:transparent; border-radius:50%; display:grid; place-items:center;
  opacity:0; transform:scale(.4); transition:opacity .5s var(--e) var(--d), transform .5s var(--e) var(--d)}
.atlas.in .pin{opacity:1; transform:scale(1)}
.pin i{width:13px; height:13px; border-radius:50%; background:var(--brand); display:block; position:relative;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--brand) 60%, transparent); transition:transform .3s var(--e)}
.pin i::after{content:""; position:absolute; inset:-9px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--brand) 55%, transparent); opacity:0; transform:scale(.6);
  transition:opacity .35s var(--e), transform .35s var(--e)}
.atlas.in .pin i{animation:ping 3.2s var(--e) infinite; animation-delay:var(--d)}
.pin.on i{transform:scale(1.35); animation:none}
.pin.on i::after{opacity:1; transform:scale(1)}
.pin:focus-visible{outline:2px solid var(--brand); outline-offset:0}
@keyframes ping{0%,72%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent)}
  86%{box-shadow:0 0 0 13px transparent}}
@media (prefers-reduced-motion:reduce){ .atlas.in .pin i{animation:none} }

.atlas__side{display:flex; flex-direction:column; gap:.55rem; max-height:none}
.blk{display:grid; grid-template-columns:7rem 1fr; gap:1rem; align-items:center; cursor:default;
  padding:.7rem; border:1px solid transparent; border-radius:3px;
  transition:border-color .3s var(--e), background .3s var(--e), opacity .3s var(--e)}
.atlas.lit .blk{opacity:.42}
.atlas.lit .blk.on{opacity:1; border-color:color-mix(in srgb, var(--brand) 45%, transparent);
  background:color-mix(in srgb, var(--brand) 8%, transparent)}
.blk:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.blk__img{display:block; position:relative; aspect-ratio:4/3; border-radius:2px; overflow:hidden; background:var(--bg2)}
.blk__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--e)}
.blk.on .blk__img img{transform:scale(1.08)}
.blk__b{min-width:0}
.blk h4{margin:0 0 .3rem; font-family:var(--f-d); font-weight:600; font-size:1.2rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--tx); display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap}
.blk h4 span{font-family:var(--f-l); font-weight:500; font-size:.76rem; letter-spacing:.14em; color:var(--brand)}
.blk p{margin:0 0 .5rem; font-size:.95rem; color:var(--tx2); line-height:1.45}
.blk__sp{display:flex; flex-wrap:wrap; gap:.3rem}
.blk__sp a{text-decoration:none; font-family:var(--f-l); font-weight:500; font-size:.78rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--tx3); border:1px solid var(--line2); border-radius:99px; padding:.26rem .6rem;
  transition:color .25s, border-color .25s, background .25s}
.blk__sp a:hover{color:var(--brand); border-color:var(--brand); background:color-mix(in srgb, var(--brand) 10%, transparent)}

/* species grid */
.sgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:clamp(2rem,4vw,3rem)}
.scard{display:block; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:3px;
  overflow:hidden; background:var(--panel); transition:border-color .3s var(--e), transform .3s var(--e)}
.scard:hover{border-color:var(--brand); transform:translateY(-3px)}
.scard__img{display:block; position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg2)}
.scard__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--e)}
.scard:hover .scard__img img{transform:scale(1.05)}
.scard__b{display:block; padding:1.2rem 1.3rem 1.4rem}
.scard__n{display:block; font-family:var(--f-l); font-weight:600; font-size:.85rem; letter-spacing:.2em; color:var(--brand); margin-bottom:.45rem}
.scard__t{display:block; font-family:var(--f-d); font-weight:600; font-size:1.45rem; letter-spacing:.02em; text-transform:uppercase; line-height:1; color:var(--tx)}
.scard__s{display:block; font-style:italic; font-size:.98rem; color:var(--tx3); margin-top:.3rem}
.scard__m{display:block; font-family:var(--f-l); font-weight:500; font-size:.82rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tx2); margin-top:.85rem; padding-top:.75rem; border-top:1px solid var(--line2)}

/* company */
.co{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(1.8rem,4vw,3.5rem); align-items:center}
.co p{font-size:1.08rem; color:var(--tx2); margin:0 0 1.15rem}
.co p b{color:var(--tx); font-weight:500}
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); margin-top:clamp(2rem,4vw,3rem)}
.pillars div{padding:1.7rem 1.8rem; border-right:1px solid var(--line2)}
.pillars div:first-child{padding-left:0} .pillars div:last-child{padding-right:0; border-right:0}
.pillars .pn{display:block; font-family:var(--f-l); font-weight:600; font-size:.82rem; letter-spacing:.22em; color:var(--brand); margin-bottom:.6rem}
.pillars h4{margin:0 0 .5rem; font-family:var(--f-d); font-weight:600; font-size:1.25rem; letter-spacing:.05em; text-transform:uppercase; color:var(--tx)}
.pillars p{margin:0; font-size:.95rem; color:var(--tx2)}
.team{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); margin-top:clamp(1.8rem,3vw,2.4rem)}
.team div{padding:1.5rem 1.6rem; border-right:1px solid var(--line2)}
.team div:first-child{padding-left:0} .team div:last-child{padding-right:0; border-right:0}
.team h4{margin:0 0 .3rem; font-family:var(--f-l); font-weight:600; font-size:1.02rem; letter-spacing:.05em; color:var(--tx)}
.team p{margin:0; font-size:.88rem; color:var(--tx2)}
.team p span{display:block; color:var(--tx3); margin-top:.2rem}

@media (max-width:1040px){
  .facts,.pillars{grid-template-columns:repeat(2,1fr)}
  .facts div:nth-child(2),.pillars div:nth-child(2){border-right:0}
  .facts div:nth-child(-n+2){border-bottom:1px solid var(--line2)}
  .ranges,.co,.team{grid-template-columns:1fr}
  .team div{border-right:0; border-bottom:1px solid var(--line2); padding:1.2rem 0}
  .pillars div{padding:1.4rem 1.2rem}
  .pillars div:nth-child(3){grid-column:1 / -1; border-right:0; padding-left:0}
  .sgrid{grid-template-columns:repeat(2,1fr)}
  .atlas{grid-template-columns:1fr; gap:2rem}
  .atlas__map{max-width:34rem; margin-inline:auto}
}
@media (max-width:640px){
  .facts,.pillars,.sgrid{grid-template-columns:1fr}
  .blk{grid-template-columns:4.2rem 1fr; gap:.8rem}
  .facts div,.pillars div{border-right:0; padding:1.3rem 0; border-bottom:1px solid var(--line2)}
  .pl-key{margin-left:0; width:100%; padding-top:.4rem}
  .pl-grid{min-width:36rem}
  .pl-name{font-size:.98rem} .pl-name em{font-size:.74rem}
  .pl-hint{display:flex; align-items:center; gap:.5rem; padding:0 clamp(1rem,2.2vw,1.8rem) .2rem;
    font-family:var(--f-l); font-weight:500; font-size:.78rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--tx3)}
  .pl-hint::after{content:"\2192"; font-size:1rem}
  .hero__cta .btn{flex:1 1 100%; text-align:center}
}
@media (prefers-reduced-motion:reduce){ .pl-bar{transform:translateY(-50%) scaleX(1) !important} }

/* ============================================================
   PHONE HERO
   A phone sees a narrow upright slice of a 2:1 plate, so the frame is
   centred on the animal, the type is scaled to the column rather than
   the page, and the block is kept short enough that the section below
   is reachable with one thumb.
   ============================================================ */
@media (max-width:760px){
  .hero{min-height:100svh}
  .hslide img{object-position:50% 44%}
  .hero__scrim{background:linear-gradient(to top,
    rgba(6,10,7,.93) 0%, rgba(6,10,7,.66) 36%, rgba(6,10,7,.30) 64%, rgba(6,10,7,.58) 100%)}
  .hero .shell{padding-top:calc(var(--hdr-h,4.1rem) + .5rem); padding-bottom:3.2rem}
  .hero .eyebrow{font-size:.68rem; letter-spacing:.16em; margin-bottom:.6rem}
  .hero h1{font-size:clamp(2.1rem,10vw,3rem); line-height:.95}
  .hero__lede{display:none}
  .hero__cta{flex-wrap:nowrap; gap:.55rem; margin-top:1.2rem}
  .hero__cta .btn{padding:.7rem 1.05rem; font-size:.74rem; letter-spacing:.09em; white-space:nowrap}
  .hero__sub{display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1rem;
    align-content:start; align-items:start; margin-top:1.2rem; padding-top:.9rem}
  .hero__stat{margin:0}
  .hero__stat dt{font-size:.6rem; letter-spacing:.12em}
  .hero__stat dd{font-size:1.02rem}
  .hero__dots{bottom:1rem; left:1rem; right:auto}
  .hdot{width:24px} .hdot.on{width:38px}
}
@media (max-width:400px){
  .hero h1{font-size:2rem}
  .hero__cta .btn{padding:.64rem .85rem; font-size:.7rem}
  .hero__stat dd{font-size:.95rem}
}

/* =============================================================
   WHO WE ARE
   Body text runs a notch larger here than elsewhere, per feedback.
   ============================================================= */
#company p, #company li{font-size:1.125rem; line-height:1.62}
.lead{font-size:1.28rem; line-height:1.5; color:var(--tx2); max-width:68ch; margin:0 0 clamp(2.2rem,4vw,3.2rem)}
.sub-h{font-family:var(--f-d); font-weight:600; font-size:clamp(1.3rem,2.4vw,1.75rem);
  letter-spacing:.04em; text-transform:uppercase; color:var(--tx);
  margin:clamp(2.4rem,4.5vw,3.4rem) 0 1.1rem}
.opcards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
.opcard{border:1px solid var(--line); border-radius:3px; padding:1.4rem 1.5rem 1.6rem; background:var(--panel)}
.opcard h4{margin:0 0 .6rem; font-family:var(--f-d); font-weight:600; font-size:1.12rem;
  letter-spacing:.03em; text-transform:uppercase; color:var(--tx); line-height:1.2}
.opcard p{margin:0; font-size:1rem !important; color:var(--tx2); line-height:1.55}
.twocol{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:start}
.ticks{list-style:none; margin:0; padding:0}
.ticks li{position:relative; padding-left:1.5rem; margin-bottom:.75rem; color:var(--tx2)}
.ticks li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--brand)}
.ticks li b{color:var(--tx); font-weight:500}
.founder{margin:clamp(2.6rem,5vw,3.8rem) 0 0; padding:clamp(1.6rem,3vw,2.4rem) 0 0;
  border-top:1px solid var(--line)}
.founder p{margin:0; font-family:var(--f-d); font-weight:300; font-style:italic;
  font-size:clamp(1.15rem,2vw,1.42rem) !important; line-height:1.48; color:var(--tx)}
.founder cite{display:block; margin-top:1rem; font-family:var(--f-l); font-style:normal;
  font-weight:500; font-size:.88rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brand)}


@media (max-width:900px){
  .opcards{grid-template-columns:1fr}
  .twocol{grid-template-columns:1fr}
}

/* =============================================================
   GALLERY
   ============================================================= */
.gfilter{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:clamp(2rem,4vw,3rem)}
.gchip{cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--tx2);
  border-radius:99px; padding:.56rem 1.05rem; font-family:var(--f-l); font-weight:500;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  transition:color .25s, border-color .25s, background .25s}
.gchip:hover{color:var(--tx); border-color:color-mix(in srgb, var(--brand) 55%, transparent)}
.gchip.on{background:var(--brand); border-color:var(--brand); color:#12180F}
.gchip:focus-visible{outline:2px solid var(--brand); outline-offset:3px}

.ggroup{margin-bottom:clamp(2.4rem,5vw,4rem)}
.ghead{display:flex; align-items:baseline; gap:.8rem; margin:0 0 1.1rem;
  font-family:var(--f-d); font-weight:600; font-size:1.4rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--tx)}
.ghead span{font-family:var(--f-l); font-size:.78rem; letter-spacing:.16em; color:var(--brand)}
.ghead::after{content:""; flex:1; height:1px; background:var(--line)}
.gsubgroup{margin-bottom:clamp(1.6rem,3.5vw,2.6rem)}
.gsubgroup:last-child{margin-bottom:0}
.gsub{display:flex; align-items:baseline; gap:.7rem; margin:0 0 .9rem;
  font-family:var(--f-d); font-weight:600; font-size:1.05rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tx)}
.gsub span{font-family:var(--f-l); font-size:.72rem; letter-spacing:.16em; color:var(--brand)}
.ggrid{display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem}
.gcell{margin:0}
.gbtn{display:block; width:100%; padding:0; border:1px solid var(--line); cursor:pointer;
  background:var(--bg2); border-radius:3px; overflow:hidden; position:relative;
  aspect-ratio:4/3; transition:border-color .3s var(--e), transform .3s var(--e)}
.gbtn picture, .gbtn img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--e)}
.gbtn:hover{border-color:var(--brand); transform:translateY(-2px)}
.gbtn:hover img{transform:scale(1.05)}
.gbtn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
@media (max-width:1000px){ .ggrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:680px){ .ggrid{grid-template-columns:repeat(2,1fr)} }

/* ---- lightbox ---- */
html.lb-open, html.lb-open body{overflow:hidden}
.lb{position:fixed; inset:0; z-index:200; background:rgba(6,10,7,.95);
  display:grid; place-items:center; padding:clamp(1rem,4vw,3rem)}
.lb[hidden]{display:none}
.lb__f{margin:0; max-width:min(1600px,100%); max-height:100%; display:flex;
  flex-direction:column; align-items:center; gap:.9rem}
.lb__f img{max-width:100%; max-height:calc(100svh - 9rem); width:auto; height:auto;
  display:block; border-radius:3px}
.lb__f figcaption{font-family:var(--f-l); font-weight:500; font-size:.82rem;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(242,237,225,.62); text-align:center}
.lb button{position:absolute; cursor:pointer; background:rgba(242,237,225,.08);
  border:1px solid rgba(242,237,225,.2); color:#F2EDE1; border-radius:50%;
  width:48px; height:48px; display:grid; place-items:center; font-size:1.4rem; line-height:1;
  transition:background .25s, border-color .25s}
.lb button:hover{background:rgba(242,237,225,.18); border-color:var(--ink-brand)}
.lb button:focus-visible{outline:2px solid var(--ink-brand); outline-offset:3px}
.lb__x{top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); font-size:1.1rem}
.lb__p{left:clamp(.6rem,2vw,2rem); top:50%; transform:translateY(-50%)}
.lb__n{right:clamp(.6rem,2vw,2rem); top:50%; transform:translateY(-50%)}
@media (max-width:560px){
  .lb button{width:42px; height:42px}
  .lb__p{left:.5rem} .lb__n{right:.5rem}
}


/* ---- unresolved content, must not ship unnoticed ---- */
.todo{display:block; margin:0; padding:.85rem 1.1rem; border:2px dashed #C9553D;
  border-radius:3px; background:color-mix(in srgb, #C9553D 10%, transparent);
  color:#E0806C !important; font-family:var(--f-l); font-weight:500;
  font-size:.86rem !important; letter-spacing:.06em; line-height:1.4}
.lu__img--none{display:grid; place-items:center; background:
  linear-gradient(140deg, color-mix(in srgb, var(--brand) 22%, var(--bg2)), var(--bg2))}
.lu__img--none span{font-family:var(--f-d); font-weight:600;
  font-size:clamp(1.1rem,2.4vw,1.5rem); letter-spacing:.06em; text-transform:uppercase;
  color:color-mix(in srgb, var(--brand) 85%, transparent)}
.sub-line{display:block; font-size:.92em; opacity:.85}

/* a TODO is never hidden behind a hover state */
.room__c .todo{max-height:none !important; opacity:1 !important; margin-top:.6rem}


/* ---- The Team: founder across the top, the three below, 4:3 throughout ---- */
.crew{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2.2rem,3.6vw,3.4rem) clamp(1.8rem,3vw,3rem);
  margin-top:clamp(2rem,4vw,3rem); align-items:start}

.crew__f{margin:0 0 clamp(1rem,1.6vw,1.4rem); overflow:hidden;
  aspect-ratio:4/3; background:var(--bg2);
  box-shadow:0 18px 44px -28px rgba(18,24,15,.6)}
.crew__f img{display:block; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--e)}
.crew__m:hover .crew__f img{transform:scale(1.035)}

.crew__role{display:flex; align-items:center; gap:.7rem; margin:0 0 .5rem;
  font-family:var(--f-l); font-weight:500; font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brand); line-height:1.35}
.crew__role::before{content:""; flex:0 0 auto; width:1.4rem; height:1px; background:var(--brand)}
.crew__c h3{margin:0 0 .75rem; padding-bottom:.7rem; font-family:var(--f-d); font-weight:600;
  color:var(--tx); font-size:clamp(1.25rem,1.8vw,1.6rem); line-height:1.05; letter-spacing:.01em;
  border-bottom:1px solid var(--line2)}
.crew__bio{margin:0; color:var(--tx2); line-height:1.66;
  font-size:clamp(.86rem,.92vw,.93rem)}

/* founder: full width, photo beside the text */
.crew__m--lead{grid-column:1 / -1; display:grid; align-items:center;
  grid-template-columns:minmax(0,46%) minmax(0,1fr); gap:clamp(1.8rem,3.5vw,3.6rem);
  padding-bottom:clamp(1.6rem,3vw,2.4rem);
  border-bottom:1px solid color-mix(in srgb, var(--tx) 13%, transparent)}
.crew__m--lead .crew__f{margin:0}
.crew__m--lead .crew__c h3{font-size:clamp(1.7rem,2.9vw,2.5rem);
  padding-bottom:.85rem; margin-bottom:.95rem}
.crew__m--lead .crew__role{font-size:.72rem; margin-bottom:.65rem}
.crew__m--lead .crew__bio{font-size:clamp(.95rem,1.1vw,1.05rem); line-height:1.72; max-width:60ch}

@media (max-width:980px){
  .crew{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crew__m--lead{grid-column:1 / -1}
}
@media (max-width:700px){
  .crew{grid-template-columns:minmax(0,1fr); gap:clamp(2.2rem,7vw,3rem)}
  .crew__m--lead{grid-template-columns:minmax(0,1fr); gap:1.2rem}
  .crew__m--lead .crew__f{margin:0 0 1rem}
}


/* ================= HORIZONTAL RAIL (species / gallery) ================= */
.rail-sec{padding-block:clamp(3.4rem,7vw,6rem)}
.rail-top{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end;
  gap:1.5rem; margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.rail-top h2{margin:.5rem 0 0; font-family:var(--f-d); font-weight:600; color:var(--tx);
  font-size:clamp(2rem,4.6vw,3.6rem); line-height:.98; letter-spacing:.01em}
.rail-top h2 em{font-style:italic; font-weight:300; color:var(--brand)}
.rail-top .rail-sub{margin:.9rem 0 0; color:var(--tx2); max-width:44ch; line-height:1.6;
  font-size:clamp(.95rem,1.1vw,1.05rem)}
.rail-nav{display:flex; align-items:center; gap:.7rem; white-space:nowrap}
.rail-nav button{width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--tx);
  display:grid; place-items:center; transition:background .25s, border-color .25s, opacity .25s}
.rail-nav button:hover:not(:disabled){background:color-mix(in srgb, var(--brand) 16%, transparent);
  border-color:var(--brand)}
.rail-nav button:disabled{opacity:.3; cursor:default}
.rail-nav button svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2}
.rail-count{font-family:var(--f-l); font-weight:500; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx3); margin-left:.4rem}
.rail-count b{color:var(--tx); font-weight:600}

/* the scroller itself bleeds to the right edge of the viewport */
.rail-wrap{margin-right:calc((100% - var(--shell)) / -2); overflow:hidden}
.rail{display:flex; gap:clamp(.9rem,1.6vw,1.4rem); overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding-bottom:.5rem; scrollbar-width:none; -ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
.rail{cursor:grab}
.rail.is-drag{cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none}
.rail.is-drag a{pointer-events:none}
.rail img{-webkit-user-drag:none; user-select:none}
.rail > *{scroll-snap-align:start; flex:0 0 clamp(200px, 23vw, 310px)}

.rcard{position:relative; display:block; text-decoration:none; color:inherit;
  border-radius:4px; overflow:hidden; background:var(--bg2); aspect-ratio:4/5;
  box-shadow:0 20px 50px -30px rgba(0,0,0,.85)}
.rcard img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s var(--e)}
.rcard:hover img{transform:scale(1.05)}
.rcard::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(8,13,10,.92) 0%, rgba(8,13,10,.45) 28%, rgba(8,13,10,0) 58%)}
.rcard__tag{position:absolute; top:.85rem; left:.85rem; z-index:2;
  display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .65rem; border-radius:99px;
  background:rgba(8,13,10,.72); backdrop-filter:blur(6px);
  font-family:var(--f-l); font-weight:500; font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:#F2EDE1}
.rcard__b{position:absolute; left:.95rem; right:.95rem; bottom:.9rem; z-index:2}
.rcard__n{display:block; font-family:var(--f-d); font-weight:600; color:#FBF7EE;
  font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.1; letter-spacing:.01em}
.rcard__m{display:block; margin-top:.3rem; font-family:var(--f-l); font-weight:500;
  font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(251,247,238,.72)}
.rail-foot{margin-top:clamp(1.4rem,2.5vw,2rem)}
/* .btn--o is hardcoded light for the hero; inside a rail it must follow the band */
.rail-foot .btn--o{border:1px solid var(--line); color:var(--tx)}
.rail-foot .btn--o:hover{border-color:var(--brand); color:var(--brand); transform:translateY(-2px)}

@media (max-width:760px){
  .rail-top{grid-template-columns:minmax(0,1fr)}
  .rail-nav{display:none}
  .rail > *{flex:0 0 68vw}
}