@font-face{font-family:"Nebula";src:url("../fonts/Nebula.woff2") format("woff2"),url("../fonts/Nebula.woff") format("woff");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Nebula";src:url("../fonts/Nebula-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Nebula Hollow";src:url("../fonts/Nebula-Hollow.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
/* Jost — body/content — variable (wght 100–900) — SIL Open Font License */
@font-face{font-family:"Jost";src:url("../fonts/Jost-Variable-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Jost";src:url("../fonts/Jost-Variable-latin-ext.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ====================== 00. TOKENS ===================================== */
:root {
  /* Brand color tokens */
  --teal: #0D8A87;
  --teal-bright: #14B8A6;
  --teal-glow: #0FDBD5;
  --orange: #FF5C00;
  --orange-amber: #FF8A3D;
  --orange-light: #FFB07A;
  --green-sage: #4ADE80;
  --green-seafoam: #6EE7B7;
  --green-forest: #10B981;
  --bone: #F5F3EE;           /* page bg — NEVER pure white */
  --bone-alt: #EDEAE2;
  --surface: #FCFBF8;
  --surface-top: #FFFFFF;
  --ink: #1C1B29;
  --ink-mid: #2B2A4A;
  --text-2: #56546A;
  --text-faint: #9C99A8;
  --hairline: #E2DDD2;
  --volt: #FF5C00;

  /* Gradients */
  --grad-teal-aurora: linear-gradient(135deg,#0D8A87 0%,#14B8A6 40%,#6EE7B7 70%,#4ADE80 100%);
  --grad-orange-volt: linear-gradient(135deg,#FF5C00 0%,#FF8A3D 50%,#FFB07A 100%);
  --grad-dark-mineral: linear-gradient(160deg,#1C1B29 0%,#2B2A4A 55%,#0D8A87 100%);
  --grad-spectrum: linear-gradient(90deg,#FF5C00,#FF8A3D,#6EE7B7,#14B8A6,#0D8A87);
  --grad-hero-light: linear-gradient(160deg,#FBFAF6 0%,#EAF5F2 52%,#D8EEE9 100%);

  /* Type families */
  --font-display: "Nebula", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Fluid type scale (editorial, tight) */
  --text-hero: clamp(2.85rem, 7.5vw + 0.5rem, 6.875rem); /* up to ~110px */
  --text-h2: clamp(2rem, 3.6vw + 0.6rem, 3.5rem);
  --text-h3: clamp(1.2rem, 1vw + 0.85rem, 1.6rem);
  --text-lede: clamp(1.05rem, 0.5vw + 0.95rem, 1.375rem);
  --text-body: clamp(1rem, 0.2vw + 0.95rem, 1.0625rem);
  --text-sm: 0.9375rem;
  --text-xs: 0.8125rem;
  --text-eyebrow: 0.78rem;

  /* Spacing */
  --space-section: clamp(4.5rem, 9vw, 9rem);
  --space-section-sm: clamp(3rem, 6vw, 5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --maxw: 1240px;
  --maxw-narrow: 880px;

  /* Radii & shadow */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(28,27,41,.04), 0 8px 28px -12px rgba(28,27,41,.14);
  --shadow-float: 0 24px 60px -22px rgba(28,27,41,.32);
  --shadow-glow-teal: 0 18px 50px -16px rgba(13,138,135,.5);
  --shadow-glow-orange: 0 18px 50px -16px rgba(255,92,0,.45);

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .5s;

  --nav-h: 72px;
}

/* @property registration for animated border-beam angle */
@property --beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ====================== 01. MODERN RESET =============================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink);
  background: var(--bone); /* never pure white */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}
img, picture, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.08; font-weight: 400; font-family: var(--font-display); letter-spacing: 0.01em; font-synthesis: none; }
p { text-wrap: pretty; }
:where(h1,h2,h3) { text-wrap: balance; }

/* ====================== 02. BASE TYPOGRAPHY =========================== */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 1.8rem;
  height: 2px;
  background: var(--grad-spectrum);
  border-radius: 2px;
}
/* Per-section eyebrow modifiers (inherit base .eyebrow; listed for completeness) */
.services__eyebrow, .trifecta__eyebrow, .cases__eyebrow, .industries__eyebrow,
.platform__eyebrow, .locations__eyebrow, .why__eyebrow, .blog__eyebrow,
.faq__eyebrow, .webdesign__eyebrow { color: var(--teal); }

/* ====================== 03. DECORATIVE LAYERS ========================= */
/* Aurora glow orbs between sections — blurred radial gradients.
   Painted as fixed, pointer-events:none, behind content (z-index 0). */
body::before, body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
}
body::before {
  width: 46vw; height: 46vw;
  top: 18%; left: -12vw;
  background: radial-gradient(circle at 50% 50%, rgba(20,184,166,.55), transparent 68%);
  animation: orb-drift-a 26s var(--ease) infinite alternate;
}
body::after {
  width: 40vw; height: 40vw;
  top: 62%; right: -10vw;
  background: radial-gradient(circle at 50% 50%, rgba(110,231,183,.42), transparent 68%);
  animation: orb-drift-b 32s var(--ease) infinite alternate;
}
@keyframes orb-drift-a {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(8vw,12vh,0) scale(1.18); }
}
@keyframes orb-drift-b {
  from { transform: translate3d(0,0,0) scale(1.05); }
  to   { transform: translate3d(-7vw,-9vh,0) scale(.9); }
}

/* Gradient mesh blobs — reusable decorative element class for hero + trifecta.
   These are pseudo-painted directly on .hero and .trifecta below. */
@keyframes mesh-morph {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); border-radius: 42% 58% 60% 40% / 50% 44% 56% 50%; }
  50%  { transform: translate3d(4%, -5%, 0) rotate(18deg) scale(1.12); border-radius: 60% 40% 38% 62% / 46% 60% 40% 54%; }
  100% { transform: translate3d(-3%, 4%, 0) rotate(-12deg) scale(.96); border-radius: 50% 50% 54% 46% / 58% 42% 58% 42%; }
}

/* Spectrum hairline divider — a thin animated rule between light sections. */
.section-divider, /* optional explicit element */
:root { --divider-h: 2px; }

/* ====================== 04. UTILITIES ================================= */
.skip-link {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 1000;
  background: var(--ink);
  color: #fff;
  padding: .7rem 1.2rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); outline: 2px solid var(--teal-glow); }

/* Generic container behaviour for every section inner wrapper */
.nav__inner,
.revolution__inner, .stats__inner, .services__inner, .webdesign__inner,
.trifecta__inner, .cases__inner, .industries__inner, .platform__inner,
.locations__inner, .why__inner, .blog__inner, .faq__inner, .cta__inner,
.footer__inner, .footer__bar {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section vertical rhythm + ensure content sits above decorative layers */
main > section { position: relative; z-index: 1; padding-block: var(--space-section); }
main > section > [class$="__inner"] { position: relative; z-index: 1; }

/* Lede styling shared across sections */
.revolution__lede, .stats__lede, .services__lede, .trifecta__lede,
.cases__lede, .industries__lede, .platform__lede, .locations__lede,
.why__lede, .blog__lede, .cta__lede {
  font-size: var(--text-lede);
  color: var(--text-2);
  max-width: 62ch;
  margin-top: 1rem;
  font-weight: 400;
}

/* Section H2 shared sizing */
.revolution__title, .stats__title, .services__title, .webdesign__title,
.trifecta__title, .cases__title, .industries__title, .platform__title,
.locations__title, .why__title, .blog__title, .faq__title, .cta__title {
  font-size: var(--text-h2);
}

/* ---- Buttons ---- */
.btn {
  --_bg: var(--ink);
  --_fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .95rem 1.7rem;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
  line-height: 1;
  background: var(--_bg);
  color: var(--_fg);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
  isolation: isolate;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --_fg: #fff;
  background: var(--grad-orange-volt);
  background-size: 160% 160%;
  background-position: 0% 50%;
  color: #fff;
  box-shadow: var(--shadow-glow-orange);
}
.btn--primary:hover {
  background-position: 100% 50%;
  box-shadow: 0 24px 60px -16px rgba(255,92,0,.6);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}
.btn--ghost:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(13,138,135,.06);
}

/* On dark/orange sections, ghost buttons adapt */
.hero .btn--ghost,
.shero .btn--ghost,
.revolution .btn--ghost, .cta .btn--ghost,
.stats .btn--ghost, .platform .btn--ghost,
.footer .btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.hero .btn--ghost:hover,
.shero .btn--ghost:hover,
.revolution .btn--ghost:hover, .cta .btn--ghost:hover { background: rgba(255,255,255,.16); border-color:#fff; color:#fff; }

/* On full-orange sections the primary CTA flips to ink for contrast */
.revolution .btn--primary, .cta .btn--primary, .cta__submit {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.55);
}
.revolution .btn--primary:hover, .cta .btn--primary:hover, .cta__submit:hover {
  background: #000;
}

/* ---- Border-beam: animated conic ring on the primary nav CTA ---- */
.border-beam {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.border-beam::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.6px;
  background: conic-gradient(from var(--beam-angle),
      transparent 0deg, transparent 250deg,
      var(--teal-glow) 295deg, var(--orange) 320deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: beam-spin 4s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes beam-spin { to { --beam-angle: 360deg; } }

/* ---- Spotlight glow on hoverable cards (JS sets --mx / --my) ---- */
[data-spotlight] {
  position: relative;
  isolation: isolate;
}
[data-spotlight]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .35s var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
      rgba(13,138,135,.16), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
[data-spotlight]:hover::after { opacity: 1; }

/* ====================== 05. SCROLL PROGRESS / CURSOR ================== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--grad-spectrum);
  z-index: 1001;
  pointer-events: none;
}

/* Custom cursor elements (created by JS). Hidden on touch/coarse pointers. */
.cursor-dot, .cursor-trail {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1002;
  mix-blend-mode: multiply;
  will-change: transform;
  transform: translate(-50%, -50%);
}
.cursor-dot {
  width: 10px; height: 10px;
  background: var(--orange);
}
.cursor-trail {
  width: 7px; height: 7px;
  background: var(--teal-bright);
  opacity: .55;
}
@media (hover: hover) and (pointer: fine) {
  html.js.has-custom-cursor { cursor: none; }
}
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-trail { display: none !important; }
}

/* ====================== 06. NAV ====================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--nav-h);
  padding-block: .6rem;
}
/* Glassmorphism toggled by JS when scrollY > 50px (class on #site-nav) */
.nav.is-scrolled, #site-nav.scrolled {
  background: rgba(245,243,238,.72);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--hairline);
  box-shadow: 0 8px 30px -18px rgba(28,27,41,.4);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-weight: 600;
}
.nav__logo { width: 130px; height: 120px; flex: none; }
.nav__logo-img { height: 70px; width: auto; display: block; }
.nav__wordmark {
  font-size: 2.18rem;
  letter-spacing: -0.02em;
  color: var(--ink); 
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  padding: .55rem .85rem;
  border-radius: var(--r-sm);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--ink);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav__link:hover { color: var(--teal); background: rgba(13,138,135,.07); }

/* Mega dropdown */
.nav__mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 540px;
  display: grid;
  gap: .15rem;
  padding: .6rem;
  background: rgba(252,251,248,.9);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index: 50;
}
.nav__mega::before { /* spectrum hairline accent at top */
  content: "";
  position: absolute;
  top: 0; left: 1rem; right: 1rem;
  height: 2px;
  background: var(--grad-spectrum);
  border-radius: 2px;
}
/* Open state is driven by JS (.nav__item--open) so GSAP can run a richer
   staggered open/close; this block is the no-GSAP / no-JS-motion fallback. */
.nav__item--open .nav__mega,
.nav__item:focus-within .nav__mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__mega-link { opacity: 1; }
.nav__mega-link {
  padding: .6rem .8rem;
  border-radius: var(--r-sm);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease);
}
.nav__mega-link:hover { background: rgba(13,138,135,.09); color: var(--teal); padding-left: 1.1rem; }

.nav__mega::after {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0; height: 16px;
}
.nav__mega--wide {
  left: 50%;
  display: inline-grid;
  width: auto;
  max-width: calc(100vw - 32px);
  grid-template-columns: repeat(var(--mega-cols, 4), minmax(150px, max-content));
  align-items: start;
  gap: 1.3rem 1.6rem;
  padding: 1.4rem 1.5rem 1.1rem;
}

@media (min-width: 901px) and (max-width: 1100px) {
  .nav__mega--wide { grid-template-columns: repeat(3, minmax(140px, max-content)); }
}
.nav__mega-group { display: grid; gap: .1rem; align-content: start; }
.nav__mega-h {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-mid);
  padding: .2rem .8rem .5rem;
  margin-bottom: .2rem;
  border-bottom: 1px solid var(--hairline);
}
.nav__mega-h.is-link { color: var(--teal); transition: color .2s var(--ease); }
.nav__mega-h.is-link:hover { color: var(--teal-bright); }
.nav__mega-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 1.5rem;
  margin-top: .5rem;
  padding-top: .85rem;
  border-top: 1px solid var(--hairline);
}
.nav__mega-foot a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ink-mid);
  transition: color .2s var(--ease);
}
.nav__mega-foot a:hover { color: var(--teal); }
/* CTA card sits in the last column (auto-placed after the groups) and
   stretches to the height of the tallest group row. No explicit grid-row
   span — that breaks auto-flow and over-stretches the panel. */
.nav__mega-cta {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .55rem;
  padding: 1.15rem 1.2rem;
  border-radius: var(--r-md);
  background: var(--grad-dark-mineral);
  /* Conform to the grid track so the card never overflows the panel's right
     padding (was min-width:190px, which pushed it ~11px past the edge). */
  min-width: 0;
}
.nav__mega-cta-eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--green-seafoam);
}
.nav__mega-cta h4 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; line-height: 1.32; color: #fff; margin: 0; padding-top: .1rem;
}
.nav__mega-cta p { font-size: var(--text-xs); line-height: 1.5; color: rgba(255,255,255,.74); margin: 0; }
.nav__mega-cta-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  align-self: flex-start; margin-top: .25rem;
  padding: .55rem 1rem; border-radius: var(--r-pill);
  background: var(--orange); color: #fff;
  font-weight: 700; font-size: var(--text-xs);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav__mega-cta-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow-orange); }

.nav__actions { display: flex; align-items: center; gap: .9rem; }

.nav__menu-cta { display: none; }
.nav__phone {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink-mid);
  transition: color .25s var(--ease);
}
.nav__phone:hover { color: var(--teal); }
.nav__cta {
  display: inline-flex;
  align-items: center;
  padding: .65rem 1.25rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nav__cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow-orange); }

/* Logo swap: white wordmark over the dark hero (top), ink wordmark once scrolled */
.nav__logo-pic { display: block; }
.nav__logo-pic--ink { display: none; }
#site-nav.is-scrolled .nav__logo-pic--ink { display: block; }
#site-nav.is-scrolled .nav__logo-pic--white { display: none; }

/* Light nav controls while sitting over the dark hero (not yet scrolled) */
#site-nav:not(.is-scrolled) .nav__link { color: rgba(245,243,238,.92); }
#site-nav:not(.is-scrolled) .nav__link:hover { color: #fff; background: rgba(255,255,255,.1); }
#site-nav:not(.is-scrolled) .nav__phone { color: rgba(245,243,238,.7); }
#site-nav:not(.is-scrolled) .nav__phone:hover { color: var(--teal-glow); }
#site-nav:not(.is-scrolled) .nav__cta { background: #fff; color: var(--ink); }
#site-nav:not(.is-scrolled) .nav__cta:hover { box-shadow: 0 8px 30px -10px rgba(255,255,255,.45); }

/* ====================== 07. HERO ===================================== */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: var(--space-section);
  overflow: hidden;
  background: var(--grad-dark-mineral);
  color: #fff;
}
/* center scrim — guarantees headline contrast over the 3D scene.
   Lives in the background-art layer (z-index 0, above the canvas via tree
   order) so it darkens the waves but NEVER paints over the content. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(118% 88% at 50% 40%, rgba(18,17,28,.82) 0%, rgba(18,17,28,.55) 40%, rgba(18,17,28,.18) 70%, rgba(18,17,28,0) 100%),
    linear-gradient(180deg, rgba(18,17,28,.45) 0%, rgba(18,17,28,0) 22%);
}
/* gradient mesh blob on hero */
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -10%; right: -6%;
  width: 52vw; height: 52vw;
  max-width: 720px; max-height: 720px;
  background: var(--grad-teal-aurora);
  filter: blur(60px);
  opacity: .4;
  animation: mesh-morph 24s var(--ease) infinite;
  pointer-events: none;
}
/* island canvas — decorative, behind content */
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  /* max-width: 900px; */
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  min-height: clamp(28rem, 52vh, 36rem);
}
.hero__inner > * { min-width: 0; }
/* Beat the generic `main > section > [class$="__inner"]{z-index:1}` reveal rule
   (specificity 0,1,2) so hero content reliably sits ABOVE the scrim. */
#hero .hero__inner { z-index: 3; }
.hero__content { max-width: 54rem; margin-inline: auto; text-align: center; }
.hero__eyebrow { flex-wrap: wrap; justify-content: center; }
.hero__flip {
  color: var(--orange);
  font-weight: 700;
}
.hero__eyebrow-static { color: var(--teal-glow); }
.hero__title {
  font-size: clamp(2.1rem, 5.4vw, 3.9rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: #fff;
  margin-top: .4rem;
  overflow-wrap: break-word;
}
.hero__title-accent {
  font-style: normal;
  color: var(--teal-glow);
  text-shadow: 0 0 38px rgba(15,219,213,.35);
}
.hero__subcopy {
  font-size: clamp(1rem, 1.05vw, 1.12rem);
  line-height: 1.5;
  color: rgba(245,243,238,.92);
  margin-top: 1rem;
  max-width: 52ch;
  margin-inline: auto;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.hero__trust {
  margin-top: 0;
  text-align: center;
  font-size: var(--text-sm);
  color: rgba(245,243,238,.66);
}

/* ---- HERO LIVE RANK TICKER (broadcast lower-third) ---- */
.hero__ticker {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.4rem);
  width: 100%;
  padding: .7rem .9rem;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(20,19,31,.46);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px -34px rgba(0,0,0,.7);
  overflow: hidden;
}
.hero__ticker::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--grad-spectrum);
}
.hero__ticker-head {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding-left: .35rem;
}
.hero__ticker-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .14em;
  color: rgba(245,243,238,.72);
  white-space: nowrap;
}
.hero__ticker-viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.hero__ticker-track {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: max-content;
  margin: 0; padding: 0;
  list-style: none;
  animation: hero-ticker 46s linear infinite;
  will-change: transform;
}
.hero__ticker:hover .hero__ticker-track,
.hero__ticker:focus-within .hero__ticker-track { animation-play-state: paused; }
@keyframes hero-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.hero__ticker-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .38rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  white-space: nowrap;
}
.hero__ticker-kw {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: rgba(245,243,238,.84);
}
.hero__ticker-pos {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--green-seafoam);
}
.hero__ticker-pos::before { content: "\25B2\00A0"; font-size: .72em; }
.hero__ticker-stats {
  flex: none;
  display: flex;
  gap: 1rem;
  padding-right: .35rem;
}
.hero__ticker-stats span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(245,243,238,.6);
  white-space: nowrap;
}
.hero__ticker-stats strong {
  color: var(--teal-glow);
  font-size: var(--text-sm);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .hero__ticker-track { animation: none; }
}
@media (max-width: 640px) {
  .hero__inner { min-height: auto; gap: 1.6rem; }
  .hero__ticker { flex-wrap: wrap; margin-top: 1.25rem; gap: .6rem .9rem; }
  .hero__ticker-viewport { order: 3; flex-basis: 100%; }
  .hero__ticker-stats { margin-left: auto; }
}

/* Ranking panel card */
.hero__panel { position: relative; z-index: 2; }
.rank-panel {
  position: relative;
  background: rgba(20,19,31,.52);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
  overflow: hidden;
}
.rank-panel::before { /* spectrum top hairline */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-spectrum);
}
.rank-panel__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.1rem;
}
.rank-panel__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green-sage);
  box-shadow: 0 0 0 0 rgba(74,222,128,.6);
  animation: pulse-dot 2s var(--ease) infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); }
  70% { box-shadow: 0 0 0 9px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
.rank-panel__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .16em;
  color: rgba(245,243,238,.62);
}
.rank-panel__list {
  display: grid;
  /* minmax(0,1fr) stops nowrap keyword text from inflating the track
     beyond the panel width on narrow screens */
  grid-template-columns: minmax(0, 1fr);
  gap: .55rem; margin: 0; padding: 0; list-style: none;
}
.rank-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem .85rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-sm);
}
.rank-panel__kw {
  font-size: var(--text-sm);
  color: rgba(245,243,238,.86);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* flex items refuse to shrink below content without min-width: 0,
     which pushed the position chips off-screen on mobile */
  min-width: 0;
  flex: 1 1 auto;
}
.rank-panel__pos {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: .2rem .55rem;
  border-radius: var(--r-pill);
}
.rank-panel__pos--up {
  color: var(--green-seafoam);
  background: rgba(110,231,183,.16);
}
.rank-panel__pos--up::before { content: "▲ "; font-size: .7em; }
.rank-panel__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.rank-panel__metric { display: flex; flex-direction: column; }
.rank-panel__metric strong {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--teal-glow);
  line-height: 1;
}
.rank-panel__metric span { font-size: var(--text-xs); color: rgba(245,243,238,.5); margin-top: .25rem; }
.rank-panel__arrow {
  position: absolute;
  right: 1.1rem;
  bottom: 1rem;
  width: 34px; height: 34px;
  opacity: .12;
}

/* ---- NAV THEME TOGGLE (hero light / dark switch, icon-only in nav) ---- */
.nav__theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-mid);
  cursor: pointer;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.nav__theme:hover { color: var(--teal); border-color: var(--teal); background: rgba(13,138,135,.07); }
.nav__theme:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.nav__theme-icon { width: 18px; height: 18px; display: block; }
.nav__theme-icon--moon { display: none; }
html[data-hero-theme="light"] .nav__theme-icon--moon { display: block; }
html[data-hero-theme="light"] .nav__theme-icon--sun { display: none; }
/* over the dark hero (nav transparent at top) -> light control */
#site-nav:not(.is-scrolled) .nav__theme { color: rgba(245,243,238,.8); border-color: rgba(255,255,255,.22); }
#site-nav:not(.is-scrolled) .nav__theme:hover { color:#fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.12); }

/* ====================== 07b. HERO — LIGHT VARIATION ================== */
html[data-hero-theme="light"] .hero {
  background: var(--grad-hero-light);
  color: var(--ink);
}
/* light scrim keeps the headline readable over the teal point-cloud */
html[data-hero-theme="light"] .hero::after {
  background: linear-gradient(90deg, rgba(251,250,246,.92) 0%, rgba(251,250,246,.6) 38%, rgba(251,250,246,.12) 66%, rgba(251,250,246,0) 84%);
}
html[data-hero-theme="light"] .hero::before {
  background: var(--grad-teal-aurora);
  opacity: .22;
}
html[data-hero-theme="light"] .hero__title { color: var(--ink); }
html[data-hero-theme="light"] .hero__subcopy { color: var(--ink-mid); }
html[data-hero-theme="light"] .hero__eyebrow-static { color: var(--teal); }
html[data-hero-theme="light"] .hero__trust { color: rgba(28,27,41,.55); }

/* rank panel reverts to light glass in the light hero */
html[data-hero-theme="light"] .rank-panel {
  background: rgba(252,251,248,.72);
  border-color: var(--hairline);
  box-shadow: var(--shadow-float, 0 30px 80px -34px rgba(28,27,41,.28));
}
html[data-hero-theme="light"] .rank-panel__label { color: var(--ink-mid); }
html[data-hero-theme="light"] .rank-panel__row {
  background: rgba(28,27,41,.035);
  border-color: var(--hairline);
}
html[data-hero-theme="light"] .rank-panel__kw { color: var(--ink); }
html[data-hero-theme="light"] .rank-panel__metric strong { color: var(--teal); }
html[data-hero-theme="light"] .rank-panel__metric span { color: var(--ink-mid); }
html[data-hero-theme="light"] .rank-panel__foot { border-top-color: var(--hairline); }

/* live ticker reverts to light glass in the light hero */
html[data-hero-theme="light"] .hero__ticker {
  background: rgba(252,251,248,.74);
  border-color: var(--hairline);
  box-shadow: var(--shadow-float, 0 24px 60px -36px rgba(28,27,41,.26));
}
html[data-hero-theme="light"] .hero__ticker-label { color: var(--ink-mid); }
html[data-hero-theme="light"] .hero__ticker-chip {
  background: rgba(28,27,41,.035);
  border-color: var(--hairline);
}
html[data-hero-theme="light"] .hero__ticker-kw { color: var(--ink); }
html[data-hero-theme="light"] .hero__ticker-pos { color: #0a7c4a; }
html[data-hero-theme="light"] .hero__ticker-stats span { color: var(--ink-mid); }
html[data-hero-theme="light"] .hero__ticker-stats strong { color: var(--teal); }
html[data-hero-theme="light"] .hero__title-accent { color: var(--teal); text-shadow: none; }

/* theme toggle over the light hero -> dark control */
html[data-hero-theme="light"] #site-nav:not(.is-scrolled) .nav__theme { color: var(--ink-mid); border-color: var(--hairline); background: transparent; }
html[data-hero-theme="light"] #site-nav:not(.is-scrolled) .nav__theme:hover { color: var(--teal); border-color: var(--teal); background: rgba(13,138,135,.07); }

/* nav at top over the light hero -> dark controls + ink logo */
html[data-hero-theme="light"] #site-nav:not(.is-scrolled) .nav__link { color: var(--ink); }
html[data-hero-theme="light"] #site-nav:not(.is-scrolled) .nav__link:hover { color: var(--teal); background: rgba(13,138,135,.07); }
html[data-hero-theme="light"] #site-nav:not(.is-scrolled) .nav__phone { color: var(--ink-mid); }
html[data-hero-theme="light"] #site-nav:not(.is-scrolled) .nav__phone:hover { color: var(--teal); }
html[data-hero-theme="light"] #site-nav:not(.is-scrolled) .nav__cta { background: var(--ink); color:#fff; }
html[data-hero-theme="light"] #site-nav:not(.is-scrolled) .nav__logo-pic--white { display:none; }
html[data-hero-theme="light"] #site-nav:not(.is-scrolled) .nav__logo-pic--ink { display:block; }

/* ghost CTA reverts to ink outline in light hero */
html[data-hero-theme="light"] .hero .btn--ghost { color: var(--ink); border-color: var(--ink); }
html[data-hero-theme="light"] .hero .btn--ghost:hover { color: var(--teal); border-color: var(--teal); background: rgba(13,138,135,.06); }

/* ====================== 08. AI REVOLUTION (FULL ORANGE) ============== */
.revolution {
  background: var(--grad-orange-volt);
  color: #fff;
  overflow: hidden;
}
.revolution__eyebrow { color: rgba(28,27,41,.85); }
.revolution__eyebrow::before { background: var(--ink); }
.revolution__title { color: var(--ink); } /* ink on orange — strong contrast */
.revolution__lede { color: rgba(28,27,41,.88); max-width: 70ch; }
.revolution__panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.rev-panel {
  border-radius: var(--r-lg);
  padding: 1.75rem;
  border: 1px solid rgba(255,255,255,.4);
}
.rev-panel--old {
  background: rgba(28,27,41,.28);
  color: #fff;
}
.rev-panel--new {
  background: rgba(255,255,255,.94);
  color: var(--ink);
  box-shadow: var(--shadow-float);
}
.rev-panel__title {
  font-size: var(--text-h3);
  margin-bottom: 1rem;
}
.rev-panel--old .rev-panel__title { color: #fff; }
.rev-panel--new .rev-panel__title { color: var(--orange); }
.rev-panel__list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.rev-panel__list li {
  position: relative;
  padding-left: 1.7rem;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.rev-panel--old .rev-panel__list li::before {
  content: "✕";
  position: absolute; left: 0; top: 0;
  color: var(--orange-light);
  font-weight: 700;
}
.rev-panel--new .rev-panel__list li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--green-forest);
  font-weight: 700;
}
.revolution__bridge {
  margin-top: 2.25rem;
  font-size: var(--text-lede);
  font-weight: 500;
  color: var(--ink);
  max-width: 70ch;
}

/* ====================== 09. STATS (DARK MINERAL) ===================== */
.stats {
  position: relative;
  background: var(--grad-dark-mineral);
  color: #fff;
  overflow: hidden;
}
.stats__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.stats__title { color: #fff; }
.stats__lede { color: rgba(255,255,255,.75); }
.stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
  list-style: none; padding: 0;
}
.stat {
  padding: 1.75rem;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, var(--teal-glow), var(--green-seafoam));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label {
  display: block;
  margin-top: .65rem;
  font-size: var(--text-sm);
  color: rgba(255,255,255,.8);
}

/* ====================== 10. SERVICES BENTO ========================== */
.services { background: var(--bone); }
.services__bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin-top: 2.5rem;
  list-style: none; padding: 0;
}
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  overflow: hidden;
}
/* border hairline accent */
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(20,184,166,.5), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: transparent;
}
.svc-card:hover::before { opacity: 1; }
.svc-card__title { font-size: var(--text-h3); color: var(--ink); position: relative; z-index: 1; }
.svc-card__desc { font-size: var(--text-sm); color: var(--text-2); position: relative; z-index: 1; }
.svc-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--teal);
  position: relative;
  z-index: 1;
  transition: gap .25s var(--ease);
}
.svc-card__link:hover { gap: .8em; color: var(--orange); }
.svc-card__link span { transition: transform .25s var(--ease); }
.svc-card__link:hover span { transform: translateX(3px); }

/* Featured Web Design card — visually elevated, spans 2x on larger grids */
.svc-card--feature {
  background: var(--grad-dark-mineral);
  color: #fff;
  border-color: transparent;
}
.svc-card--feature .svc-card__title { color: #fff; font-size: clamp(1.6rem, 2.5vw, 2.2rem); }
.svc-card--feature .svc-card__desc { color: rgba(255,255,255,.82); font-size: var(--text-body); }
.svc-card--feature .svc-card__link { color: var(--green-seafoam); }
.svc-card--feature .svc-card__link:hover { color: var(--teal-glow); }
.svc-card--feature::before { background: linear-gradient(135deg, rgba(110,231,183,.6), transparent 50%); }
/* Website mockup graphic inside the featured Web Design card */
.svc-card__mock {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: .5rem 0 .25rem;
}
.svc-card__mock svg {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}

/* ====================== 11. WEB DESIGN / RING GAUGE ================= */
.webdesign { background: var(--bone-alt); }
.webdesign__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.webdesign__copy { max-width: 46rem; }
.webdesign__body { margin-top: 1.1rem; color: var(--text-2); }
.webdesign__list {
  display: grid;
  gap: .65rem;
  margin: 1.4rem 0 1.8rem;
  list-style: none; padding: 0;
}
.webdesign__list li {
  position: relative;
  padding-left: 1.8rem;
  font-size: var(--text-sm);
  color: var(--ink-mid);
}
.webdesign__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .35em;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--grad-teal-aurora);
}
.webdesign__gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.ring-gauge {
  position: relative;
  width: 200px;
  height: 200px;
  display: grid;
  place-items: center;
}
.ring-gauge svg { width: 100%; height: 100%; }
.ring-gauge__track { stroke: var(--hairline); }
.ring-gauge__fill {
  stroke: var(--teal);
  stroke-linecap: round;
  /* conic-gradient feel via stroke + glow; dasharray from HTML (326.7, offset 6.5 ≈ 98%) */
  filter: drop-shadow(0 0 6px rgba(13,138,135,.5));
  transition: stroke-dashoffset 1.4s var(--ease);
}
/* Gauge fill animates from empty under html.js; full by default without JS */
.ring-gauge__num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
}
.ring-gauge__numline {
  display: flex;
  align-items: baseline;
  gap: .1rem;
}
.ring-gauge__num strong {
  font-size: 3rem;
  line-height: 1;
  background: var(--grad-teal-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ring-gauge__num span { font-size: 1.1rem; color: var(--text-faint); font-weight: 500; }
.ring-gauge__caption {
  font-size: var(--text-sm);
  color: var(--text-2);
  text-align: center;
  max-width: 22ch;
}

/* ====================== 12. TRIFECTA (STICKY PANELS) =============== */
.trifecta {
  position: relative;
  background: var(--bone);
  overflow: clip;
}
/* gradient mesh blob on trifecta */
.trifecta::before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: -12%; left: -8%;
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  background: var(--grad-teal-aurora);
  filter: blur(70px);
  opacity: .3;
  animation: mesh-morph 28s var(--ease) infinite reverse;
  pointer-events: none;
}
.trifecta__panels {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.5rem;
}
.tri-panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.tri-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--grad-spectrum);
}
.tri-panel__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .8rem;
}
.tri-panel__title { font-size: var(--text-h3); color: var(--ink); margin-bottom: .9rem; }
.tri-panel__body { color: var(--text-2); font-size: var(--text-body); }
.trifecta__close {
  margin-top: 2.25rem;
  font-size: var(--text-lede);
  font-weight: 500;
  color: var(--ink);
  max-width: 64ch;
}
.trifecta .btn { margin-top: 1.5rem; }

/* On large screens WITHOUT the JS crossfade, panels sit in a readable 3-col grid.
   The .tri-stacked class (added by JS only when the crossfade initializes)
   switches to a full-screen stacked sequence. If JS / GSAP is unavailable or
   reduced-motion is on, the class is never added, so this grid fallback stands. */
@media (min-width: 1024px) {
  .trifecta__panels:not(.tri-stacked) {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }

  /* Full-screen stacked crossfade: one card centered in the viewport at a time. */
  .trifecta__panels.tri-stacked {
    position: relative;
    grid-template-columns: 1fr;
    place-items: center;
    height: 100vh;
    margin-top: 0;
    gap: 0;
  }
  .trifecta__panels.tri-stacked .tri-panel {
    grid-area: 1 / 1;
    width: min(780px, 90vw);
    max-height: 86vh;
    overflow: hidden;
    padding: clamp(2.4rem, 4vw, 3.6rem);
    box-shadow: 0 40px 90px -30px rgba(28,27,41,.45);
    will-change: opacity, transform;
  }
  .trifecta__panels.tri-stacked .tri-panel__tag {
    font-size: var(--text-sm);
    margin-bottom: 1.1rem;
  }
  .trifecta__panels.tri-stacked .tri-panel__title {
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    line-height: 1.05;
    margin-bottom: 1.2rem;
  }
  .trifecta__panels.tri-stacked .tri-panel__body {
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    line-height: 1.7;
  }
  /* Scroll-progress dots injected by JS */
  .tri-progress {
    position: absolute;
    right: clamp(1rem, 3vw, 3rem);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: .7rem;
    z-index: 3;
  }
  .tri-progress__dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--hairline);
    transition: background .3s var(--ease), transform .3s var(--ease);
  }
  .tri-progress__dot.is-active {
    background: var(--orange);
    transform: scale(1.45);
  }
}

/* ====================== 13. CASE STUDIES (HORIZONTAL) ============== */
.cases { background: var(--bone-alt); overflow: hidden; }
/* Default: vertical stack — reads fine without JS. */
.cases__track {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.case {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
}
.case__head { display: flex; flex-direction: column; gap: .25rem; }
.case__client { font-size: var(--text-h3); color: var(--ink); }
.case__url {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--teal);
  width: fit-content;
}
.case__url:hover { text-decoration: underline; }
.case__meta { font-size: var(--text-sm); color: var(--text-faint); }
.case__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  list-style: none; padding: 0; margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
}
.case__stat { display: flex; flex-direction: column; gap: .2rem; }
.case__stat strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--teal);
}
.case__stat span { font-size: var(--text-xs); color: var(--text-faint); }
.case__kw { display: grid; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.case__kw li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-mid);
  padding: .5rem .75rem;
  background: var(--bone);
  border-radius: var(--r-sm);
}
.case__kw em {
  font-style: normal;
  font-weight: 600;
  color: var(--green-forest);
  background: rgba(16,185,129,.12);
  padding: .1rem .5rem;
  border-radius: var(--r-pill);
}
.case__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--orange);
}
.case__link:hover { gap: .8em; }
.cases .btn { margin-top: 1.75rem; }

/* On wide screens the track becomes a horizontal scroller (JS enhances).
   Without JS, native horizontal overflow scroll still works and is readable. */
@media (min-width: 1024px) {
  .cases__track {
    grid-auto-flow: column;
    grid-auto-columns: minmax(360px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
  }
  .case { scroll-snap-align: start; }
  .cases__track::-webkit-scrollbar { height: 8px; }
  .cases__track::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 999px; }
}

/* ====================== 14. INDUSTRIES (3D MARQUEE) =============== */
.industries { background: var(--bone); overflow: hidden; }
.industries__marquee {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  list-style: none; padding: 0;
}
.industries__marquee li { flex: none; }
.industries__marquee a {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-mid);
  white-space: nowrap;
  transition: transform .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.industries__marquee a:hover {
  color: #fff;
  background: var(--grad-teal-aurora);
  border-color: transparent;
  transform: translateY(-2px);
}

/* 3D perspective marquee under html.js — duplicated row scrolls, pauses on hover */
@media (min-width: 768px) {
  html.js .industries__marquee {
    flex-wrap: nowrap;
    perspective: 1000px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    overflow: hidden;
  }
  html.js .industries__marquee.is-marquee {
    transform: rotateX(14deg);
    transform-style: preserve-3d;
    animation: marquee-scroll 32s linear infinite;
    width: max-content;
  }
  html.js .industries__marquee.is-marquee:hover { animation-play-state: paused; }
}
@keyframes marquee-scroll {
  from { transform: rotateX(14deg) translateX(0); }
  to   { transform: rotateX(14deg) translateX(-50%); }
}

.industries__spotlights {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.spotlight {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  overflow: hidden;
}
.spotlight__title {
  font-size: var(--text-h3);
  color: var(--ink);
  margin-bottom: .85rem;
}
.spotlight__title::after {
  content: "";
  display: block;
  width: 2.5rem; height: 3px;
  margin-top: .6rem;
  background: var(--grad-spectrum);
  border-radius: 2px;
}
.spotlight__body { color: var(--text-2); font-size: var(--text-sm); }
.industries .btn { margin-top: 1.75rem; }

/* ====================== 15. PLATFORM (DARK NAVY) ================== */
.platform {
  position: relative;
  background: radial-gradient(120% 120% at 50% 0%, #1B2447 0%, #0F1530 55%, #0A0E22 100%);
  color: #fff;
  overflow: hidden;
}
.platform__particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* grid beam sweep */
.platform::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:url('/assets/image/download.png');
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000, transparent 75%);
  pointer-events: none;
}
.platform::after { /* beam sweep line */
  content: "";
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(15,219,213,.14), transparent);
  transform: translateX(-100%) skewX(-12deg);
  animation: beam-sweep 7s var(--ease) infinite;
  pointer-events: none;
}
@keyframes beam-sweep {
  0% { transform: translateX(-100%) skewX(-12deg); }
  55%, 100% { transform: translateX(200%) skewX(-12deg); }
}
.platform__title { color: #fff; }
.platform__lede { color: rgba(255,255,255,.72); }
.platform__grid {
  position: relative;
  z-index: 1;
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  list-style: none; padding: 0;
}
.feat-card {
  position: relative;
  padding: 1.6rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
  overflow: hidden;
}
.feat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(15,219,213,.5);
  background: rgba(255,255,255,.08);
}
.feat-card[data-spotlight]::after {
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(15,219,213,.22), transparent 60%);
}
.feat-card__title {
  font-size: var(--text-h3);
  color: #fff;
  margin-bottom: .6rem;
  position: relative; z-index: 1;
}
.feat-card__desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.74);
  position: relative; z-index: 1;
}

/* ====================== 16. LOCATIONS (PILL GRID) ================ */
.locations { background: var(--bone-alt); }
.locations__grid {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  list-style: none; padding: 0;
}
.locations__grid a {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--hairline);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-mid);
  transition: transform .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.locations__grid a:hover {
  color: var(--teal);
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

/* ====================== 17. WHY SCALZ (TRUST GRID) ============== */
.why { background: var(--bone); }
.why__grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  list-style: none; padding: 0;
}
.why-card {
  position: relative;
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  overflow: hidden;
}
.why-card::before {
  content: "";
  position: absolute;
  top: 0; left: 1.75rem; right: 1.75rem;
  height: 3px;
  background: var(--grad-spectrum);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.why-card:hover::before { opacity: 1; }
.why-card__title { font-size: clamp(1.1rem, 0.8vw + 0.8rem, 1.4rem); color: var(--ink); margin-bottom: .7rem; letter-spacing: -0.005em; overflow-wrap: break-word; }
.why-card__body { font-size: var(--text-sm); color: var(--text-2); }

/* ====================== 18. BLOG CARDS ========================= */
.blog { background: var(--bone-alt); }
.blog__grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  list-style: none; padding: 0;
}
.post {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.post__link { display: flex; flex-direction: column; height: 100%; }
.post__img {
  width: 100%;
  aspect-ratio: 890 / 664;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.post:hover .post__img { transform: scale(1.04); }
.post__tag {
  align-self: flex-start;
  margin: 1.1rem 1.25rem 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  padding: .25rem .65rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
}
.post__title {
  font-size: 1.2rem;
  color: var(--ink);
  margin: .8rem 1.25rem .4rem;
  line-height: 1.2;
}
.post:hover .post__title { color: var(--teal); }
.post__excerpt {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin: 0 1.25rem 1.4rem;
}
.blog .btn { margin-top: 1.75rem; }

/* ====================== 19. FAQ (DETAILS/SUMMARY) ============== */
.faq { background: var(--bone); }
.faq__list {
  margin-top: 2.25rem;
  display: grid;
  gap: .75rem;
  max-width: var(--maxw-narrow);
}
.faq__item {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq__item[open] { border-color: var(--teal); box-shadow: var(--shadow-card); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { /* custom marker, rotates smoothly */
  content: "";
  flex: none;
  width: 18px; height: 18px;
  background:
    linear-gradient(var(--teal), var(--teal)) center / 100% 2px no-repeat,
    linear-gradient(var(--teal), var(--teal)) center / 2px 100% no-repeat;
  transition: transform .35s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(135deg); }
.faq__q:hover { color: var(--teal); }
.faq__a {
  padding: 0 1.35rem 1.25rem;
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.65;
}

/* ====================== 20. CTA (FULL ORANGE) ================= */
.cta {
  background: var(--grad-orange-volt);
  color: #fff;
  overflow: hidden;
}
.cta__inner { max-width: var(--maxw-narrow); text-align: center; }
.cta__eyebrow { color: rgba(28,27,41,.85); justify-content: center; }
.cta__eyebrow::before { background: var(--ink); }
.cta__title { color: var(--ink); } /* ink on orange */
.cta__lede { color: rgba(28,27,41,.9); margin-inline: auto; }
.cta__benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1rem;
  margin: 1.75rem 0;
  list-style: none; padding: 0;
}
.cta__benefits li {
  position: relative;
  padding-left: 1.5rem;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink);
}
.cta__benefits li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--ink);
  font-weight: 800;
}
.cta__form { margin: 1.75rem auto 0; max-width: 540px; }
.cta__label {
  display: block;
  text-align: left;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .5rem;
}
.cta__row {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.cta__input {
  flex: 1;
  padding: .95rem 1.15rem;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(28,27,41,.25);
  background: rgba(255,255,255,.95);
  color: var(--ink);
  font-size: var(--text-body);
}
.cta__input::placeholder { color: var(--text-faint); }
.cta__input:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(28,27,41,.18);
}
.cta__submit { white-space: nowrap; }
.cta__fine {
  margin-top: 1.25rem;
  font-size: var(--text-sm);
  color: rgba(28,27,41,.82);
}
.cta__phone { font-weight: 700; color: var(--ink); text-decoration: underline; }

/* ====================== 21. FOOTER (DARK MINERAL) ============ */
.footer {
  position: relative;
  background: var(--grad-dark-mineral);
  color: rgba(255, 255, 255, .78);
  padding-top: var(--space-section-sm);
  padding-inline: 1.5rem; /* Content ko screens ki edges se bachane ke liye */
  z-index: 1;
}

/* Spectrum hairline at top */
.footer::before { 
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-spectrum);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr; /* Mobile par automatic single column */
  gap: 2.5rem;
  max-width: 1200px; /* Ek standard max-width taaki badi screen par fail na jaye */
  margin: 0 auto;
  padding-bottom: var(--space-section-sm);
}

/* Responsive desktop layout */
@media (min-width: 768px) {
  .footer__inner {
    grid-template-columns: 1.2fr 1fr; /* Desktop par Brand aur Links side-by-side ho jayenge */
  }
}

.footer__brand { 
  max-width: 40ch; 
}

.footer__logo-link {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1rem;
}

.footer__logo-img { 
  height:121px; 
  width: auto; 
  display: block; 
}

.footer__tagline { 
  font-size: var(--text-sm); 
  color: rgba(255, 255, 255, .7); 
}

.footer__contact { 
  margin-top: 1.1rem; 
  font-size: var(--text-sm); 
  line-height: 1.9; 
}

.footer__contact a { 
  color: var(--green-seafoam); 
  text-decoration: none; /* Default line hatane ke liye */
}

.footer__contact a:hover { 
  color: var(--teal-glow); 
  text-decoration: underline; 
}

.footer__contact span { 
  color: rgba(255, 255, 255, .7); 
}

/* Services section links */
.footer__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.footer__col ul { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  display: grid; 
  gap: .5rem; 
}

.footer__col a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  display: inline-block; /* Smooth padding animation ke liye */
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}

.footer__col a:hover { 
  color: var(--teal-glow); 
  padding-left: .3rem; 
}

/* Bottom Bar */
.footer__bar {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

@media (min-width: 768px) {
  .footer__bar {
    flex-direction: row;
    justify-content: space-between; /* Legal text left me aur Keywords right me perfectly align honge */
    align-items: center;
  }
}

.footer__legal, .footer__keywords {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, .55);
  margin: 0;
}

.footer__keywords { 
  font-family: var(--font-mono); 
  letter-spacing: .03em; 
}

/* ====================== 22. SCROLL-REVEAL ===== */
/* Content is ALWAYS visible by default. The entrance animation is driven by
   GSAP (gsap.from with immediateRender:false in js/main.js): GSAP sets
   opacity:0 inline only at the instant each element's ScrollTrigger fires,
   then animates to this natural visible state and clears the inline props on
   complete. If GSAP/JS is unavailable, content simply shows with no animation.
   These elements must NOT be opacity:0 by default, or gsap.from would tween
   0 -> 0 and the content would stay permanently hidden. */
html.js [data-reveal],
html.js .svc-card,
html.js .feat-card,
html.js .why-card,
html.js .post,
html.js .tri-panel,
html.js .spotlight,
html.js .stat,
html.js .rev-panel {
  opacity: 1;
  transform: none;
}

/* Ring gauge: empty under html.js until JS adds .is-visible on scroll-in,
   then the stroke-dashoffset transition (1.4s) fills it. Full by default
   without JS so the value is never hidden. */
html.js .ring-gauge__fill { stroke-dashoffset: 326.7; }
html.js .ring-gauge.is-visible .ring-gauge__fill { stroke-dashoffset: 6.5; }

/* ====================== RESPONSIVE BREAKPOINTS =============== */
/* 768px+ */
@media (min-width: 768px) {
  .services__bento { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .platform__grid { grid-template-columns: repeat(2, 1fr); }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .blog__grid { grid-template-columns: repeat(2, 1fr); }
  .revolution__panels { grid-template-columns: repeat(2, 1fr); }
  .industries__spotlights { grid-template-columns: 1fr; }
  .cta__row { flex-direction: row; align-items: center; }
  .footer__inner { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: 1 / -1; max-width: none; }
}

/* 1024px+ */
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; }
  .stats__grid { grid-template-columns: repeat(4, 1fr); }
  .services__bento { grid-template-columns: repeat(3, 1fr); }
  /* Featured Web Design card spans 2x */
  .svc-card--feature { grid-column: span 2; grid-row: span 2; }
  .webdesign__inner { grid-template-columns: 1.2fr .8fr; }
  .platform__grid { grid-template-columns: repeat(3, 1fr); }
  .why__grid { grid-template-columns: repeat(4, 1fr); }
  .blog__grid { grid-template-columns: repeat(3, 1fr); }
  .industries__spotlights { grid-template-columns: repeat(3, 1fr); }
  .footer__inner { grid-template-columns: repeat(5, 1fr); }
  .footer__brand { grid-column: 1 / -1; max-width: 62ch; }
  .footer__col[aria-label="Locations"] ul { grid-template-columns: repeat(2, 1fr); }
}

/* 1280px+ */
@media (min-width: 1280px) {
  .services__bento { grid-template-columns: repeat(4, 1fr); }
  .svc-card--feature { grid-column: span 2; grid-row: span 2; }
}

/* Mobile hero type shrink + simpler mega (≤767px) */
@media (max-width: 767px) {
  /* Nav is handled by the dedicated mobile-nav block below (≤900px). */
  .hero__title { font-size: clamp(1.9rem, 8.5vw, 2.9rem); }
  .rank-panel__foot { grid-template-columns: 1fr 1fr; }
  .footer__col[aria-label="Locations"] ul,
  .footer__col[aria-label="Services"] ul { grid-template-columns: 1fr 1fr; }
}

/* ===================== MOBILE NAV: hamburger + nested accordion (max 900px) ==
   Desktop hover mega-menus collapse into a full-height slide-in panel with a
   real hamburger toggle (injected by js/main.js) and tap-to-expand nested
   accordions. A fixed bottom CTA bar (Free Audit / Call Now) is also injected
   on these widths. */
.nav__toggle { display: none; }
.mobile-cta { display: none; }
body.nav-locked { overflow: hidden; }

@media (max-width: 900px) {
  .nav__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px; height: 44px;
    margin-left: auto;
    border-radius: 10px;
    background: transparent;
    border: 1px solid transparent;
    z-index: 906;
  }
  .nav__toggle-bar {
    display: block;
    width: 24px; height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .3s var(--ease), opacity .2s var(--ease), background .3s var(--ease);
  }
  #site-nav:not(.is-scrolled):not(.nav--menu-open) .nav__toggle-bar { background: #fff; }
  .nav--menu-open .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav--menu-open .nav__toggle-bar:nth-child(2) { opacity: 0; }
  .nav--menu-open .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav__inner { flex-wrap: nowrap; gap: .75rem; }
  .nav__actions { display: none; }
  .nav--menu-open,
  #site-nav.nav--menu-open,
  #site-nav.scrolled.nav--menu-open,
  .nav.is-scrolled.nav--menu-open {
    background: var(--bone) !important;
    border-bottom-color: var(--hairline);
    /* iOS Safari: backdrop-filter on an ancestor traps position:fixed children
       inside the nav bar instead of the viewport. Must be fully removed (and
       with no transition) the instant the menu opens, or the panel renders
       blank with the page showing through. */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    transition: none !important;
  }
  .nav--menu-open .nav__wordmark { color: var(--ink); }
  .nav--menu-open .nav__logo-pic--ink { display: block; }
  .nav--menu-open .nav__logo-pic--white { display: none; }

  .nav__menu {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0; bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: .5rem 1.15rem calc(1.6rem + env(safe-area-inset-bottom));
    background: var(--bone);
    border-top: 1px solid var(--hairline);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .32s var(--ease), visibility .32s var(--ease);
    z-index: 905;
  }
  .nav--menu-open .nav__menu { transform: translateX(0); visibility: visible; }

  .nav__item { width: 100%; border-bottom: 1px solid var(--hairline); position: relative; }
  .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 1.05rem .35rem;
    font-size: 1.06rem;
    border-radius: 0;
    color: var(--ink) !important;
    background: transparent !important;
  }
  .nav__item:has(.nav__mega) > .nav__link::after {
    content: "";
    width: 9px; height: 9px;
    margin-left: 1rem;
    border-right: 2px solid var(--ink-mid);
    border-bottom: 2px solid var(--ink-mid);
    transform: rotate(45deg);
    transition: transform .25s var(--ease);
    flex: none;
  }
  .nav__item--open:has(.nav__mega) > .nav__link::after { transform: rotate(-135deg); }

  .nav__mega,
  .nav__mega--wide {
    position: static;
    transform: none;
    inset: auto;
    /* !important: the base .nav__mega/.nav__mega--wide desktop rule (display:grid)
       otherwise wins the cascade for the --wide variant and keeps every collapsed
       submenu in layout (~900px each), making the mobile menu thousands of px tall
       so only the first item is visible. */
    display: none !important;
    grid-template-columns: 1fr;
    width: auto; min-width: 0; max-width: none;
    gap: 0;
    margin: 0;
    padding: 0 0 .7rem .35rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    pointer-events: auto;
  }
  .nav__mega::before, .nav__mega::after { display: none; }
  .nav__item--open .nav__mega { display: grid !important; visibility: visible !important; opacity: 1 !important; }
  /* Traditional vertical stack on mobile: one full-width link per row,
     category labels as subheaders. (Links are inline <a> by default; on
     desktop the grid group stacks them, but the mobile block group lets them
     flow side-by-side into ragged columns -- force display:block to fix.) */
  .nav__mega-group { display: block; gap: 0; margin: 0 0 .45rem; }
  .nav__mega-h {
    display: block; border: 0;
    border-bottom: 1px solid var(--hairline);
    padding: .85rem .9rem .4rem; margin: 0 0 .2rem;
  }
  .nav__mega-link {
    display: block; width: 100%;
    padding: .72rem .9rem .72rem 1.35rem;
    font-size: 1rem; border-radius: var(--r-sm);
  }
  .nav__mega-link:hover { padding-left: 1.35rem; }
  .nav__mega-cta, .nav__mega-foot { display: none; }

  .nav__menu-cta {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: 1.2rem .35rem .4rem;
    border-bottom: 0;
  }
  .nav__menu-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .95rem 1rem;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 1rem;
  }
  .nav__menu-cta-btn--audit { background: var(--orange); color: #fff; }
  .nav__menu-cta-btn--call { background: var(--ink); color: #fff; }

  .mobile-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 880;
    padding: .55rem .8rem calc(.55rem + env(safe-area-inset-bottom));
    background: rgba(245,243,238,.93);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -8px 30px -18px rgba(28,27,41,.5);
  }
  .mobile-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .85rem 1rem;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
    transition: transform .15s var(--ease), box-shadow .2s var(--ease);
  }
  .mobile-cta__btn svg { width: 18px; height: 18px; flex: none; }
  .mobile-cta__btn--audit { background: var(--orange); color: #fff; }
  .mobile-cta__btn--call { background: var(--ink); color: #fff; }
  .mobile-cta__btn:active { transform: translateY(1px); }
  body.nav-locked .mobile-cta { display: none; }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
}

/* ====================== 23. MOTION / PRINT / A11Y =========== */
/* prefers-reduced-motion: disable all decorative animation */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  body::before, body::after,
  .hero::before, .trifecta::before,
  .platform::after,
  .border-beam::before,
  .rank-panel__dot,
  html.js .industries__marquee.is-marquee { animation: none !important; }
  /* Ensure reveal-hidden content snaps visible without motion */
  html.js [data-reveal],
  html.js .svc-card, html.js .feat-card, html.js .why-card,
  html.js .post, html.js .tri-panel, html.js .spotlight,
  html.js .stat, html.js .rev-panel { opacity: 1 !important; transform: none !important; }
  html.js .ring-gauge__fill { stroke-dashoffset: 6.5 !important; }
}

/* Focus-visible states */
:focus-visible {
  outline: 3px solid var(--teal-bright);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible, .nav__cta:focus-visible {
  outline-color: var(--orange);
  outline-offset: 4px;
}
.revolution :focus-visible, .cta :focus-visible { outline-color: var(--ink); }

/* Selection color */
::selection { background: var(--teal-bright); color: #fff; }
::-moz-selection { background: var(--teal-bright); color: #fff; }

/* Print stylesheet basics */
@media print {
  body { background: #fff; color: #000; }
  .nav, .scroll-progress, .cursor-dot, .cursor-trail,
  .hero__canvas, .stats__fx, .platform__particles,
  body::before, body::after { display: none !important; }
  main > section { padding-block: 1.5rem; page-break-inside: avoid; }
  .revolution, .cta, .stats, .platform, .footer,
  .svc-card--feature { background: #fff !important; color: #000 !important; }
  .revolution *, .cta *, .stats *, .platform *, .footer * { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
  .faq__item { border: 1px solid #999; }
  .faq__item:not([open]) .faq__a { display: block; } /* show answers in print */
}

/* ==========================================================================
   PRELOADER — waveform splash that dissolves into the hero
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 18%, #16142a 0%, #0c0b14 60%, #08070f 100%);
  will-change: opacity, filter;
}
.preloader__wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* the wave lives in the lower 2/3 like the hero point-field */
}
.preloader__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(85% 60% at 50% 46%, rgba(12,11,20,.78) 0%, rgba(12,11,20,.30) 45%, rgba(12,11,20,0) 72%),
    linear-gradient(180deg, rgba(8,7,15,.55) 0%, rgba(8,7,15,0) 26%, rgba(8,7,15,0) 70%, rgba(8,7,15,.6) 100%);
}
.preloader__center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  padding: 1.5rem;
  transform: translateY(-2vh);
}
.preloader__logo {
  width: clamp(150px, 24vw, 220px);
  height: auto;
  filter: drop-shadow(0 0 26px rgba(15,219,213,.28));
  opacity: 0;
}
.preloader__status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(.62rem, 1.6vw, .74rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(15,219,213,.85);
  text-indent: .42em; /* balance the trailing tracking */
  opacity: 0;
}
.preloader__bar {
  position: relative;
  width: clamp(160px, 30vw, 260px);
  height: 2px;
  border-radius: 2px;
  background: rgba(245,243,238,.12);
  overflow: hidden;
  opacity: 0;
}
.preloader__bar-fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: linear-gradient(90deg, #0D8A87 0%, #0FDBD5 55%, #FF5C00 120%);
  box-shadow: 0 0 14px rgba(15,219,213,.55);
  transform-origin: left center;
  transition: right .25s linear;
}

/* ==========================================================================
   NAV INTRO — staggered entrance, armed by JS after the preloader clears
   ========================================================================== */
.nav.is-armed .nav__brand,
.nav.is-armed .nav__item,
.nav.is-armed .nav__actions > * {
  opacity: 0;
  will-change: transform, opacity;
}

/* Reduced motion: no splash animation, no nav stagger, no scroll lock games */
@media (prefers-reduced-motion: reduce) {
  .preloader { display: none !important; }
  html.is-preloading, html.is-preloading body { overflow: auto !important; }
  .nav.is-armed .nav__brand,
  .nav.is-armed .nav__item,
  .nav.is-armed .nav__actions > * { opacity: 1; }
}

/* GSAP owns the mega-menu motion when JS is active — drop the CSS transition
   so the two systems don't fight (avoids per-frame lag). */
#site-nav.mega-js .nav__mega { transition: none; }