/* Happy Yard v2 (preview): an architectural, editorial homepage.
   One idea per screen, large type in a regular weight, small labels on a 12-column grid,
   earth-tone panels under the photos, and sunflower used only on the quote button. */

:root {
  --ink: #171A1E;
  --ink-2: #2B2F35;
  --muted: #5E636A;
  --paper: #F6F3EC;
  --paper-2: #EDE8DD;
  --line: rgb(23 26 30 / 0.14);
  --line-light: rgb(255 255 255 / 0.22);
  --sun: #EFA614;
  --sun-deep: #D58F07;
  --vinyl: #CCD2D6;
  --wood: #A4684A;
  --chain: #7C8876;
  --pad: clamp(20px, 3.2vw, 48px);
  --gap: clamp(16px, 2vw, 28px);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 16px; }

.wrap { width: 100%; padding-inline: var(--pad); margin-inline: auto; max-width: 1680px; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.col-l { grid-column: 1 / span 3; }
.col-r { grid-column: 4 / span 9; }
.sec { padding-block: clamp(96px, 12vw, 176px); border-top: 1px solid var(--line); }

/* Type */
.label { display: flex; gap: 14px; align-items: baseline; font-size: 13px; line-height: 1.4; color: var(--muted); letter-spacing: 0.01em; }
.label span { font-variant-numeric: tabular-nums; color: var(--ink); }
.h2 { font-size: clamp(30px, 3.4vw, 54px); line-height: 1.06; font-weight: 400; letter-spacing: -0.03em; max-width: 18ch; text-wrap: balance; }
h3 { font-size: 19px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: -0.005em; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn--sun { background: var(--sun); color: var(--ink); }
.btn--sun:hover { background: var(--sun-deep); }
.btn--line { border: 1px solid var(--line-light); color: #fff; }
.btn--line:hover { border-color: #fff; }

/* Header */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 20px var(--pad); color: #fff; transition: background-color .3s var(--ease), color .3s var(--ease), padding .3s var(--ease); }
.hd__logo { display: block; line-height: 0; }
.hd__logo svg { height: 42px; width: auto; }
.hd__logo-dark { display: none; }
.hd__right { display: flex; align-items: center; gap: 10px; }
.hd__quote { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--sun); color: var(--ink); font-size: 14px; font-weight: 500; transition: background-color .2s var(--ease); }
.hd__quote:hover { background: var(--sun-deep); }
.hd__menu { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 8px 0 16px; border-radius: 999px; border: 1px solid var(--line-light); background: rgb(23 26 30 / 0.28); color: inherit; font: 500 14px/1 var(--font); cursor: pointer; backdrop-filter: blur(6px); transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.hd__menu:hover { border-color: currentColor; }
.hd__bars { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 26px; height: 26px; padding: 0 5px; }
.hd__bars i { display: block; height: 1.5px; background: currentColor; }
.hd.is-solid { background: rgb(246 243 236 / 0.92); color: var(--ink); padding-block: 12px; backdrop-filter: saturate(1.2) blur(12px); border-bottom: 1px solid var(--line); }
.hd.is-solid .hd__logo-light { display: none; }
.hd.is-solid .hd__logo-dark { display: inline; }
.hd.is-solid .hd__menu { border-color: var(--line); background: transparent; }

/* Full-screen menu */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--ink); color: #fff; display: flex; flex-direction: column; padding: 20px var(--pad) 32px; }
.menu[hidden] { display: none; }
.menu__top { display: flex; justify-content: space-between; align-items: center; }
.menu__top svg { height: 42px; width: auto; }
.menu__close { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-light); background: none; color: #fff; font: 500 14px/1 var(--font); cursor: pointer; }
.menu__close span { font-size: 20px; line-height: 1; }
.menu__nav { margin-top: auto; display: flex; flex-direction: column; border-top: 1px solid var(--line-light); }
.menu__nav a { display: flex; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line-light); font-size: clamp(36px, 6vw, 84px); line-height: 1; letter-spacing: -0.035em; transition: padding-left .3s var(--ease), color .2s var(--ease); }
.menu__n { font-size: 13px; letter-spacing: 0; color: rgb(255 255 255 / 0.55); font-variant-numeric: tabular-nums; }
.menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; color: rgb(255 255 255 / 0.7); font-size: 14px; }
.menu__tel { color: #fff; font-size: 16px; }
@media (hover: hover) and (pointer: fine) { .menu__nav a:hover { padding-left: 16px; color: var(--sun); } }

/* Hero */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; color: #fff; background: #8C9298; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform: scale(1.06); transition: transform 2.4s var(--ease); }
.is-loaded .hero__img { transform: scale(1); }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgb(16 18 21 / 0.72) 0%, rgb(16 18 21 / 0.4) 32%, rgb(16 18 21 / 0) 60%), linear-gradient(to bottom, rgb(16 18 21 / 0.35), rgb(16 18 21 / 0) 22%); }
.hero__labels { display: grid; margin-top: clamp(32px, 4.4vw, 56px); padding-top: 16px; border-top: 1px solid rgb(255 255 255 / 0.3); grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); font-size: 13px; color: rgb(255 255 255 / 0.9); }
.hero__labels > span:nth-child(1) { grid-column: 1 / span 3; }
.hero__labels .hero__scroll { grid-column: 10 / span 3; justify-self: end; display: inline-flex; align-items: center; gap: 12px; }
.hero__scroll i { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.6); position: relative; }
.hero__scroll i::after { content: ""; position: absolute; left: 50%; top: 8px; width: 7px; height: 7px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: translateX(-50%) rotate(45deg); }
.hero__copy { position: absolute; left: 0; right: 0; bottom: clamp(24px, 3vw, 40px); }
.hero__title { font-size: clamp(46px, 6.6vw, 116px); line-height: 0.98; font-weight: 400; letter-spacing: -0.032em; max-width: 12ch; }
.hero__sub { margin-top: 24px; max-width: 42ch; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5; color: rgb(255 255 255 / 0.86); }

/* Statement */
.statement { border-top: 0; }
.statement__big { font-size: clamp(26px, 2.9vw, 46px); line-height: 1.18; letter-spacing: -0.025em; max-width: 30ch; text-wrap: pretty; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(56px, 7vw, 112px); }
.facts div { border-top: 1px solid var(--ink); padding-top: 16px; display: flex; flex-direction: column-reverse; gap: 6px; }
.facts dd { font-size: clamp(44px, 5vw, 80px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.facts dt { font-size: 14px; color: var(--muted); }

/* Fence panels */
.fences__head { margin-bottom: clamp(40px, 5vw, 72px); }
.panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.panel { display: flex; flex-direction: column; overflow: hidden; }
.panel__img { display: block; aspect-ratio: 4 / 4.4; overflow: hidden; background: var(--paper-2); }
.panel__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.panel__body { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; min-height: clamp(220px, 20vw, 300px); padding: 24px; }
.panel--vinyl { background: var(--vinyl); color: var(--ink); }
.panel--wood { background: var(--wood); color: #fff; }
.panel--chain { background: var(--chain); color: #fff; }
.panel__plus { grid-column: 2; grid-row: 1; justify-self: end; width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; opacity: 0.8; position: relative; transition: transform .4s var(--ease), opacity .2s var(--ease); }
.panel__plus::before, .panel__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1px; background: currentColor; transform: translate(-50%, -50%); }
.panel__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.panel__count { grid-column: 1; grid-row: 3; align-self: end; font-size: 12px; opacity: 0.75; margin-top: 10px; }
.panel__name { grid-column: 1; grid-row: 2; align-self: end; font-size: clamp(34px, 3.2vw, 56px); line-height: 1; letter-spacing: -0.035em; }
.panel__desc { grid-column: 2; grid-row: 2 / span 2; align-self: end; justify-self: end; max-width: 16ch; text-align: right; font-size: 14px; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) {
  .panel:hover .panel__img img { transform: scale(1.04); }
  .panel:hover .panel__plus { transform: rotate(90deg); opacity: 1; }
}

/* How it works */
.how__in { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--gap); }
.how__fig { grid-column: 1 / span 4; align-self: start; position: sticky; top: 96px; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2); }
.how__fig img { width: 100%; height: 100%; object-fit: cover; }
.how__text { grid-column: 6 / span 4; }
.steps { margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.steps__n { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 4px; }
.steps p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 40ch; }

/* Towns */
.towns__list { margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); }
.towns__list li { border-bottom: 1px solid var(--line); }
.towns__list a, .towns__list span { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: clamp(26px, 2.6vw, 42px); line-height: 1.1; letter-spacing: -0.03em; }
.towns__list span { color: var(--muted); }
.towns__list a::after { content: "Permits"; font-size: 13px; letter-spacing: 0; color: var(--muted); transition: color .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .towns__list a:hover::after { color: var(--ink); } .towns__list a:hover { color: var(--ink-2); } }

/* Quote */
.quote { background: var(--ink); color: #fff; padding-block: clamp(112px, 14vw, 200px); }
.quote .label, .quote .label span { color: rgb(255 255 255 / 0.6); }
.quote .label span { color: #fff; }
.quote__title { font-size: clamp(44px, 6.4vw, 112px); line-height: 0.96; font-weight: 400; letter-spacing: -0.045em; max-width: 12ch; }
.quote__sub { margin-top: 28px; max-width: 44ch; font-size: clamp(15px, 1.15vw, 18px); color: rgb(255 255 255 / 0.72); }
.quote__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

/* Footer */
.ft { background: var(--ink); color: rgb(255 255 255 / 0.72); padding: 0 0 32px; border-top: 1px solid var(--line-light); }
.ft__word { font-size: clamp(64px, 18.6vw, 340px); line-height: 1; letter-spacing: -0.06em; color: #fff; padding-top: clamp(48px, 6vw, 96px); padding-bottom: 0.06em; white-space: nowrap; overflow-x: clip; margin-left: -0.04em; }
.ft__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(48px, 6vw, 96px); padding-top: 24px; border-top: 1px solid var(--line-light); }
.ft__cols div { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.ft__cols .label { color: rgb(255 255 255 / 0.5); margin-bottom: 6px; }
.ft__cols a:hover { color: #fff; }
.ft__legal { margin-top: 56px; font-size: 12px; color: rgb(255 255 255 / 0.45); }

/* Reveal: photos and lines settle in once (transform and opacity only) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* Tablet and phone */
@media (max-width: 1000px) {
  .col-l, .col-r { grid-column: 1 / -1; }
  .col-l { margin-bottom: 28px; }
  .panels { grid-template-columns: 1fr; gap: 12px; }
  .panel__img { aspect-ratio: 4 / 3.4; }
  .how__in { grid-template-columns: 1fr; row-gap: 48px; }
  .how__fig, .how__text { grid-column: 1 / -1; position: static; }
  .how__fig { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .hd__logo svg, .menu__top svg { height: 34px; }
  .hd__menu span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hd__menu { padding: 0 7px; }
  .hero { min-height: 560px; }
  .hero__labels { display: flex; justify-content: space-between; font-size: 12px; }
  .facts { grid-template-columns: 1fr; gap: 28px; }
  .ft__cols { grid-template-columns: 1fr 1fr; }
  .panel__body { min-height: 200px; padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__img { transform: none; transition: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .panel__img img, .panel__plus, .menu__nav a, .hd { transition: none; }
}

/* ===== Spark and leads (Nov 3) ===== */
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #000; }

/* Hero: headline rises in line by line, then the quote action */
.hero__title .ln { display: block; overflow: hidden; padding: 0.12em 0.04em 0.2em; margin: -0.12em -0.04em -0.2em; } /* room for descenders (g, y) so the reveal mask never cuts them */
.hero__title .ln > span { display: block; }
.js .hero__title .ln > span { transform: translateY(105%); transition: transform 1.1s var(--ease); }
.js .hero__title .ln:nth-child(2) > span { transition-delay: .12s; }
.js.is-loaded .hero__title .ln > span { transform: none; }
.js .hero__sub, .js .hero__acts { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease) .45s, transform .8s var(--ease) .45s; }
.js.is-loaded .hero__sub, .js.is-loaded .hero__acts { opacity: 1; transform: none; }
.hero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.hero__call { font-size: 15px; color: rgb(255 255 255 / 0.9); border-bottom: 1px solid rgb(255 255 255 / 0.4); padding-bottom: 2px; }
.hero__call:hover { border-color: #fff; }

/* The fence that builds itself: each post drops in (driven, not dug) as you scroll */
.build { margin-top: clamp(56px, 7vw, 104px); }
.build__line { position: relative; height: 84px; border-bottom: 1px solid var(--ink); display: flex; justify-content: space-between; align-items: flex-end; }
.build__post { position: relative; width: 7px; height: 72px; background: var(--ink); border-radius: 2px 2px 0 0; transform: translateY(-48px); opacity: 0; transition: transform .5s cubic-bezier(.34, 1.45, .55, 1), opacity .2s linear; }
.build__post.down { transform: none; opacity: 1; }
.build__rail { position: absolute; height: 1.5px; background: var(--ink); transform-origin: left center; transform: scaleX(0); transition: transform .5s var(--ease) .12s; }
.build__rail.on { transform: scaleX(1); }
.build__cap { margin-top: 14px; display: flex; gap: 8px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.build__cap span:first-child { color: var(--ink); }
.build__zero { color: var(--ink); }

/* Fence panels: a sunflower "View" disc follows the pointer */
.panels { position: relative; }
.vcur { position: absolute; left: 0; top: 0; z-index: 5; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--sun); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; pointer-events: none; opacity: 0; transform: scale(.6); transition: opacity .25s var(--ease), transform .35s var(--ease); }
.vcur.on { opacity: 1; transform: scale(1); }
@media (hover: none), (pointer: coarse) { .vcur { display: none; } }
@media (hover: hover) and (pointer: fine) { .panels.has-cur .panel { cursor: none; } }

/* Nudge after the fences */
.nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(40px, 5vw, 64px); padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nudge p { font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -0.02em; line-height: 1.25; max-width: 34ch; }

/* Quote: intro on the left, the form on the right */
.quote__intro { grid-column: 1 / span 5; display: flex; flex-direction: column; }
.quote__intro .label { margin-bottom: 28px; }
.quote__title { font-size: clamp(44px, 5.2vw, 88px); text-wrap: balance; max-width: 9ch; }
.quote__next { margin-top: 40px; border-top: 1px solid var(--line-light); }
.quote__next li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line-light); font-size: 15px; color: rgb(255 255 255 / 0.82); }
.quote__next span { color: var(--sun); font-variant-numeric: tabular-nums; }
.quote__call { margin-top: 28px; font-size: 15px; color: rgb(255 255 255 / 0.7); }
.quote__call a { color: #fff; border-bottom: 1px solid rgb(255 255 255 / 0.4); }
.qf { grid-column: 7 / span 6; background: var(--paper); color: var(--ink); border-radius: 20px; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 18px; position: relative; }
.qf__set { border: 0; margin: 0; padding: 0; }
.qf__legend { font-size: 14px; color: var(--muted); margin-bottom: 10px; padding: 0; }
.qf__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qf__chips label { position: relative; }
.qf__chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.qf__chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); font-size: 15px; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.qf__chips input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.qf__chips input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.qf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qf__f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
.qf__f em { font-style: normal; opacity: .75; }
.qf__f input, .qf__f select, .qf__f textarea { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: 16px/1.4 var(--font); color: var(--ink); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.qf__f textarea { padding: 14px 16px; min-height: 76px; resize: vertical; }
.qf__f input:focus, .qf__f select:focus, .qf__f textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgb(239 166 20 / 0.45); }
.qf__f [aria-invalid="true"] { border-color: #B42318; }
.qf__check { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.45; cursor: pointer; }
.qf__check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.qf__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.qf__err { padding: 12px 14px; border-radius: 12px; background: #FBEDE6; color: #7C2D12; font-size: 14px; }
.qf__go { min-height: 58px; font-size: 16px; }
.qf__go[aria-busy="true"] { opacity: .7; pointer-events: none; }
.qf__fine { font-size: 12.5px; color: var(--muted); text-align: center; }
.qf__done { position: absolute; inset: 0; border-radius: 20px; background: var(--paper); display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(24px, 3vw, 48px); }
.qf__done[hidden] { display: none; }
.qf__done-t { font-size: clamp(32px, 3vw, 48px); line-height: 1.05; letter-spacing: -0.035em; }
.qf__done p:last-child { color: var(--muted); max-width: 36ch; }

/* Phone: a quote bar that follows, out of the way on the hero and at the form */
.mbar { display: none; }
@media (max-width: 1000px) {
  .quote__intro, .qf { grid-column: 1 / -1; }
  .qf { margin-top: 40px; }
  .mbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; display: flex; gap: 8px; padding: 8px; border-radius: 999px; background: rgb(23 26 30 / 0.92); backdrop-filter: blur(10px); box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.45); transform: translateY(140%); transition: transform .4s var(--ease); }
  .mbar.on { transform: none; }
  .mbar .btn { flex: 1; min-height: 48px; }
  .mbar__call { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 1px solid var(--line-light); color: #fff; display: flex; align-items: center; justify-content: center; }
  .ft { padding-bottom: 96px; }
}
@media (max-width: 640px) {
  .qf__row { grid-template-columns: 1fr; }
  .build__line { height: 64px; }
  .build__post { width: 5px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero__title .ln > span, .js .hero__sub, .js .hero__acts { transform: none; opacity: 1; transition: none; }
  .build__post { transform: none; opacity: 1; transition: none; }
  .build__rail { transform: none; transition: none; }
  .vcur, .mbar { transition: none; }
}

/* ===== Footer wordmark: big and bold, 70% see-through (owner's call, Nov 3) */
.ft { padding-top: 0; }
.quote { padding-bottom: clamp(96px, 11vw, 160px); }
.ft__word { font-weight: 600; color: rgb(255 255 255 / 0.3); letter-spacing: -0.05em; }
.ft__cols { margin-top: clamp(72px, 8vw, 120px); }

/* ===== Inner pages (Nov 3): the same system across the site ===== */
.hero__note { display: inline-flex; margin-bottom: 20px; padding: 6px 14px; border-radius: 999px; background: rgb(255 255 255 / 0.14); border: 1px solid rgb(255 255 255 / 0.25); font-size: 13px; backdrop-filter: blur(6px); }

/* Page hero: title on the grid, wide photo, a row of facts */
.phero { padding-top: clamp(132px, 14vw, 200px); }
.phero__top { align-items: start; }
.phero__top .label { margin-top: 18px; }
.phero__back { display: inline-block; font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.phero__back:hover { color: var(--ink); }
.phero__title { font-size: clamp(42px, 5.8vw, 100px); line-height: 1; font-weight: 400; letter-spacing: -0.04em; max-width: 14ch; text-wrap: balance; }
.phero__title .ln { display: block; overflow: hidden; padding: 0.12em 0.04em 0.2em; margin: -0.12em -0.04em -0.2em; }
.phero__title .ln > span { display: block; }
.js .phero__title .ln > span { transform: translateY(105%); transition: transform 1.1s var(--ease); }
.js.is-loaded .phero__title .ln > span { transform: none; }
.phero__lead { margin-top: 28px; max-width: 46ch; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5; color: var(--muted); }
.phero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 36px; }
.phero__call { font-size: 15px; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.phero__call:hover { border-color: var(--ink); }
.phero__fig { margin-top: clamp(56px, 7vw, 104px); }
.phero__img { aspect-ratio: 16 / 8; overflow: hidden; background: var(--paper-2); }
.phero__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 2.2s var(--ease); }
.is-loaded .phero__img img { transform: none; }
.facts--row { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(32px, 4vw, 56px); }
.facts--row dd { font-size: clamp(20px, 1.9vw, 30px); letter-spacing: -0.02em; line-height: 1.2; }
.phero + .sec { border-top: 0; }

/* Section helpers */
.sec__lead { margin-top: 24px; max-width: 52ch; font-size: clamp(16px, 1.2vw, 19px); color: var(--muted); }
.sec__note { margin-top: 28px; font-size: 14px; color: var(--muted); max-width: 70ch; }
.sec__note a { border-bottom: 1px solid var(--line); }
.sec--ink { background: var(--ink); color: #fff; border-top: 0; }
.sec--ink .label { color: rgb(255 255 255 / 0.6); }
.sec--ink .label span { color: #fff; }
.facts--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sec--ink .facts div { border-top-color: rgb(255 255 255 / 0.5); }
.sec--ink .facts dt { color: rgb(255 255 255 / 0.66); line-height: 1.45; }
.sec--ink .facts dd { color: var(--sun); }

/* Styles list */
.rows { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.rows li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; gap: 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); }
.rows__name { font-size: clamp(22px, 2vw, 32px); letter-spacing: -0.025em; line-height: 1.15; }
.rows__desc { color: var(--muted); font-size: 15px; }
.rows__tag { font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }

/* Fit: two columns with thin rules */
.fit2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: clamp(40px, 5vw, 64px); }
.fit2 h3 { font-size: 14px; font-weight: 500; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.fit2 li { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: clamp(17px, 1.35vw, 21px); letter-spacing: -0.01em; line-height: 1.35; }
.fit2 div:last-child li { color: var(--muted); }

/* FAQ: thin rules, a plus that turns to a minus */
.faq2 { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.faq2 details { border-bottom: 1px solid var(--line); }
.faq2 summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 72px; padding: 18px 0; cursor: pointer; font-size: clamp(18px, 1.5vw, 23px); letter-spacing: -0.015em; line-height: 1.3; }
.faq2 summary::-webkit-details-marker { display: none; }
.faq2__pm { position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--line); transition: transform .35s var(--ease), background-color .2s var(--ease); }
.faq2__pm::before, .faq2__pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform .35s var(--ease); }
.faq2__pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq2 details[open] .faq2__pm { background: var(--ink); color: #fff; border-color: var(--ink); }
.faq2 details[open] .faq2__pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq2 details p { padding: 0 64px 28px 0; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 70ch; }
.faq2__more { margin-top: 24px; font-size: 15px; color: var(--muted); }
.faq2__more a { color: var(--ink); border-bottom: 1px solid var(--line); }
@media (hover: hover) and (pointer: fine) { .faq2 summary:hover .faq2__pm { border-color: var(--ink); } }

/* Town rules */
.rules2 { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.rules2 div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.rules2 dt { color: var(--muted); font-size: 14px; }
.rules2 dd { margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.4; }
.towns__list--sum a { align-items: baseline; gap: 24px; }
.towns__list--sum a::after { content: "Rules"; }
.towns__list--sum small { margin-left: auto; font-size: 14px; letter-spacing: 0; color: var(--muted); max-width: 38ch; text-align: right; }

/* Dog picker */
.dogpick { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--gap); align-items: start; }
.dogpick__opts { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.dogpick__opts button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: clamp(22px, 2vw, 32px); letter-spacing: -0.025em; color: var(--muted); transition: color .2s var(--ease), padding-left .3s var(--ease); }
.dogpick__opts button::after { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1px solid currentColor; }
.dogpick__opts button[aria-pressed="true"] { color: var(--ink); padding-left: 12px; }
.dogpick__opts button[aria-pressed="true"]::after { background: var(--sun); border-color: var(--sun); }
.dogpick__opts button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.dogpick__ans { position: sticky; top: 110px; background: var(--paper-2); border-radius: 20px; padding: clamp(24px, 3vw, 40px); }
.dogpick__t { font-size: clamp(36px, 3.6vw, 60px); letter-spacing: -0.04em; line-height: 1; margin-bottom: 16px; }
.dogpick__ans p:last-child { color: var(--muted); }

/* Recent work and reviews (shown once the owner adds them on the Website page) */
.work2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: clamp(40px, 5vw, 64px); }
.work2 figure { margin: 0; }
.work2 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.work2 figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 14px; }
.work2 figcaption span:last-child { color: var(--muted); }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); margin-top: clamp(40px, 5vw, 64px); }
.quotes blockquote { margin: 0; padding-top: 20px; border-top: 1px solid var(--ink); }
.quotes p { font-size: clamp(20px, 1.6vw, 26px); letter-spacing: -0.02em; line-height: 1.3; }
.quotes footer { margin-top: 16px; font-size: 14px; color: var(--muted); }
.quotes__more { margin-top: 28px; font-size: 14px; }
.quotes__more a { border-bottom: 1px solid var(--line); }

/* Privacy and other documents */
.doc { padding-top: clamp(140px, 14vw, 200px); border-top: 0; }
.prose2 { max-width: 72ch; }
.prose2 h1 { font-size: clamp(40px, 4.6vw, 76px); font-weight: 400; letter-spacing: -0.04em; line-height: 1.02; margin-bottom: 16px; }
.prose2 h2 { font-size: clamp(20px, 1.6vw, 26px); font-weight: 400; letter-spacing: -0.02em; margin: 48px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.prose2 p, .prose2 li { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.prose2 p + p { margin-top: 12px; }
.prose2 ul { list-style: disc; padding-left: 20px; margin: 12px 0; }
.prose2 .hy-small { font-size: 13px; color: var(--muted); }
.prose2 a { border-bottom: 1px solid var(--line); }
.prose2 .draft { display: inline-block; margin-bottom: 24px; padding: 6px 12px; border-radius: 999px; background: #FBEDE6; color: #7C2D12; font-size: 13px; }

/* Footer: logo mark, columns, the big wordmark */
.ft__top { display: flex; align-items: center; gap: 24px; padding-top: clamp(56px, 6vw, 96px); }
.ft__mark { line-height: 0; flex: none; }
.ft__mark svg { height: clamp(72px, 6.4vw, 104px); width: auto; }
.ft__line { max-width: 34ch; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.4; color: rgb(255 255 255 / 0.82); letter-spacing: -0.01em; }
.ft__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 80px); }
.ft__cols span { color: rgb(255 255 255 / 0.5); }
.ft__word { margin-top: clamp(40px, 5vw, 72px); padding-top: 0; }
.ft__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-light); }

@media (max-width: 1000px) {
  .facts--four { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .dogpick { grid-template-columns: 1fr; }
  .dogpick__ans { position: static; }
  .work2 { grid-template-columns: 1fr 1fr; }
  .ft__cols { grid-template-columns: 1fr 1fr; row-gap: 40px; }
}
@media (max-width: 640px) {
  .phero { padding-top: 112px; }
  .phero__img { aspect-ratio: 4 / 3; }
  .facts--row { grid-template-columns: 1fr; gap: 20px; }
  .rows li { grid-template-columns: 1fr; gap: 8px; }
  .rows__tag { justify-self: start; }
  .fit2 { grid-template-columns: 1fr; row-gap: 40px; }
  .rules2 div { grid-template-columns: 1fr; gap: 6px; }
  .towns__list--sum a { flex-wrap: wrap; }
  .towns__list--sum small { margin-left: 0; text-align: left; flex-basis: 100%; }
  .towns__list--sum a::after { display: none; }
  .faq2 details p { padding-right: 0; }
  .work2 { grid-template-columns: 1fr; }
  .ft__top { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .js .phero__title .ln > span { transform: none; transition: none; }
  .phero__img img { transform: none; transition: none; }
  .faq2__pm, .faq2__pm::before, .faq2__pm::after, .dogpick__opts button { transition: none; }
}

/* Optional visit time inside the quote form */
.qf__when { border: 0; margin: 0; padding: 0; min-width: 0; }
.qf__days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.qf__day, .qf__time { position: relative; flex: none; scroll-snap-align: start; }
.qf__day input, .qf__time input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.qf__day span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 68px; min-height: 64px; border-radius: 14px; border: 1px solid var(--line); background: #fff; font-size: 13px; color: var(--muted); transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.qf__day b { font-weight: 500; font-size: 14px; color: var(--ink); }
.qf__times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 10px; }
.qf__times[hidden] { display: none; }
.qf__time span { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 14px; font-variant-numeric: tabular-nums; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.qf__day input:checked + span, .qf__time input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.qf__day input:checked + span b { color: #fff; }
.qf__day input:focus-visible + span, .qf__time input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.qf__when-note { margin-top: 10px; font-size: 13px; color: var(--muted); }
.qf__clear { all: unset; cursor: pointer; color: var(--ink); border-bottom: 1px solid var(--line); margin-left: 4px; }
.qf__clear:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .qf__day:hover span, .qf__time:hover span { border-color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .qf__day span, .qf__time span { transition: none; } }

/* Hero: the serving line sits in the middle; all towns on wide screens, the two counties elsewhere */
.hero__labels .hero__serving { grid-column: 4 / span 6; justify-self: center; text-align: center; }
.hero__serving-sm { display: none; }
@media (max-width: 1199px) { .hero__serving-lg { display: none; } .hero__serving-sm { display: inline; } }
@media (max-width: 640px) {
  .hero__labels > span:first-child { display: none; }
  .hero__labels .hero__serving { display: inline; text-align: left; justify-self: start; }
}

/* The nudge after the fences: a dark band with the sunflower button */
.nudge { margin-top: clamp(40px, 5vw, 64px); padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3.6vw, 56px); border: 0; border-radius: 20px; background: var(--ink); color: #fff; }
.nudge p { color: #fff; }
.nudge { margin-bottom: clamp(56px, 7vw, 112px); }
/* The nudge band runs edge to edge (owner: full width, not a pill) */
.nudge-band { background: var(--ink); color: #fff; margin: clamp(56px, 7vw, 112px) 0; }
.nudge-band .nudge { margin: 0; border-radius: 0; background: none; padding-block: clamp(32px, 4vw, 56px); }
.nudge-band + .sec { border-top: 0; }

/* ===== Our work: a filmstrip. On desktop the section pins and the photos glide sideways as you
   scroll down; frames alternate high and low, each photo drifts a little inside its frame, and a
   thin line fills as you go. Phones and reduced motion get a plain swipe strip. */
.work { position: relative; border-top: 1px solid var(--line); }
.work__pin { padding-block: clamp(72px, 8vw, 120px) 40px; overflow: hidden; }
.work__head { margin-bottom: clamp(36px, 4vw, 64px); }
.work__track { display: flex; gap: clamp(16px, 2vw, 32px); padding-inline: var(--pad); padding-bottom: 56px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.work__track::-webkit-scrollbar { display: none; }
.work__track:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.work__item { flex: none; width: clamp(260px, 30vw, 500px); margin: 0; scroll-snap-align: start; }
.work__item--low { transform: translateY(48px); }
.work__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.work__img img { position: absolute; inset: 0 -8%; width: 116%; max-width: none; height: 100%; object-fit: cover; will-change: transform; transition: scale .8s var(--ease); }
.work__slot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px; border: 1px dashed var(--line); color: var(--muted); font-size: 15px; }
.work__slot small { font-size: 12px; max-width: 24ch; }
.work__item figcaption { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; padding-top: 16px; }
.work__n { grid-row: span 2; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 3px; }
.work__cap { font-size: clamp(17px, 1.3vw, 21px); letter-spacing: -0.015em; line-height: 1.25; }
.work__meta { font-size: 13px; color: var(--muted); }
.work__end { flex: none; width: clamp(240px, 24vw, 380px); display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 0 clamp(8px, 2vw, 32px); scroll-snap-align: end; }
.work__end p { font-size: clamp(26px, 2.6vw, 42px); letter-spacing: -0.03em; line-height: 1.1; }
.work__end .btn { align-self: flex-start; }
.work__foot { display: flex; align-items: center; gap: 20px; }
.work__bar { position: relative; flex: 1; height: 1px; background: var(--line); }
.work__bar i { position: absolute; left: 0; top: -0.5px; height: 2px; width: 100%; background: var(--ink); transform-origin: left center; transform: scaleX(0); }
.work__hint { font-size: 13px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .work__item:hover .work__img img { scale: 1.04; } }
/* Desktop pinned mode (set by v2.js) */
.work.is-pinned .work__pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: 72px 32px; }
.work.is-pinned .work__track { overflow: visible; scroll-snap-type: none; will-change: transform; }
.work.is-pinned .work__head { margin-bottom: clamp(28px, 3vw, 48px); }
.work.is-pinned .work__img { aspect-ratio: auto; height: min(56vh, 620px); }
.work.is-pinned .work__item { width: auto; aspect-ratio: auto; }
.work.is-pinned .work__item .work__img { width: calc(min(56vh, 620px) * 0.8); }
@media (max-width: 899px) { .work__item--low { transform: none; } .work__hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .work__item--low { transform: none; } .work__img img { transition: none; inset: 0; width: 100%; } }