/* ==========================================================================
   Self-hosted Outfit variable font (Apr 2026)
   Replaces the render-blocking Google Fonts CDN <link>.
   Variable font serves weights 300-800 from single files.
   ========================================================================== */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Dyve Technology — site styles
   Extracted from dyve-landing-v2.html Phase 1 (April 2026)
   Lift-and-shift. No rewrites. Phase 2+ will refactor as pages mature.
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      /* Nantucket palette — brand-bible.md §8.1 */
      --navy: #151C2A;
      --sail: #FBF9F3;
      --canvas: #EDE7DA;
      --fog: #6A7080;
      --slate: #4A5570;
      --text: var(--navy);

      /* Brass tones.
         --brass        = primary mid-tone (wordmark accent, avatars)
         --brass-bright = high-contrast on Navy (buttons, accents on dark)
         --brass-dark   = text-safe on Sail (body emphasis, links on light) */
      --brass: #C8A96A;
      --brass-bright: #D4AA55;
      --brass-dark: #8A6C28;
      --brass-highlight: #E0B860;       /* slight lift above brass-bright; used as the top stop on brass gradients + brass-button hover states */
      --brass-glow: rgba(212, 170, 85, 0.3);
      --brass-soft: rgba(212, 170, 85, 0.1);

      /* Navy soft — one step above navy. Used as the top stop on navy gradients
         and as the hover darken for solid-navy buttons. */
      --navy-soft: #1d2538;

      --input-bg: #FFFFFF;
      --input-border: rgba(21, 28, 42, 0.12);
      --success: var(--brass-bright);
      --white: #FFFFFF;

      /* ---------- Typography cascade (brand-bible §8.2) ----------
         Outfit font only. Weight cascade: 800 → 700 → 600 → 400.
         Size cascade: H1 36–48 · H2 28–32 · H3 22–24 · body 16 · caption 13
         Reference these tokens wherever a new heading or body rule is written.
      */
      --type-h1: clamp(2.25rem, 5vw, 3rem);      /* 36–48 px */
      --type-h2: clamp(1.75rem, 3.5vw, 2rem);    /* 28–32 px */
      --type-h3: clamp(1.375rem, 2.5vw, 1.5rem); /* 22–24 px */
      --type-body: 1rem;                          /* 16 px (spec floor) */
      --type-body-lg: 1.05rem;                    /* 16.8 px comfortable body */
      --type-caption: 0.82rem;                    /* 13 px */
      --weight-h1: 800;
      --weight-h2: 700;
      --weight-h3: 600;
      --weight-body: 400;
    }

    /* ==========================================================================
       Brass accent utilities (brand-bible.md §8 + refinement pass Apr 2026).

       Principle: one dominant brass moment per section. Brass is signal, not
       ornament. If a section already uses a brass button, skip the hairline.
       ========================================================================== */

    /* Thin horizontal brass rule on navy fields (e.g. under hero wordmark).
       Use as <hr class="brass-hairline"> or apply as utility border. */
    .brass-hairline {
      border: 0;
      height: 1px;
      background: var(--brass-bright);
      opacity: 0.32;
      margin: 0;
    }
    /* Variant for light fields (Sail / Canvas). */
    .brass-hairline--sail {
      background: var(--brass-dark);
      opacity: 0.22;
    }

    /* 2px brass top strip on cards and panels. Replaces repeated
       ad-hoc `border-top: 2px solid var(--brass-bright)` rules. */
    .brass-accent-top { border-top: 2px solid var(--brass-bright); }
    .brass-accent-top--dark { border-top: 2px solid var(--brass-dark); }

    /* Full-width brass gradient rule that fades at both edges.
       Used as a section divider beneath hero or between page bands. */
    .brass-rule-full {
      border: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--brass-bright), transparent);
      opacity: 0.4;
      margin: 0;
    }

    /* 2px vertical brass bar (identity signal, used in email sigs and
       future collateral). Provided as a utility so it stays consistent. */
    .brass-bar-vertical {
      width: 2px;
      background: var(--brass);
      align-self: stretch;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--sail);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* Paper/cardstock texture overlay — visible on both light and dark sections */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
      opacity: 0.085;
      mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 256px 256px;
    }

    /* ===== HERO (Navy bg, light text) ===== */
    .hero {
      min-height: 72vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(6rem, 12vh, 9rem) clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vh, 5rem);
      position: relative;
      overflow: hidden;
      background: var(--navy);
      color: var(--sail);
    }

    /* .hero::before decorative gradients removed v3.2 \u2014 created a visible seam with wave divider. Clean flat navy now matches the wave. */

    .hero > * { position: relative; z-index: 2; }

    /* Hero-to-body gradient transition */
    .hero::after {
      display: none;
    }

    .hero-canvas {
      position: absolute;
      inset: 0;
      z-index: 0;
      mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    }

    /* === NAVBAR (matches source of truth: 56px, navy, gold accent line) === */
    .site-nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      height: 56px;
      background: var(--navy);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      border-bottom: 1px solid var(--brass-bright);
    }
    .wordmark {
      font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      color: var(--sail);
      line-height: 1;
      text-decoration: none;
      display: block;
    }
    .wordmark .dyve-name { font-weight: 800; font-size: 1.5rem; letter-spacing: 0.02em; }
    .wordmark .dyve-dot { color: var(--brass-bright); font-weight: 800; }
    .wordmark .dyve-tech { display: block; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.04em; margin-top: 3px; margin-left: 0px; color: var(--brass-bright) !important; }
    .nav-links {
      display: flex;
      gap: 2rem;
      align-items: center;
    }
    .nav-links a {
      position: relative;
      font-family: 'Outfit', sans-serif;
      font-weight: 400;
      font-size: 0.875rem;
      color: rgba(251, 249, 243, 0.6);
      text-decoration: none;
      transition: color 0.2s ease;
      padding-bottom: 4px;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -2px;
      height: 2px;
      background: var(--brass-bright);
      border-radius: 1px;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .nav-links a:hover { color: var(--sail); }
    .nav-links a:hover::after,
    .nav-links a:focus-visible::after { transform: scaleX(1); }

    /* Single-column editorial hero (v3 Apple-inspired) */
    .hero-content {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 1.5rem;
    }

    .hero-narrative {
      max-width: 820px;
      width: 100%;
    }

    .hero h1 {
      font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-weight: var(--weight-h1);
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      line-height: 1.08;
      letter-spacing: -0.02em;
      color: var(--sail);
      margin-bottom: 2rem;
    }

    .hero h1 .word {
      display: inline-block;
      opacity: 0;
      transform: translateY(10px);
      animation: word-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    @keyframes word-in { to { opacity: 1; transform: translateY(0); } }

    .hero h1 .highlight {
      color: var(--brass-bright);
      text-shadow: 0 0 30px rgba(212, 170, 85, 0.15);
    }

    .hero .subtitle {
      font-size: clamp(1.1rem, 2.2vw, 1.35rem);
      color: rgba(237, 231, 218, 0.78);
      line-height: 1.65;
      max-width: 680px;
      margin: 0 auto 2.5rem;
      opacity: 0;
      animation: fade-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
    }

    /* Hero action buttons (Apple-style soft pills) */
    .hero-actions {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      margin-bottom: 2rem;
      opacity: 0;
      animation: fade-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
    }
    @media (max-width: 520px) {
      .hero-actions { flex-direction: column; gap: 0.85rem; }
    }

    .hero-action-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      font-family: 'Outfit', sans-serif;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: var(--navy);
      background: var(--brass-bright);
      padding: 0.9rem 1.75rem;
      border-radius: 999px;
      text-decoration: none;
      box-shadow: 0 2px 10px rgba(212, 170, 85, 0.25);
      transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, box-shadow 0.25s ease, gap 0.2s ease;
    }
    .hero-action-primary svg {
      width: 16px;
      height: 16px;
      transition: transform 0.2s ease;
    }
    .hero-action-primary:hover {
      background: var(--brass-highlight);
      transform: translateY(-2px);
      box-shadow: 0 4px 18px rgba(212, 170, 85, 0.35);
      gap: 0.75rem;
    }
    .hero-action-primary:hover svg {
      transform: translateX(3px);
    }

    .hero-action-secondary {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-family: 'Outfit', sans-serif;
      font-size: 0.98rem;
      font-weight: 500;
      letter-spacing: 0.01em;
      color: rgba(237, 231, 218, 0.85);
      padding: 0.9rem 1.5rem;
      border: 1px solid rgba(237, 231, 218, 0.45);
      border-radius: 999px;
      text-decoration: none;
      transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, gap 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .hero-action-secondary svg {
      width: 15px;
      height: 15px;
      transition: transform 0.2s ease;
    }
    .hero-action-secondary:hover {
      color: var(--sail);
      border-color: rgba(237, 231, 218, 0.5);
      background: rgba(237, 231, 218, 0.06);
      transform: translateY(-2px);
      gap: 0.6rem;
    }
    .hero-action-secondary:hover svg {
      transform: translateX(2px);
    }

    /* Hero tagline (below CTAs) */
    .hero .hero-tagline {
      font-family: 'Outfit', sans-serif;
      font-size: 0.92rem;
      font-weight: 400;
      font-style: italic;
      color: rgba(212, 170, 85, 0.75);
      letter-spacing: 0.02em;
      margin: 0;
      opacity: 0;
      animation: fade-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.5s forwards;
    }

    /* Legacy ".cta-tier*" and ".offer-tier*" (pre-Phase 2B hero CTA tiers +
       pre-Phase 2B offer rows) retired — current hero uses .hero-action-primary
       / .hero-action-secondary pill buttons, and the offer band uses .service
       / .service--featured. Verified 0 HTML references before removal. */

    /* Legacy ".email-form" (pre-contact-modal email-capture form) retired —
       current forms use .contact-form / .cf-row / .cf-field. Verified 0 HTML
       references before removal. */

    .hero-cta-btn {
      width: 100%;
      padding: 0.95rem 1.5rem;
      font-family: 'Outfit', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      background: linear-gradient(180deg, var(--brass-highlight) 0%, var(--brass-bright) 100%);
      color: var(--navy);
      border: none;
      border-radius: 10px;
      cursor: pointer;
      min-height: 52px;
      box-shadow:
        0 1px 2px rgba(21, 28, 42, 0.1),
        0 4px 12px rgba(212, 170, 85, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.2s ease;
      margin-bottom: 0.5rem;
    }
    .hero-cta-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 4px rgba(21, 28, 42, 0.12), 0 8px 20px rgba(212, 170, 85, 0.3);
      background: linear-gradient(180deg, var(--navy-soft) 0%, var(--navy) 100%);
      color: var(--sail);
    }
    /* ".email-form button" + ".spots-left" retired alongside .email-form
       and the pre-Phase 2B "spots left" scarcity pattern. */

    .form-consent {
      font-size: 0.78rem;
      color: var(--slate);
      margin-top: 0.5rem;
      line-height: 1.5;
    }
    .form-consent a { color: var(--slate); text-decoration: underline; }
    .form-consent a:hover { color: var(--navy); }

    .form-success { display: none; text-align: center; padding: 2rem 1.5rem; }
    .form-success.visible { display: block; }

    .form-success .checkmark {
      width: 56px; height: 56px; border-radius: 50%;
      background: var(--navy);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1.25rem;
      animation: pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    @keyframes pop-in { 0% { transform: scale(0); } 100% { transform: scale(1); } }

    .form-success .checkmark svg { width: 26px; height: 26px; stroke: var(--brass-bright); stroke-width: 2.5; fill: none; }
    .form-success .checkmark svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw-check 0.4s ease-out 0.2s forwards; }
    @keyframes draw-check { to { stroke-dashoffset: 0; } }

    .form-success .success-headline { font-family: 'Outfit', sans-serif; font-size: 1.2rem; color: var(--navy); font-weight: 700; margin-bottom: 0.5rem; letter-spacing: -0.01em; }
    .form-success .sub { font-size: 0.88rem; color: var(--slate); font-weight: 400; line-height: 1.6; max-width: 340px; margin: 0 auto; }
    .form-success .success-tagline { font-family: 'Outfit', sans-serif; font-size: 0.78rem; color: var(--brass-bright); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 1.5rem; margin-bottom: 0; }
    .form-success .success-linkedin { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding: 0.55rem 1.25rem; border-radius: 8px; background: var(--navy); color: var(--sail); font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: opacity 0.2s ease; letter-spacing: 0.01em; }
    .form-success .success-linkedin:hover { opacity: 0.85; }

    /* Inline error state on the contact form. Triggered when fetch times out
       or fails at the network level. Sits above the submit button; the button
       restyles to "Try again" so resubmission works. Server 4xx/5xx still
       opaque-succeed under no-cors; closing that gap needs CORS headers on
       the Apps Script side. */
    .form-error-inline {
      margin: 0.75rem 0 0.25rem;
      padding: 0.85rem 1rem;
      background: rgba(138, 108, 40, 0.08);
      border: 1px solid rgba(138, 108, 40, 0.28);
      border-left: 3px solid var(--brass-dark);
      border-radius: 10px;
    }
    .form-error-inline .form-error-text {
      margin: 0;
      font-size: 0.9rem;
      line-height: 1.55;
      color: var(--text);
    }
    .form-error-inline .form-error-text strong { color: var(--brass-dark); font-weight: 700; }
    .form-error-inline .form-error-text a {
      color: var(--brass-dark);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .form-error-inline .form-error-text a:hover { color: var(--navy); }

    /* ".section-accent" retired — wave dividers handle section transitions now. */




    /* ===== PAIN POINTS ===== */
    /* ===== THE MATH (auto-counting on reveal) ===== */
    .math-section {
      background: var(--sail);
      padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem);
    }

    .math-inner {
      max-width: 1100px;
      margin: 0 auto;
      text-align: center;
    }

    .math-eyebrow {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brass-dark);
      margin-bottom: 0.75rem;
    }

    .math-heading {
      font-family: 'Outfit', sans-serif;
      font-weight: var(--weight-h2);
      font-size: var(--type-h2);
      line-height: 1.2;
      letter-spacing: -0.02em;
      color: var(--text);
      margin-bottom: 2.5rem;
    }

    .math-row {
      margin-bottom: 2rem;
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .math-row.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .math-num {
      font-family: 'Outfit', sans-serif;
      font-weight: 800;
      font-size: clamp(3rem, 8vw, 5rem);
      line-height: 1;
      color: var(--text);
      letter-spacing: -0.02em;
    }

    .math-num .unit {
      font-size: 0.5em;
      font-weight: 600;
      color: var(--fog);
      letter-spacing: 0;
    }

    .math-label {
      font-size: clamp(0.95rem, 2vw, 1.15rem);
      color: var(--fog);
      margin-top: 0.25rem;
    }

    /* Pivot line between the "cost of doing nothing" rows and the $7,500
       answer row. Small italic brass accent so the transition reads as a
       narrative beat rather than an abrupt jump to the price. */
    .math-pivot {
      font-family: 'Outfit', sans-serif;
      font-style: italic;
      font-size: clamp(0.95rem, 1.8vw, 1.05rem);
      color: var(--brass-dark);
      letter-spacing: 0.01em;
      margin: 2.25rem auto 0;
      max-width: 540px;
    }

    .math-row.math-answer {
      margin-top: 0.75rem;
      padding-top: 1.5rem;
      border-top: 2px solid rgba(200, 169, 106, 0.2);
    }

    .math-row.math-answer .math-num {
      color: var(--brass-dark);
    }

    .math-row.math-answer .math-label {
      font-weight: 600;
      color: var(--text);
    }

    .pain-points {
      background: var(--sail);
      padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem);
      position: relative;
      overflow: hidden;
    }

    .pain-points::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 10%, rgba(200, 169, 106, 0.15) 50%, transparent 90%);
    }

    .pain-points::after {
      display: none;
    }

    .pain-points-inner { max-width: 1100px; margin: 0 auto; }

    .pain-heading {
      font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-weight: var(--weight-h2);
      font-size: var(--type-h2);
      letter-spacing: -0.02em;
      margin-bottom: 2rem;
      color: var(--text);
      line-height: 1.2;
    }

    .pain-heading em {
      font-style: normal;
      color: var(--brass-dark);
    }

    /* .pain-quote rules retired Apr 2026 — class is not in any shipping HTML
       (iMessage bubble direction was killed in Phase 1.5). */

    /* Decorative opening quote mark */
    .pain-points-inner::before {
      display: none;
    }

    .pain-points-inner { position: relative; }

    /* ===== HATZ BRANDING ===== */
    .hatz-label {
      font-family: 'Outfit', sans-serif;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brass-dark);
      margin-bottom: 0.75rem;
    }

    .hatz-brand {
      color: var(--brass-dark);
      font-weight: 700;
    }

    /* In dark sections, use bright gold (passes 7.86:1 on navy) */
    .offer-band .hatz-brand,
    .offer-band .hatz-label,
    .hero .hatz-brand,
    .cta-card .hatz-brand,
    .site-footer .hatz-brand { color: var(--brass-bright); }

    /* Inside the light sail card (accordion body, price block), keep dark brass even though parent is offer-band */
    .service-featured-includes .hatz-brand,
    .service-featured-content .hatz-brand { color: var(--brass-dark); }

    .platform-intro h2 .hatz-brand {
      color: var(--brass-dark);
      font-weight: 800;
    }

    /* ===== HATZ / PLATFORM ===== */
    .platform {
      background: var(--sail);
      padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem);
      position: relative;
    }

    .platform + .platform {
      border-top: 1px solid rgba(200, 169, 106, 0.32);
    }

    /* Decorative dot divider between sections */
    .platform::before {
      display: none;
    }

    .platform-inner {
      max-width: 1100px;
      margin: 0 auto;
    }

    .platform-top {
      display: grid;
      grid-template-columns: 1fr clamp(360px, 40%, 520px);
      grid-template-areas:
        "intro illustration"
        "stats stats";
      gap: clamp(1.5rem, 2.5vw, 2.5rem);
      margin-bottom: 3rem;
      align-items: end;
    }
    .platform-intro { grid-area: intro; }
    .platform-stats { grid-area: stats; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
    .hatz-illustration {
      grid-area: illustration;
      align-self: end;
      justify-self: end;
      /* Drop slightly past intro's bottom so it visually overlaps into
         the stats area, like a magazine illustration bleeding past
         the column rule. Stats has its own margin-top to absorb. */
      margin-bottom: clamp(-80px, -6vw, -40px);
    }
    @media (max-width: 900px) {
      .platform-top {
        grid-template-columns: 1fr;
        grid-template-areas:
          "intro"
          "illustration"
          "stats";
        gap: 1.5rem;
        align-items: stretch;
      }
      .hatz-illustration {
        align-self: center;
        justify-self: center;
        margin-bottom: 0;
      }
    }

    .platform-intro h2 {
      font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-weight: var(--weight-h2);
      font-size: var(--type-h2);
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin-bottom: 1rem;
    }

    .platform-intro p {
      font-size: var(--type-body);
      color: var(--slate);
      line-height: 1.75;
      margin-bottom: 1rem;
    }

    .platform-intro p:last-child {
      margin-bottom: 0;
    }

    .platform-intro strong {
      color: var(--text);
      font-weight: 600;
    }

    .platform-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      align-content: center;
    }

    /* Hero stat — 58+ spans full width */
    .stat:first-child {
      grid-column: 1 / -1;
      background: var(--white);
      border-left: 3px solid var(--brass-bright);
    }

    .stat:first-child .num {
      font-size: 2.8rem;
      color: var(--navy);
    }

    .stat {
      padding: 1.1rem;
      background: var(--white);
      border: 1px solid rgba(21, 28, 42, 0.06);
      border-left: 3px solid var(--brass-bright);
      border-radius: 10px;
      box-shadow:
        0 1px 2px rgba(21, 28, 42, 0.04),
        0 4px 12px rgba(21, 28, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .stat.visible { opacity: 1; transform: translateY(0); }

    .stat:hover {
      box-shadow:
        0 2px 4px rgba(21, 28, 42, 0.06),
        0 8px 20px rgba(21, 28, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
      transform: translateY(-1px);
    }

    .stat .num {
      font-family: 'Outfit', sans-serif;
      font-weight: 800;
      font-size: 2rem;
      color: var(--brass-dark);
      line-height: 1;
      margin-bottom: 0.3rem;
    }

    .stat .desc {
      font-size: 0.85rem;
      color: var(--slate);
      line-height: 1.55;
    }

    /* ".how-steps" + ".step" + ".step-num" family retired — the current
       3-step visual uses .process-timeline / .process-step / .process-step-num
       on ai-readiness-assessment.html. Verified 0 HTML references before removal. */

    /* Platform section intro (eyebrow + heading above the workflow demo) */
    .platform-eyebrow {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--brass);
      margin-bottom: 0.75rem;
    }
    .platform-heading {
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: var(--weight-h2);
      color: var(--navy);
      margin-bottom: 2.5rem;
      max-width: 640px;
    }

    /* Workflow example */
    .workflow {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 0;
      padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
      margin-bottom: 2rem;
      position: relative;
      overflow: visible;
      box-shadow: none;
    }

    .workflow::after {
      display: none;
    }

    /* .workflow:hover shadow removed — container has transparent background + no border,
       so the drop shadow on hover materialized a phantom "shadowbox" around empty space.
       Same pattern was killed on .wf-node per the comment below. Keep the parent hover inert. */

    .workflow-label {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--brass-dark);
      margin-bottom: 0.5rem;
    }

    .workflow-schedule {
      font-size: 0.8rem;
      color: var(--fog);
      margin-bottom: 0.75rem;
      font-family: 'Outfit', sans-serif;
    }

    /* Hint line telling the visitor the workflow steps are interactive */
    .workflow-hint {
      font-family: 'Outfit', sans-serif;
      font-style: italic;
      font-size: 0.82rem;
      color: var(--fog);
      margin: 0 0 1.25rem;
      text-align: center;
    }

    .workflow-schedule code {
      background: rgba(212, 170, 85, 0.1);
      color: var(--brass-dark);
      padding: 0.2rem 0.6rem;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 600;
      border: 1px solid rgba(212, 170, 85, 0.15);
    }

    .workflow h3 {
      font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-weight: var(--weight-h3);
      font-size: var(--type-h3);
      margin-bottom: 1.25rem;
      color: var(--text);
    }

    .workflow-steps {
      display: flex;
      align-items: center;
      gap: 0;
      flex-wrap: wrap;
      justify-content: center;
    }

    .wf-node {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.55rem 0.9rem;
      background: var(--white);
      border: 1px solid rgba(200, 169, 106, 0.22);
      border-radius: 10px;
      font-size: 0.8rem;
      color: var(--text);
      font-weight: 500;
      white-space: nowrap;
      cursor: pointer;
      position: relative;
      transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
      user-select: none;
    }

    /* Hover + active share the exact same visual treatment — no lift, no shadow, no box.
       Just a clean brass border + navy text. The transform/shadow combo was creating the
       "shadowbox" feel because the absolute-positioned .wf-step-num badge sits outside
       the node boundary. */
    .wf-node:hover,
    .wf-node.active {
      border-color: var(--brass-bright);
      color: var(--navy);
      z-index: 5;
    }


    /* Popover */
    .wf-popover {
      margin-top: 1rem;
      min-height: 4.5rem;
      opacity: 0;
      transform: translateY(-6px) scale(0.97);
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 10;
      position: relative;
    }

    .wf-popover.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .wf-popover-arrow {
      width: 12px; height: 12px;
      background: rgba(21, 28, 42, 0.06);
      border-top: 1px solid rgba(21, 28, 42, 0.22);
      border-left: 1px solid rgba(21, 28, 42, 0.15);
      transform: rotate(45deg);
      position: absolute;
      top: -7px;
      left: 50%;
      margin-left: -6px;
      z-index: 3;
      /* Slide smoothly between step positions instead of snapping */
      transition: left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    /* Gentle content fade during auto-rotate so text doesn't snap */
    .wf-popover-text {
      transition: opacity 0.2s ease;
    }
    .wf-popover.swapping .wf-popover-text {
      opacity: 0.15;
    }

    .wf-popover-step {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--brass-dark);
      margin-bottom: 0.35rem;
    }

    .wf-popover-text {
      background: rgba(21, 28, 42, 0.05);
      border: 1px solid rgba(21, 28, 42, 0.12);
      border-radius: 10px;
      padding: 1rem 1.25rem;
      font-size: 0.88rem;
      color: var(--text);
      line-height: 1.65;
      box-shadow:
        0 4px 8px rgba(21, 28, 42, 0.04),
        0 12px 32px rgba(21, 28, 42, 0.06);
      max-width: 480px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    .wf-node .wf-icon {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
    }

    .wf-node .wf-icon svg {
      width: 22px;
      height: 22px;
      display: block;
    }

    .wf-arrow {
      color: var(--brass-dark);
      font-size: 1rem;
      padding: 0 0.4rem;
      opacity: 0.6;
    }

    .workflow-caption {
      font-size: 0.8rem;
      color: var(--fog);
      margin-top: 1rem;
      text-align: center;
      line-height: 1.5;
    }

    /* "What else can we build?" icon grid */
    .build-grid-label {
      text-align: center;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--fog);
      margin-top: 2.5rem;
      margin-bottom: 1.25rem;
    }
    .build-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 0.6rem;
      justify-content: center;
      max-width: 580px;
      margin: 0 auto;
    }
    .build-tag {
      padding: 0.4rem 1rem;
      border: 1px solid rgba(200, 169, 106, 0.28);
      border-radius: 2rem;
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--fog);
      background: transparent;
      white-space: nowrap;
    }
    .build-grid-sub {
      text-align: center;
      margin-top: 1.25rem;
      font-size: 0.88rem;
      color: var(--fog);
      line-height: 1.6;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Integration logos strip */
    .integrations {
      overflow: hidden;
      margin-bottom: 2.5rem;
      padding: 0.75rem 0;
      position: relative;
    }

    .integrations::before,
    .integrations::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0; width: 50px;
      z-index: 1;
    }
    .integrations::before { left: 0; background: linear-gradient(90deg, var(--sail), transparent); }
    .integrations::after { right: 0; background: linear-gradient(90deg, transparent, var(--sail)); }

    /* Nominative-fair-use disclaimer under the integrations marquee */
    .int-disclaimer {
      font-size: 0.72rem;
      color: var(--fog);
      text-align: center;
      margin: 1rem auto 0;
      max-width: 640px;
      line-height: 1.55;
      font-style: italic;
    }

    .int-track {
      display: flex;
      gap: 2.5rem;
      animation: scroll-int 60s linear infinite;
      width: max-content;
      align-items: center;
    }

    .int-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      white-space: nowrap;
      opacity: 0.9;
      transition: opacity 0.3s ease;
    }

    .integrations:hover .int-item { opacity: 1; }

    .int-item img {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      opacity: 1;
    }

    /* Hide broken images gracefully */
    .int-item img.broken { display: none; }

    /* Inline SVG icons in marquee */
    .int-item svg.int-icon {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }

    /* Fallback colored dot when img fails */
    .int-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* Security trust bar */
    .security-bar {
      display: flex;
      justify-content: center;
      gap: clamp(1.5rem, 3vw, 3rem);
      flex-wrap: wrap;
      padding: 1.25rem 0;
      margin-top: 1.5rem;
    }

    .security-badge {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--slate);
    }

    .security-badge svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    .offer-band .security-bar .security-badge {
      color: rgba(251, 249, 243, 0.6);
    }

    .int-item span {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--slate);
      letter-spacing: 0.02em;
    }

    @keyframes scroll-int {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    @media (max-width: 768px) {
      .workflow-steps { flex-direction: column; gap: 0.25rem; }
      .wf-arrow { transform: rotate(90deg); padding: 0.2rem 0; }
    }

    /* ===== EXPANDABLE DETAILS (info bubbles) ===== */
    details.more-info {
      margin-top: 0.75rem;
    }

    details.more-info summary {
      font-family: 'Outfit', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--brass-dark);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      list-style: none;
      user-select: none;
      transition: color 0.2s ease;
    }

    details.more-info summary::-webkit-details-marker { display: none; }

    details.more-info summary::after {
      content: '';
      display: inline-block;
      width: 0.4em;
      height: 0.4em;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(-45deg);
      transition: transform 0.25s ease;
      margin-top: -0.1em;
    }

    details.more-info[open] summary::after {
      transform: rotate(45deg);
      margin-top: 0.05em;
    }

    details.more-info summary:hover { color: var(--brass-dark); }

    details.more-info .detail-body {
      margin-top: 0.6rem;
      padding: 0.85rem 1rem;
      background: rgba(21, 28, 42, 0.03);
      border-radius: 10px;
      border-left: 2px solid rgba(212, 170, 85, 0.25);
      font-size: 0.88rem;
      color: var(--fog);
      line-height: 1.65;
      animation: detail-in 0.3s ease;
    }

    @keyframes detail-in {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ".bottom-cta" family retired — bottom CTAs now use .final-cta or
       .about-cta-section. */

    /* Inline section CTAs — on-brand, not flashy */
    .section-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-family: 'Outfit', sans-serif;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--brass-dark);
      text-decoration: none;
      margin-top: 1.25rem;
      transition: color 0.2s ease, gap 0.2s ease;
    }

    .section-cta:hover {
      color: var(--navy);
      gap: 0.6rem;
    }

    .section-cta svg {
      width: 16px;
      height: 16px;
      transition: transform 0.2s ease;
    }

    .section-cta:hover svg {
      transform: translateX(4px);
    }

    /* Light text variant for dark backgrounds */
    .section-cta--light {
      color: var(--brass-bright);
    }

    .section-cta--light:hover {
      color: var(--brass-highlight);
    }

    /* Legacy ".about-dyve" homepage navy block family retired — homepage
       Phase 2B restructure moved "who we are" content into .why-dyve, and
       the full About page uses .page-hero / .page-body / .founder-grid /
       .about-cta-section / .about-faq. Retired tree:
         .about-dyve, .about-canvas, .about-dyve-inner, .about-dyve-label
         .about-dyve h2, .about-dyve p, .about-dyve strong
         .about-body, .about-body p
         .about-proof, .about-proof-item, .about-proof-num,
         .about-proof-label, .about-proof-divider
       Verified 0 HTML references before removal. */

    /* ===== FINAL CTA BAND ===== */
    .final-cta {
      background: var(--sail);
      padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 4rem);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    /* Radial glow retired Apr 2026 — cleaner, flatter navy field. */

    .final-cta-inner {
      max-width: 600px;
      margin: 0 auto;
      position: relative;
    }

    .final-cta h2 {
      font-family: 'Outfit', sans-serif;
      font-weight: var(--weight-h2);
      font-size: clamp(2rem, 4.5vw, 3rem);
      color: var(--text);
      margin-bottom: 1rem;
      letter-spacing: -0.02em;
      line-height: 1.15;
    }

    .final-cta h2 em {
      font-style: normal;
      color: var(--brass-dark);
      display: block;
      margin-top: 0.15em;
    }

    .final-cta p {
      font-size: 0.95rem;
      color: var(--fog);
      line-height: 1.75;
      margin-bottom: 1.75rem;
    }

    .final-cta .contact-line {
      font-size: 0.85rem;
      color: var(--slate);
      margin-top: 1rem;
    }

    .final-cta .contact-line a {
      color: var(--brass-dark);
      text-decoration: none;
      font-weight: 600;
    }

    .final-cta .contact-line a:hover {
      color: var(--brass-dark);
    }

    /* ".final-cta-btn" retired — final CTAs use .hero-cta-btn now. */

    /* ===== FOOTER =====
       Full-width navy band. Inner content spans 1280px max (wider than
       hero 1100px — footers intentionally spread further than content).
       Fluid horizontal padding via clamp so the footer breathes cleanly
       from 375px up to ultrawide monitors without hard breakpoints.
       Two tiers separated by a thin gold hairline instead of whitespace.
    */
    footer {
      background: var(--navy);
      color: var(--sail);
      padding: 2.25rem clamp(1.5rem, 5vw, 4rem) 1.25rem;
      position: relative;
      border-top: 1px solid rgba(212, 170, 85, 0.4);
    }

    footer::before { display: none; }

    .footer-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: clamp(1.5rem, 4vw, 3rem);
      align-items: center;
      padding-bottom: 1.1rem;
      border-bottom: 1px solid rgba(212, 170, 85, 0.38);
    }

    .footer-brand {
      text-align: left;
      line-height: 1.2;
    }

    .footer-wordmark-link {
      display: inline-block;
      text-decoration: none;
      color: inherit;
    }
    .footer-wordmark-link:hover .footer-wordmark .dyve-name { color: var(--brass-bright); }
    .footer-wordmark-link:focus-visible { outline: 2px solid var(--brass-dark); outline-offset: 4px; border-radius: 2px; }

    .footer-wordmark {
      font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      color: var(--sail);
      line-height: 1;
      transition: color 0.2s ease;
    }
    .footer-wordmark-inner { display: inline-block; text-align: left; }
    .footer-wordmark .dyve-name { font-weight: 800; font-size: 1.375rem; letter-spacing: 0.08em; transition: color 0.2s ease; }
    .footer-wordmark .dyve-dot { color: var(--brass-bright); font-weight: 800; }
    .footer-wordmark .dyve-tech { display: block; font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.04em; margin-top: 3px; color: var(--brass-bright); }
    .footer-tagline {
      font-size: 0.78rem;
      font-style: italic;
      color: rgba(251, 249, 243, 0.55);
      margin: 0.4rem 0 0;
    }

    /* Footer brand-mark slot. Currently empty - reserved class kept in case
       a future motif (separate from the anchor used as page accents) lands
       in the footer. See ILLUSTRATION-SPEC.md. */

    .footer-nav {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 1.75rem;
      margin: 0;
    }

    .footer-nav a {
      font-family: 'Outfit', sans-serif;
      font-size: 0.85rem;
      font-weight: 400;
      color: rgba(251, 249, 243, 0.72);
      text-decoration: none;
      white-space: nowrap;
      transition: color 0.2s ease;
    }

    .footer-nav a:hover { color: var(--sail); }

    .footer-contact {
      text-align: right;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      line-height: 1.5;
    }

    .footer-contact a, .footer-contact p {
      font-family: 'Outfit', sans-serif;
      font-size: 0.82rem;
      color: rgba(251, 249, 243, 0.7);
      text-decoration: none;
      margin: 0;
      transition: color 0.2s ease;
    }

    .footer-contact a:hover { color: var(--brass-bright); }

    .footer-copy { font-size: 0.72rem; color: rgba(251, 249, 243, 0.6); margin: 0; }
    .footer-legal { font-size: 0.72rem; color: rgba(251, 249, 243, 0.6); margin: 0; }
    .footer-legal a { color: rgba(251, 249, 243, 0.72); text-decoration: none; }
    .footer-legal a:hover { color: var(--brass-bright); text-decoration: underline; }
    .footer-legal span { margin: 0 0.4rem; color: rgba(251, 249, 243, 0.3); }

    /* ===== AMBIENT BREATHING ===== */
    @keyframes breathe-shadow {
      0%, 100% { box-shadow: 0 1px 2px rgba(21,28,42,0.06), 0 4px 12px rgba(21,28,42,0.06), 0 16px 40px rgba(21,28,42,0.08), 0 0 0 1px rgba(200,169,106,0.04); }
      50% { box-shadow: 0 1px 2px rgba(21,28,42,0.06), 0 6px 16px rgba(21,28,42,0.08), 0 20px 48px rgba(21,28,42,0.1), 0 0 0 1px rgba(200,169,106,0.08); }
    }

    /* @keyframes pulse-num / @keyframes step-border + their trigger rules
       retired alongside .step family. Standalone ".guarantee" callout retired —
       the accelerator page now uses inline FAQ + trust-bar treatment instead. */

    /* ===== OFFER BAND (dark section) ===== */
    .offer-band {
      background: var(--navy);
      padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
      position: relative;
      overflow: hidden;
    }

    .offer-band-inner {
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
      width: 100%;
    }

    /* Offer-band ambient brass glow retired Apr 2026. */

    .offer-band-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      width: 100%;
      font-family: 'Outfit', sans-serif;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--brass-bright);
      text-align: center;
      margin-bottom: 1rem;
      padding: 0.4rem 1rem;
    }
    .offer-band-label-icon {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: var(--brass-bright);
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    .offer-band-heading {
      font-family: 'Outfit', sans-serif;
      font-weight: var(--weight-h2);
      font-size: var(--type-h2);
      color: var(--sail);
      text-align: center;
      margin-bottom: 1rem;
      letter-spacing: -0.02em;
      line-height: 1.2;
    }

    .offer-band-heading em {
      font-style: normal;
      color: var(--brass-bright);
    }

    .offer-band-sub {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(1rem, 2vw, 1.15rem);
      color: rgba(251, 249, 243, 0.6);
      text-align: center;
      margin-bottom: 2.5rem;
      line-height: 1.6;
    }

    /* ===== BENTO GRID (replaces value-stack accordion, 2026-04-15) ===== */
    .bento-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto auto auto;
      gap: 0.85rem;
      margin-top: 2.5rem;
    }

    /* Price card: col 1, spans all rows */
    .bento-price {
      grid-row: 1 / -1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: var(--sail);
      border: 1px solid rgba(200, 169, 106, 0.2);
      border-radius: 14px;
      padding: 2.5rem 1.5rem;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    }
    .bento-price-amount {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(2.8rem, 6vw, 3.8rem);
      font-weight: 800;
      color: var(--brass-dark);
      line-height: 1;
      margin-bottom: 0.75rem;
    }
    .bento-price-context {
      font-size: 0.92rem;
      color: var(--navy);
      margin-bottom: 1.5rem;
      line-height: 1.5;
    }
    .bento-price-context .brass {
      color: var(--brass-dark);
      font-weight: 600;
    }
    .bento-price-context strong.brass {
      color: var(--brass-dark);
      font-weight: 800;
    }
    .bento-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--navy);
      color: var(--sail);
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 0.95rem;
      padding: 0.85rem 2rem;
      border-radius: 10px;
      text-decoration: none;
      transition: background 0.25s ease, transform 0.25s ease;
      box-shadow: 0 2px 8px rgba(21, 28, 42, 0.2);
    }
    .bento-cta:hover {
      background: var(--brass-bright);
      color: var(--navy);
      transform: translateY(-1px);
    }
    .bento-cta svg { width: 16px; height: 16px; }

    /* Feature cards */
    .bento-item {
      background: var(--sail);
      border: 1px solid rgba(200, 169, 106, 0.15);
      border-left: 3px solid var(--brass-dark);
      border-radius: 12px;
      padding: 1.25rem 1.25rem 1.1rem;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
    .bento-item:hover {
      border-color: rgba(200, 169, 106, 0.35);
      border-left-color: var(--brass-bright);
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    }
    .bento-icon {
      width: 28px;
      height: 28px;
      color: var(--slate);              /* spec: Slate on light backgrounds */
      margin-bottom: 0.65rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .bento-item h4 {
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--navy);
      margin: 0 0 0.5rem;
      line-height: 1.3;
      letter-spacing: -0.01em;
    }
    .bento-item h4 .hatz-brand {
      color: var(--brass-dark);
    }
    .bento-item p {
      font-size: 0.82rem;
      color: var(--slate);
      line-height: 1.6;
      margin: 0;
    }

    /* Security bar on navy */
    .offer-band .security-bar {
      border-top: 1px solid rgba(200, 169, 106, 0.35);
      padding-top: 1rem;
    }
    .offer-band .security-bar .security-badge {
      color: rgba(251, 249, 243, 0.6);
    }

    /* Bento responsive */
    @media (max-width: 1024px) {
      .bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
      }
      .bento-price {
        grid-row: auto;
        grid-column: 1 / -1;
        padding: 2rem 1.5rem;
      }
    }
    @media (max-width: 640px) {
      .bento-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
      }
      .bento-price {
        padding: 1.75rem 1.25rem;
      }
    }

    /* Dark-background overrides for .guarantee / .bottom-cta / .email-form
       retired alongside their base-class parents. */

    /* Legacy ".offer-tier:first-child" + ".launch-pill" + ".founding-badge" +
       dark-bg ".spots-left" overrides retired alongside the pre-Phase 2B
       "founding waitlist" / "launch offer" scarcity pattern. */

    .offer-band .form-success .success-headline { color: var(--sail); }
    .offer-band .form-success .sub { color: rgba(251, 249, 243, 0.6); }
    .offer-band .form-success .checkmark { background: rgba(212, 170, 85, 0.15); }
    .offer-band .form-success .success-tagline { color: var(--brass-bright); }
    .offer-band .form-success .success-linkedin { background: rgba(251, 249, 243, 0.1); color: var(--sail); }

    /* Timeline */
    .timeline {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-bottom: 3rem;
      position: relative;
    }

    .timeline::before {
      content: '';
      position: absolute;
      top: 1.25rem;
      left: calc(100% / 8);
      right: calc(100% / 8);
      height: 2px;
      background: repeating-linear-gradient(90deg, var(--brass-bright) 0, var(--brass-bright) 8px, transparent 8px, transparent 14px);
      opacity: 0.3;
    }

    .tl-point {
      text-align: center;
      padding: 0 0.75rem;
    }

    .tl-dot {
      width: 2.5rem; height: 2.5rem;
      border-radius: 50%;
      background: var(--white);
      border: 2px solid var(--brass-dark);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 0.75rem;
      position: relative; z-index: 1;
      box-shadow: 0 2px 8px rgba(212, 170, 85, 0.12), inset 0 -1px 2px rgba(212, 170, 85, 0.06);
      transition: transform 0.3s ease, border-color 0.3s ease;
    }

    .tl-point:hover .tl-dot {
      transform: scale(1.08);
      border-color: var(--brass-bright);
    }

    /* Final dot — destination marker */
    .tl-point:last-child .tl-dot {
      background: var(--brass-bright);
      border-color: var(--brass-bright);
      box-shadow: 0 2px 12px rgba(212, 170, 85, 0.25);
    }

    .tl-point:last-child .tl-dot svg { stroke: #FFFFFF; }

    /* Timeline progress bar */
    .timeline-progress {
      position: absolute;
      top: 1.25rem;
      left: calc(100% / 8);
      height: 2px;
      width: 0;
      background: linear-gradient(90deg, var(--brass-bright), var(--brass-dark));
      z-index: 0;
      transition: width 0.1s linear;
      border-radius: 1px;
      box-shadow: 0 0 8px rgba(212, 170, 85, 0.3);
    }

    .tl-point.lit .tl-dot {
      background: var(--brass-bright);
      border-color: var(--brass-bright);
      box-shadow: 0 2px 12px rgba(212, 170, 85, 0.25);
      transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    }
    .tl-point.lit .tl-dot svg { stroke: #FFFFFF; }

    /* Stagger timeline entries */
    .tl-point:nth-child(2) { transition-delay: 0.1s; }
    .tl-point:nth-child(3) { transition-delay: 0.2s; }
    .tl-point:nth-child(4) { transition-delay: 0.3s; }

    .tl-dot svg { width: 16px; height: 16px; }

    .tl-when {
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--brass-dark);
      margin-bottom: 0.25rem;
    }

    .tl-what {
      font-size: 0.875rem;
      color: var(--fog);
      line-height: 1.5;
    }

    @media (max-width: 768px) {
      .timeline { grid-template-columns: 1fr; gap: 1.25rem; }
      .timeline::before { display: none; }
      .timeline-progress { display: none; }
      .tl-point { text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; }
      .tl-dot { margin: 0; }
    }

    /* Legacy ".modal-overlay / .modal-card / .modal-*" family retired — the
       current contact modal uses ".contact-modal-overlay / .contact-modal-card"
       (see Phase 1 additions further down). ".dyve-inline" and ".badge-letter"
       retired as well. Verified 0 HTML references before removal. */

    /* ===== CONTACT FORM MODAL ===== */
    .contact-modal { max-width: 560px; }
    .contact-form { display: flex; flex-direction: column; gap: 1rem; }
    .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .cf-field { display: flex; flex-direction: column; gap: 0.4rem; }
    .cf-field.cf-full { grid-column: 1 / -1; }
    .cf-field label {
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.01em;
    }
    .cf-field-hint {
      font-size: 0.72rem;
      font-weight: 400;
      color: var(--fog);
      letter-spacing: 0;
      margin-left: 0.25rem;
      font-style: italic;
    }
    .cf-req { color: var(--brass-dark); }
    .cf-field input, .cf-field textarea {
      border: 1.5px solid rgba(21, 28, 42, 0.1);
      border-radius: 12px;
      padding: 0.8rem 1rem;
      font-size: 0.92rem;
      font-family: inherit;
      color: var(--text);
      background: var(--white);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      outline: none;
    }
    .cf-field input:focus, .cf-field textarea:focus {
      border-color: var(--brass);
      box-shadow: 0 0 0 3px rgba(200, 169, 106, 0.15);
    }
    .cf-field textarea { resize: vertical; min-height: 140px; }
    .cf-submit {
      width: 100%;
      padding: 1rem;
      background: var(--navy);
      color: var(--sail);
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease;
      margin-top: 0.5rem;
      letter-spacing: 0.01em;
    }
    .cf-submit:hover { background: var(--navy-soft); transform: translateY(-1px); }
    @media (max-width: 480px) {
      .cf-row { grid-template-columns: 1fr; }
    }

    /* Escape key support for modal */

    /* Floating accent shapes */
    @keyframes float-slow {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
    }

    .platform-inner {
      position: relative;
    }

    .platform-inner::before,
    .platform-inner::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      pointer-events: none;
      z-index: 0;
    }

    .platform-inner::before {
      width: 200px; height: 200px;
      background: rgba(212, 170, 85, 0.06);
      top: 5%; right: -5%;
      animation: float-slow 18s ease-in-out infinite;
    }

    .platform-inner::after {
      width: 150px; height: 150px;
      background: rgba(212, 170, 85, 0.05);
      bottom: 15%; left: -3%;
      animation: float-slow 22s ease-in-out infinite 4s;
    }

    /* ===== REVEAL ANIMATIONS (Day 2 — unified Apple-smooth system) ===== */
    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Note: .platform-intro, .value-stack, etc. reveal styles are defined in the Apple-style section below */

    /* ===== APPLE-STYLE SCROLL ANIMATIONS ===== */

    /* Scale-reveal: headings and key content — subtle, unified entrance */
    .scale-reveal {
      opacity: 0;
      transform: scale(1.02) translateY(20px);
      transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform, opacity;
    }

    .scale-reveal.visible {
      opacity: 1;
      transform: scale(1) translateY(0);
    }

    /* Staggered cascade for sequential elements — only applies when no explicit data-delay is set on the element.
       Elements with data-delay have their timing managed by JS (setTimeout before adding .visible); adding a CSS
       transition-delay on top compounds the timing and makes the cascade feel slow + out of order. */
    .scale-reveal:not([data-delay]):nth-child(2) { transition-delay: 0.08s; }
    .scale-reveal:not([data-delay]):nth-child(3) { transition-delay: 0.16s; }
    .scale-reveal:not([data-delay]):nth-child(4) { transition-delay: 0.24s; }

    /* Offer band heading — starts big, lands at normal */
    .offer-band-heading {
      transform-origin: center center;
    }

    /* Pain heading — full-width presence */
    .pain-heading.scale-reveal {
      transform-origin: left center;
    }

    /* Universal reveal — content blocks slide up */
    .platform-intro, .platform-stats, .workflow, .entry-ramp {
      opacity: 0;
      transform: translateY(24px);
      transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .platform-intro.visible, .platform-stats.visible, .workflow.visible, .entry-ramp.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ".pain-quote" reveal rules retired alongside the iMessage bubble pattern
       (killed in Phase 1.5, restructured to .pain-item numbered observations). */

    /* Stats — pop in with scale */
    .stat {
      opacity: 0;
      transform: scale(0.96) translateY(16px);
      transition:
        opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .stat.visible {
      opacity: 1;
      transform: scale(1) translateY(0);
    }

    /* Timeline steps — cascade in from right */
    .tl-point {
      opacity: 0;
      transform: translateY(30px);
      transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .tl-point.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ".about-proof-item" reveal rules retired with the .about-dyve family. */

    /* Final CTA — fade up, tighter cascade */
    .final-cta h2, .final-cta p, .final-cta .hero-cta-btn {
      opacity: 0;
      transform: translateY(20px);
      transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .final-cta h2.visible { opacity: 1; transform: translateY(0); }
    .final-cta p.visible { opacity: 1; transform: translateY(0); transition-delay: 0.08s; }
    .final-cta .hero-cta-btn.visible { opacity: 1; transform: translateY(0); transition-delay: 0.16s; }

    /* ===== ANIMATIONS ===== */
    @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
      }
      .hero h1 .word, .hero .subtitle, .hero-actions,
      .math-row,
      .stat, .scale-reveal, .reveal,
      .platform-intro, .platform-stats, .workflow, .entry-ramp,
      .approach-heading, .approach-para, .section-eyebrow,
      .service--featured, .includes-eyebrow, .includes-list li,
      .secondary-service,
      .final-cta h2, .final-cta p, .final-cta .hero-cta-btn { opacity: 1; transform: none; filter: none !important; }
      .int-track { animation: none; }
      .stat.visible .num, .step.visible .step-num,
      .platform-inner::before, .platform-inner::after { animation: none !important; }
    }

    /* ===== RESPONSIVE ===== */
    /* Ultrawide: pull hero content inward so it doesn't hug the left edge */
    @media (min-width: 1600px) {
      .hero { padding-left: calc((100vw - 1100px) / 3); }
    }
    @media (min-width: 2200px) {
      .hero { padding-left: calc((100vw - 1100px) / 2.5); }
    }

    /* ===== TABLET (769px - 1024px) ===== */
    @media (max-width: 1024px) and (min-width: 769px) {
      .hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
      .platform-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
      .platform-stats { grid-template-columns: 1fr 1fr; }
      .offer-band-heading { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
      .timeline { grid-template-columns: repeat(4, 1fr); }
      .tl-what { font-size: 0.8rem; }
      .workflow-steps { gap: 0.5rem; }
      .wf-node { padding: 0.6rem 0.75rem; font-size: 0.78rem; }
      .footer-inner { gap: 1.5rem; }
    }

    /* ===== MOBILE (max 768px) ===== */
    @media (max-width: 768px) {
      .hero h1 { font-size: clamp(2rem, 8vw, 2.75rem); }
      .hero .subtitle { font-size: 1rem; }
      .platform-top { grid-template-columns: 1fr; }
      .platform-intro { text-align: center; }
      .platform-stats { grid-template-columns: 1fr; }
      .stat:first-child { grid-column: 1; }
      .stat:first-child .num { font-size: 2.2rem; }
      .site-nav { padding: 0 1.25rem; }
      .nav-links { gap: 1rem; }
      .nav-links a { font-size: 0.75rem; }
      .offer-band-heading { font-size: clamp(1.4rem, 5vw, 1.8rem); }
      .offer-band { padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 4vw, 1.5rem); }
      .section-cta { font-size: 0.85rem; }
      .math-num { font-size: clamp(2.4rem, 10vw, 3.5rem); }
      .pain-heading { font-size: clamp(1.4rem, 5vw, 1.8rem); }
      footer { padding: 1.75rem 1.25rem 1rem; }
      .footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.25rem;
        padding-bottom: 1rem;
      }
      .footer-brand { text-align: center; }
      .footer-brand .footer-wordmark-inner { text-align: center; }
      .footer-contact { text-align: center; align-items: center; }
      .footer-nav { gap: 1.25rem 1.5rem; }
      .final-cta h2 { font-size: clamp(1.1rem, 4.5vw, 1.4rem); }
    }

    /* ===== SMALL MOBILE (max 480px) ===== */
    @media (max-width: 480px) {
      .hero { padding: 6rem 1rem 3rem; }
      .hero h1 { font-size: 1.5rem; }
      .nav-links { gap: 0.65rem; }
      .nav-links a { font-size: 0.7rem; }
      .offer-tier { gap: 0.4rem; }
      .offer-num { font-size: 1.2rem; min-width: 2rem; }
      .workflow-steps { gap: 0.15rem; }
      .wf-node { padding: 0.5rem 0.6rem; font-size: 0.72rem; }
      .wf-arrow { font-size: 0.7rem; }
      .int-item span { font-size: 0.7rem; }
    }

    *:focus-visible {
      outline: 2px solid var(--brass-dark);
      outline-offset: 2px;
      transition: outline-offset 0.15s ease;
    }

    *:focus-visible:not(:active) {
      outline-offset: 4px;
    }

    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }

    .skip-link {
      position: absolute;
      top: -100%;
      left: 1rem;
      z-index: 10000;
      padding: 0.75rem 1.5rem;
      background: var(--brass-bright);
      color: var(--navy);
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 0.9rem;
      border-radius: 0 0 8px 8px;
      text-decoration: none;
      transition: top 0.15s ease;
    }
    .skip-link:focus {
      top: 0;
    }

/* ==========================================================================
   PHASE 1 ADDITIONS (April 2026)
   New structural styles for the multi-page IA split.
   Kept at end so the lift-and-shift CSS above stays untouched.
   ========================================================================== */

/* ===========================================================================
   CONTACT MODAL (rebuilt 2026-04-10 per Yvette)
   In-page CTAs trigger this modal so visitors stay in context. Nav + footer
   Contact links still route to /contact.html. Modal markup is injected by
   site.js on page load so there's one source of truth for the form.
   =========================================================================== */

.contact-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(21, 28, 42, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s ease;
  overflow-y: auto;
}
.contact-modal-overlay.visible {
  display: flex;
  opacity: 1;
}

.contact-modal-card {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem); /* iOS Safari: dynamic viewport avoids address-bar clipping */
  overflow-y: auto;
  background: var(--white);
  border: 1px solid rgba(212, 170, 85, 0.25);
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow:
    0 4px 20px rgba(21, 28, 42, 0.15),
    0 24px 60px rgba(21, 28, 42, 0.25),
    0 0 0 1px rgba(212, 170, 85, 0.08);
  transform: translateY(12px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.contact-modal-overlay.visible .contact-modal-card {
  transform: translateY(0) scale(1);
}

.contact-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fog);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.contact-modal-close:hover {
  background: rgba(21, 28, 42, 0.06);
  color: var(--navy);
}
.contact-modal-close:focus-visible {
  background: rgba(21, 28, 42, 0.06);
  color: var(--navy);
  outline: 2px solid var(--brass-dark);
  outline-offset: 2px;
}
.contact-modal-close svg {
  width: 18px;
  height: 18px;
}

.contact-modal-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin: 0 0 0.5rem;
}
.contact-modal-heading {
  font-family: 'Outfit', sans-serif;
  font-weight: var(--weight-h2);
  font-size: var(--type-h2);
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 0.4rem;
  letter-spacing: -0.015em;
  padding-right: 2.5rem; /* room for close button */
}
.contact-modal-intro {
  font-size: var(--type-body);
  color: var(--slate);
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.contact-modal-card .contact-form { display: flex; flex-direction: column; gap: 0.75rem; }

/* Success state inside modal */
.contact-modal-success {
  display: none;
  text-align: center;
  padding: 1rem 0 0.5rem;
}
.contact-modal-success.visible { display: block; }
.contact-modal-success .checkmark {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(212, 170, 85, 0.15), rgba(212, 170, 85, 0.05));
  border: 2px solid var(--brass-bright);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-modal-success .checkmark svg {
  width: 28px;
  height: 28px;
  stroke: var(--brass-dark);
  stroke-width: 2.5;
  fill: none;
}
.contact-modal-success .success-headline {
  font-family: 'Outfit', sans-serif;
  font-weight: var(--weight-h2);
  font-size: 1.25rem;
  color: var(--text);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.contact-modal-success .success-sub {
  font-size: 0.92rem;
  color: var(--slate);
  line-height: 1.6;
  margin: 0 0 1.25rem;
}
.contact-modal-success .success-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  background: var(--navy);
  color: var(--sail);
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  margin-bottom: 1.25rem;
}
.contact-modal-success .success-linkedin svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.contact-modal-success .success-linkedin:hover {
  background: var(--navy-soft);
  transform: translateY(-1px);
}
.contact-modal-success .success-other-ways {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  color: var(--fog);
}
.contact-modal-success .success-other-ways a {
  color: var(--fog);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.contact-modal-success .success-other-ways a:hover {
  color: var(--slate);
}
.contact-modal-success .success-tagline {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--brass-dark);
  margin: 0.5rem 0 0;
}

/* Interest pills (multi-select toggle buttons inside the modal) */
.interest-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.interest-pill {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1.5px solid rgba(21, 28, 42, 0.15);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
  user-select: none;
}
.interest-pill:hover {
  border-color: var(--brass-bright);
  background: rgba(212, 170, 85, 0.06);
}
.interest-pill.selected {
  background: var(--brass-bright);
  border-color: var(--brass-bright);
  color: var(--navy);
  font-weight: 600;
}
.interest-pill:focus-visible {
  outline: 2px solid var(--brass-dark);
  outline-offset: 2px;
}
.interest-other-input {
  margin-top: 0.5rem;
  width: 100%;
  border: 1.5px solid rgba(21, 28, 42, 0.12);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.interest-other-input:focus {
  border-color: var(--brass-dark);
  box-shadow: 0 0 0 1px var(--brass-dark);
  outline: none;
}

/* Lock body scroll when modal is open */
body.modal-open { overflow: hidden; }

/* Small screens: modal takes nearly the full viewport */
@media (max-width: 520px) {
  .contact-modal-overlay { padding: 0.5rem; align-items: flex-start; padding-top: 2rem; }
  .contact-modal-card { max-height: calc(100vh - 2.5rem); max-height: calc(100dvh - 2.5rem); padding: 1.5rem 1.25rem; }
  .contact-modal-heading { font-size: 1.5rem; padding-right: 2rem; }
}

/* Reduced motion: no animation */
@media (prefers-reduced-motion: reduce) {
  .contact-modal-overlay,
  .contact-modal-card { transition: none; }
  .contact-modal-card { transform: none; }
}

/* ----- Footer bottom bar: tight band below the thin gold separator ----- */
footer .footer-bottom {
  max-width: 1280px;
  margin: 0.9rem auto 0;
  padding: 0;
  border: 0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  text-align: left;
}
footer .footer-bottom .footer-copy,
footer .footer-bottom .footer-legal { margin: 0; }
@media (max-width: 640px) {
  footer .footer-bottom { flex-direction: column; gap: 0.4rem; text-align: center; }
}

/* ----- Shared: nav active-state — reuses the same underline pseudo-element as hover ----- */
.nav-links a.active { color: var(--sail); }
.nav-links a.active::after { transform: scaleX(1); }

/* ----- Homepage hero eyebrow ("Deep, not wide.") ----- */
.launch-banner {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: var(--brass-bright);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--brass-bright);
  opacity: 0;
  animation: fade-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}
/* Tighten on small screens so the eyebrow doesn't compete with the H1. */
@media (max-width: 520px) {
  .launch-banner {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    padding-bottom: 0.35rem;
    margin-bottom: 0.85rem;
  }
}

/* Trust bar + partners strip removed v3.3. Partners now live inside the Approach section. */

/* ----- Wave dividers ----- */
.wave-divider {
  line-height: 0;
  overflow: hidden;
  margin-top: -2px;
}
.wave-divider svg {
  display: block;
  width: 100%;
  height: 48px;
}
.wave-divider--sail {
  background: var(--navy);
}
.wave-divider--navy {
  background: var(--sail);
}
@media (max-width: 600px) {
  .wave-divider svg { height: 32px; }
}

/* ".empathy-bridge" family retired — content moved into .why-dyve on the
   homepage and .page-hero-sub on the About page. */

/* ----- About page: founders hero illustration slot. Sits above the
   .founder-grid bio cards. Activates when the HTML comment is uncommented
   in about.html. Aspect-ratio locked to source image; max-width constrained
   so it doesn't dominate. ----- */
.founder-hero {
  margin: 1.5rem auto 2.5rem;
  max-width: 900px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(21, 28, 42, 0.06), 0 16px 40px rgba(21, 28, 42, 0.1);
  border: 1px solid rgba(200, 169, 106, 0.22);
  background: var(--canvas);
}
.founder-hero picture,
.founder-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (max-width: 640px) {
  .founder-hero {
    margin: 1rem auto 1.75rem;
    border-radius: 10px;
  }
}

/* ----- About page: founder cards (typographic, no avatar circles) ----- */
.founder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1100px;
  margin: 1.5rem auto 0;
}
@media (max-width: 720px) {
  .founder-grid { grid-template-columns: 1fr; }
}
.founder-card {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-left: 3px solid var(--brass);
  border-radius: 0 12px 12px 0;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 3vw, 2rem);
  text-align: left;
  box-shadow: none;
  transition: background 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
}
.founder-card::before {
  display: none;
}
.founder-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-left-color: var(--brass-bright);
  transform: none;
  box-shadow: none;
}
.founder-tag {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin: 0 0 0.6rem;
}
.founder-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  color: var(--sail);
  margin: 0 0 1.1rem;
  letter-spacing: -0.025em;
  line-height: 1;
  /* Brass underline accent under the name — small editorial flourish */
  position: relative;
  padding-bottom: 0.65rem;
}
.founder-name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 2px;
  background: var(--brass);
  border-radius: 2px;
}
.founder-bio {
  font-size: 0.97rem;
  color: rgba(251, 249, 243, 0.78);
  line-height: 1.7;
  margin: 0;
}
/* Keep brass-accent spans readable on navy */
.founder-card .brass-accent {
  color: var(--brass-bright);
}
.founder-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brass);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}
.founder-linkedin svg {
  flex-shrink: 0;
  opacity: 0.85;
}
.founder-linkedin:hover {
  color: var(--brass-bright);
}

/* ----- AI Readiness: 5-step process timeline ----- */
.process-timeline {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  counter-reset: process-step;
}
.process-step {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.75rem 0;
  border-top: 1px solid rgba(21, 28, 42, 0.08);
  position: relative;
}
.process-step:last-child {
  border-bottom: 1px solid rgba(21, 28, 42, 0.08);
}
@media (max-width: 640px) {
  .process-step { grid-template-columns: 1fr; gap: 0.4rem; }
}
.process-step-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 0.1rem;
}
.process-step-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: var(--brass-dark);
  line-height: 1;
  letter-spacing: -0.02em;
}
.process-step-day {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog);
  margin-top: 0.35rem;
}
.process-step-body h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  margin: 0 0 0.4rem 0;
  letter-spacing: -0.01em;
}
.process-step-body p {
  font-size: 0.92rem;
  color: var(--slate);
  line-height: 1.65;
  margin: 0;
}

/* ----- Homepage: three-doorway compare block ----- */
/* Dot-grid background retired Apr 2026 — flat Sail field now. */
.doorways {
  background-color: var(--sail);
  padding: 4rem 1.5rem;
}
.doorways-inner { max-width: 1100px; margin: 0 auto; }
.doorways-eyebrow {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin-bottom: 0.75rem;
}
.doorways-heading {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-weight: var(--weight-h2);
  font-size: var(--type-h2);
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}
.doorways-sub {
  text-align: center;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: var(--fog);
  max-width: 620px;
  margin: 0 auto 3rem;
  line-height: 1.65;
}
.doorways-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .doorways-grid { grid-template-columns: 1fr; }
}
.doorway {
  background: var(--white);
  border: 1px solid rgba(21, 28, 42, 0.08);
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(21, 28, 42, 0.04), 0 8px 24px rgba(21, 28, 42, 0.05);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
}
.doorway:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(21, 28, 42, 0.06), 0 16px 40px rgba(21, 28, 42, 0.1);
  border-color: rgba(212, 170, 85, 0.25);
}
.doorway--featured { border: 2px solid var(--brass-bright); }
.doorway--featured::before {
  content: 'Most popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brass-bright);
  color: var(--navy);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  white-space: nowrap;
}
.doorway-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin-bottom: 0.5rem;
}
.doorway-name {
  font-family: 'Outfit', sans-serif;
  font-weight: var(--weight-h3);
  font-size: var(--type-h3);
  color: var(--text);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.doorway-price {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 3.5vw, 2rem);
  color: var(--brass-dark);
  margin-bottom: 0.25rem;
  letter-spacing: -0.01em;
}
.doorway-price .price-note {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fog);
  letter-spacing: 0;
  margin-top: 0.2rem;
}
.doorway-best-for {
  font-size: 0.85rem;
  color: var(--slate);
  font-style: italic;
  margin: 1rem 0 1.25rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(21, 28, 42, 0.18);
  line-height: 1.55;
}
.doorway ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  flex: 1;
}
.doorway ul li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 0.6rem;
}
.doorway ul li::before {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass-bright);
}
.doorway-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--brass-dark);
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
  margin-top: auto;
  padding-top: 0.5rem;
}
.doorway-cta:hover { color: var(--navy); gap: 0.6rem; }
.doorway-cta svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.doorway-cta:hover svg { transform: translateX(4px); }

/* ----- Homepage: Why Dyve condensed block ----- */
.why-dyve {
  background: var(--navy);
  padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem);
  color: var(--sail);
  text-align: center;
}
.why-dyve-inner { max-width: 720px; margin: 0 auto; }
.why-dyve-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin-bottom: 1.25rem;
}
.why-dyve h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: var(--weight-h2);
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--sail);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 1.75rem;
}
.why-dyve p {
  font-size: var(--type-body);
  color: rgba(251, 249, 243, 0.78);
  line-height: 1.75;
  margin-bottom: 1rem;
}
.why-dyve p strong { color: var(--sail); font-weight: 600; }
.why-dyve .section-cta { color: var(--brass-bright); margin-top: 1.5rem; }
.why-dyve .section-cta:hover { color: var(--brass-highlight); }

/* ----- Subpage hero (used by all non-homepage pages) ----- */
.page-hero {
  background: var(--navy);
  color: var(--sail);
  padding: clamp(7rem, 14vh, 9rem) clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vh, 4rem);
  position: relative;
  overflow: hidden;
}
/* .page-hero::before radial brass glows retired Apr 2026 — flat navy field. */

/* === Wave accent — accelerator hero only ===
   Single flowing wave line from the sprite, sitting mid-hero.
   Opacity 0.09 — texture, not decoration.                     */
.hero-wave-accent {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22%;
  width: 100%;
  height: 60px;
  color: var(--sail);
  opacity: 0.09;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

.page-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.breadcrumb {
  font-size: 0.82rem;
  color: rgba(251, 249, 243, 0.5);
  margin-bottom: 1rem;
}
.breadcrumb a {
  color: rgba(251, 249, 243, 0.7);
  text-decoration: underline;
  text-decoration-color: rgba(251, 249, 243, 0.4);
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.breadcrumb a:hover { text-decoration-color: var(--brass-bright); }
.breadcrumb a:hover { color: var(--brass-bright); }
.breadcrumb .sep { margin: 0 0.5rem; color: rgba(251, 249, 243, 0.3); }
.page-hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin-bottom: 1rem;
}
.page-hero h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: var(--weight-h1);
  font-size: var(--type-h1);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sail);
  margin-bottom: 1rem;
}
.page-hero-sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: rgba(251, 249, 243, 0.7);
  line-height: 1.7;
  max-width: 720px;
}

/* In-page TOC menu — used on services.html hero to surface the multiple
   service categories the page covers, since the page is long and a
   visitor might not realize it goes beyond Hatz AI without scrolling. */
.page-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.75rem;
}
.page-toc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.1rem 0.55rem 0.55rem;
  border: 1px solid rgba(212, 170, 85, 0.42);
  border-radius: 999px;
  background: rgba(212, 170, 85, 0.06);
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--sail);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.page-toc-link:hover,
.page-toc-link:focus-visible {
  background: rgba(212, 170, 85, 0.16);
  border-color: var(--brass-bright);
  transform: translateY(-1px);
  outline: none;
}
.page-toc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brass-bright);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
@media (max-width: 640px) {
  .page-toc {
    gap: 0.5rem;
  }
  .page-toc-link {
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem 0.45rem 0.45rem;
  }
  .page-toc-num {
    width: 22px;
    height: 22px;
    font-size: 0.65rem;
  }
}
/* Smooth scroll to anchored sections + scroll-margin so the section's
   top isn't hidden under the sticky nav. Applies to all anchored
   sections with an id sitting inside main. */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
#hatz-ai,
#it-essentials,
#project-work {
  scroll-margin-top: 80px;
}
.page-hero-price {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  color: var(--brass-bright);
  margin-top: 1.5rem;
  padding: 0.65rem 1.5rem;
  border: 2px solid var(--brass-bright);
  border-radius: 10px;
  letter-spacing: -0.01em;
}
.page-hero-price small {
  display: block;
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(251, 249, 243, 0.65);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 0.25rem;
}

/* ----- Generic page body container (used by thin placeholder pages) ----- */
.page-body {
  background: var(--sail);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
}
.page-body-inner { max-width: 760px; margin: 0 auto; }
.page-body h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: var(--weight-h2);
  font-size: var(--type-h2);
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  margin-top: 2.5rem;
}
.page-body h2:first-child { margin-top: 0; }
.page-body h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: var(--weight-h3);
  font-size: var(--type-h3);
  color: var(--text);
  letter-spacing: -0.015em;
  margin-bottom: 0.75rem;
  margin-top: 1.75rem;
}
.page-body p {
  font-size: var(--type-body);
  color: var(--slate);
  line-height: 1.75;
  margin-bottom: 1rem;
}
.page-body p strong { color: var(--text); font-weight: 600; }
.page-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}
.page-body ul li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.98rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 0.6rem;
}
.page-body ul li::before {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass-bright);
}
.page-body .callout {
  background: rgba(212, 170, 85, 0.08);
  border-left: 3px solid var(--brass-bright);
  border-radius: 0 10px 10px 0;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.65;
}
.page-body .callout strong { color: var(--brass-dark); }
.page-body .placeholder-note {
  font-size: 0.85rem;
  color: var(--slate);
  font-style: italic;
  background: rgba(21, 28, 42, 0.03);
  border-left: 2px dashed rgba(21, 28, 42, 0.2);
  padding: 0.85rem 1rem;
  margin: 1.5rem 0;
  border-radius: 0 6px 6px 0;
  line-height: 1.6;
}

/* Page bottom CTA */
.page-cta {
  text-align: center;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(21, 28, 42, 0.18);
}
.page-cta a.btn-primary {
  display: inline-block;
  padding: 0.95rem 2rem;
  background: linear-gradient(180deg, var(--brass-highlight) 0%, var(--brass-bright) 100%);
  color: var(--navy);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(212, 170, 85, 0.25);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, color 0.2s ease;
}
.page-cta a.btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, var(--navy-soft) 0%, var(--navy) 100%);
  color: var(--sail);
}
/* Secondary link under the primary CTA (e.g. AI Readiness → Accelerator jump). */
.page-cta-alt {
  margin: 1.25rem 0 0;
  font-size: 0.9rem;
  color: var(--fog);
  line-height: 1.5;
}
.page-cta-alt .inline-link {
  color: var(--brass-dark);
  font-weight: 600;
  white-space: nowrap;
}

/* ----- Contact page layout ----- */
.contact-page {
  background: var(--sail);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
}
.contact-page-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 768px) {
  .contact-page-inner { grid-template-columns: 1fr; gap: 2rem; }
}
.contact-form-card {
  background: var(--white);
  border: 1px solid rgba(21, 28, 42, 0.08);
  border-top: 3px solid var(--brass-bright);
  border-radius: 22px;
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: 0 2px 8px rgba(21, 28, 42, 0.04), 0 20px 48px rgba(21, 28, 42, 0.07);
}
.contact-form-card h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: var(--weight-h3);
  font-size: var(--type-h3);
  color: var(--text);
  margin-bottom: 0.75rem;
}
.contact-form-card .form-intro {
  font-size: var(--type-body);
  color: var(--slate);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

.contact-info-card h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: var(--weight-h3);
  font-size: var(--type-h3);
  color: var(--text);
  margin-bottom: 0.65rem;
  margin-top: 1.5rem;
}
.contact-info-card h3:first-child { margin-top: 0; }
.contact-info-card p, .contact-info-card a {
  display: block;
  font-size: 0.92rem;
  color: var(--fog);
  line-height: 1.65;
  text-decoration: none;
  margin-bottom: 0.35rem;
}
.contact-info-card a { color: var(--brass-dark); font-weight: 600; }
.contact-info-card a:hover { color: var(--navy); }

/* ==========================================================================
   PHASE 1.5 REVISIONS (April 2026)
   Post-review cleanup + voice pass.
   ========================================================================== */

/* ----- Pain points: kill the iMessage bubbles, use numbered items ----- */
.pain-points .pain-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(21, 28, 42, 0.18);
}
.pain-points .pain-item:last-of-type {
  border-bottom: none;
}
.pain-points .pain-item-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--brass-dark);
  letter-spacing: -0.02em;
  min-width: 2.5rem;
}
.pain-points .pain-item-text {
  font-size: clamp(1rem, 2vw, 1.1rem);
  color: var(--text);
  line-height: 1.65;
}
.pain-points .pain-item-text strong {
  font-weight: 700;
}

/* Hero canvas particles run at all viewports. JS auto-tunes density:
   75 particles desktop, 35 particles mobile (see site.js). Keeps the
   navy starfield ambience even on phones — same brand, less load. */

/* ----- Accelerator: entry-ramp callout (link to AI Readiness Assessment) -----
   Lives inside .offer-band (dark navy), so this needs opaque light bg for contrast. */
.entry-ramp {
  background: var(--sail);
  border: 1px solid rgba(200, 169, 106, 0.35);
  border-left: 4px solid var(--brass-bright);
  border-radius: 14px;
  padding: clamp(2rem, 3.5vw, 2.5rem) clamp(2rem, 3.5vw, 2.75rem);
  margin: clamp(2.5rem, 5vw, 3.5rem) auto;
  max-width: 900px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
}
@media (max-width: 768px) {
  .entry-ramp { grid-template-columns: 1fr; gap: 1rem; }
}
.entry-ramp-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin-bottom: 0.5rem;
}
.entry-ramp h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: var(--weight-h3);
  font-size: var(--type-h3);
  color: var(--text);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.entry-ramp p {
  font-size: var(--type-body);
  color: var(--slate);
  line-height: 1.65;
  margin: 0;
}
.entry-ramp p strong {
  color: var(--text);
  font-weight: 600;
}
.entry-ramp .entry-ramp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.5rem;
  background: var(--navy);
  color: var(--sail);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
  box-shadow: 0 2px 8px rgba(21, 28, 42, 0.15);
}
.entry-ramp .entry-ramp-cta:hover {
  background: linear-gradient(180deg, var(--brass-highlight) 0%, var(--brass-bright) 100%);
  color: var(--navy);
  transform: translateY(-1px);
}
.entry-ramp .entry-ramp-cta svg { width: 16px; height: 16px; }

/* ==========================================================================
   PHASE 1.6 REVISIONS (April 2026)
   Post-review-2 fixes + Hatz tiers + 30-60-90 framework
   ========================================================================== */

/* ----- Hero CTA card: offering rows inside the branded card ----- */
.cta-doorways {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.5rem 0;
}
.cta-doorway {
  display: block;
  padding: 1rem 1.5rem;
  text-decoration: none;
  transition: background 0.2s ease;
  border-bottom: 1px solid rgba(21, 28, 42, 0.22);
}
.cta-doorway:last-child { border-bottom: 0; }
.cta-doorway:hover {
  background: rgba(212, 170, 85, 0.05);
}
.cta-doorway-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}
.cta-doorway-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.25;
}
.cta-doorway-price {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--brass-dark);
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}
.cta-doorway-price--soft {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--brass-dark);
  font-style: normal;
  letter-spacing: 0;
}

/* Featured row: Accelerator */
.cta-doorway--featured {
  background: linear-gradient(135deg, rgba(212, 170, 85, 0.08) 0%, rgba(212, 170, 85, 0.02) 100%);
  border-left: 4px solid var(--brass-bright);
  padding: 1.15rem 1.5rem 1.15rem calc(1.5rem - 4px);
  position: relative;
}
.cta-doorway--featured:hover {
  background: linear-gradient(135deg, rgba(212, 170, 85, 0.12) 0%, rgba(212, 170, 85, 0.04) 100%);
}
.cta-doorway--featured .cta-doorway-name {
  font-weight: 800;
  font-size: 1.05rem;
}
.cta-doorway-badge {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin-bottom: 0.4rem;
}
.cta-doorway-price-lg {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--brass-dark);
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}

/* Centered row: Technology Assessments */
.cta-doorway--centered {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.cta-doorway--centered .cta-doorway-name {
  font-size: 0.95rem;
}
.cta-doorway--centered .cta-doorway-price {
  text-align: center;
}

/* Stacked "from" label above price */
.price-from {
  display: block;
  font-size: 0.58rem;
  font-weight: 500;
  color: var(--fog);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  margin-bottom: 0.15rem;
}

/* Soft descriptions under rows */
.cta-doorway-sub {
  font-size: 0.75rem;
  color: var(--fog);
  line-height: 1.5;
  margin: 0.2rem 0 0;
}

/* ----- 30-60-90 crawl/walk/run framework on accelerator.html ----- */
.milestones {
  background: var(--sail);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(200, 169, 106, 0.1);
}
.milestones-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.milestones-eyebrow {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin-bottom: 0.75rem;
}
.milestones-heading {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-weight: var(--weight-h2);
  font-size: var(--type-h2);
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}
.milestones-heading em {
  font-style: normal;
  color: var(--brass-dark);
}
.milestones-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
  margin-top: 3rem;
}
/* Connecting gold line behind the day badges (desktop only) */
.milestones-grid::before {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--brass-bright) 15%, var(--brass-bright) 85%, transparent 100%);
  opacity: 0.35;
  z-index: 0;
}
@media (max-width: 900px) {
  .milestones-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .milestones-grid::before { display: none; }
}
.milestone {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  position: relative;
  text-align: center;
  z-index: 1;
}
.milestone-day {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--brass-bright);
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 2;
}
.milestone p {
  font-size: 0.95rem;
  color: var(--slate);
  line-height: 1.7;
  margin: 0;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .milestone {
    text-align: left;
    padding-left: 1rem;
    border-left: 2px solid rgba(200, 169, 106, 0.3);
  }
  .milestone p {
    max-width: none;
    margin-left: 0;
  }
}

/* ----- Hatz AI intro: split layout (text left, illustration right) ----- */
.hatz-intro-split {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.hatz-intro-illus {
  margin: 0;
  flex-shrink: 0;
}
.hatz-intro-illus img {
  display: block;
  width: clamp(180px, 22vw, 280px);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  opacity: 0.92;
}
@media (max-width: 768px) {
  .hatz-intro-split {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hatz-intro-illus {
    display: none;
  }
}

/* Trust note below tier grid */
.hatz-tiers-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--fog);
  font-style: italic;
}
.hatz-tiers-guarantee .trust-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--brass-dark);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----- Hatz tier comparison on services.html ----- */
.hatz-tiers {
  margin: clamp(2rem, 4vw, 3rem) 0;
}
.hatz-tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1024px) {
  .hatz-tiers-grid { grid-template-columns: 1fr; }
}
.hatz-tier {
  background: var(--white);
  border: 1px solid rgba(21, 28, 42, 0.08);
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(21, 28, 42, 0.04), 0 8px 24px rgba(21, 28, 42, 0.05);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
}
.hatz-tier:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(21, 28, 42, 0.06), 0 16px 40px rgba(21, 28, 42, 0.1);
  border-color: rgba(212, 170, 85, 0.25);
}
.hatz-tier--featured {
  border: 2px solid var(--brass-bright);
}
.hatz-tier--featured::before {
  content: 'Most popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brass-bright);
  color: var(--navy);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  white-space: nowrap;
}
.hatz-tier-name {
  font-family: 'Outfit', sans-serif;
  font-weight: var(--weight-h3);
  font-size: var(--type-h3);
  color: var(--text);
  margin-bottom: 0.35rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.hatz-tier-size {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brass-dark);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.hatz-tier-price {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.hatz-tier-price .per {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--fog);
}
.hatz-tier-price--contact {
  font-size: 1.5rem;
  color: var(--brass-dark);
  font-style: italic;
}
.hatz-tier-lead {
  font-size: 0.88rem;
  color: var(--fog);
  font-style: italic;
  margin: 1rem 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(21, 28, 42, 0.18);
  line-height: 1.55;
}
.hatz-tier ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  flex: 1;
}
.hatz-tier ul li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 0.65rem;
}
.hatz-tier ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--brass-bright);
  border-bottom: 2px solid var(--brass-bright);
  transform: rotate(-45deg);
}
.hatz-tier-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 1.5rem;
  background: var(--navy);
  color: var(--sail);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
  margin-top: auto;
}
.hatz-tier-cta:hover {
  background: linear-gradient(180deg, var(--brass-highlight) 0%, var(--brass-bright) 100%);
  color: var(--navy);
  transform: translateY(-1px);
}
.hatz-tier-cta svg { width: 16px; height: 16px; }
.hatz-tier--featured .hatz-tier-cta {
  background: linear-gradient(180deg, var(--brass-highlight) 0%, var(--brass-bright) 100%);
  color: var(--navy);
}
.hatz-tier--featured .hatz-tier-cta:hover {
  background: linear-gradient(180deg, var(--navy-soft) 0%, var(--navy) 100%);
  color: var(--sail);
}

/* Custom tier callout (separate horizontal card below the 3-grid) */
.hatz-custom {
  background: var(--navy);
  color: var(--sail);
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2rem);
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  border: 1px solid rgba(212, 170, 85, 0.25);
}
@media (max-width: 768px) {
  .hatz-custom { grid-template-columns: 1fr; gap: 1rem; }
}
.hatz-custom h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: var(--weight-h3);
  font-size: var(--type-h3);
  color: var(--sail);
  margin-top: 0;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.hatz-custom p {
  font-size: var(--type-body);
  color: rgba(251, 249, 243, 0.78);
  line-height: 1.65;
  margin: 0;
}
.hatz-custom p strong { color: var(--sail); }
.hatz-custom .hatz-tier-cta {
  background: linear-gradient(180deg, var(--brass-highlight) 0%, var(--brass-bright) 100%);
  color: var(--navy);
}
.hatz-custom .hatz-tier-cta:hover {
  background: var(--sail);
  color: var(--navy);
}

/* ----- Services page: "Project work and advisory" section ----- */
.more-ways {
  max-width: 1100px;
  margin: 4rem auto 0;
}

/* Section header: 2-column on desktop with intro copy + automation
   cycle illustration. Stacks on smaller screens. */
.more-ways-header {
  display: grid;
  grid-template-columns: 1fr clamp(240px, 28%, 320px);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.more-ways-intro {
  max-width: 620px;
}
.more-ways-intro h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: var(--weight-h2);
  font-size: var(--type-h2);
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.more-ways-intro p {
  font-size: var(--type-body);
  color: var(--slate);
  line-height: 1.65;
  margin-bottom: 0.85rem;
}
.more-ways-intro p:last-child { margin-bottom: 0; }
.more-ways-sub {
  font-size: 1rem !important;
  color: var(--slate);
}

.more-ways-figure {
  margin: 0;
  width: 100%;
  justify-self: center;
}
.more-ways-figure img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  animation: more-ways-figure-bob 8s ease-in-out infinite;
}
@keyframes more-ways-figure-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .more-ways-figure img { animation: none; }
}

@media (max-width: 900px) {
  .more-ways-header {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
  .more-ways-intro {
    max-width: none;
    margin: 0 auto;
  }
  .more-ways-figure {
    max-width: 260px;
    margin: 0 auto;
  }
}

.more-ways-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .more-ways-grid { grid-template-columns: 1fr; }
}
.more-way {
  position: relative;
  background:
    linear-gradient(180deg, var(--white) 0%, rgba(251, 249, 243, 0.4) 100%);
  border: 1px solid rgba(21, 28, 42, 0.08);
  border-radius: 16px;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  box-shadow: 0 1px 2px rgba(21, 28, 42, 0.04), 0 8px 24px rgba(21, 28, 42, 0.05);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}
/* Subtle brass accent line at top of each card — small but premium feel. */
.more-way::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brass-dark) 0%, var(--brass-bright) 50%, var(--brass-dark) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.more-way:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(21, 28, 42, 0.06), 0 20px 50px rgba(21, 28, 42, 0.12);
  border-color: rgba(212, 170, 85, 0.4);
}
.more-way:hover::before {
  opacity: 1;
}
.more-way-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(212, 170, 85, 0.22) 0%, rgba(212, 170, 85, 0.06) 100%);
  border: 1px solid rgba(212, 170, 85, 0.32);
  margin-bottom: 1.4rem;
  color: var(--brass-dark);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, border-color 0.3s ease;
}
.more-way:hover .more-way-icon {
  transform: scale(1.06) rotate(-3deg);
  background: linear-gradient(135deg, rgba(212, 170, 85, 0.35) 0%, rgba(212, 170, 85, 0.12) 100%);
  border-color: var(--brass-bright);
}
.more-way-icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--brass-dark);
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s ease;
}
.more-way:hover .more-way-icon svg {
  stroke: var(--navy);
}
/* Motif illustration images inside the icon box */
.more-way-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

/* Editorial illustration above each project-work card (replaces icon box) */
/* Fixed-height illustration zone — ensures H3 always starts at the same vertical
   position regardless of SVG internal whitespace differences between illustrations. */
.more-way-illus {
  /* Pull flush to card edges — negate card padding on all sides except bottom */
  margin: calc(-1 * clamp(1.75rem, 3vw, 2.25rem));
  margin-bottom: 1.5rem;
  padding: 0;
  /* Fixed height — clips bottom SVG whitespace, not the illustration itself */
  height: 240px;
  overflow: hidden;
  display: block;
}
.more-way-illus img {
  display: block;
  width: 100%;
  height: auto;
  /* Shift up so bottom empty SVG space clips, not the illustration content */
  transform: translateY(-6%);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  opacity: 0.92;
  mix-blend-mode: multiply;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.more-way:hover .more-way-illus img {
  transform: translateY(-6%) scale(1.04);
  opacity: 1;
}

.more-way h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: var(--weight-h3);
  font-size: var(--type-h3);
  color: var(--text);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.more-way p {
  font-size: var(--type-body);
  color: var(--slate);
  line-height: 1.7;
  margin: 0;
}
.more-way p strong { color: var(--text); font-weight: 600; }

/* ----- Hatz AI brand lean-in (scoped to #ai-platform only) ----- */
/* Hatz brand colors from docs.hatz.ai marketing materials:
   Purple primary: #4d00b0
   Blue accent:    #334BFA
*/

/* ----- Accelerator: Hatz illustration. Square editorial line art
   layered into the platform-top grid as a paired column with the intro
   text. SVG ships with a transparent background so the page's sail
   color shows through seamlessly. Image drag/select disabled so it
   reads as part of the canvas, not a clickable image. ----- */
.hatz-illustration {
  width: 100%;
  max-width: 520px;
  user-select: none;
  -webkit-user-select: none;
}
.hatz-illustration img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}
@media (max-width: 900px) {
  .hatz-illustration {
    max-width: 360px;
  }
}
@media (max-width: 640px) {
  .hatz-illustration {
    max-width: 280px;
  }
}

.hatz-partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.9rem;
  background: var(--navy);
  color: var(--white);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(21, 28, 42, 0.18);
  text-decoration: none;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(200, 169, 106, 0.18);
}
.hatz-partner-badge svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.9);
}
.hatz-partner-badge .hatz-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.hatz-partner-badge .hatz-badge-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.2rem;
}
.hatz-partner-badge .hatz-badge-name {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.005em;
}

/* Scoped Dyve-palette accents inside the Hatz platform section */
#ai-platform {
  position: relative;
}
#ai-platform::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--brass-bright) 25%, var(--brass-dark) 50%, var(--brass-bright) 75%, transparent 100%);
  opacity: 0.7;
  z-index: 2;
}
/* Canvas bg for this section — breaks the sail-sail-sail rhythm */
#ai-platform {
  background: var(--canvas);
}
#ai-platform .platform-stats .stat {
  border-left: none;
  border-top: 3px solid var(--brass-bright);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  box-shadow:
    0 1px 2px rgba(21, 28, 42, 0.05),
    0 8px 28px rgba(21, 28, 42, 0.09);
}
#ai-platform .platform-stats .stat:hover {
  box-shadow:
    0 2px 4px rgba(21, 28, 42, 0.07),
    0 12px 36px rgba(21, 28, 42, 0.12);
  transform: translateY(-2px);
}
/* Text-heading cards (replaced number stats 2026-04-15) */
#ai-platform .platform-stats .stat .num {
  color: var(--navy);
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 0.45rem;
  letter-spacing: -0.01em;
}
#ai-platform .platform-stats .stat .desc {
  font-size: 0.875rem;
  color: var(--slate);
  line-height: 1.6;
}
#ai-platform .platform-stats .stat:first-child {
  grid-column: auto;
}
#ai-platform .platform-stats .stat:first-child .num {
  color: var(--navy);
  font-size: 1.1rem;
}
/* Marquee edge fades match canvas background inside #ai-platform */
#ai-platform .integrations::before { background: linear-gradient(90deg, var(--canvas), transparent); }
#ai-platform .integrations::after  { background: linear-gradient(90deg, transparent, var(--canvas)); }
/* Featured (first) stat card — matches other cards, no tint */
#ai-platform .platform-stats .stat--featured {
  background: var(--white);
}
/* 30/60/90 milestone row in offer band left column */
.service-milestones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  align-items: center;
  font-size: 0.775rem;
  color: var(--fog);
  margin: 0.85rem 0 1.1rem;
  line-height: 1.5;
}
.service-milestones span:nth-child(even) {
  color: var(--brass-dark);
  opacity: 0.4;
  font-size: 0.65rem;
}
/* "What else can we build?" block — elevated treatment */
.build-grid-block {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(200, 169, 106, 0.12);
  text-align: center;
}
.build-grid-desc {
  font-size: 0.875rem;
  color: var(--fog);
  margin: 0.35rem 0 1.1rem;
}

/* ".after-90" + ".after-90--standalone" family retired — "What happens after
   90 days" is now a callout inside the navy closing section on accelerator.html,
   rendered via .about-cta-section. Verified 0 HTML references before removal. */

/* ==========================================================================
   HOMEPAGE RESTRUCTURE (Launch Sprint Day 1)
   Editorial long-form layout. No three-column grids. Narrative arc.
   ========================================================================== */

/* Shared eyebrow label used across new homepage sections */
.section-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-dark);
  text-align: center;
  margin-bottom: 1rem;
}

/* Homepage Phase 5 restructure families retired — the following class trees
   were left in place "for safety/reuse" during the homepage rework but have
   been orphan across all 10 shipping pages for months:
     .problem-section, .problem-inner, .problem-eyebrow, .problem-heading,
       .problem-beats
     .accelerator-explained, .accelerator-explained-inner, .accelerator-lede,
       .accelerator-phases, .accelerator-bottomline
     .phase, .phase-badge, .phase-num, .phase-days, .phase h3, .phase p
     .value-stack-home / .value-list
     .home-guarantee, .home-guarantee-inner
     .readiness-callout, .readiness-callout-inner, .readiness-link
     .other-ways, .other-ways-inner, .other-ways-body
   Verified 0 HTML references before removal. */

/* ==========================================================================
   HOMEPAGE REWORK (Day 1 v2)
   Simplified: short contextual intro + services section (Accelerator featured).
   Sections added: .intro-paragraph, .how-we-help, .service
   Removed sections: .problem-section, .accelerator-explained, .value-stack-home,
     .home-guarantee, .readiness-callout, .other-ways (CSS kept for safety/reuse)
   ========================================================================== */

/* ----- Our Approach to AI section (v3.3: absorbs partners + intro into one narrative beat) ----- */
.approach {
  background: var(--sail);
  padding: clamp(4.5rem, 9vw, 7rem) 1.5rem clamp(3rem, 6vw, 5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.approach-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.approach .section-eyebrow {
  margin-bottom: 1rem;
}
.approach-heading {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: var(--weight-h2);
  color: var(--text);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 auto 2rem;
  max-width: 640px;
}
.approach-para {
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  color: var(--slate);
  line-height: 1.75;
  margin: 0 auto 1.25rem;
  max-width: 640px;
}
.approach-para:last-child {
  margin-bottom: 0;
}
.approach-para strong {
  color: var(--text);
  font-weight: 600;
}

/* ===== ILLUSTRATION PLACEMENTS ===== */
/* Two-column split: text + illustration side by side */
.approach-inner { max-width: 1100px; }
.approach-split {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 6vw, 6rem);
}
.approach-text { flex: 1; min-width: 0; }
.approach-illus-hero {
  flex-shrink: 0;
  width: clamp(220px, 28vw, 360px);
  display: block;
  opacity: 0.88;
}

/* Pain points split */
.pain-points-split {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 6vw, 5rem);
}
.pain-points-text { flex: 1; min-width: 0; }
.pain-points-illus {
  flex-shrink: 0;
  width: clamp(280px, 36vw, 480px);
  display: block;
  opacity: 0.88;
}

/* Standalone centered illustration */
.illus-centered {
  display: block;
  margin: 2rem auto 0;
  width: clamp(200px, 35vw, 380px);
  opacity: 0.9;
}

/* Contact page illustration */
.contact-illus {
  display: block;
  width: clamp(180px, 22vw, 300px);
  opacity: 0.88;
  margin: 0 auto;
}

/* About page illustration */
.about-illus {
  display: block;
  width: clamp(220px, 30vw, 380px);
  opacity: 0.88;
  margin: 2rem auto 0;
}

@media (max-width: 767px) {
  .approach-inner { max-width: 760px; }
  .approach-split { flex-direction: column; }
  .approach-illus-hero { display: none; }
  .pain-points-split { flex-direction: column; }
  .pain-points-illus { display: none; }
  .contact-illus { display: none; }
}

/* ===== HOW WE WORK — StoryBrand 3-step plan on homepage (canvas bg, sits
   immediately below .approach so the two sections read as one narrative
   block: "our approach" (why) + "our plan" (how). ===== */
.how-we-work {
  background: var(--canvas);
  padding: 0 1.5rem clamp(4rem, 8vw, 6rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.how-we-work-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* how-we-work-floaters removed — paper-stack motif reserved for future use */
.how-we-work-rule {
  display: block;
  width: 80px;
  height: 1px;
  background: var(--brass);
  opacity: 0.2;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
}
.how-we-work-heading {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: var(--weight-h2);
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0.75rem 0 clamp(2rem, 4vw, 2.75rem);
}
.plan-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  text-align: left;
}
@media (max-width: 860px) {
  .plan-steps { grid-template-columns: 1fr; gap: 1rem; }
}
/* Plan cards: white on canvas for real contrast, uniform 1px border, soft shadow
   that lifts off the canvas bg, top brass accent bar for visual unity with the
   rest of the site's card language (featured accelerator card uses the same pattern). */
.plan-step {
  position: relative;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--white);
  border: 1px solid rgba(21, 28, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(21, 28, 42, 0.04), 0 8px 24px rgba(21, 28, 42, 0.06);
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.plan-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brass-dark) 0%, var(--brass-bright) 50%, var(--brass-dark) 100%);
  opacity: 0.7;
  transition: opacity 0.25s ease;
  border-radius: 14px 14px 0 0;
}
.plan-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(21, 28, 42, 0.06), 0 16px 40px rgba(21, 28, 42, 0.1);
  border-color: rgba(200, 169, 106, 0.3);
}
.plan-step:hover::before {
  opacity: 1;
}
/* Number: brass accent, smaller than before so the title takes the visual lead. */
.plan-step-num {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dark);
  line-height: 1;
  margin: 0 0 0.85rem;
}
.plan-step-num::before { content: 'Step '; }
/* Title: promoted to the visual anchor of each card. */
.plan-step-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--navy);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}
.plan-step-desc {
  font-size: 0.95rem;
  color: var(--slate);
  line-height: 1.65;
  margin: 0;
}

/* ===== CERTIFIED PARTNERSHIPS — compact trust strip. One short line of
   context, two partner marks side by side with brief status + product
   list. No big cards, no filler paragraphs. ===== */
.partnerships {
  background: var(--canvas);
  padding: 0 1.5rem clamp(3.5rem, 7vw, 5rem);
  text-align: center;
}
/* Inline variant used on services.html — sits on a sail bg between the
   navy hero and the Hatz tiers section, with tighter padding so it
   doesn't dominate the page. */
.partnerships--on-sail {
  background: var(--sail);
  padding: clamp(2rem, 4vw, 3rem) 1.5rem clamp(2rem, 4vw, 2.5rem);
}
.partnerships--on-sail .partnerships-line {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.partnerships-inner {
  max-width: 880px;
  margin: 0 auto;
}
.partnerships-line {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(0.72rem, 1vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin: 0 auto clamp(1.75rem, 3.5vw, 2.5rem);
}

/* Strip: two partner marks separated by a thin brass rule. */
.partnerships-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 760px;
  margin: 0 auto;
}
.partner-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.partner-mark-divider {
  width: 1px;
  height: 60px;
  background: rgba(200, 169, 106, 0.2);
}
.partner-mark-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  height: 40px;
  margin-bottom: 0.35rem;
}
.partner-mark-logo svg {
  height: 28px;
  width: 28px;
  display: block;
  flex-shrink: 0;
}
.partner-mark-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1;
}
.partnership-logo-hatz-mark {
  display: inline-flex;
  border-radius: 8px;
  box-shadow: 0 0 0 1.5px rgba(200, 169, 106, 0.5);
}
.partner-mark-name--hatz {
  font-weight: 700;
  background: linear-gradient(90deg, #4d00b0 0%, #334BFA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.partner-mark-status {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin: 0;
}
.partner-mark-detail {
  font-size: 0.85rem;
  color: var(--slate);
  margin: 0;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .partnerships-strip {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .partner-mark-divider {
    width: 60px;
    height: 1px;
    justify-self: center;
  }
}
.partnerships-rule {
  display: block;
  width: 80px;
  height: 1px;
  background: var(--brass);
  opacity: 0.2;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}

/* ----- How we help (services section) ----- */
.how-we-help {
  background: var(--sail);
  padding: clamp(4rem, 8vw, 7rem) 1.5rem clamp(5rem, 9vw, 8rem);
}
.how-we-help-inner {
  max-width: 900px;
  margin: 0 auto;
}
.how-we-help > .how-we-help-inner > h2 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--weight-h2);
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 3rem;
}
.how-we-help .section-eyebrow {
  text-align: center;
  margin-bottom: 0.75rem;
}

/* Service item — shared styles (Apple-inspired: subtle shadow, clean) */
.service {
  background: var(--white);
  border: 1px solid rgba(21, 28, 42, 0.12);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(21, 28, 42, 0.04), 0 6px 22px rgba(21, 28, 42, 0.07);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.service:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(21, 28, 42, 0.06), 0 12px 34px rgba(21, 28, 42, 0.1);
  border-color: rgba(212, 170, 85, 0.3);
}

/* Featured service (Accelerator) — bigger, more prominent, clean white (no gold border) */
.service--featured {
  padding: 3rem 3rem 2.75rem;
  margin-bottom: 2.5rem;
  border: 1px solid rgba(21, 28, 42, 0.14);
  box-shadow:
    0 1px 2px rgba(21, 28, 42, 0.04),
    0 4px 16px rgba(21, 28, 42, 0.06),
    0 24px 48px rgba(21, 28, 42, 0.08);
  position: relative;
  overflow: hidden;
}

/* ===== Service card featured — nautical motif watermark ===== */
/* Sailboat accent below the featured card CTA */
.service-cta-sailboat {
  display: block;
  width: 72px;
  height: 72px;
  margin-top: 1.25rem;
  opacity: 0.18;
  filter: brightness(0) sepia(1) saturate(4) hue-rotate(5deg);
  user-select: none;
  pointer-events: none;
}
@media (max-width: 640px) {
  .service--featured { padding: 2rem 1.75rem 1.75rem; }
}
.service--featured .service-label {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 1rem;
  position: relative;
}
.service--featured .service-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
  margin: 0 0 0.85rem 0;
  line-height: 1.1;
}
.service--featured .service-hook {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
  margin: 0 0 1.25rem 0;
  letter-spacing: -0.005em;
}
.service--featured .service-description {
  font-size: 1rem;
  color: var(--slate);
  line-height: 1.7;
  margin: 0 0 1.5rem 0;
}
/* .service-bullets removed v3.4 \u2014 bullets now live inside the includes list on the right column */

/* ----- Accelerator featured card: two-column grid with value stack (v3.4) ----- */
.service-featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2.5rem;
  /* Vertically center the shorter left column (narrative + CTA) so the card
     doesn't leave awkward empty sail below "See how it works →" when the
     right-side includes list is taller. Accelerator-page offer variant keeps
     align-items: start via its own rule further down. */
  align-items: center;
}
@media (max-width: 860px) {
  .service-featured-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.service-featured-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.service-featured-content .service-label {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-dark);
  background: rgba(212, 170, 85, 0.12);
  border: 1px solid rgba(212, 170, 85, 0.35);
  border-radius: 100px;
  padding: 0.3rem 0.85rem;
  margin: 0 0 0.85rem 0;
}

/* Value stack (What's included) */
.service-featured-includes {
  background: linear-gradient(180deg, rgba(21, 28, 42, 0.025) 0%, rgba(21, 28, 42, 0.01) 100%);
  border: 1px solid rgba(21, 28, 42, 0.1);
  border-radius: 14px;
  padding: 1.75rem 1.75rem 1.5rem;
}
@media (max-width: 640px) {
  .service-featured-includes { padding: 1.5rem 1.25rem 1.25rem; }
}
.includes-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
  margin: 0 0 1.25rem 0;
}
.includes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.includes-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.92rem;
  color: var(--slate);
  line-height: 1.55;
}
.includes-check {
  width: 20px;
  height: 20px;
  /* color drives sprite <use> stroke via currentColor; stroke kept for any
     remaining inline <polyline> children not yet migrated to sprite. */
  color: var(--brass-bright);
  stroke: var(--brass-bright);
  margin-top: 0.15rem;
  flex-shrink: 0;
}
.includes-list li.includes-highlight {
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(21, 28, 42, 0.22);
  margin-bottom: 0.15rem;
}
.includes-list li.includes-highlight:nth-of-type(2) {
  margin-bottom: 0.6rem;
}
.includes-list li.includes-highlight + li:not(.includes-highlight) {
  margin-top: 0.25rem;
}
.includes-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.includes-text strong {
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.includes-tag {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brass-dark);
  letter-spacing: 0.02em;
}

/* Featured card CTA (needs to live at bottom of the left column) */
.service--featured .service-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--brass-dark);
  text-decoration: none;
  margin-top: 0.25rem;
  transition: color 0.2s ease, gap 0.2s ease;
}
.service--featured .service-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.service--featured .service-cta:hover {
  color: var(--navy);
  gap: 0.6rem;
}
.service--featured .service-cta:hover svg {
  transform: translateX(3px);
}

/* ----- Secondary services: promotional product cards (v3.4) ----- */
/* More ways we work with teams — editorial numbered layout (replaces secondary-services card grid) */
.more-ways {
  margin-top: 5rem;
  padding-top: 3rem;
  position: relative;
}
.more-ways::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: var(--brass);
  opacity: 0.2;
}
.more-ways::before {
  content: 'More ways we work with teams';
  display: block;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
  margin-bottom: 3rem;
  position: relative;
}
/* Homepage editorial row layout — scoped to .how-we-help so services page card tiles keep their card padding/borders */
/* Editorial numbered cards on homepage "How we help".
   Kept card background/border/radius from base .more-way, then tightened the
   grid: smaller number column (80px) + tighter gap (1.5rem) + real horizontal
   padding so the "01 / 02 / 03" no longer hugs the card edge. Cards stack
   vertically with a 1rem rhythm between them. */
.how-we-help .more-way {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.5rem;
  padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.75rem, 3vw, 2.25rem);
  align-items: start;
  margin-bottom: 1rem;
}
.how-we-help .more-way:last-of-type {
  margin-bottom: 0;
}
.more-way-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 4.5vw, 3.25rem);
  color: var(--brass-dark);
  line-height: 1;
  letter-spacing: -0.03em;
}
.more-way-body {
  max-width: 680px;
}
.more-way-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 0.85rem;
}
.more-way-desc {
  font-size: 1rem;
  color: var(--slate);
  line-height: 1.65;
  margin: 0 0 1rem;
}
.more-way-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
}
.more-way-list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.92rem;
  color: var(--slate);
  line-height: 1.5;
}
.more-way-list li::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass-dark);
}
.more-way-meta {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 1rem;
}
.more-way-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--brass-dark);
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
}
.more-way-link:hover {
  color: var(--navy);
  gap: 0.55rem;
}
/* Inner list inside editorial cards collapses to single column on phones.
   The full editorial layout reset (single-column, real horizontal padding,
   smaller numerals) lives in the @media (max-width: 720px) block lower in
   the file alongside the rest of the homepage mobile tuning. */
@media (max-width: 768px) {
  .more-way-list {
    grid-template-columns: 1fr;
  }
}
/* Services-page .more-way cards (icon + title + paragraph): tighten
   horizontal padding slightly on narrow viewports so the text isn't
   crammed against rounded edges, but always keep meaningful padding. */
@media (max-width: 640px) {
  .more-ways-grid > .more-way {
    padding: 1.5rem 1.25rem;
  }
  .more-ways-grid {
    gap: 1rem;
  }
}
/* Featured card: dark brass left-border accent (visual hierarchy) */
.secondary-service:first-child {
  border-left: 3px solid var(--brass-dark);
}
@media (max-width: 820px) {
  .secondary-services {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
.secondary-service {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  text-align: left;
  background: var(--white);
  border: 1px solid rgba(21, 28, 42, 0.08);
  border-radius: 14px;
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 0 1px 3px rgba(21, 28, 42, 0.04), 0 6px 20px rgba(21, 28, 42, 0.06);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}
.secondary-service:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(21, 28, 42, 0.06), 0 14px 32px rgba(21, 28, 42, 0.1);
  border-color: rgba(212, 170, 85, 0.3);
}
.secondary-services-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.secondary-services-list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.88rem;
  color: var(--slate);
  line-height: 1.45;
}
.secondary-services-list li::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass-dark);
}
.secondary-icon {
  width: 36px;
  height: 36px;
  border-radius: 0;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brass-dark);
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}
.secondary-icon svg {
  width: 28px;
  height: 28px;
  color: var(--brass-dark);
  stroke: var(--brass-dark);
}
.secondary-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0;
}
.secondary-description {
  font-size: 0.92rem;
  color: var(--slate);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.secondary-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brass-dark);
  text-decoration: none;
  margin-top: 0.6rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(21, 28, 42, 0.1);
  width: 100%;
  transition: color 0.2s ease, gap 0.2s ease;
}
.secondary-link:hover {
  color: var(--navy);
  gap: 0.5rem;
}

/* .closing-section family retired Apr 2026 — accelerator closing section was
   replaced by the final-CTA on navy + absorbed into FAQ (Phase 2B).
   Classes not in any shipping HTML. */

/* ===== FEATURED ACCELERATOR CARD — brass top accent (kept from ornamental pass 2026-04-15) ===== */
.service--featured::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--brass-bright) 20%, #D4AA55 50%, var(--brass-bright) 80%, transparent 100%);
  border-radius: 16px 16px 0 0;
  opacity: 0.85;
}

/* ================================================================
   ACCELERATOR PAGE — .service--offer variant
   Reuses the homepage .service--featured editorial layout, adds
   a hero price block on the left and expandable dropdown items
   on the right. Section sits inside the navy .offer-band section
   so the sail card floats on navy.
   ================================================================ */
.service--offer {
  max-width: 1100px;
  margin: 1.5rem auto 0 !important;
  background: var(--sail);
}
.service--offer:hover { transform: none; }    /* editorial card, not interactive */

/* Vertically center the left narrative column so it doesn't leave blank space
   below the CTA when the right-side includes list is taller. */
.service--offer .service-featured-grid { align-items: start; }
.service--offer .service-featured-content { justify-content: center; gap: 0; }

/* Sticky left column: price + CTA stay visible while user explores right-column accordions */
@media (min-width: 861px) {
  .service--offer .service-featured-content {
    position: sticky;
    top: 80px; /* nav height (56px) + breathing room */
    align-self: start;
  }
}

/* Trust bar below CTA: fills sticky column meaningfully with risk reducers + tagline close */
.service-featured-trust {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(21, 28, 42, 0.12);
  width: 100%;
}
.service-trust-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.service-trust-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  color: var(--slate);
  line-height: 1.35;
}
.trust-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--brass-dark);
}
.service-trust-tagline {
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--brass-dark);
  margin: 0;
  letter-spacing: 0.01em;
}

/* Hero price block (left column) — Outfit 800, brass-dark on sail.
   Extra bottom breathing room separates price from the hook paragraph. */
.service-price {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0 0 2.25rem 0;
}
.service--offer .service-hook { margin-top: 0; }
.service--offer .service-description { margin-top: 0; }
.service--offer .service-cta { margin-top: 0.5rem; }
.service-price-amount {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(3.25rem, 8vw, 4.75rem);
  font-weight: 800;
  color: var(--brass-dark);
  line-height: 1;
  letter-spacing: -0.03em;
}
.service-price-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  line-height: 1.4;
}
.service-price-sep {
  color: var(--brass-bright);
  margin: 0 0.35rem;
  font-weight: 700;
}
.service-price-savings {
  color: var(--brass-dark);
  font-weight: 700;
}
@media (max-width: 640px) {
  .service-price-amount { font-size: clamp(2.75rem, 12vw, 3.75rem); }
  .service-price-meta { font-size: 0.72rem; }
}

/* Expandable include items (dropdown rows) */
.includes-list li.includes-expand {
  display: block;      /* override grid layout from base .includes-list li */
  padding: 0;
  border-top: 1px solid rgba(21, 28, 42, 0.08);
}
.includes-list li.includes-expand:first-of-type { border-top: 1px solid rgba(21, 28, 42, 0.08); margin-top: 0.1rem; }

/* When a highlight row is ALSO a dropdown: reset the old highlight-specific
   border-bottom/padding so the shared .includes-expand borders take over. */
.includes-list li.includes-highlight.includes-expand {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
/* Stronger top divider between the last featured highlight and the first
   non-featured dropdown — gives the group a clean visual break. */
.includes-list li.includes-highlight.includes-expand + li.includes-expand:not(.includes-highlight) {
  border-top: 1px solid rgba(21, 28, 42, 0.18);
  margin-top: 0.35rem;
  padding-top: 0.15rem;
}
.includes-list li.includes-expand details {
  width: 100%;
}
.includes-list li.includes-expand summary {
  display: grid;
  grid-template-columns: 22px 1fr 18px;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.4;
  transition: color 0.2s ease;
}
.includes-list li.includes-expand summary::-webkit-details-marker { display: none; }
.includes-list li.includes-expand summary::marker { content: ''; }
.includes-list li.includes-expand summary:hover { color: var(--brass-dark); }
.includes-list li.includes-expand summary:focus-visible {
  outline: 2px solid var(--brass-dark);
  outline-offset: 2px;
  border-radius: 4px;
}
.includes-expand-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  color: inherit;
}
.includes-chevron {
  width: 18px;
  height: 18px;
  stroke: var(--slate);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}
.includes-list li.includes-expand details[open] summary .includes-chevron {
  transform: rotate(180deg);
}
.includes-list li.includes-expand details[open] summary {
  color: var(--brass-dark);
}
.includes-expand-body {
  padding: 0 0 0.9rem 2.15rem; /* align under label column (22px icon + 0.75rem gap ≈ 34.5px → 2.15rem) */
}
.includes-expand-body p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--slate);
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .includes-chevron { transition: none; }
}

/* ===== ANIMATION STAGGER (kept — smooth reveal, not decoration) ===== */
/* .more-way:nth-child transition-delay removed — JS reveal observer handles stagger via data-delay */
.why-dyve p.reveal:nth-of-type(1) { transition-delay: 0ms; }
.why-dyve p.reveal:nth-of-type(2) { transition-delay: 140ms; }

/* ----- Sticky jump-to-pricing CTA: REMOVED 2026-04-10 per Yvette (reappeared over footer, annoying) ----- */

/* ===== ABOUT PAGE: Founders navy section ===== */
.about-founders-navy {
  background: var(--navy);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 2.5rem);
  position: relative;
}
.about-founders-navy-inner {
  max-width: 1100px;
  margin: 0 auto;
}
/* Founders illustration: centered above the two cards */
.founders-illustration {
  display: block;
  max-height: 170px;
  width: auto;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  opacity: 0.9;
}

/* ===== ABOUT PAGE: Ready to talk section (navy) ===== */
.about-cta-section {
  background: var(--navy);
  padding: clamp(3rem, 6vw, 4.75rem) 1.5rem;
  color: var(--sail);
  position: relative;
}
.about-cta-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.about-cta-inner h2 {
  color: var(--sail);
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 3.5vw, 2rem);
  letter-spacing: -0.01em;
}
.about-cta-inner p {
  color: rgba(251, 249, 243, 0.85);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 auto 1rem;
  max-width: 620px;
}
.about-cta-tagline {
  color: var(--brass-bright) !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.95rem !important;
  letter-spacing: 0.04em;
  margin-bottom: 1.75rem !important;
}
.about-cta-btn {
  display: inline-block;
  max-width: 280px;
  width: 100%;
  margin-top: 0.5rem;
  text-decoration: none;
  text-align: center;
}

/* ===== ABOUT PAGE: FAQ (sail) ===== */
.about-faq {
  background: var(--sail);
  padding: clamp(3rem, 5.5vw, 4.5rem) 1.5rem clamp(3rem, 5vw, 4rem);
}
.about-faq-inner {
  max-width: 860px;
  margin: 0 auto;
}
.about-faq-eyebrow {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin: 0 0 0.5rem;
}
.about-faq-heading {
  text-align: center;
  color: var(--navy);
  margin: 0 0 2.25rem;
  font-size: clamp(1.75rem, 3.5vw, 2rem);
  letter-spacing: -0.01em;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2.75rem;
}
.faq-item {
  background: var(--white);
  border: 1px solid rgba(200, 169, 106, 0.18);
  border-left: 3px solid var(--brass-dark);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}
.faq-item:hover {
  border-left-color: var(--brass-bright);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.faq-item[open] {
  border-left-color: var(--brass-bright);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.25rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }
.faq-item summary::after {
  content: '';
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%238A6C28' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--brass-dark);
  outline-offset: 2px;
  border-radius: 8px;
}
.faq-body {
  padding: 0 1.25rem 1.1rem;
  border-top: 1px solid rgba(21, 28, 42, 0.05);
  padding-top: 0.9rem;
}
.faq-body p {
  margin: 0 0 0.7rem;
  color: var(--slate);
  line-height: 1.7;
  font-size: 0.95rem;
}
.faq-body p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}

/* ===== ABOUT PAGE: contact callout (at bottom of FAQ) ===== */
.about-contact-callout {
  background: var(--canvas);
  border: 1px solid rgba(200, 169, 106, 0.2);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  text-align: center;
}
.about-contact-callout-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin: 0 0 1rem;
}
.about-contact-callout-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: center;
}
.about-contact-callout-list li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1rem;
  color: var(--slate);
  line-height: 1.5;
}
.about-contact-callout-list .cc-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog);
  min-width: 54px;
  text-align: right;
}
.about-contact-callout-list a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(21, 28, 42, 0.18);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.about-contact-callout-list a:hover {
  color: var(--brass-dark);
  border-bottom-color: var(--brass-dark);
}
.about-contact-callout-note {
  font-size: 0.88rem;
  color: var(--fog);
  margin: 0 0 1.1rem;
  font-style: italic;
}
.about-contact-callout-social {
  font-size: 0.92rem;
  color: var(--slate);
  margin: 0;
}
.about-contact-callout-social a {
  color: var(--brass-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 108, 40, 0.3);
  transition: border-color 0.15s ease;
}
.about-contact-callout-social a:hover {
  border-bottom-color: var(--brass-dark);
}

@media (max-width: 640px) {
  .about-cta-inner p { font-size: 0.98rem; }
  .about-contact-callout { padding: 1.75rem 1.25rem; }
  .about-contact-callout-list li {
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
  }
  .about-contact-callout-list .cc-label {
    min-width: 0;
    text-align: center;
  }
  .faq-item summary {
    font-size: 0.98rem;
    padding: 1rem 1.1rem;
  }
  .faq-body { padding: 0.85rem 1.1rem 1rem; }
  .faq-body p { font-size: 0.92rem; }
}

/* ===== ABOUT PAGE: brass accent utility (context-aware) ===== */
.brass-accent {
  color: var(--brass-dark);
  font-weight: 600;
  transition: color 0.2s ease;
}
/* On navy backgrounds, use --brass-bright for contrast against deep navy. */
.page-hero .brass-accent,
.about-cta-section .brass-accent,
.hero .brass-accent,
.why-dyve .brass-accent {
  color: var(--brass-bright);
}

/* ===== ABOUT PAGE: inline narrative links (bodycopy + FAQ) ===== */
.page-body-inner .inline-link,
.faq-body .inline-link {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 169, 106, 0.55);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.page-body-inner .inline-link:hover,
.faq-body .inline-link:hover {
  color: var(--brass-dark);
  border-bottom-color: var(--brass-dark);
}

/* Mission line: slightly larger, centered, with soft brass left-border feel */
/* Mission pull-quote: brass rules above + below, italic body, eyebrow.
   Centerpiece of the About page — reads as the page's emotional core. */
.mission-quote {
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  text-align: center;
  border-top: 1px solid rgba(200, 169, 106, 0.4);
  border-bottom: 1px solid rgba(200, 169, 106, 0.4);
  position: relative;
}
.mission-quote-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin: 0 0 1rem;
}
.mission-quote blockquote {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 0 auto;
  max-width: 640px;
  font-style: italic;
}

/* What we do: two-column on desktop with text + automation cycle motif. */
.about-what-we-do {
  display: grid;
  grid-template-columns: 1fr clamp(300px, 38%, 380px);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  margin-bottom: 2rem;
}
.about-what-we-do-text > p {
  margin-bottom: 1rem;
}
.about-what-we-do-text > p:last-child { margin-bottom: 0; }
.about-what-we-do-figure {
  margin: 0;
  width: 100%;
  justify-self: center;
}
.about-what-we-do-figure img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  animation: about-figure-bob 9s ease-in-out infinite;
}
@keyframes about-figure-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .about-what-we-do-figure img { animation: none; }
}
@media (max-width: 760px) {
  .about-what-we-do {
    grid-template-columns: 1fr;
  }
  .about-what-we-do-figure {
    max-width: 220px;
    margin: 0.5rem auto 0;
  }
}

/* Founder section heading: on navy, so sail text + centered */
.founder-section-heading {
  margin-top: 0.5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--sail);
  text-align: center;
}
/* Eyebrow override for navy section — brass-bright instead of brass-dark */
.founder-eyebrow {
  color: var(--brass-bright);
  text-align: center;
}

/* ---------- About hero: D + Yve name etymology highlight ----------
   The "D" in Dustin and "Yve" in Yvette get a brass-bright color
   treatment so the reader can SEE how the brand name was built.
   Also applied to the standalone "Dyve" reveal that follows. */
.dyve-letter {
  color: var(--brass-bright);
  font-weight: 700;
}
.dyve-letter--full {
  color: var(--brass-bright);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ---------- About: Three Uniques — editorial layout, NO cards ----------
   Massive brass numerals (display-size) sit alongside the content,
   alternating left/right per item to break the centered rhythm. Brass
   hairline rules separate items. Reads like a manifesto. */
.about-uniques {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0;
  position: relative;
}
.founders-section {
  position: relative;
}
.about-uniques h2 {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.uniques-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.unique-item {
  display: grid;
  grid-template-columns: clamp(80px, 12vw, 140px) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid rgba(200, 169, 106, 0.3);
}
.unique-item:last-child {
  border-bottom: 1px solid rgba(200, 169, 106, 0.3);
}
/* Alternate direction: even items have number on the right */
.unique-item--reverse {
  grid-template-columns: 1fr clamp(80px, 12vw, 140px);
}
.unique-item--reverse .unique-num {
  order: 2;
  text-align: right;
}
.unique-item--reverse .unique-body {
  order: 1;
  text-align: right;
}
.unique-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 5.5rem);
  color: var(--brass-bright);
  line-height: 0.85;
  letter-spacing: -0.04em;
  opacity: 0.95;
}
.unique-body h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  color: var(--text);
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.unique-body p {
  font-size: clamp(0.95rem, 1.7vw, 1.05rem);
  color: var(--slate);
  line-height: 1.65;
  margin: 0;
  max-width: 540px;
}
.unique-item--reverse .unique-body p {
  margin-left: auto;
}
@media (max-width: 640px) {
  .unique-item,
  .unique-item--reverse {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .unique-item--reverse .unique-num {
    order: 0;
    text-align: left;
  }
  .unique-item--reverse .unique-body {
    order: 1;
    text-align: left;
  }
  .unique-item--reverse .unique-body p {
    margin-left: 0;
  }
}

/* ---------- About: Core Values — canvas card, editorial numbered list.
   Matches the process-link card treatment so all three canvas blocks
   (values, founders, process) read as one consistent design language.
   Large brass numerals + small contextual icon per value. ---------- */
.about-values {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.about-values .section-eyebrow {
  color: var(--brass-dark);
}
.about-values h2 {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(2.5rem, 5vw, 4.5rem);
  row-gap: 0;
}
.value {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.25rem) 0;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(21, 28, 42, 0.12);
  border-radius: 0;
  overflow: visible;
  transition: none;
}
.value::before {
  display: none;
}
.value:hover {
  transform: none;
  box-shadow: none;
}
.value-num {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  color: var(--brass-bright);
  opacity: 0.45;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 0.9rem;
}
.value-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--navy);
  margin: 0 0 0.5rem;
  text-transform: none;
  line-height: 1.25;
}
.value-desc {
  font-size: 0.95rem;
  color: var(--slate);
  line-height: 1.6;
  margin: 0;
}

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

/* ---------- About: Proven Process — nautical chart infographic ----------
   Recraft-generated hand-drawn map. HTML labels positioned over each
   numbered waypoint via percentage coords (matching the 1216×896
   viewBox). Below the map: a quick caption row + full editorial
   detail rows for each step's description. */
.about-process {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0;
}
.about-process h2 {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

/* Compact teaser block on the About page that links to the homepage's
   full process map. Replaces the old in-place .about-process section
   after the map relocated to /index.html#how-we-work on Apr 27, 2026. */
.about-process-link {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  text-align: left;
}
.about-process-link h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: var(--weight-h2);
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  color: var(--text);
  letter-spacing: -0.015em;
  margin: 0.5rem 0 0.85rem;
  line-height: 1.2;
}
.about-process-link p {
  font-size: 1rem;
  color: var(--slate);
  line-height: 1.65;
  margin: 0 0 1.1rem;
}
.about-process-link .section-cta {
  margin-top: 0;
}

/* The map figure */
.process-map {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.process-map-stage {
  position: relative;
  width: 100%;
}
.process-map-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Interactive map pins. Each pin sits at a waypoter via inline left/top
   (% of the SVG's viewBox). Pin = number badge over the SVG circle +
   name pill below + tooltip on hover/focus/active-tap. Buttons for
   keyboard accessibility. JS toggles .is-active on tap so mobile users
   can also see tooltips. */
.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Outfit', sans-serif;
  z-index: 2;
}
.map-pin:focus { outline: none; }
/* Active/hovered/focused pin lifts above all other pins so its tooltip
   never gets covered by a sibling. */
.map-pin:hover,
.map-pin:focus-visible,
.map-pin.is-active {
  z-index: 50;
}

/* Number badge: brass-bright pill, navy text + border. Sized to fully
   cover the SVG's embedded waypoint ball at every viewport so users
   only see one circle, not a smaller pill stacked on a larger ball.
   The map renders at ~72% of the 1216-unit viewBox at desktop max,
   so the SVG ball lands around 58–64px — pill upper clamp matches. */
.map-pin-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 5.5vw, 64px);
  height: clamp(36px, 5.5vw, 64px);
  border-radius: 50%;
  background: var(--brass-bright);
  color: var(--navy);
  border: 2px solid var(--navy);
  font-weight: 800;
  font-size: clamp(0.9rem, 1.7vw, 1.2rem);
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(21, 28, 42, 0.22);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
.map-pin:hover .map-pin-num,
.map-pin:focus-visible .map-pin-num {
  transform: scale(1.12);
  box-shadow: 0 4px 14px rgba(21, 28, 42, 0.32);
}

/* Name pill below the badge — high-contrast navy bg so the brand color
   pops against the cream map background. */
.map-pin-name {
  margin-top: 8px;
  background: var(--navy);
  color: var(--brass-bright);
  padding: 4px 10px 3px;
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(0.65rem, 0.95vw, 0.74rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(21, 28, 42, 0.18);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.map-pin:hover .map-pin-name,
.map-pin:focus-visible .map-pin-name {
  background: var(--brass-bright);
  color: var(--navy);
}

/* Tooltip with full step description. Appears below the name pill
   on hover or keyboard focus. Includes a small arrow pointing up. */
.map-pin-tip {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, -6px);
  background: var(--navy);
  color: var(--sail);
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.4;
  width: 200px;
  text-align: center;
  text-transform: none;
  letter-spacing: -0.005em;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.25s;
  box-shadow: 0 8px 24px rgba(21, 28, 42, 0.28);
  z-index: 10;
}
.map-pin-tip strong {
  color: var(--brass-bright);
  font-weight: 600;
}
.map-pin-tip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -7px;
  border: 7px solid transparent;
  border-bottom-color: var(--navy);
}
.map-pin:hover .map-pin-tip,
.map-pin:focus-visible .map-pin-tip,
.map-pin.is-active .map-pin-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
/* Tooltip exclusivity: when ANY pin is being hovered or focused, the
   .is-active default-shown tooltip on a SIBLING pin should disappear.
   Only the pin under the user's cursor or focus shows its tooltip.
   Without this rule, the auto-active "Align" tooltip stays visible
   while the user is hovering a different waypoint. */
.process-map-stage:has(.map-pin:hover) .map-pin.is-active:not(:hover) .map-pin-tip,
.process-map-stage:has(.map-pin:focus-visible) .map-pin.is-active:not(:focus-visible) .map-pin-tip {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
}
.process-map-stage:has(.map-pin--tip-up:hover) .map-pin--tip-up.is-active:not(:hover) .map-pin-tip,
.process-map-stage:has(.map-pin--tip-up:focus-visible) .map-pin--tip-up.is-active:not(:focus-visible) .map-pin-tip {
  transform: translate(-50%, 6px);
}

/* Last pin tooltip flips ABOVE the badge so it doesn't fall off the
   bottom of the map. */
.map-pin--tip-up .map-pin-tip {
  top: auto;
  bottom: calc(100% + 14px);
  transform: translate(-50%, 6px);
}
.map-pin--tip-up .map-pin-tip::before {
  top: 100%;
  bottom: auto;
  border-bottom-color: transparent;
  border-top-color: var(--navy);
}
.map-pin--tip-up:hover .map-pin-tip,
.map-pin--tip-up:focus-visible .map-pin-tip,
.map-pin--tip-up.is-active .map-pin-tip {
  transform: translate(-50%, 0);
}

/* Hint that lives between the section h2 and the process map figure,
   telling users the waypoints are interactive. Italic small-caps to
   read like a side-note rather than body copy. */
.process-map-hint {
  text-align: center;
  margin: 0 auto clamp(1rem, 2.5vw, 1.5rem);
  max-width: 520px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  color: var(--fog);
  font-style: italic;
}
/* (Old .process-map-caption rule removed Apr 27, 2026 — the figcaption
   was relocated above the map as .process-map-hint.) */

@media (max-width: 640px) {
  /* Mobile: keep pins fully usable. Name pills stay visible so users
     see all 5 steps without tapping. Tooltips work via tap (handled by
     site.js toggling .is-active). Tighter sizing + smaller tooltip
     width to fit narrow viewports. */
  .map-pin-num {
    width: 28px;
    height: 28px;
    font-size: 0.72rem;
    border-width: 1.5px;
  }
  .map-pin-name {
    margin-top: 5px;
    padding: 2px 7px 1px;
    font-size: 0.55rem;
    letter-spacing: 0.1em;
  }
  .map-pin-tip {
    width: min(180px, 70vw);
    font-size: 0.78rem;
    padding: 0.55rem 0.7rem;
  }
}

/* (Detail rows below the map removed Apr 26 — the interactive pins
   now carry the full description on hover/tap. Map does the heavy
   lifting. See .map-pin family above.) */

/* FAQ inline cross-link line (Q3 "see the Accelerator") */
.faq-inline-links {
  margin-top: 0.9rem !important;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(200, 169, 106, 0.3);
  font-size: 0.9rem !important;
  color: var(--fog) !important;
}

/* ===== ABOUT PAGE: quicklinks pill row ===== */
.about-quicklinks-eyebrow {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
  margin: 3rem 0 0.9rem;
}
.about-quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  max-width: 720px;
  margin: 0 auto 0.75rem;
}
.quicklink {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1.15rem;
  background: var(--white);
  border: 1px solid rgba(200, 169, 106, 0.3);
  border-left: 2px solid var(--brass-dark);
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--navy);
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    background 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.quicklink:hover {
  border-color: var(--brass-bright);
  border-left-color: var(--brass-bright);
  background: var(--sail);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.quicklink:focus-visible {
  outline: 2px solid var(--brass-dark);
  outline-offset: 3px;
}
.quicklink-arrow {
  color: var(--brass-dark);
  font-size: 1rem;
  font-weight: 700;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.quicklink:hover .quicklink-arrow {
  transform: translateX(4px);
}

/* (Founder hover treatment is consolidated in the main .founder-card
   block above. Earlier separate ::before override removed Apr 25, 2026.) */

/* ===== ABOUT PAGE: FAQ item subtle lift on hover (additive) ===== */
.faq-item {
  transition:
    border-color 0.2s ease,
    box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item:hover:not([open]) {
  transform: translateY(-1px);
}

/* ===== ABOUT PAGE: paragraph reveal stagger adjustments ===== */
.page-body-inner p.reveal {
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Mobile refinements for new about elements */
@media (max-width: 640px) {
  .mission-line {
    font-size: 1.02rem;
    padding: 0.85rem 1rem;
  }
  .quicklink {
    font-size: 0.88rem;
    padding: 0.65rem 1rem;
    width: 100%;
    justify-content: space-between;
  }
  .about-quicklinks {
    flex-direction: column;
    gap: 0.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quicklink,
  .quicklink-arrow,
  .faq-item,
  .founder-card::before {
    transition: none !important;
  }
  .quicklink:hover { transform: none; }
  .quicklink:hover .quicklink-arrow { transform: none; }
  .faq-item:hover:not([open]) { transform: none; }
}

/* ===== SERVICES PAGE: bottom CTA heading + body ===== */
.services-bottom-cta-heading {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  color: var(--navy);
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
.services-bottom-cta-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--slate);
  max-width: 560px;
  margin: 0 auto 1.5rem;
}

/* ===== SERVICES PAGE: IT Essentials (navy section) ===== */
.it-essentials {
  background: var(--navy);
  padding: clamp(3rem, 6vw, 4.75rem) 1.5rem;
  color: var(--sail);
}
.it-essentials-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.it-essentials-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin: 0 0 0.5rem;
}
.it-essentials h2 {
  color: var(--sail);
  margin: 0 0 1rem;
  font-size: clamp(1.85rem, 3.5vw, 2.2rem);
  letter-spacing: -0.01em;
}
.it-essentials-lead {
  color: rgba(251, 249, 243, 0.85);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 720px;
  margin: 0 auto 2.5rem;
}
.it-essentials .brass-accent {
  color: var(--brass-bright);
}
/* ===== IT ESSENTIALS — clean split intro + 6-protection grid ===== */
.ite-intro-split {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  text-align: left;
}
.ite-intro-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ite-intro-text .it-essentials-lead {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}
.ite-intro-illus {
  margin: 0;
  flex-shrink: 0;
}
.ite-intro-illus img {
  display: block;
  width: clamp(180px, 20vw, 260px);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  opacity: 0.92;
}
@media (max-width: 768px) {
  .ite-intro-split {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .ite-intro-text .it-essentials-lead {
    margin-left: auto;
    margin-right: auto;
  }
  .ite-intro-illus {
    display: none;
  }
}

/* Protection cards grid */
.ite-protections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
@media (max-width: 900px) {
  .ite-protections { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .ite-protections { grid-template-columns: 1fr; }
}
.ite-protection {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 170, 85, 0.16);
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1.25rem 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  align-items: start;
  text-align: left;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.ite-protection:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(212, 170, 85, 0.3);
}
.ite-protection-num {
  grid-row: 1;
  grid-column: 1;
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brass-bright);
  opacity: 0.7;
  line-height: 1;
  padding-top: 0.15rem;
}
.ite-protection-icon {
  display: none; /* number alone is sufficient; icon reserved for future use */
}
.ite-protection-body {
  grid-row: 1 / span 2;
  grid-column: 2;
}
.ite-protection-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--sail);
  margin: 0 0 0.2rem;
  line-height: 1.3;
}
.ite-protection-desc {
  font-size: 0.85rem;
  color: rgba(251, 249, 243, 0.65);
  line-height: 1.55;
  margin: 0;
}

/* keep the old sonar rule anchor so nothing below breaks */
.sonar-scope {
  width: min(960px, 100%);
  margin: clamp(3rem, 6vw, 4.5rem) auto clamp(2rem, 4vw, 3rem);
}
.sonar-bezel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(180deg, #1a2236 0%, #0f1624 100%);
  border: 1px solid rgba(212, 170, 85, 0.28);
  border-radius: 14px;
  padding: 2.5rem 1.75rem 2.25rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    0 18px 50px rgba(0, 0, 0, 0.45);
}
.sonar-screw {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4233 0%, #1c1810 70%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.6);
}
.sonar-screw--tl { top: 12px; left: 12px; }
.sonar-screw--tr { top: 12px; right: 12px; }
.sonar-screw--bl { bottom: 12px; left: 12px; }
.sonar-screw--br { bottom: 12px; right: 12px; }

/* Brass label plates above and below the display. Small-caps brass on
   a faintly recessed strip — reads as engraved nameplate. */
.sonar-plate {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-bright);
  text-align: center;
  margin: 0;
  padding: 0.4rem 1rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.05) 100%);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.3);
}
.sonar-plate--top {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 1.5rem;
}
.sonar-plate--bottom {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 1.5rem auto 0;
}
.sonar-plate-check {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--brass-bright);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Three-column grid: left protection stack | round screen | right protection stack */
.sonar-display {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 320px) minmax(220px, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "n  screen s"
    "ne screen sw"
    "se screen nw";
  gap: 0.75rem 1.25rem;
  align-items: stretch;
}

/* The phosphor screen — round, dark teal, ringed and crosshaired. */
.sonar-screen {
  grid-area: screen;
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(320px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #0c2229 0%, #04111a 75%, #02080f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(212, 170, 85, 0.32),
    inset 0 0 28px rgba(0, 0, 0, 0.7),
    inset 0 0 80px rgba(10, 50, 60, 0.45),
    0 0 0 6px rgba(0, 0, 0, 0.35),
    0 0 0 7px rgba(212, 170, 85, 0.18);
  overflow: hidden;
}
/* Concentric range rings — 1px brass at low opacity. */
.sonar-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(212, 170, 85, 0.22);
  border-radius: 50%;
  pointer-events: none;
}
.sonar-ring--1 { width: 35%;  height: 35%; }
.sonar-ring--2 { width: 65%;  height: 65%; border-color: rgba(212, 170, 85, 0.18); }
.sonar-ring--3 { width: 92%;  height: 92%; border-color: rgba(212, 170, 85, 0.14); }
/* Crosshairs — faint brass through the center. */
.sonar-cross {
  position: absolute;
  background: rgba(212, 170, 85, 0.13);
  pointer-events: none;
}
.sonar-cross--h {
  top: 50%; left: 5%; right: 5%;
  height: 1px;
  transform: translateY(-50%);
}
.sonar-cross--v {
  left: 50%; top: 5%; bottom: 5%;
  width: 1px;
  transform: translateX(-50%);
}
/* Sweep arc — frozen conic gradient brass-bright fading to transparent
   over ~75°, starting at 30° (just past 12 o'clock). Reads as "the
   sweep just passed through here." Static — no rotation, no blend
   modes, no will-change. Cheap to paint, no scroll cost. */
.sonar-sweep {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 30deg,
    rgba(212, 170, 85, 0.0) 0deg,
    rgba(212, 170, 85, 0.28) 4deg,
    rgba(212, 170, 85, 0.12) 35deg,
    rgba(212, 170, 85, 0.0) 75deg,
    rgba(212, 170, 85, 0.0) 360deg
  );
}

/* Threat blips at perimeter — small brass dots at varied angles. Static. */
.sonar-blip {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass-bright);
  box-shadow: 0 0 6px rgba(212, 170, 85, 0.7);
  pointer-events: none;
}
.sonar-blip--1 { top: 18%; left: 70%; }
.sonar-blip--2 { top: 72%; left: 22%; }
.sonar-blip--3 { top: 32%; left: 14%; opacity: 0.7; }
.sonar-blip--4 { top: 80%; left: 78%; opacity: 0.55; }

/* Center pulse — bright brass dot at exact center. Opacity-only fade
   so the radar feels alive without forcing the browser to repaint
   the box-shadow halo on every frame. Single element, single property. */
.sonar-center-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--brass-bright);
  box-shadow: 0 0 0 3px rgba(212, 170, 85, 0.18);
  animation: sonar-pulse 3s ease-in-out infinite;
}
@keyframes sonar-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sonar-center-pulse { animation: none; opacity: 0.85; }
}

/* Sector cards: instrument-readout style — channel prefix + status LED
   + icon + title + outcome line. Horizontal layout: icon left, body right. */
.sonar-sector {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.85rem;
  align-items: center;
  padding: 0.95rem 0.95rem 0.85rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(212, 170, 85, 0.18);
  border-radius: 10px;
  cursor: default;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.sonar-sector:hover,
.sonar-sector:focus-visible {
  border-color: rgba(212, 170, 85, 0.55);
  background:
    linear-gradient(180deg, rgba(212, 170, 85, 0.08) 0%, rgba(212, 170, 85, 0.02) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(212, 170, 85, 0.18);
  outline: none;
}
.sonar-sector--n  { grid-area: n; }
.sonar-sector--ne { grid-area: ne; }
.sonar-sector--se { grid-area: se; }
.sonar-sector--s  { grid-area: s; }
.sonar-sector--sw { grid-area: sw; }
.sonar-sector--nw { grid-area: nw; }

/* Right-side cards mirror: icon on right, body on left. Reads as a
   panel-readout pointing inward toward the screen. */
.sonar-sector--s,
.sonar-sector--sw,
.sonar-sector--nw {
  grid-template-columns: 1fr 44px;
}
.sonar-sector--s  .sonar-sector-icon,
.sonar-sector--sw .sonar-sector-icon,
.sonar-sector--nw .sonar-sector-icon {
  order: 2;
}
.sonar-sector--s  .sonar-sector-body,
.sonar-sector--sw .sonar-sector-body,
.sonar-sector--nw .sonar-sector-body {
  order: 1;
  text-align: right;
}

/* Channel prefix (01–06) — small uppercase brass label in the top corner. */
.sonar-sector-prefix {
  position: absolute;
  top: 0.45rem;
  left: 0.7rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--brass-bright);
  opacity: 0.65;
}
.sonar-sector--s  .sonar-sector-prefix,
.sonar-sector--sw .sonar-sector-prefix,
.sonar-sector--nw .sonar-sector-prefix {
  left: auto;
  right: 0.7rem;
}

/* Status LED — small pulsing brass dot in the opposite top corner.
   Synced to the same 2.6s rhythm as the center pulse so the cards
   visually beat with the radar. */
.sonar-sector-led {
  position: absolute;
  top: 0.65rem;
  right: 0.7rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass-bright);
  box-shadow:
    0 0 0 2px rgba(212, 170, 85, 0.18),
    0 0 8px rgba(212, 170, 85, 0.5);
  animation: sonar-led-pulse 2.6s ease-in-out infinite;
}
.sonar-sector--s  .sonar-sector-led,
.sonar-sector--sw .sonar-sector-led,
.sonar-sector--nw .sonar-sector-led {
  right: auto;
  left: 0.7rem;
}
@keyframes sonar-led-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sonar-sector-led { animation: none; opacity: 0.85; }
}

.sonar-sector-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 30%, rgba(212, 170, 85, 0.28) 0%, rgba(212, 170, 85, 0.06) 100%);
  border: 1px solid rgba(212, 170, 85, 0.42);
  color: var(--brass-bright);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.sonar-sector:hover .sonar-sector-icon,
.sonar-sector:focus-visible .sonar-sector-icon {
  background:
    radial-gradient(circle at 30% 30%, rgba(212, 170, 85, 0.45) 0%, rgba(212, 170, 85, 0.12) 100%);
  border-color: var(--brass-bright);
  box-shadow: 0 0 14px rgba(212, 170, 85, 0.4);
}
.sonar-sector-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sonar-sector-body {
  min-width: 0;
}
.sonar-sector-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sail);
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin: 0 0 0.18rem;
}
.sonar-sector-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(251, 249, 243, 0.62);
  line-height: 1.4;
  margin: 0;
}

/* :has()-driven amplification — when the user is inspecting any sector,
   the radar sweep brightens and the center pulse glows harder. Subtle
   reactive feedback that ties the cards to the screen. */
.sonar-display:has(.sonar-sector:hover) .sonar-sweep,
.sonar-display:has(.sonar-sector:focus-visible) .sonar-sweep {
  background: conic-gradient(
    from 0deg,
    rgba(212, 170, 85, 0.0) 0deg,
    rgba(212, 170, 85, 0.55) 4deg,
    rgba(212, 170, 85, 0.22) 35deg,
    rgba(212, 170, 85, 0.0) 80deg,
    rgba(212, 170, 85, 0.0) 360deg
  );
  transition: background 0.4s ease;
}
.sonar-display:has(.sonar-sector:hover) .sonar-center-pulse,
.sonar-display:has(.sonar-sector:focus-visible) .sonar-center-pulse {
  box-shadow:
    0 0 0 4px rgba(212, 170, 85, 0.28),
    0 0 28px rgba(212, 170, 85, 0.85);
}
.sonar-sweep {
  transition: background 0.6s ease;
}
.sonar-center-pulse {
  transition: box-shadow 0.4s ease;
}

/* Tablet (<1024px): collapse to screen-on-top + 2-col grid of sectors below.
   Reset the right-side mirror flip so all cards have icon-left/body-right. */
@media (max-width: 1024px) {
  .sonar-display {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "screen screen"
      "n  s"
      "ne sw"
      "se nw";
    gap: 0.75rem;
  }
  .sonar-screen {
    width: min(320px, 70%);
    margin: 0 auto 0.5rem;
  }
  .sonar-sector,
  .sonar-sector--s,
  .sonar-sector--sw,
  .sonar-sector--nw {
    grid-template-columns: 44px 1fr;
  }
  .sonar-sector--s  .sonar-sector-icon,
  .sonar-sector--sw .sonar-sector-icon,
  .sonar-sector--nw .sonar-sector-icon { order: 0; }
  .sonar-sector--s  .sonar-sector-body,
  .sonar-sector--sw .sonar-sector-body,
  .sonar-sector--nw .sonar-sector-body {
    order: 0;
    text-align: left;
  }
  .sonar-sector--s  .sonar-sector-prefix,
  .sonar-sector--sw .sonar-sector-prefix,
  .sonar-sector--nw .sonar-sector-prefix {
    left: 0.7rem;
    right: auto;
  }
  .sonar-sector--s  .sonar-sector-led,
  .sonar-sector--sw .sonar-sector-led,
  .sonar-sector--nw .sonar-sector-led {
    right: 0.7rem;
    left: auto;
  }
}

/* Mobile (<560px): single column for sectors below the screen. */
@media (max-width: 560px) {
  .sonar-bezel {
    padding: 2rem 1rem 1.75rem;
  }
  .sonar-display {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, auto);
    grid-template-areas:
      "screen"
      "n"
      "ne"
      "se"
      "s"
      "sw"
      "nw";
  }
  .sonar-screen {
    width: min(260px, 80%);
  }
  .sonar-sector {
    grid-template-columns: 40px 1fr;
    padding: 0.85rem 0.85rem 0.75rem;
  }
  .sonar-sector-icon { width: 40px; height: 40px; }
  .sonar-sector-icon svg { width: 20px; height: 20px; }
}

/* ===== IT ESSENTIALS — closer: full-width quote + "not an MSP" positioning
   line + scoping CTA. Lives below the tile grid. ===== */
.ite-closer {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(200, 169, 106, 0.22);
}
.ite-closer-quote {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.5;
  color: var(--sail);
  margin: 0 auto 1rem;
  max-width: 680px;
}
.ite-closer-quote strong {
  color: var(--brass-bright);
  font-weight: 700;
}
.ite-closer-note {
  color: rgba(251, 249, 243, 0.72);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 auto 1.75rem;
  max-width: 600px;
}
.ite-closer-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--brass-bright) !important;
  color: var(--navy) !important;
  padding: 0.85rem 1.75rem !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ite-closer-cta:hover {
  background: var(--brass-dark) !important;
  color: var(--sail) !important;
  transform: translateY(-1px);
}
.ite-closer-cta svg {
  width: 14px;
  height: 14px;
}

/* ===== SERVICES PAGE: Project work container (sail section outside <main>) ===== */
.services-project-work {
  background: var(--sail);
  padding: clamp(3rem, 5.5vw, 4rem) 1.5rem;
}
.services-project-work-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* ===== 404 PAGE =====
   Designed to fit 100vh with no scroll on desktop and most laptops.
   Hero padding overrides .page-hero defaults to compress vertical space.
   Quick links are a horizontal row on desktop, stacked only on mobile. */

.error-hero {
  /* Override .page-hero's clamp(7rem, 14vh, 9rem) top + clamp(3rem, 6vh, 4rem) bottom.
     The 404 + anchor are big enough to carry their own visual weight without padding. */
  padding-top: clamp(3.5rem, 7vh, 5.5rem) !important;
  padding-bottom: clamp(1.5rem, 3vh, 2.25rem) !important;
}
.error-hero-inner {
  text-align: center;
}
.error-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  margin: 0 0 0.75rem;
  line-height: 0.85;
}
.error-stage-anchor {
  display: block;
  width: clamp(72px, 10vw, 140px);
  height: clamp(72px, 10vw, 140px);
  color: var(--brass-bright);
  flex-shrink: 0;
}
.error-stage-num {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(6rem, 16vw, 13rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--brass-bright);
  line-height: 0.85;
}
.error-hero-h1 {
  font-size: clamp(1.5rem, 2.8vw, 2rem) !important;
  margin-top: 0.25rem;
  letter-spacing: -0.01em;
}
.error-hero-sub {
  max-width: 520px;
  margin: 0.5rem auto 0;
  color: rgba(251, 249, 243, 0.75);
}

/* Body: editorial typographic routing.
   No cards, no boxes, no bullets. Three destinations as a vertical
   editorial list separated by hairline rules. Premium, minimal. */
.page-body--error {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.error-body-inner {
  padding: 0;
  max-width: 640px;
}

/* Tiny prompt label above the destination list */
.error-prompt {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin: 0 auto 0.85rem;
}

/* Vertical editorial nav: three rows separated by hairline rules.
   Brass arrow indicator on the right. Hover lifts text to navy-strong
   and shifts the arrow without any card flourish. */
.error-nav {
  display: flex;
  flex-direction: column;
  margin: 0 auto 1.25rem;
  border-top: 1px solid rgba(21, 28, 42, 0.08);
}
.error-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.95rem 0.5rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(21, 28, 42, 0.08);
  letter-spacing: -0.01em;
  transition: color 0.25s ease, padding-left 0.25s ease;
}
.error-nav a:hover {
  color: var(--brass-dark);
  padding-left: 0.85rem;
}
.error-nav a:focus-visible {
  outline: 2px solid var(--brass-dark);
  outline-offset: 4px;
  border-radius: 2px;
}
.error-nav a svg {
  width: 18px;
  height: 18px;
  color: var(--brass-dark);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.error-nav a:hover svg {
  transform: translateX(4px);
}

.error-still-lost {
  text-align: center;
  font-size: 0.92rem;
  color: var(--slate);
  margin: 0 auto;
  max-width: 520px;
}
.error-still-lost a {
  color: var(--brass-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.error-still-lost a:hover { color: var(--navy); }

@media (prefers-reduced-motion: reduce) {
  .error-nav a { transition: none; }
  .error-nav a:hover { padding-left: 0.5rem; }
  .error-nav a svg { transition: none; }
  .error-nav a:hover svg { transform: none; }
}

@media (max-width: 640px) {
  .error-stage { gap: 0.5rem; }
  .error-nav a {
    font-size: 1rem;
    padding: 0.85rem 0.25rem;
  }
}

/* ===== ASSESSMENT PAGES: brass-accented callouts (AI Readiness credit + Tech Strategy scoping) ===== */
.aira-credit-callout,
.tsa-scoping-callout {
  background: var(--white);
  border: 1px solid rgba(200, 169, 106, 0.25);
  border-left: 4px solid var(--brass-dark);
  border-radius: 14px;
  padding: 1.75rem 1.75rem;
  margin: 2.5rem 0 2.75rem;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}
.aira-credit-callout::before,
.tsa-scoping-callout::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--brass-bright) 20%, #D4AA55 50%, var(--brass-bright) 80%, transparent 100%);
  opacity: 0.85;
}
.aira-credit-eyebrow,
.tsa-scoping-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin: 0 0 0.75rem;
}
.aira-credit-body,
.tsa-scoping-body {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}
.aira-credit-highlight,
.tsa-scoping-highlight {
  color: var(--brass-dark);
  font-weight: 700;
}
@media (max-width: 640px) {
  .aira-credit-callout,
  .tsa-scoping-callout {
    padding: 1.3rem 1.25rem;
    margin: 2rem 0 2.25rem;
  }
  .aira-credit-body,
  .tsa-scoping-body { font-size: 0.96rem; }
}

/* ===== HOMEPAGE W3 polish: Canvas tone on approach section for rhythm break ===== */
.approach {
  background: var(--canvas);
}

@media (prefers-reduced-motion: reduce) {
  .aira-credit-callout::before,
  .tsa-scoping-callout::before { opacity: 0.6; }
}

/* ===== TECH ASSESSMENT — "What it covers" 6-tile icon grid =====
   Replaces the old bullet list with a 2x3 grid of brass-accented tiles
   so the coverage areas read visually instead of as a wall of text.
   Mirrors the IT Essentials sonar sector treatment (icon + title +
   one-line outcome) but on a sail bg with brass accents. */
.tsa-coverage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.75rem 0 2.75rem;
}
.tsa-coverage-tile {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1.1rem;
  align-items: start;
  padding: 1.25rem 1.25rem 1.1rem;
  background:
    linear-gradient(180deg, var(--white) 0%, rgba(251, 249, 243, 0.5) 100%);
  border: 1px solid rgba(21, 28, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(21, 28, 42, 0.04);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.tsa-coverage-tile:hover {
  border-color: rgba(212, 170, 85, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(21, 28, 42, 0.08);
}
.tsa-coverage-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(212, 170, 85, 0.22) 0%, rgba(212, 170, 85, 0.06) 100%);
  border: 1px solid rgba(212, 170, 85, 0.32);
  color: var(--brass-dark);
  transition: background 0.25s ease;
}
.tsa-coverage-tile:hover .tsa-coverage-icon {
  background:
    linear-gradient(135deg, rgba(212, 170, 85, 0.32) 0%, rgba(212, 170, 85, 0.1) 100%);
}
.tsa-coverage-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tsa-coverage-body h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--navy);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0 0 0.4rem;
}
.tsa-coverage-body p {
  font-size: 0.92rem;
  color: var(--slate);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 720px) {
  .tsa-coverage-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .tsa-coverage-tile {
    padding: 1.1rem 1.1rem 1rem;
    grid-template-columns: 48px 1fr;
    gap: 1rem;
  }
  .tsa-coverage-icon {
    width: 48px;
    height: 48px;
  }
}

/* ===== TECH ASSESSMENT — "What you get" three-deliverable card row.
   3-up grid of vertical cards with brass numeral, brass-tinted icon,
   bold title, single-line outcome. Mobile collapses to single column. */
.tsa-deliverables {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.25rem 0 1.75rem;
}
.tsa-deliverable {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem 1.4rem 1.4rem;
  background:
    linear-gradient(180deg, var(--white) 0%, rgba(251, 249, 243, 0.5) 100%);
  border: 1px solid rgba(21, 28, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(21, 28, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.tsa-deliverable:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 170, 85, 0.4);
  box-shadow: 0 4px 16px rgba(21, 28, 42, 0.08);
}
.tsa-deliverable-num {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--brass-bright);
  opacity: 0.7;
}
.tsa-deliverable-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(212, 170, 85, 0.22) 0%, rgba(212, 170, 85, 0.06) 100%);
  border: 1px solid rgba(212, 170, 85, 0.32);
  color: var(--brass-dark);
  margin-bottom: 1rem;
  transition: background 0.25s ease;
}
.tsa-deliverable:hover .tsa-deliverable-icon {
  background: linear-gradient(135deg, rgba(212, 170, 85, 0.34) 0%, rgba(212, 170, 85, 0.1) 100%);
}
.tsa-deliverable-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tsa-deliverable h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0 0 0.4rem;
}
.tsa-deliverable p {
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 720px) {
  .tsa-deliverables {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* ===== TECH ASSESSMENT — "Inside the report" panel.
   A single bordered panel with 5 stacked rows. Reads like a table
   of contents for the deliverable, visually distinct from the
   3-deliverable cards above so the hierarchy is clear. */
.tsa-report-panel {
  position: relative;
  margin: 0 0 2.75rem;
  padding: 1.5rem 1.5rem 1.25rem;
  background:
    linear-gradient(180deg, var(--canvas) 0%, rgba(237, 231, 218, 0.6) 100%);
  border: 1px solid rgba(212, 170, 85, 0.28);
  border-left: 4px solid var(--brass-bright);
  border-radius: 14px;
}
.tsa-report-panel-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin: 0 0 1rem;
}
.tsa-report-rows {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tsa-report-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(21, 28, 42, 0.06);
}
.tsa-report-row:first-child {
  border-top: none;
  padding-top: 0.25rem;
}
.tsa-report-row:last-child {
  padding-bottom: 0.25rem;
}
.tsa-report-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(212, 170, 85, 0.14);
  border: 1px solid rgba(212, 170, 85, 0.3);
  color: var(--brass-dark);
}
.tsa-report-row-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tsa-report-row h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--navy);
  margin: 0 0 0.25rem;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.tsa-report-row p {
  font-size: 0.88rem;
  color: var(--slate);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 520px) {
  .tsa-report-panel {
    padding: 1.25rem 1.25rem 1rem;
  }
  .tsa-report-row {
    grid-template-columns: 32px 1fr;
    gap: 0.85rem;
  }
  .tsa-report-row-icon {
    width: 32px;
    height: 32px;
  }
}

/* ===== WAVE DIVIDER VARIANTS for homepage navy→canvas→sail rhythm ===== */
/* Sits below navy hero, transitions INTO canvas approach section.
   Top half of wave shows navy (container bg); bottom half is canvas (SVG fill). */
.wave-divider--canvas {
  background: var(--navy);
}
/* Canvas section → navy section transition */
.wave-divider--navy-from-canvas {
  background: var(--canvas);
}
/* Sits below canvas approach, transitions INTO sail how-we-help section.
   Top half of wave shows canvas (container bg); bottom half is sail (SVG fill). */
.wave-divider--sail-from-canvas {
  background: var(--canvas);
}

/* ===== ACCELERATOR: AIRA entry-ramp link under hero price ===== */
.page-hero-aira-link {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  color: rgba(251, 249, 243, 0.72);
  margin: 1rem auto 0;
  max-width: 520px;
}
.page-hero-aira-link a {
  color: var(--brass-bright);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 170, 85, 0.4);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.page-hero-aira-link a:hover {
  color: var(--brass-bright, #D4AA55);
  border-bottom-color: var(--brass-bright);
}

/* ===== CONTACT SUCCESS: back-to-home link below tagline ===== */
.success-backlink {
  margin: 1.5rem 0 0;
  font-size: 0.92rem;
}
.success-backlink a {
  color: var(--fog);
  text-decoration: none;
  border-bottom: 1px solid rgba(106, 112, 128, 0.3);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.success-backlink a:hover {
  color: var(--brass-dark);
  border-bottom-color: var(--brass-dark);
}

/* ================================================================
   MOBILE NAV — Hamburger button + full-screen overlay menu
   Reuses modal patterns (focus trap, scroll lock, ESC, fade-in).
   Breakpoint: hamburger shows at ≤820px, nav-links hide.
   ================================================================ */

/* --- Hamburger button (hidden on desktop, shown ≤820px) --- */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  position: relative;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 4px;
  border-radius: 4px;
}
.nav-toggle-bar {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--brass-bright);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease,
    top 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-toggle-bar:nth-child(1) { top: 13px; }
.nav-toggle-bar:nth-child(2) { top: 19px; }
.nav-toggle-bar:nth-child(3) { top: 25px; }

/* Open state: morph bars to X */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  top: 19px;
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  top: 19px;
  transform: rotate(-45deg);
}

/* --- Mobile menu overlay (injected by site.js) --- */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--navy);
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 96px 1.5rem 2rem;
  opacity: 0;
  transform: scale(0.97);
  transition:
    opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu-overlay.visible {
  display: flex;
  opacity: 1;
  transform: scale(1);
}
.mobile-menu-inner {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  justify-content: center;
}

/* Mobile menu nav links — large typographic */
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
/* (Legacy flat-link rules replaced — new structure uses .mobile-menu-item wrappers with .mobile-menu-link. See dropdown enhancement block.) */

/* Staggered fade-in of menu items when menu opens */
.mobile-menu-overlay.visible .mobile-menu-nav .mobile-menu-item {
  animation: mobileMenuLinkIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.mobile-menu-overlay.visible .mobile-menu-nav .mobile-menu-item:nth-child(1) { animation-delay: 0.05s; }
.mobile-menu-overlay.visible .mobile-menu-nav .mobile-menu-item:nth-child(2) { animation-delay: 0.10s; }
.mobile-menu-overlay.visible .mobile-menu-nav .mobile-menu-item:nth-child(3) { animation-delay: 0.15s; }
.mobile-menu-overlay.visible .mobile-menu-nav .mobile-menu-item:nth-child(4) { animation-delay: 0.20s; }
.mobile-menu-overlay.visible .mobile-menu-nav .mobile-menu-item:nth-child(5) { animation-delay: 0.25s; }
@keyframes mobileMenuLinkIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile menu contact footer */
.mobile-menu-contact {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(200, 169, 106, 0.18);
}
.mobile-menu-contact a {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: rgba(251, 249, 243, 0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}
.mobile-menu-contact a:hover,
.mobile-menu-contact a:focus-visible {
  color: var(--brass-bright);
  outline: none;
}
.mobile-menu-tagline {
  margin: 0.6rem 0 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--brass-bright);
  letter-spacing: 0.02em;
}

/* Lock body scroll when mobile menu is open */
body.menu-open { overflow: hidden; }

/* Show hamburger + hide nav-links at ≤820px */
@media (max-width: 820px) {
  .nav-toggle { display: flex; }
  .nav-links { display: none; }
}

/* Reduced motion — skip animations */
@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bar { transition: none; }
  .mobile-menu-overlay { transition: opacity 0.01s; transform: none; }
  .mobile-menu-overlay.visible .mobile-menu-nav a { animation: none; }
  .mobile-menu-nav a { transition: color 0.01s; }
  .mobile-menu-nav a:hover,
  .mobile-menu-nav a:focus-visible { transform: none; }
}

/* ================================================================
   MOBILE MENU — dropdown enhancement
   Expandable blurb panels on AI Accelerator / Services / About.
   Desktop is unaffected (this is inside the full-screen overlay).
   ================================================================ */

/* Item container — replaces bare <a> for each menu entry */
.mobile-menu-nav .mobile-menu-item {
  border-bottom: 1px solid rgba(200, 169, 106, 0.2);
}
.mobile-menu-nav .mobile-menu-item:last-child { border-bottom: none; }

/* The link-row: link + expand chevron side by side */
.mobile-menu-nav .mobile-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Shared link styles — apply to both wrapped and plain items */
.mobile-menu-nav .mobile-menu-link {
  flex: 1;
  display: block;
  position: relative;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--sail);
  text-decoration: none;
  padding: 0.65rem 0.5rem;
  transition: color 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu-nav .mobile-menu-link:hover,
.mobile-menu-nav .mobile-menu-link:focus-visible {
  color: var(--brass-bright);
  transform: translateX(8px);
  outline: none;
}
.mobile-menu-nav .mobile-menu-item.active .mobile-menu-link { color: var(--brass-bright); }
.mobile-menu-nav .mobile-menu-item.active .mobile-menu-link::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--brass-bright);
  border-radius: 2px;
}

/* Plain items (Home, Contact) have no row wrapper — give the link the block treatment */
.mobile-menu-item--plain {
  display: block;
}
.mobile-menu-item--plain .mobile-menu-link {
  padding: 0.9rem 0.5rem; /* match vertical rhythm of .mobile-menu-row */
}

/* Chevron expand button */
.mobile-menu-expand {
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brass-bright);
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-expand:hover,
.mobile-menu-expand:focus-visible {
  opacity: 1;
  outline: none;
}
.mobile-menu-expand:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 2px;
  border-radius: 4px;
  opacity: 1;
}
.mobile-menu-chevron {
  width: 20px;
  height: 20px;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu-item.expanded .mobile-menu-chevron {
  transform: rotate(180deg);
}

/* Blurb panel — collapsible via CSS grid trick for smooth height animation */
.mobile-menu-blurb {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu-item.expanded .mobile-menu-blurb {
  grid-template-rows: 1fr;
}
.mobile-menu-blurb-inner {
  overflow: hidden;
}
.mobile-menu-item.expanded .mobile-menu-blurb-inner {
  /* Give padding only when expanded so collapsed state is truly flush */
  padding: 0 0.5rem 1rem;
}
.mobile-menu-blurb-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin: 0 0 0.45rem;
}
.mobile-menu-blurb-text {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(251, 249, 243, 0.82);
  margin: 0;
}

/* Reduced motion — disable chevron rotation + height transition */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu-chevron { transition: none; }
  .mobile-menu-blurb { transition: none; }
}

/* ================================================================
   HOMEPAGE MOBILE FIX — .how-we-help .more-way editorial cards
   Tighten up on small viewports: stack numeral above content
   instead of forcing a 120px-wide numeral column. Real horizontal
   padding so card content doesn't hug the rounded edges on phones.
   ================================================================ */
@media (max-width: 720px) {
  .how-we-help .more-way {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1.75rem 1.5rem;
    align-items: start;
  }
  .how-we-help .more-way-num {
    font-size: clamp(2.5rem, 10vw, 3.25rem);
    line-height: 1;
    margin-bottom: 0.25rem;
  }
  .how-we-help .more-way-body {
    max-width: 100%;
  }
  .how-we-help .more-way-list {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

/* ===== FAQ bulleted list (used inside accelerator.html Q4: What's included) ===== */
.faq-body .faq-list-items {
  list-style: none;
  padding: 0;
  margin: 0.85rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.faq-body .faq-list-items li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--slate);
}
.faq-body .faq-list-items li::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass-dark);
}
.faq-body .faq-list-items li strong {
  color: var(--navy);
}

/* ================================================================
   DYVE ICON SET — sprite-based, stroke-only, currentColor-driven
   Sprite injected by site.js on load (see initDyveIconSprite).
   Spec: dyve/assets/dyve-official-brand-assets.html (Icon spec bar).
     - Stroke width: 1.75 (all sizes)
     - Default size: 28 px (spec target)
     - Color on dark backgrounds: Brass Bright (#D4AA55)
     - Color on light backgrounds: Slate (#4A5570)
   Usage:
     <svg class="dyve-icon" aria-hidden="true"><use href="#dyve-ai-spark"></use></svg>
   Modifiers: .muted .navy .brass .slate .sm .lg .xl
   ================================================================ */
.dyve-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  color: var(--brass-bright);            /* default on dark backgrounds per spec */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
  vertical-align: middle;
  transition: color 0.2s ease;
}
.dyve-icon.muted { color: var(--fog); }
.dyve-icon.navy  { color: var(--navy); }
.dyve-icon.slate { color: var(--slate); }       /* spec color for light backgrounds */
.dyve-icon.brass { color: var(--slate); }       /* legacy alias — spec moved light-bg icons to Slate */
.dyve-icon.sm    { width: 14px; height: 14px; } /* inline with body / eyebrow copy */
.dyve-icon.lg    { width: 40px; height: 40px; } /* feature card icons */
.dyve-icon.xl    { width: 56px; height: 56px; } /* hero feature icons */
.dyve-icon svg, .dyve-icon use { stroke: currentColor; fill: none; }

/* Hidden sprite container — injected by site.js, kept visually & accessibly absent */
#dyve-icons-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ============================================================
   ANCHOR BRAND-MARK ACCENTS
   Sparse, intentional placements of the dyve-anchor motif.
   Each variant is scoped to one section so it earns its place.
   ============================================================ */

/* Contact page hero - watermark behind the headline.
   Sits in the bottom-right of the navy hero, padded inward from the
   edge so it reads as deliberate placement, not edge-bleed. */
.hero-anchor-watermark {
  position: absolute;
  pointer-events: none;
  bottom: clamp(1rem, 3vh, 2.5rem);
  right: clamp(2rem, 5vw, 4.5rem);
  width: clamp(150px, 20vw, 220px);
  height: clamp(150px, 20vw, 220px);
  /* Deep saturated brass — reads as a present watermark with weight,
     not a faded ghost. Tasteful but felt against the navy hero. */
  color: var(--brass-dark);
  opacity: 0.5;
  z-index: 0;
}

/* Contact page form-area anchor: positioned in the cream form area
   (bottom-right) instead of the navy hero, with a slight tilt so it
   reads as a different visual moment than About's hero anchor. */
.contact-page {
  position: relative;
  overflow: hidden;
}
@media (max-width: 640px) {
  .hero-anchor-watermark {
    width: 120px;
    height: 120px;
    bottom: 1rem;
    right: 1rem;
    opacity: 0.45;
  }
}

/* Accelerator page hero - top-right corner brand cue.
   Pushed in from the edge so it sits in the gutter as a deliberate
   accent. Larger on desktop to register without dominating. */
.hero-anchor-corner {
  position: absolute;
  pointer-events: none;
  top: clamp(6rem, 11vh, 7.5rem);
  right: clamp(2.5rem, 6.5vw, 6rem);
  width: clamp(56px, 6.5vw, 84px);
  height: clamp(56px, 6.5vw, 84px);
  color: var(--brass-bright);
  opacity: 0.2;
  z-index: 0;
}
@media (max-width: 640px) {
  .hero-anchor-corner {
    width: 40px;
    height: 40px;
    top: 5.5rem;
    right: 1.5rem;
    opacity: 0.22;
  }
}

/* Bleed variant: oversized brass anchor anchored to the bottom-right
   of the hero, extending past the section boundary into the wave
   divider and next section. Brass-bright at low opacity reads naturally
   on both navy (above wave) and cream (below). */
.page-hero--bleed {
  overflow: visible !important;
  z-index: 1;
}
.page-hero--bleed .hero-anchor-corner--bleed {
  top: auto;
  bottom: clamp(-220px, -16vw, -120px);
  right: clamp(2rem, 5vw, 4.5rem);
  width: clamp(240px, 26vw, 360px);
  height: clamp(240px, 26vw, 360px);
  /* Deep saturated brass — present and felt across both the navy hero
     and the cream math section. Tasteful weight, not a ghost. */
  color: var(--brass-dark);
  opacity: 0.42;
  z-index: 2;
}
@media (max-width: 640px) {
  .page-hero--bleed .hero-anchor-corner--bleed {
    bottom: -80px;
    right: 1rem;
    width: 160px;
    height: 160px;
    opacity: 0.4;
  }
}

/* 404 page eyebrow - tiny inline anchor next to the "404" eyebrow.
   Frames the lost-at-sea moment without being heavy-handed. */
/* Scattered doodles — hand-placed personality icons.
   Each is absolutely positioned inside its parent section (position:relative).
   Hidden on mobile to avoid crowding. */
.page-doodle {
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.doodle--sailboat {
  bottom: 1.75rem;
  right: clamp(2rem, 7vw, 6rem);
  width: clamp(60px, 6vw, 86px);
  transform: rotate(10deg);
  opacity: 0.38;
}
.doodle--compass {
  top: 2rem;
  left: clamp(1.5rem, 5vw, 4rem);
  width: clamp(52px, 5.5vw, 72px);
  transform: rotate(-18deg);
  opacity: 0.32;
}
.doodle--ropecoil {
  left: clamp(1.5rem, 5vw, 3.5rem);
  top: 50%;
  transform: translateY(-50%) rotate(20deg);
  width: clamp(48px, 5vw, 64px);
  opacity: 0.42;
}
.doodle--oars {
  top: 2.5rem;
  right: clamp(1.5rem, 5vw, 4rem);
  width: clamp(56px, 6vw, 78px);
  transform: rotate(-10deg);
  opacity: 0.38;
}
.doodle--shipwheel {
  right: clamp(1.5rem, 5vw, 4rem);
  top: 50%;
  transform: translateY(-50%) rotate(6deg);
  width: clamp(70px, 7vw, 96px);
  opacity: 0.22;
}
.doodle--ropeknot {
  bottom: 1.5rem;
  left: clamp(1.5rem, 5vw, 4rem);
  width: clamp(48px, 5vw, 64px);
  transform: rotate(-14deg);
  opacity: 0.4;
}
.doodle--diving-helmet {
  top: clamp(7rem, 16vh, 11rem);
  left: clamp(1.5rem, 5vw, 4rem);
  width: clamp(56px, 5.5vw, 76px);
  transform: rotate(-8deg);
  opacity: 0.26;
}
.doodle--lighthouse {
  bottom: 2rem;
  right: clamp(1.5rem, 5vw, 4rem);
  width: clamp(52px, 5.5vw, 70px);
  transform: rotate(7deg);
  opacity: 0.3;
}
/* About page doodles */
.doodle--about-compass {
  top: 0.5rem;
  right: clamp(1rem, 4vw, 3rem);
  width: clamp(48px, 5vw, 66px);
  transform: rotate(12deg);
  opacity: 0.3;
}
.doodle--about-helm {
  top: 0;
  right: clamp(1rem, 4vw, 3rem);
  width: clamp(58px, 6vw, 80px);
  transform: rotate(-6deg);
  opacity: 0.22;
}
.doodle--about-oars {
  bottom: 2rem;
  left: clamp(1.5rem, 5vw, 4rem);
  width: clamp(54px, 5.5vw, 74px);
  transform: rotate(14deg);
  opacity: 0.32;
}
@media (max-width: 767px) {
  .page-doodle { display: none; }
}

.eyebrow-anchor {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.18em;
  margin-right: 0.5em;
  color: currentColor;
  opacity: 0.85;
}

/* ===== ACCESSIBILITY: Respect prefers-reduced-motion =====
   Users who have enabled "Reduce Motion" in their OS settings get
   instant state changes instead of transitions/animations. This is
   a WCAG 2.1 AA requirement for sites with non-essential motion. */
@media (prefers-reduced-motion: reduce) {
  /* Kill all CSS keyframe animations */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Show revealed content immediately — no slide-in or scale-in */
  .reveal, .scale-reveal, .fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Keep color/border transitions on interactive elements (non-vestibular) */
  .doorway-card,
  .map-pin,
  .service--featured,
  .hatz-tier-card {
    transform: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  }
}