/* ═══════════════════════════════════════════════════════════════════════════
   LOCAL LEADER — Shared Stylesheet
   ═══════════════════════════════════════════════════════════════════════════ */

/* Editorial italic serif for the two-font headline accent. Imported here so the
   pairing (GCGatuzo sans + Fraunces italic) is available on EVERY page that links
   shared.css — no per-page <link> required. @import must precede all other rules. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,300..600&display=swap');

/* ── Font Faces ──────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'GCGatuzo';
  src: url('GCGatuzo-ExtraLight.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GCGatuzo';
  src: url('GCGatuzo-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GCGatuzo';
  src: url('GCGatuzo-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GCGatuzo';
  src: url('GCGatuzo-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GCGatuzo';
  src: url('GCGatuzo-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── Reset & Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --dark:       #171719;
  --navy:       #0D0D0D;
  --surface:    #111111;
  --elevated:   #1A1A1A;
  --border:     #252525;
  --orange:     #E8520A;
  --red:        #B91A00;
  --amber:      #FF8040;
  --muted:      #666666;
  /* ── Light theme tokens (site converted from dark → light) ──────────────
     Structural surfaces/text now default to a light grainy canvas. The
     hero keeps its own dark literals (#171719) so it is unaffected. */
  --bg:         #EAEAEC;   /* page canvas — light gray (grain layer below must match) */
  --bg-2:       #F2F2F3;   /* slightly lighter fill */
  /* Reusable page-canvas layers. Surfaces that must visually become part of the
     page, rather than a separate card, use these exact fixed layers. */
  --page-canvas-wash: linear-gradient(rgba(234, 234, 236, 0.7), rgba(234, 234, 236, 0.7));
  --page-canvas-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  --page-canvas-size: auto, 360px 360px;
  --ink:        #171719;   /* primary text (brand near-black) */
  --ink-2:      rgba(23, 23, 25, 0.64);  /* body / muted text */
  --ink-3:      rgba(23, 23, 25, 0.46);  /* captions / faint text */
  --card:       #FFFFFF;   /* elevated card surface */
  --card-2:     #F5F5F6;   /* secondary card / inset fill */
  --line:       rgba(23, 23, 25, 0.10);  /* hairline borders on light */
  --line-2:     rgba(23, 23, 25, 0.16);  /* stronger borders */
  --accent-ink: #C6390A;   /* accent text/links on light (darker orange for AA contrast) */
  --muted-text: var(--ink-2);   /* legacy alias used across inner pages — dark-muted on the light canvas (re-scoped light inside the dark footer) */
  --grad-btn:   linear-gradient(135deg, #FF7A30 0%, #A81500 100%);
  --grad-text:  linear-gradient(90deg, #FFB060 0%, #C83000 100%);
  /* ── Corner-radius scale ────────────────────────────────────────────────
     One family of corners across the site. The radius shrinks with element
     size so every corner reads with the SAME near-sharp character: a fixed
     7px looks crisp on a big card but too round on a 22px square. 7px is the
     ceiling; smaller items step down. Gradient-frame inners use calc(-1px). */
  --r-lg: 7px;   /* large surfaces: cards, panels, nav bar, big frames */
  --r-md: 4px;   /* buttons, chips, badges, icon buttons, toggles (~40–60px) */
  --r-sm: 2px;   /* small squares/tiles/markers (≤ ~30px) */
  /* Soft ambient lift only — no tight offset-down pool. The old
     `0 10px 30px -8px` layer concentrated directly under each card and,
     with the cards side-by-side, merged into a dark line/band below the row.
     A wide, low-opacity diffuse shadow keeps the cards floating without a seam. */
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.9);   /* cards are flat — drop shadow removed, subtle top bevel kept */
  --shadow-btn:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0px 4px 16px 0px rgba(232, 82, 10, 0.35),
    0px 4px 12px 0px rgba(0, 0, 0, 0.25);
  --shadow-ghost:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  --shadow-icon:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20);
  --shadow-pill:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 0 18px rgba(232, 82, 10, 0.15);
  --shadow-dark: 0px 10px 30px 5px rgba(0, 0, 0, 0.25);
  /* Motion tokens — used by newer rules; legacy rules keep their literals */
  --dur-1: 0.18s;
  --dur-2: 0.28s;
  --dur-3: 0.45s;
  --ease-out: cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* Dark background on <html> too: body sets the page colour, but body's
   `overflow-x: hidden` can stop that background propagating to the viewport
   canvas, letting the browser's default white show as a thin line at the top
   during scroll/overscroll (most visible over the pinned hero on mobile). */
html { scroll-behavior: auto; background-color: var(--bg); }

body {
  font-family: 'GCGatuzo', sans-serif;
  font-weight: 300;
  /* Film-grain canvas: a translucent gray layer sits over a tiled noise image, so
     ~18% of the noise reads through as texture on the gray. It's a body background
     (behind ALL content) so text/cards stay crisp — no z-index or blend-mode. The
     dark hero/footer/black cards paint their own bg over it and stay untextured.
     Grain strength = 1 minus the gray layer's alpha (0.82 → ~18% grain). */
  background-color: var(--bg);
  background-image: var(--page-canvas-wash), var(--page-canvas-noise);
  background-size: var(--page-canvas-size);
  background-attachment: fixed, fixed;
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.6;
}

/* Grain overlay. inset:-1px pushes its blended edges just off-screen so the
   mix-blend-mode can't render a hairline where the fixed layer meets the
   viewport edge (showed as a thin light line at the top on mobile). */
/* ── Utilities ───────────────────────────────────────────────────────────── */
.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Shiny CTA (animated conic-gradient border + shimmer) ─────────────────────
   Adapted from a shared "shiny-cta" pattern: brand orange + GCGatuzo font. */
@property --gradient-angle        { syntax: "<angle>";      initial-value: 0deg;  inherits: false; }
@property --gradient-angle-offset { syntax: "<angle>";      initial-value: 0deg;  inherits: false; }
@property --gradient-percent      { syntax: "<percentage>"; initial-value: 5%;    inherits: false; }
@property --gradient-shine        { syntax: "<color>";      initial-value: white; inherits: false; }

.btn-primary {
  --shiny-cta-bg: #000000;
  --shiny-cta-bg-subtle: #1a1818;
  --shiny-cta-fg: #ffffff;
  --shiny-cta-highlight: #FF8040;          /* brand orange (was blue) */
  --shiny-cta-highlight-subtle: #FFB68C;   /* lighter orange (was #8484ff) */
  --animation: gradient-angle linear infinite;
  --duration: 3s;
  --shadow-size: 2px;
  --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);

  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  padding: 0.6rem 1.5rem;
  font-family: 'GCGatuzo', sans-serif;
  font-size: 0.95rem;
  line-height: 1.2;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 360px;
  color: var(--shiny-cta-fg);
  /* sizing below is overridden inline per-button where needed */
  background:
    linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
    conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--shiny-cta-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);
  transition: var(--transition);
  transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine;
}

.btn-primary::before,
.btn-primary::after,
.btn-primary span::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}

.btn-primary:active { translate: 0 1px; }

/* Dots pattern */
.btn-primary::before {
  --size: calc(100% - var(--shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
    circle at var(--position) var(--position),
    white calc(var(--position) / 4),
    transparent 0
  ) padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 10% 90%,
    black
  );
  border-radius: inherit;
  opacity: 0.4;
  z-index: -1;
}

/* Inner shimmer */
.btn-primary::after {
  --animation: shimmer linear infinite;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(
    -50deg,
    transparent,
    var(--shiny-cta-highlight),
    transparent
  );
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.6;
}

.btn-primary span { z-index: 1; }

.btn-primary span::before {
  --size: calc(100% + 1rem);
  width: var(--size);
  height: var(--size);
  box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
  opacity: 0;
  transition: opacity var(--transition);
  animation: calc(var(--duration) * 1.5) breathe linear infinite;
}

/* Animate */
.btn-primary,
.btn-primary::before,
.btn-primary::after {
  animation: var(--animation) var(--duration),
    var(--animation) calc(var(--duration) / 0.4) reverse paused;
  animation-composition: add;
}

.btn-primary:is(:hover, :focus-visible) {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-cta-highlight-subtle);
}

.btn-primary:is(:hover, :focus-visible),
.btn-primary:is(:hover, :focus-visible)::before,
.btn-primary:is(:hover, :focus-visible)::after {
  animation-play-state: running;
}

.btn-primary:is(:hover, :focus-visible) span::before { opacity: 1; }

.btn-primary:focus-visible { outline: 2px solid var(--amber); }

@keyframes gradient-angle { to { --gradient-angle: 360deg; } }
@keyframes shimmer       { to { rotate: 360deg; } }
@keyframes breathe       { from, to { scale: 1; } 50% { scale: 1.2; } }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-top:    1px solid rgba(50, 50, 50, 0.9);
  border-right:  1px solid var(--border);
  border-bottom: 1px solid rgba(15, 15, 15, 1);
  border-left:   1px solid var(--border);
  background: rgba(255, 255, 255, 0.075);
  color: #fff;
  font-family: 'GCGatuzo', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 9999px;
  padding: 0.6rem 1.5rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-ghost);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.btn-ghost:hover {
  background: rgba(232, 82, 10, 0.14);
  border-top:    1px solid rgba(232, 82, 10, 0.5);
  border-right:  1px solid var(--orange);
  border-bottom: 1px solid rgba(232, 82, 10, 0.25);
  border-left:   1px solid var(--orange);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0px 2px 8px 0px rgba(0, 0, 0, 0.20),
    0 0 16px rgba(232, 82, 10, 0.12);
  transform: translateY(-2px);
}
.btn-ghost:active { transform: translateY(0); }
.btn-ghost:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* Expanding-arrow CTA — white pill with a black arrow-disc on the right.
   On hover/focus the disc grows to fill the pill and pushes the label out
   through the left edge; the arrow tilts from → to ↗. Size via --h. */
.btn-cta {
  --h: 44px;                                   /* pill height */
  --inset: 5px;                                /* white ring around the disc */
  --disc: calc(var(--h) - var(--inset) * 2);   /* disc diameter */
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--h);
  padding-left: 1.25rem;
  padding-right: calc(var(--disc) + 0.7rem);   /* clear the disc */
  background: #fff;
  border-radius: var(--r-md);                          /* sharp rounded rectangle, not a pill */
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-cta__label {
  position: relative;
  z-index: 1;
  color: #171719;
  font-family: 'GCGatuzo', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
  white-space: nowrap;
  text-shadow: none;   /* never inherit a page/hero text-shadow onto the pill label */
  transition: transform 0.55s cubic-bezier(0.66, 0, 0.34, 1), opacity 0.4s ease;
}
.btn-cta__disc {
  position: absolute;
  top: var(--inset);
  bottom: var(--inset);
  right: var(--inset);
  width: var(--disc);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  /* brand gradient disc (matches the floating-nav CTA) — the site-wide button look */
  background: linear-gradient(90deg, #A81500, #E8520A 55%, #FF8A50);
  border-radius: var(--r-md);                          /* matches the button body so the disc's corners nest into the outer rectangle */
  transition: width 0.55s cubic-bezier(0.66, 0, 0.34, 1);
}
.btn-cta__disc svg {
  width: 15px;
  height: 15px;
  color: #fff;
  transition: transform 0.55s cubic-bezier(0.66, 0, 0.34, 1);
}
/* Pixel-art arrowhead — swaps the vector stroke for a blocky right-pointing arrow
   (same direction, same hover tilt). The SVG's alpha is used as a mask so the
   arrow inherits `color` via currentColor, keeping every variant's colour. */
.btn-cta__disc svg > * { display: none; }
.btn-cta__disc svg {
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 80'%3E%3Cg fill='%23fff'%3E%3Crect x='0' y='32' width='16' height='16'/%3E%3Crect x='16' y='32' width='16' height='16'/%3E%3Crect x='32' y='32' width='16' height='16'/%3E%3Crect x='48' y='32' width='16' height='16'/%3E%3Crect x='64' y='32' width='16' height='16'/%3E%3Crect x='80' y='32' width='16' height='16'/%3E%3Crect x='64' y='16' width='16' height='16'/%3E%3Crect x='48' y='0' width='16' height='16'/%3E%3Crect x='64' y='48' width='16' height='16'/%3E%3Crect x='48' y='64' width='16' height='16'/%3E%3C/g%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 96 80'%3E%3Cg fill='%23fff'%3E%3Crect x='0' y='32' width='16' height='16'/%3E%3Crect x='16' y='32' width='16' height='16'/%3E%3Crect x='32' y='32' width='16' height='16'/%3E%3Crect x='48' y='32' width='16' height='16'/%3E%3Crect x='64' y='32' width='16' height='16'/%3E%3Crect x='80' y='32' width='16' height='16'/%3E%3Crect x='64' y='16' width='16' height='16'/%3E%3Crect x='48' y='0' width='16' height='16'/%3E%3Crect x='64' y='48' width='16' height='16'/%3E%3Crect x='48' y='64' width='16' height='16'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-cta:is(:hover, :focus-visible) .btn-cta__disc {
  width: calc(100% - var(--inset) * 2);
}
.btn-cta:is(:hover, :focus-visible) .btn-cta__label {
  transform: translateX(-140%);
  opacity: 0;
}
.btn-cta:is(:hover, :focus-visible) .btn-cta__disc svg {
  transform: rotate(-45deg);
}
.btn-cta:active { transform: translateY(1px); }
.btn-cta:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .btn-cta__label, .btn-cta__disc, .btn-cta__disc svg { transition: none; }
}
/* Secondary variant — inverse colours: outlined dark pill with a white disc.
   Same interaction (disc grows, label pushed out, arrow tilts). Pairs with the
   solid white .btn-cta to keep a clear primary/secondary hierarchy. */
.btn-cta--dark {
  background: transparent;
  border: 1px solid var(--line-2);
  box-shadow: none;
}
.btn-cta--dark .btn-cta__label { color: var(--ink); }
.btn-cta--dark .btn-cta__disc { background: #171719; }
.btn-cta--dark .btn-cta__disc svg { color: #fff; }

/* Hero CTA only — frosted glass so the white label reads over the busy wood photo.
   Dark tint darkens the plate while the blur softens the texture behind it. Scoped
   to #hero-ctas so the shared "Learn more"/package pills keep their flat look. */
/* Home hero only (dark video bg). Inner pages use a light hero, so their
   #hero-ctas keeps the base light-secondary look (body:not(.inner-page) guard). */
body:not(.inner-page) #hero-ctas .btn-cta--dark {
  background: rgba(23, 21, 19, 0.34);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
body:not(.inner-page) #hero-ctas .btn-cta--dark .btn-cta__label { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
/* Hero pill keeps its white disc + dark arrow over the dark video */
body:not(.inner-page) #hero-ctas .btn-cta--dark .btn-cta__disc { background: #fff; }
body:not(.inner-page) #hero-ctas .btn-cta--dark .btn-cta__disc svg { color: #171719; }

/* Apply Now (closing) CTA — same frosted-glass secondary as the home hero so the
   "Speak to the Team" pill reads on the dark closing panel and matches the hero.
   The closing section is dark on every page, so this needs no inner-page guard. */
.closing-actions .btn-cta--dark {
  background: rgba(23, 21, 19, 0.34);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.closing-actions .btn-cta--dark .btn-cta__label { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.closing-actions .btn-cta--dark .btn-cta__disc { background: #fff; }
.closing-actions .btn-cta--dark .btn-cta__disc svg { color: #171719; }

.btn-link {
  display: inline;
  color: var(--accent-ink);
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  transition: color 0.2s ease;
}
.btn-link:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.btn-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.card {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F7F8 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.card:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ============================================================
   Interactive reveal cards (.ic-*) — the reusable version of the
   home page's founder-card grid. A white gradient panel with the
   heading pinned top-left, body copy hidden until hover, and an
   orange +/- affordance box (bottom-right) that spins into a "−"
   on hover. On desktop the hovered card grows while its line-mates
   shrink (accordion); touch / no-hover devices simply show every
   card's copy. Pure CSS — no JS. Default layout targets 3-up and
   wraps gracefully for any N (e.g. 5 cards → 3 + 2).
   ============================================================ */
.ic-grid { display: flex; flex-wrap: wrap; gap: 8px; }   /* tight gap — cards almost touch, matching the home grid */
.ic-card {
  position: relative;                    /* anchor for the absolutely-pinned +/- box */
  flex: 1 1 30%; min-width: 240px;       /* ~3-up on desktop; wraps to fewer on narrow */
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: clamp(190px, 20vw, 240px); /* keep collapsed cards substantial, like the reference */
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F7F8 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.2rem, 1.8vw, 1.6rem);
  transition: box-shadow 0.45s var(--ease-out);
}
.ic-card__title {
  font-family: 'GCGatuzo', sans-serif; font-weight: 600;
  font-size: clamp(1.4rem, 1.05rem + 1.0vw, 1.8rem);
  letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); margin: 0;
  text-transform: capitalize;            /* title-case every card heading */
}
/* Smaller cards (the multi-card feature grids + summit's "How SUMMIT Works") carry
   a smaller title so it fits the tighter card without wrapping to three lines. The
   larger 3-up grids keep the bigger title above. */
#features .ic-card__title,
#service-list .ic-card__title {
  font-size: clamp(1.05rem, 0.92rem + 0.55vw, 1.32rem);
  line-height: 1.12;
}
/* Foot: revealed body copy on the left, the +/- box pinned bottom-right.
   padding-right reserves the box's column so long copy never runs under it. */
.ic-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-right: 2.75rem; margin-top: 1.1rem; }
.ic-card__body { flex: 1 1 auto; margin: 0; color: var(--ink-2); font-size: 0.9rem; line-height: 1.6; max-width: 48ch; }
/* The +/- affordance box: gradient-orange with a white "+" by default; flips to
   solid grey with a "−" on hover (see the hover block below). Pinned out of flow
   so it never shifts when the body copy fades in / re-wraps. */
.ic-card__plus {
  position: absolute; right: 1.15rem; bottom: 1.15rem; overflow: hidden;
  width: clamp(1.7rem, 1.5rem + 0.6vw, 2.1rem);
  height: clamp(1.7rem, 1.5rem + 0.6vw, 2.1rem);
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #A81500, #E8520A 55%, #FF8A50);
  box-shadow: 0 5px 14px -8px rgba(232, 82, 10, 0.45);
  transition: box-shadow 0.4s var(--ease-out);
}
/* Grey layer crossfaded over the orange gradient on hover (a gradient is a
   background-image and can't be transitioned, so we fade a solid layer on top). */
.ic-card__plus::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: #E7E7E9; border-radius: inherit;
  opacity: 0; transition: opacity 0.35s ease;
}
/* Glyph = a horizontal + a vertical bar forming the "+". On hover the glyph spins
   270° while the horizontal bar fades and the vertical bar darkens into a "−". */
.ic-card__glyph { position: absolute; inset: 0; z-index: 1; transition: transform 0.5s linear; }
.ic-card__glyph::before, .ic-card__glyph::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: #fff; border-radius: 0;                    /* sharp ends — reads pixel-like */
  transition: opacity 0.4s ease, background 0.4s ease;
}
.ic-card__glyph::before { width: 42%; height: 2px; transform: translate(-50%, -50%); }
.ic-card__glyph::after  { width: 2px; height: 42%; transform: translate(-50%, -50%); }

/* Hover accordion — reserved for full desktop fine-pointer layouts. Tablet and
   phone cards use the explicit click/keyboard accordion below instead. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  /* No hover accordion — the width grow/shrink jitters on smaller grid cards, so
     these cards keep a fixed width; only the copy reveal + shadow lift animate.
     (The home page's founder-cards are a separate component and keep the accordion.) */
  .ic-card:hover {
    box-shadow: 0 20px 44px -20px rgba(232, 82, 10, 0.20),
                0 6px 16px rgba(17, 17, 17, 0.06);
  }
  .ic-card__body { opacity: 0; transition: opacity 0.4s var(--ease-out); }
  .ic-card:hover .ic-card__body { opacity: 1; }
  .ic-card:hover .ic-card__plus { box-shadow: none; transition: box-shadow 0.16s ease 0.13s; }
  .ic-card:hover .ic-card__plus::before { opacity: 1; transition: opacity 0.16s ease 0.13s; }
  .ic-card:hover .ic-card__glyph { transform: rotate(270deg); }
  .ic-card:hover .ic-card__glyph::before { opacity: 0; transition: opacity 0.16s ease 0.13s; }
  .ic-card:hover .ic-card__glyph::after  { background: #171719; transition: background 0.16s ease 0.13s; }
}
@media (prefers-reduced-motion: reduce) {
  .ic-card, .ic-grid > .ic-card, .ic-card__body, .ic-card__glyph { transition: none; }
}
@media (max-width: 640px) {
  .ic-card { flex-basis: 100%; }          /* stack full-width on phones */
}

/* ══ Dark spotlight card — the "Why It Matters" intro grid lifted onto a dark ground.
   On the service pages the second section's eyebrow, title and ic-cards are placed
   inside one large grainy dark-grey card (same canvas + film-grain recipe as the
   closing CTA card) so the moment reads as a focused, high-contrast beat against the
   light page. Everything here is scoped to .ic-darkcard so every other .ic-grid on
   the site keeps its light treatment. */
.ic-darkcard {
  position: relative; isolation: isolate; overflow: hidden;
  /* Break out of the 1200px .container to the wider home-page "stage" width, so this
     spotlight card reads as a generous, near-full-bleed panel — mirroring the
     #intelligence .hiw-stage on the home page (1500px cap, small side gutters).
     left + translateX is the classic full-bleed trick, centring the card on the
     viewport regardless of the narrower container it lives in. Safe because
     body { overflow-x: hidden } clips the vw math against the scrollbar. */
  width: min(1444px, calc(100vw - 2 * clamp(12px, 2vw, 28px)));
  left: 50%; transform: translateX(-50%);
  background-color: #1f1f21;
  border-radius: clamp(20px, 2.6vw, 34px);
  padding: clamp(2.25rem, 4.5vw, 4rem) clamp(1.5rem, 3.4vw, 3.75rem);
  box-shadow: 0 44px 90px -55px rgba(23, 23, 25, 0.6);
}
/* Film grain — identical fractal-noise recipe as the closing card (see .closing::before). */
.ic-darkcard::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='discrete' tableValues='0%200%200%200%200%200.06%200.14%200.3'/%3E%3CfeFuncG type='discrete' tableValues='0%200%200%200%200%200.06%200.14%200.3'/%3E%3CfeFuncB type='discrete' tableValues='0%200%200%200%200%200.06%200.14%200.3'/%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  opacity: 0.3; mix-blend-mode: screen;
}
.ic-darkcard > * { position: relative; z-index: 1; }   /* content sits above the grain */
/* Eyebrow + headline recoloured for the dark ground (emblem stays orange). */
.ic-darkcard .svc-name { color: #fff; }
.ic-darkcard .hiw-title { color: #fff; }
/* Cards become dark elevated surfaces with light copy. */
.ic-darkcard .ic-card {
  background: linear-gradient(180deg, #2A2A2D 0%, #232326 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
              0 12px 34px -22px rgba(0, 0, 0, 0.7);
}
.ic-darkcard .ic-card__title { color: #fff; }
.ic-darkcard .ic-card__body { color: rgba(255, 255, 255, 0.62); }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  /* Warm lift on the dark ground instead of the light-page shadow. */
  .ic-darkcard .ic-card:hover {
    box-shadow: 0 22px 48px -22px rgba(232, 82, 10, 0.30),
                0 6px 18px rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.14);
  }
}

/* Photo-beside-grid split — mirrors the home page's founder photo layout, pairing
   an .ic-grid with a tall 3/4 image on its left. Image stretches to the grid's
   height; both stack (photo on top) below 860px. */
.ic-split { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: stretch; }
.ic-split > .ic-grid { align-content: start; }
/* In the narrower right column the 240px card floor would drop to 2-up; relax it so
   the grid holds 3 across (basis stays 30%, so it never exceeds 3 and keeps the
   free space the hover accordion needs). Below 640px the 100% basis still stacks. */
.ic-split .ic-card { min-width: 165px; }
.ic-photo { position: relative; align-self: stretch; min-height: 440px; border-radius: var(--r-lg); }
.ic-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
@media (max-width: 860px) {
  .ic-split { grid-template-columns: 1fr; gap: 1.75rem; }
  .ic-photo { aspect-ratio: 3 / 4; min-height: 0; width: 100%; max-width: 420px; margin-inline: auto; }
}

/* Corner pixel cluster — the same animated motif as the home founder photo, moved
   here so inner pages can reuse it (JS: initFounderPixels wires [data-founder-pixels]).
   The home page also declares these inline with identical values. */
.founder-pixels { position: absolute; top: -18px; left: -18px; z-index: 2; width: 78px; height: 78px; pointer-events: none; }
.founder-pixels__cell {
  position: absolute; border-radius: 0; opacity: 0; transform: scale(0.82);
  will-change: opacity, transform;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.founder-pixels__cell.is-on { opacity: var(--cell-op, 0.85); transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .founder-pixels__cell { transition: none; } }

/* Add-on panel — light-grey inset card with a faint orange pixel field on the right */
/* ── Dark CTA atmosphere (shared) ──────────────────────────────────────────
   Reproduces the closing-CTA look (.closing): a dark #1f1f21 base carrying the
   same fine film-grain (screen-blended fractal noise) plus a warm orange
   ambient glow. Any dark surface that should feel like the final CTA gets this
   class; content inside must sit at z-index:1 to stay above the grain/glow.
   Per-instance tuning via the --glow-* custom properties. */
.cta-atmo {
  position: relative;
  overflow: hidden;
  isolation: isolate;                 /* contain the grain's screen blend */
  background-color: #1f1f21;
}
.cta-atmo::before {                    /* film grain — identical noise to .closing */
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='discrete' tableValues='0%200%200%200%200%200.06%200.14%200.3'/%3E%3CfeFuncG type='discrete' tableValues='0%200%200%200%200%200.06%200.14%200.3'/%3E%3CfeFuncB type='discrete' tableValues='0%200%200%200%200%200.06%200.14%200.3'/%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  opacity: 0.3;
  mix-blend-mode: screen;
}
.addon-card {
  /* Little "+ Add Google Ads" boxes — the CTA dark base + film grain, no glow. */
  border: none;
  border-radius: var(--r-md);
  padding: 0.7rem 0.9rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
}
.addon-card__body { position: relative; z-index: 1; }
.addon-card__price { color: #fff; font-weight: 700; }
.addon-card__sub { font-size: 0.72rem; color: rgba(255, 255, 255, 0.5); }

.tag-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(232, 82, 10, 0.12);
  border: 1px solid rgba(232, 82, 10, 0.3);
  color: var(--amber);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 50px;
  padding: 0.3rem 0.85rem;
  box-shadow: var(--shadow-pill);
}

.numbered-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 128, 64, 0.1);
  border: 1px solid rgba(255, 128, 64, 0.3);
  color: var(--amber);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: var(--r-md);
  padding: 0.25rem 0.6rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.section-pad { padding-top: 7rem; padding-bottom: 7rem; }
.container   { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

.reveal { }

/* ── Section Header ──────────────────────────────────────────────────────── */
.section-header { max-width: 640px; }
.section-header.centered { margin-left: auto; margin-right: auto; text-align: center; }

/* ── Section Header System (eyebrow + balanced title + subhead) ───────────
   Mirrors the carousel's .sysc-eyebrow/.sysc-title voice so post-carousel
   sections continue the same register. Layered on top of .section-header —
   base class behaviour (used by 7 other pages) is untouched. */
.sh-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #FF8040 0%, #E8520A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}
.sh-title {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.07;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-wrap: balance;
  margin: 0 0 1rem;
}
.sh-sub {
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 40rem;
  text-wrap: pretty;
}
.section-header.centered .sh-sub { margin-left: auto; margin-right: auto; }

/* ── Mega section header ─────────────────────────────────────────────────────
   A giant section descriptor word is the anchor (clear wayfinding); the real
   title rides small + thin at its top-right; the subtitle is dropped. Reusable
   across sections — set the per-word size with --mega on .sh-mega if needed. */
/* z-index 0 + the word's negative bottom margin tuck the title's bottom edge
   just behind the section content that follows (which sits at z-index 1). The
   offset is in em so the overlap stays proportional at every size. */
.sh-mega { text-align: center; margin: 0 auto; position: relative; z-index: 0; }
/* nudged off-centre to the left; --mega-shift tunes it per section */
.sh-mega-inner { display: inline-flex; flex-direction: column; align-items: flex-end; transform: translateX(var(--mega-shift, -6%)); }
.sh-mega-word {
  font-family: 'GCGatuzo', sans-serif; font-weight: 600;
  font-size: var(--mega, clamp(3rem, 15vw, 13.5rem));
  line-height: 0.86; letter-spacing: -0.045em;
  /* bottom: the ink sits ~0.203em above the box bottom (descender space + padding),
     so clear that first, then tuck ~0.045em of the glyphs under the content. */
  margin: -0.18em 0 -0.25em;
  padding: 0.18em 0.02em 0.08em;  /* headroom so glyph tops/descenders aren't clipped by background-clip:text */
  /* Darkens AND fades out toward the baseline: the lower gradient stops carry
     alpha, so — clipped to the text — the word grows dimmer and more transparent
     and dissolves into the page. Baking the fade into the fill (rather than a
     separate mask) avoids the faint box a mask leaves on a background-clip:text
     element. */
  /* Light canvas: inverse of the original light-source treatment — a heavy ink
     word at the top that darkens then fades to transparent, dissolving into the
     gray. Same baked-in alpha fade (no mask, so no clip box on the text). */
  background: linear-gradient(180deg,
    #171719 6%, #35363c 34%, rgba(60,62,70,0.78) 50%,
    rgba(96,98,106,0.28) 72%, rgba(130,132,140,0) 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: none;
}
.sh-mega-tag {
  order: -1; margin: 0 0.16em -0.02em 0;   /* above the word, right-aligned to it */
  font-weight: 200; font-size: clamp(0.9rem, 1.3vw, 1.2rem);
  letter-spacing: 0.02em; line-height: 1.2; color: var(--ink-2);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .sh-mega-inner { align-items: center; transform: none; }  /* no room to shift on phones */
  .sh-mega-word { line-height: 0.92; }
  .sh-mega-tag { white-space: normal; margin: 0 0 0.5rem; }
}

/* Fluorescent "switch on" flicker. JS sets [data-flicker] to arm it, then .is-lit
   when it scrolls in — so with no JS the title is simply visible. steps(1,end)
   keeps each blip abrupt (a real tube strikes, it doesn't crossfade). */
.sh-mega[data-flicker] .sh-mega-word,
.sh-mega[data-flicker] .sh-mega-tag { opacity: 0; }
.sh-mega[data-flicker].is-lit .sh-mega-word { animation: mega-flicker 1.15s steps(1, end) forwards; }
.sh-mega[data-flicker].is-lit .sh-mega-tag  { animation: mega-tag-in 0.45s ease-out 0.72s forwards; }
/* The bloom is keyed to the same stops as the opacity, so the light it throws
   pulses with each strike. The last stop eases out so it settles rather than
   snapping to the steady glow. */
@keyframes mega-flicker {
  0%, 4%    { opacity: 0;    filter: drop-shadow(0 0 0 rgba(255, 238, 222, 0)); }
  5%        { opacity: 0.45; filter: drop-shadow(0 0 0.10em rgba(255, 238, 222, 0.28)); }
  6%, 11%   { opacity: 0.03; filter: drop-shadow(0 0 0 rgba(255, 238, 222, 0)); }
  12%       { opacity: 0.7;  filter: drop-shadow(0 0 0.16em rgba(255, 238, 222, 0.40)); }
  13%, 17%  { opacity: 0.05; filter: drop-shadow(0 0 0 rgba(255, 238, 222, 0)); }
  18%       { opacity: 0.85; filter: drop-shadow(0 0 0.22em rgba(255, 238, 222, 0.50)); }
  19%, 21%  { opacity: 0.1;  filter: drop-shadow(0 0 0 rgba(255, 238, 222, 0)); }
  22%       { opacity: 1;    filter: drop-shadow(0 0 0.30em rgba(255, 238, 222, 0.62)); }
  24%       { opacity: 0.35; filter: drop-shadow(0 0 0.06em rgba(255, 238, 222, 0.12)); }
  27%       { opacity: 1;    filter: drop-shadow(0 0 0.28em rgba(255, 238, 222, 0.58)); }
  30%       { opacity: 0.55; filter: drop-shadow(0 0 0.08em rgba(255, 238, 222, 0.16)); }
  33%       { opacity: 1;    filter: drop-shadow(0 0 0.26em rgba(255, 238, 222, 0.50)); }
  38%       { opacity: 0.78; filter: drop-shadow(0 0 0.14em rgba(255, 238, 222, 0.30)); }
  41%       { opacity: 1;    filter: drop-shadow(0 0 0.24em rgba(255, 238, 222, 0.45));
              animation-timing-function: ease-out; }
  100%      { opacity: 1;    filter: drop-shadow(0 0 0.13em rgba(255, 238, 222, 0.16)); }
}
@keyframes mega-tag-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sh-mega[data-flicker] .sh-mega-word,
  .sh-mega[data-flicker] .sh-mega-tag { opacity: 1; animation: none; }
}

/* Per-line masked heading reveal. Visible by default — the shift/stagger is
   JS-applied only (static fallback and reduced-motion stay fully readable).
   padding/negative-margin pair keeps GCGatuzo descenders out of the clip. */
.hl {
  display: block;
  overflow: hidden;
  padding-block: 0.08em;
  margin-block: -0.08em;
}
.hl-in { display: block; }

/* ── Two-font section headline (GCGatuzo + Fraunces italic accent) ──────────
   The site's signature headline: a geometric sans with the key phrase set in an
   italic serif. Promoted from the homepage so every page shares one voice. A
   section can cap the size with its own class when its title must run smaller
   (e.g. the homepage's .founder-title / #pricing .cmp-headline). */
.hiw-head { text-align: center; max-width: min(960px, 92%); margin: 0 auto clamp(30px, 4vw, 54px); }
.hiw-title {
  margin: 0; text-wrap: balance;
  font-family: 'GCGatuzo', sans-serif; font-weight: 600;
  font-size: clamp(2.4rem, 1.3rem + 4vw, 4.9rem);
  line-height: 0.98; letter-spacing: -0.04em; color: #141416;
}
.hiw-title .hiw-serif,
.hiw-serif {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-optical-sizing: auto; font-variation-settings: "opsz" 144;
  letter-spacing: -0.02em; font-size: 1.02em;
}
/* Size caps for the two-font headline in smaller contexts (inner-page heroes and
   section titles), so it doesn't run at the full homepage-hero scale. */
.hiw-title--hero    { font-size: clamp(2.2rem, 1.1rem + 3.6vw, 4.1rem); line-height: 1.04; letter-spacing: -0.035em; }
.hiw-title--section { font-size: clamp(1.85rem, 1.2rem + 2.3vw, 3rem);  line-height: 1.1;  letter-spacing: -0.03em; }

/* ── Brand-emblem section descriptor ────────────────────────────────────────
   A small eyebrow: the orange location-pin emblem + a short label. Two forms —
   a filled grey chip (.svc-namebar, used on cards) and a no-box inline eyebrow
   (.svc-namebar.founder-eyebrow, used above section titles). Replaces the old
   .tag-pill. The emblem is the white brand PNG tinted via CSS mask. */
.svc-namebar {
  display: inline-flex; align-items: center; gap: 0.55rem;
  align-self: flex-start; margin: 0 0 1.6rem;
  padding: 0.4rem 0.85rem 0.4rem 0.5rem;
  background: #e6e6e3; border-radius: var(--r-md);
}
.svc-emblem {
  flex-shrink: 0; width: 1.5rem; height: 1.5rem;
  background: linear-gradient(135deg, #A81500, #E8520A 55%, #FF8A50);
  -webkit-mask: url("Brand Assets/White logo no background (7).png") center / contain no-repeat;
          mask: url("Brand Assets/White logo no background (7).png") center / contain no-repeat;
}
.svc-name { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0; line-height: 1.1; }
/* No-box eyebrow form: transparent, cropped mark, emblem tip on the text baseline. */
.founder-eyebrow {
  margin: 0 0 1.2rem; background: transparent; padding: 0; align-items: baseline;
}
.founder-eyebrow .svc-emblem {
  width: auto; height: 1.15rem; aspect-ratio: 1223 / 1500;
  -webkit-mask-image: url("Brand Assets/logo-emblem-cropped.png");
          mask-image: url("Brand Assets/logo-emblem-cropped.png");
}

/* ── Section atmosphere (post-hero ambient light) ──────────────────────────
   Static, layered radial glow fields — no blur filters, no animation, no
   blend modes. Rasterized once; zero per-frame cost near the scroll video. */
.section-atmo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* No top-edge shade: the whispered radial at each section's top read as a
     shaded seam/divider between sections. Sections now sit flush on the page
     grain with no tonal band. The --cta variant sets its own centered glow. */
  background: none;
}
.section-atmo--cta {
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(23, 23, 25, 0.03), transparent 65%),
    /* neutral dot grid texture (no warm tint) */
    radial-gradient(rgba(23, 23, 25, 0.06) 1px, transparent 1px);
  background-size: auto, 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, black, transparent 68%);
  mask-image: radial-gradient(ellipse at 50% 45%, black, transparent 68%);
}
/* ── Editorial scaffold ──────────────────────────────────────────────────────
   Faint vertical guide-lines aligned to the container columns, with crosshair
   ticks near the top & bottom. The inner drifts slower than content (JS parallax)
   for depth. Sits on the same z:0 plane as .section-atmo, behind content. */
.section-scaffold { display: none; }   /* editorial vertical grid + corner marks — removed sitewide per request */
.scaf-inner {
  position: absolute; top: -7%; left: 0; right: 0; margin: 0 auto;
  width: min(1152px, calc(100% - 3rem)); height: 114%;
  will-change: transform;
}
.scaf-v {
  position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -0.5px;
  background: linear-gradient(180deg, transparent 0%,
    rgba(23, 23, 25, 0.07) 14%, rgba(23, 23, 25, 0.07) 86%, transparent 100%);
}
.scaf-v::before, .scaf-v::after {
  content: ''; position: absolute; left: 50%; width: 13px; height: 13px; transform: translateX(-50%);
  background:
    linear-gradient(rgba(23, 23, 25, 0.22) 0 0) center / 1px 100% no-repeat,
    linear-gradient(rgba(23, 23, 25, 0.22) 0 0) center / 100% 1px no-repeat;
}
.scaf-v::before { top: 7.5%; }
.scaf-v::after { bottom: 7.5%; }
@media (max-width: 720px) {
  .scaf-v:nth-child(2), .scaf-v:nth-child(3) { display: none; } /* just the outer frame on phones */
}

/* ── Check Item ──────────────────────────────────────────────────────────── */
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--ink-2);
}
/* Gradient-orange rounded square with a pixel-art arrow (white) — matches .svc-list,
   replaces the plain ✓ tick. The glyph inside the span is hidden via font-size:0. */
.check-item .check-icon {
  flex-shrink: 0;
  display: inline-block;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.05rem;
  border-radius: var(--r-sm);
  font-size: 0;
  line-height: 0;
  color: transparent;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg fill='%23fff'%3E%3Crect x='0' y='80' width='16' height='16'/%3E%3Crect x='16' y='64' width='16' height='16'/%3E%3Crect x='32' y='48' width='16' height='16'/%3E%3Crect x='48' y='32' width='16' height='16'/%3E%3Crect x='64' y='16' width='16' height='16'/%3E%3Crect x='80' y='0' width='16' height='16'/%3E%3Crect x='80' y='16' width='16' height='16'/%3E%3Crect x='80' y='32' width='16' height='16'/%3E%3Crect x='64' y='0' width='16' height='16'/%3E%3Crect x='48' y='0' width='16' height='16'/%3E%3C/g%3E%3C/svg%3E") center / 60% no-repeat,
    linear-gradient(135deg, #A81500, #E8520A 55%, #FF8A50);
}

/* ── Pain / Feature Icons ────────────────────────────────────────────────── */
.pain-icon, .feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(232, 82, 10, 0.2), rgba(185, 26, 0, 0.08));
  border: 1px solid rgba(232, 82, 10, 0.2);
  flex-shrink: 0;
  box-shadow: var(--shadow-icon);
}
.feature-icon {
  background: linear-gradient(135deg, rgba(232, 82, 10, 0.2), rgba(185, 26, 0, 0.1));
  border-color: rgba(232, 82, 10, 0.25);
  margin-bottom: 1rem;
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
#main-nav {
  position: relative;
  z-index: 100;
  padding: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  background-color: #171719;
}
#main-nav .container {
  pointer-events: auto;
  max-width: 980px;
  padding: 0 1.25rem;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.25rem 0;
  transition: opacity 0.3s ease;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links a {
  position: relative;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: linear-gradient(90deg, #FF8040, #E8520A);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: #fff; }
.nav-links a:hover::after,
.nav-links a.active::after,
.nav-links a:focus-visible::after { transform: scaleX(1); }
.nav-links a:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 2px; }

/* ── Inner-page nav (light) ────────────────────────────────────────────────
   Inner pages have no dark hero — #main-nav sits over the light canvas, so flip
   it: transparent bar, dark links, inverted (dark) logo, dark hamburger. The
   home page's #main-nav is untouched (dark, over the hero / mobile only). */
body.inner-page #main-nav { background-color: transparent; }
body.inner-page #main-nav .nav-inner { border-bottom: 1px solid var(--line); }
body.inner-page .nav-links a { color: var(--ink-2); }
body.inner-page .nav-links a:hover,
body.inner-page .nav-links a.active { color: var(--ink); }
body.inner-page #main-nav a img { filter: invert(1); }   /* near-white wordmark → dark */
body.inner-page #nav-hamburger span { background: var(--ink) !important; }

/* ── Services dropdown (desktop) ───────────────────────────────────────────── */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd-toggle {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.32rem;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 0.9rem; font-weight: 300; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.7);
  transition: color 0.2s ease;
}
.nav-dd-toggle svg { width: 10px; height: 10px; transition: transform var(--dur-2) var(--ease-out); }
.nav-dd:hover .nav-dd-toggle,
.nav-dd:focus-within .nav-dd-toggle { color: #fff; }
.nav-dd.active .nav-dd-toggle { color: #fff; }
.nav-dd:hover .nav-dd-toggle svg,
.nav-dd[data-open="true"] .nav-dd-toggle svg { transform: rotate(180deg); }
.nav-dd-toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 2px; }

body.inner-page .nav-dd-toggle { color: var(--ink-2); }
body.inner-page .nav-dd:hover .nav-dd-toggle,
body.inner-page .nav-dd:focus-within .nav-dd-toggle,
body.inner-page .nav-dd.active .nav-dd-toggle { color: var(--ink); }

.nav-dd-panel {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  margin-top: 7px;
  width: 720px; max-width: 92vw;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 0.85rem;
  box-shadow: 0 1px 2px rgba(20,12,8,0.05), 0 18px 40px -12px rgba(20,12,8,0.22);
  opacity: 0; visibility: hidden; pointer-events: none;
  /* Disappear timing (slightly slower). Appear is set on the reveal rule below. */
  transition: opacity 0.44s var(--ease-out), transform 0.44s var(--ease-out), visibility 0.44s var(--ease-out);
  z-index: 300;
  /* Dapper-style mega menu: two card rows (3 + 2). Each row is its own flex line so
     the bottom two cards stretch to fill the full width (like the top three). */
  display: flex; flex-direction: column; gap: 0.7rem;
}
.nav-dd-row { display: flex; gap: 0.7rem; align-items: stretch; }
/* Invisible hover bridge across the gap so the pointer can travel nav → panel. */
.nav-dd-panel::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-dd:hover .nav-dd-panel,
.nav-dd:focus-within .nav-dd-panel,
.nav-dd[data-open="true"] .nav-dd-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-duration: 0.34s;   /* appear — a touch quicker than the disappear */
}
/* Page-darkening backdrop behind the open mega menu (below the nav bar + panel,
   above page content). Toggled by JS via .is-visible on mouseenter/leave intent. */
.nav-dd-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(12, 12, 14, 0.42);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.44s var(--ease-out), visibility 0.44s var(--ease-out);
}
.nav-dd-backdrop.is-visible { opacity: 1; visibility: visible; transition-duration: 0.34s; }
/* Scoped with .nav-dd so the card styles beat the generic .nav-links a /
   .float-nav__links a rules (same specificity, later source order) in every nav variant. */
.nav-dd .nav-dd-panel a {
  position: relative;
  flex: 1 1 0; min-width: 0;              /* share the row equally → bottom two fill full width */
  display: flex; flex-direction: column; gap: 0.35rem;
  min-height: 150px;
  padding: 1rem 1.05rem 3.4rem;
  border-radius: var(--r-md);
  background: var(--card-2);
  border: 1px solid transparent;
  color: var(--ink); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; white-space: normal;
  padding-bottom: 2.9rem;                /* reserve room for the smaller corner arrow tile */
  transition: flex-grow 0.5s var(--ease-out), background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.nav-dd .nav-dd-panel a small { font-size: 0.8rem; color: var(--ink-2); font-weight: 400; line-height: 1.45; letter-spacing: 0; }
/* Corner arrow square — brand-orange gradient tile with the pixel-art arrow (matches .svc-list). */
.nav-dd .nav-dd-panel a::after {
  content: ""; display: block;
  position: absolute; right: 0.9rem; bottom: 0.9rem;
  width: 1.5rem; height: 1.5rem;
  border-radius: var(--r-sm);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg fill='%23fff'%3E%3Crect x='0' y='80' width='16' height='16'/%3E%3Crect x='16' y='64' width='16' height='16'/%3E%3Crect x='32' y='48' width='16' height='16'/%3E%3Crect x='48' y='32' width='16' height='16'/%3E%3Crect x='64' y='16' width='16' height='16'/%3E%3Crect x='80' y='0' width='16' height='16'/%3E%3Crect x='80' y='16' width='16' height='16'/%3E%3Crect x='80' y='32' width='16' height='16'/%3E%3Crect x='64' y='0' width='16' height='16'/%3E%3Crect x='48' y='0' width='16' height='16'/%3E%3C/g%3E%3C/svg%3E") center / 56% no-repeat,
    linear-gradient(135deg, #A81500, #E8520A 55%, #FF8A50);
  transition: transform var(--dur-1) var(--ease-out);
}
/* No background highlight on hover/active — the accordion grow + arrow nudge are the
   hover affordance. Keep a visible ring for keyboard focus only (accessibility). */
.nav-dd .nav-dd-panel a:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.nav-dd .nav-dd-panel a:hover::after,
.nav-dd .nav-dd-panel a:focus-visible::after { transform: translate(2px, -2px); }
/* Hover accordion — same effect as the home "Why We Exist" founder cards: the hovered
   card grows while its row-mates shrink (row width stays fixed). Real hover only. */
@media (hover: hover) and (pointer: fine) {
  .nav-dd-row:hover > a { flex-grow: 0.82; }   /* row-mates shrink */
  .nav-dd-row > a:hover  { flex-grow: 1.55; }  /* hovered card grows */
}

/* ── Mobile Nav Drawer ───────────────────────────────────────────────────── */
#mobile-drawer {
  position: fixed;
  inset: 0;
  background: rgba(14, 11, 8, 0.97);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 5.5rem 1.25rem 3rem;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 0.32s ease, transform 0.32s ease;
}
/* When the menu is tall enough to scroll, pin to top so nothing is clipped */
@media (max-height: 640px) { #mobile-drawer { justify-content: flex-start; } }
#mobile-drawer .drawer-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin-bottom: -0.6rem;
}
#mobile-drawer.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
#mobile-drawer a {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}
#mobile-drawer a:hover { opacity: 1; color: var(--amber); }

/* Organised mobile navigation. The hierarchy mirrors the desktop navigation:
   home/package/summit links are direct, while services and trades expand only
   on deliberate interaction. These rules supersede the legacy flat-list drawer. */
#mobile-drawer { align-items: stretch; justify-content: flex-start; gap: 0; padding: 0; }
#mobile-drawer .drawer-panel {
  width: min(100%, 38rem); min-height: 100%; margin-inline: auto;
  display: flex; flex-direction: column; padding: 1.25rem 1.5rem 1.8rem;
}
#mobile-drawer .drawer-header { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; }
#mobile-drawer .drawer-brand { display: inline-flex; align-items: center; opacity: 1; }
#mobile-drawer .drawer-brand img { width: auto; height: 1.9rem; }
#mobile-drawer .drawer-close {
  display: inline-grid; width: 2.75rem; height: 2.75rem; place-items: center; padding: 0;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; background: rgba(255,255,255,0.07);
  color: #fff; font: 1.45rem/1 sans-serif; cursor: pointer;
}
#mobile-drawer .drawer-close:focus-visible,
#mobile-drawer summary:focus-visible,
#mobile-drawer a:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
#mobile-drawer .drawer-nav { display: flex; flex-direction: column; width: 100%; margin-top: 2.2rem; border-top: 1px solid rgba(255,255,255,0.14); }
#mobile-drawer .drawer-main-link,
#mobile-drawer .drawer-group > summary {
  min-height: 3.85rem; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.14); color: #fff; font: 600 1.18rem/1.2 'GCGatuzo', sans-serif;
  letter-spacing: -0.015em; text-decoration: none; opacity: 1; cursor: pointer;
}
#mobile-drawer .drawer-group { border-bottom: 1px solid rgba(255,255,255,0.14); }
#mobile-drawer .drawer-group > summary { list-style: none; border: 0; }
#mobile-drawer .drawer-group > summary::-webkit-details-marker { display: none; }
#mobile-drawer .drawer-chevron { width: 1.05rem; height: 1.05rem; color: #FF9D68; transition: transform var(--dur-1) var(--ease-out); }
#mobile-drawer .drawer-group[open] .drawer-chevron { transform: rotate(180deg); }
#mobile-drawer .drawer-submenu { display: grid; gap: 0.55rem; padding: 0 0 1rem; }
#mobile-drawer .drawer-submenu a {
  display: flex; flex-direction: column; gap: 0.18rem; padding: 0.7rem 0.8rem;
  border-radius: var(--r-md); color: rgba(255,255,255,0.95); font-size: 1rem; font-weight: 600; line-height: 1.2; opacity: 1;
  background: rgba(255,255,255,0.06); text-decoration: none;
}
#mobile-drawer .drawer-submenu a small { color: rgba(255,255,255,0.55); font-size: 0.76rem; font-weight: 400; line-height: 1.35; }
#mobile-drawer .drawer-cta { width: 100%; margin-top: auto; padding-top: 1.75rem; }
@media (max-height: 640px) {
  #mobile-drawer .drawer-panel { min-height: auto; }
  #mobile-drawer .drawer-nav { margin-top: 1rem; }
  #mobile-drawer .drawer-main-link, #mobile-drawer .drawer-group > summary { min-height: 3.25rem; }
  #mobile-drawer .drawer-cta { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { #mobile-drawer, #mobile-drawer .drawer-chevron { transition: none; } }

/* ── Floating pill nav ──────────────────────────────────────────────────────
   The site-wide desktop nav: a compact white pill fixed at the top-centre. On
   desktop it replaces #main-nav (hidden below); mobile keeps #main-nav + the
   drawer. Promoted from the homepage so every page shares one nav. */
@media (min-width: 1024px) { #main-nav { display: none; } }
.float-nav {
  position: fixed; top: 16px; left: 0; right: 0; margin-inline: auto;
  width: max-content; max-width: calc(100vw - 44px); z-index: 101;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.5rem 0.55rem 0.5rem 1.6rem;
  background: #fff; border: 0; border-radius: var(--r-lg);
  box-shadow: 0 10px 34px rgba(15, 15, 20, 0.13), 0 2px 8px rgba(15, 15, 20, 0.06);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.float-nav > * { flex-shrink: 0; }
.float-nav__logo img { height: 34px; width: auto; display: block; filter: invert(1); }
.float-nav__links { display: flex; align-items: center; gap: 0.35rem; }
.float-nav__links a {
  position: relative; color: #3a3a40; text-decoration: none;
  font-size: 0.92rem; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap;
  padding: 0.5rem 0.85rem; border-radius: var(--r-md);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.float-nav__links a::after { display: none; }   /* no underline; uses the grey square highlight */
.float-nav__links a:hover, .float-nav__links a.active { color: #171719; background: #f0f0ef; }
.float-nav .btn-cta { background: #e2e2df; box-shadow: none; }
.float-nav .btn-cta__label { color: #171719; }
.float-nav .btn-cta__disc { background: linear-gradient(90deg, #A81500, #E8520A 55%, #FF8A50); }
.float-nav .btn-cta__disc svg { color: #fff; }
.float-nav .nav-dd-toggle {
  color: #3a3a40; font-size: 0.92rem; font-weight: 500; letter-spacing: 0.01em;
  padding: 0.5rem 0.85rem; border-radius: var(--r-md);
}
.float-nav .nav-dd:hover .nav-dd-toggle,
.float-nav .nav-dd:focus-within .nav-dd-toggle,
.float-nav .nav-dd.active .nav-dd-toggle { color: #171719; background: #f0f0ef; }
/* Float-nav uses the same card mega-menu — the .nav-dd-scoped rules cover it.
   The panel anchors to the floating bar (not the toggle) so it spans the bar's
   full width and aligns to its left/right edges, Dapper-style. */
.float-nav .nav-dd { position: static; }
.float-nav .nav-dd-panel {
  left: 0; right: 0; width: auto; max-width: none;
  transform: translateY(8px);
}
.float-nav .nav-dd:hover .nav-dd-panel,
.float-nav .nav-dd:focus-within .nav-dd-panel,
.float-nav .nav-dd[data-open="true"] .nav-dd-panel { transform: translateY(0); }
@media (max-width: 1023px) { .float-nav { display: none; } }   /* mobile keeps the hero nav */
@media (prefers-reduced-motion: reduce) {
  .float-nav { transition: opacity 0.3s ease; transform: translateY(0); }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-top: 9.5rem;
  padding-bottom: 6rem;
  background-color: #171719;
}

/* Hero scroll-video media — full-bleed canvas, all viewports */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #171719 center top / cover no-repeat;
}
@media (min-width: 601px) { .hero-canvas { background-image: url('hero-frames/scene1/frame_0001.webp'); } }
@media (max-width: 600px) { .hero-canvas { background-image: url('/manus-storage/mobile-hero-poster_5ea9b57c.jpg'); } }
.hero-mobile-video {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hero-mobile-video.is-ready { opacity: 1; }
/* Desktop scroll-video render canvas (WebGL/2D) — fills the media box above the
   poster canvas, below the scrim. Fades in once it can render so the poster
   shows instantly with no flash. Decorative only (aria-hidden). */
.hero-video,
.hero-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hero-video.is-ready,
.hero-gl.is-ready { opacity: 1; }

/* Lenis smooth-scroll (recommended baseline). Classes are added to <html> only
   when Lenis initialises — native scroll (reduced-motion/headless) is untouched. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
/* Gradient scrim — darkens for text legibility while the video stays
   visible across the FULL width/height of the hero (no solid blackout). */
.hero-scrim {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Bottom — blends the video into the dark page below */
    linear-gradient(to top,    #171719 0%, rgba(23,23,25,0.4) 8%, transparent 22%),
    /* Top — very subtle, anchors under the nav */
    linear-gradient(to bottom, rgba(23,23,25,0.35) 0%, transparent 14%),
    /* Left — light veil behind text; keeps the video bright while text stays legible */
    linear-gradient(to right,  rgba(23,23,25,0.5) 0%, rgba(23,23,25,0.28) 26%, rgba(23,23,25,0.06) 48%, transparent 60%);
  pointer-events: none;
}

/* Full-hero legibility veil — below the scrim's letterbox bars, above the video.
   Hidden on desktop (the .hero-copy::before panel handles legibility there);
   shown on mobile via the ≤768px block, where it fades out with the hero copy. */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(23, 23, 25, 0.4);
  pointer-events: none;
  display: none;
}

.hero-ray {
  position: absolute;
  bottom: -20%;
  left: 50%;
  margin-left: -400px;
  width: 800px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(126.93% 99.99% at 50% 99.99%, rgba(255, 255, 255, 0.05) 4.35%, transparent 100%);
  filter: blur(40px);
  pointer-events: none;
}


.hero-animate { }
.nav-animate  { }


/* ── Spinning Conic-Gradient Border ──────────────────────────────────────── */
.spin-border-wrap {
  position: relative;
  border-radius: 12px;
  padding: 2px;
  overflow: hidden;
}
.spin-border-btn {
  border-radius: 9999px;
  display: inline-flex;
}
.spin-rotator {
  position: absolute;
  width: 800px;
  height: 800px;
  top: 50%;
  left: 50%;
  margin-top: -400px;
  margin-left: -400px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 40deg,
    rgba(255, 128, 64, 0.5)  58deg,
    rgba(255, 128, 64, 1)    70deg,
    rgba(255, 128, 64, 0.5)  82deg,
    transparent 100deg,
    transparent 220deg,
    rgba(232, 82, 10, 0.5)   238deg,
    rgba(232, 82, 10, 1)     250deg,
    rgba(232, 82, 10, 0.5)   262deg,
    transparent 280deg,
    transparent 360deg
  );
  pointer-events: none;
}

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.price-card-popular {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 0 rgba(0, 0, 0, 0.30) !important;   /* flat — grey drop and brand glow both removed */
  position: relative;
}

/* ── FAQ Accordion ───────────────────────────────────────────────────────────
   Collapsible Q&A. Each item is a .card surface; the question row is a full-width
   button with the site's +/- affordance on the left. Click flips + → − (glyph
   spins 270°, horizontal bar fades, vertical bar darkens) and the answer grows
   in via a 0fr→1fr grid row. Answers may hold paragraphs, links, and bullets. */
.faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.85rem; }
.faq-item { overflow: hidden; }                 /* .card provides surface/border/radius */

/* Icon column width, shared so the answer can indent to align under the question. */
.faq-list { --faq-plus: clamp(1.7rem, 1.5rem + 0.6vw, 2.1rem); --faq-gap: 1rem; --faq-pad: 1.5rem; }

.faq-toggle {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: var(--faq-gap);
  padding: 1.25rem var(--faq-pad);
  background: none; border: none; cursor: pointer;
  color: var(--ink);
  font-family: 'GCGatuzo', sans-serif; font-weight: 600; font-size: 0.95rem; line-height: 1.4;
}
.faq-toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: -3px; border-radius: var(--r-lg); }
.faq-q { flex: 1 1 auto; }

/* +/- affordance — same visual as the site's .ic-card__plus, driven by open state
   instead of hover. Gradient-orange box + white "+" by default. */
.faq-plus {
  position: relative; flex: 0 0 auto; overflow: hidden;
  width: var(--faq-plus); height: var(--faq-plus);
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #A81500, #E8520A 55%, #FF8A50);
  box-shadow: 0 5px 14px -8px rgba(232, 82, 10, 0.45);
  transition: box-shadow 0.4s var(--ease-out);
}
.faq-plus::before {                              /* grey layer crossfaded in when open */
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: #E7E7E9; border-radius: inherit;
  opacity: 0; transition: opacity 0.35s ease;
}
.faq-glyph { position: absolute; inset: 0; z-index: 1; transition: transform 0.5s linear; }
.faq-glyph::before, .faq-glyph::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: #fff; transition: opacity 0.4s ease, background 0.4s ease;
}
.faq-glyph::before { width: 42%; height: 2px; transform: translate(-50%, -50%); }
.faq-glyph::after  { width: 2px; height: 42%; transform: translate(-50%, -50%); }

/* Open — "+" spins into a grey "−" */
.faq-toggle[aria-expanded="true"] .faq-plus { box-shadow: none; }
.faq-toggle[aria-expanded="true"] .faq-plus::before { opacity: 1; }
.faq-toggle[aria-expanded="true"] .faq-glyph { transform: rotate(270deg); }
.faq-toggle[aria-expanded="true"] .faq-glyph::before { opacity: 0; }
.faq-toggle[aria-expanded="true"] .faq-glyph::after  { background: #171719; }

.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease-out);
}
.faq-body.open { grid-template-rows: 1fr; }
.faq-body > div { overflow: hidden; }

/* Answer aligns under the question text (indented past the icon column). */
.faq-answer {
  padding: 0 var(--faq-pad) 1.35rem;
  padding-left: calc(var(--faq-pad) + var(--faq-plus) + var(--faq-gap));
  font-size: 0.88rem; color: var(--muted); line-height: 1.75;
}
.faq-answer > :first-child { margin-top: 0; }
.faq-answer > :last-child  { margin-bottom: 0; }
.faq-answer p { margin: 0 0 0.75rem; }
.faq-answer a { color: var(--accent-ink); }
.faq-answer ul { list-style: none; margin: 0.85rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.faq-answer ul + p { margin-top: 0.85rem; }
.faq-answer li { position: relative; padding-left: 1.5rem; }
.faq-answer li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: var(--r-sm);
  background: linear-gradient(135deg, #E8520A, #FF8A50);
}

@media (max-width: 640px) {
  .faq-answer { padding-left: var(--faq-pad); }  /* full width on phones, no deep indent */
}
@media (prefers-reduced-motion: reduce) {
  .faq-body, .faq-glyph, .faq-plus, .faq-plus::before { transition: none; }
}

/* ── Integration Chips ───────────────────────────────────────────────────── */
.integration-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(180deg, #141414 0%, #0F0F0F 100%);
  border-top:    1px solid #2A2A2A;
  border-right:  1px solid #202020;
  border-bottom: 1px solid #161616;
  border-left:   1px solid #202020;
  border-radius: var(--r-md);
  padding: 0.65rem 1rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.18);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.integration-chip:hover {
  border-top:    1px solid #303030;
  border-right:  1px solid rgba(232, 82, 10, 0.35);
  border-bottom: 1px solid rgba(232, 82, 10, 0.15);
  border-left:   1px solid rgba(232, 82, 10, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 0 16px rgba(232, 82, 10, 0.12);
}

/* ── Stats Bar ───────────────────────────────────────────────────────────── */
.stats-bar {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ── Final CTA Glow ──────────────────────────────────────────────────────── */
.cta-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 82, 10, 0.07), rgba(232, 82, 10, 0.03), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer {
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  /* Footer stays dark (a grounding base on the light page): re-light its text
     and re-scope the muted alias so inherited/undefined colours stay legible. */
  color: rgba(255, 255, 255, 0.72);
  --muted-text: rgba(255, 255, 255, 0.5);
}
.footer-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.2s ease;
}
.footer-link:hover { color: #fff; }
.footer-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 2px; }

.social-link {
  color: var(--muted);
  display: inline-flex;
  transition: color var(--dur-1) ease, transform var(--dur-1) ease;
}
.social-link:hover { color: var(--amber); transform: translateY(-2px); }
.social-link:active { transform: translateY(0); }
.social-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

/* ══ Closing region — CTA card + footer card ══════════════════════════════════
   Two stacked dark cards rising from the light page: a grainy dark-grey CTA card
   with rounded top corners, and a darker solid footer card nested inside it so
   the CTA grey shows as a gutter around the footer's rounded top corners. */
.closing {
  position: relative;
  isolation: isolate;                       /* contain the grain blend */
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding: clamp(4rem, 8vw, 7rem) clamp(10px, 1.3vw, 18px) 0;
  background-color: #1f1f21;
  border-radius: clamp(22px, 3.2vw, 44px) clamp(22px, 3.2vw, 44px) 0 0;
  overflow: hidden;
  color: #fff;
}
/* Film grain — same fractal noise as the page canvas, blended over the dark card. */
.closing::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Fine, subtle white film-grain that PRESERVES the dark base color.
     feTurbulence's fractalNoise is bright-skewed (mean ~0.73), so plain screen
     washes the card to light grey. The discrete curve crushes all but the top
     ~8% of the noise to black (black adds nothing under mix-blend-mode:screen,
     so the base stays #1f1f21) and maps those survivors to only LOW values
     (0.06 / 0.14 / 0.3) so the flecks stay dim — matching the reference's quiet
     grain rather than blaring white speckle. Keeping the base dark forces the
     grain sparse: any broad coverage lifts the mean and re-washes the card.
     feFuncA=1 flattens the noise's own alpha for a deterministic result.
     Verified: composite base mean ≈ base (31), peaks stay dim. baseFrequency 0.9
     keeps the grain fine. To make grain more/less visible, adjust opacity. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='discrete' tableValues='0%200%200%200%200%200.06%200.14%200.3'/%3E%3CfeFuncG type='discrete' tableValues='0%200%200%200%200%200.06%200.14%200.3'/%3E%3CfeFuncB type='discrete' tableValues='0%200%200%200%200%200.06%200.14%200.3'/%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  opacity: 0.3;
  mix-blend-mode: screen;
}
.closing-cta {
  position: relative; z-index: 1;
  max-width: 720px; margin: 0 auto;
  padding: 0 1.25rem clamp(4rem, 8vw, 6.5rem);
  text-align: center;
}
/* Closing descriptor reuses the shared emblem + name chip (.svc-namebar.founder-eyebrow)
   so it matches every other section label. Only the dark-canvas adaptation lives here:
   the .svc-name defaults to --ink (dark) which would vanish, so lift it to white. The
   inline-flex chip centres itself via the parent's text-align:center. */
.closing-eyebrow { margin: 0 0 1.1rem; }
.closing-eyebrow .svc-name { color: #fff; }
.closing-title {
  margin: 0; text-wrap: balance;
  font-family: 'GCGatuzo', sans-serif; font-weight: 600;
  font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4.6rem);
  line-height: 0.98; letter-spacing: -0.035em; color: #fff;
}
.closing-serif {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400;
  font-optical-sizing: auto; font-variation-settings: "opsz" 144;
  letter-spacing: -0.02em; font-size: 1.02em;
}
.closing-sub {
  margin: 1.3rem auto 0; max-width: 440px;
  font-size: 0.98rem; line-height: 1.65; color: rgba(255, 255, 255, 0.6);
}
.closing-actions {
  display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: 2.2rem;
}
/* Secondary action styled for the dark card (the light .btn-cta--dark would vanish). */
.btn-onDark {
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: 48px; padding: 0 1.4rem;
  border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff; font-family: 'GCGatuzo', sans-serif; font-size: 0.95rem; text-decoration: none;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.btn-onDark:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.42); }
.btn-onDark:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.closing-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.6rem;
  margin: 1.8rem 0 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.5);
}
.closing-trust .tick { color: var(--amber); margin-right: 0.15rem; }

/* Footer card — solid darker grey, nested inside .closing. */
.site-footer {
  position: relative; z-index: 1;
  background: #141416;
  border-radius: clamp(18px, 2.6vw, 34px) clamp(18px, 2.6vw, 34px) 0 0;
  padding: clamp(2.75rem, 4vw, 4rem) clamp(1.5rem, 3.2vw, 3.5rem) clamp(1.75rem, 3vw, 2.5rem);
  color: rgba(255, 255, 255, 0.66);
}
/* The imported inner pages each attempted to reveal the footer through an
   independent ScrollTrigger. On an initial load those triggers can remain at
   opacity 0, leaving an apparently missing footer. The footer is core site
   navigation, so it must be available immediately on every page. */
.site-footer {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.foot-main {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: clamp(1.75rem, 3vw, 3rem);
}
.foot-brand { max-width: 300px; }
.foot-logo { height: 30px; width: auto; display: block; margin-bottom: 1.1rem; }
.foot-tag { margin: 0 0 0.6rem; font-size: 0.92rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.foot-desc { margin: 0; font-size: 0.84rem; line-height: 1.6; color: rgba(255, 255, 255, 0.42); }
.foot-col { display: flex; flex-direction: column; }
.foot-head {
  margin: 0 0 1rem; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
}
.foot-link {
  padding: 0.42rem 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.55);
  text-decoration: none; transition: color var(--dur-1) ease;
}
.foot-link:hover { color: #fff; }
.foot-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 2px; }
/* Footer "By Trade" collapsible sections (native <details>, no JS) */
.foot-trade { display: block; }
.foot-trade__sum {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; padding: 0.42rem 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.72);
  transition: color var(--dur-1) ease; user-select: none;
}
.foot-trade__sum::-webkit-details-marker { display: none; }
.foot-trade__sum:hover { color: #fff; }
.foot-trade__sum:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 2px; }
.foot-trade__sum::after {
  content: ''; width: 6px; height: 6px; flex: none;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur-1) ease; opacity: 0.65;
}
.foot-trade[open] .foot-trade__sum::after { transform: rotate(135deg); }
.foot-trade__links { display: flex; flex-direction: column; padding: 0.1rem 0 0.45rem 0.85rem; }
.foot-trade__links .foot-link { padding: 0.32rem 0; font-size: 0.86rem; }
.foot-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.foot-copy { margin: 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.4); }
.foot-legal { display: flex; gap: 1.5rem; }
.foot-legal .foot-link { padding: 0; font-size: 0.8rem; }
.foot-social { display: flex; gap: 0.6rem; margin-left: auto; }
.foot-soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7);
  transition: background var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) ease;
}
.foot-soc:hover { background: rgba(255, 255, 255, 0.12); color: #fff; transform: translateY(-2px); }
.foot-soc:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.foot-soc svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .foot-main { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .foot-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 520px) {
  .foot-bottom { flex-direction: column; align-items: flex-start; }
  .foot-social { margin-left: 0; }
}

/* Global input focus — :where() keeps specificity 0 so page styles win */
:where(input, textarea, select):focus-visible {
  outline: 2px solid rgba(232, 82, 10, 0.7);
  outline-offset: 2px;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

/* ── Page Hero (inner pages) ─────────────────────────────────────────────── */
.page-hero {
  padding-top: 5rem;
  padding-bottom: 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 82, 10, 0.06), transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}
/* Desktop: the floating pill nav is fixed (out of flow) and overlaps the top of
   the page, so give the inner-page hero extra top clearance to sit comfortably
   below it — restoring the space the old in-flow top bar used to provide. */
@media (min-width: 1024px) {
  .page-hero { padding-top: 8.5rem; }
}

/* ── Service-page hero: exploded service icons ───────────────────────────────
   The five home-page service icons scattered into the hero's side gutters at
   uneven angles + sizes, as if they burst outward from the centered headline.
   Pure-CSS entrance: each flings in from mid-screen (--dx/--dy), overshoots,
   then settles at its resting tilt (--rot) and scale (--s), staggered. Then a
   slow idle drift keeps them alive. Decorative (aria-hidden), sits behind the
   text (z:0), and is hidden on narrower screens where the side gutters vanish. */
/* Centered, width-capped stage: icons anchor to this box's edges, so past ~1240px
   they stop drifting outward and hold a constant, close gap to the centered text
   instead of racing to the viewport edges. Narrower than that, the box = viewport
   and it behaves like the small-screen layout. */
.hero-scatter {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 1240px;
  z-index: 0; pointer-events: none;
}
.hero-scatter__item {
  position: absolute; width: 118px; height: auto;
  transform: rotate(var(--rot, 0deg)) scale(var(--s, 1));
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.26)) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.18));
}
.hero-scatter__item img { display: block; width: 100%; height: auto; -webkit-user-select: none; user-select: none; }

/* Resting positions — balanced quad, 2 left / 2 right (one upper + one lower per
   side), anchored to the capped stage's edges. Slight top/scale offsets keep it
   organic rather than mechanically mirrored. --dx/--dy point back toward
   mid-screen so each reads as flung out from the center. */
.hero-scatter__item--vis { left:  5%;   top: 15%; --rot: -15deg; --s: 0.94; --dx:  30vw; --dy:  15vh; }
.hero-scatter__item--seo { left:  8.5%; top: 61%; --rot:  12deg; --s: 0.82; --dx:  33vw; --dy: -13vh; }
.hero-scatter__item--web { right: 5%;   top: 17%; --rot:  15deg; --s: 0.94; --dx: -30vw; --dy:  13vh; }
.hero-scatter__item--gbp { right: 8.5%; top: 58%; --rot: -13deg; --s: 0.82; --dx: -33vw; --dy: -11vh; }

@media (prefers-reduced-motion: no-preference) {
  .hero-scatter__item { animation: heroExplode 0.95s cubic-bezier(0.34, 1.42, 0.5, 1) both; }
  .hero-scatter__item--vis { animation-delay: 0.32s; }
  .hero-scatter__item--web { animation-delay: 0.40s; }
  .hero-scatter__item--seo { animation-delay: 0.48s; }
  .hero-scatter__item--gbp { animation-delay: 0.56s; }
  /* Idle drift (translateY only, on the img, so it never fights the item's tilt). */
  .hero-scatter__item img       { animation: heroBob 6.6s ease-in-out infinite; animation-delay: -1.5s; }
  .hero-scatter__item--seo img  { animation-duration: 7.4s; animation-delay: -3s; }
  .hero-scatter__item--web img  { animation-duration: 7.9s; animation-delay: -4.2s; }
  .hero-scatter__item--gbp img  { animation-duration: 6.9s; animation-delay: -0.8s; }
  .hero-scatter__item--vis img  { animation-duration: 8.3s; animation-delay: -5s; }
}
@keyframes heroExplode {
  0%   { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.12) rotate(0deg); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) scale(var(--s)) rotate(var(--rot)); }
}
@keyframes heroBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
/* Below ~1280px the side gutters tighten: shrink the icons so they sit in the
   gutter without touching the text (all four now hug the far edges, so none
   need to drop). Below ~1120px the text spans the width — hide them all. */
@media (max-width: 1280px) {
  .hero-scatter__item { width: 92px; }
}
@media (max-width: 1120px) {
  .hero-scatter { display: none; }
}

/* Preserve the desktop's four decorative hero icons on narrower screens without
   letting them compete with the condensed page-heading content. They remain
   behind the copy, keep the same entrance/bob animations, and are only scaled
   and inset for the available side gutters. */
@media (min-width: 601px) and (max-width: 1120px) {
  .hero-scatter { display: block; max-width: none; }
  .hero-scatter__item { width: 64px; }
  .hero-scatter__item--vis { left: 3.5%; top: 15%; --s: 0.82; }
  .hero-scatter__item--seo { left: 7%; top: 65%; --s: 0.70; }
  .hero-scatter__item--web { right: 3.5%; top: 15%; --s: 0.82; }
  .hero-scatter__item--gbp { right: 7%; top: 65%; --s: 0.70; }
}
@media (max-width: 600px) {
  .hero-scatter { display: block; max-width: none; }
  .hero-scatter__item { width: 46px; filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.24)); }
  .hero-scatter__item--vis { left: 3%; top: 13%; --s: 0.76; }
  .hero-scatter__item--seo { left: 8%; top: 72%; --s: 0.66; }
  .hero-scatter__item--web { right: 3%; top: 13%; --s: 0.76; }
  .hero-scatter__item--gbp { right: 8%; top: 72%; --s: 0.66; }
}

/* ── Comparison Table ────────────────────────────────────────────────────── */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.comparison-table th,
.comparison-table td {
  padding: 1.1rem 1.25rem;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.comparison-table th:first-child,
.comparison-table td:first-child {
  text-align: left;
  color: var(--ink-2);
}
.comparison-table thead th {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 1.2rem;
}
.comparison-table thead th.highlight-col {
  color: var(--accent-ink);
}
.comparison-table tbody tr:hover td {
  background: rgba(232, 82, 10, 0.04);
}
.comparison-table .check-yes  { color: var(--accent-ink); font-size: 1.1rem; }
.comparison-table .check-no   { color: var(--ink-3); font-size: 1rem; }
.comparison-table .highlight-col { color: var(--ink); font-weight: 500; }
.comparison-table .price-row td { padding-top: 1.4rem; font-weight: 600; }
.comparison-table .price-row .highlight-col { color: var(--accent-ink); }

/* ── Hero Badge ──────────────────────────────────────────────────────────── */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 2.5rem;
  padding: 0.4rem 0.9rem 0.36rem;
  border-radius: 999px;
  background: rgba(232, 82, 10, 0.08);
  border-top:    1px solid rgba(232, 82, 10, 0.45);
  border-right:  1px solid rgba(232, 82, 10, 0.30);
  border-bottom: 1px solid rgba(232, 82, 10, 0.15);
  border-left:   1px solid rgba(232, 82, 10, 0.30);
  box-shadow: var(--shadow-pill);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--accent-ink);
  line-height: 1;
}

/* ══ Hero two-column layout + case-study video card ════════════════════════ */
.hero-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* keeps the centred bg portal in the gap */
  gap: 1.75rem;
  width: 100%;
  text-align: left;
}
.hero-copy { position: relative; flex: 0 1 540px; max-width: 540px; min-width: 0; text-align: center; }
/* Rounded dark panel — keeps the copy legible over the bright bg portal.
   Card-style 16px radius + hairline border to match the rest of the site;
   kept light so the photo reads through. */
.hero-copy::before {
  content: '';
  position: absolute;
  inset: -2rem -2.25rem;
  z-index: 0;
  border-radius: 10px;
  background: linear-gradient(180deg,
    rgba(8, 8, 8, 0.58) 0%,
    rgba(8, 8, 8, 0.50) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.hero-copy > * { position: relative; z-index: 1; }

/* Video card — slim padding; the credit chip sits in the bottom band. */
.hero-video-card {
  position: relative;
  flex: 0 1 580px;
  max-width: 580px;
  padding: 1.1rem 1.2rem 2.4rem;
}

.hvc-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--elevated);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(255, 120, 25, 0.12);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease;
}
.hero-video-card:hover .hvc-frame {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 120, 25, 0.22);
}

/* Larger, centred reuse of the case-study preview inside #free-website */
.free-video-card {
  max-width: 720px;
  margin: 0 auto 3rem;
}
.free-video-card:hover .hvc-frame {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 120, 25, 0.22);
}
.hvc-video {
  display: block;
  width: 100%;
  aspect-ratio: 1280 / 694;
  object-fit: cover;
  background: #171719;
  cursor: pointer;
}

/* Unmute / sound toggle */
.hvc-sound {
  position: absolute;
  bottom: 0.85rem;
  right: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(23, 23, 25, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.hvc-sound:hover  { background: rgba(232, 82, 10, 0.85); border-color: var(--amber); transform: translateY(-2px); }
.hvc-sound:active { transform: translateY(0); }
.hvc-sound:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* Video-card chips — clean UI labels in the site's glass register */
.hvc-chip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.9rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(23, 23, 25, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.hvc-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #FF8040, #E8520A);
  box-shadow: 0 0 8px rgba(232, 82, 10, 0.7);
  animation: hvc-pulse 2s ease-in-out infinite;
}
@keyframes hvc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .hvc-chip-dot { animation: none; } }
.hvc-chip--live   { top: calc(1.1rem + 0.85rem); left: calc(1.2rem + 0.85rem); }
.hvc-chip--credit { bottom: 0.1rem; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* Stack the video below the copy on narrower screens */
@media (max-width: 960px) {
  .hero-layout { flex-direction: column; gap: 2.5rem; align-items: stretch; }
  .hero-copy { flex: 1 1 auto; max-width: 100%; }
  .hero-video-card {
    flex: 1 1 auto;
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 600px) {
  /* Keep the preloaded canvas poster visible until the portrait video has decoded
     a real frame. This prevents the blank opening hero during a cold mobile load. */
  body:not(.inner-page) #hero .hero-canvas { opacity: 1; transition: opacity 0.3s ease; }
  body:not(.inner-page) #hero .hero-media:has(.hero-mobile-video.is-ready) .hero-canvas { opacity: 0; }
  /* Smaller chips so they don't crowd the frame on a phone. */
  .hvc-chip { font-size: 0.6rem; padding: 0.3rem 0.7rem; }
  .hvc-chip--live { top: calc(0.6rem + 0.6rem); left: calc(0.4rem + 0.6rem); }
  .hero-video-card { padding: 0.6rem 0.4rem 2rem; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .section-pad { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  /* More top room so the badge/headline clear the (absolute, overlaying) nav. */
  .hero-section { padding-top: 7rem; padding-bottom: 4rem; }
  .page-hero   { padding-top: 3rem; padding-bottom: 3rem; }
  /* Give content a touch more width on phones (was 1.5rem at every size). */
  .container { padding: 0 1.15rem; }
  /* Footer grid is 4 columns (2fr 1fr 1fr 1fr) inline — far too wide for a phone,
     which forced the whole document wider than the screen. Stack to 2 columns. */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 1.75rem 1.5rem !important; }
  .comparison-table { font-size: 0.75rem; }
  .comparison-table th, .comparison-table td { padding: 0.7rem 0.5rem; }
  /* Mobile scrim: a restrained top/bottom contrast fade that preserves readable
     opening copy while the adjusted video crop remains visibly present. */
  .hero-scrim {
    background:
      linear-gradient(to bottom, #171719 0%, #171719 21%, rgba(23,23,25,0) 36%),
      linear-gradient(to top,    #171719 0%, #171719 21%, rgba(23,23,25,0) 36%);
  }
  /* Full-hero legibility veil — only visible on mobile, where it replaces the
     old half-screen copy panel. It fades out with the hero copy on scroll
     (.hero-veil is in the scroll-video exitSelectors), so the video scenes
     revealed afterwards aren't dimmed. */
  .hero-veil { display: block; }
}

/* ── Pixel-seam motif ──────────────────────────────────────────────────────
   Off-centered cluster of animated square "pixels" that fade in/out in orange
   shades — an ambient supporting motif dropped between sections. No divider
   line; the cluster is pushed far to one side so it never sits behind centered
   titles. Cells are square, touching (no gap), and grow in clumps. Built +
   driven by JS (initPixelSeams in shared.js); static blob under reduced motion.
   JS alternates the --left / --right side per instance. */
.pixel-seam {
  position: relative;
  width: 100%;
  height: 44px;                  /* thin band: the cluster overflows into the
                                    neighbouring sections' own padding, so it
                                    adds almost no vertical space between them */
  display: flex;
  align-items: flex-start;       /* cluster spills DOWN into the next section's
                                    padding only — never up into the section
                                    above (which holds content near its edge) */
  pointer-events: none;
  overflow: visible;
  /* No z-index lift: the seam sits in normal flow just above the page-grain
     background, while the section that follows it in the DOM paints its cards
     and text on top — so the down-spilling cluster stays behind all content. */
}
.pixel-seam--left  { justify-content: flex-start; padding-left:  clamp(1.25rem, 9vw, 10rem); }
.pixel-seam--right { justify-content: flex-end;   padding-right: clamp(1.25rem, 9vw, 10rem); }
.pixel-seam__field {
  position: relative;
  display: block;
  width:  var(--seam-w, 130px);
  height: var(--seam-h, 182px);
}
.pixel-seam__cell {
  position: absolute;
  width:  var(--cell, 26px);
  height: var(--cell, 26px);
  border-radius: 0;
  opacity: 0;
  transform: scale(0.86);
  will-change: opacity, transform;
  transition:
    opacity   0.5s var(--ease-out, cubic-bezier(0.22, 0.8, 0.3, 1)),
    transform 0.5s var(--ease-out, cubic-bezier(0.22, 0.8, 0.3, 1));
}
.pixel-seam__cell.is-on {
  opacity: var(--cell-op, 0.85);
  transform: scale(1);
}
@media (max-width: 640px) {
  .pixel-seam { height: 36px; }
  .pixel-seam--left  { padding-left:  clamp(0.75rem, 4vw, 2rem); }
  .pixel-seam--right { padding-right: clamp(0.75rem, 4vw, 2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .pixel-seam__cell { transition: none; }
}

/* ── Built-for-your-trade showcase ─────────────────────────────────────────
   A vertical trade index (left) whose active item fuses into a large image
   panel (right). Selecting a trade crossfades in its toolkit photo — the
   trade's tools arranged around the glowing Local Leader disk — with the
   per-trade pitch beneath it. Active tab and stage share the same --card-2
   fill and hairline border; the active tab drops its right border and overlaps
   the stage by 1px so the two outlines read as one connected shape. */
.trade-showcase {
  display: grid;
  grid-template-columns: minmax(170px, 232px) 1fr;
  align-items: start;
  max-width: 1060px;
  margin: 0 auto;
}
.trade-index { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.4rem; }
.trade-tab {
  position: relative; z-index: 2;
  appearance: none; cursor: pointer;
  display: flex; align-items: center; gap: 0.65rem;
  margin-right: -1px;
  padding: 0.9rem 1.05rem;
  background: transparent;
  border: 1px solid transparent; border-right: 0;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  font-family: inherit; font-weight: 700; font-size: 1.12rem;
  letter-spacing: -0.02em; line-height: 1.2;
  color: var(--ink-3); text-align: left;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.trade-tab__mark {
  flex: 0 0 auto; width: 3px; height: 1.05em;
  border-radius: 2px; background: transparent;
  transition: background-color 0.2s ease;
}
.trade-tab:hover { color: var(--ink-2); }
.trade-tab:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.trade-tab.is-active {
  background: var(--card-2);
  border-color: var(--line);
  color: var(--ink);
}
.trade-tab.is-active .trade-tab__mark { background: var(--orange); }

.trade-stage {
  position: relative; z-index: 1;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(0.7rem, 1.4vw, 1.1rem);
}
.trade-stage__frame {
  position: relative;
  aspect-ratio: 2752 / 1536;
  border-radius: calc(var(--r-lg) - 1px);
  overflow: hidden;
  background: #0e0e10;
  border: 1px solid var(--line-2);
}
.trade-stage__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.trade-stage__img.is-active { opacity: 1; }
.trade-stage__copy { padding: 1.05rem 0.4rem 0.35rem; }
.trade-stage__desc {
  margin: 0; max-width: 72ch;
  color: var(--ink-2); font-size: 0.92rem; line-height: 1.7;
  display: none;
}
.trade-stage__desc.is-active { display: block; }

@media (max-width: 820px) {
  .trade-showcase { grid-template-columns: 1fr; gap: 0.85rem; max-width: 560px; }
  .trade-index {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    gap: 0.5rem; padding: 0.1rem 0.1rem 0.35rem; margin: 0 -0.1rem;
    scrollbar-width: none;
  }
  .trade-index::-webkit-scrollbar { display: none; }
  .trade-tab {
    margin-right: 0; flex: 0 0 auto; white-space: nowrap;
    padding: 0.55rem 0.9rem; font-size: 1rem;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--card-2); color: var(--ink-2);
  }
  .trade-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
  .trade-tab.is-active .trade-tab__mark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .trade-stage__img { transition: none; }
}

/* ══ PRICING + COMPARISON (shared by index.html & packages.html) ══ */
/* ══════════════════════════════════════════════════════
   PRICING SECTION (dark — inherits the site theme)
   ══════════════════════════════════════════════════════ */

/* Solid near-black backdrop matching the other sections. */
#pricing { background: transparent; }
/* Headings, cards, check-items and btn-links all inherit their dark defaults. */

/* Pricing header — a solid title with a subtitle + a single row of proof-point
   benefits, mirroring the Services header (this section sits on the same light
   canvas). Kept on the .sh-mega hook so the shared flicker reveal still arms it. */
#pricing .pr-head { text-align: center; max-width: 1120px; margin: 0 auto 2.75rem; }
/* Section descriptor — a grey chip like a service-name tag (no emblem).
   Keeps "Pricing" as clear wayfinding while the headline carries the message. */
/* "Packages" descriptor reuses the "Why we exist" eyebrow treatment (brand
   emblem + name, no chip box) via the shared .svc-namebar/.founder-eyebrow
   classes. .pr-chip is kept only as the flicker-reveal hook + spacing. */
#pricing .pr-chip { margin: 0 0 1.55rem; }
/* The original subtitle copy is now the headline — the single, emphasised
   statement of the pricing benefit. Two-font system: GCGatuzo sets the line;
   the Fraunces italic accent carries the key phrase. Sized down from a one-word
   title since it now carries a full sentence. */
#pricing .pr-head-title {
  font-family: 'GCGatuzo', sans-serif; font-weight: 600;
  font-size: clamp(1.75rem, 1.0rem + 2.5vw, 2.95rem);
  line-height: 1.12; letter-spacing: -0.03em;
  color: #141416; margin: 0 auto; max-width: 1040px; text-wrap: balance;
}
#pricing .pr-head-title .pr-em {
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
  font-weight: 400; letter-spacing: -0.015em; color: #141416;
}
/* Benefit proof-points — one centred row; gradient tick + label. Wraps on
   narrow viewports so nothing gets crushed. */
#pricing .pr-benefits {
  list-style: none; margin: 1.7rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 0.7rem 2.1rem;
}
#pricing .pr-benefits li {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.98rem; font-weight: 500; letter-spacing: -0.01em;
  color: #1c1c20;
}
/* Gradient-orange rounded square with the site's pixel-art north-east arrow
   (same motif as the Services list + "Local Leader way" cards), replacing the
   round tick. */
#pricing .pr-tick {
  width: 1.4rem; height: 1.4rem; flex-shrink: 0;
  border-radius: var(--r-sm);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg fill='%23fff'%3E%3Crect x='0' y='80' width='16' height='16'/%3E%3Crect x='16' y='64' width='16' height='16'/%3E%3Crect x='32' y='48' width='16' height='16'/%3E%3Crect x='48' y='32' width='16' height='16'/%3E%3Crect x='64' y='16' width='16' height='16'/%3E%3Crect x='80' y='0' width='16' height='16'/%3E%3Crect x='80' y='16' width='16' height='16'/%3E%3Crect x='80' y='32' width='16' height='16'/%3E%3Crect x='64' y='0' width='16' height='16'/%3E%3Crect x='48' y='0' width='16' height='16'/%3E%3C/g%3E%3C/svg%3E") center / 60% no-repeat,
    linear-gradient(135deg, #A81500, #E8520A 55%, #FF8A50);
}
/* Reveal: reuse the shared mega flicker/fade arming, staggered top to bottom.
   The chip + supporting line fade; the headline strikes on like the tube titles. */
#pricing .sh-mega[data-flicker] .pr-chip,
#pricing .sh-mega[data-flicker] .pr-head-title,
#pricing .sh-mega[data-flicker] .pr-benefits { opacity: 0; }
#pricing .sh-mega.is-lit .pr-chip { animation: mega-tag-in 0.4s ease-out 0.08s forwards; }
#pricing .sh-mega.is-lit .pr-head-title { animation: mega-flicker 1.15s steps(1, end) 0.18s forwards; }
#pricing .sh-mega.is-lit .pr-benefits { animation: mega-tag-in 0.45s ease-out 0.95s forwards; }
@media (prefers-reduced-motion: reduce) {
  #pricing .sh-mega[data-flicker] .pr-chip,
  #pricing .sh-mega[data-flicker] .pr-head-title,
  #pricing .sh-mega[data-flicker] .pr-benefits { opacity: 1; animation: none; }
}

/* ---- Comparison — alternatives vs Local Leader ---- */
.cmp-wrap {
  width: 94vw;
  max-width: 1680px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);   /* break out of the 1280px .container, center in viewport */
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFBFC 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 5vw, 6rem);
}
.cmp-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
/* Reuses the shared .hiw-title two-font system (GCGatuzo + Fraunces italic
   accent); only the size/spacing are capped for this in-card headline. */
#pricing .cmp-headline {
  font-size: clamp(1.7rem, 1.05rem + 2.3vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0.4rem auto 0;
  max-width: 760px;
}
.cmp-sub {
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 560px;
  margin: 1rem auto 0;
}
.cmp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.9rem, 2vw, 1.75rem);
  align-items: start;
  max-width: 980px;
  margin-inline: auto;
}
.cmp-col { display: flex; flex-direction: column; gap: 12px; }
.cmp-col-title {
  display: flex;
  align-items: center;
  justify-content: center;   /* centered over the cards below */
  min-height: 34px;          /* both columns' titles share a height so row 1 aligns */
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
}
.cmp-col-title--old { color: var(--ink-3); }
.cmp-col-title--new { color: var(--accent-ink); }
/* Full "Local Leader" lockup. The brand PNG is a white-on-transparent logo (for
   dark surfaces), so on this white card we use its alpha as a mask and paint it
   in the brand orange gradient — matching the .svc-emblem treatment and the
   orange accent of the Local Leader column. */
.cmp-col-logo {
  display: block;
  width: 150px; height: 30px;   /* PNG aspect 2000×400 = 5:1 */
  background: linear-gradient(135deg, #A81500, #E8520A 55%, #FF8A50);
  -webkit-mask: url("Brand Assets/Copy of Your paragraph text.png") center / contain no-repeat;
          mask: url("Brand Assets/Copy of Your paragraph text.png") center / contain no-repeat;
}
.cmp-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #F2F2F3;
  border: 1px solid rgba(23, 23, 25, 0.05);
  border-radius: var(--r-lg);
  padding: 13px 16px;
  min-height: 66px;
}
.cmp-item p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink-2);
  font-weight: 400;
}
.cmp-item--new p { color: var(--ink); font-weight: 500; }
.cmp-item--price p { font-weight: 700; color: var(--ink); }
.cmp-ico {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cmp-ico svg { width: 20px; height: 20px; display: block; }
.cmp-ico--minus { background: #1A1A1A; }
.cmp-ico--plus {
  background: linear-gradient(135deg, #FF7A30, #A81500);
  box-shadow: 0 2px 10px rgba(232, 82, 10, 0.28);
}
/* Pricing card hover lift — featured card excluded (it sits inside the
   overflow-hidden spin-border wrap and already carries the animated border) */
#pricing .card {
  transition: transform var(--dur-2) var(--ease-out), border-color 0.25s ease, box-shadow 0.25s ease;
}
#pricing .card:not(.price-card-popular):hover { transform: translateY(-4px); }
/* Mobile: the two columns stack, "Other Agencies" first, then "Local Leader". */
@media (max-width: 680px) {
  .cmp-wrap { width: 92vw; padding: 1.75rem 1.25rem; }
  .cmp-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .cmp-col-title { margin-bottom: 0.2rem; }
}

/* ── Responsive hardening ──────────────────────────────────────────────────
   Shared safeguards for the imported static pages. These rules preserve the
   desktop composition while giving narrow viewports a deliberate single-column
   or two-column rhythm instead of relying on horizontal clipping. */
@media (max-width: 860px) {
  .ic-darkcard {
    width: calc(100% + 2.3rem);
    left: -1.15rem;
    transform: none;
  }
  .ic-grid > .ic-card,
  .ic-split .ic-card {
    flex-basis: calc(50% - 4px);
    min-width: 0;
  }
  .ic-photo { max-width: min(100%, 420px); }
  .cmp-grid { grid-template-columns: 1fr; gap: 1.35rem; }
  .cmp-col-logo { width: min(150px, 56vw); }
}

@media (max-width: 640px) {
  .section-pad { padding-top: 3.75rem; padding-bottom: 3.75rem; }
  .hiw-title,
  .hiw-title--hero,
  .hiw-title--section { overflow-wrap: anywhere; }
  .hiw-title--hero { font-size: clamp(1.85rem, 8vw, 2.45rem) !important; }
  .ic-grid > .ic-card,
  .ic-split .ic-card { flex-basis: 100%; }
  .ic-card { min-height: 0; }
  .ic-card__foot { padding-right: 3.35rem; }
  .foot-main { grid-template-columns: 1fr; gap: 1.65rem; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .field-row { grid-template-columns: 1fr !important; }
  .btn-cta { max-width: 100%; min-width: 0; }
  .btn-cta__label { white-space: normal; overflow-wrap: anywhere; text-align: center; }
  .fw-mac-base { width: 100%; left: 0; }
}

/* Homepage hero: phone and tablet use the moving image as a pinned backdrop,
   while the client-preview card remains a compact desktop-only composition. */
@media (max-width: 1023px) {
  /* Tablet resumes the existing landscape hero scroll renderer. The supplied
     portrait source is reserved for the phone-specific query below. */
  body:not(.inner-page) #hero .hero-mobile-video { display: none; }
  body:not(.inner-page) #hero .hero-canvas { opacity: 1; }
  body:not(.inner-page) #main-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(23, 23, 25, 0.64) 0%, rgba(23, 23, 25, 0.18) 75%, transparent 100%);
  }
  body:not(.inner-page) #main-nav .nav-inner { padding-block: 1.1rem; }
  body:not(.inner-page) #hero { min-height: clamp(620px, 88svh, 820px); padding-top: clamp(7.4rem, 17vw, 9.5rem); }
  body:not(.inner-page) #hero-video-card { display: none !important; }
  body:not(.inner-page) #hero .hero-layout { min-height: 0; }
  body:not(.inner-page) #hero .hero-scrim {
    background:
      linear-gradient(to top, rgba(23,23,25,0.68) 0%, rgba(23,23,25,0.16) 24%, transparent 44%),
      linear-gradient(to bottom, rgba(23,23,25,0.34) 0%, transparent 24%);
  }
}

/* Tablet: preserve the native 16:9 landscape hero boundary. The next section
   starts immediately after this frame; no duplicated continuation is required. */
@media (min-width: 601px) and (max-width: 1023px) {
  /* The rail is moved inside the hero on tablet, placing it at the exact hero
     hand-off. It therefore follows the pinned hero and then naturally scrolls
     away with it instead of staying fixed over later content. */
  #hero > .logo-marquee {
    position: absolute !important;
    top: calc(100% - 32px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 6 !important;
    height: 190px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    padding-top: 50px;
    overflow: hidden !important;
    background-color: var(--bg);
    background-image: var(--page-canvas-wash), var(--page-canvas-noise);
    background-size: var(--page-canvas-size);
    background-attachment: fixed, fixed;
    border-radius: 32px 32px 0 0;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
  }
  /* With the rail restored to the rounded following surface, keep the same
     compact tablet presentation but return it to document flow so it visibly
     leads the new surface instead of being positioned beyond its bottom edge. */
  .hero-following-surface > .logo-marquee {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 1 !important;
    height: 132px !important;
    margin: 0 !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
  }
  #hero > .logo-marquee .lm-track,
  .hero-following-surface > .logo-marquee .lm-track { gap: 1.35rem; height: 86%; }
  #hero > .logo-marquee .lm-card,
  .hero-following-surface > .logo-marquee .lm-card { min-width: 228px; padding: 0 1.7rem; }
  #hero > .logo-marquee .lm-card-inner,
  .hero-following-surface > .logo-marquee .lm-card-inner { gap: 0.65rem; }
  #hero > .logo-marquee .lm-card-inner svg,
  .hero-following-surface > .logo-marquee .lm-card-inner svg { width: 30px; height: 30px; }
  #hero > .logo-marquee .lm-card-inner span,
  .hero-following-surface > .logo-marquee .lm-card-inner span { font-size: 1.05rem; }
  body:not(.inner-page) #hero {
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: visible;
    padding: clamp(4.6rem, 9vw, 5.8rem) 1.5rem clamp(0.8rem, 1.8vw, 1.25rem);
  }
  body:not(.inner-page) #hero > .container {
    height: 100%;
    display: flex;
    align-items: center;
  }
  body:not(.inner-page) #hero .hero-layout {
    width: 100%;
    min-height: 0;
    gap: clamp(0.45rem, 1vw, 0.7rem);
  }
}

@media (max-width: 600px) {
  body:not(.inner-page) #hero .hero-mobile-video { display: block; }
  /* The supplied portrait source includes deliberate black leader/trailer bands.
     Scale both media layers together to let the actual tool-table frame fill the
     full phone hero while preserving a perfectly aligned poster-to-video hand-off. */
  body:not(.inner-page) #hero .hero-canvas,
  body:not(.inner-page) #hero .hero-mobile-video {
    transform: scale(1.55);
    transform-origin: center center;
  }
  /* Do not hide the preloaded poster until the portrait video has a decoded
     frame. On a cold load this prevents the opening hero from becoming blank. */
  body:not(.inner-page) #hero .hero-canvas { opacity: 1; transition: opacity 0.3s ease; }
  body:not(.inner-page) #hero .hero-media:has(.hero-mobile-video.is-ready) .hero-canvas { opacity: 0; }
  body:not(.inner-page) #main-nav .container { padding-inline: 1.15rem; }
  body:not(.inner-page) #hero {
    min-height: clamp(620px, 88svh, 760px);
    height: auto;
    padding-top: 7.1rem;
    padding-bottom: 3rem;
  }
  /* Show the same rounded page-canvas edge inside the portrait hero from the
     first frame. It is a visual continuation only: the real following surface
     and its trust-card spacing remain in normal document flow. */
  body:not(.inner-page) #hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    z-index: 1;
    border-radius: 24px 24px 0 0;
    background-color: var(--bg);
    background-image: var(--page-canvas-wash), var(--page-canvas-noise);
    background-size: var(--page-canvas-size);
    background-attachment: fixed, fixed;
    pointer-events: none;
  }
}

/* Shared service/trade inclusion accordions — the homepage's established narrow
   interaction is reused here. On tablet, the photo sits beside exactly the first
   three collapsed cards; later cards start below the pair at full width. This
   prevents the portrait from being stretched to the complete card list. */
@media (max-width: 1023px) {
  #features .ic-card {
    display: block;
    height: 88px;
    min-height: 88px;
    padding: 0 4.45rem 0 1.2rem;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
  }
  #features .ic-card__title {
    position: absolute;
    top: 0;
    left: 1.2rem;
    right: 4.45rem;
    display: flex;
    align-items: center;
    height: 88px;
    margin: 0;
    font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.28rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
  }
  #features .ic-card__foot {
    display: block;
    padding: 0;
    margin: 0;
  }
  #features .ic-card__body {
    max-height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.28s ease, opacity 0.2s ease;
  }
  #features .ic-card__plus {
    top: 50%;
    right: 1.15rem;
    bottom: auto;
    transform: translateY(-50%);
  }
  #features .ic-card.is-open {
    height: auto;
    min-height: 88px;
    padding-bottom: 1.15rem;
  }
  #features .ic-card.is-open .ic-card__foot { padding-top: 5.15rem; }
  #features .ic-card.is-open .ic-card__body { max-height: 24rem; opacity: 1; }
  #features .ic-card.is-open .ic-card__plus::before { opacity: 1; }
  #features .ic-card.is-open .ic-card__glyph { transform: rotate(270deg); }
  #features .ic-card.is-open .ic-card__glyph::before { opacity: 0; }
  #features .ic-card.is-open .ic-card__glyph::after { background: #171719; }
  #features .ic-card:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
  }
}

@media (min-width: 601px) and (max-width: 1023px) {
  #features .ic-split {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    grid-template-rows: repeat(3, 112px);
    grid-auto-rows: auto;
    gap: 12px;
    align-items: start;
  }
  #features .ic-split:has(.ic-card:nth-child(1).is-open) { grid-template-rows: auto 112px 112px; }
  #features .ic-split:has(.ic-card:nth-child(2).is-open) { grid-template-rows: 112px auto 112px; }
  #features .ic-split:has(.ic-card:nth-child(3).is-open) { grid-template-rows: 112px 112px auto; }
  #features .ic-photo {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 270px;
    height: 360px;
    min-height: 0;
    max-width: none;
    margin: 0;
    align-self: start;
  }
  #features .ic-grid { display: contents; }
  #features .ic-card { grid-column: 2; min-width: 0; }
  #features .ic-card:nth-child(1) { grid-row: 1; }
  #features .ic-card:nth-child(2) { grid-row: 2; }
  #features .ic-card:nth-child(3) { grid-row: 3; }
  #features .ic-card:nth-child(-n + 3):not(.is-open) {
    height: 100%;
    min-height: 0;
  }
  #features .ic-card:nth-child(-n + 3):not(.is-open) .ic-card__title { height: 100%; }
  #features .ic-card:nth-child(n + 4) {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 600px) {
  #features .ic-split { gap: 1.25rem; }
  #features .ic-photo {
    width: 100%;
    max-width: none;
    height: min(390px, 100vw);
    min-height: 0;
    margin-inline: 0;
    aspect-ratio: auto;
  }
  #features .ic-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #features .ic-card {
    width: 100%;
    flex: 0 0 auto;
  }
}