:root{
--ink:#101010;
--white:#ffffff;
--primary:#5569f8;
--primary-hover:#4457e6;
--primary-press:#3a4bd1;
--sky:#7ad4f8;
--lilac:#c3bafc;
--cloud:#f5f5f9;
--gray-500:#7c7b7b;
--gray-300:#c4c4c4;
--gray-200:#dadada;
--text-secondary:var(--gray-500);
--text-inverse-secondary:rgba(255,255,255,.62);
--font-sans:"Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--radius-sm:8px;
--radius-md:12px;
--radius-lg:16px;
--radius-xl:32px;
--shadow-elevated:0 12px 40px rgba(16,16,16,.14);
--border-hairline:inset 0 0 0 1px var(--gray-200);
--page-margin:56px;
--nav-h:64px;
--stack:30px;
--ease:cubic-bezier(.4,0,.2,1);
}
@media(max-width:900px){:root{--page-margin:24px;--nav-h:56px;--stack:22px}}

*{box-sizing:border-box}
/* The UA stylesheet hides [hidden] via display:none, so ANY author rule that sets
   `display` on an element silently defeats it. Enforce it so toggling .hidden works. */
[hidden]{display:none !important}
body{margin:0;font:400 18px/1.55 var(--font-sans);-webkit-font-smoothing:antialiased}
a{text-decoration:none}
img{max-width:100%}

.eyebrow{display:flex;align-items:center;gap:9px;
  font:500 13px var(--font-sans);letter-spacing:1.6px;text-transform:uppercase;
  margin:0;color:var(--text-inverse-secondary)}
.eyebrow .mark{width:17px;height:auto;flex:none;display:block}

.btn{display:inline-block;background:var(--primary);color:var(--white);padding:17px 34px;border:0;border-radius:var(--radius-md);font:500 16px var(--font-sans);cursor:pointer;white-space:nowrap;transition:background .18s var(--ease),transform .18s var(--ease)}
.btn:hover{background:var(--primary-hover);color:var(--white)}
.btn:active{background:var(--primary-press)}
.btn:disabled{background:var(--gray-300);cursor:not-allowed}
.btn.sm{padding:10px 20px;font-size:15px}
.btn:focus-visible{outline:2px solid var(--sky);outline-offset:3px}

/* ============ Single-screen dark hero ============ */
html.hero-page,body.hero-page{height:100%;overflow:hidden;background:var(--ink);overscroll-behavior:none}
.stage{position:relative;height:100vh;height:100dvh;background:var(--ink);color:var(--white);overflow:hidden;display:flex;flex-direction:column}

/* full-bleed slatted gradient, pre-composited onto the ink so it needs no alpha channel */
.stage .backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;user-select:none}
.stage .backdrop img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
/* scrim over the copy side so the headline and paragraph stay legible */
.stage .backdrop::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(16,16,16,.95) 0%,
    rgba(16,16,16,.86) 30%,
    rgba(16,16,16,.46) 52%,
    rgba(16,16,16,0) 74%)}

/* fixed full-width nav bar — faint black, only just readable against the gradient */
.stage-header{position:fixed;inset:0 0 auto 0;z-index:10;height:var(--nav-h);
  display:flex;align-items:center;padding:0 var(--page-margin);
  background:rgba(0,0,0,.26);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.055)}
/* wordmark-only lockup: no icon setting the box height, so 23px matches the
   optical size the old icon+wordmark lockup rendered at 30px */
.stage-header img{height:23px;display:block}

/* one uniform gap sets the rhythm between eyebrow / headline / paragraph / button,
   so every child carries zero margin of its own */
/* no max-width: the headline is width-bound, so letting the column run to the
   page margins is what allows it to grow on larger screens */
.hero-body{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;
  gap:var(--stack);padding:var(--nav-h) var(--page-margin) 0;
  container-type:inline-size}
.hero-body>*{margin:0}
/* Both lines share one size and never break, so the longer line sets the size.
   "Founders Build at The Cutting Edge of Innovation." renders about 22.6x its
   font size in width, so dividing the available width by ~24 keeps it on one
   line with roughly 6% headroom — enough to absorb fallback-font metrics.
   cqw resolves against .hero-body's content box, i.e. exactly the width the
   headline has to fit into, so this tracks any container change with no JS.
   The vw line is the fallback for browsers without container query units.

   --cap is a HEIGHT-driven ceiling and is wrapped in min(), so it can only ever
   LOWER the size. The width-derived value is what guarantees the line never
   breaks, so no height rule can override it upward. It could before: a
   max-height rule set --big directly, which overflowed the line off-screen. */
.hero-body h1{--cap:110px;
  --big:clamp(26px,min(calc(4.35vw - 5px),var(--cap)),110px);
  --big:clamp(26px,min(4.15cqw,var(--cap)),110px);
  margin:0;font-family:var(--font-sans);font-weight:700;line-height:1.04;letter-spacing:-.03em;
  white-space:nowrap}
.hero-body h1 .line-1,.hero-body h1 .line-2{display:block;font-size:var(--big)}
.hero-body .lede{margin:0;max-width:730px;font:400 20px/1.6 var(--font-sans);color:var(--text-inverse-secondary)}

/* ghost CTA — glassy over the gradient */
.btn-ghost{display:inline-block;padding:15px 32px;border-radius:4px;cursor:pointer;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.28);color:var(--white);
  font:500 15px var(--font-sans);letter-spacing:.2px;white-space:nowrap;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .18s var(--ease),border-color .18s var(--ease)}
.btn-ghost:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.52);color:var(--white)}
.btn-ghost:active{background:rgba(255,255,255,.12)}
.btn-ghost:focus-visible{outline:2px solid var(--sky);outline-offset:3px}

.stage-footer{position:relative;z-index:2;padding:0 var(--page-margin) 30px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font:400 13px var(--font-sans);color:rgba(255,255,255,.42)}
.stage-footer .social{display:inline-flex;color:rgba(255,255,255,.5);
  transition:color .15s var(--ease)}
.stage-footer .social:hover{color:var(--white)}
.stage-footer .social svg{width:17px;height:17px;display:block;fill:currentColor}
.stage-footer .sep{opacity:.4}
.stage-footer a[href^="mailto:"]{color:inherit;transition:color .15s var(--ease)}
.stage-footer a[href^="mailto:"]:hover{color:var(--white)}
.stage-footer a[href^="mailto:"]:focus-visible{outline:2px solid var(--sky);outline-offset:2px;border-radius:2px}

@media(max-width:900px){
  /* portrait crops most of the gradient away, so favour the vivid side and scrim vertically */
  .stage .backdrop img{object-position:72% center}
  .stage .backdrop::after{background:linear-gradient(180deg,
    rgba(16,16,16,.92) 0%,
    rgba(16,16,16,.80) 42%,
    rgba(16,16,16,.52) 70%,
    rgba(16,16,16,.30) 100%)}
  .hero-body{padding-bottom:2vh}
  /* mobile is the one place breaking is allowed */
  .hero-body h1{--big:clamp(28px,8.2vw,38px);white-space:normal;text-wrap:balance}
  .hero-body .lede{font-size:16px;line-height:1.55;max-width:none}
  .btn-ghost{padding:14px 26px;font-size:14px}
  .eyebrow{font-size:11.5px;letter-spacing:1.3px}
  .eyebrow .mark{width:15px}
}
/* Short viewports: the headline and the long paragraph compete for height.
   These only lower --cap and shrink the paragraph. They must never set --big,
   or a height rule would override the width constraint and clip the headline. */
@media(max-height:800px) and (min-width:901px){
  .hero-body h1{--cap:72px}
  .hero-body .lede{font-size:17px;line-height:1.55;max-width:660px}
}
@media(max-height:660px) and (min-width:901px){
  :root{--stack:20px}
  .hero-body h1{--cap:54px}
  .hero-body .lede{font-size:15px;max-width:640px}
}

/* ============ Contact page ============ */
.contact-page{background:var(--ink);color:var(--white);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.contact-page a{color:var(--sky)}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:32px var(--page-margin)}
.site-header img{height:23px;display:block}

.contact{position:relative;flex:1;margin:24px var(--page-margin) 64px;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.contact h1{font:700 clamp(38px,4.4vw,60px)/1.05 var(--font-sans);letter-spacing:-.02em;margin:0 0 20px}
.contact .sub{color:var(--text-inverse-secondary);max-width:420px;margin:0}
.contact form{display:flex;flex-direction:column;gap:20px}
.field label{display:block;font-size:15px;margin-bottom:8px;color:var(--text-inverse-secondary)}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;font:400 16px var(--font-sans);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);color:var(--white)}
.field textarea{resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.32)}
.field select option{background:var(--ink);color:var(--white)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--primary);outline-offset:-1px;border-color:transparent}
.check{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--text-inverse-secondary)}
.check input{width:18px;height:18px;accent-color:var(--primary);flex:none}
.contact-footer{padding:0 var(--page-margin) 32px;font:400 13px var(--font-sans);color:rgba(255,255,255,.38)}
@media(max-width:900px){.contact{grid-template-columns:1fr;gap:36px}}

dialog{border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-elevated);padding:32px;max-width:420px;
  font:400 16px/1.5 var(--font-sans);background:#1b1b1b;color:var(--white)}
dialog::backdrop{background:rgba(16,16,16,.72)}
dialog h4{font:600 22px var(--font-sans);margin:0 0 12px}
dialog p{color:var(--text-inverse-secondary);margin:0 0 22px}

/* ============ Contact modal ============ */
.modal{position:relative;width:min(92vw,520px);max-width:none;max-height:88vh;overflow-y:auto;
  padding:38px 40px 40px;border:1px solid rgba(255,255,255,.14);border-radius:6px;
  background:#161618;color:var(--white);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset}
.modal::backdrop{background:rgba(8,8,10,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

.modal-title{font:700 clamp(24px,3vw,30px)/1.15 var(--font-sans);letter-spacing:-.02em;margin:0 0 10px}
.modal-sub{font:400 15px/1.55 var(--font-sans);color:var(--text-inverse-secondary);margin:0 0 26px}

.modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;display:grid;place-items:center;
  padding:0;border:0;border-radius:4px;background:transparent;color:rgba(255,255,255,.5);cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease)}
.modal-close:hover{background:rgba(255,255,255,.09);color:var(--white)}
.modal-close:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.modal-close svg{width:19px;height:19px;display:block}

.modal-form{display:flex;flex-direction:column;gap:18px}
.modal .field label{display:block;font:500 13px var(--font-sans);letter-spacing:.4px;
  text-transform:uppercase;color:rgba(255,255,255,.56);margin-bottom:8px}
.modal .field input,.modal .field textarea{width:100%;padding:13px 15px;
  font:400 16px/1.45 var(--font-sans);color:var(--white);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:4px;
  transition:border-color .15s var(--ease),background .15s var(--ease)}
.modal .field textarea{resize:vertical;min-height:96px}
.modal .field input::placeholder,.modal .field textarea::placeholder{color:rgba(255,255,255,.3)}
.modal .field input:hover,.modal .field textarea:hover{border-color:rgba(255,255,255,.26)}
.modal .field input:focus,.modal .field textarea:focus{outline:none;
  border-color:var(--primary);background:rgba(85,105,248,.07)}

.form-note{margin:0;padding:11px 14px;border-radius:4px;
  font:400 14px/1.5 var(--font-sans);color:#ffd9da;
  background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.4)}

.btn-solid{align-self:flex-start;padding:15px 32px;border:1px solid transparent;border-radius:4px;
  background:var(--primary);color:var(--white);cursor:pointer;
  font:500 15px var(--font-sans);letter-spacing:.2px;white-space:nowrap;
  transition:background .18s var(--ease)}
.btn-solid:hover:not(:disabled){background:var(--primary-hover)}
.btn-solid:active:not(:disabled){background:var(--primary-press)}
.btn-solid:disabled{background:rgba(255,255,255,.14);color:rgba(255,255,255,.5);cursor:default}
.btn-solid:focus-visible{outline:2px solid var(--sky);outline-offset:3px}

.modal-done{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.modal-done .modal-sub{margin-bottom:28px}

@media(max-width:600px){
  .modal{padding:32px 24px 28px;width:min(94vw,520px)}
  .modal .field input,.modal .field textarea{font-size:16px}
}
@media(prefers-reduced-motion:no-preference){
  .modal[open]{animation:modal-in .2s var(--ease)}
  @keyframes modal-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}