/* Shared shell for subpages (about, evals, companies).
   index.html keeps its own bespoke stylesheet.
   Page-specific overrides (widths, kicker color, h1 scale) live in each page's <style>. */
/* Gardiant: the logo face, self-hosted. One Regular weight only, so every rule
   using it must state font-weight:400 or the browser synthesises a fake bold. */
@font-face{font-family:"Gardiant";src:url("/assets/fonts/gardiant.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
:root{
  --void:#000000;
  --ink:#0a0d1c;
  --porcelain:#f6f7fa;
  --porcelain-dim:#a6acbd;
  --porcelain-rgb:246,247,250;
  --void-rgb:0,0,0;
  --ink-rgb:10,13,28;
  /* The ramp, read off the reference: deep navy through royal blue into warm
     orange and gold, the blue/amber pair the image is built on. Surfaces,
     display type and the shader shapes only. Text uses the single accent, which
     is what keeps a four-stop gradient from becoming four competing colours. */
  --g1:#141a4d;
  --g2:#2447c9;
  --g3:#e8842a;
  --g4:#f7b955;
  --g-warm:#ffd9a0;
  --accent:#6f9dff;
  --accent-rgb:111,157,255;
  /* Gold at the bottom-left running to blue at the top-right. Rims only. */
  --accent-grad:linear-gradient(to top right,#f7b955 0%,#e8842a 30%,#5b7ff0 68%,#2447c9 100%);
  /* Two more cuts of the same ramp, because one cannot serve every job:
     -fill sits under a light label, so the vivid ramp drops to .42 alpha over
      the ground (white on vivid gold is 1.75:1, unreadable);
     -text swaps the dark blue end for a light one, since #2447c9 on black is
      2.82:1 and an eyebrow is 10px. */
  --accent-grad-fill:linear-gradient(to top right,rgba(247,185,85,.42) 0%,rgba(232,132,42,.42) 30%,rgba(91,127,240,.42) 68%,rgba(36,71,201,.42) 100%);
  --accent-grad-text:linear-gradient(to top right,#fbd08a 0%,#f7c27e 30%,#e8ded9 52%,#bcd2ff 74%,#b4ceff 100%);
  /* semantic only, held at lower chroma so they never read as brand */
  --ok:#7be9cd;
  --warn:#ff9685;
  /* Shape scale. Four steps and a circle, so the site stops shipping eleven
     radii with no rule. --r-chrome covers inputs, small images and controls;
     --r-panel covers cards, glass panels and dialogs; 50% stays for true
     circles. Anything outside these needs a reason in a comment. */
  /* Type scale. Four roles, so a heading never has to guess which face it is.
     --font-title is the wordmark face and belongs to the brand voice: the
     logotype and the h1 it anchors, nothing smaller.
     --font-display is the width-axis face, for the uppercase structural
     headings and the oversized numerals that lean on font-stretch.
     --font-body is every sentence-case heading, all running copy and all UI.
     --font-mono is labels, counters and anything that reads as data.
     A raw family name anywhere else is drift; tests/design-system.test.mjs
     fails on one. */
  --font-title:"Gardiant",sans-serif;
  --font-display:"Archivo",sans-serif;
  --font-body:"Sora",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",monospace;
  --r-focus:4px;
  --r-chrome:10px;
  --r-panel:16px;
  --r-pill:100px;
  --line:rgba(var(--porcelain-rgb),.1);
  /* Control boundaries, not hairlines. WCAG 1.4.11 wants 3:1 for the edge of
     an input; --line is .1 alpha and lands at 1.2:1. .38 clears it. */
  --field-line:rgba(var(--porcelain-rgb),.38);
  /* dark native scrollbars, form controls and select popups */
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
/* [hidden] is (0,1,0) and loses to any `.class element` rule, so a bare
   el.hidden=true silently does nothing. It cost us the join form staying
   on screen, JOIN FREE and all, after a successful join. */
[hidden]{display:none!important}
::selection{background:var(--accent);color:var(--void)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-focus)}
/* Keyboard bypass for the repeated nav. Matches index.html, which carries its
   own copy. Translated rather than offset so the reveal is compositor-only. */
.skip{position:fixed;top:12px;left:16px;z-index:300;background:var(--porcelain);color:var(--void);
  padding:10px 18px;border-radius:var(--r-chrome);font-size:13px;text-decoration:none;
  transform:translateY(-200%);transition:transform .2s}
.skip:focus{transform:translateY(0)}
/* ---------- edge bloom ---------- */
/* Matches index.html. The ground is pitch black through the middle, where the
   type lives; colour blooms in from the corners only. Fixed and behind
   everything, with pointer-events:none and a negative z-index so it stays out
   of every interaction and stacking decision. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 46% 36% at 0% 6%,rgba(36,71,201,.30),transparent 68%),
    radial-gradient(ellipse 42% 34% at 100% 24%,rgba(111,157,255,.16),transparent 70%),
    radial-gradient(ellipse 52% 34% at 8% 100%,rgba(232,132,42,.16),transparent 72%),
    radial-gradient(ellipse 48% 38% at 96% 94%,rgba(20,26,77,.40),transparent 72%)}
body{background:var(--void);color:var(--porcelain);font-family:var(--font-body);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a,button,summary,[role="button"]{touch-action:manipulation}
/* Small uppercase links are ~20px tall. Grow the touch target, not the type. */
@media(pointer:coarse){
  .back,.about-links a,.offer-cta,.foot-contact,footer a{position:relative}
  .back::after,.about-links a::after,.offer-cta::after,.foot-contact::after,footer a::after{
    content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%);
  }
}
/* Titles are white; the accent lives on kickers and links, not headlines. */
h1 em{font-family:var(--font-display);font-stretch:112%;letter-spacing:-.035em;font-style:normal;color:var(--porcelain)}
/* Display type must not inherit the 1.6 body leading, and headings should not
   strand a single word on the last line. */
h1,h2,h3,h4{text-wrap:balance}
h2,h3,h4{line-height:1.1;letter-spacing:-.02em}
p,.lead{text-wrap:pretty}
/* The reading lead under a page title. Four pages each declared their own
   copy of this and the homepage declared none, so the same component ran
   at 17px on subpages and 16px on the homepage. Pages set width, not type. */
.lead{color:var(--porcelain-dim);font-size:17px}
select option{background:var(--ink);color:var(--porcelain)}
dialog.modal{overscroll-behavior:contain}

/* ---------- glass ----------
   A web approximation of Liquid Glass, not the Apple material itself: Apple
   documents that for Apple platforms and ships no web implementation. Blur plus
   saturation, a hairline border and a lit top edge is what reads as refraction
   over the nebula field. Reduced-transparency and no-backdrop-filter both fall
   back to an opaque surface so text never floats over bright chrome. */
.glass{
  position:relative;isolation:isolate;
  background:linear-gradient(135deg,rgba(var(--porcelain-rgb),.07),rgba(var(--porcelain-rgb),.02) 46%),rgba(var(--ink-rgb),.55);
  backdrop-filter:blur(22px) saturate(165%);
  -webkit-backdrop-filter:blur(22px) saturate(165%);
  border:1px solid rgba(var(--porcelain-rgb),.11);
  box-shadow:inset 0 1px 0 rgba(var(--porcelain-rgb),.16),inset 0 -1px 0 rgba(var(--porcelain-rgb),.05);
}
.glass::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 60% at 22% -10%,rgba(var(--porcelain-rgb),.13),transparent 58%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--ink)}
}
@media (prefers-reduced-transparency:reduce){
  .glass{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
  .glass::before{display:none}
}

/* ---------- button ----------
   One definition, shared by every subpage. It used to be copy-pasted into all
   four of them at 14px sentence case, while index.html ran 12.5px tracked
   uppercase, so the same component read as two different products. This is
   index.html's treatment, which matches the nav and the footer.
   Colour on the rim, not the fill. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);font-size:12.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;padding:16px 34px;border-radius:var(--r-pill);text-decoration:none;
  cursor:pointer;position:relative;
  background:var(--accent-grad-fill),var(--void);border:1px solid var(--accent);color:var(--porcelain);
  transition:color .3s,border-color .3s,box-shadow .3s;
}
/* The accent rim as a gradient: gold bottom-left to blue top-right. Painted by
   a pseudo-element because `border` cannot take a gradient while the body stays
   transparent. Gated on mask support: without it the element paints a filled
   slab rather than a ring. The solid rim above stands in. */
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .btn{border-color:transparent}
  .btn::after{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
    background:var(--accent-grad);pointer-events:none;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
  }
  .btn > span{position:relative;z-index:1}
}
.btn:hover{color:var(--porcelain);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.5),0 0 20px -7px rgba(var(--accent-rgb),.7)}
/* Every subpage disables the submit button while the request is in flight;
   only certification.html used to style that state. */
/* At 320px a 23-character label ("Fund a scholarship seat") had 208px of inner
   width and wrapped to two lines. Tighter padding and tracking buy it back
   without touching the type size. */
@media(max-width:400px){.btn{padding:15px 18px;letter-spacing:.1em}}
.btn[disabled]{opacity:.55;pointer-events:none}
/* A glass button keeps the glass fill. .btn and .glass are both (0,1,0), so
   whichever sheet comes last would otherwise decide, and .btn resets
   background to transparent for the UA button face. index.html is the only
   page that composes the two, and its inline sheet loads after this file,
   so ordering alone cannot settle it. (0,2,0) can. */
.btn.glass{background:linear-gradient(135deg,rgba(var(--porcelain-rgb),.07),rgba(var(--porcelain-rgb),.02) 46%),rgba(var(--ink-rgb),.55);
  border-color:rgba(var(--porcelain-rgb),.11)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .btn.glass{background:var(--ink)}
}
@media (prefers-reduced-transparency:reduce){
  .btn.glass{background:var(--ink)}
}

/* The footer takes the nav's face: tracked uppercase at the nav's size and
   weight. It shipped here as 13px sentence case and on the homepage as
   11.5px tracked caps, so the same bar read as two different components. */
footer{border-top:1px solid var(--line);padding:40px 0 max(40px,env(safe-area-inset-bottom));
  color:var(--porcelain-dim);font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase}
footer a{color:var(--porcelain-dim)}
/* The separator travels with the link. Tracked caps push this line past a
   320px screen, and a bare · was being left stranded at the end of the
   first line while Privacy wrapped alone to the second. */
.foot-sep{white-space:nowrap}
/* The brand name in the footer is the logo, so it takes the logo face. The
   inline margin keeps the year off the wordmark: at this size the word space
   alone let "2026" crowd the G. */
.foot-brand{font-family:var(--font-title);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--porcelain);margin-inline:7px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}