/* ============================================================
   Northern Rivers I.T. — styles.css
   Aesthetic: Precision-engineered dark. Calm authority.
   Brand DNA (navy + cyan) pulled from the logo, executed with
   layered depth, a cohesive SVG icon system, and quiet motion.
   ============================================================ */

/* ------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------ */
:root {
  /* Surfaces — deep navy with real tonal range */
  --bg:          #070C16;
  --bg-alt:      #0A111E;
  --surface:     #0D1626;
  --surface-2:   #111C30;
  --surface-3:   #16223A;

  /* Hairlines */
  --line:        rgba(116, 178, 232, 0.10);
  --line-2:      rgba(116, 178, 232, 0.18);
  --line-3:      rgba(116, 178, 232, 0.30);
  /* Form controls need a 3:1 boundary (WCAG 1.4.11) — stronger than --line-3 */
  --field-line:  rgba(116, 178, 232, 0.55);

  /* Cyan — the brand accent */
  --cyan:        #38BDF8;
  --cyan-mid:    #0EA5E9;
  --cyan-lite:   #7DD3FC;   /* lightest ramp stop — remapped for light theme */
  --cyan-hover:  #7DD3FC;   /* link hover accent — remapped for light theme */
  --cyan-deep:   #0284C7;
  --blue:        #3B82F6;
  --cyan-soft:   rgba(56, 189, 248, 0.10);
  --cyan-softer: rgba(56, 189, 248, 0.06);
  --cyan-glow:   rgba(56, 189, 248, 0.20);

  /* Signal — used sparingly for "emergency / 24-7" */
  --amber:       #FBBF24;
  --rose:        #FB7185;
  --green:       #34D399;

  /* Ink */
  --ink-0:       #F4F8FF;
  --ink-1:       #C8D5E8;
  --ink-2:       #899BB4;
  --ink-3:       #7C8CA6;

  /* Type */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Type scale. Every value is anchored to a size already used in this file, so
     adopting a token is always a no-op. Body and display are kept separate —
     condensed uppercase reads optically smaller than body copy at the same px.
     NOT yet migrated: the ~25 literal sizes below (and the ones inside the media
     queries) still hand-pick their values. Migrate a section at a time, and do
     the matching @media sizes in the same pass or the scale re-diverges at the
     breakpoints. Leave the clamp() display sizes alone. */
  --fs-3xs:  0.72rem;
  --fs-2xs:  0.76rem;
  --fs-xs:   0.82rem;
  --fs-sm:   0.88rem;
  --fs-md:   0.94rem;
  --fs-base: 1rem;
  --fs-lg:   1.06rem;
  --fs-title-sm: 1.05rem;
  --fs-title-md: 1.15rem;

  /* Layout */
  --nav-h:       74px;
  --pad-section: 7rem;
  --w-xl:        1200px;
  --w-lg:        940px;
  --w-md:        680px;
  --gutter:      1.5rem;

  /* Radii */
  --r-sm:   0.625rem;
  --r-md:   0.875rem;
  --r-lg:   1.25rem;
  --r-xl:   1.75rem;
  --r-full: 9999px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 12px 32px -12px rgba(0,0,0,0.6);
  --shadow-3: 0 28px 64px -24px rgba(0,0,0,0.7);
  --shadow-cyan: 0 18px 48px -16px rgba(14,165,233,0.45);

  /* Motion */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t:        0.24s;
  --t-slow:   0.5s;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
::selection { background: rgba(56,189,248,0.28); color: #fff; }

/* ------------------------------------------------------------
   3. Background atmosphere — blueprint grid, glows, grain
   ------------------------------------------------------------ */
/* Fine engineered grid + soft corner glows (fixed, behind all) */
.bg-field {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 80% -5%, rgba(56,189,248,0.10), transparent 60%),
    radial-gradient(760px 560px at 5% 110%, rgba(59,130,246,0.08), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #060A12 100%);
}
.bg-field::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(116,178,232,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116,178,232,0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  /* fade the grid out toward the edges so it reads as depth, not wallpaper */
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, #000 35%, transparent 85%);
          mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, #000 35%, transparent 85%);
}

/* Subtle film grain over everything */
.bg-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Keep all real content above the field */
.nav, section, footer, .fab, .skip-link { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   4. Typography utilities
   ------------------------------------------------------------ */
.display-xl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.9rem, 6.4vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink-0);
}
.display-lg {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  line-height: 1.0;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--ink-0);
}
.display-md {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.95rem, 3.8vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  color: var(--ink-0);
}

/* Gradient ink for emphasis words */
.grad-text {
  background: linear-gradient(96deg, var(--cyan-lite) 0%, var(--cyan) 42%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Section eyebrow / kicker */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1.1rem;
}
.kicker::before {
  content: '';
  width: 26px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}

/* ------------------------------------------------------------
   5. Layout primitives
   ------------------------------------------------------------ */
.container     { width: 100%; max-width: var(--w-xl); margin-inline: auto; padding-inline: 2rem; }
.container--lg { max-width: var(--w-lg); }
.container--md { max-width: var(--w-md); }

.section       { padding-block: var(--pad-section); }
.section--alt  { background: var(--bg-alt); }

.section-header { max-width: 620px; margin-bottom: 3.25rem; }
.section-header--center { margin-inline: auto; text-align: center; }
.section-header--center .kicker { justify-content: center; }
.section-header__title { margin-bottom: 1rem; }
.section-header__sub {
  font-size: 1.06rem;
  color: var(--ink-2);
  line-height: 1.7;
}

/* Hairline divider with a centered node — recurring motif */
.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-block: 0;
}
.rule::before, .rule::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.rule span {
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   6. Icon system  (referenced via <svg class="icon"><use/></svg>)
   ------------------------------------------------------------ */
.icon {
  width: 1.4em;
  height: 1.4em;
  display: inline-block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* A framed icon tile used in cards */
.icon-tile {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--cyan);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(56,189,248,0.16), transparent 70%),
    var(--surface-2);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease);
}
.icon-tile .icon { width: 26px; height: 26px; stroke-width: 1.6; }

/* ------------------------------------------------------------
   7. Buttons
   ------------------------------------------------------------ */
.btn {
  --btn-h: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  height: var(--btn-h);
  padding: 0 1.6rem;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform var(--t) var(--ease), box-shadow var(--t), background var(--t),
              border-color var(--t), color var(--t), filter var(--t);
}
.btn .icon { width: 1.05rem; height: 1.05rem; }
.btn:active { transform: translateY(0) scale(0.985); }

.btn--cyan {
  background: linear-gradient(100deg, var(--cyan-mid), var(--cyan));
  color: #04121F;
  font-weight: 700;
  box-shadow: var(--shadow-cyan);
}
.btn--cyan:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 24px 60px -16px rgba(14,165,233,0.6); }

.btn--outline {
  background: rgba(56,189,248,0.04);
  border-color: var(--line-3);
  color: var(--cyan);
}
.btn--outline:hover { transform: translateY(-2px); background: var(--cyan-soft); border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(56,189,248,0.08); }

.btn--ghost {
  background: var(--surface-2);
  border-color: var(--line-2);
  color: var(--ink-1);
}
.btn--ghost:hover { transform: translateY(-2px); background: var(--surface-3); border-color: var(--line-3); }

.btn--whatsapp {
  background: #25D366;
  color: #04210F;
  font-weight: 700;
  box-shadow: 0 14px 36px -14px rgba(37,211,102,0.6);
}
.btn--whatsapp:hover { transform: translateY(-2px); background: #22c35e; box-shadow: 0 20px 48px -16px rgba(37,211,102,0.7); }
.btn--whatsapp .icon { fill: currentColor; stroke: none; width: 1.15rem; height: 1.15rem; }

.btn--lg { --btn-h: 58px; padding: 0 2rem; font-size: 1rem; }
.btn--sm { --btn-h: 42px; padding: 0 1.15rem; font-size: 0.85rem; }
.btn--block { width: 100%; }

/* Loading state for submit */
.btn[data-loading] { opacity: 0.75; pointer-events: none; }
.btn[data-loading]::after {
  content: '';
  width: 15px; height: 15px;
  margin-left: 0.4rem;
  border: 2px solid rgba(4,18,31,0.35);
  border-top-color: #04121F;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   8. Skip link (a11y)
   ------------------------------------------------------------ */
.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 400;
  padding: 0.6rem 1rem;
  background: var(--cyan);
  color: #04121F;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: var(--r-md);
  transform: translateY(-160%);
  transition: transform var(--t) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ------------------------------------------------------------
   9. Floating call button (mobile)
   ------------------------------------------------------------ */
.fab {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  z-index: 200;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #04121F;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-deep));
  box-shadow: 0 14px 34px -10px rgba(14,165,233,0.7);
  transition: transform var(--t) var(--ease), box-shadow var(--t);
}
.fab::before {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(56,189,248,0.5);
  animation: fab-ring 2.6s var(--ease) infinite;
}
@keyframes fab-ring {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}
.fab:hover { transform: translateY(-3px) scale(1.06); }
.fab .icon { width: 24px; height: 24px; fill: currentColor; stroke: none; }
@media (min-width: 821px) { .fab { display: none; } }

/* ------------------------------------------------------------
   10. Navigation
   ------------------------------------------------------------ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(7, 12, 22, 0.6);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.nav.scrolled {
  background: rgba(7, 12, 22, 0.82);
  border-bottom-color: var(--line);
  box-shadow: 0 12px 40px -20px rgba(0,0,0,0.8);
}
.nav__inner {
  max-width: var(--w-xl);
  height: 100%;
  margin-inline: auto;
  padding-inline: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.nav__brand { display: inline-flex; align-items: center; }
.nav__logo {
  height: 42px; width: auto;
  filter: drop-shadow(0 0 6px rgba(56,189,248,0.22));
  transition: filter var(--t), transform var(--t) var(--ease);
}
.nav__brand:hover .nav__logo { filter: drop-shadow(0 0 9px rgba(56,189,248,0.4)); transform: translateY(-1px); }

.nav__links { display: flex; align-items: center; gap: 0.35rem; }
.nav__links a {
  position: relative;
  padding: 0.5rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  transition: color var(--t), background var(--t);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0.85rem; right: 0.85rem; bottom: 0.28rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease);
}
.nav__links a:hover { color: var(--ink-0); }
.nav__links a:hover::after,
.nav__links a.active::after { transform: scaleX(1); }
.nav__links a.active { color: var(--cyan); }

.nav__cta { height: 42px; padding: 0 1.25rem; font-size: 0.85rem; }
.nav__cta .icon { width: 0.95rem; height: 0.95rem; }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
}
.nav__burger span {
  width: 20px; height: 2px;
  border-radius: 2px;
  background: var(--ink-0);
  transition: transform var(--t) var(--ease), opacity var(--t);
}
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  z-index: 99;
  display: grid;
  grid-template-rows: 0fr;
  background: rgba(8, 14, 24, 0.97);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  /* Landscape phones: the 7 links overflow a 390px viewport, so cap the container
     (not the item — a max-height against a 1fr track resolves unpredictably). */
  max-height: calc(100svh - var(--nav-h));
  transition: grid-template-rows var(--t-slow) var(--ease),
              visibility var(--t-slow) var(--ease);
}
/* JS toggles [inert] in step with .open, so the closed menu leaves the a11y tree
   AND the tab order. visibility is the belt for browsers predating inert; it is
   discrete-animated with `visible` held for the whole duration, so the close
   animation still plays out. */
.nav__mobile[inert] { visibility: hidden; }
.nav__mobile-wrap { overflow: hidden; }
.nav__mobile.open .nav__mobile-wrap { overflow-y: auto; overscroll-behavior: contain; }
.nav__mobile.open { grid-template-rows: 1fr; }
.nav__mobile a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-1);
  border-bottom: 1px solid var(--line);
  transition: background var(--t), color var(--t);
}
.nav__mobile a .icon { color: var(--cyan); width: 1.15rem; height: 1.15rem; }
.nav__mobile a:hover { background: var(--cyan-softer); color: var(--ink-0); }
.nav__mobile a.accent { color: var(--cyan); font-weight: 700; }

body.menu-open { overflow: hidden; }

/* ------------------------------------------------------------
   11. Hero
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: var(--nav-h);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero__inner {
  flex: 1;
  width: 100%;
  max-width: var(--w-xl);
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 6rem) 2rem 5rem;
  display: flex;
  align-items: center;
}
.hero__content { max-width: 820px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.4rem 0.95rem 0.4rem 0.7rem;
  border-radius: var(--r-full);
  background: var(--cyan-soft);
  border: 1px solid var(--line-3);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cyan);
  margin-bottom: 1.9rem;
}
.eyebrow .dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  flex-shrink: 0;
}
/* Composited halo. box-shadow can't be composited, so the old version repainted
   on the main thread every frame, forever, above the fold. inset:0 + scale(3)
   gives the same 21px halo the box-shadow did. */
.eyebrow .dot::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(56,189,248,0.5);
  animation: eyebrowPing 2.4s var(--ease) infinite;
}
@keyframes eyebrowPing {
  0%   { transform: scale(1); opacity: 0.5; }
  70%  { transform: scale(3); opacity: 0; }
  100% { transform: scale(3); opacity: 0; }
}

.hero__heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 7.2vw, 5.6rem);
  line-height: 0.96;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  color: var(--ink-0);
  margin-bottom: 1.6rem;
}
.hero__sub {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 640px;
  margin-bottom: 2.4rem;
}
.hero__sub strong { color: var(--ink-1); font-weight: 600; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 3rem;
}

/* Trust strip — bordered chips */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  max-width: 720px;
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-1);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
}
.trust-chip .icon { width: 0.85rem; height: 0.85rem; color: var(--cyan); stroke-width: 2.4; }

/* Decorative engineered node cluster, top-right of hero */
.hero__schematic {
  position: absolute;
  top: var(--nav-h); right: 0;
  width: min(46%, 560px);
  height: 100%;
  pointer-events: none;
  color: var(--cyan);
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(250deg, #000 30%, transparent 78%);
          mask-image: linear-gradient(250deg, #000 30%, transparent 78%);
}
.hero__schematic .wire { stroke: rgba(56,189,248,0.5); stroke-width: 1; fill: none; }
.hero__schematic .node { fill: var(--cyan); }
.hero__schematic .node-ring { stroke: var(--cyan); stroke-width: 1; fill: none; }
.hero__schematic .dash {
  stroke: rgba(56,189,248,0.7);
  stroke-width: 1.5;
  stroke-dasharray: 4 90;
  stroke-linecap: round;
  fill: none;
  animation: trace 4s linear infinite;
}
@keyframes trace { to { stroke-dashoffset: -94; } }
@media (max-width: 900px) { .hero__schematic { display: none; } }

/* Bottom wave bridging hero -> next section */
.hero__wave { line-height: 0; flex-shrink: 0; }
.hero__wave svg { width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------
   12. About + stats + region
   ------------------------------------------------------------ */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.about-grid .display-lg { margin-bottom: 1.5rem; }
.about__lead {
  font-size: 1.16rem;
  color: var(--ink-1);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
.about__body {
  font-size: 1rem;
  color: var(--ink-2);
  line-height: 1.78;
  margin-bottom: 2rem;
}
.about__actions { display: flex; gap: 0.85rem; flex-wrap: wrap; }

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}
.stat {
  position: relative;
  padding: 1.7rem 1.5rem;
  border-radius: var(--r-lg);
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(56,189,248,0.08), transparent 55%),
    var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: background-color var(--t-slow) var(--ease), border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease);
}
.stat:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.stat::before {
  content: '';
  position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem;
  width: 2px;
  background: linear-gradient(var(--cyan), transparent);
}
.stat__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.7rem;
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
  background: linear-gradient(100deg, var(--cyan-lite), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stat__l {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}

.region {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--r-lg);
  background: linear-gradient(100deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
}
.region .icon-tile { width: 46px; height: 46px; border-radius: 12px; }
.region .icon-tile .icon { width: 24px; height: 24px; }
.region__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cyan);
  margin-bottom: 0.15rem;
}
.region__sub { font-size: 0.82rem; color: var(--ink-3); }

/* ------------------------------------------------------------
   13. Reason cards (Why us)
   ------------------------------------------------------------ */
.reasons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.reason {
  display: flex;
  gap: 1.2rem;
  padding: 1.75rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease);
}
.reason:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.reason:hover .icon-tile { color: var(--ink-0); border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(56,189,248,0.08); }
.reason__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-0);
  margin-bottom: 0.45rem;
}
.reason__desc { font-size: 0.9rem; color: var(--ink-2); line-height: 1.65; }

/* ------------------------------------------------------------
   14. Services
   ------------------------------------------------------------ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
/* Shared card shell — .service, .step, .sla-tier and .price-card were four
   byte-for-byte copies of this. Grouped here (before .price-card--featured's
   overrides further down) so a card change is made once, not four times.
   The -3px cards (.reason, .stat, .area, .testimonial) and .industry are
   deliberately different components and stay separate. */
.service,
.step,
.sla-tier,
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.6rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: background-color var(--t-slow) var(--ease), border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease);
}
.service::before,
.step::before,
.sla-tier::before,
.price-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease);
}
.service:hover,
.step:hover,
.sla-tier:hover,
.price-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-4px); }
.service:hover::before,
.step:hover::before,
.sla-tier:hover::before,
.price-card:hover::before { transform: scaleX(1); }
.service:hover .icon-tile,
.step:hover .icon-tile,
.sla-tier:hover .icon-tile,
.price-card:hover .icon-tile { color: var(--ink-0); border-color: var(--cyan); transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(56,189,248,0.08); }
.service__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-0);
  margin: 1.3rem 0 0.55rem;
}
.service__desc { font-size: 0.9rem; color: var(--ink-2); line-height: 1.65; flex: 1; }
.service__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.3rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--cyan);
  transition: gap var(--t) var(--ease), color var(--t);
}
.service__cta .icon { width: 0.95rem; height: 0.95rem; }
.service:hover .service__cta { gap: 0.7rem; color: var(--cyan-hover); }

/* Trust bar under services */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 3.25rem;
  padding-top: 2.75rem;
  border-top: 1px solid var(--line);
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: var(--r-full);
  background: var(--cyan-softer);
  border: 1px solid var(--line-2);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cyan);
}
.trust-pill .icon { width: 0.85rem; height: 0.85rem; stroke-width: 2.4; }

/* ------------------------------------------------------------
   15. Industries
   ------------------------------------------------------------ */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.industry {
  padding: 1.75rem;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  transition: background var(--t), border-color var(--t), transform var(--t) var(--ease);
}
.industry:hover { background: var(--cyan-softer); border-color: var(--line-2); transform: translateY(-3px); }
.industry__head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.9rem; }
.industry__head .icon-tile { width: 44px; height: 44px; border-radius: 11px; }
.industry__head .icon-tile .icon { width: 23px; height: 23px; }
.industry__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-0);
}
.industry__desc { font-size: 0.875rem; color: var(--ink-2); line-height: 1.6; }

/* ------------------------------------------------------------
   16. Testimonials
   ------------------------------------------------------------ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.75rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: background-color var(--t-slow) var(--ease), border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease);
}
.testimonial:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.testimonial__mark {
  position: absolute;
  top: 1.2rem; right: 1.4rem;
  width: 30px; height: 30px;
  color: var(--cyan);
  opacity: 0.22;
}
.stars { display: inline-flex; gap: 2px; color: var(--amber); margin-bottom: 1rem; }
.stars .icon { width: 1rem; height: 1rem; fill: currentColor; stroke: none; }
.testimonial__quote {
  font-size: 0.95rem;
  color: var(--ink-1);
  line-height: 1.72;
  flex: 1;
  margin-bottom: 1.5rem;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: #04121F;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-deep));
  box-shadow: 0 6px 16px -6px rgba(14,165,233,0.7);
  flex-shrink: 0;
}
.testimonial__name { font-size: 0.9rem; font-weight: 700; color: var(--ink-0); line-height: 1.3; }
.testimonial__biz  { font-size: 0.78rem; color: var(--ink-3); line-height: 1.3; }

/* ------------------------------------------------------------
   17. Before / After
   ------------------------------------------------------------ */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.compare {
  border-radius: var(--r-lg);
  padding: 2.25rem;
  border: 1px solid var(--line);
}
.compare--before { background: rgba(251,113,133,0.05); border-color: rgba(251,113,133,0.16); }
.compare--after  { background: rgba(56,189,248,0.06);  border-color: var(--line-2); }
.compare__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.compare--before .compare__label { background: rgba(251,113,133,0.14); color: var(--rose); }
.compare--after  .compare__label { background: rgba(56,189,248,0.16);  color: var(--cyan); }
.compare__list li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.75rem 0;
  font-size: 0.92rem;
  line-height: 1.55;
  border-bottom: 1px solid var(--line);
}
.compare__list li:last-child { border-bottom: none; }
.compare__list .icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; margin-top: 0.12rem; stroke-width: 2.2; }
.compare--before .compare__list { color: var(--ink-2); }
.compare--before .compare__list .icon { color: var(--rose); }
.compare--after  .compare__list { color: var(--ink-1); }
.compare--after  .compare__list .icon { color: var(--cyan); }

/* ------------------------------------------------------------
   18. FAQ
   ------------------------------------------------------------ */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  align-items: start;
}
details.faq {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
details.faq:hover { border-color: var(--line-2); }
details.faq[open] { border-color: var(--line-3); box-shadow: var(--shadow-2); }
details.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-1);
  cursor: pointer;
  user-select: none;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq[open] summary { color: var(--ink-0); }
.faq__chev {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--cyan);
  background: var(--cyan-soft);
  transition: background var(--t), transform var(--t) var(--ease);
}
.faq__chev .icon { width: 0.85rem; height: 0.85rem; transition: transform var(--t) var(--ease); }
details.faq[open] .faq__chev { background: rgba(56,189,248,0.2); }
details.faq[open] .faq__chev .icon { transform: rotate(180deg); }
.faq__body {
  padding: 0 1.4rem 1.25rem;
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.72;
}

/* ------------------------------------------------------------
   19. Contact
   ------------------------------------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 5vw, 3.75rem);
  align-items: start;
}
.contact-form-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-0);
  margin-bottom: 1.5rem;
}
.form { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;   /* 16px — anything smaller triggers iOS Safari's focus zoom */
  color: var(--ink-0);
  background: var(--surface);
  border: 1.5px solid var(--field-line);
  border-radius: var(--r-md);
  outline: none;
  appearance: none;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--cyan-deep);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.12);
}
.field select {
  cursor: pointer;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2338BDF8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.field select option { background: var(--surface); color: var(--ink-0); }
.field textarea { resize: vertical; min-height: 130px; }

.form-submit-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form-note { font-size: 0.78rem; color: var(--ink-3); margin: 0; }

.form-feedback {
  padding: 0.95rem 1.2rem;
  border-radius: var(--r-md);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  display: block;
}
/* The .success/.error classes are static in the markup, so visibility is driven
   solely by the [hidden] attribute the submit handler toggles. Without this guard
   a plain `display:block` would render BOTH panels on every page load. */
.form-feedback[hidden] { display: none; }
.form-feedback.success { background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.3); color: var(--green); }
.form-feedback.error   { background: rgba(251,113,133,0.1); border: 1px solid rgba(251,113,133,0.3); color: var(--rose); }

/* Contact aside */
.contact-aside-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-0);
  margin-bottom: 1.25rem;
}
.contact-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}
.contact-item:last-of-type { border-bottom: none; }
.contact-item .icon-tile { width: 44px; height: 44px; border-radius: 11px; }
.contact-item .icon-tile .icon { width: 22px; height: 22px; }
.contact-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cyan);
  margin-bottom: 0.2rem;
}
.contact-value { font-size: 0.95rem; color: var(--ink-1); font-weight: 500; line-height: 1.55; }
.contact-value a:hover { color: var(--cyan); }
.contact-value small { color: var(--ink-3); font-weight: 400; font-size: 0.82rem; }
.contact-ctas { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }

.map-wrap {
  margin-top: 3.5rem;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-2);
  aspect-ratio: 16 / 5;
  /* On a phone the ratio box is ~105px tall but the facade needs ~222px, so the
     "Load the map" button — the only way to load it — was clipped off. */
  min-height: 280px;
  box-shadow: var(--shadow-2);
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.2) contrast(1.05); }

/* ------------------------------------------------------------
   20. Footer
   ------------------------------------------------------------ */
.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding: 4.5rem 2rem 2.5rem;
}
.footer__inner { max-width: var(--w-xl); margin-inline: auto; }
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
}
.footer__logo {
  height: 50px; width: auto;
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 0 6px rgba(56,189,248,0.22));
}
.footer__about { font-size: 0.9rem; color: var(--ink-2); line-height: 1.7; margin-bottom: 1.5rem; max-width: 38ch; }
.footer__row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.footer__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cyan);
  margin-bottom: 1.25rem;
}
.footer__links { display: flex; flex-direction: column; gap: 0.65rem; }
.footer__links a { font-size: 0.9rem; color: var(--ink-2); transition: color var(--t), padding-left var(--t) var(--ease); }
.footer__links a:hover { color: var(--cyan); padding-left: 0.25rem; }
.footer__contact { display: flex; flex-direction: column; gap: 0.65rem; font-size: 0.9rem; color: var(--ink-2); }
.footer__contact a, .footer__contact p { display: flex; align-items: center; gap: 0.55rem; }
.footer__contact .icon { width: 1rem; height: 1rem; color: var(--cyan); flex-shrink: 0; }
.footer__contact a:hover { color: var(--cyan); }
.footer__contact-sub { color: var(--ink-3); font-size: 0.82rem; padding-left: 1.55rem; line-height: 1.5; }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--ink-3);
}
.footer__bottom a { color: var(--ink-2); }
.footer__bottom a:hover { color: var(--cyan); }

/* ------------------------------------------------------------
   21. Scroll reveal (replaces AOS) + scroll-margin
   ------------------------------------------------------------ */
/* Hide for animation ONLY when JS is confirmed running (html.js).
   If scripts are blocked/deferred/broken, content stays fully visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].in { opacity: 1; transform: none; }

/* The hero copy is the LCP element on virtually every viewport, so it must not
   wait on the observer at the bottom of the document. Chrome disqualifies an LCP
   candidate on opacity:0 but not on transform, so paint it opaque on frame one
   and keep the slide-up as an animation. Reduced-motion still wins via !important. */
.js .hero__content[data-reveal] {
  opacity: 1;
  transform: translateY(22px);
  animation: hero-rise 0.7s var(--ease-out) forwards;
}
@keyframes hero-rise { to { transform: none; } }

#about, #services, #how-it-works, #response-times, #industries, #phishing,
#downtime, #pricing, #faq, #areas, #contact {
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

/* ------------------------------------------------------------
   22. Focus-visible (keyboard)
   ------------------------------------------------------------ */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.btn:focus-visible { outline-offset: 3px; }
details.faq summary:focus-visible { outline-offset: -2px; }

/* ------------------------------------------------------------
   23. Responsive
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  :root { --pad-section: 5.5rem; }
  .services-grid, .industries-grid, .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; gap: 2.75rem; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

/* Collapse the 7-link desktop nav to the hamburger before it can crowd/clip the phone CTA */
@media (max-width: 920px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
}
@media (max-width: 820px) {
  :root { --pad-section: 4.25rem; --nav-h: 66px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; max-width: 360px; }
  .reasons-grid, .services-grid, .testimonials-grid,
  .compare-grid, .faq-grid, .contact-grid { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .stat-grid { gap: 0.75rem; }
  .footer__top { grid-template-columns: 1fr; gap: 2.25rem; }
  .footer__bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .container, .nav__inner, .hero__inner { padding-inline: 1.25rem; }
  .industries-grid { grid-template-columns: 1fr; }
  .compare { padding: 1.75rem; }
  .stat { padding: 1.4rem 1.25rem; }
  .stat__n { font-size: 2.3rem; }
}

/* ------------------------------------------------------------
   24. Reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__schematic .dash { animation: none; }
  .fab::before { animation: none; }
}

/* ============================================================
   LIGHT THEME — tasteful inversion of the engineered palette
   ============================================================ */
:root[data-theme="light"] {
  --bg:          #eef2f8;
  --bg-alt:      #e4eaf2;
  --surface:     #ffffff;
  --surface-2:   #f5f8fc;
  --surface-3:   #eaf0f8;

  --line:        rgba(20, 50, 95, 0.10);
  --line-2:      rgba(20, 50, 95, 0.16);
  --line-3:      rgba(20, 50, 95, 0.26);
  --field-line:  rgba(20, 50, 95, 0.60);

  --cyan:        #0B6E9C;
  --cyan-mid:    #0EA5E9;
  --cyan-lite:   #0EA5E9;
  --cyan-hover:  #0369A1;
  --cyan-deep:   #0369A1;
  --blue:        #2563EB;
  --cyan-soft:   rgba(2, 132, 199, 0.08);
  --cyan-softer: rgba(2, 132, 199, 0.05);
  --cyan-glow:   rgba(2, 132, 199, 0.16);

  --amber:       #D97706;
  --rose:        #E11D48;
  --green:       #059669;

  --ink-0:       #0B1626;
  --ink-1:       #2A3B52;
  --ink-2:       #465870;
  --ink-3:       #5B6A80;

  --shadow-1: 0 1px 2px rgba(20,50,95,0.10);
  --shadow-2: 0 12px 30px -14px rgba(20,50,95,0.22);
  --shadow-3: 0 26px 60px -26px rgba(20,50,95,0.28);
  --shadow-cyan: 0 18px 44px -16px rgba(2,132,199,0.32);
}
/* Quieter atmosphere on light */
:root[data-theme="light"] .bg-field { opacity: 0.5; }
:root[data-theme="light"] .bg-grain { opacity: 0.35; }
:root[data-theme="light"] .nav.scrolled {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 12px 40px -22px rgba(20,50,95,0.35);
}
:root[data-theme="light"] .map-wrap iframe { filter: grayscale(0.1) contrast(1.02); }
:root[data-theme="light"] .nav__logo,
:root[data-theme="light"] .footer__logo { filter: none; }
/* Smooth cross-fade when toggling. Card surfaces carry background-color in their
   OWN transition declarations (where it composes with the hover lift) — adding
   them here would reset transition-property and kill the lift sitewide. */
:root[data-theme] body,
:root[data-theme] .nav,
:root[data-theme] .section,
:root[data-theme] .cta-band,
:root[data-theme] .footer { transition: background-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease); }

/* Hero wave inherits the adjacent section colour */
.hero__wave { color: var(--bg-alt); }

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink-1);
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--t), border-color var(--t), background var(--t), transform var(--t) var(--ease);
}
.theme-toggle:hover { color: var(--cyan); border-color: var(--line-3); transform: translateY(-1px); }
.theme-toggle .icon { width: 19px; height: 19px; }
.theme-toggle .i-sun  { display: none; }
.theme-toggle .i-moon { display: block; }
:root[data-theme="light"] .theme-toggle .i-sun  { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  /* Driven by transform (compositor-only) rather than width, so scrolling never
     triggers layout. Declared here, not patched in from JS, so the old
     `transition: width` can't fire a stray 0->100% animation on first paint. */
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  z-index: 1200;
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan), var(--blue));
  box-shadow: 0 0 12px var(--cyan-glow);
  pointer-events: none;
}

/* ============================================================
   LIVE OPEN / CLOSED BADGE
   ============================================================ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.32rem 0.7rem;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink-1);
  white-space: nowrap;
}
.status-badge__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.status-badge.is-open    { color: var(--green); border-color: rgba(52,211,153,0.32); background: rgba(52,211,153,0.08); }
.status-badge.is-open .status-badge__dot { background: var(--green); }
.status-badge.is-open .status-badge__dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: var(--green); opacity: 0.5; animation: statusPing 2s var(--ease) infinite;
}
.status-badge.is-closed  { color: var(--amber); border-color: rgba(251,191,36,0.30); background: rgba(251,191,36,0.08); }
.status-badge.is-closed .status-badge__dot { background: var(--amber); }
@keyframes statusPing { 0% { transform: scale(0.6); opacity: 0.6; } 80%,100% { transform: scale(2.4); opacity: 0; } }
.hero__status { margin-top: 1.4rem; }
/* Hide the nav status badge until the 7-link nav has room for it too (else it clips the CTA) */
@media (max-width: 1120px) { .nav .status-badge { display: none; } }

/* ============================================================
   BACK TO TOP
   ============================================================ */
.to-top {
  position: fixed;
  right: 1.5rem; bottom: 1.5rem;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--ink-1);
  cursor: pointer;
  z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--t), transform var(--t) var(--ease), color var(--t), border-color var(--t);
  box-shadow: var(--shadow-2);
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { color: var(--cyan); border-color: var(--line-3); transform: translateY(-2px); }
.to-top .icon { width: 20px; height: 20px; }
/* Sit above the mobile call FAB */
@media (max-width: 820px) { .to-top { bottom: 5.4rem; } }

/* ============================================================
   TOAST (copy-to-clipboard feedback)
   ============================================================ */
.toast-wrap {
  position: fixed;
  left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 1300;
  display: flex; flex-direction: column; gap: 0.5rem;
  pointer-events: none;
}
.toast {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  color: var(--ink-0);
  font-size: 0.88rem; font-weight: 500;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  opacity: 0; transform: translateY(14px);
  animation: toastIn 0.3s var(--ease) forwards;
}
.toast .icon { width: 18px; height: 18px; color: var(--green); }
.toast.out { animation: toastOut 0.3s var(--ease) forwards; }
@keyframes toastIn  { to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(14px); } }

/* Copyable inline button */
.copy-btn {
  background: none; border: none; cursor: pointer;
  color: var(--ink-3); padding: 0.3rem; margin-left: 0.6rem;   /* 24.6px target (SC 2.5.8) + more clearance from the dialler link */
  display: inline-grid; place-items: center; vertical-align: middle;
  border-radius: 6px; transition: color var(--t), background var(--t);
}
.copy-btn:hover { color: var(--cyan); background: var(--cyan-soft); }
.copy-btn .icon { width: 15px; height: 15px; }

/* ============================================================
   INTERACTIVE IT HEALTH CHECK — modal tool
   ============================================================ */
.hc-overlay {
  position: fixed; inset: 0;
  z-index: 1400;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  background: rgba(4, 8, 16, 0.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility var(--t);
}
.hc-overlay.open { opacity: 1; visibility: visible; }
:root[data-theme="light"] .hc-overlay { background: rgba(20, 40, 75, 0.42); }

.hc-modal {
  width: 100%; max-width: 600px;
  max-height: calc(100dvh - 2.5rem);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  transform: translateY(18px) scale(0.98);
  transition: transform var(--t-slow) var(--ease);
}
.hc-overlay.open .hc-modal { transform: translateY(0) scale(1); }

.hc-modal__head {
  display: flex; align-items: flex-start; gap: 0.9rem;
  padding: 1.5rem 1.6rem 1.25rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.hc-modal__head .icon-tile { width: 46px; height: 46px; flex-shrink: 0; }
.hc-modal__title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; color: var(--ink-0); }
.hc-modal__sub { font-size: 0.86rem; color: var(--ink-2); margin-top: 0.2rem; }
.hc-close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 34px; height: 34px; border: none; cursor: pointer;
  display: grid; place-items: center; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--ink-2);
  transition: color var(--t), background var(--t);
}
.hc-close:hover { color: var(--ink-0); background: var(--surface-3); }
.hc-close .icon { width: 18px; height: 18px; }

.hc-body { padding: 1.25rem 1.6rem 0; overflow-y: auto; }

.hc-meter {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.78rem; color: var(--ink-2); font-weight: 600;
  margin-bottom: 1.1rem;
}
.hc-meter__track { flex: 1; height: 5px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.hc-meter__fill  { height: 100%; width: 0%; background: var(--cyan); border-radius: var(--r-full); transition: width var(--t) var(--ease); }

.hc-q {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
.hc-q:last-of-type { border-bottom: none; }
.hc-q__text { flex: 1; font-size: 0.95rem; color: var(--ink-1); line-height: 1.5; }
.hc-seg {
  display: inline-flex; flex-shrink: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  padding: 3px; gap: 3px;
  background: var(--surface-2);
}
.hc-seg button {
  border: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 0.8rem;
  padding: 0.34rem 0.85rem;
  border-radius: var(--r-full);
  background: transparent; color: var(--ink-2);
  transition: color var(--t), background var(--t);
}
.hc-seg button:hover { color: var(--ink-0); }
.hc-seg button[aria-pressed="true"][data-v="yes"] { background: var(--green); color: #04140d; }
.hc-seg button[aria-pressed="true"][data-v="no"]  { background: var(--rose);  color: #1a0407; }

.hc-foot {
  padding: 1.25rem 1.6rem 1.6rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.hc-note { font-size: 0.74rem; color: var(--ink-3); margin-top: 0.7rem; text-align: center; }

/* Result view */
.hc-result { padding: 1.6rem; text-align: center; }
.hc-ring { position: relative; width: 168px; height: 168px; margin: 0.25rem auto 1.1rem; }
.hc-ring svg { transform: rotate(-90deg); }
.hc-ring__bg   { fill: none; stroke: var(--surface-3); stroke-width: 12; }
.hc-ring__fg   { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease), stroke 0.4s var(--ease); }
.hc-ring__num  { position: absolute; inset: 0; display: grid; place-items: center; }
.hc-ring__num b { font-family: var(--font-display); font-weight: 800; font-size: 2.7rem; line-height: 1; color: var(--ink-0); }
.hc-ring__num span { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 0.2rem; }

.hc-band {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.4rem 1rem; border-radius: var(--r-full);
  margin-bottom: 0.9rem;
}
.hc-band .icon { width: 18px; height: 18px; }
.hc-band.strong   { color: var(--green); background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.3); }
.hc-band.moderate { color: var(--amber); background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.3); }
.hc-band.risk     { color: var(--rose);  background: rgba(251,113,133,0.10); border: 1px solid rgba(251,113,133,0.3); }

.hc-result__lead { font-size: 0.98rem; color: var(--ink-1); line-height: 1.6; max-width: 44ch; margin: 0 auto 1.4rem; }
.hc-recs { text-align: left; margin: 0 auto 1.5rem; max-width: 430px; display: flex; flex-direction: column; gap: 0.7rem; }
.hc-rec {
  display: flex; gap: 0.65rem; align-items: flex-start;
  font-size: 0.9rem; color: var(--ink-1); line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 0.7rem 0.85rem; border-radius: var(--r-md);
}
.hc-rec .icon { width: 17px; height: 17px; flex-shrink: 0; margin-top: 0.12rem; color: var(--amber); }
.hc-rec.good .icon { color: var(--green); }
.hc-result__cta { display: flex; flex-direction: column; gap: 0.7rem; }
.hc-result__again {
  background: none; border: none; cursor: pointer;
  color: var(--ink-2); font-size: 0.84rem; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  margin-top: 0.2rem; transition: color var(--t);
}
.hc-result__again:hover { color: var(--cyan); }
.hc-result__again .icon { width: 15px; height: 15px; }

@media (max-width: 540px) {
  .hc-q { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .hc-modal__title { font-size: 1.3rem; }
}

/* Show the live status badge in the hero only where the nav badge is hidden */
@media (min-width: 1121px) { .hero__status { display: none; } }

/* ============================================================
   STANDALONE PAGES — legal + 404
   ============================================================ */
.page-head {
  padding: calc(var(--nav-h) + 4rem) 0 2.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.legal { padding: 3.5rem 0 5rem; }
.legal__wrap { max-width: 680px; }
.legal h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5rem; color: var(--ink-0);
  margin: 2.5rem 0 0.85rem; letter-spacing: 0.01em;
}
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--ink-1); line-height: 1.75; font-size: 1rem; }
.legal p { margin-bottom: 1rem; }
.legal ul { margin: 0 0 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.legal a { color: var(--cyan); text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal__meta { color: var(--ink-3); font-size: 0.88rem; margin-bottom: 2rem; }
.legal__card {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 1.4rem 1.6rem; margin: 1.5rem 0;
}

/* 404 */
.notfound {
  min-height: 100dvh; display: grid; place-items: center;
  text-align: center; padding: 6rem 1.5rem;
}
.notfound__code {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(5rem, 22vw, 11rem); line-height: 0.9;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  letter-spacing: -0.02em;
}
.notfound h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 5vw, 2.4rem); color: var(--ink-0); margin: 0.5rem 0 0.75rem; }
.notfound p { color: var(--ink-2); max-width: 46ch; margin: 0 auto 2rem; line-height: 1.7; }
.notfound__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* Respect the [hidden] attribute for JS-driven elements (so they stay hidden when JS is off) */
.status-badge[hidden] { display: none; }
.hc-overlay[hidden]   { display: none; }

/* ============================================================
   25. How it works — process steps
   ============================================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
/* Card shell lives with .service — see the shared block above. */
.step__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
  background: linear-gradient(100deg, var(--cyan-lite), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.step .icon-tile { margin-bottom: 1rem; }
.step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-0);
  margin: 0 0 0.55rem;
}
.step__desc { font-size: 0.9rem; color: var(--ink-2); line-height: 1.65; flex: 1; }
@media (max-width: 820px) { .process-grid { grid-template-columns: 1fr; } }

/* ============================================================
   26. CTA band
   ============================================================ */
.cta-band {
  background:
    radial-gradient(800px 380px at 50% -30%, var(--cyan-soft), transparent 70%),
    var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(3.25rem, 6vw, 5rem);
}
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.25rem;
  flex-wrap: wrap;
}
.cta-band__text { flex: 1 1 420px; }
.cta-band__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink-0);
}
.cta-band__sub {
  font-size: 1.02rem;
  color: var(--ink-2);
  line-height: 1.65;
  margin-top: 0.75rem;
  max-width: 54ch;
}
.cta-band__actions { display: flex; gap: 0.85rem; flex-wrap: wrap; }
@media (max-width: 820px) {
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { width: 100%; max-width: 360px; }
}

/* ============================================================
   27. Areas we serve
   ============================================================ */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.area {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: background-color var(--t-slow) var(--ease), border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease);
}
.area:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.area__pin {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--cyan);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(56,189,248,0.16), transparent 70%),
    var(--surface-2);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: color var(--t), border-color var(--t), box-shadow var(--t);
}
.area:hover .area__pin { color: var(--ink-0); border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(56,189,248,0.08); }
.area__pin .icon { width: 22px; height: 22px; }
.area__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-0);
  margin-bottom: 0.35rem;
}
.area__desc { font-size: 0.86rem; color: var(--ink-2); line-height: 1.6; }
@media (max-width: 1024px) { .areas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .areas-grid { grid-template-columns: 1fr; } }

/* ============================================================
   28. Downtime cost calculator
   ============================================================ */
.calc {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--r-xl);
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(56,189,248,0.06), transparent 55%),
    var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2);
}
.calc__controls { display: flex; flex-direction: column; gap: 1.6rem; }
.calc__field { display: flex; flex-direction: column; gap: 0.7rem; }
.calc__field label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-2);
}
.calc__field .calc__out {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  color: var(--cyan);
}
.calc__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  outline: none;
  cursor: pointer;
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--cyan);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line-2), var(--shadow-1);
  transition: transform var(--t) var(--ease), box-shadow var(--t);
}
.calc__range::-webkit-slider-thumb:hover { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(56,189,248,0.14); }
.calc__range::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--cyan);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line-2);
  cursor: pointer;
}
.calc__range:focus-visible { box-shadow: 0 0 0 3px rgba(56,189,248,0.25); }
.calc__result {
  text-align: center;
  padding: 1.75rem 1.5rem;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
}
.calc__result-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cyan);
  margin-bottom: 0.5rem;
}
.calc__amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  line-height: 1;
  background: linear-gradient(100deg, var(--cyan-lite), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.calc__amount span {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.35rem;
  -webkit-text-fill-color: var(--ink-3);
  color: var(--ink-3);
}
.calc__sub { font-size: 0.88rem; color: var(--ink-2); margin: 0.9rem 0 1.25rem; line-height: 1.5; }
.calc__note { font-size: 0.76rem; color: var(--ink-3); line-height: 1.55; margin-top: 1.25rem; }
@media (max-width: 820px) { .calc { grid-template-columns: 1fr; } }

/* ============================================================
   29. "Spot the phishing" quiz
   ============================================================ */
.quiz { max-width: var(--w-lg); margin-inline: auto; }
.quiz__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  padding: 0.8rem 1.2rem;
  margin-bottom: 1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
}
.quiz__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
/* Static fallback inside the JS-injected grid — the script replaces it on success,
   so a script failure shows this instead of a blank void under the section chrome. */
.quiz-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 2rem);
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.7;
}
.quiz__result {
  margin-top: 1.5rem;
  text-align: center;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--r-lg);
  background: radial-gradient(120% 120% at 50% 0%, var(--cyan-soft), transparent 70%), var(--surface);
  border: 1px solid var(--line-2);
}
.quiz__result h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-0);
  margin-bottom: 0.75rem;
}
.quiz__result p { color: var(--ink-2); line-height: 1.7; max-width: 52ch; margin: 0 auto 1.5rem; }
.qmail {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color var(--t), box-shadow var(--t);
}
.qmail.answered.correct { border-color: rgba(52,211,153,0.4); }
.qmail.answered.wrong   { border-color: rgba(251,113,133,0.4); }
.qmail__head { margin-bottom: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
.qmail__from {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-0);
  margin-bottom: 0.4rem;
}
.qmail__from .icon { width: 1rem; height: 1rem; color: var(--ink-3); flex-shrink: 0; }
.qmail__from b { font-weight: 600; word-break: break-word; }
.qmail__subject { font-size: 0.88rem; font-weight: 600; color: var(--ink-1); line-height: 1.4; }
.qmail__body { font-size: 0.9rem; color: var(--ink-2); line-height: 1.6; margin-bottom: 1.25rem; flex: 1; }
.qmail__actions { display: flex; gap: 0.6rem; }
.qmail__btn {
  flex: 1;
  height: 44px;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1.5px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink-1);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t), transform var(--t) var(--ease);
}
.qmail__btn:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-soft); transform: translateY(-1px); }
.qmail__btn:disabled { cursor: default; opacity: 0.55; }
.qmail__verdict {
  display: none;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-1);
}
.qmail.answered .qmail__verdict { display: flex; }
.qmail.correct .qmail__verdict { background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.3); }
.qmail.wrong .qmail__verdict   { background: rgba(251,113,133,0.1); border: 1px solid rgba(251,113,133,0.3); }
.qmail__verdict .icon { width: 1.05rem; height: 1.05rem; flex-shrink: 0; margin-top: 0.1rem; }
.qmail.correct .qmail__verdict .icon { color: var(--green); }
.qmail.wrong .qmail__verdict .icon { color: var(--rose); }
.qmail__verdict span { flex: 1; }
.qmail__verdict b { color: var(--ink-0); }
@media (max-width: 820px) { .quiz__grid { grid-template-columns: 1fr; } }

/* ============================================================
   30. Standalone-page title + form noscript notice
   ============================================================ */
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.95rem, 3.8vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  color: var(--ink-0);
}
.form__noscript {
  width: 100%;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--amber);
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.3);
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  margin: 0;
}

/* ============================================================
   31. Response times
   ============================================================ */
.sla-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
/* Card shell lives with .service — see the shared block above. */
.sla-tier__time {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 1.2rem 0 0.2rem;
  background: linear-gradient(100deg, var(--cyan-lite), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sla-tier__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  margin-bottom: 0.7rem;
}
.sla-tier__desc { font-size: 0.9rem; color: var(--ink-2); line-height: 1.65; flex: 1; }
.sla-note {
  margin: 1.5rem auto 0;
  max-width: 70ch;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-3);
  line-height: 1.6;
}
@media (max-width: 820px) { .sla-grid { grid-template-columns: 1fr; } }

/* ============================================================
   32. Pricing
   ============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
}
/* Card shell lives with .service — see the shared block above. */

/* Featured (recommended) variant — permanent accent bar + emphasised frame */
.price-card--featured {
  border-color: var(--line-3);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--cyan-soft), transparent 60%),
    var(--surface-2);
  box-shadow: var(--shadow-2);
}
.price-card--featured::before { transform: scaleX(1); }
.price-card--featured:hover { border-color: var(--cyan); box-shadow: var(--shadow-cyan); }

.price-card__badge {
  position: absolute;
  top: 1rem; right: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-full);
  background: var(--cyan-soft);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.price-card__badge .icon { width: 0.85rem; height: 0.85rem; }

.price-card .icon-tile { margin-bottom: 0.2rem; }

.price-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-0);
  margin: 1.2rem 0 0.4rem;
}
.price-card__tagline {
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 1.2rem;
}
.price-card__rec {
  color: var(--cyan);
  font-weight: 700;
}
.price-card__amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.18rem;
  margin-bottom: 0.35rem;
}
.price-card__from {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-3);
  align-self: center;
  margin-right: 0.1rem;
}
.price-card__currency {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  background: linear-gradient(100deg, var(--cyan-mid), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  align-self: flex-start;
}
.price-card__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--cyan-mid), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.price-card__suffix {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-2);
}
.price-card__unit {
  font-size: 0.8rem;
  color: var(--ink-3);
  margin: 0 0 1.3rem;
}
.price-card__features {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1;
}
.price-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--ink-1);
  line-height: 1.5;
}
.price-card__features .icon {
  width: 1.05rem; height: 1.05rem;
  flex-shrink: 0;
  margin-top: 0.12rem;
  color: var(--cyan);
}
.price-card .btn { margin-top: auto; }

.price-note {
  margin: 1.5rem auto 0;
  max-width: 76ch;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-3);
  line-height: 1.65;
}
.price-note a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid var(--line-3); }
.price-note a:hover { color: var(--ink-0); border-color: var(--cyan); }

@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .price-card--featured { order: -1; grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card--featured { order: 0; grid-column: auto; }
}

/* ============================================================
   33. Map facade — click to load Google Maps (privacy + perf)
   ============================================================ */
.map-wrap__facade {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-wrap__facade::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 600px at 80% -10%, rgba(56,189,248,0.08), transparent 60%),
    radial-gradient(600px 500px at 5% 110%, rgba(59,130,246,0.06), transparent 60%);
  pointer-events: none;
}
.map-wrap__placeholder {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 2rem;
}
.map-wrap__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}
.map-wrap__icon { width: 48px; height: 48px; color: var(--cyan); opacity: 0.75; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.map-wrap__facade:hover .map-wrap__icon { opacity: 1; transform: translateY(-2px); }
.map-wrap__text { display: flex; flex-direction: column; align-items: center; }
.map-wrap__region {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-0);
  margin-bottom: 0.6rem;
}
.map-wrap__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 1.7rem;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #04121F;
  background: linear-gradient(100deg, var(--cyan-mid), var(--cyan));
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-cyan);
  transition: transform var(--t) var(--ease), box-shadow var(--t), filter var(--t);
}
.map-wrap__button:hover { transform: translateY(-2px); filter: brightness(1.06); }
.map-wrap__button:active { transform: translateY(0) scale(0.985); }
.map-wrap__button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.map-wrap[data-loaded] { background: transparent; }
.map-wrap[data-loaded] .map-wrap__placeholder { display: none; }

/* ============================================================
   PRINT — people genuinely print the contact block, hours and pricing.
   Browsers drop backgrounds but keep author colours, so --ink-1 on white
   prints at ~1.5:1 (effectively blank). Override the TOKENS rather than a
   hand-listed set of classes — there are 112 var(--ink-*) references and a
   class list leaves most of the page pale. Must stay LAST in the file: a bare
   :root would lose to the light-theme block on source order alone, hence the
   explicit theme selectors at equal specificity plus later position.
   ============================================================ */
@media print {
  :root, :root[data-theme="light"], :root[data-theme="dark"] {
    --bg:#fff; --bg-alt:#fff; --surface:#fff; --surface-2:#fff; --surface-3:#fff;
    --ink-0:#000; --ink-1:#1a1a1a; --ink-2:#333; --ink-3:#444;
    --line:#bbb; --line-2:#999; --line-3:#777; --field-line:#777;
    --cyan:#0b4f70; --cyan-mid:#0b4f70; --cyan-deep:#0b4f70;
    --cyan-lite:#0b4f70; --cyan-hover:#0b4f70; --blue:#123a8a;
    --cyan-soft:transparent; --cyan-softer:transparent; --cyan-glow:transparent;
    --shadow-1:none; --shadow-2:none;
  }
  .nav, .nav__mobile, .fab, .to-top, .scroll-progress, .bg-field, .bg-grain,
  .skip-link, .toast-wrap, .hc-overlay, .map-wrap, .theme-toggle, .hero__schematic { display:none !important; }
  body { background:#fff !important; color:#000; }
  [data-reveal], .js [data-reveal] { opacity:1 !important; transform:none !important; }
  .js .hero__content[data-reveal] { animation:none !important; }
  /* Gradient-clipped text relies on a background, which print suppresses — without
     this the stat figures, step numbers, SLA times and the calculator amount all
     print blank. Not in the original plan text; added because leaving them out
     defeats the point of the print rules. */
  .grad-text, .stat__n, .step__num, .sla-tier__time, .calc__amount {
    background: none !important;
    -webkit-text-fill-color: var(--ink-0) !important;
    color: var(--ink-0) !important;
  }
  .section { padding-block: 1.5rem; }
  details.faq:not([open]) > *:not(summary) { content-visibility: visible !important; }
  a[href^="mailto:"]::after { content:" (" attr(href) ")"; font-size:0.85em; }
}