/* Wagner Christmas Trees page layouts. Colors and sizes come from tokens.css and tokens-site.css only. */

/* ---------- Type ---------- */
.h-display { margin: 0; font-family: var(--font-slab); font-weight: 700; font-size: 72px; line-height: 72px; letter-spacing: -0.01em; text-wrap: balance; }
.h-page { margin: 0; font-family: var(--font-slab); font-weight: 700; font-size: 64px; line-height: 66px; text-wrap: balance; }
.h-section { margin: 0; font-family: var(--font-slab); font-weight: 700; font-size: 44px; line-height: 48px; }
.h-band { margin: 0; font-family: var(--font-slab); font-weight: 700; font-size: 40px; line-height: 44px; text-wrap: balance; }
.h-sub { margin: 0; font-family: var(--font-slab); font-weight: 700; font-size: 32px; line-height: 36px; }
.h-sub--36 { font-size: 36px; line-height: 40px; }
.lead { margin: 0; font-size: 22px; line-height: 32px; }
.lead--narrow { font-size: 21px; line-height: 31px; max-width: 560px; }
.body-lg { margin: 0; font-size: 18px; line-height: 28px; max-width: var(--text-max); }
.story { margin: 0; font-size: 19px; line-height: 30px; }
.signoff { margin: 0; font-family: var(--font-slab); font-weight: 700; font-size: 26px; line-height: 32px; }
.muted { color: var(--ink-muted); }
.note { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.caption { margin-top: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.text-18 { font-size: 18px; }
.text-max { max-width: var(--text-max); }
.text-600 { max-width: 600px; }
.link-bold { font-size: 17px; font-weight: 700; }
.eyebrow-on-dark { color: var(--eyebrow-on-dark); }
p { margin: 0; }
.rule-heavy--mb { margin-bottom: var(--space-6); }

/* Spacing helpers */
.stack-6, .stack-12, .stack-14, .stack-16, .stack-20, .stack-22, .stack-24, .stack-40 { display: flex; flex-direction: column; }
.stack-6 { gap: 6px; }
.stack-12 { gap: var(--space-3); }
.stack-14 { gap: 14px; }
.stack-16 { gap: var(--space-4); }
.stack-20 { gap: 20px; }
.stack-22 { gap: 22px; }
.stack-24 { gap: var(--space-6); }
.stack-40 { gap: 40px; }
.mt-8 { margin-top: var(--space-2); }
.mt-12 { margin-top: var(--space-3); }
.mb-12 { margin-bottom: var(--space-3); }
.mb-16 { margin-bottom: var(--space-4); }
.pt-72 { padding-top: 72px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.btn-row--note { gap: var(--space-4); margin-top: var(--space-3); }

/* Photos: <picture> steps aside so the <img> sizes itself in flex and grid layouts. */
picture { display: contents; }
picture > source { display: none; }
.split__photo, .photo-grid__img, .extras__photo, .wide-photo, .pair__img, .reserve__photo { display: block; object-fit: cover; border-radius: var(--radius-md); }

/* ---------- Sections ---------- */
.section { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.section--tight-top { padding-top: var(--space-16); }
.section--flush-top { padding-top: 0; }
.page-intro { padding-top: 80px; padding-bottom: 80px; }
.page-intro--short { padding-bottom: 48px; }
.band-sunk { background: var(--paper-sunk); padding-top: var(--space-16); padding-bottom: 80px; }
.section-head { display: flex; flex-direction: column; gap: var(--space-3); max-width: 720px; margin-top: var(--space-8); }

/* Hero (home, visit) */
.hero { position: relative; height: 760px; overflow: hidden; background: var(--hero-backdrop); color: var(--on-pine); }
.hero--short { height: 440px; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__tint { position: absolute; left: 0; top: 0; bottom: 0; width: 900px; max-width: 100%; background: var(--hero-tint); }
.hero__tint--full { width: 100%; background: var(--hero-tint-phone); }
.hero__inner { position: relative; height: 100%; width: 100%; padding-left: max(20px, calc((100% - var(--content-max)) / 2)); padding-right: max(20px, calc((100% - var(--content-max)) / 2)); }
.hero__text { position: absolute; top: 120px; width: 720px; max-width: calc(100% - 40px); display: flex; flex-direction: column; gap: var(--space-6); }
.hero__inner--bottom .hero__text { top: auto; bottom: var(--space-16); max-width: min(760px, calc(100% - 40px)); }
.hero__lead { margin: 0; font-size: 22px; line-height: 32px; max-width: 600px; }
.hero__text .btn-row { margin-top: var(--space-2); }
.hero__status { position: absolute; bottom: var(--space-12); width: 560px; max-width: calc(100% - 40px); }
.hero .wg-btn:focus-visible, .hero a:focus-visible { outline-color: var(--on-pine); }

/* Proof line */
.proof { background: var(--paper-sunk); }
.proof__inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: 17px; font-weight: 600; }
.proof__sep { color: var(--line); }
/* Google requires a "Google Maps" text credit next to Places data shown without a map:
   Roboto or a sans-serif fallback, 12-16px, one line, 4.5:1 contrast. */
.proof__attribution { margin-left: 6px; font-family: Roboto, Arial, sans-serif; font-size: 12px; font-weight: 400; color: var(--ink-muted); white-space: nowrap; }

/* Two columns: main text plus a photo or side column */
.split { display: flex; gap: 80px; align-items: flex-start; }
.split--top { align-items: flex-start; }
.split--bottom { align-items: flex-end; }
.split--center { align-items: center; }
.split__main { flex: 1 1 0; min-width: 0; }
.split__side { width: 440px; flex-shrink: 0; }
.split__side--420 { width: 420px; }
.split__side--380 { width: 380px; }
.split__figure { margin: 0; flex-shrink: 0; }
.split__photo { flex-shrink: 0; }
.split__photo--home-reserve { width: 420px; height: 500px; }
.split__photo--square { width: 400px; height: 400px; }
.split__photo--tall { width: 380px; height: 480px; }
.split__photo--portrait { width: 440px; height: 560px; }
.split__photo--care { width: 360px; height: 440px; }
.wide-photo { width: 100%; height: 460px; margin-top: var(--space-4); }

/* Numbered steps */
.steps { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }
.steps li { display: flex; gap: var(--space-4); align-items: baseline; font-size: 18px; line-height: 28px; }
.steps__n { width: 28px; flex-shrink: 0; font-family: var(--font-slab); font-weight: 700; font-size: 28px; color: var(--berry); }
.steps--md { margin: 0; gap: 18px; }
.steps--md li { gap: 14px; }
.steps--md .steps__n { width: auto; font-size: 26px; }

.steps-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.steps-grid li { display: flex; flex-direction: column; gap: 10px; }
.steps-grid__n { font-family: var(--font-slab); font-weight: 700; font-size: 36px; line-height: 40px; color: var(--berry); }
.steps-grid strong { font-size: 18px; }
.steps-grid li > span:last-child { font-size: 16px; line-height: 24px; }

/* Price list beside a panel */
.list-panel { display: flex; gap: var(--space-16); align-items: flex-start; }
.section-head + .list-panel { margin-top: var(--space-8); }
.list-panel__list { flex: 1 1 0; min-width: 0; }
.list-panel__list .link-strong { display: inline-block; margin-top: var(--space-4); }
.list-panel__panel { width: 400px; flex-shrink: 0; }
.list-panel__panel--offset { padding-top: 26px; }

/* Pine band with a photo */
.band-pine { display: flex; background: var(--pine); color: var(--on-pine); min-height: 600px; }
.band-pine__figure { margin: 0; width: 57%; flex-shrink: 0; }
.band-pine__figure .band-pine__img { width: 100%; height: 100%; }
.band-pine__img { display: block; width: 50%; flex-shrink: 0; height: auto; object-fit: cover; }
.band-pine__text { flex: 1 1 0; padding: var(--space-24) max(20px, calc((100vw - var(--content-max)) / 2)) var(--space-12) 80px; }
.band-pine__body { margin: 0; font-size: 18px; line-height: 28px; color: var(--on-pine-muted); }
.band-pine__text .story { color: var(--on-pine-muted); }
.caption-on-pine { margin: 0; font-size: 14px; line-height: 20px; color: var(--on-pine-muted); }
.link-on-pine { color: var(--on-pine); font-size: 17px; font-weight: 700; }
.link-on-pine:hover { color: var(--on-pine-muted); }
.band-pine--hero { min-height: 720px; }
.band-pine__text--hero { padding: 112px 72px var(--space-12) max(20px, calc((100vw - var(--content-max)) / 2)); }
.band-pine__img--right { width: 560px; height: 720px; }
.band-pine a:focus-visible { outline-color: var(--on-pine); }

/* Heading row with an aside on the right */
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-12); }
.head-row--baseline { align-items: baseline; }
.head-row__text { max-width: 640px; }
.head-row__aside { display: flex; flex-direction: column; gap: var(--space-1); font-size: 16px; line-height: 24px; text-align: right; }
.photo-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.photo-grid__img { width: 100%; height: 420px; }

/* Reviews */
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.review-card { margin: 0; padding: var(--space-6); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-4); }
.review-card blockquote { margin: 0; font-size: 18px; line-height: 28px; }
.review-card figcaption { font-size: 15px; color: var(--ink-muted); }

/* Trees: wreaths, garland and photo */
.grid-3--extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); align-items: start; margin-top: 40px; }
.extras__photo { width: 100%; height: 560px; }

/* Lists, tables, cards */
.bullets { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--space-3); font-size: 17px; line-height: 26px; }
.hours { border-collapse: collapse; width: 100%; }
.hours td { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
.hours td:last-child { text-align: right; font-weight: 700; }
.map-card {
  width: 560px; height: 400px; flex-shrink: 0; padding: var(--space-6);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); text-align: center;
  background: var(--paper-sunk); border: 1px solid var(--line); border-radius: var(--radius-lg);
  color: var(--ink-muted); text-decoration: none; font-size: 17px;
}
.map-card:hover { color: var(--ink-muted); border-color: var(--ink-muted); }
.map-card__title { font-family: var(--font-slab); font-weight: 700; font-size: 24px; line-height: 30px; color: var(--ink); }
.map-card__cta { margin-top: var(--space-2); color: var(--link); font-weight: 700; text-decoration: underline; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.grid-2--tight { gap: var(--space-6); }
.pair__img { width: 100%; height: 420px; }

/* Tree care */
.rules { margin: 0; padding: 0; list-style: none; }
.rules li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--line); }
.rules__n { font-family: var(--font-slab); font-weight: 700; font-size: 40px; line-height: 40px; color: var(--berry); }
.rules li div { display: flex; flex-direction: column; gap: 6px; }
.rules strong { font-family: var(--font-slab); font-weight: 700; font-size: 24px; line-height: 30px; }
.rules li div span { font-size: 18px; line-height: 28px; }
.faq { max-width: 880px; }
.faq details { border-top: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-family: var(--font-slab); font-weight: 700; font-size: 20px; line-height: 26px; }
.faq details p { margin: 10px 0 0; font-size: 17px; line-height: 26px; }

/* Privacy */
.prose { max-width: var(--text-max); }

/* Reserve: text on the left (sticky), form on the right; on phones: top text, form, more text. */
.reserve { display: grid; grid-template-columns: 440px minmax(0, 1fr); grid-template-areas: "top form" "more form"; column-gap: var(--space-16); row-gap: 20px; align-items: start; }
.reserve__top { grid-area: top; }
.reserve__more { grid-area: more; }
.reserve__form { grid-area: form; min-width: 0; }
.reserve .h-page { font-size: 52px; line-height: 54px; }
.reserve .lead { font-size: 19px; line-height: 29px; }
.reserve__more .body-lg { font-size: 17px; line-height: 26px; color: var(--ink-muted); }
.reserve__more .note { font-size: 16px; line-height: 24px; color: var(--ink); }
.deposit-line { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 16px; line-height: 24px; }
.deposit-line strong { font-family: var(--font-slab); font-weight: 700; font-size: 22px; line-height: 28px; }
.reserve__photo { width: 100%; height: 240px; }
.form-placeholder { padding: var(--space-8); min-height: 320px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-3); }

/* Reserve form */
.rform { padding: var(--space-8); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 28px; }
.rform__set { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.rform__set--tight { gap: 10px; }
.rform__legend { margin: 0 0 var(--space-3); padding: 0; font-family: var(--font-slab); font-weight: 700; font-size: 20px; line-height: 26px; }
.rform__error { margin: 0; padding: var(--space-3) var(--space-4); background: var(--berry-soft); color: var(--ink); border-left: 4px solid var(--berry); border-radius: var(--radius-sm); font-weight: 600; }
.rform__error:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.rform__none { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.choice { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) 14px; border: 2px solid var(--field-border); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__main { font-family: var(--font-slab); font-weight: 700; font-size: 19px; line-height: 24px; }
.choice__sub { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.choice:has(input:checked) { border-color: var(--pine); background: var(--pine); color: var(--on-pine); }
.choice:has(input:checked) .choice__sub { color: var(--on-pine-muted); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice.is-disabled { opacity: 0.45; cursor: not-allowed; }
.choice.is-disabled .choice__main { text-decoration: line-through; }
.radio-line, .check-line { display: flex; gap: 10px; align-items: center; font-size: 17px; line-height: 24px; cursor: pointer; }
.check-line { align-items: flex-start; font-size: 15px; line-height: 22px; }
.radio-line input, .check-line input { width: 20px; height: 20px; flex-shrink: 0; margin: 0; accent-color: var(--pine); }
.check-line input { margin-top: 1px; }
.field-label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; }
.field--full { width: 100%; }
.field--area { height: 72px; padding: var(--space-3) 14px; resize: vertical; }
select.field { appearance: auto; }
.rform__summary { display: flex; flex-direction: column; gap: 10px; border-top: 2px solid var(--ink); padding-top: 20px; }
.sum-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); font-size: 17px; }
.sum-line__price { font-family: var(--font-slab); font-weight: 700; font-size: 22px; white-space: nowrap; }
.sum-line--extra { font-size: 15px; color: var(--ink-muted); }
.sum-line--due { font-weight: 700; }
.sum-line__due { font-family: var(--font-slab); font-weight: 700; font-size: 28px; color: var(--berry); }
.rform__fine { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); text-align: center; }
.rform__fine[hidden], [data-delivery-only][hidden] { display: none; }
.rform__nudge { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* ---------- Narrow desktop ---------- */
@media (max-width: 1199px) {
  .split { gap: var(--space-12); }
  .split__photo--home-reserve, .split__photo--portrait { width: 360px; }
  .map-card { width: 440px; }
  .band-pine__text { padding-left: var(--space-12); }
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .h-display { font-size: 56px; line-height: 58px; }
  .h-page { font-size: 48px; line-height: 52px; }
  .split, .list-panel { flex-direction: column; align-items: stretch; gap: var(--space-8); }
  .split__side, .split__side--420, .split__side--380, .list-panel__panel { width: 100%; }
  .reserve { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "form" "more"; row-gap: var(--space-8); }
  .pt-72, .list-panel__panel--offset { padding-top: 0; }
  .split__photo, .split__figure { width: 100%; }
  .split__photo--home-reserve, .split__photo--square, .split__photo--tall, .split__photo--portrait, .split__photo--care { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .band-pine, .band-pine--hero { flex-direction: column; min-height: 0; }
  .band-pine__img, .band-pine__figure, .band-pine__img--right { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .band-pine__figure .band-pine__img { aspect-ratio: 3 / 2; }
  .band-pine--hero .band-pine__img--right { order: -1; aspect-ratio: 4 / 3; }
  .band-pine__text, .band-pine__text--hero { padding: var(--space-8) 20px 40px; }
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3--extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .extras__photo { grid-column: 1 / -1; height: 420px; }
  .map-card { width: 100%; height: 240px; }
  .head-row { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .head-row__aside { text-align: left; }
  .review-grid { grid-template-columns: 1fr; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .hide-phone { display: none !important; }
  .section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .section--tight-top { padding-top: var(--space-8); }
  .section--flush-top { padding-top: 0; }
  .page-intro { padding-top: 40px; padding-bottom: 40px; }
  .band-sunk { padding-top: 40px; padding-bottom: 40px; }
  .section-head { margin-top: var(--space-6); }

  .h-display { font-size: 42px; line-height: 44px; }
  .h-page { font-size: 40px; line-height: 42px; }
  .reserve .h-page { font-size: 36px; line-height: 40px; }
  .h-section, .h-sub--36 { font-size: 32px; line-height: 36px; }
  .h-band { font-size: 30px; line-height: 34px; }
  .h-sub { font-size: 28px; line-height: 32px; }
  .lead, .lead--narrow, .hero__lead { font-size: 18px; line-height: 27px; }
  .body-lg, .story, .band-pine__body { font-size: 17px; line-height: 26px; }

  .hero { height: 640px; }
  .hero--short { height: 480px; }
  .hero__tint { width: 100%; background: var(--hero-tint-phone); }
  .hero__text { top: 72px; gap: var(--space-4); }
  .hero__text .btn-row { flex-direction: column; align-items: stretch; margin-top: 0; }
  .hero__text .btn-row .wg-btn { width: 100%; }
  .hero__inner--bottom .hero__text { bottom: 40px; }
  .hero__status { bottom: var(--space-6); }

  .proof__inner { min-height: 0; padding-top: var(--space-4); padding-bottom: var(--space-4); flex-wrap: wrap; justify-content: flex-start; gap: 6px var(--space-3); font-size: 15px; }
  .proof__sep { display: none; }

  .steps { gap: var(--space-3); }
  .steps li { gap: var(--space-3); font-size: 17px; line-height: 25px; }
  .steps__n { font-size: 24px; width: auto; }
  .btn-row--note { flex-direction: column; align-items: stretch; }
  .btn-row--note .wg-btn { width: 100%; }

  .pricelist-phone-compact .wg-price-size { font-size: 18px; line-height: 26px; }
  .pricelist-phone-compact .wg-price-amount { font-size: 20px; line-height: 26px; }

  .photo-grid-3 { grid-template-columns: 1fr; margin-top: var(--space-6); }
  .photo-grid__img { height: 240px; }
  .steps-grid, .grid-3--extras, .grid-2 { grid-template-columns: 1fr; gap: var(--space-8); }
  .grid-2--tight { gap: var(--space-4); }
  .pair__img { height: 300px; }
  .extras__photo { height: 360px; }
  .wide-photo { height: 300px; }

  .rules li { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); padding: 20px 0; }
  .rules__n { font-size: 32px; line-height: 32px; }
  .rules strong { font-size: 20px; line-height: 26px; }
  .rules li div span { font-size: 17px; line-height: 26px; }
  .faq summary { font-size: 18px; line-height: 24px; }

  .form-placeholder { min-height: 200px; padding: var(--space-6); }
  .rform { padding: 20px; margin-left: -4px; margin-right: -4px; }
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Reservation confirmed */
.confirmed { max-width: var(--text-max); }
.confirmed__card { padding: var(--space-6); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); font-size: 17px; line-height: 26px; }
.confirmed__what { font-family: var(--font-slab); font-weight: 700; font-size: 22px; line-height: 28px; }
.confirmed__money { margin-top: var(--space-2); font-weight: 700; }