/*
Theme Name: Zeptonic
Theme URI: https://zeptonic.com
Description: Custom GeneratePress child theme for Zeptonic Solutions LLC d/b/a Zeptonic. Custom Zeptonic website theme with a central Site Images manager, native News & Insights publishing, bundled page templates, Appearance → Zeptonic settings, Work Projects portfolio, consent-gated GHL integrations, maintenance mode, and a homepage preloader. No page builder or ACF required.
Author: Zeptonic
Template: generatepress
Version: 2.4.0
Text Domain: zeptonic
Requires at least: 6.4
Requires PHP: 7.4
*/

/* ============================================================
   ZEPTONIC — HOMEPAGE PITCH DEMO
   Single-file static build. No dependencies beyond webfonts.
   ============================================================ */

/* --- 1. TOKENS ------------------------------------------- */
:root{
  /* brand constants (never theme-swap) */
  --ember:#F4511E;          /* brand fill */
  --ember-lift:#FF6B3D;
  --ember-sink:#C93D0F;
  /* --ember-txt / --ember-fill are theme-swapped below: the brand orange
     only clears WCAG AA on dark. On light it needs to sink a few steps. */
  --wire:#4C7DF0;          /* data/UI-mockup blue — keeps ember reserved for actions */
  --wire-soft:#7FA3F5;
  --brand-navy:#12192B;

  /* type */
  --display:'Barlow Condensed',Impact,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono','SF Mono',Menlo,monospace;

  /* rhythm */
  --gutter:clamp(20px,5vw,48px);
  --max:1240px;
  --sec-y:clamp(72px,10vw,132px);
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

html[data-theme="dark"]{
  --bg:#080C16;
  --bg-alt:#0C1220;
  --surface:#12192B;
  --surface-2:#1B2540;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --ink:#F2F5FA;
  --ink-2:#A8B3C9;
  --ink-3:#7683A0;   /* 4.92:1 on #0C1220 */
  --glass:rgba(27,37,64,.55);
  --glass-brd:rgba(255,255,255,.10);
  --shadow-lg:0 40px 90px -30px rgba(0,0,0,.85);
  --shadow-md:0 20px 45px -18px rgba(0,0,0,.7);
  --mesh-a:rgba(244,81,30,.16);
  --mesh-b:rgba(76,125,240,.14);
  --grid-line:rgba(255,255,255,.035);
  --scrim:rgba(8,12,22,.78);
  --ember-txt:#F4511E;   /* 5.62:1 on #080C16 */
  --ok:#4ED88C; --info:#7FA3F5; --ember-hi:#FF6B3D;   /* 5.36:1 on #1B2540 */
  --g1:#F4511E; --g2:#FF6B3D; --g3:#FFCDA8;   /* 5.62 / 6.91 / 13.54 on dark */
  --ember-fill:#F4511E;  /* exact brand orange. White on it is 3.47:1, which is
                            AA for large text — so .btn is set 19px/700 below. */
}
html[data-theme="light"]{
  --bg:#F4F6FB;
  --bg-alt:#EAEEF6;
  --surface:#FFFFFF;
  --surface-2:#F0F3F9;
  --line:rgba(18,25,43,.11);
  --line-strong:rgba(18,25,43,.20);
  --ink:#12192B;
  --ink-2:#4E5B76;
  --ink-3:#5D6A83;   /* 4.68:1 on #0C1220-equivalent light surface */
  --glass:rgba(255,255,255,.72);
  --glass-brd:rgba(18,25,43,.09);
  --shadow-lg:0 40px 80px -32px rgba(18,25,43,.32);
  --shadow-md:0 18px 40px -18px rgba(18,25,43,.22);
  --mesh-a:rgba(244,81,30,.23);
  --mesh-b:rgba(244,81,30,.10);
  --grid-line:rgba(18,25,43,.045);
  --scrim:rgba(244,246,251,.82);
  --ember-txt:#BE3A0E;   /* 4.75:1 — brand orange itself is only 3.21 on light */
  --ok:#137A41; --info:#2A56C4; --ember-hi:#B23509;   /* 5.55:1 on #F0F3F9 */
  --g1:#B23509; --g2:#D45526; --g3:#DE6430;   /* pale peach reads 1.33:1 on light */
  --ember-fill:#F4511E;  /* exact brand orange, both themes */
}

/* --- 2. BASE --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .4s var(--ease),color .4s var(--ease);
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:999;padding:13px 20px;
  background:var(--ember-fill);color:#fff;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec-y);position:relative}
/* No content-visibility here on purpose: the page is 85KB with no images, so
   it bought almost nothing, and the estimated-then-corrected section heights
   made the scroll stutter. Smoothness wins. */

/* --- 3. TYPE --------------------------------------------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ember-txt);
  display:inline-flex;align-items:center;gap:12px;margin:0 0 20px;
}
/* signature: the ember spine — a hairline that anchors every eyebrow */
.eyebrow::before{
  content:"";width:26px;height:2px;background:var(--ember);
  border-radius:2px;flex:none;
}
.eyebrow--muted{color:var(--ink-3)}
.eyebrow--muted::before{background:var(--ink-3)}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0;
  letter-spacing:-.005em;line-height:.94;text-wrap:balance}
h1{font-size:clamp(38px,min(6.2vw,7.6svh),74px);text-transform:uppercase}
h2{font-size:clamp(34px,4.8vw,62px);text-transform:uppercase}
h3{font-size:clamp(24px,2.6vw,34px);text-transform:uppercase;line-height:1}
h4{font-size:19px;text-transform:uppercase;letter-spacing:.01em;line-height:1.1}
p{margin:0 0 18px}
.lede{font-size:clamp(16px,1.5vw,19px);color:var(--ink-2);max-width:60ch;line-height:1.72}
.sub{color:var(--ink-2);font-size:15.5px;line-height:1.7}
.hl{color:var(--ember-txt)}
/* Breathing orange on the value word. Headline type is 38px+ so AA-large
   (3:1) applies, and every gradient stop clears it in both themes. */
/* Premium gradient treatment — reserved for the hero's accent line.
   Solid, warm, shimmering — reads strong even at giant hero sizes. */
.grad{
  background:linear-gradient(100deg,var(--g1) 0%,var(--g2) 42%,var(--g3) 58%,var(--g1) 100%);
  background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:gradShift 7s ease-in-out infinite;
}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .grad{color:var(--ember-txt);-webkit-text-fill-color:currentColor}
}

/* --- 4. BUTTONS ------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border-radius:var(--r-sm);
  font-family:var(--display);font-weight:700;font-size:19px;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s;
  position:relative;
}
.btn svg{width:16px;height:16px;flex:none;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(0)}

.btn--primary{background:var(--ember-fill);color:#fff;box-shadow:0 12px 28px -10px rgba(244,81,30,.6)}
.btn--primary:hover{background:var(--ember-lift);box-shadow:0 18px 38px -12px rgba(244,81,30,.72)}

.btn--ghost{border:1px solid var(--line-strong);color:var(--ink);background:var(--glass);backdrop-filter:blur(10px)}
.btn--ghost:hover{border-color:var(--ember);color:var(--ember)}

.btn--sm{padding:11px 19px;font-size:17px}

.tlink{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
  padding-bottom:3px;border-bottom:1px solid var(--line-strong);
  transition:color .2s,border-color .2s,gap .2s;
}
.tlink:hover{color:var(--ember-txt);border-color:var(--ember);gap:13px}
.tlink svg{width:13px;height:13px}

/* --- 5. HEADER (locked Zeptonic header system) ----------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:900;
  transition:background .35s var(--ease),border-color .35s,backdrop-filter .35s,padding .35s;
  border-bottom:1px solid transparent;padding-block:15px;
}
.hdr.is-stuck{
  background:var(--scrim);backdrop-filter:blur(14px) saturate(150%);
  border-bottom-color:var(--line);padding-block:9px;
}
.hdr__in{display:flex;align-items:center;gap:24px}

/* wordmark — icon tile + Zeptonic, matching the live site lockup */
.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo__mark{width:38px;height:38px;color:var(--ember-fill);flex:none}
.logo__txt{font-family:var(--body);font-weight:700;font-size:23px;
  letter-spacing:-.022em;color:var(--ink);line-height:1}

/* primary nav */
.nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:6px;position:relative;line-height:1;
  font-family:var(--display);font-size:.86rem;font-weight:700;letter-spacing:.055em;
  text-transform:uppercase;color:var(--ink-2);transition:color .2s;padding-block:9px;
}
.nav__link:hover,.nav__item:hover .nav__link,.nav__item:focus-within .nav__link,
.nav__link[aria-current="page"]{color:var(--ember-txt)}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:1px;width:100%;height:1px;background:var(--ember);
  transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.77,0,.18,1);
}
.nav__link:hover::after,.nav__item:hover .nav__link::after,
.nav__link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav__link svg{width:11px;height:11px;transition:transform .3s var(--ease)}
.nav__item:hover .nav__link svg{transform:rotate(180deg)}

/* dropdown — padding-top on the wrapper is the hover bridge, no dead gap */
.nav__drop{
  position:absolute;top:100%;left:50%;padding-top:15px;z-index:5;
  transform:translateX(-50%) translateY(-8px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.nav__item:hover .nav__drop,.nav__item:focus-within .nav__drop{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.nav__card{
  min-width:256px;padding:9px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg);
}
html[data-theme="light"] .nav__card{background:#fff}
.nav__card a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink-2);
  transition:background .18s,color .18s;
}
.nav__card a:hover{background:var(--surface-2);color:var(--ember)}
.nav__card a small{font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}

/* header actions */
.hdr__act{display:flex;align-items:center;gap:13px;flex:none}
.hdr__phone{
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap;transition:color .2s;
  display:inline-flex;align-items:center;gap:8px;
}
.hdr__phone svg{width:13px;height:13px;color:var(--ember)}
.hdr__phone:hover{color:var(--ink)}
.hdr__login{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap;
  padding:10px 17px;border-radius:99px;border:1px solid var(--line-strong);
  background:var(--glass);transition:color .2s,border-color .2s;
}
.hdr__login svg{display:none;width:18px;height:18px}
.hdr__login:hover{color:var(--ember-txt);border-color:var(--ember-txt)}

.tgl{
  width:38px;height:38px;border-radius:8px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;padding:0;line-height:0;
  position:relative;background:var(--surface-2);flex:none;
  transition:border-color .2s,color .2s;
}
.tgl:hover{border-color:var(--ember);color:var(--ember)}
.tgl .zep-icon{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:0;transform:translate(-50%,-50%)}
html[data-theme="dark"] .tgl .i-sun{display:block}
html[data-theme="dark"] .tgl .i-moon{display:none}
html[data-theme="light"] .tgl .i-sun{display:none}
html[data-theme="light"] .tgl .i-moon{display:block}

/* hamburger — hidden on desktop */
.burger{
  width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--ink);display:none;place-items:center;
  flex-shrink:0;transition:border-color .25s,color .25s;
}
.burger:hover{border-color:var(--ember-txt);color:var(--ember-txt)}
.burger svg{width:18px;height:18px}

/* full-screen mobile overlay — numbered links, grouped sub-links */
.mnav{
  position:fixed;inset:0;z-index:890;background:var(--bg);
  padding:92px var(--gutter) 44px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  overflow-y:auto;
}
.mnav.is-open{opacity:1;visibility:visible;transform:none}
.mitem{border-bottom:1px solid var(--line);padding:15px 0}
.mitem__top{display:flex;align-items:baseline;gap:14px}
.mitem__no{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ember-txt);flex:none}
.mitem__top a{font-family:var(--display);font-size:29px;text-transform:uppercase;
  letter-spacing:.02em;line-height:1;color:var(--ink);transition:color .2s}
.mitem__top a:hover{color:var(--ember)}
.mitem__subs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin:13px 0 2px}
.mitem__subs a{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);padding:4px 0;transition:color .2s}
.mitem__subs a:hover{color:var(--ember-txt)}
.mnav__close{position:absolute;top:20px;right:var(--gutter);width:52px;height:52px;
  border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;
  background:var(--surface);color:var(--ink);transition:border-color .2s,color .2s}
.mnav__close:hover{border-color:var(--ember-txt);color:var(--ember-txt)}
.mnav__close svg{width:20px;height:20px}
.mnav__foot{margin-top:auto;padding-top:26px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line)}
.mnav__icons{display:flex;gap:12px}
.mico{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-strong);
  display:grid;place-items:center;background:var(--surface);color:var(--ink);
  transition:border-color .2s,color .2s}
.mico:hover{border-color:var(--ember-txt);color:var(--ember-txt)}
.mico svg{width:20px;height:20px}
.mnav__foot .hdr__phone{display:inline-flex;font-size:.78rem}

/* --- 6. ATMOSPHERE (layered depth, not decoration) -------- */
.mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.mesh__orb{position:absolute;border-radius:50%;opacity:.95}
.mesh__orb--a{width:104vw;height:104vw;top:-44vw;right:-30vw;
  background:radial-gradient(closest-side,var(--mesh-a),transparent 72%)}
.mesh__orb--b{width:92vw;height:92vw;bottom:-46vw;left:-32vw;
  background:radial-gradient(closest-side,var(--mesh-b),transparent 72%)}
.mesh__grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 35%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 35%,#000 30%,transparent 78%);
}

/* --- 7. HERO (shared shell) ------------------------------ */
/* svh, not vh — mobile browser chrome makes vh lie about the real viewport.
   Standing rule: the hero fits one screen at every size. */
.hero{position:relative;padding-top:clamp(108px,13svh,150px);
  padding-bottom:clamp(40px,5.5svh,74px);overflow:hidden}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.1fr);
  gap:clamp(32px,5vw,68px);align-items:center}
.hero h1,.hero h2{margin-bottom:22px}
.hero .slide h2{font-size:clamp(38px,min(6.2vw,7.6svh),74px)}
/* Stacking the slides fixed the container height, but the headline still runs
   2–4 lines, so everything under it shifted. JS pins the headline and lede
   blocks to the tallest of the three, which freezes the CTA row. */
.slide h1,.slide h2{min-height:var(--h1h,auto)}
.slide .hero__lede{min-height:var(--ledeh,auto)}
.hero__lede{margin-bottom:26px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero__stage{position:relative;min-height:clamp(320px,42vw,470px);
  perspective:1400px;transform-style:preserve-3d}

/* --- 7a. HERO: rotating slider ---------------------------- */
/* All three slides share one grid cell, so the block is always as tall as the
   longest slide and nothing below it moves when the slider rotates. */
.slides{display:grid}
.slide{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(10px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out),visibility .45s}
.slide.is-live{opacity:1;visibility:visible;pointer-events:auto;transform:none}
/* compact stand-in for the interface stage on phones */
.hproof{display:none;list-style:none;padding:0;margin:22px 0 0;gap:9px 20px;flex-wrap:wrap}
.hproof li{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.hproof svg{width:13px;height:13px;color:var(--ember-txt);flex:none}
.hproof em{font-style:normal;color:var(--ink-2)}

.sdots{display:flex;gap:10px;margin-top:clamp(20px,3svh,32px);flex-wrap:wrap}
.sdot{
  flex:1 1 0;min-width:120px;text-align:left;padding:12px 0 0;
  border-top:2px solid var(--line);position:relative;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);transition:color .25s;
}
.sdot:hover{color:var(--ink)}
.sdot[aria-selected="true"]{color:var(--ember)}
.sdot::after{content:"";position:absolute;top:-2px;left:0;height:2px;width:0;background:var(--ember)}
.sdot[aria-selected="true"]::after{animation:tick 7s linear forwards}
.sdot[aria-selected="true"].is-paused::after{animation-play-state:paused}
@keyframes tick{to{width:100%}}

/* --- 8. UI MOCKUP SYSTEM (the signature) ------------------ */
/* Real-looking interface panels, layered in Z. Shared by hero + services. */
.stack{position:absolute;inset:0;display:none}
.stack.is-live{display:block}
.panel{
  position:absolute;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);overflow:hidden;
  will-change:transform;
}
html[data-theme="light"] .panel{background:#fff}

.panel__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--line-strong);flex:none}
.dot--live{background:var(--ember)}
.panel__url{margin-left:8px;height:16px;flex:1;border-radius:4px;background:var(--bg-alt);
  display:flex;align-items:center;padding:0 8px;
  font-family:var(--mono);font-size:8.5px;color:var(--ink-3);letter-spacing:.04em}
.panel__body{padding:14px}

/* skeleton primitives */
.sk{background:var(--line);border-radius:4px;height:8px}
.sk--t{height:13px;background:var(--line-strong)}
.sk--w70{width:70%} .sk--w50{width:50%} .sk--w40{width:40%} .sk--w85{width:85%}
.sk--ember{background:var(--ember);height:22px;width:88px;border-radius:5px}
.sk-row{display:flex;gap:8px;align-items:center}
.sk-stack{display:flex;flex-direction:column;gap:7px}
.sk-hero{height:64px;border-radius:8px;
  background:linear-gradient(120deg,var(--wire) 0%,var(--brand-navy) 70%);margin-bottom:12px}
.sk-tile{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:9px}
.sk-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sk-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}

.metric{font-family:var(--mono);font-size:17px;font-weight:700;line-height:1;margin-bottom:5px}
.metric--up{color:var(--ember-hi)}
.metric--wire{color:var(--info)}
.mlabel{font-family:var(--mono);font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}

/* inbox rows */
.inbox-row{display:flex;gap:9px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.inbox-row:last-child{border-bottom:0}
.chan{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;flex:none;
  background:var(--surface-2);border:1px solid var(--line)}
.chan svg{width:11px;height:11px;color:var(--wire)}
.chan--hot{background:rgba(244,81,30,.14);border-color:rgba(244,81,30,.4)}
.chan--hot svg{color:var(--ember)}

/* pipeline */
.pipe{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pipe__col{background:var(--surface-2);border-radius:7px;padding:7px;min-height:74px}
.pipe__card{background:var(--surface);border:1px solid var(--line);border-radius:5px;
  padding:6px;margin-bottom:5px;box-shadow:0 2px 6px rgba(0,0,0,.18)}

/* workflow nodes */
.flow{position:relative;height:100%;min-height:120px}
.node{position:absolute;background:var(--surface-2);border:1px solid var(--line);
  border-radius:8px;padding:7px 10px;display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.node b{width:6px;height:6px;border-radius:50%;background:var(--wire);flex:none}
.node--fire b{background:var(--ember);box-shadow:0 0 0 0 rgba(244,81,30,.6);animation:ping 2.4s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(244,81,30,0)}100%{box-shadow:0 0 0 0 rgba(244,81,30,0)}}
.flow svg.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow svg.wires path{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:4 5}
.flow svg.wires path.hot{stroke:var(--ember);stroke-dasharray:5 6;animation:crawl 1.4s linear infinite}
@keyframes crawl{to{stroke-dashoffset:-22}}

/* floating chip */
.chip{
  position:absolute;display:flex;align-items:center;gap:8px;
  padding:9px 13px;border-radius:10px;background:var(--glass);
  border:1px solid var(--glass-brd);backdrop-filter:blur(14px);
  box-shadow:var(--shadow-md);font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.chip svg{width:13px;height:13px;color:var(--ember);flex:none}
.chip em{font-style:normal;color:var(--ink-2)}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -11px}}
@keyframes breathe{0%,100%{scale:1}50%{scale:1.02}}
.float{animation:bob 6s ease-in-out infinite}
.float--b{animation-duration:7.6s;animation-delay:-2.4s}
.float--c{animation-duration:8.8s;animation-delay:-4.1s}

/* --- IMAGE SLOTS ---------------------------------------- */
/* bob moves `translate`, breathe moves `scale` — both stay off `transform`
   so the pointer parallax can own it without fighting the animation. */
.ph{position:absolute;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);box-shadow:var(--shadow-lg);
  animation:bob 7s ease-in-out infinite,breathe 11s ease-in-out infinite}
.ph--b{animation-duration:8.6s,13s;animation-delay:-3s,-5s}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph__drop{
  height:100%;display:grid;place-content:center;justify-items:center;gap:9px;
  padding:22px;text-align:center;border:1.5px dashed var(--line-strong);border-radius:inherit;
}
.ph__drop svg{width:26px;height:26px;color:var(--ember);opacity:.75}
.ph__dim{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
.ph__what{font-size:12.5px;line-height:1.45;color:var(--ink-2);max-width:24ch;margin:0}

/* --- 9. VALUE STRIP -------------------------------------- */
.strip{border-block:1px solid var(--line);background:var(--bg-alt);overflow:hidden;position:relative;z-index:3}
.strip__track{display:flex;width:max-content;animation:slide 42s linear infinite}
.strip:hover .strip__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.strip__set{display:flex;align-items:center;flex:none}
.strip__item{display:flex;align-items:center;gap:11px;padding:17px 30px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.strip__item svg{width:14px;height:14px;color:var(--ember);flex:none}
.strip__item--pin{color:var(--ink-3)}
.strip__item--pin svg{color:var(--ink-3)}
.strip__sep{width:4px;height:4px;border-radius:50%;background:var(--line-strong);flex:none}

/* --- 10. SECTION HEAD ------------------------------------ */
.shead{max-width:820px;margin-bottom:clamp(40px,5vw,64px)}
.shead h2{margin-bottom:20px}

/* --- 11. SERVICES ---------------------------------------- */
.svc{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(30px,5vw,72px);align-items:center;
  padding-block:clamp(38px,5vw,60px);border-top:1px solid var(--line);
}
.svc:last-of-type{border-bottom:1px solid var(--line)}
.svc--flip .svc__art{order:-1}
.svc__no{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ember-txt);display:inline-flex;align-items:center;gap:11px;margin-bottom:16px}
.svc__no::before{content:"";width:20px;height:2px;background:var(--ember);border-radius:2px;flex:none}
.svc h3{margin-bottom:16px}
.svc__sum{color:var(--ink-2);font-size:15.5px;margin-bottom:22px;max-width:52ch}
.svc__list{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:10px}
.svc__list li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-2)}
.svc__list svg{width:15px;height:15px;color:var(--ember);flex:none;margin-top:4px}
.svc__act{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.svc__art{position:relative;min-height:clamp(260px,30vw,340px)}

/* --- 12. WHY --------------------------------------------- */
.why{background:var(--bg-alt);border-block:1px solid var(--line);position:relative;overflow:hidden}
.why__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(34px,5vw,72px);align-items:start}
.vals{display:grid;gap:0}
.val{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.val:first-child{border-top:0;padding-top:0}
.val__ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);flex:none;
  transition:border-color .3s,transform .3s var(--ease)}
.val__ic svg{width:19px;height:19px;color:var(--ember)}
.val:hover .val__ic{border-color:var(--ember);transform:translateY(-3px)}
.val h3{font-size:19px;text-transform:uppercase;letter-spacing:.01em;line-height:1.1;margin-bottom:7px}
.val p{margin:0;color:var(--ink-2);font-size:14.5px}

/* --- 13. PROOF ------------------------------------------- */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px;margin-bottom:44px}
.case{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;display:flex;flex-direction:column;gap:14px;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s var(--ease);
}
.case:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:var(--shadow-md)}
.case__tag{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:9px}
.case__tag span{width:5px;height:5px;border-radius:50%;background:var(--ember)}
.case h3{font-size:21px;line-height:1}
.case p{margin:0;font-size:14.5px;color:var(--ink-2);flex:1}
/* Deliverables instead of numbers: a shipped feature is verifiable, a
   percentage isn't. Status pill keeps live work separate from in-progress. */
.stat{margin-left:auto;flex:none;font-family:var(--mono);font-size:8.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:99px;border:1px solid}
.stat--live{color:var(--ok);border-color:rgba(47,191,113,.45);background:rgba(47,191,113,.12)}
.stat--dev{color:var(--info);border-color:rgba(76,125,240,.45);background:rgba(76,125,240,.12)}
.stat--concept{color:var(--ink-3);border-color:var(--line-strong);background:var(--surface-2)}
.case__built{display:flex;flex-wrap:wrap;gap:7px;padding-top:16px;border-top:1px solid var(--line)}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);padding:6px 10px;border-radius:6px;border:1px solid var(--line);
  background:var(--surface-2);white-space:nowrap}

/* --- 13b. PROCESS BAND ----------------------------------- */
.how{background:var(--bg-alt);border-block:1px solid var(--line);padding-block:clamp(44px,6vw,64px)}
.how__in{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(26px,4vw,60px);align-items:center}
.how .eyebrow{margin:0;white-space:nowrap}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,34px);position:relative}
.step{position:relative;padding-top:24px}
.step::before{content:"";position:absolute;top:5px;left:0;right:-18px;height:1px;background:var(--line)}
.step:last-child::before{right:0}
.step::after{content:"";position:absolute;top:1px;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--ember);box-shadow:0 0 0 4px var(--bg-alt)}
.step__no{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ember-txt);
  display:block;margin-bottom:7px}
.step h3{font-size:17px;line-height:1.05;margin-bottom:6px}
.step p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55}

/* client logo strip — auto-scrolls, loops seamlessly, pauses on hover */
.lmq{position:relative;overflow:hidden;padding:8px 0;border-block:1px solid var(--line)}
.lmq::before,.lmq::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.lmq::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.lmq::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.lmq__track{display:flex;width:max-content;animation:lslide 40s linear infinite}
.lmq:hover .lmq__track,.lmq:focus-within .lmq__track{animation-play-state:paused}
@keyframes lslide{to{transform:translateX(-50%)}}
.lmq__set{display:flex;align-items:center;flex:none}
.lmark{display:grid;place-items:center;padding:0 18px;flex:none}
.lmark img{max-height:40px;width:auto;object-fit:contain;
  opacity:.62;filter:grayscale(1);transition:opacity .3s,filter .3s}
.lmark:hover img{opacity:1;filter:none}
/* placeholder tile — same footprint a real logo file will occupy */
.lmark__slot{
  width:152px;height:56px;display:grid;place-items:center;gap:3px;
  border:1.5px dashed var(--line-strong);border-radius:10px;background:var(--surface);
  transition:border-color .3s,color .3s;
}
.lmark:hover .lmark__slot{border-color:var(--ember)}
.lmark__slot b{font-family:var(--display);font-size:15px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-2);line-height:1}
.lmark__slot i{font-family:var(--mono);font-style:normal;font-size:8px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.lmq__cap{text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:20px}

/* --- 14. FINAL CTA --------------------------------------- */
.fcta{position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(170deg,var(--bg) 0%,var(--brand-navy) 100%)}
html[data-theme="light"] .fcta{background:linear-gradient(170deg,var(--bg-alt) 0%,#DCE3EF 100%)}
.fcta__in{position:relative;z-index:3;max-width:800px;margin:0 auto}
.fcta .eyebrow{justify-content:center}
.fcta h2{margin-bottom:20px}
.fcta .lede{margin:0 auto 32px}
.fcta__btns{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-bottom:22px}
.fcta__note{font-size:14px;color:var(--ink-2);margin:0}
.fcta__note a{color:var(--ember-txt);border-bottom:1px solid transparent;transition:border-color .2s}
.fcta__note a:hover{border-color:var(--ember)}
.fcta .chip{position:absolute;z-index:2}

/* --- 15. FOOTER ------------------------------------------ */
.ftr{background:var(--bg-alt);border-top:1px solid var(--line);padding-top:clamp(56px,7vw,84px)}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,3fr);
  gap:clamp(32px,5vw,60px);padding-bottom:48px;border-bottom:1px solid var(--line)}
.ftr__brand .logo{margin-bottom:16px}
.ftr__tag{font-family:var(--display);font-size:19px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--ember-txt);margin-bottom:10px;line-height:1.05}
.ftr__brand p{font-size:14.5px;color:var(--ink-2);max-width:34ch}
.ftr__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:28px}
.fcol h3{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 15px;line-height:1.4}
.fcol ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.fcol a{font-size:14px;color:var(--ink-2);transition:color .2s,padding-left .2s}
.fcol a:hover{color:var(--ember);padding-left:4px}

.ftr__mid{display:flex;flex-wrap:wrap;gap:14px 34px;padding-block:26px;border-bottom:1px solid var(--line)}
.fmeta{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)}
.fmeta svg{width:15px;height:15px;color:var(--ember);flex:none}
.fmeta a:hover{color:var(--ember)}

.ftr__btm{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;
  justify-content:space-between;padding-block:22px}
.ftr__btm p{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
.ftr__legal{display:flex;flex-wrap:wrap;gap:20px}
.ftr__legal a{font-size:13px;color:var(--ink-3)}
.ftr__legal a:hover{color:var(--ember)}

/* --- 15b. UTILITY FABS (live chat + back to top) --------- */
.futil{position:fixed;right:20px;bottom:92px;z-index:890;display:grid;gap:10px;justify-items:center}
.futil button{
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  box-shadow:var(--shadow-md);
  transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s,opacity .3s,visibility .3s;
}
.futil button:hover{transform:translateY(-3px);border-color:var(--ember);color:var(--ember)}
.futil button svg{width:20px;height:20px}
.futil__chat{background:var(--ember-fill)!important;color:#fff!important;border-color:transparent!important;
  box-shadow:0 12px 28px -10px rgba(244,81,30,.65)!important}
.futil__chat:hover{background:var(--ember-lift)!important;color:#fff!important}
.futil__chat span{position:absolute;top:11px;right:11px;width:9px;height:9px;border-radius:50%;
  background:#3DDC84;border:2px solid var(--ember-fill)}
.futil__top{opacity:0;visibility:hidden;transform:translateY(12px)}
.futil__top.is-up{opacity:1;visibility:visible;transform:none}

/* --- 16. MOBILE FAB -------------------------------------- */
/* Never span full width — reserve the right rail for chat / back-to-top. */
.fab{
  position:fixed;left:var(--gutter);right:calc(var(--gutter) + 88px);bottom:16px;z-index:880;
  display:none;justify-content:center;box-shadow:0 16px 40px -12px rgba(0,0,0,.6);
  transform:translateY(140%);transition:transform .4s var(--ease-out);
  max-width:none;width:auto;
}
.fab.is-up{transform:none}

/* --- 18. SCROLL REVEAL ----------------------------------- */
.rv{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s} .rv-d3{transition-delay:.24s}

/* --- 19. RESPONSIVE -------------------------------------- */
/* minmax(0,1fr) matters: a plain 1fr column refuses to shrink below its
   content and blows the page out horizontally on narrow screens. */
@media(max-width:1180px){
  .nav{display:none}
  .burger{display:grid}
  .hdr__act{margin-left:auto}   /* nav is gone, so it can't push these right */
  .hero__in,.why__in{grid-template-columns:minmax(0,1fr)}
  .hero__stage{min-height:400px;order:2}
  /* live-site mobile lockup: three circular buttons beside the wordmark */
  .tgl{border-radius:50%;width:38px;height:38px;background:transparent;border-color:var(--line)}
  .hdr__login{width:38px;height:38px;padding:0;border-radius:50%;background:transparent;
    border-color:var(--line)}
  .hdr__login svg{width:18px;height:18px}
  .tgl svg{width:17px;height:17px}
  .hdr__login span{display:none}
  .hdr__login svg{display:block}
  .hdr__act{gap:9px}
  .logo__mark{width:36px;height:36px}
  .logo__txt{font-size:21px}
  .svc{grid-template-columns:minmax(0,1fr);gap:34px}
  .svc--flip .svc__art{order:0}
  .ftr__top{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:720px){
  .hdr__phone{display:none}
  /* Stack chat + top above the Get started bar’s right edge, never under it */
  .futil{right:14px;bottom:16px;gap:9px;z-index:890}
  .futil button{width:52px;height:52px}
  .fab{
    display:flex;
    left:14px;
    /* 14 gutter + ~60 chat bubble + 24 clear gap between CTA and chat */
    right:98px;
    bottom:16px;
  }
  .hero{padding-top:104px;padding-bottom:34px}

  /* Phones composite blur far more expensively, and every extra looping
     animation is another layer to repaint on each scroll frame. */
  .hdr.is-stuck{backdrop-filter:blur(10px)}
  .btn--ghost,.hdr__login,.chip,.paths{backdrop-filter:none}
  .svc__art .ph{animation:none}
  .mesh__grid{display:none}

  /* The interface stack is illegible below ~700px and pushes the CTA off
     screen, so phones get the copy plus a one-line proof row instead. */
   .hproof{display:none}

  .svc__art{min-height:250px}
  .svc__art .panel:not(.float){width:86%!important}
  .svc__art .panel.float{width:44%!important}
  .svc__art .chip{display:none}
  .fcta .chip{display:none}

  .sdots{gap:6px}
  .sdot{min-width:0;flex:1;font-size:9px;letter-spacing:.08em}
  /* 19px display type makes some labels wider than a phone. Let buttons
     take the full row and wrap rather than pushing the page sideways. */
  .btn{white-space:normal;text-align:center}
  .hero__cta .btn,.fcta__btns .btn,.svc__act .btn{flex:1 1 100%;width:100%}
  .svc__act{gap:16px;flex-direction:column;align-items:stretch}
  .svc__act .tlink{align-self:flex-start}
  .how__in,.steps{grid-template-columns:minmax(0,1fr)}
  .steps{gap:22px}
  .step::before{right:0}
  .ftr__btm{justify-content:flex-start}
  body{padding-bottom:70px}
}

/* --- 20. REDUCED MOTION ---------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .lmq__track,.strip__track{animation:none!important;width:100%;flex-wrap:wrap;justify-content:center}
  .lmq__set,.strip__set{flex-wrap:wrap;justify-content:center}
}


/* ---- WEBSITE SERVICES PAGE ---- */
.svc__for{font-size:14px;color:var(--ink-2);margin:0 0 22px;padding:12px 15px;
  border-left:2px solid var(--ember);background:var(--surface-2);border-radius:0 8px 8px 0}
.svc__for b{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ember-hi);margin-right:8px}
.svc__sum strong{color:var(--ink);font-weight:600}
.focus{background:var(--bg-alt);border-block:1px solid var(--line)}
.quad{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:clamp(22px,3vw,36px)}
.qcard{padding-top:22px;border-top:2px solid var(--line);transition:border-top-color .3s var(--ease)}
.qcard:hover{border-top-color:var(--ember)}
.qcard__ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);margin-bottom:16px;
  transition:border-color .3s,transform .3s var(--ease)}
.qcard:hover .qcard__ic{border-color:var(--ember);transform:translateY(-3px)}
.qcard__ic svg{width:19px;height:19px;color:var(--ember-txt)}
.qcard h3{font-size:18px;text-transform:uppercase;letter-spacing:.01em;line-height:1.12;margin-bottom:9px}
.qcard p{margin:0;font-size:14.5px;color:var(--ink-2)}
.why__art{position:relative}
.why__art .chip{position:absolute}
@media(max-width:1180px){ .why__art{margin-top:8px} }
/* ---- WEBSITE SCORE PAGE ---- */
.scan{padding-bottom:clamp(48px,6svh,80px)}
.scan__in{max-width:760px}
.scan h1{margin-bottom:20px}
.scan .lede{margin-bottom:32px}
.scan__form{max-width:640px}
.scan__label{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.scan__row{display:flex;gap:10px}
.scan__input{
  flex:1;min-width:0;padding:15px 18px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  font:inherit;font-size:16px;transition:border-color .2s;
}
.scan__input::placeholder{color:var(--ink-3)}
.scan__input:focus{outline:none;border-color:var(--ember)}
.scan__input[aria-invalid="true"]{border-color:#E5484D}
.scan__note{font-size:13.5px;color:var(--ink-2);margin:12px 0 0}
.scan__err{font-size:14px;color:#FF7A80;margin:12px 0 0}
html[data-theme="light"] .scan__err{color:#C22930}

/* progress */
.prog__in{max-width:520px;margin:0 auto;text-align:center}
.prog__ring{position:relative;width:120px;margin:0 auto 24px}
.prog__ring circle{transition:stroke-dashoffset .5s var(--ease)}
.prog__pct{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:21px;font-weight:700;color:var(--ink)}
.prog__step{font-family:var(--display);font-size:22px;text-transform:uppercase;
  letter-spacing:.02em;margin-bottom:10px}

/* results */
.rslt__site{font-family:var(--mono);font-size:15px;letter-spacing:.04em;color:var(--ember-txt);
  word-break:break-all}
.rslt__bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.rslt__hint{margin:0;font-size:13.5px;color:var(--ink-2)}
.views{display:flex;gap:5px;padding:5px;background:var(--glass);
  border:1px solid var(--glass-brd);border-radius:11px;width:fit-content}
.view{padding:9px 20px;border-radius:7px;font-family:var(--mono);font-size:11.5px;
  font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);
  transition:color .25s,background .25s}
.view:hover{color:var(--ink)}
.view[aria-selected="true"]{background:var(--ember-fill);color:#12192B;font-weight:700}
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:18px;margin-bottom:22px}
.cat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;transition:transform .3s var(--ease),border-color .3s}
.cat:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.cat__top{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.cat__ring{position:relative;width:66px;height:66px;flex:none}
.cat__ring svg{transform:rotate(-90deg)}
.cat__ring circle{transition:stroke-dashoffset 1s var(--ease-out)}
.cat__num{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:19px;font-weight:700}
.cat h3{font-size:17px;line-height:1.1;margin-bottom:3px}
.cat__status{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase}
.cat p{margin:0 0 8px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.cat__why{padding-top:10px;border-top:1px solid var(--line)}
.cat__why b{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);display:block;margin-bottom:4px;font-weight:500}
.cat .tlink{margin-top:12px;font-size:11px}
.c-good{color:var(--ok)} .c-mid{color:var(--warn)} .c-poor{color:var(--bad)}
.s-good{stroke:var(--ok)} .s-mid{stroke:var(--warn)} .s-poor{stroke:var(--bad)}
.guide{display:flex;gap:22px;flex-wrap:wrap}
.guide__item{display:flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.guide__dot{width:9px;height:9px;border-radius:50%}
.guide__dot--good{background:var(--ok)} .guide__dot--mid{background:var(--warn)} .guide__dot--poor{background:var(--bad)}

/* findings */
.findings{background:var(--bg-alt);border-block:1px solid var(--line)}
.finds{display:grid;gap:14px;max-width:860px}
.find{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:20px 22px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.find__no{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ember-txt);
  padding-top:3px}
.find h3{font-size:17px;line-height:1.15;margin-bottom:6px}
.find p{margin:0 0 6px;font-size:14px;color:var(--ink-2);line-height:1.6}
.find__svc{display:inline-flex;align-items:center;gap:7px;margin-top:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ember-txt)}
.find__svc svg{width:12px;height:12px}

/* lead form */
.lead{border-top:1px solid var(--line)}
.lead__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:start}
.lead__form{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:clamp(24px,3vw,36px);display:grid;gap:16px}
.lead__fields{display:grid;gap:16px}
.lead__fields[hidden]{display:none!important}
/* .btn {display:inline-flex} overrides UA [hidden] — force hide when set */
.btn[hidden]{display:none!important}
.fld--hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.fld label{display:block;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.fld__opt{color:var(--ink-3);letter-spacing:.08em}
.fld input{width:100%;padding:13px 15px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);
  font:inherit;font-size:15px;transition:border-color .2s}
.fld input:focus{outline:none;border-color:var(--ember)}
.fld input[readonly]{color:var(--ink-2);background:var(--surface-2)}
.fld input[aria-invalid="true"]{border-color:#E5484D}
.lead__fine{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.55}
.lead__done{display:grid;grid-template-columns:auto 1fr;gap:13px;padding:16px;
  border-radius:var(--r-md);border:1px solid rgba(47,191,113,.45);background:rgba(47,191,113,.1)}
/* display:grid above overrides the UA [hidden] rule — keep success states closed until JS opens them */
.lead__done[hidden]{display:none!important}
.lead__done svg{width:20px;height:20px;color:var(--ok);margin-top:2px}
.lead__done b{display:block;margin-bottom:3px}
.lead__done p{margin:0;font-size:13.5px;color:var(--ink-2)}
/* Full-card success state: replaces the form until the page is refreshed */
.lead__done--full{
  grid-template-columns:1fr;justify-items:center;text-align:center;
  gap:14px;padding:clamp(40px,7vw,72px) clamp(20px,4vw,36px);
  min-height:min(420px,70vh);place-content:center;
  border:1px solid rgba(47,191,113,.4);background:rgba(47,191,113,.08);
  border-radius:var(--r-lg);outline:none}
.lead__done--full .lead__done-ic{
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(47,191,113,.18);border:1px solid rgba(47,191,113,.45);
  margin-bottom:4px}
.lead__done--full .lead__done-ic svg{width:32px;height:32px;margin:0;color:var(--ok)}
.lead__done--full b{
  font-family:var(--display);font-weight:700;font-size:clamp(28px,4vw,36px);
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin:0;line-height:1.1}
.lead__done--full p{
  margin:0;max-width:32ch;font-size:16px;line-height:1.55;color:var(--ink-2)}
.lead__done--full a{color:var(--ember-txt,var(--ember));text-decoration:underline;text-underline-offset:2px}
.lead__form.is-sent{gap:0}
@media(max-width:860px){
  .scan__row{flex-direction:column}
  .lead__in{grid-template-columns:minmax(0,1fr)}
  .find{grid-template-columns:1fr}
  .find__no{padding:0}
}
/* ---- DESIGN & REVAMPS PAGE ---- */
/* Base components this page shares with the websites overview page.
   (The shared shell predates them, so they're declared here too.) */
.intro{position:relative;overflow:hidden;padding:clamp(120px,15svh,168px) 0 clamp(36px,5svh,60px)}
.intro__in{position:relative;z-index:2;max-width:800px}
.intro h1{margin-bottom:20px}
.intro .lede{margin-bottom:30px}
.pick2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.pick{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:clamp(24px,3vw,34px);position:relative;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s var(--ease)}
.pick:hover{transform:translateY(-6px);border-color:var(--ember);box-shadow:var(--shadow-md)}
.pick__no{position:absolute;top:22px;right:26px;font-family:var(--display);font-size:44px;
  font-weight:700;color:var(--line-strong);line-height:1;transition:color .3s}
.pick:hover .pick__no{color:var(--ember)}
.pick h3{font-size:clamp(20px,2vw,26px);margin-bottom:12px;padding-right:52px}
.pick__lead{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 12px}
.pick .svc__list{margin-bottom:22px}
.pick__cta{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ember-txt)}
.pick__cta svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.pick:hover .pick__cta svg{transform:translateX(4px)}
.anchor{scroll-margin-top:84px}
.anchor .svc{border-top:0;padding-top:0}
.revamp{background:var(--bg-alt);border-block:1px solid var(--line)}
.list__lbl{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 12px}
.svc__list+.list__lbl,.tagrow+.list__lbl{margin-top:22px}
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tagrow--lg .tag{font-size:11px;padding:9px 14px}
.quad--5{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.steps--5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:940px){.steps--5{grid-template-columns:minmax(0,1fr)}}
.xsell{max-width:820px}
/* ---- HOSTING & WEBSITE CARE PAGE ---- */
.oneteam{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(30px,5vw,72px);align-items:start}
.oneteam__list{padding-top:8px}
.keyline{margin:26px 0 0;padding:18px 22px;border-left:3px solid var(--ember);
  background:var(--surface-2);border-radius:0 var(--r-md) var(--r-md) 0;
  font-family:var(--display);font-size:clamp(18px,1.8vw,23px);font-weight:600;
  text-transform:uppercase;letter-spacing:.015em;line-height:1.25;color:var(--ink)}
.scope{font-size:14px;color:var(--ink-2);max-width:70ch;margin:0 0 34px;
  padding:12px 15px;border-left:2px solid var(--line-strong);background:var(--surface-2);
  border-radius:0 8px 8px 0}
.scope a{color:var(--ember-hi);text-decoration:underline;text-underline-offset:3px}
.scope a:hover{color:var(--ember-lift)}

/* plan cards */
.plan3{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:20px;align-items:start}
.plan{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:clamp(24px,2.6vw,32px);
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s var(--ease)}
.plan:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.plan--hot{border-color:var(--ember)}
.plan__flag{position:absolute;top:-12px;left:24px;padding:5px 12px;border-radius:99px;
  background:var(--ember-fill);color:#12192B;font-family:var(--mono);font-size:9.5px;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.plan h3{font-size:21px;margin-bottom:10px}
.plan__price{display:flex;align-items:baseline;gap:5px;margin-bottom:12px}
.plan__price b{font-family:var(--display);font-size:clamp(36px,3.4vw,46px);font-weight:700;line-height:1}
.plan__price span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-2)}
.plan__for{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0 0 18px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.plan__list{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:9px}
.plan__list li{font-size:13.5px;color:var(--ink-2);padding-left:22px;position:relative;line-height:1.5}
.plan__list li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;
  border-radius:3px;background:rgba(244,81,30,.16);border:1px solid rgba(244,81,30,.5)}
.plan__list b{color:var(--ink);font-weight:600}
.plan__list--2col{grid-template-columns:1fr 1fr;gap:9px 16px}
.plan__inc{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);line-height:1.8;margin:0 0 20px;padding-top:14px;border-top:1px solid var(--line)}
.plan__inc b{color:var(--ember-hi)}
.plan__btn{width:100%}
.plan--care{max-width:560px}

/* comparison table */
.compare{background:var(--bg-alt);border-block:1px solid var(--line)}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);-webkit-overflow-scrolling:touch}
.tblwrap:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.tbl{width:100%;min-width:640px;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:12px 18px;text-align:left;border-bottom:1px solid var(--line)}
.tbl thead th{font-family:var(--display);font-size:15px;text-transform:uppercase;
  letter-spacing:.05em;background:var(--surface-2);position:sticky;top:0}
.tbl tbody th{font-weight:500;color:var(--ink-2);font-size:13.5px;
  position:sticky;left:0;background:var(--surface);min-width:150px}
.tbl td{color:var(--ink)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl__hot{background:rgba(244,81,30,.07)}
.tbl thead .tbl__hot{color:var(--ember-hi)}

/* website care split */
.care{background:var(--bg-alt);border-block:1px solid var(--line)}
.care__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,5vw,72px);align-items:center}
.care__host{display:flex;gap:11px;align-items:flex-start;margin:20px 0 0;
  padding:14px 16px;border-radius:var(--r-md);font-size:14.5px;color:var(--ink);
  border:1px solid rgba(47,191,113,.45);background:rgba(47,191,113,.1)}
.care__host svg{width:16px;height:16px;color:var(--ok);flex:none;margin-top:3px}
.pick--static{cursor:default}
.pick--static:hover{transform:none;box-shadow:none;border-color:var(--line)}
.pick--hot,.pick--static.pick--hot:hover{border-color:var(--ember)}
.pick--static .pick__cta:hover svg{transform:translateX(4px)}

/* FAQ */
.faq{display:grid;gap:10px}
.qa{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  transition:border-color .25s}
.qa[open]{border-color:var(--line-strong)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 20px;cursor:pointer;list-style:none;font-weight:600;font-size:15.5px;
  color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary svg{width:15px;height:15px;flex:none;color:var(--ink-2);transition:transform .3s var(--ease)}
.qa[open] summary svg{transform:rotate(180deg);color:var(--ember-txt)}
.qa summary:hover{color:var(--ember-txt)}
.qa p{margin:0;padding:0 20px 18px;font-size:14.5px;color:var(--ink-2);line-height:1.65}
.tagrow{display:flex;flex-wrap:wrap;gap:8px}
a.pick:hover{transform:translateY(-6px);border-color:var(--ember);box-shadow:var(--shadow-md)}
.pick h3{font-size:clamp(20px,2vw,26px);margin-bottom:14px}
@media(max-width:940px){
  .oneteam,.care__in{grid-template-columns:minmax(0,1fr)}
  .plan__list--2col{grid-template-columns:1fr}
}
@media(max-width:720px){
  /* Long labels: trim the inline price on phones. Button type must stay
     >=18.66px bold — that is the AA-large threshold the exact brand orange
     relies on for white text. */
  .btn{font-size:18.7px;letter-spacing:.02em;padding-inline:16px;
    overflow-wrap:anywhere}
  .btn__px{display:none}
}
@media(max-width:1180px){ .why__art{margin-top:8px} }


/* ---- CRM OVERVIEW PAGE ---- */
.prob{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(30px,5vw,72px);align-items:start}
.prob__list{padding-top:8px}
.prob__list svg{color:var(--bad)!important}
.journey{background:var(--bg-alt);border-block:1px solid var(--line)}
.jrny{list-style:none;counter-reset:j;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:10px 8px;align-items:center}
.jrny li{counter-increment:j;position:relative;display:flex;align-items:center;gap:10px;
  padding:12px 18px;background:var(--surface);border:1px solid var(--line);
  border-radius:99px;font-family:var(--display);font-size:15px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.jrny li::before{content:counter(j,decimal-leading-zero);font-family:var(--mono);
  font-size:10px;font-weight:500;letter-spacing:.1em;color:var(--ember-txt)}
.jrny li:not(:last-child)::after{content:"";width:16px;height:1.5px;background:var(--line-strong);
  position:absolute;right:-13px;top:50%}
.jrny li:last-child{border-color:var(--ember);color:var(--ember-txt)}
.pick2--crm .pick h3{padding-right:0}
.pick__sub{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin:0 0 16px}
.pick .qcard__ic{margin-bottom:16px}
.bub{max-width:88%;padding:11px 14px;border-radius:14px;font-size:13.5px;line-height:1.55;
  margin-bottom:9px;color:var(--ink)}
.bub--in{background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.bub--out{background:rgba(244,81,30,.13);border:1px solid rgba(244,81,30,.4);
  margin-left:auto;border-bottom-right-radius:4px}
.qcard:hover .qcard__ic,.pick:hover .qcard__ic{border-color:var(--ember);transform:translateY(-3px)}
.pick h3{font-size:clamp(19px,1.9vw,24px);margin-bottom:12px}
@media(max-width:940px){ .prob{grid-template-columns:minmax(0,1fr)} }
@media(max-width:560px){
  .jrny{flex-direction:column;align-items:stretch}
  .jrny li:not(:last-child)::after{right:auto;left:26px;top:auto;bottom:-11px;width:1.5px;height:12px}
}
@media(max-width:1180px){ .why__art{margin-top:8px} }


/* ---- UNIFIED COMMUNICATION PAGE (concise) ---- */
#problem .prob__list svg{color:var(--bad)!important}
.quad--6{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.qcard h3{font-size:18px;text-transform:uppercase;letter-spacing:.01em;line-height:1.12;margin-bottom:0}
.svc__for{font-size:14px;color:var(--ink-2);margin:0;padding:12px 15px;
  border-left:2px solid var(--ember);background:var(--surface-2);border-radius:0 8px 8px 0}
.scope{font-size:14px;color:var(--ink-2);max-width:70ch;margin:0;
  padding:12px 15px;border-left:2px solid var(--line-strong);background:var(--surface-2);
  border-radius:0 8px 8px 0}
@media(max-width:1180px){ .why__art{margin-top:8px} }


/* ---- LEAD & PROJECT MANAGEMENT PAGE (concise) ---- */
.pick:hover .qcard__ic{border-color:var(--ember);transform:translateY(-3px)}
.pick h3{font-size:clamp(19px,1.9vw,24px);margin-bottom:14px}
.pick .svc__list{margin-bottom:0}
@media(max-width:1180px){ .why__art{margin-top:8px} }


/* ---- AFTER-HOURS AUTOMATION PAGE (concise) ---- */
.flow{display:grid;gap:10px}
.flow__row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.3fr);
  align-items:center;gap:14px;padding:13px 18px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md)}
.flow__if{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2)}
.flow__row>svg{width:14px;height:14px;color:var(--ember-txt)}
.flow__then{font-size:14.5px;font-weight:600;color:var(--ink)}
.jrny{list-style:none;counter-reset:j;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 8px}
.jrny--stack{flex-direction:column;align-items:stretch}
.jrny--stack li:not(:last-child)::after{content:"";width:1.5px;height:12px;
  background:var(--line-strong);position:absolute;left:26px;bottom:-11px}
.ex__art{position:relative}
.quad--6{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(22px,3vw,36px)}
@media(max-width:940px){ .prob{grid-template-columns:minmax(0,1fr)} .ex__art{margin-top:10px} }
@media(max-width:600px){
  .flow__row{grid-template-columns:minmax(0,1fr);gap:7px}
  .flow__row>svg{transform:rotate(90deg);justify-self:start}
}
@media(max-width:1180px){ .why__art{margin-top:8px} }


/* ---- REPUTATION & SOCIAL MEDIA PAGE (concise) ---- */
.pick2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;align-items:start}
.pick .svc__list{margin-bottom:18px}
.pick .btn{white-space:normal;text-align:center;width:100%}
@media(max-width:1180px){ .why__art{margin-top:8px} }


/* ---- PRICING PAGE ---- */
.plan2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;align-items:start}
.plan{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:clamp(24px,2.8vw,34px);
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s var(--ease)}
.plan__flag--alt{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-strong)}
.plan__name{font-size:clamp(22px,2.2vw,28px);margin-bottom:10px}
.plan__price{display:flex;align-items:baseline;gap:6px;margin-bottom:12px}
.plan__price b{font-family:var(--display);font-size:clamp(38px,3.6vw,50px);font-weight:700;line-height:1}
.plan__price span{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-2)}
.plan__for{font-size:14px;color:var(--ink-2);line-height:1.6;margin:0 0 20px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.plan__list{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px}
.inc{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(24px,3vw,38px)}
.inc__col{padding-top:22px;border-top:2px solid var(--line);transition:border-top-color .3s var(--ease)}
.inc__col:hover{border-top-color:var(--ember)}
.inc__col h3{font-size:17px;text-transform:uppercase;letter-spacing:.01em;line-height:1.12;margin-bottom:12px}
.inc__col ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.inc__col li{font-size:13.5px;color:var(--ink-2);line-height:1.5;padding-left:19px;position:relative}
.inc__col li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;
  border-radius:2px;background:var(--ember)}
.qcard__ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);margin-bottom:14px;
  transition:border-color .3s,transform .3s var(--ease)}
.inc__col:hover .qcard__ic,.pick:hover .qcard__ic{border-color:var(--ember);transform:translateY(-3px)}
.prob{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(30px,5vw,72px);align-items:start}
.mloc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(20px,2.4vw,28px);display:grid;gap:10px}
.mloc__row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-md);
  font-size:14.5px;color:var(--ink-2)}
.mloc__row b{font-family:var(--display);font-size:23px;font-weight:700;color:var(--ink)}
.mloc__row b i{font-family:var(--mono);font-size:10.5px;font-style:normal;font-weight:500;
  letter-spacing:.06em;color:var(--ink-2);margin-left:4px}
.mloc__row--hot{border-color:var(--ember);background:rgba(244,81,30,.07)}
.mloc__row--hot b{color:var(--ember-txt)}
.mloc__row--strike b{text-decoration:line-through;color:var(--ink-3)}
.mloc__save{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:14px 16px;
  border-radius:var(--r-md);border:1px solid rgba(47,191,113,.45);background:rgba(47,191,113,.1)}
.mloc__save svg{width:18px;height:18px;color:var(--ok);margin-top:2px}
.mloc__save b{display:block;margin-bottom:2px}
.mloc__save p{margin:0;font-size:13px;color:var(--ink-2)}
.keyline{margin:0;padding:18px 22px;border-left:3px solid var(--ember);
  background:var(--surface-2);border-radius:0 var(--r-md) var(--r-md) 0;
  font-family:var(--display);font-size:clamp(18px,1.8vw,23px);font-weight:600;
  text-transform:uppercase;letter-spacing:.015em;line-height:1.25;color:var(--ink)}
.scope{font-size:14px;color:var(--ink-2);max-width:76ch;margin:0;
  padding:12px 15px;border-left:2px solid var(--line-strong);background:var(--surface-2);
  border-radius:0 8px 8px 0}
.scope a:hover{color:var(--ember-lift)}
.compare .tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);-webkit-overflow-scrolling:touch}
.tbl{width:100%;min-width:520px;border-collapse:collapse;font-size:14px}
.tbl thead th{font-family:var(--display);font-size:15px;text-transform:uppercase;
  letter-spacing:.05em;background:var(--surface-2)}
.tbl tbody th{font-weight:500;color:var(--ink-2);font-size:13.5px;
  position:sticky;left:0;background:var(--surface);min-width:170px}
.tbl thead .tbl__hot{color:var(--ember-hi)}
.pick .btn,.plan .btn{white-space:normal;text-align:center}
@media(max-width:1180px){ .why__art{margin-top:8px} }


/* ---- CONTACT PAGE ---- */
.intro .lede{margin-bottom:0}
#message{scroll-margin-top:84px}
.lead__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,5vw,72px);align-items:start}
.fld input,.fld select,.fld textarea{width:100%;padding:13px 15px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);
  font:inherit;font-size:15px;transition:border-color .2s}
.fld textarea{resize:vertical;min-height:110px}
.fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--ember)}
.fld [aria-invalid="true"]{border-color:#E5484D}
.scan__err{font-size:14px;color:#FF7A80;margin:0}
html[data-theme="light"] .scan__err{color:#C22930}
.cinfo{display:grid;gap:12px;margin-top:28px}
.cinfo__row{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
  padding:14px 16px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);transition:border-color .25s,transform .3s var(--ease)}
a.cinfo__row{cursor:pointer;color:inherit;text-decoration:none}
a.cinfo__row:hover,a.cinfo__row:focus-visible{border-color:var(--ember);transform:translateX(4px);outline:none}
a.cinfo__row:focus-visible{box-shadow:0 0 0 3px rgba(244,81,30,.28)}
.cinfo__row .qcard__ic{margin:0}
.cinfo__txt{min-width:0}
.cinfo__row b{display:block;font-size:14.5px;color:var(--ink)}
.cinfo__val{display:block;font-size:13px;color:var(--ink-2);font-family:var(--mono);letter-spacing:.03em}
a.cinfo__row .cinfo__val{color:var(--ember-txt,var(--ember))}
.qcard__ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);
  transition:border-color .3s,transform .3s var(--ease)}
.cal-embed{border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface)}
.cal-embed iframe{display:block;width:100%;min-height:640px;border:0}
.cal-embed .ph__drop{border:0;border-radius:0}
@media(max-width:860px){ .lead__in{grid-template-columns:minmax(0,1fr)} }
@media(max-width:1180px){ .why__art{margin-top:8px} }


/* ---- CUSTOM DIGITAL SOLUTIONS PAGE ---- */
.hero{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;
  padding:clamp(104px,13svh,150px) 0 clamp(34px,5svh,56px)}
.hero__in{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,4.5vw,64px);align-items:center;width:100%}
.hero__copy h1,.hero__copy h2{margin-bottom:20px}
.hero__copy .lede{margin-bottom:30px}
.hero__art{position:relative;aspect-ratio:10/9;min-height:300px}
.sysmap{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sysmap__node{display:grid;justify-items:center;gap:6px;padding:12px 14px;min-width:74px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md)}
.sysmap__node svg{width:18px;height:18px;color:var(--ember-txt)}
.sysmap__node span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2)}
.sysmap__node--hot{border-color:var(--ember)}
.sysmap__link{width:13px;height:13px;color:var(--ember-txt);flex:none}
#data-hub{scroll-margin-top:110px}
.anch{display:block;height:0;scroll-margin-top:110px;visibility:hidden}
.pick2--wrap{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.pick--static:hover{border-color:var(--line-strong)}
.pick .svc__list{margin-bottom:20px}
.tagrow--lg .tag{font-size:11px;padding:9px 14px;white-space:normal;text-align:center;line-height:1.45}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(22px,3vw,36px)}
.step{padding-top:22px;border-top:2px solid var(--line);transition:border-top-color .3s var(--ease)}
.step:hover{border-top-color:var(--ember)}
.step__no{display:block;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.16em;color:var(--ember-txt);margin-bottom:12px}
.step h3{font-size:clamp(19px,2vw,25px);text-transform:uppercase;margin-bottom:10px}
.step p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.65}
@media(max-width:940px){
  .hero{min-height:auto}
  .hero__in{grid-template-columns:minmax(0,1fr)}
  .hero__art{max-width:440px;margin-inline:auto;width:100%}
}
@media(max-width:1180px){ .why__art{margin-top:8px} }


/* ---- WORK / PORTFOLIO PAGE ---- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(28px,4vw,44px)}
.filters button{padding:10px 17px;border-radius:99px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink-2);font-family:var(--mono);font-size:11px;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s}
.filters button:hover{border-color:var(--ember);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ember-fill);border-color:var(--ember);color:#12192B}
.works{display:grid;gap:clamp(28px,4vw,48px)}
.works__empty{font-size:15px;color:var(--ink-2);padding:26px 0}
.wk{scroll-margin-top:96px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,3.5vw,52px);align-items:center;padding:clamp(24px,3vw,38px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl)}
.wk:nth-child(even){grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.wk:nth-child(even) .wk__visual{order:2}
.wk__visual{position:relative;min-height:230px}
.dev--desk{position:relative;width:88%;border:1px solid var(--line-strong);
  border-radius:12px;overflow:hidden;background:var(--bg)}
.dev__bar{display:flex;gap:5px;padding:8px 11px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.dev__bar i{width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.dev--desk .ph__drop{aspect-ratio:16/10;border:0;border-radius:0;min-height:0}
.dev--phone{position:absolute;right:0;bottom:-6%;width:26%;min-width:74px;
  border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;
  background:var(--bg);box-shadow:var(--shadow-md)}
.dev--phone .ph__drop{aspect-ratio:9/19;border:0;border-radius:0;min-height:0}
.dev--phone .ph__drop .ph__what{display:none}
.dev--tab{border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;background:var(--bg)}
.dev--tab .ph__drop{aspect-ratio:3/4;border:0;border-radius:0;min-height:0}
.wk__name{font-size:clamp(23px,2.4vw,32px);margin-bottom:6px}
.wk__meta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ember-txt);margin:0 0 14px}
.wk__sum{font-size:15px;color:var(--ink-2);line-height:1.65;margin:0 0 14px}
.wk__svcs{font-size:13px;color:var(--ink-2);margin:0 0 18px;line-height:1.7}
.wk__svcs b{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin-right:6px}
.wk__open{white-space:normal}
.wkmodal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:18px}
.wkmodal[hidden]{display:none}
.wkmodal__scrim{position:absolute;inset:0;background:rgba(6,9,18,.72);backdrop-filter:blur(3px)}
.wkmodal__panel{position:relative;width:min(860px,100%);max-height:90svh;overflow:auto;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-xl);
  padding:clamp(24px,3.4vw,42px)}
.wkmodal__x{position:sticky;top:0;float:right;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line-strong);background:var(--surface-2);
  color:var(--ink);cursor:pointer;transition:border-color .2s,transform .25s var(--ease)}
.wkmodal__x:hover{border-color:var(--ember);transform:rotate(90deg)}
.wkmodal__x svg{width:15px;height:15px}
.wkmodal__panel h2{font-size:clamp(25px,3vw,36px);margin:4px 0 22px}
.wkmodal__devices{display:grid;grid-template-columns:2.2fr 1fr .62fr;gap:12px;
  align-items:start;margin-bottom:26px}
.wkmodal__devices .dev--desk{width:100%}
.wkmodal__devices .dev--phone{position:static;width:100%;box-shadow:none}
.wkmodal__content{display:grid;gap:20px;margin-bottom:20px}
.wkmodal__content h3{font-size:16px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:7px}
.wkmodal__content p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.65}
.wkmodal__rel{border-top:1px solid var(--line);padding-top:18px;margin-top:6px}
.wkmodal__rel a.tag{cursor:pointer;text-decoration:none}
.wkmodal__rel a.tag:hover{border-color:var(--ember);color:var(--ink)}
.wkd__link .mlabel{font-style:normal}
.pick3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.pick h3{font-size:clamp(19px,1.9vw,23px);margin-bottom:12px}
@media(max-width:880px){
  .wk,.wk:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .wk:nth-child(even) .wk__visual{order:0}
  .wk__visual{max-width:480px}
  .wkmodal__devices{grid-template-columns:1fr 1fr}
  .wkmodal__devices .dev--desk{grid-column:1/-1}
}
@media(max-width:1180px){ .why__art{margin-top:8px} }


/* ---- ABOUT PAGE ---- */
.mission{margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(26px,4vw,46px);line-height:1.22;text-transform:uppercase;
  letter-spacing:.012em;color:var(--ink)}
.mission em{font-style:normal;color:var(--ember-txt)}
.pick3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;align-items:start}
.pick{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:clamp(24px,3vw,34px);position:relative}
.pick h3{font-size:clamp(19px,1.9vw,23px);margin:10px 0 12px}
.pick__sub{font-size:14.5px;color:var(--ink-2);line-height:1.65;margin:0}
.mzn{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--ember-txt)}
.prob{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,5vw,72px);align-items:center}
@media(max-width:1180px){ .why__art{margin-top:8px} }


/* ---- BRIAN ONGATI PERSONAL PAGE ---- */
.intro{position:relative;overflow:hidden;padding:clamp(112px,14svh,158px) 0 clamp(36px,5svh,60px)}
.bio{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(28px,4.5vw,64px);align-items:center}
.bio__photo .ph{border-radius:var(--r-xl);overflow:hidden}
.bio__copy h1{margin-bottom:18px}
.bio__copy .lede{margin-bottom:16px}
.bio__sub{font-size:15px;color:var(--ink-2);line-height:1.7;margin:0 0 28px;max-width:56ch}
.facts{max-width:760px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:clamp(20px,2.6vw,30px)}
.facts__title{margin:0 0 14px;color:var(--ember-txt)}
.fact{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr);gap:16px;
  align-items:baseline;padding:11px 0;border-top:1px solid var(--line)}
.fact span{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
.fact b{font-size:15px;line-height:1.5;color:var(--ink);font-weight:600}
@media(max-width:480px){.fact{grid-template-columns:minmax(0,1fr);gap:3px;padding:12px 0}}
.prose p{font-size:15.5px;color:var(--ink-2);line-height:1.75;margin:0 0 14px;max-width:72ch}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink)}
#journey .prose,#drives .prose,#quote .prose,#zeptonic .prose{margin-top:18px}
.keyline{margin:0;padding:18px 22px;border-left:3px solid var(--ember);
  background:var(--surface-2);border-radius:0 var(--r-md) var(--r-md) 0;
  font-family:var(--display);font-size:clamp(17px,1.7vw,21px);font-weight:600;
  text-transform:uppercase;letter-spacing:.015em;line-height:1.3;color:var(--ink)}
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:720px){.gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.gal__item{margin:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;transition:border-color .25s,transform .3s var(--ease)}
.gal__item:hover{border-color:var(--ember);transform:translateY(-3px)}
.gal__item .ph__drop{border:0;border-radius:0;aspect-ratio:4/3;min-height:0}
.gal__item figcaption{padding:12px 15px;font-size:13px;color:var(--ink-2);line-height:1.5}
.gal--journal figcaption b{display:block;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ember-txt);margin-bottom:4px}
.pick3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;align-items:start}
.pick{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,3vw,32px)}
.mzn{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember-txt)}
.bigq{margin:22px 0 0;font-family:var(--display);font-weight:600;
  font-size:clamp(24px,3.4vw,40px);line-height:1.25;text-transform:uppercase;
  letter-spacing:.01em;color:var(--ink)}
.bigq::before{content:"";display:block;width:52px;height:3px;background:var(--ember);margin-bottom:18px}
.cways{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:26px 0 30px}
.cway{display:inline-flex;align-items:center;gap:9px;padding:12px 19px;border-radius:99px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;transition:border-color .25s,transform .3s var(--ease)}
.cway:hover{border-color:var(--ember);transform:translateY(-3px)}
.cway svg{width:15px;height:15px;color:var(--ember-txt)}
.vcfsticky{position:fixed;left:50%;transform:translate(-50%,90px);bottom:16px;z-index:90;
  display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:99px;
  border:0;background:var(--ember-fill);color:#12192B;font-family:var(--display);
  font-size:16px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:var(--shadow-md);cursor:pointer;transition:transform .4s var(--ease)}
.vcfsticky svg{width:16px;height:16px}
.vcfsticky.on{transform:translate(-50%,0)}
.vcfsticky[hidden]{display:none}
@media(min-width:721px){.vcfsticky{display:none}}
@media(max-width:940px){
  .bio{grid-template-columns:minmax(0,1fr)}
  .bio__photo{max-width:380px}
}
@media(max-width:1180px){ .why__art{margin-top:8px} }


/* ---- LEGAL / TERMS PAGE ---- */
.intro{position:relative;overflow:hidden;padding:clamp(112px,14svh,158px) 0 clamp(30px,4svh,48px)}
.intro__in{position:relative;z-index:2;max-width:860px}
.intro h1{margin-bottom:14px}
.legal__dates{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-2);margin:0 0 20px}
.legal__dates b{font-weight:500;color:var(--ink)}
.intro .lede{margin-bottom:16px}
.legal__lead{font-size:15px;color:var(--ink-2);line-height:1.7;margin:0 0 12px;max-width:76ch}
.legal__lead strong{color:var(--ink)}
.legal{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(30px,4.5vw,64px);align-items:start}
.legal__toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;
  max-height:calc(100svh - 130px);overflow:auto;padding-right:6px}
.legal__toc a{font-size:12.5px;line-height:1.4;color:var(--ink-2);padding:5px 10px;
  border-left:2px solid var(--line);transition:color .2s,border-color .2s}
.legal__toc a:hover{color:var(--ember-hi);border-left-color:var(--ember)}
.legal__sec{scroll-margin-top:96px;padding:26px 0;border-top:1px solid var(--line)}
.legal__sec:first-child{border-top:0;padding-top:0}
.legal__sec h2{font-size:clamp(19px,1.9vw,24px);margin-bottom:14px}
.legal__sec p{font-size:14.5px;color:var(--ink-2);line-height:1.75;margin:0 0 12px;max-width:76ch}
.legal__sec p:last-child{margin-bottom:0}
.legal__sec strong{color:var(--ink)}
.legal__sec ul{margin:0 0 12px;padding-left:22px;display:grid;gap:6px}
.legal__sec li{font-size:14.5px;color:var(--ink-2);line-height:1.6}
.legal__sec a{color:var(--ember-hi);text-decoration:underline;text-underline-offset:3px}
.legal__contact{padding:16px 20px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);line-height:1.9!important}
@media(max-width:880px){
  .legal{grid-template-columns:minmax(0,1fr)}
  .legal__toc{position:static;max-height:none;flex-direction:row;flex-wrap:wrap;gap:8px;
    padding-bottom:18px;border-bottom:1px solid var(--line)}
  .legal__toc a{border:1px solid var(--line);border-radius:99px;padding:7px 13px;font-size:11px}
  .legal__toc .mlabel{width:100%}
}
@media(max-width:1180px){ .why__art{margin-top:8px} }


/* ---- LEGAL / PRIVACY PAGE ---- */
.legal__leadlist{margin:0 0 16px;padding-left:22px;display:grid;gap:5px}
.legal__leadlist li{font-size:14.5px;color:var(--ink-2);line-height:1.6}
.legal__sec h3{font-size:16px;text-transform:uppercase;letter-spacing:.02em;margin:22px 0 10px}
.legal__sec h4{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ember-txt);margin:16px 0 6px}
@media(max-width:1180px){ .why__art{margin-top:8px} }


/* ---- LEGAL / COOKIE PAGE ---- */
.intro .lede strong{color:var(--ink)}
.legal__lead a{color:var(--ember-hi);text-decoration:underline;text-underline-offset:3px}
.legal__sec h4{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ember-txt);margin:16px 0 8px}
.legal__sec code{font-family:var(--mono);font-size:13px;color:var(--ember-hi);
  background:var(--surface-2);padding:2px 6px;border-radius:5px}
.legal__contact{padding:16px 20px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);line-height:1.9!important;font-size:14.5px;color:var(--ink-2)}
@media(max-width:1180px){ .why__art{margin-top:8px} }


/* ---- 404 PAGE ---- */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nf{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;
  padding:clamp(104px,13svh,150px) 0 clamp(40px,6svh,64px)}
.nf__in{position:relative;z-index:2;max-width:760px;text-align:center;margin-inline:auto}
.nf__code{margin:0 0 6px;font-family:var(--display);font-weight:700;line-height:.9;
  font-size:clamp(96px,17vw,168px);letter-spacing:.01em;color:var(--ink);user-select:none}
.nf__in .eyebrow{display:inline-block;margin-bottom:14px}
.nf__in h1{font-size:clamp(27px,4vw,44px);margin-bottom:16px}
.nf__in .lede{margin:0 auto 24px;max-width:56ch}
.nf__cta{justify-content:center}
.nf__links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:28px 0 20px}
.cway{display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:99px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;transition:border-color .25s,transform .3s var(--ease)}
.cway svg{width:14px;height:14px;color:var(--ember-txt)}
.nf__note{margin:0 auto;font-size:13.5px;color:var(--ink-2);max-width:52ch;line-height:1.6}
.nf__note a{color:var(--ember-hi);text-decoration:underline;text-underline-offset:3px}
/* ---- THE REAL PROBLEM (gap cards) ---- */
.gaps .shead{margin-bottom:clamp(30px,4vw,46px)}
.gaps__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(20px,2.6vw,30px)}
.gapcard{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,32px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s var(--ease)}
.gapcard:hover{transform:translateY(-5px);border-color:var(--ember);box-shadow:var(--shadow-md)}
.gapcard__no{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember-txt);margin-bottom:12px}
.gapcard h3{font-size:clamp(20px,2vw,26px);text-transform:uppercase;margin-bottom:12px}
.gapcard__hit{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.5;margin:0 0 8px}
.gapcard__why{font-size:14px;color:var(--ink-2);line-height:1.65;margin:0 0 16px}
.gapcard__fix{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:0 0 18px;
  padding:11px 14px;border-left:2px solid var(--ember);background:var(--surface-2);
  border-radius:0 8px 8px 0}
.gapcard__fix b{display:block;font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ember-hi);margin-bottom:4px}
.gapcard .tlink{margin-top:auto}

/* ================================================================
   THEME ADDITIONS (WordPress layer)
   ================================================================ */
/* Dual logos: the pair swaps with the active theme. */
.logo__img{height:34px;width:auto;display:block}
[data-theme="dark"] .logo__img--light{display:none}
[data-theme="light"] .logo__img--dark{display:none}

/* Managed images dropped into placeholder containers. */
.zep-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.dev .zep-img{position:absolute;inset:0}
.gal__item .zep-img{aspect-ratio:1/1}

/* Footer additions */
.ftr__cookiebtn{background:none;border:0;padding:0;font:inherit;font-size:13px;
  color:var(--ink-3);cursor:pointer}
.ftr__cookiebtn:hover{color:var(--ember-hi)}
.ftr__social{display:flex;gap:16px;margin-top:14px}
.ftr__social a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.ftr__social a:hover{color:var(--ember-hi)}

/* Consent-gated embeds */
.zep-gated__ask{text-align:center}

/* ---- Homepage preloader ---- */
html.zpre-lock{overflow:hidden}
.zpre{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--bg);transition:opacity .5s,visibility .5s}
.zpre.out{opacity:0;visibility:hidden}
.zpre__in{text-align:center}
.zpre__logo{max-height:60px;width:auto;margin:0 auto 18px}
.zpre__mark{width:64px;height:64px;margin:0 auto 18px;display:grid;place-items:center;
  background:var(--ember);color:#fff;border-radius:16px;
  font-family:var(--display);font-size:34px;font-weight:700}
.zpre__text{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 16px}
.zpre__bar{width:150px;height:3px;margin:0 auto;background:var(--line);border-radius:99px;overflow:hidden}
.zpre__bar i{display:block;height:100%;width:40%;background:var(--ember);border-radius:99px;
  animation:zpreSlide 1.1s ease-in-out infinite}
@keyframes zpreSlide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
@media(prefers-reduced-motion:reduce){.zpre__bar i{animation:none;width:100%}}

/* ============================================================
   ZEPTONIC 2.0.2 — QUALITY-CONTROL OVERRIDES
   ============================================================ */

/* Reliable inline SVG sizing across Chromium, Safari and mobile browsers. */
.zep-icon{
  display:block;width:1.25em;height:1.25em;min-width:1.25em;min-height:1.25em;
  flex:none;overflow:visible;pointer-events:none;color:inherit
}
svg use{pointer-events:none}

/* A single uploaded logo must remain visible in both color modes. */
.logo__img--single{display:block!important}

/* WordPress admin-bar clearance while previewing the site as an administrator. */
.admin-bar .hdr{top:32px}
@media(max-width:782px){.admin-bar .hdr{top:46px}}

/* Mobile footer phone was present in the markup but had no presentation rule. */
.mnav__phone{
  font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap;transition:color .2s
}
.mnav__phone:hover{color:var(--ember-txt)}

/* Hero tabs: remove persistent browser/pressed backgrounds and give the
   progress line its own layer. This prevents the dark clicked-tab artifact. */
.sdot{
  border:0!important;background:transparent!important;box-shadow:none!important;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;isolation:isolate
}
.sdot::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--line-strong);border-radius:99px;z-index:-1
}
.sdot::after{
  top:0!important;border-radius:99px;animation:none!important;z-index:1
}
.sdot[aria-selected="true"]{
  background:transparent!important;color:var(--ember-txt)!important
}
.sdot[aria-selected="true"]::before{background:rgba(244,81,30,.22)}
.sdot.is-active::after{animation:tick 7s linear forwards!important}
.sdot.is-active.is-paused::after{animation-play-state:paused!important}
.sdot:active,.sdot:hover{background:transparent!important;box-shadow:none!important}
.sdot:focus{outline:none}
.sdot:focus-visible{outline:2px solid var(--ember);outline-offset:6px;border-radius:3px}

/* Quick-action controls need to read as deliberate controls, not tiny glyphs. */
.futil{right:22px;bottom:96px;gap:12px}
.futil button{
  width:58px;height:58px;border-width:1px;
  box-shadow:0 16px 38px -14px rgba(0,0,0,.72)
}
.futil button .zep-icon,.futil button svg{width:27px;height:27px;min-width:27px;min-height:27px}
.futil__chat{width:60px!important;height:60px!important}
.futil__chat span{top:10px;right:10px;width:11px;height:11px}
@media(max-width:720px){
  .futil{right:14px;bottom:16px;gap:10px}
  .futil button{width:52px;height:52px}
  .futil__chat{width:52px!important;height:52px!important}
  .futil button .zep-icon,.futil button svg{width:24px;height:24px;min-width:24px;min-height:24px}
  .fab{right:98px;left:14px}
  /* Single chat rail: GHL bubble beside Get started; back-to-top clear above chat. */
  html.has-ghl-chat .futil{
    right:14px;
    /* 16 chat bottom + ~60 bubble + ~28 gap ≈ clear air above chat */
    bottom:104px;
  }
  html.has-ghl-chat .futil__chat[hidden]{display:none!important}
  html.has-ghl-chat #lc_text-widget,
  html.has-ghl-chat .lc_text-widget,
  html.has-ghl-chat chat-widget{
    bottom:16px!important;
    right:14px!important;
    z-index:890!important;
    margin:0!important;
  }
}
/* Desktop: still only one bubble — hide theme chat once GHL is live */
html.has-ghl-chat .futil__chat[hidden]{display:none!important}
.futil__chat[hidden]{display:none!important}

/* Prevent hidden hero/interface layers from intercepting paint or pointer state. */
.stack:not(.is-live),.slide:not(.is-live){pointer-events:none!important}
.stack.is-live,.slide.is-live{pointer-events:auto}

/* Layering corrections for overlays. */
.zpre{z-index:2000!important}
.wkmodal{z-index:1500!important}
.zc{z-index:1300!important}

/* Managed portfolio screenshots must sit below the desktop browser bar rather
   than absolutely covering the entire device shell. */
.dev .zep-img{position:relative!important;inset:auto!important;width:100%;height:auto;object-fit:cover;border-radius:0}
.dev--desk .zep-img{aspect-ratio:16/10}
.dev--tab .zep-img{aspect-ratio:3/4}
.dev--phone .zep-img{aspect-ratio:9/19.5}

/* ============================================================
   ZEPTONIC 2.0.3 — MOBILE UI, CONSENT & PERSONAL PAGE QC
   ============================================================ */

/* Premium warmth should be present in light mode too, not only after the
   visitor switches to dark mode. Keep it subtle enough for long-form pages. */
html[data-theme="light"] body{
  background-image:radial-gradient(ellipse 70% 28% at 96% 0%,rgba(244,81,30,.075),transparent 72%);
  background-attachment:fixed
}
html[data-theme="light"] .hero,
html[data-theme="light"] .intro{
  background-image:linear-gradient(145deg,transparent 54%,rgba(244,81,30,.045) 100%)
}
html[data-theme="light"] .focus{
  background-image:radial-gradient(circle at 100% 0%,rgba(244,81,30,.055),transparent 38%)
}
html[data-theme="light"] .mesh__orb--a{opacity:1;filter:saturate(1.2)}
html[data-theme="light"] .plan--hot,
html[data-theme="light"] .gapcard:hover,
html[data-theme="light"] .fact--fun{
  box-shadow:0 24px 56px -38px rgba(244,81,30,.72)
}
html[data-theme="light"] .hdr.is-stuck{
  box-shadow:0 18px 42px -34px rgba(244,81,30,.72)
}

/* Circular header controls: fixed box, fixed icon, true optical centering. */
@media(max-width:1180px){
  .hdr__login,.tgl,.burger{
    width:44px;height:44px;min-width:44px;min-height:44px;padding:0!important;
    display:grid;place-items:center;border-radius:50%;line-height:0;
    -webkit-tap-highlight-color:transparent
  }
  .hdr__login .zep-icon,.burger .zep-icon{
    display:block;width:21px;height:21px;min-width:21px;min-height:21px;margin:0
  }
  .tgl .zep-icon{display:block;width:21px;height:21px;min-width:21px;min-height:21px;margin:0;transform:translate(-50%,-50%)}
  .hdr__login .zep-icon{transform:translateX(1px)}
  .burger[aria-expanded="true"]{background:var(--surface);border-color:var(--ember);color:var(--ember-txt)}
  .hdr__login:active,.tgl:active,.burger:active{transform:none}
}
@media(max-width:420px){
  .hdr__in{gap:10px}
  .hdr__act{gap:7px}
  .hdr__login,.tgl,.burger{width:42px;height:42px;min-width:42px;min-height:42px}
  .logo__txt{font-size:20px}
}

/* Mobile navigation is an accordion below the fixed header. */
.mnav{
  inset:var(--zep-header-h,76px) 0 0 0;padding:14px var(--gutter) 28px;
  z-index:895;transform:translateY(-8px);height:auto
}
.admin-bar .mnav{top:calc(var(--zep-header-h,76px) + 32px)}
@media(max-width:782px){.admin-bar .mnav{top:calc(var(--zep-header-h,76px) + 46px)}}
.mnav__close{
  position:sticky;top:0;right:auto;align-self:flex-end;z-index:4;
  width:46px;height:46px;min-width:46px;min-height:46px;margin:0 0 10px;
  padding:0;display:grid;place-items:center;line-height:0;
  background:var(--surface);box-shadow:var(--shadow-md)
}
.mnav__close .zep-icon{width:20px;height:20px;min-width:20px;min-height:20px;margin:0}
.mitem{padding:0;border-bottom:1px solid var(--line)}
.mitem__top{
  min-height:66px;display:grid;grid-template-columns:34px minmax(0,1fr) 42px;
  align-items:center;gap:10px;padding:8px 0
}
.mitem__no{align-self:center}
.mitem__top .mitem__link{
  min-width:0;font-family:var(--display);font-size:clamp(24px,7vw,31px);
  text-transform:uppercase;letter-spacing:.02em;line-height:1;color:var(--ink);
  transition:color .2s;overflow-wrap:anywhere
}
.mitem__top .mitem__link:hover,.mitem--current .mitem__link{color:var(--ember-txt)}
.mitem__toggle{
  width:38px;height:38px;padding:0;border:1px solid var(--line-strong);border-radius:50%;
  display:grid;place-items:center;justify-self:end;color:var(--ink-2);background:var(--surface);
  line-height:0;-webkit-tap-highlight-color:transparent;transition:border-color .2s,color .2s,transform .25s
}
.mitem__toggle .zep-icon{width:16px;height:16px;min-width:16px;min-height:16px;margin:0;transition:transform .25s}
.mitem__toggle[aria-expanded="true"]{border-color:var(--ember);color:var(--ember-txt)}
.mitem__toggle[aria-expanded="true"] .zep-icon{transform:rotate(180deg)}
.mitem__subs{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;
  justify-content:stretch!important;margin:0!important;padding:0 0 14px 44px!important
}
.mitem__subs[hidden]{display:none!important}
.mitem__subs .mitem__sub{
  display:flex;width:100%;padding:11px 12px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);line-height:1.35
}
.mitem__subs .mitem__sub:hover,.mitem__subs .mitem__sub[aria-current="page"]{
  color:var(--ember-txt);background:rgba(244,81,30,.055)
}
.mnav__foot{margin-top:24px}
.mico,.mnav__close,.futil button{place-items:center!important;padding:0!important;line-height:0}
.mico .zep-icon{width:21px;height:21px;min-width:21px;min-height:21px;margin:0}

/* Pricing: prevent the desktop two-column grid from overriding its earlier
   mobile breakpoint and provide a genuinely side-by-side phone comparison. */
.cmpm{display:none}
@media(max-width:940px){
  .page-pricing #multi .prob{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
  .page-pricing #multi .mloc{width:100%;min-width:0;padding:18px}
  .page-pricing #multi .svc__act{width:100%}
  .page-pricing #multi .svc__act .btn{width:100%;justify-content:center}
}
@media(max-width:760px){
  .page-pricing .compare .tblwrap{display:none}
  .cmpm{display:block;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
  .cmpm__head{display:grid;grid-template-columns:1fr 1fr;background:var(--surface-2);border-bottom:1px solid var(--line)}
  .cmpm__head b{padding:14px 10px;text-align:center;font-family:var(--display);font-size:16px;text-transform:uppercase;letter-spacing:.04em}
  .cmpm__head b:first-child{color:var(--ember-txt);background:rgba(244,81,30,.07)}
  .cmpm__row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
  .cmpm__row:last-child{border-bottom:0}
  .cmpm__row strong{grid-column:1/-1;padding:12px 14px 7px;font-size:13.5px;color:var(--ink-2);font-weight:600}
  .cmpm__row span{padding:8px 10px 13px;text-align:center;font-size:13.5px;color:var(--ink);min-width:0}
  .cmpm__row span:nth-of-type(1){background:rgba(244,81,30,.055);color:var(--ember-txt);font-weight:600}
  .mloc__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px}
  .mloc__row span{min-width:0;line-height:1.35}
  .mloc__row b{font-size:21px;white-space:nowrap;text-align:right}
  .mloc__row b i{display:block;margin-top:2px}
  .mloc__save{padding:14px}
}

/* Brian snapshot: a compact editorial card grid instead of one oversized box. */
.page-brianongati #snapshot{padding-block:clamp(52px,7vw,86px)}
.page-brianongati .facts{
  max-width:none;margin:0;background:transparent;border:0;border-radius:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:snapshot
}
.page-brianongati .facts__head{grid-column:1/-1;margin-bottom:12px;max-width:720px}
.page-brianongati .facts__head .eyebrow{margin-bottom:14px}
.page-brianongati .facts__head h2{font-size:clamp(30px,4vw,48px)}
.page-brianongati .fact{
  counter-increment:snapshot;position:relative;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:flex-end;gap:8px;min-height:150px;padding:22px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden
}
.page-brianongati .fact::before{
  content:counter(snapshot,decimal-leading-zero);position:absolute;top:17px;right:18px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ember-txt)
}
.page-brianongati .fact::after{
  content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-42px;top:-50px;
  background:radial-gradient(circle,rgba(244,81,30,.16),transparent 70%);pointer-events:none
}
.page-brianongati .fact span{font-size:9.5px;line-height:1.35}
.page-brianongati .fact b{font-size:clamp(15px,1.6vw,18px);line-height:1.4}
.page-brianongati .fact--wide{grid-column:span 2}
.page-brianongati .fact--fun{border-color:rgba(244,81,30,.34);background:linear-gradient(145deg,var(--surface),rgba(244,81,30,.075))}
@media(max-width:760px){
  .page-brianongati .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .page-brianongati .fact{min-height:132px;padding:18px}
  .page-brianongati .fact--wide{grid-column:1/-1}
}
@media(max-width:380px){
  .page-brianongati .facts{grid-template-columns:minmax(0,1fr)}
  .page-brianongati .fact--wide{grid-column:auto}
}

/* The Brian page uses the global mobile CTA slot for Save Contact. */
.page-brianongati .fab{cursor:pointer;border:0}

/* General mobile overflow guard for complex grid cards and price values. */
@media(max-width:720px){
  .page-pricing .wrap,.page-brianongati .wrap,.page-contact .wrap{min-width:0}
  .page-pricing .plan,.page-pricing .mloc,.page-pricing .cmpm,
  .page-brianongati .fact,.page-contact .cinfo__row{min-width:0;max-width:100%}
}


/* ============================================================
   ZEPTONIC 2.0.4 — STABLE CONSENT SYSTEM
   Safari Selects / Zeptonic v1 interaction pattern:
   compact first-load bar + separate preference sheet.
   ============================================================ */
html.zcc-lock{overflow:hidden}

.zcc-banner,
.zcc-modal{
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}

.zcc-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:4000;
  padding:16px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  opacity:0;
  visibility:hidden;
  transform:translateY(24px);
  transition:opacity .28s var(--ease-out),transform .28s var(--ease-out),visibility .28s;
  pointer-events:none;
}
.zcc-banner[hidden]{display:none!important}
.zcc-banner.is-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.zcc-banner__inner{
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:18px;
  border:1px solid var(--line-strong);
  border-radius:18px;
  background:var(--surface);
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:0 22px 70px rgba(4,8,18,.32),0 0 0 1px rgba(244,81,30,.04);
  backdrop-filter:blur(18px) saturate(140%);
}
html[data-theme="light"] .zcc-banner__inner{
  background:rgba(255,255,255,.96);
  box-shadow:0 22px 70px rgba(18,25,43,.2),0 0 45px rgba(244,81,30,.08);
}
.zcc-brand{
  width:48px;
  height:48px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--ember-lift),var(--ember-sink));
  color:#fff;
  box-shadow:0 12px 28px rgba(244,81,30,.28);
  flex:none;
}
.zcc-brand span{font-family:var(--display);font-size:27px;font-weight:700;line-height:1}
.zcc-copy{min-width:0}
.zcc-eyebrow{
  margin:0 0 4px;
  font-family:var(--mono);
  font-size:9px;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ember-txt);
}
.zcc-copy h2,
.zcc-sheet h2{
  margin:0;
  font-family:var(--display);
  font-size:22px;
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--ink);
}
.zcc-copy>p:last-child{
  margin:6px 0 0;
  max-width:68ch;
  color:var(--ink-2);
  font-size:13px;
  line-height:1.55;
}
.zcc-copy a,
.zcc-policy{color:var(--ember-txt);text-decoration:underline;text-underline-offset:3px}
.zcc-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.zcc-btn{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 17px;
  border-radius:9px;
  border:1px solid transparent;
  appearance:none;
  -webkit-appearance:none;
  font-family:var(--display);
  font-size:15px;
  font-weight:700;
  letter-spacing:.055em;
  line-height:1;
  text-transform:uppercase;
  text-align:center;
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
  transition:transform .2s var(--ease),border-color .2s,background .2s,color .2s,box-shadow .2s;
  position:relative;
  isolation:isolate;
  pointer-events:auto;
}
.zcc-btn::before,.zcc-btn::after{content:none!important;display:none!important}
.zcc-btn:hover{transform:translateY(-1px)}
.zcc-btn:active{transform:translateY(0) scale(.985)}
.zcc-btn--primary{background:var(--ember-fill);color:#fff;box-shadow:0 10px 24px rgba(244,81,30,.24)}
.zcc-btn--primary:hover{background:var(--ember-lift);color:#fff}
.zcc-btn--line{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.zcc-btn--line:hover{border-color:var(--ember);color:var(--ember-txt)}
.zcc-btn--quiet{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
.zcc-btn--quiet:hover{color:var(--ink);border-color:var(--line-strong)}

.zcc-modal{
  position:fixed;
  inset:0;
  z-index:4100;
  display:grid;
  place-items:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:opacity .28s var(--ease-out),visibility .28s;
  pointer-events:none;
}
.zcc-modal[hidden]{display:none!important}
.zcc-modal.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.zcc-modal__backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:rgba(5,8,16,.72);
  backdrop-filter:blur(7px);
  cursor:default;
}
.zcc-sheet{
  position:relative;
  z-index:1;
  width:min(620px,100%);
  max-height:min(88dvh,760px);
  overflow:auto;
  border:1px solid var(--line-strong);
  border-radius:22px;
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 30px 100px rgba(0,0,0,.5);
  transform:translateY(20px) scale(.985);
  transition:transform .3s var(--ease-out);
  outline:none;
}
.zcc-modal.is-visible .zcc-sheet{transform:none}
html[data-theme="light"] .zcc-sheet{background:#fff;box-shadow:0 30px 100px rgba(18,25,43,.28)}
.zcc-sheet__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:24px 24px 18px;
  border-bottom:1px solid var(--line);
}
.zcc-close{
  width:42px;
  height:42px;
  flex:none;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:50%;
  background:var(--surface-2);
  color:var(--ink);
  cursor:pointer;
  touch-action:manipulation;
  font-size:28px;
  line-height:1;
  transition:border-color .2s,color .2s,transform .2s;
}
.zcc-close:hover{border-color:var(--ember);color:var(--ember-txt);transform:rotate(4deg)}
.zcc-sheet__intro{margin:0;padding:17px 24px;color:var(--ink-2);font-size:13.5px;line-height:1.6}
.zcc-options{display:grid;padding:0 24px 4px}
.zcc-option{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:18px 0;
  border-top:1px solid var(--line);
  cursor:pointer;
}
.zcc-option:first-child{border-top:0}
.zcc-option h3{margin:0 0 5px;font-family:var(--display);font-size:17px;line-height:1;text-transform:uppercase;color:var(--ink)}
.zcc-option p{margin:0;color:var(--ink-2);font-size:12.5px;line-height:1.55}
.zcc-option--locked{cursor:default}
.zcc-always{
  padding:6px 9px;
  border-radius:99px;
  background:rgba(78,216,140,.11);
  border:1px solid rgba(78,216,140,.28);
  color:var(--ok);
  font-family:var(--mono);
  font-size:9px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  white-space:nowrap;
}
.zcc-switch{position:relative;width:48px;height:28px;display:block;flex:none}
.zcc-switch input{position:absolute;opacity:0;pointer-events:none}
.zcc-switch span{
  position:absolute;
  inset:0;
  border-radius:99px;
  background:var(--surface-2);
  border:1px solid var(--line-strong);
  transition:background .2s,border-color .2s;
}
.zcc-switch span::after{
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:var(--ink-3);
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  transition:transform .22s var(--ease-out),background .2s;
}
.zcc-switch input:checked+span{background:var(--ember);border-color:var(--ember)}
.zcc-switch input:checked+span::after{transform:translateX(20px);background:#fff}
.zcc-switch input:focus-visible+span{outline:2px solid var(--ember);outline-offset:3px}
.zcc-sheet__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 24px 24px;
  border-top:1px solid var(--line);
}
.zcc-policy{font-size:12.5px;white-space:nowrap}
.zcc-sheet__buttons{display:flex;gap:9px;justify-content:flex-end}
#fChat span{transition:background .2s}
#fChat span.is-ready{background:var(--ok)!important}

@media(max-width:900px){
  .zcc-banner__inner{grid-template-columns:auto minmax(0,1fr)}
  .zcc-actions{grid-column:1/-1;justify-content:stretch;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
  .zcc-banner{padding:0;align-items:end}
  .zcc-banner__inner{
    grid-template-columns:1fr;
    gap:13px;
    border-radius:22px 22px 0 0;
    border-inline:0;
    border-bottom:0;
    padding:20px 18px calc(18px + env(safe-area-inset-bottom));
  }
  .zcc-brand{display:none}
  .zcc-copy h2{font-size:21px}
  .zcc-copy>p:last-child{font-size:13px}
  .zcc-actions{grid-column:auto;grid-template-columns:1fr 1fr}
  .zcc-actions .zcc-btn--primary{grid-column:1/-1;grid-row:1}
  .zcc-actions .zcc-btn--quiet,.zcc-actions .zcc-btn--line{grid-row:2}
  .zcc-modal{padding:0;place-items:end center}
  .zcc-sheet{
    width:100%;
    max-height:92dvh;
    border-radius:22px 22px 0 0;
    border-inline:0;
    border-bottom:0;
    transform:translateY(100%);
  }
  .zcc-sheet__head{padding:20px 18px 16px}
  .zcc-sheet__intro{padding:15px 18px}
  .zcc-options{padding-inline:18px}
  .zcc-sheet__foot{display:grid;padding:16px 18px calc(18px + env(safe-area-inset-bottom))}
  .zcc-policy{order:2;text-align:center}
  .zcc-sheet__buttons{display:grid;grid-template-columns:1fr 1.25fr;width:100%}
  .zcc-sheet__buttons .zcc-btn{width:100%}
}
@media(max-width:390px){
  .zcc-actions{grid-template-columns:1fr}
  .zcc-actions .zcc-btn{grid-column:auto;grid-row:auto}
  .zcc-sheet__buttons{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .zcc-banner,.zcc-modal,.zcc-sheet,.zcc-btn,.zcc-switch span,.zcc-switch span::after{transition:none!important}
}


/* v2.0.6 plan-card and control polish */
.plan .list__lbl{margin:20px 0 10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.plan .plan__list{margin-bottom:24px}
.plan .plan__list li{line-height:1.48}
@media(min-width:1181px){.tgl{align-self:center}.tgl .zep-icon{transform:translate(-50%,-50%)}}


/* ============================================================
   ZEPTONIC 2.0.8 — SITE LOGO SIZING + THEME SWITCHING
   ============================================================ */
.logo{min-width:0;line-height:0}
.logo__img{
  width:auto;height:auto;object-fit:contain;
  object-position:left center;flex:none
}
.logo__img--header{
  width:var(--zep-logo-width,210px);max-width:250px;max-height:56px
}
.hdr.is-stuck .logo__img--header{max-height:48px}
.logo__img--footer{
  width:var(--zep-footer-logo-width,220px);max-width:100%;max-height:84px
}

/* Only the logo that belongs to the active color theme is visible. These
   rules intentionally come after the sizing rules so later display values
   cannot force both uploaded logos on screen at the same time. */
html[data-theme="dark"] .logo__img--dark,
html[data-theme="light"] .logo__img--light,
.logo__img--single{display:block!important}
html[data-theme="dark"] .logo__img--light,
html[data-theme="light"] .logo__img--dark{display:none!important}

@media(min-width:721px) and (max-width:1180px){
  .logo__img--header{
    width:var(--zep-logo-tablet-width,175px);
    max-width:calc(100vw - 205px);max-height:48px
  }
  .logo__img--footer{width:var(--zep-footer-logo-tablet-width,205px)}
}
@media(max-width:720px){
  .logo__img--header{
    width:var(--zep-logo-mobile-width,155px);
    max-width:calc(100vw - 205px);max-height:46px
  }
  .logo__img--footer{width:var(--zep-footer-logo-mobile-width,190px)}
}
@media(max-width:420px){
  .logo__img--header{max-width:calc(100vw - 190px);max-height:43px}
}

/* ============================================================
   29. NEWS & INSIGHTS — WordPress-native archive + articles
   ============================================================ */
.bhead{padding:clamp(104px,12svh,140px) 0 0}
.bhead .eyebrow{margin-bottom:12px}
.bhead h1{font-size:clamp(34px,4.8vw,58px);margin-bottom:14px}
.bhead .lede{max-width:64ch;margin:0;color:var(--ink-2)}
.insights-intro>p:last-child{margin-bottom:0}

.bfeat{border:1px solid var(--line-strong);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.bfeat__link{display:grid;grid-template-columns:1.15fr 1fr;color:inherit;min-width:0}
.bfeat__media{position:relative;min-height:320px;overflow:hidden;background:var(--surface-2)}
.bfeat__media .ph__drop{position:absolute;inset:0;border-radius:0;border:0;border-right:1px solid var(--line)}
.bfeat__body{padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.bfeat__body h2{font-size:clamp(23px,2.6vw,34px);line-height:1.08}
.bfeat__body p{font-size:14.5px;color:var(--ink-2);line-height:1.7;margin:0}
.bfeat__btn{margin-top:4px}
.bfeat__link:hover .bfeat__btn{transform:translateY(-2px)}
.insights-img{width:100%;height:100%;object-fit:cover;display:block}
.insights-placeholder{position:absolute;inset:0;border:0!important;border-radius:0!important}

.btag{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember-hi);padding:5px 11px;border:1px solid var(--line-strong);
  border-radius:99px;background:var(--surface-2)}
a.btag:hover{border-color:var(--ember);color:var(--ember-txt)}
.btag--hot{border-color:var(--ember);color:var(--ember-hi)}
.bmeta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.05em;color:var(--ink-3)}
.bmeta i{width:3px;height:3px;border-radius:50%;background:var(--ink-3)}

.btools{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:26px}
.bfils{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.bfil{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:99px;
  padding:10px 16px;transition:border-color .2s,color .2s,background .2s,transform .25s var(--ease);white-space:nowrap}
.bfil:hover{border-color:var(--ember);transform:translateY(-2px)}
.bfil.is-on{background:var(--ember-fill);border-color:var(--ember);color:#12192B}
.bsearch{position:relative;flex:0 1 330px;min-width:240px;display:flex;align-items:center;gap:8px}
.bsearch>svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-3);z-index:1}
.bsearch input{min-width:0;flex:1;padding:11px 14px 11px 38px;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:99px;color:var(--ink);font:inherit;font-size:13.5px}
.bsearch input:focus{outline:2px solid var(--ember);outline-offset:1px;border-color:transparent}
.bsearch input::placeholder{color:var(--ink-3)}
.bsearch button{padding:11px 15px;border-radius:99px;background:var(--ember-fill);color:#12192B;
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase}
.bsearch button:hover{background:var(--ember-lift)}

.insights-resultsbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:-8px 0 22px;
  padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.insights-resultsbar p{margin:0;color:var(--ink-2);font-size:13.5px}
.insights-resultsbar a{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember-txt);white-space:nowrap}

.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bcard{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  transition:transform .3s var(--ease),border-color .3s;min-width:0}
.bcard:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.bcard__link{display:flex;flex-direction:column;color:inherit;height:100%;min-width:0}
.bcard__media{position:relative;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.bcard__media .ph__drop{position:absolute;inset:0;border-radius:0;border:0;border-bottom:1px solid var(--line)}
.bcard__body{padding:18px 20px 20px;display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.bcard__body h3{font-size:18.5px;line-height:1.15;overflow-wrap:anywhere}
.bcard__body p{font-size:13.5px;color:var(--ink-2);line-height:1.65;margin:0}
.bcard__body .bmeta{margin-top:auto;padding-top:4px}
.bempty{margin:34px 0 8px;text-align:center;color:var(--ink-2)}
.insights-empty{padding:clamp(36px,6vw,70px) 24px;border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--surface)}
.insights-empty h2{font-size:clamp(24px,3vw,34px);margin-bottom:10px;color:var(--ink)}
.insights-empty p{margin:0 auto 22px;max-width:48ch}
.keyline{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);text-align:center}
.keyline p{margin:0;color:var(--ink-2);font-size:14px}
.keyline a{color:var(--ember-txt);border-bottom:1px solid var(--ember)}

.bpager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:34px}
.bpager .page-numbers{min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line-strong);border-radius:99px;
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--ink-2);background:var(--surface)}
.bpager .page-numbers:hover,.bpager .page-numbers.current{border-color:var(--ember);color:var(--ink)}
.bpager .page-numbers.current{background:var(--ember-fill);color:#12192B}

/* Individual article */
.art__head{padding:clamp(104px,12svh,140px) 0 0}
.art__wrap{max-width:840px}
.art__crumb{margin:0 0 16px}
.art__crumb a{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.art__crumb a:hover{color:var(--ember-hi)}
.art__head .btag{margin-bottom:14px}
.art__head h1{font-size:clamp(30px,4.4vw,52px);margin-bottom:16px}
.art__meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.05em;color:var(--ink-2);margin-bottom:26px}
.art__meta>i{width:3px;height:3px;border-radius:50%;background:var(--ink-3)}
.art__author{display:inline-flex;align-items:center;gap:9px;color:var(--ink)}
.art__avatar{width:30px;height:30px;border-radius:50%;background:var(--ember);color:#12192B;
  display:grid;place-items:center;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.04em}
.art__media{position:relative;aspect-ratio:16/9;border:1px solid var(--line-strong);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:clamp(26px,4svh,44px);background:var(--surface-2)}
.art__media .ph__drop{position:absolute;inset:0;border:0;border-radius:0}
.art__lede{font-size:18px;color:var(--ink);line-height:1.7;margin:0 0 26px}
.art__body{font-size:16px;color:var(--ink-2);line-height:1.8;overflow-wrap:anywhere}
.art__body> :first-child{margin-top:0}
.art__body h2{font-size:clamp(22px,2.4vw,30px);color:var(--ink);margin:36px 0 12px}
.art__body h3{font-size:clamp(19px,2vw,24px);color:var(--ink);margin:28px 0 10px}
.art__body h4{font-size:18px;color:var(--ink);margin:24px 0 8px}
.art__body p{margin:0 0 17px}
.art__body ul,.art__body ol{margin:0 0 18px;padding-left:24px;display:grid;gap:9px}
.art__body li{line-height:1.7}
.art__body strong{color:var(--ink)}
.art__body em{font-style:italic}
.art__body a{color:var(--ember-hi);text-decoration:underline;text-underline-offset:3px}
.art__body blockquote,.art__body .wp-block-quote{margin:28px 0;padding:20px 24px;border-left:3px solid var(--ember);
  background:var(--surface);border-radius:0 var(--r-lg) var(--r-lg) 0}
.art__body blockquote p{margin:0;font-size:17px;color:var(--ink);font-style:italic;line-height:1.65}
.art__body img{height:auto;border-radius:var(--r-md)}
.art__body figure{margin:26px 0}
.art__body figcaption{font-size:12px;color:var(--ink-3);text-align:center;margin-top:8px}
.art__body iframe,.art__body video{max-width:100%;border:0;border-radius:var(--r-md)}
.art__body table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:24px 0}
.art__body th,.art__body td{padding:12px 14px;border:1px solid var(--line);text-align:left;white-space:normal}
.art__body th{color:var(--ink);background:var(--surface)}
.art__body pre{overflow-x:auto;padding:18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.art__body code{font-family:var(--mono);font-size:.9em}
.art__body .wp-block-button__link{display:inline-flex;padding:13px 22px;border-radius:var(--r-sm);background:var(--ember-fill);color:#12192B;text-decoration:none;font-family:var(--display);font-weight:700;text-transform:uppercase}

.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:36px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.share .mlabel{margin-right:4px;color:var(--ink-2)}
[data-theme="light"] .share .mlabel{color:var(--ink)}
.share__btn{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:99px;padding:9px 16px;
  cursor:pointer;transition:border-color .2s,transform .25s var(--ease)}
.share__btn:hover{border-color:var(--ember);transform:translateY(-2px)}
.artcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  margin:34px 0 0;padding:clamp(22px,3vw,34px);background:var(--surface);border:1px solid var(--ember);border-radius:var(--r-lg)}
.artcta__copy{flex:1 1 380px}
.artcta h2{font-size:clamp(22px,2.5vw,30px);margin-bottom:8px}
.artcta p{font-size:14.5px;color:var(--ink-2);line-height:1.65;margin:0}
.artcta .btn{white-space:normal}
.rel__h{font-size:clamp(24px,2.8vw,34px);margin-bottom:20px}

@media(max-width:1080px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:880px){
  .bfeat__link{grid-template-columns:1fr}
  .bfeat__media{min-height:220px;aspect-ratio:16/9}
  .bfeat__media .ph__drop{border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:720px){
  .bhead{padding-top:100px}
  .btools{align-items:stretch}
  .bfils{width:100%;flex-wrap:nowrap;overflow-x:auto;padding:2px 2px 9px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bfils::-webkit-scrollbar{display:none}
  .bsearch{flex:1 1 100%;min-width:0}
  .bsearch button{font-size:13px}
  .insights-resultsbar{align-items:flex-start}
  .art__head{padding-top:100px}
  .art__meta{gap:9px}
  .art__meta>i{display:none}
  .art__meta>*{margin-right:5px}
  .artcta .btn{width:100%}
}
@media(max-width:640px){.bgrid{grid-template-columns:minmax(0,1fr)}}

/* Keep the expanded desktop navigation balanced after adding Insights. */
@media(min-width:1181px) and (max-width:1390px){
  .hdr__phone{display:none}
  .nav{gap:18px}
  .nav__link{font-size:.8rem}
  .hdr__act{gap:10px}
}

/* ============================================================
   ZEPTONIC 2.1.2 — ASPECT-RATIO & FOCAL-POINT IMAGE SYSTEM
   Every managed frame is controlled by aspect ratio rather than pixel size.
   Images fill edge to edge with proportional cropping, and each image can
   store its own focal point from WordPress admin.
   ============================================================ */
.zep-img--fit-contain{object-fit:contain!important;object-position:center center!important}
.zep-img--fit-cover{object-fit:cover!important;object-position:var(--zep-img-position,center center)!important}
.zep-img--desktop{aspect-ratio:16/10}
.zep-img--phone{aspect-ratio:9/19.5}
.zep-img--tablet{aspect-ratio:3/4}
.zep-img--portrait{aspect-ratio:4/5}
.zep-img--portrait34{aspect-ratio:3/4}
.zep-img--landscape{aspect-ratio:4/3}

.zep-frame--desktop{
  border-radius:16px;
  background:var(--surface-2);
}
.zep-frame--desktop::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line-strong);
}
.zep-frame--phone{
  border-radius:clamp(20px,2vw,28px);
  background:var(--surface-2);
  box-shadow:0 28px 60px -22px rgba(0,0,0,.72),inset 0 0 0 1px var(--line-strong);
}
.zep-frame--phone::before{
  content:"";position:absolute;z-index:3;top:7px;left:50%;translate:-50% 0;
  width:30%;height:5px;border-radius:99px;background:rgba(8,12,22,.68);
  pointer-events:none;
}
.zep-frame--phone .zep-img,
.zep-frame--phone .ph__drop{border-radius:inherit}
.zep-frame--landscape{border-radius:16px;background:var(--surface-2)}
.zep-frame--portrait{border-radius:22px;background:var(--surface-2)}

/* Brian's gallery used to force every upload into a square. Respect each
   slot's real portrait or landscape shape instead. */
.gal__item .zep-img{width:100%;height:auto;aspect-ratio:auto}
.gal__item .zep-img--portrait34{aspect-ratio:3/4}
.gal__item .zep-img--portrait{aspect-ratio:4/5}
.gal__item .zep-img--landscape{aspect-ratio:4/3}
.gal__item .ph__drop{aspect-ratio:4/3}
.gal__item:has(.zep-img--portrait34) .ph__drop{aspect-ratio:3/4}

/* Maintain balanced artwork when the tall phone overlay replaces the old
   square card. */
.svc__art:has(.zep-frame--phone){min-height:clamp(300px,34vw,390px)}
.hero__stage .zep-frame--phone{z-index:4}
.svc__art .zep-frame--phone{z-index:4}

@media(max-width:720px){
  .svc__art:has(.zep-frame--phone){min-height:285px}
  .svc__art .zep-frame--desktop{width:78%!important}
  .svc__art .zep-frame--phone{width:clamp(108px,31%,132px)!important}
  .zep-frame--phone::before{top:5px;height:4px}
}

/* Portfolio/device captures fill their device frame without distortion. */
.dev .zep-img{object-fit:cover!important;object-position:var(--zep-img-position,center center)!important;background:var(--surface-2)}

/* Final image rendering contract: frame ratio controls layout; source pixels do not. */
.ph>.zep-img,.gal__item .zep-img,.dev .zep-img,.insights-img{
  width:100%;height:100%;object-fit:cover;object-position:var(--zep-img-position,center center);
}
/* =========================================================
   MOBILE-FRIENDLY SOFTWARE STACK COMPARISON
   ========================================================= */

@media(max-width:720px){

  #software-savings{
    overflow:visible;
  }

  #software-savings .shead{
    margin-bottom:22px;
  }

  .stack-table-wrap{
    overflow:visible;
    border:0;
    box-shadow:none;
    background:transparent;
  }

  .stack-table{
    min-width:0;
    width:100%;
    display:block;
  }

  .stack-table thead{
    display:none;
  }

  .stack-table tbody{
    display:grid;
    gap:16px;
  }

  .stack-table tr{
    display:block;
    padding:20px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--panel);
    box-shadow:0 10px 30px rgba(0,0,0,.05);
  }

  .stack-table td{
    display:grid;
    grid-template-columns:130px 1fr;
    gap:12px;
    align-items:center;
    padding:11px 0;
    border:0;
    border-bottom:1px solid var(--line);
    text-align:left!important;
    background:transparent!important;
  }

  .stack-table td:last-child{
    border-bottom:0;
  }

  .stack-table td::before{
    font-size:.7rem;
    line-height:1.3;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--muted);
  }

  .stack-table td:nth-child(1){
    display:block;
    padding-top:0;
    padding-bottom:15px;
    margin-bottom:4px;
    font-size:1.08rem;
    font-weight:800;
    color:var(--text);
  }

  .stack-table td:nth-child(1)::before{
    display:none;
  }

  .stack-table td:nth-child(2)::before{
    content:"Separate tool";
  }

  .stack-table td:nth-child(3)::before{
    content:"Typical cost";
  }

  .stack-table td:nth-child(4)::before{
    content:"Core · $297";
  }

  .stack-table td:nth-child(5)::before{
    content:"Growth · $497";
  }

  .stack-table td:nth-child(6)::before{
    content:"Healthcare · $797";
  }

  .stack-table td:nth-child(2){
    color:var(--text);
  }

  .stack-table td:nth-child(3){
    font-weight:800;
    color:var(--text);
  }

  .stack-table strong{
    justify-self:start;
    padding:6px 10px;
    font-size:.72rem;
  }


  /* SAVINGS CARDS */

  .stack-savings{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    margin-top:24px;
  }

  .stack-save{
    min-height:auto;
    padding:22px;
    border-radius:18px;
  }

  .stack-save--featured{
    transform:none;
  }

  .stack-save > span{
    font-size:.7rem;
  }

  .stack-save > strong{
    font-size:2rem;
    margin-bottom:14px;
  }

  .stack-save__amount{
    margin-top:20px;
    padding-top:18px;
  }

  .stack-save__amount strong{
    font-size:1.25rem;
  }
}
/* INCLUDED STATUS — GREEN */
.stack-table td strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(28,170,92,.12) !important;
  color:#1caa5c !important;
  font-size:.78rem;
  font-weight:800;
  line-height:1;
}

/* Optional checkmark */
.stack-table td strong::before{
  content:"✓";
  margin-right:6px;
  font-weight:900;
}
/* =========================================================
   ZEPTONIC CRM SAVINGS CARDS
   ========================================================= */

.stack-savings{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
  margin-top:32px;
}

/* Individual card */
.stack-save{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:28px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--panel);
  overflow:hidden;
}

/* Orange accent */
.stack-save::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:var(--orange);
}

/* Plan name */
.stack-save > span{
  display:block;
  margin-bottom:10px;
  color:var(--orange);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* Zeptonic price */
.stack-save > strong{
  display:block;
  margin-bottom:20px;
  color:var(--text);
  font-size:2.35rem;
  line-height:1;
  letter-spacing:-.04em;
}

/* Comparable tools */
.stack-save > p{
  margin:0 0 24px;
  padding:15px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:.9rem;
  line-height:1.5;
}

.stack-save > p b{
  color:var(--text);
}

/* Savings area */
.stack-save__amount{
  margin-top:auto;
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* BIG GREEN SAVINGS NUMBER */
.stack-save__amount > strong{
  display:block;
  margin-top:8px;
  color:#1caa5c !important;
  font-size:1.55rem;
  line-height:1.15;
  letter-spacing:-.025em;
  text-transform:none;
}

/* Annual savings */
.stack-save__amount > small{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-top:10px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(28,170,92,.10);
  color:#1caa5c;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:0;
  text-transform:none;
}


/* =========================================================
   FEATURED GROWTH PLAN
   ========================================================= */

.stack-save--featured{
  border-color:rgba(244,81,30,.45);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(244,81,30,.12),
      transparent 45%
    ),
    var(--panel);
  box-shadow:0 18px 50px rgba(0,0,0,.10);
}

.stack-save--featured::after{
  content:"BEST VALUE";
  position:absolute;
  top:20px;
  right:20px;
  padding:5px 9px;
  border-radius:999px;
  background:var(--orange);
  color:#fff;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.08em;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

  .stack-savings{
    grid-template-columns:1fr;
    gap:16px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:720px){

  .stack-savings{
    margin-top:24px;
    gap:14px;
  }

  .stack-save{
    padding:22px;
    border-radius:18px;
  }

  .stack-save > strong{
    font-size:2rem;
    margin-bottom:17px;
  }

  .stack-save > p{
    margin-bottom:19px;
    padding:13px 0;
  }

  .stack-save__amount > strong{
    font-size:1.4rem;
  }

  .stack-save--featured::after{
    top:18px;
    right:18px;
    font-size:.58rem;
  }

}
@media (max-width:720px){

  .page-pricing #compare .tblwrap{
    display:block!important;
    overflow:visible!important;
  }

  .page-pricing #compare .tbl{
    min-width:0!important;
    width:100%;
    display:block;
  }

  .page-pricing #compare .tbl thead{
    display:none;
  }

  .page-pricing #compare .tbl tbody{
    display:grid;
    gap:14px;
  }

  .page-pricing #compare .tbl tr{
    display:block;
    padding:18px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--panel);
  }

  .page-pricing #compare .tbl th,
  .page-pricing #compare .tbl td{
    display:grid;
    grid-template-columns:130px 1fr;
    gap:12px;
    align-items:center;
    padding:10px 0;
    border:0;
    border-bottom:1px solid var(--line);
    text-align:left!important;
    background:transparent!important;
  }

  .page-pricing #compare .tbl td:last-child{
    border-bottom:0;
  }

  .page-pricing #compare .tbl th[scope="row"]{
    display:block;
    padding-top:0;
    padding-bottom:14px;
    margin-bottom:4px;
    font-size:1.02rem;
    font-weight:800;
    color:var(--text);
  }

  .page-pricing #compare .tbl th[scope="row"]::before{
    display:none;
  }

  .page-pricing #compare .tbl td::before{
    font-size:.7rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--muted);
  }

  .page-pricing #compare .tbl td:nth-of-type(1)::before{
    content:"Core CRM";
  }

  .page-pricing #compare .tbl td:nth-of-type(2)::before{
    content:"Growth CRM";
  }

  .page-pricing #compare .tbl td:nth-of-type(3)::before{
    content:"Healthcare CRM";
  }

  .page-pricing #compare .tbl td{
    color:var(--text);
    font-weight:700;
  }

  .page-pricing #compare .tbl td:nth-of-type(2){
    color:var(--orange);
  }

  .page-pricing #compare .tbl td:has(> :not(*)){
    color:var(--muted);
  }

}