/* CT-Unlimited design tokens. Colour is derived from the logo master
   (Logos/Final/CT-Unlimited.svg): its cyan-to-navy gradient, its neutral gray/black
   gradient, its white fills and its navy keyline. Light theme uses the middle of the
   blue gradient for actions; dark theme sits at the navy end and acts in cyan.
   Ratios are WCAG 2.x contrast against the surfaces named.
   Theme resolution: :root = light; dark applies via OS preference unless the
   visitor chose light, or via an explicit data-theme="dark" choice. */

:root {
  color-scheme: light;

  /* Brand (logo master values; identity use, not UI roles) */
  --brand-cyan:     #26A9E0; /* blue gradient start, C/T top; 2.68:1 on white: never text or controls on light */
  --brand-blue:     #1D6BB4; /* blue gradient midpoint */
  --brand-royal:    #2551A1; /* blue gradient lower third */
  --brand-navy:     #2B388F; /* blue gradient end and the logo keyline */
  --brand-gray:     #58595B; /* gray arch gradient start */
  --brand-silver:   #9FA1A4; /* J/U radial highlight */
  --brand-black:    #231F20; /* gray gradient end */
  --brand-gradient: linear-gradient(135deg, #26A9E0 0%, #1F89C9 25%, #1D6BB4 45%, #2551A1 70%, #2B388F 100%);

  /* Surfaces (light): logo cyan over white */
  --bg-page:        #FFFFFF;
  --bg-tint:        #F4FBFD; /* cyan 5% */
  --bg-band:        #E9F6FC; /* cyan 10% */
  --bg-raised:      #FFFFFF;
  --bg-toggle:      #E5F5FB; /* cyan 12% */

  /* Ink (light): the logo's own black and grays */
  --text-strong:    #231F20; /* brand black. 16.3 white / 14.8 band */
  --text-body:      #58595B; /* brand gray. 7.0 white / 6.4 band */
  --text-muted:     #6B6C6F; /* gray-arch ramp. 5.3 white / 4.8 band / 4.6 toggle */
  --text-placeholder:#6B6C6F;/* 5.3 on raised */
  --text-on-accent: #FFFFFF; /* 5.5 accent / 7.6 hover / 10.2 active */

  /* Accent (light): along the logo's blue gradient */
  --accent:         #1D6BB4; /* brand blue. Buttons, selected tabs. 5.5 white / 5.0 band */
  --accent-hover:   #2551A1; /* brand royal. 7.6 white */
  --accent-active:  #2B388F; /* brand navy. pressed */
  --accent-text:    #1D6BB4; /* links, headline accent, prices. 5.5 white / 5.3 tint / 5.0 band */
  --eyebrow:        #2B388F; /* brand navy (keyline). 10.2 white / 9.2 band */
  --wordmark:       #2B388F; /* typeset lockup wordmark: the master's keyline colour */

  /* Lines */
  --rule:           #DFEAF4; /* blue 14%, decorative */
  --rule-strong:    #C4D9EC; /* blue 26%, decorative dividers */
  --border-control: #808285; /* gray ramp. 3.9 white / 3.5 band (1.4.11) */
  --focus-ring:     #2B388F; /* 10.2 white / 9.2 band; offset ring sits on the surface */

  /* Status */
  --danger:         #C0262D; /* 5.9 white / 5.4 band */
  --success:        #12733A; /* 5.9 white / 5.4 band */

  /* Type */
  --font-display: "Manrope", "Inter", system-ui, sans-serif;  /* 800 headings, 700 sub-heads */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display-xl: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);   /* home H1, mockup ~84px */
  --fs-display-l:  clamp(2.375rem, 1.5rem + 3.2vw, 4rem);     /* inner-page H1, mockup 52-70px (normalised) */
  --fs-h2:         clamp(1.875rem, 1.3rem + 2vw, 3rem);       /* section H2, mockup ~48px */
  --fs-h3:         clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); /* path titles, mockup ~26px */
  --fs-h4:         1.1875rem;                                 /* row/item titles, mockup ~19-20px */
  --fs-lede:       clamp(1.125rem, 1rem + 0.6vw, 1.625rem);   /* hero sub-copy, mockup 26-30px */
  --fs-body:       1.0625rem;
  --fs-small:      0.9375rem;
  --fs-micro:      0.8125rem;
  --fs-eyebrow:    0.8125rem;   /* uppercase, tracking below */
  --fs-price:      clamp(1.75rem, 1.4rem + 1vw, 2.25rem);

  --tracking-display: -0.035em;
  --tracking-h2:      -0.03em;
  --tracking-eyebrow:  0.28em;
  --lh-display: 1.04;
  --lh-heading: 1.15;
  --lh-body:    1.55;

  /* Space (4px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --section-pad: clamp(48px, 6vw, 96px);
  --container: 1360px;
  --gutter: clamp(16px, 5vw, 48px);
  /* Header badge: 180px wide is the legibility floor for the logo, at every viewport width.
     It hangs from the bar, --brand-top below the bar's top edge, and overhangs the content below
     by --brand-hang. --brand-h is the badge's height at that width (617:587 master, rounded up). */
  --brand-w: 180px;
  --brand-h: 172px;
  --brand-top: 8px;
  --badge-shadow: drop-shadow(0 3px 6px rgb(10 20 60 / 0.22)); /* follows the artwork's own silhouette */
  --brand-hang: calc(var(--brand-top) + var(--brand-h) - var(--header-h));
  --brand-clear: calc(var(--brand-hang) + var(--space-4));
  --header-h: 112px;          /* header bar height; site.css sets 72px below 1280px and 64px on phones */

  /* Radii */
  --radius-sm: 6px;   /* inputs (mockup ~8) */
  --radius-md: 10px;  /* buttons, radio cards, segmented control */
  --radius-lg: 16px;  /* form card */
  --radius-pill: 999px; /* theme toggle */

  /* Elevation (light only; dark uses borders + surface steps) */
  --shadow-1: 0 1px 2px rgb(10 20 60 / 0.06), 0 6px 18px rgb(10 40 120 / 0.06);
  --shadow-2: 0 2px 4px rgb(10 20 60 / 0.05), 0 18px 48px rgb(10 40 120 / 0.08);

  --dur-fast: 120ms;
  --dur-base: 180ms;
}

/* Dark values: logo navy over black for surfaces, logo cyan for action, logo white/silver for ink.
   Ratios: strong 17.9 page / 16.6 raised; body 11.5 raised; muted 7.4 page / 6.9 raised;
   placeholder 5.3 raised; accent-text 7.2 page / 6.6 raised; eyebrow 9.7+; on-accent 7.2 accent /
   8.9 hover / 5.6 active; border-control 3.9 page / 3.6 raised; focus 10.4+.
   Declared once per selector below. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-page: #0A0D22; --bg-tint: #0D112B; --bg-band: #101536; --bg-raised: #101536; --bg-toggle: #12183C;
    --text-strong: #F5F7FA; --text-body: #CFD0D2; --text-muted: #9FA1A4; --text-placeholder: #8A8C8F; --text-on-accent: #0A0D22;
    --accent: #26A9E0; --accent-hover: #56BCE7; --accent-active: #2195C5; --accent-text: #26A9E0; --eyebrow: #78CAEC; --wordmark: #FFFFFF;
    --rule: #161C48; --rule-strong: #2B388F; --border-control: #77787B; --focus-ring: #88D0EE;
    --danger: #FF8A8A; --success: #5FD38D;
    --shadow-1: none; --shadow-2: none; --badge-shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-page: #0A0D22; --bg-tint: #0D112B; --bg-band: #101536; --bg-raised: #101536; --bg-toggle: #12183C;
  --text-strong: #F5F7FA; --text-body: #CFD0D2; --text-muted: #9FA1A4; --text-placeholder: #8A8C8F; --text-on-accent: #0A0D22;
  --accent: #26A9E0; --accent-hover: #56BCE7; --accent-active: #2195C5; --accent-text: #26A9E0; --eyebrow: #78CAEC; --wordmark: #FFFFFF;
  --rule: #161C48; --rule-strong: #2B388F; --border-control: #77787B; --focus-ring: #88D0EE;
  --danger: #FF8A8A; --success: #5FD38D;
  --shadow-1: none; --shadow-2: none; --badge-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}

@font-face{font-family:"Inter";src:url("/assets/fonts/inter.0bff703c4e.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("/assets/fonts/manrope.e766140149.woff2") format("woff2");font-weight:700 800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");size-adjust:107.59%;ascent-override:90.04%;descent-override:22.42%;line-gap-override:0.00%}
@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");size-adjust:110.46%;ascent-override:96.51%;descent-override:27.16%;line-gap-override:0.00%}
:root{--font-display:"Manrope","Manrope Fallback","Inter",system-ui,sans-serif;--font-body:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",sans-serif}

/* CT-Unlimited site styles. Values come from tokens.css; nothing here hard-codes a colour.
   Build order (tools/build-assets): tokens.css, generated @font-face + font stacks,
   site.css, then assets/css/pages/*.css alphabetically. */

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

html {
  background: var(--bg-tint);
  /* Reserve the scrollbar's width on every page: pages short enough to need no scrollbar would otherwise
     sit half a scrollbar width off the pages that do, and centered content would jump between them. */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-heading);
  text-wrap: balance;
}
h1 { font-weight: 800; font-size: var(--fs-display-l); letter-spacing: var(--tracking-display); line-height: var(--lh-display); }
h2 { font-weight: 800; font-size: var(--fs-h2); letter-spacing: var(--tracking-h2); }
h3 { font-weight: 700; font-size: var(--fs-h3); letter-spacing: -0.02em; }
h4 { font-weight: 700; font-size: var(--fs-h4); letter-spacing: -0.01em; }
p { margin: 0; }
main { flex: 1; display: flex; flex-direction: column; }
/* The last section of main takes the spare height of a short page, so its own surface meets the footer. */
main > :last-child { flex: 1; }
main:focus { outline: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-text); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.accent { color: var(--accent-text); }
.tnum { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The head script adds .js to <html>; scripted-only controls stay hidden until then. */

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--accent); color: var(--text-on-accent); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

/* ---------- Layout primitives ---------- */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
/* The page's first block reserves the room the hung header badge overhangs into. */
main > :first-child { --first-clear: var(--brand-clear); }
.section { padding-block: max(var(--section-pad), var(--first-clear, 0px)) var(--section-pad); background: var(--bg-page); }
.section--tint { background: var(--bg-tint); }
.section--band { background: var(--bg-band); }

.eyebrow {
  margin: 0 0 var(--space-4);
  font: 500 var(--fs-eyebrow)/1.4 var(--font-body);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--eyebrow);
}

.section-head { margin-bottom: var(--space-7); }
.section-head h2 { max-width: 40ch; }

.icon { width: 1.5em; height: 1.5em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: 56px; padding: var(--space-3) var(--space-6);
  border: 0; border-radius: var(--radius-md);
  background: var(--accent); color: var(--text-on-accent);
  font: 500 1.125rem/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-base) ease, transform var(--dur-fast) ease;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { background: var(--accent-active); transform: translateY(1px); }
.btn .icon { width: 1.25em; height: 1.25em; transition: transform var(--dur-base) ease; }
.btn:hover .icon { transform: translateX(3px); }
.btn--sm { min-height: 44px; padding: var(--space-2) var(--space-5); font-size: 1rem; }

.textlink {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 40px; padding-block: var(--space-1);
  color: var(--accent-text); font-weight: 500; text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-base) ease;
}
.textlink--rule { border-bottom-color: var(--accent-text); }
.textlink:hover { border-bottom-color: currentColor; }
.textlink .icon { width: 1.125em; height: 1.125em; transition: transform var(--dur-base) ease; }
.textlink:hover .icon { transform: translateX(3px); }

/* ---------- Header and navigation ---------- */

.site-header { position: relative; z-index: 50; background: var(--bg-page); border-bottom: 1px solid var(--rule); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: var(--header-h); }

/* Logo: the badge image alone (its alt text is the link name), never narrower than --brand-w.
   In the header the badge is hung from the bar: the link reserves the badge's width inside the bar,
   and the image is taken out of flow so it overhangs the bar onto the content below. Content that
   follows the header reserves that overhang (--brand-clear, see the first-child rules in Layout). */
.brand { display: block; flex: none; text-decoration: none; }
.brand img { display: block; width: var(--brand-w); max-width: none; height: auto; }
.brand:focus-visible { outline: none; }
.brand:focus-visible img { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.site-header .brand { position: relative; z-index: 2; align-self: stretch; width: var(--brand-w); }
.site-header .brand img {
  position: absolute; top: var(--brand-top); left: 0;
  filter: var(--badge-shadow);
}

.nav-panel { display: flex; align-items: center; gap: var(--space-6); }
.nav-list { display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.nav-link {
  display: inline-block; padding: var(--space-2) 2px; min-height: 40px;
  color: var(--text-strong); font-weight: 500; text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) ease;
}
.nav-link:hover { color: var(--accent-text); }
.nav-link[aria-current] { color: var(--accent-text); border-bottom-color: var(--accent-text); }
.nav-panel .nav-cta { display: inline-flex; }
.nav-social { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-width: 44px; min-height: 44px; color: var(--text-strong); text-decoration: none; }
.nav-social:hover { color: var(--accent-text); }
.nav-social:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nav-social .icon { width: 24px; height: 24px; }
.nav-social__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.menu-button {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; border: 1px solid var(--border-control); border-radius: var(--radius-md);
  background: var(--bg-raised); color: var(--text-strong); cursor: pointer;
}
.menu-button .icon { width: 24px; height: 24px; }
.menu-button [data-icon-close] { display: none; }
.menu-button[aria-expanded="true"] [data-icon-open] { display: none; }
.menu-button[aria-expanded="true"] [data-icon-close] { display: block; }

/* Theme toggle: two radios styled as a segmented pill */
.theme-toggle { display: none; margin: 0; padding: 4px; border: 0; border-radius: var(--radius-pill); background: var(--bg-toggle); }
.theme-toggle__option { position: relative; display: inline-flex; }
.theme-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.theme-toggle label {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  color: var(--text-muted); cursor: pointer;
  transition: background-color var(--dur-base) ease, color var(--dur-base) ease;
}
.theme-toggle label .icon { width: 20px; height: 20px; }
.theme-toggle input:checked + label { background: var(--bg-raised); color: var(--text-strong); box-shadow: var(--shadow-1); }
:root[data-theme="dark"] .theme-toggle input:checked + label { background: var(--accent); color: var(--text-on-accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle input:checked + label { background: var(--accent); color: var(--text-on-accent); }
}
.theme-toggle input:focus-visible + label { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.js .theme-toggle { display: inline-flex; }

/* Header modes. These queries are mirrored in assets/js/site.js and content/partials/logo.tmpl, and checked by
   TestHeaderQueriesAgree and TestPhoneQueriesAgree.
   WIDE  = min-width: 1280px: the full row, hung 180px badge, not sticky.
   MID   = 640px to 1279.98px: menu button + Call, hung badge, sticky bar (the badge scrolls away).
   PHONE = max-width: 639.98px, or a short coarse-pointer viewport below WIDE (a phone in landscape):
           menu button + Call, 48px symbol mark, sticky bar, nothing hangs. */
.nav-call, .header-call {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; color: var(--text-strong); font-weight: 500; text-decoration: none; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nav-call .icon, .header-call .icon, .nav-email .icon { width: 20px; height: 20px; color: var(--accent-text); }
.nav-call:hover, .header-call:hover, .nav-email:hover { color: var(--accent-text); }
.nav-call:focus-visible, .header-call:focus-visible, .nav-email:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nav-email, .header-call { display: none; }

@media (min-width: 1280px) {
  .nav-list .nav-item--contact { display: none; }
  /* The wrap is a safety net for text-only zoom; at 100% the row never needs it. */
  .nav-panel { gap: var(--space-4); flex-wrap: wrap; justify-content: flex-end; }
  .nav-link, .nav-cta { white-space: nowrap; }
  .nav-list { gap: var(--space-5); margin-right: var(--space-2); }
  .nav-call { padding-inline: var(--space-4) 0; border-left: 1px solid var(--rule-strong); min-height: 32px; }
}
@media (min-width: 1440px) {
  .nav-panel { gap: var(--space-5); }
  .nav-list { gap: var(--space-6); }
}

@media (max-width: 1279.98px) {
  :root { --header-h: 72px; }
  .js .site-header { position: sticky; top: 0; }
  /* The sticky bar keeps the menu button in reach; the hung badge scrolls away with the page
     (site.js feeds --brand-shift) instead of riding over content. Open menu or keyboard focus brings it back. */
  .js .site-header .brand img { transform: translateY(calc(-1 * var(--brand-shift, 0px))); }
  .js .site-header .brand:focus-visible img, .js.nav-open .site-header .brand img { transform: none; }
  .site-header__bar { flex-wrap: wrap; row-gap: 0; gap: var(--space-3); }
  .header-call {
    display: inline-flex; margin-left: auto; min-height: 48px; padding-inline: var(--space-4);
    border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--bg-raised);
  }
  .js .menu-button { display: inline-flex; }
  .nav-panel { order: 3; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: var(--space-4); padding-block: var(--space-4) var(--space-5); }
  .js .nav-panel { display: none; }
  .js .nav-panel[data-open] {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    padding-inline: var(--gutter); padding-top: calc(var(--brand-hang) + var(--space-4)); background: var(--bg-page);
    border-bottom: 1px solid var(--rule); box-shadow: var(--shadow-2);
  }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link { display: flex; align-items: center; min-height: 48px; padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
  .nav-link[aria-current] { border-bottom-color: var(--accent-text); }
  /* Contact is in the list directly above, so Let's talk would repeat it. */
  .nav-panel .nav-cta { display: none; }
  .nav-call, .nav-email, .nav-social { display: flex; justify-content: flex-start; min-height: 48px; gap: var(--space-3); }
  .nav-email { align-items: center; color: var(--text-strong); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
  .nav-social__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .nav-social .icon { width: 20px; height: 20px; color: var(--accent-text); }
  .nav-panel .theme-toggle { align-self: flex-start; }
}

@media (max-width: 639.98px), (max-height: 499.98px) and (max-width: 1279.98px) and (pointer: coarse) {
  :root { --header-h: 64px; --brand-hang: 0px; --brand-clear: 0px; }
  /* MID shows the number on the Call button; PHONE shows only "Call" (the number stays in the accessible name). */
  .header-call__number { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-header .brand { align-self: center; width: auto; }
  /* The logo <picture> (content/partials/logo.tmpl) selects the square mark under this same query. */
  .site-header .brand img { position: static; width: 48px; height: 48px; filter: none; transform: none; }
  .js .site-header .brand img { transform: none; }
}
html.nav-open { overflow: hidden; }

/* ---------- Hero ---------- */

.hero { background: var(--bg-tint); padding-block: max(var(--space-8), var(--first-clear, 0px)) var(--space-7); overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: var(--space-6); }
.hero h1 { font-size: var(--fs-display-l); white-space: pre-line; }
.hero--xl h1 { font-size: clamp(2.75rem, 1.6rem + 3.9vw, 5.25rem); }
.hero__lede { max-width: 40ch; margin-top: var(--space-5); font-size: var(--fs-lede); line-height: 1.35; color: var(--text-muted); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); margin-top: var(--space-7); }
.hero__art img { width: 100%; height: auto; }
@media (min-width: 1200px) { .hero__art { margin-right: calc(-1 * var(--gutter)); } }

@media (max-width: 959.98px) {
  .hero { padding-block: max(var(--space-7), var(--first-clear, 0px)) var(--space-6); }
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .hero__lede { max-width: 36ch; }
}
@media (min-width: 960px) and (max-width: 1199.98px) {
  .hero__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* ---------- Trust bar ---------- */

.trust { background: var(--bg-page); border-block: 1px solid var(--rule); }
.trust__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.trust__item { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-6) var(--space-4); color: var(--text-strong); }
.trust__item + .trust__item { border-left: 1px solid var(--rule-strong); }
.trust__item .icon { width: 40px; height: 40px; stroke-width: 1.4; color: var(--accent-text); }

@media (max-width: 959.98px) {
  .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__item { justify-content: flex-start; padding: var(--space-5) var(--space-4); }
  .trust__item:nth-child(odd) { border-left: 0; }
  .trust__item:nth-child(n + 3) { border-top: 1px solid var(--rule-strong); }
  .trust__item:nth-child(3) { border-left: 0; }
}
@media (max-width: 639.98px) {
  .trust__item { flex-direction: column; justify-content: flex-start; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-3); text-align: center; }
}

/* ---------- Two-path split ---------- */

.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.path { display: flex; align-items: flex-start; gap: var(--space-6); padding-inline: var(--space-7); }
.path:first-child { padding-left: 0; }
.path:last-child { padding-right: 0; }
.path + .path { border-left: 1px solid var(--rule-strong); }
.path__icon { flex: none; color: var(--accent-text); }
.path__icon .icon { width: 88px; height: 88px; stroke-width: 0.9; }
.path__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.path__body p { max-width: 36ch; color: var(--text-body); }
.path__body .textlink { margin-top: var(--space-2); }

@media (max-width: 959.98px) {
  .path { padding-inline: var(--space-5); gap: var(--space-5); }
  .path:first-child { padding-left: 0; }
  .path:last-child { padding-right: 0; }
  .path__icon .icon { width: 64px; height: 64px; stroke-width: 1.2; }
}
@media (max-width: 639.98px) {
  .paths { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .path, .path:first-child, .path:last-child { padding: 0; }
  .path + .path { border-left: 0; border-top: 1px solid var(--rule-strong); padding-top: var(--space-6); }
}

/* ---------- Breadcrumb ---------- */

.breadcrumb { margin: 0 0 var(--space-5); font-size: var(--fs-small); }
.breadcrumb li { white-space: nowrap; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; color: var(--text-muted); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--text-muted); }
.breadcrumb a { color: var(--accent-text); }

/* ---------- Stub / message pages (404, thanks) ---------- */

.message { padding-block: max(var(--space-9), var(--first-clear, 0px)) var(--space-9); background: var(--bg-band); }
.message h1 { max-width: 16ch; }
.message__lede { max-width: 40ch; margin-top: var(--space-5); font-size: var(--fs-lede); line-height: 1.4; color: var(--text-muted); }
.message__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); margin-top: var(--space-7); }
.message h1:focus { outline: none; }

/* ---------- Notice (inline status message; role="alert" for errors) ---------- */

.notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border: 1px solid var(--border-control); border-left-width: 4px; border-radius: var(--radius-md); background: var(--bg-raised); color: var(--text-strong); }
.notice .icon { margin-top: 2px; }
.notice--error { border-color: var(--danger); }
.notice--error .icon { color: var(--danger); }
.notice--success { border-color: var(--success); }
.notice--success .icon { color: var(--success); }

/* ---------- Closing call-to-action band ---------- */

.closing { padding-block: var(--section-pad); background: var(--bg-band); }
.closing__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5) var(--space-7); }
.closing h2 { max-width: 28ch; }
.closing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }

/* ---------- Footer ---------- */

.site-footer { background: var(--bg-tint); border-top: 1px solid var(--rule-strong); padding-block: var(--space-6) var(--space-4); font-size: var(--fs-small); line-height: 1.4; }
.site-footer__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.site-footer__title { margin: 0 0 var(--space-2); font: 700 var(--fs-small)/1.3 var(--font-display); letter-spacing: 0; color: var(--text-strong); }
.site-footer__title a { color: inherit; text-decoration: none; }
.site-footer ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.site-footer li { padding-block: var(--space-1); color: var(--text-body); overflow-wrap: anywhere; }
.site-footer li a { color: var(--text-body); text-decoration: none; }
.site-footer li a:hover { color: var(--accent-text); text-decoration: underline; }
.site-footer__social { display: inline-flex; align-items: center; gap: var(--space-2); }
.site-footer__social .icon { width: 1.25em; height: 1.25em; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-5); margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--rule-strong); color: var(--text-muted); }
.site-footer__legal p { margin: 0; }
.site-footer__owner { color: var(--text-strong); font-weight: 600; white-space: nowrap; }
.site-footer__copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); }
.site-footer__legal a { color: var(--text-muted); text-decoration: none; }
.site-footer__legal a:hover { text-decoration: underline; }

@media (max-width: 1199.98px) {
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639.98px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .skip-link, .menu-button, .theme-toggle { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* About page */
.approach { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.approach__item { display: flex; align-items: flex-start; gap: var(--space-6); padding: var(--space-6) var(--space-7); border-bottom: 1px solid var(--rule-strong); }
.approach__item:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--rule-strong); }
.approach__item:nth-child(even) { padding-right: 0; }
.approach__icon { flex: none; display: grid; place-items: center; width: 64px; height: 64px; color: var(--accent-text); }
.approach__icon .icon { width: 56px; height: 56px; stroke-width: 1.2; }
.approach__item h3 { font-size: var(--fs-h4); }
.approach__item p { margin-top: var(--space-2); max-width: 34ch; color: var(--text-muted); }

@media (max-width: 959px) {
  .approach__item { padding: var(--space-5) var(--space-5); gap: var(--space-5); }
  .approach__icon, .approach__icon .icon { width: 48px; height: 48px; }
}
@media (max-width: 639px) {
  .approach { grid-template-columns: minmax(0, 1fr); }
  .approach__item, .approach__item:nth-child(odd), .approach__item:nth-child(even) { padding: var(--space-5) 0; border-right: 0; }
}

@media (min-width: 960px) {
  .trust__list:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  .trust__list:has(> :nth-child(3):last-child) .trust__item:nth-child(3) { grid-column: 1 / -1; border-left: 0; }
}

.connect { padding-block: var(--space-6); border-top: 1px solid var(--rule); }
.connect__inner { display: flex; align-items: center; gap: var(--space-7); }
.connect__inner .eyebrow { flex: none; margin: 0; padding-right: var(--space-7); border-right: 1px solid var(--rule-strong); }
.connect__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; }
@media (max-width: 959px) {
  .connect__inner { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .connect__inner .eyebrow { padding-right: 0; border-right: 0; }
}

/* /business/ : hero map labels, capability groups. */

/* Illustration labels are HTML overlays; the picture itself carries none. */
.hero-map { position: relative; }
@media (min-width: 960px) { .hero:has(.hero-map) .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.hero:has(.hero-map) h1 { font-size: clamp(2.25rem, 1.3rem + 2.6vw, 3.5rem); }
@media (min-width: 960px) { .hero-map { margin-inline: -8% -10%; } }
.hero-map__labels { margin: 0; padding: 0; list-style: none; }
.hero-map__label {
  position: absolute; padding: var(--space-2) var(--space-3);
  background: var(--bg-raised); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1); color: var(--text-strong);
  font-size: var(--fs-micro); line-height: 1.25; text-align: center; white-space: nowrap;
}
.hero-map__label--endpoints { left: 1%; top: 36%; }
.hero-map__label--office { left: 28%; top: 8%; }
.hero-map__label--security { left: 48%; top: 24%; }
.hero-map__label--cloud { left: 76%; top: 2%; }
.hero-map__label--delivery { left: 60%; top: 56%; }
.hero-map__label--observability { left: 84%; top: 52%; }
@media (max-width: 959.98px) { .hero-map__labels { display: none; } }

/* Capability groups */
.caps { padding-bottom: 0; }
.caps .section-head { margin-bottom: var(--space-6); }

.cap-group { border-top: 1px solid var(--rule-strong); background: var(--bg-page); }
.cap-group--band { background: var(--bg-band); }
.cap-group__inner { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 3fr); gap: var(--space-6); padding-block: var(--space-6); }
.cap-group__label {
  align-self: start; margin: 0; padding-left: var(--space-5); border-left: 2px solid var(--rule-strong);
  font: 500 var(--fs-eyebrow)/1.4 var(--font-body); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--eyebrow);
}
.cap-group__items {
  --cap-gap: var(--space-7);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--cap-gap); row-gap: var(--space-5);
  margin: 0; padding: 0; list-style: none;
}
.cap-group__items--4, .cap-group__items--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cap { position: relative; display: flex; gap: var(--space-5); align-items: flex-start; }
.cap + .cap::before {
  content: ""; position: absolute; inset-block: 0; left: calc(var(--cap-gap) / -2);
  border-left: 1px solid var(--rule-strong);
}
.cap-group__items--4 > .cap:nth-child(odd)::before,
.cap-group__items--2 > .cap:nth-child(odd)::before { content: none; }
.cap .icon { flex: none; width: 48px; height: 48px; stroke-width: 1.4; color: var(--accent-text); margin-top: 2px; }
.cap h4 { color: var(--text-strong); }
.cap p { margin-top: var(--space-1); font-size: var(--fs-small); color: var(--text-muted); }

@media (max-width: 1199.98px) {
  .cap-group__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .cap-group__items { --cap-gap: var(--space-6); }
  .cap { gap: var(--space-4); }
  .cap .icon { width: 40px; height: 40px; }
}
@media (max-width: 959.98px) {
  .cap-group__items, .cap-group__items--4, .cap-group__items--2 { grid-template-columns: minmax(0, 1fr); }
  .cap-group__items > .cap + .cap::before { content: none; }
  .cap-group__label { padding-left: var(--space-4); }
}

/* Contact page and thanks page. Tokens only; no inline styles (CSP). */

.contact { padding-block: max(clamp(32px, 5vw, 72px), var(--first-clear, 0px)) clamp(32px, 5vw, 72px); }

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}
.contact-intro { grid-area: intro; }
.contact-audience { grid-area: audience; }
.contact-card { grid-area: card; }
.contact-direct { grid-area: direct; }
.contact-layout { grid-template-areas: "intro" "audience" "card" "direct"; }

@media (min-width: 960px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas: "intro card" "audience card" "direct card";
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }
}

.contact-intro h1 { max-width: 14ch; }
.contact-lede { max-width: 36ch; margin-top: var(--space-5); font-size: var(--fs-lede); line-height: 1.4; color: var(--text-muted); }

/* ---------- Audience radio cards ---------- */

.contact-audience { margin: 0; padding: 0; border: 0; min-width: 0; }
.contact-audience legend { padding: 0; margin-bottom: var(--space-4); }
.radio-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.radio-card { position: relative; }
.radio-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.radio-card label {
  display: flex; align-items: flex-start; gap: var(--space-4); height: 100%;
  padding: var(--space-5); border: 1px solid var(--border-control); border-radius: var(--radius-md);
  background: var(--bg-raised); color: var(--text-body); box-shadow: var(--shadow-1);
  transition: border-color var(--dur-base) ease, background-color var(--dur-base) ease;
}
.radio-card label > .icon { width: 2.5rem; height: 2.5rem; color: var(--accent-text); }
.radio-card__text { display: grid; gap: var(--space-1); flex: 1; min-width: 0; }
.radio-card__title { font: 700 var(--fs-h4)/1.2 var(--font-display); color: var(--text-strong); }
.radio-card__hint { font-size: var(--fs-small); line-height: 1.4; color: var(--text-muted); }
.radio-card__mark { flex: none; width: 22px; height: 22px; margin-top: 2px; border: 2px solid var(--border-control); border-radius: 50%; background: var(--bg-raised); }
.radio-card input:hover + label { border-color: var(--accent-text); }
.radio-card input:checked + label { border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); }
.radio-card input:checked + label .radio-card__mark { border-color: var(--accent-text); background: radial-gradient(circle, var(--accent-text) 0 45%, var(--bg-raised) 50%); }
.radio-card input:focus-visible + label { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.radio-card input[aria-invalid="true"] + label { border-color: var(--danger); }

@media (max-width: 639.98px) {
  .radio-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Form card ---------- */

.contact-card {
  padding: clamp(20px, 3vw, 40px);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-lg);
  background: var(--bg-raised); box-shadow: var(--shadow-2);
}
.contact-card__body { display: grid; gap: var(--space-5); }
.contact-card__body > .eyebrow { margin: 0; }
.contact-card__body[hidden], .contact-success[hidden] { display: none; }

.field { display: grid; gap: var(--space-2); min-width: 0; }
.field label { font-weight: 500; color: var(--text-strong); }
.field[hidden] { display: none; }
/* The "Other" text belongs to the select above it: indent and rule, not colour alone. With
   JS it appears only for "Other"; without JS it is always visible and its label explains it. */
.field--conditional { padding-left: var(--space-4); border-left: 3px solid var(--rule-strong); margin-top: calc(var(--space-2) * -1); }
html.js .field--conditional:not(.is-shown) { display: none; }
.field-optional { font-weight: 400; color: var(--text-muted); }

.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-control); border-radius: var(--radius-sm);
  background: var(--bg-raised); color: var(--text-strong);
  font: 400 1rem/1.4 var(--font-body);
}
.field textarea { min-height: 140px; resize: vertical; }
.field ::placeholder { color: var(--text-placeholder); opacity: 1; }
.field [aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }

.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: var(--space-7); cursor: pointer; }
.select > .icon { position: absolute; right: var(--space-4); top: 50%; width: 1.25em; height: 1.25em; margin-top: -0.625em; color: var(--text-muted); pointer-events: none; }

.field-error, .contact-audience .field-error {
  display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-2) 0 0;
  font-size: var(--fs-small); line-height: 1.4; color: var(--danger); font-weight: 500;
}
.field .field-error { margin-top: 0; }
.field-error[hidden] { display: none; }
.field-error .icon { width: 1.125em; height: 1.125em; margin-top: 0.1em; }

.contact-submit { width: 100%; }
.contact-submit[aria-disabled="true"] { cursor: progress; opacity: 0.8; }
.contact-submit[aria-disabled="true"] .icon { display: none; }
.contact-privacy { text-align: center; font-size: var(--fs-small); color: var(--text-muted); }

/* Honeypot: off-screen, out of the tab order and hidden from assistive tech. */
.contact-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Error summary and failure notices ---------- */

.contact-summary, .contact-failure, .contact-noscript { margin: 0; }
.contact-summary[hidden], .contact-failure[hidden] { display: none; }
.contact-summary:focus, .contact-failure:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.contact-summary__title { font-weight: 700; color: var(--text-strong); }
.contact-summary__list { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.contact-summary__list a { color: var(--text-strong); }
.contact-failure__actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; margin-top: var(--space-3); }
.contact-failure__actions a { color: var(--accent-text); font-weight: 500; }
.contact-retry { background: var(--bg-raised); color: var(--accent-text); box-shadow: inset 0 0 0 2px var(--accent-text); }
.contact-retry:hover { background: var(--bg-tint); }
.contact-retry[hidden] { display: none; }

/* ---------- Success ---------- */

.contact-success { display: grid; gap: var(--space-4); justify-items: start; padding-block: var(--space-4); }
.contact-success > .icon { width: 3rem; height: 3rem; padding: 10px; border-radius: 50%; background: var(--bg-tint); color: var(--success); }
.contact-success > .eyebrow { margin: 0; }
.contact-success h2 { font-size: var(--fs-h2); }
.contact-success h2:focus { outline: none; }

/* ---------- Direct contact ---------- */

.contact-direct { padding-top: var(--space-5); border-top: 1px solid var(--rule-strong); }
.contact-direct .eyebrow { margin-bottom: var(--space-4); }
.contact-direct__list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.contact-direct__list li { display: flex; align-items: center; gap: var(--space-4); }
.contact-direct__list .icon { width: 2rem; height: 2rem; color: var(--accent-text); }
.contact-direct__list a { font: 500 clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem)/1.3 var(--font-display); overflow-wrap: anywhere; }
.contact-direct__place { margin: var(--space-3) 0 0 calc(2rem + var(--space-4)); color: var(--text-muted); }

/* ---------- What happens next ---------- */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.step { display: flex; gap: var(--space-4); align-items: flex-start; }
.step > .icon { width: 3rem; height: 3rem; color: var(--accent-text); }
.step h3 { font: 700 var(--fs-h4)/1.25 var(--font-display); letter-spacing: -0.01em; }
.step p { margin-top: var(--space-2); color: var(--text-muted); }
@media (max-width: 959.98px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}

/* ---------- Thanks page ---------- */

.thanks__steps { max-width: 44ch; margin: var(--space-6) 0 0; padding-left: var(--space-5); color: var(--text-body); }
.thanks__steps li + li { margin-top: var(--space-2); }
.thanks__direct { max-width: 44ch; margin-top: var(--space-5); color: var(--text-muted); }

/* /pricing/ : text-only hero, jump links, home and business price components, engagement models. */

.hero--text .hero__inner { grid-template-columns: minmax(0, 1fr); }
.hero--text .hero__text { max-width: 60ch; }
.hero--text h1 { max-width: 20ch; }
.jump { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); }
.jump a { display: inline-flex; align-items: center; min-height: 40px; color: var(--accent-text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

.section-lede { max-width: 60ch; margin: var(--space-3) 0 0; color: var(--text-muted); }
.price-group__title { font-size: var(--fs-h3); margin: var(--space-7) 0 var(--space-3); }
.section-head + .price-group__title { margin-top: 0; }
.services.services--pair { grid-template-rows: none; grid-auto-flow: row; border-top: 1px solid var(--rule-strong); }
.services--pair .service__body h4 { font-size: var(--fs-h4); line-height: 1.25; }

/* Flat-price terms panel */
.terms { margin-top: var(--space-6); padding: var(--space-5) var(--space-6); background: var(--bg-tint); border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); }
.terms__title { margin: 0 0 var(--space-4); font-size: var(--fs-h4); }
.terms__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); margin: 0; padding: 0; list-style: none; }
.terms__list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.terms__list .icon { width: 24px; height: 24px; margin-top: 2px; color: var(--accent-text); }
.terms__list p { margin: 0; color: var(--text-body); }
.terms__list strong { display: block; color: var(--text-strong); font-weight: 600; }

/* Emergency */
.emergency { margin-top: var(--space-7); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.emergency__head { display: flex; gap: var(--space-4); align-items: flex-start; }
.emergency__head .price-group__title { margin: 0; }
.emergency__lede { max-width: 60ch; margin: var(--space-2) 0 0; color: var(--text-muted); }
.emergency__head .service__icon { flex: none; color: var(--accent-text); }
.emergency__head .service__icon .icon { width: 56px; height: 56px; stroke-width: 1.3; }

/* Matrix table: row header x column header gives one price (emergency) or one rule (travel) */
.matrix { width: 100%; max-width: 760px; margin-top: var(--space-5); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.matrix th, .matrix td { padding: var(--space-4); border-bottom: 1px solid var(--rule-strong); text-align: left; vertical-align: top; }
.matrix thead td { border-bottom-width: 2px; }
.matrix thead th { font: 700 var(--fs-body)/1.25 var(--font-display); color: var(--text-strong); border-bottom-width: 2px; }
.matrix tbody th { width: 34%; font-weight: 600; color: var(--text-strong); }
.matrix tbody td { font: 700 1.375rem/1.2 var(--font-display); color: var(--text-strong); }
.matrix__sub { display: block; margin-top: 2px; font: 400 var(--fs-small)/1.35 var(--font-body); color: var(--text-muted); }
.matrix--travel { max-width: 880px; }
.matrix--travel tbody td { font: 600 var(--fs-body)/1.3 var(--font-body); }

/* Fine print lines with icons */
.fine { display: grid; gap: var(--space-2); max-width: 70ch; margin: var(--space-4) 0 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--text-body); }
.fine li { display: flex; gap: var(--space-3); align-items: flex-start; }
.fine .icon { width: 20px; height: 20px; margin-top: 1px; color: var(--accent-text); flex: none; }
.fine--foot { margin-top: var(--space-6); }
.section-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-6); }

/* Rate card (home and business) */
.rate { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6) var(--space-8); align-items: start; padding: var(--space-6); background: var(--bg-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.rate__base > .eyebrow:first-child { margin-top: 0; }
.rate__amount { margin: var(--space-2) 0 var(--space-4); }
.rate__amount .tnum { font: 800 var(--fs-price)/1 var(--font-display); color: var(--text-strong); }
.rate__unit { color: var(--text-muted); }
.rate__base h3 { font-size: var(--fs-h4); margin: var(--space-5) 0 var(--space-2); }
.rate__base > p { color: var(--text-body); }
.facts { display: grid; gap: var(--space-2); margin: var(--space-4) 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.facts li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--text-body); }
.facts .icon { width: 20px; height: 20px; color: var(--accent-text); flex: none; margin-top: 1px; }
.rate--home + .services--pair { margin-top: var(--space-5); }

.ladder { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ladder th, .ladder td { height: 56px; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--rule-strong); text-align: right; }
.ladder thead th { font: 600 var(--fs-small)/1.3 var(--font-body); color: var(--text-muted); }
.ladder th:first-child { text-align: left; }
.ladder tbody th { white-space: nowrap; font-weight: 600; color: var(--text-strong); }
.ladder td { color: var(--text-body); }
.ladder__pay { font: 700 1.25rem/1.2 var(--font-display); color: var(--text-strong) !important; }
.ladder__per { color: var(--accent-text) !important; font-weight: 600; white-space: nowrap; }
.ladder__per span { color: var(--text-muted); font-size: var(--fs-micro); font-weight: 400; }
.ladder--3 td:last-child { font: 700 1.25rem/1.2 var(--font-display); color: var(--text-strong); }
.travel__title { margin-top: var(--space-7); }

@media (max-width: 959.98px) {
  .rate { grid-template-columns: minmax(0, 1fr); }
  .terms__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639.98px) {
  .rate, .terms { padding: var(--space-5) var(--space-4); }
  .rate { padding-inline: var(--space-3); }
  .matrix th, .matrix td { padding: var(--space-3) var(--space-2); }
  .matrix tbody td { font-size: 1.1875rem; }
  .matrix tbody th { width: 30%; }
  .matrix--travel tbody td { font-size: var(--fs-small); }
  .ladder th, .ladder td { padding-inline: 4px; font-size: var(--fs-small); }
  .ladder__pay, .ladder--3 td:last-child { font-size: 1.0625rem !important; }
  .ladder__per span { display: block; }
  .emergency__head .service__icon .icon { width: 44px; height: 44px; }
}
@media (max-width: 639.98px) {
  .ladder--3 tbody th { white-space: normal; }
  .ladder th, .ladder td { padding-inline: 2px; }
  .ladder th:first-child { padding-left: 0; }
  .ladder th:last-child, .ladder td:last-child { padding-right: 0; }
  .ladder__pay { font-size: 1rem !important; }
}
@media (min-width: 960px) { .services--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Engagement models */
.models-title { margin: var(--space-8) 0 var(--space-5); }
.models { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-strong); }
.model {
  display: grid; grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 2fr) auto; align-items: center; gap: var(--space-5);
  padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--rule-strong);
}
.model > .icon { width: 44px; height: 44px; stroke-width: 1.4; color: var(--accent-text); }
.model h4 { font-size: var(--fs-h4); letter-spacing: -0.01em; }
.model p { color: var(--text-muted); }

@media (max-width: 959.98px) {
  .model { grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-2) var(--space-4); padding: var(--space-5) var(--space-4); }
  .model > .icon { grid-row: 1; }
  .model h4 { grid-column: 2; }
  .model p, .model .textlink { grid-column: 1 / -1; }
  .model .textlink { justify-self: start; }
}
@media (max-width: 639.98px) {
  .models { display: grid; gap: var(--space-4); border-top: 0; }
  .model { border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--bg-raised); }
}

/* Privacy page */
.prose { max-width: 68ch; margin-inline: 0; }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--space-7); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: var(--space-3); }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-hover); }
.prose ul { margin-top: var(--space-3); padding-left: var(--space-5); }
.prose li + li { margin-top: var(--space-1); }

/* Priced service rows (Residential and Pricing), in two columns filled column by column. */

.services {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto); grid-auto-flow: column;
  column-gap: var(--space-8); margin: 0; padding: 0; list-style: none;
}
.service {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--space-5); padding-block: var(--space-5);
  border-bottom: 1px solid var(--rule-strong);
}
.service__icon { color: var(--accent-text); }
.service__icon .icon { width: 56px; height: 56px; stroke-width: 1.3; }
.service__body h3 { font-size: var(--fs-h4); line-height: 1.25; }
.service__body p { margin-top: var(--space-1); font-size: var(--fs-small); color: var(--text-muted); }
.service__price {
  margin: 0; text-align: right; white-space: nowrap;
  font: 700 1.125rem/1.2 var(--font-display); color: var(--accent-text);
}

/* Price block: amount, then what it includes (and, on Pricing, what the same time costs hourly) */
.service__cost { text-align: right; }
.service__unit, .service__from { font: 500 var(--fs-small)/1 var(--font-body); color: var(--text-muted); }
.service__terms { margin: var(--space-1) 0 0; font-size: var(--fs-small); line-height: 1.35; color: var(--text-strong); white-space: nowrap; }
.service__compare { display: block; color: var(--text-muted); font-size: var(--fs-micro); }
.services-terms { max-width: 60ch; margin: var(--space-5) 0 0; font-size: var(--fs-small); color: var(--text-body); }

@media (max-width: 959.98px) {
  .services { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .service__icon .icon { width: 44px; height: 44px; }
}
@media (max-width: 639.98px) {
  .service { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding-block: var(--space-5); }
  .service__cost { grid-column: 2; text-align: left; }
  .service__terms { white-space: normal; }
}

/* Service area: three tiers, each a label with a wrapping pill list. Used on Pricing. */

.area { border-top: 1px solid var(--rule-strong); }
.area__group {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: start;
  gap: var(--space-3) var(--space-7); padding-block: var(--space-5);
  border-bottom: 1px solid var(--rule-strong);
}
.area__label { font-size: var(--fs-h4); line-height: 1.25; }
.area__note { margin: var(--space-1) 0 0; font-size: var(--fs-small); color: var(--text-muted); }
.area__list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0; padding: 0; list-style: none; }
.area__list li {
  padding: var(--space-1) var(--space-3); border: 1px solid var(--rule-strong); border-radius: 999px;
  font: 500 var(--fs-eyebrow)/1.4 var(--font-body); color: var(--text-body);
}

.area-intro { max-width: 60ch; margin: 0 0 var(--space-6); color: var(--text-muted); }
.service-pointer { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-6) 0 0; }
.contact-direct__area { margin: var(--space-5) 0 0 calc(2rem + var(--space-4)); }
.contact-direct__pricing { margin: var(--space-2) 0 0 calc(2rem + var(--space-4)); }

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

/* /work/ cases, the proof teaser (Home, Business), the Home cost teaser, and the mobile-hidden trust bar. */

/* Trust bar: hidden on phones (below 640px) where the Home lede carries who, where and how long */
@media (max-width: 639.98px) { .trust--desktop { display: none; } }

/* Cases: head (kind + name) beside the facts at 960 and up */
.cases { padding-block: 0 var(--section-pad); }
.case { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-5) var(--space-7); padding-block: var(--space-7); border-top: 1px solid var(--rule-strong); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.case:first-child { border-top: 0; }
.case__head { align-self: start; }
.case__head h2 { margin-top: var(--space-1); font-size: var(--fs-h3); letter-spacing: -0.02em; }
.work-card__kind { margin: 0; color: var(--accent-text); font-weight: 500; }
.work-card__facts { margin: 0; display: grid; gap: var(--space-4); }
.work-card__facts dt { font: 500 var(--fs-eyebrow)/1.4 var(--font-body); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--eyebrow); }
.work-card__facts dd { margin: var(--space-1) 0 0; max-width: 68ch; color: var(--text-body); }
.work-card__facts a { color: var(--accent-text); }
.case-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; padding: var(--space-6) 0 0; list-style: none; border-top: 1px solid var(--rule-strong); }
@media (max-width: 959.98px) { .case { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-6); } }

/* Teasers: a heading row with a link on the right (stacked on phones) */
.teaser-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-7); }
.teaser-head .section-head { margin-bottom: 0; }
@media (max-width: 639.98px) { .teaser-head { flex-direction: column; align-items: flex-start; margin-bottom: var(--space-6); } }

.teaser-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.teaser-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-6); background: var(--bg-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); }
.teaser-item h3 { font-size: var(--fs-h3); }
.teaser-item p:not(.work-card__kind) { max-width: 52ch; color: var(--text-body); }
.teaser-item .textlink { margin-top: auto; }
.work-teaser { border-top: 1px solid var(--rule-strong); }
@media (max-width: 959.98px) { .teaser-items { grid-template-columns: minmax(0, 1fr); } .teaser-item { padding: var(--space-5); } }

.cost-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.cost-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); background: var(--bg-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); }
.cost-card ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.cost-card li { color: var(--text-body); }
.cost-card strong { color: var(--text-strong); font-family: var(--font-display); font-weight: 800; }
.cost-card .textlink { margin-top: auto; }
@media (max-width: 959.98px) { .cost-cards { grid-template-columns: minmax(0, 1fr); } }