/* Theme "fresh". Generated from brand tokens by gen_site.py, do not hand edit.
   Every colour and geometry value below comes from the brand config, so a new
   brand is a config change and not a stylesheet fork. */

:root {
  --ink: #1E2A78;
  --accent: #7FE9C8;
  --surface: #F2F4F8;
  --white: #FFFFFF;
  --muted: #4A5470;
  --hairline: #DDE1EA;

  --on-accent: #12204F;
  --on-ink: #FFFFFF;

  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --w-body: 400;
  --w-label: 700;
  --w-head: 800;

  --r-btn: 7px;
  --r-card: 14px;
  --r-section: 16px;

  --logo-h: 48px;
  --logo-foot-h: 64px;
  --maxw: 1280px;
  --gutter: 20px;
  --btn-h: 52px;
}

@media (min-width: 860px) {
  :root {
    --gutter: 48px;
    --btn-h: 62px;
  }
}

/* ---- font, self hosted, no third party request ---------------------------- */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: var(--w-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
/* A display rule on a component beats the browser default for [hidden],
   which is how a "hidden" button ends up on screen. */
[hidden] { display: none !important; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.dark :focus-visible { outline-color: var(--accent); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--white);
  padding: 12px 18px; border-radius: 0 0 var(--r-btn) 0;
  font-weight: var(--w-label); text-decoration: none;
}
.skip:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-size: 12px; font-weight: var(--w-label);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
}
.dark .eyebrow { color: var(--accent); }

/* ---- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 18px;
  min-height: var(--btn-h);
  padding: 0 22px;
  border: 0; border-radius: var(--r-btn);
  background: var(--accent); color: var(--on-accent);
  font-weight: var(--w-label); font-size: 16px;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(.95); }
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; }
.btn .arw { flex: none; }

.tlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: var(--w-label); font-size: 15px;
  text-decoration: none; color: var(--ink);
  border-bottom: 2px solid transparent;
}
.tlink:hover { border-bottom-color: var(--accent); }
.dark .tlink { color: var(--white); }

/* ---- top strip ------------------------------------------------------------ */
.topbar {
  background: var(--ink); color: var(--white);
  min-height: 37px;
  display: flex; align-items: center;
  font-size: 11.5px; font-weight: var(--w-label);
  letter-spacing: .08em; text-transform: uppercase;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar a { color: var(--white); text-decoration: none; opacity: .85; }
.topbar a:hover { opacity: 1; }
.topbar__area { display: none; }
@media (min-width: 620px) { .topbar__area { display: inline-flex; gap: 6px; } }

/* ---- nav ------------------------------------------------------------------ */
.nav { background: var(--white); border-bottom: 1px solid var(--hairline); }
.nav .wrap {
  min-height: 84px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
@media (min-width: 860px) { .nav .wrap { min-height: 115px; } }
.nav__logo { display: inline-flex; align-items: center; }
.nav__logo img { height: var(--logo-h); width: auto; }
@media (max-width: 520px) { .nav__logo img { height: calc(var(--logo-h) * .84); } }

.nav__links { display: none; gap: 36px; margin-left: auto; }
@media (min-width: 860px) { .nav__links { display: flex; } }
.nav__links > a, .navdd-t {
  text-decoration: none; font-weight: var(--w-label); font-size: 15.5px;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav__links > a:hover, .navdd-t:hover { border-bottom-color: var(--accent); }

/* ---- desktop dropdowns ---------------------------------------------------
   Opens on hover and on keyboard focus, so it is reachable without a mouse. */
.navdd { position: relative; }
.navdd-t { display: inline-flex; align-items: center; gap: 5px; }
.ddc { width: 15px; height: 15px; }
.navdd-m {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 250px; padding: 10px;
  background: var(--white);
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  box-shadow: 0 18px 44px rgba(9, 47, 58, .13);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 60;
}
.navdd:hover .navdd-m,
.navdd:focus-within .navdd-m { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.navdd-m a {
  display: block; padding: 10px 12px; border-radius: 7px;
  text-decoration: none; font-size: 15px; font-weight: 500;
}
.navdd-m a:hover, .navdd-m a:focus-visible { background: var(--surface); }
.navdd-all {
  margin-top: 6px; padding-top: 14px !important;
  border-top: 1px solid var(--hairline);
  font-weight: var(--w-label) !important;
}

/* ---- mobile drawer groups ------------------------------------------------ */
.mobnav .drw-gr { border-bottom: 1px solid var(--hairline); }
.mobnav .drw-gr summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; cursor: pointer; list-style: none;
  font-weight: var(--w-label); font-size: 17px;
}
.mobnav .drw-gr summary::-webkit-details-marker { display: none; }
.mobnav .drw-gr[open] .ddc { transform: rotate(180deg); }
.mobnav .drw-p { padding: 2px 0 14px 14px; }
.mobnav .drw-p a { border-bottom: 0; padding: 10px 0; font-size: 15.5px; font-weight: 500; }
.mobnav .drw-top { display: block; }

.nav__cta { display: none; margin-left: 36px; }
@media (min-width: 860px) { .nav__cta { display: inline-flex; } }

.menu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 10px 4px;
  font-weight: var(--w-head); font-size: 17px; cursor: pointer;
}
@media (min-width: 860px) { .menu-btn { display: none; } }

/* Own layout rather than the shared .wrap: `.nav .wrap` outranks `.mobnav`
   on specificity and would force the closed menu back to display:flex. */
.mobnav {
  display: none;
  border-top: 1px solid var(--hairline);
  background: var(--white);
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.mobnav[data-open="true"] { display: block; animation: drawerIn .24s ease; }
@keyframes drawerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mobnav[data-open="true"] { animation: none; } }
@media (min-width: 860px) { .mobnav { display: none !important; } }
.mobnav nav { padding: 8px 0 20px; }
.mobnav > nav > a {
  display: block; padding: 14px 0; text-decoration: none;
  font-weight: var(--w-label); font-size: 17px;
  border-bottom: 1px solid var(--hairline);
}
.mobnav a { text-decoration: none; }
.mobnav .btn { margin-top: 18px; }

/* ---- hero ----------------------------------------------------------------- */
.hero { padding: 40px 0 8px; }
@media (min-width: 860px) { .hero { padding: 56px 0 24px; } }
.hero__grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 47fr 53fr; gap: 35px; }
}
/* No photograph for this brand yet: the copy takes the full measure rather
   than sitting beside an empty box or another brand's picture. */
.hero__grid--solo { grid-template-columns: 1fr !important; }
.hero__grid--solo .hero__sub { max-width: 46ch; }

/* Typographic wordmark, used until a brand has its own logo file. */
.wordmark {
  display: inline-flex; flex-direction: column; gap: 2px;
  font-weight: var(--w-head); font-size: 27px; line-height: 1;
  letter-spacing: -.03em; color: var(--ink);
}
.wordmark--alt { color: var(--ink); }
.wordmark__sub {
  font-size: 9.5px; font-weight: var(--w-label);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
}

.hero__kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.hero__kicker span { color: var(--muted); }

.hero h1 {
  font-weight: var(--w-head);
  font-size: clamp(48px, 11.5vw, 94px);
  line-height: 1.025;
  letter-spacing: -.03em;
}
@media (min-width: 960px) { .hero h1 { font-size: clamp(60px, 6.2vw, 94px); } }
.hero h1 .ul {
  display: inline-block; position: relative;
}
.hero h1 .ul::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.14em;
  height: .17em; background: var(--accent); z-index: -1;
}
.hero h1 .ul { z-index: 0; }

.hero__sub {
  margin-top: 30px; color: var(--muted);
  font-size: clamp(16px, 2.2vw, 18px); max-width: 34ch;
}
.hero__actions {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin-top: 32px;
}
.hero__note {
  margin-top: 26px; font-size: 13.5px; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}

.hero__media { position: relative; }
.hero__media img {
  width: 100%; border-radius: var(--r-card); object-fit: cover;
}
.stamp {
  position: absolute; top: 24px; right: 24px;
  background: var(--ink); color: var(--accent);
  padding: 12px 18px; border-radius: 9px;
  font-size: 12px; font-weight: var(--w-label);
  letter-spacing: .08em; text-transform: uppercase;
}
.cap {
  position: absolute; left: 24px; bottom: 24px;
  background: rgba(9, 47, 58, .82); color: var(--white);
  padding: 11px 18px; border-radius: 9px;
  font-size: 14px; font-weight: 500;
}
@media (max-width: 620px) {
  .stamp { top: 14px; right: 14px; padding: 9px 13px; font-size: 11px; }
  .cap { left: 14px; bottom: 14px; padding: 9px 13px; font-size: 13px; }
}

/* ---- service strip -------------------------------------------------------
   A navigation band, not a logo wall. Each name is a link to that service,
   divided by a hairline rather than a decorative glyph. */
.strip { background: var(--surface); margin-top: 32px; }
.strip .wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 620px) { .strip .wrap { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .strip .wrap { grid-template-columns: repeat(5, 1fr); } }

.strip__item {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 62px;
  padding: 14px 10px;
  text-align: center; text-decoration: none;
  font-size: 12.5px; font-weight: var(--w-label);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink);
  transition: background .2s ease, color .2s ease;
}
/* Hairline between items, drawn on the item so it never dangles at a wrap. */
.strip__item + .strip__item::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 20px;
  background: var(--hairline);
}
@media (min-width: 620px) and (max-width: 899px) {
  .strip__item:nth-child(3n + 1)::before { display: none; }
}
@media (max-width: 619px) {
  .strip__item:nth-child(odd)::before { display: none; }
}
.strip__item::after {
  content: "";
  position: absolute; left: 50%; right: 50%; bottom: 12px; height: 2px;
  background: var(--accent);
  transition: left .25s ease, right .25s ease;
}
.strip__item:hover, .strip__item:focus-visible { background: rgba(255, 255, 255, .55); }
.strip__item:hover::after, .strip__item:focus-visible::after { left: 22%; right: 22%; }

/* ---- section shell -------------------------------------------------------- */
.sect { padding: 64px 0; }
@media (min-width: 860px) { .sect { padding: 96px 0; } }
.sect__head { display: grid; gap: 18px; align-items: end; margin-bottom: 40px; }
@media (min-width: 960px) {
  .sect__head { grid-template-columns: 1.25fr 1fr; gap: 48px; margin-bottom: 56px; }
}
.sect h2 {
  font-weight: var(--w-head);
  font-size: clamp(30px, 5.2vw, 46px);
  line-height: 1.08; letter-spacing: -.02em;
  margin-top: 10px;
}
.sect__lede { color: var(--muted); font-size: 17px; }
.dark .sect__lede { color: rgba(255,255,255,.76); }

/* ---- service cards -------------------------------------------------------- */
.cards { display: grid; gap: 18px; }
@media (min-width: 700px) { .cards { grid-template-columns: 1fr 1fr; } }
/* Six columns so five cards sit as three then two, both rows full width. */
@media (min-width: 1000px) {
  .cards { grid-template-columns: repeat(6, 1fr); }
  .cards > .card { grid-column: span 2; }
  .cards > .card:nth-child(4), .cards > .card:nth-child(5) { grid-column: span 3; }
}

/* Every card carries a photograph with the title over it. A coloured box with
   a small mark in it says nothing about the work. */
.card {
  position: relative; display: block;
  border-radius: var(--r-card); overflow: hidden;
  text-decoration: none;
  min-height: 340px;
  background: var(--ink);
  isolation: isolate;
}
@media (min-width: 700px) { .card--lead { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .card--lead { grid-column: span 2; } }

.card picture, .card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.card img {
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.card:hover img, .card:focus-visible img { transform: scale(1.03); }

/* Scrim only under the text, so the photograph is not flattened. */
.card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
      rgba(9, 47, 58, .92) 0%,
      rgba(9, 47, 58, .72) 26%,
      rgba(9, 47, 58, .12) 55%,
      rgba(9, 47, 58, 0) 78%);
  z-index: 1;
}
.card__body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  height: 100%; min-height: 340px;
  justify-content: flex-end;
  padding: 24px 24px 26px;
  color: var(--white);
}
.card__num {
  font-size: 12px; font-weight: var(--w-label); letter-spacing: .08em;
  color: rgba(255, 255, 255, .82); margin-bottom: 10px;
}
.card h3 {
  font-weight: var(--w-head); font-size: clamp(23px, 3vw, 28px);
  line-height: 1.15; letter-spacing: -.015em; margin: 0 0 10px;
  color: var(--white);
}
.card p { font-size: 15.5px; color: rgba(255, 255, 255, .86); max-width: 40ch; }
.card__go {
  position: absolute; top: 24px; right: 24px;
  display: inline-flex; padding: 9px;
  border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.card:hover .card__go, .card:focus-visible .card__go { transform: translate(3px, -3px); }

.commercial {
  display: grid; gap: 14px; margin-top: 34px;
  padding-top: 30px; border-top: 1px solid var(--hairline);
}
@media (min-width: 860px) {
  .commercial { grid-template-columns: 1fr auto; align-items: center; gap: 32px; }
}
.commercial h3 { font-weight: var(--w-head); font-size: clamp(19px, 2.6vw, 23px); margin-top: 6px; }

/* ---- dark approach -------------------------------------------------------- */
.dark { background: var(--ink); color: var(--white); }
.dark h2 { color: var(--white); }
.approach__grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .approach__grid { grid-template-columns: 1fr 1.05fr; gap: 72px; } }
.approach h2 .accent { color: var(--accent); display: block; }
.approach__lede { color: rgba(255,255,255,.76); margin-top: 22px; max-width: 42ch; }
.approach .btn { margin-top: 38px; }

.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 26px 0; }
.steps li + li { border-top: 1px solid rgba(255,255,255,.16); }
.steps li:first-child { padding-top: 0; }
.steps .n { font-size: 12px; font-weight: var(--w-label); color: var(--accent); padding-top: 6px; }
.steps h3 { font-weight: var(--w-head); font-size: clamp(19px, 2.5vw, 23px); letter-spacing: -.01em; }
.steps p { color: rgba(255,255,255,.78); font-size: 16.5px; margin-top: 8px; }

/* ---- process -------------------------------------------------------------- */
.process { display: grid; gap: 34px; }
@media (min-width: 860px) { .process { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.process > li, .process > .process__item {
  list-style: none; border-top: 1px solid var(--hairline); padding-top: 22px;
}
.process .n {
  font-weight: var(--w-head); font-size: 40px; line-height: 1;
  color: #7E8B8D; margin-bottom: 26px;
}
.process h3 { font-weight: var(--w-head); font-size: 19px; margin-bottom: 10px; }
.process p { color: var(--muted); font-size: 16.5px; }

/* ---- coverage ------------------------------------------------------------- */
.coverage {
  background: var(--surface); border-radius: var(--r-section);
  padding: 34px 24px;
}
@media (min-width: 860px) { .coverage { padding: 56px 48px; } }
.coverage__grid { display: grid; gap: 34px; }
@media (min-width: 960px) { .coverage__grid { grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; } }
.coverage h2 { font-size: clamp(28px, 4.6vw, 42px); }
.coverage p { color: var(--muted); margin-top: 18px; max-width: 40ch; }
.areas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; list-style: none; margin: 0; padding: 0; }
.areas li { padding: 13px 0; border-bottom: 1px solid var(--hairline); font-size: 16px; }
.areas li::before { content: "\2197"; color: var(--muted); margin-right: 9px; font-size: 13px; }

/* ---- faq ------------------------------------------------------------------ */
.faq__grid { display: grid; gap: 30px; }
@media (min-width: 960px) { .faq__grid { grid-template-columns: 1fr 1.25fr; gap: 64px; } }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-weight: var(--w-label); font-size: 16.5px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
/* Animated height. This one stays on under reduced motion, as specified. */
.faq details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .28s ease, content-visibility .28s allow-discrete;
  interpolate-size: allow-keywords;
}
.faq details[open]::details-content { block-size: auto; }
.faq details p { padding-bottom: 22px; color: var(--muted); font-size: 17px; max-width: 62ch; }

/* ---- quote ---------------------------------------------------------------- */
.quote__grid { display: grid; gap: 36px; }
@media (min-width: 960px) { .quote__grid { grid-template-columns: 1fr 1.02fr; gap: 64px; align-items: center; } }
.quote h2 { font-size: clamp(34px, 6vw, 58px); line-height: 1.06; letter-spacing: -.025em; }
.quote h2 .accent { color: var(--accent); }
.quote__lede { color: rgba(255,255,255,.76); margin-top: 24px; }

.formcard {
  background: var(--white); color: var(--ink);
  border-radius: var(--r-card); padding: 26px 22px;
}
@media (min-width: 620px) { .formcard { padding: 34px 32px; } }
.formcard h3 { font-weight: var(--w-head); font-size: clamp(20px, 3vw, 25px); margin-bottom: 24px; }
.frow { display: grid; gap: 18px; }
@media (min-width: 620px) { .frow--2 { grid-template-columns: 1fr 1fr; } }
.field { display: block; margin-bottom: 18px; }
.field > span { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font-size: 16px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 8px;
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formcard .btn { margin-top: 6px; }

/* ---- footer --------------------------------------------------------------- */
.foot { border-top: 1px solid var(--hairline); padding: 40px 0 120px; }
@media (min-width: 860px) { .foot { padding: 48px 0 48px; } }
.foot__grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 860px) { .foot__grid { grid-template-columns: auto 1fr auto; gap: 40px; } }
.foot img { height: var(--logo-foot-h); width: auto; }
.foot__tag { font-weight: var(--w-label); font-size: 15px; }
.foot__legal { color: var(--muted); font-size: 13px; line-height: 1.6; }
.foot__contact { margin-top: 6px; font-size: 14px; }
.foot__contact a { color: var(--muted); }
/* Phone chip. Rendered only when the brand config carries a real number. */
.nav__phone {
  display: none; margin-left: 28px;
  font-weight: var(--w-label); font-size: 15.5px; text-decoration: none;
  white-space: nowrap;
}
@media (min-width: 1000px) { .nav__phone { display: inline-flex; } }
.foot__legal a { color: var(--muted); }

/* ---- mobile sticky cta ---------------------------------------------------- */
.stickycta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--white); border-top: 1px solid var(--hairline);
}
.stickycta--two { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
/* Reserve the bar's height at the foot of the page so it never covers the
   last thing on screen. */
@media (max-width: 859px) { body { padding-bottom: 84px; } }
/* After the modifier, so the desktop hide still wins. */
@media (min-width: 860px) { .stickycta, .stickycta--two { display: none; } }
.btn--call {
  background: var(--ink); color: var(--white);
  padding: 0 20px; gap: 9px; justify-content: center;
}
.btn--call:hover { filter: brightness(1.15); }

/* ---- inner pages ---------------------------------------------------------- */
.prose { max-width: 68ch; padding: 56px 0 80px; }
.prose h1 { font-weight: var(--w-head); font-size: clamp(32px, 6vw, 48px); line-height: 1.1; letter-spacing: -.02em; }
.prose h2 { font-weight: var(--w-head); font-size: clamp(20px, 3vw, 25px); margin-top: 40px; letter-spacing: -.01em; }
.prose p, .prose li { color: var(--muted); font-size: 17px; margin-top: 14px; }
.prose ul { padding-left: 20px; }
.prose a { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ---- area tiles ----------------------------------------------------------
   Equal squares. The panel is real glass: it blurs and lifts what is behind
   it rather than sitting on an opaque block, and a slow specular sweep runs
   across it on hover. Everything degrades to a plain readable panel where
   backdrop-filter is unsupported, and holds still under reduced motion. */
.tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .tiles { grid-template-columns: repeat(4, 1fr); } }

.tile {
  position: relative; display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
  background: var(--surface);
  isolation: isolate;
}
.tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.tile:hover img, .tile:focus-visible img { transform: scale(1.03); }

.tile__glass {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px;
  border-radius: 11px;
  color: var(--ink);
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 6px 24px rgba(9, 47, 58, .16), inset 0 1px 0 rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(13px) saturate(180%);
  backdrop-filter: blur(13px) saturate(180%);
  overflow: hidden;
  transition: background .35s ease, transform .35s cubic-bezier(.2, .7, .3, 1),
              box-shadow .35s ease, backdrop-filter .35s ease;
}
/* The specular sweep. A wide soft highlight parked off to the left, which
   travels across the panel when the tile is hovered or focused. */
.tile__glass::before {
  content: "";
  position: absolute; top: -60%; bottom: -60%; left: -75%;
  width: 55%;
  background: linear-gradient(100deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.72) 45%,
      rgba(255,255,255,0) 100%);
  transform: skewX(-16deg);
  transition: left .75s cubic-bezier(.25, .8, .3, 1);
  pointer-events: none;
}
.tile:hover .tile__glass, .tile:focus-visible .tile__glass {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  backdrop-filter: blur(20px) saturate(200%);
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(9, 47, 58, .22), inset 0 1px 0 rgba(255, 255, 255, .95);
}
.tile:hover .tile__glass::before, .tile:focus-visible .tile__glass::before { left: 130%; }

.tile__name {
  font-weight: var(--w-head); font-size: 17px; letter-spacing: -.01em;
  position: relative; z-index: 1;
}
.tile__go {
  display: inline-flex; position: relative; z-index: 1;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.tile:hover .tile__go, .tile:focus-visible .tile__go { transform: translate(3px, -3px); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tile__glass { background: rgba(255, 255, 255, .92); }
  .tile:hover .tile__glass { background: rgba(255, 255, 255, .97); }
}
@media (prefers-reduced-motion: reduce) {
  .tile img, .tile:hover img { transform: none; }
  .tile__glass::before { display: none; }
}

.tiles__attr {
  margin-top: 20px; font-size: 12.5px; color: var(--muted);
}


/* ---- breadcrumbs ---------------------------------------------------------- */
.crumbs { border-bottom: 1px solid var(--hairline); }
.crumbs ol {
  list-style: none; margin: 0; padding: 14px 0;
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 13px; color: var(--muted);
}
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .55; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

/* ---- contextual cross links ---------------------------------------------- */
.crosslink {
  margin-top: 30px; padding-top: 24px;
  border-top: 1px solid var(--hairline);
  color: var(--muted); font-size: 16px; max-width: 68ch;
}
.dark .crosslink { border-top-color: rgba(255,255,255,.16); color: rgba(255,255,255,.76); }
.crosslink a { color: var(--ink); font-weight: 500; }
.dark .crosslink a { color: var(--accent); }


/* ---- what it costs -------------------------------------------------------
   Honest anchoring. Every figure is a floor, never a price, and a service
   whose numbers are not signed off shows a link instead of a number. */
.costs__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.costs__list a {
  display: grid; gap: 4px 24px; align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  transition: padding-left .2s ease;
}
@media (min-width: 760px) {
  .costs__list a { grid-template-columns: 15rem 1fr auto; gap: 24px; align-items: center; }
}
.costs__list a:hover, .costs__list a:focus-visible { padding-left: 10px; }
.costs__name { font-weight: var(--w-head); font-size: 19px; letter-spacing: -.01em; }
.costs__detail { color: var(--muted); font-size: 16px; }
.costs__figure {
  font-weight: var(--w-head); font-size: 19px; white-space: nowrap;
  color: var(--ink);
}
.costs__note { margin-top: 20px; color: var(--muted); font-size: 14.5px; }


/* ---- instant estimate ----------------------------------------------------
   Hidden in the markup and revealed by script, so a visitor without
   JavaScript sees the enquiry route rather than a dead form. */
.est-wrap[hidden] { display: none; }
.est__tabs { display: inline-flex; gap: 6px; padding: 5px; margin-bottom: 22px;
  background: var(--surface); border-radius: 11px; }
.est__tab {
  border: 0; background: none; cursor: pointer;
  padding: 10px 20px; border-radius: 8px;
  font-weight: var(--w-label); font-size: 15.5px; color: var(--muted);
}
.est__tab.is-on { background: var(--white); color: var(--ink);
  box-shadow: 0 1px 3px rgba(9,47,58,.14); }

.est { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .est { grid-template-columns: 1.35fr 1fr; gap: 40px; } }

.est__form {
  background: var(--surface); border-radius: var(--r-section);
  padding: 24px 22px;
}
@media (min-width: 620px) { .est__form { padding: 30px 28px; } }
.est__intro { color: var(--muted); font-size: 16.5px; margin-bottom: 22px; }
.est__field { border: 0; padding: 0; margin: 0 0 24px; }
.est__field:last-child { margin-bottom: 0; }
.est__field legend { font-weight: var(--w-label); font-size: 16px; padding: 0; }
.est__help { color: var(--muted); font-size: 14.5px; margin: 4px 0 0; }
.est__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.est__chip {
  border: 1px solid var(--hairline); background: var(--white);
  color: var(--ink); cursor: pointer;
  padding: 11px 16px; border-radius: 8px;
  font-size: 15.5px; font-weight: 500;
  min-height: 44px;
}
.est__chip:hover { border-color: var(--ink); }
.est__chip.is-on { background: var(--accent); border-color: var(--accent);
  color: var(--on-accent); font-weight: var(--w-label); }
.est__free { display: flex; align-items: center; gap: 12px; margin-top: 12px;
  font-size: 15px; color: var(--muted); flex-wrap: wrap; }
.est__free input {
  width: 8rem; min-height: 44px; padding: 10px 12px; font-size: 16px;
  border: 1px solid var(--hairline); border-radius: 8px; background: var(--white);
}
.est__addons { display: grid; gap: 10px; margin-top: 12px; }
.est__addon { display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; background: var(--white);
  border: 1px solid var(--hairline); border-radius: 9px; cursor: pointer; }
.est__addon input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.est__addon strong { display: block; font-size: 15.5px; font-weight: var(--w-label); }
.est__addon em { display: block; font-style: normal; color: var(--muted); font-size: 14px; margin-top: 2px; }

.est__out {
  background: var(--ink); color: var(--white);
  border-radius: var(--r-section); padding: 26px 24px;
}
@media (min-width: 900px) { .est__out { position: sticky; top: 20px; } }
.est__outlabel { font-size: 12px; font-weight: var(--w-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.est__figure {
  font-weight: var(--w-head); font-size: clamp(27px, 4.4vw, 38px);
  line-height: 1.1; letter-spacing: -.02em; margin: 12px 0 18px;
}
.est__figure--survey { font-size: clamp(19px, 2.6vw, 23px); line-height: 1.3; }
.est__lines { list-style: none; margin: 0 0 18px; padding: 0; }
.est__lines li { display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-top: 1px solid rgba(255,255,255,.16);
  font-size: 15px; color: rgba(255,255,255,.84); }
.est__lines .est__min { color: var(--accent); }
.est__note { font-size: 13.5px; color: rgba(255,255,255,.7); margin-bottom: 18px; }
.est__ctahelp { font-size: 13px; color: rgba(255,255,255,.62); margin-top: 10px; }
.est__noscript { color: var(--muted); font-size: 16px; }


/* ---- grid breakers -------------------------------------------------------
   Three sections that deliberately do not repeat the three-across card
   rhythm: a full width photo with the process over it, a comparison table,
   and a wide single image explainer. */
.timeline { position: relative; isolation: isolate; }
.timeline > picture, .timeline > picture img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.timeline > picture img { object-fit: cover; }
.timeline::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right,
      rgba(9,47,58,.95) 0%, rgba(9,47,58,.88) 42%, rgba(9,47,58,.55) 72%, rgba(9,47,58,.35) 100%);
}
.timeline__inner { position: relative; z-index: 2; padding: 64px 0; color: var(--white); }
@media (min-width: 860px) { .timeline__inner { padding: 104px 0; } }
.timeline__inner h2 { color: var(--white); font-weight: var(--w-head);
  font-size: clamp(28px, 4.6vw, 44px); line-height: 1.1; letter-spacing: -.02em;
  margin-top: 10px; max-width: 18ch; }
.timeline__steps { list-style: none; margin: 40px 0 0; padding: 0;
  max-width: 44ch; position: relative; }
.timeline__steps::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px;
  width: 2px; background: rgba(255,255,255,.22);
}
.timeline__steps li { position: relative; padding: 0 0 30px 38px; }
.timeline__steps li:last-child { padding-bottom: 0; }
.timeline__dot { position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--ink); }
.timeline__steps h3 { font-weight: var(--w-head); font-size: 20px; letter-spacing: -.01em; }
.timeline__steps p { color: rgba(255,255,255,.82); font-size: 16.5px; margin-top: 6px; }

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; border-collapse: collapse; min-width: 42rem; }
.cmp th, .cmp td { text-align: left; padding: 15px 18px 15px 0; font-size: 16px;
  border-bottom: 1px solid var(--hairline); vertical-align: top; }
.cmp thead th { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: var(--w-label); border-bottom: 2px solid var(--hairline); }
.cmp tbody th { font-weight: var(--w-head); font-size: 17px; white-space: nowrap; }
.cmp td { color: var(--muted); }
.cmp__price { color: var(--ink) !important; font-weight: var(--w-label); white-space: nowrap; }

.explainer__grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) { .explainer__grid { grid-template-columns: 1.15fr 1fr; gap: 56px; } }
.explainer__media img { width: 100%; border-radius: var(--r-card); }
.explainer__body h2 { font-weight: var(--w-head); font-size: clamp(27px, 4.2vw, 40px);
  line-height: 1.1; letter-spacing: -.02em; margin: 10px 0 18px; }
.explainer__body p { color: var(--muted); font-size: 17px; margin-bottom: 14px; max-width: 52ch; }

.costs__list--simple a, .costs__list--simple li {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 16px 0; border-bottom: 1px solid var(--hairline);
}
.costs__list--simple li { align-items: baseline; }


/* The process now runs along the foot of the approach section rather than
   forming a second identical grid underneath it. */
.approach__run { margin-top: 56px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,.18); }
.approach__runhead { font-weight: var(--w-head); font-size: clamp(20px, 2.8vw, 26px);
  letter-spacing: -.015em; margin: 8px 0 26px; color: var(--white); }
.runsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: r; }
@media (min-width: 860px) { .runsteps { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.runsteps li { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: start; }
.runsteps__n { grid-row: span 2; font-weight: var(--w-head); font-size: 15px;
  color: var(--accent); padding-top: 2px; }
.runsteps strong { font-weight: var(--w-label); font-size: 17px; }
.runsteps span:last-child { color: rgba(255,255,255,.78); font-size: 16px; }


/* ---- running estimate ----------------------------------------------------
   The figure sits with the controls, not only in the panel beside them, so
   it is visible while you are still choosing. On a phone it sticks to the
   top of the form as you scroll the options. */
.est__running {
  position: sticky; top: 8px; z-index: 5;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 0 0 24px;
  padding: 15px 18px;
  border-radius: 11px;
  background: var(--white);
  border: 1px solid var(--hairline);
  box-shadow: 0 2px 10px rgba(9, 47, 58, .06);
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.est__running.is-live {
  border-color: var(--accent);
  box-shadow: 0 4px 18px rgba(9, 47, 58, .10);
}
.est__running__label {
  font-size: 12px; font-weight: var(--w-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.est__running__figure {
  font-weight: var(--w-head); font-size: clamp(19px, 3.4vw, 25px);
  letter-spacing: -.02em; color: var(--ink);
}
.est__running.is-live .est__running__figure { color: var(--ink); }
@keyframes estBump {
  0% { transform: scale(1); }
  38% { transform: scale(1.022); }
  100% { transform: scale(1); }
}
.est__running.is-bump { animation: estBump .34s cubic-bezier(.2, .7, .3, 1); }
@media (prefers-reduced-motion: reduce) {
  .est__running.is-bump { animation: none; }
}


/* ---- motion --------------------------------------------------------------
   Classes here are added by motion.js, never by the markup, so a page
   without JavaScript renders finished. Durations follow the spec: hero 500ms
   total, reveal 400ms, dropdowns 160ms, drawer 240ms, buttons 120ms. */
html.mo .rv {
  opacity: 0; transform: translateY(12px);
  transition: opacity .4s ease var(--d, 0ms), transform .4s ease var(--d, 0ms);
}
html.mo .rv.rv-in { opacity: 1; transform: none; }

html.mo .in { opacity: 0; transform: translateY(10px); }
html.mo .in.in-go {
  opacity: 1; transform: none;
  transition: opacity .28s ease var(--d, 0ms), transform .28s ease var(--d, 0ms);
}

/* Images reserve their box in the markup, so this only fades. CLS stays 0. */
img { opacity: 0; transition: opacity .3s ease; }
img.ld { opacity: 1; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { scroll-padding-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  html.mo .rv, html.mo .in { opacity: 1 !important; transform: none !important; transition: none !important; }
  img { opacity: 1; transition: none; }
}

/* Interaction polish: everything that responds to a pointer says so. */
.tlink, .costs__list a, .strip__item, .navdd-m a, .est__chip, .btn,
.card, .tile, .faq summary {
  -webkit-tap-highlight-color: transparent;
}
.btn { transition: transform .12s ease, background .12s ease, filter .12s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.faq summary { transition: color .2s ease; }
.faq details[open] summary { color: var(--ink); }
.cmp tbody tr { transition: background .2s ease; }
.cmp tbody tr:hover { background: var(--surface); }


/* ---- services in this town ----------------------------------------------- */
.localsvc { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--hairline); }
.localsvc__head { font-weight: var(--w-head); font-size: clamp(19px, 2.6vw, 24px);
  letter-spacing: -.015em; margin: 8px 0 22px; }
/* Flex rather than grid so the trailing row of an odd count centres instead
   of hanging off to the left. */
.localsvc__list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.localsvc__list > li { flex: 1 1 100%; }
@media (min-width: 700px) { .localsvc__list > li { flex: 0 1 calc(50% - 6px); } }
@media (min-width: 1100px) { .localsvc__list > li { flex: 0 1 calc(33.333% - 8px); } }
.localsvc__list a {
  position: relative; display: block; height: 100%;
  padding: 20px 46px 20px 20px;
  background: var(--surface); border-radius: var(--r-card);
  text-decoration: none;
  transition: background .22s ease, transform .22s cubic-bezier(.2,.7,.3,1);
}
.localsvc__list a:hover, .localsvc__list a:focus-visible {
  background: var(--accent); transform: translateY(-2px);
}
.localsvc__name { display: block; font-weight: var(--w-head); font-size: 17.5px;
  letter-spacing: -.01em; margin-bottom: 5px; }
.localsvc__note { display: block; color: var(--muted); font-size: 15px; }
.localsvc__list a:hover .localsvc__note,
.localsvc__list a:focus-visible .localsvc__note { color: var(--on-accent); opacity: .8; }
.localsvc__go { position: absolute; right: 18px; top: 21px; }


/* ---- coverage map --------------------------------------------------------
   The peninsula drawn once as an inline path. Water is the stone surface the
   section sits on, land a lighter tint of the brand ink, so the shape reads
   without a single tile request. */
.cov {
  display: grid; gap: 28px; align-items: stretch;
  min-height: 560px;
}
@media (min-width: 1000px) { .cov { grid-template-columns: 0.92fr 1.08fr; gap: 44px; } }

.cov__map {
  margin: 0; position: relative;
  background: var(--surface);
  border-radius: var(--r-section);
  padding: 18px;
  display: flex; flex-direction: column;
}
.cov__map svg { width: 100%; height: 100%; flex: 1 1 auto; min-height: 300px; display: block; }
@media (min-width: 1000px) { .cov__map svg { min-height: 460px; } }

/* Land is a tint of the brand ink, water is the stone the panel sits on. */
.cov__land {
  fill: color-mix(in srgb, var(--ink) 24%, var(--surface));
  stroke: color-mix(in srgb, var(--ink) 55%, var(--surface));
  stroke-width: 3;
  stroke-linejoin: round;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .cov__land { fill: #c3cecd; stroke: #7d9093; }
}

.cov__dot {
  fill: var(--accent);
  stroke: var(--ink); stroke-width: 2.5;
  transform-box: fill-box; transform-origin: center;
  transition: transform .16s ease, fill .16s ease;
}
.cov__label {
  fill: var(--ink); font-size: 20px; font-weight: 700;
  font-family: var(--font); paint-order: stroke;
  stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round;
  transition: fill .16s ease;
  pointer-events: none;
}
/* The group's own box spans dot and label, and its centre falls on empty
   water. So the group takes no pointer events and a generous invisible
   circle on the dot does, which also gives a comfortable touch target. */
.cov__pin { pointer-events: none; }
.cov__hit { fill: transparent; pointer-events: all; cursor: pointer; }
.cov__pin.is-on .cov__dot { transform: scale(1.4); fill: var(--white); }
.cov__pin.is-on .cov__label { fill: var(--ink); }
.cov__attr { margin-top: 12px; font-size: 12px; color: var(--muted); }

.cov__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px 18px;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
}
@media (min-width: 700px) { .cov__list { grid-template-columns: repeat(3, 1fr); } }
.cov__list a {
  display: block; height: 100%;
  padding: 13px 12px; border-radius: 10px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease;
}
.cov__list li.is-on a, .cov__list a:hover, .cov__list a:focus-visible {
  background: var(--surface); border-color: var(--hairline);
}
.cov__name { display: block; font-weight: var(--w-head); font-size: 16.5px;
  letter-spacing: -.01em; margin-bottom: 3px; }
.cov__note { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .cov__dot, .cov__label { transition: none; }
}

/* One citron pulse when the estimate changes. Once, not a loop. */
@keyframes estPulse {
  0% { box-shadow: 0 0 0 0 var(--accent); }
  100% { box-shadow: 0 0 0 4px rgba(0,0,0,0); }
}
.est__out.is-pulse { animation: estPulse .5s ease-out; }
@media (prefers-reduced-motion: reduce) { .est__out.is-pulse { animation: none; } }


/* ---- get a price today ---------------------------------------------------
   Three real routes to a person, then what happens after. The only numbered
   thing on the page is the timeline, and it is not numbered, it is a rail. */
.routes { padding: 96px 0; min-height: 520px; }
.routes__head {
  color: var(--white); font-weight: var(--w-head);
  font-size: clamp(32px, 5.4vw, 50px); line-height: 1.06;
  letter-spacing: -.025em; margin-top: 10px;
}
.routes__lede { color: rgba(255,255,255,.78); font-size: 17px; margin-top: 16px; max-width: 46ch; }

.routes__cards {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; gap: 16px;
}
@media (min-width: 860px) { .routes__cards { grid-template-columns: repeat(3, 1fr); } }

.route {
  display: flex; flex-direction: column; height: 100%;
  padding: 26px 24px 22px;
  border-radius: var(--r-card);
  text-decoration: none;
  background: var(--surface); color: var(--ink);
  transition: transform .12s ease, background .12s ease;
}
.route:hover, .route:focus-visible { transform: translateY(-1px); }
.route--primary { background: var(--accent); color: var(--on-accent); }
.route__icon { display: block; width: 30px; height: 30px; margin-bottom: 18px; color: var(--ink); }
.route--stone .route__icon { color: color-mix(in srgb, var(--ink) 70%, var(--accent)); }
.route__icon svg { width: 100%; height: 100%; }
.route__title { font-weight: var(--w-head); font-size: 20px; line-height: 1.2;
  letter-spacing: -.015em; margin-bottom: 8px; }
.route__line { color: var(--muted); font-size: 15.5px; margin-bottom: 20px; }
.route--primary .route__line { color: var(--on-accent); opacity: .78; }
.route__action { margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-weight: var(--w-label); font-size: 15.5px; }

/* Horizontal rail, not a list of numbers. */
.tl { margin-top: 56px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,.18); }
.tl__head { font-size: 12px; font-weight: var(--w-label); letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 28px; }
.tl__steps { list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; gap: 22px; }
@media (min-width: 860px) { .tl__steps { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.tl__rail { position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px;
  background: rgba(255,255,255,.18); overflow: hidden; }
.tl__rail i { display: block; width: 100%; height: 100%; background: var(--accent);
  transform: scaleY(0); transform-origin: top; }
@media (min-width: 860px) {
  .tl__rail { left: 7px; right: 7px; top: 6px; bottom: auto; width: auto; height: 2px; }
  .tl__rail i { transform: scaleX(0); transform-origin: left; }
}
.tl__steps li { position: relative; padding-left: 30px; }
@media (min-width: 860px) { .tl__steps li { padding: 30px 16px 0 0; } }
.tl__node { position: absolute; left: 0; top: 3px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--ink); border: 2.5px solid var(--accent); }
@media (min-width: 860px) { .tl__node { top: 0; } }
.tl__txt { color: rgba(255,255,255,.88); font-size: 16px; font-weight: 500; }

/* Rail draws once when the section is reached. */
html.mo .tl.rail-go .tl__rail i {
  transform: none;
  transition: transform .6s cubic-bezier(.3,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) { .tl__rail i { transform: none !important; } }

/* ---- what is included ---------------------------------------------------- */
.inc { background: var(--surface); padding: 44px 0; }
@media (min-width: 860px) { .inc { padding: 56px 0; } }
.inc__head { font-weight: var(--w-head); font-size: clamp(21px, 3vw, 27px);
  letter-spacing: -.015em; margin-bottom: 24px; }
.inc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px 40px; }
@media (min-width: 760px) { .inc__list { grid-template-columns: repeat(2, 1fr); } }
.inc__list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  align-items: start; font-size: 16.5px; }
.inc__tick { width: 20px; height: 20px; color: var(--ink); margin-top: 2px; }

/* Coverage keeps its own padding regardless of the shared section rhythm. */
.sect.coverage2 { padding: 96px 0; }


/* ---- gallery -------------------------------------------------------------
   Illustrative work, captioned as such. Real job photographs replace these. */
.gal { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 640px) { .gal { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gal { grid-template-columns: repeat(3, 1fr); } }
.gal figure { margin: 0; }
.gal img { width: 100%; border-radius: var(--r-card); }
.gal figcaption { margin-top: 10px; color: var(--muted); font-size: 14.5px; }

/* ---- contact -------------------------------------------------------------- */
.contact { display: grid; gap: 32px; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; gap: 56px; } }
.contact__hours { list-style: none; margin: 14px 0 0; padding: 0; }
.contact__hours li { padding: 9px 0; border-bottom: 1px solid var(--hairline); font-size: 17px; }
.contact__reply { margin-top: 18px; font-weight: var(--w-label); font-size: 17px; }
.contact__area { margin-top: 12px; color: var(--muted); font-size: 17px; max-width: 44ch; }
.contact__ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.contact__ways a {
  display: grid; gap: 4px; padding: 22px 24px;
  background: var(--surface); border-radius: var(--r-card);
  text-decoration: none;
  transition: background .16s ease, transform .12s ease;
}
.contact__ways a:hover, .contact__ways a:focus-visible { background: var(--accent); transform: translateY(-1px); }
.contact__k { font-size: 12px; font-weight: var(--w-label); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.contact__ways a:hover .contact__k { color: var(--on-accent); opacity: .75; }
.contact__v { font-weight: var(--w-head); font-size: 20px; letter-spacing: -.015em; }


/* ---- estimate modal ------------------------------------------------------ */
.em { position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(9, 47, 58, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.em[hidden] { display: none; }
.em__panel { width: 100%; max-width: 640px; max-height: 92vh; overflow: auto;
  background: var(--white); border-radius: var(--r-section); display: flex; flex-direction: column; }
@media (max-width: 640px) {
  .em { padding: 0; align-items: stretch; }
  .em__panel { max-width: none; max-height: none; min-height: 100%; border-radius: 0; }
}
.em__top { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; }
.em__title { flex: 1; font-weight: var(--w-head); font-size: 19px; letter-spacing: -.01em; }
.em__back, .em__close { border: 0; background: var(--surface); cursor: pointer;
  width: 38px; height: 38px; border-radius: 9px; font-size: 19px; line-height: 1; color: var(--ink); }
.em__back:hover, .em__close:hover { background: var(--hairline); }
.em__bar { height: 3px; background: var(--hairline); }
.em__bar i { display: block; height: 100%; width: 25%; background: var(--accent);
  transition: width .3s ease; }
.em__body { padding: 22px 20px 26px; }
.em__cards { display: grid; gap: 12px; }
@media (min-width: 520px) { .em__cards { grid-template-columns: repeat(2, 1fr); } }
.em__card { position: relative; border: 0; padding: 0; cursor: pointer;
  border-radius: var(--r-card); overflow: hidden; background: var(--ink);
  aspect-ratio: 16 / 9; text-align: left; }
.em__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.em__card span { position: absolute; left: 14px; bottom: 12px; z-index: 1;
  color: var(--white); font-weight: var(--w-head); font-size: 17px; }
.em__card:hover img { opacity: .45; }
.em__controls { margin-bottom: 18px; }
.em__fig { font-weight: var(--w-head); font-size: clamp(30px, 7vw, 44px);
  letter-spacing: -.025em; margin-bottom: 10px; }
.em__fig--sm { font-size: clamp(19px, 3.4vw, 24px); line-height: 1.3; }
.em__inc { color: var(--muted); font-size: 16px; margin-bottom: 22px; }

/* ---- estimator result card ---------------------------------------------- */
.est { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .est { grid-template-columns: 1.3fr 1fr; gap: 34px; } }
.estr { background: var(--ink); color: var(--white); border-radius: var(--r-section); padding: 26px 24px; }
@media (min-width: 900px) { .est__side { position: sticky; top: 20px; } }
.estr__label { font-size: 12px; font-weight: var(--w-label); letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); }
.estr__fig { font-weight: var(--w-head); font-size: clamp(28px, 5vw, 40px);
  letter-spacing: -.025em; margin: 10px 0 8px; }
.estr__fig--sm { font-size: clamp(18px, 3vw, 22px); line-height: 1.3; }
.estr__inc { color: rgba(255,255,255,.76); font-size: 15px; margin-bottom: 20px; }
.estr__note { font-size: 13px; color: rgba(255,255,255,.62); margin-top: 14px; }
.estf .field > span { color: rgba(255,255,255,.86); }
.estf .field input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.24); color: var(--white); }
.estf .field input::placeholder { color: rgba(255,255,255,.5); }
.estf .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.estf__wa { display: block; margin-top: 12px; text-align: center; font-size: 15px;
  color: var(--accent); }
.estf__note { margin-top: 10px; font-size: 14px; color: var(--accent); }
.estf__done { padding: 6px 0; }
.estf__donehead { font-weight: var(--w-head); font-size: 20px; margin-bottom: 8px; }
.estf__ref { color: rgba(255,255,255,.76); font-size: 15px; }
.estr--modal { background: var(--ink); }
@media (max-width: 899px) {
  .estr { position: sticky; bottom: 0; }
}


/* ---- google map embed ----------------------------------------------------
   Contact page only. It is a third party request, so it is not on every page
   and the privacy notice says it is there. */
.mapembed__head { font-weight: var(--w-head); font-size: clamp(21px, 3vw, 27px);
  letter-spacing: -.015em; }
.mapembed__lede { color: var(--muted); font-size: 17px; margin: 10px 0 22px; max-width: 52ch; }
.mapembed__frame { border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.mapembed__frame iframe { display: block; width: 100%; height: 380px; border: 0; }
@media (min-width: 860px) { .mapembed__frame iframe { height: 440px; } }


/* ---- enquiry form extras ------------------------------------------------- */
.qf__help { color: var(--muted); font-size: 14px; margin: 2px 0 10px; }
.qf__photos input[type="file"] { font-size: 15px; width: 100%; }
.qf__thumbs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.qf__thumbs li { display: flex; justify-content: space-between; gap: 14px;
  font-size: 14px; padding: 9px 12px; background: var(--surface); border-radius: 8px; }
.qf__thumbs strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qf__thumbs em { font-style: normal; color: var(--muted); flex: none; }
.qf__cond { display: grid; gap: 0; }


/* ---- whatsapp button -----------------------------------------------------
   Fixed, so it never participates in layout and cannot move anything: CLS
   stays 0. Revealed by script, which is why it starts scaled down rather
   than hidden, and why a page without JavaScript still shows it. */
.wafab {
  position: fixed; right: 18px; z-index: 120;
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 0;
  text-decoration: none;
  border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 6px 20px rgba(9, 47, 58, .26);
  transform: scale(.6); opacity: 0;
  transition: transform .24s cubic-bezier(.2, .8, .3, 1), opacity .24s ease,
              gap .2s ease, padding .2s ease;
  will-change: transform;
}
.wafab.is-in { transform: none; opacity: 1; }
.wafab__ic { display: grid; place-items: center; width: 56px; height: 56px; flex: none; }
.wafab__ic svg { width: 29px; height: 29px; }
.wafab__lbl {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font-weight: var(--w-label); font-size: 15px;
  transition: max-width .22s ease, padding .22s ease;
  padding: 0;
}
@media (hover: hover) and (min-width: 860px) {
  .wafab:hover .wafab__lbl, .wafab:focus-visible .wafab__lbl {
    max-width: 15rem; padding-left: 20px;
  }
}
/* Above the sticky bar on a phone, and out of the way of the estimator's
   own bottom bar. */
@media (max-width: 859px) {
  .wafab { bottom: calc(88px + env(safe-area-inset-bottom)); right: 14px; }
  .wafab__ic { width: 52px; height: 52px; }
}
/* The modal owns the screen while it is open. */
.wa-hidden .wafab { opacity: 0 !important; pointer-events: none; transform: scale(.8); }
@media (prefers-reduced-motion: reduce) {
  .wafab { transition: opacity .01ms; transform: none; }
  .wafab.is-in { transform: none; }
}


/* ---- where you will find us ----------------------------------------------
   The map is a facade: our own peninsula drawing until someone asks for
   Google, then the iframe swaps in. Nothing from google.com loads before the
   click, so no third party cookie drops without consent and neither
   Lighthouse nor CLS moves. */
.findus { background: var(--surface); padding: 96px 0; }
.findus--compact { padding: 64px 0; }
.findus__grid { display: grid; gap: 34px; align-items: center; min-height: 420px; }
@media (min-width: 960px) {
  .findus__grid { grid-template-columns: 1fr 1.05fr; gap: 56px; }
  .findus--compact .findus__grid { grid-template-columns: 1fr; min-height: 0; }
}
.findus--compact .findus__mapcol { display: none; }
.findus__head { font-weight: var(--w-head); font-size: clamp(26px, 4.2vw, 38px);
  line-height: 1.1; letter-spacing: -.02em; }
.findus__lede { color: var(--muted); font-size: 17px; margin-top: 14px; max-width: 46ch; }
.findus__contact { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 2px; }
.findus__contact li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.findus__contact span { font-size: 12px; font-weight: var(--w-label);
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.findus__contact a { font-weight: var(--w-label); font-size: 16.5px; text-decoration: none; }
.findus__contact a:hover { text-decoration: underline; }
.findus__hours { list-style: none; margin: 20px 0 0; padding: 0;
  color: var(--muted); font-size: 15.5px; display: grid; gap: 4px; }
.findus__attr { margin-top: 12px; font-size: 12.5px; color: var(--muted); }

.mapfacade { position: relative; border-radius: var(--r-section); overflow: hidden;
  background: var(--white); min-height: 320px; display: grid; place-items: center; }
@media (min-width: 960px) { .mapfacade { min-height: 380px; } }
.mapfacade__art { position: absolute; inset: 0; display: grid; place-items: center; padding: 26px; }
.mapfacade__art svg { width: 100%; height: 100%; opacity: .5; }
.mapfacade__btn { position: relative; z-index: 1; }
.mapfacade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ---- enquiry dialog ----------------------------------------------------- */
/* Only on a brand with no estimator. Where there is one, the header button
   opens the calculator and none of this is written. */
.qm { position: fixed; inset: 0; z-index: 80; display: flex;
  align-items: flex-start; justify-content: center;
  background: rgba(10, 12, 14, .55); backdrop-filter: blur(2px);
  padding: 4vh 16px; overflow-y: auto; animation: qmIn .18s ease both; }
.qm[hidden] { display: none; }
@keyframes qmIn { from { opacity: 0; } to { opacity: 1; } }
.qm__panel { width: 100%; max-width: 560px; background: var(--white);
  border-radius: var(--r-card); box-shadow: 0 24px 60px rgba(0,0,0,.28);
  animation: qmPanel .24s cubic-bezier(.2,.7,.2,1) both; }
@keyframes qmPanel { from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: none; } }
.qm__top { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 22px 0; }
.qm__title { font-size: 19px; font-weight: var(--w-head); }
.qm__close { background: none; border: 0; font-size: 30px; line-height: 1;
  cursor: pointer; color: var(--muted); padding: 0 4px; }
.qm__close:hover { color: var(--ink); }
.qm__body { padding: 14px 22px 24px; }
.qm__lede { color: var(--muted); font-size: 15.5px; line-height: 1.5;
  margin-bottom: 16px; }
.qm .field span { font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) {
  .qm, .qm__panel { animation: none; }
}