/* ==========================================================================
   SureSky Inc. / SureSky Homes — Design System
   Aesthetic: Industrial Editorial  ·  Pattern: Trust-First + Local Authority
   Palette:   Navy (structure) · Orange (action) · Sky blue (support)
   Type:      Manrope (self-hosted variable, 200-800)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTS — both self-hosted variable, no CDN
   Manrope  — body, UI, labels (weights 200–800, 53 KB)
   Fraunces — display only: H1, section headlines, statement lines (67 KB)
              Two axes: wght 300–900 and opsz 9–144. Its DEFAULT instance is
              wght 900 / opsz 9, so anything using it must set font-weight
              explicitly or it lands at black. Optical size is driven up on
              large headlines for the high-contrast, editorial cut.
   SIL Open Font License — see assets/fonts/OFL-Manrope.txt and OFL-Fraunces.txt
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope-Variable.woff2") format("woff2-variations"),
       url("assets/fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/Fraunces-Variable.woff2") format("woff2-variations"),
       url("assets/fonts/Fraunces-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ====================================================================
     BRAND TOKENS — sampled from the two logo files. Source of truth.
     ==================================================================== */
  --navy:        #143A5E;  /* deep navy — headings, dark sections, footer */
  --navy-deep:   #0E2C48;  /* darker navy — gradients / footer base       */
  --sky:         #58A8DD;  /* light/sky blue — secondary accents          */
  --sky-soft:    #D3E4F2;  /* pale blue — section tints, cards            */
  --orange:      #F4A428;  /* sun orange — lives in the Homes logo mark   */
  --orange-deep: #E08E12;
  --ink:         #10233A;  /* near-black navy — body text                 */
  --white:       #FFFFFF;

  /* SureSky Inc. (parent brand) — charcoal monogram palette */
  --charcoal:    #1F1F1F;
  --charcoal-2:  #34343A;

  /* --------------------------------------------------------------------
     AA-SAFE TEXT VARIANTS
     --sky, --orange and --gold are all light enough that WHITE text on
     them fails WCAG AA. --ink passes on sky (6.1:1) and orange (7.7:1),
     so --ink is the text colour on those fills. These darkened variants
     are for the same hues used AS TEXT on a light background, where the
     raw brand colours also fail.
     -------------------------------------------------------------------- */
  --orange-ink: #8F5608;  /* orange as text on light — 6.0:1 on paper  */
  --sky-ink:    #1A6BA2;  /* sky as text/link on light — 5.7:1 white, 4.7:1 on tints */

  /* Brand gold — sampled from the Premium warranty shield (#D1AB52).
     Fails AA as text on light (2.2:1), so --gold-ink is the text variant. */
  --gold:      #D1AB52;
  --gold-ink:  #836213;   /* 5.6:1 on white, 4.7:1 on tints */
  --gold-soft: #F1E6C8;

  /* Semantic accent — re-pointed per page so colour is one knob, not 40 rules.
     Default (SureSky Homes) is sky-led: navy + sky + white dominate and gold
     is reserved for the Premium warranty card only. */
  --accent:         var(--sky-500);
  --accent-on-dark: var(--sky-400);
  --accent-ink:     var(--sky-ink);
  --accent-soft:    var(--sky-200);
  --accent-rgb:     88, 168, 221;

  /* Primary CTA — solid blue, white label. #2178B8 is the one blue that
     clears BOTH constraints: white text at 4.73:1 (AA) and 3.02:1 against
     the navy hero it sits on, so the button never sinks into the background. */
  --cta:       #2178B8;
  --cta-hover: #1B6699;
  --cta-text:  var(--white);
  --cta-glow:  rgba(33, 120, 184, .45);

  /* Form feedback — both AA on white (5.3:1 and 6.0:1) */
  --ok:    #0F7B4F;
  --error: #C62828;

  /* --------------------------------------------------------------------
     DERIVED SCALE — every step resolves to a brand token above
     -------------------------------------------------------------------- */
  --navy-900: var(--navy-deep);
  --navy-800: var(--navy);
  --navy-700: #1B4C79;
  --navy-600: #2A6392;
  --navy-500: #3B7BAF;

  --sky-600: var(--sky-ink);
  --sky-500: var(--sky);
  --sky-400: #7FBCE6;
  --sky-200: #C2DCF0;
  --sky-050: #F0F7FC;

  /* Neutrals — cooled to sit with the logo blues */
  --paper: #F7FAFC;
  --paper-2: #DFEBF5;
  --line: #D5E2EC;
  --ink-soft: #4A6076;

  /* Semantic */
  --bg: var(--paper);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --logo-chip: var(--white);

  /* Spacing — 8px grid */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;

  /* Radii — restrained, industrial */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(16, 35, 58, .07);
  --shadow-md: 0 12px 28px rgba(16, 35, 58, .11);
  --shadow-lg: 0 24px 56px rgba(16, 35, 58, .17);

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --fast: 180ms;
  --nav-t: 280ms;          /* nav colour transition */
  --base: 240ms;
  --slow: 300ms;
  /* One duration for every interactive hover on the Inc page, so the whole
     surface responds at the same speed rather than at four different ones. */
  --hover-t: 250ms;

  /* Type */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font);
  /* Editorial serif. Applied ONLY to major headlines on .page-inc — the Homes
     page keeps its all-Manrope industrial voice untouched. */
  --font-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* Layout */
  --container: 1200px;
  --gutter: 20px;
  --header-h: 74px;
}

/* --------------------------------------------------------------------------
   PER-BRAND THEME
   homes.html uses the :root palette: navy + sky + white dominate, with gold
   held back for the Premium warranty card alone.
   index.html is the parent-brand front door: white + blue with gold as the
   accent, and a navy primary CTA so it reads distinctly from Homes.
   -------------------------------------------------------------------------- */
/* homes.html — the roofing brand uses the :root palette unchanged.
   The class is a styling hook so the theme is explicit in the markup. */
.page-homes { /* navy + sky + white, as defined in :root */ }

/* No gold in the Homes UI at all — the only gold on the page is the artwork
   inside the Premium warranty badge itself. Card chrome follows the blue. */

.page-inc {
  /* Gold accent, navy primary CTA, and a lighter, airier surface set. */
  --accent:         var(--gold);
  --accent-on-dark: var(--gold);
  --accent-ink:     var(--gold-ink);
  --accent-soft:    var(--gold-soft);
  --accent-rgb:     209, 171, 82;

  --cta:       var(--navy-800);
  --cta-hover: var(--navy-900);
  --cta-text:  var(--white);
  --cta-glow:  rgba(20, 58, 94, .34);

  --paper-2: #EEF4FA;
  --sky-050: #F4F9FD;
  --logo-chip: var(--white);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 16px;   /* nothing is pinned over the content */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.022em;
  color: var(--navy-900);
  margin: 0 0 var(--s-2);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; text-transform: uppercase; }
h2 { font-size: clamp(1.65rem, 3.3vw, 2.5rem); font-weight: 800; text-transform: uppercase; }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 var(--s-2); }
p:last-child { margin-bottom: 0; }

::selection { background: var(--accent); color: var(--navy-900); }

:focus-visible {
  outline: 3px solid var(--sky-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Grain overlay — the editorial texture layer */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 880px; }

.section { padding-block: var(--s-6); position: relative; }
.section--tight { padding-block: var(--s-5); }
.section--dark {
  background: var(--navy-900);
  color: #D9E2EC;
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--sky { background: var(--sky-050); }
.section--paper2 { background: var(--paper-2); }
.section--white { background: var(--white); }
/* Hairline between major sections — editorial structure without a divider
   graphic. Inset from the gutters so it reads as a rule, not a border. */
.section--rule::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--line);
}
/* Airier and tighter section rhythms, so the page does not march at one
   identical interval from top to bottom. */
.section--airy { padding-block: calc(var(--s-6) * 1.5); }
.section--snug { padding-block: var(--s-5) var(--s-6); }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--accent);
  color: var(--navy-900);
  padding: 12px 20px;
  font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Section eyebrow — "01 / SERVICES" */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--s-2);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent);
}
.section--dark .eyebrow { color: var(--accent-on-dark); }

.section-head { max-width: 760px; margin-bottom: var(--s-5); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.lead {
  font-size: 1.125rem;
  color: var(--text-soft);
  max-width: 62ch;
}
.section--dark .lead { color: #A9BACC; }

.accent { color: var(--accent); }
.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin-block: var(--s-5);
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--cta);
  --btn-bg-hover: var(--cta-hover);
  --btn-fg: var(--cta-text);
  --btn-glow: var(--cta-glow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bg);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;               /* clips the sheen sweep */
  transition: transform var(--base) var(--ease),
              box-shadow var(--base) var(--ease),
              background-color var(--base) var(--ease),
              border-color var(--base) var(--ease),
              color var(--base) var(--ease);
}
/* Sheen sweep — a single soft highlight that crosses the button on hover.
   Purely decorative, sits behind the label, and never intercepts pointers. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -140%;
  z-index: -1;
  width: 60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  transition: left 520ms var(--ease);
  pointer-events: none;
}
.btn:hover::after { left: 160%; }

.btn:hover {
  --btn-bg: var(--btn-bg-hover);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 28px var(--btn-glow);
}
.btn:active { transform: translateY(-1px) scale(.99); }
/* Arrow-bearing buttons nudge their glyph forward */
.btn .btn__arrow { transition: transform var(--base) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--navy-900);
  --btn-fg: var(--navy-900);
  border-color: var(--navy-800);
}
.btn--ghost:hover {
  --btn-fg: var(--white);
  box-shadow: 0 10px 24px rgba(16, 35, 58, .28);
}

.btn--onDark {
  --btn-bg: transparent;
  --btn-bg-hover: var(--white);
  --btn-fg: var(--white);
  border-color: rgba(255, 255, 255, .45);
}
.btn--onDark:hover {
  --btn-fg: var(--navy-900);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

.btn--sky {
  --btn-bg: var(--sky);
  --btn-bg-hover: #4092CE;
  --btn-fg: var(--ink);
}
.btn--sky:hover { box-shadow: 0 10px 24px rgba(88, 168, 221, .42); }

.btn--sm { min-height: 44px; padding: 10px 20px; font-size: 1rem; }
.btn--block { width: 100%; }

/* Text link with arrow */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-ink);
  transition: gap var(--fast) var(--ease), color var(--fast) var(--ease);
}
.tlink::after { content: "→"; transition: transform var(--fast) var(--ease); }
.tlink:hover { gap: 12px; }
.tlink:hover::after { transform: translateX(3px); }
.section--dark .tlink { color: var(--accent-on-dark); }

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--navy-900);
  color: #9FB3C8;
  font-size: .85rem;
  letter-spacing: .01em;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 40px;
  padding-block: 7px;
}
.topbar__list {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.topbar__item { display: inline-flex; align-items: center; gap: 7px; }
.topbar__item svg { width: 14px; height: 14px; flex: none; color: var(--accent-on-dark); }
.topbar a:hover { color: var(--white); }
.topbar__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(var(--accent-rgb), .16);
  border: 1px solid rgba(var(--accent-rgb), .38);
  color: var(--accent-soft);
  padding: 3px 11px;
  border-radius: 100px;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.topbar__pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-on-dark);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.7); }
}

/* Static header.
   The bar sits in normal flow at the top of the page and scrolls away with it —
   nothing is pinned except the mobile hamburger (see the max-width: 959px
   block). Solid white in one state, so nav content is always dark and the hero
   starts below the bar rather than underneath it. */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--header-h);
}

/* Logo lockup — horizontal brand lockups rebuilt from the supplied artwork */
.logo {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  transition: opacity var(--fast) var(--ease);
}
.logo:hover { opacity: .82; }

/* One lockup in the brand colours at one fixed size. No reversed variant and
   no scrolled state, so the mark never changes colour or height. */
.logo__img {
  display: block;
  height: 44px;      /* ~46px visual height in the header */
  width: auto;
}

/* Footer / dark-section chip.
   Both lockups are dark artwork (charcoal monogram, navy house) so they
   vanish on a dark footer. Seating them on a light brand chip keeps them
   legible and mirrors each logo's own original field. */
.logo--chip {
  background: var(--logo-chip);
  border-radius: var(--r-md);
  padding: 12px 18px;
  box-shadow: var(--shadow-sm);
}
.logo--chip .logo__img { height: 40px; }

/* Nav links */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.nav__link {
  position: relative;
  font-weight: 500;
  font-size: .96rem;
  color: var(--navy-800);
  padding-block: 6px;
  white-space: nowrap;
  transition: color var(--nav-t) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--base) var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { font-weight: 700; }

.nav__divider { width: 1px; height: 24px; background: var(--line); transition: background-color var(--nav-t) var(--ease); }

.nav__actions { display: flex; align-items: center; gap: var(--s-2); }
.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--navy-900);
  white-space: nowrap;
}
.nav__phone svg { width: 18px; height: 18px; color: var(--accent); transition: color var(--nav-t) var(--ease); }
.nav__phone:hover { color: var(--accent-ink); }

/* Hamburger */
.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  background: var(--navy-900);
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav__toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--white);
  margin: 4px auto;
  transition: transform var(--base) var(--ease), opacity var(--fast) var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--navy-900);
  color: #D9E2EC;
  /* Starts below the header, which is opaque and in normal flow. */
  padding-top: var(--s-7);
  padding-bottom: var(--s-8);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(90ch 60ch at 78% 12%, rgba(var(--accent-rgb), .30), transparent 62%),
    radial-gradient(70ch 50ch at 8% 88%, rgba(88, 168, 221, .34), transparent 60%),
    linear-gradient(165deg, var(--navy-800), var(--navy-900) 62%);
}
/* Shingle-course pattern */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .16;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 1px, transparent 1px 40px);
  mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}

.hero__grid {
  display: grid;
  gap: var(--s-5);
  align-items: center;
}

.hero__trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  padding: 8px 16px 8px 10px;
  border-radius: 100px;
  font-size: .88rem;
  font-weight: 500;
  color: #DCE6F0;
  margin-bottom: var(--s-3);
}

/* Large hero lockup. The artwork's edges were originally anti-aliased against
   white, so it is presented on a white plate — that keeps the edges exactly as
   drawn with no halo or colour fringing against the navy hero.
   Native art is 240px tall; the cap of 96px keeps a 2x display inside native
   resolution, so it never upscales and stays sharp. */
.hero__logo {
  display: inline-block;
  width: auto;
  margin-bottom: var(--s-4);
}
.hero__logo--chip {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: clamp(14px, 2vw, 20px) clamp(18px, 2.6vw, 28px);
  box-shadow: 0 18px 40px rgba(6, 18, 31, .32);
}
.hero__logo--chip img {
  display: block;
  width: auto;
  height: clamp(54px, 8vw, 96px);
  max-width: 100%;
}

.hero h1 { color: var(--white); margin-bottom: var(--s-3); }
.hero h1 em {
  font-style: normal;
  color: var(--accent);
  position: relative;
  white-space: nowrap;
}
.hero__sub {
  font-size: 1.2rem;
  color: #B4C4D4;
  max-width: 58ch;
  margin-bottom: var(--s-4);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.hero__note {
  font-size: .9rem;
  color: #8FA3B8;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__note svg { width: 16px; height: 16px; color: var(--sky-400); flex: none; }

/* Hero media panel — designed photo slot */
.media-slot {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    linear-gradient(140deg, var(--navy-700), var(--navy-900));
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, .10);
}
.media-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 46px);
}
.media-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 30% 20%, rgba(var(--accent-rgb),.28), transparent 70%);
}
.media-slot__label {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14, 44, 72, .72);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #C9D8E6;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
}
.media-slot__label::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.media-slot__icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
  color: rgba(255, 255, 255, .16);
}
.media-slot__icon svg { width: 84px; height: 84px; }
.media-slot--light {
  background: linear-gradient(140deg, var(--sky-200), var(--paper-2));
  border-color: var(--line);
}
.media-slot--light .media-slot__icon { color: rgba(10, 29, 51, .16); }
.media-slot--tall { aspect-ratio: 3 / 4; }

/* Slot holding a real photograph rather than the placeholder treatment. The
   frame keeps its 4:3 box, rounding and shadow; the decorative scanlines and
   accent wash are dropped so nothing is laid over the image. */
.media-slot--photo { margin: 0; background: var(--navy-900); }
.media-slot--photo::before,
.media-slot--photo::after { display: none; }
.media-slot--photo picture { position: absolute; inset: 0; }
.media-slot__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Floating credential chip on hero media */
.hero__chip {
  position: absolute;
  z-index: 3;
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 260px;
}
.hero__chip--tl { top: -18px; left: -18px; }
.hero__chip--br { bottom: -20px; right: -14px; }
.hero__chip__icon {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--sky-050);
  color: var(--sky-600);
}
.hero__chip__icon svg { width: 22px; height: 22px; }
.hero__chip strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--navy-900);
  text-transform: uppercase;
}
.hero__chip span { font-size: .78rem; color: var(--text-soft); line-height: 1.3; display: block; }

/* --------------------------------------------------------------------------
   7. STAT STRIP (overlaps hero)
   -------------------------------------------------------------------------- */
.stats-wrap { margin-top: calc(var(--s-6) * -1); position: relative; z-index: 5; }
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.stat {
  padding: var(--s-4) var(--s-3);
  text-align: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.stat::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 3px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--base) var(--ease);
}
.stat:hover::before { opacity: 1; }
.stat:last-child { border-right: 0; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.8vw, 2.7rem);
  line-height: 1;
  color: var(--navy-900);
  letter-spacing: -.03em;
}
.stat__num span { color: inherit; }   /* one colour per value */
.stat__label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   8. MARQUEE / CREDENTIAL BAR
   -------------------------------------------------------------------------- */
.credbar { background: var(--navy-900); padding-block: var(--s-3); overflow: hidden; }
.credbar__track {
  display: flex;
  gap: var(--s-5);
  width: max-content;
  animation: marquee 38s linear infinite;
}
.credbar:hover .credbar__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.credbar__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8FA3B8;
  white-space: nowrap;
}
.credbar__item svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.credbar__item::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--navy-600);
  margin-left: var(--s-5);
}

/* --------------------------------------------------------------------------
   9. FEATURE BLOCKS (alternating)
   -------------------------------------------------------------------------- */
.feature {
  display: grid;
  gap: var(--s-5);
  align-items: center;
}
.feature + .feature { margin-top: var(--s-7); }

.checklist { list-style: none; padding: 0; margin: var(--s-3) 0 var(--s-4); display: grid; gap: 14px; }
.checklist li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 1rem;
}
.checklist li::before {
  content: "";
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 15px no-repeat,
           linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 15px no-repeat,
        linear-gradient(#000, #000);
  mask-composite: exclude;
}
.checklist li strong { display: block; color: var(--navy-900); font-weight: 700; }
.checklist li span { color: var(--text-soft); font-size: .95rem; }
.section--dark .checklist li strong { color: var(--white); }
.section--dark .checklist li span { color: #A9BACC; }

/* --------------------------------------------------------------------------
   10. CARDS — generic
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease), border-color var(--slow) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--sky-200);
}

.grid { display: grid; gap: var(--s-3); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   11. SERVICES GRID (numbered)
   -------------------------------------------------------------------------- */
.svc {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-3) var(--s-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease), border-color var(--slow) var(--ease);
}
.svc::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--sky-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--slow) var(--ease);
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.svc:hover::before { transform: scaleX(1); }
.svc__num {
  position: absolute;
  top: 10px; right: 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--paper-2);
  transition: color var(--slow) var(--ease);
  pointer-events: none;
}
.svc:hover .svc__num { color: var(--sky-200); }
.svc__icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--navy-900);
  color: var(--accent-on-dark);
  margin-bottom: var(--s-2);
}
.svc__icon svg { width: 24px; height: 24px; }
.svc h3 { font-size: 1.12rem; margin-bottom: 8px; position: relative; z-index: 1; }
.svc p { font-size: .95rem; color: var(--text-soft); margin-bottom: var(--s-3); }
.svc .tlink { margin-top: auto; }

/* --------------------------------------------------------------------------
   12. WARRANTY — comparison cards
   -------------------------------------------------------------------------- */
.tiers { display: grid; gap: var(--s-3); align-items: stretch; }
.tier {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease);
}
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tier--featured {
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-md);
}
.tier__ribbon {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--navy-900);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 100px;
  white-space: nowrap;
}
/* Warranty tier badges.
   All three are exported onto an identical 242x276 canvas with their
   "SureSky" wordmarks normalised to the same width and the tier words
   bottom-aligned — so a single fixed height keeps the row uniform even
   though the emblems (cloud / cloud+roof / shield) differ in height.
   Native height is 276px, so 92px display is a 3x downscale — never upscaled. */
.tier__logo,
.wblock__logo {
  display: block;
  height: 92px;
  width: auto;
  max-width: 100%;
}
.tier__logo { margin: 0 auto var(--s-3); }
.wblock__logo { margin: 0 0 var(--s-2); }

.tier__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--navy-900);
  margin-bottom: 6px;
}
.tier__term {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.3rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 4px;
}
.tier__term small {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.tier__kind {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sky-600);
  margin-bottom: var(--s-2);
}
.tier__desc { font-size: .95rem; color: var(--text-soft); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); margin-bottom: var(--s-3); }
.tier__list { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: 11px; font-size: .93rem; }
.tier__list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.tier__list li::before {
  content: "";
  width: 16px; height: 16px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--sky-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.tier--featured .tier__list li::before { background: var(--accent); }
.tier .btn { margin-top: auto; }

/* Warranty deep-dive blocks */
.wblock {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
}
.wblock:last-of-type { border-bottom: 1px solid var(--line); }
.wblock__side { position: relative; }
.wblock__index {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: .9;
  color: var(--sky-200);
  letter-spacing: -.03em;
}
.wblock__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--navy-900);
  margin-top: 6px;
}
.wblock__meta {
  display: inline-block;
  margin-top: 10px;
  background: var(--navy-900);
  color: var(--accent-on-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: var(--r-sm);
}
.wblock__cols { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.wcol {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3);
}
.wcol h4 {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sky-600);
  font-family: var(--font);
  margin-bottom: 12px;
}
.wcol ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: .92rem; color: var(--text-soft); }
.wcol li { padding-left: 18px; position: relative; }
.wcol li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Warranty distinction callout */
.callout {
  display: grid;
  gap: var(--s-3);
  background: var(--navy-900);
  color: #C3D2E0;
  border-radius: var(--r-lg);
  padding: var(--s-4);
  border-left: 4px solid var(--accent);
}
.callout h3 { color: var(--white); }
.callout__split { display: grid; gap: var(--s-3); }
.callout__half {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  padding: var(--s-3);
}
.callout__half h4 {
  font-family: var(--font);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin-bottom: 10px;
}
.callout__half p { font-size: .95rem; color: #A9BACC; }
.callout__half strong { color: var(--white); }

/* --------------------------------------------------------------------------
   13. ROOF SYSTEMS
   -------------------------------------------------------------------------- */
.systems { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
.system {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  transition: border-color var(--base) var(--ease), transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.system:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--sky-200); }
.system__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--sky-400);
  flex: none;
}
.system__name { font-weight: 700; color: var(--navy-900); font-size: .98rem; }
.system__tag {
  margin-left: auto;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}
.system--primary {
  background: var(--navy-900);
  border-color: var(--navy-900);
  grid-column: 1 / -1;
}
.system--primary .system__name { color: var(--white); font-size: 1.15rem; }
.system--primary .system__dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.24); }
.system--primary .system__tag { color: var(--accent-on-dark); }

/* --------------------------------------------------------------------------
   14. WHY US / STEPS
   -------------------------------------------------------------------------- */
.why { display: grid; gap: var(--s-4); }
.why__item { position: relative; padding-top: var(--s-3); border-top: 3px solid var(--accent); }
.why__index {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .18em;
  color: var(--accent-on-dark);
  margin-bottom: 10px;
}
.why__item h3 { color: var(--white); margin-bottom: 10px; }
.why__item p { color: #A9BACC; font-size: .98rem; }

.steps { display: grid; gap: var(--s-4); position: relative; }
.step { position: relative; }
.step__num {
  width: 60px; height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--accent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--navy-900);
  margin-bottom: var(--s-2);
  position: relative;
  z-index: 2;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--text-soft); font-size: .98rem; }
.step .tlink { margin-top: 12px; }

/* --------------------------------------------------------------------------
   14a. ROOF MAPPING
   Reuses the .feature two-column block and .checklist. Only the trust chips
   and the report card are new, and both are built from existing tokens so
   they inherit the same borders, radii, shadows and hover motion as .card.
   -------------------------------------------------------------------------- */
.mapchips {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mapchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .87rem;
  font-weight: 700;
  color: var(--navy-900);
  transition: transform var(--slow) var(--ease),
              box-shadow var(--slow) var(--ease),
              border-color var(--slow) var(--ease);
}
.mapchip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--sky-200);
}
.mapchip svg { width: 15px; height: 15px; flex: none; color: var(--accent); }

/* The card takes the place of a photo in the .feature media column. */
.report {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-sm);
  transition: transform var(--slow) var(--ease),
              box-shadow var(--slow) var(--ease),
              border-color var(--slow) var(--ease);
}
.report:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--sky-200);
}
.report__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.report__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--sky-050);
  border: 1px solid var(--sky-200);
}
.report__icon svg { width: 22px; height: 22px; color: var(--accent-ink); }
.report__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 2px;
}
.report__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--navy-900);
  margin: 0;
}
.checklist--tight { margin: 0; gap: 11px; }
.checklist--tight li { font-size: .95rem; }
/* A contents list, not supporting copy — keep it at full text weight. */
.checklist--tight li span { color: var(--text); font-size: .95rem; }
.report__note {
  margin: var(--s-3) 0 0;
  padding-top: var(--s-2);
  border-top: 1px dashed var(--line);
  font-size: .88rem;
  color: var(--text-soft);
}

/* ---- Sample report viewer -------------------------------------------------
   A framed document preview. The stage is a scroll-snap strip rather than a
   transform-driven slider, so swipe, trackpad and keyboard scrolling all work
   natively and the controls only have to set scrollLeft. .docview__nav stays
   hidden until script.js adds .is-enhanced, which leaves a plain scrollable
   strip — never a row of dead buttons — if the script never runs. */
.docview {
  margin-top: var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.docview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 14px var(--s-3);
  background: var(--sky-050);
  border-bottom: 1px solid var(--line);
}
.docview__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  color: var(--navy-900);
}
.docview__label svg { width: 18px; height: 18px; flex: none; color: var(--accent-ink); }
.docview__count {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}

.docview__stage {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  background: var(--paper-2);
  scrollbar-width: none;          /* the dots and arrows are the affordance */
}
.docview__stage::-webkit-scrollbar { display: none; }
.docview__stage:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* Each page is exactly one stage-width, so page index is scrollLeft /
   clientWidth with no gap or padding maths to correct for. */
.docpage {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  padding: var(--s-3);
  display: grid;
  place-items: center;
}
.docpage img {
  width: auto;
  height: auto;
  max-width: 100%;
  /* Caps the frame height so seven portrait pages stay compact. Native is
     1684px tall, so this only ever scales down. */
  max-height: clamp(340px, 58vh, 600px);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  background: var(--white);
}

.docview__nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-top: 1px solid var(--line);
}
.docview.is-enhanced .docview__nav { display: flex; }

.docbtn {
  width: 48px; height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cta);
  color: var(--cta-text);
  border: 2px solid var(--cta);
  cursor: pointer;
  padding: 0;
  transition: transform var(--base) var(--ease),
              box-shadow var(--base) var(--ease),
              background-color var(--base) var(--ease),
              opacity var(--base) var(--ease);
}
.docbtn svg { width: 20px; height: 20px; }
.docbtn:hover:not(:disabled) {
  background: var(--cta-hover);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 28px var(--cta-glow);
}
.docbtn:disabled { opacity: .32; cursor: default; }

.docdots { display: flex; align-items: center; gap: 2px; }
/* The hit area is 34x40; the visible dot inside it stays small. */
.docdot {
  width: 34px; height: 40px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.docdot::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--sky-200);
  transition: transform var(--base) var(--ease), background-color var(--base) var(--ease);
}
.docdot:hover::before { background: var(--accent-soft); transform: scale(1.25); }
.docdot[aria-current="true"]::before { background: var(--accent); transform: scale(1.45); }

.docview__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 var(--s-3) var(--s-4);
  text-align: center;
}
.docview__note { margin: 0; font-size: .85rem; color: var(--text-soft); }

/* --------------------------------------------------------------------------
   15. REVIEWS
   -------------------------------------------------------------------------- */
.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--shadow-sm);
}
.rating-badge__score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--navy-900);
}
.rating-badge__stars { color: var(--accent); font-size: 1.25rem; letter-spacing: 3px; }
.rating-badge__meta { font-size: .88rem; color: var(--text-soft); margin-top: 4px; }

.reviews { display: grid; gap: var(--s-3); }
.review {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease);
}
.review:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.review::before {
  content: "\201C";
  position: absolute;
  top: 4px; right: 20px;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--paper-2);
  pointer-events: none;
}
.review__stars { color: var(--accent); letter-spacing: 2px; margin-bottom: 12px; font-size: 1rem; }
.review__text { font-size: 1rem; color: var(--text); margin-bottom: var(--s-3); position: relative; z-index: 1; }
.review__who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: var(--s-2); border-top: 1px solid var(--line); }
.review__avatar {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy-900);
  color: var(--accent-on-dark);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .02em;
}
.review__name { font-weight: 700; font-size: .95rem; color: var(--navy-900); line-height: 1.3; }
.review__meta { font-size: .8rem; color: var(--text-soft); }

.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  justify-content: center;
  margin-top: var(--s-4);
}
.platform {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 9px 18px;
  font-weight: 700;
  font-size: .88rem;
  color: var(--navy-800);
  transition: transform var(--base) var(--ease), border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.platform:hover { transform: translateY(-2px); border-color: var(--sky-400); box-shadow: var(--shadow-sm); }
.platform__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sky-500); }

/* --- Empty state -----------------------------------------------------------
   No sample testimonials or ratings are used anywhere on this site. These
   skeleton cards show the layout the client's real reviews will drop into
   without inventing any content. Delete them when real reviews arrive. */
.review--empty { pointer-events: none; }
.review--empty::before { color: var(--paper-2); }
.review--empty .review__stars { color: var(--sky-200); }
.review--empty .review__avatar { background: var(--paper-2); color: transparent; }

.skel {
  display: block;
  height: 11px;
  border-radius: 100px;
  background: var(--paper-2);
}
.skel + .skel { margin-top: 11px; }
.skel--90 { width: 90%; }
.skel--75 { width: 75%; }
.skel--55 { width: 55%; }
.skel--label { height: 13px; width: 90px; margin-bottom: 7px; }
.skel--meta { height: 10px; width: 130px; }

.rating-badge--empty {
  border-style: dashed;
  border-color: var(--sky-400);
  box-shadow: none;
}
.rating-badge--empty .rating-badge__score,
.rating-badge--empty .rating-badge__stars { color: var(--sky-400); }

/* Dashed "content slot" notice — flags a section awaiting client content */
.slot-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 760px;
  margin: var(--s-4) auto 0;
  padding: var(--s-3) var(--s-4);
  background: var(--white);
  border: 1.5px dashed var(--sky-400);
  border-radius: var(--r-lg);
}
.slot-note svg { width: 22px; height: 22px; flex: none; color: var(--sky-600); margin-top: 3px; }
.slot-note strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--navy-900);
  margin-bottom: 4px;
}
.slot-note p { font-size: .94rem; color: var(--text-soft); }

/* --------------------------------------------------------------------------
   16. CONTACT + FORM
   -------------------------------------------------------------------------- */
.contact { display: grid; gap: var(--s-4); align-items: start; }

.info-card {
  background: var(--navy-900);
  color: #C3D2E0;
  border-radius: var(--r-lg);
  padding: var(--s-4);
  border-top: 4px solid var(--accent);
}
/* The card is dark but sits in a light section, so its heading would
   otherwise inherit the dark default heading colour and disappear. */
.info-card h3 { color: var(--white); }
.info-list { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: var(--s-3); }
.info-list li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; }
.info-list__icon {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  color: var(--accent-on-dark);
}
.info-list__icon svg { width: 20px; height: 20px; }
.info-list__label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7E93A8;
  margin-bottom: 3px;
}
.info-list__value { color: var(--white); font-weight: 500; font-size: 1.02rem; line-height: 1.45; }
.info-list__value a:hover { color: var(--accent-on-dark); }
.info-list__value small { display: block; color: #9FB3C8; font-weight: 400; font-size: .87rem; margin-top: 2px; }

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-md);
}
.form-grid { display: grid; gap: var(--s-3); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy-800);
}
.field label .req { color: var(--accent-ink); }
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  min-height: 50px;
  width: 100%;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; }
.field select { appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C5A6B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--sky-500);
  box-shadow: 0 0 0 3px rgba(88, 168, 221, .18);
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--error); background: #FDF4F4; }
.field__error {
  font-size: .82rem;
  color: var(--error);
  font-weight: 500;
  display: none;
  align-items: center;
  gap: 6px;
}
.field[data-invalid="true"] .field__error { display: flex; }

.radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  border-radius: 100px;
  padding: 11px 18px;
  min-height: 46px;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 500;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.radio-pill input { position: absolute; opacity: 0; pointer-events: none; }
.radio-pill__dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--ink-soft);
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.radio-pill:hover { border-color: var(--sky-400); }
.radio-pill:has(input:checked) { border-color: var(--accent); background: #FFF4EC; color: var(--navy-900); font-weight: 700; }
.radio-pill:has(input:checked) .radio-pill__dot { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--white); }
.radio-pill:has(input:focus-visible) { outline: 3px solid var(--sky-500); outline-offset: 2px; }

.form-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .85rem;
  color: var(--text-soft);
  margin-top: var(--s-2);
}
.form-note svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--sky-600); }

.form-status {
  display: none;
  gap: 12px;
  align-items: flex-start;
  background: var(--sky-050);
  border: 1.5px solid var(--sky-400);
  border-left: 4px solid var(--sky-500);
  border-radius: var(--r-md);
  padding: var(--s-3);
  margin-top: var(--s-3);
  font-size: .95rem;
}
.form-status.is-visible { display: flex; }
.form-status strong { display: block; color: var(--navy-900); font-size: 1.02rem; margin-bottom: 3px; }
.form-status svg { width: 22px; height: 22px; flex: none; color: var(--sky-600); }
.form-status a { color: var(--sky-ink); font-weight: 700; text-decoration: underline; }
/* Focused programmatically so screen readers announce it. It isn't an
   interactive control (tabindex="-1"), so the visible ring is just noise. */
.form-status:focus { outline: none; }
/* JS writes the success/error copy in here */
.form-status__text { display: block; }

/* Submitted successfully — 5.3:1 on white */
.form-status--ok {
  background: #EDF7F1;
  border-color: #6FBF97;
  border-left-color: var(--ok);
}
.form-status--ok svg { color: var(--ok); }

/* Submission failed */
.form-status--error {
  background: #FDF4F4;
  border-color: #E39A9A;
  border-left-color: var(--error);
}
.form-status--error svg { color: var(--error); }
.form-status--error a { color: var(--error); }

/* On success the fields are removed and only the confirmation is left,
   so the card doesn't sit there inviting a second submission. */
form.is-sent > *:not(.form-status) { display: none; }

/* --------------------------------------------------------------------------
   17. DIVISIONS (index.html)
   -------------------------------------------------------------------------- */
.divisions { display: grid; gap: var(--s-3); }
.division {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease);
}
.division:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.division__banner {
  height: 190px;
  position: relative;
  background: linear-gradient(140deg, var(--navy-700), var(--navy-900));
  overflow: hidden;
}
.division__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 78% 22%, rgba(var(--accent-rgb),.42), transparent 66%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 24px);
}
.division__banner svg { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; color: rgba(255,255,255,.30); }
.division__body { padding: var(--s-4); display: flex; flex-direction: column; flex: 1; }
.division__status {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  background: var(--accent);
  color: var(--navy-900);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 100px;
}
.division__status--soon { background: rgba(255,255,255,.16); color: var(--white); border: 1px solid rgba(255,255,255,.34); }
.division h3 { font-size: 1.45rem; margin-bottom: 6px; }
.division__kicker {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sky-600);
  margin-bottom: 10px;
}
.division p { color: var(--text-soft); font-size: .97rem; margin-bottom: var(--s-3); }
.division .btn, .division .tlink { margin-top: auto; }
.division--soon { opacity: .82; }
.division--soon .division__banner { background: linear-gradient(140deg, var(--navy-600), var(--navy-800)); }
.division--soon .division__banner::before { background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px); }

.division--feature { grid-column: 1 / -1; }
.division--feature .division__banner { height: 240px; }

/* Value props (index) */
.values { display: grid; gap: var(--s-3); }
.value {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sky-500);
  border-radius: var(--r-md);
  padding: var(--s-3);
  transition: border-left-color var(--base) var(--ease), transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.value:hover { border-left-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.value h3 { font-size: 1.15rem; margin-bottom: 8px; }
.value p { font-size: .95rem; color: var(--text-soft); }

/* CTA banner */
.cta-band {
  background: linear-gradient(120deg, var(--navy-900), var(--navy-700));
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-4);
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60ch 30ch at 50% 0%, rgba(var(--accent-rgb),.30), transparent 70%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: #A9BACC; max-width: 58ch; margin-inline: auto; margin-bottom: var(--s-4); }
.cta-band__btns { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--navy-900); color: #8FA3B8; padding-top: var(--s-6); font-size: .94rem; }
.footer__grid { display: grid; gap: var(--s-4); padding-bottom: var(--s-5); }
.footer h4 {
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin-bottom: var(--s-2);
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer a { transition: color var(--fast) var(--ease); }
.footer a:hover { color: var(--white); }
.footer__about { max-width: 34ch; margin-top: var(--s-3); }
.footer__contact { display: grid; gap: 8px; margin-top: var(--s-3); }
.footer__contact a { color: var(--white); font-weight: 500; }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding-block: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  align-items: center;
  justify-content: space-between;
  font-size: .85rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.footer__note { max-width: 70ch; font-size: .82rem; color: #6E8299; padding-bottom: var(--s-3); }

/* --------------------------------------------------------------------------
   18a. SURESKY INC — INTRO PAGE
   Editorial, not symmetrical: a centred hero and mission, then a left-aligned
   split, a hairline-divided list, and a dark band, so the rhythm changes as
   you scroll instead of repeating one centred stack. Fraunces carries the
   headlines, Manrope everything else. Palette is white + navy with gold as a
   signature detail only — one gold moment per section, never a fill.
   -------------------------------------------------------------------------- */

/* Grain over the dark bands. Flat navy gradients are the flattest, most
   obviously-generated surface on a page; a little tooth kills that. */
.page-inc .section--dark::after,
.page-inc .cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

.intro-hero {
  position: relative;
  background: var(--white);
  padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 104px);
  text-align: center;
  overflow: hidden;
}
/* Soft sky wash behind the mark — barely there, just lifts it off the white */
.intro-hero::before {
  content: "";
  position: absolute;
  top: -32%; left: 50%;
  width: min(1100px, 120%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(88, 168, 221, .13), transparent 70%);
  pointer-events: none;
}
/* Hairline gold rule closes the section */
.intro-hero::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: min(220px, 46%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.intro-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 740px;   /* keeps every line on one comfortable measure */
  margin-inline: auto;
}

/* Unified lockup: the monogram sits centred and overlapping the wordmark,
   reading as one mark rather than two stacked pieces.
   Both parts are sized from --lockup-h, and the overlap is expressed as a
   fraction of it, so the whole thing scales as a single unit at any width. */
.intro-hero__lockup {
  --lockup-h: clamp(104px, 14vw, 176px);
  --lockup-gap: .035;             /* clear space between mark and wordmark,
                                     as a share of --lockup-h so it scales */
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.intro-hero__mark {
  display: block;
  width: auto;
  height: calc(var(--lockup-h) * .74);
  margin: 0 auto calc(var(--lockup-h) * var(--lockup-gap));
  position: relative;
  z-index: 1;                     /* monogram reads as the focal point */
}
.intro-hero__word {
  display: block;
  width: auto;
  height: calc(var(--lockup-h) * .30);
  margin: 0 auto;
  position: relative;
  z-index: 0;                     /* wordmark anchored behind */
}

/* Motto as the brand signature — the light-surface twin of .signature on the
   sky band. Serif italic, generously set, flanked by fine gold rules. */
.motto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 26px);
  margin-top: clamp(26px, 3.6vw, 40px);
}
.motto::before,
.motto::after {
  content: "";
  height: 1px;
  width: clamp(26px, 9vw, 84px);
  flex: none;
}
.motto::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.motto::after  { background: linear-gradient(90deg, var(--gold), transparent); }
.motto__text {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.15rem, 2.8vw, 1.85rem);
  font-variation-settings: "opsz" 144;
  letter-spacing: .012em;
  color: var(--navy-900);
  white-space: nowrap;
}

/* The one H1. Serif, mixed case, tight — the largest thing on the page after
   the lockup, with a single gold word carrying the claim. */
.intro-hero__title {
  margin: clamp(24px, 3.2vw, 38px) auto 0;
  max-width: 17ch;
  font-size: clamp(2rem, 5.4vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -.032em;
  color: var(--navy-900);
}
.intro-hero__title em { font-style: italic; color: var(--gold-ink); }

.intro-hero__lead {
  margin: clamp(16px, 2.2vw, 22px) auto 0;
  max-width: 52ch;
  font-size: clamp(1rem, 1.35vw, 1.1rem);
  line-height: 1.72;
  color: var(--text-soft);
}

.intro-hero__cta { margin-top: clamp(28px, 3.8vw, 42px); }

.intro-hero__note {
  margin: clamp(16px, 2.2vw, 22px) 0 0;
  font-size: .86rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

/* Oversized focal CTA — the single most important control on the page */
.btn--xl {
  min-height: 64px;
  padding: 18px 38px;
  font-size: clamp(.9rem, 1.35vw, 1.05rem);
  border-radius: var(--r-md);
  white-space: normal;
  max-width: 100%;
}

/* --- Editorial display type ------------------------------------------------
   Fraunces carries ONLY the major headlines on this page. Everything else —
   buttons, eyebrows, labels, nav, footer — stays Manrope, and the Homes page
   is untouched because every rule here is scoped to .page-inc.

   The base h1/h2 are uppercase Manrope 800 with tight tracking; a high-contrast
   serif wants the opposite, so these reset the case and open the weight up.
   opsz is pushed toward the display cut so the thick/thin contrast reads. */
.page-inc h1,
.page-inc h2,
.page-inc .dtitle,
.page-inc .statement,
.page-inc .cta-band h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -.028em;
  font-variation-settings: "opsz" 120;
}
.page-inc h3 { letter-spacing: -.005em; }

/* Eyebrows go the other way — small, quiet, widely tracked. The contrast
   between these and the headlines is what makes the hierarchy feel set
   rather than defaulted. */
.page-inc .eyebrow {
  font-size: .7rem;
  letter-spacing: .28em;
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
}
/* Grey, not gold: an eyebrow appears in every section, so gilding it would
   turn the accent into a repeating device instead of a signature. */
.page-inc .eyebrow::before { width: 22px; height: 1px; background: var(--line); }
.page-inc .section--dark .eyebrow { color: rgba(255, 255, 255, .62); }

/* --- Mission statement ----------------------------------------------------
   Sits directly off the hero, so it carries no eyebrow or heading — it reads
   as one continuous thought with the lockup above it. */
.mission { text-align: center; }
.mission__text {
  margin: 0 auto;
  max-width: 60ch;
  font-size: clamp(1.06rem, 1.5vw, 1.22rem);
  line-height: 1.8;
  color: var(--text);
}
.mission__close {
  margin: var(--s-4) auto 0;
  max-width: 44ch;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.14rem, 2vw, 1.5rem);
  font-variation-settings: "opsz" 96;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--navy-900);
}

/* --- Statement line — the closing beat of a section ------------------------
   One gold emphasis, no rules or fills. This is the whole gold budget for
   the sections it appears in. */
.statement {
  margin: var(--s-6) auto 0;
  max-width: 22ch;
  text-align: center;
  font-weight: 500;
  font-size: clamp(1.7rem, 4.4vw, 3rem);
  line-height: 1.14;
  color: var(--navy-900);
}
.statement em { font-style: normal; color: var(--gold-ink); }

/* --- Who we are: two-column editorial split -------------------------------
   Deliberately asymmetric and left-aligned, against the centred rhythm of the
   mission above and the vision below. */
.split { display: grid; gap: var(--s-4); }
.split__lead .dtitle {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  margin-bottom: var(--s-2);
}
.split__sub {
  margin: 0;
  max-width: 26ch;
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.45;
  color: var(--sky-ink);
}
.split__body p {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.82;
  color: var(--text-soft);
}
.split__body p + p { margin-top: var(--s-3); }

/* --- Body prose ----------------------------------------------------------- */
.prose { max-width: 64ch; margin-inline: auto; }
.prose p, .prose--single {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.82;
  color: var(--text-soft);
}
.prose p + p { margin-top: var(--s-3); }
.prose--single { max-width: 62ch; margin-inline: auto; }

/* --- Full-bleed sky band ---------------------------------------------------
   A roofline photograph carrying the motto a second time, so the line reads
   as a signature rather than a tagline. Already a direct child of <main> with
   no .container, so it is full-bleed without the 100vw trick, which would
   overflow by the scrollbar width. Navy sits underneath as the colour while
   the image loads. */
.skyband {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(210px, 26vw, 340px);
  background: var(--navy-900);
  overflow: hidden;
}
.skyband picture {
  position: absolute;
  inset: 0;
}
/* The source is 2.14:1 but the band runs much wider than that on desktop, so
   cover crops vertically. Biasing below centre keeps the skyline and the
   shingle roof in frame rather than filling with sky. */
.skyband__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
/* Holds the motto legible over the photograph, and tints the whole image
   toward the site navy so it reads as part of the palette. */
.skyband__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 33, 54, .58), rgba(11, 33, 54, .72)),
    radial-gradient(70ch 30ch at 50% 50%, rgba(27, 76, 121, .34), transparent 74%);
  pointer-events: none;
}
.skyband__motto {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--s-5) var(--gutter);
  text-align: center;
}

/* --- Motto as a signature --------------------------------------------------
   Shared by the hero and the sky band: wide tracking, a single gold hairline
   beneath, nothing else. */
.signature {
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 4.6vw, 3.2rem);
  font-variation-settings: "opsz" 144;
  letter-spacing: .01em;
  line-height: 1.2;
  color: var(--white);
  /* Guards the line where it crosses the brightest part of the sunset */
  text-shadow: 0 2px 18px rgba(11, 33, 54, .55);
}
.signature::after {
  content: "";
  display: block;
  width: 54px;
  height: 1px;
  margin: clamp(14px, 2vw, 22px) auto 0;
  background: var(--gold);
}

/* --- Why SureSky: numbered editorial list ---------------------------------
   Hairline-divided rows with hanging numerals — a contents page, not a card
   grid. The numeral is decorative; the ordered list carries the semantics. */
.vlist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.vitem {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-3);
  align-items: start;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--hover-t) var(--ease);
}
.vitem:hover { background: rgba(20, 58, 94, .022); }
.vitem__num {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-variation-settings: "opsz" 144;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--sky-200);
  transition: color var(--hover-t) var(--ease);
}
.vitem:hover .vitem__num { color: var(--gold); }
.vitem__body { max-width: 62ch; }
.vitem__body h3 {
  margin-bottom: 8px;
  font-family: var(--font);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy-900);
}
.vitem__body p { margin: 0; font-size: 1.02rem; line-height: 1.72; color: var(--text-soft); }

/* --- The bigger vision ----------------------------------------------------
   The heaviest band on the page: navy field, grain, and the growth arc drawn
   as a connected run of stops. */
.vision { overflow: hidden; }
.vision::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(72ch 36ch at 50% 0%, rgba(27, 76, 121, .55), transparent 72%);
  pointer-events: none;
}
.vision > .container { position: relative; z-index: 1; }
.vision__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.06;
}
.vision__title em { font-style: normal; color: var(--gold); }
.vision__lead {
  max-width: 66ch;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  line-height: 1.8;
  color: #A9BACC;
}

.track { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; }
.track__stop {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 var(--s-3);
  padding: var(--s-3) 0;
}
.track__stop + .track__stop { border-top: 1px solid rgba(255, 255, 255, .10); }
/* Quiet numerals — the gold in this band belongs to the headline word and the
   rail dots, and three gold elements would be one device too many. */
.track__num {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-variation-settings: "opsz" 144;
  line-height: 1;
  color: rgba(255, 255, 255, .34);
}
.track__rail { display: none; }          /* dots and rule are a wide-screen device */
.track__label {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--white);
}

.vision__close {
  max-width: 30ch;
  margin: var(--s-6) auto 0;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 2.05rem);
  font-variation-settings: "opsz" 120;
  line-height: 1.28;
  letter-spacing: -.022em;
  color: var(--white);
}

/* --- Our promise ---------------------------------------------------------- */
.promise__title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.16; }
/* Kicker and list share one 720px column so their left edges line up */
.promise__kicker {
  max-width: 720px;
  margin: var(--s-4) auto 0;
  font-family: var(--font);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.promise-list {
  list-style: none;
  margin: var(--s-2) auto 0;
  padding: 0;
  max-width: 720px;
  display: grid;
  gap: 0;
}
.promise-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.08rem;
  letter-spacing: -.012em;
  color: var(--navy-900);
}
.promise-list li svg { width: 16px; height: 16px; flex: none; color: var(--sky-ink); }

/* --- Closing CTA ---------------------------------------------------------- */
.endcta { margin: 0; text-align: center; }

/* --- Head-office contact form ---------------------------------------------
   Sits under the routing band, so it is visibly the secondary path: a plain
   white card rather than a second dark panel competing with it. Fields,
   validation states and status message all reuse the shared form system. */
.page-inc .form-card { margin-top: var(--s-3); }
.form-card__title {
  margin-bottom: 5px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-variation-settings: "opsz" 96;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--navy-900);
}
.form-card__sub {
  margin: 0 0 var(--s-3);
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text-soft);
}
/* Marks a field as not required, opposite of .req */
.field__opt {
  margin-left: 6px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- One hover speed across the page --------------------------------------
   These elements each shipped with their own duration (180/240/300ms). The
   inconsistency is small but it is exactly what makes a surface feel
   assembled rather than designed, so they are normalised to one. */
.page-inc .btn,
.page-inc .tlink,
.page-inc .dcard,
.page-inc .nav__link,
.page-inc .nav__link::after,
.page-inc .nav__phone,
.page-inc .logo,
.page-inc .topbar a,
.page-inc .footer a,
.page-inc .skip-link {
  transition-duration: var(--hover-t);
  transition-timing-function: var(--ease);
}

/* --- Divisions ------------------------------------------------------------ */
.dgrid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
  max-width: 1040px;
  margin-inline: auto;
}
.dcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  min-height: 268px;
  padding: var(--s-4) var(--s-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--slow) var(--ease),
              box-shadow var(--slow) var(--ease),
              border-color var(--slow) var(--ease);
}
.dcard--live { border-top: 3px solid var(--gold); }
.dcard--live:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--sky-200);
  border-top-color: var(--gold);
}
/* The real division logo carries the name — no duplicated text heading */
.dcard__title { margin: 0; }
.dcard__logo {
  display: block;
  width: auto;
  height: clamp(42px, 5vw, 54px);
  margin-inline: auto;
}
.dcard__status {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.dcard__desc {
  margin: 0;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 30ch;
}
.dcard .tlink { margin-top: 2px; }

/* Closing band — a fine gold rule ties it back to the motto and live card */
.page-inc .cta-band { border-top: 2px solid var(--gold); }
/* The divisions grid and the closing band read as one block, not two */
.page-inc #contact { padding-top: 0; }

/* Reserved slot — clearly an intentional placeholder, not a broken card */
.dcard--soon {
  background: transparent;
  border-style: dashed;
  border-color: var(--line);
}
.dcard--soon .dcard__status { color: var(--ink-soft); }
.dcard__plus {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px dashed var(--sky-400);
  color: var(--sky-ink);
  font-size: 1.3rem;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   18b. FLOATING "FREE ESTIMATE" BUTTON
   Bottom-LEFT by design — the bottom-right corner is reserved for the AI chat
   widget. Hidden while #estimate is on screen (see script.js).
   -------------------------------------------------------------------------- */
.fab-estimate {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 950;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 22px;
  background: var(--cta);
  color: var(--cta-text);
  border: 2px solid var(--cta);
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  animation: fab-bob 3.4s var(--ease) infinite;
  /* Revealed by script.js once the hero (which carries its own CTA) has
     scrolled past, and re-hidden while #estimate is on screen. */
  transition: transform var(--base) var(--ease),
              box-shadow var(--base) var(--ease),
              background-color var(--base) var(--ease),
              opacity var(--slow) var(--ease),
              visibility var(--slow);
}
.fab-estimate svg { width: 18px; height: 18px; flex: none; }

/* Gentle bob — small amplitude so it reads as a nudge, not a distraction */
@keyframes fab-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.fab-estimate:hover,
.fab-estimate:focus-visible {
  animation-play-state: paused;   /* settle while the user is engaging */
  background: var(--cta-hover);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 34px var(--cta-glow);
}
.fab-estimate:active { transform: translateY(-1px) scale(.99); }

/* Hidden while the estimate form is already on screen */
.fab-estimate.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.96);
  animation-play-state: paused;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   18d. PAGE SPLASH
   A brand mark that fades in and back out over the top of the page on load.

   Deliberately CSS-only and fixed-duration. A splash driven by JS or by the
   real load event is a trap: if the script fails, or an asset stalls, the
   overlay sits over the content forever. This one self-clears on a timeline
   the browser owns, so nothing can leave it stuck.

   White ground on both pages, each carrying its own mark in full colour.
   -------------------------------------------------------------------------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  background: var(--white);
  animation: splash-out 1150ms var(--ease) forwards;
}
.splash__logo {
  width: min(260px, 54vw);
  height: auto;
  animation: splash-mark 1150ms var(--ease) forwards;
}
/* Pointer events are released as soon as the fade starts, so the page is
   usable before the overlay has finished clearing. */
@keyframes splash-out {
  0%, 62%   { opacity: 1; visibility: visible; pointer-events: auto; }
  63%       { pointer-events: none; }
  100%      { opacity: 0; visibility: hidden; pointer-events: none; }
}
@keyframes splash-mark {
  0%   { opacity: 0; transform: translateY(7px) scale(.985); }
  32%  { opacity: 1; transform: none; }
  62%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-5px) scale(1.012); }
}

/* --------------------------------------------------------------------------
   19. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   20. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
  .systems { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat { border-bottom: 0; }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: repeat(2, 1fr); }
  .divisions { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(2, 1fr); }
  .callout__split { grid-template-columns: repeat(2, 1fr); }
  .wblock__cols { grid-template-columns: repeat(2, 1fr); }
  .form-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps::before {
    content: "";
    position: absolute;
    top: 30px; left: 12%;
    width: 76%; height: 2px;
    background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
    z-index: 0;
  }
  .why { grid-template-columns: repeat(3, 1fr); }
  .division--feature { display: grid; grid-template-columns: 1.05fr 1fr; }
  .division--feature .division__banner { height: 100%; min-height: 300px; }
  .dgrid { grid-template-columns: repeat(3, 1fr); }
  .promise-list { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-4); }
  /* Hanging numerals move out into their own column */
  .vitem { grid-template-columns: 4.5rem 1fr; gap: 0 var(--s-4); }
}

/* The drawer carries its own CTA for mobile; on desktop the header CTA in
   .nav__actions is the only one, so hide the in-drawer duplicate. */
@media (min-width: 960px) {
  .nav__links > .btn { display: none; }
}

@media (min-width: 960px) {
  :root { --gutter: 40px; --header-h: 84px; }
  /* Desktop only: the bar pins to the top of the viewport. Sticky keeps its
     space in normal flow, so the hero still starts below it — no negative
     offsets needed, and the colours are identical to the static state.
     Below 960px the header scrolls away and only .nav__toggle is pinned. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 900;
  }
  /* Anchor targets have to clear the pinned bar here; on mobile nothing
     covers them, so the base rule stays at a plain 16px. */
  html { scroll-padding-top: calc(var(--header-h) + 16px); }
  .section { padding-block: var(--s-7); }
  .section--tight { padding-block: var(--s-6); }
  /* Restated here because the plain .section rule above would otherwise
     flatten the rhythm back out at this width. */
  .section--airy { padding-block: calc(var(--s-7) * 1.4); }
  .section--snug { padding-block: var(--s-6) var(--s-7); }
  .hero { padding-top: var(--s-8); }
  .hero__grid { grid-template-columns: 1.12fr .88fr; gap: var(--s-6); }
  .feature { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .feature--rev .feature__media { order: -1; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .tiers { grid-template-columns: repeat(3, 1fr); }
  .tier--featured { transform: scale(1.03); }
  .tier--featured:hover { transform: scale(1.03) translateY(-4px); }
  .reviews { grid-template-columns: repeat(3, 1fr); }
  .systems { grid-template-columns: repeat(3, 1fr); }
  .contact { grid-template-columns: .82fr 1.18fr; gap: var(--s-5); }
  .wblock { grid-template-columns: .32fr .68fr; gap: var(--s-5); }
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s-5); }
  .values { grid-template-columns: repeat(3, 1fr); }

  /* Who we are: statement left, argument right. The left column is the
     narrower of the two so the body copy holds the reading measure. */
  .split { grid-template-columns: 0.86fr 1fr; gap: var(--s-6); align-items: start; }

  /* Numerals get more room and the copy indents off them */
  .vitem { grid-template-columns: 6rem 1fr; gap: 0 var(--s-5); padding: var(--s-5) 0; }

  /* The growth arc becomes a connected horizontal run: numeral, a dot sitting
     on a continuous rule, then the label. The rule is drawn per stop and
     trimmed at the two ends, so it needs no magic offset from the top. */
  .track { grid-template-columns: repeat(4, 1fr); }
  .track__stop {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 18px;
    padding: 0 var(--s-2);
    border-top: 0;
  }
  .track__stop + .track__stop { border-top: 0; }
  .track__rail {
    display: grid;
    place-items: center;
    position: relative;
    width: 100%;
    height: 11px;
  }
  .track__rail::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    height: 1px;
    background: rgba(255, 255, 255, .16);
  }
  .track__stop:first-child .track__rail::before { left: 50%; }
  .track__stop:last-child .track__rail::before { right: 50%; }
  .track__dot {
    position: relative;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 5px var(--navy-900);
    transition: transform var(--hover-t) var(--ease);
  }
  .track__stop:hover .track__dot { transform: scale(1.4); }
  .track__label { max-width: 17ch; }
}

/* Mobile nav */
@media (max-width: 959px) {
  /* The hamburger is the ONE pinned element on the site. It is lifted out of
     the bar with position:fixed so it stays reachable after the header has
     scrolled away, and sits above the drawer (z-index 899) so it can always
     close it. No ancestor may carry backdrop-filter/transform, or the button
     would anchor to that box instead of the viewport. */
  .nav__toggle {
    display: grid;
    position: fixed;
    top: 12px;
    right: var(--gutter);
    z-index: 950;
    /* The ring keeps the navy button legible on every backdrop it passes over
       — the navy topbar at rest, white sections and the dark hero on scroll. */
    border: 2px solid rgba(255, 255, 255, .92);
    box-shadow: 0 6px 18px rgba(16, 35, 58, .28);
  }
  /* Reserve the space the fixed button vacated so it never covers the phone
     number sitting at the end of the bar. */
  .nav { padding-right: 58px; }
  /* Navy-on-navy would disappear against the open drawer, so the button
     inverts while it is showing the close X. */
  body.nav-open .nav__toggle { background: var(--white); }
  body.nav-open .nav__toggle span { background: var(--navy-900); }
  /* The floating button outranks the drawer, so stand it down while the
     drawer is open rather than letting it punch through the panel. */
  body.nav-open .fab-estimate { display: none; }

  .nav__phone .nav__phone-label { display: none; }
  .nav__links {
    position: fixed;
    /* `top` is overridden inline by script.js so the drawer starts just below
       the header at rest, and full-height once the header has scrolled off. */
    inset: var(--header-h) 0 0;
    background: var(--navy-900);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-3) var(--gutter) var(--s-6);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--slow) var(--ease);
    z-index: 899;
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__link {
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
  }
  .nav__link::after { display: none; }
  .nav__link.is-active { color: var(--accent-on-dark); }
  .nav__divider { display: none; }
  .nav__links .btn { margin-top: var(--s-3); }
  .nav__actions .btn--header { display: none; }
  .topbar__list .topbar__item--areas { display: none; }
}

@media (max-width: 719px) {
  /* Keep the hero headline and CTA high on small screens */
  .hero { padding-top: var(--s-4); padding-bottom: var(--s-7); }

  /* Seven dots plus two 48px arrows will not fit a phone without shrinking
     the hit areas below a comfortable size. Swipe, arrows and the page
     counter cover navigation here, so the dots stand down instead. */
  .docdots { display: none; }
  .docview__bar { padding: 12px var(--s-2); }
  .docview__label { font-size: .88rem; }
  .docpage { padding: var(--s-2); }
  .docview__nav { gap: var(--s-4); }
  .hero__logo--chip { padding: 9px 14px; }
  .hero__logo--chip img { height: 46px; }
  .hero__trust { padding: 7px 13px 7px 9px; font-size: .8rem; margin-bottom: var(--s-2); }
  .hero__sub { font-size: 1.02rem; margin-bottom: var(--s-3); }

  .tier__logo, .wblock__logo { height: 78px; }
  .logo__img { height: 36px; }
  /* Compact FAB so it never sits over body copy or the footer form */
  .fab-estimate {
    left: 12px;
    bottom: 12px;
    min-height: 46px;
    padding: 11px 18px;
    font-size: .84rem;
  }
  .hero__logo--chip { padding: 10px 16px; }
  .logo--chip { padding: 10px 14px; }
  .logo--chip .logo__img { height: 34px; }
  .topbar__inner { justify-content: center; }
  .topbar__item--hours { display: none; }
  .hero__chip { display: none; }
  .stats-wrap { margin-top: calc(var(--s-5) * -1); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(n+3) { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   21. MOTION PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* No splash at all. Zeroing the duration would still flash the overlay for
     a frame, so it is removed from the page outright. */
  .splash { display: none; }

  /* Kill the movement outright — zeroing durations alone would still snap
     elements to their transformed position instantly. Colour and shadow
     feedback is kept so hover states remain legible. */
  .btn:hover, .btn:active,
  .fab-estimate, .fab-estimate:hover, .fab-estimate:active,
  .card:hover, .svc:hover, .tier:hover, .review:hover,
  .value:hover, .division:hover, .system:hover, .platform:hover,
  .track__stop:hover .track__dot,
  .docbtn:hover, .mapchip:hover, .report:hover,
  .logo:hover, .step:hover {
    transform: none !important;
    animation: none !important;
  }
  .btn::after { display: none; }          /* no sheen sweep */
  .btn:hover .btn__arrow,
  .tlink:hover::after { transform: none !important; }
}

/* --------------------------------------------------------------------------
   22. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .topbar, .credbar, .hero::after, .splash { display: none !important; }
  body { background: #fff; }
  .section { padding-block: 24px; }
}