/* ===========================================================
   WaTo Consulting — design system
   Brand sampled from WaTo's own pages:
   cyan #37bdf2 · cyan-dark #1298cf · blue #0f6db3 · navy #12172a
   Bold uppercase headings (Poppins), clean white, pill buttons.

   Modern CSS: fluid type/spacing via clamp(), logical properties,
   CSS nesting, :is()/:where(), container queries, dvh units.
   =========================================================== */

:root {
  /* ---- Brand palette ---- */
  --cyan: #37bdf2;
  --cyan-dark: #1298cf; --cyan-text: #0b7aad;
  --cyan-light: #65cdf6;
  --blue: #0f6db3;
  --navy: #12172a;
  --ink: #080808;
  --text: #1f2933;
  --body: #2b3440;
  --muted: #5f6b7a;
  --line: #dce3ea;
  --soft: #f5f7fa;
  --soft-2: #edf3f9;
  --white: #ffffff;

  /* ---- Shadows ---- */
  --shadow-sm: 0 0.375rem 1.375rem rgba(17,24,39,.08);
  --shadow: 0 0.875rem 2.2rem rgba(17,24,39,.10);
  --shadow-cyan: 0 0.625rem 1.75rem rgba(55,189,242,.35);
  --offset: #46bdf5;

  /* ---- Radii ---- */
  --radius-lg: 1.375rem;
  --radius: 0.875rem;

  /* ---- Layout ---- */
  --maxw: 74rem;                        /* 1184px */
  --side-glow: 0 0 0 4px rgba(55,189,242,.10), 0 4px 18px rgba(55,189,242,.32);   /* soft blue glow on the side-bar circles */
  --gutter: clamp(1rem, 3vw, 2rem);    /* fluid container padding */

  /* ---- Fluid spacing scale ---- */
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-sm: clamp(0.5rem, 1vw, 0.75rem);
  --space-md: clamp(1rem, 2vw, 1.5rem);
  --space-lg: clamp(1.5rem, 3vw, 2.75rem);
  --space-xl: clamp(2.5rem, 5vw, 4.625rem);

  /* ---- Motion ----
     Audited 2026-09-23: 52 transitions across 12 ad-hoc durations, and ~117
     of ~120 of them running on `ease` — 73 declaring it, 44 declaring nothing,
     which is the same curve. `ease` is what you get when nobody picked one,
     and it is why a site with 160 transforms and 14 keyframes still read as
     flat. The fix was never more animation.

     Duration is chosen by how far a thing travels, not by which component it
     belongs to. Ambient loops (marquee, bob, eggring, fabpulse, ringwiggle,
     statuspulse, spin) keep their own long timings — they are character, not
     UI feedback, and folding them in here would flatten them. */
  --t-1: 140ms;   /* colour, border, opacity — feedback that should feel instant */
  --t-2: 200ms;   /* hovers, lifts, small reveals — the default */
  --t-3: 320ms;   /* panels, dropdowns, anything that changes size */
  --t-4: 500ms;   /* entrances and page-level reveals */

  --e-out:    cubic-bezier(.22, .80, .30, 1);     /* arriving and settling; the workhorse */
  --e-soft:   cubic-bezier(.33, .60, .30, 1);     /* same shape, gentler — for bigger moves */
  --e-in-out: cubic-bezier(.65, .02, .35, 1);     /* travelling between two states, e.g. a sliding indicator */
  --e-spring: cubic-bezier(.20, .90, .30, 1.14);  /* slight overshoot, for things that pop */

  /* Hover lift had the same sprawl the durations did, but in distance: eight
     values across -1px to -12px. Two tiers cover everything generic —
     anything bigger lives in 3d-cards.css, whose -4/-6/-10/-12px lifts come
     with scale() and translateZ() and are that layer's deliberate character,
     not general feedback. Folding those in would flatten them, the same
     reason the ambient loops keep their own timings. */
  --lift-sm: -2px;   /* buttons, pills, small controls */
  --lift: -3px;      /* cards, surfaces, floating icons */
  --glass-bg: rgba(255, 255, 255, .72);
  --glass: saturate(180%) blur(20px);

  /* ---- Typography ---- */
  --head: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --display: "Ethnocentric", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* WaTo brand headline font (the same Ethnocentric used on the Sitejet build & logo) */
/* Poppins and Open Sans, served from this site (they used to come from Google Fonts,
   whose stylesheet held up the first paint). Latin-ext only downloads if a page needs it. */
@font-face {
  font-family: "Open Sans"; font-style: normal; font-weight: 400 700; font-display: swap; font-stretch: 100%;
  src: url("../assets/fonts/open-sans-400-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans"; font-style: normal; font-weight: 400 700; font-display: swap; font-stretch: 100%;
  src: url("../assets/fonts/open-sans-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../assets/fonts/poppins-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../assets/fonts/poppins-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Ethnocentric";
  src: url("../assets/fonts/ethnocentric.woff2") format("woff2"),
       url("../assets/fonts/ethnocentric.ttf") format("truetype");
  font-weight: 400 800;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* A #link lands its target clear of the sticky header (79px desktop, 61px phone)
   rather than underneath it. Rules with their own scroll-margin-top still win. */
:target { scroll-margin-top: 5.625rem; }
body {
  margin: 0; font-family: var(--font); color: var(--body);
  background: var(--white); line-height: 1.6;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);   /* fluid 16–17px */
  -webkit-font-smoothing: antialiased;
}
/* ---------- Left side bar (partials/wide-mark.njk) ----------
   Mirrors the right help dock (spec 2026-10-17-side-bars-design.md):
   - Out (html.left-out: right bar out and 2000px+ wide): the WaTo logo
     bobbing with the service icons slowly circling it, bottom-left. It's a
     toy too: grab it and throw it (js/toy.js).
   - Tucked (no room, page forces it, or shooed): the same service icons as
     a column against the left edge, like the right dock's tucked column.
   - Phones and small tablets (under 1000px): not shown.
   No character: pages already have two (Wato, 2026-10-17). */
.wide-mark { display: none; }
@media (min-width: 1000px) {
  .wide-mark { display: block; position: fixed; z-index: 60; user-select: none; }
  .wide-mark a { color: inherit; text-decoration: none; -webkit-user-drag: none; }
  .wide-mark img { pointer-events: none; -webkit-user-drag: none; }
  .wide-mark-ico > span {
    position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
    background: var(--white); color: var(--ic, var(--cyan-text)); box-shadow: var(--side-glow);
    border: 1px solid rgba(55,189,242,.35);
    transition: background var(--t-1) var(--e-out), color var(--t-1) var(--e-out), border-color var(--t-1) var(--e-out);
  }
  .wide-mark-ico:is(:hover, :focus-visible) > span { background: var(--blue); color: #fff; border-color: var(--blue); }
  .wide-mark-ico svg { animation: wm-jiggle 8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .9s); transform-origin: 50% 55%; }
  .wm-label {
    position: absolute; left: calc(100% + .5rem); top: 50%; translate: 0 -50%;
    font-family: var(--head); font-weight: 700; font-size: .7rem; color: var(--ink); white-space: nowrap;
    background: #fff; padding: 3px .5rem; border-radius: .4375rem; box-shadow: 0 2px .375rem rgba(17,24,39,.14);
    opacity: 0; pointer-events: none; transition: opacity var(--t-1) var(--e-out);
  }
  .wide-mark-ico:is(:hover, :focus-visible) .wm-label { opacity: 1; }

  /* Tucked: a column of circles hugging the left edge, sized like the
     right dock's (3.125rem circles, .75rem apart, same bottom offset). */
  /* The left bar's own controls, styled like the right dock's circles:
     × on the ring tucks both sides, » under the column brings both back. */
  /* Brand marks (Microsoft 365, OpenAI, Claude) keep their own colours. */
  .wm-brand { width: 1.15rem; height: 1.15rem; }
  .wm-shoo, .wm-restore {
    display: none; place-items: center; padding: 0; cursor: pointer; border-radius: 50%;
    background: var(--white); color: var(--cyan-text); border: 1px solid rgba(55,189,242,.35);
    box-shadow: var(--side-glow);
    transition: background var(--t-1) var(--e-out), color var(--t-1) var(--e-out), border-color var(--t-1) var(--e-out);
  }
  :is(.wm-shoo, .wm-restore):is(:hover, :focus-visible) { background: var(--blue); color: #fff; border-color: var(--blue); }
  html.sides-tucked .wm-restore { display: grid; width: 3.125rem; height: 3.125rem; margin-top: .75rem; }
  .wm-restore svg { width: 1.3125rem; height: 1.3125rem; }
  .wm-restore, .wm-shoo { --ic: var(--cyan-dark); color: var(--ic); }
  html.left-out .wm-shoo { display: grid; position: absolute; top: .4rem; right: .4rem; width: 1.9rem; height: 1.9rem; z-index: 2; }
  .wm-shoo svg { width: .85rem; height: .85rem; }
  html:not(.left-out) {
    .wide-mark { left: -.625rem; bottom: 1.25rem; }
    .wide-mark-home { display: none; }
    .wide-mark-ring { display: flex; flex-direction: column; gap: .75rem; }
    .wide-mark-ico { display: block; width: 3.125rem; height: 3.125rem; }
    .wide-mark-ico svg { width: 1.3125rem; height: 1.3125rem; }
    .wm-ring-only { display: none; }   /* the column shows the four that match the right */
  }

  /* Out: the full logo ring. */
  html.left-out {
    .wide-mark {
      --s: clamp(12rem, calc((100vw - var(--maxw)) / 2 - 2rem), 17rem);
      cursor: grab; touch-action: none;
      left: .75rem; bottom: 1.25rem; width: var(--s); height: var(--s); border-radius: 50%;
      translate: var(--toy-x, 0px) var(--toy-y, 0px);
    }
    .wide-mark.is-held { cursor: grabbing; }
    .wide-mark.is-held .wide-mark-logo { animation-play-state: paused; scale: 1.08; }
    .wide-mark-logo { height: auto; animation: wm-float 7s ease-in-out infinite; }
    .wide-mark-ring {
      position: absolute; inset: 1.25rem; border-radius: 50%;
      border: 1px dashed rgba(55,189,242,.45);
      animation: wm-spin 90s linear infinite;
    }
    .wide-mark-ico {
      position: absolute; left: 50%; top: 50%; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem;
      transform: rotate(var(--a)) translateX(calc(var(--s) / 2 - 1.25rem)) rotate(calc(-1 * var(--a)));
    }
    .wide-mark-ico > span { animation: wm-spin 90s linear infinite reverse; }   /* stays upright while the ring turns */
    .wide-mark-ico svg { width: 1.2rem; height: 1.2rem; }
    .wide-mark-home { position: absolute; inset: 0; margin: auto; width: calc(var(--s) * .55); height: calc(var(--s) * .3); display: grid; place-items: center; }
    .wide-mark-home .wide-mark-logo { position: static; width: 100%; }
    /* Stop the ring while the pointer is on the bar so icons are easy to hit. */
    .wide-mark:is(:hover, :focus-within) :is(.wide-mark-ring, .wide-mark-ico > span) { animation-play-state: paused; }
  }
}
@keyframes wm-spin { to { rotate: 360deg; } }
/* A slight jiggle, one icon after another, like the right dock's icons wiggle. */
@keyframes wm-jiggle { 0%, 86%, 100% { rotate: 0deg; } 89% { rotate: -11deg; } 92% { rotate: 9deg; } 95% { rotate: -5deg; } 98% { rotate: 2deg; } }
@keyframes wm-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-.5rem) rotate(3deg) scale(1.04); }
}

:is(h1, h2, h3, h4) { font-family: var(--head); color: var(--ink); line-height: 1.06; margin: 0 0 .5em; font-weight: 800; }
h1 { font-family: var(--display); font-size: clamp(1.8rem, 3.9vw, 3rem); letter-spacing: .01em; line-height: 1.05; text-transform: uppercase; hyphens: auto; overflow-wrap: break-word; }
/* long section headings read better in Poppins, title case (Ethnocentric stays on the hero + short statement lines) */
h2 { font-family: var(--head); font-size: clamp(1.5rem, 2.9vw, 2.2rem); letter-spacing: -.01em; line-height: 1.14; text-transform: none; font-weight: 800; }
h3 { font-size: 1.22rem; letter-spacing: -.01em; }
p { margin: 0 0 1.1em; }
a { color: var(--cyan-text); text-decoration: none; }
a:hover { color: var(--blue); }
img { max-width: 100%; display: block; height: auto; }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 51.25rem; }
.cyan { color: var(--cyan); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--head); text-transform: uppercase; letter-spacing: .16em;
  font-size: .8rem; font-weight: 700; color: var(--cyan-text); margin-block-end: 1rem;

  &::before { content: ""; width: 2.125rem; height: 3px; border-radius: 3px; background: var(--cyan); }
  &.center { justify-content: center; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  font-family: var(--head); font-weight: 700; font-size: 1rem; min-height: 3.25rem;
  padding: 0.8125rem 1.75rem; border-radius: 999px; cursor: pointer; border: 2px solid transparent;
  transition: transform var(--t-1) var(--e-spring), box-shadow var(--t-1) var(--e-out), background var(--t-1) var(--e-out), border-color var(--t-1) var(--e-out);

  &:active { transform: translateY(0) scale(.985); }
}
.btn-primary {
  background: var(--blue); color: #fff; box-shadow: 0 0.625rem 1.75rem rgba(15,109,179,.30);

  &:hover { background: var(--cyan-dark); color: #fff; transform: translateY(var(--lift-sm)); }
  &:active { background: var(--blue); }
}
.btn-secondary {
  background: #fff; border-color: var(--line); color: var(--ink);

  &:hover { border-color: var(--cyan); transform: translateY(var(--lift-sm)); box-shadow: var(--shadow-sm); }
  &:active { border-color: var(--cyan-dark); background: var(--soft); }
}
.btn-ghost {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.55);

  &:hover { background: rgba(255,255,255,.12); color: #fff; }
}

/* ---------- Top strip ---------- */
/* ---------- Top bar: help first (techs' option C, picked 2026-10-19; light strip 2026-11-06) ----------
   A pale strip that joins the white menu under it, with the footer's cyan line
   along the top. Rotating line on the left (main.js rotates window.__promos
   through #tbPromo), five help actions on the right: Search, Login and Order as
   plain links, Remote session outlined, Log a job the one solid button, in the
   same blue as .btn-primary. The line clips itself with an ellipsis rather than
   pushing the buttons around; under 1100px there is no room for it next to five
   actions, so it is dropped. Under 820px Login (.tb-desk) leaves too and the bar
   is a 4-up button grid. */
.topbar {
  background-color: var(--soft-2); color: var(--body); font-size: .86rem; position: relative; overflow: hidden;
  border-top: 3px solid var(--cyan); box-shadow: inset 0 -1px 0 var(--line);

  /* the same diamonds as the hero and the soft sections */
  &::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      repeating-linear-gradient(45deg, rgba(55,189,242,.10) 0 1px, transparent 1px 1.625rem),
      repeating-linear-gradient(-45deg, rgba(55,189,242,.10) 0 1px, transparent 1px 1.625rem); }

  & .container { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 3.5rem; }
  & a { color: var(--navy); display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; white-space: nowrap; }
  & svg { width: 1rem; height: 1rem; flex: none; }

  & .promo {
    flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; overflow: hidden;
    font-weight: 600; color: var(--body); transition: opacity var(--t-3) var(--e-out);
    /* the eyebrow's dash, smaller */
    &::before { content: ""; flex: none; width: 1.5rem; height: 3px; border-radius: 3px; background: var(--cyan); margin-inline-end: .15rem; }
    & .au-badge, & .arrow { flex: 0 0 auto; }
    & .au-badge { background: var(--navy); color: var(--white); font-family: var(--head); font-weight: 800; font-size: .72rem; letter-spacing: .03em; padding: 3px 0.5rem; border-radius: 6px; margin-inline-end: 0.05rem; }
    & .arrow { color: var(--cyan-text); transition: transform var(--t-1) var(--e-spring); display: inline-block; }
    &:hover { color: var(--navy); }
    &:hover .arrow { transform: translateX(4px); }
  }
  & .promo-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  & .promo-off { flex: 1 1 auto; }
  & .promo-off::before { display: none; }

  & .tb-help { display: flex; align-items: center; gap: 1rem; flex: none; }
  & .tb-btns { display: flex; align-items: center; gap: .5rem; flex: none; }
  & .tb-btns a { font-family: var(--head); border: 1.5px solid transparent; border-radius: 999px; padding: .32rem .6rem; gap: .6rem; transition: background var(--t-1) var(--e-out), border-color var(--t-1) var(--e-out), transform var(--t-1) var(--e-spring); }
  & .tb-btns a:hover { background: var(--white); }
  & .tb-btns svg { width: 1.25rem; height: 1.25rem; color: var(--cyan-text); }
  & .tb-btns a > span { display: flex; flex-direction: column; font-weight: 700; font-size: .84rem; line-height: 1.15; }
  & .tb-btns b { font-weight: 700; white-space: nowrap; }
  & .tb-btns small { display: none; font-family: var(--font); font-weight: 400; font-size: .74rem; color: var(--muted); }
  /* Remote session and Log a job keep their second line: the techs read those
     two addresses out over the phone. The outline is --blue, not --line, so the
     button's edge still shows on the pale bar. */
  & .tb-btns .tb-hl { background: var(--white); border-color: var(--blue); padding-inline: .85rem 1rem; }
  & .tb-btns a:not(.tb-hl) + .tb-hl { margin-inline-start: .5rem; }
  & .tb-btns .tb-hl small { display: block; }
  & .tb-btns .tb-hl svg { color: var(--blue); }
  & .tb-btns .tb-hl:hover { background: var(--soft); border-color: var(--navy); }
  & .tb-btns .tb-main { background: var(--blue); border-color: var(--blue); color: var(--white); box-shadow: 0 .35rem 1rem rgba(15,109,179,.30); }
  & .tb-btns .tb-main svg { color: var(--white); }
  & .tb-btns .tb-main small { color: var(--soft-2); }
  /* navy, not .btn-primary's --cyan-dark: white on that is too faint at this size */
  & .tb-btns .tb-main:hover { background: var(--navy); border-color: var(--navy); transform: translateY(var(--lift-sm)); }
}
.tb-narrow { display: none; }
@media (max-width: 1100px) {
  .topbar .tb-wide, .topbar .promo { display: none; }
  .topbar .container { justify-content: flex-end; }
}
@media (max-width: 820px) {
  .topbar .container { display: block; padding-inline: 0; min-height: 0; }
  .topbar .tb-btns .tb-desk { display: none; }
  .topbar .tb-help { display: block; }
  .topbar .tb-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; padding: .4rem .45rem; }
  .topbar .tb-btns a { flex-direction: column; justify-content: center; padding: .38rem 0; gap: .2rem; border-radius: var(--radius); }
  .topbar .tb-btns .tb-hl { padding-inline: 0; }
  .topbar .tb-btns a:not(.tb-hl) + .tb-hl { margin-inline-start: 0; }
  .topbar .tb-btns a > span { align-items: center; font-size: .72rem; }
  .topbar .tb-btns .tb-hl small { display: none; }
  .tb-narrow { display: inline; }
}
html[data-topbar] .topbar { display: none; }
html[data-topbar="a"] .tbx-a, html[data-topbar="b"] .tbx-b, html[data-topbar="c"] .tbx-c { display: block; }
html[data-topbar] .tbx-switch { display: flex; }
.tbx { background: var(--navy); color: #c7d4ea; font-size: .86rem; }
.tbx .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.625rem; }
.tbx a { color: #fff; display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; white-space: nowrap; }
.tbx svg { width: 1rem; height: 1rem; flex: none; }
.tbx-promo { color: #cfd8e3 !important; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block !important; }
.tbx-promo .arrow { color: var(--cyan); }
.tbx-promo .au-badge { background: var(--cyan); color: #0a0a0a; font-family: var(--head); font-weight: 800; font-size: .72rem; padding: 3px .5rem; border-radius: 6px; }
.tbx-btns b { white-space: nowrap; }
.tbx-narrow { display: none; }
/* A: help actions on the right of the dark bar */
.tbx-acts { display: flex; align-items: center; gap: 1.25rem; flex: none; }
.tbx-acts a:hover { color: var(--cyan-light); }
.tbx-acts .tbx-hl { background: var(--cyan); color: var(--navy); font-weight: 700; padding: .3rem .8rem; border-radius: 999px; }
.tbx-acts .tbx-hl:hover { background: var(--cyan-light); color: var(--navy); }
.tbx-acts .tbx-dim { color: #9fb4d4; padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,.22); }
/* B: bright "Need help now?" block */
.tbx-b .container { min-height: 2.75rem; }
.tbx-help { display: flex; align-items: stretch; align-self: stretch; background: var(--cyan); color: var(--navy); padding: 0 .5rem 0 1rem; flex: none; }
.tbx-help b { display: flex; align-items: center; margin-right: .5rem; font-family: var(--head); white-space: nowrap; }
.tbx-help a { color: var(--navy); font-weight: 700; padding: 0 .75rem; border-left: 1px solid rgba(18,23,42,.18); }
.tbx-help a:hover { background: var(--cyan-light); }
/* C: help-first, four big labelled buttons */
.tbx-c .container { min-height: 4rem; }
.tbx-lbl { color: #cfd8e3; font-weight: 600; }
.tbx-btns { display: flex; gap: .6rem; flex: none; }
.tbx-btns a { background: #1d2440; border: 1px solid #2f3a5c; border-radius: var(--radius); padding: .45rem .85rem; gap: .6rem; }
.tbx-btns a:hover { border-color: var(--cyan); }
.tbx-btns svg { width: 1.25rem; height: 1.25rem; color: var(--cyan); }
.tbx-btns span { display: flex; flex-direction: column; font-weight: 700; line-height: 1.15; }
.tbx-btns span .tbx-wide { display: inline; }
.tbx-btns small { font-weight: 400; font-size: .74rem; color: #9fb4d4; }
.tbx-btns .tbx-hl { background: var(--cyan); border-color: var(--cyan); color: var(--navy); }
.tbx-btns .tbx-hl svg, .tbx-btns .tbx-hl small { color: var(--navy); }
@media (max-width: 1100px) { .tbx-a .tbx-promo, .tbx-b .tbx-promo { display: none !important; } .tbx .container { justify-content: flex-end; } .tbx-c .container { justify-content: space-between; } }
@media (max-width: 820px) {
  .tbx .container { padding-inline: 0; min-height: 0; }
  .tbx-wide { display: none !important; }
  .tbx-narrow { display: inline; }
  .tbx-a .container, .tbx-c .container { display: block; }
  .tbx-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
  .tbx-acts a { justify-content: center; padding: .8rem 0; font-size: .82rem; font-weight: 600; }
  .tbx-acts .tbx-hl { border-radius: 0; padding: .8rem 0; }
  .tbx-help { width: 100%; padding: 0 .4rem 0 .9rem; font-size: .82rem; }
  .tbx-help b { margin-right: auto; }
  .tbx-help a { padding: .8rem .4rem; border-left: 0; gap: .3rem; }
  .tbx-lbl { display: none; }
  .tbx-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; padding: .45rem; }
  .tbx-btns a { flex-direction: column; justify-content: center; padding: .45rem 0; gap: .2rem; font-size: .76rem; }
  .tbx-btns span { align-items: center; }
  .tbx-btns small { display: none; }
}
.tbx-switch { position: fixed; left: 50%; translate: -50% 0; bottom: .75rem; z-index: 9999; align-items: center; gap: .35rem; padding: .4rem .5rem .4rem .8rem; border-radius: 999px; background: var(--navy); color: #fff; font-size: .78rem; font-weight: 600; box-shadow: var(--shadow-sm); }
.tbx-switch a { color: #fff; padding: .2rem .55rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); text-decoration: none; }
html[data-topbar="a"] .tbx-switch [data-v="a"], html[data-topbar="b"] .tbx-switch [data-v="b"], html[data-topbar="c"] .tbx-switch [data-v="c"] { background: var(--cyan); color: var(--navy); border-color: var(--cyan); }

/* ---------- Floating help — separate buttons (no enclosing box) ---------- */
.float-help {
  position: fixed; right: 0; bottom: 1.25rem; z-index: 80;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.625rem;
  opacity: 0; transform: translateY(1.125rem); pointer-events: none; visibility: hidden;
  transition: opacity var(--t-3) var(--e-out), transform var(--t-3) var(--e-spring), right var(--t-3) var(--e-in-out);

  &.show { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  &.dismissed { right: -0.625rem; }   /* tuck the shooed column closer to the edge */
  &.dismissed .float-actions { display: none; }
  &.dismissed .float-icons { flex-direction: column; }
  /* Minimised: the labels become hover/focus tooltips to the left of each icon. */
  &.dismissed .float-icons :is(a, button) { position: relative; }
  &.dismissed .fi-name {
    position: absolute; right: calc(100% + 0.5rem); top: 50%; transform: translateY(-50%);
    opacity: 0; pointer-events: none; transition: opacity var(--t-1) var(--e-out);
  }
  &.dismissed .float-icons :is(a, button):is(:hover, :focus-visible) .fi-name { opacity: 1; }
  &.dismissed .float-icons .fi-q,
  &.dismissed .float-icons .fi-help { display: flex; }
  &.dismissed .float-icons { flex-direction: column; align-items: flex-end; }
}
.float-icons {
  display: flex; gap: 0.75rem; align-items: flex-start;

  & :is(a, button) { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; background: none; border: 0; padding: 0; cursor: pointer; }
  & .fi-q, & .fi-help { display: none; }
}
.fi-circle {
  width: 3.125rem; height: 3.125rem; border-radius: 50%;
  background: var(--white); color: var(--ic, var(--cyan-text)); border: 1px solid rgba(55,189,242,.35);
  display: grid; place-items: center; box-shadow: var(--side-glow);
  transition: background var(--t-1) var(--e-out), color var(--t-1) var(--e-out), border-color var(--t-1) var(--e-out), transform var(--t-1) var(--e-spring);

  & svg { width: 1.3125rem; height: 1.3125rem; }
}
/* Each circle has its own colour (the brand logos on the left kept theirs and
   Wato liked it); hover still fills blue with a white icon. */
.fi-phone { --ic: #1e9e5a; } .fi-contact { --ic: #e0483e; } .fi-im { --ic: #7c3aed; }
.fi-help { --ic: #e39a0b; } .fi-q { --ic: var(--cyan-dark); }
.float-icons :is(a, button):is(:hover, :focus-visible) .fi-circle { background: var(--blue); color: #fff; border-color: var(--blue); transform: translateY(var(--lift)); }
.fi-name { font-family: var(--head); font-weight: 700; font-size: .66rem; color: var(--ink); background: #fff; padding: 3px 0.5rem; border-radius: 0.4375rem; box-shadow: 0 2px 0.375rem rgba(17,24,39,.14); white-space: nowrap; }
.fi-phone svg { animation: ringwiggle 2.6s ease-in-out 3; transform-origin: 50% 15%; }
.fi-contact svg { animation: bob 3.2s ease-in-out 3; }
.fi-im svg { animation: zoompop 3s ease-in-out 3; }
@keyframes bob { 0%, 60%, 100% { transform: translateY(0); } 75% { transform: translateY(-4px); } 88% { transform: translateY(0); } }
.float-help-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; position: relative;
  background: var(--blue); color: #fff; border-radius: 999px; padding: 0.75rem 1.25rem;
  font-family: var(--head); font-weight: 800; font-size: .9rem; border: 1px solid rgba(55,189,242,.35); box-shadow: 0 4px 14px rgba(18,23,42,.12);
  transition: background var(--t-1) var(--e-out), transform var(--t-1) var(--e-spring);

  &:hover { background: var(--cyan-dark); transform: translateY(var(--lift-sm)); }
  & svg { width: 1.125rem; height: 1.125rem; }
  & .fh-txt { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
  & .fh-now { font-size: .74em; font-weight: 700; opacity: .9; margin-block-start: 1px; }
  &::after { content: ""; position: absolute; inset: 0; border-radius: 999px;
    box-shadow: 0 0 0 0 rgba(15,109,179,.5); animation: fabpulse 2.4s ease-out infinite; pointer-events: none; }
}
@keyframes fabpulse { 0% { box-shadow: 0 0 0 0 rgba(15,109,179,.5); } 70% { box-shadow: 0 0 0 1rem rgba(15,109,179,0); } 100% { box-shadow: 0 0 0 0 rgba(15,109,179,0); } }
.float-actions { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.float-dismiss {
  background: #fff; border: 1px solid rgba(55,189,242,.35); cursor: pointer;
  font-family: var(--head); font-weight: 700; font-size: .78rem; color: var(--muted);
  border-radius: 999px; padding: 0.6875rem 1rem; box-shadow: 0 4px 14px rgba(18,23,42,.12); white-space: nowrap;
  transition: color var(--t-1) var(--e-out), border-color var(--t-1) var(--e-out);

  &:hover { color: var(--ink); border-color: var(--muted); }
}
/* Smallchat: hidden on load via CSS; JS adds .sc-active to <body> to reveal it.
   The embed script injects #Smallchat at <body> level (NOT inside #sc-jail),
   so we hide it with CSS and toggle a body class instead of moving DOM nodes
   (moving an iframe via appendChild wipes its contentDocument). */
#Smallchat { display: none !important; }
body.sc-active #Smallchat { display: block !important; }
@keyframes ringwiggle { 0%, 55%, 100% { transform: rotate(0); } 60% { transform: rotate(14deg); } 66% { transform: rotate(-12deg); } 72% { transform: rotate(9deg); } 78% { transform: rotate(-6deg); } 84% { transform: rotate(0); } }
@keyframes zoompop { 0%, 65%, 100% { transform: scale(1); } 78% { transform: scale(1.28); } 88% { transform: scale(.92); } }
@keyframes keyturn { 0%, 55%, 100% { transform: rotate(0); } 70% { transform: rotate(-32deg); } 85% { transform: rotate(-12deg); } }
@media (max-width: 600px) {
  .float-help {
    right: 0.875rem; bottom: 0.875rem;

    /* frosted glass panel behind the widget */
    &::before { content: ""; position: absolute; inset: -0.625rem -0.75rem;
      background: rgba(255, 255, 255, .32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      border-radius: var(--radius-lg); z-index: -1; pointer-events: none; }

    /* shooed: tuck close to / just off the edge */
    &.dismissed { right: -1.125rem; transform: none; }
    &.dismissed::before { display: none; }
  }
  .fi-circle { width: 2.875rem; height: 2.875rem; }
  .fi-circle svg { width: 1.1875rem; height: 1.1875rem; }
}

/* ---------- Easter-egg characters (idle phone peeker + help peeker) ---------- */
.wato-egg {
  position: fixed; z-index: 75; pointer-events: none; opacity: 0; will-change: transform, opacity;

  & img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0.75rem 1.625rem rgba(8,8,8,.30)); }
  & .egg-bubble {
    position: absolute; left: -0.625rem; top: 0.25rem; transform: translateX(-100%);
    background: rgba(255,255,255,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    color: var(--ink); font-family: var(--head); font-weight: 700; font-size: .82rem; line-height: 1.25;
    padding: 0.5625rem 0.8125rem; border-radius: 0.875rem 0.875rem 0.25rem 0.875rem;
    box-shadow: var(--shadow); white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.22);
    opacity: 0; transition: opacity var(--t-3) var(--e-out);
  }
  & .egg-bubble.show { opacity: 1; }
}
/* faint frosted halo behind the character */
:is(.egg-phone, .egg-q)::before { content: ""; position: absolute; left: 50%; top: 46%; width: 94%; height: 80%;
  transform: translate(-50%, -50%); border-radius: 1.625rem; background: rgba(255,255,255,.5); filter: blur(1.125rem); z-index: -1; pointer-events: none; }
/* Phone peeker — rises from behind the floating widget, bottom-right */
.egg-phone {
  right: 0.375rem; bottom: 0; width: 10.5rem; transform: translateY(112%);
  translate: var(--toy-x, 0px) var(--toy-y, 0px); touch-action: none; user-select: none;

  &.in { opacity: 1; transform: translateY(-22%); pointer-events: auto; cursor: grab; transition: transform .75s cubic-bezier(.2,.9,.28,1.15), opacity var(--t-3) var(--e-out); }
  &.is-held { cursor: grabbing; }
  &.is-held img { scale: 1.06; }
  &.out { opacity: 0; transform: translateY(112%); transition: transform .6s ease, opacity var(--t-4) var(--e-out); }
}
/* Peeking/hiding frame — the on-movement pose is a tight face crop, so
   render it at half size tucked into the bottom-right corner (a small
   "leaning in" peek, not a looming face). Only the image scales, anchored
   to the corner; the element's slide-in transform is untouched. Its frosted
   halo is sized for the full figure, so hide it while shrunk. */
.egg-phone img { transform-origin: top right; }
/* translate() before scale() so the offsets read in the image's own box:
   drop it down and push it further off the right edge so it peeks lower and
   more tucked-away. The Y offset positions the full peeking figure so it
   rises from the bottom-right without cropping the artwork. */
.egg-phone.pose-hide img { transform: translate(10%, 64%) scale(.5); }
.egg-phone.pose-hide::before { opacity: 0; }
/* Motion wrapper: JS animates this layer's transform so the incoming frame
   settles into place (and the outgoing ghost drifts away). Kept separate
   from the img's pose transform above so the two don't fight. */
.egg-frame { display: block; transform-origin: bottom right; will-change: transform; }
/* Help peeker — pops up beside the help control */
.egg-q {
  right: 18.625rem; bottom: 0.375rem; width: 5.625rem; transform: translateY(125%) scale(.92); transform-origin: bottom center;

  &.eq-min { right: 5.125rem; bottom: 0.75rem; width: 5.75rem; }
  &.in { opacity: 1; transform: translateY(0) scale(1); transition: transform var(--t-4) var(--e-spring), opacity var(--t-3) var(--e-out); }
}
/* Phone icon "rings" while the peeker points at it */
.fi-phone.egg-ring .fi-circle { background: var(--cyan-dark); color: #fff; border-color: var(--cyan-dark); animation: eggring .55s ease-in-out 6; transform-origin: 50% 18%; }
@keyframes eggring { 0%,100% { transform: rotate(0); } 22% { transform: rotate(16deg); } 48% { transform: rotate(-13deg); } 72% { transform: rotate(8deg); } }
/* Reduced motion: still show the character (it's static content, not the
   kind of animation this preference is meant to suppress) — just skip the
   slide/fade transition so it appears/disappears instantly instead. */
@media (max-width: 820px) { .wato-egg { display: none !important; } }

/* ---------- Header / nav ---------- */
.site-header {
  /* The header was already sticky with backdrop-filter, but at 96% opacity only
     4% of the page showed through, so the blur had nothing to work with — the
     glass was paid for and invisible. saturate() is what stops the blurred
     content underneath going grey. */
  position: sticky; top: 0; z-index: 50; background: var(--glass-bg);
  backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 0.5rem 1.125rem rgba(17,24,39,.06);

  & .container { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 4.875rem; gap: var(--space-md); }
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 3.125rem; width: auto; }
.hdr-quick { display: none; }   /* phones only, see the 980px block */
/* Login beside Call/Contact/IM: only where the strip has dropped it (820px and
   under) and the logo still gets its full 125px (412px and over: 4 circles,
   the logo and ☰ need about 411px). Smaller phones find it in the menu as
   Client Login. */
.hdr-quick .fi-login { display: none; --ic: var(--blue); }
@media (min-width: 412px) and (max-width: 820px) { .hdr-quick .fi-login { display: grid; } }
.nav {
  display: flex; gap: 1.125rem; align-items: center;

  & .nav-cta { margin-inline-start: 0.375rem; }
}
.nav-item { position: static; }

/* Adjacent tabs must TOUCH, or moving between them passes through dead space.
   .nav had gap: 1.125rem and .nav-item had no padding, so the item box ended
   exactly at the link's edge and 18px of unhoverable space sat between every
   pair. Crossing it left nothing hovered, which closed the open mega panel
   before the next one opened — the double-take.

   Same visual spacing (9px each side replaces the 18px gap), but the hover
   targets are now contiguous so the panel hands straight over. Measured
   walking the pointer from one tab to the next: hover sequence
   00000000-1-1-11111 becomes 000000000111111, and the lowest combined panel
   opacity mid-move goes from 19% to never dropping out.

   Desktop only: below 981px .nav is the mobile drawer, a vertical column where
   horizontal padding on the items would be wrong and there is no hover anyway. */
@media (min-width: 981px) {
  .nav { gap: 0; }
  .nav-item { padding-inline: 9px; }
}

/* The pointer-following underline.
   The nav already drew a 3px cyan border-bottom that snapped on and off per
   tab. Rather than add a second highlight on top of that, this IS that
   underline — same colour, same weight, same position — except it travels
   between tabs instead of blinking. --e-in-out is precisely what this curve
   is for: something moving between two known positions, accelerating out of
   one and decelerating into the next. Width animates alongside so it stretches
   between tabs of different lengths rather than jumping.

   Decorative only: the tabs remain plain links, and .active keeps its own
   static underline so the current section is still marked without JS. */
.nav-pill {
  position: absolute; z-index: 2; pointer-events: none;
  left: 0; top: 0; height: 3px; width: 0;
  border-radius: 2px; background: var(--cyan);
  opacity: 0;
  transition: transform var(--t-3) var(--e-in-out),
              width var(--t-3) var(--e-in-out),
              opacity var(--t-1) var(--e-out);
}
.nav-pill.is-on { opacity: 1; }
.nav-link {
  font-family: var(--head); color: var(--ink); font-weight: 700; font-size: .8rem; letter-spacing: .04em;
  text-transform: uppercase; padding-block: 0.5rem; border-bottom: 3px solid transparent;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;

  & i { font-style: normal; font-size: .62em; transition: transform var(--t-2) var(--e-spring); }

  /* Hover no longer paints its own border — .nav-pill slides in to do that,
     so the underline travels rather than blinking between tabs. The colour
     shift stays. .active keeps a real border so the current section is still
     marked when JS has not run. */
  &:hover { color: var(--cyan-dark); }
  &.active { color: var(--cyan-dark); border-bottom-color: var(--cyan); }
}
.nav-item.has-mega:hover .nav-link i { transform: rotate(180deg); }
/* Help is the prominent action — we help, we don't sell */
.nav-link.help-cta {
  background: var(--blue); color: #fff; border-radius: 999px; padding: 0.5625rem 1.25rem; border-bottom: 0; margin-inline-start: 0.5rem;

  &:hover { background: var(--cyan-dark); color: #fff; border-bottom-color: transparent; transform: translateY(var(--lift-sm)); }
  & svg { width: 1rem; height: 1rem; }
}
.nav-item.has-mega:hover .nav-link.help-cta i { transform: rotate(180deg); }

/* The hidden company menu: a small brand mark at the end of the tabs.
   Click goes home like any logo; hover opens its mega panel. On desktop the
   text label is visually hidden (the mark IS the tab) — in the mobile drawer
   the label shows and the mark hides, so the menu reads normally on touch. */
/* The source logo is stacked WATO / CONSULTING — object-fit crops to the top
   row so the mark reads just "WATO" (no separate image asset needed).
   Pixel-measured: WATO occupies source rows 0-35, gap 36-38, CONSULTING from
   39. A 108×20 box scales the 200×64 source by 0.54, so the visible area
   ends at source row 37 — the middle of the gap. */
.nav-item.logo-tab .nav-link img { width: 108px; height: 20px; object-fit: cover; object-position: top; display: block; opacity: .85; transition: opacity var(--t-1) var(--e-out); }
.nav-item.logo-tab:hover .nav-link img { opacity: 1; }
.nav-item.logo-tab .logo-tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-item.logo-tab .nav-link i { display: none; }

/* Highlighted nav links (link.highlight in sitemap.json) — e.g. the Web
   Portfolio link Wato wants people to actually see. Accent colour per
   context: darker cyan on the light mega, bright cyan on the dark footer. */
.mega a.link-hl { color: var(--cyan-dark); font-weight: 700; }
.mega a.link-hl::after { content: " →"; }
.site-footer a.link-hl { color: var(--cyan); font-weight: 700; }

/* mega panel */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 0;
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--cyan);
  border-radius: 0 0 1rem 1rem; box-shadow: var(--shadow);
  padding: 1.625rem 2.125rem;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 2.125rem;
  opacity: 0; visibility: hidden; transform: translateY(0.5rem);
  /* Asymmetric on purpose: the transition lives on the :hover rule below, so
     opening FADES and closing is INSTANT.

     Every .mega is absolutely positioned in the same place, so a symmetric
     fade leaves the outgoing and incoming panels both semi-transparent on top
     of each other during a handover — measured at [71%, 29%], which rendered
     one panel's links ghosted through the other's AND the hero text behind
     both. Dropping the outgoing panel immediately means only the incoming one
     animates, so there is never more than one panel on screen. */
  transition: none; z-index: 60;

  /* invisible bridge so the panel doesn't close as you move the mouse into it */
  &::before { content: ""; position: absolute; left: 0; right: 0; top: -1.625rem; height: 1.75rem; }
}
.nav-item.has-mega:is(:hover, :focus-within) > .mega {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity var(--t-2) var(--e-out), transform var(--t-2) var(--e-spring);
}
/* .swapping is set by main.js once a panel is already open: moving to the next
   tab then swaps instantly instead of fading up from nothing, which otherwise
   leaves a 35-70ms blank between panels. The columns skip their stagger for
   the same reason — re-running it on every tab is the "double take" again in
   a different costume. */
#nav.swapping .nav-item.has-mega:is(:hover, :focus-within) > .mega { transition: none; }
#nav.swapping .nav-item.has-mega:is(:hover, :focus-within) > .mega .mega-col { animation: none; }
.mega-col {
  & .mega-h { font-family: var(--head); font-weight: 800; line-height: 1.06; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cyan-dark); margin: 0 0 0.625rem; padding-block-end: 0.5rem; border-bottom: 1px solid var(--line); }
  & a { display: block; font-family: var(--font); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .92rem; color: var(--ink); padding-block: 0.375rem; border: 0; transition: color var(--t-1) var(--e-out), padding-inline-start var(--t-1) var(--e-in-out); }
  & a:hover { color: var(--cyan-dark); padding-inline-start: 5px; }
  /* discovery rotation: held-back pool links */
  & a[hidden] { display: none; }
  & a[data-nav="pool"].reveal { animation: poolin .25s ease both; }
}
.mega-col-wide a { font-size: 1rem; }
@keyframes poolin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.mega-foot {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
  gap: 0.875rem; flex-wrap: wrap; margin-block-start: 0.25rem;
  padding-block-start: 0.75rem; border-top: 1px solid var(--line);
}
.mega-cta {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  background: var(--blue); color: #fff; font-family: var(--head); font-weight: 700; font-size: .8rem;
  padding: 0.5rem 0.9375rem; border-radius: 999px; box-shadow: var(--shadow-sm);
  transition: background var(--t-1) var(--e-out), transform var(--t-1) var(--e-spring);

  &:is(:hover, :focus-visible) { background: var(--cyan-dark); color: #fff; transform: translateY(var(--lift-sm)); }
  & svg { width: 0.9375rem; height: 0.9375rem; }
}
.mega-all {
  width: max-content; font-family: var(--head); font-weight: 800; font-size: .82rem; color: var(--blue);
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.4375rem 0.9375rem; border: 1.5px solid var(--blue); border-radius: 999px;
  transition: background var(--t-1) var(--e-out), color var(--t-1) var(--e-out);

  & span { transition: transform var(--t-1) var(--e-spring); }
  &:is(:hover, :focus-visible) { background: var(--blue); color: #fff; }
  &:hover span, &[aria-expanded="true"] span { transform: translateX(3px); }
}
.menu-toggle { display: none; background: none; border: 0; font-size: 1.7rem; color: var(--navy); cursor: pointer; }
.nav-help { display: none; }   /* phones only: see the 980px block */
.help-mobile { display: none; }

/* ---------- Hero / logo band / hero motion → moved to home.css ---------- */
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Scroll reveal ---------- */
/* Scroll reveal. Was .6s ease, which the motion consolidation skipped because
   0.6s sat above its ambient-loop cutoff — but this is UI feedback, not a
   loop, so it belongs on the scale.

   --i is set per element by main.js: an index among its REVEALING SIBLINGS,
   not among all children, so a row of cards arrives one after another instead
   of landing as a single slab. Delay is on .in only, so things stagger in and
   leave together when they scroll back out. 70ms is enough to read as a
   sequence without the last item feeling late. */
.reveal { opacity: 0; transform: translateY(1.375rem);
  transition: opacity var(--t-4) var(--e-out), transform var(--t-4) var(--e-out); }
.reveal.in { opacity: 1; transform: none;
  transition-delay: calc(var(--i, 0) * 70ms); }

/* Mega columns arrive in reading order when the panel opens. Same idea, much
   shorter interval — the panel is already open by the time you look at it, so
   this is a texture rather than a wait. */
.nav-item.has-mega:is(:hover, :focus-within) > .mega .mega-col {
  animation: megaColIn var(--t-3) var(--e-out) both;
  animation-delay: calc(var(--c, 0) * 45ms);
}
@keyframes megaColIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Sections ---------- */
section { padding-block: var(--space-xl); }
section.soft {
  position: relative; background-color: var(--soft);
  background-image:
    repeating-linear-gradient(45deg, rgba(55,189,242,.10) 0 1px, transparent 1px 1.625rem),
    repeating-linear-gradient(-45deg, rgba(55,189,242,.10) 0 1px, transparent 1px 1.625rem);

  /* fade edges so soft sections blend into neighbours */
  &::before, &::after { content: ""; position: absolute; left: 0; right: 0; height: 5rem; pointer-events: none; z-index: 0; }
  &::before { top: 0; background: linear-gradient(180deg, #fff, transparent); }
  &::after { bottom: 0; background: linear-gradient(0deg, #fff, transparent); }
  & > .container { position: relative; z-index: 1; }
}
.section-head {
  max-width: 47.5rem; margin: 0 auto var(--space-lg); text-align: center;

  & h2 span { color: var(--cyan-text); }
  & p { color: var(--muted); font-size: 1.08rem; }
}

/* ---------- Branch / service cards ---------- */
.branches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.375rem; }
.branch {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 0 1.625rem 1.625rem; box-shadow: var(--shadow-sm);
  transition: transform var(--t-2) var(--e-spring), box-shadow var(--t-2) var(--e-out), border-color var(--t-2) var(--e-out); overflow: hidden;

  &::before { content: ""; display: block; height: 5px; margin: 0 -1.625rem 1.5rem; background: var(--cyan); }
  &:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(55,189,242,.55); }

  & h3 { text-transform: uppercase; letter-spacing: -.01em; }
  & p { font-size: .95rem; color: var(--muted); margin-block-end: 1em; }
  & a.more { font-family: var(--head); font-weight: 700; font-size: .85rem; color: var(--cyan-text); text-transform: uppercase; letter-spacing: .04em; }
  & .bico { width: 3rem; height: 3rem; border-radius: 0.75rem; display: grid; place-items: center; background: rgba(55,189,242,.12); color: var(--cyan-text); margin-block-end: 0.875rem; }
  & .bico svg { width: 1.625rem; height: 1.625rem; }
}

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.375rem; }
.svc-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.svc-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.625rem 1.5rem; box-shadow: var(--shadow-sm);
  transition: transform var(--t-2) var(--e-spring), box-shadow var(--t-2) var(--e-out), border-color var(--t-2) var(--e-out); display: flex; flex-direction: column;

  &:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(55,189,242,.55); }
  & h3 { font-size: 1.1rem; text-transform: uppercase; }
  & p { font-size: .94rem; color: var(--muted); flex: 1; }
  & .more { font-family: var(--head); font-weight: 700; font-size: .82rem; color: var(--cyan-text); margin-block-start: 0.625rem; text-transform: uppercase; letter-spacing: .04em; }
  & .tag { font-family: var(--head); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--cyan-dark); align-self: flex-start; padding: 0.25rem 0.625rem; border-radius: 999px; margin-block-end: 0.75rem; }
}

.svc-group-title {
  font-family: var(--head); font-size: 1rem; color: var(--ink); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 800; margin: var(--space-lg) 0 1.125rem;
  padding-block-end: 0.75rem; border-bottom: 2px solid var(--line);

  &::before { content: ""; display: inline-block; width: 1.625rem; height: 3px; background: var(--cyan); vertical-align: middle; margin-inline-end: 0.75rem; }
  &:first-of-type { margin-block-start: 0; }
}

/* ---------- Page hero (interior) ---------- */
.page-hero {
  position: relative; overflow: hidden; border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 12% 10%, rgba(55,189,242,.16), transparent 34%), linear-gradient(180deg, #fff 0%, #f4fbff 100%);
  padding-block: 3.125rem 3.625rem;

  &::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(55,189,242,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(55,189,242,.12) 1px, transparent 1px);
    background-size: 2.75rem 2.75rem; mask-image: linear-gradient(180deg, rgba(0,0,0,.35), transparent 75%); }
  & .container { position: relative; }
  & h1 { color: #050505; }
  & p { color: #2b3440; font-size: 1.12rem; max-width: 64ch; margin-block-end: 0; }
}

/* ---------- Breadcrumbs ---------- */
.crumbs { font-size: .85rem; color: var(--muted); margin-block-end: 1rem; }
.crumbs a { color: var(--cyan-text); }
.crumbs span { color: var(--ink); font-weight: 600; }

/* ---------- Content layout (service detail) ---------- */
.content-wrap { display: grid; grid-template-columns: 1fr 20rem; gap: 3rem; align-items: start; }
.prose {
  & h2 { margin-block-start: 1.7em; }
  & h2:first-child { margin-block-start: 0; }
  & ul { padding-inline-start: 1.2em; margin: 0 0 1.3em; }
  & li { margin-block-end: .5em; }
  & .check { list-style: none; padding-inline-start: 0; }
  & .check li { position: relative; padding-inline-start: 2rem; margin-block-end: .7em; }
  & .check li::before { content: ""; position: absolute; left: 0; top: 0.5625rem; width: 1.125rem; height: 1.125rem; border-radius: 999px; background: rgba(55,189,242,.18); }
  & .check li::after { content: "✓"; position: absolute; left: 0.25rem; top: 0; color: var(--cyan-text); font-weight: 800; }
}

.feature-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.125rem; margin: 1.5rem 0 0.5rem; }
.feature {
  background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem 1.375rem; position: relative;

  &::before { content: ""; position: absolute; left: 0; top: 1.125rem; bottom: 1.125rem; width: 4px; border-radius: 4px; background: var(--cyan); }
  & h4 { font-family: var(--head); margin: 0 0 .3em; font-size: 1rem; color: var(--ink); text-transform: uppercase; letter-spacing: -.01em; padding-inline-start: 0.625rem; }
  & p { margin: 0; font-size: .92rem; color: var(--muted); padding-inline-start: 0.625rem; }
}

/* sidebar */
.sidebar { position: sticky; top: 6.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.5rem; box-shadow: var(--shadow-sm);

  & h3 { font-size: 1.05rem; text-transform: uppercase; }
  & ul { list-style: none; padding: 0; margin: 0; position: relative; z-index: 1; }
  & ul li { padding-block: 0.5625rem; border-bottom: 1px solid var(--line); font-size: .94rem; }
  & ul li:last-child { border-bottom: 0; }

  &.accent {
    background: var(--ink); color: #eef3f9; border: 0; position: relative; overflow: hidden;

    &::after { content: ""; position: absolute; right: -3.75rem; top: -3.75rem; width: 9.375rem; height: 9.375rem; border-radius: 999px; background: rgba(55,189,242,.28); }
    & h3 { color: #fff; position: relative; z-index: 1; }
    & p { color: #c7d4e6; font-size: .95rem; position: relative; z-index: 1; }
    & a { color: #fff; }
    & ul li { border-color: rgba(255,255,255,.14); }
  }
}

/* ---------- FAQ ---------- */
.faq {
  max-width: 51.25rem; margin-inline: auto;

  & details {
    border: 1px solid var(--line); border-radius: var(--radius); padding: 0.25rem 1.375rem;
    margin-block-end: 0.875rem; background: #fff;
  }
  & summary {
    font-family: var(--head); cursor: pointer; font-weight: 700; color: var(--ink);
    padding-block: 1rem; padding-inline-end: 1.75rem; list-style: none; position: relative;

    &::-webkit-details-marker { display: none; }
    &::after { content: "+"; position: absolute; right: 0; top: 0.75rem; font-size: 1.5rem; color: var(--cyan-text); font-weight: 400; }
  }
  & details[open] summary::after { content: "−"; }
  & details p { margin: 0 0 1rem; color: var(--body); }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--ink); color: #fff; text-align: center; position: relative; overflow: hidden;

  &::after { content: ""; position: absolute; width: 17.5rem; height: 17.5rem; right: -5.625rem; top: -6.875rem; border-radius: 999px; background: rgba(55,189,242,.26); }
  & h2 { color: #fff; position: relative; z-index: 1; }
  & p { color: rgba(255,255,255,.82); max-width: 56ch; margin: 0 auto 1.625rem; font-size: 1.1rem; position: relative; z-index: 1; }
  & .btn { position: relative; z-index: 1; }
  & .section-head { margin-block-end: 1.75rem; }
  & .section-head p { color: rgba(255,255,255,.82); }
}
.cta-char { position: relative; z-index: 1; width: 9.375rem; height: auto; margin: 0 auto 0.5rem; display: block; filter: drop-shadow(0 0.75rem 1.375rem rgba(0,0,0,.35)); }
.cta-close { margin-block-start: 3rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy); color: #aebfda; padding: 3.5rem 0 10rem; font-size: .92rem; border-top: 4px solid var(--cyan);
  /* Bottom padding is generous on purpose: .float-help is position:fixed
     bottom-right and always potentially visible (not scroll-hidden), so
     the footer's last lines need enough clearance to never sit under it.
     Bumped further on desktop below, where .wato-egg (hidden under 821px)
     also needs clearing — measured .egg-phone.in needing ~308px from the
     viewport bottom. */

  & :is(h3, h4) { font-family: var(--head); color: #fff; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; margin-block-end: 1rem; }
  & a { color: #aebfda; display: block; padding-block: 0.25rem; }
  & a:hover { color: var(--cyan); }
  & .foot-brand img { height: 2.625rem; margin-block-end: 0.875rem; }
  & .foot-brand-text { font-family: var(--head); font-weight: 800; font-size: 1.3rem; color: #fff; margin-block-end: 0.625rem; text-transform: uppercase; }
}
@media (min-width: 821px) { .site-footer { padding-block-end: 20rem; } }

/* mega footer */
.footer-top { display: grid; grid-template-columns: minmax(14.375rem, .9fr) 2.6fr; gap: 2.75rem; }
.footer-brand {
  & .foot-logo { height: 2.875rem; width: auto; margin-block-end: 1rem; filter: brightness(0) invert(1); opacity: .95; }
  & p { color: #aebfda; font-size: .9rem; margin: 0 0 0.875rem; max-width: 36ch; }
  & .fcontact a { display: block; color: #fff; font-weight: 600; padding-block: 3px; }
  & .fcontact a:hover { color: var(--cyan); }
  & .fcontact a svg { vertical-align: -2px; margin-inline-end: 5px; }
}
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr)); gap: 1.625rem 1.5rem; }
.footer-col {
  & h3 { font-family: var(--head); color: #fff; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 0.75rem; padding-block-end: 0.5rem; border-bottom: 1px solid rgba(255,255,255,.12); }
  & h3 a { display: inline; color: inherit; text-decoration: none; padding: 0; font: inherit; letter-spacing: inherit; }
  & h3 a:hover { color: var(--cyan); padding-inline-start: 0; }
  & a { display: block; color: #aebfda; font-size: .88rem; padding-block: 0.25rem; }
  & a:hover { color: var(--cyan); padding-inline-start: 3px; }
}
.story p { margin: 0 0 1rem; line-height: 1.75; color: var(--ink); }
.story-sign { text-align: center; font-family: var(--head); font-weight: 700; color: var(--cyan-text); font-size: 1.12rem; margin-block-start: 1.5rem; }

/* ===== Inner / service-page styles → moved to assets/css/pages.css ===== */
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr 1fr; } }

.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.25rem; }
.footer-areas { text-align: center; padding: 1rem 0 0.125rem; border-top: 1px solid rgba(255,255,255,.10); font-size: .84rem; color: #8ea3c4; }
.footer-areas a { display: inline; color: #aebfda; padding-inline: 5px; }
.footer-areas a:hover { color: var(--cyan); }
.footer-bottom { margin-block-start: 2.5rem; padding-block-start: 1.375rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; font-size: .82rem; color: #8499bd; }
.footer-legal a { display: inline; color: #aebfda; }
.footer-legal a:hover { color: var(--cyan); }
/* An enrolled staff device (base.njk): a reminder that this browser is left out of the statistics. */
.is-staff .footer-legal::after { content: " · Staff device: not counted"; }

/* ---------- Social proof band (pre-footer) ---------- */
.proof {
  position: relative; background-color: var(--soft); border-top: 1px solid var(--line);
  padding-block: 4rem 3.5rem;
  background-image:
    repeating-linear-gradient(45deg, rgba(55,189,242,.10) 0 1px, transparent 1px 1.625rem),
    repeating-linear-gradient(-45deg, rgba(55,189,242,.10) 0 1px, transparent 1px 1.625rem);

  & > .container { position: relative; z-index: 1; }
  & .section-head { margin-block-end: 1.75rem; }
}

/* ---------- Web portfolio gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr)); gap: 0.875rem; }
.gallery a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 0.75rem; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-3) var(--e-spring); display: block; }
.gallery a:hover img { transform: scale(1.07); }

/* ---------- Statement band ---------- */
.statement {
  background: var(--cyan); color: #0a0a0a; text-align: center; position: relative; overflow: hidden;
  background-image:
    repeating-linear-gradient(45deg, rgba(6,34,43,.06) 0 1px, transparent 1px 1.625rem),
    repeating-linear-gradient(-45deg, rgba(6,34,43,.06) 0 1px, transparent 1px 1.625rem);
}
.statement-line {
  font-family: var(--display); font-size: clamp(1.35rem, 2.8vw, 2.1rem); text-transform: uppercase; line-height: 1.2;
  margin-inline: auto; max-width: 24ch; position: relative; z-index: 1;

  & span { display: block; color: #fff; margin-block-start: 0.5rem; }
}

/* ---------- Industry card icons ---------- */
.svc-ico { width: 2.625rem; height: 2.625rem; border-radius: 0.6875rem; background: rgba(55,189,242,.12); color: var(--cyan-text); display: grid; place-items: center; margin-block-end: 0.875rem; }
.svc-ico svg { width: 1.375rem; height: 1.375rem; }

/* ---------- Comparison (why different) ---------- */
.compare {
  display: grid; grid-template-columns: 1fr 1fr; max-width: 57.5rem; margin-inline: auto;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);

  & > div { padding: 0.9375rem 1.375rem; border-bottom: 1px solid var(--line); font-size: .95rem; text-align: left; }
  & .them { background: #fff; color: var(--muted); }
  & .us { background: #0b2545; color: #eaf1fb; border-color: rgba(255,255,255,.12); }
  & .chead { font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; color: var(--ink); }
  & .chead.us { color: #fff; }
  & .chead.us b { color: var(--cyan); font-weight: 800; }
  & .row { display: flex; gap: 0.625rem; align-items: flex-start; }
  & .them.row::before { content: "✕"; color: #cf5630; font-weight: 800; }
  & .us.row::before { content: "✓"; color: var(--cyan); font-weight: 800; }
  & > div:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 620px) { .compare { grid-template-columns: 1fr; } .compare > div:nth-last-child(2) { border-bottom: 1px solid var(--line); } }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-photo { order: 2; margin-block-start: 0.5rem; }
  .hero-photo .disc { width: min(72%, 20rem); }
  .branches { grid-template-columns: repeat(2, 1fr); }
  :is(.svc-grid, .svc-grid.cols-2) { grid-template-columns: repeat(2, 1fr); }
  .logo-band .grid { grid-template-columns: 1fr; }
  .content-wrap { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    flex-direction: column; align-items: stretch; gap: 0; padding: 0.75rem 1rem 1.5rem;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    /* The panel is the screen below the header: main.js measures it into --nav-h,
       so it fits whether or not the top strip has scrolled away. */
    height: var(--nav-h, calc(100dvh - 7.375rem)); max-height: var(--nav-h, calc(100dvh - 7.375rem));
    overflow-y: auto; overscroll-behavior: contain;

    &.open { display: flex; }
    & > * { flex: none; }
    & .nav-cta { margin: 0.875rem 0 0; text-align: center; justify-content: center; }
    & > .nav-link { border-bottom: 1px solid var(--line); }
  }
  .nav-item {
    width: 100%; border-bottom: 1px solid var(--line);

    &.has-mega { background: var(--ice); border-radius: 0.625rem; margin-block-end: 0.375rem; overflow: hidden; }
    /* In the drawer the company menu reads as a normal labelled group —
       hover doesn't exist on touch, so nothing stays hidden here */
    &.logo-tab .nav-link img { display: none; }
    &.logo-tab .logo-tab-label { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
    &.open > .mega { display: grid; padding: 0.25rem 0.875rem 0.625rem; }
    /* One row per group, and the whole row opens it (main.js). Touch has no
       hover, so the row only changes when its group is really open. */
    &.has-mega > .nav-link {
      min-height: 3.25rem; padding: 0.875rem; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;

      &:hover { color: var(--ink); }
      & i { transform: none; font-size: 1.1em; }
    }
    &.has-mega.open > .nav-link { color: var(--navy); border-bottom: 1px solid var(--line); }
    &.has-mega.open > .nav-link i { transform: rotate(90deg); color: var(--cyan-dark); }
  }
  .nav-link {
    width: 100%; padding-block: 0.875rem; justify-content: space-between; font-size: .95rem; border-bottom: 0;

    & i { display: inline-block !important; font-style: normal; font-size: .8em; color: var(--mid); transition: transform var(--t-2) var(--e-spring); margin-inline-start: auto; }
    & i::after { content: "\203A"; }
    & i::before { content: ""; }
  }
  .mega {
    position: static; display: none; opacity: 1; visibility: visible; transform: none;
    grid-template-columns: 1fr; box-shadow: none; border: 0; border-radius: 0; padding: 0; margin: 0; gap: 0; background: transparent;

    &::before { display: none; }
  }
  .mega-col { margin-block-end: 0.5rem; }
  .mega-col .mega-h { margin-block: 0.75rem 0.125rem; font-size: .68rem; }
  .mega-col a { display: flex; align-items: center; min-height: 2.75rem; font-size: .92rem; padding-block: 0.25rem; }   /* 44px tap target */
  /* 44px tap target; main.js swaps the icon to a close X while the menu is open */
  .menu-toggle {
    display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0;
    font-size: 1.5rem; line-height: 1; border-radius: 0.625rem;

    &[aria-expanded="true"] { background: var(--ice); }
  }
  /* the page behind an open menu does not scroll */
  html.menu-open { overflow: hidden; }
  /* The top strip's four actions, at the top of the open menu once the strip
     itself has scrolled off (main.js adds .help-off while it is still on screen). */
  .nav-help {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.375rem; margin-block-end: 0.75rem;

    & a {
      display: grid; justify-items: center; align-content: center; gap: 0.25rem;
      min-height: 3.5rem; padding: 0.375rem 0.125rem; border: 1px solid var(--line); border-radius: 0.625rem;
      background: #fff; color: var(--navy); font-size: .74rem; font-weight: 700; text-align: center; line-height: 1.15;
    }
    & svg { width: 1.125rem; height: 1.125rem; color: var(--cyan-dark); }
    & :is(small, .tb-wide, .tb-desk) { display: none; }
  }
  .nav.help-off .nav-help { display: none; }
  /* Logo left, then the dock's Call/Contact/IM, then ☰ (side-state.js keeps
     the dock tucked on these widths). */
  .site-header .container { justify-content: flex-start; min-height: 3.75rem; gap: 0.5rem; }
  .brand { min-width: 0; }
  .brand img { height: 2.5rem; }
  .hdr-quick {
    display: flex; align-items: center; gap: 0.375rem; margin-inline-start: auto;

    & a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; }   /* 44px tap target */
    & .fi-circle { width: 2.5rem; height: 2.5rem; box-shadow: 0 0 0 3px rgba(55,189,242,.10), 0 2px 10px rgba(55,189,242,.28); }
    & .fi-circle svg { width: 1.0625rem; height: 1.0625rem; }
    & a:is(:hover, :focus-visible) .fi-circle { background: var(--blue); color: #fff; border-color: var(--blue); }
  }
  /* « flew them down to the dock: their header spots stay empty, so they're never shown twice */
  html.quick-down .hdr-quick a[data-fly] { visibility: hidden; }
  /* tucked dock on a phone: only ? and « are left on the side */
  html.sides-tucked .float-help .float-icons :is(.fi-phone, .fi-contact, .fi-im) { display: none; }
  /* the open menu is never covered by the dock */
  html:has(#nav.open) .float-help { opacity: 0; pointer-events: none; }
  /* The group's three footer links become plain rows of the open group:
     "Explore all" first (it is the way to the group's own page, now that the
     heading opens the group), then Guides and Pricing after the links. */
  .mega-foot { display: contents; }
  .mega-foot :is(.mega-all, .mega-cta) {
    display: flex; align-items: center; gap: 0.375rem; width: 100%; min-height: 2.75rem; margin: 0; padding: 0.25rem 0;
    background: none; box-shadow: none; border: 0; border-radius: 0;
    font-family: inherit; font-size: .92rem; font-weight: 700; color: var(--cyan-dark);

    &:hover { color: var(--navy); }
  }
  .mega-foot .mega-all { order: -1; justify-content: space-between; border-bottom: 1px solid var(--line); }
  .mega-foot .mega-cta { border-top: 1px solid var(--line); }
  .help-mobile { display: block; }
}
@media (max-width: 600px) {
  :is(.branches, .svc-grid, .svc-grid.cols-2, .feature-row) { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .topbar { font-size: .76rem; }
  .hero-photo { display: none; }
  .hero-call { display: inline-flex !important; }
  .hero-inner { padding-block-start: 1.375rem; }
}


/* ---------- Accessibility & interaction foundation ---------- */
:is(a, button, summary, [tabindex], input, select, textarea):focus-visible {
  outline: 3px solid var(--cyan-text); outline-offset: 2px; border-radius: 6px;
}
/* bright cyan ring on dark surfaces */
:is(.site-footer, .cta-band, .statement) :focus-visible {
  outline-color: var(--cyan);
}


/* ── WHMCS hosting widgets ───────────────────────────────────────── */

/* Product card (d02/d07) */
.whmcs-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.whmcs-card--recommended {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px var(--navy);
}
.whmcs-card__name { font-size: 1.25rem; font-weight: 700; margin: 0; }
.whmcs-card__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.whmcs-card__features li::before { content: "✓ "; color: var(--cyan); }
.whmcs-card__tabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.whmcs-tab {
  padding: .25rem .75rem;
  border: 1px solid var(--navy);
  border-radius: 99px;
  background: transparent;
  cursor: pointer;
  font-size: .875rem;
  color: var(--navy);
}
.whmcs-tab--active { background: var(--navy); color: var(--white); }
.whmcs-save { font-size: .75rem; background: var(--cyan); color: var(--navy); border-radius: 99px; padding: .1em .5em; }
.whmcs-card__prices { display: flex; flex-direction: column; gap: .75rem; margin-top: auto; }
.whmcs-price { display: none; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.whmcs-price--active { display: flex; }
.whmcs-amount { font-size: 2rem; font-weight: 700; color: var(--navy); }
.whmcs-period { font-size: .875rem; color: var(--muted); }
.whmcs-order { margin-top: .5rem; }
.whmcs-order-sm { font-size: .8rem; }

/* All products strip (d14) */
.whmcs-all {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* Price table */
.whmcs-prices-wrap { overflow-x: auto; }
.whmcs-prices { width: 100%; border-collapse: collapse; }
.whmcs-prices th,
.whmcs-prices td {
  padding: .6rem .8rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.whmcs-prices th { font-weight: 600; background: var(--soft); }

/* Domain search (d17) */
.whmcs-domain-search { padding: 1.5rem; background: var(--navy); border-radius: var(--radius); }
.whmcs-domain-search__label { color: var(--white); font-weight: 600; display: block; margin-bottom: .75rem; }
.whmcs-domain-search__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.whmcs-domain-search__input {
  flex: 1 1 240px;
  padding: .6rem 1rem;
  border-radius: calc(var(--radius) / 2);
  border: none;
  font-size: 1rem;
}
.whmcs-domain-search__btn { flex-shrink: 0; }
.whmcs-domain-search__form { width: 100%; }

/* Domain extension tiles (d18) */
.whmcs-tld-wrap { overflow-x: auto; }
.whmcs-tld { width: 100%; border-collapse: collapse; }
.whmcs-tld th,
.whmcs-tld td { padding: .5rem .75rem; border-bottom: 1px solid var(--line); }
.whmcs-tld th { background: var(--soft); font-weight: 600; }
.whmcs-tld__ext { font-weight: 700; font-family: monospace; }

/* Picker widget (d08) */
.whmcs-picker { padding: 1.5rem; background: var(--soft); border-radius: var(--radius); }
.whmcs-picker__intro { margin: 0 0 1.25rem; font-weight: 500; }
.whmcs-picker__q { margin-bottom: 1.25rem; }
.whmcs-picker__q-label { font-weight: 600; margin: 0 0 .5rem; }
.whmcs-picker__choice {
  display: inline-block;
  margin: .25rem .25rem 0 0;
  padding: .375rem .875rem;
  border: 1px solid var(--navy);
  border-radius: 99px;
  background: transparent;
  cursor: pointer;
  font-size: .875rem;
  color: var(--navy);
}
.whmcs-picker__choice--active { background: var(--navy); color: var(--white); }
.whmcs-picker__plans { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.whmcs-picker__plan { font-size: .875rem; color: var(--muted); }

/* R01 3-year cost chart */
.whmcs-chart-r01 { padding: 1.5rem; background: var(--soft); border-radius: var(--radius); }
.whmcs-chart-r01__heading { margin: 0 0 1rem; }
.whmcs-chart-r01__bars { display: flex; align-items: flex-end; gap: 1.5rem; min-height: 140px; margin-bottom: 1rem; }
.whmcs-chart-r01__bar {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-end;
  width: 90px;
  background: var(--cyan);
  border-radius: calc(var(--radius) / 2) calc(var(--radius) / 2) 0 0;
  padding: .5rem .25rem;
  /* height driven by --val set inline, e.g. style="--val:358" */
  height: calc(var(--val) * 0.3px);
  min-height: 40px;
  color: var(--navy);
  gap: .25rem;
}
.whmcs-chart-r01__bar--wato { background: var(--cyan); color: var(--navy); }
.whmcs-chart-r01__bar--comp { background: var(--line); color: var(--text); }
.whmcs-chart-r01__label { font-size: .7rem; text-align: center; }
.whmcs-chart-r01__amount { font-weight: 700; font-size: .875rem; }
.whmcs-chart-r01__saving { font-weight: 600; color: var(--navy); margin-bottom: 1rem; }
.whmcs-chart-r01__note { font-size: .8rem; color: var(--muted); margin-top: .75rem; }
.whmcs-chart-r01__cta { margin-top: 1rem; }

/* R04 visits-per-day gauge (static — rendered as raw HTML in section body) */
/* R06 stack layers (static — rendered as raw HTML in section body) */
/* R08 energy-rating sticker cards (static — rendered as raw HTML in section body) */
/* These three are bespoke service page widgets; see section JSON bodies in Task 7. */

/* Shared CTA row (two-button: Order + contact) */
.whmcs-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* Sticker grid (d08/d14 supplemental layout) */
.whmcs-sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
/* respect reduced-motion for in-page smooth scrolling */

/* ---------- Cookie notice (Google Analytics opt-in, js/consent.js) ---------- */
.consent {
  position: fixed; left: 3.75rem; bottom: 1rem; z-index: 79; max-width: 22rem; /* clear of the left-edge AI dock */
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 1.125rem 1.25rem; color: var(--ink, #1c2b3a);
}
.consent-title { font-size: 1.0625rem; margin: 0 0 .375rem; }
.consent-state { margin: 0 0 .5rem; font-weight: 600; }
.consent-text { margin: 0 0 .875rem; font-size: .9375rem; line-height: 1.5; }
.consent-text a { text-decoration: underline; }
.consent-actions { display: flex; gap: .625rem; }
/* Same size and weight on purpose: neither answer is pushed. */
.consent-btn {
  flex: 1 1 0; padding: .625rem .75rem; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--white); color: var(--navy); border: 1.5px solid var(--navy); border-radius: 999px;
}
.consent-btn:is(:hover, :focus-visible) { background: var(--navy); color: #fff; }
@media (max-width: 600px) {
  .consent { left: 0; right: 0; bottom: 0; max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .has-consent .float-help { bottom: calc(1.25rem + var(--consent-h, 10rem)); }
}