/* Landing Lawn Company — site styles
   Rustic: kraft paper, field green, harvest yellow. Square corners, printed-ink details. */
@font-face { font-family: "Bevan"; src: url("fonts/bevan.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto Slab"; src: url("fonts/roboto-slab.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("fonts/libre-franklin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #F3EAD3;
  --paper-2: #E9DCBC;
  --card: #FBF6E9;
  --green: #25422B;
  --green-2: #2B4B31;
  --green-3: #3E6A3F;
  --moss: #9DB36B;
  --moss-2: #AFC37E;
  --gold: #E0AE3C;
  --gold-2: #C9951F;
  --ink: #1D2A1E;
  --cream: #F6EFDD;
  --muted: #4F5A48;
  --line: #C9B98F;
  --shadow-sm: 0 1px 2px rgba(29, 42, 30, .07), 0 3px 10px -4px rgba(29, 42, 30, .16);
  --shadow: 0 4px 14px -4px rgba(29, 42, 30, .22), 0 2px 6px -2px rgba(29, 42, 30, .12);
  --shadow-lg: 0 18px 40px -18px rgba(29, 42, 30, .32), 0 6px 16px -8px rgba(29, 42, 30, .18);
  --error: #9E2F1A;
  --g: clamp(16px, 4.2vw, 40px);
  --f-display: "Bevan", "Rockwell", Georgia, serif;
  --f-slab: "Roboto Slab", "Rockwell", Georgia, serif;
  --f-body: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --grain: url("img/paper.svg");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--grain) var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
picture { display: contents; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--cream); padding: 10px 14px; text-decoration: none; font-weight: 700; }
.skip:focus { top: 12px; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.wrap { width: min(100% - 2 * var(--g), 1180px); margin-inline: auto; }

/* ---------- type ---------- */
h1, h2, .qc-title { font-family: var(--f-display); font-weight: 400; letter-spacing: -.005em; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 1.04; color: var(--cream); }
h1 .hl { color: var(--gold); }
h2 { font-size: clamp(2rem, 4.2vw, 3.15rem); line-height: 1.1; color: var(--green); }
h3 { font: 700 1.25rem/1.25 var(--f-slab); color: var(--ink); }
.kicker {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  font: 700 .8125rem/1 var(--f-slab); letter-spacing: .18em; text-transform: uppercase; color: var(--green-3);
}
.kicker::before { content: ""; width: 30px; height: 2px; background: currentColor; flex: none; }
.kicker-gold { color: var(--gold); }
.lede { font-size: clamp(1.125rem, 1.7vw, 1.25rem); line-height: 1.55; color: #DCD5BD; max-width: 33em; }
.section-sub { color: var(--muted); font-size: 1.125rem; max-width: 36em; margin-top: 16px; }

/* ---------- buttons: no boxes, a line grows in on hover ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 700 1rem/1.1 var(--f-slab); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  padding: .3em .05em; margin-block: .1em; border: 0; border-radius: 0;
  background: none; color: inherit; box-shadow: none;
  position: relative; transition: transform .18s ease;
}
.btn::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px; background: var(--gold);
  transition: right .3s cubic-bezier(.2, .7, .3, 1);
}
.btn:hover, .btn:focus-visible { transform: translateY(-1px) scale(1.035); }
.btn:hover::after, .btn:focus-visible::after { right: 0; }
.btn:active { transform: scale(1); }
.btn .ic { stroke-width: 2.4; transition: transform .18s ease; }
.btn:hover .ic { transform: translateX(3px); }
.btn-quiet .ic { transform: none !important; }
.btn-lg { font-size: 1.0625rem; }
.btn-sm { font-size: .9375rem; }
.btn-block { width: 100%; justify-content: center; }
.final-cta .btn::after { background: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--grain) var(--paper);
  border-bottom: 2px solid var(--ink);
}
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.brand { flex: none; display: block; }
.brand img { height: 48px; width: auto; }
.nav { display: none; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* phone as a small tile: cream card, ink border and a hard shadow, like the quote card */
.header-phone {
  display: none; align-items: center; gap: 10px; padding: 7px 14px 7px 11px;
  background: var(--card); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none; color: var(--green); line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease;
}
.header-phone .ic { width: 20px; height: 20px; }
.hp-text { display: grid; gap: 4px; }
.hp-label { font: 700 .625rem/1 var(--f-slab); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hp-num { font: 700 1rem/1 var(--f-slab); color: var(--ink); font-variant-numeric: tabular-nums; }
.header-phone:hover, .header-phone:focus-visible { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.header-phone:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.header-actions .btn-sm { display: none; }
.menu-btn {
  width: 46px; height: 46px; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer; transition: transform .18s ease;
}
.menu-btn:hover, .menu-btn:focus-visible { transform: scale(1.14); }
.menu-bars, .menu-bars::before, .menu-bars::after { display: block; width: 20px; height: 2px; background: var(--ink); position: relative; transition: transform .2s ease, background-color .2s; }
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
.menu-bars::before { top: -6px; } .menu-bars::after { top: 6px; }
.menu-btn[aria-expanded="true"] .menu-bars { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-bars::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-bars::after { transform: translateY(-6px) rotate(-45deg); }
.nav.is-open {
  display: grid; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--grain) var(--paper); border-bottom: 2px solid var(--ink); padding: 6px var(--g) 18px;
}
.nav.is-open a { padding: 15px 2px; font: 700 1rem/1.2 var(--f-slab); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 1.5px dashed var(--line); }
@media (min-width: 560px) { .header-actions .btn-sm { display: inline-flex; } }
@media (min-width: 1000px) {
  .brand img { height: 54px; }
  .menu-btn { display: none; }
  .nav, .nav.is-open { display: flex; position: static; gap: 30px; background: none; border: 0; padding: 0; }
  .nav a, .nav.is-open a {
    position: relative; padding: 9px 1px; text-decoration: none; font: 700 .8125rem/1 var(--f-slab);
    letter-spacing: .1em; text-transform: uppercase; border: 0; color: var(--ink); transition: transform .18s ease;
  }
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 4px; height: 2px; background: var(--gold);
    transition: right .3s cubic-bezier(.2, .7, .3, 1);
  }
  .nav a:hover, .nav a:focus-visible { background: none; transform: scale(1.06); }
  .nav a:hover::after, .nav a:focus-visible::after { right: 0; }
  .nav a[aria-current="page"]::after { right: 0; }
}
@media (min-width: 1200px) { .header-phone { display: inline-flex; } }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--cream);
  background-color: var(--green);
}
/* the photo sits behind the headline and scrolls a little slower than the page (site.js) */
.hero.has-photo { background-image: none; }
.hero-media { position: absolute; left: 0; right: 0; top: 0; height: min(100%, 820px); overflow: hidden; z-index: 0; }
.hero-photo { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; max-width: none; object-fit: cover; object-position: 50% 50%; will-change: transform; }
.focus-top .hero-photo { object-position: 50% 18%; }
.focus-bottom .hero-photo { object-position: 50% 82%; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22, 35, 24, .58) 0%, rgba(22, 35, 24, .66) 50%, var(--green) 100%);
}
.has-photo h1, .has-photo .lede, .has-photo .proof { text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 22px rgba(0, 0, 0, .35); }
@media (min-width: 1000px) {
  .hero-media { height: 100%; }
  .hero-media::after { background: linear-gradient(90deg, rgba(22, 35, 24, .86) 0%, rgba(22, 35, 24, .64) 46%, rgba(22, 35, 24, .28) 100%); }
  .has-photo .hero-inner { min-height: min(760px, calc(100svh - 74px)); }
}
.hero-inner { position: relative; z-index: 2; display: grid; gap: 36px; padding-block: clamp(34px, 6vw, 84px) clamp(44px, 7vw, 92px); }
.hero-inner > * { min-width: 0; }
.hero-copy { display: grid; gap: 22px; align-content: start; }
.stamp-label {
  display: inline-flex; align-items: center; gap: 10px; justify-self: start;
  font: 700 .8125rem/1 var(--f-slab); letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  border: 2px solid var(--gold); padding: 9px 12px; outline: 1px solid rgba(224, 174, 60, .55); outline-offset: 3px;
}
.stamp-label span { width: 8px; height: 8px; background: var(--gold); flex: none; }
.proof { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; color: var(--cream); font-weight: 600; }
.proof li { display: flex; align-items: center; gap: 10px; }
.proof .ic { color: var(--gold); stroke-width: 3; }
@media (min-width: 1000px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; align-items: center; }
}

/* ---------- quote card ---------- */
.quote-card {
  position: relative; background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 8px 8px 0 rgba(0, 0, 0, .32);
  padding: clamp(20px, 3.2vw, 30px);
}
.quote-card :focus-visible { outline-color: var(--green); }
.qc-head { display: grid; gap: 8px; margin-bottom: 18px; }
.qc-kicker { font: 700 .75rem/1.2 var(--f-slab); letter-spacing: .14em; text-transform: uppercase; color: var(--green-3); }
.qc-title { font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.08; color: var(--green); outline: none; }
.qc-progress { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.qc-progress li { font: 700 .75rem/1 var(--f-slab); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 9px; border-top: 4px solid var(--line); }
.qc-progress li.on { color: var(--green); border-top-color: var(--green); }
.qc-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
.js .qc-step:not(.is-active) { display: none; }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chip { position: relative; display: block; cursor: pointer; }
.chip-wide { grid-column: span 2; }
@media (max-width: 420px) {
  .quote-card { padding: 18px 16px; }
  .chip span { padding: 10px; gap: 8px; }
  .chip span .ic { display: none; }
}
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: flex; align-items: center; gap: 10px; min-height: 54px; height: 100%; padding: 11px 12px;
  border: 2px solid var(--line); background: #fff; font-weight: 600; font-size: .96rem; line-height: 1.2;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip span .ic { color: var(--green-3); width: 22px; height: 22px; }
.chip em { font-style: normal; font-weight: 500; color: var(--muted); font-size: .82rem; margin-left: auto; }
.chip:hover span { border-color: var(--green-3); }
.chip input:checked + span { background: var(--green); border-color: var(--green); color: var(--cream); }
.chip input:checked + span .ic { color: var(--gold); }
.chip input:checked + span em { color: #D9D2B8; }
.chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.field { display: grid; gap: 7px; }
.field-row { display: grid; gap: 14px; }
@media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }
.label { font: 700 .9375rem/1.3 var(--f-slab); }
.opt { font: 500 .8125rem var(--f-body); color: var(--muted); margin-left: 4px; }
input[type="text"], input[type="tel"], input[type="email"], textarea {
  width: 100%; font-size: 1rem; padding: 12px 13px; border-radius: 0; border: 2px solid var(--line); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 64px; }
input:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(224, 174, 60, .4); }
input[aria-invalid="true"] { border-color: var(--error); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg-3 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 520px) { .seg-4 { grid-template-columns: repeat(4, 1fr); } }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: grid; place-items: center; text-align: center; min-height: 48px; height: 100%; padding: 8px 6px;
  border: 2px solid var(--line); background: #fff; font-weight: 600; font-size: .92rem; line-height: 1.15;
}
.seg label:hover span { border-color: var(--green-3); }
.seg input:checked + span { background: var(--green); border-color: var(--green); color: var(--cream); }
.seg input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.qc-error { color: var(--error); font-weight: 700; font-size: .9375rem; }
.qc-error:empty { display: none; }
.qc-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.qc-fine { font-size: .875rem; color: var(--muted); text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- sections ---------- */
.section { padding-block: clamp(64px, 9vw, 116px); }
.section-head { margin-bottom: clamp(30px, 5vw, 52px); max-width: 780px; }

/* services */
.svc-grid { display: grid; gap: 18px; }
@media (min-width: 700px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) {
  .svc-grid { grid-template-columns: 1.1fr 1fr 1fr; }
  .svc-feature { grid-row: span 2; }
  /* four services: the last one runs across both columns next to the big tile, so the grid has no gap */
  .svc-feature:first-child:nth-last-child(4) ~ .svc:last-child { grid-column: span 2; }
}
.svc {
  --pad: clamp(22px, 2.6vw, 28px);
  position: relative; background: none; border: 0; border-top: 2px solid var(--ink);
  padding: var(--pad); display: grid; gap: 10px; align-content: start;
}
.svc p { color: var(--muted); }
.svc-photo { width: calc(100% + 2 * var(--pad)); max-width: none; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 10px; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1.5px solid var(--ink); }
.svc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.svc-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--green-3); }
.svc-icon .ic { width: 30px; height: 30px; stroke-width: 1.8; }
.price { font: 700 .75rem/1.1 var(--f-slab); letter-spacing: .08em; text-transform: uppercase; color: var(--green); border-bottom: 1.5px solid currentColor; padding: 2px 1px 4px; text-align: right; }
.svc-feature {
  background: var(--grain) var(--green); color: var(--cream); border-color: var(--green);
  outline: 1.5px solid var(--green); outline-offset: 4px;
  align-content: end; min-height: 330px; margin: 6px;
}
.svc-feature h3 { color: var(--cream); font: 400 clamp(1.9rem, 3vw, 2.4rem)/1.08 var(--f-display); }
.svc-feature p { color: #DCD5BD; font-size: 1.0625rem; }
.svc-feature .svc-top { align-self: start; margin-bottom: auto; padding-bottom: 28px; }
.svc-feature .svc-icon { background: transparent; border-color: var(--gold); color: var(--gold); }
.svc-feature .price { background: var(--gold); color: var(--ink); border-color: var(--ink); font-size: .9375rem; padding: 9px 12px; }
.svc-feature.has-photo { align-content: start; }
.svc-feature.has-photo .svc-top { margin-bottom: 0; padding-bottom: 6px; }
@media (max-width: 699px) { .svc-feature { margin: 5px; } }

/* season plan band */
.plan {
  background: var(--grain) var(--green); color: #E5DEC6; padding-block: clamp(64px, 9vw, 112px);
}
.plan h2 { color: var(--cream); }
.plan-inner { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 1000px) { .plan-inner { grid-template-columns: 1fr 1.05fr; } }
.plan-copy { display: grid; gap: 20px; justify-items: start; }
.plan-copy > p { font-size: 1.125rem; max-width: 34em; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-weight: 700; color: var(--cream); }
.ticks li { display: flex; gap: 10px; align-items: center; }
.ticks .ic { color: var(--gold); stroke-width: 3; }
.season { background: var(--card); color: var(--ink); border: 2px solid var(--ink); box-shadow: 8px 8px 0 rgba(0, 0, 0, .3); padding: clamp(18px, 3vw, 28px); display: grid; gap: 14px; }
.season-months { display: grid; grid-template-columns: repeat(6, 1fr); font: 700 .75rem/1 var(--f-slab); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.season-months span { padding-bottom: 8px; border-bottom: 1.5px dashed var(--line); }
.season-track { display: grid; grid-template-columns: repeat(12, 1fr); row-gap: 8px; }
.season-track > div { padding: 12px 12px 11px; display: grid; gap: 2px; min-width: 0; border: 1.5px solid var(--ink); }
.season-track strong { font: 700 .95rem/1.15 var(--f-slab); color: var(--ink); }
.season-track span { font-size: .8125rem; line-height: 1.25; color: #3A4535; }
.seg-cleanup { grid-column: 1 / span 3; grid-row: 1; background: var(--gold); }
.seg-mow { grid-column: 5 / span 8; grid-row: 2; background: var(--moss); }
.season-track em { display: none; font-style: normal; font: 700 .7rem/1 var(--f-slab); letter-spacing: .1em; text-transform: uppercase; color: #3A4535; margin-bottom: 4px; }
.season-note { font-size: .875rem; color: var(--muted); }
@media (max-width: 639px) {
  .season-months { display: none; }
  .season-track { grid-template-columns: 1fr; }
  .season-track > div { grid-column: 1 / -1; grid-row: auto; padding: 13px 15px; }
  .season-track em { display: block; }
}

/* why */
.why-inner { display: grid; gap: 8px; }
@media (min-width: 1000px) { .why-inner { grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; } }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 32px; }
@media (min-width: 640px) { .why-list { grid-template-columns: 1fr 1fr; } }
.why-list li { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 22px 0; border-top: 1.5px dashed var(--ink); }
.why-icon { width: 46px; height: 46px; display: grid; place-items: center; background: var(--green); color: var(--gold); }
.why-icon .ic { width: 24px; height: 24px; stroke-width: 2; }
.why-list h3 { font-size: 1.125rem; margin-bottom: 4px; }
.why-list p { color: var(--muted); font-size: 1rem; }

/* before & after: pairs taken from the same spot, before the cleanup and after */
.results { background: var(--grain) var(--paper-2); border-block: 2px solid var(--ink); }
.ba-grid { display: grid; gap: clamp(18px, 3vw, 30px); }
@media (min-width: 760px) { .ba-grid { grid-template-columns: 1fr 1fr; } }
.ba { margin: 0; min-width: 0; padding: clamp(10px, 1.5vw, 14px); background: var(--card); border: 2px solid var(--ink); box-shadow: var(--shadow); }
.ba figcaption { margin-top: 12px; padding-inline: 2px; font: 600 .9375rem/1.35 var(--f-slab); color: var(--ink); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.shot { position: relative; display: block; width: 100%; padding: 0; margin: 0; border: 2px solid var(--ink); border-radius: 0; background: var(--line); cursor: zoom-in; overflow: hidden; }
.shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .35s ease; }
.shot:hover img { transform: scale(1.025); }
.tag { position: absolute; top: 10px; left: 10px; font: 700 .6875rem/1 var(--f-slab); letter-spacing: .14em; text-transform: uppercase; padding: 7px 9px; border: 2px solid var(--ink); }
.tag-before { background: var(--ink); color: var(--cream); }
.tag-after { background: var(--gold); color: var(--ink); }
.ba-more { margin-top: clamp(30px, 4vw, 44px); text-align: center; }
@media (max-width: 559px) { .tag { top: 7px; left: 7px; padding: 5px 7px; font-size: .625rem; letter-spacing: .12em; } }

/* Our work page */
.work-intro { padding-block: clamp(44px, 7vw, 88px) clamp(36px, 5vw, 64px); }
.work-intro-inner { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .work-intro-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.work-intro h1 { color: var(--green); font-size: clamp(2.3rem, 5.2vw, 3.75rem); line-height: 1.06; }
.work-count { margin-top: 22px; font: 700 .8125rem/1 var(--f-slab); letter-spacing: .14em; text-transform: uppercase; color: var(--green-3); }
.work-count strong { font-size: 1rem; color: var(--ink); }
.work-intro-photo { margin: 0; width: 100%; max-width: 440px; justify-self: center; padding: 12px; background: var(--card); border: 2px solid var(--ink); box-shadow: 8px 8px 0 rgba(29, 42, 30, .16); }
.work-intro-photo .shot img { aspect-ratio: 4 / 3; object-position: 50% 62%; }
@media (min-width: 900px) { .work-intro-photo { justify-self: end; } .work-intro-photo .shot img { aspect-ratio: 3 / 4; object-position: 50% 50%; } }
.page-work .work-all { background: var(--grain) var(--paper-2); border-top: 2px solid var(--ink); }

/* full-size photo viewer (built by site.js) */
.lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(14, 20, 15, .96); color: var(--cream); }
.lightbox::backdrop { background: rgba(14, 20, 15, .96); }
.lb-stage { position: absolute; inset: 60px 12px 64px; }
.lb-stage img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.lb-cap { position: absolute; left: 16px; right: 16px; bottom: 18px; text-align: center; font: 600 .9375rem/1.3 var(--f-slab); }
.lb-count { opacity: .7; margin-left: 10px; font-weight: 400; }
.lb-btn { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid var(--cream); border-radius: 0; background: rgba(14, 20, 15, .6); color: var(--cream); cursor: pointer; font: 400 1.75rem/1 var(--f-body); }
.lb-btn:hover { background: var(--cream); color: var(--ink); }
.lb-close { top: 10px; right: 12px; }
.lb-prev, .lb-next { top: 50%; margin-top: -24px; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lightbox.is-single .lb-prev, .lightbox.is-single .lb-next { display: none; }

.ph { display: grid; place-items: center; width: 100%; height: 100%; padding: 16px; background: repeating-linear-gradient(135deg, #D9C89E 0 12px, #E2D3AE 12px 24px); }
.ph .ic { width: 18px; height: 18px; }
.ph-label {
  display: inline-flex; align-items: center; gap: 8px; text-align: center;
  font: 700 .75rem/1.2 var(--f-slab); letter-spacing: .14em; text-transform: uppercase;
  background: var(--card); color: var(--ink); border: 1.5px dashed var(--ink); padding: 9px 12px;
}

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 28px; }
@media (min-width: 700px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { display: grid; gap: 8px; align-content: start; padding: 22px 0 26px; border-top: 2px solid var(--ink); }
.step-n { font: 400 2.9rem/1 var(--f-display); color: var(--gold-2); -webkit-text-stroke: 1px var(--ink); }
.steps p { color: var(--muted); }

/* areas */
.areas-inner { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
@media (min-width: 1000px) { .areas-inner { grid-template-columns: .95fr 1.05fr; } }
.area-list { margin: 26px 0 0; display: grid; gap: 0; }
.area-list div { padding: 16px 0; border-top: 1.5px dashed var(--ink); }
.area-list div:last-child { border-bottom: 1.5px dashed var(--ink); }
.area-list dt { font: 400 1.45rem/1.15 var(--f-display); color: var(--green); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.area-list dt span { font: 700 .6875rem/1 var(--f-slab); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: 5px 7px; }
.area-list dd { margin: 8px 0 0; color: var(--muted); }
.areas-note { margin-top: 22px; font-weight: 600; }
.map-card { box-shadow: var(--shadow); }
.map-card svg { display: block; width: 100%; height: auto; }

/* about */
.about {
  position: relative; overflow: hidden; color: var(--cream);
  background: var(--grain) var(--green); border-block: 2px solid var(--ink);
}
.about.has-photo { background-image: none; }
/* the photo sits behind the copy and scrolls a little slower than the page (site.js) */
.about-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.about-bg { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; max-width: none; object-fit: cover; object-position: 50% 50%; will-change: transform; }
.focus-top .about-bg { object-position: 50% 18%; }
.focus-bottom .about-bg { object-position: 50% 82%; }
.about-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22, 35, 24, .74) 0%, rgba(22, 35, 24, .82) 60%, rgba(22, 35, 24, .9) 100%);
}
.about .kicker { color: var(--gold); }
.about h2 { color: var(--cream); }
.about.has-photo h2, .about.has-photo .about-copy > p { text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 22px rgba(0, 0, 0, .35); }
.about-inner { position: relative; z-index: 2; display: grid; padding-block: clamp(14px, 3vw, 34px); }
.about-copy { display: grid; gap: 18px; max-width: 40em; }
.about-copy > p { font-size: 1.125rem; color: #DCD5BD; }
@media (min-width: 900px) {
  .about.has-photo .about-media::after { background: linear-gradient(90deg, rgba(22, 35, 24, .88) 0%, rgba(22, 35, 24, .7) 46%, rgba(22, 35, 24, .32) 100%); }
}

/* faq */
.faq-inner { display: grid; gap: 8px; }
@media (min-width: 1000px) { .faq-inner { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; } }
.faq-list { border-top: 2px solid var(--ink); }
.faq-list details { border-bottom: 1.5px dashed var(--ink); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 19px 2px; font: 700 1.0625rem/1.35 var(--f-slab);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border: 1.5px solid var(--ink); background: var(--card) center no-repeat;
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
  background-size: 12px 2px, 2px 12px; transition: transform .2s ease, background-color .2s;
}
.faq-list details[open] summary::after { transform: rotate(45deg); background-color: var(--gold); }
.faq-list details p { padding: 0 2px 20px; color: var(--muted); max-width: 40em; }

/* final call to action */
.final-cta { background: var(--grain) var(--gold); color: var(--ink); padding-block: clamp(64px, 9vw, 108px); text-align: center; border-top: 2px solid var(--ink); }
.final-inner { display: grid; gap: 18px; justify-items: center; }
.final-cta h2 { color: var(--ink); font-size: clamp(2.5rem, 6.4vw, 4.4rem); }
.final-cta p { font-size: 1.125rem; max-width: 34em; color: #33301F; }
.cta-center { justify-content: center; margin-top: 8px; }

/* footer */
.site-footer { background: var(--grain) var(--ink); color: #CFC8AF; padding-block: 56px 28px; font-size: .9875rem; }
.site-footer a { color: var(--cream); }
.site-footer :focus-visible { outline-color: var(--gold); }
.footer-inner { display: grid; gap: 32px; }
@media (min-width: 800px) { .footer-inner { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand img { height: 64px; width: auto; margin-bottom: 16px; }
.footer-brand p { max-width: 30em; }
.footer-col h2 { font: 700 .8125rem/1 var(--f-slab); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.footer-col p + p { margin-top: 10px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 40px; padding-top: 20px; border-top: 1.5px dashed rgba(246, 239, 221, .25); font-size: .875rem; color: #A9A38C; }

/* dark sections: light focus ring */
.hero :focus-visible, .plan :focus-visible { outline-color: var(--gold); }
.hero .quote-card :focus-visible { outline-color: var(--ink); }

/* ---------- boxes: on hover they lift a little and a gold light runs round the edge, brightest nearest the pointer.
   Phones and tablets have no hover, so each box lights up while it crosses the middle of the screen
   and the light slides down its edges as you scroll (site.js adds .is-lit) ---------- */
.quote-card, .season, .ba, .work-intro-photo, .svc,
.why-list li, .steps li, .area-list div, .faq-list details {
  --bw: 2px; --bx: 0px;
  position: relative;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}
/* open tiles and rows have no box of their own: a card fades in behind them, a little wider than the text */
.why-list li, .steps li, .area-list div, .faq-list details { --bx: 12px; }
.svc:not(.svc-feature), .why-list li, .steps li, .area-list div, .faq-list details { isolation: isolate; }
.svc:not(.svc-feature)::before, .why-list li::before, .steps li::before, .area-list div::before, .faq-list details::before {
  content: ""; position: absolute; z-index: -1; inset: 0 calc(var(--bx) * -1); pointer-events: none;
  background: var(--card); box-shadow: 6px 6px 0 rgba(29, 42, 30, .2);
  opacity: 0; transition: opacity .3s ease;
}
/* the light: a thin gold ring on the edge, brightest where the pointer is */
.quote-card::after, .season::after, .ba::after, .work-intro-photo::after, .svc::after,
.why-list li::after, .steps li::after, .area-list div::after, .faq-list details::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  inset: calc(var(--bw) * -1) calc((var(--bw) + var(--bx)) * -1); padding: var(--bw);
  background: radial-gradient(320px circle at calc(var(--mx, 50%) + var(--bx)) var(--my, 0%), rgba(255, 220, 130, 1), rgba(224, 174, 60, .8) 40%, rgba(224, 174, 60, 0) 76%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .quote-card:hover, .season:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 rgba(0, 0, 0, .32), 0 18px 46px -16px rgba(224, 174, 60, .5); }
  .ba:hover, .work-intro-photo:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 rgba(29, 42, 30, .22), 0 16px 40px -18px rgba(224, 174, 60, .45); }
  .svc:hover, .why-list li:hover, .steps li:hover, .area-list div:hover, .faq-list details:hover { z-index: 1; transform: translateY(-3px); }
  .svc-feature:hover { box-shadow: 0 24px 34px -22px rgba(0, 0, 0, .6); }
  .quote-card:hover::after, .season:hover::after, .ba:hover::after, .work-intro-photo:hover::after, .svc:hover::before, .svc:hover::after,
  .why-list li:hover::before, .why-list li:hover::after, .steps li:hover::before, .steps li:hover::after,
  .area-list div:hover::before, .area-list div:hover::after, .faq-list details:hover::before, .faq-list details:hover::after { opacity: 1; }
}
.quote-card.is-lit, .season.is-lit { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 rgba(0, 0, 0, .32), 0 18px 46px -16px rgba(224, 174, 60, .5); }
.ba.is-lit, .work-intro-photo.is-lit { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 rgba(29, 42, 30, .22), 0 16px 40px -18px rgba(224, 174, 60, .45); }
.svc.is-lit, .why-list li.is-lit, .steps li.is-lit, .area-list div.is-lit, .faq-list details.is-lit { z-index: 1; transform: translateY(-3px); }
.svc-feature.is-lit { box-shadow: 0 24px 34px -22px rgba(0, 0, 0, .6); }
.is-lit::before, .is-lit::after { opacity: 1; }
/* an open question keeps its card */
.faq-list details[open]::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .quote-card, .season, .ba, .work-intro-photo, .svc, .why-list li, .steps li, .area-list div, .faq-list details { transition: box-shadow .2s ease; }
  .quote-card:hover, .season:hover, .ba:hover, .work-intro-photo:hover, .svc:hover, .why-list li:hover, .steps li:hover, .area-list div:hover, .faq-list details:hover, .is-lit { transform: none; }
}

/* ---------- full-screen confirmation once the quote form is sent (sent.njk) ----------
   The site's deep green with its paper grain. The message sits where the hero copy does,
   and the quote card comes back as a ticket, stamped received.
   Also used as thanks.html for browsers that don't run the script. */
html.is-sent-open { overflow: hidden; }
.sent {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow-y: auto; overscroll-behavior: contain;
  color: var(--cream);
  background: var(--grain), radial-gradient(120% 85% at 12% 0%, rgba(157, 179, 107, .13), rgba(157, 179, 107, 0) 62%), var(--green);
}
.sent::backdrop { background: var(--green); }
.sent-static { position: static; height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
.sent-inner { position: relative; min-height: 100%; display: grid; grid-template-rows: auto 1fr; }
.sent-static .sent-inner { min-height: 100vh; min-height: 100dvh; }
.sent-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding-top: env(safe-area-inset-top, 0px); }
.sent-logo { height: 44px; width: auto; }
@media (min-width: 560px) { .sent-logo { height: 50px; } }
.sent-x { width: 46px; height: 46px; margin-right: -11px; border: 0; background: none; color: var(--cream); cursor: pointer; display: grid; place-items: center; transition: color .15s, transform .18s ease; }
.sent-x span { position: relative; width: 22px; height: 22px; }
.sent-x span::before, .sent-x span::after { content: ""; position: absolute; left: 0; top: 10px; width: 22px; height: 2.5px; background: currentColor; transform: rotate(45deg); }
.sent-x span::after { transform: rotate(-45deg); }
.sent-x:hover, .sent-x:focus-visible { color: var(--gold); transform: scale(1.12); }
.sent :focus-visible { outline-color: var(--gold); }
.sent-ticket :focus-visible { outline-color: var(--ink); }
.sent-body { align-self: center; display: grid; gap: 44px; padding-block: clamp(20px, 5vh, 60px) clamp(36px, 7vh, 80px); }
@media (min-width: 1000px) { .sent-body { grid-template-columns: minmax(0, 1fr) 430px; gap: 64px; align-items: center; } }
.sent-copy { display: grid; justify-items: start; }
.sent-copy .stamp-label { margin-bottom: 24px; }
.sent-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.5rem, 5.6vw, 4.5rem); line-height: 1.04; color: var(--cream); outline: none; }
.sent-title > span { display: block; }
.sent-title .hl { color: var(--gold); }
.sent-lede { margin-top: 20px; max-width: 29em; font-size: clamp(1.125rem, 1.7vw, 1.25rem); line-height: 1.55; color: #DCD5BD; text-wrap: pretty; }
.sent-lede b { color: var(--cream); font-weight: 700; }
.sent .nw { white-space: nowrap; }
.sent-steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 18px 28px; width: 100%; max-width: 660px; }
@media (min-width: 700px) { .sent-steps { grid-template-columns: repeat(3, 1fr); } }
.sent-steps li { display: grid; gap: 4px; align-content: start; padding-top: 14px; border-top: 2px solid rgba(246, 239, 221, .3); }
.sent-n { font: 400 2rem/1 var(--f-display); color: var(--gold); margin-bottom: 6px; }
.sent-steps b { font: 700 1.0625rem/1.3 var(--f-slab); color: var(--cream); }
.sent-steps li > span:last-child { font-size: .95rem; line-height: 1.5; color: #CFC8AE; text-wrap: pretty; }
@media (max-width: 699px) {
  .sent-steps { gap: 0; margin-top: 30px; }
  .sent-steps li { grid-template-columns: 34px 1fr; column-gap: 8px; row-gap: 2px; padding-block: 12px 14px; }
  .sent-n { grid-row: span 2; margin: 0; font-size: 1.7rem; }
}
.sent-actions { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.sent-actions p { color: #CFC8AE; }
.sent-actions p a { color: var(--cream); white-space: nowrap; text-underline-offset: 3px; }
.sent-preview { margin-top: 18px; font-size: .875rem; color: #BDB69D; }
/* the ticket: what they asked for, with a stub at the bottom and the stamp */
.sent-ticket { position: relative; display: grid; gap: 14px; padding: clamp(20px, 3vw, 28px); background: var(--card); color: var(--ink); border: 2px solid var(--ink); box-shadow: 8px 8px 0 rgba(0, 0, 0, .32); }
.sent-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sent-tags li { padding: 8px 12px; background: var(--green); color: var(--cream); font-weight: 600; font-size: .9375rem; line-height: 1.2; }
.sent-rows { margin: 0; display: grid; }
.sent-rows > div { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--line); }
.sent-rows dt { font: 700 .72rem/1.7 var(--f-slab); letter-spacing: .12em; text-transform: uppercase; color: var(--green-3); }
.sent-rows dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.sent-stub { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 2px; padding-top: 16px; border-top: 2px dashed var(--ink); }
.sent-stub p { font-size: .9375rem; line-height: 1.5; color: var(--muted); max-width: 20em; }
.sent-stub b { color: var(--ink); }
.sent-stamp { flex: none; width: 108px; height: 108px; margin: -14px -8px -16px 0; color: var(--green-3); opacity: .92; transform: rotate(-11deg); mix-blend-mode: multiply; }
/* shorter laptop screens: a little tighter, so the whole message fits without scrolling */
@media (min-width: 700px) and (max-height: 820px) {
  .sent-top { min-height: 64px; }
  .sent-body { padding-block: 6px 26px; gap: 36px; }
  .sent-copy .stamp-label { margin-bottom: 16px; }
  .sent-title { font-size: clamp(2.3rem, min(5.6vw, 8.6vh), 4.5rem); }
  .sent-lede { margin-top: 14px; }
  .sent-steps { margin-top: 24px; }
  .sent-actions { margin-top: 24px; }
  .sent-preview { margin-top: 10px; }
  .sent-ticket { gap: 12px; }
  .sent-rows > div { padding-block: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .sent[open] { animation: sent-fade .3s ease both; }
  .sent.is-closing { animation: sent-fade .18s ease reverse both; }
  .sent[open] .sent-rise, .sent-static .sent-rise { animation: sent-rise .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
  .sent[open] .sent-ticket { animation: ticket-in .6s cubic-bezier(.2, .8, .2, 1) .36s both; }
  .sent[open] .sent-stamp { animation: stamp-in .34s cubic-bezier(.3, 1.4, .5, 1) 1.02s both; }
}
@keyframes sent-fade { from { opacity: 0; } }
@keyframes sent-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes ticket-in { from { opacity: 0; transform: translateY(-16px); box-shadow: 0 0 0 rgba(0, 0, 0, .32); } }
@keyframes stamp-in { 0% { opacity: 0; transform: rotate(-3deg) scale(1.45); } 60% { opacity: .92; } 100% { opacity: .92; transform: rotate(-11deg) scale(1); } }