/* Alpha Landsformation v3 · client palette and type (2026-11-10)
 * palette: #111111 black (header, hero, contact, footer) · #FF6500 orange (call buttons, small accents)
 *          #B8BEC2 silver (borders, secondary text on dark) · #F5F5F2 warm white (light sections, headings on dark) · #303030 charcoal (dark sections, cards)
 * type: Manrope 600 headlines, 500 nav and buttons, 400 body; hierarchy from size and spacing
 * sections: black hero > white > charcoal > white > charcoal > black contact > footer; section classes set --muted --line --surface --icon, joined by ridgeline dividers, dark to dark by a fade
 * contrast: orange is never text on white or small text on charcoal; muted text on white is #55595C (6.5:1), all pairs pass AA */

:root {
  --black: #111111; --orange: #FF6500; --orange-hover: #FF7F2A; --silver: #B8BEC2; --white: #F5F5F2; --charcoal: #111111; /* user asked the dark sections to match the hero black */
  --ink: #111111; --muted: #55595C; --line: #D6DADC; --line-dark: rgba(184, 190, 194, .22);
  --display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 48px); --wrap: 1200px;
  --section: clamp(72px, 9vw, 120px); --radius: 6px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; font: 400 1.0625rem/1.65 var(--body); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 var(--s2); text-wrap: balance; }
h1 { font-size: clamp(2.125rem, 4.2vw, 3.5rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; text-transform: uppercase; }
h2 { font-size: clamp(1.625rem, 2.6vw, 2.25rem); font-weight: 700; letter-spacing: -0.005em; text-transform: uppercase; }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; margin-bottom: var(--s1); }
p { margin: 0 0 var(--s2); }
.lead { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); max-width: 54ch; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: var(--s2); top: -48px; background: var(--orange); color: #fff; padding: var(--s1) var(--s2); font-weight: 500; z-index: 50; }
.skip:focus { top: var(--s2); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* Section grounds */
.black { background: var(--black); color: var(--white); }
.charcoal { background: var(--charcoal); color: var(--white); }
.black p, .charcoal p, .black figcaption { color: var(--silver); }
.paper { background: var(--white); --muted: #55595C; --line: #D6DADC; --surface: #fff; --icon: var(--charcoal); }
.charcoal, .black { --muted: var(--silver); --line: var(--line-dark); --surface: #1B1B1B; --icon: var(--silver); }
.section { padding-block: var(--section); padding-bottom: calc(var(--section) + clamp(56px, 8vw, 130px)); position: relative; isolation: isolate; }  /* extra floor so the last lines of text clear the background ridges and the divider */
/* background: three hazy Smoky Mountain ridgelines stacked low in each section, like looking across the valley (tools/textures.py) */
.section::before { content: ""; position: absolute; inset: auto 0 0 0; height: min(42%, 340px); z-index: -1; pointer-events: none;
  -webkit-mask: url("../img/tex-mountains.svg") 0 100% / 100% 100% no-repeat; mask: url("../img/tex-mountains.svg") 0 100% / 100% 100% no-repeat;
  background: linear-gradient(#B8BEC2, #8E959A); opacity: .22; }
.charcoal.section::before, .black.section::before { background: linear-gradient(#3A3A3A, #262626); opacity: .5; }
/* faint running-bond plank pattern behind every section (tools: assets/img/tex-planks-*.svg).
   Fades in from the top and is fully gone before the background ridgelines start (their box is the bottom min(42%, 340px)), and drops to a third behind the centre reading column so text stays clean */
.section::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: url("../img/tex-planks-light.svg") center top / 240px 56px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 calc(100% - min(42%, 340px) - 180px), transparent calc(100% - min(42%, 340px))), linear-gradient(90deg, #000 0, rgb(0 0 0 / .3) 24%, rgb(0 0 0 / .3) 76%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 calc(100% - min(42%, 340px) - 180px), transparent calc(100% - min(42%, 340px))), linear-gradient(90deg, #000 0, rgb(0 0 0 / .3) 24%, rgb(0 0 0 / .3) 76%, #000 100%);
  mask-composite: intersect; }
.charcoal.section::after, .black.section::after { background-image: url("../img/tex-planks-dark.svg"); }
#contact::before { content: none; }  /* Contact is short and centered, ridges would sit behind the buttons; a plain hairline hands over to the footer */
/* no ridges in Contact, so the planks run all the way down to the footer line instead of fading out early */
#contact::after {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 100%), linear-gradient(90deg, #000 0, rgb(0 0 0 / .3) 24%, rgb(0 0 0 / .3) 76%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 100%), linear-gradient(90deg, #000 0, rgb(0 0 0 / .3) 24%, rgb(0 0 0 / .3) 76%, #000 100%); }
.head { max-width: 640px; margin-bottom: var(--s6); }
.head p { color: var(--muted); }
.black .head p, .charcoal .head p { color: var(--silver); }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: var(--radius); background: var(--orange); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .15s ease-out; }
.btn:hover { background: var(--orange-hover); }
.btn:active { transform: translateY(1px); }
.btn .i { width: 20px; height: 20px; flex: none; }
.btn--lg { min-height: 56px; padding: 14px 28px; font-size: 1.0625rem; }
.btn--light { background: var(--white); color: var(--black); }
.btn--light:hover { background: #DDE0E2; }
.btn--ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px var(--silver); }
.btn--ghost:hover { background: rgba(245, 245, 242, .06); box-shadow: inset 0 0 0 1px var(--white); }
.link { color: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s4); }

/* Header */
.nav { position: sticky; top: 0; z-index: 20; background: var(--black); color: var(--white); }
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); height: 72px; }
.nav__brand { display: block; line-height: 0; }
.nav__brand img { height: 70px; width: auto; }
.nav__menu ul { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.nav__menu a { color: var(--white); text-decoration: none; font-weight: 500; font-size: 1rem; padding: 10px 0; }
.nav__menu a:hover, .nav__menu a[aria-current] { color: var(--white); box-shadow: inset 0 -3px 0 var(--orange); }
.nav__menu-foot, .nav__chev { display: none; }
.nav__end { display: flex; align-items: center; gap: var(--s3); }
/* header phone: a plain number like a contractor's truck door, not a second hero button */
/* pill call button, matched to the owner's reference header; white bold label by request (white on this orange is about 2.9:1) */
.nav__call { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--orange); color: #fff; text-decoration: none; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color .15s ease-out; }
.nav__call .i { width: 20px; height: 20px; flex: none; }
.nav__call:hover { background: var(--orange-hover); }
.nav__call:active { transform: translateY(1px); }
.burger { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-dark); border-radius: var(--radius); background: #1B1B1B; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; transition: border-color .15s ease-out, background-color .15s ease-out; }
.burger span { display: block; flex: none; width: 20px; height: 2px; background: #fff; transition: transform .2s cubic-bezier(.16, 1, .3, 1), opacity .15s ease-out; }
.burger:hover { border-color: var(--silver); }
.burger:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.burger[aria-expanded="true"] { border-color: var(--orange); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.hero-page { padding-block: clamp(48px, 7vw, 96px); }
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s6) var(--s8); align-items: center; }
.hero-page { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100svh - 72px + clamp(48px, 6vw, 90px)); padding-bottom: calc(clamp(48px, 7vw, 96px) + clamp(48px, 6vw, 90px));  /* fills the first screen under the 72px header; the extra divider height pushes the ridges just below the fold, and the matching padding keeps the text centred in what is visible */ display: grid; align-items: center; }
.hero-page .hero { position: relative; z-index: 1; grid-template-columns: minmax(0, 600px); }
/* the machine photo fills the right side and dissolves leftward and downward into the black */
.hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; margin: 0; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 31%), linear-gradient(180deg, #000 70%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 31%), linear-gradient(180deg, #000 70%, transparent 100%); mask-composite: intersect; }
.hero-page .lead { max-width: 46ch; }
/* owner-confirmed trust points under the hero buttons: quiet outlined labels, orange only on the icon */
.badges { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.badges li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid rgb(184 190 194 / .32); border-radius: var(--radius); background: rgb(17 17 17 / .55); color: var(--white); font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.badges .i { width: 16px; height: 16px; flex: none; color: var(--orange); }
.hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
/* keeps the words on dark ground where the fade is only half done */
.hero-page::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, #111 0, #111 34%, rgb(17 17 17 / .7) 44%, rgb(17 17 17 / 0) 58%); }
.hero .lead { color: var(--silver); }

/* Dividers, one system top to bottom.
   Light and dark sections meet at a near ridgeline: the next section's color rises as the front ridge,
   with a back ridge mixed a quarter of the way between the two colors, laid over the foot of the section above
   so its own hazy background ridges read as the far range behind. Black into black uses a quieter back ridge (edge--dark). */
.edge { --h: clamp(48px, 6vw, 90px); position: relative; z-index: 1; display: block; height: var(--h); margin: calc(-1 * var(--h)) 0 -1px; }
.edge svg { display: block; width: 100%; height: 100%; }
.ridge-back { fill: color-mix(in oklab, var(--from), var(--to) 25%); }
.ridge-front { fill: var(--to); }
.edge--flip svg { transform: scaleX(-1); }  /* same ridges mirrored so neighbours don't look copied */
.edge--dark .ridge-back { fill: #222; }  /* black into black: the mix would vanish, so the back ridge is one quiet step lighter */
/* under the hero: black pines against an orange dusk sky that rises out of the hero black, then a clean cut to the white section */

/* Placeholders until his photos arrive */

/* Problem and promise */

/* Services */

/* Home body: forestry mulching leads as a feature with the machine and the before and after, the other six follow */
.feature { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--s6) clamp(32px, 5vw, 64px); align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: var(--s3) clamp(24px, 4vw, 56px) var(--s3) var(--s3); }
.feature__pic { display: block; }
.feature__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 62%; border-radius: var(--radius); }  /* square keeps the card no taller than its text */
.also__icon { display: flex; color: var(--orange); }
.feature__body { align-self: start; padding-top: var(--s2); }  /* heading sits up top, level with the photo, not floating mid card */
.feature h2 { margin: 0 0 var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.feature__desc { color: var(--muted); max-width: 52ch; margin: 0 0 var(--s4); }
.feature__ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.feature__ba h3 { margin: 0 0 6px; }
.feature__ba p { margin: 0; color: var(--muted); font-size: .95rem; }
.also { margin-top: calc(var(--section) * .7); }
.also > h2 { text-align: center; }
.also__grid { --cols: 3; --gap: clamp(24px, 3vw, 40px); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--gap); }
.also__grid > li { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }  /* five services: 3 then 2 centred */
.also__grid li { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.also__icon .i { width: 28px; height: 28px; }
.also__grid h3 { margin: 12px 0 4px; }
.also__grid p { margin: 0; color: var(--muted); }

/* Process and price: his mulching clip loops beside the how-it-works list, cost runs below in two columns */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6) clamp(40px, 6vw, 88px); align-items: center; }
.flow__video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: #1B1B1B; pointer-events: none; }
.flow__steps { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.flow__steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.flow__steps h3 { margin: 0 0 4px; }
.flow__steps p { margin: 0; color: var(--muted); }
.flow__icon { display: flex; color: var(--orange); padding-top: 2px; }
.flow__icon .i { width: 26px; height: 26px; }
.cost { margin-top: var(--s8); border-top: 1px solid var(--line); padding-top: var(--s6); }
.cost > h2 { margin-bottom: var(--s3); text-align: center; }
/* two charcoal panels: pricing on the left, the free estimate (orange top edge) and the button on the right */
.cost__panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); }
.cost__panel { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cost__panel h3 { margin: 0 0 10px; font-size: 1.25rem; }
.cost__panel p { margin: 0; color: var(--muted); }
.cost__panel { border-color: var(--orange); }  /* both cards outlined in orange */
.cost__panel .btn { margin-top: var(--s3); align-self: center; }

/* Work: centred intro, video reel, then one paged photo gallery that opens with the before/after pair */
#work .head { max-width: 880px; margin-inline: auto; text-align: center; }
#work .head h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; margin-bottom: var(--s3); }  /* matches the About heading */
#work .head p { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.6; }
.tile--wide { grid-column: span 2; }
.tile--wide { position: relative; }
/* merged tiles carry their own aspect-ratio inline (tools/portfolio.py), so a row of only pairs has height before the photo loads */
.tile--ba { position: relative; }
/* four-square tile: one job in a 2x2 grid with a tag on each photo */
.tile--quad { grid-row: span 2; position: relative; }
.tile__tag { position: absolute; padding: 4px 10px; border-radius: 4px; font-size: .8125rem; font-weight: 600; pointer-events: none; z-index: 1; }
.tile__tag--before { background: var(--black); color: var(--white); }
.tile__tag--after { background: #fff; color: var(--black); }
.tile__tag--during { background: var(--orange); color: #fff; }
/* six-photo tile: a 3x2 image across the full width on desktop and tablet, a 2x3 image on phones; tags follow the grid */
.tile--six { grid-column: 1 / -1; grid-row: span 2; position: relative; }  /* a whole page on its own */
.tile.tile--six picture { display: block; height: 100%; }
.tile.tile--six img { aspect-ratio: var(--ar-d); }
.tile--six .tile__tag { left: calc(var(--dc) * 100% / var(--cols-d) + 10px); top: calc(var(--dr) * 100% / var(--rows-d) + 10px); }
.tile--trio { grid-column: 1 / -1; position: relative; }  /* a whole row */
.tile--trio .tile__tag { top: 10px; left: calc(var(--dc) * 100% / 3 + 10px); }
.tile__tag--q1 { top: 10px; left: 10px; }
.tile__tag--q2 { top: 10px; left: calc(50% + 10px); }
.tile__tag--q3 { top: calc(50% + 10px); left: 10px; }
.tile__tag--q4 { top: calc(50% + 10px); left: calc(50% + 10px); }
.tile--ba::before, .tile--ba::after { position: absolute; top: 10px; padding: 4px 10px; border-radius: 4px; font-size: .8125rem; font-weight: 600; pointer-events: none; z-index: 1; }
.tile--ba::before { content: attr(data-l); left: 10px; background: var(--black); color: var(--white); }
.tile--ba::after { content: attr(data-r); left: calc(50% + 10px); background: #fff; color: var(--black); }
.work-group + .work-group { margin-top: var(--s8); }
.work-group h3 { margin-bottom: var(--s3); }
.reel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.clip { margin: 0; }
.clip video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--black); border-radius: var(--radius); }
.clip figcaption { font-size: .9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin-top: 10px; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.tile { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.tile img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.tile[data-full] { cursor: zoom-in; }
.tile[data-full]:hover img { transform: scale(1.03); }
.tile:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.tile[hidden] { display: none; }
.gallery[data-paged] { scroll-margin-top: 96px; }
.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: var(--s4); }
.pager[hidden] { display: none; }
.pager button { min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: 500 1rem/1 var(--body); font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .15s ease-out, background-color .15s ease-out; }
.pager button:hover { border-color: var(--ink); }
.pager button[aria-current] { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 700; }
.pager button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.pager button:disabled { opacity: .35; cursor: default; }
.pager button:disabled:hover { border-color: var(--line); }
.pager__arrow { display: inline-flex; align-items: center; justify-content: center; }
.pager__arrow svg { width: 20px; height: 20px; }
.pager__prev { order: -1; }
.pager__next { order: 50; }
.pager__status { order: 99; flex-basis: 100%; margin: 4px 0 0; text-align: center; color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
/* Full-screen photo viewer: the photo fills everything above the bar; click or Zoom to magnify, then move to pan */
.viewer { border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: var(--black); color: var(--white); }
.viewer[open] { display: flex; flex-direction: column; }
.viewer__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 56px 12px 0; }
.viewer::backdrop { background: rgba(17, 17, 17, .92); }
.viewer__stage img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; transform-origin: var(--ox, 50%) var(--oy, 50%); transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.viewer.is-zoomed .viewer__stage { touch-action: none; }
.viewer.is-zoomed .viewer__stage img { transform: scale(2.5); cursor: zoom-out; }
.viewer .viewer__zoom { font-size: .9375rem; font-weight: 600; padding: 0 14px; }
.viewer .viewer__zoom[aria-pressed="true"] { background: var(--white); color: var(--black); }
.viewer__bar { display: flex; justify-content: center; align-items: center; gap: var(--s3); padding: 12px; }
.viewer button { background: none; border: 1px solid var(--line-dark); color: var(--white); min-width: 44px; min-height: 44px; font-size: 1.25rem; cursor: pointer; border-radius: var(--radius); }
.viewer__close { position: absolute; top: 8px; right: 8px; z-index: 2; background: var(--black) !important; }

/* About */
.about { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s6) var(--s6); align-items: center; }
.about__text { text-align: center; }
.about__text h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; margin-bottom: var(--s3); }
.about__text p { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.6; }
.about__text p { margin-inline: auto; }
.radius { margin: 0; }
.radius svg { display: block; width: 100%; height: auto; }
.radius text { font-family: var(--body); }
.radius__area { fill: rgba(255, 101, 0, .09); stroke: var(--orange); stroke-width: 2.5; stroke-dasharray: 9 9; stroke-linecap: round; }
.radius__spoke { fill: none; stroke: rgba(245, 245, 242, .35); stroke-width: 1.5; stroke-dasharray: 3 6; }
.radius__spoke--far { stroke: var(--orange); stroke-width: 2.5; stroke-dasharray: 7 7; stroke-linecap: round; }
.radius__dot { fill: #E5E7E8; }
.radius__dot--far, .radius__home-dot { fill: var(--orange); }
.radius__home { fill: var(--white); font-weight: 700; font-size: 19px; letter-spacing: .02em; }
.radius__far { fill: var(--white); font-weight: 700; font-size: 16px; letter-spacing: .02em; }
.radius__town { fill: #E5E7E8; font-weight: 600; font-size: 15px; }
.radius__mi { fill: var(--orange); font-weight: 700; font-size: 13px; }
.about__text p { max-width: 58ch; }

/* Contact */
.contact { text-align: center; }
.contact.section { padding-block: clamp(56px, 6vw, 88px); }
.contact .lead { margin-inline: auto; color: var(--silver); }
.contact__logo img { width: min(60vw, 240px); margin: 0 auto var(--s4); }
.contact__phone { font-size: clamp(2.5rem, 8vw, 5.25rem); line-height: 1; letter-spacing: -0.03em; margin-bottom: var(--s2); }
.contact__phone a { color: var(--white); text-decoration: none; }
.contact__phone a:hover { color: var(--orange); }
.contact .actions { justify-content: center; }
.contact .btn--lg { min-width: 180px; }
.contact__meta { margin: var(--s6) auto 0; font-size: .9375rem; max-width: 60ch; }
.contact__email { margin: var(--s3) 0 0; color: var(--silver); }
.contact__email a { color: var(--white); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.contact__email a:hover { color: var(--orange); }

/* Footer */
.foot { background: var(--black); color: var(--silver); font-size: .875rem; line-height: 1.6; border-top: 1px solid var(--line-dark); }
.foot a { color: var(--white); text-decoration: none; transition: color .15s ease-out; }
.foot a:hover { color: var(--orange); }
.foot ul { list-style: none; margin: 0; padding: 0; }
/* three columns like the owner's reference: brand and blurb, quick links, contact */
.foot__top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); padding-block: var(--s8) var(--s6); border-bottom: 1px solid var(--line-dark); }
.foot__brand img { display: block; width: 104px; height: auto; margin-bottom: var(--s2); }
.foot__tag { color: var(--orange); font-weight: 600; font-size: .9375rem; margin: 0 0 8px; }
.foot__brand p:last-child { max-width: 38ch; margin: 0; }
.foot__label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--silver); margin: 0 0 var(--s2); }
.foot__col li + li { margin-top: 2px; }
.foot__col a { display: inline-block; padding: 4px 0; font-weight: 500; font-size: .9375rem; }  /* 29px tall tap targets, same visual rhythm as before */
.areas { padding-block: var(--s6); border-bottom: 1px solid var(--line-dark); text-align: center; }
.areas__intro { max-width: 60ch; margin: 0 auto var(--s3); }
.areas__more summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-dark); border-radius: var(--radius); color: var(--white); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; list-style: none; transition: border-color .15s ease-out; }
.areas__more summary::-webkit-details-marker { display: none; }
.areas__more summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: translateY(-2px) rotate(45deg); transition: transform .2s ease-out; }
.areas__more[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.areas__more summary:hover { border-color: var(--silver); }
.areas__more summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.areas__cols { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s4) var(--s6); margin-top: var(--s4); text-align: left; }  /* the opened town lists stay left-aligned so they scan easily */
.areas h3 { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin-bottom: var(--s1); }
.areas__counties { margin: 0 0 var(--s2); font-size: .8125rem; color: rgb(184 190 194 / .8); }
.areas__list { columns: 2; column-gap: var(--s4); line-height: 1.9; }
.areas__list--tn { columns: 3; }
.foot__line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s4); padding-block: var(--s3); font-size: .8125rem; }


@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tile img { transition: none; } .flow__video { display: none; } .nav__menu, .nav__menu li { transition: none !important; } .viewer__stage img { transition: none; } .tile[data-full]:hover img { transform: none; } }

@media (max-width: 900px) {
  .flow h2 { text-align: center; }  /* stacked under the video, so the heading centres like the other section titles */
  .hero, .about, .cost__panels, .flow, .feature, .feature__ba { grid-template-columns: 1fr; }
  .feature { padding: var(--s2); }
  .feature__img { aspect-ratio: 4 / 3; }
  .also__grid { --cols: 2; }
  .hero-page { display: block; min-height: 0; padding-top: 0; }
  .hero-page::after { content: none; }
  .hero__media { position: relative; inset: auto; width: 100%; height: 80vw; -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent); mask-image: linear-gradient(180deg, #000 52%, transparent); -webkit-mask-composite: source-over; mask-composite: add; }
  .hero-page .hero { margin-top: -16vw; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .nav__bar { height: 64px; }
  .nav__brand img { height: 62px; }
  /* full-height menu sheet under the header: big ruled links, call/text buttons pinned at the bottom */
  .nav__menu { position: fixed; top: 64px; left: 0; right: 0; height: calc(100dvh - 64px); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    background: var(--black); padding: var(--s2) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-dark);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .22s ease-out, transform .22s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .22s; }
  .nav__menu.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .22s ease-out, transform .3s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
  .nav__menu ul { flex-direction: column; gap: 0; }
  .nav__menu li { opacity: 0; transform: translateY(6px); transition: opacity .25s ease-out, transform .35s cubic-bezier(.16, 1, .3, 1); }
  .nav__menu.is-open li { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i) * 45ms); }
  .nav__menu a { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line-dark); font-size: 1.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.1; }
  .nav__menu a:hover, .nav__menu a[aria-current] { box-shadow: none; color: var(--white); }
  .nav__menu a[aria-current] { color: var(--orange); }
  .nav__chev { display: block; width: 24px; height: 24px; color: var(--silver); flex: none; }
  .nav__menu a[aria-current] .nav__chev { color: var(--orange); }
  .nav__menu-foot { display: block; margin-top: auto; padding-top: var(--s4); }
  .nav__menu-foot { text-align: center; }
  .nav__menu-foot p { margin: 0 0 4px; color: var(--silver); font-size: .9375rem; }
  .nav__menu .nav__menu-mail { display: block; border: 0; padding: 4px 0 0; font-size: .9375rem; font-weight: 500; text-transform: none; letter-spacing: 0; text-align: center; color: var(--silver); }
  /* phones keep a square call button beside the menu button, number hidden (the link keeps its aria-label) */
  .nav__end { gap: 10px; }
  .nav__end .nav__call { width: 44px; height: 44px; min-height: 0; padding: 0; justify-content: center; border-radius: var(--radius); }
  .nav__call-num { display: none; }
  .burger { display: flex; }
  .contact .actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 560px) {
  .tile--six { grid-row: span 3; }
  .tile.tile--six img { aspect-ratio: var(--ar-m); }
  .tile--six .tile__tag { left: calc(var(--mc) * 100% / var(--cols-m) + 10px); top: calc(var(--mr) * 100% / var(--rows-m) + 10px); }
  .clip figcaption { text-align: center; }
  .feature__img { aspect-ratio: 1 / 1; object-position: 50% 50%; }  /* phones load a square frame from his clip that shows the whole skid steer */
  /* footer on phones: centred brand, links in two columns, each group ruled off */
  .foot__top { gap: 0; padding-block: var(--s6) 0; border-bottom: 0; text-align: center; }
  .foot__brand img { margin-inline: auto; width: 96px; }
  .foot__brand p:last-child { margin-inline: auto; }
  .foot__brand, .foot__col { padding-bottom: var(--s4); }
  .foot__col { padding-top: var(--s4); border-top: 1px solid var(--line-dark); }
  .foot__col ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; }
  .foot__col li + li { margin-top: 0; }
  .foot__col:last-child ul { flex-direction: column; align-items: center; }
  .foot__col a { padding: 8px 0; }
  .areas { border-top: 1px solid var(--line-dark); }
  .foot__line { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
  .work-group > h3 { text-align: center; }
  .feature__body { text-align: center; }
  .feature__body p { margin-inline: auto; }
  /* hero badges share one row on phones */
  /* phones: icons dropped so the three badges keep bigger text on one row (12px at 375px wide, a touch smaller on narrower phones) */
  .badges { flex-wrap: wrap; gap: 6px; }
  .badges li { flex: 1 1 auto; justify-content: center; padding: 12px 6px; font-size: clamp(11px, 3.2vw, 12px); letter-spacing: 0; white-space: nowrap; }
  .badges .i { display: none; }
  /* phones: arrows on the ends, "Page 2 of 7" between them, numbers hidden so one thumb can step through */
  .pager { flex-wrap: nowrap; align-items: center; justify-content: space-between; }
  .pager__num { display: none; }
  .pager__status { order: 25; flex: 1; flex-basis: auto; margin: 0; font-size: 1rem; font-weight: 600; color: var(--ink); }
  .pager__arrow { width: 56px; height: 48px; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
  .also__grid { --cols: 1; }
  /* phones: centred, with the icon sitting just before the title on one line */
  .also__grid li { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 10px; text-align: center; }
  .also__grid h3 { margin: 0; }
  .also__icon .i { width: 22px; height: 22px; }
  .also__grid p { flex-basis: 100%; margin-top: 6px; }
  .areas__cols, .foot__top { grid-template-columns: 1fr; }
  .areas__list--tn { columns: 2; }
  .reel { grid-template-columns: 1fr; }
  .hero .actions .btn { flex: 1 1 100%; }
}

/* page is frozen while the phone menu is open (body pinned in place, scroll position restored on close) */
html.menu-open { overflow: hidden; }
html.menu-open body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
html.menu-open .nav { position: fixed; top: 0; left: 0; right: 0; }

/* page load: one orchestrated entrance. The hero photo settles in, then the headline, text, buttons and badges rise in turn.
   fill: backwards keeps each piece hidden only until its own start, so nothing waits on JS */
@keyframes hero-photo-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes hero-rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.nav { animation: fade-in .5s cubic-bezier(.23, 1, .32, 1) backwards; }
.hero__media { animation: hero-photo-in 1.1s cubic-bezier(.23, 1, .32, 1) backwards; }
.hero__text > * { animation: hero-rise-in .7s cubic-bezier(.23, 1, .32, 1) backwards; }
.hero__text > :nth-child(1) { animation-delay: .15s; }
.hero__text > :nth-child(2) { animation-delay: .25s; }
.hero__text > :nth-child(3) { animation-delay: .35s; }
.hero__text > :nth-child(4) { animation-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .hero__media, .hero__text > * { animation: fade-in .4s ease-out backwards; }
}