/* ============================================================
   L&P DEVELOPMENTS — "Light & Airy" direction overrides
   Light-dominant, calm, generous white space. Reuses base.css.
   ============================================================ */

/* ---------- Rhythm: more breathing room ---------- */
:root{
  --section-y:120px;
  --maxw:1180px;
  --nav-h:108px;          /* matches the doubled-logo nav so the mobile menu aligns */
}
@media (max-width:1024px){ :root{ --section-y:88px; } }
@media (max-width:860px){ :root{ --section-y:72px; } }
@media (max-width:520px){ :root{ --section-y:60px; --nav-h:84px; } }

/* Soften the body for an airier feel */
body{ background:var(--light-bg); }

/* Remove the brand-orange tint from all hairline borders (use a neutral, barely-there grey) */
:root{
  --border-light: rgba(38,38,38,.07);
  --border-mid: rgba(38,38,38,.11);
  /* Lift the grey text in dark sections for better legibility */
  --text-on-dark-body: #BBB6AD;
  --text-on-dark-muted: #968F85;
}
/* Drop the full-width divider line under the nav entirely (page-header divider removed at its rule below) */
.nav{ border-bottom:none; }
/* Remove the orange accent border on the top edge of the footer */
.footer{ border-top:none; }

/* Slightly softer light dividers */
.divider{ border-top-color:var(--border-light); }

/* ---------- Nav: keep light & airy, gentle weight ---------- */
.nav{ min-height:108px; display:flex; justify-content:center; }
.nav-inner{ width:100%; max-width:var(--maxw); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); }
.nav-link{ letter-spacing:var(--tracking-snug); }

/* ---------- Real logo art (header orange / footer white) — doubled ---------- */
.nav-logo-img{ height:92px; width:auto; display:block; }
.footer-logo-img{ height:104px; width:auto; display:block; margin-bottom:0; }
@media (max-width:520px){ .nav{ min-height:84px; } .nav-logo-img{ height:64px; } }

/* ---------- Logo hover crossfade (header → dark grey, footer → orange) ---------- */
.nav-logo{ position:relative; }
.footer-brand{ position:relative; }
.nav-logo-img-hover,
.footer-logo-img-hover{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
  pointer-events:none;
}
.nav-logo:hover .nav-logo-img-default,
.footer-brand:hover .footer-logo-img-default{ opacity:0; }
.nav-logo:hover .nav-logo-img-hover,
.footer-brand:hover .footer-logo-img-hover{ opacity:1; }

/* ---------- Icons as real <img> (robust on file://; renders orange SVG) ---------- */
img.ds-icon{
  width:32px; height:32px; display:block; object-fit:contain;
  background:none; -webkit-mask:none; mask:none;
}
/* Icon-wrap: solid orange (#F66706) CIRCLE + WHITE icon (filter inverts the orange art).
   Banner icons (.bc-icon) have NO background, so they stay orange. */
.icon-wrap{ background:var(--brand-500); border:none; border-radius:50%; }
.section-dark .icon-wrap{ background:var(--brand-500); border:none; }
.icon-wrap img.ds-icon{ width:32px; height:32px; filter:brightness(0) invert(1); }
.bc-icon{ filter:none; }   /* banner icons remain orange */

/* 'Why L&P' trust icons: show exactly as designed — native orange, no circle, no recolour */
.grid-4 .icon-wrap{ background:transparent; border:none; border-radius:0; width:64px; height:64px; }
.grid-4 .icon-wrap img.ds-icon{ filter:none; width:64px; height:64px; }
/* About 'Why choose' — icons at half size */
.page-about .grid-4 .icon-wrap{ width:32px; height:32px; }
.page-about .grid-4 .icon-wrap img.ds-icon{ width:32px; height:32px; }

/* Contact details: white glyph on a #2E2E2E circle */
.contact-item .icon-wrap{ background:var(--colour-grey-alt); border:none; border-radius:50%; width:56px; height:56px; }
.contact-item .icon-wrap img.ds-icon{ filter:brightness(0) invert(1); width:28px; height:28px; }

/* ---------- Contact form: input height reduced 25% (textarea unchanged) ---------- */
.contact-form .input{ height:42px; padding-top:8px; padding-bottom:8px; }

/* ---------- Eyebrow = orange chip, white text (per style sheet) ---------- */
.eyebrow,.eyebrow-line{
  display:inline-flex; align-items:center; gap:0;
  background:var(--brand-500); color:#fff;
  padding:6px 13px;
  font-size:var(--text-xs); font-weight:var(--weight-semi);
  letter-spacing:var(--tracking-wider); text-transform:uppercase;
  line-height:1.1; width:fit-content;
  margin-bottom:var(--sp-6);
}
.eyebrow-line::before{ display:none; }            /* drop the leading rule */
.section-dark .eyebrow,.section-dark .eyebrow-line,
.section-brand .eyebrow,.section-brand .eyebrow-line{ background:var(--brand-500); color:#fff; }
/* Centre the chip within centred headers */
.section-header-center .eyebrow,
.section-header-center .eyebrow-line{ margin-left:auto; margin-right:auto; }

/* ---------- Centred headings: space between heading & sub-heading
              (mirrors the left-aligned page-header rhythm) ---------- */
.section-header-center{ max-width:660px; }
.section-header-center .display-2,
.section-header-center h2,
.section-header-center .h2{ margin-bottom:var(--sp-5); }
/* Balance centred headings/lead text evenly across lines (responsive, no hard breaks) */
.section-header-center .display-2,
.section-header-center h2,
.section-header-center .h2,
.section-header-center .text-lead{ text-wrap:balance; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:var(--light-alt);
  padding:calc(var(--section-y) - 8px) var(--gutter);
  min-height:calc(86vh - var(--nav-h));
  display:flex;
  align-items:center;
}
.hero-inner{
  max-width:var(--maxw);
  margin:0 auto;
  width:100%;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:var(--sp-20);
  align-items:stretch;      /* let the stat grid match the copy column height */
}
.page-header-inner{ max-width:var(--maxw); margin:0 auto; width:100%; }
.hero-copy{ max-width:560px; display:flex; flex-direction:column; justify-content:center; }
.hero-copy .display-1{ margin-bottom:var(--sp-6); }
.hero-lead{ max-width:480px; }
.hero-actions{ display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-8); }
/* Hero CTAs over the photo background — solid orange fill with white text */
.hero-actions .btn{ border-color:transparent; }
.hero-actions .btn-primary{ background:transparent; color:#fff; }
.hero-actions .btn-solid,
.hero-actions .btn-primary:hover{
  background:var(--brand-500);
  color:#fff;
}
.hero-actions .btn-solid:hover{
  background:transparent;
  color:#fff;
  border-color:transparent;
  outline:none;
}

/* Hero stat grid — 4 separate blocks, gutters reveal the hero photo behind */
.hero-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:1fr;        /* equal-height rows filling the column */
  gap:2px;
  height:100%;
  background:transparent;
  box-shadow:0 24px 60px rgba(0,0,0,.05);
}
.hero-stat{
  background:var(--grey-0);
  padding:var(--sp-6);
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
}
/* Roof-notch card shapes (cards-01..04.svg), applied in grid order: TL, TR, BL, BR. */
.hero-stat:nth-child(1){ clip-path:polygon(33.79% 0%, 54.63% 12.78%, 100% 12.78%, 100% 100%, 0% 100%, 0% 20.67%); }
.hero-stat:nth-child(2){ clip-path:polygon(66.21% 0%, 45.38% 12.78%, 0% 12.78%, 0% 100%, 100% 100%, 100% 20.67%); }
.hero-stat:nth-child(3){ clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 90.11% 100%, 73.29% 87.55%, 56.42% 100%, 0% 100%); }
.hero-stat:nth-child(4){ clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 43.58% 100%, 26.74% 87.55%, 9.9% 100%, 0% 100%); }
/* Keep content clear of the roof-notch corners: bottom-aligned in the top row, top-aligned in the bottom row */
.hero-stat:nth-child(1),
.hero-stat:nth-child(2){ justify-content:flex-end; }
.hero-stat:nth-child(3),
.hero-stat:nth-child(4){ justify-content:flex-start; }
.hero-stat-top{ display:flex; align-items:center; gap:var(--sp-3); }
.hero-stat-icon{ width:auto; height:var(--text-4xl); object-fit:contain; flex:none; }
.hero-stat-icon-sm10{ height:calc(var(--text-4xl) * .81); }
.hero-stat-icon-sm5{ height:calc(var(--text-4xl) * .95); }
.hero-stat-icon-up8{ position:relative; top:-5px; }
.hero-stat-icon-up2{ position:relative; top:-2px; }
.hero-stat-icon-up3{ position:relative; top:-3px; }
.stat-num-left3{ position:relative; left:-3px; }
.hero-stat .stat-num{
  font-size:var(--text-4xl);
  color:var(--brand-500);
}
.hero-stat .stat-label{ color:#808080; font-weight:var(--weight-semi); }

@media (max-width:860px){
  .hero{ min-height:0; }
  .hero-inner{ grid-template-columns:1fr; gap:var(--sp-12); }
  .hero-copy{ max-width:none; }
}
@media (max-width:400px){
  .hero-stats{ grid-template-columns:1fr; }
}

/* ============================================================
   GENERIC GRIDS
   ============================================================ */
.grid-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--sp-6);
}
/* About 'Creating spaces' feature row: copy + image */
.about-feature{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-16); align-items:center; }
.about-feature-copy{ display:flex; flex-direction:column; }
.about-feature-copy .eyebrow-line{ margin-bottom:var(--sp-4); }
.about-feature-copy .display-2{ margin-bottom:var(--sp-6); }
.about-feature-copy .text-lead{ margin-bottom:var(--sp-3); }
.about-feature-media{ position:relative; overflow:hidden; }
.about-feature-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Brand roof watermark, flush to the bottom-right corner (matches the hero treatment) */
.about-feature-media .ph-watermark{
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:38%;
  height:auto;
  object-fit:fill;
  pointer-events:none;
}
@media (max-width:860px){ .about-feature{ grid-template-columns:1fr; gap:var(--sp-10); } }

/* Fixed 3-up grid (About 'What we do') */
.grid-cards.grid-3{ grid-template-columns:repeat(3,1fr); }
/* About 'What we do' — closed-gutter grid, card borders blend into the background */
.page-about .grid-cards.grid-3{ gap:0; box-shadow:0 24px 60px rgba(0,0,0,.05); }
.page-about .grid-cards.grid-3 .service-card,
.page-about .grid-cards.grid-3 .service-card:hover{
  box-shadow:none;
  background:var(--light-alt);
  border:1px solid #fff;
}
@media (max-width:860px){ .grid-cards.grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .grid-cards.grid-3{ grid-template-columns:1fr; } }
/* About 'Why choose' grid: borders match the section-light-alt background */
.section-light-alt .grid-4{ border-color:var(--light-alt); }
.section-light-alt .grid-4 .icon-card,
.section-light-alt .grid-4 .icon-card:hover{ border-right-color:var(--light-alt); border-bottom-color:var(--light-alt); }
/* Homepage 'Why L&P' — lighter borders + a very light dispersed shadow under the block */
.page-home .grid-4{ border-color:#EFEDEA; box-shadow:0 24px 60px rgba(0,0,0,.05); }
.page-home .grid-4 .icon-card,
.page-home .grid-4 .icon-card:hover{ border-color:#EFEDEA; }
/* Single-column mobile: restore the divider the 2-col 'nth-child(n+3)' rule wrongly removes */
@media (max-width:520px){
  .page-home .grid-4 .icon-card:nth-child(n+3){ border-bottom:1px solid #EFEDEA; }
  .page-home .grid-4 .icon-card:last-child{ border-bottom:none; }
}
/* Why L&P — closed-gutter grid with shared borders (matches carousel below) */
.grid-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border:1px solid var(--grey-200);
}
.grid-4 .icon-card{
  border:none;
  border-right:1px solid var(--grey-200);
  box-shadow:inset 0 0 0 0 var(--brand-500);
  transition:box-shadow var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);
}
.grid-4 .icon-card:last-child{ border-right:none; }
/* non-clickable cards: no rollover state */
.grid-4 .icon-card:hover{ border:none; border-right:1px solid var(--grey-200); box-shadow:none; }
.grid-4 .icon-card:last-child:hover{ border-right:none; }
/* About 'Why choose' — 10px gutter between cards */
.page-about .grid-4{ gap:10px; border:none; }
.page-about .grid-4 .icon-card,
.page-about .grid-4 .icon-card:hover{ border:none; box-shadow:0 24px 60px rgba(0,0,0,.05); }

@media (max-width:1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-4 .icon-card{ border-right:1px solid var(--grey-200); border-bottom:1px solid var(--grey-200); }
  .grid-4 .icon-card:nth-child(2n){ border-right:none; }
  .grid-4 .icon-card:nth-child(n+3){ border-bottom:none; }
}
@media (max-width:520px){
  .grid-4{ grid-template-columns:1fr; }
  .grid-4 .icon-card{ border-right:none; border-bottom:1px solid var(--grey-200); }
  .grid-4 .icon-card:last-child{ border-bottom:none; }
}

/* Icon card heading sits closer to icon, airy body */
.icon-card{ gap:var(--sp-5); padding:var(--sp-10) var(--sp-8); }
.icon-card p{ color:var(--text-on-light-body); }

/* Services page image strip */
.strip-gallery-section{ width:100%; }
.strip-gallery{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:10px; }
.strip-gallery-img{ width:100%; height:300px; object-fit:cover; display:block; }
@media (max-width:900px){ .strip-gallery{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .strip-gallery{ grid-template-columns:repeat(2,1fr); } .strip-gallery-img{ height:220px; } }

/* Gallery page styles */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); margin-top:var(--sp-10); }
.section-light .container{position:relative;}
.gallery-card{ display:flex; flex-direction:column; align-items:flex-start; background:var(--grey-0); border:3px solid transparent; overflow:hidden; transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out); text-align:left; }
.gallery-card:hover{ transform:translateY(-2px); border:3px solid var(--brand-500); }
.gallery-thumb{ width:100%; height:260px; object-fit:cover; display:block; }

/* Full-width before/after homepage banner */
.section-image-banner{ width:100%; overflow:hidden; margin-top:7.5px; }
.section-image-banner .banner-image{ width:100%; height:auto; display:block; object-fit:cover; }
/* Desktop = side-by-side image; mobile = stacked image. Toggled by CSS so it
   never depends on <picture> source-selection quirks (e.g. iOS Safari). */
.section-image-banner .banner-desktop{ display:block; }
.section-image-banner .banner-mobile{ display:none; }
@media (max-width:860px){
  .section-image-banner .banner-desktop{ display:none; }
  .section-image-banner .banner-mobile{ display:block; }
}
.gallery-copy{ padding:var(--sp-6); }
.gallery-copy h3{ margin:0 0 var(--sp-2); }
.gallery-copy p{ margin:0; color:var(--text-on-light-body); }
.gallery-overlay{ position:fixed; inset:0; display:grid; place-items:center; padding:var(--sp-6); background:rgba(38,38,38,.85); opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease-out); z-index:300; }
.gallery-overlay.is-open{ opacity:1; pointer-events:auto; }
.gallery-stage{ position:relative; width:min(100%,1140px); max-height:calc(100vh - var(--sp-12)); overflow:hidden; background:#fff; padding:var(--sp-8) 0; }
.gallery-preview{ width:100%; max-height:calc(100vh - var(--sp-12) - var(--sp-16)); object-fit:contain; display:block; }
.gallery-details{ display:none; }
.gallery-details .category-label{ display:inline-flex; margin-bottom:var(--sp-3); }
.gallery-details h2{ margin:0 0 var(--sp-3); }
.gallery-close{ position:absolute; top:calc(var(--sp-4) - 10px); right:var(--sp-4); background:#fff; color:var(--brand-500); border:none; width:48px; height:48px; display:flex; align-items:center; justify-content:center; font-size:24px; cursor:pointer; box-shadow:0 0 30px rgba(0,0,0,.14); }
.gallery-arrow{ position:absolute; top:calc(50% - 10px); transform:translateY(-50%); width:48px; height:48px; border:none; background:#fff; color:var(--brand-500); font-size:32px; line-height:1; display:flex; align-items:center; justify-content:center; padding-bottom:6px; cursor:pointer; box-shadow:0 0 30px rgba(0,0,0,.12); }
.gallery-prev{ left:var(--sp-4); }
.gallery-next{ right:var(--sp-4); }
.gallery-arrow:hover,
.gallery-close:hover{ background:var(--grey-25); }
.gallery-details .category-label{ display:none; }
@media (max-width:1024px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:var(--sp-3); } }

/* ---------- Service preview / service cards ---------- */
.section-services{ background:#fcfcfc; }
.section-services .container{ position:relative; }
/* Services grid — closed gutters, card borders match the section background, no rollover */
.section-services .grid-cards{ gap:0; border:1px solid #F6F4F2; box-shadow:0 24px 60px rgba(0,0,0,.08); }
.section-services .grid-cards .service-card,
.section-services .grid-cards .service-card:hover{
  box-shadow:none;
  background:#fcfcfc;
  border:1px solid #F6F4F2;
  transform:none;
  transition:none;
}
.service-card{ display:flex; flex-direction:column; gap:var(--sp-5); padding:var(--sp-10) var(--sp-8); background:#fff; border-radius:0; box-shadow:0 18px 50px rgba(0,0,0,.06); transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out); }
.service-card .icon-wrap{ margin-bottom:var(--sp-1); }
.service-card .service-oneline{ color:var(--text-on-light-muted); }
.service-card .service-blurb{ color:var(--text-on-light-body); }
/* non-clickable services-grid cards: no rollover state */
.grid-cards .service-card:hover{ border:1px solid var(--border-light); transform:none; box-shadow:none; }
.footer-social{ display:flex; gap:var(--sp-4); margin-top:var(--sp-4); }
.footer-social a{ color:#eaeaea; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; transition:color var(--dur-base) var(--ease-out); }
.footer-social a svg{ width:22px; height:22px; fill:currentColor; display:block; }
.footer-social a:hover{ color:var(--brand-500); }
.service-link{ font-size:var(--text-sm); font-weight:var(--weight-semi); color:var(--brand-500); margin-top:var(--sp-2); }
.service-link:hover{ text-decoration:underline; }

/* ============================================================
   HOMEPAGE SERVICES — dark carousel, closed-gutter grid look
   ============================================================ */
.services-carousel-section{ overflow:hidden; }
.carousel{ position:relative; margin-top:var(--sp-4); }
/* Mobile: fade the right edge of the carousel into the dark section to hint more cards */
@media (max-width:768px){
  .services-carousel-section .carousel::after{
    content:'';
    position:absolute;
    top:0; right:0; bottom:0;
    width:90px;
    background:linear-gradient(to right, rgba(38,38,38,0), #262626);
    pointer-events:none;
    z-index:1;
  }
  .services-carousel-section .carousel-nav{ position:relative; z-index:2; }
}

/* The scrolling rail */
.carousel-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }

/* Each card: spaced gutter for carousel */
.carousel-card{
  flex:0 0 calc(25% - 7.5px);
  scroll-snap-align:start;
  background:var(--dark-2);
  border:2px solid transparent;
  padding:var(--sp-10) var(--sp-8);
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
  min-height:300px;
  margin-right:10px;
}
.carousel-card:last-child{ margin-right:0; }
.service-card-link{ display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.carousel-card{ box-shadow:none; transition:background var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out); }
/* hover highlights all four edges */
.section-dark .carousel-card:hover{ background:var(--dark-3); box-shadow:none; border-color:var(--brand-500); }
.carousel-card h3{ color:var(--text-on-dark-heading); }
.carousel-card .service-oneline{ color:var(--text-on-dark-muted); }
/* "Learn more" pinned to the bottom of every card */
.carousel-card .service-link{ margin-top:auto; color:var(--brand-400); }

/* Prev / next controls */
.carousel-nav{ display:flex; gap:var(--sp-3); justify-content:flex-end; margin-top:var(--sp-6); }
.carousel-btn{
  width:48px; height:48px;
  background:transparent;
  border:2px solid var(--brand-500);
  color:var(--brand-500);
  font-size:22px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur-base),color var(--dur-base),border-color var(--dur-base),opacity var(--dur-base);
}
.carousel-btn:hover{ background:var(--brand-500); color:#fff; }
.carousel-btn:disabled{ opacity:.3; cursor:not-allowed; }
.carousel-btn:disabled:hover{ background:transparent; color:var(--brand-500); }

@media (max-width:1024px){ .carousel-card{ flex-basis:33.333%; } }
@media (max-width:768px){ .carousel-card{ flex-basis:50%; } }
@media (max-width:520px){ .carousel-card{ flex-basis:82%; } }

/* ============================================================
   STATS BAND (soft off-white)
   ============================================================ */
.stats-soft{
  background:var(--light-alt);
  border-top:1px solid var(--border-light);
  border-bottom:1px solid var(--border-light);
  padding:var(--sp-20) var(--gutter);
}
.stats-soft-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-12) var(--sp-8);
  text-align:center;
}
.stats-soft .stat-num{ color:var(--brand-500); font-size:var(--text-5xl); }
.stats-soft .stat-label{ color:var(--text-on-light-body); }
@media (max-width:860px){ .stats-soft-inner{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   PROCESS — clean airy numbered row
   ============================================================ */
.process-clean{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-10);
}
.process-item{ display:flex; flex-direction:column; gap:var(--sp-4); }
.process-head{ display:flex; align-items:center; gap:var(--sp-4); }
.process-head .pnum-icon{ width:22px; height:22px; display:block; }
.process-item .pnum{
  font-size:var(--text-2xl);
  font-weight:var(--weight-semi);
  color:var(--brand-500);
  line-height:1;
}
.process-item .pline{
  width:100%;
  height:2px;
  background:var(--border-light);
  position:relative;
}
.process-item .pline::before{
  content:'';
  position:absolute; left:0; top:0;
  width:32px; height:2px;
  background:var(--brand-500);
}
.process-item h4{ margin-top:var(--sp-1); }
@media (max-width:860px){ .process-clean{ grid-template-columns:1fr 1fr; gap:var(--sp-10) var(--sp-8); } }
@media (max-width:400px){ .process-clean{ grid-template-columns:1fr; } }

/* ============================================================
   TABS — process section tabs component
   ============================================================ */
.tabs-wrapper{ max-width:900px; margin:0 auto; display:flex; gap:var(--sp-12); align-items:stretch; }
.tabs-nav{
  display:flex;
  flex-direction:column;
  gap:0;
  border:none;
  margin-bottom:0;
  padding-right:var(--sp-10);
  min-width:200px;
}
.tab-button{
  background:transparent;
  border:1px solid #d9d9d9;
  border-bottom:none;
  padding:var(--sp-4) var(--sp-5);
  font-size:var(--text-sm);
  font-weight:var(--weight-semi);
  color:var(--text-on-light-muted);
  cursor:pointer;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  text-align:left;
}
.tab-button:last-child{
  border-bottom:1px solid #d9d9d9;
}
.tab-button[aria-selected="true"]{
  color:#fff;
  background:#F66706;
  border-color:#F66706;
  box-shadow:0 14px 30px rgba(246,103,6,.18);
}
.tab-button:hover:not([aria-selected="true"]){
  color:var(--text-on-light-body);
  background:rgba(246,103,6,.08);
  border-color:rgba(246,103,6,.3);
}
.tab-button:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(246,103,6,.2);
}
.tabs-content{ position:relative; flex:1; }
.tab-panel{
  animation:fadeIn var(--dur-base) var(--ease-out);
}
.tab-panel[hidden]{ display:none; }
.tab-inner{
  display:flex;
  flex-direction:column;
  gap:var(--sp-6);
  padding:var(--sp-8);
  text-align:left;
}
.tab-inner-content{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:var(--sp-5);
}
.tab-icon{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tab-inner-content > div:last-child{ flex:1; }
.tab-inner-content h4{ margin:0 0 var(--sp-2); }
.tab-inner-content p{ margin:0; }
.tab-status{
  width:100%;
  height:4px;
  background:#eaeaea;
  border-radius:2px;
  overflow:hidden;
}
.tab-status-fill{
  height:100%;
  background:var(--brand-500);
  border-radius:2px;
}
.tab-icon img{ width:100%; height:100%; object-fit:contain; }
.tab-panel h4{ margin:0; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@media (max-width:680px){
  .tabs-wrapper{ flex-direction:column; gap:var(--sp-4); }
  .tabs-nav{ flex-direction:row; border-right:none; padding-right:0; padding-bottom:0; }
  .tab-button{ border-right:none; border-bottom:1px solid #d9d9d9; padding:var(--sp-3) var(--sp-4); font-size:var(--text-xs); }
  .tab-button:last-child{ border-right:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; }
  .tab-button[aria-selected="true"]{ border-bottom-color:#F66706; }
  .tab-button[aria-selected="true"]:last-child{ border-right-color:#F66706; }
}

/* Buttons with borders and active highlight */
.btn,
.btn-on-brand{
  border:2px solid transparent;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btn-on-brand{
  background:transparent;
  color:#fff;
  border-color:#fff;
}
.btn:hover{
  border-color:var(--brand-500);
  box-shadow:0 12px 30px rgba(246,118,16,.18);
}
.btn-on-brand:hover{
  background:#fff;
  color:var(--brand-500);
  border-color:#fff;
  box-shadow:none;
}
.btn-outline,
.btn-accent{
  background:transparent;
  color:var(--brand-500);
  border-color:var(--brand-500);
}
.btn-outline:hover,
.btn-accent:hover{
  background:rgba(246,118,16,.08);
}


/* ============================================================
   TESTIMONIALS — quiet light cards
   ============================================================ */
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-6);
}
.testimonial{
  background:var(--grey-0);
  border:1px solid var(--border-light);
  padding:var(--sp-10) var(--sp-8);
  display:flex;
  flex-direction:column;
  gap:var(--sp-6);
  box-shadow:0 8px 24px rgba(0,0,0,.04);
}
.testimonial .quote-mark{
  color:var(--brand-500);
  font-size:var(--text-5xl);
  line-height:.6;
  font-weight:var(--weight-semi);
  height:28px;
}
.testimonial .review-icon{
  width:auto;
  height:44px;
  display:block;
}
.testimonial blockquote{
  font-size:var(--text-md);
  line-height:var(--leading-loose);
  color:var(--text-on-light-heading);
}
.testimonial .cite{
  font-size:var(--text-sm);
  color:var(--text-on-light-muted);
  margin-top:auto;
}
.testimonial .cite strong{ color:var(--text-on-light-heading); font-weight:var(--weight-semi); }
@media (max-width:860px){ .testimonial-grid{ grid-template-columns:1fr; max-width:560px; margin:0 auto; } }

/* Reviews carousel */
.testimonial-carousel{ position:relative; margin-top:var(--sp-4); }
.testimonial-track{
  display:flex;
  gap:var(--sp-6);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -ms-overflow-style:none;
  scrollbar-width:none;
  padding-bottom:var(--sp-2);
}
.testimonial-track::-webkit-scrollbar{ display:none; }
.testimonial-track .testimonial{
  flex:0 0 calc(33.333% - 16px);
  scroll-snap-align:start;
}
.testimonial-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  margin-top:var(--sp-6);
}
.testimonial-dots{ display:flex; gap:var(--sp-2); }
.testimonial-dot{
  width:9px; height:9px;
  padding:0; border:none; border-radius:50%;
  background:var(--grey-300);
  cursor:pointer;
  transition:background var(--dur-base),transform var(--dur-base);
}
.testimonial-dot:hover{ background:var(--grey-400); }
.testimonial-dot.is-active{ background:var(--brand-500); transform:scale(1.2); }
.testimonial-arrows{ display:flex; gap:var(--sp-3); }
@media (max-width:1024px){ .testimonial-track .testimonial{ flex-basis:calc(50% - 12px); } }
@media (max-width:640px){ .testimonial-track .testimonial{ flex-basis:88%; } }
/* Mobile: fade the right edge to hint the next review — mirrors the 'What we do'
   carousel above, but fades into the light section background. */
@media (max-width:768px){
  .testimonial-carousel::after{
    content:'';
    position:absolute;
    top:0; right:0; bottom:0;
    width:90px;
    background:linear-gradient(to right, rgba(248,247,245,0), #F8F7F5);
    pointer-events:none;
    z-index:1;
  }
  .testimonial-controls{ position:relative; z-index:2; }
}

/* ============================================================
   PROJECT / PHOTO FRAME PLACEHOLDERS
   ============================================================ */
.photo{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  background:linear-gradient(135deg,var(--grey-50) 0%,var(--grey-100) 100%);
  border:1px solid var(--border-light);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.photo::after{
  content:'Project photo';
  font-size:var(--text-xs);
  font-weight:var(--weight-semi);
  letter-spacing:var(--tracking-widest);
  text-transform:uppercase;
  color:var(--grey-400);
}
.photo:has(img)::after{ content:none; }
.photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.photo-tall{ aspect-ratio:3 / 4; }
.photo-wide{ aspect-ratio:16 / 9; }

.project-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-10);
}
@media (max-width:860px){ .project-grid{ grid-template-columns:1fr 1fr; gap:var(--sp-8); } }
@media (max-width:520px){ .project-grid{ grid-template-columns:1fr; } }

.project-card{ display:flex; flex-direction:column; gap:var(--sp-4); padding:20px; background:var(--light-bg); }
.project-card .category-label{ margin-top:var(--sp-2); }
.project-card .project-title{ margin-top:var(--sp-1); }
.project-card .project-loc{
  font-size:var(--text-sm);
  color:var(--brand-500);
  font-weight:var(--weight-semi);
}
.project-card .project-caption{ color:var(--text-on-light-body); }

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.page-header{
  background:var(--light-alt);
  padding:calc(var(--section-y) - 16px) var(--gutter);
}
.page-header-inner{ max-width:760px; margin:0 auto; }
.page-header .eyebrow-line{ justify-content:flex-start; }
.page-header .display-2{ margin-bottom:var(--sp-5); }
.page-header .text-lead{ max-width:620px; }

/* ---------- Banner with a stat-style grid (matches homepage hero grid) ---------- */
.page-header-grid .page-header-inner{
  max-width:var(--maxw);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:var(--sp-16);
  align-items:stretch;
}
.page-header-grid .ph-copy{ display:flex; flex-direction:column; justify-content:center; max-width:560px; }
/* About hero: image to the right + heading/subtitle spacing */
.ph-media{ overflow:hidden; position:relative; }
.ph-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.page-about .ph-media{
  box-shadow:0 0 160px 30px rgba(255,255,255,.75);
  border-left:8px solid var(--brand-500);
  border-bottom:8px solid var(--brand-500);
}
/* Brand roof watermark, flush to the bottom-right corner of the hero image */
.ph-media .ph-watermark{
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:38%;
  height:auto;
  object-fit:fill;
  pointer-events:none;
}
.page-about .ph-copy .eyebrow-line{ margin-bottom:var(--sp-4); }
.page-about .ph-copy .display-2{ margin-bottom:var(--sp-5); }
.page-about .ph-copy .text-lead{ margin-bottom:var(--sp-3); }
/* Uniform title + body formatting across the About page */
.page-about .display-2{ line-height:1.08; }
.page-about .text-lead{ font-size:15px; }
.banner-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:1fr;
  gap:2px;
  height:100%;
  background:transparent;
  box-shadow:0 24px 60px rgba(0,0,0,.05);
}
.banner-cell{
  background:var(--grey-0);
  padding:var(--sp-6);
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--sp-2);
  min-height:172px;
}
/* Roof-notch card shapes (cards-01..04.svg), applied in grid order: TL, TR, BL, BR. */
.banner-cell:nth-child(1){ clip-path:polygon(33.79% 0%, 54.63% 12.78%, 100% 12.78%, 100% 100%, 0% 100%, 0% 20.67%); }
.banner-cell:nth-child(2){ clip-path:polygon(66.21% 0%, 45.38% 12.78%, 0% 12.78%, 0% 100%, 100% 100%, 100% 20.67%); }
.banner-cell:nth-child(3){ clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 90.11% 100%, 73.29% 87.55%, 56.42% 100%, 0% 100%); }
.banner-cell:nth-child(4){ clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 43.58% 100%, 26.74% 87.55%, 9.9% 100%, 0% 100%); }
/* Keep content clear of the roof-notch corners: bottom-aligned in the top row, top-aligned in the bottom row */
.banner-cell:nth-child(1),
.banner-cell:nth-child(2){ justify-content:flex-end; }
.banner-cell:nth-child(3),
.banner-cell:nth-child(4){ justify-content:flex-start; }
.banner-cell .bc-mark{ width:28px; height:3px; background:var(--brand-500); }
.banner-cell .bc-icon{ width:50.6px; height:50.6px; object-fit:contain; display:block; }
.bc-icon-group{ display:flex; gap:var(--sp-3); }
/* Contact banner: icon + label centred on the same vertical axis (icons 20% larger).
   Top cells: icon above the label, block bottom-aligned. Bottom cells: icon below
   the label, block top-aligned — so the icon always sits nearest the roof notch. */
.contact-banner .banner-cell{
  position:relative;
  align-items:flex-start;
  text-align:left;
  gap:var(--sp-2);
}
.contact-banner .banner-cell:nth-child(1),
.contact-banner .banner-cell:nth-child(2){ justify-content:flex-end; }
.contact-banner .banner-cell:nth-child(3),
.contact-banner .banner-cell:nth-child(4){ justify-content:flex-start; }
.contact-banner .banner-cell:nth-child(3) .bc-icon,
.contact-banner .banner-cell:nth-child(4) .bc-icon{ order:1; }
.contact-banner .bc-icon{ width:53px; height:53px; }
.banner-cell .bc-text{
  font-size:var(--text-lg); font-weight:var(--weight-semi);
  color:#808080; line-height:var(--leading-snug);
}
@media (max-width:860px){
  .page-header-grid .page-header-inner{ grid-template-columns:1fr; gap:var(--sp-10); }
  .page-header-grid .ph-copy{ max-width:none; }
}
@media (max-width:400px){
  .banner-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   CTA BAND (single orange punctuation)
   ============================================================ */
.cta-band{ max-width:none; }
.cta-band-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--sp-12);
  align-items:center;
}
@media (max-width:860px){
  .cta-band-inner{ grid-template-columns:1fr; gap:var(--sp-8); }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-layout{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--sp-20);
  align-items:start;
}
@media (max-width:860px){ .contact-layout{ grid-template-columns:1fr; gap:var(--sp-12); } }

.contact-form{ display:flex; flex-direction:column; gap:var(--sp-6); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }

.form-success{
  display:none;
  background:var(--brand-100);
  border-left:3px solid var(--brand-500);
  padding:var(--sp-8);
}
.form-success h3{ margin-bottom:var(--sp-2); }

.contact-details{ display:flex; flex-direction:column; gap:var(--sp-6); }
.contact-item{
  display:flex;
  gap:var(--sp-5);
  align-items:flex-start;
  padding:var(--sp-6) 0;
  border-bottom:1px solid var(--border-light);
}
.contact-item:first-child{ padding-top:0; }
.contact-item .icon-wrap{ width:56px; height:56px; background:var(--colour-grey-alt); border-radius:50%; }
.contact-item .icon-wrap .ds-icon{ width:28px; height:28px; filter:brightness(0) invert(1); }
.contact-item .icon-wrap img.ds-icon[src*="icon-hours"]{ width:38px; height:38px; }
.contact-item .ci-label{
  font-size:var(--text-xs);
  font-weight:var(--weight-semi);
  letter-spacing:var(--tracking-widest);
  text-transform:uppercase;
  color:var(--text-on-light-muted);
  margin-bottom:var(--sp-2);
}
.contact-item .ci-value{ font-size:var(--text-md); color:var(--text-on-light-heading); }
.contact-item .ci-value a{ color:var(--text-on-light-heading); }
.contact-item .ci-value a:hover{ color:var(--brand-500); text-decoration:none; }
.contact-item .ci-sub{ font-size:var(--text-sm); color:var(--text-on-light-muted); margin-top:var(--sp-1); }

.hours-list{ display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-2); }
.hours-list .hrow{
  display:flex; justify-content:space-between; gap:var(--sp-6);
  font-size:var(--text-sm); color:var(--text-on-light-body);
}
.hours-list .hrow span:last-child{ color:var(--text-on-light-heading); }

/* ---------- Contact section: DARK theme overrides ---------- */
.section-dark .form-success{ background:var(--dark-3); border-left:3px solid var(--brand-500); }
.section-dark .form-success h3{ color:var(--text-on-dark-heading); }
.section-dark .contact-item{ border-bottom-color:var(--border-dark); }
.section-dark .contact-item .ci-label{ color:var(--text-on-dark-muted); }
.section-dark .contact-item .ci-value{ color:var(--text-on-dark-heading); }
.section-dark .contact-item .ci-value a{ color:var(--text-on-dark-heading); }
.section-dark .contact-item .ci-value a:hover{ color:var(--brand-400); }
.section-dark .contact-item .ci-sub{ color:var(--text-on-dark-muted); }
.section-dark .hours-list .hrow{ color:var(--text-on-dark-body); }
.section-dark .hours-list .hrow span:last-child{ color:var(--text-on-dark-heading); }

/* ---------- Embedded Google map — full width, orange top/bottom rules ---------- */
.map-section{ background:var(--light-alt); padding:var(--sp-10) 0 0; }
.map-title-row{ display:flex; align-items:center; justify-content:center; gap:var(--sp-4); margin-bottom:var(--sp-10); }
.map-title{ text-align:center; margin-bottom:0; }

/* Animated location-pin badge beside "We are based here" (adapted from https://codepen.io/suez/pen/doMKLP, full build sequence) */
.map-pin{ width:42px; height:42px; flex:none; overflow:visible; }
.map-pin__group{ transform-origin:30px 30px; animation:map-pin-group 8s 1s infinite; }
.map-pin__scaffold{ animation:map-pin-scaffold 8s 1s infinite; }
.map-pin__square{
  stroke:var(--grey-300);
  stroke-dasharray:240,240; stroke-dashoffset:240;
  animation:map-pin-square 8s 1s infinite;
}
.map-pin__line{
  stroke:var(--grey-300);
  stroke-dasharray:60,60; stroke-dashoffset:60;
  animation:map-pin-line 8s 1s infinite;
}
.map-pin__line-1{ animation-delay:.6s; }
.map-pin__line-2{ animation-delay:.8s; }
.map-pin__line-3{ animation-delay:1s; }
.map-pin__circleBig{
  stroke:var(--grey-300);
  stroke-dasharray:188.522,188.522; stroke-dashoffset:188.522;
  animation:map-pin-bigCircle 8s 1s infinite;
}
.map-pin__circleSmall{
  stroke:var(--grey-300);
  stroke-dasharray:94.261,94.261; stroke-dashoffset:94.261;
  animation:map-pin-smallCircle 8s 1s infinite;
}
.map-pin__outer{
  stroke:var(--brand-500); fill:transparent;
  stroke-dasharray:201.391,201.391; stroke-dashoffset:201.391;
  animation:map-pin-outer 8s 1s infinite;
}
.map-pin__inner{
  stroke:var(--brand-500); fill:transparent;
  stroke-dasharray:94.261,94.261; stroke-dashoffset:94.261;
  animation:map-pin-inner 8s 1s infinite;
}
@keyframes map-pin-square{
  15%{ stroke-dashoffset:0; }
  100%{ stroke-dashoffset:0; }
}
@keyframes map-pin-line{
  23%{ stroke-dashoffset:60; }
  30%{ stroke-dashoffset:0; }
  100%{ stroke-dashoffset:0; }
}
@keyframes map-pin-bigCircle{
  30%{ stroke-dashoffset:188.522; }
  43%{ stroke-dashoffset:0; }
  100%{ stroke-dashoffset:0; }
}
@keyframes map-pin-smallCircle{
  43%{ stroke-dashoffset:94.261; }
  53%{ stroke-dashoffset:0; }
  100%{ stroke-dashoffset:0; }
}
@keyframes map-pin-group{
  53%{ transform:rotate(0); }
  61%{ transform:rotate(45deg); }
  94%{ transform:rotate(45deg); opacity:1; }
  100%{ transform:rotate(45deg); opacity:0; }
}
@keyframes map-pin-outer{
  61%{ stroke-dashoffset:201.391; }
  71%{ stroke-dashoffset:0; }
  79%{ stroke-dashoffset:0; fill:transparent; }
  94%{ stroke-dashoffset:0; fill:var(--brand-500); }
  100%{ stroke-dashoffset:0; fill:var(--brand-500); }
}
@keyframes map-pin-inner{
  71%{ stroke-dashoffset:94.261; }
  79%{ stroke-dashoffset:0; fill:transparent; }
  94%{ stroke-dashoffset:0; fill:#fff; }
  100%{ stroke-dashoffset:0; fill:#fff; }
}
@keyframes map-pin-scaffold{
  53%{ opacity:1; }
  79%{ opacity:.2; }
  94%{ opacity:0; }
  100%{ opacity:0; }
}
@media (max-width:520px){ .map-pin{ display:none; } }
.map-frame{
  display:block;
  width:100%;
  height:480px;
  border:0;
  filter:grayscale(0.15);
}
@media (max-width:520px){ .map-frame{ height:340px; } }

/* ---------- Footer phone/email subtle ---------- */
.footer-col .footer-contact{ color:#fff; opacity:.7; font-size:var(--text-sm); display:block; margin-bottom:var(--sp-3); }

/* ---------- Footer: centre the logo over the tagline, gap closed ---------- */
.footer-brand-col{ text-align:center; }
.footer-brand{ justify-content:center; margin-bottom:0; }
/* the logo SVG carries blank space below the wordmark — pull the text up to close it */
.footer-brand-col .footer-tagline{ margin-left:auto; margin-right:auto; margin-top:-4px; }

/* ---------- Footer legal links ---------- */
.footer-legal{ display:flex; gap:var(--sp-5); flex-wrap:wrap; }
.footer-legal a,
.footer-col a,
.footer a{ color:#eaeaea; font-size:var(--text-sm); text-decoration:none; transition:color var(--dur-base); }
.footer-legal a:hover,
.footer-col a:hover,
.footer a:hover{ color:var(--brand-500); text-decoration:none; }

/* ============================================================
   LEGAL PAGES (terms / privacy / cookies)
   ============================================================ */
.legal{ max-width:820px; margin:0 auto; }
.legal h2{ margin:var(--sp-12) 0 var(--sp-4); }
.legal h2:first-child{ margin-top:0; }
.legal h3{ margin:var(--sp-8) 0 var(--sp-3); }
.legal p,.legal li{ color:var(--text-on-light-body); line-height:var(--leading-loose); }
.legal p{ margin-bottom:var(--sp-4); }
.legal ul{ list-style:none; margin:0 0 var(--sp-4); padding:0; }
.legal ul li{ position:relative; padding-left:var(--sp-6); margin-bottom:var(--sp-2); }
.legal ul li::before{ content:''; position:absolute; left:0; top:.55em; width:8px; height:8px; background:var(--brand-500); }
.legal a{ color:var(--brand-500); }
.legal .legal-updated{ font-size:var(--text-sm); color:var(--text-on-light-muted); margin-bottom:var(--sp-8); }
.legal .legal-note{ border-left:3px solid var(--brand-500); background:var(--grey-25); padding:var(--sp-5) var(--sp-6); font-size:var(--text-sm); color:var(--text-on-light-muted); margin-top:var(--sp-12); }

/* ============================================================
   MOBILE MENU — taller dropdown, roomier rows, text shifted right
   ============================================================ */
@media (max-width:860px){
  .nav-toggle{ margin-left:auto; }
  .nav-links{ padding-top:var(--sp-8); padding-bottom:var(--sp-16); background:var(--light-alt); border-bottom:8px solid var(--brand-500); }
  .nav-link{
    display:block;
    padding-top:var(--sp-4);
    padding-bottom:var(--sp-4);
    padding-left:calc(45% + 50px);
    text-align:left;
    line-height:1.2;
    border-bottom:none;
  }
  .nav-link:hover{ background:#fff; }
}

/* ============================================================
   PROJECT CARDS — CLICKABLE + CASE-STUDY MODAL
   ============================================================ */
.project-card[data-project]{ cursor:pointer; transition:box-shadow .3s ease, transform .3s ease; }
.project-card[data-project] .photo{ transition:box-shadow .3s ease; }
.project-card[data-project] .photo img{ transition:transform .5s ease; }
.project-card[data-project]:hover .photo img,
.project-card[data-project]:focus-visible .photo img{ transform:scale(1.04); }
.project-card[data-project]:hover,
.project-card[data-project]:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 22px 50px rgba(38,38,38,.14);
}
.project-card[data-project]:focus-visible{ outline:2px solid var(--brand-500); outline-offset:4px; }
.project-view{
  position:absolute; inset:auto 0 0 0; z-index:2;
  display:flex; align-items:center; gap:var(--sp-2);
  padding:12px var(--sp-4);
  font-size:var(--text-xs); font-weight:var(--weight-semi);
  letter-spacing:var(--tracking-widest); text-transform:uppercase;
  color:#fff; background:linear-gradient(to top, rgba(38,38,38,.72), rgba(38,38,38,0));
  transform:translateY(100%); opacity:0; transition:transform .3s ease, opacity .3s ease;
}
.project-view::before{ content:''; width:16px; height:2px; background:var(--brand-500); }
.project-card[data-project]:hover .project-view,
.project-card[data-project]:focus-visible .project-view{ transform:translateY(0); opacity:1; }

/* Overlay */
.pm-overlay{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-6);
  background:rgba(26,24,21,.74);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.pm-overlay.is-open{ opacity:1; visibility:visible; }
.pm-dialog{
  position:relative;
  display:grid; grid-template-columns:1.4fr 1fr;
  width:100%; max-width:1240px; height:92vh;
  background:var(--light-bg);
  box-shadow:0 40px 90px rgba(0,0,0,.35);
  overflow:hidden;
  transform:translateY(16px) scale(.99); transition:transform .3s ease;
}
.pm-overlay.is-open .pm-dialog{ transform:none; }
@media (max-width:820px){
  .pm-dialog{ grid-template-columns:1fr; max-height:92vh; overflow-y:auto; }
}

.pm-close{
  position:absolute; top:10px; right:10px; z-index:5;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  padding:0 0 4px;
  font-size:26px; line-height:1; color:var(--brand-500);
  background:transparent; border:none; cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.pm-close:hover{ background:var(--brand-500); color:#fff; }

/* Gallery */
.pm-gallery{ display:flex; flex-direction:column; background:#fff; min-width:0; }
.pm-stage-row{ position:relative; display:flex; align-items:stretch; background:#fff; flex:1 1 auto; min-height:0; }
.pm-stage{
  position:relative; flex:1 1 auto; min-width:0; min-height:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff; overflow:hidden;
}
.pm-stage-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pm-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:44px; height:44px; flex:none;
  display:flex; align-items:center; justify-content:center;
  padding:0 0 4px;
  font-size:24px; line-height:1; color:var(--brand-500);
  background:#fff; border:none; cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  transition:background .2s ease, color .2s ease;
}
.pm-prev{ left:12px; }
.pm-next{ right:12px; }
.pm-nav:hover{ background:var(--brand-500); color:#fff; }
.pm-counter{
  position:absolute; bottom:12px; right:14px; z-index:3;
  padding:4px 10px;
  font-size:var(--text-xs); font-weight:var(--weight-semi); letter-spacing:var(--tracking-wide);
  color:#fff; background:rgba(38,38,38,.55);
}
.pm-thumbs{
  flex:0 0 auto;
  display:flex; gap:var(--sp-2);
  padding:var(--sp-3);
  overflow-x:auto; overflow-y:hidden;
  background:#fff;
  scrollbar-width:thin;
}
.pm-thumb{
  flex:0 0 auto; width:74px; height:56px; padding:0;
  border:2px solid transparent; background:none; cursor:pointer; opacity:.6;
  transition:opacity .2s ease, border-color .2s ease;
}
.pm-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pm-thumb:hover{ opacity:1; }
.pm-thumb.is-active{ opacity:1; border-color:var(--brand-500); }

/* Info panel */
.pm-info{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--sp-3);
  padding:var(--sp-8);
  overflow-y:auto;
}
.pm-info .category-label{ margin-bottom:var(--sp-1); }
.pm-info .project-loc{ margin-top:calc(-1 * var(--sp-1)); }
.pm-note{
  font-size:var(--text-sm); color:var(--text-on-light-muted);
  border-left:2px solid var(--brand-500); padding-left:var(--sp-3);
}
.pm-copy{ display:flex; flex-direction:column; gap:var(--sp-4); }
.pm-cta{ margin-top:var(--sp-2); }
/* Case-study pagination — jump between projects, pinned to the bottom of the info panel */
.pm-pagination{
  display:flex; align-items:center; justify-content:center;
  gap:var(--sp-1);
  width:100%;
  margin-top:auto;
  padding-top:var(--sp-6);
}
.pm-pagination-label{ font-size:var(--text-xs); margin-right:var(--sp-2); }
.pm-page-numbers{ display:flex; gap:0; }
.pm-page-num{
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--text-sm); font-weight:var(--weight-semi);
  color:var(--text-on-light-muted);
  background:none; border:none; cursor:pointer;
  transition:color .2s ease;
}
.pm-page-num:hover{ color:var(--text-on-light-heading); }
.pm-page-num.is-active{ color:var(--brand-500); }
.pm-page-arrow{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  font-size:20px; line-height:1;
  color:var(--brand-500);
  background:none; border:none; cursor:pointer;
  transition:color .2s ease;
  position:relative; top:-2px;
}
.pm-page-arrow:hover{ color:var(--grey-900); }
@media (max-width:820px){
  .pm-stage{ aspect-ratio:4 / 3; }
  .pm-nav{ flex-basis:40px; font-size:24px; }
  .pm-info{ padding:var(--sp-6); }
}

/* ============================================================
   HOMEPAGE HERO — photo background
   ============================================================ */
.hero-photo{
  position:relative;
  overflow:hidden;
  background:#262626 url("assets/img/homepage-banner.jpg") center/cover no-repeat;
}
.hero-photo::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(38,38,38,.85) 0%, rgba(38,38,38,.6) 55%, rgba(38,38,38,.4) 100%);
}
.hero-photo .hero-inner{ position:relative; z-index:1; }
.hero-photo .eyebrow-line{ color:#fff; }
.hero-photo .eyebrow-line::before{ background:#fff; }
.hero-photo .display-1{ color:var(--text-on-dark-heading); }
.hero-photo .hero-lead{ color:#fff; }

/* ============================================================
   PAGE HEADER — photo background variant (About / Contact / Gallery / Projects / Services)
   ============================================================ */
.page-header-photo{
  position:relative;
  overflow:hidden;
  background:#262626 center/cover no-repeat;
}
.page-header-photo::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(38,38,38,.85) 0%, rgba(38,38,38,.6) 55%, rgba(38,38,38,.35) 100%);
}
.page-header-photo .page-header-inner{ position:relative; z-index:1; }
/* Brand roof watermark, flush to the bottom-left corner of the banner */
.page-header-watermark{
  position:absolute;
  left:17px; bottom:17px;
  z-index:1;
  width:clamp(120px, 14vw, 220px);
  height:auto;
  opacity:1;
  pointer-events:none;
}
.page-header-photo .eyebrow-line{ color:#fff; }
.page-header-photo .eyebrow-line::before{ background:#fff; }
.page-header-photo .display-2{ color:var(--text-on-dark-heading); }
.page-header-photo .text-lead,
.page-header-photo .text-body{ color:#fff; }

/* Gallery header — lighter tint on the right so more of the photo shows through */
.page-gallery .page-header-photo::before{
  background:linear-gradient(120deg, rgba(38,38,38,.85) 0%, rgba(38,38,38,.5) 55%, rgba(38,38,38,.15) 100%);
}

.page-about .page-header{ background-image:url("assets/img/about-us-banner-image.jpg"); }
.page-gallery .page-header{ background-image:url("assets/img/garden-decking-banner.jpg"); }
.page-contact .page-header{ background-image:url("assets/img/garden-room-banner.jpg"); }
.page-projects .page-header{ background-image:url("assets/img/extension-banner.jpg"); }
.page-services .page-header{ background-image:url("assets/img/extension-banner-2.jpg"); }

/* About header — white wash overlay instead of the dark tint, text flipped to dark for legibility */
.page-about .page-header-photo::before{
  background:linear-gradient(120deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.65) 55%, rgba(255,255,255,.4) 100%);
}
.page-about .page-header-photo .eyebrow-line{ color:#fff; }
.page-about .page-header-photo .eyebrow-line::before{ background:#fff; }
.page-about .page-header-photo .display-2{ color:var(--text-on-light-heading); }
.page-about .page-header-photo .text-lead,
.page-about .page-header-photo .text-body{ color:var(--text-on-light-body); }
.page-about .page-header-photo .hero-actions .btn-solid:hover{ color:var(--brand-500); }
.page-about .page-header-photo .hero-actions .btn-primary{ color:var(--brand-500); }
.page-about .page-header-photo .hero-actions .btn-primary:hover{ background:var(--brand-500); color:#fff; }

/* ============================================================
   HOW WE WORK — 4 stacked wide/short process cards
   ============================================================ */
.process-steps{
  max-width:920px;
  margin:var(--sp-10) auto 0;
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
}
.process-step{
  display:flex;
  align-items:center;
  gap:var(--sp-6);
  padding:var(--sp-5) var(--sp-8);
  background:var(--light-bg);
  border:1px solid var(--border-light);
  border-left:3px solid var(--brand-500);
  transition:box-shadow .25s ease, transform .25s ease;
}
.process-step:hover{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(38,38,38,.10); }
.process-num{
  flex:0 0 auto; width:46px;
  font-size:var(--text-3xl); font-weight:var(--weight-semi);
  color:var(--brand-500); line-height:1;
}
.process-step-icon{
  flex:0 0 auto; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
}
.process-step-icon img{ width:34px; height:34px; object-fit:contain; }
.process-step-title{ flex:0 0 190px; margin:0; }
.process-step-desc{ flex:1 1 auto; margin:0; }
@media (max-width:680px){
  .process-step{ flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); padding:var(--sp-5) var(--sp-6); }
  .process-num{ width:auto; }
  .process-step-title{ flex:1 1 auto; }
  .process-step-desc{ flex:1 1 100%; }
}