/* ==========================================================================
   Brighter Surveyors Limited: site stylesheet
   Version 1.0
   Palette derived from the company logo:
     teal  #266A6E   orange-red #F53830   white   charcoal #1C2A2B
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */
:root {
  --teal-900: #0D3235;
  --teal-800: #124246;
  --teal-700: #1A575B;
  --teal-600: #266A6E;   /* brand teal, taken from the logo */
  --teal-500: #338186;
  --teal-200: #BCD9DA;
  --teal-100: #E4F0F0;
  --teal-50:  #F3F9F9;

  --red-600:  #F53830;   /* brand orange-red, taken from the logo */
  --red-700:  #D6251C;   /* darker tint for text and links on white */
  --red-50:   #FEF0EF;

  --ink:      #1C2A2B;
  --ink-soft: #46595B;
  --ink-mute: #6B7C7E;
  --line:     #DCE6E6;
  --line-soft:#EDF3F3;
  --white:    #FFFFFF;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  --wrap: 1180px;
  --wrap-narrow: 820px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(13,50,53,.06), 0 2px 8px rgba(13,50,53,.05);
  --shadow-md: 0 2px 6px rgba(13,50,53,.07), 0 12px 28px rgba(13,50,53,.08);
  --header-h: 88px;
}

/* --- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--red-700); }
:focus-visible {
  outline: 3px solid var(--red-600);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3, h4 { color: var(--teal-900); line-height: 1.2; margin: 0 0 .6em; font-weight: 700; }
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem); letter-spacing: -.015em; }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); }
h4 { font-size: 1.0625rem; }
p  { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin-bottom: .45em; }
strong { font-weight: 650; color: var(--teal-900); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--teal-900); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 8px 8px; text-decoration: none; font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; color: #fff; }

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

/* --- Layout helpers ------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding: clamp(3rem, 6vw, 5.25rem) 0; }
.section--tight { padding: clamp(2.25rem, 4vw, 3.5rem) 0; }
.section--tint { background: var(--teal-50); }
.section--line { border-top: 1px solid var(--line-soft); }
.section--deep { background: var(--teal-900); color: #DCEAEA; }
.section--deep h2, .section--deep h3 { color: #fff; }
.section--deep a { color: #BCE0E1; }
.section--deep a:hover { color: #fff; }

.lede { font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem); color: var(--ink-soft); line-height: 1.6; }
.measure { max-width: 68ch; }
.center { text-align: center; }
.center .measure { margin-left: auto; margin-right: auto; }

.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red-700); margin-bottom: .75rem;
}
.section--deep .eyebrow { color: #F79A94; }

.grid { display: grid; gap: clamp(1.1rem, 2.4vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0,1fr); } }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-size: 1rem; font-weight: 650; line-height: 1.2;
  padding: .85rem 1.5rem; border-radius: 8px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--red-600); color: #fff; border-color: var(--red-600); }
.btn--primary:hover { background: var(--red-700); border-color: var(--red-700); color: #fff; }
.btn--teal { background: var(--teal-600); color: #fff; border-color: var(--teal-600); }
.btn--teal:hover { background: var(--teal-800); border-color: var(--teal-800); color: #fff; }
.btn--ghost { background: transparent; color: var(--teal-700); border-color: var(--teal-200); }
.btn--ghost:hover { background: var(--teal-50); border-color: var(--teal-600); color: var(--teal-800); }
.btn--on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--on-dark:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.btn--sm { padding: .6rem 1.05rem; font-size: .92rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

.arrow-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 650; text-decoration: none; color: var(--teal-700);
}
.arrow-link::after { content: "→"; transition: transform .15s ease; }
.arrow-link:hover { color: var(--red-700); }
.arrow-link:hover::after { transform: translateX(3px); }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
/* NOTE: do not put backdrop-filter (or filter, or transform) on this header.
   Any of them makes it the containing block for position:fixed descendants,
   which collapses the full-screen mobile menu inside it to the header's own
   height. The background is opaque, so the blur bought nothing anyway. */
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand img { height: 68px; width: auto; }

.nav { display: flex; align-items: center; gap: .05rem; }
/* Eight items sit in the bar since version 1.7 ("For Surveyors" was added and
   the telephone number taken out), so the horizontal padding is a little
   tighter than it was and the breakpoint below is set from a real measurement
   of where the bar actually runs out of room. */
.nav a, .nav button.has-sub {
  font-family: inherit; font-size: .95rem; font-weight: 600; color: var(--teal-900);
  text-decoration: none; padding: .6rem .58rem; border-radius: 6px; background: none; border: 0;
  cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
}
.nav a:hover, .nav button.has-sub:hover { background: var(--teal-50); color: var(--teal-700); }
.nav a[aria-current="page"] { color: var(--red-700); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: .58rem; right: .58rem; bottom: .18rem; height: 2px;
  background: var(--red-600); border-radius: 2px;
}
.nav > li > a { position: relative; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > li { position: relative; margin: 0; flex: 0 0 auto; }
/* The <li> holds three children: the link, the arrow button and the submenu.
   On desktop the submenu is absolutely positioned, so the row must NOT wrap or
   the arrow drops below the label when the bar is tight. Wrapping is turned on
   only in the mobile menu, where the submenu is in normal flow. */
.nav-split { display: flex; align-items: center; flex-wrap: nowrap; }
.nav-split > a { padding-right: .3rem; }
.nav-split > button.has-sub { padding-left: .25rem; padding-right: .5rem; }
.nav-split > a[aria-current="page"]::after { left: .58rem; right: .3rem; }
.nav { list-style: none; margin: 0; padding: 0; }

.caret { width: 9px; height: 9px; flex: 0 0 auto; transition: transform .15s ease; }
.has-sub[aria-expanded="true"] .caret { transform: rotate(180deg); }

.subnav {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 268px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: .45rem; display: none;
}
.nav li.open > .subnav { display: block; }
.subnav a { display: block; padding: .62rem .75rem; font-weight: 600; font-size: .95rem; border-radius: 6px; }
.subnav a small { display: block; font-weight: 400; font-size: .82rem; color: var(--ink-mute); margin-top: .1rem; }
.subnav a:hover small { color: var(--teal-700); }

.header-cta { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
/* The telephone number was removed from the header bar and the phone menu in
   version 1.7. It is still in the page content, the closing band and the
   footer, all as working tel: links. */

.menu-btn {
  display: none; align-items: center; gap: .45rem; font-family: inherit; font-size: .95rem;
  font-weight: 650; color: var(--teal-900); background: #fff; border: 1px solid var(--line);
  border-radius: 8px; padding: .55rem .8rem; cursor: pointer;
}
.menu-btn:hover { border-color: var(--teal-600); }
.menu-btn .bars { display: inline-block; width: 17px; height: 12px; position: relative; }
.menu-btn .bars span,
.menu-btn .bars::before,
.menu-btn .bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--teal-900); border-radius: 2px;
}
.menu-btn .bars::before { top: 0; }
.menu-btn .bars span { top: 5px; }
.menu-btn .bars::after { bottom: 0; }

/* The desktop bar needs 1190px of viewport to hold eight items plus the quote
   button without overflowing. Measured, not guessed: at 1180px it ran 4px over.
   Below this the phone menu takes over. */
@media (max-width: 1249px) {
  :root { --header-h: 74px; }
  .brand img { height: 50px; }
  .menu-btn { display: inline-flex; }
  /* Off-canvas panel. It is display:none when closed so that it never adds to
     the page width: an off-screen transform would cause horizontal scrolling. */
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; background: #fff; display: none;
    height: calc(100vh - var(--header-h));      /* explicit, so the panel cannot */
    height: calc(100dvh - var(--header-h));     /* collapse if inset is ignored  */
    padding: 1rem clamp(1.1rem, 4vw, 2rem) 3rem; overflow-y: auto;
    border-top: 1px solid var(--line);
  }
  .nav.is-open { display: block; animation: navIn .18s ease both; }
  @keyframes navIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .nav > li { border-bottom: 1px solid var(--line-soft); }
  .nav > li > a, .nav button.has-sub {
    width: 100%; justify-content: space-between; padding: .95rem .2rem; font-size: 1.05rem; border-radius: 0;
  }
  /* Same split on phones: the words navigate, the arrow only opens the menu.
     These need to out-specify ".nav > li > a { width: 100% }" above, or the link
     fills the row and pushes the arrow onto a line of its own. */
  .nav > li.nav-split { justify-content: space-between; flex-wrap: wrap; }
  .nav > li.nav-split > .subnav { flex: 1 0 100%; }
  .nav > li.nav-split > a { flex: 1 1 auto; width: auto; }
  .nav > li.nav-split > button.has-sub {
    flex: 0 0 auto; width: auto; padding: .95rem .4rem .95rem 1.1rem;
  }
  .nav > li.nav-split > button.has-sub .caret { width: 14px; height: 14px; }
  .nav a[aria-current="page"]::after { display: none; }
  .subnav {
    position: static; display: none; box-shadow: none; border: 0; border-radius: 0;
    padding: 0 0 .7rem .2rem; min-width: 0; background: transparent;
  }
  .nav li.open > .subnav { display: block; }
  .subnav a { padding: .55rem .2rem; font-weight: 500; }
  /* The generic ".nav a" rule strips backgrounds and borders, so the two
     call-to-action buttons at the foot of the menu need to out-specify it or
     they render as plain text links. */
  .nav > li.mobile-only-cta { display: block; margin-top: 1.4rem; border-bottom: 0; }
  .nav > li.mobile-only-cta > a.btn {
    width: 100%; justify-content: center; margin-bottom: .7rem;
    padding: .9rem 1.5rem; font-size: 1rem; border-radius: 8px;
    border-width: 2px; border-style: solid;
  }
  .nav > li.mobile-only-cta > a.btn--primary {
    background: var(--red-600); color: #fff; border-color: var(--red-600);
  }
  .nav > li.mobile-only-cta > a.btn--ghost {
    background: #fff; color: var(--teal-700); border-color: var(--teal-200);
  }
}
/* Keep the quote button in the header on phones; drop it only on the very
   narrowest screens, where the menu button needs the room. */
@media (max-width: 400px) {
  .header-cta .btn--primary { display: none; }
  .brand img { height: 44px; }
}
@media (min-width: 1250px) { .mobile-only-cta { display: none; } }
body.nav-open { overflow: hidden; }

/* --- Hero ---------------------------------------------------------------- */
.hero { background: var(--teal-900); color: #E3EFEF; position: relative; overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(1.5rem, 4vw, 3.25rem); align-items: end; position: relative; z-index: 2;
}
.hero-inner { padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem); }
.hero h1 { color: #fff; margin-bottom: .55rem; }
.hero h1 .accent { color: #FF7A72; }
.hero .eyebrow { color: #fff; }
.hero .lede { color: #C9E0E0; font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center;
  margin: 1.5rem 0 1.9rem; font-size: .93rem; color: #A9CBCB;
}
.hero-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red-600); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-inner { padding-bottom: 2.25rem; }
}

/* Banner photograph (v2.4). The photograph sits in the right-hand column at
   its own 3:2 proportions: never cropped, zoomed or stretched. Only its left
   edge is blended into the teal; there is no overlay across it. On a phone
   it stacks, complete, beneath the text and buttons. */
.hero-photo { margin: 0; align-self: center; }
@media (min-width: 901px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  /* Run the photograph out to the right-hand edge of the window, so it reads
     as part of the banner rather than a framed picture. */
  .hero-photo { margin-right: calc(-1 * (max(0px, (100vw - var(--wrap)) / 2) + clamp(1.1rem, 4vw, 2rem))); }
}
.hero-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 1200 / 801;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%);
          mask-image: linear-gradient(to right, transparent 0, #000 16%);
}
@media (max-width: 900px) {
  .hero-photo { margin: 0 calc(clamp(1.1rem, 4vw, 2rem) * -1); }
  .hero-photo img { -webkit-mask-image: none; mask-image: none; }
}
/* Portrait photograph beside the listed-property text (v2.4). */
.photo--portrait { max-width: 440px; margin-left: auto; }
.photo--portrait img { width: 100%; height: auto; }
@media (max-width: 860px) { .photo--portrait { margin: 0 auto; } }

.page-head { background: var(--teal-50); border-bottom: 1px solid var(--line-soft); padding: clamp(2.2rem, 4.5vw, 3.6rem) 0; }
.page-head h1 { margin-bottom: .45rem; }
.page-head .lede { max-width: 62ch; margin-bottom: 0; }
/* Some page introductions run to two paragraphs, so they need a gap between
   them rather than reading as one wall of text. */
.page-head .lede + .lede { margin-top: .85rem; }

.crumbs { font-size: .86rem; color: var(--ink-mute); margin-bottom: .9rem; }
.crumbs a { color: var(--teal-700); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { padding: 0 .35rem; }

/* --- Cards --------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 2.2vw, 1.85rem); display: flex; flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--teal-500); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-soft); margin-bottom: 1rem; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card .arrow-link { margin-top: auto; }
.card-icon { width: 46px; height: 46px; margin-bottom: 1rem; }

.panel {
  background: var(--teal-50); border: 1px solid var(--teal-200); border-left: 4px solid var(--teal-600);
  border-radius: var(--radius); padding: clamp(1.15rem, 2vw, 1.6rem);
}
.panel h3 { margin-bottom: .45rem; font-size: 1.1rem; }
.panel p:last-child, .panel ul:last-child { margin-bottom: 0; }
.panel--note { background: var(--red-50); border-color: #F6C9C6; border-left-color: var(--red-600); }
.panel--plain { background: #fff; border-color: var(--line); border-left-color: var(--teal-600); }

/* --- Split (text + art) -------------------------------------------------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.split--reverse .split-art { order: -1; }
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0,1fr); }
  .split--reverse .split-art { order: 0; }
}
.split-art img, .split-art svg { border-radius: var(--radius-lg); width: 100%; }

/* --- Property photographs -------------------------------------------------
   Stock photographs of property TYPES, shown beside the text they illustrate.
   Deliberately restrained: upright, a small corner radius, a hairline shadow
   for definition against white, no frame and no caption. Nothing here should
   read as a gallery of our own work.

   The photograph takes about 42% of the width beside the text on desktop and
   drops below it on narrower screens. Every picture is served at its own
   aspect ratio and is never stretched: width/height are set on the <img> so
   the page does not jump while it loads.
   --------------------------------------------------------------------------- */
.text-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
.text-photo > .photo { grid-column: 2; grid-row: 1; }
.text-photo--reverse { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
.text-photo--reverse > .photo { grid-column: 1; grid-row: 1; }
.text-photo > .text-photo-body { min-width: 0; }

.photo { margin: 0; }
.photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(16, 42, 44, .14);
}
/* The full-width band on the Surveys & Valuations overview. */
.photo--band { margin: 2.25rem 0 0; }
.photo--band:first-child { margin-top: 0; }
.photo--band img { border-radius: var(--radius-lg); }

@media (max-width: 860px) {
  .text-photo,
  .text-photo--reverse { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, with the photograph after the text it belongs to, whichever side
     it sat on at desktop width. */
  .text-photo > .photo,
  .text-photo--reverse > .photo { grid-column: 1; grid-row: auto; }
  .text-photo > .text-photo-body,
  .text-photo--reverse > .text-photo-body { grid-column: 1; grid-row: auto; }
}

/* --- Lists --------------------------------------------------------------- */
.ticks { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.ticks li { position: relative; padding-left: 1.85rem; margin-bottom: .7rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 1.05rem; height: .6rem;
  border-left: 2.5px solid var(--teal-600); border-bottom: 2.5px solid var(--teal-600);
  transform: rotate(-45deg);
}
.ticks--light li::before { border-color: #6FC0C3; }

.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 1.15rem; }
.steps li { counter-increment: s; position: relative; padding-left: 3.1rem; margin: 0; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  background: var(--teal-600); color: #fff; font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}
.steps h3 { font-size: 1.08rem; margin-bottom: .25rem; }
.steps p { margin-bottom: 0; color: var(--ink-soft); }
.section--deep .steps li::before { background: var(--red-600); }
.section--deep .steps p { color: #BCD4D4; }

/* --- Credentials strip --------------------------------------------------- */
.creds { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 3vw, 2.75rem); align-items: center; }
.creds-badge {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.15rem 1.35rem; display: inline-flex; align-items: center; justify-content: center;
}
.creds-badge img { width: 200px; }
@media (max-width: 720px) { .creds { grid-template-columns: minmax(0,1fr); } }

/* --- Level 2 / Level 3 comparison -----------------------------------------
   Real HTML text, never a picture of a table, and never a wide table shrunk
   to fit. On a computer it reads as three columns: the feature, then Level 2
   and Level 3 side by side, with one header row.

   Below 820px the header row is dropped and each feature becomes its own
   block, with the Level 2 and Level 3 descriptions under it, each carrying
   its own label. Nothing shrinks, and nothing has to be scrolled sideways.
   --------------------------------------------------------------------------- */
.cmp { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.cmp-head {
  display: grid; grid-template-columns: 1fr 1.35fr 1.35fr;
  background: var(--teal-900); color: #fff;
}
.cmp-head span {
  padding: .9rem 1.15rem; font-size: .92rem; font-weight: 650; letter-spacing: .01em;
}
.cmp-row {
  display: grid; grid-template-columns: 1fr 1.35fr 1.35fr;
  border-top: 1px solid var(--line-soft);
}
.cmp-row:first-of-type { border-top: 0; }
.cmp-row > h3 {
  margin: 0; padding: 1.05rem 1.15rem; font-size: 1rem; font-weight: 650;
  color: var(--teal-900); background: var(--teal-50);
}
.cmp-cell { padding: 1.05rem 1.15rem; font-size: .97rem; }
.cmp-tag { display: none; }

@media (max-width: 820px) {
  .cmp-head { display: none; }
  .cmp-row { grid-template-columns: minmax(0, 1fr); }
  .cmp-row > h3 { padding: .9rem 1.05rem; font-size: 1.02rem; }
  .cmp-cell { padding: .95rem 1.05rem; }
  .cmp-cell + .cmp-cell { border-top: 1px solid var(--line-soft); }
  /* The column headings become a label on each description, so a phone reader
     still knows which level they are reading. */
  .cmp-tag {
    display: inline-block; margin-bottom: .35rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--teal-700);
  }
}

/* The two service cards at the top of the comparison page. */
.card--service .service-for {
  font-weight: 650; color: var(--teal-800);
  padding-bottom: .85rem; margin-bottom: .85rem;
  border-bottom: 1px solid var(--line-soft);
}

/* --- Comparison table (older pages) --------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-lg); }
table.compare { width: 100%; border-collapse: collapse; min-width: 720px; background: #fff; }
table.compare th, table.compare td { padding: .95rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); font-size: .97rem; }
table.compare thead th { background: var(--teal-900); color: #fff; font-size: .92rem; letter-spacing: .01em; border-bottom: 0; }
table.compare thead th:first-child { width: 22%; }
table.compare tbody th { font-weight: 650; color: var(--teal-900); background: var(--teal-50); width: 22%; }
table.compare tr:last-child th, table.compare tr:last-child td { border-bottom: 0; }

/* --- Testimonials -------------------------------------------------------- */
.quotes { display: grid; gap: clamp(1.1rem, 2.4vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 2.2vw, 1.85rem);
}
.quote blockquote { margin: 0 0 1rem; font-family: var(--serif); font-size: 1.08rem; line-height: 1.55; color: var(--teal-900); }
.quote blockquote::before { content: "\201C"; color: var(--red-600); font-size: 1.6em; line-height: 0; vertical-align: -.25em; margin-right: .06em; }
.quote cite { font-style: normal; font-size: .88rem; color: var(--ink-mute); font-weight: 600; }

/* --- Report cover previews ------------------------------------------------
   A compact pair of covers sitting beside the service description. Built from
   plain <a> elements, not a list, so there are no bullets to suppress.
   -------------------------------------------------------------------------- */
.covers {
  display: flex;
  gap: clamp(.8rem, 2vw, 1.25rem);
  align-items: flex-start;
  margin: 0;
  padding: .35rem .2rem .2rem;     /* just enough room for the rotated corners */
}
.cover {
  display: block;
  flex: 0 1 200px;
  width: 200px;
  max-width: calc(50% - .65rem);   /* keeps the pair side by side on any width */
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: 0 4px 14px rgba(13, 50, 53, .16);
  transform: rotate(var(--tilt, 4deg));
  transform-origin: center center;
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: zoom-in;
  outline-offset: 6px;
}
.cover:first-child { --tilt: 3.5deg; }
.cover:last-child  { --tilt: 4.5deg; }
.cover img { width: 100%; height: auto; display: block; }
.cover:hover, .cover:focus-visible {
  transform: rotate(var(--tilt, 4deg)) translateY(-4px);
  box-shadow: 0 8px 22px rgba(13, 50, 53, .24);
}
.covers-note {
  font-size: .85rem; color: var(--ink-mute);
  margin: .95rem 0 0; text-align: center;
}
.section--deep .covers-note { color: #9FBDBD; }

/* Service page intro: description on the left, cover pair on the right.
   The covers column is sized by its content, and both columns start at the
   same top edge so no empty band is created. */
.service-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
}
.service-intro .covers { width: 432px; }
@media (max-width: 900px) {
  .service-intro { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .service-intro .covers { width: 100%; justify-content: flex-start; }
  .service-intro .covers-note { text-align: left; }
}
@media (max-width: 460px) {
  .cover:first-child { --tilt: 2.5deg; }
  .cover:last-child  { --tilt: 3.5deg; }
}

/* --- Lightbox -------------------------------------------------------------- */
.lightbox {
  border: 0; padding: 0; margin: 0; background: transparent;
  width: 100%; height: 100%; max-width: 100vw; max-height: 100vh;
  inset: 0; overflow: hidden;
}
/* The dim sits on a real element rather than ::backdrop alone: it renders
   identically in every browser and is the surface that closes on click. */
.lightbox::backdrop { background: rgba(9, 32, 34, .5); }
.lightbox-inner {
  min-height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .9rem;
  padding: clamp(3.4rem, 8vh, 4.5rem) 1rem 1.25rem;
  background: rgba(9, 32, 34, .88);
}
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .85rem; }
.lightbox img {
  display: block; width: auto; height: auto;
  max-width: min(94vw, 640px); max-height: 84vh;
  border-radius: 3px; background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
}
.lightbox figcaption {
  color: #DCEAEA; font-size: .92rem; text-align: center;
  max-width: min(94vw, 640px); line-height: 1.5;
}
.lightbox figcaption .muted-light { display: block; color: #8FB4B4; font-size: .85rem; margin-top: .25rem; }
.lightbox-close {
  position: fixed; top: clamp(.8rem, 2.5vh, 1.5rem); right: clamp(.8rem, 2.5vw, 1.5rem);
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: inherit; font-size: .95rem; font-weight: 650; color: #fff;
  background: rgba(255, 255, 255, .14); border: 1.5px solid rgba(255, 255, 255, .5);
  border-radius: 999px; padding: .55rem 1.05rem; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .26); border-color: #fff; }
.lightbox-close svg { width: 15px; height: 15px; }
.lightbox[open] figure { animation: lbIn .26s cubic-bezier(.2, .7, .3, 1) both; }
.lightbox[open]::backdrop { animation: lbFade .26s ease both; }
.lightbox[open] .lightbox-close { animation: lbFade .26s ease .06s both; }
@keyframes lbIn {
  from { opacity: 0; transform: scale(.93) rotate(2.6deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }

/* --- Back control ---------------------------------------------------------
   Sits directly above the page heading, on the same tint, so it reads as part
   of the page furniture rather than as a service arrow.
   -------------------------------------------------------------------------- */
.backbar { background: var(--teal-50); padding: 1.05rem 0 0; }
.backbar + .page-head { padding-top: .85rem; }
.back-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9rem; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; padding: .3rem .55rem .3rem .35rem;
  border-radius: 6px; margin-left: -.35rem;
}
.back-link svg { width: 15px; height: 15px; }
.back-link:hover { color: var(--teal-800); background: #fff; }

/* --- Service page left/right arrows ---------------------------------------
   Two arrow-only controls fixed at the vertical centre of the viewport, just
   outside the text column. Service pages reserve matching side room (see
   .svc-page below) so the arrows never sit over text, covers or buttons.
   -------------------------------------------------------------------------- */
.svc-arrow {
  position: fixed; top: 50%; transform: translateY(-50%);
  z-index: 70;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--teal-800);
  border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(13, 50, 53, .14);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.svc-arrow svg { width: 22px; height: 22px; }
.svc-arrow:hover {
  background: var(--teal-800); border-color: var(--teal-800); color: #fff;
}
.svc-arrow:focus-visible { outline: 3px solid var(--red-600); outline-offset: 3px; }
/* 590px is half the content column; 56px clears the arrow and its gap. */
.svc-arrow--prev { left: max(.6rem, calc(50% - 646px)); }
.svc-arrow--next { right: max(.6rem, calc(50% - 646px)); }

/* Reserve room so the arrows never overlap anything in the page content. */
.svc-page main .wrap { padding-left: 68px; padding-right: 68px; }
@media (min-width: 1400px) {
  .svc-page main .wrap { padding-left: clamp(1.1rem, 4vw, 2rem); padding-right: clamp(1.1rem, 4vw, 2rem); }
}
@media (max-width: 860px) {
  .svc-arrow { width: 36px; height: 36px; }
  .svc-arrow svg { width: 17px; height: 17px; }
  .svc-arrow--prev { left: 4px; }
  .svc-arrow--next { right: 4px; }
  .svc-page main .wrap { padding-left: 46px; padding-right: 46px; }
}
/* An open lightbox takes over the screen: keep these out of the way. */
body.lightbox-open .svc-arrow,
body.lightbox-open .to-top { display: none; }

/* --- Page slide between service pages -------------------------------------
   A short horizontal slide in the direction of travel. Purely decorative:
   the links are ordinary hrefs, so history, real addresses and direct access
   all behave normally, and nothing is animated if motion is reduced.
   -------------------------------------------------------------------------- */
@keyframes svcInFromRight { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes svcInFromLeft  { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes svcOutToLeft   { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-24px); } }
@keyframes svcOutToRight  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(24px); } }
main.svc-in-next  { animation: svcInFromRight .22s ease both; }
main.svc-in-prev  { animation: svcInFromLeft  .22s ease both; }
main.svc-out-next { animation: svcOutToLeft   .16s ease both; }
main.svc-out-prev { animation: svcOutToRight  .16s ease both; }
@media (prefers-reduced-motion: reduce) {
  main.svc-in-next, main.svc-in-prev, main.svc-out-next, main.svc-out-prev { animation: none !important; }
}

/* --- Report extracts and the extract viewer --------------------------------
   A preview of the extract's first page sits on the website, tilted slightly
   and shadowed to match the approved report covers. Selecting it opens the
   whole extract in the viewer below, one page at a time.

   Nothing renders at all until real extracts are added, so there are never
   empty cards.
   -------------------------------------------------------------------------- */
.extract-group + .extract-group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.extract-group > h2 { margin-bottom: .55rem; }
.extract-group[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.extract-group--service { margin-top: clamp(2.75rem, 5vw, 4rem); }
.extract-note {
  color: var(--ink-mute); font-size: .92rem; max-width: 46rem;
  margin: 0 0 1.75rem;
}
.extract-more { margin: 1.9rem 0 0; font-size: .95rem; }

.extracts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  align-items: start; max-width: 860px;
}
@media (max-width: 620px) { .extracts { max-width: 340px; margin: 0 auto; } }
.extract { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.extract-thumb {
  display: block; width: 200px; max-width: 100%;
  background: #fff; border: 0; border-radius: 0;
  box-shadow: 0 4px 14px rgba(13, 50, 53, .16);
  transform: rotate(var(--tilt, 3.5deg));
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: zoom-in; outline-offset: 6px;
}
.extracts .extract:nth-child(3n+1) .extract-thumb { --tilt: 3.2deg; }
.extracts .extract:nth-child(3n+2) .extract-thumb { --tilt: 4.2deg; }
.extracts .extract:nth-child(3n)   .extract-thumb { --tilt: 3.6deg; }
.extract-thumb img { width: 100%; height: auto; display: block; }
.extract-thumb:hover, .extract-thumb:focus-visible {
  transform: rotate(var(--tilt, 3.5deg)) translateY(-4px);
  box-shadow: 0 8px 22px rgba(13, 50, 53, .24);
}
@media (prefers-reduced-motion: reduce) {
  .extract-thumb, .extract-thumb:hover, .extract-thumb:focus-visible { transition: none; }
}
.extract figcaption { margin-top: 1.5rem; }
.extract figcaption h3 { margin-bottom: .35rem; font-size: 1.1rem; }
.extract figcaption p { color: var(--ink-soft); font-size: .95rem; margin-bottom: 0; }
.extract-meta {
  margin-top: .3rem; font-size: .9rem;
  color: var(--ink-mute); font-weight: 600;
}
/* Shown only where JavaScript is unavailable, so every page is still reachable. */
.extract-pages-plain {
  list-style: none; margin: .9rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .1rem .9rem; justify-content: center;
  font-size: .88rem;
}

.extracts-pending {
  margin: 0; padding: 1.15rem 1.4rem;
  background: var(--teal-50); border-left: 4px solid var(--teal-600);
  border-radius: var(--radius);
  color: var(--ink-soft); font-size: .98rem;
}

/* --- The extract viewer ---------------------------------------------------
   Three rows: a bar with the title and the close control, the page itself, and
   a bar with the arrows and the page counter. The page is fitted whole inside
   the middle row, so it is never cropped and never stretched.
   -------------------------------------------------------------------------- */
.gallery {
  border: 0; padding: 0; margin: 0; inset: 0;
  width: 100%; height: 100%; max-width: 100vw; max-height: 100vh;
  background: #0B2426; overflow: hidden;
}
.gallery[open] { display: flex; flex-direction: column; }
.gallery::backdrop { background: rgba(9, 32, 34, .6); }

.gallery-stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: .4rem .75rem;
}
.gallery-img {
  display: block; background: #fff; border-radius: 2px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;          /* whole page, original proportions */
}

.gallery-bar {
  flex: 0 0 auto; display: flex; align-items: center;
  gap: .75rem; padding: .7rem clamp(.7rem, 2vw, 1.25rem);
  color: #fff;
}
.gallery-bar--top { justify-content: space-between; background: #081D1F;
  border-bottom: 1px solid rgba(255,255,255,.1); }
.gallery-bar--bottom { justify-content: center; background: #081D1F;
  border-top: 1px solid rgba(255,255,255,.1); }
.gallery-title {
  margin: 0; font-weight: 700; font-size: 1rem; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gallery-tools { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.gallery-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: inherit; font-size: .9rem; font-weight: 650; color: #fff;
  background: rgba(255, 255, 255, .14); border: 1.5px solid rgba(255, 255, 255, .5);
  border-radius: 999px; padding: .5rem .95rem; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.gallery-btn:hover { background: rgba(255, 255, 255, .26); border-color: #fff; }
.gallery-btn svg { width: 15px; height: 15px; }

.gallery-count {
  margin: 0; font-size: .95rem; font-weight: 650; color: #DCEAEA;
  min-width: 5.5rem; text-align: center;
}
.gallery-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: 0 0 auto;
  color: #fff; background: rgba(255, 255, 255, .14);
  border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 50%;
  cursor: pointer; transition: background-color .15s ease, opacity .15s ease;
}
.gallery-nav svg { width: 22px; height: 22px; }
.gallery-nav:hover:not(:disabled) { background: rgba(255, 255, 255, .28); }
.gallery-nav:disabled { opacity: .3; cursor: default; }

/* On a wider screen the arrows sit at the sides of the page, where they are
   expected. On a narrow one they stay in the bar beneath it. */
@media (min-width: 760px) {
  .gallery-nav {
    position: fixed; top: 50%; transform: translateY(-50%);
    width: 54px; height: 54px;
  }
  .gallery-prev { left: clamp(.75rem, 2.5vw, 2rem); }
  .gallery-next { right: clamp(.75rem, 2.5vw, 2rem); }
}
@media (max-width: 480px) {
  .gallery-title { font-size: .9rem; }
  .gallery-btn { padding: .45rem .75rem; font-size: .85rem; }
  .gallery-nav { width: 44px; height: 44px; }
}
.gallery[open] .gallery-img { animation: galIn .22s ease both; }
@keyframes galIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .gallery[open] .gallery-img { animation: none; }
}

/* --- Back to top ----------------------------------------------------------- */
.to-top {
  position: fixed; z-index: 95;
  right: clamp(.9rem, 2.5vw, 1.5rem);
  bottom: calc(clamp(.9rem, 2.5vh, 1.5rem) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .6rem .85rem; border-radius: 999px;
  background: var(--teal-800); color: #fff; text-decoration: none;
  font-size: .85rem; font-weight: 650; line-height: 1;
  box-shadow: 0 3px 10px rgba(13, 50, 53, .28);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, background-color .15s ease;
}
.to-top svg { width: 15px; height: 15px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--teal-900); color: #fff; }
@media (max-width: 420px) {
  .to-top span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .to-top { padding: .7rem; }
  .to-top svg { width: 17px; height: 17px; }
}
@media print { .to-top, .backbar, .svc-arrow { display: none !important; } }

/* --- Homepage sample report page ------------------------------------------ */
.report-sample { display: flex; flex-direction: column; align-items: center; }
.report-preview {
  display: block; width: 320px; max-width: 100%;
  background: #fff; border-radius: 2px; cursor: zoom-in; outline-offset: 6px;
  box-shadow: 0 4px 16px rgba(13, 50, 53, .18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.report-preview img { width: 100%; height: auto; display: block; }
.report-preview:hover, .report-preview:focus-visible {
  transform: translateY(-4px); box-shadow: 0 8px 24px rgba(13, 50, 53, .26);
}
@media (max-width: 900px) { .report-preview { width: 300px; } }
@media (max-width: 420px) { .report-preview { width: 100%; max-width: 280px; } }

/* --- Forms --------------------------------------------------------------- */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 650; font-size: .95rem; color: var(--teal-900); margin-bottom: .35rem; }
.field .hint { display: block; font-weight: 400; font-size: .86rem; color: var(--ink-mute); margin-top: .1rem; }
.field .opt { font-weight: 400; color: var(--ink-mute); font-size: .86rem; }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: .72rem .85rem; border: 1.5px solid var(--line); border-radius: 8px; background: #fff;
  transition: border-color .15s ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--teal-500); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal-600); }
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%231A575B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px; padding-right: 2.4rem; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 1.15rem; }
@media (max-width: 640px) { .field-row { grid-template-columns: minmax(0,1fr); } }
.field .err { display: none; color: var(--red-700); font-size: .87rem; font-weight: 600; margin-top: .3rem; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red-700); }
.field.has-error .err { display: block; }
fieldset { border: 0; padding: 0; margin: 0 0 1.15rem; }
legend { font-weight: 650; font-size: .95rem; color: var(--teal-900); padding: 0; margin-bottom: .35rem; }
.form-sep { border: 0; border-top: 1px solid var(--line-soft); margin: 1.9rem 0 1.5rem; }
.form-step { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red-700); margin-bottom: .9rem; }
.form-status { margin-top: 1.2rem; }
.form-status[hidden] { display: none; }

.form-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .form-layout { grid-template-columns: minmax(0,1fr); } }

/* --- Contact tiles ------------------------------------------------------- */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; }
.contact-list li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .9rem; align-items: start; margin: 0; }
.contact-list .ci {
  width: 2.4rem; height: 2.4rem; border-radius: 8px; background: var(--teal-50);
  display: flex; align-items: center; justify-content: center; color: var(--teal-700);
}
.contact-list .ci svg { width: 1.15rem; height: 1.15rem; }
.contact-list strong { display: block; font-size: .87rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); font-weight: 700; }
.contact-list a { font-weight: 650; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

/* --- Areas --------------------------------------------------------------- */
.area-cols { columns: 3 210px; column-gap: 2rem; }
.area-cols ul { list-style: none; padding: 0; margin: 0 0 1.5rem; break-inside: avoid; }
.area-cols h3 { font-size: 1rem; margin-bottom: .5rem; }
.area-cols li { font-size: .96rem; color: var(--ink-soft); margin-bottom: .3rem; }

.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.pill-row li { margin: 0; }
.pill {
  display: inline-block; font-size: .88rem; font-weight: 600; padding: .4rem .8rem;
  border-radius: 999px; background: var(--teal-50); border: 1px solid var(--teal-200); color: var(--teal-800);
}

/* --- Footer -------------------------------------------------------------- */
.site-footer { background: var(--teal-900); color: #B9D2D2; font-size: .95rem; }
.footer-top { padding-top: clamp(2.5rem, 5vw, 3.75rem); padding-bottom: 2.25rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: clamp(1.75rem, 3.5vw, 3rem); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: minmax(0,1fr); } }
/* v2.6: the original teal-and-red logo on white. The narrow white margin is
   part of the trimmed image itself, so the container adds no padding. */
.footer-logo { display: inline-block; margin-bottom: 1.1rem; line-height: 0; background: #fff; border-radius: var(--radius); overflow: hidden; }
.footer-logo img { height: 126px; width: auto; max-width: 100%; display: block; }
@media (max-width: 560px) { .footer-logo img { height: 108px; } }
.site-footer h2 { color: #fff; font-size: .84rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .9rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: #B9D2D2; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-rics { background: #fff; border-radius: 8px; padding: .8rem 1rem; display: inline-block; margin-bottom: 1rem; }
.footer-rics img { width: 148px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.35rem; padding-bottom: 2rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .87rem; color: #8FB4B4;
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.footer-bottom li { margin: 0; }
.footer-note { font-size: .87rem; color: #8FB4B4; line-height: 1.6; }

/* --- CTA band ------------------------------------------------------------ */
.cta-band { background: var(--teal-800); color: #fff; }
.cta-band .wrap { padding-top: clamp(2.5rem, 5vw, 3.75rem); padding-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.cta-band h2 { color: #fff; margin-bottom: .5rem; }
.cta-band p { color: #C4DEDE; max-width: 58ch; }
.cta-band .btn-row { margin-top: 1.5rem; }

/* --- Utility ------------------------------------------------------------- */
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; }
.small { font-size: .9rem; }
.muted { color: var(--ink-mute); }
.tag {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: .25rem .6rem; border-radius: 4px;
  background: var(--red-50); color: var(--red-700); margin-bottom: .8rem;
}
@media print {
  .site-header, .site-footer, .cta-band, .hero-photo { display: none !important; }
  body { color: #000; }
}

/* --- Surveys & Valuations: colour-coded services (v2.3) -------------------
   Each service keeps one understated colour, used for the card border, a very
   light tint, the icon and the matching comparison column. Text stays dark. */
.card--l2, .compare-col--l2 { --svc: #2E7D4F; --svc-line: #9CCBAE; --svc-tint: #F4FAF6; }
.card--l3, .compare-col--l3 { --svc: #2F5F9E; --svc-line: #A7BFE0; --svc-tint: #F3F7FC; }
.card--val, .compare-col--val { --svc: #6A4C98; --svc-line: #C3B2DD; --svc-tint: #F8F5FC; }
.card--svc { border: 2px solid var(--svc-line); background: var(--svc-tint); }
.card--svc .card-icon { color: var(--svc); }
.card--svc h3 { color: var(--ink); }
.card--svc p { color: #3A4B4D; }
a.card--svc:hover { border-color: var(--svc); }
.which-survey { margin-top: clamp(3rem, 6vw, 4.5rem); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.compare-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.5rem); margin-top: 1.75rem; }
.compare-col {
  background: var(--svc-tint); border: 1px solid var(--svc-line); border-top: 5px solid var(--svc);
  border-radius: var(--radius); padding: clamp(1.2rem, 2vw, 1.6rem);
}
.compare-col h3 { font-size: 1.12rem; margin-bottom: .55rem; color: var(--ink); }
.compare-col p { margin: 0; color: #3A4B4D; }
@media (max-width: 900px) { .compare-cols { grid-template-columns: minmax(0, 1fr); } }
.still-unsure { margin-top: clamp(1.75rem, 3vw, 2.25rem); max-width: 62ch; }
.still-unsure h3 { margin-bottom: .45rem; }

/* --- v2.5 --------------------------------------------------------------- */
/* Panel headings that are section headings keep the panel's h3 size. */
.panel .panel-h2 { font-size: 1.1rem; margin-bottom: .45rem; }
.related-link h3 { margin-bottom: .35rem; font-size: 1.1rem; }
/* Level 2: the alternative report example, deliberately set apart from our
   own extracts: grey panel, dashed border, a plain label, no service colour. */
.compare-alt {
  margin-top: clamp(2.75rem, 5vw, 4rem); display: grid; gap: clamp(1.5rem, 3.5vw, 3rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center;
  background: #F4F5F5; border: 1px dashed #A9B4B5; border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2.25rem); scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.compare-alt-text h2 { margin-bottom: .6rem; }
.compare-alt-text p { color: var(--ink-soft); }
.compare-alt-card { display: flex; flex-direction: column; align-items: center; }
.compare-alt-card .extracts { justify-content: center; }
.compare-alt-tag {
  font-size: .8rem; font-weight: 650; letter-spacing: .04em; color: #56666A;
  background: #fff; border: 1px solid #C8D0D1; border-radius: 999px; padding: .3rem .8rem;
  margin: 0 0 1.25rem; text-align: center;
}
@media (max-width: 860px) { .compare-alt { grid-template-columns: minmax(0, 1fr); } }

/* --- v2.6 --------------------------------------------------------------- */
/* Section H and Section I examples on the service pages. */
.hi-examples { margin-top: clamp(2.75rem, 5vw, 4rem); display: grid; gap: clamp(2rem, 4vw, 3rem); }
.hi-block { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; }
.hi-block h2 { margin-bottom: .6rem; }
.hi-block .extracts { justify-content: center; }
@media (max-width: 860px) { .hi-block { grid-template-columns: minmax(0, 1fr); } }
/* Comparison table on the Surveys & Valuations page. */
.cmp-table-wrap { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.cmp-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.cmp-table th, .cmp-table td { padding: .75rem .9rem; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.cmp-table tbody tr:last-child td, .cmp-table tbody tr:last-child th { border-bottom: 0; }
.cmp-table thead th { font-size: .95rem; line-height: 1.3; background: #fff; border-bottom-width: 0; }
.cmp-table thead th small { display: block; font-weight: 500; font-size: .82rem; color: var(--ink-soft); margin-top: .15rem; }
.cmp-table th[scope="row"] { text-align: left; font-weight: 400; color: var(--ink); min-width: 15rem; }
.cmp-table thead th:first-child { text-align: left; }
.cmp-table .col-l2 { background: #F4FAF6; }
.cmp-table .col-l3 { background: #F3F7FC; }
.cmp-table thead .col-l2 { border-top: 5px solid #2E7D4F; }
.cmp-table thead .col-l3 { border-top: 5px solid #2F5F9E; }
.cmp-table .yes { color: #2E7D4F; font-size: 1.15rem; font-weight: 700; }
.cmp-table .col-l3 .yes { color: #2F5F9E; }
.cmp-table .no { display: inline-block; width: 14px; height: 2px; background: #A9B4B5; vertical-align: middle; }
.cmp-table tbody tr:nth-child(even) th[scope="row"] { background: #FAFBFB; }
.cmp-note { font-size: .93rem; color: var(--ink-soft); margin-top: .85rem; }
.cmp-hint { display: none; font-size: .85rem; color: var(--ink-mute); margin: 0 0 .5rem; }
@media (max-width: 760px) {
  .cmp-hint { display: block; }
  .cmp-table { min-width: 0; width: auto; table-layout: fixed; }
  .cmp-table th, .cmp-table td { padding: .65rem .6rem; font-size: .95rem; }
  .cmp-table th[scope="row"], .cmp-table thead th:first-child { position: sticky; left: 0; background: #fff; z-index: 1; width: 10.5rem; min-width: 10.5rem; box-shadow: 1px 0 0 var(--line); }
  .cmp-table thead th:not(:first-child), .cmp-table td { width: 6.75rem; min-width: 6.75rem; }
  .cmp-table tbody tr:nth-child(even) th[scope="row"] { background: #FAFBFB; }
}
.mortgage-panel { margin-top: clamp(2rem, 4vw, 2.75rem); }
.valuation-types { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.valuation-types li { margin: 0; }
.valuation-types strong { display: block; color: var(--ink); }
.valuation-types span { color: var(--ink-soft); }

/* --- v2.7 --------------------------------------------------------------- */
.hi-block[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.page-head-note { color: var(--ink-soft); font-size: .98rem; margin: .9rem 0 1.25rem; max-width: 62ch; }
.section--compact { padding-top: clamp(2.5rem, 5vw, 3.75rem); padding-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.listed-cards .card { padding: clamp(1.35rem, 2.2vw, 1.75rem); }
.listed-cards .card .card-title { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); margin-bottom: .45rem; }

/* --- v2.8 --------------------------------------------------------------- */
/* Areas covered on About Us: a grid, so each heading stays with its list. */
.areas-section { scroll-margin-top: calc(var(--header-h) + 1rem); }
.area-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem clamp(1.25rem, 3vw, 2.5rem); margin-top: 1.5rem; }
.area-group h3 { font-size: 1.05rem; margin-bottom: .55rem; }
.area-group ul { list-style: none; padding: 0; margin: 0; }
.area-group li { color: var(--ink-soft); margin-bottom: .3rem; font-size: .98rem; }
@media (max-width: 960px) { .area-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .area-groups { grid-template-columns: minmax(0, 1fr); } }
/* Contact page: compact, contact details and quotation panel side by side. */
.contact-grid { align-items: start; }
.contact-next { font-size: 1.02rem; margin: 1.5rem 0 .4rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }

/* --- v2.9 ---------------------------------------------------------------- */
/* v3.2 forms */
.form-title { font-size: 1.35rem; margin-bottom: .4rem; }
h3.form-step { font-family: inherit; line-height: 1.4; }
.ms { border: 0; padding: 0; margin: 0 0 1.15rem; min-width: 0; }
.ms legend { font-weight: 650; font-size: .95rem; color: var(--teal-900); margin-bottom: .35rem; padding: 0; }
.ms .hint { margin-bottom: .5rem; }
.ms-toggle { display: none; }
.ms--enhanced .ms-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%; gap: .75rem;
  font: inherit; font-size: 1rem; color: var(--ink); text-align: left; cursor: pointer;
  padding: .72rem .85rem; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; min-height: 48px;
}
.ms--enhanced .ms-toggle:hover { border-color: var(--teal-500); }
.ms-caret { width: 12px; height: 8px; color: var(--teal-700); flex: none; transition: transform .15s ease; }
.ms-toggle[aria-expanded="true"] .ms-caret { transform: rotate(180deg); }
.ms-panel { border: 1.5px solid var(--line); border-radius: 8px; padding: .4rem; background: #fff; }
.ms--enhanced .ms-panel { margin-top: .4rem; box-shadow: 0 8px 24px rgba(13,50,53,.12); }
.ms-panel[hidden] { display: none; }
.ms-list { list-style: none; margin: 0; padding: 0; }
.ms-list li { margin: 0; }
.field .ms-option { display: flex; align-items: flex-start; gap: .7rem; padding: .6rem .6rem; border-radius: 6px; cursor: pointer; font-weight: 400; font-size: 1rem; color: var(--ink); margin: 0; }
.field .ms-option:hover { background: #F4F8F8; }
.field .ms-option input, .field .radio-option input, .field .accept-row input { width: 20px; height: 20px; min-width: 20px; margin: .1rem 0 0; accent-color: var(--teal-700); padding: 0; }
.ms-done { margin: .4rem .4rem .3rem; }
.ms-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .55rem; }
.ms-chips:empty { display: none; }
.ms-chip {
  display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-size: .88rem; font-weight: 600;
  color: var(--teal-900); background: #E8F2F2; border: 1px solid #BFD8D8; border-radius: 999px;
  padding: .35rem .7rem; cursor: pointer; text-align: left; min-height: 36px;
}
.ms-chip:hover { background: #D8EAEA; }
.ms-chip svg { width: 10px; height: 10px; flex: none; }
.field.has-error .ms-toggle, .field.has-error .ms-panel { border-color: var(--red-700); }
.radio-group { border: 0; padding: 0; margin: 0 0 1.15rem; min-width: 0; }
.radio-group legend { font-weight: 650; font-size: .95rem; color: var(--teal-900); margin-bottom: .35rem; padding: 0; }
.radio-option { display: flex; align-items: flex-start; gap: .7rem; padding: .5rem .2rem; }
.field .radio-option label { font-weight: 400; font-size: 1rem; color: var(--ink); margin: 0; cursor: pointer; }
.terms-links { background: #F4F8F8; border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.terms-link-list { list-style: none; margin: 0 0 .6rem; padding: 0; }
.terms-link-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin: 0 0 .45rem; }
.pdf-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; color: var(--teal-700); }
.pdf-icon { width: 26px; height: 26px; color: var(--red-700); flex: none; }
.terms-version { font-size: .88rem; color: var(--ink-mute); }
.terms-applicable { margin: 0; font-size: .92rem; color: var(--teal-900); font-weight: 600; }
.accept-row { display: flex; align-items: flex-start; gap: .75rem; }
.field .accept-row label { font-weight: 650; margin: 0; cursor: pointer; }
.field.has-error .accept-row input { outline: 2px solid var(--red-700); outline-offset: 2px; }
.contact-quote { padding-top: 0; }
.terms-doc-title { font-size: 1.35rem; margin-bottom: .35rem; }
.terms-doc-meta { color: var(--ink-mute); font-size: .95rem; margin-bottom: 1.1rem; }
.terms-doc .btn-row { margin-top: 0; }
h2.form-step { font-family: inherit; line-height: 1.4; }
.form-guidance { color: var(--ink-mute); font-size: .95rem; margin-bottom: 1.4rem; }
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-card { position: relative; }
.turnstile-slot { margin-top: 1.2rem; }
.turnstile-slot[hidden] { display: none; }
.form-status:focus { outline: none; }
.form-status:focus-visible { outline: 3px solid var(--red-600); outline-offset: 3px; }
.form-status--ok { background: #EEF7F1; border-color: #BFDCC9; border-left-color: #2E7D4F; }
.form-status h3 { margin-bottom: .4rem; }
.btn[disabled] { opacity: .7; cursor: progress; }
aside .arrow-link { overflow-wrap: anywhere; }
.contact-list .tel-lines a { display: block; }
.footer-company { flex-basis: 100%; margin: 0; font-size: .82rem; line-height: 1.6; color: #8FB4B4; max-width: 90ch; }
.policy-date { color: #C4DEDE; font-size: .95rem; margin: .8rem 0 0; }
.page-head .policy-date { color: var(--ink-mute); }
.policy h2 { margin-top: 2.2rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.policy h3 { font-size: 1.05rem; margin-top: 1.3rem; margin-bottom: .4rem; }
.policy-toc { margin-bottom: .5rem; }
.policy-toc ol { padding-left: 1.2em; columns: 2; column-gap: 2rem; }
@media (max-width: 560px) { .policy-toc ol { columns: 1; } }
.policy-table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; font-size: .96rem; }
.policy-table th, .policy-table td { text-align: left; vertical-align: top; padding: .7rem .75rem; border-bottom: 1px solid var(--line); }
.policy-table th { color: var(--teal-900); background: #F4F8F8; }
@media (max-width: 640px) {
  .policy-table thead { position: absolute; left: -10000px; }
  .policy-table tr { display: block; border-bottom: 1px solid var(--line); padding: .5rem 0; }
  .policy-table td { display: block; border: 0; padding: .3rem 0; }
  .policy-table td:first-child { font-weight: 650; color: var(--teal-900); }
  .policy-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 650; color: var(--teal-900); }
}

/* v3.2 nine-item desktop bar */
@media (min-width: 1250px) {
  .site-header .wrap { max-width: 1260px; }
  .nav a, .nav button.has-sub { padding-left: .42rem; padding-right: .42rem; font-size: .92rem; }
  .nav a[aria-current="page"]::after { left: .42rem; right: .42rem; }
  .nav-split > a { padding-right: .25rem; }
  .nav-split > a[aria-current="page"]::after { left: .42rem; right: .25rem; }
}