/* ==========================================================================
   Paul Gamuza — design system
   Tokens → base → layout → components → pages
   Fonts are self-hosted (SIL Open Font License, see assets/fonts/OFL-*.txt)
   ========================================================================== */

@font-face{font-family:"Bricolage Grotesque";src:url("../assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("../assets/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("../assets/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  /* Colour: paper / ink / navy / one restrained amber */
  --paper:#f4f1ea;
  --paper-2:#ece8de;
  --card:#fbfaf6;
  --ink:#16212b;
  --navy:#0c2b45;
  --navy-hover:#163d60;
  --muted:#505c67;
  --line:#d7d1c4;
  --line-strong:#b9b2a3;
  --amber:#8a5200;          /* text-safe on paper (≥4.5:1) */
  --amber-bright:#e3a13f;   /* marks and dark surfaces only */
  --ok:#2f6b4f;
  --warn-bg:#fff6e6; --warn-line:#e3c48a;
  --err:#a3271f; --err-bg:#fdf0ee;

  --night:#0d1822;
  --night-line:rgba(233,230,221,.14);
  --on-night:#ebe8df;
  --on-night-muted:#a3b2be;

  /* Type */
  --font-display:"Bricolage Grotesque","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-text:"Source Serif 4","Iowan Old Style",Charter,Georgia,serif;
  --font-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  --step--1:.875rem;
  --step-0:clamp(1.0625rem,1.03rem + .15vw,1.1563rem);
  --step-1:clamp(1.1875rem,1.12rem + .35vw,1.375rem);
  --step-2:clamp(1.625rem,1.35rem + 1.3vw,2.375rem);
  --step-3:clamp(2.25rem,1.6rem + 3vw,3.75rem);

  /* Space (4px base) */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem;
  --section:clamp(4rem,8vw,7rem);

  --container:1200px;
  --gutter:clamp(1rem,4vw,3rem);
  --measure:62ch;

  --r-s:6px; --r-m:12px;
  --border:1px solid var(--line);
  --shadow:0 1px 2px rgba(22,33,43,.06),0 18px 40px -18px rgba(22,33,43,.28);

  --ease:cubic-bezier(.2,.7,.2,1);
  --fast:160ms; --med:300ms;
}

/* Base ------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-text);font-size:var(--step-0);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
p a,li a,dd a{color:var(--navy);text-decoration:underline}
p a:hover,li a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:var(--step-3);font-weight:650;letter-spacing:-.035em;line-height:1.04}
h2{font-size:var(--step-2)}
h3{font-size:var(--step-1);letter-spacing:-.012em;line-height:1.25}
p{text-wrap:pretty}
strong{font-weight:650}

:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:2px}
.lab :focus-visible,.cta-band :focus-visible,.site-footer :focus-visible{outline-color:var(--amber-bright)}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--s-4);top:-4rem;z-index:100;background:var(--navy);color:#fff;padding:.75rem 1rem;border-radius:var(--r-s);transition:top var(--fast)}
.skip-link:focus{top:var(--s-4)}

.container{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}

/* Shared pieces ---------------------------------------------------------- */
.eyebrow{font-family:var(--font-display);font-size:var(--step--1);font-weight:600;letter-spacing:.01em;color:var(--amber);margin-bottom:var(--s-4);display:flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:1.25rem;height:2px;background:var(--amber-bright);flex:none}
.tag{font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.lead{font-size:var(--step-1);line-height:1.5;color:var(--muted);max-width:var(--measure)}
.lead-ink{color:var(--ink)}
.keywords{font-family:var(--font-mono);font-size:.8125rem;color:var(--muted);letter-spacing:.01em;line-height:1.7}
.fine{font-size:.9375rem;color:var(--muted)}
.arrow{display:inline-block;transition:transform var(--fast) var(--ease)}
.num{font-family:var(--font-mono);font-size:.8125rem;font-weight:500;color:var(--amber);letter-spacing:.06em}
.problem{color:var(--muted);font-style:italic}
.note{padding:var(--s-4) var(--s-5);background:var(--card);border:var(--border);border-left:3px solid var(--amber-bright);border-radius:var(--r-s);font-size:1rem;max-width:var(--measure)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:.75rem 1.4rem;border:1px solid transparent;border-radius:var(--r-s);font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:background var(--fast),color var(--fast),border-color var(--fast)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-hover)}
.btn-primary[disabled]{opacity:.7;cursor:progress}
.btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-light{background:var(--paper);color:var(--navy)}
.btn-light:hover{background:#fff}
.btn-sm{min-height:44px;padding:.55rem 1rem;font-size:.9375rem}
.btn:hover .arrow{transform:translateX(4px)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}

.text-link{display:inline-flex;gap:.4em;align-items:baseline;font-family:var(--font-display);font-weight:600;color:var(--navy);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size var(--med) var(--ease)}
.text-link:hover{background-size:0 1px;background-position:100% 100%}
.text-link:hover .arrow{transform:translateX(3px)}
.text-link-muted{color:var(--muted)}

/* Header ----------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid transparent;transition:border-color var(--fast)}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);min-height:68px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;min-height:44px}
.brand img{width:auto;height:34px}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.02em}
.nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem);font-family:var(--font-display);font-weight:500;font-size:1rem}
.nav a{text-decoration:none;color:var(--ink);min-height:44px;display:inline-flex;align-items:center;background:linear-gradient(var(--amber-bright),var(--amber-bright)) 0 calc(100% - .55rem)/0 2px no-repeat;transition:background-size var(--med) var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{background-size:100% 2px}
.nav .nav-cta{padding:.5rem 1rem;background:var(--navy);color:#fff;border-radius:var(--r-s);transition:background var(--fast)}
.nav .nav-cta:hover,.nav .nav-cta[aria-current="page"]{background:var(--navy-hover);background-size:auto}
.menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line-strong);background:none;border-radius:var(--r-s);color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.menu-bars,.menu-bars::before,.menu-bars::after{display:block;width:18px;height:2px;background:currentColor;transition:transform var(--fast),opacity var(--fast)}
.menu-bars{position:relative}
.menu-bars::before,.menu-bars::after{content:"";position:absolute;left:0}
.menu-bars::before{top:-6px}.menu-bars::after{top:6px}
.menu-toggle[aria-expanded="true"] .menu-bars{background:transparent}
.menu-toggle[aria-expanded="true"] .menu-bars::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-bars::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:820px){
  .menu-ready .menu-toggle{display:inline-flex}
  .menu-ready .nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding-bottom:var(--s-4);border-top:var(--border)}
  .menu-ready .nav.is-open{display:flex}
  .menu-ready .nav a{padding:.85rem 0;border-bottom:var(--border);background-image:none}
  .menu-ready .nav a[aria-current="page"]{font-weight:700}
  .menu-ready .nav .nav-cta{margin-top:var(--s-4);justify-content:center;padding:.85rem 1rem;border-bottom:0}
  html:not(.menu-ready) .nav{width:100%;flex-wrap:wrap;gap:0 1.25rem}
}

/* Sections --------------------------------------------------------------- */
.section{padding-block:var(--section)}
.section-tight{padding-block:clamp(3.5rem,6vw,5rem)}
.section-flush-top{padding-top:0}
.section-alt{background:var(--paper-2);border-block:var(--border)}
.section-head{margin-bottom:var(--s-7)}
.section-head h2{max-width:24ch}
.section-head-split{display:grid;gap:var(--s-5)}
.section-intro{font-family:var(--font-display);font-size:var(--step-1);font-weight:500;line-height:1.35;letter-spacing:-.01em;max-width:34ch;padding-left:var(--s-5);border-left:3px solid var(--amber-bright)}
@media (min-width:900px){.section-head-split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end;gap:var(--s-8)}}
.more-link{margin-top:var(--s-6)}

/* Hero */
.hero{position:relative;padding-block:clamp(2.5rem,6vw,5.5rem) clamp(3.5rem,7vw,6rem);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.4;-webkit-mask-image:radial-gradient(ellipse 60% 75% at 85% 30%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse 60% 75% at 85% 30%,#000 0%,transparent 70%)}
.hero-grid{position:relative;display:grid;gap:var(--s-7);align-items:center}
@media (min-width:980px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s-8)}}
.hero h1{max-width:15ch}
.mark{background:linear-gradient(transparent 84%,var(--amber-bright) 84%,var(--amber-bright) 93%,transparent 93%)}
.hero .lead{margin-top:var(--s-5)}
.hero-note{margin-top:var(--s-5);font-size:.9375rem;color:var(--muted)}
.figure-note{margin-top:var(--s-4);font-size:.9375rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.25rem .6rem;align-items:baseline}

/* Browser-framed screenshot */
.browser{border-radius:var(--r-m);overflow:hidden;background:#fff;border:var(--border);box-shadow:var(--shadow)}
.browser-bar{display:flex;align-items:center;gap:6px;padding:.55rem .8rem;background:var(--paper-2);border-bottom:var(--border)}
.browser-bar span{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.browser-bar em{min-width:0;margin-left:.6rem;font-style:normal;font-family:var(--font-mono);font-size:.6875rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Who I help */
.who-grid{display:grid;gap:var(--s-5)}
@media (min-width:900px){.who-grid{grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-6)}}
.who{padding-top:var(--s-5);border-top:1px solid var(--line-strong)}
.who h3{margin-bottom:var(--s-3)}
.who p{color:var(--muted)}
.who-main{border-top:2px solid var(--ink)}
.who-main p{color:var(--ink)}

/* Service cards */
.service-cards{display:grid;gap:var(--s-5)}
@media (min-width:900px){.service-cards{grid-template-columns:repeat(3,1fr)}}
.service-card{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-6);background:var(--card);border:var(--border);border-radius:var(--r-m)}
.service-card .text-link{margin-top:auto;align-self:flex-start;padding-top:var(--s-3)}
.service-card p:not(.problem){font-size:1rem;color:var(--ink)}

/* Case cards */
.case-card{display:grid;gap:var(--s-6);align-items:center;padding:var(--s-5);background:var(--card);border:var(--border);border-radius:var(--r-m)}
@media (min-width:900px){.case-card{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);padding:var(--s-7);gap:var(--s-7)}}
.case-card h2,.case-card h3{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.25rem);letter-spacing:-.028em;margin-block:var(--s-3)}
.case-card-copy>p:not(.tag){color:var(--ink)}
.case-links{display:flex;flex-wrap:wrap;gap:var(--s-5);margin-top:var(--s-5)}
.case-card-visual{display:block;border-radius:var(--r-s);overflow:hidden;border:var(--border);box-shadow:var(--shadow)}
.case-card-visual img{transition:transform 600ms var(--ease)}
.case-card:hover .case-card-visual img{transform:scale(1.015)}
.case-facts{display:grid;gap:var(--s-4);margin-top:var(--s-4)}
.case-facts div{padding-top:var(--s-3);border-top:var(--border)}
.case-facts dt,.case-meta dt{font-family:var(--font-display);font-weight:600;font-size:var(--step--1);color:var(--muted);margin-bottom:var(--s-1)}

/* Steps */
.steps{display:grid;gap:var(--s-5);counter-reset:step}
@media (min-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:step;padding-top:var(--s-5);border-top:2px solid var(--ink)}
.steps li::before{content:counter(step,decimal-leading-zero);display:block;font-family:var(--font-mono);font-size:.8125rem;font-weight:500;color:var(--amber);margin-bottom:var(--s-3)}
.steps h3{margin-bottom:var(--s-2)}
.steps p{font-size:1rem;color:var(--muted)}

/* About teaser + FAQ */
.about-teaser,.lab-teaser,.about-grid{display:grid;gap:var(--s-6)}
@media (min-width:980px){.about-teaser,.lab-teaser,.about-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-9)}}
.about-teaser p+p,.lab-teaser p+p,.about-body p+p{margin-top:var(--s-4)}
.about-teaser p:not(.lead),.about-body p:not(.lead){max-width:var(--measure)}
.faq{border-top:1px solid var(--ink);max-width:860px}
.faq details{border-bottom:var(--border)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s-4);align-items:center;padding:var(--s-5) 0;min-height:44px;font-family:var(--font-display);font-weight:600;font-size:var(--step-1);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);font-weight:500;color:var(--amber);font-size:1.25rem;transition:transform var(--fast) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:var(--s-5);color:var(--muted);max-width:var(--measure)}

/* CTA band (dark) */
.cta-band{background:var(--night);color:var(--on-night);padding-block:var(--section)}
.cta-band h2{color:#fff;font-size:clamp(2rem,1.4rem + 3vw,3.75rem);letter-spacing:-.035em;max-width:17ch;line-height:1.04}
.cta-band .lead{color:var(--on-night-muted);margin-top:var(--s-5)}

/* Page hero (inner pages) */
.page-hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(2.5rem,5vw,4rem)}
.page-hero h1{max-width:20ch}
.page-hero .lead{margin-top:var(--s-5)}
.jump{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-6)}
.jump a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem .9rem;border:var(--border);border-radius:999px;background:var(--card);font-family:var(--font-display);font-weight:500;font-size:.9375rem;text-decoration:none;color:var(--ink);transition:border-color var(--fast)}
.jump a:hover{border-color:var(--ink)}
.breadcrumb{font-family:var(--font-display);font-size:var(--step--1);color:var(--muted);margin-bottom:var(--s-4)}
.breadcrumb a{color:var(--navy)}
.case-hero .tag{display:block;margin-bottom:var(--s-3)}

/* Services detail */
.service-detail{padding-block:clamp(3rem,6vw,5rem);border-top:var(--border)}
.service-grid{display:grid;gap:var(--s-5)}
@media (min-width:900px){.service-grid{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:var(--s-8)}.service-grid>header{position:sticky;top:6rem;align-self:start}}
.service-grid h2{margin-block:var(--s-2) var(--s-3)}
.service-body h3{font-size:1.0625rem;margin:var(--s-6) 0 var(--s-3)}
.service-body h3:first-child{margin-top:0}
.service-body .note,.service-body .keywords{margin-top:var(--s-5)}
.ticks li{position:relative;padding-left:1.6rem;margin-bottom:var(--s-2);max-width:var(--measure)}
.ticks li::before{content:"";position:absolute;left:0;top:.68em;width:.7rem;height:2px;background:var(--amber-bright)}
.scope-grid{display:grid;gap:var(--s-6)}
@media (min-width:760px){.scope-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.scope-grid{grid-template-columns:repeat(4,1fr)}}
.scope-grid>div{padding-top:var(--s-4);border-top:2px solid var(--ink)}
.scope-grid h3{margin-bottom:var(--s-2)}
.scope-grid p{font-size:1rem;color:var(--muted)}

/* Work: site list */
.websites-head{display:grid;gap:var(--s-3);margin-bottom:var(--s-6)}
.websites-head p{color:var(--muted);max-width:52ch}
@media (min-width:860px){.websites-head{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-6);align-items:end}}
.site-list{display:grid;border-top:1px solid var(--ink)}
@media (min-width:860px){.site-list{grid-template-columns:1fr 1fr;column-gap:var(--s-8)}}
.site-list a{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name arrow" "domain arrow" "role arrow";align-items:center;gap:.1rem var(--s-4);padding:var(--s-4) var(--s-2);border-bottom:var(--border);text-decoration:none;color:var(--ink);min-height:44px;transition:background var(--fast),padding var(--med) var(--ease)}
.site-name{grid-area:name;font-family:var(--font-display);font-weight:600;font-size:1.125rem;letter-spacing:-.015em}
.site-domain{grid-area:domain;font-family:var(--font-mono);font-size:.8125rem;color:var(--muted)}
.site-role{grid-area:role;font-size:.875rem;color:var(--amber)}
.site-list .arrow{grid-area:arrow;color:var(--muted)}
.site-list a:hover{background:var(--card);padding-left:var(--s-4)}
.site-list a:hover .arrow{transform:translate(3px,-3px);color:var(--amber)}
.section-alt .fine{margin-top:var(--s-5)}

/* Case study page */
.case-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-7);padding-bottom:var(--section)}
.case-layout > *{min-width:0}
@media (min-width:1000px){.case-layout{grid-template-columns:260px minmax(0,1fr);gap:var(--s-8)}.case-meta{position:sticky;top:6rem;align-self:start}}
.case-meta dl{display:grid;gap:var(--s-4);margin-bottom:var(--s-5)}
.case-meta dl div{padding-top:var(--s-3);border-top:var(--border)}
.case-meta dd{font-size:1rem}
.case-body{max-width:760px}
.case-body .browser{margin-bottom:var(--s-7)}
.case-body h2{font-size:var(--step-1);margin:var(--s-6) 0 var(--s-3)}
.case-body p{max-width:var(--measure)}
.case-body .fine{margin-top:var(--s-7);padding-top:var(--s-4);border-top:var(--border)}

/* Lab (dark surface) */
.lab{background:var(--night);color:var(--on-night);position:relative;overflow:hidden;padding-block:clamp(3rem,7vw,6rem)}
.lab::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:linear-gradient(var(--night-line) 1px,transparent 1px),linear-gradient(90deg,var(--night-line) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 50%);mask-image:linear-gradient(to bottom,#000,transparent 50%)}
.lab .container{position:relative}
.lab .eyebrow{color:var(--amber-bright)}
.lab h1,.lab h2{color:#fff}
.lab-head{max-width:46rem;margin-bottom:var(--s-8)}
.lab .lead{color:var(--on-night-muted);margin-top:var(--s-5)}
.lab-disclaimer{margin-top:var(--s-5);display:inline-block;padding:.5rem .9rem;border:1px solid var(--night-line);border-radius:var(--r-s);font-size:.9375rem;color:var(--on-night)}
.lab-list{display:grid;gap:var(--s-5)}
@media (min-width:860px){.lab-list{grid-template-columns:repeat(2,1fr)}}
.lab-card{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-6);background:rgba(255,255,255,.03);border:1px solid var(--night-line);border-radius:var(--r-m)}
.lab-card h2{font-size:var(--step-1)}
.lab-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);flex-wrap:wrap}
.lab-summary{color:var(--on-night);font-size:1rem;line-height:1.6}
.lab-label{font-family:var(--font-display);font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:var(--amber-bright);margin-top:var(--s-2)}
.lab-progress li{position:relative;padding-left:1.4rem;color:var(--on-night-muted);font-size:.9688rem;line-height:1.55;margin-bottom:.35rem}
.lab-progress li::before{content:"";position:absolute;left:0;top:.45em;width:.55rem;height:.3rem;border-left:2px solid #7fb59a;border-bottom:2px solid #7fb59a;transform:rotate(-45deg)}
.lab-next{margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--night-line);color:var(--on-night);font-size:.9688rem}
.lab-next .lab-label{display:block;margin:0 0 .2rem}
.lab-asof{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-night-muted)}
.status{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-muted);white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--on-night-muted)}
.status-in-use{color:var(--amber-bright)}.status-in-use::before{background:var(--amber-bright)}
.status-active{color:#a9d4bd}.status-active::before{background:#7fb59a}
.status-prototype::before{background:#8fb3d9}
.status-awaiting-hardware::before{background:transparent;box-shadow:inset 0 0 0 2px #8fb3d9}
.status-on-hold::before{background:transparent;box-shadow:inset 0 0 0 1px var(--on-night-muted)}
.status-idea::before{background:transparent;box-shadow:inset 0 0 0 1px var(--on-night-muted);border-radius:1px}
.status-key{display:grid;gap:var(--s-4);margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--night-line);font-size:.9375rem;color:var(--on-night-muted)}
@media (min-width:760px){.status-key{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.status-key{grid-template-columns:repeat(3,1fr)}}
.status-key div{display:grid;gap:.25rem}

/* Contact */
.contact-grid{display:grid;gap:var(--s-7)}
@media (min-width:980px){.contact-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s-8)}}
.inquiry[hidden]{display:none}
.notice{padding:var(--s-5);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r-s)}
.inquiry{display:grid;gap:var(--s-5);padding:clamp(1.25rem,3vw,2.25rem);background:var(--card);border:var(--border);border-radius:var(--r-m)}
.form-note{font-size:.9375rem;color:var(--muted)}
.field{display:grid;gap:.4rem}
.field-row{display:grid;gap:var(--s-5)}
@media (min-width:600px){.field-row{grid-template-columns:1fr 1fr}}
.field label{font-family:var(--font-display);font-weight:600;font-size:1rem}
.req{color:var(--amber)}
.opt,.hint{font-weight:400;color:var(--muted);font-size:.9375rem}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:.7rem .85rem;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--line-strong);border-radius:var(--r-s);transition:border-color var(--fast),box-shadow var(--fast)}
.field textarea{resize:vertical;min-height:9rem;line-height:1.5}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 1.15rem) 55%,calc(100% - .8rem) 55%;background-size:.35rem .35rem;background-repeat:no-repeat;padding-right:2.25rem}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(12,43,69,.25)}
.field [aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.field-error{color:var(--err);font-size:.9375rem;font-family:var(--font-display);font-weight:500}
.field-error::before{content:"! ";font-weight:700}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.inquiry .btn{justify-self:start}
.form-error-summary{padding:var(--s-5);border:2px solid var(--err);border-radius:var(--r-s);background:var(--err-bg)}
.form-error-summary h2{font-size:1.125rem;margin-bottom:var(--s-2)}
.form-error-summary li{margin-top:.25rem}
.form-error-summary a{color:var(--err);font-weight:600}
.form-status{padding:var(--s-5);border-radius:var(--r-s);display:grid;gap:var(--s-3)}
.form-status[hidden],.form-error-summary[hidden]{display:none}
.form-status-title{font-family:var(--font-display);font-weight:650;font-size:1.125rem}
.form-status-success{background:#edf6f0;border:1px solid #9cc9ae;border-left:4px solid var(--ok)}
.form-status-pending,.form-status-ready{background:var(--warn-bg);border:1px solid var(--warn-line);border-left:4px solid var(--amber)}
.form-status-error{background:var(--err-bg);border:1px solid #e3b1ab;border-left:4px solid var(--err)}
.form-status-actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.contact-aside h2{font-size:var(--step-1);margin-bottom:var(--s-4)}
.contact-aside h2:not(:first-child){margin-top:var(--s-7)}
.next-steps{counter-reset:n;display:grid;gap:var(--s-4)}
.next-steps li{counter-increment:n;display:grid;grid-template-columns:2rem 1fr;gap:var(--s-3)}
.next-steps li::before{content:counter(n);display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:600;font-size:.875rem}
.aside-note{margin-top:var(--s-4);color:var(--muted);font-size:1rem}
.contact-aside .fine{margin-top:var(--s-4)}
.contact-aside a{overflow-wrap:anywhere}

/* Footer ----------------------------------------------------------------- */
.site-footer{background:var(--night);color:var(--on-night-muted);border-top:1px solid var(--night-line);padding-block:var(--s-7) var(--s-6);font-size:.9375rem}
.footer-grid{display:grid;gap:var(--s-5)}
@media (min-width:900px){.footer-grid{grid-template-columns:minmax(0,1.4fr) auto;align-items:start;gap:var(--s-7)}.copyright{grid-column:1/-1}}
.footer-name{font-family:var(--font-display);font-weight:700;color:var(--on-night);font-size:1.0625rem}
.footer-sub{max-width:44ch;margin-top:var(--s-2)}
.footer-mail{margin-top:var(--s-3)}
.footer-mail a,.footer-nav a{color:var(--on-night);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;transition:color var(--fast)}
.footer-mail a{text-decoration:underline;overflow-wrap:anywhere}
.footer-nav{display:flex;flex-wrap:wrap;gap:0 var(--s-5)}
.footer-nav a{color:var(--on-night-muted)}
.footer-nav a:hover,.footer-mail a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.copyright{font-family:var(--font-mono);font-size:.75rem;padding-top:var(--s-4);border-top:1px solid var(--night-line)}

/* Motion ----------------------------------------------------------------- */
.reveal-ready .reveal{opacity:0;transform:translateY(10px);transition:opacity var(--med) var(--ease),transform var(--med) var(--ease)}
.reveal-ready .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal-ready .reveal{opacity:1;transform:none}
}

/* Hero topography (real Morongo Basin contours) -------------------------- */
.hero-has-topo::before{display:none}
.hero-topo{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.45) 35%,#000 62%);
          mask-image:linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.45) 35%,#000 62%)}
.hero-topo svg{position:absolute;inset:-3% -3%;width:106%;height:106%}
.topo-minor,.topo-major{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.topo-minor{stroke:#b4ab99;stroke-width:1;opacity:.55}
.topo-major{stroke:#c08a3e;stroke-width:1.4;opacity:.55}
.topo-caption{position:relative;margin-top:var(--s-7);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;color:var(--muted)}
@media (max-width:979px){.hero-topo{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.25) 45%,#000 70%);mask-image:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.25) 45%,#000 70%)}}

/* Motion: a one-time reveal sweep, then a very slow drift. Paused off-screen and for reduced motion. */
.js .hero-topo svg{animation:topo-drift 60s ease-in-out infinite alternate}
.js .hero-topo{animation:topo-reveal 2.2s var(--ease) both}
@keyframes topo-reveal{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes topo-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2.5%,1%,0) scale(1.03)}}

/* Dusk hero (default) */
.hero{background:linear-gradient(180deg,#0b1621 0%,#0f2034 48%,#1d2a3b 78%,#3a3330 100%);color:var(--on-night)}
.hero .hero-topo{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.6) 35%,#000 62%);mask-image:linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.6) 35%,#000 62%)}
.hero .topo-minor{stroke:#e9e4d6;opacity:.14}
.hero .topo-major{stroke:var(--amber-bright);opacity:.4}
.hero h1{color:#fff}
.hero .eyebrow{color:var(--amber-bright)}
.hero .lead,.hero .hero-note,.hero .figure-note,.hero .topo-caption{color:var(--on-night-muted)}
.hero .figure-note a{color:#fff}
.hero .tag{color:var(--on-night-muted)}
.hero .btn-primary{background:var(--amber-bright);color:#14100a}
.hero .btn-primary:hover{background:#f0b45a}
.hero .btn-ghost{border-color:rgba(235,232,223,.6);color:#fff}
.hero .btn-ghost:hover{background:#fff;color:var(--night)}
.hero :focus-visible{outline-color:var(--amber-bright)}
.hero .browser{border-color:rgba(235,232,223,.15)}
.site-header{background:#0b1621;border-bottom-color:var(--night-line)}
.site-header .brand-name,.nav a{color:var(--on-night)}
.nav .nav-cta{background:var(--amber-bright);color:#14100a}
.menu-toggle{color:var(--on-night);border-color:var(--night-line)}
.brand img{filter:invert(1) hue-rotate(180deg)}
.site-header :focus-visible{outline-color:var(--amber-bright)}
@media (max-width:820px){.menu-ready .nav{border-top-color:var(--night-line)}.menu-ready .nav a{border-bottom-color:var(--night-line)}}

/* Ridge silhouette, Joshua tree, stars */
.hero{padding-bottom:clamp(8rem,14vw,13rem)}
.hero-ridge{position:absolute;left:0;right:0;bottom:-1px;height:clamp(120px,14vw,270px);pointer-events:none}
.hero-ridge svg{width:100%;height:100%;display:block}
.ridge-back{fill:#16253a}
.ridge-front{fill:var(--paper)}
.jtree .jt-trunk{fill:none;stroke:var(--paper);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.jtree .jt-leaves{fill:none;stroke:var(--paper);stroke-width:1.1;stroke-linecap:round}
.topo-caption{position:relative;z-index:1}
.js .stars .tw{animation:twinkle 4.5s ease-in-out infinite}
.js .stars .tw2{animation-delay:1.6s}.js .stars .tw3{animation-delay:3.1s}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.85}}
@media (max-width:979px){.hero{padding-bottom:6.5rem}.hero-ridge{height:110px}.hero-sky{height:340px}}

/* Night sky layer: stars + shooting stars (not masked, not drifting) */
.hero-sky{position:absolute;inset:0 0 auto 0;height:min(78%,700px);pointer-events:none}
.hero-sky svg{width:100%;height:100%;display:block}
.stars circle{fill:#fff;opacity:.6}
.meteor{display:none}
.js .meteor{display:inline}
.meteor-head{fill:#fff;filter:drop-shadow(0 0 4px rgba(255,255,255,.95)) drop-shadow(0 0 10px rgba(240,180,90,.6))}
.meteor-body{opacity:0;animation:meteor 12s cubic-bezier(.3,.1,.5,1) infinite both}
.m2 .meteor-body{animation-duration:17s;animation-delay:5.5s}
.m3 .meteor-body{animation-duration:21s;animation-delay:11s}
@keyframes meteor{
  0%{opacity:0;transform:translateX(-120px)}
  1%{opacity:1}
  7%{opacity:0;transform:translateX(380px)}
  100%{opacity:0;transform:translateX(380px)}}
.js .stars{animation:star-drift 70s linear infinite alternate}
@keyframes star-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-40px,24px,0)}}
.ridge-signal{fill:none;stroke:var(--amber-bright);stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(227,161,63,.9)) drop-shadow(0 0 12px rgba(227,161,63,.45))}
.ridge-spark{fill:#fff;opacity:0;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px rgba(240,180,90,.8))}
.footer-art{margin-top:var(--s-3);font-size:.8125rem;color:var(--on-night-muted);max-width:44ch}
/* Distant airplanes: navigation lights only. Three on long, offset cycles so it rarely shows more than one. */
.hero-planes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.plane{position:absolute;display:none;align-items:center;gap:3px;opacity:0;will-change:transform,opacity}
.js .plane{display:flex}
.plane i{display:block;border-radius:50%}
.pl-dot{width:2px;height:2px;background:rgba(255,255,255,.4)}
.pl-strobe{width:3px;height:3px;background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.9);opacity:0;animation:pl-strobe 1.5s steps(1,end) infinite}
.pl-beacon{width:3px;height:3px;background:#ff5a4f;box-shadow:0 0 6px 1px rgba(255,90,79,.85);opacity:.15;animation:pl-beacon 2.2s ease-in-out infinite}
.p2 .pl-strobe{animation-duration:1.7s}.p2 .pl-beacon{animation-duration:2.6s}
.p3 .pl-strobe{animation-duration:1.3s}.p3 .pl-beacon{animation-duration:2s}
/* p1: right side, right-to-left, fades before the panel's left edge */
.p1{top:15%;left:0;animation:fly-p1 60s linear 3s infinite both}
@keyframes fly-p1{0%{opacity:0;transform:translate(102vw,0)}2%{opacity:1}32%{opacity:.9}40%{opacity:0;transform:translate(56vw,-22px)}100%{opacity:0;transform:translate(56vw,-22px)}}
/* p2: left side, high above the headline, left-to-right */
.p2{top:5.5%;left:0;flex-direction:row-reverse;animation:fly-p2 74s linear 24s infinite both}
@keyframes fly-p2{0%{opacity:0;transform:translate(-2vw,8px)}3%{opacity:.85}38%{opacity:.8}46%{opacity:0;transform:translate(44vw,-6px)}100%{opacity:0;transform:translate(44vw,-6px)}}
/* p3: very high and far, crossing most of the sky */
.p3{top:3%;left:0;transform:scale(.8);animation:fly-p3 96s linear 52s infinite both}
@keyframes fly-p3{0%{opacity:0;transform:translate(-3vw,0) scale(.8)}3%{opacity:.6}45%{opacity:.6}52%{opacity:0;transform:translate(96vw,10px) scale(.8)}100%{opacity:0;transform:translate(96vw,10px) scale(.8)}}
@keyframes pl-strobe{0%{opacity:1}6%{opacity:0}12%{opacity:1}18%,100%{opacity:0}}
@keyframes pl-beacon{0%,100%{opacity:.15}12%{opacity:1}30%{opacity:.15}}
@media (max-width:700px){.js .p3{display:none}}
@media (prefers-reduced-motion:reduce){.meteors,.ridge-spark,.hero-planes{display:none}.ridge-signal{stroke-dasharray:none;opacity:.35}}

/* Hero project log (example activity panel) */
.projlog{position:relative;background:linear-gradient(180deg,rgba(17,31,48,.82),rgba(11,22,33,.9));border:1px solid rgba(235,232,223,.14);border-radius:var(--r-m);box-shadow:0 30px 60px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--on-night);overflow:hidden}
.projlog-head,.projlog-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:.85rem 1.1rem}
.projlog-head{border-bottom:1px solid var(--night-line)}
.projlog-title{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:600;font-size:.9375rem}
.live-dot{width:8px;height:8px;border-radius:50%;background:#7fd1a1;box-shadow:0 0 0 0 rgba(127,209,161,.6)}
.js .live-dot{animation:live 2.4s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(127,209,161,.55)}70%,100%{box-shadow:0 0 0 8px rgba(127,209,161,0)}}
.projlog-pill{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-muted);border:1px solid var(--night-line);border-radius:999px;padding:.2rem .6rem}
.projlog-chart{padding:1rem 1.1rem .6rem;border-bottom:1px solid var(--night-line)}
.projlog-chart-label{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--on-night-muted);margin-bottom:.5rem;font-family:var(--font-display)}
.projlog-chart-label .up{color:#7fd1a1}
.projlog-chart svg{width:100%;height:64px;display:block;overflow:visible}
.pl-area{fill:url(#pl-fill)}
.pl-line{fill:none;stroke:var(--amber-bright);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.js .pl-line{animation:pl-draw 2.4s var(--ease) .4s both}
.pl-end{fill:#fff;filter:drop-shadow(0 0 4px rgba(227,161,63,.9))}
.js .pl-end{animation:pl-pop .4s var(--ease) 2.6s both}
@keyframes pl-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pl-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
.pl-end{transform-box:fill-box;transform-origin:center}
.projlog-feed{display:block}
.projlog-feed li{display:grid;grid-template-columns:6.6rem 1fr auto;gap:var(--s-3);align-items:baseline;padding:.72rem 1.1rem;border-bottom:1px solid var(--night-line);font-size:.9375rem;line-height:1.4}
.projlog-feed li:last-child{border-bottom:0}
.projlog-feed li.is-new{animation:pl-in .5s var(--ease)}
@keyframes pl-in{from{opacity:0;transform:translateY(-8px);background:rgba(227,161,63,.12)}to{opacity:1;transform:none;background:transparent}}
.pl-tag{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase}
.t-web{color:#8fb3d9}.t-fix{color:#f0937f}.t-track{color:var(--amber-bright)}.t-care{color:#a9d4bd}.t-ai{color:#c7b0f0}.t-auto{color:#7fd1d1}.t-launch{color:#fff}
.pl-msg{color:var(--on-night)}
.pl-ok{color:#7fd1a1;font-size:.875rem}
.projlog-foot{border-top:1px solid var(--night-line);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;color:var(--on-night-muted)}
.projlog-foot a{font-family:var(--font-display);font-size:.875rem;letter-spacing:0;color:#fff;text-decoration:none;white-space:nowrap}
.projlog-foot a:hover{color:var(--amber-bright)}
@media (max-width:480px){.projlog-feed li{grid-template-columns:1fr auto;row-gap:.2rem}.pl-tag{grid-column:1/-1}.projlog-foot>span{display:none}}
@media (prefers-reduced-motion:reduce){.projlog-feed li.is-new{animation:none}}

/* Night bookend: skyline rises into the closing band; contours and stars continue into the footer */
.cta-band{position:relative;isolation:isolate;
  background-color:var(--night);
  background-image:url("../assets/stars-tile.svg"),url("../assets/topo-night.svg");
  background-size:640px 480px,cover;
  background-position:0 0,center 30%;
  background-repeat:repeat,no-repeat}
.cta-band::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:clamp(66px,9vw,140px);
  background:url("../assets/ridge-night.svg") center bottom/100% 100% no-repeat;pointer-events:none;z-index:-1}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,24,34,0) 0%,rgba(13,24,34,.35) 60%,rgba(13,24,34,.75) 100%)}
.cta-band + .site-footer,.site-footer{border-top:0}
.site-footer{position:relative;background-color:var(--night);
  background-image:url("../assets/stars-tile.svg"),url("../assets/topo-night.svg");
  background-size:640px 480px,cover;background-position:320px 200px,center 85%;background-repeat:repeat,no-repeat}
main:not(:has(.cta-band)) + .site-footer::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:clamp(66px,9vw,140px);
  background:url("../assets/ridge-night.svg") center bottom/100% 100% no-repeat;pointer-events:none}
.lab-page + .cta-band::before{display:none}
/* Header CTA states on the dark header */
.nav .nav-cta:hover{background:#f0b45a;color:#14100a}
.nav .nav-cta[aria-current="page"]{background:var(--navy-hover);color:#fff;box-shadow:inset 0 0 0 1px rgba(227,161,63,.6)}
/* Breathing room above the closing skyline (it rises into the section above it) */
main > :has(+ .cta-band){padding-bottom:calc(var(--section) + clamp(40px,5vw,80px))}
main:not(:has(.cta-band)) > section:last-child{padding-bottom:calc(var(--section) + clamp(40px,5vw,80px))}
main > article:has(+ .cta-band){padding-bottom:0}
.case-layout{padding-bottom:calc(var(--section) + clamp(40px,5vw,80px))}
.more-also{margin-top:var(--s-6);color:var(--muted);font-size:1rem;max-width:var(--measure)}
.more-also + .more-link{margin-top:var(--s-3)}
/* Project log: fewer rows on phones */
@media (max-width:600px){.projlog-feed li:nth-child(n+4){display:none}}

/* Central motion pause: one class on the hero governs every CSS animation inside it */
.hero.motion-paused *,.hero.motion-paused *::before,.hero.motion-paused *::after{animation-play-state:paused!important}
.motion-toggle{position:absolute;right:var(--gutter);top:clamp(.6rem,1.4vw,1rem);z-index:3;display:none;align-items:center;gap:.45rem;min-height:36px;padding:.35rem .8rem;border:1px solid var(--night-line);border-radius:999px;background:rgba(11,22,33,.55);color:var(--on-night);font-family:var(--font-display);font-weight:600;font-size:.8125rem;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.motion-toggle:hover{background:rgba(11,22,33,.85);color:#fff}
.motion-toggle:focus-visible{outline:3px solid var(--amber-bright);outline-offset:2px}
.motion-toggle svg{width:12px;height:12px;fill:currentColor}
.motion-ready .motion-toggle{display:inline-flex}
@media (prefers-reduced-motion:reduce){.motion-ready .motion-toggle{display:none}}
.form-intro{padding:var(--s-4) var(--s-5);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r-s);font-size:.9688rem}
.form-fallback{padding:var(--s-5);background:var(--card);border:var(--border);border-radius:var(--r-m)}
@media (max-width:600px){.hero .hero-copy{padding-top:2rem}}