/* =================================================================
   CUSTOM CRETE — SHARED DESIGN SYSTEM
   Premium dark gallery theme. Concrete & epoxy contractor, Waldo OH.
   Plain static HTML, no build step, no frameworks.

   TABLE OF CONTENTS
   01. Design tokens (:root custom properties)
   02. Reset & base elements
   03. Accessibility helpers (skip link, sr-only, focus ring)
   04. Layout primitives (.container, .section, .grid, cols)
   05. Typography helpers (.eyebrow, .section-head, .lead, .muted)
   06. Buttons (.btn + variants)
   07. Site header / navigation
   08. Hero (home) — crossfade slider
   09. Interior page header (.page-hero)
   10. Service cards
   11. Project cards (editorial mosaic variants)
   12. Features (why-us)
   13. Process steps
   14. Reviews
   15. Stats
   16. Before / After comparison slider
   17. Gallery (filters + grid + lightbox)
   18. Contact (NAP, hours — no form)
   19. CTA band
   20. Badges / chips
   21. Footer
   22. Sticky mobile-call button
   23. Reveal-on-scroll animation
   24. Reduced-motion overrides
   ================================================================= */


/* =================================================================
   01. DESIGN TOKENS
   ================================================================= */
:root{
  /* --- Neutral charcoal / concrete scale (industrial, no blue tint) --- */
  --ink:#171717;            /* deepest: header, footer, scrims */
  --bg:#1c1c1c;             /* page background */
  --bg-2:#222222;           /* alternating section */
  --surface:#272727;        /* cards */
  --surface-2:#2f2f2f;      /* raised / hover (concrete gray) */
  --line:rgba(255,255,255,.10); /* hairline borders */
  --line-strong:rgba(255,255,255,.18);

  /* --- Text --- */
  --text:#f4f4f4;           /* primary text — bright concrete white */
  --muted:rgba(244,244,244,.70); /* secondary text */
  --faint:rgba(244,244,244,.50); /* tertiary / fine print */

  /* --- Brand (blue family, brightened for dark contrast) --- */
  --brand:#1f6dff;          /* primary accent on dark */
  --brand-strong:#025AE7;   /* original brand blue */
  --brand-dark:#0246B4;     /* pressed / deep */
  --brand-2:#1C89D9;        /* secondary brand / gradients */
  --brand-rgb:31,109,255;
  --brand-strong-rgb:2,90,231;
  --brand-2-rgb:28,137,217;
  --on-brand:#ffffff;       /* text on brand fill (AA: white on #1f6dff) */

  /* --- Type families --- */
  --font-body:'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  /* Oswald — condensed industrial sans for sub-headings, labels, and buttons. */
  --font-display:'Oswald', 'Arial Narrow', system-ui, sans-serif;
  /* Alfa Slab One — a heavy, blocky slab serif; the rugged headline face (reads
     like heavy-duty industrial / wood-type signage, tougher than a condensed
     sans). Single weight (400) IS its black, so rugged elements use weight 400.
     Reserved for h1/h2 + the big stat numbers. */
  --font-display-rugged:'Alfa Slab One', 'Rockwell', Georgia, serif;

  /* --- Radius --- */
  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
  --r-pill:999px;
  --r-btn:11px;            /* rectangular-with-curved-edges buttons */

  /* --- Shadows + brand glow --- */
  --shadow-sm:0 2px 8px rgba(0,0,0,.28);
  --shadow:0 14px 34px rgba(0,0,0,.42);
  --shadow-lg:0 28px 64px rgba(0,0,0,.5);
  --glow:0 10px 30px rgba(var(--brand-rgb),.38);
  --glow-strong:0 16px 44px rgba(var(--brand-rgb),.5);

  /* --- Fluid type scale (clamp) --- */
  --step--1:clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:clamp(1rem, 0.97rem + 0.18vw, 1.075rem);
  --step-1:clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:clamp(1.45rem, 1.32rem + 0.66vw, 1.95rem);
  --step-3:clamp(1.75rem, 1.52rem + 1.16vw, 2.6rem);
  --step-4:clamp(2.1rem, 1.74rem + 1.8vw, 3.4rem);
  --step-5:clamp(2.6rem, 2.0rem + 3vw, 4.4rem);
  --step-6:clamp(3.1rem, 2.2rem + 4.6vw, 5.6rem);

  /* --- Spacing scale --- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:40px;
  --space-8:56px;
  --space-9:72px;
  --space-10:96px;
  --space-11:120px;
  --space-12:160px;

  /* --- Section rhythm --- */
  --section-y:clamp(46px, 5vw, 82px);

  /* --- Layout widths --- */
  --maxw:1200px;
  --maxw-wide:1320px;
  --gutter:clamp(18px, 4vw, 40px);

  /* --- Motion --- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.16s;
  --t:.28s;
  --t-slow:.5s;

  /* --- Header height (used to offset anchored scroll if needed) --- */
  --header-h:92px;

  color-scheme:dark;
}


/* =================================================================
   02. RESET & BASE
   ================================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-h);
  /* Reserve the scrollbar's space from the first frame so it can't pop in
     mid-load. Without this, the vertical scrollbar appearing as the page
     height settles shrinks the viewport by ~15px (Windows), which re-centers
     the page and makes the hero "jump/shake" on arrival. */
  scrollbar-gutter:stable;
}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Lock scroll while overlays (lightbox / mobile nav) are open */
body.is-locked{overflow:hidden}

img,svg,video{display:block;max-width:100%}
img{height:auto}

a{color:inherit;text-decoration:none}

ul,ol{list-style:none}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

input,textarea,select{font:inherit}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.14;
  letter-spacing:.005em;
  color:var(--text);
}
/* Big headline moments wear Alfa Slab One — a heavy blocky slab. It ships as a
   single already-black weight (400), and it's a WIDE, heavy face, so the
   per-element sizes below sit ~one step lower than the old condensed sans and
   the tracking is neutral — rugged, without shouting. */
h1,h2,.hero__title,.page-hero__title,.cta__title,.stat__num{
  font-family:var(--font-display-rugged);
  font-weight:400;
  letter-spacing:0;
  line-height:1.06;
}

p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}

::selection{background:rgba(var(--brand-rgb),.32);color:#fff}


/* =================================================================
   03. ACCESSIBILITY HELPERS
   ================================================================= */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:16px;top:-100px;z-index:2000;
  background:var(--brand);color:var(--on-brand);
  padding:12px 18px;border-radius:var(--r-sm);
  font-weight:700;box-shadow:var(--glow);
  transition:top var(--t) var(--ease);
}
.skip-link:focus{top:14px}

/* Unified focus-visible ring (brand) */
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:4px;
}
/* Don't double-ring elements that draw their own focus state */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible){outline:none}


/* =================================================================
   04. LAYOUT PRIMITIVES
   ================================================================= */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--wide{max-width:var(--maxw-wide)}

.section{padding-block:var(--section-y)}
.section--alt{background:var(--bg-2)}
.section--flush{padding-block:0}

/* Grids */
.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}

@media (max-width:980px){
  .cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
}


/* =================================================================
   05. TYPOGRAPHY HELPERS
   ================================================================= */
/* Quiet section label — no leading dot (the brand-dot on every eyebrow read
   as a templated "AI" tell). Just small, tracked, muted type. */
.eyebrow{
  display:inline-block;
  font-size:var(--step--1);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
  margin-bottom:14px;
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(20px,4vw,48px);
  margin-bottom:clamp(36px,5vw,64px);
  max-width:var(--maxw-wide);
}
.section-head__text{max-width:62ch}
.section-head h2{
  font-size:var(--step-3);
}
/* Section headings stay solid charcoal — blue is reserved for the hero /
   page-hero titles and the CTA buttons (kept a rare accent). */
.section-head h2 span{color:inherit}
.section-head__action{flex:0 0 auto}
/* Lead-less band headers (a lone h2, no .lead beneath it) want less air below
   than the heading+lead default, so the heading groups with its content
   instead of floating. Keeps the gap clearly smaller than the section's top
   padding for correct proximity. */
.section-head--tight{margin-bottom:clamp(20px,2.6vw,32px)}
.section-head--center{justify-content:center;text-align:center}
@media (max-width:760px){
  .section-head{flex-direction:column;align-items:flex-start;gap:20px}
  .section-head--center{align-items:center}
}

.lead{
  font-size:var(--step-1);
  line-height:1.55;
  color:var(--muted);
  margin-top:14px;
  max-width:60ch;
}

.muted{color:var(--muted)}

/* Handwritten/script accent fully removed for the industrial direction.
   .script is kept as a harmless no-op so any stray usage renders in the body
   face (bold) rather than falling back to a cursive system font. */
.script{font-family:inherit;font-weight:600;font-style:normal}


/* =================================================================
   06. BUTTONS
   ================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;
  font-weight:700;
  font-size:var(--step-0);
  letter-spacing:.01em;
  line-height:1;
  border-radius:var(--r-btn);
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:transform var(--t-fast) var(--ease),
             background var(--t) var(--ease),
             border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease),
             color var(--t) var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn svg{width:1.15em;height:1.15em}

.btn--primary{
  background:var(--brand);
  color:var(--on-brand);
}
.btn--primary:hover{
  background:var(--brand-strong);
  box-shadow:0 6px 16px rgba(var(--brand-rgb),.22);
}
.btn--primary:active{background:var(--brand-dark)}

.btn--ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--line-strong);
}
.btn--ghost:hover{
  border-color:var(--brand);
  background:rgba(var(--brand-rgb),.10);
}

.btn--light{
  background:rgba(255,255,255,.12);
  color:#fff;
  border-color:rgba(255,255,255,.2);
}
.btn--light:hover{background:rgba(255,255,255,.2)}

.btn--lg{padding:18px 34px;font-size:var(--step-1)}


/* =================================================================
   07. SITE HEADER / NAVIGATION
   ================================================================= */
/* Solid header (no glassmorphism) — reads like a real contractor's site, and
   stays dark in both light/dark themes so the logo + nav never wash out. */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.site-header.is-scrolled{
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  border-bottom-color:rgba(255,255,255,.14);
}

.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  height:var(--header-h);
}

.nav__logo{display:inline-flex;align-items:center;flex:0 0 auto}
.nav__logo img{
  height:64px;width:auto;
  transition:transform var(--t) var(--ease);
  transform-origin:left center;
}
.site-header.is-scrolled .nav__logo img{transform:scale(.82)}
@media (max-width:380px){
  .nav__logo img{height:50px}
  .site-header.is-scrolled .nav__logo img{transform:scale(.88)}
}

.nav__links{
  display:flex;align-items:center;gap:4px;
  margin-left:auto;
}
.nav__link{
  position:relative;
  padding:10px 14px;
  font-weight:500;
  font-size:.97rem;
  color:var(--muted);
  border-radius:var(--r-sm);
  transition:color var(--t) var(--ease),background var(--t) var(--ease);
}
.nav__link:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav__link[aria-current="page"]{color:var(--text)}
.nav__link[aria-current="page"]::after{
  content:"";
  position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--brand);border-radius:2px;
}

/* Hamburger toggle (hidden on desktop) */
.nav__toggle{
  display:none;
  width:48px;height:48px;
  border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.16);
  align-items:center;justify-content:center;
  flex:0 0 auto;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease);
}
.nav__toggle:hover{background:rgba(255,255,255,.06)}
.nav__toggle svg{width:24px;height:24px}
.nav__toggle .bar{
  stroke:#eef0f3;stroke-width:2;stroke-linecap:round;
  transform-origin:center;
  transition:transform var(--t) var(--ease),opacity var(--t-fast) var(--ease);
}
.nav__toggle[aria-expanded="true"] .bar--top{transform:translateY(6px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .bar--mid{opacity:0}
.nav__toggle[aria-expanded="true"] .bar--bot{transform:translateY(-6px) rotate(-45deg)}

/* --- Mobile nav panel --- */
@media (max-width:920px){
  .nav__toggle{display:inline-flex;order:3;margin-left:auto}

  .nav__links{
    position:fixed;
    left:0;right:0;top:var(--header-h);
    bottom:0;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    margin:0;padding:16px var(--gutter) 28px;
    background:var(--ink);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;

    opacity:0;visibility:hidden;
    transform:translateY(-12px);
    transition:opacity var(--t) var(--ease),
               transform var(--t) var(--ease),
               visibility var(--t) var(--ease);
  }
  .nav__links.is-open{opacity:1;visibility:visible;transform:translateY(0)}
  .nav__link{
    padding:14px 12px;
    font-size:1.08rem;
    border-radius:var(--r-sm);
    border-bottom:1px solid var(--line);
  }
  .nav__link:last-child{border-bottom:0}
  .nav__link[aria-current="page"]::after{display:none}
  .nav__link[aria-current="page"]{
    background:rgba(var(--brand-rgb),.12);
    box-shadow:inset 3px 0 0 var(--brand);
  }
}

/* =================================================================
   08. HERO (HOME) — calm crossfade slider
   ================================================================= */
.hero{
  position:relative;
  min-height:min(88vh, 880px);
  display:flex;align-items:center;
  overflow:hidden;
  background:var(--ink);
  isolation:isolate;
}

.hero__media{position:absolute;inset:0;z-index:-2}
.hero__slide{
  position:absolute;inset:0;
  opacity:0;
  transform:scale(1.06);
  transition:opacity 1.4s var(--ease), transform 8s linear;
  will-change:opacity,transform;
}
.hero__slide img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__slide.is-active{
  opacity:1;
  transform:scale(1);
  transition:opacity 1.4s var(--ease), transform 8s linear;
}

.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top, rgba(18,18,18,.96) 0%, rgba(18,18,18,.5) 42%, rgba(18,18,18,.2) 70%, rgba(18,18,18,.45) 100%),
    linear-gradient(to right, rgba(18,18,18,.78) 0%, rgba(18,18,18,.3) 55%, rgba(18,18,18,0) 100%);
}

.hero__inner{
  position:relative;
  width:100%;
  padding-block:clamp(48px,8vw,110px);
}
.hero__content{max-width:min(720px, 92%)}

.hero__note{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(.82rem, .74rem + .3vw, 1rem);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.86);
  margin-bottom:18px;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}

.hero__title{
  font-size:var(--step-5);
  line-height:1.02;
  color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.hero__title span{color:var(--brand)}

.hero__text{
  font-size:var(--step-1);
  line-height:1.5;
  color:rgba(238,240,243,.86);
  max-width:54ch;
  margin-top:22px;
}

.hero__actions{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-top:36px;
}
@media (max-width:480px){
  .hero__actions{flex-direction:column}
  .hero__actions .btn{width:100%;text-align:center}
}
.mobile-break{display:none}
@media (max-width:480px){.mobile-break{display:inline}}

/* Slide dots */
.hero__dots{
  position:absolute;
  left:var(--gutter);bottom:clamp(20px,4vw,40px);
  z-index:5;
  display:flex;gap:10px;
}
.hero__dots button{
  width:34px;height:5px;border-radius:3px;
  background:rgba(255,255,255,.32);
  transition:background var(--t) var(--ease),width var(--t) var(--ease);
}
.hero__dots button:hover{background:rgba(255,255,255,.55)}
.hero__dots button[aria-current="true"]{
  background:var(--brand);
  width:52px;
}
@media (max-width:920px){
  .hero{min-height:78vh}
  .hero__dots{left:var(--gutter)}
}
@media (max-width:640px){
  .hero{min-height:min(640px,86vh)}
  .hero__dots{bottom:14px}
  .hero__dots button{width:28px;height:4px}
  .hero__dots button[aria-current="true"]{width:42px}
}


/* =================================================================
   09. INTERIOR PAGE HEADER
   ================================================================= */
.page-hero{
  position:relative;
  min-height:clamp(500px,60vh,620px);
  display:flex;align-items:center;
  overflow:hidden;
  background:var(--ink);
  isolation:isolate;
}
@media (max-width:640px){
  .page-hero{min-height:clamp(320px,50vh,420px)}
}
/* Panoramic hero (the wide truck-fleet shot): a shorter band crops the snowy
   foreground and keeps every truck in frame across the full width. */
.page-hero--short{min-height:clamp(340px,42vh,450px)}
@media (max-width:640px){
  .page-hero--short{min-height:clamp(290px,42vh,360px)}
}
.page-hero img,
.page-hero__bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:center;
}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top, rgba(18,18,18,.94), rgba(18,18,18,.55) 70%, rgba(18,18,18,.42)),
    linear-gradient(to right, rgba(18,18,18,.72), rgba(18,18,18,.42));
}
.page-hero__inner{padding-block:clamp(64px,10vw,120px);width:100%}
.page-hero__eyebrow{
  /* inherits .eyebrow if combined; standalone fallback */
  color:rgba(238,240,243,.8);
}
.page-hero__title{
  font-size:var(--step-4);
  color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.4);
}
.page-hero__title span{color:var(--brand)}
.page-hero__text{
  font-size:var(--step-1);
  color:rgba(238,240,243,.86);
  max-width:56ch;
  margin-top:18px;
}


/* =================================================================
   10. SERVICE CARDS
   ================================================================= */
.service-card{
  position:relative;
  display:flex;flex-direction:column;
  gap:14px;
  padding:clamp(24px,3vw,34px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform var(--t) var(--ease),
             border-color var(--t) var(--ease),
             background var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
/* subtle top accent on hover */
.service-card::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--ease-out);
}
.service-card:hover{
  transform:translateY(-4px);
  background:var(--surface-2);
  border-color:var(--line-strong);
  box-shadow:var(--shadow);
}
.service-card:hover::before{transform:scaleX(1)}

/* Plain brand-colored line icon — no filled rounded-box tile (templated tell) */
.service-card__icon{
  display:flex;align-items:center;
  color:var(--brand);
  margin-bottom:4px;
}
.service-card__icon svg{width:34px;height:34px}

.service-card__title{font-size:var(--step-1)}
.service-card__text{color:var(--muted);margin:0}

.service-card__link{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;color:var(--brand);
  padding-top:6px;
}
.service-card__link svg{
  width:1em;height:1em;
  transition:transform var(--t) var(--ease);
}
.service-card:hover .service-card__link svg{transform:translateX(2px)}


/* =================================================================
   11. PROJECT CARDS (editorial mosaic)
   ================================================================= */
.project-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  isolation:isolate;
}
.project-card__media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  /* When a tall/wide sibling makes the grid row taller, grow to fill the
     whole card so the image covers it instead of leaving a grey gap below. */
  flex:1 1 auto;
  min-height:0;
}
.project-card__media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease-out);
  will-change:transform;
}
.project-card:hover .project-card__media img,
.project-card:focus-visible .project-card__media img{transform:scale(1.02)}

/* always-legible caption gradient */
.project-card__overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top, rgba(18,18,18,.86) 0%, rgba(18,18,18,.25) 45%, rgba(18,18,18,0) 70%);
  pointer-events:none;
}
.project-card__label{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(18px,2.4vw,26px);
}
.project-card__label strong{
  display:block;
  font-size:var(--step-1);
  font-weight:700;
  letter-spacing:.01em;
  color:#fff;
}
.project-card__label span{
  display:block;
  margin-top:4px;
  font-size:.95rem;
  color:rgba(255,255,255,.78);
}

/* mosaic variants */
.project-card--tall .project-card__media{aspect-ratio:3/4}
.project-card--wide .project-card__media{aspect-ratio:16/9}
@media (max-width:640px){
  .project-card--tall .project-card__media,
  .project-card--wide .project-card__media{aspect-ratio:4/3}
}


/* =================================================================
   12. FEATURES (why-us)
   ================================================================= */
.feature{
  display:flex;flex-direction:column;gap:12px;
  padding:clamp(20px,2.6vw,30px);
}
.feature__icon{
  display:flex;align-items:center;
  color:var(--brand);
}
.feature__icon svg{width:30px;height:30px}
.feature__title{font-size:var(--step-1)}
.feature__text{color:var(--muted);margin:0}

/* Why-us as an editorial image + list band (NOT a third icon-card grid) —
   breaks the home page's stacked-grid monotony and leads with real work. */
/* Top-align the photo with the heading (it was vertically centred, so it
   floated a touch low) and open up the gap so the checklist isn't crowding
   the image. */
.why{align-items:stretch;gap:clamp(30px,5vw,64px)}
.why__media{
  margin:0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.why__media img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
/* A clean, hairline-divided checklist of scannable claims (title-only).
   Symmetric row padding keeps each title optically centered in its row. */
.why-list{display:grid;gap:0;margin-top:clamp(20px,2.5vw,28px)}
.why-item{padding:clamp(16px,2vw,22px) 0;border-top:1px solid var(--line)}
.why-item:last-child{border-bottom:1px solid var(--line)}
.why-item h3{font-size:var(--step-2);margin:0;line-height:1.2}
@media (max-width:760px){.why__media{order:-1}}


/* =================================================================
   13. PROCESS STEPS (connecting line on desktop)
   ================================================================= */
/* Numbered steps as a clean index — a thin rule across the top of each step,
   a bold brand numeral beneath it, then the title + text. No circles and no
   connecting line running through them (that read templated and a bit odd). */
.process{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,3.2vw,48px);
}
.step{
  display:flex;flex-direction:column;gap:6px;
  padding-top:16px;
  border-top:2px solid var(--line-strong);
}
.step__num{
  display:block;width:auto;height:auto;
  background:none;border:0;border-radius:0;box-shadow:none;
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 1.1rem + .9vw, 2rem);
  font-weight:700;line-height:1;letter-spacing:0;
  color:var(--brand);
}
.step__title{font-size:var(--step-1);margin-top:2px}
.step__text{color:var(--muted);margin:0}

@media (max-width:860px){
  .process{grid-template-columns:repeat(2,1fr)}
  .process::before{display:none}
}
@media (max-width:480px){
  .process{grid-template-columns:1fr}
}


/* =================================================================
   14. REVIEWS
   ================================================================= */
.review{
  display:flex;flex-direction:column;gap:16px;
  padding:clamp(24px,3vw,34px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  height:100%;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.review:hover{border-color:var(--line-strong);background:var(--surface-2)}
.review__stars{display:inline-flex;gap:3px;color:var(--brand)}
.review__stars svg{width:20px;height:20px}
.review__text{
  font-size:1.08rem;
  line-height:1.6;
  color:var(--text);
  margin:0;
}
.review__author{margin-top:auto;font-weight:700}
.review__author span{
  display:block;
  font-weight:400;
  font-size:.9rem;
  color:var(--muted);
}


/* =================================================================
   15. STATS
   ================================================================= */
.stat{text-align:center;padding:12px}
/* Charcoal numerals (not blue) — keeps the page grounded and reserves brand
   blue for CTAs and links per the industrial direction. */
.stat__num{
  font-size:var(--step-4);
  font-weight:400;
  line-height:1;
  color:var(--text);
}
.stat__label{
  display:block;
  margin-top:10px;
  font-size:var(--step--1);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
}


/* =================================================================
   16. BEFORE / AFTER COMPARISON SLIDER
   ================================================================= */
.ba{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.ba__frame{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  user-select:none;
  touch-action:pan-y;
}
@media (max-width:480px){
  .ba__frame{aspect-ratio:4/3}
  .ba__tag--before,.ba__tag--after{font-size:.7rem;padding:4px 10px}
}
.ba__img{position:absolute;inset:0;width:100%;height:100%}
.ba__img img{width:100%;height:100%;object-fit:cover;pointer-events:none}
/* after layer sits full-size on top and is revealed from the left via
   clip-path (JS updates it) — container-safe, unlike the old width:100vw. */
.ba__img--after{clip-path:inset(0 50% 0 0)}

.ba__handle{
  position:absolute;top:0;bottom:0;left:50%;
  width:3px;
  background:rgba(255,255,255,.9);
  transform:translateX(-50%);
  z-index:3;
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.2);
}
.ba__handle::after{
  content:"";
  position:absolute;top:50%;left:50%;
  width:44px;height:44px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:2px solid #fff;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  /* clean left/right chevrons (a real drag affordance) */
  background:rgba(18,18,18,.72)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 8l-4 4 4 4'/%3E%3Cpath d='M14 8l4 4-4 4'/%3E%3C/svg%3E")
    center / 22px no-repeat;
}

/* visually-hidden range that drives the divider (keyboard accessible) */
.ba__range{
  position:absolute;inset:0;z-index:4;
  width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;
}
.ba__range:focus-visible + .ba__handle::after{
  outline:2px solid var(--brand);outline-offset:3px;
}

.ba__tag--before,
.ba__tag--after{
  position:absolute;top:16px;z-index:3;
  padding:6px 14px;border-radius:var(--r-pill);
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  background:rgba(18,18,18,.72);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  pointer-events:none;
}
.ba__tag--before{right:16px}
.ba__tag--after{left:16px;background:rgba(var(--brand-rgb),.85)}


/* =================================================================
   17. GALLERY (filters + grid + lightbox)
   ================================================================= */
.gallery__filters{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-bottom:clamp(28px,4vw,44px);
}
@media (max-width:480px){
  .gallery__filters{gap:8px}
  .filter-btn{padding:10px 14px;font-size:.88rem;flex:1 1 auto;text-align:center;min-width:calc(50% - 8px)}
}
.filter-btn{
  padding:10px 20px;
  border-radius:var(--r-btn);
  font-weight:500;font-size:.95rem;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--line);
  transition:color var(--t) var(--ease),background var(--t) var(--ease),border-color var(--t) var(--ease);
}
.filter-btn:hover{color:var(--text);border-color:var(--line-strong)}
.filter-btn.is-active,
.filter-btn[aria-pressed="true"]{
  color:var(--on-brand);
  background:var(--brand);
  border-color:var(--brand);
  box-shadow:var(--glow);
}

/* Responsive masonry-ish grid using the tall/wide project-card variants */
/* True masonry via CSS columns so mixed aspect ratios pack with no gaps */
.gallery__grid{
  columns:3;
  column-gap:clamp(12px,1.6vw,20px);
}
@media (max-width:900px){.gallery__grid{columns:2}}
@media (max-width:420px){.gallery__grid{columns:1}}

.gallery__item{
  position:relative;
  display:block;width:100%;
  margin:0 0 clamp(12px,1.6vw,20px);
  break-inside:avoid;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  aspect-ratio:4/3;
  cursor:zoom-in;
}
.gallery__item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-out);
}
.gallery__item::after{
  content:"";position:absolute;inset:0;
  background:rgba(var(--brand-rgb),0);
  transition:background var(--t) var(--ease);
}
.gallery__item:hover img,
.gallery__item:focus-visible img{transform:scale(1.02)}
.gallery__item:hover::after{background:rgba(var(--brand-rgb),.12)}
.gallery__item.is-tall{aspect-ratio:3/4}
.gallery__item.is-wide{aspect-ratio:16/9}
/* hide filtered-out items */
.gallery__item[hidden]{display:none}
/* failed image -> neutral tile with a quiet label (never a broken-image icon) */
.gallery__item.is-img-error{background:var(--surface-2)}
.gallery__item.is-img-error img{visibility:hidden}
.gallery__item.is-img-error::before{
  content:"Photo unavailable";
  position:absolute;inset:0;z-index:1;
  display:grid;place-items:center;
  color:var(--muted);font-size:.9rem;letter-spacing:.02em;
}

/* filter status + empty state */
.gallery__status{
  color:var(--muted);font-size:.95rem;
  margin:-6px 0 clamp(22px,3vw,34px);
}
/* "View all N photos" — expands a capped filter */
.gallery__more{
  display:flex;justify-content:center;
  margin-top:clamp(6px,1.5vw,16px);
}
.gallery__more[hidden]{display:none}
.gallery__empty{
  text-align:center;
  padding:clamp(40px,6vw,72px) 20px;
  color:var(--muted);
}
.gallery__empty strong{
  display:block;color:var(--text);
  font-family:var(--font-display);font-size:var(--step-2);
  margin-bottom:8px;
}

/* --- Lightbox --- */
.lightbox{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,56px);
  background:rgba(10,10,10,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;
  transition:opacity var(--t) var(--ease),visibility var(--t) var(--ease);
}
.lightbox.is-open{opacity:1;visibility:visible}

.lightbox__stage{
  position:relative;
  max-width:min(1100px,100%);
  max-height:100%;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.lightbox__img{
  max-width:100%;
  max-height:80vh;
  width:auto;height:auto;
  border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  background:var(--surface);
}
.lightbox__cap{
  color:rgba(255,255,255,.84);
  font-size:.98rem;
  text-align:center;
}

.lightbox__btn{
  position:absolute;
  display:grid;place-items:center;
  width:52px;height:52px;
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background var(--t) var(--ease),transform var(--t-fast) var(--ease);
}
.lightbox__btn:hover{background:rgba(255,255,255,.24)}
.lightbox__btn:active{transform:scale(.94)}
.lightbox__btn svg{width:24px;height:24px}
.lightbox__btn.is--prev{left:clamp(8px,2vw,24px);top:50%;transform:translateY(-50%)}
.lightbox__btn.is--next{right:clamp(8px,2vw,24px);top:50%;transform:translateY(-50%)}
.lightbox__btn.is--prev:hover{transform:translateY(-50%)}
.lightbox__btn.is--next:hover{transform:translateY(-50%)}
.lightbox__btn.is--close{top:clamp(8px,2vw,24px);right:clamp(8px,2vw,24px)}
@media (max-width:640px){
  .lightbox{padding:12px}
  .lightbox__img{max-height:68vh}
  .lightbox__btn.is--prev,.lightbox__btn.is--next{
    top:auto;bottom:16px;transform:none;
    width:48px;height:48px;
  }
  .lightbox__btn.is--prev{left:calc(50% - 58px)}
  .lightbox__btn.is--next{right:calc(50% - 58px)}
  .lightbox__btn.is--prev:hover,.lightbox__btn.is--next:hover{transform:none}
  .lightbox__cap{font-size:.9rem;padding-bottom:64px}
}


/* =================================================================
   18. CONTACT (NAP + hours — NO form)
   ================================================================= */
.contact-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(20px,3vw,32px);
  align-items:start;
}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

.contact-card{
  padding:clamp(26px,3.4vw,40px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.contact-card h3{font-size:var(--step-2);margin-bottom:6px}

.contact-row{
  display:flex;align-items:flex-start;gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.contact-row:last-child{border-bottom:0}
.contact-row__icon{
  display:grid;place-items:center;
  width:44px;height:44px;flex:0 0 auto;
  border-radius:var(--r-sm);
  color:var(--brand);
  background:rgba(var(--brand-rgb),.10);
  border:1px solid rgba(var(--brand-rgb),.2);
}
.contact-row__icon svg{width:22px;height:22px}
.contact-row__body{display:flex;flex-direction:column;gap:2px;min-width:0;word-wrap:break-word;overflow-wrap:anywhere}
.contact-row__label{
  font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);
}
.contact-row__value{font-weight:700;font-size:1.08rem}
.contact-row__value a:hover{color:var(--brand)}
.contact-row__value a{display:inline-block;min-height:44px;padding:6px 0}

/* About "Quick Facts": compact label | value spec rows (one line each) so the
   card sits even with the Our Story text instead of towering over it. */
.quickfacts .contact-row{padding:11px 0}
.quickfacts .contact-row__body{flex-direction:row;align-items:baseline;gap:clamp(14px,2.5vw,26px)}
.quickfacts .contact-row__label{flex:0 0 7rem;white-space:nowrap}
.quickfacts .contact-row__value{font-size:1rem}
@media (max-width:480px){
  .quickfacts .contact-row__body{flex-direction:column;gap:2px}
  .quickfacts .contact-row__label{flex:none}
}

.hours-list{display:grid;gap:2px;margin-top:6px}
.hours-list li{
  display:flex;justify-content:space-between;gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.hours-list li:last-child{border-bottom:0}
.hours-list dt,.hours-list .day{color:var(--muted)}
.hours-list dd,.hours-list .time{font-weight:700;color:var(--text)}


/* =================================================================
   19. CTA BAND
   ================================================================= */
.cta{
  position:relative;
  overflow:hidden;
  padding:clamp(36px,5vw,64px) clamp(28px,5vw,56px);
  border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--brand) 7%, var(--surface));
  border:1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,48px);flex-wrap:wrap;
  text-align:left;
}
.cta__title{font-size:var(--step-3)}
.cta__text{color:var(--muted);margin-top:10px;max-width:52ch}
.cta__action{flex:0 0 auto}
@media (max-width:680px){
  .cta{flex-direction:column;align-items:flex-start;text-align:left}
}


/* =================================================================
   20. BADGES / CHIPS
   ================================================================= */
.badge,
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;
  border-radius:var(--r-btn);
  font-size:.85rem;font-weight:500;
  color:var(--muted);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
}
.badge svg,.chip svg{width:1em;height:1em;color:var(--brand)}
.badge--brand,
.chip--brand{
  color:#cfe0ff;
  background:rgba(var(--brand-rgb),.12);
  border-color:rgba(var(--brand-rgb),.28);
}


/* =================================================================
   21. FOOTER
   ================================================================= */
.site-footer{
  background:var(--ink);
  color:var(--text);
  border-top:1px solid var(--line);
  padding-block:clamp(56px,7vw,88px) 32px;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:clamp(28px,4vw,56px);
}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}

.footer__brand img{height:58px;width:auto;margin-bottom:18px}
.footer__brand p{color:var(--muted);max-width:42ch;margin-bottom:20px}

.footer__nap{display:grid;gap:10px;font-size:.97rem}
.footer__nap a:hover{color:var(--brand)}
.footer__nap a{display:inline-block;padding:4px 0}
.footer__nap-row{display:flex;align-items:flex-start;gap:10px}
.footer__nap-row svg{width:18px;height:18px;color:var(--brand);flex:0 0 auto;margin-top:3px}
@media (max-width:560px){
  .footer__nap a{padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
}

.footer__social{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:18px;
  padding:10px 16px;
  border-radius:var(--r-btn);
  border:1px solid var(--line);
  color:var(--muted);
  font-weight:500;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.footer__social:hover{color:var(--text);border-color:var(--line-strong);background:rgba(255,255,255,.04)}
.footer__social svg{width:20px;height:20px}

.footer__col h3{
  font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--faint);font-weight:700;
  margin-bottom:18px;
}
.footer__col ul{display:grid;gap:12px}
.footer__col a{color:var(--muted);transition:color var(--t) var(--ease);display:inline-block;padding:4px 0}
.footer__col a:hover{color:var(--text)}
@media (max-width:560px){
  .footer__col ul{gap:4px}
  .footer__col a{padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
}

.footer__bottom{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  margin-top:clamp(40px,5vw,64px);
  padding-top:28px;
  border-top:1px solid var(--line);
  font-size:.88rem;
  color:var(--faint);
}
.footer__bottom a:hover{color:var(--text)}
@media (max-width:560px){
  .footer__bottom{flex-direction:column;align-items:center;text-align:center;gap:12px}
}


/* =================================================================
   22. STICKY MOBILE-CALL BUTTON
   ================================================================= */
.mobile-call{
  position:fixed;right:16px;bottom:16px;z-index:900;
  display:none;
}
.mobile-call a{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 22px;
  border-radius:14px;
  font-weight:700;
  font-family:var(--font-display);
  letter-spacing:.02em;
  color:var(--on-brand);
  background:var(--brand);
  box-shadow:0 10px 26px rgba(0,0,0,.4);
}
.mobile-call svg{width:20px;height:20px}
@media (max-width:820px){
  .mobile-call{display:block}
  /* Reserve room at the bottom of every page so the floating call button
     never sits on top of the footer's last actionable element. */
  .site-footer{padding-bottom:max(32px, env(safe-area-inset-bottom, 0px) + 84px)}
}


/* =================================================================
   23. REVEAL-ON-SCROLL
   ================================================================= */
/* Calm entrance: a quiet opacity fade only — no upward slide, no stagger.
   Content settles in as you reach it instead of choreographing onto the page
   (the slide-up-everything reveal is a classic template/"AI" motion tell).
   The --d stagger is intentionally ignored now; inline --d values are harmless. */
.reveal{
  opacity:0;
  transition:opacity .45s var(--ease-out);
  will-change:opacity;
}
.reveal.is-visible{opacity:1}


/* =================================================================
   24. REDUCED-MOTION OVERRIDES
   ================================================================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .hero__slide{transform:none !important}
  .hero__slide.is-active{transform:none !important}
  .project-card:hover .project-card__media img,
  .gallery__item:hover img{transform:none}
}


/* =================================================================
   25. NAV DROPDOWN (Services)
   ================================================================= */
.nav__item{position:relative;display:flex;align-items:center}
.nav__link--parent{display:inline-flex;align-items:center;gap:6px}
.nav__caret{width:13px;height:13px;flex:0 0 auto;transition:transform var(--t) var(--ease)}

.nav__submenu{
  position:absolute;top:calc(100% - 2px);left:0;
  min-width:236px;
  display:flex;flex-direction:column;gap:2px;
  padding:8px;
  background:var(--ink);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-sm);
  box-shadow:0 20px 44px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t) var(--ease);
  z-index:60;
}
.nav__item:hover .nav__submenu,
.nav__item:focus-within .nav__submenu,
.nav__submenu.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret{transform:rotate(180deg)}

.nav__subitem{
  padding:11px 14px;border-radius:8px;
  color:rgba(255,255,255,.74);font-weight:500;font-size:.95rem;white-space:nowrap;
  transition:background var(--t) var(--ease),color var(--t) var(--ease);
}
.nav__subitem:hover,
.nav__subitem:focus-visible{background:rgba(255,255,255,.08);color:#fff}

@media (max-width:920px){
  .nav__item{flex-direction:column;align-items:stretch;width:100%}
  .nav__link--parent{justify-content:space-between;width:100%}
  /* In the mobile panel the submenu becomes an inline accordion (JS toggles .is-open) */
  .nav__submenu{
    position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;padding:0;margin:0;
    background:rgba(255,255,255,.03);border:0;border-radius:8px;box-shadow:none;
    max-height:0;overflow:hidden;
    /* snap open/closed — animating max-height thrashes layout on mobile */
  }
  .nav__submenu.is-open{max-height:260px;margin:2px 0 4px}
  .nav__subitem{padding-left:24px}
  .nav__link--parent[aria-expanded="true"] .nav__caret{transform:rotate(180deg)}
}


/* =================================================================
   27. LIGHT THEME  (html[data-theme="light"])
   Header + footer stay dark in both themes (logo + grounding); only the
   page surfaces/text flip. Hero/page-hero scrims stay dark over photos.
   ================================================================= */
html[data-theme="light"]{
  --ink:#171717;            /* header/footer stay dark in both themes */
  /* Concrete-gray page so white cards genuinely lift off it (was near-white
     on near-white — surfaces blurred together). Clear 3-step value ladder:
     surface (lightest) > bg > bg-2 (deepest). */
  --bg:#e7e7e9;             /* page background — poured-concrete gray */
  --bg-2:#dadadc;           /* alternating section — a step deeper (steel) */
  --surface:#ffffff;        /* cards — bright white, reads as raised */
  --surface-2:#f3f3f4;      /* raised / hover */
  --line:rgba(23,23,23,.14);
  --line-strong:rgba(23,23,23,.26);
  --text:#171717;           /* charcoal headings + copy */
  --muted:#555555;          /* steel-gray secondary text */
  --faint:#6f6f6f;          /* fine print */
  --brand:#025AE7;          /* the brand/truck blue — vivid royal (logo diamond); ~5.8:1 AA on white */
  --brand-rgb:2,90,231;
  --brand-strong:#0246B4;   /* deeper royal for button :hover (brand == strong otherwise) */
  --shadow-sm:0 1px 2px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.10);
  --shadow:0 18px 40px rgba(0,0,0,.14);
  --shadow-lg:0 30px 64px rgba(0,0,0,.18);
  color-scheme:light;
}
/* In light mode, give resting cards a gentle lift so they don't dissolve into
   the page (dark mode leans on a lighter surface; light mode needs shadow). */
html[data-theme="light"] .service-card,
html[data-theme="light"] .review,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .filter-btn,
html[data-theme="light"] .svc-tab{box-shadow:var(--shadow-sm)}
/* Tiles that ARE meant to be tiles keep a readable brand wash on white.
   Service/feature icons stay plain brand line-art (no box) — matching dark
   mode and killing the stretched full-width "templated icon tile" bar. */
html[data-theme="light"] .contact-row__icon{
  background:rgba(var(--brand-strong-rgb),.10);
  border-color:rgba(var(--brand-strong-rgb),.24);
}
html[data-theme="light"] .step__num{color:var(--brand)}
/* Service-area chips: readable on the light page (was pale-blue on white) */
html[data-theme="light"] .chip{background:var(--surface)}
html[data-theme="light"] .chip--brand{
  color:var(--brand);
  background:rgba(var(--brand-strong-rgb),.10);
  border-color:rgba(var(--brand-strong-rgb),.30);
}

/* Header stays dark → keep its text/controls light */
html[data-theme="light"] .nav__link{color:rgba(255,255,255,.74)}
html[data-theme="light"] .nav__link:hover{color:#fff;background:rgba(255,255,255,.08)}
html[data-theme="light"] .nav__link[aria-current="page"]{color:#fff}
html[data-theme="light"] .nav__link[aria-current="page"]::after{background:#4d8bff}
@media (max-width:920px){
  html[data-theme="light"] .nav__link{border-bottom-color:rgba(255,255,255,.08)}
}

/* Footer stays dark → keep its text light */
html[data-theme="light"] .site-footer{color:#eef0f3;border-top-color:rgba(255,255,255,.08)}
html[data-theme="light"] .footer__brand p,
html[data-theme="light"] .footer__col a,
html[data-theme="light"] .footer__social{color:rgba(238,240,243,.72)}
html[data-theme="light"] .footer__social{border-color:rgba(255,255,255,.16)}
html[data-theme="light"] .footer__col h3,
html[data-theme="light"] .footer__bottom{color:rgba(238,240,243,.5)}
html[data-theme="light"] .footer__col a:hover,
html[data-theme="light"] .footer__bottom a:hover,
html[data-theme="light"] .footer__nap a:hover{color:#fff}
html[data-theme="light"] .footer__bottom{border-top-color:rgba(255,255,255,.08)}
html[data-theme="light"] .footer__nap-row svg,
html[data-theme="light"] .footer__social svg{color:#4d8bff}

/* The translucent-white "light" button is only legible over photos; on light
   surfaces fall back to a readable outline — but keep it white inside the
   photo heroes where the background is still dark. */
html[data-theme="light"] .btn--light{
  background:transparent;color:var(--text);border-color:var(--line-strong);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
html[data-theme="light"] .btn--light:hover{background:rgba(16,22,34,.05)}
html[data-theme="light"] .hero .btn--light,
html[data-theme="light"] .page-hero .btn--light{
  background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2);
}
html[data-theme="light"] .hero .btn--light:hover,
html[data-theme="light"] .page-hero .btn--light:hover{background:rgba(255,255,255,.2)}

/* Footer/header theme-switch link */
.footer__theme{
  display:inline-flex;align-items:center;gap:8px;
  color:inherit;font-weight:500;
  /* a11y: guarantee a real touch target */
  min-height:44px;padding-inline:10px;
}
.footer__theme:hover{color:#fff}


/* =================================================================
   28. HOMEPAGE HUMANIZING LAYER  (redesign pass)
   Goal: make the page feel built by craftspeople, not generated.
   - Material texture + honest depth (concrete grain, epoxy sheen)
   - Sturdy, grounded interactions (press/settle, NOT float-up)
   - Broken-grid editorial layouts (asymmetric stats, split services,
     2+1 reviews, cold-open before/after)
   - Varied typographic emphasis (Caveat accents; not one blue word
     in every heading)
   Shared-component refinements (.btn/.service-card/.review/.project-card,
   type, a11y) intentionally improve EVERY page. Home-only structures
   are scoped to home-specific classes so other pages are untouched.
   ================================================================= */

/* ---- 28.1  Material: concrete grain + honest depth ---------------
   A single desaturated SVG noise tile, layered as a background-IMAGE
   (never a pseudo-element over content — keeps it behind text with no
   z-index fights). Tune intensity in ONE place: the 0.35 below. */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='ccg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ccg)' opacity='0.35'/%3E%3C/svg%3E");
}
/* Page canvas carries the ONLY noise layer — one filter raster, tiled
   and cached. Shows through every default-background section. Applying
   the feTurbulence filter to many elements is expensive to rasterize,
   so we deliberately keep it to a single surface. */
body{background-image:var(--grain)}
/* Alt sections keep just a faint top shadow so each band reads like a
   separate poured slab meeting the one above it (cheap gradient, no
   per-section noise filter). */
.section--alt{
  background-color:var(--bg-2);
  background-image:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,0) 140px);
}


/* ---- 28.2  Typography: Oswald tuning ----------------------------- */
/* Anton already ships black, so the big display moments use weight 400 (a 700
   request would trigger ugly synthetic bolding). A hair of tracking opens up
   the heavy condensed letters at large sizes. */
.hero__title,.page-hero__title{font-weight:400;letter-spacing:0}
.stat__num{font-weight:400;letter-spacing:0}
.cta__title{font-weight:400;letter-spacing:0}
/* (The hero note is now an upright, tracked industrial eyebrow — no tilt.) */

/* Hero slider — calm crossfade only. The §08 Ken Burns (an 8s scale on a
   permanently GPU-promoted layer) was both unnecessary motion AND the source
   of the first-load hover flicker. We drop the zoom and the permanent
   will-change; the slides simply dissolve into one another. */
.hero__slide{
  transform:none;
  transition:opacity 1.4s var(--ease);
  will-change:auto;
}
.hero__slide.is-active{transform:none}

/* Legacy heading-accent hook (kept harmless; .script is no longer used in
   markup). Any stray h2 .script renders as a plain brand-colored word. */
h2 .script{
  font-style:normal;font-weight:inherit;
  color:var(--brand);letter-spacing:0;
}
/* Headings that live outside .section-head still color their <span> */
.why__text h2 span{color:inherit}


/* ---- 28.3  Sturdy interactions (override the universal float-up) --
   A concrete company's UI should feel like weight settling, not cards
   floating. Buttons press IN; cards firm up with a grounded shadow. */
.btn:hover{transform:none}
.btn:active{transform:translateY(1px);transition-duration:.06s}
.btn--primary:hover{
  background:var(--brand-strong);
  box-shadow:0 6px 18px rgba(var(--brand-rgb),.34),
             inset 0 1px 0 rgba(255,255,255,.16);
}
.btn--primary:active{
  background:var(--brand-dark);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.30);
}
.btn--ghost:hover{border-color:var(--brand);background-color:rgba(var(--brand-rgb),.10)}
.btn--light:hover{background-color:rgba(255,255,255,.2)}

/* Service cards: no lift — they get denser (heavier shadow, brand
   border) and the top accent becomes a solid control-joint line */
.service-card:hover{
  transform:none;
  background-color:var(--surface-2);
  border-color:rgba(var(--brand-rgb),.4);
  box-shadow:0 2px 4px rgba(0,0,0,.16), 0 14px 30px rgba(0,0,0,.30);
}
.service-card:active{transform:translateY(1px);box-shadow:0 1px 3px rgba(0,0,0,.2);transition-duration:.08s}
.service-card::before{background:var(--brand);height:3px}

/* Reviews: a left rule snaps to brand on hover (pinned/endorsed in
   print), with a tiny press instead of a float */
.review{
  position:relative;
  border-left:3px solid transparent;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),
             border-left-color var(--t) var(--ease-out),
             background-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.review:hover{
  border-color:var(--line-strong);
  border-left-color:var(--brand);
  background-color:var(--surface-2);
  box-shadow:var(--shadow-sm);
}
.review__author .script{
  font-family:inherit;font-weight:400;
  font-size:.9rem;letter-spacing:0;color:var(--muted);
}

/* Project cards: one quiet effect — a subtle, slow zoom on hover/focus.
   (Dropped the brightness/saturate bump, the label-lift and the active inset:
   too much happening at once for a calm gallery.) */
.project-card__media img{transition:transform .6s var(--ease-out)}
.project-card:hover .project-card__media img,
.project-card:focus-visible .project-card__media img{transform:scale(1.02)}

/* Process numbers stay still — no hover fill, no stamp-in. They are plain
   markers of a sequence, not interactive controls. */

/* Service-area chips earn a hover (they looked interactive but weren't) */
.chip{transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.chip:not(.chip--brand):hover{background-color:rgba(255,255,255,.09);border-color:var(--line-strong);color:var(--text)}
html[data-theme="light"] .chip:not(.chip--brand):hover{background-color:var(--surface-2)}

/* Sticky mobile call button: real press feedback + guaranteed height */
.mobile-call a{min-height:48px}
.mobile-call a:active{transform:scale(.96);box-shadow:0 4px 12px rgba(0,0,0,.3);transition:transform .08s var(--ease)}


/* ---- 28.4  Trust strip → asymmetric control-jointed ribbon ------- */
.stats-strip{
  display:grid;
  grid-template-columns:1.2fr 1.1fr 1.05fr 1fr;
  align-items:center;
}
/* The slab is wider than the old condensed sans — dial the numbers back a
   little so phrases like "2nd Gen" sit on one line and the ribbon reads
   confident, not shouty. */
.stats-strip .stat__num{font-size:clamp(2.2rem, 1.5rem + 2.4vw, 3.2rem)}
.stats-strip .stat{
  text-align:left;
  padding:6px clamp(16px,3vw,40px);
  border-left:1px solid var(--line);   /* saw-cut joints between facts */
}
.stats-strip .stat:first-child{border-left:0}
.stat--anchor .stat__num{font-size:clamp(2.6rem, 1.8rem + 3vw, 3.9rem)}  /* 1994 leads */
.stat__note{
  display:block;margin-top:6px;
  font-weight:500;font-size:.9rem;
  letter-spacing:.02em;text-transform:none;color:var(--muted);
}
@media (max-width:760px){
  .stats-strip{grid-template-columns:1fr 1fr}
  .stats-strip .stat{padding:16px}
  .stats-strip .stat:nth-child(odd){border-left:0}
  .stats-strip .stat:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:380px){
  .stats-strip{grid-template-columns:1fr}
  .stats-strip .stat{border-left:0;text-align:center}
  .stats-strip .stat:nth-child(n+2){border-top:1px solid var(--line)}
}


/* ---- 28.5  Services → editorial split (intro rail + card grid) ---- */
/* ---- 28.5  Services showcase (interactive picture switcher) -------
   Built for an older audience: a short list of services on the left;
   tap one and its photo fills the big stage on the right. Far less text
   than the old four-card grid. DOM order is head -> stage -> controls so
   the phone layout (a single column) reads naturally with no reordering;
   desktop uses grid areas to put the list beside the photo. */
.svc-showcase{
  display:grid;
  grid-template-columns:minmax(290px,.9fr) 1.2fr;
  grid-template-areas:
    "head  stage"
    "ctrl  stage";
  grid-template-rows:auto 1fr;
  column-gap:clamp(28px,4vw,52px);
  row-gap:20px;
  align-items:start;
}
.svc-head{grid-area:head}
.svc-stage{grid-area:stage;align-self:stretch}
.svc-controls{grid-area:ctrl;align-self:start}

.svc-heading{font-size:var(--step-3);line-height:1.05}
.svc-heading span{color:inherit}
.svc-hint{color:var(--muted);font-size:var(--step-1);margin-top:10px}

/* Service list — big, calm tap targets */
.svc-list{display:flex;flex-direction:column;gap:10px}
.svc-tab{
  display:flex;align-items:center;gap:16px;
  width:100%;text-align:left;
  padding:15px 18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--text);
  cursor:pointer;
  transition:background var(--t) var(--ease),
             border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.svc-tab:hover{background:var(--surface-2);border-color:var(--line-strong)}
.svc-tab.is-active{
  background:rgba(var(--brand-rgb),.08);
  border-color:var(--brand);
}
.svc-tab__icon{display:flex;flex:0 0 auto;color:var(--brand)}
.svc-tab__icon svg{width:30px;height:30px}
.svc-tab__text{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.svc-tab__name{font-family:var(--font-display);font-weight:500;font-size:var(--step-1);line-height:1.15}
.svc-tab__desc{color:var(--muted);font-size:var(--step--1)}
.svc-tab__chev{
  width:20px;height:20px;flex:0 0 auto;
  color:var(--faint);
  transition:transform var(--t) var(--ease),color var(--t) var(--ease);
}
.svc-tab.is-active .svc-tab__chev{color:var(--brand);transform:translateX(3px)}
.svc-cta{margin-top:24px}

/* Stage — one big picture that cross-fades between services */
.svc-stage{
  position:relative;
  margin:0;
  min-height:340px;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.svc-stage__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .5s var(--ease);
}
.svc-stage__img.is-active{opacity:1}
.svc-stage__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:36px 22px 16px;
  color:#fff;
  font-family:var(--font-display);font-weight:500;
  font-size:var(--step-1);
  background:linear-gradient(to top, rgba(18,18,18,.86), rgba(18,18,18,0));
  pointer-events:none;
}

@media (max-width:820px){
  .svc-showcase{display:block}
  .svc-head{margin-bottom:18px}
  .svc-stage{min-height:0;aspect-ratio:16/10;margin-bottom:20px}
}


/* ---- 28.6  Project mosaic spans (classed, and CLEARED on mobile) -- */
.project-card--span2{grid-column:span 2}
.project-card--span3{grid-column:span 3}
@media (max-width:980px){.project-card--span3{grid-column:span 2}}  /* grid is 2-col here */
@media (max-width:640px){
  .project-card--span2,
  .project-card--span3{grid-column:auto}                            /* grid is 1-col here */
}


/* ---- 28.7  Before/After cold open (no eyebrow→h2→lead block) ------ */
/* No width cap so the single-line headline can run full width. */
.ba-intro{margin-bottom:clamp(28px,4vw,46px)}
.ba-intro__script{
  display:block;font-family:var(--font-display);font-weight:700;letter-spacing:.005em;
  font-size:var(--step-3);line-height:1.1;color:var(--text);
}
/* Drag-to-compare cue on the slider — fades out once the user interacts
   (main.js adds .ba--touched). Helps older visitors spot that it's draggable. */
.ba__hint{
  position:absolute;left:50%;bottom:16px;z-index:3;
  transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(18,18,18,.74);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:var(--font-display);font-weight:500;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;
  pointer-events:none;
  transition:opacity .35s var(--ease);
}
.ba__hint svg{width:15px;height:15px}
.ba--touched .ba__hint{opacity:0}


/* ---- 28.8  Reviews → 2 (feature) + 1, plus an honest read-more ---- */
.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,28px);max-width:920px;margin-inline:auto}
.review--feature{grid-column:span 2}
.review--feature .review__text{font-size:1.22rem;line-height:1.55}
.review-more{
  grid-column:span 3;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(20px,4vw,40px);
  padding:clamp(20px,3vw,28px) clamp(24px,3vw,34px);
  border-radius:var(--r-lg);
  background-color:color-mix(in srgb, var(--brand) 6%, var(--surface));
  border:1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease);
}
.review-more:hover{border-color:var(--brand)}
.review-more .review__stars{flex:0 0 auto}
.review-more__line{font-family:var(--font-display);font-weight:600;font-size:var(--step-2)}
.review-more__link{display:inline-flex;align-items:center;gap:8px;margin-left:auto;color:var(--brand);font-weight:700}
.review-more__link svg{width:1.1em;height:1.1em;transition:transform var(--t) var(--ease)}
.review-more:hover .review-more__link svg{transform:translateX(2px)}
@media (max-width:860px){
  .reviews-grid{grid-template-columns:1fr 1fr}
  .review--feature{grid-column:span 2}
  .review-more{grid-column:span 2}
}
@media (max-width:600px){
  .reviews-grid{grid-template-columns:1fr}
  .review--feature,.review-more{grid-column:auto}
  .review-more{flex-direction:column;align-items:flex-start}
  .review-more__link{margin-left:0}
}


/* ---- 28.9  Why-us crew photo: handwritten caption over the image -- */
.why__media{position:relative}
.why__text{display:flex;flex-direction:column}
.why__text h2{font-size:var(--step-3)}   /* uses the under-used mid scale */
.why__caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:16px 18px;
  font-family:var(--font-display);font-weight:500;font-size:1.05rem;letter-spacing:.01em;color:#fff;
  background:linear-gradient(to top, rgba(18,18,18,.85), rgba(18,18,18,0));
}


/* ---- 28.10  Service areas list ----------------------------------- */
.areas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.areas .chip--brand{font-size:.95rem;padding:10px 18px}


/* ---- 28.11  CTA → close on real work (photo + scrim) ------------- */
.cta__action{display:flex;flex-wrap:wrap;gap:14px}
@media (max-width:480px){
  .cta__action{flex-direction:column;width:100%}
  .cta__action .btn{width:100%;text-align:center}
}
/* quiet reassurance line under the call CTA — sets hours / "leave a message" expectations */
.cta__note{flex-basis:100%;margin-top:10px;font-size:.85rem;line-height:1.5;color:rgba(255,255,255,.72);letter-spacing:.01em}
.cta--photo{
  background-color:var(--ink);
  background-image:
    linear-gradient(120deg, rgba(18,18,18,.92) 0%, rgba(18,18,18,.72) 55%, rgba(18,18,18,.60) 100%),
    url("LongDriveway.jpg");
  background-size:cover, cover;
  background-position:center, center;
  border:1px solid rgba(255,255,255,.12);
}
.cta--photo .cta__title{color:#fff}
.cta--photo .cta__text{color:rgba(255,255,255,.86)}
/* keep the translucent-white button white over the dark photo in light theme */
html[data-theme="light"] .cta--photo .btn--light{
  background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.22);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
html[data-theme="light"] .cta--photo .btn--light:hover{background:rgba(255,255,255,.24)}


/* ---- 28.12  A11y: real hero-dot touch targets ------------------- */
/* Keep the slim 5px visual bar, but give the thumb a 44px+ hit area */
.hero__dots button{position:relative}
/* expand the hit area vertically (tap target) without overlapping the
   neighbouring dot horizontally — overlap made the bar highlight flicker
   as the pointer crossed the row */
.hero__dots button::before{content:"";position:absolute;inset:-20px -4px}


/* ---- 28.13  Reduced motion: keep a gentle dissolve -------------- */
/* The blanket override in §24 snaps hero slides; allow a soft opacity
   fade (motion, not a vestibular trigger) while the Ken Burns zoom and
   the stamp/hover animations stay off. */
@media (prefers-reduced-motion: reduce){
  .hero__slide{transition:opacity 1.2s var(--ease) !important}
}


/* =================================================================
   29. INDUSTRIAL RE-DIRECTION  (charcoal palette pass)
   Header phone CTA, the reusable Trust Bar, industrial buttons, and
   the home crew band. Brand blue is reserved for CTAs, links, and the
   trust checks — everything else is charcoal / concrete / steel.
   ================================================================= */

/* ---- 29.1  Buttons feel like solid, stamped controls ------------ */
/* Oswald, a touch of tracking, normal case — substantial and direct. */
.btn{font-family:var(--font-display);font-weight:600;letter-spacing:.02em}

/* ---- 29.2  (Header phone CTA removed per client — the sticky mobile call
   button + footer phone cover the need, and brand blue stays a rare accent.) */

/* ---- 29.3  Trust Bar (reusable — every page, right after the hero) */
.trust{padding-block:clamp(22px,3vw,34px)}
.trust-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px clamp(20px,3vw,40px);
  padding:18px clamp(20px,3vw,30px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow-sm);
}
.trust-bar__item{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:500;letter-spacing:.01em;
  font-size:clamp(.92rem,.86rem + .2vw,1.02rem);
  color:var(--text);
}
.trust-bar__item svg{width:21px;height:21px;color:var(--brand);flex:0 0 auto}
/* On narrow phones, become a tidy left-aligned checklist */
@media (max-width:560px){
  .trust-bar{justify-content:flex-start;gap:13px 22px}
  .trust-bar__item{font-size:.93rem}
}

/* ---- 29.4  Service-card icons (line-art, brand) ----------------- */
.service-card__icon svg{stroke-width:1.7}
/* Four service cards read a touch tighter than the generic card — keep the
   title from getting too large in the 4-up row. */
@media (min-width:981px){
  .cols-4 .service-card__title{font-size:var(--step-1)}
}

/* ---- 29.4b  Substantial review cards (proof, not decoration) ----- */
.review--substantial .review__text{font-size:1.16rem;line-height:1.62}
.review--substantial .review__author{font-size:1.05rem}
.review--substantial .review__author span{font-size:.92rem;margin-top:3px}
.reviews-grid--home{align-items:start}

/* ---- 29.5  Home "What we do" — full-bleed square photo tiles -----
   Four big square project photos, edge-to-edge, each labelled with the
   service and linking through to the Services page. Photography leads. */
/* Centered intro flows symmetrically into the full-width tile band below
   (no more far-right floating button with a dead gap in the middle). */
.services-intro{
  max-width:62ch;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.services-intro h2{font-size:var(--step-3)}
.services-intro h2 span{color:inherit}
.services-intro .lead{margin-top:12px;max-width:56ch}
.services-intro .btn{margin-top:clamp(18px,2.4vw,26px)}

.services-tiles{
  display:grid;
  grid-template-columns:repeat(2,1fr);
}
.service-tile{
  position:relative;display:block;
  aspect-ratio:2/1;
  overflow:hidden;
  isolation:isolate;
  background:var(--surface);
}
.service-tile img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease-out);
}
.service-tile:hover img,
.service-tile:focus-visible img{transform:scale(1.02)}
.service-tile__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(18,18,18,.86) 0%, rgba(18,18,18,.28) 48%, rgba(18,18,18,0) 78%);
}
.service-tile__title{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(18px,1.8vw,30px);
  font-family:var(--font-display);font-weight:600;letter-spacing:.01em;
  font-size:clamp(1.15rem,.85rem + .9vw,1.7rem);line-height:1.08;
  color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.45);
}
/* a brand underline grows on hover/focus as the "go" affordance */
.service-tile__title::after{
  content:"";display:block;height:3px;width:66px;margin-top:12px;
  background:var(--brand);border-radius:2px;
  transform:scaleX(.5);transform-origin:left;
  transition:transform var(--t) var(--ease-out);
}
.service-tile:hover .service-tile__title::after,
.service-tile:focus-visible .service-tile__title::after{transform:scaleX(1)}
@media (max-width:600px){
  .services-tiles{grid-template-columns:1fr}
  .service-tile{aspect-ratio:16/10}
  .service-tile__title{font-size:1.25rem}
}


/* ---- 29.6  Service detail bands (Concrete / Epoxy): photo fills ----
   The photo sat shorter than the 6-item list beside it, leaving dead
   space below. At >=641px (the 2-col layout) the photo stretches to the
   list's height and object-fit crops it cleanly; below that the band is
   a single column and the photo keeps its natural 4/3. */
@media (min-width:641px){
  /* Photography leads: give the photo the wider column; alternate its side
     band-to-band (--rev) so the page has an editorial left/right rhythm. */
  .svc-detail-grid{align-items:stretch;grid-template-columns:1.25fr 1fr}
  .svc-detail-grid--rev{grid-template-columns:1fr 1.25fr}
  .svc-detail-grid .project-card{height:100%}
  .svc-detail-grid .project-card__media{aspect-ratio:auto;height:100%;min-height:360px}
  /* center the capability list vertically against the photo */
  .svc-detail-grid > div:not(.project-card){display:flex;align-items:center}
  .svc-detail-grid > div:not(.project-card) > .grid{width:100%}
}

/* The capability list is the primary content of these bands, so the service
   names carry more size and the rows get more room (scoped here so contact
   page rows keep their compact spec sizing). */
.svc-detail-grid .contact-row{padding:clamp(15px,1.7vw,22px) 0}
.svc-detail-grid .contact-row__value{font-size:clamp(1.2rem,1.6vw,1.5rem)}


/* ---- 29.7  Process band uses the shared .process grid; the services
   "Built like we live here too" / .feature-row band was removed per client. */