/* ============================================================
   TECTUM ROOFING — Homepage styles
   Faithful rebuild of the reference site, re-skinned in the
   Tectum brand (olive + cream, pulled from the logo).
   Plain CSS. No frameworks.
   ------------------------------------------------------------
   Contents:
   1.  Brand tokens (colours, type, spacing)
   2.  Fonts (self-hosted Manrope)
   3.  Base / reset
   4.  Layout helpers (wrap, grids, sections)
   5.  Buttons
   6.  Header / nav
   7.  Hero
   8.  Intro / About
   9.  Parallax band
   10. Services
   11. What sets us apart
   12. Projects
   13. Contact + form
   14. Footer
   15. Reveal animation
   16. Responsive (tablet + mobile)
   ============================================================ */

/* ---------- 1. BRAND TOKENS ---------- */
:root{
  /* Colours — olive & cream are exact from Logo.png (#565838 / #ffffff) */
  --olive:        #565838;   /* brand primary */
  --olive-deep:   #444629;   /* hover / deeper bands */
  --olive-darker: #2c2e1c;   /* dark contact section */
  --ink:          #23261a;   /* body text */
  --muted:        #63655a;   /* secondary text */
  --cream:        #f6f2e9;   /* page background */
  --paper:        #ffffff;   /* cards / panels */
  --sand:         #ece5d6;   /* soft panels */
  --line:         #e0d9c9;   /* borders */
  --brass:        #a8894f;   /* warm metallic accent */
  --on-dark:      #f4efe4;   /* text on dark */
  --on-dark-mut:  #c7c6b8;   /* muted text on dark */

  /* Type */
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale */
  --s-1: .5rem;  --s-2: 1rem;  --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;   --s-6: 4rem;  --s-7: 6rem;    --s-8: 8rem;

  --wrap: 1200px;
  --radius: 4px;
  --shadow: 0 18px 40px -24px rgba(35,38,26,.45);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. FONTS (self-hosted, variable) ---------- */
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 3. BASE / RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0 0 .4em; line-height:1.12; letter-spacing:-.02em; font-weight:800; }
h1{ font-size:clamp(2.5rem,6vw,4.5rem); }
h2{ font-size:clamp(1.9rem,3.4vw,2.9rem); }
h3{ font-size:1.25rem; letter-spacing:-.01em; }
p{ margin:0 0 1rem; }
:focus-visible{ outline:3px solid var(--brass); outline-offset:3px; border-radius:2px; }

/* ---------- 4. LAYOUT HELPERS ---------- */
.wrap{ width:min(var(--wrap),100% - 2.5rem); margin-inline:auto; }
.section{ padding:clamp(3.5rem,8vw,7rem) 0; }
.grid-2{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (min-width:900px){ .grid-2{ grid-template-columns:1fr 1fr; } }

.eyebrow{
  font-size:.8rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); margin:0 0 .9rem;
}
.eyebrow--light{ color:#d3b783; }

.section-head{ max-width:820px; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head__lead{ color:var(--muted); font-size:1.05rem; margin-bottom:1.6rem; }

/* ---------- 5. BUTTONS ---------- */
.btn{
  --btn-bg:var(--olive); --btn-fg:var(--on-dark); --btn-bd:var(--olive);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.9rem; font-weight:700; font-size:.95rem; letter-spacing:.02em;
  border:2px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
  border-radius:var(--radius); cursor:pointer;
  transition:transform .18s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn--primary{ --btn-bg:var(--olive); --btn-fg:#fff; --btn-bd:var(--olive); }
.btn--primary:hover{ background:var(--olive-deep); border-color:var(--olive-deep); }
.btn--on-dark{ --btn-bg:#fff; --btn-fg:var(--olive); --btn-bd:#fff; }
.btn--on-dark:hover{ background:var(--brass); border-color:var(--brass); color:#fff; }
.btn--ghost{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.7); }
.btn--ghost:hover{ background:#fff; color:var(--olive); border-color:#fff; }
.btn--block{ width:100%; }

/* ---------- 6. HEADER / NAV ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--olive);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled{ box-shadow:0 10px 30px -18px rgba(0,0,0,.6); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:clamp(96px,12vw,148px); }
.site-logo{ display:flex; align-items:center; }
.site-logo img{
  height:clamp(74px,10vw,124px); width:auto; max-width:300px; object-fit:contain;
  /* cropped logo keeps its olive tile, so it blends into the olive header */
}
.nav{ display:flex; align-items:center; gap:clamp(1rem,2vw,2rem); }
/* Six items plus the CTA is a lot of nav — tighten it up before the
   mobile breakpoint rather than letting it wrap. */
@media (min-width:901px) and (max-width:1240px){
  .nav{ gap:1rem; }
  .nav__link{ font-size:.9rem; }
  .nav__link--cta{ padding:.45rem .85rem; }
  .site-logo img{ height:clamp(64px,7vw,88px); }
}
.nav__link{
  position:relative; color:var(--on-dark); font-weight:600; font-size:.98rem; padding:.4rem 0;
  transition:color .2s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--brass); transition:width .25s var(--ease);
}
.nav__link:hover{ color:#fff; }
.nav__link:hover::after{ width:100%; }
.nav__link--cta{
  border:2px solid rgba(255,255,255,.55); border-radius:var(--radius);
  padding:.5rem 1.1rem; margin-left:.4rem;
}
.nav__link--cta::after{ display:none; }
.nav__link--cta:hover{ background:#fff; color:var(--olive); border-color:#fff; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; width:44px; height:44px;
  border:0; background:transparent; cursor:pointer; padding:10px;
}
.nav-toggle span{ height:2px; width:100%; background:#fff; border-radius:2px; transition:transform .25s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- 7. HERO ---------- */
.hero{ position:relative; display:flex; align-items:center;
  min-height:min(82svh,760px); overflow:hidden; }
.hero__media{
  position:absolute; inset:0;
  background:url("../images/hero-roof-aerial.jpg") center center/cover no-repeat;
  transform:scale(1.05);
}
.hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(30,32,20,.86) 0%, rgba(44,46,28,.62) 45%, rgba(44,46,28,.28) 100%);
}
.hero__inner{ position:relative; padding:clamp(3.5rem,10vw,6rem) 0; max-width:760px; }
.hero__eyebrow{
  color:#e9dcc2; font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:.82rem;
  margin:0 0 1.1rem;
}
.hero__title{ color:#fff; margin:0 0 1rem; text-shadow:0 2px 24px rgba(0,0,0,.25); }
.hero__lead{ color:var(--on-dark); font-size:clamp(1.05rem,1.8vw,1.3rem); max-width:60ch; margin:0 0 2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

/* ---------- 8. INTRO / ABOUT ---------- */
.intro{ background:var(--paper); }
.intro__media img{ width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow); }

/* The clip is portrait 9:16. Shown whole it was only ~350px wide in the
   column, so it now fills the full width and is cropped to 4:5 — the torch
   and hands sit centre frame, so cover keeps the action and trims the
   empty sky and decking at the edges. */
.intro__video{
  display:block; width:100%; height:auto;
  aspect-ratio:4/5; object-fit:cover; object-position:center center;
  border-radius:var(--radius); box-shadow:var(--shadow);
  background:var(--olive-darker);
}
.grid-2--text-media .intro__media{ order:2; }

/* ---------- 9. PARALLAX BAND ---------- */
.band{ position:relative; height:clamp(220px,32vw,360px); overflow:hidden; }
.band__media{
  position:absolute; inset:0;
  background:url("../images/roof-aerial-gable.jpg") center/cover no-repeat fixed;
}
.band__overlay{ position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(44,46,28,.72), rgba(44,46,28,.55)); }

/* ---------- 10. SERVICES ---------- */
.services{ background:var(--cream); }
.cards{ list-style:none; margin:0; padding:0; display:grid; gap:1.5rem; }
.cards--4{ grid-template-columns:repeat(4,1fr); }
.cards--5{ grid-template-columns:repeat(5,1fr); }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--sand); }
.card__media{ aspect-ratio:4/3; overflow:hidden; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.card:hover .card__media img{ transform:scale(1.06); }
.card__title{
  margin:0; padding:1.1rem 1.25rem; font-size:1.1rem;
  border-top:3px solid var(--olive);
}

/* ---------- 11. WHAT SETS US APART ---------- */
.apart{ background:var(--paper); }
.apart__media img{ width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow); }
.feature{ padding:1.1rem 0; border-top:1px solid var(--line); }
.feature:first-of-type{ margin-top:.5rem; }
.feature__title{ color:var(--olive); margin-bottom:.35rem; }
.feature p{ color:var(--muted); margin:0; }
.apart .btn{ margin-top:1.5rem; }

/* ---------- 12. PROJECTS ---------- */
.projects{ background:var(--sand); }
.project{ list-style:none; }
.project__media{
  aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:1rem;
}
.project__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.project:hover .project__media img{ transform:scale(1.06); }
.project__title{ margin:0 0 .25rem; font-size:1.15rem; }
.project__desc{ color:var(--muted); font-size:.95rem; margin:0; }

/* ---------- 13. CONTACT + FORM ---------- */
.contact{ background:var(--olive-darker); color:var(--on-dark); }
.contact h2{ color:#fff; }
.contact p{ color:var(--on-dark-mut); }
.grid-2--contact{ align-items:center; }
.contact__details{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:.9rem; }
.contact__details li{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline; }
.contact__details span{
  min-width:64px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); font-weight:700;
}
.contact__details a:hover{ color:#fff; text-decoration:underline; }

.contact-form{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius); padding:clamp(1.5rem,3vw,2.25rem);
}
.field{ margin-bottom:1.1rem; }
.field-row{ display:grid; gap:1.1rem; }
@media (min-width:560px){ .field-row{ grid-template-columns:1fr 1fr; } }
.field label{
  display:block; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--on-dark-mut); margin-bottom:.4rem;
}
.field input,.field select,.field textarea{
  width:100%; font:inherit; color:#fff; background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.18); border-radius:var(--radius);
  padding:.8rem .9rem; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea{ resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:rgba(255,255,255,.45); }
.field select{ appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brass); background:rgba(0,0,0,.34);
}
.form-note{
  margin:1rem 0 0; padding:.85rem 1rem; border-radius:var(--radius);
  background:rgba(168,137,79,.18); border:1px solid var(--brass); color:#f0e6d2; font-size:.92rem;
}
/* A failed send has to look different from a successful one */
.form-note--error{
  background:rgba(190,72,60,.22); border-color:#c9695c; color:#ffd9d2;
}
/* Honeypot: off-screen for bots to find, invisible and unreachable for
   people. display:none would let some bots skip it. */
.hp-field{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; opacity:0; pointer-events:none;
}

/* The submit button while a message is in flight */
.contact-form .btn:disabled{ opacity:.65; cursor:progress; transform:none; box-shadow:none; }

/* ---------- 14. FOOTER ---------- */
.site-footer{ background:var(--olive); color:var(--on-dark); }
.footer__grid{
  display:grid; gap:2.5rem; padding:clamp(3rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem);
  grid-template-columns:1fr;
}
@media (min-width:700px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1040px){ .footer__grid{ grid-template-columns:1.8fr 1fr 1fr 1.1fr; } }
.footer__brand img{ height:92px; width:auto; margin-bottom:1rem; }
.footer__brand p{ color:var(--on-dark-mut); max-width:42ch; font-size:.95rem; }
.footer__col h4{
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
  margin-bottom:1.1rem;
}
.footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.footer__col a,.footer__contact li{ color:var(--on-dark-mut); font-size:.96rem; }
.footer__col a{ transition:color .2s var(--ease); }
.footer__col a:hover{ color:#fff; }
.socials{ display:flex; gap:.75rem; margin-top:1.25rem; }
.socials a{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; transition:background .2s var(--ease), transform .2s var(--ease);
}
.socials a:hover{ background:var(--brass); transform:translateY(-2px); }
.footer__bar{ border-top:1px solid rgba(255,255,255,.12); padding:1.25rem 0; }
.footer__bar-inner{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center; justify-content:space-between; }
.footer__legal{ margin:0; font-size:.88rem; }
.footer__legal a{ color:var(--on-dark-mut); transition:color .2s var(--ease); }
.footer__legal a:hover{ color:#fff; text-decoration:underline; }
.footer__bar p{ margin:0; font-size:.88rem; color:var(--on-dark-mut); }

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:60;
  display:inline-flex; align-items:center; gap:.6rem;
  background:#25d366; color:#fff; font-weight:700; font-size:.95rem;
  padding:.7rem 1.1rem; border-radius:50px;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.5);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.wa-float:hover{ transform:translateY(-3px); background:#1ebe5b; box-shadow:0 18px 34px -10px rgba(0,0,0,.55); }
.wa-float:active{ transform:translateY(-1px) scale(.98); }
.wa-float svg{ display:block; }
@media (max-width:560px){
  .wa-float{ right:16px; bottom:16px; padding:0; width:56px; height:56px; justify-content:center; border-radius:50%; }
  .wa-float__label{ display:none; }
}

/* ---------- 15. REVEAL ANIMATION ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .band__media{ background-attachment:scroll; }
}

/* ---------- 16. RESPONSIVE ---------- */
@media (max-width:1240px){
  /* five across gets cramped before the nav does — step down earlier */
  .cards--5{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1000px){
  .cards--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .cards--5{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  /* On stacked layouts, image goes below text again for readability */
  .grid-2--text-media .intro__media,
  .grid-2--media-text .apart__media{ order:0; }

  /* Mobile nav */
  .nav-toggle{ display:flex; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--olive-deep); padding:.5rem 1.25rem 1.25rem;
    border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 20px 30px -20px rgba(0,0,0,.6);
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:transform .25s var(--ease), opacity .25s var(--ease), visibility .25s;
  }
  .nav.is-open{ transform:none; opacity:1; visibility:visible; }
  .nav__link{ padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.08); }
  .nav__link::after{ display:none; }
  .nav__link--cta{ margin:.85rem 0 0; text-align:center; }
}
@media (max-width:560px){
  .cards--4{ grid-template-columns:1fr; }
  .cards--5{ grid-template-columns:1fr; }
  .hero__actions .btn{ flex:1 1 auto; }
  .band__media{ background-attachment:scroll; }
}

/* ============================================================
   17. INNER-PAGE STYLES  (added for domestic-roofing.html)
   ------------------------------------------------------------
   a. Anchor scroll offset under the sticky header
   b. Page hero + breadcrumb
   c. Jump-link row
   d. Service sections
   e. CTA band
   ============================================================ */

/* Homepage service cards now link through to their section */
.card__link{ display:block; color:inherit; }

/* ---------- 17a. ANCHOR OFFSET (sticky header) ---------- */
.svc[id], .contact[id]{ scroll-margin-top:clamp(104px,13vw,158px); }

/* The service page is ~9,000px tall, so a "smooth" jump from the menu
   to section 8 crawls for several seconds and flashes through every
   section on the way. Instant jumps on pages that have service
   sections; the homepage keeps its short smooth scrolls. */
html:has(.svc){ scroll-behavior:auto; }

/* ---------- 17b. PAGE HERO ---------- */
.page-hero{ position:relative; display:flex; align-items:center; min-height:clamp(300px,44vw,460px); overflow:hidden; }
.page-hero__media{
  position:absolute; inset:0;
  background:url("../images/roof-aerial-gable.jpg") center 40%/cover no-repeat;
  transform:scale(1.04);
}
.page-hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(30,32,20,.9) 0%, rgba(44,46,28,.7) 50%, rgba(44,46,28,.42) 100%);
}
.page-hero__inner{ position:relative; padding:clamp(2.5rem,7vw,4.5rem) 0; max-width:800px; }
.page-hero__title{ color:#fff; margin:0 0 .8rem; font-size:clamp(2.2rem,5vw,3.6rem); }
.page-hero__lead{ color:var(--on-dark); font-size:clamp(1rem,1.6vw,1.2rem); max-width:62ch; margin:0; }

.crumbs{
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#d3b783; margin-bottom:1rem;
}
.crumbs a{ color:#e9dcc2; }
.crumbs a:hover{ color:#fff; text-decoration:underline; }
.crumbs span[aria-hidden]{ opacity:.5; margin:0 .35rem; }

/* ---------- 17c. JUMP LINKS ---------- */
.jump{ background:var(--olive-deep); padding:1.5rem 0; }
.jump__label{
  margin:0 0 .8rem; font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass);
}
.jump__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.jump__list a{
  display:inline-block; padding:.5rem 1rem; font-size:.9rem; font-weight:600;
  color:var(--on-dark); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); border-radius:50px;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.jump__list a:hover{ background:var(--brass); border-color:var(--brass); color:#fff; transform:translateY(-2px); }

/* ---------- 17d. SERVICE SECTIONS ---------- */
.svc{ background:var(--paper); padding:clamp(3rem,7vw,5.5rem) 0; }
.svc--alt{ background:var(--cream); }
.svc + .svc{ border-top:1px solid var(--line); }

.svc__grid{ display:grid; gap:clamp(1.75rem,4vw,3.5rem); align-items:start; margin-bottom:clamp(1.75rem,4vw,3rem); }
@media (min-width:900px){
  .svc__grid{ grid-template-columns:.85fr 1fr; }
  .svc__grid--reverse .svc__media{ order:2; }
}
.svc__media img{
  width:100%; height:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.svc__text h2{ margin-bottom:.9rem; }
.svc__text p{ color:var(--muted); }
.svc__lead{ font-size:1.12rem; color:var(--ink) !important; }
/* Text-only section — centred column, centre-aligned */
.svc__text--narrow{ max-width:800px; margin-inline:auto; text-align:center; }
.svc__text--narrow .btn{ margin-inline:auto; }
.svc__text .btn{ margin-top:.6rem; }

.svc__points{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.75rem 2.5rem;
  border-top:1px solid var(--line); padding-top:clamp(1.5rem,3vw,2.25rem);
}
@media (min-width:760px){ .svc__points{ grid-template-columns:1fr 1fr; } }
.svc__points li{
  position:relative; padding-left:1.9rem; color:var(--ink); font-size:.98rem; line-height:1.6;
}
.svc__points li::before{
  content:""; position:absolute; left:0; top:.45em;
  width:11px; height:6px; border-left:2.5px solid var(--olive); border-bottom:2.5px solid var(--olive);
  transform:rotate(-45deg);
}
.svc--alt .svc__points{ border-top-color:#ded5c2; }

/* ---------- 17e. CTA BREAKS ---------- */
/* Full-bleed photo bands that split the eight services into groups
   and give people a way out to the form at three points on the page. */
.cta-break{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(3.5rem,8vw,6rem) 0;
}
.cta-break__media{ position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat; }
.cta-break--a .cta-break__media{ background-image:url("../images/roof-aerial-slate.jpg"); background-position:center 35%; }
.cta-break--b .cta-break__media{ background-image:url("../images/new-tile-gable.jpg"); background-position:center 40%; }
.cta-break__overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(30,32,20,.9), rgba(44,46,28,.78));
}
.cta-break__inner{ position:relative; max-width:720px; }
.cta-break h2{ color:#fff; }
.cta-break p{ color:var(--on-dark); margin:0; }
.cta-break__actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:1.9rem; }
@media (max-width:560px){ .cta-break__actions .btn{ flex:1 1 auto; } }

/* ---------- 17f. COMMERCIAL PAGE ---------- */
.page-hero--commercial .page-hero__media{
  background-image:url("../images/commercial/office-roof.jpg");
  background-position:center 55%;
}

/* Property types — plain typographic tiles, no photos needed */
.types{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
@media (min-width:600px){ .types{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .types{ grid-template-columns:repeat(3,1fr); } }
.types__item{
  background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--olive);
  border-radius:var(--radius); padding:1.25rem 1.4rem;
  font-weight:700; font-size:1.05rem; letter-spacing:-.01em;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-left-color .25s var(--ease);
}
.types__item:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-left-color:var(--brass); }

/* Roofing systems — chips linking to the full write-up on the domestic page */
.systems{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.systems a{
  display:inline-block; padding:.7rem 1.3rem; font-size:.95rem; font-weight:700;
  color:var(--olive); background:var(--paper);
  border:2px solid var(--line); border-radius:50px;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.systems a:hover{ background:var(--olive); border-color:var(--olive); color:#fff; transform:translateY(-2px); }

/* ---------- 17g. INSPECTIONS PAGE ---------- */
.page-hero--inspections .page-hero__media{
  background-image:url("../images/survey-scaffold.jpg");
  background-position:center 55%;
}

/* The "What We Check" list is single words, not sentences — three
   columns keeps it from stranding a lot of white space. */
@media (min-width:760px){ .svc__points--compact{ grid-template-columns:repeat(3,1fr); } }

/* ---------- 17h. CONTACT PAGE ---------- */
.page-hero--contact .page-hero__media{
  background-image:url("../images/hero-contact.jpg");
  background-position:center 45%;
}

/* Screen-reader-only heading (the cards below are self-explanatory
   visually, but the section still needs a heading in the outline) */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Phone / WhatsApp / email / area — the four ways to reach us */
.contact-cards{ list-style:none; margin:0; padding:0; display:grid; gap:1.25rem; }
@media (min-width:640px){ .contact-cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .contact-cards{ grid-template-columns:repeat(4,1fr); } }
.contact-card{
  background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--olive);
  border-radius:var(--radius); padding:1.6rem 1.5rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-top-color .25s var(--ease);
}
.contact-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-top-color:var(--brass); }
.contact-card__label{
  margin:0 0 .55rem; font-size:.72rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass);
}
.contact-card__value{
  display:block; font-size:1.3rem; font-weight:800; letter-spacing:-.02em; line-height:1.25;
  color:var(--ink); transition:color .2s var(--ease);
}
a.contact-card__value:hover{ color:var(--olive); text-decoration:underline; }
.contact-card__value--email{ font-size:1.05rem; word-break:break-word; }
.contact-card__note{ margin:.6rem 0 0; color:var(--muted); font-size:.92rem; }

/* Route cards — send people to the right service page */
.route-cards{ list-style:none; margin:0; padding:0; display:grid; gap:1.5rem; }
@media (min-width:820px){ .route-cards{ grid-template-columns:repeat(3,1fr); } }
.route-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.9rem 1.75rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.route-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.route-card h3{ margin:0 0 .6rem; font-size:1.25rem; }
.route-card h3 a{ color:var(--olive); }
.route-card h3 a::after{ content:" \2192"; }
.route-card h3 a:hover{ text-decoration:underline; }
.route-card p{ margin:0; color:var(--muted); font-size:.96rem; }

/* ---------- 17i. LEGAL PAGES ---------- */
.legal-head{
  background:var(--olive-darker); color:var(--on-dark);
  padding:clamp(2.5rem,6vw,4rem) 0 clamp(2rem,5vw,3rem);
}
.legal-head__title{ color:#fff; margin:0 0 .5rem; font-size:clamp(2.1rem,4.5vw,3.2rem); }
.legal-head__meta{
  margin:0; color:var(--on-dark-mut); font-size:.9rem;
  letter-spacing:.04em;
}

.legal{ background:var(--paper); }
.legal__body{ max-width:760px; }
.legal__intro{ font-size:1.12rem; color:var(--ink); }
.legal h2{
  font-size:clamp(1.35rem,2.2vw,1.7rem); margin:2.6rem 0 .8rem;
  padding-top:1.6rem; border-top:1px solid var(--line);
}
.legal h2:first-of-type{ margin-top:2rem; }
.legal h3{ font-size:1.08rem; color:var(--olive); margin:1.8rem 0 .5rem; }
.legal p, .legal li{ color:var(--muted); }
.legal strong{ color:var(--ink); }
.legal ul{ margin:0 0 1rem; padding-left:1.3rem; }
.legal li{ margin-bottom:.5rem; }
.legal a{ color:var(--olive); text-decoration:underline; text-underline-offset:2px; }
.legal a:hover{ color:var(--brass); }
.legal__contact{ list-style:none; padding-left:0; }

/* Unresolved details are marked visibly on purpose, so this page
   cannot be published looking finished while gaps remain. */
.legal__todo{
  background:rgba(168,137,79,.16); border-bottom:2px dashed var(--brass);
  color:var(--ink); font-weight:600; padding:.1em .35em; border-radius:2px;
}

/* ---------- 17j. PROJECTS PAGE ---------- */
.page-hero--projects .page-hero__media{
  background-image:url("../images/slate-battens.jpg");
  background-position:center 55%;
}

.gallery{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1rem; grid-auto-flow:dense;
}
/* Fixed row height + spans, so mixed tile sizes still tile perfectly
   instead of leaving ragged rows. */
@media (min-width:640px){
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .gallery__item{ grid-row:span 2; }
  .gallery__item--wide{ grid-column:span 2; grid-row:span 2; }
}
@media (min-width:980px){
  .gallery{ grid-template-columns:repeat(3,1fr); grid-auto-rows:170px; gap:1.25rem; }
}

.gallery__item{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--olive-darker); box-shadow:var(--shadow);
}
.gallery__item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease);
}
.gallery__item:hover img{ transform:scale(1.06); }

/* Caption sits on the photo under a scrim rather than in a bar below,
   so the images run edge to edge and the grid reads as one block. */
.gallery__caption{
  position:absolute; left:0; right:0; bottom:0; margin:0;
  padding:2.5rem 1.1rem .9rem;
  color:#fff; font-size:.95rem; font-weight:700; letter-spacing:-.01em;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
  background:linear-gradient(to top, rgba(20,22,14,.88) 0%, rgba(20,22,14,.55) 45%, rgba(20,22,14,0) 100%);
}

/* On a single column the tall/wide variants have nothing to span */
@media (max-width:639px){
  .gallery__item img{ aspect-ratio:4/3; }
}

/* ---------- 17k. COOKIE BANNER ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--olive-darker); color:var(--on-dark);
  border-top:3px solid var(--brass);
  box-shadow:0 -12px 32px -18px rgba(0,0,0,.7);
  transform:translateY(100%);
  transition:transform .35s var(--ease);
}
.cookie-banner.is-open{ transform:none; }

.cookie-banner__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 2rem; padding:1.25rem 0;
}
.cookie-banner__text{ flex:1 1 30ch; }
.cookie-banner__title{
  margin:0 0 .3rem; font-weight:800; font-size:1rem; letter-spacing:-.01em; color:#fff;
}
.cookie-banner__text p{ margin:0; font-size:.92rem; color:var(--on-dark-mut); line-height:1.6; }
.cookie-banner__text a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.cookie-banner__text a:hover{ color:var(--brass); }

/* Accept and Decline are deliberately the same size and weight — making
   one harder to find than the other is a dark pattern, and not lawful
   consent. */
.cookie-banner__actions{ display:flex; flex-wrap:wrap; gap:.75rem; flex:0 0 auto; }
.cookie-banner__actions .btn{ padding:.7rem 1.6rem; font-size:.92rem; }

/* The WhatsApp button would otherwise sit under the banner */
body.has-cookie-banner .wa-float{ bottom:calc(22px + 7.5rem); }

@media (max-width:640px){
  .cookie-banner__inner{ padding:1.1rem 0; }
  .cookie-banner__actions{ width:100%; }
  .cookie-banner__actions .btn{ flex:1 1 auto; }
  body.has-cookie-banner .wa-float{ bottom:calc(16px + 10.5rem); }
}
@media (prefers-reduced-motion:reduce){
  .cookie-banner{ transition:none; }
}