/* Richie's Landscaping. Hand written for Polaris One Website Studio. */

@font-face {
  font-family: "Bevan";
  src: url("/assets/fonts/bevan-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-var-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* Tokens: colors sampled from Richie's current flyer. Contrast measured in the brief. */
:root {
  --pine: #1f3a2c;
  --pine-deep: #172d22;
  --rust: #9c391a;
  --gold: #d4a24c;
  --paper: #f2e9d6;
  --paper-lite: #f7f0e1;
  --kraft: #e4d5b7;
  --ink: #16261c;
  --cream: #efe2c6;
  --muted: #45554a;
  --wood: #9a6a3c;

  --f-display: "Bevan", "Rockwell Extra Bold", "Rockwell", Georgia, serif;
  --f-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-md: 1.25rem;
  --t-lg: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --t-xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
  --t-2xl: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
  --t-3xl: clamp(2.75rem, 1.4rem + 6vw, 5.5rem);

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;

  --radius: 10px;
  --radius-sm: 6px;
  --max: 1200px;
  --narrow: 860px;
  --bar-h: 64px;
  --bar-total: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  --focus: 0 0 0 3px var(--paper), 0 0 0 6px var(--rust);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--paper) url("/assets/img/paper-grain.webp") repeat;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.6;
  padding-bottom: var(--bar-total);
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; line-height: 1.12; font-weight: 400; }
h1, h2 { font-family: var(--f-display); color: var(--pine); letter-spacing: 0.005em; }
h3 { font-family: var(--f-body); font-weight: 750; font-size: var(--t-md); color: var(--pine); }
p { margin: 0 0 var(--s-2); }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.nowrap, a[href^="tel:"]:not(.btn):not(.bar-call) { white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--s-2); }
.narrow { max-width: var(--narrow); }
.center { text-align: center; }

.skip-link {
  position: absolute; left: var(--s-2); top: -100px; z-index: 100;
  background: var(--pine); color: var(--cream); padding: 12px 16px; border-radius: var(--radius-sm);
  font-weight: 700;
}
.skip-link:focus { top: var(--s-1); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  font-family: var(--f-body); font-weight: 750; font-size: var(--t-base); line-height: 1.2;
  text-decoration: none; text-align: center; max-width: 100%; border-radius: var(--radius-sm); border: 2px solid transparent;
  cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.btn .ico { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn-primary { background: var(--pine); color: var(--cream); border-color: var(--pine); box-shadow: 0 3px 0 var(--ink); }
.btn-primary:hover { background: var(--pine-deep); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn-quiet { background: transparent; color: var(--pine); border-color: var(--pine); }
.btn-quiet:hover { background: var(--paper-lite); }
.btn-lg { min-height: 56px; font-size: var(--t-md); padding: 14px 24px; }
@media (max-width: 559px) {
  .cta-row .btn { flex: 1 1 100%; }
  .btn-lg { font-size: var(--t-base); padding: 12px 16px; }
}
.btn-block { width: 100%; }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper) url("/assets/img/paper-grain.webp") repeat;
  border-bottom: 3px double var(--pine);
}
.header-inner { display: flex; align-items: center; gap: 10px; min-height: 68px; flex-wrap: wrap; }
.brand { display: block; width: 112px; padding: 6px 0; border-radius: 6px; }
.brand img { width: 100%; }
.header-call { margin-left: auto; min-height: 44px; padding: 10px 14px; font-size: var(--t-sm); gap: 8px; }
.menu-btn {
  min-height: 44px; min-width: 44px; padding: 10px 14px;
  background: transparent; color: var(--pine); border: 2px solid var(--pine); border-radius: var(--radius-sm);
  font: 700 var(--t-sm) var(--f-body); cursor: pointer;
}
.menu-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.site-nav { width: 100%; order: 5; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-1); padding-bottom: var(--s-1); }
.site-nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-weight: 700; text-decoration: none; color: var(--pine); border-radius: 4px;
}
.site-nav a:hover { color: var(--rust); text-decoration: underline; text-underline-offset: 4px; }
.no-js .menu-btn { display: none; }
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; }
.js .site-nav.is-open ul { flex-direction: column; border-top: 1px solid var(--pine); padding: var(--s-1) 0; }

@media (min-width: 900px) {
  .header-inner { flex-wrap: nowrap; gap: var(--s-3); }
  .brand { width: 150px; }
  .menu-btn { display: none; }
  .site-nav, .js .site-nav { display: block; width: auto; order: 0; margin-left: auto; }
  .site-nav ul { padding: 0; gap: 0 2px; }
  .header-call { margin-left: 0; }
}

/* Hand bill frame, signature move one */
.bill {
  position: relative;
  background: var(--paper-lite) url("/assets/img/paper-grain.webp") repeat;
  border: 3px solid var(--pine);
  border-radius: 4px;
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 8px var(--pine);
  margin: 8px;
}

/* Hero */
.hero { padding: var(--s-3) 0 var(--s-5); }
.hero-bill { display: grid; overflow: hidden; padding: var(--s-4) var(--s-3) 0; }
@media (max-width: 420px) {
  .hero-bill, .contact-bill { padding-left: var(--s-2); padding-right: var(--s-2); }
  .hero-bill .treeline { width: calc(100% + 2 * var(--s-2)); margin: 0 calc(-1 * var(--s-2)); }
}
.tagline { font-style: italic; font-weight: 650; color: var(--pine); font-size: var(--t-base); margin-bottom: var(--s-2); }
.tagline br { display: none; }
.hero h1 { font-size: var(--t-2xl); max-width: 16ch; }
.poster-line {
  font-style: italic; font-weight: 800; color: var(--rust);
  font-size: var(--t-lg); line-height: 1.25; margin: var(--s-2) 0;
}
.lede { font-size: var(--t-md); max-width: 38ch; color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--s-3) 0; }
.trust { display: grid; gap: 10px; margin: 0 0 var(--s-3); font-weight: 650; }
.trust li { display: flex; align-items: center; gap: 10px; }
.leaf { width: 20px; height: 20px; fill: var(--rust); flex: none; }
.leaf.flip { transform: scaleX(-1); }
.hero-art { max-width: 460px; margin: 0 auto; width: 100%; }
.hero-art img { width: 100%; }
.treeline { max-width: none; width: calc(100% + 2 * var(--s-3)); margin: 0 calc(-1 * var(--s-3)); height: 64px; object-fit: cover; object-position: bottom; }
.hero-bill .treeline { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .hero { padding: var(--s-5) 0 var(--s-6); }
  .hero-bill { grid-template-columns: 1.3fr 1fr; grid-template-areas: "copy tag" "copy art" "trees trees"; column-gap: var(--s-4); padding: var(--s-6) var(--s-6) 0; align-items: center; }
  .hero-copy { grid-area: copy; }
  .hero-art { grid-area: art; }
  .hero-bill .treeline { grid-area: trees; }
  .tagline { grid-area: tag; justify-self: end; align-self: start; text-align: right; font-size: var(--t-lg); line-height: 1.3; font-weight: 700; transform: rotate(-5deg); padding-bottom: 10px; border-bottom: 3px solid var(--rust); margin: 0 var(--s-2) 0 0; }
  .tagline br { display: inline; }
  .lede { max-width: 44ch; }
  .trust { grid-template-columns: 1fr 1fr; }
  .hero-art { max-width: none; align-self: end; margin: 0 calc(-1 * var(--s-3)) -14px 0; }
  .treeline { width: calc(100% + 2 * var(--s-6)); margin: 0 calc(-1 * var(--s-6)); height: 96px; }
}

/* Specials */
.specials { background: var(--kraft); padding: var(--s-6) 0; border-top: 3px double var(--pine); border-bottom: 3px double var(--pine); }
.banner {
  background: var(--rust); color: var(--cream); text-align: center;
  padding: var(--s-3) var(--s-2) var(--s-2); border-radius: 4px; transform: rotate(-1.2deg);
  box-shadow: 0 4px 0 rgba(22, 38, 28, .25);
}
.banner h2 { color: var(--cream); font-size: var(--t-3xl); line-height: 1; letter-spacing: 0.01em; }
.banner p { font-family: var(--f-display); font-size: clamp(0.9375rem, 0.8rem + 0.8vw, 1.375rem); letter-spacing: 0.04em; text-transform: uppercase; margin: var(--s-1) 0 0; }
.band {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--pine); color: var(--cream); border-radius: var(--radius-sm);
  font-family: var(--f-display); font-size: clamp(1.125rem, 0.9rem + 1.2vw, 1.75rem); text-transform: uppercase;
  text-align: center; line-height: 1.15; padding: 12px var(--s-2); margin: var(--s-4) 0 var(--s-2);
}
.band .leaf { fill: var(--gold); width: 22px; height: 22px; }
.specials-intro { text-align: center; max-width: 52ch; margin: var(--s-2) auto var(--s-3); font-size: var(--t-md); }
.ticket {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--paper-lite); border: 3px solid var(--pine); border-radius: var(--radius);
  text-align: center; margin-bottom: var(--s-4);
}
.ticket-half { padding: var(--s-3) var(--s-1) var(--s-2); }
.ticket-half + .ticket-half { border-left: 3px dashed var(--pine); }
.ticket h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.375rem, 1rem + 1.6vw, 2.25rem); text-transform: uppercase; }
.ticket-time { font-weight: 650; margin: 4px 0 var(--s-1); font-size: var(--t-md); }
.price { position: relative; margin: 0 auto; width: min(100%, 230px); aspect-ratio: 300 / 90; display: grid; place-items: center; }
.price svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--rust); }
.price span { position: relative; font-family: var(--f-display); color: var(--paper-lite); font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); line-height: 1; }
.ticket-note { grid-column: 1 / -1; border-top: 2px solid var(--pine); margin: 0; padding: 10px; font-style: italic; font-weight: 600; }

/* Services */
.services { padding: var(--s-6) 0; }
.section-head { margin-bottom: var(--s-4); }
.section-head h2, .how h2, .area h2, .faq h2 { font-size: var(--t-xl); }
.section-head p { font-size: var(--t-md); margin-top: var(--s-1); color: var(--muted); }
.service-list { display: grid; border-top: 2px solid var(--pine); }
.service-list li { display: flex; gap: 14px; padding: var(--s-3) 0; border-bottom: 1px solid rgba(31, 58, 44, .35); }
.service-list .leaf { width: 26px; height: 26px; margin-top: 2px; }
.service-list li:nth-child(3n+2) .leaf { fill: var(--gold); }
.service-list li:nth-child(3n) .leaf { fill: var(--pine); }
.service-list h3 { margin-bottom: 6px; }
.service-list p { margin: 0; }
@media (min-width: 760px) {
  .service-list { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); }
}
.pickup {
  display: grid; gap: var(--s-1); align-items: center;
  margin-top: var(--s-5); background: var(--pine); color: var(--cream);
  border-radius: var(--radius); padding: var(--s-3);
}
.pickup h3 { font-family: var(--f-display); font-weight: 400; color: var(--cream); font-size: var(--t-xl); text-transform: uppercase; }
.pickup p { margin: 0; font-size: var(--t-md); }
@media (min-width: 760px) {
  .pickup { grid-template-columns: auto 1fr; gap: var(--s-4); padding: var(--s-3) var(--s-4); }
  .pickup p { border-left: 3px solid var(--gold); padding-left: var(--s-4); }
}

/* How it works */
.how { background: var(--pine); color: var(--cream); padding: var(--s-6) 0; }
.how h2 { color: var(--cream); margin-bottom: var(--s-4); }
.steps { display: grid; gap: var(--s-4); counter-reset: none; }
.steps li { position: relative; padding-left: 76px; }
.step-num {
  position: absolute; left: 0; top: -4px; width: 56px; height: 56px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--gold); color: var(--pine); font-family: var(--f-display); font-size: 1.75rem;
  box-shadow: 0 0 0 4px var(--pine), 0 0 0 6px var(--gold);
}
.steps h3 { color: var(--cream); font-size: var(--t-lg); margin-bottom: 6px; }
.steps p { margin: 0; }
.how .inline-link { color: var(--cream); font-weight: 700; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
}

/* About */
.about { padding: var(--s-6) 0; }
.about-grid { display: grid; gap: var(--s-4); }
.kicker { font-weight: 750; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--t-sm); color: var(--rust); margin-bottom: var(--s-1); }
.about h2 { font-size: var(--t-2xl); }
.years {
  display: inline-block; margin-top: var(--s-3); padding: var(--s-2) var(--s-3);
  border: 3px solid var(--pine); border-radius: 4px; box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--pine);
  font-family: var(--f-display); font-size: var(--t-xl); color: var(--pine); line-height: 1.1; text-align: center;
}
.years span { display: block; font-family: var(--f-body); font-style: italic; font-weight: 700; font-size: var(--t-md); color: var(--rust); }
.about-body { font-size: var(--t-md); max-width: 60ch; }
.signoff { font-style: italic; font-weight: 700; color: var(--pine); margin: var(--s-3) 0; }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1fr 1.4fr; gap: var(--s-6); align-items: start; }
}

/* Towns */
.area { background: var(--kraft); padding: var(--s-6) 0; border-top: 3px double var(--pine); border-bottom: 3px double var(--pine); }
.area h2 { margin-bottom: var(--s-2); }
.area p { font-size: var(--t-md); }
.towns { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--s-3) 0; }
.towns li {
  background: var(--paper-lite); border: 2px solid var(--pine); border-radius: 999px;
  padding: 8px 18px; font-weight: 700; color: var(--pine);
}
.area-note { margin: 0; }

/* FAQ */
.faq { padding: var(--s-6) 0; }
.faq h2 { margin-bottom: var(--s-3); }
.faq-list { border-top: 2px solid var(--pine); }
.faq details { border-bottom: 1px solid rgba(31, 58, 44, .35); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: 56px; padding: 12px 0; cursor: pointer; list-style: none;
  font-weight: 750; font-size: var(--t-md); color: var(--pine);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border: 2px solid var(--pine); border-radius: 50%; font-family: var(--f-body); font-weight: 800; font-size: 1.375rem; line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }
.faq details p { margin: 0 0 var(--s-3); max-width: 65ch; }
.inline-link { color: var(--rust); font-weight: 700; text-underline-offset: 3px; }

/* Contact */
.contact { padding: var(--s-5) 0 var(--s-6); }
.contact-bill { display: grid; gap: var(--s-4); padding: var(--s-4) var(--s-3); }
.contact-poster { text-align: center; }
.swash-title { position: relative; width: min(100%, 360px); aspect-ratio: 300 / 90; margin: 0 auto var(--s-2); display: grid; place-items: center; }
.swash-title svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--gold); }
.swash-title span { position: relative; font-family: var(--f-body); font-style: italic; font-weight: 850; color: var(--pine); font-size: clamp(1.625rem, 1.2rem + 2vw, 2.375rem); }
.call-line { font-family: var(--f-display); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--t-base); margin: 0; color: var(--pine); }
.big-phone {
  display: inline-block; font-family: var(--f-display); color: var(--pine); text-decoration: none;
  font-size: clamp(2rem, 1.1rem + 5vw, 4.25rem); line-height: 1.1; padding: 6px 4px; margin: 0 0 var(--s-1); border-radius: 6px;
}
.big-phone:hover { color: var(--rust); }
.hours { font-weight: 650; }
.contact-poster .cta-row { justify-content: center; margin-bottom: 0; }

.estimate-form { background: var(--paper); border: 2px solid var(--pine); border-radius: var(--radius); padding: var(--s-3); }
.estimate-form h3 { font-family: var(--f-display); font-weight: 400; font-size: var(--t-lg); }
.form-intro { margin: 6px 0 var(--s-3); }
.field { margin-bottom: var(--s-2); }
.field label { display: block; font-weight: 750; margin-bottom: 6px; color: var(--pine); }
.opt { font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  font: 400 var(--t-base) var(--f-body); color: var(--ink);
  background: #fffdf8; border: 2px solid var(--pine); border-radius: var(--radius-sm);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; box-shadow: var(--focus); }
.field [aria-invalid="true"] { border-color: var(--rust); }
.error { color: var(--rust); font-weight: 700; font-size: var(--t-sm); margin: 6px 0 0; }
.field-row { display: grid; gap: 0 var(--s-2); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-fine { font-size: var(--t-sm); color: var(--muted); margin: var(--s-2) 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 900px) {
  .contact-bill { grid-template-columns: 1fr 1fr; align-items: center; padding: var(--s-5); gap: var(--s-5); }
}

/* Footer */
.site-footer { margin-top: var(--s-4); }
.footer-trees { display: block; width: 100%; height: 72px; margin: 0 0 -2px; object-fit: cover; object-position: bottom; }
.footer-body { background: var(--pine); color: var(--cream); padding: var(--s-5) 0 var(--s-3); }
.footer-grid { display: grid; gap: var(--s-4); }
.footer-brand img { width: 200px; }
.footer-body p { margin: 0 0 6px; }
.footer-name { font-family: var(--f-display); font-size: var(--t-md); }
.footer-body a { color: var(--cream); display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }
.footer-phone { font-weight: 750; font-size: var(--t-md); }
.footer-legal { border-top: 1px solid rgba(239, 226, 198, .35); margin-top: var(--s-4); padding-top: var(--s-2); font-size: var(--t-sm); }
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; align-items: start; }
  .footer-trees { height: 110px; }
}

/* Mobile action bar */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1.45fr; height: var(--bar-total);
  border-top: 3px double var(--pine);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--paper);
}
/* Current-standard behaviour (2026-10-16): with JS on, the bar stays out of
   the way until the visitor scrolls past the hero, and hides again while the
   estimate form is on screen so it never covers a focused field (WCAG 2.4.11).
   visibility (not just transform) keeps its links out of the tab order while
   hidden. With JS off, the bar is simply always there. */
.js .action-bar {
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.js .action-bar.bar-show {
  transform: translateY(0);
  visibility: visible;
  transition: transform .25s ease, visibility 0s;
}
.action-bar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 800; font-size: var(--t-md); text-decoration: none;
}
.action-bar .ico { width: 20px; height: 20px; fill: currentColor; }
.bar-call { background: var(--pine); color: var(--cream); }
.bar-quote { background: var(--kraft); color: var(--pine); }
.action-bar a:focus-visible { outline: 3px solid var(--rust); outline-offset: -5px; }
@media (min-width: 900px) {
  .action-bar { display: none; }
  body { padding-bottom: 0; }
}

/* Simple pages */
.page { padding: var(--s-5) 0 var(--s-6); }
.page h1 { font-size: var(--t-2xl); margin-bottom: var(--s-3); }
.page h2 { font-size: var(--t-lg); margin: var(--s-4) 0 var(--s-1); }
.page .bill { padding: var(--s-4) var(--s-3); }
@media (min-width: 900px) { .page .bill { padding: var(--s-5); } }


/* ===== Elevation pass: depth, texture and stamped detail, same bones ===== */
:root {
  --shadow-lift: 0 22px 40px -26px rgba(22, 38, 28, .55), 0 2px 0 rgba(22, 38, 28, .08);
  --vignette: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 0 70px rgba(138, 98, 40, .16);
  --ink-press: 0 1px 0 rgba(255, 255, 255, .55);
}

/* Eyebrow labels with a hand ruled line */
.eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 var(--s-1);
  font: 750 0.8125rem/1.2 var(--f-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rust);
}
.eyebrow::before { content: ""; flex: 0 0 34px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow-center { justify-content: center; }
.eyebrow-center::after { content: ""; flex: 0 0 34px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow-light { color: var(--gold); }
.section-head p.eyebrow, .area p.eyebrow, .about p.eyebrow, .hero p.eyebrow { font-size: 0.8125rem; color: var(--rust); margin-top: 0; }
.how p.eyebrow { color: var(--gold); }

/* Letterpress on the big wood type */
.hero h1, .about h2, .section-head h2, .area h2, .faq h2, .big-phone, .ticket h3 { text-shadow: var(--ink-press); text-wrap: balance; }
.section-head h2, .area h2, .faq h2, .how h2 { text-wrap: balance; }

/* Paper that sits on the page instead of printed flat on it */
.bill {
  box-shadow: var(--vignette), 0 0 0 6px var(--paper), 0 0 0 8px var(--pine), var(--shadow-lift);
}
.bill::before, .bill::after {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; top: 14px; z-index: 2;
  background: radial-gradient(circle at 35% 35%, #c9b58c, #6e5a36 70%);
  box-shadow: 0 1px 2px rgba(22, 38, 28, .5);
}
.bill::before { left: 14px; }
.bill::after { right: 14px; }

/* Header */
.site-header { box-shadow: 0 8px 18px -14px rgba(22, 38, 28, .6); }
.site-nav a { letter-spacing: 0.02em; }

/* Tactile buttons with a stitched inner line */
.btn-primary {
  background: linear-gradient(180deg, #2a4a3a 0%, var(--pine) 55%, #19301f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 var(--ink), 0 8px 16px -10px rgba(22, 38, 28, .7);
  outline: 1px dashed rgba(239, 226, 198, .38); outline-offset: -6px;
}
.btn-primary:hover { background: linear-gradient(180deg, #24433a 0%, var(--pine-deep) 100%); }
.btn-primary:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3), 0 1px 0 var(--ink); }
.btn-quiet { background: var(--paper-lite); box-shadow: inset 0 -2px 0 rgba(31, 58, 44, .12), 0 2px 0 rgba(31, 58, 44, .25); }
.btn-primary:focus-visible, .btn-quiet:focus-visible { outline: 1px dashed rgba(239, 226, 198, .38); }

/* Hero */
.hero-copy .eyebrow { margin-bottom: var(--s-2); }
.trust { border-top: 3px double rgba(31, 58, 44, .55); border-bottom: 3px double rgba(31, 58, 44, .55); padding: var(--s-2) 0; }
.tagline { font-family: var(--f-body); }

/* Section ornament where kraft meets paper */
.ornate { position: relative; }
.ornate::before {
  content: ""; position: absolute; left: 50%; top: -25px; width: 46px; height: 46px; transform: translateX(-50%);
  background: var(--paper-lite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23a33d1c' d='M50 3 L56 17 L63 13 L61 33 L70 24 L73 30 L87 26 L83 40 L91 44 L74 58 L77 66 L57 62 L52.5 63 L52.5 95 L47.5 95 L47.5 63 L43 62 L23 66 L26 58 L9 44 L17 40 L13 26 L27 30 L30 24 L39 33 L37 13 L44 17 Z'/%3E%3C/svg%3E") center / 22px no-repeat;
  border: 2px solid var(--pine); border-radius: 50%;
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--pine);
}
.specials, .area { background: var(--kraft) url("/assets/img/paper-grain.webp") repeat; box-shadow: inset 0 14px 24px -18px rgba(22, 38, 28, .35), inset 0 -14px 24px -18px rgba(22, 38, 28, .3); }
.specials .eyebrow { margin-bottom: var(--s-3); }

/* Torn poster banner */
.banner {
  position: relative; padding: var(--s-4) var(--s-3) var(--s-3);
  background: radial-gradient(ellipse at 30% 20%, #b2481f 0%, var(--rust) 55%, #8f3417 100%);
  clip-path: polygon(0.0% 0.7%, 4.0% 0.9%, 8.0% 1.5%, 12.0% 0.7%, 16.0% 0.8%, 20.0% 0.9%, 24.0% 0.3%, 28.0% 0.8%, 32.0% 1.0%, 36.0% 1.3%, 40.0% 0.2%, 44.0% 0.5%, 48.0% 0.1%, 52.0% 1.3%, 56.0% 1.1%, 60.0% 0.1%, 64.0% 1.6%, 68.0% 1.5%, 72.0% 1.0%, 76.0% 1.0%, 80.0% 0.3%, 84.0% 0.0%, 88.0% 0.8%, 92.0% 0.1%, 96.0% 0.3%, 100.0% 0.4%, 100.0% 4.0%, 99.4% 10.0%, 99.4% 16.0%, 98.8% 22.0%, 99.3% 28.0%, 99.1% 34.0%, 99.3% 40.0%, 99.1% 46.0%, 99.4% 52.0%, 99.6% 58.0%, 98.6% 64.0%, 98.6% 70.0%, 98.8% 76.0%, 99.0% 82.0%, 99.6% 88.0%, 99.7% 94.0%, 100.0% 99.4%, 96.0% 99.8%, 92.0% 98.3%, 88.0% 99.1%, 84.0% 98.1%, 80.0% 99.1%, 76.0% 97.9%, 72.0% 98.1%, 68.0% 100.0%, 64.0% 99.5%, 60.0% 98.0%, 56.0% 99.0%, 52.0% 97.8%, 48.0% 99.1%, 44.0% 99.8%, 40.0% 98.6%, 36.0% 98.3%, 32.0% 99.4%, 28.0% 99.8%, 24.0% 99.3%, 20.0% 97.9%, 16.0% 98.3%, 12.0% 99.7%, 8.0% 99.5%, 4.0% 99.8%, 0.0% 99.9%, 1.1% 96.0%, 0.2% 90.0%, 0.8% 84.0%, 0.6% 78.0%, 0.3% 72.0%, 1.0% 66.0%, 0.2% 60.0%, 0.9% 54.0%, 0.2% 48.0%, 0.6% 42.0%, 0.3% 36.0%, 0.4% 30.0%, 1.4% 24.0%, 1.1% 18.0%, 0.4% 12.0%, 1.2% 6.0%);
  box-shadow: none; filter: drop-shadow(0 6px 0 rgba(22, 38, 28, .22));
}
.banner::after {
  content: ""; position: absolute; inset: 10px; border: 2px solid rgba(239, 226, 198, .45); pointer-events: none;
}
.banner h2 { text-shadow: 0 3px 0 rgba(90, 30, 10, .45); }

.band { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 0 rgba(22, 38, 28, .25); outline: 1px dashed rgba(239, 226, 198, .35); outline-offset: -6px; }

/* Ticket with punched notches and a perforation */
.ticket { position: relative; background: var(--paper-lite) url("/assets/img/paper-grain.webp") repeat; box-shadow: var(--vignette), var(--shadow-lift); }
.ticket::before, .ticket::after {
  content: ""; position: absolute; left: 50%; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%;
  background: var(--kraft); border: 3px solid var(--pine);
}
.ticket::before { top: -17px; clip-path: inset(50% 0 0 0); }
.ticket::after { top: calc(100% - 13px); clip-path: inset(0 0 50% 0); }
.ticket-half + .ticket-half { border-left: 3px dotted var(--pine); }
.ticket-note { border-top: 2px dashed var(--pine); background: rgba(228, 213, 183, .4); border-radius: 0 0 var(--radius) var(--radius); }
.price span { text-shadow: 0 2px 0 rgba(90, 30, 10, .4); }

/* Services: leaf stamps and Bevan names */
.service-list li { align-items: flex-start; }
.stamp {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper-lite); border: 2px solid var(--pine);
  box-shadow: inset 0 0 0 3px var(--paper-lite), inset 0 0 0 4px rgba(31, 58, 44, .45), 0 2px 0 rgba(31, 58, 44, .2);
}
.stamp .leaf { width: 22px; height: 22px; margin: 0; }
.service-list li:nth-child(3n+2) .stamp .leaf { fill: #a8751f; }
.service-list li:nth-child(3n) .stamp .leaf { fill: var(--pine); }
.service-list h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.1875rem; letter-spacing: 0.01em; }
.service-list li { transition: background-color .2s ease; border-radius: 6px; }
@media (hover: hover) { .service-list li:hover { background: rgba(228, 213, 183, .35); } }

/* Pickup band */
.pickup {
  position: relative; background: linear-gradient(180deg, #24443a, var(--pine) 60%, #1a3126);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), var(--shadow-lift);
  outline: 1px dashed rgba(239, 226, 198, .3); outline-offset: -8px;
}
.truck { width: 64px; height: 40px; color: var(--gold); }
.hub { fill: var(--pine); }
@media (min-width: 760px) { .pickup { grid-template-columns: auto auto 1fr; } }

/* How it works: lit pine board */
.how {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 255, 255, .09), transparent 60%),
    url("/assets/img/paper-grain.webp") repeat, var(--pine);
  box-shadow: inset 0 3px 0 var(--pine-deep), inset 0 -3px 0 var(--pine-deep);
}
.step-num {
  background: radial-gradient(circle at 35% 30%, #e4b866, var(--gold) 60%, #b98a36);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}
.step-num::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px dashed rgba(31, 58, 44, .55); }
.steps h3 { font-family: var(--f-display); font-weight: 400; }
@media (min-width: 900px) {
  .steps { position: relative; }
  .steps::before { content: ""; position: absolute; left: 28px; right: 28px; top: 23px; border-top: 2px dashed rgba(212, 162, 76, .45); z-index: 0; }
  .steps li { padding-left: 0; padding-top: 76px; }
  .step-num { top: 0; z-index: 1; }
}

/* About: rubber stamp seal and a signed note */
.seal {
  display: block; width: 200px; height: 200px; margin-top: var(--s-4); color: var(--rust);
  transform: rotate(-8deg); opacity: .92;
  -webkit-mask: url("/assets/img/paper-grain.webp") repeat, linear-gradient(#000, #000); mask: url("/assets/img/paper-grain.webp") repeat, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.seal-ring { font: 400 16px var(--f-display); letter-spacing: 0.14em; fill: currentColor; }
.seal-small { font: 800 13px var(--f-body); letter-spacing: 0.24em; fill: currentColor; }
.seal-big { font: 400 48px var(--f-display); fill: currentColor; }
.years { display: none; }
.about-body { position: relative; }
.about-lead { font-size: var(--t-lg); line-height: 1.45; color: var(--pine); }
.about-lead::first-letter { font-family: var(--f-display); float: left; font-size: 3.6em; line-height: .82; padding: 6px 10px 0 0; color: var(--rust); }
.signoff { display: grid; gap: 2px; padding-top: var(--s-2); border-top: 2px solid var(--pine); max-width: 320px; font-style: normal; font-weight: 600; font-size: var(--t-sm); color: var(--muted); letter-spacing: 0.04em; }
.signoff span { font-family: var(--f-body); font-style: italic; font-weight: 800; font-size: 1.75rem; color: var(--pine); letter-spacing: 0; transform: rotate(-2deg); transform-origin: left; }

/* Towns as hanging tags */
.towns li {
  position: relative; padding: 10px 18px 10px 30px; border-radius: 4px 999px 999px 4px;
  background: var(--paper-lite) url("/assets/img/paper-grain.webp") repeat;
  box-shadow: 0 2px 0 rgba(31, 58, 44, .25);
}
.towns li::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: var(--kraft); border: 2px solid var(--pine);
}
.towns li:nth-child(odd) { transform: rotate(-0.6deg); }
.towns li:nth-child(even) { transform: rotate(0.6deg); }

/* FAQ */
.faq details { transition: background-color .2s ease; }
.faq details[open] { background: rgba(228, 213, 183, .3); border-radius: 0 0 8px 8px; }
.faq summary, .faq details p { padding-left: 12px; padding-right: 12px; }
.faq summary::after { background: var(--paper-lite); box-shadow: 0 2px 0 rgba(31, 58, 44, .25); }

/* Contact form card */
.estimate-form { background: var(--paper) url("/assets/img/paper-grain.webp") repeat; box-shadow: var(--vignette), 0 3px 0 rgba(31, 58, 44, .2); }
.field input, .field select, .field textarea { box-shadow: inset 0 2px 4px rgba(22, 38, 28, .12); }
.swash-title span { text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }

/* Footer */
.footer-body { background: url("/assets/img/paper-grain.webp") repeat, var(--pine); }
.footer-tag { font-style: italic; font-weight: 600; color: var(--gold); margin-top: var(--s-2) !important; }
.footer-brand img { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .25)); }

@media (max-width: 420px) {
  .bill::before, .bill::after { top: 10px; width: 11px; height: 11px; }
  .bill::before { left: 10px; } .bill::after { right: 10px; }
  .seal { width: 170px; height: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .action-bar, .menu-btn, .site-nav { display: none !important; }
  body { padding: 0; background: #fff; }
}

/* Accessibility fixes 2026-10-13: keep focused fields and links clear of the phone action bar (WCAG 2.4.11) */
@media (max-width: 899px) {
  html { scroll-padding-bottom: calc(var(--bar-total) + 16px); }
}
.statement-list { list-style: disc; padding-left: 1.25em; margin: 0 0 var(--s-2); }
.statement-list li { margin-bottom: 8px; }