/* ---------- tokens ---------- */
:root{
  --night:#071A24;
  --navy:#0F2D3D;
  --steel:#18465D;
  --cyan:#1DACB5;
  --green:#39B44A;
  --ice:#EDF2F3;
  --paper:#FFFFFF;
  --rule:rgba(15,45,61,.14);
  --rule-dark:rgba(255,255,255,.16);
  --aurora:linear-gradient(90deg,var(--green),var(--cyan));

  --sans:"Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Noto Serif",Georgia,"Times New Roman",serif;
  --mono:"Noto Sans Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --pad:clamp(1.25rem,5vw,5rem);
  --maxw:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--navy);
  font-family:var(--serif);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--steel);margin:0 0 1.25rem;
}
.on-dark .eyebrow{color:var(--cyan)}
h1,h2,h3,.h{font-family:var(--sans);font-weight:800;letter-spacing:-.025em;line-height:1.06;margin:0}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:1.12rem;letter-spacing:-.01em;line-height:1.3;font-weight:700}
p{margin:0 0 1rem}
.lede{font-size:clamp(1.02rem,1.5vw,1.19rem);line-height:1.68;max-width:60ch}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{padding-block:clamp(4rem,9vw,7.5rem)}
.section-head{max-width:64ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head p{margin-top:1.1rem}

/* ---------- header ---------- */
/* Fixed rather than sticky. On iOS the sticky header drifts up under the
   browser's own bar as its toolbar collapses during a scroll; a fixed bar is
   pinned to the visual viewport and stays put. The flow space it no longer
   occupies is given back as padding on main. */
header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(7,26,36,.94);
  border-bottom:1px solid var(--rule-dark);
}
main{padding-top:74px}
.bar{display:flex;align-items:center;gap:2rem;height:74px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.brand img{height:38px;width:auto;display:block}
nav{display:flex;gap:2rem;align-items:center}
nav a{
  font-family:var(--sans);font-size:.86rem;font-weight:600;letter-spacing:.01em;
  color:rgba(255,255,255,.8);text-decoration:none;padding:.4rem 0;position:relative;
}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--aurora);transition:right .32s ease}
nav a:hover{color:#fff}
nav a:hover::after{right:0}
@media (max-width:860px){nav{display:none}}
@media (max-width:620px){.brand img{height:30px}}

/* ---------- scroll stage ---------- */
.stage{position:relative;height:220svh;padding:0;background:var(--night);margin-top:-74px}
.stage-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
#sky{position:absolute;inset:0;width:100%;height:100%;display:block}
.badge-live{display:none}
.cue{
  position:absolute;left:50%;bottom:1.9rem;transform:translateX(-50%);margin:0;z-index:3;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.5);display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.cue::after{content:"";width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.5),transparent)}

/* ---------- intro ---------- */
.intro{
  background:var(--night);color:#fff;position:relative;z-index:3;
  margin-top:-50svh;padding-block:clamp(2rem,4vw,3.25rem) 0;
}
.intro h1{font-size:clamp(1.95rem,4.6vw,3.7rem);max-width:19ch;color:#fff;text-wrap:balance}
.intro h1 em{font-style:normal;background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro .lede{color:rgba(255,255,255,.78);margin-top:1.6rem}
.intro .eyebrow{color:rgba(255,255,255,.55)}
.cta-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}
.btn{
  font-family:var(--sans);font-size:.88rem;font-weight:700;letter-spacing:.01em;
  text-decoration:none;padding:.92rem 1.6rem;border-radius:2px;display:inline-block;
  transition:transform .2s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.btn-solid{background:var(--green);color:#04141B}
.btn-solid:hover{background:#48c95a;transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--rule-dark);color:#fff}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}

/* ---------- latitude traverse ---------- */
.traverse{
  position:relative;z-index:2;margin-top:clamp(3rem,7vw,5rem);
  border-top:1px solid var(--rule-dark);
}
.traverse-inner{max-width:var(--maxw);margin:0 auto;padding:1.1rem var(--pad) 1.6rem;position:relative}
.traverse-label{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin:0 0 1.9rem;
}
.axis{position:relative;height:1px;background:rgba(255,255,255,.16);margin-bottom:5.4rem}
.axis-run{
  position:absolute;left:0;top:0;height:1px;width:0;
  background:linear-gradient(90deg,rgba(57,180,74,0),rgba(57,180,74,.35) 45%,var(--green));
  pointer-events:none;
}
.axis-dot{
  position:absolute;top:50%;left:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:var(--green);opacity:0;pointer-events:none;
  box-shadow:0 0 12px rgba(57,180,74,.85),0 0 3px rgba(180,255,200,.9);
}
.station{
  position:absolute;top:0;transform:translate(-50%,-50%);
  background:none;border:0;padding:14px 10px;cursor:pointer;color:inherit;
}
.station .dot{
  display:block;width:9px;height:9px;border-radius:50%;
  background:var(--night);border:1.5px solid var(--cyan);transition:all .25s ease;
}
.station .txt{
  position:absolute;left:50%;transform:translateX(-50%);top:26px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;white-space:nowrap;
  color:rgba(255,255,255,.45);transition:color .3s ease;
}
.station[data-row="b"] .txt{top:64px}
.station[data-row="b"]::after{
  content:"";position:absolute;left:50%;top:20px;width:1px;height:40px;
  background:rgba(255,255,255,.14);
}
.station.edge-left .txt{left:0;transform:none;text-align:left}
.station.edge-right .txt{left:auto;right:0;transform:none;text-align:right}
.station .txt b{display:block;font-weight:500;color:rgba(255,255,255,.82);letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px}
.station:hover .dot,.station:focus-visible .dot{background:var(--green);border-color:var(--green);transform:scale(1.25)}
.station.passed .dot{background:var(--green);border-color:var(--green)}
.station.passed .txt{color:rgba(255,255,255,.72)}
.station.passed .txt b{color:var(--green)}
.station.hit .dot{transform:scale(1.6);box-shadow:0 0 14px rgba(57,180,74,.8)}
.station:hover .txt b,.station:focus-visible .txt b{color:var(--green)}
@media (max-width:720px){
  /* Vancouver and Port Alice are barely a degree apart: on a phone only the
     southern anchor is named, so the labels do not crowd */
  .station[data-lat="50.42"] .txt{display:none}
  .station .txt{font-size:.58rem;letter-spacing:.07em}
  /* the leader would cut through the neighbouring label at this width */
  .station[data-row="b"]::after{display:none}
  .station .txt b{letter-spacing:.10em}
  .traverse-label{margin-bottom:1.5rem}
  .axis{margin-bottom:4.6rem}
}

/* ---------- setup sequence ---------- */
.setup{background:var(--night);color:#fff;padding-block:0}
.setup-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.setup-copy{grid-column:1;grid-row:1;padding-block:clamp(4rem,9vw,7rem)}
.setup-head{margin-bottom:clamp(3rem,8vw,6rem)}
.setup h2{color:#fff;max-width:15ch}
.beat{
  min-height:64svh;display:flex;flex-direction:column;justify-content:center;
  max-width:44ch;opacity:.3;transition:opacity .5s ease;
}
.beat.live{opacity:1}
.beat-no{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);margin:0 0 .9rem;
}
.beat h3{color:#fff;font-size:clamp(1.3rem,2.3vw,1.75rem);margin-bottom:.7rem}
.beat p{color:rgba(255,255,255,.72);margin:0}
.setup-stage{grid-column:2;grid-row:1;position:sticky;top:0;height:100svh;align-self:start;pointer-events:none}
#rig{width:100%;height:100%;display:block}
.readout{
  position:absolute;left:0;bottom:clamp(2rem,7vh,4.5rem);
  display:flex;gap:1.4rem;flex-wrap:wrap;opacity:0;transition:opacity .6s ease;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:rgba(255,255,255,.72);
}
.readout.live{opacity:1}
.readout b{display:block;font-weight:500;font-size:.56rem;letter-spacing:.22em;color:var(--cyan);margin-bottom:.35rem}
@media (max-width:860px){
  /* the instrument runs centred and pinned, with the notes passing either side */
  .setup-grid{display:block;position:relative}
  /* the pinned stage runs the full height of the screen: a shorter box cut
     the instrument off along its own bottom edge partway down the section,
     which read as the model being clipped in mid-air */
  /* full-bleed: the stage lives inside the padded column, so it is pulled
     back out to the edges of the screen or the render is inset on both sides */
  .setup-stage{
    grid-column:auto;grid-row:auto;
    position:sticky;top:0;height:100svh;height:100dvh;
    width:100vw;margin-inline:calc(var(--pad) * -1);
    display:block;pointer-events:none;z-index:0;
  }
  .setup-copy{
    grid-column:auto;grid-row:auto;
    position:relative;z-index:1;
    margin-top:-84svh;padding-block:0 clamp(3rem,9vw,5rem);
  }
  .setup-head{margin-bottom:62svh}
  .beat{
    min-height:0;opacity:1;padding:0;border:0;
    width:47%;max-width:15rem;margin-block:16svh;
  }
  /* every note on the left, rather than alternating sides */
  .beat[data-beat="1"]{margin-left:0;text-align:left}
  .beat-no{margin-bottom:.4rem}
  .setup .beat h3{font-size:.98rem;line-height:1.3;margin-bottom:.45rem}
  .setup .beat p{
    display:block;font-size:.82rem;line-height:1.55;
    color:rgba(255,255,255,.66);margin:0;
  }
  .beat-more{margin-top:2rem}
  .readout{display:none}
}

/* ---------- services ---------- */
.services{background:var(--ice)}
.panels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,1.75rem)}
.panel{background:var(--paper);border-top:3px solid var(--steel);padding:clamp(1.6rem,3vw,2.4rem)}
.panel--capture{border-top-color:var(--green)}
.panel h3{font-size:1.35rem;letter-spacing:-.02em;margin-bottom:.35rem}
.panel .kicker{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-bottom:1.5rem}
.panel--capture .kicker{color:var(--green)}
.panel ul{list-style:none;margin:0;padding:0}
.panel li{
  font-family:var(--sans);font-size:.97rem;line-height:1.45;font-weight:500;
  padding:.85rem 0 .85rem 1.5rem;border-bottom:1px solid var(--rule);position:relative;
}
.panel li:last-child{border-bottom:0;padding-bottom:0}
.panel li::before{
  content:"";position:absolute;left:0;top:1.32em;width:8px;height:1px;background:var(--steel);
}
.panel--capture li::before{background:var(--green)}
@media (max-width:760px){.panels{grid-template-columns:1fr}}

/* ---------- projects ---------- */
.projects{background:var(--paper)}
.proj{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,9fr);gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;padding-block:clamp(2rem,4vw,3rem);border-top:1px solid var(--rule);
}
.proj:last-of-type{border-bottom:1px solid var(--rule)}
.proj-media{overflow:hidden;background:var(--ice)}
.proj-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;transform:scale(1.1);will-change:transform;transition:filter .6s ease}
.proj:hover .proj-media img{filter:saturate(1.08) brightness(1.05)}
.proj-meta{font-family:var(--mono);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:.9rem;display:flex;gap:.7rem;align-items:center}
.proj-meta i{font-style:normal;color:var(--steel);opacity:.65}
.proj h3{font-size:clamp(1.35rem,2.4vw,1.85rem);letter-spacing:-.025em;font-weight:800;margin-bottom:.7rem}
.proj-foot{
  margin:2rem 0 0;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;line-height:2;color:var(--steel);max-width:70ch;
}
.proj p{margin:0;max-width:52ch}
@media (max-width:760px){.proj{grid-template-columns:1fr}.proj-media{order:-1}}

/* ---------- safety ---------- */
.safety{background:var(--navy);color:#fff}
.safety h2{color:#fff;max-width:16ch}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:clamp(2.5rem,5vw,3.5rem) 0 clamp(2.5rem,5vw,3.5rem)}
.stat{padding:clamp(1.6rem,3vw,2.4rem) 1.25rem;text-align:center}
.stat:nth-child(1){background:var(--night)}
.stat:nth-child(2){background:var(--cyan);color:#04141B}
.stat:nth-child(3){background:var(--steel)}
.stat b{
  display:flex;justify-content:center;align-items:flex-start;
  font-family:var(--sans);font-weight:800;font-size:clamp(2.2rem,5vw,3.4rem);
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
}
.reel{display:block;height:1.06em;overflow:hidden}
.reel-strip{display:block;transform:translateY(0);will-change:transform;
  transition:transform 1.3s cubic-bezier(.18,.86,.26,1)}
.reel i{display:block;height:1.06em;line-height:1.06em;font-style:normal}
.stat b .suffix{display:block;opacity:0;transform:translateY(.18em);
  transition:opacity .5s ease .55s,transform .5s cubic-bezier(.2,.8,.3,1) .55s}
.stat b.rolled .suffix{opacity:1;transform:none}
.stat > span{
  display:block;margin-top:.6rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;opacity:.72;
}
.stat:nth-child(1) > span,.stat:nth-child(3) > span{color:var(--cyan);opacity:1}
.commit{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.75rem)}
.commit div{border-top:1px solid var(--rule-dark);padding-top:1.25rem}
.commit h3{color:#fff;margin-bottom:.6rem}
.commit p{color:rgba(255,255,255,.72);margin:0;font-size:.98rem}
@media (max-width:760px){.stats{grid-template-columns:1fr}.commit{grid-template-columns:1fr}}

/* ---------- advantage ---------- */
.advantage{background:var(--ice)}
.adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.6vw,2rem)}
.adv{background:var(--paper);border-left:3px solid var(--green);padding:clamp(1.4rem,2.6vw,2rem)}
.adv h3{margin-bottom:.55rem}
.adv p{margin:0;font-size:.98rem}
@media (max-width:860px){.adv-grid{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact{background:var(--night);color:#fff;position:relative;overflow:hidden}
.contact::before{
  content:"";position:absolute;inset:auto 0 0 0;height:180px;
  background:radial-gradient(120% 100% at 50% 100%,rgba(57,180,74,.22),transparent 70%);
  pointer-events:none;
}
.contact .wrap{position:relative;z-index:2}
.contact h2{color:#fff;max-width:15ch}
.contact .lede{color:rgba(255,255,255,.76);margin-top:1.1rem}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
.contact-grid a,.contact-grid span{
  display:block;text-decoration:none;border-top:1px solid var(--rule-dark);padding-top:1.15rem;
}
.contact-grid .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:.5rem;display:block}
.contact-grid .v{font-family:var(--sans);font-size:1.02rem;font-weight:600;color:#fff;letter-spacing:-.01em}
.contact-grid a:hover .v{color:var(--green)}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}

footer{background:var(--night);color:rgba(255,255,255,.45);border-top:1px solid var(--rule-dark)}
.foot{
  max-width:var(--maxw);margin:0 auto;padding:1.75rem var(--pad);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
}
.foot img{height:46px;opacity:.9}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--green);color:#04141B;padding:.6rem 1rem;font-family:var(--sans);font-weight:700}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage{height:100svh}
  .cue{display:none}
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}
/* ---------- multi-page chrome ---------- */
nav a[aria-current="page"]{color:#fff}
nav a[aria-current="page"]::after{right:0}

.menu-btn{
  display:none;background:none;border:1px solid var(--rule-dark);color:#fff;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.6rem .85rem;border-radius:2px;cursor:pointer;margin-left:auto;
}
.menu-btn:hover{border-color:var(--green)}
@media (max-width:860px){
  .menu-btn{display:block}
  nav{
    display:block;position:absolute;top:100%;left:0;right:0;
    background:rgba(7,26,36,.98);border-bottom:1px solid var(--rule-dark);
    padding:.5rem var(--pad) 1.25rem;
    max-height:0;overflow:hidden;visibility:hidden;transition:max-height .3s ease,visibility .3s;
  }
  nav.open{max-height:60svh;visibility:visible}
  nav a{display:block;padding:.85rem 0;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.07)}
  nav a::after{display:none}
}

.page-head{background:var(--night);color:#fff;position:relative;margin-top:-74px;
  padding-block:calc(74px + clamp(4rem,9vw,7rem)) clamp(3rem,6vw,4.5rem)}
.page-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--aurora);opacity:.65;
}
.page-head h1{font-size:clamp(2.05rem,4.8vw,3.5rem);color:#fff;max-width:17ch;text-wrap:balance}
.page-head .lede{color:rgba(255,255,255,.76);margin-top:1.35rem}
.page-head .eyebrow{color:var(--cyan)}

/* home teasers */
.teasers{background:var(--ice)}
.teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.6vw,2rem)}
.teaser{
  background:var(--paper);border-top:3px solid var(--green);
  padding:clamp(1.5rem,3vw,2.2rem);display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;
}
.teaser:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(15,45,61,.55)}
.teaser .kicker{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-bottom:1rem}
.teaser h3{margin-bottom:.6rem;font-size:1.25rem}
.teaser p{font-size:.97rem;margin-bottom:1.6rem}
.teaser .go{
  margin-top:auto;font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:.5rem;
}
.teaser .go::after{content:"";width:14px;height:1px;background:var(--green);transition:width .3s ease}
.teaser:hover .go::after{width:26px}
@media (max-width:860px){.teaser-grid{grid-template-columns:1fr}}

/* enquiry form */
.form{display:grid;gap:1.1rem;max-width:56ch;margin-top:clamp(2rem,4vw,3rem)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field label{
  display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:.5rem;
}
.field input,.field textarea,.field select{
  width:100%;background:rgba(255,255,255,.05);border:1px solid var(--rule-dark);
  color:#fff;padding:.85rem 1rem;border-radius:2px;
  font-family:var(--sans);font-size:.95rem;transition:border-color .25s ease,background .25s ease;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--green);background:rgba(57,180,74,.07);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.32)}
.form .btn-solid{justify-self:start;border:0;cursor:pointer;font-size:.88rem}
.form-note{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42);line-height:1.9}
@media (max-width:620px){.field-row{grid-template-columns:1fr}}

.contact-detail{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:clamp(2rem,4vw,3rem)}
.contact-detail a,.contact-detail span{display:block;text-decoration:none;border-top:1px solid var(--rule-dark);padding-top:1.15rem}
.contact-detail .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:.5rem;display:block}
.contact-detail .v{font-family:var(--sans);font-size:1.02rem;font-weight:600;color:#fff;letter-spacing:-.01em}
.contact-detail a:hover .v{color:var(--green)}
@media (max-width:760px){.contact-detail{grid-template-columns:1fr}}


/* the night sky and the ridge belong to the phone hero only */
.hero-ridge{display:none}
.nightsky{display:none}

/* ---------- mobile hero: the badge, held still ---------- */
@media (max-width:860px){
  .stage{height:auto;padding:0;margin-top:-74px}
  .stage-sticky{
    position:static;height:auto;overflow:visible;
    padding:calc(74px + clamp(2.5rem,9vw,4rem)) var(--pad) clamp(2.5rem,9vw,4rem);
    display:flex;align-items:center;justify-content:center;
  }
  #sky,.cue{display:none}
  .stage{position:relative;overflow:visible}
  .nightsky{
    display:block;position:absolute;inset:0;width:100%;height:100%;
    z-index:0;pointer-events:none;
  }
  .badge-live{
    display:block;position:relative;z-index:2;width:min(74vw,360px);
    aspect-ratio:1273/1356;
  }
  .badge-lights,.badge-frame{position:absolute;inset:0;width:100%;height:100%}
  .badge-lights{display:block}
  .badge-frame{object-fit:contain}
  /* no clipping here: the range has to rise up into the sky above */
  .intro{margin-top:0;padding-block:clamp(5rem,17vw,8rem) 0;overflow:visible}
  .hero-ridge{
    display:block;position:absolute;left:0;right:0;
    top:clamp(-84px,-16vw,-40px);
    height:clamp(170px,44vw,220px);pointer-events:none;z-index:0;
  }
  .hero-ridge svg{width:100%;height:100%;display:block}
  /* the near range is the page colour itself, so it becomes the ground the
     headline sits on with no edge where the artwork stops */
  .hero-ridge .hr-far{fill:#17455A}
  .hero-ridge .hr-mid{fill:#0E2E3E}
  .hero-ridge .hr-near{fill:var(--night)}
  .intro .wrap{position:relative;z-index:1}
}


/* ---------- header logo holds back until the hero is behind you ---------- */
/* over a hero, the bar itself stays out of the way: no fill, no rule, and no
   wordmark until the hero has scrolled past */
header.hero-page{background:transparent;border-bottom-color:transparent;
  transition:background .45s ease,border-color .45s ease}
header.hero-page.brand-on{background:rgba(7,26,36,.94);border-bottom-color:var(--rule-dark)}
/* over the hero the bar is transparent and the wordmark is held back — the
   drawn wordmark is already the hero — but the links stay at full strength.
   The logo and the bar background arrive together once it is past. */
header.hero-page .brand{
  opacity:0;pointer-events:none;transform:translateY(-4px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.3,1);
}
header.hero-page.brand-on .brand{opacity:1;pointer-events:auto;transform:none}
header.hero-page::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,14,21,.55),rgba(4,14,21,0));
  opacity:1;transition:opacity .45s ease;
}
header.hero-page.brand-on::before{opacity:0}


/* ---------- mountain section breaks (phones only) ---------- */
.ridge{display:none}
@media (max-width:860px){
  .teasers,.contact{position:relative}
  .contact{overflow:visible}   /* the section clipped its own ridge away */
  .ridge{
    display:block;position:absolute;left:0;right:0;bottom:100%;
    height:clamp(66px,19vw,104px);overflow:hidden;pointer-events:none;z-index:2;
  }
  .ridge svg{width:100%;height:100%;display:block}
  .ridge-front{fill:var(--ridge)}
  .ridge-back{fill:var(--ridge-back);will-change:transform}
  /* light range rising into the night */
  .teasers{--ridge:var(--ice);--ridge-back:#C9D6D8}
  /* dark range against the light above it */
  .contact{--ridge:var(--night);--ridge-back:#12313F}
}


/* the mountain break needs clear ground beneath the content above it,
   otherwise the last card's flat edge runs straight into the ridge */
@media (max-width:860px){
  .setup-copy{padding-bottom:calc(clamp(66px,19vw,104px) + 2rem)}
  .teasers,.advantage,.projects,.safety{padding-bottom:calc(clamp(66px,19vw,104px) + 2.5rem)}
}


/* ---------- condensed home page on phones ----------
   lead with pictures, keep the words to what a thumb will actually read,
   and send anyone who wants detail to the inner pages */
.teaser-shot{display:none}
.beat-more{display:none}
@media (max-width:860px){
  .intro .lede{display:none}
  .intro .cta-row .btn-ghost{display:none}
  .intro h1{font-size:clamp(1.85rem,7.4vw,2.4rem)}

  .setup .beat-no{margin-bottom:.35rem}
  .beat-more{
    display:inline-flex;align-items:center;gap:.5rem;margin-top:1.75rem;
    font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--green);text-decoration:none;
  }
  .beat-more::after{content:"";width:16px;height:1px;background:var(--green)}

  .teasers .section-head .lede{display:none}
  .teasers .section-head{margin-bottom:1.75rem}
  .teaser p{display:none}
  .teaser{padding:0;border-top-width:2px}
  .teaser-shot{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
  .teaser .kicker{padding:1.1rem 1.15rem 0;margin-bottom:.5rem}
  .teaser h3{padding:0 1.15rem;margin-bottom:1rem;font-size:1.12rem}
  .teaser .go{padding:0 1.15rem 1.15rem}

  .contact .lede{display:none}
  .contact h2{margin-bottom:1.75rem}
}

/* ---------- the ground and sky behind the instrument ----------
   the backdrop is pinned and full-bleed: it sits outside the padded column
   and takes no height of its own, so it fills the section edge to edge */
.setup{position:relative}
.setup-back{
  position:sticky;top:0;height:100svh;margin-bottom:-100svh;
  z-index:0;pointer-events:none;overflow:hidden;
}
.setup .wrap{position:relative;z-index:1}
.setup-sky{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:0;pointer-events:none;
}
.setup-ridge{
  position:absolute;left:0;right:0;bottom:0;
  height:clamp(190px,34%,340px);z-index:1;pointer-events:none;
}
.setup-ridge svg{width:100%;height:100%;display:block}
.setup-ridge .sr-far{fill:#0F3244}
.setup-ridge .sr-mid{fill:#0B2634}
.setup-ridge .sr-near{fill:var(--night)}
#rig{position:relative;z-index:2}

/* ---------- hero: technical layer and entrance ---------- */
.hero-tech{display:none}
@media (min-width:861px){
  .hero-tech{
    display:block;position:absolute;inset:0;z-index:3;pointer-events:none;
    font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  }
  .ht{
    position:absolute;display:flex;gap:.6rem;align-items:baseline;
    opacity:0;transform:translateY(6px);
    transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.3,1);
  }
  .stage-ready .ht{opacity:1;transform:none}
  .stage-ready .ht-tl{transition-delay:.35s}
  .stage-ready .ht-tr{transition-delay:.5s}
  .stage-ready .ht-bl{transition-delay:.65s}
  .stage-ready .ht-br{transition-delay:.8s}
  .ht-k{color:rgba(140,200,205,.55)}
  .ht-v{color:rgba(226,238,240,.82);letter-spacing:.12em}
  .ht-tl{top:calc(74px + 2.2rem);left:var(--pad)}
  .ht-tr{top:calc(74px + 2.2rem);right:var(--pad)}
  .ht-bl{bottom:2.4rem;left:var(--pad)}
  .ht-br{bottom:2.4rem;right:var(--pad)}
  .ht::before{
    content:"";position:absolute;top:50%;width:22px;height:1px;
    background:linear-gradient(90deg,rgba(130,205,205,.5),transparent);
  }
  .ht-tl::before,.ht-bl::before{left:-30px}
  .ht-tr::before,.ht-br::before{right:-30px;background:linear-gradient(270deg,rgba(130,205,205,.5),transparent)}

  /* the headline resolves a line at a time, from behind its own baseline */
  .intro h1 .ln{display:block;overflow:hidden}
  .intro h1 .ln > span{
    display:block;transform:translateY(105%);
    transition:transform 1s cubic-bezier(.16,.84,.28,1);
  }
  .intro.lines-in h1 .ln > span{transform:none}
  .intro h1 .ln:nth-child(2) > span{transition-delay:.09s}
  .intro h1 .ln:nth-child(3) > span{transition-delay:.18s}
  .intro h1 .ln:nth-child(4) > span{transition-delay:.27s}
  .intro .eyebrow,.intro .cta-row{
    opacity:0;transform:translateY(8px);
    transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.3,1);
  }
  .intro.lines-in .eyebrow{opacity:1;transform:none}
  .intro.lines-in .cta-row{opacity:1;transform:none;transition-delay:.42s}
  /* a rule that draws itself under the eyebrow, like a baseline being set */
  .intro .eyebrow::after{
    content:"";display:block;height:1px;margin-top:.9rem;width:0;
    background:linear-gradient(90deg,var(--green),rgba(29,172,181,0));
    transition:width 1.4s cubic-bezier(.16,.84,.28,1) .3s;
  }
  .intro.lines-in .eyebrow::after{width:min(340px,34vw)}
}
@media (prefers-reduced-motion:reduce){
  .ht{opacity:1 !important;transform:none !important}
  .intro h1 .ln > span{transform:none !important}
  .intro .eyebrow,.intro .cta-row{opacity:1 !important;transform:none !important}
}

/* ---------- the instrument, centred and given the screen ---------- */
@media (min-width:861px){
  .setup-grid{display:block;position:relative}
  .setup-stage{
    grid-column:auto;grid-row:auto;
    position:sticky;top:0;height:100svh;width:100%;
    display:block;pointer-events:none;z-index:1;
  }
  .setup-copy{
    grid-column:auto;grid-row:auto;
    position:relative;z-index:2;
    margin-top:-82svh;padding-block:0 clamp(6rem,12vw,10rem);
  }
  .setup-head{margin-bottom:66svh;max-width:30ch}
  .setup .beat{
    min-height:0;opacity:1;width:min(27%,21rem);
    margin-block:44svh;padding:0;border:0;
  }
  /* the reference keeps all the copy in the left third and gives the rest of
     the frame to the instrument and its readings */
  .setup .beat[data-beat="1"]{margin-left:0;text-align:left}
  .setup .beat p{display:block;font-size:.92rem;color:rgba(255,255,255,.62)}
  /* each note is pinned to the instrument by a drawn leader */
  .setup .beat::before{
    content:"";position:absolute;top:.45rem;width:0;height:1px;
    background:linear-gradient(90deg,var(--green),rgba(29,172,181,0));
    transition:width 1.1s cubic-bezier(.16,.84,.28,1);
  }
  .setup .beat{position:relative}
  .setup .beat::before{left:calc(100% + 1.4rem)}
  .setup .beat[data-beat="1"]::before{left:auto;right:calc(100% + 1.4rem);
    background:linear-gradient(270deg,var(--green),rgba(29,172,181,0))}
  .setup .beat.live::before{width:clamp(60px,9vw,150px)}
  .readout{left:var(--pad);bottom:clamp(2rem,6vh,4rem)}
}
@media (prefers-reduced-motion:reduce){
  .setup .beat::before{transition:none}
}

/* ---------- 04 · where we work, as a survey drawing ---------- */
.survey{position:relative;background:var(--night);padding:0}
.survey-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.survey-map{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.survey-head{position:absolute;top:calc(74px + clamp(2rem,6vw,4rem));left:0;right:0;z-index:2}
.survey-head h2{color:#fff;max-width:14ch}
.survey-panel{
  position:absolute;right:var(--pad);bottom:clamp(2rem,7vh,4.5rem);z-index:2;
  display:grid;gap:.55rem;min-width:15rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
}
.sp-row{display:flex;justify-content:space-between;gap:2rem;
  border-top:1px solid rgba(255,255,255,.10);padding-top:.5rem}
.sp-k{color:rgba(140,200,205,.55)}
.sp-v{color:rgba(232,242,244,.9);letter-spacing:.08em}
.survey-steps{list-style:none;margin:0;padding:0;position:relative;z-index:2}
.survey-steps li{
  min-height:78svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:16svh;max-width:32ch;margin-left:var(--pad);opacity:.22;
  transition:opacity .5s ease;
}
.survey-steps li.live{opacity:1}
.survey-steps h3{color:#fff;font-size:clamp(1.3rem,2.4vw,1.9rem);margin-bottom:.6rem}
.survey-steps p{color:rgba(255,255,255,.7);margin:0}
@media (max-width:860px){
  /* The drawing is pinned to the top of the screen and given most of it, so
     the route runs all the way to Baffin while still in view. The notes pass
     through the band beneath it and slide away underneath, which keeps the
     two from ever crossing. */
  .survey-sticky{
    position:sticky;top:0;height:62svh;height:62dvh;
    display:block;overflow:hidden;background:var(--night);z-index:2;
  }
  .survey-map{position:absolute;inset:0;width:100%;height:100%}
  .survey-head{position:absolute;top:calc(74px + 1rem);left:0;right:0}
  .survey-head h2{font-size:clamp(1.4rem,5.8vw,1.8rem);max-width:none}
  .survey-panel{
    position:absolute;left:var(--pad);right:var(--pad);bottom:.7rem;
    min-width:0;font-size:.52rem;grid-template-columns:1fr 1fr;gap:.25rem .9rem;
  }
  .survey-steps{position:relative;z-index:1;padding-top:1.5rem}
  .survey-steps li{
    min-height:60svh;justify-content:center;padding-bottom:0;
    margin-inline:var(--pad);max-width:none;
  }
}

/* ---------- 06 · reality capture ---------- */
.capture{position:relative;background:var(--night);padding:0}
.capture-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.capture-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.capture-head{position:absolute;top:calc(74px + clamp(2rem,6vw,4rem));left:0;right:0;z-index:2}
.capture-head h2{color:#fff;max-width:20ch}
.capture-legend{
  position:absolute;left:var(--pad);bottom:clamp(2rem,7vh,4.5rem);z-index:2;
  list-style:none;margin:0;padding:0;display:grid;gap:.5rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.34);
}
.capture-legend li{display:flex;align-items:center;gap:.7rem;transition:color .45s ease}
.capture-legend li span{
  width:16px;height:1px;background:rgba(255,255,255,.2);transition:background .45s ease,width .45s ease;
}
.capture-legend li.on{color:rgba(232,244,246,.95)}
.capture-legend li.on span{background:var(--green);width:30px}
.capture-count{
  position:absolute;right:var(--pad);bottom:clamp(2rem,7vh,4.5rem);z-index:2;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(140,200,205,.6);
}
.capture-count b{color:rgba(232,244,246,.95);font-weight:500;letter-spacing:.06em}
.capture-steps{list-style:none;margin:0;padding:0;position:relative;z-index:2}
.capture-steps li{
  min-height:80svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:16svh;max-width:34ch;margin-left:var(--pad);opacity:.22;
  transition:opacity .5s ease;
}
.capture-steps li.live{opacity:1}
.capture-steps h3{color:#fff;font-size:clamp(1.2rem,2.2vw,1.7rem);margin-bottom:.6rem}
.capture-steps p{color:rgba(255,255,255,.7);margin:0}
@media (max-width:860px){
  .capture-sticky{height:50svh}
  .capture-head{top:calc(74px + 1.2rem)}
  .capture-head h2{font-size:clamp(1.5rem,6.2vw,1.9rem);max-width:none}
  .capture-legend{
    left:var(--pad);bottom:1.1rem;font-size:.52rem;gap:.28rem;
    grid-template-columns:1fr 1fr;
  }
  .capture-count{right:var(--pad);bottom:1.1rem;font-size:.52rem}
  .capture-steps li{
    min-height:100svh;justify-content:flex-end;padding-bottom:5svh;
    margin-inline:var(--pad);max-width:none;
  }
}

/* ---------- 05 · projects as case studies ---------- */
.proj{align-items:start}
.proj-index{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;color:var(--green);
  margin:0 0 1rem;padding-bottom:1rem;border-bottom:1px solid var(--rule);
}
.proj-outcome{
  margin:1.1rem 0 0;font-family:var(--sans);font-weight:600;font-size:1.02rem;
  color:var(--steel);letter-spacing:-.01em;max-width:32ch;
}
.proj-data{
  margin-top:1.6rem;display:grid;gap:0;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
}
.pm-row{display:flex;justify-content:space-between;gap:1.5rem;
  padding:.5rem 0;border-bottom:1px solid var(--rule)}
.pm-k{color:rgba(24,70,93,.55)}
.pm-v{color:var(--navy);text-align:right}
@media (min-width:861px){
  .proj{grid-template-columns:minmax(0,6fr) minmax(0,7fr);gap:clamp(2rem,5vw,4.5rem);
    padding-block:clamp(3.5rem,7vw,6rem)}
  .proj-media{position:relative;overflow:hidden}
  /* the frame reads like a plate: a reticle and a scale on hover */
  .proj-media::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(90deg,rgba(57,180,74,.5) 1px,transparent 1px) 50% 0/1px 14px repeat-y,
      linear-gradient(0deg,rgba(57,180,74,.5) 1px,transparent 1px) 0 50%/14px 1px repeat-x;
    opacity:0;transition:opacity .45s ease;
  }
  .proj:hover .proj-media::after{opacity:.5}
  .proj-media img{transition:transform 1.1s cubic-bezier(.16,.84,.28,1),filter .6s ease}
  .proj:hover .proj-media img{transform:scale(1.14)}
}

/* ---------- 08 · one thread through the whole page ---------- */
.thread{display:none}
@media (min-width:1100px){
  .thread{
    display:flex;position:fixed;left:calc(var(--pad) * 0.42);top:0;bottom:0;
    width:1px;z-index:40;pointer-events:none;
    align-items:stretch;justify-content:center;
  }
  .thread-line{
    position:absolute;top:18vh;bottom:18vh;width:1px;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.12) 12%,rgba(255,255,255,.12) 88%,transparent);
  }
  .thread-run{
    position:absolute;left:-1px;top:0;width:3px;height:0;
    background:linear-gradient(180deg,rgba(57,180,74,0),var(--green));
  }
  .thread-run::after{
    content:"";position:absolute;left:-2.5px;bottom:-3px;width:7px;height:7px;
    border-radius:50%;background:var(--green);
    box-shadow:0 0 10px rgba(57,180,74,.8);
  }
  .thread-read{
    position:absolute;top:calc(18vh - 1.6rem);left:-.35rem;
    font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;
    color:rgba(140,200,205,.55);
  }
  /* the thread reads dark over the light sections */
  .thread.on-light .thread-line{
    background:linear-gradient(180deg,transparent,rgba(15,45,61,.16) 12%,rgba(15,45,61,.16) 88%,transparent);
  }
  .thread.on-light .thread-read{color:rgba(24,70,93,.5)}
}

/* ---------- 09 · micro-interactions ---------- */
@media (hover:hover) and (min-width:861px){
  .teaser{position:relative}
  .teaser::after{
    content:"";position:absolute;left:0;right:0;top:0;height:2px;
    background:var(--green);transform:scaleX(0);transform-origin:left;
    transition:transform .5s cubic-bezier(.16,.84,.28,1);
  }
  .teaser:hover::after{transform:scaleX(1)}
  .btn-solid{position:relative;overflow:hidden}
  .btn-solid::after{
    content:"";position:absolute;inset:0;background:rgba(255,255,255,.22);
    transform:translateX(-101%);transition:transform .55s cubic-bezier(.16,.84,.28,1);
  }
  .btn-solid:hover::after{transform:translateX(101%)}
  .station .dot{transition:transform .3s cubic-bezier(.2,.8,.3,1),background .3s ease,box-shadow .3s ease}
  .contact-grid a .v,.contact-detail a .v{transition:color .3s ease,transform .3s cubic-bezier(.2,.8,.3,1)}
  .contact-grid a:hover .v,.contact-detail a:hover .v{transform:translateX(4px)}
}
@media (prefers-reduced-motion:reduce){
  .thread-run,.teaser::after,.btn-solid::after{transition:none}
}

/* On a phone the drawing holds the top of the screen, so each note pins to
   the band beneath it for the length of its own scroll rather than passing
   across the artwork. */
@media (max-width:860px){
  .capture-steps li{display:block;padding:0;min-height:110svh}
  .capture-steps .step-in{position:sticky;bottom:6svh;padding-top:60svh}
  .capture-steps li.live .step-in{opacity:1}
}

/* On a phone, overlaying notes on a pinned drawing never reads cleanly at this
   width. The drawing takes the top of the section and the notes run beneath it
   in ordinary document order: nothing crosses anything. */
@media (max-width:860px){
  .capture-sticky{position:relative;top:auto;height:56svh;margin-bottom:1.5rem}
  .capture-steps li{
    min-height:0;padding:0;margin-block:0;
    border-top:1px solid var(--rule-dark);
  }
  .capture-steps li:first-child{border-top:0}
  .capture-steps .step-in{position:static;padding:1.5rem 0}
  .capture-steps li{opacity:1}
  .capture-steps h3{font-size:1.05rem;margin-bottom:.4rem}
  .capture-steps p{font-size:.9rem}
  .capture-steps{margin:0 var(--pad) clamp(3rem,9vw,5rem)}
}

/* ---------- instrument annotations ---------- */
.rig-ann{display:none}
@media (min-width:861px){
  .rig-ann{
    display:block;position:absolute;inset:0;z-index:3;pointer-events:none;
    font-family:var(--mono);
  }
  .rig-leads{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .rl-ring{
    fill:none;stroke:rgba(150,206,208,.16);stroke-width:.12;
    stroke-dasharray:1.2 1.6;
    opacity:0;transition:opacity .8s ease;
    transform-origin:50% 50%;transform:scale(.86);
    transition:opacity .8s ease,transform 1s cubic-bezier(.16,.84,.28,1);
  }
  .rig-ann.on .rl-ring{opacity:1;transform:scale(1)}
  .rl-lines line{
    stroke:rgba(150,206,208,.34);stroke-width:.11;
    stroke-dasharray:60;stroke-dashoffset:60;
    transition:stroke-dashoffset .9s cubic-bezier(.16,.84,.28,1);
  }
  .rig-ann.s0 [data-lead="elev"],.rig-ann.s0 [data-lead="stn"],
  .rig-ann.s1 [data-lead="elev"],.rig-ann.s1 [data-lead="stn"],
  .rig-ann.s1 [data-lead="target"],.rig-ann.s1 [data-lead="prism"],
  .rig-ann.s1 [data-lead="temp"],.rig-ann.s1 [data-lead="press"],
  .rig-ann.s2 [data-lead="elev"],.rig-ann.s2 [data-lead="stn"],
  .rig-ann.s2 [data-lead="target"],.rig-ann.s2 [data-lead="prism"]{stroke-dashoffset:0}

  .ra{
    position:absolute;display:grid;gap:.18rem;
    opacity:0;transform:translateY(4px);
    transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1);
  }
  .ra.on{opacity:1;transform:none}
  .ra-k{font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(150,206,208,.5)}
  .ra-v{font-size:.72rem;letter-spacing:.1em;color:rgba(228,240,242,.92)}
  /* the active measurement is the only green thing here */
  .ra-sd.on .ra-v,.ra-hz.on .ra-v{color:#8ef0b4}
  .ra::before{
    content:"";position:absolute;top:.36rem;width:5px;height:5px;
    border:1px solid rgba(150,206,208,.55);
    transform:rotate(45deg) scale(.4);opacity:0;
    transition:transform .5s cubic-bezier(.16,.84,.28,1),opacity .5s ease;
  }
  .ra.on::before{transform:rotate(45deg) scale(1);opacity:1}
  .ra-elev,.ra-target,.ra-temp,.ra-hz{text-align:right}
  .ra-elev::before,.ra-target::before,.ra-temp::before,.ra-hz::before{right:-1.1rem}
  .ra-stn::before,.ra-prism::before,.ra-press::before,.ra-v::before,.ra-sd::before{left:-1.1rem}

  /* the copy holds the left third, so every reading sits in the instrument's
     own half of the frame */
  .ra-elev  {left:33%; top:24%; width:8rem;text-align:right}
  .ra-target{left:31%; top:44%; width:8rem;text-align:right}
  .ra-temp  {left:33%; top:64%; width:8rem;text-align:right}
  .ra-hz    {left:35%; top:80%; width:8rem;text-align:right}
  .ra-stn   {right:7%; top:24%; width:8rem}
  .ra-prism {right:7%; top:44%; width:8rem}
  .ra-press {right:7%; top:64%; width:8rem}
  .ra-v     {right:7%; top:78%; width:8rem}
  .ra-sd    {right:7%; top:87%; width:8rem}
  /* the leaders converge on the instrument, which sits right of centre */
  .rig-leads{left:14%;width:86%}
  /* the old corner readout is replaced by these */
  .setup .readout{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ra,.rl-ring,.rl-lines line{transition:none}
}

/* ---------- the hero stays put; the page rides over it ---------- */
@media (min-width:861px){
  /* the stage is only as tall as the screen now, and its canvas is fixed, so
     the sky and the range hold still while the next section climbs over them */
  /* the hero holds a screen and a half before the page climbs over it */
  .stage{height:150svh;height:150dvh}
  /* inset alone, with no stated height: svh is the *smallest* viewport
     height, so on a tablet with retracting browser chrome a fixed 100svh
     layer ends short of the real viewport and leaves a band underneath */
  .stage-sticky{position:fixed;inset:0;height:auto;z-index:0;overflow:hidden}
  /* the canvas keeps its own height and is anchored to the top; the stage
     crops whatever runs past the bottom of the frame */
  #sky{position:absolute;top:0;left:0;right:0;bottom:auto;width:100%;height:auto}
  /* the overlap that used to pull the copy up into the hero is not wanted
     now that the hero stays put underneath */
  .intro{position:relative;z-index:2;margin-top:0}
  /* the section arrives with a ridge rather than a straight edge */
  .sect-ridge{
    display:block;
    position:absolute;left:0;right:0;top:0;transform:translateY(-99%);
    height:clamp(96px,11vw,168px);pointer-events:none;
  }
  .sect-ridge svg{width:100%;height:100%;display:block}
  /* the ranges recede in the same tones the rest of the site uses: the
     nearest is the section colour itself, so it meets the page seamlessly */
  .sect-ridge .sr-1{fill:#123B4E}
  .sect-ridge .sr-2{fill:#0E2E3E}
  .sect-ridge .sr-3{fill:#0A2231}
  .sect-ridge .sr-4{fill:var(--night)}
}

/* the transition ridge belongs to the pinned desktop hero; without its
   positioning rules it falls into the flow as a dark block, so it is only
   switched off below that width rather than globally */
@media (max-width:860px){ .sect-ridge{display:none} }

/* ---------- the pinned hero must stay behind everything after it ----------
   A fixed layer paints above ordinary, unpositioned block boxes however low
   its z-index. Every section after the stage therefore has to be positioned
   itself, or the hero shows through it. */
@media (min-width:861px){
  .stage{z-index:0}
  main > section,
  main > div,
  footer{position:relative;z-index:1}
  .intro{z-index:2}
}

/* ---------- 04 · the map on a phone ----------
   The drawing was a short block that scrolled away long before the traverse
   reached Baffin. It is now pinned to the top of the screen and given most of
   it, so the whole route runs while it is still in view; the notes pass
   through the band beneath and slide away under it. */
@media (max-width:860px){
  .survey-sticky{
    position:sticky;top:0;height:64svh;height:64dvh;
    display:block;overflow:hidden;background:var(--night);z-index:2;
    margin-bottom:0;
  }
  .survey-map{position:absolute;inset:0;width:100%;height:100%}
  .survey-head{position:absolute;top:calc(74px + .9rem);left:0;right:0;z-index:2}
  .survey-head h2{font-size:clamp(1.35rem,5.6vw,1.75rem);max-width:none}
  .survey-panel{
    position:absolute;left:var(--pad);right:var(--pad);bottom:.7rem;
    min-width:0;font-size:.52rem;grid-template-columns:1fr 1fr;gap:.25rem .9rem;
    z-index:2;
  }
  .survey-steps{
    position:relative;z-index:1;margin:0 var(--pad) clamp(3rem,9vw,5rem);
    padding-top:1.4rem;
  }
  /* each note sits in the middle of its own run, so it passes through the
     band under the map rather than flashing past its top edge */
  .survey-steps li{
    display:flex;align-items:center;min-height:42svh;
    padding:0;margin-block:0;max-width:none;
    opacity:1;border-top:1px solid var(--rule-dark);
  }
  .survey-steps li:first-child{border-top:0}
  .survey-steps .step-in{position:static;padding:1.5rem 0}
  .survey-steps h3{font-size:1.05rem;margin-bottom:.4rem}
  .survey-steps p{font-size:.9rem}
}