/* W.T. Landscapes & Driveways — "Laid, not decorated."
   Photographs carry the page; the interface is quiet stone-grey paper and tarmac charcoal so the
   work is the only colour. Every swatch is read off their own photos: porcelain/gravel grey for the
   ground, tarmac and cladding charcoal for ink and the dark bands, the buff block edging for the
   one decorative device, and the artificial-lawn green from their cover photo, deepened until white
   text clears AA, for the one action colour. The photos must do the selling: a stone-base frame
   becomes finished tarmac in the hero, and the rest of the same job sits right under it. Nothing
   on this page is written about the business that its owners did not publish. */

/* BUILD NOTES (Bob, 1 Oct 2026) — read before editing
   - Tokens are Kern's, unchanged, plus ONE alias: --on-accent (#fff), which Kern's contrast table
     specifies for button text but his block did not name. --block, --joint and --kerb were RE-SAMPLED
     from the real photo files on 1 Oct 2026 (Kern's came from thumbnails). --accent #55762a is the AA-corrected value and must not change.
   - Hero is Kern's PLAN B (stacked figures, kerb cut, no wipe), not the drag-to-compare slider.
     Reasons are in the build handoff and in index.html. The slider CSS/JS was never built.
   - The kerb "laid" animation uses plain view() with an explicit range. Never view(block <pct>)
     (it never fires) and never put an animated kerb inside the reel or any overflow box. */

:root{
  --bg:            #ecebe7;  /* page ground — porcelain/gravel grey from the photos, lifted to page lightness, warm-neutral hue kept */
  --bg-alt:        #dfddd7;  /* alternate band (contact) */
  --panel:         #f8f7f4;  /* placeholder tags, small cards */
  --ink:           #232428;  /* body + headings — tarmac/cladding charcoal, deepened for text */
  --muted:         #595855;  /* secondary text */
  --accent:        #55762a;  /* THE action colour: WhatsApp button, nav CTA, sticky-bar CTA */
  --accent-hover:  #46621f;
  --accent-ink:    #3d5619;  /* accent as TEXT on light (kickers, links) */
  --accent-bright: #9cc356;  /* accent as text/lines on --tarmac only */
  --line:          #cac6bd;  /* hairlines, nav border */
  --block:         #c6b8a5;  /* buff block edging — kerb motif + photo frames. RE-SAMPLED 1 Oct 2026 from the real files (Kern: #c7b4a1): midpoint of sunlit blocks #e6dac4 and shaded #a79686 */
  --joint:         #a69a8b;  /* block joints (derived: --block x 0.84) */
  --kerb:          #3f494d;  /* the charcoal course beside the block. RE-SAMPLED 1 Oct 2026 (Kern: #2b2c31, a shaded thumbnail): the real charcoal blocks run #4d5655 sunlit to #383f47 shaded */
  --tarmac:        #1f2024;  /* dark bands (review, footer, sticky bar) */
  --on-tarmac:       #ecebe7;
  --on-tarmac-muted: #b9b7b1;
  --on-accent:     #fff;     /* alias: white button text on --accent (5.2:1), named in Kern's contrast table */
  --radius:        2px;      /* edged like paving, not rounded like an app */

  --gutter: clamp(1rem, 4vw, 2rem);
  --maxw: 1200px;
  --display: "Archivo", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img{ display: block; max-width: 100%; }
a{ color: var(--accent-ink); }
h1,h2,h3,p,figure,blockquote,dl,dd,ul{ margin: 0; }
ul{ padding: 0; list-style: none; }
button{ font: inherit; color: inherit; cursor: pointer; }
:focus-visible{ outline: 3px solid var(--accent); outline-offset: 3px; }
.on-tarmac :focus-visible, .callbar :focus-visible, footer :focus-visible{ outline-color: var(--accent-bright); }
.sr-only{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip{
  position: absolute; left: .5rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--bg); padding: .6rem 1rem; border-radius: var(--radius);
}
.skip:focus{ top: .5rem; }

.wrap{ width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- type ---------- */
.kicker{
  font: 700 .74rem/1.3 var(--display);
  font-stretch: 112%;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: .8rem;
}
.on-tarmac .kicker{ color: var(--accent-bright); }
h1,h2,h3{ font-family: var(--display); font-stretch: 112%; font-weight: 800; letter-spacing: -.01em; }
/* Kern: clamp(2.4rem, 5.2vw, 4.6rem). Lowered to 4.4vw / 4rem so "& Driveways" fits the 5fr hero column
   on one line instead of stranding the ampersand (deviation, see handoff). */
h1{ font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 1.02; }
h2{ font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.08; }
.lede{ font-size: 1.15rem; color: var(--muted); max-width: 30ch; }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 0 1.4rem;
  font: 700 .95rem/1.2 var(--body);
  text-decoration: none;
  border: 1.5px solid transparent; border-radius: var(--radius);
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn-primary{ background: var(--accent); color: var(--on-accent); }
.btn-primary:hover{ background: var(--accent-hover); }
.btn-ghost{ border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover{ background: var(--ink); color: var(--bg); }
.btn-lg{ min-height: 56px; padding: 0 1.8rem; font-size: 1.05rem; }
.cta-row{ display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }

/* ---------- nav (scoped: body > header so nothing else can ride over it) ---------- */
body > header{
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-in{ display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 64px; }
.brand{ display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.brand-name{
  font: 800 .82rem/1.1 var(--display); font-stretch: 112%; letter-spacing: -.005em;
  max-width: 11.5em;
}
/* Edging glyph: 22 x 14, block course with a 4px charcoal line under it. */
.glyph{
  flex: 0 0 22px; width: 22px; height: 14px;
  background:
    linear-gradient(var(--kerb), var(--kerb)) bottom / 100% 4px no-repeat,
    var(--block);
}
.nav-links{ display: none; }
.nav-actions{ display: flex; align-items: center; gap: .5rem; }
.nav-actions .btn{ min-height: 44px; padding: 0 1rem; font-size: .88rem; }
.burger{
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 1.5px solid var(--line); border-radius: var(--radius);
}
.burger span, .burger span::before, .burger span::after{
  display: block; width: 18px; height: 2px; background: var(--ink); content: ""; position: relative;
}
.burger span::before{ position: absolute; top: -6px; }
.burger span::after{ position: absolute; top: 6px; }
.menu{
  display: none;
  border-top: 1px solid var(--line);
  background: var(--bg);
  text-align: center;
}
.menu.open{ display: block; }
.menu a{
  display: block; padding: .95rem var(--gutter); min-height: 48px;
  font: 700 1rem/1.4 var(--body); color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.menu a:last-child{ border-bottom: 0; }
@media (min-width: 900px){
  .burger, .menu, .menu.open{ display: none; }
  .nav-links{ display: flex; gap: 2rem; }
  .nav-links a{ font: 700 .95rem/1 var(--body); color: var(--ink); text-decoration: none; padding: .6rem 0; border-bottom: 2px solid transparent; }
  .nav-links a:hover{ border-bottom-color: var(--accent); }
  .brand-name{ font-size: 1rem; max-width: none; white-space: nowrap; }
  .nav-actions .btn{ font-size: .95rem; padding: 0 1.3rem; }
}

/* ---------- the kerb (motif) ---------- */
/* 19px = 14px block course with joints every 36px + 5px charcoal course. */
.kerb{
  height: 19px;
  background:
    linear-gradient(var(--kerb), var(--kerb)) bottom / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, var(--block) 0 34px, var(--joint) 34px 36px);
}
/* Vertical cut, the same two layers turned 90 degrees: a block course with joints, charcoal
   course on its right. No joints on a frame's side bands (see .edged) but they belong here. */
.kerb-v{
  background:
    linear-gradient(var(--kerb), var(--kerb)) right / 5px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--block) 0 34px, var(--joint) 34px 36px);
}
/* Photo frame, hero pair only: block-colour border, charcoal line hugging the photos. */
.edged{ position: relative; padding: 10px; background: var(--block); border-radius: var(--radius); }
.edged::after{ content: ""; position: absolute; inset: 10px; box-shadow: 0 0 0 4px var(--kerb); pointer-events: none; z-index: 2; }
@media (min-width: 560px){
  .edged{ padding: 14px; }
  .edged::after{ inset: 14px; box-shadow: 0 0 0 5px var(--kerb); }
}
/* Kerb laid left to right as each divider scrolls in. The FIRST kerb (under the hero) stays
   static: it can already be on screen at load, and an entry timeline would show it half drawn.
   Plain view() + explicit range. The strip is 19px tall, so an entry-only range would finish in
   19px of scroll and be invisible; hence cover 35%. No clipping ancestor (overflow) anywhere above
   these elements, or the timeline never attaches. @supports: an engine without scroll timelines
   simply shows the finished kerb. */
@keyframes laid{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .kerb--laid{
      transform-origin: left;
      animation: laid linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
  }
}

/* ---------- sections ---------- */
section[id]{ scroll-margin-top: 80px; }
.section{ padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-head{ margin-bottom: 1.8rem; }
.section-head h2{ max-width: 18ch; }

/* ---------- photo plumbing ---------- */
/* Every photo sits in a box with a set aspect-ratio, so nothing shifts as it loads and a file with
   a different native shape than assumed still fills its frame. */
.ph-box{ position: relative; overflow: hidden; background: var(--kerb); border-radius: var(--radius); }
.ph-box img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.chip{
  position: absolute; top: 10px; left: 10px; z-index: 1;
  padding: .3rem .6rem;
  font: 700 .72rem/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase;
  background: var(--tarmac); color: var(--on-tarmac);
  border-radius: var(--radius);
}
.chip--done{ background: var(--accent); color: var(--on-accent); }

/* ---------- hero ---------- */
.hero{ padding-block: 1.6rem 3rem; }
.hero-grid{ display: grid; gap: 1.4rem; }
.hero-head .kicker{ margin-bottom: .7rem; }
.hero-body .lede{ margin-top: 0; }

/* The pair (Plan B). Under 900px with JS: one frame, a toggle underneath. Without JS, or from
   900px: both frames, base on the left, finished on the right, a kerb cut between. */
.pair-frame{ display: grid; grid-template-columns: 1fr; }
.pair-frame figure{ aspect-ratio: 4 / 5; }
.pair-frame .kerb-v{ display: none; }
.pair-toggle{ display: none; }
.pair-frame figure{ min-width: 0; }
@media (max-width: 899.98px){
  .pair{ max-width: 460px; margin-inline: auto; width: 100%; }
  .js .pair[data-show="base"] .fig-done,
  .js .pair[data-show="done"] .fig-base{ display: none; }
  .js .pair-frame figure{ cursor: pointer; animation: swap .35s ease both; }
  .js .pair-toggle{
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
  }
  .pair-toggle button{
    min-height: 44px; padding: 0 .6rem;
    font: 700 .85rem/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase;
    background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius); color: var(--ink);
  }
  .pair-toggle button[aria-pressed="true"]{ background: var(--tarmac); border-color: var(--tarmac); color: var(--on-tarmac); }
  .pair-toggle button[data-to="done"][aria-pressed="true"]{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  /* Without JS both frames stack with a horizontal cut between them. */
  html:not(.js) .pair-frame{ gap: 10px; }
}
@media (max-width: 559.98px){
  .pair-frame figure{ aspect-ratio: 9 / 10; }   /* keeps the toggle above the sticky bar at 375x812 */
  .kicker{ font-size: .68rem; letter-spacing: .06em; }
}
@keyframes swap{ from{ opacity: .15; } to{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .js .pair-frame figure{ animation: none; } }

@media (min-width: 900px){
  .hero{ padding-block: 3rem 4rem; }
  .hero-grid{
    grid-template-columns: 5fr 7fr; column-gap: 3.5rem; row-gap: 1.2rem;
    grid-template-areas: "head pair" "body pair";
    align-content: center; align-items: start;
  }
  .hero-head{ grid-area: head; align-self: end; }
  .hero-body{ grid-area: body; align-self: start; }
  .pair{ grid-area: pair; align-self: center; }
  .pair-frame{ grid-template-columns: 1fr 22px 1fr; }
  .pair-frame .kerb-v{ display: block; }
  .pair-frame figure{ max-height: min(70vh, 640px); }
}

/* ---------- the same driveway (reel) ---------- */
.reel-head{ display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.reel-nav{ display: none; gap: .5rem; }
.reel-nav button{
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 50%;
  font-size: 1.2rem; line-height: 1;
}
.reel-nav button:hover{ border-color: var(--ink); }
.reel{
  display: flex; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
  padding-bottom: .8rem;
  overscroll-behavior-x: contain;
}
.reel > li{ flex: 0 0 clamp(230px, 70vw, 360px); scroll-snap-align: start; }
.reel > li.cut{ flex: 0 0 40px; scroll-snap-align: none; }
.reel figure{ aspect-ratio: 4 / 5; }
.reel > li.cut .kerb-v{ height: 100%; }
@media (max-width: 759.98px){
  .reel{ margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}
@media (min-width: 760px){ .reel-nav{ display: flex; } }

/* ---------- more of the work ---------- */
.panorama{ aspect-ratio: 16 / 10; border-radius: 0; }
.panorama img{ --pos: 35% 55%; }
@media (min-width: 760px){
  .panorama{ aspect-ratio: 21 / 9; }
  .panorama img{ --pos: 50% 55%; }
}
.work-pair{ display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 14px; }
.work-pair figure{ aspect-ratio: 4 / 5; }
.work-pair figure:only-child{ max-width: 520px; margin-inline: auto; }
@media (min-width: 560px){ .work-pair{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px){ .work-pair figure{ aspect-ratio: 1 / 1; } }
.work-pair img{ transition: transform .3s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .work-pair figure:hover img, .reel figure:hover img{ transform: scale(1.03); }
  .reel img{ transition: transform .3s ease; }
}

/* ---------- review ---------- */
.review{ background: var(--tarmac); color: var(--on-tarmac); padding-block: clamp(3.5rem, 8vw, 6rem); }
.review blockquote{
  position: relative;
  font: 700 clamp(1.2rem, 2.6vw, 2.1rem)/1.3 var(--display); font-stretch: 112%;
  max-width: 34ch;
}
.review blockquote::before{
  content: "\201C"; display: block; color: var(--accent-bright);
  font: 800 4rem/.6 var(--display); margin-bottom: .6rem;
}
.review .who{ color: var(--accent-bright); }
.review-by{ margin-top: 1.6rem; font-size: .95rem; color: var(--on-tarmac-muted); }
.review-link{ display: inline-block; margin-top: 1.2rem; color: var(--on-tarmac); font-weight: 700; padding-block: .6rem; }
.review-link:hover{ color: var(--accent-bright); }

/* ---------- contact ---------- */
.contact{ background: var(--bg-alt); }
.contact-grid{ display: grid; gap: 2.2rem; }
.contact-actions .cta-row{ margin-top: 1.4rem; }
.mail-line{ margin-top: 1.2rem; }
.mail-line a{ font-weight: 700; word-break: break-all; padding-block: .5rem; display: inline-block; }
.facts{ display: grid; gap: 0; border-top: 1px solid var(--line); align-self: start; }
.facts > div{ display: grid; gap: .25rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.facts dt{ font: 700 .74rem/1.3 var(--display); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.facts dd{ font-weight: 500; }
.ph{
  display: inline-block;
  border: 1.5px dashed var(--muted); background: var(--panel);
  padding: .15rem .6rem; border-radius: var(--radius);
  font: 500 .9rem/1.5 var(--body); color: var(--ink);
}
@media (min-width: 900px){
  .contact-grid{ grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
  .facts > div{ grid-template-columns: 11rem 1fr; gap: 1rem; align-items: baseline; }
}

/* ---------- footer ---------- */
body > footer{ background: var(--tarmac); color: var(--on-tarmac); padding-block: 2.5rem; }
.foot-grid{ display: grid; gap: 1.6rem; }
.foot-brand .brand{ color: var(--on-tarmac); }
.foot-links{ display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.foot-links a{ color: var(--on-tarmac); padding: .5rem .4rem; min-width: 44px; text-align: center; display: inline-block; }
.foot-links a:hover{ color: var(--accent-bright); }
.fine{ margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--kerb); font-size: .85rem; color: var(--on-tarmac-muted); display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
@media (min-width: 900px){
  .foot-grid{ grid-template-columns: 1fr auto; align-items: center; }
}

/* ---------- sticky phone bar (under 820px only) ---------- */
.callbar{
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--tarmac);
  padding: 0 0 env(safe-area-inset-bottom);
}
.callbar-in{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
.callbar .btn{ min-height: 56px; border-radius: var(--radius); }
.callbar .btn-outline{ border-color: var(--on-tarmac); color: var(--on-tarmac); }
@media (max-width: 819.98px){
  .callbar{ display: block; }
  body > footer{ padding-bottom: calc(72px + env(safe-area-inset-bottom) + 1rem); }
}

/* ---------- phones: centre everything (AJ house rule, 1 Oct 2026) ---------- */
@media (max-width: 819.98px){
  .hero-head, .hero-body, .section-head, .contact-copy, .contact-actions, .foot-grid, .fine, .foot-links{ text-align: center; }
  .hero-body .lede, .section-head h2{ margin-inline: auto; }
  .cta-row{ flex-direction: column; align-items: stretch; }
  .cta-row .btn{ width: 100%; }
  .reel-head{ justify-content: center; }
  .facts > div{ text-align: center; }
  .foot-brand .brand, .fine, .foot-links{ justify-content: center; }
  .foot-brand .brand{ justify-content: center; }
  /* The review quote stays LEFT-aligned on purpose: about ten lines at 390px, and a centred ten-line
     quote is hard to read. Its kicker, attribution and Facebook link centre. One rule to flip. */
  .review .kicker, .review-by, .review-link-wrap{ text-align: center; }
  .review blockquote{ text-align: left; margin-inline: auto; }
  .review blockquote::before{ text-align: center; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn{ transition: none; }
}