/* Porch PNW — one deliberate light theme: warm ivory paper, forest-green ink,
   burgundy for actions and ribbon, muted brass for hairlines only.
   Layout: editorial asymmetry (hero 45/55, offset package rows), quiet rules, no card shadows.
   Type floor: nothing renders below 16px. */

@font-face { font-family: 'Libre Caslon Text'; src: url('../assets/fonts/caslon-text.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../assets/fonts/newsreader.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../assets/fonts/newsreader-italic.woff2') format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Libre Caslon Text'; src: url('../assets/fonts/caslon-text-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../assets/fonts/dm-sans.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }

:root {
  --paper: #fcf9f3;
  --paper-2: #f7f3eb;
  --paper-3: #e9e3d4;
  --ink: #183c31;
  --ink-2: #3e5249;
  --ink-deep: #113b31;
  --wine: #852840;
  --wine-2: #6c1f33;
  --line: #d9d4c5;
  --brass: #cfab81;
  --ok: #2f5d3a;
  --err: #9a2a2a;
  --on-dark: #f6f1e6;
  --display: 'Newsreader', 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --wrap: 1272px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --radius: 2px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.55 var(--serif); overflow-x: hidden; }
label, legend, input, select, textarea, button { font-family: var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--wine); }
:focus-visible { outline: 3px solid var(--wine); outline-offset: 3px; }
h1, h2, h3, h4 { font-weight: 400; margin: 0; text-wrap: balance; color: var(--ink); }
h1 { font-family: var(--display); font-weight: 520; font-size: clamp(38px, 4.2vw, 60px); line-height: 1.1; letter-spacing: -.015em; }
h2 { font-family: var(--display); font-weight: 520; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.12; letter-spacing: -.01em; }
h3, .h3 { font-family: var(--display); font-weight: 450; font-size: 25px; line-height: 1.22; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 50; }
.skip:focus { top: 12px; }
main:focus { outline: none; }
main h1:focus { outline: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.wrap.narrow { max-width: 820px; }
.section { padding-block: clamp(56px, 8vw, 104px); }
.eyebrow { font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
.lede { font-size: 21px; line-height: 1.5; color: var(--ink); max-width: 38em; margin-top: 18px; }
.fine { font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.display { font-size: clamp(36px, 4.6vw, 56px); }

/* ---------- buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 11px 28px; background: var(--wine); color: #fff; border: 1px solid var(--wine); border-radius: 3px; font: 400 18px/1.2 var(--serif); text-decoration: none; cursor: pointer; text-align: center; transition: background .15s, color .15s; }
.btn:hover { background: var(--wine-2); border-color: var(--wine-2); color: #fff; }
.btn.outline { background: transparent; color: var(--wine); border-color: #ba798d; }
.btn.outline:hover { background: var(--wine); color: #fff; }
.btn.light { background: var(--paper); color: var(--wine); border-color: var(--paper); }
.btn.light:hover { background: #fff; color: var(--wine-2); }
.btn.small { min-height: 44px; padding: 10px 18px; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.textlink { font-weight: 400; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.textlink.on-dark { color: var(--on-dark); }
.textlink.on-dark:hover { color: #fff; }
.arr { display: inline-block; transition: transform .15s; }
a:hover .arr { transform: translateX(3px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 28px; }
.actions.center { justify-content: center; }

/* ---------- notice & header ---------- */
.notice-bar { background: var(--ink-deep); color: var(--on-dark); text-align: center; padding: 8px var(--gutter-r) 8px var(--gutter); }
.notice-bar p { font-size: 17px; }
.notice-short { display: none; }
@media (max-width: 480px) { .notice-long { display: none; } .notice-short { display: inline; } }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(6px); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 104px; }
.brand { display: block; flex: none; }
.brand-logo { width: auto; height: 68px; }
@media (min-width: 1200px) { .site-header .wrap { max-width: 1310px; } .header-row { padding-left: calc(var(--gutter) + 76px); } }
.site-nav { display: flex; align-items: center; gap: clamp(32px, 5vw, 86px); }
.site-nav ul { display: flex; gap: clamp(22px, 3vw, 44px); list-style: none; }
.site-nav ul a { font-size: 17px; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; white-space: nowrap; }
@media (min-width: 1101px) { .site-nav .nav-more { display: none; } }
.site-nav ul a:hover, .site-nav ul a[aria-current] { border-bottom-color: var(--brass); color: var(--ink); }
.nav-cta { min-height: 48px; padding: 10px 34px; font-size: 17px; white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1320px) { .nav-cta { padding-inline: 22px; } .site-nav { gap: 28px; } .site-nav ul { gap: 24px; } .brand-logo { height: 58px; } }
.menu-toggle { display: none; align-items: center; gap: 10px; min-height: 46px; padding: 8px 14px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 500 16px var(--sans); border-radius: var(--radius); cursor: pointer; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 20px; height: 1.5px; background: currentColor; position: relative; transition: transform .2s; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -6px; } .menu-icon::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
  .menu-toggle { display: inline-flex; }
  .brand-logo { height: 44px; }
  .header-row { min-height: 72px; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px var(--gutter-r) 24px var(--gutter); flex-direction: column; align-items: stretch; gap: 16px; box-shadow: 0 18px 30px -24px rgba(24, 60, 49, .5); }
  .site-nav.open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav ul a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
  .site-nav ul a[aria-current] { color: var(--wine); border-bottom-color: var(--line); }
}

/* ---------- hero (homepage mockup) ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) min(50.4vw, 900px); align-items: start; }
.hero-copy { align-self: center; padding: 56px clamp(24px, 3vw, 48px) 36px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + 16px)); }
.hero h1 { margin-top: 18px; }
.hero .lede { font-size: 23px; line-height: 1.45; max-width: 22.5em; margin-top: 14px; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 26px; }
.hero-actions .btn { min-height: 56px; min-width: min(350px, 100%); font-size: 20px; }
.hero-sign { margin-top: 26px; font-size: 20px; color: var(--ink); }
.hero-sign::before { content: ""; display: block; width: 84px; height: 1.5px; background: var(--brass); margin-bottom: 24px; }
.hero-photo { margin: 0; }
.hero-photo img { width: 100%; aspect-ratio: 726 / 557; object-fit: cover; object-position: 50% 40%; }
figcaption { font-family: var(--sans); font-size: 16px; color: var(--ink-2); margin-top: 8px; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-photo { order: -1; }
  .hero-photo figcaption { padding: 0 var(--gutter-r) 0 var(--gutter); }
  .hero-copy { padding: 28px var(--gutter-r) 40px var(--gutter); }
  .hero .lede { font-size: 20px; }
  .hero-actions .btn { width: 100%; min-width: 0; }
}

.assurances { background: var(--paper-2); margin-top: 16px; }
.assurances ul { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); padding-block: 19px; }
.assurances li { text-align: center; font-size: 19px; padding: 2px 12px; }
.assurances li + li { border-left: 1.5px solid var(--brass); }
@media (max-width: 760px) { .assurances ul { grid-template-columns: 1fr; gap: 8px; } .assurances li + li { border-left: 0; border-top: 1px solid var(--line); padding-top: 10px; } }

/* ---------- collection (homepage mockup) ---------- */
.collection { padding-block: 24px 30px; }
.collection h2 { font-size: clamp(34px, 4vw, 57px); line-height: 1.08; }
.section-lede { font-size: 21px; margin-top: 6px; color: var(--ink); }
.wrap.wide { max-width: 1342px; }
.pkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 30px; margin-top: 22px; }
.pkg-card { display: flex; flex-direction: column; position: relative; container-type: inline-size; }
.pkg-card + .pkg-card::before { content: ""; position: absolute; left: -15px; top: calc(100cqw / 1.32 + 14px); bottom: 0; border-left: 1px solid var(--line); }
.pkg-photo img { aspect-ratio: 1.32; object-fit: cover; width: 100%; }
.photo-note { font-family: var(--sans); font-size: 16px; color: var(--ink-2); margin: 10px 0 4px; }
.pkg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.pkg-head h3, .pkg-head h2 { font-family: var(--display); font-weight: 450; font-size: clamp(28px, 2.4vw, 34px); letter-spacing: -.01em; }
.pkg-head a { text-decoration: none; }
.price { font-family: var(--display); font-weight: 450; font-size: clamp(26px, 2.1vw, 30px); white-space: nowrap; }
.pkg-fit { font-family: var(--serif); font-size: 20px; color: var(--ink); margin: 2px 0 8px; }
.dots, .ticks, .dashes { list-style: none; display: grid; gap: 8px; }
.dots li, .ticks li, .dashes li { position: relative; padding-left: 22px; }
.dots li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 9px; height: 5px; border-left: 1.5px solid var(--wine); border-bottom: 1.5px solid var(--wine); transform: rotate(-45deg); }
.dashes li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 10px; height: 1.5px; background: var(--ink-2); }
.pkg-card .dots { gap: 1px; font-size: 19px; line-height: 1.45; }
.pkg-card .dots li { padding-left: 46px; }
.pkg-card .dots li::before { left: 22px; width: 5px; height: 5px; }
.pkg-actions { margin-top: auto; padding: 24px 18px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pkg-actions .btn { width: 100%; min-height: 48px; font-size: 19px; }
@media (min-width: 861px) and (max-width: 1199px) { .pkg-actions .btn { font-size: 17px; padding-inline: 16px; } }
.collection-note { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 14px; text-align: center; display: grid; gap: 2px; }
.collection-note-main { font-family: var(--serif); font-size: 21px; }
.collection-note p:not(.collection-note-main) { font-family: var(--sans); font-size: 16px; color: var(--ink-2); }
@media (max-width: 860px) {
  .pkg-grid { grid-template-columns: 1fr; row-gap: 36px; }
  .pkg-card + .pkg-card::before { display: none; }
  .pkg-card + .pkg-card { border-top: 1px solid var(--line); padding-top: 28px; }
  .pkg-card .dots li { padding-left: 24px; }
  .pkg-card .dots li::before { left: 4px; }
  .pkg-actions { padding-inline: 0; }
}

/* ---------- photo figures ---------- */
.photo-fig { margin: 0; min-width: 0; }
.photo-fig img { width: 100%; }
.ribbon-study .photo-fig figcaption { order: 2; }
.ribbon-names { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; text-align: center; }
.ribbon-names li { display: grid; gap: 2px; }
.ribbon-study.small { margin-top: 18px; }
.faq-with-photo { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; align-items: start; }
.faq-with-photo .fine { margin-top: 8px; }
@media (max-width: 700px) { .faq-with-photo { grid-template-columns: 1fr; } .faq-with-photo .faq-photo { max-width: 240px; } }
.prose-photo { margin: 22px 0 6px; }
.prose-split { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 14px; }
.prose-split .prose-photo { margin: 0; }
.prose-split p + p { margin-top: 12px; }
@media (max-width: 560px) { .prose-split { grid-template-columns: 1fr; } .prose-split .prose-photo { max-width: 240px; } }
.ways-photo { margin-top: 24px; max-width: 300px; }
.ribbon-ref { max-width: 560px; margin-bottom: 16px; }

/* ---------- touches (homepage mockup) ---------- */
.touches { background: var(--paper-2); padding-block: 30px; }
.touches .wrap { max-width: 1342px; }
.touches-grid { display: grid; grid-template-columns: minmax(0, 372fr) minmax(0, 470fr) minmax(0, 404fr); gap: 26px; align-items: center; }
.touches-intro h2 { font-size: clamp(32px, 3.05vw, 44px); line-height: 1.12; }
.touches-intro p { margin-top: 12px; font-size: 21px; line-height: 1.45; }
.bows { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; text-align: center; }
.bows img { width: 100%; aspect-ratio: 159 / 166; object-fit: cover; }
.bows .ribbon-name { display: block; margin-top: 10px; }
.bows.small { margin: 16px 0 10px; max-width: 520px; }
.ribbons { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ribbon { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: var(--paper); border: 1px solid var(--line); padding: 16px 8px 14px; }
.swatch { display: block; width: 100%; max-width: 132px; height: 46px; background:
  linear-gradient(180deg, rgba(255,255,255,.22) 0, rgba(255,255,255,0) 38%, rgba(0,0,0,.08) 70%, rgba(0,0,0,.16) 100%),
  repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,.035) 2px 4px), var(--rc);
  border-top: 2px solid var(--rs); border-bottom: 2px solid var(--rs);
  clip-path: polygon(0 0, 100% 0, 86% 50%, 100% 100%, 0 100%); }
.ribbon-name { font-family: var(--serif); font-size: 19px; }
.ribbon-sub { display: block; font-size: 16px; color: var(--ink-2); font-family: var(--sans); text-wrap: balance; }
.ribbon-note { font-size: 16px; color: var(--ink-2); line-height: 1.4; }
.ribbons.small { margin-top: 18px; }
.extras-table h3, .make-yours h3 { margin-bottom: 10px; }
.extras-table { border-left: 1px solid var(--line); padding-left: 24px; }
.extras-table h3 { font-weight: 560; font-size: 26px; margin-bottom: 6px; }
.extras-table table { font-size: 16px; }
.extras-table th { white-space: nowrap; }
.extras-list { font-size: 17px; }
.extras-table th, .extras-table td, .extras-list th, .extras-list td { padding: 9px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: top; }
.extras-table th, .extras-table td { padding: 4px 0; }
.extras-table td, .extras-list td { text-align: right; white-space: nowrap; padding-left: 16px; font-weight: 500; }
.extras-table td { font-weight: 700; }
.extras-table td.quote { font-family: var(--sans); font-weight: 600; font-size: 16px; }
.extras-list caption { text-align: left; font-family: var(--serif); font-size: 21px; padding: 24px 0 8px; }
.is-included td { color: var(--ok); }
.extras-table .fine { margin-top: 10px; }
/* Narrower laptops: extra names may wrap so the prices always stay inside the column. */
@media (max-width: 1279px) { .extras-table th { white-space: normal; } .extras-table td { vertical-align: bottom; } }
@media (max-width: 980px) { .touches-grid { grid-template-columns: 1fr 1fr; } .touches-intro { grid-column: 1 / -1; } }
@media (max-width: 640px) { .touches-grid { grid-template-columns: 1fr; } .extras-table { border-left: 0; padding-left: 0; } }
@media (max-width: 420px) { .ribbon .ribbon-note { display: none; } }

/* ---------- kitchen feature (homepage mockup) ---------- */
.kitchen-feature { display: grid; grid-template-columns: minmax(0, 61.8%) minmax(0, 1fr); align-items: center; }
.kitchen-photo { margin: 0; position: relative; }
.kitchen-photo img { width: 100%; aspect-ratio: 889 / 390; object-fit: cover; }
.kitchen-photo figcaption { position: absolute; left: 0; bottom: 0; margin: 0; padding: 3px 18px 3px var(--gutter); background: rgba(252, 249, 243, .88); color: var(--ink-2); }
.kitchen-copy { padding: 22px var(--gutter-r) 22px clamp(24px, 4.5vw, 66px); max-width: 560px; }
.kitchen-copy h2 { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.08; }
.kitchen-copy > p:not(.eyebrow):not(.fine) { margin: 14px 0 18px; font-size: 19px; line-height: 1.45; }
.kitchen-copy .btn { min-height: 48px; font-size: 19px; }
.kitchen-copy .fine { margin-top: 14px; }
@media (max-width: 860px) { .kitchen-feature { grid-template-columns: 1fr; } .kitchen-photo img { aspect-ratio: 16 / 9; } .kitchen-photo figcaption { position: static; background: none; padding: 0 var(--gutter-r) 0 var(--gutter); margin-top: 8px; } .kitchen-copy { padding: 22px var(--gutter-r) 36px var(--gutter); } }

.custom-strip { padding-top: 18px; }
.custom-strip-inner { max-width: 1352px; margin: 0 auto; border-block: 1.5px solid var(--brass); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px clamp(16px, 3vw, 46px); flex-wrap: wrap; }
.custom-strip h2 { font-weight: 450; font-size: clamp(25px, 2.3vw, 33px); }
.custom-strip p { margin-top: 2px; font-size: 17px; }
.custom-strip .btn { min-width: min(333px, 100%); }
@media (max-width: 1384px) { .custom-strip-inner { margin-inline: var(--gutter); } }

/* ---------- process (homepage mockup) ---------- */
.process { padding-block: 30px 30px; }
.process .wrap, .home-faq .wrap { max-width: 1342px; }
.process-grid { display: grid; grid-template-columns: minmax(0, 957fr) minmax(0, 305fr); gap: 32px; margin-top: 14px; }
.process-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); }
.process-steps li { padding: 0 28px; border-left: 1px solid var(--line); }
.process-steps li:first-child { padding-left: 0; border-left: 0; }
.step-no { display: block; font-family: var(--serif); font-size: 18px; color: var(--ink); margin-bottom: 2px; font-variant-numeric: lining-nums; }
.process-steps h3 { font-size: 26px; }
.process-steps p { margin-top: 4px; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.process-cta { border-left: 1px solid var(--line); padding-left: 32px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.process-cta .btn { min-height: 50px; font-size: 19px; padding-inline: 14px; white-space: nowrap; }
.process-cta p { font-size: 16px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 980px) {
  .process-grid { grid-template-columns: 1fr; }
  .process-cta { border-left: 0; padding-left: 0; align-items: flex-start; }
}
@media (max-width: 700px) {
  .process-steps { grid-template-columns: 1fr; gap: 20px; }
  .process-steps li, .process-steps li:first-child { padding: 0 0 0 18px; border-left: 1px solid var(--brass); }
}

/* ---------- faq (homepage mockup) ---------- */
.home-faq { border-top: 1px solid var(--line); padding-block: 28px 30px; }
.faq-cols { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; }
.faq-cols > dl + dl { border-left: 1px solid var(--line); padding-left: 30px; }
.faq-cols > dl:first-child { padding-right: 30px; }
.faq-pairs { margin: 0; }
.faq-pairs > div { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 18px; padding: 11px 0; }
.faq-pairs > div + div { border-top: 1px solid var(--line); }
.faq-pairs dt { font-family: var(--sans); font-weight: 600; font-size: 16px; }
.faq-pairs dd { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.faq-pairs dd a { color: var(--ink-2); }
.founder-note { margin: 28px 0 18px; font-family: var(--serif); font-size: 20px; font-style: italic; color: var(--ink); }
.faq-links { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 20px 28px; margin-top: 20px; padding-right: 30px; }
.faq-links span { color: var(--ink-2); }
@media (max-width: 900px) { .faq-cols { grid-template-columns: 1fr; } .faq-cols > dl + dl { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } .faq-cols > dl:first-child { padding-right: 0; } .faq-links { justify-content: flex-start; padding-right: 0; } }
@media (max-width: 560px) { .faq-pairs > div { grid-template-columns: 1fr; gap: 4px; } }

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-family: var(--serif); font-size: 20px; line-height: 1.35; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid var(--wine); border-bottom: 1.5px solid var(--wine); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.accordion details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.accordion details p { padding: 0 0 20px; max-width: 46em; color: var(--ink-2); }

/* ---------- final cta & footer (homepage mockup) ---------- */
.final-cta { background: var(--ink-deep); color: var(--on-dark); text-align: center; padding-block: 26px 30px; }
.final-cta h2 { color: var(--on-dark); font-weight: 450; font-size: clamp(32px, 2.8vw, 40px); }
.final-cta p { font-family: var(--serif); font-size: clamp(20px, 1.7vw, 24px); margin-top: 2px; }
.final-cta .actions { margin-top: 16px; gap: 16px 40px; }
.final-cta .btn { min-width: min(254px, 100%); min-height: 48px; }
.site-footer { background: #faf8f1; padding-block: 22px; }
.footer-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.footer-logo { height: 62px; width: auto; }
.footer-brand { justify-self: start; padding-left: clamp(0px, 4vw, 54px); }
.footer-tag { text-align: center; font-size: 17px; line-height: 1.4; }
.footer-tag span { font-size: 16px; color: var(--ink-2); }
.footer-nav { justify-self: end; }
.footer-nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 28px; }
/* Below 1200px the links sit in an even grid of three instead of ragged rows. */
@media (max-width: 1199px) { .footer-nav ul { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 6px 28px; } }
.footer-nav li { font-family: var(--sans); font-size: 16px; }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
@media (max-width: 860px) { .footer-row { grid-template-columns: 1fr; justify-items: center; text-align: center; } .footer-brand { justify-self: center; padding-left: 0; } .footer-nav { justify-self: center; } .footer-nav ul { justify-content: center; gap: 0 28px; } .footer-nav li + li::before { content: none; } .footer-nav a { display: inline-block; padding: 10px 0; } }

/* ---------- interior pages ---------- */
.page-intro { padding-block: clamp(32px, 5vw, 60px) clamp(32px, 4vw, 52px); border-bottom: 1px solid var(--line); }
.page-intro-grid.has-aside { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.page-intro h1 { max-width: 15em; }
.intro-photo { margin: 0; }
.intro-photo img { width: 100%; }
.intro-photo.portrait { max-width: 340px; justify-self: end; }
@media (max-width: 860px) { .intro-photo.portrait { justify-self: start; max-width: 300px; } }
@media (max-width: 860px) { .page-intro-grid.has-aside { grid-template-columns: 1fr; gap: 28px; } }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin-bottom: 24px; font-size: 16px; color: var(--ink-2); }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--brass); }
.crumbs a { color: var(--ink-2); }

.collection-rows .wrap { display: grid; gap: clamp(56px, 8vw, 96px); }
.pkg-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.pkg-row.flip figure { order: 2; }
.pkg-row figure { margin: 0; }
.pkg-row img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.pkg-row-copy > p:not(.eyebrow) { margin: 14px 0 20px; font-size: 18px; }
.pkg-row .pkg-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.pkg-row .pkg-actions .btn { width: auto; }
@media (max-width: 860px) { .pkg-row { grid-template-columns: 1fr; } .pkg-row.flip figure { order: 0; } }

.compare { background: var(--paper-2); border-block: 1px solid var(--line); }
.compare-table-wrap { margin-top: 32px; overflow-x: auto; }
.compare-table { min-width: 720px; background: var(--paper); border: 1px solid var(--line); }
.compare-table th, .compare-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.compare-table thead th { font-family: var(--display); font-size: 26px; border-bottom: 1px solid var(--brass); }
.compare-table thead a { text-decoration: none; display: inline-block; padding-block: 5px; }
.compare-table tbody th { color: var(--ink-2); width: 24%; }
.compare-table td { width: 25.3%; }
.no { color: var(--ink-2); font-style: italic; }
.compare-mobile { display: none; margin-top: 28px; }
.compare-card { background: var(--paper); border: 1px solid var(--line); margin-bottom: 12px; }
.compare-card summary { display: flex; justify-content: space-between; padding: 16px 18px; font-family: var(--serif); font-size: 22px; cursor: pointer; list-style: none; }
.compare-card summary::-webkit-details-marker { display: none; }
.compare-card[open] summary { border-bottom: 1px solid var(--line); }
.compare-card dl { margin: 0; padding: 4px 18px 8px; }
.compare-card dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.compare-card dt { color: var(--ink-2); }
.compare-card dd { margin: 0; }
.compare-card .btn { margin: 12px 18px 18px; }
.compare .collection-note { margin-top: 32px; }
@media (max-width: 760px) { .compare-table-wrap { display: none; } .compare-mobile { display: block; } }

.scope-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; }
.scope-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.scope-cols h3 { margin-bottom: 14px; }
@media (max-width: 860px) { .scope-grid, .scope-cols { grid-template-columns: 1fr; } }

/* package detail */
.detail-hero { padding-block: clamp(28px, 4vw, 48px) clamp(48px, 6vw, 80px); }
.detail-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.detail-photo { margin: 0; }
.detail-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.detail-buy { position: sticky; top: 110px; }
.detail-fit { font-family: var(--serif); font-size: 21px; color: var(--ink); margin-top: 8px; }
.detail-price { font-family: var(--display); font-size: 44px; margin: 18px 0 14px; padding-top: 16px; border-top: 1px solid var(--brass); }
.detail-buy > p:not(.eyebrow):not(.detail-fit):not(.detail-price):not(.fine) { font-size: 18px; }
.detail-buy .fine { margin-top: 14px; }
.detail-buy .actions { margin-top: 20px; }
.detail-buy .btn { width: 100%; }
.detail-grand .detail-photo img { aspect-ratio: 16 / 10; }
@media (max-width: 860px) { .detail-hero-grid { grid-template-columns: 1fr; } .detail-buy { position: static; } }

.inclusions { background: var(--paper-2); border-block: 1px solid var(--line); }
.inclusions-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.spec { margin: 26px 0 0; border-top: 1px solid var(--ink); }
.spec > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-family: var(--serif); font-size: 19px; }
.spec dd { margin: 0; }
.indoor { margin-top: 32px; padding: 20px; border: 1px solid var(--brass); background: var(--paper); display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: start; }
.indoor p { margin-top: 8px; }
.indoor-photo figcaption { font-size: 16px; line-height: 1.35; }
@media (max-width: 520px) { .indoor { grid-template-columns: 1fr; } .indoor-photo { max-width: 220px; } }
.incl-photo { margin: 0; }
.incl-photo img { width: 100%; max-height: 640px; object-fit: cover; }
.detail-classic .incl-photo img { max-width: 400px; }
@media (max-width: 860px) { .inclusions-grid { grid-template-columns: 1fr; } .spec > div { grid-template-columns: 1fr; gap: 2px; } .incl-photo img { max-height: 460px; } .detail-classic .incl-photo img { max-width: 100%; } }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); }
.two-col > div > h2 + * { margin-top: 20px; }
.two-col h3 { margin: 28px 0 12px; }
.two-col .fine { margin-top: 18px; }
.ownership { border-top: 1px solid var(--line); padding-block: clamp(40px, 5vw, 64px); }
.ownership p { margin-top: 14px; font-size: 18px; }
.detail-faq { border-top: 1px solid var(--line); }
.detail-faq h2 { margin-bottom: 24px; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

.other-pkgs { background: var(--paper-2); border-top: 1px solid var(--line); }
.other-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.other-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; background: var(--paper); border: 1px solid var(--line); padding-bottom: 18px; }
.other-card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; margin-bottom: 10px; }
.other-card .other-name { font-family: var(--display); font-size: 26px; padding-inline: 18px; }
.other-card .other-meta { padding-inline: 18px; color: var(--ink-2); }
.other-card:hover { border-color: var(--wine); }
.compare-all { justify-content: center; padding: 24px 0; background: transparent; border-style: dashed; border-color: var(--brass); }
@media (max-width: 860px) { .other-grid { grid-template-columns: 1fr; } }

.sticky-buy { display: none; }
@media (max-width: 860px) {
  .sticky-buy { display: block; position: sticky; bottom: 0; z-index: 15; background: var(--paper); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .sticky-buy .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; }
  .sticky-buy span { font-family: var(--serif); font-size: 18px; }
  .sticky-buy .btn { min-height: 46px; padding: 10px 20px; }
}

/* how it works */
.phase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 40px; padding-block: 36px; border-top: 1px solid var(--line); }
.phase:first-child { border-top: 0; padding-top: 0; }
.phase-head h2 { font-size: clamp(28px, 3vw, 36px); }
.phase-head p { margin-top: 10px; color: var(--ink-2); }
.phase-secure { background: var(--paper-2); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); border: 1px solid var(--brass); }
@media (max-width: 860px) { .phase-secure { margin-inline: 0; padding: 24px 18px; } }
.timeline { list-style: none; display: grid; gap: 24px; }
.timeline li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
.timeline .step-no { font-size: 26px; }
.timeline p { margin-top: 6px; color: var(--ink-2); }
.split-note { border-top: 1px solid var(--line); }
.split-note p { margin-top: 14px; }
@media (max-width: 860px) { .phase { grid-template-columns: 1fr; gap: 20px; } }

/* faq page / prose */
.faq-layout, .prose-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-index, .prose-index { position: sticky; top: 110px; }
.faq-index ul, .prose-index ul { list-style: none; display: grid; gap: 4px; border-left: 1px solid var(--brass); }
.faq-index a, .prose-index a { display: block; padding: 6px 0 6px 16px; text-decoration: none; }
.faq-index a:hover, .prose-index a:hover { text-decoration: underline; }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group h2 { font-size: clamp(26px, 2.8vw, 32px); margin-bottom: 14px; }
.faq-more { margin-top: 56px; padding: 28px; background: var(--paper-2); border: 1px solid var(--line); }
.faq-more p { margin-top: 8px; }
@media (max-width: 860px) {
  .faq-layout, .prose-layout { grid-template-columns: 1fr; }
  .faq-index, .prose-index { position: static; }
  .faq-index ul, .prose-index ul { display: flex; flex-wrap: wrap; gap: 8px; border-left: 0; }
  .faq-index a, .prose-index a { border: 1px solid var(--line); padding: 8px 14px; }
}
.prose { max-width: 44em; }
.prose.narrow { margin-inline: auto; }
.prose h2 { font-size: clamp(26px, 2.8vw, 32px); margin: 44px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 28px 0 10px; }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { margin: 14px 0; padding-left: 24px; display: grid; gap: 8px; }
.prose-section .actions { margin-top: 44px; }

/* not found */
.nf-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.nf-grid figure { margin: 0; }
.nf-pkgs { list-style: none; margin-top: 18px; display: grid; gap: 8px; font-size: 18px; }
@media (max-width: 760px) { .nf-grid { grid-template-columns: 1fr; } }

/* kitchen page */
.kitchen-hero { padding-top: clamp(24px, 4vw, 40px); }
.kitchen-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding-bottom: clamp(40px, 6vw, 72px); }
.kitchen-banner img { width: 100%; }
.kitchen-hero-copy .lede { margin: 18px 0 26px; }
.kitchen-scope { background: var(--paper-2); border-block: 1px solid var(--line); }
.kitchen-scope-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.kitchen-scope-grid figure { margin: 0; }
.kitchen-scope-grid h2 { font-size: clamp(26px, 2.6vw, 32px); margin-bottom: 18px; }
.kitchen-scope-grid h3 { margin: 26px 0 12px; }
.kitchen-how p + p { margin-top: 14px; }
@media (max-width: 980px) { .kitchen-scope-grid { grid-template-columns: 1fr 1fr; } .kitchen-scope-grid figure { grid-column: 1 / -1; max-width: 560px; } }
@media (max-width: 860px) { .kitchen-hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .kitchen-scope-grid { grid-template-columns: 1fr; } }

/* ---------- forms ---------- */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.form-intro { position: sticky; top: 110px; }
.form-intro p { margin-top: 12px; }
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; } .form-intro { position: static; } }
.panel { background: #fffdf8; border: 1px solid var(--line); padding: clamp(20px, 3vw, 36px); }
.panel + .panel, .panel + .form-actions { margin-top: 20px; }
form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
form > fieldset + fieldset, .panel > fieldset + fieldset { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
legend { font-weight: 600; padding: 0; margin-bottom: 12px; }
legend.h3 { font-weight: 450; margin-bottom: 16px; float: left; width: 100%; }
legend.h3 + * { clear: both; }
.panel h2 { font-family: var(--serif); font-size: 25px; margin-bottom: 18px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 18px; }
.field-grid > .check-line { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
@media (max-width: 640px) { .field-grid { grid-template-columns: 1fr; } }
label { font-weight: 500; }
.req, .opt { font-weight: 400; color: var(--ink-2); font-size: 16px; }
.hint { font-family: var(--sans); font-size: 16px; color: var(--ink-2); line-height: 1.5; }
input, textarea, select { font: 400 17px/1.4 var(--sans); color: var(--ink); background: #fff; border: 1px solid #868070; border-radius: var(--radius); padding: 12px 14px; width: 100%; min-height: 50px; }
textarea { resize: vertical; min-height: 90px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
input[readonly] { background: var(--paper-2); }
input:focus, textarea:focus, select:focus { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 0; }
[aria-invalid="true"] { border-color: var(--err); }
.field-error { color: var(--err); font-size: 16px; font-weight: 500; }
.field-error::before { content: "! "; font-weight: 700; }
.check-line { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 18px; }
.check-line label { font-weight: 400; }
.check-line .field-error { grid-column: 2; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; min-height: 0; padding: 0; margin: 2px 0 0; accent-color: var(--wine); }
.radio-group, .check-group { margin-top: 22px; }
.options { display: grid; gap: 10px; }
.options.cols { grid-template-columns: 1fr 1fr; }
.radio-group.inline .options { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.option { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-weight: 400; }
.option:has(input:checked) { border-color: var(--wine); box-shadow: inset 0 0 0 1px var(--wine); }
.option-title { display: block; font-weight: 500; }
.option-sub { display: block; font-size: 16px; color: var(--ink-2); font-family: var(--sans); text-wrap: balance; }
.option-note { display: block; color: var(--ink-2); font-size: 16px; font-weight: 400; }
@media (max-width: 640px) { .options.cols { grid-template-columns: 1fr; } }
.error-summary { border: 2px solid var(--err); background: #fbf1ef; padding: 18px 22px; margin-bottom: 22px; }
.error-summary h2 { font-family: var(--sans); font-size: 18px; font-weight: 600; color: var(--err); margin: 0 0 8px; }
.error-summary ul { padding-left: 20px; display: grid; gap: 4px; }
.error-summary a { color: var(--err); }
.form-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; }
@media (max-width: 480px) { .form-actions .btn { padding-inline: 16px; } .form-actions .btn.outline { flex: none; } .form-actions .btn[type="submit"] { flex: 1 1 auto; } }
.form-actions .btn[type="submit"] { margin-left: auto; }

.flash { background: #f3efe2; border-left: 3px solid var(--brass); padding: 14px 18px; margin: 16px 0; }
.flash ul { padding-left: 18px; display: grid; gap: 4px; }
.page-flash { margin-top: 24px; }
.demo-note { background: #f1ede1; border: 1px dashed var(--brass); padding: 12px 16px; margin: 16px 0; font-size: 16px; }
.error-box { border: 1px solid var(--err); background: #fbf1ef; padding: 18px 20px; margin: 20px 0; display: grid; gap: 12px; justify-items: start; }
.empty-box { border: 1px dashed var(--brass); padding: 28px; margin: 20px 0; display: grid; gap: 12px; justify-items: start; }
.empty-box h2 { font-size: 28px; }
.loading { display: flex; align-items: center; gap: 12px; padding: 22px 0; color: var(--ink-2); }
.spinner { width: 22px; height: 22px; border: 2px solid var(--line); border-top-color: var(--wine); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* uploads */
.uploader { margin-top: 6px; }
.upload-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.upload-label { font-weight: 600; }
.upload-count { color: var(--ink-2); font-size: 16px; }
.dropzone { position: relative; margin-top: 10px; border: 1.5px dashed #b2ab96; background: var(--paper); padding: 22px; text-align: center; }
.dropzone.over { border-color: var(--wine); background: #f6efe9; }
.dropzone .file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0; }
.dropzone:focus-within { outline: 3px solid var(--wine); outline-offset: 2px; }
.dropzone-text { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; color: var(--ink-2); }
.uploader > .hint { margin-top: 8px; }
.upload-error { margin-top: 8px; }
.thumbs { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; }
.thumb { border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; }
.thumb img, .thumb-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-2); display: grid; place-items: center; }
.thumb-name { font-size: 16px; padding: 6px 10px 0; overflow-wrap: anywhere; line-height: 1.35; }
.thumb-remove { margin: 6px 10px 10px; align-self: flex-start; background: none; border: 0; padding: 4px 0; color: var(--wine); font: 500 16px var(--sans); text-decoration: underline; cursor: pointer; min-height: 32px; }

/* ---------- booking ---------- */
.booking { padding-block: clamp(24px, 4vw, 40px) clamp(56px, 7vw, 96px); }
.booking h1 { font-size: clamp(36px, 4.4vw, 54px); }
.booking-top { margin-bottom: 28px; }
.stepper ol { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stepper li > * { display: flex; align-items: center; gap: 10px; min-width: 44px; padding: 14px 8px 0 0; color: var(--ink-2); text-decoration: none; border-top: 3px solid transparent; margin-top: -2px; }
.stepper .step-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); font-size: 16px; flex: none; }
.stepper li.current > * { color: var(--ink); border-top-color: var(--wine); font-weight: 600; }
.stepper li.current .step-n { background: var(--wine); color: #fff; border-color: var(--wine); }
.stepper li.done > * { color: var(--ink); border-top-color: var(--ink); }
.stepper li.done .step-n { background: var(--ink); color: #fff; border-color: var(--ink); }
.stepper li.done a:hover .step-l { text-decoration: underline; }
@media (max-width: 640px) { .stepper .step-l { display: none; } .stepper li.current .step-l { display: inline; } .stepper ol { grid-template-columns: auto auto auto auto; justify-content: start; gap: 0 4px; } .stepper li > * { padding-right: 10px; } }
.booking-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(28px, 4vw, 56px); align-items: start; }
.booking-main .lede { margin-bottom: 28px; }
.booking-main > form > fieldset + fieldset { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
@media (max-width: 960px) { .booking-grid { grid-template-columns: 1fr; } .summary { order: -1; } }
.booking-start .wrap { display: grid; gap: 12px; }
.booking-start h1 { margin-top: 4px; }
.booking-start .lede { margin-bottom: 20px; }
.zip-row { display: grid; grid-template-columns: minmax(0, 260px) auto; gap: 12px; align-items: end; }
.zip-row .field { margin: 0; }
@media (max-width: 480px) { .zip-row { grid-template-columns: 1fr; } }
#area-result:empty { display: none; }
.area-ok { margin-top: 16px; padding: 14px 18px; border-left: 3px solid var(--ok); background: #eef3ea; }
.area-warn { margin-top: 16px; padding: 16px 18px; border-left: 3px solid var(--wine); background: #f6eeea; display: grid; gap: 12px; justify-items: start; }
.aside-links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 20px 24px; }

.pkg-options { display: grid; gap: 12px; }
.pkg-option { display: block; cursor: pointer; font-weight: 400; }
.pkg-option input { position: absolute; opacity: 0; }
.pkg-option-body { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 18px; align-items: center; border: 1px solid var(--line); background: #fff; padding: 10px 18px 10px 10px; }
.pkg-option-body img { width: 120px; aspect-ratio: 4 / 3; object-fit: cover; }
.pkg-option .option-title { font-family: var(--serif); font-size: 22px; font-weight: 400; }
.pkg-option-price { font-family: var(--serif); font-size: 22px; }
.pkg-option input:checked + .pkg-option-body { border-color: var(--wine); box-shadow: inset 0 0 0 1px var(--wine); background: #fffaf6; }
.pkg-option input:focus-visible + .pkg-option-body { outline: 3px solid var(--wine); outline-offset: 2px; }
@media (max-width: 520px) { .pkg-option-body { grid-template-columns: 84px minmax(0, 1fr); } .pkg-option-body img { width: 84px; } .pkg-option-price { grid-column: 2; } }
.incl-peek { margin-top: 14px; }
.incl-peek summary { cursor: pointer; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; }
.incl-peek ul { margin-top: 12px; }
.ribbon-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ribbon-option { cursor: pointer; font-weight: 400; display: block; }
.ribbon-option input { position: absolute; opacity: 0; }
.ribbon-card { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; padding: 8px 8px 12px; height: 100%; text-align: center; }
.ribbon-card img { width: 100%; aspect-ratio: 159 / 166; object-fit: cover; }
.ribbon-option input:checked + .ribbon-card { border-color: var(--wine); box-shadow: inset 0 0 0 1px var(--wine); background: #fffaf6; }
.ribbon-option input:focus-visible + .ribbon-card { outline: 3px solid var(--wine); outline-offset: 2px; }
.ribbon-choice .hint { margin-top: 10px; }
.extra-options { list-style: none; display: grid; gap: 10px; }
.extra-option { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-weight: 400; }
.extra-option:has(input:checked) { border-color: var(--wine); }
.extra-option.is-included, .extra-option.is-included:has(input:checked) { background: #f1f4ee; border-color: #c9d3c3; cursor: default; }
.extra-price { font-weight: 600; white-space: nowrap; }
.is-included .extra-price { color: var(--ok); white-space: normal; text-align: right; max-width: 12em; }
@media (max-width: 520px) { .extra-option { gap: 10px; padding: 12px 14px; } .is-included .extra-price { max-width: 7.5em; text-align: right; } }
.extras-choice .hint { margin-top: 12px; }

/* calendar */
.calendar { border: 1px solid var(--line); background: #fff; padding: 18px; max-width: 520px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cal-head h3 { font-size: 24px; }
.cal-nav { width: 46px; height: 46px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 18px; cursor: pointer; border-radius: var(--radius); }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-grid { table-layout: fixed; }
.cal-grid th { font-size: 16px; font-weight: 500; color: var(--ink-2); padding: 6px 0; text-align: center; }
.cal-grid td { padding: 2px; text-align: center; }
.day { width: 100%; aspect-ratio: 1; min-height: 42px; border: 1px solid transparent; background: transparent; font: 400 17px var(--sans); color: var(--ink); cursor: pointer; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: var(--radius); }
.day:not([disabled]) { border-color: var(--line); background: var(--paper); }
.day:not([disabled]):hover { border-color: var(--wine); }
.day[disabled] { color: #8d8a7e; cursor: default; }
.day.full { text-decoration: line-through; color: #7d7a6f; }
.day.selected { background: var(--wine); border-color: var(--wine); color: #fff; }
.day-dots { display: flex; gap: 3px; }
.day-dots i, .cal-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
i.open { background: var(--ok); }
i.full { background: transparent; border: 1px solid #8d8a7e; }
.day.selected i.open { background: #fff; }
.cal-legend { display: flex; gap: 20px; margin-top: 10px; font-size: 16px; color: var(--ink-2); flex-wrap: wrap; }
.cal-legend span { display: inline-flex; align-items: center; gap: 8px; }
.windows { margin-top: 28px; }
.window-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.window-option { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 14px 16px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-weight: 400; }
.window-option:has(input:checked) { border-color: var(--wine); box-shadow: inset 0 0 0 1px var(--wine); }
.window-option.unavailable { background: var(--paper-2); color: #6e6b60; cursor: not-allowed; }
.windows .hint { margin-top: 4px; }
.booking-main > form > .fine { margin-top: 20px; }

/* summary */
.summary { position: sticky; top: 104px; }
.summary-desktop { border: 1px solid var(--line); background: #fffdf8; }
.summary-body { padding: 20px 22px 24px; }
.summary-img { width: calc(100% + 44px); margin: -20px -22px 18px; aspect-ratio: 16 / 9; object-fit: cover; max-width: none; }
.summary-title { font-family: var(--display); font-size: 30px; margin-bottom: 10px; }
.summary-meta.money dt { white-space: nowrap; }
.summary-meta { margin: 0; display: grid; gap: 6px; }
.summary-meta div { display: flex; justify-content: space-between; gap: 12px; }
.summary-meta dt { color: var(--ink-2); }
.summary-meta dd { margin: 0; text-align: right; }
.summary-meta.money { margin-top: 12px; }
.summary-lines { margin-top: 16px; border-top: 1px solid var(--ink); }
.summary-lines th, .summary-lines td, .review-lines th, .review-lines td { padding: 9px 0; border-bottom: 1px solid var(--line); font-weight: 400; text-align: left; vertical-align: top; }
.summary-lines td, .review-lines td { text-align: right; white-space: nowrap; padding-left: 12px; }
.summary-lines tfoot th, .summary-lines tfoot td { font-weight: 600; font-size: 19px; border-bottom: 1px solid var(--ink); }
.summary .fine { margin-top: 10px; }
.summary-note { margin-top: 16px; padding: 14px; background: var(--paper-2); font-size: 16px; }
.summary-edit { margin-top: 14px; }
.summary-mobile { display: none; }
@media (max-width: 960px) {
  .summary { position: static; }
  .summary-desktop { display: none; }
  .summary-mobile { display: block; border: 1px solid var(--line); background: #fffdf8; }
  .summary-mobile > summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; cursor: pointer; font-weight: 600; list-style: none; }
  .summary-mobile > summary::-webkit-details-marker { display: none; }
  .summary-mobile > summary span:first-child::after { content: " · Show details"; font-weight: 400; color: var(--ink-2); }
  .summary-mobile[open] > summary span:first-child::after { content: " · Hide details"; }
  .summary-mobile .summary-img { display: none; }
  .summary-mobile .summary-body { padding-top: 4px; }
}

/* review */
.review-block { border-top: 1px solid var(--line); padding-block: 22px; }
.review-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.review-head h2 { font-family: var(--serif); font-size: 23px; }
.review-head a { font-weight: 500; }
.review-lines tfoot th, .review-lines tfoot td { font-weight: 500; }
.review-lines { margin-top: 10px; }
.review-photos { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.review-photos li { width: 150px; font-family: var(--sans); font-size: 16px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-photos img { width: 150px; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 4px; }
.review-photos .missing { width: auto; color: var(--err); }
.review-dl { margin: 0; display: grid; gap: 8px; }
.review-dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
.review-dl dt { color: var(--ink-2); }
.review-dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .review-dl div { grid-template-columns: 1fr; gap: 0; } }

/* confirmation & status */
.confirmation h1 { margin-bottom: 8px; }
.confirmation h2 { font-size: 30px; margin: 36px 0 14px; }
.conf-dl { margin: 28px 0 0; border-top: 1px solid var(--ink); }
.conf-dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.conf-dl dt { color: var(--ink-2); }
.conf-dl dd { margin: 0; }
.next-steps { padding-left: 24px; display: grid; gap: 10px; }
.confirmation .fine { margin-top: 18px; }
.status-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.status-action { margin-top: 28px; padding: 22px 24px; border: 1px solid var(--brass); background: #fffdf8; display: grid; gap: 14px; justify-items: start; }
.status-action.ok { border-color: var(--ok); background: #f1f5ee; }
.status-action h2 { font-size: 28px; }
.demo-checkout { width: 100%; }
.status-track { list-style: none; margin-top: 36px; display: grid; gap: 0; border-left: 1px solid var(--line); margin-left: 8px; }
.status-track li { position: relative; padding: 0 0 18px 24px; color: var(--ink-2); }
.status-track .dot { position: absolute; left: -8px; top: 5px; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); border: 1px solid #a7a291; }
.status-track li.done { color: var(--ink); }
.status-track li.done .dot { background: var(--ink); border-color: var(--ink); }
.status-track li.current { color: var(--ink); font-weight: 600; }
.status-track li.current .dot { background: var(--wine); border-color: var(--wine); box-shadow: 0 0 0 4px #ecd9db; }
.status-summary { border: 1px solid var(--line); background: #fffdf8; padding: 20px; display: grid; gap: 12px; }
.status-summary h2 { font-family: var(--display); font-size: 28px; }
.status-summary img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
@media (max-width: 860px) { .status-grid { grid-template-columns: 1fr; } }

/* contact */
.ways h2 { font-size: 30px; }
.ways-list { list-style: none; display: grid; gap: 0; margin: 20px 0; border-top: 1px solid var(--line); }
.ways-list li { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.ways-list p { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print { .site-header, .notice-bar, .final-cta, .sticky-buy { display: none; } }

/* ---------- Journal ---------- */
.journal-section { padding-top: clamp(40px, 6vw, 72px); }
.journal-card h2, .journal-card h3 { margin: 6px 0 10px; }
.journal-card h2 a, .journal-card h3 a { text-decoration: none; color: var(--ink); }
.journal-card h2 a:hover, .journal-card h3 a:hover { color: var(--wine); }
.journal-card > p:not(.journal-meta) { color: var(--ink-2); margin-bottom: 14px; }
.journal-photo { display: block; overflow: hidden; }
.journal-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s ease; }
.journal-card:hover .journal-photo img { transform: scale(1.02); }
.journal-meta { font-family: var(--sans); font-size: 16px; color: var(--ink-2); margin-top: 16px; }
.journal-meta span { text-transform: uppercase; letter-spacing: .12em; font-weight: 500; }
.journal-card.is-lead { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0 clamp(28px, 4vw, 56px); align-items: center; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.journal-card.is-lead .journal-photo { grid-row: 1 / 6; }
.journal-card.is-lead h2 { font-size: clamp(30px, 3vw, 42px); }
.journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 52px) clamp(24px, 3vw, 40px); margin-top: clamp(40px, 5vw, 64px); }
.journal-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
.journal-grid h3 { font-size: 25px; }
@media (max-width: 960px) { .journal-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .journal-card.is-lead { grid-template-columns: 1fr; } .journal-card.is-lead .journal-photo { grid-row: auto; } .journal-grid, .journal-grid.two { grid-template-columns: 1fr; } }

.article-head { padding-block: clamp(32px, 5vw, 60px) clamp(24px, 3vw, 36px); text-align: left; }
.article-head h1 { font-size: clamp(36px, 4vw, 54px); }
.article-date { font-family: var(--sans); font-size: 16px; color: var(--ink-2); margin-top: 18px; }
.article-hero { max-width: 1080px; }
.article-hero img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
/* Portrait source: keep the pot and the top of the plant in the frame. */
.article-hero img[src*="poinsettia-indoor"] { aspect-ratio: 16 / 10; object-position: 50% 58%; }
.article-body { padding-block: clamp(36px, 5vw, 56px) clamp(56px, 7vw, 96px); }
.article-body.prose { max-width: 820px; }
.article-summary { border-left: 2px solid var(--brass); padding: 4px 0 4px 22px; margin-bottom: 36px; font-size: 20px; }
.article-summary .eyebrow { margin-bottom: 6px; }
.article-sources { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); }
.article-sources h2 { font-size: 25px; }
.article-sources li { font-family: var(--sans); font-size: 16px; }
.article-body .actions { margin-top: 40px; }
.compare-mini { margin: 18px 0 8px; font-size: 17px; }
.compare-mini th, .compare-mini td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare-mini thead th { font-family: var(--display); font-size: 20px; font-weight: 450; }
.compare-mini tbody th { font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink-2); }
@media (max-width: 560px) { .compare-mini { font-size: 16px; display: block; overflow-x: auto; } }
.journal-related { background: var(--paper-2); border-top: 1px solid var(--line); }

.ribbon-study { max-width: 560px; margin: 4px 0 18px; }
.ribbon-study img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Premium finishing (2026-10-21): details only, layout unchanged ---------- */
::selection { background: var(--wine); color: #fff; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
/* Inner-page intros: a brass rule before the label, a little more presence for the title. */
.page-intro .eyebrow, .article-head .eyebrow { display: flex; align-items: center; gap: 14px; }
.page-intro .eyebrow::before, .article-head .eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--brass); flex: none; }
.page-intro h1 { font-size: clamp(40px, 4.6vw, 64px); letter-spacing: -.018em; }
.page-intro .lede { color: var(--ink-2); }
/* Links and buttons respond quietly. */
.textlink:hover .arr, a:hover > .arr { transform: translateX(4px); }
.btn { transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.btn:not(.outline):not(.light):hover { box-shadow: 0 10px 22px -14px rgba(108, 31, 51, .9); }
/* Photos: a soft lift on the package and journal images that link somewhere. */
.pkg-photo, .pkg-row figure a, .journal-photo { overflow: hidden; display: block; }
.pkg-photo img, .journal-photo img { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.pkg-photo:hover img, .journal-card:hover .journal-photo img { transform: scale(1.025); }
/* Closing band on inner pages carries the botanical leaf. */
.cta-leaf { width: 34px; height: auto; margin: 4px auto 14px; opacity: .9; }
.final-cta:has(.cta-leaf) { padding-block: 44px 48px; }
/* Comparison table: quieter rows, brass top rule. */
.compare-table { border-top: 2px solid var(--brass); }
.compare-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper-2) 60%, transparent); }
.compare-table tbody tr:first-child td { font-family: var(--display); font-size: 22px; }
/* Forms read as a finished panel. */
.panel { box-shadow: 0 1px 0 rgba(24, 60, 49, .04), 0 24px 48px -36px rgba(24, 60, 49, .35); }

/* Waitlist on the visit step */
.waitlist { margin-top: 36px; border: 1px solid var(--line); background: var(--paper-2); padding: 18px clamp(16px, 3vw, 28px); }
.waitlist summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.waitlist summary::-webkit-details-marker { display: none; }
.waitlist summary > span:last-child { font-family: var(--sans); font-size: 16px; color: var(--wine); text-decoration: underline; text-underline-offset: 4px; }
.waitlist form { margin-top: 18px; display: grid; gap: 16px; }
.waitlist form .btn { justify-self: start; }
section.waitlist h2 { margin-bottom: 8px; }

/* Coming-soon page shown without the preview password (PREVIEW_PASSWORD).
   One composition: full-bleed porch photograph, forest veil, ivory type, brass hairlines, wine for the one action. */
.soon-body { margin: 0; background: var(--ink-deep); color: var(--on-dark); }
.soon { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; isolation: isolate; }
.soon-media { position: absolute; inset: 0; z-index: -2; }
.soon-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.soon-veil { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(10, 38, 31, .95) 0%, rgba(13, 46, 38, .86) 30%, rgba(17, 59, 49, .42) 54%, rgba(17, 59, 49, .08) 78%, rgba(17, 59, 49, .2) 100%),
  linear-gradient(180deg, rgba(10, 38, 31, .72) 0%, rgba(10, 38, 31, .38) 12%, transparent 24%, transparent 70%, rgba(10, 38, 31, .7) 100%); }
.soon-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(22px, 3.2vw, 40px) clamp(20px, 5.5vw, 88px); }
.soon-logo { width: clamp(150px, 14vw, 196px); height: auto; filter: drop-shadow(0 1px 10px rgba(10, 38, 31, .55)); }
.soon-season { font: 500 16px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); text-shadow: 0 1px 12px rgba(10, 38, 31, .9); }
.soon-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 430px); gap: clamp(32px, 6vw, 112px); align-items: center; padding: clamp(12px, 3vw, 40px) clamp(20px, 5.5vw, 88px) clamp(32px, 5vw, 64px); max-width: 1440px; }
.soon-eyebrow { display: flex; align-items: center; gap: 16px; font: 500 16px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin: 0 0 22px; }
.soon-eyebrow::before { content: ""; width: 48px; height: 1px; background: var(--brass); }
.soon h1 { color: #fbf7ee; font-family: var(--display); font-weight: 480; font-size: clamp(44px, 6vw, 88px); line-height: 1.02; letter-spacing: -.022em; max-width: 11.5em; }
.soon h1 em { font-style: italic; font-weight: 420; color: #f3e6cf; }
.soon-lede { margin-top: 26px; max-width: 32em; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.55; color: rgba(246, 241, 230, .86); }
.soon-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin: 40px 0 0; border-top: 1px solid rgba(207, 171, 129, .45); padding-top: 22px; }
.soon-facts div { padding-right: clamp(20px, 3vw, 44px); }
.soon-facts div + div { padding-left: clamp(20px, 3vw, 44px); border-left: 1px solid rgba(207, 171, 129, .35); }
.soon-facts dt { font: 500 16px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(246, 241, 230, .62); }
.soon-facts dd { margin: 6px 0 0; font-family: var(--display); font-size: clamp(22px, 1.9vw, 27px); color: #fbf7ee; white-space: nowrap; }

.soon-card { scroll-margin-top: 16px; background: #fbf8f1; color: var(--ink); padding: clamp(26px, 3vw, 40px); border-radius: 2px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .65), 0 0 0 1px rgba(207, 171, 129, .35); display: grid; gap: 16px; }
.soon-kicker { font: 500 16px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--wine); margin: 0; }
.soon-card h2 { font-family: var(--display); font-weight: 480; font-size: clamp(32px, 2.6vw, 40px); line-height: 1.08; color: var(--ink-deep); }
.soon-card-lede { color: var(--ink-2); font-size: 18px; line-height: 1.5; margin: -2px 0 6px; }
.soon-field { display: grid; gap: 6px; }
.soon-field label { font: 500 16px/1.2 var(--sans); color: var(--ink); }
.soon-field label span { font-weight: 400; color: var(--ink-2); margin-left: 6px; }
.soon-field input { font: 400 18px/1.3 var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid #868070; border-radius: 0; padding: 10px 0 9px; min-height: 48px; transition: border-color .2s ease, box-shadow .2s ease; }
.soon-field input:hover { border-bottom-color: var(--ink-2); }
.soon-field input:focus { outline: none; border-bottom-color: var(--wine); box-shadow: 0 1px 0 0 var(--wine); }
.soon-field input:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; }
.soon-consent { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; min-height: 44px; font: 400 16px/1.45 var(--sans); color: var(--ink-2); margin-top: 4px; cursor: pointer; }
.soon-consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--wine); }
.soon-submit { margin-top: 6px; min-height: 56px; border: 0; border-radius: 2px; background: var(--wine); color: #fff; font: 400 19px/1 var(--serif); letter-spacing: .01em; cursor: pointer; transition: background .2s ease, box-shadow .2s ease, transform .2s ease; }
.soon-submit:hover { background: var(--wine-2); box-shadow: 0 14px 28px -16px rgba(108, 31, 51, .9); }
.soon-submit:active { transform: translateY(1px); }
.soon-submit:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.soon-error { margin: 0; padding: 10px 14px; border-left: 2px solid var(--err); background: #f8ece9; color: var(--err); font: 400 16px/1.45 var(--sans); }
.soon-card:focus { outline: none; }
.soon-card.is-done { text-align: center; justify-items: center; padding-block: clamp(36px, 4vw, 52px); }
.soon-leaf { width: 30px; height: auto; }
.soon-card.is-done p { color: var(--ink-2); font-size: 18px; max-width: 24em; }

.soon-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 18px clamp(20px, 5.5vw, 88px) calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(207, 171, 129, .25); font: 400 16px/1.4 var(--sans); color: rgba(246, 241, 230, .7); }
.soon-areas { margin: 0; letter-spacing: .02em; overflow-wrap: anywhere; }
.soon-links { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0 22px; }
.soon-links a { color: rgba(246, 241, 230, .92); text-decoration: underline; text-decoration-color: rgba(207, 171, 129, .7); text-underline-offset: 4px; padding-block: 12px; }
.soon-links a:hover { color: #fff; text-decoration-color: currentColor; }
.soon-credit { margin: 0 0 0 auto; color: rgba(246, 241, 230, .64); }
.soon-owner summary { cursor: pointer; color: rgba(246, 241, 230, .75); text-decoration: underline; text-underline-offset: 4px; list-style: none; min-height: 44px; display: inline-flex; align-items: center; }
.soon-owner summary::-webkit-details-marker { display: none; }
.soon-owner summary:hover { color: #fff; }
.soon-owner summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.soon-owner form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.soon-owner input { font: 400 16px var(--sans); min-height: 44px; padding: 8px 12px; border: 1px solid rgba(207, 171, 129, .5); background: rgba(255, 255, 255, .06); color: #fff; border-radius: 2px; width: 200px; }
.soon-owner input::placeholder { color: rgba(246, 241, 230, .6); }
.soon-owner input:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
.soon-owner button { min-height: 44px; padding: 8px 18px; border: 1px solid rgba(246, 241, 230, .6); background: transparent; color: #fff; font: 500 16px var(--sans); border-radius: 2px; cursor: pointer; }
.soon-owner button:hover { background: rgba(255, 255, 255, .1); }
.soon-owner .soon-error { flex-basis: 100%; }

@media (max-width: 960px) {
  .soon { grid-template-rows: auto auto auto; }
  .soon-media { position: relative; inset: auto; grid-row: 1; height: clamp(260px, 46svh, 440px); z-index: 0; }
  .soon-media img { object-position: 50% 42%; }
  .soon-veil { inset: 0 0 auto; height: clamp(260px, 46svh, 440px); z-index: 1; background: linear-gradient(180deg, rgba(10, 38, 31, .9) 0%, rgba(10, 38, 31, .7) 18%, rgba(10, 38, 31, .18) 38%, rgba(17, 59, 49, .3) 68%, var(--ink-deep) 100%); }
  .soon-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
  .soon-grid { grid-row: 2; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: -64px; position: relative; z-index: 2; padding-bottom: 40px; }
  /* Phones: headline, then the waitlist, then the facts, so the one action is near the top. */
  .soon-copy { display: contents; }
  .soon-card { order: 2; margin-top: 30px; max-width: 560px; }
  .soon-facts { max-width: 560px; }
  .soon-facts { order: 3; margin-top: 36px; }
  .soon h1 { font-size: clamp(40px, 11vw, 60px); }
  .soon-facts { grid-template-columns: 1fr; gap: 14px; }
  .soon-facts div, .soon-facts div + div { padding: 0; border-left: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid rgba(207, 171, 129, .25); padding-bottom: 12px; }
  .soon-facts dd { margin: 0; font-size: 22px; }
  .soon-foot { grid-row: 3; }
  .soon-credit { margin-left: 0; }
}
@media (max-width: 600px) { .soon-season { display: none; } }
@media (max-width: 420px) {
  .soon-eyebrow { letter-spacing: .12em; gap: 12px; }
  .soon-eyebrow::before { width: 28px; }
  .soon-facts dd { font-size: 20px; }
  .soon-card { padding: 24px 20px; }
  .soon-owner input { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .soon-submit, .soon-field input { transition: none; } }
/* Waitlist: package interest chips, privacy note, spam trap */
.soon-interest { border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
.soon-interest legend { font: 500 16px/1.2 var(--sans); color: var(--ink); padding: 0; margin-bottom: 10px; }
.soon-interest legend span { font-weight: 400; color: var(--ink-2); margin-left: 6px; }
.soon-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.soon-chip { position: relative; cursor: pointer; }
.soon-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.soon-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid #c9c1ad; border-radius: 999px; font: 400 16px/1 var(--sans); color: var(--ink); background: transparent; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.soon-chip:hover span { border-color: var(--ink-2); }
.soon-chip input:checked + span { background: var(--ink-deep); border-color: var(--ink-deep); color: #fbf7ee; }
.soon-chip input:focus-visible + span { outline: 2px solid var(--wine); outline-offset: 3px; }
.soon-privacy { margin-top: 2px; font: 400 16px/1.5 var(--sans); color: var(--ink-2); }
.soon-privacy summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; list-style: none; }
.soon-privacy summary::-webkit-details-marker { display: none; }
.soon-privacy summary:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.soon-privacy p { margin: 4px 0 0; }
.soon-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.soon-card { position: relative; }

/* Phone and ZIP share a row; the card stays within one laptop screen. */
.soon-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 340px) { .soon-row { grid-template-columns: 1fr; gap: 16px; } }
@media (min-width: 961px) { .soon-card { gap: 13px; padding-block: 30px; } .soon-card-lede { font-size: 17px; } .soon-field input { min-height: 44px; padding-block: 8px 7px; } }
@media (min-width: 961px) {
  .soon-grid { grid-template-columns: minmax(0, 1.05fr) minmax(340px, 500px); }
  .soon-row-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
/* Phones: name and email each get the full width. */
@media (max-width: 960px) { .soon-row-even { grid-template-columns: 1fr; gap: 16px; } }
/* Shorter laptop screens: tighten the vertical rhythm so the card fits. */
@media (min-width: 961px) and (max-height: 880px) {
  .soon-top { padding-block: 18px 6px; }
  .soon-grid { padding-block: 4px 24px; }
  .soon h1 { font-size: clamp(44px, 5.2vw, 76px); }
  .soon-facts { margin-top: 28px; }
  .soon-card { padding-block: 24px; gap: 11px; }
}
/* Phones: phone and ZIP share the row evenly; narrow phones stack them so labels never wrap. */
@media (max-width: 960px) { .soon-row:not(.soon-row-even) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .soon-row:not(.soon-row-even) { grid-template-columns: 1fr; gap: 16px; } }
.soon-field label { white-space: nowrap; }

/* ---------- Phone menu (≤1100 px): a full-screen panel in forest green ---------- */
.brand-logo-ivory, .site-nav .nav-season, .site-nav .nav-foot, .site-nav .nav-more { display: none; }
@media (max-width: 1100px) {
  html.nav-open, body.nav-open { overflow: hidden; }
  body.nav-open .site-header { backdrop-filter: none; background: var(--ink-deep); }
  body.nav-open .brand-logo:not(.brand-logo-ivory) { display: none; }
  body.nav-open .brand-logo-ivory { display: block; }
  .brand, .menu-toggle { position: relative; z-index: 2; }
  body.nav-open .menu-toggle { color: var(--on-dark); border-color: rgba(246, 241, 230, .45); }
  .site-nav, .site-nav.open { display: flex; }
  .site-nav { position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--nav-top, calc(env(safe-area-inset-top, 0px) + 128px)) var(--gutter-r) calc(28px + env(safe-area-inset-bottom, 0px)) var(--gutter);
    background: var(--ink-deep); color: var(--on-dark); overflow-y: auto; overscroll-behavior: contain; border: 0; box-shadow: none;
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s; }
  .site-nav.open { visibility: visible; opacity: 1; transform: none; transition: opacity .28s ease, transform .28s ease; }
  .site-nav .nav-season { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font: 500 16px/1.3 var(--sans); letter-spacing: .12em; white-space: nowrap; text-transform: uppercase; color: var(--brass); }
  .site-nav .nav-season::before { content: ""; width: 32px; height: 1px; background: var(--brass); }
  .site-nav ul.nav-main { display: block; counter-reset: nav; border-top: 1px solid rgba(207, 171, 129, .35); }
  .site-nav ul.nav-main li { counter-increment: nav; border-bottom: 1px solid rgba(207, 171, 129, .35); }
  .site-nav ul.nav-main a { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border: 0; color: #fbf7ee; text-decoration: none; font-family: var(--display); font-weight: 450; font-size: clamp(30px, 8.4vw, 40px); line-height: 1.1; letter-spacing: -.01em; white-space: normal; }
  .site-nav ul.nav-main a::before { content: counter(nav, decimal-leading-zero); font: 500 16px/1 var(--sans); color: var(--brass); letter-spacing: .08em; min-width: 26px; }
  .site-nav ul.nav-main a:hover, .site-nav ul.nav-main a:focus-visible { color: #f3e6cf; }
  .site-nav ul.nav-main a[aria-current] { color: #f3e6cf; font-style: italic; border: 0; }
  .site-nav .nav-cta { margin-top: 28px; min-height: 56px; width: 100%; background: #fbf7ee; border-color: #fbf7ee; color: var(--wine); font-size: 19px; }
  .site-nav .nav-cta:hover { background: #fff; color: var(--wine-2); }
  .site-nav ul.nav-more { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 26px; margin-top: 22px; }
  .site-nav ul.nav-more li { display: block; }
  .site-nav ul.nav-more a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; color: rgba(246, 241, 230, .85); font: 400 17px/1.2 var(--sans); text-decoration: underline; text-decoration-color: rgba(207, 171, 129, .6); text-underline-offset: 5px; }
  .site-nav ul.nav-more a[aria-current] { color: #fff; }
  .site-nav .nav-foot { display: block; margin: auto 0 0; padding-top: 28px; font: 400 16px/1.4 var(--sans); color: rgba(246, 241, 230, .6); }
  .site-nav :focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) { .site-nav, .site-nav.open { transition: none; transform: none; } }
@media (max-width: 374px) {
  .site-nav .nav-season { white-space: normal; letter-spacing: .08em; }
  .site-nav .nav-season::before { display: none; }
}

/* ---------- Easier forms on phones (2026-10-21 mobile audit) ---------- */
/* The main action stays in reach: a bar pinned to the bottom of the screen on booking and quote forms.
   While someone is typing it steps back into the page so it never sits on top of the keyboard. */
@media (max-width: 760px) {
  form .form-actions { position: sticky; bottom: 0; z-index: 5; margin-inline: calc(-1 * var(--gutter)); padding: 12px var(--gutter-r) calc(12px + env(safe-area-inset-bottom, 0px)) var(--gutter); background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -12px 24px -20px rgba(24, 60, 49, .45); flex-wrap: nowrap; }
  form:has(input:not([type=checkbox]):not([type=radio]):focus, textarea:focus, select:focus) .form-actions, form.is-typing .form-actions { position: static; box-shadow: none; }
  form .form-actions .btn { min-height: 52px; }
  form .form-actions .btn[type="submit"] { flex: 1; }
  .panel form .form-actions, form.panel .form-actions { margin-inline: calc(-1 * clamp(20px, 3vw, 36px)); }
  /* A solid header: nothing shows through it while scrolling long forms. */
  .site-header { background: var(--paper); backdrop-filter: none; }
  /* Calendar: every day at least 44 px to tap, even on the smallest phones. */
  .calendar { padding: 10px; }
  .cal-grid td { padding: 1px; }
  .day { min-height: 44px; min-width: 0; }
  /* Phones have no drag and drop. */
}
@media (hover: none) { .dropzone-text > span:last-child { display: none; } }
/* Small links grow to a comfortable tap size without changing how they look. */
.crumbs a, .review-head a, .inline-tap, .photo-remove, .thumb button, .hint a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs ol { align-items: center; }
.review-head a { padding-inline: 8px; margin-right: -8px; }
/* Optional planning details tucked into one quiet disclosure. */
.opt-details { margin-top: 18px; border-top: 1px solid var(--line); }
.opt-details summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 52px; padding-top: 14px; font: 500 17px/1.3 var(--sans); color: var(--ink); }
.opt-details summary::-webkit-details-marker { display: none; }
.opt-details summary::after { content: "+"; margin-left: auto; font: 400 24px/1 var(--sans); color: var(--wine); }
.opt-details[open] summary::after { content: "–"; }
.opt-details summary span { font-weight: 400; color: var(--ink-2); }
.opt-details summary:focus-visible { outline: 3px solid var(--wine); outline-offset: 3px; }
.opt-details .field-grid { margin-top: 6px; }
/* Anything scrolled into view (errors, keyboard focus) stops above the pinned action bar. */
/* Room for the pinned bar when focus moves by keyboard; not while it has stepped back for typing. */
@media (max-width: 760px) { html:has(form .form-actions):not(:has(form.is-typing)) { scroll-padding-bottom: 104px; } }
/* In-place updates should never nudge the page: the view stays exactly where the visitor left it. */
html { overflow-anchor: none; }

/* ---------- Booking upgrades from the research (2026-10-22) ---------- */
/* Whole-season calendar: one grid, month labels on the 1st, "Next available" above it. */
.cal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.cal-head h3 { font-size: 21px; }
.cal-next { min-height: 44px; }
.day { position: relative; }
.day.out { visibility: hidden; }
.day-month { display: block; font: 600 16px/1 var(--sans); color: var(--wine); }
.day:has(.day-month) { gap: 1px; }
/* Early availability line on the first booking steps. */
.avail-note { display: flex; align-items: baseline; gap: 10px; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--line); background: var(--paper-2); font: 400 16px/1.45 var(--sans); color: var(--ink-2); }
.avail-note strong { color: var(--ink); font-weight: 600; }
.avail-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); transform: translateY(-1px); }
/* Example of a good entrance photo beside the uploader. */
.photo-example { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; margin: 4px 0 16px; }
.photo-example img { width: 120px; aspect-ratio: 3 / 2; object-fit: cover; }
.photo-example figcaption { margin: 0; font-size: 16px; }
/* One column for form fields, as the research recommends; related short fields may still pair up. */
.booking .field-grid, .form-section .field-grid { grid-template-columns: minmax(0, 1fr); }
.reply-promise { margin: 18px 0 0; padding-left: 14px; border-left: 2px solid var(--brass); font: 400 17px/1.5 var(--serif); color: var(--ink-2); }
.change-day { margin-top: 14px; }

/* ---------- planned seasons (/fall, /spring) ---------- */
.season-done { text-align: center; }
.season-done .season-leaf { width: 46px; height: auto; margin: 0 auto 12px; }
.season-done:focus { outline: none; }
#season-form .fine { margin-top: -4px; }

/* Finger-sized tap areas (44px) for text links, without moving anything: padding grows the hit area,
   the matching negative margin keeps the layout where it was. */
.textlink, main h2 > a, main h3 > a, .check-line label a { display: inline-block; --tap: max(0px, calc((44px - 1lh) / 2)); padding-block: var(--tap); margin-block: calc(-1 * var(--tap)); }
.footer-nav a { padding-inline: 10px; margin-inline: -10px; }
@media (min-width: 861px) { .footer-nav a { display: inline-block; padding-block: 12px; margin-block: -12px; } }

/* Status page: deposit deadline and the customer's own cancel option. */
.pay-by { margin-top: 10px; }
.cancel-box { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.cancel-box summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-family: var(--sans); font-size: 16px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; }
.cancel-box p { margin: 10px 0 14px; }
#st-title:focus { outline: none; }

/* Days set aside for the other side of the river read like requested days. */
i.area { background: transparent; border: 1px solid #8d8a7e; }
.area-note { margin: 0 0 14px; color: var(--ink-2); }

/* ---------- Phone section rhythm (owner request 2026-10-22: sections should read as sections) ----------
   Desktop keeps the approved mockup layout. On phones every section that sits on the paper background
   opens with the brand's botanical rule (brass hairline, fir sprig, brass hairline), neighbouring
   sections alternate paper and cream, and packages become framed cards. */
@media (max-width: 760px) {
  .collection, .kitchen-feature, .home-faq, .collection-rows, .scope-band, .timeline-section, .split-note,
  .faq-page, .prose-section, .journal-section, .journal-related, .form-section, .kitchen-scope + .form-section {
    position: relative;
  }
  .collection::before, .kitchen-feature::before, .home-faq::before, .collection-rows::before, .scope-band::before,
  .timeline-section::before, .split-note::before, .journal-related::before, .form-section::before {
    content: ""; display: block; justify-self: center; grid-column: 1 / -1;
    width: min(232px, 64%); height: 30px; margin: 0 auto 30px;
    background:
      url('../assets/img/leaf-green.webp') center / auto 30px no-repeat,
      linear-gradient(var(--brass), var(--brass)) left center / calc(50% - 26px) 1px no-repeat,
      linear-gradient(var(--brass), var(--brass)) right center / calc(50% - 26px) 1px no-repeat;
  }
  .collection { padding-top: 44px; }
  .kitchen-feature { padding-top: 44px; }
  .home-faq { border-top: 0; padding-top: 44px; }

  /* Alternate bands: paper / cream, so neighbouring sections never blur together. */
  .process, .split-note, .journal-related { background: var(--paper-2); }
  .process { padding-block: 44px 40px; border-top: 1px solid var(--paper-3); border-bottom: 1px solid var(--paper-3); }
  .split-note::before, .journal-related::before { display: none; }

  /* Section headings: a brass lead-in on the eyebrow and a little more presence. */
  main section > .wrap > .eyebrow, main section .section-head .eyebrow, .process .eyebrow, .home-faq .eyebrow, .collection .eyebrow {
    display: flex; align-items: center; gap: 12px;
  }
  main section > .wrap > .eyebrow::before, main section .section-head .eyebrow::before, .process .eyebrow::before, .home-faq .eyebrow::before, .collection .eyebrow::before {
    content: ""; width: 28px; height: 1px; background: var(--brass); flex: none;
  }
  .collection h2, .process h2, .home-faq h2 { font-size: 36px; line-height: 1.06; letter-spacing: -.012em; text-wrap: balance; }

  /* Packages as framed cards: photo edge to edge, content inset, price as a quiet tag. */
  .pkg-grid { row-gap: 22px; }
  .pkg-card, .pkg-card + .pkg-card {
    background: #fffdf9; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
    padding: 0 0 22px; box-shadow: 0 22px 36px -30px rgba(24, 60, 49, .55);
  }
  .pkg-card > :not(.pkg-photo) { margin-inline: 18px; }
  .pkg-card .photo-note { margin-top: 10px; }
  .pkg-head { align-items: center; }
  .pkg-card .price { font-size: 24px; padding: 2px 12px; border: 1px solid var(--brass); border-radius: 999px; background: var(--paper); }
  .pkg-card .pkg-fit { font-style: italic; }
  .pkg-actions { padding-top: 20px; }

  /* Packages page rows: the same framed treatment. */
  .pkg-row { background: #fffdf9; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; box-shadow: 0 22px 36px -30px rgba(24, 60, 49, .55); }
  .pkg-row .pkg-row-copy { padding: 0 18px 22px; }
  .pkg-row figcaption { padding: 10px 18px 0; }
  .pkg-row .price { font-size: 24px; padding: 2px 12px; border: 1px solid var(--brass); border-radius: 999px; background: var(--paper); }
  .pkg-row .pkg-head { align-items: center; }

  /* Process steps: numbered brass seals instead of bare digits. */
  .process-steps li, .process-steps li:first-child { border-left: 0; padding-left: 0; position: relative; }
  .process-steps li + li { margin-top: 6px; }
  .process-steps .step-no { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--brass); border-radius: 50%; font-family: var(--display); font-size: 18px; color: var(--ink); background: var(--paper); margin-bottom: 8px; }

  /* The custom-quote strip reads as an invitation card, not two loose rules. */
  .custom-strip-inner { border: 1px solid var(--brass); border-radius: 6px; background: var(--paper-2); padding: 22px 18px; margin-inline: var(--gutter); }
  .custom-strip .btn { width: 100%; padding-inline: 12px; white-space: nowrap; }
}

.nowrap { white-space: nowrap; }

.window-note { margin: 0; padding: 14px 16px; border: 1px dashed var(--line); color: var(--ink-2); font-family: var(--sans); font-size: 16px; }

/* Accessibility pass 2026-10-22 (docs/audit-a11y-2026-10-22.md) */
/* Focus rings on the dark green bands: the wine ring measured 1.4:1 there; brass is 5.8:1. */
.final-cta :focus-visible, .soon-foot :focus-visible, .site-footer.dark :focus-visible { outline-color: var(--brass); }
/* Small text over the coming-soon photo: full-strength colours and a soft shadow so it holds 4.5:1 over light patches. */
.soon-eyebrow, .soon-season { color: #e6cda6; text-shadow: 0 1px 10px rgba(10, 38, 31, .95), 0 0 2px rgba(10, 38, 31, .8); }
.soon-areas { color: rgba(246, 241, 230, .9); }
.soon-credit { color: rgba(246, 241, 230, .86); }
.soon-facts dt { color: rgba(246, 241, 230, .84); }
.soon-owner summary { color: rgba(246, 241, 230, .92); }
.soon-areas, .soon-credit, .soon-facts dt, .soon-owner summary { text-shadow: 0 1px 8px rgba(10, 38, 31, .9); }
/* Package pages: a focused control is never hidden under the sticky buy bar; on short screens the bar steps aside. */
html:has(.sticky-buy) { scroll-padding-bottom: 96px; }
@media (max-height: 500px) { .sticky-buy { display: none !important; } html:has(.sticky-buy) { scroll-padding-bottom: 0; } }

/* Status page: the customer's referral code */
.referral-box { margin-top: 22px; padding: 18px; border: 1px solid var(--brass); border-radius: 6px; background: var(--paper-2); }
.referral-code { font-family: var(--display); font-size: 28px; letter-spacing: .06em; margin: 6px 0; }

/* Page-image audit: keep the ribbon context within the quote sidebar. */
.audit-context-photo { margin: 24px 0; }
.audit-context-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }

/* Keep cabinet-top greenery in the homepage wide crop. */
.kitchen-photo img { object-position: 50% 0%; }

/* Look step: the customer's own inspiration (optional) */
.inspiration { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); }
.inspiration summary { cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.inspiration summary .opt { font-family: var(--sans); font-size: 16px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; }
.inspiration > p { margin: 8px 0 14px; }
.inspiration .fine { margin-top: 12px; }

/* Image audit: optional extras shown separately from package inventory. */
.extras-gallery { background: var(--paper-2); }
.extra-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 30px; }
.extra-examples article { min-width: 0; }
.extra-examples .photo-fig { margin: 0; }
.extra-examples img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.extra-example-copy { padding-top: 18px; }
.extra-example-copy h3 { margin: 0 0 10px; }
.extra-example-price { color: var(--wine); font-family: var(--sans); font-size: 16px; }
@media (max-width: 760px) { .extra-examples { grid-template-columns: 1fr; gap: 34px; } }