/* ============================================================
   ZEALOUS DIGITAL SOLUTIONS — corporate site v4 (marker: zealous-site-v4)
   Design system carried forward from v3 "one-intelligence-layer":
   Archivo 700/800 heavy caps + Jost 200/300 thin caps + JetBrains Mono
   + Inter body. Ground #050505, accent #F03E2F as punctuation, light/dark
   band rhythm, dashed stage frames with accent corner ticks (sanity.io /
   Lama Lama register). Multi-page static site.
   LAW 3 fail-open: a zero-JS page is fully readable everywhere. No initial
   hidden state in CSS except scoped under html.js-anim (added by site.js).
   ============================================================ */
:root{
  --bg:#050505; --surface:#0A0A0A; --surface-2:#0E0E0E;
  --fg:#F5F0E6;      /* 17.6:1 on bg */
  --fg-2:#C9C2B6;    /* 11.4:1 */
  --muted:#8F897C;   /* 5.5:1 */
  --border:#1E1C19; --hair:rgba(245,240,230,.10);
  --accent:#F03E2F; --accent-soft:#FF6A3D;
  --l-bg:#F2F1EE; --l-ink:#111008; --l-ink-2:#3D3A33; --l-muted:#605B50;
  --l-hair:rgba(17,16,8,.16); --l-border:#D8D5CD;
  --font-h:'Archivo','Arial Black',system-ui,sans-serif;      /* heavy caps */
  --font-d:'Jost','Avenir Next','Century Gothic',system-ui,sans-serif; /* thin caps */
  --font-b:'Inter','Avenir Next',system-ui,sans-serif;
  --font-m:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --gutter:clamp(20px,4.5vw,76px);
  --maxw:1440px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ background:var(--bg); color:var(--fg); font-family:var(--font-b);
  font-size:19px; line-height:1.62; -webkit-font-smoothing:antialiased; }  /* v4.1: +~19% global type scale (was 16px), sanity-style roominess */
body{ overflow-x:clip; }  /* clip (not hidden) so body never becomes a scroll container that eats vertical scroll */
::selection{ background:var(--accent); color:#000; }
a{ color:inherit; }
img,video{ max-width:100%; display:block; }

.skip{ position:absolute; left:12px; top:-60px; z-index:60; background:var(--fg); color:#000;
  padding:12px 18px; font-family:var(--font-m); font-size:12px; letter-spacing:.08em; text-decoration:none;
  transition:top .2s var(--ease); }
.skip:focus{ top:12px; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

#progress{ position:fixed; top:0; left:0; height:2px; width:100%; z-index:50;
  transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg,var(--accent),var(--accent-soft)); }

.mono{ font-family:var(--font-m); font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.mono em, .accent{ color:var(--accent); font-style:normal; }

/* ---------- DUAL TYPE SYSTEM ---------- */
h1,h2,h3{ font-family:var(--font-d); font-weight:200; text-transform:uppercase; letter-spacing:.02em; line-height:1.04; }
h1{ font-family:var(--font-h); font-weight:800; letter-spacing:-.01em; line-height:.95;
  font-size:clamp(2.4rem,7vw,7.4rem); }
h2{ font-size:clamp(2rem,5.4vw,4.6rem); font-weight:200; }
h3{ font-size:clamp(1.35rem,2.6vw,2.3rem); font-weight:300; }
.heavy,.giant{ font-family:var(--font-h); font-weight:800; letter-spacing:-.01em; line-height:.98; text-transform:uppercase; }
h1 .it,h2 .it,h3 .it,.it{ font-style:normal; color:var(--accent); }
p.lead{ margin-top:26px; font-size:clamp(18px,1.85vw,23px); color:var(--fg-2); max-width:62ch; line-height:1.7; }
p.body{ margin-top:22px; font-size:clamp(17px,1.6vw,20px); color:var(--fg-2); max-width:66ch; line-height:1.75; }

/* ---------- buttons ---------- */
.cta{ display:inline-flex; align-items:center; gap:12px; margin-top:40px; min-height:52px; padding:17px 34px;
  background:var(--l-ink); color:var(--l-bg); text-decoration:none; font-weight:500; font-family:var(--font-d);
  text-transform:uppercase; letter-spacing:.08em; font-size:14px; transition:background .3s var(--ease),color .3s var(--ease); }
.cta:hover{ background:var(--accent); color:#000; }
.cta .arr{ transition:transform .3s var(--ease); }
.cta:hover .arr{ transform:translateX(5px); }
.light .cta{ background:var(--l-ink); color:var(--l-bg); }
.chip-cta{ display:inline-flex; align-items:center; min-height:48px; margin-top:34px; padding:14px 26px;
  border:1px dashed var(--muted); color:var(--fg); text-decoration:none; font-family:var(--font-m); font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; transition:border-color .3s var(--ease),color .3s var(--ease); }
.chip-cta::before{ content:'[ '; color:var(--accent); } .chip-cta::after{ content:' ]'; color:var(--accent); }
.chip-cta:hover{ border-color:var(--accent); color:var(--accent); }
.light .chip-cta{ border-color:var(--l-muted); color:var(--l-ink); }
.light .chip-cta:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- HEADER ---------- */
header.site{ position:fixed; top:0; left:0; right:0; z-index:40; display:flex; justify-content:space-between;
  align-items:center; gap:20px; padding:12px var(--gutter); border-bottom:1px solid var(--hair);
  background:rgba(5,5,5,.86); backdrop-filter:blur(10px); }
/* "ZEALOUS DIGITAL" is 2.1x the old "ZEALOUS" — size + tracking come down
   so the wordmark still clears the service menu and CTA at 1280. */
header.site .wordmark{ font-family:var(--font-d); font-weight:300; font-size:clamp(14px,1.15vw,17px); letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg); text-decoration:none; white-space:nowrap; }
header.site .wordmark .it{ color:var(--accent); }
nav.mainnav{ display:flex; gap:22px; margin-left:auto; align-items:center; }
nav.mainnav a{ font-family:var(--font-m); font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; padding:6px 2px; min-height:44px; display:inline-flex; align-items:center;
  transition:color .3s var(--ease); }
nav.mainnav a:hover,nav.mainnav a[aria-current="page"]{ color:var(--fg); }
.navdrop{ position:relative; }
.navdrop>a::after{ content:' +'; color:var(--accent); }
.navdrop .menu{ position:absolute; top:100%; left:-14px; min-width:240px; background:rgba(8,8,8,.98);
  border:1px solid var(--hair); padding:8px; display:none; flex-direction:column; gap:2px; }
.navdrop:hover .menu,.navdrop:focus-within .menu{ display:flex; }
.navdrop .menu a{ padding:9px 12px; font-size:10px; letter-spacing:.14em; min-height:0; }
.navdrop .menu a:hover{ color:var(--accent); }
/* grouped services nav (plan §I): 4 labelled category columns */
.navdrop .menu{ min-width:520px; display:none; flex-direction:row; flex-wrap:wrap; gap:6px 20px; }
.navdrop:hover .menu,.navdrop:focus-within .menu{ display:flex; }
.navdrop .menu .mgroup{ display:flex; flex-direction:column; gap:1px; min-width:230px; flex:1 1 230px; }
.navdrop .menu .mcat{ font-family:var(--font-m); font-size:8.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); padding:8px 12px 4px; border-bottom:1px solid var(--hair); margin-bottom:2px; }
@media (max-width:900px){
  .navdrop .menu{ min-width:0; flex-direction:column; }
  .navdrop .menu .mgroup{ min-width:0; }
}
header.site a.hcta{ text-decoration:none; color:var(--fg); font-family:var(--font-m); font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; border:1px solid var(--fg); padding:12px 18px; min-height:44px; display:inline-flex;
  align-items:center; transition:border-color .3s var(--ease),color .3s var(--ease); white-space:nowrap; }
header.site a.hcta:hover{ border-color:var(--accent); color:var(--accent); }
.navtoggle{ display:none; margin-left:auto; background:none; border:1px solid var(--hair); color:var(--fg);
  font-family:var(--font-m); font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:11px 14px; min-height:44px; cursor:pointer; }
@media (max-width:1080px){
  nav.mainnav{ position:fixed; inset:56px 0 auto 0; flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(5,5,5,.98); border-bottom:1px solid var(--hair); padding:10px var(--gutter) 24px; display:none; }
  nav.mainnav.open{ display:flex; }
  nav.mainnav a{ width:100%; }
  .navdrop{ width:100%; } .navdrop .menu{ position:static; display:flex; border:0; padding:0 0 8px 16px; background:none; }
  .navdrop>a::after{ content:''; }
  .navtoggle{ display:inline-flex; } header.site a.hcta{ display:none; }
}

/* ---------- sections ---------- */
section{ position:relative; padding:clamp(112px,15vh,212px) var(--gutter); }
.wrap{ max-width:var(--maxw); margin:0 auto; }
.narrow{ max-width:920px; margin:0 auto; }

/* HEADING OVERFLOW GUARANTEE — a colossal display face plus one long word
   is a horizontal scrollbar. MEASURED at 390px on /platform: the h1
   "Enterprise Search Infrastructure." set "Infrastructure." as a single
   ~355px token inside a 335px box; with no break opportunity it did not
   wrap, it OVERFLOWED, and the whole page scrolled sideways to 474px.
   break-word only ever engages when a word cannot otherwise fit, so this
   costs nothing on the headings that already fit — it is a floor, not a
   restyle. `.giant` is excluded: it is deliberately white-space:nowrap. */
h1, h2, h3{ overflow-wrap:break-word; }
.sechead{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  border-bottom:1px solid var(--hair); padding-bottom:14px; margin-bottom:clamp(34px,6vh,60px); }
@media (max-width:560px){ .sechead{ flex-direction:column; align-items:flex-start; } }
.light{ background:var(--l-bg); color:var(--l-ink); }
.light .mono{ color:var(--l-muted); }
.light p.lead,.light p.body{ color:var(--l-ink-2); }
.light .sechead{ border-color:var(--l-hair); }
.light h1,.light h2,.light h3{ color:var(--l-ink); }
.darksolid{ background:var(--bg); }

/* ---------- reveal (IO, fail-open) ---------- */
.js-anim .reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease),transform .8s var(--ease); }
.js-anim .reveal.in{ opacity:1; transform:none; }

/* ---------- stage window (dashed frame + accent corner ticks) ---------- */
.stage{ position:relative; border:1px dashed rgba(245,240,230,.22); background:var(--surface); overflow:hidden; }
.light .stage{ border-color:rgba(17,16,8,.22); background:#EAE8E2; }
.stage .corner{ position:absolute; width:15px; height:15px; border-color:var(--accent); border-style:solid; z-index:3; }
.stage .c1{ top:-1px; left:-1px; border-width:2px 0 0 2px; }
.stage .c2{ top:-1px; right:-1px; border-width:2px 2px 0 0; }
.stage .c3{ bottom:-1px; left:-1px; border-width:0 0 2px 2px; }
.stage .c4{ bottom:-1px; right:-1px; border-width:0 2px 2px 0; }
.stage .cap{ position:absolute; left:14px; bottom:12px; z-index:3; font-family:var(--font-m); font-size:9.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--fg-2); background:rgba(5,5,5,.82); padding:5px 9px; }

/* =========================================================
   HOMEPAGE — SANITY.IO HERO (v4.2)
   ONE hero viewport, two columns:
     LEFT  (~45%) — text on solid black: colossal H1, lead, CTAs.
     RIGHT (~52%) — AMBIENT media. No frame, no border, no radius,
                    no corner ticks. A radial mask dissolves every
                    edge to nothing so the loop reads as light in the
                    black, never as "a video in a box".
   The two columns are separate GRID TRACKS, so the media can never
   travel under the H1 at any width — the track boundary is a hard
   geometric guarantee, and the mask fades out well before it.
   ========================================================= */
#hero{ min-height:100vh; display:flex; align-items:center; background:var(--bg);
  padding:clamp(104px,13vh,146px) var(--gutter) clamp(44px,6vh,66px); overflow:hidden; }
.heroinner{ max-width:var(--maxw); margin:0 auto; width:100%;
  display:grid; grid-template-columns:minmax(0,45fr) minmax(0,52fr);
  gap:clamp(28px,4vw,72px); align-items:center; }

/* ---- LEFT: text column, solid black ground ---- */
.herowrap{ min-width:0; position:relative; z-index:3; }
.herowrap .blabel{ font-family:var(--font-m); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-2); margin-bottom:26px; }
.herowrap .blabel em{ color:var(--accent); font-style:normal; }
/* Colossal, but sized for the 45% track AND for the vertical budget: the
   whole hero (eyebrow -> H1 -> lead -> stack -> CTAs) has to clear a 900px
   viewport under a 71px header, or the CTA falls below the fold. 15ch keeps
   the H1 to ~5 lines instead of 6. Verified 1280/1440/1568/1920. */
#hero h1{ color:var(--fg); font-size:clamp(2.05rem,3.45vw,4.05rem); overflow-wrap:break-word;
  hyphens:none; max-width:15ch; }
#hero h1 .it{ color:var(--accent); }
.herowrap p.lead{ max-width:52ch; font-size:clamp(17px,1.2vw,19px); }
.herowrap .stackline{ margin-top:24px; font-family:var(--font-m); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); line-height:2.1; }
.herowrap .herobtns{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }

/* ---- RIGHT: ambient media column ---- */
/* Radial mask: radii are 62% of the box, and the gradient hits full
   transparency at 78% of those radii. Every edge midpoint sits at
   50/62 = 80.6% — past the transparent stop — so all four edges (and
   the corners, which are further still) are guaranteed to be fully
   transparent. No hard rectangle edge is geometrically possible. */
.heromedia{ position:relative; min-width:0; width:100%;
  height:min(74vh,620px); isolation:auto; }
.hero-screen{ position:absolute; inset:0; overflow:hidden;
  background:transparent; border:0; border-radius:0;
  opacity:.62; mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 0%,#000 34%,rgba(0,0,0,.55) 58%,rgba(0,0,0,.14) 70%,transparent 78%);
          mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 0%,#000 34%,rgba(0,0,0,.55) 58%,rgba(0,0,0,.14) 70%,transparent 78%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%; }
.hero-screen .vlayer{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--ease); }
.hero-screen .vlayer.active{ opacity:1; }
.hero-screen .vlayer img,.hero-screen .vlayer video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* tiny mono index at the media's top-left (sanity's [03] tag position) */
.heromedia .idx{ position:absolute; top:0; left:0; z-index:6; font-family:var(--font-m);
  font-size:11px; letter-spacing:.2em; color:var(--muted); white-space:nowrap; }
.heromedia .idx b{ color:var(--accent); font-weight:400; }
/* one small mono meaning-caption at the media's bottom-left */
.heromedia .stagecap{ position:absolute; bottom:0; left:0; right:0; z-index:6; font-family:var(--font-m); }
.heromedia .stagecap .lbl{ font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-2); line-height:1.6; }
.heromedia .stagecap .lbl b{ color:var(--accent); font-weight:400; }
/* rotation control — kept for manual choice + a11y, styled to disappear */
.hero-dots{ position:absolute; bottom:0; right:0; z-index:6; display:flex; gap:8px; }
.hero-dots button{ width:22px; height:2px; border:0; padding:0; background:rgba(245,240,230,.26);
  cursor:pointer; transition:background .3s var(--ease); }
.hero-dots button.on{ background:var(--accent); }

/* ---- stack to one column on narrow screens ---- */
@media (max-width:980px){
  #hero{ min-height:auto; padding-top:clamp(112px,15vh,150px); }
  .heroinner{ grid-template-columns:1fr; gap:clamp(30px,5vh,52px); }
  #hero h1{ font-size:clamp(2.2rem,7vw,3.6rem); max-width:16ch; }
  .herowrap p.lead{ max-width:58ch; font-size:19px; }
  .heromedia{ height:min(52vh,420px); }
}

/* two-pillar band */
.pillars{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair); border:1px solid var(--hair); }
@media (max-width:820px){ .pillars{ grid-template-columns:1fr; } }
.pillar{ background:var(--bg); padding:clamp(28px,3.4vw,52px); }
.pillar .pmono{ font-family:var(--font-m); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.pillar h3{ margin-top:16px; font-family:var(--font-h); font-weight:700; text-transform:none; letter-spacing:-.01em; }
.pillar p{ margin-top:16px; color:var(--fg-2); font-size:15px; line-height:1.75; max-width:44ch; }
.pillar ul{ list-style:none; margin-top:22px; }
.pillar li{ display:flex; gap:12px; align-items:baseline; padding:11px 0; border-top:1px solid var(--hair); font-size:14px; color:var(--fg-2); }
.pillar li:first-child{ border-top:0; }
.pillar li .d{ color:var(--accent); font-size:10px; flex:none; }
/* Every block carries a visual — that is the mandate, not a nicety, and
   gate.cjs check 2 failed the homepage build until this existed (the
   pillars, the pain and the problem read as three text-only blocks in a
   row). Each pillar now closes on the artifact for the problem it solves.
   The SVGs are the library's own micro-art: rendered, on-brand, reusable,
   zero credits. */
.pillar .pillar-art{ margin-top:30px; }
.pillar .pillar-art svg{ width:100%; height:auto; display:block; opacity:.9; }

/* symptom / feature index rows */
.idxrows{ border-bottom:1px solid var(--hair); }
.idxrow{ display:grid; grid-template-columns:minmax(0,7ch) minmax(0,1fr) minmax(0,40ch); gap:clamp(16px,3vw,56px);
  align-items:baseline; padding:clamp(30px,5.5vh,58px) 0; border-top:1px solid var(--hair); transition:transform .3s var(--ease); }
.idxrow:hover{ transform:translateX(8px); }
.idxrow .vn{ font-family:var(--font-m); font-size:12px; letter-spacing:.24em; color:var(--muted); transition:color .3s var(--ease); }
.idxrow:hover .vn{ color:var(--accent); }
.idxrow h3{ font-family:var(--font-h); font-weight:700; letter-spacing:-.005em; text-transform:none; font-size:clamp(1.5rem,3.4vw,2.7rem); }
.idxrow p{ color:var(--fg-2); font-size:14.5px; line-height:1.7; }
.light .idxrows,.light .idxrow{ border-color:var(--l-hair); }
.light .idxrow p{ color:var(--l-ink-2); }
@media (max-width:820px){ .idxrow{ grid-template-columns:minmax(0,7ch) minmax(0,1fr); } .idxrow p{ grid-column:2; } }

/* capability cards grid (home + services index) */
.capgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); }
@media (max-width:900px){ .capgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .capgrid{ grid-template-columns:1fr; } }
.capcard{ background:var(--bg); padding:clamp(24px,2.6vw,40px); min-height:230px; display:flex; flex-direction:column;
  text-decoration:none; color:var(--fg); transition:background .3s var(--ease); }
.capcard:hover{ background:var(--surface-2); }
.capcard .cn{ font-family:var(--font-m); font-size:11px; letter-spacing:.2em; color:var(--accent); }
.capcard h3{ margin-top:16px; font-family:var(--font-d); font-weight:300; font-size:clamp(1.2rem,1.9vw,1.7rem); }
/* 14px body floor (mobile pass 2026-07-16) — was 13.5px */
.capcard p{ margin-top:14px; color:var(--fg-2); font-size:14px; line-height:1.7; flex:1; }
.capcard .go{ margin-top:18px; font-family:var(--font-m); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.capcard:hover .go{ color:var(--accent); }
.light .capgrid,.light .capcard{ border-color:var(--l-hair); }
.light .capcard{ background:var(--l-bg); color:var(--l-ink); }
.light .capcard:hover{ background:#EAE8E2; } .light .capcard p{ color:var(--l-ink-2); }

/* credibility — full-width ACCENT logo marquee band (sanity.io mechanic) */
.marquee-band{ background:var(--accent); width:100vw; margin-inline:calc(50% - 50vw);
  padding:clamp(30px,4.4vh,54px) 0; overflow:hidden; }
.marquee-label{ text-align:center; color:#0A0A0A; font-family:var(--font-m); font-size:12px;
  letter-spacing:.28em; text-transform:uppercase; opacity:.74; margin-bottom:clamp(22px,3vh,34px); padding:0 var(--gutter); }
.marquee{ overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.marquee-track{ display:flex; align-items:center; gap:clamp(48px,6vw,96px); width:max-content;
  animation:marquee-scroll 46s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track .mlogo{ height:30px; width:auto; flex:none; filter:brightness(0); opacity:.86; }
.marquee-track .mword{ flex:none; font-family:var(--font-h); font-weight:800; font-size:27px; letter-spacing:.005em;
  color:#0A0A0A; text-transform:uppercase; opacity:.9; white-space:nowrap; }
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (max-width:560px){ .marquee-track .mlogo{ height:24px; } .marquee-track .mword{ font-size:22px; } .marquee-track{ gap:44px; } }
.skoolblock{ margin-top:clamp(40px,6vh,72px); border:1px dashed var(--muted); padding:clamp(26px,3.4vw,48px);
  display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center; }
@media (max-width:720px){ .skoolblock{ grid-template-columns:1fr; } }
.skoolblock h3{ font-family:var(--font-h); font-weight:700; text-transform:none; letter-spacing:-.01em; }
.skoolblock p{ margin-top:14px; color:var(--fg-2); font-size:14.5px; line-height:1.7; max-width:56ch; }

/* =========================================================
   SUBPAGE HERO BAND + BREADCRUMBS
   ========================================================= */
.subhero{ padding:clamp(130px,20vh,220px) var(--gutter) clamp(50px,8vh,90px); background:var(--bg); border-bottom:1px solid var(--hair); }
.subhero .eyebrow{ font-family:var(--font-m); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:22px; }
.subhero h1{ max-width:20ch; }
.subhero h1 .it{ color:var(--accent); }
.subhero p.lead{ max-width:62ch; }
.crumbs{ font-family:var(--font-m); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:26px; }
.crumbs a{ text-decoration:none; color:var(--muted); } .crumbs a:hover{ color:var(--accent); }
.crumbs .sep{ color:var(--accent); margin:0 8px; }

/* =========================================================
   PROSE (blog + service body)
   ========================================================= */
.prose{ max-width:72ch; }
.prose h2{ font-family:var(--font-h); font-weight:700; text-transform:none; letter-spacing:-.01em;
  font-size:clamp(1.5rem,3vw,2.4rem); margin-top:clamp(48px,7vh,80px); line-height:1.1; }
.prose h3{ font-family:var(--font-d); font-weight:300; text-transform:none; font-size:clamp(1.25rem,2vw,1.7rem); margin-top:40px; }
.prose p{ margin-top:20px; color:var(--fg-2); font-size:16.5px; line-height:1.8; }
.prose ul{ margin-top:20px; padding-left:0; list-style:none; }
.prose li{ position:relative; padding-left:26px; margin-top:12px; color:var(--fg-2); font-size:16px; line-height:1.75; }
.prose li::before{ content:'\25C6'; position:absolute; left:0; top:.05em; color:var(--accent); font-size:10px; }
.prose a.inline{ color:var(--fg); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; }
.prose a.inline:hover{ color:var(--accent); }
.light .prose p,.light .prose li{ color:var(--l-ink-2); }
.tldr{ margin-top:36px; border-left:2px solid var(--accent); background:var(--surface); padding:24px 26px; }
.tldr .lbl{ font-family:var(--font-m); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); }
.tldr ul{ margin-top:14px; }
.light .tldr{ background:#EAE8E2; }

/* service meta sidebar */
.svc-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:clamp(34px,5vw,80px); align-items:start; }
@media (max-width:960px){ .svc-layout{ grid-template-columns:1fr; } }
.svc-aside{ position:sticky; top:88px; border:1px dashed var(--muted); padding:26px; }
@media (max-width:960px){ .svc-aside{ position:static; } }
.svc-aside .grp{ margin-top:24px; } .svc-aside .grp:first-child{ margin-top:0; }
.svc-aside .glabel{ font-family:var(--font-m); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.svc-aside .line{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-top:1px solid var(--hair); font-size:13px; color:var(--fg-2); }
.svc-aside .line:first-of-type{ border-top:0; }
.svc-aside .line .k{ color:var(--muted); font-family:var(--font-m); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }

/* blog index cards */
.bloglist{ border-top:1px solid var(--hair); }
.blogcard{ display:grid; grid-template-columns:minmax(0,10ch) minmax(0,1fr); gap:clamp(16px,3vw,48px); align-items:baseline;
  padding:clamp(26px,4vh,44px) 0; border-bottom:1px solid var(--hair); text-decoration:none; color:var(--fg); transition:transform .3s var(--ease); }
.blogcard:hover{ transform:translateX(8px); }
.blogcard .bmeta{ font-family:var(--font-m); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); line-height:2; }
.blogcard h3{ font-family:var(--font-h); font-weight:700; text-transform:none; letter-spacing:-.01em; font-size:clamp(1.25rem,2.4vw,2rem); line-height:1.12; }
.blogcard:hover h3{ color:var(--fg); }
.blogcard p{ margin-top:12px; color:var(--fg-2); font-size:14.5px; line-height:1.7; max-width:70ch; }

/* location territory chips + related grid */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.chips span{ font-family:var(--font-m); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-2);
  border:1px solid var(--hair); padding:8px 13px; }
.relgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); }
@media (max-width:760px){ .relgrid{ grid-template-columns:1fr; } }
.relgrid a{ background:var(--bg); padding:22px 24px; text-decoration:none; color:var(--fg); font-family:var(--font-d);
  font-weight:300; text-transform:uppercase; letter-spacing:.02em; font-size:15px; transition:background .3s var(--ease); }
.relgrid a:hover{ background:var(--surface-2); color:var(--accent); }

/* =========================================================
   CTA band + contact form
   ========================================================= */
.ctaband{ background:var(--l-bg); color:var(--l-ink); text-align:left; }
.ctaband h2{ color:var(--l-ink); max-width:18ch; }
.ctaband p.lead{ color:var(--l-ink-2); }
.formbox{ border:1px solid var(--l-border); background:#ECEAE5; padding:clamp(26px,4.5vw,64px);
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(28px,4.5vw,72px); align-items:start; }
@media (max-width:900px){ .formbox{ grid-template-columns:1fr; } }
form.consult{ display:flex; flex-direction:column; }
form.consult .row{ display:flex; flex-direction:column; margin-top:24px; }
form.consult .row:first-of-type{ margin-top:0; }
form.consult label{ font-family:var(--font-m); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--l-muted); margin-bottom:10px; }
form.consult .field{ display:flex; border-bottom:1px solid #B9B5AC; transition:border-color .3s var(--ease); }
form.consult .field:focus-within{ border-color:var(--accent); }
form.consult input,form.consult textarea{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--l-ink);
  font-family:var(--font-b); font-size:16px; padding:14px 0; resize:vertical; }
form.consult input::placeholder,form.consult textarea::placeholder{ color:var(--l-muted); }
form.consult .err{ display:none; margin-top:8px; font-family:var(--font-m); font-size:10.5px; color:#B02114; }
form.consult .row.invalid .field{ border-color:#B02114; }
form.consult .row.invalid .err{ display:block; }
form.consult button{ margin-top:36px; align-self:flex-start; border:0; cursor:pointer; }
/* 14px body floor (mobile pass 2026-07-16) — was 12.5px. This sits under
   the form and tells the visitor what actually happens when they submit;
   "fine print" is not a licence to make the honest part the hardest to
   read. */
form.consult .fine{ margin-top:16px; font-size:14px; color:var(--l-muted); line-height:1.65; }
form.consult .ok{ display:none; margin-top:24px; font-family:var(--font-m); font-size:13px; color:#B02114; }
.promise{ list-style:none; margin-top:8px; }
.promise li{ display:flex; gap:14px; align-items:baseline; padding:14px 0; border-top:1px solid var(--l-border); color:var(--l-ink-2); font-size:14.5px; line-height:1.6; }
.promise li:first-child{ border-top:0; } .promise .tick{ color:var(--accent); font-size:11px; flex:none; }

/* =========================================================
   FOOTER
   ========================================================= */
footer.site{ position:relative; z-index:2; background:var(--bg); padding:clamp(72px,10vh,120px) var(--gutter) 44px; border-top:1px solid var(--hair); }
footer.site .fgrid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:36px 30px; max-width:var(--maxw); margin:0 auto clamp(40px,7vh,72px); }
@media (max-width:1080px){ footer.site .fgrid{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:820px){ footer.site .fgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ footer.site .fgrid{ grid-template-columns:1fr; } }
footer.site .fcol .fh{ font-family:var(--font-m); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
/* 44px minimum tap target. Measured at 390px these sat at 32px — a
   column of stacked links is a NAVIGATION list, not inline prose, so the
   inline-link exemption does not cover it, and the footer is exactly
   where a thumb is least precise. The type size is unchanged; only the
   hit area grows. */
footer.site .fcol a{ display:flex; align-items:center; min-height:44px;
  font-family:var(--font-m); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; padding:7px 0; transition:color .3s var(--ease); }
footer.site .fcol a:hover{ color:var(--fg); }
footer.site .fintro{ max-width:34ch; color:var(--fg-2); font-size:14px; line-height:1.7; }
/* full legal name as a stacked lockup — wraps to two lines by design */
footer.site .fintro .wm{ font-family:var(--font-d); font-weight:300; font-size:16px; letter-spacing:.13em; text-transform:uppercase; color:var(--fg); display:block; margin-bottom:16px; line-height:1.45; }
footer.site .fintro .wm .it{ color:var(--accent); }
/* decorative giant now carries "ZEALOUS DIGITAL" (15 chars, was 7) — the
   ceiling drops from 240px to 138px so one line still fits inside --maxw. */
.giant{ font-size:clamp(30px,9.1vw,138px); line-height:.9; letter-spacing:.03em; color:var(--fg); user-select:none; text-align:center;
  max-width:var(--maxw); margin:0 auto; white-space:nowrap; }
.giant .it{ color:var(--accent); }
footer.site .fmeta{ display:flex; flex-wrap:wrap; gap:12px 4vw; justify-content:space-between; max-width:var(--maxw); margin:clamp(30px,5vh,52px) auto 0;
  padding-top:22px; border-top:1px solid var(--hair); font-family:var(--font-m); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ---- footer legal row (sitewide via footer()) ----
   44px min tap target: these are the links a visitor hunts for on a
   phone, and they sit at the very bottom where thumbs are least precise.
   Underlined, not bare — a legal link should look like a link. */
footer.site .flegal{ display:flex; flex-wrap:wrap; gap:4px 30px; align-items:center;
  max-width:var(--maxw); margin:0 auto; padding-top:14px;
  font-family:var(--font-m); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; }
footer.site .flegal a{ display:inline-flex; align-items:center; min-height:44px; color:var(--muted);
  text-decoration:underline; text-decoration-color:var(--hair); text-underline-offset:4px;
  transition:color .3s var(--ease),text-decoration-color .3s var(--ease); }
footer.site .flegal a:hover{ color:var(--accent); text-decoration-color:var(--accent); }

/* ---- legal prose (privacy.html / terms.html) ----
   These two pages are deliberately NOT block-composed: a statutory
   disclosure is a text a reader must read linearly, and a 3D scroll
   effect over a privacy policy would be user-hostile. What they owe the
   reader instead is a comfortable measure and real body size — 16.5px,
   never the 13-14px grey mouse type legal pages usually get. */
.legal{ max-width:74ch; }
.legal .legalsec + .legalsec{ margin-top:clamp(38px,5.4vh,62px); }
.legal h2{ font-family:var(--font-h); font-weight:700; text-transform:none; letter-spacing:-.01em;
  font-size:clamp(1.15rem,2.1vw,1.5rem); color:var(--l-ink); }
.legal p{ margin-top:16px; font-size:16.5px; line-height:1.8; color:var(--l-ink-2); }
.legal ul{ list-style:none; margin-top:20px; }
.legal li{ display:flex; gap:14px; align-items:baseline; padding:13px 0; border-top:1px solid rgba(5,5,5,.12);
  font-size:16px; line-height:1.75; color:var(--l-ink-2); }
.legal li:first-child{ border-top:0; }
.legal li .d{ color:var(--accent); font-size:9px; flex:none; }
.legal strong{ color:var(--l-ink); font-weight:600; }
.legal code{ font-family:var(--font-m); font-size:.88em; background:rgba(5,5,5,.06); padding:2px 6px; }
.legal a.inline{ color:var(--l-ink); text-decoration:underline; text-decoration-color:var(--accent);
  text-underline-offset:3px; }
.legal a.inline:hover{ color:var(--accent); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; }
  .js-anim .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-screen .vlayer{ transition:none; }
  /* marquee static + centered when motion is reduced */
  .marquee-track{ flex-wrap:wrap; justify-content:center; width:auto; transform:none !important; }
  .marquee{ -webkit-mask-image:none; mask-image:none; }
}