/* Olivos Property Management - v0.3 "Arroyo Street, Nordic clarity"
   White editorial page, big type, one Teal block (the Resident desk), one
   Siena action per screen, 1px hairlines instead of cards. No shadows, no
   gradients, no dashed borders, no decoration.

   Brand variables copied by name from Olivos-Platform/web/assets/brand/brand.css.
   Layout: phone first; desktop inside @media (min-width: 821px), guarded by
   html:not(.phone) because app.js mirrors the Olivos Inventory app's 820px
   phone/desktop check (touch + short side <= 820, or innerWidth <= 820). With
   JavaScript off the media query alone decides. */

@font-face { font-family: "Schibsted Grotesk"; src: url("assets/fonts/SchibstedGrotesk-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("assets/fonts/AtkinsonHyperlegibleNext-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --teal: #255760; --olive: #828963; --cedar: #816043;
  --siena: #CE662E; --melon: #D98B5C; --charcoal: #353535;
  --siena-dark: #A5501F; --siena-hover: #8E4319;
  --white: #FFFFFF; --stone: #F5F3EF; --olive-tint: #ECEDE6; --hair: #D9D5CE; --text-2: #5A5A5A;
  --bg: var(--white); --fg: var(--charcoal); --primary: var(--teal); --action: var(--siena-dark); --line: var(--hair);
  --display: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
  --wrap: 1200px; --pad: 20px;
  --sec: 56px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--body); font-size: 19px; font-weight: 400; line-height: 1.55;
  overflow-x: hidden;
  padding-bottom: calc(84px + env(safe-area-inset-bottom));   /* room for the sticky bar */
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--charcoal); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--siena); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); margin: 0 0 16px; color: var(--fg); }
h1 { font-size: 42px; font-weight: 700; letter-spacing: -.025em; line-height: 1.04; max-width: 14ch; }
h2 { font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.08; max-width: 20ch; }
h3 { font-size: 21px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 8px; }
p { margin: 0 0 16px; }
address { font-style: normal; }
.num, .tel { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.text-2 { color: var(--text-2); }
.placeholder { color: var(--text-2); font-style: italic; }
.ico { width: 24px; height: 24px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lbl { font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.sec-label { display: flex; gap: 12px; align-items: baseline; margin: 0 0 24px; color: var(--text-2); }
.sec-label .n { color: var(--siena-dark); font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .09em; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--teal); margin-bottom: 24px; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--siena); }
.sec { padding: var(--sec) 0; }
.band { background: var(--stone); }
#about, #contact { border-top: 1px solid var(--hair); }   /* hairlines between 02/03/04, as in the mockup */
.lede { font-size: 21px; line-height: 1.45; max-width: 36ch; margin-bottom: 32px; }

/* Buttons: the only rounded things (6px) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 10px 20px; border-radius: 6px; border: 1.5px solid var(--siena-dark);
  background: var(--siena-dark); color: #fff; font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--siena-hover); border-color: var(--siena-hover); color: #fff; }
.btn-outline { background: var(--white); color: var(--teal); border-color: var(--teal); }
.btn-outline:hover { background: var(--stone); color: var(--teal); }
.btn-big { min-height: 64px; width: 100%; font-size: 20px; padding: 14px 20px; }
.btn .ico { width: 22px; height: 22px; }

/* Bilingual labels: active language large on top, other small beneath */
.bi { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.bi .en { font-family: var(--display); font-weight: 650; font-size: 21px; }
.bi .es { font-family: var(--body); font-weight: 400; font-size: 16px; margin-top: 3px; opacity: .92; }
html[lang="es"] .bi { flex-direction: column-reverse; }
html[lang="es"] .bi .es { font-family: var(--display); font-weight: 650; font-size: 21px; margin-top: 0; opacity: 1; }
html[lang="es"] .bi .en { font-family: var(--body); font-weight: 400; font-size: 16px; margin-top: 3px; opacity: .92; }
.bi .num { order: 3; font-family: var(--display); font-weight: 600; font-size: 17px; white-space: nowrap; margin-top: 4px; opacity: .95; }
html[lang="es"] .bi .num { order: -1; }

/* Header: white, hairline below, no Teal bar */
.site-header { background: var(--white); border-bottom: 1px solid var(--hair); position: sticky; top: 0; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; gap: 10px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--fg); text-decoration: none; }
.brand img { width: 42px; height: 42px; display: block; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: -.01em; }
.brand-name small { display: block; font-family: var(--body); font-weight: 400; font-size: 12px; color: var(--text-2); letter-spacing: 0; margin-top: 3px; }
.site-nav, .header-tel { display: none; }
.lang { display: inline-flex; border: 1.5px solid var(--charcoal); border-radius: 999px; padding: 2px; }
.lang button { min-width: 44px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--charcoal); font-family: var(--display); font-weight: 600; font-size: 15px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--charcoal); color: #fff; }
.lang button:hover { text-decoration: underline; }
.header-pay { min-height: 44px; padding: 8px 14px; font-size: 16px; white-space: nowrap; }
.header-pay .ico { display: none; }
@media (max-width: 399px) { .brand-name small { display: none; } }

/* Hero */
.hero { padding: 40px 0 0; }
.hero-copy { padding-bottom: 32px; }

/* Resident desk: the one Teal block */
.desk { background: var(--teal); color: #fff; padding: 24px var(--pad) 28px; }
.desk .lbl { display: block; margin-bottom: 16px; color: #fff; opacity: .9; }
.desk-rows { list-style: none; margin: 0; padding: 0; }
.desk-row { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 12px 0; color: #fff; text-decoration: none; border-top: 1px solid rgba(255, 255, 255, .28); }
.desk-row:first-child { border-top: 0; }
.desk-row:hover .bi .en, .desk-row:hover .bi .es { text-decoration: underline; }
.desk-row .bi { flex: 1; }
.desk-row .ico { width: 26px; height: 26px; }
.desk-row .arrow { width: 22px; height: 22px; opacity: .85; }
.desk-row.primary { background: var(--siena-dark); border: 0; border-radius: 6px; padding: 12px 16px; margin-bottom: 8px; }
.desk-row.primary:hover { background: var(--siena-hover); }
.desk-row.primary + .desk-row { border-top: 0; }
.trust { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0 0; font-size: 16px; line-height: 1.45; color: #fff; }
.trust .ico { width: 22px; height: 22px; margin-top: 2px; }

/* Link row (phone only, instead of a hamburger) */
.link-row { list-style: none; margin: 0; padding: 0; }
.link-row a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--hair); font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--fg); text-decoration: none; }
.link-row a:hover { color: var(--teal); }
.link-row .ico { color: var(--siena-dark); }

/* Photo slots: solid olive tint behind the image while it loads, square corners */
.slot { position: relative; background: var(--olive-tint); aspect-ratio: 4 / 3; color: var(--cedar); }
.slot-wide { margin-top: 32px; }
.slot.photo { margin: 0; color: inherit; }                      /* real photo in a slot: square corners */
.slot.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foot-areas, .foot-hours { margin: 8px 0 0; font-size: 15px; opacity: .85; }

/* Hairline item lists */
.items { list-style: none; margin: 0; padding: 0; }
.items li { padding: 20px 0; border-top: 1px solid var(--hair); }
.items li:last-child { border-bottom: 1px solid var(--hair); }
.items h3 { display: flex; align-items: center; gap: 12px; }
.items h3 .ico { color: var(--teal); }
.items p { margin: 0; color: var(--fg); }
.more { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-family: var(--display); font-weight: 600; font-size: 19px; text-decoration: none; }
.more:hover { text-decoration: underline; }
.more .ico { width: 20px; height: 20px; }

/* Fact list */
/* 03 About (v0.5.1): heading + readable paragraph on the left; on the right two figures, then three short facts.
   Both columns start at the same line, so neither looks heavier or more "formal" than the other. */
.about-text { font-size: 20px; line-height: 1.6; max-width: 34em; margin: 0; }
.stats { margin: 32px 0 0; }
.stats div { padding: 14px 0 18px; border-top: 1px solid var(--hair); }
.stats dt { font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-2); }
.stats dd { margin: 4px 0 0; font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.facts { margin: 0; }
.facts div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--hair); }
.facts div:last-child { border-bottom: 1px solid var(--hair); }
.facts dt { font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-2); }
.facts dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 19px; }

/* Visit or call */
.addr { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 16px; }
.tel-big { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; font-size: 32px; letter-spacing: -.02em; color: var(--teal); text-decoration: none; margin-bottom: 12px; min-height: 48px; }
.tel-big:hover { text-decoration: underline; }
.tel-big .ico { width: 28px; height: 28px; }
.contact-lines p { margin-bottom: 8px; }
.contact .btn { margin: 16px 0 32px; }

/* Footer: Charcoal, white text, giant wordmark */
.site-footer { background: var(--charcoal); color: #fff; padding: 48px 0 32px; }
.site-footer a { color: #fff; }
.wordmark { font-family: var(--display); font-weight: 700; font-size: 40px; letter-spacing: -.03em; line-height: 1; margin: 0 0 24px; }
.foot-grid { display: grid; gap: 32px; }
.site-footer p { margin: 0 0 6px; }
.site-footer .lbl { display: block; color: #fff; opacity: .75; margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-flex; min-height: 40px; align-items: center; }
.legal { margin-top: 40px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .22); font-size: 16px; opacity: .85; }

/* Sticky bottom bar (phones only) */
.bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--hair); }
.bottom-bar .btn { min-height: 60px; padding: 8px 12px; }
.bottom-bar .bi .en, .bottom-bar .bi .es { font-size: 18px; }
.bottom-bar .bi .es, html[lang="es"] .bottom-bar .bi .en { font-size: 14px; }
.bottom-bar .btn-outline .bi { color: var(--teal); }

/* Content pages */
.page-head { padding-top: 40px; padding-bottom: 32px; }
.page-head .lbl { display: block; color: var(--teal); margin-bottom: 16px; }
.page-head .lede { margin-bottom: 0; }
.after { display: flex; gap: 16px; align-items: flex-start; padding: 24px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin: 32px 0; }
.after .ico { color: var(--siena-dark); margin-top: 3px; }
.after h3 { margin-bottom: 4px; }
.after p { margin: 0; }
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; list-style: none; cursor: pointer; font-family: var(--display); font-weight: 650; font-size: 19px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { color: var(--teal); transition: transform .15s; }
.faq details[open] summary .ico { transform: rotate(90deg); }
.faq details p { margin: 0 0 20px; padding-right: 40px; }
.desk-page { margin-bottom: 32px; }
.desk-page .desk { padding-top: 24px; }

.phone-only { }
.desktop-only { display: none; }
/* Resident feedback form + "What residents say" (v0.5). Square inputs with a #5A5A5A border (3:1+ non-text
   contrast), hairlines between items, no cards. Errors in dark Siena with aria-invalid. */
.reviews[hidden], .fb-form[hidden], .fb-thanks[hidden], .fb-err[hidden], .fb-summary[hidden], .fb-nojs[hidden],
.rv-preview[hidden], .rv-go[hidden], .rv-current[hidden] { display: none; }
/* "What residents say" (home, between 02 Rentals and 03 About): one featured quote, display type, manual Previous/Next. */
.rev-nav[hidden], .rev-stars[hidden] { display: none; }
.rev-feature { margin: 8px 0 0; padding: 24px 0 0; border-top: 1px solid var(--hair); }
.rev-feature blockquote { margin: 0 0 16px; }
.rev-quote { font-family: var(--display); font-weight: 500; font-size: 24px; line-height: 1.3; letter-spacing: -.01em; margin: 0; max-width: 32em; }
.rev-stars { color: var(--teal); font-size: 20px; letter-spacing: .12em; margin: 0 0 12px; }
.rev-by, .rv-by { color: var(--text-2); font-size: 16px; margin: 0; }
.rev-note { font-size: 16px; }
.rev-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--hair); }
.rev-nav .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; min-height: 48px; padding: 8px 16px; font-size: 17px; }
.rev-nav .btn .ico { width: 20px; height: 20px; }
.rev-count { flex-basis: 100%; order: -1; margin: 0; color: var(--text-2); font-size: 16px; font-variant-numeric: tabular-nums; }
.rv-preview blockquote { margin: 0 0 12px; }
.rv-preview blockquote p { font-family: var(--display); font-weight: 500; font-size: 21px; line-height: 1.35; margin: 0; }
.feedback { border-top: 1px solid var(--hair); }
.fb-note { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.fb-note .ico { color: var(--siena-dark); margin-top: 3px; }
.fb-form { margin-top: 32px; }
.fb-field { margin: 0 0 24px; }
.fb-field > label, .fb-rating legend { display: block; font-family: var(--display); font-weight: 650; font-size: 18px; margin: 0 0 6px; padding: 0; }
.fb-field .req { font-weight: 400; color: var(--text-2); }
.fb-field .hint { color: var(--text-2); font-size: 16px; margin: -2px 0 8px; }
.fb-form input[type=text], .fb-form select, .fb-form textarea {
  display: block; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--text-2); border-radius: 0;
  background: var(--white); color: var(--fg); font: inherit; font-size: 19px; line-height: 1.4; }
.fb-form textarea { min-height: 160px; resize: vertical; }
.fb-form input:focus-visible, .fb-form select:focus-visible, .fb-form textarea:focus-visible { outline: 3px solid var(--siena); outline-offset: 1px; }
.fb-form [aria-invalid=true] { border: 2px solid var(--siena-dark); }
.fb-rating { border: 0; padding: 0; min-width: 0; }
.fb-rating[aria-invalid=true] { border: 0; }
.fb-stars { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.fb-stars label { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-family: var(--display); font-weight: 600; cursor: pointer; }
.fb-stars input, .fb-check input { width: 24px; height: 24px; margin: 0; accent-color: var(--teal); flex: none; }
.fb-stars input:focus-visible, .fb-check input:focus-visible { outline: 3px solid var(--siena); outline-offset: 2px; }
.fb-check { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.fb-check label { font-size: 18px; cursor: pointer; }
.fb-err { color: var(--siena-dark); font-weight: 600; font-size: 16px; margin: 6px 0 0; }
.fb-summary { border-left: 4px solid var(--siena-dark); padding: 8px 0 8px 16px; margin: 0 0 24px; font-weight: 600; }
.fb-summary:focus { outline: none; }
.fb-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.fb-status { margin: 16px 0 0; min-height: 1.55em; font-weight: 600; }
.fb-privacy { font-size: 16px; }
.fb-thanks { margin-top: 32px; padding: 24px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.fb-thanks:focus { outline: none; }
.fb-nojs { margin-top: 24px; }
.btn:disabled { opacity: .6; cursor: progress; }
.review-action .rv-status { font-family: var(--display); font-weight: 650; font-size: 21px; }
.rv-preview { margin: 24px 0; padding: 24px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.rv-go { margin: 8px 0 24px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
/* Listings (/api/listings, v0.4): hairlines, square corners, no shadows. */
.listings { border-top: 1px solid var(--hair); margin-top: 32px; }
.listings h2 { padding-top: 24px; }
.listing-status { margin: 0 0 16px; }
.listing-status .btn { margin-top: 16px; }
.listing-filters { display: flex; flex-wrap: wrap; gap: 16px 24px; padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin-bottom: 8px; }
.listing-filters[hidden], .listing-count[hidden], .listings[hidden] { display: none; }   /* display rules above would beat the hidden attribute */
.listing-filters label { display: grid; gap: 4px; font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-2); }
.listing-filters select, .listing-filters input { min-height: 44px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: 0; background: var(--white); color: var(--fg); font: inherit; font-family: var(--body); font-size: 17px; letter-spacing: 0; text-transform: none; }
.listing-grid { list-style: none; margin: 0; padding: 0; }
.listing-grid li { display: grid; gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--hair); }
.listing-photo { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--olive-tint); color: var(--cedar); overflow: hidden; }
.listing-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.listing-photo .chip { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--white); color: var(--fg); font-family: var(--display); font-size: 13px; font-weight: 600; }
.listing-addr { margin: 0; font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.25; }
.listing-addr small { display: block; font-weight: 400; font-size: 17px; color: var(--text-2); }
.listing-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; color: var(--text-2); font-size: 17px; }
.listing-meta .dot::before { content: "·"; margin-right: 12px; }
.listing-rent { margin: 0; font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--teal); }
.listing-rent small { font-weight: 600; font-size: 17px; color: var(--text-2); }
.listing-desc { margin: 0; font-size: 17px; }
.listing-grid .btn { justify-self: start; }
.listing-frame { display: block; width: 100%; height: 1000px; margin-top: 24px; border: 1px solid var(--hair); background: var(--white); }
.listing-count { margin: -16px 0 24px; font-family: var(--display); font-weight: 600; color: var(--teal); }

html.no-motion * { transition: none !important; }

/* ----------------------------------------------------------------------
   Desktop (821px and up). Guarded by html:not(.phone), see top of file.
   ---------------------------------------------------------------------- */
@media (min-width: 821px) {
  html:not(.phone) { --pad: 40px; --sec: 112px; }
  html:not(.phone) body { font-size: 18px; padding-bottom: 0; }
  html:not(.phone) h1 { font-size: 74px; max-width: 11ch; }
  html:not(.phone) h2 { font-size: 48px; }
  html:not(.phone) h3 { font-size: 24px; }
  html:not(.phone) .lede { font-size: 21px; max-width: 42ch; }
  html:not(.phone) .g { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  html:not(.phone) .c7 { grid-column: span 7; } html:not(.phone) .c5 { grid-column: span 5; }
  html:not(.phone) .c6 { grid-column: span 6; } html:not(.phone) .c4 { grid-column: span 4; } html:not(.phone) .c8 { grid-column: span 8; }

  html:not(.phone) .site-header .wrap { height: 84px; gap: 16px; }
  html:not(.phone) .brand { margin-right: 24px; }
  html:not(.phone) .site-nav { display: flex; gap: 4px; margin-right: auto; }
  html:not(.phone) .site-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--fg); text-decoration: none; border-bottom: 2px solid transparent; }
  html:not(.phone) .site-nav a:hover { color: var(--teal); }
  html:not(.phone) .site-nav a[aria-current="page"] { border-bottom-color: var(--siena-dark); }
  html:not(.phone) .header-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--fg); text-decoration: none; margin-right: 8px; }
  html:not(.phone) .header-tel:hover { color: var(--teal); }
  html:not(.phone) .header-pay { padding: 8px 20px; font-size: 17px; min-height: 48px; }
  html:not(.phone) .header-pay .ico { display: block; }

  html:not(.phone) .hero { padding: 0; }
  html:not(.phone) .hero .g { min-height: 620px; align-items: stretch; }
  html:not(.phone) .hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 96px 48px 96px 0; }
  html:not(.phone) .hero-copy .lede { margin-bottom: 0; }
  html:not(.phone) .desk { position: relative; margin: 0; padding: 48px 0 48px 48px; display: flex; flex-direction: column; justify-content: center; }
  html:not(.phone) .desk::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 50vw; background: var(--teal); }
  html:not(.phone) .desk > * { position: relative; }
  html:not(.phone) .desk-row { min-height: 84px; }
  html:not(.phone) .desk-row .bi .en, html[lang="es"]:not(.phone) .desk-row .bi .es { font-size: 23px; }
  html:not(.phone) .link-row { display: none; }
  html:not(.phone) .slot { aspect-ratio: 4 / 3; }
  html:not(.phone) .slot-wide { aspect-ratio: 21 / 7; margin-top: 0; }
  html:not(.phone) .slot-wide.photo { aspect-ratio: 21 / 9; }

  html:not(.phone) .items { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px; }
  html:not(.phone) .items li { padding: 24px 0 0; border-bottom: 0 !important; }
  html:not(.phone) .about-text { font-size: 21px; }
  html:not(.phone) #about .c5 { padding-top: 37px; }   /* top of the figures lines up with the h2 (sec-label height) */
  html:not(.phone) .stats { margin-top: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  html:not(.phone) .stats dd { font-size: 32px; }
  html:not(.phone) .facts div { padding: 16px 0; }
  html:not(.phone) .addr { font-size: 46px; }
  html:not(.phone) .tel-big { font-size: 40px; }
  html:not(.phone) .tel-big .ico { width: 32px; height: 32px; }
  html:not(.phone) .band .slot { margin-top: 0; }
  html:not(.phone) .sec .g { align-items: start; }

  html:not(.phone) .site-footer { padding: 80px 0 40px; }
  html:not(.phone) .wordmark { font-size: 88px; margin-bottom: 48px; }
  html:not(.phone) .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; }
  html:not(.phone) .bottom-bar { display: none; }
  html:not(.phone) .phone-only { display: none; }
  html:not(.phone) .desktop-only { display: block; }
  html:not(.phone) .btn-big { width: auto; min-width: 280px; }
  html:not(.phone) .page-head { padding-top: 80px; padding-bottom: 48px; }
  html:not(.phone) .desk-page .desk { padding: 40px; }
  html:not(.phone) .desk-page .desk::after { display: none; }
  html:not(.phone) .narrow { max-width: 760px; }
  html:not(.phone) .listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px; }
  html:not(.phone) .rev-feature { margin-top: 0; padding-top: 0; border-top: 0; }
  html:not(.phone) #reviews .c8 { padding-top: 37px; }
  html:not(.phone) .rev-quote { font-size: 32px; }
  html:not(.phone) .rev-nav { justify-content: flex-start; }
  html:not(.phone) .rev-nav .btn { flex: 0 0 auto; }
  html:not(.phone) .rev-count { flex-basis: auto; margin: 0 0 0 8px; order: 3; }
  html:not(.phone) .fb-row { display: grid; grid-template-columns: 2fr 1fr; column-gap: 24px; }
  html:not(.phone) .fb-form .btn-big { width: auto; }
  html:not(.phone) .listing-grid li { align-content: start; border-top: 1px solid var(--hair); border-bottom: 0; }
  html:not(.phone) .listing-filters label { min-width: 160px; }
  html:not(.phone) .listing-filters { border-bottom: 0; margin-bottom: 0; }   /* the cards draw their own top hairline */
}