/* ============================================================
   Brainstorm Innovative Technologies — v2 "Storm Light"
   Design system: storm-dark drama + paper-bright clarity,
   bolt-yellow action, brand-blue storm glow on dark only.
   Class names match the HTML emitted by build.py + pages_*.py.
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Instrument Sans';src:url('../fonts/instrument-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Instrument Sans';src:url('../fonts/instrument-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Instrument Sans';src:url('../fonts/instrument-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}

/* ---------- Tokens ---------- */
:root{
  --storm-950:#070B18;
  --storm-900:#0B1226;
  --storm-800:#121C3A;
  --storm-700:#1B2A54;
  --storm-line:#22305C;
  --paper:#F6F7FB;
  --white:#FFFFFF;
  --ink:#101830;
  --ink-soft:#46506B;
  --line:#E3E7F2;
  --bolt:#FFD24A;
  --bolt-deep:#F5B800;
  /* Brand blue — one accent family, deliberately: the logo is blue + gold, so the site is too.
     Hue 208.8 = the logo mark's own blue as it renders in the header (#1D7AD0, L .46, S .76),
     measured from the rendered pixels rather than sampled off the source art.
     History, so this is not re-litigated a fourth time: #439DE4 was rejected as "teal". The cause
     was SATURATION, not hue — it was light AND washed (L .58 / S .72), and a desaturated cyan-blue
     on navy reads teal. The next pass misdiagnosed that as a hue problem and rotated 207 -> 214,
     which only made the accent duller and moved it FURTHER from the mark (dE 17.2 -> 10.5).
     Keep hue ~209 and keep saturation high; that is what reads as the logo. Judge any future
     change by rendering the eyebrow beside the mark and looking — not by auditing hex codes. */
  --blue:#1E81DC;          /* accents on dark — 4.89:1 on --storm-950, 4.63:1 on --storm-900 */
  --blue-mid:#0F6CC2;      /* glows, gradients, focus ring — 5.32:1 on white, 3.69:1 on navy */
  --blue-ink:#065298;      /* links + accents on light — 7.87:1 on white (light grounds only) */

  --font-display:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,monospace;

  --text-0:clamp(2.5rem,1.35rem + 4.6vw,4.2rem);    /* hero H1 */
  --text-1:clamp(1.95rem,1.35rem + 2.4vw,2.85rem);  /* H2 */
  --text-2:clamp(1.4rem,1.2rem + 0.9vw,1.75rem);    /* H3 */
  --text-3:1.185rem;                                 /* H4 / big body */
  --text-body:1.045rem;
  --text-sm:0.92rem;
  --text-xs:0.8rem;

  --space-section:clamp(4rem,3rem + 4vw,7rem);
  --radius:14px;
  --radius-sm:10px;
  --shadow-soft:0 10px 34px -18px rgba(16,24,48,.35);
  --shadow-lift:0 18px 44px -20px rgba(16,24,48,.42);
  --wrap:1180px;
  --header-h:76px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 12px);}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--blue-ink);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--ink);}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;margin:0 0 .6em;letter-spacing:-0.015em;color:var(--ink);}
h1{font-size:var(--text-0);font-weight:700;}
h2{font-size:var(--text-1);font-weight:700;}
h3{font-size:var(--text-2);font-weight:600;}
h4{font-size:var(--text-3);font-weight:600;}
p{margin:0 0 1.1em;}
ul,ol{margin:0 0 1.2em;padding-left:1.25em;}
strong{font-weight:600;}
::selection{background:var(--bolt);color:var(--storm-950);}

.container{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2rem);}
.container--narrow{max-width:820px;}
.measure{max-width:62ch;}
.measure p:last-child{margin-bottom:0;}
.center{text-align:center;}
.center .measure{margin-inline:auto;}
.mb-0{margin-bottom:0;}
.mono{font-family:var(--font-mono);}

.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:-9999px;top:0;background:var(--bolt);color:var(--storm-950);padding:.7rem 1.1rem;font-weight:600;z-index:200;border-radius:0 0 var(--radius-sm) 0;}
.skip-link:focus{left:0;}

/* --blue-mid, not --blue: the ring has to hold up on paper-bright *and* storm-dark.
   6.03:1 on white / 3.08:1 on navy — the original cyan ring was only 1.9:1 on white. */
:focus-visible{outline:2.5px solid var(--blue-mid);outline-offset:2px;border-radius:4px;}

/* ---------- Eyebrow / bolt accents ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-ink);margin-bottom:1.1rem;
}
.eyebrow.on-dark{color:var(--blue);}
.eyebrow .bolt-glyph{width:13px;height:13px;flex:none;fill:var(--bolt);}
.bolt-glyph{fill:var(--bolt);}
.bolt-glyph.sm{width:11px;height:11px;}

.bolt-rule{width:74px;height:10px;margin:.35rem 0 1.4rem;display:block;}
.bolt-rule polyline{fill:none;stroke:var(--bolt);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);font-weight:600;font-size:1rem;
  padding:.86rem 1.55rem;border-radius:var(--radius-sm);
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease,color .16s ease;
  white-space:nowrap;line-height:1.2;
}
.btn:active{transform:translateY(1px);}
.btn--bolt{background:var(--bolt);color:var(--storm-950);}
.btn--bolt:hover{background:var(--bolt-deep);color:var(--storm-950);box-shadow:0 10px 26px -12px rgba(245,184,0,.55);transform:translateY(-1px);}
.btn--bolt[disabled]{opacity:.6;cursor:default;transform:none;box-shadow:none;}
.btn--ghost{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn--ghost:hover{background:var(--ink);color:var(--white);}
.btn--ghost-dark{border-color:#5B6C9E;color:var(--white);background:transparent;}
.btn--ghost-dark:hover{border-color:var(--blue);color:var(--blue);background:rgba(30,129,220,.09);}
.btn--lg{padding:1.02rem 1.9rem;font-size:1.07rem;}
.btn .icon{width:18px;height:18px;flex:none;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(7,11,24,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(34,48,92,.6);
}
.header-bar{display:flex;align-items:center;gap:1.2rem;min-height:var(--header-h);}
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto;}
/* The mark is an <img> of the real logo art (222x178). The global `img{height:auto}` would
   otherwise fight the height attribute, so pin the ratio and let width follow. */
.brand-mark{flex:none;height:auto;aspect-ratio:222/178;}
.brand-text{display:flex;flex-direction:column;line-height:1.08;}
.brand-text strong{font-family:var(--font-display);font-weight:700;font-size:1.13rem;color:var(--white);letter-spacing:-0.01em;}
.brand-text span{font-family:var(--font-mono);font-size:.56rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);}

.site-nav{display:flex;align-items:center;}
.nav-menu{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0;}
.nav-menu > li{position:relative;}
.nav-menu a,.nav-menu button.nav-drop-btn{
  display:inline-flex;align-items:center;gap:.3rem;
  font-family:var(--font-body);font-weight:500;font-size:.98rem;
  color:#C9D2EC;text-decoration:none;padding:.55rem .7rem;border-radius:8px;
  background:none;border:0;cursor:pointer;white-space:nowrap;
}
.nav-menu a:hover,.nav-menu button.nav-drop-btn:hover{color:var(--white);background:rgba(30,129,220,.15);}
.nav-menu a[aria-current="page"]{color:var(--bolt);}
.nav-drop-btn.is-current{color:var(--bolt);}

.nav-cta{margin-left:.4rem;}
.nav-cta .btn{padding:.6rem 1.15rem;font-size:.96rem;}
.nav-cta .btn:hover{color:var(--storm-950);}

.header-phone{
  display:inline-flex;align-items:center;gap:.4rem;margin-left:.4rem;
  font-family:var(--font-mono);font-size:.9rem;font-weight:600;
  color:var(--white);text-decoration:none;white-space:nowrap;
}
.header-phone:hover{color:var(--bolt);}
.header-phone .icon{width:15px;height:15px;color:var(--bolt);}

.nav-drop-btn .chev{width:13px;height:13px;transition:transform .18s ease;}
.nav-drop.open .nav-drop-btn .chev{transform:rotate(180deg);}
.nav-drop-menu{
  position:absolute;top:calc(100% + 10px);left:0;min-width:264px;
  background:var(--storm-900);border:1px solid var(--storm-line);border-radius:var(--radius-sm);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.65);
  list-style:none;margin:0;padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.nav-drop.open .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;transform:translateY(0);}
@media (hover:hover){.nav-drop:hover .nav-drop-menu{opacity:1;visibility:visible;transform:translateY(0);}}
.nav-drop-menu a{display:flex;width:100%;gap:.6rem;align-items:center;padding:.55rem .7rem;font-size:.95rem;border-radius:7px;}
.nav-drop-menu a span{display:inline-flex;align-items:center;gap:.5rem;}
.drop-ic{width:18px;height:18px;flex:none;color:var(--bolt);}
.drop-flag{
  font-family:var(--font-mono);font-style:normal;font-size:.56rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--storm-950);
  background:var(--bolt);border-radius:99px;padding:.12rem .45rem;
}

.nav-toggle{
  display:none;background:none;border:1.5px solid var(--storm-line);border-radius:8px;
  color:var(--white);width:44px;height:44px;cursor:pointer;margin-left:auto;
  align-items:center;justify-content:center;
}
.nav-toggle svg{width:22px;height:22px;}
.nav-toggle .nav-toggle-close{display:none;}
.nav-open .nav-toggle .nav-toggle-open{display:none;}
.nav-open .nav-toggle .nav-toggle-close{display:inline-flex;}

@media (max-width:1120px){.header-phone{display:none;}}
@media (max-width:940px){
  .nav-toggle{display:inline-flex;}
  .nav-menu{
    position:fixed;inset:var(--header-h) 0 auto 0;max-height:calc(100dvh - var(--header-h));overflow:auto;
    flex-direction:column;align-items:stretch;gap:.15rem;
    background:var(--storm-950);border-bottom:1px solid var(--storm-line);
    padding:1rem 1.15rem 1.4rem;display:none;
  }
  .nav-menu.open{display:flex;}
  body.nav-locked{overflow:hidden;}
  .nav-menu a,.nav-menu button.nav-drop-btn{width:100%;padding:.85rem .6rem;font-size:1.06rem;justify-content:space-between;}
  .nav-drop-menu{position:static;opacity:1;visibility:visible;transform:none;display:none;
    min-width:0;background:var(--storm-900);box-shadow:none;margin:.2rem 0 .4rem;}
  .nav-drop.open .nav-drop-menu{display:block;}
  .nav-cta{margin:.8rem 0 0;}
  .nav-cta .btn{width:100%;}
}

/* ---------- Hero (home) — two-column grid ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    /* Alphas run higher than the violet/cyan they replaced: brand blue is a much darker
       colour, so the same alpha over navy would read as no glow at all. */
    radial-gradient(54rem 34rem at 84% -18%,rgba(15,108,194,.44),transparent 60%),
    radial-gradient(42rem 30rem at -8% 120%,rgba(30,129,220,.26),transparent 56%),
    linear-gradient(160deg,var(--storm-900),var(--storm-950) 70%);
  padding:clamp(3.4rem,7vh,6rem) 0;
}
.hero-grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1.05fr .95fr;}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.hero-copy{max-width:640px;}
.hero h1{color:var(--white);margin-bottom:.5em;}
.hero h1 .glow{
  color:var(--bolt);white-space:nowrap;
  text-shadow:0 0 34px rgba(255,210,74,.45);
}
.hero .lede{font-size:1.16rem;color:#D5DCF1;max-width:56ch;margin-bottom:2rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;}
.hero-proof{display:flex;flex-wrap:wrap;gap:.55rem;padding:0;margin:2.4rem 0 0;list-style:none;}
.hero-proof li{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-mono);font-size:.78rem;font-weight:600;letter-spacing:.04em;
  color:#AFBBDD;border:1px solid rgba(91,108,158,.45);border-radius:99px;
  padding:.42rem .8rem;background:rgba(11,18,38,.55);
}
.hero-proof .icon{width:15px;height:15px;flex:none;color:var(--bolt);}
.hero-art{position:relative;}
.hero-art img{
  width:100%;border-radius:calc(var(--radius) + 4px);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
  border:1px solid var(--storm-line);
}
.hero-art::after{
  content:"";position:absolute;inset:auto -16px -16px auto;width:56%;height:56%;
  border:2px solid var(--bolt);border-radius:var(--radius);z-index:-1;opacity:.55;
}
@media (max-width:900px){.hero-art{display:none;}}

/* ---------- Page hero (interior) ---------- */
.page-hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(52rem 30rem at 88% -22%,rgba(15,108,194,.42),transparent 62%),
    radial-gradient(40rem 26rem at -12% 118%,rgba(30,129,220,.23),transparent 58%),
    linear-gradient(160deg,var(--storm-900),var(--storm-950) 68%);
  padding:clamp(3.2rem,6vw,5rem) 0;
}
.page-hero--short{padding:clamp(2.6rem,5vw,3.6rem) 0;}
.page-hero .breadcrumbs{margin-bottom:1.4rem;}
.page-hero h1{color:var(--white);max-width:22ch;margin-bottom:.35em;}
.page-hero .lede{font-size:1.14rem;color:#C9D2EC;max-width:60ch;margin:0;}
.page-hero .hero-actions{margin:1.8rem 0 0;}
.breadcrumbs{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.05em;color:#8FA0CC;}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;}
.breadcrumbs li+li::before{content:"/";margin-right:.45rem;color:#5B6C9E;}
.breadcrumbs a{color:#8FA0CC;text-decoration:none;}
.breadcrumbs a:hover{color:var(--blue);}
.breadcrumbs [aria-current]{color:#C9D2EC;}

/* ---------- Sections ---------- */
.section{padding-block:var(--space-section);}
.section--dark{
  background:var(--storm-950);color:#C9D2EC;position:relative;isolation:isolate;overflow:hidden;
}
.section--dark::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46rem 30rem at 82% 6%,rgba(15,108,194,.34),transparent 60%),
    radial-gradient(38rem 26rem at 6% 96%,rgba(30,129,220,.20),transparent 55%);
}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--white);}
.section--dark p{color:#C9D2EC;}
.section--dark a{color:var(--blue);}
.section--dark a:hover{color:var(--white);}
.section--white{background:var(--white);}
.section-head{max-width:730px;margin-bottom:clamp(2.2rem,4vw,3.2rem);}
.section-head p{color:var(--ink-soft);font-size:1.09rem;margin:0;}
.section--dark .section-head p{color:#C9D2EC;}

/* ---------- Split bands ---------- */
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));}
.split--rev > :first-child{order:2;}
@media (max-width:889px){.split--rev > :first-child{order:0;}}

/* ---------- Cards & grids ---------- */
.grid{display:grid;gap:1.25rem;}
.grid--1{grid-template-columns:1fr;}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem 1.6rem;box-shadow:var(--shadow-soft);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:#CBD4EC;}
.section--dark .card{
  background:linear-gradient(165deg,var(--storm-800),var(--storm-900) 70%);
  border-color:var(--storm-line);box-shadow:none;
}
.section--dark .card:hover{border-color:#33477F;}
.card h3,.card h4{margin-bottom:.4em;}
.card p{color:var(--ink-soft);}
.section--dark .card p{color:#C9D2EC;}

.icon-tile{
  width:52px;height:52px;border-radius:12px;flex:none;
  display:grid;place-items:center;margin-bottom:1.15rem;
  background:linear-gradient(150deg,var(--storm-800),var(--storm-950));
  border:1px solid var(--storm-line);
}
.icon-tile svg{width:25px;height:25px;color:var(--bolt);}
/* The real logo mark standing in for a generic icon (newsletter "Brainstorm's Take"). */
.icon-tile .tile-mark{flex:none;height:auto;width:37px;aspect-ratio:222/178;}

.svc-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;}
.svc-card h3,.svc-card h4{margin-bottom:.4em;font-size:1.2rem;}
.svc-card p{color:var(--ink-soft);font-size:.985rem;margin-bottom:1rem;}
.svc-card .more{
  margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--blue-ink);
}
.svc-card:hover .more{color:var(--ink);}
.svc-card .more .icon{width:16px;height:16px;transition:transform .18s ease;}
.svc-card:hover .more .icon{transform:translateX(4px);}
.svc-card.featured{
  background:linear-gradient(150deg,#141F42,var(--storm-950) 75%);
  border:1px solid #33477F;
}
.svc-card.featured h3,.svc-card.featured h4{color:var(--white);}
.svc-card.featured p{color:#C9D2EC;}
.svc-card.featured .more{color:var(--bolt);}
.svc-card.featured .icon-tile{background:rgba(255,210,74,.14);border-color:rgba(255,210,74,.4);}
.pill-new{
  display:inline-block;font-family:var(--font-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--storm-950);
  background:var(--bolt);border-radius:99px;padding:.18rem .55rem;margin-left:.5rem;vertical-align:middle;
}

/* ---------- Clusters (home + services hub) ---------- */
.cluster{margin-bottom:clamp(2.4rem,4vw,3.4rem);}
.cluster:last-child{margin-bottom:0;}
.cluster-head{margin-bottom:1.3rem;}
.cluster-head h2,.cluster-head h3{margin-bottom:.2em;}
.cluster-head p{color:var(--ink-soft);margin:0;}

/* ---------- Checklist ---------- */
.checklist{list-style:none;padding:0;margin:1.4rem 0;display:grid;gap:.75rem;}
.checklist li{display:flex;gap:.75rem;align-items:flex-start;color:var(--ink-soft);}
.section--dark .checklist li{color:#C9D2EC;}
.checklist .bolt-glyph{width:15px;height:15px;flex:none;margin-top:.3rem;fill:var(--bolt-deep);}
.section--dark .checklist .bolt-glyph{fill:var(--bolt);}
.checklist strong,.checklist em{color:var(--ink);font-style:normal;font-weight:600;}
.section--dark .checklist strong,.section--dark .checklist em{color:var(--white);}

/* ---------- Why list (numbered/icon features on dark) ---------- */
.why-list{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:1.15rem;}
.why-list li{display:flex;gap:.9rem;align-items:flex-start;}
.why-list li > svg{width:24px;height:24px;flex:none;margin-top:.15rem;color:var(--bolt);}
.why-list strong{display:block;color:var(--white);font-family:var(--font-display);font-size:1.08rem;margin-bottom:.15rem;}
.why-list span{color:#C9D2EC;font-size:.97rem;}

/* ---------- AI automation panel (dark demo card) ---------- */
.panel-dark{
  background:linear-gradient(165deg,var(--storm-800),var(--storm-950) 78%);
  border:1px solid var(--storm-line);border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.7rem;box-shadow:var(--shadow-lift);
}
.panel-dark-head{display:flex;align-items:center;gap:.55rem;margin-bottom:1.1rem;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#8FA0CC;}
.pulse-dot{width:10px;height:10px;border-radius:50%;background:var(--blue);flex:none;
  box-shadow:0 0 0 0 rgba(30,129,220,.75);animation:pulse 2.1s ease-out infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(30,129,220,.7);}70%{box-shadow:0 0 0 11px rgba(30,129,220,0);}100%{box-shadow:0 0 0 0 rgba(30,129,220,0);}}
@media (prefers-reduced-motion:reduce){.pulse-dot{animation:none;}}
.ticker{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;}
.ticker li{
  display:flex;gap:.65rem;align-items:flex-start;
  font-size:.94rem;color:#D5DCF1;line-height:1.5;
  padding:.75rem .85rem;border:1px solid var(--storm-line);border-radius:10px;
  background:rgba(7,11,24,.5);
}
.ticker li svg{width:18px;height:18px;flex:none;margin-top:.1rem;color:var(--blue);}
.mono-arrow{font-family:var(--font-mono);color:var(--bolt);padding:0 .15rem;}
.panel-note{margin:1.1rem 0 0;font-family:var(--font-mono);font-size:.8rem;color:#8FA0CC;text-align:center;}

/* ---------- Feature banner (services hub) ---------- */
.feature-banner{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(40rem 24rem at 90% -40%,rgba(15,108,194,.52),transparent 60%),
    linear-gradient(150deg,var(--storm-800),var(--storm-950) 72%);
  border:1px solid #33477F;border-radius:calc(var(--radius) + 4px);
  padding:clamp(2rem,4vw,3rem);
  display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;
}
.feature-banner-copy{max-width:60ch;}
.feature-banner-copy h2{color:var(--white);margin-bottom:.35em;}
.feature-banner-copy p{color:#C9D2EC;margin-bottom:1.4rem;}
.feature-banner-art{flex:none;}
.feature-spark{width:120px;height:120px;color:var(--bolt);opacity:.9;filter:drop-shadow(0 0 24px rgba(255,210,74,.4));}
@media (max-width:720px){.feature-banner{grid-template-columns:1fr;}.feature-banner-art{display:none;}}

/* ---------- Service-area band ---------- */
.area-cities{
  max-width:70ch;font-size:1.06rem;color:var(--ink-soft);
}
.area-cities a{font-weight:600;}

/* radar ornament (kept subtle, used on dark why-section) */
.area-radar{width:min(72vw,420px);height:auto;opacity:.85;}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(42rem 26rem at 12% -30%,rgba(15,108,194,.46),transparent 60%),
    radial-gradient(36rem 22rem at 95% 130%,rgba(30,129,220,.32),transparent 55%),
    linear-gradient(150deg,var(--storm-800),var(--storm-950) 72%);
  border:1px solid var(--storm-line);border-radius:calc(var(--radius) + 6px);
  padding:clamp(2.4rem,5vw,4rem);
  display:grid;gap:1.6rem;grid-template-columns:1.3fr 1fr;
  align-items:center;
}
@media (max-width:820px){.cta-band{grid-template-columns:1fr;}}
.cta-band h2{color:var(--white);margin-bottom:.35em;}
.cta-band p{color:#C9D2EC;margin:0;max-width:52ch;}
.cta-band .hero-actions{margin:0;justify-content:flex-end;}
@media (max-width:820px){.cta-band .hero-actions{justify-content:flex-start;}}
.cta-bolt{position:absolute;right:-30px;top:-46px;width:190px;height:190px;opacity:.14;transform:rotate(12deg);fill:var(--bolt);z-index:-1;}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.85rem;}
.faq details{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:0;overflow:hidden;
}
.section--dark .faq details{background:var(--storm-900);border-color:var(--storm-line);}
.faq details[open]{border-color:#CBD4EC;box-shadow:var(--shadow-soft);}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-family:var(--font-display);font-weight:600;font-size:1.04rem;padding:1.05rem 1.25rem;color:var(--ink);
}
.section--dark .faq summary{color:var(--white);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .chev{width:17px;height:17px;flex:none;color:var(--blue-ink);transition:transform .18s ease;}
.section--dark .faq summary .chev{color:var(--blue);}
.faq details[open] summary .chev{transform:rotate(180deg);}
.faq .faq-a{padding:0 1.25rem 1.15rem;color:var(--ink-soft);}
.section--dark .faq .faq-a{color:#C9D2EC;}
.faq .faq-a p:last-child{margin-bottom:0;}

/* ---------- Steps (contact: what happens next) ---------- */
.steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:.9rem;}
.steps li{position:relative;padding-left:2.6rem;color:var(--ink-soft);}
.steps li::before{
  counter-increment:step;content:counter(step);position:absolute;left:0;top:0;
  font-family:var(--font-mono);font-weight:600;font-size:.85rem;color:var(--storm-950);
  background:var(--bolt);border-radius:8px;width:1.7rem;height:1.7rem;display:grid;place-items:center;
}
.steps li strong{color:var(--ink);}

/* ---------- Forms ---------- */
.form{display:grid;gap:1.1rem;}
.form-row{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr;}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}
.form-field label{
  display:block;font-family:var(--font-display);font-weight:600;font-size:.94rem;margin-bottom:.4rem;
}
.form-field .req{color:var(--blue-ink);}
.form-field .opt{color:var(--ink-soft);font-weight:400;font-size:.85rem;}
.form-field input,.form-field select,.form-field textarea{
  width:100%;font:inherit;color:var(--ink);
  background:var(--white);border:1.5px solid #CBD4E6;border-radius:var(--radius-sm);
  padding:.78rem .95rem;transition:border-color .15s ease,box-shadow .15s ease;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--blue-mid);box-shadow:0 0 0 3.5px rgba(15,108,194,.22);
}
.form-field textarea{min-height:150px;resize:vertical;}
.form .btn{justify-self:start;}
.form-note{font-size:.85rem;color:var(--ink-soft);margin:.3rem 0 0;}
.form-status{
  border-radius:var(--radius-sm);padding:1rem 1.2rem;margin-bottom:1.4rem;font-weight:500;
}
.form-status.is-ok{background:#E7F8EE;border:1px solid #9ADFB6;color:#135A31;}
.form-status.is-err{background:#FDECEC;border:1px solid #F2AFAF;color:#7C1D1D;}
.hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;}

/* ---------- Contact ---------- */
.contact-grid{display:grid;gap:clamp(2rem,4vw,3.4rem);grid-template-columns:1.4fr 1fr;align-items:start;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.contact-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem 1.6rem;box-shadow:var(--shadow-soft);
}
.contact-card h3{font-size:1.2rem;margin-bottom:1rem;}
.contact-list{list-style:none;margin:0 0 .4rem;padding:0;display:grid;gap:1.05rem;}
.contact-list li{display:flex;gap:.9rem;align-items:flex-start;}
.contact-list li > svg{width:20px;height:20px;flex:none;margin-top:.2rem;color:var(--blue-ink);}
.contact-list strong{display:block;font-family:var(--font-display);font-size:.9rem;color:var(--ink-soft);font-weight:600;}
.contact-list a{font-size:1.05rem;font-weight:600;}
.contact-list span{color:var(--ink-soft);}
.contact-divider{height:1px;background:var(--line);margin:1.5rem 0;}

/* ---------- Footer ---------- */
.site-footer{background:var(--storm-950);color:#AFBBDD;position:relative;overflow:hidden;}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--blue-mid),var(--blue) 45%,var(--bolt));}
.footer-grid{
  display:grid;gap:2.4rem;padding:clamp(3rem,6vw,4.5rem) 0 2.4rem;
  grid-template-columns:1.5fr .85fr .85fr 1.1fr;
}
@media (max-width:940px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand .brand{margin-bottom:1rem;}
.footer-brand .brand-text strong{color:var(--white);}
.footer-tag{font-family:var(--font-display);font-weight:600;color:var(--white);margin-bottom:.5rem;}
.footer-blurb{font-size:.95rem;max-width:36ch;color:#8FA0CC;}
.footer-col h2{color:var(--white);font-family:var(--font-display);font-size:1rem;margin-bottom:1rem;letter-spacing:.01em;}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;}
.footer-col a{color:#AFBBDD;text-decoration:none;font-size:.95rem;}
.footer-col a:hover{color:var(--blue);}
.footer-contact{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;font-size:.95rem;}
.footer-contact li{display:flex;gap:.6rem;align-items:flex-start;}
.footer-contact .icon{width:16px;height:16px;flex:none;margin-top:.25rem;color:var(--bolt);}
.footer-contact a{color:#D5DCF1;text-decoration:none;}
.footer-contact a:hover{color:var(--blue);}
.footer-social{display:flex;gap:.7rem;margin-top:1.2rem;}
.footer-social a{
  width:38px;height:38px;border:1px solid var(--storm-line);border-radius:9px;
  display:grid;place-items:center;color:#AFBBDD;transition:color .15s,border-color .15s,transform .15s;
}
.footer-social a:hover{color:var(--bolt);border-color:#33477F;transform:translateY(-2px);}
.footer-social svg{width:17px;height:17px;}
.footer-legal{
  border-top:1px solid rgba(34,48,92,.6);padding:1.4rem 0 1.7rem;
  display:flex;flex-wrap:wrap;gap:.4rem 1.8rem;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;color:#5F719F;
}
.footer-legal p{margin:0;}
.footer-bolt-line{display:inline-flex;align-items:center;color:#8FA0CC;}

/* ---------- About photo ---------- */
.about-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-lift);border:1px solid var(--line);}
.hero-art img{aspect-ratio:1/1;object-fit:cover;}

/* ---------- Legal / prose pages ---------- */
.legal{max-width:760px;}
.legal h2{font-size:1.5rem;margin-top:2.1em;}
.legal h2:first-of-type{margin-top:.4em;}
.legal p,.legal li{color:var(--ink-soft);}
.legal li{margin-bottom:.4em;}

/* ---------- Newsletter archive: the card around an emailed issue ----------
   pages_newsletter_issue.py used to carry this as an inline style= attribute on
   the .email-embed div. The site CSP is `style-src 'self'` with no
   'unsafe-inline', so the browser discarded it and the archive shipped with no
   card, no column width and no centering from launch until 2026-08-02. The
   issue BODY is email HTML and still needs inline styles — those are permitted
   by the scoped site/newsletter/.htaccess — but this wrapper is ours, so it
   lives here in a stylesheet served from 'self' and renders under either
   policy. Keep it that way: nothing about the frame belongs in an attribute.
   max-width tracks the 720px table width the email itself is built on. */
.email-embed{max-width:720px;margin:0 auto;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 12px 44px rgba(11,18,38,.14);}
.email-embed img{max-width:100%;height:auto;}

/* ---------- 404 ---------- */
.err-code{font-family:var(--font-mono);font-weight:600;font-size:clamp(3rem,10vw,5rem);color:var(--bolt);letter-spacing:.15em;margin-bottom:.6rem;line-height:1;}
.center-actions{justify-content:center;margin-top:2rem;}

/* ---------- Small utilities ---------- */
.mt-lg{margin-top:2rem;}
.mb-tight{margin-bottom:1.2rem;}
.h-sm{font-size:1.13rem;}

/* ---------- Reveal on scroll (JS-gated) ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
.js .reveal.in{opacity:1;transform:none;}
.js .reveal.d1{transition-delay:.08s;}
.js .reveal.d2{transition-delay:.16s;}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none;}}

/* ============================================================
   Home hero — full-bleed Tampa Bay skyline + animated bolt
   ============================================================ */
.hero--skyline{
  padding-block:clamp(4rem,11vh,7.5rem);
  min-height:clamp(500px,70vh,700px);
  display:flex;align-items:center;
}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 40%;z-index:-2;
}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,11,24,.94) 0%,rgba(7,11,24,.74) 40%,rgba(7,11,24,.30) 70%,rgba(7,11,24,.12) 100%),
    linear-gradient(180deg,rgba(7,11,24,.50) 0%,rgba(7,11,24,.28) 42%,rgba(7,11,24,.66) 100%);
}
.hero-grid--solo{grid-template-columns:1fr;}
.hero--skyline .hero-copy{max-width:660px;}
/* animated lightning bolt struck over the sky (right side, clear of the copy) */
.hero-bolt{
  position:absolute;top:5%;right:9%;z-index:-1;pointer-events:none;
  width:clamp(84px,13vw,168px);height:auto;
  animation:bolt-strike 6.5s ease-in-out infinite;
}
.hero-bolt-core{fill:var(--bolt);}
.hero-bolt-glow{fill:rgba(255,210,74,.5);}
@keyframes bolt-strike{
  0%,17%,23%,58%,67%,100%{opacity:.92;}
  18%{opacity:.12;} 20%{opacity:1;} 22%{opacity:.4;}
  60%{opacity:.18;} 62%{opacity:1;} 64%{opacity:.7;}
}
@media (max-width:900px){
  .hero-scrim{background:
    linear-gradient(180deg,rgba(7,11,24,.72),rgba(7,11,24,.55) 45%,rgba(7,11,24,.80));}
  .hero-bolt{top:3%;right:5%;width:96px;opacity:.9;}
}
@media (prefers-reduced-motion:reduce){.hero-bolt{opacity:.95;}}

/* ============================================================
   Service page hero — rendered scene beside the title
   One JPEG per service (see tools/export_service_images.py),
   sized by what the H1 leaves over: ~453-478px on a desktop,
   ~36% of the hero between 720 and 1080, 112-168px below that.
   It is not the retired 420x320 art panel and never becomes a
   second hero column.
   ============================================================ */
/* No 960px cap. The cap left 156px of the 1116px container empty on every desktop, so the
   art stopped short of the right edge it is supposed to sit on. Measured, not guessed. The
   lede keeps its own 60ch limit, so lifting this widens the ART, not the reading line. */
.page-hero--service .page-hero-copy{max-width:none;}
/* The title column is 1fr, NOT max-content: max-content shrink-wraps the H1 so the art
   lands wherever that title happens to end — mid-page on "Networking", far out on
   "Computer Repair & Support" — and the eight pages stop agreeing with each other. 1fr
   pins the art to the right edge of the hero copy on every page, where the retired
   panel used to sit. */
.svc-title{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,36%);
  align-items:center;gap:clamp(1.1rem,3vw,2.5rem);
  margin-bottom:.35em;
}
/* Above 1080px the art stops being a share of the container and becomes THE REMAINDER:
   the title asks for the 600px "Computer Repair & Support" needs to stay on two lines at
   this type scale, and the art takes what is left, up to 480px. That is a real ceiling —
   raising it to 540 was measured and changed nothing, because the 600px minimum binds
   first. A share cannot do this job: 43% is right at 1280 and crushes the title to THREE
   lines at 1024, since what a title needs is an absolute width, not a percentage. Below
   1080 the share is correct instead, because there the remainder would starve the art. */
@media (min-width:1080px){
  .svc-title{grid-template-columns:minmax(min(100%,600px),1fr) minmax(0,480px);}
}
.svc-title h1{margin:0;min-width:0;}
/* The renders are already storm-dark on the same navy the hero uses, so the
   edges are FADED rather than framed — a hard rectangle reads as a photo pasted
   onto the hero instead of art belonging to it. Keep the gradient radii UNDER
   100%: at 118% the fade finishes outside the box and the rectangle stays hard,
   which is exactly how the first attempt failed. Judge this by rendering it. */
.svc-art{
  display:block;width:100%;height:auto;
  -webkit-mask-image:radial-gradient(60% 62% at 50% 50%,#000 22%,rgba(0,0,0,.70) 54%,rgba(0,0,0,.18) 80%,transparent 96%);
  mask-image:radial-gradient(60% 62% at 50% 50%,#000 22%,rgba(0,0,0,.70) 54%,rgba(0,0,0,.18) 80%,transparent 96%);
}
@media (max-width:720px){
  .svc-title{grid-template-columns:minmax(0,1fr) minmax(112px,168px);gap:.6rem;}
}

/* ============================================================
   App showcase cards (App Development page only)
   ============================================================ */
.app-card{display:flex;flex-direction:column;gap:.35rem;}
.app-card-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;}
.app-card-head h3{margin:0;font-size:var(--text-2);}
.pill-soon{
  flex:none;font-family:var(--font-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--blue-ink);
  background:rgba(30,129,220,.12);border:1px solid rgba(30,129,220,.30);
  border-radius:99px;padding:.28rem .6rem;white-space:nowrap;
}
.app-tagline{font-weight:600;color:var(--ink);margin:.3rem 0 0;font-size:1.05rem;}
.app-blurb{color:var(--ink-soft);margin:.35rem 0 0;}
.app-meta{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;
  color:var(--ink-soft);opacity:.85;margin:.55rem 0 0;
}
.app-link{
  margin-top:.9rem;display:inline-flex;align-items:center;gap:.35rem;
  font-weight:600;color:var(--blue-ink);text-decoration:none;
}
.app-link .icon{width:17px;height:17px;transition:transform .2s ease;}
.app-link:hover{text-decoration:underline;}
.app-link:hover .icon{transform:translateX(3px);}

/* ============================================================
   About — founder credentials
   ============================================================ */
.founder-photo{aspect-ratio:1/1;object-position:50% 22%;}
.cred-list{list-style:none;padding:0;margin:1.4rem 0 1.7rem;display:grid;gap:.85rem;}
.cred-list li{display:flex;gap:.75rem;align-items:flex-start;}
.cred-list .icon{width:22px;height:22px;flex:none;color:var(--blue-ink);margin-top:2px;}
.cred-list strong{display:block;color:var(--ink);}
.cred-list span{color:var(--ink-soft);font-size:.93rem;}