/* ============================================================
   AUTOMATRIX v6 — Apple aesthetic · Hormozi copy
   UI/UX Pro Max · Motion patterns · 21st.dev
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --bg:          #000000;
  --bg-1:        #080808;
  --bg-2:        #0f0f0f;
  --bg-3:        #161616;

  --glass:       rgba(255,255,255,0.04);
  --glass-hover: rgba(255,255,255,0.07);
  --glass-bdr:   rgba(255,255,255,0.08);
  --glass-bdr-h: rgba(255,255,255,0.16);
  --glass-bdr-a: rgba(139,92,246,0.3);

  --purple:      #8B5CF6;
  --purple-light:#A78BFA;
  --purple-dim:  rgba(139,92,246,0.15);
  --purple-glow: rgba(139,92,246,0.4);
  --green:       #8B5CF6;
  --green-dim:   rgba(139,92,246,0.12);
  --green-glow:  rgba(139,92,246,0.35);

  --text:        #F5F5F7;
  --text-2:      #A1A1A6;
  --text-3:      #6E6E73;
  --text-4:      #3A3A3C;

  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius:      16px;
  --radius-lg:   24px;
  --radius-xl:   32px;

  /* Measured off the Framer build's CTA: an 8px corner and a 14px/16px box.
     Every button on the site resolves to these, so the corner stays constant
     whether the button is a hero CTA, a nav chip or the float bar. */
  --radius-btn:  8px;
  --btn-pad:     14px 16px;

  --blur:        blur(24px) saturate(180%);
  --blur-sm:     blur(12px) saturate(160%);

  /* Apple-style easing */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-apple:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  --t-fast:  150ms;
  --t-med:   300ms;
  --t-slow:  500ms;
  --t-xl:    700ms;
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
ul { list-style: none; }
button { background: none; border: none; cursor: pointer; font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.overline-tag {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple-light);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.overline-tag::before {
  content: '';
  display: block;
  width: 16px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.overline-tag.light { color: rgba(255,255,255,0.4); }

.statement-em {
  font-style: italic;
  background: linear-gradient(135deg, var(--purple-light) 0%, #c4b5fd 50%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── LAYOUT ──────────────────────────────────────────────── */
.shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
}

/* ── NOISE ───────────────────────────────────────────────── */
.noise-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* ── CURSOR GLOW ─────────────────────────────────────────── */
.cursor-glow {
  pointer-events: none;
  position: fixed;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.1) 0%, transparent 60%);
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* ── LOADER ──────────────────────────────────────────────── */
.home-loader {
  position: fixed; inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.7s var(--ease-out), visibility 0.7s;
}
.home-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.loader-logo { width: 48px; height: 48px; animation: loader-pulse 1.8s ease-in-out infinite; }
@keyframes loader-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.92)} }
.loader-bar { width: 160px; height: 1.5px; background: rgba(255,255,255,0.06); border-radius: 99px; overflow: hidden; }
.loader-fill { height: 100%; background: linear-gradient(90deg, var(--purple), var(--purple-light)); animation: loader-fill 2.5s var(--ease-out) forwards; }
@keyframes loader-fill { from{width:0} to{width:100%} }

/* ── NAV — Apple floating pill ───────────────────────────── */
.nav-wrap {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 1140px;
  z-index: 500;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 10px 20px;
  background: rgba(6,6,6,0.55);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-xl);
  transition: background var(--t-slow) var(--ease-apple),
              border-color var(--t-slow) var(--ease-apple),
              box-shadow var(--t-slow) var(--ease-apple);
}
.nav-wrap.scrolled .nav-inner {
  background: rgba(4,4,4,0.88);
  border-color: rgba(255,255,255,0.09);
  box-shadow: 0 2px 24px rgba(0,0,0,0.7), 0 0 0 0.5px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.04);
}

.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.brand-logo { width: 30px; height: 30px; }
.brand-wordmark {
  font-family: inherit; font-weight: 800; font-size: 0.88rem;
  letter-spacing: 0.12em; color: var(--text);
}

.nav-links { display: flex; align-items: center; gap: 1px; }
.nav-links a {
  font-size: 0.85rem; font-weight: 500; color: var(--text-3);
  padding: 7px 12px; border-radius: var(--radius-sm);
  transition: color var(--t-fast), background var(--t-fast);
  letter-spacing: 0.01em;
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.05); }

/* ── Services mega dropdown ──────────────────────────────── */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd-trigger {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 0.85rem; font-weight: 500; color: var(--text-3);
  padding: 7px 12px; border-radius: var(--radius-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-dd:hover .nav-dd-trigger, .nav-dd:focus-within .nav-dd-trigger { color: var(--text); background: rgba(255,255,255,0.05); }
.nav-dd-chev { opacity: 0.65; transition: transform var(--t-med) var(--ease-out); }
.nav-dd:hover .nav-dd-chev, .nav-dd:focus-within .nav-dd-chev { transform: rotate(180deg); }
/* invisible hover bridge so the menu doesn't drop while crossing the gap */
.nav-dd::after { content: ''; position: absolute; top: 100%; left: -24px; right: -24px; height: 18px; }
.nav-dd-menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(8px) scale(0.98); transform-origin: top center;
  width: 306px; padding: 8px;
  background: rgba(13,13,16,0.97); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,0.09); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
  display: flex; flex-direction: column; gap: 1px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
  z-index: 600;
}
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.nav-dd-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 13px; border-radius: 12px; color: var(--text-2); }
.nav-dd-item:hover { background: rgba(255,255,255,0.055); }
.nav-dd-item .ti { font-size: 0.86rem; font-weight: 600; color: var(--text); letter-spacing: 0.01em; }
.nav-dd-item .de { font-size: 0.72rem; font-weight: 400; color: var(--text-3); line-height: 1.35; }
/* GEO highlight — gold */
.nav-dd-geo {
  margin-bottom: 5px; padding: 12px 13px;
  background: linear-gradient(135deg, rgba(230,180,76,0.15), rgba(230,180,76,0.045));
  border: 1px solid rgba(230,180,76,0.34); border-radius: 14px;
}
.nav-dd-geo:hover { background: linear-gradient(135deg, rgba(230,180,76,0.24), rgba(230,180,76,0.08)); border-color: rgba(230,180,76,0.55); }
.nav-dd-geo .ti {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 0.9rem;
  background: linear-gradient(135deg, #F6D989 0%, #E6B44C 55%, #D19A32 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-dd-geo .de { color: rgba(230,180,76,0.78); }
.nav-dd-star { stroke: #E6B44C; flex-shrink: 0; }
.nav-dd-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 5px 6px; }
.nav-dd-all { text-align: center; color: var(--purple-light); font-size: 0.78rem; font-weight: 600; padding: 9px; border-radius: 10px; }
.nav-dd-all:hover { background: rgba(139,92,246,0.1); }
/* mobile GEO link */
.mobile-geo { color: #E6B44C !important; font-weight: 700 !important; }

.btn-nav-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.7);
  flex-shrink: 0;
}

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 7px; }
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--text); border-radius: 2px; transition: all var(--t-med) var(--ease-out); }

.mobile-menu {
  display: none; flex-direction: column; gap: 2px;
  padding: 10px 20px 18px;
  background: rgba(0,0,0,0.95); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-bdr); border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.mobile-menu.open { display: flex; animation: menu-in 0.3s var(--ease-out); }
@keyframes menu-in { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.mobile-menu a { padding: 10px 4px; color: var(--text-2); font-weight: 500; border-bottom: 1px solid var(--glass-bdr); font-size: 0.95rem; }
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--text); }
.mobile-cta { margin-top: 8px !important; text-align: center; background: var(--purple) !important; border-radius: var(--radius-btn) !important; padding: 11px 20px !important; font-weight: 600 !important; border-bottom: none !important; color: #fff !important; }

/* ── BUTTONS ─────────────────────────────────────────────── */
/* Buttons follow the Framer build: an 8px corner and a 14px/16px box, the same
   for every button rather than a scale of them. The old btn-xl and btn-lg
   pulled a side-by-side pair to different heights, radii and type sizes, which
   is what made the hero CTAs read as mismatched. Both are kept as no-ops so the
   markup that already carries them does not all have to change. */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--purple); color: #fff;
  font-weight: 600; font-size: 0.9rem;
  padding: var(--btn-pad); border-radius: var(--radius-btn);
  /* Framer puts the same White 10% hairline on its filled CTA. It also keeps
     this button on the same box model as .btn-ghost, which has a border: without
     it the ghost sits a pixel taller than the primary beside it. */
  border: 1px solid var(--glass-bdr);
  transition: opacity var(--t-med), transform var(--t-med) var(--ease-spring), box-shadow var(--t-med);
  cursor: pointer; white-space: nowrap;
}
.btn-primary:hover { opacity: 0.88; transform: scale(1.02); box-shadow: 0 8px 30px rgba(139,92,246,0.4); }
.btn-primary:active { transform: scale(0.98); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass); color: var(--text-2);
  font-weight: 600; font-size: 0.9rem;
  padding: var(--btn-pad); border-radius: var(--radius-btn);
  border: 1px solid var(--glass-bdr);
  transition: background var(--t-med), border-color var(--t-med), color var(--t-med), transform var(--t-med) var(--ease-spring);
  cursor: pointer; white-space: nowrap; backdrop-filter: var(--blur-sm);
}
.btn-ghost:hover { background: var(--glass-hover); border-color: var(--glass-bdr-h); color: var(--text); transform: scale(1.02); }

.btn-xl,
.btn-lg { padding: var(--btn-pad); font-size: 0.9rem; border-radius: var(--radius-btn); }
/* ── Liquid glass, extended to the content buttons ────────────────────────
   Same vocabulary as .btn-nav-cta rather than a second look: a tinted pane
   instead of a flat fill, a specular line along the top edge, a soft floor
   shadow inside the bottom, a bright rim, and a diagonal sheen that travels
   on hover. Purple-tinted for the same reason the nav CTA is - these sit on
   near-black, and a clear pane would simply disappear.

   The Framer geometry is untouched: 8px corner, 14px/16px box, hairline rim.
   Only the surface changes. */
.btn-primary,
.btn-ghost {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  -webkit-backdrop-filter: blur(18px) saturate(190%);
  backdrop-filter: blur(18px) saturate(190%);
}

.btn-primary {
  background:
    linear-gradient(158deg,
      rgba(178,142,255, .92) 0%,
      rgba(139, 92,246, .78) 46%,
      rgba(109, 60,220, .86) 100%);
  border-color: rgba(255,255,255,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -14px 22px -16px rgba(0,0,0,.6),
    0 6px 22px rgba(109,60,220,.36),
    0 1px 2px rgba(0,0,0,.35);
}

.btn-primary:hover {
  /* The base rule dims this to 0.88; glass reads better held at full opacity
     with the rim and floor doing the state change instead. */
  opacity: 1;
  border-color: rgba(255,255,255,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -14px 22px -16px rgba(0,0,0,.55),
    0 10px 30px rgba(109,60,220,.5),
    0 1px 2px rgba(0,0,0,.35);
}

/* Neutral pane. The ghost sits beside the primary, so it takes the same
   layering with the tint pulled out. */
.btn-ghost {
  background:
    linear-gradient(158deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.05) 46%,
      rgba(255,255,255,.07) 100%);
  border-color: rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -14px 22px -16px rgba(0,0,0,.5),
    0 4px 16px rgba(0,0,0,.3);
}

.btn-ghost:hover {
  background:
    linear-gradient(158deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.09) 46%,
      rgba(255,255,255,.12) 100%);
  border-color: rgba(255,255,255,.3);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -14px 22px -16px rgba(0,0,0,.45),
    0 6px 22px rgba(0,0,0,.36);
}

/* The sheen. Parked off to the left, sweeps across on hover, matching the
   nav CTA's timing so the two read as one component. */
.btn-primary::after,
.btn-ghost::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg,
    transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left 620ms var(--ease-out);
  pointer-events: none;
  z-index: -1;
}

.btn-primary:hover::after,
.btn-ghost:hover::after { left: 130%; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary::after,
  .btn-ghost::after { transition: none; }
}

/* .btn-glow layered the outer bloom via box-shadow, which the glass rules above
   would otherwise replace outright. Re-stated here so glow buttons keep both
   the glass and the bloom. */
.btn-glow { box-shadow: 0 0 28px rgba(139,92,246,0.35); }
.btn-glow:hover { box-shadow: 0 0 48px rgba(139,92,246,0.55); }

.btn-primary.btn-glow {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -14px 22px -16px rgba(0,0,0,.6),
    0 6px 22px rgba(109,60,220,.36),
    0 0 34px rgba(139,92,246,.4);
}

.btn-primary.btn-glow:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -14px 22px -16px rgba(0,0,0,.55),
    0 10px 30px rgba(109,60,220,.5),
    0 0 52px rgba(139,92,246,.6);
}

/* ── FLOAT BAR ───────────────────────────────────────────── */
.float-bar {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(100px);
  opacity: 0; z-index: 400;
  transition: transform 0.55s var(--ease-out), opacity 0.55s var(--ease-out);
  pointer-events: none;
  width: max-content; max-width: calc(100vw - 40px);
}
.float-bar.visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.float-bar-inner {
  display: flex; align-items: center; gap: 14px; padding: 11px 16px;
  background: rgba(0,0,0,0.88); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-bdr-h);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(255,255,255,0.06);
  font-size: 0.86rem; color: var(--text-2);
}
.float-bar-inner strong { color: var(--text); }
.float-pulse { width: 7px; height: 7px; background: var(--green); border-radius: 50%; flex-shrink: 0; animation: pulse-ring 2s ease-in-out infinite; }
@keyframes pulse-ring { 0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,0.5)} 50%{box-shadow:0 0 0 5px rgba(139,92,246,0)} }
.float-bar-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--purple); color: #fff; font-weight: 600; font-size: 0.8rem; padding: 6px 13px; border-radius: var(--radius-btn); white-space: nowrap; transition: opacity var(--t-fast); }
.float-bar-btn:hover { opacity: 0.85; }
.float-bar-btn-book { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: var(--text-2); }
.float-bar-btn-book:hover { background: rgba(255,255,255,0.06); color: var(--text); opacity: 1; }

/* ── REVEAL ANIMATIONS ──────────────────────────────────────
   Matched to the Framer pages so the two halves of the site do not enter
   differently. Pulled from the mirror's appearAnimationsContent block: initial
   opacity 0.001 with y:15, animating on a spring with bounce 0 over 1s. A
   bounce-0 spring has no overshoot, so an expo-out curve of the same duration
   is indistinguishable. The old 24px rise with a 0.98 scale was noticeably
   heavier and shorter. */
/* The hide state is gated on html.js (set by a one-line inline script in the
   head). Without JS, or before script.js has run, every element paints in its
   final position. This keeps LCP and FCP tied to the HTML, not to the JS chain. */
html.js .reveal-el, html.js [data-reveal] {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1),
              transform 1s cubic-bezier(.16, 1, .3, 1);
}
html.js .reveal-el.visible, html.js [data-reveal].visible {
  opacity: 1;
  transform: translateY(0);
}
/* Above the fold never waits for JS. The hero is the LCP element on every
   inner page, so it is excluded from the reveal entirely. */
html.js .page-hero .reveal-el, html.js .page-hero [data-reveal],
html.js .contact-hero .reveal-el, html.js .av-hero .reveal-el,
html.js body.v2 .page-hero .reveal-el, html.js body.v2 .contact-hero .reveal-el {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
}

/* ── HERO — photo background variant ─────────────────────── */
.hero.hero-photo {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}
.hero-photo-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  background: #050505;
  z-index: 0;
}
.hero-photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(8,5,15,.81) 0%,
    rgba(10,6,20,.72) 34%,
    rgba(20,10,35,.42) 62%,
    rgba(10,6,18,.53) 100%);
  z-index: 1;
}
.hero-photo::after { display: none; }

.hero-photo-inner {
  max-width: 620px !important;
  /* .shell centers itself with margin:0 auto — undo that here so this
     narrower box hugs the left edge instead of floating in the middle. */
  margin-left: clamp(24px, 6vw, 90px) !important;
  margin-right: auto !important;
  padding: 0 !important;
  padding-top: clamp(140px, 20vh, 210px) !important;
  flex: 1;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.hero-photo .hero-h1 { font-size: clamp(2.8rem, 5.6vw, 4.8rem); }
.hero-photo .hero-sub { margin: 24px 0 36px; max-width: 480px; }

/* Glossy pill buttons (Uiverse.io / Codecite "fancy button"), scoped to the
   hero. Both CTAs share the same shape and shine mechanics; the secondary
   button just swaps the gradient/shine custom properties for a neutral set. */
.hero-fancy-btn {
  --fancy-button-gradient-0: #8d49fd;
  --fancy-button-gradient-50: #7f56f3;
  --fancy-button-gradient-100: #5691f3;
  --fancy-button-inner-shadow-top: rgba(233, 209, 255, 0.2);
  --fancy-button-inner-shadow-top-lg: rgba(9, 12, 60, 0.1);
  --fancy-button-inner-shadow-bottom: rgba(137, 222, 246, 0.3);
  --fancy-button-shine-top: #e9d1ff;
  --fancy-button-shine-bottom: #adfff9;
  display: inline-block;
  font-weight: 500;
  font-size: 15px;
  line-height: 21px;
  text-shadow: 0px 0.5px 0.5px rgba(0, 0, 0, 0.2);
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  z-index: 1;
  border-radius: 25px;
  color: #fff;
  background-image: linear-gradient(to bottom,
    var(--fancy-button-gradient-0) 0%,
    var(--fancy-button-gradient-50) 50%,
    var(--fancy-button-gradient-100) 100%);
  box-shadow:
    0px 4px 12px rgba(9, 12, 60, 0.15),
    0px 2px 8px rgba(9, 12, 60, 0.15),
    0px 1px 3px var(--fancy-button-inner-shadow-top-lg),
    inset 0px 1px 1px var(--fancy-button-inner-shadow-top),
    inset 0px -1px 3px var(--fancy-button-inner-shadow-bottom);
}
.hero-fancy-btn-secondary {
  --fancy-button-gradient-0: #3a3a42;
  --fancy-button-gradient-50: #2b2b32;
  --fancy-button-gradient-100: #1c1c21;
  --fancy-button-inner-shadow-top: rgba(255, 255, 255, 0.16);
  --fancy-button-inner-shadow-top-lg: rgba(9, 12, 60, 0.1);
  --fancy-button-inner-shadow-bottom: rgba(255, 255, 255, 0.12);
  --fancy-button-shine-top: #e6e6ea;
  --fancy-button-shine-bottom: #cfcfd6;
}
.hero-fancy-btn:before,
.hero-fancy-btn:after {
  content: "";
  position: absolute;
  border-radius: inherit;
  will-change: transform;
}
.hero-fancy-btn:before {
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--fancy-button-shine-top);
  width: 96px;
  height: 6px;
  top: -3px;
  opacity: 0.6;
  filter: blur(6px);
  transition: opacity 0.25s;
}
.hero-fancy-btn:after {
  inset: 0;
  background-size: cover;
  z-index: 2;
  opacity: 0.3;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero-fancy-btn-inner {
  display: block;
  padding: 15px 28px;
  border-radius: inherit;
  overflow: hidden;
  position: relative;
  background-image: linear-gradient(to bottom, var(--fancy-button-shine-top), transparent 8px);
  background-position: 0 -6px;
  background-repeat: no-repeat;
  z-index: 1;
}
.hero-fancy-btn-inner:before,
.hero-fancy-btn-inner:after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background-color: var(--fancy-button-shine-bottom);
  transition: opacity 0.25s, transform 0.25s;
  will-change: transform;
}
.hero-fancy-btn-inner:before {
  width: 92px;
  height: 8px;
  bottom: -4px;
  opacity: 0.75;
  filter: blur(6px);
}
.hero-fancy-btn-inner:after {
  width: 112px;
  height: 1px;
  bottom: 0;
  opacity: 0.9;
  filter: blur(1px);
}
.hero-fancy-btn:hover .hero-fancy-btn-inner:before {
  opacity: 0.8;
  transform: translateX(-50%) scale(1.25);
}
.hero-fancy-btn:hover .hero-fancy-btn-inner:after { opacity: 1; }

/* Thin horizontal grid lines — removed (caused visible lines on background) */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* Bottom fade — flows into ticker */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  z-index: 3;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 4;
  padding-top: clamp(110px, 18vh, 170px);
  padding-bottom: 80px;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--purple-light);
  background: rgba(139,92,246,0.09); border: 1px solid rgba(139,92,246,0.2);
  border-radius: 99px; padding: 6px 14px 6px 10px;
  margin-bottom: 32px; backdrop-filter: var(--blur-sm); width: fit-content;
}
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green-glow); animation: pulse-ring 2.5s ease-in-out infinite; }

.hero-h1 {
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: 28px;
  color: var(--text);
}
.h1-gradient {
  background: linear-gradient(135deg, var(--purple-light) 0%, #c4b5fd 50%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── HERO WORD CYCLE — "We Create ___" (typewriter) ─────────── */
.hero-word-wrap {
  display: inline-block;
}
.hero-word-slot {
  display: inline-block;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: baseline;
}
.hero-word-cursor {
  display: inline-block;
  width: 0.06em;
  height: 0.82em;
  margin-left: 0.07em;
  vertical-align: baseline;
  background: var(--purple-light);
  animation: hero-cursor-blink 0.9s step-end infinite;
}
@keyframes hero-cursor-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero-word-cursor { display: none; }
}

.hero-sub {
  font-size: clamp(0.98rem, 1.8vw, 1.15rem);
  line-height: 1.78;
  color: var(--text-2);
  max-width: 560px;
  margin-bottom: 40px;
}

/* ── HERO CTA BUTTON — Hormozi-style ────────────────────── */
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; align-items: center; }

.btn-cta-hero {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #7c3aed 0%, var(--purple) 50%, #6d28d9 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 0;
  border-radius: var(--radius-btn);
  box-shadow: 0 0 0 1px rgba(139,92,246,0.5), 0 8px 32px rgba(139,92,246,0.4);
  transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med);
  cursor: pointer;
  text-decoration: none;
}
.btn-cta-hero:hover {
  transform: scale(1.03) translateY(-2px);
  box-shadow: 0 0 0 1px rgba(139,92,246,0.7), 0 12px 40px rgba(139,92,246,0.55);
}
.btn-cta-hero:active { transform: scale(0.98); }

.btn-cta-text {
  padding: 15px 22px;
  position: relative;
  z-index: 2;
  letter-spacing: 0.01em;
}
.btn-cta-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 100%;
  background: rgba(0,0,0,0.22);
  border-left: 1px solid rgba(255,255,255,0.12);
  padding: 15px 0;
  position: relative;
  z-index: 2;
  transition: background var(--t-fast);
}
.btn-cta-hero:hover .btn-cta-arrow { background: rgba(0,0,0,0.32); }
.btn-cta-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: shimmer 3.5s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  60%  { background-position: -200% 0; }
  100% { background-position: -200% 0; }
}

/* ── HERO TRUST ROW ──────────────────────────────────────── */
.hero-trust-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 0;
}
.trust-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 24px 0 0;
}
.trust-stat:first-child { padding-left: 0; }
.trust-stat strong {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.03em;
}
.trust-stat span {
  font-size: 0.72rem;
  color: var(--text-3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.trust-divider {
  width: 1px;
  height: 32px;
  background: var(--glass-bdr);
  margin: 0 24px 0 0;
  flex-shrink: 0;
}

/* ── TICKER ──────────────────────────────────────────────── */
.ticker-wrap {
  overflow: hidden;
  border-top: 1px solid var(--glass-bdr);
  border-bottom: 1px solid var(--glass-bdr);
  padding: 14px 0;
  position: relative;
  background: var(--bg-1);
}
.ticker-wrap::before, .ticker-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.ticker-wrap::before { left: 0; background: linear-gradient(to right, var(--bg-1), transparent); }
.ticker-wrap::after  { right: 0; background: linear-gradient(to left, var(--bg-1), transparent); }
.ticker-track { display: flex; gap: 30px; animation: ticker 40s linear infinite; white-space: nowrap; width: max-content; }
.ticker-track span { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.ticker-track .tick-sep { color: var(--purple); opacity: 0.4; font-size: 0.5rem; align-self: center; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── APPLE STATEMENT SECTION ─────────────────────────────── */
.apple-statement {
  padding: clamp(100px, 16vw, 180px) 0;
  background: var(--bg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.apple-statement::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, rgba(139,92,246,0.07) 0%, transparent 65%);
  pointer-events: none;
}
.apple-statement .shell {
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}

.apple-statement-line {
  font-family: inherit;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--text-3);
  transition: color 0.6s var(--ease-apple);
  display: block;
}
.apple-statement-line.visible { color: var(--text); }
.apple-statement-line.apple-statement-accent.visible {
  background: linear-gradient(135deg, var(--purple-light), #c4b5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Line-by-line reveal override */
html.js .reveal-line {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-apple), transform 0.7s var(--ease-apple), color 0.6s var(--ease-apple);
}
html.js .reveal-line.visible { opacity: 1; transform: translateY(0); }

.apple-statement-sub {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--text-2);
  line-height: 1.75;
  max-width: 640px;
  text-align: center;
}

/* ── STATS — Apple-style massive numbers ─────────────────── */
.stats-section {
  padding: clamp(60px, 8vw, 80px) 0 clamp(80px, 12vw, 120px);
  background: var(--bg-1);
  border-top: 1px solid var(--glass-bdr);
  border-bottom: 1px solid var(--glass-bdr);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--glass-bdr);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 52px 20px;
  background: var(--bg-1); text-align: center;
  position: relative; overflow: hidden;
  transition: background var(--t-med);
  cursor: default;
}
.stat-item::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 110%, rgba(139,92,246,0.08) 0%, transparent 70%);
  opacity: 0; transition: opacity var(--t-slow);
}
.stat-item:hover::after { opacity: 1; }
.stat-item:hover { background: var(--bg-2); }

.stat-num {
  font-family: inherit;
  font-size: clamp(2.6rem, 4.5vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.75) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label { font-size: 0.8rem; font-weight: 700; color: var(--text-2); letter-spacing: -0.01em; margin-top: 2px; }
.stat-sub { font-size: 0.72rem; color: var(--text-3); letter-spacing: 0.02em; }
.stat-divider { display: none; }

/* ── PROBLEM SECTION ─────────────────────────────────────── */
.problem-section {
  padding: clamp(80px, 12vw, 150px) 0;
  background: var(--bg);
}
.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(48px, 7vw, 100px);
  align-items: start;
}
.problem-left { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 24px; }
.problem-h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-top: 14px;
}
.problem-p { font-size: 1.05rem; color: var(--text-2); line-height: 1.7; }

.pain-list { display: flex; flex-direction: column; gap: 2px; }
.pain-item {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 24px 22px;
  border-bottom: 1px solid var(--glass-bdr);
  transition: background var(--t-med), border-color var(--t-med), opacity 0.5s var(--ease-apple), transform 0.5s var(--ease-apple);
  border-radius: var(--radius);
  opacity: 0; transform: translateX(-16px);
}
.pain-item.visible { opacity: 1; transform: translateX(0); }
.pain-item:last-child { border-bottom: none; }
.pain-item:hover { background: var(--glass); }
.pain-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.15);
  border-radius: var(--radius-sm); color: #f87171;
  margin-top: 2px;
}
.pain-item strong { display: block; font-size: 1rem; font-family: inherit; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.pain-item p { font-size: 0.9rem; color: var(--text-2); line-height: 1.65; margin: 0; }

/* ── SERVICES BENTO ──────────────────────────────────────── */
.services-overview {
  padding: clamp(80px, 12vw, 150px) 0;
  background: var(--bg-1);
  position: relative;
  overflow: hidden;
}
.services-overview::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.06) 0%, transparent 65%);
  pointer-events: none;
}

/* Wave background — fills section behind bento grid */
.wave-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 1;
}
.wave-bg svg { display: block; }

/* Fade top/bottom so wave blends into section edges */
.wave-bg::before,
.wave-bg::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 120px;
  z-index: 1;
  pointer-events: none;
}
.wave-bg::before {
  top: 0;
  background: linear-gradient(to bottom, var(--bg-1), transparent);
}
.wave-bg::after {
  bottom: 0;
  background: linear-gradient(to top, var(--bg-1), transparent);
}

/* Ensure content sits above wave layer */
.services-overview .shell {
  position: relative;
  z-index: 1;
}

.section-head {
  text-align: center; max-width: 680px; margin: 0 auto 64px;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.section-h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.035em; }
.section-sub { font-size: 1.05rem; color: var(--text-2); line-height: 1.72; }

/* Bento grid — 21st.dev layout */
.services-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.svc-card {
  position: relative; padding: 28px;
  background: var(--bg-2); border: 1px solid var(--glass-bdr);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  text-decoration: none; color: inherit;
  transition: background var(--t-med), border-color var(--t-med),
              transform var(--t-slow) var(--ease-spring), box-shadow var(--t-slow);
  transform-style: preserve-3d;
  cursor: pointer;
}
.svc-card.svc-featured { grid-column: span 2; }
.svc-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(139,92,246,0.1) 0%, transparent 55%);
  opacity: 0; transition: opacity var(--t-med);
}
.svc-card:hover::before { opacity: 1; }
.svc-card:hover {
  background: var(--bg-3); border-color: rgba(139,92,246,0.25);
  transform: translateY(-5px) scale(1.005);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(139,92,246,0.1);
}
.svc-icon {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.15);
  border-radius: var(--radius); color: var(--purple-light); flex-shrink: 0;
  transition: background var(--t-med), transform var(--t-med) var(--ease-spring);
}
.svc-card:hover .svc-icon { background: rgba(139,92,246,0.18); transform: scale(1.1) rotate(-4deg); }
.svc-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); letter-spacing: -0.015em; }
.svc-card.svc-featured h3 { font-size: 1.3rem; }
.svc-card p { font-size: 0.875rem; color: var(--text-2); line-height: 1.65; flex: 1; }
.svc-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.8rem; font-weight: 600; color: var(--purple-light);
  margin-top: auto; letter-spacing: 0.01em;
  transition: gap var(--t-fast), color var(--t-fast);
}
.svc-card:hover .svc-link { gap: 9px; color: #c4b5fd; }
.svc-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--green-dim); border: 1px solid rgba(139,92,246,0.2);
  border-radius: 99px; padding: 3px 10px;
  font-size: 0.68rem; font-weight: 700; color: var(--green);
  letter-spacing: 0.07em; text-transform: uppercase; width: fit-content;
}
.svc-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.services-cta { margin-top: 40px; text-align: center; }

/* ── PROCESS — Apple 3-step ──────────────────────────────── */
.process-section {
  padding: clamp(80px, 12vw, 150px) 0;
  background: var(--bg);
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.process-step {
  padding: 40px 32px;
  background: var(--bg-2); border: 1px solid var(--glass-bdr);
  border-radius: var(--radius-xl); position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 16px;
  transition: background var(--t-med), border-color var(--t-med), transform var(--t-slow) var(--ease-spring), opacity 0.6s var(--ease-apple);
  opacity: 0; transform: translateY(28px) scale(0.98);
}
.process-step.visible { opacity: 1; transform: translateY(0) scale(1); }
.process-step:hover { background: var(--bg-3); border-color: var(--glass-bdr-h); transform: translateY(-5px); }
.process-step::before {
  content: '';
  position: absolute; top: -1px; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,0.4), transparent);
}
.process-num {
  font-family: inherit;
  font-size: 4.5rem; font-weight: 800; letter-spacing: -0.06em;
  line-height: 1; color: rgba(139,92,246,0.12);
  margin-bottom: -8px;
}
.process-line {
  width: 40px; height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--purple-light));
  border-radius: 99px;
  margin-bottom: 4px;
}
.process-step h3 { font-size: 1.25rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.process-step > p { font-size: 0.9rem; color: var(--text-2); line-height: 1.7; }
.process-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.process-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.85rem; color: var(--text-2);
}
.process-list li::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--purple-light); flex-shrink: 0;
}

/* 4-column process grid */
.process-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* "Book your call" button inside step 01 */
.process-book-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding: 10px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--purple-light);
  background: var(--purple-dim);
  border: 1px solid rgba(139,92,246,0.25);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.process-book-btn:hover {
  background: rgba(139,92,246,0.22);
  border-color: rgba(139,92,246,0.45);
  transform: translateY(-2px);
}

/* ── BOOK-A-CALL / CALENDAR SECTION ──────────────────────── */
.book-cal-section {
  padding: clamp(80px, 12vw, 140px) 0;
  background: var(--bg-1);
  border-top: 1px solid var(--glass-bdr);
}
.book-cal-inner {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.book-cal-left {
  position: sticky;
  top: 90px;
}
.book-cal-h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 16px 0 20px;
  color: var(--text);
}
.book-cal-h2 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--purple-light) 0%, #c4b5fd 50%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.book-cal-sub {
  font-size: 0.98rem;
  line-height: 1.78;
  color: var(--text-2);
  margin-bottom: 36px;
}
.book-cal-items {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.book-cal-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.book-cal-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--purple-dim);
  border: 1px solid rgba(139,92,246,0.18);
  display: flex; align-items: center; justify-content: center;
  color: var(--purple-light);
  flex-shrink: 0;
  margin-top: 2px;
}
.book-cal-item strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 3px;
  font-weight: 600;
}
.book-cal-item p {
  font-size: 0.82rem;
  color: var(--text-3);
  line-height: 1.6;
  margin: 0;
}
.book-cal-widget-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.book-cal-widget-label > span:first-child {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-3);
}
.book-cal-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--purple-light);
  background: var(--purple-dim);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 99px;
  padding: 4px 10px;
}
.book-cal-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--purple-light);
  animation: pulse-ring 2s ease-in-out infinite;
}
.book-cal-widget-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--glass-bdr);
  box-shadow: 0 0 60px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(255,255,255,0.04);
  background: #000;
}

/* ── BUILD MODEL ─────────────────────────────────────────── */
.build-model-section {
  padding: clamp(80px, 12vw, 150px) 0;
  background: var(--bg-1);
  border-top: 1px solid var(--glass-bdr);
}
.build-model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.build-card {
  padding: 44px; background: var(--bg-2); border: 1px solid var(--glass-bdr);
  border-radius: var(--radius-xl); display: flex; flex-direction: column; gap: 28px;
  position: relative; overflow: hidden;
  transition: background var(--t-med), border-color var(--t-med), transform var(--t-slow) var(--ease-spring), box-shadow var(--t-slow);
  transform-style: preserve-3d;
}
.build-card:hover { background: var(--bg-3); border-color: var(--glass-bdr-h); transform: translateY(-4px); }
.build-card.featured { background: linear-gradient(145deg, rgba(139,92,246,0.1) 0%, var(--bg-2) 60%); border-color: rgba(139,92,246,0.25); }
.build-card.featured:hover { border-color: rgba(139,92,246,0.45); box-shadow: 0 24px 60px rgba(139,92,246,0.15); }
.build-card::before { content: ''; position: absolute; top: -1px; left: 30%; right: 30%; height: 1px; background: linear-gradient(90deg, transparent, var(--glass-bdr-h), transparent); }
.build-card.featured::before { background: linear-gradient(90deg, transparent, rgba(139,92,246,0.5), transparent); }
.build-featured-tag { position: absolute; top: 20px; right: 20px; background: var(--purple); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; }
.build-badge { display: inline-flex; padding: 4px 11px; border-radius: 99px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; width: fit-content; }
.build-badge.one-time { background: rgba(255,255,255,0.05); border: 1px solid var(--glass-bdr); color: var(--text-3); }
.build-badge.saas { background: var(--purple-dim); border: 1px solid rgba(139,92,246,0.3); color: var(--purple-light); }
.build-card-top { display: flex; flex-direction: column; gap: 12px; }
.build-card-top h3 { font-size: 1.6rem; font-weight: 800; }
.build-card-top p { color: var(--text-2); line-height: 1.7; font-size: 0.93rem; }
.build-list { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.build-list li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text-2); }
.build-list svg { flex-shrink: 0; }
.build-btn { margin-top: auto; width: 100%; justify-content: center; }

/* ── GRAND SLAM OFFER — Hormozi ──────────────────────────── */
.offer-section {
  position: relative;
  padding: clamp(80px, 12vw, 150px) 0;
  background: var(--bg);
  overflow: hidden;
}
.offer-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(100px); }
.offer-orb-a { width: 600px; height: 600px; background: radial-gradient(circle, rgba(139,92,246,0.14) 0%, transparent 65%); top: -150px; left: -180px; }
.offer-orb-b { width: 500px; height: 500px; background: radial-gradient(circle, rgba(139,92,246,0.07) 0%, transparent 65%); bottom: -120px; right: -120px; }

.offer-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: start;
  margin-top: 8px;
}

.offer-stack-col { display: flex; flex-direction: column; gap: 10px; }
.offer-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  background: var(--bg-2); border: 1px solid var(--glass-bdr);
  border-radius: var(--radius);
  transition: background var(--t-med), border-color var(--t-med), transform var(--t-med) var(--ease-spring);
}
.offer-item:hover { background: var(--bg-3); border-color: var(--glass-bdr-h); transform: translateX(4px); }
.offer-item-left { display: flex; align-items: flex-start; gap: 14px; }
.offer-check {
  width: 28px; height: 28px; flex-shrink: 0;
  background: var(--green-dim); border: 1px solid rgba(139,92,246,0.25);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--green); font-size: 0.75rem; font-weight: 800;
}
.offer-item-left div { display: flex; flex-direction: column; gap: 3px; }
.offer-item-left strong { font-size: 0.92rem; color: var(--text); font-family: inherit; font-weight: 600; }
.offer-item-left span { font-size: 0.82rem; color: var(--text-3); line-height: 1.45; }
.offer-value { font-family: inherit; font-size: 0.88rem; font-weight: 700; color: var(--text-4); text-decoration: line-through; white-space: nowrap; flex-shrink: 0; }

.offer-total {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px; margin-top: 6px;
  background: rgba(139,92,246,0.07); border: 1px solid rgba(139,92,246,0.2);
  border-radius: var(--radius);
}
.offer-total strong { font-size: 1rem; color: var(--text); display: block; margin-bottom: 3px; }
.offer-total span { font-size: 0.82rem; color: var(--text-3); }
.offer-total-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.offer-total-was { font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--text-4); text-decoration: line-through; }
.offer-total-free { font-family: inherit; font-size: 2rem; font-weight: 800; color: var(--green); line-height: 1; }

.offer-cta-col { position: sticky; top: 120px; }
.offer-cta-card {
  padding: 36px;
  background: var(--bg-2); border: 1px solid var(--glass-bdr);
  border-radius: var(--radius-xl);
  display: flex; flex-direction: column; gap: 24px;
  position: relative; overflow: hidden;
}
.offer-cta-card::before {
  content: '';
  position: absolute; top: -1px; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,0.5), transparent);
}
.offer-cta-top { display: flex; flex-direction: column; gap: 14px; }
.offer-cta-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green-dim); border: 1px solid rgba(139,92,246,0.2);
  border-radius: 99px; padding: 5px 12px;
  font-size: 0.72rem; font-weight: 700; color: var(--green);
  letter-spacing: 0.06em; text-transform: uppercase; width: fit-content;
}
.offer-cta-card h3 { font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: var(--text); }
.offer-cta-card p { font-size: 0.9rem; color: var(--text-2); line-height: 1.68; }

.offer-guarantee {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px; background: var(--bg-3); border: 1px solid var(--glass-bdr);
  border-radius: var(--radius);
}
.guarantee-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--green-dim); border: 1px solid rgba(139,92,246,0.2);
  border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
  color: var(--green);
}
.offer-guarantee strong { display: block; font-size: 0.92rem; color: var(--text); margin-bottom: 5px; }
.offer-guarantee p { font-size: 0.83rem; color: var(--text-2); line-height: 1.6; margin: 0; }

.offer-cta-btn { width: 100%; justify-content: center; }
.offer-disclaimer { font-size: 0.75rem; color: var(--text-3); text-align: center; line-height: 1.6; }

/* ── CLIENTS ─────────────────────────────────────────────── */
.clients-section {
  padding: clamp(80px, 12vw, 150px) 0;
  background: var(--bg-1);
  border-top: 1px solid var(--glass-bdr);
}
.clients-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 18px; }
.client-card {
  position: relative; border-radius: var(--radius-xl);
  overflow: hidden; aspect-ratio: 16/10;
  cursor: pointer;
  transition: transform var(--t-slow) var(--ease-spring);
  transform-style: preserve-3d;
}
.client-card:hover { transform: translateY(-6px) scale(1.01); }
.client-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.8s var(--ease-apple), filter 0.5s; filter: saturate(0.5) brightness(0.5); }
.client-card:hover .client-card-bg { transform: scale(1.06); filter: saturate(0.8) brightness(0.6); }
.client-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.3) 55%, transparent 100%); }
.client-card-inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; gap: 10px; }
.client-logo-img { height: 60px; width: auto; max-width: 280px; object-fit: contain; align-self: flex-start; opacity: 0.95; }
.client-work-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.client-work-tags span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; background: rgba(139,92,246,0.18); border: 1px solid rgba(139,92,246,0.28); color: var(--purple-light); padding: 3px 9px; border-radius: 99px; text-transform: uppercase; }
.client-result { font-size: 0.875rem; color: var(--text-2); line-height: 1.5; font-style: italic; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.45s var(--ease-out), opacity 0.35s; }
.client-card:hover .client-result { max-height: 80px; opacity: 1; }
.client-contact-row { margin-top: 2px; }
.client-url { font-size: 0.8rem; font-weight: 600; color: var(--purple-light); display: inline-flex; align-items: center; gap: 4px; transition: color var(--t-fast); }
.client-url:hover { color: #c4b5fd; }

/* Clickable client card → case study (overlay link) */
.client-card-link { position: absolute; inset: 0; z-index: 2; }
.client-card-link:focus-visible { outline: 2px solid var(--purple-light); outline-offset: -3px; }
.client-card .client-card-inner { z-index: 3; }
.client-card .client-url { position: relative; z-index: 4; }
/* let clicks on the card body fall through to the overlay link; keep the site URL clickable */
.client-card[data-cs] .client-card-inner { pointer-events: none; }
.client-card[data-cs] .client-contact-row,
.client-card[data-cs] .client-url { pointer-events: auto; }


.bold-proof { background: var(--bg-2); border: 1px solid var(--glass-bdr); border-radius: var(--radius-xl); padding: 26px 30px; transition: background var(--t-med), border-color var(--t-med); }
.bold-proof:hover { background: var(--bg-3); border-color: var(--glass-bdr-h); }
.bold-proof-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bold-proof-icon { width: 44px; height: 44px; background: var(--green-dim); border: 1px solid rgba(139,92,246,0.22); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--green); flex-shrink: 0; }
.bold-proof-text { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.bold-proof-text strong { font-size: 0.97rem; color: var(--text); }
.bold-proof-text span { font-size: 0.85rem; color: var(--text-2); }


/* ── PAGE HERO (inner pages) ─────────────────────────────── */
.page-hero {
  padding: clamp(140px, 18vw, 210px) 0 clamp(60px, 8vw, 90px);
  background: var(--bg);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 350px;
  background: radial-gradient(ellipse, rgba(139,92,246,0.09) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero-inner { max-width: 740px; display: flex; flex-direction: column; gap: 18px; }

/* Revives the flow-field particle canvas (script.js already ships it,
   just unused since the Framer port dropped its old mount point) as an
   opt-in background for specific page-heroes. */
.page-hero-animated #hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.page-hero-animated .page-hero-inner { position: relative; z-index: 1; }
.page-h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.page-sub { font-size: 1.1rem; color: var(--text-2); line-height: 1.72; max-width: 600px; }

/* ── SERVICE DETAIL PAGES ────────────────────────────────── */
.svc-detail { padding: clamp(60px, 8vw, 100px) 0; background: var(--bg); }
.svc-detail:nth-child(even) { background: var(--bg-1); }
.svc-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.svc-detail-reverse .svc-detail-grid { direction: rtl; }
.svc-detail-reverse .svc-detail-text, .svc-detail-reverse .svc-detail-visual { direction: ltr; }
.svc-detail-num { font-family: inherit; font-size: 5.5rem; font-weight: 800; color: rgba(139,92,246,0.07); line-height: 1; margin-bottom: -24px; }
.svc-detail-h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.025em; margin: 14px 0 16px; }
.svc-detail-text p { color: var(--text-2); line-height: 1.75; margin-bottom: 12px; font-size: 0.97rem; }
.svc-detail-list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 24px; }
.svc-detail-list li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text-2); }
.svc-detail-list li::before { content: ''; width: 5px; height: 5px; background: var(--purple-light); border-radius: 50%; flex-shrink: 0; }
.svc-detail-visual { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/3; }
.svc-detail-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-apple); }
.svc-detail-visual:hover img { transform: scale(1.04); }
.svc-img-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(8,8,12,0.5) 0%, rgba(8,8,12,0.08) 42%, transparent 72%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07); border-radius: inherit; }
.svc-divider { height: 1px; background: var(--glass-bdr); }
/* text-only detail section: argument in column one, evidence in column two,
   so the row fills the grid instead of leaving a dead right column */
.svc-detail-grid.svc-detail-split { align-items: start; gap: clamp(32px, 4.5vw, 64px); }
.svc-detail-split .svc-detail-aside { padding-top: 6px; }
.svc-detail-split .svc-detail-list { margin-top: 0; }
@media (max-width: 900px) {
  .svc-detail-grid.svc-detail-split { grid-template-columns: 1fr; gap: 4px; }
  .svc-detail-split .svc-detail-aside { padding-top: 0; }
}

/* ── CASE STUDIES ────────────────────────────────────────── */
.case-study { padding: clamp(60px, 8vw, 100px) 0; background: var(--bg); }
.case-study:nth-child(even) { background: var(--bg-1); }
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.cs-reverse .cs-grid { direction: rtl; }
.cs-reverse .cs-text, .cs-reverse .cs-visual { direction: ltr; }
.cs-logo { height: 56px; width: auto; max-width: 240px; object-fit: contain; opacity: 0.95; margin-bottom: 18px; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.cs-tags span { font-size: 0.7rem; font-weight: 600; background: var(--purple-dim); border: 1px solid rgba(139,92,246,0.18); color: var(--purple-light); padding: 3px 10px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.05em; }
.cs-h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 800; letter-spacing: -0.025em; margin-bottom: 14px; }
.cs-text p { color: var(--text-2); line-height: 1.75; font-size: 0.97rem; margin-bottom: 18px; }
.cs-deliverables h4 { font-size: 0.73rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; }
.cs-deliverables ul { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.cs-deliverables li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: var(--text-2); }
.cs-deliverables svg { margin-top: 2px; flex-shrink: 0; }

/* Outcomes / metrics block on case studies */
.cs-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 24px; padding: 18px; background: rgba(139,92,246,0.06); border: 1px solid rgba(139,92,246,0.18); border-radius: var(--radius-lg); }
.cs-outcome { display: flex; flex-direction: column; gap: 4px; }
.cs-outcome-num { font-size: 1.55rem; font-weight: 800; color: var(--purple-light); letter-spacing: -0.02em; line-height: 1; }
.cs-outcome-label { font-size: 0.7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }

/* Results page logo strip */
.results-logo-strip { padding: 32px 0 8px; border-top: 1px solid var(--glass-bdr); border-bottom: 1px solid var(--glass-bdr); background: var(--bg-1); }
.results-logo-strip-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); }
.results-logo-strip img { height: 38px; width: auto; max-width: 160px; object-fit: contain; opacity: 0.7; transition: opacity var(--t-med); }
.results-logo-strip img:hover { opacity: 1; }
.results-logo-strip-label { width: 100%; text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 18px; }

/* Results hero quick stats */
.results-quick-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.results-quick-stat { padding: 18px; background: rgba(139,92,246,0.05); border: 1px solid rgba(139,92,246,0.15); border-radius: var(--radius-lg); }
.results-quick-stat-num { font-size: 1.9rem; font-weight: 800; color: var(--purple-light); line-height: 1; letter-spacing: -0.02em; }
.results-quick-stat-label { font-size: 0.78rem; color: var(--text-2); margin-top: 6px; }

@media (max-width: 768px) {
  .cs-outcomes { grid-template-columns: 1fr 1fr; }
  .results-quick-stats { grid-template-columns: 1fr 1fr; }
}
.cs-visual { position: relative; }
.cs-img-wrap { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/3; }
.cs-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-apple); }
.cs-img-wrap:hover img { transform: scale(1.04); }
.cs-img-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(139,92,246,0.12) 0%, transparent 55%); }
.cs-divider { height: 1px; background: var(--glass-bdr); }

/* ── ABOUT ───────────────────────────────────────────────── */
.about-section { padding: clamp(60px, 8vw, 100px) 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.about-text h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; letter-spacing: -0.025em; margin: 18px 0 14px; }
.about-text p { color: var(--text-2); line-height: 1.75; margin-bottom: 14px; font-size: 0.97rem; }
.about-values { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.about-value { display: flex; align-items: flex-start; gap: 14px; padding: 18px; background: var(--bg-2); border: 1px solid var(--glass-bdr); border-radius: var(--radius); transition: background var(--t-med), border-color var(--t-med); }
.about-value:hover { background: var(--bg-3); border-color: var(--glass-bdr-h); }
.av-icon { width: 38px; height: 38px; background: var(--purple-dim); border: 1px solid rgba(139,92,246,0.18); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--purple-light); flex-shrink: 0; }
.about-value div strong { display: block; font-size: 0.9rem; color: var(--text); margin-bottom: 3px; }
.about-value div p { font-size: 0.83rem; color: var(--text-3); line-height: 1.55; margin: 0; }
.about-visual { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 16px; }
.about-img-wrap { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/3; }
.about-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.about-img-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(139,92,246,0.15) 0%, transparent 50%); }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.about-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; background: var(--bg-2); border: 1px solid var(--glass-bdr); border-radius: var(--radius); text-align: center; }
.about-stat-num { font-family: inherit; font-size: 1.4rem; font-weight: 800; background: linear-gradient(135deg, #fff, rgba(255,255,255,0.7)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.about-stat span:last-child { font-size: 0.68rem; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }

/* ── TEAM ─────────────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 36px); max-width: 900px; margin: 0 auto; }
.team-card { background: var(--bg-2); border: 1px solid var(--glass-bdr); border-radius: var(--radius-xl); overflow: hidden; transition: background var(--t-med), border-color var(--t-med); }
.team-card:hover { background: var(--bg-3); border-color: var(--glass-bdr-h); }
.team-photo { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-info { padding: 22px 24px 26px; }
.team-name { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 3px; }
.team-title { font-size: 0.85rem; font-weight: 600; color: var(--purple-light); margin: 0 0 14px; }
.team-bio { font-size: 0.88rem; color: var(--text-2); line-height: 1.65; margin: 0; }
.team-linkedin { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; }

/* ── CONTACT / GET STARTED ───────────────────────────────── */
.contact-section { padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 12vw, 140px); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 24px; }
.contact-info h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; letter-spacing: -0.025em; }
.contact-info p { color: var(--text-2); line-height: 1.7; font-size: 0.97rem; }
.contact-links { display: flex; flex-direction: column; gap: 10px; }
.contact-link-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--glass-bdr); border-radius: var(--radius); color: var(--text-2); font-size: 0.9rem; transition: background var(--t-med), border-color var(--t-med), color var(--t-med); }
.contact-link-item:hover { background: var(--bg-3); border-color: var(--glass-bdr-h); color: var(--text); }
.contact-link-item svg { color: var(--purple-light); flex-shrink: 0; }
.contact-form { background: var(--bg-2); border: 1px solid var(--glass-bdr); border-radius: var(--radius-xl); padding: 36px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.form-field label { font-size: 0.82rem; font-weight: 600; color: var(--text-3); }
.form-field input, .form-field textarea, .form-field select { background: rgba(255,255,255,0.03); border: 1px solid var(--glass-bdr); border-radius: var(--radius-sm); padding: 11px 14px; color: var(--text); font: inherit; font-size: 0.9rem; transition: border-color var(--t-fast), background var(--t-fast); outline: none; -webkit-appearance: none; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--purple); background: rgba(139,92,246,0.05); }
.form-field textarea { min-height: 110px; resize: vertical; }
.form-field select { cursor: pointer; }
.form-field select option { background: var(--bg-1); }

/* ── CONTACT PAGE ────────────────────────────────────────── */
.contact-hero {
  padding: clamp(140px, 18vw, 200px) 0 clamp(30px, 5vw, 50px);
  background: var(--bg);
  position: relative; overflow: hidden;
}
.contact-hero::before {
  content: '';
  position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
  width: 760px; height: 380px;
  background: radial-gradient(ellipse, rgba(139,92,246,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.contact-hero-inner {
  max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center; position: relative;
}
.contact-hero-inner .page-sub { max-width: 560px; }

.contact-info-block {
  padding: 24px;
  background: var(--bg-2);
  border: 1px solid var(--glass-bdr);
  border-radius: var(--radius-xl);
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color var(--t-med), background var(--t-med), transform var(--t-med);
}
.contact-info-block:hover { border-color: var(--glass-bdr-h); background: var(--bg-3); }
.contact-info-block h3 {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0;
}
.contact-info-block p { margin: 0; color: var(--text-2); line-height: 1.65; font-size: 0.94rem; }
.contact-info-block .btn-primary { margin-top: 6px; align-self: flex-start; }

.contact-link {
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color var(--t-fast);
}
.contact-link:hover { color: var(--purple-light); }
.contact-link-inline { color: var(--purple-light); font-weight: 600; }
.contact-link-inline:hover { color: var(--text); }
.contact-hours { font-size: 0.82rem; color: var(--text-4); margin-top: 2px !important; }

.contact-form-wrap {
  background: var(--bg-2);
  border: 1px solid var(--glass-bdr);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 3vw, 36px);
  position: relative;
}
.contact-form-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.contact-form {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cf-field { display: flex; flex-direction: column; gap: 7px; }
.cf-field label { font-size: 0.78rem; font-weight: 600; color: var(--text-3); letter-spacing: 0.01em; }
.cf-field .req { color: var(--purple-light); margin-left: 2px; }
.cf-field input,
.cf-field select,
.cf-field textarea {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-bdr);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font: inherit;
  font-size: 0.94rem;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: var(--text-4); }
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  border-color: var(--purple);
  background: rgba(139,92,246,0.06);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.18);
}
.cf-field textarea { min-height: 130px; resize: vertical; font-family: inherit; }
.cf-field select { cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.cf-field select option { background: var(--bg-1); color: var(--text); }

.cf-submit {
  margin-top: 8px;
  align-self: stretch;
  justify-content: center;
  font-size: 0.95rem;
  padding: 14px 26px;
}
.cf-submit.is-loading { opacity: 0.75; cursor: wait; }
.cf-submit[disabled] { cursor: not-allowed; }

.cf-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.cf-error a { color: #fca5a5; text-decoration: underline; }
.cf-error a:hover { color: #fff; }

.contact-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: clamp(24px, 3vw, 32px) 12px;
}
.contact-success-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(139,92,246,0.15);
  color: var(--purple-light);
  border: 1px solid rgba(139,92,246,0.3);
}
.contact-success-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
.contact-success-body {
  color: var(--text-2);
  line-height: 1.65;
  font-size: 0.95rem;
  max-width: 380px;
  margin: 0;
}
.contact-success-reset { margin-top: 6px; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .cf-row { grid-template-columns: 1fr; }
  .contact-info { gap: 14px; }
}

/* ── QUESTIONNAIRE PAGE ──────────────────────────────────── */
.qs-hero { padding: clamp(120px,16vh,180px) 0 clamp(40px,6vw,60px); position: relative; overflow: hidden; text-align: center; background: var(--bg); }
.qs-hero::before { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 700px; height: 400px; background: radial-gradient(ellipse, rgba(139,92,246,0.1) 0%, transparent 70%); pointer-events: none; }
.qs-hero-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 660px; margin: 0 auto; position: relative; }
.qs-h1 { font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
.qs-sub { font-size: clamp(1rem, 1.8vw, 1.12rem); color: var(--text-2); line-height: 1.72; max-width: 520px; }
.qs-trust { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center; margin-top: 10px; }
.qs-trust-item { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--text-3); }
.qs-trust-item svg { color: var(--purple-light); flex-shrink: 0; }

.questionnaire-section { padding: 0 0 clamp(80px,12vw,140px); background: var(--bg); }
.qs-wrap { position: relative; max-width: 720px; margin: 0 auto; }

/* Step dot indicators */
.qs-step-indicators { display: flex; align-items: flex-start; justify-content: center; margin: 0 auto 36px; }
.qs-dot-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.qs-dot { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-2); border: 1.5px solid var(--glass-bdr); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: var(--text-3); transition: background 0.3s var(--ease-out), border-color 0.3s, color 0.3s, box-shadow 0.3s; }
.qs-dot.is-active { background: var(--purple); border-color: var(--purple); color: #fff; box-shadow: 0 0 0 4px rgba(139,92,246,0.2); }
.qs-dot.is-done { background: rgba(139,92,246,0.1); border-color: var(--green); color: var(--green); }
.qs-dot-label { font-size: 0.6rem; color: var(--text-4); text-align: center; white-space: nowrap; font-weight: 500; letter-spacing: 0.02em; max-width: 52px; }
.qs-dot-connector { flex: 1; height: 1.5px; background: var(--glass-bdr); margin: 16px 4px 0; min-width: 20px; max-width: 60px; }

/* Form card */
.qs-card { background: var(--bg-2); border: 1px solid var(--glass-bdr); border-radius: var(--radius-xl); padding: clamp(24px,5vw,48px); position: relative; }
.qs-card::before { content: ''; position: absolute; top: -1px; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, var(--purple-glow), transparent); }

.qs-progress { margin-bottom: 28px; }
.qs-progress-label { font-size: 0.72rem; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; display: block; margin-bottom: 8px; }
.qs-progress-bar-bg { height: 2px; background: var(--glass-bdr); border-radius: 99px; overflow: hidden; }
.qs-progress-bar { height: 100%; background: linear-gradient(90deg, var(--purple), var(--purple-light)); border-radius: 99px; transition: width 0.45s var(--ease-out); }

.qs-step { display: none; }
.qs-step.active { display: block; animation: step-in 0.38s var(--ease-out); }
@keyframes step-in { from{opacity:0;transform:translateX(18px)} to{opacity:1;transform:translateX(0)} }
.qs-step-title { font-size: clamp(1.2rem,2.5vw,1.55rem); font-weight: 800; letter-spacing: -0.025em; margin-bottom: 22px; }

.qs-field { margin-bottom: 18px; }
.qs-field label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-3); margin-bottom: 8px; letter-spacing: 0.04em; text-transform: uppercase; }
.req { color: var(--purple-light); }
.qs-field input[type="text"], .qs-field input[type="email"], .qs-field input[type="tel"], .qs-field select, .qs-field textarea { width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--glass-bdr); border-radius: var(--radius-sm); padding: 13px 16px; color: var(--text); font: inherit; font-size: 0.93rem; transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); outline: none; -webkit-appearance: none; }
.qs-field input:focus, .qs-field select:focus, .qs-field textarea:focus { border-color: var(--purple); background: rgba(139,92,246,0.04); box-shadow: 0 0 0 3px rgba(139,92,246,0.12); }
.qs-field textarea { min-height: 120px; resize: vertical; }
.qs-field select { cursor: pointer; }
.qs-field select option { background: var(--bg-2); }
.qs-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.qs-options { display: flex; flex-direction: column; gap: 8px; }
.qs-opt { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: rgba(255,255,255,0.02); border: 1px solid var(--glass-bdr); border-radius: var(--radius); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); user-select: none; }
.qs-opt:hover { background: rgba(255,255,255,0.05); border-color: var(--glass-bdr-h); }
.qs-opt:has(input:checked) { background: rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.35); }
.qs-opt input[type="radio"], .qs-opt input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--purple); flex-shrink: 0; cursor: pointer; }
.qs-opt span { font-size: 0.88rem; color: var(--text-2); line-height: 1.4; }

.qs-nav { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.qs-back { color: var(--text-3); font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: color var(--t-fast); padding: 8px 0; }
.qs-back:hover { color: var(--text); }
.qs-error { color: #f87171; font-size: 0.78rem; margin-top: 5px; }
.qs-submit-block { margin-top: 18px; }
.qs-submit-note { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; background: rgba(139,92,246,0.04); border: 1px solid rgba(139,92,246,0.1); border-radius: var(--radius-sm); font-size: 0.8rem; color: var(--text-3); line-height: 1.55; }
.qs-submit-note svg { color: var(--purple-light); flex-shrink: 0; margin-top: 1px; }
.qs-success { text-align: center; padding: 60px 32px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.qs-success-icon { width: 80px; height: 80px; border-radius: 50%; background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.2); display: flex; align-items: center; justify-content: center; color: var(--green); }
.qs-success h2 { font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 800; letter-spacing: -0.03em; }
.qs-success p { color: var(--text-2); max-width: 420px; line-height: 1.72; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-section { padding: clamp(60px, 8vw, 100px) 0; background: var(--bg-1); }
.faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
/* FAQ accordion. Markup across the site is a plain <div class="faq-item"><h3
   class="faq-q">…</h3><p class="faq-a">…</p></div>, not <details>/<summary>,
   so this is driven by script.js toggling .is-open rather than the [open]
   attribute — styling and behaviour both key off that class. */
.faq-item { background: var(--bg-2); border: 1px solid var(--glass-bdr); border-radius: var(--radius); overflow: hidden; transition: background var(--t-med), border-color var(--t-med); }
.faq-item.is-open { background: var(--bg-3); border-color: var(--glass-bdr-h); }
.faq-item .faq-q { margin: 0; padding: 18px 20px; font-weight: 600; font-size: 0.93rem; color: var(--text); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-item .faq-q::after { content: '+'; font-size: 1.1rem; color: var(--purple-light); flex-shrink: 0; transition: transform var(--t-med) var(--ease-spring); }
.faq-item.is-open .faq-q::after { transform: rotate(45deg); }
.faq-item .faq-a { margin: 0; padding: 0 20px; max-height: 0; overflow: hidden; color: var(--text-2); font-size: 0.9rem; line-height: 1.7; transition: max-height var(--t-med) var(--ease-out), padding var(--t-med) var(--ease-out); }
.faq-item.is-open .faq-a { max-height: 700px; padding: 0 20px 18px; }

/* ── PAGE CTA ────────────────────────────────────────────── */
.page-cta-section { padding: clamp(60px, 8vw, 100px) 0; background: var(--bg); position: relative; overflow: hidden; }
.page-cta-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 600px; height: 300px; background: radial-gradient(ellipse, rgba(139,92,246,0.09) 0%, transparent 70%); pointer-events: none; }
.page-cta-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; max-width: 620px; margin: 0 auto; }
.page-cta-h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 800; letter-spacing: -0.035em; }
.page-cta-inner p { color: var(--text-2); font-size: 1.02rem; line-height: 1.7; }

/* The audit form dropped into the closing CTA. .page-cta-inner is a centred
   620px column, which is too narrow for a two-up field grid, so the form
   widens past it and left-aligns: centred labels over left-aligned inputs
   read as a mistake. */
.amx-pagecta-form { width: min(680px, 100%); margin: 4px auto 0; text-align: left; }
.amx-pagecta-form .amx-cta-form { display: flex; flex-direction: column; gap: 14px; }
.amx-pagecta-form .amx-cta-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
/* the flagship closing section is a saturated purple panel, so this block
   cannot inherit the page's body-text colours or half of it disappears */
.amx-pagecta-form .amx-field label { color: rgba(255, 255, 255, 0.92); text-shadow: none; font-weight: 600; }
.amx-pagecta-form .amx-field input {
  height: 50px;
  background: var(--bg-1, #ffffff);
  border: 1px solid var(--glass-bdr, rgba(9, 9, 11, 0.14));
  color: var(--text-1, inherit);
}
.amx-pagecta-form .amx-cta-form button {
  align-self: stretch;
  justify-content: center;
  height: 54px;
}
.amx-pagecta-form .amx-cta-note {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  margin-top: 2px;
}
.amx-pagecta-form .amx-recaptcha-note { color: rgba(255, 255, 255, 0.62); text-align: center; }
.amx-pagecta-form .amx-recaptcha-note a { color: rgba(255, 255, 255, 0.82); }
/* the old button stays as the way through to the full brief, demoted to a
   link so it stops competing with the form for the same click */
.page-cta-inner a.amx-pagecta-alt {
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: none;
  background-image: none;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-cta-inner a.amx-pagecta-alt:hover { color: #ffffff; }
@media (max-width: 620px) {
  .amx-pagecta-form .amx-cta-fields { grid-template-columns: minmax(0, 1fr); }
}

/* The flagship hero opened with 210px of padding above an 86px headline, so
   on a laptop the visitor met a cropped line of type and had to scroll before
   anything asked them for anything. */

/* ── FOOTER ──────────────────────────────────────────────── */
.site-foot { padding: clamp(60px, 8vw, 80px) 0 32px; background: var(--bg-1); border-top: 1px solid var(--glass-bdr); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: clamp(20px, 3vw, 48px); margin-bottom: 40px; }
.foot-brand-col { display: flex; flex-direction: column; gap: 14px; }
.foot-brand { display: flex; align-items: center; gap: 9px; }
.foot-logo { width: 26px; height: 26px; }
.foot-tagline { font-size: 0.83rem; color: var(--text-3); line-height: 1.55; max-width: 210px; }
.foot-contact { display: flex; flex-direction: column; gap: 6px; }
.foot-contact a { font-size: 0.82rem; color: var(--text-3); transition: color var(--t-fast); }
.foot-contact a:hover { color: var(--text-2); }
.foot-nav-col { display: flex; flex-direction: column; gap: 9px; }
.foot-nav-label { font-size: 0.68rem; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px; }
.foot-nav-col a { font-size: 0.83rem; color: var(--text-3); transition: color var(--t-fast); }
.foot-nav-col a:hover { color: var(--text-2); }
.foot-cta-col { display: flex; flex-direction: column; gap: 10px; }
.foot-cta-text { font-size: 0.82rem; color: var(--text-3); }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; border-top: 1px solid var(--glass-bdr); flex-wrap: wrap; gap: 10px; }
.foot-bottom-links { display: flex; align-items: center; gap: 20px; }
.foot-bottom-links a { font-size: 0.78rem; color: var(--text-4); transition: color var(--t-fast); }
.foot-bottom-links a:hover { color: var(--text-3); }
.foot-copy { font-size: 0.76rem; color: var(--text-3); }
.foot-social { display: flex; align-items: center; gap: 4px; }
.foot-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  color: var(--text-4); background: transparent;
  border: 1px solid rgba(255,255,255,0.07);
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.foot-social-link:hover { color: #fff; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); }

/* ── SIB (results page) ──────────────────────────────────── */
.sib-num { font-family: inherit; font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(135deg, #fff, rgba(255,255,255,0.7)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── PIPELINE ────────────────────────────────────────────── */
.pipeline-placeholder { min-height: 60vh; display: flex; align-items: center; justify-content: center; color: var(--text-2); font-size: 1.1rem; padding-top: 100px; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .problem-grid { grid-template-columns: 1fr; }
  .problem-left { position: static; }
  .offer-layout { grid-template-columns: 1fr; }
  .offer-cta-col { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .services-bento { grid-template-columns: repeat(2, 1fr); }
  .svc-card.svc-featured { grid-column: span 2; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .process-grid-4 { grid-template-columns: 1fr 1fr; }
  .book-cal-inner { grid-template-columns: 1fr; }
  .book-cal-left { position: static; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-wrap { width: calc(100% - 32px); top: 10px; }
  .hero-content { padding-top: 120px; }
  .hero-h1 { font-size: clamp(2.6rem, 9vw, 3.8rem); }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn-xl { justify-content: center; }
  .apple-statement-line { font-size: clamp(1.8rem, 6vw, 2.8rem); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .services-bento { grid-template-columns: 1fr; }
  .svc-card.svc-featured { grid-column: span 1; }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid-4 { grid-template-columns: 1fr; }
  .build-model-grid { grid-template-columns: 1fr; }
  .clients-grid { grid-template-columns: 1fr; }
  .about-grid, .contact-grid, .svc-detail-grid, .cs-grid { grid-template-columns: 1fr; }
  .about-visual { position: static; }
  .team-grid { grid-template-columns: 1fr; max-width: 380px; }
  .svc-detail-reverse .svc-detail-grid, .cs-reverse .cs-grid { direction: ltr; }
  .form-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .bold-proof-inner { flex-direction: column; align-items: flex-start; }
  .float-bar p { display: none; }
  .float-bar-inner { font-size: 0.8rem; gap: 10px; padding: 9px 13px; }
  /* Questionnaire mobile */
  .qs-field-row { grid-template-columns: 1fr; }
  .qs-dot-label { display: none; }
  .qs-dot-connector { max-width: 32px; min-width: 12px; }
  .qs-card { padding: 22px 16px; }
  .qs-step-indicators { margin-bottom: 24px; }
  .qs-trust { gap: 8px 14px; }
  /* Ticker readability */
  .ticker-track { font-size: 0.78rem; }
  /* Hero sub smaller */
  .hero-sub { font-size: 0.93rem; }
  /* Stat numbers on mobile */
  .stat-num { font-size: clamp(2rem, 9vw, 3.2rem) !important; }
  /* Offer layout */
  .offer-item { flex-direction: column; gap: 6px; }
  .offer-value { align-self: flex-start; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .hero-logos { flex-wrap: wrap; }
  .logo-divider { display: none; }
  .hero-logos { gap: 10px 0; padding: 12px 16px; }
  /* Extra small screens */
  .hero-h1 { font-size: clamp(2.2rem, 11vw, 2.8rem); }
  .section-h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .qs-h1 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .btn-xl { font-size: 0.9rem; padding: 14px 22px; }
  .shell { padding: 0 16px; }
  .qs-dot { width: 28px; height: 28px; font-size: 0.65rem; }
  .qs-nav { flex-direction: column-reverse; align-items: stretch; }
  .qs-nav .btn-primary { text-align: center; justify-content: center; }
}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal-el, [data-reveal], .reveal-line { opacity: 1 !important; transform: none !important; }
}

/* ── Reduce GPU-expensive backdrop-filter on mobile ── */
@media (max-width: 768px) {
  .nav-inner, .mobile-menu, .float-bar-inner, .hero-logos {
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }
}

/* ── CSS View Transitions — native cross-page navigation animation ── */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: 260ms cubic-bezier(.4,0,1,1) both page-out;
}
::view-transition-new(root) {
  animation: 380ms cubic-bezier(.16,1,.3,1) both page-in;
}
@keyframes page-out {
  to { opacity: 0; transform: translateY(-10px) scale(0.99); }
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SANJAYA DESIGN PORT
   ---------------------------------------------------------------------------
   Values measured from the published Framer build, see docs/sanjaya-design-spec.md.

   Appended rather than edited in place so the whole port is one reviewable
   block and reverts by deleting it. Markup is untouched: every rule below
   targets classes that already exist, so no page structure, copy, form or
   script changes. All 24 public pages link this file, so they move together.

   The single largest visual difference between the current site and Sanjaya is
   weight and tracking: headings here were 700-800 at -0.025em, Sanjaya is 400
   at -0.05em. That, plus the mono labels, is most of the look.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --sj-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --sj-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Measured heading tracking. Uniform across the scale in the Framer build. */
  --sj-tracking-heading: -0.05em;
  --sj-tracking-label:    0.08em;

  /* Sanjaya containers run slightly wider than the current 1200px. */
  --sj-container: 1240px;
}

/* ── Display type ─────────────────────────────────────────────────────────
   Weight drops to 400. Geist at 400 holds up at display sizes where Inter
   would look thin, which is why the family swap and the weight change have to
   land together rather than one at a time. */
/* Re-measured from the static Framer export, which disagrees with the earlier
   spec: the H1 is NOT Geist 400. Framer renders it Inter 800 at -0.04em, while
   H2 and below are Geist 400 at -0.05em. Getting this wrong made the single
   most prominent element on every page light and airy where Framer is heavy,
   which is most of why the port did not read as the same design. */
h2, h3, h4,
.section-h2, .svc-detail-h2, .page-cta-h2, .book-cal-h2 {
  font-family: var(--sj-sans);
  letter-spacing: var(--sj-tracking-heading);
}

h2, .section-h2, .page-cta-h2 { font-weight: 400; }

/* H1: Inter 800, -0.04em, line-height 1.02 — measured, not inferred. */
h1, .hero-h1, .page-h1 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

/* Smaller headings keep a little more weight, otherwise card titles stop
   reading as titles against body copy at the same size. */
h3, h4, .svc-detail-h2, .book-cal-h2 {
  font-weight: 500;
}

.hero-h1 { line-height: 1.02; }
.page-h1 { line-height: 1.02; }

/* Tight leading is a large-display effect and crowds descenders on phones. */
@media (max-width: 809px) {
  .hero-h1, .page-h1 { line-height: 1.12; }
}

/* ── Body ─────────────────────────────────────────────────────────────────── */
body, .page-sub, .hero-sub {
  font-family: var(--sj-sans);
}

.page-sub, .hero-sub {
  letter-spacing: -0.04em;
}

/* ── Labels ───────────────────────────────────────────────────────────────
   The eyebrow is the only mono, uppercase, positive-tracking element in the
   system. Sanjaya prefixes them with a slash instead of the current rule. */
.overline-tag {
  font-family: var(--sj-mono);
  font-weight: 400;
  letter-spacing: var(--sj-tracking-label);
}

.overline-tag::before {
  content: '/';
  width: auto;
  height: auto;
  background: none;
  opacity: 1;
  font-family: var(--sj-mono);
}

/* ── Container ────────────────────────────────────────────────────────────── */
.shell { max-width: var(--sj-container); }

/* ── Surfaces ─────────────────────────────────────────────────────────────
   Retuning the existing glass tokens moves every card at once, rather than
   restyling each component. Framer's cards are flat Dark Grey with a White 10%
   hairline, not blurred glass. */
:root {
  --glass:       #1a1a1d;                  /* Framer: Dark Grey  */
  --glass-hover: #212121;                  /* Framer: Grey 1     */
  --glass-bdr:   rgba(255, 255, 255, 0.1); /* Framer: White 10%  */
  --glass-bdr-h: rgba(255, 255, 255, 0.25);/* Framer: White 25%  */
  --bg:          #010004;                  /* Framer: Black      */

  /* Read off the export's own token table. Body copy is pure white and the
     secondary grey is a shade lighter than the values carried over from the
     old palette, which left every page fractionally warmer than the design.
     The other six tokens above already matched exactly.

     --text-3 is deliberately NOT touched. Framer's remaining greys (#dedede,
     #323135) are a light tint and a divider, not a muted body colour, and
     --text-3 is #6E6E73 across 35 rules of tertiary text. Mapping either onto
     it would wash all of them out. */
  --text:        #ffffff;                  /* Framer: White      */
  --text-2:      #a8a8a8;                  /* Framer: Grey 3     */
}

/* ── Header ───────────────────────────────────────────────────────────────
   Framer runs a full-bleed bar: transparent over the hero, solid with a
   hairline once scrolled. The current floating pill is the biggest structural
   difference between the two headers, so it is unwrapped here.

   .scrolled is already toggled by script.js, so no JS change is needed. */
.nav-wrap {
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  max-width: none;
}

.nav-inner {
  max-width: var(--sj-container);
  margin-inline: auto;
  padding: 18px 20px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
}

.nav-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  border-bottom: 1px solid var(--glass-bdr);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}

.nav-wrap.scrolled::after { opacity: 1; }

/* The pill's own scrolled treatment would otherwise fight the bar above. */
.nav-wrap.scrolled .nav-inner {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* The wordmark keeps the live site's lockup: heavy letterspaced caps, not the
   body face at normal weight the Framer design used. Two treatments across one
   site read as two different companies.

   That held while half the site came from the Framer mirror and half was
   hand-built. It no longer does: every page now wears one design, so the
   lockup that matches it is Framer's own, which is the mark on its own at
   60px with no wordmark beside it. Measured off the export's rendered header:
   an 85px transparent fixed bar, a 60px mark, and centred nav links at
   15px/400 in white 86%. The wordmark is dropped from the markup rather than
   hidden here, so it does not linger for screen readers and crawlers. */

/* Measured: 60x61 in the export. The bar is 85px, so 12px of vertical padding
   on a 60px mark lands at 84. */
.brand-logo { width: 60px; height: 60px; }

.nav-inner { padding: 12px 20px; }

.nav-inner { position: relative; }

.nav-links a {
  font-family: var(--sj-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.86);
}

.nav-links a:hover { color: #fff; }

/* ── Display sizes ────────────────────────────────────────────────────────
   Measured on the export at a 1528px viewport: every h1 is 56px and every h2
   is 48px, both on a flat leading (h1 1.02, h2 exactly 1.0). The ported clamps
   ran larger than that at desktop widths - the hero h1 at 62.4px, the page h1
   at 70.4px and the section h2 at 51.2px - which is why headings read heavier
   here than in the design even after the weights and tracking were correct.

   Only the ceilings move. The lower bounds and the vw term are left alone so
   the existing mobile behaviour is unchanged. */
.page-h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); }

.section-h2,
.problem-h2,
.book-cal-h2,
.page-cta-h2 {
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1;
}

/* .problem-h2 sets its own weight at 800 and carries the same specificity as
   the port's heading rule, so it kept winning on source order alone. */
.problem-h2 { font-weight: 400; }

@media (max-width: 768px) {
  /* 60px is a desktop mark. On a phone bar it eats the viewport and pushes the
     hero down behind it, so the lockup and the bar come back in proportion. */
  .brand-logo { width: 44px; height: 44px; }
  .nav-inner { padding: 10px 20px; }
}

/* ── Section rhythm ───────────────────────────────────────────────────────
   Measured at a flat 100px top and bottom. */
.svc-detail,
.page-cta-section { padding: 100px 0; }

@media (max-width: 809px) {
  .svc-detail,
  .page-cta-section { padding: 64px 0; }
}

/* ── Scramble reveal ──────────────────────────────────────────────────────
   Holds layout while characters resolve so the heading does not reflow.
   script.js only adds .is-scrambling on devices that pass the motion checks. */
.is-scrambling { visibility: visible; }

.hero-badge {
  padding: 6px 10px;
  border: 1px solid var(--glass-bdr);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-2);
}

/* Framer's hero badge is a boxed chip, not a slash-prefixed eyebrow. */
.hero-badge::before { content: none; }

/* ── New Framer sections ──────────────────────────────────────────────────
   Logos, Integration, Blog and FAQ had no equivalent in the repo. All four use
   the same vocabulary as the rest of the port: mono eyebrow, Geist 400
   heading, flat card on a White-10% hairline. */
.logos-section,
.integration-section,
.blog-section,
.faq-teaser-section {
  padding: 100px 0;
  background: var(--bg);
}

.logos-section .overline-tag,
.integration-section .overline-tag,
.blog-section .overline-tag,
.faq-teaser-section .overline-tag { margin-bottom: 18px; display: inline-flex; }

.integration-section .section-h2,
.blog-section .section-h2,
.faq-teaser-section .section-h2 { margin-bottom: 18px; }

.section-sub {
  max-width: 62ch;
  margin-bottom: 34px;
  color: var(--text-2);
  font-size: 1.05rem;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

/* Logos: Framer uses a bordered grid, one cell per client. */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: 1px solid var(--glass-bdr);
  border-radius: var(--radius);
  overflow: hidden;
}

.logo-cell {
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: 24px;
  border-right: 1px solid var(--glass-bdr);
}

.logo-cell:last-child { border-right: 0; }

/* Sized by HEIGHT: four of the five client logos are square or portrait, so
   constraining width alone collapses them to a third of the cell. */
.logo-cell-img {
  width: auto;
  max-width: 100%;
  height: 46px;
  object-fit: contain;
  opacity: 0.68;
  transition: opacity var(--t-med) var(--ease-out);
}

.logo-cell:hover .logo-cell-img { opacity: 1; }

/* Integration + blog cards */
.integration-grid,
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 34px;
}

.integration-card,
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px;
  border: 1px solid var(--glass-bdr);
  border-radius: var(--radius);
  background: var(--glass);
  transition: border-color var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}

.integration-card:hover,
.blog-card:hover { border-color: var(--glass-bdr-h); transform: translateY(-3px); }

.integration-card h3,
.blog-card h3 {
  font-family: var(--sj-sans);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: var(--sj-tracking-heading);
  color: var(--text);
}

.integration-card p { color: var(--text-2); font-size: 0.95rem; line-height: 1.55; }
.blog-card { justify-content: space-between; min-height: 190px; }
.blog-card-link { color: var(--purple); font-size: 0.9rem; font-weight: 500; }

/* Integration visual: a scattered 5x5 tile grid, edges faded with a radial
   mask so it reads as floating rather than a hard-edged panel. Only some
   cells get a box; the gaps are the point. */
.integration-visual { display: flex; justify-content: center; }
.int-tiles {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 92%);
  mask-image: radial-gradient(ellipse at center, #000 55%, transparent 92%);
}
.int-tile { border-radius: 16px; border: 1px solid var(--glass-bdr); background: rgba(255,255,255,0.03); }
.int-tile-fill {
  display: flex; align-items: center; justify-content: center;
  background: var(--glass); border-color: var(--glass-bdr-h);
}
.int-tile-label { font-weight: 700; font-size: 0.78rem; letter-spacing: -0.01em; }
.int-tile-square { width: 20px; height: 20px; border-radius: 5px; background: #000; }

/* Lets the tile grid float free of the photo-frame treatment the other
   service visuals use (hard aspect ratio, clipped corners). */
.svc-detail-visual-plain { aspect-ratio: auto; overflow: visible; border-radius: 0; display: flex; justify-content: center; }

/* FAQ teaser: a hairline-separated list, not cards. */
.faq-teaser-list { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid var(--glass-bdr); }

.faq-teaser-list li { border-bottom: 1px solid var(--glass-bdr); }

.faq-teaser-list a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 4px;
  color: var(--text);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  transition: color var(--t-fast), padding-left var(--t-med) var(--ease-out);
}

.faq-teaser-list a:hover { color: var(--purple-light); padding-left: 12px; }
.faq-teaser-list span { color: var(--text-3); }

@media (max-width: 700px) {
  .logo-cell { border-right: 0; border-bottom: 1px solid var(--glass-bdr); }
  .logo-cell:last-child { border-bottom: 0; }
}


/* ── Nav legibility over the video hero — solid dark bar, full width ── */
.nav-wrap {
  background: rgba(0,0,0,0.8) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid var(--glass-bdr) !important;
}
.nav-inner,
.nav-wrap.scrolled .nav-inner {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* Nav Contact CTA — reuses the hero glossy button, sized for the bar */
.nav-inner > .nav-cta-btn { margin-left: auto; align-self: center; flex: 0 0 auto; }
.nav-cta-btn .hero-fancy-btn-inner { padding: 9px 18px; font-size: 0.86rem; }
@media (max-width: 768px){ .nav-cta-btn { display: none; } }

/* ── Header restyle: floating glass-pill nav ──────────────────────────────
   Logo sits free on the transparent bar; nav links + the Contact CTA are
   grouped into one blurred capsule on the right, echoing a floating-pill
   hero header. Layered after the rules above (same pattern as the video-
   legibility fix) rather than edited in place. */
.nav-wrap {
  background: transparent !important;
  border-bottom: 0 !important;
}
.nav-wrap::after { display: none !important; }
.nav-inner {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-inner > .nav-pill { position: static; transform: none; margin-left: auto; }
.nav-pill .nav-links { position: static; transform: none; gap: 1px; }
.nav-pill .nav-links > a,
.nav-pill .nav-dd-trigger { padding: 9px 14px; border-radius: 999px; }
.nav-inner > .nav-pill .nav-cta-btn { margin-left: 4px; }

.nav-toggle {
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
  .nav-pill { display: none; }
}

/* ============================================================
   V2 REVAMP LAYER  —  scoped to body.v2 only
   Applied to: /ai-agency-albury, /locations/albury, /locations/wodonga
   Upgrades the shared components without touching the other pages.
   ============================================================ */

/* ---- Rhythm: more room to breathe ---- */
body.v2 .svc-detail { padding-block: clamp(72px, 9vw, 132px); }
body.v2 .services-overview,
body.v2 .process-section,
body.v2 .stats-section { padding-block: clamp(64px, 8vw, 120px); }
body.v2 .section-head { margin-bottom: clamp(40px, 5vw, 64px); }

/* ---- Overline becomes a glass badge pill ---- */
body.v2 .overline-tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 13px; border-radius: 999px;
  background: rgba(139,92,246,0.08);
  border: 1px solid rgba(139,92,246,0.22);
  color: var(--purple-light);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  width: fit-content;
}
body.v2 .overline-tag::before {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple); box-shadow: 0 0 12px var(--purple-glow);
  animation: v2-pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes v2-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.7); } }

/* ---- Hero: aurora glow + bigger type + shimmer headline ---- */
body.v2 .page-hero-animated { padding-block: clamp(120px, 16vw, 220px) clamp(72px, 9vw, 120px); overflow: hidden; }
body.v2 .page-hero::after {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 120%;
  background:
    radial-gradient(680px 420px at 22% 18%, rgba(139,92,246,0.28), transparent 60%),
    radial-gradient(560px 400px at 82% 30%, rgba(86,145,243,0.16), transparent 62%);
  filter: blur(24px); pointer-events: none; z-index: 0;
  animation: v2-aurora 16s var(--ease-in-out) infinite alternate;
}
@keyframes v2-aurora {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: 0.9; }
  100% { transform: translate3d(-3%,2%,0) scale(1.08); opacity: 1; }
}
body.v2 .page-hero-inner { position: relative; z-index: 2; gap: 22px; max-width: 820px; }
body.v2 .page-h1 { font-size: clamp(2.7rem, 6.2vw, 5rem); letter-spacing: -0.045em; line-height: 1.02; }
body.v2 .h1-gradient {
  background: linear-gradient(100deg, var(--purple-light) 0%, #c4b5fd 40%, #7cc5ff 75%, var(--purple-light) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: v2-shimmer 7s linear infinite;
}
@keyframes v2-shimmer { to { background-position: 220% 0; } }
body.v2 .page-sub { font-size: 1.16rem; max-width: 660px; color: #c9c9ce; }
body.v2 .hero-ctas { margin-top: 8px; }

/* ---- Buttons: sheen sweep on hover ---- */
body.v2 .btn-primary { position: relative; overflow: hidden; }
body.v2 .btn-primary::before {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg); transition: left 0.7s var(--ease-out); z-index: 3;
}
body.v2 .btn-primary:hover::before { left: 160%; }
body.v2 .btn-ghost {
  border: 1px solid var(--glass-bdr-h);
  transition: border-color var(--t-med), background var(--t-med), transform var(--t-med);
}
body.v2 .btn-ghost:hover { border-color: var(--glass-bdr-a); background: var(--purple-dim); transform: translateY(-2px); }

/* ---- Stat tiles: glass cards with gradient hairline ---- */
body.v2 .stats-grid { gap: 18px; }
body.v2 .stat-item {
  padding: 30px 26px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid var(--glass-bdr);
  position: relative; overflow: hidden;
  transition: transform var(--t-med) var(--ease-out), border-color var(--t-med), background var(--t-med);
}
body.v2 .stat-item::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--purple), transparent);
  opacity: 0.5;
}
body.v2 .stat-item:hover { transform: translateY(-6px); border-color: var(--glass-bdr-a); background: rgba(255,255,255,0.05); }
body.v2 .stat-num { background: linear-gradient(135deg, #fff 40%, var(--purple-light)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ---- Logo row: tiles that lift ---- */
body.v2 .logos-section { padding-block: clamp(48px, 6vw, 80px); }
body.v2 .logo-grid { gap: 16px; }
body.v2 .logo-cell {
  padding: 26px 20px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--glass-bdr);
  transition: transform var(--t-med) var(--ease-out), border-color var(--t-med), background var(--t-med);
}
body.v2 .logo-cell:hover { transform: translateY(-4px); border-color: var(--glass-bdr-h); background: var(--glass-hover); }
body.v2 .logo-cell-img { filter: grayscale(1) brightness(1.6); opacity: 0.72; transition: filter var(--t-med), opacity var(--t-med); }
body.v2 .logo-cell:hover .logo-cell-img { filter: none; opacity: 1; }

/* ---- Spotlight cards: gradient border + lift + glow ---- */
body.v2 .services-bento { gap: 18px; }
body.v2 .svc-card {
  border-radius: var(--radius-lg); padding: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border: 1px solid var(--glass-bdr);
  transition: transform 0.4s var(--ease-out), border-color 0.4s, box-shadow 0.4s, background 0.4s;
}
body.v2 .svc-card::before {
  border-radius: inherit;
  background: radial-gradient(520px 320px at var(--mx, 30%) var(--my, 0%), rgba(139,92,246,0.18), transparent 60%);
}
body.v2 .svc-card:hover {
  transform: translateY(-6px);
  border-color: var(--glass-bdr-a);
  box-shadow: 0 24px 60px -24px rgba(139,92,246,0.5);
  background: rgba(255,255,255,0.045);
}
body.v2 .svc-card.svc-featured {
  background: linear-gradient(140deg, rgba(139,92,246,0.14), rgba(139,92,246,0.02) 55%);
  border-color: rgba(139,92,246,0.28);
}
body.v2 .svc-icon {
  width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(139,92,246,0.06));
  border: 1px solid rgba(139,92,246,0.25);
  color: var(--purple-light);
}
body.v2 .svc-tag {
  display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  background: rgba(139,92,246,0.14); color: var(--purple-light); border: 1px solid rgba(139,92,246,0.24);
}
body.v2 .svc-card h3 { font-size: 1.16rem; margin-bottom: 8px; }
body.v2 .svc-card.svc-featured h3 { font-size: 1.42rem; }
body.v2 .svc-card p { font-size: 0.92rem; line-height: 1.68; }
body.v2 .svc-link { margin-top: 14px; font-weight: 600; color: var(--purple-light); }

/* ---- Process: gradient number chips + connecting line ---- */
body.v2 .process-grid-4 { gap: 20px; }
body.v2 .process-step {
  padding: 28px 24px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--glass-bdr);
}
body.v2 .process-num {
  font-size: 0.95rem; font-weight: 700; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--purple), #6d4fd0); color: #fff;
  box-shadow: 0 8px 22px -8px var(--purple-glow);
}
body.v2 .process-line { display: none; }
body.v2 .process-list li { position: relative; padding-left: 20px; font-size: 0.86rem; color: var(--text-2); line-height: 1.55; margin-bottom: 6px; }
body.v2 .process-list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 8px var(--purple-glow); }
body.v2 .process-list { list-style: none; padding: 0; margin: 14px 0 0; }

/* ---- svc-detail visuals: framed + gentle float ---- */
body.v2 .svc-detail-visual { border: 1px solid var(--glass-bdr); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8); }
body.v2 .svc-detail-visual img { animation: v2-float 9s var(--ease-in-out) infinite; }
@keyframes v2-float { 0%,100% { transform: scale(1.02) translateY(0); } 50% { transform: scale(1.02) translateY(-10px); } }
body.v2 .svc-detail-visual:hover img { animation-play-state: paused; transform: scale(1.05); }
body.v2 .svc-detail-list li { display: block; position: relative; padding: 14px 0 14px 30px;
  border-bottom: 1px solid var(--glass-bdr); line-height: 1.65; }
/* bold lead-in reads as part of the sentence, not as a squeezed flex column */
body.v2 .svc-detail-list li strong { color: var(--text); font-weight: 700; }
body.v2 .svc-detail-list li::before {
  content: ""; position: absolute; left: 0; top: 18px; width: 16px; height: 16px; border-radius: 5px;
  background: linear-gradient(135deg, var(--purple), #6d4fd0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.v2 .svc-detail-list { list-style: none; padding: 0; margin: 22px 0; }

/* ---- Dividers: gradient fade ---- */
body.v2 .svc-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--glass-bdr-h) 20%, var(--glass-bdr-h) 80%, transparent); }

/* ---- FAQ: roomier, nicer hover ---- */
body.v2 .faq-item { border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)); }
body.v2 .faq-item:hover { border-color: var(--glass-bdr-h); }
body.v2 .faq-item .faq-q { padding: 20px 22px; font-size: 1rem; }
body.v2 .faq-item .faq-a { font-size: 0.94rem; }

/* ---- CTA band: gradient shell ---- */
body.v2 .page-cta-section { padding-block: clamp(80px, 10vw, 140px); }
body.v2 .page-cta-inner {
  padding: clamp(40px, 5vw, 64px); border-radius: var(--radius-xl);
  background: linear-gradient(140deg, rgba(139,92,246,0.16), rgba(139,92,246,0.02) 60%);
  border: 1px solid rgba(139,92,246,0.24);
  position: relative; overflow: hidden;
}
body.v2 .page-cta-inner::after {
  content: ""; position: absolute; inset: auto -10% -60% -10%; height: 220px;
  background: radial-gradient(circle at 50% 0%, rgba(139,92,246,0.3), transparent 62%);
  filter: blur(30px); pointer-events: none;
}
body.v2 .page-cta-h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }

/* ---- Richer scroll reveal: fade-up + blur ---- */
html.js body.v2 .reveal-el { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out); transition-delay: var(--d, 0ms); }
html.js body.v2 .reveal-el.visible { opacity: 1; transform: none; filter: none; }
html.js body.v2 .page-hero .reveal-el, html.js body.v2 .contact-hero .reveal-el { opacity: 1; transform: none; filter: none; transition: none; }

/* ---- Section headings ---- */
body.v2 .section-h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -0.04em; }
body.v2 .section-sub { color: var(--text-2); font-size: 1.05rem; max-width: 640px; }
body.v2 .svc-detail-h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -0.035em; }

/* ---- Motion safety ---- */
@media (prefers-reduced-motion: reduce) {
  body.v2 .page-hero::after,
  body.v2 .h1-gradient,
  body.v2 .overline-tag::before,
  body.v2 .svc-detail-visual img { animation: none !important; }
  body.v2 .reveal-el { filter: none; transform: none; }
}

/* ---- V2: The Approach section (rich layout) ---- */
body.v2 .section-head.sh-center { text-align: center; align-items: center; }
body.v2 .section-head.sh-center .overline-tag { margin-inline: auto; }
body.v2 .section-head.sh-center .section-sub { margin-inline: auto; max-width: 780px; }

body.v2 .approach-showcase {
  position: relative; margin: clamp(36px, 5vw, 60px) auto 0; max-width: 960px;
  border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--glass-bdr);
  box-shadow: 0 50px 100px -50px rgba(139,92,246,0.5), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
body.v2 .approach-showcase img { display: block; width: 100%; height: auto; }

body.v2 .approach-features {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: clamp(28px, 4vw, 48px);
}
body.v2 .approach-feature {
  display: flex; gap: 16px; padding: 26px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border: 1px solid var(--glass-bdr);
  transition: transform 0.4s var(--ease-out), border-color 0.4s, background 0.4s, box-shadow 0.4s;
}
body.v2 .approach-feature:hover {
  transform: translateY(-5px); border-color: var(--glass-bdr-a);
  background: rgba(255,255,255,0.045);
  box-shadow: 0 22px 55px -26px rgba(139,92,246,0.45);
}
body.v2 .af-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(139,92,246,0.06));
  border: 1px solid rgba(139,92,246,0.25); color: var(--purple-light);
}
body.v2 .af-body h3 { font-size: 1.08rem; font-weight: 700; color: var(--text); letter-spacing: -0.015em; margin: 2px 0 7px; }
body.v2 .af-body p { font-size: 0.9rem; color: var(--text-2); line-height: 1.62; margin: 0; }

body.v2 .int-band {
  margin-top: clamp(28px, 4vw, 44px); padding: 30px clamp(22px, 4vw, 40px);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
  border: 1px solid var(--glass-bdr);
  text-align: center;
}
body.v2 .int-label {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 18px;
}
body.v2 .int-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
body.v2 .int-chip {
  padding: 9px 18px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-bdr);
  color: var(--text); font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em;
  transition: transform var(--t-med) var(--ease-out), border-color var(--t-med), color var(--t-med), background var(--t-med);
}
body.v2 .int-chip:hover { transform: translateY(-3px); border-color: var(--glass-bdr-a); background: var(--purple-dim); color: #fff; }
body.v2 .int-chip-more { background: rgba(139,92,246,0.14); border-color: rgba(139,92,246,0.28); color: var(--purple-light); }

body.v2 .approach-cta { text-align: center; margin-top: clamp(32px, 4vw, 48px); }

@media (max-width: 720px) {
  body.v2 .approach-features { grid-template-columns: 1fr; }
}

/* ---- V2: floating CTA bar (per UI/UX Pro Max skill) ---- */
body.v2 .v2-float-cta {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 140%);
  z-index: 90; display: flex; align-items: center; gap: 18px;
  padding: 12px 12px 12px 22px; border-radius: 999px;
  background: rgba(16,14,22,0.82); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(139,92,246,0.3);
  box-shadow: 0 20px 50px -18px rgba(0,0,0,0.8), 0 0 40px -12px var(--purple-glow);
  opacity: 0; transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
  max-width: calc(100vw - 28px);
}
body.v2 .v2-float-cta.show { transform: translate(-50%, 0); opacity: 1; }
body.v2 .v2-float-cta span { font-size: 0.92rem; font-weight: 600; color: var(--text); white-space: nowrap; }
body.v2 .v2-float-cta .btn-primary { padding: 11px 20px; font-size: 0.88rem; white-space: nowrap; }
@media (max-width: 640px) {
  body.v2 .v2-float-cta span { display: none; }
  body.v2 .v2-float-cta { padding: 8px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body.v2 .v2-float-cta { transition: opacity 0.3s; }
}

/* ============================================================
   FLAGSHIP LAYER  —  scoped to body.flagship (/ai-agency-albury,
   /locations/albury, /locations/wodonga). Layers on top of v2:
   token-accurate type (Inter Tight), calmer accent blue, tighter
   card radius, ambient glow killed in favour of a static, editorial
   read. Selectors that don't exist on a given page are harmless no-ops.
   ============================================================ */

/* ---- Type system ---- */
body.flagship { font-family: 'Plus Jakarta Sans','Inter',sans-serif; }
body.flagship .nav-wrap, body.flagship .site-foot { font-family: 'Inter',sans-serif; }
body.flagship h1, body.flagship h2, body.flagship h3,
body.flagship .page-h1, body.flagship .section-h2, body.flagship .svc-detail-h2,
body.flagship .page-cta-h2, body.flagship .svc-card h3, body.flagship .approach-feature h3,
body.flagship .process-step h3 {
  font-family: 'Inter Tight','Inter',sans-serif; letter-spacing: -0.015em;
}
body.flagship .overline-tag {
  font-family: 'Geist Mono',monospace; letter-spacing: 0.14em; font-weight: 500; font-size: 0.68rem;
}
body.flagship .page-sub { font-family: 'Plus Jakarta Sans',sans-serif; color: #c6c1d4; }

/* ---- Headline: disciplined, static duotone mark (no shimmer) ---- */
body.flagship .page-h1 {
  font-weight: 800; color: #f0ecff; letter-spacing: -0.02em; line-height: 1.02;
  font-size: clamp(2.5rem, 5.8vw, 4.7rem);
}
body.flagship .h1-mark {
  background: linear-gradient(100deg, #a78bfa 0%, #7cc5ff 55%, #40c5ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: none;
}

/* ---- Quiet the v2 aurora so the flow is the star ---- */
body.flagship .page-hero::after { opacity: 0.4; filter: blur(46px); }
body.flagship .flagship-hero { padding-block: clamp(118px, 15vw, 188px) clamp(60px, 7vw, 96px); }
body.flagship .flagship-hero-top { position: relative; z-index: 2; max-width: 880px; display: flex; flex-direction: column; gap: 20px; }

/* ================= SIGNATURE: manual -> automated flow ================= */
body.flagship .flow-diagram {
  position: relative; z-index: 2; margin-top: clamp(48px, 6vw, 82px);
  padding: clamp(24px, 3vw, 38px);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border: 1px solid var(--glass-bdr);
  box-shadow: 0 60px 120px -60px rgba(139,92,246,0.5);
}
body.flagship .flow-legend {
  display: flex; align-items: center; gap: 12px; margin-bottom: 30px;
  font-family: 'Geist Mono',monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
}
body.flagship .fl-manual { color: #d8a24a; }
body.flagship .fl-auto { color: #40c5ff; }
body.flagship .fl-arrow { color: var(--text-4); }

body.flagship .flow-stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
body.flagship .flow-stage { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
body.flagship .fs-step { font-family: 'Geist Mono',monospace; font-size: 0.72rem; color: var(--purple-light); }
body.flagship .fs-name { font-family: 'Inter Tight',sans-serif; font-weight: 700; font-size: 1.04rem; color: #f0ecff; margin-bottom: 3px; }
body.flagship .fs-chip {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
  font-size: 0.8rem; font-weight: 500; line-height: 1.35; border: 1px solid;
}
body.flagship .fs-chip.manual { background: rgba(216,162,74,0.06); border-color: rgba(216,162,74,0.26); color: #c6a068; }
body.flagship .fs-chip.manual::before { content: "\00d7  "; opacity: 0.75; }
body.flagship .fs-chip.auto {
  background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(64,197,255,0.09));
  border-color: rgba(64,197,255,0.30); color: #e4ecff;
}
body.flagship .fs-chip.auto::before { content: "\2713  "; color: #40c5ff; }

body.flagship .flow-rail { position: relative; height: 2px; margin-top: 24px; border-radius: 2px; background: linear-gradient(90deg, rgba(216,162,74,0.45), var(--purple) 45%, #40c5ff); overflow: visible; }
body.flagship .flow-pulse { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 46px; height: 8px; border-radius: 8px; background: radial-gradient(circle, #40c5ff, transparent 70%); filter: blur(1px); animation: flow-travel 4.4s linear infinite; }
@keyframes flow-travel { 0% { left: -4%; } 100% { left: 104%; } }

@media (max-width: 760px) {
  body.flagship .flow-stages { grid-template-columns: 1fr 1fr; }
  body.flagship .flow-rail { display: none; }
}
@media (max-width: 460px) {
  body.flagship .flow-stages { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  body.flagship .flow-pulse { animation: none; opacity: 0.9; }
}

/* ---- V2: Industries grid ---- */
body.v2 .ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(36px, 4.5vw, 56px); }
body.v2 .ind-card {
  padding: 28px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border: 1px solid var(--glass-bdr);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.4s var(--ease-out), border-color 0.4s, background 0.4s, box-shadow 0.4s;
}
body.v2 .ind-card:hover {
  transform: translateY(-6px); border-color: var(--glass-bdr-a);
  background: rgba(255,255,255,0.045); box-shadow: 0 24px 55px -28px rgba(139,92,246,0.45);
}
body.v2 .ind-icon {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(139,92,246,0.06));
  border: 1px solid rgba(139,92,246,0.25); color: var(--purple-light);
}
body.v2 .ind-card h3 { font-size: 1.12rem; font-weight: 700; color: var(--text); letter-spacing: -0.015em; margin: 0; }
body.v2 .ind-card p { font-size: 0.9rem; color: var(--text-2); line-height: 1.6; margin: 0; flex: 1; }
body.v2 .ind-proof {
  font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--purple-light); padding-top: 4px;
}
@media (max-width: 900px) { body.v2 .ind-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { body.v2 .ind-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FLAGSHIP LAYER, PASS 2 — bigger bento typography, feature pills,
   a full-bleed CTA band, hero capability row and ambient glow.
   Closes the gap to the leadhouse.ca reference: oversized editorial
   service cards and a bold solid-colour CTA break, not a tinted
   card on the same dark background.
   ============================================================ */

/* ---- Hero: capability row + ambient cursor glow ---- */
body.flagship .hero-caps { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 14px; margin: 2px 0 4px; }
body.flagship .hero-caps span { font-size: 0.86rem; color: var(--text-3); font-weight: 500; font-family: 'Plus Jakarta Sans',sans-serif; }
body.flagship .hero-caps .sep { color: var(--text-4); font-size: 0.6rem; }
body.flagship .hero-trust { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--text-3); margin-top: -4px; }
body.flagship .hero-trust svg { color: #40c5ff; flex-shrink: 0; }

/* ---- Bento cards: oversized editorial titles + feature pills ---- */
body.flagship .services-bento .svc-card { padding: clamp(26px, 3vw, 40px); gap: 16px; }
body.flagship .services-bento .svc-card h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -0.015em; }
body.flagship .services-bento .svc-card.svc-featured h3 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
body.flagship .services-bento .svc-card p { font-size: 0.96rem; line-height: 1.65; }
body.flagship .svc-pill-row { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 2px 0 0; }
body.flagship .svc-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-2); font-weight: 500; }
body.flagship .svc-pill svg { color: #40c5ff; flex-shrink: 0; }

/* ---- Full-bleed CTA band: solid colour, not a tinted card ---- */
body.flagship .page-cta-inner {
  background: linear-gradient(135deg, var(--purple) 0%, #4c1d95 100%);
  border: none;
}
body.flagship .page-cta-inner::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
  pointer-events: none;
}
body.flagship .page-cta-inner::after { display: none; }
body.flagship .page-cta-h2 { color: #fff; }
body.flagship .page-cta-inner p { color: rgba(255,255,255,0.85); }
body.flagship .page-cta-section .btn-primary {
  background: #fff; color: #1a1025; box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}
body.flagship .page-cta-section .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.34); }

/* ---- Showcase panel + featured-card glow ring (rotating, subtle) ---- */
@property --flag-glow-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
body.flagship .flow-diagram,
body.flagship .services-bento .svc-card.svc-featured { position: relative; }
body.flagship .flow-diagram::before,
body.flagship .services-bento .svc-card.svc-featured::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--flag-glow-angle), transparent 0%, rgba(100,236,255,0.7) 8%, transparent 22%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: flag-glow-spin 6s linear infinite; pointer-events: none;
}
@keyframes flag-glow-spin { to { --flag-glow-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  body.flagship .flow-diagram::before,
  body.flagship .services-bento .svc-card.svc-featured::after { animation: none; }
}

/* ---- Decorative sparkle accent (leadhouse.ca motif) ----
   A small four-point star in the card corner, breathing gently at rest
   and brightening on hover. Reused from the nav's GEO icon path, so it
   reads as part of the brand rather than a borrowed flourish. Only on
   the primary "What We Automate" bento, not every card on the page. */
body.flagship .svc-card-sparkle {
  position: absolute; top: 20px; right: 22px; width: 18px; height: 18px;
  color: rgba(139,92,246,0.4); z-index: 1; pointer-events: none;
  transition: transform 0.6s cubic-bezier(.44,0,.56,1), color 0.4s cubic-bezier(.44,0,.56,1);
  animation: svc-sparkle-breathe 3.6s cubic-bezier(.44,0,.56,1) infinite;
}
body.flagship .svc-card:hover .svc-card-sparkle { color: #64ecff; transform: scale(1.35) rotate(14deg); }
@keyframes svc-sparkle-breathe { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { body.flagship .svc-card-sparkle { animation: none; } }

/* ---- Real asymmetric masonry rhythm for the bento grids ----
   Leadhouse never runs a flat N-across row: it's full / half+half /
   full / half+half. A 3-col grid with only the first card widened
   (the sitewide default) reads as one big card bolted onto a plain
   row. This makes every "What We Automate" and "The Proof" grid
   alternate properly. Card 4 gets the same treatment via the
   svc-featured class added directly in the markup (position 4 in
   "What We Automate"); "The Proof" only has 3 cards so nothing extra
   triggers there, it just gets the initial full/half+half naturally. */
body.flagship .services-bento { grid-template-columns: repeat(2, 1fr); gap: 18px; }
body.flagship .services-bento .svc-card:nth-child(4) { grid-column: span 2; }
@media (max-width: 760px) {
  body.flagship .services-bento { grid-template-columns: 1fr; }
  body.flagship .services-bento .svc-card.svc-featured,
  body.flagship .services-bento .svc-card:nth-child(4) { grid-column: span 1; }
}

/* ---- Bolder section rhythm: more air, bigger confident type ---- */
body.flagship .services-overview,
body.flagship .approach-section,
body.flagship .industries-section,
body.flagship .process-section { padding-block: clamp(72px, 9vw, 130px); }
body.flagship .section-h2 { font-size: clamp(2.3rem, 4.8vw, 3.7rem); }
body.flagship .section-sub { font-size: 1.08rem; }

/* ============================================================
   FLAGSHIP LAYER, PASS 3 — kill the ambient glow, not just the layout.
   Leadhouse reads stark: near-black, white type, purple used only on
   buttons and small accents. This page kept every one of Automatrix's
   ambient effects running underneath the new layout (particle canvas,
   cursor-follow glow, an animated aurora blob behind the hero, rotating
   conic-gradient rings on cards) — that constant glow is what actually
   reads as "generic AI-SaaS," regardless of how the cards are arranged.
   Turning it off is what makes the page look different, not another
   layout pass on top of it.
   ============================================================ */
body.flagship #hero-canvas,
body.flagship .cursor-glow { display: none !important; }
body.flagship .page-hero::before,
body.flagship .page-hero::after { display: none; }

/* Flat, matte card surfaces. Contrast comes from a border brightening
   on hover, not a permanent gradient wash or glow. */
body.flagship .svc-card,
body.flagship .ind-card,
body.flagship .approach-feature {
  background: #0a0a0d;
  border-color: rgba(255,255,255,0.09);
  box-shadow: none;
}
body.flagship .svc-card:hover,
body.flagship .ind-card:hover,
body.flagship .approach-feature:hover {
  background: #0a0a0d;
  border-color: rgba(255,255,255,0.24);
  box-shadow: none;
  transform: translateY(-3px);
}

/* Rotating conic-gradient rings replaced with a plain static border:
   still marks the featured cards as special, without the constant
   motion competing with everything else on the page. */
body.flagship .flow-diagram::before,
body.flagship .services-bento .svc-card.svc-featured::after { content: none; }
body.flagship .flow-diagram { border-color: rgba(139,92,246,0.32); }
body.flagship .services-bento .svc-card.svc-featured { border-color: rgba(139,92,246,0.4); }

/* Sparkle: quieter, purple only, no cyan hover flourish. */
body.flagship .svc-card-sparkle { color: rgba(255,255,255,0.22); animation-duration: 4.5s; }
body.flagship .svc-card:hover .svc-card-sparkle { color: var(--purple-light); transform: scale(1.2); }

/* Push contrast up: near-white headings and body copy, not a wash of
   mid-grey competing with a purple-tinted background. */
body.flagship .page-h1 { color: #fdfcff; }
body.flagship .page-sub { color: #c9c4d6; }
body.flagship .section-h2 { color: #fdfcff; }
body.flagship .svc-card p, body.flagship .ind-card p, body.flagship .approach-feature p { color: #ada7bc; }
body.flagship .svc-card h3, body.flagship .ind-card h3 { color: #fdfcff; }

/* ============================================================
   FLAGSHIP LAYER, PASS 4 — closer structural read of leadhouse.ca:
   near-silent hero eyebrow (headline is the first thing you see, not
   a badge above it), an even bigger headline, and cards with real
   negative space instead of tightly packed content. Content and
   client list stay 100% Automatrix's own — this borrows the layout
   language, not leadhouse's copy or brand.
   ============================================================ */
body.flagship .flagship-hero-top .overline-tag {
  font-size: 0.66rem; color: var(--text-3); opacity: 0.8;
}
body.flagship .flagship-hero-top .overline-tag::before { opacity: 0.35; }
body.flagship .page-h1 { font-size: clamp(2.15rem, 4.1vw, 3.4rem); }
/* body.v2 .page-hero-animated sets padding-block: clamp(120px, 16vw, 220px),
   which on a laptop opened every location and industry page with 220px of
   nothing above a headline that then ran past the fold, pushing the only call
   to action out of sight. */
body.flagship .page-hero,
body.flagship .page-hero-animated {
  padding-block: clamp(96px, 8vw, 116px) clamp(44px, 5vw, 64px);
}
body.flagship .page-hero-inner { gap: 14px; }

/* The trust row on the inner pages. #amx-cases is styled for the homepage
   band, which sits inside a dark full-bleed section; here it has to provide
   its own breathing room and sit on the page background. */
#amx-cases.amx-cases-inner {
  padding: clamp(26px, 4vw, 40px) 0 clamp(18px, 3vw, 28px);
  background: var(--bg);
  border-bottom: 1px solid var(--glass-bdr, rgba(255, 255, 255, 0.08));
}
#amx-cases.amx-cases-inner .amx-cases-title {
  text-align: center;
  margin-bottom: 14px;
}
body.flagship .hero-caps .cap { font-size: 1rem; color: var(--text-2); }

/* Cards get real breathing room at the bottom instead of the CTA
   link sitting right under the last line of copy. */
body.flagship .services-bento .svc-card { min-height: 300px; padding-bottom: clamp(32px, 4vw, 48px); }
body.flagship .services-bento .svc-card.svc-featured { min-height: 260px; }
body.flagship .svc-link { margin-top: auto; }

/* Logos-right-after-hero reads better with less top padding, since
   the hero above no longer ends on a hard CTA row. */
body.flagship .logos-section { padding-block: clamp(20px, 3vw, 36px) clamp(48px, 6vw, 76px); }

/* ============================================================
   FLAGSHIP LAYER, PASS 5 — token-accurate pass against leadhouse.ca's
   actual source (colors, type, radius pulled directly from their
   shipped CSS, not eyeballed from screenshots). Two real deltas found:
   headings run Inter Tight, not a rounded display face, and their
   card radius sits around 15px, noticeably tighter than the 24-32px
   this page was using — the tighter corner is a big part of why their
   cards read "editorial" instead of "SaaS bento." Accent blue tuned
   from a neon cyan to their actual #40c5ff, which is calmer on a
   near-black background. Copy and structure are unchanged.
   ============================================================ */
body.flagship .svc-card,
body.flagship .ind-card,
body.flagship .approach-feature { border-radius: 16px; }
body.flagship .flow-diagram,
body.flagship .page-cta-inner { border-radius: 18px; }
body.flagship .page-cta-h2 { letter-spacing: -0.02em; }

/* Location pages (albury/wodonga) use the older .h1-gradient shimmer
   span instead of ai-agency-albury's .h1-mark. Bring it into the same
   static, disciplined treatment and the tuned accent blue. */
body.flagship .h1-gradient {
  background: linear-gradient(100deg, #a78bfa 0%, #7cc5ff 55%, #40c5ff 100%);
  background-size: auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: none;
}

/* ============================================================
   BLOG INDEX — featured bento + image cards
   ============================================================ */
.blogx-main { padding: 132px 0 96px; min-height: 70vh; }
.blogx-head { position: relative; max-width: 760px; margin: 0 0 44px; }
.blogx-bgword {
  position: absolute;
  top: -0.34em; left: -0.08em;
  z-index: -1;
  font-size: clamp(140px, 22vw, 320px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.028);
  user-select: none;
  pointer-events: none;
}
.blogx-head h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 14px 0 14px;
}
.blogx-sub { color: var(--text-2); font-size: 1.06rem; line-height: 1.7; max-width: 640px; }

/* ---------- featured bento ---------- */
.blogx-featured {
  display: grid;
  grid-template-columns: 1fr 0.62fr;
  grid-auto-rows: 1fr;
  gap: 18px;
  height: 620px;
  margin-bottom: 64px;
}
.blogx-f {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--glass-bdr);
  padding: 26px;
  color: #fff;
  text-decoration: none;
  background-image: var(--cover);
  background-size: cover;
  background-position: center;
  transition: transform 0.45s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              border-color 0.35s ease, box-shadow 0.45s ease;
}
.blogx-f--primary { grid-row: span 2; }
.blogx-f::after {
  /* slow zoom on the art itself, not the text */
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.blogx-f:hover { transform: scale(0.988) rotate(0.3deg); border-color: var(--glass-bdr-a); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.blogx-f:hover::after { opacity: 1; }
.blogx-f-scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 118%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 8%, rgba(0, 0, 0, 0.45) 46%, transparent 100%);
  transition: height 0.5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.blogx-f:hover .blogx-f-scrim { height: 100%; }
.blogx-f-body { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 14px; }
.blogx-f-text { display: flex; flex-direction: column; gap: 11px; flex: 1; min-width: 0; }
.blogx-f h2 {
  font-size: 1.45rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
.blogx-f--primary h2 { font-size: clamp(1.7rem, 2.5vw, 2.3rem); }
.blogx-hook {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}
.blogx-f--primary .blogx-hook { font-size: 1.08rem; max-width: 30ch; }

/* ---------- shared bits ---------- */
.blogx-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}
.blogx-chip--float { position: absolute; left: 14px; bottom: 14px; z-index: 2; }
.blogx-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}
.blogx-card .blogx-meta { color: var(--text-3); }
.blogx-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.blogx-arrow {
  width: 34px; height: 34px;
  flex: none;
  opacity: 0.85;
  transition: transform 0.3s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)), opacity 0.3s ease;
}
.blogx-f:hover .blogx-arrow { transform: translateX(7px); opacity: 1; }

/* ---------- category tabs ---------- */
.blogx-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 64px; }
.blogx-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 99px;
  border: 1px solid var(--glass-bdr);
  background: var(--glass);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.blogx-tabs a:hover { border-color: var(--glass-bdr-a); color: #fff; transform: translateY(-2px); }
.blogx-tabs a span { color: var(--text-3); font-weight: 400; }

/* ---------- category sections ---------- */
.blogx-sec { margin-bottom: 76px; scroll-margin-top: 110px; }
.blogx-sec-head { margin-bottom: 26px; }
.blogx-sec-head h2 {
  display: inline;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.blogx-count { margin-left: 12px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.blogx-sec-head p { margin: 8px 0 0; color: var(--text-2); font-size: 0.95rem; }

.blogx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.blogx-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--glass-bdr);
  background: var(--glass);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, transform 0.35s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 0.35s ease;
}
.blogx-card:hover {
  border-color: var(--glass-bdr-a);
  transform: translateY(-4px);
  box-shadow: 0 24px 44px -28px rgba(0, 0, 0, 0.9);
}
.blogx-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 8.4;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.blogx-card:hover .blogx-card-media { transform: scale(1.045); }
.blogx-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.blogx-card-body h3 {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.blogx-card-body p { margin: 0; color: var(--text-2); font-size: 0.92rem; line-height: 1.62; }
.blogx-card-body .blogx-meta { margin-top: auto; padding-top: 4px; }
.blogx-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 650;
  color: var(--purple-light);
}
.blogx-more .blogx-arrow { width: 17px; height: 17px; }
.blogx-card:hover .blogx-more .blogx-arrow { transform: translateX(5px); }

/* ---------- client access callout ---------- */
.blogx-cta {
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: 20px;
  padding: 30px;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.08), rgba(255, 255, 255, 0.01));
}
.blogx-cta-tag {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple-light);
}
.blogx-cta h2 { font-size: 1.3rem; font-weight: 750; margin: 0 0 8px; letter-spacing: -0.02em; }
.blogx-cta-sub { margin: 0 0 20px; color: var(--text-2); font-size: 0.95rem; line-height: 1.6; }
.blogx-cta-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.blogx-cta-links a {
  padding: 15px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.blogx-cta-links a:hover { border-color: var(--glass-bdr-a); transform: translateY(-2px); }
.blogx-cta-links .blogx-cta-alt { border-style: dashed; color: var(--text-2); }

@media (max-width: 1000px) {
  .blogx-featured { grid-template-columns: 1fr 1fr; height: auto; }
  .blogx-f { min-height: 300px; }
  .blogx-f--primary { grid-column: span 2; grid-row: auto; min-height: 360px; }
}
@media (max-width: 700px) {
  .blogx-main { padding-top: 108px; }
  .blogx-featured { grid-template-columns: 1fr; gap: 14px; }
  .blogx-f--primary { grid-column: auto; }
  .blogx-f { min-height: 272px; padding: 22px; }
  .blogx-grid { grid-template-columns: 1fr; }
  .blogx-arrow { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .blogx-f, .blogx-card, .blogx-card-media, .blogx-arrow, .blogx-f-scrim, .blogx-tabs a { transition: none; }
  .blogx-f:hover, .blogx-card:hover { transform: none; }
  .blogx-card:hover .blogx-card-media { transform: none; }
}

/* ---- CTA secondary path (direct booking link under the audit button) ---- */
.page-cta-alt { margin: 16px 0 0; font-size: 0.92rem; color: var(--text-2, rgba(255,255,255,0.72)); }
.page-cta-alt a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.page-cta-alt a:hover { color: var(--text, #fff); }

/* ============ /services/seo revamp (body.seo-v3) ============
   One memorable element: the hero panel that shows the two places a customer
   finds a business (map results, AI answer) with the visitor's own business
   named first. Everything below it is flat, left-aligned and typographic:
   a numbers band, a scope sheet, a timeline, a price table, an accordion.
   No card grid, no per-section reveals. */

body.seo-v3 { --seo-line: rgba(255,255,255,0.09); --seo-line-strong: rgba(255,255,255,0.16); --seo-ink: var(--text); --seo-ink-2: var(--text-2); --seo-accent: #8B5CF6; --seo-found: #6EE7B7; }
html:not(.amx-dark):not(.amx-nav-dark) body.seo-v3 { --seo-line: rgba(9,9,11,0.10); --seo-line-strong: rgba(9,9,11,0.18); --seo-found: #047857; }

body.seo-v3 h2 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; font-size: clamp(1.7rem, 3.3vw, 2.5rem); max-width: 22ch; margin: 0 0 18px; }
body.seo-v3 h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
body.seo-v3 p { max-width: 64ch; }
body.seo-v3 .seo3-lead { font-size: 1.08rem; color: var(--seo-ink-2); line-height: 1.7; margin: 0 0 36px; }
body.seo-v3 .seo3-foot, body.seo-v3 .seo3-proof-foot, body.seo-v3 .seo3-places-foot { color: var(--seo-ink-2); font-size: 0.95rem; margin-top: 28px; }
body.seo-v3 .seo3-foot a, body.seo-v3 .seo3-proof-foot a, body.seo-v3 .seo3-places-foot a, body.seo-v3 .seo3-other a { color: var(--seo-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--seo-line-strong); }
body.seo-v3 .seo3-foot a:hover, body.seo-v3 .seo3-proof-foot a:hover, body.seo-v3 .seo3-places-foot a:hover, body.seo-v3 .seo3-other a:hover { text-decoration-color: var(--seo-accent); }

/* ---- hero ---- */
body.seo-v3 .seo3-hero { padding-bottom: clamp(48px, 6vw, 80px); }
body.seo-v3 .seo3-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
body.seo-v3 .seo3-kicker { color: var(--seo-ink-2); font-size: 0.95rem; margin: 0 0 14px; }
body.seo-v3 .seo3-hero .page-h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); max-width: 16ch; margin: 0 0 20px; }
body.seo-v3 .seo3-hero .page-sub { margin: 0 0 28px; max-width: 58ch; }
body.seo-v3 .seo3-hero .hero-ctas { margin-bottom: 18px; }
body.seo-v3 .seo3-hero-note { font-size: 0.9rem; color: var(--seo-ink-2); max-width: 52ch; margin: 0; }

body.seo-v3 .seo3-panel { position: relative; display: grid; gap: 14px; }
body.seo-v3 .seo3-card { margin: 0; border: 1px solid var(--seo-line-strong); border-radius: 14px; background: rgba(255,255,255,0.03); overflow: hidden; box-shadow: 0 24px 60px -30px rgba(0,0,0,0.6); }
html:not(.amx-dark):not(.amx-nav-dark) body.seo-v3 .seo3-card { background: #fff; box-shadow: 0 24px 60px -36px rgba(9,9,11,0.35); }
body.seo-v3 .seo3-card-ai { margin-left: clamp(0px, 4vw, 44px); }
body.seo-v3 .seo3-card-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--seo-line); font-size: 0.85rem; color: var(--seo-ink-2); }
body.seo-v3 .seo3-card-query { color: var(--seo-ink); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.seo-v3 .seo3-card-src { font-size: 0.78rem; white-space: nowrap; }
body.seo-v3 .seo3-card-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--seo-accent); box-shadow: 0 0 0 4px rgba(139,92,246,0.18); }
body.seo-v3 .seo3-card-dot-ai { background: var(--seo-found); box-shadow: 0 0 0 4px rgba(110,231,183,0.16); }
body.seo-v3 .seo3-serp { list-style: none; margin: 0; padding: 6px 0; counter-reset: serp; }
body.seo-v3 .seo3-serp li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 11px 16px 11px 46px; border-top: 1px solid var(--seo-line); counter-increment: serp; }
body.seo-v3 .seo3-serp li:first-child { border-top: 0; }
body.seo-v3 .seo3-serp li::before { content: counter(serp); position: absolute; left: 16px; top: 12px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--seo-line-strong); font-size: 0.72rem; display: grid; place-items: center; color: var(--seo-ink-2); }
body.seo-v3 .seo3-serp-name { font-weight: 600; grid-column: 1; }
body.seo-v3 .seo3-serp-meta { grid-column: 1; font-size: 0.82rem; color: var(--seo-ink-2); }
body.seo-v3 .seo3-serp-tag { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; padding: 3px 9px; border-radius: 999px; background: rgba(110,231,183,0.14); color: var(--seo-found); }
body.seo-v3 .seo3-serp-you { background: linear-gradient(90deg, rgba(139,92,246,0.12), transparent 70%); }
body.seo-v3 .seo3-serp-you::before { border-color: var(--seo-accent); color: var(--seo-ink); }
body.seo-v3 .seo3-stars { color: #F5B301; letter-spacing: -1px; font-size: 0.8rem; }
body.seo-v3 .seo3-ai { padding: 14px 16px 12px; }
body.seo-v3 .seo3-ai p { margin: 0; font-size: 0.95rem; line-height: 1.6; max-width: none; }
body.seo-v3 .seo3-ai strong { color: var(--seo-found); font-weight: 700; }
body.seo-v3 .seo3-ai-cite { margin-top: 10px !important; font-size: 0.78rem !important; color: var(--seo-ink-2); }
body.seo-v3 .seo3-panel-note { margin: 4px 0 0; font-size: 0.85rem; color: var(--seo-ink-2); max-width: none; text-align: right; }

/* ---- proof band ---- */
body.seo-v3 .seo3-proof { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--seo-line); border-bottom: 1px solid var(--seo-line); background: var(--bg-1); }
body.seo-v3 .seo3-proof-head { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); align-items: start; margin-bottom: 36px; }
body.seo-v3 .seo3-proof-head h2 { margin: 0; }
body.seo-v3 .seo3-proof-head p { margin: 0; color: var(--seo-ink-2); line-height: 1.7; }
body.seo-v3 .seo3-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-top: 1px solid var(--seo-line-strong); }
body.seo-v3 .seo3-stats > div { padding: 22px 20px 20px 0; border-right: 1px solid var(--seo-line); margin-right: 20px; }
body.seo-v3 .seo3-stats > div:last-child { border-right: 0; margin-right: 0; }
body.seo-v3 .seo3-stats dt { font-size: 0.85rem; color: var(--seo-ink-2); margin-bottom: 6px; }
body.seo-v3 .seo3-stats dd { margin: 0; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
body.seo-v3 .seo3-proof-foot { margin-top: 24px; }

/* ---- two places ---- */
body.seo-v3 .seo3-places { padding: clamp(56px, 7vw, 96px) 0; }
body.seo-v3 .seo3-places h2 { max-width: 28ch; margin-bottom: 32px; }
body.seo-v3 .seo3-places-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
body.seo-v3 .seo3-places-grid > div { padding: 0 clamp(20px, 3vw, 44px) 0 0; }
body.seo-v3 .seo3-places-grid > div + div { border-left: 1px solid var(--seo-line); padding: 0 0 0 clamp(20px, 3vw, 44px); }
body.seo-v3 .seo3-places-grid p { margin: 0; color: var(--seo-ink-2); line-height: 1.7; }

/* ---- scope sheet ---- */
body.seo-v3 .seo3-scope { padding: clamp(56px, 7vw, 96px) 0; background: var(--bg); }
body.seo-v3 .seo3-scope-table { border-top: 1px solid var(--seo-line-strong); }
body.seo-v3 .seo3-scope-row { display: grid; grid-template-columns: 200px 1fr; gap: 12px 32px; padding: 22px 0; border-bottom: 1px solid var(--seo-line); }
body.seo-v3 .seo3-scope-key { font-weight: 700; letter-spacing: -0.01em; }
body.seo-v3 .seo3-scope-row ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.seo-v3 .seo3-scope-row li { position: relative; padding-left: 18px; color: var(--seo-ink-2); line-height: 1.55; max-width: 70ch; }
body.seo-v3 .seo3-scope-row li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 2px; background: var(--seo-accent); opacity: 0.85; }

/* ---- timeline ---- */
body.seo-v3 .seo3-process { padding: clamp(56px, 7vw, 96px) 0; background: var(--bg-1); border-top: 1px solid var(--seo-line); border-bottom: 1px solid var(--seo-line); }
body.seo-v3 .seo3-timeline { list-style: none; margin: 0; padding: 0; counter-reset: step; }
body.seo-v3 .seo3-timeline li { display: grid; grid-template-columns: 200px 1fr; gap: 8px 32px; padding: 0 0 34px 0; position: relative; counter-increment: step; }
body.seo-v3 .seo3-timeline li > div { position: relative; padding-left: 34px; }
body.seo-v3 .seo3-timeline li > div::before { content: counter(step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--seo-line-strong); background: var(--bg-1); font-size: 0.78rem; font-weight: 700; display: grid; place-items: center; z-index: 1; }
body.seo-v3 .seo3-timeline li > div::after { content: ""; position: absolute; left: 11.5px; top: 26px; bottom: -34px; width: 1px; background: var(--seo-line-strong); }
body.seo-v3 .seo3-timeline li:last-child > div::after { display: none; }
body.seo-v3 .seo3-timeline li:last-child { padding-bottom: 0; }
body.seo-v3 .seo3-when { color: var(--seo-ink-2); font-size: 0.92rem; padding-top: 3px; }
body.seo-v3 .seo3-timeline p { margin: 0; color: var(--seo-ink-2); line-height: 1.65; }

/* ---- expectations ---- */
body.seo-v3 .seo3-expect { padding: clamp(56px, 7vw, 96px) 0; }
body.seo-v3 .seo3-expect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); border-top: 1px solid var(--seo-line-strong); padding-top: 26px; }
body.seo-v3 .seo3-expect-grid p { margin: 0; color: var(--seo-ink-2); line-height: 1.65; }

/* ---- pricing ---- */
body.seo-v3 .seo3-pricing { padding: clamp(56px, 7vw, 96px) 0; background: var(--bg); }
body.seo-v3 .seo3-price-hint { display: none; font-size: 0.85rem; color: var(--seo-ink-2); margin: -16px 0 12px; }
body.seo-v3 .seo3-price-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }
body.seo-v3 .seo3-price tbody th[scope="row"], body.seo-v3 .seo3-price thead th:first-child { position: sticky; left: 0; background: var(--bg); z-index: 1; }
body.seo-v3 .seo3-price { width: 100%; min-width: 720px; border-collapse: collapse; border-top: 1px solid var(--seo-line-strong); }
body.seo-v3 .seo3-price th, body.seo-v3 .seo3-price td { text-align: left; vertical-align: top; padding: 16px 20px 16px 0; border-bottom: 1px solid var(--seo-line); font-weight: 400; color: var(--seo-ink-2); line-height: 1.55; font-size: 0.95rem; }
body.seo-v3 .seo3-price thead th { padding-top: 22px; padding-bottom: 22px; color: var(--seo-ink); vertical-align: bottom; }
body.seo-v3 .seo3-price tbody th { color: var(--seo-ink); font-weight: 600; width: 120px; padding-right: 24px; }
body.seo-v3 .seo3-price thead tr th:first-child { padding-left: 0; }
body.seo-v3 .seo3-price-name { display: block; font-size: 0.95rem; color: var(--seo-ink-2); margin-bottom: 6px; }
body.seo-v3 .seo3-price-amt { display: block; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
body.seo-v3 .seo3-price-amt small { font-size: 0.85rem; font-weight: 500; letter-spacing: 0; color: var(--seo-ink-2); }
body.seo-v3 .seo3-price-notes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin-top: 28px; }
body.seo-v3 .seo3-price-notes p { margin: 0; color: var(--seo-ink-2); line-height: 1.65; }
body.seo-v3 .seo3-price-notes span { color: var(--seo-ink); font-weight: 600; }

/* ---- offer + guarantee ---- */
body.seo-v3 .seo3-offer { padding: clamp(56px, 7vw, 96px) 0; background: var(--bg-1); border-top: 1px solid var(--seo-line); }
body.seo-v3 .seo3-offer-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
body.seo-v3 .seo3-offer-list ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--seo-line-strong); }
body.seo-v3 .seo3-offer-list li { padding: 14px 0 14px 30px; border-bottom: 1px solid var(--seo-line); color: var(--seo-ink-2); line-height: 1.6; position: relative; max-width: 70ch; }
body.seo-v3 .seo3-offer-list li strong { color: var(--seo-ink); display: block; }
body.seo-v3 .seo3-offer-list li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 12px; height: 7px; border-left: 2px solid var(--seo-found); border-bottom: 2px solid var(--seo-found); transform: rotate(-45deg); }
body.seo-v3 .seo3-guarantee { border: 1px solid var(--seo-line-strong); border-radius: 14px; padding: clamp(20px, 3vw, 30px); background: rgba(139,92,246,0.06); position: sticky; top: 96px; }
body.seo-v3 .seo3-guarantee h3 { font-size: 1.15rem; margin-bottom: 10px; }
body.seo-v3 .seo3-guarantee > p { margin: 0 0 14px; color: var(--seo-ink-2); line-height: 1.6; }
body.seo-v3 .seo3-guarantee ul { margin: 0; padding: 0 0 0 18px; color: var(--seo-ink-2); display: grid; gap: 8px; line-height: 1.55; font-size: 0.95rem; }

/* ---- other half ---- */
body.seo-v3 .seo3-other { padding: 36px 0; border-top: 1px solid var(--seo-line); border-bottom: 1px solid var(--seo-line); }
body.seo-v3 .seo3-other p { margin: 0; color: var(--seo-ink-2); line-height: 1.7; max-width: 76ch; }

/* ---- faq ---- */
body.seo-v3 .seo3-faq { padding: clamp(56px, 7vw, 96px) 0; background: var(--bg); }
body.seo-v3 .seo3-faq-list { border-top: 1px solid var(--seo-line-strong); max-width: 820px; }
body.seo-v3 .seo3-faq-list details { border-bottom: 1px solid var(--seo-line); }
body.seo-v3 .seo3-faq-list summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-weight: 600; font-size: 1.05rem; position: relative; }
body.seo-v3 .seo3-faq-list summary::-webkit-details-marker { display: none; }
body.seo-v3 .seo3-faq-list summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid var(--seo-ink-2); border-bottom: 1.5px solid var(--seo-ink-2); transform: translateY(-70%) rotate(45deg); transition: transform var(--t-med) var(--ease-out); }
body.seo-v3 .seo3-faq-list details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
body.seo-v3 .seo3-faq-list summary:focus-visible { outline: 2px solid var(--seo-accent); outline-offset: 4px; border-radius: 4px; }
body.seo-v3 .seo3-faq-list details p { margin: 0 0 20px; color: var(--seo-ink-2); line-height: 1.65; }

/* ---- cta ---- */
body.seo-v3 .page-cta-section { border-top: 1px solid var(--seo-line); }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  body.seo-v3 .seo3-hero-grid { grid-template-columns: 1fr; }
  body.seo-v3 .seo3-panel { max-width: 560px; }
  body.seo-v3 .seo3-proof-head { grid-template-columns: 1fr; }
  body.seo-v3 .seo3-stats { grid-template-columns: repeat(2, 1fr); }
  body.seo-v3 .seo3-stats > div:nth-child(2) { border-right: 0; }
  body.seo-v3 .seo3-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--seo-line); }
  body.seo-v3 .seo3-expect-grid { grid-template-columns: 1fr; gap: 24px; }
  body.seo-v3 .seo3-offer-grid { grid-template-columns: 1fr; }
  body.seo-v3 .seo3-guarantee { position: static; }
}
@media (max-width: 720px) {
  body.seo-v3 .seo3-hero .page-h1 { max-width: none; }
  body.seo-v3 .seo3-card-ai { margin-left: 0; }
  body.seo-v3 .seo3-card-src { display: none; }
  body.seo-v3 .seo3-panel-note { text-align: left; }
  body.seo-v3 .seo3-places-grid { grid-template-columns: 1fr; }
  body.seo-v3 .seo3-places-grid > div { padding: 0; }
  body.seo-v3 .seo3-places-grid > div + div { border-left: 0; border-top: 1px solid var(--seo-line); padding: 22px 0 0; margin-top: 22px; }
  body.seo-v3 .seo3-scope-row { grid-template-columns: 1fr; gap: 10px; }
  body.seo-v3 .seo3-timeline li { grid-template-columns: 1fr; gap: 4px; }
  body.seo-v3 .seo3-when { padding-left: 34px; }
  body.seo-v3 .seo3-price-notes { grid-template-columns: 1fr; }
  body.seo-v3 .seo3-stats { grid-template-columns: 1fr 1fr; }
  body.seo-v3 .seo3-price-hint { display: block; }
  body.seo-v3 .seo3-price tbody th { width: 92px; padding-right: 14px; font-size: 0.85rem; }
  body.seo-v3 .seo3-price { min-width: 640px; }
}
@media (prefers-reduced-motion: reduce) {
  body.seo-v3 .seo3-faq-list summary::after { transition: none; }
}
body.seo-v3 .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }