/* ==========================================================================
   Roof Leak Pros (Spanish Fork, UT) - site stylesheet
   Hand-written for this site. Plain CSS, no build step, no framework.

   Contents
     1. Fonts and design tokens
     2. Base elements
     3. Layout helpers (container, block, headline, kicker, buttons, links)
     4. Header and menu
     5. Home page sections
     6. Inner-page sections (page hero, area pages, service pages)
     7. Shared sections (FAQ, call banner, contact, footer, floating call)
     8. Image placeholders and motion preferences

   Breakpoints used throughout: 1180 / 1080 / 860 / 620 / 420 px (max-width),
   plus 1100 px for the four-tile service index.
   ========================================================================== */


/* 1. Fonts and design tokens ---------------------------------------------- */

/* DM Sans and Manrope: variable WOFF2 files from the Fontsource packages
   (@fontsource-variable/dm-sans, @fontsource-variable/manrope), SIL Open Font
   License 1.1 - see assets/fonts/OFL-*.txt. Latin + Latin Extended only.
   The weight ranges are declared narrower than the files support on purpose:
   it keeps text rendering identical to the approved v2 design. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* neutrals */
  --night: #17150f;          /* dark sections, body text */
  --night-2: #2b2921;        /* softer dark text */
  --cream: #fffdf8;          /* page background */
  --sand: #f3efe5;           /* alternate light section */
  --rule: #dcd6c9;           /* hairlines on light backgrounds */
  --grey: #5f5b52;           /* secondary text on light (AA on cream and sand) */
  --dim: #bdb6a9;            /* secondary text on dark */

  /* violet accent */
  --violet: #6d28d9;
  --violet-deep: #5b21b6;    /* small violet text on light backgrounds */
  --violet-glow: #a78bfa;    /* violet text on dark backgrounds */
  --violet-soft: #c4b5fd;    /* links on dark backgrounds */
  --violet-wash: #ede9fe;    /* text on violet, pale tiles */

  --f-body: "DM Sans", Arial, sans-serif;
  --f-head: "Manrope", Arial, sans-serif;
  --f-num: Georgia, serif;

  --round: 6px;
  --lift: 0 24px 70px rgba(23, 21, 15, 0.16);

  /* striped stand-in behind dark image areas until real photos are added */
  --photo-stand-in:
    repeating-linear-gradient(135deg, rgba(139, 92, 246, 0.26) 0 14px, rgba(139, 92, 246, 0.07) 14px 28px),
    linear-gradient(135deg, #1f1b2e 0%, #2c2445 45%, #3b2566 100%);
}


/* 2. Base elements --------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--cream);
  color: var(--night);
  font-family: var(--f-body);
  font-size: 17.5px;
  line-height: 1.7;
}

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

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  font-family: var(--f-head);
  letter-spacing: -0.045em;
  line-height: 1.08;
}
h2 { margin-bottom: 22px; font-size: clamp(2.25rem, 4vw, 4.35rem); }
h3 { font-size: 1.25rem; }

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

@media (max-width: 620px) {
  h2 { font-size: clamp(2rem, 9vw, 2.35rem); }
}

/* The phone number is wrapped in .no-wrap by the generator. The span must not
   pick up any styling meant for sibling spans - it only stops line breaks. */
.no-wrap { all: unset !important; white-space: nowrap !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* 3. Layout helpers -------------------------------------------------------- */

.container { width: min(1180px, 100% - 48px); margin: 0 auto; }

/* .block = a padded page band. --sand switches the background, --flush drops
   the top padding when two same-colour bands touch (added by the generator). */
.block { padding: 100px 0; }
.block--sand { background: var(--sand); }
.block.block--flush { padding-top: 0; }

@media (max-width: 860px) { .block { padding: 80px 0; } }
@media (max-width: 620px) {
  .container { width: min(100% - 32px, 1180px); }
  .block { padding: 64px 0; }
}

/* small uppercase label above headings */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--violet-deep);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.kicker > span { width: 24px; height: 1px; background: currentColor; }
.kicker--light { color: var(--violet-glow); }
.kicker--light > span { background: var(--violet-glow); }

/* section heading block */
.headline { max-width: 760px; margin-bottom: 52px; }
.headline.is-centered { margin-right: auto; margin-left: auto; text-align: center; }
.headline p { color: var(--grey); font-size: 1.09rem; line-height: 1.7; }
.headline--split {
  display: grid;
  max-width: none;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: end;
  gap: 80px;
}
.headline--split h2 { margin-bottom: 0; }
@media (max-width: 860px) {
  .headline--split { grid-template-columns: 1fr; gap: 20px; }
}

.after-note,
.more-note { color: var(--grey); font-size: 1.09rem; line-height: 1.7; text-align: center; }
.after-note { max-width: 780px; margin: 34px auto 0; }
.after-note p { font-size: 1.09rem; line-height: 1.7; }
.more-note { margin: 34px 0 0; }

.sub-title { margin: 0 0 14px; font-size: 1.6rem; }
.sub-title a { border-bottom: 2px solid var(--violet); color: var(--night); }

/* Inline links inside running copy on light backgrounds */
.feature__copy p a,
.tick-list__text a,
.headline p a,
.after-note a,
.more-note a,
.reason-grid p a,
.steps__copy p a,
.steps__list a,
.town__copy p a,
.qa-list__answer a,
.row p a,
.rich-text a,
.dark-list__items a,
.index-band__head a {
  color: var(--violet-deep);
  text-decoration: underline 1px;
  text-underline-offset: 3px;
}

/* buttons */
.btn {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
  max-width: 100%;
  min-height: 52px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 180ms, background 180ms, border-color 180ms;
}
.btn:hover { transform: translateY(-2px); }
.btn--violet { background: var(--violet); color: #fff; }
.btn--violet:hover { background: var(--violet-deep); }
.btn--white { background: #fff; color: var(--night); }
.btn--white:hover { background: var(--sand); }
.btn--wide { width: 100%; }
@media (max-width: 420px) {
  .btn { gap: 12px; padding: 14px 16px; font-size: 0.74rem; letter-spacing: 0.04em; }
}

/* underlined text link with arrow */
.arrow-link {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  color: var(--violet-deep);
  font-weight: 700;
}
.arrow-link--light { color: #fff; }

/* tick list (used in copy, contact card and legal pages) */
.tick-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 22px;
  margin: 28px 0 34px;
  padding: 0;
  list-style: none;
}
.tick-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.83rem;
  font-weight: 600;
}
.tick-list li > span {
  display: grid;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  background: rgba(109, 40, 217, 0.12);
  color: var(--violet-deep);
  font-size: 0.7rem;
}
.tick-list__text { flex: 1 1 0%; font-size: 1.04rem; font-weight: 500; line-height: 1.55; }
@media (max-width: 620px) { .tick-list { grid-template-columns: 1fr; } }

/* dotted backdrop shared by framed photos */
.photo-frame::after,
.row__media::after {
  position: absolute;
  right: 0;
  bottom: 0;
  content: "";
  background-image: radial-gradient(#b7a6e6 1px, transparent 1px);
  background-size: 8px 8px;
}

/* 4. Header and menu ------------------------------------------------------- */

.masthead { position: relative; z-index: 50; background: var(--cream); }

.topbar {
  border-bottom: 1px solid #353229;
  background: var(--night);
  color: #d6d1c7;
  font-size: 0.72rem;
}
.topbar__inner {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
}
.topbar__inner p { margin: 0; }
.topbar__inner > div { display: flex; gap: 30px; }
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #76d16e;
  box-shadow: 0 0 0 4px rgba(118, 209, 110, 0.12);
}

.navbar {
  display: grid;
  min-height: 78px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-head);
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}
.logo small {
  display: block;
  margin-top: 4px;
  font-family: var(--f-body);
  font-size: 0.48rem;
  letter-spacing: 0.19em;
}
.logo__badge {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 50% 50% 50% 8px;
  background: var(--violet);
  color: #fff;
  font-size: 1.2rem;
  transform: rotate(-7deg);
}

/* desktop menu */
.menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 27px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.menu a { position: relative; padding: 28px 0; }
.menu a::after {
  position: absolute;
  right: 0;
  bottom: 20px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--violet);
  transform: scaleX(0);
  transition: transform 160ms;
}
.menu a:hover::after { transform: scaleX(1); }

.menu__group { position: relative; }
.menu__group > a { display: inline-flex; align-items: center; gap: 0.3rem; }
.menu__caret { font-size: 0.7em; transition: transform 0.2s; }
.menu__group:hover .menu__caret { transform: rotate(180deg); }

.menu__sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  gap: 2px;
  min-width: 250px;
  max-height: 380px;
  margin-top: 0.5rem;
  padding: 0.5rem;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: var(--round);
  background: #fff;
  box-shadow: var(--lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}
.menu__group:hover .menu__sub,
.menu__group:focus-within .menu__sub { opacity: 1; visibility: visible; transform: none; }
.menu .menu__sub a {
  padding: 0.55rem 0.8rem;
  border-radius: 4px;
  color: var(--night);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}
.menu .menu__sub a:hover { background: var(--sand); color: var(--violet); }
.menu .menu__sub .menu__sub-all {
  margin-top: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  color: var(--violet);
  font-weight: 600;
}

.menu .menu__call { display: none; }

/* violet phone block on the right of the bar, bleeding to the window edge */
.header-call {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: 12px;
  margin-right: calc((100vw - min(1180px, 100vw - 48px)) / -2);
  padding: 0 max(24px, 50vw - 590px) 0 22px;
  background: var(--violet);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  white-space: nowrap;
}
.header-call small {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.header-call__icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
}

.menu-btn { display: none; border: 0; background: transparent; }

@media (max-width: 1180px) {
  .header-call { gap: 10px; font-size: 0.84rem; }
}
@media (max-width: 1080px) {
  .navbar { gap: 25px; }
  .menu { gap: 17px; }
  .menu > a, .menu__group > a { font-size: 0.66rem; }
  .header-call { padding-left: 15px; }
}

/* Mobile: the menu becomes a drop-down sheet under the header and the two
   sub-menus open in place (toggled by site.js). */
@media (max-width: 860px) {
  .topbar__inner > div span:first-child { display: none; }
  .navbar { min-height: 70px; }
  .header-call { padding-right: 24px; }

  .menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    justify-self: end;
  }
  .menu-btn > span:not(.visually-hidden) {
    width: 22px;
    height: 2px;
    background: var(--night);
    transition: transform 180ms, opacity 180ms;
  }
  .menu-btn[aria-expanded="true"] > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .menu {
    position: absolute;
    top: 102px;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px 24px 25px;
    border-top: 1px solid var(--rule);
    background: var(--cream);
    box-shadow: 0 18px 35px rgba(23, 21, 15, 0.12);
  }
  .menu.is-open { display: flex; }
  .menu a { padding: 13px 0; border-bottom: 1px solid var(--rule); }
  .menu > a, .menu__group > a { font-size: 0.72rem; }
  .menu a::after { display: none; }

  .menu__group > a { display: flex; justify-content: space-between; }
  .menu__caret {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    font-size: 0;
    line-height: 1;
  }
  .menu__caret::after {
    content: "+";
    color: var(--grey);
    font-size: 1.35rem;
    font-weight: 400;
  }
  .menu__group.is-open .menu__caret::after { content: "\2212"; }
  .menu__group:hover .menu__caret { transform: none; }

  .menu__sub {
    position: static;
    max-height: 0;
    margin: 0;
    padding: 0 0 0 1rem;
    overflow: hidden;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: max-height 0.28s;
  }
  .menu__group.is-open > .menu__sub { max-height: 70vh; overflow: auto; }
}
@media (max-width: 620px) {
  .topbar__inner { justify-content: center; }
  .topbar__inner > div { display: none; }
  .navbar { grid-template-columns: 1fr auto; }
  .header-call { display: none; }

  .menu .menu__call {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 16px;
    padding: 14px 18px;
    border: 0;
    border-radius: 4px;
    background: var(--violet);
    color: #fff;
    letter-spacing: 0;
    text-transform: none;
  }
  .menu__call small {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .menu__call > span {
    font-family: var(--f-head);
    font-size: 1.2rem;
    font-weight: 800;
    white-space: nowrap;
  }
}

body.no-scroll { overflow: hidden; }


/* 5. Home page sections ---------------------------------------------------- */

/* Home hero: full-bleed photo, dark wash, copy on the left, call card right */
.home-hero {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background: var(--night);
  color: #fff;
}
.home-hero__bg,
.home-hero__shade { position: absolute; inset: 0; }
.home-hero__bg {
  background: var(--photo-stand-in);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.015);
}
.home-hero__shade {
  background:
    linear-gradient(90deg, rgba(16, 15, 11, 0.91) 0%, rgba(16, 15, 11, 0.66) 40%, rgba(16, 15, 11, 0.18) 70%, rgba(16, 15, 11, 0.48) 100%),
    linear-gradient(0deg, rgba(16, 15, 11, 0.35), transparent 45%);
}
.home-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 720px;
  grid-template-columns: minmax(0, 1fr) 408px;
  align-items: center;
  gap: 72px;
  padding: 54px 0;
}
.home-hero__copy { max-width: 670px; }
.home-hero h1 {
  margin-bottom: 23px;
  font-size: clamp(3.25rem, 5.9vw, 6.15rem);
  font-weight: 800;
  letter-spacing: -0.065em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.home-hero__copy > p {
  max-width: 570px;
  margin-bottom: 30px;
  color: #ece7dd;
  font-size: 1.16rem;
  line-height: 1.7;
}
.home-hero__actions { display: flex; align-items: center; gap: 26px; }

/* two big numbers under the hero copy */
.stat-row {
  display: grid;
  max-width: 620px;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 54px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.stat-row > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}
.stat-row > div + div { padding-left: 22px; }
.stat-row > div:last-child { border-right: 0; }
.stat-row strong { min-width: 44px; font-family: var(--f-head); font-size: 1.75rem; line-height: 1; }
.stat-row span { color: var(--violet-soft); font-size: 0.62rem; letter-spacing: 0.03em; line-height: 1.2; }
.stat-row small { display: block; color: #c8c2b7; font-size: 0.82rem; letter-spacing: 0; }

/* white "just call" card in the hero */
.call-card {
  padding: 29px;
  border-top: 4px solid var(--violet);
  border-radius: var(--round);
  background: var(--cream);
  box-shadow: var(--lift);
  color: var(--night);
}
.call-card > p { margin-bottom: 18px; color: var(--grey); font-size: 1rem; line-height: 1.6; }
.call-card .btn { margin-top: 17px; }
.call-card .fine-print { color: #777267; font-size: 0.9rem; }

.card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
.card-head h2 { margin: 0; font-size: 1.35rem; }
.card-head small {
  display: block;
  color: var(--violet-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.card-head__icon {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
}
.fine-print { display: block; margin-top: 10px; font-size: 0.94rem; text-align: center; }

@media (max-width: 1080px) {
  .home-hero__grid { grid-template-columns: minmax(0, 1fr) 375px; gap: 38px; }
}
@media (max-width: 860px) {
  .home-hero { min-height: auto; }
  .home-hero__grid { grid-template-columns: 1fr; min-height: auto; padding: 80px 0; }
  .home-hero__copy { max-width: 720px; }
  .home-hero__shade {
    background:
      linear-gradient(90deg, rgba(16, 15, 11, 0.91), rgba(16, 15, 11, 0.45)),
      linear-gradient(0deg, rgba(16, 15, 11, 0.35), transparent 45%);
  }
  .call-card { max-width: 620px; }
}
@media (max-width: 620px) {
  .home-hero__grid { padding: 62px 0; }
  .home-hero h1 { font-size: clamp(2.5rem, 12vw, 4.2rem); }
  .home-hero__actions { flex-direction: column; align-items: flex-start; gap: 17px; }
  .stat-row { grid-template-columns: 1fr; gap: 15px; margin-top: 38px; }
  .stat-row > div,
  .stat-row > div + div {
    padding: 0 0 15px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .stat-row > div:last-child { border-bottom: 0; }
  .call-card { padding: 23px 18px; }
}
@media (max-width: 420px) {
  .call-card { padding: 22px 16px; }
}

/* Four promises under the hero */
.promise-bar { border-bottom: 1px solid var(--rule); background: var(--cream); }
.promise-bar__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.promise-bar__grid > div {
  display: flex;
  min-height: 112px;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border-left: 1px solid var(--rule);
}
.promise-bar__grid > div:last-child { border-right: 1px solid var(--rule); }
.promise-bar__grid > div > span {
  color: var(--violet-deep);
  font-family: var(--f-num);
  font-size: 0.85rem;
  font-style: italic;
}
.promise-bar__grid p { margin: 0; color: var(--grey); font-size: 0.9rem; line-height: 1.4; }
.promise-bar__grid strong { display: block; color: var(--night); font-size: 1rem; }
@media (max-width: 860px) {
  .promise-bar__grid { grid-template-columns: repeat(2, 1fr); }
  .promise-bar__grid > div:nth-child(2) { border-right: 1px solid var(--rule); }
}
@media (max-width: 620px) {
  .promise-bar__grid { grid-template-columns: 1fr; }
  .promise-bar__grid > div { min-height: 0; padding: 16px 20px; border-right: 1px solid var(--rule); }
}

/* Feature: framed portrait photo + copy */
.feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: 100px;
}
.photo-frame { position: relative; padding: 0 35px 35px 0; }
.photo-frame::after { z-index: -1; width: 75%; height: 65%; }
.photo-frame img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--round);
  object-fit: cover;
}
.photo-frame__tag {
  position: absolute;
  top: 35px;
  left: -34px;
  padding: 8px 15px;
  background: var(--night);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: left top;
}
.feature__copy p { font-size: 1.09rem; line-height: 1.7; }
.feature__copy > p:not(.intro-text) { color: var(--grey); }
.feature__copy .intro-text { color: var(--night); font-size: 1.24rem; font-weight: 600; line-height: 1.6; }

.sign-off {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding-top: 23px;
  border-top: 1px solid var(--rule);
}
.sign-off__script { color: var(--violet-deep); font-family: var(--f-num); font-size: 1.4rem; font-style: italic; }
.sign-off strong, .sign-off small { display: block; }
.sign-off strong { font-size: 0.95rem; }
.sign-off small { color: var(--grey); font-size: 0.82rem; }
.round-link {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  transition: background 160ms, color 160ms;
}
.round-link:hover { background: var(--night); color: #fff; }

@media (min-width: 861px) {
  /* let the photo grow with the copy so neither column leaves a gap */
  .feature__grid { align-items: stretch; }
  .feature__grid > .feature__copy { align-self: center; }
  .feature__grid > .photo-frame { display: flex; align-items: center; }
  .feature__grid > .photo-frame img { height: 100%; min-height: 420px; max-height: 640px; aspect-ratio: auto; }
}
@media (max-width: 1080px) {
  .feature__grid { gap: 55px; }
}
@media (max-width: 860px) {
  .feature__grid { grid-template-columns: 1fr; gap: 60px; }
  .photo-frame { width: 100%; max-width: 580px; margin: 0 auto; }
  .feature__grid > .photo-frame img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 620px) {
  .photo-frame { padding: 0 18px 25px 0; }
  .photo-frame__tag { display: none; }
  .sign-off { grid-template-columns: 1fr auto; }
  .sign-off__script { grid-column: 1 / -1; }
}

/* Spotlight cards: three photo cards for the main services */
.spotlight-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; }
.spotlight {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  border-radius: var(--round);
  background: var(--night);
  color: #fff;
}
.spotlight--wide { min-height: 450px; }
.spotlight img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms; }
.spotlight:hover img { transform: scale(1.04); }
.spotlight__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  background: linear-gradient(0deg, rgba(18, 16, 11, 0.96) 0%, rgba(18, 16, 11, 0.15) 70%);
}
.spotlight__body > span {
  margin-bottom: 9px;
  color: var(--violet-glow);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.spotlight__body h3 { margin-bottom: 8px; font-size: 1.55rem; }
.spotlight__body p { margin-bottom: 18px; color: var(--dim); font-size: 0.96rem; line-height: 1.55; }
.spotlight__body a { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.spotlight__body b { margin-left: 8px; color: var(--violet-glow); }
@media (max-width: 860px) {
  .spotlight-grid { grid-template-columns: 1fr 1fr; }
  .spotlight--wide { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .spotlight-grid { grid-template-columns: 1fr; }
  .spotlight--wide { grid-column: auto; min-height: 410px; }
}

/* Link grid: numbered list of the remaining services */
.link-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 16px;
  border-top: 1px solid #ccc4b5;
  border-left: 1px solid #ccc4b5;
}
.link-grid a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-content: start;
  gap: 2px 12px;
  padding: 26px 24px;
  border-right: 1px solid #ccc4b5;
  border-bottom: 1px solid #ccc4b5;
  transition: background 160ms;
}
.link-grid a:hover { background: #fff; }
.link-grid a > span {
  grid-row: span 2;
  color: var(--violet-deep);
  font-family: var(--f-num);
  font-size: 0.85rem;
  font-style: italic;
}
.link-grid strong { font-size: 1.02rem; line-height: 1.35; }
.link-grid small { color: var(--grey); font-size: 0.9rem; line-height: 1.5; }
.link-grid b { grid-column: 3; grid-row: 1 / 3; align-self: start; padding-top: 2px; color: var(--violet); }
/* pale tile that rounds out an odd count */
.link-grid a.tile-extra { background: var(--violet-wash); }
.link-grid a.tile-extra:hover { background: #e2dafc; }
.link-grid a.tile-extra > span,
.link-grid a.tile-extra b { color: var(--violet-deep); }
@media (max-width: 860px) {
  .link-grid { grid-template-columns: repeat(2, 1fr); }
}


/* Reasons: bordered grid of numbered points */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.reason-grid article {
  position: relative;
  padding: 30px 30px 34px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: background 180ms, transform 180ms;
}
.reason-grid article:hover { z-index: 2; background: var(--sand); transform: translateY(-6px); }
.reason-grid__num {
  position: absolute;
  top: 22px;
  right: 22px;
  color: #77716a;
  font-family: var(--f-num);
  font-size: 0.75rem;
  font-style: italic;
}
.icon-dot {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-family: var(--f-num);
  font-size: 1.2rem;
}
.reason-grid h3 { margin-bottom: 13px; }
.reason-grid p { margin: 0; color: var(--grey); font-size: 1rem; line-height: 1.65; }
@media (max-width: 860px) {
  .reason-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Dark list: sticky intro + list of problems on a dark band */
.dark-list { padding: 95px 0; background: var(--night); color: #fff; }
.dark-list .kicker { color: var(--violet-glow); }
.dark-list .kicker > span { background: var(--violet-glow); }
.dark-list a:not(.btn) { color: var(--violet-soft); }
.dark-list__grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  align-items: start;
  gap: 100px;
}
.dark-list__intro { position: sticky; top: 40px; }
.dark-list__intro h2 { font-size: clamp(2.4rem, 4vw, 4.2rem); }
.dark-list__intro p { margin-bottom: 26px; color: var(--dim); font-size: 1.09rem; line-height: 1.7; }
.dark-list__items { border-top: 1px solid #3e3b34; }
.dark-list__items article {
  display: grid;
  grid-template-columns: 45px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 26px 10px;
  border-bottom: 1px solid #3e3b34;
  transition: padding 180ms, background 180ms;
}
.dark-list__items article:hover { padding-right: 20px; padding-left: 20px; background: #211f19; }
.dark-list__items > article > span {
  color: var(--violet-glow);
  font-family: var(--f-num);
  font-size: 0.74rem;
  font-style: italic;
}
.dark-list__items h3 { margin-bottom: 6px; font-size: 1.15rem; }
.dark-list__items h3.dark-list__solo { margin: 0; font-size: 1.12rem; line-height: 1.45; letter-spacing: -0.02em; }
.dark-list__items p { margin: 0; color: var(--dim); font-size: 1rem; line-height: 1.6; }
.dark-list__items b { color: var(--violet-glow); }
@media (max-width: 860px) {
  .dark-list__grid { grid-template-columns: 1fr; gap: 60px; }
  .dark-list__intro { position: static; }
}
@media (max-width: 620px) {
  .dark-list__items article { grid-template-columns: 32px 1fr; }
  .dark-list__items b { display: none; }
}

/* Steps: clickable process list with a photo and a live "current step" card */
.steps__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 80px;
}
.steps__copy h2 { margin-bottom: 42px; }
.steps__lead p,
.steps__after p { max-width: 520px; color: var(--grey); font-size: 1.09rem; line-height: 1.7; }
.steps__after { margin-top: 26px; }
.steps__list article { border-top: 1px solid var(--rule); }
.steps__list article:last-child { border-bottom: 1px solid var(--rule); }
.steps__list button {
  display: grid;
  width: 100%;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 19px 0;
  border: 0;
  background: transparent;
  color: var(--night);
  text-align: left;
}
.steps__list button::after { content: "+"; color: var(--violet); }
.steps__list .is-current button::after { content: "\2212"; }
.steps__list button span { color: var(--violet-deep); font-family: var(--f-num); font-size: 0.74rem; font-style: italic; }
.steps__list button strong { font-size: 1.06rem; }
.steps__list p {
  display: none;
  margin: -3px 0 20px 48px;
  color: var(--grey);
  font-size: 1rem;
  line-height: 1.65;
}
.steps__list .is-current p { display: block; }

.steps__visual { position: relative; min-height: 600px; padding: 0 0 45px 55px; }
.steps__visual::before {
  position: absolute;
  top: 45px;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 80%;
  content: "";
  background: var(--sand);
}
.steps__visual img { width: 100%; height: 530px; border-radius: var(--round); object-fit: cover; }
.steps__card,
.steps__bar { position: absolute; right: -25px; bottom: 0; width: 300px; }
.steps__card {
  min-height: 145px;
  padding: 25px;
  background: var(--night);
  box-shadow: var(--lift);
  color: #fff;
}
.steps__card small {
  display: block;
  margin-bottom: 8px;
  color: var(--violet-glow);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.steps__card strong { display: block; margin-bottom: 8px; font-family: var(--f-head); }
.steps__card p { margin: 0; color: #bdb7ad; font-size: 0.94rem; line-height: 1.6; }
.steps__bar { height: 3px; background: #403d35; }
.steps__bar span { display: block; height: 100%; background: var(--violet); transition: width 220ms; }

@media (max-width: 1080px) {
  .steps__grid { gap: 55px; }
}
@media (max-width: 860px) {
  .steps__grid { grid-template-columns: 1fr; gap: 60px; }
  .steps__visual { max-width: 680px; }
}
@media (max-width: 620px) {
  .steps__visual { min-height: 480px; padding: 0 0 60px 22px; }
  .steps__visual img { height: 440px; }
  .steps__card, .steps__bar { right: 0; width: calc(100% - 45px); }
}

/* Callout: full-width photo with a dark "water coming in?" card */
.callout { position: relative; min-height: 640px; overflow: hidden; background: var(--night); }
.callout > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.callout::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(11, 12, 14, 0.55), transparent 65%);
}
.callout__inner { position: relative; z-index: 2; display: flex; min-height: 640px; align-items: center; }
.callout__card {
  width: min(480px, 100%);
  padding: 45px;
  border-left: 4px solid var(--violet);
  background: rgba(23, 21, 15, 0.94);
  box-shadow: var(--lift);
  color: #fff;
}
.callout__card h2 { font-size: clamp(2.45rem, 4vw, 4.1rem); }
.callout__card > p { color: var(--dim); font-size: 1.09rem; line-height: 1.7; }
.callout__card a:not(.btn) { color: var(--violet-soft); text-decoration: underline; text-underline-offset: 3px; }
.callout__card > div { display: flex; align-items: center; gap: 18px; margin-top: 28px; }
.callout__card > div small { max-width: 130px; color: var(--dim); font-size: 0.8rem; line-height: 1.3; }
@media (max-width: 620px) {
  .callout, .callout__inner { min-height: 690px; }
  .callout > img { object-position: 68% center; }
  .callout__card { align-self: flex-end; margin-bottom: 24px; padding: 32px 24px; }
  .callout__card > div { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .callout__card { padding-right: 20px; padding-left: 20px; }
}

/* Town: neighbourhood list + drawn map (home page) */
.town { background: var(--sand); }
.town__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: 80px; }
.town__copy > p { color: var(--grey); font-size: 1.09rem; line-height: 1.7; }
.town__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin: 30px 0; }
.town__list ul { margin: 0; padding: 0; list-style: none; }
.town__list li { padding: 9px 0; border-bottom: 1px solid #d0c8b8; font-size: 0.82rem; font-weight: 700; }
.town__list li::before { margin-right: 9px; content: "\2197"; color: var(--violet); }
.town__list a { font-size: 0.92rem; }
.town__copy > p.town__note {
  padding: 16px;
  border-left: 3px solid var(--violet);
  background: var(--cream);
  color: var(--grey);
}
.town__note strong { display: block; color: var(--night); }

.town-map {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 10px solid var(--cream);
  background-color: #dbe4ce;
  background-image:
    linear-gradient(32deg, transparent 48%, rgba(255, 255, 255, 0.75) 49%, rgba(255, 255, 255, 0.75) 51%, transparent 52%),
    linear-gradient(118deg, transparent 47%, rgba(255, 255, 255, 0.8) 48%, rgba(255, 255, 255, 0.8) 50%, transparent 51%);
  background-size: 150px 110px, 190px 160px;
  box-shadow: 0 20px 60px rgba(53, 48, 37, 0.12);
}
.town-map__river {
  position: absolute;
  top: -70px;
  bottom: -80px;
  left: -80px;
  width: 46%;
  border-radius: 0 50% 50% 0;
  background: #a8d8d7;
  transform: rotate(-8deg);
}
.town-map__river span {
  position: absolute;
  top: 49%;
  left: 36%;
  color: #234f4e;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: center;
  transform: rotate(8deg);
}
.town-map__street {
  position: absolute;
  height: 3px;
  border-top: 1px solid var(--violet-soft);
  border-bottom: 1px solid var(--violet-soft);
  background: var(--cream);
}
.town-map__street.s1 { top: 41%; left: 26%; width: 75%; transform: rotate(-10deg); }
.town-map__street.s2 { top: 59%; left: 24%; width: 85%; transform: rotate(16deg); }
.town-map__street.s3 { top: 48%; left: 58%; width: 55%; transform: rotate(80deg); }
.town-map__pin {
  position: absolute;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 4px solid var(--cream);
  border-radius: 50% 50% 50% 4px;
  background: var(--violet);
  box-shadow: 0 7px 14px rgba(23, 21, 15, 0.2);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  transform: rotate(-45deg);
}
.town-map__pin.p1 { top: 35%; left: 45%; }
.town-map__pin.p2 { top: 49%; left: 66%; }
.town-map__pin.p3 { top: 69%; left: 60%; }
.town-map__pin.p4 { top: 18%; left: 61%; }
.town-map__pin.p5 { top: 55%; left: 40%; }
.town-map__tag {
  position: absolute;
  padding: 2px 5px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--night);
  font-size: 0.62rem;
  font-weight: 700;
}
.town-map__tag.t1 { top: 41%; left: 42%; }
.town-map__tag.t2 { top: 48%; left: 73%; }
.town-map__tag.t3 { top: 73%; left: 65%; }
.town-map__tag.t4 { top: 17%; left: 68%; }
.town-map__key {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 10px 13px;
  background: var(--cream);
  color: var(--night-2);
  font-size: 0.62rem;
  font-weight: 700;
}
.town-map__key span {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--violet);
}
@media (max-width: 1080px) {
  .town__grid { gap: 55px; }
}
@media (max-width: 860px) {
  .town__grid { grid-template-columns: 1fr; gap: 60px; }
}
@media (max-width: 620px) {
  .town__list { gap: 15px; }
  .town-map { min-height: 420px; }
  .town-map__river span { left: 44%; }
}


/* 6. Inner-page sections --------------------------------------------------- */

/* Page hero: photo header used on every page except home */
.page-hero {
  position: relative;
  min-height: 650px;
  background: var(--night);
  color: #fff;
}
.page-hero__bg,
.page-hero__shade { position: absolute; inset: 0; }
.page-hero__bg {
  background: var(--photo-stand-in);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.page-hero__shade {
  background:
    linear-gradient(90deg, rgba(15, 15, 12, 0.96) 0%, rgba(15, 15, 12, 0.74) 45%, rgba(15, 15, 12, 0.18) 80%),
    linear-gradient(0deg, rgba(15, 15, 12, 0.5), transparent 55%);
}
.page-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 650px;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: center;
  gap: 85px;
  padding: 62px 0;
}
/* legal-style pages: no buttons and no side card, so a shorter header */
.page-hero.page-hero--short,
.page-hero--short .page-hero__grid { min-height: 420px; }
.page-hero__copy { max-width: 700px; }
.page-hero h1 {
  max-width: 760px;
  margin-bottom: 22px;
  font-size: clamp(3.3rem, 6vw, 6rem);
  letter-spacing: -0.068em;
  overflow-wrap: break-word;
}
.page-hero__copy > p { max-width: 620px; margin-bottom: 30px; color: #e4ded3; font-size: 1.12rem; line-height: 1.7; }
.page-hero__actions { display: flex; align-items: center; gap: 30px; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 60px;
  color: #afa99f;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}
.crumbs strong { color: #fff; }

.phone-stack { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, 0.24); }
.phone-stack small, .phone-stack strong { display: block; }
.phone-stack small { color: var(--dim); font-size: 0.78rem; }
.phone-stack strong { font-family: var(--f-head); font-size: 1rem; white-space: nowrap; }

@media (max-width: 1080px) {
  .page-hero__grid { gap: 45px; }
}
@media (max-width: 860px) {
  .page-hero__grid { grid-template-columns: 1fr; padding-bottom: 0; }
  .crumbs { margin-bottom: 40px; }
}
@media (max-width: 620px) {
  .page-hero { min-height: auto; }
  .page-hero__grid { min-height: auto; padding-top: 55px; }
  .page-hero h1 { font-size: clamp(2.4rem, 11vw, 4.35rem); }
  .page-hero__actions { flex-direction: column; align-items: flex-start; }
  .phone-stack { padding: 0; border: 0; }
}

/* Area card: the "snapshot" card hanging off the bottom of an area hero */
.area-card {
  align-self: end;
  margin-bottom: -62px;
  padding: 27px;
  border-top: 4px solid var(--violet);
  background: var(--cream);
  box-shadow: var(--lift);
  color: var(--night);
}
.area-card__top {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.area-card__pin {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50% 50% 50% 7px;
  background: var(--violet);
  color: #fff;
  font-weight: 800;
  transform: rotate(-6deg);
}
.area-card__top small, .area-card__top strong { display: block; }
.area-card__top small {
  color: var(--violet-deep);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.area-card__top strong { font-family: var(--f-head); }
.area-card dl { margin: 0; }
.area-card dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.area-card dt { color: var(--grey); font-size: 0.82rem; }
.area-card dd { margin: 0; font-size: 0.88rem; font-weight: 800; text-align: right; }
.area-card > p { margin: 18px 0; color: #3d5139; font-size: 0.86rem; font-weight: 700; line-height: 1.5; }
.area-card > a {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 860px) {
  .area-card { width: min(500px, 100%); margin: 0 0 -60px; }
}

/* Figures: three quick numbers + a note, under the area hero */
.figures { border-bottom: 1px solid var(--rule); background: var(--sand); }
.figures__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
  align-items: center;
  min-height: 116px;
  padding-right: 385px;   /* room for the area card above */
}
.figures__inner > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-right: 18px;
  border-right: 1px solid #cec7ba;
}
.figures__inner > div + div { padding-left: 18px; }
.figures__inner strong {
  min-width: 0;
  font-family: var(--f-head);
  font-size: 1.6rem;
  line-height: 1.15;
  white-space: nowrap;
}
.figures__inner span {
  max-width: 10em;
  min-width: 0;
  color: var(--grey);
  font-size: 0.8rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.figures__inner > p {
  min-width: 0;
  margin: 0;
  padding-left: 22px;
  color: var(--grey);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}
@media (max-width: 1080px) {
  .figures__inner { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.9fr); padding-right: 355px; }
  .figures__inner strong { font-size: 1.3rem; }
}
@media (max-width: 860px) {
  .figures__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 95px 0 30px; }
  .figures__inner > p {
    grid-column: 1 / -1;
    margin-top: 23px;
    padding: 20px 0 0;
    border-top: 1px solid #cec7ba;
  }
}
@media (max-width: 620px) {
  .figures__inner { grid-template-columns: minmax(0, 1fr); padding-top: 90px; }
  .figures__inner > div,
  .figures__inner > div + div {
    justify-content: center;
    padding: 14px 0;
    border-right: 0;
    border-bottom: 1px solid #cec7ba;
  }
  .figures__inner > p { grid-column: auto; text-align: center; }
}

/* Story: area-page introduction in three columns */
.story__grid {
  display: grid;
  grid-template-columns: 0.9fr 1fr 0.55fr;
  align-items: start;
  gap: 70px;
}
.story__title h2 { margin-bottom: 0; font-size: clamp(2.5rem, 4.2vw, 4.55rem); }
.story__body p { color: var(--grey); font-size: 1.09rem; line-height: 1.7; }
.story__body .story__first { color: var(--night); font-size: 1.06rem; font-weight: 600; }
.story__first::first-letter {
  float: left;
  margin: 6px 8px 0 0;
  color: var(--violet);
  font-family: var(--f-num);
  font-size: 4.2rem;
  line-height: 0.7;
}
.story__aside {
  margin-top: 70px;
  padding: 25px;
  border-top: 3px solid var(--violet);
  background: var(--sand);
}
.story__aside p { margin: 20px 0; font-family: var(--f-num); font-size: 1.03rem; line-height: 1.5; }
.story__aside strong { font-size: 0.62rem; text-transform: uppercase; }
@media (max-width: 1080px) {
  .story__grid { grid-template-columns: 0.8fr 1.2fr; }
  .story__aside { grid-column: 2; margin-top: 0; }
}
@media (max-width: 860px) {
  .story__grid { grid-template-columns: 1fr; gap: 55px; }
  .story__aside { grid-column: auto; }
}

/* Index band: dark section with a grid of service tiles */
.index-band { background: var(--night); color: #fff; }
.index-band .kicker { color: var(--violet-glow); }
.index-band__head {
  display: grid;
  grid-template-columns: 1.25fr 0.65fr;
  align-items: end;
  gap: 80px;
  margin-bottom: 55px;
}
.index-band__head h2 { margin-bottom: 0; }
.index-band__head > p { color: var(--dim); font-size: 1.09rem; line-height: 1.7; }
.index-band .index-band__head a { color: var(--violet-soft); }

.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #3f3b34;
  border-left: 1px solid #3f3b34;
}
.tile-grid > a {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 28px;
  border-right: 1px solid #3f3b34;
  border-bottom: 1px solid #3f3b34;
  transition: background 180ms, transform 180ms;
}
.tile-grid > a:hover { z-index: 2; background: #211f19; transform: translateY(-5px); }
.tile-grid > a > span {
  position: absolute;
  top: 23px;
  right: 24px;
  color: var(--dim);
  font-family: var(--f-num);
  font-size: 0.7rem;
  font-style: italic;
}
.tile-grid__icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 30px;
  place-items: center;
  border: 1px solid #4f4a40;
  border-radius: 50%;
  color: var(--violet-glow);
  font-family: var(--f-num);
  font-size: 1.2rem;
}
.tile-grid h3 { margin-bottom: 10px; font-size: 1.25rem; }
.tile-grid p { margin-bottom: 0; color: var(--dim); font-size: 0.98rem; line-height: 1.6; }
.tile-grid b {
  margin-top: auto;
  padding-top: 18px;
  color: #fff;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 1080px) {
  .index-band__head { gap: 45px; }
}
@media (max-width: 860px) {
  .index-band__head { grid-template-columns: 1fr; gap: 18px; }
  .tile-grid { grid-template-columns: 1fr 1fr; }
}

/* Rows: alternating photo / copy rows */
.rows { background: var(--cream); }
.row {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  align-items: center;
  gap: 85px;
  padding: 70px 0;
  border-top: 1px solid var(--rule);
}
.row:first-child { padding-top: 0; border-top: 0; }
.row:last-child { padding-bottom: 0; }
.row--flip .row__media { order: 2; }
.row__media { position: relative; padding: 0 24px 24px 0; }
.row__media::after { z-index: 0; width: 55%; height: 55%; }
.row__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 390px;
  border-radius: var(--round);
  object-fit: cover;
}
.row .row__title { margin-bottom: 18px; font-size: clamp(2rem, 3vw, 3.25rem); }
.row p { font-size: 1.09rem; line-height: 1.7; }
.row > div:last-child > p { color: var(--grey); }
@media (max-width: 860px) {
  .row { grid-template-columns: 1fr; gap: 55px; }
  .row--flip .row__media { order: 0; }
}
@media (max-width: 620px) {
  .row { padding: 50px 0; }
  .row__media { padding-right: 10px; }
  .row__media img { height: 310px; }
}

/* Warning: photo band with the "signs" card on the right */
.warning { position: relative; min-height: 700px; overflow: hidden; background: var(--night); }
.warning__bg { position: absolute; inset: 0; }
.warning__bg::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(21, 19, 14, 0.08), rgba(21, 19, 14, 0.78));
}
.warning__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 35% center; }
.warning__inner {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 700px;
  align-items: center;
  justify-content: flex-end;
}
.warning__card {
  width: min(530px, 100%);
  padding: 45px;
  border-left: 4px solid var(--violet);
  background: rgba(23, 21, 15, 0.95);
  color: #fff;
}
.warning__card h2 { font-size: clamp(2.4rem, 4vw, 4rem); }
.warning__card a:not(.btn) { color: var(--violet-soft); text-decoration: underline; text-underline-offset: 3px; }
.warning__lead { margin: 0 0 14px; color: var(--dim); font-size: 1.04rem; line-height: 1.7; }
.warning__list + .warning__lead { margin-top: 18px; }
.warning__list { margin: 30px 0; border-top: 1px solid #444039; }
.warning__list + .warning__list { margin-top: 0; }
.warning__list p {
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 10px;
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid #444039;
  color: var(--dim);
  font-size: 1rem;
  line-height: 1.55;
}
.warning__list p > span { color: var(--violet-glow); font-family: var(--f-num); font-style: italic; }
@media (max-width: 860px) {
  .warning__bg::after { background: linear-gradient(0deg, rgba(21, 19, 14, 0.88), rgba(21, 19, 14, 0.1)); }
  .warning__inner { align-items: flex-end; }
  .warning__card { width: 100%; margin-bottom: 25px; }
}
@media (max-width: 620px) {
  .warning, .warning__inner { min-height: 760px; }
  .warning__bg img { object-position: 47% center; }
  .warning__card { padding: 30px 22px; }
}
@media (max-width: 420px) {
  .warning__card { padding-right: 20px; padding-left: 20px; }
}

/* Prices: cost table */
.prices { background: var(--sand); }
.prices p { font-size: 1.09rem; line-height: 1.7; }
.prices__note { margin: 22px 0 0; color: var(--grey); }
.price-table { margin-top: 40px; overflow-x: auto; border: 1px solid var(--rule); background: #fff; }
.price-table table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.price-table th {
  padding: 14px 20px;
  background: var(--sand);
  font-family: var(--f-head);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
}
.price-table td { padding: 13px 20px; border-top: 1px solid var(--rule); color: var(--grey); font-size: 0.98rem; }
.price-table th:last-child,
.price-table td:last-child { text-align: right; }
.price-table td:last-child { color: var(--night); font-weight: 700; }
@media (max-width: 620px) {
  /* stack each row as a small card */
  .price-table { overflow: visible; }
  .price-table thead { display: none; }
  .price-table table, .price-table tbody, .price-table tr, .price-table td { display: block; width: 100%; }
  .price-table tr { padding: 16px 18px; border-bottom: 1px solid var(--rule); }
  .price-table tr:last-child { border-bottom: 0; }
  .price-table td,
  .price-table td:last-child { padding: 3px 0; border: 0; text-align: left; }
  .price-table td:first-child { color: var(--night); font-family: var(--f-head); font-size: 1.05rem; font-weight: 800; }
  .price-table td:last-child::before { content: attr(data-label) ": "; color: var(--grey); font-weight: 600; }
}

/* Map band: area-page coverage map + neighbourhood note */
.map-band { background: var(--cream); }
.map-band__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 80px; }
.map-band__copy p { font-size: 1.09rem; line-height: 1.7; }
.map-band__copy > p { color: var(--grey); }
.map-band__note {
  margin-bottom: 28px;
  padding: 17px;
  border-left: 3px solid var(--violet);
  background: var(--sand);
}
.map-band__note strong { display: block; font-size: 0.8rem; text-transform: uppercase; }
.map-band__copy .map-band__note p { margin: 5px 0 0; color: var(--grey); font-size: 0.98rem; line-height: 1.6; }

.area-map {
  position: relative;
  min-height: 590px;
  overflow: hidden;
  border: 10px solid var(--sand);
  background-color: #dbe4ce;
  background-image:
    linear-gradient(33deg, transparent 48%, rgba(255, 255, 255, 0.72) 49%, rgba(255, 255, 255, 0.72) 51%, transparent 52%),
    linear-gradient(118deg, transparent 48%, rgba(255, 255, 255, 0.78) 49%, rgba(255, 255, 255, 0.78) 51%, transparent 52%);
  background-size: 150px 120px, 205px 170px;
  box-shadow: 0 24px 65px rgba(45, 41, 31, 0.12);
}
.area-map__river {
  position: absolute;
  top: -60px;
  bottom: -70px;
  left: -80px;
  width: 48%;
  border-radius: 0 50% 50% 0;
  background: #abd9d8;
  transform: rotate(-8deg);
}
.area-map__river span {
  position: absolute;
  top: 48%;
  left: 35%;
  color: #234f4e;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-align: center;
  transform: rotate(8deg);
}
.area-map__street {
  position: absolute;
  display: block;
  height: 3px;
  border-top: 1px solid var(--violet-soft);
  border-bottom: 1px solid var(--violet-soft);
  background: var(--cream);
}
.area-map__street.sa { top: 41%; left: 27%; width: 78%; transform: rotate(-9deg); }
.area-map__street.sb { top: 62%; left: 25%; width: 82%; transform: rotate(15deg); }
.area-map__street.sc { top: 45%; left: 60%; width: 65%; transform: rotate(80deg); }
.area-map__pin {
  position: absolute;
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border: 4px solid var(--cream);
  border-radius: 50% 50% 50% 5px;
  background: var(--violet);
  box-shadow: 0 8px 18px rgba(23, 21, 15, 0.2);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  transform: rotate(-45deg);
}
.area-map__pin.q1 { top: 28%; left: 54%; }
.area-map__pin.q2 { top: 45%; left: 43%; }
.area-map__pin.q3 { top: 54%; left: 68%; }
.area-map__pin.q4 { top: 72%; left: 59%; }
.area-map__pin.q5 { top: 18%; left: 72%; }
.area-map__key {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 11px 14px;
  background: var(--cream);
  color: var(--night-2);
  font-size: 0.78rem;
  font-weight: 700;
}
.area-map__key::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  content: "";
  background: var(--violet);
}
@media (max-width: 860px) {
  .map-band__grid { grid-template-columns: 1fr; gap: 55px; }
  .area-map { order: 2; min-height: 520px; }
}
@media (max-width: 620px) {
  .area-map { min-height: 420px; }
  .area-map__river span { left: 44%; }
}

/* Elsewhere: violet band linking the neighbouring areas */
.elsewhere { padding: 80px 0; background: var(--violet); color: #fff; }
.elsewhere strong { color: #fff; }
.elsewhere__grid { display: grid; grid-template-columns: 0.6fr 1.4fr; align-items: center; gap: 70px; }
.elsewhere__grid .kicker { color: var(--violet-wash); }
.elsewhere__grid .kicker > span { background: var(--violet-wash); }
.elsewhere__grid h2 { margin: 0; font-size: clamp(2.2rem, 3.5vw, 3.6rem); }
.elsewhere__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}
.elsewhere__links a {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-content: start;
  align-items: center;
  gap: 8px 12px;
  padding: 19px;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.elsewhere__links a:hover { background: rgba(255, 255, 255, 0.18); }
.elsewhere__links a.tile-extra { background: rgba(255, 255, 255, 0.12); }
.elsewhere__links a.tile-extra:hover { background: rgba(255, 255, 255, 0.18); }
.elsewhere__links a > span {
  grid-row: span 2;
  color: var(--violet-wash);
  font-family: var(--f-num);
  font-size: 0.8rem;
  font-style: italic;
}
.elsewhere__links strong { font-size: 1rem; }
.elsewhere__links small { color: var(--violet-wash); font-size: 0.86rem; line-height: 1.5; }
.elsewhere__links b { grid-column: 3; grid-row: 1 / 3; }
@media (max-width: 860px) {
  .elsewhere__grid { grid-template-columns: 1fr; gap: 30px; }
}

/* Photo CTA: full-width photo with the closing call to action */
.photo-cta { position: relative; min-height: 540px; overflow: hidden; background: var(--night); color: #fff; }
.photo-cta > img,
.photo-cta__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo-cta > img { object-fit: cover; }
.photo-cta__shade {
  background: linear-gradient(90deg, rgba(16, 15, 11, 0.97), rgba(16, 15, 11, 0.8) 55%, rgba(16, 15, 11, 0.2));
}
.photo-cta .photo-cta__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 540px;
  max-width: 710px;
  margin-left: max(24px, 50vw - 590px);
}
.photo-cta__inner h2 { font-size: clamp(2.7rem, 4.8vw, 5rem); }
.photo-cta__inner > p { max-width: 580px; color: var(--dim); font-size: 1.09rem; line-height: 1.7; }
.photo-cta__inner p a { color: var(--violet-soft); text-decoration: underline; text-underline-offset: 3px; }
.photo-cta__inner > div { display: flex; align-items: center; gap: 25px; margin-top: 20px; }
.photo-cta__inner > div > a:last-child { border-bottom: 1px solid #fff; font-weight: 700; }
@media (max-width: 860px) {
  .photo-cta__shade { background: linear-gradient(rgba(16, 15, 11, 0.93), rgba(16, 15, 11, 0.85)); }
  .photo-cta .photo-cta__inner { width: min(100% - 48px, 710px); margin: 0 auto; }
}
@media (max-width: 620px) {
  .photo-cta, .photo-cta .photo-cta__inner { min-height: 620px; }
  .photo-cta > img { object-position: 68% center; }
  .photo-cta__inner > div { flex-direction: column; align-items: flex-start; }
}

/* Area reach: closing contact block on area pages */
.area-reach { background: var(--cream); }
.area-reach__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: start; gap: 90px; }
.area-reach__copy > p { color: var(--grey); font-size: 1.09rem; line-height: 1.7; }
.area-reach__card {
  margin-top: 35px;
  padding: 25px;
  border-top: 3px solid var(--violet);
  background: var(--sand);
}
.area-reach__card > * { display: block; }
.area-reach__card small {
  color: var(--violet-deep);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.area-reach__card strong { margin: 12px 0; font-family: var(--f-head); }
.area-reach__card a { color: var(--violet-deep); font-size: 1.2rem; font-weight: 800; white-space: nowrap; }
.area-reach__card span { margin-top: 10px; color: var(--grey); font-size: 0.9rem; line-height: 1.5; }
@media (max-width: 860px) {
  .area-reach__grid { grid-template-columns: 1fr; gap: 55px; }
}

/* Legal pages */
.legal__inner { max-width: 820px; }
.legal__part { margin-bottom: 2.2rem; }
.legal__part h2 { margin-bottom: 0.75rem; font-size: 1.6rem; }
.legal__intro { margin-bottom: 2.2rem; font-size: 1.14rem; }
.rich-text p, .rich-text li { color: var(--grey); font-size: 1.09rem; line-height: 1.7; }
.legal__intro p { font-size: 1.14rem; }
.legal .tick-list { grid-template-columns: 1fr; }


/* 7. Shared sections ------------------------------------------------------- */

/* Questions: FAQ accordion (site.js opens one answer at a time) */
.questions--sand { background: var(--sand); }
.questions__grid { display: grid; grid-template-columns: 0.7fr 1.3fr; align-items: start; gap: 100px; }
.questions__intro { position: sticky; top: 35px; }
.questions__intro p { color: var(--grey); font-size: 1.09rem; line-height: 1.7; }
.qa-list { border-top: 1px solid var(--rule); }
.qa-list article { border-bottom: 1px solid var(--rule); }
.qa-list button {
  display: grid;
  width: 100%;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
  border: 0;
  background: transparent;
  color: var(--night);
  text-align: left;
}
.qa-list button span { color: var(--violet-deep); font-family: var(--f-num); font-size: 0.75rem; font-style: italic; }
.qa-list button strong { font-size: 1.06rem; }
.qa-list button b { color: var(--violet-deep); font-size: 1.2rem; }
.qa-list__answer { max-height: 0; overflow: hidden; transition: max-height 240ms; }
.qa-list .is-open .qa-list__answer { max-height: 1200px; }
.qa-list__answer p { margin: -4px 40px 24px 52px; color: var(--grey); font-size: 1.06rem; line-height: 1.7; }
@media (max-width: 860px) {
  .questions__grid { grid-template-columns: 1fr; gap: 60px; }
  .questions__intro { position: static; }
}
@media (max-width: 620px) {
  .qa-list button { grid-template-columns: 28px 1fr auto; }
  .qa-list__answer p { margin-left: 40px; }
}

/* Banner: violet call-to-action strip */
.banner { padding: 65px 0; background: var(--violet); color: #fff; }
.banner strong { color: #fff; }
.banner a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.banner__inner { display: grid; grid-template-columns: 1.3fr 0.75fr auto; align-items: center; gap: 55px; }
.banner__inner .kicker { color: var(--violet-wash); }
.banner__inner .kicker > span { background: var(--violet-wash); }
.banner__inner h2 { margin: 0; font-size: clamp(2.05rem, 3.5vw, 3.65rem); }
.banner__inner > p { margin: 0; color: var(--violet-wash); font-size: 1.06rem; line-height: 1.6; }
@media (max-width: 860px) {
  .banner__inner { grid-template-columns: 1fr auto; gap: 30px; }
  .banner__inner > p { grid-area: 2 / 1 / auto / -1; }
}
@media (max-width: 620px) {
  .banner__inner { grid-template-columns: 1fr; }
  .banner__inner > p { grid-area: auto; }
  .banner__inner .btn { justify-self: start; }
}

/* Reach: contact section (copy + details on the left, steps card right) */
.reach { background: var(--cream); }
.reach__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: start; gap: 90px; }
.reach__copy > p { max-width: 460px; color: var(--grey); font-size: 1.09rem; line-height: 1.7; }
.reach__facts { margin-top: 42px; border-top: 1px solid var(--rule); }
.reach__facts > * { display: block; padding: 17px 0; border-bottom: 1px solid var(--rule); }
.reach__facts small, .reach__facts strong { display: block; }
.reach__facts small {
  margin-bottom: 3px;
  color: var(--grey);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.reach__facts strong { font-size: 1.06rem; line-height: 1.5; }
.reach__facts a strong { white-space: nowrap; }
.reach__cta { margin-top: 28px; }
@media (max-width: 860px) {
  .reach__grid { grid-template-columns: 1fr; gap: 60px; }
}

/* "What happens when you call" card */
.next-card { padding: 38px; border-top: 4px solid var(--violet); background: var(--sand); }
.next-card .card-head h2 { font-size: 1.35rem; }
.next-card > p { color: var(--grey); font-size: 1.09rem; line-height: 1.7; }
.next-card .tick-list { margin: 16px 0; }
.next-card .btn { margin-top: 4px; }
.next-card .fine-print { color: var(--grey); font-size: 0.94rem; }
.next-card__steps { margin: 18px 0 26px; padding: 0; border-top: 1px solid var(--rule); list-style: none; }
.next-card__steps li { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.next-card__steps li > span {
  padding-top: 2px;
  color: var(--violet-deep);
  font-family: var(--f-num);
  font-size: 0.8rem;
  font-style: italic;
}
.next-card__steps li p { margin: 0; color: var(--night-2); font-size: 1.09rem; line-height: 1.7; }
@media (max-width: 620px) {
  .next-card { padding: 25px 19px; }
}
@media (max-width: 420px) {
  .next-card { padding: 24px 16px; }
}

/* Footer */
.site-foot { background: var(--night); color: #fff; }
.site-foot__cols {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 0.7fr);
  gap: 65px;
  padding-top: 75px;
  padding-bottom: 70px;
}
.logo--footer { margin-bottom: 22px; }
.site-foot__cols > div > p { color: var(--dim); font-size: 0.92rem; line-height: 1.55; }
.site-foot__phone {
  display: inline-block;
  margin-top: 12px;
  border-bottom: 1px solid var(--violet-glow);
  color: #fff;
  font-family: var(--f-head);
  font-size: 1.2rem;
  font-weight: 800;
  white-space: nowrap;
}
.site-foot__cols h3 {
  margin-bottom: 24px;
  color: #e3ddd2;
  font-family: var(--f-body);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-foot__cols > div:not(.site-foot__brand) > a {
  display: block;
  margin-bottom: 10px;
  color: var(--dim);
  font-size: 0.92rem;
  line-height: 1.55;
  transition: color 150ms;
}
.site-foot__cols > div:not(.site-foot__brand) > a:hover { color: #fff; }
.site-foot__addr span { font-size: 0.92rem; line-height: 1.55; }
.site-foot__addr svg { margin-top: 2px; color: var(--violet); }
.site-foot__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid #3d3931;
  color: var(--dim);
  font-size: 0.8rem;
}
.site-foot__base div { display: flex; gap: 22px; }
@media (max-width: 860px) {
  .site-foot__cols { grid-template-columns: 1.3fr repeat(3, 1fr); gap: 35px; }
}
@media (max-width: 620px) {
  .site-foot { padding-bottom: 76px; }   /* clear the floating call button */
  .site-foot__cols { grid-template-columns: 1fr 1fr; }
  .site-foot__brand,
  .site-foot__cols > div:last-child { grid-column: 1 / -1; }
  .site-foot__base { flex-direction: column; align-items: flex-start; }
}

/* Floating call button (phones only) */
.float-call {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 10px;
  border-radius: 40px;
  background: var(--violet);
  box-shadow: 0 10px 30px rgba(46, 16, 101, 0.35);
  color: #fff;
}
.float-call > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
}
.float-call small, .float-call strong { display: block; line-height: 1.1; }
.float-call small { font-size: 0.66rem; }
.float-call strong { font-size: 0.92rem; letter-spacing: 0; white-space: nowrap; }
@media (max-width: 620px) {
  .float-call { display: flex; }
}


/* Balanced card grids ----------------------------------------------------
   (kept after the components so these column rules win over their defaults) */

/* Card grids that always fill their last row. Each grid runs on 12 tracks;
   items normally span 12/columns, and the items of a short final row are
   widened so they share that row evenly. */
@media (min-width: 861px) {
  .link-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .link-grid > a { grid-column: span 3; }
  .link-grid > a:nth-child(4n+1):nth-last-child(1) { grid-column: span 12; }
  .link-grid > a:nth-child(4n+1):nth-last-child(2),
  .link-grid > a:nth-child(4n+1):nth-last-child(2) ~ a { grid-column: span 6; }
  .link-grid > a:nth-child(4n+1):nth-last-child(3),
  .link-grid > a:nth-child(4n+1):nth-last-child(3) ~ a { grid-column: span 4; }

  .reason-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .reason-grid > article { grid-column: span 4; }
  .reason-grid > article:nth-child(3n+1):nth-last-child(1) { grid-column: span 12; }
  .reason-grid > article:nth-child(3n+1):nth-last-child(2),
  .reason-grid > article:nth-child(3n+1):nth-last-child(2) ~ article { grid-column: span 6; }

  .tile-grid:not(.tile-grid--four) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tile-grid:not(.tile-grid--four) > a { grid-column: span 4; }
  .tile-grid:not(.tile-grid--four) > a:nth-child(3n+1):nth-last-child(1) { grid-column: span 12; }
  .tile-grid:not(.tile-grid--four) > a:nth-child(3n+1):nth-last-child(2),
  .tile-grid:not(.tile-grid--four) > a:nth-child(3n+1):nth-last-child(2) ~ a { grid-column: span 6; }
}
@media (min-width: 621px) and (max-width: 860px) {
  .link-grid,
  .reason-grid,
  .tile-grid:not(.tile-grid--four) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .link-grid > a,
  .reason-grid > article,
  .tile-grid:not(.tile-grid--four) > a { grid-column: span 6; }
  .link-grid > a:nth-child(odd):last-child,
  .reason-grid > article:nth-child(odd):last-child,
  .tile-grid:not(.tile-grid--four) > a:nth-child(odd):last-child { grid-column: span 12; }
}
@media (min-width: 1101px) {
  .tile-grid--four { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tile-grid--four > a { grid-column: span 3; }
}
@media (min-width: 621px) and (max-width: 1100px) {
  .tile-grid--four { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tile-grid--four > a { grid-column: span 6; }
}
@media (min-width: 621px) {
  .elsewhere__links { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .elsewhere__links > a { grid-column: span 6; }
  .elsewhere__links > a:nth-child(odd):last-child { grid-column: span 12; }
}
@media (max-width: 620px) {
  .link-grid, .reason-grid, .tile-grid, .elsewhere__links { grid-template-columns: minmax(0, 1fr); }
  .link-grid > a, .reason-grid > article, .tile-grid > a, .elsewhere__links > a { grid-column: auto; }
}


/* 8. Image placeholders and motion ---------------------------------------- */

/* Every content image carries data-img. Until the real file is added, the
   striped violet background shows through; site.js adds .is-missing when the
   file fails to load so the box keeps a sensible height. */
img[data-img] {
  background-color: #f1edf9;
  background-image:
    repeating-linear-gradient(135deg, rgba(109, 40, 217, 0.16) 0 14px, rgba(109, 40, 217, 0.05) 14px 28px),
    linear-gradient(160deg, #f3effb, #e2d9f5);
}
img.is-missing { min-height: 220px; }
.spotlight img.is-missing { position: absolute; inset: 0; }
.spotlight img.is-missing,
.callout > img.is-missing,
.photo-cta > img.is-missing,
.warning__bg img.is-missing { background-image: var(--photo-stand-in); }

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