/* Intwin Tech — the whole design system.
   Every value here traces to the brand spec in the private repo
   bobroff-cap/intwin under brand/. Do not introduce a colour, a face or a
   radius that is not in it. The one documented departure is the Signal/Echo
   split for text: #0057FF on graphite is 3.25:1, fine for a shape and short of
   AA for a word, so Signal fills and Echo reads.
*/
:root{
  /* Brand palette. Every value below comes from the brand spec, which lives in
     the private repo bobroff-cap/intwin under brand/. Do not invent new
     blues. Signal fills and marks; Echo carries text. That split is the whole
     reason both tokens exist: #0057FF on #14171F is 3.34:1, which is fine for
     a shape and fails for a word. */
  --signal:#0057FF;
  --signal-h:#2E74FF;
  --signal-b:rgba(0,87,255,.38);
  --signal-t:rgba(0,87,255,.15);
  --signal-t2:rgba(0,87,255,.07);
  --echo:#A9BDF0;
  --echo-h:#CBD8F7;
  --ink-navy:#131A54;
  --mist-blue:#DCEBF8;   /* icon strokes on dark */

  /* Surfaces run dark-to-darker: the page is Graphite, cards and heroes are
     the near-black the brandbook asks for, so a card reads as a well rather
     than a raised tile. --raise is the one exception, for controls. */
  --ground:#14171F;
  --band:#11141B;
  --well:#0E1118;
  --raise:#1B202A;
  --mark-bg:var(--ground);
  /* Mark parts, measured off the supplied artwork. On dark the echoes fade to
     slate, not to blue — only the signal ring keeps its colour. */
  --mark-core:#EAF2FB;
  --mark-echo-1:#667292;
  --mark-echo-2:#40464F;

  --ink:#F0F2F6;
  --body:#C3C8D8;
  --muted:#9299AC;
  --line:rgba(255,255,255,.12);
  --line2:rgba(255,255,255,.07);
  --ok:#30D158;

  --sans:'Manrope','Inter','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --display:var(--sans);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Near-square, per the brandbook. Circles in the mark stay circles. */
  --r:4px; --r-s:3px; --r-xs:2px;
  --wrap:1140px;

  /* No glows and no elevation shadows. Overlays separate with a brighter
     hairline instead — that is the near-square, hard-edged idiom the
     brandbook asks for. */
  --line-lift:rgba(255,255,255,.2);

  /* Light surface, for the one band that inverts. Graphite reads on paper at
     14.9:1, and Signal on paper at 5.6:1 — both clear AA. */
  --paper:#FFFFFF;
  --graphite:#14171F;
  --line-dark:rgba(20,23,31,.14);
}


*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:dark}
body{
  font-family:var(--sans);color:var(--body);background:var(--ground);
  line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:var(--echo);text-decoration:none}
a:hover{color:var(--echo-h)}
/* Echo sits close to body grey in lightness, so a link inside prose needs a
   cue that is not colour alone. */
p a,li a,td a,dd a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(169,189,240,.45)}
p a:hover,li a:hover,td a:hover,dd a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:var(--r-xs)}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);line-height:1.14;font-weight:700;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(34px,4.8vw,56px);font-weight:800;letter-spacing:-.03em}
/* Signal Blue is legitimate on a display line: at 800 weight and 34px+ the
   3:1 large-text threshold applies, and it clears it. Never at body size. */
.sig{color:var(--signal)}
h2{font-size:clamp(25px,3vw,34px)}
h3{font-size:18px;letter-spacing:-.01em}
h4{font-size:15px;letter-spacing:0}
p{margin-bottom:12px}
p:last-child{margin-bottom:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- helpers ---------- */
/* Uppercase is mono territory — the brandbook forbids all-caps Manrope, and
   these small labels are the "measured, not marketed" voice. */
.eyebrow{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--echo);margin-bottom:14px;
}
.eyebrow.on-dark{color:var(--echo)}
.lede{font-size:17px;color:var(--body);max-width:60ch}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
.sec{padding:72px 0}
.sec-sm{padding:52px 0}
.sec-mist{background:var(--band)}
/* ---------- the pattern family ----------
   Every pattern is the mark rearranged. Each rhythm has one job and they are
   not interchangeable, so each appears exactly once, on the surface it is for.
   All of them sit behind whitespace, never behind body text. */
.hero,.phero,.cta-band{position:relative;overflow:hidden}
.hero > .wrap,.phero > .wrap,.cta-band > .wrap{position:relative;z-index:1}
.hero::after,.phero::after,.cta-band::after{content:"";position:absolute;pointer-events:none}

/* Dropping an unfinished block can leave two tinted bands touching; read them
   as one continuous band instead of a doubled seam. */
.sec-mist + .sec-mist,.sec-mist + .sec-sm.sec-mist{padding-top:0}
.sec-line{border-top:1px solid var(--line2)}
.mb-0{margin-bottom:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--signal);color:#fff;font-weight:600;font-size:15px;
  padding:12px 22px;border-radius:var(--r-s);border:1px solid var(--signal);
  transition:background .15s,border-color .15s;white-space:nowrap;
}
.btn:hover{background:var(--signal-h);border-color:var(--signal-h)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--raise);border-color:var(--line);color:var(--ink)}
.btn-onnavy{background:#fff;color:var(--ink-navy);border-color:#fff}
.btn-onnavy:hover{background:#DCEBF8;border-color:#DCEBF8;color:var(--ink-navy)}
.btn-outline-w{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-outline-w:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);color:#fff}
.btn-sm{padding:9px 16px;font-size:14px}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* Carries its own arrow as the non-colour cue, and is always used alone as a
   call to action rather than inside running text — so it opts out of the
   prose underline, which would otherwise break across the arrow gap. */
.arrow-link,p a.arrow-link{font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
p a.arrow-link:hover{text-decoration:none}
.arrow-link::after{content:"→";transition:transform .15s}
.arrow-link:hover::after{transform:translateX(3px)}

/* ---------- top bar ---------- */

/* ---------- header ---------- */
header{
  /* Opaque, not glass: the mark occludes with a solid ground fill, and a
     translucent bar would show through those slivers. */
  background:var(--ground);border-bottom:1px solid var(--line2);
  position:sticky;top:0;z-index:60;
}
/* .hrow shares specificity with .wrap and comes later, so a `padding:14px 0`
   shorthand was silently cancelling the wrap's side padding — invisible above
   1140px, flush to the screen edge below it. Side padding restated here. */
.hrow{display:flex;align-items:center;gap:28px;padding:14px 24px}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{height:30px;width:auto;flex:0 0 auto}
/* Wordmark per the brandbook: lowercase, intwin ExtraBold, tech Medium in
   Echo. Never a coloured initial. */
.brand .wm{font-size:19px;letter-spacing:-.03em;line-height:1}
.brand .wm .c{color:var(--ink);font-weight:800}
.brand .wm .p{color:var(--echo);font-weight:500}
nav.main{display:flex;gap:4px;align-items:center;margin-left:auto}
nav.main > a,.navitem > a{
  font-size:15px;font-weight:500;color:var(--ink);background:none;border:0;
  font-family:inherit;cursor:pointer;padding:8px 12px;border-radius:var(--r-xs);
  display:inline-flex;align-items:center;gap:5px;
}
nav.main > a:hover,.navitem > a:hover{color:var(--echo);background:var(--signal-t2)}
nav.main > a.active,.navitem > a.active{color:var(--echo)}
.navitem{position:relative;display:inline-flex;align-items:center}
.navitem > a::after{
  content:"";width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px;
}
.navitem > .navtoggle{display:none;background:none;border:0;font:inherit;color:inherit;cursor:pointer}
.navitem > .navtoggle::after{
  content:"";display:block;width:7px;height:7px;border-right:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-2px);
}
.navitem.open > .navtoggle::after{transform:rotate(-135deg) translateY(2px)}
/* Keyboard users reach the submenu without a pointer. */
.navitem:focus-within > .dropdown{display:block}
.dropdown{
  position:absolute;top:calc(100% + 6px);left:0;background:var(--well);
  border:1px solid var(--line-lift);border-radius:var(--r);
  padding:8px;min-width:290px;display:none;
}
.navitem.open .dropdown{display:block}
.dropdown a{display:block;padding:10px 12px;border-radius:var(--r-xs);color:var(--ink)}
.dropdown a:hover{background:var(--signal-t2)}
.dropdown a b{display:block;font-size:14.5px;font-weight:600}
.dropdown a span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px;line-height:1.45}
/* The header CTA carries .btn, but nav.main > a is more specific and was
   stripping the fill — it had been reading as a plain nav link. Filled, per the
   brandbook's own website mockup, which shows a filled Signal button in the
   header above a filled Signal button in the hero. "One Signal CTA per
   viewport" therefore means one action, not one blue rectangle. */
nav.main > a.hdr-cta{
  margin-left:14px;padding:10px 18px;background:var(--signal);color:#fff;
  border:1px solid var(--signal);border-radius:var(--r-s);font-weight:600;
}
nav.main > a.hdr-cta:hover{background:var(--signal-h);border-color:var(--signal-h);color:#fff}
.burger{
  display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:var(--r-xs);padding:8px 10px;cursor:pointer;
}
.burger span{display:block;width:18px;height:2px;background:var(--ink);margin:3px 0;border-radius:2px}
@media(max-width:960px){
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--ground);
    flex-direction:column;align-items:stretch;gap:0;padding:10px 24px 20px;
    border-bottom:1px solid var(--line-lift);
  }
  nav.main.open{display:flex}
  .navitem{display:flex;flex-wrap:wrap;align-items:center;width:100%}
  .navitem > a{flex:1}
  .navitem > a::after{display:none}
  .dropdown{position:static;display:none;border:0;box-shadow:none;padding:0 0 0 12px;min-width:0;flex-basis:100%}
  .navitem:focus-within > .dropdown{display:none}
  .navitem.open .dropdown{display:block}
  nav.main > a.hdr-cta{margin:10px 0 0;display:inline-block}
  .burger{display:block}
}

@media(max-width:960px),(hover:none){
  .navitem > .navtoggle{display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;min-height:40px;border-radius:var(--r-xs)}
  .navitem > a::after{display:none}
}

/* ---------- hero ---------- */
/* Flat. No gradients anywhere in this brand.
   The dot-wave is the hero expression of the pattern family and appears once
   on the site: here, bleeding off the right edge, behind the empty half of the
   grid. Drawn as vector from the master's construction, so it stays crisp at any
   viewport instead of upscaling a crop. */
.hero{background:var(--well);border-bottom:1px solid var(--line2);padding:60px 0 64px}
.hero::after{
  inset:0 -4% 0 42%;
  background:url("../img/pattern-wave.png") right center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 100%);
}
.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;min-height:340px}
.hero h1{margin-bottom:16px}
.hero .lede{font-size:18px;margin-bottom:26px}
.hero-art{width:100%}
@media(max-width:900px){
  .hero{padding:40px 0 44px}
  .hero .wrap{grid-template-columns:1fr;gap:32px;min-height:0}
  /* Never behind body text: on a phone the wave drops below the buttons. */
  .hero{padding-bottom:170px}
  .hero::after{inset:auto 0 0 0;height:170px;background-position:right bottom}
  /* On a phone the copy takes the full width, so the wave drops beneath it. */
  .phero{padding-bottom:150px}
  .phero::after{inset:auto 0 0 0;height:150px;background-position:right bottom}
  .hero-art{max-width:460px;margin:0 auto}
}

/* page hero (inner pages) */
/* Every page opener carries the wave now, not the ripple: it reads at a glance
   where the ripple only whispered, and "one wave per surface" holds — each page
   shows it once, in its own hero. The copy runs one column, so the right half
   is whitespace, which is the only place a pattern is allowed. */
.phero{background:var(--well);border-bottom:1px solid var(--line2);padding:56px 0}
.phero::after{
  inset:0 -4% 0 46%;
  background:url("../img/pattern-wave.png") right center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 100%);
}
.phero h1{font-size:clamp(28px,3.6vw,40px);margin-bottom:14px}
.phero .lede{font-size:17px}
.phero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
@media(max-width:900px){.phero-grid{grid-template-columns:1fr;gap:28px}.phero-art{display:none}}

/* ---------- trust strip ---------- */
.strip{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:var(--band)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0 24px}
.strip .item{display:flex;gap:12px;padding:20px 22px 20px 0;align-items:flex-start;border-right:1px solid var(--line2)}
.strip .item:last-child{border-right:0}
.strip .item:not(:first-child){padding-left:22px}
/* Iconography: outline only, Mist strokes on dark, and exactly one Signal
   dot per icon — that dot is the twin, and it is the one constant. */
.strip .ico{flex:0 0 auto;width:22px;height:22px;color:var(--mist-blue);margin-top:2px}
.strip h2{font-size:15px;letter-spacing:0;margin-bottom:2px;color:var(--ink);font-weight:600}
.strip p{font-size:13.5px;line-height:1.5;color:var(--body)}
@media(max-width:860px){
  .strip .wrap{grid-template-columns:1fr 1fr}
  .strip .item{border-right:0;border-bottom:1px solid var(--line2);padding:16px 0}
  .strip .item:not(:first-child){padding-left:0}
  .strip .item:nth-child(odd){padding-right:16px}
}
@media(max-width:520px){.strip .wrap{grid-template-columns:1fr}}

/* ---------- cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr}}

.card{
  background:var(--well);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;transition:border-color .15s,background .15s;
  color:var(--body);
}
a.card,a.card-dark{color:var(--body)}
a.card h3,a.card-dark h3{color:var(--ink)}
a.card-dark h3{color:#fff}
.card p,.card li{color:var(--body)}
a.card:hover{border-color:var(--signal-b);background:var(--signal-t2)}
.card .ico{width:34px;height:34px;color:var(--mist-blue);margin-bottom:14px}
.card h3{margin-bottom:6px}
.card p{font-size:14.5px;line-height:1.55;margin-bottom:0}
/* Cards in a row rarely have equal copy, so the link is pinned to the bottom
   rather than floating wherever the paragraph happens to end. */
a.card{display:flex;flex-direction:column}
.card .more{margin-top:12px;font-size:14px;font-weight:600;color:var(--echo)}
a.card .more{margin-top:auto;padding-top:12px}

.card-dark{
  background:var(--ink-navy);border:1px solid rgba(169,189,240,.18);color:#C7D2EA;position:relative;overflow:hidden;
  border-radius:var(--r);padding:24px;min-height:190px;display:flex;flex-direction:column;
}
.card-dark h3{color:#fff}
.card-dark p{font-size:14.5px;color:#C7D2EA}
.card-dark .ico{color:var(--mist-blue)}
.card-dark .art{position:absolute;right:-10px;bottom:-10px;width:120px;opacity:.5}

/* ---------- split section ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split.narrow-left{grid-template-columns:.9fr 1.1fr}
@media(max-width:900px){.split,.split.narrow-left{grid-template-columns:1fr;gap:32px}}
.checks{list-style:none;margin:18px 0 24px}
.checks li{position:relative;padding:7px 0 7px 30px;font-size:15.5px;color:var(--ink)}
.checks li::before{
  content:"";position:absolute;left:0;top:11px;width:18px;height:18px;border-radius:50%;
  background:var(--signal-t) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9BDF0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.checks.on-dark li{color:var(--ink)}
.checks.on-dark li::before{background-color:rgba(169,189,240,.18)}

/* Numbered list — same idiom as .checks, with a mono numeral in place of the tick. */
.ordered{list-style:none;counter-reset:o;margin:18px 0 0;padding:0}
.ordered li{position:relative;counter-increment:o;padding:9px 0 9px 38px;font-size:15.5px;color:var(--body)}
.ordered li b{color:var(--ink)}
.ordered li::before{content:counter(o);position:absolute;left:0;top:10px;width:22px;height:22px;
  border-radius:var(--r-xs);background:var(--signal-t);color:var(--echo);
  font:700 12px/22px var(--mono);text-align:center}

/* ---------- stats band ---------- */
.stats{background:var(--ink-navy);border-radius:var(--r);padding:34px 24px;color:#fff}
.stats .row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
/* Figures are evidence, and evidence is set in mono. */
.stats .n{font-family:var(--mono);font-size:clamp(23px,3vw,32px);font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.15}
.stats .l{font-size:13px;color:#B8C4E0;margin-top:6px;line-height:1.45}
@media(max-width:760px){.stats .row{grid-template-columns:1fr 1fr;gap:26px}}

/* ---------- process ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px;position:relative}
.process .step{text-align:center;position:relative}
.process .dot{
  /* Outlined, not filled: four Signal discs in one section would spend the
     accent the brandbook reserves for a single call to action. */
  width:46px;height:46px;border-radius:50%;background:var(--ground);
  border:1.5px solid var(--signal);color:var(--echo);font-family:var(--mono);
  display:flex;align-items:center;justify-content:center;font-weight:500;font-size:16px;
  margin:0 auto 14px;position:relative;z-index:2;
}
.process .step:not(:last-child)::after{
  content:"";position:absolute;top:23px;left:calc(50% + 30px);right:calc(-50% + 30px);
  height:2px;background:var(--line);z-index:1;
}
.process h3{font-size:15.5px;letter-spacing:0;margin-bottom:5px;color:var(--ink)}
.process p{font-size:13.5px;line-height:1.5}
@media(max-width:820px){
  .process{grid-template-columns:1fr 1fr;gap:28px}
  .process .step::after{display:none!important}
}
@media(max-width:480px){.process{grid-template-columns:1fr}}

/* ---------- definition list (services) ---------- */
.deflist{margin-top:8px}
.deflist > div{
  display:grid;grid-template-columns:230px 1fr;gap:26px;
  padding:20px 0;border-top:1px solid var(--line2);
}
.deflist > div:first-child{border-top:0}
.deflist h3{color:var(--ink);font-size:16.5px}
.deflist .tag{font-size:12.5px;color:var(--muted);margin-top:3px}
.deflist p{font-size:15px;margin-bottom:0}
@media(max-width:700px){.deflist > div{grid-template-columns:1fr;gap:6px}}

/* ---------- vendor logos ---------- */
.vendors{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
.vendors span{
  border:1px solid var(--line);border-radius:var(--r);padding:8px 18px;
  font-size:14px;font-weight:600;color:var(--body);background:var(--well);
}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line2);padding:2px 0}
.faq summary{
  cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative;
  font-weight:600;font-size:16px;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:24px;width:9px;height:9px;
  border-right:2px solid var(--echo);border-bottom:2px solid var(--echo);
  transform:rotate(45deg);transition:transform .18s;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:27px}
.faq .a{padding:0 34px 18px 0;font-size:15px}

/* ---------- quote ---------- */
.quote{
  background:var(--signal-t2);border-left:2px solid var(--signal);border-radius:0 var(--r) var(--r) 0;
  padding:22px 26px;font-size:16.5px;color:var(--ink);
}
.quote cite{display:block;margin-top:10px;font-size:13.5px;color:var(--muted);font-style:normal}

/* ---------- callout / CTA band ---------- */
/* Arc — the ring halved, built for bands far wider than they are tall. */
.cta-band{background:var(--ink-navy);color:#fff;padding:56px 0 120px}
.cta-band::after{
  left:0;right:0;bottom:0;height:120px;
  background:url("../img/pattern-arc.svg") left bottom/960px 120px repeat-x;
}
.cta-band h2{color:#fff;margin-bottom:12px}
.cta-band p{color:#C7D2EA;font-size:16.5px;max-width:56ch}
.cta-band .inner{display:grid;grid-template-columns:1.3fr .7fr;gap:36px;align-items:center}
@media(max-width:820px){.cta-band .inner{grid-template-columns:1fr;gap:22px}}

/* ---------- form ---------- */
.formcard{background:var(--well);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-s);padding:11px 13px;background:var(--raise);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--signal);box-shadow:0 0 0 3px rgba(0,87,255,.5);
}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}

/* ---------- contact panel (hero side) ---------- */
.callbox{background:var(--well);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.callbox .lbl{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.callbox .num{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin:4px 0 6px}
.callbox .num a{color:var(--ink)}
.callbox .hrs{font-size:13.5px;border-top:1px solid var(--line2);padding-top:12px;margin-top:12px;line-height:1.65}
.callbox .hrs b{color:var(--ink)}
.callbox .btn{display:block;text-align:center;margin-top:14px}

/* ---------- footer ---------- */
/* Drift — density rising as the surface fades into an edge. The brandbook
   gives it transitions and footers. */
footer{background:var(--well);--mark-bg:var(--well);color:#9BA3B9;padding:52px 0 158px;font-size:14.5px;position:relative;overflow:hidden}
footer::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:180px;pointer-events:none;
  background:url("../img/pattern-drift.svg") left bottom/800px 180px repeat-x;
}
footer > .wrap{position:relative;z-index:1}
footer h3{color:#fff;font-size:14px;letter-spacing:.02em;margin-bottom:14px;font-weight:600}
footer a{color:#9BA3B9;display:block;padding:4px 0}
footer a:hover{color:#fff}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.15fr;gap:32px}
.fbrand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.fbrand .mark{height:26px;width:auto;flex:0 0 auto}
.fbrand .wm{font-size:18px;letter-spacing:-.03em;line-height:1}
.fbrand .wm .c{color:#fff;font-weight:800}
.fbrand .wm .p{color:var(--echo);font-weight:500}
/* The primary tagline goes with the logo, everywhere — so it sits under the
   footer lockup, set as a mono label like every other uppercase run. */
.ftag{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
      text-transform:uppercase;color:var(--echo);margin:-6px 0 14px}
.fabout{font-size:14px;line-height:1.6;max-width:34ch}
.fcontact div{padding:4px 0;display:flex;gap:9px;align-items:flex-start}
.fcontact .ico{width:16px;height:16px;flex:0 0 auto;margin-top:4px;color:var(--mist-blue)}
.fbottom{
  border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);
}
.fbottom a{display:inline;color:var(--muted)}
@media(max-width:980px){.fgrid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.fgrid{grid-template-columns:1fr}}

/* ---------- misc ---------- */
.note{
  background:var(--signal-t2);border:1px solid var(--signal-b);border-radius:var(--r-s);
  padding:14px 16px;font-size:14px;color:var(--body);
}
.badge{
  display:inline-block;background:var(--signal-t);color:var(--echo);
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 9px;border-radius:var(--r-xs);
}
.badge-ok{background:rgba(48,209,88,.14);color:var(--ok)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}


/* ---------- dark-mode odds and ends ---------- */
::placeholder{color:var(--muted);opacity:1}
::selection{background:rgba(0,87,255,.45);color:#fff}

/* ---------- join: owner-facing shell ---------- */
.fgrid-join{grid-template-columns:1.7fr 1fr 1fr}
@media(max-width:760px){.fgrid-join{grid-template-columns:1fr}}

/* team */
.team .pfp{
  display:block;width:84px;height:84px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line);background:var(--raise);margin-bottom:14px;
}
.team .role{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--echo);margin:3px 0 9px}

/* sticky call to action — the header CTA scrolls away on a phone, so the
   primary action follows the thumb instead. It stands down once the form
   itself is on screen, so it never covers what it is pointing at. */
.stickycta{
  display:none;position:fixed;left:12px;right:12px;bottom:12px;z-index:80;
  background:var(--signal);color:#fff;border:1px solid var(--signal);
  font-weight:600;font-size:15.5px;text-align:center;line-height:1.3;
  padding:16px 18px;border-radius:var(--r-s);
  transform:translateY(150%);transition:transform .22s ease;
}
@media(max-width:960px){
  .stickycta{display:block}
  .stickycta.show{transform:translateY(0)}
}

/* unfinished block, draft builds only */
.todo{
  background:rgba(255,180,74,.13);border:1px solid rgba(255,180,74,.4);
  border-left:3px solid #FFB44A;border-radius:var(--r-s);
  padding:12px 14px;font-size:13.5px;color:#F5D6A8;margin-bottom:20px;
}
.todo b{color:#FFB44A}

/* ---------- comparison table ---------- */
/* Four columns will not fold onto a phone without becoming unreadable, so the
   table scrolls inside its own frame rather than the page scrolling sideways. */
.cmp{
  margin-top:28px;overflow-x:auto;background:var(--well);
  border:1px solid var(--line);border-radius:var(--r);
}
.cmp table{border-collapse:collapse;width:100%;min-width:780px;font-size:14.5px}
.cmp th,.cmp td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line2);vertical-align:top;line-height:1.5}
.cmp thead th{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);background:var(--raise);white-space:nowrap;
}
.cmp thead th.us{color:var(--echo)}
.cmp tbody th{font-weight:600;color:var(--ink);width:210px}
.cmp td{color:var(--body)}
.cmp .col-us{background:var(--signal-t2);color:var(--ink)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}

/* small label above a card heading */
.kicker{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--echo);margin-bottom:8px;
}

/* ---------- rebrand timeline ---------- */
/* Two chapters with an arrow between them. On a phone the arrow turns to point
   down, because the panels stack and a sideways arrow would then be lying. */
.rebrand{
  display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;
  margin-top:30px;
}
.rebrand .ch{
  background:var(--well);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;
}
.rebrand .ch.now{
  background:var(--ink-navy);border-color:rgba(169,189,240,.24);
}
.rebrand .yr{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}
.rebrand .ch.now .yr{color:var(--echo)}
.rebrand .nm{
  font-family:var(--display);font-size:clamp(24px,2.6vw,31px);font-weight:800;
  letter-spacing:-.03em;color:var(--ink);margin-bottom:14px;
}
.rebrand .nm .p{color:var(--echo);font-weight:500}
.rebrand h3{font-size:16.5px;margin-bottom:10px;color:var(--ink)}
.rebrand p{font-size:14.5px;line-height:1.6;color:var(--body);margin-bottom:10px}
.rebrand p:last-child{margin-bottom:0}
.rebrand .arw{
  display:flex;align-items:center;justify-content:center;color:var(--signal);
  width:56px;flex:0 0 auto;
}
.rebrand .arw svg{width:48px;height:24px}
@media(max-width:820px){
  .rebrand{grid-template-columns:1fr;gap:14px}
  .rebrand .arw{width:auto;padding:2px 0}
  .rebrand .arw svg{transform:rotate(90deg)}
}


/* ==========================================================================
   Ported from Gulnar's redesign, retuned to the brandbook.
   Her structure and copy; our tokens. Gradients, glows and the pill radius
   are gone because the brandbook forbids them; IBM Plex Mono became JetBrains
   Mono; her system blues became Signal and Echo.
   ========================================================================== */

/* Skip link — we had none at all. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--signal);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r-s) 0;font-size:14px;font-weight:600;
}
.skip:focus{left:0}

/* Campaign bar, above everything. */
.announce{
  background:var(--ink-navy);color:#C7D2EA;border-bottom:1px solid var(--line2);
  font-family:var(--mono);font-size:12px;padding:9px 0;
}
.announce .wrap{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center}
.announce a{color:var(--echo);border-bottom:1px solid rgba(169,189,240,.4);padding-bottom:1px;white-space:nowrap}
.announce a:hover{border-bottom-color:var(--echo)}

/* Note under the hero CTAs. */
.hero-note{
  display:flex;align-items:center;gap:9px;margin-top:18px;
  font-family:var(--mono);font-size:11.5px;color:var(--muted);
}
.hero-note .dot,.diagram-live .dot{
  width:7px;height:7px;border-radius:50%;background:var(--signal);flex:0 0 auto;
}

/* The proof strip the brandbook mockup puts under the hero copy. */
.noc{
  grid-column:1/-1;margin-top:20px;
  display:flex;align-items:stretch;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r);background:var(--ground);
}
.noc-item{padding:10px 16px;border-right:1px solid var(--line);flex:1 1 auto}
.noc-item:last-child{border-right:0}
.noc-item b{
  display:block;font-family:var(--mono);font-size:15px;font-weight:700;
  color:var(--echo);letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.noc-item span{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.35}

/* The hero's right column is deliberately empty. The brandbook's own website
   mockup puts the dot-wave where an illustration would otherwise sit, and a
   pattern behind an illustration is neither whitespace nor calm — so the wave
   bleeds off the right edge (see .hero::after) and nothing competes with it. */
@media(max-width:900px){
  .noc-item{flex:1 1 46%;border-right:0;border-bottom:1px solid var(--line)}
  .noc-item:nth-last-child(-n+1){border-bottom:0}
}

/* The AI section lost its generated illustration; it reads as one column now. */
.ai-split{display:block}
.ai-split .checks{max-width:64ch}

/* --- services ticker, ported from Gulnar (her copy, our tokens) --- */
.marquee{
  position:relative;overflow:hidden;background:var(--paper);
  border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
  padding-block:13px;
}
/* The ends fade under two paper-coloured overlays rather than a mask. A mask on
   the band would fade the white background itself into the graphite behind it,
   and a mask on the track would fade its own far ends, which are offscreen. */
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:8%;z-index:1;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--paper),rgba(255,255,255,0))}
.marquee::after{right:0;background:linear-gradient(270deg,var(--paper),rgba(255,255,255,0))}
.marquee-track{display:flex;width:max-content;animation:marq 64s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;flex:none}
.marquee-group span{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--graphite);white-space:nowrap;padding-inline:26px;
}
.marquee-group i{
  font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--signal);flex:none;
}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* --- quick estimate panel, ported from Gulnar --- */
.calc{
  background:var(--well);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.4vw,26px);
}
.calc-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:14.5px;padding:12px 0;border-top:1px solid var(--line2);color:var(--body);
}
.calc-row:first-of-type{border-top:0}
.calc-out{
  font-family:var(--mono);color:var(--echo);font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.calc .btn{width:100%;margin-top:18px;text-align:center}
.calc-note{
  font-family:var(--mono);text-align:center;color:var(--muted);margin-top:12px;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;
}
/* The AI section gets its right column back — the estimate panel replaces the
   illustration that used to sit there. */
.ai-split{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start}
.ai-split .checks{max-width:none}
@media(max-width:900px){.ai-split{grid-template-columns:1fr;gap:32px}}

/* The page openers no longer carry an illustration, so they run as one column
   and the copy takes a comfortable measure instead of half the width. */
.phero-grid{display:block}
.phero .callbox{margin-top:26px}
.phero-grid > div > .lede,.phero-grid > div > p{max-width:62ch}

/* --- scroll progress, ported from Gulnar. Flat Signal, no gradient. --- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:var(--signal);transition:width .1s linear}

/* --- reveal on scroll. Her interaction; we had nothing. --- */
.js-rv .rv{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.js-rv .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js-rv .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* --- the timing label on each process step. Answers "how long", which is the
       question the step titles alone leave open. --- */
.step-when{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}

/* --- "typical vs us" rows, ported from Gulnar's join page --- */
.contrast{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.contrast-row{
  display:flex;align-items:flex-start;gap:13px;
  background:var(--well);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 17px;font-size:14.5px;line-height:1.5;
}
.contrast-row .lab{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  flex:none;padding:4px 8px;border-radius:var(--r-xs);margin-top:2px;font-weight:500;
}
.contrast-row.them{color:var(--muted)}
.contrast-row.them .lab{background:var(--raise);color:var(--muted);border:1px solid var(--line)}
.contrast-row.us .lab{background:var(--signal-t);color:var(--echo)}

/* ---------- calculators (workload on the home page, valuation on join) ------
   Both live inside .calc. The inputs reuse .field so they inherit focus rings
   and sizing from the forms, and the outputs reuse .calc-row so a calculated
   figure sits on the same grid as the static rows that preceded it. */
.calc-intro{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.6}
.calc-fields{display:grid;gap:14px;margin-top:16px}
.calc-fields .field{margin-bottom:0}
.calc-lbl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px}
.calc-lbl label{margin-bottom:0}
.calc-lbl b{
  font-family:var(--mono);font-size:14px;font-weight:700;color:var(--echo);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.calc input[type=range]{
  width:100%;accent-color:var(--signal);background:transparent;margin:2px 0 0;height:22px;
}
.calc input[type=range]:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.calc-results{margin-top:18px}

/* The headline figure on the valuation panel. */
.val-out{border-top:1px solid var(--line2);margin-top:18px;padding-top:16px}
.val-head{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.val-num{
  font-family:var(--mono);font-size:clamp(26px,3.2vw,36px);font-weight:700;color:var(--ink);
  letter-spacing:-.02em;margin-top:8px;font-variant-numeric:tabular-nums;line-height:1.1;
}
.val-sub{font-size:14px;color:var(--body);margin-top:8px;line-height:1.6}
.val-sub b{color:var(--echo);font-family:var(--mono);font-weight:700}
.val-drags{margin-top:16px;border-top:1px solid var(--line2);padding-top:14px}
.val-drags h4{font-size:14px;color:var(--ink);font-weight:700;margin-bottom:8px}
.val-drag{display:flex;gap:10px;font-size:14px;color:var(--body);padding:5px 0;line-height:1.55}
.val-drag i{
  font-style:normal;font-family:var(--mono);font-size:13px;font-weight:700;flex:none;
  min-width:44px;font-variant-numeric:tabular-nums;
}
.val-drag.down i{color:#F2A0A0}
.val-drag.up i{color:var(--ok)}

/* Email capture under a result. */
.gate{margin-top:18px;border-top:1px solid var(--line2);padding-top:16px}
.gate-lbl{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px}
.gate-row{display:flex;gap:10px}
.gate-row input{
  flex:1 1 auto;min-width:0;font-family:inherit;font-size:15px;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-s);padding:11px 13px;background:var(--raise);
}
.gate-row input:focus{outline:0;border-color:var(--signal);box-shadow:0 0 0 3px rgba(0,87,255,.5)}
.gate-row .btn{flex:0 0 auto;margin-top:0;width:auto}
.gate-msg{font-size:13.5px;margin-top:10px;line-height:1.6;display:none}
.gate-msg.show{display:block}
.gate-msg.ok{color:var(--ok)}
.gate-msg.err{color:#F2A0A0}
.gate-fine{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.55}
@media(max-width:560px){.gate-row{flex-direction:column}.gate-row .btn{width:100%;text-align:center}}

/* Range inputs: the default track is near-white and shouts on a dark panel. */
.calc input[type=range]{-webkit-appearance:none;appearance:none;height:20px}
.calc input[type=range]::-webkit-slider-runnable-track{
  height:5px;border-radius:3px;background:var(--raise);border:1px solid var(--line);
}
.calc input[type=range]::-moz-range-track{
  height:5px;border-radius:3px;background:var(--raise);border:1px solid var(--line);
}
.calc input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--signal);border:0;margin-top:-6px;
}
.calc input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--signal);border:0;
}
.calc input[type=range]::-moz-range-progress{height:5px;border-radius:3px;background:var(--signal)}