:root {
      --brand-indigo: #6366f1;
      --brand-emerald: #10b981;
      --brand-amber: #f59e0b;
      --brand-gold: #FFB200;
      --brand-blue: #0066CC;
      --brand-red: #ef4444;
      --dark-900: #0f172a;
      --dark-950: #020617;
      --text-primary: #f8fafc;
      --text-secondary: #cbd5e1;
      --text-muted: #94a3b8;
      --card-bg: rgba(15, 23, 42, 0.7);
      --card-border: 1px solid rgba(99,102,241,0.20);
      --backdrop: blur(12px);
      --radius-lg: 18px;
      --radius-md: 12px;
      --radius-sm: 10px;
      --shadow-lg: 0 30px 80px rgba(0,0,0,0.45);
      --shadow-md: 0 18px 40px rgba(0,0,0,0.35);
      --shadow-sm: 0 10px 24px rgba(0,0,0,0.25);
      --glow-indigo: 0 0 40px rgba(99,102,241,0.35);
      --glow-gold: 0 0 40px rgba(255,178,0,0.35);
      --transition: all 300ms cubic-bezier(.4,0,.2,1);
      --transition-fast: all 180ms cubic-bezier(.4,0,.2,1);
      --nav-height: 80px;
      --section-gap: 44px;
      --section-pad-y: 32px;
      --hero-banner-height: clamp(420px, 62vh, 680px);
    }

    * { box-sizing: border-box; }
    html, body {
      margin: 0;
      height: 100%;
      background: radial-gradient(1200px 600px at 10% 0%, rgba(99,102,241,0.08), transparent 60%),
                  radial-gradient(1000px 600px at 100% 20%, rgba(255,178,0,0.06), transparent 60%),
                  linear-gradient(135deg, rgba(15,23,42,0.7) 0%, rgba(2,6,23,0.8) 100%);
      color: var(--text-primary);
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }

    /* AI Background & Neural Network */
    .ai-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      overflow: hidden;
    }

    #neuralCanvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Navigation Styles */
    .nav-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background: rgba(15, 23, 42, 0.95);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(99,102,241,0.2);
      transition: var(--transition);
    }

    .nav-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: var(--nav-height);
      position: relative;
      z-index: 10003;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      position: absolute;
      left: 20px;
    }

    .nav-logo img {
      height: clamp(40px, 5vw, 52px);
      width: auto;
      max-width: min(220px, 38vw);
      display: block;
      object-fit: contain;
    }

    .nav-menu {
      display: flex;
      align-items: center;
      gap: 8px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .nav-item {
      position: relative;
    }

    .nav-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      border-radius: 999px;
      color: var(--text-secondary);
      text-decoration: none;
      font-weight: 600;
      transition: var(--transition-fast);
      border: 1px solid transparent;
    }

    .nav-link:hover {
      color: var(--text-primary);
      background: rgba(99,102,241,0.1);
      border-color: rgba(99,102,241,0.3);
    }

    .nav-link.active {
      color: var(--brand-gold);
      background: rgba(255,178,0,0.1);
      border-color: rgba(255,178,0,0.3);
    }

    .nav-cta {
      background: linear-gradient(135deg, var(--brand-gold), #ffd166);
      color: #0a0a0a;
      border: 0;
      padding: 12px 20px;
      border-radius: 14px;
      font-weight: 800;
      letter-spacing: .02em;
      box-shadow: var(--glow-gold);
      transition: var(--transition-fast);
    }

    .nav-cta:hover {
      transform: translateY(-2px);
      filter: brightness(1.05);
    }

    .mobile-menu-toggle {
      display: none;
      background: none;
      border: none;
      color: var(--text-primary);
      font-size: 24px;
      cursor: pointer;
      padding: 8px;
      position: absolute;
      right: 20px;
    }

    /* Layout wrapper */
    .wrapper {
      position: relative;
      z-index: 2;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px 0;
    }

    #home.section.hero {
      margin-top: 0;
      padding-top: 0;
    }

    /* Section Styles */
    .section {
      margin-top: var(--section-gap);
      padding: var(--section-pad-y) 0;
      scroll-margin-top: 100px;
    }

    .section:first-of-type {
      margin-top: 0;
      padding-top: 0;
    }

    .section-header {
      text-align: center;
      margin-bottom: 36px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .section-title {
      font-size: clamp(32px, 6vw, 56px);
      line-height: 1.05;
      font-weight: 900;
      letter-spacing: -0.02em;
      background: linear-gradient(135deg, #fff, #dbeafe 40%, #fde68a 85%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin: 0 0 20px;
      text-align: center;
      width: 100%;
    }

    .section-subtitle {
      color: var(--text-secondary);
      font-size: clamp(18px, 2.4vw, 22px);
      max-width: 800px;
      margin: 0 auto;
      line-height: 1.6;
      text-align: center;
    }

    /* Hero Section */
    .hero {
      text-align: center;
      padding: 0;
      margin-bottom: 0;
    }

    #home.section.hero + #about.cf-about-section,
    #home.section.hero + .mayor-highlight-section--fullbleed + #about.cf-about-section {
      margin-top: 0;
      padding-top: clamp(40px, 5vw, 64px);
    }

    .hero-banner {
      position: relative;
      width: 100vw;
      margin: var(--nav-height) 0 0 50%;
      transform: translateX(-50%);
      min-height: var(--hero-banner-height);
      overflow: hidden;
      border-bottom: none;
      box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
    }

    @media (min-width: 769px) {
      .hero-banner {
        height: var(--hero-banner-height);
        max-height: var(--hero-banner-height);
      }
    }

    .hero-banner-media {
      position: absolute;
      inset: 0;
    }

    .hero-banner-media picture {
      position: absolute;
      inset: 0;
      display: block;
    }

    .hero-banner-media img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center center;
      filter: saturate(1.04) contrast(1.03);
    }

    .hero-banner-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(2, 6, 23, 0.72) 0%, rgba(2, 6, 23, 0.42) 42%, rgba(2, 6, 23, 0.88) 100%),
        radial-gradient(circle at 50% 38%, rgba(255, 178, 0, 0.14), transparent 48%);
    }

    .hero-banner-content {
      position: relative;
      z-index: 1;
      height: 100%;
      min-height: 0;
      max-height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: clamp(36px, 6vw, 80px) clamp(24px, 6vw, 88px);
      max-width: 1240px;
      margin: 0 auto;
    }

    .hero-banner-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      color: var(--brand-gold);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .hero-banner-kicker::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: var(--brand-gold);
      box-shadow: 0 0 20px rgba(255, 178, 0, 0.75);
    }

    .hero-banner-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      margin-top: 28px;
    }

    .hero-banner-btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border-radius: 14px;
      border: 1px solid rgba(255, 178, 0, 0.34);
      background: rgba(15, 23, 42, 0.72);
      backdrop-filter: blur(12px);
      color: #fde68a;
      font-weight: 800;
      padding: 14px 20px;
      text-decoration: none;
      transition: var(--transition-fast);
    }

    .hero-banner-btn-secondary:hover {
      border-color: rgba(255, 178, 0, 0.5);
      transform: translateY(-2px);
    }

    .hero-body {
      max-width: 1000px;
      margin: 0 auto;
      text-align: center;
    }

    .hero-cta-section {
      text-align: center;
    }

    /* Social proof stats — full-bleed strip */
    .hero-social-proof {
      width: 100vw;
      max-width: 100vw;
      margin: 24px 0 0 50%;
      transform: translateX(-50%);
      padding: clamp(20px, 3vw, 28px) clamp(20px, 4vw, 32px);
      background: rgba(15, 23, 42, 0.72);
      border: 0;
      border-top: 1px solid rgba(99, 102, 241, 0.24);
      border-bottom: 1px solid rgba(99, 102, 241, 0.24);
      border-radius: 0;
    }

    .hero-social-proof-grid {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(24px, 5vw, 56px);
      flex-wrap: wrap;
      max-width: 1100px;
      margin: 0 auto;
    }

    .hero-social-proof-stat {
      text-align: center;
      min-width: 120px;
    }

    .hero-social-proof-value {
      font-size: clamp(22px, 3vw, 28px);
      font-weight: 800;
      color: var(--brand-gold);
      margin-bottom: 4px;
      line-height: 1.1;
    }

    .hero-social-proof-label {
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-weight: 700;
    }

    /* Partner logo marquee — full-bleed */
    .marquee-logos {
      width: 100vw;
      max-width: 100vw;
      margin: 0 0 0 50%;
      transform: translateX(-50%);
      border-radius: 0;
      border: 0;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      background: #fff;
      overflow: hidden;
      position: relative;
      content-visibility: auto;
      contain-intrinsic-size: 88px;
    }

    .marquee-logos::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #fff 0%, transparent 8%, transparent 92%, #fff 100%);
      pointer-events: none;
    }

    .marquee-logos .tracks {
      gap: clamp(36px, 6vw, 64px);
      padding: 20px 0;
      animation: scroll 24s linear infinite;
    }

    .logo-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      height: 48px;
      padding: 0 4px;
    }

    .logo-pill img {
      display: block;
      height: 100%;
      width: auto;
      max-width: min(180px, 28vw);
      object-fit: contain;
      opacity: 1;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .logo-pill picture {
      display: contents;
    }

    .logo-pill:hover img {
      opacity: 0.85;
      transform: scale(1.03);
    }

    .hero-title {
      font-size: clamp(40px, 8vw, 72px);
      line-height: 1.05;
      font-weight: 900;
      letter-spacing: -0.02em;
      background: linear-gradient(135deg, #fff, #dbeafe 40%, #fde68a 85%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin: 0 0 30px;
      max-width: 760px;
    }

    .hero-banner .hero-title {
      margin-left: auto;
      margin-right: auto;
    }

    .hero-banner .hero-subtitle {
      margin-left: auto;
      margin-right: auto;
      max-width: 720px;
    }

    .hero-subtitle {
      color: var(--text-secondary);
      font-size: clamp(20px, 3vw, 24px);
      max-width: 900px;
      margin: 0 auto 40px;
      line-height: 1.6;
    }

    .hero-cta {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(135deg, var(--brand-gold), #ffd166);
      color: #0a0a0a;
      border: 0;
      padding: 16px 32px;
      border-radius: 16px;
      font-weight: 900;
      letter-spacing: .02em;
      box-shadow: var(--glow-gold);
      transition: var(--transition-fast);
      text-decoration: none;
      font-size: 18px;
    }

    .hero-cta:hover {
      transform: translateY(-3px);
      filter: brightness(1.05);
    }

    /* Services Showcase — full-bleed bento layout */
    .services-showcase-section {
      position: relative;
      width: 100vw;
      margin: var(--section-gap) calc(50% - 50vw) 0;
      padding: clamp(52px, 7vw, 80px) clamp(20px, 4vw, 48px);
      scroll-margin-top: 100px;
      overflow: hidden;
      isolation: isolate;
      border-top: 1px solid rgba(99, 102, 241, 0.24);
      border-bottom: 1px solid rgba(255, 178, 0, 0.14);
      background:
        radial-gradient(980px 480px at 4% 0%, rgba(99, 102, 241, 0.18), transparent 58%),
        radial-gradient(820px 400px at 96% 20%, rgba(255, 178, 0, 0.1), transparent 55%),
        radial-gradient(640px 320px at 50% 100%, rgba(16, 185, 129, 0.08), transparent 60%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.99) 0%, rgba(15, 23, 42, 0.96) 48%, rgba(2, 6, 23, 0.99) 100%);
    }

    .services-showcase-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(99, 102, 241, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.04) 1px, transparent 1px);
      background-size: 52px 52px;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 92%);
      pointer-events: none;
    }

    .services-showcase-inner {
      position: relative;
      z-index: 1;
      max-width: 1320px;
      margin: 0 auto;
    }

    .services-showcase-head {
      text-align: center;
      max-width: 880px;
      margin: 0 auto clamp(36px, 5vw, 52px);
    }

    .services-showcase-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(255, 178, 0, 0.08);
      border: 1px solid rgba(255, 178, 0, 0.28);
      color: var(--brand-gold);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    .services-showcase-kicker::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--brand-gold);
      box-shadow: 0 0 14px rgba(255, 178, 0, 0.8);
    }

    .services-showcase-title {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(32px, 5vw, 54px);
      font-weight: 900;
      letter-spacing: -0.035em;
      line-height: 1.05;
      margin: 0 0 16px;
      background: linear-gradient(135deg, #fff 0%, #dbeafe 42%, #fde68a 88%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .services-showcase-lede {
      margin: 0 auto;
      max-width: 680px;
      color: var(--text-secondary);
      font-size: clamp(16px, 1.8vw, 19px);
      line-height: 1.7;
    }

    .services-bento {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: clamp(14px, 2vw, 18px);
    }

    .svc-tile {
      --svc-accent: #6366f1;
      --svc-accent-soft: rgba(99, 102, 241, 0.14);
      --svc-accent-border: rgba(99, 102, 241, 0.32);
      position: relative;
      isolation: isolate;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 168px;
      padding: clamp(22px, 2.8vw, 30px);
      border-radius: 22px;
      border: 1px solid var(--svc-accent-border);
      background:
        linear-gradient(155deg, rgba(15, 23, 42, 0.94) 0%, rgba(2, 6, 23, 0.82) 100%),
        radial-gradient(ellipse 120% 80% at 100% 0%, var(--svc-accent-soft), transparent 55%);
      box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
      transition:
        transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
    }

    .svc-tile::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--svc-accent), transparent);
      opacity: 0.85;
    }

    .svc-tile:hover {
      transform: translateY(-5px);
      border-color: color-mix(in srgb, var(--svc-accent) 55%, rgba(255, 255, 255, 0.12));
      box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.32),
        0 0 40px color-mix(in srgb, var(--svc-accent) 12%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .svc-tile--featured {
      grid-column: 1 / span 7;
      grid-row: span 2;
      min-height: 340px;
      padding: clamp(28px, 3.5vw, 38px);
    }

    .svc-tile--photo { grid-column: 8 / span 5; --svc-accent: #fbbf24; --svc-accent-soft: rgba(251, 191, 36, 0.12); --svc-accent-border: rgba(251, 191, 36, 0.3); }
    .svc-tile--web { grid-column: 8 / span 5; --svc-accent: #22d3ee; --svc-accent-soft: rgba(34, 211, 238, 0.12); --svc-accent-border: rgba(34, 211, 238, 0.3); }
    .svc-tile--brand { grid-column: 1 / span 4; --svc-accent: #f472b6; --svc-accent-soft: rgba(244, 114, 182, 0.12); --svc-accent-border: rgba(244, 114, 182, 0.3); }
    .svc-tile--whitelabel { grid-column: 5 / span 4; --svc-accent: #a78bfa; --svc-accent-soft: rgba(167, 139, 250, 0.12); --svc-accent-border: rgba(167, 139, 250, 0.3); }
    .svc-tile--workshops { grid-column: 9 / span 4; --svc-accent: #34d399; --svc-accent-soft: rgba(52, 211, 153, 0.12); --svc-accent-border: rgba(52, 211, 153, 0.3); }

    .svc-tile-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .svc-tile-label {
      display: inline-flex;
      align-items: center;
      padding: 5px 11px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: color-mix(in srgb, var(--svc-accent) 80%, #fff);
      background: var(--svc-accent-soft);
      border: 1px solid color-mix(in srgb, var(--svc-accent) 35%, transparent);
    }

    .svc-tile-icon {
      width: clamp(48px, 5vw, 56px);
      height: clamp(48px, 5vw, 56px);
      display: grid;
      place-items: center;
      border-radius: 16px;
      font-size: clamp(20px, 2.2vw, 24px);
      color: var(--svc-accent);
      background: var(--svc-accent-soft);
      border: 1px solid color-mix(in srgb, var(--svc-accent) 28%, transparent);
      flex-shrink: 0;
    }

    .svc-tile--featured .svc-tile-icon {
      width: clamp(56px, 6vw, 68px);
      height: clamp(56px, 6vw, 68px);
      font-size: clamp(24px, 2.8vw, 30px);
      border-radius: 18px;
    }

    .svc-tile h3 {
      margin: 0;
      font-family: 'Poppins', sans-serif;
      font-size: clamp(20px, 2.2vw, 26px);
      font-weight: 800;
      letter-spacing: -0.025em;
      line-height: 1.15;
      color: var(--text-primary);
    }

    .svc-tile--featured h3 {
      font-size: clamp(26px, 3vw, 36px);
      max-width: 16ch;
    }

    .svc-tile--featured.svc-tile--video {
      align-items: center;
    }

    .svc-tile--featured.svc-tile--video .svc-tile-top {
      align-self: stretch;
      width: 100%;
    }

    .svc-tile--featured.svc-tile--video h3,
    .svc-tile--featured.svc-tile--video p {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .svc-tile--featured.svc-tile--video .svc-tile-video {
      align-self: stretch;
      width: 100%;
    }

    .svc-tile--featured.svc-tile--video .svc-tile-tags {
      justify-content: center;
      width: 100%;
    }

    .svc-tile p {
      margin: 0;
      flex: 1;
      color: var(--text-secondary);
      font-size: clamp(15px, 1.45vw, 17px);
      line-height: 1.68;
      max-width: 52ch;
    }

    .svc-tile--featured p {
      font-size: clamp(16px, 1.6vw, 18px);
      max-width: 46ch;
      flex: 0 0 auto;
    }

    .svc-tile-video {
      flex: 1 1 0;
      min-height: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      container-type: size;
    }

    .svc-tile-video-frame {
      position: relative;
      width: min(100cqw, calc(100cqh * 16 / 9));
      aspect-ratio: 16 / 9;
      max-width: 100%;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--svc-accent) 28%, rgba(255, 255, 255, 0.08));
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
      background: #020617;
    }

    @supports not (container-type: size) {
      .svc-tile-video-frame {
        width: 100%;
        height: auto;
      }
    }

    .svc-tile-video-frame iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .svc-tile--featured .svc-tile-tags {
      flex-shrink: 0;
    }

    .svc-tile-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 4px 0 0;
      padding: 0;
      list-style: none;
    }

    .svc-tile-tags li {
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--text-secondary);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .svc-reveal {
      opacity: 0;
      transform: translateY(22px);
      transition:
        opacity 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .services-showcase-section.is-visible .svc-reveal {
      opacity: 1;
      transform: translateY(0);
    }

    .services-showcase-section.is-visible .svc-reveal:nth-child(1) { transition-delay: 0ms; }
    .services-showcase-section.is-visible .svc-reveal:nth-child(2) { transition-delay: 70ms; }
    .services-showcase-section.is-visible .svc-reveal:nth-child(3) { transition-delay: 140ms; }
    .services-showcase-section.is-visible .svc-reveal:nth-child(4) { transition-delay: 210ms; }
    .services-showcase-section.is-visible .svc-reveal:nth-child(5) { transition-delay: 280ms; }
    .services-showcase-section.is-visible .svc-reveal:nth-child(6) { transition-delay: 350ms; }
    @media (prefers-reduced-motion: reduce) {
      .svc-reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }

      .svc-tile:hover {
        transform: none;
      }
    }

    @media (max-width: 1100px) and (min-width: 769px) {
      .svc-tile--featured {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 280px;
      }

      .svc-tile--photo { grid-column: 1 / span 6; }
      .svc-tile--web { grid-column: 7 / span 6; }
      .svc-tile--brand { grid-column: 1 / span 4; }
      .svc-tile--whitelabel { grid-column: 5 / span 4; }
      .svc-tile--workshops { grid-column: 9 / span 4; }
    }

    /* About Section — flagship founder story */
    .cf-about-section {
      position: relative;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 48px);
      overflow: hidden;
      isolation: isolate;
      border-top: 1px solid rgba(99, 102, 241, 0.2);
      border-bottom: 1px solid rgba(255, 178, 0, 0.14);
      background:
        radial-gradient(1100px 520px at 0% 0%, rgba(37, 99, 235, 0.2), transparent 58%),
        radial-gradient(900px 480px at 100% 12%, rgba(255, 178, 0, 0.12), transparent 55%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.98) 0%, rgba(15, 23, 42, 0.96) 45%, rgba(2, 6, 23, 0.98) 100%);
    }

    .cf-about-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(99, 102, 241, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.035) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 92%);
      pointer-events: none;
    }

    .cf-about-shell {
      position: relative;
      z-index: 1;
      max-width: 1180px;
      margin: 0 auto;
      display: grid;
      gap: clamp(40px, 6vw, 64px);
    }

    .cf-about-header {
      text-align: center;
      max-width: 820px;
      margin: 0 auto;
    }

    .cf-about-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 16px;
      padding: 8px 16px;
      border-radius: 999px;
      border: 1px solid rgba(255, 178, 0, 0.32);
      background: rgba(255, 178, 0, 0.08);
      color: var(--brand-gold);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .cf-about-title {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(36px, 6.5vw, 64px);
      font-weight: 900;
      line-height: 1.05;
      letter-spacing: -0.03em;
      margin: 0 0 18px;
      color: #fff;
    }

    .cf-about-title span {
      display: inline-block;
      background: linear-gradient(135deg, #60a5fa 0%, #fde68a 55%, var(--brand-gold) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .cf-about-deck {
      margin: 0;
      color: var(--text-secondary);
      font-size: clamp(17px, 2.2vw, 21px);
      line-height: 1.7;
    }

    .cf-about-hero {
      display: grid;
      grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr);
      gap: clamp(32px, 5vw, 56px);
      align-items: center;
    }

    .cf-about-visual {
      position: relative;
    }

    .cf-about-visual-glow {
      position: absolute;
      inset: 8% 0 8% 8%;
      border-radius: 28px;
      background:
        radial-gradient(ellipse at 30% 40%, rgba(37, 99, 235, 0.55), transparent 62%),
        radial-gradient(ellipse at 70% 60%, rgba(255, 178, 0, 0.18), transparent 55%);
      filter: blur(40px);
      opacity: 0.85;
      pointer-events: none;
      z-index: 0;
    }

    .cf-about-portrait {
      position: relative;
      z-index: 1;
      margin: 0;
      padding: 0;
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid rgba(96, 165, 250, 0.35);
      box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        -12px 0 48px rgba(37, 99, 235, 0.15);
    }

    .cf-about-portrait img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 2 / 3;
      object-fit: cover;
      object-position: center top;
    }

    .cf-about-portrait-caption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: clamp(20px, 4vw, 28px);
      background: linear-gradient(180deg, transparent 0%, rgba(2, 6, 23, 0.55) 35%, rgba(2, 6, 23, 0.92) 100%);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .cf-about-portrait-name {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(18px, 2.5vw, 22px);
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.01em;
    }

    .cf-about-portrait-role {
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--brand-gold);
    }

    .cf-about-origin {
      position: relative;
      z-index: 1;
      display: flex;
      width: fit-content;
      align-items: center;
      gap: 8px;
      margin: 16px auto 0;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(99, 102, 241, 0.28);
      background: rgba(15, 23, 42, 0.65);
      color: #cbd5e1;
      font-size: 0.82rem;
      font-weight: 600;
    }

    .cf-about-origin i {
      color: var(--brand-gold);
    }

    .cf-about-story {
      display: grid;
      gap: clamp(18px, 3vw, 24px);
      text-align: center;
    }

    .cf-about-lead {
      margin: 0 auto;
      max-width: 58ch;
      font-family: 'Poppins', sans-serif;
      font-size: clamp(18px, 2.4vw, 22px);
      font-weight: 600;
      line-height: 1.55;
      color: #f1f5f9;
      letter-spacing: -0.01em;
    }

    .cf-about-quote {
      margin: 0 auto;
      max-width: 62ch;
      padding: clamp(18px, 3vw, 24px) clamp(20px, 3vw, 28px);
      border-radius: 18px;
      border-left: none;
      border-top: 4px solid var(--brand-gold);
      background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(15, 23, 42, 0.75)),
        radial-gradient(circle at 100% 0%, rgba(255, 178, 0, 0.08), transparent 50%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .cf-about-quote p {
      margin: 0;
      font-size: clamp(16px, 2vw, 19px);
      line-height: 1.65;
      color: #e2e8f0;
      font-style: italic;
    }

    .cf-about-quote strong {
      font-style: normal;
      color: #fde68a;
      font-weight: 700;
    }

    .cf-about-body {
      margin: 0 auto;
      max-width: 58ch;
      color: var(--text-secondary);
      font-size: clamp(15px, 1.9vw, 17px);
      line-height: 1.75;
    }

    .cf-about-principles {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(6px, 1vw, 8px);
      list-style: none;
      margin: 0 auto;
      padding: clamp(8px, 1.2vw, 11px);
      max-width: min(420px, 92%);
      width: 100%;
      border-radius: 14px;
      border: 1px solid rgba(99, 102, 241, 0.24);
      background:
        linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.72)),
        radial-gradient(circle at 50% 0%, rgba(255, 178, 0, 0.06), transparent 58%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 24px rgba(0, 0, 0, 0.14);
    }

    .cf-about-principles li {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-height: 100%;
      padding: clamp(7px, 1vw, 10px) clamp(6px, 1vw, 8px);
      border-radius: 10px;
      border: 1px solid rgba(99, 102, 241, 0.14);
      background: rgba(15, 23, 42, 0.45);
      color: #e2e8f0;
      font-size: clamp(0.66rem, 1.1vw, 0.74rem);
      font-weight: 600;
      line-height: 1.25;
      text-align: center;
      transition:
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
    }

    .cf-about-principles li:hover {
      border-color: rgba(255, 178, 0, 0.32);
      background: rgba(255, 178, 0, 0.06);
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    }

    .cf-about-principles li i {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(255, 178, 0, 0.14));
      border: 1px solid rgba(96, 165, 250, 0.28);
      color: var(--brand-gold);
      font-size: 0.75rem;
      flex-shrink: 0;
    }

    .cf-about-founder-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-top: 0;
    }

    @media (min-width: 769px) {
      .cf-about-hero {
        align-items: stretch;
        padding-bottom: 52px;
      }

      .cf-about-visual {
        align-self: stretch;
      }

      .cf-about-origin {
        position: absolute;
        top: calc(100% + 12px);
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        width: max-content;
        max-width: calc(100% - 16px);
      }

      .cf-about-story {
        display: flex;
        flex-direction: column;
        gap: clamp(10px, 1.8vw, 16px);
        min-height: 100%;
      }

      .cf-about-founder-actions {
        margin-top: auto;
      }
    }

    .cf-about-pillars {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(14px, 2.5vw, 20px);
    }

    .cf-about-pillar {
      padding: clamp(22px, 3vw, 28px);
      border-radius: 20px;
      border: 1px solid rgba(99, 102, 241, 0.22);
      background:
        linear-gradient(155deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.82)),
        radial-gradient(circle at 100% 0%, rgba(255, 178, 0, 0.06), transparent 55%);
      transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    }

    .cf-about-pillar:hover {
      border-color: rgba(255, 178, 0, 0.35);
      transform: translateY(-4px);
      box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
    }

    .cf-about-pillar-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      margin-bottom: 14px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(255, 178, 0, 0.15));
      border: 1px solid rgba(96, 165, 250, 0.3);
      color: var(--brand-gold);
      font-size: 1.15rem;
    }

    .cf-about-pillar h3 {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(16px, 2vw, 18px);
      font-weight: 800;
      color: #f8fafc;
      margin: 0 0 10px;
      line-height: 1.25;
    }

    .cf-about-pillar p {
      margin: 0;
      color: var(--text-secondary);
      font-size: 0.92rem;
      line-height: 1.6;
    }

    .cf-about-closer {
      text-align: center;
      padding: clamp(28px, 4vw, 40px);
      border-radius: 22px;
      border: 1px solid rgba(255, 178, 0, 0.22);
      background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.92)),
        radial-gradient(circle at 50% 0%, rgba(255, 178, 0, 0.1), transparent 55%);
    }

    .cf-about-closer-text {
      margin: 0 0 16px;
      font-family: 'Poppins', sans-serif;
      font-size: clamp(17px, 2.5vw, 21px);
      font-weight: 600;
      line-height: 1.55;
      color: #e2e8f0;
      max-width: 58ch;
      margin-left: auto;
      margin-right: auto;
    }

    .cf-about-closer-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--brand-gold);
      font-size: 0.95rem;
      font-weight: 800;
      text-decoration: none;
      letter-spacing: 0.02em;
      transition: color 0.2s ease, gap 0.2s ease;
    }

    .cf-about-closer-link:hover {
      color: #fde68a;
      gap: 12px;
    }

    .cf-about-section .spb-cta-inline {
      max-width: 1180px;
      margin-left: auto;
      margin-right: auto;
    }

    @media (max-width: 1024px) {
      .cf-about-pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 768px) {
      .cf-about-section {
        padding: clamp(36px, 8vw, 48px) var(--mobile-gutter, 16px);
        overflow-x: clip;
      }

      .cf-about-shell {
        width: 100%;
        min-width: 0;
      }

      .cf-about-hero {
        grid-template-columns: 1fr;
        gap: clamp(24px, 5vw, 32px);
      }

      .cf-about-visual {
        max-width: 100%;
        margin: 0 auto;
        width: 100%;
      }

      .cf-about-origin {
        position: static;
        transform: none;
        left: auto;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        margin-top: 16px;
      }

      .cf-about-story {
        display: grid;
        gap: clamp(14px, 3vw, 20px);
        min-height: 0;
      }

      .cf-about-principles {
        max-width: 100%;
      }

      .cf-about-founder-actions {
        flex-direction: column;
      }

      .cf-about-founder-actions .hero-cta,
      .cf-about-founder-actions .hero-banner-btn-secondary {
        width: 100%;
        justify-content: center;
      }

      .cf-about-pillars {
        grid-template-columns: 1fr;
      }
    }

    /* Legacy about card classes (resume/other pages) */
    .about-content {
      margin-top: 24px;
    }

    .about-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
    }

    .about-card {
      background: var(--card-bg);
      border: var(--card-border);
      border-radius: var(--radius-lg);
      padding: 30px;
      text-align: center;
      backdrop-filter: var(--backdrop);
      box-shadow: var(--shadow-md);
      transition: var(--transition);
    }

    .about-card:hover {
      transform: translateY(-4px);
      border-color: rgba(99,102,241,0.4);
      box-shadow: var(--shadow-lg);
    }

    .about-icon {
      width: 60px;
      height: 60px;
      margin: 0 auto 20px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(255,178,0,0.2));
      display: grid;
      place-items: center;
      font-size: 24px;
      color: var(--brand-gold);
    }

    .about-card h3 {
      font-size: 20px;
      font-weight: 800;
      color: var(--text-primary);
      margin: 0 0 16px;
    }

    .about-card p {
      color: var(--text-secondary);
      font-size: 16px;
      line-height: 1.6;
      margin: 0;
    }

    /* Portfolio Section — curated from resume, no CMS */
    .lp-portfolio-shell {
      display: grid;
      gap: 32px;
      --lp-portfolio-gap: 32px;
    }

    .lp-portfolio-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 0.95fr);
      gap: 32px;
      align-items: stretch;
      padding: clamp(28px, 4vw, 44px);
      border-radius: 26px;
      border: 1px solid rgba(255,178,0,0.22);
      background:
        linear-gradient(135deg, rgba(2,6,23,0.92), rgba(15,23,42,0.78)),
        url("assets/resume-portfolio/portfolio-highlight-1.webp") center / cover;
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      position: relative;
    }

    .lp-portfolio-hero::after {
      content: "";
      position: absolute;
      right: -80px;
      bottom: -80px;
      width: 260px;
      height: 260px;
      border-radius: 999px;
      border: 40px solid rgba(255,178,0,0.07);
      pointer-events: none;
    }

    .lp-portfolio-hero-copy {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .lp-portfolio-kicker {
      color: var(--brand-gold);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
      margin-bottom: 14px;
      text-align: center;
    }

    .lp-portfolio-title {
      text-align: center;
      margin-bottom: 18px;
      width: 100%;
    }

    .lp-portfolio-title span {
      background: linear-gradient(135deg, #fff, #dbeafe 44%, #fde68a 90%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .lp-portfolio-lede {
      color: var(--text-secondary);
      font-size: 17px;
      line-height: 1.75;
      margin: 0 auto;
      max-width: 640px;
      text-align: center;
    }

    .lp-portfolio-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 26px;
      justify-content: center;
      width: 100%;
    }

    .lp-portfolio-btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border-radius: 14px;
      border: 1px solid rgba(255,178,0,0.34);
      background: rgba(15,23,42,0.74);
      color: #fde68a;
      font-weight: 800;
      padding: 14px 20px;
      text-decoration: none;
      transition: var(--transition-fast);
    }

    .lp-portfolio-btn-secondary:hover {
      filter: brightness(1.08);
      transform: translateY(-2px);
    }

    .lp-portfolio-feature {
      position: relative;
      z-index: 1;
      min-height: 320px;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(255,178,0,0.26);
      background: rgba(2,6,23,0.64);
      box-shadow: 0 24px 70px rgba(0,0,0,0.45);
    }

    .lp-portfolio-feature img {
      width: 100%;
      height: 100%;
      min-height: 320px;
      object-fit: cover;
      display: block;
      opacity: .9;
    }

    .lp-portfolio-feature-badge {
      position: absolute;
      left: 18px;
      bottom: 18px;
      right: 18px;
      border: 1px solid rgba(255,178,0,0.28);
      border-radius: 16px;
      background: rgba(2,6,23,0.82);
      backdrop-filter: blur(14px);
      padding: 14px 16px;
    }

    .lp-portfolio-feature-badge strong {
      display: block;
      font-family: 'Poppins', sans-serif;
      font-size: 15px;
      margin-bottom: 6px;
    }

    .lp-portfolio-feature-badge span {
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.5;
    }

    .lp-portfolio-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .lp-portfolio-stat {
      padding: 22px 18px;
      border-radius: 18px;
      border: 1px solid rgba(99,102,241,0.22);
      background: rgba(15,23,42,0.62);
      text-align: center;
      transition: var(--transition-fast);
    }

    .lp-portfolio-stat:hover {
      border-color: rgba(255,178,0,0.35);
      transform: translateY(-2px);
    }

    .lp-portfolio-stat strong {
      display: block;
      font-family: 'Poppins', sans-serif;
      font-size: clamp(28px, 4vw, 38px);
      line-height: 1;
      color: var(--brand-gold);
      margin-bottom: 10px;
    }

    .lp-portfolio-stat span {
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.5;
    }

    .lp-portfolio-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }

    .lp-portfolio-nav a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: 999px;
      border: 1px solid rgba(99,102,241,0.28);
      background: rgba(15,23,42,0.55);
      color: var(--text-secondary);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      transition: var(--transition-fast);
    }

    .lp-portfolio-nav a:hover {
      border-color: rgba(255,178,0,0.42);
      color: #fde68a;
      transform: translateY(-1px);
    }

    .lp-portfolio-block {
      scroll-margin-top: 110px;
    }

    .lp-block-head {
      margin-bottom: 20px;
      text-align: center;
    }

    .lp-block-title {
      font-size: clamp(24px, 3vw, 30px);
      font-weight: 800;
      color: var(--text-primary);
      margin: 0 0 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding-bottom: 14px;
      border-bottom: 2px solid rgba(99,102,241,0.28);
      text-align: center;
    }

    .lp-block-title i {
      color: var(--brand-gold);
      flex-shrink: 0;
    }

    .lp-block-lede {
      color: var(--text-secondary);
      font-size: 16px;
      line-height: 1.7;
      margin: 0 auto;
      max-width: 820px;
      text-align: center;
    }

    .lp-video-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .lp-video-card {
      overflow: hidden;
      border-radius: 20px;
      border: 1px solid rgba(99,102,241,0.22);
      background: rgba(2,6,23,0.58);
      transition: var(--transition-fast);
    }

    .lp-video-card:hover {
      border-color: rgba(255,178,0,0.42);
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
    }

    .lp-video-frame {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: rgba(2,6,23,0.86);
    }

    .lp-video-frame iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }

    .lp-video-body {
      padding: 18px;
    }

    .lp-video-meta {
      color: var(--brand-gold);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .lp-video-title {
      font-family: 'Poppins', sans-serif;
      font-size: 17px;
      font-weight: 800;
      line-height: 1.3;
      margin: 0 0 8px;
    }

    .lp-video-copy {
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.55;
      margin: 0;
    }

    /* Creator Collective — full-bleed portfolio card (landing only) */
    .lp-creator-edu-section {
      position: relative;
      width: 100vw;
      margin: clamp(28px, 4vw, 44px) calc(50% - 50vw) 0;
      scroll-margin-top: 110px;
      padding: clamp(44px, 6vw, 72px) clamp(20px, 4vw, 48px);
      overflow: hidden;
      isolation: isolate;
      border-top: 1px solid rgba(59, 130, 246, 0.32);
      border-bottom: 1px solid rgba(59, 130, 246, 0.2);
      background:
        radial-gradient(920px 440px at 8% 0%, rgba(59, 130, 246, 0.22), transparent 58%),
        radial-gradient(720px 380px at 92% 18%, rgba(255, 178, 0, 0.1), transparent 55%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.98) 0%, rgba(15, 23, 42, 0.96) 48%, rgba(2, 6, 23, 0.98) 100%);
      box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.08);
    }

    .lp-creator-edu-section:has(+ .iheart-section) {
      border-bottom: none;
    }

    .lp-portfolio-shell > .lp-creator-edu-section + .iheart-section {
      margin-top: calc(-1 * var(--lp-portfolio-gap, 32px));
    }

    .lp-creator-edu-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(59, 130, 246, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.04) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 92%);
      pointer-events: none;
      z-index: 0;
    }

    .lp-creator-edu-inner {
      position: relative;
      z-index: 1;
      max-width: 1180px;
      margin: 0 auto;
    }

    .lp-creator-edu-section .creator-banner {
      position: relative;
      overflow: hidden;
      min-height: clamp(420px, 52vw, 560px);
      border: 1px solid rgba(59, 130, 246, 0.38);
      border-radius: 28px;
      background: rgba(2, 6, 23, 0.75);
      box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
      margin-bottom: clamp(24px, 3vw, 36px);
    }

    .lp-creator-edu-section .creator-banner-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      opacity: 0.78;
    }

    .lp-creator-edu-section .creator-banner::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(2, 6, 23, 0.35) 0%, rgba(2, 6, 23, 0.55) 42%, rgba(2, 6, 23, 0.94) 100%),
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(37, 99, 235, 0.25), transparent 70%);
    }

    .lp-creator-edu-section .creator-banner-content {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 820px;
      margin: 0 auto;
      padding: clamp(32px, 5vw, 56px);
      min-height: clamp(420px, 52vw, 560px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      text-align: center;
    }

    .lp-creator-edu-section .creator-title {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(34px, 4.9vw, 58px);
      line-height: 0.95;
      letter-spacing: -0.05em;
      margin: 0 0 18px;
      color: var(--text-primary);
      text-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    }

    .lp-creator-edu-section .creator-title-line {
      display: block;
      white-space: nowrap;
    }

    .lp-creator-edu-section .creator-title span {
      color: #60a5fa;
      background: linear-gradient(135deg, #93c5fd 0%, #3b82f6 55%, #2563eb 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .lp-creator-edu-section .creator-logo-inline {
      display: block;
      width: min(100%, 300px);
      max-height: 52px;
      object-fit: contain;
      filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.35));
      margin: 0 auto 20px;
      opacity: 0.96;
    }

    .lp-creator-edu-section .creator-copy {
      color: rgba(226, 232, 240, 0.92);
      font-size: clamp(15px, 1.8vw, 17px);
      line-height: 1.75;
      margin: 0;
      max-width: 680px;
    }

    .lp-creator-edu-section .lp-creator-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(12px, 2vw, 18px);
      margin-bottom: clamp(28px, 4vw, 40px);
    }

    .lp-creator-edu-section .lp-creator-stat {
      position: relative;
      overflow: hidden;
      text-align: center;
      border: 1px solid rgba(59, 130, 246, 0.32);
      border-radius: 20px;
      background:
        linear-gradient(165deg, rgba(37, 99, 235, 0.18) 0%, rgba(2, 6, 23, 0.82) 55%),
        rgba(15, 23, 42, 0.65);
      padding: clamp(22px, 3vw, 28px) clamp(16px, 2vw, 22px);
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
      transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    }

    .lp-creator-edu-section .lp-creator-stat::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #3b82f6, #60a5fa 45%, var(--brand-gold) 100%);
    }

    .lp-creator-edu-section .lp-creator-stat:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 178, 0, 0.45);
      box-shadow: 0 20px 48px rgba(37, 99, 235, 0.22);
    }

    .lp-creator-edu-section .lp-creator-stat-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      margin: 0 auto 14px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.28), rgba(37, 99, 235, 0.12));
      border: 1px solid rgba(147, 197, 253, 0.25);
      color: #93c5fd;
      font-size: 22px;
    }

    .lp-creator-edu-section .lp-creator-stat strong {
      display: block;
      color: var(--brand-gold);
      font-family: 'Poppins', sans-serif;
      font-size: clamp(22px, 2.5vw, 28px);
      line-height: 1;
      margin-bottom: 10px;
      letter-spacing: -0.02em;
    }

    .lp-creator-edu-section .lp-creator-stat span {
      display: block;
      color: rgba(203, 213, 225, 0.92);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.55;
      max-width: 240px;
      margin: 0 auto;
    }

    .lp-creator-edu-section .creator-platform-panel {
      border: 1px solid rgba(59, 130, 246, 0.28);
      border-radius: 26px;
      background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(255, 178, 0, 0.06)),
        rgba(2, 6, 23, 0.62);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
      margin: 0;
      padding: clamp(28px, 4vw, 40px);
    }

    .lp-creator-edu-section .creator-platform-head {
      text-align: center;
      max-width: 920px;
      margin: 0 auto clamp(28px, 4vw, 36px);
    }

    .lp-creator-edu-section .creator-platform-label {
      color: var(--brand-gold);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.16em;
      margin: 0 0 14px;
      text-transform: uppercase;
    }

    .lp-creator-edu-section .creator-platform-title {
      color: var(--text-primary);
      font-family: 'Poppins', sans-serif;
      font-size: clamp(26px, 4vw, 40px);
      line-height: 1.08;
      letter-spacing: -0.035em;
      margin: 0 0 16px;
      text-align: center;
    }

    .lp-creator-edu-section .creator-platform-copy {
      color: var(--text-secondary);
      font-size: 16px;
      line-height: 1.75;
      margin: 0 auto;
      max-width: 820px;
      text-align: center;
    }

    .lp-creator-edu-section .creator-platform-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 24px;
    }

    .lp-creator-edu-section .creator-platform-item {
      border: 1px solid rgba(99, 102, 241, 0.22);
      border-radius: 18px;
      background: rgba(2, 6, 23, 0.52);
      padding: 16px;
      text-align: center;
    }

    .lp-creator-edu-section .creator-platform-item strong {
      display: block;
      color: #93c5fd;
      font-family: 'Poppins', sans-serif;
      font-size: 15px;
      margin-bottom: 7px;
    }

    .lp-creator-edu-section .creator-platform-item span {
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.5;
    }

    .lp-creator-edu-section .lp-creator-gallery {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .lp-creator-edu-section .lp-creator-card {
      overflow: hidden;
      border: 1px solid rgba(99, 102, 241, 0.22);
      border-radius: 20px;
      background: rgba(2, 6, 23, 0.58);
      transition: var(--transition-fast);
    }

    .lp-creator-edu-section .lp-creator-card:hover {
      border-color: rgba(255, 178, 0, 0.42);
      transform: translateY(-3px);
    }

    .lp-creator-edu-section .lp-creator-video {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: rgba(2, 6, 23, 0.86);
    }

    .lp-creator-edu-section .lp-creator-video iframe {
      width: 100%;
      height: 100%;
      display: block;
      border: 0;
    }

    .lp-creator-edu-section .lp-creator-card-body {
      padding: 18px;
      text-align: center;
    }

    .lp-creator-edu-section .lp-creator-card-meta {
      color: var(--brand-gold);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.12em;
      margin-bottom: 9px;
      text-transform: uppercase;
    }

    .lp-creator-edu-section .lp-creator-card-title {
      color: var(--text-primary);
      font-family: 'Poppins', sans-serif;
      font-size: 18px;
      font-weight: 800;
      line-height: 1.3;
      margin-bottom: 7px;
    }

    .lp-creator-edu-section .lp-creator-card-copy {
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.55;
      margin: 0;
    }

    .lp-creator-edu-section .lp-creator-footer-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      margin-top: 28px;
    }

    /* iHeart Radio — full-bleed portfolio feature */
    .iheart-section {
      position: relative;
      width: 100vw;
      margin: 0 calc(50% - 50vw) clamp(24px, 3vw, 36px);
      scroll-margin-top: 110px;
      padding: clamp(48px, 6vw, 72px) clamp(20px, 4vw, 48px);
      overflow: hidden;
      isolation: isolate;
      border-top: 1px solid rgba(196, 18, 48, 0.28);
      border-bottom: 1px solid rgba(196, 18, 48, 0.18);
      background:
        radial-gradient(900px 420px at 6% 0%, rgba(196, 18, 48, 0.18), transparent 58%),
        radial-gradient(760px 360px at 94% 12%, rgba(255, 178, 0, 0.08), transparent 55%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.98) 0%, rgba(15, 23, 42, 0.94) 50%, rgba(2, 6, 23, 0.98) 100%);
    }

    .iheart-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(196, 18, 48, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(196, 18, 48, 0.035) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 88%);
      pointer-events: none;
    }

    .iheart-section-inner {
      position: relative;
      z-index: 1;
      max-width: 1200px;
      margin: 0 auto;
    }

    .iheart-header {
      text-align: center;
      max-width: 920px;
      margin: 0 auto clamp(36px, 5vw, 52px);
    }

    .iheart-kicker {
      color: #fda4af;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .iheart-title-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: clamp(14px, 2.5vw, 22px);
      margin-bottom: 18px;
    }

    .iheart-logo {
      height: clamp(36px, 5vw, 48px);
      width: auto;
      object-fit: contain;
    }

    .iheart-title {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(26px, 4vw, 40px);
      font-weight: 800;
      line-height: 1.12;
      letter-spacing: -0.02em;
      margin: 0;
    }

    .iheart-title span {
      background: linear-gradient(135deg, #fff, #fde68a 85%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .iheart-lede {
      margin: 0 auto;
      max-width: 780px;
      color: var(--text-secondary);
      font-size: clamp(16px, 2vw, 18px);
      line-height: 1.75;
    }

    .iheart-showcase {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr);
      gap: clamp(24px, 3.5vw, 40px);
      align-items: stretch;
    }

    .iheart-video-wrap {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .iheart-video-frame {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(196, 18, 48, 0.32);
      background: rgba(2, 6, 23, 0.88);
      box-shadow: 0 28px 72px rgba(0, 0, 0, 0.48);
    }

    .iheart-video-frame iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }

    .iheart-video-label {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.04em;
    }

    .iheart-video-label::before {
      content: "";
      width: 28px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, #c41230, rgba(196, 18, 48, 0.2));
    }

    .iheart-aside {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 14px;
      padding: clamp(24px, 3vw, 36px);
      border-left: 3px solid rgba(196, 18, 48, 0.72);
      background: linear-gradient(90deg, rgba(196, 18, 48, 0.1), transparent 72%);
    }

    .iheart-aside-kicker {
      color: var(--brand-gold);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .iheart-aside h4 {
      margin: 0;
      font-family: 'Poppins', sans-serif;
      font-size: clamp(20px, 2.5vw, 26px);
      font-weight: 800;
      line-height: 1.25;
      color: var(--text-primary);
    }

    .iheart-aside p {
      margin: 0;
      color: var(--text-secondary);
      font-size: 15px;
      line-height: 1.7;
    }

    .iheart-pillars {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      margin-top: clamp(36px, 5vw, 48px);
      padding-top: clamp(28px, 4vw, 36px);
      border-top: 1px solid rgba(196, 18, 48, 0.22);
    }

    .iheart-pillar {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 0 clamp(16px, 2.5vw, 28px);
      text-align: left;
    }

    .iheart-pillar:first-child {
      padding-left: 0;
    }

    .iheart-pillar:last-child {
      padding-right: 0;
    }

    .iheart-pillar:not(:last-child) {
      border-right: 1px solid rgba(99, 102, 241, 0.18);
    }

    .iheart-pillar-icon {
      flex-shrink: 0;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: rgba(255, 178, 0, 0.1);
      border: 1px solid rgba(255, 178, 0, 0.22);
      color: var(--brand-gold);
      font-size: 17px;
    }

    .iheart-pillar strong {
      display: block;
      font-family: 'Poppins', sans-serif;
      font-size: 15px;
      font-weight: 800;
      color: var(--text-primary);
      margin-bottom: 6px;
      line-height: 1.3;
    }

    .iheart-pillar p {
      margin: 0;
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.6;
    }

    .iheart-footer-cta {
      display: flex;
      justify-content: center;
      margin-top: clamp(32px, 4vw, 44px);
    }

    /* Shawntà Hooks brand photography — full-bleed (synced from resume) */
    .shawnta-portfolio-section--fullbleed {
      position: relative;
      width: 100vw;
      margin: clamp(24px, 3vw, 36px) calc(50% - 50vw);
      scroll-margin-top: 110px;
      padding: clamp(48px, 6vw, 72px) clamp(20px, 4vw, 48px);
      overflow: hidden;
      isolation: isolate;
      border-top: 1px solid rgba(244, 114, 182, 0.28);
      border-bottom: 1px solid rgba(244, 114, 182, 0.18);
      background:
        radial-gradient(900px 420px at 8% 0%, rgba(244, 114, 182, 0.18), transparent 58%),
        radial-gradient(760px 360px at 92% 12%, rgba(255, 178, 0, 0.1), transparent 55%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.98) 0%, rgba(15, 23, 42, 0.94) 50%, rgba(2, 6, 23, 0.98) 100%);
    }

    .shawnta-portfolio-section--fullbleed::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(244, 114, 182, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 114, 182, 0.035) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 88%);
      pointer-events: none;
    }

    .shawnta-portfolio-section--fullbleed .shawnta-portfolio-inner {
      position: relative;
      z-index: 1;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0;
      border: none;
      border-radius: 0;
      box-shadow: none;
      background: none;
    }

    .shawnta-portfolio-header {
      position: relative;
      z-index: 1;
      max-width: 920px;
      margin: 0 auto 24px;
      text-align: center;
    }

    .shawnta-portfolio-pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(244, 114, 182, 0.34);
      border-radius: 999px;
      background: rgba(244, 114, 182, 0.1);
      color: #fbcfe8;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.14em;
      padding: 10px 16px;
      text-transform: uppercase;
    }

    .shawnta-title-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      margin: 20px 0 12px;
      flex-wrap: wrap;
    }

    .shawnta-logo-badge {
      width: 76px;
      height: 76px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(244, 114, 182, 0.32);
      border-radius: 24px;
      background: rgba(2, 6, 23, 0.6);
      box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
      padding: 10px;
    }

    .shawnta-logo-badge img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .shawnta-portfolio-title {
      color: var(--text-primary);
      font-family: 'Poppins', sans-serif;
      font-size: clamp(30px, 4.6vw, 52px);
      line-height: 1.02;
      letter-spacing: -0.04em;
      margin: 0;
    }

    .shawnta-portfolio-title span {
      background: linear-gradient(135deg, #fff, #fbcfe8 42%, #fde68a 92%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .shawnta-portfolio-lede {
      color: var(--text-secondary);
      font-size: 16px;
      line-height: 1.75;
      margin: 0 auto;
      max-width: 820px;
    }

    .shawnta-deliverables {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 18px;
    }

    .shawnta-deliverables span {
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 999px;
      background: rgba(2, 6, 23, 0.55);
      color: #e2e8f0;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      padding: 8px 12px;
      text-transform: uppercase;
    }

    .shawnta-portfolio-section--fullbleed .sh-gallery {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      align-items: stretch;
      margin: 0 -4px;
    }

    .sh-gallery figure {
      margin: 0;
      padding: 0;
      border: none;
      background: none;
      border-radius: 0;
      overflow: hidden;
      line-height: 0;
    }

    .sh-gallery img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      object-position: center center;
    }

    @media (max-width: 900px) {
      .shawnta-portfolio-section--fullbleed .sh-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .shawnta-portfolio-section--fullbleed {
        padding: 32px 16px;
      }

      .shawnta-portfolio-section--fullbleed .sh-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .lp-portfolio-shell > .shawnta-portfolio-section--fullbleed:has(+ .real-estate-section) {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    .lp-portfolio-shell > .shawnta-portfolio-section--fullbleed + .real-estate-section {
      margin-top: calc(-1 * var(--lp-portfolio-gap, 32px));
      padding-top: clamp(32px, 4vw, 48px);
      border-top: none;
    }

    /* Real Estate Portfolio — full-bleed (synced from resume) */
    .real-estate-section {
      position: relative;
      width: 100vw;
      margin: clamp(24px, 3vw, 36px) calc(50% - 50vw);
      scroll-margin-top: 110px;
      padding: clamp(48px, 6vw, 72px) clamp(20px, 4vw, 48px);
      overflow: hidden;
      isolation: isolate;
      border-top: 1px solid rgba(16, 185, 129, 0.28);
      border-bottom: 1px solid rgba(16, 185, 129, 0.18);
      background:
        radial-gradient(900px 420px at 6% 0%, rgba(16, 185, 129, 0.16), transparent 58%),
        radial-gradient(760px 360px at 94% 12%, rgba(255, 178, 0, 0.08), transparent 55%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.98) 0%, rgba(15, 23, 42, 0.94) 50%, rgba(2, 6, 23, 0.98) 100%);
    }

    .real-estate-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(16, 185, 129, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.035) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 88%);
      pointer-events: none;
    }

    .real-estate-section.portfolio-section {
      overflow: hidden;
    }

    .real-estate-section.portfolio-section::after {
      content: none;
      display: none;
    }

    .real-estate-inner {
      position: relative;
      z-index: 1;
      max-width: 1200px;
      margin: 0 auto;
    }

    .re-header {
      max-width: 920px;
      margin: 0 auto 28px;
      text-align: center;
    }

    .re-kicker {
      color: #6ee7b7;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .16em;
      margin-bottom: 12px;
      text-transform: uppercase;
    }

    .re-title {
      color: var(--text-primary);
      font-family: 'Poppins', sans-serif;
      font-size: clamp(34px, 5vw, 58px);
      font-weight: 900;
      line-height: 1.02;
      letter-spacing: -0.04em;
      margin: 0 0 16px;
    }

    .re-title span {
      color: #34d399;
    }

    .re-lede {
      color: var(--text-secondary);
      font-size: 17px;
      line-height: 1.75;
      margin: 0 auto;
      max-width: 820px;
    }

    .re-promise-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 14px;
    }

    .re-promise-card {
      position: relative;
      overflow: hidden;
      display: grid;
      gap: 10px;
      align-content: center;
      min-height: 148px;
      border: 1px solid rgba(16,185,129,0.34);
      border-radius: 18px;
      background:
        linear-gradient(135deg, rgba(6,78,59,0.42), rgba(15,23,42,0.72)),
        radial-gradient(circle at 100% 0%, rgba(255,178,0,0.12), transparent 38%);
      box-shadow: 0 22px 50px rgba(0,0,0,0.28);
      padding: 22px 24px;
      text-align: center;
    }

    .re-promise-card.turnaround {
      border-color: rgba(255,178,0,0.34);
      background:
        linear-gradient(135deg, rgba(120,53,15,0.34), rgba(15,23,42,0.72)),
        radial-gradient(circle at 0% 0%, rgba(255,178,0,0.16), transparent 40%);
    }

    .re-promise-icon {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      margin: 0 auto;
      border-radius: 14px;
      background: rgba(16,185,129,0.16);
      color: #6ee7b7;
      font-size: 22px;
    }

    .re-promise-card.turnaround .re-promise-icon {
      background: rgba(255,178,0,0.14);
      color: #fde68a;
    }

    .re-promise-card strong {
      color: var(--text-primary);
      font-family: 'Poppins', sans-serif;
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1;
      letter-spacing: -0.03em;
    }

    .re-promise-card span {
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.55;
      max-width: 420px;
      margin: 0 auto;
    }

    .re-showcase-grid {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      gap: 14px;
      margin-bottom: 14px;
      align-items: stretch;
      width: 100%;
    }

    .re-video-panel {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      width: 100%;
      min-width: 0;
      min-height: 100%;
      border: 1px solid rgba(16,185,129,0.28);
      border-radius: 18px;
      background: #020617;
      box-shadow: 0 24px 60px rgba(0,0,0,0.34);
    }

    .re-video-bg {
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      overflow: hidden;
      flex: 0 0 auto;
      background: #020617;
    }

    .re-portrait-fs-shell {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }

    .re-video-frame {
      position: relative;
      aspect-ratio: 9 / 16;
      width: 100%;
      height: auto;
      overflow: hidden;
      border-radius: 0;
      background: #020617;
    }

    .re-reel-video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
      background: #020617;
    }

    .re-reel-expand-btn {
      position: absolute;
      right: 8px;
      bottom: 8px;
      z-index: 3;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 999px;
      background: rgba(2,6,23,0.78);
      backdrop-filter: blur(8px);
      color: #f8fafc;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
    }

    .re-reel-expand-btn:hover {
      background: rgba(16,185,129,0.28);
      border-color: rgba(16,185,129,0.45);
      transform: scale(1.04);
    }

    .re-portrait-fs-shell:fullscreen,
    .re-portrait-fs-shell:-webkit-full-screen {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: #000;
    }

    .re-portrait-fs-shell:fullscreen .re-video-frame,
    .re-portrait-fs-shell:-webkit-full-screen .re-video-frame {
      height: min(100vh, 100%);
      width: min(calc(100vh * 9 / 16), 100vw);
      max-height: 100vh;
      max-width: 100vw;
      border-radius: 0;
    }

    .re-portrait-fs-shell:fullscreen .re-reel-video,
    .re-portrait-fs-shell:-webkit-full-screen .re-reel-video {
      object-fit: contain;
    }

    .re-portrait-fs-shell:fullscreen .re-reel-expand-btn,
    .re-portrait-fs-shell:-webkit-full-screen .re-reel-expand-btn {
      bottom: 16px;
      right: 16px;
    }

    body.re-reel-fs-open {
      overflow: hidden;
    }

    .re-reel-video.is-portrait-fullscreen {
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 10001;
      width: min(100vw, calc(100vh * 9 / 16));
      height: min(100vh, calc(100vw * 16 / 9));
      max-width: 100vw;
      max-height: 100vh;
      transform: translate(-50%, -50%);
      object-fit: contain;
      background: #000;
      border-radius: 0;
    }

    body.re-reel-fs-open::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: #000;
    }

    .re-video-meta {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex: 0 0 auto;
      border-top: 1px solid rgba(16,185,129,0.28);
      background: rgba(2,6,23,0.88);
      backdrop-filter: blur(12px);
      padding: 16px 12px 18px;
      text-align: center;
    }

    .re-video-doodle {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      overflow: hidden;
      padding: 4px 12px 12px;
      background: #020617;
    }

    .re-video-doodle img {
      width: 100%;
      height: 100%;
      max-height: 100%;
      display: block;
      object-fit: contain;
      object-position: center bottom;
      opacity: 0.92;
    }

    .re-video-meta strong {
      color: var(--text-primary);
      font-family: 'Poppins', sans-serif;
      font-size: 18px;
      line-height: 1.2;
    }

    .re-video-tag {
      display: block;
      color: #6ee7b7;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .re-video-badge {
      color: #fde68a;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .10em;
      text-transform: uppercase;
    }

    .re-blueprint-panel {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      min-width: 0;
      min-height: 100%;
      overflow: hidden;
      border: 1px solid rgba(255,178,0,0.28);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(15,23,42,0.84), rgba(2,6,23,0.72)),
        radial-gradient(circle at 50% 0%, rgba(255,178,0,0.10), transparent 42%);
      padding: 16px 18px 14px;
      text-align: left;
    }

    .re-blueprint-header {
      flex: 0 0 auto;
    }

    .re-blueprint-picker {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
      min-height: 0;
      margin-top: auto;
    }

    .re-blueprint-label {
      color: var(--brand-gold);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .re-blueprint-title {
      color: var(--text-primary);
      font-family: 'Poppins', sans-serif;
      font-size: clamp(18px, 2.2vw, 24px);
      line-height: 1.15;
      margin: 0;
    }

    .re-blueprint-copy {
      color: var(--text-secondary);
      font-size: 12px;
      line-height: 1.55;
      margin: 0;
    }

    .re-blueprint-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      flex: 0 0 auto;
    }

    .re-blueprint-thumb {
      margin: 0;
      padding: 0;
      border: 2px solid rgba(255,178,0,0.18);
      border-radius: 10px;
      background: #f8fafc;
      cursor: pointer;
      overflow: hidden;
      transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }

    .re-blueprint-thumb:hover {
      border-color: rgba(255,178,0,0.42);
      transform: translateY(-1px);
    }

    .re-blueprint-thumb.is-active {
      border-color: var(--brand-gold);
      box-shadow:
        0 0 0 1px rgba(255,178,0,0.45),
        0 0 0 4px rgba(255,178,0,0.12),
        0 10px 24px rgba(255,178,0,0.16);
    }

    .re-blueprint-thumb img {
      width: 100%;
      height: auto;
      min-height: 72px;
      max-height: 96px;
      display: block;
      object-fit: contain;
      padding: 5px;
      pointer-events: none;
    }

    .re-blueprint-preview {
      flex: 1;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,178,0,0.26);
      border-radius: 12px;
      background: #f8fafc;
      padding: 8px 10px;
      overflow: hidden;
    }

    .re-blueprint-preview img {
      width: 100%;
      height: 100%;
      max-height: 100%;
      display: block;
      object-fit: contain;
    }

    .re-service-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 14px;
    }

    .re-service-card {
      border: 1px solid rgba(99,102,241,0.22);
      border-radius: 16px;
      background: rgba(15,23,42,0.58);
      padding: 20px 18px;
      text-align: center;
    }

    .re-service-card i {
      color: #6ee7b7;
      font-size: 24px;
      margin-bottom: 12px;
    }

    .re-service-card h3 {
      color: var(--text-primary);
      font-family: 'Poppins', sans-serif;
      font-size: 20px;
      margin: 0 0 10px;
    }

    .re-service-card p {
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.65;
      margin: 0;
    }

    .re-gallery-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 12px;
      text-align: left;
    }

    .re-gallery-head h3 {
      color: var(--text-primary);
      font-family: 'Poppins', sans-serif;
      font-size: clamp(24px, 3vw, 34px);
      margin: 0 0 6px;
    }

    .re-gallery-head p {
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.6;
      margin: 0;
      max-width: 640px;
    }

    .re-gallery-count {
      color: #6ee7b7;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .re-slideshow {
      width: 100%;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 18px;
      overflow: hidden;
      background: rgba(2,6,23,0.62);
      box-shadow: 0 22px 54px rgba(0,0,0,0.32);
    }

    .re-slideshow-stage {
      position: relative;
      aspect-ratio: 16 / 9;
      background: #020617;
      overflow: hidden;
    }

    .re-slide {
      position: absolute;
      inset: 0;
      margin: 0;
      opacity: 0;
      visibility: hidden;
      transition: opacity 420ms ease, visibility 420ms ease;
    }

    .re-slide.is-active {
      opacity: 1;
      visibility: visible;
      z-index: 1;
    }

    .re-slide img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
    }

    .re-slide.is-blueprint img {
      object-fit: contain;
      background: #f8fafc;
      padding: 18px;
    }

    .re-slide-caption {
      position: absolute;
      left: 14px;
      bottom: 14px;
      z-index: 2;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 999px;
      background: rgba(2,6,23,0.78);
      backdrop-filter: blur(10px);
      color: #e2e8f0;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .10em;
      padding: 7px 11px;
      text-transform: uppercase;
    }

    .re-slideshow-nav {
      position: absolute;
      top: 50%;
      z-index: 3;
      transform: translateY(-50%);
      width: 42px;
      height: 42px;
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 999px;
      background: rgba(2,6,23,0.72);
      backdrop-filter: blur(10px);
      color: #f8fafc;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
    }

    .re-slideshow-nav:hover {
      background: rgba(16,185,129,0.22);
      border-color: rgba(16,185,129,0.42);
      transform: translateY(-50%) scale(1.04);
    }

    .re-slideshow-prev { left: 14px; }
    .re-slideshow-next { right: 14px; }

    .re-slideshow-footer {
      display: grid;
      gap: 10px;
      padding: 12px 14px 14px;
      border-top: 1px solid rgba(255,255,255,0.08);
      background: rgba(15,23,42,0.55);
    }

    .re-slideshow-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .re-slideshow-counter {
      color: #6ee7b7;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .re-slideshow-hint {
      color: var(--text-secondary);
      font-size: 12px;
    }

    .re-slideshow-thumbs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 2px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,178,0,0.45) transparent;
    }

    .re-slideshow-thumb {
      flex: 0 0 76px;
      width: 76px;
      height: 50px;
      border: 2px solid transparent;
      border-radius: 8px;
      overflow: hidden;
      padding: 0;
      background: #0f172a;
      opacity: 0.58;
      cursor: pointer;
      transition: opacity 180ms ease, border-color 180ms ease, transform 180ms ease;
    }

    .re-slideshow-thumb:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }

    .re-slideshow-thumb.is-active {
      border-color: var(--brand-gold);
      opacity: 1;
      box-shadow: 0 0 0 1px rgba(255,178,0,0.22);
    }

    .re-slideshow-thumb img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .re-slideshow-thumb.is-blueprint img {
      object-fit: contain;
      background: #f8fafc;
    }

    .re-gallery-wrap {
      margin-top: 0;
      width: 100%;
    }

    .re-deliverables {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 22px;
    }

    .re-deliverable {
      border: 1px solid rgba(16,185,129,0.22);
      border-radius: 14px;
      background: rgba(2,6,23,0.52);
      padding: 14px;
      text-align: center;
    }

    .re-deliverable strong {
      display: block;
      color: #6ee7b7;
      font-size: 12px;
      letter-spacing: .10em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .re-deliverable span {
      color: var(--text-secondary);
      font-size: 12px;
      line-height: 1.45;
    }

    .lp-feature-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 22px;
    }

    .lp-feature-card {
      padding: 18px;
      border-radius: 16px;
      border: 1px solid rgba(99,102,241,0.2);
      background: rgba(2,6,23,0.55);
      text-align: center;
    }

    .lp-feature-card i {
      color: var(--brand-gold);
      font-size: 18px;
      margin-bottom: 10px;
      display: block;
    }

    .lp-feature-card strong {
      display: block;
      font-size: 14px;
      margin-bottom: 6px;
    }

    .lp-feature-card span {
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.5;
    }

    .lp-web-showcase-stack {
      display: flex;
      flex-direction: column;
      gap: clamp(40px, 5vw, 64px);
      margin-top: 12px;
    }

    .lp-web-showcase {
      --showcase-delay: 0ms;
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
      gap: clamp(18px, 2.8vw, 32px);
      align-items: stretch;
      padding: clamp(16px, 2.2vw, 22px);
      border-radius: 24px;
      background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.52) 0%, rgba(2, 6, 23, 0.38) 100%);
      border: 1px solid rgba(255, 255, 255, 0.07);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
      opacity: 0;
      transform: translateY(32px);
      transition:
        opacity 0.75s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.4s ease,
        box-shadow 0.45s ease;
      transition-delay: var(--showcase-delay);
    }

    .lp-web-showcase.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .lp-web-showcase:hover {
      border-color: color-mix(in srgb, var(--sp-accent) 38%, rgba(255, 255, 255, 0.08));
      box-shadow:
        0 28px 72px rgba(0, 0, 0, 0.32),
        0 0 0 1px color-mix(in srgb, var(--sp-accent) 16%, transparent),
        0 0 48px color-mix(in srgb, var(--sp-accent) 10%, transparent);
    }

    .lp-web-showcase:nth-child(1) { --showcase-delay: 0ms; }
    .lp-web-showcase:nth-child(2) { --showcase-delay: 90ms; }
    .lp-web-showcase:nth-child(3) { --showcase-delay: 180ms; }
    .lp-web-showcase:nth-child(4) { --showcase-delay: 270ms; }

    @media (min-width: 901px) {
      .lp-web-showcase::after {
        content: "";
        position: absolute;
        top: 12%;
        bottom: 12%;
        left: calc(55.5% - 0.5px);
        width: 1px;
        background: linear-gradient(
          to bottom,
          transparent,
          rgba(255, 255, 255, 0.1) 20%,
          rgba(255, 255, 255, 0.1) 80%,
          transparent
        );
        pointer-events: none;
      }
    }

    .site-preview {
      --sp-accent: #7ECB00;
      --sp-accent-bright: #A8F020;
      --sp-cream: #0A0C0A;
      --sp-border: rgba(126, 203, 0, 0.28);
      --sp-border-soft: rgba(126, 203, 0, 0.2);
      --sp-border-frame: rgba(126, 203, 0, 0.22);
      --sp-border-browser: rgba(126, 203, 0, 0.18);
      --sp-dot-accent: rgba(126, 203, 0, 0.55);
      --sp-panel-bg: rgba(10, 12, 10, 0.62);
      --sp-panel-gradient: linear-gradient(135deg, rgba(22, 26, 22, 0.72), rgba(15, 23, 42, 0.78));
      --sp-panel-glow: radial-gradient(circle at 100% 0%, rgba(126, 203, 0, 0.12), transparent 42%);
      --sp-browser-bg: rgba(10, 12, 10, 0.92);
      --sp-overlay: transparent;
      --sp-btn-primary-bg: linear-gradient(180deg, var(--sp-accent-bright) 0%, var(--sp-accent) 100%);
      --sp-btn-primary-color: #fff;
      --sp-btn-primary-shadow: 0 6px 18px rgba(126, 203, 0, 0.35);
      --sp-link-color: var(--sp-accent-bright);
      --sp-hero-justify: center;
      --sp-hero-align: center;
      --sp-hero-text-align: center;
      --sp-hero-media-position: center center;
    }

    .kbl-preview {
      --sp-accent: #7ECB00;
      --sp-accent-bright: #A8F020;
      --sp-cream: #0A0C0A;
      --sp-border: rgba(126, 203, 0, 0.28);
      --sp-border-soft: rgba(126, 203, 0, 0.2);
      --sp-border-frame: rgba(126, 203, 0, 0.22);
      --sp-border-browser: rgba(126, 203, 0, 0.18);
      --sp-dot-accent: rgba(126, 203, 0, 0.55);
      --sp-panel-bg: rgba(10, 12, 10, 0.62);
      --sp-panel-gradient: linear-gradient(135deg, rgba(22, 26, 22, 0.72), rgba(15, 23, 42, 0.78));
      --sp-panel-glow: radial-gradient(circle at 100% 0%, rgba(126, 203, 0, 0.12), transparent 42%);
      --sp-browser-bg: rgba(10, 12, 10, 0.92);
      --sp-overlay: transparent;
      --sp-btn-primary-bg: linear-gradient(180deg, var(--sp-accent-bright) 0%, var(--sp-accent) 100%);
      --sp-btn-primary-color: #fff;
      --sp-btn-primary-shadow: 0 6px 18px rgba(126, 203, 0, 0.35);
      --sp-link-color: var(--sp-accent-bright);
    }

    .bizzi-preview {
      --sp-accent: #00BFFF;
      --sp-accent-bright: #00D4FF;
      --sp-cream: #060a10;
      --sp-border: rgba(0, 212, 255, 0.28);
      --sp-border-soft: rgba(0, 212, 255, 0.2);
      --sp-border-frame: rgba(0, 212, 255, 0.22);
      --sp-border-browser: rgba(0, 212, 255, 0.18);
      --sp-dot-accent: rgba(0, 212, 255, 0.55);
      --sp-panel-bg: rgba(6, 10, 16, 0.72);
      --sp-panel-gradient: linear-gradient(135deg, rgba(8, 14, 22, 0.82), rgba(15, 23, 42, 0.78));
      --sp-panel-glow: radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.14), transparent 42%);
      --sp-browser-bg: rgba(6, 10, 16, 0.94);
      --sp-overlay:
        linear-gradient(to right, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.58) 55%, rgba(0, 0, 0, 0.32) 100%),
        linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 45%, rgba(0, 0, 0, 0.18) 100%);
      --sp-btn-primary-bg: #fff;
      --sp-btn-primary-color: #0a0a0a;
      --sp-btn-primary-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
      --sp-link-color: var(--sp-accent-bright);
      --sp-hero-justify: center;
      --sp-hero-align: flex-start;
      --sp-hero-text-align: left;
    }

    .cca-preview {
      --sp-accent: #0025cc;
      --sp-accent-bright: #3355ff;
      --sp-cream: #03040c;
      --sp-border: rgba(51, 85, 255, 0.28);
      --sp-border-soft: rgba(51, 85, 255, 0.2);
      --sp-border-frame: rgba(51, 85, 255, 0.22);
      --sp-border-browser: rgba(51, 85, 255, 0.18);
      --sp-dot-accent: rgba(51, 85, 255, 0.55);
      --sp-panel-bg: rgba(3, 4, 12, 0.75);
      --sp-panel-gradient: linear-gradient(135deg, rgba(3, 4, 12, 0.88), rgba(15, 23, 42, 0.72));
      --sp-panel-glow: radial-gradient(circle at 100% 0%, rgba(51, 85, 255, 0.12), transparent 42%);
      --sp-browser-bg: rgba(3, 4, 12, 0.94);
      --sp-overlay: transparent;
      --sp-btn-primary-bg: #0025cc;
      --sp-btn-primary-color: #fff;
      --sp-btn-primary-shadow: 0 6px 18px rgba(0, 37, 204, 0.35);
      --sp-link-color: var(--sp-accent-bright);
      --sp-hero-justify: flex-end;
      --sp-hero-align: center;
      --sp-hero-text-align: center;
      --sp-hero-media-position: center center;
    }

    .cca-preview .sp-hero-frame img {
      object-fit: cover;
      object-position: center center;
      width: 100%;
      height: 100%;
      min-width: 100%;
      max-width: 100%;
    }

    .ccacademy-preview {
      --sp-accent: #0084ff;
      --sp-accent-bright: #33a0ff;
      --sp-cream: #040810;
      --sp-border: rgba(0, 132, 255, 0.28);
      --sp-border-soft: rgba(0, 132, 255, 0.2);
      --sp-border-frame: rgba(0, 132, 255, 0.22);
      --sp-border-browser: rgba(0, 132, 255, 0.18);
      --sp-dot-accent: rgba(0, 132, 255, 0.55);
      --sp-panel-bg: rgba(4, 8, 16, 0.78);
      --sp-panel-gradient: linear-gradient(135deg, rgba(4, 8, 18, 0.9), rgba(15, 23, 42, 0.74));
      --sp-panel-glow: radial-gradient(circle at 100% 0%, rgba(0, 132, 255, 0.14), transparent 42%);
      --sp-browser-bg: rgba(4, 8, 16, 0.96);
      --sp-overlay: linear-gradient(to top, rgba(4, 8, 18, 0.92) 0%, rgba(4, 8, 18, 0.45) 24%, transparent 52%);
      --sp-btn-primary-bg: linear-gradient(180deg, #0099ff 0%, #0070ee 100%);
      --sp-btn-primary-color: #fff;
      --sp-btn-primary-shadow: 0 6px 20px rgba(0, 120, 255, 0.38);
      --sp-link-color: var(--sp-accent-bright);
      --sp-hero-justify: flex-end;
      --sp-hero-align: center;
      --sp-hero-text-align: center;
      --sp-hero-media-position: center center;
    }

    .ccacademy-preview .sp-hero-cta-row {
      justify-content: center;
    }

    .ccacademy-preview .sp-btn {
      border-radius: 999px;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.02em;
      padding: 11px 20px;
    }

    .ccacademy-preview .sp-logo-wrap img {
      height: 52px;
    }

    .sp-hero-panel {
      display: flex;
      flex-direction: column;
      gap: 16px;
      height: 100%;
      border: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      padding: 0;
    }

    .sp-browser-mockup {
      flex: 1;
      display: flex;
      flex-direction: column;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--sp-border-frame);
      box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
      transition:
        transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.55s ease;
      will-change: transform;
    }

    .lp-web-showcase:hover .sp-browser-mockup {
      transform: translateY(-6px);
      box-shadow:
        0 32px 64px rgba(0, 0, 0, 0.42),
        0 0 56px color-mix(in srgb, var(--sp-accent) 14%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .sp-browser-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 0;
      background: var(--sp-browser-bg);
      border: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      flex-shrink: 0;
    }

    .sp-browser-dots {
      display: flex;
      gap: 6px;
    }

    .sp-browser-dots span {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: rgba(238, 242, 232, 0.22);
    }

    .sp-browser-dots span:first-child { background: var(--sp-dot-accent); }

    .sp-browser-dots span:nth-child(2) {
      animation: spBrowserPulse 2.8s ease-in-out infinite;
    }

    @keyframes spBrowserPulse {
      0%, 100% { opacity: 0.22; transform: scale(1); }
      50% { opacity: 0.65; background: var(--sp-dot-accent); transform: scale(1.08); }
    }

    .sp-browser-url {
      flex: 1;
      text-align: center;
      color: rgba(238, 242, 232, 0.72);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.02em;
    }

    .sp-browser-url::before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #22c55e;
      margin-right: 7px;
      vertical-align: middle;
      box-shadow: 0 0 8px rgba(34, 197, 94, 0.55);
    }

    .ccacademy-preview .sp-hero-frame img {
      position: absolute;
      inset: 0;
      object-fit: cover;
      object-position: center center;
      width: 100%;
      height: 100%;
      transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .sp-hero-frame {
      position: relative;
      flex: 1;
      border-radius: 0;
      overflow: hidden;
      border: none;
      height: clamp(340px, 44vw, 440px);
      min-height: 340px;
      background: var(--sp-cream);
    }

    .sp-hero-frame img,
    .sp-hero-frame video.sp-hero-media {
      display: block;
      width: auto;
      min-width: 100%;
      max-width: none;
      height: 100%;
      object-fit: cover;
      object-position: var(--sp-hero-media-position);
      transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .lp-web-showcase:hover .sp-hero-frame img,
    .lp-web-showcase:hover .sp-hero-frame video.sp-hero-media {
      transform: scale(1.045);
    }

    .sp-hero-frame video.sp-hero-media {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .sp-hero-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: var(--sp-hero-align);
      justify-content: var(--sp-hero-justify);
      text-align: var(--sp-hero-text-align);
      padding: 24px 18px;
      background: var(--sp-overlay);
    }

    .bizzi-preview .sp-hero-overlay {
      padding: 28px 22px;
    }

    .sp-hero-eyebrow {
      color: rgba(255, 255, 255, 0.92);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin: 0 0 10px;
    }

    .sp-hero-headline {
      color: #fff;
      font-family: 'Poppins', sans-serif;
      font-size: clamp(20px, 3.2vw, 32px);
      font-weight: 900;
      line-height: 1.08;
      letter-spacing: -0.03em;
      margin: 0;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
      max-width: 520px;
    }

    .bizzi-preview .sp-hero-headline > span {
      display: block;
    }

    .bizzi-preview .sp-hero-headline > span:first-child {
      color: #fff;
    }

    .bizzi-preview .sp-hero-headline {
      font-size: clamp(17px, 2.6vw, 28px);
      line-height: 0.95;
      text-transform: uppercase;
      letter-spacing: -0.03em;
    }

    .sp-hero-headline em,
    .sp-hero-headline .sp-accent-line {
      font-style: normal;
      color: var(--sp-accent-bright);
    }

    .sp-hero-sub {
      margin: 10px 0 0;
      color: rgba(255, 255, 255, 0.9);
      font-size: 13px;
      line-height: 1.55;
      max-width: 460px;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
    }

    .bizzi-preview .sp-hero-sub {
      max-width: 420px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.85);
    }

    .sp-hero-sub .sp-accent-text {
      color: var(--sp-accent-bright);
      font-weight: 700;
    }

    .sp-hero-cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: var(--sp-hero-text-align);
      margin-top: 16px;
      width: 100%;
      max-width: 520px;
    }

    .bizzi-preview .sp-hero-cta-row {
      justify-content: flex-start;
    }

    .cca-preview .sp-hero-cta-row {
      justify-content: center;
    }

    .sp-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 18px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 800;
      text-decoration: none;
      transition: transform 0.2s ease, filter 0.2s ease;
    }

    .bizzi-preview .sp-btn {
      border-radius: 999px;
      font-weight: 600;
    }

    .sp-btn:hover {
      transform: translateY(-1px);
      filter: brightness(1.06);
    }

    .sp-btn-primary {
      background: var(--sp-btn-primary-bg);
      color: var(--sp-btn-primary-color);
      box-shadow: var(--sp-btn-primary-shadow);
    }

    .sp-btn-secondary {
      border: 1px solid rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(8px);
      color: #fff;
    }

    .sp-btn-secondary:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .sp-hero-login {
      margin-top: 12px;
      color: rgba(255, 255, 255, 0.88);
      font-size: 12px;
      font-weight: 600;
      text-decoration: none;
    }

    .sp-hero-login:hover {
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .sp-hero-meta {
      text-align: center;
      padding: clamp(20px, 2.8vw, 28px) clamp(22px, 3.5vw, 36px);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-top: 3px solid var(--sp-accent);
      transition: background 0.35s ease, border-color 0.35s ease;
    }

    .lp-web-showcase:hover .sp-hero-meta {
      background: rgba(255, 255, 255, 0.045);
      border-color: color-mix(in srgb, var(--sp-accent) 22%, rgba(255, 255, 255, 0.06));
      border-top-color: var(--sp-accent);
    }

    .sp-hero-meta strong {
      display: block;
      color: var(--text-primary);
      font-family: 'Poppins', sans-serif;
      font-size: clamp(17px, 1.9vw, 20px);
      font-weight: 800;
      margin: 0 auto 10px;
      max-width: 38ch;
      line-height: 1.35;
      letter-spacing: -0.02em;
    }

    .sp-hero-meta span {
      display: block;
      color: var(--text-secondary);
      font-size: clamp(15px, 1.55vw, 17px);
      line-height: 1.65;
      max-width: 54ch;
      margin: 0 auto;
    }

    .sp-hero-meta span a {
      color: var(--sp-link-color);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .sp-story-panel {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      min-height: 100%;
      text-align: center;
      border: 1px solid color-mix(in srgb, var(--sp-accent) 22%, rgba(255, 255, 255, 0.08));
      border-radius: 20px;
      background:
        linear-gradient(165deg, rgba(15, 23, 42, 0.88) 0%, rgba(2, 6, 23, 0.72) 100%),
        var(--sp-panel-glow);
      backdrop-filter: blur(20px);
      padding: clamp(26px, 3.5vw, 36px) clamp(22px, 3vw, 28px);
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
      transition:
        transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.45s ease,
        box-shadow 0.45s ease;
    }

    .lp-web-showcase.is-visible .sp-story-panel {
      animation: spStoryReveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
    }

    .lp-web-showcase.is-visible .sp-browser-mockup {
      animation: spMockupReveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

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

    @keyframes spStoryReveal {
      from { opacity: 0; transform: translateX(18px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .lp-web-showcase:hover .sp-story-panel {
      transform: translateY(-4px);
      border-color: color-mix(in srgb, var(--sp-accent) 42%, rgba(255, 255, 255, 0.1));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 40px rgba(0, 0, 0, 0.22),
        0 0 32px color-mix(in srgb, var(--sp-accent) 10%, transparent);
    }

    .sp-story-panel::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 56px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, var(--sp-accent), transparent);
      box-shadow: 0 0 18px color-mix(in srgb, var(--sp-accent) 55%, transparent);
    }

    .sp-story-panel::after {
      content: "";
      position: absolute;
      top: -30%;
      right: -25%;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle, color-mix(in srgb, var(--sp-accent) 16%, transparent), transparent 68%);
      pointer-events: none;
      opacity: 0.7;
      transition: opacity 0.5s ease;
    }

    .lp-web-showcase:hover .sp-story-panel::after {
      opacity: 1;
    }

    .sp-story-kicker {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 13px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--sp-accent-bright);
      background: color-mix(in srgb, var(--sp-accent) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--sp-accent) 30%, transparent);
      margin-top: 6px;
    }

    .sp-story-kicker::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--sp-accent-bright);
      box-shadow: 0 0 10px color-mix(in srgb, var(--sp-accent-bright) 80%, transparent);
    }

    .sp-story-panel h4 {
      position: relative;
      z-index: 1;
      margin: 0;
      font-family: 'Poppins', sans-serif;
      font-size: clamp(18px, 2.2vw, 22px);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.25;
      text-align: center;
      max-width: 26ch;
    }

    .sp-story-panel p {
      position: relative;
      z-index: 1;
      margin: 0;
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.68;
      text-align: center;
      max-width: 40ch;
    }

    .sp-story-divider {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 120px;
      height: 1px;
      margin: 2px 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    }

    .sp-logo-wrap {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding: 16px 20px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: border-color 0.35s ease, background 0.35s ease;
    }

    .lp-web-showcase:hover .sp-logo-wrap {
      background: rgba(255, 255, 255, 0.06);
      border-color: color-mix(in srgb, var(--sp-accent) 28%, rgba(255, 255, 255, 0.1));
    }

    .sp-logo-wrap img {
      height: 42px;
      width: auto;
      display: block;
      margin: 0;
      object-fit: contain;
      transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .lp-web-showcase:hover .sp-logo-wrap img {
      transform: scale(1.06);
    }

    .cca-preview .sp-logo-wrap img {
      height: 36px;
    }

    .lp-web-actions {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 6px;
      justify-content: center;
      width: 100%;
      padding-top: 4px;
    }

    @media (prefers-reduced-motion: reduce) {
      .re-showcase-grid,
      .re-promise-row,
      .re-service-grid,
      .re-deliverables {
        grid-template-columns: 1fr;
      }

      .re-blueprint-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .re-slideshow-stage {
        aspect-ratio: 4 / 3;
      }

      .lp-web-showcase,
      .sp-browser-mockup,
      .sp-hero-frame img,
      .sp-hero-frame video.sp-hero-media,
      .sp-story-panel,
      .sp-logo-wrap img {
        transition: none !important;
        animation: none !important;
      }

      .lp-web-showcase {
        opacity: 1;
        transform: none;
      }

      .sp-browser-dots span:nth-child(2) {
        animation: none;
      }

      .lp-web-showcase:hover .sp-browser-mockup,
      .lp-web-showcase:hover .sp-story-panel,
      .lp-web-showcase:hover .sp-hero-frame img,
      .lp-web-showcase:hover .sp-hero-frame video.sp-hero-media,
      .lp-web-showcase:hover .sp-logo-wrap img {
        transform: none;
      }
    }

    .lp-platform-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 28px;
    }

    .lp-platform-grid--solo {
      grid-template-columns: minmax(0, 1fr);
      max-width: 420px;
      margin-left: auto;
      margin-right: auto;
    }

    .lp-platform-card {
      padding: 20px;
      border-radius: 16px;
      border: 1px solid rgba(99,102,241,0.22);
      background: rgba(15,23,42,0.55);
      transition: var(--transition-fast);
      text-align: center;
    }

    .lp-platform-card:hover {
      border-color: rgba(255,178,0,0.38);
      transform: translateY(-2px);
    }

    .lp-platform-card img {
      height: 32px;
      width: auto;
      margin: 0 auto 12px;
      object-fit: contain;
      display: block;
    }

    .lp-platform-card strong {
      display: block;
      font-size: 14px;
      margin-bottom: 6px;
    }

    .lp-platform-card span {
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.5;
    }

    .lp-civic-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      align-items: stretch;
    }

    .lp-civic-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      height: 100%;
      padding: 24px;
      border-radius: 18px;
      border: 1px solid rgba(99,102,241,0.22);
      background: rgba(15,23,42,0.58);
    }

    .lp-civic-card .lp-video-meta {
      width: 100%;
      min-height: 2.4em;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lp-civic-card .lp-video-title {
      width: 100%;
      min-height: 3.2em;
      margin: 0 0 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lp-civic-stat-row {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 48px;
      margin: 8px 0 12px;
    }

    .lp-civic-stat {
      font-family: 'Poppins', sans-serif;
      font-size: 36px;
      font-weight: 900;
      color: var(--brand-gold);
      line-height: 1;
      margin: 0;
    }

    .lp-civic-card .lp-video-copy {
      flex: 0 1 auto;
      width: 100%;
      margin: 0;
    }

    .lp-civic-spacer {
      flex: 1 1 auto;
      min-height: 12px;
      width: 100%;
    }

    .lp-civic-btn {
      flex-shrink: 0;
      margin-top: 32px;
      display: inline-flex;
    }

    .lp-civic-stat.lp-civic-stat-text {
      font-size: clamp(22px, 3.2vw, 32px);
      letter-spacing: -0.02em;
    }

    .lp-portfolio-cta {
      text-align: center;
      padding: clamp(24px, 4vw, 40px);
      margin-bottom: clamp(32px, 5vw, 56px);
      border-radius: 24px;
      border: 1px solid rgba(255,178,0,0.28);
      background:
        linear-gradient(135deg, rgba(15,23,42,0.88), rgba(2,6,23,0.92)),
        radial-gradient(circle at 50% 0%, rgba(255,178,0,0.12), transparent 55%);
    }

    .lp-portfolio-cta h3 {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(24px, 4vw, 34px);
      margin: 0 0 12px;
    }

    .lp-portfolio-cta p {
      color: var(--text-secondary);
      font-size: 16px;
      line-height: 1.65;
      max-width: 620px;
      margin: 0 auto 24px;
    }

    .lp-resume-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-top: 18px;
    }

    .lp-resume-links a {
      font-size: 13px;
      font-weight: 700;
      color: #fde68a;
      text-decoration: none;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,178,0,0.24);
      background: rgba(15,23,42,0.55);
      transition: var(--transition-fast);
    }

    .lp-resume-links a:hover {
      border-color: rgba(255,178,0,0.45);
      transform: translateY(-1px);
    }

    /* Services marquee — full-bleed strip under hero */
    .marquee {
      width: 100vw;
      max-width: 100vw;
      margin: 0 0 0 50%;
      transform: translateX(-50%);
      border-radius: 0;
      border: 0;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      background: #fff;
      overflow: hidden;
      position: relative;
      content-visibility: auto;
      contain-intrinsic-size: 80px;
    }

    .marquee:not(.marquee-logos)::after,
    .marquee-services::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #fff 0%, transparent 10%, transparent 90%, #fff 100%);
      pointer-events: none;
    }

    .tracks {
      display: flex;
      gap: clamp(28px, 4vw, 44px);
      padding: 16px 0;
      white-space: nowrap;
      animation: scroll 18s linear infinite;
    }

    @keyframes scroll {
      to { transform: translateX(-50%); }
    }

    .marquee:not(.marquee-logos) .pill,
    .marquee-services .pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 0;
      border-radius: 0;
      background: transparent;
      border: 0;
      color: #0a0a0a;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.01em;
    }

    .marquee:not(.marquee-logos) .pill i,
    .marquee-services .pill i {
      color: #0a0a0a;
      font-size: 15px;
    }

    .marquee-services {
      margin-top: 0;
    }

    /* Mayor Andre Dickens — full-bleed civic highlight (homepage) */
    .mayor-highlight-section--fullbleed {
      width: 100vw;
      max-width: 100vw;
      margin: 0 0 0 50%;
      transform: translateX(-50%);
      padding: 0;
      overflow: hidden;
      border: 0;
      border-top: 1px solid rgba(255, 178, 0, 0.22);
      background: #020617;
      scroll-margin-top: 100px;
    }

    .mayor-highlight-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.22fr) minmax(340px, 0.78fr);
      gap: 0;
      min-height: clamp(420px, 52vw, 620px);
    }

    .mayor-highlight-media {
      position: relative;
      min-height: clamp(320px, 42vw, 620px);
      overflow: hidden;
    }

    .mayor-highlight-media img {
      width: 100%;
      height: 100%;
      min-height: inherit;
      display: block;
      object-fit: cover;
      object-position: center;
    }

    .mayor-highlight-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 48px);
      text-align: center;
      background:
        radial-gradient(ellipse 120% 80% at 20% 0%, rgba(30, 58, 138, 0.22), transparent 55%),
        radial-gradient(ellipse 90% 70% at 85% 100%, rgba(255, 178, 0, 0.08), transparent 50%),
        linear-gradient(135deg, rgba(2, 6, 23, 0.98), rgba(15, 23, 42, 0.92));
      border-left: 1px solid rgba(255, 178, 0, 0.18);
    }

    .mayor-highlight-content .mayor-card-kicker {
      display: inline-flex;
      align-items: center;
      align-self: center;
      gap: 8px;
      justify-content: center;
      margin-inline: auto;
      color: var(--brand-gold);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .14em;
      margin-bottom: 12px;
      text-transform: uppercase;
    }

    .mayor-highlight-content .mayor-card-kicker::before,
    .mayor-highlight-content .mayor-card-kicker::after {
      content: "";
      width: 24px;
      height: 1px;
      background: rgba(255, 178, 0, 0.48);
    }

    .mayor-highlight-content .mayor-card-title {
      color: var(--text-primary);
      font-family: 'Poppins', sans-serif;
      font-size: clamp(22px, 2.4vw, 30px);
      line-height: 1.16;
      margin: 0;
    }

    .mayor-highlight-content .mayor-card-copy {
      color: var(--text-secondary);
      font-size: clamp(13px, 1.4vw, 15px);
      line-height: 1.68;
      margin: 16px 0 0;
    }

    .mayor-highlight-content .mayor-impact-list {
      display: grid;
      gap: 12px;
      margin-top: 20px;
      text-align: left;
    }

    .mayor-highlight-content .mayor-impact-item {
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 14px;
      align-items: center;
      border: 1px solid rgba(99, 102, 241, 0.22);
      border-radius: 14px;
      background: rgba(15, 23, 42, 0.58);
      padding: 14px;
    }

    .mayor-highlight-content .mayor-impact-icon {
      position: relative;
      width: 52px;
      height: 52px;
      display: block;
      border-radius: 999px;
      background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 28%),
        linear-gradient(135deg, var(--brand-gold), #ffd166);
      box-shadow: 0 12px 24px rgba(255, 178, 0, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
      color: #0a0a0a;
      flex-shrink: 0;
    }

    .mayor-highlight-content .mayor-impact-icon i {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      color: #0a0a0a;
      font-size: 21px;
      line-height: 1;
    }

    .mayor-highlight-content .mayor-impact-item strong {
      display: block;
      color: var(--text-primary);
      font-size: 13px;
      line-height: 1.35;
    }

    .mayor-highlight-content .mayor-impact-item span {
      display: block;
      color: var(--text-muted);
      font-size: 12px;
      line-height: 1.55;
      margin-top: 4px;
    }

    .mayor-highlight-content .mayor-card-footer {
      border-top: 1px solid rgba(255, 178, 0, 0.18);
      color: #fde68a;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      line-height: 1.5;
      margin-top: 22px;
      padding-top: 18px;
      text-transform: uppercase;
    }

    @media (max-width: 900px) {
      .mayor-highlight-layout {
        grid-template-columns: 1fr;
        min-height: 0;
      }

      .mayor-highlight-media {
        min-height: clamp(260px, 56vw, 420px);
      }

      .mayor-highlight-content {
        border-left: 0;
        border-top: 1px solid rgba(255, 178, 0, 0.18);
        padding: clamp(24px, 5vw, 36px) clamp(18px, 4vw, 28px);
      }
    }

    /* Video Modal Styles */
    .modal {
      position: fixed !important; 
      inset: 0 !important; 
      z-index: 999999 !important; 
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.85);
      backdrop-filter: blur(10px);
      padding: 16px;
      overflow: hidden;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      align-items: center;
      justify-content: center;
    }
    .modal.show { 
      display: flex !important; 
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      align-items: center;
      justify-content: center;
    }
    
    .video-panel {
      width: min(90vw, 1000px);
      max-height: 90vh;
      border-radius: 18px;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(0,0,0,0.95), rgba(0,0,0,0.9));
      border: 1px solid rgba(255,178,0,0.4);
      box-shadow: var(--shadow-lg);
      transform: translateY(12px);
      animation: pop 320ms cubic-bezier(.2,.8,.2,1) forwards;
      position: relative;
      z-index: 1000000;
      display: flex;
      flex-direction: column;
      transform-origin: center center;
    }
    
    @keyframes pop { to { transform: translateY(0); } }
    
    .video-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 24px 0;
      border-bottom: 1px solid rgba(255,178,0,0.2);
      margin-bottom: 20px;
    }
    
    .video-info h2 {
      margin: 0 0 8px;
      font-size: 20px;
      font-weight: 800;
      background: linear-gradient(135deg, #fff, #FFB200);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .video-info h2 i {
      color: var(--brand-gold);
      font-size: 18px;
    }
    
    .video-category {
      margin: 0;
      color: var(--text-muted);
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    
    .video-close {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
      color: #ffffff;
      cursor: pointer;
      transition: var(--transition-fast);
      font-size: 18px;
    }
    
    .video-close:hover {
      background: rgba(255,255,255,0.2);
      border-color: rgba(255,255,255,0.3);
      transform: scale(1.1);
    }
    
    .video-panel-body {
      padding: 0 24px 24px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    
    .video-container {
      position: relative;
      width: 100%;
      border-radius: 12px;
      overflow: hidden;
      background: #000;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    }
    
    .video-container video {
      width: 100%;
      height: auto;
      max-height: 60vh;
      display: block;
      border-radius: 12px;
    }
    
    .video-details {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .video-description {
      color: var(--text-secondary);
      font-size: 15px;
      line-height: 1.6;
      max-height: 120px;
      overflow-y: auto;
      padding-right: 8px;
    }
    
    .video-description::-webkit-scrollbar {
      width: 6px;
    }
    
    .video-description::-webkit-scrollbar-track {
      background: rgba(255,255,255,0.1);
      border-radius: 3px;
    }
    
    .video-description::-webkit-scrollbar-thumb {
      background: rgba(255,178,0,0.5);
      border-radius: 3px;
    }
    
    .video-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 16px;
      border-top: 1px solid rgba(255,178,0,0.2);
    }
    
    .video-date {
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 600;
    }
    
    .video-featured {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(255,178,0,0.2);
      border: 1px solid rgba(255,178,0,0.3);
      color: var(--brand-gold);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    /* Contact / Book Section — full bleed */
    .book-section {
      position: relative;
      width: 100vw;
      margin: var(--section-gap) 0 0 calc(50% - 50vw);
      scroll-margin-top: 100px;
      padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 48px);
      overflow: hidden;
      isolation: isolate;
      border-top: 1px solid rgba(255, 178, 0, 0.18);
      border-bottom: 1px solid rgba(99, 102, 241, 0.22);
      background:
        radial-gradient(900px 420px at 8% 0%, rgba(99, 102, 241, 0.16), transparent 58%),
        radial-gradient(760px 380px at 92% 18%, rgba(255, 178, 0, 0.12), transparent 55%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.98) 0%, rgba(15, 23, 42, 0.94) 48%, rgba(2, 6, 23, 0.98) 100%);
    }

    .book-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(99, 102, 241, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.04) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 85%);
      pointer-events: none;
    }

    .book-section-inner {
      position: relative;
      z-index: 1;
      max-width: 1200px;
      margin: 0 auto;
    }

    .book-section-grid {
      display: grid;
      grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.25fr);
      gap: 0;
      align-items: stretch;
      border-radius: 24px;
      border: 1px solid rgba(255, 178, 0, 0.22);
      background: rgba(15, 23, 42, 0.72);
      backdrop-filter: blur(16px);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
    }

    .book-section-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 18px;
      padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 36px);
      border-radius: 0;
      border: none;
      border-right: 1px solid rgba(99, 102, 241, 0.2);
      background: transparent;
      backdrop-filter: none;
      box-shadow: none;
    }

    .book-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      align-self: center;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255, 178, 0, 0.28);
      background: rgba(255, 178, 0, 0.08);
      color: var(--brand-gold);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .book-kicker::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--brand-gold);
      box-shadow: 0 0 12px rgba(255, 178, 0, 0.85);
    }

    .book-section-title {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(34px, 5vw, 52px);
      font-weight: 900;
      line-height: 1.05;
      letter-spacing: -0.03em;
      margin: 0;
      background: linear-gradient(135deg, #fff, #dbeafe 42%, #fde68a 88%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .book-section-lede {
      margin: 0;
      color: var(--text-secondary);
      font-size: clamp(16px, 2vw, 18px);
      line-height: 1.7;
    }

    .book-trust-list {
      list-style: none;
      margin: 8px 0 0;
      padding: 0;
      display: grid;
      gap: 12px;
    }

    .book-trust-list li {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 12px;
      color: var(--text-secondary);
      font-size: 15px;
      line-height: 1.55;
      text-align: left;
      max-width: 100%;
    }

    .book-trust-list i {
      color: var(--brand-gold);
      margin-top: 3px;
      flex-shrink: 0;
    }

    .book-contact-chips {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: auto;
      padding-top: 8px;
      width: 100%;
    }

    .book-contact-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(99, 102, 241, 0.24);
      background: rgba(2, 6, 23, 0.55);
      color: var(--text-primary);
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      transition: var(--transition-fast);
    }

    .book-contact-chip:hover {
      border-color: rgba(255, 178, 0, 0.35);
      color: #fde68a;
      transform: translateY(-1px);
    }

    .book-form-panel {
      padding: clamp(32px, 4vw, 48px);
      border-radius: 0;
      border: none;
      background: transparent;
      backdrop-filter: none;
      box-shadow: none;
    }

    .book-form-head {
      margin-bottom: 28px;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(99, 102, 241, 0.2);
    }

    .book-form-head h3 {
      margin: 0 0 8px;
      font-family: 'Poppins', sans-serif;
      font-size: clamp(22px, 3vw, 28px);
      font-weight: 800;
      color: var(--text-primary);
    }

    .book-form-head p {
      margin: 0;
      color: var(--text-muted);
      font-size: 15px;
      line-height: 1.6;
    }

    .contact-form {
      max-width: none;
      margin: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
      backdrop-filter: none;
      box-shadow: none;
    }

    .cf-form-shield {
      position: absolute;
      left: -10000px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    .book-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
    }

    .book-form-grid .form-group {
      margin-bottom: 0;
    }

    .book-form-grid .form-group-full {
      grid-column: 1 / -1;
    }

    .book-form-email-row .form-hint {
      margin: 10px 0 0;
      font-size: 13px;
      line-height: 1.5;
      color: var(--text-secondary, #94a3b8);
    }

    .form-group {
      margin-bottom: 24px;
    }

    .form-label {
      display: block;
      color: var(--text-primary);
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.02em;
      margin-bottom: 10px;
    }

    .form-input {
      width: 100%;
      padding: 18px 20px;
      border-radius: 14px;
      background: rgba(2, 6, 23, 0.72);
      border: 1px solid rgba(99,102,241,0.32);
      color: var(--text-primary);
      font-size: 16px;
      transition: var(--transition-fast);
    }

    .form-input:focus {
      outline: none;
      border-color: var(--brand-gold);
      box-shadow: 0 0 0 3px rgba(255,178,0,0.2);
      background: rgba(2, 6, 23, 0.88);
    }

    .form-textarea {
      min-height: 160px;
      resize: vertical;
    }

    .form-submit {
      width: 100%;
      background: linear-gradient(135deg, var(--brand-gold), #ffd166);
      color: #0a0a0a;
      border: 0;
      padding: 18px 32px;
      border-radius: 14px;
      font-weight: 800;
      font-size: 17px;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: var(--transition-fast);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: var(--glow-gold);
    }

    .book-form-submit-row {
      margin-top: 24px;
      margin-bottom: 0;
    }

    .hero-value-section {
      margin: clamp(28px, 4vw, 40px) auto;
      max-width: 1140px;
      padding: 0 clamp(4px, 2vw, 12px);
    }

    .hero-value-head {
      text-align: center;
      margin-bottom: clamp(24px, 3vw, 32px);
    }

    .hero-value-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(255, 178, 0, 0.08);
      border: 1px solid rgba(255, 178, 0, 0.28);
      color: var(--brand-gold);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .hero-value-kicker::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--brand-gold);
      box-shadow: 0 0 14px rgba(255, 178, 0, 0.8);
    }

    .hero-value-title {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(28px, 4.2vw, 42px);
      font-weight: 900;
      letter-spacing: -0.03em;
      line-height: 1.08;
      margin: 0 0 14px;
      background: linear-gradient(135deg, #fff 0%, #dbeafe 48%, #fde68a 92%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-value-sub {
      margin: 0 auto;
      max-width: 560px;
      color: var(--text-secondary);
      font-size: clamp(15px, 2vw, 17px);
      line-height: 1.65;
    }

    .hero-value-props {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(18px, 2.5vw, 24px);
      align-items: stretch;
    }

    .hero-value-card {
      --card-accent: #6366f1;
      --card-glow: rgba(99, 102, 241, 0.38);
      position: relative;
      isolation: isolate;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      border-radius: 24px;
      padding: clamp(28px, 3vw, 36px) clamp(22px, 2.5vw, 28px);
      text-align: center;
      background:
        linear-gradient(165deg, rgba(15, 23, 42, 0.92) 0%, rgba(2, 6, 23, 0.78) 100%);
      border: 1px solid rgba(255, 255, 255, 0.09);
      backdrop-filter: blur(20px);
      box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
      transition:
        transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease;
    }

    .hero-value-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(145deg, var(--card-accent), transparent 55%, rgba(255, 255, 255, 0.06));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      opacity: 0.65;
    }

    .hero-value-card::after {
      content: "";
      position: absolute;
      top: -35%;
      right: -15%;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: var(--card-glow);
      filter: blur(48px);
      opacity: 0.55;
      pointer-events: none;
      z-index: 0;
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .hero-value-card--production {
      --card-accent: #818cf8;
      --card-glow: rgba(99, 102, 241, 0.5);
    }

    .hero-value-card--dev {
      --card-accent: #34d399;
      --card-glow: rgba(16, 185, 129, 0.48);
    }

    .hero-value-card--platform {
      --card-accent: #ffb200;
      --card-glow: rgba(255, 178, 0, 0.45);
    }

    .hero-value-tag {
      display: inline-block;
      position: relative;
      z-index: 1;
      flex-shrink: 0;
      margin-bottom: 14px;
      padding: 5px 11px;
      border-radius: 8px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      background: color-mix(in srgb, var(--card-accent) 16%, transparent);
      color: var(--card-accent);
      border: 1px solid color-mix(in srgb, var(--card-accent) 32%, transparent);
    }

    .hero-value-icon-wrap {
      position: relative;
      z-index: 1;
      flex-shrink: 0;
      width: 72px;
      height: 72px;
      margin: 0 auto 20px;
      display: grid;
      place-items: center;
      border-radius: 20px;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow:
        0 10px 36px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
      font-size: 28px;
      color: var(--card-accent);
    }

    .hero-value-icon-wrap::after {
      content: "";
      position: absolute;
      inset: -4px;
      border-radius: 22px;
      border: 1px solid color-mix(in srgb, var(--card-accent) 25%, transparent);
      opacity: 0;
      transition: opacity 0.35s ease;
    }

    .hero-value-card h3 {
      position: relative;
      z-index: 1;
      flex-shrink: 0;
      width: 100%;
      font-family: 'Poppins', sans-serif;
      font-size: clamp(17px, 2vw, 20px);
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.32;
      min-height: calc(2 * 1.32em);
      margin: 0 0 12px;
      color: #fff;
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }

    .hero-value-card p {
      position: relative;
      z-index: 1;
      flex: 1;
      width: 100%;
      margin: 0;
      font-size: 14px;
      line-height: 1.68;
      color: rgba(226, 232, 240, 0.78);
    }

    .hero-value-card:hover {
      transform: translateY(-10px);
      border-color: color-mix(in srgb, var(--card-accent) 42%, transparent);
      box-shadow:
        0 28px 64px rgba(0, 0, 0, 0.42),
        0 0 0 1px color-mix(in srgb, var(--card-accent) 22%, transparent),
        0 0 56px color-mix(in srgb, var(--card-accent) 18%, transparent);
    }

    .hero-value-card:hover::after {
      opacity: 0.85;
      transform: scale(1.08);
    }

    .hero-value-card:hover .hero-value-icon-wrap::after {
      opacity: 1;
    }

    @media (max-width: 900px) {
      .hero-value-props {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-value-card,
      .hero-value-card::after,
      .hero-value-icon-wrap::after {
        transition: none;
      }

      .hero-value-card:hover {
        transform: none;
      }
    }

    /* Footer */
    .footer {
      position: relative;
      margin-top: 0;
      padding: clamp(56px, 7vw, 80px) clamp(20px, 4vw, 48px) 32px;
      border-top: 1px solid rgba(255, 178, 0, 0.14);
      background:
        radial-gradient(700px 280px at 12% 0%, rgba(99, 102, 241, 0.12), transparent 60%),
        radial-gradient(620px 260px at 88% 0%, rgba(255, 178, 0, 0.08), transparent 58%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.98), rgba(15, 23, 42, 0.96));
    }

    .footer-shell {
      max-width: 1200px;
      margin: 0 auto;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(0, 1fr));
      gap: clamp(24px, 4vw, 40px);
      align-items: start;
      text-align: left;
    }

    .footer-brand-col {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .footer-logo {
      display: flex;
      align-items: center;
    }

    .footer-logo a {
      display: inline-flex;
      line-height: 0;
      border-radius: 12px;
      overflow: hidden;
    }

    .footer-logo img {
      height: clamp(52px, 6vw, 68px);
      width: auto;
      max-width: min(100%, 300px);
      display: block;
      object-fit: contain;
    }

    .footer-tagline {
      margin: 0;
      color: var(--text-secondary);
      font-size: 15px;
      line-height: 1.65;
      max-width: 34ch;
    }

    .footer-location {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--brand-gold);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .footer-col-title {
      margin: 0 0 14px;
      color: var(--text-primary);
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .footer-links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 10px;
    }

    .footer-links a {
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 14px;
      line-height: 1.5;
      transition: var(--transition-fast);
    }

    .footer-links a:hover {
      color: #fde68a;
      transform: translateX(2px);
    }

    .footer-contact-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 12px;
    }

    .footer-contact-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.55;
    }

    .footer-contact-list i {
      color: var(--brand-gold);
      margin-top: 2px;
      width: 16px;
      text-align: center;
      flex-shrink: 0;
    }

    .footer-contact-list a {
      color: var(--text-secondary);
      text-decoration: none;
      transition: var(--transition-fast);
    }

    .footer-contact-list a:hover {
      color: var(--text-primary);
    }

    .footer-social-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }

    .social-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.22);
      color: var(--text-secondary);
      text-decoration: none;
      background: rgba(15,23,42,0.55);
      font-size: 13px;
      font-weight: 600;
      transition: var(--transition-fast);
    }

    .social-link:hover {
      border-color: rgba(255, 178, 0, 0.35);
      color: var(--text-primary);
      transform: translateY(-2px);
    }

    .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: clamp(36px, 5vw, 52px);
      padding-top: 24px;
      border-top: 1px solid rgba(99, 102, 241, 0.18);
    }

    .footer-copyright {
      color: var(--text-muted);
      font-size: 14px;
      margin: 0;
    }

    .footer-legal {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }

    .footer-legal a {
      color: var(--text-muted);
      text-decoration: none;
      font-size: 13px;
      transition: var(--transition-fast);
    }

    .footer-legal a:hover {
      color: var(--text-secondary);
    }

    /* Tablet + mobile containment (all sub-desktop widths) */
    @media (max-width: 1100px) {
      :root {
        --mobile-gutter: clamp(16px, 3vw, 20px);
        --mobile-bleed: calc(-1 * var(--mobile-gutter));
        --mobile-bleed-width: calc(100% + (2 * var(--mobile-gutter)));
      }

      .wrapper {
        padding-left: var(--mobile-gutter);
        padding-right: var(--mobile-gutter);
        overflow-x: clip;
      }

      .hero-banner,
      .hero-social-proof,
      .marquee-logos,
      .marquee,
      .marquee-services,
      .mayor-highlight-section--fullbleed,
      .services-showcase-section,
      .service-builder-section,
      .lp-creator-edu-section,
      .iheart-section,
      .shawnta-portfolio-section--fullbleed,
      .real-estate-section,
      .cf-about-section {
        width: var(--mobile-bleed-width);
        max-width: 100vw;
        margin-left: var(--mobile-bleed);
        margin-right: var(--mobile-bleed);
        transform: none;
        box-sizing: border-box;
      }

      .book-section,
      .footer {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
      }

      .book-section {
        padding-left: var(--mobile-gutter);
        padding-right: var(--mobile-gutter);
      }

      .footer {
        padding-left: var(--mobile-gutter);
        padding-right: var(--mobile-gutter);
      }

      .lp-web-showcase {
        grid-template-columns: 1fr;
        min-width: 0;
        overflow: hidden;
        padding: clamp(14px, 2.5vw, 18px);
      }

      .sp-hero-frame {
        min-height: 0;
        height: auto;
        aspect-ratio: 16 / 10;
        max-height: min(280px, 42vw);
      }

      .sp-hero-frame img,
      .sp-hero-frame video.sp-hero-media {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: 100%;
      }

      .lp-web-showcase-stack,
      .lp-portfolio-shell,
      .service-builder-inner,
      .services-showcase-inner,
      .iheart-section-inner,
      .real-estate-section-inner,
      .book-section-inner,
      .footer-shell {
        min-width: 0;
        max-width: 100%;
      }

      .section-header,
      .section-title,
      .section-subtitle,
      .hero-title,
      .hero-subtitle {
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      picture,
      .lp-portfolio-hero,
      .about-card,
      .hero-value-card,
      .svc-tile,
      .lp-platform-card,
      .iheart-pillar,
      .re-showcase-grid > * {
        max-width: 100%;
        min-width: 0;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: clamp(20px, 4vw, 28px);
      }

      .footer-brand-col {
        grid-column: 1 / -1;
      }

      .footer-tagline {
        max-width: none;
      }

      .about-grid {
        grid-template-columns: 1fr;
      }

      .hero-value-props {
        grid-template-columns: 1fr;
        max-width: 100%;
      }
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      :root {
        --nav-height: 56px;
        --section-gap: 24px;
        --mobile-gutter: 16px;
        --mobile-bleed: calc(-1 * var(--mobile-gutter));
        --mobile-bleed-width: calc(100% + (2 * var(--mobile-gutter)));
      }

      .nav-wrapper {
        padding-top: max(10px, env(safe-area-inset-top, 0px));
      }

      .nav-container {
        height: var(--nav-height);
        min-height: var(--nav-height);
        padding: 6px var(--mobile-gutter);
        align-items: center;
      }

      .nav-menu {
        display: none;
      }

      .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        right: var(--mobile-gutter);
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
        z-index: 10002;
      }

      .nav-menu.show {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: calc(var(--nav-height) + max(10px, env(safe-area-inset-top, 0px)));
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 16px var(--mobile-gutter) calc(24px + env(safe-area-inset-bottom));
        gap: 6px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: rgba(15, 23, 42, 0.98);
        backdrop-filter: blur(20px);
        border-top: 1px solid rgba(99, 102, 241, 0.22);
        z-index: 10001;
      }

      /* Keep drawer above hero / full-bleed sections when open */
      body.nav-open .nav-wrapper {
        z-index: 10050;
        backdrop-filter: none;
        background: rgba(15, 23, 42, 0.98);
      }

      body.nav-open .wrapper,
      body.nav-open .book-section,
      body.nav-open .footer {
        z-index: 0;
      }

      body.nav-open .hero-banner,
      body.nav-open .hero-banner-content,
      body.nav-open .hero-banner-media {
        z-index: auto;
      }

      .nav-menu.show .nav-item {
        width: 100%;
      }

      .nav-menu.show .nav-link {
        width: 100%;
        justify-content: center;
        min-height: 48px;
        font-size: 16px;
        padding: 14px 18px;
      }

      body.nav-open {
        overflow: hidden;
      }

      .nav-logo {
        left: var(--mobile-gutter);
      }

      .nav-logo img {
        height: 32px;
        width: auto;
        max-width: min(128px, 34vw);
      }

      .wrapper {
        padding: 0 var(--mobile-gutter) 0;
      }

      .section {
        margin-top: 24px;
        padding: 20px 0;
      }

      /* Full-bleed sections inside wrapper (book/footer handled at 1100px) */
      .hero-banner,
      .hero-social-proof,
      .marquee-logos,
      .marquee,
      .marquee-services,
      .mayor-highlight-section--fullbleed,
      .services-showcase-section,
      .service-builder-section,
      .lp-creator-edu-section,
      .iheart-section,
      .shawnta-portfolio-section--fullbleed,
      .real-estate-section,
      .cf-about-section {
        width: var(--mobile-bleed-width);
        max-width: 100vw;
        margin-left: var(--mobile-bleed);
        margin-right: var(--mobile-bleed);
        transform: none;
      }

      :root {
        --hero-banner-height: min(56vh, 420px);
      }

      .hero-banner,
      .hero-banner--page,
      .page-opening-hero .hero-banner {
        height: auto;
        max-height: none;
      }

      .hero-banner {
        margin-top: calc(var(--nav-height) + max(10px, env(safe-area-inset-top, 0px)));
      }

      .hero-banner-content {
        height: auto;
        min-height: var(--hero-banner-height);
        max-height: none;
        padding: clamp(18px, 4vw, 24px) 16px;
        justify-content: center;
        box-sizing: border-box;
      }

      .hero-banner--page .hero-title,
      .hero-banner .hero-title {
        font-size: clamp(22px, 6.8vw, 34px);
        line-height: 1.12;
        margin-bottom: 10px;
      }

      .hero-banner .hero-subtitle {
        font-size: clamp(13px, 3.8vw, 16px);
        line-height: 1.5;
        margin-bottom: 0;
      }

      .hero-banner-kicker {
        font-size: 10px;
        margin-bottom: 10px;
        letter-spacing: 0.12em;
      }

      .hero-banner-actions {
        margin-top: 14px;
        flex-direction: column;
        align-items: center;
        width: 100%;
      }

      .hero-banner-actions .hero-cta,
      .hero-banner-actions .hero-banner-btn-secondary {
        width: 100%;
        max-width: 300px;
        justify-content: center;
        min-height: 46px;
      }

      .hero-social-proof {
        padding: 14px 12px;
        margin-top: 12px;
      }

      .marquee-logos .tracks,
      .marquee .tracks {
        padding: 12px 0;
      }
      .marquee-logos .tracks {
        animation: scroll 10s linear infinite;
      }


      .logo-pill {
        height: 34px;
      }

      .logo-pill img {
        max-width: min(120px, 22vw);
      }

      .hero-value-section {
        margin-top: 20px;
      }

      .hero-value-head {
        margin-bottom: 18px;
      }

      .hero-value-title {
        font-size: clamp(22px, 6vw, 28px);
      }

      .hero-value-sub {
        font-size: 14px;
      }

      .hero-value-props {
        max-width: 100%;
        gap: 12px;
      }

      .hero-value-card {
        padding: 16px 14px;
        border-radius: 18px;
      }

      .hero-value-icon-wrap {
        width: 48px;
        height: 48px;
        font-size: 20px;
        margin-bottom: 10px;
        border-radius: 14px;
      }

      .hero-value-card h3 {
        font-size: 16px;
        min-height: 0;
        margin-bottom: 8px;
      }

      .hero-value-card p {
        font-size: 13px;
        line-height: 1.55;
      }

      .services-showcase-section {
        padding: 32px 12px;
        margin-top: var(--section-gap);
      }

      .services-showcase-head {
        margin-bottom: 22px;
      }

      .services-showcase-title {
        font-size: clamp(24px, 6.5vw, 32px);
      }

      .services-showcase-lede {
        font-size: 14px;
        line-height: 1.6;
      }

      .services-bento {
        gap: 10px;
      }

      .svc-tile {
        padding: 16px;
        min-height: 0;
        border-radius: 16px;
        gap: 8px;
      }

      .svc-tile h3 {
        font-size: 17px;
      }

      .svc-tile p {
        font-size: 14px;
        line-height: 1.55;
        max-width: none;
      }

      .svc-tile-icon {
        width: 40px;
        height: 40px;
        font-size: 17px;
        border-radius: 12px;
      }

      .svc-tile--featured {
        padding: 18px 16px;
      }

      .svc-tile--featured h3 {
        font-size: 19px;
        max-width: none;
      }

      .svc-tile--featured p {
        font-size: 14px;
        max-width: none;
      }

      .svc-tile--featured .svc-tile-icon {
        width: 44px;
        height: 44px;
        font-size: 19px;
      }

      .svc-tile-video-frame {
        border-radius: 10px;
      }

      .services-bento {
        grid-template-columns: 1fr;
      }

      .svc-tile--featured,
      .svc-tile--photo,
      .svc-tile--web,
      .svc-tile--brand,
      .svc-tile--whitelabel,
      .svc-tile--workshops {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 0;
      }

      .spb-hero {
        grid-template-columns: 1fr;
        align-items: start;
      }

      .spb-steps {
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 0;
      }

      .lp-creator-edu-section .creator-title-line {
        white-space: normal;
      }

      .lp-creator-edu-section .creator-banner,
      .lp-creator-edu-section .creator-banner-content {
        min-height: 420px;
      }

      .lp-creator-edu-section .lp-creator-stats,
      .lp-creator-edu-section .creator-platform-grid {
        grid-template-columns: 1fr;
      }

      .lp-portfolio-hero,
      .iheart-showcase,
      .iheart-pillars,
      .re-showcase-grid,
      .re-promise-row,
      .re-service-grid,
      .re-deliverables {
        grid-template-columns: 1fr;
      }

      .lp-creator-edu-section,
      .iheart-section,
      .shawnta-portfolio-section--fullbleed,
      .real-estate-section {
        padding: 32px 12px;
      }

      .lp-portfolio-shell > .lp-creator-edu-section {
        margin-top: 20px;
        margin-bottom: 0;
      }

      .lp-portfolio-shell > .lp-creator-edu-section + .iheart-section {
        margin-top: calc(-1 * var(--lp-portfolio-gap, 32px));
        margin-bottom: 20px;
      }

      .shawnta-portfolio-section--fullbleed,
      .real-estate-section {
        margin-top: 20px;
        margin-bottom: 20px;
      }

      .lp-portfolio-shell > .shawnta-portfolio-section--fullbleed:has(+ .real-estate-section) {
        margin-bottom: 0;
        padding-bottom: 0;
      }

      .lp-portfolio-shell > .shawnta-portfolio-section--fullbleed + .real-estate-section {
        margin-top: calc(-1 * var(--lp-portfolio-gap, 32px));
        margin-bottom: 20px;
        padding-top: 28px;
      }

      .iheart-header {
        margin-bottom: 22px;
      }

      .iheart-title {
        font-size: clamp(22px, 6vw, 28px);
      }

      .iheart-pillar {
        padding: 0 0 22px;
        border-right: none;
        border-bottom: 1px solid rgba(99, 102, 241, 0.18);
      }

      .iheart-pillar:last-child {
        padding-bottom: 0;
        border-bottom: none;
      }

      .iheart-aside {
        border-left: none;
        border-top: 3px solid rgba(196, 18, 48, 0.72);
        padding-top: 24px;
      }

      .re-blueprint-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .re-slideshow-stage {
        aspect-ratio: 4 / 3;
      }

      .lp-web-showcase,
      .lp-video-grid,
      .lp-feature-grid,
      .lp-platform-grid,
      .lp-civic-grid,
      .lp-portfolio-stats {
        grid-template-columns: 1fr;
      }

      .kbl-hero-frame,
      .sp-hero-frame {
        min-height: 0;
        height: auto;
        aspect-ratio: 16 / 10;
        max-height: 220px;
      }

      .lp-portfolio-hero {
        padding: 16px;
        border-radius: 18px;
        gap: 14px;
      }

      .lp-portfolio-lede {
        font-size: 14px;
        line-height: 1.6;
      }

      .lp-portfolio-kicker {
        font-size: 10px;
        margin-bottom: 10px;
      }

      .book-section {
        margin-top: var(--section-gap);
        padding: 28px var(--mobile-gutter);
        overflow-x: clip;
      }

      .book-section-inner {
        width: 100%;
        max-width: 100%;
      }

      .book-section-grid {
        grid-template-columns: 1fr;
        gap: 0;
        width: 100%;
        min-width: 0;
        border-radius: 18px;
      }

      .book-section-info,
      .book-form-panel {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
      }

      .book-section-info {
        padding: 20px 16px;
        border-radius: 0;
        border-right: none;
        border-bottom: 1px solid rgba(99, 102, 241, 0.2);
        gap: 12px;
      }

      .book-form-panel {
        padding: 20px 16px;
        border-radius: 0;
      }

      .book-form-head {
        margin-bottom: 18px;
        padding-bottom: 14px;
      }

      .book-form-head h3 {
        font-size: clamp(20px, 5.2vw, 24px);
        line-height: 1.2;
      }

      .book-form-head p {
        font-size: 14px;
      }

      .book-trust-list li {
        font-size: 14px;
      }

      .book-kicker {
        align-self: center;
      }

      .book-section-title {
        font-size: clamp(24px, 7vw, 32px);
      }

      .book-section-lede {
        font-size: 14px;
        line-height: 1.6;
      }

      .book-contact-chips {
        flex-direction: column;
        align-items: stretch;
      }

      .book-contact-chip {
        justify-content: center;
        text-align: center;
      }

      .book-form-grid,
      .footer-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .form-input,
      .form-textarea {
        padding: 16px;
        font-size: 16px;
      }

      .form-submit {
        width: 100%;
        justify-content: center;
        min-height: 48px;
      }

      .footer {
        padding-top: 36px;
        padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
        overflow-x: clip;
      }

      .footer-shell {
        width: 100%;
        max-width: 100%;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
      }

      .footer-grid > div {
        min-width: 0;
        width: 100%;
      }

      .footer-brand-col {
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(99, 102, 241, 0.18);
      }

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

      .footer-logo img {
        height: auto;
        max-width: min(180px, 52vw);
      }

      .footer-tagline {
        font-size: 14px;
        line-height: 1.6;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
      }

      .footer-col-title {
        margin-bottom: 10px;
        font-size: 12px;
        text-align: center;
      }

      .footer-links {
        justify-items: center;
        text-align: center;
      }

      .footer-contact-list {
        align-items: center;
        text-align: center;
      }

      .footer-contact-list li {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        text-align: center;
      }

      .footer-location {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        font-size: 11px;
        line-height: 1.5;
      }

      .footer-social-row {
        justify-content: center;
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
      }

      .footer-social-row .social-link {
        flex: 1 1 calc(50% - 6px);
        justify-content: center;
        min-width: 0;
      }

      .footer-links a,
      .footer-contact-list li {
        font-size: 14px;
      }

      .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        margin-top: 28px;
        padding-top: 20px;
      }

      .footer-copyright {
        font-size: 13px;
      }

      .footer-legal {
        justify-content: center;
        gap: 12px;
      }

      .footer-legal a {
        font-size: 12px;
      }

      .iheart-footer-cta .hero-cta,
      .iheart-footer-cta .lp-portfolio-btn-secondary {
        width: 100%;
        justify-content: center;
      }

      .lp-web-showcase {
        border-radius: 18px;
      }

      .sp-hero-frame {
        max-height: 220px;
      }

      .lp-web-showcase-stack {
        gap: 16px;
      }

      .service-builder-grid > *,
      .package-builder,
      .service-catalog,
      .quote-summary,
      .service-item {
        min-width: 0;
        max-width: 100%;
      }

      .service-item-name,
      .service-item-price,
      .quote-line-label {
        overflow-wrap: anywhere;
      }

      .hero-banner-content {
        align-items: center;
        text-align: center;
      }

      .hero-banner .hero-title,
      .hero-banner .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
      }

      .hero-banner-actions {
        justify-content: center;
      }

      .hero-social-proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .hero-social-proof-value {
        font-size: clamp(22px, 6vw, 28px);
      }

      .hero-social-proof-label {
        font-size: 12px;
      }

      .about-grid {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .about-card {
        padding: 16px 14px;
        border-radius: 16px;
      }

      .about-card h3 {
        font-size: 17px;
      }

      .about-card p {
        font-size: 14px;
        line-height: 1.55;
      }

      .lp-portfolio-nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 6px;
        margin: 0 -4px;
        scrollbar-width: none;
      }

      .lp-portfolio-nav::-webkit-scrollbar {
        display: none;
      }

      .lp-portfolio-nav a {
        flex: 0 0 auto;
        scroll-snap-align: start;
        min-height: 44px;
        white-space: nowrap;
      }

      .lp-portfolio-actions,
      .lp-web-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .lp-portfolio-actions .hero-cta,
      .lp-portfolio-actions .lp-portfolio-btn-secondary,
      .lp-web-actions .hero-cta,
      .lp-web-actions .lp-portfolio-btn-secondary {
        width: 100%;
        justify-content: center;
      }

      .service-categories {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 4px;
        scrollbar-width: none;
      }

      .service-categories::-webkit-scrollbar {
        display: none;
      }

      .service-categories .category-tab {
        flex: 0 0 auto;
        min-width: max-content;
      }

      .svc-tile--featured {
        min-height: 0;
      }

      .svc-tile--featured.svc-tile--video h3 {
        max-width: none;
      }

      .sp-hero-meta {
        padding: 14px 12px;
        border-radius: 12px;
      }

      .sp-hero-meta strong {
        font-size: 15px;
        margin-bottom: 6px;
      }

      .sp-hero-meta span {
        font-size: 13px;
        line-height: 1.55;
      }

      .re-title {
        font-size: clamp(22px, 6.5vw, 28px);
      }

      .re-blueprint-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

      .re-slideshow-thumbs {
        gap: 8px;
        padding: 0 2px;
      }

      .re-slideshow-thumb {
        flex: 0 0 56px;
        width: 56px;
        height: 42px;
      }

      .iheart-showcase {
        gap: 16px;
      }

      .iheart-aside .hero-cta {
        width: 100%;
        justify-content: center;
      }

      /* —— Mobile polish: all sections & cards (max-width 768px only) —— */
      html,
      body {
        overflow-x: clip;
        max-width: 100%;
      }

      .hero-body,
      #portfolio,
      .lp-portfolio-shell,
      .service-builder-inner,
      .services-showcase-inner {
        min-width: 0;
        max-width: 100%;
      }

      #about.cf-about-section {
        width: var(--mobile-bleed-width);
        max-width: 100vw;
        margin-left: var(--mobile-bleed);
        margin-right: var(--mobile-bleed);
        box-sizing: border-box;
      }

      img,
      video,
      iframe,
      picture,
      svg {
        max-width: 100%;
      }

      .lp-creator-edu-section {
        padding: 28px 12px;
        box-sizing: border-box;
      }

      .lp-creator-edu-section .creator-banner,
      .lp-creator-edu-section .creator-banner-content {
        min-height: min(360px, 70vw);
        padding: 18px 14px;
      }

      .lp-creator-edu-section .creator-title {
        font-size: clamp(20px, 6vw, 28px);
      }

      .lp-creator-edu-section .creator-copy {
        font-size: 14px;
        line-height: 1.6;
      }

      .lp-creator-edu-section .lp-creator-stat {
        padding: 14px 12px;
      }

      .lp-creator-edu-section .lp-creator-stat strong {
        font-size: clamp(18px, 5vw, 22px);
      }

      .lp-creator-edu-section .lp-creator-stat span {
        font-size: 12px;
        line-height: 1.45;
      }

      .lp-creator-edu-section .creator-platform-panel {
        padding: 16px 14px;
      }

      .lp-creator-edu-section .creator-platform-grid {
        gap: 10px;
      }

      .lp-creator-edu-section .creator-platform-item {
        padding: 12px;
      }

      .lp-creator-edu-section .lp-creator-gallery {
        gap: 14px;
      }

      .lp-creator-edu-section .lp-creator-card-body {
        padding: 12px 14px;
      }

      .lp-creator-edu-section .lp-creator-footer-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }

      .lp-creator-edu-section .lp-creator-footer-cta .hero-cta,
      .lp-creator-edu-section .lp-creator-footer-cta .lp-portfolio-btn-secondary {
        width: 100%;
        justify-content: center;
        min-height: 48px;
      }

      .lp-portfolio {
        min-width: 0;
      }

      .lp-portfolio-shell {
        gap: 20px;
      }

      .lp-portfolio-title {
        font-size: clamp(22px, 6.2vw, 30px);
        line-height: 1.15;
      }

      .lp-portfolio-feature {
        min-width: 0;
        border-radius: 16px;
      }

      .lp-portfolio-feature picture,
      .lp-portfolio-feature img {
        width: 100%;
        display: block;
      }

      .lp-portfolio-feature-badge {
        padding: 12px 14px;
        font-size: 13px;
        line-height: 1.5;
      }

      .lp-portfolio-stat {
        padding: 14px 12px;
        text-align: left;
      }

      .lp-portfolio-stat strong {
        font-size: clamp(20px, 5.5vw, 26px);
      }

      .lp-portfolio-stat span {
        font-size: 13px;
        line-height: 1.5;
      }

      .lp-video-card,
      .lp-feature-card,
      .lp-platform-card,
      .lp-civic-card,
      .lp-web-showcase-card {
        min-width: 0;
        padding: 14px 12px;
        border-radius: 16px;
      }

      .lp-video-grid .lp-creator-video iframe,
      .lp-video-card iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: 180px;
      }

      .kbl-preview,
      .lp-web-showcase {
        min-width: 0;
        overflow: hidden;
      }

      .kbl-hero-frame {
        max-height: min(200px, 48vw);
      }

      .hero-cta-section {
        padding: 0 4px;
      }

      .hero-cta-section p {
        font-size: 13px !important;
        line-height: 1.55;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin: 0 auto !important;
        max-width: 28rem;
      }

      .cf-about-section {
        padding: 40px 16px;
      }

      .cf-about-title {
        font-size: clamp(30px, 8vw, 40px);
      }

      .cf-about-deck,
      .cf-about-lead,
      .cf-about-body {
        font-size: 15px;
      }

      .cf-about-quote p {
        font-size: 15px;
      }

      .spb-hero {
        gap: 16px;
        padding-bottom: 18px;
      }

      .spb-lede {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.65;
      }

      .spb-kicker {
        font-size: 0.65rem;
        letter-spacing: 0.1em;
      }

      .spb-steps {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        min-width: 0;
        gap: 8px;
      }

      .spb-steps li {
        font-size: 0.78rem;
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 8px;
      }

      .builder-header-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
      }

      .package-count-badge {
        align-self: flex-start;
      }

      .catalog-header h3,
      .builder-header h3 {
        font-size: 1.12rem;
      }

      .catalog-header p,
      .builder-header p {
        font-size: 0.94rem;
        line-height: 1.55;
      }

      .catalog-tip {
        font-size: 0.86rem;
        line-height: 1.5;
      }

      .service-features li {
        font-size: 0.88rem;
        line-height: 1.5;
      }

      .service-catalog,
      .package-builder {
        height: auto;
      }

      .service-items {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: visible;
      }

      .package-dropzone {
        flex: 0 1 auto;
      }

      .package-builder .quote-summary {
        margin-top: 1rem;
      }

      .quote-summary {
        padding: 1.15rem 1rem;
      }

      .quote-total {
        font-size: clamp(26px, 7.5vw, 34px);
        line-height: 1.1;
        word-break: break-word;
      }

      .quote-item {
        flex-wrap: wrap;
        gap: 4px 8px;
        font-size: 0.82rem;
      }

      .selected-service {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
      }

      .selected-service-details h5 {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        line-height: 1.35;
      }

      .service-item-title {
        font-size: 0.95rem;
        line-height: 1.3;
      }

      .service-item::after {
        display: none;
      }

      .svc-tile-tags {
        flex-wrap: wrap;
        gap: 6px;
      }

      .svc-tile-tags li {
        font-size: 11px;
      }

      .re-showcase-copy,
      .re-promise-card,
      .re-service-card {
        padding: 14px 12px;
        min-width: 0;
      }

      .re-deliverable {
        padding: 12px;
        min-width: 0;
      }

      .iheart-showcase-media {
        min-width: 0;
        border-radius: 14px;
      }

      .iheart-showcase-media img,
      .iheart-showcase-media video {
        width: 100%;
        height: auto;
      }

      .notification {
        max-width: calc(100vw - 32px) !important;
        right: 16px !important;
        left: auto !important;
      }

      .modal-overlay.active {
        padding: 0;
        align-items: flex-end;
      }

      .modal-overlay.active .modal-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        max-height: min(92vh, 92dvh);
        border-radius: 18px 18px 0 0;
      }

      .invoice-create-modal.active {
        align-items: center;
        padding: 0.65rem;
      }

      .invoice-create-modal .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: min(94vh, 94dvh);
        border-radius: 16px;
      }

      .invoice-create-modal__inner {
        padding: 1.75rem 1.35rem 1.5rem;
      }

      .invoice-preview-collapsible summary {
        font-size: 0.82rem;
        padding: 0.75rem 0.85rem;
      }

      .contact-form-section .form-group input {
        font-size: 16px;
        min-height: 48px;
      }
    }

    @media (max-width: 900px) {
      .lp-creator-edu-section .lp-creator-stats,
      .lp-creator-edu-section .creator-platform-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .lp-creator-edu-section .lp-creator-gallery {
        grid-template-columns: 1fr;
      }

      .lp-creator-edu-section .creator-banner,
      .lp-creator-edu-section .creator-banner-content {
        min-height: 500px;
      }

      .lp-portfolio-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .lp-feature-grid,
      .lp-platform-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 480px) {
      :root {
        --nav-height: 52px;
        --hero-banner-height: min(54vh, 400px);
      }

      .nav-logo img {
        height: 28px;
        max-width: min(112px, 32vw);
      }

      .hero-banner-content {
        align-items: center;
        text-align: center;
        padding: 18px 14px;
      }

      .hero-banner .hero-title,
      .hero-banner .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
      }

      .hero-banner-actions {
        justify-content: center;
      }

      .hero-banner-media img {
        object-position: 40% center;
      }

      .hero-title {
        font-size: clamp(24px, 8.5vw, 34px);
      }

      .hero-subtitle {
        font-size: clamp(14px, 4vw, 16px);
      }

      .section-title {
        font-size: clamp(22px, 7vw, 32px);
      }

      .lp-portfolio-stats {
        grid-template-columns: 1fr;
      }

      .hero-social-proof-grid {
        grid-template-columns: 1fr 1fr;
      }

      .hero-banner-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
      }

      .hero-banner-actions .hero-cta,
      .hero-banner-actions .hero-banner-btn-secondary {
        width: 100%;
        justify-content: center;
      }

      .hero-cta,
      .nav-cta {
        min-height: 48px;
      }

      .services-showcase-title {
        font-size: clamp(28px, 8vw, 36px);
      }

      .iheart-title-row {
        flex-direction: column;
        gap: 12px;
      }

      .iheart-logo {
        max-width: min(160px, 50vw);
        height: auto;
      }

      .re-title {
        font-size: clamp(28px, 8vw, 40px);
      }

      .book-form input,
      .book-form select,
      .book-form textarea {
        font-size: 16px;
      }

      .footer-social-row .social-link {
        flex: 1 1 100%;
      }

      .sp-hero-frame {
        max-height: 200px;
        aspect-ratio: 16 / 11;
      }

      .lp-portfolio-hero {
        padding: 14px 12px;
      }

      .services-showcase-section,
      .service-builder-section,
      .iheart-section,
      .shawnta-portfolio-section--fullbleed,
      .real-estate-section {
        padding-left: 12px;
        padding-right: 12px;
      }

      .package-dropzone {
        padding: 16px 12px;
      }

      .service-item {
        padding: 12px;
      }

      .category-tab {
        font-size: 0.72rem;
        padding: 10px 12px;
      }

      .lp-creator-edu-section .creator-banner,
      .lp-creator-edu-section .creator-banner-content {
        min-height: min(320px, 85vw);
      }

      .lp-creator-edu-section .lp-creator-stat-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
      }

      .spb-steps li {
        font-size: 0.74rem;
      }

      .re-blueprint-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .hero-social-proof-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .hero-social-proof-stat {
        min-width: 0;
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid rgba(99, 102, 241, 0.12);
      }

      .hero-social-proof-stat:last-child {
        border-bottom: none;
      }

      .quote-total {
        font-size: clamp(24px, 8vw, 32px);
      }
    }

    /* Service Package Builder — full bleed */
    .service-builder-section {
      position: relative;
      width: 100vw;
      margin: 0 calc(50% - 50vw) 0;
      padding: clamp(44px, 6vw, 72px) clamp(20px, 4vw, 48px);
      scroll-margin-top: 100px;
      overflow: hidden;
      isolation: isolate;
      border-top: 1px solid rgba(99, 102, 241, 0.22);
      border-bottom: 1px solid rgba(255, 178, 0, 0.12);
      background:
        radial-gradient(920px 440px at 8% 0%, rgba(99, 102, 241, 0.14), transparent 58%),
        radial-gradient(780px 380px at 92% 18%, rgba(255, 178, 0, 0.1), transparent 55%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.98) 0%, rgba(15, 23, 42, 0.95) 50%, rgba(2, 6, 23, 0.98) 100%);
    }

    .service-builder-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(99, 102, 241, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.035) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 88%);
      pointer-events: none;
    }

    .service-builder-inner {
      position: relative;
      z-index: 1;
      max-width: 1320px;
      margin: 0 auto;
    }

    .service-builder-section .section-header,
    .service-builder-section .spb-hero {
      margin-bottom: clamp(28px, 4vw, 40px);
    }

    .spb-hero {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(20px, 3vw, 28px);
      justify-items: center;
      text-align: center;
      padding-bottom: clamp(24px, 3vw, 32px);
      border-bottom: 1px solid rgba(255, 178, 0, 0.18);
    }

    .spb-hero-main {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 820px;
      margin: 0 auto;
    }

    .spb-kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 auto 0.75rem;
      padding: 0.4rem 0.85rem;
      font-family: 'Poppins', sans-serif;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand-gold);
      background: rgba(255, 178, 0, 0.1);
      border: 1px solid rgba(255, 178, 0, 0.35);
      border-radius: 999px;
    }

    .spb-kicker i {
      font-size: 0.85rem;
    }

    .spb-lede {
      max-width: 62ch;
      margin: 0.65rem auto 0;
    }

    .spb-steps {
      list-style: none;
      margin: 0 auto;
      padding: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      min-width: 0;
      max-width: 100%;
    }

    .spb-steps li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: 'Poppins', sans-serif;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-secondary);
      line-height: 1.35;
    }

    .spb-step-num {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(255, 178, 0, 0.22), rgba(99, 102, 241, 0.18));
      border: 1px solid rgba(255, 178, 0, 0.35);
      color: var(--brand-gold);
      font-size: 0.75rem;
      font-weight: 800;
    }

    .catalog-tip {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      margin-top: 0.5rem;
      font-size: 0.9rem;
      color: var(--brand-gold);
      opacity: 0.9;
    }

    .catalog-tip i {
      font-size: 0.75rem;
    }

    .catalog-search-wrap {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.75rem;
      padding: 0.5rem 0.75rem;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.25);
    }

    .catalog-search-wrap i {
      color: var(--text-muted);
      font-size: 0.85rem;
    }

    .catalog-search {
      flex: 1;
      min-width: 0;
      border: none;
      background: transparent;
      color: var(--text-primary);
      font-family: 'Poppins', sans-serif;
      font-size: 0.9rem;
      outline: none;
    }

    .catalog-search::placeholder {
      color: var(--text-muted);
    }

    .catalog-search-status {
      margin: 0.55rem 0 0;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--brand-gold);
      letter-spacing: 0.02em;
    }

    .catalog-search-empty {
      grid-column: 1 / -1;
      margin: 1.5rem 0;
      padding: 1.5rem 1.25rem;
      text-align: center;
      border: 1px dashed rgba(255, 178, 0, 0.28);
      border-radius: 14px;
      background: rgba(0, 0, 0, 0.22);
      color: var(--text-secondary);
      font-size: 0.9rem;
      line-height: 1.55;
    }

    .catalog-search-empty strong {
      display: block;
      color: var(--text-primary);
      font-size: 1rem;
      margin-bottom: 0.35rem;
    }

    .service-categories.is-searching .category-tab:not(.active) {
      opacity: 0.55;
    }

    .service-item::after {
      content: "Add to package";
      position: absolute;
      right: 12px;
      bottom: 12px;
      font-family: 'Poppins', sans-serif;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(255, 178, 0, 0.85);
      opacity: 0;
      transition: opacity 0.2s ease;
      pointer-events: none;
    }

    .service-item.in-package::after {
      content: "In package";
      color: #6ee7b7;
      opacity: 1;
    }

    .service-item:hover::after,
    .service-item:focus-visible::after {
      opacity: 1;
    }

    .quote-summary.is-empty .quote-total {
      opacity: 0.45;
    }

    .quote-empty-hint {
      margin: 0 0 0.75rem;
      font-size: 0.82rem;
      color: var(--text-muted);
      line-height: 1.45;
    }

    .quote-empty-hint[hidden] {
      display: none;
    }

    .btn-generate-invoice:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
      filter: none;
    }

    .btn-generate-invoice:disabled:hover {
      transform: none;
      filter: none;
      box-shadow: none;
    }

    .invoice-preview-collapsible {
      margin-bottom: 1.25rem;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      overflow: hidden;
    }

    .invoice-preview-collapsible summary {
      cursor: pointer;
      padding: 0.85rem 1rem;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 0.88rem;
      color: var(--text-secondary);
      list-style: none;
    }

    .invoice-preview-collapsible summary::-webkit-details-marker {
      display: none;
    }

    .invoice-preview-collapsible[open] summary {
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .invoice-preview-collapsible .invoice-details {
      padding: 0 1rem 1rem;
    }

    .modal-trust-line {
      margin: 0 0 1rem;
      font-size: 0.85rem;
      color: var(--text-muted);
      line-height: 1.5;
    }

    /* Create invoice modal — centered, modern, scrollable */
    .invoice-create-modal {
      padding: 1.5rem;
      align-items: center;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .invoice-create-modal .modal-content {
      max-width: min(680px, 94vw);
      width: 100%;
      max-height: min(90vh, 90dvh);
      padding: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid rgba(255, 178, 0, 0.22);
      background: linear-gradient(168deg, rgba(22, 28, 42, 0.98) 0%, rgba(8, 11, 18, 0.99) 55%, rgba(12, 16, 26, 1) 100%);
      box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    }

    .invoice-create-modal__accent {
      flex-shrink: 0;
      height: 4px;
      background: linear-gradient(90deg, transparent 0%, var(--brand-gold) 35%, #ffd166 50%, var(--brand-gold) 65%, transparent 100%);
    }

    .invoice-create-modal__inner {
      flex: 1 1 auto;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding: 2.25rem 2.5rem 2rem;
      text-align: center;
    }

    .invoice-create-modal .modal-header {
      margin-bottom: 1.75rem;
    }

    .invoice-create-modal .modal-icon {
      width: 84px;
      height: 84px;
      font-size: 2rem;
      margin-bottom: 1.35rem;
      box-shadow:
        0 0 0 4px rgba(255, 178, 0, 0.12),
        var(--glow-gold);
    }

    .invoice-create-modal .modal-header h2 {
      font-size: clamp(1.5rem, 2.8vw, 1.85rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.3;
      margin-bottom: 0.75rem;
    }

    .invoice-create-modal .modal-header p {
      font-size: clamp(0.95rem, 1.6vw, 1.05rem);
      line-height: 1.6;
      max-width: 38ch;
      margin-left: auto;
      margin-right: auto;
      color: rgba(255, 255, 255, 0.72);
    }

    .invoice-create-modal .contact-form-section {
      margin: 0;
      padding: 0;
      border: none;
      text-align: center;
    }

    .invoice-create-modal .contact-form-section h3 {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--brand-gold);
      margin: 0 0 0.65rem;
      text-align: center;
    }

    .invoice-create-modal .modal-trust-line {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      margin: 0 auto 1.35rem;
      padding: 0.55rem 1.1rem;
      font-size: 0.78rem;
      line-height: 1.4;
      color: rgba(255, 255, 255, 0.78);
      background: rgba(255, 178, 0, 0.07);
      border: 1px solid rgba(255, 178, 0, 0.18);
      border-radius: 999px;
      text-align: center;
    }

    .invoice-create-modal .modal-trust-line i {
      color: var(--brand-gold);
      font-size: 0.7rem;
    }

    .invoice-create-modal .contact-form-section .contact-form {
      max-width: 100%;
      margin: 0 auto;
      padding: 0;
      background: transparent;
      border: none;
      box-shadow: none;
      backdrop-filter: none;
      text-align: center;
    }

    .invoice-create-modal .form-group {
      margin-bottom: 1.25rem;
      text-align: center;
    }

    .invoice-create-modal .form-group label {
      display: block;
      text-align: center;
      font-size: 0.88rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      margin-bottom: 0.45rem;
      color: rgba(255, 255, 255, 0.88);
    }

    .invoice-create-modal .form-group label span {
      font-weight: 500;
      opacity: 0.55;
      font-size: 0.75rem;
    }

    .invoice-create-modal .form-group input {
      text-align: center;
      padding: 0.95rem 1.15rem;
      min-height: 52px;
      border-radius: 11px;
      background: rgba(0, 0, 0, 0.38);
      border: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 1rem;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .invoice-create-modal .form-group input::placeholder {
      text-align: center;
      opacity: 0.45;
    }

    .invoice-create-modal .form-group input:focus {
      background: rgba(0, 0, 0, 0.5);
      border-color: rgba(255, 178, 0, 0.55);
      box-shadow: 0 0 0 3px rgba(255, 178, 0, 0.12);
    }

    .invoice-create-modal .invoice-date-field {
      position: relative;
      display: block;
    }

    .invoice-create-modal .form-group input[type="date"] {
      color-scheme: light;
      width: 100%;
      padding-right: 3.25rem;
      color: rgba(255, 255, 255, 0.95);
      cursor: pointer;
    }

    .invoice-create-modal .invoice-date-picker-btn {
      position: absolute;
      right: 0.45rem;
      top: 50%;
      transform: translateY(-50%);
      width: 2.75rem;
      height: 2.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: rgba(255, 255, 255, 0.92);
      cursor: pointer;
      z-index: 2;
      font-size: 1.1rem;
      transition: color 0.2s ease, background 0.2s ease;
    }

    .invoice-create-modal .invoice-date-picker-btn:hover,
    .invoice-create-modal .invoice-date-picker-btn:focus-visible {
      color: var(--brand-gold);
      background: rgba(255, 178, 0, 0.1);
      outline: none;
    }

    .invoice-create-modal .form-group input[type="date"]::-webkit-calendar-picker-indicator {
      display: none;
      -webkit-appearance: none;
      appearance: none;
    }

    .invoice-create-modal .form-group input[type="date"]::-webkit-datetime-edit,
    .invoice-create-modal .form-group input[type="date"]::-webkit-datetime-edit-fields-wrapper,
    .invoice-create-modal .form-group input[type="date"]::-webkit-datetime-edit-text,
    .invoice-create-modal .form-group input[type="date"]::-webkit-datetime-edit-month-field,
    .invoice-create-modal .form-group input[type="date"]::-webkit-datetime-edit-day-field,
    .invoice-create-modal .form-group input[type="date"]::-webkit-datetime-edit-year-field {
      color: rgba(255, 255, 255, 0.95);
    }

    .invoice-create-modal .form-group input[type="date"]::-webkit-datetime-edit {
      text-align: center;
    }

    .invoice-create-modal .invoice-preview-collapsible {
      margin: 1.35rem 0 0;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.2);
      text-align: center;
    }

    .invoice-create-modal .invoice-preview-collapsible summary {
      text-align: center;
      color: rgba(255, 255, 255, 0.75);
      padding: 0.9rem 1rem;
    }

    .invoice-create-modal .invoice-preview-collapsible .invoice-details {
      text-align: center;
    }

    .invoice-create-modal .invoice-item {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0.35rem;
      padding: 0.85rem 1rem;
    }

    .invoice-create-modal .item-details h4,
    .invoice-create-modal .item-details p {
      text-align: center;
    }

    .invoice-create-modal .invoice-total .total-line {
      justify-content: center;
      gap: 0.75rem;
    }

    .invoice-create-modal .form-actions {
      flex-direction: column;
      gap: 0.75rem;
      margin-top: 1.75rem;
      padding-top: 0.35rem;
      padding-bottom: 0.25rem;
    }

    .invoice-create-modal .form-actions .btn-primary,
    .invoice-create-modal .form-actions .btn-secondary {
      width: 100%;
      justify-content: center;
      min-height: 52px;
      border-radius: 11px;
      font-size: 0.95rem;
    }

    .invoice-create-modal .form-actions .btn-primary {
      order: -1;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .invoice-create-modal .modal-close {
      z-index: 2;
      top: 0.85rem;
      right: 0.85rem;
      width: 38px;
      height: 38px;
      font-size: 1.5rem;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    @media (min-width: 769px) {
      .invoice-create-modal .modal-content {
        max-width: min(720px, 92vw);
        max-height: min(88vh, 88dvh);
      }

      .invoice-create-modal__inner {
        padding: 2.5rem 3rem 2.25rem;
      }
    }

    @media (min-width: 480px) {
      .invoice-create-modal .form-actions {
        flex-direction: row;
        align-items: stretch;
      }

      .invoice-create-modal .form-actions .btn-primary,
      .invoice-create-modal .form-actions .btn-secondary {
        flex: 1;
        width: auto;
      }

      .invoice-create-modal .form-actions .btn-primary {
        order: 1;
      }
    }

    .service-builder-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.72fr);
      gap: 0;
      align-items: stretch;
      width: 100%;
      border-radius: 24px;
      border: 1px solid rgba(99, 102, 241, 0.28);
      background: rgba(15, 23, 42, 0.72);
      backdrop-filter: blur(20px);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
    }

    .service-catalog {
      background: transparent;
      border: none;
      border-right: 1px solid rgba(99, 102, 241, 0.18);
      border-radius: 0;
      padding: clamp(1.5rem, 2.5vw, 2rem);
      backdrop-filter: none;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
      max-height: min(calc(100vh - 9rem), 880px);
      overflow: hidden;
    }

    .catalog-header,
    .service-categories {
      flex-shrink: 0;
    }

    .catalog-header {
      text-align: left;
      margin-bottom: 1.25rem;
      padding-bottom: 1.25rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .catalog-header h3 {
      color: var(--text-primary);
      font-family: 'Poppins', sans-serif;
      font-size: clamp(1.25rem, 2vw, 1.5rem);
      font-weight: 800;
      margin: 0 0 0.35rem;
      letter-spacing: -0.02em;
      text-transform: none;
    }

    .catalog-header p {
      color: var(--text-secondary);
      opacity: 0.85;
      font-size: 1rem;
      line-height: 1.55;
      margin: 0;
    }

    .service-categories {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 1.35rem;
      padding: 8px;
      background: rgba(2, 6, 23, 0.78);
      border: 1px solid rgba(99, 102, 241, 0.22);
      border-radius: 14px;
    }

    .category-tab {
      appearance: none;
      -webkit-appearance: none;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0.65rem 0.75rem;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 8px;
      color: rgba(226, 232, 240, 0.68);
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.8125rem;
      line-height: 1.2;
      text-align: center;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
      text-transform: none;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }

    .category-tab.active {
      background: linear-gradient(180deg, #ffd054 0%, var(--brand-gold) 100%);
      color: #111827;
      border-color: rgba(255, 196, 0, 0.55);
      box-shadow:
        0 2px 10px rgba(255, 178, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
      font-weight: 700;
    }

    .category-tab:hover:not(.active) {
      background: rgba(255, 255, 255, 0.08);
      color: #f8fafc;
      border-color: rgba(255, 255, 255, 0.14);
    }

    .category-tab:focus-visible {
      outline: 2px solid rgba(255, 178, 0, 0.55);
      outline-offset: 2px;
    }

    @media (max-width: 900px) {
      .service-categories {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .service-items {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      padding: 4px 6px 8px 0;
      box-sizing: border-box;
      flex: 1 1 auto;
      min-height: 220px;
      max-height: min(56vh, 620px);
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      width: 100%;
      align-items: start;
      align-content: start;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 178, 0, 0.35) rgba(255, 255, 255, 0.04);
    }

    .service-items::-webkit-scrollbar {
      width: 6px;
    }

    .service-items::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.03);
      border-radius: 999px;
    }

    .service-items::-webkit-scrollbar-thumb {
      background: rgba(255, 178, 0, 0.35);
      border-radius: 999px;
    }

    .service-item {
      border-radius: 16px;
      padding: 1.1rem 1rem 1.25rem;
      cursor: pointer;
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
      position: relative;
      overflow: visible;
      display: flex;
      flex-direction: column;
      height: auto;
      min-height: 300px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .service-item[data-category="website"] {
      background: linear-gradient(152deg, #1e2f52 0%, #121c34 52%, #0f172a 100%);
      border: 1px solid rgba(96, 165, 250, 0.32);
    }

    .service-item[data-category="photography"] {
      background: linear-gradient(152deg, #3d2e1a 0%, #261c10 52%, #1f160c 100%);
      border: 1px solid rgba(255, 178, 0, 0.34);
    }

    .service-item[data-category="videography"] {
      background: linear-gradient(152deg, #2a2248 0%, #1a1530 52%, #151028 100%);
      border: 1px solid rgba(167, 139, 250, 0.3);
    }

    .service-item[data-category="branding"] {
      background: linear-gradient(152deg, #3a1f42 0%, #241428 52%, #1c1020 100%);
      border: 1px solid rgba(244, 114, 182, 0.28);
    }

    .service-item[data-category="printing"] {
      background: linear-gradient(152deg, #1a3530 0%, #102420 52%, #0d1e1a 100%);
      border: 1px solid rgba(52, 211, 153, 0.3);
    }

    .service-item[data-category="retainer"] {
      background: linear-gradient(152deg, #3d2e14 0%, #261c0c 52%, #1f170a 100%);
      border: 1px solid rgba(251, 191, 36, 0.34);
    }

    .service-item::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 100%;
      background: linear-gradient(180deg, var(--brand-gold), rgba(99, 102, 241, 0.65));
      opacity: 0;
      transition: opacity 0.22s ease;
    }

    .service-item::after {
      content: "Drag to add";
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255, 178, 0, 0.45);
      opacity: 0;
      transition: opacity 0.22s ease;
    }

    .service-item.hidden {
      display: none !important;
      opacity: 0;
      transform: translateY(20px);
      pointer-events: none;
    }

    .service-section-header {
      grid-column: 1 / -1;
      margin: 1.1rem 0 0.35rem;
      padding: 0.45rem 0 0.45rem 12px;
      background: transparent;
      border: none;
      border-left: 3px solid var(--brand-gold);
      border-radius: 0;
      text-align: left;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 0.72rem;
      color: var(--brand-gold);
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }

    .service-section-header:first-child {
      margin-top: 0;
    }

    .service-section-header--sub {
      margin-top: 1.75rem;
      font-size: 0.68rem;
      letter-spacing: 0.12em;
      color: #93c5fd;
      border-left-color: #60a5fa;
    }

    .service-item[data-subcategory="white-label"] {
      background: linear-gradient(152deg, #163a47 0%, #0f2830 52%, #0c1f26 100%);
      border: 1px solid rgba(45, 212, 191, 0.34);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      row-gap: 0.85rem;
      min-height: 390px;
      height: 100%;
      padding: 1.1rem 1.05rem 1rem;
    }

    .service-item[data-subcategory="white-label"]:hover {
      border-color: rgba(45, 212, 191, 0.55);
      box-shadow: 0 14px 36px rgba(13, 148, 136, 0.18);
    }

    .service-item[data-subcategory="white-label"] .service-icon {
      background: linear-gradient(135deg, rgba(45, 212, 191, 0.22), rgba(20, 184, 166, 0.12));
      color: #5eead4;
    }

    .service-item[data-subcategory="white-label"]::after {
      display: none;
    }

    .service-item[data-subcategory="white-label"] .service-item-header {
      flex-direction: column;
      align-items: stretch;
      gap: 0.55rem;
      margin-bottom: 0.7rem;
    }

    .service-item-header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.65rem;
      width: 100%;
    }

    .service-item-title--white-label {
      min-height: unset;
      display: block;
      width: 100%;
      padding-right: 0;
      line-height: 1.2;
    }

    .service-title-eyebrow {
      display: block;
      margin-bottom: 0.28rem;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #5eead4;
      line-height: 1.2;
    }

    .service-item-title--white-label .service-title-main {
      display: block;
      font-size: 1.02rem;
      line-height: 1.22;
      color: #f8fafc;
    }


    .service-item--featured {
      border-color: rgba(255, 178, 0, 0.55) !important;
      box-shadow: 0 0 0 1px rgba(255, 178, 0, 0.2), 0 16px 40px rgba(0, 0, 0, 0.28);
    }

    .service-item[data-subcategory="white-label"] .service-item-badge {
      position: relative;
      top: auto;
      right: auto;
      flex-shrink: 0;
      padding: 5px 10px;
      border-radius: 999px;
      background: linear-gradient(135deg, #f59e0b, #ef4444);
      color: #fff;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      line-height: 1.15;
      white-space: nowrap;
    }

    .service-item[data-subcategory="white-label"] .service-item-body {
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
      gap: 0.45rem;
      margin-bottom: 0;
    }

    .service-item[data-subcategory="white-label"] .service-features {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding-bottom: 0.35rem;
      margin-bottom: 0.15rem;
      scrollbar-width: thin;
      scrollbar-color: rgba(45, 212, 191, 0.35) transparent;
    }

    .service-item[data-subcategory="white-label"] .service-features::-webkit-scrollbar {
      width: 4px;
    }

    .service-item[data-subcategory="white-label"] .service-features::-webkit-scrollbar-thumb {
      background: rgba(45, 212, 191, 0.35);
      border-radius: 999px;
    }

    .service-item-footer--white-label {
      align-self: stretch;
      margin-top: 0;
      padding-top: 0.95rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      width: 100%;
      flex-shrink: 0;
    }

    .service-item[data-subcategory="white-label"] .service-price {
      margin-top: 0;
      padding: 0.4rem 0.35rem 0.1rem;
      border-top: none;
    }

    .service-item[data-subcategory="white-label"] .service-price .price-amount {
      font-size: 1.32rem;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }

    .service-item[data-subcategory="white-label"] .service-price .price-monthly {
      display: block;
      margin-top: 0.15rem;
      font-size: 0.82rem;
      font-weight: 700;
      color: #5eead4;
      letter-spacing: 0.01em;
    }

    .service-section-header.hidden {
      display: none !important;
    }

    .service-item:hover {
      transform: translateY(-3px);
      border-color: rgba(255, 178, 0, 0.42);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .service-item[data-category="website"]:hover {
      background: linear-gradient(152deg, #243a62 0%, #162444 52%, #121e38 100%);
    }

    .service-item[data-category="photography"]:hover {
      background: linear-gradient(152deg, #4d3820 0%, #302410 52%, #281c0e 100%);
    }

    .service-item[data-category="videography"]:hover {
      background: linear-gradient(152deg, #342a58 0%, #221c3c 52%, #1a1630 100%);
    }

    .service-item[data-category="branding"]:hover {
      background: linear-gradient(152deg, #4a2854 0%, #2e1834 52%, #24142a 100%);
    }

    .service-item[data-category="printing"]:hover {
      background: linear-gradient(152deg, #224840 0%, #163028 52%, #122820 100%);
    }

    .service-item[data-category="retainer"]:hover {
      background: linear-gradient(152deg, #4d3a18 0%, #30240e 52%, #281e0c 100%);
    }

    .service-item:hover::before,
    .service-item:hover::after {
      opacity: 1;
    }

    .service-item:active {
      cursor: grabbing;
      transform: scale(0.985);
    }

    .service-item.dragging {
      opacity: 0.75;
      transform: rotate(2deg) scale(1.03);
      box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
      border-color: var(--brand-gold);
      z-index: 1000;
    }

    .service-item.add-blocked {
      opacity: 0.42;
      cursor: not-allowed;
      pointer-events: none;
    }

    .service-item.add-blocked.in-package {
      opacity: 0.88;
      pointer-events: none;
      cursor: default;
    }

    .package-dropzone.retainer-locked .dropzone-add-more {
      display: none !important;
    }

    .package-retainer-lock-hint {
      margin: 0 0 1rem;
      padding: 0.75rem 1rem;
      border-radius: 8px;
      border: 1px solid rgba(255, 178, 0, 0.35);
      background: rgba(255, 178, 0, 0.08);
      color: #fde68a;
      font-size: 0.875rem;
      line-height: 1.5;
    }

    .package-retainer-lock-hint.is-hidden {
      display: none;
    }

    .service-item-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.85rem;
      flex-shrink: 0;
    }

    .service-item-title,
    .service-info h4 {
      color: #f8fafc;
      font-family: 'Poppins', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
      line-height: 1.25;
      letter-spacing: -0.01em;
      flex: 1;
      min-height: 2.5em;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
    }

    .service-title-main {
      display: block;
      line-height: 1.2;
    }

    .service-title-duration {
      display: block;
      margin-top: 0.2rem;
      font-size: 0.86rem;
      font-weight: 600;
      color: rgba(248, 250, 252, 0.78);
      letter-spacing: 0.01em;
      line-height: 1.2;
    }

    .service-item-body {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
      min-height: 0;
      margin-bottom: 0.5rem;
    }

    .service-tagline {
      margin: 0;
      color: #fde68a;
      font-size: 0.84rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      line-height: 1.4;
    }

    .service-item[data-subcategory="white-label"] .service-tagline {
      margin: 0 0 0.15rem;
      color: rgba(148, 163, 184, 0.95);
      font-size: 0.86rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-transform: none;
      line-height: 1.45;
    }

    .service-features {
      list-style: none;
      margin: 0;
      padding: 0 0 0.15rem;
      display: grid;
      gap: 0.45rem;
      flex: 1 1 auto;
    }

    .service-features li {
      position: relative;
      padding-left: 0.95rem;
      color: rgba(226, 232, 240, 0.94);
      font-size: 0.9rem;
      line-height: 1.5;
    }

    .service-features li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.48em;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--brand-gold);
      opacity: 0.85;
    }

    .service-info p {
      display: none;
    }

    .service-price {
      color: var(--brand-gold);
      font-weight: 800;
      font-size: 1.08rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      width: 100%;
      margin-top: auto;
      flex-shrink: 0;
      padding: 0.9rem 0.35rem 0.15rem;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      letter-spacing: -0.01em;
      gap: 0.12rem;
    }

    .service-price .price-amount {
      display: block;
      line-height: 1.1;
    }

    .service-price .price-sub {
      display: block;
      font-size: 0.66rem;
      font-weight: 600;
      color: rgba(148, 163, 184, 0.92);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      line-height: 1.2;
    }

    .service-item--hourly {
      min-height: 320px;
    }

    .service-item--hourly .service-item-body {
      flex: 1 1 auto;
      margin-bottom: 0;
      min-height: 0;
      padding-bottom: 0.35rem;
    }

    .service-item--hourly .service-features {
      min-height: 3.25rem;
    }

    .service-item-footer {
      margin-top: auto;
      flex-shrink: 0;
      width: 100%;
    }

    .service-item-footer .service-hours-row {
      margin-top: 0;
      padding-top: 0.55rem;
    }

    .service-item-footer .service-price {
      margin-top: 0;
      border-top: none;
      padding: 0.55rem 0.35rem 0.1rem;
      align-items: center;
      text-align: center;
    }

    .service-hours-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.65rem;
      margin-top: 0.85rem;
      padding-top: 0.75rem;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .service-hours-label {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      flex-shrink: 0;
    }

    .service-hours-select {
      flex: 1;
      min-width: 0;
      max-width: 112px;
      margin-left: auto;
      padding: 0.3rem 1.55rem 0.3rem 0.5rem;
      font-family: inherit;
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--text-primary);
      background-color: rgba(15, 23, 42, 0.9);
      border: 1px solid rgba(255, 178, 0, 0.35);
      border-radius: 8px;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23FFB200' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.55rem center;
    }

    .service-hours-select:hover,
    .service-hours-select:focus {
      border-color: var(--brand-gold);
      outline: none;
      box-shadow: 0 0 0 2px rgba(255, 178, 0, 0.2);
    }

    .service-item--hourly .service-price .price-sub {
      display: block;
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--text-muted);
      margin-top: 0.2rem;
      letter-spacing: 0;
    }

    .service-icon {
      width: 46px;
      height: 46px;
      background: rgba(0, 0, 0, 0.38);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 1.15rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
      flex-shrink: 0;
      transition: var(--transition-fast);
    }

    .service-item[data-category="website"] .service-icon {
      background: linear-gradient(145deg, rgba(59, 130, 246, 0.45), rgba(29, 78, 216, 0.22));
      color: #bfdbfe;
      border-color: rgba(147, 197, 253, 0.35);
    }

    .service-item[data-category="photography"] .service-icon {
      background: linear-gradient(145deg, rgba(255, 178, 0, 0.42), rgba(217, 119, 6, 0.22));
      color: #fde68a;
      border-color: rgba(255, 178, 0, 0.4);
    }

    .service-item[data-category="videography"] .service-icon {
      background: linear-gradient(145deg, rgba(139, 92, 246, 0.42), rgba(109, 40, 217, 0.22));
      color: #ddd6fe;
      border-color: rgba(167, 139, 250, 0.38);
    }

    .service-item[data-category="branding"] .service-icon {
      background: linear-gradient(145deg, rgba(236, 72, 153, 0.38), rgba(190, 24, 93, 0.2));
      color: #fbcfe8;
      border-color: rgba(244, 114, 182, 0.35);
    }

    .service-item[data-category="printing"] .service-icon {
      background: linear-gradient(145deg, rgba(16, 185, 129, 0.38), rgba(5, 150, 105, 0.2));
      color: #a7f3d0;
      border-color: rgba(52, 211, 153, 0.35);
    }

    .service-item[data-category="retainer"] .service-icon {
      background: linear-gradient(145deg, rgba(245, 158, 11, 0.42), rgba(180, 83, 9, 0.22));
      color: #fde68a;
      border-color: rgba(251, 191, 36, 0.38);
    }

    .service-icon i {
      font-size: inherit;
      line-height: 1;
    }

    /* Package Builder Side */
    .package-builder {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: clamp(1.5rem, 2.5vw, 2rem);
      backdrop-filter: none;
      box-shadow: none;
      height: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
      position: static;
    }

    .builder-header {
      text-align: left;
      margin-bottom: 1.25rem;
      padding-bottom: 1.25rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .builder-header h3 {
      color: var(--text-primary);
      font-family: 'Poppins', sans-serif;
      font-size: clamp(1.25rem, 2vw, 1.5rem);
      font-weight: 800;
      margin: 0 0 0.35rem;
      letter-spacing: -0.02em;
      text-transform: none;
    }

    .builder-header p {
      color: var(--text-secondary);
      opacity: 0.85;
      font-size: 1rem;
      line-height: 1.55;
      margin: 0;
    }

    .package-dropzone {
      flex: 1 1 auto;
      min-height: 180px;
      border: 1.5px dashed rgba(99, 102, 241, 0.35);
      border-radius: 14px;
      padding: 1.75rem 1.25rem;
      text-align: center;
      transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
      background: rgba(99, 102, 241, 0.04);
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .package-dropzone.has-items {
      min-height: 0;
      padding: 1rem;
      text-align: left;
      background: rgba(99, 102, 241, 0.06);
    }

    .package-dropzone.drag-over {
      border-color: var(--brand-gold);
      background: rgba(255, 178, 0, 0.1);
      box-shadow:
        inset 0 0 0 1px rgba(255, 178, 0, 0.2),
        0 0 28px rgba(255, 178, 0, 0.12);
    }

    .dropzone-placeholder.is-hidden,
    .dropzone-add-more.is-hidden {
      display: none !important;
    }

    .dropzone-placeholder {
      color: var(--text-secondary);
      opacity: 0.85;
      font-size: 0.95rem;
      margin: 0;
      padding: 0.5rem 0;
    }

    .dropzone-placeholder p {
      margin: 0 0 0.35rem;
      color: var(--text-primary);
      font-weight: 600;
    }

    .dropzone-placeholder small {
      display: block;
      margin-top: 0.35rem;
      font-size: 0.8rem;
      opacity: 0.75;
      color: var(--text-muted);
    }

    .dropzone-icon {
      font-size: 2rem;
      color: var(--brand-gold);
      margin-bottom: 0.75rem;
      opacity: 0.75;
    }

    .dropzone-add-more {
      border: 1px dashed rgba(255, 178, 0, 0.28);
      border-radius: 10px;
      background: rgba(255, 178, 0, 0.05);
      padding: 0.65rem 0.85rem;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .package-dropzone.drag-over .dropzone-add-more {
      border-color: rgba(255, 178, 0, 0.55);
      background: rgba(255, 178, 0, 0.12);
    }

    .dropzone-add-more-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.65rem;
      color: var(--text-secondary);
      font-size: 0.82rem;
      line-height: 1.4;
      text-align: center;
    }

    .dropzone-add-more-inner i {
      color: var(--brand-gold);
      font-size: 0.95rem;
      flex-shrink: 0;
    }

    .package-dropzone.has-items:not(.drag-over) .dropzone-add-more-inner i {
      animation: dropzonePulse 2.8s ease-in-out infinite;
    }

    .dropzone-add-more-inner strong {
      color: #fde68a;
      font-weight: 700;
    }

    .builder-header-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
    }

    .package-count-badge {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.45rem 0.7rem;
      border-radius: 8px;
      background: rgba(2, 6, 23, 0.85);
      border: 1px solid rgba(255, 178, 0, 0.32);
      color: var(--brand-gold);
      font-family: 'Poppins', sans-serif;
      line-height: 1;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.2);
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    }

    .package-count-badge.is-pop {
      border-color: rgba(255, 178, 0, 0.55);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(255, 178, 0, 0.2),
        0 4px 14px rgba(255, 178, 0, 0.18);
    }

    .package-count-label {
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: rgba(226, 232, 240, 0.72);
    }

    .package-count-value {
      font-size: 1.05rem;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      color: var(--brand-gold);
      min-width: 1.1rem;
      text-align: center;
    }

    .selected-services {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
      margin: 0;
    }

    .selected-service {
      background: rgba(255, 178, 0, 0.06);
      border: 1px solid rgba(255, 178, 0, 0.18);
      border-radius: 12px;
      padding: 0.85rem 0.9rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }

    .selected-service.just-added {
      animation: packageItemIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes packageItemIn {
      from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes dropzonePulse {
      0%, 100% {
        opacity: 0.65;
        transform: scale(1);
      }
      50% {
        opacity: 1;
        transform: scale(1.08);
      }
    }

    .package-dropzone:not(.has-items) .dropzone-icon {
      animation: dropzonePulse 2.5s ease-in-out infinite;
    }

    .service-item.in-package {
      border-color: rgba(255, 178, 0, 0.38);
      background: rgba(255, 178, 0, 0.04);
    }

    .service-item.in-package::after {
      content: "In package";
      opacity: 1;
      color: rgba(255, 178, 0, 0.9);
    }

    @media (prefers-reduced-motion: reduce) {
      .selected-service.just-added,
      .package-dropzone:not(.has-items) .dropzone-icon,
      .package-dropzone.has-items .dropzone-add-more-inner i {
        animation: none;
      }

      .package-count-badge.is-pop {
        transform: none;
      }
    }

    .selected-service:hover {
      background: rgba(255, 178, 0, 0.1);
      border-color: rgba(255, 178, 0, 0.32);
    }

    .selected-service-info {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      min-width: 0;
    }

    .selected-service-icon {
      width: 36px;
      height: 36px;
      background: linear-gradient(145deg, rgba(255, 178, 0, 0.22), rgba(255, 178, 0, 0.08));
      border: 1px solid rgba(255, 178, 0, 0.28);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--brand-gold);
      font-size: 0.95rem;
      flex-shrink: 0;
    }

    .selected-service-details h5 {
      color: var(--text-primary);
      font-size: 0.88rem;
      font-weight: 700;
      margin: 0 0 0.15rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .selected-service-details p {
      color: var(--text-secondary);
      opacity: 0.7;
      font-size: 0.75rem;
      margin: 0;
    }

    .remove-service {
      background: rgba(255, 68, 68, 0.08);
      border: 1px solid rgba(255, 68, 68, 0.2);
      color: #ff6b6b;
      font-size: 0.85rem;
      cursor: pointer;
      padding: 0.45rem;
      border-radius: 8px;
      transition: background 0.2s ease, border-color 0.2s ease;
      flex-shrink: 0;
    }

    .remove-service:hover {
      background: rgba(255, 68, 68, 0.16);
      border-color: rgba(255, 68, 68, 0.35);
    }

    /* Quote Summary */
    .quote-summary {
      background: rgba(2, 6, 23, 0.55);
      border: 1px solid rgba(255, 178, 0, 0.22);
      border-radius: 14px;
      padding: 1.5rem;
      margin-top: 1.25rem;
      text-align: left;
      border-top: 3px solid var(--brand-gold);
      flex-shrink: 0;
    }

    .package-builder .quote-summary {
      margin-top: auto;
    }

    .quote-header {
      margin-bottom: 1rem;
    }

    .quote-header h4 {
      color: var(--text-primary);
      font-family: 'Poppins', sans-serif;
      font-size: 0.85rem;
      font-weight: 700;
      margin: 0;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      opacity: 0.85;
    }

    .quote-total {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(2rem, 4vw, 2.35rem);
      font-weight: 900;
      color: var(--brand-gold);
      margin-bottom: 0.85rem;
      letter-spacing: -0.03em;
      line-height: 1;
    }

    .quote-breakdown {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-bottom: 1.25rem;
      padding: 0.75rem 0;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .quote-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.45rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      font-size: 0.88rem;
    }

    .quote-item:last-child {
      border-bottom: none;
      font-weight: 700;
      font-size: 0.95rem;
      padding-top: 0.65rem;
    }

    .quote-item-label {
      color: var(--text-primary);
      opacity: 0.78;
    }

    .quote-item-value {
      color: var(--brand-gold);
      font-weight: 700;
    }

    .quote-actions {
      display: flex;
      gap: 0.65rem;
      justify-content: stretch;
      flex-wrap: wrap;
    }

    .btn-generate-invoice {
      flex: 1 1 180px;
      background: linear-gradient(135deg, var(--brand-gold), #ffd166);
      color: #0a0a0a;
      border: none;
      padding: 0.9rem 1.25rem;
      font-size: 0.88rem;
      font-weight: 800;
      border-radius: 10px;
      cursor: pointer;
      transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      box-shadow: 0 6px 20px rgba(255, 178, 0, 0.25);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .btn-generate-invoice:hover {
      transform: translateY(-2px);
      filter: brightness(1.04);
      box-shadow: 0 10px 28px rgba(255, 178, 0, 0.32);
    }

    .btn-clear-package {
      flex: 0 0 auto;
      background: transparent;
      color: var(--text-secondary);
      border: 1px solid rgba(255, 255, 255, 0.12);
      padding: 0.9rem 1.1rem;
      font-size: 0.82rem;
      font-weight: 600;
      border-radius: 10px;
      cursor: pointer;
      transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }

    .btn-clear-package:hover {
      border-color: rgba(255, 68, 68, 0.35);
      color: #ff8a8a;
      background: rgba(255, 68, 68, 0.06);
    }

    /* Modal Styles */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.8);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      backdrop-filter: blur(10px);
    }

    .modal-overlay.active {
      display: flex;
    }

    .modal-content {
      background: var(--card-bg);
      border: var(--card-border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      max-width: 90%;
      max-height: 80%;
      overflow-y: auto;
      position: relative;
      backdrop-filter: var(--backdrop);
      box-shadow: var(--shadow-lg);
    }

    .modal-close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 2rem;
      cursor: pointer;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: var(--transition);
    }

    .modal-close:hover {
      background: rgba(255,255,255,0.1);
      color: var(--text-primary);
    }

    .modal-header {
      text-align: center;
      margin-bottom: 2rem;
    }

    .modal-icon {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, var(--brand-gold), #ffd166);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0a0a0a;
      font-size: 2rem;
      margin: 0 auto 1rem;
      box-shadow: var(--glow-gold);
    }

    .modal-header h2 {
      color: var(--text-primary);
      font-size: 1.8rem;
      font-weight: 700;
      margin: 0 0 0.5rem 0;
    }

    .modal-header p {
      color: var(--text-secondary);
      font-size: 1rem;
      margin: 0;
    }

    /* Invoice Details */
    .invoice-details {
      margin: 2rem 0;
    }

    .invoice-header {
      text-align: center;
      margin-bottom: 2rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .invoice-header h3 {
      color: var(--text-primary);
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }

    .invoice-header p {
      color: var(--text-secondary);
      opacity: 0.7;
      font-size: 1rem;
    }

    .invoice-items {
      margin-bottom: 2rem;
    }

    .invoice-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
      margin-bottom: 0.5rem;
      background: rgba(255,255,255,0.05);
      border-radius: var(--radius-sm);
      border: 1px solid rgba(255,255,255,0.1);
    }

    .item-details h4 {
      color: var(--text-primary);
      font-size: 1rem;
      font-weight: 600;
      margin: 0 0 0.2rem 0;
    }

    .item-details p {
      color: var(--text-secondary);
      font-size: 0.9rem;
      margin: 0;
    }

    .item-price {
      color: var(--brand-gold);
      font-weight: 700;
      font-size: 1.1rem;
    }

    .invoice-total {
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 1rem;
    }

    .total-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 0;
      font-size: 1rem;
    }

    .total-line.total {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--brand-gold);
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 1rem;
      margin-top: 0.5rem;
    }

    /* Contact Form */
    .contact-form-section {
      margin: 2rem 0;
      padding: 2rem 0;
      border-top: 1px solid rgba(255,255,255,0.1);
    }

    .contact-form-section .contact-form {
      max-width: 600px;
      margin: 0 auto;
      background: var(--card-bg);
      border: var(--card-border);
      border-radius: var(--radius-lg);
      padding: 40px;
      backdrop-filter: var(--backdrop);
      box-shadow: var(--shadow-md);
    }

    .contact-form-section h3 {
      color: var(--text-primary);
      font-size: 1.3rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }

    .contact-form-section p {
      color: var(--text-secondary);
      font-size: 1rem;
      margin-bottom: 1.5rem;
    }

    .form-group {
      margin-bottom: 1.5rem;
    }

    .form-group label {
      display: block;
      color: var(--text-primary);
      font-weight: 600;
      margin-bottom: 0.5rem;
      font-size: 0.9rem;
    }

    .form-group input,
    .form-group textarea {
      width: 100%;
      padding: 0.75rem;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: var(--radius-sm);
      color: var(--text-primary);
      font-size: 1rem;
      transition: var(--transition);
      box-sizing: border-box;
    }

    .form-group input:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: var(--brand-gold);
      box-shadow: 0 0 0 3px rgba(255,178,0,0.1);
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder {
      color: var(--text-secondary);
      opacity: 0.6;
    }

    /* Form Actions */
    .form-actions {
      display: flex;
      gap: 1rem;
      justify-content: center;
      margin-top: 2rem;
      flex-wrap: wrap;
    }

    .btn-primary,
    .btn-secondary {
      padding: 0.75rem 1.5rem;
      border-radius: var(--radius-sm);
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: var(--transition);
      border: none;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      text-decoration: none;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--brand-gold), #ffd166);
      color: #0a0a0a;
      box-shadow: var(--glow-gold);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      filter: brightness(1.05);
    }

    .btn-secondary {
      background: transparent;
      color: var(--text-secondary);
      border: 2px solid rgba(255,255,255,0.3);
    }

    .btn-secondary:hover {
      border-color: var(--brand-gold);
      color: var(--brand-gold);
      transform: translateY(-2px);
    }

    /* Success Modal */
    .success-modal-header {
      text-align: center;
      margin-bottom: 2rem;
    }

    .success-icon {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #10b981, #059669);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 2.5rem;
      margin: 0 auto 1rem;
      box-shadow: 0 0 30px rgba(16, 185, 129, 0.3);
    }

    .success-modal-body {
      margin-bottom: 2rem;
    }

    .success-details {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .success-detail-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      background: rgba(16, 185, 129, 0.1);
      border-radius: var(--radius-sm);
      border: 1px solid rgba(16, 185, 129, 0.2);
    }

    .success-detail-item i {
      color: #10b981;
      font-size: 1.2rem;
      width: 20px;
      text-align: center;
    }

    .success-detail-item span {
      color: var(--text-primary);
      font-weight: 500;
    }

    .success-modal-actions {
      text-align: center;
    }

    .success-btn {
      background: linear-gradient(135deg, #10b981, #059669) !important;
      color: white !important;
      box-shadow: 0 0 30px rgba(16, 185, 129, 0.3) !important;
    }

    .success-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 40px rgba(16, 185, 129, 0.4) !important;
    }

    /* Notification System */
    .notification {
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 1rem 1.5rem;
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-lg);
      z-index: 10001;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      max-width: 300px;
      backdrop-filter: blur(10px);
    }

    .notification-content {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      color: white;
      font-weight: 500;
    }

    .notification-content i {
      font-size: 1.2rem;
    }

    .notification-success {
      background: linear-gradient(135deg, #10b981, #059669);
      border: 1px solid rgba(16, 185, 129, 0.3);
    }

    .notification-error {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      border: 1px solid rgba(239, 68, 68, 0.3);
    }

    .notification-info {
      background: linear-gradient(135deg, #6366f1, #4f46e5);
      border: 1px solid rgba(99, 102, 241, 0.3);
    }

    /* Platform Notice Modal */
    .cf-notice-overlay {
      position: fixed;
      inset: 0;
      z-index: 100002;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(2, 6, 23, 0.82);
      backdrop-filter: blur(12px);
    }

    .cf-notice-overlay.active {
      display: flex;
    }

    .cf-notice-panel {
      width: min(92vw, 520px);
      max-height: 90vh;
      overflow-y: auto;
      border-radius: 22px;
      border: 1px solid rgba(255, 178, 0, 0.32);
      background:
        linear-gradient(160deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), var(--glow-gold);
      animation: cfNoticePop 320ms cubic-bezier(.2, .8, .2, 1) forwards;
      transform: translateY(16px);
      opacity: 0;
    }

    @keyframes cfNoticePop {
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .cf-notice-head {
      padding: 28px 28px 0;
      text-align: center;
    }

    .cf-notice-icon {
      width: 72px;
      height: 72px;
      margin: 0 auto 16px;
      border-radius: 20px;
      display: grid;
      place-items: center;
      font-size: 30px;
      color: #0a0a0a;
      background: linear-gradient(135deg, var(--brand-gold), #ffd166);
      box-shadow: var(--glow-gold);
    }

    .cf-notice-icon.success {
      background: linear-gradient(135deg, #10b981, #059669);
      box-shadow: 0 0 30px rgba(16, 185, 129, 0.35);
      color: #fff;
    }

    .cf-notice-head h2 {
      margin: 0 0 10px;
      font-family: 'Poppins', sans-serif;
      font-size: clamp(22px, 4vw, 28px);
      font-weight: 800;
      line-height: 1.2;
      background: linear-gradient(135deg, #fff, #fde68a 85%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .cf-notice-head p {
      margin: 0;
      color: var(--text-secondary);
      font-size: 15px;
      line-height: 1.6;
    }

    .cf-notice-body {
      padding: 22px 28px;
    }

    .cf-notice-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 10px;
    }

    .cf-notice-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(99, 102, 241, 0.18);
      background: rgba(15, 23, 42, 0.55);
      color: var(--text-primary);
      font-size: 14px;
      line-height: 1.5;
    }

    .cf-notice-list li i {
      color: var(--brand-gold);
      margin-top: 2px;
      flex-shrink: 0;
    }

    .cf-notice-followup {
      margin-top: 16px;
      padding: 14px 16px;
      border-radius: 14px;
      border: 1px solid rgba(255, 178, 0, 0.22);
      background: rgba(255, 178, 0, 0.08);
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.6;
    }

    .cf-notice-followup strong {
      display: block;
      color: #fde68a;
      margin-bottom: 8px;
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .cf-notice-actions {
      padding: 0 28px 28px;
      display: flex;
      justify-content: center;
    }

    .cf-notice-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 0;
      border-radius: 14px;
      padding: 14px 22px;
      font-weight: 800;
      font-size: 15px;
      cursor: pointer;
      color: #0a0a0a;
      background: linear-gradient(135deg, var(--brand-gold), #ffd166);
      box-shadow: var(--glow-gold);
      transition: var(--transition-fast);
    }

    .cf-notice-btn:hover {
      transform: translateY(-2px);
      filter: brightness(1.05);
    }

    .cf-notice-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(15, 23, 42, 0.7);
      color: var(--text-secondary);
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: var(--transition-fast);
    }

    .cf-notice-close:hover {
      color: #fff;
      border-color: rgba(255, 178, 0, 0.4);
    }

    .cf-notice-wrap {
      position: relative;
    }

    /* Responsive Design */
    @media (max-width: 1100px) {
      .service-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: min(52vh, 560px);
      }

      .service-catalog {
        max-height: min(calc(100vh - 8rem), 820px);
        border-right: none;
        border-bottom: 1px solid rgba(99, 102, 241, 0.18);
      }

      .service-builder-grid {
        grid-template-columns: 1fr;
      }

      .package-builder {
        position: static;
        top: auto;
      }
    }

    @media (max-width: 768px) {
      .service-builder-section {
        padding: 32px 12px;
        margin-bottom: 0;
      }

      .service-builder-grid {
        grid-template-columns: 1fr;
        gap: 0;
        align-items: stretch;
        border-radius: 18px;
      }

      .package-builder,
      .service-catalog {
        padding: 16px 14px;
        border-radius: 0;
        height: auto;
        max-height: none;
      }

      .service-catalog {
        overflow: visible;
        border-right: none;
        border-bottom: 1px solid rgba(99, 102, 241, 0.18);
      }

      .package-dropzone {
        padding: 20px 14px;
        min-height: 120px;
        flex: 0 1 auto;
      }

      .package-builder {
        position: static;
        top: auto;
      }

      .package-builder .quote-summary {
        margin-top: 1rem;
      }

      /* Keep horizontal scroll category tabs — do not force 2-col grid on mobile */

      .category-tab {
        min-height: 44px;
        font-size: 0.78rem;
        padding: 10px 14px;
      }
      
      .service-items {
        display: flex;
        flex-direction: column;
        gap: 12px;
        grid-template-columns: none;
        max-height: none;
        overflow-y: visible;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0 2px 12px 0;
      }

      .service-item {
        min-height: 0;
        width: 100%;
        flex-shrink: 0;
        padding: 16px 14px;
      }

      .service-item[data-subcategory="white-label"] {
        min-height: 0;
        row-gap: 0.75rem;
      }

      .service-item-header {
        align-items: flex-start;
        gap: 12px;
      }

      .service-icon {
        flex-shrink: 0;
      }

      .service-info h4 {
        font-size: 1rem;
        min-height: 0;
        line-height: 1.25;
      }

      .service-info p {
        font-size: 0.86rem;
        line-height: 1.5;
        margin: 6px 0 0;
        color: rgba(203, 213, 225, 0.92);
      }

      .service-price {
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 1.12rem;
        font-weight: 800;
      }

      .service-section-header {
        width: 100%;
        margin: 14px 0 4px;
        flex-shrink: 0;
      }

      .service-section-header:first-child {
        margin-top: 0;
      }

      .service-hours-row {
        flex-wrap: wrap;
        gap: 8px;
      }

      .service-hours-select {
        min-height: 44px;
        font-size: 16px;
      }
      
      .quote-actions {
        flex-direction: column;
        gap: 10px;
      }
      
      .btn-generate-invoice,
      .btn-clear-package {
        width: 100%;
        min-height: 48px;
      }

      .btn-clear-package {
        justify-content: center;
      }
      
      .form-actions {
        flex-direction: column;
        gap: 10px;
      }
      
      .btn-primary,
      .btn-secondary {
        width: 100%;
        justify-content: center;
        min-height: 48px;
      }

      .success-modal-actions .btn-primary {
        width: 100%;
      }
    }
/* Checkout page — thank-you + final payment */
.checkout-page {
  position: relative;
  min-height: calc(100vh - 120px);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem) clamp(3rem, 6vw, 5rem);
  isolation: isolate;
}

.checkout-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 380px at 15% 0%, rgba(99, 102, 241, 0.12), transparent 58%),
    radial-gradient(700px 340px at 85% 8%, rgba(255, 178, 0, 0.1), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.checkout-shell {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}

.checkout-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(155deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.92)),
    radial-gradient(circle at 100% 0%, rgba(255, 178, 0, 0.08), transparent 50%);
  border: 1px solid rgba(255, 178, 0, 0.22);
  border-radius: 24px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.checkout-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-gold), rgba(99, 102, 241, 0.85), var(--brand-gold));
  opacity: 0.85;
}

.checkout-success-badge {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.checkout-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(16, 185, 129, 0.12));
  border: 2px solid rgba(74, 222, 128, 0.45);
  color: #4ade80;
  font-size: 1.75rem;
  box-shadow:
    0 0 0 8px rgba(34, 197, 94, 0.08),
    0 12px 32px rgba(34, 197, 94, 0.15);
}

.checkout-success-badge--muted .checkout-success-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(15, 23, 42, 0.4));
  border-color: rgba(99, 102, 241, 0.35);
  color: #93c5fd;
  box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.06);
}

.checkout-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}

.checkout-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 140px;
  position: relative;
  text-align: center;
}

.checkout-progress-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;
  left: calc(50% + 18px);
  width: calc(100% - 36px);
  height: 2px;
  background: rgba(148, 163, 184, 0.2);
  z-index: 0;
}

.checkout-progress-step.is-complete:not(:last-child)::after {
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.55), rgba(74, 222, 128, 0.25));
}

.checkout-progress-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  border: 2px solid rgba(148, 163, 184, 0.3);
  background: rgba(15, 23, 42, 0.9);
  color: #94a3b8;
}

.checkout-progress-step.is-complete .checkout-progress-dot {
  border-color: rgba(74, 222, 128, 0.5);
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  font-size: 0.7rem;
}

.checkout-progress-step.is-current .checkout-progress-dot {
  border-color: rgba(255, 178, 0, 0.55);
  background: linear-gradient(135deg, rgba(255, 178, 0, 0.25), rgba(255, 178, 0, 0.1));
  color: var(--brand-gold);
  box-shadow: 0 0 20px rgba(255, 178, 0, 0.2);
}

.checkout-progress-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  line-height: 1.3;
}

.checkout-progress-step.is-complete .checkout-progress-label {
  color: #86efac;
}

.checkout-progress-step.is-current .checkout-progress-label {
  color: #fde68a;
}

.checkout-header {
  text-align: center;
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(99, 102, 241, 0.18);
}

.checkout-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(74, 222, 128, 0.35);
  background: rgba(34, 197, 94, 0.1);
  color: #86efac;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.checkout-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.65rem, 4.5vw, 2.35rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  background: linear-gradient(135deg, #fff 0%, #dbeafe 48%, #fde68a 95%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.checkout-lede {
  margin: 0 auto;
  max-width: 54ch;
  color: var(--text-secondary);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.7;
}

.checkout-customer {
  margin: 14px 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.95);
  letter-spacing: 0.02em;
}

.checkout-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-gold);
}

.checkout-section-label i {
  font-size: 0.85rem;
  opacity: 0.9;
}

.checkout-package {
  margin-bottom: 1.5rem;
}

.checkout-summary {
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-radius: 16px;
  padding: 1.25rem 1.35rem;
}

.checkout-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 0.98rem;
}

.checkout-line:last-of-type {
  border-bottom: none;
}

.checkout-line-name {
  color: #e2e8f0;
  flex: 1;
  line-height: 1.45;
}

.checkout-line-price {
  color: var(--brand-gold);
  font-weight: 800;
  white-space: nowrap;
}

.checkout-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 178, 0, 0.28);
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: #f8fafc;
}

.checkout-total-row span:last-child {
  color: var(--brand-gold);
  font-size: 1.35rem;
}

.checkout-details {
  margin-bottom: 1.75rem;
}

.checkout-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.checkout-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  background: rgba(15, 23, 42, 0.55);
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.45;
}

.checkout-meta-item strong {
  color: #f1f5f9;
  font-weight: 700;
}

.checkout-meta-item i {
  color: var(--brand-gold);
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.checkout-meta-item--warn {
  grid-column: 1 / -1;
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(255, 178, 0, 0.08);
}

.checkout-meta-item--warn i {
  color: #fbbf24;
}

.checkout-payment-panel {
  margin-bottom: 1.75rem;
  padding: clamp(1.35rem, 3vw, 1.75rem);
  border-radius: 18px;
  border: 1px solid rgba(255, 178, 0, 0.28);
  background:
    linear-gradient(155deg, rgba(255, 178, 0, 0.08), rgba(15, 23, 42, 0.65)),
    radial-gradient(circle at 0% 0%, rgba(255, 178, 0, 0.12), transparent 55%);
}

.checkout-payment-panel-head {
  text-align: center;
  margin-bottom: 1.25rem;
}

.checkout-payment-step {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 178, 0, 0.12);
  border: 1px solid rgba(255, 178, 0, 0.35);
  color: var(--brand-gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.checkout-payment-panel-head h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  font-weight: 800;
  margin: 0 0 10px;
  color: #fff;
}

.checkout-payment-note {
  margin: 0 auto;
  max-width: 48ch;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.65;
}

.checkout-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}

.checkout-actions .btn-primary,
.checkout-actions .btn-secondary {
  width: 100%;
  justify-content: center;
  min-height: 54px;
  font-size: 1rem;
  font-weight: 800;
  border-radius: 14px;
}

.checkout-pay-btn {
  background: linear-gradient(135deg, var(--brand-gold), #ffd166) !important;
  color: #0a0a0a !important;
  box-shadow: 0 8px 28px rgba(255, 178, 0, 0.28);
}

.checkout-pay-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 36px rgba(255, 178, 0, 0.35);
}

.checkout-back-link {
  opacity: 0.85;
}

.checkout-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.checkout-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.95);
}

.checkout-trust li i {
  color: var(--brand-gold);
  font-size: 0.82rem;
}

.checkout-next-steps {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(99, 102, 241, 0.18);
}

.checkout-next-list {
  margin: 0;
  padding: 0 0 0 1.1rem;
  display: grid;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.6;
}

.checkout-next-list li {
  padding-left: 0.25rem;
}

.checkout-next-list strong {
  color: #f1f5f9;
  font-weight: 700;
}

.checkout-empty {
  text-align: center;
  padding: clamp(2rem, 5vw, 3rem) 1rem;
}

.checkout-empty .checkout-title {
  -webkit-text-fill-color: #fff;
  color: #fff;
}

.checkout-empty .checkout-lede {
  margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
  .checkout-progress {
    gap: 4px;
  }

  .checkout-progress-step {
    max-width: none;
  }

  .checkout-progress-label {
    font-size: 0.62rem;
  }

  .checkout-meta {
    grid-template-columns: 1fr;
  }

  .checkout-success-icon {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
  }
}

/* Page opening hero — below nav, above main content */
.page-opening-hero {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-bottom: 0;
  padding-bottom: 0;
  display: flow-root;
}

.hero-banner--page .hero-title {
  font-size: clamp(28px, 5vw, 52px);
}

.page-opening-hero .hero-banner,
.hero-banner--page {
  min-height: var(--hero-banner-height);
  margin-bottom: 0;
}

@media (min-width: 769px) {
  .page-opening-hero .hero-banner,
  .hero-banner--page {
    height: var(--hero-banner-height);
    max-height: var(--hero-banner-height);
  }
}

.page-opening-hero .marquee-logos {
  margin-top: 0;
  margin-bottom: 0;
  contain-intrinsic-size: auto;
}

/* Flush page content directly under logo marquee (home keeps in-hero marquee spacing) */
.page-opening-hero + .wrapper > :first-child,
.page-opening-hero + .book-section,
.page-opening-hero + main.legal-page,
.page-opening-hero + main.checkout-page {
  margin-top: 0;
}

.page-opening-hero + .wrapper > .services-showcase-section,
.page-opening-hero + .wrapper > .service-builder-section,
.page-opening-hero + .wrapper > .section {
  margin-top: 0;
}

.page-opening-hero + main.legal-page,
.page-opening-hero + main.checkout-page {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: 0;
}

.page-opening-hero + .resume-subnav {
  margin-top: 0;
}

/* SPB onboarding guide — below logo marquee on /pricing */
.spb-guide-banner {
  position: relative;
  z-index: 2;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 48px);
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid rgba(99, 102, 241, 0.22);
  border-bottom: 1px solid rgba(255, 178, 0, 0.18);
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(99, 102, 241, 0.18), transparent 58%),
    radial-gradient(760px 380px at 90% 12%, rgba(255, 178, 0, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.98) 0%, rgba(15, 23, 42, 0.95) 48%, rgba(2, 6, 23, 0.98) 100%);
}

.spb-guide-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 90%);
  pointer-events: none;
}

.spb-guide-banner-inner {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  gap: clamp(28px, 4vw, 40px);
}

.spb-guide-banner-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.spb-guide-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 178, 0, 0.32);
  background: rgba(255, 178, 0, 0.08);
  color: var(--brand-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.spb-guide-banner-head h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(28px, 4.5vw, 42px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  background: linear-gradient(135deg, #fff 0%, #dbeafe 45%, #fde68a 92%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.spb-guide-lede {
  margin: 0;
  color: var(--text-secondary);
  font-size: clamp(16px, 2.1vw, 18px);
  line-height: 1.7;
}

.spb-guide-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
}

.spb-guide-step {
  position: relative;
  padding: clamp(22px, 3vw, 28px);
  border-radius: 20px;
  border: 1px solid rgba(99, 102, 241, 0.26);
  background:
    linear-gradient(155deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.88)),
    radial-gradient(circle at 100% 0%, rgba(255, 178, 0, 0.08), transparent 55%);
  box-shadow: var(--shadow-md);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.spb-guide-step:hover {
  border-color: rgba(255, 178, 0, 0.35);
  transform: translateY(-2px);
}

.spb-guide-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 178, 0, 0.22), rgba(99, 102, 241, 0.18));
  border: 1px solid rgba(255, 178, 0, 0.28);
  color: var(--brand-gold);
  font-size: 1.1rem;
}

.spb-guide-step-num {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 178, 0, 0.12);
  border: 1px solid rgba(255, 178, 0, 0.35);
  color: var(--brand-gold);
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.spb-guide-step h3 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: 800;
  margin: 0 0 10px;
  color: #f8fafc;
  line-height: 1.25;
}

.spb-guide-step p {
  margin: 0;
  color: rgba(203, 213, 225, 0.92);
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.65;
}

.spb-guide-step p strong {
  color: #fde68a;
  font-weight: 700;
}

.spb-guide-highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.spb-guide-highlights li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(99, 102, 241, 0.28);
  background: rgba(15, 23, 42, 0.65);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.spb-guide-highlights li i {
  color: var(--brand-gold);
  font-size: 0.9rem;
}

.spb-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.spb-guide-actions .hero-cta,
.spb-guide-actions .hero-banner-btn-secondary {
  min-width: min(100%, 240px);
  justify-content: center;
}

.page-opening-hero + .spb-guide-banner {
  margin-top: 0;
}

.spb-guide-banner + .wrapper > .service-builder-section {
  margin-top: 0;
  padding-top: clamp(32px, 4vw, 48px);
}

@media (max-width: 900px) {
  .spb-guide-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .spb-guide-banner {
    padding: 32px 16px;
    width: var(--mobile-bleed-width, 100%);
    max-width: 100vw;
    margin-left: var(--mobile-bleed, 0);
    margin-right: var(--mobile-bleed, 0);
    box-sizing: border-box;
  }

  .spb-guide-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .spb-guide-highlights {
    flex-direction: column;
    align-items: stretch;
  }

  .spb-guide-highlights li {
    justify-content: center;
  }

  .page-opening-hero {
    width: 100%;
    overflow-x: clip;
  }

  .page-opening-hero .marquee-logos {
    width: var(--mobile-bleed-width, 100%);
    max-width: 100vw;
    margin-left: var(--mobile-bleed, 0);
    margin-right: var(--mobile-bleed, 0);
  }

  .service-builder-inner {
    width: 100%;
    min-width: 0;
  }

  .catalog-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
  }

  .catalog-search-wrap {
    margin-top: 12px;
  }

  .catalog-search {
    font-size: 16px;
    min-height: 46px;
  }

  .package-builder {
    border-top: 1px solid rgba(99, 102, 241, 0.22);
  }

  .quote-actions .btn-generate-invoice {
    min-height: 50px;
    font-size: 0.95rem;
  }
}

/* Opening hero replaces duplicate in-page headers */
body.page-pricing .service-builder-section .spb-hero {
  display: none;
}
body.page-portfolio .lp-portfolio-hero {
  display: none;
}

/* Privacy policy — professional layout */
.legal-page {
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem) 0;
}
.legal-shell {
  max-width: 1100px;
  margin: 0 auto;
}
.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}
.legal-toc {
  position: sticky;
  top: calc(var(--nav-height) + 20px);
}
.legal-toc nav {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.88));
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: 16px;
  padding: 1.25rem 1rem;
}
.legal-toc-title {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-gold);
}
.legal-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.legal-toc a {
  display: block;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}
.legal-toc a:hover {
  background: rgba(99, 102, 241, 0.14);
  color: #fff;
}
.legal-card {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.9));
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: 20px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.legal-card-head {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.legal-updated {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted, #94a3b8);
  font-size: 0.88rem;
  margin: 0 0 1rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.22);
}
.legal-intro {
  color: #e2e8f0;
  line-height: 1.7;
  font-size: 1.05rem;
  margin: 0;
}
.legal-section {
  margin-bottom: 1.75rem;
  padding: 1.25rem 1.25rem 1.1rem;
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.38);
  border: 1px solid rgba(148, 163, 184, 0.12);
  scroll-margin-top: calc(var(--nav-height) + 24px);
}
.legal-section-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.legal-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 178, 0, 0.12);
  border: 1px solid rgba(255, 178, 0, 0.28);
  color: var(--brand-gold);
  flex-shrink: 0;
}
.legal-section h2 {
  font-size: 1.1rem;
  margin: 0;
  color: #fff;
  font-weight: 800;
}
.legal-section p, .legal-section li {
  color: #cbd5e1;
  line-height: 1.65;
  font-size: 0.95rem;
}
.legal-section ul {
  padding-left: 1.25rem;
  margin: 0.5rem 0 0;
}
.legal-section a { color: #93c5fd; }
.legal-contact-card {
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(255, 178, 0, 0.08));
  border: 1px solid rgba(99, 102, 241, 0.32);
  text-align: center;
}
.legal-contact-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  color: #fff;
}
.legal-contact-card p {
  margin: 0 0 1rem;
  color: #cbd5e1;
  font-size: 0.95rem;
}
.legal-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.legal-contact-actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.legal-contact-actions .legal-btn-primary {
  background: linear-gradient(135deg, var(--brand-gold), #ffd166);
  color: #0a0a0a;
}
.legal-contact-actions .legal-btn-secondary {
  border: 1px solid rgba(255, 178, 0, 0.34);
  color: #fde68a;
  background: rgba(15, 23, 42, 0.72);
}
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .legal-toc nav { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
  .legal-toc-title { width: 100%; margin-bottom: 0.35rem; }
  .legal-toc ul { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .legal-toc a { padding: 0.35rem 0.6rem; font-size: 0.8rem; }
}

/* Resume page — standard site nav + section sub-menu */
body.resume-page .nav-container {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: unset;
  gap: 0;
  height: var(--nav-height);
  padding: 0 20px;
}

body.resume-page .nav-logo {
  position: absolute;
  left: 20px;
}

body.resume-page .nav-menu {
  justify-content: center;
  flex-wrap: nowrap;
}

body.resume-page .mobile-menu-toggle {
  position: absolute;
  right: 20px;
}

body.resume-page .resume-hero,
body.resume-page section[id] {
  scroll-margin-top: calc(var(--nav-height) + 58px);
}

@media (max-width: 768px) {
  body.resume-page .nav-logo {
    left: var(--mobile-gutter);
  }

  body.resume-page .mobile-menu-toggle {
    right: var(--mobile-gutter);
  }

  body.resume-page .resume-subnav {
    top: calc(var(--nav-height) + max(10px, env(safe-area-inset-top, 0px)));
  }
}

/* Service Package Builder — site-wide CTAs */
.spb-cta-band {
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw) 0;
  padding: clamp(40px, 6vw, 64px) clamp(20px, 4vw, 48px);
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid rgba(255, 178, 0, 0.22);
  border-bottom: none;
  background:
    radial-gradient(920px 420px at 6% 0%, rgba(255, 178, 0, 0.14), transparent 58%),
    radial-gradient(780px 380px at 94% 20%, rgba(99, 102, 241, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.98) 0%, rgba(15, 23, 42, 0.94) 50%, rgba(2, 6, 23, 0.98) 100%);
}

.spb-cta-band-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(24px, 4vw, 32px);
}

.spb-cta-band-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.spb-cta-band-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 12px;
  color: var(--brand-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.spb-cta-band-copy h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(26px, 4.5vw, 40px);
  line-height: 1.1;
  margin: 0 0 12px;
  color: #fff;
}

.spb-cta-band-copy > p {
  margin: 0 auto 18px;
  color: var(--text-secondary);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.65;
  max-width: 56ch;
}

.spb-cta-band-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.spb-cta-band-steps li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(99, 102, 241, 0.28);
  background: rgba(15, 23, 42, 0.55);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
}

.spb-cta-band-steps li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 178, 0, 0.15);
  color: var(--brand-gold);
  font-size: 11px;
  font-weight: 800;
}

.spb-cta-band-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: 100%;
  max-width: 360px;
}

.spb-cta-band-actions .hero-cta,
.spb-cta-band-actions .hero-banner-btn-secondary {
  justify-content: center;
  width: 100%;
}

.spb-cta-inline {
  margin-top: clamp(28px, 4vw, 40px);
  padding: clamp(24px, 4vw, 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 20px;
  border: 1px solid rgba(255, 178, 0, 0.24);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.92)),
    radial-gradient(circle at 50% 0%, rgba(255, 178, 0, 0.1), transparent 55%);
}

#about > .spb-cta-inline:last-child {
  margin-bottom: clamp(32px, 5vw, 56px);
}

.spb-cta-inline h3 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(22px, 3.5vw, 30px);
  margin: 0 0 10px;
}

.spb-cta-inline p {
  margin: 0 auto 18px;
  max-width: 52ch;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
}

.spb-cta-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.footer-spb-cta {
  margin-top: 18px;
  margin-bottom: 4px;
  width: fit-content;
  font-size: 14px;
  padding: 12px 18px;
}

.spb-cta-floating {
  position: fixed;
  right: clamp(14px, 3vw, 22px);
  bottom: clamp(14px, 3vw, 22px);
  z-index: 997;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  pointer-events: none;
}

.spb-cta-floating.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.spb-cta-floating-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-gold), #ffd166);
  color: #0a0a0a;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 14px 36px rgba(255, 178, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.spb-cta-floating-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.spb-cta-floating-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.92);
  color: #cbd5e1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.spb-cta-floating-dismiss:hover {
  border-color: rgba(255, 178, 0, 0.45);
  color: #fff;
}

body.nav-open .spb-cta-floating {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Flush last content blocks against footer / CTA band */
.wrapper > *:last-child,
.book-section,
.legal-page,
.checkout-page,
main.page > *:last-child {
  margin-bottom: 0;
}

.wrapper > .section:last-child,
#about.section:last-child {
  padding-bottom: 0;
}

.spb-cta-band + footer.footer {
  margin-top: 0;
}

body.resume-page main.page {
  padding-bottom: 0;
}

body.resume-page .seo-context-card {
  margin-bottom: 0;
}

body.resume-page > footer.footer {
  margin-top: 0;
  border-radius: 0;
  display: block;
  box-shadow: none;
}

@media (max-width: 768px) {
  .spb-cta-floating-link span {
    display: none;
  }

  .spb-cta-floating-link {
    padding: 14px 16px;
  }

  .footer-spb-cta {
    width: 100%;
    justify-content: center;
  }
}