/* ===================================================================
   VOLTA SOVEREIGN — style.css
   -------------------------------------------------------------------
   TABLE OF CONTENTS
     1.  Design tokens
     2.  Base & reset
     3.  Utilities (grain, reveal, focus)
     4.  Navigation
     5.  Mobile menu
     6.  Hero & hero banner
     7.  Buttons
     8.  Section shells & typography
     9.  Problem grid
    10.  Trust / encryption visuals
    11.  Product showcase
    12.  Component grid
    13.  Lifestyle blocks
    14.  Founder
    15.  Guarantees
    16.  FAQ
    17.  Acquisition / boardroom
    18.  Pricing grid (IT services)
    19.  Tier grid (homepage acquisition)
    20.  Pricing — hourly add-on
    21.  Contact section & forms
    22.  Tax benefits
    23.  AI services — process steps
    24.  Footer
    25.  Responsive tightening (global)
   =================================================================== */


/* ===================================================================
   1. DESIGN TOKENS
   =================================================================== */
/* Color tokens (--black, --black-2, --black-3, --cream, --cream-dim,
   --gray, --gold, --gold-dim, --line) and --font-display now live in
   aurum.css, which every page loads immediately after this file —
   aurum.css is the site's active skin, not an optional add-on, so
   this file is not meant to render correctly standalone. Kept here:
   the non-color layout tokens and the two fonts aurum.css leaves
   unchanged. */
:root {
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --max-width: 1400px;
  --narrow-width: 860px;
}


/* ===================================================================
   2. BASE & RESET
   =================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* ===================================================================
   3. UTILITIES
   =================================================================== */

/* subtle film-grain texture overlay for premium feel */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

/* keyboard focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}


/* ===================================================================
   4. NAVIGATION
   =================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  background: linear-gradient(to bottom, rgba(10,10,11,0.9), transparent);
  transition: background 0.4s ease, padding 0.4s ease;
}
.nav.scrolled {
  background: rgba(10, 10, 11, 0.92);
  backdrop-filter: blur(12px);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-mark {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 500;
}
.nav-mark span { color: var(--gold); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-links a {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--cream-dim);
  transition: color 0.25s ease;
}
.nav-links a:hover { color: var(--cream); }

/* Desktop-only grouping (IT Services / AI Services under "Services",
   The Device / Inside under "Product"). CSS-only hover reveal for
   mouse users, plus a real click/keyboard toggle (script.js) so it's
   reachable without a mouse and closes on Escape or an outside click. */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--cream-dim);
  cursor: pointer;
  transition: color 0.25s ease;
}
.nav-dropdown-trigger:hover,
.nav-dropdown.is-open .nav-dropdown-trigger { color: var(--cream); }
.nav-dropdown-caret {
  display: inline-block;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform 0.2s ease;
}
.nav-dropdown.is-open .nav-dropdown-caret { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translate(-50%, -6px);
  min-width: 168px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 10;
}
.nav-dropdown-menu a {
  padding: 9px 12px;
  border-radius: 3px;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--black-3); }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav-cta {
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 10px 22px;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  transition: all 0.3s ease;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--gold); color: var(--black); }

.lang-toggle {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.lang-btn {
  background: none;
  border: none;
  color: var(--cream-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 7px 13px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.lang-btn.is-active {
  background: var(--gold);
  color: var(--black);
}
.lang-btn:not(.is-active):hover { color: var(--cream); }

/* Lowered from 1200px to 1150px: grouping "The Device"/"Inside" under a
   second "Product" dropdown (alongside the existing "Services"
   dropdown) freed up enough width that .nav-links stops wrapping much
   earlier. Confirmed in a real browser at each width, checking two
   things, not just "does it wrap": .nav-links' box height (single-line
   from ~1050px down), AND the actual gap between the last item
   ("Assistant") and the language toggle next to it — at 1050-1100px
   that gap measured 0-4px, items touching or nearly touching despite
   technically not wrapping. 1150px is the first width with a genuinely
   comfortable gap (~21px). The previous 1200px threshold meant real,
   common laptop-window widths fell into the hamburger fallback more
   often than necessary — a real cost, since a visitor who doesn't
   expect a hamburger on what they consider a desktop browser can read
   a tucked-away item as having been removed entirely. Below 1150px,
   still falls back to the hamburger menu, which was already confirmed
   fine. */
@media (max-width: 1150px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-inner {
    padding-right: 20px;
    gap: 12px;
  }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--cream);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 1150px) {
  .nav-toggle { display: flex; }
}

@media (max-width: 480px) {
  .nav-inner { padding: 0 16px; }
  .nav-mark { font-size: 11px; }
  .lang-btn { padding: 6px 10px; font-size: 11px; }
}


/* ===================================================================
   5. MOBILE MENU
   =================================================================== */
.mobile-menu {
  display: none;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(10, 10, 11, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
/* Was a hardcoded 480px, sized for a shorter list of items than the menu
   now has (Why, The Device, Inside, Founder, FAQ, Acquisition, IT
   Services, AI Services, Partners, Assistant — 10 items at ~56px each,
   well over 480px). overflow:hidden meant the excess was silently
   clipped rather than scrollable, so the last item(s) — Assistant among
   them — were fully invisible and unreachable on real phone screens,
   confirmed by a user screenshot. Fixed with a viewport-relative cap
   (so it can never exceed the visible screen regardless of how many
   items get added later) plus its own internal scroll for when the
   list is taller than that. 100dvh (falls back to 100vh where
   unsupported) accounts for mobile browser chrome so the cap reflects
   the actual visible height, not a taller nominal viewport. */
.mobile-menu.is-open {
  max-height: calc(100vh - 90px);
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu a {
  padding: 16px 32px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--cream-dim);
  border-top: 1px solid var(--line);
  transition: color 0.2s ease;
}
.mobile-menu a:first-child { border-top: none; }
.mobile-menu a:hover { color: var(--cream); }

@media (max-width: 1150px) {
  .mobile-menu { display: flex; }
}


/* ===================================================================
   6. HERO & HERO BANNER
   =================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 140px 32px 80px;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0.55) 0%, rgba(10,10,11,0.75) 55%, rgba(10,10,11,0.98) 100%);
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.5;
  transform: scale(1.05);
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 780px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}
.hero-sub {
  font-size: 1.15rem;
  color: var(--cream-dim);
  max-width: 560px;
  margin-bottom: 44px;
}
.hero-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-banner {
  position: relative;
  z-index: 1;
  background: var(--black, #0a0a0b);
  padding: 96px 32px 20px;
  text-align: center;
}
.hero-banner-text {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.5;
}
@media (min-width: 640px) {
  .hero-banner-text { font-size: 17px; }
}
.hero-banner-tiers {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.hero-banner-tier-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  padding: 11px 24px;
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}
.hero-banner-tier-btn:hover {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}
@media (max-width: 480px) {
  .hero-banner-tiers { gap: 10px; }
  .hero-banner-tier-btn { padding: 10px 18px; font-size: 11px; }
}

.scroll-cue {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 1px;
  height: 50px;
  background: rgba(232,230,225,0.2);
  overflow: hidden;
}
.scroll-cue span {
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--gold);
  animation: scrollDown 2.2s ease-in-out infinite;
}
@keyframes scrollDown {
  0% { top: -50%; }
  100% { top: 100%; }
}


/* ===================================================================
   7. BUTTONS
   =================================================================== */
.btn-primary {
  display: inline-block;
  background: var(--gold);
  color: var(--black);
  padding: 16px 34px;
  font-size: 14px;
  letter-spacing: 0.03em;
  font-weight: 500;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(201, 169, 97, 0.25);
}
.btn-ghost {
  display: inline-block;
  padding: 16px 34px;
  font-size: 14px;
  letter-spacing: 0.03em;
  border: 1px solid rgba(232,230,225,0.25);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.btn-ghost:hover { border-color: var(--cream); }

.btn-form {
  border: none;
  cursor: pointer;
  margin-top: 8px;
  align-self: flex-start;
}
@media (max-width: 600px) {
  .btn-form { align-self: stretch; text-align: center; }
}


/* ===================================================================
   8. SECTION SHELLS & TYPOGRAPHY
   =================================================================== */
.section {
  padding: 130px 32px;
  position: relative;
}
.section-dark { background: var(--black); }
.section-darker { background: var(--black-2); }
.section-light { background: var(--black); }
.section-contact { background: var(--black-2); border-top: 1px solid var(--line); }

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.narrow { max-width: var(--narrow-width); margin-left: auto; margin-right: auto; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 2px 12px rgba(0,0,0,0.55);
}
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin-bottom: 26px;
}
.lede {
  font-size: 1.08rem;
  color: var(--cream-dim);
  max-width: 680px;
}
.center .lede { margin-left: auto; margin-right: auto; }
.lede-small {
  font-size: 0.92rem;
  color: var(--gray);
  margin-top: 18px;
}


/* ===================================================================
   9. PROBLEM GRID
   =================================================================== */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  margin-top: 70px;
}
.problem-item {
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.problem-no {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.problem-item p {
  color: var(--cream-dim);
  font-size: 0.98rem;
}

@media (max-width: 800px) {
  .problem-grid { grid-template-columns: 1fr; gap: 36px; }
}


/* ===================================================================
   10. TRUST / ENCRYPTION VISUALS
   =================================================================== */
.trust-visual {
  max-width: 420px;
  margin: 90px auto 0;
  text-align: center;
}
.trust-visual img { border-radius: 4px; }
.trust-caption {
  margin-top: 28px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--cream-dim);
}

.encryption-visual {
  max-width: 900px;
  margin: 80px auto 0;
  overflow: hidden;
  border-radius: 4px;
}
.encryption-visual img {
  width: 100%;
  object-fit: cover;
  max-height: 420px;
}


/* ===================================================================
   11. PRODUCT SHOWCASE
   =================================================================== */
.product-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 70px;
}
.product-shot img {
  border-radius: 4px;
  margin-bottom: 20px;
}
.shot-caption {
  font-size: 0.9rem;
  color: var(--gray);
  max-width: 480px;
}

@media (max-width: 800px) {
  .product-showcase { grid-template-columns: 1fr; }
}


/* ===================================================================
   12. COMPONENT GRID
   =================================================================== */
.component-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 70px;
  background: var(--black-3);
}
.component-card {
  background: var(--black-2);
  padding: 28px 24px 30px;
  transition: background 0.3s ease;
}
.component-card:hover { background: var(--black-3); }
.component-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 18px;
}
.component-card figcaption span {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 6px;
}
.component-card figcaption {
  font-size: 0.84rem;
  color: var(--gray);
  line-height: 1.5;
}
.component-card.closing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.component-card.closing p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--cream-dim);
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .component-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .component-grid { grid-template-columns: 1fr; }
}

#fiscal .btn-ghost {
  margin-top: 2rem;
  display: inline-block; /* if it isn't already */
}

/* ===================================================================
   13. LIFESTYLE BLOCKS
   =================================================================== */
.lifestyle-block {
  max-width: var(--max-width);
  margin: 0 auto 100px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
}
.lifestyle-block:last-child { margin-bottom: 0; }
.lifestyle-block.reverse { grid-template-columns: 1fr 1.3fr; }
.lifestyle-block.reverse img { order: 2; }
.lifestyle-block.reverse .lifestyle-text { order: 1; }
.lifestyle-block img { border-radius: 4px; }
.lifestyle-text .lede { max-width: none; }

@media (max-width: 900px) {
  .lifestyle-block,
  .lifestyle-block.reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .lifestyle-block.reverse img,
  .lifestyle-block.reverse .lifestyle-text { order: unset; }
}


/* ===================================================================
   14. FOUNDER
   =================================================================== */
.founder-block {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 70px;
  align-items: center;
}
.founder-img {
  border-radius: 4px;
  filter: grayscale(0.15);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 15%;
}
.founder-text .lede { max-width: none; }

@media (max-width: 900px) {
  .founder-block { grid-template-columns: 1fr; gap: 36px; }
}


/* ===================================================================
   15. GUARANTEES
   =================================================================== */
.guarantee-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 64px;
  text-align: left;
}
.guarantee-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.guarantee-item p { color: var(--cream-dim); font-size: 0.96rem; }

@media (max-width: 800px) {
  .guarantee-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .guarantee-grid { grid-template-columns: 1fr; }
}


/* ===================================================================
   16. FAQ
   =================================================================== */
.faq-list {
  max-width: 760px;
  margin: 56px auto 0;
  text-align: left;
}
.faq-item {
  padding: 28px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.faq-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.faq-item h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
  font-weight: 500;
}
.faq-item p {
  color: var(--cream-dim);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}


/* ===================================================================
   17. ACQUISITION / BOARDROOM
   =================================================================== */
.boardroom-visual {
  max-width: 1100px;
  margin: 0 auto 80px;
  border-radius: 4px;
  overflow: hidden;
}
.boardroom-visual img { width: 100%; object-fit: cover; max-height: 480px; }

#acquisition .section-title {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  color: var(--gold);
}

/* Same --gray on --black-2 issue, acquisition section's secondary copy
   (~3.47:1). Scoped via #acquisition since .section-darker is shared with
   #interieur, which isn't part of this fix. */
#acquisition .lede-small { color: var(--cream-dim); }


/* ===================================================================
   18. PRICING GRID (/it services page)
   =================================================================== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 70px;
  background: var(--black-3);
  text-align: left;
}
.pricing-card {
  background: var(--black-2);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  transition: background 0.3s ease;
}
.pricing-card:hover { background: var(--black-3); }
.pricing-tier {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.pricing-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 16px;
}
.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 18px;
}
.pricing-amount {
  font-family: var(--font-display);
  font-size: 2.1rem;
  color: var(--gold);
}
.pricing-period {
  font-size: 0.88rem;
  color: var(--gray);
}
.pricing-audience {
  font-size: 0.92rem;
  color: var(--cream-dim);
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.pricing-includes {
  font-style: italic;
  font-size: 0.86rem;
  color: var(--gray);
  margin-bottom: 14px;
}
.pricing-group {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin: 20px 0 10px;
}
.pricing-group:first-of-type { margin-top: 0; }
.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pricing-features li {
  font-size: 0.9rem;
  color: var(--cream-dim);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}
.pricing-features li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold-dim);
}
.pricing-features a { color: var(--gold); border-bottom: 1px solid var(--gold-dim); }
.pricing-features a:hover { border-color: var(--gold); }
.pricing-deliverable {
  margin-top: auto;
  padding-top: 26px;
  font-size: 0.86rem;
  color: var(--gray);
}
.pricing-deliverable strong { color: var(--cream-dim); font-weight: 500; }

@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns: 1fr; }
}


/* ===================================================================
   19. TIER GRID (homepage #acquisition — Confidant / Regent / Sovereign)
   Deliberately simpler than .pricing-grid (no feature bullet lists —
   each tier links out to its own dedicated page for detail), but
   reuses the same background/hover/border language so it reads as
   the same design system, not a bolted-on new component.
   =================================================================== */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 70px auto 0;
  background: var(--black-3);
  text-align: left;
}
/* Match the tier-link buttons to the acquisition headline color: gold
   border and gold text at rest, gold fill with black text on hover —
   the same language already used by .nav-cta and .hero-banner-tier-btn,
   so this reads as the site's existing gold-CTA pattern rather than a
   new one. Scoped to #acquisition so .btn-ghost on other pages
   (homepage hero "Discover the philosophy", FAQ/tax section ghost
   buttons) keeps its neutral treatment. */
#acquisition .tier-link {
  border-color: var(--gold-dim);
  color: var(--gold);
}
#acquisition .tier-link:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}
.tier-card {
  background: var(--black-2);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  transition: background 0.3s ease;
}
.tier-card:hover { background: var(--black-3); }
.tier-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--cream);
  margin-bottom: 10px;
}
.tier-price {
  display: block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--gold);
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.tier-desc {
  color: var(--cream-dim);
  font-size: 0.96rem;
  line-height: 1.6;
  margin-bottom: 28px;
  flex-grow: 1;
}
.tier-link {
  align-self: flex-start;
  padding: 12px 26px;
  font-size: 13px;
}

@media (max-width: 1100px) {
  .tier-grid { grid-template-columns: 1fr; }
}


/* ===================================================================
   20. PRICING — HOURLY ADD-ON
   =================================================================== */
.pricing-hourly {
  max-width: var(--narrow-width);
  margin: 56px auto 0;
  padding: 32px 36px;
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 24px;
  justify-content: space-between;
  text-align: left;
}
.pricing-hourly-heading { flex: 1 1 220px; }
.pricing-hourly-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-bottom: 4px;
}
.pricing-hourly-rate {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--gold);
  white-space: nowrap;
}
.pricing-hourly-text {
  flex-basis: 100%;
  color: var(--cream-dim);
  font-size: 0.92rem;
}

@media (max-width: 600px) {
  .pricing-hourly { padding: 26px 24px; }
}


/* ===================================================================
   21. CONTACT SECTION & FORMS
   =================================================================== */

/* -------------------------------------------------------------------
   Alignment: the #contact section reuses .section-inner.narrow.center,
   which sets text-align:center on the whole block. That centering was
   correct when the section was purely an intro, but once the forms and
   reservation block sit underneath it, centering the headline and lede
   while everything below them runs left makes the section read as two
   different layouts stacked on top of each other.

   Every other section on this page with body copy (Why, Product,
   Inside, Founder, Guarantees, FAQ, Acquisition, Tax) shares one left
   reading edge. #contact now does the same: the whole block — eyebrow,
   headline, lede, advisor line, forms, direct-contact links, and the
   reservation block — is left-aligned, and the .center class it still
   carries is neutralized for this section only. The section itself
   stays width-constrained by .narrow and centered on the page, so the
   block still sits in the middle of the viewport; only the text within
   it is left-aligned.
   ------------------------------------------------------------------- */
#contact .section-inner.center { text-align: left; }

#contact .eyebrow,
#contact .section-title,
#contact .lede,
#contact .lede-small,
#contact .contact-form,
#contact .reservation-block,
#contact .reservation-title,
#contact .form-row,
#contact .form-row label,
#contact .form-row-checkbox label,
#contact .form-status {
  text-align: left;
}

/* Direct-contact links (email / LinkedIn) share the same left edge as
   the forms above them. */
#contact .contact-direct {
  justify-content: flex-start;
}

.contact-form {
  margin-top: 56px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-row label {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray);
}
.form-row input,
.form-row select,
.form-row textarea {
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 14px 16px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.98rem;
  transition: border-color 0.25s ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--gold-dim);
}
.form-row textarea { resize: vertical; }

.form-phone-group {
  display: flex;
  gap: 10px;
}
.form-phone-group select {
  flex: 0 0 auto;
  width: 90px;
}
.form-phone-group input {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 480px) {
  .form-phone-group { flex-direction: column; }
  .form-phone-group select { width: 100%; }
}

.form-status {
  font-size: 0.9rem;
  color: var(--gold);
  min-height: 20px;
}

/* Honeypot: kept in normal layout flow (not display:none/visibility:hidden,
   which some bots detect and skip) but moved fully off-screen and out of
   tab order/accessibility tree for real visitors. */
.form-honeypot {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-row-checkbox label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.92rem;
  color: var(--cream-dim);
}
.form-row-checkbox input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.contact-direct {
  margin-top: 48px;
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.94rem;
  color: var(--cream-dim);
}
.contact-direct a {
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.contact-direct a:hover { color: var(--gold); border-color: var(--gold); }

/* Same --gray on --black-2 contrast issue as .reservation-block (fixed in
   dd96eba) — ~3.47:1, fails WCAG AA. Covers the advisor intro line and the
   contact form's own field labels. .section-contact is the real containing
   class for the #contact section (there's no .contact-block); this also
   harmlessly re-matches .reservation-block's already-fixed elements since
   it's nested inside .section-contact too, with no visual change there. */
.section-contact .lede-small,
.section-contact .form-row label {
  color: var(--cream-dim);
}

.reservation-block {
  margin-top: 72px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}
.reservation-title {
  font-size: 1.4rem;
  margin-top: 8px;
  margin-bottom: 12px;
}
/* --gray on --black-2 is ~3.47:1, below WCAG AA (4.5:1) for this section's
   intro copy and field labels — scoped override reuses --cream-dim, already
   the site's established secondary-text color at this contrast level (see
   .lede), rather than touching --gray globally where it still reads fine
   (captions, footer). The lang toggle had the same issue against --black
   (~3.73:1) and is fixed directly on .lang-btn above, since that class
   isn't shared with anything else. */
.reservation-block .lede-small,
.reservation-block .form-row label {
  color: var(--cream-dim);
}


/* ===================================================================
   22. TAX BENEFITS
   Mirrors .guarantee-grid's rhythm (3-up on desktop, stacked on
   mobile) but with a top-border rule per item, like .problem-item —
   reads as a "considerations" list rather than a feature checklist.
   =================================================================== */
.tax-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 40px;
  margin-top: 70px;
  margin-bottom: 70px;
  text-align: left;
}
.tax-item {
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.tax-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.tax-item p {
  color: var(--cream-dim);
  font-size: 0.96rem;
  line-height: 1.6;
}

/* CTA row beneath the disclaimer copy */
.tax-cta {
  margin-top: 40px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

/* --gray on --black is fine, but inside .section-light (which is
   --black here) we want the secondary disclaimer copy a touch
   brighter for readability, consistent with .lede-small elsewhere. */
#tax-benefits .lede-small {
  color: var(--cream-dim);
}

@media (max-width: 900px) {
  .tax-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
}
@media (max-width: 600px) {
  .tax-grid { grid-template-columns: 1fr; gap: 32px; }
  .tax-cta { flex-direction: column; align-items: stretch; }
  .tax-cta .btn-primary,
  .tax-cta .btn-ghost { text-align: center; }
}


/* ===================================================================
   23. AI SERVICES — PROCESS STEPS (replaces a flat tile grid with a
   sequential journey, per the /ai/ page rework)
   =================================================================== */
.step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}
.step-item {
  background: var(--black-2, rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  padding: 28px;
  position: relative;
}
.step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.step-number {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-dim, var(--line));
  border-radius: 999px;
  padding: 5px 14px;
}
.step-icon {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 15px;
  flex-shrink: 0;
}
.step-item h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--cream);
}
@media (max-width: 900px) {
  .step-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .step-grid { grid-template-columns: 1fr; }
}


/* ===================================================================
   24. FOOTER
   =================================================================== */
.footer {
  padding: 50px 32px;
  border-top: 1px solid var(--line);
  background: var(--black);
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-inner p {
  font-size: 0.82rem;
  color: var(--gray);
}
.footer-links {
  display: flex;
  gap: 24px;
  font-size: 0.82rem;
}
.footer-links a {
  color: var(--cream-dim);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.footer-links a:hover { color: var(--gold); border-color: var(--gold); }
/* Second link row under the email / LinkedIn one. */
.support-direct { margin-top: 20px; }


/* ===================================================================
   25. RESPONSIVE TIGHTENING (GLOBAL)
   =================================================================== */
@media (max-width: 700px) {
  .section { padding: 90px 22px; }
  .hero { padding: 120px 22px 60px; }
  .nav-inner { padding: 0 22px; }
  .founder-img { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .hero-img {
    object-fit: contain;
    object-position: center top;
  }
}