/* ============================================================
   Harbour & Hinterland: theme. Coastal haze, deep ink and one sage.
   Young Serif for the warm, local voice; Figtree for everything you
   scan. Cards like printed listing sheets; the land itself, surf to
   range, is the one illustration.
   ============================================================ */
@layer theme {
:root{
  --canvas:#EEF0EC; --surface:#F8F9F6; --ink:#1F2A24; --muted:#5A665F; --line:#D3D9D2; --line-strong:#9AA59D;
  --primary:#1F2A24; --primary-hover:#2F3D35; --on-primary:#F3F5F1;
  --accent:#4E7A64; --accent-hover:#426A56; --on-accent:#F8F9F6; --accent-text:#3F6853;
  --focus:#3F6853; --focus-ring:rgb(63 104 83/.22); --error:#A3261B; --ph-bg:#DDE2DB;
  --header-bg:#EEF0EC; --footer-bg:#1F2A24; --on-footer:#DCE2DC;
  --sea:#7FA7B5; --sand:#E2D3AE; --flat:#B9C7B0; --hills:#8DA48A; --range:#5D7A63; --heart:#C2453B;
  --font-display:'Young Serif',Georgia,serif; --font-body:'Figtree',system-ui,sans-serif;
  --radius:10px; --radius-sm:8px; --radius-lg:18px; --radius-btn:999px;
  --header-h:4.5rem;
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A24' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
h1,h2,h3{font-weight:400;letter-spacing:-.015em}
h2{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.04}
h3{font-size:1.25rem;line-height:1.2}
.sec-head{display:grid;gap:.6rem;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head p{color:var(--muted);font-size:1.1rem}
.btn{font-weight:700}

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--line)}
.brand{font-weight:400;font-size:1.3rem}
.brand em{font-style:normal;color:var(--accent-text)}
.brand-mark{display:inline-flex;align-items:center;width:auto;padding:0 .5rem;background:var(--accent);color:var(--on-accent);font-family:var(--font-body);font-weight:800;font-size:.85rem;letter-spacing:.02em;white-space:nowrap}
.brand-mark i{font-style:normal;opacity:.75}
@media (max-width:420px){ .brand > span:last-child{font-size:1.05rem} }
@media (min-width:900px){ .site-nav a{font-weight:600} }

/* ---------- hero with the search ---------- */
.hero{position:relative;display:grid;align-items:end;min-height:min(86svh,50rem);isolation:isolate;overflow:clip}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-bg .ph{height:100%;aspect-ratio:auto;border-radius:0}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(31 42 36/.05) 30%,rgb(31 42 36/.78))}
.hero-inner{display:grid;gap:1.2rem;justify-items:start;padding-block:8rem clamp(2.5rem,6vw,4.5rem);color:var(--on-primary)}
.hero h1{color:var(--on-primary);font-size:clamp(2.7rem,6.4vw,5.6rem);line-height:1;max-width:14ch}
.hero h1 em{font-style:normal;display:block;color:var(--sand)}
.hero-lede{font-size:1.15rem;max-width:32rem;opacity:.92}
.search{display:grid;gap:.6rem;width:min(100%,44rem);padding:.75rem;border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);box-shadow:0 30px 60px -30px rgb(0 0 0/.6)}
.modes{display:flex;gap:.3rem}
.modes button{min-height:40px;padding:.35rem 1rem;border-radius:999px;font-weight:700;color:var(--muted);transition:background-color var(--dur-fast) linear,color var(--dur-fast) linear}
.modes button[aria-pressed="true"]{background:var(--ink);color:var(--on-primary)}
.search-row{display:grid;gap:.5rem}
@media (min-width:640px){ .search-row{grid-template-columns:1.3fr 1fr auto} }
.js .nojs-cta{display:none}

/* ---------- listings and the land ---------- */
.list-head{display:grid;gap:.6rem;margin-bottom:1.75rem}
.list-head p{color:var(--muted);font-size:1.1rem}
.lean{display:grid;gap:.5rem;margin-bottom:1.5rem;padding:1.1rem 1.25rem 1rem;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line)}
.lean-q{font-family:var(--font-display);font-size:1.3rem}
.lean-track{--v:.5;position:relative;height:5.5rem}
.land{position:absolute;inset:0;width:100%;height:100%;border-radius:var(--radius-sm)}
.l-sea{fill:var(--sea)} .l-sand{fill:var(--sand)} .l-flat{fill:var(--flat)} .l-hills{fill:var(--hills)} .l-range{fill:var(--range)}
.lean-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;touch-action:pan-y}
.lean-pin{position:absolute;left:calc(var(--v) * 100%);top:.2rem;display:grid;place-items:center;width:2.6rem;height:2.6rem;margin-left:-1.3rem;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--ink);color:var(--on-primary);box-shadow:0 8px 16px -6px rgb(0 0 0/.5);pointer-events:none}
.lean-pin .ico{transform:rotate(45deg);width:1.1rem;height:1.1rem}
.lean-track:has(.lean-range:focus-visible) .lean-pin{outline:3px solid var(--focus);outline-offset:3px}
.lean-ends{display:flex;justify-content:space-between;font-size:.85rem;font-weight:700;color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1rem}
.filters .select{width:auto;min-height:46px;padding-block:.5rem}
.statuses{display:flex;gap:.3rem;padding:.25rem;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.statuses button,.saved-btn{min-height:40px;padding:.35rem .95rem;border-radius:999px;font-weight:700;transition:background-color var(--dur-fast) linear,color var(--dur-fast) linear}
.statuses button[aria-pressed="true"]{background:var(--ink);color:var(--on-primary)}
.saved-btn{display:inline-flex;align-items:center;gap:.4rem;border:1.5px solid var(--line-strong)}
.saved-btn .ico{width:1rem;height:1rem}
.saved-btn[aria-pressed="true"]{background:var(--heart);border-color:var(--heart);color:var(--surface)}
.count{font-weight:700;color:var(--muted);margin-bottom:1rem;min-height:1.5em}
.grid{display:grid;gap:1.25rem}
.card{display:grid;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:opacity var(--dur-mid) linear,box-shadow var(--dur-mid) var(--ease-out),transform var(--dur-mid) var(--ease-out)}
.card[hidden]{display:none}
@media (hover:hover){ .card:hover{box-shadow:0 20px 40px -24px rgb(31 42 36/.45);transform:translateY(-3px)} }
.card.is-far{opacity:.55}
.card-photo{position:relative}
.card-photo .ph{border-radius:0}
.status{position:absolute;left:.75rem;top:.75rem;padding:.25rem .65rem;border-radius:999px;font-weight:800;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;background:var(--surface);color:var(--ink)}
.status--sold{background:var(--ink);color:var(--on-primary)}
.prop-meta .status{position:static}
.heart{position:absolute;right:.6rem;top:.6rem;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--surface);color:var(--ink);
  box-shadow:0 4px 10px rgb(0 0 0/.15);transition:transform var(--dur-fast) var(--ease-out)}
.heart:active{transform:scale(.88)}
.heart[aria-pressed="true"]{color:var(--heart)}
.heart[aria-pressed="true"] .ico{fill:currentColor}
@media (prefers-reduced-motion:no-preference){ .heart.burst{animation:burst .45s var(--ease-out)} }
@keyframes burst{40%{transform:scale(1.25)}}
.card-body{display:grid;gap:.4rem;padding:1.1rem 1.2rem 1.25rem;align-content:start}
.card-price{font-family:var(--font-display);font-size:1.35rem}
.card-where{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;color:var(--muted);font-size:.92rem;font-weight:600}
.zone{padding:.1rem .5rem;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.zone--coast{background:color-mix(in srgb,var(--sea) 35%,var(--surface));color:var(--ink)}
.zone--hinterland{background:color-mix(in srgb,var(--range) 25%,var(--surface));color:var(--ink)}
.card h3{font-family:var(--font-body);font-weight:700;font-size:1.08rem}
.specs{display:flex;gap:1rem;margin-top:.2rem}
.specs li{display:flex;align-items:center;gap:.35rem;font-weight:700}
.specs .ico{width:1.1rem;height:1.1rem;color:var(--accent-text)}
.card-link{justify-self:start;display:inline-flex;align-items:center;gap:.35rem;margin-top:.4rem;font-weight:800;color:var(--accent-text);text-decoration:none;min-height:44px}
@media (hover:hover){ .card-link:hover .ico--go{transform:translateX(4px)} }
.card-link .ico{transition:transform var(--dur-mid) var(--ease-out)}
@media (prefers-reduced-motion:no-preference){ .card.pop{animation:card-in .45s var(--ease-out) both;animation-delay:var(--pd,0ms)} }
@keyframes card-in{from{transform:translateY(12px)}}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
.empty{padding:2rem;text-align:center;color:var(--muted);border:1.5px dashed var(--line-strong);border-radius:var(--radius-lg)}
.demo-only{margin-top:1.25rem;font-size:.9rem;color:var(--muted)}
@media (min-width:700px){ .grid{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .grid{grid-template-columns:repeat(3,1fr)} }

/* ---------- the featured listing ---------- */
.property{background:var(--surface);border-block:1px solid var(--line)}
.prop-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-weight:700;color:var(--muted);margin-bottom:.6rem}
.property h2,.property h1{max-width:22ch}
.prop-price{font-family:var(--font-display);font-size:1.6rem;color:var(--accent-text);margin:.6rem 0 1.75rem}
.prop-grid{display:grid;gap:1.5rem;align-items:start}
.gallery{display:grid;gap:.6rem}
.gallery:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:var(--radius-lg)}
.g-main{position:relative;display:grid}
.g-slide{grid-area:1/1}
.g-slide .ph{border-radius:var(--radius-lg)}
.g-slide figcaption{margin-top:.4rem;font-size:.88rem;color:var(--muted)}
.no-js-gallery .g-main{grid-template-columns:1fr 1fr;gap:.6rem}
.no-js-gallery .g-slide{grid-area:auto}
.no-js-gallery .g-slide:first-child{grid-column:1 / -1}
.gallery:not(.no-js-gallery) .g-slide{opacity:0;visibility:hidden;transition:opacity var(--dur-mid) linear,visibility 0s linear var(--dur-mid)}
.gallery:not(.no-js-gallery) .g-slide.is-on{opacity:1;visibility:visible;transition-delay:0s}
.g-btn{position:absolute;top:calc(50% - 1rem);display:grid;place-items:center;width:48px;height:48px;margin-top:-24px;border-radius:50%;background:var(--surface);box-shadow:0 6px 16px rgb(0 0 0/.18);
  transition:transform var(--dur-fast) var(--ease-out)}
.g-btn:active{transform:scale(.92)}
.g-prev{left:.75rem}
.g-next{right:.75rem}
.g-count{position:absolute;right:.75rem;top:.75rem;padding:.25rem .6rem;border-radius:999px;background:rgb(31 42 36/.75);color:var(--on-primary);font-weight:700;font-size:.85rem}
.g-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem}
.g-thumb{border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:4/3;opacity:.6;transition:opacity var(--dur-fast) linear;outline-offset:2px}
.g-thumb img{width:100%;height:100%;object-fit:cover}
.g-thumb[aria-current="true"]{opacity:1;outline:2.5px solid var(--accent)}
@media (hover:hover){ .g-thumb:hover{opacity:1} }
.prop-side{display:grid;gap:1.25rem}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.facts li{display:flex;align-items:center;gap:.45rem;padding:.8rem;border-radius:var(--radius);background:var(--canvas);font-size:.95rem}
.facts .ico{color:var(--accent-text)}
.opens{display:grid;gap:.75rem;padding:1.25rem;border-radius:var(--radius-lg);background:var(--ink);color:var(--on-primary)}
.opens h3,.opens h2{color:var(--on-primary);font-size:1.3rem}
.opens ul{display:grid;gap:.5rem}
.opens li{display:flex;gap:.5rem;align-items:center}
.opens .ico{color:var(--sand)}
.prop-body{display:grid;gap:2rem;margin-top:2.5rem}
.prop-copy{display:grid;gap:1rem;font-size:1.08rem;max-width:40rem}
.features{display:grid;gap:.5rem;margin-top:.5rem}
.features li{position:relative;padding-left:1.4rem}
.features li::before{content:"";position:absolute;left:0;top:.6em;width:.55rem;height:.55rem;border-radius:50%;background:var(--accent)}
.calc{display:grid;gap:1rem;padding:1.5rem;border-radius:var(--radius-lg);background:var(--canvas);border:1px solid var(--line)}
.calc h3,.calc h2{font-size:1.4rem}
.c-field{display:grid;gap:.3rem}
.c-field label{display:flex;justify-content:space-between;gap:1rem;font-weight:700;font-size:.95rem}
.c-field output{color:var(--accent-text);font-variant-numeric:tabular-nums}
.c-field input{width:100%;accent-color:var(--accent);height:1.8rem}
.c-out{display:flex;justify-content:space-between;align-items:baseline;padding-top:.8rem;border-top:1px solid var(--line-strong);font-weight:700}
.c-out strong{font-family:var(--font-display);font-weight:400;font-size:2.2rem;font-variant-numeric:tabular-nums}
.c-loan,.c-note{font-size:.9rem;color:var(--muted)}
@media (min-width:1000px){ .prop-grid{grid-template-columns:1.6fr .8fr;gap:2.5rem} .prop-body{grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:start} .prop-side{position:sticky;top:calc(var(--header-h) + 1.5rem)} }

/* ---------- sell ---------- */
.sell-grid{display:grid;gap:2.5rem;align-items:center}
.sell-photo .ph{border-radius:999px 999px var(--radius-lg) var(--radius-lg)}
.sell-copy{display:grid;gap:1rem}
.sell-copy > p{color:var(--muted);font-size:1.1rem;max-width:32rem}
.form{display:grid;gap:1.25rem;padding:clamp(1.25rem,3vw,2rem);background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--line)}
.form-row{display:grid;gap:1.25rem}
@media (min-width:600px){ .form-row{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .sell-grid{grid-template-columns:.75fr 1.25fr;gap:4rem} }

/* ---------- team ---------- */
.team{background:var(--surface);border-block:1px solid var(--line)}
.agents{display:grid;gap:1.25rem}
.agent{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;align-items:start}
.agent .ph{border-radius:50%}
.ph--initials{background:var(--accent)}
.ph--initials > span{font-size:2.2rem}
.ph--initials > small{display:none}
.agent h3,.agent h2{font-size:1.5rem}
.agent-role{font-weight:700;color:var(--accent-text);margin:.15rem 0 .4rem}
.agent p:last-child{color:var(--muted)}
@media (min-width:900px){ .agents{grid-template-columns:repeat(3,1fr);gap:2rem} .agent{grid-template-columns:1fr} .agent .ph{width:7rem} }

/* ---------- reviews ---------- */
.rv-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem}
.rv-card{display:grid;gap:1.25rem;align-content:space-between;padding:1.6rem;background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--line)}
.rv-card blockquote p{font-size:1.1rem}
.rv-card figcaption{display:grid;font-size:.92rem;color:var(--muted)}
.rv-card figcaption strong{color:var(--ink);font-family:var(--font-display);font-weight:400;font-size:1.1rem}

/* ---------- the one sage band ---------- */
.quote-band{background:var(--accent);color:var(--on-accent);padding-block:clamp(3.5rem,8vw,6rem)}
.quote-band blockquote p{font-family:var(--font-display);font-size:clamp(1.8rem,4.2vw,3.2rem);line-height:1.15;max-width:52rem}
.quote-band figcaption{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.quote-band .sample-tag{color:var(--on-accent)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:2rem}
.faq summary .ico{color:var(--accent-text)}
@media (min-width:900px){ .faq-grid{grid-template-columns:.7fr 1.3fr;gap:4rem} .faq-grid h2{position:sticky;top:calc(var(--header-h) + 2rem);align-self:start} }

/* ---------- contact ---------- */
.contact{background:var(--surface);border-top:1px solid var(--line)}
.contact-grid{display:grid;gap:2.5rem}
.contact-copy > p{margin-top:1rem;color:var(--muted);font-size:1.1rem}
.contact-list{display:grid;gap:.9rem;margin-top:2rem}
.contact-list li{display:flex;gap:.7rem;align-items:flex-start}
.contact-list a{font-weight:700}
.contact-list .ico{color:var(--accent-text);margin-top:.15rem}
.contact .form{background:var(--canvas)}
@media (min-width:900px){ .contact-grid{grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start} }

/* ---------- map ---------- */
.section--map{padding-bottom:var(--space-section)}
.map-block{border-radius:var(--radius-lg);background:linear-gradient(90deg,var(--sea),var(--sand) 18%,var(--flat) 40%,var(--hills))}
.map-title{display:grid;gap:.25rem;max-width:28rem;padding:1rem 1.2rem;border-radius:var(--radius);background:var(--surface)}
.map-title strong{font-family:var(--font-display);font-weight:400;font-size:1.4rem}
.map-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.map-note{margin-top:.75rem;font-size:.9rem;color:var(--muted)}

/* ---------- footer ---------- */
.foot-grid{display:grid;gap:2rem}
.foot-brand{display:grid;gap:.75rem;max-width:26rem}
.foot-mark{font-family:var(--font-display);font-size:1.6rem}
.foot-lic{display:flex;gap:.5rem;align-items:center;font-weight:600}
.foot-lic .ico{color:var(--sand)}
.site-footer h2{font-family:var(--font-body);font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;opacity:.7;margin-bottom:.8rem;color:var(--on-footer)}
.site-footer ul{display:grid;gap:.5rem}
@media (min-width:800px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr} }
}