/* ============================================================
   RESERVOIR IT SOLUTIONS — style.css
   Single source of truth for all site styling.

   TABLE OF CONTENTS
   0.  Fonts
   1.  Tokens
   2.  Reset & Base
   3.  Typography
   4.  Layout
   5.  Accessibility
   6.  Emergency Bar & Navigation
   7.  Buttons
   10. Component: Star Rating
   15. Component: Testimonials
   16. Component: FAQ Accordion
   17. Component: Service Area Map
   18. Forms
   23. CTA Band & Footer
   24. Heroes, Page Heads & Utilities
   25. Sticky Footer Pages
   26. Motion
   27. Responsive
   28. Page: Home
   29. Page: Services
   30. Page: About
   31. Page: Contact
   32. Page: Partners
   33. Page: Privacy
   34. Page: 404
   ============================================================ */


/* ============================================================
   0. FONTS
   Served from /fonts rather than Google Fonts: no third-party request,
   nothing for the privacy policy to disclose. Latin subset only, which
   covers everything on the site; the few symbols outside it (arrows,
   check marks, emoji) fall back to the system font, as they always did.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-condensed-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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-condensed-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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/barlow-condensed-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500-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;
}


/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
  /* Brand */
  --navy:       #12314E;
  --navy-lt:    #1B4468;
  --navy-dk:    #0B1B2B;
  --blue:       #5D99BA;
  --blue-lt:    #7FB3D1;  /* small text on navy */
  --blue-dk:    #3E7699;  /* text and icons on white */
  --red:        #E63946;
  --red-dk:     #C0303B;
  --red-lt:     #FF8E96;
  --red-action: #D6323F;  /* button fill: a touch deeper so white text passes WCAG AA */
  /* Red is for actions (buttons, links, hovers, focus). Blue is for
     informational detail (labels, checkmarks, step numbers, the map). */

  /* Neutrals */
  --ink:        #0B1B2B;
  --body:       #46596B;
  --muted:      #5F6E7C;
  --canvas:     #F6F7F9;
  --surface:    #FFFFFF;

  /* Hairlines — the default separator everywhere */
  --line:            rgba(11,27,43,.13);
  --line-soft:       rgba(11,27,43,.08);
  --line-dark:       rgba(255,255,255,.20);
  --line-dark-soft:  rgba(255,255,255,.10);

  /* Status layer */
  --ok:         #0F6E49;
  --ok-bg:      #E7F3EC;
  --ok-line:    rgba(15,110,73,.24);
  --warn:       #8A5100;
  --warn-bg:    #FBF0DC;
  --warn-line:  rgba(138,81,0,.22);
  --open:       #A9232F;
  --open-bg:    #FBE9EA;
  --open-line:  rgba(169,35,47,.22);
  --blue-bg:    #EAF3F8;
  --blue-line:  rgba(62,118,153,.24);

  /* Type */
  --f-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rhythm */
  --sp-section: clamp(4rem, 8vw, 7rem);
  --sp-tight:   clamp(2.75rem, 5vw, 4.25rem);
  --gutter:     1.5rem;
  --maxw:       1200px;
  --nav-h:      88px;   /* floating header: 12px gap + 64px pill + breathing room */

  /* Geometry — small radii only; hairlines carry the structure */
  --r-sm: 3px;
  --r:    5px;

  /* Motion */
  --dur-fast: 150ms;
  --dur:      200ms;
  --dur-slow: 250ms;
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);

  /* Reserved for hover/focus only — never at rest */
  --lift:      0 1px 2px rgba(11,27,43,.06), 0 8px 24px rgba(11,27,43,.10);
  --lift-dark: 0 1px 2px rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.28);
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Single source of truth for where an anchor lands: clears the floating
     header (76px to the bottom of the pill) and leaves a small gap, so the section's top rule
     sits just under the header and its heading is the first thing you read.
     site.js reads this same value, so the scripted and native scrolls agree
     instead of fighting each other. Never pair this with scroll-margin-top
     on a target — the two offsets stack. */
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  font-family: var(--f-ui);
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--red-dk); }

button { font: inherit; color: inherit; }

hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

::selection { background: var(--navy); color: #fff; }


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--ink);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.022em;
  font-weight: 800;
}

h2 {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -.018em;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}

h4 { font-size: 1.1rem; line-height: 1.2; letter-spacing: -.008em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* Small restrained body — the counterweight to the display scale */
.lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--body);
  max-width: 52ch;
}


.small { font-size: .8125rem; line-height: 1.6; color: var(--muted); }


/* ============================================================
   4. LAYOUT
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}


.section { padding: var(--sp-section) 0; }
.section--tight { padding: var(--sp-tight) 0; }


.band--navy {
  background: var(--navy);
  color: rgba(255,255,255,.78);
}
.band--navy h1,
.band--navy h2,
.band--navy h3,
.band--navy h4 { color: #fff; }
.band--navy a { color: #fff; }
.band--navy p,
.band--navy .lede { color: rgba(255,255,255,.78); }
.band--navy .small { color: rgba(255,255,255,.6); }

/* Asymmetric splits — a 50/50 reads generic, so these are deliberately off-centre */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.split--40-60 { grid-template-columns: minmax(0, .68fr) minmax(0, 1fr); }

.split--55-45 { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
.split--center { align-items: center; }
.split--sticky > :first-child { position: sticky; top: 132px; }


/* ============================================================
   5. ACCESSIBILITY
   ============================================================ */

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
}
.band--navy :focus-visible,
.cta-band :focus-visible { outline-color: #fff; }


.skip-nav {
  position: fixed;
  top: -100px;
  left: 0;
  z-index: 2000;
  background: var(--navy);
  color: #fff;
  padding: .875rem 1.5rem;
  font-size: .875rem;
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-nav:focus { top: 0; color: #fff; }

.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;
}


/* ============================================================
   6. EMERGENCY BAR & NAVIGATION
   ============================================================ */

/* Floating pill header. The fixed #navbar spans the width but lets clicks
   through; only the pill itself is interactive. */
#navbar {
  position: fixed;
  top: 12px; left: 0; right: 0;
  z-index: 1000;
  padding: 0 var(--gutter);
  pointer-events: none;
  transition: top var(--dur) var(--ease);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: calc(var(--maxw) + 1rem);
  height: 64px;
  margin: 0 auto;
  padding: 0 .5rem 0 1.125rem;
  border: 1px solid rgba(11,27,43,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 2px rgba(11,27,43,.04), 0 12px 32px -18px rgba(11,27,43,.25);
  pointer-events: auto;
  transition: height var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
#navbar.scrolled { top: 8px; }
#navbar.scrolled .nav-inner {
  height: 58px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 1px 2px rgba(11,27,43,.06), 0 16px 40px -18px rgba(11,27,43,.32);
}

.nav-logo { display: flex; align-items: center; gap: .625rem; flex: none; margin-right: auto; }
.nav-logo img { width: 30px; height: 34px; }
.nav-logo-text {
  font-family: var(--f-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}

.nav-links { display: flex; align-items: center; gap: .125rem; }
.nav-links > a {
  padding: .5rem .9375rem;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--body);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nav-links > a:hover { color: var(--ink); background: var(--canvas); }
.nav-links > a.nav-active { color: #fff; background: var(--navy); font-weight: 600; }

.nav-actions { display: flex; align-items: center; gap: .375rem; margin-left: .5rem; }
.nav-call {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--navy);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-call svg { width: 18px; height: 18px; }
.nav-call:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.nav-text {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 44px;
  padding: 0 1.125rem;
  border-radius: 999px;
  background: var(--red-action);
  font-size: .9375rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.nav-text svg { width: 17px; height: 17px; }
.nav-text:hover { background: var(--red-dk); color: #fff; box-shadow: var(--lift); }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 12px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}
.hamburger span {
  display: block;
  height: 1.75px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.75px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.75px) rotate(-45deg); }

/* Mobile menu: a card that drops from under the pill over a dimmed page */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  padding: calc(12px + 64px + 10px) var(--gutter) 1rem;
  background: rgba(11,27,43,.35);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mm-card {
  padding: .5rem;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 30px 60px -20px rgba(11,27,43,.45);
  transform: translateY(-10px) scale(.98);
  transform-origin: top center;
  transition: transform var(--dur-slow) var(--ease);
}
.mobile-menu.open .mm-card { transform: none; }
.mm-card > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-radius: 14px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}
.mm-card > a:hover { background: var(--canvas); color: var(--ink); }
.mm-card > a.nav-active { background: var(--blue-bg); color: var(--navy); }
.mm-chev { width: 18px; height: 18px; opacity: .45; }
.mm-card > a.nav-active .mm-chev { opacity: .7; }
.mm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .5rem .5rem 0; }
.mm-actions .btn { justify-content: center; gap: .5rem; border-radius: 999px; }
.mm-actions .btn svg { width: 17px; height: 17px; }
.mm-status { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .875rem .5rem .625rem; text-align: center; font-size: .8125rem; line-height: 1.4; color: var(--body); }
.mm-status i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #1F9D63; }

/* Back to top: a frosted round button matching the header pill, with a
   ring that fills as the page scrolls (site.js sets the ring's offset) */
#btt {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  z-index: 900;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 2px rgba(11,27,43,.06), 0 12px 28px -12px rgba(11,27,43,.35);
  color: var(--navy);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.9);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
#btt.visible { opacity: 1; visibility: visible; transform: none; }
.btt-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.btt-ring circle { fill: none; stroke-width: 2.5; }
.btt-track { stroke: rgba(11,27,43,.08); }
.btt-progress { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 150.8; stroke-dashoffset: 150.8; }
.btt-arrow { position: relative; width: 20px; height: 20px; transition: transform var(--dur) var(--ease); }
#btt:hover { background: var(--navy); color: #fff; }
#btt:hover .btt-track { stroke: rgba(255,255,255,.18); }
#btt:hover .btt-progress { stroke: var(--blue-lt); }
#btt:hover .btt-arrow { transform: translateY(-2px); }
#btt:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
@media (max-width: 640px) {
  #btt { right: .875rem; bottom: .875rem; width: 48px; height: 48px; }
}

.toast {
  position: fixed;
  left: 50%; bottom: 1.5rem;
  z-index: 1500;
  transform: translate(-50%, 1rem);
  max-width: min(92vw, 420px);
  padding: .875rem 1.25rem;
  background: var(--navy-dk);
  color: #fff;
  font-size: .875rem;
  border-radius: var(--r);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Call/Text on computers: a small card with the number and a Copy button,
   since tel: and sms: links do nothing on most desktops (site.js builds it) */
.reach-pop {
  position: fixed;
  z-index: 1400;
  width: 292px;
  max-width: calc(100vw - 24px);
  padding: 1rem 1rem .875rem;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(11,27,43,.06), 0 24px 48px -20px rgba(11,27,43,.4);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.reach-pop.is-open { opacity: 1; transform: none; }
.reach-pop[hidden], .reach-pop [hidden] { display: none; }
.reach-pop-label { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.reach-pop-num { margin: .125rem 0 .875rem; font-family: var(--f-display); font-size: 1.625rem; font-weight: 700; letter-spacing: .01em; line-height: 1.1; color: var(--ink); }
.reach-pop-actions { display: grid; gap: .5rem; }
.reach-pop-actions .btn { justify-content: center; gap: .5rem; width: 100%; }
.reach-pop-actions .btn svg { width: 16px; height: 16px; }
.reach-pop-open { justify-self: center; padding: .25rem; font-size: .8125rem; font-weight: 600; color: var(--navy); text-decoration: underline; text-decoration-color: rgba(18,49,78,.3); text-underline-offset: 2px; }
.reach-pop-open:hover { color: var(--red-dk); text-decoration-color: currentColor; }
.reach-pop-note { margin: .625rem 0 0; font-size: .75rem; line-height: 1.45; color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .reach-pop { transition: none; }
}


/* ============================================================
   7. BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8125rem 1.375rem;
  font-family: var(--f-ui);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.005em;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.btn svg { flex: none; }

.btn-primary { background: var(--red-action); color: #fff; }
.btn-primary:hover { background: var(--red-dk); color: #fff; box-shadow: var(--lift); }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-dk); color: #fff; box-shadow: var(--lift); }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); color: var(--ink); box-shadow: var(--lift); }

.band--navy .btn-outline,
.cta-band .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,.28);
}
.band--navy .btn-outline:hover,
.cta-band .btn-outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,.06);
  color: #fff;
  box-shadow: var(--lift-dark);
}


.btn-lg { padding: 1rem 1.75rem; font-size: .9375rem; }
.btn-sm { padding: .625rem 1rem; font-size: .8125rem; }
.btn-full { width: 100%; }

/* Quiet text link with an arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
}
.link-arrow:hover { color: var(--red-dk); }
.band--navy .link-arrow { color: #fff; }
.band--navy .link-arrow:hover { color: var(--red-lt); }

/* Red inline variant, for arrow links sitting inside .small run-in copy */
.link-arrow--inline { font-size: inherit; color: var(--red-dk); }
.link-arrow--inline:hover { color: var(--red-dk); }

/* One arrow treatment for every arrowed control on the site. Add
   .btn--arrow to a button and drop the literal → from the markup; the
   glyph and its nudge-on-hover come from here so buttons and text links
   behave identically. */
.link-arrow::after,
.btn--arrow::after {
  content: '\2192';
  transition: transform var(--dur-fast) var(--ease);
}
.link-arrow:hover::after,
.link-arrow:focus-visible::after,
.btn--arrow:hover::after,
.btn--arrow:focus-visible::after { transform: translateX(3px); }
/* While a submit button is mid-flight its label becomes "Sending…" — the
   arrow would contradict that */
.btn--arrow:disabled::after { display: none; }


/* ============================================================
   10. COMPONENT — STAR RATING
   ============================================================ */


/* Star rating under the hero buttons, linking to the Google profile */
.hero-rating {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .375rem .625rem;
  margin-top: -.75rem;
  font-size: .8125rem;
  color: rgba(255,255,255,.72);
}
.hero-rating strong { color: #fff; }
.hero-rating:hover { color: #fff; }


/* ============================================================
   15. COMPONENT — TESTIMONIALS
   ============================================================ */


.stars { display: flex; gap: 2px; color: var(--red); }
.stars svg { width: 14px; height: 14px; }


/* ============================================================
   16. COMPONENT — FAQ ACCORDION
   ============================================================ */

.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }

.faq-q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.25rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--f-display);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.008em;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}
.faq-q:hover { color: var(--red-dk); }
.faq-q:focus-visible { outline-offset: -3px; }

.faq-ind {
  flex: none;
  font-family: var(--f-mono);
  font-size: .9375rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1;
  transition: color var(--dur-fast) var(--ease);
}
.faq-q:hover .faq-ind { color: var(--red-dk); }
.faq-ind::before { content: '+'; }
.faq-item.open .faq-ind::before { content: '\2212'; }

.faq-body { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease); }
.faq-inner {
  padding: 0 0 1.5rem;
  max-width: 68ch;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--body);
}


/* ============================================================
   17. COMPONENT — SERVICE AREA MAP
   ============================================================ */


/* ── Region map ──
   A hand-built map rather than a third-party embed: no iframe, no consent
   banner, no extra requests, and it can be styled to the brand. City
   positions are a real equirectangular projection of their coordinates, so
   the geography is honest even though the rendering is stylised. */
.region-map {
  border: 1px solid var(--line-dark-soft);
  border-radius: var(--r);
  background:
    linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,.015));
  overflow: hidden;
}
.region-map svg { width: 100%; height: auto; display: block; }

/* Faint graticule behind the map, so the panel doesn't read as empty navy */
.map-grid line { stroke: rgba(255,255,255,.055); stroke-width: 1; }

.map-ring {
  stroke: rgba(93,153,186,.55);
  stroke-width: 1.25;
  stroke-dasharray: 4 6;
}

.map-spoke {
  stroke: rgba(93,153,186,.4);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.map-city { fill: rgba(255,255,255,.9); }
.map-city-halo { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1; }
.map-label {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  fill: rgba(255,255,255,.72);
}


.map-hub { fill: var(--red); }
.map-hub-ring { fill: none; stroke: rgba(230,57,70,.55); stroke-width: 1.25; }
.map-hub-label {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  fill: #fff;
}
.map-hub-sub {
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: .08em;
  fill: rgba(255,255,255,.5);
}


/* ============================================================
   18. FORMS
   ============================================================ */

/* Fields are hairline-ruled rows, not boxed inputs — same structural
   language as the jobs panel and the price tables. */
.form-group { margin-bottom: 1.5rem; }
.form-group label {
  display: block;
  margin-bottom: .25rem;
  font-family: var(--f-ui);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease);
}
.form-group:focus-within label { color: var(--ink); }
.form-group label span { color: var(--red-dk); }

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: .5rem 0;
  font-family: var(--f-ui);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-group textarea { min-height: 116px; resize: vertical; line-height: 1.6; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: #A2AEB9; }

.form-group input:hover,
.form-group textarea:hover { border-bottom-color: rgba(11,27,43,.32); }

/* Focus thickens the rule rather than drawing a box */
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-bottom-color: var(--navy);
  box-shadow: inset 0 -1px 0 0 var(--navy);
}
.form-group input:focus-visible,
.form-group textarea:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] {
  border-bottom-color: var(--red);
  box-shadow: inset 0 -1px 0 0 var(--red);
}

.field-error { display: none; margin-top: .4375rem; font-size: .78125rem; color: var(--red-dk); }
.field-error.visible { display: block; }

/* The form sits in a plain hairline panel, no card shadow, no fill */
.form-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
/* ── The form card on a navy band ──
   The card stays a light surface — it's the thing the section exists for,
   and the contrast is the point. But it sits inside .band--navy, whose
   rules for p / a / h1-h4 / .small would turn the card's own text white on
   white. Everything below re-asserts the light-ground colours inside the
   card only. The focus ring reset matters most: .band--navy forces a white
   outline, which would be invisible against the card. */
.band--navy .form-card {
  background: var(--surface);
  border-color: transparent;
  box-shadow: var(--lift-dark);
}
.band--navy .form-card h1,
.band--navy .form-card h2,
.band--navy .form-card h3,
.band--navy .form-card h4 { color: var(--ink); }
.band--navy .form-card p { color: var(--body); }
.band--navy .form-card a { color: var(--red-dk); }
.band--navy .form-card .form-note,
.band--navy .form-card .small,
.band--navy .form-card label { color: var(--muted); }
.band--navy .form-card :focus-visible { outline-color: var(--red); }


.form-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 1rem 0 0;
  font-size: .78125rem;
  line-height: 1.55;
  color: var(--muted);
}
.form-note svg { flex: none; margin-top: .2rem; color: var(--muted); }
.form-note a { color: var(--red-dk); font-weight: 600; }

/* hCaptcha injects its own widget markup, so the spacing has to be set from
   here rather than on the element */
.h-captcha { margin-bottom: 1rem; }

.form-success h3 { margin-bottom: .5rem; }
.form-success a { font-weight: 600; color: var(--red-dk); }

.form-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: 1rem;
  background: var(--ok);
  border-radius: 50%;
}


/* ============================================================
   23. CTA BAND & FOOTER
   ============================================================ */

.cta-band {
  padding: var(--sp-section) 0;
  background: var(--navy);
  color: rgba(255,255,255,.78);
}
.cta-band h2 { color: #fff; margin-bottom: 1rem; max-width: 18ch; }
.cta-band p { color: rgba(255,255,255,.72); max-width: 52ch; }


/* Hours / location: one fact per line, each with a small icon */
.cta-meta {
  display: grid;
  gap: .625rem;
  margin: 1.75rem 0 0 !important;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  line-height: 1.4;
  color: rgba(255,255,255,.78) !important;
}
.cta-meta li { display: flex; align-items: center; gap: .75rem; }
.cta-meta svg {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 50%;
  background: rgba(127,179,209,.16);
  color: var(--blue-lt);
}


/* Light footer: separates cleanly from the navy call-to-action above */
.site-footer {
  padding: clamp(3rem, 6vw, 4.5rem) 0 1.75rem;
  background: var(--canvas);
  border-top: 1px solid var(--line-soft);
  color: var(--body);
  font-size: .9375rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .6fr) minmax(0, .95fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: 2.5rem;
}
.footer-logo { display: inline-flex; align-items: center; gap: .625rem; margin-bottom: 1rem; }
.footer-logo img { width: 30px; height: 34px; }
.footer-logo-text { font-family: var(--f-display); font-size: 1.3125rem; font-weight: 700; letter-spacing: -.012em; line-height: 1; color: var(--ink); }
.footer-brand p { margin: 0; max-width: 36ch; font-size: .9375rem; line-height: 1.65; color: var(--body); }
.footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.25rem; }
.footer-rating, .footer-fb {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .875rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface);
  font-size: .875rem;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease);
}
.footer-rating:hover, .footer-fb:hover { border-color: rgba(18,49,78,.35); color: var(--ink); }
.footer-rating strong { font-weight: 700; }
.footer-rating .gstars svg { width: 13px; height: 13px; }
.footer-fb svg { width: 17px; height: 17px; color: #1877F2; }

.footer-col-heading { margin: 0 0 .875rem; font-family: var(--f-ui); font-size: .9375rem; font-weight: 700; letter-spacing: 0; color: var(--ink); }
.footer-col ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.footer-col a { font-size: .9375rem; color: var(--body); transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover { color: var(--red-dk); }
.footer-contact a { display: inline-flex; align-items: center; gap: .5rem; }
.footer-contact svg { flex: none; width: 16px; height: 16px; color: var(--blue-dk); }
.footer-contact li:nth-child(3) a { word-break: break-all; }
.footer-status { display: flex; gap: .5rem; margin: 1rem 0 0; font-size: .875rem; line-height: 1.4; color: var(--ink); }
.footer-status i { flex: none; width: 8px; height: 8px; margin-top: .375rem; border-radius: 50%; background: #1F9D63; box-shadow: 0 0 0 3px rgba(31,157,99,.15); }
.footer-status small { display: block; font-size: .8125rem; color: var(--muted); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding: 1.5rem 4.5rem 0 0;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--muted);
}
.footer-bottom a { color: var(--body); }
.footer-bottom a:hover { color: var(--red-dk); }


/* ============================================================
   24. HEROES, PAGE HEADS & UTILITIES
   ============================================================ */


.hero-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0; }


.crumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
  font-family: var(--f-mono);
  font-size: .6875rem;
  color: var(--muted);
}
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--red-dk); }


.mt-2 { margin-top: 2rem; }


/* ============================================================
   25. STICKY FOOTER PAGES
   ============================================================ */


.sticky-footer { position: relative; }


/* ============================================================
   26. MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .mobile-menu { transition: none !important; }
}


/* ============================================================
   27. RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .split,
.split--40-60,
.split--55-45 { grid-template-columns: minmax(0, 1fr); }
  .split--sticky > :first-child { position: static; }

  

  

  /* Brand spans the full row so the two short columns sit side by side
     underneath it, rather than stranding one alone on a second row. */
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}

/* Header switches to the compact pill + menu below 1024px, where the five
   links, the name, and both buttons stop fitting comfortably. Kept in sync
   with NAV_HAMBURGER_MAX in site.js. */
@media (max-width: 1024px) {
  .nav-links, .nav-call { display: none; }
  .hamburger { display: flex; }
}

@media (max-width: 900px) {
  #navbar { padding: 0 10px; }
  .nav-inner { padding: 0 .375rem 0 1rem; gap: .5rem; }
}

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

@media (max-width: 640px) {
  .nav-logo-text { font-size: 1.0625rem; }
  .nav-text { padding: 0 .9375rem; }

  .hero-btns .btn { width: 100%; }
}


/* ============================================================
   28. PAGE: HOME
   ------------------------------------------------------------
   Friendlier than the interior pages: light hero, larger body
   text, and a few brand touches taken from the cube logo.
   ============================================================ */

.home-h2 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* Hero */
.home-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + clamp(3rem, 6vw, 5rem)) 0 clamp(3.5rem, 7vw, 5.5rem);
  background: linear-gradient(180deg, #F3F7FA 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--line-soft);
}
.home-hero-cube {
  position: absolute;
  /* Bleeds off the right edge only, so the section line never slices it */
  top: calc(50% + var(--nav-h) / 2);
  right: -110px;
  width: min(40vw, 480px);
  transform: translateY(-50%);
  height: auto;
  opacity: .07;
  pointer-events: none;
}
.home-hero .container { position: relative; }
.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.home-kicker {
  margin: 0 0 1rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--blue-dk);
}
.home-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.25rem); max-width: 15ch; }
.home-hero-lede {
  margin-top: 1.5rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.65;
  color: #34475A;
  max-width: 46ch;
}
.home-hero .hero-btns { margin: 2rem 0 1.5rem; }
.home-hero .hero-rating { margin-top: 0; color: var(--body); font-size: .9375rem; }
.home-hero .hero-rating strong { color: var(--ink); }
.home-hero .hero-rating:hover { color: var(--ink); }

/* Recent jobs as a desktop app window */
.win {
  position: relative;
  border: 1px solid rgba(11,27,43,.12);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(11,27,43,.05), 0 30px 60px -28px rgba(11,27,43,.35);
  overflow: hidden;
}
.win-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, #F7F8FA, #EEF1F4);
}
.win-dots { position: absolute; left: 14px; display: flex; gap: 8px; }
.win-dots i { width: 12px; height: 12px; border-radius: 50%; }
.win-dots i:nth-child(1) { background: #FF5F57; }
.win-dots i:nth-child(2) { background: #FEBC2E; }
.win-dots i:nth-child(3) { background: #28C840; }
.win-title { font-size: .75rem; font-weight: 600; color: #6B7682; }
.win-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem .5rem; }
.win-head p { margin: 0; font-family: var(--f-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.win-count { font-size: .75rem; font-weight: 600; color: var(--ok); }
.win-rows { list-style: none; margin: 0; padding: 0 .625rem .375rem; }
.win-rows li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .625rem;
  border-radius: 8px;
  transition: background-color var(--dur-fast) var(--ease);
}
.win-rows li + li { box-shadow: 0 -1px 0 var(--line-soft); }
.win-rows li:hover { background: var(--canvas); box-shadow: none; }
.win-rows li:hover + li { box-shadow: none; }
.win-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--navy); color: #fff; }
.win-icon svg { width: 18px; height: 18px; }
.win-job { min-width: 0; font-size: .8125rem; line-height: 1.4; color: var(--body); }
.win-job strong { display: block; font-size: .875rem; font-weight: 600; color: var(--ink); }
.win-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.win-town { padding: .0625rem .5rem; border-radius: 99px; background: var(--canvas); font-size: .6875rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.win-done { display: inline-flex; align-items: center; gap: .1875rem; font-size: .6875rem; font-weight: 600; color: var(--ok); }
.win-done svg { width: 11px; height: 11px; }
/* Home job log: the newest 6 show, the rest open with the button */
.win-rows--capped > li:nth-child(n+7) { display: none; }
.win-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  width: calc(100% - 1.25rem);
  margin: 0 .625rem .5rem;
  padding: .5rem;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.win-more[hidden] { display: none; }
.win-more:hover { background: var(--canvas); }
.win-more svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.win-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.win-foot { margin: 0; padding: .75rem 1.25rem; border-top: 1px solid var(--line-soft); background: #FAFBFC; font-size: .75rem; color: var(--muted); }

/* Rows land one by one when the page loads */
@media (prefers-reduced-motion: no-preference) {
  .win:not(.win--static) { animation: win-in 600ms var(--ease-out) both; }
  .win-rows li { animation: win-row 450ms var(--ease-out) both; }
  .win-rows li:nth-child(1) { animation-delay: 250ms; }
  .win-rows li:nth-child(2) { animation-delay: 330ms; }
  .win-rows li:nth-child(3) { animation-delay: 410ms; }
  .win-rows li:nth-child(4) { animation-delay: 490ms; }
  .win-rows li:nth-child(5) { animation-delay: 570ms; }
  .win-rows li:nth-child(6) { animation-delay: 650ms; }
}
@keyframes win-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes win-row { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

/* Hero extras: highlight, proof row, dotted backdrop */
.hero-hl {
  background: linear-gradient(transparent 64%, rgba(93,153,186,.38) 64%, rgba(93,153,186,.38) 92%, transparent 92%);
  padding: 0 .08em;
  margin: 0 -.08em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 1.5rem; }
.hero-status { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; color: var(--body); }
.hero-status i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #1F9D63; }
@media (prefers-reduced-motion: no-preference) {
  .hero-status i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #1F9D63; animation: status-ping 2s ease-out infinite; }
}
@keyframes status-ping { from { transform: scale(1); opacity: .6; } to { transform: scale(2.8); opacity: 0; } }
.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(18,49,78,.14) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 45%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 80% at 70% 45%, #000 20%, transparent 75%);
  pointer-events: none;
}

/* What I help with — bento grid with small drawn "screens" of each problem */
.home-help { background: var(--canvas); }
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.875rem, 1.5vw, 1.25rem);
}
.bento {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.125rem, 2vw, 1.5rem);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.bento--wide { grid-column: span 2; }
.bento:hover { color: inherit; border-color: rgba(18,49,78,.3); box-shadow: 0 12px 28px -16px rgba(11,27,43,.25); }
.bento:hover .help-title { color: var(--red-dk); }
.bento-text { display: block; }


.help-title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}
.help-desc { display: block; margin-top: .375rem; font-size: .9375rem; line-height: 1.55; color: var(--body); }
.home-more { margin-top: 2rem; }

/* Illustration panels. Every panel shares one height so the card titles
   line up across a row. */
.ill {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .4375rem;
  height: 184px;
  padding: .875rem 1rem;
  border-radius: 10px;
  background: var(--canvas);
  border: 1px solid var(--line-soft);
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--body);
  overflow: hidden;
}
.ill-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .125rem; font-weight: 600; color: var(--ink); }
.ill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .3125rem .625rem;
  border-radius: 6px;
  background: var(--surface);
}
.ill-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ill-dot--ok { background: #1F9D63; box-shadow: 0 0 0 3px rgba(31,157,99,.18); }
.ill-ok { display: inline-flex; align-items: center; gap: .3125rem; font-weight: 500; color: var(--ok); }
.ill-ok svg { width: 13px; height: 13px; }

/* Wi-Fi bars */
.ill-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; }
.ill-bars i { width: 4px; border-radius: 1px; background: var(--line); transform-origin: bottom; }
.ill-bars i:nth-child(1) { height: 25%; }
.ill-bars i:nth-child(2) { height: 50%; }
.ill-bars i:nth-child(3) { height: 75%; }
.ill-bars i:nth-child(4) { height: 100%; }
.ill-bars i.on { background: var(--blue-dk); }
.ill-bars--before i.on { background: var(--red); }
.ill-fix { display: inline-flex; align-items: center; gap: .375rem; flex: none; }
.ill-row > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ill-arrow { width: 12px; height: 12px; color: var(--muted); }

/* Scam pop-up */
.ill-scam { position: relative; align-items: center; }
.ill-popup {
  width: 100%;
  max-width: 220px;
  border: 1px solid rgba(169,35,47,.25);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
  opacity: .55;
  filter: grayscale(.4);
}
.ill-popup-bar { display: block; padding: .3125rem .5rem; background: var(--open-bg); font-weight: 600; color: var(--open); }
.ill-popup-body { display: block; padding: .4375rem .5rem; font-size: .75rem; color: var(--body); text-decoration: line-through; text-decoration-color: rgba(169,35,47,.6); }
.ill-stamp {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  padding: .25rem .75rem;
  border: 2px solid var(--ok);
  border-radius: 6px;
  background: rgba(255,255,255,.92);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ok);
}

/* Disk usage meter */
.ill-meter { gap: .75rem; }
.ill-meter-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 34px; align-items: center; gap: .625rem; }
.ill-meter-bar { display: block; height: 10px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line-soft); overflow: hidden; }
.ill-meter-fill { display: block; height: 100%; border-radius: 99px; }
.ill-meter-fill--bad  { width: 98%; background: var(--red); }
.ill-meter-fill--good { width: 22%; background: #1F9D63; }
.ill-meter-val { font-weight: 600; text-align: right; }
.ill-meter-val--bad  { color: var(--open); }
.ill-meter-val--good { color: var(--ok); }


/* File copy */
.ill-progress { display: block; height: 8px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.ill-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--blue-dk), var(--blue)); }
.ill-files { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .25rem; }

/* Cameras */
.ill-cams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .4375rem; padding: .625rem; }
.ill-cam {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: .375rem .5rem;
  border-radius: 6px;
  background: linear-gradient(160deg, #4B6A85 0%, #33506A 100%);
  font-size: .6875rem;
  font-weight: 500;
  color: rgba(255,255,255,.9);
}
.ill-cam::before {
  content: '';
  position: absolute;
  top: .4375rem; right: .5rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #FF5A66;
  box-shadow: 0 0 0 2px rgba(255,90,102,.25);
}

/* Office network */
.ill-net { display: flex; align-items: center; gap: .375rem; margin: .125rem 0 .25rem; }
.ill-node {
  flex: none;
  padding: .3125rem .625rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-weight: 600;
  color: var(--ink);
}
.ill-link {
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 10px);
}
.ill-ports { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; padding: .5rem; border-radius: 6px; background: var(--navy); }
.ill-ports i { position: relative; height: 18px; border-radius: 2px; background: #0B1B2B; }
.ill-ports i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.15); }
.ill-ports i.on::after { background: #3DDC84; }

/* Hover and keyboard focus replay each illustration. On touch screens,
   site.js adds .is-seen as each card scrolls into view instead. Skipped
   entirely for anyone who prefers reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .bento:is(:hover, :focus-visible, .is-seen) .ill-queue .ill-row .ill-ok,
  .bento:is(:hover, :focus-visible, .is-seen) .ill-checklist .ill-row .ill-ok { animation: ill-pop 420ms var(--ease-out) both; }
  .bento:is(:hover, :focus-visible, .is-seen) .ill-row:nth-child(3) .ill-ok { animation-delay: 120ms; }
  .bento:is(:hover, :focus-visible, .is-seen) .ill-row:nth-child(4) .ill-ok { animation-delay: 240ms; }
  .bento:is(:hover, :focus-visible, .is-seen) .ill-row:nth-child(5) .ill-ok { animation-delay: 360ms; }

  .bento:is(:hover, :focus-visible, .is-seen) .ill-bars--after i { animation: ill-bar 360ms var(--ease-out) both; }
  .bento:is(:hover, :focus-visible, .is-seen) .ill-bars--after i:nth-child(2) { animation-delay: 120ms; }
  .bento:is(:hover, :focus-visible, .is-seen) .ill-bars--after i:nth-child(3) { animation-delay: 240ms; }
  .bento:is(:hover, :focus-visible, .is-seen) .ill-bars--after i:nth-child(4) { animation-delay: 360ms; }

  .bento:is(:hover, :focus-visible, .is-seen) .ill-stamp { animation: ill-stamp 460ms cubic-bezier(.3, 1.4, .5, 1) both; }

  .bento:is(:hover, :focus-visible, .is-seen) .ill-meter-fill--good { animation: ill-drain 1100ms var(--ease-out) both; }
  .bento:is(:hover, :focus-visible, .is-seen) .ill-count { animation: ill-count 1100ms var(--ease-out) both; }

  .bento:is(:hover, :focus-visible, .is-seen) .ill-progress i { animation: ill-fill 900ms var(--ease-out) both; }
  .bento:is(:hover, :focus-visible, .is-seen) .ill-files .ill-ok { animation: ill-pop 420ms var(--ease-out) both; animation-delay: 750ms; }
  .bento:is(:hover, :focus-visible, .is-seen) .ill-files .ill-ok:nth-child(2) { animation-delay: 870ms; }
  .bento:is(:hover, :focus-visible, .is-seen) .ill-files .ill-ok:nth-child(3) { animation-delay: 990ms; }

  .bento:is(:hover, :focus-visible, .is-seen) .ill-cam::before { animation: ill-rec 1s ease-in-out infinite; }
  .bento:is(:hover, :focus-visible, .is-seen) .ill-cam:nth-child(2)::before { animation-delay: .25s; }
  .bento:is(:hover, :focus-visible, .is-seen) .ill-cam:nth-child(3)::before { animation-delay: .5s; }
  .bento:is(:hover, :focus-visible, .is-seen) .ill-cam:nth-child(4)::before { animation-delay: .75s; }

  .bento:is(:hover, :focus-visible, .is-seen) .ill-link { animation: ill-flow 700ms linear infinite; }
  .bento:is(:hover, :focus-visible, .is-seen) .ill-ports i.on::after { animation: ill-blink 900ms steps(2, jump-none) infinite; }
  .bento:is(:hover, :focus-visible, .is-seen) .ill-ports i:nth-child(2)::after { animation-duration: 640ms; }
  .bento:is(:hover, :focus-visible, .is-seen) .ill-ports i:nth-child(3)::after { animation-duration: 1150ms; }
  .bento:is(:hover, :focus-visible, .is-seen) .ill-ports i:nth-child(5)::after { animation-duration: 520ms; }
  .bento:is(:hover, :focus-visible, .is-seen) .ill-ports i:nth-child(7)::after { animation-duration: 780ms; }
}
@keyframes ill-pop {
  0%   { opacity: 0; transform: scale(.4); }
  70%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes ill-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ill-stamp {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1.7); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
}
@keyframes ill-drain {
  from { width: 98%; background: var(--red); }
  to   { width: 22%; background: #1F9D63; }
}
/* Colour only; the digits themselves are counted by site.js */
@keyframes ill-count {
  from { color: var(--open); }
  to   { color: var(--ok); }
}
@keyframes ill-fill { from { width: 0; } to { width: 100%; } }
@keyframes ill-rec { 50% { opacity: .25; } }
@keyframes ill-flow { to { background-position: 10px 0; } }
@keyframes ill-blink { 50% { opacity: .2; } }

@media (max-width: 1024px) {
  .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bento-grid { grid-template-columns: minmax(0, 1fr); }
  .bento--wide { grid-column: auto; }
}

/* Hi, I'm Jackson — intro beside an example text thread */
.home-note { padding: var(--sp-section) 0; background: var(--blue-bg); overflow: hidden; }
.home-note-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.home-note-letter p { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.7; color: #2E4254; max-width: 54ch; }
.home-note-letter .home-note-sign {
  margin: 1.75rem 0 .125rem;
  font-family: var(--f-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
}
.home-note-letter .home-note-role { font-size: .875rem; color: var(--muted); }
.home-note-role a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.home-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.home-chips li {
  padding: .375rem .75rem;
  border: 1px solid var(--blue-line);
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink);
}

/* iPhone mock — modern Pro proportions (402 x 874 screen), thin deep-blue
   titanium frame, black bezel, Dynamic Island, and an iMessage thread */
.thread { margin: 0; justify-self: center; width: 100%; max-width: 330px; }
.iphone {
  position: relative;
  padding: 3px;
  border-radius: 58px;
  background: linear-gradient(145deg, #50627C 0%, #2A3950 30%, #1B2638 55%, #3E4F68 80%, #22304A 100%);
  box-shadow:
    0 0 0 1px rgba(11,27,43,.35),
    0 40px 70px -28px rgba(11,27,43,.45),
    0 16px 30px -18px rgba(11,27,43,.3);
}
/* Side buttons: action + volume on the left, side button on the right */
.iphone::before,
.iphone::after {
  content: '';
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #22304A, #50627C);
}
.iphone::before {
  left: -3px; top: 17%;
  height: 5.5%;
  box-shadow: 0 60px 0 #34445C, 0 118px 0 #34445C;
}
.iphone::after { right: -3px; top: 27%; height: 11%; background: linear-gradient(270deg, #22304A, #50627C); }
.iphone-bezel {
  padding: 7px;
  border-radius: 55px;
  background: #06080B;
}
.iphone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 402 / 874;
  border-radius: 48px;
  background: #FFFFFF;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', sans-serif;
  color: #000;
}
.iphone-island {
  position: absolute;
  top: 9px; left: 50%;
  width: 31%;
  height: 28px;
  border-radius: 20px;
  background: #000;
  transform: translateX(-50%);
  z-index: 2;
}
.iphone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 2px 24px 0 30px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.iphone-icons { display: inline-flex; align-items: center; gap: 5px; }
.iphone-icons svg { height: 11px; width: auto; fill: currentColor; }
.iphone-icons svg:last-child { height: 12px; }

.imsg-head {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 2px 12px 8px;
  border-bottom: .5px solid rgba(0,0,0,.12);
  background: rgba(249,249,249,.94);
}
.imsg-back { position: absolute; left: 14px; top: 16px; width: 10px; color: #0071E3; }
.imsg-back svg { display: block; width: 10px; height: 17px; }
.imsg-contact { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.imsg-avatar {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(180deg, #F3F5F8, #DDE3EA);
}
.imsg-avatar svg { width: 20px; height: auto; }
.imsg-name { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 500; color: #000; }
.imsg-name svg { width: 6px; height: 9px; color: #8E8E93; }

.imsg-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  padding: 10px 11px 8px;
  overflow: hidden;
}
.imsg-stamp { margin: 0 0 10px !important; text-align: center; font-size: 10.5px; line-height: 1.3; color: #6D6D72; }
.imsg-stamp strong { font-weight: 600; }

.msgs { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.msg {
  position: relative;
  max-width: 78%;
  padding: 7px 11px;
  border-radius: 17px;
  font-size: 13.5px;
  line-height: 1.3;
  letter-spacing: -.005em;
}
/* Customer on the right in iMessage blue, Jackson on the left in grey,
   as it looks on the customer's own phone */
.msg--them { align-self: flex-end; background: #0071E3; color: #fff; }
.msg--me   { align-self: flex-start; background: #E9E9EB; color: #000; }
.msg--them + .msg--me, .msg--me + .msg--them { margin-top: 5px; }
/* Bubble tails: a coloured curl, then a patch of the screen colour that
   carves its inner curve */
.msg--them::before, .msg--them::after,
.msg--me::before, .msg--me::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 18px;
}
.msg--them::before { right: -7px; width: 18px; background: #0071E3; border-bottom-left-radius: 15px 13px; }
.msg--them::after  { right: -24px; width: 24px; background: #FFFFFF; border-bottom-left-radius: 9px; }
.msg--me::before   { left: -7px;  width: 18px; background: #E9E9EB; border-bottom-right-radius: 15px 13px; }
.msg--me::after    { left: -24px; width: 24px; background: #FFFFFF; border-bottom-right-radius: 9px; }
.msg { z-index: 0; }
.msg::before { z-index: -1; }
.msg-receipt { align-self: flex-end; margin: 1px 4px 0 0; font-size: 10px; font-weight: 500; color: #8E8E93; }

.msg--typing { display: none; gap: 4px; align-items: center; align-self: flex-start; width: max-content; margin-top: 6px; padding: 10px 12px; }
.msg--typing::before, .msg--typing::after { display: none; }
.msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: #8E8E93; }

.imsg-compose { display: flex; align-items: center; gap: 8px; padding: 6px 11px 26px; }
.imsg-plus {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #E9E9EB;
  color: #6D6D72;
}
.imsg-plus svg { width: 14px; height: 14px; }
.imsg-input {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 11px 0 13px;
  border: 1px solid #D1D1D6;
  border-radius: 99px;
  font-size: 13.5px;
  color: #B0B0B5;
}
.imsg-input svg { width: 10px; height: 14px; color: #8E8E93; }
.iphone-home {
  position: absolute;
  bottom: 8px; left: 50%;
  width: 36%;
  height: 5px;
  border-radius: 99px;
  background: #000;
  transform: translateX(-50%);
}

.thread figcaption { margin-top: 1rem; text-align: center; font-size: .8125rem; color: var(--muted); }
.thread figcaption a { color: var(--navy); font-weight: 600; white-space: nowrap; }

/* Playback: site.js adds .is-playing when the phone scrolls into view and
   reveals messages one at a time. Without JS every message simply shows. */
.thread.is-playing .msg:not(.is-shown) { display: none; }
.thread.is-playing .msg.is-shown { animation: msg-in 260ms var(--ease-out) both; }
.thread.is-playing:not(.is-done) .msg-receipt { visibility: hidden; }
.thread.is-playing.is-typing .msg--typing { display: inline-flex; }
.thread.is-playing.is-typing .msg--typing i { animation: msg-dot 1s ease-in-out infinite; }
.thread.is-playing.is-typing .msg--typing i:nth-child(2) { animation-delay: .15s; }
.thread.is-playing.is-typing .msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes msg-dot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Pricing — the tri-colour rule across the top echoes the logo's three faces */
.home-price {
  position: relative;
  padding: var(--sp-section) 0;
  background: var(--navy);
  color: rgba(255,255,255,.78);
  overflow: hidden;
}
.home-price::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--red) 0 33.33%, var(--navy-lt) 33.33% 66.66%, var(--blue) 66.66% 100%);
}
.home-price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.home-price h2 { color: #fff; font-size: clamp(2rem, 4vw, 2.75rem); }
.home-price-rate {
  margin: 1.25rem 0 .75rem;
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--blue-lt);
}
.home-price-rate strong { font-size: clamp(4.5rem, 10vw, 6.5rem); font-weight: 800; letter-spacing: -.03em; color: #fff; margin-right: .375rem; }
.home-price-sub { color: rgba(255,255,255,.72); max-width: 44ch; }
.home-price-list { display: grid; gap: .875rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.home-price-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .75rem; font-size: 1rem; line-height: 1.55; color: rgba(255,255,255,.76); }
.home-price-list strong { color: #fff; font-weight: 600; }
.price-check { display: grid; place-items: center; width: 22px; height: 22px; margin-top: .05rem; border-radius: 50%; background: rgba(127,179,209,.18); color: var(--blue-lt); }
.price-check svg { width: 12px; height: 12px; }

/* Receipt */
.receipt { margin: 0; justify-self: center; width: 100%; max-width: 330px; }
.receipt-paper {
  --zig: 10px;
  position: relative;
  padding: 1.75rem 1.5rem 2.25rem;
  background: #FCFCFA;
  color: #1C2733;
  font-family: var(--f-mono);
  font-size: .8125rem;
  line-height: 1.5;
  transform: rotate(1.5deg);
  box-shadow: 0 30px 50px -25px rgba(0,0,0,.55);
  /* torn zigzag bottom edge */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--zig)) no-repeat,
                conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / calc(var(--zig) * 2) var(--zig) repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--zig)) no-repeat,
                conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / calc(var(--zig) * 2) var(--zig) repeat-x;
}
.receipt-paper p { margin: 0; }
.receipt-brand { display: grid; place-items: center; margin-bottom: .5rem; }
.receipt-brand svg { width: 26px; height: auto; }
.receipt-biz { text-align: center; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #000; }
.receipt-addr { text-align: center; font-size: .75rem; color: #5E6A75; }
.receipt-rule { margin: .875rem 0; border-top: 1.5px dashed #B9C0C7; }
.receipt-rule--double { border-top: 3px double #8F99A3; }
.receipt-meta { display: flex; justify-content: space-between; font-size: .75rem; color: #5E6A75; }
.receipt-lines { display: grid; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.receipt-lines li { display: flex; justify-content: space-between; gap: 1rem; }
.receipt-lines li > span:last-child { white-space: nowrap; }
.receipt-lines small { display: block; font-size: .6875rem; color: #6E7A85; }
.receipt-total { display: flex; justify-content: space-between; font-size: 1.0625rem; font-weight: 500; color: #000; }
.receipt-thanks { margin-top: 1.25rem !important; text-align: center; font-size: .75rem; color: #5E6A75; }
.receipt figcaption { margin-top: 1.25rem; text-align: center; font-size: .8125rem; color: rgba(255,255,255,.55); }

/* Receipt prints in when it scrolls into view (site.js adds the classes) */
@media (prefers-reduced-motion: no-preference) {
  .receipt.is-waiting .receipt-paper { clip-path: inset(0 0 100% 0); }
  .receipt.is-printing .receipt-paper { animation: receipt-print 1.6s cubic-bezier(.45, 0, .2, 1) both; }
  .receipt.is-printing .receipt-lines li { animation: receipt-line 300ms var(--ease-out) both; }
  .receipt.is-printing .receipt-lines li:nth-child(1) { animation-delay: .55s; }
  .receipt.is-printing .receipt-lines li:nth-child(2) { animation-delay: .75s; }
  .receipt.is-printing .receipt-lines li:nth-child(3) { animation-delay: .95s; }
  .receipt.is-printing .receipt-lines li:nth-child(4) { animation-delay: 1.15s; }
}
@keyframes receipt-print {
  from { clip-path: inset(0 0 100% 0); transform: rotate(1.5deg) translateY(-24px); }
  to   { clip-path: inset(0 0 -40px 0); transform: rotate(1.5deg) translateY(0); }
}
@keyframes receipt-line { from { opacity: 0; } to { opacity: 1; } }

/* Reviews */
.reviews-layout {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.reviews-summary { position: sticky; top: 140px; }
.rating-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 30px -20px rgba(11,27,43,.25);
}
.rating-score { margin: 0; font-family: var(--f-display); font-size: 4rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.rating-count { margin: .375rem 0 0; font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
.rating-count span { font-size: .8125rem; font-weight: 400; color: var(--muted); }
.rating-links { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.25rem; }

.gstars { display: inline-flex; gap: 1px; color: #FBBC04; }
.gstars svg { width: 15px; height: 15px; }
.gstars--lg svg { width: 22px; height: 22px; }

.reviews-cards { columns: 2 280px; column-gap: 1rem; }
.greview {
  break-inside: avoid;
  margin: 0 0 1rem;
  padding: 1.25rem 1.375rem 1.375rem;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
}
.greview-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: .75rem; align-items: center; margin-bottom: .75rem; }
.greview-avatar {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #fff;
}
.greview-who { display: flex; flex-direction: column; min-width: 0; font-size: .9375rem; line-height: 1.3; }
.greview-who strong { font-weight: 600; color: var(--ink); }
.greview-who a { font-size: .8125rem; color: var(--muted); }
.greview-who a:hover { color: var(--red-dk); }
.greview-src svg { width: 20px; height: 20px; display: block; }
.greview blockquote { margin: .5rem 0 0; font-size: .9375rem; line-height: 1.6; color: #2E4254; }
.home-reviews-sec { background: var(--canvas); }

/* Service area: towns grouped by travel fee, colour-matched to the map */
.fee-groups { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
.fee-group-head { display: flex; align-items: center; gap: .5rem; margin: 0 0 .625rem; font-size: .9375rem; font-weight: 600; color: #fff; }
.fee-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.fee-dot--free { background: #3DDC84; box-shadow: 0 0 0 3px rgba(61,220,132,.2); }
.fee-dot--fee  { background: #FFA3A9; box-shadow: 0 0 0 3px rgba(255,163,169,.2); }
.fee-towns { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.fee-towns li {
  padding: .375rem .75rem;
  border: 1px solid var(--line-dark-soft);
  border-radius: 99px;
  background: rgba(255,255,255,.04);
  font-size: .875rem;
  color: rgba(255,255,255,.88);
}
.fee-also { margin: .625rem 0 0; font-size: .875rem; line-height: 1.5; color: rgba(255,255,255,.7); }
.fee-towns .fee-more { border-style: dashed; background: none; color: rgba(255,255,255,.62); }

.map-town .map-city { fill: #3DDC84; }
.map-town .map-city-halo { stroke: rgba(61,220,132,.45); }
.map-town--fee .map-city { fill: #FFA3A9; }
.map-town--fee .map-city-halo { stroke: rgba(255,163,169,.45); }
.map-spoke line.is-fee { stroke: rgba(255,163,169,.35); }

/* FAQ */
.ask-card { margin-top: 1.5rem; }
.ask-bubble {
  position: relative;
  display: inline-block;
  max-width: 30ch;
  margin: 0 0 1rem !important;
  padding: .75rem 1rem;
  border-radius: 18px 18px 18px 6px;
  background: #E9E9EB;
  font-size: .9375rem;
  line-height: 1.45;
  color: #111;
}
.ask-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.home-faq .faq-list { display: grid; gap: .625rem; border-top: 0; }
.home-faq .faq-item { border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.home-faq .faq-item.open { border-color: rgba(18,49,78,.25); box-shadow: 0 12px 28px -20px rgba(11,27,43,.3); }
.home-faq .faq-q { align-items: center; padding: 1.0625rem 1.25rem; font-family: var(--f-ui); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.home-faq .faq-ind {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--canvas);
  font-family: var(--f-ui);
  font-size: 1.125rem;
  line-height: 1;
  color: var(--navy);
  transition: transform var(--dur) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.home-faq .faq-ind::before { content: '+'; }
.home-faq .faq-item.open .faq-ind::before { content: '+'; }
.home-faq .faq-item.open .faq-ind { transform: rotate(45deg); background: var(--navy); color: #fff; }
.home-faq .faq-inner { padding: 0 1.25rem 1.25rem; font-size: .9375rem; line-height: 1.65; color: var(--body); }
.home-faq { background: var(--surface); }

/* iOS contact card (CTA sections and the contact page hero) */
.home-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.home-cta h2 { max-width: 16ch; }
.contact-card {
  justify-self: center;
  width: 100%;
  max-width: 340px;
  border-radius: 22px;
  background: #F2F2F7;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', sans-serif;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.6);
  overflow: hidden;
}
.contact-top { display: flex; flex-direction: column; align-items: center; padding: 1.75rem 1rem 1rem; }
.contact-avatar {
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  margin-bottom: .625rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF, #DDE3EA);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.contact-avatar svg { width: 40px; height: auto; }
.contact-card p { margin: 0; color: #000; }
.contact-card .contact-name { font-size: 1.625rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.contact-card .contact-org { font-size: .875rem; color: #6D6D72; }
.contact-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: 0 1rem 1rem; }
.contact-card .contact-actions a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .625rem .25rem .5rem;
  border-radius: 12px;
  background: #FFFFFF;
  font-size: .75rem;
  font-weight: 500;
  color: #0071E3;
  transition: background-color var(--dur-fast) var(--ease);
}
.contact-card .contact-actions a:hover { background: #E5F0FF; color: #0071E3; }
.contact-actions svg { width: 22px; height: 22px; }
.contact-fields { margin: 0 1rem; border-radius: 12px; background: #FFFFFF; }
.contact-fields div { padding: .625rem .875rem; border-bottom: .5px solid #D8D8DC; }
.contact-fields div:last-child { border-bottom: 0; }
.contact-fields dt { font-size: .75rem; color: #3C3C43; }
.contact-fields dd { margin: .0625rem 0 0; font-size: .9375rem; line-height: 1.35; color: #000; }
.contact-card .contact-fields a { color: #0071E3; }
.contact-card .contact-save {
  display: block;
  margin: 1rem;
  padding: .75rem;
  border-radius: 12px;
  background: #FFFFFF;
  text-align: center;
  font-size: .9375rem;
  color: #0071E3;
}
.contact-card .contact-save:hover { background: #E5F0FF; color: #0071E3; }
.contact-card :focus-visible { outline-color: #0071E3; }

@media (max-width: 900px) {
  .home-hero-grid,
  .home-note-grid,
  .home-price-grid,
  .reviews-layout,
  .home-cta-grid { grid-template-columns: minmax(0, 1fr); }
  .reviews-summary { position: static; }
  .home-hero-cube { width: 80vw; right: -30vw; top: calc(var(--nav-h) + 1rem); transform: none; opacity: .05; }
}


/* ============================================================
   29. PAGE: SERVICES
   ------------------------------------------------------------
   Reuses the home hero, window, and illustration pieces.
   ============================================================ */

.svc-hero .crumb { margin-bottom: 1.25rem; }
.svc-hero h1 { max-width: 16ch; }

/* Quick estimate */
.est-body { padding: 1.125rem 1.25rem 1.25rem; }
.est-title { margin: 0 0 .875rem; font-family: var(--f-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.est-field { display: block; margin-bottom: .75rem; }
.est-field > span { display: block; margin-bottom: .3125rem; font-size: .8125rem; font-weight: 600; color: var(--ink); }
.est-field select {
  width: 100%;
  padding: .625rem 2.25rem .625rem .75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%2346596B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .875rem center / 11px;
  font: inherit;
  font-size: .9375rem;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.est-field select:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.est-qty[hidden] { display: none; }
.est-stepper { display: inline-grid; grid-template-columns: 40px 64px 40px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.est-stepper button { border: 0; background: var(--canvas); font-size: 1.125rem; font-weight: 600; color: var(--navy); cursor: pointer; }
.est-stepper button:hover { background: var(--blue-bg); }
.est-stepper input { width: 100%; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font: inherit; font-size: .9375rem; font-weight: 600; color: var(--ink); -moz-appearance: textfield; }
.est-stepper input::-webkit-outer-spin-button, .est-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.est-stepper :focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.est-result { margin-top: 1rem; padding: 1rem 1.125rem; border-radius: 10px; background: var(--blue-bg); }
.est-price { margin: 0; font-family: var(--f-display); font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--navy); }
.est-price.is-text { font-size: 1.75rem; }
.est-time { margin: .375rem 0 .75rem; font-size: .875rem; font-weight: 500; color: var(--blue-dk); }
.est-lines { display: grid; gap: .375rem; margin: 0; padding: .75rem 0 0; list-style: none; border-top: 1px solid var(--blue-line); }
.est-lines li { display: flex; justify-content: space-between; gap: 1rem; font-size: .8125rem; color: var(--body); }
.est-lines li span:last-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.est-send { display: flex; justify-content: center; gap: .5rem; width: 100%; margin-top: .875rem; border-radius: 999px; }
.est-send svg { width: 17px; height: 17px; }
.est-foot { margin: .75rem 0 0; font-size: .75rem; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .est-result.is-updated .est-price { animation: est-pop 320ms var(--ease-out); }
}
@keyframes est-pop { from { transform: translateY(4px); opacity: .4; } to { transform: none; opacity: 1; } }

/* Sticky service menu */
/* Sticky service menu: a smaller pill that tucks in under the header pill */
.svc-nav {
  position: sticky;
  top: var(--svc-nav-top, 84px);
  z-index: 50;
  padding: .75rem 0;
  pointer-events: none;
}
.svc-nav .container { display: flex; justify-content: center; }
.svc-nav-inner {
  display: flex;
  gap: .25rem;
  max-width: 100%;
  padding: .3125rem;
  border: 1px solid rgba(11,27,43,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 10px 26px -16px rgba(11,27,43,.3);
  overflow-x: auto;
  scrollbar-width: none;
  pointer-events: auto;
}
.svc-nav-inner::-webkit-scrollbar { display: none; }
.svc-nav a {
  flex: none;
  padding: .4375rem .9375rem;
  border-radius: 99px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--body);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.svc-nav a:hover { background: var(--canvas); color: var(--ink); }
.svc-nav a.is-current { background: var(--navy); color: #fff; }

/* Service sections */
.svc2 { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.svc2:nth-of-type(even) { background: var(--canvas); }
.svc2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.svc2--flip .svc2-text { order: 2; }
.svc2 h2 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 1rem; }
.svc2-lede { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.65; color: #2E4254; max-width: 54ch; }
.svc2-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem 1.5rem; margin: 1.5rem 0 1.75rem; padding: 0; list-style: none; }
.svc2-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .625rem; align-items: start; font-size: .9375rem; line-height: 1.45; color: var(--ink); }
.svc2 .price-check { background: var(--blue-bg); color: var(--blue-dk); }

.svc-price {
  padding: 1.125rem 1.25rem 1.25rem;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 30px -24px rgba(11,27,43,.3);
}
.svc-price-table { width: 100%; border-collapse: collapse; }
.svc-price-table caption { padding-bottom: .5rem; text-align: left; font-size: .8125rem; font-weight: 700; color: var(--ink); }
.svc-price-table th, .svc-price-table td { padding: .5625rem 0; border-top: 1px solid var(--line-soft); font-size: .875rem; vertical-align: top; }
.svc-price-table th { padding-right: 1rem; font-weight: 400; text-align: left; color: var(--body); }
.svc-price-table td { font-weight: 600; text-align: right; white-space: nowrap; color: var(--ink); }
.svc-price-table td.is-free { color: var(--ok); }
.svc-price-note { margin: .625rem 0 0; font-size: .8125rem; color: var(--muted); }
.svc-price-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1rem; }

/* Deep link highlight */
@media (prefers-reduced-motion: no-preference) {
  .svc2.is-linked h2 { animation: svc2-linked 1800ms var(--ease-out) 1; }
}
@keyframes svc2-linked { 0%, 15% { color: var(--red); } 100% { color: var(--ink); } }

/* Mock screens */
.svc-visual { position: relative; }
.svc-visual .win { box-shadow: 0 30px 60px -30px rgba(11,27,43,.4); }
.svc-win-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.125rem 1.25rem 1.25rem; background: var(--canvas); font-size: .875rem; line-height: 1.3; color: var(--body); }
.svc-win-body .ill-row { padding: .5rem .75rem; }
.svc-win-body .ill-row > :last-child { flex: none; white-space: nowrap; }
@media (max-width: 400px) {
  .svc-win-body { padding: 1rem .875rem; font-size: .75rem; }
  .svc-win-body .ill-row { gap: .5rem; padding: .5rem .625rem; }
}
.svc-win-body .ill-head { margin: .125rem 0; }
.svc-subhead { margin-top: .625rem !important; }
.svc-change { display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; }
.svc-change s { color: var(--open); text-decoration-thickness: 2px; }
.svc-change b { color: var(--ok); }
.svc-val { font-weight: 500; color: var(--ink); }
.svc-devices { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: .25rem .25rem 0; }
.svc-win-body .ill-meter-row { margin-top: .375rem; padding: 0 .25rem; }
.svc-win-body .ill-net { margin-top: .5rem; }
.svc-win-body .ill-ports { margin-top: .375rem; }

.svc-cams { position: relative; padding-bottom: 3.5rem; }
.svc-cams .ill-cams {
  display: grid;
  height: auto;
  padding: .75rem;
  border-radius: 14px;
  background: var(--navy-dk);
  box-shadow: 0 30px 60px -30px rgba(11,27,43,.5);
}
.svc-cams .ill-cam { min-height: 120px; font-size: .8125rem; }
.svc-toast {
  position: absolute;
  right: -12px; bottom: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  width: min(290px, 85%);
  padding: .75rem .875rem;
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 40px -16px rgba(11,27,43,.45);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
}
.svc-toast-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--navy); color: #fff; }
.svc-toast-icon svg { width: 20px; height: 20px; }
.svc-toast-text { display: flex; flex-direction: column; font-size: .8125rem; line-height: 1.3; color: #3C3C43; }
.svc-toast-text strong { font-size: .875rem; color: #000; }

/* Mock screens come alive once when they scroll into view (site.js adds .is-live) */
@media (prefers-reduced-motion: no-preference) {
  .svc-visual.is-waiting .win,
  .svc-visual.is-waiting .ill-cams { opacity: 0; transform: translateY(16px); }
  .svc-visual.is-live .win,
  .svc-visual.is-live .ill-cams { opacity: 1; transform: none; transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
  .svc-visual.is-live .ill-ok { animation: ill-pop 420ms var(--ease-out) both; }
  .svc-visual.is-live .ill-row:nth-child(2) .ill-ok, .svc-visual.is-live .ill-row:nth-child(2) .svc-change { animation-delay: 250ms; }
  .svc-visual.is-live .ill-row:nth-child(3) .ill-ok { animation-delay: 400ms; }
  .svc-visual.is-live .ill-row:nth-child(4) .ill-ok { animation-delay: 550ms; }
  .svc-visual.is-live .ill-row:nth-child(5) .ill-ok { animation-delay: 700ms; }
  .svc-visual.is-live .ill-row:nth-child(6) .ill-ok { animation-delay: 850ms; }
  .svc-visual.is-live .svc-devices .ill-ok { animation-delay: 950ms; }
  .svc-visual.is-live .ill-files .ill-ok { animation-delay: 1000ms; }
  .svc-visual.is-live .ill-bars--after i { animation: ill-bar 360ms var(--ease-out) both; animation-delay: 500ms; }
  .svc-visual.is-live .ill-progress i { animation: ill-fill 1s var(--ease-out) both; animation-delay: 300ms; }
  .svc-visual.is-live .ill-meter-fill--good { animation: ill-drain 1100ms var(--ease-out) both; animation-delay: 600ms; }
  .svc-visual.is-live .ill-link { animation: ill-flow 700ms linear infinite; }
  .svc-visual.is-live .ill-ports i.on::after { animation: ill-blink 1s steps(2, jump-none) infinite; }
  .svc-visual.is-live .ill-ports i:nth-child(3n)::after { animation-duration: 700ms; }
  .svc-visual.is-live .ill-cam::before { animation: ill-rec 1.2s ease-in-out infinite; }
  .svc-visual.is-waiting .svc-toast { opacity: 0; transform: translateY(12px) scale(.96); }
  .svc-visual.is-live .svc-toast { animation: toast-in 500ms cubic-bezier(.3, 1.3, .5, 1) 900ms both; }
}
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

/* Billing & travel */
.svc-billing { background: var(--surface); border-top: 1px solid var(--line-soft); }
.svc-billing-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.svc-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; margin: 0; padding: 0; list-style: none; }
.svc-rules li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .75rem; font-size: .9375rem; line-height: 1.55; color: var(--body); }
.svc-rules strong { display: block; color: var(--ink); font-weight: 600; }
.svc-rules .price-check { background: var(--blue-bg); color: var(--blue-dk); }
.svc-zones { padding: 1.5rem; border-radius: 14px; background: var(--canvas); }
.svc-zones h3 { margin-bottom: 1rem; font-size: 1.5rem; }
.zone { padding: .875rem 1rem; border-radius: 10px; background: var(--surface); border-left: 4px solid; }
.zone + .zone { margin-top: .625rem; }
.zone--free { border-color: #1F9D63; }
.zone--paid { border-color: var(--red); }
.zone p { margin: 0; }
.zone-fee { font-weight: 700; color: var(--ink); }
.zone-rule { font-weight: 500; color: var(--muted); }
.zone-towns { margin-top: .125rem !important; font-size: .875rem; color: var(--body); }
.zone-note { margin: 1rem 0 0; font-size: .875rem; color: var(--body); }

@media (max-width: 900px) {
  .svc2-grid, .svc-billing-grid { grid-template-columns: minmax(0, 1fr); }
  .svc2--flip .svc2-text { order: 0; }
  .svc-toast { right: 8px; }
}
@media (max-width: 560px) {
  .svc2-checks, .svc-rules { grid-template-columns: minmax(0, 1fr); }
  .svc-cams .ill-cam { min-height: 80px; }
}


/* ============================================================
   30. PAGE: ABOUT
   ============================================================ */

.about-hero .crumb { margin-bottom: 1.25rem; }
.about-hero h1 { max-width: 12ch; }

/* ID badge on a lanyard */
.badge-wrap { display: flex; justify-content: center; }
.badge { position: relative; transform-origin: 50% 0; }
.badge-strap {
  position: absolute;
  top: calc(-1 * var(--nav-h) - 6rem);
  left: 50%;
  width: 26px;
  height: calc(var(--nav-h) + 6rem + 62px);
  transform: translateX(-50%);
  background: repeating-linear-gradient(135deg, var(--navy) 0 10px, #1B4468 10px 20px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.badge-clip {
  position: absolute;
  top: 52px; left: 50%;
  width: 44px; height: 30px;
  transform: translateX(-50%);
  border-radius: 6px 6px 10px 10px;
  background: linear-gradient(180deg, #C9D1D9, #8C98A4);
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  z-index: 2;
}
.badge-clip::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 20px; height: 6px; border-radius: 3px; background: #5E6A75; transform: translateX(-50%); }
.badge-card {
  position: relative;
  width: 290px;
  padding: 0 0 1.125rem;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 2px 4px rgba(11,27,43,.06), 0 34px 60px -26px rgba(11,27,43,.4);
  overflow: hidden;
  text-align: center;
}
.badge-card::before { content: ''; position: absolute; top: 14px; left: 50%; width: 46px; height: 9px; border-radius: 99px; background: var(--canvas); box-shadow: inset 0 1px 2px rgba(0,0,0,.15); transform: translateX(-50%); z-index: 1; }
.badge-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 2.125rem 1rem .875rem;
  background: var(--navy);
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
.badge-top::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--red) 0 33.33%, var(--navy-lt) 33.33% 66.66%, var(--blue) 66.66% 100%); }
.badge-logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #fff; }
.badge-logo svg { width: 15px; height: auto; }
.badge-photo {
  width: 150px;
  height: 180px;
  margin: 1.25rem auto .875rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--line);
}
.badge-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.badge-card p { margin: 0; }
.badge-name { font-family: var(--f-display); font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.01em; color: var(--ink); }
.badge-role { margin-top: .25rem !important; font-size: .875rem; font-weight: 600; color: var(--red-dk); }
.badge-facts { margin: 1rem 1.25rem 0; padding: .625rem 0 0; border-top: 1px dashed var(--line); text-align: left; }
.badge-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; font-size: .8125rem; }
.badge-facts dt { color: var(--muted); }
.badge-facts dd { margin: 0; font-weight: 600; text-align: right; color: var(--ink); }
.badge-barcode { display: flex; justify-content: center; align-items: stretch; gap: 2px; height: 28px; margin: .875rem auto 0; }
.badge-barcode i { display: block; background: var(--ink); }

/* The load swing and the hover nudge live on separate layers so one never
   restarts the other. site.js plays the nudge once per hover. */
.badge-sway { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 70px; transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .badge { animation: badge-swing 2.4s cubic-bezier(.3, .9, .4, 1) backwards; }
  .badge-sway.is-nudging { animation: badge-nudge 1.4s ease-in-out; }
}
@keyframes badge-swing {
  0%   { transform: rotate(9deg); }
  35%  { transform: rotate(-5deg); }
  60%  { transform: rotate(2.5deg); }
  80%  { transform: rotate(-1deg); }
  100% { transform: rotate(0); }
}
@keyframes badge-nudge {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-3deg); }
  65% { transform: rotate(1.5deg); }
}
.about-hero { overflow: hidden; }

/* Story */
.story-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.story-text p { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.75; color: #2E4254; max-width: 60ch; }
.story-quote {
  position: sticky;
  top: 140px;
  margin: 0;
  padding: 2rem 1.75rem 1.75rem;
  border-radius: 16px;
  background: var(--navy);
  color: #fff;
}
.story-quote::before { content: '\201C'; position: absolute; top: -.25rem; left: 1.25rem; font-family: var(--f-display); font-size: 5rem; line-height: 1; color: var(--blue); }
.story-quote blockquote { margin: 1.25rem 0 1.5rem; font-family: var(--f-display); font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 600; line-height: 1.2; }
.story-quote figcaption { display: flex; flex-direction: column; gap: .25rem; padding-top: 1rem; border-top: 1px solid var(--line-dark-soft); font-size: .875rem; color: rgba(255,255,255,.7); }
.story-quote-sign { font-family: var(--f-display); font-size: 1.625rem; font-weight: 700; color: #fff; }

/* Timeline */
.about-timeline { background: var(--canvas); }
.tl { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.tl::before, .tl::after { content: ''; position: absolute; top: 9px; left: 10px; right: 10px; height: 3px; border-radius: 3px; }
.tl::before { background: var(--line); }
.tl::after { background: linear-gradient(90deg, var(--blue-dk), var(--blue)); transform-origin: left; }
/* items sit above the line even mid fade-in, when their opacity makes them
   their own stacking layer and the dot's z-index alone no longer lifts it */
.tl-item { position: relative; z-index: 1; padding-top: 2.25rem; }
.tl-dot { position: absolute; top: 0; left: 0; width: 21px; height: 21px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 5px var(--blue-dk); z-index: 1; }
.tl-item:last-child .tl-dot { box-shadow: inset 0 0 0 5px var(--red); }
.tl-item p { margin: 0; }
.tl-when { font-size: .8125rem; font-weight: 700; color: var(--blue-dk); }
.tl-item:last-child .tl-when { color: var(--red-dk); }
.tl-what { margin-top: .25rem !important; font-family: var(--f-display); font-size: 1.375rem; font-weight: 700; line-height: 1.15; color: var(--ink); }
.tl-detail { margin-top: .375rem !important; font-size: .875rem; line-height: 1.5; color: var(--body); }
.tl-stars { display: inline-flex; gap: 1px; margin-right: .25rem; vertical-align: -1px; color: #FBBC04; }
.tl-stars svg { width: 13px; height: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .tl.is-waiting::after { transform: scaleX(0); }
  .tl.is-waiting .tl-item { opacity: 0; transform: translateY(10px); }
  .tl.is-live::after { transform: scaleX(1); transition: transform 1.4s var(--ease-out); }
  .tl.is-live .tl-item { opacity: 1; transform: none; transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
  .tl.is-live .tl-item:nth-child(2) { transition-delay: 250ms; }
  .tl.is-live .tl-item:nth-child(3) { transition-delay: 500ms; }
  .tl.is-live .tl-item:nth-child(4) { transition-delay: 750ms; }
  .tl.is-live .tl-item:nth-child(5) { transition-delay: 1000ms; }
}

/* How I work */
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.25rem); }
.promise { padding: 1.5rem; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface); }
.promise-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 1rem; border-radius: 10px; background: var(--navy); color: #fff; }
.promise-icon svg { width: 23px; height: 23px; }
.promise h3 { font-size: 1.375rem; margin-bottom: .5rem; }
.promise p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--body); }

/* Gear & referrals */
.about-gear { background: var(--canvas); }
.gear-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.gear-card { padding: 1.75rem; border-radius: 16px; background: var(--surface); border-top: 5px solid #1F9D63; box-shadow: 0 12px 30px -24px rgba(11,27,43,.3); }
.gear-card--refer { border-top-color: var(--blue); }
.gear-card h3 { font-size: 1.625rem; margin-bottom: 1rem; }
.gear-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.gear-list li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .875rem; align-items: start; font-size: .9375rem; line-height: 1.6; color: var(--body); }
.gear-list strong { color: var(--ink); font-weight: 600; }
.gear-list a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.gear-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--blue-bg); color: var(--blue-dk); }
.gear-icon svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .story-grid, .gear-grid { grid-template-columns: minmax(0, 1fr); }
  .story-quote { position: static; }
  .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding-left: 2.25rem; }
  .tl::before, .tl::after { top: 10px; bottom: 10px; left: 9px; right: auto; width: 3px; height: auto; }
  .tl::after { transform-origin: top; }
  .tl.is-waiting::after { transform: scaleY(0); }
  .tl.is-live::after { transform: scaleY(1); }
  .tl-item { padding-top: 0; }
  .tl-dot { left: -2.25rem; }
  .badge-strap { top: -40px; height: 102px; }
}
@media (max-width: 560px) {
  .promises { grid-template-columns: minmax(0, 1fr); }
  .badge-card { width: 260px; }
}


/* ============================================================
   31. PAGE: CONTACT
   ============================================================ */

.contact-hero .crumb { margin-bottom: 1.25rem; }
.contact-hero h1 { max-width: 13ch; }
.contact-hero .hero-proof { margin-top: 1.75rem; flex-direction: column; align-items: flex-start; gap: .5rem; }
.hero-status--plain { padding-left: 1rem; color: var(--muted); }
.contact-jump { margin-top: 1.75rem; }
.contact-hero .contact-card { justify-self: center; }

/* Delivery-style tracker */
.contact-next { background: var(--canvas); }
.track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.track::before { content: ''; position: absolute; top: 15px; left: 16px; right: 16px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #1F9D63 0 20%, var(--blue) 20% 34%, var(--line) 34% 100%); }
.track-step { position: relative; padding-top: 2.75rem; }
.track-dot {
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 3px var(--line);
  color: #fff;
}
.track-step--done .track-dot { background: #1F9D63; box-shadow: none; }
.track-step--done .track-dot svg { width: 16px; height: 16px; }
.track-step--now .track-dot { box-shadow: inset 0 0 0 3px var(--blue); }
.track-step--now .track-dot::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); }
@media (prefers-reduced-motion: no-preference) {
  .track-step--now .track-dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(93,153,186,.5); animation: track-ping 2s ease-out infinite; }
}
@keyframes track-ping { to { box-shadow: 0 0 0 12px rgba(93,153,186,0); } }
.track-step p { margin: 0; }
.track-title { font-family: var(--f-display); font-size: 1.375rem; font-weight: 700; line-height: 1.15; color: var(--ink); }
.track-step--next .track-title { color: var(--body); }
.track-sub { margin-top: .25rem !important; font-size: .9375rem; color: var(--body); }

/* Form section */
.contact-form-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.contact-side-lede { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.65; color: #2E4254; max-width: 42ch; }
.tips { margin-top: 1.5rem; padding: 1.25rem 1.375rem; border-radius: 14px; background: var(--blue-bg); }
.tips-head { margin: 0 0 .75rem; font-weight: 700; color: var(--ink); }
.tips ul { display: grid; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.tips li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .625rem; font-size: .9375rem; color: var(--ink); }
.tips .price-check { background: var(--surface); color: var(--blue-dk); }
.contact-facts { margin: 1.5rem 0 0; }
.contact-facts div { padding: .75rem 0; border-top: 1px solid var(--line-soft); }
.contact-facts dt { font-size: .8125rem; font-weight: 600; color: var(--muted); }
.contact-facts dd { margin: .125rem 0 0; font-size: .9375rem; color: var(--ink); }
.contact-facts a { color: var(--navy); font-weight: 600; }

/* Compose window around the form */
.compose { box-shadow: 0 1px 2px rgba(11,27,43,.05), 0 30px 60px -30px rgba(11,27,43,.35); }
.compose-to { display: flex; align-items: center; gap: .625rem; padding: .625rem 1.5rem; border-bottom: 1px solid var(--line-soft); font-size: .875rem; color: var(--muted); }
.compose-chip { padding: .1875rem .625rem; border-radius: 99px; background: var(--blue-bg); font-weight: 600; color: var(--navy); }
.compose .form-card { padding: 1.5rem; border: 0; border-radius: 0; }
.compose .form-group { margin-bottom: 1.125rem; }
.compose .form-group > label,
.compose .topics legend {
  margin-bottom: .375rem;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.compose .form-group input,
.compose .form-group textarea {
  padding: .6875rem .875rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.compose .form-group input:hover,
.compose .form-group textarea:hover { border-color: rgba(11,27,43,.3); }
.compose .form-group input:focus,
.compose .form-group textarea:focus { border-color: var(--blue-dk); box-shadow: 0 0 0 3px rgba(93,153,186,.25); }
.compose .form-group input:focus-visible,
.compose .form-group textarea:focus-visible { outline: none; }
.compose .form-group input[aria-invalid="true"],
.compose .form-group textarea[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px rgba(230,57,70,.15); }
.compose .form-group textarea { min-height: 140px; }
.compose .form-note { justify-content: center; text-align: center; }

.topics { margin: 0 0 1.125rem; padding: 0; border: 0; min-width: 0; }
.topics legend { padding: 0; }
.topics legend em,
.form-group label em { font-style: normal; font-weight: 400; color: var(--muted); }
.topic-list { display: flex; flex-wrap: wrap; gap: .4375rem; }
.compose .topics .topic { position: relative; display: inline-block; margin: 0; font-size: inherit; letter-spacing: 0; text-transform: none; cursor: pointer; }
.topic input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.compose .topics .topic span {
  display: inline-block;
  padding: .4375rem .875rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  font-size: .875rem;
  font-weight: 500;
  color: var(--body);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.compose .topics .topic:hover span { border-color: rgba(18,49,78,.4); color: var(--ink); }
.compose .topics .topic input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.compose .topics .topic input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }

@media (max-width: 900px) {
  .contact-form-grid { grid-template-columns: minmax(0, 1fr); }
  .track { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-left: 3rem; }
  .track::before { top: 16px; bottom: 16px; left: 15px; right: auto; width: 4px; height: auto; background: linear-gradient(180deg, #1F9D63 0 20%, var(--blue) 20% 34%, var(--line) 34% 100%); }
  .track-step { padding-top: 0; }
  .track-dot { left: -3rem; }
}


/* ============================================================
   32. PAGE: PARTNERS
   ============================================================ */

.partners-hero .crumb { margin-bottom: 1.25rem; }
.partners-hero h1 { max-width: 14ch; }

/* Job crew window */
.crew { margin: 0; width: 100%; max-width: 440px; justify-self: center; }
.crew-body { padding: 1.25rem; }
.crew-job { margin: 0 0 .875rem; font-family: var(--f-display); font-size: 1.375rem; font-weight: 700; line-height: 1.15; color: var(--ink); }
.crew-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.crew-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .625rem .75rem; border-radius: 10px; background: var(--canvas); }
.crew-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-soft); overflow: hidden; }
.crew-logo svg { width: 22px; height: auto; }
/* TBird's logo is navy, so it sits on a white tile */
.crew-logo--img { background: #fff; }
.crew-logo--img img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.crew-who { display: flex; flex-direction: column; font-size: .8125rem; line-height: 1.35; color: var(--muted); }
.crew-who strong { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.crew-role { padding: .1875rem .625rem; border-radius: 99px; background: var(--blue-bg); font-size: .75rem; font-weight: 600; color: var(--blue-dk); }
.crew-role--lead { background: var(--navy); color: #fff; }
.crew-status { display: flex; align-items: center; gap: .5rem; margin: .875rem 0 0; font-size: .8125rem; font-weight: 500; color: var(--ok); }
.crew figcaption { margin-top: .875rem; text-align: center; font-size: .8125rem; color: var(--muted); }

/* Partner profile */
.partner-sec { background: var(--canvas); }
.partner-card {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(11,27,43,.05), 0 24px 50px -32px rgba(11,27,43,.35);
  overflow: hidden;
}
.partner-card-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.25rem 1.75rem;
  background: linear-gradient(180deg, #F3F7FA, #E9F1F6);
  text-align: center;
}
.partner-card-logo { display: grid; place-items: center; width: 160px; height: 140px; margin-bottom: 1rem; padding: 1.25rem; border-radius: 22px; background: #fff; box-shadow: 0 12px 30px -18px rgba(11,27,43,.35); }
.partner-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-card p { margin: 0; }
.partner-card-name { font-family: var(--f-display); font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--ink); }
.partner-card-run { margin-top: .25rem !important; font-size: .875rem; color: var(--muted); }
.partner-card-btn { margin-top: 1.25rem; gap: .5rem; }
.partner-card-btn svg { width: 14px; height: 14px; }
.partner-card-main { padding: clamp(1.75rem, 4vw, 2.75rem); }
.partner-card-lede { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.7; color: #2E4254; }
.partner-card-label { margin-top: 1.5rem !important; font-weight: 700; color: var(--ink); }
.partner-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.partner-chips li { padding: .4375rem .875rem; border-radius: 99px; background: var(--blue-bg); font-size: .875rem; font-weight: 500; color: var(--navy); }

.partner-note { margin: 1.75rem 0 0; max-width: 62ch; font-size: 1rem; color: var(--body); }

@media (max-width: 900px) {
  .partner-card { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   33. PAGE: PRIVACY
   ============================================================ */

.privacy-hero .crumb { margin-bottom: 1.25rem; }
.privacy-hero h1 { max-width: 12ch; }
.policy-updated { margin-top: 1.25rem; font-size: .875rem; font-weight: 600; color: var(--blue-dk); }
.privacy-hero .home-hero-lede a { color: var(--navy); font-weight: 600; }
.privacy-check { width: 100%; max-width: 420px; justify-self: center; }

.policy-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.policy-toc { position: sticky; top: 130px; display: flex; flex-direction: column; gap: .125rem; }
.policy-toc-head { margin: 0 0 .5rem; font-size: .8125rem; font-weight: 700; color: var(--ink); }
.policy-toc a {
  padding: .375rem .75rem;
  border-left: 2px solid var(--line-soft);
  font-size: .875rem;
  color: var(--body);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.policy-toc a:hover { color: var(--ink); border-left-color: var(--line); }
.policy-toc a.is-current { border-left-color: var(--navy); background: var(--canvas); font-weight: 600; color: var(--navy); }

.policy-body { max-width: 72ch; }
.policy-intro { margin: 0 0 2rem; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.7; color: #2E4254; }
.policy-sec { padding: 2rem 0; border-top: 1px solid var(--line-soft); }
.policy-sec h2 { margin-bottom: 1rem; font-size: clamp(1.625rem, 3vw, 2.125rem); }
.policy-sec h3 { margin: 1.5rem 0 .5rem; font-size: 1.25rem; }
.policy-sec p, .policy-sec li { font-size: 1rem; line-height: 1.75; color: #2E4254; }
.policy-sec p { margin: 0 0 1rem; }
.policy-sec ul { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.policy-sec li { margin-bottom: .25rem; }
.policy-sec li::marker { color: var(--blue-dk); }
.policy-sec a, .policy-intro a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(18,49,78,.3); text-underline-offset: 2px; }
.policy-sec a:hover { color: var(--red-dk); text-decoration-color: currentColor; }

.policy-table-wrap { margin: 1.25rem 0 .5rem; border: 1px solid var(--line-soft); border-radius: 12px; overflow-x: auto; }
.policy-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .9375rem; }
.policy-table th, .policy-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; line-height: 1.5; }
.policy-table thead th { background: var(--canvas); font-size: .8125rem; font-weight: 700; color: var(--ink); }
.policy-table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.policy-table td { color: var(--body); }
.policy-table tbody tr:last-child th, .policy-table tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 900px) {
  .policy-grid { grid-template-columns: minmax(0, 1fr); }
  /* anchors also clear the sticky contents pill below the header */
  html:has(.policy-toc) { scroll-padding-top: 140px; }
  /* same sticky pill as the Services menu, tucked under the header */
  .policy-toc {
    top: var(--toc-top, 84px);
    z-index: 50;
    flex-direction: row;
    gap: .25rem;
    margin-top: -.5rem;
    padding: .3125rem;
    border: 1px solid rgba(11,27,43,.08);
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 10px 26px -16px rgba(11,27,43,.3);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .policy-toc::-webkit-scrollbar { display: none; }
  .policy-toc-head { display: none; }
  .policy-toc a { flex: none; padding: .4375rem .9375rem; border-left: 0; border-radius: 99px; font-weight: 600; }
  .policy-toc a:hover { background: var(--canvas); }
  .policy-toc a.is-current { background: var(--navy); color: #fff; }
}


/* ============================================================
   34. PAGE: 404
   ============================================================ */

.nf-hero { min-height: calc(100vh - 220px); display: flex; align-items: center; }
.nf-hero > .container { width: 100%; }
.nf-code { margin: 0 0 1rem; font-family: var(--f-mono); font-size: .875rem; font-weight: 500; color: var(--red-dk); }
.nf-hero h1 { max-width: 12ch; }
.nf-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.nf-links p { width: 100%; margin: 0 0 .125rem; font-size: .875rem; color: var(--muted); }
.nf-links a { padding: .375rem .875rem; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); font-size: .875rem; font-weight: 500; color: var(--ink); transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.nf-links a:hover { border-color: var(--navy); color: var(--navy); }

.nf-term { width: 100%; max-width: 480px; justify-self: center; background: #0D1722; border-color: #0D1722; }
.nf-term .win-bar { background: #172230; border-bottom-color: rgba(255,255,255,.06); }
.nf-term .win-title { font-family: var(--f-mono); color: rgba(255,255,255,.5); }
.nf-term-body { padding: 1.25rem 1.375rem 1.5rem; font-family: var(--f-mono); font-size: .875rem; line-height: 1.5; color: #C7D2DC; }
.nf-line { margin: 0 0 .5rem; white-space: pre-wrap; word-break: break-word; }
.nf-line:last-child { margin-bottom: 0; }
.nf-prompt { color: var(--blue-lt); }
.nf-path { color: #FFD479; }
.nf-ok span:first-child { color: #3DDC84; }
.nf-bad { color: #FF8E96; }
.nf-bad span:first-child { color: #FF5F57; }
.nf-fix { color: #fff; }
.nf-fix span:first-child { color: var(--blue-lt); }
.nf-cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: #C7D2DC; }

@media (prefers-reduced-motion: no-preference) {
  .nf-term .nf-line { animation: nf-type 1ms linear both; }
  .nf-term .nf-line:nth-child(2) { animation-delay: .6s; }
  .nf-term .nf-line:nth-child(3) { animation-delay: 1s; }
  .nf-term .nf-line:nth-child(4) { animation-delay: 1.6s; }
  .nf-term .nf-line:nth-child(5) { animation-delay: 2.2s; }
  .nf-term .nf-line:nth-child(6) { animation-delay: 2.6s; }
  .nf-cursor { animation: nf-blink 1s steps(2, jump-none) infinite; }
}
@keyframes nf-type { from { visibility: hidden; } to { visibility: visible; } }
@keyframes nf-blink { 50% { opacity: 0; } }

/* Small phones: shorten the name so "Text me" keeps its label, and drop to
   an icon-only button only on the narrowest screens. */
@media (max-width: 430px) {
  .nav-logo-rest { display: none; }
}
@media (max-width: 360px) {
  .nav-text span:not(.nav-logo-rest) { display: none; }
  .nav-text { width: 44px; padding: 0; justify-content: center; }
}

/* Contact form: hidden field that only bots fill in, and the slot for the ticket-board captcha */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ts-slot:empty { display: none; }
.ts-slot { margin: .25rem 0 .75rem; }