/* Bold trade: heavy condensed capitals, dark bands, one loud colour and the phone number large; tight sections divided
   by rules, square corners. For towing, fences, roofing, paving, snow and junk removal: trades called in a hurry.
   Header: bar, on the dark band. Services: columns under a thick accent rule. Heroes: photo-full and type-side.
   The one look with a dark scheme: the dark tokens turn the paper near-black, and the html[data-scheme="dark"] rules
   at the end put back what the swap alone gets wrong. */
:root{--r:0px;--bar:6px}

/* Type */
h1,h2,h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase}
h1{font-size:clamp(54px,8.6vw,112px);line-height:.9;letter-spacing:-.005em}
h2{font-size:clamp(40px,5.2vw,66px);line-height:.94;letter-spacing:0;max-width:18ch}
h3{font-size:clamp(24px,2.2vw,28px);line-height:1;letter-spacing:.01em}
.kicker{display:flex;align-items:center;gap:12px;font:700 16px/1.2 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);margin:0 0 16px}
.kicker::before{content:"";flex:none;width:28px;height:var(--bar);background:var(--accent)}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--muted);max-width:50ch}

/* Buttons: square blocks in condensed capitals. */
.btn{border-radius:0;font:800 20px/1 var(--font-display);text-transform:uppercase;letter-spacing:.03em;border-width:2px}
.btn--lg{font-size:clamp(21px,1.9vw,24px);padding:.85em 1.3em}

/* Header: a dark bar, the name in capitals, the phone number as the loudest thing in it. */
.nav{display:flex;align-items:center;gap:32px;padding:14px max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));background:var(--deep);color:var(--on-deep)}
.nav__brand{color:var(--on-deep);font:800 clamp(22px,2.2vw,26px)/1 var(--font-display);text-transform:uppercase;letter-spacing:.02em;margin-right:auto}
.nav__logo{max-height:40px}
.nav__logo[style*="--logo-bg"]{border-radius:0}
.nav__links{gap:26px}
.nav__links a{color:var(--on-deep);opacity:.85;font-weight:600;font-size:15px;padding:4px 0}
.nav__links a:hover{opacity:1}
.nav__call{min-height:48px;padding:.5em .9em;font-size:24px}
.nav :focus-visible{outline-color:var(--on-deep)}

/* Hero, photo-full: the photo behind a hard wash from the left, the words huge on the dark. */
.hero__cta{margin:30px 0 0;gap:12px}
.hero__proof{display:inline-block;margin-top:28px;padding:10px 16px;background:var(--accent);color:var(--accent-ink);font:700 18px/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.04em}
.hero .lede{color:inherit;opacity:.9}

.hero--photo-full{background:var(--deep);color:#fff}
.hero--photo-full .hero__media{position:absolute;inset:0;z-index:-1}
.hero--photo-full .hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--deep) 96%,transparent) 30%,color-mix(in srgb,var(--deep) 70%,transparent))}
.hero--photo-full .hero__ph{top:16px;bottom:auto}
.hero--photo-full .hero__body{min-height:max(520px,calc(100svh - 170px));display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding-top:96px;padding-bottom:clamp(48px,6vw,80px)}
.hero--photo-full h1{max-width:15ch}
.hero--photo-full .kicker{color:#fff}
.hero--photo-full .btn--ghost{color:#fff}
.hero--photo-full :focus-visible{outline-color:#fff}

/* The other treatment, type-side: the words lead on the dark band, the photo a hard-edged column beside them. */
.hero--type-side{display:grid;background:var(--deep);color:var(--on-deep)}
.hero--type-side .hero__body{grid-row:1;padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(40px,5vw,72px);margin:0;max-width:none}
.hero--type-side .hero__media{grid-row:2;height:clamp(240px,60vw,420px);border-top:var(--bar) solid var(--accent)}
.hero--type-side .kicker{color:var(--on-deep)}
.hero--type-side :focus-visible{outline-color:var(--on-deep)}
.hero--type-side h1{max-width:15ch;font-size:clamp(54px,6.4vw,88px)}
@media (min-width:960px){.hero--type-side h1{max-width:none}}

/* Sections: tight, each divided from the next by a rule. */
.section{padding:clamp(52px,6.5vw,88px) 0;border-top:1px solid var(--line)}
.section--deep{border-top:0}
.section--services{background:var(--surface)}

/* Services: columns under a thick accent rule, split by thin ones, photos edge to edge. */
.services--columns{grid-template-columns:minmax(0,1fr);gap:0;margin-top:clamp(28px,3.5vw,44px);border-top:var(--bar) solid var(--accent)}
.card{display:flex;flex-direction:column;padding:24px 0 28px;border-bottom:1px solid var(--line)}
.card .ph{margin-bottom:20px}
.card .ph img{aspect-ratio:16/10}
.card h3{margin:0 0 .4em}
.card p{color:var(--muted);font-size:16px;line-height:1.5;margin:0;max-width:42ch}

/* How it works: big accent numbers, the steps split by rules. */
.steps{list-style:none;margin:clamp(28px,3.5vw,48px) 0 0;padding:0;display:grid;border-top:1px solid var(--line-deep)}
.step{padding:24px 0;border-bottom:1px solid var(--line-deep)}
.step__n{display:block;margin-bottom:10px;font:800 56px/.9 var(--font-display);color:var(--accent)}
.step p{margin:0;opacity:.84;max-width:38ch}

/* Gallery: a dense, even grid, hard edges and a thin gap. */
.grid--gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:clamp(28px,3.5vw,44px)}
.gallery__item img{aspect-ratio:4/3}

/* Proof: the figures in heavy capitals behind an accent bar, the quotes as ruled blocks. */
.stats{display:flex;flex-wrap:wrap;gap:20px clamp(32px,5vw,64px);margin:clamp(24px,3vw,40px) 0 clamp(28px,3.5vw,48px)}
.stat{padding-left:16px;border-left:var(--bar) solid var(--accent)}
.stat strong{display:block;font:800 clamp(56px,6.4vw,84px)/.9 var(--font-display);font-variant-numeric:lining-nums}
.stat span{display:block;margin-top:8px;font:700 16px/1.2 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.quotes{display:grid;gap:12px}
.quotes:empty{display:none}
.stats:has(+ .quotes:empty){margin-bottom:0}
.quote{margin:0;padding:22px 24px;background:var(--paper);border-left:var(--bar) solid var(--ink)}
.quote p{font:600 clamp(18px,1.6vw,21px)/1.45 var(--font-body);margin:0 0 12px}
.quote p::before{content:"\201C"}
.quote p::after{content:"\201D"}
.quote cite{font:700 15px/1.2 var(--font-display);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}

/* Area: the neighbourhoods as dark blocks. */
.chips{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{padding:9px 14px;background:var(--deep);color:var(--on-deep);font:700 17px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase}

.faq__item summary{font:700 clamp(21px,1.9vw,24px)/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.02em;padding:18px 0}

/* Hours, for a shop: a tight ruled table. */
.hours{list-style:none;margin:24px 0 0;padding:0;display:grid;max-width:44ch;border-top:var(--bar) solid var(--accent)}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-deep);font-weight:600;font-size:17px}
.hours__note,.hours__address{margin:20px 0 0;opacity:.84}

.form,.form input,.form textarea{border-radius:0}
.form{border-top:var(--bar) solid var(--accent)}

.footer{border-top:var(--bar) solid var(--accent)}
.footer strong{font:800 24px/1 var(--font-display);text-transform:uppercase}

.ph figcaption,.hero__ph{border-radius:0}
.callbar{border-radius:0;font:800 22px/1 var(--font-display);text-transform:uppercase;letter-spacing:.03em}

@media (max-width:759px){
  .gallery__item:first-child,.gallery__item:nth-child(even):last-child{grid-column:1/-1}
}

@media (min-width:760px){
  .services--columns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{padding:28px 28px 32px;border-bottom:0;border-right:1px solid var(--line)}
  .card:nth-child(2n){border-right:0}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));border-top:0}
  .step{padding:4px 28px 8px;border-bottom:0;border-left:1px solid var(--line-deep)}
  .step:first-child{padding-left:0;border-left:0}
  .grid--gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
  .quotes{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}

@media (min-width:960px){
  .services--columns{grid-template-columns:repeat(3,minmax(0,1fr))}
  .services--columns:has(>.card:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  .card:nth-child(2n){border-right:1px solid var(--line)}
  .card:last-child{border-right:0}
  .hero--photo-full .hero__media::after{background:linear-gradient(90deg,color-mix(in srgb,var(--deep) 96%,transparent) 35%,color-mix(in srgb,var(--deep) 55%,transparent) 70%,color-mix(in srgb,var(--deep) 20%,transparent))}
  .hero--photo-full .hero__ph{right:16px}
  .hero--type-side{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .hero--type-side .hero__body{grid-column:1;padding-right:clamp(32px,4vw,56px);margin-left:max(0px,calc((100vw - var(--wrap)) / 2))}
  .hero--type-side .hero__media{grid-row:1;grid-column:2;height:auto;min-height:560px;border-top:0;border-left:var(--bar) solid var(--accent)}
}

/* Dark scheme: the whole page on near-black paper. The tokens do most of it; these rules keep the bands apart. */
html[data-scheme="dark"] .nav{background:var(--paper);border-bottom:1px solid var(--line)}
html[data-scheme="dark"] .preview-banner{background:var(--surface);color:var(--ink);box-shadow:0 1px 0 var(--line)}
html[data-scheme="dark"] .preview-banner a{color:var(--ink)}
html[data-scheme="dark"] .preview-banner :focus-visible{outline-color:var(--ink)}
html[data-scheme="dark"] .section--deep{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
html[data-scheme="dark"] .quote{background:var(--deep)}
html[data-scheme="dark"] .form{background:var(--surface)}
html[data-scheme="dark"] .form input,html[data-scheme="dark"] .form textarea{background:var(--paper)}