/* Reskin A — Whitehurst Land Services.
   Cream field, deep-green hero, condensed display caps, hairline rules.
   Four tokens differ from the design file; each is noted where it is defined. */

:root {
  --cream: #efe7da;
  --tint: #e4daca;
  --paper: #f5efe4;
  --input: #fffdf9;
  --green: #1f3a2b;
  --ink: #17231b;
  --gold: #c0a278;

  /* Design used #A8875A for gold text on cream — 2.73:1, a fail. This is the
     most chromatic value that clears 4.5:1 on both light fields (4.93 / 5.55). */
  --gold-ink: #6f5730;
  /* Design used #5A6A60 — 4.14:1 on the tinted field. */
  --muted: #55645b;
  /* Design used #A99C86 for input and chip borders — 2.65:1 on the input fill,
     under the 3:1 that a control's own boundary needs. */
  --field: #867b6a;
  /* Design used #6C8272 for the ghost button — 2.99:1, just under. */
  --ghost: #718774;

  --body-ink: #46564c;
  --lede-ink: #4a5a50;
  --about-ink: #33453a;
  --haze: #d8cdb9;
  --quote-ink: #e6dcca;
  --sage: #9dafa1;
  --closer-lede: #c7bfaf;
  --rule: #c9bca6;
  --rule-dark: #3a5245;

  /* The header is sticky, so anchor targets have to clear it. Both the logo
     height and that clearance derive from these, which is the only way they
     stay in step when the logo scales. */
  --logo-h: clamp(44px, 6vw, 72px);
  --header-h: calc(var(--logo-h) + 37px);

  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --sp: clamp(56px, 7vw, 96px);

  --display: 'Big Shoulders Display', 'Arial Narrow', system-ui, sans-serif;
  --text: Barlow, system-ui, -apple-system, sans-serif;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 17px/1.6 var(--text);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; font-family: var(--display); text-wrap: balance; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--green); text-decoration: none; }

/* `display: contents` lets <img> take the grid slot its <picture> occupies.
   Without the second rule each <source> becomes a slot of its own. */
picture { display: contents; }
picture > source { display: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- focus ----------------------------------------------------------------
   Green reads on the two light fields (10.1:1); on green or ink it would
   disappear, so dark surfaces switch to gold (5.1:1 / 6.7:1). */
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
[data-surface='dark'] :focus-visible,
.lightbox :focus-visible { outline-color: var(--gold); }

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 80;
  transform: translateY(-200%);
  background: var(--green); color: var(--cream);
  font: 700 14px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  padding: 14px 18px; text-decoration: none;
}
.skip:focus-visible { transform: none; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* Without this a jump lands the section under the sticky header — on the
   shorter sections that hid the heading entirely. */
:is(section[id], #main) { scroll-margin-top: calc(var(--header-h) + 12px); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.section { padding-block: var(--sp); }
.section--tint { background: var(--tint); border-block: 1px solid var(--rule); }
.section--dark { background: var(--green); color: var(--cream); }

.accent { color: var(--gold); }

.eyebrow {
  font: 700 13px/1.3 var(--display);
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink);
}
.eyebrow--rule {
  color: var(--gold); display: flex; align-items: center; gap: 14px;
  letter-spacing: .22em; font-size: 14px;
}
.eyebrow--rule::before {
  content: ''; width: 56px; height: 2px; background: var(--gold); flex: none;
}

/* --- buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 30px;
  border: 1px solid transparent;
  font: 800 22px/1 var(--display);
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: #d8bc93; }
.btn--ghost { border-color: var(--ghost); color: var(--cream); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn--solid { background: var(--green); color: var(--cream); }
.btn--solid:hover { background: var(--ink); }
.btn--lg { min-height: 62px; font-size: 24px; }

/* --- header ---------------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream); border-bottom: 1px solid var(--green);
}
.topbar__in {
  max-width: var(--wrap); margin-inline: auto;
  padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.topbar__brand { display: block; flex: none; }
.topbar__logo { width: auto; height: var(--logo-h); }
.topbar__nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.topbar__link {
  font: 700 21px/1 var(--display);
  letter-spacing: .1em; text-transform: uppercase; color: var(--green);
  display: inline-flex; align-items: center; min-height: 40px;
}
.topbar__link:hover { color: var(--gold-ink); }
.topbar__phone {
  background: var(--green); color: var(--cream);
  font: 700 22px/1 var(--display); letter-spacing: .06em;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
}
.topbar__phone:hover { background: var(--ink); }

/* --- hero ------------------------------------------------------------------ */

.hero {
  background: var(--green); color: var(--cream);
  padding-block: clamp(56px, 7vw, 104px) clamp(48px, 6vw, 88px);
  /* The machine deliberately overhangs its column; clip here so the page
     itself never scrolls sideways. */
  overflow: hidden;
}
.hero__grid { display: grid; gap: clamp(24px, 4vw, 40px); align-items: center; }
.hero__panel { display: grid; gap: clamp(20px, 2.6vw, 34px); position: relative; z-index: 2; }
.hero__title {
  font-weight: 900; text-transform: uppercase;
  /* The design breaks this into three lines explicitly, and its 132px ceiling
     does not fit them: the longest line ("Ground flat.") runs 4.92px of width
     per px of type, so 132px needs 649px against a 530px column and every line
     wraps. The ceiling comes down rather than the column changing, which keeps
     the design's even split. 104px leaves ~18px of slack at 1280. */
  font-size: clamp(46px, 8.4vw, 104px); line-height: .9; letter-spacing: -.01em;
}
.hero__lede {
  max-width: 52ch; font-size: clamp(18px, 2vw, 21px); line-height: 1.55;
  color: var(--haze); text-wrap: pretty;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__machine { position: relative; z-index: 1; }
.hero__machine img { width: 114%; max-width: none; justify-self: end; }

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--rule-dark); margin-top: clamp(24px, 3vw, 40px);
}
/* Padded both sides so the text clears its divider, except at the two ends,
   which stay flush with the container edge. Collapsing these into one rule is
   what pushed cells 2-4 up against their rules. */
.stat { padding: 22px 24px 0; border-right: 1px solid var(--rule-dark); }
.stat:first-child { padding-left: 0; }
.stat:last-child { padding-right: 0; border-right: 0; }
.stat__value { font: 900 38px/1 var(--display); }
.stat__label {
  font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--sage);
}

/* --- photo band ------------------------------------------------------------ */

.band { position: relative; }
/* The band is ~2.4:1, so a portrait photo shows only about a third of its
   height. Which third is content's business, not the stylesheet's. */
.band__img {
  width: 100%; height: min(62vh, 560px);
  object-fit: cover; object-position: var(--band-focus, 50% 62%);
}
.band__caption {
  position: absolute; left: 0; bottom: 0;
  background: var(--green); color: var(--gold);
  font: 800 15px/1.3 var(--display);
  letter-spacing: .16em; text-transform: uppercase; padding: 14px 26px;
}

/* --- section heads --------------------------------------------------------- */

.head {
  display: flex; flex-wrap: wrap; gap: 24px;
  justify-content: space-between; align-items: end;
  border-bottom: 2px solid var(--green); padding-bottom: 20px;
}
.head--dark { border-bottom-color: var(--rule-dark); align-items: baseline; }
.head__title {
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(38px, 5vw, 68px); line-height: .95; color: var(--green);
}
.section--dark .head__title { color: var(--cream); }
.head__lede { max-width: 34ch; font-size: 17px; color: var(--lede-ink); }
.stars { color: var(--gold); letter-spacing: .14em; font-size: 34px; line-height: 1; }

/* --- services -------------------------------------------------------------- */

.svcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 56px; }
.svc {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px;
  padding: 26px 0; border-bottom: 1px solid var(--rule);
}
.svc:hover { border-bottom-color: var(--green); }
.svc__n {
  font: 700 18px/1 var(--display); letter-spacing: .08em;
  color: var(--gold-ink); padding-top: 6px;
}
.svc__title {
  font-weight: 800; text-transform: uppercase; font-size: 28px; line-height: 1.05;
  color: var(--green); margin-bottom: 6px;
}
.svc__desc { font-size: 16.5px; line-height: 1.55; color: var(--body-ink); text-wrap: pretty; }

/* --- about ----------------------------------------------------------------- */

.about { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: start; }
.about__portrait { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 22%; border: 1px solid var(--green); }
.about__title {
  margin: 10px 0 24px; font-weight: 900; text-transform: uppercase;
  font-size: clamp(34px, 4.4vw, 58px); line-height: .98; color: var(--green);
}
.about__role {
  display: block; color: var(--lede-ink);
  font-size: .52em; letter-spacing: .1em;
}
.about__p { margin-top: 18px; font-size: 18px; line-height: 1.62; color: var(--about-ink); max-width: 56ch; }
.about__p--lead { font-weight: 600; color: var(--green); }

/* --- work ------------------------------------------------------------------ */

.jobs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px 32px; margin-top: 40px;
}
.job { margin: 0; }
.job__label {
  font: 800 15px/1.3 var(--display);
  letter-spacing: .12em; text-transform: uppercase; color: var(--green);
  border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 12px;
}
.job__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shot {
  position: relative; display: block; margin: 0; padding: 0;
  border: 0; background: none; cursor: zoom-in;
  aspect-ratio: 4/3; overflow: hidden;
}
.shot__img { width: 100%; height: 100%; object-fit: cover; }
/* Inset, because the thumb fills its box — backed by a white ring so the
   indicator survives whatever the photograph happens to be. */
.shot:focus-visible { outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--cream); }
.badge {
  position: absolute; left: 0; bottom: 0;
  font: 400 11px/1 var(--text); letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 8px;
}
.badge--before { background: var(--ink); color: var(--cream); }
.badge--after { background: var(--gold); color: var(--ink); }

/* --- testimonials ---------------------------------------------------------- */

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; margin-top: 36px; }
/* Four across, which is what the design intends but does not achieve: its
   minmax(260px) floor needs 1124px for four columns and the container gives
   1100, missing it by 24px and collapsing to 3 + 1 — the last quote stranded
   beside two empty columns. Asking for four directly fits, down to the width
   where the cards stop being readable; below that they pair rather than strand,
   and phones stack. Other counts keep the auto-fit above. */
@media (min-width: 961px) {
  .quotes:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 960px) {
  .quotes:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.quote { margin: 0; border-left: 2px solid var(--gold); padding: 2px 0 2px 20px; display: grid; gap: 14px; }
.quote__body { font-size: 17px; line-height: 1.6; color: var(--quote-ink); text-wrap: pretty; }
.quote__by { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); }
.quote__name {
  display: block; color: var(--gold);
  font: 800 17px/1.3 var(--display); letter-spacing: .08em;
}

/* --- estimate -------------------------------------------------------------- */

.estimate { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(32px, 4vw, 56px); align-items: start; }
.estimate__title {
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(36px, 4.6vw, 62px); line-height: .96; color: var(--green);
  margin-bottom: 14px;
}
.estimate__lede { font-size: 18px; line-height: 1.6; color: var(--body-ink); max-width: 44ch; margin-bottom: 28px; }

.rate { border: 1px solid var(--green); background: var(--tint); }
.rate__head {
  background: var(--green); color: var(--gold);
  font: 800 15px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase;
  padding: 12px 20px;
}
.rate__body { padding: 20px; display: grid; gap: 12px; }
.rate__line {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--rule); padding-bottom: 10px;
}
.rate__line:last-child { border-bottom: 0; padding-bottom: 0; }
.rate__line dt { font-size: 16px; color: var(--body-ink); }
.rate__line dd { font: 900 32px/1 var(--display); color: var(--green); }
.rate__note { font-size: 15px; line-height: 1.55; color: var(--muted); }

.form { display: grid; gap: 18px; border: 1px solid var(--green); padding: clamp(20px, 3vw, 28px); background: var(--paper); }
.field { display: grid; gap: 7px; }
.field__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; }
.field__label {
  font: 800 14px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--green);
}
.field__req { color: var(--gold-ink); }
.field__input {
  width: 100%; min-height: 52px; padding: 13px 14px;
  border: 1px solid var(--field); background: var(--input); color: var(--ink);
  font: 400 16px/1.5 var(--text);
}
.field__input:hover { border-color: var(--green); }
.field__input--area { resize: vertical; min-height: 132px; }
/* Honeypot: reachable by a bot, invisible to everyone else. */
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { min-height: 65px; }
.form__actions { display: grid; }
.form__submit { width: 100%; }
.form__status { min-height: 1.5em; font: 500 15px/1.5 var(--text); color: #0f6b3f; }
.form__status--error { color: #a4262c; }
.form__alt { font-size: 15px; color: var(--muted); }
.form__alt a { font-weight: 600; border-bottom: 1px solid var(--gold-ink); }

/* --- service area ---------------------------------------------------------- */

.area { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(32px, 4vw, 56px); }
.area__title { font-weight: 900; text-transform: uppercase; font-size: clamp(32px, 4vw, 52px); line-height: 1; color: var(--green); }
.area__lede { margin: 12px 0 22px; font-size: 17px; color: var(--body-ink); max-width: 44ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--field); background: var(--cream);
  padding: 0 12px; min-height: 34px; display: inline-flex; align-items: center;
  font-size: 14px; letter-spacing: .04em; color: var(--about-ink);
}
.counties { margin-top: 20px; font-size: 15px; color: var(--muted); max-width: 56ch; }

.facts { display: grid; gap: 28px; align-content: start; }
.facts__title {
  font: 800 17px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--green); border-bottom: 1px solid var(--field); padding-bottom: 8px; margin-bottom: 12px;
}
.hours { display: grid; gap: 8px; }
.hours__row { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; color: var(--about-ink); }
.hours__day { letter-spacing: .1em; text-transform: uppercase; font-size: 14px; color: var(--muted); }
.hours__value--closed { font-weight: 600; }
.facts__address { font-style: normal; font-size: 16px; line-height: 1.6; color: var(--about-ink); }

/* --- footer ---------------------------------------------------------------- */

.footer { background: var(--cream); padding: 36px 0; border-top: 1px solid var(--rule); }
.footer__in {
  display: flex; flex-wrap: wrap; gap: 18px;
  justify-content: space-between; align-items: center;
  font-size: 14px; color: var(--muted);
}
.credit { display: flex; align-items: center; gap: 10px; }
.credit__link { display: inline-flex; align-items: center; min-height: 30px; }
.credit__logo { width: 108px; height: 30px; display: block; color: var(--green); }

/* --- lightbox -------------------------------------------------------------- */

.lightbox {
  border: 0; padding: 0; width: 100%; height: 100%;
  max-width: 100vw; max-height: 100dvh;
  background: rgb(23 35 27 / 96%); display: none; place-items: center;
}
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: rgb(23 35 27 / 88%); }
/* dialog.close() does not reliably fire a close event here, so the scroll lock
   is expressed in CSS off the [open] attribute rather than in JS. */
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox__img { max-width: min(94vw, 1200px); max-height: 86dvh; width: auto; height: auto; }
.lightbox__close, .lightbox__nav {
  position: absolute; display: grid; place-items: center;
  min-width: 48px; min-height: 48px; padding: 0;
  border: 1px solid rgb(239 231 218 / 35%); background: rgb(23 35 27 / 70%);
  color: var(--cream); font: 400 26px/1 var(--display); cursor: pointer;
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--green); }
.lightbox__close { top: 16px; right: 16px; font-size: 30px; }
.lightbox__nav--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 16px; top: 50%; transform: translateY(-50%); }

/* --- responsive ------------------------------------------------------------ */

@media (min-width: 861px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .about { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
}

@media (max-width: 860px) {
  /* Stacked, the machine sits under the headline rather than over it: the h1 is
     both the point of the section and the largest-contentful paint, and pushing
     it below a full-width image delays both. */
  .hero__machine img { width: 100%; }
}

@media (max-width: 760px) {
  .topbar__link { display: none; }
  /* Stacked, every cell is its own row, so all of them sit flush left. */
  .stat { border-right: 0; padding-inline: 0; }
  .head { align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}