/* ============================================================
   GOLDEN CONSULTING PARTNERS — Bright Modernist System v5.0
   Legibility-first · Pure white · Near-black text · 4-color accent
   Tokens → Reset → Typography → Layout → Announcement →
   Nav → Buttons → Cards → Section Header → Hero →
   Studio Strip → Studio Pillars → Trust Bar → Process Steps →
   Feature List → Testimonials → FAQ → Callout → Device Mockups →
   Product Showcase → Live Dot → KPI / Stats → Tags / Badges →
   Footer → Forms → Utilities → Motion → Responsive
   ============================================================ */

/* Note: Google Fonts is loaded via <link> in each HTML head (with preconnect).
   The @import that used to live here triggered a SECOND blocking network
   fetch of the same families because @import inside a render-blocking
   stylesheet creates a serialized dependency. Removed. */

/* === TOKENS === */
:root {
  /* Backgrounds — bright base + meaningfully different soft tints for section rhythm */
  --bg:               #F2F1ED;  /* warm off-white paper */
  --bg-soft:          #EAE8E2;  /* alternating band, one clear step darker than --bg */
  --bg-elevated:      #FFFFFF;  /* nav / raised chrome lifts off the paper */
  --bg-card:          #FFFFFF;  /* cards lift to true white against the warm paper */
  --tint-gold:        #F6EFD9;  /* warm gold wash, tuned to the new paper */
  --tint-gray:        #E4E2DB;

  /* TEXT — near-black for ruthless contrast. Soft+faint tightened for AA compliance. */
  --text:             #0A0E1A;
  --text-body:        #2D3748;
  --text-muted:       #4A5568;
  --text-soft:        #586478;  /* was #718096 — was technically 4.5:1, felt washy */
  --text-faint:       #5D6783;  /* was #A0AEC0 — failed AA at 2.7:1, now ~5:1 */
  --text-inverse:     #FFFFFF;

  /* Borders — pulled darker so hairlines actually register against white */
  --border:           #DDDAD2;  /* warm hairline */
  --border-strong:    #C4C0B5;
  --border-dark:      #1E293B;
  --divider:          linear-gradient(90deg, transparent 0%, var(--border-strong) 18%, var(--border-strong) 82%, transparent 100%);

  /* ── BRAND: GOLD — the only brand accent ──────────────────────────
     #D4AF37 is 2.1:1 on white — it is a SURFACE color (buttons, borders,
     dots, accents on dark), never text on a light background.
     For gold text on light, use --gold-text (5.3:1, passes AA body). */
  --gold:             #D4AF37;   /* brand gold — surfaces, fills, borders, on-dark */
  --gold-light:       #E6C65C;   /* lighter gold — gradients, on-dark accents */
  --gold-text:        #866104;   /* gold TEXT — 4.6:1 on the darkest surface, 5.6:1 on card white */
  --gold-deep:        #7A5A05;   /* hover / stronger gold text (6.38:1) */
  --gold-tint:        #F7F0DA;   /* gold wash background, on warm paper */
  --gold-border:      #F0D68A;   /* gold hairline */

  /* ── SEMANTIC ONLY — status, never branding ─────────────────────── */
  --success:          #027655;   /* status green — AA on every surface */
  --success-bright:   #10B981;   /* live dot fill */
  --success-tint:     #D1FAE5;
  --success-border:   #6EE7B7;
  --error:            #B91C1C;
  --error-tint:       #FEE2E2;

  /* Shadows */
  --shadow-xs:        0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:        0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow:           0 2px 10px rgba(15, 23, 42, 0.05);
  --shadow-md:        0 6px 20px rgba(15, 23, 42, 0.06);
  --shadow-lg:        0 12px 32px -10px rgba(15, 23, 42, 0.10);
  --shadow-xl:        0 24px 60px -16px rgba(15, 23, 42, 0.20);
  --shadow-gold:      0 0 0 1px rgba(212, 175, 55, 0.10), 0 12px 32px -8px rgba(212, 175, 55, 0.30);
  --shadow-gold-soft: 0 0 0 1px rgba(212,175,55,0.10), 0 12px 32px -8px rgba(212,175,55,0.25);

  /* Radius */
  --radius-xs:        4px;
  --radius-sm:        8px;
  --radius:           12px;
  --radius-lg:        20px;
  --radius-xl:        28px;
  --radius-pill:      999px;

  /* Motion */
  --ease:             cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:         150ms;
  --dur:              250ms;
  --dur-slow:         480ms;
  --t:                250ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text-body);
  line-height: 1.72;
  font-size: 17px;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; color: var(--gold-text); transition: color var(--t); }
a:hover { color: var(--gold-deep); }
img { max-width: 100%; display: block; }
ul { padding-left: 1.2em; }
li { margin-bottom: 0.3em; }
strong { font-weight: 700; color: var(--text); }
p { line-height: 1.65; max-width: 70ch; }

/* Focus ring — accessibility */
:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 2px;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4 {
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  font-style: normal;
}

h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

/* Bold+color replaces italic — em inside headings = bold gold, NOT italic */
h1 em, h2 em, h3 em, h4 em {
  font-style: normal;
  font-weight: 900;
  color: var(--gold-deep);
}

h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h4 {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.display-xl {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--text);
  font-style: normal;
}

/* Eyebrow / section-label — sentence case, soft gold, no mono */
.eyebrow,
.section-label {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-style: normal;
}

/* Small gold dot prefix on eyebrows — softer than the bar */
.eyebrow::before,
.section-label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Gradient-text: was italic gold, now bold colored — default gold */
.gradient-text {
  font-style: normal;
  font-weight: 900;
  color: var(--gold-deep);
  background: none;
  -webkit-text-fill-color: unset;
  -webkit-background-clip: unset;
  background-clip: unset;
}

/* AI/build accent text — electric blue */
.cyan-text {
  color: var(--gold-deep);
  font-style: normal;
  background: none;
  -webkit-text-fill-color: unset;
  -webkit-background-clip: unset;
  background-clip: unset;
}

/* === LAYOUT === */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.section    { padding: 132px 0; position: relative; }
.section-sm { padding: 92px 0; position: relative; }
.section-xs { padding: 56px 0; position: relative; }

/* Section-rhythm: alternate top-level sections so the page reads as
   distinct chapters instead of one endless white scroll. Targets the
   actual structure used across the 38 HTML pages — sections directly
   under <body>. Pages without sections (or with custom layouts) are
   unaffected. Inline style="background:..." still wins (intentional). */
/* REMOVED 2026-07-21: this automatic zebra counted every <section> sibling
   regardless of class, so it fought the explicit .section--soft classes the
   pages now use and tinted EVERY section. It was invisible while --bg-soft
   was near-white; the warmer paper exposed it. Alternation is explicit now. */

/* Explicit section variants — use these when nth-of-type isn't enough. */
.section--soft       { background: var(--bg-soft); }
.section--tint-gold  { background: var(--tint-gold); }
.section--tint-blue  { background: var(--gold-tint); }
.section--tint-coral { background: var(--gold-tint); }
.section--tint-emerald { background: var(--success-tint); }
.section--tint-gray  { background: var(--tint-gray); }
.section--dark       { background: #0E1530; color: var(--text-inverse); }
.section--dark h2,
.section--dark h3    { color: var(--text-inverse); }
.section--dark p,
.section--dark .text-muted { color: rgba(255,255,255,0.78); }

/* Hairline divider between consecutive same-colored sections so the eye
   gets a beat. Skipped automatically when sections already differ in bg. */
.section + .section,
.section + .section-sm,
.section-sm + .section,
.section-sm + .section-sm { /* hairlines removed — whitespace separates sections */ }
/* When a tinted section sits above white, drop the hairline (the bg change
   does the dividing work). */
.section--soft + .section,
.section--tint-gold + .section,
.section--tint-blue + .section,
.section--tint-coral + .section,
.section--tint-emerald + .section,
.section--tint-gray + .section,
.section + .section--soft,
.section + .section--tint-gold,
.section + .section--tint-blue,
.section + .section--tint-coral,
.section + .section--tint-emerald,
.section + .section--tint-gray { border-top: 0; }

.justify-center { justify-content: center; }

/* === ANNOUNCEMENT BAR === */
.announcement-bar {
  background: var(--tint-gold);
  color: var(--text);
  text-align: center;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 0.93rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px solid var(--gold-border);
  position: relative;
}

.announcement-bar a {
  color: var(--gold-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.announcement-bar a:hover { color: var(--gold-deep); }

.announcement-bar .eyebrow {
  color: var(--gold-deep);
  font-size: 0.85rem;
  font-weight: 700;
  margin-right: 4px;
}

/* Override ::before for inline eyebrow inside announcement bar — small gold dot */
.announcement-bar .eyebrow::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--gold-light);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}

.announcement-bar a {
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold-border);
  font-weight: 600;
}
.announcement-bar a:hover { color: var(--gold-text); }

/* === NAV === */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--t), backdrop-filter var(--t);
}
.site-nav.is-scrolled {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-xs);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 16px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text);
  white-space: nowrap;
  transition: opacity var(--t);
  letter-spacing: -0.01em;
  font-style: normal;
}
.nav-brand:hover { opacity: 0.8; color: var(--text); }
.nav-brand span  { color: var(--text-muted); font-weight: 600; }

/* Nav logo: colored "G" gradient block */
.nav-logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 900;
  color: #FFFFFF;
  font-size: 1.1rem;
  font-style: normal;
  line-height: 1;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-link,
.nav-links a {
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: background var(--t), color var(--t);
  position: relative;
  font-style: normal;
}

.nav-link:hover,
.nav-links a:hover {
  background: var(--tint-gray);
  color: var(--text);
}

/* Active nav link — gold underline */
.nav-links a.active,
.nav-links a.nav-link--active,
.nav-link--active {
  color: var(--gold-deep);
  font-weight: 600;
}
.nav-links a.active::after,
.nav-links a.nav-link--active::after,
.nav-link--active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
}

.nav-cta {
  margin-left: 8px;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--text);
}
.nav-cta:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--text);
  box-shadow: var(--shadow-gold);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius-sm);
  min-width: 44px;
  min-height: 44px;
}
.nav-toggle div,
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t);
}

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--gold);
  color: var(--text);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  border: 2px solid var(--gold);
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t),
              box-shadow var(--t), transform var(--dur-fast) var(--ease);
  letter-spacing: -0.005em;
  white-space: nowrap;
  line-height: 1;
  font-style: normal;
  min-height: 44px;
}
.btn:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--gold);
  color: var(--text);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  border: 2px solid var(--gold);
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t),
              box-shadow var(--t), transform var(--dur-fast) var(--ease);
  letter-spacing: -0.005em;
  white-space: nowrap;
  line-height: 1;
  font-style: normal;
  min-height: 44px;
}
.btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg);
  color: var(--text);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  border: 2px solid var(--border-dark);
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t),
              transform var(--dur-fast) var(--ease);
  letter-spacing: -0.005em;
  white-space: nowrap;
  line-height: 1;
  font-style: normal;
  min-height: 44px;
}
.btn-outline:hover {
  background: var(--gold);
  color: var(--text);
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: var(--text);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: color var(--t);
  line-height: 1;
  position: relative;
  font-style: normal;
  min-height: 44px;
}
.btn-ghost::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 20px;
  right: 20px;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.btn-ghost:hover { color: var(--gold-deep); }
.btn-ghost:hover::after { transform: scaleX(1); }

.btn-sm { padding: 7px 15px; font-size: 0.82rem; min-height: 36px; }
.btn-lg { padding: 14px 28px; font-size: 1rem; min-height: 52px; }

.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* === CARDS === */
/* Always-on shadow + tinted card bg so cards lift off white sections
   instead of dissolving into them. Was: white-on-white with hairline only. */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t), box-shadow var(--t), transform var(--dur) var(--ease), background var(--t);
}
.card:hover {
  border-color: var(--border-strong);
  background: var(--bg);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* When a card sits on a soft/tinted section, flip it to pure white so it
   still feels elevated against the colored bg. */
.section--soft .card,
.section--tint-gold .card,
.section--tint-blue .card,
.section--tint-coral .card,
.section--tint-emerald .card,
.section--tint-gray .card,
.section--soft .card {
  /* cards on the tinted band lift to true white */
  background: var(--bg-card);
}

.card-gold {
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t), transform var(--dur) var(--ease);
}
.section--soft .card-gold,
.section--tint-gold .card-gold,
.section--tint-blue .card-gold,
.section--tint-coral .card-gold,
.section--tint-emerald .card-gold,
.section--tint-gray .card-gold,
.section--soft .card-gold { background: var(--bg-card); }
/* 4px gold top accent bar */
.card-gold::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gold);
  border-radius: var(--radius) var(--radius) 0 0;
}
.card-gold:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

.card-featured {
  background: linear-gradient(135deg, var(--tint-gold), var(--bg));
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-lg);
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--t);
}
.card-featured:hover {
  box-shadow: var(--shadow-gold);
}

/* === GRIDS === */
.grid-4    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-3    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2    { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-2-1  { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

/* === SECTION HEADER / LABEL === */
.section-header {
  text-align: center;
  margin-bottom: 76px;
}
.section-header h2 {
  margin-bottom: 14px;
  color: var(--text);
}
.section-header p {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 60ch;
  margin: 0 auto;
  line-height: 1.55;
}

/* Section label has its own margin */
.section-label {
  margin-bottom: 14px;
}

/* === HERO === */
/* Was flat white. Now a layered ambient: faint cool-blue wash from the
   top-left, faint warm-gold wash from the bottom-right, both well under
   3% opacity so body text contrast is untouched. */
.hero-home {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 600px at 8% -10%, rgba(212, 175, 55, 0.05) 0%, transparent 60%),
    radial-gradient(800px 600px at 110% 110%, rgba(212, 175, 55, 0.06) 0%, transparent 55%),
    var(--bg);
  padding: 100px 0 88px;
  border-bottom: 1px solid var(--border-strong);
}

.hero-v3 { position: relative; overflow: hidden; }  /* clips the decorative glow/grid so they cannot widen the mobile viewport */

/* Soft radial gold tint — top-right atmosphere */
.hero-v3__glow {
  position: absolute;
  top: -120px;
  /* was right:-80px / width:680px — on a 390px phone that reached 470px and
     forced the browser to zoom the page out. Decorative only, so clamp it. */
  right: 0;
  width: min(680px, 100%);
  max-width: 100%;
  height: 680px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* Subtle dot grid */
.hero-v3__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-content { max-width: 640px; }

/* Hero eyebrow — blue pill badge */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--gold-tint);
  color: var(--gold-deep);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 24px;
  font-style: normal;
}
/* Override default eyebrow ::before rule — use a dot instead */
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--gold-text);
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 0;
}

.hero-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(2.2rem, 4.6vw, 3.7rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 24px;
  color: var(--text);
  max-width: 18ch;
  font-style: normal;
}

/* The "We ship it." em — bold gold, NOT italic */
.hero-title em {
  font-style: normal;
  font-weight: 900;
  color: var(--gold-deep);
  position: relative;
}

.hero-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  color: var(--text-body);
  max-width: 56ch;
  margin-bottom: 36px;
  line-height: 1.55;
  font-style: normal;
}

/* Hero visual panel */
.hero-visual {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
/* Blue left accent bar */
.hero-visual::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold), var(--gold-light));
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.hero-visual-title {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-visual-title::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success-bright);
  flex-shrink: 0;
}

.hero-metric {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.hero-metric:last-child { margin-bottom: 0; }

.hero-metric-label {
  font-family: inherit;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 400;
  display: block;
  margin-bottom: 5px;
  letter-spacing: 0.04em;
}
.hero-metric-value {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  color: var(--text);
  font-size: 1.1rem;
  display: block;
  font-style: normal;
}
.hero-metric-bar {
  height: 3px;
  background: var(--border);
  border-radius: 99px;
  margin-top: 10px;
  overflow: hidden;
}
.hero-metric-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 99px;
}

/* === STUDIO STRIP === */
.studio-strip {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
  overflow: hidden;
  position: relative;
}
/* Soft fade at both edges so items fade in/out rather than hard-cut */
.studio-strip::before,
.studio-strip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}
.studio-strip::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-soft), transparent);
}
.studio-strip::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-soft), transparent);
}
.studio-strip__inner,
.studio-strip__track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: marquee 50s linear infinite;
  will-change: transform;
}
.studio-strip:hover .studio-strip__inner,
.studio-strip:hover .studio-strip__track {
  animation-play-state: paused;
}
.studio-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-body);
  padding: 0 18px;
  padding: 0 28px;
}
.studio-strip__divider,
.studio-strip .divider-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  line-height: 1;
  margin: 0;
  font-style: normal;
}

/* === STUDIO PILLARS === */
.studio-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.studio-pillar {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--t), transform var(--dur) var(--ease);
}
.studio-pillar:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Build pillar — 4px blue top border */
.studio-pillar--build {
  border-top: 1px solid var(--border);
}
.studio-pillar--build .studio-pillar__label {
  color: var(--gold-deep);
}
/* Build pillar label dot */
.studio-pillar--build .studio-pillar__label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--gold-text);
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Consult pillar — 4px gold top border */
.studio-pillar--consult {
  border-top: 1px solid var(--border);
}
.studio-pillar--consult .studio-pillar__label {
  color: var(--gold-deep);
}
/* Consult pillar label dot */
.studio-pillar--consult .studio-pillar__label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
  vertical-align: middle;
}

.studio-pillar__label {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-style: normal;
}
/* Override default .eyebrow::before on pillar labels */
.studio-pillar__label.eyebrow::before {
  display: none;
}

.studio-pillar__h {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--text);
  font-style: normal;
}

/* em inside pillar headings — bold accent */
.studio-pillar--build .studio-pillar__h em {
  font-style: normal;
  font-weight: 900;
  color: var(--gold-deep);
}
.studio-pillar--consult .studio-pillar__h em {
  font-style: normal;
  font-weight: 900;
  color: var(--gold-deep);
}

.pillar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  transition: gap var(--t), color var(--t);
  font-style: normal;
}
.studio-pillar--build .pillar-link  { color: var(--gold-deep); }
.studio-pillar--consult .pillar-link { color: var(--gold-deep); }
.pillar-link:hover { gap: 10px; }

/* === TRUST BAR === */
.trust-bar {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 0;
}
.trust-items {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 32px;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-body);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  font-style: normal;
}
.trust-item strong { color: var(--text); font-weight: 700; }
/* Emojis in trust-item icon — hide if present */
.trust-icon { display: none; }

/* === KPI / STATS === */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}
.kpi-item {
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  transition: box-shadow var(--t), transform var(--dur) var(--ease);
}
.kpi-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.kpi-num {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: var(--gold-deep);
  line-height: 1;
  margin-bottom: 8px;
  font-style: normal;
}
.kpi-label {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-style: normal;
}

.metric-row { display: flex; gap: 40px; flex-wrap: wrap; }
.metric-row__item { display: flex; flex-direction: column; gap: 4px; }
.metric-row__num {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: var(--text);
  line-height: 1;
  font-style: normal;
}
.metric-row__label {
  font-family: inherit;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-style: normal;
}

/* === TAGS / BADGES === */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--tint-gray);
  border: 1px solid var(--border);
  color: var(--text-body);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-style: normal;
}
.tag-gold {
  background: var(--gold-tint);
  border-color: var(--gold-border);
  color: var(--gold-deep);
  font-weight: 600;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  background: var(--gold-tint);
  border: 1px solid var(--gold-border);
  color: var(--gold-deep);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0;
  text-transform: none;
  font-style: normal;
}

.badge {
  display: inline-block;
  background: var(--text);
  color: var(--text-inverse);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0;
  text-transform: none;
  font-style: normal;
}
.badge-outline {
  display: inline-block;
  background: var(--bg);
  color: var(--gold-deep);
  border: 1px solid var(--gold-border);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0;
  text-transform: none;
  font-style: normal;
}

.stack-pill {
  display: inline-flex;
  align-items: center;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text-body);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  transition: background var(--t), border-color var(--t), color var(--t);
  font-style: normal;
}
.stack-pill:hover {
  background: var(--gold-tint);
  border-color: var(--gold-border);
  color: var(--gold-deep);
}

/* === PROCESS STEPS === */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.step {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow var(--t), transform var(--dur) var(--ease);
}
.step:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.step-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--gold-tint);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--gold-deep);
  font-style: normal;
  margin-bottom: 16px;
  min-width: 44px;
}

.step-content h3 { margin-bottom: 8px; color: var(--text); }
.step-content p  { color: var(--text-body); font-size: 0.95rem; line-height: 1.65; max-width: none; }

/* === FEATURE LIST === */
.feature-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text-body);
  font-size: 0.95rem;
  margin: 0;
}
.feature-list li::before {
  content: '→';
  color: var(--gold);
  flex-shrink: 0;
  font-weight: 700;
  margin-top: 1px;
}

/* === TESTIMONIALS === */
.testimonial {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: border-color var(--t), box-shadow var(--t), transform var(--dur) var(--ease);
}
.testimonial:hover {
  border-color: var(--gold-border);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

.testimonial-stars {
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 3px;
  margin-bottom: 14px;
}

/* Testimonial text — NOT italic, high contrast */
.testimonial-text {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-body);
  margin-bottom: 22px;
}

.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-style: normal;
  color: var(--text-inverse);
  font-size: 1rem;
}
.testimonial-name {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  font-style: normal;
}
.testimonial-role {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 2px;
  font-style: normal;
}

/* === FAQ === */
.faq-stack {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
  transition: background var(--t);
}

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  gap: 16px;
  transition: color var(--t);
  font-style: normal;
  min-height: 44px;
}
.faq-q:hover { color: var(--gold-deep); }

.faq-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--text-muted);
  transition: transform var(--t), border-color var(--t), color var(--t);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  border-color: var(--gold-border);
  color: var(--gold-deep);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out),
              padding-top var(--dur) var(--ease);
  color: var(--text-body);
  font-size: 0.97rem;
  line-height: 1.7;
  padding-top: 0;
}
.faq-item.open .faq-a {
  max-height: 400px;
  padding-top: 16px;
}

/* === CALLOUT — warm gold-tint closer (no more dark) === */
.callout {
  background: linear-gradient(135deg, var(--tint-gold) 0%, var(--bg-card) 100%);
  border: 1px solid var(--gold-border);
  color: var(--text);
  border-radius: var(--radius-xl);
  padding: 80px 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.callout::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
}
.callout h2 {
  color: var(--text);
  margin-bottom: 16px;
}
.callout p {
  color: var(--text-muted);
  max-width: 54ch;
  margin: 0 auto 36px;
  font-size: 1.1rem;
  line-height: 1.55;
}
.callout .btn-primary {
  background: var(--gold);
  color: var(--text);
  border-color: var(--gold);
}
.callout .btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  box-shadow: var(--shadow-gold);
}
.callout .btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}
.callout .btn-outline:hover {
  background: var(--text);
  color: #FFFFFF;
  border-color: var(--text);
}

/* === DEVICE MOCKUPS — clean light chrome === */
.device-laptop {
  border-radius: var(--radius);
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 12px 36px rgba(15, 23, 42, 0.14));
}
.device-laptop__bezel {
  width: 100%;
  background: var(--border-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 10px 14px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Traffic-light dots */
.device-laptop__bezel::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FF5F57;
  box-shadow: 16px 0 0 #FEBC2E, 32px 0 0 #28C840;
  flex-shrink: 0;
}
.device-laptop__screen {
  aspect-ratio: 16 / 10;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-top: none;
  overflow: hidden;
}
.device-laptop__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.device-laptop__base {
  width: 112%;
  height: 10px;
  background: var(--border-strong);
  border: 1px solid var(--border-strong);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.device-phone {
  aspect-ratio: 9 / 19.5;
  width: 100%;
  max-width: 240px;
  background: var(--border-dark);
  border: 2px solid var(--border-dark);
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  padding: 4px;
  box-shadow: var(--shadow-md);
}
.device-phone__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 18px;
  background: var(--border-dark);
  border-radius: var(--radius-pill);
  z-index: 2;
}
.device-phone__screen {
  width: 100%;
  height: 100%;
  background: var(--bg);
  border-radius: var(--radius);
  overflow: hidden;
}
.device-phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === PRODUCT SHOWCASE === */
.product-showcase {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 80px 0;
}
.product-showcase--reverse .product-showcase__media { order: 2; }
.product-showcase--reverse .product-showcase__body  { order: 1; }

.product-showcase__media { position: relative; }

.product-showcase__eyebrow {
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-style: normal;
}
/* Override default eyebrow ::before — no bar in product eyebrow */
.product-showcase__eyebrow.eyebrow::before { display: none; }

.product-showcase__title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 16px;
  font-style: normal;
}
/* em inside product title — bold gold */
.product-showcase__title em {
  font-style: normal;
  font-weight: 900;
  color: var(--gold-deep);
}
/* AI/build products: blue accent on em */
.cyan-text .product-showcase__title em,
.product-showcase__title.cyan-text em {
  color: var(--gold-deep);
}

.product-showcase__tagline {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 10px;
  font-style: normal;
}

.product-showcase__desc {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--text-body);
  line-height: 1.65;
  margin-bottom: 24px;
  max-width: 60ch;
  font-style: normal;
}

.product-showcase__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.product-stat {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 16px;
}
.product-stat__num {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
  font-style: normal;
}
.product-stat__label {
  font-family: inherit;
  font-size: 0.66rem;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  font-style: normal;
}

.product-showcase__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.product-showcase__cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* === LIVE DOT — pulsing emerald === */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success-bright);
  flex-shrink: 0;
  position: relative;
}

@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

.live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--success-tint);
  animation: pulse-ring 2s ease-out infinite;
}

.live-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--gold-deep);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  text-underline-offset: 3px;
  transition: gap var(--t), color var(--t);
  font-style: normal;
}
.live-link:hover {
  color: var(--gold-text);
  text-decoration: underline;
}

/* === DIVIDERS === */
.divider {
  height: 1px;
  background: var(--border);
}
.divider-gold {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-border), var(--gold), var(--gold-border), transparent);
}

/* === MISC COMPONENTS === */
.highlight-box {
  background: var(--tint-gold);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
}
.highlight-box p {
  color: var(--text-body);
  font-size: 0.97rem;
  font-style: normal;
  margin: 0;
  max-width: none;
}

.icon-box {
  width: 54px; height: 54px;
  flex-shrink: 0;
  background: var(--tint-gold);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 18px;
}
.icon-box-sm {
  width: 40px; height: 40px;
  flex-shrink: 0;
  background: var(--tint-gold);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* === FORMS === */
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-body);
  margin-bottom: 7px;
  letter-spacing: 0;
  text-transform: none;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  transition: border-color var(--t), box-shadow var(--t);
  appearance: none;
  -webkit-appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-faint); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold-text);
  box-shadow: 0 0 0 3px var(--gold-tint);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row > * { min-width: 0; }   /* let grid items shrink below input min-content */
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
.form-success {
  background: var(--success-tint);
  border: 1px solid var(--success-border);
  border-radius: var(--radius);
  padding: 18px 22px;
  color: var(--success);
  font-size: 0.95rem;
  display: none;
  margin-top: 16px;
}
.form-error {
  background: var(--gold-tint);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius);
  padding: 14px 18px;
  color: var(--gold-deep);
  font-size: 0.88rem;
  display: none;
  margin-top: 12px;
}

/* === ALERT === */
.alert-success {
  background: var(--success-tint);
  border: 1px solid var(--success-border);
  border-radius: var(--radius);
  padding: 14px 18px;
  color: var(--success);
  font-size: 0.9rem;
}
.alert-info {
  background: var(--gold-tint);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius);
  padding: 14px 18px;
  color: var(--gold-deep);
  font-size: 0.9rem;
}

/* === IMAGES === */
.img-cover { width: 100%; border-radius: var(--radius); object-fit: cover; border: 1px solid var(--border); }
.img-hero  { width: 100%; border-radius: var(--radius-lg); object-fit: cover; border: 1px solid var(--border); box-shadow: var(--shadow-md); }

/* === PAGE HERO (inner pages) === */
.page-hero {
  background: var(--bg);
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.page-hero h1 { margin-bottom: 16px; }
.page-hero p.lead {
  color: var(--text-body);
  font-size: 1.1rem;
  max-width: 65ch;
  line-height: 1.65;
}

/* === STAT CARDS === */
.stat-card {
  background: var(--tint-gold);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.stat-big {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: 2.6rem;
  color: var(--gold-deep);
  line-height: 1;
  white-space: nowrap;
  font-style: normal;
}

/* === PRICING === */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pricing-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--t), box-shadow var(--t), transform var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}
.pricing-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.pricing-card.featured {
  border-color: var(--gold-border);
  box-shadow: var(--shadow-gold);
}
.pricing-card.featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.pricing-name {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-deep);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 14px;
  font-style: normal;
}
.pricing-price {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: 2.35rem;
  color: var(--text);
  line-height: 1.05;
  margin-bottom: 6px;
  font-style: normal;
}
/* The qualifier ("one-time", "/month", "quoted to scope") sits on its own
   line — with "From $650" it no longer fits beside the figure and was
   breaking mid-word. */
.pricing-price small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 6px;
  letter-spacing: 0;
}
.pricing-desc  { color: var(--text-body); font-size: 0.9rem; margin-bottom: 24px; }
.pricing-divider { height: 1px; background: var(--border); margin: 22px 0; }
.pricing-features { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text-body);
  margin: 0;
}
.pricing-features li::before { content: '→'; color: var(--gold); font-weight: 700; flex-shrink: 0; }
.pricing-cta { margin-top: 28px; }

/* === PRODUCT GRID / CARDS === */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t), transform var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  border-color: var(--gold-border);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}
.product-img    { width: 100%; height: 175px; object-fit: cover; border-bottom: 1px solid var(--border); }
.product-body   { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.product-price  {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--text);
  margin: 8px 0;
  font-style: normal;
}
.product-note   { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 14px; flex: 1; }
.product-card .btn { margin-top: auto; width: 100%; justify-content: center; }

/* === QUICK NAV === */
.quick-nav { display: flex; gap: 9px; flex-wrap: wrap; }
.quick-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-body);
  font-size: 0.86rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: border-color var(--t), color var(--t), background var(--t);
}
.quick-nav a:hover {
  border-color: var(--gold-border);
  color: var(--gold-deep);
  background: var(--tint-gold);
}

/* === CART === */
.cart-panel {
  background: var(--bg);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius);
  padding: 26px;
  position: sticky;
  top: 84px;
}
.cart-panel h3 { margin-bottom: 16px; }
.cart-total {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: 2.2rem;
  color: var(--text);
  margin: 12px 0;
  font-style: normal;
}
.cart-empty-msg { color: var(--text-muted); font-size: 0.9rem; }
.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--text-body);
}
.cart-remove {
  cursor: pointer;
  color: var(--text-faint);
  font-size: 1rem;
  background: none;
  border: none;
  transition: color var(--t);
}
.cart-remove:hover { color: var(--gold-light); }

/* === CHATBOT === */
.gcp-chat-root {
  position: fixed;
  right: 20px;
  bottom: 80px;
  z-index: 9999;
}
.gcp-chat-toggle {
  background: var(--text);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-pill);
  padding: 13px 20px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background var(--t), box-shadow var(--t);
}
.gcp-chat-toggle:hover {
  background: var(--gold-deep);
  box-shadow: var(--shadow-gold);
}
.gcp-chat-panel {
  width: 340px;
  max-width: 92vw;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  margin-top: 10px;
}
.gcp-chat-head {
  background: var(--bg-soft);
  padding: 14px 16px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.gcp-chat-head span {
  font-family: inherit;
  font-size: 0.68rem;
  color: var(--gold-deep);
  letter-spacing: 0;
}
.gcp-chat-log {
  height: 280px;
  overflow: auto;
  padding: 14px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gcp-chat-msg {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  line-height: 1.55;
}
.gcp-chat-msg.bot  { background: var(--bg-soft); color: var(--text-body); }
.gcp-chat-msg.user {
  background: var(--gold-tint);
  color: var(--gold-deep);
  margin-left: 28px;
  border: 1px solid var(--gold-border);
}
.gcp-chat-form { display: flex; border-top: 1px solid var(--border); }
.gcp-chat-form input {
  flex: 1;
  border: none;
  padding: 12px 14px;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
}
.gcp-chat-form input:focus { outline: none; }
.gcp-chat-form button {
  border: none;
  background: var(--text);
  color: var(--text-inverse);
  padding: 12px 16px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t);
}
.gcp-chat-form button:hover { background: var(--gold-deep); }

/* === FUNNEL BAR === */
.gcp-funnel-bar {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 9998;
  background: #FFFFFF;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 8px;
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
  max-width: 720px;
  margin: 0 auto;
}
.gcp-funnel-bar a {
  color: var(--text-body);
  background: transparent;
  border: none;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  transition: background var(--t), color var(--t);
  display: inline-flex;
  align-items: center;
}
.gcp-funnel-bar a:hover {
  background: var(--tint-gold);
  color: var(--gold-deep);
}
.gcp-funnel-bar a.cta {
  background: var(--gold);
  color: var(--text);
}
.gcp-funnel-bar a.cta:hover {
  background: var(--gold-light);
  color: var(--text);
  box-shadow: var(--shadow-gold);
}

/* === FOOTER — light, branded, cohesive with page === */
.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  padding: 72px 0 28px;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(5, 1fr);
  gap: 36px;
  margin-bottom: 52px;
}

/* footer-brand-name wraps the Golden Consulting Partners text in index.html */
.footer-brand-name,
.footer-brand {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--text);
  margin-bottom: 12px;
  font-style: normal;
  letter-spacing: -0.01em;
}
/* em inside footer brand name — bold gold */
.footer-brand-name em,
.footer-brand em {
  font-style: normal;
  font-weight: 900;
  color: var(--gold-deep);
}

.footer-tagline {
  display: block;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-body);
  margin-top: 8px;
  margin-bottom: 14px;
}
.footer-desc {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
  margin-bottom: 18px;
  max-width: 32ch;
  font-style: normal;
}
.footer-email a {
  color: var(--gold-deep);
  font-size: 0.9rem;
  font-weight: 600;
  font-style: normal;
}
.footer-email a:hover { color: var(--gold-deep); }

.footer-col h5 {
  font-family: inherit;
  color: var(--text);
  font-weight: 700;
  margin-bottom: 16px;
  font-size: 0.88rem;
  text-transform: none;
  letter-spacing: 0;
  font-style: normal;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col li { margin: 0; }
.footer-col a  {
  color: var(--text-body);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.92rem;
  font-style: normal;
  transition: color var(--t);
}
.footer-col a:hover { color: var(--gold-deep); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copy {
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--text-soft);
  letter-spacing: 0;
  font-style: normal;
}
.footer-misc { display: flex; gap: 20px; }
.footer-misc a {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: normal;
  transition: color var(--t);
}
.footer-misc a:hover { color: var(--gold-deep); }

/* === UTILITIES === */
.gold        { color: var(--gold-deep); }
.text-gold   { color: var(--gold-deep); }
.text-muted  { color: var(--text-muted); }
.text-sm     { font-size: 0.88rem; }
.text-xs     { font-size: 0.8rem; }
.text-center { text-align: center; }
.text-white  { color: var(--text-inverse); }
.fw-700      { font-weight: 700; }
.fw-800      { font-weight: 800; }

.mt-0  { margin-top: 0; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }

.flex-center { display: flex; align-items: center; }
.gap-8       { gap: 8px; }
.gap-12      { gap: 12px; }
.gap-16      { gap: 16px; }

/* === MOTION === */
@media (prefers-reduced-motion: no-preference) {

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes underlineDraw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  @keyframes shimmer-gold {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
  }

  [data-animate] {
    opacity: 0;
    transform: translateY(16px);
  }
  [data-animate].is-visible {
    animation: fadeUp 600ms var(--ease-out) both;
  }
}

/* === RESPONSIVE === */

/* ─── 1140px wide — large desktop ─── */
@media (max-width: 1140px) {
  .hero-layout { grid-template-columns: 1fr 360px; gap: 48px; }
}

/* ─── 1100px wide — tighten grids ─── */
@media (max-width: 1100px) {
  .grid-4     { grid-template-columns: repeat(2, 1fr); }
  .kpi-row    { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ─── 960px wide — collapse 3-col grids ─── */
@media (max-width: 960px) {
  .grid-3, .pricing-grid { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── 900px — mobile nav threshold ─── */
@media (max-width: 900px) {
  .site-nav { position: relative; }

  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 16px 20px;
    z-index: 999;
    box-shadow: var(--shadow-md);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a,
  .nav-link {
    padding: 13px 14px;
    font-size: 0.95rem;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    min-height: 52px;
  }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links a.nav-link--active::after { display: none; }
  .nav-cta { margin-left: 0; margin-top: 8px; }

  /* Hero collapses to single column */
  .hero-layout { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero-title  { max-width: none; }

  /* Studio pillars stack */
  .studio-pillars { grid-template-columns: 1fr; }

  /* Product showcase stacks */
  .product-showcase,
  .product-showcase--reverse { grid-template-columns: 1fr; }
  .product-showcase { padding: 48px 0; }
  .product-showcase--reverse .product-showcase__media,
  .product-showcase--reverse .product-showcase__body { order: unset; }

  /* Steps stack */
  .steps { grid-template-columns: 1fr; gap: 16px; }
}

/* Sticky nav restored between 641–900 via JS, but force sticky above 900 */
@media (min-width: 900px) {
  .site-nav  { position: sticky; }
  .nav-toggle { display: none; }
  .nav-links  { display: flex; }
}

/* ─── 640px — mobile ─── */
@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .section    { padding: 56px 0; }
  .section-sm { padding: 40px 0; }
  .section-xs { padding: 28px 0; }
  .callout    { padding: 48px 28px; border-radius: var(--radius-lg); }
  .hero-home  { padding: 64px 0 48px; }

  h1 { font-size: clamp(2rem, 9vw, 2.8rem); }

  .grid-2, .grid-3, .grid-4,
  .kpi-row, .pricing-grid, .product-grid { grid-template-columns: 1fr; }
  .footer-grid  { grid-template-columns: 1fr; }
  .grid-2-1     { grid-template-columns: 1fr; }
  .form-row     { grid-template-columns: 1fr; }

  .trust-items  { gap: 18px; flex-direction: column; align-items: flex-start; }
  .metric-row   { gap: 24px; }

  .gcp-funnel-bar { left: 8px; right: 8px; bottom: 8px; }

  .product-showcase__metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-row { flex-direction: column; }
  .cta-row .btn,
  .cta-row .btn-primary,
  .cta-row .btn-outline { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   TWO-DOOR HERO — the co-equal service split.
   Both doors carry identical visual weight by design: same border,
   same padding, same type scale. Never make one visually dominant.
   ═══════════════════════════════════════════════════════════════════ */
.hero-doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 44px;
}
.door {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 36px 36px;
  box-shadow: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.door:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.door__label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.door__label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.door h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.18;
  color: var(--text);
  margin: 0 0 12px;
}
.door__desc {
  color: var(--text-muted);
  font-size: 0.97rem;
  line-height: 1.62;
  margin: 0 0 20px;
}
.door__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--gold-text);
  line-height: 1;
  margin-bottom: 6px;
}
.door__price small {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0;
}
.door__meta {
  font-size: 0.85rem;
  color: var(--text-soft);
  margin-bottom: 22px;
}
.door ul {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.door ul li {
  position: relative;
  padding-left: 22px;
  font-size: 0.92rem;
  color: var(--text-body);
  line-height: 1.5;
}
.door ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--gold-text);
  font-weight: 700;
}
.door .door__cta {
  margin-top: auto;
}
@media (max-width: 860px) {
  .hero-doors { grid-template-columns: 1fr; gap: 16px; }
  .door { padding: 26px 22px 24px; }
}

/* The laptop "stand" base is intentionally wider than its frame (112%) for the
   desktop look. On phones that overhang widens the layout viewport and makes
   the browser zoom the whole page out, so pull it in at narrow widths. */
@media (max-width: 700px) {
  .device-laptop { overflow: hidden; }
  .device-laptop__base { width: 100%; }
}

/* ── EDITORIAL MINIMAL: quieter surfaces ──────────────────────────
   Cards earn attention through space and type, not borders and shadow. */
.card { box-shadow: none; }
.card:hover { box-shadow: var(--shadow-sm); }
.section-header p { font-size: 1.05rem; max-width: 56ch; }
.faq-item { border-radius: 0; }
.kpi-item { background: transparent; padding: 0; }
.kpi-row { gap: 40px; }

/* Decorative hero layers must never widen the layout viewport. */
.hero-v3__grid { max-width: 100%; }
input, textarea, select { max-width: 100%; }

/* ── Overflow hardening (found via Playwright device emulation) ──────
   1. .feature-list li is a flex row; inline links inside the prose became
      flex items on a single unwrappable line and overflowed on phones.
   2. .grid-2-1 collapses at the existing breakpoint, but its grid items
      keep an auto min-width, so a wide child (the contact form) still
      forced the column past the viewport. */
.feature-list li { flex-wrap: wrap; min-width: 0; }
.feature-list li > * { min-width: 0; }
.grid-2-1 > *, .grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
@media (max-width: 620px) {
  .grid-2-1, .grid-2 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   V5 THEME — richer gold, more visual pull
   Appended as an override block rather than edits scattered through the
   file above, so the whole refresh is reviewable in one place and can be
   compared against v4 by diffing this block alone.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --gold-grad: linear-gradient(135deg, #E8C55F 0%, #D4AF37 45%, #B8901F 100%);
  --shadow-gold: 0 6px 22px rgba(212, 175, 55, 0.34);
}

::selection { background: var(--gold-tint); color: var(--text); }

/* Primary CTA: flat gold → metallic gradient with a real shadow. The one
   element on every page that should visibly ask to be pressed. */
.btn-primary,
.btn {
  background: var(--gold-grad);
  border-color: #C9A22F;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.22);
}
.btn-primary:hover,
.btn:hover {
  background: var(--gold-grad);
  filter: brightness(1.07);
  border-color: #C9A22F;
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}
.btn-outline:hover {
  background: var(--gold-grad);
  border-color: #C9A22F;
}

/* Section headers get a short gold bar under the title — a repeating
   visual beat that pulls the eye down the page. */
.section-header h2::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 99px;
  background: var(--gold-grad);
  margin: 16px auto 0;
}

/* Eyebrow: dot → small gradient bar. */
.eyebrow::before,
.section-label::before {
  width: 14px;
  height: 4px;
  border-radius: 99px;
  background: var(--gold-grad);
}

/* Bold emphasis inside display headings: solid dark gold → metallic
   gradient text. Restrained two-stop darks so it reads as ink, not glitter. */
h1 em, .display-xl em, .gradient-text {
  background: linear-gradient(105deg, #8A6508 0%, #C9922A 55%, #7A5A05 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-deep); /* fallback for non-webkit */
}

/* Hero ambience: the v4 washes were under 6% opacity — barely there.
   Double them and add a gold hairline along the top edge. Body text sits
   on the solid --bg beneath, so contrast is unaffected. */
.hero-home {
  background:
    linear-gradient(180deg, rgba(212, 175, 55, 0.35), transparent 3px) top/100% 3px no-repeat,
    radial-gradient(900px 600px at 8% -10%, rgba(212, 175, 55, 0.11) 0%, transparent 60%),
    radial-gradient(800px 600px at 110% 110%, rgba(212, 175, 55, 0.12) 0%, transparent 55%),
    var(--bg);
}
.hero-v3__glow { opacity: 0.8; }

/* Cards answer the cursor with gold instead of gray. */
.card:hover {
  border-color: var(--gold-border);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.16);
}
.card-gold { border-width: 2px; }

/* Dark sections get a gold top edge so the navy bands feel deliberate. */
.section--dark {
  border-top: 2px solid var(--gold);
}

/* Footer CTA-adjacent links pick up gold on hover (was plain darkening). */
.nav-link:hover,
.nav-links a:hover { color: var(--gold-deep); }

/* Keyboard focus matches the brand instead of browser default blue. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}