/* Self-hosted Inter (variable, latin subset, 48KB) — replaces the
   Google Fonts CDN links. One file serves weights 400-800; swap keeps
   text visible on first paint. Clutch research pass 2026-08-26. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==================================================================
   PROVERSE — Belkins-clone design system. 2026-08-26.

   Brief (Dan): remake belkins.io's layout for Proverse. Design
   principles identical, dark navy in place of their orange,
   everything else the same.

   Their language, measured from the live site:
     - Inter. Near-black #292929 ink, #666 body grey.
     - Backgrounds: #fff, #fbfbfb, #f5f5f5, #ebebeb. ONE accent.
     - Full-width sections, 1200px content column.
     - Caps accent eyebrows. Massive 700-weight headlines, sentence
       case, accent-coloured keyword (no serif italics).
     - Buttons: solid accent, ~8px radius, semibold.
     - Cards: white, 12-16px radius, hairline border, whisper shadow.
     - One dark rounded inset band (theirs #1f1f1f; ours dark navy).
     - Soft blurred blob shapes on the hero.

   Class names preserved from the previous system so build.mjs and
   site.js keep working unchanged. Old serif/pill styling is gone —
   the same markup now renders in the Belkins language.
   Previous system backed up at assets/styles-legacy.css.bak and in git.
   ================================================================== */

:root{
  --ink:#20242B;                 /* their #292929, cooled a touch */
  --ink-2:#3D4350;
  --muted:#666E7A;               /* their #666 */
  --muted-2:#9AA1AC;             /* their #a3a3a3 */

  --accent:#15448A;              /* the dark navy that replaces #ff5e00 */
  --accent-deep:#0D2F63;
  --accent-rgb:21,68,138;
  --accent-tint:#E7EEF9;         /* their #fce0d0 equivalent */

  --bg:#ffffff;
  --bg-soft:#fbfbfb;
  --bg-grey:#f5f5f5;
  --bg-deep:#ebebeb;
  --dark:#0D1B2C;                /* sampled from the Wistia player so the
                                    film and every dark surface are one navy */
  --dark-2:#0D1B2C;

  --line:#e7e9ed;
  --line-2:#d9dce2;

  --title:'Inter','Onest','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Inter','Onest','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:'Inter','Onest',sans-serif;  /* serif retired; .it is colour now */

  --max:1200px;
  --pad:clamp(20px,4vw,48px);
  --r:16px;                      /* cards */
  --r-btn:8px;
  --ease:cubic-bezier(.22,1,.36,1);
  --gold:#C79A3C;                /* legacy var some rules reference */
}
body.theme-navy{--accent:#15448A;--accent-deep:#0D2F63;--accent-rgb:21,68,138}

/* ---------- reset-ish ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);color:var(--ink);background:var(--bg-grey);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--title);font-weight:700;line-height:1.12;letter-spacing:-.025em;color:var(--ink)}

/* Belkins headline scale: huge */
h1{font-size:clamp(38px,5.6vw,72px);letter-spacing:-.03em}
h2{font-size:clamp(28px,3.6vw,48px)}
h3{font-size:19px;letter-spacing:-.015em}

/* the accent keyword inside a heading — was serif italic, now Belkins */
.it{font-style:normal;font-family:inherit;color:var(--accent);font-weight:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:50%;top:-60px;transform:translateX(-50%);z-index:200;background:var(--ink);color:#fff;font-size:13.5px;font-weight:600;padding:11px 22px;border-radius:0 0 10px 10px;transition:top .18s var(--ease)}
.skip:focus{top:0}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ==================================================================
   SECTIONS — full-width, Belkins rhythm. .mod keeps its name; the
   rounded floating band is gone except for the dark inset band.
   ================================================================== */
.mod{padding:clamp(56px,8vh,80px) var(--pad)}
.mod > *{max-width:var(--max);margin-left:auto;margin-right:auto}
/* Belkins runs one continuous grey canvas — both bands sit on it and
   the white lives in the cards, not the sections. */
.mod-white{background:var(--bg-grey)}
.mod-tint{background:var(--bg-grey)}
.mod-sky,.mod-sky-inv{background:var(--bg-grey);position:relative;overflow:hidden}
/* their soft abstract blobs */
.mod-sky::before,.mod-sky-inv::before{
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(var(--accent-rgb),.16), transparent 65%);
  top:-180px;left:-120px;filter:blur(10px);pointer-events:none;
}
.mod-sky::after,.mod-sky-inv::after{
  content:"";position:absolute;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle at 60% 40%, #eef1f5, transparent 70%);
  right:-200px;top:40px;pointer-events:none;
}
.mod-sky > *,.mod-sky-inv > *{position:relative;z-index:1}
/* The hero holds the nav, and overflow:hidden was clipping the mega
   menu (Dan, 2026-08-26). Paint its blobs as background layers, which
   clip to the box on their own, so the section can overflow visibly. */
.hero-mod{
  overflow:visible;
  background:
    radial-gradient(520px 520px at calc(0% - 120px) -180px, rgba(var(--accent-rgb),.16), transparent 65%),
    radial-gradient(640px 640px at calc(100% + 200px) 40px, #eef1f5, transparent 70%),
    var(--bg-grey);
}
.hero-mod::before,.hero-mod::after{content:none}
/* the menu must sit above everything that follows it */
.hero-mod .nav{z-index:60}
.mega,.mega-x{z-index:70}

/* the dark band: rounded, inset from the viewport, like theirs */
.mod-ink{
  background:linear-gradient(170deg,var(--dark) 0%,#0B1522 60%,var(--dark-2) 100%);
  color:#C7D0DC;
  max-width:calc(var(--max) + 160px);margin:0 auto;border-radius:24px;
}
@media (max-width:1400px){.mod-ink{margin-left:16px;margin-right:16px}}
.mod-ink h2,.mod-ink h3,.mod-ink h4{color:#fff}
.mod-ink .sub,.mod-ink p,.mod-ink .lede{color:#A9B6C7}
.mod-ink p b,.mod-ink .sub b,.mod-ink .lede b{color:#fff}
.mod-ink .it{color:#7FA6E0}
.mod-ink .chip{color:#7FA6E0}
.mod-ink .mod-note{color:#A9B6C7}
.mod-ink .mod-note b{color:#fff}
.mod-ink .cta-micro{color:#8C9AAD}
.mod-ink .btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.mod-ink .btn-ghost:hover{background:rgba(255,255,255,.08)}

/* finale = light grey with blobs, Belkins' closing form section */
.finale-mod{text-align:center}
.finale-mod h2{max-width:820px;margin:0 auto 14px}
.finale-mod .sub{max-width:640px;margin:0 auto 8px}
.mini-q{margin-top:28px;font-size:15px;color:var(--muted);font-style:italic}
.mini-q cite{display:block;margin-top:6px;font-style:normal;font-size:12.5px;color:var(--muted-2)}

/* section header */
.sec-h{text-align:center;max-width:860px;margin:0 auto clamp(34px,5vh,52px)}
.sec-h h2{margin:0 auto 14px}
.sub{color:var(--muted);font-size:clamp(15.5px,1.2vw,18px);line-height:1.65}
.sec-h .sub{max-width:680px;margin:0 auto}
.mod-note{text-align:center;margin-top:34px;color:var(--muted);font-size:15px;max-width:720px}
.mod-note b{color:var(--ink)}
.mod-note a{color:var(--accent);font-weight:600}
.prose a{color:var(--accent);font-weight:600}

/* eyebrow — Belkins: caps, accent, bold, letterspaced. No pill. */
.chip{
  display:inline-block;
  font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
  background:none;border:none;box-shadow:none;padding:0;
}
.chip svg{display:none}

/* ==================================================================
   BUTTONS — solid accent, 8px, semibold
   ================================================================== */
.btn{
  display:inline-block;background:var(--accent);color:#fff;border:none;cursor:pointer;
  font-family:var(--body);font-weight:600;font-size:15.5px;
  padding:14px 30px;border-radius:var(--r-btn);
  transition:background .18s,transform .18s,box-shadow .18s;
  white-space:nowrap;
}
.btn:hover{background:var(--accent-deep);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-ghost:hover{background:var(--bg-grey);transform:translateY(-1px)}
.mid-cta{text-align:center;margin-top:clamp(28px,4vh,40px)}
.mid-cta .note{margin-top:12px;font-size:13.5px;color:var(--muted)}
.mid-cta .btn{margin:4px 5px}
.cta-micro{font-size:13.5px;color:var(--muted);max-width:46ch;margin:12px auto 0;line-height:1.5}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:6px}

.trustline{font-size:13px;color:var(--muted);margin-top:16px}
.trustline .stars{color:var(--accent);letter-spacing:2px;margin-right:6px;font-size:11px}
.trustline b{color:var(--ink);font-weight:700}
.trustline .sep{margin:0 8px;color:var(--muted-2)}
.mod-ink .trustline{color:#8C9AAD}
.mod-ink .trustline b{color:#fff}

/* ==================================================================
   NAV — white full-width bar, hairline border, like theirs
   ================================================================== */
.hero-mod{padding-top:0;text-align:center}
.page-hero{padding-top:0}
.nav{
  display:flex;align-items:center;gap:10px;
  max-width:none;margin:0 calc(-1 * var(--pad)) clamp(48px,7vh,80px);
  padding:14px var(--pad);
  background:#fff;border:none;border-bottom:1px solid var(--line);
  border-radius:0;position:relative;z-index:50;
  text-align:left;
}
.nav > .logo{margin-right:auto}
.logo{display:inline-flex;align-items:center;gap:9px;font-family:var(--title);font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.mark-img{width:26px;height:26px;border-radius:7px}
.nav-c{display:flex;align-items:center;gap:2px;margin-right:auto}
.nav-c > a,.nav-drop-btn{
  font-size:15px;font-weight:500;color:var(--ink);padding:9px 13px;border-radius:8px;
  display:inline-flex;align-items:center;gap:6px;transition:background .15s;
}
.nav-c > a:hover,.nav-drop-btn:hover{background:var(--bg-grey)}
.nav-c a[aria-current="page"]{color:var(--accent);font-weight:600}
.nav .btn{padding:11px 22px;font-size:16px;border-radius:12px}
.nav-drop{position:relative}
.nav-drop .caret{width:9px;height:9px;transition:transform .18s var(--ease)}
.nav-drop:hover .caret,.nav-drop:focus-within .caret{transform:rotate(180deg)}

.mega{
  text-align:left;
  position:absolute;top:calc(100% + 10px);left:0;transform:translateY(6px);
  width:min(430px,92vw);
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(18,26,38,.22);
  padding:10px;z-index:60;
  opacity:0;visibility:hidden;transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;
}
.nav-drop:hover .mega,.nav-drop:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega a{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:10px;transition:background .15s}
.mega a:hover{background:var(--bg-grey)}
.mega .mi{
  flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--accent-tint);color:var(--accent);
}
.mega .mi svg{width:16px;height:16px}
.mega .mt{display:block;font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.mega .md{display:block;font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.mega .caret{width:9px;height:9px}

/* wide services mega — columns + promo, like theirs */
.mega-wide{
  width:min(960px,94vw);
  left:50%;transform:translate(-50%,6px);
  padding:18px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 16px;
}
.nav-drop:hover .mega-wide,.nav-drop:focus-within .mega-wide{transform:translate(-50%,0)}
.mega-wide .mcol{display:flex;flex-direction:column}
.mega-wide .mhead{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);padding:8px 12px 6px}
.mega-wide a{padding:9px 12px;align-items:center}
.mega-wide .mt{font-size:14px}
.mega-wide .md{font-size:12px}
.mega-wide .mi{width:30px;height:30px}
.mega-wide .mpromo{
  background:var(--bg-grey);border-radius:12px;padding:18px;
  display:flex;flex-direction:column;justify-content:space-between;gap:14px;
}
.mega-wide .mpromo h4{font-size:15px;margin-bottom:6px}
.mega-wide .mpromo p{font-size:12.5px;color:var(--muted);line-height:1.5}
.mega-wide .mpromo .btn{width:100%;text-align:center;padding:11px 16px;font-size:13.5px}
@media (max-width:1040px){
  .mega-wide{grid-template-columns:repeat(2,minmax(0,1fr));width:min(680px,94vw)}
  .mega-wide .mpromo{grid-column:1/-1}
}

/* floating nav clone (site.js) */
.nav-float{position:fixed;top:0;left:0;right:0;z-index:90;transform:translateY(-110%);transition:transform .25s var(--ease)}
.nav-float.on{transform:none}
.nav-float .nav{margin:0;box-shadow:0 8px 28px -14px rgba(18,26,38,.18)}

/* burger + mobile menu */
.nav-burger{display:none;padding:8px;border-radius:8px}
.nav-burger svg{width:22px;height:22px;display:block}
.m-menu{
  display:none;position:absolute;top:calc(100% + 6px);left:12px;right:12px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(18,26,38,.25);
  padding:14px;z-index:70;text-align:left;
}
.m-menu.open{display:block}
.m-menu a{display:block;padding:9px 10px;font-size:15px;font-weight:500;border-radius:8px}
.m-menu a:hover{background:var(--bg-grey)}
.m-sub{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);padding:12px 10px 4px}
@media (max-width:960px){
  .nav-c{display:none}
  .nav-burger{display:block}
  .nav .btn{margin-left:auto}
  .nav > .logo{margin-right:0}
  /* the menu was a small card holding ~25 links. Give it the height it
     needs, scroll it, and make every row a real tap target. */
  .m-menu{
    left:8px;right:8px;top:calc(100% + 4px);
    max-height:calc(100vh - 84px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:6px 10px 16px;border-radius:12px;
  }
  .m-menu a{padding:13px 10px;font-size:15.5px;border-bottom:1px solid var(--line)}
  .m-menu a:last-child{border-bottom:none}
  .m-sub{
    position:sticky;top:0;z-index:1;background:#fff;
    padding:14px 10px 6px;margin-top:2px;border-bottom:1px solid var(--line);
  }
  .m-menu a[data-cta="book-call"]{
    margin-top:14px;background:var(--accent);color:#fff;text-align:center;
    border-radius:var(--r);border-bottom:none;font-weight:600;
  }
}
/* bare nav: logo left, CTA right, nothing between */
.nav-bare{justify-content:space-between}
.nav-bare .btn{margin-left:auto}

/* scroll progress hairline */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:100;transform-origin:left;transform:scaleX(0);background:var(--accent)}
@media (pointer:coarse),(prefers-reduced-motion:reduce){.progress{display:none}}

/* ==================================================================
   HERO
   ================================================================== */
.hero{max-width:900px;margin:0 auto;padding:clamp(28px,5vh,64px) 0 clamp(40px,7vh,80px)}
.hero h1{max-width:860px;margin:0 auto 22px}
.hero-sub{color:var(--muted);font-size:clamp(16px,1.3vw,19px);max-width:60ch;margin:0 auto 28px}
.hero-sub b{color:var(--ink);font-weight:600}
.ph-inner{max-width:860px;margin:0 auto;text-align:center;padding-bottom:clamp(30px,5vh,56px)}
.ph-inner h1{margin-bottom:18px}
.ph-inner .sub{max-width:64ch;margin:0 auto 22px}
.ph-inner .sub b{color:var(--ink)}

/* typewriter (industries page) */
.h1-tw{max-width:960px}
.tw{display:inline-block;color:var(--accent)}
.tw-line{display:block;min-height:1.12em}
.tw-caret{display:inline-block;width:.05em;height:.78em;margin-left:.07em;background:var(--accent);vertical-align:-.04em;border-radius:1px;animation:twblink 1.05s steps(1) infinite}
@keyframes twblink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tw-caret{animation:none}}

/* ==================================================================
   CARDS + GRIDS
   ================================================================== */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 1px 2px rgba(18,26,38,.03);
}

/* stats — Belkins-style bold figures */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:var(--max);margin:0 auto}
.stats-row.stats-n3{grid-template-columns:repeat(3,1fr)}
.stats-row.stats-n2{grid-template-columns:repeat(2,1fr)}
.stat{padding:6px 18px;text-align:center}
.stat .n{font-family:var(--title);font-weight:700;letter-spacing:-.03em;font-size:clamp(30px,3.2vw,44px);color:var(--accent);line-height:1.1;font-variant-numeric:tabular-nums}
.stat .d{font-size:13.5px;color:var(--muted);margin-top:4px}
.stats-open .stat{border-left:1px solid var(--line)}
.stats-open .stat:first-child{border-left:none}
@media (max-width:860px){
  .stats-row{grid-template-columns:1fr 1fr;gap:22px 0}
  .stats-open .stat:nth-child(odd){border-left:none}
}
.mod-ink .stats-open .stat{border-left-color:rgba(255,255,255,.14)}
.mod-ink .stat .n{color:#7FA6E0}
.mod-ink .stat .d{color:#A9B6C7}
.trust-mod{padding-top:clamp(40px,6vh,64px);padding-bottom:clamp(40px,6vh,64px)}
.trust-mod .stats-row{margin-bottom:34px}
.trust-mod .stats-row:last-child{margin-bottom:0}

/* logo marquee — bold centred label, grey logos */
.lbl{text-align:center;font-size:15.5px;font-weight:600;color:var(--ink);margin-bottom:26px}
.mod-ink .lbl{color:#A9B6C7}
.mq{overflow:hidden;position:relative;max-width:var(--max);margin:0 auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:inline-flex;width:max-content;align-items:center;gap:56px;white-space:nowrap;animation:mq 36s linear infinite;padding-right:56px}
.bm{flex:none}
.bm img{width:auto;max-width:none}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}
.bm img{filter:grayscale(1);opacity:.55;mix-blend-mode:multiply}
.bm img.inv{filter:brightness(0);opacity:.5;mix-blend-mode:normal}
.mod-ink .bm img,.mod-ink .bm img.inv{filter:brightness(0) invert(1);opacity:.7;mix-blend-mode:normal}

/* pain cards — 3-col, Belkins card look */
.pains-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:var(--max);margin:0 auto}
.pains-grid.pains-4{grid-template-columns:repeat(2,1fr)}
.pain{padding:28px;text-align:left}
.pain .pn{display:block;font-family:var(--title);font-weight:700;font-size:15px;color:var(--accent);margin-bottom:14px}
.pain h3{margin-bottom:10px;font-size:18px}
.pain p{font-size:14.5px;color:var(--muted)}
@media (max-width:1000px){.pains-grid{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.pains-grid,.pains-grid.pains-4{grid-template-columns:1fr}}

/* two-systems cards */
.sys-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:var(--max);margin:0 auto}
.sys{padding:30px}
.sys .idx{display:block;font-family:var(--title);font-weight:700;font-size:15px;color:var(--accent);margin-bottom:12px}
.sys h3{font-size:22px;margin-bottom:8px}
.sys .promise{font-weight:600;color:var(--ink);font-size:15px;margin-bottom:10px}
.sys p{font-size:14.5px;color:var(--muted)}
.sys .diff{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:14px}
.sys .diff b{color:var(--ink)}
@media (max-width:860px){.sys-grid{grid-template-columns:1fr}}

/* case pair cards */
.cs-grid .cs{padding:28px}
.cs .cs-logo{margin-bottom:16px}
.cs .cs-logo.inv{filter:brightness(0);opacity:.65}
.ctype{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.cs dl{display:flex;flex-direction:column;gap:12px}
.cs .row{display:grid;grid-template-columns:120px 1fr;gap:12px;font-size:14px;padding-top:12px;border-top:1px solid var(--line)}
.cs dt{font-weight:600;color:var(--muted-2);font-size:12.5px;letter-spacing:.02em;padding-top:2px}
.cs dd{color:var(--muted)}
.cs .row-result dd{color:var(--ink)}
.cs .row-result dd b{color:var(--accent)}
@media (max-width:560px){.cs .row{grid-template-columns:1fr;gap:2px}}

/* quotes wall */
.love-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:var(--max);margin:0 auto}
.love-grid.lg4{grid-template-columns:1fr 1fr;max-width:920px}
.quote{padding:26px;display:flex;flex-direction:column;gap:18px;justify-content:space-between}
.quote .stars{color:var(--accent);letter-spacing:2px;font-size:12px;margin-bottom:10px}
.quote p{font-size:14.5px;color:var(--ink);line-height:1.6}
.quote .who{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--muted)}
.pfp{width:34px;height:34px;border-radius:50%;background:var(--accent-tint);color:var(--accent);display:grid;place-items:center;font-size:10px;font-weight:700}
@media (max-width:880px){.love-grid,.love-grid.lg4{grid-template-columns:1fr}}

/* films */
.films-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:var(--max);margin:0 auto}
.films-row.films-1{grid-template-columns:minmax(0,720px);justify-content:center}
.film{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.fr{position:relative;aspect-ratio:16/9;background:var(--dark)}
.fr-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fr .metric{
  position:absolute;top:12px;left:12px;z-index:2;pointer-events:none;
  background:var(--accent);color:#fff;font-size:12px;font-weight:700;
  padding:6px 12px;border-radius:7px;
}
.fbody{padding:22px 24px}
.fstars{color:var(--accent);letter-spacing:2px;font-size:11px;margin-bottom:10px}
.film blockquote{font-size:14.5px;color:var(--ink);line-height:1.6;margin-bottom:12px}
.film .who{font-size:13px;font-weight:600;color:var(--muted)}
@media (max-width:860px){.films-row{grid-template-columns:1fr}}

/* differentiator / add-on cards */
.stick-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;max-width:var(--max);margin:0 auto}
.stick{padding:26px}
.stick .fi{
  width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  background:var(--accent-tint);color:var(--accent);margin-bottom:16px;
}
.stick .fi svg{width:18px;height:18px}
.stick h3{font-size:17px;margin-bottom:8px}
.stick p{font-size:14px;color:var(--muted)}

/* steps (engagement) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:var(--max);margin:0 auto}
.steps-4{grid-template-columns:repeat(4,1fr)}
.step{text-align:left;padding:0 8px}
.steps-line .step{position:relative;padding-top:8px}
.step .sn{
  display:inline-block;font-size:12.5px;font-weight:700;color:var(--accent);
  background:var(--accent-tint);border-radius:7px;padding:5px 11px;margin-bottom:14px;
}
.step h3{font-size:18px;margin-bottom:8px}
.step p{font-size:14px;color:var(--muted)}
.step .tag{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:var(--accent);border-radius:7px;padding:5px 11px}
/* even white blocks: the grid stretches every step to the tallest, the
   column layout pins each tag to the bottom so the pills line up. */
.step{display:flex;flex-direction:column;align-items:flex-start;padding:22px 24px}
.steps-line .step{padding-top:22px}
.step p{margin-bottom:14px}
.step .tag{margin-top:auto}
@media (max-width:1000px){.steps-4{grid-template-columns:1fr 1fr;gap:26px 14px}}
@media (max-width:640px){.steps,.steps-4{grid-template-columns:1fr}}

/* resources cards */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:var(--max);margin:0 auto}
.post-card{overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.post-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(18,26,38,.25)}
.post-card .pbody{padding-top:24px}
.pbody{padding:20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.pbody .cat{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.pbody h3{font-size:16.5px}
.pbody .meta{margin-top:auto;font-size:12.5px;color:var(--muted-2)}
@media (max-width:860px){.res-grid{grid-template-columns:1fr}}

/* case-studies listing */
.cs-filter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:30px}
.fpill{font-size:13.5px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:9px 18px;transition:all .15s}
.fpill:hover{border-color:var(--accent);color:var(--accent)}
.fpill.on{background:var(--accent);border-color:var(--accent);color:#fff}
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:var(--max);margin:0 auto}
.cs-card{display:flex;flex-direction:column;overflow:hidden;padding:22px;transition:transform .18s,box-shadow .18s;color:var(--ink)}
.cs-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(18,26,38,.25)}
.cs-card.hide{display:none}
.cs-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;min-height:30px}
.cs-card-top img{max-height:22px;width:auto}
.cs-card-top img.inv{filter:brightness(0);opacity:.65}
.cs-card-top b{font-size:14px}
.cs-card .pill{font-size:11.5px;font-weight:700;background:var(--accent-tint);color:var(--accent);border-radius:7px;padding:5px 10px;white-space:nowrap}
.cs-art{border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:var(--bg-grey);margin-bottom:14px}
.cs-art img{width:100%;height:100%;object-fit:cover}
.cs-niche{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
.cs-card h3{font-size:16.5px;margin-bottom:8px}
.cs-card > p{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.cs-tag{margin-top:auto;font-size:12.5px;font-weight:600;color:var(--accent)}
@media (max-width:1020px){.cases-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.cases-grid{grid-template-columns:1fr}}

/* ==================================================================
   PIPELINE DIAGRAM (dark band)
   ================================================================== */
.cad-mod{text-align:center}
.cad-head{max-width:720px;margin:0 auto}
.cad-head h2{margin-bottom:14px}
.cad-head .lede{font-size:15.5px;max-width:56ch;margin:0 auto}
.pipe{
  display:grid;grid-template-columns:minmax(0,1fr) 52px minmax(0,1.15fr) 52px minmax(0,1fr);
  gap:0;align-items:center;max-width:1000px;margin:clamp(34px,5vh,52px) auto;text-align:left;
}
.pipe-lbl{font-size:12.5px;font-weight:600;color:#8C9AAD;text-align:center;margin-bottom:12px}
.pipe-stack{display:flex;flex-direction:column;gap:9px}
.asset{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:11px 14px;color:#E5EBF3}
.asset .t{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#7FA6E0;margin-bottom:2px}
.asset .b{font-size:13px;font-weight:600;line-height:1.35;color:#fff}
.pipe-link{height:2px;position:relative}
.pipe-link::before{
  content:"";position:absolute;left:6px;right:6px;top:0;height:2px;
  background:repeating-linear-gradient(90deg,#7FA6E0 0 7px,transparent 7px 15px);
  opacity:.6;animation:march 1.1s linear infinite;
}
@keyframes march{to{transform:translateX(15px)}}
.pipe-link::after{content:"";position:absolute;right:-1px;top:-3.5px;border:5px solid transparent;border-left-color:#7FA6E0;opacity:.8}
.pipe-core{
  background:#fff;border-radius:16px;padding:26px 24px 20px;text-align:center;color:var(--ink);
  box-shadow:0 26px 60px -20px rgba(0,0,0,.55);
}
.pipe-core .mark{
  width:46px;height:46px;margin:0 auto 12px;display:grid;place-items:center;
}
.pipe-core .mark img{width:100%;height:100%;object-fit:contain}
.pipe-core h3{font-size:20px;margin-bottom:2px;color:var(--ink)}
.pipe-core .m{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.pipe-core .facts{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:7px}
.pipe-core .f{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
.pipe-core .f b{font-weight:700;color:var(--accent);font-size:14px}
.cad-outcome{max-width:640px;margin:0 auto}
.cad-outcome h3{font-size:clamp(20px,2.2vw,28px);margin-bottom:10px;color:#fff}
.cad-outcome p{font-size:15px}
@media (max-width:900px){
  .pipe{grid-template-columns:1fr;gap:14px;max-width:420px}
  .pipe-link{width:2px;height:34px;margin:0 auto}
  .pipe-link::before{left:0;right:auto;top:6px;bottom:6px;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,#7FA6E0 0 7px,transparent 7px 15px);animation:marchV 1.1s linear infinite}
  @keyframes marchV{to{transform:translateY(15px)}}
  .pipe-link::after{right:auto;left:-3.5px;top:auto;bottom:-1px;border:5px solid transparent;border-top-color:#7FA6E0}
}
@media (prefers-reduced-motion:reduce){.pipe-link::before{animation:none}}

/* ==================================================================
   SERVICE-PAGE COMPONENTS
   ================================================================== */
/* claims trio */
.claims{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:var(--max);margin:0 auto}
.claim{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;text-align:left;color:var(--ink)}
.claim .cn{font-weight:700;letter-spacing:-.03em;line-height:1;font-size:clamp(28px,3.2vw,42px);color:var(--accent);margin-bottom:10px;font-variant-numeric:tabular-nums}
.claim p{font-size:14px;color:var(--muted)}
.claim .src{display:block;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--accent)}
.mod-ink .claim{box-shadow:0 20px 46px -22px rgba(0,0,0,.6);border-color:rgba(255,255,255,.08)}
.mod-ink .claim p{color:var(--muted)}
@media (max-width:860px){.claims{grid-template-columns:1fr}}

/* problem / solution pairs */
.ps-list{max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;gap:12px}
.ps{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink)}
.ps > div{padding:24px 26px}
.ps .p-side{background:var(--bg-grey);border-right:1px solid var(--line)}
.lbl-ps{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.ps .p-side .lbl-ps{color:var(--muted-2)}
.ps .s-side .lbl-ps{color:var(--accent)}
.ps h3{font-size:16.5px;margin-bottom:7px;color:var(--ink)}
.ps p{font-size:14px;color:var(--muted)}
@media (max-width:760px){.ps{grid-template-columns:1fr}.ps .p-side{border-right:none;border-bottom:1px solid var(--line)}}

/* numbered flow */
.flow{max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;gap:10px}
.flow-step{display:grid;grid-template-columns:60px 1fr;gap:20px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;color:var(--ink)}
.flow-step .num{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:700;font-size:16px}
.flow-step h3{font-size:17px;margin-bottom:6px;color:var(--ink)}
.flow-step > div > p{color:var(--muted);font-size:14.5px;margin-bottom:10px}
.flow-step ul{display:flex;flex-wrap:wrap;gap:7px}
.flow-step li{font-size:12.5px;color:var(--muted);background:var(--bg-grey);border-radius:7px;padding:5px 12px}
@media (max-width:640px){.flow-step{grid-template-columns:1fr;gap:12px}}

/* comparison table */
.cmp{max-width:var(--max);margin:0 auto;overflow-x:auto}
.cmp table{width:100%;border-collapse:separate;border-spacing:0;min-width:700px;font-size:14.5px}
.cmp th,.cmp td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp thead th{font-weight:700;font-size:13.5px;color:var(--muted);border-bottom:1px solid var(--line-2)}
.cmp thead th:first-child{width:24%}
.cmp tbody th{font-weight:600;color:var(--ink);width:24%;font-size:14px}
.cmp td{color:var(--muted)}
.cmp td.us{background:var(--accent-tint);font-weight:600;color:var(--ink)}
.cmp thead th.us{background:var(--accent);color:#fff;border-radius:10px 10px 0 0}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none}
.cmp tbody tr:last-child td.us{border-radius:0 0 10px 10px}
.cmp .yes svg{width:14px;height:14px;color:var(--accent);vertical-align:-2px;margin-right:8px}
.mod-ink .cmp thead th{color:#A9B6C7;border-color:rgba(255,255,255,.14)}
.mod-ink .cmp tbody th{color:#fff}
.mod-ink .cmp td{color:#A9B6C7;border-color:rgba(255,255,255,.1)}
.mod-ink .cmp th{border-color:rgba(255,255,255,.1)}
.mod-ink .cmp td.us{background:#fff;color:var(--ink)}

/* checklist */
.check-list{display:flex;flex-direction:column;max-width:760px;margin:0 auto}
.check-list p{display:flex;align-items:flex-start;gap:13px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink)}
.check-list p:last-child{border-bottom:none}
.check-list svg{width:17px;height:17px;flex:none;color:var(--accent);margin-top:4px}
.mod-ink .check-list p{border-color:rgba(255,255,255,.12);color:#E5EBF3}
.mod-ink .check-list svg{color:#7FA6E0}

/* tools row */
.tools-line{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:var(--max);margin:0 auto}
.tools-line .tool{font-size:14px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px 20px}
.mod-ink .tools-line .tool{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#E5EBF3}

/* story split (about / case detail) */
.story-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(36px,5vw,72px);align-items:center;max-width:var(--max);margin:0 auto}
.story-grid h2{margin-bottom:18px}
.story-grid .narr{color:var(--muted);max-width:56ch;margin-bottom:13px;font-size:15px}
.story-grid .narr b{color:var(--ink);font-weight:600}
.story-grid blockquote{font-size:clamp(17px,1.8vw,21px);font-weight:600;letter-spacing:-.015em;line-height:1.5;border-left:3px solid var(--accent);padding-left:18px;margin:22px 0 8px;color:var(--ink)}
.story-grid cite{font-style:normal;font-size:12.5px;color:var(--muted)}
.story-photo{position:relative;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:linear-gradient(150deg,var(--accent-tint),var(--bg-grey))}
.story-photo span{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:var(--muted);font-style:italic}
.story-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.story-grid{grid-template-columns:1fr}}

/* team pods */
.pod-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:var(--max);margin:0 auto;text-align:center}
.pod-row-5{grid-template-columns:repeat(5,1fr)}
/* pricing tiers: only one card carries a "Most common" badge, which pushed
   its copy down relative to the others. Every card now reserves the row. */
/* case cards with no photo on disk: hold the frame so the grid stays even */
.cs-art-none{display:grid;place-items:center;background:var(--bg-grey);border-bottom:1px solid var(--line)}
.cs-art-none span{font-family:var(--mono,inherit);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2)}

.tier-badge{display:inline-block;margin-bottom:10px}
.tier-badge-none{visibility:hidden}

.mem{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  padding:18px 8px 20px;display:flex;flex-direction:column;gap:6px}
.mem .port-icon{display:grid;place-items:center}
.mem .port-icon svg{width:44%;height:44%;color:var(--accent);opacity:.4}
.mem b{font-size:15.5px;font-weight:700;display:block;letter-spacing:-.01em;padding:0 10px}
.mem .role{font-size:12.5px;color:var(--muted);display:block;padding:0 14px}
@media (max-width:1000px){.pod-row-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.pod-row,.pod-row-5{grid-template-columns:1fr 1fr}}

/* ==================================================================
   VSL
   ================================================================== */
.vsl{max-width:860px;margin:clamp(26px,4vh,44px) auto 0;text-align:left}
.vsl-frame{position:relative;aspect-ratio:16/8.6;border-radius:var(--r) var(--r) 0 0;overflow:hidden;background:linear-gradient(150deg,var(--dark),var(--dark-2));display:grid;place-items:center}
.vsl-play{width:70px;height:70px;border-radius:50%;background:var(--accent);color:#fff;font-size:22px;display:grid;place-items:center;transition:transform .18s}
.vsl-play:hover{transform:scale(1.06)}
.vsl-tag{position:absolute;left:16px;bottom:14px;font-size:12.5px;color:#C7D0DC}
.vsl-tag b{color:#fff}
/* live Wistia embed: the tag moves out of the frame so it never sits over
   the player controls, and the frame takes the video's own 55.94% ratio */
.vsl-head{background:var(--dark);color:#C7D0DC;font-size:12.5px;padding:11px 18px;border-radius:var(--r) var(--r) 0 0}
.vsl-head b{color:#fff}
.vsl-embed{aspect-ratio:auto;border-radius:0;display:block;background:var(--dark)}
.vsl-embed-wrap{position:absolute;top:0;left:0;width:100%;height:100%}
.vsl-embed::before{content:'';display:block;padding-top:55.94%}
.vsl-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* custom VSL progress bar - always visible, sits flush under the film */
.vsl-prog{display:none;position:absolute;left:0;right:0;bottom:0;z-index:3;height:6px;
  background:rgba(255,255,255,.16);overflow:hidden;pointer-events:none}
.vsl-prog.ready{display:block}
.vsl-prog-fill{display:block;height:100%;width:0;background:var(--accent);
  box-shadow:0 0 12px -2px var(--accent);transition:width .35s linear}
.vsl-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;border:1px solid var(--line);border-top:none;border-radius:0 0 var(--r) var(--r);padding:12px 18px}
.vsl-foot .len{font-size:13px;color:var(--muted)}
.script-mail{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.script-mail input{font:inherit;font-size:13.5px;padding:9px 12px;min-width:210px;
  border:1px solid var(--line-2);border-radius:var(--r);background:#fff;color:var(--ink)}
.script-mail input:focus{outline:none;border-color:var(--accent)}
.script-mail button{font:inherit;font-size:13.5px;font-weight:600;padding:9px 16px;
  background:var(--accent);color:#fff;border:none;border-radius:var(--r);cursor:pointer}
.script-mail button:hover{background:var(--accent-deep)}
.script-mail.sent input,.script-mail.sent button{display:none}
.script-msg{font-size:12.5px;color:var(--muted)}
/* the foot carries a sentence and a form, so it wraps rather than squeezes */
.vsl-foot{flex-wrap:wrap}
.vsl-foot .len{flex:1 1 240px}
@media (max-width:780px){
  .vsl-foot{flex-direction:column;align-items:stretch;text-align:left;gap:10px}
  .vsl-foot .len{flex:none}
  .script-mail{flex-direction:column;align-items:stretch;gap:8px}
  .script-mail input,.script-mail button{width:100%;min-width:0}
  .script-msg{text-align:left}
}
.script-btn{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--accent)}
.script-btn .mk{font-size:16px;transition:transform .18s}
.script-btn[aria-expanded="true"] .mk{transform:rotate(45deg)}
.vsl-script{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.vsl-script .inner{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-top:10px;padding:26px 30px;text-align:left}
.lbl-s{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.vsl-script p{font-size:14.5px;color:var(--muted);margin-bottom:12px}
.vsl-script p.beat{font-weight:700;color:var(--ink)}

/* testimonial reel — three small films side by side */
.reel-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:var(--max);margin:0 auto}
.reel{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.reel .fr{position:relative;aspect-ratio:16/9;background:var(--dark)}
.reel-wait{position:absolute;inset:0;display:grid;place-items:center;gap:8px;align-content:center;
  background:linear-gradient(150deg,var(--dark),var(--dark-2))}
.reel-play{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;font-size:14px;display:grid;place-items:center}
.reel-soon{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#C7D0DC}
.rbody{padding:16px 18px}
.rbody .fstars{color:var(--accent);letter-spacing:2px;font-size:11px;margin-bottom:8px}
.rwho{font-size:14px;font-weight:600;color:var(--ink)}
.rline{font-size:12.5px;color:var(--muted);margin-top:2px}
@media (max-width:860px){.reel-row{grid-template-columns:1fr}}

/* ==================================================================
   FAQ
   ================================================================== */
.faq-card{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:6px 26px}
.fq{border-bottom:1px solid var(--line)}
.fq:last-child{border-bottom:none}
.fq button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;font-size:15.5px;font-weight:600;color:var(--ink);padding:18px 0}
.fq .mk{font-size:19px;color:var(--accent);transition:transform .2s;flex:none}
.fq.open .mk{transform:rotate(45deg)}
.fq .ans{max-height:0;overflow:hidden;transition:max-height .28s var(--ease)}
.fq .ans p{font-size:14.5px;color:var(--muted);padding-bottom:18px;max-width:64ch}

/* ==================================================================
   TYPEFORM EMBED (the quote form)
   ================================================================== */
.tf-shell{max-width:760px;margin:clamp(26px,4vh,40px) auto 0}
.tf-embed,.tf-frame{border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line);min-height:480px;box-shadow:0 24px 60px -24px rgba(18,26,38,.18)}
.tf-embed iframe{border-radius:var(--r)}
.tf-placeholder{border-radius:var(--r);background:#fff;border:1px solid var(--line);min-height:320px;display:grid;place-items:center;padding:34px;text-align:center}

.fld{display:flex;flex-direction:column;gap:6px;text-align:left;margin-bottom:16px}
.fld label{font-size:13px;font-weight:600;color:var(--ink)}
.fld input,.fld select,.fld textarea{
  font-family:var(--body);font-size:15px;color:var(--ink);
  background:var(--bg-grey);border:1.5px solid transparent;border-radius:9px;padding:12px 14px;
  transition:background .15s,border-color .15s;
}
.fld input:focus,.fld select:focus{outline:none;background:#fff;border-color:var(--accent)}
.form-card{padding:30px;max-width:520px;margin:0 auto}
.form-micro{font-size:12px;color:var(--muted-2);margin-top:6px}

/* ==================================================================
   CALCULATOR
   ================================================================== */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:var(--max);margin:0 auto;align-items:stretch}
.calc-h{font-size:19px;margin-bottom:18px}
.calc-grid .fld .rng{width:100%;margin-top:10px;padding:0;background:transparent;border:none;accent-color:var(--accent);display:block}
.res-card{padding:clamp(26px,4vw,40px);display:flex;flex-direction:column;text-align:center}
.res-lbl{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.res-big{font-weight:700;letter-spacing:-.03em;line-height:1;font-size:clamp(40px,4.6vw,62px);color:var(--accent);margin:8px 0 16px;font-variant-numeric:tabular-nums}
.res-extra{font-size:13.5px;color:var(--muted);max-width:34ch;margin:0 auto}
.res-extra b{color:var(--ink);font-weight:700}
.res-break{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:auto;padding-top:clamp(22px,3vw,32px);border-top:1px solid var(--line)}
.res-break .n{font-weight:700;letter-spacing:-.02em;font-size:clamp(20px,2.1vw,26px);color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.res-break .d{font-size:12px;color:var(--muted);margin-top:4px}
.res-cta{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.calc-note{max-width:var(--max);margin:14px auto 0;padding:22px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--r);font-size:13.5px;color:var(--muted)}
.calc-note b{color:var(--ink)}
@media (max-width:860px){.calc-grid{grid-template-columns:1fr}}

/* ==================================================================
   PROSE + LEGAL
   ================================================================== */
.prose{max-width:70ch;margin:0 auto;text-align:left}
.prose h2{font-size:clamp(21px,2.2vw,28px);margin:30px 0 12px}
.prose p{color:var(--muted);font-size:15.5px;margin-bottom:14px}
.prose strong{color:var(--ink)}
.prose .meta{font-size:13px;color:var(--muted-2)}
.ph{border-bottom:1.5px dashed rgba(var(--accent-rgb),.6)}

/* ==================================================================
   FOOTER — light, columned, hairline top border (their pattern)
   ================================================================== */
footer{background:var(--bg-soft);border-top:1px solid var(--line);padding:clamp(30px,4vh,44px) var(--pad) 20px}
.foot-grid{max-width:var(--max);margin:0 auto 22px;display:grid;grid-template-columns:2fr 1fr 1.5fr 1fr 1fr;gap:24px}
.foot-about p{font-size:13px;color:var(--muted);margin-top:14px;max-width:32ch}
.fcol{display:flex;flex-direction:column;gap:6px}
.fcol-2col{display:block;column-count:2;column-gap:18px}
.fcol-2col .h{column-span:all;margin-bottom:8px}
.fcol-2col a{display:block;margin-bottom:6px;break-inside:avoid}
.fcol .h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:4px}
.fcol a{font-size:13px;color:var(--muted);transition:color .15s}
.fcol a:hover{color:var(--accent)}
.foot-bottom{max-width:var(--max);margin:0 auto;border-top:1px solid var(--line);padding-top:22px}
.foot-legal{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:12.5px;color:var(--muted-2)}
.foot-legal a:hover{color:var(--accent)}
/* mobile footer: the brand block, its line and the CTA sit on their own
   full-width row; the link columns stack as a grid underneath it. */
@media (max-width:880px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-about{grid-column:1 / -1;margin-bottom:6px}
  .foot-about p{max-width:46ch}
}
@media (max-width:460px){.foot-grid{grid-template-columns:1fr}}
/* footer links were ~19px tall on mobile — under any sane tap target */
@media (max-width:880px){
  .fcol a{padding:9px 0;font-size:14px}
  .foot-legal{display:flex;flex-wrap:wrap;gap:6px 16px}
  .foot-legal a{padding:8px 0}
}

/* ==================================================================
   REVEAL ON SCROLL (site.js adds .rv then .in)
   ================================================================== */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:var(--rvd,0ms)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ==================================================================
   HOME SERVICES SPLIT — Belkins section 3/4: featured card left,
   service-link grid right
   ================================================================== */
.svc-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,44px);max-width:var(--max);margin:0 auto;align-items:start}
.svc-feature{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 14px 28px;text-align:left}
.svc-feature .sf-art{
  border-radius:12px;aspect-ratio:16/9.5;margin-bottom:22px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--accent-tint),var(--bg-grey));
  display:grid;place-items:center;
}
.svc-feature .sf-art .mark{width:54px;height:54px;border-radius:14px;background:linear-gradient(150deg,var(--accent),var(--accent-deep));color:#fff;display:grid;place-items:center;font-weight:700;font-size:24px}
.svc-feature h3{font-size:clamp(22px,2.2vw,30px);padding:0 14px;margin-bottom:14px}
.svc-feature ul{padding:0 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.svc-feature li{font-size:14px;color:var(--muted);display:flex;gap:9px;align-items:flex-start}
.svc-feature li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;margin-top:8px}
.svc-links{display:flex;flex-direction:column;gap:16px}
.svc-links .intro{font-size:clamp(17px,1.6vw,21px);font-weight:600;color:var(--ink);letter-spacing:-.015em;max-width:52ch}
.svc-link-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* every service box the same height, label always on one line */
.svc-link{min-height:58px;white-space:nowrap}
.svc-link{font-size:clamp(13.5px,1.05vw,15.5px)}
.svc-link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px 20px;
  font-size:15px;font-weight:600;color:var(--ink);
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.svc-link:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 12px 28px -18px rgba(18,26,38,.3)}
.svc-link .arr{color:var(--muted-2);transition:color .15s,transform .15s;font-weight:400}
.svc-link:hover .arr{color:var(--accent);transform:translateX(3px)}
@media (max-width:960px){.svc-split{grid-template-columns:1fr}.svc-link-grid{grid-template-columns:1fr}}

/* statement section — Belkins' giant claim */
.statement{max-width:1000px;margin:0 auto;text-align:center}
.statement h2{font-size:clamp(36px,5vw,72px);letter-spacing:-.03em;line-height:1.1}
.statement .sub{max-width:640px;margin:22px auto 0}

/* misc */
.metric{font-variant-numeric:tabular-nums}

/* ==================================================================
   BELKINS FIDELITY PASS 2 — funnel, sticky apart, case carousel,
   four-group services mega.
   ================================================================== */

/* mega grows to four columns now Other services exists */
.mega-wide{width:min(1180px,96vw);grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1220px){.mega-wide{grid-template-columns:repeat(2,minmax(0,1fr));width:min(720px,96vw)}}

/* ---- the funnel (dark band): stacked narrowing cards + stage arrows ---- */
.funnel{max-width:640px;margin:clamp(44px,6vh,72px) auto 0;display:flex;flex-direction:column;align-items:center}
.fun-h2{font-size:clamp(24px,2.8vw,38px);margin-bottom:clamp(24px,4vh,40px);color:#fff;max-width:640px}
.fun-card{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  border-radius:14px;padding:18px 24px;text-align:center;
  color:#fff;font-weight:600;font-size:clamp(13.5px,1.2vw,15.5px);line-height:1.45;
}
.fun-card .ph{border-bottom-color:rgba(255,255,255,.55)}
.fun-arrow{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8C9AAD;
}
.fun-arrow::after{content:"";border:7px solid transparent;border-top-color:rgba(255,255,255,.28);margin-top:2px}
.fun-note{margin-top:18px;font-size:12.5px;color:#8C9AAD;max-width:52ch;text-align:center}

/* ---- sticky "what sets us apart": left frozen, right scrolls ---- */
.apart{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,4vw,72px);max-width:var(--max);margin:0 auto;align-items:start;
}
.apart-left{position:sticky;top:110px;text-align:left}
.apart-left h2{margin-bottom:16px}
.apart-left .sub{max-width:44ch;margin-bottom:26px}
.apart-items{display:flex;flex-direction:column;gap:12px}
.apart-item{
  display:flex;gap:20px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s;
}
.apart-item .fi{
  flex:none;width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-tint);color:var(--accent);transition:background .18s,color .18s;
}
.apart-item .fi svg{width:19px;height:19px}
.apart-item h3{font-size:18px;margin-bottom:8px;transition:color .18s;display:inline-block}
.apart-item p{font-size:14.5px;color:var(--muted)}
/* the hover: card lifts, title goes accent, icon inverts */
.apart-item:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 20px 44px -22px rgba(var(--accent-rgb),.35)}
.apart-item:hover h3{color:var(--accent)}
.apart-item:hover .fi{background:var(--accent);color:#fff}
@media (max-width:960px){
  .apart{grid-template-columns:1fr}
  .apart-left{position:static}
}

/* ---- case-studies carousel (homepage proof): scroll-snap + arrows ---- */
.car-wrap{max-width:var(--max);margin:0 auto;position:relative}
.carousel{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,340px);gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 18px;
  scrollbar-width:none;
}
.carousel::-webkit-scrollbar{display:none}
.carousel > *{scroll-snap-align:start}
.car-nav{display:flex;gap:10px;justify-content:flex-end;margin-bottom:18px}
.car-btn{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line-2);color:var(--ink);
  transition:all .15s;font-size:17px;
}
.car-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
/* challenge cards: icon chip replaces the roman numeral */
.pain .pi{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-tint);color:var(--accent);margin-bottom:16px;
}
.pain .pi svg{width:21px;height:21px}

/* testimonial cards: service-taken tag beside the stars */
.q-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.q-top .stars{margin-bottom:0}
.q-svc{font-size:11.5px;font-weight:600;color:var(--accent);background:var(--accent-tint);padding:4px 10px;border-radius:999px;white-space:nowrap}

/* pipeline band: left accordion column bottom-aligns with the funnel */
.pipe2 > div:first-child{display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.pipe2 > div:first-child .jrny-box{margin-bottom:0}
/* clicking a journey stage lights the matching funnel card — exactly
   one at a time, so the default accent on card 1 stands down */
.fun2-card.lit{background:var(--accent-bright)}
.fun2.has-lit .fun2-card.accent:not(.lit){background:#232D3E}

/* carousel section header, Belkins layout: heading + sub left, arrows
   right on the same baseline */
.car-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(28px,4vh,44px)}
.car-head h2{text-align:left}
.car-head .sub{margin-top:12px;max-width:52ch;text-align:left}
.car-head .car-nav{margin-bottom:4px;flex:none}

/* testimonial carousel: wider cards, Belkins proportions */
.carousel-quotes{grid-auto-columns:minmax(320px,420px)}
.carousel-quotes .quote{height:100%}

/* Belkins' wide case cards: logo + big title + circle-arrow link left,
   stat tiles on a soft gradient panel right, one card ~ full width */
.carousel-cases{grid-auto-columns:min(1040px,92%)}
.csw{
  display:grid;grid-template-columns:1.45fr 1fr;gap:28px;
  background:#fff;border-radius:20px;padding:34px 38px;min-height:360px;
  transition:box-shadow .15s;
}
.csw:hover{box-shadow:0 24px 50px -26px rgba(18,26,38,.25)}
.csw-main{display:flex;flex-direction:column;text-align:left}
.csw-logo{height:32px;width:auto;align-self:flex-start}
/* White-only brand SVGs (Experiencegift, and any future one) were invisible
   on the light cards: the markup sets .inv but nothing styled it here. Render
   them as ink, the same treatment the logo marquee already uses. */
.csw-logo.inv{filter:brightness(0);opacity:.7}
.csw-brand{font-size:22px;font-weight:700}
.csw-main h3{font-size:clamp(21px,2.3vw,30px);line-height:1.28;letter-spacing:-.02em;margin:20px 0;max-width:22ch}
.csw-read{margin-top:auto;display:flex;align-items:center;gap:14px;font-weight:600;font-size:17px;color:var(--ink)}
.csw-read .circ{
  width:52px;height:52px;border:1.5px solid var(--accent);border-radius:50%;
  display:grid;place-items:center;color:var(--accent);font-size:20px;transition:all .15s;
}
.csw:hover .circ{background:var(--accent);color:#fff}
.csw-stats{
  display:flex;flex-direction:column;gap:14px;justify-content:center;
  background:linear-gradient(140deg,#EDF2FA,#F7FAFE 55%,#fff);
  border-radius:16px;padding:24px;position:relative;overflow:hidden;
}
.csw-stats::after{
  content:"";position:absolute;top:-34px;right:-34px;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--accent-bright),var(--accent));opacity:.85;
}
.csw-stats .tile{
  position:relative;z-index:1;background:#fff;border-radius:14px;padding:20px 24px;
  box-shadow:0 14px 32px -20px rgba(18,26,38,.22);text-align:left;
}
.csw-stats .tile b{display:block;font-size:34px;font-weight:700;color:var(--accent);letter-spacing:-.02em;line-height:1.15}
.csw-stats .tile span{font-size:14px;color:var(--muted);margin-top:4px;display:block}
.csw-stats .tile-txt b{font-size:22px;line-height:1.3}
.csw-stats .tile-sm b{font-size:17px}
@media (max-width:820px){.csw{grid-template-columns:1fr}.car-head{flex-direction:column;align-items:flex-start}}
/* services feature panel: description line the link hover swaps in */
.sf-desc{font-size:15px;color:var(--muted);padding:0 14px;margin:-6px 0 14px;line-height:1.55}

/* ==================================================================
   EXACT PIPELINE BAND — element-for-element from their screenshot:
   dashed journey group boxes + dark accordion left, trapezoid funnel
   with pointed stage tabs right, footnote top-right, first card in
   the bright accent.
   ================================================================== */
:root{--accent-bright:#2E6FD8}
.pipe2{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);max-width:1100px;margin:clamp(40px,6vh,64px) auto 0;
  align-items:stretch;text-align:left;
}
.jrny-box{border:1px dashed rgba(255,255,255,.18);border-radius:18px;padding:20px;margin-bottom:22px}
.jrny-box:last-child{margin-bottom:0}
.jrny-lbl{font-size:14.5px;color:#A9B6C7;margin-bottom:14px;padding:0 4px}
.jrny .fq{background:rgba(255,255,255,.05);border:none;border-radius:14px;margin-bottom:10px;padding:2px 20px}
.jrny .fq:last-child{margin-bottom:0}
.jrny .fq button{font-size:16.5px;font-weight:700;color:#fff;padding:16px 0}
.jrny .fq .mk{color:#8C9AAD;font-size:17px;font-weight:400;transform:none;transition:transform .2s var(--ease)}
.jrny .fq.open{background:rgba(255,255,255,.1)}
.jrny .fq.open .mk{transform:rotate(90deg)}
.jrny .fq .ans p{color:#A9B6C7;font-size:14.5px;line-height:1.6;padding-bottom:18px;max-width:none}

.fun2{display:flex;flex-direction:column;align-items:center}
.fun2-note{font-size:12.5px;color:#8C9AAD;text-align:center;margin-bottom:14px;max-width:42ch;line-height:1.5}
.fun2-tab{
  position:relative;z-index:2;
  background:#2A3547;color:#fff;font-size:12.5px;font-weight:700;
  padding:7px 30px 15px;
  clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%);
  margin-bottom:-11px;
}
.fun2-card{
  position:relative;z-index:1;
  color:#fff;font-weight:700;font-size:clamp(13.5px,1.25vw,17px);line-height:1.45;
  text-align:center;padding:28px 34px 32px;
  background:#232D3E;
  clip-path:polygon(0 0,100% 0,93% 100%,7% 100%);
  border-radius:14px;
}
.fun2-card.accent{background:var(--accent-bright)}
.fun2-card .ph{border-bottom:1.5px dashed rgba(255,255,255,.6)}
@media (max-width:900px){.pipe2{grid-template-columns:1fr}}

/* ---- placeholder imagery slots (internet placeholders until real
        assets are supplied — every one marked in the markup) ---- */
/* content imagery removed site-wide (Dan, 2026-08-26) — the cards are
   typographic now, so the former photo slots collapse. */
.apart-item{flex-direction:column}
.apart-item .ai-row{display:flex;gap:20px;align-items:flex-start}
.svc-feature .sf-art.sf-art-plain{
  aspect-ratio:auto;height:auto;margin:0 0 18px;background:none;
  display:block;padding:14px 14px 0;
}
.svc-feature .sf-art .mark{position:relative;z-index:2}
.post-card .art{position:relative}
.post-card .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ==================================================================
   MEASURED PASS — values scraped from belkins.io computed styles,
   2026-08-26. This is what separates "inspired by" from "the same":
     header 72px sticky, no border · nav links 16/400 black
     header CTA compact 40px/r8 · primary buttons 56px tall, r12,
     17-18px/600 · eyebrow 18/600 accent · H1 72/700, lh 1.11,
     ls -0.02em · H2 48/700 ls -0.8px · H3 18/600 · body 18/400
     cards FLAT: #fbfbfb, r16, no border, no shadow
     dark band r24, side-inset ~100px, pad 80x176
     sections ~120px vertical · container 1160
   ================================================================== */
:root{--max:1160px}

/* type scale — theirs */
h1{font-size:clamp(40px,5vw,72px);font-weight:700;line-height:1.11;letter-spacing:-.02em}
h2{font-size:clamp(30px,3.4vw,48px);font-weight:700;line-height:1.17;letter-spacing:-.017em}
h3{font-size:18px;font-weight:600;line-height:1.44;letter-spacing:0}
body{font-size:18px}
.sub,.hero-sub{font-size:18px;line-height:1.56;color:var(--ink-2)}
.hero-sub{max-width:56ch}

/* eyebrow — 18/600 accent, generous */
.chip{font-size:16px;font-weight:600;letter-spacing:.015em;margin-bottom:20px}

/* sections breathe like theirs — Belkins is exactly 80px each side */
.mod{padding:clamp(64px,6vw,80px) var(--pad)}
.trust-mod{padding-top:56px;padding-bottom:56px}

/* header — 72px, sticky, borderless, compact CTA */
.nav{min-height:72px;margin-bottom:0;border-bottom:none;padding:0 var(--pad)}
.hero-mod .nav,.page-hero .nav{margin-bottom:clamp(40px,6vh,64px)}
.nav-c > a,.nav-drop-btn{font-size:16px;font-weight:400;padding:24px 14px;border-radius:0;background:none}
.nav-c > a:hover,.nav-drop-btn:hover{background:none;color:var(--accent)}
.nav .btn{padding:11px 22px;font-size:16px;font-weight:600;border-radius:12px;height:auto}
.logo{font-size:21px}

/* buttons — 56px tall, r12, 17/600 */
.btn{font-size:17px;font-weight:600;padding:16px 28px;border-radius:12px}
.btn:hover{transform:none;background:var(--accent-deep)}
.btn-ghost{box-shadow:inset 0 0 0 1.5px var(--line-2)}

/* THE FLAT CARD LANGUAGE — no borders, no shadows, two-tone panels */
.card,.pain,.sys,.quote,.stick,.claim,.flow-step,.ps,.phase,.mem,
.svc-feature,.svc-link,.apart-item,.faq-card,.post-card,.cs-card,
.film,.calc-note,.tools-line .tool,.res-card,.form-card{
  border:none !important;box-shadow:none !important;border-radius:16px;
}
/* on white sections, panels are the soft grey; on grey sections, white */
.mod-white .card,.mod-white .pain,.mod-white .sys,.mod-white .quote,
.mod-white .stick,.mod-white .claim,.mod-white .flow-step,.mod-white .ps,
.mod-white .apart-item,.mod-white .cs-card,.mod-white .film,.mod-white .post-card,
.mod-white .svc-link,.mod-white .faq-card,.mod-white .mem{background:#fff}
.mod-tint .card,.mod-tint .pain,.mod-tint .sys,.mod-tint .quote,
.mod-tint .stick,.mod-tint .claim,.mod-tint .flow-step,.mod-tint .phase,
.mod-tint .apart-item,.mod-tint .cs-card,.mod-tint .film,.mod-tint .post-card,
.mod-tint .svc-link,.mod-tint .svc-feature,.mod-tint .faq-card,
.mod-tint .mem,.mod-tint .form-card,.mod-tint .res-card,.mod-tint .calc-note{background:#fff}
.ps .p-side{background:var(--bg-grey);border-right:none}
.ps .p-side{border-bottom:none}
/* interactive cards get their lift back on hover only */
.svc-link:hover,.cs-card:hover,.post-card:hover{box-shadow:0 20px 44px -22px rgba(18,26,38,.22) !important}
.apart-item:hover{box-shadow:0 20px 44px -22px rgba(var(--accent-rgb),.28) !important}
/* generous card padding like theirs */
.pain,.sys,.quote,.stick,.claim{padding:32px}
.cs-grid .cs{padding:32px;border:none;box-shadow:none;background:var(--bg-soft)}
.mod-tint .cs-grid .cs{background:#fff}

/* dark band — measured geometry */
.mod-ink{
  border-radius:24px;
  max-width:min(calc(100vw - 64px), 1312px);
  padding:clamp(64px,7vw,80px) clamp(24px,8vw,150px);
}
@media (max-width:1400px){.mod-ink{margin-left:32px;margin-right:32px}}
@media (max-width:700px){.mod-ink{margin-left:12px;margin-right:12px;border-radius:18px}}

/* funnel: Belkins-exact — trapezoid stage cards + downward arrow tabs.
   (An earlier rounded/perspective variant lived here; reverted 2026-08-26
   for the frame-for-frame match.) */
.fun2-card{padding:26px 34px 30px}
.fun2-tab{font-size:13px;padding:8px 44px 17px}
.fun2 > .fun2-card{margin-bottom:2px}

/* journey accordion cards — flat, generous, 16px radius */
.jrny .fq{border-radius:14px;padding:4px 22px}
.jrny .fq button{font-size:17px}

/* placeholder imagery: uniform grayscale + navy duotone so random
   photos read as art-directed, not scattered */
.apart-art,.sf-art,.post-card .art,.story-photo,.mem .port{position:relative}
.apart-art img,.sf-art img,.post-card .art img,.story-photo img,.mem .port img{
  filter:grayscale(1) contrast(1.05) brightness(1.02);
}
.apart-art::after,.sf-art::after,.post-card .art::after,.story-photo::after,.mem .port::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg, rgba(var(--accent-rgb),.28), rgba(var(--accent-rgb),.06) 60%);
  mix-blend-mode:multiply;
}

/* ---- awards & ratings row (their Clutch/G2 section) ---- */
.awards{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,48px);max-width:var(--max);margin:0 auto;align-items:center}
.rate-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rate{background:#fff;border-radius:16px;padding:26px;text-align:center}
.mod-white .rate{background:#fff}
.rate .rn{font-weight:700;font-size:34px;letter-spacing:-.02em;color:var(--ink);line-height:1}
.rate .stars{color:var(--accent);letter-spacing:2px;font-size:12px;display:block;margin:8px 0 6px}
.rate .rd{font-size:13px;color:var(--muted)}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.badge{
  aspect-ratio:2.4/1;border-radius:14px;background:#fff;
  display:grid;place-items:center;text-align:center;padding:10px;
  font-size:12.5px;font-weight:600;color:var(--muted-2);
}
.mod-white .badge{background:#fff}
.badge .ph{color:var(--muted)}
@media (max-width:880px){.awards{grid-template-columns:1fr}.badges{grid-template-columns:1fr 1fr}}

/* ---- team roles row (their "dedicated team" section) ---- */
.roles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-width:var(--max);margin:0 auto}
/* Belkins-style tabbed team: chips switch one wide feature card */
.roles-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:var(--max);margin:0 auto clamp(24px,4vh,36px)}
.rt-btn{padding:10px 20px;border-radius:999px;background:#fff;font-weight:600;font-size:15px;color:var(--ink-2);transition:all .15s}
.rt-btn:hover{color:var(--accent)}
.rt-btn.active{background:var(--accent);color:#fff}
.roles.tabbed{display:block;max-width:820px}
.roles.tabbed .role{display:none}
.roles.tabbed .role.active{display:block;background:#fff}
.roles.tabbed .role .rb{padding:28px 32px}
.roles.tabbed .role h3{font-size:22px;margin-bottom:8px}
.roles.tabbed .role p{font-size:16px;line-height:1.6}
.roles.tabbed .role .go{margin-top:14px;display:inline-block}
@media (max-width:720px){.roles.tabbed .role.active{grid-template-columns:1fr}}
.role{border-radius:16px;overflow:hidden;background:var(--bg-soft);display:flex;flex-direction:column}
.mod-tint .role{background:#fff}
.role .rb{padding:16px 18px 20px}
.role h3{font-size:15.5px;margin-bottom:4px}
.role p{font-size:12.5px;color:var(--muted);line-height:1.5}
.role .go{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--accent)}
@media (max-width:1000px){.roles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.roles{grid-template-columns:1fr 1fr}}
/* the measured .mod padding must not push the in-hero nav down */
.hero-mod,.page-hero{padding-top:0}
/* the hero's own bottom padding + the trust bar's top padding were
   stacking into a dead band under the CTA (Dan, 2026-08-26). Trimmed,
   not removed: ~100px of breathing room under the button. */
.hero-mod{padding-bottom:0}
.hero{padding-bottom:clamp(72px,11vh,124px)}
.hero-mod + .trust-mod{padding-top:72px}

/* ==================================================================
   SERVICES MEGA, REBUILT TO THEIRS — two zones: white top with boxed
   service cards (icon tile + title + 2-line desc), grey bottom with
   compact icon rows + the "Our approach" promo. Panel centres on the
   NAV BAR, not the trigger (ours was clipping off-viewport).
   ================================================================== */
.nav-drop-static{position:static}
/* Compact, Belkins-density dropdown: the whole panel should read as a
   menu, not a page. Roughly half the previous height. */
.mega-x{
  width:min(880px,calc(100vw - 40px));
  left:50%;top:calc(100% + 2px);transform:translate(-50%,6px);
  padding:0;overflow:hidden;border:none;border-radius:16px;
  box-shadow:0 40px 90px -24px rgba(18,26,38,.28);
  display:block;
}
.nav-drop-static:hover .mega-x,.nav-drop-static:focus-within .mega-x{transform:translate(-50%,0)}
.nav-drop:hover > .nav-drop-btn{color:var(--accent)}
.mx-top{background:#fff;padding:18px 22px 16px}
.mx-head{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px}
.mx-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mx-card{
  display:flex;gap:10px;align-items:flex-start;
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  transition:border-color .15s,box-shadow .15s;
}
.mx-card:hover{border-color:rgba(var(--accent-rgb),.5);box-shadow:0 10px 26px -18px rgba(18,26,38,.25)}
.mx-card .mi{
  flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:var(--accent-tint);color:var(--accent);
}
.mx-card .mi svg{width:15px;height:15px}
.mx-card .mt{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:2px}
.mx-card .md{display:block;font-size:12px;color:var(--muted);line-height:1.4}
.mx-bottom{
  background:var(--bg-grey);padding:16px 22px 18px;
  display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:24px;
}
.mx-col{display:flex;flex-direction:column}
.mx-row{display:flex;gap:10px;align-items:center;padding:5px 0;font-size:13.5px;font-weight:500;color:var(--ink);border-radius:8px}
.mx-row:hover{color:var(--accent)}
.mx-row svg{width:15px;height:15px;color:var(--accent);flex:none}
.mx-promo{
  display:block;background:var(--bg-deep);border-radius:12px;
  padding:16px 18px 30px;position:relative;transition:background .15s;
}
.mx-promo:hover{background:#E2E2E2}
.mx-promo h4{font-size:16px;font-weight:600;letter-spacing:-.02em;margin-bottom:5px}
.mx-promo p{font-size:12.5px;color:var(--muted);line-height:1.45;max-width:34ch}
.mx-promo .arr{position:absolute;right:14px;bottom:10px;color:var(--accent);font-size:18px;font-weight:600}
/* .mega a{display:flex} was flexing the promo's title next to its copy */
.mega a.mx-promo{display:block;padding:16px 18px 32px}
.mega a.mx-promo:hover{background:#E2E2E2}

/* ---- Clutch research pass (2026-08-26) ---------------------------- */
/* stats band riding under the trust marquee */
.trust-mod .mq ~ .stats-row,
.trust-mod .mq + .stats-row{margin-top:44px;margin-bottom:0}

/* mobile sticky CTA — one goal, one thumb away. Hidden on desktop and
   until site.js flips .on once the hero has scrolled off. */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  transform:translateY(102%);transition:transform .28s ease;
  visibility:hidden}
.mcta .btn{width:100%;justify-content:center}
.mcta.on{transform:translateY(0);visibility:visible}
@media (max-width:880px){.mcta{display:block}}
@media (prefers-reduced-motion:reduce){.mcta{transition:none}}


/* ---- design-completion pass (2026-08-26) -------------------------- */
/* team: monogram card grid (replaces the sparse tab panel) */
.pod-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:var(--max);margin:0 auto}
.pod-card{padding:22px 18px;text-align:left}
.pod-card h3{font-size:15px;margin:14px 0 6px;letter-spacing:-.01em}
.pod-card p{font-size:13px;color:var(--muted);line-height:1.5}
.pfp-lg{width:44px;height:44px;border-radius:12px;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}
@media (max-width:1080px){.pod-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.pod-grid{grid-template-columns:1fr 1fr}}

/* awards: real proof chips */
.badge-real{background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:13.5px;font-weight:600;color:var(--ink)}
.mod-tint .badge-real{background:#fff}

/* pricing: how-the-money-works cards */
.money-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:var(--max);margin:0 auto}
.money{padding:24px 20px}
.money .num{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.money h3{font-size:16px;margin:12px 0 8px;letter-spacing:-.01em}
.money p{font-size:13.5px;color:var(--muted);line-height:1.55}
@media (max-width:980px){.money-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.money-grid{grid-template-columns:1fr}}

/* about: proof aside beside the story */
.story-aside{padding:28px 26px;align-self:start}
.story-aside .stars{color:var(--accent);letter-spacing:3px;font-size:13px}
.story-aside blockquote{border-left:none;padding-left:0;margin:14px 0 6px;font-size:clamp(16px,1.6vw,19px)}
.story-aside cite{font-size:13px;color:var(--muted);font-style:normal}
.aside-stats{margin-top:22px;border-top:1px solid var(--line);padding-top:18px;display:grid;gap:12px}
.aside-stats div{display:flex;align-items:baseline;gap:10px}
.aside-stats b{font-size:20px;color:var(--accent);font-variant-numeric:tabular-nums;min-width:74px}
.aside-stats span{font-size:13px;color:var(--muted)}
@media (max-width:880px){.story-grid{grid-template-columns:1fr}}

/* ---- photography back in (2026-08-26 evening) --------------------- */
.apart-art{margin-top:18px;aspect-ratio:16/7.5;border-radius:10px;overflow:hidden}
.apart-art img{width:100%;height:100%;object-fit:cover;display:block}
.cs-art{aspect-ratio:16/7.5;border-radius:10px;overflow:hidden;margin-bottom:16px}
.cs-art img{width:100%;height:100%;object-fit:cover;display:block}
.post-card .art{aspect-ratio:16/8.5;overflow:hidden}
.case-photo{max-width:var(--max);margin:0 auto 34px;border-radius:var(--r);overflow:hidden;aspect-ratio:21/8}
.case-photo img{width:100%;height:100%;object-fit:cover;display:block}
.svc-feature .sf-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}