/* =====================================================================
   BETA INSIGHT: design system
   Rebuilt 18 Sep 2026 against dnacapital.com measured live, not against a
   token summary. The summary said the canvas was #070708; that is actually
   DNA's FOOTER band. The real page canvas is rgb(31,31,38), a soft charcoal,
   which is why the first build read far too black.
   Palette is led by Christopher's #1B657C: DNA's LIGHTNESS values are kept,
   DNA's violet/cobalt hue is replaced throughout by the Beta Insight teal.
   ===================================================================== */
:root{
  /* ground: same lightness as DNA's rgb(31,31,38), teal hue instead of violet */
  --ink:#1E2A30;
  --ink-2:#18232A;          /* section tint for alternating bands */
  --band:#0F181C;           /* footer band, DNA's darker closing block */
  --text:#F4F1EA;           /* Christopher's cream, warmer than pure white */
  --muted:#96A3A8;
  --teal:#1B657C;           /* THE brand colour, sets the tone */
  --teal-deep:#124657;
  --bright:#3FB6D4;         /* lifted teal: arcs, rules, active states */
  --glow:#6FE3F0;
  --grad:linear-gradient(135deg,#6FE3F0,#3FB6D4 43%,#1B657C 75%,#1B657C);
  --hair:rgba(244,241,234,.16);
  --hair-soft:rgba(244,241,234,.08);

  --display:'Cormorant Garamond',Georgia,serif;
  --ui:'Inter',ui-sans-serif,system-ui,sans-serif;

  --s8:8px; --s20:20px; --s23:23px; --s32:32px; --s39:39px;
  --s59:59px; --s99:99px; --s119:119px; --s171:171px;
  --gutter:clamp(20px,7vw,130px);
  --maxw:1280px;

  /* interactive mockup kit (review layer, light UI) */
  --mauve:#1B657C; --mauve-d:#155062; --mauve-deep:#0E3B49;
  --ink-soft:#6B7276;
  --cream:#EFF4F6; --rose:#7FBCCD; --taupe:#B4C7CE; --line:#DEE8EC;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --shadow:0 18px 50px -22px rgba(6,20,26,.55);
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth}
body{overflow-x:clip;background:var(--ink);color:var(--text);font-family:var(--ui);
  font-weight:300;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum"}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

/* ---------- type ---------- */
.micro{font-size:10px;font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:var(--text)}
.micro.dim{color:var(--muted)}
.caption{font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);line-height:1.4}
/* DNA measured: Darius 300, line-height 1.34, letter-spacing -0.02em. The first
   build used 1.13, which is why the headlines read tight and small beside theirs. */
.d1{font-family:var(--display);font-weight:300;font-size:clamp(42px,6.2vw,76px);line-height:1.2;letter-spacing:-.02em}
.d2{font-family:var(--display);font-weight:300;font-size:clamp(34px,4.4vw,56px);line-height:1.28;letter-spacing:-.02em}
.d3{font-family:var(--display);font-weight:300;font-size:clamp(30px,3.6vw,46px);line-height:1.34;letter-spacing:-.02em}
.lede{font-size:clamp(15px,1.25vw,17px);font-weight:300;line-height:1.65;color:var(--text);max-width:46ch;opacity:.92}
.body{font-size:15px;font-weight:300;line-height:1.7;color:var(--muted);max-width:52ch}
.accent{color:var(--bright)}

/* ---------- shell ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
section{position:relative;padding:var(--s119) 0;z-index:1}
section.tint{background:rgba(24,35,42,.55)}

/* ---------- the field: ONE fixed layer behind everything ----------
   DNA runs a single continuous canvas behind transparent sections, which is why
   its field bleeds across section boundaries. A per-section background cannot do
   that. A fixed layer reproduces it: content scrolls, the field stays.
   WIX: this is a page-level background with a fixed scroll effect, NOT a section
   background. Flagged in the handover as the one item to confirm in Studio. */
/* position:fixed creates a stacking context on its own, regardless of z-index, so
   the image inside can only blend against THIS layer, never against the page behind
   it. Removing z-index did not help and was the wrong diagnosis. The fix is to give
   the layer the canvas colour itself: the image then screens against --ink, its true
   black ground comes out as --ink exactly, and only the particles lighten. Sections
   carry z-index:1 and stay above. */
.fieldlayer{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:var(--ink)}
/* SCREEN blend, and this time it is the right tool rather than a workaround.
   The assets are built with a TRUE BLACK ground, and screen maps black to the
   backdrop unchanged, so the image rectangle disappears completely against a
   canvas that is no longer near-black. It also lets the particles read at full
   strength, which is what makes the reference field feel present rather than
   decorative. Wix: Screen is one of Studio's 12 blend modes, supported on images,
   and this parent is not pinned, sticky or animated. */
.fieldlayer img{position:absolute;right:-8%;top:50%;transform:translateY(-50%);
  width:88%;min-width:760px;height:auto;opacity:0;mix-blend-mode:screen;
  transition:opacity 1.2s ease}
.fieldlayer img.on{opacity:1}
/* Scrim only where the text sits. Much lighter than before so the field carries. */
.fieldlayer::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--ink) 0%,rgba(30,42,48,.92) 22%,rgba(30,42,48,.55) 44%,rgba(30,42,48,0) 72%)}

/* ---------- corner navigation ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;
  justify-content:space-between;padding:30px var(--gutter);pointer-events:none;
  transition:padding .4s ease}
.nav>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:20px;height:20px;flex:none}
.brand .wordmark{font-size:11px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  transition:opacity .4s ease,max-width .4s ease;white-space:nowrap;overflow:hidden;max-width:200px}
/* DNA collapses the wordmark to the glyph once you scroll. It also floats on nothing,
   which works there because of very generous spacing; here body copy passes behind the
   links and collides, so the scrolled state takes a tinted backdrop as well.
   Wix: the header's own "Color while scrolling" effect, confirmed in the Help Center. */
.nav.scrolled{background:rgba(30,42,48,.9);-webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--hair-soft);
  padding-top:18px;padding-bottom:18px}
.nav.scrolled .brand .wordmark{opacity:0;max-width:0}
.navlinks{display:flex;align-items:center;gap:var(--s32)}
.navlinks a{font-size:10px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);transition:color .3s}
.navlinks a:hover,.navlinks a.on{color:var(--text)}
.navtoggle{display:none;background:none;border:0;color:var(--text);font-size:10px;
  font-weight:500;letter-spacing:.34em;text-transform:uppercase;align-items:center;gap:12px}
.diamond{width:26px;height:26px;flex:none}

/* ---------- hero ---------- */
/* Bottom padding has to clear the absolutely positioned scroll prompt, or the hero
   CTA and the prompt collide on a short viewport. */
.hero{min-height:100svh;display:flex;align-items:center;padding-top:var(--s171);padding-bottom:var(--s171)}
.hero .d1{max-width:15ch;margin:var(--s39) 0 var(--s32)}
.scrollprompt{position:absolute;left:var(--gutter);bottom:var(--s39);z-index:2;display:flex;flex-direction:column;gap:16px}
/* A short window has no room for both; the prompt is the expendable one. */
@media(max-height:820px){.scrollprompt{display:none}}
/* DNA's scroll rule is a saturated accent, not a white hairline. */
.scrollprompt .line{width:2px;height:72px;background:linear-gradient(180deg,var(--bright),rgba(63,182,212,0))}

/* ---------- the split: alternating left/right, DNA's core rhythm ---------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s59) var(--s99);align-items:center}
.split.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.rev .side{order:2}
.split.rev .main{order:1}
.split+.split{margin-top:var(--s119)}

/* ---------- big circle stats, stacked ---------- */
.statstack{display:flex;flex-direction:column;gap:var(--s59);align-items:center}
.bigstat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s20)}
.ring{position:relative;width:150px;height:150px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:1.5}
.ring .track{stroke:var(--hair-soft)}
.ring .arc{stroke:var(--bright);stroke-linecap:round;stroke-dasharray:var(--len);
  stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.8s cubic-bezier(.16,1,.3,1)}
.ring.drawn .arc{stroke-dashoffset:var(--off)}
/* DNA sets the numeral in the SANS at ~55px weight 300, not in the serif. */
.ring .num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ui);
  font-weight:300;font-size:46px;letter-spacing:-.02em;color:var(--text);line-height:1}
.ring .num.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ring .num small{font-size:15px;color:var(--muted);letter-spacing:.06em;margin-left:3px}
.bigstat .caption{max-width:22ch}

/* ---------- line-bracketed button (DNA's signature control) ----------
   Measured: Graphik 500, 11.8px, letter-spacing 2.36px, uppercase, padding
   21/24/19, with a short rule above offset right and below offset left. */
.btnline{position:relative;display:inline-block;font-family:var(--ui);font-weight:500;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--text);
  padding:21px 24px 19px;transition:color .3s}
.btnline::before,.btnline::after{content:"";position:absolute;height:1px;width:52%;
  background:var(--bright);transition:width .4s ease,background .3s}
.btnline::before{top:0;left:30%}
.btnline::after{bottom:0;left:16%}
.btnline:hover{color:var(--glow)}
.btnline:hover::before{width:64%;left:24%}
.btnline:hover::after{width:64%;left:12%}

/* ---------- stage labels ---------- */
.stagelabel{font-family:var(--display);font-weight:300;font-size:clamp(30px,3.4vw,45px);
  line-height:1.2;letter-spacing:-.02em}

/* ---------- hairline rows ---------- */
.rows{margin-top:var(--s59);border-top:1px solid var(--hair)}
.row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s23) var(--s39);
  padding:var(--s32) 0;border-bottom:1px solid var(--hair-soft);transition:border-color .4s}
.row .n{flex:0 0 44px;font-size:10px;letter-spacing:.2em;color:var(--muted)}
.row h3{flex:1 1 300px;font-family:var(--display);font-weight:300;
  font-size:clamp(23px,2.4vw,30px);line-height:1.25}
.row p{flex:1 1 420px;font-size:14px;font-weight:300;color:var(--muted);line-height:1.7}
.row:hover{border-bottom-color:var(--teal)}
.row .tag{display:inline-block;margin-left:12px;font-family:var(--ui);font-size:9px;
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--bright);
  border:1px solid var(--teal);padding:3px 9px;vertical-align:middle}

/* ---------- q and a ---------- */
.qa{margin-top:var(--s59);border-top:1px solid var(--hair)}
.qa-item{padding:var(--s39) 0;border-bottom:1px solid var(--hair-soft);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s23) var(--s99);align-items:start}
.qa-item h3{font-family:var(--display);font-weight:300;font-size:clamp(23px,2.5vw,34px);
  line-height:1.25;max-width:18ch}

/* ---------- values ---------- */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s59) var(--s39);margin-top:var(--s59)}
.value{border-top:1px solid var(--hair);padding-top:var(--s23)}
.value h3{font-family:var(--display);font-weight:300;font-size:27px;line-height:1.25;margin-bottom:12px}

/* ---------- founder ---------- */
.portrait{position:relative;aspect-ratio:4/5;border:1px solid var(--hair);display:grid;
  place-items:center;background:rgba(244,241,234,.03)}
.portrait .ph{text-align:center;padding:var(--s23)}
.portrait .ph .caption{display:block;margin-top:12px;max-width:22ch}

.pending{display:inline-flex;align-items:center;gap:9px;border:1px dashed var(--teal);
  color:var(--bright);font-family:var(--ui);font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;padding:7px 11px;margin-top:var(--s23)}
.pending::before{content:"";width:6px;height:6px;background:var(--bright);flex:none}

/* ---------- topics ---------- */
.topics{margin-top:var(--s59);display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 var(--s39)}
.topic{border-top:1px solid var(--hair-soft);padding:var(--s23) 0;display:flex;gap:15px;align-items:baseline}
.topic .dot{width:5px;height:5px;background:var(--bright);flex:none;transform:translateY(-3px);border-radius:50%}
.topic span{font-size:15px;color:var(--text);font-weight:300}

/* ---------- form ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s32) var(--s39);margin-top:var(--s59)}
.f{display:flex;flex-direction:column;gap:10px}
.f.full{grid-column:1/-1}
.f label{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.f input,.f select,.f textarea{background:transparent;border:0;border-bottom:1px solid var(--hair);
  color:var(--text);font-family:var(--ui);font-size:15px;font-weight:300;padding:13px 0;
  border-radius:0;transition:border-color .3s}
.f select{color:var(--muted)}
.f select option{background:#1E2A30;color:var(--text)}
.f textarea{resize:vertical;min-height:120px}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--bright)}
.formnote{grid-column:1/-1;font-size:12px;color:var(--muted);margin-top:var(--s8)}

.details{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s39);
  margin-top:var(--s59);border-top:1px solid var(--hair);padding-top:var(--s32)}
.detail .caption{display:block;margin-bottom:12px}
.detail p{font-size:15px;font-weight:300;line-height:1.6}

/* ---------- footer: DNA closes on a darker band ---------- */
footer{position:relative;z-index:1;background:var(--band);padding:var(--s99) 0 54px}
.footgrid{display:flex;flex-wrap:wrap;gap:var(--s59);justify-content:space-between}
.footlinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,auto));gap:var(--s23) var(--s59)}
.footlinks a{font-size:13px;color:var(--muted);transition:color .3s}
.footlinks a:hover{color:var(--text)}
.legal{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:var(--s39)}

/* ---------- router + reveal ---------- */
.page{display:none}
.page.on{display:block}
.rv{opacity:1;transform:none}
body.motion-ok .rv{opacity:0;transform:translateY(20px);
  transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1)}
body.motion-ok .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  body.motion-ok .rv{opacity:1;transform:none;transition:none}
  .ring .arc{transition:none;stroke-dashoffset:var(--off)}
  html{scroll-behavior:auto}
}

/* ---------- breakpoints ---------- */
@media(max-width:1000px){
  .split,.split.rev{grid-template-columns:1fr;gap:var(--s59)}
  .split.rev .side,.split.rev .main{order:0}
  .qa-item{grid-template-columns:1fr;gap:var(--s23)}
  .statstack{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:var(--s39)}
}
/* The field keeps its desktop treatment down to tablet. Only below 760, where the
   layout is a single column and text runs the full width, does it drop behind a
   heavier scrim. */
@media(max-width:760px){
  .fieldlayer img{width:150%;min-width:0;right:-34%}
  .fieldlayer::after{background:
    linear-gradient(180deg,rgba(30,42,48,.58) 0%,rgba(30,42,48,.84) 58%,var(--ink) 100%)}
}
@media(max-width:760px){
  section{padding:var(--s59) 0}
  .navlinks{display:none}
  .navtoggle{display:flex}
  .navlinks.open{display:flex;position:fixed;inset:0;background:var(--ink);flex-direction:column;
    align-items:flex-start;justify-content:center;gap:var(--s32);padding:var(--gutter);z-index:210}
  .navlinks.open a{font-size:14px;letter-spacing:.3em}
  .hero{min-height:auto;padding-top:150px;padding-bottom:var(--s59)}
  .scrollprompt{display:none}
  .form{grid-template-columns:1fr}
  .ring{width:124px;height:124px}
  .ring .num{font-size:36px}
  .statstack{gap:var(--s32)}
}
@media(max-width:400px){
  :root{--gutter:18px}
  .d1{font-size:36px}
}