@font-face{font-family:"Chakra Petch";src:url("/fonts/ChakraPetch-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url("/fonts/ChakraPetch-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url("/fonts/ChakraPetch-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url("/fonts/ChakraPetch-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url("/fonts/ChakraPetch-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url("/fonts/ChakraPetch-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-100-900.woff2") format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("/fonts/SpaceMono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("/fonts/SpaceMono-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Space Mono";src:url("/fonts/SpaceMono-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* Base palette. Values sampled from the brand pack logo files. */
:root{
  /* Ink / navy — the brand's primary ground */
  --navy-900:#070915;
  --navy-800:#0b0e1e;
  --navy-700:#111527;
  --navy-600:#181d33;
  --navy-500:#222842;
  --navy-400:#2e3552;

  /* Paper / neutrals */
  --paper-000:#ffffff;
  --paper-050:#f5f6fa;
  --paper-100:#eff0f5;
  --paper-200:#dfe0e4;
  --paper-300:#bec1c9;
  --slate-400:#a2a5af;
  --slate-500:#82848e;
  --slate-600:#4b5160;
  --slate-700:#31343f;
  --ink-900:#16181d;

  /* Brand triad — read off the mark, in stroke order */
  --indigo-600:#1c2d97;
  --indigo-500:#2a3fbe;
  --indigo-400:#4055d8;
  --cyan-500:#40a2ce;
  --cyan-400:#68bde2;
  --cyan-600:#2b7fa5;
  --violet-500:#6c29d9;
  --violet-400:#8b53e6;
  --violet-600:#5620ad;

  /* Semantic hues */
  --green-500:#12b981;
  --amber-500:#f5a524;
  --red-500:#e5484d;

  /* Alphas for hairlines, tints, glows */
  --cyan-a12:rgba(64,162,206,.12);
  --cyan-a24:rgba(64,162,206,.24);
  --cyan-a40:rgba(64,162,206,.4);
  --violet-a16:rgba(108,41,217,.16);
  --indigo-a20:rgba(28,45,151,.2);
  --paper-a08:rgba(245,246,250,.08);
  --paper-a14:rgba(245,246,250,.14);
  --paper-a60:rgba(245,246,250,.6);
  --ink-a08:rgba(22,24,29,.08);
  --ink-a14:rgba(22,24,29,.14);
}

:root{
  --font-display:"Chakra Petch",system-ui,sans-serif;   /* logotype, headings, labels, data */
  --font-body:"Inter","Helvetica Neue",system-ui,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;

  --text-3xs:10px;
  --text-2xs:11px;
  --text-xs:12px;
  --text-sm:14px;
  --text-base:16px;
  --text-lg:18px;
  --text-xl:22px;
  --text-2xl:28px;
  --text-3xl:36px;
  --text-4xl:48px;
  --text-5xl:64px;
  --text-6xl:84px;

  --leading-tight:1.05;
  --leading-snug:1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* Wide tracking is a brand signature: the ENGINEERING lockup, eyebrows, buttons */
  --tracking-tightest:-.03em;
  --tracking-tight:-.015em;
  --tracking-normal:0;
  --tracking-wide:.06em;
  --tracking-wider:.14em;
  --tracking-widest:.28em;
}

:root{
  /* 4px base grid; 2px available for hairline insets */
  --space-0:0px;
  --space-px:1px;
  --space-1:2px;
  --space-2:4px;
  --space-3:8px;
  --space-4:12px;
  --space-5:16px;
  --space-6:20px;
  --space-7:24px;
  --space-8:32px;
  --space-9:40px;
  --space-10:48px;
  --space-11:64px;
  --space-12:80px;
  --space-13:96px;
  --space-14:128px;
  --space-15:160px;

  --gutter-sm:16px;
  --gutter-md:24px;
  --gutter-lg:32px;
  --page-max:1240px;
  --page-pad:32px;
  --section-y:96px;
  --control-h-sm:28px;
  --control-h-md:36px;
  --control-h-lg:44px;
}

:root{
  /* Tempest is a squared-off system. Nothing is soft. */
  --radius-0:0px;
  --radius-xs:2px;
  --radius-sm:3px;
  --radius-md:5px;
  --radius-lg:8px;
  --radius-xl:12px;
  --radius-pill:999px;
  /* Notch: the cut corner in the TEMPEST logotype (E, S, P). Use on hero panels and badges. */
  --notch:10px;
  --notch-clip:polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
  --notch-clip-tr:polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}

:root{
  /* On dark, elevation is a hairline + a faint glow, never a drop shadow. */
  --hairline-dark:1px solid var(--paper-a08);
  --hairline-dark-strong:1px solid var(--paper-a14);
  --hairline-light:1px solid var(--ink-a08);
  --hairline-light-strong:1px solid var(--ink-a14);

  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(7,9,21,.06);
  --shadow-md:0 4px 12px rgba(7,9,21,.08);
  --shadow-lg:0 16px 40px rgba(7,9,21,.14);
  --shadow-panel:0 24px 64px rgba(7,9,21,.5);

  --glow-cyan:0 0 0 1px var(--cyan-a40),0 0 24px var(--cyan-a24);
  --glow-focus:0 0 0 2px var(--navy-800),0 0 0 4px var(--cyan-500);
  --inset-top:inset 0 1px 0 var(--paper-a08);

  /* Blueprint grid — from the desktop wallpaper. Layer over --navy-800. */
  --grid-line:rgba(64,162,206,.055);
  --grid-size:64px;
  --bg-grid:linear-gradient(var(--grid-line) 1px,transparent 1px) 0 0/var(--grid-size) var(--grid-size),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) 0 0/var(--grid-size) var(--grid-size);
  --bg-scan:repeating-linear-gradient(180deg,rgba(245,246,250,.02) 0 1px,transparent 1px 3px);
}

:root{
  /* Mechanical, not playful. No bounce, no overshoot. */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
  --dur-instant:80ms; /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-med:200ms; /* @kind other */
  --dur-slow:320ms; /* @kind other */
  --transition-control:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
}

/* Semantic aliases. Defaults are the dark ("instrument") theme — Tempest's home ground.
   Wrap a subtree in .t-light for the paper theme. */
:root{
  --bg-page:var(--navy-800);
  --bg-surface:var(--navy-700);
  --bg-surface-raised:var(--navy-600);
  --bg-surface-sunken:var(--navy-900);
  --bg-input:var(--navy-900);
  --bg-hover:rgba(245,246,250,.05);
  --bg-active:rgba(245,246,250,.09);
  --bg-selected:var(--cyan-a12);

  --text-heading:var(--paper-050);
  --text-body:rgba(245,246,250,.82);
  --text-muted:var(--slate-400);
  --text-faint:var(--slate-500);
  --text-inverse:var(--ink-900);
  --text-accent:var(--cyan-500);
  --text-link:var(--cyan-400);
  --text-link-hover:var(--paper-050);

  --border-subtle:var(--paper-a08);
  --border-default:var(--paper-a14);
  --border-strong:var(--navy-400);
  --border-accent:var(--cyan-500);

  --surface-card:var(--navy-700);
  --surface-card-border:var(--paper-a08);
  --surface-overlay:rgba(7,9,21,.72);

  --accent-primary:var(--cyan-500);
  --accent-primary-hover:var(--cyan-400);
  --accent-primary-press:var(--cyan-600);
  --accent-secondary:var(--violet-500);
  --accent-tertiary:var(--indigo-500);
  --on-accent:var(--navy-900);

  --status-success:var(--green-500);
  --status-warning:var(--amber-500);
  --status-danger:var(--red-500);
  --status-info:var(--cyan-500);

  --focus-ring:var(--glow-focus);
}
.t-light{
  --bg-page:var(--paper-050);
  --bg-surface:var(--paper-000);
  --bg-surface-raised:var(--paper-000);
  --bg-surface-sunken:var(--paper-100);
  --bg-input:var(--paper-000);
  --bg-hover:rgba(22,24,29,.04);
  --bg-active:rgba(22,24,29,.07);
  --bg-selected:var(--cyan-a12);

  --text-heading:var(--ink-900);
  --text-body:var(--slate-700);
  --text-muted:var(--slate-600);
  --text-faint:var(--slate-500);
  --text-inverse:var(--paper-050);
  --text-accent:var(--indigo-600);
  --text-link:var(--indigo-600);
  --text-link-hover:var(--violet-500);

  --border-subtle:var(--ink-a08);
  --border-default:var(--ink-a14);
  --border-strong:var(--paper-300);
  --border-accent:var(--indigo-600);

  --surface-card:var(--paper-000);
  --surface-card-border:var(--ink-a08);
  --surface-overlay:rgba(11,14,30,.5);

  --accent-primary:var(--indigo-600);
  --accent-primary-hover:var(--indigo-500);
  --accent-primary-press:#16226f;
  --on-accent:var(--paper-050);

  --focus-ring:0 0 0 2px var(--paper-050),0 0 0 4px var(--indigo-600);
}

/* Minimal element defaults. Components carry their own styling. */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--bg-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-normal)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--text-heading);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-snug);margin:0 0 var(--space-4)}
h1{font-size:var(--text-4xl);letter-spacing:var(--tracking-tightest)}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-xl)}
h4{font-size:var(--text-lg)}
p{margin:0 0 var(--space-5);text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--cyan-a40);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:currentColor}
code,kbd,pre,samp{font-family:var(--font-mono);font-size:.92em}
::selection{background:var(--cyan-a40);color:var(--paper-050)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
hr{border:0;border-top:1px solid var(--border-subtle);margin:var(--space-8) 0}
.t-grid-bg{background-color:var(--navy-800);background-image:var(--bg-grid)}
.t-eyebrow{font-family:var(--font-display);font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-accent)}
.t-notch{clip-path:var(--notch-clip)}

body{margin:0;background:var(--navy-800);color:var(--text-body);font-family:var(--font-body)}
a{color:var(--cyan-500)}a:hover{color:var(--cyan-400)}
.wrap{max-width:1240px;margin:0 auto}
.sp{flex:1}
.hdr{position:sticky;top:0;z-index:40;background:rgba(11,14,30,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle)}
.hdr-row{display:flex;align-items:center;gap:40px;height:72px;padding:0 32px}
.hdr-logo{display:flex;border-bottom:0}
.hdr-logo img{height:38px;display:block}
.hdr-nav{display:flex;align-items:center;gap:28px}
.nl{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;border-bottom:0;text-decoration:none}
.nl:hover{color:var(--paper-050)}
.nl.on{color:var(--paper-050)}
.hdr-mail{font-family:var(--font-mono);font-size:12px;color:var(--cyan-500);border-bottom:0;text-decoration:none}
.hdr-mail-m{display:none}
.hdr-nav-m{display:none}
.sec{padding:96px 32px;border-bottom:1px solid var(--border-subtle)}
.sec-hero{padding:120px 32px 96px}
.sec-tight{padding:96px 32px 72px}
.sec-body{padding:72px 32px 96px}
.sec-cta{padding:110px 32px}
.nb{border-bottom:0}
.grid-bg{background-color:var(--navy-800);background-image:var(--bg-grid)}
.h1-hero{margin:0;font-family:var(--font-display);font-weight:600;line-height:var(--leading-tight);letter-spacing:var(--tracking-tightest);color:var(--text-heading);text-wrap:pretty;font-size:clamp(var(--text-3xl),4.4vw,var(--text-5xl))}
.h1{margin:0;font-family:var(--font-display);font-weight:600;line-height:var(--leading-tight);letter-spacing:var(--tracking-tightest);color:var(--text-heading);text-wrap:pretty;font-size:clamp(var(--text-2xl),3.4vw,var(--text-4xl))}
.h2{margin:0;font-family:var(--font-display);font-weight:600;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text-heading);text-wrap:pretty;font-size:clamp(var(--text-xl),2.6vw,var(--text-3xl))}
.h2-sm{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:var(--tracking-tight);color:var(--text-heading);text-wrap:pretty;font-size:var(--text-2xl)}
.h3{margin:0 0 10px;font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;color:var(--text-heading)}
.lead{margin:0;line-height:var(--leading-relaxed);color:var(--text-body);font-size:clamp(var(--text-base),1.4vw,var(--text-lg))}
.bp{margin:0;font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-body)}
.sm{margin:0;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--control-h-lg);padding:0 24px;font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);letter-spacing:var(--tracking-wider);text-transform:uppercase;white-space:nowrap;background:var(--accent-primary);color:var(--on-accent);border:1px solid transparent;clip-path:var(--notch-clip-tr);text-decoration:none;border-bottom:0;transition:var(--transition-control);max-width:100%}
.btn:hover{background:var(--accent-primary-hover);color:var(--on-accent)}
.btn:active{background:var(--accent-primary-press)}
.card{position:relative;background:var(--surface-card);border:1px solid var(--surface-card-border);border-radius:var(--radius-md);padding:var(--space-8)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.g2w{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.g2x{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.g3c{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.split{display:grid;grid-template-columns:320px 1fr;gap:40px}
.contact-g{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
.about-hero{display:flex;gap:56px;align-items:flex-start}
.ph{display:flex;align-items:center;justify-content:center;background:var(--navy-700);border:1px dashed var(--border-default);color:var(--text-faint);font-family:var(--font-mono);font-size:12px;text-align:center;padding:12px;box-sizing:border-box}
.imgbox{width:100%;aspect-ratio:4/3;border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden}
.imgbox .ph{width:100%;height:100%;border:0}
.cta-col{text-align:center;display:flex;flex-direction:column;align-items:center}
.cred{padding:28px 32px;border-bottom:1px solid var(--border-subtle)}
.cred .wrap{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);text-align:center;line-height:1.9}
.ftr{background:var(--bg-page);color:var(--text-body);padding:40px 32px;border-top:1px solid var(--border-subtle)}
.fcol{display:flex;flex-direction:column;gap:6px}
.fline{font-size:13px;line-height:1.6;color:var(--text-body)}
.fmeta{display:flex;gap:12px;margin-top:10px;font-family:var(--font-mono);font-size:11px;color:var(--text-faint)}
.fmeta a{color:var(--text-faint)}
@media(max-width:1180px){.hdr-mail{display:none}}
@media(max-width:1080px){.g4{grid-template-columns:1fr 1fr}}
@media(max-width:960px){.contact-g{grid-template-columns:1fr;gap:40px}.split{grid-template-columns:1fr;gap:16px}.g2x{grid-template-columns:1fr;gap:20px}.g3{gap:36px}}
@media(max-width:768px){
.hdr-row{height:56px;padding:0 16px;gap:16px}
.hdr-logo img{height:30px}
.hdr-nav{display:none}
.hdr-mail-m{display:flex;align-items:center;min-height:44px;font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-500);border-bottom:0;text-decoration:none}
.hdr-nav-m{display:flex;align-items:center;gap:24px;height:44px;padding:0 16px;overflow-x:auto;border-top:1px solid var(--border-subtle)}
.hdr-nav-m .nl{min-height:44px;display:flex;align-items:center}
.sec,.sec-hero,.sec-tight,.sec-body{padding:64px 20px}
.sec-cta{padding:72px 20px}
.g2,.g2w,.g3c,.g4{grid-template-columns:1fr;gap:16px}
.g3{grid-template-columns:1fr;gap:32px}
.about-hero{flex-direction:column;gap:32px}
.cred{padding:24px 20px}
.cred .wrap{font-size:11px}
.ftr{padding:32px 20px}
.btn{white-space:normal;text-align:center;height:auto;min-height:var(--control-h-lg);padding:10px 20px}
}

/* SEO / a11y additions */
h2.t-eyebrow{margin:0;line-height:1.4}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--accent-primary);color:var(--on-accent);padding:8px 14px;font-family:var(--font-display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:0}
.skip:focus{left:8px}