/* =====================================================================
   Trent & Peak Handyman — core stylesheet
   Warm-craftsman design system · hand-written, no framework
   Palette: forest green · warm oak · brass/amber · parchment cream
   Type: Fraunces (display) + Mulish (body)
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Greens (primary / trust) */
  --green-900:#15251C;
  --green-800:#1C3225;
  --green-700:#264634;   /* primary */
  --green-600:#345B45;
  --green-500:#4A7259;

  /* Oak / wood warmth */
  --oak-700:#7E5631;
  --oak-500:#A9794A;
  --oak-300:#CBA67B;

  /* Brass / amber (CTA accent) */
  --amber-400:#E0A93F;
  --amber-500:#D2942C;   /* accent */
  --amber-600:#B97C1C;
  --amber-700:#955F12;

  /* Cream / parchment (surfaces) */
  --cream-50:#FCF9F3;
  --cream-100:#F7F1E6;   /* page background */
  --cream-200:#EFE6D5;
  --cream-300:#E6D9C2;

  /* Ink (text) */
  --ink-900:#1F1A12;
  --ink-700:#463E30;
  --ink-500:#6E6453;     /* muted, AA on cream */
  --tan-border:#E1D4BC;

  --white:#ffffff;

  /* Typography */
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid type scale (clamp: min, vw, max) */
  --fs-hero:clamp(2.6rem, 1.4rem + 5.2vw, 5rem);
  --fs-h1:clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem);
  --fs-h2:clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem);
  --fs-h3:clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --fs-lead:clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
  --fs-body:1.0625rem;
  --fs-small:0.9rem;

  /* Spacing / layout */
  --container:1280px;
  --container-narrow:760px;
  --gutter:clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --section-y:clamp(3.5rem, 2rem + 6vw, 7rem);
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:22px;
  --radius-pill:999px;

  /* Shadows (warm-tinted) */
  --shadow-sm:0 1px 2px rgba(31,26,18,.06), 0 1px 3px rgba(31,26,18,.05);
  --shadow-md:0 10px 28px -12px rgba(31,26,18,.28);
  --shadow-lg:0 28px 60px -18px rgba(31,26,18,.34);

  --ease:cubic-bezier(.16,.84,.44,1);
  --header-h:78px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html:focus-within { scroll-behavior:smooth; }

body {
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink-900);
  background:var(--cream-100);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,picture,svg,video { display:block; max-width:100%; }
input,button,textarea,select { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:none; }
a { color:inherit; text-decoration:none; }
ul[class] { list-style:none; padding:0; }

h1,h2,h3,h4 {
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-0.01em;
  color:var(--green-900);
  font-optical-sizing:auto;
}

/* Skip link */
.skip-link {
  position:absolute; left:1rem; top:-3rem;
  background:var(--green-700); color:var(--cream-50);
  padding:.6rem 1rem; border-radius:var(--radius-sm); z-index:200;
  transition:top .2s var(--ease);
}
.skip-link:focus { top:1rem; }

/* Visible focus rings everywhere */
:where(a,button,input,textarea,select,[tabindex]):focus-visible {
  outline:3px solid var(--amber-500);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- Layout helpers ---------- */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--narrow { max-width:var(--container-narrow); }
.section { padding-block:var(--section-y); }
.section--cream { background:var(--cream-50); }
.section--green {
  background:
    radial-gradient(120% 120% at 100% 0%, var(--green-700) 0%, var(--green-800) 55%, var(--green-900) 100%);
  color:var(--cream-100);
}
.section--green h1,.section--green h2,.section--green h3 { color:var(--cream-50); }

.eyebrow {
  display:flex; width:fit-content; align-items:center; gap:.5rem;
  font-family:var(--font-body);
  font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--oak-700);
  margin-bottom:.95rem;
}
.section-head.center .eyebrow { margin-inline:auto; }

/* Credential badge (e.g. Level 2 electrical qualification) */
.cred-badge {
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1.5rem;
  background:rgba(252,249,243,.1); border:1px solid rgba(252,249,243,.28); color:var(--cream-50);
  padding:.6rem 1.1rem; border-radius:var(--radius-pill); font-weight:700; font-size:.92rem;
}
.cred-badge svg { width:1.25em; height:1.25em; color:var(--amber-400); flex:none; }
.cred-badge strong { font-weight:800; }

/* Services hero — animated floating tools to fill the space */
.page-hero--art .container { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,1rem + 3vw,4.5rem); align-items:center; }
.svc-hero-art { position:relative; min-height:340px; }
.tool-tile {
  position:absolute; display:grid; place-items:center; border-radius:24px; color:var(--cream-50);
  background:linear-gradient(150deg, rgba(252,249,243,.17), rgba(252,249,243,.05));
  border:1px solid rgba(252,249,243,.22); box-shadow:0 22px 45px -18px rgba(0,0,0,.5);
  will-change:transform;
}
.tool-tile svg { width:46%; height:46%; }
.tool-tile--a { width:138px; height:138px; left:34%; top:4%;  color:var(--amber-400); animation:tool-bob 4.6s ease-in-out infinite; }
.tool-tile--b { width:100px; height:100px; left:3%;  top:40%; animation:tool-bob 5.6s ease-in-out infinite -1.3s; }
.tool-tile--c { width:110px; height:110px; left:55%; top:54%; animation:tool-bob 5.1s ease-in-out infinite -2.6s; }
@keyframes tool-bob { 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-16px) rotate(3deg); } }
@media (max-width:820px){ .page-hero--art .container { grid-template-columns:1fr; } .svc-hero-art { display:none; } }
@media (prefers-reduced-motion:reduce){ .tool-tile { animation:none !important; } }
/* Signature "measured rule" — a little ruler motif under every eyebrow */
.eyebrow::before {
  content:""; width:34px; height:9px; flex:none;
  background:
    repeating-linear-gradient(90deg, var(--amber-500) 0 1.6px, transparent 1.6px 8.5px) center top / 100% 5px no-repeat,
    linear-gradient(var(--amber-500), var(--amber-500)) center bottom / 100% 2px no-repeat;
}
.section--green .eyebrow { color:var(--amber-400); }

.section-head { max-width:60ch; margin-bottom:clamp(2.75rem,1.5rem + 4vw,4.75rem); }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head .lead { margin-top:1rem; font-size:var(--fs-lead); color:var(--ink-700); }
.section--green .section-head .lead { color:var(--cream-200); }

h2.h2 { font-size:var(--fs-h2); }
h3.h3 { font-size:var(--fs-h3); }
.lead { font-size:var(--fs-lead); color:var(--ink-700); line-height:1.6; }

/* ---------- Buttons ---------- */
.btn {
  --_bg:var(--green-700); --_fg:var(--cream-50); --_bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-weight:800; font-size:1rem; letter-spacing:.01em;
  padding:.95rem 1.6rem; border-radius:var(--radius-pill);
  background:var(--_bg); color:var(--_fg); border:2px solid var(--_bd);
  box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), background-color .25s var(--ease),
             box-shadow .25s var(--ease), color .25s var(--ease);
  will-change:transform;
}
.btn:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.btn:active { transform:translateY(-1px); }
.btn svg { width:1.15em; height:1.15em; flex:none; }

.btn--accent { --_bg:var(--amber-500); --_fg:var(--ink-900); }
.btn--accent:hover { --_bg:var(--amber-400); }
.btn--ghost { --_bg:transparent; --_fg:var(--green-800); --_bd:var(--green-700); box-shadow:none; }
.btn--ghost:hover { --_bg:var(--green-700); --_fg:var(--cream-50); }
.btn--light { --_bg:var(--cream-50); --_fg:var(--green-900); }
.btn--light:hover { --_bg:var(--white); }
.btn--block { width:100%; }
.btn--lg { padding:1.1rem 2rem; font-size:1.08rem; }

/* ---------- Header / nav ---------- */
.site-header {
  position:sticky; top:0; z-index:100;
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease),
             border-color .3s var(--ease), transform .45s var(--ease);
  border-bottom:1px solid transparent;
}
/* Hide on scroll-down, reveal on scroll-up (kept visible while menu open) */
.site-header.nav-hidden { transform:translateY(-100%); }
.site-header.scrolled {
  background:color-mix(in srgb, var(--cream-50) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:var(--shadow-sm);
  border-bottom-color:var(--tan-border);
}
.nav { display:flex; align-items:center; justify-content:space-between; height:var(--header-h); }

.brand { display:inline-flex; align-items:center; gap:.7rem; font-family:var(--font-display); font-weight:600; }
.brand__mark { width:42px; height:42px; flex:none; }
.brand__name { font-size:1.22rem; line-height:1; color:var(--green-900); letter-spacing:-.02em; }
.brand__name small { display:block; font-family:var(--font-body); font-weight:700; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--oak-700); margin-top:.25rem; }

.nav__links { display:flex; align-items:center; gap:.35rem; }
.nav__links a {
  position:relative; font-weight:700; font-size:.96rem; padding:.55rem .85rem; border-radius:var(--radius-pill);
  color:var(--ink-700); transition:color .2s var(--ease), background-color .2s var(--ease);
}
.nav__links a:hover { color:var(--green-800); background:var(--cream-200); }
.nav__links a[aria-current="page"] { color:var(--green-800); }
.nav__links a[aria-current="page"]::after {
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.3rem; height:2px;
  background:var(--amber-500); border-radius:2px;
}
.nav__actions { display:flex; align-items:center; gap:.6rem; }

.nav__phone {
  display:inline-flex; align-items:center; gap:.5rem; font-weight:800; color:var(--green-800);
  white-space:nowrap;
}
.nav__phone svg { width:1.1em; height:1.1em; color:var(--amber-600); }

.nav__toggle { display:none; width:46px; height:46px; border-radius:var(--radius-sm); color:var(--green-800); }
.nav__toggle svg { width:26px; height:26px; margin-inline:auto; }

/* Mobile drawer */
@media (max-width:920px) {
  .nav__links, .nav__actions .nav__phone, .nav__actions .btn--ghost { display:none; }
  .nav__toggle { display:block; }

  /* Slimmer header CTA on tablet & mobile — was ugly oversized */
  .site-header .nav__actions .btn--accent {
    padding:.55rem 1rem; font-size:.88rem; gap:.4rem;
    box-shadow:none;
  }
}
/* Header CTA: always one line on desktop/tablet */
.site-header .nav__actions .btn--accent { white-space:nowrap; }
/* Hide the header CTA on phones — it doesn't fit; the menu drawer + bottom Call/WhatsApp bar already cover it */
@media (max-width:600px) {
  .site-header .nav__actions .btn--accent { display:none; }
}
@media (max-width:920px) {

  .mobile-nav {
    position:fixed; inset:0; z-index:150;
    background:var(--green-900); color:var(--cream-50);
    transform:translateY(-100%); transition:transform .4s var(--ease);
    display:flex; flex-direction:column; padding:1.25rem var(--gutter) 2rem;
    visibility:hidden;
  }
  .mobile-nav.open { transform:translateY(0); visibility:visible; }
  .mobile-nav__top { display:flex; align-items:center; justify-content:space-between; height:var(--header-h); }
  .mobile-nav__top .brand__name, .mobile-nav__top .brand__name small { color:var(--cream-50); }
  .mobile-nav__close { width:46px; height:46px; color:var(--cream-50); }
  .mobile-nav__close svg { width:28px; height:28px; margin-inline:auto; }
  .mobile-nav__links { display:flex; flex-direction:column; gap:.25rem; margin-top:1.5rem; }
  .mobile-nav__links a {
    font-family:var(--font-display); font-size:1.5rem; font-weight:600;
    padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.08); color:var(--cream-50);
  }
  .mobile-nav__links a[aria-current="page"] { color:var(--amber-400); }
  .mobile-nav__cta { margin-top:auto; display:grid; gap:.75rem; padding-top:1.5rem; }
}
.mobile-nav { display:none; }
@media (max-width:920px){ .mobile-nav { display:flex; } }

body.nav-open { overflow:hidden; }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; background:var(--cream-100); }
.hero::before {
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 60% at 85% 12%, rgba(210,148,44,.14), transparent 60%),
    radial-gradient(55% 50% at 8% 90%, rgba(38,70,52,.10), transparent 60%);
}
.hero__inner {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,1.5rem + 4vw,5.5rem);
  align-items:center; padding-block:clamp(2.5rem,1.5rem + 4vw,5rem) clamp(4rem,2.5rem + 6vw,7.5rem);
}
.hero__badge {
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--cream-50); border:1px solid var(--tan-border); box-shadow:var(--shadow-sm);
  padding:.45rem .9rem .45rem .55rem; border-radius:var(--radius-pill);
  font-weight:700; font-size:.85rem; color:var(--ink-700); margin-bottom:1.5rem;
}
.hero__badge .stars { color:var(--amber-500); letter-spacing:1px; }
.hero h1 { font-size:var(--fs-hero); margin-bottom:1.25rem; }
.hero h1 .accent { color:var(--green-600); position:relative; white-space:nowrap; }
.hero h1 .accent::after {
  content:""; position:absolute; left:0; right:0; bottom:.04em; height:.16em;
  background:var(--amber-400); opacity:.55; border-radius:3px; z-index:-1;
}
.hero p.lead { max-width:48ch; margin-bottom:2rem; }
.hero__cta { display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:1.75rem; }
.hero__trust { display:flex; flex-wrap:wrap; gap:1.25rem; color:var(--ink-500); font-weight:600; font-size:.92rem; }
.hero__trust li { display:inline-flex; align-items:center; gap:.45rem; }
.hero__trust svg { width:1.15em; height:1.15em; color:var(--green-600); flex:none; }

/* Hero artwork card */
.hero__art { position:relative; }
.hero__art-card {
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid var(--tan-border); background:var(--cream-200);
  aspect-ratio:4/4.4;
}
.hero__art-card svg { width:100%; height:100%; }
.hero__float {
  position:absolute; background:var(--cream-50); border:1px solid var(--tan-border);
  border-radius:var(--radius); box-shadow:var(--shadow-md); padding:.85rem 1.1rem;
  display:flex; align-items:center; gap:.7rem; font-weight:700;
}
.hero__float small { display:block; font-weight:600; color:var(--ink-500); font-size:.75rem; }
.hero__float .ico { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:none; }
.hero__float--a { left:-1.2rem; bottom:2.5rem; }
.hero__float--a .ico { background:var(--green-700); color:var(--cream-50); }
.hero__float--b { right:-1rem; top:2rem; }
.hero__float--b .ico { background:var(--amber-500); color:var(--ink-900); }
.hero__float svg.ico-svg { width:20px; height:20px; }

@media (max-width:880px){
  .hero__inner { grid-template-columns:1fr; }
  .hero__art { order:-1; max-width:460px; margin-inline:auto; width:100%; }
  .hero__float--a { left:0; }
  .hero__float--b { right:0; }
}

/* ---------- Trust / logo bar ---------- */
.trustbar { background:var(--green-900); color:var(--cream-200); }
.trustbar .container { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 2.5rem; padding-block:1.1rem; }
.trustbar__item { display:inline-flex; align-items:center; gap:.6rem; font-weight:700; font-size:.95rem; }
.trustbar__item svg { width:1.3em; height:1.3em; color:var(--amber-400); flex:none; }

/* ---------- Cards / grids ---------- */
.grid { display:grid; gap:clamp(1rem,.6rem + 1.5vw,1.75rem); }
.grid--2 { grid-template-columns:repeat(2,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .grid--3,.grid--4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid--2,.grid--3,.grid--4 { grid-template-columns:1fr; } }

.card {
  background:var(--cream-50); border:1px solid var(--tan-border); border-radius:var(--radius-lg);
  padding:1.75rem; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--oak-300); }

.svc-card { display:flex; flex-direction:column; height:100%; }
.svc-card__icon {
  width:58px; height:58px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(145deg, var(--green-600), var(--green-800)); color:var(--cream-50);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12); margin-bottom:1.1rem;
}
.svc-card__icon svg { width:28px; height:28px; }
.svc-card h3 { font-size:1.3rem; margin-bottom:.5rem; }
.svc-card p { color:var(--ink-700); margin-bottom:1rem; }
.svc-card__link {
  margin-top:auto; display:inline-flex; align-items:center; gap:.4rem;
  font-weight:800; color:var(--green-700);
}
.svc-card__link svg { width:1.05em; height:1.05em; transition:transform .25s var(--ease); }
.svc-card:hover .svc-card__link svg { transform:translateX(4px); }

/* Feature list with check icons */
.checklist { display:grid; gap:.7rem; }
.checklist li { display:flex; gap:.7rem; align-items:flex-start; color:var(--ink-700); }
.checklist svg { width:1.4em; height:1.4em; flex:none; color:var(--amber-600); margin-top:.1em; }
.section--green .checklist li { color:var(--cream-200); }
.section--green .checklist svg { color:var(--amber-400); }

/* ---------- Stats ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:680px){ .stats { grid-template-columns:repeat(2,1fr); } }
.stat { text-align:center; padding:1rem .5rem; }
.stat__num { font-family:var(--font-display); font-weight:600; font-size:clamp(2.2rem,1.5rem + 2.5vw,3.4rem); color:var(--amber-400); line-height:1; }
.stat__label { margin-top:.5rem; font-weight:600; color:var(--cream-200); font-size:.95rem; }

/* ---------- Split / media + text ---------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,1.25rem + 4vw,5rem); align-items:center; }
.split__body :is(h2,.h2,h3,.h3) { margin-bottom:1rem; }
.split__media { display:block; }
.split__media > * { width:100%; }
.split__media .media-frame--photo { aspect-ratio:4/3; }  /* photos stay neat & square-ish — like the gallery */
.split__media .media-frame.coverage-map { align-self:center; }                  /* map illustration keeps its shape */
.split--reverse .split__media { order:2; }
@media (max-width:860px){ .split { grid-template-columns:1fr; } .split--reverse .split__media { order:-1; } }
.media-frame {
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--tan-border);
  box-shadow:var(--shadow-md); background:var(--cream-200); position:relative;
}
.media-frame img { width:100%; height:100%; object-fit:cover; }

/* Stylised image placeholder (until real photos added) */
.photo-ph {
  aspect-ratio:4/3; display:grid; place-items:center; position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, var(--green-700), var(--green-900));
  color:var(--cream-200); text-align:center; padding:1.5rem;
}
.photo-ph svg { width:46px; height:46px; opacity:.8; margin-bottom:.6rem; }
.photo-ph span { font-weight:700; font-size:.85rem; letter-spacing:.04em; opacity:.85; }
.photo-ph small { display:block; font-weight:600; opacity:.6; font-size:.75rem; margin-top:.25rem; }

/* ---------- Process steps ---------- */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; counter-reset:step; }
@media (max-width:900px){ .steps { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .steps { grid-template-columns:1fr; } }
.step { position:relative; padding:1.75rem 1.5rem; background:var(--cream-50); border:1px solid var(--tan-border); border-radius:var(--radius-lg); }
.step__n {
  counter-increment:step; font-family:var(--font-display); font-weight:600; font-size:1.4rem;
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center; margin-bottom:1rem;
  background:var(--cream-200); color:var(--green-700); border:2px solid var(--amber-400);
}
.step__n::before { content:"0" counter(step); }
.step h3 { font-size:1.15rem; margin-bottom:.4rem; }
.step p { color:var(--ink-700); font-size:.96rem; }

/* ---------- Testimonials ---------- */
.quote-card { background:var(--cream-50); border:1px solid var(--tan-border); border-radius:var(--radius-lg); padding:1.9rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; height:100%; color:var(--ink-900); }
.quote-card__who strong { color:var(--ink-900); }
.section--green .quote-card__who span { color:var(--ink-500); }
.quote-card .stars { color:var(--amber-500); letter-spacing:2px; margin-bottom:.9rem; font-size:1.05rem; }
.quote-card blockquote { font-size:1.08rem; color:var(--ink-900); line-height:1.6; margin-bottom:1.25rem; }
.quote-card blockquote::before { content:"\201C"; font-family:var(--font-display); color:var(--oak-300); font-size:2.4rem; line-height:0; vertical-align:-.35em; margin-right:.1em; }
.quote-card__who { margin-top:auto; display:flex; align-items:center; gap:.8rem; }
.avatar { width:46px; height:46px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:800; color:var(--cream-50); font-family:var(--font-display); }
.quote-card__who strong { display:block; }
.quote-card__who span { color:var(--ink-500); font-size:.9rem; }

/* ---------- Service-area list ---------- */
.areas { columns:3 160px; gap:1.5rem; }
.areas li { break-inside:avoid; padding:.4rem 0; display:flex; align-items:center; gap:.55rem; color:var(--cream-200); font-weight:600; }
.areas svg { width:1.1em; height:1.1em; color:var(--amber-400); flex:none; }

/* ---------- FAQ accordion ---------- */
.faq { display:grid; gap:.85rem; max-width:820px; margin-inline:auto; }
.faq__item { border:1px solid var(--tan-border); border-radius:var(--radius); background:var(--cream-50); overflow:hidden; }
.faq__q {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.35rem; font-weight:800; font-size:1.05rem; color:var(--green-900);
}
.faq__q .chev { width:1.3em; height:1.3em; flex:none; color:var(--oak-700); transition:transform .3s var(--ease); }
.faq__item.open .faq__q .chev { transform:rotate(180deg); }
.faq__a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); }
.faq__item.open .faq__a { grid-template-rows:1fr; }
.faq__a > div { overflow:hidden; }
.faq__a p { padding:0 1.35rem 1.3rem; color:var(--ink-700); }

/* ---------- CTA band ---------- */
.cta-band { position:relative; overflow:hidden; }
/* Green CTA bands flow into the dark footer (bottom matches footer green-900) */
.section--green.cta-band { background:linear-gradient(180deg, var(--green-700) 0%, var(--green-800) 48%, var(--green-900) 100%); }
.cta-band .container { position:relative; z-index:1; text-align:center; }
.cta-band h2 { font-size:var(--fs-h1); margin-bottom:1rem; }
.cta-band p { font-size:var(--fs-lead); color:var(--cream-200); max-width:54ch; margin:0 auto 2rem; }
.cta-band__btns { display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; }
.cta-band::after {
  content:""; position:absolute; right:-60px; top:-60px; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(210,148,44,.25), transparent 70%);
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero { position:relative; overflow:hidden; padding-top:clamp(2.5rem,1.5rem + 3vw,4rem); }
.page-hero .breadcrumb { display:flex; gap:.5rem; align-items:center; font-size:.85rem; color:var(--cream-200); font-weight:600; margin-bottom:1.25rem; flex-wrap:wrap; }
.page-hero .breadcrumb a { color:var(--amber-400); }
.page-hero .breadcrumb span { opacity:.5; }
.page-hero h1 { font-size:var(--fs-h1); max-width:18ch; }
.page-hero p { margin-top:1rem; font-size:var(--fs-lead); color:var(--cream-200); max-width:58ch; }
.page-hero__actions { margin-top:1.75rem; display:flex; flex-wrap:wrap; gap:.85rem; }

/* ---------- Pricing / info tiles ---------- */
.info-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
@media (max-width:820px){ .info-tiles { grid-template-columns:1fr; } }
.info-tile { padding:1.6rem; border-radius:var(--radius-lg); border:1px solid var(--tan-border); background:var(--cream-50); }
.info-tile .k { font-family:var(--font-display); font-size:1.6rem; color:var(--green-700); font-weight:600; }
.info-tile .l { font-weight:700; margin:.35rem 0; }
.info-tile p { color:var(--ink-700); font-size:.95rem; }

/* ---------- Contact / form ---------- */
.contact-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(1.5rem,1rem + 3vw,3.5rem); align-items:start; }
@media (max-width:900px){ .contact-grid { grid-template-columns:1fr; } }

.contact-method { display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 0; border-bottom:1px solid var(--tan-border); }
.contact-method:last-child { border-bottom:none; }
.contact-method .ico { width:50px; height:50px; border-radius:14px; flex:none; display:grid; place-items:center; background:var(--green-700); color:var(--cream-50); }
.contact-method .ico svg { width:24px; height:24px; }
.contact-method h3 { font-size:1.1rem; margin-bottom:.15rem; }
.contact-method a { font-weight:800; color:var(--green-700); }
.contact-method p { color:var(--ink-500); font-size:.9rem; }

.form-card { background:var(--cream-50); border:1px solid var(--tan-border); border-radius:var(--radius-lg); padding:clamp(1.5rem,1rem + 2vw,2.5rem); box-shadow:var(--shadow-md); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:520px){ .form-row { grid-template-columns:1fr; } }
.field { margin-bottom:1.1rem; }
.field label { display:block; font-weight:700; font-size:.92rem; margin-bottom:.4rem; color:var(--ink-900); }
.field label .req { color:var(--amber-700); }
.field input, .field textarea, .field select {
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--tan-border); border-radius:var(--radius-sm);
  background:var(--white); transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize:vertical; min-height:130px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline:none; border-color:var(--green-600); box-shadow:0 0 0 3px rgba(38,70,52,.14);
}
.field input:user-invalid, .field textarea:user-invalid { border-color:#B4471F; }
.field .hint { font-size:.82rem; color:var(--ink-500); margin-top:.35rem; }

/* WhatsApp photo tip (replaces the old file-upload field on the free Formspree plan) */
.photo-tip { display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 1.2rem; border:1px solid var(--tan-border); border-radius:var(--radius); background:var(--cream-100); }
.photo-tip__icon { width:48px; height:48px; border-radius:12px; flex:none; display:grid; place-items:center; background:#117A3D; color:#fff; }
.photo-tip__icon svg { width:26px; height:26px; }
.photo-tip__body strong { display:block; color:var(--ink-900); margin-bottom:.2rem; }
.photo-tip__body p { color:var(--ink-700); font-size:.95rem; margin-bottom:.85rem; }
.photo-tip__body .btn { padding:.7rem 1.15rem; font-size:.95rem; }

/* File upload (legacy — no longer used, kept for fallback) */
.filedrop { border:1.5px dashed var(--oak-300); border-radius:var(--radius-sm); padding:1.3rem; text-align:center; background:var(--cream-100); transition:border-color .2s var(--ease), background-color .2s var(--ease); cursor:pointer; }
.filedrop:hover, .filedrop.drag { border-color:var(--green-600); background:var(--cream-200); }
.filedrop svg { width:30px; height:30px; color:var(--oak-700); margin:0 auto .5rem; }
.filedrop strong { color:var(--green-700); }
.filedrop input[type=file] { position:absolute; width:1px; height:1px; opacity:0; }
.filelist { margin-top:.6rem; display:grid; gap:.35rem; }
.filelist li { font-size:.85rem; color:var(--ink-700); display:flex; align-items:center; gap:.4rem; }

/* segmented radio (contact preference) */
.segmented { display:flex; gap:.5rem; flex-wrap:wrap; }
.segmented label {
  flex:1; min-width:90px; text-align:center; padding:.65rem .5rem; border:1.5px solid var(--tan-border);
  border-radius:var(--radius-sm); font-weight:700; font-size:.9rem; cursor:pointer; transition:all .2s var(--ease);
}
.segmented input { position:absolute; opacity:0; }
.segmented input:checked + span { color:var(--green-800); }
.segmented label:has(input:checked) { border-color:var(--green-600); background:var(--cream-200); }

.form-success {
  display:none; text-align:center; padding:1rem;
}
.form-success.show { display:block; }
.form-success .ico { width:64px; height:64px; border-radius:50%; background:var(--green-700); color:var(--cream-50); display:grid; place-items:center; margin:0 auto 1rem; }
.form-success .ico svg { width:34px; height:34px; }

/* ---------- Footer ---------- */
.site-footer { background:var(--green-900); color:var(--cream-200); padding-block:clamp(3rem,2rem + 3vw,4.5rem) clamp(2.5rem,1.5rem + 2vw,3.5rem); }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; }
@media (max-width:900px){ .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; } }
@media (max-width:520px){ .footer-grid { grid-template-columns:1fr; } }
.site-footer .brand__name, .site-footer .brand__name small { color:var(--cream-50); }
.footer-about p { margin:1rem 0; max-width:34ch; color:var(--cream-300); }
.footer-col h4 { font-family:var(--font-body); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-400); margin-bottom:1rem; }
.footer-col ul { display:grid; gap:.6rem; }
.footer-col a { color:var(--cream-200); transition:color .2s var(--ease); }
.footer-col a:hover { color:var(--amber-400); }
.footer-contact li { display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.7rem; color:var(--cream-200); }
.footer-contact svg { width:1.2em; height:1.2em; color:var(--amber-400); flex:none; margin-top:.2em; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:2.5rem; padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.85rem; color:var(--cream-300); }
.social { display:flex; gap:.6rem; }
.social a { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.07); transition:background-color .2s var(--ease); }
.social a:hover { background:var(--amber-500); color:var(--ink-900); }
.social svg { width:20px; height:20px; }

/* ---------- Floating mobile call bar ---------- */
.callbar { position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; gap:.6rem; padding:.65rem; background:color-mix(in srgb,var(--green-900) 96%, transparent); backdrop-filter:blur(8px); border-top:1px solid rgba(255,255,255,.1); }
.callbar .btn { flex:1; padding:.8rem; font-size:.95rem; }
@media (max-width:920px){ .callbar { display:flex; } body { padding-bottom:74px; } }
.btn--whatsapp { --_bg:#117A3D; --_fg:#fff; }  /* darkened for WCAG AA white-on-green (~5.4:1) */
.btn--whatsapp:hover { --_bg:#15924A; }

/* ---------- Reveal animations (crafted rise + settle, not generic fade-up) ---------- */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal-stagger > * { opacity:0; transform:translateY(13px); transition:opacity .7s var(--ease), transform .8s var(--ease); }
.reveal-stagger.in > * { opacity:1; transform:none; }

/* Photos settle into frame as the block arrives (slow ken-burns-on-entry) */
.split__media.reveal img, .hero__art.reveal img {
  transition:transform 1.4s var(--ease);
}
.split__media.reveal:not(.in) img, .hero__art.reveal:not(.in) img { transform:scale(1.08); }

/* Hero copy rises line-by-line for a more deliberate entrance */
.hero__copy.reveal-stagger > *:nth-child(1){ transition-delay:.02s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.08s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.16s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.24s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.32s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.40s; }

.hero__art-card { transition:transform .2s ease-out; }

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal, .reveal-stagger > * { opacity:1 !important; transform:none !important; }
}

/* Utility */
.text-center { text-align:center; }
.mt-1 { margin-top:1rem; } .mt-2 { margin-top:2rem; } .mb-0 { margin-bottom:0; }
.maxw-prose { max-width:65ch; }
.flow > * + * { margin-top:1.1rem; }

/* ---------- Anti-scrape phone (number injected by JS, not selectable) ---------- */
.no-select { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; }
[data-call] { cursor:pointer; }
.js-phone:empty::before { content:"…"; opacity:.5; } /* tiny placeholder before JS fills it */

/* ---------- Real photos ---------- */
.hero__art-card img { width:100%; height:100%; object-fit:cover; display:block; }
.media-frame--photo { background:var(--cream-200); }

/* ---------- Job gallery ---------- */
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.75rem,.5rem + 1vw,1.25rem); }
@media (max-width:760px){ .gallery { grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .gallery { grid-template-columns:1fr; } }
.gallery figure {
  position:relative; margin:0; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--tan-border); box-shadow:var(--shadow-sm); background:var(--cream-200);
}
.gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .55s var(--ease); }
.gallery figure:hover img { transform:scale(1.05); }
.gallery figcaption {
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem .9rem .7rem;
  font-size:.84rem; font-weight:700; color:#fff;
  background:linear-gradient(transparent, rgba(21,37,28,.88));
}

/* Coverage map illustration */
.coverage-map { background:#0F201A; }
.coverage-map svg { display:block; width:100%; height:auto; }

/* ---------- Services dropdown (header) ---------- */
.nav__item { position:relative; display:inline-flex; }
.nav__trigger {
  display:inline-flex; align-items:center; gap:.25rem;
  font-weight:700; font-size:.96rem; padding:.55rem .85rem; border-radius:var(--radius-pill);
  color:var(--ink-700); cursor:pointer; transition:color .2s var(--ease), background-color .2s var(--ease);
}
.nav__trigger:hover { color:var(--green-800); background:var(--cream-200); }
.nav__trigger[aria-current="page"] { color:var(--green-800); }
.nav__caret { width:.85em; height:.85em; transition:transform .25s var(--ease); }
.nav__menu {
  position:absolute; top:calc(100% + 2px); left:0; min-width:248px;
  background:var(--cream-50); border:1px solid var(--tan-border); border-radius:var(--radius);
  box-shadow:var(--shadow-md); padding:.5rem; display:grid; gap:.1rem; z-index:120;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s var(--ease);
}
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu, .nav__menu.open {
  opacity:1; visibility:visible; transform:translateY(0);
}
.nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret, .nav__trigger[aria-expanded="true"] .nav__caret { transform:rotate(180deg); }
.nav__menu a { display:flex; align-items:center; gap:.6rem; padding:.6rem .75rem; border-radius:var(--radius-sm); font-weight:700; font-size:.95rem; color:var(--ink-700); white-space:nowrap; }
.nav__menu a:hover { background:var(--cream-200); color:var(--green-800); }
.nav__menu a svg { width:1.1em; height:1.1em; color:var(--oak-700); flex:none; }
.nav__menu hr { border:none; border-top:1px solid var(--tan-border); margin:.35rem .2rem; }

/* ---------- Before / After ---------- */
.ba-list { display:grid; gap:clamp(1.25rem,1rem + 2vw,2rem); }
.ba-pair { background:var(--cream-50); border:1px solid var(--tan-border); border-radius:var(--radius-lg); padding:clamp(.9rem,.6rem + 1vw,1.4rem); box-shadow:var(--shadow-sm); }
.ba-pair__imgs { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; align-items:start; }
.ba-fig { position:relative; margin:0; border-radius:var(--radius); overflow:hidden; background:var(--cream-200); aspect-ratio:4/3; }
.ba-fig img { width:100%; height:100%; object-fit:cover; display:block; }
.ba-tag { position:absolute; top:.6rem; left:.6rem; font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:.28rem .6rem; border-radius:var(--radius-pill); }
.ba-tag--before { background:rgba(31,26,18,.8); color:var(--cream-100); }
.ba-tag--after { background:var(--amber-500); color:var(--ink-900); }
.ba-pair__label { display:flex; align-items:center; gap:.5rem; margin-top:.9rem; font-family:var(--font-display); font-weight:600; color:var(--green-900); font-size:1.2rem; }
.ba-pair__label svg { width:1.05em; height:1.05em; color:var(--amber-600); flex:none; }
@media (max-width:560px){ .ba-fig { aspect-ratio:1/1; } }

/* ---------- Work masonry ---------- */
.work-grid { columns:3 290px; column-gap:clamp(.75rem,.5rem + 1vw,1.25rem); }
.work-grid figure { break-inside:avoid; margin:0 0 clamp(.75rem,.5rem + 1vw,1.25rem); position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--tan-border); box-shadow:var(--shadow-sm); background:var(--cream-200); }
.work-grid img { width:100%; height:auto; display:block; transition:transform .6s var(--ease); }
.work-grid figure:hover img { transform:scale(1.04); }
.work-grid figcaption { position:absolute; left:0; right:0; bottom:0; padding:1.6rem .9rem .75rem; color:#fff; font-weight:700; font-size:.9rem; background:linear-gradient(transparent, rgba(21,37,28,.9)); }

/* ---------- Image carousel ---------- */
.carousel { position:relative; max-width:820px; margin-inline:auto; }
.carousel-viewport { overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--tan-border); box-shadow:var(--shadow-md); background:var(--cream-200); }
.carousel-track { display:flex; transition:transform .6s var(--ease); }
.carousel-track figure { flex:0 0 100%; margin:0; aspect-ratio:4/3; position:relative; background:var(--cream-200); }
.carousel-track img { width:100%; height:100%; object-fit:cover; display:block; }
.carousel-track figcaption { position:absolute; left:0; right:0; bottom:0; padding:1.6rem 1.1rem .9rem; color:#fff; font-weight:700; font-size:1rem; background:linear-gradient(transparent, rgba(21,37,28,.92)); }
.carousel-btn { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; background:rgba(252,249,243,.93); color:var(--green-900); display:grid; place-items:center; border:none; cursor:pointer; box-shadow:var(--shadow-md); transition:background-color .2s var(--ease), transform .2s var(--ease); z-index:5; }
.carousel-btn:hover { background:var(--cream-50); }
.carousel-btn:hover { transform:translateY(-50%) scale(1.06); }
.carousel-btn svg { width:24px; height:24px; }
.carousel-btn--prev { left:.9rem; }
.carousel-btn--next { right:.9rem; }
.carousel-dots { display:flex; gap:.55rem; justify-content:center; margin-top:1.1rem; }
.carousel-dot { width:11px; height:11px; border-radius:50%; background:var(--cream-300); border:none; padding:0; cursor:pointer; transition:background-color .2s var(--ease), transform .2s var(--ease); }
.carousel-dot.is-active { background:var(--amber-500); transform:scale(1.25); }
.carousel-dot:hover { background:var(--oak-300); }
.section--green .carousel-dot { background:rgba(252,249,243,.35); }
.section--green .carousel-dot.is-active { background:var(--amber-400); }

/* ---------- Signature paper grain (subtle, cheap: tiled background, no blend-mode / no fixed layer) ---------- */
body {
  background-image:
    linear-gradient(rgba(247,241,230,0.92), rgba(247,241,230,0.92)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='gn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gn)'/%3E%3C/svg%3E");
  background-size:auto, 180px 180px;
}
.section--cream {
  background-image:
    linear-gradient(rgba(252,249,243,0.92), rgba(252,249,243,0.92)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='gn2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gn2)'/%3E%3C/svg%3E");
  background-size:auto, 180px 180px;
}