/* Bugiyal Tech — site styles.
   Implemented from the "Bugiyal Tech.dc.html" design canvas.
   Palette and type follow brand/brand-guidelines.html. */

:root{
  --pine:#0C1F17;
  --pine2:#102E22;
  --fir:#1E5C40;
  --meadow:#23A662;          /* brand accent: strokes, rules, marks on dark */
  --meadow-lit:#2cb56e;

  /* Accessible siblings of the brand green. #23A662 is only 3.13:1 under
     white text and 2.92:1 as text on Mist, so it stays an accent and these
     carry the jobs where WCAG AA applies. Verified: 5.36 / 6.53 / 5.45. */
  --meadow-solid:#1B7A47;    /* green as a BACKGROUND under white text  */
  --meadow-solid-hi:#176B41; /* ...its hover                            */
  --meadow-ink:#17734A;      /* green as TEXT on a light ground         */
  --link-hover:#146B45;      /* 6.07:1 on Mist                          */
  --marigold-ink:#8f5f10;    /* marigold as text on a light ground      */
  --edge:#7E9488;            /* form control borders, 3.24:1 on white   */
  --edge-dark:#2F8558;       /* control borders on pine, 3.77:1         */
  --spring:#9BE3B4;
  --mist:#F3F8F4;
  --paper:#FBFDFB;
  --line:#DCE7DF;
  --stone:#5F7268;
  --slate:#3d5347;
  --marigold:#E8A13D;
  --dim:#c9dcd0;
  --dim2:#9ab3a4;

  --display:'Bricolage Grotesque',sans-serif;
  --body:'Albert Sans',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(20px,5vw,56px);
  --shell:1240px;

  --noise:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  /* The header is sticky and 73px tall. Without this, Tab-to-focus,
     find-in-page and any anchor reached with JS disabled land underneath it. */
  scroll-padding-top:88px;
  scroll-padding-bottom:96px;
}
body{
  margin:0;
  background:var(--mist);
  color:var(--pine2);
  font-family:var(--body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--fir)}
a:hover{color:var(--link-hover)}
/* Two tones, because no single colour clears 3:1 against both the near-white
   and near-black grounds on this page — the best possible is 1.71:1. The dark
   ring carries light surfaces, the spring halo carries dark ones and the green
   buttons. Worst case across all eight grounds: 3.58:1. */
:focus-visible{
  outline:2px solid var(--pine2);
  outline-offset:2px;
  box-shadow:0 0 0 6px var(--spring);
  border-radius:2px;
}
img,svg{max-width:100%}

@keyframes bt-blink{0%,60%{opacity:1}61%,100%{opacity:.15}}

.wrap{max-width:var(--shell);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.kicker{margin:0 0 14px;font-family:var(--mono);font-size:12px;letter-spacing:3.2px;color:var(--meadow-ink)}
.kicker--light{color:var(--spring)}
.mono{font-family:var(--mono)}
.aside-note{margin:26px 0 0;font-size:14px;color:var(--stone);font-style:italic;transform:rotate(-.4deg)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- header */

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(243,248,244,.94);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:28px;padding-top:14px;padding-bottom:14px}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand__mark{width:52px;height:29px;display:block}
.brand__word{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.5px;color:var(--pine2)}
.brand__bug{font-family:var(--mono);font-weight:700;font-size:17px;color:var(--meadow)}
.brand__tech{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:4px;color:var(--meadow);margin-left:2px}

.nav{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:500}
.nav a{text-decoration:none;color:var(--fir)}

.btn{display:inline-block;text-decoration:none;border-radius:4px;font-weight:600;text-align:center}
.btn--primary{background:var(--meadow-solid);color:#fff}
.btn--primary:hover{background:var(--meadow-solid-hi);color:#fff}
.btn--ghost{border:1.5px solid var(--edge-dark);color:var(--spring)}
.btn--ghost:hover{border-color:var(--meadow);color:var(--mist)}

.header-cta{margin-left:auto;flex:none;font-size:14.5px;padding:11px 20px}

/* ------------------------------------------------------------------ hero */

.hero{position:relative;background:var(--pine);color:var(--mist);overflow:hidden}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.035;background-image:var(--noise)}

.hero__ridge{position:absolute;top:0;right:-4vw;bottom:0;width:60%}
.hero__ridge ridge-hero{position:absolute;inset:0}
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#0C1F17 0%,rgba(12,31,23,.6) 18%,rgba(12,31,23,0) 45%);
}

.hero__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,58ch) 1fr;
  min-height:86vh;min-height:86svh;align-items:center;
}
.hero__copy{padding:80px 0 96px;position:relative}

.hero__coords{
  position:absolute;top:56px;left:-26px;bottom:72px;width:14px;
  border-left:1px solid rgba(155,227,180,.25);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:6px 0 6px 10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:1px;color:var(--dim2);
  writing-mode:vertical-rl;
}
.hero__coords b{font-weight:400;color:var(--spring)}

.hero__frame{position:relative;display:inline-block;padding:26px 30px 30px}
.hero__frame::before{content:'';position:absolute;top:0;left:0;width:26px;height:26px;border-top:2px solid var(--spring);border-left:2px solid var(--spring)}
.hero__frame::after{content:'';position:absolute;bottom:0;right:0;width:26px;height:26px;border-bottom:2px solid var(--spring);border-right:2px solid var(--spring)}

.hero__eyebrow{
  display:flex;justify-content:space-between;align-items:center;gap:24px;margin:0 0 18px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:2.5px;color:var(--spring);
}
.live{display:flex;align-items:center;gap:7px;color:var(--marigold);flex:none}
.live__dot{width:7px;height:7px;border-radius:50%;background:var(--marigold);animation:bt-blink 1.6s steps(1) 8}

.hero__title{
  margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(38px,5vw,64px);line-height:1.26;letter-spacing:-2px;text-wrap:balance;
}
.tag{position:relative;display:inline-block;padding:0 10px}
.tag::after{
  content:attr(data-tag);position:absolute;left:-2px;
  font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:2px;
  background:var(--pine);padding:0 5px;
}
.tag--cam{color:var(--spring);border:1.5px solid rgba(155,227,180,.55)}
.tag--cam::after{top:-13px;color:var(--spring)}
.tag--link{color:var(--marigold);border:1.5px dashed rgba(232,161,61,.6)}
.tag--link::after{bottom:-13px;color:var(--marigold)}

.hero__lede{margin:20px 0 0;font-size:clamp(16.5px,15.9px + .3vw,17.5px);line-height:1.65;color:var(--dim);max-width:50ch}

.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;padding-left:30px}
.hero__actions .btn{font-size:16px}
.hero__actions .btn--primary{padding:15px 26px}
.hero__actions .btn--primary:hover{background:var(--meadow-solid-hi)}
.hero__actions .btn--ghost{padding:14px 24px}

.hero__sys{
  margin:40px 0 0;padding-left:30px;
  display:flex;flex-wrap:wrap;gap:8px 0;align-items:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:1.5px;color:var(--dim2);
}
.hero__sys .lead{color:var(--spring)}
.hero__sys .sys{padding:0 10px 0 18px}
.hero__sys .sys--first{padding:0 10px}
.hero__sys .tick{color:var(--fir)}
.hero__sys .caret{color:var(--marigold);animation:bt-blink 1.2s steps(1) 10}

/* --------------------------------------------------------- five questions */

.answers{background:var(--mist);border-bottom:1px solid var(--line)}
.answers .wrap{padding-top:clamp(48px,5.2vw,64px);padding-bottom:clamp(44px,4.6vw,56px)}
.answers h2{margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,36px);letter-spacing:-1px;text-wrap:balance}
.faq{margin-top:28px;position:relative}
.faq::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1.5px;background:var(--pine2);
  transform:scaleX(var(--rule,1));transform-origin:0 50%;
}
.faq__row{
  display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.5fr);
  gap:10px 28px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline;
  position:relative;transition:background-color 240ms ease;
}
.faq__row::after{
  content:'';position:absolute;left:-20px;top:0;bottom:-1px;width:2px;
  background:var(--marigold);transform:scaleY(0);transform-origin:50% 0;
  transition:transform 300ms cubic-bezier(.33,.9,.35,1);
}
.faq__row:hover{background:rgba(35,166,98,.045)}
.faq__row:hover::after{transform:scaleY(1)}
.faq__row:hover .faq__n{color:var(--marigold)}
.faq__n{transition:color 240ms ease}
.faq__n{font-family:var(--mono);font-size:13px;color:var(--stone);font-variant-numeric:tabular-nums}
.faq__q{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(17px,16.1px + .23vw,19px);letter-spacing:-.3px}
.faq__a{margin:0;font-size:15.5px;color:var(--slate)}
.faq__a a{font-weight:600;white-space:nowrap}

/* --------------------------------------------------------------- 01 secure */

.secure{background:var(--paper)}
.secure .wrap{padding-top:clamp(56px,7.2vw,88px);padding-bottom:clamp(48px,6vw,72px)}
.secure__head{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:24px 64px;align-items:end;margin-bottom:44px;
}
.secure__head h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(32px,4.6vw,62px);line-height:1;letter-spacing:-2.4px;text-wrap:balance}
.secure__head p{margin:0;font-size:16px;color:var(--stone)}
.secure__body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:stretch}

.panel h3{margin:0 0 4px;font-family:var(--display);font-weight:700;font-size:clamp(21px,19.2px + .38vw,24px);letter-spacing:-.5px}
.panel__brands{margin:0 0 16px;font-family:var(--mono);font-size:11.5px;letter-spacing:1.5px;color:var(--stone)}
.panel--light{
  background:var(--mist);border:1px solid var(--line);
  border-top:2px solid var(--pine2);padding:32px 30px;
}
.panel--dark{
  background:var(--pine2);color:var(--mist);padding:32px 30px;
  border-top:2px solid var(--meadow);
}
.panel--dark .panel__brands{color:var(--spring)}

.devices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.device{background:var(--pine);border:1px solid var(--fir);overflow:hidden}
.device__label{
  margin:0;padding:6px 10px 8px;border-top:1px solid var(--fir);
  font-family:var(--mono);font-size:10px;letter-spacing:1.5px;color:var(--spring);
}

.speclist{display:flex;flex-direction:column;gap:16px}
.speclist--split{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.spec{border-left:2px solid var(--meadow);padding-left:14px}
.spec__t{margin:0;font-weight:600;font-size:15.5px}
.spec__d{margin:2px 0 0;font-size:14px;color:var(--stone)}
.panel--dark .spec{border-left-color:var(--fir)}
.panel--dark .spec__t{color:var(--mist)}
.panel--dark .spec__d{color:var(--dim2)}

.panel__foot{margin:24px 0 0;font-size:13.5px;color:var(--stone);border-top:1px solid var(--line);padding-top:14px}
.panel__foot strong{color:var(--pine2)}
.panel__specs{
  margin-top:26px;border-top:1px solid var(--fir);padding-top:16px;
  display:flex;flex-wrap:wrap;gap:10px 26px;
  font-family:var(--mono);font-size:12.5px;color:var(--spring);font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------- 02 walkthrough */

.walkthrough{background:var(--pine)}
.walkthrough .wrap{padding-top:clamp(52px,6vw,72px);padding-bottom:0}
.walkthrough h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(32px,4.6vw,62px);line-height:1;letter-spacing:-2.4px;color:var(--mist);text-wrap:balance}
.walkthrough p{margin:16px 0 0;font-size:16px;color:var(--dim2);max-width:60ch}

/* ------------------------------------------------------------- 03 connect */

.connect{background:var(--paper);border-bottom:1px solid var(--line)}
.connect .wrap{padding-top:clamp(56px,7.2vw,88px);padding-bottom:clamp(48px,6vw,72px)}
.connect__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 72px}
.connect__grid h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(31px,4.2vw,56px);line-height:1;letter-spacing:-2.1px;text-wrap:balance}
.connect__lede{margin:18px 0 0;font-size:16.5px;color:var(--slate)}
.connect__sourced{margin:16px 0 0;font-size:14px;color:var(--stone)}
.connect__sourced .mono{font-size:12.5px}

.rack{
  background:var(--pine);border:1px solid var(--line);margin-bottom:20px;overflow:hidden;
  display:grid;grid-template-columns:1fr auto;align-items:end;
}
.rack__legend{margin:0;padding:10px 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;color:var(--spring);line-height:1.9}

.deflist{position:relative}
.deflist::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1.5px;background:var(--pine2);
  transform:scaleX(var(--rule,1));transform-origin:0 50%;
}
.deflist__row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);
  gap:6px 28px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.deflist__t{margin:0;font-weight:600;font-size:15.5px}
.deflist__d{margin:0;font-size:14.5px;color:var(--stone)}

/* ---------------------------------------------------------------- 04 care */

.care{background:var(--mist)}
.care .wrap{padding-top:clamp(56px,7.2vw,88px);padding-bottom:clamp(48px,6vw,72px)}
.care h2{margin:0 0 8px;font-family:var(--display);font-weight:800;font-size:clamp(31px,4.2vw,56px);line-height:1;letter-spacing:-2.1px;text-wrap:balance}
.care__grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;margin-top:36px;align-items:start}
.card{border-top:1px solid var(--fir);padding:30px 0 0}
.card__label{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:2px;color:var(--stone)}
.card__figure{margin:14px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(42px,34.7px + 1.66vw,56px);line-height:1;letter-spacing:-2px;color:var(--marigold)}
.card__lede{margin:8px 0 0;font-size:15px}
.card__note{margin:12px 0 0;font-size:14px;color:var(--stone)}
.card__steps{margin-top:14px;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.card__steps p{margin:0}
.card__scope{margin-top:14px;font-size:14.5px;display:flex;flex-direction:column;gap:8px}
.card__scope p{margin:0;border-left:2px solid var(--meadow);padding-left:12px}
.card__scope p.is-out{border-left-color:var(--line);color:var(--stone)}

/* --------------------------------------------------------------- 05 build */

.build{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.build .wrap{padding-top:clamp(44px,5.2vw,64px);padding-bottom:clamp(44px,5.2vw,64px)}
.build__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px 72px;align-items:baseline}
.build__grid h2{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.8px;text-wrap:balance}
.build__grid p{margin:0;font-size:16px;color:var(--slate);max-width:64ch}

/* ------------------------------------------------------------ 06 basecamp */

.basecamp{position:relative;background:var(--pine2);color:var(--mist);overflow:hidden}
.basecamp::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.035;background-image:var(--noise)}
.basecamp .wrap{position:relative;padding-top:clamp(56px,7.2vw,88px);padding-bottom:clamp(56px,7.2vw,88px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px;align-items:center}
.basecamp h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(31px,4.2vw,56px);line-height:1;letter-spacing:-2.1px;text-wrap:balance}
.basecamp__lede{margin:18px 0 0;font-size:16.5px;color:var(--dim);max-width:54ch}
.basecamp__hint{margin:16px 0 0;font-size:14px;color:var(--dim2)}

.strata{perspective:900px;min-height:340px;display:flex;align-items:center;justify-content:center}
.strata__stack{position:relative;width:min(360px,80%);height:280px;transform-style:preserve-3d}
.strata__layer{
  position:absolute;left:0;right:0;height:74px;
  border:1.5px solid;
  transform:rotateX(56deg) rotateZ(-38deg);
  display:flex;align-items:center;justify-content:center;
  transition:transform 420ms cubic-bezier(.33,.9,.35,1);
  box-shadow:6px 18px 30px -12px rgba(0,0,0,.5);
}
.strata__layer:hover{transform:rotateX(56deg) rotateZ(-38deg) translateZ(34px)}
.strata__layer span{font-family:var(--mono);font-size:12px;letter-spacing:2px}
.strata__layer--1{top:0;background:rgba(35,166,98,.28);border-color:var(--meadow)}
.strata__layer--1 span{color:var(--spring)}
.strata__layer--2{top:62px;background:rgba(30,92,64,.45);border-color:var(--fir)}
.strata__layer--2 span{color:var(--spring)}
.strata__layer--3{top:124px;background:rgba(155,227,180,.16);border-color:var(--spring)}
.strata__layer--3 span{color:var(--mist)}
.strata__layer--4{top:186px;background:rgba(243,248,244,.10);border-color:var(--stone)}
.strata__layer--4 span{color:var(--mist)}

/* --------------------------------------------------------------- 07 proof */

.proof{background:var(--mist)}
.proof .wrap{padding-top:clamp(56px,7.2vw,88px);padding-bottom:clamp(48px,6vw,72px)}
.proof h2{margin:0 0 6px;font-family:var(--display);font-weight:800;font-size:clamp(31px,4.2vw,56px);line-height:1;letter-spacing:-2.1px;text-wrap:balance}
.proof__lede{margin:0 0 36px;font-size:15px;color:var(--stone);max-width:64ch}
.proof__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.step{position:relative;padding-top:16px}
.step::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2.5px;background:var(--meadow);
  transform:scaleX(var(--rule,1));transform-origin:0 50%;
}
.step__when{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:1.5px;color:var(--stone);font-variant-numeric:tabular-nums}
.step h3{margin:8px 0 6px;font-family:var(--display);font-weight:700;font-size:clamp(16.5px,15.8px + .17vw,18px);letter-spacing:-.3px}
.step p{margin:0;font-size:14px;color:var(--slate)}
.proof__sectors{margin:30px 0 0;font-size:14.5px;color:var(--stone)}

/* ------------------------------------------------------------ 08 voldebug */

.sisters{background:var(--paper);border-top:1px solid var(--line)}
.sisters .wrap{padding-top:clamp(40px,4.6vw,56px);padding-bottom:clamp(40px,4.6vw,56px);display:grid;grid-template-columns:1fr 1fr;gap:28px}
.sister{border:1.5px solid var(--line);padding:26px 28px;background:var(--mist)}
.sister--own{border-color:var(--meadow);background:#fff}
.sister__label{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:2px;color:var(--meadow)}
.sister h3{margin:10px 0 6px;font-family:var(--display);font-weight:700;font-size:clamp(18.5px,17.3px + .29vw,21px)}
.sister p{margin:0;font-size:14.5px;color:var(--stone)}

/* ------------------------------------------------------------- 09 contact */

.contact{background:var(--pine);color:var(--mist);border-top:1px solid var(--fir);overflow:hidden}
.contact::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.035;background-image:var(--noise)}
.contact .wrap{position:relative;z-index:1}
.contact .reach__label{color:var(--spring)}
.contact .reach__phone a{color:var(--mist)}
.contact .reach__body{color:var(--dim)}
.contact .reach__email a{color:var(--spring)}
.contact .wrap{padding-top:clamp(56px,7.2vw,88px);padding-bottom:clamp(56px,7.2vw,88px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
.survey{background:var(--mist);border-top:2px solid var(--marigold);padding:38px 36px}
.survey h2{margin:0 0 6px;font-family:var(--display);font-weight:800;font-size:clamp(26px,3vw,36px);letter-spacing:-1px}
.survey__lede{margin:0 0 26px;font-size:15px;color:var(--stone)}
.survey__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600}
.field--wide{grid-column:1/-1}
.field input,.field select{
  padding:12px;border:1.5px solid var(--edge);border-radius:4px;
  font:inherit;font-size:15px;font-weight:400;color:var(--pine2);background:#fff;
}
.field input:hover,.field select:hover{border-color:var(--meadow)}
.survey__submit{
  margin-top:24px;width:100%;padding:18px;
  background:var(--meadow-solid);color:#fff;border:none;border-radius:4px;
  font:inherit;font-weight:700;font-size:16.5px;cursor:pointer;
}
.survey__submit:hover{background:var(--meadow-solid-hi)}
.survey__note{margin:12px 0 0;font-size:12.5px;color:var(--stone);text-align:center}

.reach{display:flex;flex-direction:column;gap:22px;padding-top:8px}
.reach__label{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:2px;color:var(--stone)}
.reach__phone{margin:4px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(21px,19.2px + .38vw,24px);letter-spacing:-.5px}
.reach__phone a{text-decoration:none;color:var(--pine2)}
.reach__email{margin:4px 0 0;font-size:16.5px;font-weight:600}
.reach__email a{text-decoration:none}
.reach p.reach__body{margin:4px 0 0;font-size:15.5px;line-height:1.6}

/* ---------------------------------------------------------------- footer */

.site-footer{background:var(--pine);color:var(--dim2)}
.site-footer .wrap{padding-top:56px;padding-bottom:40px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:40px}
.site-footer__mark{width:64px;height:36px;display:block}
.site-footer__about{margin:16px 0 0;font-size:14px;max-width:40ch}
.site-footer__about a{color:var(--spring)}
.site-footer__udyam{margin:14px 0 0;font-family:var(--mono);font-size:12px;color:var(--dim2)}
.site-footer__label{margin:0 0 10px;font-family:var(--mono);font-size:11.5px;letter-spacing:2px;color:var(--dim2)}
.site-footer__areas{margin:0;font-size:14px;line-height:1.8}
.site-footer__nav{display:flex;flex-direction:column;gap:8px;font-size:14px}
.site-footer__nav a{color:var(--dim2);text-decoration:none}
.site-footer__nav a:hover{color:var(--spring)}
.site-footer__legal{border-top:1px solid #12321F;padding:16px 0;text-align:center;font-size:12.5px;color:var(--dim2)}

/* --------------------------------------------------------- mobile actions */

.sticky-actions{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  gap:1px;background:var(--pine);box-shadow:0 -4px 20px rgba(16,46,34,.3);
}
.sticky-actions a{flex:1;text-decoration:none;font-weight:700;font-size:15px;padding:15px 0;text-align:center}
/* Thumb-zone control: keep it clear of the home indicator. */
@supports (padding:env(safe-area-inset-bottom)){
  .sticky-actions{padding-bottom:env(safe-area-inset-bottom)}
}
.sticky-actions .is-wa{background:var(--meadow-solid);color:#fff}
.sticky-actions .is-call{background:var(--pine2);color:var(--spring)}

/* ================================================================
   The spine — a continuous hairline down the left of the whole page,
   labelled per section in the same register as the hero's coordinate
   rail. This is the device that makes eleven sections read as one
   instrument rather than eleven stacked cards.
   ================================================================ */

section{position:relative}

.spine{display:none}

@media (min-width:1200px){
  .spine{
    display:flex;flex-direction:column;align-items:center;gap:16px;
    position:absolute;top:0;bottom:0;
    left:calc(50% - min(50%, var(--shell) / 2) + var(--gut) - 46px);
    padding:clamp(56px,6vw,84px) 0 0 14px;
    font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:3.4px;
    pointer-events:none;user-select:none;
  }
  .spine__line{
    position:absolute;left:0;top:0;bottom:0;width:1px;
    background:var(--line);
    transform:scaleY(var(--rule,1));transform-origin:50% 0;
  }
  .spine__n{
    writing-mode:horizontal-tb;
    font-size:12px;font-weight:600;letter-spacing:1px;
    color:var(--marigold-ink);
  }
  .spine__t{writing-mode:vertical-rl;color:var(--stone)}

  /* dark grounds take the inverse hairline */
  .walkthrough .spine__line,.care .spine__line,
  .basecamp .spine__line,.sisters .spine__line,
  .contact .spine__line{background:#1c4331}
  /* on dark grounds the brand marigold is already 6.7:1 */
  .walkthrough .spine__n,.care .spine__n,
  .basecamp .spine__n,.sisters .spine__n,
  .contact .spine__n{color:var(--marigold)}
  .walkthrough .spine__t,.care .spine__t,
  .basecamp .spine__t,.sisters .spine__t,
  .contact .spine__t{color:var(--dim2)}
}

/* ================================================================
   Dark rhythm. The page used to be pale from section 2 to the footer,
   which is what made the hero feel bought-in. Run & Care and the
   sister-studio block now carry the dark, so the page alternates.
   ================================================================ */

.care{background:var(--pine2);color:var(--mist);overflow:hidden}
.care::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.035;background-image:var(--noise)}
.care .wrap{position:relative;z-index:1}
.care .kicker{color:var(--spring)}
.care h2{color:var(--mist)}
.care .aside-note{color:var(--dim2)}
.care .card{border-top-color:var(--fir)}
.care .card__label{color:var(--spring)}
.care .card__lede{color:var(--mist)}
.care .card__note{color:var(--dim2)}
.care .card__steps{color:var(--dim)}
.care .card__steps strong{color:var(--mist)}
.care .card__scope p{border-left-color:var(--meadow);color:var(--dim)}
.care .card__scope p.is-out{border-left-color:var(--fir);color:var(--dim2)}

.sisters{background:var(--pine);border-top:1px solid var(--fir);overflow:hidden}
.sisters::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.035;background-image:var(--noise)}
.sisters .wrap{position:relative;z-index:1}
.sister{background:transparent;border:1px solid var(--fir);color:var(--mist)}
.sister--own{border-color:var(--meadow);background:rgba(35,166,98,.07)}
.sister__label{color:var(--spring)}
.sister h3{color:var(--mist)}
.sister p{color:var(--dim2)}

/* ================================================================
   One deliberate break in the container: the surveillance panel runs
   off the right edge of the screen. Everything else on the page sits
   inside 1240px, so this reads as intent rather than as an accident.
   ================================================================ */

@media (min-width:1201px){
  .secure{overflow-x:clip}
  .secure__body .panel--dark{
    --bleed:calc((100vw - min(100vw, var(--shell))) / 2 + var(--gut));
    margin-right:calc(-1 * var(--bleed));
    padding-right:calc(30px + var(--bleed));
  }
}

/* ================================================================
   Interaction layer — Lenis, reveals, menu, rail, telemetry
   Everything here is gated on `html.js` so the page still reads
   in full if JavaScript never runs.
   ================================================================ */

/* Lenis smooth scroll (required by the library) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* Scroll reveals.
   The hidden state is keyed to `html.js`, set by an inline head script,
   so a browser with JS off — or a failed script load, see the watchdog —
   renders the page fully. Selectors are deliberately flat: no revealed
   element contains another, so nothing gets double-offset. */
html.js .kicker,
html.js .faq__row,
html.js .secure__head p,
html.js .panel,
html.js .aside-note,
html.js .walkthrough .wrap p,
html.js .connect__lede,
html.js .connect__sourced,
html.js .rack,
html.js .deflist__row,
html.js .care__grid .card,
html.js .build__grid p,
html.js .strata__stack,
html.js .basecamp__lede,
html.js .basecamp__hint,
html.js .proof__lede,
html.js .proof__grid .step,
html.js .proof__sectors,
html.js .sisters .sister,
html.js .survey__lede,
html.js .survey__grid,
html.js .survey__submit,
html.js .survey__note,
html.js .reach > div,
html.js .site-footer .wrap > *{
  opacity:0;transform:translate3d(0,26px,0);
}
html.js main h2{opacity:0}
html.js .is-in{opacity:1 !important;transform:none !important;clip-path:none !important}

/* The hero is choreographed on load rather than on scroll. */
html.js .hero__eyebrow,
html.js .hero__lede,
html.js .hero__actions,
html.js .hero__sys,
html.js .hero__coords{opacity:0}
/* The h1 is the LCP candidate: it paints immediately and moves, rather
   than fading in from nothing, which would exclude it from LCP entirely. */
html.js .hero__title{opacity:1}

/* Skip link */
.skip-link{
  position:absolute;left:12px;top:-64px;z-index:200;
  background:var(--pine2);color:var(--mist);
  padding:12px 18px;border-radius:4px;text-decoration:none;font-weight:600;
  transition:top 160ms ease;
}
.skip-link:focus{top:12px;color:var(--mist)}

/* ------------------------------------------------------- scroll progress */

/* The four bars of the logo mark fill as you descend the page. */
.brand__mark .bar{transition:fill 320ms ease}
.brand__mark .bar.is-lit{fill:var(--meadow)}
.site-header__progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--fir),var(--meadow));
}

/* Desktop section rail */
.progress-rail{
  position:fixed;right:clamp(12px,1.6vw,24px);top:50%;transform:translateY(-50%);
  z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  padding:10px 0;margin:0;
}
/* The anchor is only as wide as its tick, so the rail never sits on top
   of the content column and can't intercept clicks meant for the page.
   The label floats out of flow on hover and stays pointer-transparent. */
.progress-rail a{
  position:relative;display:flex;align-items:center;justify-content:flex-end;
  width:32px;padding:6px 0;text-decoration:none;color:var(--stone);
  font-family:var(--mono);font-size:10px;letter-spacing:1.5px;
}
.progress-rail .label{
  position:absolute;right:38px;top:50%;
  opacity:0;transform:translateY(-50%) translateX(6px);
  transition:opacity 260ms ease,transform 260ms ease;
  white-space:nowrap;pointer-events:none;
}
.progress-rail a:hover .label,
.progress-rail a:focus-visible .label,
.progress-rail a[aria-current="true"] .label{transform:translateY(-50%)}
.progress-rail .tick{
  width:18px;height:2px;background:currentColor;opacity:.4;
  transition:width 260ms ease,opacity 260ms ease;
}
.progress-rail a:hover,.progress-rail a:focus-visible{color:var(--meadow)}
.progress-rail a:hover .label,.progress-rail a:focus-visible .label{opacity:1}
.progress-rail a[aria-current="true"]{color:var(--marigold-ink)}
.progress-rail a[aria-current="true"] .tick{width:30px;opacity:1;background:var(--marigold-ink)}
.progress-rail a[aria-current="true"] .label{opacity:1}
/* on dark sections the rail inverts */
.progress-rail.is-on-dark a{color:var(--dim2)}
.progress-rail.is-on-dark a:hover{color:var(--spring)}
.progress-rail.is-on-dark a[aria-current="true"]{color:var(--marigold)}
.progress-rail.is-on-dark a[aria-current="true"] .tick{background:var(--marigold)}

/* ------------------------------------------------------- live telemetry */

/* Reads as the foot of the spine: same left edge, same hairline, same
   register. Clock, section index, scroll depth — the three things a
   monitoring console would actually show. */
.telemetry{
  display:none;
  position:fixed;bottom:20px;z-index:40;
  left:calc(50% - min(50%, var(--shell) / 2) + var(--gut) - 46px);
  padding-top:9px;border-top:1px solid var(--line);
  gap:9px;align-items:center;
  font-family:var(--mono);font-size:10px;letter-spacing:2px;
  color:var(--stone);font-variant-numeric:tabular-nums;
  pointer-events:none;user-select:none;
}
@media (min-width:1200px){.telemetry{display:flex}}
.telemetry .sep{opacity:.45}
.telemetry [data-tm="pct"]{color:var(--marigold-ink)}
.telemetry [data-tm="sky"]{color:var(--stone)}
/* The link cell carries its own trailing separator, so it disappears
   cleanly on Safari and Firefox where navigator.connection does not exist. */
.telemetry [data-tm="link"]{color:var(--stone);display:flex;align-items:center;gap:9px}
.telemetry [data-tm="link"]::after{content:"\00b7";opacity:.45}
.telemetry [data-tm="link"][hidden]{display:none}
/* after dark the readout itself goes to infrared, like the camera */
.telemetry.is-ir [data-tm="sky"]{color:var(--spring)}
.telemetry.is-on-dark [data-tm="pct"]{color:var(--marigold)}
.telemetry.is-on-dark{color:var(--dim2)}
.telemetry.is-on-dark{color:var(--dim2);border-top-color:#1c4331}

/* --------------------------------------------------------- mobile menu */

.nav-toggle{
  display:none;margin-left:auto;flex:none;align-items:center;gap:10px;
  background:none;border:1.5px solid var(--line);border-radius:4px;
  padding:9px 14px;cursor:pointer;
  font:inherit;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:2px;color:var(--fir);
  min-height:44px;
}
.nav-toggle:hover{border-color:var(--meadow);color:var(--meadow)}
.nav-toggle__bars{display:flex;flex-direction:column;gap:3px;width:16px}
.nav-toggle__bars i{display:block;height:2px;background:currentColor;transition:transform 240ms ease,opacity 240ms ease}
.nav-toggle__bars i:nth-child(2){width:70%}

.menu{
  position:fixed;inset:0;z-index:100;
  background:var(--pine);color:var(--mist);
  display:flex;flex-direction:column;
  padding:max(20px,env(safe-area-inset-top)) var(--gut) max(20px,env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;opacity:0;
  transition:opacity 320ms ease,visibility 0s linear 320ms;
}
.menu::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.04;background-image:var(--noise)}
.menu.is-open{visibility:visible;opacity:1;transition:opacity 320ms ease}
.menu__top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;position:relative;z-index:2}
.menu__eyebrow{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:2.5px;color:var(--spring)}
.menu__close{
  background:none;border:1.5px solid var(--edge-dark);border-radius:4px;
  color:var(--spring);font:inherit;font-family:var(--mono);font-size:11px;letter-spacing:2px;
  padding:9px 14px;min-height:44px;cursor:pointer;
}
.menu__close:hover{border-color:var(--meadow);color:var(--mist)}
.menu__links{
  position:relative;z-index:2;
  list-style:none;margin:auto 0;padding:12px 0;
  display:flex;flex-direction:column;
}
.menu__links li{border-bottom:1px solid rgba(155,227,180,.14)}
.menu__links li:last-child{border-bottom:0}
.menu__links a{
  display:flex;align-items:baseline;gap:16px;
  padding:13px 0;min-height:48px;
  text-decoration:none;color:var(--mist);
  font-family:var(--display);font-weight:700;letter-spacing:-.6px;
  font-size:clamp(24px,7vw,34px);
}
.menu__links a:hover,.menu__links a:focus-visible{color:var(--spring)}
.menu__links .n{
  font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:2px;
  color:var(--dim2);flex:none;
}
.menu__foot{position:relative;z-index:2;padding:16px 0 6px;border-top:1px solid rgba(155,227,180,.14)}
.menu__foot .label{margin:0 0 4px;font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:var(--dim2)}
.menu__foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--spring);text-decoration:none;font-weight:600;font-size:18px}
.menu__cta{
  display:block;margin-top:14px;padding:16px;text-align:center;
  background:var(--meadow-solid);color:#fff;text-decoration:none;
  font-weight:700;font-size:16px;border-radius:4px;min-height:48px;
}
.menu__cta:hover{background:var(--meadow-solid-hi);color:#fff}

/* --------------------------------------------------------- form states */

.field.is-invalid input,.field.is-invalid select{border-color:#C2452F;background:#fffaf9}
.field__error{
  display:none;font-weight:500;font-size:12.5px;color:#C2452F;
  font-family:var(--mono);letter-spacing:.4px;
}
.field.is-invalid .field__error{display:block}
.survey__status{
  margin:14px 0 0;padding:12px 14px;border-left:2px solid var(--meadow);
  background:var(--mist);font-size:14px;color:var(--slate);
}
/* Always present in the a11y tree — a role="status" node that is
   hidden and then revealed in the same task is unreliable in NVDA/JAWS. */
.survey__status:empty{display:none}

/* ================================================================
   Responsive — 360 → 1920+
   ================================================================ */

/* Large monitors: let the shell breathe rather than stranding a
   1240px column in the middle of a 2560px screen. */
@media (min-width:1700px){
  :root{--shell:1380px}
}

/* Below ~1300 the content column reaches close to the viewport edge, so
   pull the rail in tight rather than letting it sit over the text. */
@media (max-width:1300px){
  .progress-rail{right:8px}
}

/* Tablet landscape — the two-column layouts still work, the gaps don't. */
@media (max-width:1200px){
  .secure__head{gap:20px 40px}
  .connect__grid{gap:32px 48px}
  .build__grid{gap:20px 44px}
  .basecamp .wrap{gap:36px}
  .contact .wrap{gap:36px}
  .proof__grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .site-footer .wrap{gap:32px}
}

/* The desktop nav stops fitting here — hand over to the menu. */
/* The desktop nav stops fitting here — and so do the desktop layouts.
   Held at 900, a 1009px iPad landscape was rendering the device tiles at
   146px wide inside a 5fr column. The two collapse together. */
@media (max-width:1080px){
  .nav{display:none}
  .header-cta{display:none}
  .nav-toggle{display:inline-flex}
  .progress-rail{display:none}

  .secure__body,
  .connect__grid,
  .build__grid,
  .contact .wrap,
  .basecamp .wrap,
  .rack{grid-template-columns:1fr}

  .site-footer .wrap{grid-template-columns:1fr 1fr}
  .site-footer__nav{grid-column:2}
  .basecamp .wrap{gap:32px}
  .contact .wrap{gap:32px}
}

/* Tablet portrait / large phone — single-column for the wide splits,
   but keep card grids two-up rather than dropping to one tall column. */
@media (max-width:900px){
  :root{--gut:20px}

  .sticky-actions{display:flex}
  .site-footer{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}

  /* The ridge becomes the hero's background rather than a band stacked
     above it. Previously the poster ate 270-320px before the headline
     even started — on a 640px phone the h1 landed at 505px. */
  .hero__inner{grid-template-columns:1fr;min-height:0}
  .hero__ridge{position:absolute;inset:0;width:100%;height:100%;margin:0}
  .hero__ridge ridge-hero{position:absolute;inset:0}
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(12,31,23,.90) 0%,
      rgba(12,31,23,.70) 40%,
      rgba(12,31,23,.40) 70%,
      rgba(12,31,23,.62) 100%);
  }
  .hero__coords{display:none}
  .hero__copy{padding:clamp(40px,9vw,64px) 0 calc(clamp(48px,10vw,72px) + 56px)}
  .hero__actions,.hero__sys{padding-left:0}
  .hero__actions .btn{flex:1 1 240px}
  .hero__frame{padding:22px 16px 26px}

  .faq__row{grid-template-columns:40px minmax(0,1fr);gap:4px 16px}
  .faq__a{grid-column:2}

  .secure__head,.secure__body,.connect__grid,.build__grid,
  .basecamp .wrap,.contact .wrap,.rack,.deflist__row{grid-template-columns:1fr}
  .secure__head{align-items:start}
  .deflist__row{gap:2px}
  .basecamp .wrap{padding-top:64px;padding-bottom:64px}
  .strata{min-height:300px}

  .care__grid{grid-template-columns:1fr 1fr}
  .proof__grid{grid-template-columns:1fr 1fr}
  .site-footer .wrap{grid-template-columns:1fr 1fr}
  .site-footer__nav{grid-column:2}

  /* Body copy that was fine at 15px on a monitor is not on a phone. */
  .faq__a{font-size:16px}
  .spec__d{font-size:15px}
  .deflist__d{font-size:15.5px}
  .step p,.card__note{font-size:15px}
  .sister p{font-size:15.5px}
  .survey__lede,.card__lede{font-size:15.5px}
  .proof__lede{font-size:15.5px}
}

@media (max-width:760px){
  .speclist--split{grid-template-columns:1fr}
  .sisters .wrap{grid-template-columns:1fr}
}

@media (max-width:560px){
  .header-inner{gap:12px}
  .brand{gap:9px}
  .brand__mark{width:42px;height:24px}
  .brand__word{font-size:17px}
  .brand__bug{font-size:14px}
  .brand__tech{font-size:9px;letter-spacing:3px;margin-left:1px}

  /* Sized to keep the eyebrow and the LIVE badge on ONE line: wrapped,
     the badge orphaned itself on a line of its own, left-aligned under
     the text, which read as a layout bug. */
  .hero__eyebrow{font-size:9.5px;letter-spacing:1.4px;gap:10px;flex-wrap:nowrap}
  .live{font-size:9.5px;letter-spacing:1.4px}

  /* The annotation labels sit above and below the boxed words. At 38px
     headline type they collide with the neighbouring lines, and there is
     no leading to give them. The boxes still carry the idea without them. */
  .tag::after{display:none}
  .tag{padding:0 7px}

  /* Two lines rather than three, so the row clears the action bar. */
  .hero__sys{font-size:9.5px;letter-spacing:1px;gap:6px 0}
  .hero__sys .sys{padding:0 7px 0 12px}
  .hero__sys .sys--first{padding:0 7px}
  .devices,.care__grid,.proof__grid,.survey__grid,
  .site-footer .wrap{grid-template-columns:1fr}
  .site-footer__nav{grid-column:auto;flex-direction:row;flex-wrap:wrap;gap:8px 20px}
  .panel--light,.panel--dark{padding:26px 20px}
  .survey{padding:26px 20px}
  .card{padding:22px 20px}
  .sister{padding:22px 20px}
  .aside-note{transform:none}
}

@media (max-width:400px){
  .nav-toggle{padding:9px 11px;letter-spacing:1.5px}
  .hero__sys{font-size:10.5px;letter-spacing:1px}
  .panel__specs{gap:8px 16px;font-size:11.5px}
}

/* ---------------------------------------------------------------------
   Touch targets. WCAG 2.5.5 and Google's mobile-friendly test both want
   standalone controls at 44px+. Links sitting inline inside a sentence
   are explicitly exempt, so the prose links in the FAQ answers and the
   footer blurb are deliberately left alone — padding them would wreck
   the line rhythm of the paragraph they live in.
   --------------------------------------------------------------------- */
@media (pointer:coarse),(max-width:900px){
  .brand{min-height:44px}
  .site-footer__nav a{display:flex;align-items:center;min-height:44px}
  .reach__phone a,.reach__email a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .panel__foot{font-size:15px}
  /* iOS Safari zooms the viewport whenever a focused control is under
     16px, and never zooms back out. 16px is the floor, not a preference. */
  .field input,.field select{min-height:48px;font-size:16px}
  .sticky-actions a{min-height:52px;display:flex;align-items:center;justify-content:center;padding:0}
}

/* Short viewports — landscape phones — must still show the menu's CTA. */
@media (max-height:720px){
  .menu__links a{font-size:clamp(19px,4.6vw,24px);padding:10px 0;min-height:44px}
  .menu__links{padding:6px 0}
  .menu__foot a{font-size:16px}
  .menu__cta{padding:13px;min-height:44px}
}

/* Touch devices: hover reveals are unreachable, so pin them open. */
@media (hover:none){
  .strata__layer{transform:rotateX(56deg) rotateZ(-38deg) translateZ(12px)}
}

/* ================================================================
   Reduced motion — no transforms, no reveals, no smooth scroll
   ================================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html.js [data-reveal]{opacity:1;transform:none}
  .strata__layer{transition:none}
}

/* ================================================================
   Site walkthrough — stage chrome.
   Lives here rather than inline so media queries can own the skip
   link, which otherwise sits underneath the fixed action bar.
   ================================================================ */

.wt-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.wt-art{position:absolute;inset:0}
.wt-cap{
  position:relative;z-index:2;margin:auto 0 8vh 6vw;max-width:400px;
  background:rgba(12,31,23,.72);padding:22px 26px;border-left:2px solid var(--meadow);
}
.wt-bar{
  position:absolute;right:6vw;top:50%;transform:translateY(-50%);
  width:2px;height:180px;background:rgba(155,227,180,.18);
}
.wt-bar i{display:block;width:2px;height:0;background:var(--meadow)}

.wt-skip{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  font-family:var(--mono);font-size:11px;letter-spacing:2px;
  color:var(--dim2);text-decoration:none;
}
.wt-skip span{border-bottom:1px solid currentColor;padding-bottom:3px}
.wt-skip:hover,.wt-skip:focus-visible{color:var(--spring)}

/* The drawing and the caption stack, so neither covers the other. */
.wt-stage.is-narrow{flex-direction:column;align-items:stretch}
.wt-stage.is-narrow .wt-art{position:relative;inset:auto;flex:0 0 55%;min-height:0}
.wt-stage.is-narrow .wt-art svg{height:100%}
.wt-stage.is-narrow .wt-cap{
  flex:1 1 45%;margin:0 6vw;padding:16px 0 64px;max-width:none;
  background:none;border-left:0;overflow-y:auto;overscroll-behavior:contain;
}
.wt-stage.is-narrow .wt-bar{
  left:6vw;right:6vw;top:12px;bottom:auto;transform:none;
  width:auto;height:2px;
}
.wt-stage.is-narrow .wt-bar i{width:0;height:100%}

/* Wherever the fixed action bar exists it would cover a bottom-centred
   escape link, so the skip control moves to the top corner instead. */
@media (max-width:900px){
  /* The clear band on a phone is between the sticky header (73px) and the
     fixed action bar (52px + safe area). Bottom-centre is covered by the
     bar; top-26 was covered by the header. This sits in the gap. */
  .wt-skip{left:auto;right:6vw;bottom:auto;top:88px;transform:none;font-size:10.5px}
}

/* Reduced-motion fallback: this used to be a 1.6fr/1fr grid with no
   responsive override, collapsing the caption to a 118px column. */
.wt-static{
  margin:0 auto;max-width:960px;padding:24px 5vw;
  display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:center;
  border-bottom:1px solid rgba(155,227,180,.12);
}
@media (max-width:760px){
  .wt-static{grid-template-columns:1fr;padding:24px 20px;gap:18px}
}