/* ==========================================================================
   Holcomb Public Adjusting — Halls, Tennessee
   Public adjusting / property claim representation.

   Art direction: a claim file. Ivory paper, navy ink, teal + bronze from the
   logo. Editorial
   composition — hairline rules, small-caps kickers, oversized numerals, wide
   photo breaks. Classic and professional, per the intake.

   Motion: CSS only. No scroll library, nothing that intercepts native scroll.
   One IntersectionObserver adds .in to .rv elements; everything else is a
   transition or a keyframe. prefers-reduced-motion switches all of it off.

   Contents
     01  tokens
     02  reset + base
     03  typography
     04  layout primitives
     05  buttons + links
     06  header, mobile sheet, sticky call bar
     07  hero
     08  trust strip
     09  split (photo pair + argument)
     10  services
     11  process ledger
     12  full-bleed photo break
     13  documentation band
     14  file grid (gallery)
     15  reviews rail
     16  service area
     17  FAQ
     18  CTA band
     19  form
     20  footer
     21  page header (interior pages)
     22  motion + reveal
     23  utilities
   ========================================================================== */

/* ============================================================ 01  tokens == */
:root {
  /* --- the brand tokens. THESE COME FROM THE LOGO (operator read it directly,
         2026-09-10): a TEAL shield/roof mark with BRONZE "HOLCOMB" lettering
         and teal "PUBLIC ADJUSTING". Teal is the primary accent — CTAs,
         links, highlights, pills, focus. Bronze is the secondary, editorial
         layer — kickers, numerals, corner rules, stars. Navy stays as the
         neutral base. There is no yellow/gold anywhere in this brand. --- */
  --brand-deep:   #12283F;   /* navy — rich backgrounds, headings */
  --brand-accent: #3E9FAE;   /* teal — the shield: primary CTA, links, rules */
  --brand-second: #A16B3F;   /* bronze — the lettering: kickers, numerals */
  --brand-paper:  #F7F4ED;   /* ivory — the page */

  /* derived */
  --navy:      var(--brand-deep);
  --navy-2:    #0C1B2C;
  --navy-3:    #1C3E60;
  --navy-soft: #24486B;
  --teal:      var(--brand-accent);
  --teal-lt:   #6CC3D2;      /* teal light enough to read on navy (7.4:1) */
  --teal-ink:  #1E6A78;      /* teal dark enough for small text on paper (5.6:1) */
  --bronze:    var(--brand-second);
  --bronze-lt: #C79063;      /* bronze on navy (5.4:1) */
  --bronze-ink:#7C4F2C;      /* bronze on paper (6.3:1) */
  --paper:     var(--brand-paper);
  --paper-2:   #F1ECE1;
  --paper-3:   #E7E0D2;
  --ink:       #14181D;
  --ink-2:     #3C444E;
  --ink-3:     #6B737D;
  --white:     #FFFFFF;

  --line:      rgba(18, 40, 63, .16);
  --line-2:    rgba(18, 40, 63, .09);
  --line-lt:   rgba(255, 255, 255, .18);
  --line-lt-2: rgba(255, 255, 255, .10);

  --sh-1: 0 1px 2px rgba(12, 27, 44, .06), 0 6px 18px rgba(12, 27, 44, .06);
  --sh-2: 0 2px 4px rgba(12, 27, 44, .07), 0 18px 44px rgba(12, 27, 44, .12);
  --sh-3: 0 30px 70px rgba(12, 27, 44, .22);

  --display: 'Archivo', 'Archivo Black', Georgia, serif;
  --body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --pad:   clamp(20px, 5vw, 40px);
  --sec-y: clamp(58px, 9vw, 116px);
  --gap:   clamp(18px, 3vw, 32px);

  --r-sm: 2px;
  --r:    3px;
  --r-lg: 4px;

  --hdr-h: 74px;
  --ease:  cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 900px) {
  :root { --hdr-h: 88px; }
}
/* the centred masthead runs two rows once the nav appears: logo row + nav row */
@media (min-width: 1140px) {
  :root { --hdr-h: 128px; }
}

/* ======================================================= 02  reset + base == */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

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

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 0;
}

::selection { background: var(--teal); color: #14181D; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.hero :focus-visible,
.ft :focus-visible,
.ctab :focus-visible { outline-color: var(--teal-lt); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 14px 20px;
  font-weight: 700;
}
.skip:focus {
  left: 12px;
  top: 12px;
}

/* ====================================================== 03  typography ==== */
h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 .5em;
  line-height: 1.06;
  letter-spacing: -.021em;
  font-variant-ligatures: none;
}

h1 {
  font-size: clamp(37px, 8.6vw, 74px);
  line-height: 1.02;
  letter-spacing: -.028em;
}
h2 {
  font-size: clamp(29px, 5.6vw, 50px);
  letter-spacing: -.024em;
}
h3 {
  font-size: clamp(21px, 3vw, 27px);
  line-height: 1.16;
  letter-spacing: -.018em;
}
h4 {
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.25;
  letter-spacing: -.012em;
}

.accent { color: var(--teal); }
.on-dark .accent,
.hero .accent,
.ctab .accent,
.break .accent { color: var(--teal-lt); }

/* the kicker — small caps with a bronze rule running out of it (bronze is the
   secondary of the logo system: the "HOLCOMB" lettering) */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--bronze-ink);
}
.eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--bronze) 0%, rgba(161, 107, 63, 0) 100%);
  max-width: 120px;
}
.eyebrow.c { justify-content: center; }
.eyebrow.c::before {
  content: "";
  flex: 0 1 90px;
  height: 1px;
  background: linear-gradient(270deg, var(--bronze) 0%, rgba(161, 107, 63, 0) 100%);
}
.eyebrow.c::after { flex: 0 1 90px; }
.on-dark .eyebrow,
.ctab .eyebrow,
.break .eyebrow { color: var(--bronze-lt); }
.on-dark .eyebrow::after,
.on-dark .eyebrow::before,
.ctab .eyebrow::after,
.ctab .eyebrow::before,
.break .eyebrow::after,
.break .eyebrow::before {
  background: linear-gradient(90deg, var(--bronze-lt) 0%, rgba(199, 144, 99, 0) 100%);
}
.eyebrow.c::before,
.on-dark .eyebrow.c::before {
  background: linear-gradient(270deg, var(--bronze-lt) 0%, rgba(199, 144, 99, 0) 100%);
}

.lead {
  font-size: clamp(16.5px, 2.1vw, 19px);
  line-height: 1.56;
  color: var(--ink-2);
  max-width: 58ch;
}
.on-dark .lead,
.hero .lead,
.ctab .lead,
.break .lead { color: rgba(255, 255, 255, .84); }

.sm { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }
.on-dark .sm { color: rgba(255, 255, 255, .62); }

.on-dark { color: rgba(255, 255, 255, .88); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }

/* the // separator used through dense copy runs */
.sep {
  color: var(--teal);
  font-weight: 700;
  padding: 0 .35em;
}

/* ================================================ 04  layout primitives === */
.wrap {
  width: 100%;
  max-width: calc(1140px + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap-w {
  width: 100%;
  max-width: calc(1400px + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap-n {
  width: 100%;
  max-width: calc(820px + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.sec {
  position: relative;
  padding-block: var(--sec-y);
}
.sec-t { padding-top: clamp(38px, 6vw, 74px); }
.sec-b { padding-bottom: clamp(38px, 6vw, 74px); }

.bg-paper2 { background: var(--paper-2); }
.bg-navy {
  background: var(--navy);
  color: rgba(255, 255, 255, .88);
}
.bg-deep {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(36, 72, 107, .55) 0%, rgba(12, 27, 44, 0) 62%),
    var(--navy-2);
  color: rgba(255, 255, 255, .88);
}

/* paper texture: a whisper of tone so nothing is sterile white */
.bg-mist {
  background:
    radial-gradient(100% 70% at 88% 4%, rgba(62, 159, 174, .07) 0%, rgba(62, 159, 174,0) 60%),
    radial-gradient(80% 60% at 4% 96%, rgba(18, 40, 63, .06) 0%, rgba(18, 40, 63, 0) 60%),
    var(--paper);
}

/* a hairline that spans the container — used between bands */
.rule {
  height: 1px;
  background: var(--line);
}
.rule-d { background: var(--line-lt-2); }

/* the double rule — the classic device this site leans on */
.drule {
  position: relative;
  height: 4px;
  margin: 0;
}
.drule::before,
.drule::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
.drule::before { top: 0; }
.drule::after  { bottom: 0; }

/* section heading, split left/right on wide screens */
.shead {
  margin-bottom: clamp(30px, 4.5vw, 54px);
  max-width: 760px;
}
.shead-split {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(30px, 4.5vw, 56px);
}
.shead-split h2 { margin-bottom: 0; }
@media (min-width: 900px) {
  .shead-split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: end;
    gap: 40px;
  }
  .shead-split .lead { padding-bottom: 8px; }
}
.shead.c { margin-inline: auto; text-align: center; }
.shead.c .lead { margin-inline: auto; }

/* photo frame — carries its own gradient so a dead URL degrades to a panel */
.ph {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background:
    linear-gradient(150deg, var(--navy-3) 0%, var(--navy) 55%, var(--navy-2) 100%);
  box-shadow: var(--sh-2);
}
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  border-radius: inherit;
  pointer-events: none;
}
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ph-tall  { aspect-ratio: 4 / 5; }
.ph-sq    { aspect-ratio: 1 / 1; }
.ph-wide  { aspect-ratio: 16 / 10; }
.ph-band  { aspect-ratio: 21 / 9; }

/* a bronze corner tick — repeated small mark, cheap and specific */
.tick {
  position: relative;
}
.tick::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border-top: 2px solid var(--bronze);
  border-left: 2px solid var(--bronze);
  z-index: 2;
}

/* ==================================================== 05  buttons + links = */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .012em;
  text-align: center;
  line-height: 1.15;
  transition: transform .22s var(--ease), background-color .22s ease,
              color .22s ease, border-color .22s ease, box-shadow .22s ease;
  will-change: transform;
}
.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
}

.btn-p {
  background: var(--teal);
  color: #14181D;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, var(--sh-1);
}
.btn-p:hover {
  background: var(--teal-lt);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, var(--sh-2);
}
.btn-p:active { transform: translateY(0); }

.btn-d {
  background: var(--navy);
  color: #fff;
  box-shadow: var(--sh-1);
}
.btn-d:hover {
  background: var(--navy-3);
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}

.btn-o {
  background: transparent;
  color: var(--navy);
  border-color: rgba(18, 40, 63, .32);
}
.btn-o:hover {
  border-color: var(--navy);
  background: rgba(18, 40, 63, .05);
  transform: translateY(-2px);
}

.btn-g {
  background: rgba(255, 255, 255, .07);
  color: #fff;
  border-color: rgba(255, 255, 255, .38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-g:hover {
  background: rgba(255, 255, 255, .16);
  border-color: #fff;
  transform: translateY(-2px);
}

.btn-wide { width: 100%; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cta-row.c { justify-content: center; }
.cta-row .btn { flex: 1 1 220px; }
@media (min-width: 620px) {
  .cta-row .btn { flex: 0 0 auto; }
}

/* the text link with a sliding arrow */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 3px;
  border-bottom: 2px solid var(--teal);
  transition: color .2s ease, gap .2s var(--ease);
}
.tlink svg {
  width: 15px;
  height: 15px;
  transition: transform .25s var(--ease);
}
a:hover .tlink, .tlink:hover { color: var(--teal-ink); gap: 13px; }
a:hover .tlink svg, .tlink:hover svg { transform: translateX(3px); }
.on-dark .tlink { color: #fff; border-color: var(--teal-lt); }
.on-dark a:hover .tlink, .on-dark .tlink:hover { color: var(--teal-lt); }

/* pill — location / credential chip */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px 9px 13px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 100px;
  background: rgba(12, 27, 44, .42);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}
.pill svg { width: 15px; height: 15px; fill: var(--teal-lt); flex: none; }
.pill-l {
  border-color: var(--line);
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--sh-1);
}
.pill-l svg { fill: var(--teal-ink); }

/* ========================== 06  header, mobile sheet, sticky call bar ===== */
.hdr {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--paper);
  border-bottom: 1px solid var(--line-2);
  transition: transform .34s var(--ease), box-shadow .3s ease,
              background-color .3s ease;
}
.hdr.solid {
  background: rgba(247, 244, 237, .94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 22px rgba(12, 27, 44, .09);
}
.hdr.up { transform: translateY(-102%); }

.hdr-in {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--hdr-h);
  width: 100%;
  max-width: calc(1400px + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* THE LOGO SITS TOP CENTRE. Menu button on the left, call button on the right,
   both 46px — so the mark is optically dead centre with no absolute
   positioning. Above 1140px the header becomes a two-row masthead: the logo
   alone on the top row, nav + call beneath it. */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}
/* THE CLEAN LOGO LAW: no plate, no box, no white chip, no rule under it. The
   mark floats straight on the paper. multiply melts a white bed if the source
   turns out to be an opaque JPEG rather than the transparent rendition. */
.brand-mark {
  height: 46px;
  width: auto;
  max-width: 100%;
  min-width: 0;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: multiply;
  flex: 0 1 auto;
}
@media (min-width: 900px) {
  .brand-mark { height: 52px; }
}
/* the typeset wordmark is for screen readers while the artwork loads, and
   becomes visible only if the artwork dies (see js/app.js) */
.brand-wm {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.logo-off .brand-mark { display: none; }
.logo-off .brand-wm {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.15;
}
.logo-off .brand-wm b {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy);
}
.logo-off .brand-wm span {
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-ink);
}

.nav {
  display: none;
  align-items: center;
  gap: 4px;
}
.nav a {
  position: relative;
  padding: 10px 13px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  transition: color .2s ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 4px;
  height: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s var(--ease);
}
.nav a:hover { color: var(--navy); }
.nav a:hover::after, .nav a.on::after { transform: scaleX(1); }
.nav a.on { color: var(--navy); font-weight: 700; }

.hdr-act {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.hdr-tel {
  display: none;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: var(--r);
  background: var(--navy);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  transition: background-color .22s ease, transform .22s var(--ease);
}
.hdr-tel svg { width: 17px; height: 17px; fill: var(--teal-lt); }
.hdr-tel:hover { background: var(--navy-3); transform: translateY(-1px); }

/* 50px, not 46 — this is the phone CTA in the header and it has to take a
   thumb. Both side buttons carry the same size so the logo between them stays
   optically dead centre. At 390px: 50 + 10 + 230 + 10 + 50 = 350 inside the
   20px gutters, so nothing can push the page sideways. */
.tel-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: var(--r);
  background: var(--navy);
  color: #fff;
}
.tel-ico svg { width: 20px; height: 20px; fill: #fff; }

.burger {
  width: 50px;
  height: 50px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.burger span,
.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  height: 2px;
  background: var(--navy);
  transition: transform .25s var(--ease), opacity .18s ease;
}
.burger::before { transform: translateY(-7px); }
.burger::after  { transform: translateY(7px); }
.burger[aria-expanded="true"] span { opacity: 0; }
.burger[aria-expanded="true"]::before { transform: rotate(45deg); }
.burger[aria-expanded="true"]::after  { transform: rotate(-45deg); }

@media (min-width: 1140px) {
  .nav { display: flex; }
  .hdr-tel { display: inline-flex; }
  .tel-ico, .burger { display: none; }

  /* two-row masthead — the logo owns the top row, centred and alone */
  .hdr-in {
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    column-gap: 18px;
    row-gap: 4px;
    padding-block: 12px;
  }
  .brand { flex: 0 0 100%; }
  .brand-mark { height: 56px; }
}

/* --- mobile sheet --- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--paper);
  padding: 20px var(--pad) calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .26s ease, transform .3s var(--ease), visibility .26s;
}
.sheet.open {
  visibility: visible;
  opacity: 1;
  transform: none;
}
.sheet-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 46px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
/* the mark stays centred here too; the close button steps out of the flow */
.sheet-top .brand-mark { max-width: calc(100% - 124px); }
.sheet-x {
  position: absolute;
  right: 0;
  top: 0;
  width: 46px;
  height: 46px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--navy);
}
.sheet nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0 4px;
}
.sheet nav a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--navy);
}
.sheet nav a span {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--teal-ink);
}
.sheet-foot {
  margin-top: auto;
  padding-top: 20px;
  display: grid;
  gap: 10px;
}
.sheet-note {
  margin: 4px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}

/* --- sticky call bar (mobile) --- */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: rgba(247, 244, 237, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(120%);
  transition: transform .32s var(--ease);
}
.callbar.show { transform: none; }
.callbar .btn { min-height: 50px; padding: 12px 14px; font-size: 15px; }
@media (min-width: 1140px) { .callbar { display: none; } }

/* ============================================================= 07  hero == */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(88svh, 780px);
  padding: clamp(64px, 12vw, 116px) 0 clamp(56px, 10vw, 96px);
  background: var(--navy-2);
  overflow: hidden;
}
@supports not (height: 88svh) {
  .hero { min-height: 88vh; }
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(9, 20, 33, .82) 0%, rgba(9, 20, 33, .46) 34%, rgba(9, 20, 33, .72) 78%, rgba(9, 20, 33, .93) 100%),
    radial-gradient(90% 70% at 50% 52%, rgba(9, 20, 33, .18) 0%, rgba(9, 20, 33, .72) 100%);
}
.hero-in {
  position: relative;
  width: 100%;
  max-width: calc(900px + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
  text-align: center;
  color: #fff;
}
/* THE LOGO, CLEAN, TOP CENTRE OF THE LANDING PAGE. It floats straight on the
   photograph above the location pill — no box, no plate, no chip, no rule. The
   Cloudinary rendition is knocked out to alpha, so the header's multiply (which
   exists only to melt a white bed on the ivory header) is switched off here: on
   this dark hero multiply would erase the mark. c_limit on the source means the
   artwork is never upscaled past its own pixels. */
.hero-logo {
  display: flex;
  justify-content: center;
  margin: 0 auto clamp(16px, 3vw, 24px);
}
.hero-logo .brand-mark {
  height: clamp(62px, 16vw, 104px);
  max-width: min(100%, 440px);
  mix-blend-mode: normal;
}
.hero-logo.logo-off .brand-wm b {
  color: #fff;
  font-size: clamp(23px, 6vw, 34px);
}
.hero-logo.logo-off .brand-wm span { color: var(--teal-lt); }

.hero h1 {
  color: #fff;
  margin: 20px 0 16px;
  text-shadow: 0 2px 30px rgba(9, 20, 33, .45);
}
.hero .lead {
  margin: 0 auto 26px;
  max-width: 46ch;
  font-size: clamp(16.5px, 2.3vw, 19.5px);
}
.hero .cta-row { margin-bottom: clamp(28px, 5vw, 42px); }
.hero .cta-row .btn { flex: 1 1 230px; }
@media (min-width: 620px) {
  .hero .cta-row .btn { flex: 0 0 auto; min-width: 232px; }
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 0;
  padding-top: clamp(18px, 3vw, 26px);
  border-top: 1px solid rgba(255, 255, 255, .2);
  max-width: 720px;
  margin-inline: auto;
}
.hero-trust li {
  position: relative;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.hero-trust li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--teal-lt);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 1px;
  height: 46px;
  margin-left: -.5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7));
  overflow: hidden;
}
.scroll-cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--teal-lt);
  animation: cue 2.6s ease-in-out infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* ====================================================== 08  trust strip == */
.strip {
  background: var(--navy);
  color: #fff;
  padding-block: clamp(26px, 4vw, 42px);
}
.strip-g {
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .strip-g { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .strip-g { grid-template-columns: repeat(4, 1fr); } }

.strip-i {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 4px 16px 0;
  border-bottom: 1px solid var(--line-lt-2);
}
@media (min-width: 620px) {
  .strip-i {
    padding: 8px 22px 8px 0;
    border-bottom: 0;
    border-right: 1px solid var(--line-lt-2);
  }
  .strip-i:nth-child(2n) { border-right: 0; padding-right: 0; }
}
@media (min-width: 1040px) {
  .strip-i { border-right: 1px solid var(--line-lt-2); padding-right: 22px; }
  .strip-i:nth-child(2n) { border-right: 1px solid var(--line-lt-2); padding-right: 22px; }
  .strip-i:last-child { border-right: 0; padding-right: 0; }
  .strip-i + .strip-i { padding-left: 22px; }
}
.strip-i svg {
  width: 26px;
  height: 26px;
  flex: none;
  fill: none;
  stroke: var(--teal-lt);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 2px;
}
.strip-i b {
  display: block;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
  margin-bottom: 2px;
}
.strip-i span {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .66);
}

/* =============================================================== 09  split */
.split {
  display: grid;
  gap: clamp(30px, 5vw, 62px);
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
    align-items: center;
  }
  .split.flip .split-media { order: 2; }
}

.split-media {
  position: relative;
  padding-bottom: 54px;
  padding-right: 42px;
}
.split-media .ph-a { width: 100%; }
.split-media .ph-b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 47%;
  max-width: 240px;
  border: 6px solid var(--paper);
  box-shadow: var(--sh-3);
}
@media (min-width: 900px) {
  .split-media { padding-bottom: 66px; padding-right: 56px; }
  .split-media .ph-b { max-width: 280px; }
}

.split-points { margin-top: 26px; }
.split-points li {
  position: relative;
  padding: 18px 0 18px 44px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.split-points li:last-child { border-bottom: 1px solid var(--line); }
.split-points li b {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.014em;
  margin-bottom: 3px;
}
.split-points li::before {
  counter-increment: pt;
  content: counter(pt, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 19px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--bronze-ink);
}
.split-points { counter-reset: pt; }

/* ============================================================ 10  services */
.svc-lead {
  display: block;
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--navy-2);
  margin-bottom: var(--gap);
  isolation: isolate;
}
.svc-lead-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(150deg, var(--navy-3), var(--navy-2));
}
.svc-lead-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.svc-lead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, rgba(9, 20, 33, .93) 0%, rgba(9, 20, 33, .74) 46%, rgba(9, 20, 33, .38) 100%);
}
.svc-lead:hover .svc-lead-media img { transform: scale(1.05); }
.svc-lead-in {
  position: relative;
  padding: clamp(28px, 5vw, 58px);
  max-width: 620px;
  color: #fff;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.svc-lead-in h3 { color: #fff; margin-bottom: 10px; }
.svc-lead-in p {
  color: rgba(255, 255, 255, .8);
  font-size: 15.5px;
  margin-bottom: 18px;
  max-width: 44ch;
}
.svc-n {
  position: absolute;
  top: clamp(18px, 3vw, 30px);
  right: clamp(18px, 3vw, 34px);
  font-family: var(--display);
  font-size: clamp(58px, 12vw, 116px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(199, 144, 99, .55);
  pointer-events: none;
}
.svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 20px;
}
.svc-tags li {
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

.svc-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .svc-grid.g4 { grid-template-columns: repeat(4, 1fr); } }

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease;
}
.svc:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: var(--line);
}
.svc-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(150deg, var(--navy-3), var(--navy-2));
}
.svc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.svc:hover .svc-media img { transform: scale(1.06); }
.svc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 20, 33, 0) 40%, rgba(9, 20, 33, .55) 100%);
}
.svc-num {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 7px 14px;
  background: var(--bronze-ink);
  color: #FFFFFF;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .13em;
}
.svc-body {
  padding: 22px clamp(18px, 3vw, 26px) 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.svc-body h3 { font-size: clamp(19px, 2.4vw, 22px); margin-bottom: 8px; }
.svc-body p {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 18px;
}
.svc-body .tlink { margin-top: auto; align-self: flex-start; }

/* ======================================================= 11  process ledger */
.proc {
  position: relative;
  display: grid;
  gap: 0;
}
.proc-i {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 0 18px;
  padding: 26px 0;
  border-top: 1px solid var(--line-lt-2);
}
.proc-i:last-child { border-bottom: 1px solid var(--line-lt-2); }
.proc-i::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-lt-2);
}
.proc-i:first-child::before { top: 26px; }
.proc-i:last-child::before  { bottom: calc(100% - 40px); }
.proc-n {
  position: relative;
  z-index: 1;
  width: 41px;
  height: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(199, 144, 99, .5);
  border-radius: 50%;
  background: var(--navy-2);
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--bronze-lt);
  flex: none;
}
.proc-b h3 {
  color: #fff;
  font-size: clamp(19px, 2.6vw, 25px);
  margin-bottom: 7px;
}
/* the copy column: second column on a phone (never under the numeral),
   third column once the ledger goes wide */
.proc-i > p {
  grid-column: 2;
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 15.5px;
  max-width: 54ch;
}
@media (min-width: 900px) {
  .proc-i {
    grid-template-columns: 54px minmax(0, .78fr) minmax(0, 1.22fr);
    gap: 0 34px;
    padding: 34px 0;
    align-items: start;
  }
  .proc-i > p { grid-column: 3; padding-top: 4px; }
  .proc-b h3 { margin-bottom: 0; }
}

/* =================================================== 12  full-bleed break = */
.break {
  position: relative;
  isolation: isolate;
  min-height: clamp(420px, 62vh, 620px);
  display: flex;
  align-items: flex-end;
  padding: clamp(48px, 9vw, 100px) 0;
  background: var(--navy-2);
  overflow: hidden;
  color: #fff;
}
.break-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.break-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.break-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(9, 20, 33, .55) 0%, rgba(9, 20, 33, .28) 40%, rgba(9, 20, 33, .9) 100%);
}
.break blockquote {
  margin: 0;
  max-width: 22ch;
  font-family: var(--display);
  font-size: clamp(30px, 6.2vw, 58px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.026em;
  color: #fff;
}
.break .break-note {
  margin-top: 18px;
  max-width: 40ch;
  font-size: 15.5px;
  color: rgba(255, 255, 255, .78);
}

/* ================================================= 13  documentation band = */
.docs {
  display: grid;
  gap: clamp(28px, 4.5vw, 54px);
}
@media (min-width: 980px) {
  .docs { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
}
.doc-cards {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}
.doc-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 12px 0;
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.doc-card:first-child { transform: rotate(-.7deg); }
.doc-card:last-child  { transform: rotate(.6deg); }
.doc-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  object-position: center top;
  background: var(--paper-2);
  border-radius: 1px;
}
.doc-card figcaption {
  padding: 11px 2px 13px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.doc-list { margin-top: 24px; }
.doc-list li {
  position: relative;
  padding: 13px 0 13px 34px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--ink-2);
}
.doc-list li:last-child { border-bottom: 1px solid var(--line); }
.doc-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 21px;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}
.doc-list li b { color: var(--navy); font-weight: 700; }

/* ============================================================ 14  file grid */
.fgrid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
.fgrid .fg-w { grid-column: span 2; }
@media (min-width: 760px) {
  .fgrid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
  }
}
.fg {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: linear-gradient(150deg, var(--navy-3), var(--navy-2));
  aspect-ratio: 1 / 1;
}
.fgrid .fg-w { aspect-ratio: 2 / 1; }
.fg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), filter .5s ease;
}
.fg:hover img { transform: scale(1.06); }
.fg::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(18, 40, 63, .1);
  border-radius: inherit;
}
.fgrid-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-3);
}

/* ========================================================== 15  reviews == */
.revs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(24px, 4vw, 40px);
}
.revs-head h2 { margin-bottom: 0; }
.gsrc {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .68);
}
.gsrc .stars { display: inline-flex; gap: 2px; }
.stars svg { width: 15px; height: 15px; fill: var(--bronze-lt); }

.revs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(272px, 88%);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 14px;
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
}
@media (min-width: 760px)  { .revs { grid-auto-columns: minmax(300px, 46%); } }
@media (min-width: 1100px) {
  .revs {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    gap: 20px;
  }
}
.revs:focus-visible { outline-offset: 6px; }

.rev {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.5vw, 34px);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-lt-2);
  border-radius: var(--r);
}
.rev .stars { display: flex; gap: 3px; margin-bottom: 16px; }
.rev blockquote {
  margin: 0 0 20px;
  font-size: 15.5px;
  line-height: 1.62;
  color: rgba(255, 255, 255, .88);
}
.rev figcaption {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-lt-2);
  font-size: 13.5px;
  color: rgba(255, 255, 255, .62);
}
.rev figcaption b {
  display: block;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}
.rail-hint {
  margin-top: 14px;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
@media (min-width: 1100px) { .rail-hint { display: none; } }

/* ====================================================== 16  service area == */
.area {
  display: grid;
  gap: clamp(28px, 4.5vw, 56px);
}
@media (min-width: 960px) {
  .area { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
}
.area-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}
@media (min-width: 620px) { .area-list { grid-template-columns: repeat(3, 1fr); } }
.area-list li {
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink-2);
}
.area-list li b { color: var(--navy); font-weight: 700; }
.area-card {
  position: relative;
  padding: clamp(26px, 4vw, 38px);
  background: var(--navy);
  color: #fff;
  border-radius: var(--r);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.area-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, rgba(255,255,255,0) 2px 12px);
  pointer-events: none;
}
.area-card h3 { color: #fff; }
.area-card p { color: rgba(255, 255, 255, .76); font-size: 15.5px; }
.area-card .btn { margin-top: 8px; }

/* =============================================================== 17  FAQ == */
.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 44px 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(17px, 2.3vw, 20px);
  font-weight: 700;
  letter-spacing: -.014em;
  color: var(--navy);
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teal-ink); }
.faq summary::after,
.faq summary::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 32px;
  width: 15px;
  height: 2px;
  background: var(--teal);
  transition: transform .28s var(--ease);
}
.faq summary::before { transform: rotate(90deg); }
.faq details[open] summary::before { transform: rotate(0deg); opacity: 0; }
.faq details p {
  padding: 0 6px 24px 0;
  margin: 0;
  max-width: 66ch;
  font-size: 15.5px;
  color: var(--ink-2);
}
.faq details[open] summary { color: var(--teal-ink); }

/* ========================================================== 18  CTA band == */
.ctab {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 80% 0%, rgba(36, 72, 107, .7) 0%, rgba(12, 27, 44, 0) 60%),
    var(--navy-2);
  color: #fff;
  text-align: center;
}
.ctab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, rgba(255,255,255,0) 1px 84px);
}
.ctab h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.ctab .lead { margin: 0 auto 28px; max-width: 46ch; }
.ctab-fine {
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .58);
}

/* ============================================================== 19  form == */
.qwrap {
  display: grid;
  gap: clamp(30px, 4.5vw, 56px);
}
@media (min-width: 980px) {
  .qwrap { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; }
}
.qside .qs-i {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.qside .qs-i:last-of-type { border-bottom: 1px solid var(--line); }
.qside .qs-i svg {
  width: 21px;
  height: 21px;
  flex: none;
  margin-top: 3px;
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.qside .qs-i b {
  display: block;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.qside .qs-i a, .qside .qs-i span {
  font-size: 16.5px;
  color: var(--navy);
  font-weight: 600;
  word-break: break-word;
}
.qside .qs-i a:hover { color: var(--teal-ink); }

.fcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3.6vw, 38px);
  box-shadow: var(--sh-2);
}
.fcard h3 { margin-bottom: 6px; }
.fcard > p.sm { margin-bottom: 22px; }

.frow { display: grid; gap: 16px; margin-bottom: 16px; }
@media (min-width: 640px) {
  .frow-2 { grid-template-columns: 1fr 1fr; }
}
.field { display: flex; flex-direction: column; }
.field label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 16px;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  appearance: none;
  -webkit-appearance: none;
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.field select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--navy) 50%),
    linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 21px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(18, 40, 63, .3); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(62, 159, 174, .22);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: none; }
.field ::placeholder { color: #9AA2AC; }

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-msg {
  margin: 14px 0 0;
  min-height: 22px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.form-msg.ok {
  color: #1A5B33;
  font-weight: 600;
}
.form-msg.err {
  color: #9A2A20;
  font-weight: 600;
}
.form-fine {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ============================================================ 20  footer == */
.ft {
  background: var(--navy-2);
  color: rgba(255, 255, 255, .7);
  padding-top: clamp(48px, 7vw, 84px);
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  font-size: 14.5px;
}
@media (max-width: 1139px) {
  .ft { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
.ft-g {
  display: grid;
  gap: 34px;
  padding-bottom: 34px;
}
@media (min-width: 760px)  { .ft-g { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }
@media (min-width: 1060px) { .ft-g { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; } }

.ft-wm b {
  display: block;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.022em;
  color: #fff;
  line-height: 1.14;
  margin-bottom: 6px;
}
.ft-wm span {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--teal-lt);
}
.ft-blurb {
  margin: 16px 0 0;
  max-width: 34ch;
  color: rgba(255, 255, 255, .62);
  font-size: 14.5px;
}
.ft h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .48);
  margin-bottom: 14px;
  font-family: var(--body);
}
.ft-links li { padding: 5px 0; }
.ft-links a {
  color: rgba(255, 255, 255, .78);
  transition: color .2s ease;
}
.ft-links a:hover { color: var(--teal-lt); }
.ft-con li { padding: 5px 0; }
.ft-con a { color: #fff; font-weight: 600; }
.ft-con a:hover { color: var(--teal-lt); }
.ft-bot {
  border-top: 1px solid var(--line-lt-2);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .48);
}
.ft-bot p { margin: 0; }
.ft-note {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .38);
  max-width: 76ch;
}

/* ================================================ 21  interior page head == */
.phead {
  position: relative;
  isolation: isolate;
  padding: clamp(52px, 9vw, 104px) 0 clamp(44px, 7vw, 84px);
  background: var(--navy-2);
  color: #fff;
  overflow: hidden;
}
.phead-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.phead-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.phead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(9, 20, 33, .9) 0%, rgba(9, 20, 33, .66) 45%, rgba(9, 20, 33, .92) 100%);
}
.phead h1 {
  color: #fff;
  max-width: 17ch;
  margin-bottom: 16px;
}
.phead .lead { max-width: 52ch; }
.phead .cta-row { margin-top: 26px; }

.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.crumb a { color: rgba(255, 255, 255, .78); }
.crumb a:hover { color: var(--teal-lt); }
.crumb span[aria-hidden] { color: var(--teal-lt); }

/* prose block on interior pages */
.prose h2 { margin-top: 0; }
.prose h3 { margin-top: 34px; }
.prose p { font-size: 16.5px; line-height: 1.62; color: var(--ink-2); max-width: 62ch; }
/* the kicker keeps its own scale inside a prose block */
.prose p.eyebrow {
  font-size: 12px;
  color: var(--teal-ink);
  max-width: none;
  line-height: 1.4;
}
.prose ul { margin: 18px 0 24px; }
.prose ul li {
  position: relative;
  padding: 11px 0 11px 30px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--ink-2);
  max-width: 62ch;
}
.prose ul li:last-child { border-bottom: 1px solid var(--line); }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 20px;
  width: 12px;
  height: 1px;
  background: var(--teal);
}
.prose ul li b { color: var(--navy); }

.pgrid {
  display: grid;
  gap: clamp(28px, 4.5vw, 54px);
}
@media (min-width: 940px) {
  .pgrid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
}

.aside {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(22px, 3vw, 30px);
  box-shadow: var(--sh-1);
}
.aside h3 { font-size: 20px; }
.aside .btn { width: 100%; margin-top: 6px; }
.aside .tel-big {
  display: block;
  font-family: var(--display);
  font-size: clamp(23px, 4vw, 28px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy);
  margin: 6px 0 14px;
}
.aside .tel-big:hover { color: var(--teal-ink); }
@media (min-width: 940px) {
  .aside-stick { position: sticky; top: calc(var(--hdr-h) + 22px); }
}

/* small stack of other services on an interior page */
.also {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .also { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .also { grid-template-columns: repeat(4, 1fr); } }
.also a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  transition: transform .26s var(--ease), border-color .26s ease, box-shadow .26s ease;
}
.also a:hover {
  transform: translateY(-3px);
  border-color: var(--line);
  box-shadow: var(--sh-1);
}
.also b {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.014em;
  color: var(--navy);
}
.also span { font-size: 13.5px; color: var(--ink-3); }

/* five-up variant — the press + listings row in the About section. auto-fit so
   five cards never leave an orphan on its own row at an in-between width. */
.also.g5 { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }

/* ================================================ 21b  the smooth photo run
   Same photographs as the mosaic, calmer frame: a native scroll-snap rail on
   a phone, an even three-up grid from 760px. No library, nothing touching the
   scroll position — the browser does all of it. */
.fgrid.flow {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 76%);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 14px;
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
}
.fgrid.flow .fg,
.fgrid.flow .fg-w {
  /* figures still carry the UA margin (1em 40px) — that is what made the old
     mosaic sit loose and ragged inside its cells. Zero it here so the run is
     even, and let the grid gap do the spacing. */
  margin: 0;
  grid-column: auto;
  aspect-ratio: 4 / 3;
  scroll-snap-align: center;
}
.fgrid.flow:focus-visible { outline-offset: 6px; }
@media (min-width: 760px) {
  .fgrid.flow {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    gap: 16px;
  }
}
.fgrid.flow::-webkit-scrollbar { height: 6px; }
.fgrid.flow::-webkit-scrollbar-track { background: rgba(18, 40, 63, .08); border-radius: 100px; }
.fgrid.flow::-webkit-scrollbar-thumb { background: rgba(62, 159, 174, .55); border-radius: 100px; }

/* the swipe hint, on a light band */
.rail-hint-l { color: var(--ink-3); }
@media (min-width: 760px) { .rail-hint-l { display: none; } }

/* ============================================ 21c  flier + newsletter pages
   Printed material, so every page is CONTAINED in its card, never cropped —
   these are documents, not photographs. */
.fliers {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(196px, 62%);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 14px;
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
}
@media (min-width: 760px) {
  .fliers {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    gap: 16px;
  }
}
@media (min-width: 1080px) { .fliers { grid-template-columns: repeat(6, 1fr); gap: 14px; } }
.fliers:focus-visible { outline-offset: 6px; }
.fliers::-webkit-scrollbar { height: 6px; }
.fliers::-webkit-scrollbar-track { background: rgba(18, 40, 63, .08); border-radius: 100px; }
.fliers::-webkit-scrollbar-thumb { background: rgba(62, 159, 174, .55); border-radius: 100px; }

.flier-c { scroll-snap-align: center; margin: 0; }
.flier-c a {
  display: block;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 10px 10px 0;
  box-shadow: var(--sh-1);
  transition: transform .26s var(--ease), border-color .26s ease, box-shadow .26s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .flier-c a:hover { transform: translateY(-3px); border-color: var(--line); box-shadow: var(--sh-2); }
}
.flier-c img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  object-position: center;
  background: var(--paper-2);
  border-radius: 1px;
}
.flier-c figcaption b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 4px;
}
.flier-c figcaption span { display: block; }
.flier-c figcaption {
  padding: 10px 2px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}

/* two-up variant — the claim-file flier is two pages, never a six-across run
   of postage stamps. */
.fliers.two { grid-auto-columns: minmax(200px, 64%); }
@media (min-width: 760px) {
  .fliers.two { grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 560px; }
}

/* ============================================ 21d  licences + certification */
.creds {
  display: grid;
  gap: clamp(26px, 4vw, 46px);
  margin-top: clamp(34px, 5vw, 58px);
  padding-top: clamp(30px, 4.5vw, 50px);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .creds { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
}
.creds-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.creds-media figure { margin: 0; }
.creds-media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  object-position: center;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  padding: 8px;
}
.creds-media figcaption {
  padding: 9px 2px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.creds-body h3 { margin-bottom: 8px; }

.lic {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 22px;
}
@media (min-width: 560px) { .lic { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.lic li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-2);
}
.lic li b {
  display: block;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze-ink);
  margin-bottom: 2px;
}

/* the same two-up frame, carrying people instead of paperwork */
.creds-media.people img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  padding: 0;
  background: linear-gradient(150deg, var(--navy-3), var(--navy-2));
}

/* certifications that are facts, not scans — rendered, never screenshotted */
.badges {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}
@media (min-width: 700px) { .badges { grid-template-columns: 1fr 1fr; } }
.badge {
  display: block;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}
.badge b {
  display: block;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bronze-ink);
  margin-bottom: 6px;
}
.badge span {
  display: block;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
a.badge { transition: border-color .26s ease, box-shadow .26s ease; }
@media (hover: hover) {
  a.badge:hover { border-color: var(--line); box-shadow: var(--sh-1); }
}

/* the line they run under their own name */
.motto {
  margin-top: 24px;
  padding-left: 18px;
  border-left: 2px solid var(--teal);
  font-family: var(--display);
  font-size: clamp(16px, 2.1vw, 18.5px);
  font-style: normal;
  line-height: 1.45;
  color: var(--navy);
}

/* ============================================ 21e  the newsletter feature */
.news {
  display: grid;
  gap: clamp(22px, 3.5vw, 42px);
  align-items: center;
}
@media (min-width: 760px) {
  .news { grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); }
}
.news-media { margin: 0; max-width: 420px; }
.news-media a {
  display: block;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 10px;
  box-shadow: var(--sh-1);
  transition: transform .26s var(--ease), border-color .26s ease, box-shadow .26s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .news-media a:hover { transform: translateY(-3px); border-color: var(--line); box-shadow: var(--sh-2); }
}
.news-media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  object-position: center;
  background: var(--paper-2);
  border-radius: 1px;
}
.news-body h3 { margin-bottom: 8px; }
.news-body .lead { margin-bottom: 10px; }

/* ==================================================== 22  motion + reveal = */
.kb {
  animation: kb 30s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kb {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.15) translate3d(-1.6%, -2.2%, 0); }
}
.kb-slow { animation-duration: 38s; }

.rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .75s ease, transform .75s var(--ease);
}
.rv.in { opacity: 1; transform: none; }
html:not(.js) .rv { opacity: 1; transform: none; }
.rv-1 { transition-delay: .06s; }
.rv-2 { transition-delay: .13s; }
.rv-3 { transition-delay: .2s; }
.rv-4 { transition-delay: .27s; }

@media (prefers-reduced-motion: reduce) {
  .kb { animation: none; }
  .scroll-cue::after { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
  .btn:hover, .svc:hover, .also a:hover { transform: none; }
  .svc:hover .svc-media img,
  .fg:hover img,
  .svc-lead:hover .svc-lead-media img { transform: none; }
}

/* ============================================ 23b  input modes + surfaces = */

/* Touch: kill the hover transforms so a tapped card does not stay lifted,
   and give the review rail a visible, thumb-friendly scrollbar. */
@media (hover: none) {
  .btn:hover,
  .svc:hover,
  .also a:hover,
  .hdr-tel:hover { transform: none; }
  .svc:hover .svc-media img,
  .fg:hover img,
  .svc-lead:hover .svc-lead-media img { transform: none; }
}

.revs::-webkit-scrollbar { height: 6px; }
.revs::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .08);
  border-radius: 100px;
}
.revs::-webkit-scrollbar-thumb {
  background: rgba(108, 195, 210, .55);
  border-radius: 100px;
}
.revs::-webkit-scrollbar-thumb:hover { background: var(--teal-lt); }

/* whole-card focus rings: the ring belongs on the card, not the inner link */
.svc:focus-within {
  border-color: var(--teal);
  box-shadow: var(--sh-2), 0 0 0 3px rgba(62, 159, 174, .28);
}
.fg:focus-within::after { box-shadow: inset 0 0 0 3px var(--teal); }

/* Windows high-contrast / forced colours: keep structure legible when the
   palette is thrown away. */
@media (forced-colors: active) {
  .btn, .svc, .aside, .fcard, .doc-card, .rev, .area-card {
    border: 1px solid CanvasText;
  }
  .hero-scrim, .break-veil, .svc-lead::before { display: none; }
  .eyebrow::before, .eyebrow::after { forced-color-adjust: none; }
}

/* Users who ask for more contrast get flatter, darker text and firmer rules. */
@media (prefers-contrast: more) {
  :root {
    --ink-2: #23292F;
    --ink-3: #4A525B;
    --line: rgba(18, 40, 63, .3);
    --line-2: rgba(18, 40, 63, .2);
  }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(9, 20, 33, .9) 0%, rgba(9, 20, 33, .68) 40%, rgba(9, 20, 33, .95) 100%);
  }
  .btn-o { border-color: var(--navy); }
}

/* Very wide screens: let the type breathe rather than stretching the grid. */
@media (min-width: 1600px) {
  :root { --sec-y: 128px; }
  .hero h1 { font-size: 78px; }
  .hero .lead { font-size: 20px; }
  .break blockquote { font-size: 62px; }
}

/* Print: people print claim pages. Give them the words, the phone number and
   the URL — not the photography, the nav or the sticky bars. */
@media print {
  .hdr, .sheet, .callbar, .scroll-cue, .hero-media, .break-media,
  .phead-media, .fgrid, .doc-cards, .split-media, .svc-media, .revs,
  .fliers, .creds-media,
  .rail-hint, .skip, .cta-row { display: none !important; }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  .sec, .hero, .phead, .break { padding-block: 14pt; min-height: 0; }
  .hero, .phead, .break, .ctab, .bg-navy, .bg-deep, .strip {
    background: #fff !important;
    color: #000 !important;
  }
  .hero h1, .phead h1, .ctab h2, .break blockquote,
  .on-dark h2, .on-dark h3, .strip-i b { color: #000 !important; }
  .hero .lead, .on-dark .lead, .break-note, .strip-i span { color: #222 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .faq details { display: block; }
  .faq details p { display: block !important; }
}

/* ========================================================= 23  utilities == */
.c { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-s { margin-top: 14px; }
.mt-m { margin-top: 26px; }
.mt-l { margin-top: clamp(30px, 5vw, 56px); }
.mb-0 { margin-bottom: 0; }
.nowrap { white-space: nowrap; }
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}