/* ==========================================================================
   Hidden Valley Ranch — full stylesheet
   The critical above-the-fold subset of this file is inlined in _Layout.cshtml.
   Anything here is safe to load asynchronously.

   Design notes: system font stacks only (no web font request, no font swap,
   instant text paint), a small palette pulled from the landscape, and layout
   that reserves space for images so nothing shifts as photos arrive.
   ========================================================================== */

/* ==========================================================================
   PALETTE — Engel & Völkers
   Sampled directly from the supplied logo artwork rather than guessed:
     red      #E10C12   the ampersand
     wordmark #303030   "ENGEL & VÖLKERS"
     subtitle #6D6E70   "Pagosa Springs"

   The brand reads as white and off-white with a very small amount of red. Red
   is therefore treated as a PUNCTUATION colour, not a fill colour. It appears
   in exactly nine places site-wide: the nav underline, link hover, the arrow
   link hover, primary-button hover, the focus ring, the callout rule, the CTA
   band's top rule, the required-field asterisk, and the price. Everywhere a
   coloured block used to be, the colour is now near-black or off-white.
   ========================================================================== */
:root {
    --ink: #303030;          /* body copy, headings — the wordmark grey-black */
    /* Nudged one step darker than the logo's #6D6E70 so secondary text still
       clears WCAG AA (4.5:1) on the warm panels and in the image wells, where
       the lighter grey landed at 4.48:1. Visually indistinguishable. */
    --ink-soft: #67686A;     /* secondary copy, labels */
    --paper: #FFFFFF;        /* primary background — the site is white */
    --paper-2: #FCFAF5;      /* panels and alternating bands */
    --paper-3: #F4F0E6;      /* image placeholders and wells */
    --line: #E8E3D8;         /* hairlines, warmed to match the panels */
    --btn: #404040;          /* buttons and other solid controls */
    --dark: #404040;         /* photo-header fallback — never a page background */
    --brand-red: #E10C12;    /* accents only */
    --brand-red-dark: #B80A0E;

    /* Legacy aliases. These map to NEUTRALS on purpose — red is applied
       explicitly where it is wanted, so no rule can turn red by accident. */
    --forest: var(--btn);
    --forest-2: var(--ink);
    --moss: var(--ink-soft);
    --gold: var(--ink);
    --sky: var(--ink-soft);

    --radius: 2px;
    --wrap: 1180px;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --shadow: 0 1px 2px rgba(31,31,31,.04), 0 8px 28px rgba(31,31,31,.06);
}

/* ---------- The nine places red is allowed ---------- */
:focus-visible { outline-color: var(--brand-red) !important; }
a:not(.btn):hover { color: var(--brand-red); }
.link-arrow:hover { color: var(--brand-red); }
.nav__item > a:hover, .nav__item > a[aria-current] { box-shadow: inset 0 -2px 0 var(--brand-red) !important; }
.callout { border-left-color: var(--brand-red) !important; }
.cta-band { border-top: 3px solid var(--brand-red); }
.req { color: var(--brand-red); }
.hero__price { color: #fff; }
.hero__price::after { content: ""; display: block; width: 56px; height: 3px; background: var(--brand-red); margin-top: .6rem; }

/* ---------- Base ---------- */
/* Nothing may exceed the viewport width. `clip` rather than `hidden` because
   `hidden` on a scroll container silently breaks position:sticky, which the
   site header depends on. */
html { overflow-x: clip; }
body { margin: 0; max-width: 100%; overflow-x: clip; overflow-wrap: break-word; }

/* Every grid below uses minmax(min(Npx, 100%), 1fr) rather than minmax(Npx, 1fr).
   A bare minmax floor is a hard minimum: on a 320px phone the content box is
   about 280px, so a 320px floor forces the grid wider than the screen and the
   whole page scrolls sideways. Wrapping the floor in min(..., 100%) lets the
   track collapse to the available width instead. */
p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
strong { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

/* Visible to screen readers, invisible on screen. Used for button labels where
   the visual affordance is an icon. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

.lede { font-size: clamp(1.1rem, 2vw, 1.32rem); line-height: 1.6; color: var(--ink-soft); }

/* A paragraph that follows a bullet list needs more breathing room than the
   default paragraph gap, or it reads as a stray item that lost its bullet. */
.after-list { margin-top: 1.75rem; }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.5em; }
.prose h3 { margin-top: 2em; }
.prose > *:first-child { margin-top: 0; }

/* The small uppercase label that opens a section. It needs air above it —
   without it the label crowds whatever sits above and the section loses its
   sense of being a fresh start. */
.eyebrow { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--moss); font-weight: 700; margin: 1.75rem 0 .75rem; }
.prose > .eyebrow:first-child { margin-top: 1.75rem; }
/* Contexts where the eyebrow is already the first thing in a padded block. */
.hero__body .eyebrow, .page-head__body .eyebrow, .foot-cta .eyebrow { margin-top: 0; }
/* The photo hero is white-on-image, but .eyebrow defaults to the dark --moss it
   uses on light panels, so the location line was invisible against the
   photograph. .page-head__body already had this override; the hero never did,
   and the bug only appeared once a hero image existed.
   Declared BEFORE .hero--plain below, so the no-photograph state still wins. */
.hero__body .eyebrow { color: rgba(255, 255, 255, .88); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }

section { padding-block: clamp(2.75rem, 6vw, 5rem); }
section + section { padding-top: 0; }
.band { background: var(--paper-2); }
/* `section + section { padding-top: 0 }` above assumes consecutive sections are
   a continuation of one another. This restores the top padding for a band that
   is a genuinely separate subject - on /video-tours the area film needs air
   between it and the property clips, not to sit flush against them. */
section + section.band--separated { padding-top: clamp(2.75rem, 6vw, 5rem); }
.band--dark { background: var(--btn); color: #fff; }
.band--dark h2, .band--dark h3 { color: #fff; }
.band--dark a:not(.btn) { color: #E5E5E5; }

/* ---------- Header / nav ---------- */
.site-head__cta { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.head-phone { font-weight: 650; font-size: .95rem; color: var(--forest); text-decoration: none; white-space: nowrap; }
.head-phone:hover { text-decoration: underline; }

.nav__list { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__item > a { color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 550; padding: 1.1rem 0; display: inline-block; }
.nav__item > a:hover, .nav__item > a[aria-current] { color: var(--forest); box-shadow: inset 0 -2px 0 var(--gold); }

.nav__menu { position: absolute; top: 100%; left: -1rem; min-width: 260px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); list-style: none; margin: 0; padding: .5rem; border-radius: var(--radius); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s; z-index: 70; }
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__menu a { display: block; padding: .55rem .75rem; font-size: .92rem; color: var(--ink); text-decoration: none; border-radius: 2px; }
.nav__menu a:hover { background: var(--paper-2); color: var(--forest); }

/* Menu button.
   It carries a visible "Menu" word as well as the bars: an unlabelled icon
   button reads as an empty box to plenty of people, and a text label removes
   the ambiguity for everyone. The bars take `currentColor`, so they can never
   end up invisible against the button no matter how the palette changes. */
.nav-toggle { display: none; margin-left: auto; align-items: center; gap: .5rem; background: #fff; border: 1.5px solid var(--forest); color: var(--forest); border-radius: var(--radius); padding: .5rem .75rem; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 650; line-height: 1; }
.nav-toggle:hover { background: var(--forest); color: #fff; }
.nav-toggle__bars { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 18px; flex: 0 0 18px; }
.nav-toggle__bars span { display: block; width: 100%; height: 2.5px; background: currentColor; border-radius: 2px; }
.nav-toggle[aria-expanded="true"] { background: var(--forest); color: #fff; }

/* CTA inside the opened mobile menu. On a phone the header only has room for
   the brand and the menu button, so the "Schedule Showing" and call-now
   actions move in here rather than being squeezed out of the viewport. */
.nav__cta { display: none; }

/* ---------- Breadcrumbs ---------- */
.crumbs { border-bottom: 1px solid var(--line); background: var(--paper); font-size: .82rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: .6rem 0; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--line); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--forest); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- Hero ----------
   Two states. With a photograph, white text sits on a dark scrim over the
   image. Without one — which is the case until the photography lands — the
   section is the warm panel colour and the text flips to dark, because white
   copy on #FCFAF5 is unreadable. The view adds .hero--plain when there is no
   hero image, mirroring how .page-head--plain already works. */
.hero--plain { min-height: 0; }
.hero--plain .hero__body { color: var(--ink); padding: 4rem 0 3.25rem; }
.hero--plain .hero__body h1 { color: var(--ink); text-shadow: none; }
.hero--plain .eyebrow { color: var(--ink-soft); }
.hero--plain .hero__pitch { color: var(--ink-soft); }
.hero--plain .hero__price { color: var(--ink); }
.hero--plain .hero__meta { border-top-color: var(--line); }
.hero--plain .hero__meta dt { color: var(--ink-soft); opacity: 1; }
.hero--plain .hero__meta dd { color: var(--ink); }
.hero--plain .btn.btn--ghost { border-color: var(--btn); color: var(--btn); }
.hero--plain .btn.btn--ghost:hover { background: var(--btn); color: #fff; }

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.28); }
.hero__meta div { min-width: 110px; }
.hero__meta dt { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; opacity: .8; margin-bottom: .2rem; }
.hero__meta dd { margin: 0; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.hero__price { font-family: var(--serif); font-size: clamp(1.4rem,3vw,2rem); margin: .5rem 0 0; }

/* ---------- Page header ---------- */
.page-head { position: relative; min-height: clamp(280px, 42vw, 460px); display: grid; align-items: end; background: var(--paper-2); overflow: hidden; }
.page-head__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-head__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,26,20,.36) 0%, rgba(20,26,20,.10) 40%, rgba(20,26,20,.80) 100%); }
.page-head__body { position: relative; padding: 2.5rem 0 2.75rem; color: #fff; }
.page-head__body h1 { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.32); max-width: 22ch; }
.page-head__body .eyebrow { color: rgba(255,255,255,.82); }
.page-head__sub { max-width: 66ch; font-size: clamp(1rem,1.6vw,1.15rem); color: rgba(255,255,255,.93); margin: 0; }
.page-head--plain { min-height: 0; background: var(--paper-2); }
.page-head--plain .page-head__body { color: var(--ink); padding: 3rem 0 2rem; }
.page-head--plain h1 { color: var(--ink); text-shadow: none; }
.page-head--plain .page-head__sub { color: var(--ink-soft); }
/* Without this the eyebrow inherits the white treatment meant for the photo
   variant and renders white-on-tan, i.e. invisible. */
.page-head--plain .eyebrow { color: var(--moss); }

/* ---------- Buttons ---------- */
/* Buttons wrap normally. An earlier white-space:nowrap here stopped them
   shrinking inside their flex rows and forced the whole page to scroll
   sideways on a phone. The labels are short enough that a wrap is tidy
   ("Schedule / Showing"), and text-wrap:balance keeps the two lines even. */
/* ---------- Buttons ----------
   SPECIFICITY NOTE: these are written as `.btn.btn--primary` (two classes)
   rather than `.btn--primary` (one class) on purpose. Containers set colour on
   their descendant links — `.site-foot a` is one class plus one element, which
   OUT-RANKS a single class. With single-class buttons, the primary button in
   the footer inherited the dark footer link colour and rendered #303030 text on
   a #404040 background: a contrast ratio of 1.27:1, i.e. invisible. Two classes
   beat any `<container> a` rule, and the `:not(.btn)` guards below stop those
   rules reaching buttons in the first place. */
.btn { max-width: 100%; text-wrap: balance; }

.btn.btn--primary { background: var(--btn); color: #fff; border-color: var(--btn); }
.btn.btn--primary:hover,
.btn.btn--primary:focus-visible { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }

.btn.btn--outline { border-color: var(--btn); color: var(--btn); background: transparent; }
.btn.btn--outline:hover,
.btn.btn--outline:focus-visible { background: var(--btn); color: #fff; }

.btn.btn--ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.btn.btn--ghost:hover,
.btn.btn--ghost:focus-visible { background: rgba(255,255,255,.16); color: #fff; }

.btn--sm { padding: .6rem 1.1rem; font-size: .875rem; }
.btn--lg { padding: 1rem 2rem; font-size: 1.02rem; }
.link-arrow { font-weight: 600; font-size: .92rem; color: var(--forest-2); text-decoration: none; white-space: nowrap; }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { text-decoration: underline; }

/* ---------- Grids ---------- */
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }

/* Grid and flex children default to min-width:auto, meaning they refuse to
   shrink below their content. One wide table or long word inside a column is
   then enough to push the whole page wider than the screen. min-width:0 lets
   them shrink and keeps the overflow inside the element that owns it. */
.grid > *, .related__list > *, .foot-grid > *, .contact-layout > *,
.form__row > *, .airports > *, .plans > *, .stats > * { min-width: 0; }
code { overflow-wrap: anywhere; }
.grid--photos { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 2rem; }

/* Columns start at the top rather than stretching, so a short column does not
   get its content vertically centred against a tall one. */
.grid--2, .grid { align-items: start; }

/* Cards are the exception. Above, "start" stops a short prose column being
   vertically centred against a tall one - right for text, wrong for cards,
   because it let every card shrink to its own content and left the row with
   ragged bottoms and arrow links at a different height in each one.
   Stretching them to a common height, combined with the auto top margin on
   .card__body .link-arrow below, lines every link up along one baseline.
   Declared after .grid so it wins - both selectors have equal specificity and
   the markup carries "grid grid--cards". */
.grid--cards { align-items: stretch; }

/* SECTION HEADING, FULL WIDTH ABOVE THE COLUMNS.
   The eyebrow and H2 used to live inside the left column of a two-column grid.
   That pushed the left column's body text down by the height of the heading
   while the right column's list started at the very top — so the bullets sat
   level with the heading instead of the paragraph, and the heading appeared to
   float. Hoisting the heading out of the grid makes both columns start level. */
.section-head { margin-bottom: 1.75rem; padding-top: 1.25rem; max-width: 60ch; }
.section-head .eyebrow { margin-top: 0; margin-bottom: .5rem; }
.section-head h2 { margin-bottom: .35rem; }
.section-head p { margin-bottom: 0; color: var(--ink-soft); }

/* First heading inside a grid column never carries its default top margin,
   which would otherwise offset that column against its neighbour. */
.grid > * > h2:first-child,
.grid > * > h3:first-child,
.grid > .prose > h2:first-child,
.grid > .prose > h3:first-child { margin-top: 0; }

.tile { display: block; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-3); text-decoration: none; color: inherit; aspect-ratio: 4 / 3; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tile:hover img { transform: scale(1.04); }
.tile__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem .9rem .7rem; color: #fff; font-size: .85rem; line-height: 1.35; background: linear-gradient(180deg, transparent, rgba(18,22,18,.78)); }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card__body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.card__body h3 { margin: 0; }
.card__body p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ---------- Residence columns ----------
   Photo, name, summary and specification table must line up across the
   columns. Summaries are different lengths, so without this the tables start
   at different heights and the row looks broken.

   Each residence spans four of the parent grid's row tracks and adopts them
   with grid-template-rows: subgrid, so every region shares a baseline with its
   neighbours. Nothing is removed or truncated to achieve it — the rows simply
   size to the tallest item, which is what "aligned" should mean. */
/* align-self:stretch overrides the align-items:start set on .grid, which would
   otherwise stop the subgrid filling the row tracks it spans. */
.residence { display: grid; grid-template-rows: auto auto 1fr auto; row-gap: 0; align-self: stretch; }
.residence__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); }
.residence h3 { margin: 1.1rem 0 .4rem; }
.residence__summary p { margin: 0 0 1.25rem; color: var(--ink-soft); }
.residence__facts .facts { margin-bottom: 0; }

@supports (grid-template-rows: subgrid) {
    .residence { grid-row: span 4; grid-template-rows: subgrid; }
}

/* Fallback for engines without subgrid: a fixed photo ratio removes most of
   the variance, and a minimum summary height absorbs the rest. */
@supports not (grid-template-rows: subgrid) {
    @media (min-width: 781px) {
        .residence__summary { min-height: 8.5em; }
    }
}
.card__body .link-arrow { margin-top: auto; padding-top: .6rem; }

/* ---------- Feature list ---------- */
.features { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.features li { position: relative; padding-left: 1.5rem; line-height: 1.5; }
.features li::before { content: ""; position: absolute; left: 0; top: .58em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.features li.todo { background: #FFF6E5; outline: 1px dashed #E0A93A; }

/* ---------- Facts table ---------- */
.facts { overflow-x: auto; margin: 0 0 2rem; }
.facts table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.facts caption { text-align: left; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; padding-bottom: .6rem; }
.facts th, .facts td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.facts th { width: 34%; font-weight: 600; color: var(--ink-soft); background: var(--paper-2); }
.facts tr.todo td { background: #FFF6E5; }
.facts__note { display: block; font-size: .85rem; color: var(--ink-soft); margin-top: .2rem; }

/* ---------- Callout ----------
   For the one fact on a page that must not be skimmed past. */
.callout { background: var(--paper-2); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 1.1rem 1.35rem; margin: 1.75rem 0; }
.callout p:last-child { margin-bottom: 0; }

/* ---------- Figures ---------- */
.fig { margin: 0 0 1.5rem; }
.fig img { width: 100%; border-radius: var(--radius); aspect-ratio: var(--ar, auto); object-fit: cover; }
.fig figcaption { font-size: .86rem; color: var(--ink-soft); padding-top: .5rem; }

/* ---------- Photo strip ---------- */
.strip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.strip__head h2 { margin: 0; }
.empty-note { background: var(--paper-2); border: 1px dashed var(--line); border-radius: var(--radius); padding: 1.5rem; color: var(--ink-soft); }

/* ---------- Gallery ---------- */
.gallery-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; padding: 0; list-style: none; }
.gallery-nav a { display: inline-block; padding: .45rem 1rem; border: 1px solid var(--line); border-radius: 100px; font-size: .88rem; text-decoration: none; color: var(--ink); background: #fff; }
.gallery-nav a:hover, .gallery-nav a[aria-current] { background: var(--forest); color: #fff; border-color: var(--forest); }

.masonry { columns: 3 300px; column-gap: 1rem; }
.masonry > figure { break-inside: avoid; margin: 0 0 1rem; }
.masonry img { width: 100%; border-radius: var(--radius); cursor: zoom-in; }
.masonry figcaption { font-size: .84rem; color: var(--ink-soft); padding: .4rem 0 0; }

/* ---------- Lightbox (progressive enhancement; gallery works without it) ---------- */
.lightbox { position: fixed; inset: 0; background: rgba(14,17,14,.94); display: grid; place-items: center; z-index: 200; padding: 2rem; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 86vh; width: auto; height: auto; border-radius: 2px; }
.lightbox__cap { color: #E5E5E5; text-align: center; font-size: .9rem; margin-top: .75rem; }
.lightbox__btn { position: absolute; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font-size: 1.3rem; line-height: 1; }
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1.25rem; top: 50%; transform: translateY(-50%); }

/* ---------- Video ---------- */
.video { margin: 0 0 2.5rem; }
.video video, .video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); background: #000; }
.video__facade { position: relative; display: block; border: 0; padding: 0; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: var(--radius); overflow: hidden; cursor: pointer; }
.video__facade img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.video__play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; }
.video__play::after { content: ""; border-left: 22px solid var(--forest); border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 6px; }
.video h3 { margin: .9rem 0 .2rem; }
.video p { color: var(--ink-soft); font-size: .95rem; }
.video__credit { font-size: .82rem; color: var(--ink-soft); font-style: italic; }
.video__sound { font-size: .82rem; color: var(--moss); font-weight: 600; margin-bottom: .35rem; }
.video__sound::before { content: "\1F50A\00A0"; }

/* ---------- Floor plans ---------- */
.plans { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); list-style: none; padding: 0; }
/* The plans are drawn at wildly different aspect ratios - one is 414x840,
   another 1807x617 - so with the labels sitting straight under each image the
   headings landed at a different height in every card. Column flex plus an auto
   top margin on the heading pins every label to the bottom edge instead, so
   they line up across the row whatever shape the drawing is. */
.plan { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 1.25rem; display: flex; flex-direction: column; }
/* The drawings range from 2.93:1 (barn upper level) to 0.49:1 (main house
   upper level). Left to size themselves, one card rendered as a 100px sliver
   and another ran 592px tall on a phone - fluid, but unusable.
   A fixed box with object-fit:contain gives every card the same footprint and
   letterboxes each drawing inside it, whatever its shape. The thumbnail's job
   is to identify the plan; the viewer and the full-size link are for reading. */
.plan img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; padding: .25rem; }
.plan a:has(img) { display: block; line-height: 0; }
/* On a phone the thumbnails are too small to read anyway, and eight tall cards
   make a very long scroll of mostly white space. Shrink the preview to a glance
   and let the caption and link do the work. */
@media (max-width: 560px) {
    .plans { gap: 1rem; }
    .plan { padding: 1rem; }
    .plan img { aspect-ratio: 16 / 9; }
}
/* Signal that the drawing opens. Without a cursor change nobody discovers a
   click target that looks like a plain image. */
.masonry img, .js-lightbox img, img.js-lightbox { cursor: zoom-in; }
img.js-lightbox:focus-visible, .masonry img:focus-visible { outline: 3px solid var(--btn); outline-offset: 3px; }
/* Floor plans are line drawings, so let the viewer show them larger than a
   photograph would sensibly go - reading a room dimension is the whole point. */
.lightbox img { max-width: 96vw; max-height: 92vh; }
.plan h3 { margin: 1rem 0 .3rem; }
.plan > h3 { margin-top: auto; padding-top: 1rem; }
.plan > h3 ~ p { margin-bottom: 0; }

/* ---------- Map ---------- */
.map-block__frame { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.map-block__frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 340px; border: 0; }
.map-block__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-top: 1.25rem; }
.map-block__address { font-style: normal; line-height: 1.6; }
/* Sits directly under the address block and the Google Maps button, so it needs
   clear separation - at .5rem it read as part of the block above rather than as
   its own note. */
.map-block__directions { max-width: 72ch; color: var(--ink-soft); font-size: .95rem; border-left: 3px solid var(--moss); padding-left: 1rem; margin-top: 2rem; }

/* ---------- Airports ---------- */
.airports { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.airport { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 1.15rem 1.25rem; }
.airport h3 { margin: 0 0 .15rem; font-size: 1.05rem; }
.airport__code { font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; color: var(--moss); font-weight: 700; }
.airport__time { font-weight: 600; font-size: .92rem; margin: .35rem 0; }
.airport p { font-size: .9rem; color: var(--ink-soft); margin: 0; }

/* ---------- Stat row ---------- */
.stats { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stats li { background: var(--paper); padding: 1.1rem 1.25rem; }
.stats dt { font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--moss); font-weight: 700; margin-bottom: .25rem; }
.stats dd { margin: 0; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }

/* ---------- Related pages ---------- */
.related { background: var(--paper-2); border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 4rem); }
.related__h { margin-bottom: 1.5rem; }
.related__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.related__list a { display: block; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; text-decoration: none; color: inherit; transition: border-color .16s, transform .16s; }
.related__list a:hover { border-color: var(--moss); transform: translateY(-2px); }
.related__label { display: block; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--forest); margin-bottom: .3rem; }
.related__desc { display: block; font-size: .88rem; color: var(--ink-soft); line-height: 1.45; }

/* ---------- FAQ ---------- */
.faq__item { border-bottom: 1px solid var(--line); padding: .25rem 0; }
.faq__item summary { cursor: pointer; padding: 1rem 2.5rem 1rem 0; font-weight: 600; font-size: 1.05rem; list-style: none; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--moss); }
.faq__item[open] summary::after { content: "\2013"; }
.faq__answer { padding: 0 2.5rem 1.25rem 0; color: var(--ink-soft); }
.faq__answer p { margin: 0; }

/* ---------- CTA band ----------
   Light rather than a dark slab. It sits directly above the footer on most
   pages, and two stacked dark blocks read as heavy. A thin red rule across the
   top does the work the background colour used to. */
/* White, so it separates from the warm footer panel directly beneath it. */
.cta-band { background: var(--paper); color: var(--ink); padding-block: clamp(2rem, 4vw, 3rem); }
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cta-band__line { font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin: 0; max-width: 46ch; }
.cta-band__actions { display: flex; gap: .75rem; margin: 0; flex-wrap: wrap; }

/* ---------- Forms ---------- */
.form { max-width: 720px; }
.form__row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.field { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.field input, .field select, .field textarea { font: inherit; font-size: 1rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--moss); }
.field textarea { resize: vertical; min-height: 130px; }
.req { color: #E10C12; }
.field--checks { gap: .6rem; }
.check { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; font-size: .95rem; color: var(--ink); }
.check input { width: auto; margin-top: .25rem; }
.form__note { font-size: .85rem; color: var(--ink-soft); margin-top: 1rem; }
.form__errors { background: #FDF2F2; border: 1px solid #F0C4C4; border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.form__errors ul { margin: .5rem 0 0; }
/* Honeypot: removed from the visual and accessibility trees, still in the DOM for bots. */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.contact-layout { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); align-items: start; }
.agent-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; position: sticky; top: 90px; }
.agent-card img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; }
.agent-card h2 { font-size: 1.25rem; margin-bottom: .25rem; }
.agent-card address { font-style: normal; font-size: .95rem; line-height: 1.7; }

/* ---------- Footer ----------
   Light, like the rest of the site. A near-black footer was the last large dark
   block on the page and it fought the white body above it. */
.site-foot { background: var(--paper-2); color: var(--ink-soft); margin-top: 0; border-top: 1px solid var(--line); }
/* :not(.btn) — otherwise this rule out-specifies the button styles and paints
   dark link colour onto the dark CTA button sitting inside the footer. */
.site-foot a:not(.btn) { color: var(--ink); text-decoration: none; }
.site-foot a:not(.btn):hover { color: var(--brand-red); text-decoration: underline; }
.foot-cta { text-align: center; padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.foot-cta h2 { color: var(--ink); margin-bottom: .5rem; }
.foot-cta .eyebrow { color: var(--ink-soft); }
.foot-cta__text { max-width: 54ch; margin-inline: auto; color: var(--ink-soft); }
.foot-cta__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin: 1.5rem 0 0; }

/* FOOTER LINK GRID - explicit tracks, deliberately NOT auto-fit.
   auto-fit derived the column count from the viewport, so at common widths only
   four tracks fitted: the brand block (span 2), The Property and Pagosa Springs
   filled row one, and Contact was pushed onto a row of its own. The Property
   carries ten links, so row one was tall and the orphaned Contact cell sat under
   a large band of dead space.
   Four fixed tracks instead, with Photos & Video (three links) and Contact
   sharing the last one. The short list and the address block together roughly
   match the height of The Property, so the row squares off. */
.foot-grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: 1.7fr 1fr 1fr 1.15fr; padding: 3rem 0; align-items: start; }
.foot-col--brand { min-width: 0; }
/* Photos & Video above, Contact below, in the final column. */
.foot-col--stack { display: grid; gap: 2.25rem; align-content: start; min-width: 0; }
.foot-brand { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); margin: 0 0 .4rem; }
.foot-tagline { color: var(--ink-soft); font-size: .95rem; max-width: 40ch; }
.foot-loc { font-size: .9rem; color: var(--ink-soft); }
.foot-social { list-style: none; padding: 0; display: flex; gap: 1rem; font-size: .85rem; }
.foot-col h3 { color: var(--ink); font-family: var(--sans); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .9rem; }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: .92rem; }
/* No social links are configured, so this block sits directly beneath the
   location and price line. Adjacent vertical margins collapse to the larger of
   the two, so the paragraph's own bottom margin was setting the gap and the
   agent read as part of the same paragraph. Padding does not collapse, which is
   why the separation is set here rather than with a larger margin. */
.foot-agent { font-style: normal; font-size: .9rem; line-height: 1.7; margin-top: 1.25rem; padding-top: 1rem; color: var(--ink-soft); }
.foot-agent__label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
/* Transparent PNG, so the warm panel shows through behind the mark rather than
   a white rectangle sitting on top of it. No plate, no background, no filter —
   brand guidelines prohibit altering the logo, and none is needed here. */
.foot-brokerage-logo { margin-top: 1.25rem; width: 240px; height: auto; background: none; padding: 0; }
.foot-legal { border-top: 1px solid var(--line); padding: 1.75rem 0 2.5rem; font-size: .82rem; color: var(--ink-soft); }
.foot-legal ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; margin: .75rem 0; }
.foot-disclaimer { max-width: 90ch; line-height: 1.6; color: var(--ink-soft); }

/* ---------- Development-only placeholder highlighting ---------- */
.todo { background: #FFF6E5; }
.dev-banner { background: #1F1F1F; color: #FFC9A0; padding: .6rem 1rem; font-size: .82rem; text-align: center; }
.dev-banner a { color: #FFC9A0; }

/* ---------- Error page ---------- */
.error-page { text-align: center; padding-block: clamp(3rem, 8vw, 6rem); }
.error-page__code { font-family: var(--serif); font-size: clamp(4rem, 14vw, 8rem); color: var(--paper-3); line-height: 1; margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; }
    .agent-card { position: static; }
    .masonry { columns: 2 240px; }

    /* Two columns. The brand and the stacked column each span the full width,
       so no cell is ever left stranded beside empty space. Inside the stack,
       Photos & Video and Contact sit side by side rather than one above the
       other - at this width that fills the row instead of lengthening it. */
    .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .foot-col--brand { grid-column: span 2; }
    .foot-col--stack { grid-column: span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}

@media (max-width: 780px) {
    .nav-toggle { display: inline-flex; }
    /* The header CTA is hidden here, not shrunk: brand + menu + button does not
       fit a 320px screen, and squeezing it was what pushed the page sideways.
       Both actions reappear inside the menu panel below. */
    .site-head__cta { display: none; }
    .nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); display: none; max-height: calc(100vh - 66px); overflow-y: auto; }
    .nav.is-open { display: block; }
    .nav__cta { display: grid; gap: .5rem; padding: 0 1.25rem 1.25rem; }
    .nav__cta .btn { justify-content: center; }
    .nav__list { flex-direction: column; gap: 0; padding: .5rem 1.25rem 1.25rem; }
    .nav__item > a { padding: .7rem 0; width: 100%; box-shadow: none !important; border-bottom: 1px solid var(--line); }
    .nav__menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: .25rem 0 .5rem .75rem; min-width: 0; background: transparent; }
    .nav__menu a { padding: .4rem 0; font-size: .9rem; color: var(--ink-soft); }
    .hero { min-height: 72vh; }
    .cta-band .wrap { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
    .masonry { columns: 1; }
    /* Single column on phones - every footer section stacks in source order. */
    .foot-grid { grid-template-columns: minmax(0, 1fr); }
    .foot-col--brand { grid-column: span 1; }
    .foot-col--stack { grid-column: span 1; grid-template-columns: minmax(0, 1fr); }
    .facts th { width: 42%; }
    /* The brand is nowrap by default so it reads as one unit; on the narrowest
       phones let it wrap rather than force the header bar wider than the screen. */
    .brand { white-space: normal; font-size: 1rem; }
    .site-head__bar { gap: .75rem; }
    /* Slightly tighter gutters so content columns keep usable width at 320px. */
    .wrap { width: min(100% - 1.75rem, var(--wrap)); }
    .wrap--narrow { width: min(100% - 1.75rem, 760px); }
}

/* ---------- Print (buyers really do print listing pages) ---------- */
@media print {
    .site-head, .site-foot, .cta-band, .related, .nav, .crumbs, .lightbox { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .page-head { min-height: 0; }
    .page-head__img, .page-head__scrim { display: none; }
    .page-head__body { color: #000; padding: 0 0 1rem; }
    .page-head__body h1 { color: #000; text-shadow: none; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}