/* self-hosted Inter (latin+latin-ext, 400-800) — GDPR-safe, fixes system-ui fallback */
/* latin-ext 400 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 400 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-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;
}
/* latin-ext 500 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 500 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-500-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;
}
/* latin-ext 600 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 600 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-600-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;
}
/* latin-ext 700 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 700 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-700-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;
}
/* latin-ext 800 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/inter-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin 800 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/inter-800-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;
}

/* ============================================================
   STS — site.css
   Shared styles for safety-trust.com
   Pattern aligned with ENO-CT inline critical CSS, factored out
   for multi-page reuse.
   ============================================================ */

:root{
  --bg:#05080f;
  --bg-2:#0a0f1a;
  --bg-3:#0f1623;
  --card:rgba(255,255,255,0.025);
  --card-bd:rgba(255,255,255,0.07);
  --card-hover-bd:rgba(89,143,255,0.35);
  --text:#e8edf5;
  --text-strong:#ffffff;
  --muted:#8a96a8;
  --dim:#7d8a9c;
  --brand:#598fff;
  --brand-2:#7aa6ff;
  --brand-glow:#4dffff;
  --brand-soft:rgba(89,143,255,0.12);
  --warn:#ffb74d;
  --ok:#4ade80;
  --max-w:1280px;
  --max-w-narrow:840px;
  --radius:16px;
  --radius-lg:22px;
  --t:cubic-bezier(.22,1,.36,1);
  --shadow-glow:0 0 60px rgba(89,143,255,0.18);
  --grid-line:rgba(89,143,255,0.06);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:17px;
  line-height:1.58;
  overflow-x:hidden;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%,rgba(89,143,255,0.10),transparent 65%),
    radial-gradient(ellipse 60% 40% at 100% 30%,rgba(77,255,255,0.04),transparent 70%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
  background-attachment:fixed;
}
img{max-width:100%;display:block}
picture{display:contents}
/* GHL embedded form: form_embed.js injects a runtime <style> pinning .ep-iFrameContainer width to the form's GHL width.
   Beat it with higher specificity (.section-narrow descendant) so the form fills the column. */
.section-narrow .ep-iFrameContainer,.section-narrow .ep-wrapper{width:100%!important;max-width:640px!important;margin-left:auto!important;margin-right:auto!important}
.section-narrow .ep-iFrameContainer iframe,.section-narrow .ep-wrapper iframe{width:100%!important}
a{color:inherit;text-decoration:none;transition:color .25s var(--t)}
button{font-family:inherit;cursor:pointer;border:0;background:none}
::selection{background:rgba(89,143,255,0.35);color:#fff}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(20px,4vw,48px);
  background:rgba(5,8,15,0.9);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:background .35s var(--t),border-color .35s var(--t);
}
.nav.scrolled{background:rgba(5,8,15,0.92);border-bottom-color:rgba(89,143,255,0.18)}
.nav-brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:16px;letter-spacing:-0.01em;color:var(--text-strong)}
.nav-brand .logo-mark{width:auto;height:30px;flex-shrink:0;filter:drop-shadow(0 0 5px rgba(255,255,255,0.22))}
.nav-brand .brand-sts{color:var(--text-strong);font-weight:800;font-size:23px;letter-spacing:0.09em}
.nav-links{display:flex;gap:clamp(18px,2.5vw,32px);font-size:14px;font-weight:500}
.nav-links a{color:var(--muted);position:relative}
.nav-links a:hover,.nav-links a.is-active{color:var(--brand-2)}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--brand);transition:width .3s var(--t)}
.nav-links a:hover::after,.nav-links a.is-active::after{width:100%}
.nav-right{display:flex;align-items:center;gap:18px}
.nav-cta{
  font-size:13px;font-weight:600;padding:10px 18px;
  border:1px solid rgba(89,143,255,0.4);border-radius:999px;
  background:var(--brand-soft);color:var(--brand-2);
  display:inline-flex;align-items:center;gap:8px;
  transition:all .3s var(--t);
}
.nav-cta:hover{background:var(--brand);color:#fff;box-shadow:0 0 24px rgba(89,143,255,0.4);transform:translateY(-1px)}
.lang-switch{display:flex;gap:6px;font-size:12px;color:var(--dim);font-weight:500;padding:6px 10px;border:1px solid rgba(255,255,255,0.06);border-radius:999px}
.lang-switch a{padding:0 4px}
.lang-switch a.active{color:var(--brand-2)}
.nav-burger{display:none;width:40px;height:40px;background:transparent;border:0;cursor:pointer;padding:0;position:relative;z-index:101}
.nav-burger span{display:block;position:absolute;left:8px;width:24px;height:1.5px;background:var(--text);border-radius:2px;transition:all .3s var(--t)}
.nav-burger span:nth-child(1){top:14px}.nav-burger span:nth-child(2){top:20px}.nav-burger span:nth-child(3){top:26px}
.nav-burger.is-open span:nth-child(1){top:20px;transform:rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0}
.nav-burger.is-open span:nth-child(3){top:20px;transform:rotate(-45deg)}
@media (max-width:980px){
  .nav-links,.nav-cta,.lang-switch{display:none}
  .nav-burger{display:block}
  .nav-mobile{
    position:fixed;top:0;right:0;bottom:0;width:min(360px,85vw);z-index:100;
    background:rgba(5,8,15,0.98);backdrop-filter:blur(20px);
    border-left:1px solid rgba(89,143,255,0.15);
    padding:88px 28px 32px;
    transform:translateX(100%);transition:transform .35s var(--t);
    display:flex;flex-direction:column;gap:20px;
  }
  .nav-mobile.is-open{transform:translateX(0)}
  .nav-mobile a{font-size:18px;color:var(--text);font-weight:500;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
  .nav-mobile .nav-cta{display:inline-flex;width:fit-content;margin-top:12px}
}

/* ============ HERO ============ */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px clamp(20px,4vw,48px) 80px;overflow:hidden}
.hero.compact{min-height:60vh;padding:140px clamp(20px,4vw,48px) 64px}
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 80%);
}
.hero::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 50% 40% at 70% 30%,rgba(89,143,255,0.12),transparent 70%);
  animation:driftA 22s ease-in-out infinite alternate;
}
@keyframes driftA{0%{transform:translate(0,0)}100%{transform:translate(-4%,3%)}}
.hero-content{position:relative;z-index:2;max-width:var(--max-w);margin:0 auto;width:100%;display:grid;grid-template-columns:1.45fr 1fr;gap:60px;align-items:end}
.hero-content.single{grid-template-columns:1fr;max-width:var(--max-w-narrow);align-items:start}
@media (max-width:980px){.hero-content{grid-template-columns:1fr;gap:48px}.hero-content>*{min-width:0}}

.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--brand-2);padding:8px 16px;background:var(--brand-soft);border:1px solid rgba(89,143,255,0.25);border-radius:999px;margin-bottom:28px}
.eyebrow::before{content:'';width:6px;height:6px;background:var(--brand);border-radius:50%;box-shadow:0 0 12px var(--brand-glow);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.8)}}

.hero h1{font-size:clamp(30px,7vw,86px);overflow-wrap:break-word;line-height:0.98;letter-spacing:-0.035em;font-weight:800;margin-bottom:28px;background:linear-gradient(180deg,#fff 0%,#b8c4d6 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero.compact h1{font-size:clamp(36px,5vw,64px)}
.hero h1 .accent{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-glow) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-lead{font-size:clamp(16.5px,1.5vw,20px);line-height:1.62;color:var(--muted);max-width:580px;margin-bottom:40px}
.hero-lead strong{color:var(--text);font-weight:500}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.btn-primary{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;font-size:14.5px;font-weight:600;background:var(--brand);color:#fff;border-radius:999px;border:1px solid var(--brand);transition:all .3s var(--t);letter-spacing:0.01em}
.btn-primary:hover{background:var(--brand-glow);border-color:var(--brand-glow);color:#05080f;box-shadow:0 0 32px rgba(77,255,255,0.45);transform:translateY(-2px)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:16px 24px;font-size:14px;font-weight:500;color:var(--text);border:1px solid rgba(255,255,255,0.13);border-radius:999px;background:rgba(255,255,255,0.025);backdrop-filter:blur(8px);transition:all .3s var(--t)}
.btn-ghost:hover{border-color:var(--brand-2);color:var(--brand-2)}

.hero-side{position:relative;background:var(--card);border:1px solid var(--card-bd);border-radius:var(--radius-lg);padding:28px;backdrop-filter:blur(20px)}
.hero-side::before{content:'';position:absolute;top:-1px;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,var(--brand),transparent)}
.hero-side-h{font-size:13px;color:var(--dim);letter-spacing:0.18em;text-transform:uppercase;margin-bottom:18px;font-weight:600}
.hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 16px;margin-bottom:24px}
.hero-stats strong{display:block;font-size:38px;font-weight:700;letter-spacing:-0.025em;background:linear-gradient(135deg,#fff 0%,var(--brand-2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px;line-height:1}
.hero-stats span{font-size:13.5px;color:var(--muted);letter-spacing:0.03em}
.hero-side-foot{padding-top:18px;border-top:1px solid rgba(255,255,255,0.06);display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--dim)}
.hero-side-foot .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:8px;box-shadow:0 0 8px var(--ok)}
.hero-coords{position:absolute;bottom:24px;left:clamp(20px,4vw,48px);z-index:2;font-size:10.5px;color:var(--dim);font-family:ui-monospace,monospace;letter-spacing:0.05em}
@media (max-width:600px){.hero-coords{display:none}}

/* ============ TRUST STRIP ============ */
.trust{position:relative;z-index:2;border-top:1px solid var(--card-bd);border-bottom:1px solid var(--card-bd);padding:32px clamp(20px,4vw,48px);background:rgba(10,15,26,0.4)}
.trust-inner{max-width:var(--max-w);margin:0 auto;display:flex;align-items:center;gap:48px;flex-wrap:wrap;justify-content:center}
.trust-label{font-size:12.5px;color:var(--dim);letter-spacing:0.18em;text-transform:uppercase;font-weight:600}
.trust-items{display:flex;gap:36px;flex-wrap:wrap;justify-content:center;align-items:center;font-size:14.5px;color:var(--muted);font-weight:500}
.trust-items span{display:inline-flex;align-items:center;gap:8px;letter-spacing:0.02em}
.trust-items span::before{content:'';width:5px;height:5px;background:var(--brand);border-radius:50%;box-shadow:0 0 8px var(--brand)}

/* ============ CUSTOMER LOGO STRIP ============ */
.customers{position:relative;z-index:2;padding:48px clamp(20px,4vw,48px);background:rgba(10,15,26,0.5);border-bottom:1px solid var(--card-bd)}
.customers-inner{max-width:var(--max-w);margin:0 auto;text-align:center}
.customers-label{font-size:11px;color:var(--dim);letter-spacing:0.18em;text-transform:uppercase;font-weight:600;margin-bottom:28px}
.customers-row{display:flex;justify-content:center;align-items:center;gap:clamp(28px,5vw,72px);flex-wrap:wrap}
.customers-row .c-name{font-size:clamp(15px,1.8vw,22px);font-weight:600;letter-spacing:0.02em;color:var(--muted);font-family:'Inter',sans-serif;opacity:0.85;transition:opacity .3s var(--t),color .3s var(--t)}
.customers-row .c-name:hover{opacity:1;color:var(--text)}

/* ============ SECTIONS ============ */
.section{position:relative;max-width:var(--max-w);margin:0 auto;padding:clamp(80px,10vw,140px) clamp(20px,4vw,48px)}
.section-narrow{max-width:var(--max-w-narrow)}
.section-header{margin-bottom:clamp(48px,6vw,72px);max-width:880px}
.section-eyebrow{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--brand-2);margin-bottom:18px}
.section h2{font-size:clamp(36px,5vw,64px);line-height:1.05;letter-spacing:-0.03em;font-weight:700;color:var(--text-strong)}
.section h2 .accent{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-glow) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.section h3{font-size:clamp(22px,2.6vw,32px);line-height:1.15;letter-spacing:-0.02em;font-weight:700;color:var(--text-strong);margin-bottom:14px}
.section-lead{font-size:clamp(16px,1.3vw,18.5px);color:var(--muted);max-width:660px;margin-top:24px;line-height:1.62}

/* ============ PROSE (article body) ============ */
.prose{max-width:var(--max-w-narrow);margin:0 auto;color:var(--text);font-size:16.5px;line-height:1.65}
.prose h2{font-size:clamp(28px,3.4vw,40px);line-height:1.15;letter-spacing:-0.02em;font-weight:700;margin:48px 0 18px;color:var(--text-strong)}
.prose h3{font-size:clamp(20px,2.2vw,26px);line-height:1.2;letter-spacing:-0.015em;font-weight:600;margin:36px 0 14px;color:var(--text-strong)}
.prose h4{font-size:18px;font-weight:600;margin:26px 0 10px;color:var(--text-strong)}
.prose p{margin:0 0 20px;color:var(--text);max-width:68ch}
.prose ul,.prose ol{max-width:68ch}
.prose p strong{color:var(--text-strong);font-weight:600}
.prose ul,.prose ol{margin:0 0 24px 22px;padding:0;color:var(--text)}
.prose li{margin-bottom:10px;line-height:1.65}
.prose li::marker{color:var(--brand-2)}
.prose blockquote{margin:32px 0;padding:20px 28px;border-left:3px solid var(--brand);background:var(--card);border-radius:0 12px 12px 0;font-style:italic;color:var(--text)}
.prose code{font-family:ui-monospace,monospace;font-size:0.92em;background:var(--card);padding:2px 7px;border-radius:5px;color:var(--brand-2);border:1px solid var(--card-bd)}
.prose a{color:var(--brand-2);text-decoration:underline;text-decoration-color:rgba(89,143,255,0.6);text-underline-offset:3px}
.prose a:hover{color:var(--brand-glow);text-decoration-color:var(--brand-glow)}
.prose hr{border:0;border-top:1px solid var(--card-bd);margin:48px 0}

/* ============ SERVICES BENTO ============ */
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(220px,auto);gap:18px}
@media (max-width:1100px){.svc-grid{grid-template-columns:repeat(6,1fr)}}
@media (max-width:680px){.svc-grid{grid-template-columns:1fr}}
.svc{position:relative;overflow:hidden;border-radius:var(--radius);background:linear-gradient(180deg,var(--card),rgba(15,22,35,0.6));border:1px solid var(--card-bd);padding:32px 28px;transition:all .45s var(--t);display:flex;flex-direction:column}
.svc:hover{transform:translateY(-4px);border-color:var(--card-hover-bd);box-shadow:var(--shadow-glow)}
.svc::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(89,143,255,0.4),transparent);opacity:0;transition:opacity .45s var(--t)}
.svc:hover::before{opacity:1}
.svc-num{font-size:12px;letter-spacing:0.18em;color:var(--brand-2);text-transform:uppercase;margin-bottom:14px;font-weight:600;font-family:ui-monospace,monospace}
.svc h3{font-size:23px;font-weight:700;letter-spacing:-0.02em;margin-bottom:12px;color:var(--text-strong)}
.svc p{font-size:15px;color:var(--muted);line-height:1.6;margin-bottom:20px;flex:1}
.svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.svc-tag{font-size:11.5px;color:var(--dim);padding:4px 10px;border:1px solid rgba(255,255,255,0.08);border-radius:999px;letter-spacing:0.02em;font-family:ui-monospace,monospace}
.svc-arrow{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--brand-2);transition:gap .3s var(--t)}
.svc:hover .svc-arrow{gap:14px;color:var(--brand-glow)}
.svc.s-1{grid-column:span 7;grid-row:span 2}
.svc.s-2{grid-column:span 5}
.svc.s-3{grid-column:span 5}
.svc.s-4{grid-column:span 4}
.svc.s-5{grid-column:span 4}
.svc.s-6{grid-column:span 4}
.svc.s-1 h3{font-size:32px}
.svc.s-1 p{font-size:15.5px}
@media (max-width:1100px){.svc.s-1{grid-column:span 6;grid-row:span 1}.svc.s-1 h3{font-size:22px}.svc.s-1 p{font-size:14px}.svc.s-2,.svc.s-3{grid-column:span 3}.svc.s-4,.svc.s-5,.svc.s-6{grid-column:span 2}}
@media (max-width:680px){.svc{grid-column:span 1 !important;grid-row:span 1 !important}.svc.s-1 h3{font-size:22px}}

/* ============ METHOD / STEPS ============ */
.method{position:relative;background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg-3) 100%);border-top:1px solid var(--card-bd);border-bottom:1px solid var(--card-bd);margin-top:80px}
.method-inner{max-width:var(--max-w);margin:0 auto;padding:clamp(80px,10vw,120px) clamp(20px,4vw,48px)}
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media (max-width:980px){.method-grid{grid-template-columns:1fr;gap:48px}}
.method-steps{display:grid;gap:14px}
.step{display:flex;gap:20px;padding:24px;background:var(--card);border:1px solid var(--card-bd);border-radius:var(--radius);transition:all .35s var(--t)}
.step:hover{border-color:var(--card-hover-bd);background:rgba(89,143,255,0.04)}
.step-num{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:var(--brand-soft);border:1px solid rgba(89,143,255,0.3);color:var(--brand-2);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace}
.step h4{font-size:18px;font-weight:600;margin-bottom:6px;color:var(--text-strong);letter-spacing:-0.01em}
.step p{font-size:14.5px;color:var(--muted);line-height:1.55}

/* ============ PROOF / STATS GRID ============ */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--card-bd);border:1px solid var(--card-bd);border-radius:var(--radius-lg);overflow:hidden;margin-top:48px}
@media (max-width:900px){.proof{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.proof{grid-template-columns:1fr}}
.proof-cell{background:var(--bg-2);padding:32px 24px;transition:background .35s var(--t)}
.proof-cell:hover{background:rgba(89,143,255,0.04)}
.proof-cell strong{display:block;font-size:40px;font-weight:700;letter-spacing:-0.03em;line-height:1;background:linear-gradient(135deg,#fff 0%,var(--brand-2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:10px}
.proof-cell .lbl{font-size:13px;color:var(--muted);letter-spacing:0.04em;line-height:1.5;display:block}
.proof-cell .sub{display:block;font-size:12px;color:var(--dim);margin-top:6px;font-family:ui-monospace,monospace}

/* ============ STANDARDS / TILES ============ */
.std{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:40px}
.std-item{padding:20px;background:var(--card);border:1px solid var(--card-bd);border-radius:14px;transition:all .35s var(--t)}
.std-item:hover{border-color:var(--card-hover-bd);transform:translateY(-2px)}
.std-item .std-code{font-size:13px;color:var(--brand-2);font-weight:600;letter-spacing:0.05em;font-family:ui-monospace,monospace;margin-bottom:8px}
.std-item .std-name{font-size:15px;color:var(--text);font-weight:500;line-height:1.45}

/* ============ FEATURE CARDS GRID (services detail) ============ */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:36px}
.feat{padding:28px 26px;background:var(--card);border:1px solid var(--card-bd);border-radius:var(--radius);transition:all .35s var(--t)}
.feat:hover{border-color:var(--card-hover-bd);transform:translateY(-2px)}
.feat-num{font-size:12px;letter-spacing:0.18em;color:var(--brand-2);text-transform:uppercase;margin-bottom:14px;font-weight:600;font-family:ui-monospace,monospace}
.feat h4{font-size:19px;font-weight:600;color:var(--text-strong);margin-bottom:10px;letter-spacing:-0.015em}
.feat p{font-size:15px;color:var(--muted);line-height:1.6}

/* ============ PEOPLE / TEAM ============ */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:36px}
.person{padding:28px;background:var(--card);border:1px solid var(--card-bd);border-radius:var(--radius);transition:all .35s var(--t)}
.person:hover{border-color:var(--card-hover-bd)}
.person-role{font-size:12px;letter-spacing:0.18em;color:var(--brand-2);text-transform:uppercase;margin-bottom:10px;font-weight:600;font-family:ui-monospace,monospace}
.person-name{font-size:21px;font-weight:700;color:var(--text-strong);margin-bottom:8px;letter-spacing:-0.015em}
.person-bio{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ============ FORM ============ */
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;background:var(--card);border:1px solid var(--card-bd);border-radius:var(--radius);padding:clamp(20px,4vw,40px);backdrop-filter:blur(20px)}
.form label{display:block;font-size:11.5px;color:var(--muted);letter-spacing:0.05em;text-transform:uppercase;font-weight:600;margin-bottom:8px;font-family:ui-monospace,monospace}
.form .field{display:flex;flex-direction:column}
.form .field.full{grid-column:span 2}
.form input,.form select,.form textarea{width:100%;padding:14px 18px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:12px;font-family:inherit;font-size:14px;color:var(--text);transition:all .25s var(--t)}
.form input::placeholder,.form textarea::placeholder{color:var(--dim)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--brand);background:rgba(89,143,255,0.05);box-shadow:0 0 0 3px rgba(89,143,255,0.15)}
.form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%238a96a8' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath d='M1 1l5 5 5-5'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 16px center;background-color:rgba(255,255,255,0.04);padding-right:38px}
.form select option{background:var(--bg-2);color:var(--text)}
.form textarea{resize:vertical;min-height:120px}
.form .submit-row{grid-column:span 2;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:8px;flex-wrap:wrap}
.form .privacy-note{font-size:12px;color:var(--dim);max-width:440px;line-height:1.5}
.form button[type=submit]{padding:14px 30px;font-size:14px;font-weight:600;background:var(--brand);color:#fff;border:none;border-radius:999px;transition:all .3s var(--t)}
.form button[type=submit]:hover:not(:disabled){background:var(--brand-glow);color:#05080f;box-shadow:0 0 32px rgba(77,255,255,0.45);transform:translateY(-2px)}
.form .form-status{grid-column:span 2;font-size:13px;padding:14px 16px;border-radius:12px;margin-top:8px;display:none}
.form .form-status.is-loading{display:block;background:rgba(255,255,255,0.06);color:#cfd8e3}
.form .form-status.is-success{display:block;background:rgba(89,143,255,0.15);color:var(--brand-2);border:1px solid rgba(89,143,255,0.4)}
.form .form-status.is-error{display:block;background:rgba(231,76,60,0.15);color:#ff6b6b;border:1px solid rgba(231,76,60,0.4)}
@media (max-width:600px){.form{grid-template-columns:1fr;padding:22px;gap:12px}.form .field.full,.form .submit-row,.form .form-status{grid-column:span 1}.form input,.form select,.form textarea{padding:13px 16px;font-size:14.5px}.form .submit-row{flex-direction:column;align-items:stretch;gap:14px}.form .privacy-note{font-size:11.5px;max-width:none}.form button[type=submit]{width:100%;padding:15px 24px}}

/* ============ CTA BLOCK ============ */
.cta-block{position:relative;padding:clamp(80px,10vw,120px) clamp(20px,4vw,48px);border-top:1px solid var(--card-bd);background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(89,143,255,0.15),transparent 70%),linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%)}
.cta-inner{max-width:760px;margin:0 auto;text-align:center;position:relative}
.cta-block h2{font-size:clamp(36px,5vw,60px);line-height:1.05;letter-spacing:-0.03em;font-weight:700;margin-bottom:20px;background:linear-gradient(180deg,#fff 0%,#b8c4d6 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cta-block h2 .accent{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-glow) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cta-lead{font-size:clamp(16px,1.3vw,18px);color:var(--muted);max-width:560px;margin:0 auto 40px;line-height:1.62}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cta-note{margin-top:32px;font-size:13.5px;color:var(--dim);font-style:italic}

/* ============ FOOTER ============ */
.foot{border-top:1px solid var(--card-bd);padding:64px clamp(20px,4vw,48px) 36px;background:var(--bg-2)}
.foot-inner{max-width:var(--max-w);margin:0 auto}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-brand p{font-size:14px;color:var(--muted);max-width:340px;line-height:1.6;margin-bottom:18px}
.foot-h{font-size:12px;color:var(--dim);letter-spacing:0.18em;text-transform:uppercase;font-weight:600;margin-bottom:18px}
.foot-col a,.foot-col p{display:block;font-size:14.5px;color:var(--muted);line-height:1.9;padding:2px 0}
.foot-col a:hover{color:var(--brand-2)}
.foot-offices{display:grid;gap:14px}
.foot-office{font-size:13.5px;color:var(--muted);line-height:1.55}
.foot-office strong{display:block;color:var(--text);font-size:13px;letter-spacing:0.05em;text-transform:uppercase;margin-bottom:4px;font-weight:600}
.foot-fine{padding-top:28px;border-top:1px solid var(--card-bd);display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;font-size:12.5px;color:var(--dim)}
.foot-fine a{color:var(--muted);transition:color .25s var(--t)}
.foot-fine a:hover{color:var(--brand-2)}
.foot-coords{font-family:ui-monospace,monospace;letter-spacing:0.05em;color:var(--brand-2)}

/* ============ ANIMATIONS ============ */
.fade-up{opacity:1;transform:none;transition:opacity .7s var(--t),transform .7s var(--t)}
html.js-ready .fade-up:not(.is-visible){opacity:0;transform:translateY(40px)}
html.js-ready .fade-up.is-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){html.js-ready .fade-up{opacity:1!important;transform:none!important}}
.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}

/* ============ BLOG LIST ============ */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin-top:48px}
.post-card{padding:32px 28px;background:var(--card);border:1px solid var(--card-bd);border-radius:var(--radius);transition:all .35s var(--t);display:flex;flex-direction:column;min-height:280px}
.post-card:hover{transform:translateY(-4px);border-color:var(--card-hover-bd);box-shadow:var(--shadow-glow)}
.post-meta{font-size:12px;letter-spacing:0.12em;color:var(--brand-2);text-transform:uppercase;margin-bottom:14px;font-weight:600;font-family:ui-monospace,monospace}
.post-title{font-size:23px;font-weight:700;color:var(--text-strong);margin-bottom:12px;letter-spacing:-0.02em;line-height:1.2}
.post-excerpt{font-size:15px;color:var(--muted);line-height:1.6;margin-bottom:20px;flex:1}
.post-arrow{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--brand-2);transition:gap .3s var(--t)}
.post-card:hover .post-arrow{gap:14px;color:var(--brand-glow)}

/* ============ HERO WITH MEDIA ============ */
.hero.media{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px clamp(20px,4vw,48px) 80px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(0.95) brightness(0.88) contrast(1.02);animation:heroParallax 26s ease-in-out infinite alternate}
@keyframes heroParallax{0%{transform:scale(1.08) translate(0,0)}100%{transform:scale(1.14) translate(-2%,-2%)}}
@media (prefers-reduced-motion:reduce){.hero-bg img{animation:none}}
.hero.media::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,8,15,0.05) 0%,rgba(5,8,15,0.2) 40%,rgba(5,8,15,0.78) 100%),linear-gradient(90deg,rgba(5,8,15,0.45) 0%,rgba(5,8,15,0.1) 40%,transparent 70%),radial-gradient(ellipse 50% 40% at 70% 30%,rgba(89,143,255,0.08),transparent 70%)}
.hero.media .hero-content{position:relative;z-index:2}

/* ============ CUSTOMER MARQUEE (infinite scroll) ============ */
.marquee{position:relative;z-index:2;border-top:1px solid var(--card-bd);border-bottom:1px solid var(--card-bd);padding:36px 0;background:linear-gradient(180deg,rgba(10,15,26,0.6),rgba(5,8,15,0.85));overflow:hidden}
.marquee-label{font-size:12.5px;color:var(--dim);letter-spacing:0.18em;text-transform:uppercase;font-weight:600;text-align:center;margin-bottom:24px;padding:0 24px}
.marquee-track-wrap{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%)}
.marquee-track{display:flex;align-items:center;gap:0;width:max-content;animation:marquee 48s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;justify-content:center;flex-wrap:wrap;gap:32px;mask:none;-webkit-mask:none;width:100%}.marquee-track .infinity-sep{display:none}}
.marquee-item{flex:0 0 auto;padding:0 36px;font-size:clamp(18px,2.2vw,28px);font-weight:600;color:var(--muted);letter-spacing:-0.01em;font-family:'Inter',sans-serif;transition:color .25s var(--t);white-space:nowrap}
.marquee-item:hover{color:var(--text-strong)}
.marquee-item .lbl{font-size:0.5em;color:var(--brand-2);letter-spacing:0.18em;text-transform:uppercase;font-weight:600;font-family:ui-monospace,monospace;display:inline-block;margin-right:8px;vertical-align:middle;opacity:0.7}
.infinity-sep{flex:0 0 auto;padding:0 6px;color:var(--dim);font-size:18px;opacity:0.5}

/* ============ SERVICE CARDS WITH BG IMAGES (override) ============ */
.svc.has-bg{padding:0;overflow:hidden}
.svc.has-bg .svc-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.svc.has-bg .svc-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(0.95) brightness(0.78) contrast(1.02);transition:transform .8s var(--t),filter .8s var(--t)}
.svc.has-bg:hover .svc-bg img{transform:scale(1.06);filter:saturate(1) brightness(0.9) contrast(1.05)}
.svc.has-bg::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,8,15,0) 0%,rgba(5,8,15,0.35) 45%,rgba(5,8,15,0.88) 100%)}
.svc.has-bg .svc-body{position:relative;z-index:2;padding:32px 28px;display:flex;flex-direction:column;height:100%;justify-content:flex-end}

/* ============ MOOD SECTION ============ */
.mood{position:relative;min-height:70vh;display:flex;align-items:center;padding:clamp(60px,8vw,120px) clamp(20px,4vw,48px);overflow:hidden;border-top:1px solid var(--card-bd);border-bottom:1px solid var(--card-bd);margin:clamp(40px,6vw,80px) 0}
.mood-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.mood-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(0.95) brightness(0.78) contrast(1.02);animation:heroParallax 30s ease-in-out infinite alternate}
.mood::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(5,8,15,0.85) 0%,rgba(5,8,15,0.35) 55%,transparent 100%),linear-gradient(180deg,transparent,rgba(5,8,15,0.25)),radial-gradient(ellipse 70% 50% at 30% 50%,rgba(89,143,255,0.10),transparent 70%)}
.mood-text{position:relative;z-index:2;max-width:var(--max-w);margin:0 auto;width:100%}
.mood-text h2{font-size:clamp(36px,6vw,72px);line-height:1.05;letter-spacing:-0.03em;font-weight:700;max-width:680px;margin-bottom:28px;background:linear-gradient(180deg,#fff 0%,#b8c4d6 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mood-text h2 .accent{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-glow) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mood-lead{font-size:clamp(16px,1.45vw,19px);color:var(--muted);max-width:540px;margin-bottom:36px;line-height:1.6}
@media (max-width:600px){.mood{min-height:55vh;padding:60px 20px}}

/* ============ SVG ICONS ON SERVICE CARDS ============ */
.svc-icon{position:absolute;top:24px;right:24px;width:64px;height:64px;z-index:2;opacity:0.85;transition:opacity .35s var(--t),transform .5s var(--t)}
.svc:hover .svc-icon{opacity:1;transform:rotate(6deg) scale(1.05)}
.svc.s-1 .svc-icon{width:88px;height:88px}
@media (max-width:680px){.svc-icon{width:48px;height:48px}}

/* ============ PARTICLE BG OVERLAY (global) ============ */
.bg-particles{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.7;mix-blend-mode:screen}
.bg-particles::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(89,143,255,0.18) 1px,transparent 1.5px);background-size:38px 38px;mask-image:radial-gradient(ellipse 90% 70% at 50% 50%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 50%,#000 30%,transparent 80%)}

/* Floating particle dots — pure CSS animated */
.bg-orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,rgba(77,255,255,0.8),rgba(89,143,255,0));filter:blur(1px)}
.orb.o1{top:12%;left:18%;animation:orbDrift 22s ease-in-out infinite alternate}
.orb.o2{top:78%;left:72%;animation:orbDrift 26s ease-in-out infinite alternate-reverse;width:4px;height:4px;animation-delay:-4s}
.orb.o3{top:45%;left:92%;animation:orbDrift 19s ease-in-out infinite alternate;width:5px;height:5px;animation-delay:-9s}
.orb.o4{top:88%;left:8%;animation:orbDrift 28s ease-in-out infinite alternate-reverse;width:3px;height:3px;animation-delay:-2s}
.orb.o5{top:30%;left:55%;animation:orbDrift 24s ease-in-out infinite alternate;width:8px;height:8px;animation-delay:-12s}
@keyframes orbDrift{0%{transform:translate(0,0)}50%{transform:translate(60px,-40px)}100%{transform:translate(-30px,80px)}}
@media (prefers-reduced-motion:reduce){.orb{animation:none}}

/* ============ FOUNDER SHOWCASE (home + about) ============ */
.founder{position:relative;padding:clamp(80px,10vw,140px) clamp(20px,4vw,48px);border-top:1px solid var(--card-bd);border-bottom:1px solid var(--card-bd);background:linear-gradient(180deg,rgba(10,15,26,0.6),rgba(5,8,15,0.85));overflow:hidden}
.founder-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:clamp(40px,6vw,80px);align-items:center}
@media (max-width:880px){.founder-inner{grid-template-columns:1fr;gap:32px;text-align:center}.founder-text{text-align:left}}
.founder-portrait{position:relative;width:clamp(220px,28vw,360px);aspect-ratio:1/1.36;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--card-bd);box-shadow:0 0 60px rgba(89,143,255,0.18)}
.founder-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:saturate(0.85) contrast(1.05)}
.founder-portrait::before{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 60%,rgba(5,8,15,0.4)),linear-gradient(135deg,rgba(89,143,255,0.08),transparent 60%);pointer-events:none}
.founder-portrait::after{content:'';position:absolute;top:-1px;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,var(--brand),transparent);z-index:3}
.founder-badge{position:absolute;bottom:18px;left:18px;z-index:3;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--brand-2);font-family:ui-monospace,monospace;padding:6px 10px;background:rgba(5,8,15,0.85);border:1px solid rgba(89,143,255,0.4);border-radius:999px;backdrop-filter:blur(8px)}
.founder-text .section-eyebrow{margin-bottom:18px}
.founder-text h2{font-size:clamp(32px,4.5vw,56px);line-height:1.05;letter-spacing:-0.03em;font-weight:700;margin-bottom:18px;color:var(--text-strong)}
.founder-text h2 .accent{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-glow) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.founder-quote{font-size:clamp(16px,1.5vw,20px);line-height:1.5;color:var(--text);font-style:italic;border-left:3px solid var(--brand);padding-left:20px;margin:24px 0}
.founder-bio{font-size:15.5px;color:var(--muted);line-height:1.65;margin-bottom:24px;max-width:560px}
.founder-creds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.founder-cred{font-size:12px;font-family:ui-monospace,monospace;color:var(--brand-2);padding:6px 12px;border:1px solid rgba(89,143,255,0.3);border-radius:999px;background:var(--brand-soft);letter-spacing:0.04em}


/* ---- hero background video (ENO-CT style, added 2026-06) ---- */
.hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.55}
.hero.media.has-video .hero-bg img{display:none}
.hero.media.has-video::after{background:linear-gradient(90deg,rgba(5,8,15,.85) 0%,rgba(5,8,15,.55) 45%,rgba(5,8,15,.35) 100%)}
@media (prefers-reduced-motion:reduce){.hero.media.has-video .hero-bg-video{display:none}.hero.media.has-video .hero-bg img{display:block}}


/* ============================================================
   STS — modular type scale, 4px spacing grid, unified card track,
   legibility gradient. Reconciled B2B output. APPEND to site.css
   (after the existing rules) OR replace the listed rules in place.
   Selectors match site.css exactly. .accent inner-span gradients
   are intentionally left untouched.
   ============================================================ */

/* ---- Tokens: add these lines to the existing :root{} block ---- */
:root{
  /* Modular type scale — perfect fourth (1.333), base = body 17px.
     Geometric run: 17/22.66/30.2/40.3/53.7/71.6/95.5.
     Top is pinned at 86 (display cap) so the hero does not inflate;
     all lower caps snap to the nearest non-inflating step. */
  --scale-0:17px;   /* base / body, .prose h4                         */
  --scale-1:23px;   /* .prose h3                                      */
  --scale-2:30px;   /* .section h3                                    */
  --scale-3:40px;   /* .prose h2 (exact)                              */
  --scale-4:54px;   /* .section h2, .hero.compact h1, .cta-block h2   */
  --scale-5:72px;   /* .mood-text h2 (exact, full-bleed display)      */
  --scale-6:86px;   /* .hero h1 — top display cap (held, not inflated)*/

  /* 4px-based spacing scale */
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --space-6:48px;

  /* Unified auto-fit card minimum (free-flowing card grids) */
  --card-min:280px;
}

/* ---- Headings: clamp min + vw preserved verbatim; only the MAX
        term is swapped for a scale token. No cap moves up. ---- */
.hero h1{font-size:clamp(30px,7vw,var(--scale-6))}            /* 86 -> 86 (held) */
.hero.compact h1{font-size:clamp(36px,5vw,var(--scale-4))}   /* 64 -> 54 */
.section h2{font-size:clamp(36px,5vw,var(--scale-4))}        /* 64 -> 54 */
.section h3{font-size:clamp(22px,2.6vw,var(--scale-2))}      /* 32 -> 30 */
.prose h2{font-size:clamp(28px,3.4vw,var(--scale-3))}        /* 40 -> 40 (exact) */
.prose h3{font-size:clamp(20px,2.2vw,var(--scale-1))}        /* 26 -> 23 */
.prose h4{font-size:var(--scale-0)}                          /* 18 -> 17 (was fixed) */
.cta-block h2{font-size:clamp(36px,5vw,var(--scale-4))}      /* 60 -> 54 */
.mood-text h2{font-size:clamp(36px,6vw,var(--scale-5))}      /* 72 -> 72 (exact) */
.founder-text h2{font-size:clamp(32px,4.5vw,var(--scale-4))} /* 56 -> 54 */

/* ---- .prose margins snapped to nearest 4px tokens ----
   48/18->48/16 | 36/14->32/12 | 26/10->24/8 | p 20->24 | hr 48 (on grid) */
.prose h2{margin:var(--space-6) 0 var(--space-3)}   /* was 48px 0 18px */
.prose h3{margin:var(--space-5) 0 var(--space-2)}   /* was 36px 0 14px */
.prose h4{margin:var(--space-4) 0 var(--space-1)}   /* was 26px 0 10px */
.prose p{margin:0 0 var(--space-4)}                 /* was 0 0 20px    */
.prose hr{margin:var(--space-6) 0}                  /* was 48px 0      */

/* .section h3 bottom margin onto the grid (was 14px) */
.section h3{margin-bottom:var(--space-2)}           /* 14 -> 12 */

/* ---- Unified auto-fit card track on the three free-flowing grids.
        NOT .svc-grid (strict 12-col bento), NOT .std (180px stat grid). ---- */
.feat-grid{grid-template-columns:repeat(auto-fit,minmax(var(--card-min),1fr))} /* was 280px */
.people{grid-template-columns:repeat(auto-fit,minmax(var(--card-min),1fr))}    /* was 260px */
.posts{grid-template-columns:repeat(auto-fit,minmax(var(--card-min),1fr))}     /* was 320px */

/* ---- Legibility gradient: keep white->slate on the two top-level
        display headings, lighten dark stop #b8c4d6 -> #c8d2e0. ---- */
.hero h1{
  background:linear-gradient(180deg,#fff 0%,#c8d2e0 95%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.cta-block h2{
  background:linear-gradient(180deg,#fff 0%,#c8d2e0 95%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* Demote .mood-text h2 (previously #fff->#b8c4d6 clip) to solid strong text. */
.mood-text h2{
  background:none;
  -webkit-text-fill-color:currentColor;
  color:var(--text-strong);
}
/* .section h2 and .founder-text h2 already use solid var(--text-strong) — unchanged.
   .accent inner-span (brand -> brand-glow cyan) gradients are intentionally kept. */

/* View Transitions — instant cross-document navigation (Baseline 2025) */
@view-transition{navigation:auto}

/* Credential ledger — verifiable, instrument-grade rows */
.cred-ledger{margin:24px 0;border:1px solid var(--card-bd);border-radius:12px;overflow:hidden;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
.cred-ledger .cred-head{padding:9px 16px;border-bottom:1px solid var(--card-bd);color:var(--dim);text-transform:uppercase;letter-spacing:.09em;font-size:10.5px;background:var(--card)}
.cred-ledger .cred-row{display:grid;grid-template-columns:1fr auto;gap:18px;padding:12px 16px;border-bottom:1px solid var(--card-bd);align-items:baseline;font-size:13px}
.cred-ledger .cred-row:last-child{border-bottom:none}
.cred-ledger .cred-name{color:var(--text-strong)}
.cred-ledger .cred-body{color:var(--brand-2);white-space:nowrap}
@media(max-width:520px){.cred-ledger .cred-row{grid-template-columns:1fr;gap:2px}}