/* ==========================================================================
   GAIERGY CORP - SITE STYLESHEET
   Design: Concept E "Core Sample", approved 25 August 2026.
   Palette: Gaiergy tricolor. Indigo #1F3883 / Cyan #47C8E3 / Sage #83B895.
   One stylesheet drives every page so the chrome never drifts.
   ========================================================================== */

:root{
  --ink:#050912; --ink-1:#080F1E; --ink-2:#0C1729; --ink-3:#122038;
  --bone:#EAF1F9; --bone-2:rgba(234,241,249,.70); --bone-3:rgba(234,241,249,.44);
  --bone-4:rgba(234,241,249,.24);
  --line:rgba(234,241,249,.10); --line-2:rgba(234,241,249,.20);
  --cyan:#47C8E3; --blue:#3175B1; --indigo:#1F3883; --sage:#83B895; --peri:#8B8ECF;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --rail:30rem;          /* fixed left navigation */
  --core:9rem;           /* gutter kept clear for the descent line */
  --ease:cubic-bezier(.16,1,.3,1);
}
html{font-size:62.5%;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (min-width:1700px){html{font-size:.62vw}}
*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:hidden on body makes body a scroll container, which silently kills
   position:sticky and programmatic scrolling. overflow-x:clip on html guards
   against sideways overflow without creating a scroll container. */
html{overflow-x:clip}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);font-size:1.6rem;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--cyan);color:#050912}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:rgba(234,241,249,.12);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:rgba(234,241,249,.26)}
.mono{font-family:var(--mono);font-size:1.1rem;letter-spacing:.18em;text-transform:uppercase}
.wrap{max-width:150rem;margin:0 auto;padding:0 calc(var(--core) + 5rem) 0 4rem}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:999;background:var(--cyan);color:#050912;
  padding:1rem 1.6rem;border-radius:4px}

.grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.26;
  mix-blend-mode:overlay;background-size:300px;
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="300" height="300" filter="url(%23n)"/></svg>');}

/* ============================================================ FIXED CHROME */
.mark{position:fixed;top:3.2rem;left:4rem;z-index:300}
.mark img{height:3rem;width:auto;align-self:flex-start}
.mark:hover{opacity:.72}
.topright{position:fixed;top:3.5rem;right:calc(var(--core) + 5rem);z-index:300;
  display:flex;gap:2.2rem;align-items:center;color:var(--bone-3)}
.topright .pill{border:1px solid var(--line-2);border-radius:100px;padding:.7rem 1.6rem;
  color:var(--bone-2);transition:all .3s var(--ease)}
.topright .pill:hover{background:var(--cyan);border-color:var(--cyan);color:#050912}

/* ------------------------------------------- LEFT RAIL, UP UNDER THE LOGO */
.rail{position:fixed;left:4rem;top:11.5rem;z-index:280;width:calc(var(--rail) - 4rem);
  max-height:calc(100svh - 15rem);overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-eyebrow{color:var(--bone-4);margin-bottom:1.6rem}
.rail-eyebrow.second{margin-top:3.4rem}
.rgroup{border-top:1px solid var(--line)}
.rgroup:last-of-type{border-bottom:1px solid var(--line)}
.rgroup-head{display:flex;align-items:baseline;gap:1rem;padding:1.25rem 0;cursor:pointer}
.rgroup-head .n{font-size:1.6rem;letter-spacing:-.02em;line-height:1.2;color:var(--bone-2);
  transition:color .3s var(--ease);flex:1}
.rgroup-head .c{font-family:var(--mono);font-size:1rem;color:var(--bone-4);
  font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.rgroup:hover .rgroup-head .n,.rgroup:focus-within .rgroup-head .n,
.rgroup:hover .rgroup-head .c,.rgroup:focus-within .rgroup-head .c{color:var(--cyan)}
.rgroup.current .rgroup-head .n{color:var(--cyan)}
.rsub{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .5s var(--ease),opacity .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .rgroup:hover .rsub,.rgroup:focus-within .rsub{grid-template-rows:1fr;opacity:1}}
.rgroup.open .rsub{grid-template-rows:1fr;opacity:1}
.rsub-in{overflow:hidden;min-height:0}
.rsub a{display:flex;gap:.9rem;align-items:baseline;padding:.55rem 0 .55rem 1.2rem;
  border-left:1px solid var(--line);font-size:1.25rem;line-height:1.35;color:var(--bone-3);
  transition:color .25s var(--ease),border-color .25s var(--ease),padding-left .25s var(--ease)}
.rsub a:hover{color:var(--bone);border-left-color:var(--cyan);padding-left:1.7rem}
.rsub a .i{font-family:var(--mono);font-size:.9rem;color:var(--bone-4);flex:none}
.rsub a:hover .i{color:var(--cyan)}
.rsub-pad{height:.9rem}
.rlinks{border-top:1px solid var(--line)}
.rlinks a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1.15rem 0;border-bottom:1px solid var(--line);font-size:1.5rem;color:var(--bone-2);
  transition:color .3s var(--ease),padding-left .3s var(--ease)}
.rlinks a:hover{color:var(--cyan);padding-left:.7rem}
.rlinks a.current{color:var(--cyan)}
.rlinks a span{font-family:var(--mono);font-size:1rem;color:var(--bone-4)}

/* ------------------------------------- DESCENT LINE, FAR RIGHT EDGE ------
   One vertical line with a glowing marker that descends as the reader does.
   While they scroll it releases a few small bubbles, the way a diver would.
   Replaces the earlier core-sample tube. */
.drail{position:fixed;right:4.2rem;top:0;bottom:0;width:6rem;z-index:250;
  pointer-events:none;opacity:0;transition:opacity .8s var(--ease)}
.drail.on{opacity:1}
.drail .dr-line{position:absolute;left:50%;top:12svh;bottom:12svh;width:1px;
  margin-left:-.5px;
  background:linear-gradient(180deg,transparent,var(--line-2) 10%,
              var(--line-2) 90%,transparent)}
.drail .dr-track{position:absolute;left:0;right:0;top:12svh;bottom:12svh}
.drail .dr-orb{position:absolute;left:50%;width:1.5rem;height:1.5rem;
  margin-left:-.75rem;margin-top:-.75rem;border-radius:50%;
  border:1px solid var(--cyan);background:rgba(71,200,227,.14);
  box-shadow:0 0 1.8rem rgba(71,200,227,.75),inset 0 0 .8rem rgba(71,200,227,.4);
  transition:top .14s linear;animation:drpulse 2.6s var(--ease) infinite}
.drail .dr-orb::after{content:"";position:absolute;inset:.42rem;border-radius:50%;
  background:var(--cyan);opacity:.95}
@keyframes drpulse{
  0%,100%{box-shadow:0 0 1.4rem rgba(71,200,227,.55),inset 0 0 .8rem rgba(71,200,227,.35)}
  50%{box-shadow:0 0 2.8rem rgba(71,200,227,.95),inset 0 0 1rem rgba(71,200,227,.5)}}
.drail .bub{position:absolute;left:50%;border-radius:50%;
  border:1px solid rgba(71,200,227,.55);background:rgba(71,200,227,.12);
  animation:bubrise linear forwards;pointer-events:none}
@keyframes bubrise{
  0%{transform:translate(-50%,0) scale(.7);opacity:0}
  18%{opacity:.85}
  100%{transform:translate(calc(-50% + var(--bx,0px)),calc(-1 * var(--brise,60px))) scale(1);
       opacity:0}}

/* the scroll cue stays on screen the whole way down, and turns around at the end */
.scrollcue{position:fixed;left:50%;transform:translateX(-50%);bottom:2.6rem;z-index:260;
  display:flex;align-items:center;gap:1rem;color:var(--bone-4);
  font-family:var(--mono);font-size:1.1rem;letter-spacing:.18em;text-transform:uppercase;
  background:rgba(5,9,18,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:100px;padding:.85rem 1.9rem;
  transition:color .4s var(--ease),border-color .4s var(--ease),opacity .5s var(--ease);
  pointer-events:none}
.scrollcue.up{color:var(--cyan);border-color:rgba(71,200,227,.45);pointer-events:auto;
  cursor:pointer}
.scrollcue i{font-style:normal;display:inline-block;animation:cuebob 2.2s var(--ease) infinite}
@keyframes cuebob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.scrollcue.up i{animation:cuebobup 2.2s var(--ease) infinite}
@keyframes cuebobup{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ================================================================= BUTTONS */
.btn{display:inline-flex;align-items:center;gap:.9rem;padding:1.2rem 2.3rem;border-radius:6px;
  font-size:1.35rem;transition:all .35s var(--ease);border:1px solid transparent}
.btn-solid{background:var(--cyan);color:#050912;font-weight:600}
.btn-solid:hover{background:#72DBF2;transform:translateY(-3px);
  box-shadow:0 1.4rem 3.4rem rgba(71,200,227,.30)}
.btn-ghost{border-color:var(--line-2);color:var(--bone-2)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-3px)}
.cta-row{display:flex;gap:1.3rem;margin-top:3.2rem;flex-wrap:wrap}

/* =================================================================== HERO */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;padding-right:var(--core)}
#gridcv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(96% 76% at 66% 58%,rgba(5,9,18,.30),rgba(5,9,18,.90) 74%)}
/* Headline across the top (.hero-head), then two cells: the copy on the left,
   the orb stage on the right. The orb stage (#ring) is the ONLY area the
   picture windows may use (orb.js keeps every card inside it), so they never
   cross the headline, the copy or the stat row. */
.hero-in{position:relative;z-index:3;flex:1;display:grid;
  grid-template-columns:minmax(0,36rem) minmax(0,1fr);
  grid-template-rows:auto minmax(34rem,1fr);column-gap:4.4rem;
  padding:8.6rem 5rem 2rem calc(var(--rail) + 2rem)}
.hero-head{grid-column:1/-1;grid-row:1;position:relative;z-index:4}
/* Same box size as the live site, so the brain keeps its live size. It sits
   below the two-line headline; cards pass behind the text as before. */
.orbwrap{position:absolute;right:calc(var(--core) + 2rem);top:50%;transform:translateY(-52%);
  width:min(62rem,52vw);height:min(62rem,66svh);z-index:-1;opacity:.95}
#orb{position:absolute;inset:0;width:100%;height:100%;display:block}
#ring{position:absolute;inset:0;pointer-events:none}
#ring>*{position:absolute;left:50%;top:50%;will-change:transform,opacity;pointer-events:auto}
.ocard{width:16rem;padding:.85rem .85rem .95rem;border-radius:1.1rem;
  background:rgba(8,15,30,.78);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--line-2);box-shadow:0 2.2rem 5.6rem rgba(0,0,0,.55);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.ocard:hover{border-color:rgba(71,200,227,.55);box-shadow:0 2.2rem 6.4rem rgba(71,200,227,.18)}
.ocard-th{display:block;border-radius:.8rem;overflow:hidden;background:var(--ink-2)}
.ocard-th img{width:100%;aspect-ratio:16/10;object-fit:cover}
.ocard-k{display:block;font-family:var(--mono);font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan);margin:.65rem 0 .28rem}
.ocard-t{display:block;font-size:1.1rem;line-height:1.28;color:var(--bone)}

.hero-copy{grid-column:1;grid-row:2;align-self:start;position:relative;z-index:4;
  margin-top:3.6rem}
.eyebrow{display:flex;align-items:center;gap:1.2rem;color:var(--cyan);margin-bottom:2rem}
.eyebrow::before{content:"";width:5rem;height:1px;background:var(--cyan);display:block;flex:none}
.hero .eyebrow{margin-bottom:1.8rem}
/* Two lines exactly: "The energy transition" / "made buildable.". The size
   follows the viewport WIDTH so line 1 always fits beside the rail. */
.hero h1{font-size:5.3vw;line-height:.94;letter-spacing:-.05em;
  font-weight:600;text-shadow:0 .4rem 6rem rgba(5,9,18,.85)}
.hero h1 span{display:block;white-space:nowrap}
.hero h1 span i{display:block;font-style:normal;animation:rise 1.05s var(--ease) backwards}
.hero h1 span:nth-child(2) i{animation-delay:.10s}
@keyframes rise{from{transform:translateY(34px);opacity:0}to{transform:none;opacity:1}}
.grad{font-style:normal;
  background:linear-gradient(96deg,var(--cyan),var(--sage) 55%,var(--peri));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy p{margin-top:0;max-width:40ch;color:var(--bone-2);font-size:1.7rem;
  animation:fade 1s var(--ease) .55s backwards}
@keyframes fade{from{opacity:0}to{opacity:1}}
.hero-copy .cta-row{animation:fade 1s var(--ease) .7s backwards}
body.anim-done .hero h1 span i,
body.anim-done .hero-copy p,
body.anim-done .hero-copy .cta-row{animation:none;opacity:1;transform:none}

/* stat row and ticker */
.hero-foot{position:relative;z-index:3;border-top:1px solid var(--line);
  background:rgba(5,9,18,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero-foot .statrow{display:grid;grid-template-columns:repeat(4,1fr)}
.hero-foot .cellx{padding:2.2rem 0;border-right:1px solid var(--line)}
.hero-foot .cellx:last-of-type{border-right:0}
.hero-foot b{display:block;font-size:clamp(2.2rem,2.6vw,3.4rem);font-weight:600;
  letter-spacing:-.03em;line-height:1;color:var(--cyan)}
.hero-foot span{display:block;margin-top:.7rem;color:var(--bone-3);font-size:1.2rem}
.hero-foot .cite{grid-column:1/-1;padding:0 0 1.8rem}
.ticker{position:relative;z-index:3;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:var(--ink-1);overflow:hidden;padding:1.5rem 0;
  margin-right:var(--core)}
.ticker-in{display:flex;gap:5rem;width:max-content;animation:slide 42s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker-in span{color:var(--bone-4);font-family:var(--mono);font-size:1.2rem;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.ticker-in span b{color:var(--sage);font-weight:400}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateY(4px)}}

/* ============================================================= THE DESCENT */
/* 800svh: seven panels of 87.5svh scroll each, the finance panel two; projects-slide.js adds scroll to the Projects panel when its grid is taller than the screen (2026-10-04) */
.dive{position:relative;height:800svh;background:var(--ink);padding-right:var(--core)}
.dive-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.dive-bg{position:absolute;inset:0;z-index:0}
.dive-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.07);
  transition:opacity 1s var(--ease),transform 1.8s var(--ease)}
.dive-bg img.on{opacity:.40;transform:none}
.dive-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(5,9,18,.96) 26%,rgba(5,9,18,.46) 72%,rgba(5,9,18,.86)),
             linear-gradient(180deg,rgba(5,9,18,.62),transparent 32%,rgba(5,9,18,.72))}
.panel{position:absolute;inset:0;z-index:3;display:flex;align-items:center;
  opacity:0;pointer-events:none;
  transition:opacity .7s var(--ease),transform 1s var(--ease),filter .7s var(--ease);
  transform:translateY(3.4rem);filter:blur(6px)}
.panel.on{opacity:1;pointer-events:auto;transform:none;filter:none}
.panel .pin{max-width:calc(var(--rail) + 84rem);width:100%;
  padding:0 5rem 0 calc(var(--rail) + 2rem);max-height:82svh;overflow:visible}
.panel h2{font-size:clamp(3rem,4.6vw,6.6rem);line-height:.98;letter-spacing:-.045em;
  font-weight:600}
.panel p{margin-top:2rem;color:var(--bone-2);font-size:1.65rem;max-width:46ch}
.plist{margin-top:2.8rem;max-width:52rem}
.plist div{display:flex;gap:1.6rem;padding:1.1rem 0;border-top:1px solid var(--line);
  font-size:1.4rem;color:var(--bone-2)}
.plist div:last-child{border-bottom:1px solid var(--line)}
.plist .i{font-family:var(--mono);font-size:1rem;color:var(--sage);flex:none;padding-top:.35rem}
.panel .cite{margin-top:1.8rem;max-width:46ch}

/* panel furniture: agency marks, compact stat row, compact link rows */
.agencies{display:flex;align-items:center;gap:2rem;margin-top:2.4rem;flex-wrap:wrap}
/* Supplied artwork sits straight on the dark field. No chip, no padding.
   5.75rem is the previous 4.6rem plus 25 percent. */
.agencies{gap:2.8rem}
.agencies img{height:5.75rem;width:auto;object-fit:contain;opacity:.92;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.agencies img:hover{opacity:1;transform:translateY(-2px)}

/* the affiliation ribbon carried over from the previous site */
.ribbon{margin-top:3.4rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ribbon-track{display:flex;align-items:center;gap:2.6rem;width:max-content;
  animation:ribbonrun 46s linear infinite}
@keyframes ribbonrun{to{transform:translateX(-50%)}}
.ribbon-item{flex:none;display:flex;align-items:center;justify-content:center;
  height:6rem;padding:0 1.4rem;border-radius:.9rem;background:rgba(234,241,249,.93);
  opacity:.86;transition:opacity .3s var(--ease)}
.ribbon-item:hover{opacity:1}
.ribbon-item img,.ribbon-item svg{height:4rem;width:auto;display:block}
.ribbon-item img[src$="va.png"],.ribbon-item img[src$="noaa.svg"]{height:4.4rem}
@media (prefers-reduced-motion:reduce){.ribbon-track{animation:none;flex-wrap:wrap;
  width:auto;justify-content:flex-start}}
.agencies .alab{font-family:var(--mono);font-size:.95rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-4)}
.pstat{display:flex;gap:4.5rem;margin-top:2.8rem;padding-top:2.2rem;
  border-top:1px solid var(--line);flex-wrap:wrap}
.pstat b{display:block;font-size:3rem;font-weight:600;line-height:1;letter-spacing:-.03em;
  color:var(--sage)}
.pstat span{display:block;margin-top:.6rem;font-family:var(--mono);font-size:.92rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-4)}
.prows{margin-top:2.6rem;border-top:1px solid var(--line);max-width:64rem}
.prows a{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:baseline;
  padding:1.35rem 0;border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease),color .3s var(--ease)}
.prows a:hover{padding-left:1rem;color:var(--cyan)}
.prows .t{font-size:1.6rem;line-height:1.3;letter-spacing:-.01em}
.prows .kind{font-family:var(--mono);font-size:.92rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage);white-space:nowrap}
.pmeta{display:flex;gap:4.5rem;margin-top:3rem;padding-top:2.4rem;
  border-top:1px solid var(--line);flex-wrap:wrap}
.pmeta .k2{font-family:var(--mono);font-size:.92rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-4);margin-bottom:.7rem}
.pmeta .v{font-size:1.55rem}
.pmeta a.v:hover{color:var(--cyan)}
/* Capability statement card beside the closing call to action (home page). */
.panel .pin.withcap{max-width:calc(var(--rail) + 116rem);display:grid;
  grid-template-columns:minmax(0,1fr) 13rem;column-gap:7rem;align-items:center}
.capcard{border-radius:.8rem;padding:.55rem .55rem .7rem;background:rgba(8,15,30,.78);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--line-2);box-shadow:0 2.2rem 5.6rem rgba(0,0,0,.55);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.capcard:hover{border-color:rgba(71,200,227,.55);box-shadow:0 2.2rem 6.4rem rgba(71,200,227,.18)}
.capcard-open{display:block}
.capcard-th{display:block;border-radius:.45rem;overflow:hidden;background:var(--ink-2)}
.capcard-th img{width:100%;height:auto;display:block}
.capcard-k{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);margin:.55rem 0 .15rem}
.capcard-t{display:block;font-size:1.15rem;line-height:1.2;color:var(--bone)}
.capcard-d{display:block;margin-top:.35rem;font-size:.95rem;line-height:1.45;color:var(--bone-3,var(--bone-2))}
.capcard-acts{display:flex;justify-content:space-between;gap:.6rem;margin-top:.6rem;
  padding-top:.55rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase}
.capcard-acts a{color:var(--cyan)}
.capcard-acts a:hover{color:var(--bone)}
.dive-anchor{position:absolute;left:0;bottom:100svh;width:1px;height:1px}
.srclink{display:inline-block;margin-top:1.6rem;font-family:var(--mono);font-size:1.05rem;
  letter-spacing:.06em;color:var(--cyan);border-bottom:1px solid rgba(71,200,227,.35);
  padding-bottom:.2rem}
.srclink:hover{border-bottom-color:var(--cyan)}

/* ================================================================ SECTIONS */
.sec{position:relative;z-index:10;background:var(--ink);padding:13rem 0}
.sec.tight{padding-top:2rem}
.sec .wrap{padding-left:calc(var(--rail) + 2rem)}
.sec-head{max-width:76rem;margin-bottom:5.5rem}
.sec-head h2{font-size:clamp(3rem,4.2vw,5.6rem);line-height:1.02;letter-spacing:-.04em;
  font-weight:600}
.sec-head p{margin-top:1.7rem;color:var(--bone-2);font-size:1.6rem;max-width:56ch}
.cite{margin-top:1.8rem;font-family:var(--mono);font-size:1.05rem;letter-spacing:.04em;
  color:var(--bone-4);text-transform:none;line-height:1.6}
.hr{height:1px;background:var(--line);margin:8rem 0}

/* page masthead for inner pages */
.masthead{position:relative;z-index:10;padding:18rem 0 7rem;overflow:hidden;
  background:linear-gradient(150deg,#050912 0%,#0A1B31 55%,#07202F 100%)}
.masthead::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(56rem 38rem at 78% 14%,rgba(71,200,227,.16),transparent 68%),
             radial-gradient(44rem 30rem at 10% 88%,rgba(131,184,149,.10),transparent 70%)}
.masthead .wrap{position:relative;z-index:2;padding-left:calc(var(--rail) + 2rem)}
.masthead h1{font-size:clamp(3.4rem,5.4vw,8rem);line-height:.96;letter-spacing:-.05em;
  font-weight:600;max-width:16ch}
.masthead p{margin-top:2.2rem;color:var(--bone-2);font-size:1.75rem;max-width:58ch}

/* alternating project rows */
.split{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:5rem;
  border-top:1px solid var(--line);padding:6rem 0;align-items:center}
.split:last-of-type{border-bottom:1px solid var(--line)}
.split .pim{position:relative;overflow:hidden;min-height:34rem;border-radius:1.4rem;
  background:var(--ink-1)}
.split .pim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.86;
  transition:transform 1.4s var(--ease),opacity .6s var(--ease)}
.split:hover .pim img{transform:scale(1.05);opacity:1}
.k{font-family:var(--mono);font-size:1rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan)}
.split h3{margin-top:1.4rem;font-size:clamp(2.4rem,3.2vw,4rem);line-height:1.04;
  letter-spacing:-.04em;font-weight:600}
.split p{margin-top:1.5rem;color:var(--bone-2);font-size:1.5rem;max-width:50ch}
.pstats{display:flex;gap:4rem;margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--line);
  flex-wrap:wrap}
.pstats b{display:block;font-size:2.8rem;font-weight:600;line-height:1;color:var(--sage);
  letter-spacing:-.03em}
.pstats span{display:block;margin-top:.6rem;font-family:var(--mono);font-size:.92rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-4)}
.plink{display:inline-flex;gap:.8rem;margin-top:2.4rem;color:var(--cyan);font-size:1.4rem;
  transition:gap .35s var(--ease)}
.plink:hover{gap:1.6rem}

/* card grids */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{display:block;border:1px solid var(--line);border-radius:1.2rem;overflow:hidden;
  background:var(--ink-1);
  transition:transform .55s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.card:hover{transform:translateY(-7px);border-color:rgba(71,200,227,.5);background:var(--ink-2)}
.card .th{aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.card .th img{width:100%;height:100%;object-fit:cover;opacity:.85;
  transition:transform 1s var(--ease)}
.card:hover .th img{transform:scale(1.06);opacity:1}
.card .bd{padding:2.3rem}
.card .k{color:var(--sage)}
.card h3{margin-top:1.1rem;font-size:1.9rem;line-height:1.25;letter-spacing:-.02em;
  font-weight:600}
.card p{margin-top:.9rem;color:var(--bone-3);font-size:1.32rem;line-height:1.55}
.card .meta{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.92rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone-4)}

/* document list rows */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:14rem 1fr 20rem 4rem;gap:2.4rem;align-items:center;
  padding:2.6rem 0;border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease),background .4s var(--ease)}
.row:hover{padding-left:1.6rem;
  background:linear-gradient(90deg,rgba(71,200,227,.06),transparent 60%)}
.row .d{font-family:var(--mono);font-size:1rem;letter-spacing:.12em;color:var(--bone-4);
  text-transform:uppercase}
.row h3{font-size:2rem;line-height:1.25;letter-spacing:-.02em;font-weight:600;
  transition:color .3s var(--ease)}
.row:hover h3{color:var(--cyan)}
.row p{margin-top:.7rem;color:var(--bone-3);font-size:1.32rem;max-width:70ch}
.row .t{font-family:var(--mono);font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sage)}
.row .a{text-align:right;color:var(--bone-4);font-size:1.8rem;
  transition:transform .4s var(--ease),color .3s var(--ease)}
.row:hover .a{transform:translateX(6px);color:var(--cyan)}

/* service blocks */
.svc{border-top:1px solid var(--line);padding:7rem 0;
  display:grid;grid-template-columns:12rem 1fr;gap:4rem;align-items:start}
.svc:last-of-type{border-bottom:1px solid var(--line)}
.svc .num{font-family:var(--mono);font-size:1.1rem;letter-spacing:.2em;color:var(--cyan);
  padding-top:1rem}
.svc h2{font-size:clamp(2.6rem,3.6vw,4.6rem);line-height:1.03;letter-spacing:-.04em;
  font-weight:600}
.svc .lede{margin-top:1.8rem;color:var(--bone-2);font-size:1.6rem;max-width:56ch}
.svc ul{margin-top:2.6rem;list-style:none;max-width:62rem}
.svc li{position:relative;padding:1.05rem 0 1.05rem 2.4rem;border-top:1px solid var(--line);
  color:var(--bone-2);font-size:1.42rem}
.svc li:last-child{border-bottom:1px solid var(--line)}
.svc li::before{content:"";position:absolute;left:0;top:1.85rem;width:.9rem;height:1px;
  background:var(--sage)}
.track{margin-top:2.6rem;padding:1.8rem 2rem;border-radius:.9rem;max-width:70rem;
  background:linear-gradient(120deg,rgba(71,200,227,.10),rgba(131,184,149,.05));
  border:1px solid rgba(71,200,227,.22);font-size:1.35rem;color:var(--bone-2)}
.track b{color:var(--cyan);font-weight:600}
.track .cite{margin-top:1rem}

/* team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem}
.person{border:1px solid var(--line);border-radius:1.2rem;padding:2.6rem;background:var(--ink-1);
  transition:border-color .4s var(--ease),transform .5s var(--ease)}
.person:hover{border-color:rgba(71,200,227,.4);transform:translateY(-5px)}
.person .ph{width:8rem;height:8rem;border-radius:50%;overflow:hidden;background:var(--ink-2);
  margin-bottom:1.8rem;border:1px solid var(--line-2)}
.person .ph img{width:100%;height:100%;object-fit:cover}
.person .ph.initials{display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:2.8rem;color:var(--cyan)}
.person h3{font-size:1.9rem;letter-spacing:-.02em;font-weight:600}
.person .role{margin-top:.5rem;font-family:var(--mono);font-size:.95rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage)}
.person p{margin-top:1.4rem;color:var(--bone-3);font-size:1.3rem;line-height:1.6}

/* affiliation chips */
.chips{display:flex;flex-wrap:wrap;gap:1rem;margin-top:3rem}
.chip{border:1px solid var(--line-2);border-radius:100px;padding:.85rem 1.8rem;
  font-family:var(--mono);font-size:1rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone-3)}

/* facts table */
.facts{display:grid;grid-template-columns:repeat(2,1fr);column-gap:5rem;row-gap:0;border-top:1px solid var(--line);
  max-width:96rem}
.facts div{display:flex;justify-content:space-between;gap:2rem;padding:1.5rem 2rem 1.5rem 0;
  border-bottom:1px solid var(--line);font-size:1.4rem}
.facts .lab{color:var(--bone-4);font-family:var(--mono);font-size:1rem;letter-spacing:.14em;
  text-transform:uppercase;padding-top:.3rem}

/* contact */
.cta{position:relative;z-index:10;overflow:hidden;padding:17rem 0 9rem;
  background:linear-gradient(158deg,#050912 0%,#0A1F3B 50%,#062434 100%)}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60rem 42rem at 76% 18%,rgba(71,200,227,.20),transparent 68%),
             radial-gradient(46rem 32rem at 14% 86%,rgba(131,184,149,.12),transparent 70%)}
.cta .wrap{position:relative;z-index:2;padding-left:calc(var(--rail) + 2rem)}
.cta h2{font-size:clamp(3.2rem,5vw,7.6rem);line-height:.98;letter-spacing:-.05em;
  font-weight:600;max-width:17ch}
.cta h2 em{font-style:normal;color:var(--cyan)}
.cta p{margin-top:2.2rem;color:var(--bone-2);font-size:1.75rem;max-width:56ch}
.cmeta{display:grid;grid-template-columns:repeat(4,1fr);gap:3rem;margin-top:6rem;
  padding-top:3rem;border-top:1px solid var(--line-2)}
.cmeta .k2{font-family:var(--mono);font-size:.95rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-4);margin-bottom:.8rem}
.cmeta .v{font-size:1.7rem}
.cmeta a.v:hover{color:var(--cyan)}

/* form */
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:82rem;margin-top:4rem}
.field{display:flex;flex-direction:column;gap:.8rem}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:.95rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-4)}
.field input,.field select,.field textarea{
  background:rgba(5,9,18,.55);border:1px solid var(--line-2);border-radius:6px;
  padding:1.2rem 1.4rem;color:var(--bone);font-family:var(--sans);font-size:1.5rem;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.field textarea{min-height:14rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--cyan);background:rgba(5,9,18,.75)}
.field select option{background:#0C1729;color:var(--bone)}
.formnote{grid-column:1/-1;color:var(--bone-4);font-size:1.25rem;margin-top:-.6rem}

/* veteran badge */
.vet{display:flex;align-items:center;gap:1.6rem;margin-top:4rem;padding-top:3rem;
  border-top:1px solid var(--line)}
.vet img{height:4.4rem;width:auto;opacity:.9}
.vet span{font-family:var(--mono);font-size:1rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-3);line-height:1.6}

/* footer */
footer{position:relative;z-index:10;padding:6rem 0 4rem;background:var(--ink);
  border-top:1px solid var(--line)}
footer .wrap{padding-left:calc(var(--rail) + 2rem)}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem;
  padding-bottom:4rem;border-bottom:1px solid var(--line)}
.fcols h4{font-family:var(--mono);font-size:.95rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-4);margin-bottom:1.6rem}
.fcols a,.fcols div.li{display:block;color:var(--bone-3);font-size:1.35rem;padding:.4rem 0;
  transition:color .3s var(--ease)}
.fcols a:hover{color:var(--cyan)}
.fcols img{height:2.6rem;width:auto;margin-bottom:1.6rem}
.fbot{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  padding-top:2.6rem;color:var(--bone-4);font-size:1.2rem}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(28px);
  transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ============================================================== RESPONSIVE */
@media (max-width:1240px){ :root{--rail:24rem;--core:7rem} }
/* Small laptops and tablets in landscape: a narrower copy column and smaller
   picture windows leave the orb stage room for its four corner slots. */
@media (min-width:1001px) and (max-width:1365px){
  .hero-in{grid-template-columns:minmax(0,30rem) minmax(0,1fr);column-gap:3.6rem}
  .hero-copy p{font-size:1.6rem}
}
/* Under 1100px the stage beside the copy is too narrow: stack headline, orb,
   copy, as on phones. */
@media (min-width:1001px) and (max-width:1100px){
  .hero-in{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
  .hero-copy{grid-column:1;grid-row:2;margin-top:2.4rem}
}
@media (max-width:1000px){
  :root{--rail:0rem;--core:0rem}
  body{display:flex;flex-direction:column}
  .grain{order:0}
  main{order:1;width:100%;min-width:0}
  .rail{order:2;position:relative;left:auto;top:auto;width:100%;min-width:0;max-height:none;
    padding:6rem 2.2rem 8rem;background:var(--ink);border-top:1px solid var(--line)}
  footer{order:3}
  .drail,.scrollcue{display:none}
  .topright{right:2.2rem;top:3rem}
  .topright .pill{padding:.55rem 1.2rem;font-size:.95rem}
  .mark{left:2.2rem;top:2.6rem}
  .mark img{height:2.4rem}
  .wrap{padding:0 2.2rem}
  .sec .wrap,.masthead .wrap,.cta .wrap,footer .wrap{padding-left:2.2rem}
  .hero{min-height:0;padding-right:0}
  .hero-in{padding:10rem 2.2rem 3rem;grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto}
  .hero h1{font-size:clamp(3.4rem,9.4vw,7.6rem)}
  .hero h1 span{white-space:normal}
  .orbwrap{grid-column:1;grid-row:2;position:relative;right:auto;top:auto;transform:none;
    width:100%;height:42svh;margin:2.4rem 0 0;overflow:hidden;z-index:0}
  .hero-copy{grid-column:1;grid-row:3;max-width:100%;margin-top:2.4rem}
  .hero-foot .statrow{grid-template-columns:repeat(2,1fr)}
  .hero-foot .cellx{padding:1.6rem 0;border-right:0}
  .ticker,  .dive{padding-right:0}
  .panel .pin{padding:0 2.2rem}
  .masthead{padding:12rem 0 5rem}
  .split{grid-template-columns:1fr;gap:2.4rem;padding:4rem 0}
  .split .pim{min-height:24rem}
  .cards,.cards.two,.team{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:.8rem}
  .row .a{text-align:left}
  .svc{grid-template-columns:1fr;gap:1.6rem;padding:5rem 0}
  .facts{grid-template-columns:1fr}
  .cmeta{grid-template-columns:1fr;gap:2rem}
  .form{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr 1fr}
  .ocard{width:12.6rem;padding:.65rem .65rem .75rem;border-radius:.9rem}
  .ocard-t{font-size:1rem}
  .ocard-k{font-size:.74rem}
}

/* Phones (portrait, or landscape on a touch screen): name-only cards.
   No picture and no kind label, so the ring stays uncrowded (2026-10-04).
   display:none also stops the lazy thumbnails from downloading. Name is two
   sizes smaller than before (10px to 8px), then 7px; card 0.48x of 12.6rem.
   Must sit AFTER the max-width:1000px .ocard rules above: same specificity,
   so the later rule wins. */
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  .ocard{width:6.08rem;padding:.4rem .5rem .43rem;border-radius:.43rem}
  .ocard-th,.ocard-k{display:none}
  .ocard-t{font-size:.7rem;line-height:1.3}
}

/* Under 1000px the pinned deck stacks. Eight panels cannot be trusted to fit a
   phone viewport, and a clipped panel loses content. */
@media (max-width:1000px){
  .dive{height:auto;padding-right:0}
  .dive-stage{position:relative;height:auto;overflow:visible}
  .dive-bg{display:none}
  .panel{position:relative;inset:auto;opacity:1;pointer-events:auto;transform:none;
    filter:none;display:block;padding:6rem 0;border-top:1px solid var(--line)}
  .panel .pin{max-height:none}
  .panel .pin.withcap{grid-template-columns:minmax(0,1fr);row-gap:3.6rem}
  .capcard{max-width:15rem}
  .dive-anchor{position:static}
}
@media (max-width:560px){ .fcols{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .dive{height:auto}
  .dive-stage{position:relative;height:auto}
  .panel{position:relative;opacity:1;pointer-events:auto;transform:none;filter:none;
    padding:8rem 0;min-height:0}
  .dive-bg,.drail{display:none}
}

/* ===================== REPORT TO PLAN GRAPHIC (home, first dive panel) =====
   2026-10-04. Drawn by assets/js/report-plan.js. On computers and iPads in
   landscape it sits in the open space right of the text, over the photo; the
   text column narrows a little to make room, so the drawing never covers it.
   Under 1000px it joins the stacked flow: the full drawing on tablets, a
   one-card-at-a-time sequence on phones. */
.panel.p-plan{--plan-text:46rem}
/* 1366px and up: the headline may run 6rem past the column. It sits above
   the drawing's empty top-left corner, and stays on two lines as before. */
.p-plan h2{max-width:var(--plan-text)}
@media (min-width:1366px){ .p-plan h2{max-width:calc(var(--plan-text) + 6rem)} }
.p-plan .pin p{max-width:min(46ch,var(--plan-text))}
.p-plan .plist{max-width:var(--plan-text)}
.rplan{position:absolute;z-index:2;pointer-events:none;
  left:calc(var(--rail) + 2rem + var(--plan-text) + 2.8rem);right:2.4rem;
  top:max(9svh,8rem);bottom:2svh;display:flex;align-items:center;justify-content:center}
.rplan svg{display:block;width:100%;height:100%;overflow:visible}
@media (min-width:1001px) and (max-width:1100px){ .panel.p-plan{--plan-text:34rem} }
@media (max-width:1000px){
  .rplan{position:relative;left:auto;right:auto;top:auto;bottom:auto;display:block;
    margin:4.4rem 2.2rem 0;max-width:62rem}
  .rplan svg{height:auto}
  .rplan[data-mode="seq"]{max-width:46rem}
  .rp-step{opacity:0;transform:translateY(2.4rem);
    transition:opacity .8s var(--ease),transform .9s var(--ease)}
  .rp-step.in{opacity:1;transform:none}
  .rp-step[data-step="1"]{transform:translateY(-3rem) scale(.9);transform-origin:50% 0}
  .rp-step[data-step="1"].in{transform:none}
  .rp-step+.rp-step:not([data-step="1"])::before{content:"";display:block;width:1.5px;height:2.2rem;
    margin-left:2.4rem;background:rgba(71,200,227,.45)}
  .rp-step [data-k="arrow"]{stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease) .25s}
  .rp-step.in [data-k="arrow"]{stroke-dashoffset:0}
  .rp-report [data-k="label"]{opacity:0;transition:opacity .6s var(--ease) .7s}
  .rp-report.in [data-k="label"]{opacity:1}
  /* items inside each phone card arrive one by one (delays set inline) */
  .rp-step [data-k="item"],.rp-step [data-k="cta"]{opacity:0;transition-property:opacity;
    transition-duration:.7s;transition-timing-function:var(--ease)}
  .rp-step.in [data-k="item"],.rp-step.in [data-k="cta"]{opacity:1}
  .rp-report [data-k="ghost"]{transform-box:fill-box;transform-origin:50% 50%}
  .rplan.opened .rp-report [data-k="ghost"]{animation:rpghost 1.1s var(--ease) both}
}
/* "Find your call to action" button inside the drawing */
.rplan .rp-cta{pointer-events:auto;cursor:pointer}
.rp-cta rect{transition:fill-opacity .25s var(--ease)}
.rp-cta:hover rect{fill-opacity:.3}
.rp-cta:focus{outline:none}
.rp-cta:focus-visible rect{stroke-width:2.6}
@media (min-width:1001px){ .panel:not(.on) .rplan .rp-cta{pointer-events:none!important} }
/* the fingerprint on the call-to-action card breathes slowly */
.rp-fp{animation:rpfp 3.8s ease-in-out infinite}
@keyframes rpfp{0%,100%{opacity:.68}50%{opacity:1}}
@keyframes rpghost{0%{opacity:1;transform:none}
  100%{opacity:0;transform:translate(150px,70px) scale(.8)}}
@media (prefers-reduced-motion:reduce) and (min-width:1001px){
  .panel.p-plan{min-height:84rem}
  .rplan{top:6rem;bottom:6rem}
}
@media (prefers-reduced-motion:reduce){
  .rp-step,.rp-step[data-step="1"]{opacity:1;transform:none}
  .rp-step [data-k="arrow"]{stroke-dashoffset:0}
  .rp-report [data-k="label"],.rp-step [data-k="item"],.rp-step [data-k="cta"]{opacity:1}
  .rplan.opened .rp-report [data-k="ghost"]{animation:none;opacity:0}
}

/* ===================== FINANCE GRAPHICS (home, "Financial Motivations") ====
   2026-10-04. Drawn by assets/js/finance-plan.js. Same place as the report
   drawing: right of the text column. One card crossfades 01 -> 02 -> 03 with
   scroll; a thin cyan line joins the lit list item to the card. */
.fplan{position:absolute;z-index:2;pointer-events:none;
  left:calc(var(--rail) + 2rem + var(--plan-text) + 2.8rem);right:2.4rem;
  top:max(9svh,8rem);bottom:4svh;display:flex;align-items:center;justify-content:center}
.fin-stage{position:relative}
.fin-card{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.fin-leader{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;
  overflow:visible;opacity:0;transition:opacity .4s var(--ease)}
.fin-leader path{stroke:var(--cyan);stroke-opacity:.7}
.fin-leader circle{fill:var(--cyan)}
.p-fin .plist div{transition:color .4s var(--ease),border-color .4s var(--ease)}
.p-fin .plist div .i{transition:color .4s var(--ease)}
.p-fin .plist div.fin-on{color:var(--bone)}
.p-fin .plist div.fin-on .i{color:var(--cyan)}
/* The headline keeps its full width (as before); the script starts the card
   box just under the headline, so the card sits beside the list. */
.p-fin h2{max-width:none!important}
@media (min-width:1001px) and (max-width:1100px){
  .panel.p-fin{--plan-text:37rem}
  .p-fin .pin > p:first-of-type{max-width:46ch}
}
@media (max-width:1000px){
  .fplan{position:relative;left:auto;right:auto;top:auto;bottom:auto;display:block;
    margin:4rem 2.2rem 0;max-width:46rem}
  .fin-step svg{display:block;width:100%;height:auto}
  .fin-step+.fin-step{margin-top:2.4rem}
  .fin-step{opacity:0;transform:translateY(2.4rem);
    transition:opacity .8s var(--ease),transform .9s var(--ease)}
  .fin-step.in{opacity:1;transform:none}
  .fin-step [data-k="it"]{opacity:0;transition-property:opacity;transition-duration:.7s;
    transition-timing-function:var(--ease)}
  .fin-step.in [data-k="it"]{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .panel.p-fin{display:block}
  .fplan{position:relative;left:auto;right:auto;top:auto;bottom:auto;display:block;
    margin:4rem 2.2rem 0 calc(var(--rail) + 2rem);max-width:40rem}
  .fin-step svg{display:block;width:100%;height:auto}
  .fin-step+.fin-step{margin-top:2.4rem}
  .fin-step,.fin-step [data-k="it"]{opacity:1;transform:none}
}

/* ===================== FEATURED PROJECTS (home, dive panel 6) ==============
   2026-10-04. One picture card per type of project. Styles are scoped to
   .p-feat so nothing else on the page changes. */
.p-feat .pin{max-width:calc(var(--rail) + 112rem)}
.p-feat h2{max-width:60rem}
.fp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;margin-top:2.6rem}
.fp-card{display:block;border-radius:.9rem;padding:.6rem .6rem .8rem;background:rgba(8,15,30,.8);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--line-2);box-shadow:0 1.6rem 4.4rem rgba(0,0,0,.45);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),opacity .7s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.fp-card:hover,.fp-card:focus-visible{border-color:rgba(71,200,227,.6);box-shadow:0 1.6rem 4.4rem rgba(71,200,227,.16);outline:none}
.fp-th{display:block;border-radius:.55rem;overflow:hidden;background:var(--ink-2)}
.fp-th img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.p-feat .fp-k{display:block;margin-top:.8rem;font-size:1.05rem;letter-spacing:.14em;color:var(--cyan)}
.fp-t{display:block;margin-top:.35rem;font-size:1.35rem;line-height:1.3;color:var(--bone)}
.p-feat .srclink{margin-top:1.8rem}
/* computers: the cards arrive one by one as the panel comes up */
@media (min-width:1001px){
  .p-feat:not(.on) .fp-card{opacity:0;transform:translateY(1.4rem)}
  .p-feat.on .fp-card{opacity:1;transform:none}
}
@media (min-width:1001px) and (max-width:1240px){ .fp-t{font-size:1.25rem} .p-feat .fp-k{font-size:1rem} }
@media (max-width:1000px){
  .fp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
  .fp-t{font-size:1.4rem}
  .p-feat .fp-k{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){ .fp-card,.p-feat:not(.on) .fp-card{opacity:1;transform:none} }

/* ===================== INSIGHTS AS CARDS (home, dive panel 7) ==============
   2026-10-04. Same items, titles, labels and links as before, now picture
   cards, three across. Scoped to .p-ins; looks like the Featured Projects
   cards but shares no selector with them. On computers the first six show
   (two rows); "All research and perspectives" opens the rest. */
.p-ins .pin{max-width:calc(var(--rail) + 104rem)}
.p-ins h2,.p-ins .pin > p{max-width:60rem}
.ins-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem;margin-top:2.4rem}
.ins-card{display:block;border-radius:.9rem;padding:.55rem .55rem .75rem;background:rgba(8,15,30,.8);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--line-2);box-shadow:0 1.6rem 4.4rem rgba(0,0,0,.45);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),opacity .7s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.ins-card:hover,.ins-card:focus-visible{border-color:rgba(71,200,227,.6);box-shadow:0 1.6rem 4.4rem rgba(71,200,227,.16);outline:none}
.ins-th{display:block;border-radius:.5rem;overflow:hidden;background:var(--ink-2)}
.ins-th img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}
.p-ins .ins-k{display:block;margin-top:.75rem;font-size:1.05rem;letter-spacing:.14em;color:var(--cyan)}
.ins-t{display:block;margin-top:.3rem;font-size:1.35rem;line-height:1.3;color:var(--bone)}
.p-ins .cta-row{margin-top:2rem!important}
@media (min-width:1001px){
  .ins-card:nth-child(n+7){display:none}
  .p-ins:not(.on) .ins-card{opacity:0;transform:translateY(1.4rem)}
  .p-ins.on .ins-card{opacity:1;transform:none}
}
@media (min-width:1001px) and (max-width:1240px){ .ins-t{font-size:1.25rem} .p-ins .ins-k{font-size:1rem} }
@media (max-width:1000px){
  .ins-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
  .ins-th img{aspect-ratio:16/9}
  .ins-t{font-size:1.4rem}
  .p-ins .ins-k{font-size:1rem}
}
@media (max-width:480px){ .ins-grid{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){ .ins-card,.p-ins:not(.on) .ins-card{opacity:1;transform:none} }
/* short computer screens: the picture sits at the left of each card so two
   rows still fit above the scroll cue */
@media (min-width:1001px) and (max-height:820px){
  .ins-card{display:grid;grid-template-columns:40% minmax(0,1fr);grid-template-rows:auto auto;
    column-gap:1rem;align-items:center;padding:.55rem}
  .ins-th{grid-row:1 / 3}
  .ins-th img{aspect-ratio:4/3}
  .p-ins .ins-k{margin-top:0;align-self:end}
  .ins-t{align-self:start;font-size:1.25rem}
  .p-ins .cta-row{margin-top:1.6rem!important}
}

/* ===================== SMALL CAPABILITY STATEMENT CARD (home, last panel) ==
   2026-10-04. Replaces the large picture card: logo mark, title, Open and
   Download PDF, in one small rectangle beside "View our projects". */
.capmini{display:inline-flex;align-items:center;gap:1.1rem;padding:.6rem 1.4rem .6rem .7rem;
  border-radius:.8rem;background:rgba(8,15,30,.8);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:border-color .3s var(--ease)}
.capmini:hover,.capmini:focus-within{border-color:rgba(71,200,227,.55)}
.capmini-mark{width:4rem;height:auto;flex:none;display:block}
.capmini-t{font-size:1.45rem;font-weight:600;color:var(--bone);white-space:nowrap}
.capmini-acts{display:flex;gap:1.2rem;font-family:var(--mono);font-size:1.05rem;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap}
.capmini-acts a{color:var(--cyan)}
.capmini-acts a:hover{color:var(--bone)}
@media (max-width:560px){
  .capmini{flex-wrap:wrap;row-gap:.4rem}
}
.p-cta .pin{max-width:calc(var(--rail) + 116rem)}
.p-cta h2{max-width:78rem}
.p-cta .cta-row{align-items:center}

/* ===================== ABOUT STRIP (home, right after the hero) ============
   2026-10-04. Short "About Gaiergy" text with a concept-to-construction path.
   The stops light one by one, then all together: any step, or all steps. */
.about-strip{position:relative;padding:7rem calc(var(--core) + 5rem) 7rem calc(var(--rail) + 2rem);
  background:
    radial-gradient(60% 80% at 78% 50%,rgba(71,200,227,.10),transparent 70%),
    radial-gradient(circle,rgba(234,241,249,.06) 1px,transparent 1.4px) 0 0/2.4rem 2.4rem,
    linear-gradient(135deg,var(--ink-1),var(--ink) 70%);
  border-top:1px solid var(--line)}
.as-in{display:grid;grid-template-columns:minmax(0,1fr);row-gap:3.6rem;align-items:center;max-width:150rem}
.as-path{max-width:78rem}
.about-strip h2{font-size:clamp(3rem,4vw,5.6rem);line-height:1;letter-spacing:-.045em;font-weight:600}
.about-strip p{margin-top:2rem;color:var(--bone-2);font-size:1.65rem;max-width:52ch}
.about-strip .srclink{margin-top:2rem}
.as-path svg{display:block;width:100%;height:auto;overflow:visible}
.as-v{display:none!important}
.as-line{stroke:var(--cyan);stroke-opacity:.45;stroke-width:1.6}
.as-node{fill:var(--ink-1);stroke:var(--cyan);stroke-opacity:.55;stroke-width:1.5;transition:fill .4s,stroke-opacity .4s}
.as-ic{fill:none;stroke:var(--cyan);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.as-lab{fill:var(--bone);font-family:var(--sans);font-size:16px;font-weight:500}
.as-end{fill:var(--bone);fill-opacity:.55;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
/* each stop lights in turn, then all five together, on a 10 s loop */
.as-stop .as-node{animation:asnode 10s ease-in-out infinite}
.as-stop .as-ic{animation:asic 10s ease-in-out infinite}
.as-s1 .as-node,.as-s1 .as-ic{animation-name:asn1,asi1}
@keyframes asn1{0%,2%{fill:var(--ink-1);stroke-opacity:.55}5%,12%{fill:rgba(71,200,227,.22);stroke-opacity:1}15%,58%{fill:var(--ink-1);stroke-opacity:.55}62%,88%{fill:rgba(71,200,227,.22);stroke-opacity:1}92%,100%{fill:var(--ink-1);stroke-opacity:.55}}
@keyframes asn2{0%,12%{fill:var(--ink-1);stroke-opacity:.55}15%,22%{fill:rgba(71,200,227,.22);stroke-opacity:1}25%,58%{fill:var(--ink-1);stroke-opacity:.55}62%,88%{fill:rgba(71,200,227,.22);stroke-opacity:1}92%,100%{fill:var(--ink-1);stroke-opacity:.55}}
@keyframes asn3{0%,22%{fill:var(--ink-1);stroke-opacity:.55}25%,32%{fill:rgba(71,200,227,.22);stroke-opacity:1}35%,58%{fill:var(--ink-1);stroke-opacity:.55}62%,88%{fill:rgba(71,200,227,.22);stroke-opacity:1}92%,100%{fill:var(--ink-1);stroke-opacity:.55}}
@keyframes asn4{0%,32%{fill:var(--ink-1);stroke-opacity:.55}35%,42%{fill:rgba(71,200,227,.22);stroke-opacity:1}45%,58%{fill:var(--ink-1);stroke-opacity:.55}62%,88%{fill:rgba(71,200,227,.22);stroke-opacity:1}92%,100%{fill:var(--ink-1);stroke-opacity:.55}}
@keyframes asn5{0%,42%{fill:var(--ink-1);stroke-opacity:.55}45%,52%{fill:rgba(71,200,227,.22);stroke-opacity:1}55%,58%{fill:var(--ink-1);stroke-opacity:.55}62%,88%{fill:rgba(71,200,227,.22);stroke-opacity:1}92%,100%{fill:var(--ink-1);stroke-opacity:.55}}
@keyframes asi1{0%,2%{opacity:.75}5%,12%{opacity:1}15%,58%{opacity:.75}62%,88%{opacity:1}92%,100%{opacity:.75}}
@keyframes asi2{0%,12%{opacity:.75}15%,22%{opacity:1}25%,58%{opacity:.75}62%,88%{opacity:1}92%,100%{opacity:.75}}
@keyframes asi3{0%,22%{opacity:.75}25%,32%{opacity:1}35%,58%{opacity:.75}62%,88%{opacity:1}92%,100%{opacity:.75}}
@keyframes asi4{0%,32%{opacity:.75}35%,42%{opacity:1}45%,58%{opacity:.75}62%,88%{opacity:1}92%,100%{opacity:.75}}
@keyframes asi5{0%,42%{opacity:.75}45%,52%{opacity:1}55%,58%{opacity:.75}62%,88%{opacity:1}92%,100%{opacity:.75}}
.as-s2 .as-node{animation-name:asn2}.as-s2 .as-ic{animation-name:asi2}
.as-s3 .as-node{animation-name:asn3}.as-s3 .as-ic{animation-name:asi3}
.as-s4 .as-node{animation-name:asn4}.as-s4 .as-ic{animation-name:asi4}
.as-s5 .as-node{animation-name:asn5}.as-s5 .as-ic{animation-name:asi5}
.as-s1 .as-node{animation-name:asn1}.as-s1 .as-ic{animation-name:asi1}
@media (max-width:1000px){
  .about-strip{padding:7rem 2.2rem}
  .as-in{grid-template-columns:minmax(0,1fr);row-gap:4rem}
  .as-path{max-width:62rem}
}
@media (max-width:560px){
  .as-h{display:none!important}
  .as-v{display:block!important;max-width:24rem}
}
@media (prefers-reduced-motion:reduce){
  .as-stop .as-node{fill:rgba(71,200,227,.16);stroke-opacity:1}
  .as-stop .as-ic{opacity:1}
}

/* ===================== PANEL 0 SITS UNDER THE TICKER (home) ================
   2026-10-04. The deck centers each panel in a 100svh stage, which left an
   empty band of 110 to 270 px (more on tall windows) between the ticker and
   "At the surface". Panel 0 is top-aligned instead; report-plan.js sets
   --p0off: 30 px under the ticker while the stage rises, enough to clear the
   fixed header once pinned. The drawing box starts at the same line. */
@media (min-width:1001px) and (prefers-reduced-motion:no-preference){
  .panel.p-plan[data-zone="0"]{align-items:flex-start}
  .panel.p-plan[data-zone="0"] .pin{padding-top:var(--p0off,9rem);max-height:none}
  .panel.p-plan[data-zone="0"] .rplan{top:var(--p0off,9rem);align-items:flex-start}
}
@media (max-width:1000px){ .panel[data-zone="0"]{padding-top:3rem} }
@media (prefers-reduced-motion:reduce){ .panel[data-zone="0"]{padding-top:3rem} }

/* ===================== FINANCE PANEL SITS UNDER THE TOP BAR (home) =========
   2026-10-04. Like the first panel: top-aligned instead of centered, so the
   eyebrow sits about 20 px under the fixed logo and button (finance-plan.js
   sets --p1off from their measured bottom). */
@media (min-width:1001px) and (prefers-reduced-motion:no-preference){
  .panel.p-fin{align-items:flex-start}
  .panel.p-fin .pin{padding-top:var(--p1off,8.9rem);max-height:none}
}

/* ===================== FEATURED PROJECTS, MORE CARDS (home) ================
   2026-10-04. The panel sits under the fixed top bar like the first two, and
   the grid fills the panel with compact picture cards (picture left, words
   right). How many show depends on the room: 20 on large and 1440x900
   screens, 16 on shorter laptops, 12 under 1240px wide. Phones and tablets
   show every card. "All projects" always follows. */
@media (min-width:1001px) and (prefers-reduced-motion:no-preference){
  .panel.p-feat{align-items:flex-start}
  .panel.p-feat .pin{padding-top:calc(6.9rem + 20px);max-height:none}
}
@media (min-width:1001px){
  .p-feat h2{font-size:clamp(3rem,3.6vw,5.4rem)}
  .p-feat .fp-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:2rem}
  .p-feat .fp-card{display:grid;grid-template-columns:42% minmax(0,1fr);column-gap:1rem;
    align-items:center;padding:.5rem;border-radius:.8rem}
  .p-feat .fp-th img{aspect-ratio:4/3}
  .p-feat .fp-k{margin-top:0;font-size:1.1rem;letter-spacing:.1em;line-height:1.35}
  .p-feat .fp-t{margin-top:.25rem;font-size:1.3rem;line-height:1.28}
  .p-feat .srclink{margin-top:1.4rem}
}
@media (min-width:2300px){ .p-feat .fp-grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (min-width:1001px) and (max-width:1240px){
  .p-feat .fp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1000px){
  .fp-tx{display:block}
}
/* long type labels wrap instead of running past the card edge */
.p-feat .fp-k{overflow-wrap:anywhere}
@media (min-width:1001px){ .p-feat .fp-k{letter-spacing:.07em} }
/* taller screens: slightly taller pictures so the grid fills the panel */
@media (min-width:1001px) and (min-height:860px){ .p-feat .fp-th img{aspect-ratio:5/4} }
@media (min-width:2300px){ .p-feat .fp-th img{aspect-ratio:1/1} }
/* phones and tablets: small labels no smaller than 12 px */
@media (max-width:1000px){ .p-feat .fp-k,.p-ins .ins-k{font-size:1.2rem} }
@media (min-width:1001px) and (max-width:1500px){ .p-feat .fp-k{letter-spacing:.03em} }
@media (min-width:1001px) and (max-width:1300px){ .p-feat .fp-card{grid-template-columns:34% minmax(0,1fr);column-gap:.8rem} }

/* ===================== INSIGHTS, TOP-ALIGNED AND FULLER (home) =============
   2026-10-04. Sits under the fixed top bar like the other reworked panels.
   18 items: the original 9 in their order, then the rest of insights.html in
   its order. On computers: compact cards (picture left, words right), 4 across;
   16 show on screens 860px tall and up, 12 below that, 9 under 1240px wide.
   Phones and tablets show all 18. Supersedes the earlier 6-card rules. */
@media (min-width:1001px) and (prefers-reduced-motion:no-preference){
  .panel.p-ins{align-items:flex-start}
  .panel.p-ins .pin{padding-top:calc(6.9rem + 20px);max-height:none}
}
@media (min-width:1001px){
  .p-ins h2{font-size:clamp(3rem,3.6vw,5.4rem);max-width:none}
  .p-ins .pin > p{margin-top:1.4rem}
  .p-ins .ins-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:2rem}
  .p-ins .ins-card{display:grid;grid-template-columns:40% minmax(0,1fr);grid-template-rows:auto;
    column-gap:1rem;align-items:center;padding:.5rem;border-radius:.8rem}
  .p-ins .ins-th{grid-row:auto}
  .p-ins .ins-th img{aspect-ratio:4/3}
  .p-ins .ins-k{margin-top:0;font-size:1.1rem;letter-spacing:.06em;line-height:1.35;align-self:auto}
  .p-ins .ins-t{margin-top:.25rem;font-size:1.3rem;line-height:1.28;align-self:auto}
  .p-ins .ins-card:nth-child(n+7){display:grid}
  .p-ins .ins-card:nth-child(n+13){display:none}
  .p-ins .cta-row{margin-top:1.6rem!important}
}
@media (min-width:1001px) and (min-height:860px){ .p-ins .ins-card:nth-child(n+13){display:grid} .p-ins .ins-card:nth-child(n+17){display:none} }
@media (min-width:1001px) and (max-width:1500px){ .p-ins .ins-k{letter-spacing:.03em} }
@media (min-width:1001px) and (max-width:1300px){ .p-ins .ins-card{grid-template-columns:34% minmax(0,1fr);column-gap:.8rem} }
@media (min-width:1001px) and (max-width:1240px){
  .p-ins .ins-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .p-ins .ins-card:nth-child(n+10){display:none!important}
}
@media (max-width:1000px){ .ins-tx{display:block} }
@media (min-width:1001px) and (max-width:1240px) and (min-height:800px){ .p-ins .ins-card:nth-child(n+10):nth-child(-n+12){display:grid!important} }

/* ===================== BATTERY AND "GET IN TOUCH" TOP-ALIGNED (home) ======
   2026-10-04. They sit under the fixed top bar like the others: first line
   about 20 px below it when pinned. */
@media (min-width:1001px) and (prefers-reduced-motion:no-preference){
  .panel.p-bat,.panel.p-cta{align-items:flex-start}
  .panel.p-bat .pin,.panel.p-cta .pin{padding-top:calc(6.9rem + 20px);max-height:none}
}

/* ===================== PROJECTS PANEL SHOWS EVERY PROJECT (home) ===========
   2026-10-04. All 20 projects, same list and order as projects.html. Where
   they do not fit the pinned stage, projects-slide.js gives the panel more
   scroll and slides the grid up (--fslide), fading it under the top bar. */
@media (min-width:1001px) and (prefers-reduced-motion:no-preference){
  .p-feat .pin{transform:translateY(calc(-1 * var(--fslide,0px)));will-change:transform}
  .p-feat.fp-sliding{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent var(--fmask,70px),#000 calc(var(--fmask,70px) + 30px));
    mask-image:linear-gradient(to bottom,transparent 0,transparent var(--fmask,70px),#000 calc(var(--fmask,70px) + 30px))}
}
/* projects.html: the picture beside each entry opens the project too */
a.pim{display:block}
.split[id]{scroll-margin-top:9rem}

/* ===================== CONTACT ROW (page-bottom call to action) ============
   2026-10-04. STATUS was removed from this row; the remaining items share the
   row equally, however many there are. */
.cmeta{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
@media (max-width:1000px){ .cmeta{grid-auto-flow:row;grid-template-columns:1fr} }

/* ===================== SECOND ABOUT PANEL (home, after Insights) ===========
   2026-10-04. Same words and concept-to-construction path as the strip after
   the hero, as a deck panel. Top-aligned like the others. The light-up
   animation waits until the panel is on screen. */
.p-about2 .pin{max-width:calc(var(--rail) + 92rem)}
.p-about2 h2{max-width:none}
.p-about2 .pin > p{max-width:58ch}
.p-about2 .as-path{max-width:78rem;margin-top:3.6rem}
.p-about2 .srclink{margin-top:2.4rem}
@media (min-width:1001px) and (prefers-reduced-motion:no-preference){
  .panel.p-about2{align-items:flex-start}
  .panel.p-about2 .pin{padding-top:calc(6.9rem + 20px);max-height:none}
  .p-about2:not(.on) .as-stop .as-node,.p-about2:not(.on) .as-stop .as-ic{animation-play-state:paused}
}
@media (max-width:1000px){ .p-about2 .as-path{margin-top:3rem} }

/* ===================== PHONE TOP BAR (all pages) ===========================
   2026-10-05. Under 760px the fixed logo and "Schedule a consultation" pill
   ran into each other and page text showed through. The bar now has a dark
   ink background with a slight blur, the logo and pill are a little smaller,
   and under 380px (where the full words cannot keep a 12 px gap) the pill reads "Consult". Computers and iPads unchanged.
   2026-10-17. On phones (760px and under) the pill now reads "Contact Us" at every
   width, so it stays short and clear of the "Corp" in the logo. Computers and iPads
   still read "Schedule a consultation". */
@media (max-width:760px){
  body::before{content:"";position:fixed;left:0;right:0;top:0;height:6.6rem;z-index:290;
    background:rgba(5,9,18,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);pointer-events:none}
  .mark{top:2.15rem;left:1.6rem}
  .mark img{height:1.75rem}
  .topright{top:1.75rem;right:1.6rem}
  .topright .pill{padding:.55rem 1.2rem;font-size:0;letter-spacing:0;white-space:nowrap}
  .topright .pill::before{content:"Contact Us";font-size:1rem;letter-spacing:.14em}
}

/* Floating report cards (orb.js) orbit behind the home page headline and copy
   boxes, and those empty boxes caught the clicks meant for the cards (more
   than half of them). Let clicks pass through the boxes; real links and
   buttons inside them stay clickable. Home page only (#ring). 2026-10-13 */
.hero-in:has(#ring)>.hero-head,.hero-in:has(#ring)>.hero-copy,.topright{pointer-events:none}
.hero-in:has(#ring)>.hero-head a,.hero-in:has(#ring)>.hero-copy :is(a,button,input,select,label),.topright a{pointer-events:auto}