/* ============================================================
   ZoraAGI Systems — single-page site
   Theme: ink + amber, Fraunces / Geist / Geist Mono
   ============================================================ */
:root{
  --ink:#0B0D10; --graphite:#14171C; --panel:#171B21; --hair:#262B33; --hair-soft:#1D2229;
  --porcelain:#EDEFF2; --paper:#F4F5F7; --text:#E8EBEF; --dim:#8A93A3; --faint:#5A6272;
  --amber:#F5A623; --amber-dim:#f5a62326; --amber-deep:#a16207;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Geist', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --max:1180px;
  --gut:clamp(18px, 4vw, 32px);
  --sec-y:clamp(66px, 8.6vw, 108px);
  /* The logo can only grow as far as the bar it sits in, so these two move
     together. site.js reads --nav-h for its anchor-scroll offset. */
  --nav-h:82px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--text);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font-family:var(--mono);font-size:clamp(10px,2.4vw,11px);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);line-height:1.7}
.eyebrow .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);margin-right:10px;vertical-align:2px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Hero eyebrow — the product category keeps the line's own colour and size;
   a highlight travels through the letterforms every few seconds instead of
   sitting in a box, so nothing changes the metrics of the line it shares. */
.os-shine{color:var(--dim)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .os-shine{
    /* 300% wide so that at either end of the sweep the text still sits fully
       inside the image — outside it there is nothing to paint and the letters
       would vanish — while the highlight parks well clear of the glyphs.
       At 0% the text sees the image's first third, at 100% its last third, so
       the band must live between 33% and 67% to rest invisible at both ends. */
    background-image:linear-gradient(96deg,
      var(--dim) 0%, var(--dim) 44%,
      var(--amber) 47%, #FFEFD0 50%, var(--amber) 53%,
      var(--dim) 56%, var(--dim) 100%);
    background-size:300% 100%;background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    /* Cycle length is the one dial here — lower it to flash more often. */
    animation:os-shine 3s ease-in-out infinite;
  }
}
/* 100% parks the highlight off the left, 0% off the right, so the sweep runs
   left-to-right and the text rests plain between passes. Stay inside 0–100%:
   beyond it the no-repeat image no longer covers the text. */
@keyframes os-shine{
  0%,38%{background-position:100% 0}
  88%,100%{background-position:0% 0}
}
h1,h2{font-family:var(--serif);font-weight:340;letter-spacing:-.015em}
.amber{color:var(--amber)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .eyebrow .dot,#cursor{animation:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;min-height:44px;border-radius:6px;
  font-size:14px;font-weight:500;letter-spacing:.01em;
  transition:background .2s,border-color .2s,filter .2s,color .2s;cursor:pointer;
  font-family:inherit;border:1px solid transparent;
}
.btn-amber{background:var(--amber);color:var(--ink)}
.btn-amber:hover{filter:brightness(1.09)}
.btn-ghost{border-color:var(--hair);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--dim);background:#ffffff08}

/* ── NAV ─────────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(11,13,16,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair-soft);
}
.nav-in{
  max-width:var(--max);margin:0 auto;padding:0 var(--gut);height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:50px;width:auto}
@media(max-width:560px){:root{--nav-h:68px}.brand img{height:40px}}
.nav-links{display:flex;gap:clamp(14px,2.2vw,28px);align-items:center;font-size:15.5px;color:var(--dim)}
.nav-links a:not(.btn){white-space:nowrap;transition:color .2s}
.nav-links a:not(.btn):hover{color:var(--text)}
.nav-links .btn{padding:11px 21px;font-size:15px}

.burger{
  display:none;width:44px;height:44px;margin-right:-10px;
  background:none;border:0;cursor:pointer;padding:11px 10px;
}
.burger span{display:block;height:1.5px;background:var(--text);border-radius:2px;transition:transform .28s ease,opacity .2s ease}
.burger span+span{margin-top:5px}
nav.open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
nav.open .burger span:nth-child(2){opacity:0}
nav.open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-menu{
  display:none;border-top:1px solid var(--hair-soft);background:rgba(11,13,16,.97);
  padding:8px var(--gut) 22px;
  max-height:calc(100dvh - var(--nav-h));overflow-y:auto;
}
/* :not(.btn) — otherwise this outranks .btn-amber and greys out the CTA. */
.mobile-menu a:not(.btn){
  display:block;padding:15px 0;font-size:16.5px;color:var(--dim);
  border-bottom:1px solid var(--hair-soft);
}
.mobile-menu .btn{display:flex;width:100%;margin-top:18px;padding:15px}

/* Larger nav type needs more room, so the bar collapses to the menu sooner.
   Keep this in sync with site.js and the <noscript> block in each page. */
@media(max-width:1000px){
  .nav-links{display:none}
  .burger{display:block}
  nav.open .mobile-menu{display:block}
}

/* ── HERO ────────────────────────────────────────────────── */
.hero{padding:calc(var(--nav-h) + clamp(48px,8vw,90px)) 0 clamp(56px,7vw,92px);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1100px 480px at 72% -12%, #1b212a 0%, transparent 62%);
}
.hero .wrap{position:relative}
.hero h1{
  font-size:clamp(31px,5.6vw,64px);line-height:1.07;
  max-width:21ch;margin:22px 0 24px;
}
.hero h1 .amber{font-weight:400}
.hero .lede{font-size:clamp(15.5px,2.4vw,18px);color:var(--dim);max-width:60ch;line-height:1.7}
.hero .lede b{color:var(--text);font-weight:500}

/* live runtime console */
.console{
  margin:clamp(30px,4.5vw,44px) 0 clamp(28px,4vw,38px);
  border:1px solid var(--hair);border-radius:9px;
  background:linear-gradient(180deg,#101318,#0c0f13);
  font-family:var(--mono);max-width:800px;overflow:hidden;
}
.console .bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 14px;border-bottom:1px solid var(--hair-soft);
  color:var(--faint);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
.console .bar i{width:7px;height:7px;border-radius:50%;background:var(--hair);display:inline-block;flex-shrink:0}
.console .bar i.on{background:var(--amber);animation:pulse 2.4s ease-in-out infinite}
.console .bar .title{margin-left:6px}
.console .bar .meters{margin-left:auto;display:flex;gap:16px;color:var(--dim)}
.console .bar .meters b{color:var(--amber);font-weight:500}
.console .feed{
  padding:14px 16px;color:var(--dim);font-size:12px;line-height:1.95;
  height:196px;position:relative;
  /* Rows are white-space:pre, so on a narrow screen the terminal scrolls
     sideways rather than clipping the telemetry or widening the page. */
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--hair) transparent;
}
.console .feed::-webkit-scrollbar{height:6px}
.console .feed::-webkit-scrollbar-thumb{background:var(--hair);border-radius:3px}
.console .feed::-webkit-scrollbar-track{background:transparent}
.console .feed .row{white-space:pre;display:block}
.console .feed .t{color:var(--faint)}
.console .feed .ag{color:var(--text)}
.console .feed .ok{color:var(--amber)}
.console .feed .gate{color:#7fb2ff}
#cursor{color:var(--amber);animation:blink 1.05s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.console .scroller{overflow:hidden}
@media(max-width:560px){
  .console .feed{font-size:10.5px;height:184px;padding:12px}
  .console .bar .meters{gap:12px;font-size:9.5px}
  .console .bar .m-agents{display:none}
}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,54px)}
.cta-row .btn{flex:1 1 auto;min-width:190px}
@media(min-width:600px){.cta-row .btn{flex:0 0 auto}}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{border-top:1px solid var(--hair-soft);padding:22px 20px 4px 0}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(24px,4.2vw,34px);letter-spacing:-.01em;line-height:1.15}
.stat span{display:block;margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);line-height:1.6}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}

/* ── SECTION SHELL ───────────────────────────────────────── */
section{padding:var(--sec-y) 0}
.sec-head{margin-bottom:clamp(36px,5vw,54px);max-width:760px}
.sec-head h2{font-size:clamp(26px,4.4vw,43px);line-height:1.14;margin-top:20px}
.sec-head p{color:var(--dim);margin-top:16px;font-size:clamp(15px,2.2vw,16.5px);max-width:62ch}

/* ── THESIS (porcelain) ──────────────────────────────────── */
.invert{background:var(--porcelain);color:#14171C}
.invert .eyebrow{color:#6b7280}
.invert .sec-head p{color:#4b5563}
.compare{display:grid;grid-template-columns:1fr 1fr;border:1px solid #d7dade;border-radius:10px;overflow:hidden;background:var(--paper)}
.compare .col{padding:clamp(24px,3.4vw,38px) clamp(20px,3.4vw,38px)}
.compare .col+.col{border-left:1px solid #d7dade}
.compare h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:#6b7280;margin-bottom:22px}
.compare .col.us{background:#fff}
.compare .col.us h3{color:var(--amber-deep)}
.compare ul{list-style:none}
.compare li{padding:13px 0;border-top:1px solid #e4e6ea;font-size:14.5px;line-height:1.55;color:#4b5563}
.compare li b{display:block;color:#111827;font-weight:600;font-size:14px;margin-bottom:3px}
.compare .col.us li b{color:#92400e}
.moat{margin-top:clamp(28px,3.6vw,38px);font-family:var(--serif);font-size:clamp(19px,2.8vw,27px);font-weight:340;line-height:1.42;max-width:38ch;color:#14171C}
.moat em{font-style:italic;color:var(--amber-deep)}
@media(max-width:820px){
  .compare{grid-template-columns:1fr}
  .compare .col+.col{border-left:0;border-top:1px solid #d7dade}
}

/* ── PLATFORM ────────────────────────────────────────────── */
.os-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft);border-radius:10px 10px 0 0;overflow:hidden}
.os{background:var(--graphite);padding:clamp(26px,3.2vw,38px) clamp(22px,2.8vw,32px);transition:background .25s}
.os:hover{background:var(--panel)}
.os .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--amber)}
.os h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,3vw,25px);margin:12px 0 6px}
.os .role{font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.08em;margin-bottom:16px;line-height:1.7}
.os p{color:var(--dim);font-size:14.5px;line-height:1.65}
.os .metric{margin-top:22px;padding-top:16px;border-top:1px solid var(--hair-soft);font-family:var(--mono);font-size:11.5px;color:var(--text);line-height:1.9}
.os .metric b{color:var(--amber);font-weight:500}
.runtime{
  border:1px solid var(--hair-soft);border-top:none;border-radius:0 0 10px 10px;background:#0e1116;
  padding:22px clamp(22px,2.8vw,32px);display:flex;gap:8px 22px;flex-wrap:wrap;align-items:baseline;
}
.runtime .r-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.19em;color:var(--amber);white-space:nowrap}
.runtime .r-items{font-family:var(--mono);font-size:11.5px;color:var(--dim);line-height:2;flex:1 1 320px}
@media(max-width:980px){.os-grid{grid-template-columns:1fr}}

.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft);border-radius:10px;overflow:hidden;margin-top:clamp(24px,3vw,34px)}
.pil{background:var(--graphite);padding:26px 24px}
.pil .p-tag{font-family:var(--mono);font-size:10px;letter-spacing:.19em;color:var(--amber)}
.pil b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;margin:10px 0 8px;letter-spacing:-.01em}
.pil p{color:var(--dim);font-size:13.5px;line-height:1.6}
@media(max-width:900px){.pillars{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pillars{grid-template-columns:1fr}}

/* ADK — the "bring your own framework" panel */
.adk{
  margin-top:clamp(24px,3vw,34px);
  border:1px solid var(--hair-soft);border-left:2px solid var(--amber);border-radius:8px;
  background:var(--graphite);padding:clamp(26px,3.2vw,34px) clamp(22px,2.8vw,32px);
}
.adk .adk-label{font-family:var(--mono);font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--amber)}
.adk h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,3.2vw,28px);margin:12px 0;letter-spacing:-.01em}
.adk p{color:var(--dim);font-size:15px;line-height:1.72;max-width:74ch}
.adk p b{color:var(--text);font-weight:500}
.adk-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft);border-radius:7px;overflow:hidden;margin-top:24px}
.adk-rail span{background:#0e1116;padding:14px 16px;font-family:var(--mono);font-size:11.5px;color:var(--dim);line-height:1.65}
.adk-rail b{display:block;color:var(--amber);font-weight:500;margin-bottom:3px}
@media(max-width:900px){.adk-rail{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.adk-rail{grid-template-columns:1fr}}

.note{margin-top:clamp(24px,3vw,32px);color:var(--dim);font-size:15px;max-width:72ch;line-height:1.7}
.note b{color:var(--text);font-weight:500}
.note code{font-family:var(--mono);font-size:12.5px;color:var(--amber);background:var(--amber-dim);padding:2px 8px;border-radius:4px;white-space:nowrap}

/* ── CRITICAL INFRASTRUCTURE ─────────────────────────────── */
.cip{background:linear-gradient(180deg,var(--ink),#0d1015 42%,var(--ink))}
.domains{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dom{border:1px solid var(--hair-soft);border-radius:10px;padding:clamp(24px,3vw,32px) clamp(20px,2.6vw,28px);background:var(--graphite)}
.dom .d-tag{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.dom .d-tag b{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--text)}
.dom .d-tag span{font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.1em;text-align:right}
.dom h3{font-family:var(--serif);font-weight:400;font-size:20px;margin:2px 0 18px;color:var(--text)}
.dom dl{font-size:13.5px}
.dom dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;color:var(--amber);margin:15px 0 5px}
.dom dd{color:var(--dim);line-height:1.6}
@media(max-width:980px){.domains{grid-template-columns:1fr}}

.workflows{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft);border-radius:10px;overflow:hidden;margin-top:clamp(20px,2.6vw,26px)}
.wf{background:var(--graphite);padding:24px 22px}
.wf b{display:block;font-size:14.5px;font-weight:500;margin-bottom:3px}
.wf .wf-sub{font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:var(--amber);margin-bottom:10px;text-transform:uppercase}
.wf p{color:var(--dim);font-size:13px;line-height:1.6}
@media(max-width:900px){.workflows{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.workflows{grid-template-columns:1fr}}

.cip-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(34px,4.4vw,50px)}
@media(max-width:760px){.cip-stats{grid-template-columns:1fr 1fr}}

/* ── SENTINEL ────────────────────────────────────────────── */
.sentinel-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,4.5vw,56px);align-items:start}
@media(max-width:900px){.sentinel-grid{grid-template-columns:1fr}}
.sub-label{font-family:var(--mono);font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--amber);margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{
  font-family:var(--mono);font-size:11.5px;color:var(--dim);
  border:1px solid var(--hair);border-radius:5px;padding:7px 11px;background:#ffffff05;
}
.threat-note{margin-top:22px;color:var(--dim);font-size:14.5px;line-height:1.7;max-width:46ch}
.threat-note b{color:var(--text);font-weight:500}
.pill-list{list-style:none}
.pill-list li{padding:16px 0;border-top:1px solid var(--hair-soft);display:grid;grid-template-columns:150px 1fr;gap:6px 22px}
.pill-list li:first-child{border-top:0;padding-top:0}
.pill-list b{font-size:14px;font-weight:500}
.pill-list span{color:var(--dim);font-size:13.5px;line-height:1.6}
@media(max-width:620px){.pill-list li{grid-template-columns:1fr}}

/* ── INDUSTRIES ──────────────────────────────────────────── */
.verts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft);border-radius:10px;overflow:hidden}
.vert{display:block;background:var(--ink);padding:26px 26px 24px;transition:background .25s}
.vert:hover{background:var(--graphite)}
/* The AEC card links to its own page; spanning the row avoids leaving
   empty grid cells showing the container's hairline background. */
.vert.link{grid-column:1 / -1;background:#0f1216}
.vert.link:hover{background:var(--graphite)}
.vert.link:hover .v-metric{color:#ffc55e}
.vert .v-name{font-weight:500;font-size:15.5px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.vert .v-name span{font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.1em;flex-shrink:0}
.vert p{color:var(--dim);font-size:13.5px;margin-top:8px;line-height:1.6}
.vert .v-metric{margin-top:13px;font-family:var(--mono);font-size:11.5px;color:var(--amber)}
.vert.lead{background:var(--graphite)}
.vert.lead .v-name::before{content:"● ";color:var(--amber);font-size:8px;vertical-align:2px}
@media(max-width:980px){.verts{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.verts{grid-template-columns:1fr}}

/* ── COMPANY / PROOF ─────────────────────────────────────── */
.proof-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,58px);align-items:start}
.proof-list{list-style:none}
.proof-list li{padding:20px 0;border-top:1px solid var(--hair-soft)}
.proof-list li:first-child{border-top:0;padding-top:0}
.proof-list b{display:block;font-weight:500;font-size:15.5px;margin-bottom:5px}
.proof-list span{color:var(--dim);font-size:14px;line-height:1.65}
.numbers{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft);border-radius:10px;overflow:hidden}
.num{background:var(--graphite);padding:26px 24px}
.num b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.4vw,36px);color:var(--text);line-height:1.15}
.num span{display:block;margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);line-height:1.7}
@media(max-width:900px){.proof-grid{grid-template-columns:1fr}}

.journey{
  margin-top:clamp(34px,4.4vw,50px);border:1px solid var(--hair-soft);border-radius:10px;
  background:var(--graphite);padding:clamp(24px,3vw,30px) clamp(22px,2.8vw,32px);
}
.journey .j-label{font-family:var(--mono);font-size:10px;letter-spacing:.19em;color:var(--amber);text-transform:uppercase}
.journey .steps{display:flex;flex-wrap:wrap;gap:10px 14px;margin:16px 0 14px;align-items:center}
.journey .steps b{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--text);border:1px solid var(--hair);border-radius:5px;padding:8px 13px}
.journey .steps i{color:var(--faint);font-style:normal}
.journey p{color:var(--dim);font-size:14px;line-height:1.7;max-width:80ch}
@media(max-width:560px){
  .journey .steps{gap:8px 10px}
  .journey .steps b{font-size:11px;letter-spacing:.02em;padding:7px 10px}
}

/* ── CONTACT (porcelain) ─────────────────────────────────── */
.contact{background:var(--porcelain);color:#14171C}
.contact .sec-head h2{color:#14171C}
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,58px);align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

.reach{list-style:none}
.reach li{padding:20px 0;border-top:1px solid #d7dade}
.reach li:first-child{border-top:0;padding-top:0}
.reach .r-kind{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:7px}
.reach .r-main{font-size:16px;font-weight:500;color:#111827}
.reach a.r-main{border-bottom:1px solid #e0c48c}
.reach a.r-main:hover{border-bottom-color:var(--amber-deep)}
.reach address{font-style:normal;color:#4b5563;font-size:14px;line-height:1.65;margin-top:4px}
.reach .r-second{margin-top:16px}
.reach .r-map{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--amber-deep);border-bottom:1px solid #e0c48c}

.form-card{background:#fff;border:1px solid #d7dade;border-radius:12px;padding:clamp(22px,3.2vw,34px)}
.form-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,3vw,24px);color:#111827;margin-bottom:6px}
.form-card .fc-sub{font-size:14px;color:#4b5563;margin-bottom:24px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.f-row{grid-template-columns:1fr}}
.f-group{display:flex;flex-direction:column;margin-bottom:16px}
.f-group label{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#6b7280;margin-bottom:7px}
.f-group input,.f-group select,.f-group textarea{
  font-family:var(--sans);font-size:15px;color:#111827;background:var(--paper);
  border:1px solid #d7dade;border-radius:7px;padding:12px 13px;width:100%;
  transition:border-color .18s,background .18s;-webkit-appearance:none;appearance:none;
}
.f-group select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px;padding-right:36px;
}
.f-group textarea{resize:vertical;min-height:130px;line-height:1.6}
.f-group input:focus,.f-group select:focus,.f-group textarea:focus{outline:none;border-color:var(--amber);background:#fff}
.f-group input::placeholder,.f-group textarea::placeholder{color:#9aa2ae}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit{
  width:100%;padding:15px;border:0;border-radius:7px;background:var(--amber);color:var(--ink);
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;min-height:50px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:filter .2s,opacity .2s;
}
.submit:hover:not(:disabled){filter:brightness(1.08)}
.submit:disabled{opacity:.62;cursor:default}
.form-msg{margin-top:14px;font-size:13.5px;line-height:1.6;padding:12px 14px;border-radius:7px;display:none}
.form-msg.show{display:block}
.form-msg.ok{background:#f2f9f3;border:1px solid #cbe6d1;color:#22603a}
.form-msg.bad{background:#fdf4f3;border:1px solid #f0d3cf;color:#8f2f24}
.form-msg a{color:inherit;text-decoration:underline}
.form-foot{margin-top:16px;font-size:12.5px;color:#6b7280;line-height:1.6}
.form-foot a{color:var(--amber-deep);border-bottom:1px solid #e0c48c}
.spin{display:inline-block;width:15px;height:15px;border:2px solid #00000030;border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── FOOTER ──────────────────────────────────────────────── */
footer{border-top:1px solid var(--hair-soft);padding:clamp(36px,4.6vw,52px) 0 34px;font-size:13.5px;color:var(--faint)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(26px,4vw,48px)}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1 / -1}}
.foot-brand img{height:46px;width:auto;margin-bottom:18px}
.foot-brand p{color:var(--dim);font-size:14px;line-height:1.7;max-width:38ch}
.foot-col h4{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.foot-col a,.foot-col p{display:block;color:var(--dim);font-size:13.5px;line-height:1.55;padding:5px 0}
.foot-col a:hover{color:var(--text)}
.foot-bottom{
  margin-top:clamp(30px,4vw,44px);padding-top:22px;border-top:1px solid var(--hair-soft);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
}

/* ══════════════ AEC PAGE ══════════════ */
.page-hero{padding:calc(var(--nav-h) + clamp(42px,7vw,74px)) 0 clamp(38px,5vw,58px);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1000px 440px at 74% -14%, #1b212a 0%, transparent 62%)}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:clamp(29px,5.2vw,56px);line-height:1.08;max-width:20ch;margin:18px 0 22px}
.page-hero .lede{font-size:clamp(15.5px,2.3vw,17.5px);color:var(--dim);max-width:66ch;line-height:1.72}
.page-hero .lede b{color:var(--text);font-weight:500}
.backlink{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);transition:color .2s}
.backlink:hover{color:var(--amber)}

.prod-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.os-grid.two{grid-template-columns:1fr 1fr}
@media(max-width:820px){.os-grid.two{grid-template-columns:1fr}}

/* closing CTA band */
.band{border:1px solid var(--hair-soft);border-radius:10px;background:var(--graphite);
  padding:clamp(28px,3.6vw,40px) clamp(24px,3vw,36px);display:grid;grid-template-columns:1.5fr auto;
  gap:clamp(20px,3vw,40px);align-items:center}
.band h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,3vw,28px);line-height:1.24;letter-spacing:-.01em}
.band p{color:var(--dim);font-size:14.5px;line-height:1.7;margin-top:12px;max-width:62ch}
@media(max-width:760px){.band{grid-template-columns:1fr}.band .btn{width:100%}}