/*
Theme Name: GraniteVector
Theme URI: https://www.granitevectorsystems.com
Author: GraniteVector Systems
Author URI: https://www.granitevectorsystems.com
Description: Production-grade WordPress theme for GraniteVector Systems — a New Hampshire IT, HIPAA compliance, and growth consultancy. Full service menu (IT Vector, Growth Vector, Personal Services), conversion-focused landing page, built-in AJAX contact form with spam protection, LocalBusiness schema, and auto-setup. No manual page creation required.
Version: 3.9.4
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: granitevector
Tags: business, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready
*/

/* ==========================================================================
   RESET + BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--gv-font-body);
  color: var(--gv-ink);
  background: var(--gv-paper);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
/* Defensive: stop any long word/URL from forcing horizontal scroll */
h1, h2, h3, h4, h5, h6, p, li, a { overflow-wrap: break-word; word-wrap: break-word; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--gv-teal-deep); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--gv-teal); }
button { font: inherit; cursor: pointer; border: 0; background: transparent; }
hr { border: 0; border-top: 1px solid var(--gv-line); margin: 3rem 0; }
::selection { background: var(--gv-teal); color: var(--gv-graphite); }

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
  /* Core ink / paper */
  --gv-graphite: #0E1117;       /* nearly black, with warmth */
  --gv-graphite-900: #181C24;
  --gv-graphite-800: #242A35;
  --gv-graphite-700: #343B48;
  --gv-ink: #1A1F28;
  --gv-ink-soft: #4B5563;
  --gv-mute: #6B7280;
  --gv-line: #E4E4DF;
  --gv-line-strong: #CBCBC3;

  /* Warm neutrals */
  --gv-paper: #F7F5EF;          /* granite cream */
  --gv-paper-soft: #EFEDE6;
  --gv-white: #FFFFFF;
  --gv-cream: #FAFAF5;

  /* Accent — electric teal */
  --gv-teal: #00D4B8;
  --gv-teal-deep: #00A896;
  --gv-teal-glow: #6EEBD8;

  /* Secondary — signal amber (prices, urgency) */
  --gv-amber: #F59E0B;
  --gv-amber-soft: #FEF3C7;

  /* Status colors */
  --gv-success: #059669;
  --gv-success-soft: #D1FAE5;
  --gv-warn: #B45309;
  --gv-warn-soft: #FEF3C7;

  /* Typography */
  --gv-font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --gv-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gv-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Menlo, monospace;

  /* Radii */
  --gv-r-sm: 6px;
  --gv-r: 10px;
  --gv-r-lg: 18px;
  --gv-r-xl: 28px;

  /* Shadows */
  --gv-shadow-xs: 0 1px 2px rgba(14, 17, 23, 0.06);
  --gv-shadow-sm: 0 2px 6px rgba(14, 17, 23, 0.08);
  --gv-shadow: 0 8px 24px rgba(14, 17, 23, 0.10);
  --gv-shadow-lg: 0 24px 48px rgba(14, 17, 23, 0.14);
  --gv-shadow-xl: 0 40px 80px rgba(14, 17, 23, 0.20);

  /* Widths */
  --gv-container: 1240px;
  --gv-container-wide: 1400px;
  --gv-container-narrow: 860px;
  --gv-container-text: 680px;

  /* Spacing scale */
  --gv-s-1: 0.25rem;
  --gv-s-2: 0.5rem;
  --gv-s-3: 0.75rem;
  --gv-s-4: 1rem;
  --gv-s-5: 1.5rem;
  --gv-s-6: 2rem;
  --gv-s-7: 3rem;
  --gv-s-8: 4rem;
  --gv-s-9: 6rem;
  --gv-s-10: 8rem;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--gv-font-display);
  color: var(--gv-graphite);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 .6em;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 20;
}
h1 {
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  letter-spacing: -0.035em;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.03em;
}
h3 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  letter-spacing: -0.018em;
  font-weight: 600;
}
h4 {
  font-size: 1.125rem;
  font-family: var(--gv-font-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
p { margin: 0 0 1.05rem; }

.gv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--gv-font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gv-teal-deep);
  margin-bottom: 1rem;
}
.gv-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gv-teal-deep);
}

.gv-lede {
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  color: var(--gv-ink-soft);
  line-height: 1.55;
  max-width: 62ch;
}
.gv-lede-lg {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: var(--gv-ink-soft);
  line-height: 1.5;
  font-weight: 400;
}

.gv-display {
  font-family: var(--gv-font-display);
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  color: var(--gv-teal-deep);
}

.gv-mono { font-family: var(--gv-font-mono); font-size: .875em; }
.gv-strike { text-decoration: line-through; color: var(--gv-mute); }

.gv-prose p { max-width: 62ch; }
.gv-prose h2 { margin-top: 2.5rem; }
.gv-prose h3 { margin-top: 2rem; }
.gv-prose ul, .gv-prose ol { max-width: 62ch; padding-left: 1.25rem; }
.gv-prose li { margin-bottom: .5rem; }
.gv-prose blockquote {
  border-left: 3px solid var(--gv-teal);
  padding: .5rem 0 .5rem 1.25rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--gv-ink-soft);
  max-width: 62ch;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.gv-container { max-width: var(--gv-container); margin: 0 auto; padding: 0 1.5rem; }
.gv-container-wide { max-width: var(--gv-container-wide); margin: 0 auto; padding: 0 1.5rem; }
.gv-container-narrow { max-width: var(--gv-container-narrow); margin: 0 auto; padding: 0 1.5rem; }
.gv-container-text { max-width: var(--gv-container-text); margin: 0 auto; padding: 0 1.5rem; }

.gv-section { padding: clamp(4rem, 8vw, 7rem) 0; position: relative; }
.gv-section-sm { padding: clamp(3rem, 5vw, 4.5rem) 0; }
/* Tighter top padding for the section directly after a page header — keeps
   the contact form / first content above the fold on phones. */
.gv-page-header + .gv-section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.gv-section-dark { background: var(--gv-graphite); color: var(--gv-paper); }
.gv-section-dark h1, .gv-section-dark h2, .gv-section-dark h3, .gv-section-dark h4 { color: var(--gv-cream); }
.gv-section-dark .gv-eyebrow { color: var(--gv-teal-glow); }
.gv-section-dark .gv-eyebrow::before { background: var(--gv-teal-glow); }
.gv-section-dark .gv-lede, .gv-section-dark .gv-lede-lg { color: rgba(247, 245, 239, .8); }
.gv-section-cream { background: var(--gv-cream); }
.gv-section-paper { background: var(--gv-paper-soft); }

.gv-grid { display: grid; gap: 2rem; }
.gv-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gv-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gv-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gv-grid-split { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 4rem; }

@media (max-width: 1024px) {
  .gv-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gv-grid-split { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 720px) {
  .gv-grid-2, .gv-grid-3 { grid-template-columns: 1fr; }
  .gv-section { padding: 3.5rem 0; }
}

.gv-text-center { text-align: center; }
.gv-mt-sm { margin-top: 1rem; }
.gv-mt-md { margin-top: 2rem; }
.gv-mt-lg { margin-top: 3rem; }
.gv-mb-sm { margin-bottom: 1rem; }
.gv-mb-md { margin-bottom: 2rem; }
.gv-mb-lg { margin-bottom: 3rem; }

/* ==========================================================================
   GRANITE TEXTURE + VECTOR DECORATION
   ========================================================================== */
.gv-granite-bg {
  position: relative;
  background: var(--gv-graphite);
  overflow: hidden;
}
.gv-granite-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(0, 212, 184, .10) 0%, transparent 30%),
    radial-gradient(circle at 85% 75%, rgba(0, 168, 150, .08) 0%, transparent 40%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.06 0 0 0 0 0.08 0 0 0 0.35 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.55'/></svg>");
  pointer-events: none;
  opacity: .9;
}
.gv-granite-bg > * { position: relative; z-index: 1; }

.gv-vector-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.gv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  font-family: var(--gv-font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--gv-r);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
  line-height: 1;
}
.gv-btn-primary {
  background: var(--gv-teal);
  color: var(--gv-graphite);
  border-color: var(--gv-teal);
  box-shadow: 0 4px 0 var(--gv-teal-deep), 0 10px 20px rgba(0, 168, 150, .28);
}
.gv-btn-primary:hover {
  transform: translateY(-2px);
  color: var(--gv-graphite);
  box-shadow: 0 6px 0 var(--gv-teal-deep), 0 16px 32px rgba(0, 168, 150, .34);
}
.gv-btn-primary:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--gv-teal-deep); }
.gv-btn-ghost {
  background: transparent;
  color: var(--gv-graphite);
  border-color: var(--gv-graphite);
}
.gv-btn-ghost:hover { background: var(--gv-graphite); color: var(--gv-paper); }
.gv-btn-on-dark {
  background: transparent;
  color: var(--gv-paper);
  border-color: rgba(247, 245, 239, .4);
}
.gv-btn-on-dark:hover { background: var(--gv-paper); color: var(--gv-graphite); border-color: var(--gv-paper); }
.gv-btn-lg { padding: 1.15rem 2rem; font-size: 1.0625rem; }
.gv-btn-sm { padding: .65rem 1.1rem; font-size: .9375rem; }
.gv-btn-arrow::after {
  content: "→";
  font-family: var(--gv-font-mono);
  font-weight: 400;
  transition: transform .2s ease;
}
.gv-btn-arrow:hover::after { transform: translateX(4px); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.gv-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 245, 239, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--gv-line);
}
.gv-header-inner {
  max-width: var(--gv-container-wide);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
}
.gv-logo {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--gv-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--gv-graphite);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.gv-logo:hover { color: var(--gv-graphite); }
.gv-logo-mark {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gv-graphite);
  color: var(--gv-teal);
  border-radius: 7px;
  font-weight: 700;
}
.gv-logo img { max-height: 40px; width: auto; }

/* Uploaded custom logo sizing (WordPress wraps it in .custom-logo-link > img.custom-logo inside .gv-logo-wrap) */
.gv-logo-wrap { display: flex; align-items: center; }
.gv-logo-wrap a,
.gv-logo-wrap .custom-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}
.gv-logo-wrap img,
.gv-logo-wrap .custom-logo {
  height: var(--gv-logo-h, 48px);
  max-height: var(--gv-logo-h, 48px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 720px) {
  .gv-logo-wrap img,
  .gv-logo-wrap .custom-logo {
    height: var(--gv-logo-h-mobile, 36px);
    max-height: var(--gv-logo-h-mobile, 36px);
  }
}

.gv-menu {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
}
.gv-menu a {
  font-family: var(--gv-font-body);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--gv-ink);
  letter-spacing: -0.003em;
  position: relative;
}
.gv-menu a:hover { color: var(--gv-teal-deep); }
.gv-menu .current-menu-item > a,
.gv-menu .current_page_item > a {
  color: var(--gv-teal-deep);
}
.gv-menu .current-menu-item > a::after,
.gv-menu .current_page_item > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--gv-teal);
}

.gv-header-cta {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.gv-phone {
  font-family: var(--gv-font-mono);
  font-size: .875rem;
  color: var(--gv-ink-soft);
  font-weight: 500;
}
.gv-phone:hover { color: var(--gv-teal-deep); }

.gv-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gv-line-strong);
  border-radius: var(--gv-r-sm);
  background: transparent;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.gv-hamburger span { display: block; width: 18px; height: 2px; background: var(--gv-graphite); position: relative; }
.gv-hamburger span::before, .gv-hamburger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--gv-graphite);
}
.gv-hamburger span::before { top: -6px; }
.gv-hamburger span::after { top: 6px; }

/* Always-visible mobile phone icon (hidden on desktop) */
.gv-phone-icon {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gv-line-strong);
  border-radius: var(--gv-r-sm);
  color: var(--gv-graphite);
  background: transparent;
  flex-shrink: 0;
}
.gv-phone-icon:hover { color: var(--gv-teal-deep); border-color: var(--gv-teal-deep); }

@media (max-width: 960px) {
  /* Mobile header layout: logo (flex 1) | phone-icon | hamburger | CTA-hidden */
  .gv-header-inner {
    grid-template-columns: 1fr auto auto;
    gap: .5rem;
    padding: .75rem 1rem;
  }
  .gv-hamburger { display: inline-flex; }
  .gv-phone-icon { display: inline-flex; }
  /* Hide the desktop CTA cluster on mobile; its contents (phone + Book a call) move into the drawer */
  .gv-header-cta { display: none; }
  /* Logo gets first column (1fr) so it has room — won't get squeezed */
  .gv-logo-wrap, .gv-logo { min-width: 0; max-width: 100%; }
  .gv-logo-wrap img, .gv-logo-wrap .custom-logo {
    max-width: 100%;
    height: var(--gv-logo-h-mobile, 36px);
    max-height: var(--gv-logo-h-mobile, 36px);
    width: auto;
  }

  .gv-nav-wrap {
    /* position: absolute (not fixed) — backdrop-filter on .gv-site-header
       creates a containing block that breaks position: fixed in Safari/iOS,
       silently demoting it to absolute. We embrace that. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--gv-paper);
    padding: 1.75rem 1.25rem 2rem;
    border-top: 1px solid var(--gv-line);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .12);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .gv-nav-wrap.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
  }
  .gv-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 0; margin: 0; list-style: none; }
  .gv-menu li { border-bottom: 1px solid var(--gv-line); }
  .gv-menu li:last-child { border-bottom: 0; }
  .gv-menu a { display: block; font-size: 1.0625rem; padding: .9rem 0; }

  /* In-drawer CTA */
  .gv-nav-cta { margin-top: 1.5rem; }
  .gv-nav-cta .gv-btn { display: inline-flex; width: 100%; justify-content: center; padding: .9rem 1.25rem; font-size: 1rem; }

  /* In-drawer contact block */
  .gv-nav-contact { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--gv-line); }
  .gv-nav-contact-link { display: inline-flex; align-items: center; gap: .65rem; color: var(--gv-graphite); font-family: var(--gv-font-mono); font-size: .9375rem; font-weight: 500; }
  .gv-nav-contact-link svg { color: var(--gv-teal-deep); flex-shrink: 0; }
  .gv-nav-contact-link:hover { color: var(--gv-teal-deep); }
}
/* Hide drawer-only blocks on desktop (CTA + contact remain in header CTA cluster there) */
@media (min-width: 961px) { .gv-nav-cta, .gv-nav-contact { display: none; } }

/* ==========================================================================
   HERO — LANDING PAGE
   ========================================================================== */
.gv-hero {
  position: relative;
  padding: clamp(1.5rem, 2.5vw, 2.5rem) 0 clamp(2.5rem, 4vw, 4rem);
  background: var(--gv-graphite);
  color: var(--gv-paper);
  overflow: hidden;
}
.gv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 80% 60% at 15% 10%, rgba(0, 212, 184, .18) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(0, 168, 150, .12) 0%, transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='9'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.1 0 0 0 0 0.14 0 0 0 0.4 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  pointer-events: none;
}
.gv-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}
.gv-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--gv-container);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 960px) { .gv-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (max-width: 480px) { .gv-hero-inner { padding: 0 1rem; } }

.gv-hero-eyebrow {
  font-family: var(--gv-font-mono);
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gv-teal-glow);
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: 1.5rem;
}
.gv-hero-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gv-teal);
  box-shadow: 0 0 12px var(--gv-teal);
  animation: gv-pulse 2.4s ease-in-out infinite;
}
@keyframes gv-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(1.3); }
}

.gv-hero h1 {
  color: var(--gv-cream);
  font-size: clamp(1.875rem, 6vw, 5.25rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
  hyphens: auto;
  -webkit-hyphens: auto;
}
@media (max-width: 480px) {
  .gv-hero h1 { font-size: 1.625rem; line-height: 1.1; }
}
.gv-hero h1 em {
  font-style: italic;
  color: var(--gv-teal);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 400;
}
.gv-hero-lede {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  color: rgba(247, 245, 239, .82);
  line-height: 1.55;
  max-width: 56ch;
  margin-bottom: 2rem;
}
.gv-hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2.5rem;
}
.gv-hero-ctas .gv-btn-primary {
  box-shadow: 0 4px 0 var(--gv-teal-deep), 0 10px 32px rgba(0, 168, 150, .4);
}
.gv-hero-trust {
  font-family: var(--gv-font-mono);
  font-size: .8125rem;
  color: rgba(247, 245, 239, .6);
  letter-spacing: .05em;
}
.gv-hero-trust strong { color: var(--gv-teal-glow); font-weight: 500; }

/* Credibility card on right */
.gv-cred-card {
  background: var(--gv-graphite-900);
  border: 1px solid var(--gv-graphite-700);
  border-radius: var(--gv-r-lg);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.gv-cred-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gv-teal), transparent);
}
.gv-cred-card h3 {
  color: var(--gv-cream);
  font-family: var(--gv-font-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gv-teal-glow);
  margin-bottom: 1.5rem;
}
.gv-cred-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.gv-cred-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: flex-start;
}
.gv-cred-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 212, 184, .12);
  border: 1px solid rgba(0, 212, 184, .25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gv-teal);
  flex-shrink: 0;
}
.gv-cred-mark svg { width: 16px; height: 16px; }
.gv-cred-text strong {
  display: block;
  font-family: var(--gv-font-body);
  color: var(--gv-cream);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: -0.005em;
  margin-bottom: .2rem;
}
.gv-cred-text span {
  font-size: .875rem;
  color: rgba(247, 245, 239, .7);
  line-height: 1.4;
}

/* ==========================================================================
   TRUST BAR
   ========================================================================== */
.gv-trust-bar {
  background: var(--gv-graphite-900);
  border-top: 1px solid var(--gv-graphite-800);
  border-bottom: 1px solid var(--gv-graphite-800);
  padding: 2.5rem 0;
  color: rgba(247, 245, 239, .75);
}
.gv-trust-bar-inner {
  max-width: var(--gv-container-wide);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}
.gv-trust-head { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.gv-trust-bar .gv-eyebrow { color: var(--gv-teal-glow); }
.gv-trust-headline {
  font-family: var(--gv-font-display);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 500;
  color: var(--gv-cream);
  margin: 0;
  line-height: 1.35;
  max-width: 36ch;
}
.gv-trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 2rem;
  justify-content: center;
  align-items: center;
  font-family: var(--gv-font-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.gv-trust-chips span { display: inline-flex; align-items: center; gap: .5rem; }
.gv-trust-chips span::before {
  content: "◆";
  color: var(--gv-teal);
  font-size: .625rem;
}

/* ==========================================================================
   PAIN POINT / PROBLEM SECTION
   ========================================================================== */
.gv-pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
@media (max-width: 960px) { .gv-pain-grid { grid-template-columns: 1fr; } }
.gv-pain-card {
  background: var(--gv-white);
  border: 1px solid var(--gv-line);
  border-radius: var(--gv-r-lg);
  padding: 2rem;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gv-pain-card:hover { transform: translateY(-4px); box-shadow: var(--gv-shadow); border-color: var(--gv-line-strong); }
.gv-pain-num {
  font-family: var(--gv-font-display);
  font-style: italic;
  font-size: 3rem;
  font-weight: 400;
  color: var(--gv-teal-deep);
  line-height: 1;
  margin-bottom: 1rem;
  font-variation-settings: "opsz" 144, "SOFT" 80;
}
.gv-pain-card h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.gv-pain-card p { color: var(--gv-ink-soft); margin: 0; font-size: .9375rem; line-height: 1.55; }

/* ==========================================================================
   PILLAR GRID (Services preview on homepage)
   ========================================================================== */
.gv-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 960px) { .gv-pillar-grid { grid-template-columns: 1fr; } }

.gv-pillar {
  background: var(--gv-white);
  border: 1px solid var(--gv-line);
  border-radius: var(--gv-r-lg);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gv-pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--gv-shadow-lg);
  border-color: var(--gv-teal);
}
.gv-pillar::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  background: var(--gv-accent, var(--gv-teal));
}
.gv-pillar-it { --gv-accent: var(--gv-teal); }
.gv-pillar-growth { --gv-accent: var(--gv-amber); }
.gv-pillar-personal { --gv-accent: #8B5CF6; }

.gv-pillar-tag {
  font-family: var(--gv-font-mono);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gv-mute);
  margin-bottom: 1rem;
}
.gv-pillar h3 { font-size: 1.625rem; margin-bottom: .75rem; }
.gv-pillar p { color: var(--gv-ink-soft); font-size: .9375rem; margin-bottom: 1.5rem; }
.gv-pillar ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.gv-pillar ul li {
  font-size: .875rem;
  color: var(--gv-ink);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .625rem;
  align-items: flex-start;
}
.gv-pillar ul li::before {
  content: "→";
  color: var(--gv-accent, var(--gv-teal));
  font-family: var(--gv-font-mono);
  font-weight: 500;
  margin-top: 1px;
}
.gv-pillar-link {
  margin-top: auto;
  font-family: var(--gv-font-body);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--gv-graphite);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: color .2s ease, gap .2s ease;
}
.gv-pillar-link::after { content: "→"; transition: transform .2s ease; }
.gv-pillar-link:hover { color: var(--gv-accent, var(--gv-teal-deep)); gap: .65rem; }
.gv-pillar-link:hover::after { transform: translateX(3px); }

/* ==========================================================================
   MONEY-MAKER FEATURED SERVICES (Landing)
   ========================================================================== */
.gv-offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
}
@media (max-width: 960px) { .gv-offer-grid { grid-template-columns: 1fr; } }

.gv-offer {
  background: var(--gv-white);
  border-radius: var(--gv-r-xl);
  padding: 2.5rem 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gv-line);
  transition: transform .3s ease, box-shadow .3s ease;
}
.gv-offer:hover { transform: translateY(-6px); box-shadow: var(--gv-shadow-xl); }
.gv-offer-featured {
  background: var(--gv-graphite);
  color: var(--gv-paper);
  border-color: var(--gv-graphite);
  transform: scale(1.03);
  box-shadow: var(--gv-shadow-xl);
}
.gv-offer-featured:hover { transform: scale(1.03) translateY(-6px); }
.gv-offer-featured h3, .gv-offer-featured .gv-offer-name { color: var(--gv-cream); }
.gv-offer-featured .gv-offer-desc { color: rgba(247, 245, 239, .92); }
.gv-offer-featured .gv-offer-price { color: var(--gv-teal-glow); }
.gv-offer-featured .gv-offer-price small { color: rgba(247, 245, 239, .8); }
.gv-offer-featured .gv-offer-sub { color: rgba(247, 245, 239, .75); }
.gv-offer-featured ul li { color: rgba(247, 245, 239, 1); }
.gv-offer-featured ul li::before { color: var(--gv-teal-glow); }
.gv-offer-featured .gv-offer-points li { color: rgba(247, 245, 239, .95); }
.gv-offer-featured .gv-offer-points li::before { color: var(--gv-teal-glow); }
.gv-offer-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gv-amber);
  color: var(--gv-graphite);
  font-family: var(--gv-font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .4rem .9rem;
  border-radius: 99px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, .4);
}
.gv-offer-name {
  font-family: var(--gv-font-body);
  font-weight: 600;
  color: var(--gv-mute);
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.gv-offer h3 {
  font-size: 1.5rem;
  margin-bottom: .75rem;
  line-height: 1.2;
}
.gv-offer-desc {
  color: var(--gv-ink-soft);
  font-size: .9375rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.gv-offer-price {
  font-family: var(--gv-font-mono);
  font-size: 2rem;
  font-weight: 500;
  color: var(--gv-graphite);
  margin-bottom: .5rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.gv-offer-price small {
  font-size: .875rem;
  color: var(--gv-mute);
  font-weight: 400;
  letter-spacing: 0;
}
.gv-offer-sub {
  font-size: .8125rem;
  color: var(--gv-mute);
  margin-bottom: 1.75rem;
  font-family: var(--gv-font-mono);
}
.gv-offer ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  flex-grow: 1;
}
.gv-offer ul li {
  font-size: .9375rem;
  color: var(--gv-ink);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .625rem;
  align-items: flex-start;
  line-height: 1.45;
}
.gv-offer ul li::before {
  content: "✓";
  color: var(--gv-teal-deep);
  font-weight: 700;
}

/* Offer card: outcome-style bullets (used in place of feature checklist) */
.gv-offer-points {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  flex-grow: 1;
}
.gv-offer-points li {
  font-size: .9375rem;
  color: var(--gv-ink);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: flex-start;
  line-height: 1.5;
}
.gv-offer-points li::before {
  content: "→";
  color: var(--gv-teal-deep);
  font-weight: 700;
  font-family: var(--gv-font-mono);
  margin-top: 1px;
}

/* "Scoped pricing" style tag used in place of dollar amounts */
.gv-offer-scope {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--gv-font-mono);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gv-ink);
  padding: .55rem .85rem;
  border: 1px solid var(--gv-line);
  border-radius: 8px;
  margin-bottom: 1.75rem;
  background: var(--gv-paper-soft);
}
.gv-offer-scope::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 99px;
  background: var(--gv-teal-deep);
  flex-shrink: 0;
}
.gv-offer-featured .gv-offer-scope {
  color: var(--gv-cream);
  background: rgba(247, 245, 239, .08);
  border-color: rgba(247, 245, 239, .2);
}
.gv-offer-featured .gv-offer-scope::before { background: var(--gv-teal-glow); }

/* Offer card section intro (kept for clarity if a brief lead-in is needed) */
.gv-offer-lead {
  font-size: .9375rem;
  color: var(--gv-ink-soft);
  margin-bottom: 1.25rem;
  line-height: 1.55;
}
.gv-offer-featured .gv-offer-lead { color: rgba(247, 245, 239, .88); }

/* ==========================================================================
   PROOF / TESTIMONIAL STRIPE
   ========================================================================== */
.gv-proof {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--gv-paper-soft);
  position: relative;
}
.gv-proof-quote {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  padding: 0 1.5rem;
}
.gv-proof-mark {
  font-family: var(--gv-font-display);
  font-size: 5rem;
  color: var(--gv-teal);
  line-height: .5;
  margin-bottom: 1rem;
}
.gv-proof-text {
  font-family: var(--gv-font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  color: var(--gv-graphite);
  margin-bottom: 1.5rem;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}
.gv-proof-attribution {
  font-family: var(--gv-font-mono);
  font-size: .8125rem;
  color: var(--gv-mute);
  letter-spacing: .05em;
}
.gv-proof-attribution strong { color: var(--gv-graphite); font-weight: 500; }

/* ==========================================================================
   OPERATING PRINCIPLES
   ========================================================================== */
.gv-principles {
  padding: clamp(4rem, 7vw, 6rem) 0;
  background: var(--gv-paper-soft);
  position: relative;
}
.gv-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (max-width: 960px) { .gv-principles-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gv-principles-grid { grid-template-columns: 1fr; } }

.gv-principle {
  position: relative;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--gv-white);
  border-radius: var(--gv-r-lg);
  border: 1px solid var(--gv-line);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gv-principle:hover {
  transform: translateY(-4px);
  box-shadow: var(--gv-shadow-lg);
  border-color: var(--gv-teal);
}
.gv-principle-num {
  font-family: var(--gv-font-mono);
  font-size: .75rem;
  letter-spacing: .2em;
  color: var(--gv-teal-deep);
  margin-bottom: .9rem;
  font-weight: 600;
}
.gv-principle h3 {
  font-size: 1.0625rem;
  margin-bottom: .6rem;
  line-height: 1.3;
  color: var(--gv-graphite);
}
.gv-principle p {
  color: var(--gv-ink-soft);
  font-size: .9rem;
  margin: 0;
  line-height: 1.55;
}

/* ==========================================================================
   PROCESS / HOW IT WORKS
   ========================================================================== */
.gv-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  position: relative;
}
@media (max-width: 960px) { .gv-process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gv-process { grid-template-columns: 1fr; } }

.gv-step {
  position: relative;
  padding: 2rem 1.5rem;
  background: var(--gv-white);
  border-radius: var(--gv-r-lg);
  border: 1px solid var(--gv-line);
}
.gv-step-num {
  font-family: var(--gv-font-mono);
  font-size: .75rem;
  letter-spacing: .2em;
  color: var(--gv-teal-deep);
  margin-bottom: 1rem;
}
.gv-step h3 { font-size: 1.125rem; margin-bottom: .5rem; line-height: 1.3; }
.gv-step p { color: var(--gv-ink-soft); font-size: .875rem; margin: 0; line-height: 1.55; }

/* ==========================================================================
   FINAL CTA / CONVERSION STRIPE
   ========================================================================== */
.gv-final-cta {
  background: var(--gv-graphite);
  color: var(--gv-cream);
  padding: clamp(4rem, 7vw, 6rem) 0;
  position: relative;
  overflow: hidden;
}
.gv-final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0, 212, 184, .18) 0%, transparent 60%),
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
}
.gv-final-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}
.gv-final-cta h2 {
  color: var(--gv-cream);
  margin-bottom: 1rem;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
}
.gv-final-cta-lede {
  color: rgba(247, 245, 239, .8);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  max-width: 56ch;
  margin: 0 auto 2rem;
}
.gv-final-cta-guarantee {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  font-family: var(--gv-font-mono);
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(247, 245, 239, .65);
}
.gv-final-cta-guarantee::before {
  content: "◆";
  color: var(--gv-teal);
}

/* ==========================================================================
   PAGE HEADER (inner pages)
   ========================================================================== */
.gv-page-header {
  padding: clamp(1.5rem, 2.5vw, 2.5rem) 0 clamp(1.25rem, 2vw, 2rem);
  background: var(--gv-graphite);
  color: var(--gv-cream);
  position: relative;
  overflow: hidden;
}
.gv-page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 60% 60% at 90% 10%, rgba(0, 212, 184, .12) 0%, transparent 60%),
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}
.gv-page-header-inner { position: relative; z-index: 1; max-width: var(--gv-container); margin: 0 auto; padding: 0 1.5rem; }
.gv-page-header h1 { color: var(--gv-cream); margin-bottom: .5rem; }
.gv-page-header p { color: rgba(247, 245, 239, .78); font-size: 1.0625rem; max-width: 62ch; margin: 0; }
.gv-breadcrumb {
  font-family: var(--gv-font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  color: rgba(247, 245, 239, .55);
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}
.gv-breadcrumb a { color: var(--gv-teal-glow); }
.gv-breadcrumb a:hover { color: var(--gv-teal); }

/* ==========================================================================
   GENERIC CARD GRID (for service pages)
   ========================================================================== */
.gv-card {
  background: var(--gv-white);
  border: 1px solid var(--gv-line);
  border-radius: var(--gv-r-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gv-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--gv-shadow);
  border-color: var(--gv-line-strong);
}
.gv-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  background: var(--gv-paper-soft);
  border: 1px solid var(--gv-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gv-teal-deep);
  margin-bottom: 1.25rem;
}
.gv-card-icon svg { width: 22px; height: 22px; }
.gv-card h3 {
  font-size: 1.1875rem;
  margin-bottom: .5rem;
  font-family: var(--gv-font-body);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.gv-card p {
  color: var(--gv-ink-soft);
  font-size: .9375rem;
  line-height: 1.55;
  margin: 0 0 1.25rem;
  flex-grow: 1;
}
.gv-card-price {
  font-family: var(--gv-font-mono);
  font-size: .9375rem;
  color: var(--gv-graphite);
  font-weight: 500;
  margin-bottom: 1rem;
  padding: .6rem .8rem;
  background: var(--gv-paper-soft);
  border-radius: var(--gv-r-sm);
  display: inline-block;
  border: 1px dashed var(--gv-line-strong);
}
.gv-card-link {
  font-family: var(--gv-font-body);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--gv-teal-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: auto;
}
.gv-card-link::after { content: "→"; transition: transform .2s ease; }
.gv-card-link:hover { gap: .6rem; }
.gv-card-link:hover::after { transform: translateX(3px); }

/* ==========================================================================
   SERVICE SECTION HEADERS (service-page sub-sections)
   ========================================================================== */
.gv-subsection-head {
  max-width: 760px;
  margin-bottom: 3rem;
}
.gv-section-divider {
  border-top: 1px solid var(--gv-line);
  margin: 4rem 0 0;
  padding-top: 4rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.gv-footer {
  background: var(--gv-graphite);
  color: rgba(247, 245, 239, .8);
  padding: 4rem 0 0;
  border-top: 1px solid var(--gv-graphite-800);
}
.gv-footer-inner {
  max-width: var(--gv-container-wide);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
}
@media (max-width: 960px) { .gv-footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 560px) { .gv-footer-inner { grid-template-columns: 1fr; } }

.gv-footer-brand .gv-logo { color: var(--gv-cream); margin-bottom: 1rem; }
.gv-footer-brand p { color: rgba(247, 245, 239, .7); font-size: .9375rem; max-width: 36ch; margin-bottom: 1.25rem; }
.gv-footer-brand .gv-phone { color: var(--gv-teal-glow); display: block; margin-bottom: .5rem; }
.gv-footer-brand .gv-phone:hover { color: var(--gv-teal); }

.gv-footer h4 {
  color: var(--gv-cream);
  font-family: var(--gv-font-mono);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  font-weight: 500;
}
.gv-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .625rem; }
.gv-footer li a {
  color: rgba(247, 245, 239, .72);
  font-size: .9375rem;
  text-decoration: none;
  transition: color .2s ease;
}
.gv-footer li a:hover { color: var(--gv-teal-glow); }

.gv-footer-bottom {
  border-top: 1px solid var(--gv-graphite-800);
  margin-top: 3rem;
  padding: 1.5rem 0;
}
.gv-footer-bottom-inner {
  max-width: var(--gv-container-wide);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--gv-font-mono);
  font-size: .75rem;
  color: rgba(247, 245, 239, .55);
  letter-spacing: .05em;
}

/* ==========================================================================
   FORM
   ========================================================================== */
.gv-form {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.gv-form-field { display: flex; flex-direction: column; gap: .5rem; }
.gv-form-field label {
  font-family: var(--gv-font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gv-graphite);
  font-weight: 500;
}
.gv-form-field input,
.gv-form-field textarea,
.gv-form-field select {
  font-family: var(--gv-font-body);
  font-size: 1rem;
  padding: .85rem 1rem;
  border: 1.5px solid var(--gv-line-strong);
  border-radius: var(--gv-r);
  background: var(--gv-white);
  color: var(--gv-graphite);
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.gv-form-field input:focus,
.gv-form-field textarea:focus,
.gv-form-field select:focus {
  outline: none;
  border-color: var(--gv-teal-deep);
  box-shadow: 0 0 0 3px rgba(0, 168, 150, .15);
}
.gv-form-field textarea { resize: vertical; min-height: 130px; }
.gv-form-msg { font-family: var(--gv-font-mono); font-size: .875rem; padding: .9rem 1rem; border-radius: var(--gv-r); display: none; }
.gv-form-msg.is-visible { display: block; }
.gv-form-msg.is-success { background: var(--gv-success-soft); color: var(--gv-success); border: 1px solid var(--gv-success); }
.gv-form-msg.is-error { background: #FEE2E2; color: #991B1B; border: 1px solid #DC2626; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.gv-faq { max-width: 820px; margin: 3rem auto 0; }
.gv-faq-item {
  border-bottom: 1px solid var(--gv-line);
  padding: 1.5rem 0;
}
.gv-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: flex-start;
  font-family: var(--gv-font-display);
  font-weight: 500;
  font-size: 1.1875rem;
  color: var(--gv-graphite);
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.gv-faq-item summary::-webkit-details-marker { display: none; }
.gv-faq-item summary::after {
  content: "+";
  font-family: var(--gv-font-mono);
  font-weight: 300;
  font-size: 1.75rem;
  color: var(--gv-teal-deep);
  transition: transform .25s ease;
  line-height: 1;
}
.gv-faq-item[open] summary::after { transform: rotate(45deg); }
.gv-faq-item p {
  margin: 1rem 0 0;
  color: var(--gv-ink-soft);
  line-height: 1.65;
  max-width: 70ch;
}

/* ==========================================================================
   UTILITY
   ========================================================================== */
.gv-accent-text { color: var(--gv-teal-deep); }
.gv-flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }

/* Reveal on scroll */
.gv-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.gv-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   404 PAGE
   ========================================================================== */
.gv-404 {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  text-align: center;
}
.gv-404-num {
  font-family: var(--gv-font-display);
  font-style: italic;
  font-size: clamp(6rem, 20vw, 14rem);
  color: var(--gv-teal-deep);
  line-height: .9;
  margin-bottom: 1rem;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

/* ==========================================================================
   "NO SURPRISES" PRICING REPLACEMENT — sitewide replacement for former pricing
   ========================================================================== */
.gv-no-surprises {
  display: block;
  margin: 2.5rem auto;
  max-width: 720px;
  background: var(--gv-cream, #f4efe6);
  border: 2px solid var(--gv-teal-deep, #00a896);
  border-radius: 14px;
  padding: 2.25rem 2rem;
  text-align: center;
  position: relative;
}
.gv-no-surprises-inner { max-width: 600px; margin: 0 auto; }
.gv-no-surprises .gv-eyebrow {
  display: inline-flex;
  justify-content: center;
  margin-bottom: .75rem;
  color: var(--gv-teal-deep, #00a896);
  font-family: var(--gv-font-mono, monospace);
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.gv-no-surprises-headline {
  margin: 0 0 .85rem;
  font-size: clamp(1.4rem, 2.3vw, 1.75rem);
  font-weight: 700;
  color: var(--gv-graphite, #1a1c1f);
  line-height: 1.25;
}
.gv-no-surprises-body {
  margin: 0 auto 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--gv-ink-soft, #4a5057);
  max-width: 540px;
}
.gv-no-surprises .gv-btn { margin: 0 auto; }
.gv-no-surprises-foot {
  margin: 1.25rem 0 0;
  font-family: var(--gv-font-mono, monospace);
  font-size: .8125rem;
  color: var(--gv-mute, #767c84);
  letter-spacing: .03em;
}

/* Variants */
.gv-no-surprises-dark {
  background: var(--gv-graphite, #1a1c1f);
  border-color: var(--gv-teal-glow, #00d4b8);
}
.gv-no-surprises-dark .gv-no-surprises-headline { color: #fff; }
.gv-no-surprises-dark .gv-no-surprises-body { color: rgba(247,245,239,.82); }
.gv-no-surprises-dark .gv-no-surprises-foot { color: rgba(247,245,239,.55); }

@media (max-width: 640px) {
  .gv-no-surprises { padding: 1.75rem 1.25rem; margin: 1.75rem auto; }
}

/* ==========================================================================
   EMPTY-FIELD COLLAPSE — universal hiding for cleared Customizer fields
   When a field is empty, the rendered element has no content. :empty matches
   elements with zero children (no text, no whitespace, no comments). We hide
   such elements + suppress their decorative pseudo-elements so they leave no
   orphan markers, dashes, or extra spacing in the layout.
   ========================================================================== */

/* Headings — collapse if cleared (also suppresses their margins) */
h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty { display: none; }

/* Paragraphs and ledes */
p:empty,
.gv-lede:empty,
.gv-lede-lg:empty,
.gv-hero-lede:empty,
.gv-hero-trust:empty,
.gv-final-cta-lede:empty,
.gv-final-cta-guarantee:empty,
.gv-page-header p:empty,
.gv-trust-headline:empty { display: none; }

/* Eyebrow — has a ::before dash; if cleared, hide the whole element so the
   dash doesn't render orphaned */
.gv-eyebrow:empty,
.gv-hero-eyebrow:empty,
.gv-pillar-tag:empty,
.gv-offer-name:empty,
.gv-offer-scope:empty,
.gv-offer-badge:empty { display: none; }

/* Buttons / link-text-only links — empty button is just a colored pill with
   no purpose */
.gv-btn:empty,
.gv-card-link:empty,
.gv-pillar-link:empty,
.gv-cred-text strong:empty,
.gv-cred-text span:empty { display: none; }

/* Lists with no remaining items (all <li> were skipped) — hide ul */
.gv-pillar ul:empty,
.gv-offer-points:empty,
.gv-faq:empty,
.gv-cred-list:empty { display: none; }

/* Cards / list items where both title and body cleared — collapse */
.gv-card:has(h3:empty + p:empty),
.gv-pain-card:has(h3:empty + p:empty),
.gv-principle:has(h3:empty + p:empty),
.gv-step:has(h3:empty + p:empty) { display: none; }

/* When .gv-hero-ctas contains only empty buttons, the flex wrapper is
   pointless — modern :has() handles this; older browsers will gracefully
   show the empty wrapper (zero-height because children are display:none) */
.gv-hero-ctas:has(.gv-btn:empty:only-child) { display: none; }

/* The decorative "+" on FAQ summaries should not show on empty summaries */
.gv-faq-item:has(summary:empty) { display: none; }

/* ==========================================================================
   RESPONSIVE GAP-FILLERS — added 3.5.6
   ========================================================================== */

/* Page-header H1 was inheriting global h1 clamp (40px floor) — too big for
   "Growth Vector" / "Personal Services" on iPhone SE viewports. */
@media (max-width: 480px) {
  .gv-page-header { padding: 1.75rem 0 1.5rem; }
  .gv-page-header h1 { font-size: 1.625rem; line-height: 1.15; margin-bottom: .35rem; }
  .gv-page-header p { font-size: 0.95rem; line-height: 1.5; }
  .gv-page-header-inner { padding: 0 1rem; }
  .gv-breadcrumb { font-size: .6875rem; margin-bottom: .85rem; }
}

/* Generic service cards — tighter padding on small screens */
@media (max-width: 480px) {
  .gv-card { padding: 1.5rem 1.25rem; }
  .gv-card h3 { font-size: 1.1875rem; }
  .gv-section { padding: 2.5rem 0; }
  .gv-container { padding: 0 1rem; }
}

/* Hero CTAs — explicit gap reduction so two large pill buttons don't
   wrap awkwardly on narrow screens */
@media (max-width: 480px) {
  .gv-hero-ctas { gap: .75rem; }
  .gv-hero-ctas .gv-btn { padding: .85rem 1.15rem; font-size: .9375rem; }
}

/* Pain cards — tighter on small phones */
@media (max-width: 480px) {
  .gv-pain-card { padding: 1.5rem 1.25rem; }
  .gv-pain-card h3 { font-size: 1.1875rem; }
}

/* Form fields — make sure padding scales and inputs never overflow */
@media (max-width: 480px) {
  .gv-form-field input,
  .gv-form-field textarea,
  .gv-form-field select { font-size: 16px; /* iOS won't auto-zoom on focus */
                         padding: .75rem .9rem; }
}

/* Final CTA — buttons should wrap cleanly, padding reduce */
@media (max-width: 480px) {
  .gv-final-cta { padding: 3rem 0; }
  .gv-final-cta-inner { padding: 0 1rem; }
  .gv-final-cta h2 { font-size: 1.875rem; }
  .gv-final-cta-lede { font-size: 1rem; }
}

/* Hero credibility card on the homepage — shrink padding on small screens
   so it doesn't dominate the viewport when stacked under the headline */
@media (max-width: 480px) {
  .gv-cred-card { padding: 1.5rem 1.25rem; }
  .gv-cred-card h3 { font-size: 1.0625rem; }
  .gv-cred-item { gap: .85rem; }
  .gv-cred-mark { width: 36px; height: 36px; }
}

/* Trust bar headline — tighter spacing on small screens */
@media (max-width: 480px) {
  .gv-trust-bar { padding: 2rem 0; }
  .gv-trust-bar-inner { gap: 1.25rem; padding: 0 1rem; }
  .gv-trust-headline { font-size: 1.0625rem; }
  .gv-trust-chips { gap: .75rem 1.5rem; }
}

/* Subsection headers — slightly smaller on tiny phones */
@media (max-width: 480px) {
  .gv-subsection-head h2 { font-size: 1.875rem; }
  .gv-subsection-head .gv-lede { font-size: 1rem; }
}

/* Footer brand area — padding scale on tiny screens */
@media (max-width: 480px) {
  .gv-footer { padding: 2.5rem 0 2rem; }
  .gv-footer-inner { padding: 0 1rem; }
}

/* Operating principles — already collapses well, just shrink padding */
@media (max-width: 480px) {
  .gv-principle { padding: 1.5rem 1.25rem; }
  .gv-principle h3 { font-size: 1.0625rem; }
}

/* "How this works" steps — same treatment */
@media (max-width: 480px) {
  .gv-step { padding: 1.5rem 1.25rem; }
  .gv-step h3 { font-size: 1.0625rem; }
}

/* Offer cards — featured one shouldn't scale-up on mobile (looks broken) */
@media (max-width: 720px) {
  .gv-offer-featured { transform: none; }
  .gv-offer-featured:hover { transform: translateY(-4px); }
}
@media (max-width: 480px) {
  .gv-offer { padding: 1.75rem 1.25rem; }
  .gv-offer h3 { font-size: 1.25rem; }
}

/* ==========================================================================
   v3.5.7 — COMPREHENSIVE MOBILE POLISH
   Goal: Make the mobile experience match the desktop's premium feel.
   Headline change: footer is now a smart 2-column grid (brand | brand,
   IT | Growth, company spans full row with 2-col list) instead of a
   1-column stack that dominates the viewport. Plus tighter typography,
   subtle accent lines, premium social-icon styling, and dozens of
   micro-fixes for touch comfort and visual balance.
   ========================================================================== */

/* ---------- FOOTER REDESIGN: TABLET (561–960px) ---------- */
/* Smart 2-col layout that survives down to phones. Brand spans the row,
   IT + Growth sit side-by-side, Company spans the bottom row with a 2-col
   list for compact visual density. */
@media (max-width: 960px) and (min-width: 561px) {
  .gv-footer-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand brand"
      "it growth"
      "company company";
    gap: 2.5rem 2rem;
  }
  .gv-footer-brand               { grid-area: brand; }
  .gv-footer-col:nth-of-type(2)  { grid-area: it; }
  .gv-footer-col:nth-of-type(3)  { grid-area: growth; }
  .gv-footer-col:nth-of-type(4)  { grid-area: company; }

  .gv-footer-col:nth-of-type(4) ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem 2rem;
  }
}

/* ---------- FOOTER REDESIGN: PHONE (≤560px) ---------- */
/* Don't drop to a 1-column stack — that's what made the footer feel
   endless. Keep a tight 2-col layout, add a subtle separator under the
   brand block to create visual hierarchy, and shrink everything in
   proportion. */
@media (max-width: 560px) {
  .gv-footer { padding: 3rem 0 0; }
  .gv-footer-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand brand"
      "it growth"
      "company company";
    gap: 1.85rem 1.4rem;
    padding: 0 1.25rem;
  }
  .gv-footer-brand               { grid-area: brand; }
  .gv-footer-col:nth-of-type(2)  { grid-area: it; }
  .gv-footer-col:nth-of-type(3)  { grid-area: growth; }
  .gv-footer-col:nth-of-type(4)  { grid-area: company; }

  /* Subtle separator under the brand block — frames it like a card */
  .gv-footer-brand {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(247, 245, 239, 0.08);
    margin-bottom: .15rem;
  }

  /* Brand block: tighter, more compact */
  .gv-footer-brand .gv-logo {
    font-size: 1.1875rem;
    margin-bottom: .85rem;
  }
  .gv-footer-brand p {
    font-size: .875rem;
    line-height: 1.55;
    max-width: 100%;
    margin-bottom: 1rem;
  }
  .gv-footer-brand .gv-phone {
    font-size: .875rem;
    line-height: 1.4;
    margin-bottom: .35rem;
  }

  /* Section labels: smaller, with subtle teal accent line underneath */
  .gv-footer h4 {
    font-size: .6875rem;
    margin-bottom: 1rem;
    padding-bottom: .55rem;
    position: relative;
    letter-spacing: .15em;
  }
  .gv-footer h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 22px;
    height: 1px;
    background: var(--gv-teal);
    opacity: .85;
  }

  /* Tighter list items, comfortable line-height for touch */
  .gv-footer ul { gap: .55rem; }
  .gv-footer li a {
    font-size: .8125rem;
    line-height: 1.4;
    display: inline-block;
    padding: .15rem 0;
  }

  /* Company column: 2-col grid since it spans full width */
  .gv-footer-col:nth-of-type(4) ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem 1.25rem;
  }

  /* Compact bottom bar — stacks center-aligned, smaller text */
  .gv-footer-bottom {
    margin-top: 1.85rem;
    padding: 1rem 0 1.1rem;
  }
  .gv-footer-bottom-inner {
    flex-direction: column;
    gap: .35rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: .6875rem;
    line-height: 1.5;
    padding: 0 1.25rem;
  }
}

/* ---------- FOOTER: TINY PHONES (≤380px) ---------- */
/* Hard-cap the dial-back so footer stays usable on iPhone SE, etc. */
@media (max-width: 380px) {
  .gv-footer { padding: 2.5rem 0 0; }
  .gv-footer-inner {
    gap: 1.5rem 1rem;
    padding: 0 1rem;
  }
  .gv-footer-brand p { font-size: .8125rem; }
  .gv-footer h4 { font-size: .65rem; }
  .gv-footer li a { font-size: .78125rem; }
  .gv-footer-bottom-inner { font-size: .625rem; }
}

/* ---------- PREMIUM SOCIAL ICONS ON MOBILE ---------- */
/* Higher specificity to override social-icons.php inline CSS.
   Brand-tinted background, larger 44px touch targets, smooth lift. */
@media (max-width: 720px) {
  .gv-footer .gv-social-icons {
    margin-top: 1.1rem;
    gap: .55rem;
    flex-wrap: wrap;
  }
  .gv-footer .gv-social-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(0, 212, 184, 0.10);
    border: 1px solid rgba(0, 212, 184, 0.18);
    color: rgba(247, 245, 239, 0.92);
    transition:
      transform .25s cubic-bezier(.4, 0, .2, 1),
      background .22s ease,
      color .2s ease,
      border-color .2s ease,
      box-shadow .25s ease;
  }
  .gv-footer .gv-social-icon svg {
    width: 19px;
    height: 19px;
  }
  .gv-footer .gv-social-icon:hover,
  .gv-footer .gv-social-icon:focus-visible {
    transform: translateY(-2px) scale(1.04);
    color: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
  }
  .gv-footer .gv-social-facebook:hover,
  .gv-footer .gv-social-facebook:focus-visible {
    background: #1877f2;
    border-color: #1877f2;
  }
  .gv-footer .gv-social-instagram:hover,
  .gv-footer .gv-social-instagram:focus-visible {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: #dc2743;
  }
}

/* ---------- TOUCH-COMFORT MINIMUMS ---------- */
/* Ensure every primary interactive element clears Apple's 44pt guideline
   on phones. Buttons get a min-height; tap padding stays generous. */
@media (max-width: 480px) {
  .gv-btn       { min-height: 44px; }
  .gv-btn-lg    { min-height: 50px; }
  .gv-btn-sm    { min-height: 40px; }
  .gv-hero-ctas .gv-btn { width: 100%; max-width: 380px; }
  .gv-hero-ctas { align-items: stretch; }
}

/* ---------- HERO LEDE: READING COMFORT ---------- */
@media (max-width: 480px) {
  .gv-hero-lede {
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 1.5rem;
  }
  .gv-hero-trust { font-size: .75rem; line-height: 1.5; }
}

/* ---------- HERO CRED CARD: TIGHTER PADDING IN MIDDLE BREAKPOINT ---------- */
@media (max-width: 720px) and (min-width: 481px) {
  .gv-cred-card { padding: 1.75rem 1.5rem; }
}

/* ---------- PILLAR CARDS: BALANCED ON PHONE ---------- */
@media (max-width: 480px) {
  .gv-pillar { padding: 1.85rem 1.5rem; }
  .gv-pillar h3 { font-size: 1.375rem; }
  .gv-pillar p { font-size: .9rem; }
  .gv-pillar ul { margin-bottom: 1.5rem; }
}

/* ---------- TRUST BAR: FITS ON IPHONE SE ---------- */
@media (max-width: 380px) {
  .gv-trust-bar { padding: 1.75rem 0; }
  .gv-trust-headline { font-size: 1rem; line-height: 1.4; }
  .gv-trust-chips {
    gap: .55rem 1.1rem;
    font-size: .6875rem;
  }
}

/* ---------- PAGE HEADER: SMALLER BREAKPOINT ---------- */
@media (max-width: 380px) {
  .gv-page-header h1 { font-size: 1.5rem; }
  .gv-page-header p  { font-size: .9375rem; }
}

/* ---------- FAQ: TIGHTER ON PHONE ---------- */
@media (max-width: 480px) {
  .gv-faq { margin: 2rem auto 0; }
  .gv-faq-item { padding: 1.25rem 0; }
  .gv-faq-item summary { font-size: 1.0625rem; gap: .75rem; line-height: 1.35; }
  .gv-faq-item summary::after { font-size: 1.5rem; }
  .gv-faq-item p { font-size: .9375rem; }
}

/* ---------- FORM: TIGHTER LABELS ---------- */
@media (max-width: 480px) {
  .gv-form { gap: 1rem; }
  .gv-form-field label { font-size: .6875rem; }
}

/* ---------- MOBILE MENU DRAWER: BIGGER TAP TARGETS ---------- */
@media (max-width: 480px) {
  .gv-nav-wrap .gv-menu a {
    font-size: 1.0625rem;
    padding: 1rem 0;
  }
  .gv-nav-cta .gv-btn { padding: 1rem 1.25rem; }
}

/* ---------- "NO SURPRISES" PRICING BLOCK: TIGHTER ON SMALL PHONE ---------- */
@media (max-width: 380px) {
  .gv-no-surprises {
    padding: 1.5rem 1.1rem;
    margin: 1.5rem auto;
    border-radius: 12px;
  }
  .gv-no-surprises-headline { font-size: 1.25rem; }
  .gv-no-surprises-body { font-size: .9375rem; }
}

/* ---------- TYPOGRAPHY: HEADER HIERARCHY ON SMALLEST PHONE ---------- */
/* Stops H2 from feeling oversized on iPhone SE. */
@media (max-width: 380px) {
  h2 { font-size: 1.625rem; }
  h3 { font-size: 1.1875rem; }
  .gv-section { padding: 2.25rem 0; }
}

/* ---------- FINAL CTA: BUTTONS STACK CLEAN ---------- */
@media (max-width: 480px) {
  .gv-final-cta .gv-hero-ctas { flex-direction: column; align-items: stretch; }
  .gv-final-cta .gv-hero-ctas .gv-btn { width: 100%; }
}

/* ---------- ACCESSIBILITY: REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gv-pillar, .gv-pain-card, .gv-card, .gv-offer,
  .gv-principle, .gv-step, .gv-footer .gv-social-icon {
    transition: none !important;
  }
  .gv-hero-eyebrow::before { animation: none; }
}

/* ---------- SCROLLBAR-AWARE PADDING (desktop only) ---------- */
/* Prevents content shift when scrollbars appear/disappear on desktop.
   Scoped to ≥961px so phone overlay-scrollbar UAs don't get an empty gutter. */
@media (min-width: 961px) {
  @supports (scrollbar-gutter: stable) {
    html { scrollbar-gutter: stable; }
  }
}

/* ============================================================================
 * PROCESSOR CHIP — SUCCESS ANIMATION (v3.7.3)
 *
 * When the contact form successfully submits, a full-card chip animation
 * plays: chip body fades in, traces light up sequentially, status lines
 * tick through, then a green checkmark draws + glows. References
 * GraniteVector's "infrastructure" brand language without being literal.
 * ============================================================================ */
.gv-chip-success {
	display: none;
	position: relative;
	background: var(--gv-graphite);
	color: var(--gv-paper);
	border-radius: var(--gv-r-lg, 18px);
	padding: 2.5rem 1.75rem;
	min-height: 480px;
	overflow: hidden;
	text-align: center;
}
.gv-chip-success.is-active {
	display: block;
	animation: gvChipFadeIn .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.gv-chip-success::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(ellipse 70% 50% at 50% 30%, rgba(0, 212, 184, 0.15) 0%, transparent 60%),
		linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
	background-size: auto, 32px 32px, 32px 32px;
	pointer-events: none;
	z-index: 0;
}
.gv-chip-success-inner {
	position: relative;
	z-index: 1;
	max-width: 360px;
	margin: 0 auto;
}
.gv-chip-stage {
	width: 220px;
	height: 220px;
	margin: 0 auto 1.5rem;
}
.gv-chip-svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Chip body */
.gv-chip-body {
	fill: rgba(255, 255, 255, .04);
	stroke: rgba(110, 235, 216, .35);
	stroke-width: 1.5;
	opacity: 0;
	animation: gvChipBodyIn .5s .15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes gvChipBodyIn {
	from { opacity: 0; transform: scale(.85); transform-origin: center; }
	to   { opacity: 1; transform: scale(1); }
}
.gv-chip-success.is-active .gv-chip-body {
	transform-box: fill-box;
	transform-origin: center;
}

/* Pins */
.gv-chip-pins rect {
	fill: rgba(110, 235, 216, .55);
	opacity: 0;
	animation: gvPinIn .5s .35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes gvPinIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Internal die */
.gv-chip-die {
	fill: rgba(0, 212, 184, .08);
	stroke: rgba(0, 212, 184, .55);
	stroke-width: 1;
	opacity: 0;
	animation: gvChipBodyIn .4s .35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Pin orientation dot */
.gv-chip-dot {
	fill: var(--gv-teal, #00D4B8);
	opacity: 0;
	animation: gvDotPulse 1.4s .55s ease-out forwards;
	filter: drop-shadow(0 0 4px var(--gv-teal, #00D4B8));
}
@keyframes gvDotPulse {
	0%   { opacity: 0; transform: scale(.5); transform-origin: 65px 65px; }
	30%  { opacity: 1; transform: scale(1.5); }
	100% { opacity: 1; transform: scale(1); }
}

/* Internal traces — draw with stroke-dasharray */
.gv-chip-traces .gv-trace {
	stroke: var(--gv-teal-glow, #6EEBD8);
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	opacity: 0;
	filter: drop-shadow(0 0 2px var(--gv-teal, #00D4B8));
}
.gv-chip-success.is-active .gv-trace-1 { animation: gvTrace .55s .55s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.gv-chip-success.is-active .gv-trace-2 { animation: gvTrace .55s .75s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.gv-chip-success.is-active .gv-trace-3 { animation: gvTrace .55s .95s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.gv-chip-success.is-active .gv-trace-4 { animation: gvTrace .55s 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes gvTrace {
	from { stroke-dashoffset: 100; opacity: 1; }
	to   { stroke-dashoffset: 0; opacity: 1; }
}

/* Final checkmark (top of die after traces complete) */
.gv-chip-check {
	stroke: var(--gv-teal, #00D4B8);
	stroke-dasharray: 120;
	stroke-dashoffset: 120;
	opacity: 0;
	filter: drop-shadow(0 0 8px rgba(0, 212, 184, .8));
}
.gv-chip-success.is-active .gv-chip-check {
	animation: gvCheckDraw .6s 1.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes gvCheckDraw {
	0%   { stroke-dashoffset: 120; opacity: 0; }
	1%   { opacity: 1; }
	100% { stroke-dashoffset: 0; opacity: 1; }
}

/* Status lines — fade in/out sequentially */
.gv-chip-status {
	height: 1.5rem;
	margin-bottom: 1rem;
	font-family: var(--gv-font-mono, 'JetBrains Mono', monospace);
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gv-teal-glow, #6EEBD8);
	position: relative;
}
.gv-chip-status-line {
	position: absolute;
	left: 0;
	right: 0;
	opacity: 0;
}
.gv-chip-status-line::before {
	content: "› ";
	color: var(--gv-teal, #00D4B8);
}
.gv-chip-success.is-active .gv-chip-status-1 { animation: gvStatusFlash 0.55s 0.55s ease forwards; }
.gv-chip-success.is-active .gv-chip-status-2 { animation: gvStatusFlash 0.55s 0.95s ease forwards; }
.gv-chip-success.is-active .gv-chip-status-3 { animation: gvStatusFlash 0.55s 1.35s ease forwards; }
.gv-chip-success.is-active .gv-chip-status-done {
	animation: gvStatusFinal 0.5s 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	color: var(--gv-teal, #00D4B8);
	font-weight: 500;
}
@keyframes gvStatusFlash {
	0%   { opacity: 0; transform: translateY(4px); }
	30%  { opacity: 1; transform: translateY(0); }
	70%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes gvStatusFinal {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Headline + body copy after animation */
.gv-chip-headline {
	font-family: var(--gv-font-display, 'Fraunces', serif);
	font-weight: 600;
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	line-height: 1.1;
	color: var(--gv-cream, #FAFAF5) !important;
	margin: 0 0 0.5rem;
	opacity: 0;
}
.gv-chip-success.is-active .gv-chip-headline {
	animation: gvFadeUp 0.5s 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.gv-chip-body {
	font-size: 1rem;
	line-height: 1.5;
	color: rgba(247, 245, 239, .82) !important;
	margin: 0 0 1.5rem;
	opacity: 0;
}
.gv-chip-success.is-active .gv-chip-body {
	animation: gvFadeUp 0.5s 2.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.gv-chip-close {
	opacity: 0;
}
.gv-chip-success.is-active .gv-chip-close {
	animation: gvFadeUp 0.5s 2.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Override default button styles to make Done feel prominent on dark surface */
.gv-chip-success .gv-chip-close {
	padding: 1rem 2.5rem;
	font-size: 1rem;
	font-weight: 600;
	min-width: 200px;
	box-shadow: 0 4px 0 var(--gv-teal-deep, #00A896), 0 12px 32px rgba(0, 168, 150, 0.34);
}
.gv-chip-success .gv-chip-close:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 0 var(--gv-teal-deep, #00A896), 0 16px 36px rgba(0, 168, 150, 0.44);
}
.gv-chip-success .gv-chip-close:active {
	transform: translateY(2px);
	box-shadow: 0 2px 0 var(--gv-teal-deep, #00A896), 0 6px 16px rgba(0, 168, 150, 0.34);
}
@keyframes gvFadeUp {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes gvChipFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Reduced motion: collapse the animation timing so users with prefers-reduced-motion
   still see the success state but without the elaborate sequence. */
@media (prefers-reduced-motion: reduce) {
	.gv-chip-success.is-active .gv-chip-body,
	.gv-chip-success.is-active .gv-chip-pins rect,
	.gv-chip-success.is-active .gv-chip-die,
	.gv-chip-success.is-active .gv-chip-dot,
	.gv-chip-success.is-active .gv-trace-1,
	.gv-chip-success.is-active .gv-trace-2,
	.gv-chip-success.is-active .gv-trace-3,
	.gv-chip-success.is-active .gv-trace-4,
	.gv-chip-success.is-active .gv-chip-check,
	.gv-chip-success.is-active .gv-chip-headline,
	.gv-chip-success.is-active .gv-chip-body,
	.gv-chip-success.is-active .gv-chip-close {
		animation-duration: 0.01s !important;
		animation-delay: 0s !important;
	}
	.gv-chip-success.is-active .gv-chip-status-line { animation: none !important; opacity: 0 !important; }
	.gv-chip-success.is-active .gv-chip-status-done { opacity: 1 !important; }
}

/* ============================================================================
 * CONTACT PAGE — DARK THEME (v3.7.4)
 *
 * Single continuous dark surface for the whole page (matches the chip-success
 * confirmation aesthetic). Form, direct-contact card, and intro all sit on
 * the same graphite background with the same teal accents.
 * ============================================================================ */

.gv-contact-page {
	position: relative;
	background: var(--gv-graphite);
	color: var(--gv-paper);
	padding: clamp(1.5rem, 2.5vw, 2.25rem) 0 clamp(3rem, 5vw, 4.5rem);
	overflow: hidden;
	min-height: calc(100vh - 240px); /* fill viewport so footer doesn't crowd */
}
.gv-contact-page-bg {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(ellipse 70% 50% at 25% 15%, rgba(0, 212, 184, 0.12) 0%, transparent 60%),
		radial-gradient(ellipse 60% 50% at 90% 80%, rgba(0, 168, 150, 0.10) 0%, transparent 60%),
		linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
	background-size: auto, auto, 48px 48px, 48px 48px;
	pointer-events: none;
}
.gv-contact-page-inner {
	position: relative;
	z-index: 1;
	max-width: var(--gv-container);
	margin: 0 auto;
	padding: 0 clamp(1rem, 3vw, 1.5rem);
}

/* Intro block — much tighter than the old gv-page-header */
.gv-contact-intro {
	max-width: 760px;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.gv-contact-intro .gv-breadcrumb { color: var(--gv-teal-glow); margin-bottom: .35rem; }
.gv-contact-intro .gv-breadcrumb a { color: var(--gv-teal-glow); opacity: .85; }
.gv-contact-h1 {
	font-family: var(--gv-font-display);
	color: var(--gv-cream);
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	margin: 0 0 .5rem;
}
.gv-contact-lede {
	color: rgba(247, 245, 239, .78);
	font-size: clamp(1rem, 1.4vw, 1.0625rem);
	line-height: 1.55;
	max-width: 62ch;
	margin: 0;
}

/* Two-column grid: form left, direct-contact card right */
.gv-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}
@media (max-width: 960px) {
	.gv-contact-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Form column — dark theme overrides */
.gv-contact-form-col .gv-form {
	max-width: none;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(110, 235, 216, 0.12);
	border-radius: var(--gv-r-lg, 18px);
	padding: clamp(1.5rem, 2.5vw, 2rem);
	gap: 1.1rem;
	position: relative;
}
.gv-contact-form-col .gv-form::before {
	content: "";
	position: absolute;
	top: -1px; left: 1.5rem; right: 1.5rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gv-teal-glow) 20%, var(--gv-teal-glow) 80%, transparent);
	opacity: .6;
}
.gv-contact-form-col .gv-form-field label {
	color: var(--gv-teal-glow);
	font-size: .6875rem;
	letter-spacing: .14em;
}
.gv-contact-form-col .gv-form-field input,
.gv-contact-form-col .gv-form-field textarea,
.gv-contact-form-col .gv-form-field select {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(247, 245, 239, 0.14);
	color: var(--gv-cream);
	font-family: var(--gv-font-body);
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.gv-contact-form-col .gv-form-field input::placeholder,
.gv-contact-form-col .gv-form-field textarea::placeholder {
	color: rgba(247, 245, 239, 0.38);
}
.gv-contact-form-col .gv-form-field input:focus,
.gv-contact-form-col .gv-form-field textarea:focus,
.gv-contact-form-col .gv-form-field select:focus {
	border-color: var(--gv-teal);
	background: rgba(0, 212, 184, 0.06);
	box-shadow: 0 0 0 3px rgba(0, 212, 184, 0.18);
	outline: none;
}
.gv-contact-form-col .gv-form-field select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236EEBD8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 2.5rem;
}
/* Force option text dark for native dropdown rendering on light OSes */
.gv-contact-form-col .gv-form-field select option {
	background: var(--gv-graphite);
	color: var(--gv-cream);
}
.gv-contact-form-col .gv-form-msg.is-error {
	background: rgba(220, 38, 38, 0.12);
	color: #FCA5A5;
	border: 1px solid rgba(220, 38, 38, 0.4);
}
.gv-contact-form-col .gv-form > p {
	color: rgba(247, 245, 239, 0.55) !important;
	font-size: .8125rem !important;
	margin-top: .25rem !important;
}

/* Direct-contact card on the right */
.gv-contact-direct {
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(110, 235, 216, 0.12);
	border-radius: var(--gv-r-lg, 18px);
	padding: clamp(1.5rem, 2.5vw, 1.875rem);
	position: relative;
}
.gv-contact-direct::before {
	content: "";
	position: absolute;
	top: -1px; left: 1.5rem; right: 1.5rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gv-teal-glow) 20%, var(--gv-teal-glow) 80%, transparent);
	opacity: .6;
}
.gv-contact-direct-title {
	font-family: var(--gv-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gv-teal-glow);
	margin: 0 0 1.25rem;
}
.gv-contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}
.gv-contact-list-item {
	display: flex;
	gap: .85rem;
	align-items: flex-start;
}
.gv-contact-list-mark {
	flex-shrink: 0;
	width: 40px; height: 40px;
	border-radius: 10px;
	background: rgba(0, 212, 184, 0.08);
	border: 1px solid rgba(0, 212, 184, 0.25);
	color: var(--gv-teal);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.gv-contact-list-text {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}
.gv-contact-list-text strong {
	color: var(--gv-cream);
	font-weight: 600;
	font-size: .9375rem;
}
.gv-contact-list-text a,
.gv-contact-list-value {
	color: var(--gv-teal-glow);
	font-family: var(--gv-font-mono);
	font-size: .9375rem;
	text-decoration: none;
	word-break: break-word;
	line-height: 1.4;
}
.gv-contact-list-text a:hover { color: var(--gv-teal); text-decoration: underline; }

/* Chip success — make sure it sits seamlessly on the dark contact page */
.gv-contact-form-col .gv-chip-success {
	margin-top: 0;
}

/* ============================================================================
 * CONDITIONAL APP-SUPPORT FIELDS (v3.8.0)
 *
 * Revealed only when topic = "LiveBand Sunday Stream support". Sits inside
 * the dark contact form, visually distinct from the always-visible fields:
 * has its own "Diagnostic info" eyebrow legend and a teal-bordered inset
 * style so it reads as a focused subsection.
 * ============================================================================ */

.gv-form-app-fields {
	display: none;
	border: none;
	padding: 0;
	margin: 0;
	min-width: 0; /* needed because fieldset has implicit min-width: min-content */
}
.gv-form-app-fields.is-visible {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	animation: gvAppFieldsReveal 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	padding: 1.25rem;
	border-radius: 12px;
	background: rgba(0, 212, 184, 0.04);
	border: 1px solid rgba(0, 212, 184, 0.18);
	position: relative;
}
@keyframes gvAppFieldsReveal {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Legend treated like an eyebrow + helper line */
.gv-form-app-legend {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: 0;
	margin: 0 0 .25rem;
	float: none;
	width: 100%;
}
.gv-form-app-legend-eyebrow {
	font-family: var(--gv-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gv-teal);
}
.gv-form-app-legend-hint {
	font-size: .8125rem;
	color: rgba(247, 245, 239, 0.62);
	line-height: 1.4;
}

/* 2-column grid for paired fields on desktop, collapses on mobile */
.gv-form-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
@media (max-width: 640px) {
	.gv-form-grid-2 { grid-template-columns: 1fr; }
}

/* ============================================================================
 * LIVEBAND SUNDAY STREAM — SUPPORT PAGE (v3.8.0)
 *
 * Themed distinctly from the rest of the GraniteVector site to match the
 * app's dark neon aesthetic. Magenta accents alongside the GraniteVector
 * teal signal "this is a different product" without breaking brand cohesion.
 * ============================================================================ */

.lb-support {
	--lb-bg:        #07070C;
	--lb-bg-2:      #0E0E16;
	--lb-cyan:      #6EEBD8;
	--lb-cyan-deep: #00D4B8;
	--lb-magenta:   #FF3DBE;
	--lb-amber:     #FFB454;
	--lb-text:      #ECECF2;
	--lb-text-dim:  rgba(236, 236, 242, 0.65);
	--lb-text-mute: rgba(236, 236, 242, 0.4);
	--lb-line:      rgba(110, 235, 216, 0.14);

	position: relative;
	background: var(--lb-bg);
	color: var(--lb-text);
	padding: clamp(2rem, 4vw, 4rem) 0 clamp(4rem, 7vw, 6rem);
	overflow: hidden;
	font-family: var(--gv-font-body, 'IBM Plex Sans', sans-serif);
}
.lb-support-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(ellipse 80% 50% at 15% 10%, rgba(110, 235, 216, 0.10) 0%, transparent 60%),
		radial-gradient(ellipse 70% 50% at 90% 30%, rgba(255, 61, 190, 0.08) 0%, transparent 60%),
		linear-gradient(rgba(110, 235, 216, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(110, 235, 216, 0.04) 1px, transparent 1px);
	background-size: auto, auto, 56px 56px, 56px 56px;
}
.lb-support-inner {
	position: relative;
	z-index: 1;
	max-width: var(--gv-container, 1200px);
	margin: 0 auto;
	padding: 0 clamp(1rem, 3vw, 1.5rem);
}

/* ----- Shared utilities ----- */
.lb-eyebrow {
	font-family: var(--gv-font-mono, 'JetBrains Mono', monospace);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--lb-cyan);
	display: inline-block;
}
.lb-h1 {
	font-family: var(--gv-font-display, 'Fraunces', serif);
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	font-weight: 500;
	color: var(--lb-text);
	margin: .75rem 0 1rem;
}
.lb-h1-mark {
	display: inline-block;
	background: linear-gradient(135deg, var(--lb-cyan) 0%, var(--lb-magenta) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-style: italic;
}
.lb-h1-sub {
	font-family: var(--gv-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.45em;
	font-weight: 400;
	color: var(--lb-text-mute);
	letter-spacing: .12em;
	text-transform: lowercase;
	vertical-align: middle;
	padding-left: .25em;
}
.lb-h2 {
	font-family: var(--gv-font-display, 'Fraunces', serif);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	font-weight: 500;
	color: var(--lb-text);
	margin: .5rem 0 .75rem;
}
.lb-lede {
	font-size: clamp(1rem, 1.4vw, 1.0625rem);
	line-height: 1.55;
	color: var(--lb-text-dim);
	max-width: 56ch;
	margin: 0 0 2rem;
}
.lb-section-head { max-width: 64ch; margin: 0 0 2rem; }
.lb-section-sub {
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--lb-text-dim);
	margin: 0;
	max-width: 56ch;
}

/* ----- Buttons ----- */
.lb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .85rem 1.4rem;
	border-radius: 10px;
	font-family: var(--gv-font-body, 'IBM Plex Sans', sans-serif);
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.lb-btn-primary {
	background: linear-gradient(135deg, var(--lb-cyan-deep), var(--lb-cyan));
	color: #0A0A0F;
	box-shadow: 0 4px 0 rgba(0, 168, 150, 0.85), 0 12px 32px rgba(110, 235, 216, 0.25);
}
.lb-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 0 rgba(0, 168, 150, 0.85), 0 16px 36px rgba(110, 235, 216, 0.35);
	color: #0A0A0F;
}
.lb-btn-primary:active {
	transform: translateY(1px);
	box-shadow: 0 2px 0 rgba(0, 168, 150, 0.85), 0 6px 16px rgba(110, 235, 216, 0.2);
}
.lb-btn-ghost {
	background: rgba(110, 235, 216, 0.06);
	color: var(--lb-text);
	border-color: rgba(110, 235, 216, 0.22);
}
.lb-btn-ghost:hover {
	background: rgba(110, 235, 216, 0.12);
	border-color: rgba(110, 235, 216, 0.4);
	color: var(--lb-cyan);
}
.lb-btn-lg { padding: 1.05rem 1.75rem; font-size: 1rem; min-width: 240px; }

/* ----- Breadcrumb ----- */
.lb-support-breadcrumb {
	font-family: var(--gv-font-mono, 'JetBrains Mono', monospace);
	font-size: .75rem;
	letter-spacing: .08em;
	color: var(--lb-text-mute);
	margin-bottom: 1.5rem;
	display: flex;
	gap: .5rem;
	align-items: center;
	flex-wrap: wrap;
}
.lb-support-breadcrumb a {
	color: var(--lb-text-dim);
	text-decoration: none;
}
.lb-support-breadcrumb a:hover { color: var(--lb-cyan); }
.lb-support-breadcrumb .lb-sep { color: var(--lb-text-mute); }

/* ----- Hero ----- */
.lb-support-hero { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.lb-support-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
}
@media (max-width: 900px) {
	.lb-support-hero-grid { grid-template-columns: 1fr; }
}
.lb-cta-row {
	display: flex;
	gap: .85rem;
	flex-wrap: wrap;
}

/* ----- App card (hero artifact) ----- */
.lb-support-hero-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
}
.lb-app-card {
	position: relative;
	background: linear-gradient(135deg, rgba(110, 235, 216, 0.08) 0%, rgba(255, 61, 190, 0.04) 100%);
	border: 1px solid var(--lb-line);
	border-radius: 18px;
	padding: 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	overflow: hidden;
}
.lb-app-card-glow {
	position: absolute;
	top: -40%;
	right: -20%;
	width: 60%;
	height: 180%;
	background: radial-gradient(circle, rgba(255, 61, 190, 0.25) 0%, transparent 60%);
	pointer-events: none;
	filter: blur(20px);
}
.lb-app-card-icon {
	position: relative;
	flex-shrink: 0;
}
.lb-app-card-text {
	position: relative;
	flex: 1;
	min-width: 0;
}
.lb-app-card-name {
	font-family: var(--gv-font-display, 'Fraunces', serif);
	font-weight: 500;
	font-size: 1.0625rem;
	color: var(--lb-text);
	margin-bottom: .15rem;
	line-height: 1.2;
}
.lb-app-card-meta {
	font-family: var(--gv-font-mono, 'JetBrains Mono', monospace);
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lb-text-mute);
}
.lb-app-card-pill {
	position: relative;
	font-family: var(--gv-font-mono, 'JetBrains Mono', monospace);
	font-size: .6875rem;
	letter-spacing: .12em;
	color: var(--lb-cyan);
	border: 1px solid var(--lb-cyan);
	padding: .25rem .55rem;
	border-radius: 6px;
	flex-shrink: 0;
}
.lb-app-card-status {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem;
	background: rgba(16, 185, 129, 0.08);
	border: 1px solid rgba(16, 185, 129, 0.25);
	border-radius: 10px;
	font-family: var(--gv-font-mono, 'JetBrains Mono', monospace);
	font-size: .75rem;
	letter-spacing: .08em;
	color: rgba(16, 185, 129, 0.95);
	align-self: flex-start;
}
.lb-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #10B981;
	box-shadow: 0 0 8px #10B981;
	animation: lbStatusPulse 2s ease-in-out infinite;
}
@keyframes lbStatusPulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.5; }
}

/* ----- FAQ ----- */
.lb-faq { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.lb-faq-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.lb-faq-item details {
	border: 1px solid var(--lb-line);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.02);
	overflow: hidden;
	transition: border-color .2s ease;
}
.lb-faq-item details[open] {
	border-color: rgba(110, 235, 216, 0.35);
	background: rgba(110, 235, 216, 0.025);
}
.lb-faq-item summary {
	cursor: pointer;
	padding: 1.1rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	list-style: none;
	font-size: 1rem;
	font-weight: 500;
	color: var(--lb-text);
}
.lb-faq-item summary::-webkit-details-marker { display: none; }
.lb-faq-num {
	font-family: var(--gv-font-mono, 'JetBrains Mono', monospace);
	font-size: .8125rem;
	font-weight: 500;
	color: var(--lb-cyan);
	flex-shrink: 0;
	min-width: 1.5rem;
}
.lb-faq-q { flex: 1; line-height: 1.35; }
.lb-faq-chev {
	flex-shrink: 0;
	font-family: var(--gv-font-mono, 'JetBrains Mono', monospace);
	font-size: 1.25rem;
	color: var(--lb-cyan);
	transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
	line-height: 1;
}
.lb-faq-item details[open] .lb-faq-chev {
	transform: rotate(45deg);
}
.lb-faq-a {
	padding: 0 1.25rem 1.25rem;
	color: var(--lb-text-dim);
	font-size: .9375rem;
	line-height: 1.6;
}
.lb-faq-a p { margin: 0 0 .75rem; }
.lb-faq-a p:last-child { margin-bottom: 0; }
.lb-faq-a ul {
	margin: 0 0 .75rem;
	padding-left: 1.25rem;
}
.lb-faq-a ul li {
	margin-bottom: .35rem;
}
.lb-faq-a code {
	font-family: var(--gv-font-mono, 'JetBrains Mono', monospace);
	font-size: .85em;
	color: var(--lb-magenta);
	background: rgba(255, 61, 190, 0.06);
	padding: .1em .35em;
	border-radius: 4px;
}

/* ----- Final CTA ----- */
.lb-final-cta {
	background: linear-gradient(135deg, rgba(110, 235, 216, 0.06) 0%, rgba(255, 61, 190, 0.04) 100%);
	border: 1px solid var(--lb-line);
	border-radius: 18px;
	padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.lb-final-cta::before {
	content: "";
	position: absolute;
	top: -50%;
	left: 30%;
	width: 40%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 61, 190, 0.15) 0%, transparent 60%);
	pointer-events: none;
	filter: blur(40px);
}
.lb-final-cta-inner {
	position: relative;
	z-index: 1;
	max-width: 540px;
	margin: 0 auto;
}
.lb-final-cta .lb-eyebrow { margin-bottom: .5rem; }
.lb-final-cta .lb-section-sub { margin: 0 auto 1.75rem; }

/* ============================================================================
 * LIVEBAND PRIVACY POLICY PAGE (v3.8.2)
 *
 * Extends the .lb-support template aesthetic for the privacy policy page.
 * Heavy reading content + tables, so prose readability matters more than
 * marketing impact here.
 * ============================================================================ */

.lb-privacy .lb-privacy-hero { padding-bottom: 0; }
.lb-privacy-hero-text { max-width: 720px; }

/* Effective / Last Updated / App Version meta strip under the headline */
.lb-privacy-meta {
	display: flex;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	flex-wrap: wrap;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--lb-line);
}
.lb-privacy-meta-item {
	display: flex;
	flex-direction: column;
	gap: .15rem;
}
.lb-privacy-meta-label {
	font-family: var(--gv-font-mono, 'JetBrains Mono', monospace);
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lb-text-mute);
}
.lb-privacy-meta-value {
	font-family: var(--gv-font-mono, 'JetBrains Mono', monospace);
	font-size: .875rem;
	color: var(--lb-cyan);
	font-weight: 500;
}

/* Article body — readable prose on dark with subtle gridlines & tables */
.lb-privacy-body {
	max-width: 820px;
	margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 5vw, 4rem);
	color: var(--lb-text);
	font-size: 1rem;
	line-height: 1.65;
}
.lb-privacy-body > * + * { margin-top: 1.25rem; }

.lb-privacy-body h2 {
	font-family: var(--gv-font-display, 'Fraunces', serif);
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-weight: 500;
	letter-spacing: -.015em;
	color: var(--lb-text);
	margin-top: 2.75rem !important;
	margin-bottom: .75rem;
	padding-bottom: .65rem;
	border-bottom: 1px solid var(--lb-line);
	scroll-margin-top: 6rem; /* sticky header offset for anchor jumps */
}
.lb-privacy-body h2:first-child { margin-top: 0 !important; }
.lb-privacy-body h3 {
	font-family: var(--gv-font-display, 'Fraunces', serif);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--lb-text);
	margin-top: 2rem !important;
	margin-bottom: .5rem;
}
.lb-privacy-body p {
	color: rgba(236, 236, 242, 0.85);
}
.lb-privacy-body strong, .lb-privacy-body b {
	color: var(--lb-text);
	font-weight: 600;
}
.lb-privacy-body a {
	color: var(--lb-cyan);
	text-decoration: underline;
	text-decoration-color: rgba(110, 235, 216, 0.35);
	text-underline-offset: 3px;
	transition: text-decoration-color .15s ease, color .15s ease;
}
.lb-privacy-body a:hover {
	color: var(--lb-cyan);
	text-decoration-color: var(--lb-cyan);
}
.lb-privacy-body ul, .lb-privacy-body ol {
	padding-left: 1.5rem;
	color: rgba(236, 236, 242, 0.85);
}
.lb-privacy-body ul li, .lb-privacy-body ol li {
	margin-bottom: .35rem;
}
.lb-privacy-body ul li::marker { color: var(--lb-cyan); }
.lb-privacy-body code {
	font-family: var(--gv-font-mono, 'JetBrains Mono', monospace);
	font-size: .875em;
	background: rgba(110, 235, 216, 0.08);
	color: var(--lb-cyan);
	padding: .1em .4em;
	border-radius: 4px;
	border: 1px solid rgba(110, 235, 216, 0.15);
}
.lb-privacy-body blockquote {
	border-left: 2px solid var(--lb-cyan);
	padding: .5rem 0 .5rem 1.25rem;
	margin-left: 0;
	color: var(--lb-text-dim);
	font-style: italic;
}
.lb-privacy-body hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--lb-line), transparent);
	margin: 2.5rem 0;
}

/* Tables — dense, scannable, lots of these in the matrix */
.lb-privacy-body .wp-block-table,
.lb-privacy-body table {
	width: 100%;
	margin: 1.5rem 0 !important;
	overflow-x: auto;
	display: block;
}
.lb-privacy-body table {
	border-collapse: collapse;
	min-width: 100%;
	font-size: .9375rem;
	border: 1px solid var(--lb-line);
	border-radius: 8px;
	overflow: hidden;
}
.lb-privacy-body table thead {
	background: rgba(110, 235, 216, 0.06);
}
.lb-privacy-body table th {
	font-family: var(--gv-font-mono, 'JetBrains Mono', monospace);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: left;
	color: var(--lb-cyan);
	padding: .75rem 1rem;
	border-bottom: 1px solid var(--lb-line);
}
.lb-privacy-body table td {
	padding: .75rem 1rem;
	border-bottom: 1px solid rgba(110, 235, 216, 0.06);
	vertical-align: top;
	color: rgba(236, 236, 242, 0.85);
}
.lb-privacy-body table tbody tr:last-child td { border-bottom: 0; }
.lb-privacy-body table tbody tr:hover { background: rgba(110, 235, 216, 0.02); }

/* Highlight "No" / "None" / "Yes (optional)" status cells */
.lb-privacy-body table td strong {
	font-family: var(--gv-font-mono, 'JetBrains Mono', monospace);
	font-size: .8125rem;
	letter-spacing: .04em;
}

.lb-privacy-cta { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* Mobile tweaks */
@media (max-width: 640px) {
	.lb-privacy-body { font-size: .9375rem; }
	.lb-privacy-body table { font-size: .8125rem; }
	.lb-privacy-body table th,
	.lb-privacy-body table td { padding: .55rem .75rem; }
}

/* ============================================================================
 * LIVEBAND SUPPORT — RESOURCES GRID (v3.8.3)
 *
 * 3-card grid (Privacy Policy / App Store / Contact) between FAQ and final CTA.
 * Each card is a tappable surface with icon, title, meta line, and chevron.
 * ============================================================================ */

.lb-resources {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.lb-resources-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1rem;
}
.lb-resource-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.15rem 1.25rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--lb-line);
	border-radius: 12px;
	text-decoration: none;
	color: var(--lb-text);
	transition: border-color .2s ease, background .2s ease, transform .2s ease;
	min-height: 78px;
}
.lb-resource-card:hover,
.lb-resource-card:focus-visible {
	border-color: rgba(110, 235, 216, 0.4);
	background: rgba(110, 235, 216, 0.04);
	transform: translateY(-2px);
}
.lb-resource-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: rgba(0, 212, 184, 0.08);
	border: 1px solid rgba(0, 212, 184, 0.22);
	color: var(--lb-cyan);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.lb-resource-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}
.lb-resource-title {
	font-weight: 600;
	font-size: 1rem;
	color: var(--lb-text);
	line-height: 1.25;
}
.lb-resource-meta {
	font-family: var(--gv-font-mono, 'JetBrains Mono', monospace);
	font-size: .6875rem;
	letter-spacing: .08em;
	color: var(--lb-text-mute);
	text-transform: uppercase;
}
.lb-resource-chev {
	flex-shrink: 0;
	font-family: var(--gv-font-mono, 'JetBrains Mono', monospace);
	font-size: 1rem;
	color: var(--lb-cyan);
	opacity: 0.55;
	transition: opacity .15s ease, transform .2s ease;
}
.lb-resource-card:hover .lb-resource-chev {
	opacity: 1;
	transform: translateX(2px);
}

/* ============================================================================
 * HOMEPAGE v3.9.0 — OPERATOR-BUILT POSITIONING
 *
 * Nine-section homepage rewrite per May 2026 positioning brief.
 * Sections (with shared CSS prefixes):
 *   1. Hero            → .gv-hero-v4 (replaces .gv-hero usage on homepage)
 *   2. Blueprint Block → .gv-blueprint-feature, .gv-bp-*
 *   3. Triad           → .gv-triad, .gv-triad-*
 *   4. Manifesto       → .gv-manifesto, .gv-manifesto-*
 *   5. Reference Stack → .gv-tier-grid, .gv-tier-card, .gv-tier-*
 *   6. Foundation      → .gv-foundation, .gv-foundation-*
 *   7. Operating Princ → (reuses existing .gv-principles styles)
 *   8. FAQ             → (reuses existing .gv-faq styles)
 *   9. Final CTA       → (reuses existing .gv-final-cta styles)
 * ============================================================================ */

/* ---------------------------------------------------------------------------
   SECTION 1 — HERO (v4 — operator-built positioning)
   --------------------------------------------------------------------------- */
.gv-hero-v4 {
	position: relative;
	background: var(--gv-graphite);
	color: var(--gv-paper);
	padding: clamp(4rem, 8vw, 7rem) 0 clamp(4rem, 8vw, 7rem);
	overflow: hidden;
}
.gv-hero-v4::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(ellipse 80% 50% at 15% 10%, rgba(0, 212, 184, 0.10) 0%, transparent 60%),
		radial-gradient(ellipse 70% 50% at 90% 30%, rgba(110, 235, 216, 0.06) 0%, transparent 60%),
		linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
	background-size: auto, auto, 56px 56px, 56px 56px;
	pointer-events: none;
}
.gv-hero-v4-inner {
	position: relative;
	z-index: 1;
	max-width: 880px;
	text-align: left;
}
.gv-hero-v4-h1 {
	font-family: var(--gv-font-display);
	font-size: clamp(2.5rem, 6vw, 4.25rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -.025em;
	color: var(--gv-paper);
	margin: 1rem 0 1.5rem;
}
.gv-hero-v4-sub {
	font-family: var(--gv-font-body);
	font-size: clamp(1.0625rem, 1.75vw, 1.25rem);
	line-height: 1.45;
	color: rgba(247, 245, 239, 0.85);
	margin: 0 0 1.25rem;
	max-width: 64ch;
	font-style: italic;
}
.gv-hero-v4-body {
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(247, 245, 239, 0.72);
	margin: 0 0 2rem;
	max-width: 64ch;
}
.gv-hero-v4-ctas {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}
.gv-hero-v4-trust {
	font-size: .875rem;
	color: rgba(247, 245, 239, 0.55);
	font-style: italic;
	margin: 0;
	max-width: 64ch;
}

/* ---------------------------------------------------------------------------
   SECTION 2 — BLUEPRINT FEATURE BLOCK
   The PDF cover sits on warm paper at a confident -1.5° tilt with a real
   drop-shadow. The visual contrast with the orange-on-graphite cover is
   intentional — reads as an editorial publication, not a marketing banner.
   --------------------------------------------------------------------------- */
.gv-blueprint-feature {
	background: var(--gv-paper);
	padding-top: clamp(3rem, 5vw, 5rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
}
.gv-bp-grid {
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
	max-width: 1080px;
	margin: 0 auto;
}
@media (max-width: 760px) {
	.gv-bp-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		text-align: center;
	}
}
.gv-bp-cover {
	display: block;
	transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .25s ease;
	border-radius: 6px;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.06),
		0 12px 32px rgba(15, 23, 42, 0.14),
		0 24px 48px rgba(15, 23, 42, 0.08);
	transform: rotate(-1.5deg);
	max-width: 280px;
	margin: 0 auto;
}
.gv-bp-cover:hover {
	transform: rotate(0deg) translateY(-4px);
	box-shadow:
		0 2px 4px rgba(15, 23, 42, 0.08),
		0 20px 40px rgba(15, 23, 42, 0.18),
		0 36px 64px rgba(15, 23, 42, 0.10);
}
.gv-bp-cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}
@media (max-width: 760px) {
	.gv-bp-cover { max-width: 220px; }
}
.gv-bp-label {
	font-family: var(--gv-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gv-teal-deep);
	display: inline-block;
	margin-bottom: .65rem;
}
.gv-bp-h2 {
	font-family: var(--gv-font-display);
	font-weight: 500;
	font-size: clamp(1.375rem, 2.3vw, 1.75rem);
	line-height: 1.25;
	letter-spacing: -.015em;
	color: var(--gv-ink);
	margin: 0 0 1rem;
}
.gv-bp-body {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--gv-ink-soft);
	margin: 0 0 1.5rem;
	max-width: 56ch;
}
@media (max-width: 760px) {
	.gv-bp-body { margin-left: auto; margin-right: auto; }
}

/* ---------------------------------------------------------------------------
   SECTION 3 — THE TRIAD
   Three positions, one operator. Side-by-side cards on a cream background.
   --------------------------------------------------------------------------- */
.gv-triad-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2.5rem;
}
@media (max-width: 960px) {
	.gv-triad-grid { grid-template-columns: 1fr; }
}
.gv-triad-card {
	background: var(--gv-white);
	border: 1px solid var(--gv-line);
	border-radius: var(--gv-r-lg);
	padding: 2rem 1.75rem;
	position: relative;
	transition: transform .2s ease, box-shadow .2s ease;
}
.gv-triad-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
}
.gv-triad-card::before {
	content: "";
	position: absolute;
	top: 0; left: 1.75rem; right: 1.75rem;
	height: 3px;
	background: var(--gv-teal);
	border-radius: 0 0 2px 2px;
}
.gv-triad-label {
	font-family: var(--gv-font-mono);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gv-teal-deep);
	display: inline-block;
	margin-bottom: .85rem;
}
.gv-triad-title {
	font-family: var(--gv-font-display);
	font-size: 1.375rem;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--gv-ink);
	line-height: 1.2;
	margin: 0 0 .85rem;
}
.gv-triad-card p {
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--gv-ink-soft);
	margin: 0;
}

/* ---------------------------------------------------------------------------
   SECTION 4 — THE MANIFESTO
   Three paragraphs on paper background, larger line-height, narrow column.
   --------------------------------------------------------------------------- */
.gv-manifesto {
	background: var(--gv-paper);
	padding-top: clamp(4rem, 7vw, 6rem);
	padding-bottom: clamp(4rem, 7vw, 6rem);
}
.gv-manifesto-inner {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 clamp(1rem, 3vw, 1.5rem);
}
.gv-manifesto-h2 {
	font-family: var(--gv-font-display);
	font-size: clamp(1.875rem, 3.5vw, 2.625rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--gv-ink);
	margin: 0 0 2rem;
}
.gv-manifesto-p {
	font-family: var(--gv-font-body);
	font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
	line-height: 1.7;
	color: var(--gv-ink-soft);
	margin: 0 0 1.5rem;
}
.gv-manifesto-p:last-child {
	color: var(--gv-ink);
	font-weight: 500;
}

/* ---------------------------------------------------------------------------
   SECTION 5 — REFERENCE STACK · THREE TIERS
   Anchored pricing with hero numbers. Featured (Multi-Site) card gets
   visual lift via different border and slight scale.
   --------------------------------------------------------------------------- */
.gv-tier-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 3rem;
	align-items: stretch;
}
@media (max-width: 960px) {
	.gv-tier-grid { grid-template-columns: 1fr; }
}
.gv-tier-card {
	background: var(--gv-white);
	border: 1px solid var(--gv-line);
	border-radius: var(--gv-r-lg);
	padding: 2rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	position: relative;
	transition: transform .2s ease, box-shadow .2s ease;
}
.gv-tier-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
}
.gv-tier-card-featured {
	border-color: var(--gv-teal);
	border-width: 2px;
	background: linear-gradient(to bottom, rgba(0, 212, 184, 0.03) 0%, var(--gv-white) 100%);
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 168, 150, 0.10), 0 4px 12px rgba(15, 23, 42, 0.06);
}
.gv-tier-card-featured:hover {
	transform: translateY(-7px);
	box-shadow: 0 18px 40px rgba(0, 168, 150, 0.14), 0 6px 16px rgba(15, 23, 42, 0.08);
}
@media (max-width: 960px) {
	.gv-tier-card-featured { transform: none; }
	.gv-tier-card-featured:hover { transform: translateY(-3px); }
}
.gv-tier-badge {
	position: absolute;
	top: -.7rem;
	right: 1.5rem;
	background: var(--gv-teal-deep);
	color: var(--gv-white);
	font-family: var(--gv-font-mono);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .35rem .75rem;
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(0, 168, 150, 0.25);
}
.gv-tier-label {
	font-family: var(--gv-font-mono);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gv-teal-deep);
	margin: 0;
}
.gv-tier-title {
	font-family: var(--gv-font-display);
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--gv-ink);
	line-height: 1.25;
	margin: 0;
}
.gv-tier-price {
	font-family: var(--gv-font-display);
	font-size: 2.75rem;
	font-weight: 500;
	letter-spacing: -.02em;
	color: var(--gv-ink);
	line-height: 1;
	margin: .5rem 0 0;
}
.gv-tier-price-note {
	font-family: var(--gv-font-mono);
	font-size: .75rem;
	letter-spacing: .04em;
	color: var(--gv-mute);
	margin: 0;
}
.gv-tier-body {
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--gv-ink-soft);
	margin: .5rem 0 0;
	flex: 1;
}
.gv-tier-card .gv-btn { margin-top: auto; align-self: flex-start; }
.gv-tier-postscript {
	max-width: 720px;
	margin: 2.5rem auto 0;
	text-align: center;
	font-style: italic;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--gv-ink-soft);
}

/* ---------------------------------------------------------------------------
   SECTION 6 — GRANITEVECTOR FOUNDATION
   Visually distinct from Reference Stack — different background tone, smaller
   footprint. Reads as a second product line, not a peer offering.
   --------------------------------------------------------------------------- */
.gv-foundation {
	background: linear-gradient(135deg, var(--gv-paper-soft) 0%, var(--gv-paper) 100%);
	padding-top: clamp(3.5rem, 6vw, 5.5rem);
	padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
	position: relative;
	border-top: 1px solid var(--gv-line);
	border-bottom: 1px solid var(--gv-line);
}
.gv-foundation::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, var(--gv-amber) 50%, transparent 100%);
	opacity: 0.4;
}
.gv-foundation-inner {
	max-width: 980px;
	margin: 0 auto;
	padding: 0 clamp(1rem, 3vw, 1.5rem);
}
.gv-foundation-head {
	text-align: center;
	margin-bottom: 2.5rem;
}
.gv-foundation-label {
	display: inline-block;
	font-family: var(--gv-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gv-warn);
	background: var(--gv-warn-soft);
	padding: .4rem .85rem;
	border-radius: 999px;
	margin-bottom: 1.25rem;
}
.gv-foundation-h2 {
	font-family: var(--gv-font-display);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--gv-ink);
	margin: 0 0 1rem;
}
.gv-foundation-lede {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--gv-ink-soft);
	margin: 0 auto;
	max-width: 64ch;
}
.gv-foundation-body {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 2.5rem;
	margin-bottom: 2.5rem;
	background: var(--gv-white);
	border: 1px solid var(--gv-line);
	border-radius: var(--gv-r-lg);
	padding: 2rem 2rem;
}
@media (max-width: 760px) {
	.gv-foundation-body { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; }
}
.gv-foundation-subheading {
	font-family: var(--gv-font-display);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--gv-ink);
	margin: 0 0 .85rem;
	padding-bottom: .65rem;
	border-bottom: 1px solid var(--gv-line);
}
.gv-foundation-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .55rem;
}
.gv-foundation-list li {
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--gv-ink-soft);
	padding-left: 1.5rem;
	position: relative;
}
.gv-foundation-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--gv-success);
	font-weight: 700;
}
.gv-foundation-exclude {
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--gv-mute);
	font-style: italic;
	margin: 0;
}
.gv-foundation-engagement {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	background: var(--gv-graphite);
	color: var(--gv-paper);
	padding: 1.5rem 2rem;
	border-radius: var(--gv-r-lg);
}
.gv-foundation-price-row {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}
.gv-foundation-price {
	font-family: var(--gv-font-display);
	font-size: 1.75rem;
	font-weight: 500;
	color: var(--gv-paper);
	line-height: 1.1;
}
.gv-foundation-price-meta {
	font-family: var(--gv-font-mono);
	font-size: .75rem;
	letter-spacing: .06em;
	color: rgba(247, 245, 239, 0.6);
}


/* ============================================================================
 * BLUEPRINT LANDING PAGE (v3.9.0)
 *
 * Most important conversion surface — every homepage CTA points here.
 * Dark graphite + orange-italic accent matches the PDF cover so the
 * transition from "Read Blueprint" CTA → landing page feels coherent.
 * ============================================================================ */

/* Ghost button variant for dark surfaces (used in Blueprint landing) */
.gv-btn-ghost-on-dark {
	background: rgba(255, 255, 255, 0.05);
	color: var(--gv-paper);
	border: 1px solid rgba(247, 245, 239, 0.25);
}
.gv-btn-ghost-on-dark:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(247, 245, 239, 0.45);
	color: var(--gv-paper);
}

.gv-bp-landing {
	position: relative;
	background: var(--gv-graphite);
	color: var(--gv-paper);
	padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(3.5rem, 6vw, 6rem);
	overflow: hidden;
}
.gv-bp-landing-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(ellipse 60% 50% at 80% 20%, rgba(216, 92, 46, 0.10) 0%, transparent 60%),
		radial-gradient(ellipse 50% 50% at 10% 80%, rgba(0, 212, 184, 0.06) 0%, transparent 60%),
		linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
	background-size: auto, auto, 56px 56px, 56px 56px;
}
.gv-bp-landing-inner { position: relative; z-index: 1; }
.gv-bp-landing-grid {
	display: grid;
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 880px) {
	.gv-bp-landing-grid { grid-template-columns: 1fr; }
	.gv-bp-landing-cover-col { max-width: 320px; margin: 0 auto; }
}

.gv-bp-landing-cover-frame {
	position: relative;
	transform: rotate(-1.5deg);
	transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.55),
		0 8px 20px rgba(0, 0, 0, 0.4),
		0 0 1px rgba(255, 255, 255, 0.06);
	border-radius: 4px;
	overflow: hidden;
}
.gv-bp-landing-cover-frame:hover { transform: rotate(0deg) scale(1.02); }
.gv-bp-landing-cover-img {
	display: block;
	width: 100%;
	height: auto;
}
.gv-bp-landing-meta {
	display: flex;
	gap: 1.25rem;
	margin-top: 1.5rem;
	flex-wrap: wrap;
	font-family: var(--gv-font-mono);
	font-size: .75rem;
	color: rgba(247, 245, 239, 0.55);
}
.gv-bp-landing-meta-label {
	display: block;
	font-size: .625rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(247, 245, 239, 0.4);
	margin-bottom: .1rem;
}

.gv-bp-landing-eyebrow {
	display: inline-block;
	font-family: var(--gv-font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gv-teal);
	margin-bottom: 1rem;
}
.gv-bp-landing-h1 {
	font-family: var(--gv-font-display);
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--gv-paper);
	margin: 0 0 1.25rem;
}
.gv-bp-landing-h1 em {
	font-style: italic;
	color: #E27B4E;
	font-weight: 400;
}
.gv-bp-landing-lede {
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	line-height: 1.55;
	color: rgba(247, 245, 239, 0.82);
	margin: 0 0 1.5rem;
	max-width: 60ch;
	font-style: italic;
}
.gv-bp-landing-p {
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(247, 245, 239, 0.72);
	margin: 0 0 1rem;
	max-width: 60ch;
}
.gv-bp-landing-ctas {
	display: flex;
	gap: .85rem;
	flex-wrap: wrap;
	margin-top: 1.75rem;
	margin-bottom: 1rem;
}
.gv-bp-landing-trust {
	font-size: .8125rem;
	font-style: italic;
	color: rgba(247, 245, 239, 0.5);
	margin-top: 1.25rem;
}
.gv-bp-landing-pending {
	color: #FCA5A5;
	font-size: .875rem;
	padding: .75rem 1rem;
	background: rgba(220, 38, 38, 0.08);
	border: 1px solid rgba(220, 38, 38, 0.25);
	border-radius: 8px;
}

.gv-bp-toc {
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(247, 245, 239, 0.08);
	border-radius: 14px;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.gv-bp-toc-h2 {
	font-family: var(--gv-font-display);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 500;
	color: var(--gv-paper);
	margin: 0 0 1.25rem;
}
.gv-bp-toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .75rem 2rem;
}
@media (max-width: 720px) { .gv-bp-toc-list { grid-template-columns: 1fr; } }
.gv-bp-toc-list li {
	display: flex;
	gap: .85rem;
	align-items: baseline;
	padding: .5rem 0;
	border-bottom: 1px solid rgba(247, 245, 239, 0.06);
}
.gv-bp-toc-num {
	font-family: var(--gv-font-mono);
	font-size: .75rem;
	font-weight: 500;
	color: var(--gv-teal-glow);
	flex-shrink: 0;
	min-width: 1.5rem;
}
.gv-bp-toc-text {
	font-size: .9375rem;
	line-height: 1.4;
	color: rgba(247, 245, 239, 0.82);
}

.gv-bp-landing-bottom-cta {
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
	padding: clamp(2rem, 3vw, 2.5rem) 0;
}
.gv-bp-landing-bottom-cta h2 {
	font-family: var(--gv-font-display);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 500;
	color: var(--gv-paper);
	margin: 0 0 .5rem;
}
.gv-bp-landing-bottom-cta p {
	color: rgba(247, 245, 239, 0.72);
	margin: 0 0 1.5rem;
	font-size: 1rem;
}
.gv-bp-landing-bottom-cta .gv-bp-landing-ctas {
	justify-content: center;
	margin: 0;
}

/* ============================================================================
 * LIVEBAND PRIVACY — audit matrix helpers (v3.9.3)
 * ============================================================================ */
.lb-privacy-body hr.lb-privacy-divider {
	margin: 3rem 0 !important;
	border: 0;
	border-top: 1px solid var(--lb-line);
	opacity: 0.6;
}
.lb-privacy-body .lb-privacy-audit-meta {
	font-family: var(--gv-font-mono, 'JetBrains Mono', monospace);
	font-size: .8125rem;
	color: rgba(236, 236, 242, 0.6);
	letter-spacing: .02em;
	margin-top: .5rem !important;
}
.lb-privacy-body .lb-privacy-audit-meta strong {
	color: var(--lb-cyan);
	font-weight: 500;
}