/* --------------------------------------------------------------------------
   Self-hosted fonts. Generated by tools/get-fonts.py — re-run that script
   if you change weights. Paths are relative to this file (assets/css/).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/raleway-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/raleway-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/raleway-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: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/raleway-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/raleway-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/space-grotesk-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/space-grotesk-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-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;
}

/* ==========================================================================
   Geek Alert — site stylesheet
   --------------------------------------------------------------------------
   Everything visual lives in this one file. To re-brand the whole site,
   change the tokens in the :root block below and nothing else.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens  ← EDIT HERE to change colours, fonts, spacing site-wide
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand:        #e8541e;   /* Geek Alert orange */
  --brand-dark:   #c5410f;
  --brand-darker: #9c3208;
  --brand-hover:  #d14710;   /* button hover — brighter than --brand-dark, still 4.55:1 on white */
  --brand-tint:   #fff3ee;   /* very light orange wash */
  --brand-tint-2: #ffe4d8;

  /* Navy — sampled straight from the Geek Alert logo artwork.
     Used for every dark surface: top strip, "how it works", footer. */
  --navy:      #113343;
  --navy-2:    #1b4457;      /* raised panels on navy */
  --on-navy:   #b3c4ce;      /* body text on navy */
  --on-navy-2: #97aebe;      /* secondary text on navy — 5.8:1 on navy, 4.5:1 on navy-2 */

  /* Neutrals — the logo's navy as ink, on a cool off-white paper */
  --ink:      #113343;       /* headings / darkest (= logo navy) */
  --ink-soft: #3a5260;       /* body text */
  --muted:    #607380;       /* secondary text — 4.9:1 on white, 4.5:1 on the tint */
  --line:     #e3e8ea;       /* borders */
  --line-2:   #eff3f5;
  --paper:    #ffffff;
  --paper-2:  #f7f9fa;       /* off-white section background */

  /* Accent used sparingly for "secure / verified" signals */
  --green:      #17795e;
  --green-tint: #e8f5f0;

  /* Type */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Raleway", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Layout */
  --container: 1180px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(17,51,67,.05), 0 2px 8px rgba(17,51,67,.05);
  --shadow:    0 4px 12px rgba(17,51,67,.07), 0 12px 32px rgba(17,51,67,.08);
  --shadow-lg: 0 8px 24px rgba(17,51,67,.09), 0 24px 60px rgba(17,51,67,.12);
  --shadow-brand: 0 8px 24px rgba(232,84,30,.22);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* clears the sticky header on anchor jumps */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.2em; }
li { margin-bottom: .4em; }

strong { color: var(--ink); font-weight: 700; }

/* Visible focus for keyboard users only */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 22px;
}

.section { padding: clamp(60px, 8vw, 108px) 0; }
.section--tight { padding: clamp(48px, 6vw, 76px) 0; }
.section--paper2 { background: var(--paper-2); }
.section--tint  { background: var(--brand-tint); }

.section--ink {
  background: var(--navy);
  color: var(--on-navy);
}
.section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink a { color: #ffbf9f; }

.section-head {
  max-width: 660px;
  margin-bottom: clamp(34px, 4vw, 54px);
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p {
  font-size: 1.1rem;
  color: var(--muted);
  margin-bottom: 0;
}
.section--ink .section-head p { color: var(--on-navy-2); }

/* Small orange label that sits above a section heading */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin-bottom: .9em;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--brand);
  border-radius: 2px;
}
.section--ink .eyebrow { color: #ff9666; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 12px 18px;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

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

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 16px 26px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Background is --brand-dark, not --brand, on purpose.
   White on --brand (#e8541e) is 3.67:1, which fails the WCAG AA minimum of
   4.5:1 for text at this size. On --brand-dark (#c5410f) it's 5.08:1 and
   passes. --brand is still the site's accent everywhere else: icons, the
   eyebrow rule, the CTA band gradient, the logo. Only the button moved. */
.btn--primary {
  background: var(--brand-dark);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
/* Hover BRIGHTENS, it doesn't darken — the button should look like it lights
   up. How far it can brighten is capped by contrast: white on --brand (#e8541e)
   is only 3.67:1, so hovering all the way back to the brand orange would fail
   AA at the exact moment the pointer is on it. --brand-hover is the brightest
   step that still clears 4.5:1, and the warmer, wider glow does the rest of
   the work that colour alone can't. */
.btn--primary:hover {
  background: var(--brand-hover);
  color: #fff;
  box-shadow: 0 10px 30px rgba(232, 84, 30, .45);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: #fff; }

.btn--dark { background: var(--navy); color: #fff; }
/* Lightens on hover, for the same reason as --primary above. */
.btn--dark:hover { background: var(--navy-2); color: #fff; box-shadow: 0 8px 22px rgba(17, 51, 67, .3); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #fff; color: var(--brand-dark); }

.btn--onink {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.28);
}
.btn--onink:hover { border-color: #fff; color: #fff; }

/* Buttons keep their own colours inside a dark section.
   Without this, `.section--ink a` (specificity 0,1,1) outranks `.btn--light`
   and friends (0,1,0) and repaints every button label peach — which on a white
   `.btn--light` is 1.6:1 and effectively unreadable. Selectors here are 0,2,1
   so the button always wins. If you add a new .btn--* variant, add it here. */
.section--ink a.btn--primary { color: #fff; }
.section--ink a.btn--primary:hover { color: #fff; }
.section--ink a.btn--light   { color: var(--ink); }
.section--ink a.btn--light:hover { color: var(--brand-dark); }
.section--ink a.btn--ghost,
.section--ink a.btn--onink   { color: #fff; border-color: rgba(255,255,255,.28); }
.section--ink a.btn--ghost:hover,
.section--ink a.btn--onink:hover { color: #fff; border-color: #fff; }

.btn--sm { padding: 11px 18px; font-size: .92rem; }
.btn--block { width: 100%; }

.btn .arrow { transition: transform .18s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Plain text link with an arrow, used on cards */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--brand-dark);
  text-decoration: none;
}
.link-arrow .arrow { transition: transform .18s var(--ease); }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px rgba(17,51,67,.07);
}

/* Thin promo strip above the header */
.topbar {
  background: var(--navy);
  color: var(--on-navy);
  font-size: .85rem;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 26px;
  flex-wrap: wrap;
  min-height: 40px;
  padding-block: 7px;
  text-align: center;
}
.topbar b { color: #fff; font-weight: 700; }
.topbar a { color: #ffb08a; text-decoration: none; font-weight: 600; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar-sep { opacity: .3; }
/* On phones the strip collapses to just the phone number — the promise text
   is repeated in the trust bar a few hundred pixels further down anyway. */
@media (max-width: 720px) {
  .topbar-sep, .topbar__promise { display: none; }
  .topbar .container { min-height: 34px; padding-block: 5px; }
}

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 82px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: auto;
}
.brand-mark { height: 64px; width: auto; flex-shrink: 0; }
@media (max-width: 1040px) { .brand-mark { height: 52px; } }
/* align-items matters here. Left at the default `stretch`, both spans take the
   width of the widest one, so measuring them tells you nothing about whether
   the type actually lines up — they always report the same width. Every rule
   below that aligns the lockup sets align-items explicitly for that reason. */
.brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
/* The logo is a circular badge with no wordmark of its own, so the name is set
   in type beside it. Same lockup in the header and the footer. */
/* --- The wordmark -----------------------------------------------------------
   Two-tone: "GEEK" in ink, "ALERT" in brand orange. The colour is the memorable
   part, so it carries into the footer and the mobile drawer too — the name
   should never appear in one colour in one place and two in another.

   The slogan underneath is tracked out so its first and last letters sit exactly
   under the first and last letters of the name — GEEK ALERT and TECH MADE SIMPLE
   are the same width to within a tenth of a pixel at both sizes.

   The values are solved by measuring the rendered GLYPHS, not the boxes — see
   the note on .brand-text above. If you change either font-size, re-solve them;
   they do not scale linearly, because hinting quantises the glyph advances.

   Do not "correct" for the trailing letter-space with a negative margin-right.
   letter-spacing is added after every character including the last, but Chrome
   already trims that last one out of the box, so the box is the ink. Adding the
   margin as well over-corrects, and the footer lockup ends up sitting half a
   letter-space right of the badge above it. That was tried; this is the note
   that stops it being tried again.
   -------------------------------------------------------------------------- */
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.brand-name .alert { color: var(--brand-dark); }

.brand-tag {
  font-family: var(--font-display);
  font-size: .585rem;
  letter-spacing: .311em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  margin-top: 2px;
}
@media (max-width: 1040px) {
  .brand-name { font-size: 1.3rem; }
  .brand-tag  { font-size: .54rem; letter-spacing: .253em; }
}

/* Footer lockup — the knockout badge plus the wordmark, on the navy */
/* The footer is the one place the badge is a brand mark rather than a
   navigation aid, so it runs at 160px — two and a half times the header — and
   the lockup stacks and centres under it. Calmer than the header's inline
   version, and the extra letter-spacing suits the larger mark. */
.footer-brand .brand {
  display: flex;         /* block-level, so the auto margins below can centre it */
  width: max-content;    /* but only as wide as the badge — not a full-width
                            click target swallowing the dead space either side */
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.footer-brand .brand-mark { height: 160px; }
@media (max-width: 980px) { .footer-brand .brand-mark { height: 120px; } }
.footer-brand .brand-text { align-items: center; }
.footer-brand .brand-name {
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: .13em;
}
.footer-brand .brand-name .alert { color: #ff9666; } /* --brand-dark is 3.6:1 on navy */
.footer-brand .brand-tag {
  color: #97aebe;
  font-size: .56rem;
  letter-spacing: .362em;
  margin-top: 6px;
}
@media (max-width: 980px) {
  .footer-brand .brand-name { font-size: 1.06rem; }
  .footer-brand .brand-tag  { letter-spacing: .245em; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links > li { margin: 0; position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .97rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 10px 13px;
  border-radius: 9px;
  transition: background-color .15s var(--ease), color .15s var(--ease);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
}
.nav-link:hover,
.nav-link[aria-expanded="true"] { background: var(--brand-tint); color: var(--brand-dark); }
.nav-link[aria-current="page"] { color: var(--brand-dark); font-weight: 700; }

.nav-link .caret { transition: transform .18s var(--ease); }
.nav-link[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* Services dropdown */
/* Two columns from 8 services on. One column would run past the fold on a
   laptop; the grid keeps it to four rows. Collapses to one column on narrow
   viewports, though the mobile drawer takes over well before that. */
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  display: grid;
  grid-template-columns: repeat(2, minmax(272px, 1fr));
  gap: 2px;
  min-width: 560px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.nav-item.is-open .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* The panel sits a few pixels below the trigger, and that gap is enough for a
   moving pointer to land "outside" the menu and close it. This invisible strip
   bridges it. It only exists while the menu is open, so it can never block
   anything else in the header. Width and centring match the panel above. */
.nav-item--has-dropdown.is-open::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 560px;
  height: 14px;
}

@media (max-width: 640px) {
  .dropdown { grid-template-columns: 1fr; min-width: 280px; }
  .nav-item--has-dropdown.is-open::after { width: 280px; }
}

.dropdown a {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 11px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
}
.dropdown a:hover { background: var(--paper-2); }
.dropdown .d-icon { color: var(--brand); flex-shrink: 0; margin-top: 2px; }
.dropdown .d-title { font-family: var(--font-display); font-weight: 700; font-size: .95rem; display: block; }
.dropdown .d-desc { font-size: .82rem; color: var(--muted); display: block; line-height: 1.4; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: var(--radius-pill);
}
.nav-phone:hover { color: var(--brand-dark); background: var(--brand-tint); }
.nav-phone svg { color: var(--brand); }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle:hover { border-color: var(--ink); }

@media (max-width: 1040px) {
  .nav-links, .nav-phone { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav { min-height: 68px; }
}
@media (max-width: 420px) {
  .nav-actions .btn { display: none; }
  /* Header only. The footer lockup has the whole column to itself down there,
     so the slogan stays — it's the header bar that runs out of room. */
  .site-header .brand-tag { display: none; }
}

/* Mobile drawer */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(17,51,67,.55);
  backdrop-filter: blur(3px);
}
.mobile-nav.is-open { display: block; }

.mobile-nav__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(400px, 88vw);
  background: #fff;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: slideIn .24s var(--ease);
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a.m-link {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  padding: 13px 12px;
  border-radius: 11px;
}
.mobile-nav a.m-link:hover { background: var(--paper-2); }
.mobile-nav .m-group-title {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; padding: 16px 12px 6px;
}
.mobile-nav .m-sub { padding-left: 12px; }
.mobile-nav__foot { margin-top: auto; padding-top: 18px; display: grid; gap: 10px; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 88% -8%, var(--brand-tint-2) 0%, rgba(255,228,216,0) 62%),
    radial-gradient(700px 460px at 6% 108%, #fff6f1 0%, rgba(255,246,241,0) 60%),
    var(--paper);
  padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 7vw, 96px);
}

/* faint dotted grid, keeps the big white area from feeling empty */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(17,51,67,.075) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  pointer-events: none;
}

.hero .container { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 16px 8px 10px;
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}
.hero-badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px var(--green-tint);
}

.hero h1 { margin-bottom: .38em; }
.hero h1 em {
  font-style: normal;
  color: var(--brand);
  position: relative;
  white-space: nowrap;
}
/* hand-drawn style underline under the highlighted words */
.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.06em;
  height: .14em;
  background: var(--brand);
  opacity: .22;
  border-radius: .1em;
}

.hero-lede {
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  color: var(--muted);
  max-width: 34ch;
  margin-bottom: 30px;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.hero-points li {
  display: flex; align-items: center; gap: .5em;
  font-size: .93rem; font-weight: 600; color: var(--ink-soft);
  margin: 0;
}
.hero-points svg { color: var(--green); flex-shrink: 0; }

/* Price card that floats beside the headline */
.hero-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px;
  position: relative;
}
.hero-card::before {
  /* soft orange glow behind the card */
  content: "";
  position: absolute;
  inset: 14px -14px -18px 14px;
  background: linear-gradient(140deg, var(--brand) 0%, #ff9a4d 100%);
  border-radius: var(--radius-lg);
  z-index: -1;
  opacity: .16;
  filter: blur(2px);
}
.hero-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  margin: 0 0 3px;
}
.hero-card__sub { font-size: .87rem; color: var(--muted); margin: 0 0 18px; }

.rate {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper-2);
  margin-bottom: 10px;
}
.rate:last-of-type { margin-bottom: 18px; }
.rate--featured { background: var(--brand-tint); border-color: var(--brand-tint-2); }

.rate__icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--brand);
}
.rate__body { min-width: 0; }
.rate__name {
  font-family: var(--font-display); font-weight: 700; font-size: .97rem;
  color: var(--ink); display: block; margin-bottom: 1px;
}
.rate__price { font-size: .93rem; color: var(--ink-soft); }
.rate__price b { color: var(--brand-dark); font-size: 1.14rem; font-family: var(--font-display); }
.rate__note { font-size: .8rem; color: var(--muted); display: block; margin-top: 3px; }

.hero-card__foot {
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
  margin: 12px 0 0;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   7. Trust bar
   -------------------------------------------------------------------------- */
.trustbar { border-block: 1px solid var(--line); background: var(--paper-2); }
.trustbar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
.trustbar__item {
  background: var(--paper-2);
  padding: 26px 22px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.trustbar__item svg { flex-shrink: 0; margin-top: -2px; }
.trustbar__item b {
  font-family: var(--font-display); display: block; font-size: .98rem;
  color: var(--ink); margin-bottom: 1px;
}
.trustbar__item span { font-size: .87rem; color: var(--muted); line-height: 1.5; display: block; }
@media (max-width: 900px) { .trustbar__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trustbar__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   8. Cards & grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Service card */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
a.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--brand-tint-2);
}
/* Icon tile. The icons are two-tone (navy line work + an orange accent) so the
   tile tints on hover rather than inverting — inverting would lose the accent. */
.card__icon {
  width: 58px; height: 58px;
  border-radius: 16px;
  background: var(--brand-tint);
  display: grid; place-items: center;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
a.card:hover .card__icon { background: var(--brand-tint-2); transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  a.card:hover .card__icon { transform: none; }
}
.card h3 { margin: 0; font-size: 1.12rem; }
.card p { font-size: .93rem; color: var(--muted); margin: 0; }
.card .link-arrow { margin-top: auto; padding-top: 6px; }

/* --------------------------------------------------------------------------
   9. How it works
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

.step {
  position: relative;
  padding: 30px 26px;
  border-radius: var(--radius-lg);
  background: var(--navy-2);
  border: 1px solid rgba(255,255,255,.07);
}
.step__num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: #ff8a4c /* not --brand: that was 2.84:1 on the navy panel, this is 4.5:1 */;
  margin-bottom: 14px;
  display: block;
}
.step h3 { font-size: 1.22rem; margin-bottom: .4em; }
.step p { font-size: .95rem; color: var(--on-navy-2); margin: 0; }

/* --------------------------------------------------------------------------
   10. Pricing
   -------------------------------------------------------------------------- */
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 760px) { .price-grid { grid-template-columns: 1fr; } }

.price-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card--featured {
  border-color: var(--brand);
  box-shadow: var(--shadow-brand);
}
.price-card__flag {
  position: absolute;
  top: -13px; left: clamp(26px, 3vw, 36px);
  background: var(--brand-dark);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}
.price-card h3 { font-size: 1.45rem; margin-bottom: .25em; }
.price-card__intro { color: var(--muted); font-size: .95rem; margin-bottom: 22px; }

.price-amount {
  display: flex;
  align-items: baseline;
  gap: .3em;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px dashed var(--line);
}
.price-amount .num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.5vw, 3.4rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -.03em;
}
.price-amount .unit { font-size: 1rem; color: var(--muted); font-weight: 600; }
.price-amount .then {
  width: 100%;
  font-size: .9rem;
  color: var(--muted);
  margin-top: 8px;
}
.price-amount .then b { color: var(--ink); }

.tick-list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 11px; }
.tick-list li {
  display: flex; align-items: flex-start; gap: .65em;
  font-size: .95rem; margin: 0; color: var(--ink-soft);
}
.tick-list svg { color: var(--green); flex-shrink: 0; margin-top: 4px; }

.price-card .btn { margin-top: auto; }

.price-fineprint {
  margin-top: 22px;
  font-size: .85rem;
  color: var(--muted);
  text-align: center;
  max-width: 70ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   11. Why us / split feature
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.reason-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.reason-list li { display: flex; gap: 15px; margin: 0; }
.reason-list .r-icon {
  width: 50px; height: 50px; flex-shrink: 0;
  border-radius: 14px;
  background: var(--brand-tint);
  display: grid; place-items: center;
}
.reason-list b {
  font-family: var(--font-display); font-size: 1.04rem;
  display: block; margin-bottom: 2px;
}
.reason-list span { font-size: .94rem; color: var(--muted); }
/* --muted is for light backgrounds. On a dark section the list needs the navy
   tokens instead, or it lands at 3.3:1. */
.section--ink .reason-list span { color: var(--on-navy); }
.section--ink .reason-list b { color: #fff; }

/* Stat tiles */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.stat .n {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
  letter-spacing: -.02em;
  display: block;
  margin-bottom: 6px;
}
.stat .l { font-size: .9rem; color: var(--muted); line-height: 1.45; display: block; }

/* --------------------------------------------------------------------------
   12. Testimonials
   -------------------------------------------------------------------------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; } }

.quote {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.quote__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quote__stars { display: flex; gap: 2px; color: #f5a623; }
.quote__via {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; color: var(--muted);
  flex-shrink: 0;
}
.quote blockquote {
  margin: 0;
  font-size: 1.02rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.quote figcaption {
  margin-top: auto;
  padding-top: 6px;
  display: flex; align-items: center; gap: 11px;
  border-top: 1px solid var(--line-2);
}
.quote .avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-dark);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  flex-shrink: 0;
}
.quote .who b { display: block; font-size: .94rem; font-family: var(--font-display); }
.quote .who span { font-size: .82rem; color: var(--muted); }

/* The Google rating badge under the testimonials heading. It's a link, so it
   gets the same lift-on-hover treatment as the cards elsewhere on the site. */
.g-rating {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 11px 22px 11px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.g-rating:hover,
.g-rating:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 8px 22px rgba(17, 51, 67, .09);
  transform: translateY(-1px);
}
.g-rating__score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink);
}
.g-rating__stars { display: flex; gap: 2px; color: #f5a623; }
.g-rating__text { font-size: .88rem; color: var(--muted); }
.g-rating__text b { color: var(--ink); font-weight: 600; }

/* On the narrowest phones the badge would push the page sideways, so it
   tightens up. The score and the stars still say everything on their own. */
@media (max-width: 430px) {
  .g-rating { gap: 9px; padding: 10px 18px 10px 14px; }
  .g-rating__text { display: none; }
}

/* Marks a block that Ethan still has to fill in with real content.
   Delete the `is-placeholder` class once real copy is in. */
.is-placeholder {
  position: relative;
  border-style: dashed !important;
  border-color: #d9b8a6 !important;
  background: repeating-linear-gradient(45deg, #fffaf7, #fffaf7 12px, #fff4ec 12px, #fff4ec 24px);
}
.is-placeholder::after {
  content: "PLACEHOLDER — replace with a real review";
  position: absolute;
  top: 10px; right: 10px;
  font-family: var(--font-display);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #b4643c;
  background: #ffe9dd;
  padding: 4px 8px;
  border-radius: 5px;
}

/* --------------------------------------------------------------------------
   12b. Note card & numbered steps  (used by the service pages)
   -------------------------------------------------------------------------- */

/* A single important aside — the "stop, don't pay the ransom" kind. Amber
   rather than red: it should read as "read this carefully", not as an error. */
.note-card {
  background: #fff8ed;
  border: 1px solid #f0d9b5;
  border-left: 4px solid #c98a1f;
  border-radius: var(--radius);
  padding: 20px 22px;
  color: var(--ink-soft);
}
.note-card p { font-size: .99rem; line-height: 1.6; }
.note-card b { color: var(--ink); }

/* Numbered process list. The counter is drawn rather than using the default
   marker so it can sit in a tinted disc and align with the text. */
.step-list {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}
.step-list li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.6;
}
.step-list li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -1px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-darker);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  display: grid;
  place-items: center;
}
.step-list li b { color: var(--ink); }

/* --------------------------------------------------------------------------
   12c. Large logo placements
   -------------------------------------------------------------------------- */

/* A 404 is a dead end. A large mark above it turns the page from an error into
   a branded moment, and it's the one page with room to spare. */
.notfound__mark {
  height: 104px;
  width: auto;
  margin: 0 auto 22px;
  display: block;
}
@media (max-width: 640px) { .notfound__mark { height: 78px; } }

/* A single oversized badge, barely there, behind the CTA band. Brand presence
   at scale without competing with the heading — it reads as texture, not as a
   logo you're meant to look at. Sits above the dot pattern but below the text.
   aria-hidden and pointer-events:none: it is decoration, nothing more. */
.cta-band .cta-band__mark {
  position: absolute;
  right: -34px;
  bottom: -46px;
  width: 260px;
  opacity: .09;
  pointer-events: none;
  user-select: none;
}
.cta-band > *:not(.cta-band__mark) { position: relative; z-index: 1; }
@media (max-width: 720px) { .cta-band .cta-band__mark { width: 180px; right: -40px; bottom: -40px; } }

/* --------------------------------------------------------------------------
   13. Service areas
   -------------------------------------------------------------------------- */
.area-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}
.area-cloud li { margin: 0; }
.area-cloud a {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--line);
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  transition: all .16s var(--ease);
}
.area-cloud a:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
  background: var(--brand-tint);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   14. Tips / blog teaser
   -------------------------------------------------------------------------- */
.post {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post__thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--brand-tint) 0%, var(--brand-tint-2) 100%);
  display: grid; place-items: center;
  color: var(--brand);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.post__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--ease);
}
.post:hover .post__thumb img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .post__thumb img, .post:hover .post__thumb img { transition: none; transform: none; }
}
.post__body { padding: 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.post__meta {
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--brand-dark);
}
.post h3 { font-size: 1.08rem; margin: 0; }
.post p { font-size: .9rem; color: var(--muted); margin: 0; }
.post .link-arrow { margin-top: auto; padding-top: 8px; }

/* --------------------------------------------------------------------------
   15. FAQ accordion (native <details>, no JS required)
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 12px; max-width: 840px; margin-inline: auto; }

.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.faq details[open] { border-color: var(--brand-tint-2); box-shadow: var(--shadow-sm); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand-dark); }

.faq summary .plus {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-dark);
  display: grid; place-items: center;
  transition: transform .22s var(--ease), background-color .18s var(--ease);
}
.faq details[open] summary .plus {
  transform: rotate(45deg);
  background: var(--brand);
  color: #fff;
}
.faq .faq__answer { padding: 0 22px 22px; color: var(--muted); font-size: .97rem; }

/* --------------------------------------------------------------------------
   16. Final CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  /* Every stop has to clear 4.5:1 against white, because the body copy sits on
     this band at 17px. The midpoint is --brand-dark (5.08:1). The final stop
     used to be --brand, which is only 3.67:1 on its own — measured against the
     real glyphs it bottomed out at 4.44:1 at phone width, just under AA. It's
     now --brand-hover (4.55:1), so the band cannot dip below AA anywhere.
     Measured worst case after the change: 4.89:1 desktop, 4.83:1 at 480px. */
  background: linear-gradient(125deg, var(--brand-darker) 0%, var(--brand-dark) 55%, var(--brand-hover) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 62px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .55;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; margin-bottom: .4em; }
.cta-band p {
  color: rgba(255,255,255,.9);
  font-size: 1.08rem;
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: 28px;
}
.cta-band .btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-band .cta-note { margin-top: 20px; margin-bottom: 0; font-size: .88rem; color: rgba(255,255,255,.82); }

/* --------------------------------------------------------------------------
   17. Newsletter
   -------------------------------------------------------------------------- */
.newsletter-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 480px;
}
.newsletter-form input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 14px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}
.newsletter-form input::placeholder { color: #a3988f; }
.newsletter-form input:focus { border-color: var(--brand); }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy);
  color: var(--on-navy-2);
  padding: clamp(52px, 6vw, 80px) 0 0;
  font-size: .93rem;
}
.site-footer h3 {
  color: #fff;
  font-size: .8rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
  gap: 40px;
  padding-bottom: 48px;
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-about { margin: 18px 0; max-width: 40ch; line-height: 1.65; }

/* --- Footer links -----------------------------------------------------------
   Every link here gets a colour change AND an underline on hover. Colour alone
   is easy to miss on a dark background, and it's the only cue for anyone who
   can't distinguish the two shades.

   Keep these selectors at one class deep. An earlier version used
   `.site-footer a:not(.btn):not(.footer-links a)` — specificity (0,3,2) — which
   outranked every component rule below AND their :hover states, so the whole
   footer turned peach and nothing hovered at all.
   -------------------------------------------------------------------------- */

.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer-links a { color: var(--on-navy-2); text-decoration: none; transition: color .15s var(--ease); }
.footer-links a:hover,
.footer-links a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--brand);
}

/* Links inside footer prose — "read the guides" and anything similar. Without
   a rule they inherit the global link colour, and --brand-dark on navy is
   2.62:1. Scoped to prose so it can't reach the component links below. */
.site-footer p a,
.site-footer .footer-about a { color: #ffbf9f; text-underline-offset: 3px; }
.site-footer p a:hover,
.site-footer p a:focus-visible,
.site-footer .footer-about a:hover {
  color: #fff;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--brand);
}

.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.footer-contact li { display: flex; gap: 11px; align-items: flex-start; margin: 0; }
.footer-contact svg { color: var(--brand); flex-shrink: 0; margin-top: 3px; }
.footer-contact a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: color .15s var(--ease);
}
/* #ff9666 rather than --brand: the brand orange is 3.5:1 on navy and would
   fail AA the moment the pointer lands on it. This is 5.6:1. */
.footer-contact a:hover,
.footer-contact a:focus-visible {
  color: #ff9666;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 24px 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 26px;
  flex-wrap: wrap;
  font-size: .87rem;
}
.footer-bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom a { color: var(--on-navy-2); text-decoration: none; transition: color .15s var(--ease); }
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--brand);
}

/* Sticky call bar on phones — the single highest-converting element on a
   local service site. Hidden on desktop. */
.callbar { display: none; }
@media (max-width: 640px) {
  .callbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .callbar .btn { padding: 14px 12px; font-size: .95rem; }
  body { padding-bottom: 76px; }
}

/* --------------------------------------------------------------------------
   19. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Reveal-on-scroll (progressive: content is visible if JS never runs) */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   20. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .topbar, .callbar, .cta-band, .mobile-nav { display: none !important; }
  body { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* ==========================================================================
   21. Inner pages
   Everything below this line is used by the pages other than the homepage.
   ========================================================================== */

/* --- Breadcrumbs ---------------------------------------------------------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45em;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  font-size: .85rem;
  color: var(--muted);
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: .45em; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand-dark); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.crumbs .sep { opacity: .45; }

/* --- Compact hero for inner pages ---------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 420px at 88% -20%, var(--brand-tint-2) 0%, rgba(255,228,216,0) 62%),
    var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding: clamp(30px, 4vw, 46px) 0 clamp(44px, 6vw, 72px);
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(17,51,67,.06) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(2.05rem, 4.2vw, 3.1rem); margin-bottom: .4em; }
.page-hero__lede {
  font-size: clamp(1.03rem, 1.4vw, 1.18rem);
  color: var(--muted);
  max-width: 60ch;
  margin-bottom: 26px;
}
.page-hero__inner { max-width: 780px; }
.page-hero .hero-cta { margin-bottom: 22px; }

/* --- Long-form text (legal pages, articles) ------------------------------- */
.prose { max-width: 74ch; }
.prose h2 {
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  margin-top: 2em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.12rem; margin-top: 1.7em; }
.prose p, .prose li { font-size: 1rem; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li { margin-bottom: .55em; }
.prose .clause {
  display: block;
  margin-bottom: 1em;
}
.prose .clause b { color: var(--ink); margin-right: .35em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose a { font-weight: 600; }

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: .89rem;
  color: var(--muted);
  margin-bottom: 34px;
}
.doc-meta b { color: var(--ink); }

/* Small callout box inside prose */
.callout {
  border-left: 4px solid var(--brand);
  background: var(--brand-tint);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin: 1.6em 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--brand-darker); }

/* --- Two-column layout with a sticky sidebar ------------------------------ */
.with-aside {
  display: grid;
  grid-template-columns: minmax(0,1fr) 330px;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 980px) { .with-aside { grid-template-columns: 1fr; } }

.aside-card {
  position: sticky;
  top: 108px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 980px) { .aside-card { position: static; } }
.aside-card h3 { font-size: 1.12rem; margin-bottom: .5em; }
.aside-card p { font-size: .93rem; color: var(--muted); }
.aside-card .btn { margin-top: 4px; }
.aside-card hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

/* --- Checklist of problems / symptoms ------------------------------------- */
.fix-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
}
@media (max-width: 620px) { .fix-list { grid-template-columns: 1fr; } }
.fix-list li {
  display: flex;
  align-items: flex-start;
  gap: .7em;
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: .98rem;
}
.fix-list svg { color: var(--brand); flex-shrink: 0; margin-top: 4px; }

/* --- Numbered process list ------------------------------------------------ */
.process { list-style: none; padding: 0; margin: 0; counter-reset: p; display: grid; gap: 18px; }
.process li {
  counter-increment: p;
  display: flex;
  gap: 18px;
  margin: 0;
  align-items: flex-start;
}
.process li::before {
  content: counter(p);
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-family: var(--font-display);
  font-weight: 700;
  display: grid; place-items: center;
  font-size: 1rem;
}
.process b { display: block; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 2px; }
.process span { color: var(--muted); font-size: .95rem; }

/* --- Rate table ----------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rate-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: .97rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.rate-table th, .rate-table td {
  text-align: left;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.rate-table thead th {
  background: var(--paper-2);
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--line);
}
.rate-table tbody tr:last-child td { border-bottom: 0; }
.rate-table td b { color: var(--ink); font-family: var(--font-display); }
.rate-table .amt { white-space: nowrap; font-family: var(--font-display); font-weight: 700; color: var(--brand-dark); }

/* --- Contact ------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(30px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
/* Grid children default to min-width:auto, which lets a wide form control push
   the whole column past the viewport. This pins them to the track instead. */
.contact-grid > *, .with-aside > *, .split > * { min-width: 0; }

.contact-methods { display: grid; gap: 14px; margin-bottom: 28px; min-width: 0; }
.contact-method {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
a.contact-method:hover { border-color: var(--brand); transform: translateY(-2px); }
.contact-method .c-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand-dark);
  display: grid; place-items: center;
}
.contact-method > span:last-child { min-width: 0; }
/* Long unbreakable strings (the email address) would otherwise set the column's
   minimum width and push the grid past a narrow viewport. */
.contact-method b { display: block; font-family: var(--font-display); font-size: 1.04rem; overflow-wrap: anywhere; }
.contact-method span { font-size: .92rem; color: var(--muted); }

.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  color: var(--ink);
}
.field .hint { font-size: .82rem; color: var(--muted); font-weight: 400; }
.field input, .field textarea, .field select {
  max-width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brand);
  outline: 2px solid rgba(232,84,30,.18);
  outline-offset: 0;
}
.field input::placeholder, .field textarea::placeholder { color: #a2b0ba; }
.form-note {
  font-size: .88rem;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-2);
  color: var(--brand-darker);
}

/* --- Service areas -------------------------------------------------------- */
.area-region {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
}
.area-region h3 { font-size: 1.16rem; margin-bottom: .35em; }
.area-region p { font-size: .93rem; color: var(--muted); margin-bottom: 14px; }
.area-region ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.area-region li { margin: 0; }
.area-region a, .area-region span.flat {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: .85rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.area-region a:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); }

.fact-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 30px;
}
@media (max-width: 700px) { .fact-strip { grid-template-columns: 1fr; } }
.fact-strip div { background: #fff; padding: 18px 20px; }
.fact-strip b { display: block; font-family: var(--font-display); color: var(--ink); font-size: 1.02rem; }
.fact-strip span { font-size: .87rem; color: var(--muted); }

/* --- Article ------------------------------------------------------------- */
.article-head { max-width: 74ch; }

/* Article hero — headline on the left, illustration on the right */
.article-hero {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.article-hero > * { min-width: 0; }
.article-hero__art {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff;
}
.article-hero__art img { width: 100%; height: auto; display: block; }
@media (max-width: 880px) {
  .article-hero { grid-template-columns: 1fr; gap: 28px; }
  .article-hero__art { order: -1; }
}
.article-meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: .85rem; color: var(--muted); margin-bottom: 18px;
}
.article-meta .tag {
  font-family: var(--font-display); font-weight: 700;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-dark);
}
.article-toc {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 34px;
}
.article-toc b {
  display: block; font-family: var(--font-display);
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.article-toc ol { margin: 0; padding-left: 1.2em; }
.article-toc li { margin-bottom: .35em; font-size: .95rem; }

/* --- 404 ------------------------------------------------------------------ */
.notfound { text-align: center; padding: clamp(60px, 10vw, 130px) 0; }
.notfound .code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--brand);
  letter-spacing: -.04em;
  margin-bottom: .1em;
}
.notfound .btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* Inline code, used in the guides */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .12em .4em;
  color: var(--ink);
  word-break: break-word;
}
.prose code { white-space: nowrap; }