/* ═══════════════════════════════════════════════════════════════════
   LUCERA — homepage. The system lives in assets/base.css; only what is
   specific to this page is below.

   One light source. It rises at the top left of the hero, it is the
   same sun on the mountain, and every ray on the page is a hard-edged
   wedge sitting directly against the next one. Nothing is blurred.
   ═══════════════════════════════════════════════════════════════════ */

/* ══ HERO ═════════════════════════════════════════════════════════ */
/* 100svh in view plus the 160svh hold — must equal what heroBuild sets
   inline (100 + ANIM.hold), or anchor jumps land against a layout that
   then shifts under the reader once the script runs */
#hero{padding:0;height:260svh}
/* a landing from the menu keeps the heading clear of the fixed bar */
#how,#five,#track,#team,#news,#talk{scroll-margin-top:63px}
#hero .pin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink);isolation:isolate}
#hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
#hero img.bg{z-index:1}
#hero img.fg{z-index:3}
#sweep{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;
  mix-blend-mode:screen}
#hero .tone{position:absolute;inset:0;z-index:4;pointer-events:none;background:
  linear-gradient(180deg,rgba(4,9,22,.30) 0%,rgba(4,9,22,0) 24%,rgba(4,9,22,.16) 44%,
    rgba(4,9,22,.74) 76%,rgba(4,9,22,.90) 100%),
  linear-gradient(96deg,rgba(4,9,22,.34) 0%,rgba(4,9,22,.06) 42%,rgba(4,9,22,0) 66%)}
#hero .hwrap{position:absolute;inset:0;z-index:6;display:flex;align-items:flex-end;
  padding:0 var(--gut) clamp(86px,13vh,150px);pointer-events:none}
#hero .hwrap>.in{width:100%;pointer-events:auto;will-change:transform,opacity}
#hero h1{max-width:35ch;font-size:var(--t-hero);text-wrap:balance}
#hero .teaser.two{margin-top:clamp(11px,1.1vw,15px)}
#hero .teaser{margin-top:clamp(18px,2vw,26px);max-width:74ch;font-size:17.5px;line-height:1.62;
  color:#C9D5EA;text-wrap:pretty}
#hero .acts{margin-top:clamp(28px,3vw,44px);display:flex;gap:16px;flex-wrap:wrap}
.cue{position:absolute;left:var(--gut);bottom:30px;z-index:7;display:flex;align-items:center;gap:13px;
  font-family:var(--fl),var(--flk);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.46)}
.cue b{display:block;width:46px;height:1px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.cue b::after{content:"";position:absolute;inset:0;background:var(--sun);animation:sweep 2.6s var(--e) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ══ EVIDENCE IN PRACTICE — the prism and the three case studies ═══ */
/* An ordinary section: the first case stands open, another opens on a
   click and stays. Each box carries a small prism with its own ray lit. */
.how{background:linear-gradient(180deg,var(--ink),var(--navy) 34%)}
/* The heading runs across the full width on one line; below it the intro
   and prism on the left, the case studies beside them, both starting on
   the same line — the whole band on one screen. */
.howgrid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  grid-template-rows:auto 1fr;column-gap:clamp(40px,5.4vw,104px)}
.howhead{grid-column:1 / -1;grid-row:1;margin-bottom:16px}
.howleft{grid-column:1;grid-row:2;display:flex;flex-direction:column}
.lenscol{grid-column:2;grid-row:2;align-self:start}
.howhead .label{margin-bottom:16px}
.howhead h2{max-width:none}
.howleft .lede{margin-top:0;max-width:none;font-size:16.5px;line-height:1.6}
.howleft .lede.two{margin-top:10px}
.prismcol{position:relative}
#prism{width:100%;max-width:460px;display:block;margin:0 auto;overflow:visible}
#prism .glass{fill:rgba(180,220,255,.05);stroke:rgba(200,232,255,.5);stroke-width:1.1}
#prism .bracket{fill:rgba(255,255,255,.9)}
#prism .facet{transition:fill-opacity .5s var(--e)}
#prism .band{mix-blend-mode:screen;transition:opacity .5s var(--e)}
#prism .core{transition:opacity .5s var(--e);mix-blend-mode:screen}

.lenscol>.label{margin-bottom:18px}
.hows{border-top:1px solid var(--hair)}
.hows .row{border-bottom:1px solid var(--hair);cursor:pointer;position:relative;
  transition:background .4s var(--e)}
.hows .row .hd{display:flex;gap:16px;align-items:center;
  padding:clamp(15px,1.5vw,21px) 0;transition:padding .4s var(--e)}
.hows .row b{font-family:var(--fd),var(--fdk);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(19px,1.95vw,27px);line-height:1.12;color:#8695B5;display:block;flex:1;
  transition:color .35s var(--e)}
/* the box's own miniature prism, left of the heading — a phone-only
   companion, since the big prism does this job on desktop. Its ray stays
   lit and the whole mark brightens when the box is the open one. */
.hows .row .mini{display:none;width:42px;height:auto;flex:none;opacity:.45;
  transition:opacity .35s var(--e)}
.hows .row.on .mini{opacity:1}
.hows .row.on{background:linear-gradient(90deg,rgba(0,171,218,.20),rgba(0,171,218,.04) 46%,rgba(0,171,218,0) 76%)}
.hows .row.on .hd{padding-left:20px}
.hows .row.on b{color:#fff}
.hows .row::before{content:"";position:absolute;left:0;top:0;bottom:-1px;width:3px;
  background:var(--c,var(--cyan));transform:scaleY(0);transition:transform .42s var(--e)}
.hows .row.on::before{transform:scaleY(1)}
.hows .row .bd{overflow:hidden;height:0;opacity:0;transition:height .55s var(--e),opacity .4s var(--e)}
.hows .row.on .bd{opacity:1}
.hows .row .bd p{padding:0 0 clamp(14px,1.4vw,18px) 20px;max-width:62ch;
  font-size:clamp(15px,1.15vw,17px);line-height:1.64;color:#B6C4DE}
/* the case's approach line leads; the account of it follows */
.hows .row .bd p:first-child{font-weight:600;color:#E4ECF8}
.hows .row .bd .go{padding-bottom:clamp(20px,2.1vw,28px)}
.hows .row .bd .go a{font-family:var(--fl),var(--flk);font-weight:500;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;text-decoration:none;
  display:inline-flex;gap:9px;align-items:center;
  transition:color .24s var(--e)}
.hows .row .bd .go a:hover{color:var(--cyan)}
.hows .row .bd .go a span{font-style:normal}

/* Beside each other, the band is a screen tall under the bar, and every
   size in it answers to the window's height as well as its width — the
   intro is two long paragraphs, and a shallow laptop screen must still
   hold heading, intro, prism and an open case at once. */
@media(min-width:1041px){
  /* the content is centred in that height, so the padding is only a floor */
  .how{min-height:calc(100svh - 63px);display:flex;align-items:center;
    padding-top:clamp(24px,4.5vh,64px);padding-bottom:clamp(24px,4.5vh,64px)}
  .how>.in{width:100%}
  .howhead{margin-bottom:clamp(20px,3.8vh,40px)}
  .howhead h2{font-size:calc(clamp(29px,min(4.2vw,7vh),60px)*var(--ds))}
  .howleft .lede{font-size:clamp(14.5px,min(1.1vw,2.1vh),16.5px);line-height:1.62}
  /* the intro's capitals start on the case box's top edge — the line's
     leading above them is taken back */
  .howleft .lede:first-child{margin-top:-.477em}
  .howleft .lede.two{margin-top:clamp(8px,1.3vh,12px)}
  /* the prism settles at the foot of the column, level with the last case;
     it is sized by height, and its empty left margin is pulled back so
     the bracket stands on the text's edge */
  .prismcol{margin-top:auto;padding-top:clamp(18px,3.4vh,44px)}
  #prism{--ph:clamp(140px,25vh,290px);height:var(--ph);width:auto;max-width:100%;
    margin:0 0 0 calc(var(--ph) * -.136)}
  .hows .row .hd{padding:clamp(12px,1.9vh,21px) 0}
  .hows .row b{font-size:clamp(18px,min(1.7vw,2.9vh),25px)}
  .hows .row .bd p{padding-bottom:clamp(10px,1.5vh,18px);font-size:clamp(14.5px,min(1.15vw,2.05vh),17px)}
  .hows .row .bd .go{padding-bottom:clamp(14px,2.2vh,28px)}
}

/* ══ THE FIVE DECISIONS — the mountain ════════════════════════════ */
/* The hero and this band show the same photograph. This one is pulled up
   over the hero's hold and fades in on top of it, so the picture never
   moves or slides — the words on it change while the mountain stays put.
   --five-in runs 0 to 1 across that handover (set in home.js). */
#five{padding:0;background:transparent;height:260svh;margin-top:-170svh;
  position:relative;z-index:2}
#five .pin{position:sticky;top:0;height:100svh;min-height:660px;overflow:hidden;
  background:#0A1735;isolation:isolate;opacity:var(--five-in,1);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
#hero .cue{opacity:calc(1 - var(--five-in,0))}
#five img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
#five img.mbg{z-index:1;filter:brightness(1.05) saturate(1.02) contrast(.97)}
#mbeam{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;
  mix-blend-mode:screen;transition:opacity .5s var(--e)}
#mglow{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;
  transition:background .8s var(--e)}
#five .lift{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(198,226,255,.16),rgba(198,226,255,.05) 42%,transparent 66%)}
/* the picture keeps its light. Only the corner the words sit in is
   held back, and only as far as it has to be. */
#five .scrim{position:absolute;inset:0;z-index:5;pointer-events:none;background:
  radial-gradient(140% 104% at -8% -10%,rgba(4,10,26,.90) 0%,rgba(4,10,26,.66) 28%,
    rgba(4,10,26,.30) 48%,rgba(4,10,26,0) 70%),
  linear-gradient(180deg,rgba(6,14,36,.30) 0%,rgba(6,14,36,0) 18%,
    rgba(5,12,32,0) 62%,rgba(5,12,32,.46) 100%)}
#mesh{position:absolute;left:0;right:0;bottom:0;height:40%;z-index:6;pointer-events:none}
#mesh .edge{fill:none;stroke-width:1}
#mesh .pt{stroke:none}
#mesh .zl{font-family:var(--fl),var(--flk);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;paint-order:stroke;stroke:rgba(5,12,32,.62);stroke-width:3.4;
  stroke-linejoin:round}
#mesh .zr{stroke-width:1.2;opacity:.75}
#wp{position:absolute;inset:0;width:100%;height:100%;z-index:7;overflow:visible}
/* the trail — seven concentric strokes falling away, so it reads as a
   soft glow without a single blurred edge. Ice and white, not orange. */
#wp [class^="t-"]{fill:none;stroke-linecap:round;stroke-linejoin:round}
#wp .t-g6{stroke:#5FC8E8;stroke-width:38;opacity:.06}
#wp .t-g5{stroke:#7FD8F0;stroke-width:26;opacity:.08}
#wp .t-g4{stroke:#9EE4F8;stroke-width:17;opacity:.11}
#wp .t-g3{stroke:#BFEFFB;stroke-width:10.5;opacity:.17}
#wp .t-g2{stroke:#DDF6FE;stroke-width:6.2;opacity:.28}
#wp .t-g1{stroke:#F2FCFF;stroke-width:3.2;opacity:.52}
#wp .t-core{stroke:#FFFFFF;stroke-width:1.5;opacity:.95}
#wp .node{cursor:pointer;opacity:.62;transition:opacity .5s var(--e)}
#wp .node.on{opacity:1}
#wp .ring{fill:rgba(6,14,34,.7);stroke-width:1.5;transition:fill .4s var(--e),stroke-width .4s var(--e)}
#wp .aura{fill:none;stroke:#F2FCFF;stroke-width:1.2;opacity:0;transition:opacity .5s var(--e)}
#wp .node.on .aura{opacity:.85}
#wp .aura2{fill:none;stroke:#9EE4F8;stroke-width:1;opacity:0;transition:opacity .6s var(--e)}
#wp .node.on .aura2{opacity:.4}
#wp .node.on .ring{fill:#fff;stroke-width:3}
#wp .nn{font-family:var(--fl),var(--flk);font-weight:500;font-size:18px;fill:#fff;
  transition:fill .4s var(--e)}
#wp .node.on .nn{fill:#08132B}
#wp .qplate{fill:rgba(7,15,36,.62);stroke:rgba(255,255,255,.22);stroke-width:1;
  transition:fill .4s var(--e),stroke .4s var(--e)}
#wp .node.on .qplate{fill:rgba(255,255,255,.95);stroke:rgba(255,255,255,.95)}
#wp .qt{font-family:var(--fb),sans-serif;font-size:14.5px;fill:rgba(232,240,252,.84);
  transition:fill .4s var(--e)}
#wp .node.on .qt{fill:#0C1533}

/* the heading sits directly on its panel, one composed block at the foot
   of the frame — not pinned to the top with a void between the two */
#five .mhead{position:relative;z-index:8;width:min(760px,54vw);
  margin:0 var(--gut) clamp(44px,6.5vh,76px);pointer-events:none}
/* sized on both axes: the question box below rides up on a short viewport,
   so the heading has to give way rather than collide with it */
#five .mhead h2{font-size:calc(clamp(29px,min(4.2vw,6.7vh),60px)*var(--ds));max-width:28ch}
#five .mhead p{margin-top:15px;font-size:16.5px;line-height:1.56;color:#C6D5EB;max-width:52ch}
/* anchored to the foot of the frame and grown upward: the studies differ
   in length, and this way the longest can never run off the bottom */
.qbox{position:relative;z-index:9;display:flex;
  margin:0 var(--gut);
  width:min(680px,52vw);box-shadow:0 46px 110px rgba(2,6,20,.5)}
.rail{width:58px;flex:none;background:#08122B;display:flex;flex-direction:column-reverse}
.rail button{flex:1;background:transparent;border:0;cursor:pointer;color:#63719A;position:relative;
  font-family:var(--fl),var(--flk);font-weight:500;font-size:14px;line-height:1;
  transition:color .3s var(--e),background .3s var(--e)}
.rail button::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--cyan);transform:scaleY(0);transition:transform .36s var(--e)}
.rail button:hover{color:#B9C6E2}
.rail button.on{color:#fff;background:rgba(255,255,255,.05)}
.rail button.on::before{transform:scaleY(1)}
.qpanel{background:var(--paper);color:var(--lt);padding:clamp(22px,2.2vw,32px);flex:1;
  min-height:302px;display:flex;flex-direction:column}
.qpanel h3{color:var(--lt);margin-top:0;
  font-size:var(--t-card);text-wrap:balance}
/* the panel's text at the size of the case-study boxes */
.qpanel p{margin-top:14px;font-size:clamp(15px,1.15vw,17px);line-height:1.64;color:var(--lt2)}
/* what was asked, then what we found, then what came of it */
.qpanel .tzr{margin-top:13px;font-size:15px;line-height:1.55;color:var(--lt2)}
.qpanel .hi{margin-top:14px;font-size:15px;line-height:1.5;color:var(--lt);font-weight:500}
.qpanel .sep{margin-top:auto;padding-top:14px}
.qpanel .row{display:flex;gap:24px;margin-top:13px;flex-wrap:wrap}
.qpanel a{display:inline-flex;gap:9px;align-items:center;font-family:var(--fl),var(--flk);
  font-weight:500;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lt);
  text-decoration:none;transition:.24s var(--e)}
.qpanel a:hover{color:var(--cyanD)}

/* ══ TRACK RECORD — the whole section on the range ════════════════ */
/* the figures as a plain list is the narrow-screen view — the media query
   further down turns it on; on a wide screen the peaks carry them */
.numlist{display:none}
.track{padding:0;position:relative;overflow:hidden;min-height:100svh;isolation:isolate;
  display:flex;align-items:flex-start;background:#0C2A55}
.track .pic{position:absolute;inset:0;background:url('../img/range.jpg') center 62% / cover;z-index:0}
.track .grade{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(8,20,50,.66) 0%,rgba(8,20,50,.26) 26%,rgba(8,20,50,.02) 48%,rgba(6,16,42,.34) 82%,rgba(5,13,36,.80) 100%)}
#tsweep{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;
  mix-blend-mode:screen}
/* The photograph bleeds, so this section carries no padding of its own and
   the container supplies the gutter. Widening the container by exactly that
   gutter puts the text back on the same line as every other section. */
.track .in{position:relative;z-index:4;width:100%;max-width:calc(var(--max) + var(--gut)*2);
  padding:clamp(50px,5.4vw,72px) var(--gut) 0}
.track h2{max-width:20ch}
.track .lede{color:#D3E3F5;max-width:46ch;margin-top:16px;font-size:18px;line-height:1.55}
.track .in .link{margin-top:clamp(18px,2vw,26px)}
.clients{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:0 var(--gut)
  clamp(26px,3.2vw,44px);}
.clients .bar{border-top:1px solid rgba(255,255,255,.22);padding-top:clamp(18px,2vw,26px);
  display:flex;align-items:center;gap:clamp(20px,3.4vw,56px);flex-wrap:wrap}
.clients .k{font-family:var(--fl),var(--flk);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(233,241,252,.72);flex:none;max-width:27ch;line-height:1.5}
.clients .row{display:flex;align-items:center;gap:clamp(24px,3.8vw,62px);flex-wrap:wrap;flex:1}
.clients img{height:clamp(20px,2.1vw,30px);width:auto;display:block;opacity:.82;
  filter:brightness(0) invert(1);transition:opacity .3s var(--e)}
.clients img:hover{opacity:1}
.clients .wordmark{font-family:var(--fb),sans-serif;font-weight:700;letter-spacing:.02em;
  font-size:clamp(19px,2vw,27px);color:#fff;opacity:.82;line-height:1;
  transition:opacity .3s var(--e)}
.clients .wordmark:hover{opacity:1}
#peaks{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
#peaks .pk{font-family:var(--fd),var(--fdk);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(34px,3.9vw,58px);fill:#fff}
#peaks .pl{font-family:var(--fb),sans-serif;font-size:15px;fill:#EAF2FC}
#peaks .stem{stroke:rgba(255,255,255,.5);stroke-width:1}
#peaks .cap{fill:var(--cyan)}

/* ══ WHO IS BEHIND IT — light ═════════════════════════════════════ */
.team .people{margin-top:clamp(38px,4.2vw,60px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,32px)}
.person{position:relative;overflow:hidden;background:#0B1435;min-height:min(56vw,520px);
  display:flex;align-items:flex-end}
.person img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 14%;transition:transform 1.1s var(--e)}
.person:hover img{transform:scale(1.035)}
.person .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;background:
  radial-gradient(120% 86% at 22% 8%,rgba(0,171,218,.26),transparent 62%),
  linear-gradient(152deg,#16295A,#080F26)}
.person .ph b{font-family:var(--fd),var(--fdk);font-weight:400;font-size:clamp(50px,5vw,76px);
  line-height:1;color:rgba(255,255,255,.3)}
.person .ph i{font-style:normal;font-family:var(--fl),var(--flk);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(170,200,235,.44)}
.person .veil{position:absolute;inset:0;background:
  linear-gradient(180deg,transparent 32%,rgba(8,15,42,.6) 64%,rgba(6,12,32,.94))}
.person .bd{position:relative;z-index:2;padding:clamp(26px,2.6vw,40px);width:100%}
.person h3{color:#fff;font-size:var(--t-sub)}
/* narrow screens only: the + beside the name opens the biography */
.bioplus{display:none;appearance:none;border:1px solid rgba(255,255,255,.55);
  background:rgba(4,9,22,.35);color:#fff;width:27px;height:27px;border-radius:50%;
  font-size:17px;line-height:1;margin-left:12px;vertical-align:middle;cursor:pointer;
  align-items:center;justify-content:center;padding:0}
.person .role{margin-top:12px;display:inline-block;font-family:var(--fl),var(--flk);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ice)}
/* Name and role always; the biography arrives on hover. The row animates
   from 0fr to 1fr, so the reveal follows the text's own height exactly —
   no guessed max-height to overshoot and judder against. */
.person .bio{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .62s var(--e)}
.person .bio p{overflow:hidden;min-height:0;font-size:15px;line-height:1.58;
  color:#D3DEEF;max-width:44ch;opacity:0;transition:opacity .4s var(--e) .05s}
.person:hover .bio,.person:focus-within .bio{grid-template-rows:1fr}
.person:hover .bio p,.person:focus-within .bio p{padding-top:16px;opacity:1}
@media (hover:none){
  .person .bio{grid-template-rows:1fr}
  .person .bio p{opacity:1;padding-top:16px}
}
@media (prefers-reduced-motion:reduce){
  .person .bio{transition:none}
  .person .bio p{transition:none}
}
/* The founders on one photograph: a single wide card, two names at its
   foot. The reveal is per name — hovering a name opens that biography,
   not both — and the + / overlay works per name on a phone. */
.person.duo{grid-column:1/-1;min-height:min(54vw,720px)}
.person.duo img{object-position:50% 30%}
.duobd{display:flex;gap:clamp(28px,5vw,80px);align-items:flex-end}
.duobd .half{flex:1;min-width:0}
.person.duo:hover .bio{grid-template-rows:0fr}
.person.duo:hover .bio p{opacity:0;padding-top:0}
.duobd .half:hover .bio,.duobd .half:focus-within .bio{grid-template-rows:1fr}
.duobd .half:hover .bio p,.duobd .half:focus-within .bio p{padding-top:16px;opacity:1}

/* the team's paragraph follows the founders' directly, above the photograph */
.team .sechead .lede.two{margin-top:12px}

/* the biography overlay the + opens */
.biomodal{position:fixed;inset:0;z-index:120;background:rgba(4,9,22,.66);
  display:flex;align-items:center;justify-content:center;padding:22px}
.biomodal[hidden]{display:none}
.biomodal .card{position:relative;width:min(520px,100%);max-height:82vh;overflow:auto;
  background:#fff;border:1px solid var(--lthair);padding:30px 26px 26px}
.biomodal h3{color:var(--lt);font-size:var(--t-sub);padding-right:40px}
.biomodal .role{margin-top:10px;display:inline-block;font-family:var(--fl),var(--flk);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cyanD)}
.biomodal .txt p{margin-top:14px;font-size:15px;line-height:1.6;color:var(--lt2)}
.biomodal .x{position:absolute;top:8px;right:8px;appearance:none;border:0;
  background:transparent;font-size:26px;line-height:1;color:var(--lt3);
  cursor:pointer;padding:10px}

.crew:empty{display:none}
.crew{margin-top:clamp(30px,3.4vw,46px);display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,28px)}
.crew div{border-top:1px solid var(--lthair);padding-top:20px}
.crew b{display:block;font-family:var(--fd),var(--fdk);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(20px,1.9vw,26px);color:var(--lt)}
.crew p{margin-top:11px;font-size:14.5px;line-height:1.6;color:var(--lt2)}
.team .foot{margin-top:clamp(30px,3.2vw,44px)}

/* ══ NEWS & CONFERENCES — a cool light section ════════════════════ */
/* Cool paper, so it reads clearly against the warm CTA that follows it;
   a hairline seam marks the boundary between the two light bands. */
.news{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#EAEDF2 0%,#EFF1F5 60%,#E6E9EF 100%);
  border-bottom:1px solid rgba(12,21,51,.10);
  padding-block:clamp(66px,6.6vw,104px)}
#nrays{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  mix-blend-mode:multiply}
.news .in{position:relative;z-index:2}
.news .sechead h2{max-width:20ch}
.news .sechead .lede{margin-top:16px;max-width:56ch}
.newswrap{margin-top:clamp(28px,3vw,44px);display:grid;
  grid-template-columns:1.28fr minmax(228px,.62fr) minmax(236px,.66fr);
  gap:clamp(26px,3.2vw,52px);align-items:start}
#publications{scroll-margin-top:104px}
/* publications — a plain list: title, then who wrote it and where */
.pubs{list-style:none;counter-reset:none}
.pubs li{padding:clamp(13px,1.3vw,17px) 0;border-bottom:1px solid var(--lthair)}
.pubs a{display:block;text-decoration:none;transition:opacity .26s var(--e)}
.pubs b{display:block;font-weight:400;font-size:14.5px;line-height:1.38;color:var(--lt);
  transition:color .26s var(--e)}
.pubs a:hover b{color:var(--cyanD)}
.pubs span{display:block;margin-top:6px;font-size:11.5px;line-height:1.45;color:var(--lt3)}
.pubs span i{font-style:normal;color:var(--w3)}
.newswrap>section{padding:0}
/* the three content types must read as three sections, not one list:
   the kicker is set in the accent colour over a strong rule */
.nk{font-family:var(--fl),var(--flk);font-size:11.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cyanD);display:block;padding-bottom:12px;
  border-bottom:2px solid rgba(0,138,180,.4)}

/* the single featured item */
.newslead a.lead{display:block;text-decoration:none;padding:clamp(20px,2vw,28px) 0 0;
  transition:opacity .3s var(--e)}
.newslead .meta{display:flex;gap:14px;align-items:center;
  font-family:var(--fl),var(--flk);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase}
.newslead time{color:var(--lt3)}
.newslead em{font-style:normal;color:var(--w3);border:1px solid rgba(192,138,98,.42);padding:4px 9px}
.newslead h3{margin-top:16px;font-family:var(--fd),var(--fdk);font-weight:var(--dwt);
  letter-spacing:calc(-.02em*var(--dt));
  font-size:var(--t-card);line-height:1.12;color:var(--lt);max-width:30ch;
  transition:color .3s var(--e)}
.newslead a.lead:hover h3{color:var(--cyanD)}
.newslead p{margin-top:12px;font-size:14.5px;line-height:1.58;color:var(--lt2);max-width:60ch}
.newslead .more{display:inline-flex;gap:9px;align-items:center;margin-top:16px;
  font-family:var(--fl),var(--flk);font-weight:500;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--w3);border-bottom:1px solid rgba(192,138,98,.4);
  padding-bottom:5px;transition:.24s var(--e)}
.newslead a.lead:hover .more{color:var(--lt);border-color:var(--lt)}
.newslead .more i{font-style:normal;transition:transform .24s var(--e)}
.newslead a.lead:hover .more i{transform:translateX(4px)}
.news .foot{margin-top:clamp(22px,2.4vw,32px)}
.news .foot .link{color:var(--lt);border-color:var(--lthair)}
.news .foot .link:hover{color:var(--cyanD);border-color:var(--cyanD)}

/* each conference is a button that opens the event window */
.events .ev{appearance:none;background:none;border:0;font:inherit;color:inherit;text-align:left;
  width:100%;cursor:pointer;display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:18px;
  align-items:center;padding:clamp(13px,1.3vw,18px) 0;border-bottom:1px solid var(--lthair);
  text-decoration:none;transition:padding-left .34s var(--e)}
.events .ev:first-child{border-top:0}
.events .ev::after{content:"›";font-size:18px;line-height:1;color:var(--lt3);
  transition:transform .24s var(--e),color .24s var(--e)}
.events .ev:hover{padding-left:6px}
.events .ev:hover::after,.events .ev:focus-visible::after{color:var(--cyanD);transform:translateX(3px)}
.events .ev:hover .w b,.events .ev:focus-visible .w b{color:var(--cyanD)}
.events .ev:hover .d{border-color:rgba(5,137,186,.45)}
.events .ev:focus-visible{outline:2px solid var(--cyanD);outline-offset:2px}
.events .w .sub{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;margin-top:5px}
.events .w .sub i{margin-top:0}
.events .d{text-align:center;border:1px solid var(--lthair);padding:8px 0 7px;background:#fff;
  transition:border-color .3s var(--e),background .3s var(--e)}
.events .d b{display:block;font-family:var(--fd),var(--fdk);font-weight:400;font-size:21px;
  line-height:1;color:var(--lt)}
.events .d i{display:block;margin-top:3px;font-style:normal;font-family:var(--fl),var(--flk);
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--w3)}
.events .w b{display:block;font-weight:400;font-size:14.5px;line-height:1.4;color:var(--lt);
  transition:color .24s var(--e)}
.events .w i{display:block;margin-top:5px;font-style:normal;font-family:var(--fl),var(--flk);
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--lt3)}

/* ══ CTA — light, and the rays do the work ════════════════════════ */
section.cta{position:relative;overflow:hidden;text-align:center;isolation:isolate;
  background:linear-gradient(168deg,var(--wpale) 0%,var(--paper) 44%,#E5EAF2 100%);
  padding-block:clamp(110px,13vw,190px)}
#crays{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  mix-blend-mode:multiply}
#chalo{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
  mix-blend-mode:screen}
section.cta .in{position:relative;z-index:3}
section.cta h2{margin:0 auto;max-width:31ch}
section.cta .lede{margin:22px auto 0}
section.cta .acts{margin-top:clamp(30px,3.4vw,46px);display:flex;gap:26px;justify-content:center;
  flex-wrap:wrap;align-items:center}

/* ── short screens ────────────────────────────────────────────────────
   Two pinned sections have to fit one screen. On a shallow window the
   prism and the two large headings give way rather than push the section
   past the fold. */
@media(max-height:760px){
  #five .mhead h2{font-size:calc(clamp(29px,min(4.2vw,6.2vh),60px)*var(--ds))}
}

@media(max-width:1040px){
  .howgrid,.team .people,.crew,.newswrap{grid-template-columns:1fr}
  .howhead,.howleft,.lenscol{grid-column:1;grid-row:auto}
  .howhead{margin-bottom:22px}
  .prismcol{margin-top:28px;border-top:1px solid var(--hair);padding-top:28px}
  .lenscol{margin-top:26px}
  #prism{max-width:min(300px,62vw)}
  .hows .row .mini{display:block}
  .newswrap{gap:54px}

  /* ── Team: name and role only — the + opens the biography ──────── */
  .person .bio{display:none}
  .bioplus{display:inline-flex}
  /* the shared photograph runs taller, and the two names stack */
  .person.duo{min-height:min(108vw,500px)}
  .duobd{flex-direction:column;align-items:flex-start;gap:12px}

  /* ── The five questions: the panel follows the heading ───────────
     it was anchored to the bottom of the frame, which left a gap of
     bare photograph between the two */
  #five{height:auto;margin-top:0}
  #five .pin{position:relative;height:auto;min-height:100svh;opacity:1;
    justify-content:flex-start;padding-bottom:18px}
  /* keep the crop anchored to the path side of the photograph, on both
     mountains — the peak stays in frame (the JS maps with the same anchor) */
  #five img{object-position:80% 50%}
  #hero img{object-position:80% 50%}
  /* the numbered spots have no room on this crop — the panel carries the
     numbering; the trail itself stays */
  #wp .node{display:none}
  #hero .cue{opacity:1}
  .qbox{position:relative;bottom:auto}
  #five .mhead{position:relative;left:auto;top:auto;right:auto;width:auto;
    margin:0;padding:clamp(70px,8vh,100px) var(--gut) 0}
  #five .mhead h2{max-width:none}
  .qbox{position:relative;left:auto;right:auto;top:auto;bottom:auto;
    width:auto;margin:clamp(18px,4vw,26px) var(--gut) 0}

  /* ── Track record: the range behind, the figures as a list ───────
     the numbers were set on the peaks themselves, which needs a width
     this screen does not have */
  #peaks{display:none}
  .track{min-height:auto;padding-bottom:0;display:block}
  .track .in{padding-bottom:clamp(30px,7vw,44px)}
  .numlist{display:grid;list-style:none;margin-top:clamp(26px,6vw,38px);
    gap:clamp(14px,3.4vw,20px)}
  .numlist li{border-top:1px solid rgba(255,255,255,.22);padding-top:12px;
    display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline}
  .numlist b{font-family:var(--fd),var(--fdk);font-weight:400;letter-spacing:-.02em;
    font-size:clamp(30px,9vw,44px);line-height:1;color:#fff;min-width:2.4em}
  .numlist span{font-size:14.5px;line-height:1.45;color:#D3E3F5}

  /* the clients read as a label with the logos under it */
  .clients{position:relative;padding:0 var(--gut) clamp(34px,8vw,48px)}
  .clients .bar{flex-direction:column;align-items:flex-start;
    gap:clamp(16px,4vw,22px)}
  .clients .k{max-width:none}
  /* five marks on one line would be too small to read; they wrap */
  .clients .row{gap:18px 26px}
  .clients img{height:26px}
  .clients .wordmark{font-size:22px}
  /* the copy decides the height: on a short phone screen a fixed 100svh
     frame pushed the heading up under (and past) the bar */
  #hero{height:auto}
  #hero .pin{position:relative;height:auto;min-height:100svh;display:flex}
  #hero .hwrap{position:relative;inset:auto;
    padding-top:calc(63px + clamp(40px,7vh,72px));
    padding-bottom:clamp(56px,9vh,96px)}
  #five .mhead p{display:none}
  /* on a narrow screen the plates and the lake legend have nowhere to go —
     the path, its numbers and the panel carry the section instead */
  #wp .qplate,#wp .qt{display:none}
  #mesh .zl,#mesh .zr{display:none}
  #mesh{height:56%}
  .qpanel{min-height:0;padding:20px}
  .qpanel h3{font-size:25px;max-width:none}
  .qpanel p{font-size:15px;line-height:1.6;max-width:none}
  .rail{width:46px}
}

@media(max-width:700px){
  .track .in{padding-top:clamp(70px,16vw,110px)}
  #hero .teaser{font-size:15.5px;line-height:1.55;max-width:none}
  #hero .acts{gap:12px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}