/* ==========================================================================
   StoneView Construction & Landscape — design system, v3
   Ground: cool bone.  Primary: forest.  Accent: bluestone (the paver colour
   StoneView actually lays).  CTAs: graphite, for contrast on both the pale
   ground and the photography.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --forest:   #1F3A2E;
  --forest-d: #14251C;
  --moss:     #4F6F52;
  --charcoal: #242822;

  /* Accent is bluestone — the colour of the pavers StoneView actually lays.
     Replaces the terracotta the earlier versions used. */
  --stone:    #4E6771;
  --stone-l:  #7B939C;
  --stone-d:  #3B505A;

  /* CTAs are graphite, not a warm accent: maximum contrast on both the
     pale ground and the photography, and it reads architectural. */
  --clay:     #20241E;
  --clay-d:   #1F3A2E;

  --sand:     #C9B79C;
  --sand-l:   #E4DACB;
  --bone:     #F2F4F1;
  --bone-d:   #E5EAE4;
  --white:    #FFFFFF;
  --ink:      #1D211C;
  --muted:    #5F675E;
  --line:     #D5DCD4;

  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1240px;
  --gut: 32px;

  --r-sm: 4px;
  --r:    8px;
  --r-lg: 16px;

  --sh-1: 0 1px 2px rgba(35,35,31,.06), 0 4px 12px rgba(35,35,31,.05);
  --sh-2: 0 2px 6px rgba(35,35,31,.07), 0 12px 32px rgba(35,35,31,.09);
  --sh-3: 0 8px 24px rgba(35,35,31,.10), 0 30px 60px rgba(35,35,31,.14);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 108px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.018em; line-height: 1.1; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--stone); outline-offset: 3px; border-radius: 2px; }

/* --- Layout ------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap-n { max-width: 900px; }
.sec { padding: 104px 0; }
.sec-sm { padding: 72px 0; }
.sec-dark { background: var(--forest); color: var(--bone); }
.sec-dark h1, .sec-dark h2, .sec-dark h3 { color: var(--white); }
.sec-tint { background: var(--bone-d); }
.sec-white { background: var(--white); }

/* --- Type --------------------------------------------------------------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--stone-l); flex: none; }
.sec-dark .eyebrow { color: var(--sand); }
.sec-dark .eyebrow::before { background: var(--moss); }

h1, .h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2, .h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3, .h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.6; color: var(--muted); max-width: 62ch; }
.sec-dark .lead { color: #CFD8CF; }
.sec-head { max-width: 720px; margin-bottom: 56px; }
.sec-head .lead { margin-top: 20px; }
.center { text-align: center; }
.center .sec-head { margin-inline: auto; }
.center .eyebrow { justify-content: center; }
.center .lead { margin-inline: auto; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px;
  font-family: var(--sans); font-size: 15px; font-weight: 650; letter-spacing: .01em;
  border-radius: 100px;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--clay); color: var(--white); box-shadow: var(--sh-1); }
.btn-primary:hover { background: var(--clay-d); box-shadow: var(--sh-2); }
.btn-forest { background: var(--forest); color: var(--white); }
.btn-forest:hover { background: var(--forest-d); box-shadow: var(--sh-2); }
.btn-ghost { border: 1.5px solid rgba(255,255,255,.45); color: var(--white); backdrop-filter: blur(6px); background: rgba(255,255,255,.06); }
.btn-ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.8); }
.btn-outline { border: 1.5px solid var(--line); color: var(--ink); background: var(--white); }
.btn-outline:hover { border-color: var(--forest); color: var(--forest); box-shadow: var(--sh-1); }
.btn-lg { padding: 18px 34px; font-size: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 650; color: var(--forest);
  border-bottom: 1.5px solid var(--stone-l); padding-bottom: 3px;
  transition: gap .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.link-arrow::after { content: '→'; transition: transform .25s var(--ease); }
.link-arrow:hover { gap: 12px; border-color: var(--stone); color: var(--stone); }
.sec-dark .link-arrow { color: var(--sand); border-color: var(--moss); }
.sec-dark .link-arrow:hover { color: var(--white); border-color: var(--sand); }

/* --- Concept ribbon ----------------------------------------------------- */
.concept {
  background: var(--charcoal); color: #C8C6BC;
  font-size: 12px; letter-spacing: .04em;
  text-align: center; padding: 8px 16px;
  position: relative; z-index: 90;
}
.concept b { color: var(--sand); font-weight: 650; }

/* --- Top bar ------------------------------------------------------------ */
.topbar {
  background: var(--forest-d); color: #B9C6B9;
  font-size: 13.5px; letter-spacing: .01em;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 42px; }
.topbar a { display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.topbar a:hover { color: var(--white); }
.topbar-l { display: flex; gap: 26px; flex-wrap: wrap; }
.topbar-r { display: flex; gap: 18px; align-items: center; }
.topbar .pill { background: rgba(201,183,156,.16); color: var(--sand-l); padding: 3px 11px; border-radius: 100px; font-size: 12px; font-weight: 600; }

/* --- Header ------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 80;
  background: rgba(242,244,241,.93);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease);
}
.site-head.scrolled { box-shadow: var(--sh-1); }
.site-head .wrap { display: flex; align-items: center; gap: 28px; min-height: 82px; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 50px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav > li { position: relative; }
.nav > li > a {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 15px; border-radius: var(--r);
  font-size: 15px; font-weight: 570; color: var(--charcoal);
  transition: color .2s, background .2s;
}
.nav > li > a:hover, .nav > li.open > a, .nav > li > a[aria-current] { color: var(--forest); background: rgba(31,58,46,.06); }
.nav .caret { width: 9px; height: 9px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translate(-2px,-2px); opacity: .5; transition: transform .25s var(--ease); }
.nav > li.open .caret { transform: rotate(-135deg) translate(-3px,-3px); }

.mega {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 8px);
  width: 640px; max-width: 92vw;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav > li.open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.mega a { display: flex; gap: 13px; padding: 13px; border-radius: var(--r); transition: background .2s; }
.mega a:hover { background: var(--bone); }
.mega .ic { width: 40px; height: 40px; border-radius: var(--r-sm); flex: none; background: var(--bone-d) center/cover; }
.mega strong { display: block; font-size: 14.5px; font-weight: 650; color: var(--forest); }
.mega span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; }

.head-cta { display: flex; align-items: center; gap: 16px; flex: none; }
.head-tel { display: flex; flex-direction: column; line-height: 1.25; }
.head-tel small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.head-tel strong { font-size: 17px; font-weight: 700; color: var(--forest); font-variant-numeric: tabular-nums; }

.burger { display: none; width: 46px; height: 46px; border-radius: var(--r); align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 1px solid var(--line); background: var(--white); }
.burger i { display: block; width: 19px; height: 2px; background: var(--charcoal); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.burger.on i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.on i:nth-child(2) { opacity: 0; }
.burger.on i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Hero --------------------------------------------------------------- */
.hero { --slide-dur: 5.5s; position: relative; min-height: min(88vh, 800px); display: flex; align-items: flex-end; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(16,26,20,.92) 0%, rgba(16,26,20,.58) 34%, rgba(16,26,20,.12) 66%, rgba(16,26,20,.34) 100%),
    linear-gradient(to right, rgba(16,26,20,.62) 0%, rgba(16,26,20,.14) 52%, transparent 78%);
}
.hero .wrap { position: relative; z-index: 2; padding-block: 68px 44px; }
.hero-in { max-width: 720px; color: var(--white); }
/* .h1 carries the same treatment for the slides that aren't the page's
   single real <h1> — visually identical, structurally correct. */
.hero h1, .hero .h1 {
  color: var(--white); text-wrap: balance; text-shadow: 0 2px 40px rgba(0,0,0,.35);
  font-family: var(--serif); font-weight: 400; letter-spacing: -.018em; line-height: 1.1; margin: 0;
}
.hero .lead { color: rgba(255,255,255,.9); margin-top: 22px; font-size: clamp(1.05rem,1.6vw,1.28rem); max-width: 56ch; }
.hero .btn-row { margin-top: 36px; }
.hero-eyebrow { color: var(--sand); }
.hero-eyebrow::before { background: var(--sand); }

.hero-trust {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
  margin-top: 44px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.9); font-size: 14px;
}
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hero-trust .stars { color: #F0B429; letter-spacing: 1px; }
.hero-trust b { font-weight: 700; color: var(--white); }
.hero-trust .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.35); }

/* --- Hero quick-quote form ---------------------------------------------
   Frosted panel sitting on the hero photograph. Deliberately short:
   three fields is the conversion sweet spot for contractor enquiries.
   ------------------------------------------------------------------------ */
.hero-grid { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: end; }
.phero .hero-grid { align-items: center; }

.quick {
  /* Dark tint rather than a white one: the panel sits on photography that
     ranges from deep shade to bright foliage, and white type has to hold
     contrast over all of it. Blur keeps the photo readable through it. */
  background: rgba(14,24,18,.56);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-lg);
  padding: 26px 24px 24px;
  box-shadow: 0 20px 60px rgba(8,14,10,.5);
  color: var(--white);
}
.quick-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.quick h2, .quick h3 { font-size: 1.5rem; color: var(--white); }
.quick .pip {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--forest); background: var(--sand); padding: 4px 9px; border-radius: 100px; white-space: nowrap;
}
.quick form > p:not(.fine) { font-size: 13.5px; color: rgba(255,255,255,.82); margin: 0 0 20px; line-height: 1.5; }

/* .field selectors below are qualified with .quick on purpose: the generic
   .field rules appear later in this sheet and would otherwise win on
   equal specificity and paint these inputs light. */
.quick .field { margin-bottom: 12px; }
.quick .field label {
  display: block; font-size: 11.5px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: 6px;
}
.quick .field input, .quick .field select {
  width: 100%; padding: 13px 14px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r);
  color: var(--white); font-size: 15.5px;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.quick .field input::placeholder { color: rgba(255,255,255,.5); }
.quick .field select option { background: var(--forest-d); color: var(--white); }
.quick .field input:focus, .quick .field select:focus {
  outline: 0; background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.7);
  box-shadow: 0 0 0 4px rgba(255,255,255,.13);
}
/* The site-wide CTA is graphite, which vanishes on the dark glass panel.
   Inside .quick it inverts to white so it stays the loudest thing here. */
.quick .btn { width: 100%; margin-top: 6px; }
.quick .btn-primary { background: var(--white); color: var(--ink); box-shadow: 0 4px 18px rgba(8,14,10,.3); }
.quick .btn-primary:hover { background: var(--sand-l); color: var(--ink); }
.quick .alt {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: 13px; color: rgba(255,255,255,.72);
}
.quick .alt a { color: var(--white); font-weight: 650; border-bottom: 1px solid rgba(255,255,255,.4); }
.quick .alt a:hover { border-color: var(--white); }
.quick .fine { margin-top: 12px; font-size: 11.5px; color: rgba(255,255,255,.55); line-height: 1.45; }

/* sent state */
.quick .sent { display: none; text-align: center; padding: 26px 6px 18px; }
.quick.done form { display: none; }
.quick.done .sent { display: block; }
.quick .sent .tick {
  width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--sand); color: var(--forest);
  display: grid; place-items: center; font-size: 26px; font-weight: 700;
}
.quick .sent h3 { margin-bottom: 8px; }
.quick .sent p { font-size: 14px; color: rgba(255,255,255,.8); }

/* --- Hero slider --------------------------------------------------------
   Cross-fading service slides. The Google badge, the quote form and the
   trust strip deliberately stay put — only the photograph and the headline
   change, so nothing a visitor is reading or typing into moves.
   ------------------------------------------------------------------------ */
.hero-bg .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.hero-bg .slide.is-on { opacity: 1; }
.hero-bg .slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); }
.hero-bg .slide.is-on img { transform: scale(1); transition: transform 9s linear; }

/* Grid stacking: every copy block shares one cell, so the container is as
   tall as the longest and the layout never jumps between slides. */
.hero-copy { display: grid; }
.hero-copy .copy {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), visibility .55s;
}
.hero-copy .copy.is-on { opacity: 1; visibility: visible; transform: none; }

.hero-tabs {
  display: flex; gap: 8px; margin-top: 34px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 2px;
}
.hero-tabs::-webkit-scrollbar { display: none; }
.hero-tabs button {
  position: relative; overflow: hidden; flex: none;
  padding: 10px 17px 11px;
  border-radius: 100px; border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,.82); font-size: 13.5px; font-weight: 620; white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.hero-tabs button:hover { background: rgba(255,255,255,.18); color: var(--white); }
.hero-tabs button.is-on { background: var(--white); color: var(--ink); border-color: var(--white); }
.hero-tabs .bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--stone); transform: scaleX(0); transform-origin: left;
}
.hero-tabs button.is-on .bar { animation: tabfill var(--slide-dur, 5.5s) linear forwards; }
/* .is-held is set by site.js — pausing on plain .hero:hover was wrong,
   the hero fills the viewport so the cursor is nearly always over it. */
.hero.is-held .hero-tabs button.is-on .bar { animation-play-state: paused; }
@keyframes tabfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- Google review badge ------------------------------------------------
   Sits on the hero photograph. Kept on a white ground because the Google
   mark is only legible in its real colours against white.
   ------------------------------------------------------------------------ */
.gbadge {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--white); border-radius: 100px;
  padding: 9px 18px 9px 13px; margin-bottom: 24px;
  box-shadow: 0 6px 22px rgba(8,14,10,.28);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gbadge:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(8,14,10,.34); }
.gbadge .g { width: 20px; height: 20px; flex: none; }
.gbadge .score { font-size: 17px; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; }
.gbadge .stars { color: #F0B429; font-size: 14px; letter-spacing: 1px; }
.gbadge .n { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.gbadge .n b { color: var(--ink); font-weight: 650; }

/* --- Trust marks strip -------------------------------------------------- */
.marks { display: flex; flex-wrap: wrap; gap: 10px; }
.mark {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 100px; padding: 7px 14px 7px 11px;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.94); white-space: nowrap;
}
.mark svg { width: 15px; height: 15px; flex: none; }
.mark svg.tick { fill: none; stroke: var(--sand); stroke-width: 2.4; }

/* --- Review source mark on a testimonial -------------------------------- */
.quote .src { display: flex; align-items: center; gap: 7px; margin-bottom: 16px; }
.quote .src svg { width: 16px; height: 16px; flex: none; }
.quote .src span { font-size: 12px; font-weight: 620; color: var(--muted); letter-spacing: .02em; }
.quote .src .ver { color: var(--moss); }

/* --- Payment marks ------------------------------------------------------ */
.pay { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.pay span {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); border-radius: 4px;
  height: 26px; min-width: 40px; padding: 0 7px; border: 0;
}
.pay svg { height: 15px; width: auto; display: block; }

/* --- Trust bar ---------------------------------------------------------- */
.trustbar { background: var(--white); border-bottom: 1px solid var(--line); }
.trustbar ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.trustbar li { padding: 30px 22px; text-align: center; border-right: 1px solid var(--line); }
.trustbar li:last-child { border-right: 0; }
.trustbar strong { display: block; font-family: var(--serif); font-size: 1.55rem; color: var(--forest); line-height: 1.1; }
.trustbar span { display: block; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 620; margin-top: 8px; }

/* --- Service cards ------------------------------------------------------ */
.grid { display: grid; gap: 26px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

.svc {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.svc:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: transparent; }
.svc-img { aspect-ratio: 4/3; overflow: hidden; background: var(--bone-d); }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.svc:hover .svc-img img { transform: scale(1.06); }
.svc-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.svc h3 { font-size: 1.32rem; color: var(--forest); }
.svc p { margin: 12px 0 20px; font-size: 15px; color: var(--muted); line-height: 1.6; }
.svc .link-arrow { margin-top: auto; align-self: flex-start; }
.svc-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(31,58,46,.9); color: var(--sand-l); backdrop-filter: blur(4px);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px;
}

/* --- Split panels ------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.panel { position: relative; min-height: 480px; border-radius: var(--r-lg); overflow: hidden; display: flex; align-items: flex-end; }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.panel:hover img { transform: scale(1.05); }
.panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,26,20,.95) 24%, rgba(16,26,20,.66) 52%, rgba(16,26,20,.2) 80%, rgba(16,26,20,0) 100%); }
.panel-in h3, .panel-in p { text-shadow: 0 1px 18px rgba(10,18,13,.75); }
.panel-in { position: relative; z-index: 2; padding: 38px; color: var(--white); }
.panel-in h3 { color: var(--white); font-size: clamp(1.6rem,2.4vw,2.1rem); }
.panel-in p { color: rgba(255,255,255,.86); font-size: 15.5px; margin: 12px 0 20px; max-width: 44ch; }
.panel-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.panel-list li { font-size: 12.5px; font-weight: 600; letter-spacing: .03em; color: var(--sand-l); border: 1px solid rgba(255,255,255,.3); padding: 5px 12px; border-radius: 100px; }

/* --- Projects ----------------------------------------------------------- */
.proj { display: flex; flex-direction: column; }
.proj-img { position: relative; aspect-ratio: 3/2.3; border-radius: var(--r-lg); overflow: hidden; background: var(--bone-d); }
.proj-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.proj:hover .proj-img img { transform: scale(1.05); }
.proj-loc {
  position: absolute; bottom: 14px; left: 14px; z-index: 2;
  background: rgba(255,255,255,.94); color: var(--forest);
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 100px; box-shadow: var(--sh-1);
}
.proj h3 { font-size: 1.28rem; color: var(--forest); margin-top: 22px; }
.proj p { font-size: 14.5px; color: var(--muted); margin: 9px 0 0; }
.proj-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.proj-meta li { font-size: 11.5px; font-weight: 620; letter-spacing: .04em; color: var(--stone-d); background: rgba(78,103,113,.1); padding: 5px 11px; border-radius: 100px; }

/* --- Before / after ----------------------------------------------------- */
.ba { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-3); aspect-ratio: 16/10; user-select: none; touch-action: pan-y; cursor: ew-resize; background: var(--charcoal); }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--white); box-shadow: 0 0 20px rgba(0,0,0,.5); z-index: 3; }
.ba-knob {
  position: absolute; top: 50%; left: var(--pos, 50%); transform: translate(-50%,-50%); z-index: 4;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--white); box-shadow: var(--sh-2);
  display: flex; align-items: center; justify-content: center; gap: 3px;
  color: var(--forest); font-size: 13px;
}
.ba-lab { position: absolute; bottom: 18px; z-index: 3; background: rgba(16,26,20,.82); color: var(--white); backdrop-filter: blur(6px); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 8px 15px; border-radius: 100px; }
.ba-lab.l { left: 18px; }
.ba-lab.r { right: 18px; }

/* --- Testimonials ------------------------------------------------------- */
/* <figure> carries a default margin: 1em 40px — the reset only clears p and ul,
   which is what threw the testimonial spacing out against every other card. */
.quote { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 28px 26px; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.quote:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.quote .stars { color: #F0B429; letter-spacing: 2px; font-size: 15px; margin-bottom: 14px; }
.quote blockquote { margin: 0 0 22px; font-family: var(--serif); font-size: 1.06rem; line-height: 1.58; color: var(--charcoal); }
.quote figcaption { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.quote .av { width: 40px; height: 40px; border-radius: 50%; background: var(--forest); color: var(--sand-l); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; letter-spacing: .02em; }
.quote cite { font-style: normal; font-weight: 660; font-size: 14.5px; color: var(--ink); display: block; }
.quote small { color: var(--muted); font-size: 12.5px; }

.rating-strip {
  display: grid; grid-template-columns: auto 1px 1fr 1px 1fr;
  align-items: center; gap: 32px;
  margin-top: 34px; padding: 28px 34px; text-align: left;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.rating-strip .sep { width: 1px; height: 56px; background: var(--line); }
.rs-score { display: flex; align-items: center; gap: 15px; }
.rs-score .big { font-family: var(--serif); font-size: 3rem; color: var(--forest); line-height: 1; }
.rs-score .stars { color: #F0B429; letter-spacing: 2px; font-size: 15px; }
.rs-sub { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.rs-q p { font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; color: var(--charcoal); margin: 0 0 7px; }
.rs-q cite { font-style: normal; font-size: 13px; font-weight: 650; color: var(--muted); }

/* --- Process ------------------------------------------------------------ */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(5,1fr); gap: 22px; }
.step { position: relative; padding-top: 30px; }
.step::before {
  counter-increment: s; content: counter(s,decimal-leading-zero);
  font-family: var(--serif); font-size: 13px; font-weight: 700; letter-spacing: .08em;
  color: var(--sand); position: absolute; top: 0; left: 0;
}
.step::after { content: ''; position: absolute; top: 8px; left: 34px; right: -22px; height: 1px; background: rgba(201,183,156,.35); }
.step:last-child::after { display: none; }
.step h3 { font-size: 1.12rem; color: var(--white); }
.step p { font-size: 14.5px; color: #BCC8BC; margin-top: 9px; }

/* --- Areas -------------------------------------------------------------- */
.areas { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 12px; }
.area {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 17px 20px; font-weight: 620; font-size: 15px; color: var(--forest);
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.area:hover { border-color: var(--forest); transform: translateY(-2px); box-shadow: var(--sh-1); }
.area small { color: var(--muted); font-weight: 500; font-size: 12.5px; }

/* --- Forms -------------------------------------------------------------- */
.form-card { background: var(--white); border-radius: var(--r-lg); padding: 38px; box-shadow: var(--sh-3); }
.sec-dark .form-card { color: var(--ink); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 660; letter-spacing: .03em; color: var(--charcoal); margin-bottom: 7px; }
.field label .req { color: var(--stone); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px;
  border: 1.5px solid var(--line); border-radius: var(--r); background: var(--bone);
  font-size: 15.5px; transition: border-color .2s, background .2s, box-shadow .2s;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--forest); background: var(--white);
  box-shadow: 0 0 0 4px rgba(31,58,46,.09);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-note { font-size: 12.5px; color: var(--muted); margin-top: 14px; line-height: 1.55; }
.form-card .btn { width: 100%; }

/* --- CTA band ----------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; background: var(--forest); }
.cta-band .bg { position: absolute; inset: 0; opacity: .2; }
.cta-band .bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band .wrap { position: relative; z-index: 2; color: var(--bone); }
.cta-grid { display: grid; grid-template-columns: 1fr 460px; gap: 64px; align-items: center; }
/* contact page reverses the columns — kept as a class so the responsive rule can win */
.cta-grid.flip { grid-template-columns: 460px 1fr; align-items: start; }
/* the band is dark, so inherit the dark-section text treatment */
.cta-band h1, .cta-band h2, .cta-band h3 { color: var(--white); }
.cta-band .lead { color: #CFD8CF; }
.cta-band .eyebrow { color: var(--sand); }
.cta-band .eyebrow::before { background: var(--moss); }
.cta-band .check li { color: var(--bone); }
.cta-band .check svg { stroke: var(--sand); }
/* …except inside the form card, which sits on white */
.cta-band .form-card, .cta-band .form-card * { color: var(--ink); }
.cta-band .form-card h1, .cta-band .form-card h2, .cta-band .form-card h3 { color: var(--forest); }
.cta-band .form-card .lead, .cta-band .form-card .form-note { color: var(--muted); }
.cta-band .form-card .btn-primary { color: var(--white); }
.cta-band .form-card .eyebrow { color: var(--clay); }
.cta-band .form-card .eyebrow::before { background: var(--sand); }

/* --- Footer ------------------------------------------------------------- */
.site-foot { background: var(--forest-d); color: #A9B8A9; font-size: 14.5px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 44px; padding: 76px 0 54px; }
.site-foot h4 { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); margin-bottom: 20px; }
.site-foot a { transition: color .2s; }
.site-foot a:hover { color: var(--white); }
.site-foot li + li { margin-top: 11px; }
.foot-logo { height: 54px; width: auto; margin-bottom: 20px; }
.foot-about p { line-height: 1.65; max-width: 38ch; }
.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; transition: background .25s, border-color .25s, transform .25s var(--ease); }
.socials a:hover { background: var(--moss); border-color: var(--moss); transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }
.foot-contact li { display: flex; gap: 12px; align-items: flex-start; }
.foot-contact svg { width: 16px; height: 16px; fill: var(--sand); flex: none; margin-top: 4px; }
.hours { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.hours div { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; padding: 3px 0; }
.hours div span:last-child { color: #CBD6C9; font-variant-numeric: tabular-nums; }
.foot-bot { border-top: 1px solid rgba(255,255,255,.11); padding: 22px 0; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 13px; color: #7E8E7E; }
.pay { display: flex; gap: 8px; flex-wrap: wrap; }
.pay span { border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-sm); padding: 3px 9px; font-size: 11px; letter-spacing: .05em; }

/* --- Mobile sticky CTA -------------------------------------------------- */
/* Hidden while the hero is on screen — the hero already carries a call
   button and the quote form, so the bar would just cover them. Slides up
   once the hero is scrolled past. `.show` is toggled in site.js. */
.mobile-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
  background: var(--white); border-top: 1px solid var(--line);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(29,33,28,.14);
  transform: translateY(115%);
  transition: transform .38s var(--ease);
  will-change: transform;
}
.mobile-cta.show { transform: none; }
.mobile-cta div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mobile-cta .btn { width: 100%; padding: 14px 10px; font-size: 14.5px; }

/* --- Page hero (inner pages) -------------------------------------------- */
.phero { position: relative; overflow: hidden; background: var(--forest); }
.phero-bg { position: absolute; inset: 0; }
.phero-bg img { width: 100%; height: 100%; object-fit: cover; }
.phero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(16,26,20,.93) 8%, rgba(16,26,20,.72) 48%, rgba(16,26,20,.42) 100%); }
.phero .wrap { position: relative; z-index: 2; padding-block: 96px; }
.phero h1 { color: var(--white); max-width: 17ch; text-wrap: balance; }
.phero .lead { color: rgba(255,255,255,.87); margin-top: 20px; }
.phero .btn-row { margin-top: 32px; }
.crumb { display: flex; gap: 9px; align-items: center; font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 22px; }
.crumb a:hover { color: var(--white); }

/* --- Misc components ---------------------------------------------------- */
.check { display: grid; gap: 13px; }
.check li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; }
.check svg { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: none; stroke: var(--moss); stroke-width: 2.2; }
.sec-dark .check svg { stroke: var(--sand); }

.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.stat strong { display: block; font-family: var(--serif); font-size: clamp(2.4rem,4vw,3.4rem); color: var(--forest); line-height: 1; }
.sec-dark .stat strong { color: var(--sand); }
.stat span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.sec-dark .stat span { color: #BCC8BC; }

.media { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.media-img { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); }
.media-img img { width: 100%; aspect-ratio: 4/3.2; object-fit: cover; }
.media-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.media-stack img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
.media-stack .tall { grid-row: span 2; aspect-ratio: 3/4.4; }
.media-stack .sq { aspect-ratio: 1; }

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; text-align: left; font-family: var(--serif); font-size: 1.16rem; color: var(--forest); }
.faq-q .pm { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; flex: none; position: relative; transition: background .25s, border-color .25s; }
.faq-q .pm::before, .faq-q .pm::after { content: ''; position: absolute; background: var(--forest); border-radius: 2px; transition: transform .3s var(--ease), background .25s; }
.faq-q .pm::before { width: 11px; height: 1.8px; }
.faq-q .pm::after { width: 1.8px; height: 11px; }
.faq-item.open .pm { background: var(--forest); border-color: var(--forest); }
.faq-item.open .pm::before, .faq-item.open .pm::after { background: var(--white); }
.faq-item.open .pm::after { transform: rotate(90deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a p { padding-bottom: 26px; color: var(--muted); font-size: 15.5px; max-width: 68ch; }

.gal { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.gal a { border-radius: var(--r); overflow: hidden; aspect-ratio: 1; background: var(--bone-d); position: relative; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gal a:hover img { transform: scale(1.08); }
.gal .wide { grid-column: span 2; aspect-ratio: 2/1; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 44px; }
.tab { padding: 11px 22px; border-radius: 100px; border: 1.5px solid var(--line); background: var(--white); font-size: 14.5px; font-weight: 620; color: var(--muted); transition: all .25s var(--ease); }
.tab:hover { border-color: var(--forest); color: var(--forest); }
.tab.on { background: var(--forest); border-color: var(--forest); color: var(--white); }

.note { display: flex; gap: 14px; padding: 20px 22px; background: rgba(78,103,113,.09); border-left: 3px solid var(--stone-l); border-radius: 0 var(--r) var(--r) 0; font-size: 15px; }
.note svg { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: var(--stone); }

/* --- Reveal animation --------------------------------------------------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .quick { max-width: 480px; }
  .g-4 { grid-template-columns: repeat(2,1fr); }
  .cta-grid, .cta-grid.flip { grid-template-columns: 1fr; gap: 44px; }
  .steps { grid-template-columns: repeat(3,1fr); row-gap: 36px; }
  .step:nth-child(3)::after { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

}

@media (max-width: 900px) {
  :root { --gut: 22px; }
  .sec { padding: 76px 0; }
  .burger { display: flex; }
  .head-cta .btn { display: none; }
  /* backdrop-filter makes the header a containing block for fixed children,
     which would trap the off-canvas drawer inside the 82px-tall bar. */
  .site-head { backdrop-filter: none; background: var(--bone); }
  /* Off-canvas drawer. Slides vertically, never horizontally — a translateX(100%)
     panel is measured by the document and creates page-wide horizontal overflow. */
  .nav {
    position: fixed; inset: 82px 0 0; z-index: 70;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bone); padding: 18px var(--gut) 40px;
    overflow-y: auto;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .nav.on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .nav > li > a { padding: 17px 4px; font-size: 17px; border-bottom: 1px solid var(--line); border-radius: 0; justify-content: space-between; }
  .mega { position: static; transform: none; width: auto; max-width: none; box-shadow: none; border: 0; border-radius: 0; background: transparent; padding: 0; display: none; grid-template-columns: 1fr; }
  .nav > li.open .mega { display: grid; transform: none; }
  .mega a { padding: 13px 4px 13px 16px; border-left: 2px solid var(--line); border-radius: 0; }
  .g-3, .g-2, .split, .media, .field-row { grid-template-columns: 1fr; }
  .rating-strip { grid-template-columns: 1fr; gap: 20px; padding: 24px 26px; }
  .rating-strip .sep { width: 100%; height: 1px; }
  .media { gap: 40px; }
  .gal { grid-template-columns: repeat(2,1fr); }
  .stat-row { gap: 24px; }
  .mobile-cta { display: block; }
  body { padding-bottom: 78px; }
  .hero { min-height: auto; }
  .hero .wrap { padding-block: 110px 36px; }
  .quick { max-width: none; padding: 22px 20px 20px; }
  .quick h2, .quick h3 { font-size: 1.3rem; }
  .panel { min-height: 400px; }
  .panel-in { padding: 28px 24px; }
  .form-card { padding: 28px 22px; }
  .topbar-l a:not(:first-child) { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .sec { padding: 60px 0; }
  .steps { grid-template-columns: 1fr 1fr; }
  .trustbar ul { grid-template-columns: 1fr 1fr; }

  /* Eight service cards in two cramped columns is unreadable on a phone.
     One per row, laid out horizontally — thumbnail + text — so the list
     stays scannable without becoming eight full screens of scrolling. */
  .g-4 { grid-template-columns: 1fr; gap: 12px; }
  .g-4 .svc { flex-direction: row; align-items: stretch; }
  .g-4 .svc-img { width: 108px; flex: none; aspect-ratio: auto; }
  .g-4 .svc-tag { display: none; }
  .g-4 .svc-body { padding: 15px 16px 15px 17px; }
  .g-4 .svc h3 { font-size: 1.08rem; }
  .g-4 .svc p { font-size: 13.5px; line-height: 1.5; margin: 6px 0 11px; }
  .g-4 .svc .link-arrow { font-size: 13px; }

  /* the capability pills read as clutter at this width */
  .panel-list { display: none; }
  .panel { min-height: 320px; }
  .panel-in { padding: 24px 20px; }
  .panel-in p { margin-bottom: 18px; }

  /* testimonials: match the rhythm of every other card section */
  .quote { padding: 24px 22px; }
  .quote blockquote { font-size: 1.06rem; margin-bottom: 18px; }
  .rating-strip { margin-top: 28px; padding: 22px; gap: 16px; text-align: left; align-items: flex-start; }
  .steps { row-gap: 30px; }
  .step::after { display: none; }
  .trustbar li { border-right: 0; border-top: 1px solid var(--line); padding: 22px 12px; }
  .trustbar li:nth-child(-n+2) { border-top: 0; }
  .foot-grid { grid-template-columns: 1fr; gap: 36px; padding: 56px 0 40px; }
  .stat-row { grid-template-columns: 1fr; gap: 26px; text-align: left; }
  .topbar { display: none; }
  .hero-trust { gap: 8px 16px; font-size: 13px; }
  .hero-trust .dot { display: none; }
  .gbadge { padding: 8px 14px 8px 11px; gap: 9px; margin-bottom: 20px; }
  .gbadge .n { font-size: 12.5px; }
  .gbadge .stars { font-size: 12.5px; }
  .marks { gap: 7px; }
  .mark { font-size: 12px; padding: 6px 11px 6px 9px; }
  .btn-row .btn { flex: 1 1 100%; }
  .gal .wide { grid-column: span 2; }
  .ba { aspect-ratio: 4/3; }
  .concept { font-size: 11px; }
  .hide-sm { display: none; }
}