/* ============================================================
   ScalePilot AI — Scale Your Business With AI
   DARK THEME. Brand sheet:
     Deep Space Blue #0B1020 · NASA Blue #0D47A1 · Cosmic Blue #00B4FF
     Nebula Purple  #6D00FF · Star White #F2F4F8 · Moon Silver #AEB6C1

   Type: Oxanium for headings, Google Sans Text for body. Oxanium is
   distinctive and mechanical without being as hard to scan as Orbitron.
   Google Sans Text is the paragraph-optimised cut of Google Sans. An
   earlier build set everything in Michroma, which is ~1.6x wider and
   forced the whole scale down; the scale has since been rebuilt.

   What drives readability:
     1. The page base is Deep Space Blue #0B1020 — the brand colour —
        not a near-black. Surfaces step UP from it, never down.
     2. Body copy is set at a real reading size in a text face.
     3. Sections dim the scene to 87% so type always has a stable
        backdrop. No blur — the journey stays sharp, just quieter.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Surfaces step up from the brand blue, so cards read as raised. */
  --bg: #0b1020;
  --bg-deep: #070b17;
  --surface: #141d3a;
  --card: #1a2445;
  --card-hi: #222e56;
  /* What sections paint over the live scene. Raise toward 0.95 if copy ever
     feels busy; drop toward 0.7 to show more of the journey. */
  --scrim: rgba(11, 16, 32, 0.87);

  --nasa: #0d47a1;
  --cosmic: #00b4ff;
  --nebula: #6d00ff;

  /* Star White for headings, a bright silver for body — the old #AEB6C1 was
     legible but sat too close to the muted tone to create hierarchy. */
  --white: #ffffff;
  --text: #dde4ef;
  --muted: #a3aec2;

  --line: rgba(174, 182, 193, 0.16);
  --line-2: rgba(174, 182, 193, 0.3);
  --accent-soft: rgba(0, 180, 255, 0.12);

  --shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 18px 44px -18px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.4), 0 32px 70px -22px rgba(0, 0, 0, 0.85);

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --container: 1180px;
  --gutter: clamp(18px, 4vw, 44px);
  --util-h: 34px;
  --nav-h: 110px;   /* utility strip + main bar */

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* Heading: Oxanium · Body: Inter — the pairing from the font explorer.
     Oxanium is distinctive and mechanical, and noticeably narrower and more
     readable than Orbitron, so headings can run larger on less tracking. */
  --f-display: "Oxanium", system-ui, sans-serif;
  /* Google Sans TEXT, not Google Sans — the text cut is the one drawn for
     paragraph sizes; the display cut is meant for large headings. It ships
     400/500/700 only (no 300 or 600), so nothing here asks for those. */
  --f-body: "Google Sans Text", "Google Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  position: relative;
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--text);
  font-size: clamp(15px, 0.3vw + 14px, 16.5px);
  line-height: 1.7;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }

::selection { background: rgba(0, 180, 255, 0.3); color: #fff; }
:focus-visible { outline: 2px solid var(--cosmic); outline-offset: 3px; border-radius: 3px; }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: #2a3760; border-radius: 99px; border: 3px solid var(--bg-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--nasa); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--cosmic); color: #04202e; padding: 10px 18px;
  border-radius: var(--r-sm); transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  color: var(--white);
  line-height: 1.28;
}
/* Oxanium carries its own width, so it needs far less tracking than Orbitron
   did — and being narrower, it can run a size larger at the same measure. */
h1 { font-weight: 700; letter-spacing: 0.018em; }
h2 { font-weight: 600; letter-spacing: 0.012em; }
h3, h4, h5 { font-weight: 600; letter-spacing: 0.004em; }
h1 { font-size: clamp(2rem, 4.3vw, 3.6rem); line-height: 1.12; }
h2 { font-size: clamp(1.42rem, 2.6vw, 2.3rem); }
h3 { font-size: clamp(1.04rem, 1.1vw, 1.16rem); }
h4 { font-size: 0.98rem; }

p { text-wrap: pretty; }
strong { color: var(--white); }

.accent { color: var(--cosmic); }
.dim { color: var(--muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-display); font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--cosmic); margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.55; }
.eyebrow .ico { width: 14px; height: 14px; }

.lede { font-size: clamp(1rem, 1.05vw, 1.16rem); color: var(--text); max-width: 62ch; line-height: 1.75; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.center .eyebrow::before { display: none; }

/* ---------- 4. Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: 1340px; }

.section {
  position: relative;
  padding: clamp(60px, 7vw, 108px) 0;
  /* Quiets the scene behind copy without blurring it. */
  background: var(--scrim);
}
.section--tight { padding: clamp(42px, 4.5vw, 68px) 0; }
.section__head { max-width: 720px; margin-bottom: clamp(34px, 4vw, 56px); }
.section__head.center { margin-inline: auto; }

.grid { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(286px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }
.divider { height: 1px; background: var(--line); border: 0; }

/* ---------- 5. The live scene ---------- */
#scene {
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100vh; pointer-events: none;
  opacity: 0; transition: opacity 1.4s ease 0.15s;
}
.scene-ready #scene { opacity: 1; }

/* Sections carry their own scrim, so no full-page veil is needed. */
.veil { display: none; }

.backdrop { display: none; }
.no-webgl .backdrop {
  display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1000px 620px at 15% -10%, rgba(13, 71, 161, 0.4), transparent 62%),
    radial-gradient(900px 560px at 85% 6%, rgba(109, 0, 255, 0.22), transparent 60%),
    var(--bg);
}
#starfield { display: none; }
.no-webgl #starfield { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; }

main, .footer { position: relative; z-index: 2; }

.progress-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--nasa), var(--cosmic));
  z-index: 300; box-shadow: 0 0 12px rgba(0, 180, 255, 0.7); will-change: transform;
}

/* ---------- 6. Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  height: var(--nav-h); display: flex; flex-direction: column;
  /* The bar is never fully transparent. The logo is screen-blended, and
     mix-blend-mode resolves against the backdrop inside this element's
     stacking context — with nothing painted there, the artwork's black
     background would show as a box. */
  background: rgba(9, 13, 26, 0.86);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--line);
  transition: height 0.42s var(--ease), background 0.42s var(--ease);
}
/* A thread of brand colour along the bottom edge that only appears once the
   header detaches from the top of the page — it marks the state change
   without needing a shadow. */
.header::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cosmic), transparent);
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.header.is-stuck::after { opacity: 0.7; }
.header.is-stuck { height: 64px; background: rgba(9, 13, 26, 0.96); }

/* ---- utility strip ---- */
.header__util {
  height: var(--util-h); flex-shrink: 0; overflow: hidden;
  border-bottom: 1px solid var(--line);
  transition: height 0.42s var(--ease), opacity 0.3s var(--ease);
}
/* Collapses on scroll rather than staying pinned: it is reference
   information, useful on arrival and clutter thereafter. */
.header.is-stuck .header__util { height: 0; opacity: 0; border-bottom-color: transparent; }
.header__util-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--util-h); }
.header__reach, .header__aside { display: flex; align-items: center; gap: 4px; }
.header__reach a, .header__hours, .header__abn, .header__wa {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: var(--r-sm);
  font-family: var(--f-display); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.03em;
  color: var(--muted); white-space: nowrap; transition: color 0.26s, background 0.26s;
}
.header__reach a:hover, .header__wa:hover { color: var(--white); background: rgba(255, 255, 255, 0.06); }
.header__reach .ico, .header__hours .ico, .header__abn .ico, .header__wa .ico { width: 13px; height: 13px; color: var(--cosmic); flex-shrink: 0; }
.header__wa .ico { color: #25d366; }
.header__hours, .header__abn { cursor: default; }
.header__abn { font-variant-numeric: tabular-nums; }
/* Hairline separators instead of relying on padding alone — six items in
   one 34px bar read as a run-on sentence without them. */
.header__aside { position: relative; }
.header__reach > * + *, .header__aside > * + * { position: relative; }
.header__reach > * + *::before, .header__aside > * + *::before {
  content: ""; position: absolute; left: -1px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 12px; background: var(--line);
}
.header__reach, .header__aside { gap: 2px; }

/* The strip carries five items at full width. Rather than let them wrap or
   squeeze, they drop in reverse order of usefulness as it narrows: the
   address goes first (it is in the footer and on the contact page), then
   the ABN, then trading hours. Email and phone are the last to go, and by
   then the drawer has taken over anyway. */
@media (max-width: 1320px) { .header__hours--addr { display: none; } }
@media (max-width: 1120px) { .header__abn { display: none; } }
@media (max-width: 980px)  { .header__aside .header__hours { display: none; } }

.header__main { flex: 1; display: flex; align-items: center; position: relative; }
.header__inner { display: flex; align-items: center; gap: 22px; width: 100%; }

.header__inner { display: flex; align-items: center; gap: 22px; width: 100%; }

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }

.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--f-display); font-size: 0.854rem; letter-spacing: 0.01em; color: var(--white); white-space: nowrap; }
.brand__name em { font-style: normal; color: var(--cosmic); }
.brand__tag { font-size: 0.537rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 6px; white-space: nowrap; font-family: var(--f-display); }

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav { position: relative; }
.nav__item { position: relative; }
/* Wide menus anchor to the header, not to their trigger. Centred on a
   trigger sitting 380px from the left edge, a 780px panel hangs off the
   side of the window. */
.nav__item--wide { position: static; }
.nav__link {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  padding: 9px 11px; border-radius: var(--r-sm);
  font-family: var(--f-display); font-weight: 500;
  font-size: 0.82rem; letter-spacing: 0.045em; color: var(--text);
  white-space: nowrap; transition: color 0.25s;
}

/* One indicator for the whole nav, moved by JS. Width and position are set
   inline; everything else is here so it animates. */
.nav__ind {
  position: absolute; left: 0; bottom: 2px; height: 2px; width: 0;
  border-radius: 2px; background: var(--cosmic);
  box-shadow: 0 0 12px rgba(0, 180, 255, 0.75);
  opacity: 0; pointer-events: none;
  transition: transform 0.42s var(--ease), width 0.42s var(--ease), opacity 0.3s;
}
.nav__ind.is-on { opacity: 1; }
.nav__link:hover, .nav__item:focus-within > .nav__link { color: var(--cosmic); }
.nav__link[aria-current="page"] { color: var(--cosmic); }
.nav__link .chev {
  width: 7px; height: 7px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.3s var(--ease); opacity: 0.7;
}
.nav__item:hover .chev, .nav__item:focus-within .chev { transform: rotate(225deg) translate(-1px, -1px); }

.mega {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 290px; padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.34s var(--ease), visibility 0.28s;
}
.mega__link--full { grid-column: 1 / -1; margin-top: 4px; padding-top: 13px; border-top: 1px solid var(--line); }
.nav__item:hover .mega, .nav__item:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.mega::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 16px; }
.mega__link {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 13px; border-radius: var(--r-md);
  font-size: 0.805rem; color: var(--text);
  /* Items start displaced and cascade in. --i is set per item in the markup,
     so the menu resolves in reading order instead of appearing all at once. */
  opacity: 0; transform: translateY(9px);
  transition: background 0.2s, color 0.2s,
              opacity 0.34s var(--ease), transform 0.34s var(--ease);
}
.nav__item:hover .mega__link,
.nav__item:focus-within .mega__link {
  opacity: 1; transform: none;
  transition-delay: 0s, 0s, calc(var(--i, 0) * 26ms + 50ms), calc(var(--i, 0) * 26ms + 50ms);
}
/* The label carries the display face; the description under it stays in the
   body face because it is a sentence, not a label. */
.mega__link > span { font-family: var(--f-display); font-weight: 500; letter-spacing: 0.02em; }
.mega__link small { font-family: var(--f-body); font-weight: 400; letter-spacing: 0; }
.mega__link:hover .ico { transform: scale(1.14); }
.mega__link .ico { transition: transform 0.3s var(--ease); }
.mega__link:hover { background: var(--accent-soft); color: var(--white); }
.mega__link .ico { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--cosmic); }
.mega__link small { display: block; color: var(--muted); font-size: 0.683rem; line-height: 1.5; margin-top: 4px; }

.nav__cta { margin-left: 12px; }
.burger {
  display: none; margin-left: auto;
  width: 42px; height: 42px; border-radius: var(--r-md);
  background: rgba(242, 244, 248, 0.07); border: 1px solid var(--line-2);
  cursor: pointer; position: relative;
}
.burger span {
  position: absolute; left: 12px; width: 18px; height: 1.5px; border-radius: 2px;
  background: var(--white); transition: transform 0.4s var(--ease), opacity 0.25s;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 20px; }
.burger span:nth-child(3) { top: 25px; }
body.nav-open .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(7, 11, 23, 0.98);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: calc(var(--nav-h) + 16px) var(--gutter) 40px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 0.32s var(--ease), transform 0.38s var(--ease), visibility 0.32s;
}
body.nav-open .drawer { opacity: 1; visibility: visible; transform: none; }
.drawer__group { border-bottom: 1px solid var(--line); }
.drawer__top {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; cursor: pointer;
  padding: 17px 2px; font-family: var(--f-display); font-size: 0.83rem;
  color: var(--white); text-align: left;
}
.drawer__top .chev {
  width: 8px; height: 8px; border-right: 1.6px solid var(--cosmic); border-bottom: 1.6px solid var(--cosmic);
  transform: rotate(45deg); transition: transform 0.35s var(--ease);
}
.drawer__group.is-open .drawer__top .chev { transform: rotate(225deg); }
.drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s var(--ease); }
.drawer__group.is-open .drawer__sub { grid-template-rows: 1fr; }
.drawer__sub > div { overflow: hidden; }
.drawer__sub a {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 2px 12px 16px; font-size: 0.854rem; color: var(--text);
  border-left: 1px solid var(--line);
}
.drawer__sub a .ico { width: 16px; height: 16px; color: var(--cosmic); }
.drawer__sub a:hover { color: var(--cosmic); border-left-color: var(--cosmic); }
.drawer .btn { width: 100%; margin-top: 28px; justify-content: center; }

/* ---------- 7. Buttons ---------- */
/* The hidden attribute sets display:none in the browser's own stylesheet,
   but ANY author rule with an explicit display beats it — .btn is
   inline-flex, so every button toggled with el.hidden = true kept
   rendering. The wizard showed Next and Book Appointment side by side on
   step one, and Back on the first step, because of this single line. */
[hidden] { display: none !important; }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; border-radius: var(--r-pill);
  font-size: 0.83rem; letter-spacing: -0.01em; line-height: 1;
  border: 1px solid transparent; cursor: pointer; overflow: hidden; white-space: nowrap;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s, background 0.3s, color 0.3s;
}
.btn .ico { width: 15px; height: 15px; transition: transform 0.35s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
/* A back arrow is the same glyph rotated, so its hover nudge has to be
   rotated too — otherwise it slides right while pointing left. */
.ico--back { transform: rotate(180deg); }
/* Leading icons should not drift away from the label they belong to —
   but :first-child scores 0-4-0 and beat the .ico--back rule at 0-3-0, so
   on hover the back arrow lost its rotation and flipped to point right.
   Excluding it here is what keeps it still. */
.btn .ico:first-child { transition: none; }
.btn:hover .ico:first-child:not(.ico--back) { transform: none; }
/* Stays exactly where it is, pointing left, hovered or not. */
.btn .ico--back, .btn:hover .ico--back { transform: rotate(180deg); transition: none; }

.btn--primary {
  background: var(--cosmic); color: #04202e;
  box-shadow: 0 8px 26px -10px rgba(0, 180, 255, 0.8);
}
.btn--primary:hover { transform: translateY(-2px); background: #35c5ff; box-shadow: 0 14px 36px -12px rgba(0, 180, 255, 0.95); }

.btn--ghost { background: rgba(242, 244, 248, 0.06); border-color: var(--line-2); color: var(--white); }
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--cosmic); background: var(--accent-soft); }

.btn--sm { padding: 10px 16px; font-size: 0.732rem; }
.btn--lg { padding: 17px 30px; font-size: 0.903rem; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center .btn-row { justify-content: center; }

.link-arrow { display: inline-flex; align-items: center; gap: 7px; color: var(--cosmic); font-size: 0.805rem; }
.link-arrow .ico { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.link-arrow:hover .ico { transform: translateX(4px); }

/* ---------- 8. Icons ---------- */
.ico { width: 20px; height: 20px; flex-shrink: 0; }
.ico-box {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: var(--accent-soft);
  color: var(--cosmic);
  transition: border-color 0.4s, background 0.4s, transform 0.5s var(--ease), box-shadow 0.5s;
}
.ico-box .ico { width: 20px; height: 20px; }

/* ---------- 9. Cards ---------- */
.card {
  position: relative; isolation: isolate;
  padding: clamp(22px, 2.2vw, 30px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.4s, background 0.4s, box-shadow 0.45s, transform 0.45s var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 180, 255, 0.13), transparent 62%);
  opacity: 0; transition: opacity 0.4s;
}
.card:hover { transform: translateY(-3px); background: var(--card-hi); border-color: rgba(0, 180, 255, 0.36); box-shadow: var(--shadow); }
.card:hover::before { opacity: 1; }
.card:hover .ico-box { border-color: var(--cosmic); box-shadow: 0 0 20px rgba(0, 180, 255, 0.28); }
.card h3 { margin-bottom: 9px; }
.card p { font-size: 0.927rem; color: var(--muted); line-height: 1.85; }

a.card { display: block; }
a.card .card__go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-size: 0.732rem; color: var(--cosmic); opacity: 0.6; transition: opacity 0.35s, gap 0.35s var(--ease);
}
a.card:hover .card__go { opacity: 1; gap: 11px; }
a.card .card__go .ico { width: 14px; height: 14px; }

.card__idx {
  position: absolute; top: 20px; right: 22px;
  font-family: var(--f-display); font-size: 0.634rem; color: var(--muted); opacity: 0.5;
}

/* ---------- 10. Editorial service list ---------- */
.slist { border-top: 1px solid var(--line); }
.slist__row {
  display: grid; grid-template-columns: 58px 1.05fr 1.35fr auto;
  gap: clamp(16px, 2.5vw, 40px); align-items: center;
  padding: clamp(20px, 2.2vw, 28px) 8px;
  border-bottom: 1px solid var(--line);
  transition: background 0.35s, padding-left 0.4s var(--ease);
}
.slist__row:hover { background: var(--accent-soft); padding-left: 20px; }
.slist__n { font-family: var(--f-display); font-size: 0.683rem; color: var(--muted); }
.slist__name { display: flex; align-items: center; gap: 14px; }
.slist__name .ico { width: 21px; height: 21px; color: var(--cosmic); }
.slist__name h3 { font-size: 1.061rem; }
.slist__row p { font-size: 0.903rem; color: var(--muted); margin: 0; line-height: 1.8; }
.slist__go { color: var(--cosmic); opacity: 0.35; transition: opacity 0.35s, transform 0.35s var(--ease); }
.slist__row:hover .slist__go { opacity: 1; transform: translateX(4px); }

/* ---------- 11. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 40px) 0 130px;
  background: transparent;   /* full-strength scene */
}
/* Blends the open scene into the first scrimmed section with no hard seam. */
.hero::after, .page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
  background: linear-gradient(180deg, transparent, var(--scrim));
  pointer-events: none;
}
.hero__inner {
  max-width: 900px; position: relative; z-index: 1;
  margin-inline: auto; text-align: center;
}
.hero .lede, .hero__sub { margin-inline: auto; }
.hero .btn-row, .hero .trust { justify-content: center; }
/* The eyebrow's leading rule reads as a hanging tail once centred. */
.hero .eyebrow::before { display: none; }
.hero h1 { margin-bottom: 24px; }
.hero h1 .line { display: block; }
.hero .lede { margin-bottom: 16px; }
.hero__sub { font-size: 0.952rem; color: var(--muted); max-width: 54ch; margin-bottom: 32px; line-height: 1.85; }
.hero .btn-row { margin-bottom: 38px; }

/* Hero type sits straight on the scene with no scrim behind it, so it carries
   its own halo: a tight core to hold the letterforms, then a wide glow to sink
   whatever is behind them. Three layers, because the planets run bright here. */
.hero h1, .hero .lede, .hero__sub, .hero .eyebrow, .hero .trust,
.page-hero h1, .page-hero .lede, .page-hero .eyebrow, .page-hero .crumbs {
  text-shadow:
    0 0 4px rgba(2, 4, 10, 0.95),
    0 1px 11px rgba(2, 4, 10, 0.9),
    0 1px 28px rgba(2, 4, 10, 0.85);
}

.rotator { display: inline-grid; vertical-align: top; text-align: center; }
.rotator__word {
  grid-area: 1 / 1; color: var(--cosmic); white-space: nowrap;
  opacity: 0; transform: translateY(0.42em); filter: blur(6px);
  transition: opacity 0.55s var(--ease), transform 0.7s var(--ease), filter 0.55s var(--ease);
}
.rotator__word.is-active { opacity: 1; transform: none; filter: none; }
.rotator__word.is-out { opacity: 0; transform: translateY(-0.42em); filter: blur(6px); }

.trust { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; padding-top: 24px; border-top: 1px solid var(--line); }
.trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.756rem; color: var(--muted); }
.trust .ico { width: 14px; height: 14px; color: var(--cosmic); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--f-display); font-size: 0.549rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted);
}
.scroll-cue i { display: block; width: 1px; height: 46px; background: linear-gradient(180deg, var(--cosmic), transparent); }
.scroll-cue::after {
  content: ""; position: absolute; bottom: 0; left: calc(50% - 0.5px); width: 1px; height: 46px;
  background: var(--cosmic); transform-origin: top;
  animation: cue 2.4s var(--ease-io) infinite;
}
@keyframes cue { 0% { transform: scaleY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 11b. Stage gap ----------
   A deliberate hole in the content where the scene plays unobstructed, then
   copy resumes. These used to host body-to-body handovers and needed a full
   screen and a half; with a single continuous Earth shot they only need
   enough room to watch the network gain a few links. */
.stage-gap {
  position: relative;
  height: 82vh;
  background: transparent;
  pointer-events: none;
}
/* Feather into the scrimmed sections above and below so the opening reads as
   the page breathing rather than a missing background. */
.stage-gap::before,
.stage-gap::after {
  content: ""; position: absolute; left: 0; right: 0; height: 26vh;
}
.stage-gap::before { top: 0; background: linear-gradient(180deg, var(--scrim), transparent); }
.stage-gap::after { bottom: 0; background: linear-gradient(0deg, var(--scrim), transparent); }

.stage-gap__cue {
  position: absolute; left: 50%; top: 46%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-family: var(--f-display); font-size: 0.549rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted);
  text-shadow: 0 1px 14px rgba(2, 4, 10, 0.9);
}
.stage-gap__cue i { display: block; width: 1px; height: 54px; background: linear-gradient(180deg, var(--cosmic), transparent); }
.stage-gap__cue::after {
  content: ""; position: absolute; bottom: 0; left: calc(50% - 0.5px); width: 1px; height: 54px;
  background: var(--cosmic); transform-origin: top;
  animation: cue 2.6s var(--ease-io) infinite;
}
@media (max-width: 720px) { .stage-gap { height: 68vh; } }


/* ---------- 11c. Geo tag ----------
   The Melbourne marker. Kept in HTML rather than drawn into the canvas so the
   label stays crisp at any DPR and inherits the site typeface. scene.js
   projects Melbourne's world position and drives transform + opacity. */
.geo-tag {
  position: fixed; left: 0; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease);
  will-change: transform, opacity;
}
.geo-tag__dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--cosmic), 0 0 14px 3px rgba(0, 180, 255, 0.85);
  flex-shrink: 0;
}
.geo-tag__ring {
  position: absolute; left: -11px; top: 50%; margin-top: -16px;
  width: 33px; height: 33px; border-radius: 50%;
  border: 1px solid rgba(0, 180, 255, 0.75);
  animation: geo-ping 2.6s var(--ease-io) infinite;
}
@keyframes geo-ping {
  0%   { transform: scale(0.35); opacity: 0.9; }
  70%  { opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
/* The label lands on sunlit Australian terrain — pale tan, high luminance.
   A text-shadow alone is not enough contrast there, so the label carries
   its own scrim. */
.geo-tag__text {
  font-family: var(--f-display); font-size: 0.86rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--white);
  line-height: 1.25; white-space: nowrap;
  padding: 7px 13px 8px; border-radius: 7px;
  background: rgba(7, 11, 23, 0.72);
  border: 1px solid rgba(0, 180, 255, 0.32);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}
.geo-tag__text em {
  display: block; font-style: normal; font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.18em; color: var(--cosmic); margin-top: 3px;
}
@media (max-width: 720px) {
  .geo-tag { gap: 9px; }
  .geo-tag__text { font-size: 0.72rem; padding: 6px 10px 7px; }
  .geo-tag__text em { font-size: 0.52rem; }
}
@media (prefers-reduced-motion: reduce) { .geo-tag { display: none; } }

/* ---------- 12. Workflow rail ---------- */
.rail { position: relative; }
.rail__track { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); background: var(--line-2); }
.rail__fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--cosmic); box-shadow: 0 0 12px rgba(0, 180, 255, 0.8); will-change: height; }
.rail__comet {
  position: absolute; left: 50%; top: 0; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 20%, var(--cosmic) 55%, transparent 74%);
  box-shadow: 0 0 18px 4px rgba(0, 180, 255, 0.75);
  opacity: 0; transition: opacity 0.35s; will-change: transform;
}
.rail.is-live .rail__comet { opacity: 1; }

.rail__step { position: relative; display: grid; grid-template-columns: 1fr 82px 1fr; align-items: center; padding-block: clamp(8px, 1.2vw, 16px); }
.rail__step--l .rail__card { grid-column: 1; }
.rail__step--r .rail__card { grid-column: 3; }

.rail__node {
  grid-column: 2; justify-self: center; position: relative;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; z-index: 2;
  background: var(--card); border: 1px solid var(--line-2); color: var(--muted);
  transition: transform 0.5s var(--ease), border-color 0.4s, color 0.4s, box-shadow 0.5s;
}
.rail__node .ico { width: 19px; height: 19px; }
.rail__node::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid rgba(0, 180, 255, 0.5); opacity: 0; transform: scale(0.75);
  transition: opacity 0.5s, transform 0.6s var(--ease);
}
.rail__step.is-lit .rail__node {
  transform: scale(1.06); border-color: var(--cosmic); color: var(--cosmic);
  box-shadow: 0 0 26px rgba(0, 180, 255, 0.4);
}
.rail__step.is-lit .rail__node::after { opacity: 1; transform: scale(1); animation: ping 2.6s ease-out infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.75); opacity: 0; } }

.rail__card {
  padding: 18px 22px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line);
  opacity: 0; transition: opacity 0.6s var(--ease), transform 0.7s var(--ease), border-color 0.4s;
}
.rail__step--l .rail__card { transform: translateX(-28px); text-align: right; }
.rail__step--r .rail__card { transform: translateX(28px); }
.rail__step.is-lit .rail__card { opacity: 1; transform: none; border-color: rgba(0, 180, 255, 0.28); }
.rail__card h4 { color: var(--white); margin-bottom: 5px; }
.rail__card p { font-size: 0.878rem; color: var(--muted); line-height: 1.8; }
.rail__idx { font-family: var(--f-display); font-size: 0.586rem; letter-spacing: 0.16em; color: var(--cosmic); display: block; margin-bottom: 8px; }

/* ---------- 13. Process flow ---------- */
.flow { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.flow__line { position: absolute; left: 8.33%; right: 8.33%; top: 31px; height: 1px; background: var(--line-2); overflow: hidden; }
.flow__line i { position: absolute; inset: 0 100% 0 0; background: var(--cosmic); box-shadow: 0 0 12px rgba(0, 180, 255, 0.8); transition: right 1.7s var(--ease-io); }
.flow.is-in .flow__line i { right: 0; }
.flow__step { position: relative; text-align: center; }
.flow__dot {
  position: relative; z-index: 2; width: 62px; height: 62px; margin: 0 auto 16px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line-2); color: var(--muted);
  transition: transform 0.6s var(--ease), border-color 0.5s, color 0.5s, box-shadow 0.6s;
}
.flow__dot .ico { width: 22px; height: 22px; }
.flow.is-in .flow__step .flow__dot {
  border-color: var(--cosmic); color: var(--cosmic); box-shadow: 0 0 30px rgba(0, 180, 255, 0.3);
  animation: pop 0.7s var(--ease) backwards; animation-delay: calc(var(--i) * 190ms);
}
@keyframes pop { 0% { transform: scale(0.55); opacity: 0; } 62% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
.flow__step:hover .flow__dot { transform: translateY(-4px); }
.flow__step h4 { color: var(--white); margin-bottom: 6px; font-size: 0.769rem; letter-spacing: 0.03em; }
.flow__step p { font-size: 0.781rem; color: var(--muted); line-height: 1.7; }

/* ---------- 14. Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { position: relative; padding: clamp(18px, 2.2vw, 32px) clamp(14px, 2vw, 30px); border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__num { font-family: var(--f-display); font-size: clamp(1.952rem, 3.782vw, 3.172rem); line-height: 1; color: var(--white); margin-bottom: 10px; }
.stat__num sup { color: var(--cosmic); font-size: 0.45em; vertical-align: super; }
.stat__label { font-size: 0.805rem; color: var(--muted); }
.stat::after {
  content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: 0;
  background: var(--cosmic); box-shadow: 0 0 10px rgba(0, 180, 255, 0.7);
  transition: height 0.7s var(--ease);
}
.stats.is-in .stat::after { height: 100%; transition-delay: calc(var(--i) * 140ms); }
.stat:first-child::after { display: none; }

/* ---------- 15. Pain / win lists ---------- */
.pain, .wins { display: grid; }
.pain li, .wins li {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 4px; border-bottom: 1px solid var(--line);
  color: var(--text); font-size: 0.927rem; line-height: 1.8;
  transition: padding-left 0.4s var(--ease), color 0.3s;
}
.pain li:hover, .wins li:hover { padding-left: 14px; color: var(--white); }
.pain li .ico { width: 16px; height: 16px; margin-top: 5px; color: #ff7a7a; }
.wins li .ico { width: 16px; height: 16px; margin-top: 5px; color: var(--cosmic); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center;
  padding: 6px 13px; border-radius: var(--r-pill);
  font-size: 0.756rem; color: var(--text);
  background: rgba(242, 244, 248, 0.05); border: 1px solid var(--line);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.chip:hover { border-color: var(--cosmic); color: var(--white); background: var(--accent-soft); }

/* ---------- 16. Pricing ---------- */
.price {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(26px, 2.8vw, 36px);
  border-radius: var(--r-lg); background: var(--card);
  border: 1px solid var(--line);
  transition: border-color 0.4s, background 0.4s, box-shadow 0.45s, transform 0.45s var(--ease);
}
.price:hover { transform: translateY(-4px); background: var(--card-hi); box-shadow: var(--shadow); }
.price--best { border-color: rgba(0, 180, 255, 0.5); box-shadow: 0 0 0 4px var(--accent-soft); }
.price__badge {
  position: absolute; top: -1px; right: 24px;
  padding: 5px 13px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-family: var(--f-display); font-size: 0.549rem; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--cosmic); color: #04202e;
}
.price__name { font-family: var(--f-display); font-size: 1.037rem; color: var(--white); margin-bottom: 10px; }
.price__for { font-size: 0.878rem; color: var(--muted); margin-bottom: 22px; min-height: 4em; line-height: 1.8; }
.price__list { display: grid; gap: 11px; margin-bottom: 26px; flex: 1; }
.price__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.891rem; color: var(--text); line-height: 1.75; }
.price__list li .ico { width: 15px; height: 15px; margin-top: 5px; color: var(--cosmic); }
.price__list li.is-inherit { color: var(--white); padding-bottom: 11px; border-bottom: 1px solid var(--line); }

/* ---------- 17. CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  border-radius: var(--r-lg); padding: clamp(38px, 5vw, 74px) clamp(24px, 5vw, 64px);
  background: linear-gradient(150deg, #101a38, #16255033 60%, #0d2c52);
  border: 1px solid var(--line-2);
}
.cta-band::before {
  content: ""; position: absolute; left: 50%; top: -60%; width: 120%; height: 200%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 40% at 50% 50%, rgba(0, 180, 255, 0.16), transparent 70%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: 16px; }
.cta-band .lede { margin: 0 auto 30px; }

/* ---------- 18. Forms ---------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 0.781rem; color: var(--text); letter-spacing: 0.02em; }
.field label span { color: var(--cosmic); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px;
  background: rgba(7, 11, 23, 0.7); border: 1px solid var(--line-2);
  border-radius: var(--r-md); color: var(--white); font-size: 0.903rem;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.field textarea { resize: vertical; min-height: 118px; line-height: 1.8; }
.field input::placeholder, .field textarea::placeholder { color: #6b7791; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cosmic); box-shadow: 0 0 0 3px var(--accent-soft); background: rgba(7, 11, 23, 0.9);
}
.field select {
  appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3aec2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;
}
.field select option { background: var(--surface); color: var(--white); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__note { font-size: 0.756rem; color: var(--muted); line-height: 1.75; }
.form__ok {
  display: none; padding: 15px 18px; border-radius: var(--r-md);
  background: var(--accent-soft); border: 1px solid rgba(0, 180, 255, 0.4);
  color: var(--white); font-size: 0.903rem;
}
.form__ok.is-shown { display: block; animation: rise 0.6s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* ---------- 19. Accordion ---------- */
.acc { border-bottom: 1px solid var(--line); }
.acc__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%;
  padding: 20px 2px; background: none; border: 0; cursor: pointer;
  font-family: var(--f-body); font-weight: 500; font-size: 1rem; color: var(--white); text-align: left;
  letter-spacing: -0.005em; line-height: 1.6; transition: color 0.3s;
}
.acc__q:hover { color: var(--cosmic); }
.acc__sign { position: relative; flex-shrink: 0; width: 16px; height: 16px; }
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; border-radius: 2px;
  background: var(--cosmic); transition: transform 0.4s var(--ease);
}
.acc__sign::after { transform: rotate(90deg); }
.acc.is-open .acc__sign::after { transform: rotate(0); }
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.acc.is-open .acc__a { grid-template-rows: 1fr; }
.acc__a > div { overflow: hidden; }
.acc__a p { padding: 0 2px 22px; font-size: 0.903rem; color: var(--muted); max-width: 74ch; line-height: 1.9; }

/* ---------- 20. Interior page hero ---------- */
.page-hero {
  position: relative; background: transparent;
  padding: calc(var(--nav-h) + clamp(52px, 6vw, 88px)) 0 clamp(88px, 9vw, 132px);
  min-height: 62svh; display: flex; align-items: center;
}
.page-hero > .container { width: 100%; position: relative; z-index: 1; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.756rem; color: var(--muted); margin-bottom: 20px; }
.crumbs a:hover { color: var(--cosmic); }
.crumbs span { opacity: 0.5; }

/* ---------- 21. Footer ---------- */
/* Opaque on purpose — the footer lockup is screen-blended against it. */
.footer { position: relative; border-top: 1px solid var(--line); padding: clamp(46px, 5vw, 72px) 0 28px; background: var(--bg-deep); }
.footer__about p { margin-top: 20px; }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: clamp(24px, 3vw, 46px); margin-bottom: 42px; }
.footer__about p { font-size: 0.878rem; color: var(--muted); margin: 18px 0 22px; max-width: 42ch; line-height: 1.85; }
.footer h5 { font-family: var(--f-display); font-size: 0.634rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; }
.footer__links { display: grid; gap: 10px; }
.footer__links a { font-size: 0.854rem; color: var(--muted); transition: color 0.25s; }
.footer__links a:hover { color: var(--cosmic); }
.footer__bar {
  display: flex; flex-wrap: wrap; gap: 12px 20px;
  justify-content: space-between; align-items: center;
  padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 0.756rem; color: var(--muted);
}
/* Was a single run-on line — "© 2026 ScalePilot AI. Scale Your Business With
   AI. ABN 87 165 880 143." reads as one sentence with the ABN glued to the
   end of it. Three separate items with dividers, so each is legible on its
   own. */
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.footer__legal > span { display: inline-flex; align-items: center; }
.footer__legal > span + span::before {
  content: ""; width: 1px; height: 11px; margin-right: 14px;
  background: var(--line-2);
}
.footer__abn { color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
@media (max-width: 560px) {
  .footer__legal > span + span::before { display: none; }
  .footer__legal { gap: 4px; flex-direction: column; align-items: flex-start; }
}
.socials { display: flex; gap: 8px; }
.socials a {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--muted);
  transition: border-color 0.3s, color 0.3s, transform 0.35s var(--ease);
}
.socials a:hover { border-color: var(--cosmic); color: var(--cosmic); transform: translateY(-2px); }
.socials svg { width: 15px; height: 15px; }

/* ---------- 22. Reveal ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
[data-reveal="left"] { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="fade"] { transform: none; }
[data-reveal].is-in { opacity: 1; transform: none; }

[data-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity 0.75s var(--ease), transform 0.85s var(--ease); }
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: 80ms; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: 160ms; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: 240ms; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: 320ms; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: 400ms; }
[data-stagger].is-in > *:nth-child(7) { transition-delay: 480ms; }
[data-stagger].is-in > *:nth-child(n + 8) { transition-delay: 560ms; }

/* ---------- 23. Responsive ---------- */
@media (max-width: 1330px) {
  .nav { display: none; }
  .header__util { display: none; }
  .burger { display: block; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .flow { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .flow__line { display: none; }
  .form__row { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(3)::after { display: none; }
  .slist__row { grid-template-columns: 44px 1fr auto; }
  .slist__row p { grid-column: 2 / -1; }
}
@media (max-width: 720px) {
  :root { --util-h: 0px; --nav-h: 66px; }
  .rail__step { grid-template-columns: 46px 1fr; gap: 16px; }
  .rail__track, .rail__comet { left: 23px; }
  .rail__node { grid-column: 1; }
  .rail__step--l .rail__card, .rail__step--r .rail__card { grid-column: 2; text-align: left; transform: translateX(22px); }
  .rail__step.is-lit .rail__card { transform: none; }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bar { justify-content: center; text-align: center; }
  .scroll-cue { display: none; }
}
@media (max-width: 460px) {
  .flow { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: 0; padding-left: 0; }
  .stat::after { display: none; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
}

/* ---------- 24. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal], [data-stagger] > *, .rail__card { opacity: 1 !important; transform: none !important; }
  #scene, #starfield { display: none; }
  /* No scene behind the hero, so give it a real background of its own. */
  .hero, .page-hero { background: var(--bg); }
  .hero::after, .page-hero::after { display: none; }
  .hero h1, .hero .lede, .hero__sub, .hero .eyebrow, .hero .trust,
  .page-hero h1, .page-hero .lede, .page-hero .eyebrow, .page-hero .crumbs { text-shadow: none; }
}

/* ---------- 26. Industry detail pages ----------
   These pages were six card grids stacked on top of each other. Cards are
   the right shape for peers of equal weight and the wrong shape for
   argument, comparison, sequence or reference — which is most of what an
   industry page actually contains. Each block below is the format its
   content wanted. */

/* -- jump nav: long pages need a way in other than scrolling -- */
.jump {
  display: flex; flex-wrap: wrap; gap: 6px 8px;
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line);
}
.jump a {
  font-family: var(--f-display); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-2); transition: color .3s, border-color .3s, background .3s;
}
.jump a:hover { color: var(--white); border-color: var(--cosmic); background: rgba(0, 180, 255, 0.08); }

/* -- the opening argument: prose, deliberately not a box -- */
.lens {
  font-size: clamp(1.06rem, 0.5vw + 1rem, 1.32rem);
  line-height: 1.72; color: var(--text);
  padding-left: clamp(18px, 2.4vw, 30px);
  border-left: 2px solid var(--cosmic);
}

/* -- tabbed component stack -- */
.tabs { display: grid; grid-template-columns: minmax(210px, 268px) 1fr; gap: clamp(20px, 3vw, 46px); align-items: start; }
.tabs__rail { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 96px; }
.tabs__tab {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 15px; border-radius: 10px; cursor: pointer;
  background: none; border: 1px solid transparent; text-align: left;
  font-family: var(--f-body); font-size: 0.92rem; font-weight: 500; color: var(--muted);
  transition: color .3s, background .3s, border-color .3s;
}
.tabs__tab:hover { color: var(--white); background: var(--card); }
.tabs__tab.is-on { color: var(--white); background: var(--card-hi); border-color: rgba(0, 180, 255, 0.34); }
.tabs__ico {
  display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px;
  border-radius: 8px; border: 1px solid var(--line-2); color: var(--muted);
  transition: color .3s, border-color .3s, box-shadow .3s;
}
.tabs__ico .ico { width: 16px; height: 16px; }
.tabs__tab.is-on .tabs__ico { color: var(--cosmic); border-color: var(--cosmic); box-shadow: 0 0 16px rgba(0, 180, 255, 0.26); }
.tabs__name { line-height: 1.35; }

.tabs__body { min-height: 380px; }
.tabs__panel { animation: tab-in .42s var(--ease) both; }
.tabs__panel[hidden] { display: none; }
@keyframes tab-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.tabs__idx {
  display: block; font-family: var(--f-display); font-size: 0.62rem;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--cosmic); margin-bottom: 12px;
}
.tabs__panel h3 { font-size: clamp(1.3rem, 1.4vw + 1rem, 1.72rem); margin-bottom: 14px; }
/* The industry-specific line is the point of the panel; the generic service
   blurb underneath is supporting, and is styled to say so. */
.tabs__note { font-size: 1.02rem; line-height: 1.8; color: var(--text); margin-bottom: 14px; }
.tabs__gen { font-size: 0.92rem; line-height: 1.85; color: var(--muted); padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.tabs__panel .wins { margin: 20px 0 26px; }

/* -- before / after -- */
.shift { border-top: 1px solid var(--line-2); }
.shift__head, .shift__row { display: grid; grid-template-columns: 1.05fr 1fr 1.25fr; gap: clamp(14px, 2vw, 30px); align-items: start; }
.shift__head {
  padding: 14px 4px; font-family: var(--f-display); font-size: 0.62rem;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line-2);
}
.shift__row { padding: 20px 4px; border-bottom: 1px solid var(--line); transition: background .3s; }
.shift__row:hover { background: rgba(255, 255, 255, 0.022); }
.shift__when { color: var(--white); font-weight: 500; font-size: 0.95rem; line-height: 1.6; }
/* Strike-through would be cute and unreadable; the dimming does the work. */
.shift__now { color: var(--muted); font-size: 0.9rem; line-height: 1.7; }
.shift__next { display: flex; gap: 10px; color: var(--text); font-size: 0.93rem; line-height: 1.7; }
.shift__next .ico { flex-shrink: 0; width: 17px; height: 17px; margin-top: 3px; color: var(--cosmic); }

/* -- the arithmetic -- */
.calc {
  display: grid; grid-template-columns: 1fr minmax(230px, 300px);
  gap: clamp(24px, 3.4vw, 52px); align-items: center;
  padding: clamp(24px, 3vw, 40px); border-radius: 16px;
  background: var(--card); border: 1px solid var(--line-2);
}
.calc__controls { display: grid; gap: 24px; }
.calc__ctl { display: block; }
.calc__lbl {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-size: 0.88rem; color: var(--muted); margin-bottom: 11px;
}
.calc__lbl b { font-family: var(--f-display); font-size: 1rem; font-weight: 600; color: var(--white); font-variant-numeric: tabular-nums; }
.calc input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 3px;
  border-radius: 3px; background: var(--line-2); outline-offset: 6px; cursor: pointer;
}
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border-radius: 50%;
  background: var(--cosmic); border: 3px solid var(--bg-deep);
  box-shadow: 0 0 12px rgba(0, 180, 255, 0.6); transition: transform .2s;
}
.calc input[type="range"]::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%; border: 3px solid var(--bg-deep);
  background: var(--cosmic); box-shadow: 0 0 12px rgba(0, 180, 255, 0.6);
}
.calc input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }
.calc__out { text-align: center; padding: 26px 18px; border-radius: 13px; background: var(--bg-deep); border: 1px solid rgba(0, 180, 255, 0.24); }
.calc__out-lbl {
  display: block; font-family: var(--f-display); font-size: 0.62rem;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.calc__fig {
  display: block; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem); color: var(--white); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.calc__sub { display: block; margin-top: 10px; font-size: 0.84rem; color: var(--muted); }
.calc__sub b { color: var(--cosmic); font-weight: 500; font-variant-numeric: tabular-nums; }
.calc__note { margin-top: 20px; font-size: 0.84rem; color: var(--muted); line-height: 1.8; max-width: 68ch; }

/* -- rollout phases -- */
.phases { position: relative; list-style: none; padding-left: clamp(38px, 5vw, 62px); }
.phases::before { content: ""; position: absolute; left: clamp(15px, 2vw, 25px); top: 10px; bottom: 22px; width: 1px; background: var(--line-2); }
.phase { position: relative; padding-bottom: clamp(26px, 3vw, 40px); }
.phase__mark {
  position: absolute; left: calc(clamp(38px, 5vw, 62px) * -1); top: 0;
  display: grid; place-items: center;
  width: clamp(31px, 4vw, 51px); height: clamp(31px, 4vw, 51px);
  border-radius: 50%; background: var(--bg-deep); border: 1px solid var(--line-2);
  font-family: var(--f-display); font-size: 0.72rem; font-weight: 600; color: var(--muted);
  transition: color .4s, border-color .4s, box-shadow .4s;
}
.phase.is-in .phase__mark { color: var(--cosmic); border-color: var(--cosmic); box-shadow: 0 0 20px rgba(0, 180, 255, 0.3); }
.phase__when {
  display: block; font-family: var(--f-display); font-size: 0.63rem;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--cosmic); margin-bottom: 8px;
}
.phase__body h3 { font-size: clamp(1.12rem, 1vw + 0.9rem, 1.36rem); margin-bottom: 9px; }
.phase__body p { font-size: 0.93rem; color: var(--muted); line-height: 1.86; max-width: 72ch; }

/* -- keyword-anchored internal links --
   Styled as real navigation rather than as a keyword list, because that is
   what it is. A visible block of search phrases only earns its place if a
   reader would plausibly click it. */
.terms { display: flex; flex-wrap: wrap; gap: 9px; }
.terms a {
  display: inline-flex; align-items: center;
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--card);
  font-size: 0.86rem; color: var(--text);
  transition: color .3s, border-color .3s, background .3s, transform .3s;
}
.terms a::after {
  content: "\2192"; margin-left: 8px; color: var(--cosmic);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .3s, transform .3s;
}
.terms a:hover {
  color: var(--white); border-color: var(--cosmic);
  background: var(--card-hi); transform: translateY(-2px);
}
.terms a:hover::after { opacity: 1; transform: none; }
.terms__also { margin-top: 22px; font-size: 0.82rem; color: var(--muted); line-height: 1.9; max-width: 76ch; }

@media (max-width: 900px) {
  .tabs { grid-template-columns: 1fr; }
  .tabs__rail { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; gap: 7px; scrollbar-width: none; }
  .tabs__rail::-webkit-scrollbar { display: none; }
  .tabs__tab { flex: 0 0 auto; }
  /* Collapse to icons so six tabs fit; the active one keeps its label. */
  .tabs__name { display: none; }
  .tabs__tab.is-on .tabs__name { display: block; }
  .tabs__body { min-height: 0; }
  .calc { grid-template-columns: 1fr; }
  .shift__head { display: none; }
  .shift__row { grid-template-columns: 1fr; gap: 7px; padding: 18px 4px; }
  .shift__now::before { content: "Today — "; opacity: .7; }
}

/* ---------- 27. Contact card in the nav ---------- */
.mega--card { min-width: 302px; padding: 10px; }
.mega__contact {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 12px; border-radius: var(--r-md); color: var(--text);
  opacity: 0; transform: translateY(9px);
  transition: background 0.25s, color 0.25s,
              opacity 0.34s var(--ease), transform 0.34s var(--ease);
}
.nav__item:hover .mega__contact,
.nav__item:focus-within .mega__contact {
  opacity: 1; transform: none;
  transition-delay: 0s, 0s, calc(var(--i, 0) * 34ms + 50ms), calc(var(--i, 0) * 34ms + 50ms);
}
.mega__contact:hover { background: var(--accent-soft); color: var(--white); }
.mega__contact .ico { width: 19px; height: 19px; flex-shrink: 0; color: var(--cosmic); transition: transform 0.3s var(--ease); }
.mega__contact:hover .ico { transform: scale(1.12); }
.mega__contact span {
  display: block; font-family: var(--f-display); font-weight: 500;
  font-size: 0.85rem; letter-spacing: 0.02em; line-height: 1.35;
}
.mega__contact small {
  display: block; font-family: var(--f-body); font-weight: 400; letter-spacing: 0;
  font-size: 0.66rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.13em; margin-bottom: 3px;
}
.mega__book {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px; padding: 12px; border-radius: var(--r-md);
  background: var(--cosmic); color: #041018;
  font-family: var(--f-display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.03em;
  opacity: 0; transform: translateY(9px);
  transition: filter 0.25s, opacity 0.34s var(--ease), transform 0.34s var(--ease);
}
.nav__item:hover .mega__book,
.nav__item:focus-within .mega__book {
  opacity: 1; transform: none;
  transition-delay: 0s, calc(var(--i, 0) * 34ms + 50ms), calc(var(--i, 0) * 34ms + 50ms);
}
.mega__book:hover { filter: brightness(1.12); }
.mega__book .ico { width: 16px; height: 16px; }

/* ---------- 28. Drawer contact details ---------- */
.drawer__reach { display: grid; gap: 2px; padding: 16px 0 6px; border-top: 1px solid var(--line); margin-top: 10px; }
.drawer__reach a {
  display: flex; align-items: center; gap: 12px; padding: 11px 2px;
  font-family: var(--f-display); font-weight: 500; font-size: 0.86rem;
  letter-spacing: 0.02em; color: var(--text); transition: color 0.25s;
}
.drawer__reach a:hover { color: var(--cosmic); }
.drawer__reach .ico { width: 18px; height: 18px; color: var(--cosmic); flex-shrink: 0; }

/* ---------- 29. Floating call / WhatsApp ----------
   Two separate buttons rather than one that expands into two. An extra tap
   between someone deciding to call and being able to is an extra chance to
   change their mind. */
.fab {
  position: fixed; right: clamp(14px, 2vw, 24px); bottom: clamp(14px, 2vw, 26px);
  z-index: 150; display: flex; flex-direction: column; gap: 13px;
}
.fab__btn {
  position: relative;
  display: grid; place-items: center;
  width: clamp(48px, 5vw, 56px); height: clamp(48px, 5vw, 56px);
  border-radius: 50%; color: #fff;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42);
  /* Each button drops in after the page has settled, staggered, so they
     read as one gesture instead of two things popping. */
  opacity: 0; transform: translateY(16px) scale(0.85);
  animation: fab-in 0.55s var(--ease) forwards;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.fab__btn--call { background: #2f7cf6; animation-delay: 1.1s; }
.fab__btn--wa { background: #25d366; animation-delay: 1.25s; }
.fab__btn .ico { width: 24px; height: 24px; }
.fab__btn:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
@keyframes fab-in { to { opacity: 1; transform: none; } }

/* A single slow ring on WhatsApp only. Pulsing both would be noise, and
   noise is what makes a floating button feel like an advert. */
.fab__btn--wa::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25d366; opacity: 0;
  animation: fab-ring 2.8s ease-out 2.2s infinite;
}
@keyframes fab-ring {
  0% { transform: scale(1); opacity: 0.65; }
  70% { opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}

.fab__tip {
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 7px 12px; border-radius: 8px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--white);
  font-family: var(--f-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em;
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s, transform 0.28s var(--ease);
}
.fab__btn:hover .fab__tip, .fab__btn:focus-visible .fab__tip {
  opacity: 1; transform: translateY(-50%);
}
@media (max-width: 720px) {
  /* The tooltip has nothing to point at on a touch screen. */
  .fab__tip { display: none; }
  .fab { gap: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .fab__btn { opacity: 1; transform: none; animation: none; }
  .fab__btn--wa::before { animation: none; }
}

/* ---------- 30. The consultation card ----------
   Brand palette, not the reference image's crimson-to-blue. The layout is
   the one from the photo — eyebrow, title, three feature badges, contact
   row, two pill buttons — but it is built from the site's own surfaces so
   the contact page reads as the same site as every other page. The colour
   comes from a cyan glow and cyan accents, not from a saturated gradient
   that fights the header sitting above it. */
.ccard {
  position: relative; overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(160deg, var(--surface) 0%, var(--card) 46%, var(--bg-deep) 100%);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
/* Cyan light bleeding in from the corners, which is where the colour comes
   from now — enough to feel lit, not enough to compete with the copy. */
.ccard__aura {
  position: absolute; inset: -50% -20% auto -30%; height: 190%;
  background:
    radial-gradient(42% 46% at 18% 8%, rgba(0, 180, 255, 0.24), transparent 66%),
    radial-gradient(38% 42% at 88% 96%, rgba(109, 0, 255, 0.20), transparent 68%);
  pointer-events: none; z-index: -1;
}
/* A hairline of brand colour along the top edge. */
.ccard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cosmic), transparent);
  opacity: 0.85;
}
.ccard__inner { position: relative; padding: clamp(26px, 3.2vw, 46px); text-align: center; }

.ccard__eyebrow {
  display: inline-block; margin-bottom: 15px; padding: 6px 14px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid rgba(0, 180, 255, 0.34);
  font-family: var(--f-display); font-size: 0.63rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cosmic);
}
.ccard__title {
  font-family: var(--f-display); font-weight: 700; letter-spacing: 0.018em;
  line-height: 1.2; color: var(--white); margin-bottom: 11px;
}
.ccard__lede {
  font-family: var(--f-display); font-weight: 500; color: var(--cosmic);
  font-size: clamp(0.98rem, 0.5vw + 0.86rem, 1.18rem); margin-bottom: 12px;
}
.ccard__text { color: var(--muted); line-height: 1.8; margin-inline: auto; max-width: 62ch; }

.ccard__feats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(16px, 3vw, 46px); margin: clamp(24px, 3vw, 34px) 0;
}
.ccard__feats li {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--f-display); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.04em; color: var(--text); text-align: center;
}
.ccard__feats .ico {
  width: 30px; height: 30px; padding: 8px; border-radius: 11px;
  background: var(--card-hi); border: 1px solid var(--line-2); color: var(--cosmic);
  box-sizing: content-box;
  transition: transform 0.35s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.ccard__feats li:hover .ico {
  transform: translateY(-3px); border-color: var(--cosmic);
  box-shadow: 0 0 20px rgba(0, 180, 255, 0.28);
}

.ccard__reach {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 10px;
  padding-top: clamp(20px, 2vw, 26px); border-top: 1px solid var(--line);
}
.ccard__reach a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line-2); color: var(--text);
  font-size: 0.85rem;
  transition: color 0.28s, background 0.28s, border-color 0.28s, transform 0.28s var(--ease);
}
.ccard__reach a:hover {
  color: var(--white); background: var(--card-hi);
  border-color: var(--cosmic); transform: translateY(-2px);
}
.ccard__reach .ico { width: 16px; height: 16px; flex-shrink: 0; color: var(--cosmic); }

.ccard__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(22px, 2.4vw, 30px); }
.ccard__btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: 999px;
  font-family: var(--f-display); font-weight: 600; font-size: 0.88rem; letter-spacing: 0.03em;
  transition: transform 0.3s var(--ease), box-shadow 0.3s, background 0.3s, border-color 0.3s;
}
.ccard__btn .ico { width: 17px; height: 17px; }
.ccard__btn--solid {
  background: var(--cosmic); color: #041018;
  box-shadow: 0 8px 26px rgba(0, 180, 255, 0.3);
}
.ccard__btn--ghost { background: transparent; color: var(--white); border: 1.5px solid var(--line-2); }
.ccard__btn--ghost:hover { border-color: var(--cosmic); background: var(--accent-soft); }
.ccard__btn:hover { transform: translateY(-3px); }
.ccard__btn--solid:hover { box-shadow: 0 14px 34px rgba(0, 180, 255, 0.42); }

/* -- on the contact page -- */
.ccard-wrap { padding-top: calc(var(--nav-h) + clamp(26px, 4vw, 54px)); }
.ccard--page .ccard__title { font-size: clamp(1.7rem, 3.4vw, 2.9rem); }

@media (max-width: 620px) {
  .ccard__feats { gap: 18px; }
  .ccard__btn, .ccard__reach a { flex: 1 1 100%; justify-content: center; }
}


/* ---------- 32. Panel mega menu ---------- */
.mega--panel {
  display: grid; grid-template-columns: 232px 1fr;
  width: min(880px, calc(100vw - 40px)); min-width: 0; padding: 0;
  overflow: hidden;
}
.mega__lead {
  display: flex; flex-direction: column; justify-content: center;
  gap: 12px; padding: 26px 24px;
  background: linear-gradient(165deg, rgba(0, 180, 255, 0.10), rgba(109, 0, 255, 0.10));
  border-right: 1px solid var(--line);
}
.mega__kicker {
  font-family: var(--f-display); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.19em; text-transform: uppercase; color: var(--cosmic);
}
.mega__blurb { font-size: 0.82rem; line-height: 1.75; color: var(--muted); }
.mega__all {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 2px;
  font-family: var(--f-display); font-weight: 600; font-size: 0.76rem;
  letter-spacing: 0.03em; color: var(--white);
}
.mega__all .ico { width: 15px; height: 15px; color: var(--cosmic); transition: transform 0.3s var(--ease); }
.mega__all:hover .ico { transform: translateX(4px); }
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 10px; }
.mega__grid--svc { grid-template-columns: 1fr 1fr; }

@media (max-width: 1120px) {
  .mega--panel { grid-template-columns: 1fr; }
  .mega__lead { flex-direction: row; align-items: center; justify-content: space-between; padding: 16px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .mega__blurb { display: none; }
}

/* ---------- 33. Drawer entrance ---------- */
.drawer__group, .drawer__reach, .drawer > .btn {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
body.nav-open .drawer__group,
body.nav-open .drawer__reach,
body.nav-open .drawer > .btn {
  opacity: 1; transform: none;
  transition-delay: calc(var(--g, 7) * 45ms + 60ms);
}
.drawer__reach { --g: 8; }
.drawer > .btn { --g: 9; }
/* Sub-items cascade after their group opens. */
.drawer__sub a { opacity: 0; transform: translateX(-8px); transition: opacity 0.32s var(--ease), transform 0.32s var(--ease); }
.drawer__group.is-open .drawer__sub a { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 26ms); }

@media (prefers-reduced-motion: reduce) {
  .drawer__group, .drawer__reach, .drawer > .btn, .drawer__sub a { opacity: 1; transform: none; transition: none; }
  .nav__ind { transition: opacity 0.2s; }
}

/* ---------- 34. Logo lockup (comparison build) ----------
   op1/op2/op3 are transparent PNGs, unlike the original artwork which sat
   on black — so NO mix-blend-mode here. Screen blending exists to knock a
   black background out losslessly; applied to a file that already has an
   alpha channel it only distorts the antialiased edges.

   Sized by WIDTH, not height. All three share the same 1376px wordmark and
   differ only in how much room the tagline gets underneath, so a fixed
   width renders each at its true proportions and the height difference is
   exactly what is being judged. */
.brand--art { display: block; flex-shrink: 0; }
.brand__art {
  display: block; width: clamp(178px, 17vw, 232px); height: auto;
  transition: transform 0.6s var(--ease), width 0.4s var(--ease), opacity 0.3s;
}
.brand--art:hover .brand__art { transform: scale(1.03); }
.header.is-stuck .brand__art { width: clamp(158px, 14vw, 196px); }

.footer .brand__lockup {
  display: block; width: min(260px, 100%); height: auto;
  mix-blend-mode: normal;
  transition: transform 0.6s var(--ease);
}


/* ---------- 35. Home-page consultation popup ----------
   Reuses .ccard, so the popup, the contact page hero and any future
   placement stay identical by construction rather than by discipline. */
.popup {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  padding: clamp(14px, 3vw, 34px);
}
.popup[hidden] { display: none; }
.popup__scrim {
  position: absolute; inset: 0;
  background: rgba(4, 7, 18, 0.74);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.popup.is-on .popup__scrim { opacity: 1; }

.popup__box {
  position: relative; width: min(468px, 100%);
  /* ONE height for both views, and it never scrolls. Previously the box
     sized to its content: 352px as the pitch, 574px as the wizard, so it
     jumped 222px on Book Appointment and overflowed any viewport under
     642px — at which point the nav, carrying the submit button, was the
     first thing pushed out of sight. */
  height: min(560px, calc(100vh - clamp(24px, 5vw, 56px)));
  overflow: hidden; overscroll-behavior: contain;
  opacity: 0; transform: translateY(22px) scale(0.965);
  transition: opacity 0.46s var(--ease), transform 0.46s var(--ease);
}
.popup.is-on .popup__box { opacity: 1; transform: none; }


/* -- the modal runs tighter than the contact-page hero --
   A page hero can afford to breathe; a popup is an interruption, and every
   pixel of it is charged to the visitor. The two biggest savings are the
   feature badges (icon beside the label instead of stacked above it) and
   the contact row, which becomes one line of small links. */
.ccard--modal { border-radius: 18px; }
.ccard--modal .ccard__inner { padding: 26px 24px 24px; }
.ccard--modal .ccard__eyebrow { margin-bottom: 11px; padding: 5px 12px; font-size: 0.58rem; }
.ccard--modal .ccard__title { font-size: clamp(1.28rem, 4vw, 1.56rem); margin-bottom: 7px; }
.ccard--modal .ccard__lede { font-size: 0.94rem; margin-bottom: 8px; }
.ccard--modal .ccard__text { font-size: 0.86rem; line-height: 1.65; max-width: 42ch; }

/* Icon beside the label, stacked vertically as a list: three rows of 26px
   instead of a 130px band of centred columns. */
.ccard--modal .ccard__feats {
  display: grid; gap: 8px; margin: 16px 0 14px;
  justify-content: stretch; text-align: left;
}
.ccard--modal .ccard__feats li {
  flex-direction: row; align-items: center; gap: 10px;
  font-size: 0.79rem; text-align: left;
}
.ccard--modal .ccard__feats .ico { width: 15px; height: 15px; padding: 6px; border-radius: 8px; }


/* The contact row used to sit here and carried the divider above the
   buttons. With it gone the CTA inherits both jobs. */
.ccard--modal .ccard__cta {
  margin-top: 18px; padding-top: 18px; gap: 9px;
  border-top: 1px solid var(--line);
}
.ccard--modal .ccard__btn { padding: 11px 20px; font-size: 0.82rem; }
.ccard--modal .ccard__btn .ico { width: 15px; height: 15px; }

.ccard--modal .ccard__close { top: 10px; right: 10px; width: 32px; height: 32px; }
.ccard--modal .ccard__close span { left: 9px; top: 15px; width: 13px; }

.ccard__close {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.09); border: 1px solid var(--line-2);
  transition: background 0.26s, border-color 0.26s;
}
.ccard__close span {
  position: absolute; left: 11px; top: 18px; width: 15px; height: 1.6px;
  border-radius: 2px; background: var(--white);
}
.ccard__close span:first-child { transform: rotate(45deg); }
.ccard__close span:last-child { transform: rotate(-45deg); }
.ccard__close:hover { background: var(--card-hi); border-color: var(--cosmic); }

/* The scene keeps animating behind a modal otherwise, which is both a
   distraction and wasted frames. */
body.popup-open { overflow: hidden; }

@media (max-width: 620px) {
  .ccard--modal .ccard__inner { padding: 22px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .popup__box { transition: opacity 0.2s; transform: none; }
  .popup.is-on .popup__box { transform: none; }
}

/* ---------- 36. Cursor shooting-star trail ----------
   z-index 1: above the scene canvas (0), below main/footer (2). The hero is
   transparent so it shows at full strength there; behind the scrimmed
   sections it fades out of the way on its own, which is what keeps it a
   background effect rather than something streaking across the copy. */
#trail {
  position: fixed; inset: 0; z-index: 1;
  width: 100vw; height: 100vh; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { #trail { display: none; } }

/* ---------- 37. Real business details ---------- */
.fab__btn--mail { background: var(--cosmic); animation-delay: 1.1s; }
.header__hours--addr { display: inline-flex; }

.drawer__addr {
  display: flex; align-items: center; gap: 12px; padding: 11px 2px;
  font-family: var(--f-body); font-size: 0.8rem; color: var(--muted); line-height: 1.5;
}
.drawer__addr .ico { width: 18px; height: 18px; color: var(--cosmic); flex-shrink: 0; }
.footer__addr {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 18px;
  font-style: normal; font-size: 0.8rem; color: var(--muted); line-height: 1.7;
}
.footer__addr .ico { width: 16px; height: 16px; color: var(--cosmic); flex-shrink: 0; margin-top: 3px; }
.footer__abn { color: var(--muted); opacity: 0.85; }
/* Social marks only appear once a URL exists, so this block styles whatever
   is actually present rather than a fixed set. */
.socials a { transition: color 0.28s, transform 0.3s var(--ease); }
.socials a:hover { color: var(--cosmic); transform: translateY(-2px); }

/* ---------- 38. Mega-menu panel artwork ----------
   Inline SVG, coloured from the same variables as everything else, so the
   panels gain a picture without gaining a request or a stock photo. */
.mega__art { display: block; width: 100%; height: auto; margin-bottom: 14px; overflow: visible; }

/* -- Services: eight capabilities wired to one hub -- */
.net__ring line { stroke: var(--line-2); stroke-width: 0.5; }
.net__spoke line { stroke: rgba(0, 180, 255, 0.42); stroke-width: 0.7; }
.net__node circle {
  fill: var(--bg-deep); stroke: var(--cosmic); stroke-width: 1;
  opacity: 0.55;
  animation: net-node 3.6s var(--ease-io) infinite;
  animation-delay: calc(var(--n) * 0.24s);
}
@keyframes net-node {
  0%, 100% { opacity: 0.45; r: 2.4; }
  22%      { opacity: 1; r: 3.1; }
}
.net__hub { fill: var(--cosmic); }
.net__hub-glow { fill: var(--cosmic); opacity: 0.14; animation: net-hub 3.6s var(--ease-io) infinite; }
@keyframes net-hub {
  0%, 100% { opacity: 0.1; r: 10; }
  50%      { opacity: 0.24; r: 13; }
}

/* -- Industries: the mainland, traced from the Blue Marble texture -- */
.map__land {
  fill: rgba(0, 180, 255, 0.13);
  stroke: rgba(0, 180, 255, 0.65);
  stroke-width: 0.7; stroke-linejoin: round;
}
.map__pin { fill: #fff; }
.map__ping {
  fill: none; stroke: var(--cosmic); stroke-width: 0.9;
  transform-origin: center; transform-box: fill-box;
  animation: map-ping 2.8s var(--ease-io) infinite;
}
@keyframes map-ping {
  0%   { transform: scale(0.4); opacity: 0.9; }
  70%  { opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* The panels only animate while open — an off-screen dropdown running two
   keyframe loops on every page is work nobody sees. */
.mega__art * { animation-play-state: paused; }
.nav__item:hover .mega__art *, .nav__item:focus-within .mega__art * { animation-play-state: running; }

@media (max-width: 1120px) { .mega__art { display: none; } }
@media (prefers-reduced-motion: reduce) { .mega__art * { animation: none; } }

/* ---------- 39. Appointment picker ---------- */
.booker { margin-top: 4px; padding: 18px; border-radius: var(--r-lg); background: var(--bg-deep); border: 1px solid var(--line-2); }
.booker__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.booker__tz { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--muted); }
.booker__tz .ico { width: 13px; height: 13px; color: var(--cosmic); }
.booker__body { display: grid; grid-template-columns: minmax(0, 250px) 1fr; gap: 20px; align-items: start; }

.booker__nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.booker__nav strong { font-family: var(--f-display); font-size: 0.86rem; font-weight: 600; color: var(--white); }
.booker__arrow {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--line-2); color: var(--text); cursor: pointer;
  transition: color .25s, border-color .25s, opacity .25s;
}
.booker__arrow:hover:not(:disabled) { color: var(--cosmic); border-color: var(--cosmic); }
.booker__arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.booker__arrow .ico { width: 15px; height: 15px; }
.booker__arrow[data-cal-prev] .ico { transform: rotate(180deg); }

.booker__dow, .booker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.booker__dow span { text-align: center; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; }
.booker__pad { display: block; }
.booker__day {
  aspect-ratio: 1; border-radius: 7px; cursor: pointer;
  background: var(--card); border: 1px solid transparent; color: var(--text);
  font-family: var(--f-display); font-size: 0.78rem; font-variant-numeric: tabular-nums;
  transition: background .2s, color .2s, border-color .2s;
}
.booker__day:hover:not(:disabled) { background: var(--card-hi); border-color: var(--cosmic); color: var(--white); }
.booker__day:disabled { background: none; color: var(--muted); opacity: 0.32; cursor: not-allowed; }
/* Today is unselectable but still worth marking, so the calendar reads as
   a calendar rather than as a list starting at an arbitrary number. */
.booker__day.is-today { opacity: 0.55; outline: 1px dashed var(--line-2); outline-offset: -2px; }
.booker__day.is-on { background: var(--cosmic); border-color: var(--cosmic); color: #041018; font-weight: 700; }

.booker__hint { font-size: 0.82rem; color: var(--muted); padding: 10px 2px; }
.booker__slotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.booker__slot {
  padding: 9px 6px; border-radius: 8px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line-2); color: var(--text);
  font-family: var(--f-display); font-size: 0.74rem; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.booker__slot:hover { background: var(--card-hi); border-color: var(--cosmic); color: var(--white); }
.booker__slot.is-on { background: var(--cosmic); border-color: var(--cosmic); color: #041018; font-weight: 600; }

.booker__chosen { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--cosmic); }
.booker__chosen[hidden] { display: none; }

.form__err {
  margin-top: 12px; padding: 11px 14px; border-radius: var(--r-md);
  background: rgba(255, 90, 90, 0.1); border: 1px solid rgba(255, 120, 120, 0.4);
  color: #ffc9c9; font-size: 0.84rem; line-height: 1.6;
  display: none;
}
.form__err.is-shown { display: block; }

@media (max-width: 760px) {
  .booker__body { grid-template-columns: 1fr; }
  .booker { padding: 14px; }
  .booker__slotgrid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* Honeypot. Moved off-screen rather than display:none — the better bots
   skip inputs that are not rendered, so a field that IS rendered but sits
   outside the viewport catches more of them. Never focusable. */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 40. Booking wizard ---------- */
.form--wiz { display: flex; flex-direction: column; }

.wiz__rail { display: flex; list-style: none; gap: 4px; margin-bottom: 20px; }
.wiz__rail li {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--f-display); font-size: 0.6rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
  padding-top: 8px; border-top: 2px solid var(--line);
  transition: color .3s, border-color .3s;
}
.wiz__rail li span {
  display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line-2);
  font-size: 0.62rem; font-weight: 600; transition: all .3s var(--ease);
}
.wiz__rail li.is-done { color: var(--text); border-top-color: var(--cosmic); }
.wiz__rail li.is-done span { background: var(--accent-soft); border-color: var(--cosmic); color: var(--cosmic); }
.wiz__rail li.is-on { color: var(--white); border-top-color: var(--cosmic); }
.wiz__rail li.is-on span { background: var(--cosmic); border-color: var(--cosmic); color: #041018; }

/* A fixed floor so the panel does not resize between steps. A box that
   jumps on every Next feels worse than the long form it replaced. */
.wiz__panes { min-height: 300px; display: flex; }
.wiz__pane { flex: 1; border: 0; padding: 0; margin: 0; min-width: 0; }
.wiz__pane[hidden] { display: none; }
.wiz__pane.is-on { animation: wiz-in .34s var(--ease) both; }
@keyframes wiz-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.wiz__pane.is-bad { animation: wiz-nudge .42s var(--ease-io); }
@keyframes wiz-nudge { 0%,100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.wiz__legend { font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; color: var(--white); margin-bottom: 16px; padding: 0; }

.wiz__nav { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.wiz__count { flex: 1; text-align: center; font-family: var(--f-display); font-size: 0.7rem; letter-spacing: 0.09em; color: var(--muted); }
.wiz__nav .btn--ghost { order: -1; }

/* Inside a step the calendar no longer needs its own two-column layout. */
.wiz__pane .booker { padding: 0; background: none; border: 0; margin: 0; }
.wiz__pane .booker__head { justify-content: flex-end; margin-bottom: 10px; }
.wiz__pane .booker__body { grid-template-columns: 1fr; }
.wiz__pane .booker__slotgrid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

@media (max-width: 620px) {
  .wiz__rail li { font-size: 0; gap: 0; padding-top: 7px; }
  .wiz__rail li span { font-size: 0.62rem; }
  .wiz__panes { min-height: 356px; }
}

/* ---------- 41. Wizard inside the popup ---------- */
.ccard--book .ccard__inner { text-align: left; padding: 26px 24px 22px; }
.ccard--book .ccard__title { font-size: 1.24rem; text-align: center; margin-bottom: 18px; }
.ccard__backlink {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
  background: none; border: 0; cursor: pointer; padding: 4px 2px;
  font-family: var(--f-display); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted);
  transition: color .25s;
}
.ccard__backlink:hover { color: var(--cosmic); }
.ccard__backlink .ico { width: 14px; height: 14px; transform: rotate(180deg); }
/* Inside the modal the form becomes a column: rail and nav fixed, and the
   panes take whatever is left. The nav is pinned OUTSIDE the scrollable
   area, so "Book Appointment" is on screen at the last step whatever the
   viewport height. */
.ccard--book .form--wiz { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ccard--book .wiz__rail { flex-shrink: 0; margin-bottom: 14px; }
.ccard--book .wiz__panes {
  flex: 1; min-height: 0;
  /* Only ever scrolls on a genuinely short viewport — the alternative is
     content nobody can reach. */
  overflow-y: auto; overscroll-behavior: contain;
}
.ccard--book .wiz__nav { flex-shrink: 0; margin-top: 14px; padding-top: 14px; }
/* Its content lives in the note on the contact page; in a popup the space
   is worth more than the sentence. */
.ccard--book .form__note { display: none; }
.ccard--book .booker__grid { gap: 2px; }
.ccard--book .booker__day { font-size: 0.74rem; }
.ccard--book .booker__slotgrid { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 5px; }
.ccard--book .booker__slot { padding: 8px 4px; font-size: 0.71rem; }
.ccard--book .wiz__legend { font-size: 0.94rem; margin-bottom: 12px; }
.ccard--book textarea { min-height: 92px; }
/* Three stacked fields at the page's spacing overran the 318px the modal
   gives a step, which is what put a scrollbar beside step one. */
.ccard--book .field { margin-bottom: 12px; }
.ccard--book .field label { font-size: 0.74rem; margin-bottom: 5px; }
.ccard--book .field input,
.ccard--book .field select,
.ccard--book .field textarea { padding: 10px 13px; font-size: 0.86rem; }
.ccard--book .wiz__count { font-size: 0.66rem; white-space: nowrap; }
/* If a step ever does overflow, a hairline scrollbar rather than the
   platform's default slab. */
.ccard--book .wiz__panes { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.ccard--book .wiz__panes::-webkit-scrollbar { width: 5px; }
.ccard--book .wiz__panes::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.ccard--book .wiz__panes::-webkit-scrollbar-track { background: transparent; }
.popup__box > [data-pop-view] { height: 100%; }
.popup__box > [data-pop-view][hidden] { display: none; }
.popup__box .ccard { height: 100%; display: flex; flex-direction: column; }
.popup__box .ccard__inner { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* The pitch centres in the taller box rather than sitting at the top. */
.popup__box [data-pop-view="intro"] .ccard__inner { justify-content: center; }

/* ---------- 25. Print ---------- */
@media print {
  .header, .drawer, #scene, #starfield, .progress-bar, .scroll-cue { display: none !important; }
  body { background: #fff; color: #111; }
  .section, .hero, .page-hero, .footer { background: #fff; }
  h1, h2, h3, h4 { color: #000; }
}