/* Customer app shell: sticky nav, photographic hero, map, cards, footer. */
.topnav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topnav .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-family: var(--serif); font-weight: 700; font-size: 1.1rem; }
.brand img { height: 36px; width: auto; }
.brand-wordmark { display: inline; }
.nav-links { display: flex; gap: var(--s-2); align-items: center; }
.nav-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; text-decoration: none; color: var(--text); font-weight: 600; font-size: var(--fs-sm); }
.nav-links a:hover, .nav-links a.active { background: var(--surface-2); color: var(--brand-text); }
.nav-links .plan-count { background: var(--gold); color: var(--on-gold); border-radius: 999px; padding: 0 8px; font-size: var(--fs-xs); font-weight: 800; min-width: 22px; text-align: center; }
.nav-right { display: flex; gap: var(--s-2); align-items: center; }
.nav-burger { display: none; }
@media (max-width: 860px) {
  .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--s-3); flex-direction: column; align-items: stretch; box-shadow: var(--shadow); }
  .nav-links.open { display: flex; }
  .nav-links a { min-height: 48px; }
  .nav-burger { display: inline-flex; }
  .brand-wordmark { display: none; }
}

/* Hero: a photograph with a maroon-to-navy overlay for legible type */
.hero { position: relative; min-height: min(88vh, 760px); display: grid; align-items: center; color: #FFFFFF; background: #2A0F16 url('/assets/stock-1.jpg') center/cover no-repeat; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(42, 12, 20, .92) 0%, rgba(74, 18, 27, .82) 45%, rgba(20, 42, 82, .62) 100%); }
.hero .wrap { position: relative; padding: var(--s-8) 0; }
.hero h1 { color: #FFFFFF; max-width: 14ch; margin-bottom: var(--s-4); }
.hero .lede { font-size: var(--fs-lg); max-width: 56ch; color: #F5EFE8; margin-bottom: var(--s-6); }
.hero .eyebrow { color: #E7C866; }
.hero-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hero-stats { display: flex; gap: var(--s-6); flex-wrap: wrap; margin-top: var(--s-7); color: #F5EFE8; }
.hero-stats strong { display: block; font-family: var(--serif); font-size: var(--fs-2xl); color: #E7C866; line-height: 1; }
.hero-stats span { font-size: var(--fs-sm); }
@media (max-width: 720px) { .hero { min-height: 0; } .hero .wrap { padding: var(--s-7) 0; } .hero-stats { gap: var(--s-4); } }

/* Concierge search */
.ask { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: var(--s-3); display: flex; gap: var(--s-2); align-items: center; border: 1px solid var(--line); max-width: 760px; }
.ask input { border: 0; min-height: 52px; font-size: var(--fs-lg); background: transparent; }
.ask input:focus { box-shadow: none; }
.ask .btn { flex: none; }
.ask-examples { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
.ask-examples button { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); color: #FFFFFF; border-radius: 999px; min-height: 44px; padding: 0 14px; font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.ask-examples button:hover { background: rgba(255, 255, 255, .26); }
@media (max-width: 600px) { .ask { flex-wrap: wrap; } .ask .btn { width: 100%; } }

/* Explore layout: map + filters + results */
.explore { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-5); align-items: start; }
@media (max-width: 960px) { .explore { grid-template-columns: 1fr; } }
.map-card { position: sticky; top: 84px; padding: var(--s-3); }
@media (max-width: 960px) { .map-card { position: static; } }
.region-map { width: 100%; height: auto; display: block; border-radius: var(--r); background: var(--surface-2); font-family: var(--sans); }
.region-map .sea { fill: var(--surface-2); }
.region-map .road { fill: none; stroke: var(--line); stroke-width: .7; stroke-dasharray: 1.4 1; }
.region-map .zone polygon { fill: var(--blue); fill-opacity: var(--k, .35); stroke: var(--surface); stroke-width: .5; transition: fill-opacity .25s, fill .25s; cursor: pointer; }
.region-map .zone.on polygon { fill: var(--maroon); }
.region-map .zone.off polygon { fill: var(--line); fill-opacity: .5; }
.region-map .zone.sel polygon { stroke: var(--gold); stroke-width: 1.2; }
.region-map .zone:hover polygon { fill-opacity: .8; }
.region-map .zl { font-size: 3.1px; font-weight: 700; fill: var(--text); pointer-events: none; }
.region-map .zn { font-size: 2.4px; fill: var(--text); pointer-events: none; }
.region-map .zone.on .zl, .region-map .zone.on .zn { fill: #FFFFFF; }
[data-theme="light"] .region-map .zone.off .zl { fill: var(--muted); }
.region-map .town circle { fill: var(--text); }
.region-map .tl { font-size: 2.6px; fill: var(--text); font-style: italic; }
.region-map .pin { cursor: pointer; }
.region-map .pin .hit { fill: transparent; }
.region-map .pin .dot { fill: var(--gold); stroke: var(--maroon-deep); stroke-width: .5; transition: r .15s; }
.region-map .pin.hot .dot { fill: #FFFFFF; stroke: var(--gold); stroke-width: .8; r: 2.1; }
.region-map .pin.inplan .dot { fill: var(--blue); stroke: #FFFFFF; r: 2.3; }
.region-map .pin:hover .dot, .region-map .pin:focus .dot { r: 2.6; }
.map-legend { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); padding: var(--s-2) var(--s-2) 0; }
.map-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -2px; margin-right: 4px; }
.filters { display: grid; gap: var(--s-4); }
.filters details { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.filters summary { padding: 12px var(--s-4); font-weight: 700; cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; list-style: none; }
.filters summary::-webkit-details-marker { display: none; }
.filters .chip-row { padding: 0 var(--s-4) var(--s-4); }

/* Farm cards */
.farm-card { display: grid; grid-template-rows: 160px 1fr; overflow: hidden; height: 100%; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.farm-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: inherit; }
.farm-card .ph { background: var(--surface-2) center/cover no-repeat; position: relative; }
.farm-card .ph .badge { position: absolute; top: 10px; left: 10px; }
.farm-card .ph .badge + .badge { left: auto; right: 10px; }
.farm-card .body { padding: var(--s-4); display: grid; gap: 8px; align-content: start; }
.farm-card .title-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: start; }
.farm-card h3 { font-size: var(--fs-lg); margin: 0; }
.farm-card .price { color: var(--brand-text); }
.farm-card .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.farm-list { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .farm-list { grid-template-columns: 1fr; } }
.farm-row { display: grid; grid-template-columns: 84px 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3); }
.farm-row .ph { width: 84px; height: 72px; border-radius: var(--r-sm); background: var(--surface-2) center/cover; }
.farm-row h3 { font-size: var(--fs); margin: 0 0 2px; }
@media (max-width: 480px) { .farm-row { grid-template-columns: 64px 1fr; } .farm-row .ph { width: 64px; height: 56px; } .farm-row .act { grid-column: 1 / -1; } }

/* Farm detail */
.farm-hero { height: min(46vh, 420px); border-radius: var(--r-lg); background: var(--surface-2) center/cover no-repeat; position: relative; overflow: hidden; }
.farm-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(20, 12, 16, .75)); }
.farm-hero .over { position: absolute; left: var(--s-5); right: var(--s-5); bottom: var(--s-5); color: #FFFFFF; }
.farm-hero .over h1 { color: #FFFFFF; font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 6px; }
.detail { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr); gap: var(--s-6); margin-top: var(--s-6); align-items: start; }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; } }
.facet-block { margin-bottom: var(--s-5); }
.facet-block h3 { display: flex; gap: 8px; align-items: center; font-size: var(--fs-lg); }
.offer { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.offer .price { color: var(--brand-text); font-size: var(--fs-lg); }
.sticky-side { position: sticky; top: 90px; }
@media (max-width: 900px) { .sticky-side { position: static; } }

/* Day plan */
.plan-stop { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); }
.plan-stop .n { width: 44px; height: 44px; border-radius: 50%; background: var(--maroon); color: #FFFFFF; display: grid; place-items: center; font-weight: 800; font-family: var(--serif); }
.plan-leg { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: var(--fs-sm); padding: 4px 0 4px 18px; border-left: 2px dashed var(--line); margin-left: 21px; }
.plan-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.plan-summary strong { display: block; font-family: var(--serif); font-size: var(--fs-xl); color: var(--brand-text); }
@media (max-width: 480px) { .plan-summary { grid-template-columns: 1fr 1fr; } }

/* Sub-region tiles & sections */
.region-tile { padding: var(--s-5); display: grid; gap: 6px; text-decoration: none; color: inherit; border-top: 4px solid var(--maroon); }
.region-tile:nth-child(2n) { border-top-color: var(--blue); }
.region-tile:nth-child(3n) { border-top-color: var(--gold); }
.region-tile:hover { box-shadow: var(--shadow); color: inherit; }
.region-tile strong { font-family: var(--serif); font-size: var(--fs-lg); }
.photo-band { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: center; }
.photo-band img { border-radius: var(--r-lg); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
@media (max-width: 800px) { .photo-band { grid-template-columns: 1fr; } }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.step { padding: var(--s-5); }
.step .n { width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--on-gold); display: grid; place-items: center; font-weight: 800; margin-bottom: var(--s-3); }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.band-maroon { background: var(--maroon); color: #FFFFFF; }
.band-maroon h2, .band-maroon p { color: #FFFFFF; }
.band-maroon .eyebrow { color: #E7C866; }

/* Footer */
.footer { background: var(--blue-deep); color: #E9EEF8; padding: var(--s-7) 0 var(--s-5); margin-top: var(--s-8); }
.footer a { color: #FFFFFF; }
.footer a:hover { color: #E7C866; }
.footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-5); }
.footer h4 { color: #E7C866; font-family: var(--sans); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .12em; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer .trust { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .18); font-size: var(--fs-sm); color: #D6DEF0; }
.footer .trust span { display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 800px) { .footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer .cols { grid-template-columns: 1fr; } }

/* Install banner */
.install-bar { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; padding: var(--s-3) var(--s-4); align-items: center; gap: var(--s-3); justify-content: space-between; }
.install-bar.show { display: flex; }
.page { min-height: 60vh; padding-top: var(--s-6); }