/* ==== inline ==== */
:root {
    --ocean-deep:    #030d1a;
    --ocean-mid:     #061f3a;
    --ocean-blue:    #0a3560;
    --ocean-bright:  #0e5499;
    --foam-teal:     #00b4d8;
    --foam-light:    #90e0ef;
    --foam-white:    #caf0f8;
    --sand:          #e8d5b7;
    --white:         #ffffff;
    --text-muted:    #8eb8c8;
    --card-bg:       rgba(6,31,58,0.85);
    --border:        rgba(0,180,216,0.25);
    --gold:          #c9a84c;
  }

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

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
  }

  body {
    font-family: 'Montserrat', sans-serif;
    background: var(--ocean-deep);
    color: var(--white);
    overflow-x: hidden;
  }

  /* ── NOISE TEXTURE OVERLAY ── */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
  }

  /* ── WAVES ── */
  .wave-divider {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-top: -2px;
  }
  .wave-divider svg { display: block; width: 100%; }

  /* ── NAV ── */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 18px clamp(28px, 3vw, 58px);
    background: rgba(3,13,26,0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
  }

  .nav-logo {
    position: absolute;
    left: clamp(28px, 3vw, 58px);
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    text-decoration: none;
  }
  nav .nav-logo img {
    height: 66px !important;
  }
  footer .nav-logo {
    position: absolute;
    left: calc(260px + (100% - 260px - 412px) / 2);
    top: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: min(26vw, 320px);
    height: min(26vw, 320px);
    z-index: 1;
    will-change: transform;
  }
  footer .nav-logo img {
    height: auto !important;
    width: 100%;
    max-width: none;
    max-height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 0 32px rgba(0, 180, 216, 0.55)) drop-shadow(0 0 64px rgba(0, 180, 216, 0.25));
    will-change: filter;
    transform: translateZ(0);
  }

  .logo-icon {
    width: 44px;
    height: 44px;
    background: transparent;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    color: var(--white);
    letter-spacing: 1px;
  }

  .logo-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    letter-spacing: 3px;
    color: var(--white);
  }
  .logo-text span { color: var(--foam-teal); }

  .nav-links {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(14px, 1vw, 24px);
    list-style: none;
    max-width: min(1420px, calc(100vw - 260px));
    min-width: 0;
  }
  .nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.2s;
  }
  .nav-links a:hover { color: var(--foam-teal); }

  .nav-cta {
    background: var(--foam-teal);
    color: var(--ocean-deep) !important;
    min-height: 56px !important;
    padding: 0 24px;
    border-radius: 7px;
    font-weight: 700 !important;
  }
  .nav-cta:hover { background: var(--foam-light) !important; transform: translateY(-1px); }
  .nav-cta-secondary {
    border: 1px solid rgba(144,224,239,0.45);
    color: var(--foam-light) !important;
    min-height: 56px !important;
    padding: 0 24px;
    border-radius: 7px;
  }
  .nav-cta-secondary:hover {
    border-color: var(--foam-teal);
    background: rgba(0,180,216,0.08);
    transform: translateY(-1px);
  }

  @media (max-width: 1280px) {
    nav {
      min-height: 108px;
      padding-top: 14px;
      padding-bottom: 14px;
    }
    nav .nav-logo img {
      height: 58px !important;
    }
    .nav-links {
      max-width: calc(100vw - 190px);
      gap: 10px 8px;
    }
    .nav-links a {
      min-height: 32px;
      font-size: 10px;
    }
    .nav-cta,
    .nav-cta-secondary {
      min-height: 42px !important;
      padding: 0 10px;
    }
  }

  /* ── HERO ── */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 120px 40px 80px;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 70% 60% at 50% 100%, rgba(0,180,216,0.045) 0%, transparent 70%),
      radial-gradient(ellipse 120% 80% at 50% 50%, rgba(10,53,96,0.4) 0%, transparent 80%),
      linear-gradient(180deg, rgba(3,13,26,0.82) 0%, rgba(6,31,58,0.78) 50%, rgba(10,53,96,0.75) 100%);
  }

  /* animated water shimmer — removed (slanted lines disabled) */
  .hero-bg::after {
    content: none;
  }

  @keyframes shimmer {
    from { transform: translateX(-100px); }
    to   { transform: translateX(100px); }
  }

  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 960px;
  }

  .hero-eyebrow {
    font-size: 11px;
    letter-spacing: 6px;
    color: var(--foam-teal);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 24px;
    opacity: 0;
    animation: fadeUp 0.8s 0.2s forwards;
  }

  .hero-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(64px, 10vw, 130px);
    line-height: 0.92;
    letter-spacing: 4px;
    color: var(--white);
    margin-bottom: 16px;
    opacity: 0;
    animation: fadeUp 0.9s 0.4s forwards;
  }

  .hero-title .accent { color: var(--foam-teal); }

  .hero-sub {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(16px, 2.5vw, 24px);
    color: var(--foam-light);
    margin-bottom: 52px;
    letter-spacing: 1px;
    opacity: 0;
    animation: fadeUp 0.9s 0.6s forwards;
  }

  .hero-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeUp 0.9s 0.8s forwards;
  }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--foam-teal);
    color: var(--ocean-deep);
    padding: 16px 36px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s;
  }
  .btn-primary:hover { background: var(--foam-light); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,180,216,0.4); }

  .btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid var(--foam-teal);
    color: var(--foam-teal);
    padding: 14px 34px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s;
  }
  .btn-outline:hover { background: rgba(0,180,216,0.045); transform: translateY(-2px); }

  /* scroll indicator */
  .scroll-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    animation: scrollFadeIn 1s 1.2s forwards;
  }
  .scroll-indicator-left {
    left: clamp(30px, 4.2vw, 82px);
  }
  .scroll-indicator-right {
    right: clamp(30px, 4.2vw, 82px);
  }
  .scroll-indicator span {
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--text-muted);
    text-transform: uppercase;
  }
  .scroll-line {
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, var(--foam-teal), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
  }
  @keyframes scrollPulse {
    0%, 100% { opacity: 0.4; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.2); }
  }
  @keyframes scrollFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @media (max-width: 640px) {
    .scroll-indicator-left {
      left: 22px;
    }
    .scroll-indicator-right {
      right: 22px;
    }
    .scroll-indicator span {
      letter-spacing: 2px;
    }
    .scroll-line {
      height: 40px;
    }
  }

  /* ── STATS BAR ── */
  .stats-bar {
    position: relative;
    background: linear-gradient(180deg, rgba(6, 24, 46, 0.96), var(--ocean-mid));
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 18px 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .stats-bar::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 180, 216, 0.6), transparent);
  }
  .stat-item {
    position: relative;
    text-align: center;
    padding: 4px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: transform 0.25s ease;
  }
  .stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 62px;
    background: linear-gradient(180deg, transparent, rgba(0, 180, 216, 0.3), transparent);
  }
  .stat-item:hover { transform: translateY(-3px); }
  .stat-number {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    color: var(--foam-teal);
    letter-spacing: 2px;
    line-height: 1;
    text-shadow: 0 0 22px rgba(0, 180, 216, 0.35);
  }
  .stat-label {
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 0;
    line-height: 1.4;
    max-width: 20ch;
  }
  /* tighten the gap between the stats bar and the gallery below it */
  #gallery .section-inner { padding-top: 46px; }

  /* ── SECTION COMMON ── */
  section { position: relative; z-index: 1; }

  .section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 60px;
  }

  .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--foam-teal);
    font-weight: 600;
    margin-bottom: 16px;
  }
  .section-tag::before {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--foam-teal);
  }

  .section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(38px, 5vw, 66px);
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 20px;
  }

  .section-body {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-muted);
    max-width: 680px;
  }

  /* ── FEATURE CARDS GRID ── */
  .feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 60px;
  }

  .feature-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px 32px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  }
  .feature-card:hover {
    transform: translateY(-6px);
    border-color: var(--foam-teal);
    box-shadow: 0 24px 60px rgba(0,180,216,0.15);
  }
  .feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--foam-teal), transparent);
    opacity: 0;
    transition: opacity 0.3s;
  }
  .feature-card:hover::before { opacity: 1; }

  .card-icon {
    width: 56px;
    height: 56px;
    background: rgba(0,180,216,0.045);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 26px;
  }

  .card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    letter-spacing: 1px;
    margin-bottom: 12px;
    color: var(--white);
  }

  .card-body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted);
  }

  .card-badge {
    display: inline-block;
    margin-top: 20px;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--foam-teal);
    font-weight: 600;
    border: 1px solid var(--foam-teal);
    padding: 4px 12px;
    border-radius: 100px;
  }

  /* ── SPLIT SECTION ── */
  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .split.reverse { direction: rtl; }
  .split.reverse > * { direction: ltr; }

  /* ── ADHESIVE SECTION ── */
  .adhesive-section {
    background: var(--ocean-mid);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .product-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-top: 60px;
  }

  .product-card {
    background: linear-gradient(135deg, rgba(10,53,96,0.8), rgba(6,31,58,0.95));
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 44px 40px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
  }
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
    border-color: rgba(0,180,216,0.5);
  }

  .product-card-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, var(--gold), #a07830);
    color: var(--white);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 100px;
  }

  .product-id {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    color: var(--foam-teal);
    letter-spacing: 3px;
    line-height: 1;
    margin-bottom: 6px;
  }

  .product-name {
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
  }

  .product-desc {
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-muted);
  }

  /* ── PROCESS SECTION ── */
  .process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 60px;
    position: relative;
  }
  .process-steps::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--foam-teal), transparent);
  }

  .process-step {
    text-align: center;
    padding: 0 20px;
    position: relative;
  }

  .step-num {
    width: 80px;
    height: 80px;
    background: var(--ocean-mid);
    border: 2px solid var(--foam-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32px;
    color: var(--foam-teal);
    margin: 0 auto 28px;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
  }
  .process-step:hover .step-num {
    background: var(--foam-teal);
    color: var(--ocean-deep);
    transform: scale(1.1);
  }

  .step-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: var(--white);
  }

  .step-body {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
  }

  /* ── EVA FOAM SECTION ── */
  .eva-section {
    background: linear-gradient(180deg, var(--ocean-deep) 0%, var(--ocean-mid) 100%);
  }

  .specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px;
  }

  .spec-item {
    background: rgba(0,180,216,0.06);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px 24px;
    transition: all 0.3s;
  }
  .spec-item:hover {
    background: rgba(0,180,216,0.045);
    border-color: rgba(0,180,216,0.5);
  }

  .spec-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px;
    color: var(--foam-teal);
    letter-spacing: 2px;
    line-height: 1;
  }
  .spec-label {
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 6px;
  }

  /* ── SCANNING SECTION ── */
  .scanning-section { background: var(--ocean-deep); }

  .comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 50px;
    font-size: 14px;
  }
  .comparison-table th {
    background: var(--ocean-blue);
    color: var(--white);
    padding: 18px 24px;
    text-align: left;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .comparison-table th:first-child { border-radius: 12px 0 0 0; }
  .comparison-table th:last-child { border-radius: 0 12px 0 0; }
  .comparison-table td {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    line-height: 1.5;
  }
  .comparison-table tr:hover td { background: rgba(0,180,216,0.05); }
  .comparison-table td:first-child { font-weight: 600; color: var(--white); }
  .check { color: var(--foam-teal); font-size: 18px; }
  .cross { color: rgba(255,255,255,0.25); font-size: 18px; }
  .highlight-row td { background: rgba(0,180,216,0.08) !important; }
  .highlight-row td:first-child { color: var(--foam-teal) !important; }

  /* ── FAQ ── */
  .faq-section {
    background: #04101f;
    border-top: 1px solid var(--border);
  }

  #faq::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(1, 7, 16, 0.12);
  }

  /* Desktop only: let bioluminescent particles read more clearly (toned down slightly) */
  @media (min-width: 821px) {
    #faq::after {
      background: rgba(1, 7, 16, 0.08);
    }
    #faq > div[style*="radial-gradient"] {
      opacity: 0.50;
    }
  }

  /* Mobile: let FAQ particle background read more clearly */
  @media (max-width: 820px) {
    #faq::after {
      background: rgba(1, 7, 16, 0.04);
    }
    #faq > div[style*="radial-gradient"] {
      opacity: 0.55;
    }
  }

  /* faq-background-softener */

  .faq-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 40px;
    flex-wrap: wrap;
  }
  .faq-tab {
    padding: 10px 24px;
    border-radius: 100px;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid var(--border);
    color: var(--text-muted);
    /* semi-transparent glass fill so the pills read against the starfield */
    background: rgba(9, 29, 52, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: border-color 0.3s, color 0.3s, background 0.3s, box-shadow 0.3s;
    /* Kill default rectangular tap/focus flash (esp. mobile Safari/Chrome) */
    -webkit-tap-highlight-color: transparent;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }
  .faq-tab:focus,
  .faq-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,180,216,0.35);
  }
  .faq-tab.active, .faq-tab:hover {
    border-color: var(--foam-teal);
    color: var(--foam-teal);
    background: rgba(0,180,216,0.1);
  }
  .faq-tab.active:focus,
  .faq-tab.active:focus-visible {
    box-shadow: 0 0 0 2px rgba(0,180,216,0.45);
  }

  /* Desktop only: FAQ category buttons larger (mobile untouched) */
  @media (min-width: 821px) {
    .faq-tabs {
      gap: 20px;
      margin-bottom: 48px;
    }
    .faq-tab {
      padding: 22px 48px;
      font-size: 17px;
      letter-spacing: 2.8px;
      min-height: 64px;
      border-width: 2px;
      border-radius: 100px;
    }
  }

  .faq-list { display: flex; flex-direction: column; gap: 16px; }

  /* FAQ: hide question list until a category pill is selected (all screen sizes) */
  .faq-list:not(.is-open) {
    display: none !important;
  }
  .faq-list.is-open {
    display: flex !important;
  }

  @media (max-width: 760px) {
    .faq-list.is-open {
      margin-top: 8px;
      gap: 10px;
    }
  }

  .faq-item {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s;
  }
  .faq-item:hover { border-color: rgba(0,180,216,0.5); }

  .faq-question {
    width: 100%;
    background: transparent;
    border: none;
    padding: 24px 28px;
    text-align: left;
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }
  .faq-question .chevron {
    color: var(--foam-teal);
    font-size: 20px;
    transition: transform 0.3s;
    flex-shrink: 0;
  }
  .faq-question.open .chevron { transform: rotate(180deg); }

  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s;
    padding: 0 28px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-muted);
  }
  .faq-answer.open {
    max-height: 600px;
    padding: 0 28px 24px;
  }

  /* ── BLOG SECTION ── */
  .blog-section { background: var(--ocean-deep); }

  .blog-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 48px;
    position: relative;
    overflow: hidden;
  }
  .blog-card::before {
    content: 'BLOG';
    position: absolute;
    top: 24px;
    right: 28px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    letter-spacing: 4px;
    color: var(--foam-teal);
    border: 1px solid var(--foam-teal);
    padding: 4px 14px;
    border-radius: 100px;
  }

  .blog-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(28px, 3vw, 44px);
    letter-spacing: 2px;
    margin-bottom: 28px;
    line-height: 1.1;
    max-width: 760px;
  }

  .blog-body {
    font-size: 15px;
    line-height: 1.85;
    color: var(--text-muted);
    margin-bottom: 24px;
  }

  .blog-body h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--white);
    margin: 36px 0 12px;
  }

  /* ── LOCATION ── */
  .location-section {
    background: var(--ocean-mid);
    border-top: 1px solid var(--border);
    text-align: center;
  }

  .location-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,180,216,0.045);
    border: 1px solid var(--foam-teal);
    padding: 12px 28px;
    border-radius: 100px;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--foam-teal);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 40px;
  }

  .locations-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
  }

  .location-tag {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 10px 22px;
    border-radius: 100px;
    font-size: 13px;
    color: var(--text-muted);
    transition: all 0.3s;
  }
  .location-tag:hover { border-color: var(--foam-teal); color: var(--foam-teal); }

  /* ── CTA SECTION ── */
  .cta-section {
    background: linear-gradient(135deg, var(--ocean-blue), var(--ocean-mid));
    border-top: 1px solid var(--border);
    text-align: center;
  }

  .cta-box {
    background: linear-gradient(135deg, rgba(0,180,216,0.045), rgba(10,53,96,0.5));
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 80px 60px;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
  }
  .cta-box::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(0,180,216,0.15), transparent 70%);
    border-radius: 50%;
  }

  /* ── FOOTER ── */
  footer {
    background: var(--ocean-deep);
    border-top: 1px solid var(--border);
    padding: 40px 60px;
  }

  .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    position: relative;
    min-height: 360px;
  }

  .footer-brand {
    max-width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-brand p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-muted);
    margin-top: 16px;
  }

  .footer-col h4 {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--foam-teal);
    margin-bottom: 10px;
    font-weight: 700;
  }

  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
  .footer-col a { text-decoration: none; color: var(--text-muted); font-size: 13px; transition: color 0.2s; }
  .footer-col a:hover { color: var(--white); }

  .footer-bottom {
    max-width: 1200px;
    margin: 40px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-muted);
  }

  /* ── ANIMATIONS ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .reveal {
    opacity: 0;
    transform: translateY(44px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
  }
  .reveal.visible {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  /* Section headings rise less — feel anchored */
  .section-tag.reveal,
  h2.section-title.reveal {
    transform: translateY(28px);
    transition-duration: 1s;
  }

  /* Cards get a subtle scale-up for depth */
  .proc-card.reveal,
  .proc-card-pro.reveal,
  .product-card.reveal,
  .feature-card.reveal,
  .blog-card.reveal {
    transform: translateY(52px) scale(0.97);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .proc-card.reveal.visible,
  .proc-card-pro.reveal.visible,
  .product-card.reveal.visible,
  .feature-card.reveal.visible,
  .blog-card.reveal.visible {
    transform: translateY(0) scale(1);
  }

  /* Stagger utility classes */
  .reveal-d1 { transition-delay: 0.08s !important; }
  .reveal-d2 { transition-delay: 0.16s !important; }
  .reveal-d3 { transition-delay: 0.26s !important; }
  .reveal-d4 { transition-delay: 0.38s !important; }
  .reveal-d5 { transition-delay: 0.52s !important; }

  /* Respect reduced-motion preference */
  @media (prefers-reduced-motion: reduce) {
    .reveal {
      transition: opacity 0.4s ease;
      transform: none;
    }
  }

  /* ── DIVIDER LINE ── */
  .divider-line {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--foam-teal), transparent);
    border-radius: 2px;
    margin: 20px 0 32px;
  }

  /* ── MOBILE HAMBURGER ── */
  .hamburger {
    position: absolute;
    right: clamp(28px, 3vw, 58px);
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
  }
  .hamburger span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: all 0.3s;
  }

  #mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1001;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2.8vh, 20px);
    padding: 86px 24px 40px;
    overflow-y: auto;
    background: rgba(3,13,26,0.98);
  }
  .mobile-menu-link,
  .mobile-menu-cta {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    color: var(--white);
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
  }
  .mobile-menu-cta {
    width: min(100%, 360px);
    padding: 15px 22px;
    border-radius: 8px;
    background: var(--foam-teal);
    color: var(--ocean-deep);
  }
  .mobile-menu-cta.secondary {
    background: transparent;
    color: var(--foam-light);
    border: 1px solid rgba(144,224,239,0.45);
  }

  /* 13 nav items don't fit on one row below ~1130px — switch to the
     hamburger menu earlier rather than letting the header wrap to two rows */
  @media (max-width: 1130px) {
    nav { padding: 16px 24px; }
    .nav-logo { left: 24px; }
    .nav-links { display: none; }
    .hamburger { display: flex; }
  }

  @media (max-height: 680px) {
    .mobile-menu-link,
    .mobile-menu-cta {
      font-size: 18px;
    }
    #mobile-menu {
      gap: 11px;
      justify-content: flex-start;
    }
  }

  @media (max-width: 900px) {
    .section-inner { padding: 70px 24px; }
    .stats-bar { grid-template-columns: repeat(2,1fr); gap: 22px 0; padding: 24px; }
    .stat-item:nth-child(2)::after { display: none; }
    .feature-grid { grid-template-columns: 1fr; }
    .product-cards { grid-template-columns: 1fr; }
    .process-steps { grid-template-columns: repeat(2,1fr); gap: 40px; }
    .process-steps::before { display: none; }
    .specs-grid { grid-template-columns: repeat(2,1fr); }
    .split { grid-template-columns: 1fr; gap: 40px; }
    .split.reverse { direction: ltr; }
    footer { padding: 40px 24px; }
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .cta-box { padding: 50px 30px; }
  }

  /* ── WAVE SVG ── */
  .ocean-glow {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to top, rgba(0,180,216,0.08), transparent);
    pointer-events: none;
  }

/* ==== inline ==== */
.carousel-slide { flex: 0 0 100%; height: 100%; }
  .carousel-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    background: var(--border); border: none; cursor: pointer;
    transition: all 0.2s; padding: 0;
  }
  .carousel-dot.active { background: var(--foam-teal); transform: scale(1.3); }
  #thumb-strip::-webkit-scrollbar { height: 4px; }
  #thumb-strip::-webkit-scrollbar-track { background: transparent; }
  #thumb-strip::-webkit-scrollbar-thumb { background: var(--foam-teal); border-radius: 2px; }

  /* ── Ken Burns zoom effect ── */
  @keyframes gallery-kenburns {
    0%   { transform: scale(1) translate(0,0); }
    100% { transform: scale(1.07) translate(-1.5%,1%); }
  }
  .carousel-slide img {
    transform-origin: center center;
    will-change: transform;
  }

  /* ── Gallery section background canvas ── */
  #gallery-bg-canvas { pointer-events: none; }

  /* ── Caption transition ── */
  #carousel-caption { transition: opacity 0.4s ease; }

  /* ── Upgraded nav buttons ── */
  .gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(3,13,26,0.7);
    border: 1.5px solid rgba(0,180,216,0.5);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 0 rgba(0,180,216,0);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  }
  .gallery-nav-btn:hover {
    background: var(--foam-teal);
    border-color: var(--foam-teal);
    color: var(--ocean-deep);
    box-shadow: 0 6px 30px rgba(0,180,216,0.4);
  }
  .gallery-nav-btn.prev { left: 16px; }
  .gallery-nav-btn.next { right: 16px; }

/* ============================================
   NEW: 3D Fan Card Stack (replaces old carousel)
   Matches the premium overlapping fanned look
   ============================================ */
.gallery-stack-wrapper {
  max-width: 620px;
  margin: 0 auto;
  padding: 10px 0 8px;
}

.gallery-stack {
  position: relative;
  width: 100%;
  height: 400px;
  perspective: 1100px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  outline: none;
}

.gallery-fan-card {
  position: absolute;
  bottom: 0;
  width: 540px;
  height: 330px;
  border-radius: 20px;
  overflow: hidden;
  border: 5px solid rgba(10, 22, 40, 0.9);
  background: #020b14;
  box-shadow: 
    0 30px 90px rgba(0, 0, 0, 0.65),
    0 10px 30px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255,255,255,0.06) inset;
  transition: transform 0.42s cubic-bezier(0.23, 1.0, 0.32, 1), 
              opacity 0.28s ease, 
              filter 0.28s ease;
  cursor: pointer;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
}

.gallery-fan-card.active {
  box-shadow: 
    0 40px 110px rgba(0,0,0,0.75),
    0 0 0 1px rgba(0, 180, 216, 0.12) inset;
  z-index: 120 !important;
}

/* Subtle polish for pure-image cards (no text overlays) */
.gallery-fan-card {
  background: #0a1628;
}

.gallery-fan-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Text overlays removed — cards are now pure images (no wording on the fan cards) */

/* Dots */
#gallery-stack-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 18px;
}

#gallery-stack-dots button {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

#gallery-stack-dots button.active {
  background: var(--foam-teal);
  width: 22px;
  border-radius: 999px;
}

#gallery-stack-dots button:hover:not(.active) {
  background: rgba(255,255,255,0.45);
}

/* Prev / next navigation arrows on the fan */
.gallery-fan-arrow {
  position: absolute;
  top: 58%;
  transform: translateY(-50%);
  z-index: 200;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(3, 13, 26, 0.85);
  border: 1px solid var(--border);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
.gallery-fan-arrow:hover {
  background: rgba(0, 180, 216, 0.18);
  border-color: var(--foam-teal);
  color: var(--foam-teal);
}
.gallery-fan-arrow:active { transform: translateY(-50%) scale(0.9); }
.gallery-fan-arrow-left { left: 6px; }
.gallery-fan-arrow-right { right: 6px; }
@media (max-width: 480px) {
  .gallery-fan-arrow { width: 40px; height: 40px; font-size: 21px; }
  .gallery-fan-arrow-left { left: 2px; }
  .gallery-fan-arrow-right { right: 2px; }
}

/* Responsive tweaks for the fan stack */
@media (max-width: 720px) {
  .gallery-stack { height: 340px; }
  .gallery-fan-card { width: 88vw; max-width: 460px; height: 280px; }
}

@media (max-width: 480px) {
  .gallery-stack { height: 300px; }
  .gallery-fan-card { width: 92vw; max-width: 420px; height: 255px; border-width: 4px; }
}

  /* ── Stats strip ── */
  @media (max-width: 500px) {
    #gallery-stats > div { border-right: none !important; border-bottom: 1px solid var(--border); }
    #gallery-stats > div:last-child { border-bottom: none; }
  }

/* ==== inline ==== */
.proc-card { cursor:default; }
    .diy-film-calculator input[type="range"] {
      min-height: 24px;
      cursor: pointer;
    }

    /* Base ocean background + waves (primary detailed styles live in index.html <style> block) */
    #process .process-ocean-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
      background: #010a18;
    }

    /* Ensure no conflicting artifacts from old rules */
    #process .process-ocean-bg::before,
    #process .process-ocean-bg::after {
      display: none !important;
    }

    /* Safe base for wave layers (8 layers now) — always below content */
    #process .process-ocean-wave,
    #process .process-ocean-wave-two,
    #process .process-ocean-wave-three,
    #process .process-ocean-wave-four,
    #process .process-ocean-wave-five,
    #process .process-ocean-wave-six,
    #process .process-ocean-wave-seven,
    #process .process-ocean-wave-eight {
      position: absolute;
      z-index: 1 !important;
      pointer-events: none;
      transform: translateZ(0);
      backface-visibility: hidden;
    }

    /* Fallback (overridden by inline <style>) */
    #process .process-ocean-wave { background: rgba(82, 145, 200, 0.34); }

    @media (max-width:900px) {
      #process .process-hero-row {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
      }
      #process .process-trust-pills {
        min-width: 0 !important;
        width: 100%;
      }
      #path-workshop .proc-card-pro,
      #path-onsite .proc-card-pro,
      #path-photomodeller .proc-card-pro,
      #path-diy .proc-card-pro {
        min-height: 0;
      }
      #path-workshop [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
      #path-photomodeller [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
      #path-diy [style*="grid-template-columns:repeat(4,minmax(0,1fr))"] {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
      }
    }
    @media (max-width:600px) {
      #path-workshop [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
      #path-photomodeller [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
      #path-diy [style*="grid-template-columns:repeat(4,minmax(0,1fr))"] {
        grid-template-columns: 1fr !important;
      }
    }

    #process .process-path-badge {
      display: inline-block;
      font-size: 9px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-weight: 800;
      color: #ffe9a8;
      background: rgba(255,200,80,0.14);
      border: 1px solid rgba(255,200,80,0.35);
      border-radius: 999px;
      padding: 3px 9px;
      margin-bottom: 8px;
    }

    #process .process-path-selector {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 44px;
    }

    #process .process-path-tier {
      position: relative;
      overflow: hidden;
      padding: 26px 28px 28px;
      border-radius: 24px;
      border: 1px solid rgba(144,224,239,0.14);
      box-shadow: 0 20px 50px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.06);
    }

    #process .process-path-tier::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 100%;
      border-radius: 18px 0 0 18px;
      pointer-events: none;
    }

    #process .process-path-tier--pro {
      background:
        radial-gradient(ellipse 80% 65% at 0% 0%, rgba(255,200,80,0.24), transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(255,180,60,0.12), transparent 55%),
        linear-gradient(158deg, rgba(6,22,42,0.98), rgba(10,30,52,0.9));
      border-color: rgba(255,200,80,0.32);
      box-shadow:
        0 16px 48px rgba(0,0,0,0.22),
        0 0 64px rgba(255,200,80,0.1),
        inset 0 1px 0 rgba(255,255,255,0.05);
    }

    #process .process-path-tier--pro::before {
      background: linear-gradient(180deg, rgba(255,230,160,1), rgba(255,200,80,0.5));
      width: 4px;
    }

    #process .process-path-tier--pro::after {
      content: '';
      position: absolute;
      top: -40%;
      right: -10%;
      width: 55%;
      height: 80%;
      background: radial-gradient(ellipse at center, rgba(255,200,80,0.08), transparent 70%);
      pointer-events: none;
    }

    #process .process-path-tier--diy {
      background:
        radial-gradient(ellipse 80% 65% at 100% 0%, rgba(167,139,250,0.22), transparent 60%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(120,90,220,0.12), transparent 55%),
        linear-gradient(158deg, rgba(8,16,34,0.98), rgba(14,24,44,0.9));
      border-color: rgba(167,139,250,0.3);
      box-shadow:
        0 16px 48px rgba(0,0,0,0.22),
        0 0 64px rgba(167,139,250,0.1),
        inset 0 1px 0 rgba(255,255,255,0.05);
    }

    #process .process-path-tier--diy::before {
      background: linear-gradient(180deg, #c4b5fd, rgba(100,70,200,0.5));
      width: 4px;
    }

    #process .process-path-tier--diy::after {
      content: '';
      position: absolute;
      top: -40%;
      left: -10%;
      width: 55%;
      height: 80%;
      background: radial-gradient(ellipse at center, rgba(167,139,250,0.08), transparent 70%);
      pointer-events: none;
    }

    #process .process-path-tier-header {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 20px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    #process .process-path-tier--pro .process-path-tier-header {
      border-bottom-color: rgba(255,200,80,0.16);
    }

    #process .process-path-tier--diy .process-path-tier-header {
      border-bottom-color: rgba(167,139,250,0.16);
    }

    #process .process-path-tier-intro {
      flex: 1;
      min-width: 0;
    }

    #process .process-path-tier-titleline {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 8px;
    }

    #process .process-path-tier-desc {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
      color: rgba(190,226,238,0.58);
      max-width: 520px;
    }

    #process .process-path-tier--pro .process-path-tier-desc {
      color: rgba(255,230,160,0.52);
    }

    #process .process-path-tier--diy .process-path-tier-desc {
      color: rgba(196,181,253,0.52);
    }

    #process .process-path-tier-tag {
      display: inline-block;
      font-family: Montserrat, sans-serif;
      font-size: 8px;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      font-weight: 700;
      border-radius: 999px;
      padding: 4px 10px;
      flex-shrink: 0;
    }

    #process .process-path-tier--pro .process-path-tier-tag {
      color: #ffe9a8;
      background: rgba(255,200,80,0.12);
      border: 1px solid rgba(255,200,80,0.25);
    }

    #process .process-path-tier--diy .process-path-tier-tag {
      color: #c4b0ff;
      background: rgba(167,139,250,0.12);
      border: 1px solid rgba(167,139,250,0.25);
    }

    #process .process-path-tier-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(26px, 3.2vw, 34px);
      letter-spacing: 1.5px;
      color: var(--white);
      margin: 0;
      line-height: 1;
    }

    #process .process-path-tier-count {
      flex-shrink: 0;
      font-size: 9px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-weight: 700;
      color: rgba(255,255,255,0.55);
      white-space: nowrap;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      margin-top: 4px;
    }

    #process .process-path-tier--pro .process-path-tier-count {
      color: rgba(255,230,160,0.7);
      background: rgba(255,200,80,0.08);
      border-color: rgba(255,200,80,0.16);
    }

    #process .process-path-tier--diy .process-path-tier-count {
      color: rgba(196,181,253,0.75);
      background: rgba(167,139,250,0.08);
      border-color: rgba(167,139,250,0.16);
    }

    #process .process-path-tier-separator {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin: 18px 0;
    }

    #process .process-path-tier-separator::before,
    #process .process-path-tier-separator::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(190,226,238,0.18), transparent);
    }

    #process .process-path-tier-separator span {
      font-size: 9px;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      font-weight: 700;
      color: rgba(190,226,238,0.42);
      padding: 5px 14px;
      border-radius: 999px;
      background: rgba(6,20,38,0.7);
      border: 1px solid rgba(255,255,255,0.08);
      white-space: nowrap;
    }

    #process .process-path-duo {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      gap: 14px;
      align-items: stretch;
      position: relative;
      z-index: 1;
    }

    #process .process-path-or {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      position: relative;
      z-index: 2;
    }

    #process .process-path-or::before,
    #process .process-path-or::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 1px;
      background: linear-gradient(180deg, transparent, rgba(255,255,255,0.12), transparent);
    }

    #process .process-path-duo--pro .process-path-or::before,
    #process .process-path-duo--pro .process-path-or::after {
      background: linear-gradient(180deg, transparent, rgba(255,200,80,0.25), transparent);
    }

    #process .process-path-duo--diy .process-path-or::before,
    #process .process-path-duo--diy .process-path-or::after {
      background: linear-gradient(180deg, transparent, rgba(167,139,250,0.25), transparent);
    }

    #process .process-path-or::before {
      top: 0;
      bottom: calc(50% + 22px);
    }

    #process .process-path-or::after {
      top: calc(50% + 22px);
      bottom: 0;
    }

    #process .process-path-or span {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-size: 10px;
      font-weight: 700;
      text-transform: lowercase;
      background: rgba(4,14,28,0.95);
      border: 1px solid rgba(255,255,255,0.12);
      position: relative;
      z-index: 1;
    }

    #process .process-path-duo--pro .process-path-or span {
      color: rgba(255,230,160,0.55);
      border-color: rgba(255,200,80,0.2);
      box-shadow: 0 0 12px rgba(255,200,80,0.08);
    }

    #process .process-path-duo--diy .process-path-or span {
      color: rgba(196,181,253,0.55);
      border-color: rgba(167,139,250,0.2);
      box-shadow: 0 0 12px rgba(167,139,250,0.08);
    }

    #process .process-path-card {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      z-index: 1;
      padding: 0;
      min-height: 168px;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 18px;
      background: linear-gradient(165deg, rgba(4,18,36,0.96), rgba(6,28,52,0.78));
      color: rgba(190,226,238,0.78);
      font-family: Montserrat, sans-serif;
      text-align: left;
      cursor: pointer;
      overflow: hidden;
      isolation: isolate;
      transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
      box-shadow:
        0 10px 28px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.05);
    }

    #process .process-path-card-inner {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 14px;
      padding: 16px 18px 14px;
      min-height: 100%;
    }

    #process .process-path-card-head {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #process .process-path-card-num {
      flex-shrink: 0;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 11px;
      letter-spacing: 1px;
      font-weight: 800;
      padding: 4px 8px;
      border-radius: 6px;
      line-height: 1;
    }

    #process .process-path-tier--pro .process-path-card-num {
      color: #2a1800;
      background: linear-gradient(135deg, rgba(255,230,160,0.95), rgba(255,200,80,0.75));
      border: 1px solid rgba(255,230,160,0.4);
    }

    #process .process-path-tier--diy .process-path-card-num {
      color: #1a1030;
      background: linear-gradient(135deg, rgba(196,181,253,0.95), rgba(167,139,250,0.75));
      border: 1px solid rgba(196,181,253,0.4);
    }

    #process .process-path-card-mid {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      flex: 1;
    }

    #process .process-path-card-text {
      flex: 1;
      min-width: 0;
    }

    #process .process-path-card-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-top: 12px;
      margin-top: auto;
      border-top: 1px solid rgba(255,255,255,0.07);
      font-family: 'Bebas Neue', sans-serif;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(190,226,238,0.45);
      transition: color 0.25s ease;
    }

    #process .process-path-tier--pro .process-path-card-foot {
      border-top-color: rgba(255,200,80,0.12);
      color: rgba(255,230,160,0.45);
    }

    #process .process-path-tier--diy .process-path-card-foot {
      border-top-color: rgba(167,139,250,0.12);
      color: rgba(196,181,253,0.45);
    }

    #process .process-path-card:hover .process-path-card-foot,
    #process .process-path-card.is-active .process-path-card-foot {
      color: rgba(255,255,255,0.75);
    }

    #process .process-path-tier--pro .process-path-card:hover .process-path-card-foot,
    #process .process-path-tier--pro .process-path-card.is-active .process-path-card-foot {
      color: rgba(255,240,200,0.9);
    }

    #process .process-path-tier--diy .process-path-card:hover .process-path-card-foot,
    #process .process-path-tier--diy .process-path-card.is-active .process-path-card-foot {
      color: rgba(220,210,255,0.9);
    }

    #process .process-path-card-arrow {
      font-size: 14px;
      transition: transform 0.25s ease;
    }

    #process .process-path-card:hover .process-path-card-arrow {
      transform: translateX(3px);
    }

    #process .process-path-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      z-index: 4;
      pointer-events: none;
    }

    #process .process-path-card-glow {
      position: absolute;
      top: -40%;
      left: -20%;
      right: -20%;
      height: 80%;
      filter: blur(32px);
      opacity: 0;
      transition: opacity 0.35s ease;
      pointer-events: none;
      z-index: 0;
    }

    #process .process-path-card-scanlines {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.4;
      mix-blend-mode: overlay;
      z-index: 1;
    }

    #process .process-path-card-bignum {
      position: absolute;
      right: 6px;
      bottom: -18px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 112px;
      line-height: 1;
      letter-spacing: -4px;
      pointer-events: none;
      user-select: none;
      z-index: 0;
      transition: color 0.35s ease, transform 0.4s ease, opacity 0.35s ease;
      opacity: 0.85;
    }

    /* Professional tier — unified gold */
    #process .process-path-tier--pro .process-path-card {
      border-color: rgba(255,200,80,0.22);
      background:
        radial-gradient(circle at 50% -30%, rgba(255,200,80,0.14), transparent 58%),
        linear-gradient(160deg, rgba(6,20,38,0.95), rgba(10,30,50,0.72));
    }
    #process .process-path-tier--pro .process-path-card::before {
      background: linear-gradient(90deg, rgba(255,200,80,0.08), rgba(255,230,160,0.95) 50%, rgba(255,200,80,0.08));
      box-shadow: 0 0 14px rgba(255,200,80,0.35);
    }
    #process .process-path-tier--pro .process-path-card-glow {
      background: radial-gradient(ellipse at center, rgba(255,200,80,0.32), transparent 70%);
    }
    #process .process-path-tier--pro .process-path-card-scanlines {
      background-image: repeating-linear-gradient(0deg, rgba(255,230,160,0.035) 0 1px, transparent 1px 4px);
    }
    #process .process-path-tier--pro .process-path-card-bignum {
      color: rgba(255,200,80,0.09);
    }
    #process .process-path-tier--pro .process-path-card:hover .process-path-card-bignum,
    #process .process-path-tier--pro .process-path-card.is-active .process-path-card-bignum {
      color: rgba(255,230,160,0.14);
    }
    #process .process-path-tier--pro .process-path-card-icon {
      background: rgba(255,200,80,0.1);
      border: 1px solid rgba(255,200,80,0.22);
    }
    #process .process-path-tier--pro .process-path-option-label {
      color: rgba(255,230,160,0.35);
    }
    #process .process-path-tier--pro .process-path-card.is-active .process-path-option-label,
    #process .process-path-tier--pro .process-path-card.is-active .process-path-selected-mark {
      color: #ffe9a8;
    }
    #process .process-path-tier--pro .process-path-card:hover,
    #process .process-path-tier--pro .process-path-card.is-active {
      border-color: rgba(255,230,160,0.62);
      box-shadow:
        0 14px 36px rgba(0,0,0,0.28),
        0 0 40px rgba(255,200,80,0.16),
        inset 3px 0 0 rgba(255,230,160,0.9);
    }
    #process .process-path-tier--pro .process-path-card:focus-visible {
      outline: 2px solid rgba(255,230,160,0.86);
      outline-offset: 2px;
    }
    #process .process-path-tier--pro .process-path-card-kicker {
      color: rgba(255,230,160,0.48);
    }
    #process .process-path-tier--pro .process-path-card.is-active .process-path-card-kicker {
      color: rgba(255,240,200,0.82);
    }

    /* DIY tier — unified purple */
    #process .process-path-tier--diy .process-path-card {
      border-color: rgba(167,139,250,0.22);
      background:
        radial-gradient(circle at 50% -30%, rgba(167,139,250,0.14), transparent 58%),
        linear-gradient(160deg, rgba(8,18,36,0.95), rgba(14,26,48,0.72));
    }
    #process .process-path-tier--diy .process-path-card::before {
      background: linear-gradient(90deg, rgba(167,139,250,0.08), rgba(196,181,253,0.95) 50%, rgba(167,139,250,0.08));
      box-shadow: 0 0 14px rgba(167,139,250,0.35);
    }
    #process .process-path-tier--diy .process-path-card-glow {
      background: radial-gradient(ellipse at center, rgba(167,139,250,0.3), transparent 70%);
    }
    #process .process-path-tier--diy .process-path-card-scanlines {
      background-image: repeating-linear-gradient(0deg, rgba(196,181,253,0.035) 0 1px, transparent 1px 4px);
    }
    #process .process-path-tier--diy .process-path-card-bignum {
      color: rgba(167,139,250,0.09);
    }
    #process .process-path-tier--diy .process-path-card:hover .process-path-card-bignum,
    #process .process-path-tier--diy .process-path-card.is-active .process-path-card-bignum {
      color: rgba(196,181,253,0.14);
    }
    #process .process-path-tier--diy .process-path-card-icon {
      background: rgba(167,139,250,0.1);
      border: 1px solid rgba(167,139,250,0.22);
    }
    #process .process-path-tier--diy .process-path-option-label {
      color: rgba(196,181,253,0.35);
    }
    #process .process-path-tier--diy .process-path-card.is-active .process-path-option-label,
    #process .process-path-tier--diy .process-path-card.is-active .process-path-selected-mark {
      color: #c4b5fd;
    }
    #process .process-path-tier--diy .process-path-card:hover,
    #process .process-path-tier--diy .process-path-card.is-active {
      border-color: rgba(196,181,253,0.62);
      box-shadow:
        0 14px 36px rgba(0,0,0,0.28),
        0 0 40px rgba(167,139,250,0.16),
        inset 3px 0 0 #c4b5fd;
    }
    #process .process-path-tier--diy .process-path-card:focus-visible {
      outline: 2px solid rgba(196,181,253,0.86);
      outline-offset: 2px;
    }
    #process .process-path-tier--diy .process-path-card-kicker {
      color: rgba(196,181,253,0.48);
    }
    #process .process-path-tier--diy .process-path-card.is-active .process-path-card-kicker {
      color: rgba(220,210,255,0.82);
    }

    #process .process-path-card:hover .process-path-card-glow,
    #process .process-path-card:focus-visible .process-path-card-glow,
    #process .process-path-card.is-active .process-path-card-glow {
      opacity: 1;
    }

    #process .process-path-card:hover .process-path-card-bignum,
    #process .process-path-card.is-active .process-path-card-bignum {
      transform: scale(1.04);
    }

    #process .process-path-card-recommended:not(.is-active) {
      border-color: rgba(255,230,160,0.42);
      box-shadow:
        0 10px 28px rgba(0,0,0,0.24),
        0 0 32px rgba(255,200,80,0.12),
        inset 0 1px 0 rgba(255,255,255,0.05);
    }

    #process .process-path-option-label {
      flex: 1;
      font-size: 8px;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      font-weight: 800;
      color: rgba(190,226,238,0.38);
    }

    #process .process-path-selected-mark {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 8px;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-weight: 800;
      opacity: 0;
      transition: opacity 0.2s ease;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
    }

    #process .process-path-tier--pro .process-path-card.is-active .process-path-selected-mark {
      background: rgba(255,200,80,0.12);
      border-color: rgba(255,200,80,0.28);
    }

    #process .process-path-tier--diy .process-path-card.is-active .process-path-selected-mark {
      background: rgba(167,139,250,0.12);
      border-color: rgba(167,139,250,0.28);
    }

    #process .process-path-card.is-active .process-path-selected-mark {
      opacity: 1;
    }

    #process .process-path-card:hover {
      transform: translateY(-2px);
    }

    #process .process-path-card.is-active {
      color: var(--white);
    }

    #process .process-path-card-icon {
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      line-height: 1;
      border-radius: 14px;
      position: relative;
      z-index: 3;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }

    #process .process-path-card-title-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 3px;
    }

    #process .process-path-card-title {
      display: block;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.1px;
      margin-bottom: 5px;
      color: var(--white);
      line-height: 1.2;
    }

    #process .process-path-card-title-row .process-path-card-title {
      margin-bottom: 0;
    }

    #process .process-path-badge {
      margin-bottom: 0;
      padding: 2px 7px;
      font-size: 8px;
    }

    #process .process-path-card-kicker {
      margin: 0;
      font-size: 11.5px;
      letter-spacing: 0.15px;
      text-transform: none;
      font-weight: 500;
      line-height: 1.5;
    }

    #process .process-step-grid {
      grid-template-columns: repeat(4,minmax(0,1fr)) !important;
      gap: 22px !important;
      align-items: stretch;
      position: relative;
      z-index: 2;
    }

    /* ── CONNECTOR LINE ── */
    #process .proc-connector-line {
      position: absolute;
      top: 68px;
      left: calc(12.5% + 28px);
      right: calc(12.5% + 28px);
      height: 2px;
      pointer-events: none;
      z-index: 0;
    }
    #process .proc-connector-track {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg,
        rgba(0,180,216,0.05) 0%,
        rgba(0,180,216,0.45) 18%,
        rgba(0,180,216,0.45) 82%,
        rgba(0,180,216,0.05) 100%);
      filter: drop-shadow(0 0 6px rgba(0,180,216,0.45));
    }
    #process .proc-connector-pulse {
      position: absolute;
      top: -3px;
      left: 0;
      width: 56px;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(125,225,255,0.95), transparent);
      filter: blur(3px);
      animation: procPulseRun 4.5s linear infinite;
    }
    #process .proc-connector-line-diy .proc-connector-track {
      background: linear-gradient(90deg,
        rgba(144,224,239,0.05) 0%,
        rgba(144,224,239,0.55) 18%,
        rgba(144,224,239,0.55) 82%,
        rgba(144,224,239,0.05) 100%);
      filter: drop-shadow(0 0 6px rgba(144,224,239,0.45));
    }
    #process .proc-connector-line-diy .proc-connector-pulse {
      background: linear-gradient(90deg, transparent, rgba(190,238,250,0.95), transparent);
    }
    #process .proc-connector-line-workshop .proc-connector-track {
      background: linear-gradient(90deg,
        rgba(255,200,80,0.05) 0%,
        rgba(255,200,80,0.55) 18%,
        rgba(255,200,80,0.55) 82%,
        rgba(255,200,80,0.05) 100%);
      filter: drop-shadow(0 0 6px rgba(255,200,80,0.4));
    }
    #process .proc-connector-line-workshop .proc-connector-pulse {
      background: linear-gradient(90deg, transparent, rgba(255,230,160,0.95), transparent);
    }
    #process .proc-connector-line-photo .proc-connector-track {
      background: linear-gradient(90deg,
        rgba(167,139,250,0.05) 0%,
        rgba(167,139,250,0.55) 18%,
        rgba(167,139,250,0.55) 82%,
        rgba(167,139,250,0.05) 100%);
      filter: drop-shadow(0 0 6px rgba(167,139,250,0.4));
    }
    #process .proc-connector-line-photo .proc-connector-pulse {
      background: linear-gradient(90deg, transparent, rgba(196,181,253,0.95), transparent);
    }
    @keyframes procPulseRun {
      0%   { left: -10%; opacity: 0; }
      8%   { opacity: 1; }
      92%  { opacity: 1; }
      100% { left: 110%; opacity: 0; }
    }

    /* ============================================
       IMPROVED PROCESS SECTION STYLES
       Much cleaner, clearer, premium feel
       ============================================ */

    /* Header + trust bar */
    #process .process-hero {
      margin-bottom: 36px;
    }
    #process .process-hero-text {
      max-width: 680px;
    }
    #process .process-intro {
      font-size: 15.5px;
      line-height: 1.7;
      color: var(--text-muted);
      max-width: 620px;
    }
    #process .process-intro strong {
      color: var(--white);
      font-weight: 600;
    }

    #process .process-trust-bar {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 20px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    #process .trust-item {
      display: flex; align-items: flex-start; gap: 13px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px;
      padding: 14px 17px;
      transition: all .2s ease;
    }
    #process .trust-item:hover {
      background: rgba(0,180,216,0.05);
      border-color: rgba(0,180,216,0.35);
      transform: translateY(-1px);
    }
    #process .trust-icon { font-size: 23px; line-height: 1; width: 28px; flex-shrink: 0; }
    #process .trust-title { font-size: 13.5px; font-weight: 700; color: #fff; line-height: 1.25; }
    #process .trust-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

    /* Main selector grid — two columns, side-by-side */
    #process .process-path-selector {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 36px;
    }
    @media (max-width: 860px) {
      #process .process-path-selector {
        grid-template-columns: 1fr;
      }
    }

    /* Tier containers */
    #process .process-path-tier {
      position: relative;
      overflow: hidden;
      padding: 22px 24px 26px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 16px 44px rgba(0,0,0,0.22);
    }
    #process .process-path-tier--pro {
      background: linear-gradient(160deg, rgba(8,24,46,0.96), rgba(12,32,54,0.92));
      border-color: rgba(255,200,80,0.35);
    }
    #process .process-path-tier--pro::before {
      content: '';
      position: absolute;
      top: 0; left: 0; bottom: 0;
      width: 4px;
      background: linear-gradient(to bottom, #ffe9a8, #f2b84d);
      border-radius: 20px 0 0 20px;
    }
    #process .process-path-tier--diy {
      background: linear-gradient(160deg, rgba(12,20,42,0.96), rgba(16,26,48,0.92));
      border-color: rgba(167,139,250,0.38);
    }
    #process .process-path-tier--diy::before {
      content: '';
      position: absolute;
      top: 0; left: 0; bottom: 0;
      width: 4px;
      background: linear-gradient(to bottom, #c4b5fd, #7c6ee0);
      border-radius: 20px 0 0 20px;
    }

    /* Tier header */
    #process .tier-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 14px;
      padding-bottom: 13px;
      border-bottom: 1px solid rgba(255,255,255,0.09);
    }
    #process .tier-label {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      opacity: 0.6;
      margin-bottom: 2px;
    }
    #process .process-path-tier--pro .tier-label { color: #f5d38a; }
    #process .process-path-tier--diy .tier-label { color: #c4b5fd; }

    #process .tier-title {
      font-size: 22px;
      font-weight: 700;
      margin: 0;
      line-height: 1.1;
      color: var(--white);
    }
    #process .tier-desc {
      margin: 6px 0 0;
      font-size: 13.5px;
      color: var(--text-muted);
      line-height: 1.45;
    }
    #process .tier-badge {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      padding: 4px 10px;
      border-radius: 999px;
      white-space: nowrap;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
    }
    #process .process-path-tier--pro .tier-badge {
      color: #f5d38a;
      border-color: rgba(255,200,80,0.25);
    }
    #process .process-path-tier--diy .tier-badge {
      color: #c4b5fd;
      border-color: rgba(167,139,250,0.25);
    }

    /* Options stack */
    #process .process-options {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    #process .opt-divider {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-align: center;
      color: rgba(255,255,255,0.28);
      padding: 3px 0 1px;
      position: relative;
    }
    #process .opt-divider::before,
    #process .opt-divider::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 28%;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(255,255,255,0.15), transparent);
    }
    #process .process-path-tier--pro .opt-divider::before,
    #process .process-path-tier--pro .opt-divider::after {
      background: linear-gradient(to right, transparent, rgba(255,200,80,0.2), transparent);
    }
    #process .process-path-tier--diy .opt-divider::before,
    #process .process-path-tier--diy .opt-divider::after {
      background: linear-gradient(to right, transparent, rgba(167,139,250,0.2), transparent);
    }
    #process .opt-divider::before { left: 10%; }
    #process .opt-divider::after { right: 10%; }

    /* ============================================
       BRILLIANT PROCESS SELECTOR — Choice Cards
       ============================================ */

    #process .process-path-selector {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      margin-bottom: 32px;
    }
    @media (max-width: 900px) {
      #process .process-path-selector { grid-template-columns: 1fr; }
    }

    /* Tier containers - elevated */
    #process .process-path-tier {
      border-radius: 22px;
      padding: 24px 26px 28px;
      border: 1px solid rgba(255,255,255,0.1);
      background: linear-gradient(165deg, rgba(6,20,40,0.96), rgba(10,28,48,0.92));
      position: relative;
      overflow: hidden;
    }
    #process .process-path-tier--pro {
      border-color: rgba(255,200,80,0.32);
      box-shadow: 0 20px 55px rgba(0,0,0,0.3);
    }
    #process .process-path-tier--pro::before {
      content: '';
      position: absolute; top: 0; left: 0; bottom: 0; width: 5px;
      background: linear-gradient(to bottom, #ffe9a8, #f5c15e);
      border-radius: 22px 0 0 22px;
    }
    #process .process-path-tier--diy {
      border-color: rgba(167,139,250,0.35);
      box-shadow: 0 20px 55px rgba(0,0,0,0.3);
    }
    #process .process-path-tier--diy::before {
      content: '';
      position: absolute; top: 0; left: 0; bottom: 0; width: 5px;
      background: linear-gradient(to bottom, #c4b5fd, #8b78e8);
      border-radius: 22px 0 0 22px;
    }

    /* Tier header */
    #process .tier-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 18px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    #process .tier-head-left { flex: 1; }
    #process .tier-label {
      font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 800;
      margin-bottom: 4px; opacity: .65;
    }
    #process .process-path-tier--pro .tier-label { color: #f5d38a; }
    #process .process-path-tier--diy .tier-label { color: #c4b5fd; }

    #process .tier-title {
      font-size: 23px; font-weight: 700; margin: 0 0 4px; line-height: 1.05; color: #fff;
    }
    #process .tier-desc {
      font-size: 14px; color: var(--text-muted); line-height: 1.45; margin: 0;
    }
    #process .tier-meta {
      text-align: right;
      display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    }
    #process .tier-badge {
      font-size: 11px; font-weight: 700; letter-spacing: .6px; padding: 3px 11px;
      border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    }
    #process .process-path-tier--pro .tier-badge { color: #f5d38a; border-color: rgba(255,200,80,0.25); }
    #process .process-path-tier--diy .tier-badge { color: #c4b5fd; border-color: rgba(167,139,250,0.25); }
    #process .tier-recommend {
      font-size: 10px; font-weight: 600; letter-spacing: .5px;
      padding: 1px 8px; border-radius: 999px; background: rgba(255,200,80,0.15); color: #ffe9a8;
      border: 1px solid rgba(255,200,80,0.3);
    }
    /* "Clickable" header badge — same translucent + glow look as the old Click Me
       buttons, tinted per tier. Applies on both mobile and desktop. */
    #process .tier-clickable {
      display: inline-block; white-space: nowrap;
      font-size: 12px; font-weight: 700; letter-spacing: .5px;
      padding: 6px 16px; border-radius: 999px; cursor: pointer;
      transition: all .2s ease;
      background: rgba(255,255,255,0.10); color: #fff;
      border: 1px solid rgba(255,255,255,0.45);
      box-shadow: 0 0 18px rgba(255,255,255,0.28);
    }
    #process .process-path-tier--pro .tier-clickable {
      background: rgba(255,233,168,0.12); color: #ffe9a8;
      border-color: rgba(255,233,168,0.55);
      box-shadow: 0 0 18px rgba(255,233,168,0.38);
    }
    #process .process-path-tier--diy .tier-clickable {
      background: rgba(196,181,253,0.14); color: #c4b5fd;
      border-color: rgba(196,181,253,0.55);
      box-shadow: 0 0 18px rgba(196,181,253,0.40);
    }
    #process .process-path-tier--pro .tier-clickable:hover {
      background: rgba(255,233,168,0.20);
      box-shadow: 0 0 26px rgba(255,233,168,0.55);
    }
    #process .process-path-tier--diy .tier-clickable:hover {
      background: rgba(196,181,253,0.22);
      box-shadow: 0 0 26px rgba(196,181,253,0.58);
    }

    /* Choice cards - the new brilliant cards */
    #process .choice-card {
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px;
      padding: 16px 18px;
      cursor: pointer;
      transition: all .2s cubic-bezier(.2,0,.2,1);
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    #process .choice-card:hover {
      transform: translateY(-2px);
      border-color: rgba(255,255,255,0.3);
      background: rgba(255,255,255,0.04);
    }
    #process .choice-card.is-active,
    #process .choice-card--pro.is-active {
      border-color: rgba(255,200,80,0.65);
      background: rgba(255,200,80,0.045);
      box-shadow: 0 0 0 1px rgba(255,200,80,0.25);
    }
    #process .choice-card--diy.is-active {
      border-color: rgba(167,139,250,0.65);
      background: rgba(167,139,250,0.045);
      box-shadow: 0 0 0 1px rgba(167,139,250,0.25);
    }

    #process .choice-main {
      display: flex; gap: 14px; align-items: flex-start;
    }
    #process .choice-icon {
      font-size: 26px; width: 42px; height: 42px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      border-radius: 10px; background: rgba(255,255,255,0.06);
    }
    #process .choice-card--pro .choice-icon { background: rgba(255,200,80,0.12); }
    #process .choice-card--diy .choice-icon { background: rgba(167,139,250,0.12); }

    #process .choice-text { flex: 1; min-width: 0; }
    #process .choice-title {
      font-size: 16.5px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    }
    #process .choice-badge {
      font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; letter-spacing: .5px;
    }
    #process .choice-badge--gold {
      background: rgba(255,200,80,0.22); color: #ffe9a8; border: 1px solid rgba(255,200,80,0.4);
    }
    #process .choice-selected {
      font-size: 10px; font-weight: 700; padding: 1px 9px; border-radius: 999px;
      background: rgba(163,243,202,0.18); color: #a5f3c9; border: 1px solid rgba(163,243,202,0.35);
    }
    #process .choice-kicker {
      font-size: 13px; line-height: 1.35; color: rgba(190,226,238,.72); margin-top: 3px;
    }
    #process .choice-benefit {
      font-size: 12.5px; color: rgba(255,255,255,0.55); margin-top: 6px; font-weight: 500;
    }
    /* Mobile only: hide the secondary benefit tagline under each service option,
       the "Recommended for most" tier note, and the "Fastest" badge.
       Desktop is untouched. */
    @media (max-width: 900px) {
      #process .choice-benefit { display: none; }
      #process .tier-recommend { display: none; }
      #process .choice-badge--gold { display: none; }
    }

    #process .choice-actions {
      display: flex; align-items: center; gap: 12px; margin-top: 2px;
    }
    #process .choice-btn {
      appearance: none; border: none; font: inherit;
      font-size: 13px; font-weight: 700; letter-spacing: .4px;
      padding: 9px 18px; border-radius: 999px; cursor: pointer;
      transition: all .2s ease;
    }
    /* Semi-transparent, glowing buttons (both mobile & desktop). Each tier keeps
       its accent colour but as a translucent fill + coloured glow instead of a
       solid background. */
    #process .choice-btn--primary {
      background: rgba(255,255,255,0.10);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.45);
      box-shadow: 0 0 18px rgba(255,255,255,0.28);
    }
    #process .process-path-tier--pro .choice-btn--primary {
      background: rgba(255,233,168,0.12);
      color: #ffe9a8;
      border-color: rgba(255,233,168,0.55);
      box-shadow: 0 0 18px rgba(255,233,168,0.38);
    }
    #process .process-path-tier--diy .choice-btn--primary {
      background: rgba(196,181,253,0.14);
      color: #c4b5fd;
      border-color: rgba(196,181,253,0.55);
      box-shadow: 0 0 18px rgba(196,181,253,0.40);
    }
    #process .choice-btn--primary:hover {
      transform: translateY(-1px);
    }
    #process .process-path-tier--pro .choice-btn--primary:hover {
      background: rgba(255,233,168,0.20);
      box-shadow: 0 0 26px rgba(255,233,168,0.55);
    }
    #process .process-path-tier--diy .choice-btn--primary:hover {
      background: rgba(196,181,253,0.22);
      box-shadow: 0 0 26px rgba(196,181,253,0.58);
    }
    #process .choice-link {
      font-size: 12px; color: rgba(255,255,255,0.55); cursor: pointer; font-weight: 500;
      transition: color .15s ease;
    }
    #process .choice-link:hover { color: #fff; text-decoration: underline; }

    #process .opt-divider-pro,
    #process .opt-divider-diy {
      font-size: 10px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
      text-align: center; color: rgba(255,255,255,0.25); padding: 4px 0 2px;
      position: relative;
    }
    #process .opt-divider-pro::before,
    #process .opt-divider-pro::after,
    #process .opt-divider-diy::before,
    #process .opt-divider-diy::after {
      content: ''; position: absolute; top: 50%; height: 1px;
      background: linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent);
    }
    #process .opt-divider-pro::before,
    #process .opt-divider-diy::before { left: 8%; right: 52%; }
    #process .opt-divider-pro::after,
    #process .opt-divider-diy::after { right: 8%; left: 52%; }

    /* Hide legacy card styles that conflict */
    #process .process-path-card,
    #process .process-path-card-inner,
    #process .opt-row,
    #process .opt-icon,
    #process .opt-body,
    #process .opt-title-row,
    #process .opt-title,
    #process .opt-kicker,
    #process .opt-cta,
    #process .opt-badge,
    #process .opt-selected {
      display: none !important;
    }
    #process .process-path-card-inner {
      padding: 14px 17px;
      z-index: 2;
      position: relative;
    }
    #process .opt-row {
      display: flex;
      align-items: center;
      gap: 13px;
    }
    #process .opt-icon {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 21px;
      border-radius: 10px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
    }
    #process .process-path-tier--pro .opt-icon {
      background: rgba(255,200,80,0.11);
      border-color: rgba(255,200,80,0.22);
    }
    #process .process-path-tier--diy .opt-icon {
      background: rgba(167,139,250,0.11);
      border-color: rgba(167,139,250,0.22);
    }
    #process .opt-body {
      flex: 1;
      min-width: 0;
    }
    #process .opt-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    #process .opt-title {
      font-size: 15.5px;
      font-weight: 700;
      color: var(--white);
      line-height: 1.2;
    }
    #process .opt-kicker {
      font-size: 12.5px;
      color: rgba(190,226,238,0.65);
      margin: 3px 0 0;
      line-height: 1.35;
    }
    #process .opt-cta {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      white-space: nowrap;
      padding-left: 8px;
      transition: color 0.2s ease, transform 0.2s ease;
    }
    #process .process-path-card:hover .opt-cta {
      color: var(--white);
      transform: translateX(2px);
    }

    /* Badges */
    #process .opt-badge {
      font-size: 10px;
      font-weight: 700;
      padding: 1px 7px;
      border-radius: 999px;
      letter-spacing: 0.5px;
    }
    #process .opt-badge.fastest {
      background: rgba(255,200,80,0.2);
      color: #ffe9a8;
      border: 1px solid rgba(255,200,80,0.4);
    }
    #process .opt-selected {
      font-size: 10px;
      font-weight: 700;
      padding: 1px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.1);
      color: #a5f3c9;
      border: 1px solid rgba(163,243,202,0.3);
    }

    /* Active + hover states */
    #process .process-path-card.is-active {
      border-color: rgba(255,255,255,0.55);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.045);
    }
    #process .process-path-tier--pro .process-path-card.is-active {
      border-color: rgba(255,200,80,0.7);
      box-shadow: 0 0 0 1px rgba(255,200,80,0.25);
    }
    #process .process-path-tier--diy .process-path-card.is-active {
      border-color: rgba(167,139,250,0.7);
      box-shadow: 0 0 0 1px rgba(167,139,250,0.25);
    }

    #process .process-path-card:hover:not(.is-active) {
      border-color: rgba(255,255,255,0.28);
      transform: translateY(-1px);
    }

    /* Hide old decorative bits that no longer apply */
    #process .process-path-card-bignum,
    #process .process-path-card-head,
    #process .process-path-card-num,
    #process .process-path-card-foot,
    #process .process-path-card-mid,
    #process .process-path-card-text,
    #process .process-path-card-title-row,
    #process .process-path-option-label,
    #process .process-path-selected-mark {
      display: none !important;
    }

    /* Clean up old or divider styles */
    #process .process-path-or { display: none !important; }

    /* Keep some of the glow/scanline for premium feel on active/hover */
    #process .process-path-card .process-path-card-glow {
      opacity: 0.6;
    }
    #process .process-path-card.is-active .process-path-card-glow {
      opacity: 0.95;
    }

    /* ── PREMIUM STEP CARDS ── */
    #process .proc-card-pro {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 0;
      padding: 18px 18px 16px;
      border-radius: 20px;
      border: 1px solid rgba(0,180,216,0.28);
      background:
        radial-gradient(circle at 50% -20%, rgba(0,180,216,0.22), transparent 55%),
        linear-gradient(180deg, rgba(3,15,32,0.95), rgba(4,22,46,0.88) 45%, rgba(2,11,28,0.95));
      box-shadow:
        0 24px 60px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 0 40px rgba(0,180,216,0.04);
      overflow: hidden;
      isolation: isolate;
      cursor: pointer;
      text-align: left;
      transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s cubic-bezier(0.16,1,0.3,1), border-color 0.4s ease;
    }
    #process .proc-card-pro:hover,
    #process .proc-card-pro:focus-visible {
      transform: translateY(-4px);
      border-color: rgba(125,225,255,0.65);
      box-shadow:
        0 36px 90px rgba(0,0,0,0.55),
        0 0 0 1px rgba(125,225,255,0.18),
        0 0 60px rgba(0,180,216,0.35),
        inset 0 1px 0 rgba(255,255,255,0.1);
      outline: none;
    }
    #process .proc-card-pro:focus-visible {
      outline: 2px solid rgba(125,225,255,0.86);
      outline-offset: 4px;
    }

    #process .proc-card-pro-workshop {
      border-color: rgba(255,200,80,0.28);
      background:
        radial-gradient(circle at 50% -20%, rgba(255,200,80,0.18), transparent 55%),
        linear-gradient(180deg, rgba(3,15,32,0.95), rgba(4,22,46,0.88) 45%, rgba(2,11,28,0.95));
    }
    #process .proc-card-pro-workshop:hover,
    #process .proc-card-pro-workshop:focus-visible {
      border-color: rgba(255,230,160,0.75);
      box-shadow:
        0 36px 90px rgba(0,0,0,0.55),
        0 0 0 1px rgba(255,230,160,0.18),
        0 0 60px rgba(255,200,80,0.28),
        inset 0 1px 0 rgba(255,255,255,0.1);
    }
    #process .proc-card-pro-photo {
      border-color: rgba(167,139,250,0.28);
      background:
        radial-gradient(circle at 50% -20%, rgba(167,139,250,0.18), transparent 55%),
        linear-gradient(180deg, rgba(3,15,32,0.95), rgba(4,22,46,0.88) 45%, rgba(2,11,28,0.95));
    }
    #process .proc-card-pro-photo:hover,
    #process .proc-card-pro-photo:focus-visible {
      border-color: rgba(196,181,253,0.75);
      box-shadow:
        0 36px 90px rgba(0,0,0,0.55),
        0 0 0 1px rgba(196,181,253,0.18),
        0 0 60px rgba(167,139,250,0.28),
        inset 0 1px 0 rgba(255,255,255,0.1);
    }
    #process .proc-card-pro-diy {
      border-color: rgba(144,224,239,0.28);
      background:
        radial-gradient(circle at 50% -20%, rgba(144,224,239,0.2), transparent 55%),
        linear-gradient(180deg, rgba(3,15,32,0.95), rgba(4,22,46,0.88) 45%, rgba(2,11,28,0.95));
    }
    #process .proc-card-pro-diy:hover,
    #process .proc-card-pro-diy:focus-visible {
      border-color: rgba(190,238,250,0.75);
      box-shadow:
        0 36px 90px rgba(0,0,0,0.55),
        0 0 0 1px rgba(190,238,250,0.2),
        0 0 60px rgba(144,224,239,0.3),
        inset 0 1px 0 rgba(255,255,255,0.1);
    }

    /* Top accent bar */
    #process .proc-card-pro::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, rgba(0,180,216,0.1), rgba(125,225,255,1) 50%, rgba(0,180,216,0.1));
      box-shadow: 0 0 22px rgba(0,180,216,0.55);
      z-index: 4;
    }
    #process .proc-card-pro-diy::before {
      background: linear-gradient(90deg, rgba(144,224,239,0.1), rgba(190,238,250,1) 50%, rgba(144,224,239,0.1));
      box-shadow: 0 0 22px rgba(144,224,239,0.5);
    }

    /* Animated glow patch */
    #process .proc-card-pro-glow {
      position: absolute;
      top: -40%; left: -20%; right: -20%;
      height: 80%;
      background: radial-gradient(ellipse at center, rgba(0,180,216,0.32), transparent 70%);
      filter: blur(40px);
      opacity: 0;
      transition: opacity 0.45s ease;
      pointer-events: none;
      z-index: 0;
    }
    #process .proc-card-pro:hover .proc-card-pro-glow,
    #process .proc-card-pro:focus-visible .proc-card-pro-glow { opacity: 1; }
    #process .proc-card-pro-diy .proc-card-pro-glow {
      background: radial-gradient(ellipse at center, rgba(144,224,239,0.28), transparent 70%);
    }

    /* Scanlines overlay */
    #process .proc-card-pro-scanlines {
      position: absolute;
      inset: 0;
      background-image: repeating-linear-gradient(0deg, rgba(125,225,255,0.04) 0 1px, transparent 1px 4px);
      pointer-events: none;
      opacity: 0.5;
      mix-blend-mode: overlay;
      z-index: 1;
    }

    /* Huge background number */
    #process .proc-card-pro-bignum {
      position: absolute;
      top: -22px; right: -14px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 200px;
      line-height: 1;
      color: rgba(0,180,216,0.07);
      letter-spacing: -6px;
      pointer-events: none;
      user-select: none;
      z-index: 1;
      transition: color 0.4s ease, transform 0.5s ease;
    }
    #process .proc-card-pro:hover .proc-card-pro-bignum {
      color: rgba(125,225,255,0.12);
      transform: scale(1.06);
    }
    #process .proc-card-pro-diy .proc-card-pro-bignum {
      color: rgba(144,224,239,0.07);
    }
    #process .proc-card-pro-diy:hover .proc-card-pro-bignum {
      color: rgba(190,238,250,0.13);
    }

    /* Header: number orb + meta */
    #process .proc-card-pro-head {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    #process .proc-card-pro-num-orb {
      width: 44px; height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle at 30% 30%, rgba(125,225,255,0.95), rgba(0,180,216,0.7) 60%, rgba(0,120,160,0.55));
      box-shadow:
        0 0 0 1px rgba(125,225,255,0.4),
        0 0 0 6px rgba(0,180,216,0.08),
        0 0 24px rgba(0,180,216,0.55),
        inset 0 1px 0 rgba(255,255,255,0.5);
      flex-shrink: 0;
    }
    #process .proc-card-pro-num {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 22px;
      color: #001a26;
      line-height: 1;
      font-weight: 800;
    }
    #process .proc-card-pro-diy .proc-card-pro-num-orb {
      background: radial-gradient(circle at 30% 30%, rgba(220,248,255,0.95), rgba(144,224,239,0.75) 60%, rgba(100,180,210,0.55));
      box-shadow:
        0 0 0 1px rgba(190,238,250,0.45),
        0 0 0 6px rgba(144,224,239,0.08),
        0 0 24px rgba(144,224,239,0.5),
        inset 0 1px 0 rgba(255,255,255,0.5);
    }
    #process .proc-card-pro-meta {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    #process .proc-card-pro-label {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 13px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--foam-teal);
    }
    #process .proc-card-pro-diy .proc-card-pro-label {
      color: var(--foam-light);
    }
    #process .proc-card-pro-duration {
      font-size: 11px;
      color: rgba(202,232,240,0.62);
      letter-spacing: 0.4px;
    }

    /* Icon frame */
    #process .proc-card-pro-icon-frame {
      position: relative;
      z-index: 3;
      width: 52px; height: 52px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(140deg, rgba(0,180,216,0.15), rgba(0,180,216,0.05));
      border: 1px solid rgba(125,225,255,0.25);
      margin-bottom: 10px;
      box-shadow: inset 0 0 24px rgba(0,180,216,0.12);
    }
    #process .proc-card-pro-diy .proc-card-pro-icon-frame {
      background: linear-gradient(140deg, rgba(144,224,239,0.15), rgba(144,224,239,0.05));
      border-color: rgba(190,238,250,0.28);
    }
    #process .proc-card-pro-icon {
      font-size: 26px;
      line-height: 1;
    }

    /* Title */
    #process .proc-card-pro-title {
      position: relative;
      z-index: 3;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 24px;
      letter-spacing: 0.8px;
      color: var(--white);
      margin: 0 0 12px 0;
      line-height: 1.05;
      flex: 1;
    }

    /* Description + mini stats hidden — details live in modal */
    #process .proc-card-pro-desc,
    #process .proc-card-pro-mini-stats {
      display: none !important;
    }
    #process .proc-mini-stat {
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(0,180,216,0.08);
      border: 1px solid rgba(0,180,216,0.2);
      text-align: left;
    }
    #process .proc-card-pro-diy .proc-mini-stat {
      background: rgba(144,224,239,0.08);
      border-color: rgba(144,224,239,0.22);
    }
    #process .proc-mini-stat strong {
      display: block;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 18px;
      color: var(--white);
      line-height: 1;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }
    #process .proc-mini-stat span {
      font-size: 10px;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: rgba(195,225,237,0.7);
    }

    /* CTA button */
    #process .proc-card-pro-cta {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      margin-top: auto;
      padding: 11px 14px;
      border-radius: 10px;
      border: 1px solid rgba(125,225,255,0.4);
      background: linear-gradient(135deg, rgba(0,180,216,0.18), rgba(0,180,216,0.32));
      color: var(--white);
      font-family: 'Bebas Neue', sans-serif;
      font-size: 14px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
      box-shadow: 0 8px 24px rgba(0,180,216,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
    }
    #process .proc-card-pro-cta:hover,
    #process .proc-card-pro:hover .proc-card-pro-cta {
      background: linear-gradient(135deg, rgba(0,180,216,0.4), rgba(125,225,255,0.55));
      border-color: rgba(190,240,255,0.7);
      box-shadow: 0 12px 36px rgba(0,180,216,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
      color: #001020;
    }
    #process .proc-card-pro-cta-diy {
      border-color: rgba(190,238,250,0.4);
      background: linear-gradient(135deg, rgba(144,224,239,0.18), rgba(144,224,239,0.32));
    }
    #process .proc-card-pro-cta-diy:hover,
    #process .proc-card-pro-diy:hover .proc-card-pro-cta-diy {
      background: linear-gradient(135deg, rgba(144,224,239,0.4), rgba(220,248,255,0.55));
      border-color: rgba(230,250,255,0.7);
      box-shadow: 0 12px 36px rgba(144,224,239,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
    }
    #process .proc-cta-arrow {
      font-size: 16px;
      transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
    }
    #process .proc-card-pro:hover .proc-cta-arrow {
      transform: translateX(6px);
    }

    /* ── PROCESS STEP MODAL ── */
    .proc-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 32px 20px;
    }
    .proc-modal.is-open { display: flex; }
    .proc-modal-backdrop {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, rgba(2,11,31,0.85), rgba(0,5,15,0.96));
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      animation: procModalFadeIn 0.35s ease;
    }
    @keyframes procModalFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .proc-modal-shell {
      position: relative;
      width: min(940px, 100%);
      max-height: calc(100vh - 64px);
      overflow-y: auto;
      border-radius: 26px;
      border: 1px solid rgba(125,225,255,0.32);
      background:
        radial-gradient(circle at 50% -10%, rgba(0,180,216,0.22), transparent 50%),
        linear-gradient(180deg, rgba(3,15,32,0.98), rgba(4,22,46,0.96) 45%, rgba(2,11,28,0.98));
      box-shadow:
        0 50px 120px rgba(0,0,0,0.7),
        0 0 0 1px rgba(125,225,255,0.12),
        0 0 80px rgba(0,180,216,0.32),
        inset 0 1px 0 rgba(255,255,255,0.08);
      animation: procModalRise 0.5s cubic-bezier(0.16,1,0.3,1);
    }
    .proc-modal.is-diy .proc-modal-shell {
      border-color: rgba(190,238,250,0.32);
      background:
        radial-gradient(circle at 50% -10%, rgba(144,224,239,0.22), transparent 50%),
        linear-gradient(180deg, rgba(3,15,32,0.98), rgba(4,22,46,0.96) 45%, rgba(2,11,28,0.98));
      box-shadow:
        0 50px 120px rgba(0,0,0,0.7),
        0 0 0 1px rgba(190,238,250,0.14),
        0 0 80px rgba(144,224,239,0.28),
        inset 0 1px 0 rgba(255,255,255,0.08);
    }
    @keyframes procModalRise {
      from { opacity: 0; transform: translateY(24px) scale(0.96); }
      to   { opacity: 1; transform: translateY(0)    scale(1);    }
    }

    /* Close button */
    .proc-modal-close {
      position: absolute;
      top: 18px; right: 18px;
      width: 38px; height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(125,225,255,0.3);
      background: rgba(0,180,216,0.12);
      color: var(--white);
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s ease;
      z-index: 10;
    }
    .proc-modal-close:hover {
      background: rgba(0,180,216,0.35);
      border-color: rgba(190,240,255,0.7);
      transform: rotate(90deg);
    }

    /* Hero */
    .proc-modal-hero {
      position: relative;
      padding: 44px 44px 28px;
      display: flex;
      align-items: flex-start;
      gap: 24px;
      border-bottom: 1px solid rgba(125,225,255,0.12);
    }
    .proc-modal-hero::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, rgba(0,180,216,0.1), rgba(125,225,255,1) 50%, rgba(0,180,216,0.1));
      box-shadow: 0 0 20px rgba(0,180,216,0.6);
      border-radius: 26px 26px 0 0;
    }
    .proc-modal.is-diy .proc-modal-hero::before {
      background: linear-gradient(90deg, rgba(144,224,239,0.1), rgba(190,238,250,1) 50%, rgba(144,224,239,0.1));
      box-shadow: 0 0 20px rgba(144,224,239,0.55);
    }
    .proc-modal-hero-num {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 96px;
      line-height: 0.85;
      color: rgba(125,225,255,0.18);
      letter-spacing: -2px;
      flex-shrink: 0;
      text-shadow: 0 0 40px rgba(0,180,216,0.3);
    }
    .proc-modal.is-diy .proc-modal-hero-num {
      color: rgba(190,238,250,0.18);
      text-shadow: 0 0 40px rgba(144,224,239,0.3);
    }
    .proc-modal-hero-info { flex: 1; min-width: 0; }
    .proc-modal-hero-label {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 12px;
      letter-spacing: 3.5px;
      text-transform: uppercase;
      color: var(--foam-teal);
      margin-bottom: 10px;
    }
    .proc-modal.is-diy .proc-modal-hero-label { color: var(--foam-light); }
    .proc-modal-hero-title-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 10px;
    }
    .proc-modal-hero-icon {
      font-size: 40px;
      line-height: 1;
    }
    .proc-modal-hero-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 42px;
      letter-spacing: 0.5px;
      color: var(--white);
      margin: 0;
      line-height: 1;
    }
    .proc-modal-hero-subtitle {
      font-size: 14px;
      line-height: 1.6;
      color: rgba(195,225,237,0.78);
      margin: 0;
      font-style: italic;
    }

    /* Stat strip */
    .proc-modal-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      padding: 24px 44px;
      border-bottom: 1px solid rgba(125,225,255,0.1);
      background: rgba(0,180,216,0.04);
    }
    .pm-stat {
      padding: 14px 12px;
      border-radius: 12px;
      background: rgba(0,180,216,0.08);
      border: 1px solid rgba(125,225,255,0.2);
      text-align: center;
    }
    .proc-modal.is-diy .pm-stat {
      background: rgba(144,224,239,0.08);
      border-color: rgba(190,238,250,0.22);
    }
    .pm-stat-value {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 26px;
      color: var(--white);
      line-height: 1;
      margin-bottom: 6px;
      letter-spacing: 0.5px;
    }
    .pm-stat-value small {
      font-size: 13px;
      color: rgba(195,225,237,0.7);
      margin-left: 2px;
    }
    .pm-stat-label {
      font-size: 10px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgba(195,225,237,0.7);
    }

    /* Body sections */
    .proc-modal-body {
      padding: 28px 44px 32px;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }
    .pm-section { display: flex; flex-direction: column; gap: 12px; }
    .pm-section-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 13px;
      letter-spacing: 3.5px;
      text-transform: uppercase;
      color: var(--foam-teal);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .proc-modal.is-diy .pm-section-title { color: var(--foam-light); }
    .pm-section-title::after {
      content: "";
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, rgba(0,180,216,0.45), transparent);
    }
    .proc-modal.is-diy .pm-section-title::after {
      background: linear-gradient(90deg, rgba(144,224,239,0.45), transparent);
    }
    .pm-paragraph {
      font-size: 14.5px;
      line-height: 1.75;
      color: rgba(210,232,242,0.86);
      margin: 0;
    }
    .pm-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 10px;
    }
    .pm-list li {
      position: relative;
      padding: 12px 14px 12px 42px;
      border-radius: 12px;
      background: rgba(0,180,216,0.05);
      border: 1px solid rgba(0,180,216,0.14);
      font-size: 13.5px;
      line-height: 1.55;
      color: rgba(210,232,242,0.88);
    }
    .proc-modal.is-diy .pm-list li {
      background: rgba(144,224,239,0.05);
      border-color: rgba(144,224,239,0.14);
    }
    .pm-list li::before {
      content: "✓";
      position: absolute;
      left: 14px;
      top: 12px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(0,180,216,0.25);
      color: var(--foam-teal);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      box-shadow: 0 0 12px rgba(0,180,216,0.4);
    }
    .proc-modal.is-diy .pm-list li::before {
      background: rgba(144,224,239,0.28);
      color: var(--foam-light);
      box-shadow: 0 0 12px rgba(144,224,239,0.4);
    }
    .pm-faq { display: grid; gap: 12px; }
    .pm-faq-item {
      padding: 16px 18px;
      border-radius: 14px;
      background: rgba(0,180,216,0.06);
      border: 1px solid rgba(0,180,216,0.16);
    }
    .proc-modal.is-diy .pm-faq-item {
      background: rgba(144,224,239,0.06);
      border-color: rgba(144,224,239,0.16);
    }
    .pm-faq-q {
      font-family: Montserrat, sans-serif;
      font-size: 13px;
      font-weight: 700;
      color: var(--white);
      margin: 0 0 6px 0;
      display: flex;
      gap: 8px;
    }
    .pm-faq-q::before {
      content: "Q.";
      color: var(--foam-teal);
      font-family: 'Bebas Neue', sans-serif;
      font-size: 15px;
      letter-spacing: 1px;
    }
    .proc-modal.is-diy .pm-faq-q::before { color: var(--foam-light); }
    .pm-faq-a {
      font-size: 13px;
      line-height: 1.65;
      color: rgba(210,232,242,0.82);
      margin: 0;
      padding-left: 22px;
    }
    .pm-callout {
      padding: 18px 20px;
      border-radius: 14px;
      background:
        linear-gradient(135deg, rgba(0,180,216,0.18), rgba(0,180,216,0.06));
      border: 1px solid rgba(125,225,255,0.32);
      font-size: 13.5px;
      line-height: 1.65;
      color: rgba(220,242,250,0.92);
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }
    .proc-modal.is-diy .pm-callout {
      background: linear-gradient(135deg, rgba(144,224,239,0.18), rgba(144,224,239,0.06));
      border-color: rgba(190,238,250,0.32);
    }
    .pm-callout::before {
      content: "💡";
      font-size: 22px;
      line-height: 1.2;
    }

    /* Footer nav */
    .proc-modal-footer {
      padding: 22px 44px 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      border-top: 1px solid rgba(125,225,255,0.12);
      background: rgba(0,180,216,0.03);
    }
    .pm-nav-btn {
      padding: 12px 22px;
      border-radius: 12px;
      border: 1px solid rgba(125,225,255,0.3);
      background: rgba(0,180,216,0.1);
      color: var(--white);
      font-family: 'Bebas Neue', sans-serif;
      font-size: 13px;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .pm-nav-btn:hover:not(:disabled) {
      background: rgba(0,180,216,0.32);
      border-color: rgba(190,240,255,0.65);
      transform: translateY(-2px);
    }
    .pm-nav-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
    .pm-nav-next {
      background: linear-gradient(135deg, rgba(0,180,216,0.35), rgba(125,225,255,0.45));
      border-color: rgba(190,240,255,0.55);
    }
    .pm-nav-next:hover:not(:disabled) {
      background: linear-gradient(135deg, rgba(0,180,216,0.6), rgba(125,225,255,0.7));
      box-shadow: 0 12px 30px rgba(0,180,216,0.4);
      color: #001020;
    }
    .proc-modal.is-diy .pm-nav-next {
      background: linear-gradient(135deg, rgba(144,224,239,0.35), rgba(220,248,255,0.45));
      border-color: rgba(230,250,255,0.55);
    }

    @media (max-width: 760px) {
      .proc-modal { padding: 12px; }
      .proc-modal-hero { padding: 32px 22px 22px; flex-direction: column; gap: 14px; }
      .proc-modal-hero-num { font-size: 70px; }
      .proc-modal-hero-title { font-size: 32px; }
      .proc-modal-stats { grid-template-columns: 1fr 1fr; padding: 18px 22px; gap: 10px; }
      .proc-modal-body { padding: 22px; gap: 22px; }
      .proc-modal-footer { padding: 18px 22px 22px; flex-direction: column; }
      .pm-nav-btn { width: 100%; }
    }

    #process .process-path {
      display: none !important;
    }

    /* ── BRILLIANT PATH MODAL ── */
    .path-modal {
      position: fixed; inset: 0; z-index: 10000; display: none;
      align-items: center; justify-content: center; padding: 24px 16px;
    }
    .path-modal.is-open { display: flex; }

    .path-modal-backdrop {
      position: absolute; inset: 0;
      background: rgba(2,8,22,0.92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .path-modal-shell {
      position: relative; width: min(920px, 100%);
      max-height: calc(100vh - 48px); overflow-y: auto;
      border-radius: 24px; border: 1px solid rgba(255,255,255,0.1);
      background: linear-gradient(180deg, #0a1628 0%, #061120 100%);
      box-shadow: 0 40px 100px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.06);
      scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent;
    }
    .path-modal--workshop .path-modal-shell {
      border-color: rgba(255,200,80,0.35);
      box-shadow: 0 40px 100px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,200,80,0.1);
    }
    .path-modal--photomodeller .path-modal-shell,
    .path-modal--diy .path-modal-shell {
      border-color: rgba(167,139,250,0.38);
      box-shadow: 0 40px 100px rgba(0,0,0,0.75), 0 0 0 1px rgba(167,139,250,0.1);
    }

    .path-modal-close {
      position: absolute; top: 18px; right: 18px; z-index: 20;
      width: 36px; height: 36px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.2);
      background: rgba(255,255,255,0.04);
      color: #fff; font-size: 15px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: transform .2s ease, background .2s ease;
    }
    .path-modal-close:hover { transform: rotate(90deg); background: rgba(255,255,255,0.1); }

    .ppm-header {
      padding: 36px 40px 26px 40px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    }
    .ppm-header::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, rgba(0,180,216,0.1), rgba(125,225,255,1) 50%, rgba(0,180,216,0.1));
      box-shadow: 0 0 22px rgba(0,180,216,0.5);
      border-radius: 28px 28px 0 0;
    }
    .path-modal--workshop .ppm-header::before {
      background: linear-gradient(90deg, rgba(255,200,80,0.1), rgba(255,230,160,1) 50%, rgba(255,200,80,0.1));
      box-shadow: 0 0 22px rgba(255,200,80,0.45);
    }
    .path-modal--photomodeller .ppm-header::before {
      background: linear-gradient(90deg, rgba(167,139,250,0.1), rgba(196,181,253,1) 50%, rgba(167,139,250,0.1));
      box-shadow: 0 0 22px rgba(167,139,250,0.45);
    }
    .path-modal--diy .ppm-header::before {
      background: linear-gradient(90deg, rgba(144,224,239,0.1), rgba(190,238,250,1) 50%, rgba(144,224,239,0.1));
      box-shadow: 0 0 22px rgba(144,224,239,0.45);
    }

    .ppm-header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .ppm-tier-tag {
      font-size: 8px;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 999px;
      color: var(--foam-teal);
      background: rgba(0,180,216,0.12);
      border: 1px solid rgba(0,180,216,0.22);
    }
    .path-modal--workshop .ppm-tier-tag {
      color: #ffe9a8;
      background: rgba(255,200,80,0.12);
      border-color: rgba(255,200,80,0.25);
    }
    .path-modal--photomodeller .ppm-tier-tag {
      color: #c4b5fd;
      background: rgba(167,139,250,0.12);
      border-color: rgba(167,139,250,0.25);
    }
    .path-modal--diy .ppm-tier-tag {
      color: var(--foam-light);
      background: rgba(144,224,239,0.12);
      border-color: rgba(144,224,239,0.25);
    }
    .ppm-step-count {
      font-size: 9px;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      font-weight: 700;
      color: rgba(255,255,255,0.45);
    }
    .ppm-title-row {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }
    .ppm-icon {
      width: 52px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      border-radius: 14px;
      background: rgba(0,180,216,0.1);
      border: 1px solid rgba(125,225,255,0.22);
      flex-shrink: 0;
    }
    .path-modal--workshop .ppm-icon {
      background: rgba(255,200,80,0.1);
      border-color: rgba(255,200,80,0.25);
    }
    .path-modal--photomodeller .ppm-icon {
      background: rgba(167,139,250,0.1);
      border-color: rgba(167,139,250,0.25);
    }
    .path-modal--diy .ppm-icon {
      background: rgba(144,224,239,0.1);
      border-color: rgba(190,238,250,0.22);
    }
    .ppm-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(32px, 5vw, 44px);
      letter-spacing: 1px;
      color: var(--white);
      margin: 0;
      line-height: 1;
    }
    .ppm-badge {
      font-size: 8px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-weight: 800;
      color: #ffe9a8;
      background: rgba(255,200,80,0.14);
      border: 1px solid rgba(255,200,80,0.35);
      border-radius: 999px;
      padding: 3px 9px;
    }
    .ppm-kicker {
      font-size: 14px;
      line-height: 1.5;
      color: rgba(190,226,238,0.72);
      margin: 0;
      max-width: 640px;
    }

    .ppm-connector {
      position: relative;
      height: 2px;
      margin: 0 44px 8px;
    }
    .ppm-connector-track {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg,
        rgba(0,180,216,0.05) 0%,
        rgba(0,180,216,0.5) 18%,
        rgba(0,180,216,0.5) 82%,
        rgba(0,180,216,0.05) 100%);
      filter: drop-shadow(0 0 6px rgba(0,180,216,0.4));
    }
    .path-modal--workshop .ppm-connector-track {
      background: linear-gradient(90deg, rgba(255,200,80,0.05) 0%, rgba(255,200,80,0.55) 18%, rgba(255,200,80,0.55) 82%, rgba(255,200,80,0.05) 100%);
      filter: drop-shadow(0 0 6px rgba(255,200,80,0.4));
    }
    .path-modal--photomodeller .ppm-connector-track {
      background: linear-gradient(90deg, rgba(167,139,250,0.05) 0%, rgba(167,139,250,0.55) 18%, rgba(167,139,250,0.55) 82%, rgba(167,139,250,0.05) 100%);
      filter: drop-shadow(0 0 6px rgba(167,139,250,0.4));
    }
    .path-modal--diy .ppm-connector-track {
      background: linear-gradient(90deg, rgba(144,224,239,0.05) 0%, rgba(144,224,239,0.55) 18%, rgba(144,224,239,0.55) 82%, rgba(144,224,239,0.05) 100%);
      filter: drop-shadow(0 0 6px rgba(144,224,239,0.4));
    }
    .ppm-connector-pulse {
      position: absolute;
      top: -3px;
      left: 0;
      width: 56px;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(125,225,255,0.95), transparent);
      filter: blur(3px);
      animation: procPulseRun 4.5s linear infinite;
    }
    .path-modal--workshop .ppm-connector-pulse {
      background: linear-gradient(90deg, transparent, rgba(255,230,160,0.95), transparent);
    }
    .path-modal--photomodeller .ppm-connector-pulse {
      background: linear-gradient(90deg, transparent, rgba(196,181,253,0.95), transparent);
    }
    .path-modal--diy .ppm-connector-pulse {
      background: linear-gradient(90deg, transparent, rgba(190,238,250,0.95), transparent);
    }

    .ppm-timeline {
      padding: 8px 44px 32px;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .ppm-step {
      position: relative;
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      gap: 20px;
      padding-bottom: 36px;
    }
    .ppm-step:last-child { padding-bottom: 8px; }
    .ppm-step:not(:last-child)::before {
      content: "";
      position: absolute;
      left: 35px;
      top: 56px;
      bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, rgba(0,180,216,0.45), rgba(0,180,216,0.08));
    }
    .path-modal--workshop .ppm-step:not(:last-child)::before {
      background: linear-gradient(180deg, rgba(255,200,80,0.45), rgba(255,200,80,0.08));
    }
    .path-modal--photomodeller .ppm-step:not(:last-child)::before {
      background: linear-gradient(180deg, rgba(167,139,250,0.45), rgba(167,139,250,0.08));
    }
    .path-modal--diy .ppm-step:not(:last-child)::before {
      background: linear-gradient(180deg, rgba(144,224,239,0.45), rgba(144,224,239,0.08));
    }

    .ppm-step-marker {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding-top: 4px;
    }
    .ppm-step-orb {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 20px;
      font-weight: 800;
      color: #001a26;
      background: radial-gradient(circle at 30% 30%, rgba(125,225,255,0.95), rgba(0,180,216,0.7) 60%, rgba(0,120,160,0.55));
      box-shadow: 0 0 0 1px rgba(125,225,255,0.4), 0 0 20px rgba(0,180,216,0.45);
    }
    .path-modal--workshop .ppm-step-orb {
      color: #2a1800;
      background: radial-gradient(circle at 30% 30%, rgba(255,230,160,0.95), rgba(255,200,80,0.75) 60%, rgba(200,150,50,0.55));
      box-shadow: 0 0 0 1px rgba(255,230,160,0.4), 0 0 20px rgba(255,200,80,0.4);
    }
    .path-modal--photomodeller .ppm-step-orb {
      color: #1a1030;
      background: radial-gradient(circle at 30% 30%, rgba(196,181,253,0.95), rgba(167,139,250,0.75) 60%, rgba(120,90,200,0.55));
      box-shadow: 0 0 0 1px rgba(196,181,253,0.4), 0 0 20px rgba(167,139,250,0.4);
    }
    .path-modal--diy .ppm-step-orb {
      color: #001a26;
      background: radial-gradient(circle at 30% 30%, rgba(220,248,255,0.95), rgba(144,224,239,0.75) 60%, rgba(100,180,210,0.55));
      box-shadow: 0 0 0 1px rgba(190,238,250,0.45), 0 0 20px rgba(144,224,239,0.4);
    }
    .ppm-step-bignum {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 28px;
      line-height: 1;
      color: rgba(125,225,255,0.22);
      letter-spacing: -1px;
    }
    .path-modal--workshop .ppm-step-bignum { color: rgba(255,200,80,0.28); }
    .path-modal--photomodeller .ppm-step-bignum { color: rgba(167,139,250,0.28); }
    .path-modal--diy .ppm-step-bignum { color: rgba(144,224,239,0.28); }

    .ppm-step-card {
      position: relative;
      overflow: hidden;
      border-radius: 18px;
      border: 1px solid rgba(0,180,216,0.22);
      background:
        radial-gradient(circle at 50% -20%, rgba(0,180,216,0.12), transparent 55%),
        linear-gradient(180deg, rgba(4,20,40,0.92), rgba(6,28,52,0.82));
      padding: 22px 24px;
      box-shadow: 0 12px 36px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .path-modal--workshop .ppm-step-card {
      border-color: rgba(255,200,80,0.22);
      background: radial-gradient(circle at 50% -20%, rgba(255,200,80,0.1), transparent 55%), linear-gradient(180deg, rgba(4,20,40,0.92), rgba(8,28,48,0.82));
    }
    .path-modal--photomodeller .ppm-step-card {
      border-color: rgba(167,139,250,0.22);
      background: radial-gradient(circle at 50% -20%, rgba(167,139,250,0.1), transparent 55%), linear-gradient(180deg, rgba(4,20,40,0.92), rgba(10,22,44,0.82));
    }
    .path-modal--diy .ppm-step-card {
      border-color: rgba(144,224,239,0.22);
      background: radial-gradient(circle at 50% -20%, rgba(144,224,239,0.1), transparent 55%), linear-gradient(180deg, rgba(4,20,40,0.92), rgba(8,26,46,0.82));
    }
    .ppm-step-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, rgba(0,180,216,0.1), rgba(125,225,255,0.9) 50%, rgba(0,180,216,0.1));
    }
    .path-modal--workshop .ppm-step-card::before {
      background: linear-gradient(90deg, rgba(255,200,80,0.1), rgba(255,230,160,0.9) 50%, rgba(255,200,80,0.1));
    }
    .path-modal--photomodeller .ppm-step-card::before {
      background: linear-gradient(90deg, rgba(167,139,250,0.1), rgba(196,181,253,0.9) 50%, rgba(167,139,250,0.1));
    }
    .path-modal--diy .ppm-step-card::before {
      background: linear-gradient(90deg, rgba(144,224,239,0.1), rgba(190,238,250,0.9) 50%, rgba(144,224,239,0.1));
    }
    .ppm-step-card-bignum {
      position: absolute;
      top: -8px;
      right: 8px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 88px;
      line-height: 1;
      color: rgba(0,180,216,0.06);
      letter-spacing: -3px;
      pointer-events: none;
      user-select: none;
    }
    .path-modal--workshop .ppm-step-card-bignum { color: rgba(255,200,80,0.07); }
    .path-modal--photomodeller .ppm-step-card-bignum { color: rgba(167,139,250,0.07); }
    .path-modal--diy .ppm-step-card-bignum { color: rgba(144,224,239,0.07); }

    .ppm-step-head {
      position: relative;
      z-index: 1;
      margin-bottom: 14px;
    }
    .ppm-step-label {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--foam-teal);
      margin-bottom: 6px;
    }
    .path-modal--workshop .ppm-step-label { color: #ffe9a8; }
    .path-modal--photomodeller .ppm-step-label { color: #c4b5fd; }
    .path-modal--diy .ppm-step-label { color: var(--foam-light); }
    .ppm-step-title-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }
    .ppm-step-icon { font-size: 22px; line-height: 1; }
    .ppm-step-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 26px;
      letter-spacing: 0.5px;
      color: var(--white);
      margin: 0;
      line-height: 1.1;
    }
    .ppm-step-subtitle {
      font-size: 13px;
      line-height: 1.5;
      color: rgba(190,226,238,0.68);
      margin: 0;
    }

    .ppm-step-stats {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 18px;
    }
    .ppm-stat {
      padding: 10px 12px;
      border-radius: 10px;
      background: rgba(0,180,216,0.06);
      border: 1px solid rgba(125,225,255,0.14);
      text-align: center;
    }
    .path-modal--workshop .ppm-stat {
      background: rgba(255,200,80,0.06);
      border-color: rgba(255,200,80,0.16);
    }
    .path-modal--photomodeller .ppm-stat {
      background: rgba(167,139,250,0.06);
      border-color: rgba(167,139,250,0.16);
    }
    .path-modal--diy .ppm-stat {
      background: rgba(144,224,239,0.06);
      border-color: rgba(190,238,250,0.14);
    }
    .ppm-stat-value {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 20px;
      line-height: 1;
      color: var(--white);
      margin-bottom: 3px;
    }
    .ppm-stat-value small {
      font-size: 11px;
      letter-spacing: 1px;
      margin-left: 2px;
      opacity: 0.75;
    }
    .ppm-stat-label {
      font-size: 9px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(190,226,238,0.55);
      font-weight: 700;
    }

    .ppm-step-body {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .ppm-glance {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 20px;
      max-width: 560px;
    }
    .ppm-step-toprow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }
    .ppm-step-toprow .ppm-step-label { margin-bottom: 0; }
    .ppm-step-chip {
      font-size: 10px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 999px;
      white-space: nowrap;
      color: rgba(190,226,238,0.75);
      background: rgba(0,180,216,0.08);
      border: 1px solid rgba(125,225,255,0.2);
    }
    .path-modal--workshop .ppm-step-chip { color: #ffe9a8; background: rgba(255,200,80,0.08); border-color: rgba(255,200,80,0.25); }
    .path-modal--photomodeller .ppm-step-chip { color: #c4b5fd; background: rgba(167,139,250,0.08); border-color: rgba(167,139,250,0.25); }
    .path-modal--diy .ppm-step-chip { color: var(--foam-light); background: rgba(144,224,239,0.08); border-color: rgba(144,224,239,0.22); }
    .ppm-step-desc {
      position: relative;
      z-index: 1;
      font-size: 13.5px;
      line-height: 1.7;
      color: rgba(190,226,238,0.72);
      margin: 10px 0 0;
    }
    .ppm-step-desc strong { color: var(--white); }
    .ppm-step-card .ppm-film-calc {
      position: relative;
      z-index: 1;
      margin-top: 14px;
      margin-bottom: 0;
    }

    .ppm-film-calc {
      background: rgba(144,224,239,0.08);
      border: 1px solid rgba(144,224,239,0.22);
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 4px;
    }
    .ppm-film-calc-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 12px;
      margin-bottom: 10px;
    }
    .ppm-film-calc-label {
      font-size: 10px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-weight: 800;
      color: var(--foam-light);
    }
    .ppm-film-calc-total {
      font-size: 22px;
      color: var(--white);
      font-weight: 700;
    }
    .ppm-film-calc input[type="range"] {
      width: 100%;
      accent-color: var(--foam-light);
    }
    .ppm-film-calc-foot {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-top: 8px;
      font-size: 11px;
      color: rgba(190,226,238,0.55);
    }

    .ppm-extras {
      padding: 0 44px 24px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .ppm-extra-panel {
      padding: 20px 24px;
      border-radius: 14px;
      border: 1px solid rgba(125,225,255,0.16);
      background: rgba(3,13,26,0.55);
    }
    .ppm-extra-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 12px;
      letter-spacing: 3px;
      margin-bottom: 10px;
      color: var(--foam-teal);
    }
    .ppm-extra-body {
      font-size: 13px;
      line-height: 1.7;
      color: rgba(190,226,238,0.68);
      margin: 0;
    }
    .ppm-extra-body a {
      color: var(--foam-teal);
      text-decoration: none;
      font-weight: 600;
    }
    .ppm-extra-body strong { color: var(--white); }
    .ppm-extra-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .ppm-extra-grid-item {
      border: 1px solid rgba(125,225,255,0.14);
      border-radius: 10px;
      padding: 12px;
      font-size: 12px;
      line-height: 1.5;
      color: rgba(190,226,238,0.62);
    }
    .ppm-extra-grid-item strong {
      display: block;
      color: var(--white);
      font-size: 12px;
      margin-bottom: 4px;
    }
    .ppm-extra-panel--warning {
      background: rgba(80,30,30,0.35);
      border-color: rgba(248,113,113,0.35);
    }
    .ppm-extra-panel--warning .ppm-extra-title { color: #fca5a5; }

    .ppm-included {
      margin: 0 44px 24px;
      padding: 20px 24px;
      border-radius: 16px;
      border: 1px solid rgba(0,180,216,0.22);
      background: rgba(0,180,216,0.06);
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 18px;
      align-items: center;
    }
    .path-modal--workshop .ppm-included {
      border-color: rgba(255,200,80,0.26);
      background: rgba(255,200,80,0.06);
    }
    .path-modal--photomodeller .ppm-included {
      border-color: rgba(167,139,250,0.22);
      background: rgba(167,139,250,0.06);
    }
    .path-modal--diy .ppm-included {
      border-color: rgba(144,224,239,0.2);
      background: rgba(144,224,239,0.05);
    }
    .ppm-included-label {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 12px;
      letter-spacing: 3px;
      color: var(--foam-teal);
      white-space: nowrap;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(0,180,216,0.1);
      border: 1px solid rgba(125,225,255,0.16);
    }
    .path-modal--workshop .ppm-included-label { color: #ffe9a8; background: rgba(255,200,80,0.1); border-color: rgba(255,200,80,0.2); }
    .path-modal--photomodeller .ppm-included-label { color: #c4b5fd; background: rgba(167,139,250,0.1); border-color: rgba(167,139,250,0.2); }
    .path-modal--diy .ppm-included-label { color: var(--foam-light); background: rgba(144,224,239,0.1); border-color: rgba(190,238,250,0.16); }
    .ppm-included-items {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
    }
    .ppm-included-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: rgba(190,226,238,0.68);
    }
    .ppm-included-item span:first-child { font-weight: 700; color: var(--foam-teal); }
    .path-modal--workshop .ppm-included-item span:first-child { color: #ffe9a8; }
    .path-modal--photomodeller .ppm-included-item span:first-child { color: #c4b5fd; }
    .path-modal--diy .ppm-included-item span:first-child { color: var(--foam-light); }

    .ppm-footer {
      padding: 24px 40px 30px;
      border-top: 1px solid rgba(255,255,255,0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
      background: rgba(0,0,0,0.15);
    }
    .ppm-footer-left {
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
    }
    .ppm-cta-primary {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .4px;
      padding: 12px 26px;
      border-radius: 999px;
      border: none;
      background: #fff;
      color: #0a1628;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(0,0,0,0.25);
      transition: all .2s ease;
    }
    .path-modal--workshop .ppm-cta-primary { background: #ffe9a8; color: #2a1800; }
    .path-modal--photomodeller .ppm-cta-primary,
    .path-modal--diy .ppm-cta-primary { background: #c4b5fd; color: #1f1738; }
    .ppm-cta-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 22px rgba(0,0,0,0.35);
    }
    .ppm-cta-quote {
      color: rgba(255,255,255,0.65);
      font-size: 13.5px;
      text-decoration: none;
      font-weight: 500;
      transition: color .2s;
    }
    .ppm-cta-quote:hover {
      color: #fff;
    }
    .ppm-cta-close {
      font-size: 13px;
      color: rgba(255,255,255,0.45);
      background: transparent;
      border: 1px solid rgba(255,255,255,0.12);
      padding: 9px 18px;
      border-radius: 999px;
      cursor: pointer;
      transition: all .2s;
    }
    .ppm-cta-close:hover {
      color: #fff;
      border-color: rgba(255,255,255,0.3);
    }

    .path-modal--workshop .pm-section-title { color: #ffe9a8; }
    .path-modal--workshop .pm-section-title::after { background: linear-gradient(90deg, rgba(255,200,80,0.5), transparent); }
    .path-modal--workshop .pm-list li::before { color: #ffe9a8; }
    .path-modal--workshop .pm-faq-q::before { color: #ffe9a8; }
    .path-modal--workshop .pm-callout {
      background: linear-gradient(135deg, rgba(255,200,80,0.16), rgba(255,200,80,0.05));
      border-color: rgba(255,200,80,0.28);
    }

    .path-modal--photomodeller .pm-section-title { color: #c4b5fd; }
    .path-modal--photomodeller .pm-section-title::after { background: linear-gradient(90deg, rgba(167,139,250,0.5), transparent); }
    .path-modal--photomodeller .pm-list li { border-color: rgba(167,139,250,0.14); }
    .path-modal--photomodeller .pm-list li::before { color: #c4b5fd; }
    .path-modal--photomodeller .pm-faq-item { border-color: rgba(167,139,250,0.14); }
    .path-modal--photomodeller .pm-faq-q::before { color: #c4b5fd; }
    .path-modal--photomodeller .pm-callout {
      background: linear-gradient(135deg, rgba(167,139,250,0.16), rgba(167,139,250,0.05));
      border-color: rgba(167,139,250,0.28);
    }

    .path-modal--diy .pm-section-title { color: var(--foam-light); }
    .path-modal--diy .pm-section-title::after { background: linear-gradient(90deg, rgba(144,224,239,0.5), transparent); }
    .path-modal--diy .pm-list li { border-color: rgba(144,224,239,0.14); }
    .path-modal--diy .pm-list li::before { color: var(--foam-light); }
    .path-modal--diy .pm-faq-item { border-color: rgba(144,224,239,0.14); }
    .path-modal--diy .pm-faq-q::before { color: var(--foam-light); }
    .path-modal--diy .pm-callout {
      background: linear-gradient(135deg, rgba(144,224,239,0.16), rgba(144,224,239,0.05));
      border-color: rgba(190,238,250,0.28);
    }

    @media (max-width: 760px) {
      .path-modal { padding: 10px; }
      .ppm-header, .ppm-timeline, .ppm-extras, .ppm-included, .ppm-footer { padding-left: 22px; padding-right: 22px; }
      .ppm-connector { margin-left: 22px; margin-right: 22px; }
      .ppm-step { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
      .ppm-step:not(:last-child)::before { left: 25px; }
      .ppm-step-stats { grid-template-columns: 1fr 1fr; }
      .ppm-glance { max-width: none; }
      .ppm-glance .ppm-stat-value { font-size: 16px; }
      .ppm-step-toprow { flex-wrap: wrap; }
      .ppm-extra-grid { grid-template-columns: 1fr 1fr; }
      .ppm-included { grid-template-columns: 1fr; }
      .ppm-footer { flex-direction: column; }
      .ppm-cta-quote, .ppm-cta-close { width: 100%; text-align: center; }
      .ppm-step-card-bignum { font-size: 64px; }
    }

    #process .process-included-strip {
      margin-top: 30px !important;
      padding: 18px 20px !important;
      border-radius: 18px !important;
      display: grid !important;
      grid-template-columns: auto 1fr;
      align-items: center !important;
      gap: 20px !important;
      background:
        linear-gradient(135deg,rgba(0,180,216,0.1),rgba(3,17,31,0.72)) !important;
      border-color: rgba(0,180,216,0.26) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
    }

    #process .process-included-strip > div:first-child,
    #process .process-supplies-panel > div:first-child {
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(0,180,216,0.12);
      border: 1px solid rgba(144,224,239,0.16);
      line-height: 1;
    }

    #process .process-included-strip > div:last-child {
      gap: 10px !important;
    }

    #process .process-included-strip span[style*="display:flex"] {
      min-height: 34px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(2,12,24,0.44);
      border: 1px solid rgba(144,224,239,0.1);
      color: rgba(202,232,240,0.78) !important;
    }

    #process .process-supplies-panel {
      margin-top: 18px !important;
      padding: 20px !important;
      border-radius: 18px !important;
      background:
        linear-gradient(135deg,rgba(10,35,58,0.72),rgba(3,13,26,0.76)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }

    #process .process-supplies-panel > div:last-child > div {
      border-color: rgba(144,224,239,0.18) !important;
      background: rgba(2,12,24,0.38);
      border-radius: 12px !important;
    }

    @media (max-width:1100px) {
      #process .process-step-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
      }
      #path-workshop > div:first-child > div:first-child,
      #path-onsite > div:first-child > div:first-child,
      #path-photomodeller > div:first-child > div:first-child,
      #path-diy > div:first-child > div:first-child {
        display: none;
      }
    }

    @media (max-width: 960px) {
      #process .process-path-duo {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      #process .process-path-or::before,
      #process .process-path-or::after {
        display: none;
      }
      #process .process-path-or span {
        width: 100%;
        height: auto;
        border-radius: 999px;
        padding: 5px 0;
        font-size: 9px;
      }
      #process .process-path-tier-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
      #process .process-path-tier-count {
        margin-top: 0;
      }
    }

    @media (max-width:760px) {
      #process .process-path-tier {
        padding: 18px 16px 18px;
        border-radius: 20px;
      }
      #process .process-path-card {
        min-height: 0;
      }
      #process .process-path-card-inner {
        padding: 14px 14px 12px;
        gap: 12px;
      }
      #process .process-path-card-bignum {
        font-size: 80px;
        bottom: -12px;
        right: 4px;
      }
      #process .process-path-card-icon {
        width: 42px;
        height: 42px;
        font-size: 21px;
      }
      #process .process-path-card-title {
        font-size: 15px;
      }
      #process .process-path-card-kicker {
        font-size: 11px;
      }
      #process .process-path-tier-desc {
        font-size: 12px;
      }
      #process .process-step-grid,
      #path-workshop [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
      #path-photomodeller [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
      #path-diy [style*="grid-template-columns:repeat(4,minmax(0,1fr))"] {
        grid-template-columns: 1fr !important;
      }
      #process .proc-card-pro {
        min-height: 0;
      }
      #process .proc-connector-line { display: none; }
      #process .process-included-strip {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 1100px) {
      #process .proc-connector-line { display: none; }
    }

/* ==== inline ==== */
.eva-standard-section {
      position: relative;
      overflow: hidden;
      background: radial-gradient(ellipse at 50% 50%, #0e2a5e 0%, #081634 70%, #04102a 100%);
      border-top: 1px solid var(--border);
      isolation: isolate;
    }

    .eva-topo-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      display: block;
      opacity: 0.38;
    }

    .eva-standard-overlay {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 68% 44% at 38% 14%, rgba(0,180,216,0.08), transparent 68%),
        linear-gradient(180deg, rgba(3,13,26,0.38) 0%, rgba(3,13,26,0.24) 45%, rgba(3,13,26,0.62) 100%),
        rgba(3,13,26,0.14);
    }

    .eva-standard-inner {
      position: relative;
      z-index: 1;
      padding: 92px 60px 86px;
    }

    .eva-standard-hero {
      display: grid;
      /* Title left, intro body right — inline with the title block */
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: 28px 48px;
      align-items: center;
      margin-bottom: 36px;
    }

    .eva-standard-copy {
      max-width: none;
      min-width: 0;
    }

    .eva-standard-title {
      font-size: clamp(52px, 7.2vw, 98px);
      line-height: 0.92;
      margin-bottom: 0;
    }

    .eva-standard-title span {
      color: var(--foam-teal);
    }

    .eva-standard-intro {
      max-width: none;
      margin: 0;
      color: var(--text-muted);
      font-size: clamp(15px, 1.4vw, 18px);
      line-height: 1.75;
      align-self: center;
      padding-top: 8px; /* optical align with title (below section-tag) */
    }

    .eva-standard-copy .divider-line {
      margin-bottom: 0;
    }

    .eva-standard-spec {
      min-height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 24px;
      border-radius: 22px;
      border: 1px solid rgba(0,180,216,0.34);
      background:
        linear-gradient(180deg, rgba(0,180,216,0.045), rgba(3,13,26,0.78)),
        rgba(3,13,26,0.72);
      box-shadow: 0 28px 90px rgba(0,0,0,0.32);
    }

    .eva-standard-spec > span,
    .eva-panel-label,
    .eva-detail-grid article > span {
      color: var(--foam-teal);
      font-size: 10px;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-weight: 800;
    }

    .eva-standard-spec > strong {
      font-family: 'Bebas Neue', sans-serif;
      color: var(--white);
      font-size: 112px;
      line-height: 0.86;
      letter-spacing: 3px;
      margin: 14px 0 12px;
    }

    .eva-standard-spec p {
      margin: 0 0 22px;
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.65;
    }

    .eva-spec-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 12px 0;
      border-top: 1px solid rgba(0,180,216,0.18);
    }

    .eva-spec-line small {
      color: var(--text-muted);
      font-size: 10px;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      font-weight: 800;
    }

    .eva-spec-line b {
      color: rgba(255,255,255,0.62);
      font-family: 'Bebas Neue', sans-serif;
      font-size: 28px;
      letter-spacing: 2px;
    }

    .eva-spec-line-strong b {
      color: var(--foam-light);
    }

    .eva-standard-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
      gap: 24px;
      align-items: stretch;
      margin-bottom: 24px;
    }

    .eva-standard-layout-focused {
      grid-template-columns: 1fr;
    }

    .eva-top-tools {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 24px;
      align-items: start;
    }

    .eva-top-tools .eva-real-compare-card,
    .eva-top-tools .eva-two-tone-card {
      min-width: 0;
      margin-bottom: 0;
      border-radius: 28px;
    }

    .eva-top-tools .eva-real-compare-card {
      display: flex;
      flex-direction: column;
    }

    .eva-top-tools .eva-two-tone-card {
      display: flex;
      flex-direction: column;
    }

    .eva-comparison-board,
    .eva-decision-panel,
    .eva-detail-grid article,
    .eva-system-card,
    .eva-closing-note {
      background: rgba(3,13,26,0.76);
      border: 1px solid rgba(0,180,216,0.26);
      box-shadow: 0 28px 80px rgba(0,0,0,0.28);
      backdrop-filter: blur(10px);
    }

    .eva-comparison-board,

    .eva-real-compare-card {
      padding: 24px;
    }

    .eva-real-board-head {
      display: block;
      margin-bottom: 18px;
      position: relative;
      padding-right: 0;
    }

    .eva-real-board-head > div {
      min-width: 0;
    }

    .eva-real-board-head h3 {
      max-width: 760px;
      font-size: clamp(36px, 4vw, 58px);
      line-height: 0.98;
    }

    .eva-real-board-head > span {
      display: inline-flex;
      margin-top: 2px;
    }

    .eva-profile-badge {
      position: static;
      width: fit-content;
    }

    .eva-real-compare {
      --eva-reveal: 50%;
      position: relative;
      min-height: 238px;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(0,180,216,0.26);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.055), transparent 34%),
        radial-gradient(circle at 50% 38%, rgba(0,180,216,0.045), transparent 48%),
        rgba(3,13,26,0.86);
    }

    .eva-real-compare::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 52px;
      height: 1px;
      background: rgba(144,224,239,0.18);
      z-index: 1;
    }

    .eva-real-image {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 48px 22px 34px;
    }

    .eva-foam-photo-mask {
      width: min(100%, 535px);
      overflow: hidden;
      border-radius: 8px;
      transform: translateY(8px);
      filter: drop-shadow(0 18px 24px rgba(0,0,0,0.48));
      user-select: none;
      pointer-events: none;
      background: transparent;
      clip-path: inset(4px 7px 7px 0 round 8px);
    }

    .eva-foam-photo-mask img {
      display: block;
      width: 100%;
      height: auto;
      transform: scale(1.018);
      transform-origin: center bottom;
      filter: contrast(1.06) saturate(0.96);
    }

    .eva-foam-photo-mask-6 {
      transform: translateY(18px);
      clip-path: inset(4px 7px 8px 0 round 8px);
    }

    .eva-real-image-8 {
      background:
        linear-gradient(90deg, rgba(0,180,216,0.08), rgba(0,180,216,0.02));
    }

    .eva-real-image-6 {
      clip-path: inset(0 calc(100% - var(--eva-reveal)) 0 0);
      background:
        linear-gradient(90deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
      z-index: 2;
    }

    .eva-real-label {
      position: absolute;
      top: 16px;
      z-index: 5;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 900;
      background: rgba(3,13,26,0.72);
      border: 1px solid rgba(0,180,216,0.22);
    }

    .eva-real-label-left {
      left: 16px;
      color: rgba(255,255,255,0.72);
    }

    .eva-real-label-right {
      right: 16px;
      color: var(--foam-teal);
    }

    .eva-real-handle {
      position: absolute;
      top: 0;
      bottom: 0;
      left: var(--eva-reveal);
      width: 2px;
      transform: translateX(-1px);
      background: var(--foam-light);
      box-shadow: 0 0 22px rgba(144,224,239,0.65);
      z-index: 6;
      pointer-events: none;
    }

    .eva-real-handle span {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 42px;
      height: 42px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: var(--foam-teal);
      border: 2px solid rgba(202,240,248,0.95);
      box-shadow: 0 12px 34px rgba(0,0,0,0.42), 0 0 28px rgba(0,180,216,0.5);
    }

    .eva-real-handle span::before,
    .eva-real-handle span::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 8px;
      height: 8px;
      border-top: 2px solid var(--ocean-deep);
      border-left: 2px solid var(--ocean-deep);
    }

    .eva-real-handle span::before {
      left: 10px;
      transform: translateY(-50%) rotate(-45deg);
    }

    .eva-real-handle span::after {
      right: 10px;
      transform: translateY(-50%) rotate(135deg);
    }

    .eva-real-range {
      position: absolute;
      inset: 0;
      z-index: 8;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: ew-resize;
    }

    .eva-real-caption {
      margin-top: 14px;
      padding: 14px 16px;
      border-radius: 10px;
      border: 1px solid rgba(0,180,216,0.2);
      background: rgba(0,180,216,0.045);
      color: var(--text-muted);
      font-size: 12px;
      line-height: 1.65;
    }

    .eva-real-caption strong {
      color: var(--white);
    }


    .eva-decision-panel {
      border-radius: 14px;
      padding: 28px;
    }

    .eva-board-head {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: flex-start;
      margin-bottom: 24px;
    }

    .eva-board-head h3,
    .eva-decision-panel h3,
    .eva-detail-grid h3,
    .eva-system-copy h3 {
      margin: 0;
      color: var(--white);
      font-family: 'Bebas Neue', sans-serif;
      letter-spacing: 1.5px;
      line-height: 1.05;
    }

    .eva-board-head h3 {
      font-size: clamp(30px, 3.4vw, 44px);
    }

    .eva-board-head > span:not(.eva-compare-badge) {
      flex: 0 0 auto;
      margin-top: 3px;
      padding: 9px 12px;
      border-radius: 999px;
      color: var(--ocean-deep);
      background: var(--foam-light);
      font-size: 9px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 900;
      white-space: nowrap;
    }

    .eva-compare-columns {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .eva-compare-column {
      display: flex;
      flex-direction: column;
      min-height: 430px;
      padding: 18px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(0,0,0,0.16);
    }

    .eva-compare-seafoam {
      border-color: rgba(0,180,216,0.42);
      background: rgba(0,180,216,0.06);
    }

    .eva-column-title {
      color: var(--text-muted);
      font-size: 10px;
      letter-spacing: 2.2px;
      text-transform: uppercase;
      font-weight: 900;
      margin-bottom: 14px;
    }

    .eva-compare-seafoam .eva-column-title {
      color: var(--foam-teal);
    }

    .eva-slab {
      position: relative;
      overflow: hidden;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.1);
      margin-bottom: 18px;
    }

    .eva-slab::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.42;
      background: repeating-linear-gradient(0deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 8px);
    }

    .eva-slab span {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      font-family: 'Bebas Neue', sans-serif;
      letter-spacing: 3px;
      line-height: 1;
    }

    .eva-slab-6 {
      height: 72px;
      background: linear-gradient(180deg, rgba(100,100,118,0.92), rgba(50,50,68,0.96));
    }

    .eva-slab-6 span {
      color: rgba(255,255,255,0.38);
      font-size: 34px;
    }

    .eva-slab-8 {
      height: 104px;
      border-color: rgba(0,180,216,0.48);
      background:
        linear-gradient(90deg, rgba(0,180,216,0.16), transparent 48%),
        linear-gradient(180deg, #20718f 0%, #0e4b63 58%, #082f44 100%);
      box-shadow: inset 0 1px 0 rgba(144,224,239,0.28), 0 0 44px rgba(0,180,216,0.14);
    }

    .eva-slab-8 span {
      color: var(--foam-light);
      font-size: 46px;
      text-shadow: 0 0 20px rgba(0,180,216,0.42);
    }

    .eva-slab-8 em {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(144,224,239,0.92);
      color: var(--ocean-deep);
      font-size: 9px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-style: normal;
      font-weight: 900;
      white-space: nowrap;
    }

    .eva-compare-column ul {
      display: grid;
      gap: 12px;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .eva-compare-column li {
      position: relative;
      padding-left: 18px;
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.55;
    }

    .eva-compare-column li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.65em;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(144,224,239,0.5);
    }

    .eva-compare-seafoam li::before {
      background: var(--foam-teal);
      box-shadow: 0 0 12px rgba(0,180,216,0.5);
    }

    .eva-decision-panel {
      display: flex;
      flex-direction: column;
    }

    .eva-decision-panel h3 {
      font-size: clamp(32px, 3.8vw, 52px);
      margin-bottom: 18px;
    }

    .eva-decision-panel-compact {
      padding: 18px 20px;
    }

    .eva-decision-panel-compact .eva-panel-label {
      margin-bottom: 10px;
    }

    .eva-decision-panel-compact h3 {
      font-size: clamp(24px, 2.4vw, 32px);
      margin-bottom: 10px;
    }

    .eva-decision-panel-compact > p {
      font-size: 12px;
      line-height: 1.62;
      margin-bottom: 0;
    }

    .eva-decision-panel > p {
      margin: 0 0 22px;
      color: var(--text-muted);
      font-size: 14px;
      line-height: 1.85;
    }

    .eva-decision-list {
      display: grid;
      gap: 12px;
      margin-top: auto;
    }

    .eva-decision-list div {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 6px 14px;
      padding: 16px;
      border-radius: 12px;
      border: 1px solid rgba(0,180,216,0.2);
      background: rgba(0,180,216,0.045);
    }

    .eva-decision-list span {
      grid-row: span 2;
      color: rgba(144,224,239,0.52);
      font-family: 'Bebas Neue', sans-serif;
      font-size: 34px;
      line-height: 0.95;
      letter-spacing: 2px;
    }

    .eva-decision-list strong {
      color: var(--white);
      font-size: 13px;
      letter-spacing: 1.7px;
      text-transform: uppercase;
    }

    .eva-decision-list p {
      margin: 0;
      color: var(--text-muted);
      font-size: 12px;
      line-height: 1.6;
    }

    .eva-detail-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-bottom: 24px;
    }

    .eva-detail-grid-compact {
      margin-bottom: 0;
      gap: 12px;
    }

    .eva-detail-grid-compact article {
      min-height: 0;
      padding: 18px 18px 16px;
    }

    .eva-detail-grid-compact article > span {
      font-size: 9px;
      letter-spacing: 2.2px;
    }

    .eva-detail-grid-compact h3 {
      font-size: 22px;
      margin: 10px 0 8px;
    }

    .eva-detail-grid-compact p {
      font-size: 12px;
      line-height: 1.58;
    }

    .eva-detail-grid article {
      min-height: 190px;
      border-radius: 14px;
      padding: 26px;
    }

    .eva-detail-grid h3 {
      font-size: 28px;
      margin: 18px 0 12px;
    }

    .eva-detail-grid p,
    .eva-system-copy p {
      margin: 0;
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.75;
    }


    .eva-two-tone-card {
      border-radius: 28px;
      padding: 30px;
      margin-bottom: 18px;
      background: rgba(3,13,26,0.76);
      border: 1px solid rgba(0,180,216,0.28);
      box-shadow: 0 28px 80px rgba(0,0,0,0.28);
      backdrop-filter: blur(10px);
    }

    .eva-two-tone-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
      margin-bottom: 18px;
    }

    .eva-two-tone-head > div {
      min-width: 0;
    }

    .eva-two-tone-head h3 {
      margin: 0;
      color: var(--white);
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(34px, 3.8vw, 54px);
      letter-spacing: 1.6px;
      line-height: 1.02;
    }

    .eva-two-tone-head p {
      margin: 0;
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.75;
    }

    .eva-two-tone-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border: 1px solid rgba(0,180,216,0.28);
      border-radius: 12px 12px 0 0;
      overflow: hidden;
      background: rgba(0,0,0,0.16);
    }

    .eva-two-tone-tabs button {
      min-height: 52px;
      border: 0;
      border-right: 1px solid rgba(0,180,216,0.22);
      background: rgba(0,180,216,0.045);
      color: var(--text-muted);
      font-family: Montserrat, sans-serif;
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-weight: 900;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }

    .eva-two-tone-tabs button:last-child {
      border-right: 0;
    }

    .eva-two-tone-tabs button.active {
      background: var(--foam-teal);
      color: var(--ocean-deep);
    }

    .eva-two-tone-stage {
      border: 1px solid rgba(0,180,216,0.28);
      border-top: 0;
      border-radius: 0 0 12px 12px;
      background: rgba(0,0,0,0.2);
      overflow: hidden;
    }

    .eva-tt-panel {
      display: none;
      padding: 28px;
    }

    .eva-tt-panel.active {
      display: block;
    }

    .eva-tt-copy {
      max-width: 900px;
      margin-bottom: 24px;
    }

    .eva-tt-copy h4 {
      margin: 0 0 10px;
      color: var(--white);
      font-family: 'Bebas Neue', sans-serif;
      font-size: 30px;
      letter-spacing: 1.4px;
      line-height: 1.05;
    }

    .eva-tt-copy p {
      margin: 0;
      color: var(--text-muted);
      font-size: 15px;
      line-height: 1.78;
    }

    .eva-tt-svg {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 14px;
      background: #06101f;
    }

    .eva-two-tone-hint {
      margin: 16px 0 18px;
      text-align: center;
      color: rgba(0,180,216,0.5);
      font-size: 10px;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-weight: 800;
    }

    .eva-process-note {
      display: grid;
      grid-template-columns: 150px minmax(0, 1fr);
      gap: 22px;
      align-items: start;
      padding: 22px 24px;
      border-radius: 14px;
      border: 1px solid rgba(0,180,216,0.26);
      background: rgba(0,180,216,0.055);
    }

    .eva-process-note span {
      color: var(--foam-teal);
      font-size: 10px;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-weight: 900;
    }

    .eva-process-note p {
      margin: 0;
      color: var(--text-muted);
      font-size: 14px;
      line-height: 1.75;
    }

    .eva-process-note strong {
      color: var(--white);
    }

    .eva-system-card {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      gap: 30px;
      align-items: center;
      border-radius: 16px;
      padding: 34px;
      margin-bottom: 18px;
    }

    .eva-system-copy h3 {
      font-size: clamp(30px, 3.2vw, 46px);
      margin-bottom: 14px;
    }

    .eva-system-visual {
      position: relative;
      padding: 24px;
      border-radius: 14px;
      border: 1px solid rgba(0,180,216,0.22);
      background:
        radial-gradient(circle at 20% 20%, rgba(0,180,216,0.16), transparent 34%),
        rgba(0,0,0,0.18);
    }

    .eva-layer {
      position: relative;
      height: 58px;
      border: 1px solid rgba(255,255,255,0.12);
      overflow: hidden;
    }

    .eva-layer span {
      position: absolute;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      color: rgba(255,255,255,0.78);
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 900;
    }

    .eva-layer-top {
      border-radius: 12px 12px 0 0;
      background: linear-gradient(180deg, #2a7f9d, #15536f);
    }

    .eva-layer-core {
      height: 34px;
      border-top: 0;
      border-bottom: 0;
      background: rgba(3,13,26,0.62);
    }

    .eva-layer-bottom {
      border-radius: 0 0 12px 12px;
      background: linear-gradient(180deg, #0b6a45, #08402d);
    }

    .eva-layer::after {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.3;
      background: repeating-linear-gradient(0deg, rgba(255,255,255,0.14) 0 1px, transparent 1px 8px);
    }

    .eva-layer-top i,
    .eva-layer-core b {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 18px;
      transform: skewX(-18deg);
      background: rgba(8,64,45,0.86);
      box-shadow: 0 0 18px rgba(0,220,140,0.22);
    }

    .eva-layer-top i:nth-of-type(1),
    .eva-layer-core b:nth-of-type(1) { left: 34%; }
    .eva-layer-top i:nth-of-type(2),
    .eva-layer-core b:nth-of-type(2) { left: 47%; }
    .eva-layer-top i:nth-of-type(3),
    .eva-layer-core b:nth-of-type(3) { left: 60%; }
    .eva-layer-top i:nth-of-type(4),
    .eva-layer-core b:nth-of-type(4) { left: 73%; }

    .eva-layer-core b {
      background: rgba(0,220,140,0.72);
    }

    .eva-closing-note {
      border-radius: 12px;
      padding: 18px 22px;
      color: var(--text-muted);
      font-size: 14px;
      line-height: 1.7;
      text-align: center;
    }

    .eva-closing-note strong {
      color: var(--white);
    }

    .eva-photo-render {
      width: min(92%, 590px);
      height: 150px;
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      transform: translateY(11px);
      filter: drop-shadow(0 22px 32px rgba(0,0,0,0.5));
      user-select: none;
      pointer-events: none;
    }

    .eva-photo-render-6 {
      width: min(88%, 560px);
      height: 118px;
      transform: translateY(21px);
      opacity: 0.95;
    }

    .eva-photo-render img {
      display: block;
      width: 100%;
      height: auto;
      max-height: 100%;
      object-fit: contain;
      object-position: center bottom;
      border-radius: 10px;
      clip-path: inset(1px 2px 2px 2px round 10px);
    }

    .eva-real-image-8 .eva-photo-render img {
      filter: contrast(1.06) saturate(0.98) brightness(0.98);
    }

    .eva-real-image-6 .eva-photo-render img {
      filter: contrast(1.08) saturate(0.96) brightness(0.96);
    }

    .eva-heavy-option {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(340px, 0.62fr);
      gap: 28px;
      align-items: stretch;
      margin-top: 28px;
      padding: clamp(26px, 3vw, 42px);
      border-radius: 34px;
      border: 1px solid rgba(0,180,216,0.38);
      background:
        radial-gradient(circle at 78% 22%, rgba(144,224,239,0.15), transparent 32%),
        linear-gradient(135deg, rgba(0,180,216,0.14), rgba(0,180,216,0.03) 42%, transparent 68%),
        rgba(3,13,26,0.78);
      box-shadow: 0 30px 90px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.04);
      backdrop-filter: blur(10px);
    }

    .eva-heavy-copy h3 {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      column-gap: 0.28em;
      row-gap: 0.08em;
      width: 100%;
      margin: 10px 0 16px;
      color: var(--white);
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(34px, 4.6vw, 72px);
      line-height: 0.9;
      letter-spacing: 1.4px;
    }

    .eva-heavy-copy h3::before {
      content: none;
    }

    .eva-heavy-plus {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      opacity: 0.95;
      font-size: 0.86em;
      line-height: 1;
      transform: translateY(-0.015em);
    }

    .eva-heavy-copy h3 span {
      color: var(--foam-light);
      white-space: nowrap;
    }

    .eva-heavy-copy h3 .eva-heavy-plus {
      color: var(--white);
    }

    .eva-heavy-copy h3 strong {
      flex: 0 0 100%;
      color: var(--foam-teal);
      font-weight: 900;
      font-size: 1.02em;
    }

    .eva-heavy-copy p {
      max-width: 930px;
      margin: 0;
      color: var(--text-muted);
      font-size: clamp(15px, 1.18vw, 18px);
      line-height: 1.72;
    }

    .eva-heavy-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }

    .eva-heavy-tags span {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 0 15px;
      border-radius: 999px;
      border: 1px solid rgba(144,224,239,0.28);
      background: rgba(0,180,216,0.075);
      color: var(--foam-light);
      font-size: 10px;
      letter-spacing: 1.9px;
      text-transform: uppercase;
      font-weight: 900;
      white-space: nowrap;
    }

    .eva-heavy-visual {
      display: flex;
      flex-direction: column;
      min-width: 0;
      height: 100%;
    }

    .eva-heavy-stack {
      position: relative;
      flex: 1;
      min-height: 240px;
      padding: 26px 20px;
      border-radius: 28px;
      border: 1px solid rgba(144,224,239,0.28);
      background:
        radial-gradient(circle at 72% 18%, rgba(0,180,216,0.22), transparent 42%),
        radial-gradient(circle at 18% 88%, rgba(144,224,239,0.1), transparent 40%),
        linear-gradient(165deg, rgba(0,180,216,0.1), rgba(3,13,26,0.55) 48%, rgba(3,13,26,0.72)),
        rgba(3,13,26,0.65);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 20px 50px rgba(0,0,0,0.28);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .eva-heavy-glow {
      position: absolute;
      inset: auto -10% -35% 10%;
      height: 55%;
      background: radial-gradient(ellipse at center, rgba(0,180,216,0.28), transparent 68%);
      pointer-events: none;
      filter: blur(8px);
      animation: evaHeavyGlow 4.5s ease-in-out infinite;
    }

    /* Diagram + dimension line share the exact same height */
    .eva-heavy-diagram {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: stretch;
      width: 92%;
      max-width: 380px;
      margin-left: auto;
      gap: 10px;
    }

    .eva-heavy-build {
      position: relative;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      border-radius: 16px;
      filter: drop-shadow(0 18px 28px rgba(0,0,0,0.45));
      transform-style: preserve-3d;
    }

    .eva-heavy-layer {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 18px;
      overflow: hidden;
      color: var(--white);
      font-size: 11px;
      letter-spacing: 2.2px;
      text-transform: uppercase;
      font-weight: 900;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 0 -1px 0 rgba(0,0,0,0.25);
    }

    .eva-heavy-layer-label {
      position: relative;
      z-index: 2;
      text-align: center;
    }

    .eva-heavy-layer::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.28;
      background: repeating-linear-gradient(
        0deg,
        rgba(255,255,255,0.2) 0 1px,
        transparent 1px 7px
      );
      pointer-events: none;
    }

    .eva-heavy-layer::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: -10px;
      width: 12px;
      transform: skewY(-18deg);
      transform-origin: left center;
      opacity: 0.85;
      pointer-events: none;
    }

    .eva-heavy-top {
      height: 48px;
      border-radius: 16px 16px 4px 4px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.28), transparent 42%),
        linear-gradient(180deg, #9ae8f5 0%, #2ec4de 45%, #0a8fad 100%);
      color: rgba(3,13,26,0.88);
      text-shadow: 0 1px 0 rgba(255,255,255,0.25);
    }

    .eva-heavy-top::after {
      background: linear-gradient(180deg, #6ed7ea, #087a95);
      border-radius: 0 10px 4px 0;
      box-shadow: inset -1px 0 0 rgba(255,255,255,0.15);
    }

    .eva-heavy-base {
      height: 142px;
      border-radius: 4px 4px 16px 16px;
      background:
        linear-gradient(90deg, rgba(255,255,255,0.06), transparent 55%),
        linear-gradient(180deg, #1c2c38 0%, #101820 40%, #05080b 100%);
      color: var(--foam-light);
    }

    .eva-heavy-base::after {
      background: linear-gradient(180deg, #15222c, #030507);
      border-radius: 0 4px 12px 0;
      box-shadow: inset -1px 0 0 rgba(255,255,255,0.05);
    }

    .eva-heavy-seam {
      position: relative;
      z-index: 3;
      height: 0;
      display: flex;
      justify-content: flex-end;
      pointer-events: none;
    }

    .eva-heavy-seam span {
      position: absolute;
      right: 14px;
      top: -8px;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px dashed rgba(255,255,255,0.28);
      background: rgba(3,13,26,0.72);
      color: rgba(255,255,255,0.55);
      font-size: 8px;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      font-weight: 800;
      white-space: nowrap;
    }

    .eva-heavy-seam::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      border-top: 1.5px dashed rgba(255,255,255,0.35);
      box-shadow: 0 0 12px rgba(0,180,216,0.25);
    }

    /* Small, soft wave of light — always moving, never freezes */
    .eva-heavy-sheen {
      position: absolute;
      top: -12%;
      bottom: -12%;
      left: 0;
      width: 28%;
      border-radius: 50% 50% 48% 52% / 45% 55% 45% 55%;
      background:
        radial-gradient(ellipse 70% 90% at 50% 50%,
          rgba(255,255,255,0.16) 0%,
          rgba(144,224,239,0.09) 35%,
          rgba(0,180,216,0.03) 58%,
          transparent 78%);
      filter: blur(12px);
      opacity: 0.55;
      mix-blend-mode: screen;
      transform: translateX(-120%);
      transform-origin: center center;
      /* linear + seamless loop so motion never stalls */
      animation: evaHeavySheen 7s linear infinite;
      pointer-events: none;
      z-index: 4;
      will-change: transform;
    }

    /* Inner wave ripple — continuous undulation */
    .eva-heavy-sheen::before {
      content: '';
      position: absolute;
      inset: 5% 8%;
      border-radius: 55% 45% 60% 40% / 50% 55% 45% 50%;
      background: radial-gradient(ellipse 60% 80% at 45% 50%,
        rgba(255,255,255,0.2) 0%,
        rgba(180,240,255,0.08) 40%,
        transparent 70%);
      filter: blur(6px);
      opacity: 0.7;
      animation: evaHeavySheenWave 2.4s ease-in-out infinite;
      pointer-events: none;
    }

    .eva-heavy-sheen::after {
      content: '';
      position: absolute;
      inset: 15% 0;
      border-radius: 40% 60% 45% 55% / 60% 40% 55% 45%;
      background: radial-gradient(ellipse 50% 70% at 55% 48%,
        rgba(144,224,239,0.12) 0%,
        transparent 65%);
      filter: blur(8px);
      opacity: 0.6;
      animation: evaHeavySheenWave 2.4s ease-in-out infinite reverse;
      animation-delay: -1.2s;
      pointer-events: none;
    }

    /* Dimension line is a sibling of the build — same flex row height = perfect alignment */
    .eva-heavy-depth-bracket {
      position: relative;
      flex: 0 0 52px;
      width: 52px;
      align-self: stretch;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }

    .eva-heavy-depth-line {
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 1.5px;
      margin-left: -0.75px;
      border-radius: 2px;
      background: linear-gradient(
        180deg,
        rgba(144,224,239,0.25),
        var(--foam-teal) 10%,
        var(--foam-teal) 90%,
        rgba(144,224,239,0.25)
      );
      box-shadow:
        0 0 10px rgba(0,180,216,0.4),
        0 0 20px rgba(0,180,216,0.15);
      transform-origin: center center;
    }

    .eva-heavy-depth-cap {
      position: absolute;
      left: 50%;
      width: 16px;
      height: 1.5px;
      margin-left: -8px;
      border-radius: 2px;
      background: var(--foam-teal);
      box-shadow: 0 0 8px rgba(0,180,216,0.5);
      z-index: 1;
    }

    .eva-heavy-depth-cap-top { top: 0; }
    .eva-heavy-depth-cap-bottom { bottom: 0; }

    .eva-heavy-depth-cap-top::before,
    .eva-heavy-depth-cap-bottom::before {
      content: '';
      position: absolute;
      left: 50%;
      width: 0;
      height: 0;
      margin-left: -4px;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
    }

    .eva-heavy-depth-cap-top::before {
      top: 0;
      border-bottom: 6px solid var(--foam-teal);
    }

    .eva-heavy-depth-cap-bottom::before {
      bottom: 0;
      border-top: 6px solid var(--foam-teal);
    }

    .eva-heavy-total {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      min-width: 0;
      padding: 5px 8px 4px;
      border-radius: 9px;
      border: 1px solid rgba(0,180,216,0.6);
      background:
        radial-gradient(circle at 50% 20%, rgba(0,180,216,0.3), transparent 65%),
        linear-gradient(160deg, rgba(0,180,216,0.22), rgba(3,13,26,0.95) 55%);
      box-shadow:
        0 8px 18px rgba(0,0,0,0.4),
        0 0 0 2px rgba(0,180,216,0.06),
        0 0 16px rgba(0,180,216,0.2),
        inset 0 1px 0 rgba(255,255,255,0.15);
      backdrop-filter: blur(8px);
      animation: evaHeavyBadgePulse 2.8s ease-in-out 1.6s infinite;
    }

    .eva-heavy-total strong {
      display: block;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 15px;
      font-weight: 400;
      line-height: 0.95;
      letter-spacing: 0.5px;
      color: #fff;
      text-shadow: 0 0 10px rgba(0,180,216,0.45);
    }

    .eva-heavy-total span {
      display: block;
      font-size: 6.5px;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      font-weight: 900;
      color: var(--foam-teal);
    }

    /* entrance + loop animations when section is revealed */
    .eva-heavy-option.reveal:not(.visible) .eva-heavy-top,
    .eva-heavy-option.reveal:not(.visible) .eva-heavy-base,
    .eva-heavy-option.reveal:not(.visible) .eva-heavy-depth-line,
    .eva-heavy-option.reveal:not(.visible) .eva-heavy-depth-cap,
    .eva-heavy-option.reveal:not(.visible) .eva-heavy-total,
    .eva-heavy-option.reveal:not(.visible) .eva-heavy-seam {
      opacity: 0;
    }

    .eva-heavy-option.reveal.visible .eva-heavy-base {
      animation: evaHeavyBaseIn 0.75s cubic-bezier(0.22, 0.9, 0.3, 1) both;
    }

    .eva-heavy-option.reveal.visible .eva-heavy-top {
      animation: evaHeavyTopIn 0.65s cubic-bezier(0.22, 0.9, 0.3, 1) 0.28s both;
    }

    .eva-heavy-option.reveal.visible .eva-heavy-seam {
      animation: evaHeavyFadeUp 0.45s ease 0.7s both;
    }

    .eva-heavy-option.reveal.visible .eva-heavy-depth-line {
      animation: evaHeavyLineDraw 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) 0.55s both;
    }

    .eva-heavy-option.reveal.visible .eva-heavy-depth-cap {
      animation: evaHeavyFadeUp 0.4s ease 0.75s both;
    }

    .eva-heavy-option.reveal.visible .eva-heavy-total {
      animation:
        evaHeavyBadgeIn 0.55s cubic-bezier(0.22, 0.9, 0.3, 1) 0.85s both,
        evaHeavyBadgePulse 2.8s ease-in-out 1.5s infinite;
    }

    @keyframes evaHeavyBaseIn {
      from {
        opacity: 0;
        transform: translateY(28px) scaleY(0.55);
        transform-origin: bottom center;
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    @keyframes evaHeavyTopIn {
      from {
        opacity: 0;
        transform: translateY(-22px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    @keyframes evaHeavyLineDraw {
      from {
        opacity: 0;
        transform: scaleY(0);
      }
      to {
        opacity: 1;
        transform: scaleY(1);
      }
    }

    @keyframes evaHeavyBadgeIn {
      from {
        opacity: 0;
        transform: scale(0.75);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    @keyframes evaHeavyBadgePulse {
      0%, 100% {
        box-shadow:
          0 14px 36px rgba(0,0,0,0.45),
          0 0 0 4px rgba(0,180,216,0.06),
          0 0 22px rgba(0,180,216,0.18),
          inset 0 1px 0 rgba(255,255,255,0.18);
      }
      50% {
        box-shadow:
          0 16px 40px rgba(0,0,0,0.48),
          0 0 0 6px rgba(0,180,216,0.12),
          0 0 36px rgba(0,180,216,0.42),
          inset 0 1px 0 rgba(255,255,255,0.22);
      }
    }

    /* Seamless horizontal loop — end state matches start so no freeze */
    @keyframes evaHeavySheen {
      0% {
        transform: translateX(-120%) skewX(-6deg) scaleY(0.94);
      }
      12% {
        transform: translateX(-40%) skewX(5deg) scaleY(1.08);
      }
      25% {
        transform: translateX(15%) skewX(-7deg) scaleY(0.92);
      }
      38% {
        transform: translateX(70%) skewX(6deg) scaleY(1.1);
      }
      50% {
        transform: translateX(130%) skewX(-5deg) scaleY(0.95);
      }
      62% {
        transform: translateX(200%) skewX(7deg) scaleY(1.07);
      }
      75% {
        transform: translateX(270%) skewX(-6deg) scaleY(0.93);
      }
      88% {
        transform: translateX(340%) skewX(4deg) scaleY(1.05);
      }
      100% {
        transform: translateX(400%) skewX(-6deg) scaleY(0.94);
      }
    }

    /* Constant wave morph — no alternate “pause” at ends */
    @keyframes evaHeavySheenWave {
      0% {
        border-radius: 55% 45% 60% 40% / 50% 55% 45% 50%;
        transform: translate(0, 4%) scale(1, 0.95) rotate(-3deg);
      }
      25% {
        border-radius: 40% 60% 45% 55% / 58% 42% 55% 45%;
        transform: translate(6%, -6%) scale(1.08, 0.9) rotate(4deg);
      }
      50% {
        border-radius: 58% 42% 50% 50% / 42% 58% 48% 52%;
        transform: translate(-4%, 5%) scale(0.94, 1.1) rotate(-2deg);
      }
      75% {
        border-radius: 45% 55% 42% 58% / 55% 45% 60% 40%;
        transform: translate(5%, -3%) scale(1.06, 0.92) rotate(3deg);
      }
      100% {
        border-radius: 55% 45% 60% 40% / 50% 55% 45% 50%;
        transform: translate(0, 4%) scale(1, 0.95) rotate(-3deg);
      }
    }

    @keyframes evaHeavyGlow {
      0%, 100% { opacity: 0.55; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.08); }
    }

    @keyframes evaHeavyFadeUp {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .eva-heavy-glow,
      .eva-heavy-sheen,
      .eva-heavy-sheen::before,
      .eva-heavy-sheen::after,
      .eva-heavy-option.reveal.visible .eva-heavy-base,
      .eva-heavy-option.reveal.visible .eva-heavy-top,
      .eva-heavy-option.reveal.visible .eva-heavy-seam,
      .eva-heavy-option.reveal.visible .eva-heavy-depth-line,
      .eva-heavy-option.reveal.visible .eva-heavy-depth-cap,
      .eva-heavy-option.reveal.visible .eva-heavy-total {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
    }

    @media (max-width: 1080px) {
      .eva-standard-hero,
      .eva-standard-layout,
      .eva-top-tools,
      .eva-system-card,
      .eva-two-tone-head,
      .eva-heavy-option {
        grid-template-columns: 1fr;
      }

      .eva-standard-spec {
        min-height: 0;
      }

      .eva-real-board-head {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 860px) {
      /* Hide EVA foam header intro blurb on mobile */
      #eva-foam .eva-standard-intro {
        display: none !important;
      }

      /* Hide heavy-duty use tags (Bolsters / Dash mounts / etc.) on mobile */
      #eva-foam .eva-heavy-tags {
        display: none !important;
      }

      .eva-standard-inner {
        padding: 78px 24px 72px;
      }

      .eva-compare-columns,
      .eva-detail-grid {
        grid-template-columns: 1fr;
      }

      .eva-compare-column {
        min-height: 0;
      }
    }

    @media (max-width: 560px) {
      .eva-standard-inner {
        padding-left: 18px;
        padding-right: 18px;
      }

      .eva-comparison-board,
      .eva-decision-panel,
      .eva-system-card,
      .eva-detail-grid article,
      .eva-standard-spec {
        padding: 22px;
      }

      .eva-real-compare {
        min-height: 220px;
      }

      .eva-profile-badge {
        position: static;
      }

      .eva-real-image {
        padding-left: 16px;
        padding-right: 16px;
      }

      .eva-board-head {
        display: block;
      }

      .eva-board-head > span {
        display: inline-flex;
        margin-top: 16px;
        white-space: normal;
      }

      .eva-slab-8 em {
        position: static;
        transform: none;
        margin-left: auto;
        margin-right: 14px;
      }

      .eva-slab {
        display: flex;
        align-items: center;
      }

      .eva-slab span {
        position: relative;
        left: 18px;
        top: auto;
        transform: none;
      }

      /* Keep 1 Start / 2 CNC Cut / 3 Result side-by-side on mobile */
      .eva-two-tone-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .eva-two-tone-tabs button {
        border-right: 1px solid rgba(0,180,216,0.22);
        border-bottom: 0;
        min-height: 44px;
        padding: 8px 4px;
        font-size: 9px;
        letter-spacing: 1px;
        line-height: 1.2;
        white-space: normal;
      }

      .eva-two-tone-tabs button:last-child {
        border-right: 0;
        border-bottom: 0;
      }

      .eva-tt-panel,
      .eva-two-tone-card {
        padding: 22px;
      }

      .eva-heavy-option {
        padding: 20px;
      }

      .eva-heavy-copy h3 {
        display: flex;
        flex-wrap: wrap;
        width: auto;
        column-gap: 0.25em;
        font-size: 38px;
      }

      .eva-heavy-copy h3::before {
        content: none;
      }

      .eva-heavy-copy h3 span,
      .eva-heavy-copy h3 strong {
        display: inline-flex;
      }

      .eva-heavy-copy h3 strong {
        flex-basis: 100%;
      }

      .eva-heavy-tags span {
        white-space: normal;
      }

      .eva-heavy-stack {
        min-height: 210px;
        padding: 20px 14px;
      }

      .eva-heavy-diagram {
        width: 100%;
        max-width: none;
        margin-left: 0;
      }

      .eva-heavy-base {
        height: 120px;
      }

      .eva-heavy-top {
        height: 42px;
      }

      .eva-heavy-depth-bracket {
        flex-basis: 48px;
        width: 48px;
      }

      .eva-heavy-total {
        padding: 4px 7px 3px;
      }

      .eva-heavy-total strong {
        font-size: 14px;
      }

      .eva-heavy-total span {
        font-size: 6px;
        letter-spacing: 1.2px;
      }

      .eva-process-note {
        grid-template-columns: 1fr;
      }

      .eva-decision-list div {
        grid-template-columns: 1fr;
      }

      .eva-decision-list span {
        grid-row: auto;
      }
    }

/* ==== foam-compare-rebuild-v1 ==== */
#eva-foam .foam-compare-slider {
        --position: 50%;
        /* Unitless 0–100 twin of --position, used so the divider tracks the photo stage */
        --position-n: 50;
        --stage-inset: 34px;
        position: relative;
        min-height: 270px;
        border-radius: 34px;
        overflow: hidden;
        isolation: isolate;
        border: 1px solid rgba(0, 180, 216, 0.34);
        background: rgba(3, 13, 26, 0.88);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.06),
          inset 0 -1px 0 rgba(0, 180, 216, 0.14),
          0 22px 48px rgba(0, 0, 0, 0.28);
        touch-action: none;
      }

      #eva-foam .foam-compare-slider::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
          linear-gradient(rgba(144, 224, 239, 0.06) 1px, transparent 1px),
          linear-gradient(90deg, rgba(144, 224, 239, 0.035) 1px, transparent 1px);
        background-size: 42px 42px;
        opacity: 0.16;
        pointer-events: none;
      }

      #eva-foam .foam-compare-slider::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 52px;
        height: 1px;
        z-index: 2;
        background: rgba(144, 224, 239, 0.2);
        pointer-events: none;
      }

      #eva-foam .foam-compare-label {
        position: absolute;
        top: 32px;
        z-index: 5;
        min-width: 88px;
        padding: 11px 18px;
        border: 1px solid rgba(0, 180, 216, 0.32);
        border-radius: 999px;
        background: rgba(2, 10, 20, 0.76);
        color: rgba(232, 246, 250, 0.86);
        font: 900 16px/1 Montserrat, sans-serif;
        letter-spacing: 0.14em;
        text-align: center;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
        pointer-events: none;
      }

      #eva-foam .foam-compare-label-left {
        left: 34px;
      }

      #eva-foam .foam-compare-label-right {
        right: 34px;
        color: var(--cyan);
      }

      #eva-foam .foam-compare-photo-stage {
        position: absolute;
        left: var(--stage-inset);
        right: var(--stage-inset);
        bottom: 40px;
        height: 178px;
        z-index: 3;
        border-radius: 24px;
        overflow: hidden;
        pointer-events: none;
        background: transparent;
        box-shadow: none;
      }

      #eva-foam .foam-compare-render {
        position: absolute;
        inset: 0;
        display: grid;
        align-items: end;
        overflow: hidden;
        pointer-events: none;
      }

      #eva-foam .foam-compare-render-6 {
        clip-path: inset(0 calc(100% - var(--position)) 0 0);
        -webkit-clip-path: inset(0 calc(100% - var(--position)) 0 0);
        background: transparent;
      }

      #eva-foam .foam-compare-render-8 {
        clip-path: inset(0 0 0 var(--position));
        -webkit-clip-path: inset(0 0 0 var(--position));
        background: transparent;
      }

      #eva-foam .foam-render-inner {
        position: absolute;
        inset: 12px 18px 16px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
      }

      #eva-foam .foam-profile-img {
        display: block;
        width: min(100%, 510px);
        height: auto;
        object-fit: contain;
        object-position: center bottom;
        user-select: none;
        -webkit-user-drag: none;
        filter:
          contrast(1.05)
          saturate(1.02)
          drop-shadow(0 18px 20px rgba(0, 0, 0, 0.5));
      }

      #eva-foam .foam-profile-img-6 {
        max-height: 111px;
      }

      #eva-foam .foam-profile-img-8 {
        max-height: 153px;
      }

      /* Align with clip edge on .foam-compare-photo-stage (not full slider width) */
      #eva-foam .foam-compare-divider {
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(
          var(--stage-inset) + (100% - 2 * var(--stage-inset)) * var(--position-n) / 100
        );
        z-index: 6;
        width: 2px;
        transform: translateX(-1px);
        background: linear-gradient(180deg, rgba(157, 234, 247, 0.9), rgba(157, 234, 247, 0.7));
        box-shadow: 0 0 22px rgba(0, 180, 216, 0.42);
        pointer-events: none;
      }

      #eva-foam .foam-compare-divider span {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 62px;
        height: 62px;
        transform: translate(-50%, -50%);
        display: grid;
        place-items: center;
        border-radius: 999px;
        border: 4px solid rgba(202, 248, 255, 0.92);
        background: var(--cyan);
        color: #04101d;
        font: 900 24px/1 Montserrat, sans-serif;
        letter-spacing: -0.12em;
        box-shadow:
          0 0 0 7px rgba(0, 180, 216, 0.18),
          0 14px 26px rgba(0, 0, 0, 0.42);
      }

      #eva-foam .foam-compare-range {
        position: absolute;
        inset: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: ew-resize;
        -webkit-appearance: none;
        appearance: none;
      }

      #eva-foam .foam-compare-slider:focus-within .foam-compare-divider span {
        box-shadow:
          0 0 0 7px rgba(0, 180, 216, 0.22),
          0 0 0 12px rgba(157, 234, 247, 0.1),
          0 14px 26px rgba(0, 0, 0, 0.42);
      }

      @media (max-width: 760px) {
        /* Compact slider: less empty air between labels and foam image */
        #eva-foam .foam-compare-slider {
          --stage-inset: 14px;
          min-height: 0 !important;
          height: auto;
          border-radius: 22px;
          padding-top: 56px;
          padding-bottom: 12px;
        }

        #eva-foam .foam-compare-slider::after {
          bottom: auto;
          top: 56px;
          opacity: 0.5;
        }

        #eva-foam .foam-compare-photo-stage {
          position: relative !important;
          left: auto !important;
          right: auto !important;
          bottom: auto !important;
          width: calc(100% - 2 * var(--stage-inset));
          margin: 0 auto;
          height: 132px !important;
        }

        #eva-foam .foam-render-inner {
          inset: 8px 10px 10px;
        }

        #eva-foam .foam-profile-img {
          width: min(100%, 420px);
        }

        #eva-foam .foam-profile-img-6 {
          max-height: 78px !important;
        }

        #eva-foam .foam-profile-img-8 {
          max-height: 108px !important;
        }

        #eva-foam .foam-compare-label {
          top: 12px;
          min-width: 68px;
          padding: 7px 11px;
          font-size: 12px;
        }

        #eva-foam .foam-compare-label-left {
          left: 14px;
        }

        #eva-foam .foam-compare-label-right {
          right: 14px;
        }

        /* Mobile: mid badge between 6mm / 8mm (same placement as desktop) */
        #eva-foam .foam-compare-slider .eva-compare-badge--mid {
          display: inline-flex !important;
          position: absolute;
          top: 12px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 8;
          min-height: 28px;
          padding: 5px 10px;
          font-size: 12px;
          gap: 5px;
          pointer-events: none;
        }

        #eva-foam .foam-compare-slider .eva-compare-badge--mid strong {
          font-size: 14px;
        }

        /* Handle sits on the photo band, not floating in empty mid-space */
        #eva-foam .foam-compare-divider {
          top: 56px;
          bottom: 12px;
        }

        #eva-foam .foam-compare-divider span {
          width: 44px;
          height: 44px;
          font-size: 18px;
          border-width: 3px;
        }
      }

/* ==== our-standard-bg-b31-style ==== */
#eva-foam {
      background: #04102a;
    }

    #eva-foam #bg-b31 {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
      background: radial-gradient(ellipse at 50% -8%, #15516f 0%, #082d46 24%, #03182b 55%, #010812 100%);
    }

    #eva-foam #bg-b31::before,
    #eva-foam #bg-b31::after {
      content: "";
      position: absolute;
      inset: -30%;
      mix-blend-mode: screen;
      pointer-events: none;
      background:
        radial-gradient(ellipse 36% 22% at 26% 14%, rgba(170,225,255,.28), transparent 62%),
        radial-gradient(ellipse 30% 18% at 70% 30%, rgba(170,225,255,.22), transparent 62%),
        radial-gradient(ellipse 28% 18% at 18% 56%, rgba(170,225,255,.18), transparent 62%);
      filter: blur(34px);
    }

    #eva-foam #bg-b31::before {
      animation: b31A 26s ease-in-out infinite alternate;
    }

    #eva-foam #bg-b31::after {
      animation: b31B 34s ease-in-out infinite alternate;
      opacity: .34;
    }

    @keyframes b31A {
      to { transform: translate(4%,3%) scale(1.1); }
    }

    @keyframes b31B {
      to { transform: translate(-3%,-4%) scale(1.14); }
    }

    #eva-foam #bg-b31 .motes {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      mix-blend-mode: screen;
      pointer-events: none;
      opacity: 0.38;
    }

    #eva-foam #bg-b31 .vignette {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse at 50% 38%, rgba(1,8,18,.36) 0%, rgba(1,8,18,.62) 42%, rgba(0,4,10,.9) 100%);
    }

    #eva-foam #bg-b31 .vignette::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(1, 7, 16, .36);
    }

/* ==== inline ==== */
#materials .section-tag::before { display: none; }

/* Old materials decorative backgrounds removed — RGB wave canvas is the sole bg */
#materials .mat-deep-bg,
#materials .mat-light-beam,
#materials .mat-liquid-blob,
#materials .mat-ripple,
#materials .mat-water-lines,
#materials .mat-grain,
#materials #mat-canvas {
  display: none !important;
}

/* Build Quality — dark blue base under nebula animation */
#materials .materials-nebula-base {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 20%, rgba(12, 48, 92, 0.95) 0%, transparent 65%),
    radial-gradient(ellipse 70% 55% at 15% 80%, rgba(8, 36, 72, 0.9) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 70%, rgba(10, 42, 80, 0.85) 0%, transparent 50%),
    linear-gradient(180deg, #061a32 0%, #041428 45%, #030f22 100%);
}

/* Build Quality — stacked interactive nebula layers */
#materials .materials-nebula-stack {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#materials .materials-nebula-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
#materials .materials-nebula-mobile-only { display: none !important; }
#materials .materials-nebula-css-fallback { display: none; }
#materials #materials-nebula-a { opacity: 0.55; }
#materials #materials-nebula-b { opacity: 0.38; mix-blend-mode: screen; }
#materials #materials-nebula-c { opacity: 0.34; mix-blend-mode: screen; }

/* Mobile: match desktop Build Quality nebula (1 combined canvas + CSS fallback) */
@media (max-width: 820px) {
  #materials {
    background: #061f3a !important;
  }
  #materials .materials-nebula-base {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 0 !important;
    /* Medium brighter dark-blue base (desktop base unchanged) */
    background:
      radial-gradient(ellipse 90% 70% at 50% 20%, rgba(18, 62, 112, 1) 0%, transparent 65%),
      radial-gradient(ellipse 70% 55% at 15% 80%, rgba(12, 48, 90, 0.95) 0%, transparent 55%),
      radial-gradient(ellipse 60% 50% at 85% 70%, rgba(14, 52, 98, 0.92) 0%, transparent 50%),
      linear-gradient(180deg, #0a2848 0%, #061f3a 45%, #041830 100%) !important;
  }
  #materials .materials-nebula-stack {
    display: block !important;
    visibility: visible !important;
    z-index: 0 !important;
  }
  /* Desktop triple-layer canvases off on mobile (context budget) */
  #materials .materials-nebula-desktop-only,
  #materials #materials-nebula-a,
  #materials #materials-nebula-b,
  #materials #materials-nebula-c {
    display: none !important;
  }
  #materials #materials-nebula-mobile {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
    filter: brightness(1.28) saturate(1.12);
  }
  /* Animated CSS nebula fallback — medium brighter glows */
  #materials .materials-nebula-css-fallback {
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
      radial-gradient(ellipse 80% 55% at 14% 32%, rgba(0, 156, 200, 0.60) 0%, transparent 58%),
      radial-gradient(ellipse 70% 50% at 86% 55%, rgba(70, 96, 200, 0.42) 0%, transparent 55%),
      radial-gradient(ellipse 92% 60% at 50% 82%, rgba(0, 110, 175, 0.55) 0%, transparent 60%),
      radial-gradient(ellipse 58% 45% at 42% 14%, rgba(24, 84, 160, 0.60) 0%, transparent 50%);
    animation: materialsNebulaDrift 11s ease-in-out infinite alternate;
    filter: blur(2px) saturate(1.12) brightness(1.06);
  }
  #materials.materials-nebula-gl-ok .materials-nebula-css-fallback {
    opacity: 0.6;
  }
  #materials:not(.materials-nebula-gl-ok) .materials-nebula-css-fallback {
    opacity: 1;
  }
}

@keyframes materialsNebulaDrift {
  0% {
    transform: scale(1.10) translate(-4%, 3%);
    filter: blur(2px) saturate(1.14) brightness(1.05) hue-rotate(-6deg);
  }
  100% {
    transform: scale(1.17) translate(4%, -3.5%);
    filter: blur(3px) saturate(1.22) brightness(1.12) hue-rotate(6deg);
  }
}
    @keyframes specsPulse {
      0%, 100% { box-shadow: 0 0 18px rgba(68,217,166,0.55), 0 0 40px rgba(68,217,166,0.25); }
      50%       { box-shadow: 0 0 28px rgba(68,217,166,0.85), 0 0 60px rgba(68,217,166,0.45); }
    }
    @keyframes specsPulseBlue {
      0%, 100% { box-shadow: 0 0 18px rgba(0,180,216,0.65), 0 0 40px rgba(0,180,216,0.35); }
      50%       { box-shadow: 0 0 28px rgba(0,180,216,0.95), 0 0 60px rgba(0,180,216,0.55); }
    }
    @keyframes specsPulsePurple {
      0%, 100% { box-shadow: 0 0 18px rgba(160,144,239,0.65), 0 0 40px rgba(160,144,239,0.35); }
      50%       { box-shadow: 0 0 28px rgba(160,144,239,0.95), 0 0 60px rgba(160,144,239,0.55); }
    }
    @keyframes matBeamMove {
      from { transform: translateX(-35px) rotate(18deg); }
      to   { transform: translateX(55px) rotate(24deg); }
    }
    @keyframes matBlobFloat {
      from {
        transform: translate3d(-25px, 20px, 0) rotate(0deg) scale(1);
        border-radius: 45% 55% 60% 40% / 45% 35% 65% 55%;
      }
      to {
        transform: translate3d(35px, -30px, 0) rotate(18deg) scale(1.08);
        border-radius: 60% 40% 42% 58% / 58% 55% 45% 42%;
      }
    }
    @keyframes matRipplePulse {
      from { opacity: 0.55; transform: translate(-50%, -50%) scale(0.25); }
      to   { opacity: 0;    transform: translate(-50%, -50%) scale(2.8); }
    }
    @keyframes matWaterLines {
      from { background-position: 0 0; }
      to   { background-position: 0 72px; }
    }

/* ==== inline ==== */
#machines .section-inner {
        max-width: 1380px;
      }

      #machines .machine-showcase-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
        margin: 56px 0 54px;
      }

      #machines .machine-showcase-card {
        position: relative;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 26px;
        border: 1px solid rgba(0, 180, 216, 0.28);
        border-radius: 26px;
        overflow: hidden;
        background:
          radial-gradient(circle at 20% 0%, rgba(0, 180, 216, 0.16), transparent 34%),
          linear-gradient(145deg, rgba(3, 13, 26, 0.98), rgba(6, 28, 56, 0.88));
        box-shadow: 0 24px 90px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04);
      }

      #machines .machine-showcase-card::before {
        content: '';
        position: absolute;
        inset: 0 0 auto;
        height: 3px;
        background: linear-gradient(90deg, var(--foam-teal), rgba(0, 180, 216, 0.12));
      }

      #machines .machine-scan-card {
        border-color: rgba(68, 217, 166, 0.34);
        background:
          radial-gradient(circle at 20% 0%, rgba(68, 217, 166, 0.22), transparent 34%),
          linear-gradient(145deg, rgba(2, 18, 20, 0.98), rgba(6, 46, 40, 0.84));
      }

      #machines .machine-scan-card::before {
        background: linear-gradient(90deg, #44d9a6, rgba(68, 217, 166, 0.12));
      }

      #machines .machine-laser-card {
        border-color: rgba(160, 144, 239, 0.34);
        background:
          radial-gradient(circle at 20% 0%, rgba(160, 144, 239, 0.22), transparent 34%),
          linear-gradient(145deg, rgba(7, 6, 24, 0.98), rgba(28, 9, 58, 0.84));
      }

      #machines .machine-laser-card::before {
        background: linear-gradient(90deg, #a090ef, rgba(160, 144, 239, 0.12));
      }

      #machines .is-featured-machine {
        transform: translateY(-12px);
        border-color: rgba(0, 180, 216, 0.46);
      }

      #machines .machine-card-head {
        position: relative;
      }

      #machines .machine-kicker {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 0 12px;
        border: 1px solid rgba(0, 180, 216, 0.32);
        border-radius: 999px;
        background: rgba(0, 180, 216, 0.09);
        color: var(--foam-teal);
        font-size: 10px;
        letter-spacing: 2.4px;
        text-transform: uppercase;
        font-weight: 900;
      }

      #machines .machine-laser-card .machine-kicker {
        border-color: rgba(160, 144, 239, 0.42);
        background: rgba(160, 144, 239, 0.12);
        color: #b9adff;
      }


      #machines .machine-scan-card .machine-kicker {
        border-color: rgba(68, 217, 166, 0.42);
        background: rgba(68, 217, 166, 0.12);
        color: #7df0c4;
      }

      #machines .machine-card-head h3 {
        margin: 18px 0 8px;
        font-family: 'Bebas Neue', sans-serif;
        font-size: clamp(42px, 3.4vw, 58px);
        line-height: 0.92;
        letter-spacing: 1.4px;
        color: var(--white);
      }

      #machines .machine-laser-card .machine-card-head h3 {
        font-size: clamp(38px, 2.9vw, 52px);
        letter-spacing: 1px;
        white-space: nowrap;
      }

      #machines .machine-card-head p {
        margin: 0;
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.45;
      }

      #machines .machine-number {
        position: absolute;
        top: 0;
        right: 0;
        font-family: 'Bebas Neue', sans-serif;
        font-size: 78px;
        line-height: 0.8;
        color: rgba(255, 255, 255, 0.06);
        letter-spacing: 1px;
        pointer-events: none;
      }

      #machines .machine-visual {
        position: relative;
        min-height: 210px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 22px;
        border: 1px solid rgba(0, 180, 216, 0.18);
        border-radius: 18px;
        background:
          radial-gradient(circle at 50% 45%, rgba(0, 180, 216, 0.16), transparent 52%),
          rgba(0, 8, 20, 0.54);
      }

      #machines .machine-scan-card .machine-visual {
        border-color: rgba(68, 217, 166, 0.2);
        background:
          radial-gradient(circle at 50% 45%, rgba(68, 217, 166, 0.16), transparent 52%),
          rgba(0, 10, 16, 0.56);
      }

      #machines .machine-laser-card .machine-visual {
        border-color: rgba(0, 180, 216, 0.22);
        background:
          radial-gradient(circle at 50% 45%, rgba(0, 180, 216, 0.18), transparent 52%),
          rgba(0, 8, 20, 0.72);
        min-height: 240px;
      }

      #machines .machine-laser-card .machine-visual img {
        max-height: 230px;
        filter: drop-shadow(0 8px 28px rgba(0, 180, 216, 0.28));
      }

      #machines .machine-cnc-card .machine-visual {
        border-color: rgba(0, 180, 216, 0.22);
        background:
          radial-gradient(circle at 50% 45%, rgba(0, 180, 216, 0.16), transparent 52%),
          rgb(0, 4, 10);
        min-height: 240px;
      }

      #machines .machine-cnc-card .machine-visual img {
        filter: drop-shadow(0 8px 32px rgba(0, 180, 216, 0.32));
        max-height: 230px;
      }

      #machines .machine-visual img {
        width: 100%;
        max-height: 190px;
        object-fit: contain;
        display: block;
        filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.62));
      }

      #machines .machine-visual span {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 12px;
        padding-top: 8px;
        border-top: 1px solid rgba(0, 180, 216, 0.16);
        color: rgba(174, 218, 234, 0.72);
        font-size: 9.5px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        text-align: center;
        white-space: normal;
      }

      #machines .machine-scan-card .machine-visual span {
        border-top-color: rgba(68, 217, 166, 0.18);
        color: rgba(183, 238, 218, 0.76);
      }

      #machines .machine-laser-card .machine-visual span {
        letter-spacing: 1px;
        font-size: 9px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        white-space: normal;
        max-width: 88%;
      }

      #machines .machine-stat-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

      #machines .machine-stat-row div {
        min-height: 68px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 9px 6px;
        border: 1px solid rgba(0, 180, 216, 0.2);
        border-radius: 14px;
        background: rgba(0, 180, 216, 0.065);
        text-align: center;
      }

      #machines .machine-scan-card .machine-stat-row div {
        border-color: rgba(68, 217, 166, 0.22);
        background: rgba(68, 217, 166, 0.07);
      }


      #machines .machine-stat-row strong {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 24px;
        line-height: 0.95;
        letter-spacing: 0.5px;
        color: var(--foam-teal);
      }

      #machines .machine-laser-card .machine-stat-row strong {
        color: #b9adff;
      }

      #machines .machine-scan-card .machine-stat-row strong {
        color: #44d9a6;
      }


      #machines .machine-stat-row span {
        margin-top: 6px;
        color: var(--text-muted);
        font-size: 9px;
        letter-spacing: 1.6px;
        text-transform: uppercase;
      }

      #machines .machine-detail-panel {
        padding: 17px 18px;
        border: 1px solid rgba(0, 180, 216, 0.22);
        border-radius: 16px;
        background: rgba(0, 180, 216, 0.06);
      }

      #machines .machine-laser-card .machine-detail-panel {
        border-color: rgba(160, 144, 239, 0.26);
        background: rgba(160, 144, 239, 0.07);
      }

      #machines .machine-scan-card .machine-detail-panel {
        border-color: rgba(68, 217, 166, 0.26);
        background: rgba(68, 217, 166, 0.07);
      }


      #machines .machine-detail-panel h4 {
        margin: 0 0 8px;
        color: var(--foam-teal);
        font-size: 10px;
        letter-spacing: 2.8px;
        text-transform: uppercase;
      }

      #machines .machine-laser-card .machine-detail-panel h4 {
        color: #b9adff;
      }

      #machines .machine-scan-card .machine-detail-panel h4 {
        color: #7df0c4;
      }


      #machines .machine-detail-panel p {
        margin: 0;
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.65;
      }

      #machines .machine-feature-list {
        display: grid;
        gap: 9px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      #machines .machine-feature-list li {
        position: relative;
        padding-left: 20px;
        color: rgba(174, 218, 234, 0.9);
        font-size: 12px;
        line-height: 1.45;
      }

      #machines .machine-feature-list li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.55em;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--foam-teal);
        box-shadow: 0 0 18px rgba(0, 180, 216, 0.42);
      }

      #machines .machine-laser-card .machine-feature-list li::before {
        background: #a090ef;
        box-shadow: 0 0 18px rgba(160, 144, 239, 0.42);
      }

      #machines .machine-scan-card .machine-feature-list li::before {
        background: #44d9a6;
        box-shadow: 0 0 18px rgba(68, 217, 166, 0.42);
      }

      /* Desktop only: hide detail blurbs + bullet lists (mobile rules left untouched) */
      @media (min-width: 761px) {
        #machines .machine-detail-panel,
        #machines .machine-feature-list {
          display: none !important;
        }
      }

      @media (max-width: 1120px) {
        #machines .machine-showcase-grid {
          grid-template-columns: 1fr;
        }

        #machines .machine-showcase-card {
          display: grid;
          grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
          align-items: stretch;
        }

        #machines .machine-card-head,
        #machines .machine-visual {
          grid-column: 1;
        }

        #machines .machine-stat-row,
        #machines .machine-detail-panel,
        #machines .machine-feature-list {
          grid-column: 2;
        }

        #machines .is-featured-machine {
          transform: none;
        }
      }

      @media (max-width: 760px) {
        #machines .machine-showcase-grid {
          margin-top: 38px;
        }

        #machines .machine-showcase-card {
          display: flex;
          padding: 20px;
          border-radius: 22px;
        }

        /* Mobile only: hide detail blurb + bullet list (keep stats + tap for specs) */
        #machines .machine-detail-panel,
        #machines .machine-feature-list {
          display: none !important;
        }

        /* Hide caption under scanner / CNC / laser photos on mobile */
        #machines .machine-visual span {
          display: none !important;
        }

        /* Hide long machines header blurb on mobile */
        #machines .machines-header-intro {
          display: none !important;
        }

        #machines .machine-card-head,
        #machines .machine-visual,
        #machines .machine-stat-row,
        #machines .machine-detail-panel,
        #machines .machine-feature-list {
          grid-column: auto;
        }

        #machines .machine-number {
          font-size: 56px;
        }

        /* Keep stats 3-across side-by-side on mobile (compact) */
        #machines .machine-stat-row {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 6px;
        }
        #machines .machine-stat-row div {
          min-height: 54px;
          padding: 8px 4px;
          border-radius: 12px;
          min-width: 0;
        }
        #machines .machine-stat-row strong {
          font-size: 15px;
          letter-spacing: 0.3px;
        }
        #machines .machine-stat-row span {
          margin-top: 3px;
          font-size: 7.5px;
          letter-spacing: 0.8px;
          line-height: 1.2;
        }
      }

/* ==== inline ==== */
.swatch-filter-active { border-color:var(--foam-teal)!important;background:rgba(0,180,216,0.045)!important;color:var(--white)!important; }
/* Semi-transparent frosted fill on the colour filter pills (overrides inline/JS transparent) */
#colours .colour-filter-row button {
  background: rgba(14, 34, 60, 0.55) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#colours .colour-filter-row button.swatch-filter-active {
  background: rgba(0, 180, 216, 0.18) !important;
}
/* Mobile-only hint for collapsed colour grid — always hidden on desktop */
.colour-mobile-hint { display: none; }

/* Desktop: ignore mobile-collapsed class so colours always show on load */
@media (min-width: 821px) {
  #colours.colours-mobile-collapsed #colour-grid {
    display: grid !important;
    height: auto !important;
    margin-bottom: 40px !important;
    visibility: visible !important;
    overflow: visible !important;
  }
  #colours.colours-mobile-collapsed .colour-mobile-hint {
    display: none !important;
  }

  /* Desktop only: hide LEGEND bar (mobile keeps it) */
  #colours .colour-legend-bar {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }

  /* Desktop only: hide colour samples when user re-clicks the active filter */
  #colours.colours-desktop-collapsed #colour-grid {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }
}

/* Condensed colour notes — mobile only (desktop uses full intro + 3 cards) */
.colour-intro-mobile { display: none; }

/* Mobile only: show full colour-range banner (not cropped to 120px) */
@media (max-width: 820px) {
  #colours .colour-range-banner {
    margin-bottom: 24px !important;
  }
  #colours .colour-range-banner img {
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    width: 100% !important;
  }

  /* Swap top intro for condensed notes as normal section body text; hide bottom cards */
  #colours .colour-intro-desktop {
    display: none !important;
  }
  #colours .colour-intro-mobile {
    display: block;
    margin: 0 0 28px;
    /* Match section-body look — no box chrome */
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted);
  }
  #colours .colour-info-grid {
    display: none !important;
  }
}

@media(max-width:1100px){#colour-grid{grid-template-columns:repeat(3,1fr)!important;}}
@media(max-width:700px){#colour-grid{grid-template-columns:repeat(3,1fr)!important;}}

/* Three info cards at the bottom of the Choose Your Colour section */
.colour-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto 24px;
}
.colour-info-card {
  --accent: #00b4d8;
  --accent-rgb: 0,180,216;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(var(--accent-rgb),0.07) 0%, rgba(5,22,42,0) 46%),
    rgba(5, 22, 42, 0.72);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 16px;
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
  backdrop-filter: blur(10px);
}
/* top accent bar */
.colour-info-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6;
  transition: opacity 0.28s ease;
}
/* corner glow */
.colour-info-card::after {
  content: '';
  position: absolute;
  top: -70px; right: -70px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.28), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}
.colour-info-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 22px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(var(--accent-rgb),0.14);
}
.colour-info-card:hover::before { opacity: 1; }
.colour-info-card:hover::after { opacity: 1; }
.colour-info-card .card-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.colour-info-card .card-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  margin: 0;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: radial-gradient(circle at 30% 25%, rgba(var(--accent-rgb),0.24), rgba(var(--accent-rgb),0.06));
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 18px rgba(var(--accent-rgb),0.14);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.colour-info-card:hover .card-icon {
  transform: scale(1.06) rotate(-3deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 26px rgba(var(--accent-rgb),0.4);
}
.colour-info-card .card-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.colour-info-card .card-eyebrow {
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(var(--accent-rgb), 0.9);
}
.colour-info-card .card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 21px;
  letter-spacing: 1.5px;
  line-height: 1;
  margin: 0;
  color: var(--white);
  font-weight: 400;
  text-transform: uppercase;
}
.colour-info-card .card-body {
  position: relative;
  z-index: 1;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
/* per-card accent colours */
.colour-info-card.cic--custom { --accent:#00b4d8; --accent-rgb:0,180,216; }
.colour-info-card.cic--help   { --accent:#2ee6a0; --accent-rgb:46,230,160; }
.colour-info-card.cic--note   { --accent:#e6b64c; --accent-rgb:230,182,76; }
/* Mobile only: compact legend + colour info cards (desktop unchanged) */
@media (max-width: 760px) {
  .colour-legend-bar {
    gap: 8px 12px !important;
    margin-bottom: 10px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
  }
  .colour-legend-bar > div {
    font-size: 10px !important;
    margin-right: 0 !important;
    gap: 5px !important;
  }
  .colour-legend-bar > div > div {
    padding: 2px 6px !important;
    font-size: 6.5px !important;
  }

  /* Compact info pack: denser horizontal rows instead of tall stacked cards */
  .colour-info-grid {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 8px;
  }
  .colour-info-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    gap: unset;
    align-items: start;
  }
  .colour-info-card .card-header {
    display: contents;
  }
  .colour-info-card .card-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 16px;
    margin-top: 1px;
  }
  .colour-info-card .card-heading {
    grid-column: 2;
    grid-row: 1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
  }
  .colour-info-card .card-eyebrow {
    font-size: 8px;
    letter-spacing: 1.4px;
    line-height: 1.2;
  }
  .colour-info-card .card-title {
    font-size: 15px;
    letter-spacing: 0.8px;
    line-height: 1.15;
  }
  .colour-info-card .card-body {
    grid-column: 2;
    grid-row: 2;
    font-size: 11px;
    line-height: 1.35;
  }
  .colour-info-card::after {
    width: 100px;
    height: 100px;
    top: -40px;
    right: -40px;
  }
  .colour-info-card:hover {
    transform: none;
  }
}

/* ==== inline ==== */
@keyframes holoGlow {
    0%   { box-shadow:0 0 40px rgba(0,180,216,0.35),0 0 80px rgba(0,100,200,0.20); border-color:rgba(0,180,216,0.5); }
    33%  { box-shadow:0 0 40px rgba(80,40,255,0.30),0 0 80px rgba(0,180,216,0.15); border-color:rgba(80,40,255,0.45); }
    66%  { box-shadow:0 0 40px rgba(0,220,200,0.30),0 0 80px rgba(80,40,255,0.15); border-color:rgba(0,220,200,0.45); }
    100% { box-shadow:0 0 40px rgba(0,180,216,0.35),0 0 80px rgba(0,100,200,0.20); border-color:rgba(0,180,216,0.5); }
  }
  @keyframes holoSheen {
    0%   { background-position:200% center; }
    100% { background-position:-200% center; }
  }
  .mockup-card { position:absolute;top:50%;left:50%;width:210px;transform-origin:center center;cursor:grab;transition:transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94),opacity 0.55s ease,filter 0.55s ease;will-change:transform,opacity; }
  .mockup-card:active { cursor:grabbing; }
  .mockup-card-inner { position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(0,180,216,0.2); }
  .mockup-card.active-card .mockup-card-inner {
    animation:holoGlow 4s linear infinite;
    border-width:1px;
  }
  .mockup-card.active-card .mockup-card-inner::after {
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,0.08) 50%,transparent 70%);
    background-size:200% 100%;
    animation:holoSheen 3s linear infinite;
    pointer-events:none;border-radius:14px;
  }
  .mockup-card img { width:100%;display:block;border-radius:14px; }
  .mockup-dot { width:6px;height:6px;border-radius:50%;background:var(--border);transition:all 0.3s;cursor:pointer; }
  .mockup-dot.active { background:var(--foam-teal);width:20px;border-radius:100px; }

/* ==== engraving-moving-lines-style ==== */
#engraving .engraving-moving-lines-bg {
      background-size: 120px 120px;
      animation: engravingLinesMoveRight 9s linear infinite;
      will-change: background-position;
    }

    @keyframes engravingLinesMoveRight {
      from { background-position: 0 0; }
      to { background-position: 120px 0; }
    }

/* ==== inline ==== */
@keyframes wsBeaconPulse {
      0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--foam-teal); }
      50% { opacity: 0.45; box-shadow: 0 0 16px var(--foam-teal); }
    }
    @media (max-width: 900px) {
      .ws-grid { grid-template-columns: 1fr !important; }
    }

/* Workshop address link — matches plain text on desktop */
.ws-address-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: inherit;
}
.ws-address-link:hover,
.ws-address-link:focus {
  text-decoration: none;
  color: inherit;
}

/* Workshop header swaps — mobile shows address as title; desktop keeps original */
.ws-tag-mobile,
.ws-title-mobile {
  display: none;
}

/* Mobile workshop: drop long intro + Find Us card; title = street, tag = suburb */
@media (max-width: 820px) {
  #workshop .ws-header {
    margin-bottom: 28px !important;
  }
  #workshop .ws-header-intro {
    display: none !important;
  }
  #workshop .ws-address-card {
    display: none !important;
  }
  #workshop .ws-tag-desktop,
  #workshop .ws-title-desktop {
    display: none !important;
  }
  #workshop .ws-tag-mobile {
    display: inline;
  }
  #workshop .ws-title-mobile {
    display: block;
    color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 1.05;
    -webkit-tap-highlight-color: rgba(0, 180, 216, 0.2);
  }
  #workshop .ws-title-mobile:active {
    opacity: 0.88;
  }
}

/* ==== quote-builder-bg-shader ==== */
#pricing #pricing-shader-canvas {
      opacity: 0.18;
      mix-blend-mode: screen;
    }

/* ==== inline ==== */
.quote-brief-section .section-inner { position: relative; z-index: 1; }
.quote-brief-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: end;
  margin-bottom: 34px;
}
.quote-brief-intro {
  max-width: 920px;
  margin-bottom: 0;
}
.quote-path {
  display: grid;
  gap: 4px;
  margin: -6px 0 22px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(0, 180, 216, 0.26);
  background:
    linear-gradient(135deg, rgba(0,180,216,0.1), rgba(3,13,26,0.72)),
    rgba(3,13,26,0.58);
  box-shadow: 0 14px 38px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.035);
}
.quote-path article {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-height: 56px;
  padding: 9px 8px;
  border-radius: 13px;
}
.quote-path article:not(:last-child) {
  border-bottom: 1px solid rgba(144,224,239,0.12);
}
.quote-path span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--foam-teal);
  color: var(--ocean-deep);
  font-size: 9px;
  letter-spacing: 0.7px;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(0,180,216,0.26);
}
.quote-path strong {
  display: block;
  color: var(--white);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(20px, 1.35vw, 24px);
  line-height: 0.96;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.quote-path p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.35;
}
.quote-brief-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(340px, 0.72fr);
  gap: 24px;
  align-items: start;
}
.quote-builder-panel,
.quote-summary-panel {
  background: rgba(3, 13, 26, 0.72);
  border: 1px solid rgba(0, 180, 216, 0.34);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
}
.quote-side-stack {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 18px;
}
.quote-summary-panel { position: relative; }
.quote-payment-panel {
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(0, 180, 216, 0.34);
  background:
    radial-gradient(circle at 18% 0%, rgba(144,224,239,0.12), transparent 42%),
    linear-gradient(135deg, rgba(0,180,216,0.1), rgba(3,13,26,0.76));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255,255,255,0.04);
}
.quote-payment-panel span {
  display: block;
  margin-bottom: 8px;
  color: var(--foam-teal);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 800;
}
.quote-payment-panel strong {
  display: block;
  color: var(--white);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 0.95;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.quote-payment-panel p {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
}
.quote-pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  width: 100%;
  border-radius: 999px;
  background: var(--foam-teal);
  color: var(--ocean-deep);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 3px;
  box-shadow: 0 16px 38px rgba(0, 180, 216, 0.25);
}
.quote-pay-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 46px rgba(0, 180, 216, 0.34);
}
.quote-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 24px;
}
.quote-panel-head h3 {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(34px, 4vw, 58px);
  letter-spacing: 2px;
  line-height: 0.95;
  color: var(--white);
}
.quote-panel-head.compact h3 { font-size: clamp(30px, 3vw, 42px); }
.quote-kicker,
.quote-group-title,
.quote-field span {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--foam-teal);
  font-weight: 700;
}
.quote-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
/* Boat length spans the full width; make/model + location sit side-by-side below */
.quote-top-grid { align-items: end; }
.quote-length-field {
  grid-column: 1 / -1;
  gap: 12px;
  padding: 16px 18px 14px;
  border: 1px solid rgba(0, 180, 216, 0.22);
  border-radius: 16px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(0, 180, 216, 0.08), transparent 55%),
    rgba(3, 13, 26, 0.55);
  margin-bottom: 2px;
}
.quote-length-field span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.quote-length-field strong {
  color: var(--white);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  white-space: nowrap;
  background: rgba(0, 180, 216, 0.12);
  border: 1px solid rgba(0, 180, 216, 0.45);
  border-radius: 999px;
  padding: 3px 14px;
  box-shadow: 0 0 16px rgba(0, 180, 216, 0.2);
}
.quote-length-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  padding: 0 !important;
  background: linear-gradient(90deg, #22d3ee 0%, #00b4d8 25.7%, rgba(255,255,255,0.08) 25.7%, rgba(255,255,255,0.08) 100%);
  cursor: pointer;
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.55), 0 0 18px rgba(0, 180, 216, 0.14);
}
.quote-length-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff, #6fe9ff 38%, var(--foam-teal) 66%, #007a9c);
  border: 2px solid #eafcff;
  box-shadow: 0 0 0 5px rgba(0,180,216,0.18), 0 0 16px 2px rgba(0,180,216,0.55), 0 4px 10px rgba(0,0,0,0.5);
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.quote-length-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.quote-length-slider:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.18);
  box-shadow: 0 0 0 7px rgba(0,180,216,0.24), 0 0 24px 4px rgba(0,180,216,0.8), 0 4px 12px rgba(0,0,0,0.55);
}
.quote-length-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgba(0,180,216,0.32), 0 0 24px rgba(0,180,216,0.7);
}
.quote-length-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff, #6fe9ff 38%, var(--foam-teal) 66%, #007a9c);
  border: 2px solid #eafcff;
  box-shadow: 0 0 0 5px rgba(0,180,216,0.18), 0 0 16px 2px rgba(0,180,216,0.55), 0 4px 10px rgba(0,0,0,0.5);
  cursor: grab;
}
.quote-slider-scale {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 1;
  margin-top: 2px;
}
.quote-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.quote-field-wide { margin-top: 20px; }
.quote-field input,
.quote-field select,
.quote-field textarea,
.quote-summary-box {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0, 180, 216, 0.28);
  border-radius: 14px;
  background: rgba(3, 13, 26, 0.78);
  color: var(--white);
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  padding: 13px 14px;
  outline: none;
}
.quote-field textarea,
.quote-summary-box { resize: vertical; }
.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus,
.quote-summary-box:focus {
  border-color: var(--foam-teal);
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.14);
}
.quote-group { margin-bottom: 22px; }
.quote-group-title { margin-bottom: 12px; }
.quote-chip-grid,
.quote-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.quote-chip {
  border: 1px solid rgba(0, 180, 216, 0.28);
  border-radius: 999px;
  background: rgba(4, 18, 36, 0.72);
  color: var(--text-muted);
  min-height: 42px;
  padding: 10px 13px;
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
}
.quote-chip:hover,
.quote-chip.active {
  border-color: var(--foam-teal);
  background: rgba(0, 180, 216, 0.16);
  color: var(--white);
}
.quote-chip:hover { transform: translateY(-1px); }
.quote-check-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.quote-check-grid label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border: 1px solid rgba(0, 180, 216, 0.22);
  border-radius: 14px;
  background: rgba(4, 18, 36, 0.58);
  color: var(--text-muted);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.35;
  cursor: pointer;
}
.quote-check-grid input {
  width: 17px;
  height: 17px;
  accent-color: var(--foam-teal);
  flex: 0 0 auto;
}
.quote-summary-box {
  min-height: 520px;
  color: #d7f5ff;
  background: linear-gradient(135deg, rgba(0, 180, 216, 0.08), rgba(3, 13, 26, 0.86));
}
.quote-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.quote-copy-btn,
.quote-contact-btn {
  border: 0;
  border-radius: 999px;
  background: var(--foam-teal);
  color: var(--ocean-deep);
  padding: 14px 16px;
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.quote-contact-btn {
  background: transparent;
  color: var(--foam-teal);
  border: 1px solid rgba(0, 180, 216, 0.45);
}
/* ==== quote builder: service method cards ==== */
.qb-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.qb-method {
  position: relative;
  text-align: left;
  border: 1px solid rgba(0, 180, 216, 0.28);
  border-radius: 16px;
  background: rgba(4, 18, 36, 0.72);
  padding: 16px 16px 15px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.qb-method:hover { transform: translateY(-2px); border-color: var(--foam-teal); }
.qb-method.active {
  border-color: var(--foam-teal);
  background: rgba(0, 180, 216, 0.14);
  box-shadow: inset 0 0 0 1px var(--foam-teal), 0 14px 34px rgba(0, 0, 0, 0.4);
}
.qb-method-icon { font-size: 24px; line-height: 1; }
.qb-method-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--white);
}
.qb-method-desc { font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }
.qb-method-badge {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700;
  color: var(--ocean-deep);
  background: var(--foam-teal);
  padding: 3px 8px; border-radius: 999px;
}
.qb-method-help {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  color: var(--foam-teal);
  text-decoration: none;
  font-weight: 600;
}
.qb-method-help:hover { text-decoration: underline; }

/* ==== quote builder: colour dropdown with thumbnails ==== */
.qb-colour { position: relative; }
.qb-colour-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(0, 180, 216, 0.28);
  border-radius: 14px;
  background: rgba(3, 13, 26, 0.78);
  color: var(--white);
  padding: 9px 14px;
  cursor: pointer;
  font-family: Montserrat, sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.qb-colour.open .qb-colour-trigger,
.qb-colour-trigger:hover { border-color: var(--foam-teal); }
.qb-colour-current { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qb-colour-thumb {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 8px;
  background-size: cover; background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.qb-colour-thumb--help { background: rgba(0, 180, 216, 0.1); }
.qb-colour-label { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-colour-caret { color: var(--foam-teal); transition: transform 0.25s ease; font-size: 12px; flex-shrink: 0; }
.qb-colour.open .qb-colour-caret { transform: rotate(180deg); }
.qb-colour-panel {
  position: absolute; z-index: 40;
  top: calc(100% + 6px); left: 0; right: 0;
  max-height: 300px; overflow-y: auto;
  background: rgba(6, 20, 38, 0.98);
  border: 1px solid rgba(0, 180, 216, 0.35);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.qb-colour-option {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  border: none; border-radius: 10px;
  background: transparent; color: var(--white);
  cursor: pointer; text-align: left;
  font-family: Montserrat, sans-serif; font-size: 13px;
}
.qb-colour-option:hover { background: rgba(0, 180, 216, 0.14); }
.qb-colour-optname { flex: 1; min-width: 0; }
.qb-colour-stock {
  font-size: 8px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
  color: #0a1628; background: rgba(0, 200, 100, 0.9);
  padding: 2px 7px; border-radius: 999px; flex-shrink: 0;
}

/* ==== quote builder: optional detail collapsible ==== */
.qb-more {
  border: 1px solid rgba(0, 180, 216, 0.2);
  border-radius: 14px;
  background: rgba(3, 13, 26, 0.4);
  margin-top: 4px;
}
.qb-more-summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
  color: var(--foam-teal);
}
.qb-more-summary::-webkit-details-marker { display: none; }
.qb-more-summary em {
  color: var(--text-muted); font-style: normal; letter-spacing: 1px;
  text-transform: none; font-weight: 500; margin-left: 6px;
}
.qb-more-caret { transition: transform 0.25s ease; }
.qb-more[open] .qb-more-caret { transform: rotate(180deg); }
.qb-more-body { padding: 2px 18px 18px; }

@media (max-width: 1080px) {
  .quote-brief-layout,
  .quote-brief-hero { grid-template-columns: 1fr; }
  .quote-side-stack { position: relative; top: auto; }
}

/* Mobile only: join builder + enquiry into one continuous card */
@media (max-width: 820px) {
  /* Hide quote section intro blurb on mobile */
  #pricing .quote-brief-intro {
    display: none !important;
  }
  #pricing .quote-brief-hero {
    display: none !important;
  }
  #pricing .quote-brief-layout {
    gap: 0;
    background: rgba(3, 13, 26, 0.72);
    border: 1px solid rgba(0, 180, 216, 0.34);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
    overflow: hidden;
  }
  #pricing .quote-side-stack {
    gap: 0;
  }
  #pricing .quote-builder-panel,
  #pricing .quote-summary-panel {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 20px;
  }
  #pricing .quote-builder-panel {
    padding-bottom: 12px;
  }
  #pricing .quote-summary-panel {
    padding-top: 18px;
    margin-top: 0;
    border-top: 1px solid rgba(0, 180, 216, 0.22);
  }
  /* Hide redundant "Free Consultation / Send Your Enquiry" heading on mobile */
  #pricing .quote-summary-panel .quote-panel-head {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .quote-path { margin-bottom: 18px; }
  .quote-path article { padding: 10px 8px; }
  .quote-builder-panel,
  .quote-summary-panel,
  .quote-payment-panel { padding: 20px; border-radius: 18px; }
  /* Keep joined single-card look (override padding/radius above for #pricing) */
  #pricing .quote-builder-panel,
  #pricing .quote-summary-panel {
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .quote-panel-head { flex-direction: column; }
  .quote-form-grid,
  .quote-check-grid,
  .quote-actions { grid-template-columns: 1fr; }
  /* Make / model + location side-by-side on mobile; boat length still full-width */
  .quote-top-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .quote-top-grid .quote-field {
    min-width: 0;
  }
  .quote-top-grid .quote-field input {
    font-size: 13px;
    padding: 12px 10px;
  }
  /* Service methods: compact 2×2 on mobile (desktop stays default 2-col sizing) */
  .qb-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .qb-method {
    padding: 12px 10px 11px;
    border-radius: 12px;
    gap: 3px;
    min-width: 0;
  }
  .qb-method-icon { font-size: 18px; }
  .qb-method-name {
    font-size: 13px;
    letter-spacing: 0.6px;
    line-height: 1.15;
  }
  .qb-method-desc {
    font-size: 10px;
    line-height: 1.35;
  }
  .qb-method-badge {
    top: 8px;
    right: 8px;
    font-size: 7px;
    letter-spacing: 1px;
    padding: 2px 6px;
  }
  .qb-method-help {
    margin-top: 10px;
    font-size: 11px;
  }
  /* Coverage chips: 2-up compact grid on mobile only (desktop stays 3-col) */
  .quote-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .quote-chip {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 11px;
  }
  .quote-top-grid .quote-field:nth-child(3) { grid-column: auto; }
  .quote-summary-box { min-height: 420px; }
}

/* ==== inline ==== */
@keyframes cardGlow {
      0%,100% { opacity:0.35; transform:scale(1); }
      50%      { opacity:0.65; transform:scale(1.05); }
    }
    .merged-contact-details {
      margin-top: 92px;
      padding-top: 76px;
    }
    .merged-contact-details > .reveal:first-child {
      margin-bottom: 44px !important;
    }
    /* Match git-tile colour/style (same family as Call / Email / Visit / Website) */
    .contact-pay-cta {
      --accent: #00b4d8;
      --accent-rgb: 0, 180, 216;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: center;
      margin: 32px auto 0;
      padding: clamp(26px, 3vw, 36px) clamp(22px, 3vw, 32px);
      max-width: 1180px;
      border-radius: 18px;
      border: 1px solid rgba(var(--accent-rgb), 0.2);
      background:
        radial-gradient(130% 90% at 50% 0%, rgba(var(--accent-rgb), 0.09), transparent 60%),
        var(--card-bg);
      box-shadow: none;
      overflow: hidden;
      position: relative;
      transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
    }
    .contact-pay-cta::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      border-radius: 0;
      border: none;
      inset: auto;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      opacity: 0.55;
      pointer-events: none;
      transition: opacity 0.28s ease;
    }
    .contact-pay-cta:hover {
      transform: translateY(-3px);
      border-color: rgba(var(--accent-rgb), 0.6);
      box-shadow: 0 22px 50px rgba(0,0,0,0.45), 0 0 26px rgba(var(--accent-rgb), 0.14);
    }
    .contact-pay-cta:hover::before {
      opacity: 1;
    }
    .contact-pay-cta-copy {
      position: relative;
      z-index: 1;
    }
    .contact-pay-cta-copy span {
      display: block;
      color: rgba(var(--accent-rgb), 0.95);
      font-size: 10px;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .contact-pay-cta-copy h3 {
      margin: 0;
      color: var(--white);
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(32px, 3.6vw, 52px);
      line-height: 0.98;
      letter-spacing: 1.4px;
    }
    .contact-pay-cta-copy p {
      max-width: 720px;
      margin: 12px 0 0;
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.6;
    }
    .contact-pay-cta-button {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 200px;
      min-height: 56px;
      padding: 0 28px;
      border-radius: 16px;
      background: radial-gradient(circle at 30% 25%, rgba(var(--accent-rgb), 0.26), rgba(var(--accent-rgb), 0.08));
      border: 1px solid rgba(var(--accent-rgb), 0.4);
      color: var(--white);
      text-decoration: none;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 2.5px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 0 18px rgba(var(--accent-rgb), 0.16);
      transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
    }
    .contact-pay-cta-button::after {
      content: '→';
      margin-left: 12px;
      font-size: 16px;
      line-height: 1;
      color: var(--accent);
    }
    .contact-pay-cta-button:hover {
      transform: translateY(-2px) scale(1.03);
      border-color: rgba(var(--accent-rgb), 0.75);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 28px rgba(var(--accent-rgb), 0.45);
      background: radial-gradient(circle at 30% 25%, rgba(var(--accent-rgb), 0.34), rgba(var(--accent-rgb), 0.12));
    }
    /* Business cards — landscape rectangle (matches asset ~2.5:1) */
    .sf-biz-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px;
      align-items: start;
      justify-items: center;
      margin-bottom: 60px;
    }
    .sf-biz-card {
      position: relative;
      width: 100%;
      max-width: 520px;
    }
    .sf-biz-card-glow {
      position: absolute;
      inset: -8px;
      border-radius: 20px;
      opacity: 0.45;
      filter: blur(18px);
      pointer-events: none;
      animation: cardGlow 4s ease-in-out infinite;
    }
    .sf-biz-card-glow--a {
      background: linear-gradient(135deg, var(--foam-teal), var(--ocean-bright), var(--foam-teal));
    }
    .sf-biz-card-glow--b {
      background: linear-gradient(135deg, var(--ocean-bright), var(--foam-teal), var(--ocean-bright));
      animation-delay: 2s;
    }
    .sf-biz-card-frame {
      position: relative;
      width: 100%;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,180,216,0.28);
      transition: transform 0.35s ease;
      background: #03111f;
      /* Match full card artwork (~1.66:1) — no crop */
      aspect-ratio: 1500 / 901;
    }
    .sf-biz-card-frame--front { transform: rotate(-1.2deg); }
    .sf-biz-card-frame--back  { transform: rotate(1.2deg); }
    .sf-biz-card-img {
      width: 100%;
      height: 100%;
      display: block;
      /* Full artwork visible — frame ratio matches source cards */
      object-fit: fill;
      object-position: center;
    }
    .sf-biz-card-label {
      text-align: center;
      margin-top: 14px;
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    @media (max-width: 900px) {
      .merged-contact-details [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }
      .merged-contact-details [style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
      }
      /* Mobile: drop promo copy — leave a single Pay Now button */
      .contact-pay-cta {
        display: block;
        grid-template-columns: unset;
        text-align: center;
        margin: 16px auto 0;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
      }
      .contact-pay-cta::before {
        display: none;
      }
      .contact-pay-cta:hover {
        transform: none;
        border-color: transparent;
        box-shadow: none;
      }
      .contact-pay-cta-copy {
        display: none !important;
      }
      .contact-pay-cta-button {
        width: 100%;
        min-width: 0;
        min-height: 62px;
        border-radius: 16px;
        padding: 0 24px;
        font-size: 15px;
        letter-spacing: 3px;
      }
      .contact-pay-cta-button::after {
        margin-left: 14px;
        font-size: 20px;
      }

      /* Mobile: stacked, centred, real rectangle business cards */
      .sf-biz-cards {
        grid-template-columns: 1fr !important;
        gap: 28px;
        margin-bottom: 44px;
        padding: 0 4px;
      }
      .sf-biz-card {
        max-width: min(100%, 360px);
        margin: 0 auto;
      }
      .sf-biz-card-frame {
        border-radius: 12px;
        aspect-ratio: 1500 / 901;
        box-shadow: 0 18px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,180,216,0.25);
      }
      /* Flatten tilt on small screens so cards read as clean rectangles */
      .sf-biz-card-frame--front,
      .sf-biz-card-frame--back {
        transform: none;
      }
      .sf-biz-card-glow {
        inset: -6px;
        border-radius: 16px;
        opacity: 0.35;
        filter: blur(14px);
      }
      .sf-biz-card-label {
        margin-top: 12px;
        letter-spacing: 2.5px;
        font-size: 10px;
      }
    }

    @media (max-width: 420px) {
      .sf-biz-card {
        max-width: min(100%, 340px);
      }
      .sf-biz-card-frame {
        border-radius: 10px;
      }
    }

/* ==== inline ==== */
@media (max-width: 768px) {
  .sticky-mobile-cta {
    position: fixed; top: 21px; bottom: auto; left: 104px; right: 70px; z-index: 1002;
    background: transparent; border: 0;
    padding: 0; display: flex; gap: 6px;
  }
  .sticky-mobile-cta a {
    flex: 1; min-width: 0; text-align: center; padding: 0 6px; min-height: 36px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: clamp(8px, 2vw, 10px); letter-spacing: 0.45px; line-height: 1; text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
  }
  .sticky-mobile-cta .s-quote { background: var(--foam-teal); color: var(--ocean-deep); }
  .sticky-mobile-cta .s-call  { background: transparent; border: 2px solid var(--foam-teal); color: var(--foam-teal); }
}
@media (min-width: 769px) { .sticky-mobile-cta { display: none !important; } }

/* ==== inline ==== */
.bubble-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.bubble-layer .b{
  position:absolute;bottom:-100px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(144,224,239,0.25), rgba(0,180,216,0.04));
  border:1px solid rgba(0,180,216,0.2);
  animation:floatBubble linear infinite;
  opacity:0;
}
@keyframes floatBubble{
  0%  {transform:translateY(0) translateX(0);opacity:0;}
  8%  {opacity:1;}
  90% {opacity:0.5;}
  100%{transform:translateY(-110vh) translateX(var(--bdrift));opacity:0;}
}

/* ==== seafoam-large-screen-layout ==== */
@media (min-width: 1440px) {
    nav {
      padding-left: clamp(44px, 4vw, 96px);
      padding-right: clamp(44px, 4vw, 96px);
    }

    .nav-logo {
      left: clamp(44px, 4vw, 96px);
    }

    .nav-links {
      max-width: min(1680px, calc(100vw - 340px));
      gap: clamp(14px, 1.1vw, 28px);
    }

    .section-inner,
    .footer-inner,
    .footer-bottom {
      max-width: min(86vw, 1680px);
    }

    .section-inner {
      padding-left: clamp(72px, 5vw, 120px);
      padding-right: clamp(72px, 5vw, 120px);
    }

    .hero-content {
      max-width: min(1200px, 74vw);
    }

    .section-body {
      max-width: min(760px, 48vw);
    }

    .feature-grid,
    .specs-grid {
      gap: clamp(24px, 2vw, 40px);
    }

    .split {
      gap: clamp(80px, 6vw, 140px);
    }
  }

  @media (min-width: 1800px) {
    .section-inner,
    .footer-inner,
    .footer-bottom,
    #patterns-catalogue,
    [style*="max-width:1200px"][style*="margin:0 auto"],
    [style*="max-width:1180px"][style*="margin:0 auto"],
    [style*="max-width:1000px"][style*="margin:0 auto"] {
      max-width: min(86vw, 1840px) !important;
    }

    .section-inner {
      padding-left: clamp(84px, 5vw, 140px);
      padding-right: clamp(84px, 5vw, 140px);
    }

    .process-step-grid {
      gap: clamp(18px, 1.35vw, 30px) !important;
    }

    .process-hero-row,
    .process-path-selector {
      gap: clamp(28px, 2vw, 56px) !important;
    }
  }

  @media (min-width: 2200px) {
    .section-inner,
    .footer-inner,
    .footer-bottom,
    #patterns-catalogue,
    [style*="max-width:1200px"][style*="margin:0 auto"],
    [style*="max-width:1180px"][style*="margin:0 auto"],
    [style*="max-width:1000px"][style*="margin:0 auto"] {
      max-width: min(84vw, 1960px) !important;
    }
  }

/* ==== seafoam-process-modal-upgrade ==== */
.proc-modal {
    padding: clamp(14px, 2vw, 34px);
  }

  .proc-modal-backdrop {
    background:
      radial-gradient(circle at 22% 18%, rgba(0,180,216,0.22), transparent 30%),
      radial-gradient(circle at 80% 78%, rgba(125,225,255,0.12), transparent 34%),
      rgba(0,5,15,0.9);
  }

  .proc-modal-shell {
    width: min(1120px, calc(100vw - 28px));
    border-radius: 22px;
    overflow: hidden auto;
    background:
      linear-gradient(rgba(125,225,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(125,225,255,0.03) 1px, transparent 1px),
      radial-gradient(circle at 22% 0%, rgba(0,180,216,0.25), transparent 36%),
      linear-gradient(145deg, rgba(2,11,28,0.99), rgba(4,20,42,0.98) 48%, rgba(1,8,22,0.99));
    background-size: 42px 42px, 42px 42px, auto, auto;
  }

  .proc-modal-hero {
    min-height: 240px;
    padding: clamp(34px, 4vw, 58px) clamp(26px, 4vw, 56px) 54px;
    display: grid;
    grid-template-columns: minmax(96px, 128px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(20px, 3vw, 38px);
    background:
      radial-gradient(circle at 12% 42%, rgba(125,225,255,0.18), transparent 24%),
      linear-gradient(120deg, rgba(0,180,216,0.16), rgba(255,255,255,0.03) 44%, transparent 74%);
    border-bottom: 0;
  }

  .proc-modal-hero::after {
    content: "";
    position: absolute;
    inset: auto 42px 24px 42px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(125,225,255,0.42), transparent);
  }

  .proc-modal-hero-num {
    width: clamp(92px, 11vw, 124px);
    height: clamp(92px, 11vw, 124px);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(58px, 7vw, 82px);
    line-height: 1;
    letter-spacing: 0;
    color: #021423;
    background:
      radial-gradient(circle at 32% 24%, rgba(255,255,255,0.85), transparent 28%),
      linear-gradient(145deg, #9ee8ff, #1a93bd 72%);
    border: 1px solid rgba(190,240,255,0.68);
    box-shadow:
      0 20px 42px rgba(0,0,0,0.34),
      0 0 44px rgba(0,180,216,0.34),
      inset 0 0 0 6px rgba(2,11,28,0.18);
    text-shadow: none;
  }

  .proc-modal.is-diy .proc-modal-hero-num {
    color: #021423;
    background:
      radial-gradient(circle at 32% 24%, rgba(255,255,255,0.9), transparent 28%),
      linear-gradient(145deg, #dff8ff, #64c5df 72%);
  }

  .proc-modal-hero-title-row {
    align-items: flex-end;
    gap: 16px;
  }

  .proc-modal-hero-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 30px;
    background: rgba(0,180,216,0.13);
    border: 1px solid rgba(125,225,255,0.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  }

  .proc-modal-hero-title {
    font-size: clamp(42px, 5vw, 66px);
    letter-spacing: 0.4px;
  }

  .proc-modal-hero-subtitle {
    max-width: 680px;
    font-size: 17px;
    line-height: 1.7;
    font-style: normal;
    color: rgba(222,243,250,0.82);
  }

  .proc-modal-stats {
    position: relative;
    z-index: 2;
    margin: -32px clamp(20px, 4vw, 56px) 0;
    padding: 0;
    gap: 12px;
    border-bottom: 0;
    background: transparent;
  }

  .pm-stat {
    min-height: 106px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    background:
      linear-gradient(180deg, rgba(125,225,255,0.14), rgba(0,180,216,0.045)),
      rgba(2,13,30,0.94);
    border-color: rgba(125,225,255,0.28);
    box-shadow: 0 16px 34px rgba(0,0,0,0.28);
  }

  .pm-stat-value {
    font-size: clamp(30px, 3.2vw, 42px);
    color: #fff;
    margin-bottom: 10px;
  }

  .pm-stat-label {
    font-family: Montserrat, sans-serif;
    font-size: 10px;
    letter-spacing: 2.1px;
    color: rgba(195,225,237,0.76);
  }

  .proc-modal-body {
    padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px) clamp(30px, 4vw, 52px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .pm-section {
    min-width: 0;
    padding: 22px;
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(125,225,255,0.08), rgba(125,225,255,0.025)),
      rgba(1,10,25,0.72);
    border: 1px solid rgba(125,225,255,0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  }

  .pm-section--paragraph,
  .pm-section--faq,
  .pm-section--callout {
    grid-column: 1 / -1;
  }

  .pm-section--paragraph {
    padding: 26px 28px;
    background:
      radial-gradient(circle at 6% 0%, rgba(0,180,216,0.2), transparent 34%),
      linear-gradient(135deg, rgba(0,180,216,0.13), rgba(125,225,255,0.035) 54%),
      rgba(2,13,30,0.86);
  }

  .pm-section-title {
    margin-bottom: 4px;
    font-size: 14px;
    color: #18c8e8;
  }

  .pm-section-title::after {
    background: linear-gradient(90deg, rgba(0,180,216,0.55), rgba(125,225,255,0.08), transparent);
  }

  .pm-paragraph {
    max-width: 920px;
    font-size: 16px;
    line-height: 1.78;
    color: rgba(225,242,248,0.9);
  }

  .pm-list {
    gap: 9px;
  }

  .pm-list li {
    padding: 12px 14px 12px 42px;
    background: rgba(0,12,29,0.52);
    border-color: rgba(125,225,255,0.14);
  }

  .pm-faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pm-faq-item {
    background: rgba(0,12,29,0.58);
    border-color: rgba(125,225,255,0.15);
  }

  .pm-callout {
    min-height: 92px;
    align-items: center;
    font-size: 15px;
    background:
      radial-gradient(circle at 0% 50%, rgba(125,225,255,0.2), transparent 28%),
      linear-gradient(135deg, rgba(0,180,216,0.24), rgba(125,225,255,0.08));
  }

  .pm-callout::before {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(190,240,255,0.24);
  }

  .proc-modal-footer {
    padding: 20px clamp(20px, 4vw, 56px) 30px;
    background: linear-gradient(180deg, rgba(0,180,216,0.02), rgba(0,180,216,0.08));
  }

  .pm-nav-btn {
    min-height: 52px;
    padding: 13px 22px;
    border-radius: 999px;
  }

  .pm-nav-next {
    min-width: min(340px, 100%);
  }

  @media (max-width: 760px) {
    .proc-modal-shell {
      width: min(100%, 430px);
      max-height: calc(100vh - 24px);
      border-radius: 18px;
    }

    .proc-modal-close {
      top: 12px;
      right: 12px;
    }

    .proc-modal-hero {
      min-height: 0;
      grid-template-columns: 1fr;
      padding: 30px 20px 42px;
      gap: 18px;
    }

    .proc-modal-hero::after {
      left: 20px;
      right: 20px;
      bottom: 20px;
    }

    .proc-modal-hero-num {
      width: 82px;
      height: 82px;
      border-radius: 22px;
      font-size: 54px;
    }

    .proc-modal-hero-title-row {
      align-items: center;
      gap: 12px;
    }

    .proc-modal-hero-icon {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      font-size: 25px;
    }

    .proc-modal-hero-title {
      font-size: 36px;
    }

    .proc-modal-hero-subtitle {
      font-size: 14.5px;
    }

    .proc-modal-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin: -24px 16px 0;
    }

    .pm-stat {
      min-height: 86px;
      padding: 14px 12px;
    }

    .pm-stat-value {
      font-size: 30px;
    }

    .proc-modal-body {
      grid-template-columns: 1fr;
      padding: 24px 16px 26px;
      gap: 14px;
    }

    .pm-section {
      grid-column: auto;
      padding: 18px;
      border-radius: 16px;
    }

    .pm-section--paragraph,
    .pm-section--faq,
    .pm-section--callout {
      grid-column: auto;
    }

    .pm-paragraph {
      font-size: 14px;
    }

    .pm-faq {
      grid-template-columns: 1fr;
    }

    .proc-modal-footer {
      padding: 18px 16px 22px;
    }
  }

/* ==== seafoam-footer-layout-fix ==== */
@media (min-width: 821px) {
    footer {
      padding-left: clamp(20px, 4vw, 60px);
      padding-right: clamp(20px, 4vw, 60px);
    }

    footer .footer-inner,
    footer .footer-bottom {
      max-width: min(1280px, calc(100vw - clamp(40px, 8vw, 120px))) !important;
    }

    /* Logo height matches left/right content columns — not taller than those boxes */
    footer .footer-inner {
      min-height: 0;
      align-items: center;
    }

    footer .nav-logo {
      width: auto;
      height: auto;
      max-width: min(200px, 16vw);
      max-height: 168px;
      pointer-events: none;
    }

    footer .nav-logo img {
      width: auto !important;
      height: auto !important;
      max-width: min(200px, 16vw);
      max-height: 168px;
      object-fit: contain;
    }

    footer .footer-brand > .nav-logo ~ *,
    footer .footer-brand p,
    footer .footer-brand > div[style*="flex-direction:column"],
    footer .footer-col,
    footer .footer-bottom {
      position: relative;
      z-index: 2;
    }

    footer .footer-brand > div[style*="flex-direction:column"] {
      width: 100%;
      max-width: 232px;
      align-items: flex-start;
    }

    footer .footer-brand a[href^="mailto"],
    footer .footer-brand div[style*="Sunshine Coast"] {
      width: 100%;
      max-width: 100%;
      text-align: left;
      line-height: 1.45;
    }
  }

  @media (min-width: 821px) and (max-width: 1180px) {
    footer {
      padding-left: 24px;
      padding-right: 24px;
    }

    footer .footer-inner,
    footer .footer-bottom {
      max-width: calc(100vw - 48px) !important;
    }

    footer .nav-logo {
      width: auto;
      height: auto;
      max-width: min(170px, 15vw);
      max-height: 150px;
    }

    footer .nav-logo img {
      max-width: min(170px, 15vw);
      max-height: 150px;
    }

    footer .footer-inner > div[style*="display:flex"][style*="gap:40px"] {
      gap: clamp(22px, 2.8vw, 32px) !important;
      margin-left: auto;
    }

    footer .footer-col a {
      font-size: 12px;
      line-height: 1.45;
    }

    footer .footer-col h4 {
      letter-spacing: 2.5px;
    }
  }

  @media (min-width: 821px) and (max-width: 980px) {
    footer .footer-inner {
      min-height: 0;
      flex-direction: column;
      align-items: center;
      gap: 30px;
      text-align: center;
    }

    footer .nav-logo {
      position: static;
      inset: auto;
      transform: none;
      width: 180px;
      height: auto;
      margin: 0 auto 14px;
    }

    footer .footer-brand {
      max-width: 340px;
    }

    footer .footer-brand > div[style*="flex-direction:column"] {
      max-width: 100%;
      align-items: center;
    }

    footer .footer-brand a[href^="mailto"],
    footer .footer-brand div[style*="Sunshine Coast"] {
      justify-content: center;
      text-align: center;
    }

    footer .footer-inner > div[style*="display:flex"][style*="gap:40px"] {
      width: 100%;
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px !important;
    }
  }

  @media (min-width: 1440px) {
    footer .footer-inner,
    footer .footer-bottom {
      max-width: min(86vw, 1840px) !important;
    }

    /* Keep logo capped to side-column height (no giant logo on wide screens) */
    footer .nav-logo {
      width: auto;
      height: auto;
      max-width: 200px;
      max-height: 168px;
    }

    footer .nav-logo img {
      max-width: 200px;
      max-height: 168px;
    }
  }

/* ==== seafoam-mobile-overflow-fix ==== */
html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  @supports (overflow: clip) {
    html,
    body {
      overflow-x: clip;
    }
  }

  @media (max-width: 820px) {
    /* Process section: hide blue ocean-wave secondary background on mobile only */
    #process .process-ocean-bg,
    #process .process-ocean-wave,
    #process .process-ocean-wave-two,
    #process .process-ocean-wave-three,
    #process .process-ocean-wave-four,
    #process .process-ocean-wave-five,
    #process .process-ocean-wave-six,
    #process .process-ocean-wave-seven,
    #process .process-ocean-wave-eight,
    #process #process-grid-canvas,
    #process .process-bottom-glow,
    #process::after {
      display: none !important;
      animation: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }

    nav,
    section,
    footer {
      max-width: 100vw;
      overflow-x: clip;
    }

    html {
      scroll-padding-top: 96px;
    }

    body {
      padding-bottom: 0;
      -webkit-text-size-adjust: 100%;
    }

    nav {
      min-height: 78px !important;
      padding: 10px 18px !important;
    }

    nav .nav-logo {
      left: 16px !important;
    }

    nav .nav-logo img {
      height: 54px !important;
      max-width: 126px;
      object-fit: contain;
    }

    .hamburger {
      right: 18px !important;
    }

    .hamburger span {
      width: 24px;
      height: 2px;
    }

    .hero,
    .section-inner,
    .footer-inner,
    .footer-bottom {
      width: 100%;
      max-width: 100%;
    }

    .hero {
      min-height: 100svh;
      padding: 106px 20px 118px !important;
      justify-content: center;
    }

    /* Keep hero fog/shimmer + stars visible on mobile (below fish layer) */
    .hero #aurora-canvas {
      opacity: 0.72 !important;
      visibility: visible !important;
      display: block !important;
      z-index: 1 !important;
    }
    .hero .hero-bg {
      opacity: 1 !important;
      visibility: visible !important;
    }
    .hero .hero-bg::after {
      animation: shimmer 8s linear infinite !important;
      opacity: 1 !important;
    }
    .hero .ocean-glow {
      opacity: 1 !important;
      visibility: visible !important;
    }

    .hero-content {
      width: 100%;
      max-width: 360px !important;
      margin: 0 auto;
    }

    .hero-eyebrow {
      font-size: 10px !important;
      letter-spacing: 4px !important;
      line-height: 1.6 !important;
      margin-bottom: 18px !important;
    }

    .hero-title {
      font-size: clamp(48px, 15vw, 68px) !important;
      line-height: 0.95 !important;
      letter-spacing: 2px !important;
    }

    .hero-sub {
      font-size: 17px !important;
      line-height: 1.45 !important;
      margin-bottom: 28px !important;
    }

    .scroll-indicator {
      display: none !important;
    }

    .hero-actions,
    .sticky-mobile-cta {
      gap: 10px !important;
    }

    /* Hide hero Get Quote / View Work buttons on mobile (nav + sticky CTAs remain) */
    .hero .hero-actions {
      display: none !important;
    }

    /* Keep hero 3D fish layer visible on mobile */
    .hero #hero-fish,
    .hero #sf-off-hero-fish {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 2 !important;
      pointer-events: none !important;
    }
    .hero #hero-fish-canvas,
    .hero #hero-fish canvas {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: none !important;
    }

    .hero-actions .btn-primary,
    .hero-actions .btn-outline {
      width: 100%;
      justify-content: center;
      padding-left: 18px;
      padding-right: 18px;
    }

    .section-inner {
      padding: 58px 20px !important;
    }

    .section-tag {
      letter-spacing: 3px;
      line-height: 1.5;
    }

    .section-title {
      font-size: clamp(36px, 12vw, 54px) !important;
      line-height: 1.02 !important;
      letter-spacing: 1.5px !important;
    }

    .section-body,
    section p {
      max-width: 100% !important;
    }

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

    .stats-bar {
      gap: 0 !important;
      padding: 18px 14px !important;
    }

    .stat-item {
      min-width: 0;
      padding: 14px 8px !important;
    }

    .stat-number {
      font-size: 34px !important;
      letter-spacing: 1px !important;
    }

    .stat-label {
      font-size: 9px !important;
      letter-spacing: 1.4px !important;
      line-height: 1.4 !important;
    }

    .footer-inner,
    .footer-bottom {
      flex-wrap: wrap;
    }

    /* Mobile: compact footer — keep copyright only (hide logo/blurb/link columns) */
    footer {
      padding: 18px 20px 30px !important;
    }

    footer .footer-inner {
      display: none !important;
    }

    footer .footer-bottom {
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px !important;
      text-align: center !important;
      margin-top: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      border-top: none !important;
      font-size: 11px !important;
      line-height: 1.45 !important;
    }

    #gallery #carousel-viewport {
      height: min(118vw, 520px) !important;
      border-radius: 14px !important;
    }

    /* Gallery animated background: medium-stronger on mobile (desktop base is 0.42) */
    #gallery #gallery-bg-canvas {
      opacity: 0.70 !important;
    }

    /* Machines starfield: a touch brighter on mobile (desktop base is 0.72) */
    #machines #machines-bio-canvas {
      opacity: 0.90 !important;
    }

    /* Patterns & Laser Engraving fluid background: a touch brighter on mobile (desktop base is 0.45) */
    #mockups #mockup-fluid-canvas {
      opacity: 0.60 !important;
    }

    /* Hide gallery intro blurb on mobile only */
    #gallery .gallery-intro-copy {
      display: none !important;
    }

    #gallery .section-inner > div[style*="display:flex"] {
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 14px !important;
    }

    /* EVA Foam section: full-height background, no black band at bottom (mobile only) */
    #eva-foam.eva-standard-section {
      background: radial-gradient(ellipse at 50% 40%, #0e2a5e 0%, #081634 72%, #061428 100%) !important;
    }
    #eva-foam #bg-b31 {
      position: absolute !important;
      inset: 0 !important;
      top: 0 !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 100% !important;
      background: radial-gradient(ellipse at 50% 0%, #15516f 0%, #0a3852 32%, #082d46 58%, #061f36 100%) !important;
    }
    #eva-foam #bg-b31 .vignette {
      background: radial-gradient(
        ellipse at 50% 42%,
        rgba(1, 8, 18, 0.18) 0%,
        rgba(1, 8, 18, 0.28) 55%,
        rgba(4, 16, 32, 0.42) 100%
      ) !important;
    }
    #eva-foam #bg-b31 .vignette::after {
      background: rgba(4, 16, 32, 0.12) !important;
    }
    #eva-foam .eva-standard-overlay {
      background:
        radial-gradient(ellipse 68% 44% at 38% 14%, rgba(0, 180, 216, 0.08), transparent 68%),
        linear-gradient(180deg, rgba(3, 13, 26, 0.22) 0%, rgba(3, 13, 26, 0.12) 50%, rgba(6, 22, 42, 0.28) 100%),
        rgba(3, 13, 26, 0.06) !important;
    }
    #eva-foam .eva-topo-canvas,
    #eva-foam #bg-topo {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 100% !important;
      opacity: 0.42 !important;
    }
    #eva-foam #bg-b31 .motes {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
    }

    #process .process-path-selector,
    #process .process-step-grid {
      grid-template-columns: 1fr !important;
      gap: 18px !important;
    }

    #process .proc-card-pro {
      width: 100% !important;
      min-width: 0 !important;
      min-height: 0 !important;
      padding: 22px !important;
    }

    #process .proc-card-pro-title,
    #process .proc-card-pro-desc {
      max-width: none !important;
      overflow-wrap: normal;
      word-break: normal;
    }

    #process .proc-card-pro-title {
      font-size: clamp(30px, 8vw, 42px) !important;
      line-height: 1.08 !important;
    }

    #process .proc-card-pro-desc {
      font-size: 17px !important;
      line-height: 1.55 !important;
    }

    #process .proc-card-pro-mini-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #process .proc-connector-line {
      display: none !important;
    }

    #process .process-hero-row,
    #process .process-path-selector,
    #process .process-included-strip {
      grid-template-columns: 1fr !important;
    }

    #process .process-trust-pills,
    #process .process-path-card {
      width: 100% !important;
      min-width: 0 !important;
    }

    #process .process-included-strip {
      padding: 12px !important;
    }

    #process .process-included-strip span[style*="display:flex"] {
      justify-content: flex-start;
      min-width: 0;
    }

    #materials [style*="grid-template-columns:repeat(2"],
    #materials [style*="grid-template-columns:1fr 1fr"],
    #materials [style*="grid-template-columns:repeat(3"],
    #materials [style*="grid-template-columns:repeat(5"],
    #materials [style*="grid-template-columns:repeat(6"],
    #machines [style*="grid-template-columns:repeat("],
    #machines [style*="grid-template-columns:1fr 1fr"],
    #get-in-touch [style*="grid-template-columns:repeat("],
    #get-in-touch [style*="grid-template-columns:1fr 1fr"] {
      grid-template-columns: 1fr !important;
    }

    /* Materials product photos: keep 3 side-by-side, shorter cards (mobile only) */
    #materials .materials-product-photos {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 8px !important;
      margin-top: 4px !important;
    }
    #materials .materials-product-photos > div {
      height: 110px !important;
      padding: 8px !important;
      border-radius: 12px !important;
      min-width: 0;
    }
    #materials .materials-product-photos img {
      filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3)) !important;
    }

    /* Machines promise strip: keep 3-up compact side-by-side on mobile */
    #machines .machines-promise-strip {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 1px !important;
      border-radius: 12px !important;
    }
    #machines .machines-promise-strip > div {
      padding: 12px 6px !important;
      min-width: 0;
      border-left: none !important;
      border-right: none !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
    }
    #machines .machines-promise-icon {
      font-size: 18px !important;
      margin-bottom: 4px !important;
      line-height: 1;
    }
    #machines .machines-promise-title {
      font-size: 11px !important;
      letter-spacing: 0.5px !important;
      line-height: 1.15 !important;
      margin-bottom: 4px !important;
    }
    #machines .machines-promise-desc {
      font-size: 9px !important;
      line-height: 1.3 !important;
    }

    #materials [style*="padding:40px"],
    #materials [style*="padding:44px"],
    #machines [style*="padding:40px"],
    #get-in-touch [style*="padding:40px"] {
      padding: 24px !important;
    }

    #materials [style*="font-size:68px"] {
      font-size: 50px !important;
    }

    #materials [style*="font-size:48px"] {
      font-size: 38px !important;
      line-height: 1.05 !important;
    }

    #materials [style*="height:190px"] {
      height: 160px !important;
    }

    #colours .reveal[style*="margin-bottom:44px"] > div[style*="grid-template-columns:1fr 1fr"] {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 12px !important;
    }

    #colours .reveal[style*="margin-bottom:44px"] > div[style*="grid-template-columns:1fr 1fr"] > div {
      width: auto !important;
      min-width: 0 !important;
      box-sizing: border-box;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 12px !important;
      padding: 16px 12px !important;
      text-align: center;
    }

    #colours .reveal[style*="margin-bottom:44px"] > div[style*="grid-template-columns:1fr 1fr"] > div > div:first-child {
      width: min(84px, 82%) !important;
      height: auto !important;
      aspect-ratio: 1;
    }

    #colours .reveal[style*="margin-bottom:44px"] > div[style*="grid-template-columns:1fr 1fr"] > div > div:nth-child(2) {
      width: 100%;
      min-width: 0;
    }

    #colours .reveal[style*="margin-bottom:44px"] > div[style*="grid-template-columns:1fr 1fr"] > div > div:nth-child(2) > div:first-child {
      font-size: 8px !important;
      letter-spacing: 1.2px !important;
      line-height: 1.25 !important;
      margin-bottom: 5px !important;
    }

    #colours .reveal[style*="margin-bottom:44px"] > div[style*="grid-template-columns:1fr 1fr"] > div > div:nth-child(2) > div:nth-child(2) {
      font-size: 20px !important;
      line-height: 1.05 !important;
      letter-spacing: 0.7px !important;
      margin-bottom: 7px !important;
    }

    #colours .reveal[style*="margin-bottom:44px"] > div[style*="grid-template-columns:1fr 1fr"] > div > div:nth-child(2) > div:nth-child(3) {
      font-size: 12px !important;
      line-height: 1.45 !important;
    }

    #colours .reveal[style*="margin-bottom:44px"] > div[style*="grid-template-columns:1fr 1fr"] > div > div:nth-child(2) > div:nth-child(4) {
      justify-content: center;
      margin-top: 9px !important;
      font-size: 9px !important;
      letter-spacing: 0.8px !important;
    }

    #colours #colour-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 10px !important;
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
      will-change: auto !important;
      content-visibility: visible;
    }

    /*
      Mobile colour range: stay fully collapsed until the user taps a category
      (All / Teak / Grey / Camouflage). Gate on .colours-mobile-open so nothing
      auto-opens on first paint even if other classes are missing.
    */
    #colours:not(.colours-mobile-open) #colour-grid,
    #colours:not(.colours-mobile-open) .colour-legend-bar,
    #colours.colours-mobile-collapsed #colour-grid,
    #colours.colours-mobile-collapsed .colour-legend-bar {
      display: none !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
      visibility: hidden !important;
    }
    #colours .colour-mobile-hint {
      display: none;
      margin: -8px 0 28px;
      padding: 14px 16px;
      text-align: center;
      font-size: 12px;
      line-height: 1.5;
      letter-spacing: 0.4px;
      color: var(--text-muted);
      border: 1px dashed rgba(0, 180, 216, 0.35);
      border-radius: 14px;
      background: rgba(0, 180, 216, 0.06);
    }
    #colours:not(.colours-mobile-open) .colour-mobile-hint,
    #colours.colours-mobile-collapsed .colour-mobile-hint {
      display: block !important;
    }
    /* No category looks selected until the user taps one */
    #colours:not(.colours-mobile-open) .colour-filter-row button,
    #colours:not(.colours-mobile-open) button[onclick^="filterSwatches"],
    #colours.colours-mobile-collapsed .colour-filter-row button,
    #colours.colours-mobile-collapsed button[onclick^="filterSwatches"] {
      border-color: var(--border) !important;
      background: rgba(14, 34, 60, 0.55) !important;
      color: var(--text-muted) !important;
    }

    /* Colour starfield + fog/haze: force visible on mobile */
    #colours {
      background: #030a14 !important;
    }
    #colours #colour-bg-canvas {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 1 !important;
      pointer-events: none !important;
    }
    /* Nebula haze — keep colour, don't crush stars */
    #colours > div[style*="radial-gradient(ellipse at 30%"] {
      display: block !important;
      visibility: visible !important;
      opacity: 0.55 !important;
      z-index: 2 !important;
    }
    /* Vignette — lighter on mobile so stars + haze stay readable */
    #colours > div[style*="radial-gradient(ellipse at center"] {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 2 !important;
      background: radial-gradient(ellipse at center, transparent 0%, transparent 45%, rgba(3, 10, 20, 0.42) 100%) !important;
    }
    #colours > div[style*="radial-gradient(ellipse at 100% 0%"] {
      display: block !important;
      visibility: visible !important;
      opacity: 0.4 !important;
      z-index: 2 !important;
    }
    #colours .section-inner {
      position: relative;
      z-index: 3;
    }

    #colours #colour-grid > div {
      content-visibility: auto;
      contain-intrinsic-size: 420px;
    }

    #colours [onclick^="filterSwatches"] {
      width: 100%;
      justify-content: center;
      text-align: center;
      white-space: normal !important;
      line-height: 1.35 !important;
    }

    /* Workshop: hide map buttons; address itself opens maps (mobile only) */
    #workshop .ws-map-actions {
      display: none !important;
    }
    #workshop .ws-address-link {
      cursor: pointer;
      -webkit-tap-highlight-color: rgba(0, 180, 216, 0.2);
    }
    #workshop .ws-address-link:active {
      opacity: 0.85;
    }
    #workshop .ws-address-card {
      padding-bottom: 28px !important;
    }

    #colours .reveal[style*="gap:14px"],
    #colours .reveal[style*="gap:24px"] {
      flex-direction: column !important;
      align-items: stretch !important;
    }

    #colours a[href="#get-in-touch"] {
      width: 100%;
      justify-content: center;
      text-align: center;
      white-space: normal !important;
    }

    #mockups #patterns-catalogue {
      padding: 0 12px !important;
      max-width: 100% !important;
    }

    #mockups #pcat-stage {
      height: 300px !important;
      margin-bottom: 24px !important;
    }

    #mockups #mockup-stage {
      height: 360px !important;
      margin-bottom: 40px !important;
    }

    #mockups .mockup-card {
      width: min(210px, 68vw) !important;
    }

    #mockups #mockup-info {
      min-width: 0 !important;
      width: calc(100vw - 40px) !important;
    }

    #mockups button[onclick^="pcatNav"],
    #mockups button[onclick^="mockupNav"] {
      width: 42px !important;
      height: 42px !important;
      font-size: 22px !important;
    }

    #faq [style*="grid-template-columns:repeat(auto-fit,minmax(360px,1fr))"] {
      grid-template-columns: 1fr !important;
    }

    #faq [style*="grid-template-columns:repeat(auto-fit,minmax(360px,1fr))"] > div[style*="border-left"] {
      border-left: 0 !important;
    }

    #faq [style*="grid-template-columns:repeat(auto-fit,minmax(360px,1fr))"] a {
      display: grid !important;
      grid-template-columns: 34px minmax(0, 1fr) auto !important;
      align-items: start !important;
      gap: 5px 12px !important;
      padding: 15px 18px !important;
      border-bottom: 1px solid var(--border) !important;
    }

    #faq [style*="grid-template-columns:repeat(auto-fit,minmax(360px,1fr))"] a > span:first-child {
      grid-column: 1;
      grid-row: 1 / span 2;
      width: 34px;
      text-align: center;
      font-size: 19px !important;
      line-height: 1.2 !important;
    }

    #faq [style*="grid-template-columns:repeat(auto-fit,minmax(360px,1fr))"] a > span:nth-child(2) {
      grid-column: 2 / 4;
      width: auto !important;
      min-width: 0;
      font-size: 8px !important;
      letter-spacing: 1.8px !important;
      line-height: 1.25 !important;
    }

    #faq [style*="grid-template-columns:repeat(auto-fit,minmax(360px,1fr))"] a > span:nth-child(3) {
      grid-column: 2;
      min-width: 0;
      font-size: 15px !important;
      line-height: 1.3 !important;
      overflow-wrap: normal;
      word-break: normal;
    }

    #faq [style*="grid-template-columns:repeat(auto-fit,minmax(360px,1fr))"] a > span:nth-child(4) {
      grid-column: 3;
      grid-row: 2;
      justify-self: end;
      align-self: start;
      font-size: 9px !important;
      letter-spacing: 1.6px !important;
      line-height: 1.2 !important;
      margin-top: 3px;
      white-space: nowrap;
    }

    /* Engraving plasma: visible immediately + moderately brighter on mobile */
    #engraving {
      background: #081830 !important;
    }
    #engraving #engraving-plasma-canvas {
      opacity: 1 !important;
      visibility: visible !important;
      filter: brightness(1.45) saturate(1.15) contrast(1.04);
      background: #0a1e3a !important;
    }

    #engraving > div[style*="padding:80px"] {
      padding: 58px 20px 0 !important;
    }

    #engraving #epanel-lettering > div {
      padding: 0 20px 52px !important;
    }

    #engraving #epanel-lettering > div > div[style*="padding:0 28px"] {
      padding: 0 22px !important;
    }

    #engraving [id*="font-carousel"][id$="viewport"] {
      border-radius: 8px !important;
    }

    #engraving [id*="font-carousel"][id$="track"] {
      gap: 10px !important;
    }

    #engraving [id*="font-carousel"][id$="track"] .font-card {
      flex: 0 0 calc((100% - 10px) / 2) !important;
      width: calc((100% - 10px) / 2) !important;
    }

    #engraving [style*="grid-template-columns:repeat("],
    #engraving [style*="grid-template-columns:1fr 1fr"] {
      grid-template-columns: 1fr !important;
    }

    #pricing.quote-brief-section {
      padding-bottom: 30px !important;
    }

    #get-in-touch .section-inner {
      padding-top: 24px !important;
    }

    #get-in-touch .merged-contact-details {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }

    /* Brighter Get In Touch liquid background on mobile only */
    #get-in-touch {
      background: #061a30 !important;
    }
    #get-in-touch #git-liquid-canvas {
      opacity: 0.38 !important;
      filter: brightness(1.35) saturate(1.15);
    }
    #get-in-touch > div[aria-hidden="true"][style*="linear-gradient"] {
      height: 80px !important;
      opacity: 0.65;
    }

    #pricing .quote-path article,
    #pricing .quote-form-grid > *,
    #pricing input,
    #pricing select,
    #pricing textarea,
    #contact-form input,
    #contact-form textarea {
      min-width: 0 !important;
    }

    /* Keep First / Last name side-by-side on mobile (matches desktop row) */
    #contact-form > div[style*="grid-template-columns"] {
      grid-template-columns: 1fr 1fr !important;
      gap: 10px !important;
    }

    .sticky-mobile-cta {
      gap: 6px !important;
      padding: 0 !important;
    }

    .sticky-mobile-cta a {
      min-width: 0;
      font-size: clamp(8px, 2vw, 10px) !important;
      letter-spacing: 0.45px !important;
      line-height: 1 !important;
      padding: 0 6px !important;
    }

    /* ── CNC modal (mobile only): tight stats + no wasted gap above photo ── */
    #cnc-modal-overlay {
      top: 72px !important;
      padding: 8px 10px 12px !important;
    }
    #cnc-modal {
      max-height: calc(100dvh - 88px) !important;
      border-radius: 16px !important;
    }
    #cnc-modal .cnc-modal-header {
      padding: 18px 16px 0 !important;
    }
    #cnc-modal .cnc-modal-header-row {
      flex-direction: column !important;
      gap: 12px !important;
      flex-wrap: nowrap !important;
    }
    #cnc-modal .cnc-modal-intro {
      min-width: 0 !important;
      flex: none !important;
      width: 100% !important;
    }
    #cnc-modal .cnc-modal-intro h2 {
      font-size: 34px !important;
    }
    #cnc-modal .cnc-modal-intro p {
      font-size: 11px !important;
      letter-spacing: 0.6px !important;
      line-height: 1.45 !important;
      margin-bottom: 10px !important;
    }
    #cnc-modal .cnc-modal-pills {
      gap: 6px !important;
    }
    #cnc-modal .cnc-modal-pills span {
      font-size: 10px !important;
      padding: 3px 9px !important;
    }
    /* Side-by-side compact badges — no full-width empty cards */
    #cnc-modal .cnc-modal-stat-stack {
      flex-direction: row !important;
      gap: 8px !important;
      min-width: 0 !important;
      width: 100% !important;
    }
    #cnc-modal .cnc-modal-stat {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      padding: 8px 8px !important;
      border-radius: 10px !important;
    }
    #cnc-modal .cnc-modal-stat-title {
      font-size: 18px !important;
      line-height: 1.05 !important;
    }
    #cnc-modal .cnc-modal-stat-title--sm {
      font-size: 12px !important;
      letter-spacing: 0.4px !important;
    }
    #cnc-modal .cnc-modal-stat-sub {
      font-size: 9px !important;
      margin-top: 2px !important;
      line-height: 1.25 !important;
    }
    /* Kill the large empty zone above the machine photo */
    #cnc-modal .cnc-modal-photo {
      padding: 10px 14px 0 !important;
    }
    #cnc-modal .cnc-modal-photo img {
      display: block !important;
      width: 100% !important;
      height: auto !important;
      max-height: 42dvh !important;
      object-fit: contain !important;
      border-radius: 10px !important;
      background: transparent !important;
    }
    #cnc-modal .sfu-52 {
      padding: 14px 14px 0 !important;
    }

    /* Mobile only: hide CNC "Upgraded Features Included" checklist */
    #cnc-modal .cnc-modal-upgraded-features {
      display: none !important;
    }

    /*
      Machine modals live inside #machines, so the global mobile rule
      grid-template-columns: 1fr collapses every tile full-width.
      Force 2-up cards on mobile only for CNC / laser / scanner popups.
    */
    #cnc-modal-overlay,
    #laser-modal-overlay,
    #scanner-modal-overlay {
      top: 72px !important;
      padding: 8px 10px 12px !important;
    }
    #cnc-modal,
    #laser-modal,
    #scanner-modal {
      max-height: calc(100dvh - 88px) !important;
      border-radius: 16px !important;
    }
    #cnc-modal .sfu-52,
    #cnc-modal .sfu-76,
    #laser-modal .sfu-52,
    #laser-modal .sfu-76,
    #scanner-modal .sfu-52,
    #scanner-modal .sfu-76 {
      padding-left: 14px !important;
      padding-right: 14px !important;
      padding-top: 14px !important;
    }
    /* Core/Premium highlight pairs + label/value rows + performance tiles */
    #cnc-modal [style*="grid-template-columns:repeat(2"],
    #cnc-modal [style*="grid-template-columns:1fr 1fr"],
    #cnc-modal [style*="auto-fill,minmax(165"],
    #cnc-modal [style*="auto-fill,minmax(180"],
    #laser-modal [style*="grid-template-columns:repeat(2"],
    #laser-modal [style*="grid-template-columns:1fr 1fr"],
    #laser-modal [style*="auto-fill,minmax(165"],
    #laser-modal [style*="auto-fill,minmax(180"],
    #scanner-modal [style*="grid-template-columns:repeat(2"],
    #scanner-modal [style*="grid-template-columns:1fr 1fr"],
    #scanner-modal [style*="auto-fill,minmax(165"],
    #scanner-modal [style*="auto-fill,minmax(180"],
    #scanner-modal [style*="grid-template-columns:repeat(3"] {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important;
    }
    /* Feature description cards stay full-width (too much text for 2-up) */
    #cnc-modal [style*="minmax(280"],
    #laser-modal [style*="minmax(280"],
    #scanner-modal [style*="minmax(280"] {
      grid-template-columns: 1fr !important;
      gap: 8px !important;
    }
    /* Compact tile padding so 2-up doesn't feel cramped */
    #cnc-modal .sfu-23,
    #cnc-modal .sfu-41,
    #laser-modal .sfu-41,
    #scanner-modal .sfu-43 {
      padding: 10px 10px !important;
      min-width: 0 !important;
    }
    #cnc-modal .sfu-16,
    #laser-modal .sfu-16,
    #scanner-modal .sfu-44 {
      font-size: 16px !important;
      line-height: 1.1 !important;
      word-break: break-word;
    }
    #cnc-modal .sfu-24,
    #cnc-modal .sfu-19,
    #laser-modal .sfu-19,
    #scanner-modal .sfu-19 {
      font-size: 9px !important;
      letter-spacing: 1px !important;
    }
    #cnc-modal .sfu-25,
    #laser-modal .sfu-20,
    #scanner-modal .sfu-20 {
      font-size: 10px !important;
      line-height: 1.3 !important;
    }
    /* Highlight boxes (Core Platform / Premium Upgrades) tighter on mobile */
    #cnc-modal .sfu-52 > div[style*="grid-template-columns"] > div[style*="padding:18px"] {
      padding: 12px 12px !important;
    }
    #cnc-modal .sfu-45,
    #cnc-modal .sfu-66 {
      font-size: 11px !important;
      line-height: 1.35 !important;
      min-width: 0 !important;
    }
    #laser-modal > div[style*="padding:36px"],
    #scanner-modal > div[style*="padding:36px"],
    #laser-modal > div[style*="padding:28px"],
    #scanner-modal > div[style*="padding:28px"] {
      padding-left: 14px !important;
      padding-right: 14px !important;
    }
    #laser-modal > div[style*="padding:0 20px"],
    #scanner-modal [style*="padding:24px 40px"],
    #laser-modal [style*="padding:24px 40px"] {
      padding-left: 12px !important;
      padding-right: 12px !important;
    }

    /* Laser modal mobile: Premium moves into tech specs; full machine photo */
    #laser-modal .laser-modal-premium-badge {
      display: none !important;
    }
    #laser-modal .laser-modal-premium-spec {
      display: block !important;
    }
    #laser-modal .laser-modal-spec-drive {
      display: none !important;
    }
    #laser-modal .laser-modal-photo {
      padding: 12px 12px 0 !important;
    }
    #laser-modal .laser-modal-photo img {
      width: 100% !important;
      height: auto !important;
      max-height: 46dvh !important;
      aspect-ratio: auto !important;
      object-fit: contain !important;
      object-position: center !important;
      background: rgba(0, 8, 20, 0.55) !important;
      border-radius: 12px !important;
      display: block !important;
    }
  }

/* Desktop: keep Premium in header only (hide the mobile tech-spec duplicate) */
.laser-modal-premium-spec {
  display: none !important;
}

  @media (min-width: 821px) and (max-width: 1100px) {
    #process .process-step-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

/* ==== seafoam-mobile-materials-compact ==== */
@media (max-width: 820px) {
    #materials .section-inner {
      padding-top: 44px !important;
      padding-bottom: 54px !important;
    }

    #materials .section-inner > .reveal:first-of-type {
      margin-bottom: 26px !important;
    }

    #materials .section-inner > .reveal:first-of-type p {
      font-size: 15px !important;
      line-height: 1.65 !important;
      max-width: 330px !important;
    }

    /* Mobile only: hide materials stat strip (8mm / ZERO / 72h) — desktop unchanged */
    #materials .materials-stat-strip {
      display: none !important;
    }

    /* Mobile only: hide Installation Process block — desktop unchanged */
    #materials .materials-install-process {
      display: none !important;
    }

    /* Mobile only: hide Adhesive System intro (Bonds Once. Holds Forever.) — desktop unchanged */
    #materials .materials-adhesive-intro {
      display: none !important;
    }

    /* Mobile only: hide header intro + EVA "Built For The Ocean" blurb — desktop unchanged */
    #materials .materials-header-intro {
      display: none !important;
    }
    #materials .materials-eva-intro {
      display: none !important;
    }

    /* Mobile only: hide 9775WL+ checklist (72h / fills voids / trusted) — desktop unchanged */
    #materials .materials-9775-checks {
      display: none !important;
    }

    /* Mobile only: keep "PRIMER 94" on one line (was wrapping) — desktop unchanged */
    #materials .materials-primer-title {
      white-space: nowrap !important;
      font-size: 28px !important;
      letter-spacing: 1px !important;
    }
  }

/* (tawk.to chat: no site CSS touches the widget — seafoam-chat.js lazy-loads
   it on click and tawk's own styles run untouched) */

/* ==== utility classes generated from repeated inline styles ==== */
.sfu-1{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;transition:all 0.25s;position:relative;flex-shrink:0;width:175px;}

/* Font carousel: room to pop on hover without clipping the top/sides */
#font-carousel-viewport,
#font-carousel-2-viewport,
#font-carousel-3-viewport {
  overflow: hidden !important;
  padding: 14px 6px 16px !important;
  margin: -6px 0 0 !important;
  border-radius: 12px !important;
}
#font-carousel-track .font-card.sfu-1,
#font-carousel-2-track .font-card.sfu-1,
#font-carousel-3-track .font-card.sfu-1 {
  transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.22s ease,
              border-color 0.22s ease !important;
  transform: scale(1);
  transform-origin: center center;
  z-index: 1;
}
#font-carousel-track .font-card.sfu-1:hover,
#font-carousel-2-track .font-card.sfu-1:hover,
#font-carousel-3-track .font-card.sfu-1:hover {
  transform: scale(1.06);
  z-index: 8;
}
.sfu-2{padding:7px 10px 9px;border-top:1px solid var(--border);}
.sfu-3{font-size:9px;letter-spacing:0.5px;color:var(--text-muted);margin-top:1px;}
.sfu-4{padding:8px 10px;display:flex;align-items:center;justify-content:center;height:76px;background:linear-gradient(135deg,rgba(0,180,216,0.07),rgba(6,31,58,0.97));overflow:hidden;}
.sfu-5{position:relative;width:100%;height:100%;}
.sfu-6{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer;}
.sfu-7{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.sfu-8{flex-shrink:0;width:80px;height:56px;border-radius:8px;overflow:hidden; cursor:pointer;border:2px solid transparent;opacity:0.55;transition:all 0.2s;}
.sfu-9{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-muted);}
.sfu-10{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);cursor:zoom-in;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);background:var(--card-bg);}
.sfu-10:hover{border-color:var(--foam-teal);transform:translateY(-5px);box-shadow:0 22px 55px rgba(0,0,0,0.6);}

/* Better swatch image treatment */
.sfu-12{transition:transform 0.4s ease;}
.sfu-10:hover .sfu-12{transform:scale(1.03);}
.sfu-11{width:100%;aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:6px;position:relative;}
.sfu-12{width:100%;height:100%;object-fit:contain;border-radius:10px;display:block;}
.sfu-13{padding:10px 12px 12px;background:rgba(6,31,58,0.9);}
.sfu-14{font-size:12px;font-weight:600;color:var(--white);line-height:1.3;}
.sfu-15{font-size:10px;color:var(--text-muted);margin-top:3px;}
.sfu-16{font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--white);}
.sfu-17{position:absolute;top:8px;right:8px;background:rgba(201,168,76,0.88);color:#1a0e00;font-size:8px;letter-spacing:1px;text-transform:uppercase;font-weight:700;padding:4px 9px;border-radius:100px;z-index:2;}
.stock-badge{position:absolute;top:8px;right:8px;background:rgba(0,200,100,0.92);color:#fff;font-size:9px;letter-spacing:1px;text-transform:uppercase;font-weight:700;padding:4px 10px;border-radius:100px;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,0.35);white-space:nowrap;}
.stock-qty{position:absolute;top:32px;right:8px;background:rgba(0,170,85,0.9);color:#fff;font-size:9.5px;letter-spacing:0.2px;font-weight:700;padding:4px 7px;border-radius:7px;z-index:2;text-align:left;line-height:1.3;box-shadow:0 2px 8px rgba(0,0,0,0.35);white-space:nowrap;}
.evercor-lead{position:absolute;top:8px;right:8px;background:rgba(0,150,190,0.94);color:#fff;font-size:8px;letter-spacing:0.4px;font-weight:700;padding:4px 8px;border-radius:8px;z-index:2;text-align:center;line-height:1.2;text-transform:uppercase;box-shadow:0 2px 8px rgba(0,0,0,0.4);white-space:nowrap;}
/* Mobile only: hide per-swatch stock levels, and move the Popular tag to the
   image's bottom-right so the top-right IN STOCK badge can't cover it.
   Desktop keeps stock levels + top-left Popular tag untouched. */
@media (max-width: 820px) {
  #colour-grid .stock-qty { display: none !important; }
  #colour-grid .sfu-11 .sf-pop {
    top: auto !important;
    left: auto !important;
    bottom: 8px !important;
    right: 8px !important;
  }
  /* Mobile only: drop the colour legend entirely */
  #colours .colour-legend-bar { display: none !important; }
}
.evercor-lead .inf{display:block;font-size:15px;line-height:0.9;margin-bottom:1px;letter-spacing:0;}
.sfu-18{font-size:13px;color:var(--white);font-weight:600;margin-bottom:3px;}
.sfu-19{font-size:11px;color:rgba(255,255,255,0.45);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px;}
.sfu-20{font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px;}
.sfu-21{background:rgba(0,180,216,0.1);border:1px solid rgba(0,180,216,0.2);color:rgba(255,255,255,0.7);padding:5px 12px;border-radius:18px;font-size:11px;}
.sfu-22{font-size:12px;color:rgba(255,255,255,0.5);line-height:1.5;}
.sfu-23{background:rgba(0,180,216,0.06);border:1px solid rgba(0,180,216,0.14);border-radius:10px;padding:14px 15px;}
.sfu-24{font-size:10px;color:rgba(255,255,255,0.42);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:5px;}
.sfu-25{font-size:10px;color:rgba(255,255,255,0.38);margin-top:2px;}
.sfu-26{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(0,180,216,0.04);border-radius:8px;border:1px solid rgba(0,180,216,0.1);}
.sfu-27{color:var(--foam-teal);font-size:14px;}
.sfu-28{font-size:12px;color:rgba(255,255,255,0.7);}
.sfu-29{font-size:20px;flex-shrink:0;}
.sfu-30{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--foam-teal);font-weight:700;flex-shrink:0;width:100px;}
.sfu-31{font-size:13px;color:var(--white);font-weight:500;flex:1;}
.sfu-32{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--foam-teal);font-weight:700;flex-shrink:0;}
.sfu-33{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;background:rgba(255,255,255,0.02);border-radius:10px;}
.sfu-34{color:rgba(255,120,80,0.8);font-size:14px;flex-shrink:0;margin-top:2px;}
.sfu-35{font-size:13px;color:rgba(255,255,255,0.8);font-weight:600;}
.sfu-36{font-size:13px;color:rgba(255,255,255,0.5);}
.sfu-37{color:var(--foam-teal);}
.sfu-38{text-decoration:none;display:flex;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid var(--border);transition:background 0.2s;}

/* Knowledge Base articles — never displayed (any viewport). The links stay in
   the HTML + sitemap so Google crawls the blog pages; the visitor-facing blog
   entry points are the 5 discreet footer links (desktop only). Intentional —
   do not "fix" by unhiding. */
.kb-articles-block {
  display: none !important;
}

.sfu-39{position:relative;}
.sfu-40{display:block;color:var(--white);font-size:12px;margin-bottom:4px;}
.sfu-41{background:rgba(0,180,216,0.07);border:1px solid rgba(0,180,216,0.15);border-radius:10px;padding:14px 16px;}
.sfu-42{background:rgba(0,180,216,0.1);border:1px solid rgba(0,180,216,0.2);color:rgba(255,255,255,0.75);padding:6px 14px;border-radius:20px;font-size:12px;}
.sfu-43{background:rgba(68,217,166,0.06);border:1px solid rgba(68,217,166,0.14);border-radius:10px;padding:14px 16px;}
.sfu-44{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--white);}
.sfu-45{color:rgba(255,255,255,0.45);}
.sfu-46{margin-bottom:44px;}
.sfu-47{display:flex;gap:10px;align-items:flex-start;}
.sfu-48{color:#00c864;font-size:14px;flex-shrink:0;margin-top:2px;}
.sfu-49{font-size:13px;color:rgba(255,255,255,0.65);line-height:1.7;}
.sfu-50{font-size:13px;color:rgba(255,255,255,0.55);line-height:1.7;}
.sfu-51{color:#ffe9a8;font-weight:700;}
.sfu-52{padding:24px 40px 0;}
.sfu-53{color:var(--foam-teal);font-weight:700;}
.sfu-54{color:var(--foam-light);font-weight:700;}
.sfu-55{color:#c4b5fd;font-weight:700;}
.sfu-56{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600; padding:5px 14px;border-radius:100px;border:1px solid rgba(0,180,216,0.32);color:var(--foam-light);}
.sfu-57{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--foam-light);}
.sfu-58{color:var(--foam-teal);font-size:12px;}
.sfu-59{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;width:100%;background:rgba(0,180,216,0.08);border:1px solid rgba(0,180,216,0.22);border-radius:10px;padding:10px 12px;}
.sfu-60{font-size:15px;}
.sfu-61{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--white);font-weight:600;}

/* ── Bonds To compatibility strip — matches materials section cards ── */
.bonds-strip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  padding: 22px 28px 24px;
  border-radius: 20px;
  border: 1px solid rgba(0,180,216,0.28);
  background: linear-gradient(145deg, rgba(10,53,96,0.55), rgba(3,13,26,0.92));
  overflow: hidden;
}

.bonds-strip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--foam-teal), transparent);
  pointer-events: none;
}

.bonds-strip-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--foam-teal);
  font-weight: 700;
}

.bonds-strip-rule {
  display: block;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,180,216,0.55), transparent);
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP-ONLY polish (min-width 821px) — mobile rules unchanged
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 821px) {
  /* Gallery: hide intro blurb */
  #gallery .gallery-intro-copy {
    display: none !important;
  }

  /* Process: hide tier blurbs + "Template" word (DIY only) */
  #process .tier-desc {
    display: none !important;
  }
  #process .tier-title-template-word {
    display: none !important;
  }

  /* EVA Foam: brighter animated topo / glow background */
  #eva-foam .eva-topo-canvas,
  #eva-foam #bg-topo {
    opacity: 0.55 !important;
    filter: brightness(1.25) saturate(1.1);
  }
  #eva-foam #bg-b31 {
    background: radial-gradient(
      ellipse at 50% -8%,
      #1a6a8a 0%,
      #0c3d5a 28%,
      #082d46 58%,
      #061f36 100%
    ) !important;
  }
  #eva-foam #bg-b31 .vignette {
    background: radial-gradient(
      ellipse at 50% 38%,
      rgba(1, 8, 18, 0.15) 0%,
      rgba(1, 8, 18, 0.28) 50%,
      rgba(0, 4, 10, 0.45) 100%
    ) !important;
  }
  #eva-foam #bg-b31 .vignette::after {
    background: rgba(1, 7, 16, 0.15) !important;
  }
  #eva-foam .eva-standard-overlay {
    background:
      radial-gradient(ellipse 68% 44% at 38% 14%, rgba(0, 180, 216, 0.12), transparent 68%),
      linear-gradient(180deg, rgba(3, 13, 26, 0.2) 0%, rgba(3, 13, 26, 0.12) 45%, rgba(3, 13, 26, 0.35) 100%),
      rgba(3, 13, 26, 0.06) !important;
  }

  /* Materials: hide intro + 8mm/ZERO/72h strip */
  #materials .materials-header-intro {
    display: none !important;
  }
  #materials .materials-stat-strip {
    display: none !important;
  }

  /* Materials: Installation Process title matches Bonds To + tighter padding */
  #materials .materials-install-process {
    padding: 28px 40px 32px !important;
  }
  #materials .materials-install-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 22px;
    font-family: Montserrat, sans-serif;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--foam-teal);
    text-align: center;
  }
  #materials .materials-install-rule {
    flex: 1;
    max-width: 48px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--foam-teal), transparent);
    opacity: 0.7;
  }
}

.bonds-strip-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
  width: 100%;
}

.bonds-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,180,216,0.24);
  background: linear-gradient(145deg, rgba(4,20,38,0.9), rgba(8,38,68,0.54));
  transition:
    border-color 0.28s ease,
    background 0.28s ease,
    transform 0.28s ease;
}

.bonds-chip:hover {
  border-color: rgba(0,180,216,0.42);
  background: linear-gradient(145deg, rgba(6,28,50,0.95), rgba(10,53,96,0.55));
  transform: translateY(-1px);
}

.bonds-chip-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-size: 14px;
  line-height: 1;
  background: rgba(0,180,216,0.1);
  border: 1px solid rgba(0,180,216,0.3);
}

.bonds-chip-text {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
}

@media (max-width: 1080px) {
  .bonds-strip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .bonds-strip {
    padding: 18px 16px 20px;
  }

  .bonds-strip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .bonds-chip {
    padding: 10px 10px;
    gap: 7px;
  }

  .bonds-chip-icon {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  .bonds-chip-text {
    font-size: 9px;
    letter-spacing: 0.8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bonds-chip {
    transition: none;
  }

  .bonds-chip:hover {
    transform: none;
  }
}
.sfu-62{display:flex;align-items:flex-start;gap:12px;padding:14px;background:rgba(0,180,216,0.05);border-radius:10px;border:1px solid rgba(0,180,216,0.1);}
.sfu-63{width:28px;height:28px;border-radius:50%;background:rgba(0,180,216,0.15);border:1px solid var(--foam-teal);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.sfu-64{display:flex;align-items:flex-start;gap:12px;padding:14px;background:rgba(68,217,166,0.04);border-radius:10px;border:1px solid rgba(68,217,166,0.1);}
.sfu-65{width:28px;height:28px;border-radius:50%;background:rgba(68,217,166,0.15);border:1px solid #44d9a6;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.sfu-66{color:rgba(255,255,255,0.8);}
.sfu-67{display:flex;align-items:flex-start;gap:12px;padding:14px;background:rgba(0,180,216,0.04);border-radius:10px;border:1px solid rgba(0,180,216,0.1);}
.sfu-68{width:30px;height:30px;border-radius:50%;background:rgba(0,180,216,0.15);border:1px solid var(--foam-teal);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.sfu-69{font-size:12px;color:rgba(255,255,255,0.5);line-height:1.55;}
.sfu-70{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.sfu-71{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:2px;color:#fff;}
.sfu-72{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08); border-radius:16px;padding:28px 32px;}
.sfu-73{text-align:center;position:relative;z-index:1;padding:0 8px;}
.sfu-74{font-size:10px;color:var(--text-muted);line-height:1.5;}
.sfu-75{justify-content:center;}
.sfu-76{padding:28px 40px 0;}
.sfu-77{font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:3px;color:var(--foam-teal);margin-bottom:14px;border-bottom:1px solid rgba(0,180,216,0.15);padding-bottom:10px;}

/* Desktop only: brighter Get In Touch liquid background (mobile rules untouched) */
@media (min-width: 821px) {
  #get-in-touch #git-liquid-canvas {
    opacity: 0.20 !important;
    filter: brightness(1.18) saturate(1.08);
  }
  #get-in-touch > div[aria-hidden="true"][style*="linear-gradient"] {
    opacity: 0.88;
  }
}

/* Desktop only: hide workshop header intro blurb (mobile untouched) */
@media (min-width: 821px) {
  #workshop .ws-header-intro {
    display: none !important;
  }
}

/* Desktop only: medium-brighter Colours section background (mobile rules untouched) */
@media (min-width: 821px) {
  #colours {
    background: #051428 !important;
  }
  #colours #colour-bg-canvas {
    opacity: 0.88 !important;
    filter: brightness(1.22) saturate(1.08);
  }
  #colours > div[style*="radial-gradient(ellipse at 30%"] {
    opacity: 0.5 !important;
  }
  #colours > div[style*="radial-gradient(ellipse at center"] {
    background: radial-gradient(ellipse at center, transparent 0%, transparent 38%, rgba(3, 10, 20, 0.72) 100%) !important;
  }
  #colours > div[style*="radial-gradient(ellipse at 100% 0%"] {
    opacity: 0.55 !important;
  }
}

/* ==== get-in-touch contact tiles ==== */
.git-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 0;
}
.git-tile {
  --accent: #00b4d8;
  --accent-rgb: 0,180,216;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 30px 20px 24px;
  text-align: center;
  text-decoration: none;
  border-radius: 18px;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(var(--accent-rgb), 0.09), transparent 60%),
    var(--card-bg);
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.git-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.55;
  transition: opacity 0.28s ease;
}
.git-tile:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 22px 50px rgba(0,0,0,0.45), 0 0 26px rgba(var(--accent-rgb), 0.14);
}
.git-tile:hover::before { opacity: 1; }
.git-tile-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 25%, rgba(var(--accent-rgb), 0.26), rgba(var(--accent-rgb), 0.06));
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 0 18px rgba(var(--accent-rgb), 0.16);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.git-tile-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.35));
  transition: stroke 0.28s ease;
}
.git-tile:hover .git-tile-icon {
  transform: translateY(-2px) scale(1.06);
  border-color: rgba(var(--accent-rgb), 0.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 28px rgba(var(--accent-rgb), 0.5);
}
.git-tile-corner {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  border-radius: 1px;
  transform: rotate(45deg) translate(-3px, 3px);
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.git-tile:hover .git-tile-corner {
  opacity: 0.9;
  transform: rotate(45deg) translate(0, 0);
}
.git-tile-label {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.95);
  font-weight: 700;
  margin-bottom: 5px;
}
.git-tile-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.35;
}
.git-tile-hint {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
  transition: color 0.25s ease;
}
.git-tile:hover .git-tile-hint { color: var(--accent); }
.git-tile--call  { --accent:#2ee6a0; --accent-rgb:46,230,160; }
.git-tile--mail  { --accent:#00b4d8; --accent-rgb:0,180,216; }
.git-tile--web   { --accent:#90e0ef; --accent-rgb:144,224,239; }
.git-tile--visit { --accent:#e6b64c; --accent-rgb:230,182,76; }
@media (max-width: 1000px) {
  .git-tile-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile phones only: keep 2×2, tighter tiles (desktop / tablet rules above unchanged) */
@media (max-width: 540px) {
  .git-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .git-tile {
    gap: 8px;
    padding: 16px 10px 14px;
    border-radius: 14px;
  }
  .git-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .git-tile-icon svg {
    width: 18px;
    height: 18px;
  }
  .git-tile-label {
    font-size: 8px;
    letter-spacing: 1.5px;
    margin-bottom: 3px;
  }
  .git-tile-value {
    font-size: 11px;
    line-height: 1.3;
    word-break: break-word;
    hyphens: auto;
  }
  .git-tile-hint {
    font-size: 9px;
    line-height: 1.3;
  }
  .git-tile-corner {
    top: 10px;
    right: 10px;
  }
}

/* ==== eva-standard section refresh v2 ==== */

/* hero stat chips */
.eva-stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.eva-stat-chip {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid rgba(0,180,216,0.26);
  background: rgba(3,13,26,0.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(6px);
}

.eva-stat-chip strong {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 1.4px;
  color: var(--white);
}

.eva-stat-chip span {
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 800;
  white-space: nowrap;
}

.eva-stat-chip-hero {
  border-color: rgba(0,180,216,0.55);
  background: linear-gradient(135deg, rgba(0,180,216,0.16), rgba(3,13,26,0.72));
}

.eva-stat-chip-hero strong {
  color: var(--foam-teal);
}

/* +33% badge on the compare card */
.eva-real-board-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

/* Header badge no longer used — mid-slider badge is the single source */
#eva-foam .eva-compare-badge--header {
  display: none !important;
}

/* Mid badge: hidden by default; shown between 6mm/8mm labels on desktop + mobile */
#eva-foam .eva-compare-badge--mid {
  display: none !important;
}

/* Desktop: +33% badge sits between the 6mm / 8mm labels in the slider */
@media (min-width: 861px) {
  #eva-foam .foam-compare-slider .eva-compare-badge--mid {
    display: inline-flex !important;
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    pointer-events: none;
  }
}

/* Single deep navy pill + soft teal glow / shimmer */
#eva-foam .eva-board-head > span.eva-compare-badge,
#eva-foam .eva-compare-badge {
  --badge-glow: rgba(0, 180, 216, 0.45);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,180,216,0.42);
  background:
    radial-gradient(120% 140% at 15% 30%, rgba(0,180,216,0.22), transparent 55%),
    #03111f !important;
  color: rgba(180, 220, 235, 0.95) !important;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 400;
  white-space: nowrap;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(0,180,216,0.12),
    0 0 18px rgba(0,180,216,0.28),
    0 0 36px rgba(0,180,216,0.12),
    0 8px 20px rgba(0,0,0,0.4);
  animation: evaBadgePulse 5s ease-in-out infinite;
}

/* Slow continuous shimmer — translate so it never “sticks” mid-band */
#eva-foam .eva-compare-badge::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 45%;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(144, 224, 239, 0.06) 35%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(144, 224, 239, 0.06) 65%,
    transparent 100%
  );
  transform: translateX(0);
  animation: evaBadgeShimmer 5.5s linear infinite;
  pointer-events: none;
  z-index: 0;
}

#eva-foam .eva-compare-badge strong,
#eva-foam .eva-compare-badge {
  z-index: 1;
}

#eva-foam .eva-compare-badge strong {
  position: relative;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.8px;
  line-height: 1;
  color: var(--foam-teal);
  text-transform: none;
  text-shadow: 0 0 12px rgba(0,180,216,0.55);
  z-index: 1;
}

@keyframes evaBadgeShimmer {
  0%   { transform: translateX(0); opacity: 0; }
  8%   { opacity: 1; }
  78%  { opacity: 1; }
  90%  { transform: translateX(320%); opacity: 0; }
  100% { transform: translateX(320%); opacity: 0; }
}

@keyframes evaBadgePulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 0 0 1px rgba(0,180,216,0.12),
      0 0 14px rgba(0,180,216,0.22),
      0 0 28px rgba(0,180,216,0.08),
      0 8px 20px rgba(0,0,0,0.4);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.1),
      0 0 0 1px rgba(0,180,216,0.22),
      0 0 22px rgba(0,180,216,0.42),
      0 0 44px rgba(0,180,216,0.18),
      0 8px 20px rgba(0,0,0,0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  #eva-foam .eva-compare-badge,
  #eva-foam .eva-compare-badge::before {
    animation: none;
  }
}

/* slider label sub-text */
#eva-foam .foam-compare-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 11px 20px 12px;
}

#eva-foam .foam-compare-label small {
  font: 800 8.5px/1 Montserrat, sans-serif;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(168,196,210,0.72);
}

#eva-foam .foam-compare-label-right small {
  color: rgba(144,224,239,0.85);
}

/* balance the two cards: slider stretches to match the two-tone card */
.eva-top-tools {
  align-items: stretch;
}

/* keep the card height constant while tabs cycle */
@media (min-width: 1081px) {
  .eva-two-tone-stage {
    min-height: 380px;
  }
}

#eva-foam .foam-compare-slider {
  flex: 1;
  min-height: 400px;
}

#eva-foam .foam-compare-photo-stage {
  height: 256px;
}

#eva-foam .foam-profile-img-6 {
  max-height: 160px;
}

#eva-foam .foam-profile-img-8 {
  max-height: 220px;
}

/* icon chip (used in result-panel benefits) */
.eva-mini-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(0,180,216,0.42);
  background: linear-gradient(160deg, rgba(0,180,216,0.26), rgba(0,180,216,0.05));
  color: var(--foam-light);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 20px rgba(0,0,0,0.24);
}

.eva-mini-icon svg {
  width: 20px;
  height: 20px;
}

/* benefit cards — under 6mm/8mm compare slider (and reusable) */
.eva-tt-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.eva-compare-benefits {
  margin-top: 20px;
  flex: 0 0 auto;
}

/* Mobile only: hide compare benefit cards under the 6mm/8mm slider */
@media (max-width: 760px) {
  #eva-foam .eva-compare-benefits {
    display: none !important;
  }
}

.eva-real-compare-card {
  display: flex;
  flex-direction: column;
}

.eva-tt-benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  border-radius: 16px;
  border: 1px solid rgba(0,180,216,0.24);
  background:
    linear-gradient(150deg, rgba(0,180,216,0.08), transparent 55%),
    rgba(3,13,26,0.55);
  transition: border-color 0.3s, background-color 0.3s;
}

.eva-tt-benefit:hover {
  border-color: rgba(0,180,216,0.5);
}

.eva-tt-benefit h5 {
  margin: 0 0 5px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 0.9px;
  line-height: 1.05;
  color: var(--white);
}

.eva-tt-benefit h5 em {
  font-style: normal;
  color: var(--foam-light);
}

.eva-tt-benefit p {
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.55;
}

/* result panel: grooves draw themselves in */
.eva-tt-panel.active .eva-res-deck {
  animation: evaMarksIn 0.5s ease both;
}

.eva-tt-panel.active .eva-res-border {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: evaResBorderDraw 1.1s ease 0.4s forwards;
}

.eva-tt-panel.active .eva-res-groove {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: evaResGrooveDraw 0.55s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

.eva-tt-panel.active .eva-res-g1 { animation-delay: 0.55s; }
.eva-tt-panel.active .eva-res-g2 { animation-delay: 0.75s; }
.eva-tt-panel.active .eva-res-g3 { animation-delay: 0.95s; }

.eva-tt-panel.active .eva-res-labels {
  animation: evaMarksIn 0.5s ease 1.35s both;
}

@keyframes evaResBorderDraw {
  to { stroke-dashoffset: 0; }
}

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

/* two-tone card fills its column */
.eva-top-tools .eva-two-tone-card .eva-two-tone-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.eva-tt-panel.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  animation: evaTtPanelIn 0.45s ease both;
}

.eva-tt-panel.active .eva-tt-svg {
  margin: auto 0;
}

@keyframes evaTtPanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* auto-advance progress on active tab */
.eva-two-tone-tabs button {
  position: relative;
}

.eva-two-tone-card.is-auto .eva-two-tone-tabs button.active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(3,13,26,0.5);
  transform: scaleX(0);
  transform-origin: left center;
  animation: evaTabProg var(--eva-tt-dur, 4600ms) linear both;
}

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

/* step 1 - layers bond together */
.eva-tt-panel.active .eva-tt-anim-top {
  animation: evaLayerTop 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) 0.1s both;
}

.eva-tt-panel.active .eva-tt-anim-bottom {
  animation: evaLayerBottom 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) 0.1s both;
}

.eva-tt-panel.active .eva-tt-anim-marks {
  animation: evaMarksIn 0.5s ease 0.75s both;
}

@keyframes evaLayerTop {
  from { transform: translateY(-22px); }
  to { transform: none; }
}

@keyframes evaLayerBottom {
  from { transform: translateY(22px); }
  to { transform: none; }
}

@keyframes evaMarksIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* step 2 - travelling CNC bit cuts three grooves.
   ONLY when panel 2 is active — otherwise the anim finishes while hidden
   (fill-mode:both) and the first reveal never shows motion. */
.eva-tt-panel:not(.active) .eva-cnc-bit,
.eva-tt-panel:not(.active) .eva-cut-groove {
  animation: none !important;
}

.eva-tt-panel.active .eva-cnc-bit {
  animation: evaBitTravel 3.9s cubic-bezier(0.45, 0, 0.25, 1) 0.25s both;
}

.eva-cut-groove {
  transform-box: fill-box;
  transform-origin: 50% 0%;
}

/* Groove delays match bit plunge times on the 3.9s timeline (+0.25s start) */
.eva-tt-panel.active .eva-cut-1 { animation: evaGrooveCut 0.5s ease-out 0.60s both; }
.eva-tt-panel.active .eva-cut-2 { animation: evaGrooveCut 0.5s ease-out 2.20s both; }
.eva-tt-panel.active .eva-cut-3 { animation: evaGrooveCut 0.5s ease-out 3.76s both; }

/* Force a clean restart when re-entering step 2 (auto tabs or click) */
.eva-tt-panel.active .eva-cnc-bit,
.eva-tt-panel.active .eva-cut-groove {
  will-change: transform;
}

@keyframes evaBitTravel {
  0%   { transform: translate(0, -26px); }
  9%   { transform: translate(0, 0); }
  24%  { transform: translate(0, 0); }
  32%  { transform: translate(0, -26px); }
  42%  { transform: translate(122px, -26px); }
  50%  { transform: translate(122px, 0); }
  65%  { transform: translate(122px, 0); }
  73%  { transform: translate(122px, -26px); }
  82%  { transform: translate(244px, -26px); }
  90%  { transform: translate(244px, 0); }
  100% { transform: translate(244px, 0); }
}

@keyframes evaGrooveCut {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* responsive */
@media (max-width: 1080px) {
  .eva-real-board-head,
  .eva-two-tone-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Mobile foam compare density — kept in the primary 760px block above (no tall min-height override) */

/* Hide hero stat chips on mobile only — desktop unchanged */
@media (max-width: 860px) {
  .eva-stat-chips {
    display: none;
  }
}

@media (max-width: 560px) {
  .eva-tt-benefits {
    grid-template-columns: 1fr;
  }

  .eva-svg-fine {
    display: none;
  }

  #eva-foam .foam-compare-label small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eva-tt-panel.active,
  .eva-tt-panel.active .eva-tt-anim-top,
  .eva-tt-panel.active .eva-tt-anim-bottom,
  .eva-tt-panel.active .eva-tt-anim-marks,
  .eva-tt-panel.active .eva-cnc-bit,
  .eva-tt-panel.active .eva-cut-groove,
  .eva-cnc-bit,
  .eva-cut-groove,
  .eva-two-tone-card.is-auto .eva-two-tone-tabs button.active::after,
  .eva-tt-panel.active .eva-res-deck,
  .eva-tt-panel.active .eva-res-groove,
  .eva-tt-panel.active .eva-res-labels {
    animation: none !important;
    transition: none;
  }

  .eva-tt-panel.active .eva-res-border {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   CNC vs LASER COMPARISON SECTION  (#cnc-vs-laser)
   ═══════════════════════════════════════════════════════════ */

#cnc-vs-laser .cvl-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 60px;
  position: relative;
  z-index: 2;
}

/* gold exclusive badge — sits bottom-right on the laser-etched panel */
.cvl-excl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  border: 1px solid rgba(201, 168, 76, 0.45);
  background: rgba(201, 168, 76, 0.07);
  border-radius: 999px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 2.5px;
  color: var(--gold);
}
.cvl-excl--on-laser {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  margin: 0;
  max-width: min(92%, 340px);
  pointer-events: none;
  background: rgba(3, 13, 26, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  text-align: left;
  line-height: 1.25;
}
.cvl-layer--laser {
  /* ensure badge positions relative to the laser panel */
  position: absolute;
}

/* ── Interactive split-deck stage ── */
/* Isolate the whole section: its SVG runs looping SMIL animations, and on mobile
   the browser's scroll-anchoring would treat each loop restart as a layout change
   and jerk the page. overflow-anchor:none opts the subtree out of anchoring. */
#cnc-vs-laser { overflow-anchor: none; }

.cvl-stage {
  --cvl-x: 50%;
  position: relative;
  margin-top: 56px;
  height: clamp(320px, 42vw, 480px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
  overflow-anchor: none;
  /* contain layout/paint so the looping animation inside can never reflow the
     document or move the page's scroll position */
  contain: layout paint;
}
.cvl-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 70px rgba(1, 7, 15, 0.38);
  border-radius: 18px;
  z-index: 7;
}

.cvl-layer { position: absolute; inset: 0; }
.cvl-layer svg { width: 100%; height: 100%; display: block; }
.cvl-layer--laser { clip-path: inset(0 0 0 var(--cvl-x)); }

/* laser beam: slow drift along the grain + pulsing glow */
.cvl-beam { animation: cvlBeamDrift 7s ease-in-out infinite alternate; }
@keyframes cvlBeamDrift {
  from { transform: translateX(-60px); }
  to   { transform: translateX(60px); }
}
.cvl-beam-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: cvlBeamPulse 1.6s ease-in-out infinite;
}
@keyframes cvlBeamPulse {
  0%, 100% { opacity: 0.75; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.18); }
}

.cvl-stage-tag {
  position: absolute;
  top: 16px;
  z-index: 6;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(3, 13, 26, 0.78);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.cvl-stage-tag--cnc {
  left: 16px;
  color: var(--foam-light);
  border: 1px solid rgba(0, 180, 216, 0.45);
}
.cvl-stage-tag--laser {
  right: 16px;
  color: var(--gold);
  border: 1px solid rgba(201, 168, 76, 0.5);
}

/* depth shadow cast at the reveal edge */
.cvl-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--cvl-x);
  width: 30px;
  transform: translateX(-30px);
  background: linear-gradient(90deg, transparent, rgba(1, 7, 15, 0.32));
  z-index: 4;
  pointer-events: none;
}

.cvl-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--cvl-x);
  width: 2px;
  transform: translateX(-1px);
  background: linear-gradient(180deg, var(--foam-teal), #ffffff, var(--gold));
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.5);
  z-index: 5;
  pointer-events: none;
}

.cvl-handle {
  position: absolute;
  top: 50%;
  left: var(--cvl-x);
  transform: translate(-50%, -50%);
  z-index: 6;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(3, 13, 26, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  padding: 0;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 24px rgba(0, 180, 216, 0.35);
}
.cvl-handle:focus-visible {
  outline: 2px solid var(--foam-teal);
  outline-offset: 3px;
}
.cvl-handle::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  animation: cvlHandlePulse 2.4s ease-out infinite;
}
@keyframes cvlHandlePulse {
  0%   { transform: scale(0.75); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}
.cvl-handle.is-touched::before { display: none; }
.cvl-handle::after {
  content: 'DRAG';
  position: absolute;
  top: 100%;
  margin-top: 10px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  transition: opacity 0.4s ease;
}
.cvl-handle.is-touched::after { opacity: 0; }

/* ── Machine columns inside the info box (click to slide) ── */
.cvl-caps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  position: relative;
  z-index: 1;
}
.cvl-caps::before {                 /* centre divider between the two machines */
  content: "";
  position: absolute;
  left: 50%; top: 6px; bottom: 6px;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.16) 16%, rgba(255,255,255,0.16) 84%, transparent);
  pointer-events: none;
}
.cvl-caps-vs {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #06182e;
  border: 1px solid rgba(201, 168, 76, 0.45);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  z-index: 2;
  pointer-events: none;
}
.cvl-caps-vs span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px; letter-spacing: 1px;
  color: var(--gold);
}
.cvl-cap {
  position: relative;
  padding: 12px 18px 10px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.cvl-cap:hover { background: rgba(0, 180, 216, 0.05); }
.cvl-cap--laser:hover { background: rgba(201, 168, 76, 0.05); }
.cvl-cap.is-active { background: linear-gradient(180deg, rgba(0, 180, 216, 0.09), transparent 88%); }
.cvl-cap--laser.is-active { background: linear-gradient(180deg, rgba(201, 168, 76, 0.09), transparent 88%); }
.cvl-cap:focus-visible { outline: 2px solid var(--foam-teal); outline-offset: 3px; }
.cvl-cap--laser:focus-visible { outline-color: var(--gold); }
.cvl-cap-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.cvl-cap-ic {
  flex: none;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: var(--foam-teal);
  background: rgba(0, 180, 216, 0.09);
  border: 1px solid rgba(0, 180, 216, 0.28);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.cvl-cap--laser .cvl-cap-ic {
  color: var(--gold);
  background: rgba(201, 168, 76, 0.09);
  border-color: rgba(201, 168, 76, 0.3);
}
.cvl-cap.is-active .cvl-cap-ic { background: rgba(0, 180, 216, 0.18); border-color: var(--foam-teal); }
.cvl-cap--laser.is-active .cvl-cap-ic { background: rgba(201, 168, 76, 0.18); border-color: var(--gold); }
.cvl-cap-ic svg { width: 25px; height: 25px; }
.cvl-cap-heads { display: flex; flex-direction: column; gap: 4px; }
.cvl-cap-role {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--foam-teal);
  line-height: 1;
}
.cvl-cap--laser .cvl-cap-role { color: var(--gold); }
.cvl-cap-t {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px; letter-spacing: 1.5px; line-height: 1;
  color: var(--white);
}
.cvl-cap-p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  padding-bottom: 0;
}
.cvl-pillrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
}

/* Desktop: title row left, pills right — clean single line, no overlap */
@media (min-width: 961px) {
  .cvl-cap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 18px;
    row-gap: 12px;
    align-items: start;
  }
  .cvl-cap-head {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    padding-right: 0;
    min-width: 0;
  }
  .cvl-pillrow {
    grid-column: 2;
    grid-row: 1;
    position: static;
    max-width: none;
    flex-wrap: nowrap;
    align-self: center;
    justify-content: flex-end;
    white-space: nowrap;
  }
  .cvl-cap-p {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-right: 0;
    max-width: 100%;
  }
  .cvl-pill {
    flex: 0 0 auto;
  }
}
.cvl-pill {
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--foam-light);
  border: 1px solid rgba(0, 180, 216, 0.3);
  background: rgba(0, 180, 216, 0.07);
  padding: 5px 11px;
  border-radius: 999px;
}
.cvl-pill--gold {
  color: var(--gold);
  border-color: rgba(201, 168, 76, 0.35);
  background: rgba(201, 168, 76, 0.07);
}

/* ── Info box (machine columns + exclusive footer) ── */
.cvl-banner {
  margin-top: 30px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(201, 168, 76, 0.38);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.10), rgba(6, 31, 58, 0.85) 60%);
  padding: 22px 36px 18px;
}
.cvl-banner-ghost {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 170px;
  letter-spacing: 8px;
  line-height: 1;
  color: rgba(201, 168, 76, 0.06);
  pointer-events: none;
  user-select: none;
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .cvl-beam,
  .cvl-beam-glow,
  .cvl-handle::before { animation: none; }
}

/* ── Responsive ── */
@media (max-width: 960px) {
  #cnc-vs-laser .cvl-inner { padding: 72px 28px; }
  .cvl-excl { font-size: 11px; letter-spacing: 1.6px; padding: 7px 12px; text-align: left; }
  .cvl-excl--on-laser {
    right: 10px;
    bottom: 10px;
    max-width: min(88%, 260px);
    gap: 6px;
  }
  .cvl-stage { height: clamp(300px, 58vw, 420px); }
  .cvl-caps { grid-template-columns: 1fr; gap: 0; }
  .cvl-caps::before, .cvl-caps-vs { display: none; }
  .cvl-cap {
    display: flex;
    flex-direction: column;
    padding: 14px 14px 14px;
  }
  .cvl-cap + .cvl-cap { border-top: 1px solid rgba(255, 255, 255, 0.08); }
  /* Mobile/tablet: title, then pills, then body */
  .cvl-cap-head {
    order: 1;
    padding-right: 0;
    margin-bottom: 10px;
  }
  .cvl-pillrow {
    order: 2;
    position: static;
    max-width: none;
    justify-content: flex-start;
    flex-wrap: nowrap; /* keep blue/gold pairs side by side like gold pills */
    gap: 8px;
    margin: 0 0 12px;
    white-space: normal;
  }
  .cvl-pill {
    flex: 0 1 auto;
    font-size: 9px;
    letter-spacing: 1.1px;
    padding: 5px 10px;
    white-space: nowrap;
  }
  .cvl-cap-p {
    order: 3;
  }
  .cvl-banner { padding: 20px 18px 14px; }
  .cvl-banner-ghost { display: none; }
}

@media (max-width: 560px) {
  .cvl-stage { height: 300px; }
  .cvl-stage-tag { font-size: 11px; padding: 6px 10px; top: 12px; }
  .cvl-stage-tag--cnc { left: 12px; }
  .cvl-stage-tag--laser { right: 12px; }
}

/* Mobile only: shift laser tuna left so the head/face is in frame (desktop uses SVG transform attr) */
@media (max-width: 820px) {
  #cnc-vs-laser .cvl-laser-tuna {
    /* was translate(1170, 33.8) — move left so face sits in the laser panel */
    transform: translate(920px, 33.8px) scale(-1, 1);
  }
  /* Track the beam to the shifted fish: the ridge path (#cvl-fish-ridge) is
     authored for the desktop fish at x=1170; the fish moves to x=920 on mobile
     (−250), so slide the whole beam group left by the same 250 user units so it
     sweeps the top ridge near the head, all in frame, like desktop. */
  #cnc-vs-laser .cvl-beam-wrap {
    transform: translateX(-250px);
  }
}

/* ── Mobile perf: don't pre-promote below-fold reveal elements to
      compositor layers — dozens of GPU layers cost real memory on phones.
      The reveal transition still runs, it just skips the will-change hint. ── */
@media (max-width: 900px) {
  .reveal { will-change: auto; }
}