/* ==========================================================================
   Texas Water & Mold — design system
   Palette is pulled from the brand badge: chrome/near-black shield, electric
   blue water, Texas star. Amber is the single action colour and is used for
   nothing except "do this now".
   ========================================================================== */

:root {
  /* --- ground & ink --- */
  --ink:          #0a1017;   /* near-black, blue-biased (badge body) */
  --steel-900:    #101c27;
  --steel-800:    #17262f;
  --steel-700:    #223442;
  --steel-600:    #354a5c;

  --paper:        #f5f8fb;   /* light ground, cooled toward the blue */
  --paper-alt:    #eaeff5;
  --white:        #ffffff;

  --text:         #101c27;
  --text-soft:    #4d6070;
  --text-faint:   #74869a;
  --text-on-dark: #e9f0f7;
  --text-on-dark-soft: #a6b8c8;

  /* --- brand --- */
  --blue:         #1a7fe8;   /* the water splash */
  --blue-bright:  #3f9bff;
  --blue-deep:    #0c4a94;
  --blue-ink:     #072d5c;
  --blue-wash:    #e8f2fd;

  /* --- action (used ONLY for primary CTAs) --- */
  --amber:        #1877f2;
  --amber-hover:  #1466d9;
  --amber-wash:   #e8f2fd;

  /* --- semantic --- */
  --good:         #17845a;
  --alert:        #d92d20;

  --rule:         #dbe3ec;
  --rule-dark:    #26384a;

  /* --- type --- */
  --display: "Archivo", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --body:    "Public Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- type scale ---
     16px base. Every size below is a step on this scale; component rules
     reference the tokens rather than inventing one-off values, so the
     vertical rhythm stays consistent across pages. */
  --fs-xs:   0.75rem;    /* 12px — eyebrows, spec keys, legal */
  --fs-sm:   0.875rem;   /* 14px — hints, captions, footer */
  --fs-base: 1rem;       /* 16px — body copy */
  --fs-md:   1.125rem;   /* 18px — lede, subtitles, card titles */
  --fs-lg:   1.375rem;   /* 22px — minor headings */

  /* --- metrics --- */
  --max:      1040px;
  --max-text: 680px;
  --radius:   10px;
  --radius-sm: 6px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(10,16,23,.06), 0 2px 8px -4px rgba(10,16,23,.12);
  --shadow:    0 2px 4px rgba(10,16,23,.06), 0 12px 28px -12px rgba(10,16,23,.22);
  --shadow-lg: 0 4px 8px rgba(10,16,23,.08), 0 28px 60px -24px rgba(10,16,23,.35);

  --header-h: 76px;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

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

/* The off-canvas mobile nav is position:fixed, so it escapes any clipping on
   body and its parked width made the whole page scroll sideways. Clipping at
   the root catches it. clip, not hidden: hidden would turn the root into a
   scroll container and break the sticky header. */
html { overflow-x: clip; }

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

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

a { color: var(--blue-deep); text-decoration: none; }
a:hover { color: var(--blue); }

img { max-width: 100%; display: block; }

ul, ol { margin: 0; padding: 0; }

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

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

/* ==========================================================================
   Layout primitives
   ========================================================================== */

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

.section { padding: 64px 0; }
.section--tight { padding: 48px 0; }
.section--paper { background: var(--paper); }
.section--alt { background: var(--paper-alt); }
.section--dark { background: var(--ink); color: var(--text-on-dark); }
.section--dark h2, .section--dark h3 { color: var(--white); }

.text-center { text-align: center; }
.stack { display: flex; flex-direction: column; }

/* Announced by screen readers, invisible on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  display: inline-block;
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}
.eyebrow--onDark { color: var(--blue-bright); }

.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  margin-bottom: 10px;
}

.section-subtitle {
  font-size: var(--fs-md);
  color: var(--text-soft);
  max-width: 62ch;
  margin: 0 auto;
}
.section--dark .section-subtitle { color: var(--text-on-dark-soft); }

.lede {
  font-size: var(--fs-md);
  color: var(--text-soft);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 16px 26px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 19px; height: 19px; flex-shrink: 0; }

.btn--lg { padding: 18px 34px; font-size: var(--fs-md); }
.btn--block { width: 100%; }

.btn--action {
  background: var(--amber);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(24,119,242,.7);
}
.btn--action:hover { background: var(--amber-hover); color: #fff; box-shadow: 0 10px 24px -8px rgba(24,119,242,.8); }

.btn--blue { background: var(--blue); color: #fff; }
.btn--blue:hover { background: var(--blue-deep); color: #fff; }

.btn--ghost {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.42);
  color: #fff;
  backdrop-filter: blur(4px);
}
.btn--ghost:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }

.btn--outline {
  background: transparent;
  border-color: var(--blue-deep);
  color: var(--blue-deep);
}
.btn--outline:hover { background: var(--blue-deep); color: #fff; }

/* ==========================================================================
   Top bar — thin utility strip
   ========================================================================== */

.topbar {
  background: var(--ink);
  color: var(--text-on-dark-soft);
  font-size: var(--fs-sm);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  flex-wrap: wrap;
}
.topbar a { color: var(--text-on-dark-soft); }
.topbar a:hover { color: var(--white); }
.topbar__left { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: 7px; }
.topbar__item svg { width: 15px; height: 15px; opacity: .75; }

.dispatch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--white);
}
.dispatch__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2fd07a;
  box-shadow: 0 0 0 0 rgba(47,208,122,.7);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,208,122,.65); }
  70%  { box-shadow: 0 0 0 9px rgba(47,208,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,208,122,0); }
}

.topbar__social { display: flex; align-items: center; gap: 12px; }
.topbar__social a {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  background: rgba(255,255,255,.09);
  font-size: 0;
}
.topbar__social a:hover { background: var(--blue); }
.topbar__social svg { width: 14px; height: 14px; fill: currentColor; color: #cfdcea; }
.topbar__social a:hover svg { color: #fff; }

/* ==========================================================================
   Header
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header-h);
}
.header__logo { flex-shrink: 0; display: flex; align-items: center; }
.header__logo img { height: 54px; width: auto; }

.header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.header__nav a {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--text);
  padding: 10px 15px;
  border-radius: var(--radius-sm);
  position: relative;
}
.header__nav a:hover { background: var(--blue-wash); color: var(--blue-deep); }
.header__nav a.active { color: var(--blue-deep); }
.header__nav a.active::after {
  content: "";
  position: absolute;
  left: 15px; right: 15px; bottom: 2px;
  height: 3px;
  border-radius: 2px;
  background: var(--amber);
}

.header__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--amber);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  box-shadow: 0 4px 14px -5px rgba(24,119,242,.8);
  transition: background-color .18s ease;
}
.header__cta:hover { background: var(--amber-hover); color: #fff; }
.header__cta svg { width: 18px; height: 18px; }
.header__cta small {
  display: block;
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--fs-xs);
  opacity: .9;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 3px;
}
.header__cta span { display: block; line-height: 1; font-size: 1.02rem; }

.header__phone-icon { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0 11px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2.5px;
  width: 100%;
  border-radius: 2px;
  background: var(--text);
  transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: -2%;
  background-image: url("../images/hero-home.jpg");
  background-size: cover;
  background-position: center 42%;
  z-index: -2;
  animation: heroDrift 26s ease-in-out infinite alternate;
}
/* Barely-there drift. If you can consciously see it moving, it's too much. */
@keyframes heroDrift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(-1%, -1%, 0); }
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(10,16,23,.96) 0%, rgba(10,16,23,.86) 42%, rgba(10,16,23,.5) 78%, rgba(10,16,23,.42) 100%),
    linear-gradient(to top, rgba(7,45,92,.55), transparent 55%);
}
.hero__inner { padding: 100px 0 112px; max-width: 720px; }

/* Orchestrated entrance — one sequence on load, not five scattered effects.
   Children rise in document order so the eye lands on the headline first
   and the phone number last. */
.hero__inner > * {
  animation: heroRise .85s cubic-bezier(.16,.84,.44,1) both;
}
.hero__flag   { animation-delay: .05s; }
.hero h1      { animation-delay: .15s; }
.hero__text   { animation-delay: .27s; }
.hero__actions{ animation-delay: .39s; }
.hero__proof  { animation-delay: .51s; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.hero__flag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(24,119,242,.15);
  border: 1px solid rgba(24,119,242,.45);
  color: #9bc5ff;
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 15px;
  border-radius: 100px;
  margin-bottom: 22px;
}

.hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.06;
  color: #fff;
  margin-bottom: 20px;
}
/* The location stays inside the H1 so the keyword phrase is intact for search,
   but drops to roughly half size so the headline reads as two lines of display
   type with a kicker, not three oversized ones. */
.hero h1 em {
  display: block;
  font-style: normal;
  color: var(--blue-bright);
  font-size: .52em;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin-top: 14px;
  max-width: none;
}

.hero__text {
  font-size: 1.25rem;
  color: #cfdceb;
  max-width: 56ch;
  margin-bottom: 30px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 38px;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero__proof-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #c3d3e3;
}
.hero__proof-item svg { width: 18px; height: 18px; color: var(--blue-bright); flex-shrink: 0; }
.hero__stars { color: #ffc635; letter-spacing: 2px; }

/* ==========================================================================
   Trust strip — sits directly under the hero
   ========================================================================== */

.trustbar { background: var(--blue-ink); color: #fff; }
.trustbar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trustbar__item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 22px 20px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.trustbar__item:last-child { border-right: 0; }
.trustbar__item svg {
  width: 27px; height: 27px;
  color: var(--blue-bright);
  flex-shrink: 0;
}

/* The wrapper around the two lines — the only span child of an item. Both of
   its children are spans, so without an explicit flex context they run
   together on one line and wrap mid-phrase. */
.trustbar__item > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.trustbar__label {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: #fff;
}
.trustbar__label a { color: inherit; }
.trustbar__label a:hover { color: var(--blue-bright); }
.trustbar__sub {
  display: block;
  font-size: var(--fs-xs);
  color: #9dbadd;
  line-height: 1.35;
  text-wrap: balance;
}

/* ==========================================================================
   Process — numbered because it genuinely is a sequence
   ========================================================================== */

.process { counter-reset: step; }
.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 38px;
}
.process__step {
  position: relative;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px 20px 22px;
  box-shadow: var(--shadow-sm);
}
.process__step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -17px; left: 22px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px -3px rgba(26,127,232,.7);
}
.process__step h3 { font-size: var(--fs-md); margin-bottom: 8px; }
.process__step p { font-size: var(--fs-base); color: var(--text-soft); margin: 0; }

/* ==========================================================================
   Service cards
   ========================================================================== */

/* Three cards. auto-fit would give 2 + 1 orphan at middle widths, so the
   column count steps straight from 3 to 1 — every row stays full. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 38px;
}
@media (max-width: 940px) {
  .card-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: #bcd4ec;
  color: inherit;
}
.card__image {
  height: 210px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.card__image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,16,23,.4), transparent 55%);
}
.card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.card__title { font-size: var(--fs-md); margin-bottom: 8px; }
.card__text { font-size: var(--fs-base); color: var(--text-soft); flex: 1; margin-bottom: 14px; }
.card__link {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--blue-deep);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.card:hover .card__link { color: var(--blue); gap: 11px; }
.card__link svg { width: 15px; height: 15px; transition: transform .2s ease; }

/* ==========================================================================
   Split feature (image + copy)
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}
.split--flip .split__media { order: 2; }
.split__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* fills the row so the photo tracks the height of the text beside it */
  align-self: stretch;
  min-height: 380px;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-lg);
}
.split__content h2 { font-size: clamp(1.625rem, 3vw, 2rem); margin-bottom: 12px; }

.checklist { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 24px 0; }

/* Deliberately NOT a grid or flex container: the <strong> and the text that
   follows it must stay in one inline flow, or each becomes its own grid item
   and the description drops to a second row. */
.checklist li {
  position: relative;
  padding-left: 34px;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-soft);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7fe8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background-color .3s ease;
}
.checklist li:hover::before { transform: scale(1.12); background-color: #d6e9fc; }
.checklist strong { color: var(--text); font-weight: 700; }
.checklist strong::after { content: " "; }

/* ==========================================================================
   Stats
   ========================================================================== */

.stats { background: var(--ink); color: #fff; padding: 48px 0; }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.stat__number {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4.2vw, 2.6rem);
  font-weight: 800;
  color: var(--blue-bright);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.stat__label {
  margin-top: 8px;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #93a9bd;
  font-weight: 600;
}

/* ==========================================================================
   Reviews
   ========================================================================== */

.reviews__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.reviews__score {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: var(--fs-base);
  color: var(--text-on-dark-soft);
}
.reviews__stars { color: #ffc635; letter-spacing: 3px; font-size: 1.15rem; }

/* Same reasoning as .card-grid — three items, so 3 or 1, never 2. */
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
@media (max-width: 940px) {
  .reviews__grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}
.review-card {
  background: var(--steel-800);
  border: 1px solid var(--steel-700);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.review-card__top { display: flex; align-items: center; gap: 13px; }
.review-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--blue), var(--blue-deep));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.review-card__name { font-family: var(--display); font-weight: 700; color: #fff; font-size: 1rem; }
.review-card__stars { color: #ffc635; font-size: var(--fs-sm); letter-spacing: 1.5px; }
.review-card__text { color: #b9cadb; font-size: var(--fs-base); margin: 0; }

/* ==========================================================================
   Carrier logos
   ========================================================================== */

.carriers { padding: 48px 0; background: var(--white); border-top: 1px solid var(--rule); }
.carriers__title { font-size: var(--fs-lg); margin-bottom: 6px; }
/* Ten carrier logos. Only 5 and 2 divide evenly, so those are the only two
   column counts used — otherwise the last row ends up half empty. */
.carriers__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 28px;
  align-items: center;
}
@media (max-width: 820px) {
  .carriers__grid { grid-template-columns: repeat(2, 1fr); }
}
.carrier-item {
  display: flex; align-items: center; justify-content: center;
  padding: 22px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  min-height: 110px;
}
.carrier-item img {
  max-height: 88px;
  width: auto;
  filter: grayscale(1);
  opacity: .68;
  transition: filter .22s ease, opacity .22s ease;
}
.carrier-item:hover img { filter: grayscale(0); opacity: 1; }

/* ==========================================================================
   Audience — who the work is for
   ========================================================================== */

/* Six entries, so 3 and 2 both fill their rows. */
.audience__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
}
@media (max-width: 900px) { .audience__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .audience__grid { grid-template-columns: 1fr; } }

.audience__item {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .24s ease, box-shadow .24s ease, border-top-color .24s ease;
}
.audience__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-top-color: var(--amber);
}
.audience__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}
.audience__head svg {
  width: 22px; height: 22px;
  color: var(--blue);
  flex-shrink: 0;
}
.audience__item h3 { font-size: var(--fs-md); }
.audience__item p { font-size: var(--fs-base); color: var(--text-soft); margin: 0; }

/* ==========================================================================
   Coverage area — local SEO block
   ========================================================================== */

/* Eight cities: 4 then 2, both of which fill their rows completely. */
.coverage__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 36px;
}
@media (max-width: 820px) {
  .coverage__grid { grid-template-columns: repeat(2, 1fr); }
}
.coverage__item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-weight: 600;
  font-size: var(--fs-base);
}
.coverage__item svg { width: 16px; height: 16px; color: var(--blue); flex-shrink: 0; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item[open] { border-color: #bcd4ec; box-shadow: var(--shadow-sm); }
.faq-item__q {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-md);
  padding: 19px 52px 19px 22px;
  cursor: pointer;
  position: relative;
  list-style: none;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: "";
  position: absolute;
  right: 20px; top: 50%;
  width: 13px; height: 13px;
  margin-top: -7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7fe8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .22s ease;
}
.faq-item[open] .faq-item__q::after { transform: rotate(180deg); }
.faq-item__a {
  padding: 0 22px 20px;
  color: var(--text-soft);
  font-size: var(--fs-base);
}

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta {
  position: relative;
  background: linear-gradient(120deg, var(--blue-ink) 0%, var(--blue-deep) 55%, #1263bd 100%);
  color: #fff;
  padding: 64px 0;
  text-align: center;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% -20%, rgba(63,155,255,.4), transparent 62%);
}
.cta > .container { position: relative; }
.cta__title { font-size: clamp(1.75rem, 4vw, 2.5rem); color: #fff; margin-bottom: 12px; }
.cta__text { font-size: var(--fs-md); color: #cfe2f8; max-width: 60ch; margin: 0 auto 28px; }
.cta__buttons { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }
.cta__note { margin-top: 20px; font-size: var(--fs-sm); color: #a8c8ea; }

/* ==========================================================================
   Forms
   ========================================================================== */

.form { display: flex; flex-direction: column; gap: 17px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.form__group { display: flex; flex-direction: column; gap: 6px; }
.form__label {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--text);
}
.form__label .req { color: var(--alert); }
.form__control {
  font-family: var(--body);
  /* 16px minimum: anything smaller makes iOS zoom the page on focus */
  font-size: var(--fs-base);
  padding: 13px 15px;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form__control:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,127,232,.16);
}
textarea.form__control { min-height: 130px; resize: vertical; }
.form__hint { font-size: var(--fs-sm); color: var(--text-faint); }
.form__status {
  display: none;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  background: var(--blue-wash);
  border: 1px solid #bcd4ec;
  color: var(--blue-ink);
}
.form__status.is-visible { display: block; }

/* ==========================================================================
   Gallery
   ========================================================================== */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 36px 0 34px;
}
.filter-btn {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: 11px 20px;
  border-radius: 100px;
  border: 1.5px solid var(--rule);
  background: var(--white);
  color: var(--text-soft);
  cursor: pointer;
  transition: all .18s ease;
}
.filter-btn:hover { border-color: var(--blue); color: var(--blue-deep); }
.filter-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* 15 projects — 3 columns divides evenly. Filtered views (6/5/4 items) can
   still leave a short last row; that is unavoidable and reads as intentional
   because the tiles keep their size instead of stretching to fill. */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
.gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-alt);
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item__tag {
  position: absolute;
  left: 12px; bottom: 12px;
  background: rgba(10,16,23,.82);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

/* ==========================================================================
   Page header (inner pages)
   ========================================================================== */

.pagehead {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding: 80px 0;
  overflow: hidden;
}
.pagehead__bg {
  position: absolute; inset: 0;
  background-image: url("../images/hero-home.jpg");
  background-size: cover;
  background-position: center 40%;
  opacity: .3;
}
.pagehead--services .pagehead__bg { background-image: url("../images/hero-services.jpg"); }
.pagehead--portfolio .pagehead__bg { background-image: url("../images/hero-portfolio.jpg"); }
.pagehead--contact .pagehead__bg { background-image: url("../images/hero-contact.jpg"); }
.pagehead::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,16,23,.94), rgba(10,16,23,.62));
}
.pagehead > .container { position: relative; z-index: 1; }
.pagehead h1 { font-size: clamp(2rem, 5vw, 3rem); color: #fff; margin-bottom: 12px; }
.pagehead p { color: #c3d3e3; font-size: var(--fs-md); max-width: 58ch; margin: 0; }

.crumbs { font-size: var(--fs-sm); color: #8fa6bb; margin-bottom: 14px; }
.crumbs a { color: #8fa6bb; }
.crumbs a:hover { color: #fff; }
.crumbs span { margin: 0 7px; opacity: .55; }

/* ==========================================================================
   Service detail blocks
   ========================================================================== */

.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  padding: 64px 0;
  border-bottom: 1px solid var(--rule);
}
.service-block:last-child { border-bottom: 0; }
.service-block--flip .service-block__media { order: 2; }
.service-block__media {
  /* fills the row so the photo tracks the height of the copy beside it,
     rather than floating centered with dead space above and below */
  align-self: stretch;
  min-height: 360px;
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
}
.service-block h2 { font-size: clamp(1.625rem, 3vw, 2rem); margin-bottom: 14px; }

.spec {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: 22px;
}
.spec__cell { background: var(--white); padding: 14px 16px; }
.spec__k {
  font-family: var(--display);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: block;
  margin-bottom: 3px;
}
.spec__v { font-weight: 700; font-size: var(--fs-base); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { background: var(--ink); color: var(--text-on-dark-soft); padding: 56px 0 0; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 44px;
}
.footer__logo img { height: 68px; width: auto; margin-bottom: 16px; }
.footer p { font-size: var(--fs-sm); line-height: 1.7; }
.footer__title {
  font-size: var(--fs-xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 17px;
}
.footer__links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__links a { color: var(--text-on-dark-soft); font-size: var(--fs-sm); }
.footer__links a:hover { color: var(--blue-bright); }

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  margin-bottom: 12px;
}
.footer__contact-item svg { width: 16px; height: 16px; color: var(--blue-bright); flex-shrink: 0; margin-top: 4px; }
.footer__contact-item a { color: var(--text-on-dark-soft); }
.footer__contact-item a:hover { color: var(--blue-bright); }

.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__social a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08);
  font-size: 0;
}
.footer__social a:hover { background: var(--blue); }
.footer__social svg { width: 17px; height: 17px; fill: currentColor; color: #cfdcea; }

.footer__bottom {
  border-top: 1px solid var(--steel-700);
  padding: 22px 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--text-faint);
}
.footer__bottom p { margin: 0; font-size: var(--fs-sm); }

/* ==========================================================================
   Sticky mobile CTA
   ========================================================================== */

.mobile-cta {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  background: rgba(10,16,23,.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--steel-700);
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
}
.mobile-cta__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mobile-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-base);
}
.mobile-cta a svg { width: 18px; height: 18px; }
.mobile-cta__call { background: var(--amber); color: #fff; }
.mobile-cta__call:hover { color: #fff; }
.mobile-cta__quote { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.mobile-cta__quote:hover { color: #fff; }

/* ==========================================================================
   Scroll animation
   ========================================================================== */

[data-anim], [data-anim-stagger] > * {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .7s cubic-bezier(.16,.84,.44,1),
    transform .7s cubic-bezier(.16,.84,.44,1);
}
[data-anim].in-view, [data-anim-stagger].in-view > * {
  opacity: 1;
  transform: none;
}

/* Media panels come in from the side they sit on, so the split sections
   assemble toward the centre instead of everything sliding up together. */
.split__media[data-anim], .service-block__media[data-anim] {
  transform: translateX(-30px) scale(.98);
}
.split--flip .split__media[data-anim],
.service-block--flip .service-block__media[data-anim] {
  transform: translateX(30px) scale(.98);
}

[data-anim-stagger].in-view > *:nth-child(1) { transition-delay: 0ms; }
[data-anim-stagger].in-view > *:nth-child(2) { transition-delay: 90ms; }
[data-anim-stagger].in-view > *:nth-child(3) { transition-delay: 180ms; }
[data-anim-stagger].in-view > *:nth-child(4) { transition-delay: 270ms; }
[data-anim-stagger].in-view > *:nth-child(5) { transition-delay: 360ms; }
[data-anim-stagger].in-view > *:nth-child(6) { transition-delay: 450ms; }
[data-anim-stagger].in-view > *:nth-child(7) { transition-delay: 540ms; }
[data-anim-stagger].in-view > *:nth-child(8) { transition-delay: 630ms; }

@media (prefers-reduced-motion: reduce) {
  [data-anim], [data-anim-stagger] > * { opacity: 1; transform: none; }
  .split__media[data-anim], .service-block__media[data-anim],
  .split--flip .split__media[data-anim],
  .service-block--flip .service-block__media[data-anim] { transform: none; }
}

/* ==========================================================================
   Motion & detail
   ========================================================================== */

/* --- Water line: the mark a flood leaves on a wall, used as the hero's
       bottom edge. Reads as a brand detail rather than a stock divider. --- */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--blue) 12%,
    var(--blue-bright) 38%,
    #7cc4ff 50%,
    var(--blue-bright) 62%,
    var(--blue) 88%,
    transparent 100%);
  box-shadow: 0 0 22px 2px rgba(63,155,255,.55);
}

/* --- Reading-progress hairline, injected by main.js --- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue-bright), var(--amber));
  z-index: 200;
  will-change: transform;
}

/* --- Header condenses once you leave the hero --- */
.header {
  transition: box-shadow .3s ease, background-color .3s ease;
}
.header.is-stuck {
  box-shadow: 0 1px 0 var(--rule), 0 8px 28px -14px rgba(10,16,23,.4);
}

/* --- Section headings: a left-aligned variant so not every band is a
       centred eyebrow/title/subtitle stack --- */
.section-head--left {
  position: relative;
  display: grid;
  gap: 12px;
  max-width: 640px;
  margin-bottom: 8px;
  padding-left: 22px;
}
/* The accent rule draws downward as the heading enters, rather than being
   there from the start. */
.section-head--left::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--amber);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .7s cubic-bezier(.16,.84,.44,1) .12s;
}
.section-head--left.in-view::before { transform: scaleY(1); }
/* the grid gap owns the spacing here, so zero the components' own margins */
.section-head--left .eyebrow { margin-bottom: 0; justify-self: start; }
.section-head--left .section-title { margin-bottom: 0; }
.section-head--left .section-subtitle { margin: 0; max-width: none; }

/* --- Process: a line connecting the steps, because it is a sequence --- */
.process__grid { position: relative; }
.process__grid::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 8%;
  width: 84%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--rule) 0 7px, transparent 7px 14px);
  z-index: 0;
}
.process__step { z-index: 1; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.process__step:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: #bcd4ec;
}
.process__step::before { transition: transform .28s cubic-bezier(.34,1.56,.64,1); }
.process__step:hover::before { transform: scale(1.1) rotate(-4deg); }

/* --- Cards: image pushes in slightly, accent bar wipes across the top --- */
.card { position: relative; }
.card__image { transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.card:hover .card__image { transform: scale(1.06); }
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  z-index: 2;
}
.card:hover::before { transform: scaleX(1); }

/* --- Carrier tiles lift rather than only desaturating --- */
.carrier-item { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.carrier-item:hover { transform: translateY(-3px); border-color: #bcd4ec; box-shadow: var(--shadow-sm); }

/* --- Coverage tiles: the accent rail thickens on hover --- */
.coverage__item { transition: border-left-width .2s ease, transform .2s ease, box-shadow .2s ease; }
.coverage__item:hover { border-left-width: 7px; transform: translateX(2px); box-shadow: var(--shadow-sm); }

/* --- FAQ answer slides rather than snapping --- */
.faq-item { transition: border-color .25s ease, box-shadow .25s ease; }
.faq-item[open] .faq-item__a { animation: faqOpen .32s cubic-bezier(.22,.61,.36,1) both; }
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* --- Stats count up; reserve the width so the layout doesn't jitter --- */
.stat__number { font-variant-numeric: tabular-nums; }

/* --- Gallery: caption rises on hover --- */
.gallery-item__tag {
  transform: translateY(0);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), background-color .3s ease;
}
.gallery-item:hover .gallery-item__tag {
  transform: translateY(-3px);
  background: var(--blue-deep);
}

/* --- Buttons get a subtle sheen on hover --- */
.btn--action { position: relative; overflow: hidden; }
.btn--action::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
  transition: left .55s cubic-bezier(.22,.61,.36,1);
}
.btn--action:hover::after { left: 120%; }

/* --------------------------------------------------------------------------
   Section seams
   --------------------------------------------------------------------------
   Bands used to butt against each other with a hard edge. Tinted sections now
   fade up out of the white above them, and dark bands get the same glowing
   hairline as the hero's water line so the motif repeats down the page.
   -------------------------------------------------------------------------- */
.section--paper, .section--alt { position: relative; }
.section--paper::before, .section--alt::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 64px;
  background: linear-gradient(to bottom, var(--white), transparent);
  pointer-events: none;
}
.section--paper > .container, .section--alt > .container { position: relative; }

.stats, .cta, .section--dark {
  border-top: 1px solid rgba(63,155,255,.32);
  box-shadow: inset 0 1px 26px -8px rgba(63,155,255,.45);
}
/* reviews sits directly under stats, so no seam between them */
.stats + .section--dark { border-top: 0; box-shadow: none; }

/* --------------------------------------------------------------------------
   Scroll-driven parallax
   --------------------------------------------------------------------------
   Progressive enhancement: only runs where animation-timeline is supported.
   Animates background-position rather than transform, because the reveal
   already owns transform on these elements.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .split__media,
    .service-block__media,
    .pagehead__bg {
      animation: mediaPan linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes mediaPan {
      from { background-position: center 36%; }
      to   { background-position: center 64%; }
    }

    .card__image {
      animation: cardPan linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes cardPan {
      from { background-position: center 40%; }
      to   { background-position: center 60%; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg { animation: none; }
  .hero__inner > * { animation: none; opacity: 1; transform: none; }
  .scroll-progress { display: none; }
  .btn--action::after { display: none; }
  .section-head--left::before { transform: scaleY(1); transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1040px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .trustbar__grid { grid-template-columns: repeat(2, 1fr); }
  .trustbar__item:nth-child(2) { border-right: 0; }
  .trustbar__item:nth-child(1), .trustbar__item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.12); }
  .process__grid { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
  /* the connector only reads as a sequence on a single row */
  .process__grid::before { display: none; }
}

@media (max-width: 900px) {
  .split, .service-block { grid-template-columns: 1fr; gap: 32px; }
  .split--flip .split__media, .service-block--flip .service-block__media { order: 0; }
  .split__media { min-height: 300px; }
  .service-block__media { min-height: 260px; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
}

@media (max-width: 860px) {
  .header__cta { display: none; }
  .header__phone-icon {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 46px; height: 46px;
    margin-left: auto;
    border-radius: var(--radius-sm);
    background: var(--amber);
    color: #fff;
  }
  .header__phone-icon svg { width: 21px; height: 21px; }
  .nav-toggle { display: flex; }

  .header__nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--white);
    padding: calc(var(--header-h) + 20px) 20px 30px;
    box-shadow: -14px 0 40px -14px rgba(10,16,23,.4);
    transform: translateX(100%);
    /* A fixed element parked off-canvas still counts toward the page's
       scrollable width, so the closed drawer let the whole page scroll
       sideways. visibility:hidden takes it out of that calculation and
       stops its links being keyboard-focusable while closed. */
    visibility: hidden;
    transition: transform .28s ease, visibility .28s ease;
    overflow-y: auto;
  }
  .header__nav.open { transform: translateX(0); visibility: visible; }
  .header__nav a { padding: 14px 16px; font-size: 1.05rem; border-bottom: 1px solid var(--rule); border-radius: 0; }
  .header__nav a.active::after { display: none; }
  .header__nav a.active { background: var(--blue-wash); }

  .mobile-cta { display: block; }
  body { padding-bottom: 74px; }
}

@media (max-width: 680px) {
  .section { padding: 60px 0; }
  .hero__inner { padding: 72px 0 80px; }
  /* Buttons go full width rather than wrapping to a ragged second line */
  .hero__actions .btn,
  .cta__buttons .btn { width: 100%; }
  .cta__buttons { flex-direction: column; }
  .spec { grid-template-columns: 1fr; }
  .topbar__left { gap: 14px; font-size: var(--fs-xs); }
  .topbar__item--email { display: none; }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .footer__bottom { flex-direction: column; }
  .process__grid { grid-template-columns: 1fr; gap: 30px; }
  .trustbar__grid { grid-template-columns: 1fr; }
  .trustbar__item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .trustbar__item:last-child { border-bottom: 0; }
  .gallery { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .stats__grid { grid-template-columns: 1fr; }
  .header__logo img { height: 42px; }
}

/* ==========================================================================
   Mobile refinement
   ========================================================================== */

/* Stop iOS painting a grey box over taps. */
a, button, summary, .filter-btn { -webkit-tap-highlight-color: rgba(26,127,232,.18); }

@media (max-width: 860px) {
  /* Touch targets: 44px minimum on anything tappable. */
  .header__nav a { min-height: 48px; display: flex; align-items: center; }
  .footer__links a,
  .footer__contact-item a { display: inline-block; padding: 5px 0; }
  .filter-btn { min-height: 44px; padding: 12px 18px; }
  .faq-item__q { padding-top: 17px; padding-bottom: 17px; min-height: 56px; }
  .topbar__social a { width: 34px; height: 34px; }

  /* Seams get shallower as sections tighten up. */
  .section--paper::before, .section--alt::before { height: 40px; }

  /* The split media parallax has nowhere to travel on a short panel. */
  .split__media, .service-block__media { background-attachment: scroll; }
}

@media (max-width: 680px) {
  body { font-size: var(--fs-base); }

  .section { padding: 44px 0; }
  .section--tight { padding: 32px 0; }
  .container { padding: 0 20px; }

  .section-title { font-size: clamp(1.625rem, 6.4vw, 2rem); }
  .section-subtitle, .lede { font-size: var(--fs-base); }
  .section-head--left { padding-left: 16px; }

  /* Stacked, the split's heading is the only left-flush one on the page —
     every other section head centres here. Match them; the checklist stays
     left-aligned because centred list items are hard to scan. */
  .split__content > h2,
  .split__content > .lede { text-align: center; }
  /* .eyebrow is inline-block, so it needs to fill the line before
     text-align can centre the element itself rather than its text. */
  .split__content > .eyebrow { display: block; text-align: center; }
  .split__content > .btn {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }

  .hero h1 { font-size: clamp(2rem, 8.4vw, 2.8rem); }
  .hero h1 em { font-size: .52em; margin-top: 10px; }
  .hero__text { font-size: 1.1rem; }
  .hero__flag { font-size: var(--fs-xs); padding: 7px 12px; letter-spacing: .09em; }
  .hero__proof { gap: 10px 18px; padding-top: 20px; }
  .hero__proof-item { font-size: var(--fs-sm); }

  .trustbar__item { padding: 18px 16px; }
  .process__step { padding: 26px 20px 22px; }
  .card__image { height: 190px; }
  .card__body { padding: 20px; }
  .audience__item { padding: 20px 18px; }

  .cta { padding: 48px 0; }
  .cta__title { font-size: clamp(1.65rem, 6.6vw, 2.1rem); }
  .cta__text { font-size: 1rem; }

  .carriers { padding: 40px 0; }
  .footer { padding-top: 40px; }

  /* Sticky bar clearance, including the home-indicator area. */
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}

@media (max-width: 480px) {
  .topbar__inner { justify-content: center; gap: 10px; }
  .topbar__social { display: none; }
  .topbar__left { gap: 12px; justify-content: center; }

  .section { padding: 40px 0; }
  .hero__inner { padding: 52px 0 60px; }
  .hero__actions { gap: 10px; margin-bottom: 26px; }

  .coverage__grid { grid-template-columns: 1fr; }
  .carriers__grid { gap: 10px; }
  .carrier-item { min-height: 66px; padding: 12px 10px; }

  .split__media { min-height: 220px; }
  .service-block__media { min-height: 200px; }

  .mobile-cta a { font-size: var(--fs-sm); padding: 13px 6px; }
  .review-card, .process__step { padding: 20px 18px; }
}

/* Short landscape phones: the hero should not need a full scroll to clear. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero__inner { padding: 32px 0 38px; }
  .hero h1 { font-size: 1.9rem; }
  .hero__text { font-size: var(--fs-base); }
  .mobile-cta { display: none; }
  body { padding-bottom: 0; }
}

/* ==========================================================================
   Confirmation modal
   ========================================================================== */

.confirm-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 16, 23, 0);
  backdrop-filter: blur(0);
  transition: background .3s, backdrop-filter .3s;
  padding: 24px;
}
.confirm-modal.is-visible {
  background: rgba(10, 16, 23, .72);
  backdrop-filter: blur(6px);
}
.confirm-modal__box {
  background: #fff; color: var(--ink);
  border-radius: 16px; padding: 48px 36px 36px; text-align: center;
  max-width: 420px; width: 100%;
  box-shadow: 0 20px 60px rgba(10, 16, 23, .35);
  transform: scale(.92) translateY(20px); opacity: 0;
  transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.confirm-modal.is-visible .confirm-modal__box {
  transform: scale(1) translateY(0); opacity: 1;
}
.confirm-modal__icon {
  width: 64px; height: 64px; margin: 0 auto 20px;
  background: var(--blue); color: #fff;
  border-radius: 50%; font-size: 32px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.confirm-modal__title {
  font-family: var(--font-head); font-size: 1.5rem;
  font-weight: 700; margin: 0 0 10px;
}
.confirm-modal__text {
  font-size: 1.05rem; line-height: 1.55; margin: 0 0 8px; color: var(--ink-soft);
}
.confirm-modal__sub {
  font-size: var(--fs-sm); color: var(--ink-muted); margin: 0 0 24px;
}
.confirm-modal__sub a { color: var(--blue); text-decoration: underline; }
.confirm-modal__close { min-width: 160px; }

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .topbar, .header, .mobile-cta, .cta, .filters { display: none; }
  body { color: #000; }
  .hero, .pagehead { background: #fff; color: #000; }
}