@charset "utf-8";
/* ==========================================================================
   Brighton Roofing — roofrepairspeacehaven.co.uk
   Bespoke stylesheet. Palette derived from the genuine Brighton Roofing
   logo: navy #002C49 + brass #D2A441.
   Contents:
     01 Tokens          09 Services (numbered rows)   17 FAQ
     02 Reset/base      10 Repairs band               18 CTA band
     03 Typography      11 Flat roofing               19 Footer
     04 Layout          12 Problems grid              20 Forms
     05 Buttons         13 Editorial band             21 Page header
     06 Section furn.   14 Why choose                 22 Sticky call
     07 Header/nav      15 Showcase                   23 Utilities
     08 Hero            16 Process / coverage         24 Motion/print
   ========================================================================== */

/* 01 — Design tokens ------------------------------------------------------ */
:root{
  /* Brand */
  --color-primary:#002c49;
  --color-primary-deep:#00203a;
  --color-primary-dark:#001729;
  --color-primary-tint:#0a3d61;
  --color-accent:#d2a441;
  --color-accent-bright:#e2b757;
  --color-accent-deep:#8a6510;  /* brass for text on light grounds — 4.8:1 on --color-surface */

  /* Neutrals — stone / slate */
  --color-background:#ffffff;
  --color-surface:#f6f3ee;
  --color-surface-alt:#ece7de;
  --color-text:#17202b;
  --color-heading:#002c49;
  --color-muted:#57646f;
  --color-muted-light:#8b98a4;
  --color-border:#e0dbd2;
  --color-border-strong:#cdc5b8;
  --color-on-dark:#eef2f6;
  --color-on-dark-muted:#a9bccd;
  --color-rule-dark:rgba(255,255,255,.16);

  /* Type */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --fs-eyebrow:.75rem;
  --lh-tight:1.08;
  --lh-snug:1.24;
  --lh-body:1.68;

  /* Space */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:3rem;   --sp-8:4rem;
  --sp-9:5.5rem; --sp-10:7rem;
  --gutter:1.25rem;
  --maxw:1220px;        /* the one container width, site-wide */
  --maxw-text:42rem;    /* prose measure (~68 chars at body size) */
  --maxw-center:48rem;  /* centred blocks */

  /* Effects */
  --radius:2px;
  --radius-lg:3px;
  --shadow-sm:0 1px 2px rgba(0,32,58,.06),0 2px 8px rgba(0,32,58,.05);
  --shadow-md:0 12px 30px -12px rgba(0,32,58,.28);
  --shadow-lg:0 28px 60px -24px rgba(0,32,58,.42);
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.32s;

  /* Roof-pitch motif: the shallow angle reused across clipped edges */
  --pitch:34px;
  --header-h:76px;
}
@media (min-width:1024px){ :root{ --gutter:2.5rem; --pitch:56px; --header-h:88px; } }

/* 02 — Reset / base ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:1rem;
  line-height:var(--lh-body);
  color:var(--color-text);
  background:var(--color-background);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--color-primary);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--color-accent-deep)}
ul,ol{margin:0;padding:0}
li{list-style:none}
button{font:inherit;color:inherit}
hr{border:0;border-top:1px solid var(--color-border);margin:var(--sp-6) 0}
::selection{background:var(--color-accent);color:var(--color-primary-dark)}

/* Focus — visible on both grounds */
:focus-visible{
  outline:3px solid var(--color-accent);
  outline-offset:3px;
  border-radius:1px;
}
.on-dark :focus-visible,.site-header :focus-visible,.site-footer :focus-visible,
.page-header :focus-visible,.cta-band :focus-visible{
  outline-color:var(--color-accent-bright);
}
.skip-link{
  position:absolute;left:var(--sp-4);top:-100px;z-index:200;
  background:var(--color-accent);color:var(--color-primary-dark);
  padding:.7rem 1.1rem;font-weight:700;border-radius:var(--radius);
  transition:top .2s var(--ease);
}
.skip-link:focus{top:var(--sp-4)}

/* Any anchor jump must clear the sticky header rather than hide under it. */
[id]{scroll-margin-top:calc(var(--header-h) + 1.5rem)}

/* 03 — Typography --------------------------------------------------------- */
h1,h2,h3,h4{
  margin:0;color:var(--color-heading);
  font-weight:800;letter-spacing:-.022em;line-height:var(--lh-snug);
  text-wrap:balance;
}
h1{font-size:clamp(2.15rem,6.2vw,4rem);line-height:var(--lh-tight);letter-spacing:-.03em}
h2{font-size:clamp(1.65rem,3.9vw,2.7rem);letter-spacing:-.026em}
h3{font-size:clamp(1.18rem,2.1vw,1.5rem)}
h4{font-size:1.05rem;letter-spacing:-.01em}
p{margin:0 0 var(--sp-4)}
p:last-child{margin-bottom:0}
strong{font-weight:700;color:var(--color-heading)}
.lead{
  font-size:clamp(1.05rem,1.9vw,1.25rem);
  line-height:1.6;color:var(--color-muted);
}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark{color:var(--color-on-dark)}
.on-dark .lead{color:var(--color-on-dark-muted)}
.on-dark strong{color:#fff}
.on-dark :is(p,li,span,dd,dt,figcaption,h2,h3,h4) a{color:var(--color-accent-bright)}

/* 04 — Layout ------------------------------------------------------------- */
/* One content width across the entire site. Every section's content starts on
   the same left edge — readability is controlled by capping the line length of
   the text itself (--maxw-text), never by narrowing the container, which is
   what previously made narrow sections jog inwards by ~170px. */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:var(--maxw)}
.container--narrow > :is(h1,h2,h3,h4,p,ul,ol,dl){max-width:var(--maxw-text)}
/* Centred variants keep their capped blocks centred rather than left-aligned. */
.container--narrow.text-center > *{margin-inline:auto}
.section{padding-block:var(--sp-8)}
@media (min-width:768px){.section{padding-block:var(--sp-9)}}
@media (min-width:1024px){.section{padding-block:var(--sp-10)}}
.section--tight{padding-block:var(--sp-7)}
.section--stone{background:var(--color-surface)}
.section--navy{background:var(--color-primary);color:var(--color-on-dark)}
.section--deep{background:var(--color-primary-deep);color:var(--color-on-dark)}
.measure{max-width:var(--maxw-text)}

/* 05 — Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.55rem;min-height:52px;
  font-weight:700;font-size:1rem;letter-spacing:.005em;
  text-decoration:none;border:2px solid transparent;border-radius:var(--radius);
  cursor:pointer;text-align:center;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform .18s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn svg{flex:none;width:19px;height:19px;fill:currentColor}
.btn--primary{background:var(--color-accent);color:var(--color-primary-dark);border-color:var(--color-accent)}
.btn--primary:hover{background:var(--color-accent-bright);border-color:var(--color-accent-bright);color:var(--color-primary-dark)}
.btn--navy{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn--navy:hover{background:var(--color-primary-tint);border-color:var(--color-primary-tint);color:#fff}
.btn--ghost{background:transparent;color:var(--color-primary);border-color:var(--color-border-strong)}
.btn--ghost:hover{border-color:var(--color-primary);background:var(--color-primary);color:#fff}
.btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn--ghost-light:hover{background:#fff;color:var(--color-primary);border-color:#fff}
.btn--lg{padding:1.15rem 2rem;min-height:60px;font-size:1.08rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
@media (max-width:479px){ .btn-row .btn{width:100%} }

/* 06 — Section furniture -------------------------------------------------- */
/* Eyebrow: small brass-ruled label used above every section heading */
.eyebrow{
  display:flex;align-items:center;gap:.7rem;
  margin:0 0 var(--sp-4);
  font-size:var(--fs-eyebrow);font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-accent-deep);
}
.eyebrow::before{
  content:"";width:26px;height:2px;background:var(--color-accent);flex:none;
}
.on-dark .eyebrow{color:var(--color-accent)}
.section-head{margin-bottom:var(--sp-7)}
.section-head .lead{margin-top:var(--sp-4)}
.section-head--center{text-align:center;max-width:var(--maxw-center);margin-inline:auto}
.section-head--center .eyebrow{justify-content:center}

/* Roof-pitch rule: the recurring apex motif, drawn in CSS */
.pitch-rule{
  --pr-color:var(--color-accent);
  height:16px;width:96px;margin-bottom:var(--sp-5);
  background:
    linear-gradient(to bottom right,transparent calc(50% - 1.2px),var(--pr-color) calc(50% - 1.2px),var(--pr-color) calc(50% + 1.2px),transparent calc(50% + 1.2px)) left/50% 100% no-repeat,
    linear-gradient(to bottom left,transparent calc(50% - 1.2px),var(--pr-color) calc(50% - 1.2px),var(--pr-color) calc(50% + 1.2px),transparent calc(50% + 1.2px)) right/50% 100% no-repeat;
}

/* Clipped pitch edges applied to key images */
.pitch-clip-tl{clip-path:polygon(0 var(--pitch),var(--pitch) 0,100% 0,100% 100%,0 100%)}
.pitch-clip-tr{clip-path:polygon(0 0,calc(100% - var(--pitch)) 0,100% var(--pitch),100% 100%,0 100%)}
.pitch-clip-bl{clip-path:polygon(0 0,100% 0,100% 100%,var(--pitch) 100%,0 calc(100% - var(--pitch)))}

.figure{position:relative;margin:0}
.figure img{width:100%;display:block;object-fit:cover;background-color:var(--color-surface-alt)}
.figure figcaption{
  margin-top:var(--sp-3);font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;color:var(--color-muted);
}
.on-dark .figure figcaption{color:var(--color-on-dark-muted)}

/* 07 — Header / navigation ------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--color-primary-deep);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.header-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sp-4);min-height:var(--header-h);
}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img{width:190px;height:53px;display:block}
@media (min-width:1024px){.brand img{width:222px;height:62px}}
.brand:focus-visible{outline-offset:6px}

.nav-toggle{
  display:inline-flex;align-items:center;gap:.55rem;
  background:transparent;border:1px solid rgba(255,255,255,.32);
  color:#fff;padding:.6rem .85rem;border-radius:var(--radius);
  font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;min-height:44px;
}
.nav-toggle:hover{border-color:var(--color-accent);color:var(--color-accent)}
.nav-toggle-bars{position:relative;width:18px;height:12px;flex:none}
.nav-toggle-bars span{
  position:absolute;left:0;width:100%;height:2px;background:currentColor;
  transition:transform var(--dur) var(--ease),opacity .2s var(--ease);
}
.nav-toggle-bars span:nth-child(1){top:0}
.nav-toggle-bars span:nth-child(2){top:5px}
.nav-toggle-bars span:nth-child(3){top:10px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.site-nav{display:none}
.site-nav.is-open{
  display:block;flex-basis:100%;width:100%;
  max-height:calc(100vh - var(--header-h) - 1rem);overflow-y:auto;
}
.site-nav ul{display:flex;flex-direction:column;padding:var(--sp-2) 0 var(--sp-5)}
.site-nav a:not(.btn){
  display:block;padding:.95rem .25rem;
  color:var(--color-on-dark);text-decoration:none;font-weight:600;
  border-bottom:1px solid var(--color-rule-dark);
}
.site-nav a:not(.btn):hover,.site-nav a[aria-current="page"]{color:var(--color-accent)}
.site-nav .nav-cta{margin-top:var(--sp-4)}
.site-nav .nav-cta .btn{width:100%}
.header-actions{display:none}

@media (min-width:1024px){
  .nav-toggle{display:none}
  .site-nav,.site-nav.is-open{display:block!important;flex-basis:auto;width:auto;max-height:none;overflow:visible}
  .site-nav ul{flex-direction:row;align-items:center;gap:var(--sp-5);padding:0}
  .site-nav a:not(.btn){
    padding:.4rem 0;border-bottom:0;font-size:.97rem;font-weight:600;
    position:relative;
  }
  /* Brass underline that draws from the left on hover */
  .site-nav a:not(.btn)::after{
    content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;
    background:var(--color-accent);transform:scaleX(0);transform-origin:left;
    transition:transform var(--dur) var(--ease);
  }
  .site-nav a:not(.btn):hover::after,.site-nav a[aria-current="page"]::after{transform:scaleX(1)}
  .site-nav .nav-cta{display:none}
  .header-actions{display:flex;align-items:center;gap:.6rem;flex:none}
  /* Secondary CTA — outlined so the brass phone button stays the primary action */
  .header-cta{
    display:inline-flex;align-items:center;flex:none;
    padding:.76rem 1.15rem;
    border:2px solid rgba(210,164,65,.55);border-radius:var(--radius);
    color:#fff;font-weight:700;font-size:.95rem;
    text-decoration:none;white-space:nowrap;
    transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
  }
  .header-cta:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-primary-dark)}
  .header-phone{
    display:inline-flex;align-items:center;gap:.6rem;flex:none;
    background:var(--color-accent);color:var(--color-primary-dark);
    padding:.8rem 1.25rem;border-radius:var(--radius);
    font-weight:800;text-decoration:none;letter-spacing:.005em;
    transition:background-color var(--dur) var(--ease);
  }
  .header-phone:hover{background:var(--color-accent-bright);color:var(--color-primary-dark)}
  .header-phone svg{width:18px;height:18px;fill:currentColor;flex:none}
}

/* Narrow-desktop band: full nav + both CTAs only fit once the header tightens
   and the nav labels shorten ("Roofing Services" -> "Services"). */
@media (min-width:1024px) and (max-width:1279px){
  .brand img{width:176px;height:49px}
  .site-nav ul{gap:.9rem}
  .site-nav a:not(.btn){font-size:.89rem}
  .header-actions{gap:.5rem}
  .header-bar{gap:.75rem}
  .header-cta{padding:.72rem .9rem;font-size:.89rem}
  .header-phone{padding:.72rem .9rem;font-size:.93rem}
  .nav-long{display:none}
}

/* 08 — Hero --------------------------------------------------------------- */
.hero{position:relative;background:var(--color-primary-deep);color:#fff;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr}
.hero-body{position:relative;z-index:2;padding-block:var(--sp-7) var(--sp-6)}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;
  margin-bottom:var(--sp-4);padding:.42rem .85rem .42rem .7rem;
  border:1px solid rgba(210,164,65,.5);border-radius:100px;
  font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--color-accent);
}
.hero-eyebrow svg{width:14px;height:14px;fill:var(--color-accent);flex:none}

.hero h1{color:#fff;margin-bottom:var(--sp-4);max-width:15ch}
.hero h1 em{font-style:normal;color:var(--color-accent);display:block}
.hero-copy{
  font-size:clamp(1.02rem,1.6vw,1.14rem);line-height:1.6;
  color:var(--color-on-dark-muted);max-width:44ch;margin-bottom:var(--sp-5);
}
.hero .btn-row{margin-bottom:var(--sp-5)}

/* Areas line: reinforces local relevance without repeating the trust strip. */
.hero-areas{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .5rem;
  padding-top:var(--sp-4);border-top:1px solid rgba(255,255,255,.14);
  font-size:.84rem;color:var(--color-on-dark-muted);max-width:none;
}
.hero-areas b{
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-accent);
}
.hero-areas span::after{content:" ·";color:rgba(210,164,65,.75)}
.hero-areas span:last-child::after{content:""}

/* Hero photograph.
   Mobile: a band beneath the copy, so the text sits on clean navy and the roof
   is actually visible — rather than a photo washed out to 10% behind text.
   Desktop: the right-hand half, raked along its left edge. */
.hero-media{
  position:relative;width:100%;z-index:0;
  height:clamp(180px,28vh,260px);
  --rake:26px;
}
.hero-media img{
  position:relative;z-index:1;width:100%;height:100%;object-fit:cover;
  clip-path:polygon(0 var(--rake),100% 0,100% 100%,0 100%);
}
.hero-media::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--color-accent);
  clip-path:polygon(0 var(--rake),100% 0,100% 100%,0 100%);
  transform:translateY(-3px);
}
.hero-media::after{
  content:"";position:absolute;inset:0;z-index:2;
  clip-path:polygon(0 var(--rake),100% 0,100% 100%,0 100%);
  background:linear-gradient(to bottom,rgba(0,29,49,.42),rgba(0,29,49,.06));
}

@media (min-width:768px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero-body{
    padding-block:var(--sp-8);padding-right:var(--sp-6);
    min-height:480px;display:flex;flex-direction:column;justify-content:center;
  }
  .hero-media{position:absolute;inset:0;left:auto;right:0;width:50vw;height:auto}
  /* The raked left edge is the roof-pitch motif. A brass sliver sits behind the
     photograph, offset so it shows only along the rake. */
  .hero-media::before{
    clip-path:polygon(var(--pitch) 0,100% 0,100% 100%,0 100%);
    transform:translateX(-3px);
  }
  .hero-media img,.hero-media::after{
    clip-path:polygon(var(--pitch) 0,100% 0,100% 100%,0 100%);
  }
  /* Photograph is light now, so only the join needs shading. */
  .hero-media::after{background:linear-gradient(to right,rgba(0,29,49,.80),rgba(0,29,49,0) 30%)}
}
@media (min-width:1024px){
  /* Scoped to the hero so the small figure clips keep their subtler 56px cut */
  .hero-media{--pitch:72px}
  .hero-body{min-height:560px}
}
/* Narrow desktop: the two hero CTAs overflow their column by a few pixels at
   1024px, so trim their padding and gap rather than let them stack. */
@media (min-width:768px) and (max-width:1279px){
  .hero .btn--lg{padding:1rem 1.05rem;min-height:56px;font-size:1rem}
  .hero .btn-row{gap:.625rem}
  .hero-body{padding-right:var(--sp-5)}
}

/* Trust strip beneath the hero */
.trust-strip{background:var(--color-primary-dark);border-top:1px solid rgba(210,164,65,.28)}
.trust-strip ul{
  display:grid;grid-template-columns:repeat(2,1fr);
}
.trust-strip li{
  display:flex;align-items:center;gap:.65rem;
  padding:1rem .35rem;font-size:.87rem;font-weight:600;color:var(--color-on-dark);
  border-bottom:1px solid var(--color-rule-dark);
}
.trust-strip li:nth-child(odd){border-right:1px solid var(--color-rule-dark)}
.trust-strip svg{width:19px;height:19px;fill:var(--color-accent);flex:none}
@media (min-width:900px){
  .trust-strip ul{grid-template-columns:repeat(4,1fr)}
  .trust-strip li{border-bottom:0;justify-content:center;padding:1.15rem .5rem}
  .trust-strip li:nth-child(odd){border-right:0}
  .trust-strip li+li{border-left:1px solid var(--color-rule-dark)}
}

/* 09 — Intro + numbered service rows -------------------------------------- */
.intro-grid{display:grid;gap:var(--sp-7);align-items:center}
@media (min-width:900px){
  .intro-grid{grid-template-columns:1.15fr .85fr;gap:var(--sp-8)}
}
.intro-figure{position:relative}
.intro-figure .figure img{aspect-ratio:448/641;max-height:520px}
/* Fine brass frame offset behind the portrait image */
.intro-figure::before{
  content:"";position:absolute;inset:auto auto -14px -14px;
  width:58%;height:58%;border-left:2px solid var(--color-accent);
  border-bottom:2px solid var(--color-accent);z-index:0;
}
@media (max-width:899px){ .intro-figure::before{display:none} }

/* Numbered editorial service rows — deliberately not cards */
.svc-list{border-top:1px solid var(--color-border)}
.svc-row{
  display:grid;gap:var(--sp-4);
  padding-block:var(--sp-6);
  border-bottom:1px solid var(--color-border);
}
.svc-num{
  font-size:1.05rem;font-weight:800;letter-spacing:.14em;
  color:var(--color-accent-deep);
}
.svc-row h3{margin-bottom:var(--sp-3)}
.svc-row p{color:var(--color-muted);margin-bottom:var(--sp-4)}
.svc-row p:last-of-type{margin-bottom:0}
.svc-link{
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:700;color:var(--color-primary);text-decoration:none;
  font-size:.95rem;
}
.svc-link::after{
  content:"";width:15px;height:9px;background:currentColor;
  clip-path:polygon(0 3px,9px 3px,9px 0,15px 4.5px,9px 9px,9px 6px,0 6px);
  transition:transform var(--dur) var(--ease);
}
.svc-link:hover{color:var(--color-accent-deep)}
.svc-link:hover::after{transform:translateX(4px)}
@media (min-width:768px){
  .svc-row{grid-template-columns:88px minmax(0,1fr) minmax(0,.85fr);gap:var(--sp-6);align-items:start}
  .svc-row .figure img{aspect-ratio:405/250}
}
@media (min-width:1024px){
  .svc-row{grid-template-columns:110px minmax(0,1fr) minmax(0,.8fr);gap:var(--sp-7)}
}

/* 10 — Repairs band ------------------------------------------------------- */
.band-split{display:grid;gap:var(--sp-6);align-items:center}
@media (min-width:900px){
  .band-split{grid-template-columns:1fr 1fr;gap:var(--sp-8)}
  .band-split--reverse .band-split__media{order:2}
}
.band-split__media .figure img{aspect-ratio:405/250}

/* Tick list used inside bands */
.tick-list{display:grid;gap:.85rem;margin-top:var(--sp-5)}
.tick-list li{
  position:relative;padding-left:1.9rem;font-size:.98rem;line-height:1.55;
}
.tick-list li::before{
  content:"";position:absolute;left:0;top:.4rem;width:1.05rem;height:.62rem;
  border-left:2.5px solid var(--color-accent);
  border-bottom:2.5px solid var(--color-accent);
  transform:rotate(-45deg);
}
@media (min-width:600px){ .tick-list--2{grid-template-columns:1fr 1fr;gap:.85rem var(--sp-5)} }

/* 11 — Problems grid (hairline, no cards) --------------------------------- */
.problem-grid{
  display:grid;gap:0;
  border-top:1px solid var(--color-border);
}
.problem{
  padding:var(--sp-5) 0;border-bottom:1px solid var(--color-border);
}
.problem h3{
  display:flex;gap:.75rem;align-items:baseline;
  font-size:1.1rem;margin-bottom:var(--sp-2);
}
.problem h3 span{
  color:var(--color-accent-deep);font-size:.85rem;font-weight:800;
  letter-spacing:.1em;flex:none;
}
.problem p{color:var(--color-muted);font-size:.97rem;margin:0}
@media (min-width:768px){
  .problem-grid{grid-template-columns:1fr 1fr;column-gap:var(--sp-8)}
}
@media (min-width:1024px){
  .problem-grid{column-gap:var(--sp-9)}
  .problem{padding:var(--sp-6) 0}
}

/* 12 — Editorial band (why professional) ---------------------------------- */
.editorial{display:grid;gap:var(--sp-6)}
@media (min-width:900px){
  .editorial{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--sp-8)}
}
.editorial-points{display:grid;gap:var(--sp-5)}
.editorial-point{
  padding-left:var(--sp-5);border-left:2px solid rgba(210,164,65,.42);
}
.editorial-point h3{font-size:1.12rem;margin-bottom:var(--sp-2)}
.editorial-point p{margin:0;color:var(--color-on-dark-muted);font-size:.97rem}
@media (min-width:640px){ .editorial-points{grid-template-columns:1fr 1fr;gap:var(--sp-5) var(--sp-6)} }

/* 13 — Why choose (hairline strip) ---------------------------------------- */
.reasons{display:grid;gap:0;border-top:1px solid var(--color-border)}
.reason{padding:var(--sp-5) 0;border-bottom:1px solid var(--color-border)}
.reason h3{font-size:1.05rem;margin-bottom:var(--sp-2)}
.reason p{margin:0;font-size:.95rem;color:var(--color-muted)}
.reason-mark{
  width:34px;height:34px;margin-bottom:var(--sp-3);
  display:grid;place-items:center;
  border:1.5px solid var(--color-accent);border-radius:50%;
}
.reason-mark svg{width:16px;height:16px;fill:var(--color-accent-deep)}
@media (min-width:640px){ .reasons{grid-template-columns:1fr 1fr;column-gap:var(--sp-7)} }
@media (min-width:1024px){ .reasons{grid-template-columns:repeat(3,1fr);column-gap:var(--sp-7)} }

/* 14 — Showcase (asymmetric composition) ---------------------------------- */
.showcase{display:grid;gap:var(--sp-4)}
.showcase__lead .figure img{aspect-ratio:448/641;max-height:640px}
.showcase__side{display:grid;gap:var(--sp-4)}
.showcase__side .figure img{aspect-ratio:405/250}
@media (min-width:768px){
  .showcase{grid-template-columns:1.1fr 1fr;gap:var(--sp-5)}
  /* Lead image stretches to match the stacked column beside it */
  .showcase__lead{display:flex}
  .showcase__lead .figure{display:flex;flex-direction:column;width:100%}
  .showcase__lead .figure img{flex:1 1 auto;min-height:420px;height:auto;aspect-ratio:auto;max-height:none}
}

/* 15 — Process ------------------------------------------------------------ */
.process{display:grid;gap:var(--sp-5);counter-reset:step}
.step{position:relative;padding-top:var(--sp-5);border-top:2px solid var(--color-accent)}
.step::before{
  counter-increment:step;content:"0" counter(step);
  display:block;margin-bottom:var(--sp-3);
  font-size:.9rem;font-weight:800;letter-spacing:.16em;color:var(--color-accent-deep);
}
.step h3{font-size:1.08rem;margin-bottom:var(--sp-2)}
.step p{margin:0;font-size:.95rem;color:var(--color-muted)}
.on-dark .step p{color:var(--color-on-dark-muted)}
.on-dark .step::before{color:var(--color-accent)}
@media (min-width:640px){ .process{grid-template-columns:1fr 1fr;gap:var(--sp-6)} }
@media (min-width:1024px){ .process{grid-template-columns:repeat(4,1fr);gap:var(--sp-5)} }

/* 16 — Coverage ----------------------------------------------------------- */
.coverage-band{position:relative;background:var(--color-primary);overflow:hidden}
.coverage-band__bg{position:absolute;inset:0}
.coverage-band__bg img{width:100%;height:100%;object-fit:cover;opacity:.4}
.coverage-band__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,var(--color-primary) 12%,rgba(0,44,73,.72));
}
.coverage-band .container{position:relative;z-index:1}
.area-list{
  display:grid;grid-template-columns:1fr 1fr;gap:.55rem var(--sp-5);
  margin-top:var(--sp-5);
}
.area-list li{
  position:relative;padding-left:1.1rem;font-size:.94rem;
  color:var(--color-on-dark);
}
.area-list li::before{
  content:"";position:absolute;left:0;top:.62rem;width:5px;height:5px;
  background:var(--color-accent);
}
@media (min-width:640px){ .area-list{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1024px){ .area-list{grid-template-columns:repeat(4,1fr)} }
.area-list--light li{color:var(--color-text)}
/* Inside a two-column band the list has half the width — fewer columns. */
.band-split .area-list{grid-template-columns:1fr 1fr;margin-top:0}
@media (min-width:1200px){ .band-split .area-list{grid-template-columns:repeat(3,1fr)} }

/* 17 — FAQ accordion ------------------------------------------------------ */
.faq{border-top:1px solid var(--color-border)}
.faq-item{border-bottom:1px solid var(--color-border)}
.faq-q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);
  width:100%;padding:1.35rem 0;
  background:none;border:0;cursor:pointer;text-align:left;
  font-size:1.03rem;font-weight:700;color:var(--color-heading);
  line-height:1.45;
}
.faq-q:hover{color:var(--color-accent-deep)}
.faq-icon{
  position:relative;flex:none;width:22px;height:22px;margin-top:.15rem;
  border:1.5px solid var(--color-accent);border-radius:50%;
}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--color-accent-deep);
  transform:translate(-50%,-50%);
}
.faq-icon::before{width:9px;height:1.8px}
.faq-icon::after{width:1.8px;height:9px;transition:transform var(--dur) var(--ease)}
.faq-q[aria-expanded="true"] .faq-icon::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-a{
  overflow:hidden;height:0;
  transition:height var(--dur) var(--ease);
}
.faq-a__inner{padding:0 0 1.35rem;max-width:var(--maxw-text);color:var(--color-muted)}
.faq-a__inner p{font-size:.98rem}

/* 18 — CTA band ----------------------------------------------------------- */
.cta-band{position:relative;background:var(--color-primary-deep);overflow:hidden}
/* Fine roofline chevrons as a subtle repeating texture */
.cta-band::before{
  content:"";position:absolute;inset:0;opacity:.13;
  background-image:
    linear-gradient(45deg,transparent 48%,var(--color-accent) 48%,var(--color-accent) 51%,transparent 51%),
    linear-gradient(-45deg,transparent 48%,var(--color-accent) 48%,var(--color-accent) 51%,transparent 51%);
  background-size:34px 34px;
}
.cta-band .container{position:relative;z-index:1}
.cta-inner{text-align:center;max-width:var(--maxw-center);margin-inline:auto}
.cta-phone{
  display:inline-flex;align-items:center;gap:.7rem;
  margin:var(--sp-2) 0 var(--sp-5);
  font-size:clamp(1.9rem,5.6vw,2.9rem);font-weight:800;letter-spacing:-.02em;
  color:var(--color-accent);text-decoration:none;
}
.cta-phone svg{width:.78em;height:.78em;fill:currentColor;flex:none}
.cta-phone:hover{color:var(--color-accent-bright)}
.cta-or{
  display:block;margin-top:var(--sp-5);
  font-size:.93rem;color:var(--color-on-dark-muted);
}
.cta-or a{color:var(--color-accent-bright);font-weight:600}

/* 19 — Footer ------------------------------------------------------------- */
.site-footer{background:var(--color-primary-dark);color:var(--color-on-dark-muted);font-size:.94rem}
.footer-grid{display:grid;gap:var(--sp-6);padding-block:var(--sp-8)}
@media (min-width:700px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr} }
@media (min-width:1024px){ .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:var(--sp-7)} }
.footer-brand img{width:210px;height:58px;margin-bottom:var(--sp-4)}
.footer-brand p{max-width:34ch;font-size:.92rem;line-height:1.65}
.site-footer h2{
  font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;margin-bottom:var(--sp-4);
}
.footer-links li+li{margin-top:.15rem}
.footer-links a{display:inline-block;padding-block:.4rem;color:var(--color-on-dark-muted);text-decoration:none}
.footer-links a:hover{color:var(--color-accent)}
.footer-contact li{margin-bottom:var(--sp-4)}
.footer-contact a{display:inline-block;padding-block:.3rem;color:#fff;text-decoration:none;font-weight:700;font-size:1rem}
.footer-contact a:hover{color:var(--color-accent)}
.footer-contact span{
  display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-muted-light);margin-bottom:.25rem;font-weight:700;
}
.footer-bottom{
  border-top:1px solid var(--color-rule-dark);
  padding-block:var(--sp-5);
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);
  justify-content:space-between;align-items:center;
  font-size:.85rem;color:var(--color-muted-light);
}
.footer-bottom p{margin:0}
.footer-bottom a{color:var(--color-muted-light)}

/* 20 — Forms -------------------------------------------------------------- */
.form-panel{
  background:#fff;border:1px solid var(--color-border);
  padding:var(--sp-5);box-shadow:var(--shadow-sm);
}
@media (min-width:640px){ .form-panel{padding:var(--sp-6)} }
.form-grid{display:grid;gap:var(--sp-4)}
@media (min-width:640px){ .form-grid--2{grid-template-columns:1fr 1fr} }
.field label{
  display:block;margin-bottom:.45rem;
  font-size:.87rem;font-weight:700;color:var(--color-heading);
}
.field .req{color:var(--color-accent-deep)}
.field input,.field textarea,.field select{
  width:100%;padding:.85rem .9rem;min-height:50px;
  font:inherit;font-size:1rem;color:var(--color-text);
  background:var(--color-background);
  border:1px solid var(--color-border-strong);border-radius:var(--radius);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--color-muted-light)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(0,44,73,.14);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#a8271b}
.field-hint{margin:.4rem 0 0;font-size:.83rem;color:var(--color-muted)}
.field-error{margin:.4rem 0 0;font-size:.85rem;font-weight:600;color:#a8271b}
/* Honeypot — hidden from people, reachable by bots */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-alert{
  padding:var(--sp-4);margin-bottom:var(--sp-5);
  border-left:4px solid #a8271b;background:#fdf3f2;
  font-size:.94rem;color:#6d1b12;
}
.form-alert h2{font-size:1rem;margin-bottom:.4rem;color:#6d1b12}
.form-alert ul{margin-top:.5rem}
.form-alert li{position:relative;padding-left:1rem;margin-top:.25rem}
.form-alert li::before{content:"";position:absolute;left:0;top:.6rem;width:4px;height:4px;background:currentColor}
.form-consent{font-size:.85rem;color:var(--color-muted);margin-top:var(--sp-2)}

/* Contact detail panels */
.contact-methods{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-6)}
@media (min-width:520px){ .contact-methods{grid-template-columns:1fr 1fr} }
.contact-method{
  display:block;padding:var(--sp-5);text-decoration:none;
  background:var(--color-primary);color:#fff;
  border:1px solid var(--color-primary);
  transition:background-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.contact-method:hover{background:var(--color-primary-tint);color:#fff;transform:translateY(-2px)}
.contact-method--accent{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-primary-dark)}
.contact-method--accent:hover{background:var(--color-accent-bright);color:var(--color-primary-dark)}
.contact-method span{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;opacity:.82;margin-bottom:.4rem;
}
.contact-method strong{
  display:block;font-size:clamp(1.2rem,3.4vw,1.5rem);font-weight:800;
  letter-spacing:-.02em;color:inherit;word-break:break-word;
}
.map-frame{
  border:1px solid var(--color-border);background:var(--color-surface-alt);
  position:relative;aspect-ratio:16/10;overflow:hidden;
}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-fallback{
  position:absolute;inset:0;display:grid;place-content:center;gap:.5rem;
  text-align:center;padding:var(--sp-5);color:var(--color-muted);font-size:.92rem;
}

/* 21 — Page header (inner pages) ------------------------------------------ */
.page-header{
  position:relative;background:var(--color-primary-deep);color:#fff;
  padding-block:var(--sp-7) var(--sp-7);overflow:hidden;
}
@media (min-width:768px){ .page-header{padding-block:var(--sp-8)} }
.page-header__bg{position:absolute;inset:0}
.page-header__bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.page-header__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,var(--color-primary-deep) 20%,rgba(0,29,49,.72));
}
.page-header .container{position:relative;z-index:1}
/* The page header is a dark ground: headings and the brass eyebrow must
   use their light-ground values, as .on-dark sections do. */
.page-header h1,.page-header h2,.page-header h3{color:#fff}
.page-header .eyebrow{color:var(--color-accent)}
.page-header .hero-eyebrow{color:var(--color-accent)}
.page-header h1{max-width:20ch;margin-bottom:var(--sp-4)}
.page-header .lead{max-width:var(--maxw-text);color:var(--color-on-dark-muted)}
.breadcrumb{margin-bottom:var(--sp-5);font-size:.84rem}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.breadcrumb li{display:flex;align-items:center;gap:.45rem;color:var(--color-on-dark-muted)}
.breadcrumb li+li::before{content:"";width:4px;height:4px;background:var(--color-accent);flex:none}
.breadcrumb a{display:inline-block;padding-block:.25rem;color:var(--color-on-dark-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--color-accent)}
.breadcrumb [aria-current]{color:#fff;font-weight:600}

/* 22 — Sticky mobile call bar --------------------------------------------- */
.sticky-call{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--color-primary-deep);
  border-top:1px solid rgba(210,164,65,.4);
  box-shadow:0 -6px 20px rgba(0,23,41,.28);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%);
  transition:transform var(--dur) var(--ease);
}
.sticky-call.is-visible{transform:translateY(0)}
.sticky-call a{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem .5rem;min-height:56px;
  font-size:.95rem;font-weight:800;text-decoration:none;
}
.sticky-call svg{width:18px;height:18px;fill:currentColor;flex:none}
.sticky-call__call{background:var(--color-accent);color:var(--color-primary-dark)}
.sticky-call__enquire{color:#fff}
@media (min-width:1024px){ .sticky-call{display:none} }
@media (max-width:1023px){ body{padding-bottom:0} .has-sticky-call{padding-bottom:56px} }

/* 23 — Utilities ---------------------------------------------------------- */
.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;
}
.text-center{text-align:center}
.mt-6{margin-top:var(--sp-6)}
.mb-0{margin-bottom:0}
.stack>*+*{margin-top:var(--sp-4)}

/* Scroll reveal. The hidden state is applied only once JS has confirmed
   IntersectionObserver is available and has installed the observer, so a script
   error or an unsupported browser leaves the content plainly visible. */
.reveal-on .reveal{opacity:0;transform:translateY(18px)}
.reveal-on .reveal.is-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}

/* 24 — Motion & print ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveal-on .reveal{opacity:1;transform:none}
  .faq-a{transition:none}
}
@media print{
  .site-header,.sticky-call,.cta-band,.hero-media,.map-frame{display:none!important}
  body{color:#000;background:#fff}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}