/*!
 * GEBO Pro — brand stylesheet
 * Extracted from the canonical single-file site by _build/extract-assets.js.
 * Do not hand-edit: re-run the build after changing "GEBO website/index.html".
 */
/* ============================================================
       BRAND FONT — Futura BT (embedded, no external requests)
       Book = regular text, Medium = 500-600, Bold = 700+
       ============================================================ */
    @font-face {
      font-family: 'Futura BT';
      src: url(../fonts/FuturaBT-400.ttf) format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: optional;
    }
    @font-face {
      font-family: 'Futura BT';
      src: url(../fonts/FuturaBT-500.ttf) format('truetype');
      font-weight: 500 600;
      font-style: normal;
      font-display: optional;
    }
    @font-face {
      font-family: 'Futura BT';
      src: url(../fonts/FuturaBT-700.ttf) format('truetype');
      font-weight: 700 900;
      font-style: normal;
      font-display: optional;
    }
    /* IBM Plex Sans — Signal concept body typeface (paired with Futura BT,
       which stays the display/heading face everywhere). See the "Grounded"
       typography pairing pitch — chosen 2026-08-16. */
    @font-face {
      font-family: 'IBM Plex Sans';
      src: url(../fonts/IBMPlexSans-400.woff2) format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'IBM Plex Sans';
      src: url(../fonts/IBMPlexSans-500.woff2) format('woff2');
      font-weight: 500 600;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'IBM Plex Sans';
      src: url(../fonts/IBMPlexSans-700.woff2) format('woff2');
      font-weight: 700 900;
      font-style: normal;
      font-display: swap;
    }
    /* ============================================================
       GEBO PRO — SINGLE-FILE WEBSITE
       Palette: Red / Black / White
       ============================================================ */

    :root {
      --red:        #e23a2e;   /* primary brand red — matches the logo's warm vermilion */
      --red-dark:   #c22e22;   /* hover / pressed red (deeper warm tone) */
      /* Signal concept: warm-neutral ramp, chosen 2026-08-16 over adding a
         second hue. Every neutral below is nudged a few degrees toward the
         brand red (R > G > B) instead of sitting true-neutral, so the
         single-hue system reads as deliberate rather than unfinished. */
      --black:      #0e0c0a;   /* near-black base */
      --ink:        #1a1714;   /* card surfaces on dark */
      --ink-2:      #241f1b;   /* slightly lighter surface */
      --white:      #ffffff;
      --off-white:  #f7f5f2;   /* light section background */
      --grey:       #a39b93;   /* muted text on dark */
      --grey-dark:  #5c544c;   /* muted text on light */
      --line:       rgba(255, 255, 255, 0.09);  /* hairlines on dark */
      --line-light: rgba(14, 12, 10, 0.10);     /* hairlines on light */

      --font-head: 'Futura BT', 'Century Gothic', 'Segoe UI', sans-serif;
      --font-body: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
      --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Consolas', monospace;

      /* ---- Signal concept accents (homepage hero) ---- */
      --signal-amber: #c9974b;
      --node-dim:     #3a3a42;

      --container: 1160px;
      --radius: 14px;
      --nav-h: 72px;

      --shadow-red: 0 10px 30px -8px rgba(226, 58, 46, 0.45);
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* ---------- Reset ---------- */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      background: var(--black);
      color: var(--white);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
    ::selection { background: var(--red); color: var(--white); }

    h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; letter-spacing: -0.02em; }

    .container { width: min(var(--container), 92%); margin-inline: auto; }

    /* ---------- Accessibility ---------- */
    /* Visible keyboard focus everywhere (was missing — keyboard users were lost) */
    a:focus-visible, button:focus-visible, input:focus-visible,
    [tabindex]:focus-visible, summary:focus-visible {
      outline: 3px solid var(--red);
      outline-offset: 3px;
      border-radius: 4px;
    }
    /* Skip straight to content — first stop for screen-reader / keyboard users */
    .skip-link {
      position: absolute;
      left: 50%; top: -100px;
      transform: translateX(-50%);
      z-index: 200;
      background: var(--red);
      color: #fff;
      font-weight: 600;
      padding: 0.85rem 1.6rem;
      border-radius: 0 0 12px 12px;
      transition: top 0.2s var(--ease);
    }
    .skip-link:focus { top: 0; }

    /* ============================================================
       NAVIGATION (sticky)
       ============================================================ */
    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      height: var(--nav-h);
      background: rgba(14, 12, 10, 0.85);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      /* Signal concept: a faint red hairline instead of a neutral one —
         the nav reads as "live" the same way the hero's nodes do. */
      border-bottom: 1px solid rgba(226,58,46,0.14);
    }
    .nav__inner {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .nav__logo {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-family: var(--font-head);
      font-weight: 700;
      font-size: 1.3rem;
      letter-spacing: -0.02em;
    }
    /* Header logo: the full official GEBO logo (src copied from the footer
       image by JS so the image data is only embedded once) */
    .nav__logo-full {
      height: 64px; width: auto;
      flex-shrink: 0;
      border-radius: 8px;
      transition: transform 0.3s var(--ease);
    }
    .nav__logo:hover .nav__logo-full { transform: scale(1.05); }
    /* Full logo in the footer */
    .footer__logo {
      width: 290px;
      max-width: 100%;
      height: auto;
      border-radius: 10px;
    }

    .nav__links {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      list-style: none;
    }
    .nav__link {
      position: relative;
      padding: 0.55rem 1rem;
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--grey);
      border-radius: 8px;
      transition: color 0.25s var(--ease), background 0.25s var(--ease);
    }
    .nav__link:hover { color: var(--white); background: rgba(255,255,255,0.06); }
    /* Hover underline for non-active links — same bar the active page already gets, just scaled in on hover */
    .nav__link:not(.is-active)::after {
      content: '';
      position: absolute;
      left: 1rem; right: 1rem; bottom: 2px;
      height: 2px;
      background: var(--red);
      border-radius: 2px;
      transform: scaleX(0);
      transition: transform 0.25s var(--ease);
    }
    .nav__link:not(.is-active):hover::after { transform: scaleX(1); }

    /* ---------- Services MEGA MENU ---------- */
    .nav__dd { position: static; }   /* let the mega panel span wider than the item */
    .nav__dd-toggle { display: inline-flex; align-items: center; gap: 0.35rem; }
    .nav__dd-toggle .caret { width: 11px; height: 11px; transition: transform 0.25s var(--ease); }
    .nav__dd:hover .nav__dd-toggle .caret { transform: rotate(180deg); }
    .nav__dd-menu {
      position: absolute;
      top: calc(100% + 4px);
      left: 50%;
      width: min(640px, calc(100vw - 40px));
      transform: translateX(-50%) translateY(8px);
      background: #141417;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 0.7rem;
      box-shadow: 0 24px 54px -16px rgba(0,0,0,0.8);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
      z-index: 130;
    }
    /* invisible bridge so the menu doesn't close in the gap above it */
    .nav__dd-menu::before { content: ''; position: absolute; bottom: 100%; left: 0; right: 0; height: 10px; }
    .nav__dd:hover .nav__dd-menu, .nav__dd:focus-within .nav__dd-menu {
      opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
    }
    .nav__mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
    .nav__dd-item {
      display: flex;
      align-items: flex-start;
      gap: 0.8rem;
      padding: 0.85rem;
      border-radius: 12px;
      color: var(--grey);
      transition: background 0.2s var(--ease);
    }
    .nav__dd-item:hover { background: rgba(255,255,255,0.05); }
    .nav__dd-item.is-active { background: rgba(226,58,46,0.1); }
    .nav__dd-item .dd-icon {
      flex-shrink: 0;
      width: 42px; height: 42px;
      display: grid; place-items: center;
      background: rgba(226,58,46,0.1);
      border: 1px solid rgba(226,58,46,0.25);
      border-radius: 11px;
      color: var(--red);
      transition: background 0.2s var(--ease), color 0.2s var(--ease);
    }
    .nav__dd-item:hover .dd-icon { background: var(--red); color: #fff; }
    .nav__dd-item .dd-icon svg { width: 20px; height: 20px; }
    .nav__dd-item .dd-title { display: block; font-weight: 600; font-size: 0.95rem; line-height: 1.25; color: var(--white); }
    .nav__dd-item .dd-sub { display: block; font-size: 0.8rem; color: var(--grey); margin-top: 3px; line-height: 1.4; }
    .nav__mega-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      margin-top: 0.4rem;
      padding: 0.85rem 0.9rem 0.4rem;
      border-top: 1px solid var(--line);
      font-size: 0.85rem;
      color: var(--grey);
    }
    .nav__mega-foot a { color: var(--red); font-weight: 600; transition: gap 0.2s var(--ease); }
    .nav__mega-foot a:hover { text-decoration: underline; }
    .nav__dd-badge {
      display: inline-block;
      margin-left: 0.4rem;
      padding: 0.05rem 0.4rem;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      background: var(--red);
      color: #fff;
      border-radius: 5px;
      vertical-align: middle;
    }

    /* Active page link: highlighted with red underline + white text */
    .nav__link.is-active { color: var(--white); }
    .nav__link.is-active::after {
      content: '';
      position: absolute;
      left: 1rem; right: 1rem; bottom: 2px;
      height: 2px;
      background: var(--red);
      border-radius: 2px;
    }
    .nav__cta {
      margin-left: 0.6rem;
      padding: 0.6rem 1.25rem;
      background: var(--red);
      color: var(--white);
      font-weight: 600;
      font-size: 0.92rem;
      border-radius: 9px;
      transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
    }
    .nav__cta:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: var(--shadow-red); }
    /* ClientZone (WHMCS client login) button */
    .nav__client {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.55rem 1.1rem;
      margin-left: 0.4rem;
      border: 1.5px solid rgba(255, 255, 255, 0.25);
      border-radius: 9px;
      font-weight: 600;
      font-size: 0.92rem;
      color: var(--white);
      transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
    }
    .nav__client svg { width: 16px; height: 16px; }
    .nav__client:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
    /* Facebook icon, top right */
    .nav__fb {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px; height: 38px;
      margin-left: 0.3rem;
      border-radius: 9px;
      color: var(--grey);
      transition: color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
    }
    .nav__fb svg { width: 21px; height: 21px; }
    .nav__fb:hover { color: var(--white); background: #1877F2; transform: translateY(-2px); }
    /* "Message us" icon variant: brand red on hover */
    .nav__msg:hover { background: var(--red); }

    /* Hamburger (mobile) */
    .nav__burger {
      display: none;
      flex-direction: column;
      gap: 5px;
      padding: 8px;
    }
    .nav__burger span {
      width: 24px; height: 2px;
      background: var(--white);
      border-radius: 2px;
      transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
    }
    .nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav__burger.is-open span:nth-child(2) { opacity: 0; }
    .nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ============================================================
       PAGE SECTIONS (SPA behaviour)
       ============================================================ */

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

    /* ---------- Shared section pieces ---------- */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--red);
    }
    .eyebrow::before {
      content: '';
      width: 24px; height: 2px;
      background: var(--red);
      border-radius: 2px;
      /* Signal concept: a steady glow (not pulsing — this bar repeats on
         every section-head sitewide, so a constant animation everywhere
         would be too busy). One shared rule, extends to every page. */
      box-shadow: 0 0 9px rgba(226,58,46,0.6);
    }
    .section { padding: 5.5rem 0; }
    .section--light { background: var(--off-white); color: var(--black); }
    .section-head { max-width: 640px; margin-bottom: 3rem; position: relative; }
    .section-head h1, .section-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0.7rem 0 0.9rem; }
    .section-head p { color: var(--grey); font-size: 1.05rem; }
    .section--light .section-head p { color: var(--grey-dark); }
    /* Signal concept: generative node-network backbone, reused as a quiet
       background accent behind service-page section-heads. Pattern shape
       (dense/radiating/sparse) is chosen per service category in JS. */
    .section-head__signal {
      position: absolute;
      right: -250px;
      top: 50%;
      transform: translateY(-50%);
      width: 260px;
      height: 220px;
      opacity: 0.6;
      pointer-events: none;
      z-index: -1;
    }
    @media (max-width: 1180px) { .section-head__signal { display: none; } }

    /* ---------- Buttons ---------- */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.95rem 1.9rem;
      border-radius: 11px;
      font-weight: 600;
      font-size: 1rem;
      transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
    }
    /* --red-dark used at rest (not just on hover) — it's the shade that
       actually clears 4.5:1 contrast with white text; plain --red is 4.3:1. */
    .btn--red { background: var(--red-dark); color: var(--white); }
    .btn--red:hover { background: var(--red); transform: translateY(-3px); box-shadow: var(--shadow-red); }
    .btn--ghost { border: 1.5px solid rgba(255,255,255,0.25); color: var(--white); }
    .btn--ghost:hover { border-color: var(--red); color: var(--red); transform: translateY(-3px); }
    .btn svg { width: 18px; height: 18px; }

    /* ============================================================
       HOME — HERO
       ============================================================ */
    .hero {
      position: relative;
      min-height: calc(100vh - var(--nav-h));
      display: flex;
      align-items: center;
      padding: 5rem 0 6rem;
      /* Fallback image behind the background video (the dark gradient
         lives on .hero__shade so it covers the video too) */
      background: url('https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=1600&fit=crop&q=70') center / cover no-repeat;
    }
    /* Background video: scrubbed by mouse movement on desktop,
       plays normally on mobile. Sits above the fallback image,
       below the dark shade and the content. */
    .hero__video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: right bottom;
      z-index: 0;
      pointer-events: none;
    }
    /* dark shade over the video so the text stays readable — brightened
       2026-08-16 (back toward the pre-Signal-hero level) after removing
       the node-network canvas, so the mouse-scrub figure is the hero's
       visual subject again instead of being pushed into the background. */
    .hero__shade {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(100deg, rgba(14,12,10,0.96) 0%, rgba(14,12,10,0.82) 45%, rgba(14,12,10,0.55) 100%);
      pointer-events: none;
    }
    .hero .container { position: relative; z-index: 2; }
    /* On phones/tablets the portrait crop would push the figure off-frame:
       re-centre the video on the figure (it sits ~62% across the source) */
    @media (max-width: 1023px) {
      .hero__video { object-position: 68% center; }
      .hero__shade { background: linear-gradient(180deg, rgba(14,12,10,0.9) 0%, rgba(14,12,10,0.6) 55%, rgba(14,12,10,0.78) 100%); }
      /* Shown briefly while the video is fetched/decoded (see JS) — a
         phone-sized fallback instead of the 1600px desktop crop. */
      .hero { background-image: url('https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&fit=crop&q=65'); }
    }
    /* subtle red glow accent in the corner */
    .hero::after {
      content: '';
      position: absolute;
      right: -180px; top: -180px;
      width: 480px; height: 480px;
      background: radial-gradient(circle, rgba(226,58,46,0.22), transparent 65%);
      pointer-events: none;
      z-index: 1;
    }
    .hero__content { position: relative; z-index: 1; max-width: 680px; }
    .hero__badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.45rem 1rem;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,0.05);
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--grey);
      margin-bottom: 1.6rem;
      animation: fadeUp 0.7s var(--ease) both;
    }
    .hero__badge .dot {
      position: relative;
      width: 8px; height: 8px;
      background: var(--red);
      border-radius: 50%;
    }
    /* Composited pulse (transform + opacity only, no box-shadow) so the
       animation runs on its own GPU layer instead of repainting each frame. */
    .hero__badge .dot::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: rgba(226,58,46,0.6);
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0%   { transform: scale(1); opacity: 0.6; }
      100% { transform: scale(3.2); opacity: 0; }
    }
    .hero h1 {
      font-size: clamp(2.4rem, 6vw, 4.2rem);
      font-weight: 700;
      margin-bottom: 1.3rem;
      animation: fadeUp 0.7s 0.1s var(--ease) both;
    }
    .hero h1 .accent { color: var(--red); }
    .hero__sub {
      font-size: 1.15rem;
      color: var(--grey);
      max-width: 540px;
      margin-bottom: 2.3rem;
      animation: fadeUp 0.7s 0.2s var(--ease) both;
    }
    .hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      animation: fadeUp 0.7s 0.3s var(--ease) both;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ---------- Typewriter headline ---------- */
    .hero h1 { white-space: pre-wrap; min-height: 2.3em; }
    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
    .type-cursor {
      display: inline-block;
      width: 2px; height: 1.05em;
      background: var(--white);
      vertical-align: middle;
      margin-left: 3px;
      animation: blink 1s step-end infinite;
    }

    /* ---------- Interactive service picker ---------- */
    .picker {
      margin-top: 3rem;
      max-width: 640px;
      animation: fadeUp 0.7s 0.45s var(--ease) both;
    }
    .picker h2 { font-size: 1.35rem; margin-bottom: 0.25rem; }
    .picker__sub { color: var(--grey); font-size: 0.95rem; margin-bottom: 1.2rem; }
    .pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.6rem 1.15rem;
      border-radius: 999px;
      font-weight: 500;
      font-size: 0.95rem;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--line);
      color: var(--white);
      transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
                  transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
    }
    .pill:hover { background: rgba(255, 255, 255, 0.13); transform: translateY(-2px); }
    .pill.is-selected {
      background: var(--red);
      border-color: var(--red);
      color: var(--white);
      box-shadow: var(--shadow-red);
    }
    .pill svg { width: 15px; height: 15px; display: none; }
    .pill.is-selected svg { display: inline-block; animation: popIn 0.35s var(--ease) both; }
    @keyframes popIn {
      0%   { transform: scale(0); }
      60%  { transform: scale(1.3); }
      100% { transform: scale(1); }
    }

    /* Status area under the pills: hint ↔ ready banner */
    .picker__status { margin-top: 1.1rem; }
    .picker__status [hidden] { display: none !important; }
    .picker__hint { font-size: 0.8rem; font-style: italic; color: var(--grey); opacity: 0.55; }
    .picker__banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      background: rgba(23, 23, 26, 0.88);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 0.9rem 1.2rem;
      animation: bannerIn 0.35s var(--ease) both;
    }
    @keyframes bannerIn {
      from { opacity: 0; transform: translateY(8px) scale(0.98); }
      to   { opacity: 1; transform: none; }
    }
    .picker__banner p { font-size: 0.92rem; color: var(--grey); }
    .picker__banner strong { color: var(--white); font-weight: 600; }
    .picker__go {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--red);
      transition: gap 0.25s var(--ease), color 0.25s var(--ease);
    }
    .picker__go:hover { gap: 0.75rem; color: #f0604f; }
    .picker__go svg { width: 15px; height: 15px; }

    /* Stats strip under hero */
    .stats {
      /* Signal concept: same faint red hairline as the nav, so the strip
         reads as part of the same "live" system instead of a plain divider */
      border-top: 1px solid rgba(226,58,46,0.14);
      border-bottom: 1px solid rgba(226,58,46,0.14);
      background: var(--ink);
    }
    .stat__dot {
      display: block;
      width: 5px; height: 5px;
      margin: 0 auto 0.7rem;
      background: var(--red);
      border-radius: 50%;
      position: relative;
    }
    .stat__dot::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: rgba(226,58,46,0.6);
      animation: pulse 2s infinite;
    }
    @media (prefers-reduced-motion: reduce) { .stat__dot::after { animation: none; } }
    .stats__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    .stat {
      padding: 2.2rem 1rem;
      text-align: center;
      border-left: 1px solid var(--line);
    }
    .stat:first-child { border-left: none; }
    .stat__num {
      font-family: var(--font-head);
      font-size: clamp(1.7rem, 3.5vw, 2.5rem);
      font-weight: 700;
      color: var(--red);
    }
    .stat__label { font-size: 0.9rem; color: var(--grey); margin-top: 0.2rem; }

    /* Gold rating stars — pop in one after another when scrolled into view */
    .stat__stars { display: inline-flex; gap: 0.08em; line-height: 1; }
    .stat__stars span {
      background: linear-gradient(160deg, #ffdc73 0%, #f5b301 45%, #e59700 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 2px 6px rgba(245, 179, 1, 0.45));
      opacity: 0;
      transform: scale(0.3) rotate(-45deg);
    }
    .stat__stars.is-in span { animation: starPop 0.55s var(--ease) forwards; }
    .stat__stars.is-in span:nth-child(1) { animation-delay: 0.00s; }
    .stat__stars.is-in span:nth-child(2) { animation-delay: 0.11s; }
    .stat__stars.is-in span:nth-child(3) { animation-delay: 0.22s; }
    .stat__stars.is-in span:nth-child(4) { animation-delay: 0.33s; }
    .stat__stars.is-in span:nth-child(5) { animation-delay: 0.44s; }
    @keyframes starPop {
      0%   { opacity: 0; transform: scale(0.3) rotate(-45deg); }
      65%  { opacity: 1; transform: scale(1.25) rotate(6deg); }
      100% { opacity: 1; transform: scale(1) rotate(0deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .stat__stars span { opacity: 1; transform: none; animation: none !important; }
      .reveal, .reveal--card { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
      .section-head.reveal .eyebrow::before { width: 24px !important; transition: none !important; }
    }

    /* ============================================================
       SCROLL REVEAL — fade + rise once, the first time a block
       scrolls into view. transform/opacity only: the element's
       normal box already reserves its full layout space, so this
       only changes paint, never triggers a reflow or shifts CLS.
       ============================================================ */
    /* NOTE: the per-item delay is folded directly into each comma-separated
       transition value below (var(--reveal-i) * 70ms) rather than declared
       as a separate `transition-delay:` line. That split form parses fine
       in most engines, but reproducibly corrupts the shorthand's other
       longhands (transition-property/duration/timing-function silently end
       up empty) in this environment — confirmed via cssRules inspection —
       which meant the transform/filter reset on .is-in never actually
       transitioned. Keeping delay inline avoids the whole class of bug. */
    /* Stagger step is a variable so it can shrink on narrow screens — see
       the responsive override below for why that matters. */
    /* The doubled class (.reveal.reveal) is deliberate, not a typo. Cards,
       services, values and contact cards each declare their own `transition`
       for hover effects, at the same (0,1,0) specificity as a single .reveal
       and LATER in this stylesheet — so they were silently replacing this
       whole transition, leaving opacity/filter with no transition at all and
       making the reveal snap instead of animate. Doubling the class lifts
       these to (0,2,0) so the reveal wins while it is running; the classes
       are then stripped once it finishes (see the JS) to hand hover styling
       back to the component untouched. */
    .reveal.reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.7s var(--ease) calc(var(--reveal-i, 0) * var(--reveal-step, 70ms)),
                  transform 0.7s var(--ease) calc(var(--reveal-i, 0) * var(--reveal-step, 70ms));
    }
    .reveal.reveal.is-in { opacity: 1; transform: none; }

    /* Card-grid variant: a more tactile pop — slight scale-up and a
       blur-to-focus sweep alongside the same rise, instead of the plain
       fade used for text blocks (section heads, FAQ, CTA bands). Reserved
       for boxed content (price/service/value cards) where the extra
       motion reads as intentional rather than busy. */
    .reveal--card.reveal--card {
      opacity: 0;
      transform: translateY(28px) scale(0.95);
      filter: blur(6px);
      transition: opacity 0.7s var(--ease) calc(var(--reveal-i, 0) * var(--reveal-step, 70ms)),
                  transform 0.7s var(--ease) calc(var(--reveal-i, 0) * var(--reveal-step, 70ms)),
                  filter 0.7s var(--ease) calc(var(--reveal-i, 0) * var(--reveal-step, 70ms));
    }
    .reveal--card.reveal--card.is-in { opacity: 1; transform: none; filter: blur(0); }

    /* The stagger exists to cascade items that enter the viewport TOGETHER,
       which is what happens in a multi-column grid. Once those same grids
       collapse to a single column on narrow screens, each item enters alone
       and its delay stops being a cascade — it is just dead time where a
       card is on screen but still blank (the 7th pricing card was sitting
       invisible for 420ms before even starting its 0.7s fade). So the step
       shrinks as columns are lost, and goes to zero once fully stacked. */
    @media (max-width: 900px) { :root { --reveal-step: 35ms; } }
    @media (max-width: 640px) { :root { --reveal-step: 0ms; } }

    /* The eyebrow's little accent bar draws in left-to-right the moment
       its parent .section-head reveals, instead of just appearing full-size. */
    .section-head .eyebrow::before { transition: width 0.5s var(--ease) 0.15s; }
    .section-head.reveal .eyebrow::before { width: 0; }
    .section-head.reveal.is-in .eyebrow::before { width: 24px; }

    /* Home — highlights (what we do, teaser) */
    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.4rem;
    }
    .card {
      background: var(--ink);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 2rem 1.7rem;
      transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
    }
    .card:hover {
      transform: translateY(-6px);
      border-color: rgba(226,58,46,0.55);
      box-shadow: 0 18px 40px -18px rgba(0,0,0,0.6);
    }
    .card__icon {
      width: 52px; height: 52px;
      display: grid; place-items: center;
      background: rgba(226,58,46,0.12);
      border: 1px solid rgba(226,58,46,0.3);
      border-radius: 12px;
      color: var(--red);
      margin-bottom: 1.2rem;
    }
    .card__icon svg { width: 26px; height: 26px; }
    .card h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
    .card p { font-size: 0.95rem; color: var(--grey); }

    /* Home — CTA band */
    .cta-band {
      position: relative;
      overflow: hidden;
      background: var(--red);
      border-radius: 20px;
      padding: 3.5rem 3rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      flex-wrap: wrap;
    }
    .cta-band::before {
      content: '';
      position: absolute;
      left: -60px; bottom: -120px;
      width: 300px; height: 300px;
      background: radial-gradient(circle, rgba(0,0,0,0.25), transparent 70%);
    }
    .cta-band h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); max-width: 520px; }
    .cta-band p { opacity: 0.9; margin-top: 0.4rem; }

    /* Home — centred contact form, replaces the plain CTA band on the
       homepage only (every other page keeps .cta-band unchanged). */
    .home-contact {
      max-width: 580px;
      margin: 0 auto;
      position: relative;
      background: var(--ink);
      border: 1px solid rgba(226,58,46,0.22);
      border-radius: 22px;
      padding: 3rem 2.8rem;
      overflow: hidden;
    }
    .home-contact::before {
      content: '';
      position: absolute;
      right: -120px; top: -120px;
      width: 320px; height: 320px;
      background: radial-gradient(circle, rgba(226,58,46,0.16), transparent 65%);
      pointer-events: none;
    }
    .home-contact__head { position: relative; text-align: center; margin-bottom: 2rem; }
    .home-contact__head .eyebrow { justify-content: center; }
    .home-contact__head h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin: 0.6rem 0 0.6rem; }
    .home-contact__head p { color: var(--grey); max-width: 420px; margin-inline: auto; }
    .home-contact__form { position: relative; }
    @media (max-width: 640px) {
      .home-contact { padding: 2.2rem 1.6rem; }
    }
    .btn--onred { background: var(--black); color: var(--white); }
    .btn--onred:hover { background: #1e1e22; transform: translateY(-3px); box-shadow: 0 12px 28px -10px rgba(0,0,0,0.5); }

    /* ============================================================
       ABOUT
       ============================================================ */
    .about-grid {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 4rem;
      align-items: start;
    }
    .about-copy p { color: var(--grey-dark); margin-bottom: 1.1rem; font-size: 1.03rem; }
    .about-copy strong { color: var(--black); }
    .about-facts {
      display: grid;
      gap: 1rem;
      margin-top: 1.8rem;
    }
    .fact {
      display: flex;
      align-items: center;
      gap: 0.9rem;
      background: var(--white);
      border: 1px solid var(--line-light);
      border-radius: 12px;
      padding: 1rem 1.2rem;
      font-weight: 500;
      transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
    }
    .fact:hover { transform: translateX(6px); border-color: rgba(226,58,46,0.4); }
    .fact__icon {
      flex-shrink: 0;
      width: 40px; height: 40px;
      display: grid; place-items: center;
      background: rgba(226,58,46,0.1);
      border-radius: 10px;
      color: var(--red);
    }
    .fact__icon svg { width: 20px; height: 20px;
    }

    .values {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.1rem;
    }
    .value {
      background: var(--white);
      border: 1px solid var(--line-light);
      border-left: 4px solid var(--red);
      border-radius: 12px;
      padding: 1.4rem 1.4rem 1.25rem;
      transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
    }
    .value:hover { transform: translateY(-5px); box-shadow: 0 14px 32px -16px rgba(14,12,10,0.25); }
    .value h3 {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      font-size: 1.02rem;
      margin-bottom: 0.45rem;
    }
    .value__icon { width: 19px; height: 19px; flex-shrink: 0; color: var(--red); }
    .value p { font-size: 0.9rem; color: var(--grey-dark); }
    .value--wide { grid-column: 1 / -1; }

    /* ============================================================
       SERVICES
       ============================================================ */
    /* Flex so an incomplete last row centres instead of leaving an orphan */
    .services-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1.4rem;
    }
    .services-grid .service { flex: 0 1 calc(33.333% - 0.94rem); }
    .service {
      position: relative;
      overflow: hidden;
      background: var(--ink);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 2.1rem 1.8rem;
      transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
    }
    /* red sweep accent that grows on hover */
    .service::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 3px;
      background: var(--red);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.35s var(--ease);
    }
    .service:hover { transform: translateY(-6px); border-color: rgba(226,58,46,0.5); }
    .service:hover::before { transform: scaleX(1); }
    .service__num {
      position: absolute;
      top: 1.3rem; right: 1.5rem;
      font-family: var(--font-head);
      font-size: 0.85rem;
      font-weight: 600;
      color: rgba(255,255,255,0.18);
      letter-spacing: 0.08em;
    }
    .service__icon {
      width: 54px; height: 54px;
      display: grid; place-items: center;
      background: rgba(226,58,46,0.12);
      border: 1px solid rgba(226,58,46,0.3);
      border-radius: 13px;
      margin-bottom: 1.3rem;
      color: var(--red);
      transition: box-shadow 0.3s var(--ease);
    }
    .service:hover .service__icon { box-shadow: 0 0 18px rgba(226,58,46,0.55); }
    .service__icon svg { width: 26px; height: 26px; }
    .service h3 { font-size: 1.18rem; margin-bottom: 0.6rem; }
    .service p { font-size: 0.94rem; color: var(--grey); }
    .service--featured {
      grid-column: span 2;
      background: linear-gradient(135deg, var(--ink) 40%, rgba(226,58,46,0.14));
    }

    /* ============================================================
       CONTACT
       ============================================================ */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.4rem;
    }
    .contact-card {
      background: var(--ink);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 2.5rem 2.2rem;
      text-align: center;
      transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
    }
    .contact-card:hover { transform: translateY(-6px); border-color: rgba(226,58,46,0.5); }
    .contact-card:hover .contact-card__icon { box-shadow: 0 0 18px rgba(226,58,46,0.5); }
    .contact-card__icon {
      width: 64px; height: 64px;
      margin: 0 auto 1.3rem;
      display: grid; place-items: center;
      background: rgba(226,58,46,0.12);
      border: 1px solid rgba(226,58,46,0.3);
      transition: box-shadow 0.3s var(--ease);
      border-radius: 16px;
      color: var(--red);
    }
    .contact-card__icon svg { width: 30px; height: 30px; }
    .contact-card h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
    .contact-card p { color: var(--grey); font-size: 0.95rem; margin-bottom: 1.5rem; }
    .contact-note {
      margin-top: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.7rem;
      background: var(--ink);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 1.4rem;
      color: var(--grey);
      font-size: 0.98rem;
      grid-column: 1 / -1;
    }
    .contact-note strong { color: var(--white); }

    /* ============================================================
       FOOTER
       ============================================================ */
    .footer {
      background: #08080a;
      border-top: 1px solid var(--line);
      padding: 3.5rem 0 2rem;
    }
    .footer__grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr 1fr 1fr;
      gap: 2.5rem;
      margin-bottom: 2.5rem;
    }
    .footer h3 {
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--grey);
      margin-bottom: 1rem;
    }
    .footer__brand p { color: var(--grey); font-size: 0.93rem; max-width: 320px; margin-top: 0.8rem; }
    .footer ul { list-style: none; display: grid; gap: 0.55rem; }
    .footer ul a, .footer ul span { font-size: 0.94rem; color: var(--grey); transition: color 0.25s var(--ease); }
    .footer ul a:hover { color: var(--red); }
    .footer__bottom {
      border-top: 1px solid var(--line);
      padding-top: 1.6rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
      font-size: 0.85rem;
      color: var(--grey);
    }
    .footer__bottom .heart { color: var(--red); }

    /* ============================================================
       REMOTE IT SUPPORT — page pieces
       ============================================================ */
    .remote-intro { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 3.5rem; }
    .remote-feat {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding: 1.4rem 1.2rem;
      background: var(--ink);
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }
    .remote-feat__icon { color: var(--red); }
    .remote-feat__icon svg { width: 28px; height: 28px; }
    .remote-feat h4 { font-size: 0.98rem; }
    .remote-feat p { font-size: 0.85rem; color: var(--grey); }

    .price-block-title {
      display: flex;
      align-items: baseline;
      gap: 0.6rem;
      flex-wrap: wrap;
      font-family: var(--font-head);
      font-size: 1.5rem;
      margin: 0 0 0.4rem;
    }
    .price-block-title .tag { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--red); }
    .price-block-sub { color: var(--grey); font-size: 0.98rem; margin-bottom: 2rem; }

    .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: start; }
    .price-card {
      position: relative;
      display: flex;
      flex-direction: column;
      background: var(--ink);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 2rem 1.7rem;
      transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
    }
    .price-card:hover { transform: translateY(-6px); border-color: rgba(226,58,46,0.5); box-shadow: 0 20px 44px -20px rgba(0,0,0,0.6); }
    .price-card--popular {
      border-color: var(--red);
      background: linear-gradient(180deg, rgba(226,58,46,0.12), var(--ink) 55%);
    }
    /* Signal concept: the featured card gets a red-tinted glow on hover
       instead of the generic dark elevation shadow every other card gets */
    .price-card--popular:hover { box-shadow: 0 20px 50px -18px rgba(226,58,46,0.5); }
    .price-card__badge {
      position: absolute;
      top: -12px; left: 50%;
      transform: translateX(-50%);
      background: var(--red);
      color: #fff;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.3rem 0.9rem;
      border-radius: 999px;
      box-shadow: var(--shadow-red), 0 0 14px rgba(226,58,46,0.6);
      white-space: nowrap;
    }
    .price-card__name { font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; margin-bottom: 0.4rem; }
    .price-card__price { font-family: var(--font-head); font-size: 2.3rem; font-weight: 700; color: var(--white); line-height: 1; }
    .price-card__price .cur { font-size: 1.3rem; vertical-align: top; color: var(--red); }
    .price-card__price .per { display: block; font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; color: var(--grey); margin-top: 0.35rem; }
    .price-card__list { list-style: none; margin: 1.4rem 0 1.7rem; display: grid; gap: 0.6rem; flex: 1; }
    .price-card__list li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.9rem; color: var(--grey); }
    .price-card__list li strong { color: var(--white); font-weight: 600; }
    .price-card__list svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--red); }
    .price-card .btn { justify-content: center; width: 100%; }

    /* Pricing CTA buttons (Order Now / Book X / Get X) — glowing pulse +
       light-sweep shimmer on hover. overflow:hidden clips the shimmer to
       the button's rounded corners; box-shadow itself is never clipped
       by an element's own overflow, so the outer glow still reads. */
    .price-card .btn { position: relative; overflow: hidden; }
    .price-card .btn::after {
      content: '';
      position: absolute;
      top: 0;
      left: -60%;
      width: 40%;
      height: 100%;
      background: linear-gradient(115deg, transparent, rgba(255,255,255,0.4), transparent);
      transform: skewX(-20deg);
      transition: left 0.65s var(--ease);
      pointer-events: none;
    }
    .price-card .btn:hover::after { left: 130%; }
    .price-card .btn--ghost:hover,
    .price-card .btn--red:hover {
      animation: priceBtnGlow 1.6s ease-in-out infinite;
    }
    @keyframes priceBtnGlow {
      0%, 100% { box-shadow: 0 0 0 1px rgba(226,58,46,0.5), 0 8px 22px -6px rgba(226,58,46,0.5), 0 0 20px 1px rgba(226,58,46,0.35); }
      50%      { box-shadow: 0 0 0 1px rgba(226,58,46,0.8), 0 10px 30px -6px rgba(226,58,46,0.75), 0 0 36px 6px rgba(226,58,46,0.6); }
    }
    @media (prefers-reduced-motion: reduce) {
      .price-card .btn::after { display: none; }
      .price-card .btn--ghost:hover, .price-card .btn--red:hover { animation: none; box-shadow: 0 0 0 1px rgba(226,58,46,0.6), 0 8px 22px -6px rgba(226,58,46,0.55); }
    }
    .price-note { margin-top: 1.6rem; font-size: 0.88rem; color: var(--grey); text-align: center; }
    .price-note strong { color: var(--white); }

    /* Price cards on a LIGHT section (Monthly Support Plans) — white cards,
       dark readable text, red accents. Overrides the dark-theme defaults. */
    .section--light .price-card {
      background: #ffffff;
      border-color: var(--line-light);
      box-shadow: 0 14px 36px -18px rgba(14, 12, 10, 0.28);
    }
    .section--light .price-card:hover { border-color: rgba(226,58,46,0.55); }
    .section--light .price-card--popular {
      background: linear-gradient(180deg, rgba(226, 58, 46, 0.08), #ffffff 55%);
      border-color: var(--red);
      box-shadow: 0 18px 40px -16px rgba(226, 58, 46, 0.28);
    }
    .section--light .price-card__name,
    .section--light .price-card__price { color: var(--black); }
    .section--light .price-card__price .cur { color: var(--red); }
    .section--light .price-card__price .per { color: var(--grey-dark); }
    .section--light .price-card__list li { color: var(--grey-dark); }
    .section--light .price-card__list li strong { color: var(--black); }
    .section--light .price-card .btn--ghost { border-color: rgba(14, 12, 10, 0.22); color: var(--black); }
    .section--light .price-card .btn--ghost:hover { border-color: var(--red); color: var(--red); }
    .section--light .price-note { color: var(--grey-dark); }
    .section--light .price-note strong { color: var(--black); }

    /* Two-card centred pricing row (email packages) */
    .price-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin-inline: auto; }

    /* Small price note under a card's price (e.g. domain + hosting breakdown) */
    .price-card__break {
      font-size: 0.82rem;
      color: var(--grey);
      margin-top: 0.6rem;
      line-height: 1.5;
    }
    .price-card__break span { color: var(--white); font-weight: 600; }

    /* Small "Starting from" label above a price-card's price */
    .price-card__from { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey); margin-bottom: 0.15rem; }
    .section--light .price-card__from { color: var(--grey-dark); }
    .price-card__was { font-size: 0.95rem; color: var(--grey); text-decoration: line-through; margin-bottom: 0.15rem; }
    .section--light .price-card__was { color: var(--grey-dark); }
    .price-card__best { color: var(--grey); font-size: 0.88rem; margin: 0.5rem 0 1.2rem; flex: 1; }
    .section--light .price-card__best { color: var(--grey-dark); }

    /* ---------- Service card "See plans & pricing" toggle (Services page) ---------- */
    .svc-toggle {
      display: flex; align-items: center; gap: 0.5rem;
      margin-top: 0.9rem;
      background: none; border: none; padding: 0; cursor: pointer;
      color: var(--red); font-weight: 600; font-size: 0.92rem; font-family: var(--font-body);
    }
    .svc-toggle:hover { text-decoration: underline; }
    .svc-toggle__chev { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.3s var(--ease); }
    .svc-toggle[aria-expanded="true"] .svc-toggle__chev { transform: rotate(180deg); }
    .svc-panel { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line-light, var(--line)); }
    .svc-panel[hidden] { display: none; }
    .svc-panel__note { font-size: 0.82rem; color: var(--grey); margin-bottom: 1rem; line-height: 1.6; }
    .section--light .svc-panel__note { color: var(--grey-dark); }
    .svc-pricing {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
    }
    .svc-pricing .price-card { padding: 1.4rem 1.3rem; }
    .svc-pricing .price-card__name { font-size: 1.05rem; }
    .svc-pricing .price-card__price { font-size: 1.8rem; }

    /* ---------- Technical support calculator ---------- */
    .calc {
      max-width: 500px;
      margin: 0 auto;
      background: var(--ink);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 2.2rem 2rem;
      text-align: center;
      color: var(--white);   /* keep text light — the card is dark on any section */
    }
    .calc h4 { font-size: 1.3rem; margin-bottom: 0.5rem; }
    .calc__intro { font-size: 0.92rem; color: var(--grey); margin-bottom: 1.7rem; }
    .calc__intro strong { color: var(--red); }
    .calc__control {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.3rem;
      text-align: left;
    }
    .calc__label { font-weight: 600; font-size: 0.95rem; }
    .calc__label small { display: block; font-weight: 400; font-size: 0.78rem; color: var(--grey); }
    .calc__stepper { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
    .calc__btn {
      width: 42px; height: 42px;
      border-radius: 11px;
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--line);
      color: var(--white);
      font-size: 1.4rem; line-height: 1;
      display: grid; place-items: center;
      transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
    }
    .calc__btn:hover { background: var(--red); border-color: var(--red); }
    .calc__input {
      width: 62px; height: 42px;
      text-align: center;
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--line);
      border-radius: 11px;
      color: var(--white);
      font: inherit; font-size: 1.05rem; font-weight: 700;
      -moz-appearance: textfield;
    }
    .calc__input::-webkit-outer-spin-button, .calc__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .calc__total {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1rem 1.3rem;
      background: rgba(226,58,46,0.1);
      border: 1px solid rgba(226,58,46,0.3);
      border-radius: 13px;
      margin-bottom: 1.4rem;
      font-weight: 600;
    }
    .calc__amount { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; color: var(--red); }
    .calc .btn { width: 100%; justify-content: center; }
    .calc__note { font-size: 0.8rem; color: var(--grey); margin-top: 1rem; }

    /* ---------- Explainer video (Google Maps page) ---------- */
    .maps-video {
      max-width: 860px;
      margin: 0 auto;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid var(--line);
      background: #000;
      box-shadow: 0 24px 60px -24px rgba(0,0,0,0.7);
      aspect-ratio: 16 / 9;
    }
    .maps-video video { width: 100%; height: 100%; display: block; object-fit: cover; }

    /* ============================================================
       PORTFOLIO — project grid + case-study modal
       Cards are rendered from the PORTFOLIO array in JS, so adding
       work means editing one list, not writing markup.
       ============================================================ */
    .pf-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .pf-card {
      display: flex; flex-direction: column;
      background: var(--ink);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      cursor: pointer;
      text-align: left;
      transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease);
    }
    .pf-card:hover {
      transform: translateY(-6px);
      border-color: rgba(226,58,46,0.5);
      box-shadow: 0 20px 44px -20px rgba(0,0,0,0.6);
    }
    .pf-card__media {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: #101013;
    }
    .pf-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform 0.5s var(--ease); }
    .pf-card:hover .pf-card__media img { transform: scale(1.05); }
    /* Placeholder shown until a real screenshot is dropped in */
    .pf-ph {
      position: absolute; inset: 0;
      display: grid; place-items: center;
      background: linear-gradient(135deg, rgba(226,58,46,0.18), #141417 60%);
      color: var(--grey);
      text-align: center;
      padding: 1rem;
    }
    .pf-ph__initial {
      font-family: var(--font-head); font-weight: 700;
      font-size: 2.6rem; color: rgba(255,255,255,0.85);
      line-height: 1;
    }
    .pf-ph__note { font-size: 0.72rem; margin-top: 0.5rem; opacity: 0.75; }
    .pf-card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
    .pf-card__ind { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--red); }
    .pf-card__name { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; }
    .pf-card__sum { font-size: 0.88rem; color: var(--grey); line-height: 1.6; flex: 1; }
    .pf-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; }
    .pf-tag {
      font-size: 0.7rem; font-weight: 600;
      padding: 0.24rem 0.55rem;
      border-radius: 6px;
      background: rgba(255,255,255,0.07);
      border: 1px solid var(--line);
      color: var(--grey);
    }
    .pf-empty { text-align: center; color: var(--grey); padding: 3rem 1rem 2.5rem; }
    .pf-empty__title { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--white); margin: 1rem 0 0.4rem; }
    .pf-empty__sub { max-width: 380px; margin: 0 auto; font-size: 0.92rem; line-height: 1.6; }

    /* Case-study modal (reuses .czmodal shell, just wider) */
    .czmodal__panel--pf {
      width: min(860px, 94vw);
      max-height: 88vh;
      text-align: left;
      padding: 0;
      overflow: hidden;
      display: flex; flex-direction: column;
    }
    .pf-modal__scroll { overflow-y: auto; padding: 2rem 2.1rem 2.2rem; }
    .pf-modal__shot { width: 100%; border-radius: 12px; border: 1px solid var(--line); display: block; margin-bottom: 1.4rem; }
    .pf-modal__ph { aspect-ratio: 16/10; border-radius: 12px; margin-bottom: 1.4rem; position: relative; overflow: hidden; }
    .pf-modal__ind { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--red); }
    .pf-modal__scroll h3 { font-size: 1.6rem; margin: 0.3rem 0 0.7rem; }
    .pf-modal__scroll p { color: var(--grey); font-size: 0.95rem; line-height: 1.7; }
    .pf-modal__result {
      margin: 1.2rem 0;
      padding: 1rem 1.2rem;
      border-left: 3px solid var(--red);
      background: rgba(226,58,46,0.08);
      border-radius: 0 10px 10px 0;
    }
    .pf-modal__result strong { color: var(--white); }
    .pf-modal__quote { margin: 1.2rem 0; padding-left: 1.1rem; border-left: 2px solid var(--line); font-style: italic; color: var(--grey); }
    .pf-modal__quote cite { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.83rem; color: var(--white); }
    .pf-modal__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-size: 0.83rem; color: var(--grey); margin-bottom: 1.2rem; }
    .pf-modal__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }

    @media (max-width: 900px) { .pf-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px) {
      .pf-grid { grid-template-columns: 1fr; }
      .pf-modal__scroll { padding: 1.5rem 1.2rem 1.7rem; }
      .pf-modal__actions .btn { width: 100%; justify-content: center; }
    }

    /* ---------- AnyDesk download strip (remote-session helper) ---------- */
    .anydesk {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      flex-wrap: wrap;
      background: var(--ink);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 1.7rem 2rem;
    }
    .anydesk__text { display: flex; align-items: center; gap: 1rem; }
    .anydesk__icon {
      flex-shrink: 0;
      width: 48px; height: 48px;
      display: grid; place-items: center;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 10px -3px rgba(0,0,0,0.5);
    }
    .anydesk__icon svg { width: 27px; height: 27px; }
    .anydesk__brand { color: #EF443B; }
    .anydesk__text h4 { font-size: 1.1rem; margin-bottom: 0.2rem; }
    .anydesk__text p { font-size: 0.9rem; color: var(--grey); max-width: 480px; }
    .anydesk .btn { flex-shrink: 0; }
    .anydesk .btn svg { width: 18px; height: 18px; }
    @media (max-width: 640px) { .anydesk { flex-direction: column; text-align: center; align-items: stretch; } .anydesk__text { flex-direction: column; } .anydesk .btn { justify-content: center; } }

    /* ---------- Domain search band (WHMCS domain ordering) ---------- */
    .domain-band {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      flex-wrap: wrap;
      background: linear-gradient(135deg, var(--ink) 40%, rgba(226,58,46,0.14));
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 2rem 2.4rem;
    }
    .domain-band__head { display: flex; align-items: center; gap: 1.1rem; }
    .domain-band__icon {
      flex-shrink: 0;
      width: 58px; height: 58px;
      display: grid; place-items: center;
      color: var(--red);
      background: rgba(226,58,46,0.12);
      border: 1px solid rgba(226,58,46,0.3);
      border-radius: 15px;
    }
    .domain-band h3 { font-size: 1.4rem; margin-bottom: 0.2rem; }
    .domain-band p { color: var(--grey); font-size: 0.95rem; }
    .domain-form { display: flex; gap: 0.6rem; flex: 1; min-width: 280px; max-width: 470px; }
    .domain-form input {
      flex: 1; min-width: 0;
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 0.9rem 1.1rem;
      color: var(--white);
      font: inherit; font-size: 0.95rem;
      outline: none;
    }
    .domain-form input::placeholder { color: var(--grey); }
    .domain-form input:focus { border-color: rgba(226,58,46,0.65); }
    .domain-form button {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: var(--red); color: #fff;
      border-radius: 12px;
      padding: 0 1.7rem;
      font-family: var(--font-head);
      font-weight: 600; font-size: 0.95rem;
      white-space: nowrap;
      transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
    }
    .domain-form button:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: var(--shadow-red); }
    .domain-form button svg { width: 16px; height: 16px; }
    /* Glowing pulse + shimmer sweep on hover, same treatment as the
       pricing CTAs — position/overflow set here, shared rules below. */
    .domain-form button { position: relative; overflow: hidden; }
    @media (max-width: 760px) {
      .domain-band { flex-direction: column; align-items: stretch; text-align: center; padding: 1.8rem; }
      .domain-band__head { flex-direction: column; text-align: center; gap: 0.7rem; }
      .domain-band__icon { margin: 0 auto; }
      .domain-form { max-width: none; }
    }

    /* ---------- Free Website Health Check (lead magnet) ---------- */
    .healthcheck-band {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2.5rem;
      flex-wrap: wrap;
      background: linear-gradient(135deg, var(--ink) 30%, rgba(226,58,46,0.16));
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 2.4rem;
    }
    .healthcheck-band__head { display: flex; align-items: flex-start; gap: 1.1rem; flex: 1 1 320px; min-width: 280px; }
    .healthcheck-band__icon {
      flex-shrink: 0;
      width: 58px; height: 58px;
      display: grid; place-items: center;
      color: var(--red);
      background: rgba(226,58,46,0.12);
      border: 1px solid rgba(226,58,46,0.3);
      border-radius: 15px;
    }
    .healthcheck-band__head h3 { font-size: 1.4rem; margin: 0.3rem 0 0.4rem; }
    .healthcheck-band__head p { color: var(--grey); font-size: 0.95rem; }
    .healthcheck-band__mid { flex: 1 1 280px; min-width: 240px; }
    .healthcheck-band__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
    .healthcheck-band__list li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: var(--white); }
    .healthcheck-band__list svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--red); }
    .healthcheck-band__cta { flex-shrink: 0; text-align: center; }
    .healthcheck-band__cta .btn { white-space: nowrap; }
    .healthcheck-band__cta small { display: block; margin-top: 0.6rem; color: var(--grey); font-size: 0.78rem; }
    @media (max-width: 900px) {
      .healthcheck-band { flex-direction: column; align-items: stretch; text-align: center; padding: 1.8rem; }
      .healthcheck-band__head { flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; }
      .healthcheck-band__list { justify-items: center; }
      .healthcheck-band__list li { justify-content: center; }
      .healthcheck-band__cta { margin: 0 auto; }
    }

    /* Extra field in the shared lead modal, shown only for the health-check flow */
    #leadWebsiteWrap[hidden] { display: none; }

    /* ---------- FAQ page ---------- */
    .faq-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 2.4rem; }
    .faq-filter {
      padding: 0.55rem 1.15rem;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.04);
      color: var(--grey);
      font-size: 0.88rem; font-weight: 500;
      transition: all 0.22s var(--ease);
    }
    .faq-filter:hover { color: var(--white); border-color: rgba(255,255,255,0.25); }
    .faq-filter.is-active { background: var(--red-dark); border-color: var(--red-dark); color: #fff; box-shadow: var(--shadow-red); }
    .faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 0.7rem; }
    .faq-item {
      background: var(--ink);
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
    }
    .faq-item[hidden] { display: none; }
    .faq-item:hover { border-color: rgba(226,58,46,0.35); }
    .faq-item.is-open { border-color: var(--red); background: linear-gradient(180deg, rgba(226,58,46,0.08), var(--ink) 60%); }
    .faq-q {
      width: 100%; display: flex; align-items: center; gap: 1rem;
      padding: 1.15rem 1.4rem; text-align: left;
      font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; color: var(--white);
    }
    .faq-q__icon { flex-shrink: 0; color: var(--red); }
    .faq-q__icon svg { width: 20px; height: 20px; }
    .faq-q__chev {
      margin-left: auto; flex-shrink: 0;
      width: 20px; height: 20px; color: var(--red);
      transition: transform 0.3s var(--ease);
    }
    .faq-item.is-open .faq-q__chev { transform: rotate(180deg); }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
    .faq-item.is-open .faq-a { max-height: 620px; }
    .faq-a__inner { padding: 0 1.4rem 1.3rem 3.55rem; }
    .faq-a p { color: var(--grey); font-size: 0.94rem; line-height: 1.7; margin-bottom: 0.7rem; }
    .faq-a p:last-child { margin-bottom: 0; }
    .faq-a strong { color: var(--white); }
    .faq-a a { color: var(--red); font-weight: 600; }
    .faq-a a:hover { text-decoration: underline; }
    .faq-a .btn { margin-top: 0.6rem; font-size: 0.9rem; padding: 0.7rem 1.5rem; }
    .faq-empty { text-align: center; color: var(--grey); padding: 2rem; }
    @media (max-width: 640px) {
      .faq-q { padding: 1rem 1.1rem; font-size: 0.95rem; gap: 0.7rem; }
      .faq-a__inner { padding: 0 1.1rem 1.1rem 1.1rem; }
    }

    /* ---------- Site search ---------- */
    .nav__search-btn:hover { background: var(--red); color: #fff; }
    .srch { position: fixed; inset: 0; z-index: 140; display: grid; place-items: start center; padding-top: 12vh; }
    .srch[hidden] { display: none; }
    .srch__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
    .srch__panel {
      position: relative;
      width: min(620px, calc(100vw - 32px));
      max-height: 70vh;
      display: flex; flex-direction: column;
      background: var(--ink);
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 30px 70px -20px rgba(0,0,0,0.85);
      animation: bannerIn 0.28s var(--ease);
    }
    .srch__inputrow { display: flex; align-items: center; gap: 0.8rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); }
    .srch__inputrow svg { width: 20px; height: 20px; color: var(--red); flex-shrink: 0; }
    .srch__input {
      flex: 1; min-width: 0;
      background: none; border: none; outline: none;
      color: var(--white); font: inherit; font-size: 1.05rem;
    }
    .srch__input::placeholder { color: var(--grey); }
    .srch__esc { font-size: 0.7rem; color: var(--grey); border: 1px solid var(--line); border-radius: 6px; padding: 0.2rem 0.45rem; }
    .srch__results { overflow-y: auto; padding: 0.5rem; }
    .srch__hint { padding: 1.6rem 1.3rem; text-align: center; color: var(--grey); font-size: 0.9rem; }
    .srch__item {
      display: block; width: 100%; text-align: left;
      padding: 0.8rem 0.95rem; border-radius: 11px;
      transition: background 0.18s var(--ease);
    }
    .srch__item:hover, .srch__item.is-sel { background: rgba(226,58,46,0.14); }
    .srch__item-top { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.2rem; }
    .srch__badge { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); background: rgba(226,58,46,0.12); border-radius: 5px; padding: 0.12rem 0.45rem; }
    .srch__title { font-weight: 600; font-size: 0.96rem; color: var(--white); }
    .srch__snip { font-size: 0.83rem; color: var(--grey); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .srch__snip mark, .srch__title mark { background: rgba(226,58,46,0.3); color: #fff; border-radius: 3px; padding: 0 2px; }
    @media (max-width: 640px) { .srch { padding-top: 6vh; } }

    /* ---------- "Switch Now" band ---------- */
    .switch-band {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, rgba(226,58,46,0.16), var(--ink) 55%);
      border: 1px solid rgba(226,58,46,0.3);
      border-radius: 20px;
      padding: 2.6rem 2.4rem;
      text-align: center;
    }
    .switch-band h3 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-bottom: 1.4rem; }
    .switch-band__points {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      max-width: 880px;
      margin: 0 auto 1.9rem;
    }
    .switch-point {
      display: flex; align-items: center; gap: 0.7rem;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--line);
      border-radius: 13px;
      padding: 1rem 1.1rem;
      text-align: left;
      font-size: 0.92rem;
      color: var(--grey);
    }
    .switch-point strong { color: var(--white); display: block; font-size: 0.95rem; }
    .switch-point span:first-child { font-size: 1.5rem; flex-shrink: 0; }
    .switch-band .btn { font-size: 1.02rem; padding: 1rem 2.3rem; position: relative; overflow: hidden; }

    /* Glowing pulse + shimmer sweep, shared by the homepage's Switch Now
       and Domain Search CTAs — same treatment as the pricing buttons. */
    .switch-band .btn::after,
    .domain-form button::after {
      content: '';
      position: absolute;
      top: 0;
      left: -60%;
      width: 40%;
      height: 100%;
      background: linear-gradient(115deg, transparent, rgba(255,255,255,0.4), transparent);
      transform: skewX(-20deg);
      transition: left 0.65s var(--ease);
      pointer-events: none;
    }
    .switch-band .btn:hover::after,
    .domain-form button:hover::after { left: 130%; }
    .switch-band .btn:hover,
    .domain-form button:hover {
      animation: priceBtnGlow 1.6s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .switch-band .btn::after, .domain-form button::after { display: none; }
      .switch-band .btn:hover, .domain-form button:hover { animation: none; box-shadow: 0 0 0 1px rgba(226,58,46,0.6), 0 8px 22px -6px rgba(226,58,46,0.55); }
    }
    @media (max-width: 860px) {
      .switch-band__points { grid-template-columns: 1fr; }
      .switch-band { padding: 2rem 1.5rem; }
    }

    /* ---------- International pricing notice ---------- */
    .intl-note {
      display: none;                 /* shown by JS for non-SA visitors */
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      flex-wrap: wrap;
      max-width: 780px;
      margin: 0 auto 2rem;
      padding: 0.85rem 1.3rem;
      background: rgba(226,58,46,0.08);
      border: 1px solid rgba(226,58,46,0.28);
      border-radius: 13px;
      font-size: 0.88rem;
      color: var(--grey);
      text-align: center;
    }
    .intl-note strong { color: var(--white); }
    .section--light .intl-note { color: var(--grey-dark); }
    .section--light .intl-note strong { color: var(--black); }
    body.is-intl .intl-note { display: flex; }
    /* non-PayPal badges hidden for international visitors */
    body.is-intl .pay-badge:not([data-pp]) { display: none; }

    /* ---------- Payment method trust badges ----------
       White pills with the real brand marks, like card badges */
    .pay-badges { display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: center; }
    .pay-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      height: 36px;
      padding: 0 0.95rem;
      border-radius: 8px;
      font-size: 0.85rem;
      font-weight: 700;
      background: #ffffff;
      box-shadow: 0 2px 10px -4px rgba(0,0,0,0.5);
    }
    .pay-badge em { font-style: normal; }
    .pay-badge svg, .pay-badge img { display: block; width: auto; }
    /* per-brand logo heights, tuned so each reads at the same optical size */
    .pay-logo--paypal { width: 15px; height: 15px; }
    .pay-logo--ozow   { height: 16px; }
    .pay-logo--payfast{ height: 19px; }
    .pay-logo--yoco   { height: 15px; }
    .pay-logo--applepay { height: 25px; }
    .pay-logo--gpay     { height: 19px; }
    .pay-logo--samsungpay { height: 20px; }
    .pay-logo--visa       { height: 16px; }
    .pay-logo--mastercard { height: 24px; }

    /* Honeypot: an anti-spam field hidden off-screen. Real people never
       see or fill it; bots that auto-fill every field give themselves away. */
    .hp-wrap { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

    /* ---------- ClientZone dropdown (compact) ---------- */
    .nav__cdd { position: relative; }
    .nav__client .cdd-caret { width: 11px; height: 11px; margin-left: 0.15rem; transition: transform 0.25s var(--ease); }
    .nav__cdd:hover .cdd-caret { transform: rotate(180deg); }
    .nav__cdd-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 215px;
      background: #141417;
      border: 1px solid var(--line);
      border-radius: 13px;
      padding: 0.4rem;
      box-shadow: 0 20px 44px -14px rgba(0,0,0,0.75);
      opacity: 0; visibility: hidden; transform: translateY(8px);
      transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
      z-index: 130;
    }
    .nav__cdd-menu::before { content: ''; position: absolute; bottom: 100%; left: 0; right: 0; height: 10px; }
    .nav__cdd:hover .nav__cdd-menu, .nav__cdd:focus-within .nav__cdd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
    .nav__cdd-item {
      display: flex; align-items: center; gap: 0.6rem;
      padding: 0.7rem 0.8rem;
      border-radius: 9px;
      color: var(--grey);
      font-size: 0.92rem; font-weight: 500;
      transition: color 0.2s var(--ease), background 0.2s var(--ease);
    }
    .nav__cdd-item:hover { color: var(--white); background: rgba(226,58,46,0.14); }
    .nav__cdd-item.is-active { color: var(--white); background: rgba(226,58,46,0.1); }
    .nav__cdd-item svg { width: 17px; height: 17px; color: var(--red); flex-shrink: 0; }

    /* ---------- Auth pages (Client Login / Sign Up) ---------- */
    .auth-section { min-height: 66vh; display: grid; place-items: center; }
    .auth-card {
      width: min(440px, 100%);
      background: var(--ink);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 2.8rem 2.3rem;
      text-align: center;
    }
    .auth-card__icon {
      width: 64px; height: 64px;
      margin: 0 auto 1.2rem;
      display: grid; place-items: center;
      color: var(--red);
      background: rgba(226,58,46,0.12);
      border: 1px solid rgba(226,58,46,0.3);
      border-radius: 16px;
    }
    .auth-card h1, .auth-card h2 { font-size: 1.8rem; margin-bottom: 0.4rem; }
    .auth-card > p { color: var(--grey); font-size: 0.98rem; margin-bottom: 1.9rem; max-width: 340px; margin-inline: auto; }
    .auth-form { display: grid; gap: 1rem; text-align: left; }
    .auth-form label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--grey); margin-bottom: 0.35rem; }
    .auth-form input[type="text"], .auth-form input[type="password"], .auth-form input[type="email"], .auth-form input[type="tel"] {
      width: 100%;
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 0.85rem 1.05rem;
      color: var(--white);
      font: inherit; font-size: 0.95rem;
      outline: none;
    }
    /* Support form also needs a picker and a message box */
    .auth-form select, .auth-form textarea {
      width: 100%;
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 0.85rem 1.05rem;
      color: var(--white);
      font: inherit; font-size: 0.95rem;
      outline: none;
    }
    .auth-form textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
    .auth-form select:focus, .auth-form textarea:focus { border-color: rgba(226,58,46,0.65); }
    .auth-form select option { background: var(--ink); color: var(--white); }
    .auth-form input:focus { border-color: rgba(226,58,46,0.65); }
    .auth-form .btn { width: 100%; justify-content: center; margin-top: 0.4rem; }
    /* Wider variant for the support form (message box needs the room) */
    .auth-card--wide { width: min(620px, 100%); }
    .auth-card--wide > p { max-width: 460px; }
    /* hCaptcha renders a FIXED ~302px widget. On a 375px phone the card's
       normal 2.3rem side padding pushes its min-content past the viewport
       and the whole page scrolls sideways. Tighten the padding on small
       screens so the widget still fits with room to spare. */
    @media (max-width: 640px) {
      .auth-card { padding: 2rem 1.15rem; }
      .auth-card h1, .auth-card h2 { font-size: 1.55rem; }
      .auth-card > p { font-size: 0.92rem; margin-bottom: 1.5rem; }
      /* Two-up rows get too narrow to type a phone number into — stack them */
      .auth-form .czmodal__row { grid-template-columns: 1fr; }
    }
    .auth-card__go { width: 100%; justify-content: center; }
    .auth-card__links { margin-top: 1.5rem; font-size: 0.88rem; color: var(--grey); line-height: 1.7; }
    .auth-card__links a { color: var(--red); font-weight: 600; }
    .auth-card__links a:hover { text-decoration: underline; }

    /* ============================================================
       LEGAL / PROSE PAGES (Privacy Policy)
       ============================================================ */
    .legal { max-width: 820px; margin: 0 auto; }
    .legal__updated {
      display: inline-block;
      padding: 0.35rem 0.9rem;
      background: rgba(226,58,46,0.1);
      border: 1px solid rgba(226,58,46,0.28);
      border-radius: 999px;
      font-size: 0.8rem;
      color: var(--grey);
      margin-bottom: 2.2rem;
    }
    .legal h3 {
      font-size: 1.25rem;
      margin: 2.4rem 0 0.8rem;
      padding-top: 1.6rem;
      border-top: 1px solid var(--line);
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }
    .legal h3:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
    .legal h4 { font-size: 1rem; margin: 1.4rem 0 0.5rem; color: var(--white); }
    .legal p, .legal li { color: var(--grey); font-size: 0.97rem; line-height: 1.75; }
    .legal p { margin-bottom: 0.9rem; }
    .legal ul { margin: 0 0 1rem 1.2rem; display: grid; gap: 0.45rem; }
    .legal li::marker { color: var(--red); }
    .legal strong { color: var(--white); }
    .legal a { color: var(--red); font-weight: 600; }
    .legal a:hover { text-decoration: underline; }
    .legal__box {
      background: var(--ink);
      border: 1px solid var(--line);
      border-left: 3px solid var(--red);
      border-radius: 12px;
      padding: 1.2rem 1.4rem;
      margin: 1.4rem 0;
    }
    .legal__box p:last-child { margin-bottom: 0; }

    /* ============================================================
       COOKIE CONSENT — bottom-left, first-time visitors
       ============================================================ */
    .cc {
      position: fixed;
      left: 24px; bottom: 24px;
      width: min(400px, calc(100vw - 32px));
      max-height: calc(100vh - 48px);
      overflow-y: auto;
      background: var(--ink);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: 0 26px 60px -18px rgba(0,0,0,0.85);
      z-index: 150;
      animation: ccIn 0.45s var(--ease) both;
    }
    .cc[hidden] { display: none; }
    @keyframes ccIn {
      from { opacity: 0; transform: translateY(24px) scale(0.97); }
      to   { opacity: 1; transform: none; }
    }
    .cc__body { padding: 1.5rem 1.6rem 1.3rem; }
    .cc__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
    .cc__head span { font-size: 1.4rem; }
    .cc__head h4 { font-size: 1.1rem; }
    .cc__body > p { font-size: 0.86rem; color: var(--grey); line-height: 1.6; }
    .cc__body > p a { color: var(--red); font-weight: 600; }
    .cc__body > p a:hover { text-decoration: underline; }

    /* category rows */
    .cc__cats { margin: 1.1rem 0 0.3rem; display: none; }
    .cc.is-open .cc__cats { display: block; }
    .cc__cat {
      border-top: 1px solid var(--line);
      padding: 0.85rem 0;
    }
    .cc__cat-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .cc__cat-name { font-weight: 600; font-size: 0.92rem; }
    .cc__cat p { font-size: 0.78rem; color: var(--grey); line-height: 1.55; margin-top: 0.45rem; }
    .cc__always { font-size: 0.78rem; font-weight: 700; color: #4ac97e; white-space: nowrap; }

    /* toggle switch */
    .cc__sw { position: relative; width: 42px; height: 23px; flex-shrink: 0; }
    .cc__sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
    .cc__sw span {
      position: absolute; inset: 0;
      background: rgba(255,255,255,0.16);
      border-radius: 999px;
      transition: background 0.25s var(--ease);
      pointer-events: none;
    }
    .cc__sw span::before {
      content: ''; position: absolute;
      left: 3px; top: 3px;
      width: 17px; height: 17px;
      background: #fff; border-radius: 50%;
      transition: transform 0.25s var(--ease);
    }
    .cc__sw input:checked + span { background: var(--red); }
    .cc__sw input:checked + span::before { transform: translateX(19px); }
    .cc__sw input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

    /* actions */
    .cc__actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.55rem;
      padding: 1.1rem 1.6rem 1.5rem;
      border-top: 1px solid var(--line);
    }
    .cc__btn {
      padding: 0.72rem 0.9rem;
      border-radius: 11px;
      font-family: var(--font-head);
      font-weight: 600; font-size: 0.9rem;
      text-align: center;
      transition: background 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease), transform 0.22s var(--ease);
    }
    .cc__btn--accept { background: var(--red-dark); color: #fff; grid-column: 1 / -1; }
    .cc__btn--accept:hover { background: var(--red); transform: translateY(-2px); box-shadow: var(--shadow-red); }
    .cc__btn--ghost { border: 1px solid var(--line); color: var(--grey); }
    .cc__btn--ghost:hover { color: var(--white); border-color: rgba(255,255,255,0.28); }
    .cc__save { display: none; }
    .cc.is-open .cc__save { display: block; }
    .cc.is-open .cc__customise { display: none; }

    .footer__legal {
      border-top: 1px solid var(--line);
      padding-top: 1.4rem;
      margin-bottom: 0.2rem;
      font-size: 0.78rem;
      color: var(--grey);
      line-height: 1.8;
      opacity: 0.85;
    }
    .footer__legal strong { color: var(--white); }
    .footer__legal a { color: var(--grey); }
    .footer__legal a:hover { color: var(--red); }

    /* footer legal links */
    #ccReopen, #privacyLink, #termsLink { color: var(--grey); transition: color 0.2s var(--ease); }
    #ccReopen:hover, #privacyLink:hover, #termsLink:hover { color: var(--red); text-decoration: underline; }
    /* privacy link inside the consent card */
    /* brand red at 4.15:1 on this dark background — bumped for 4.5:1 AA */
    #ccPrivacyLink { color: #ef4536; font-weight: 600; }
    #ccPrivacyLink:hover { text-decoration: underline; }

    @media (max-width: 640px) {
      .cc {
        left: 0; right: 0; top: 0; bottom: 0;
        margin: auto;
        width: min(340px, calc(100vw - 32px));
        max-height: calc(100vh - 64px);
      }
      .cc__body { padding: 1.1rem 1.1rem 0.9rem; }
      .cc__head h4 { font-size: 1rem; }
      .cc__body > p { font-size: 0.8rem; }
      .cc__cat p { font-size: 0.75rem; }
      .cc__actions { padding: 0.9rem 1.1rem 1.1rem; gap: 0.5rem; }
      .cc__btn { font-size: 0.84rem; padding: 0.68rem 0.6rem; }
    }

    /* ============================================================
       CLIENTZONE — themed login modal (posts straight to WHMCS)
       ============================================================ */
    .czmodal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; }
    .czmodal[hidden] { display: none; }
    .czmodal__backdrop {
      position: absolute; inset: 0;
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .czmodal__panel {
      position: relative;
      width: min(400px, 92vw);
      max-height: 90vh;
      overflow-y: auto;
      background: var(--ink);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 2.2rem 2rem;
      text-align: center;
      animation: bannerIn 0.3s var(--ease);
    }
    .czmodal__logo { width: 84px; height: auto; margin: 0 auto 1rem; }
    .czmodal__panel h3 { font-size: 1.4rem; margin-bottom: 0.3rem; }
    .czmodal__panel > p { color: var(--grey); font-size: 0.9rem; margin-bottom: 1.4rem; }
    .czmodal__panel form { display: grid; gap: 0.7rem; }
    /* hCaptcha renders a fixed ~302px widget — centre it instead of
       stretching to the grid column's width. */
    .hcap-box { display: flex; justify-content: center; margin: 0.15rem 0; }
    .czmodal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
    .czmodal__panel input[type="email"],
    .czmodal__panel input[type="text"],
    .czmodal__panel input[type="tel"],
    .czmodal__panel input[type="password"] {
      width: 100%;
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 0.75rem 0.9rem;
      color: var(--white);
      font: inherit;
      font-size: 0.92rem;
      outline: none;
    }
    .czmodal__panel input:focus { border-color: rgba(226,58,46,0.6); }
    .czmodal__remember {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--grey);
      font-size: 0.85rem;
      cursor: pointer;
    }
    .czmodal__panel .btn { width: 100%; justify-content: center; }
    .czmodal__links {
      margin-top: 1rem;
      display: flex;
      gap: 0.6rem;
      justify-content: center;
      font-size: 0.85rem;
      color: var(--grey);
    }
    .czmodal__links a { color: var(--grey); text-decoration: underline; transition: color 0.2s var(--ease); }
    .czmodal__links a:hover { color: var(--red); }
    .czmodal__full { display: inline-block; margin-top: 0.9rem; font-size: 0.82rem; color: var(--red); font-weight: 600; }
    .czmodal__full:hover { text-decoration: underline; }
    .czmodal__close {
      position: absolute;
      top: 0.8rem; right: 1rem;
      font-size: 1.5rem; line-height: 1;
      color: var(--grey);
      padding: 0.2rem 0.4rem;
    }
    .czmodal__close:hover { color: var(--white); }

    /* ============================================================
       ASTRO ASSISTANT — draggable astronaut pet + learning chatbot
       ============================================================ */
    .astro {
      position: fixed;
      right: 26px; bottom: 26px;
      width: 84px;
      z-index: 95;
      cursor: grab;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }
    .astro:active { cursor: grabbing; }
    /* Signal concept: a soft pulsing glow behind Zikhali, same red used
       everywhere else the "online" motif appears (nav chip, stat dots,
       hero nodes) — the mascot reads as another signal source. */
    .astro::before {
      content: '';
      position: absolute;
      inset: -16px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(226,58,46,0.4), transparent 72%);
      z-index: -1;
      animation: astroGlow 2.6s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes astroGlow {
      0%, 100% { opacity: 0.5; transform: scale(0.9); }
      50%      { opacity: 1; transform: scale(1.1); }
    }
    .astro__body {
      animation: astroBob 4s ease-in-out infinite;
      transition: transform 0.25s var(--ease);
      filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45)) drop-shadow(0 0 12px rgba(226,58,46,0.5));
    }
    .astro:hover .astro__body { transform: scale(1.07); }
    .astro.is-dragging .astro__body { animation-play-state: paused; transform: scale(1.1) rotate(-6deg); }
    @keyframes astroBob {
      0%, 100% { transform: translateY(0) rotate(-2deg); }
      50%      { transform: translateY(-9px) rotate(2deg); }
    }
    .astro__bubble {
      position: absolute;
      bottom: calc(100% + 10px);
      right: 0;
      background: var(--white);
      color: var(--black);
      font-size: 0.82rem;
      font-weight: 600;
      padding: 0.5rem 0.8rem;
      border-radius: 12px 12px 2px 12px;
      white-space: nowrap;
      box-shadow: 0 8px 24px rgba(0,0,0,0.35);
      animation: bannerIn 0.35s var(--ease);
    }
    /* Zikhali's left hand (viewer's right, cx=88) waves hello 👋 */
    .astro .ast-wave {
      transform-box: view-box;
      transform-origin: 80px 86px;   /* shoulder joint */
      animation: astroWave 2.4s ease-in-out infinite;
    }
    @keyframes astroWave {
      0%, 100% { transform: rotate(-36deg); }
      50%      { transform: rotate(-64deg); }
    }
    .astro .ast-eye {
      transform-box: fill-box;
      transform-origin: center;
      animation: astroBlink 4.5s infinite;
    }
    @keyframes astroBlink {
      0%, 91%, 100% { transform: scaleY(1); }
      95%           { transform: scaleY(0.12); }
    }
    .astro .ast-light { animation: astroPulse 1.6s ease-in-out infinite; }
    @keyframes astroPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

    /* Chat panel */
    .chat {
      position: fixed;
      right: 26px; bottom: 124px;
      width: 330px;
      max-width: calc(100vw - 24px);
      height: 460px;
      max-height: 72vh;
      display: flex;
      flex-direction: column;
      background: var(--ink);
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      z-index: 96;
      box-shadow: 0 24px 60px -12px rgba(0,0,0,0.7);
      animation: bannerIn 0.3s var(--ease);
    }
    .chat[hidden] { display: none; }
    .chat__head {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.85rem 1rem;
      background: #101013;
      border-bottom: 1px solid var(--line);
    }
    .chat__title { font-family: var(--font-head); font-weight: 600; font-size: 1rem; }
    .chat__sub { font-size: 0.72rem; color: var(--grey); }
    .chat__close {
      margin-left: auto;
      font-size: 1.4rem; line-height: 1;
      color: var(--grey);
      padding: 0.2rem 0.55rem;
      border-radius: 8px;
      transition: color 0.2s, background 0.2s;
    }
    .chat__close:hover { color: var(--white); background: rgba(255,255,255,0.08); }
    .chat__msgs {
      flex: 1;
      overflow-y: auto;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }
    .msg {
      max-width: 85%;
      padding: 0.6rem 0.85rem;
      border-radius: 14px;
      font-size: 0.88rem;
      line-height: 1.45;
      animation: msgIn 0.25s var(--ease);
      overflow-wrap: break-word;
    }
    @keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    .msg--bot { background: rgba(255,255,255,0.07); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
    .msg--user { background: var(--red); color: var(--white); align-self: flex-end; border-bottom-right-radius: 4px; }
    .msg a { color: #ff8a94; text-decoration: underline; }
    .msg__fb { display: flex; gap: 0.35rem; margin-top: 0.4rem; }
    .msg__fb button { font-size: 0.78rem; opacity: 0.45; transition: opacity 0.2s, transform 0.2s; }
    .msg__fb button:hover { opacity: 1; transform: scale(1.25); }
    .msg__fb button.is-done { opacity: 1; }
    .typing { display: inline-flex; gap: 4px; align-items: center; }
    .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--grey); animation: typDot 1s infinite; }
    .typing i:nth-child(2) { animation-delay: 0.15s; }
    .typing i:nth-child(3) { animation-delay: 0.3s; }
    @keyframes typDot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
    .chat__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.6rem; }
    .chip {
      font-size: 0.78rem;
      padding: 0.35rem 0.75rem;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--grey);
      background: rgba(255,255,255,0.04);
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }
    .chip:hover { color: var(--white); border-color: var(--red); background: rgba(226,58,46,0.15); }
    .chat__inputrow {
      display: flex;
      gap: 0.5rem;
      padding: 0.7rem;
      border-top: 1px solid var(--line);
      background: #101013;
    }
    .chat__inputrow input {
      flex: 1;
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 0.55rem 0.8rem;
      color: var(--white);
      font: inherit;
      font-size: 0.88rem;
      outline: none;
    }
    .chat__inputrow input:focus { border-color: rgba(226,58,46,0.6); }
    .chat__send {
      width: 42px;
      display: grid;
      place-items: center;
      background: var(--red);
      border-radius: 10px;
      color: var(--white);
      transition: background 0.2s;
    }
    .chat__send:hover { background: var(--red-dark); }
    .chat__send svg { width: 17px; height: 17px; }
    /* the hidden attribute must always win inside the chat (display rules above are stronger by default) */
    .chat [hidden] { display: none !important; }
    /* Lead wall (get-to-know-you form) */
    .chat__gate {
      flex: 1;
      overflow-y: auto;
      padding: 1.4rem 1.2rem;
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
    }
    .chat__gate h3 { font-size: 1.15rem; }
    .chat__gate p { font-size: 0.85rem; color: var(--grey); line-height: 1.5; }
    .chat__gate input {
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 0.6rem 0.8rem;
      color: var(--white);
      font: inherit;
      font-size: 0.88rem;
      outline: none;
    }
    .chat__gate input:focus { border-color: rgba(226,58,46,0.6); }
    .chat__gate .btn { justify-content: center; margin-top: 0.2rem; }
    .chat__gate-err { color: #ff8a94 !important; font-size: 0.8rem !important; }
    .chat__gate-note { font-size: 0.72rem !important; opacity: 0.75; }
    @media (max-width: 640px) {
      .astro { width: 68px; }
      .chat { left: 12px; right: 12px; width: auto; bottom: 102px; height: 62vh; }
    }
    @media (prefers-reduced-motion: reduce) {
      .astro__body, .astro .ast-eye, .astro .ast-light, .astro .ast-wave, .astro::before { animation: none; }
    }

    /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width: 900px) {
      .cards { grid-template-columns: 1fr 1fr; }
      .services-grid .service { flex-basis: calc(50% - 0.7rem); }
      .service--featured { grid-column: span 2; }
      .price-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
      .remote-intro { grid-template-columns: 1fr 1fr; }
      .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .footer__grid { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 640px) {
      .section { padding: 3.8rem 0; }

      /* Mobile nav: hamburger + dropdown panel */
      .nav__burger { display: flex; }
      .nav__links {
        position: absolute;
        top: var(--nav-h);
        left: 0; right: 0;
        z-index: 101;
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
        background: var(--black);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 18px 30px -10px rgba(0,0,0,0.6);
        padding: 0.8rem 4%;
        display: none;
      }
      .nav__links.is-open { display: flex; animation: pageIn 0.3s var(--ease); }
      .nav__link { padding: 0.85rem 1rem; }
      .nav__link.is-active::after { left: 1rem; right: auto; width: 22px; }
      .nav__cta { margin: 0.4rem 0 0.2rem; text-align: center; }

      /* Mega menu flattens into an indented list on mobile */
      .nav__dd-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        width: auto; background: transparent; border: none; box-shadow: none;
        padding: 0.1rem 0 0.3rem 0.6rem;
      }
      .nav__dd-menu::before { display: none; }
      .nav__dd:hover .nav__dd-menu, .nav__dd:focus-within .nav__dd-menu { transform: none; }
      .nav__dd-toggle .caret { display: none; }
      .nav__mega-grid { grid-template-columns: 1fr; gap: 0; }
      .nav__dd-item { padding: 0.6rem 0.5rem; gap: 0.6rem; }
      .nav__dd-item .dd-icon { width: 34px; height: 34px; }
      .nav__dd-item .dd-icon svg { width: 17px; height: 17px; }
      .nav__dd-item .dd-sub { display: none; }
      .nav__mega-foot { display: none; }
      /* ClientZone dropdown flattens too */
      .nav__cdd-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        min-width: 0; background: transparent; border: none; box-shadow: none;
        padding: 0.1rem 0 0.3rem 0.6rem;
      }
      .nav__cdd-menu::before { display: none; }
      .nav__client .cdd-caret { display: none; }

      .price-grid, .remote-intro { grid-template-columns: 1fr; }
      .cards, .contact-grid, .values { grid-template-columns: 1fr; }
      .services-grid .service { flex-basis: 100%; }
      .service--featured { grid-column: span 1; }
      .stats__grid { grid-template-columns: 1fr; }
      .stat { border-left: none; border-top: 1px solid var(--line); }
      .stat:first-child { border-top: none; }
      .cta-band { padding: 2.5rem 1.8rem; }
      .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
      .hero { min-height: auto; padding: 4.5rem 0; }

      /* Centred hero on mobile */
      .hero__content { text-align: center; margin-inline: auto; }
      .hero__sub { margin-inline: auto; }
      .hero__actions { justify-content: center; }
      .picker { margin-inline: auto; }
      .pills { justify-content: center; }
      .picker__banner { justify-content: center; text-align: center; }
    }

    /* ============================================================
       CUSTOM CURSOR — glowing red dot that follows the pointer,
       desktop-with-mouse only (see JS gate on (pointer:fine)/(hover:hover)).
       Scoped entirely under body.has-custom-cursor, which JS only adds
       once the cursor element exists — if the script ever fails, the
       native cursor is simply never hidden, so there's no way to end up
       with an invisible pointer.
       ============================================================ */
    body.has-custom-cursor, body.has-custom-cursor * { cursor: none; }
    body.has-custom-cursor input,
    body.has-custom-cursor textarea,
    body.has-custom-cursor select,
    body.has-custom-cursor [contenteditable] { cursor: auto; }
    .gebo-cursor {
      position: fixed;
      top: 0; left: 0;
      width: 16px; height: 16px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,0.9), var(--red) 55%, transparent 78%);
      box-shadow: 0 0 10px 3px rgba(226,58,46,0.6), 0 0 26px 9px rgba(226,58,46,0.3);
      pointer-events: none;
      z-index: 9999;
      opacity: 0;
      transition: width 0.22s var(--ease), height 0.22s var(--ease), opacity 0.2s var(--ease), box-shadow 0.22s var(--ease);
      will-change: transform;
    }
    .gebo-cursor.is-active { opacity: 1; }
    .gebo-cursor.is-hover {
      width: 38px; height: 38px;
      background: radial-gradient(circle, rgba(226,58,46,0.5), rgba(226,58,46,0.15) 60%, transparent 78%);
      box-shadow: 0 0 16px 5px rgba(226,58,46,0.55), 0 0 36px 14px rgba(226,58,46,0.28);
    }
    .gebo-cursor.is-down { width: 11px; height: 11px; }
    @media (prefers-reduced-motion: reduce) {
      .gebo-cursor { transition: opacity 0.2s var(--ease); }
    }