@charset "utf-8";

/* ---------------------------------------------------------------- fonts ---
   Declared here rather than in a separate fonts.css pulled in with @import.
   That file had no cache-busting on its URL, so a font change never reached
   anyone with a warm cache — and it cost an extra blocking request. site.css
   is already hashed per build, so these ride along with it. */
/* Marcellus (display), Rethink Sans (body) and Sacramento (script eyebrows) —
   the three faces the Marina reference is built on. Latin subsets only. */
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/marcellus-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Rethink Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/rethink-sans-400-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Sacramento';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/sacramento-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* The client's IcoMoon roofing set. Loaded with font-display:block so a
   glyph never flashes as a tofu box before the font arrives. */
@font-face{font-family:'Roofing Icons';font-style:normal;font-weight:400;font-display:block;src:url('/assets/fonts/roofing-icons.woff') format('woff');}


/* ==========================================================================
   Coastal Seal Roofing Limited

   Built to the Marina reference supplied in the brief: a deep navy and cyan
   marine palette, a classical serif display over a clean grotesque, script
   eyebrows above every section heading, wave-cut section edges and generous
   pale bands.

   Departure from the reference, at the client's request: the cold blue-grey
   grounds are replaced by a warm cream and sand family, and a brass accent
   carries it through the details. Navy and cyan stay; everything they sit on
   is warm.
   ========================================================================== */

:root {
  /* --- marine, taken from the client's logo ----------------------------- */
  /* Sampled directly out of the supplied artwork, so the site and the logo
     are the same two colours rather than near-misses of each other. */
  --deep:     #041B36;   /* darkest navy — footer and dark bands           */
  --navy:     #062548;   /* the logo navy — headings and dark bands        */
  --harbour:  #0E3A6B;   /* raised surfaces on dark                        */
  --surf:     #185FAF;   /* the logo blue — accent, links and fills        */
  --tide:     #185FAF;   /* same blue; it clears AA on cream unaided       */
  --surf-lt:  #7FB4E8;   /* the wave blue, for dark grounds                */

  /* --- cream and sand (the client's direction) -------------------------- */
  --cream:    #F7F1E6;   /* page ground                                    */
  --shell:    #EFE4D2;   /* alternating band, soft panels                  */
  --sand:     #DCC8A8;   /* rules and card borders                         */
  --brass:    #875D24;   /* warm accent, ornaments, secondary buttons      */
  --brass-lt: #A5722C;   /* lighter brass — decorative rules only          */

  /* --- neutrals --------------------------------------------------------- */
  --ink:      #0D2035;   /* body copy                                      */
  --stone:    #5E616A;   /* muted copy — clears AA on cream, shell and glass */
  --white:    #FFFFFF;

  /* --- functional only, never decorative -------------------------------- */
  --ok:    #1F6B4F;
  --warn:  #8A5610;
  --alert: #8F2F22;
  --ok-bg:    #E6F1EB;
  --warn-bg:  #F7EBD8;
  --alert-bg: #F7E6E2;

  /* --- type ------------------------------------------------------------- */
  --display: 'Marcellus', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, Helvetica, Arial, sans-serif;
  --script: 'Sacramento', 'Snell Roundhand', 'Brush Script MT', cursive;

  --step--1: clamp(.8125rem, .79rem + .11vw, .875rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.07rem + .27vw, 1.3125rem);
  --step-2:  clamp(1.375rem, 1.26rem + .55vw, 1.8125rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.2vw, 2.75rem);
  --step-4:  clamp(2.125rem, 1.7rem + 2.1vw, 3.75rem);

  /* --- space ------------------------------------------------------------ */
  --gutter: clamp(1.25rem, .9rem + 1.6vw, 2.5rem);
  --band:   clamp(3.75rem, 2.5rem + 5vw, 7rem);
  --wrap: 1500px;
  --wrap-narrow: 820px;

  --radius: 4px;
  --radius-lg: 10px;
  --shadow:    0 2px 6px rgba(4,27,54,.06), 0 14px 38px rgba(4,27,54,.10);
  --shadow-lg: 0 6px 12px rgba(4,27,54,.08), 0 30px 64px rgba(4,27,54,.16);
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* The pitch-and-wave ornament: a roof line over the sea. Used under every
     centred section heading, in place of the reference's anchor motif. */
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22'%3E%3Cpath d='M20 12 32 3l12 9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 17c5 0 5-3.4 10-3.4s5 3.4 10 3.4 5-3.4 10-3.4 5 3.4 10 3.4 5-3.4 10-3.4 5 3.4 10 3.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  /* One big asymmetric sweep, cresting left of centre and running down to
     the right — the large divider the reference uses between its major
     sections. The mirrored variant alternates the direction so two curved
     edges on one page do not read as a repeat. */
  --curve: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 160V96C120 40 300 8 520 26c300 24 560 102 920 86v48z' fill='%23fff'/%3E%3C/svg%3E");
  --curve-flip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M1440 160V96c-120-56-300-88-520-70-300 24-560 102-920 86v48z' fill='%23fff'/%3E%3C/svg%3E");

  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 9'%3E%3Cpath d='M0 6c3.5 0 3.5-3 7-3s3.5 3 7 3 3.5-3 7-3 3.5 3 7 3v2c-3.5 0-3.5-3-7-3s-3.5 3-7 3-3.5-3-7-3-3.5 3-7 3z' fill='%23000'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  /* Headings run at 1.1 as requested. Body copy is tightened to 1.6 rather
     than 1.1 — at this measure 1.1 closes the lines up to the point where the
     eye loses its place returning to the left margin, and it reads as an
     error rather than a style. 1.6 is noticeably tighter than the 1.7 it
     replaces without costing legibility. */
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--navy);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); line-height: 1.18; }
p  { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--tide); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--surf); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--surf); color: var(--white); padding: .8rem 1.25rem; font-weight: 700;
}
.skip:focus { left: 0; }

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

/* --------------------------------------------------------------- shell --- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); }
.band { padding-block: var(--band); position: relative; }
.band--tight { padding-block: calc(var(--band) * .62); }

.band--dark  { background: var(--navy); color: #C8DBE3; }
.band--night { background: var(--deep); color: #BCD2DC; }
.band--haze  { background: var(--shell); }

.band--dark h2, .band--dark h3, .band--dark h4,
.band--night h2, .band--night h3, .band--night h4,
.cta h2, .cta h3, .cta h4,
.photoband h2, .photoband h3, .photoband h4,
.panel--dark h2, .panel--dark h3, .panel--dark h4 { color: var(--white); }
.band--dark a:not(.btn), .band--night a:not(.btn), .pagehead a:not(.btn),
.cta a:not(.btn):not(.cta__phone), .photoband a:not(.btn) { color: var(--surf-lt); }
.panel--dark .result__sub, .cta .result__sub { color: var(--white); }

/* A light card can sit inside a dark band, so it restates its own colours. */
.svc, .area-card, .panel:not(.panel--dark), .result__head, .result__body,
.tool__step, .opt, .map-facade, .note { color: var(--ink); }
.svc h2, .svc h3, .svc h4,
.area-card h2, .area-card h3, .area-card h4,
.panel:not(.panel--dark) h2, .panel:not(.panel--dark) h3, .panel:not(.panel--dark) h4,
.result__head h3, .result__body h3, .tool__step > legend, .map-facade strong {
  color: var(--navy);
}
.panel:not(.panel--dark) .result__sub, .tool__step .result__sub { color: var(--navy); }

/* Faint diagonal weave on the dark bands, echoing the reference's lattice. */
.slate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.028) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.028) 0 1px, transparent 1px 22px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.2));
}
.slate > * { position: relative; z-index: 1; }

/* ------------------------------------------------------- section labels --- */
/* The reference sets a script eyebrow above every heading. It is the single
   strongest signal of that design, so it carries across the whole site. */
.label {
  display: block;
  font-family: var(--script);
  font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--surf);
  margin: 0 0 .3rem;
}
.band--dark .label, .band--night .label, .pagehead .label,
.cta .label, .panel--dark .label { color: var(--surf-lt); }

.lede { font-size: var(--step-1); line-height: 1.45; color: var(--stone); max-width: 62ch; }
.band--dark .lede, .band--night .lede { color: #B4CBD6; }
.head-block { max-width: 64ch; }
.head-block--center { margin-inline: auto; text-align: center; }

/* The pitch-and-wave ornament that sat under every centred heading has been
   removed at the client's request; centred headings now run straight into
   their lede. The --ornament token is kept in :root in case it is wanted
   back, and left-aligned headings keep their short brass rule below.
   With no `content` here no pseudo-element is generated, so the ornament's
   draw-in animation further down is inert rather than broken. */

.head-block:not(.head-block--center) > h2::after {
  content: ""; display: block; width: 56px; height: 3px; margin-top: .85rem;
  background: var(--brass); border-radius: 2px;
}
.band--dark .head-block:not(.head-block--center) > h2::after,
.band--night .head-block:not(.head-block--center) > h2::after,
.cta .head-block:not(.head-block--center) > h2::after { background: var(--surf); }

/* A giant ghosted word behind a section, as the reference frames its
   destinations carousel. Decorative only, hidden from assistive tech. */
.ghost {
  position: absolute; left: 0; right: 0; text-align: center;
  font-family: var(--display); font-size: clamp(4.25rem, 1.5rem + 22vw, 18rem);
  line-height: .9; letter-spacing: .04em; text-transform: uppercase;
  color: var(--navy); opacity: .07; pointer-events: none; user-select: none;
  white-space: nowrap;
}
.band--ghosted { padding-block: calc(var(--band) + clamp(1.5rem, 4vw, 4.5rem)); }
/* Pushed past the band's own edges so the words clip into the rows above and
   below (the section keeps overflow:hidden, so they cut cleanly at the seam). */
.ghost--top { top: -0.24em; }
.ghost--bottom { bottom: -0.22em; }
.band--dark .ghost, .band--night .ghost { color: var(--white); opacity: .05; }

/* ------------------------------------------------------- curved divider --- */
/* Masking the band itself, rather than laying a shape over it, means anything
   inside is cut by the curve too — including the photograph in .photoband,
   which is the whole point of the device in the reference. */
.curve-top {
  --curve-h: clamp(54px, 8.5vw, 150px);
  position: relative;
  -webkit-mask-image: var(--curve), linear-gradient(#000, #000);
  mask-image: var(--curve), linear-gradient(#000, #000);
  /* The extra pixel closes the hairline seam between the two mask layers. */
  -webkit-mask-size: 100% var(--curve-h), 100% calc(100% - var(--curve-h) + 1px);
  mask-size: 100% var(--curve-h), 100% calc(100% - var(--curve-h) + 1px);
  -webkit-mask-position: top center, bottom center;
  mask-position: top center, bottom center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  padding-top: calc(var(--band) + var(--curve-h) * .45);
}
/* The counterpart to .curve-top: rather than cutting this band, it lays the
   NEXT section's colour over the bottom of this one so the two blend. Used
   under the hero, where the section below is the page ground and masking
   would have nothing to reveal.

   It belongs to the section BELOW and reaches up over the one above. Putting
   it inside the hero — as a masked pseudo-element or as a plain SVG, it made
   no difference — promoted the hero into a compositing context that dropped
   its background photograph entirely, leaving flat navy. Owned by the next
   section, it paints over the hero without touching how the hero composites. */
.curve-up { position: relative; }
.curve-into {
  position: absolute; left: 0; right: 0; z-index: 3;
  top: calc(1px - var(--curve-h, clamp(54px, 8.5vw, 150px)));
  width: 100%; height: var(--curve-h, clamp(54px, 8.5vw, 150px));
  color: var(--curve-into-colour, var(--cream));
  pointer-events: none; display: block;
}

.curve-top--flip {
  -webkit-mask-image: var(--curve-flip), linear-gradient(#000, #000);
  mask-image: var(--curve-flip), linear-gradient(#000, #000);
}

/* The pale highlight that rides inside the curve. Decorative; the markup
   marks it aria-hidden. */
.swoosh {
  position: absolute; top: 0; left: 0; pointer-events: none;
  width: min(74%, 980px); height: clamp(54px, 8.5vw, 150px);
  color: var(--white); opacity: .14;
}
.curve-top--flip .swoosh { left: auto; right: 0; transform: scaleX(-1); }
.swoosh svg { display: block; width: 100%; height: 100%; }
@media (max-width: 640px) { .swoosh { display: none; } }

/* ------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.7rem;
  font-family: var(--body);
  font-size: var(--step-0); font-weight: 700; line-height: 1.2;
  /* Fully rounded pill. */
  border: 2px solid transparent; border-radius: 100px;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn i { font-size: .95em; }

/* The filled variants carry only their label colour here; the elevated
   treatment further down paints them from the four --btn-* values each one
   sets. These rules used to set `background`, and because that shorthand
   resets background-image the gradient collapsed to a flat fill the moment
   you hovered. */
.btn--primary, .btn--navy, .btn--brass,
.btn--primary:hover, .btn--navy:hover, .btn--brass:hover { color: var(--white); }

.btn--ghost { border-color: var(--sand); color: var(--navy); background: transparent; }
.btn--ghost:hover { border-color: var(--navy); background: var(--navy); color: var(--white); }

.btn--ghost-light { border-color: rgba(255,255,255,.38); color: var(--white); background: transparent; }
.btn--ghost-light:hover { border-color: var(--white); background: var(--white); color: var(--navy); }

.btn--lg { padding: 1.1rem 2.1rem; font-size: var(--step-1); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 520px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* ------------------------------------------------------------- header --- */
.topbar { background: var(--deep); color: #96B2BF; font-size: var(--step--1); line-height: 1.4; }
.topbar__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 42px; padding-block: .45rem; flex-wrap: wrap;
}
.topbar__motto {
  display: flex; align-items: center; gap: .55rem; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 700; font-size: .6875rem; margin: 0;
}
.topbar__motto i { color: var(--brass); }
.topbar__links { display: flex; align-items: center; gap: 1.35rem; flex-wrap: wrap; }
.topbar a { color: #C4DAE4; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.topbar a:hover { color: var(--white); }
.topbar a i, .topbar span i { color: var(--surf); }
@media (max-width: 700px) { .topbar__motto { display: none; } .topbar__in { justify-content: center; } }
@media (max-width: 560px) { .topbar__links { gap: 1rem; } .topbar__links span { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid var(--sand);
  isolation: isolate;
  transition: box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow); }
.site-header__in { transition: min-height .3s var(--ease); }
.site-header.is-stuck .site-header__in { min-height: 78px; }
.brand__logo { transition: height .3s var(--ease); }
.site-header.is-stuck .brand__logo { height: clamp(46px, 3.6vw, 58px); }
@media (prefers-reduced-motion: reduce) {
  .site-header__in, .brand__logo { transition: none; }
}
.site-header__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 106px; }

/* The supplied logo is a stacked lockup, so the header sizes it by height and
   lets the width follow. The footer and drawer get the reversed artwork. */
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand__logo { display: block; width: auto; height: clamp(56px, 4.6vw, 74px); }
.brand--dark .brand__logo { height: clamp(66px, 5vw, 84px); }
@media (max-width: 1140px) { .site-header__in { min-height: 84px; } }
@media (max-width: 480px) { .brand__logo { height: 48px; } }

/* ---------------------------------------------------------------- nav --- */
/* Each item carries a small mark above it, as the reference does. */
.nav { display: flex; align-items: center; gap: .15rem; }
.nav > ul { display: flex; list-style: none; margin: 0; padding: 0; gap: .15rem; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .55rem .9rem; border-radius: var(--radius);
  font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); text-decoration: none; white-space: nowrap;
  transition: color .18s var(--ease);
}
.nav__link::before {
  content: ""; width: 16px; height: 7px; background: var(--sand);
  -webkit-mask: var(--wave-mask) center / 16px 7px no-repeat;
  mask: var(--wave-mask) center / 16px 7px no-repeat;
  transition: background-color .18s var(--ease);
}
.nav__link:hover { color: var(--surf); }
.nav__link:hover::before { background: var(--surf); }
.nav__link .nav__chev { font-size: .55em; opacity: .65; margin-left: .3rem; transition: transform .2s var(--ease); }
.nav__item[data-open="true"] .nav__chev { transform: rotate(180deg); }
.nav__link[aria-current="page"], .nav__link.is-active { color: var(--surf); }
.nav__link[aria-current="page"]::before, .nav__link.is-active::before { background: var(--surf); }

.nav__panel {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -6px);
  min-width: 280px; background: var(--white);
  border: 1px solid var(--sand); border-top: 3px solid var(--surf);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: .5rem; margin: 0; list-style: none;
  opacity: 0; visibility: hidden;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__item[data-open="true"] .nav__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav__panel a {
  display: block; padding: .6rem .75rem; border-radius: 2px;
  font-size: .9375rem; font-weight: 600; color: var(--navy); text-decoration: none;
}
.nav__panel a:hover { background: var(--shell); color: var(--tide); }
.nav__panel a small { display: block; font-weight: 400; font-size: .8125rem; color: var(--stone); margin-top: .1rem; }

.header-cta { display: flex; align-items: center; gap: .75rem; flex: none; }
.header-phone { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.header-phone__icon {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--shell); color: var(--brass); font-size: 1rem;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.header-phone:hover .header-phone__icon { background: var(--brass); color: var(--white); }
.header-phone__text { display: flex; flex-direction: column; line-height: 1.15; }
.header-phone__text span { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); font-weight: 700; }
.header-phone__text strong { font-family: var(--display); font-size: 1.0625rem; color: var(--navy); font-weight: 400; }

.burger {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; background: var(--navy); color: var(--white);
  border: 0; border-radius: var(--radius); cursor: pointer; font-size: 1.15rem;
}
@media (max-width: 1140px) {
  .nav, .header-cta .btn { display: none; }
  .burger { display: inline-flex; }
  .site-header__in { min-height: 72px; }
}
@media (max-width: 520px) { .header-phone__text { display: none; } }

/* ------------------------------------------------------- mobile drawer --- */
.drawer { position: fixed; inset: 0; z-index: 200; display: none; }
.drawer[data-open="true"] { display: block; }
.drawer__veil { position: absolute; inset: 0; background: rgba(4,27,54,.65); animation: fade .25s var(--ease); }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 88vw);
  background: var(--navy); color: var(--white); overflow-y: auto;
  padding: 1.25rem 1.35rem 2.5rem; animation: slide .28s var(--ease);
  display: flex; flex-direction: column; gap: 1rem;
}
@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .drawer__veil, .drawer__panel { animation: none; } }
.drawer__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.drawer__close {
  width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.3);
  background: transparent; color: var(--white); border-radius: var(--radius); cursor: pointer; font-size: 1.1rem;
}
.drawer nav ul { list-style: none; margin: 0; padding: 0; }
.drawer nav > ul > li { border-bottom: 1px solid rgba(255,255,255,.13); }
.drawer nav a {
  display: block; padding: .95rem .25rem; color: var(--white); text-decoration: none;
  font-family: var(--display); font-size: 1.125rem;
}
.drawer nav a[aria-current="page"] { color: var(--surf-lt); }
.drawer nav ul ul { padding: 0 0 .6rem .9rem; border-left: 2px solid rgba(255,255,255,.2); margin-left: .25rem; }
.drawer nav ul ul a { font-family: var(--body); font-weight: 500; font-size: .9375rem; padding: .5rem .25rem; color: #B7CEDA; }
.drawer__foot { margin-top: auto; display: grid; gap: .6rem; }

/* ----------------------------------------------------------------- hero --- */
.hero {
  position: relative; overflow: hidden;
  background: var(--navy);          /* shows only until the photograph loads */
  --curve-h: clamp(54px, 8.5vw, 150px);
  padding-block: clamp(3rem, 1.8rem + 5vw, 6rem)
                 calc(clamp(2rem, 1rem + 4vw, 4rem) + var(--curve-h));
  min-height: clamp(520px, 62vh, 760px);
  display: grid; align-items: center;
}
.hero__img { position: absolute; inset: 0; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
/* Weighted to the left, where the card sits, so the cliff and the sea on the
   right stay bright. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(96deg, rgba(4,27,54,.52) 0%, rgba(4,27,54,.30) 42%,
                              rgba(4,27,54,.10) 72%, rgba(4,27,54,.04) 100%);
}
.hero__grid {
  position: relative; z-index: 2;
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; } }

/* The reference floats an off-white card over its hero image. */
.hero__card {
  /* Frosted, but not thin: the muted body copy has to clear AA against the
     photograph showing through, and below about 86% white it stops doing so.
     The glass character comes from the blur, the saturation lift and the top
     highlight rather than from turning the panel transparent. */
  /* Light cream rather than white, tying the hero to the page ground. Kept at
     .93 so the muted body copy still clears AA over the photograph. */
  background: rgba(247,241,230,.93);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), var(--shadow);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}
.hero h1 { font-size: var(--step-4); margin-bottom: .4em; }
.hero__lede { font-size: var(--step-1); color: var(--stone); max-width: 46ch; margin-bottom: 1.75rem; }

.hero__quick {
  margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--sand);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.1rem 1.5rem;
}
.hero__quick div { display: flex; gap: .7rem; align-items: flex-start; }
.hero__quick i { color: var(--brass); font-size: 1rem; margin-top: .25rem; flex: none; }
.hero__quick strong { display: block; font-size: .9375rem; color: var(--navy); }
.hero__quick span { font-size: .8438rem; color: var(--stone); line-height: 1.5; }
.hero__quick a { color: var(--navy); text-decoration: none; }
.hero__quick a:hover { color: var(--surf); text-decoration: underline; }

/* ------------------------------------------------------- the house render --- */
.stage { position: relative; display: block; }
.stage__house img { width: 100%; height: auto; }
/* A soft contact shadow, so the render sits on the page rather than floating. */
.stage__shadow {
  position: absolute; left: 50%; bottom: clamp(-6px, -1vw, 0px);
  width: 70%; height: clamp(18px, 3vw, 40px);
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(4,27,54,.34), rgba(4,27,54,0) 78%);
  pointer-events: none;
}

/* The stage and its labels share a positioning context. The list itself is
   transparent to the pointer so the house behind it still drags; only the
   dots take events. */
.stage-wrap { position: relative; }
.parts { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.part { position: absolute; left: var(--x); top: var(--y); }

.part__dot {
  pointer-events: auto; position: relative; z-index: 2;
  width: 26px; height: 26px; padding: 0; margin: -13px 0 0 -13px;
  border: 2px solid var(--white); border-radius: 50%;
  background: var(--surf); cursor: pointer;
  box-shadow: 0 2px 8px rgba(4,27,54,.35);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.part__dot::after {                       /* the pulse ring */
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--surf); opacity: .55;
  animation: partPulse 2.6s var(--ease) infinite;
}
@keyframes partPulse {
  0%   { transform: scale(.72); opacity: .6; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.part__dot:hover, .part__dot:focus-visible { transform: scale(1.22); background: var(--brass); }
.part__dot[aria-expanded="true"] { background: var(--brass); transform: scale(1.22); }
.part__dot[aria-expanded="true"]::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .part__dot::after { animation: none; } }

.part__tip {
  pointer-events: none; position: absolute; top: 50%; z-index: 3;
  width: max-content; max-width: min(17rem, 46vw);
  transform: translateY(-50%) scale(.96);
  display: grid; gap: .3rem;
  padding: .85rem 1rem;
  background: var(--white); border: 1px solid var(--sand);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.part--right .part__tip { left: 22px; }
.part--left  .part__tip { right: 22px; }
.part__tip strong { font-family: var(--display); font-size: 1.0625rem; color: var(--navy); line-height: 1.2; }
.part__tip > span { font-size: .8438rem; line-height: 1.5; color: var(--stone); }
.part__tip a {
  pointer-events: auto; justify-self: start; margin-top: .2rem;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--surf); text-decoration: none;
}
.part__tip a:hover { text-decoration: underline; }

.part:hover .part__tip,
.part:focus-within .part__tip,
.part__dot[aria-expanded="true"] + .part__tip {
  opacity: 1; visibility: visible; transform: translateY(-50%) scale(1);
}

/* On a phone the render is only ~330px across, so a 220px tooltip floating
   over it covers the very roof it is describing. Below 700px the hotspots
   become a plain stacked list underneath instead: same markup, same content,
   no overlap, and nothing to aim at with a thumb. */
@media (max-width: 700px) {
  .parts {
    position: static; pointer-events: auto;
    display: grid; gap: .6rem; margin-top: 1.5rem;
  }
  .part { position: static; }
  .part__dot { display: none; }
  .part__tip {
    position: static; width: auto; max-width: none;
    opacity: 1; visibility: visible; transform: none;
    padding: .8rem .95rem;
  }
}

/* --------------------------------------------------------------- cards --- */
.grid { display: grid; gap: clamp(1.5rem, 2.6vw, 3.25rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--c3, .grid--c4 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid--c3, .grid--c4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid--c3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1140px) { .grid--c4 { grid-template-columns: repeat(4, 1fr); } }

/* A service card: a number and rule across the top, an icon on the left and a
   photograph on the right, both contained within the card. */
/* Glass only shows if there is something behind it to refract. The hero has
   its photograph and the night band has its ghost lettering; the card grids
   sit on flat colour, so they carry a barely-there wash of their own for the
   blur to find. Absolutely positioned and first in the box, so the cards —
   which are position:relative — still paint over it. */
.grid--c3, .grid--c4, .grid--2 { position: relative; }
.grid--c3::before, .grid--c4::before, .grid--2::before {
  content: ""; position: absolute; inset: -7% -4%; pointer-events: none;
  background:
    radial-gradient(44% 58% at 12% 8%, rgba(24,95,175,.14), transparent 68%),
    radial-gradient(42% 54% at 88% 92%, rgba(165,114,44,.14), transparent 68%);
}

/* Where backdrop-filter is unsupported the panels fall back to solid, which
   is what they looked like before. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero__card { background: rgba(255,255,255,.96); }
  .svc { background: var(--white); border-color: var(--sand); }
  .band--night .area-card { background: var(--harbour); }
}

.svc {
  position: relative; display: flex; flex-direction: column;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-radius: var(--radius);
  padding: 1.9rem 1.7rem 1.8rem;
  text-decoration: none; color: inherit;
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.svc:hover {
  background: rgba(255,255,255,.72); border-color: var(--surf);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), var(--shadow);
  transform: translateY(-4px);
}

.svc__top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.svc__num {
  font-family: var(--display); font-size: 1.6rem; line-height: 1;
  color: var(--brass-lt); letter-spacing: .02em;
  transition: color .25s var(--ease);
}
.svc:hover .svc__num { color: var(--brass); }
.svc__rule { flex: 1; height: 1px; background: var(--sand); }

.svc__art {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.6rem;
}
/* Icons come from the client's IcoMoon roofing set. Colour is inherited
   rather than baked in, which the IcoMoon stylesheet does not do. */
.ico {
  font-family: 'Roofing Icons';
  font-style: normal; font-weight: 400; font-variant: normal;
  text-transform: none; line-height: 1; speak: never;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  display: inline-block;
}

.svc__icon {
  display: block; color: var(--surf);
  font-size: clamp(46px, 3.8vw, 60px);
  transition: color .25s var(--ease), transform .3s var(--ease);
}
.svc:hover .svc__icon { color: var(--brass); transform: translateY(-2px); }

.svc__photo {
  flex: 0 0 auto; width: 52%; margin-left: auto;
  min-width: 0; display: block; overflow: hidden;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.svc__photo img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .6s var(--ease);
}
.svc:hover .svc__photo img { transform: scale(1.05); }

.svc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.svc__head h3 { font-size: var(--step-2); margin: 0; }
.svc__go {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  display: grid; place-items: center; font-size: .8rem;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.svc:hover .svc__go { background: var(--surf); transform: translateX(3px); }

.svc__desc {
  display: block; margin-top: .9rem;
  font-size: .9375rem; color: var(--stone); line-height: 1.5;
}

/* The tool cards share the anatomy but carry no photograph, so the icon
   takes the space instead. */
.svc--plain .svc__art { margin-right: 0; margin-bottom: 1.25rem; }
.svc--plain .svc__icon { font-size: clamp(52px, 4.4vw, 68px); }

@media (max-width: 620px) {
  .svc { padding: 1.5rem 1.35rem 1.4rem; }
  .svc__art { margin-right: -1.35rem; }
  .svc__go { width: 38px; height: 38px; }
}

/* ------------------------------------------------------------- pillars --- */
.pillar { display: flex; gap: 1.1rem; }
.pillar__icon {
  flex: none; width: 62px; height: 62px; display: grid; place-items: center;
  border: 1px solid var(--sand); border-radius: 50%; color: var(--brass); font-size: 1.9rem;
}
.band--dark .pillar__icon, .band--night .pillar__icon {
  border-color: rgba(255,255,255,.24); color: var(--surf-lt);
}
.pillar h3 { font-size: var(--step-1); margin-bottom: .3rem; }
.pillar p { font-size: .9375rem; margin: 0; color: var(--stone); }
.band--dark .pillar p, .band--night .pillar p { color: #B4CBD6; }

/* ------------------------------------------------------------- ticklist --- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ticks li { display: flex; gap: .75rem; align-items: flex-start; font-size: .9688rem; }
.ticks li::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  color: var(--surf); font-size: .78rem; flex: none; margin-top: .34rem;
}
.band--dark .ticks li, .band--night .ticks li { color: #C8DBE3; }

/* ------------------------------------------------------------- process --- */
.process { counter-reset: step; display: grid; gap: 0; }
.process__row {
  counter-increment: step;
  position: relative;
  display: grid; grid-template-columns: 78px 1fr; gap: 1.5rem;
  /* Inset padding with a matching negative margin, so the row can take a
     background on hover without the text shifting out of alignment. */
  padding: 1.7rem 1.35rem; margin-inline: -1.35rem;
  border-top: 1px solid var(--sand);
  border-radius: var(--radius);
  transition: background-color .3s var(--ease);
}
/* A brass rule grows down the left edge as you move through the steps. */
.process__row::after {
  content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px;
  background: var(--brass); transform: scaleY(0); transform-origin: top;
  transition: transform .35s var(--ease);
  border-radius: 3px;
}
.process__row:hover { background: rgba(165,114,44,.07); }
.process__row:hover::after { transform: scaleY(1); }
.process__row h3, .process__row p { transition: color .25s var(--ease); }
.process__row:hover h3 { color: var(--brass); }
.process__row:hover p { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .process__row, .process__row::after, .process__row h3, .process__row p { transition: none; }
}
.process__row:last-child { border-bottom: 1px solid var(--sand); }
.process__row::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display); font-size: var(--step-3);
  color: var(--sand); line-height: 1;
  transition: color .25s var(--ease), transform .35s var(--ease);
  transform-origin: left center;
}
.process__row:hover::before { color: var(--brass); transform: scale(1.1); }
.process__row h3 { font-size: var(--step-1); margin-bottom: .3rem; }
.process__row p { font-size: .9375rem; margin: 0; color: var(--stone); }
.band--dark .process__row, .band--night .process__row { border-color: rgba(255,255,255,.16); }
.band--dark .process__row::before, .band--night .process__row::before { color: rgba(255,255,255,.3); }
.band--dark .process__row p, .band--night .process__row p { color: #B4CBD6; }
@media (max-width: 560px) {
  .process__row { grid-template-columns: 54px 1fr; gap: 1rem; padding-inline: 1rem; margin-inline: -1rem; }
}

/* ------------------------------------------------------- exposure gauge --- */
.gauge { display: grid; gap: .5rem; }
.gauge__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.gauge__seg { height: 9px; border-radius: 2px; background: var(--sand); transition: background-color .4s var(--ease); }
.band--dark .gauge__seg, .band--night .gauge__seg, .panel--dark .gauge__seg { background: rgba(255,255,255,.18); }
.gauge[data-level="1"] .gauge__seg:nth-child(-n+1),
.gauge[data-level="2"] .gauge__seg:nth-child(-n+2) { background: var(--surf); }
.gauge[data-level="3"] .gauge__seg:nth-child(-n+3) { background: var(--warn); }
.gauge[data-level="4"] .gauge__seg:nth-child(-n+4) { background: var(--alert); }
.gauge__labels {
  display: flex; justify-content: space-between;
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stone);
}
.band--dark .gauge__labels, .band--night .gauge__labels, .panel--dark .gauge__labels { color: #9BB6C3; }

.exposure-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .32rem .65rem; border-radius: 100px; background: var(--shell); color: var(--tide);
}
.exposure-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.exposure-chip[data-level="3"] { background: var(--warn-bg); color: var(--warn); }
.exposure-chip[data-level="4"] { background: var(--alert-bg); color: var(--alert); }

/* ----------------------------------------------------------------- FAQ --- */
.faq { border-top: 1px solid var(--sand); }
.faq details { border-bottom: 1px solid var(--sand); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.35rem 3.2rem 1.35rem 0;
  position: relative; font-family: var(--display); font-size: var(--step-1);
  color: var(--navy); line-height: 1.2;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "\f067"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--shell); color: var(--brass); border-radius: 50%;
  font-size: .72rem; transition: background-color .25s var(--ease), color .25s var(--ease);
}
.faq details[open] summary::after { content: "\f068"; background: var(--surf); color: var(--white); }
.faq summary:hover { color: var(--surf); }
.faq__a { padding: 0 clamp(0px, 4vw, 3.5rem) 1.5rem 0; }
.faq__a p { font-size: .9688rem; margin-bottom: .8rem; color: var(--stone); }
.band--dark .faq, .band--dark .faq details { border-color: rgba(255,255,255,.16); }
.band--dark .faq summary { color: var(--white); }
.band--dark .faq summary::after { background: rgba(255,255,255,.12); color: var(--surf-lt); }
.band--dark .faq__a p { color: #B4CBD6; }

/* ------------------------------------------------------------ CTA band --- */
.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(112deg, var(--navy) 0%, var(--deep) 100%);
  color: #C8DBE3;
}
.cta__in {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center;
}
@media (max-width: 880px) { .cta__in { grid-template-columns: 1fr; } }
.cta h2 { font-size: var(--step-3); margin-bottom: .55rem; }
.cta p { color: #A9C4D1; margin-bottom: 0; }
.cta__actions { display: grid; gap: .8rem; }
.cta__phone {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  border-radius: 100px; padding: 1.15rem 1.4rem; text-decoration: none;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.cta__phone:hover { background: rgba(255,255,255,.12); border-color: var(--surf); }
.cta__phone i { font-size: 1.5rem; color: var(--surf); }
.cta__phone span { display: block; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: #A3BECB; font-weight: 700; }
.cta__phone strong { font-family: var(--display); font-size: var(--step-2); color: var(--white); font-weight: 400; }

/* ------------------------------------------------------- photo band ------ */
/* The reference cuts a wave into a full-bleed photograph and sets a short
   statement over it. Same idea, our own panorama. */
.photoband {
  position: relative; overflow: hidden;
  background: var(--deep); color: #C8DBE3;
  padding-block: clamp(4rem, 3rem + 6vw, 8rem);
  display: grid; align-items: center;
}
.photoband__img { position: absolute; inset: 0; }
.photoband__img img { width: 100%; height: 100%; object-fit: cover; }
.photoband::after {
  content: ""; position: absolute; inset: 0;
  /* Dark end sits on the right, behind the right-aligned "Built to last" text;
     the photograph reads through the lighter left side. */
  background: linear-gradient(100deg, rgba(4,27,54,.30) 0%, rgba(4,27,54,.70) 54%, rgba(4,27,54,.94) 100%);
}
.photoband__in { position: relative; z-index: 1; max-width: 58ch; }
.photoband h2 { font-size: var(--step-4); margin-bottom: .4em; }
.photoband .lede { color: #C4DAE4; }
.photoband .label { color: var(--surf-lt); }

/* ----------------------------------------------------------- panel/box --- */
.panel {
  background: var(--white); border: 1px solid var(--sand); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, .9rem + 1.8vw, 2.25rem);
}
.panel--soft { background: var(--shell); border-color: transparent; }
.panel--dark { background: var(--harbour); border-color: rgba(255,255,255,.16); color: #C8DBE3; }

.note {
  display: flex; gap: .85rem; padding: 1.1rem 1.25rem;
  background: var(--shell); border-left: 3px solid var(--brass);
  border-radius: 0 var(--radius) var(--radius) 0; font-size: .9375rem;
}
.note i { color: var(--brass); margin-top: .25rem; flex: none; }
.note p { margin: 0; }

/* -------------------------------------------------------------- figure --- */
.figure { margin: 0; position: relative; }
.figure img { width: 100%; border-radius: var(--radius-lg); }
.figure--framed img { border: 1px solid var(--sand); }
/* A brass rule offset behind the image, as the reference frames its photos. */
.figure--offset { padding: 0 0 1rem 1rem; }
.figure--offset::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: 62%; height: 72%;
  border: 1px solid var(--brass); border-radius: var(--radius-lg); z-index: 0;
}
.figure--offset img { position: relative; z-index: 1; }
.figure figcaption { margin-top: .75rem; font-size: .8125rem; color: var(--stone); }

/* --------------------------------------------------------------- prose --- */
.prose > h2 { margin-top: 2.5rem; font-size: var(--step-2); }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: 1.75rem; font-size: var(--step-1); }
.prose p, .prose li { font-size: 1.0313rem; color: var(--ink); max-width: 68ch; }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: .5rem; }

/* --------------------------------------------------------- breadcrumbs --- */
.crumbs { font-size: .8125rem; padding-block: .9rem; border-bottom: 1px solid var(--sand); background: var(--white); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.crumbs li::after { content: "/"; margin-left: .4rem; color: var(--sand); }
.crumbs li:last-child::after { display: none; }
.crumbs a { color: var(--stone); text-decoration: none; }
.crumbs a:hover { color: var(--surf); text-decoration: underline; }
.crumbs [aria-current] { color: var(--navy); font-weight: 600; }

/* --------------------------------------------------------- page header --- */
.pagehead {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--navy) 0%, var(--deep) 100%);
  color: #B4CBD6; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.pagehead h1 { color: var(--white); margin-bottom: .35em; }
.pagehead__lede { font-size: var(--step-1); color: #AFC7D4; max-width: 58ch; }
.pagehead__meta { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin-top: 1.6rem; font-size: .875rem; color: #93AEBC; }
.pagehead__meta span { display: inline-flex; align-items: center; gap: .5rem; }
.pagehead__meta i { color: var(--surf); }

/* --------------------------------------------------------------- forms --- */
.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .4rem; }
.field > label, .fieldset > legend {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy);
}
.field small { font-size: .8125rem; color: var(--stone); font-weight: 400; letter-spacing: 0; text-transform: none; }
.field .req { color: var(--alert); }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; padding: .85rem .95rem;
  background: var(--white); border: 1px solid var(--sand); border-radius: var(--radius);
  font-size: 1rem; color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--surf); box-shadow: 0 0 0 3px rgba(24,95,175,.20);
}
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 d='M1 1.5 6 6.5l5-5' stroke='%2355666D' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px;
  padding-right: 2.4rem;
}
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.15rem; }

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

.form-error {
  display: none; gap: .75rem; align-items: flex-start;
  background: var(--alert-bg); border-left: 3px solid var(--alert);
  padding: 1rem 1.15rem; font-size: .9375rem; color: #6E241A; border-radius: 0 var(--radius) var(--radius) 0;
}
.form-error i { margin-top: .2rem; }
.form-error:target, .form-error.is-shown { display: flex; }

/* -------------------------------------------------------------- tools --- */
.tool { display: grid; gap: 1.5rem; }
.tool__step {
  border: 1px solid var(--sand); border-radius: var(--radius-lg);
  /* Cream rather than white: the panel then sits on the page ground instead
     of reading as a big white slab, and the white option cards inside it get
     the same card-on-cream contrast the rest of the site uses. */
  background: var(--cream); padding: clamp(1.3rem, .9rem + 1.4vw, 2.1rem);
}
.tool__step > legend, .tool__step > h3 {
  float: left; width: 100%;
  font-family: var(--display); font-weight: 400; font-size: var(--step-2);
  line-height: 1.15; letter-spacing: 0; text-transform: none;
  color: var(--navy); padding: 0; margin: 0 0 .3rem;
}
.tool__help { clear: both; font-size: .9375rem; color: var(--stone); margin: 0 0 1.25rem; }
.tool__step > .opts { clear: both; }
.fieldset { border: 0; padding: 0; margin: 0; }

.opts { display: grid; gap: .65rem; }
.opts--2 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.opt {
  display: flex; gap: .85rem; align-items: flex-start; cursor: pointer;
  padding: .95rem 1rem; border: 1px solid var(--sand); border-radius: var(--radius);
  background: var(--white);
  transition: border-color .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
.opt:hover { border-color: var(--surf); background: #F5F9FE; }
.opt input { flex: none; margin-top: .28rem; width: 19px; height: 19px; accent-color: var(--surf); }
.opt:has(input:checked) { border-color: var(--surf); background: #EDF4FC; box-shadow: inset 0 0 0 1px var(--surf); }
.opt:has(input:focus-visible) { outline: 3px solid var(--surf); outline-offset: 2px; }
.opt__txt { display: grid; gap: .12rem; }
.opt__txt strong { font-weight: 600; font-size: .9688rem; color: var(--ink); line-height: 1.35; }
.opt__txt small { font-size: .8438rem; color: var(--stone); line-height: 1.45; }

.tool__bar {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1.15rem 1.4rem; background: var(--navy); color: var(--white);
  border-radius: 100px; position: sticky; bottom: 1rem; box-shadow: var(--shadow-lg); z-index: 20;
}
.tool__count { font-size: .9375rem; color: #B4CBD6; margin: 0; }
.tool__count strong { color: var(--white); font-family: var(--display); font-size: var(--step-1); }

.result { display: none; scroll-margin-top: 120px; }
.result.is-shown { display: block; animation: rise .4s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .result.is-shown { animation: none; } }

.result__head {
  padding: clamp(1.35rem, 1rem + 1.6vw, 2.25rem);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid var(--sand); border-bottom: 0; background: var(--shell);
}
.result__head[data-tone="ok"]    { background: var(--ok-bg);    border-color: #BEDCCC; }
.result__head[data-tone="warn"]  { background: var(--warn-bg);  border-color: #E6CFA4; }
.result__head[data-tone="alert"] { background: var(--alert-bg); border-color: #E2BCB4; }
.result__tone {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
  font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tide);
}
.result__head[data-tone="ok"] .result__tone { color: var(--ok); }
.result__head[data-tone="warn"] .result__tone { color: var(--warn); }
.result__head[data-tone="alert"] .result__tone { color: var(--alert); }
.result__head h3 { font-size: var(--step-3); margin-bottom: .5rem; }
.result__head p { margin-bottom: 0; font-size: 1.0313rem; color: var(--ink); }
.result__body {
  border: 1px solid var(--sand); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--white); padding: clamp(1.35rem, 1rem + 1.6vw, 2.25rem);
  display: grid; gap: 1.75rem;
}
.result__sub { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); margin: 0 0 .8rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; background: var(--shell); border-radius: 100px;
  font-size: .875rem; font-weight: 600; color: var(--navy); text-decoration: none;
}
a.chip:hover { background: var(--surf); color: var(--white); }

/* ---------------------------------------------------------- area index --- */
.area-list { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.area-card {
  display: grid; gap: .85rem; padding: 1.5rem 1.6rem;
  background: var(--white); border: 1px solid var(--sand); border-radius: var(--radius-lg);
  text-decoration: none; color: inherit;
  transition: border-color .2s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.area-card:hover { border-color: var(--surf); box-shadow: var(--shadow); transform: translateY(-3px); }

/* On the homepage the area cards sit over the ghost lettering and the woven
   texture of the night band, which is exactly what glass wants behind it.
   Scoped to that band so the areas hub keeps its solid white cards. */
.band--night .area-card {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  color: #C8DBE3;
}
.band--night .area-card h3 { color: var(--white); }
.band--night .area-card p { color: #C8DBE3; }
.band--night .area-card .area-card__pc { color: #9FB6CA; }
.band--night .area-card:hover {
  background: rgba(255,255,255,.13); border-color: var(--surf);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), var(--shadow);
}
.area-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.area-card h3 { font-size: var(--step-1); margin: 0; }
.area-card__pc { font-size: .8125rem; color: var(--stone); font-weight: 600; letter-spacing: .04em; margin: 0; }
.area-card p { font-size: .9063rem; color: var(--stone); margin: 0; }

/* ----------------------------------------------------------------- map --- */
.map-facade {
  position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 300px;
  border: 1px solid var(--sand); border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(160deg, #EFE4D2, #F7F1E6);
  display: grid; place-items: center; cursor: pointer; padding: 1.5rem; text-align: center;
}
.map-facade::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(135,93,36,.10) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(135,93,36,.10) 0 1px, transparent 1px 34px);
}
.map-facade__in { position: relative; display: grid; gap: .85rem; justify-items: center; }
.map-facade i { font-size: 1.75rem; color: var(--brass); }
.map-facade strong { font-family: var(--display); font-size: var(--step-1); }
.map-facade small { font-size: .8438rem; color: var(--stone); max-width: 42ch; }
.map-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* -------------------------------------------------------------- footer --- */
.site-footer { background: var(--deep); color: #9BB6C3; position: relative; overflow: hidden; }
.site-footer__top { padding-block: clamp(3rem, 2rem + 3vw, 4.75rem); }
.site-footer__grid {
  display: grid; gap: 2.5rem;
  /* Four columns, not five: Roof tools and Company share the last one,
     stacked, which evens up two short lists against the long Areas list. */
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
}
.site-footer__stack { display: grid; gap: 2.25rem; align-content: start; }
@media (max-width: 1180px) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  color: var(--white); font-family: var(--display); font-size: 1.0625rem;
  font-weight: 400; letter-spacing: .02em; text-transform: none; margin-bottom: 1.2rem;
  padding-bottom: .7rem; border-bottom: 1px solid rgba(255,255,255,.14);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer a { color: #A9C4D1; text-decoration: none; font-size: .9375rem; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer p { font-size: .9375rem; line-height: 1.6; }
.footer-contact { display: grid; gap: .85rem; margin-top: 1.4rem; }
.footer-contact a, .footer-contact span { display: flex; gap: .75rem; align-items: flex-start; font-size: .9375rem; color: #C4DAE4; }
.footer-contact i { color: var(--surf); margin-top: .3rem; flex: none; width: 16px; }
.site-footer__bar {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between;
  font-size: .8125rem; color: #7E9DAD;
}
.site-footer__bar ul { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-footer__bar a { font-size: .8125rem; }

/* --------------------------------------------------------- mobile dock --- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; grid-template-columns: 1fr 1fr;
  background: var(--navy); border-top: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 -6px 24px rgba(4,27,54,.24);
}
.dock a {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem .5rem; color: var(--white); text-decoration: none; font-weight: 700; font-size: .9375rem;
}
.dock a + a { border-left: 1px solid rgba(255,255,255,.14); background: var(--surf); color: var(--white); }
@media (max-width: 780px) {
  .dock { display: grid; }
  body { padding-bottom: 56px; }
  .tool__bar { bottom: 4.25rem; }
}

/* ------------------------------------------------------------- reveal --- */
/* --------------------------------------------------------------- motion --- */
/* One reveal primitive with a few directions and an optional stagger. The
   stagger index is set by site.js on the children of anything marked
   data-stagger, so a grid animates in sequence rather than all at once. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal--left  { transform: translateX(-26px); }
.reveal--right { transform: translateX(26px); }
.reveal--zoom  { transform: scale(.96); }
.reveal.is-in { opacity: 1; transform: none; }

/* A photograph settles rather than slides: the frame arrives, the image
   inside it releases from a slight scale. */
.figure { overflow: hidden; }
.figure img { transition: transform 1.1s var(--ease), opacity .8s var(--ease); }
.reveal .figure img, .figure.reveal img { transform: scale(1.07); opacity: .001; }
.reveal.is-in .figure img, .figure.reveal.is-in img { transform: none; opacity: 1; }

/* The ornament under a centred heading draws itself in. */
.head-block--center h2::after, .head-block--center h1::after,
.head-block:not(.head-block--center) > h2::after {
  transition: transform .8s var(--ease) .25s, opacity .5s var(--ease) .25s;
  transform-origin: left center;
}
.head-block--center h2::after, .head-block--center h1::after { transform-origin: center; }
.reveal .head-block h2::after, .head-block.reveal h2::after,
.head-block.reveal h1::after { transform: scaleX(0); opacity: 0; }
.head-block.reveal.is-in h2::after, .head-block.reveal.is-in h1::after {
  transform: scaleX(1); opacity: 1;
}

/* Components that are both revealed and interactive need their transitions
   and hover transforms restated here. Two reasons: the transition shorthand
   cannot be merged, so .reveal's declaration replaces the component's own;
   and .reveal.is-in{transform:none} ties with .svc:hover on specificity and
   wins on source order, which silently killed the hover lift. */
.svc.reveal, .area-card.reveal, .process__row.reveal {
  transition: opacity .7s var(--ease), transform .7s var(--ease),
              border-color .2s var(--ease), box-shadow .25s var(--ease),
              background-color .3s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0s, 0s, 0s;
}
.svc.reveal.is-in:hover { transform: translateY(-4px); }
.area-card.reveal.is-in:hover { transform: translateY(-3px); }

.no-js .reveal { opacity: 1; transform: none; }
.no-js .figure img { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--left, .reveal--right, .reveal--zoom {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .figure img { transform: none !important; opacity: 1 !important; transition: none !important; }
  .head-block h2::after, .head-block h1::after {
    transform: none !important; opacity: 1 !important; transition: none !important;
  }
}

/* --------------------------------------------------------------- misc --- */
.stack { display: grid; gap: 1.25rem; }
.split {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start;
}
.split--sticky > :last-child { position: sticky; top: 118px; }
@media (max-width: 900px) { .split--sticky > :last-child { position: static; } }

.error-page { display: grid; place-items: center; text-align: center; padding-block: clamp(4rem, 2rem + 8vw, 8rem); }
.error-page__code {
  font-family: var(--display); font-size: clamp(4.5rem, 2rem + 12vw, 9rem);
  line-height: .9; color: var(--sand); margin-bottom: .1em;
}

/* ---------------------------------------------------------- stat counters --- */
/* The Marina "funfacts" band. Big Marcellus numerals on a dark slate band,
   cyan accents, one roofing glyph each; site.js counts them up on scroll. */
.stats__grid {
  display: grid; gap: clamp(1.25rem, 2vw, 2rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }
.stat {
  position: relative; text-align: center;
  display: grid; justify-items: center; gap: .35rem;
  padding: clamp(1rem, 2vw, 1.75rem) clamp(.5rem, 2vw, 1.25rem);
}
/* Hairline dividers between cells, as the reference sets them. */
@media (min-width: 860px) {
  .stat + .stat::before {
    content: ""; position: absolute; left: 0; top: 16%; bottom: 16%; width: 1px;
    background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0));
  }
}
.stat__icon { font-size: 2.3rem; color: var(--surf-lt); margin-bottom: .1rem; }
.stat__num {
  font-family: var(--display); line-height: 1; margin: 0; color: var(--white);
  font-size: clamp(2.75rem, 2rem + 3.4vw, 4.25rem);
  display: inline-flex; align-items: flex-start; letter-spacing: .01em;
}
.stat__suffix { color: var(--surf-lt); font-size: .52em; line-height: 1; margin-left: .07em; }
.stat__label { margin: 0; color: #B4CBD6; font-size: .9375rem; max-width: 17ch; }

/* -------------------------------------------------------- accreditations --- */
/* Name-and-meaning badges rather than official logos, until artwork is
   supplied. A calm light strip that reads as credentials before the CTA. */
.creds {
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.cred {
  display: grid; place-items: center;
  padding: clamp(1.2rem, 2vw, 1.7rem) clamp(1.6rem, 3vw, 2.75rem);
  background: var(--white); border: 1px solid var(--sand);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
/* A uniform logo height is what makes a mixed set of marks read as one strip;
   the tiles then size to each logo's own width. */
/* Bounded on BOTH axes: a uniform height alone lets a wide wordmark
   (Checkatrade) render twice the width of a compact mark and dominate the
   strip, so each logo is fitted into a box instead. */
.cred__logo {
  display: block; width: auto; height: auto;
  max-height: clamp(38px, 3.6vw, 50px); max-width: clamp(150px, 15vw, 200px);
  object-fit: contain;
}
@media (max-width: 520px) {
  .cred { flex: 1 1 100%; }
  .cred__logo { max-height: 44px; max-width: 190px; }
}

/* --------------------------------------------------- glass service band --- */
/* The "What we do" cards are frosted glass; glass only reads over something
   textured, so the section sits on a dark roof photograph. The per-card
   breakout photo is dropped here (a photo inside a glass panel over a photo
   is noise) and the icon takes its place. */
.photo-glass { position: relative; isolation: isolate; overflow: hidden; }
.photo-glass .photo-glass__img { position: absolute; inset: 0; z-index: -2; }
.photo-glass .photo-glass__img img { width: 100%; height: 100%; object-fit: cover; }
.photo-glass::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* The top starts as the exact navy of the numbers band above (--deep,
     rgb(4,27,54)) at full opacity, so the dark blue fades in seamlessly from
     that row; it then eases to a lighter tint over the cards, letting the
     rooftops read through the frosted glass. */
  background: linear-gradient(180deg,
    rgba(4,27,54,1) 0%, rgba(4,27,54,.92) 12%,
    rgba(4,20,40,.72) 34%, rgba(6,37,72,.52) 64%,
    rgba(6,37,72,.6) 100%);
}
.photo-glass .label { color: var(--surf-lt); }
.photo-glass h2 { color: var(--white); }
.photo-glass .lede { color: #C8D6E0; }

/* The glass card itself. .svc is already translucent; over a dark image it
   wants light text, a lighter film and a stronger edge and shadow to read. */
.svc--glass {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  color: #EAF1F6;
}
.svc--glass:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 12px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.24);
  transform: translateY(-4px);
}
.svc--glass .svc__num { color: var(--sand); }
.svc--glass:hover .svc__num { color: var(--white); }
.svc--glass .svc__rule { background: rgba(255,255,255,.22); }
.svc--glass .svc__art { margin-bottom: 1.25rem; }
.svc--glass .svc__icon { color: var(--surf-lt); font-size: clamp(50px, 4.2vw, 64px); }
.svc--glass:hover .svc__icon { color: var(--white); }
.svc--glass .svc__head h3 { color: var(--white); }
.svc--glass .svc__desc { color: #C8D6E0; }
.svc--glass .svc__go {
  background: rgba(255,255,255,.16); color: var(--white);
  border: 1px solid rgba(255,255,255,.28);
}
.svc--glass:hover .svc__go { background: var(--surf); border-color: var(--surf); }

/* Where the browser cannot frost (older engines), fall back to a solid navy
   card rather than near-invisible white film over the photograph. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .svc--glass { background: rgba(6,37,72,.82); border-color: rgba(255,255,255,.18); }
  .svc--glass:hover { background: rgba(14,58,107,.9); }
}

/* ------------------------------------------------ photoband right-aligned --- */
/* "Built to last" sits against the right edge of the content column rather
   than centred, so the photograph reads on the left. */
.photoband--right .photoband__in { margin-left: auto; text-align: right; }
.photoband--right .photoband__in .lede { margin-left: auto; }
.photoband--right .photoband__in .btn-row { justify-content: flex-end; }
@media (max-width: 640px) {
  .photoband--right .photoband__in { margin-left: 0; text-align: left; }
  .photoband--right .photoband__in .btn-row { justify-content: flex-start; }
}

/* ----------------------------------------------------- FAQ across the row --- */
/* The questions run full width in two columns rather than a narrow single
   stack. break-inside keeps a question and its answer together in a column. */
@media (min-width: 820px) {
  .faq-wide .faq { columns: 2; column-gap: clamp(2.5rem, 5vw, 5rem); }
  .faq-wide .faq details { break-inside: avoid; }
  /* The first row of each column shares the container's top rule, so drop the
     one that would otherwise double it at the top of the second column. */
  .faq-wide .faq { border-top: 0; }
  .faq-wide .faq details { border-top: 1px solid var(--sand); border-bottom: 0; }
}

/* -------------------------------------------------- topographic overlay --- */
/* A cream section with the client's contour-line texture washed lightly over
   it. The frosted tool cards then sit on the texture and soften it behind
   them. Purely decorative, so it rides on a pseudo-element. */
.topo { position: relative; isolation: isolate; background: var(--cream); overflow: hidden; }
.topo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/assets/img/topo-contours.webp") center / cover no-repeat;
  opacity: .05;
  /* Fade the texture out toward the bottom so it dissolves into the curved
     divider of the section below rather than stopping on a hard edge. */
  -webkit-mask-image: linear-gradient(180deg, #000 38%, transparent 94%);
  mask-image: linear-gradient(180deg, #000 38%, transparent 94%);
}

/* The two tool cards sit on the textured cream band; a solid card reads
   cleaner there than the frosted one, so drop the glass on this row only. */
.topo .svc {
  background: var(--white);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-color: var(--sand);
  box-shadow: var(--shadow);
  border-radius: 20px;
}
.topo .svc:hover { background: var(--white); border-color: var(--surf); }

/* The brand-glow behind card grids is distracting on this pale band, so drop
   it for the tool row only. */
.topo .grid--2::before { display: none; }

/* ------------------------------------------------------ ticks as a row --- */
/* The "What you get from us" promises read as a horizontal set rather than a
   tall stack; they are short enough to wrap into two or three per line. */
.ticks--row { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; }
.ticks--row li { flex: 0 1 auto; }

/* ------------------------------- contour overlay on the closing CTA band --- */
/* Replaces the diagonal lattice with the client's contour artwork, in the
   pale cut so it reads on navy. Overrides .slate::before for this band only. */
.cta.slate::before {
  background-image: url("/assets/img/topo-contours-light.webp");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: .10;
  -webkit-mask-image: none; mask-image: none;
}

/* ------------------------------------------------------- footer, solid --- */
/* A flat blue panel rather than the near-black navy and its weave. It is a
   direct child of .slate, so it already sits above that texture. */
.site-footer__top { background: var(--harbour); }

/* ------------------------------------------- curve seam, colour matching --- */
/* A .curve-top band masks ITSELF, so the space above its curve reveals the
   page ground (cream) — not the row above. Where that row is a shell band the
   seam shows a visible colour step, so extend the shell down behind the curve
   and the divider reads as part of the row above it.
   Scoped with :has() so it follows the curve wherever it lands across the 26
   pages; browsers without :has() simply keep the previous behaviour. */
.band--haze:has(+ .curve-top)::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: clamp(54px, 8.5vw, 150px);
  background: var(--shell);
  pointer-events: none;
}

/* ---------------------------------------------- accreditations in footer --- */
/* The marks are dark or full-colour artwork, so each sits on its own small
   white tile to read against the blue. Bounded on both axes so a wide
   wordmark cannot dominate the row, as in the accreditations band. */
.footer-creds { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.6rem; }
.footer-creds img {
  background: var(--white); border-radius: 6px; padding: 7px 10px;
  /* content-box on purpose: the sheet is border-box globally, which would
     otherwise count the padding inside max-height and shrink the mark to a
     few unreadable pixels. These bounds are the LOGO, not the tile. */
  box-sizing: content-box;
  width: auto; height: auto; max-height: 24px; max-width: 96px;
  object-fit: contain; display: block;
}

/* ------------------------------------------- CTA: legibility + button set --- */
/* A scrim over the contour texture, heaviest on the left, so the heading and
   paragraph sit on a clean dark ground while the artwork still shows on the
   right. Sits above .slate::before and below the content, which carries
   z-index 1 from `.slate > *`. */
.cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(4,27,54,.92) 0%, rgba(4,27,54,.62) 34%, rgba(4,27,54,0) 62%);
}

/* The two buttons in the CTA stack take the same treatment as the
   "Call us today" panel above them, so the three read as one set. */
.cta__actions .btn {
  justify-content: flex-start; gap: 1rem;
  padding: 1.15rem 1.4rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 100px;
  color: var(--white);
  font-size: var(--step-0);
}
.cta__actions .btn:hover {
  background: rgba(255,255,255,.12); border-color: var(--surf); color: var(--white);
}
.cta__actions .btn i { font-size: 1.5rem; color: var(--surf); }

/* The glass band now also carries LEFT-aligned headings (service, area and
   404 pages). Their short rule is brass by default, which disappears on the
   dark photograph, so restate it in the light blue as the dark bands do. */
.photo-glass .head-block:not(.head-block--center) > h2::after { background: var(--surf-lt); }

/* -------------------------------------------------- stepped exposure tool --- */
/* `hidden` loses to an explicit display (the tool bar is flex), so make it
   win. Without this the stepper cannot hide anything. */
[hidden] { display: none !important; }

.stepper { margin-bottom: 1.6rem; }
.stepper__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .7rem;
}
.stepper__count { margin: 0; font-size: .875rem; color: var(--stone); }
.stepper__count strong {
  font-family: var(--display); font-size: var(--step-1); color: var(--navy);
}
.stepper__back {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 0; padding: .35rem 0;
  font: inherit; font-size: .875rem; font-weight: 700;
  color: var(--surf); cursor: pointer;
}
.stepper__back:hover { text-decoration: underline; }
.stepper__track {
  height: 4px; background: var(--sand); border-radius: 2px; overflow: hidden;
}
.stepper__fill {
  display: block; height: 100%; width: 25%;
  background: var(--surf); border-radius: 2px;
  transition: width .35s var(--ease);
}
/* The stepped question should not jump when it swaps. */
.tool__step:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .stepper__fill { transition: none; } }

/* --------------------------------------------------- solid buttons --- */
/* Flat and matte, to sit with the rest of the site: one colour per variant
   and a plain tint on hover. No gradient, no top sheen, no sweep and no
   coloured glow — each variant supplies only its base and hover colour. */
.btn--primary, .btn--navy, .btn--brass {
  border-color: transparent;
  background-color: var(--btn-base);
  color: var(--white);
  transition: background-color .2s var(--ease), color .2s var(--ease),
              transform .12s var(--ease);
}
/* White labels clear AA on every one of these: navy 11.4:1, brass 5.8:1,
   and on the lighter hover tints 8.6:1 and 5.0:1. */
.btn--primary, .btn--navy { --btn-base:#062548; --btn-hover:#0E3A6B; }
.btn--brass              { --btn-base:#875D24; --btn-hover:#94662A; }

.btn--primary:hover, .btn--navy:hover, .btn--brass:hover {
  background-color: var(--btn-hover); color: var(--white);
}

/* The CTA stack was deliberately matched to the "Call us today" panel, so it
   keeps its own translucent face rather than these fills. */
.cta__actions .btn { background-color: rgba(255,255,255,.07); }
.cta__actions .btn:hover { background-color: rgba(255,255,255,.12); }

/* The areas band sets a photograph behind very translucent cards, so it needs
   a heavier, flatter veil than the services band: bright patches in the
   picture would otherwise read straight through the card faces. The photo
   stays perceptible as a tonal backdrop, which is all it is there to be. */
.band--night.photo-glass::after {
  background: linear-gradient(180deg,
    rgba(4,27,54,.95) 0%, rgba(4,27,54,.87) 38%, rgba(6,37,72,.89) 100%);
}

/* ---------------------------------------------- phone numbers, legible --- */
/* Marcellus is a light, single-weight display serif: elegant for headings, but
   its thin digits were hard to read at a glance on the dark CTA panel. The
   number is the whole point of that panel, so it is set in the UI face at a
   real 800 (Rethink Sans is variable 400-800, so this is a true weight rather
   than a synthesised bold), with tabular figures so the digits sit on an even
   rhythm and a little tracking to separate the groups. */
.cta__phone strong,
.header-phone__text strong {
  font-family: var(--body);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .015em;
}
.cta__phone strong { font-size: clamp(1.45rem, 1.25rem + .7vw, 1.85rem); }
.header-phone__text strong { font-size: 1.0938rem; }