/* ==========================================================================
   site.css — Yadira Lopez, REALTOR® (docs/DESIGN.md). Quiet luxury, editorial.
   0 fonts · 1 tokens · 2 base · 3 layout · 4 type · 5 buttons & links · 6 header · 7 footer · 8 home ·
   9 cards & tiles · 10 page heads & pages · 11 forms · 12 notices · 13 utilities · 14 print
   Listing search and detail live in pages/listings.css.
   ========================================================================== */

/* ---------- 0. Fonts (self-hosted, SIL OFL: fonts/<family>/OFL.txt) ---------- */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 500;font-display:swap;src:url("../fonts/cormorant-garamond/cormorant-garamond-v21-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 500;font-display:swap;src:url("../fonts/cormorant-garamond/cormorant-garamond-v21-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond/cormorant-garamond-v21-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond/cormorant-garamond-v21-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:300 500;font-display:swap;src:url("../fonts/jost/jost-v20-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-weight:300 500;font-display:swap;src:url("../fonts/jost/jost-v20-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 1. Tokens ---------- */
:root{
  --ivory:#FAF7F2;
  --sand:#EDE4D8;
  --sand-2:#E4D8C8;
  --ink:#111111;
  --ink-2:#2B2723;
  --taupe:#6B625A;
  --line:#D9D0C4;
  --line-strong:#8F857A;   /* form control lines: 3.4:1 on ivory */
  --on-dark:#FAF7F2;
  --on-dark-2:#C9C1B6;
  --line-dark:rgba(250,247,242,.22);
  --red:#CC0000;           /* RCR Red: accent only */
  --red-text:#A30000;      /* error text (7:1 on ivory) */

  --serif:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --sans:"Jost","Futura","Avenir Next","Helvetica Neue",Arial,sans-serif;

  --fs-display:clamp(48px,6.4vw,100px);
  --fs-h1:clamp(36px,4.4vw,64px);
  --fs-h2:clamp(32px,3.4vw,50px);
  --fs-h3:clamp(26px,2.3vw,34px);
  --fs-body:17px;
  --fs-sm:14px;
  --fs-xs:12.5px;
  --fs-eyebrow:11.5px;

  --gutter:clamp(20px,5vw,64px);
  --max:1320px;
  --space-section:clamp(88px,10vw,160px);
  --header-h:88px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --focus:0 0 0 2px var(--ivory),0 0 0 4px var(--ink);
}
@media (max-width:1099px){ :root{ --header-h:72px; } }

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 16px); }
body{
  margin:0; min-height:100vh; background:var(--ivory); color:var(--ink);
  font:300 var(--fs-body)/1.7 var(--sans); letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (max-width:699px){ body{ font-size:16px; } }
img,svg,video,picture{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3,h4,p,figure,dl,dd,ul,ol,blockquote{ margin:0; }
ul[role="list"],ol[role="list"]{ list-style:none; padding:0; }
a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:.22em; }
b,strong{ font-weight:500; }
em{ font-style:italic; }
sup{ font-size:.6em; vertical-align:.55em; line-height:0; }
button,input,select,textarea{ font:inherit; color:inherit; letter-spacing:inherit; }
button{ cursor:pointer; }
:focus-visible{ outline:none; box-shadow:var(--focus); }
::selection{ background:var(--sand-2); color:var(--ink); }
[hidden]{ display:none !important; }
main{ display:block; }
main:focus{ outline:none; }
.icon{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; } }

/* ---------- 3. Layout ---------- */
.container{ width:100%; max-width:calc(var(--max) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter); }
.container--narrow{ max-width:calc(760px + var(--gutter) * 2); }
.section{ padding-block:var(--space-section); }
.section--sand{ background:var(--sand); }
.section--tight{ padding-block:clamp(48px,6vw,80px); }
.section--tight-top{ padding-top:0; }

/* ---------- 4. Type ---------- */
h1,h2,h3{ font-variant-numeric:lining-nums; font-family:var(--serif); font-weight:300; line-height:1.06; letter-spacing:-.012em; color:var(--ink); text-wrap:balance; }
h1 em,h2 em,h3 em{ font-weight:400; }
.eyebrow{
  display:flex; align-items:center; gap:14px; margin-bottom:22px;
  font:500 var(--fs-eyebrow)/1.4 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--taupe);
}
.eyebrow--rule::before{ content:""; width:32px; height:1px; background:var(--red); flex:none; }
.eyebrow--light{ color:var(--on-dark-2); }
.section-head{ margin-bottom:clamp(40px,5vw,72px); }
.section-head .eyebrow{ margin-bottom:18px; }
.section-head__title{ font-size:var(--fs-h2); max-width:20ch; }
.section-head--center .section-head__title{ margin-inline:auto; }
.section-head--split{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 40px; }
.section-head--center{ text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }
.signature{ margin:28px 0 36px; font:italic 400 clamp(36px,3.4vw,48px)/1 var(--serif); color:var(--ink); }
.prose{ max-width:68ch; }
.prose p,.prose ul,.prose ol{ margin-bottom:1.1em; }
.prose ul,.prose ol{ padding-left:1.2em; }
.prose li{ margin-bottom:.4em; }
.prose h2{ margin:2.2em 0 .6em; font-size:clamp(28px,2.6vw,36px); }
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin:1.6em 0 .5em; font-size:24px; font-weight:400; }
.prose a{ text-decoration:underline; }
.quiet-note{ color:var(--taupe); }

/* ---------- 5. Buttons and links ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 34px;
  border:1px solid var(--ink); border-radius:0; background:transparent; color:var(--ink);
  font:500 12px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; text-decoration:none; white-space:nowrap;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover{ background:var(--ink); color:var(--ivory); }
.btn--solid{ background:var(--ink); color:var(--ivory); }
.btn--solid:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.btn--light{ border-color:var(--on-dark); color:var(--on-dark); }
.btn--light:hover{ background:var(--on-dark); color:var(--ink); }
.btn--sm{ min-height:44px; padding:0 22px; font-size:11px; }
.btn--block{ display:flex; width:100%; }
.btn.is-loading{ opacity:.6; pointer-events:none; }
/* Phones: a long label (e.g. ES "Quiero recibir propiedades como estas") wraps instead of widening the page. */
@media (max-width:599px){ .btn{ max-width:100%; white-space:normal; text-align:center; line-height:1.45; padding-block:12px; } }
.btn__icon{ width:16px; height:16px; }
.link-arrow{
  display:inline-flex; align-items:center; gap:12px; padding-bottom:6px;
  font:500 12px/1.2 var(--sans); letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--ink);
  background:linear-gradient(currentColor,currentColor) left bottom / 100% 1px no-repeat;
  transition:background-size .5s var(--ease),gap .4s var(--ease);
}
.link-arrow::after{ content:"→"; font-family:var(--sans); letter-spacing:0; transition:transform .4s var(--ease); }
.link-arrow:hover{ background-size:30% 1px; }
.link-arrow:hover::after{ transform:translateX(4px); }
.skip-link{ position:absolute; left:16px; top:-80px; z-index:100; padding:12px 18px; background:var(--ink); color:var(--ivory); font-size:14px; }
.skip-link:focus{ top:16px; }

/* ---------- 6. Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; height:var(--header-h);
  background:var(--ivory); border-bottom:1px solid var(--line);
  transition:background-color .45s var(--ease),border-color .45s var(--ease);
}
.page-home .site-header{ position:fixed; left:0; right:0; background:transparent; border-bottom-color:transparent; }
.page-home .site-header.is-scrolled,.page-home .site-header.is-open{ background:var(--ivory); border-bottom-color:var(--line); }
.site-header__inner{ display:flex; align-items:center; gap:24px; height:100%; max-width:calc(var(--max) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter); }
.wordmark{ display:inline-flex; flex-direction:column; gap:5px; text-decoration:none; color:var(--ink); line-height:1; }
.wordmark__name{ font:400 15px/1 var(--sans); letter-spacing:.34em; margin-right:-.34em; white-space:nowrap; }
.wordmark__title{ font:400 9.5px/1 var(--sans); letter-spacing:.42em; color:var(--taupe); }
.wordmark--light{ color:var(--on-dark); }
.wordmark--light .wordmark__title{ color:var(--on-dark-2); }
.site-header__broker{ display:flex; align-items:center; padding-left:24px; border-left:1px solid var(--line); height:52px; }
.site-header__broker img{ width:auto; height:48px; }
.site-nav{ margin-left:auto; }
.site-nav__list{ display:flex; gap:clamp(22px,2.4vw,40px); list-style:none; margin:0; padding:0; }
.site-nav__link{
  position:relative; display:block; padding:8px 0;
  font:500 11.5px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--ink);
}
.site-nav__link::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor; transition:right .45s var(--ease); }
.site-nav__link:hover::after{ right:0; }
.site-nav__link[aria-current]::after{ right:0; background:var(--red); }
.site-nav__panel-foot{ display:none; }
.site-header__actions{ display:flex; align-items:center; gap:20px; padding-left:28px; border-left:1px solid var(--line); height:34px; }
.lang-switch{ display:inline-flex; align-items:center; gap:6px; font:500 11px/1 var(--sans); letter-spacing:.16em; }
.lang-switch__option{ text-decoration:none; color:var(--taupe); padding:6px 2px; }
.lang-switch__option:hover,.lang-switch__option[aria-current]{ color:var(--ink); }
/* Over the home hero photo the header is transparent: taupe is too faint there (AA 4.5:1), so use ink-2. */
.page-home .site-header:not(.is-scrolled):not(.is-open) .lang-switch__option:not([aria-current]){ color:var(--ink-2); }
.lang-switch__sep{ color:var(--line-strong); }
.site-header__burger{ display:none; position:relative; width:40px; height:40px; padding:0; border:0; background:none; }
.site-header__burger-bar{ position:absolute; left:8px; right:8px; height:1px; background:var(--ink); transition:transform .4s var(--ease),top .4s var(--ease); }
.site-header__burger-bar:first-child{ top:15px; }
.site-header__burger-bar:last-child{ top:24px; }
.site-header.is-open .site-header__burger-bar:first-child{ top:20px; transform:rotate(45deg); }
.site-header.is-open .site-header__burger-bar:last-child{ top:20px; transform:rotate(-45deg); }

@media (max-width:1099px){
  .site-header__inner{ gap:16px; }
  .site-header__broker{ padding-left:16px; height:32px; }
  .site-header__broker{ height:46px; }
  .site-header__broker img{ height:44px; } /* tablets have room: 44px keeps "REAL CONNECT REALTY" legible */
  .site-header__actions{ margin-left:auto; padding-left:0; border-left:0; gap:8px; }
  .site-header__actions > .lang-switch{ display:none; }
  .site-header__burger{ display:block; }
  .site-nav{
    position:fixed; inset:var(--header-h) 0 0 0; z-index:49; display:none; flex-direction:column; justify-content:space-between;
    margin:0; padding:clamp(32px,8vh,72px) var(--gutter) 40px; background:var(--ivory); overflow-y:auto;
  }
  .site-header.is-open .site-nav{ display:flex; }
  .site-nav__list{ flex-direction:column; gap:4px; }
  .site-nav__link{ padding:10px 0; font:300 clamp(36px,9vw,52px)/1.15 var(--serif); letter-spacing:-.01em; text-transform:none; }
  .site-nav__link::after{ display:none; }
  .site-nav__link[aria-current]{ font-style:italic; }
  .site-nav__panel-foot{ display:grid; gap:12px; padding-top:28px; border-top:1px solid var(--line); }
  .site-nav__phone{ font-size:15px; text-decoration:none; color:var(--ink-2); }
  .lang-switch--panel{ font-size:13px; margin-bottom:6px; }
}
@media (max-width:420px){
  .site-header__inner{ gap:12px; }
  .wordmark__name{ font-size:12.5px; letter-spacing:.26em; }
  .site-header__broker{ padding-left:12px; height:24px; }
  .site-header__broker img{ height:19px; }
}

/* Spanish suggestion bar and the local-only launch-blocker box */
.notice--lang{ display:flex; justify-content:center; align-items:center; gap:16px; padding:10px var(--gutter); background:var(--sand); font-size:13px; }
.notice--lang a{ text-decoration:underline; }
.notice__dismiss{ display:inline-flex; padding:6px; border:0; background:none; }
.js .notice--lang .notice__dismiss{ display:inline-flex; }
.page-home .notice--lang{ position:relative; z-index:51; margin-top:var(--header-h); }
.notice--blockers{ position:fixed; left:12px; bottom:12px; z-index:90; max-width:300px; padding:10px 14px; background:#fff; border:1px solid var(--red); font-size:12px; line-height:1.5; }
.notice--blockers summary{ cursor:pointer; font-weight:500; color:var(--red-text); }
.notice--blockers ul{ margin:8px 0 0; padding-left:18px; }

/* ---------- 7. Footer ---------- */
.site-footer{ background:var(--ink); color:var(--on-dark-2); font-size:14px; line-height:1.7; }
.site-footer a{ color:var(--on-dark); text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.site-footer__top{ display:grid; gap:48px; padding-block:clamp(72px,8vw,112px) 56px; }
.site-footer__brand{ display:grid; gap:28px; align-content:start; }
.site-footer__broker{ width:auto; height:40px; }
.site-footer__contact{ display:grid; gap:6px; font-size:15px; }
.site-footer__office{ margin-top:8px; color:var(--on-dark-2); max-width:28ch; }
.site-footer__nav ul{ display:grid; grid-template-columns:repeat(2,max-content); gap:8px 40px; }
.site-footer__nav a{ font:500 11px/2 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
@media (min-width:900px){ .site-footer__top{ grid-template-columns:1.2fr 1fr 1fr; } }
.site-footer__legal{ display:grid; gap:18px; padding-block:32px 40px; border-top:1px solid var(--line-dark); font-size:12.5px; line-height:1.7; }
.site-footer__trec{ font-size:13.5px; }
.site-footer__trec a{ text-decoration:underline; text-underline-offset:.25em; }
.site-footer__sep{ margin:0 8px; }
.site-footer__gloss{ color:var(--on-dark-2); }
.site-footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 32px; padding-top:18px; border-top:1px solid var(--line-dark); }
.site-footer__marks{ display:flex; flex-wrap:wrap; gap:10px 28px; }
.site-footer__mark{ display:inline-flex; align-items:center; gap:10px; }
.site-footer__mark-text{ min-width:0; }
.site-footer__eho{ width:22px; height:22px; color:var(--on-dark); }
.site-footer__realtor{ font-weight:500; color:var(--on-dark); letter-spacing:.06em; }
.site-footer__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
/* Phones: the language switch gets its own line, so no "·" is left at a line end. */
@media (max-width:599px){
  .site-footer__dot--lang{ display:none; }
  .lang-switch--footer{ flex-basis:100%; }
}
.lang-switch--footer{ font:inherit; letter-spacing:0; }
.site-footer .lang-switch__option{ color:var(--on-dark-2); }
.site-footer .lang-switch__option[aria-current]{ color:var(--on-dark); }

/* ---------- 8. Home ---------- */
.hero{ display:grid; grid-template-columns:minmax(0,1fr); background:var(--ivory); }
.hero__media{ order:-1; position:relative; aspect-ratio:4 / 5; max-height:88svh; overflow:hidden; background:var(--sand); }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 0; animation:hero-in 1.6s var(--ease) both; }
@keyframes hero-in{ from{ opacity:0; transform:scale(1.04); } to{ opacity:1; transform:none; } }
.hero__text{ padding:48px var(--gutter) 72px; }
/* The H1 says who, what and where (it is longer than a slogan), so it is set smaller than --fs-display and the kicker
   above it carries her name and brokerage. */
.hero__kicker{ flex-wrap:wrap; row-gap:8px; column-gap:12px; }
.hero__kicker-sep{ color:var(--line-strong); }
/* Narrow text columns: the brokerage takes its own line, aligned with the name (rule 32px + gap 12px), no "·". */
@media (max-width:1279px){
  .hero__kicker-sep{ display:none; }
  .hero__kicker-brokerage{ flex-basis:100%; padding-left:44px; }
}
.hero__title{ font-size:clamp(38px,4.5vw,70px); line-height:1.02; letter-spacing:-.018em; max-width:16ch; }
.hero__lede{ max-width:38ch; margin-top:26px; font-size:18px; color:var(--ink-2); }
.search-bar{ display:flex; max-width:520px; margin-top:40px; border:1px solid var(--ink); border-radius:2px; background:transparent; }
.search-bar__input{
  flex:1 1 auto; min-width:0; height:60px; padding:0 22px; border:0; border-radius:0; background:transparent;
  font:300 16px/1 var(--sans); color:var(--ink); -webkit-appearance:none; appearance:none;
}
.search-bar__input::placeholder{ color:var(--taupe); opacity:1; }
.search-bar__input:focus{ outline:none; box-shadow:none; }
.search-bar:focus-within{ box-shadow:0 0 0 1px var(--ink); }
.search-bar__submit{
  flex:none; padding:0 28px; border:0; background:var(--ink); color:var(--ivory);
  font:500 11.5px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; transition:background-color .35s var(--ease);
}
.search-bar__submit:hover{ background:var(--red); }
/* Tablet: a full-width, shorter crop so the headline and the search show in the first screen. The height is set
   (not an aspect ratio), so the photo always fills the row, also in landscape windows. */
@media (min-width:700px) and (max-width:1023px){
  .hero__media{ width:100%; aspect-ratio:auto; height:min(60svh,75vw); max-height:none; }
  .hero__media img{ object-position:50% 22%; }
  .hero__text{ padding-top:40px; }
}
/* Desktop, and landscape tablet windows from 800px (e.g. 1000x700): text and portrait side by side. */
@media (min-width:1024px), (min-width:800px) and (min-aspect-ratio:5/4){
  .hero{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:min(100svh,1000px); }
  .hero__media{ order:0; aspect-ratio:auto; max-height:none; height:100%; }
  .hero__media img{ position:absolute; inset:0; object-position:50% 26%; }
  .hero__text{
    display:flex; flex-direction:column; justify-content:center;
    padding:calc(var(--header-h) + 48px) clamp(40px,5vw,96px) 80px max(var(--gutter),calc((100vw - var(--max)) / 2));
  }
}

.listing-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:56px 32px; list-style:none; margin:0; padding:0; }
@media (min-width:700px){ .listing-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .listing-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:72px 40px; } }

.about-teaser{ display:grid; gap:48px; align-items:center; }
.about-teaser__media{ aspect-ratio:4 / 5; overflow:hidden; max-width:520px; }
/* Tablet: image and text share one centred 520px column, both left-aligned inside it. */
@media (min-width:700px) and (max-width:1023px){
  .about-teaser{ max-width:calc(520px + var(--gutter) * 2); }
  .about-teaser__media{ width:100%; }
}
.about-teaser__media img{ width:100%; height:100%; object-fit:cover; }
.about-teaser__text .section-head__title{ margin-bottom:28px; }
.about-teaser__summary{ max-width:48ch; margin-bottom:28px; color:var(--ink-2); }
.about-teaser__quote{ max-width:36ch; margin:0; font:italic 300 clamp(21px,1.8vw,25px)/1.5 var(--serif); color:var(--ink); }
.about-teaser__quote + .signature{ margin-top:18px; }
@media (min-width:1024px){ .about-teaser{ grid-template-columns:5fr 6fr; gap:clamp(64px,8vw,128px); } }

.services{ display:grid; gap:0; list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.services__item{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:40px 0; border-bottom:1px solid var(--line); }
.services__num{ font:italic 400 20px/1 var(--serif); color:var(--taupe); }
.services__title{ font-size:var(--fs-h3); }
.services__text{ max-width:34ch; color:var(--ink-2); margin-bottom:14px; }
.services__item .link-arrow{ margin-top:auto; }
@media (min-width:900px){
  .services{ grid-template-columns:repeat(3,minmax(0,1fr)); border-top:0; }
  .services__item{ padding:8px clamp(28px,3vw,48px) 8px; border-bottom:0; border-left:1px solid var(--line); }
  .services__item:first-child{ border-left:0; padding-left:0; }
}

/* FAQ (home): hairline accordion, questions in the display face, answers in the text face. */
.faq-section__inner{ max-width:960px; }
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
/* A little inline padding (pulled back with a negative margin, so the text stays on the grid) keeps the question off
   the focus ring; the ring itself is the site-wide :focus-visible style, nothing extra. */
.faq__q{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 8px; margin-inline:-8px; cursor:pointer; list-style:none; }
.faq__q::-webkit-details-marker{ display:none; }
.faq__title{ font-size:clamp(22px,2vw,28px); line-height:1.25; text-wrap:pretty; }
.faq__icon{ flex:none; width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.2; color:var(--taupe); transition:transform .5s var(--ease); }
.faq__item[open] .faq__icon{ transform:rotate(45deg); color:var(--red); }
.faq__q:hover .faq__title{ color:var(--ink-2); }
.faq__a{ padding:0 0 30px; max-width:64ch; color:var(--ink-2); }
.faq__a a{ color:var(--ink); }

.band{ padding-block:var(--space-section); }
.band--dark{ background:var(--ink); color:var(--on-dark); }
.band__inner{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.band__title{ font-size:var(--fs-h1); max-width:16ch; color:var(--on-dark); }
.band__text{ max-width:46ch; margin:24px 0 40px; color:var(--on-dark-2); font-size:18px; }

.contact-strip__list{ display:grid; gap:0; border-top:1px solid var(--line); }
.contact-strip__list > div{ padding:28px 0; border-bottom:1px solid var(--line); }
.contact-strip__list dt{ margin-bottom:10px; font:500 var(--fs-eyebrow)/1.4 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--taupe); }
.contact-strip__list dd{ font:400 clamp(20px,1.7vw,24px)/1.35 var(--serif); font-variant-numeric:lining-nums; color:var(--ink); overflow-wrap:anywhere; }
.contact-strip__list a{ text-decoration:none; }
.contact-strip__list a:hover{ text-decoration:underline; }
.contact-strip__cta{ margin-top:56px; text-align:center; }
@media (min-width:900px){
  .contact-strip__list{ grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid var(--line); }
  .contact-strip__list > div{ padding:32px 28px; border-bottom:0; border-left:1px solid var(--line); }
  .contact-strip__list > div:first-child{ border-left:0; padding-left:0; }
}

/* ---------- 9. Listing cards and area tiles ---------- */
.listing-card{ display:flex; flex-direction:column; height:100%; }
.listing-card__link{ display:block; text-decoration:none; color:inherit; }
.listing-card__media{ position:relative; aspect-ratio:4 / 3; overflow:hidden; background:var(--sand-2); }
.listing-card__img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.listing-card__link:hover .listing-card__img{ transform:scale(1.03); }
.listing-card__status{
  position:absolute; top:16px; left:16px; padding:7px 12px; background:var(--ivory); color:var(--ink);
  font:500 10px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
}
.listing-card__body{ padding-top:22px; }
.listing-card__price{ font:400 30px/1.1 var(--serif); letter-spacing:-.005em; font-variant-numeric:lining-nums; }
.listing-card__facts{ margin-top:8px; font-size:14px; color:var(--ink-2); }
.listing-card__facts .dot{ color:var(--taupe); }
.listing-card__address{ margin-top:10px; font:400 15px/1.5 var(--sans); letter-spacing:0; color:var(--ink); }
.listing-card__street{ background:linear-gradient(currentColor,currentColor) left 100% / 0 1px no-repeat; transition:background-size .5s var(--ease); }
.listing-card__link:hover .listing-card__street{ background-size:100% 1px; }
.listing-card__city{ display:block; margin-top:2px; font:500 10.5px/1.6 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); }
.listing-card__attribution{ margin-top:auto; padding-top:16px; }
.listing-card__body + .listing-card__attribution,.listing-card__link + .listing-card__attribution{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.idx-attribution{ font-size:11.5px; line-height:1.55; color:var(--taupe); }

.area-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,24px); list-style:none; margin:0; padding:0; }
@media (min-width:800px){ .area-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1200px){ .area-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.area-tile{ position:relative; display:block; aspect-ratio:4 / 5; overflow:hidden; background:var(--sand-2); color:var(--on-dark); text-decoration:none; }
.area-tile__img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
/* The name sits at ~75% height: the gradient is already ~50% dark there, so light photos (Brownsville's white columns) stay legible. */
.area-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(17,17,17,0) 32%,rgba(17,17,17,.5) 66%,rgba(17,17,17,.8) 100%); }
.area-tile__tag{
  position:absolute; z-index:1; top:clamp(12px,1.4vw,18px); left:clamp(12px,1.4vw,18px); padding:5px 9px; background:rgba(250,247,242,.88); color:var(--ink-2);
  font:500 9.5px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
}
.area-tile:hover .area-tile__img{ transform:scale(1.03); }
.area-tile__name{ position:absolute; z-index:1; text-shadow:0 1px 14px rgba(17,17,17,.55),0 0 2px rgba(17,17,17,.35); left:clamp(16px,2vw,28px); right:16px; bottom:clamp(44px,4.6vw,62px); font:300 clamp(24px,2.4vw,36px)/1.05 var(--serif); }
.area-tile__more{
  position:absolute; z-index:1; left:clamp(16px,2vw,28px); bottom:clamp(18px,2vw,28px); padding-bottom:4px;
  font:500 10px/1.2 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  background:linear-gradient(currentColor,currentColor) left bottom / 24px 1px no-repeat; transition:background-size .5s var(--ease);
}
.area-tile:hover .area-tile__more{ background-size:100% 1px; }
.area-more{ display:flex; flex-direction:column; justify-content:flex-end; padding:24px 0 0; }
.area-more__list{ display:flex; flex-wrap:wrap; gap:6px 18px; list-style:none; margin:0; padding:0; }
.area-more__list a{ font:400 20px/1.5 var(--serif); text-decoration:none; }
.area-more__list a:hover{ text-decoration:underline; }
.area-grid > .area-more{ padding:clamp(16px,2vw,28px); border:1px solid var(--line); justify-content:flex-end; }
@media (max-width:799px){ .area-grid > .area-more{ grid-column:1 / -1; } }

/* ---------- 10. Page heads and pages ---------- */
.breadcrumb{ padding-top:24px; }
.breadcrumb__list{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; font:500 10.5px/1.6 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); }
.breadcrumb__item + .breadcrumb__item::before{ content:"/"; margin-right:6px; color:var(--line-strong); }
.breadcrumb a{ text-decoration:none; }
.breadcrumb a:hover{ color:var(--ink); }
.page-head{ padding:clamp(48px,7vw,104px) 0 clamp(48px,6vw,88px); }
.page-head__title{ font-size:var(--fs-h1); max-width:18ch; }
.page-head__lede{ max-width:52ch; margin-top:24px; font-size:18px; color:var(--ink-2); }
.page-head__meta{ margin-top:18px; font-size:13px; color:var(--taupe); }

.profile{ padding-block:clamp(48px,6vw,96px) var(--space-section); }
.profile__grid{ display:grid; gap:48px; }
.profile__media{ aspect-ratio:4 / 5; overflow:hidden; background:var(--sand); }
.profile__media img{ width:100%; height:100%; object-fit:cover; }
.profile__title{ font-size:var(--fs-display); line-height:.98; }
.profile__role{ display:block; margin-top:20px; font:400 12px/1.6 var(--sans); letter-spacing:.32em; text-transform:uppercase; color:var(--taupe); }
.profile__role sup{ font-size:.7em; letter-spacing:0; }
.profile__summary{ max-width:56ch; margin:0 0 36px; color:var(--ink-2); }
.credentials{ margin:36px 0 40px; padding:18px 0; border-block:1px solid var(--line); font:500 11px/1.9 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); }
.credentials__sep{ color:var(--line-strong); margin-right:.7em; }
.credentials__item{ white-space:nowrap; }
.credentials__item + .credentials__item{ margin-left:.1em; }
.profile__bio{ display:grid; gap:1.2em; max-width:60ch; color:var(--ink-2); }
.profile__bio p:first-child{ font:300 clamp(22px,1.9vw,27px)/1.5 var(--serif); color:var(--ink); }
@media (min-width:1024px){
  .profile__grid{ grid-template-columns:5fr 6fr; gap:clamp(64px,8vw,128px); align-items:start; }
  .profile__media{ position:sticky; top:calc(var(--header-h) + 32px); }
  .profile__text{ padding-top:24px; }
}

.form-page{ padding-block:clamp(48px,6vw,96px) var(--space-section); }
.form-page__grid{ display:grid; gap:56px; }
.form-page__intro .page-head__title{ max-width:18ch; }
.form-page__media{ display:none; }
.contact-list{ margin-top:40px; border-top:1px solid var(--line); }
.contact-list > div{ display:grid; gap:4px; padding:18px 0; border-bottom:1px solid var(--line); }
.contact-list dt{ font:500 var(--fs-eyebrow)/1.4 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--taupe); }
.contact-list dd{ font-size:16px; color:var(--ink); overflow-wrap:anywhere; }
.contact-list a{ text-decoration:none; }
.contact-list a:hover{ text-decoration:underline; }
@media (min-width:1024px){
  .form-page__grid{ grid-template-columns:5fr 6fr; gap:clamp(64px,8vw,128px); align-items:start; }
  .form-page__intro{ position:sticky; top:calc(var(--header-h) + 32px); }
  .form-page__media{ display:block; max-width:340px; margin-top:48px; aspect-ratio:4 / 5; overflow:hidden; }
  .form-page__media img{ width:100%; height:100%; object-fit:cover; }
}

.confirm{ padding-block:clamp(80px,12vw,180px); }
.confirm__inner{ max-width:calc(760px + var(--gutter) * 2); text-align:center; }
.confirm .eyebrow{ justify-content:center; }
.confirm__title{ font-size:var(--fs-h1); }
.confirm__text{ max-width:46ch; margin:24px auto 0; font-size:18px; color:var(--ink-2); }
.confirm__actions{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:24px 40px; margin-top:44px; }
.confirm__note{ max-width:56ch; margin:72px auto 0; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--taupe); }

.error-page{ padding-block:clamp(80px,12vw,180px); }
.error-page__inner{ max-width:calc(760px + var(--gutter) * 2); text-align:center; }
.error-page__code{ font:italic 400 clamp(72px,10vw,140px)/1 var(--serif); color:var(--taupe); }
.error-page__title{ margin-top:16px; font-size:var(--fs-h2); }
.error-page__text{ max-width:50ch; margin:20px auto 0; color:var(--ink-2); }
.error-page__search{ margin:40px auto 0; }
.error-page__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px 36px; margin-top:48px; }
.error-page__lang{ margin-top:48px; font-size:14px; color:var(--taupe); }

.empty-state{ max-width:640px; margin:0 auto; padding:clamp(48px,6vw,80px) var(--gutter); text-align:center; border:1px solid var(--line); }
.empty-state__title{ font-size:var(--fs-h3); }
.empty-state__text{ margin-top:16px; color:var(--ink-2); }
.empty-state__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:24px; }
.empty-state__actions{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:20px 32px; margin-top:32px; }

/* Privacy: table of contents + text */
.guide-layout{ display:grid; gap:40px; }
@media (min-width:980px){ .guide-layout{ grid-template-columns:240px minmax(0,1fr); gap:80px; } .toc{ position:sticky; top:calc(var(--header-h) + 32px); align-self:start; } }
.toc__summary{ font:500 var(--fs-eyebrow)/1.4 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--taupe); cursor:pointer; list-style:none; }
.toc__summary::-webkit-details-marker{ display:none; }
.toc__list{ margin:16px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }
.toc__list li{ border-bottom:1px solid var(--line); }
.toc__link{ display:block; padding:10px 0; font-size:14px; text-decoration:none; color:var(--ink-2); }
.toc__link:hover{ color:var(--ink); }
.privacy__meta{ margin-top:18px; font-size:13px; color:var(--taupe); }
.data-table{ width:100%; margin:0 0 1.4em; border-collapse:collapse; font-size:14px; line-height:1.55; }
.data-table th,.data-table td{ padding:12px 14px 12px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.data-table th{ font-weight:500; }
.prose .data-table-wrap,.prose table{ display:block; overflow-x:auto; }

.credits{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.credits__title{ margin-top:4px; font-size:13.5px; color:var(--ink-2); overflow-wrap:anywhere; }
.credits__title cite{ font-style:italic; }
.credits__item{ display:flex; gap:24px; align-items:flex-start; padding:24px 0; border-bottom:1px solid var(--line); }
.credits__thumb{ width:72px; height:90px; object-fit:cover; flex:none; }
.credits__subject{ font:400 22px/1.3 var(--serif); }
.credits__line{ margin-top:6px; font-size:13.5px; color:var(--taupe); overflow-wrap:anywhere; }
.credits__line a{ color:var(--ink-2); }

/* ---------- 11. Forms ---------- */
.lead-form{ display:grid; gap:28px; }
.lead-form__heading{ font:300 var(--fs-h3)/1.1 var(--serif); }
.lead-form__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:28px 32px; align-items:start; }
@media (min-width:700px){ .lead-form__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .field--full{ grid-column:1 / -1; } }
.field{ display:grid; gap:8px; align-content:start; min-width:0; margin:0; padding:0; border:0; }
.field__label{ font:500 var(--fs-eyebrow)/1.4 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); padding:0; }
.field__optional{ letter-spacing:.08em; text-transform:none; font-weight:400; color:var(--taupe); }
.field__control{
  width:100%; min-height:48px; padding:10px 0; border:0; border-bottom:1px solid var(--line-strong); border-radius:0; background:transparent;
  font:300 16px/1.4 var(--sans); color:var(--ink); -webkit-appearance:none; appearance:none; transition:border-color .3s var(--ease);
}
.field__control::placeholder{ color:var(--taupe); opacity:1; }
.field__control:focus{ outline:none; box-shadow:none; border-bottom:2px solid var(--ink); padding-bottom:9px; }
select.field__control{ padding-right:28px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23111' stroke-width='1.2'/%3E%3C/svg%3E") right 4px center / 12px 8px no-repeat; cursor:pointer; }
textarea.field__control{ min-height:120px; resize:vertical; }
.field__hint{ font-size:12.5px; line-height:1.5; color:var(--taupe); }
.field__error{ font-size:13px; line-height:1.5; color:var(--red-text); }
.field.is-invalid .field__control{ border-bottom-color:var(--red-text); }
.field--check{ display:flex; align-items:flex-start; gap:12px; font-size:14px; line-height:1.55; color:var(--ink-2); cursor:pointer; }
.field--check input{ flex:none; width:18px; height:18px; margin:2px 0 0; accent-color:var(--ink); }
.lead-form__consent a{ text-decoration:underline; }
.lead-form__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; }
.lead-form__micro{ font-size:13px; color:var(--taupe); }
.lead-form__errors{ padding:16px 20px; border-left:2px solid var(--red); background:#fff; font-size:14px; color:var(--ink-2); }
.lead-form__errors ul{ margin:8px 0 0; padding-left:18px; }
.lead-form__errors a{ color:var(--red-text); }
.lead-form__errors:focus{ outline:none; }
.lead-form__success{ padding:36px; border:1px solid var(--line); display:grid; gap:14px; }
.lead-form__success:focus{ outline:none; }
.interest,.segmented{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; border:0; min-inline-size:0; }
.interest__option,.segmented__option{
  display:inline-flex; align-items:center; min-height:42px; padding:0 18px; border:1px solid var(--line-strong);
  font:400 13px/1 var(--sans); letter-spacing:.06em; color:var(--ink-2); cursor:pointer; transition:background-color .3s var(--ease),color .3s var(--ease);
}
.interest__option:hover,.segmented__option:hover{ border-color:var(--ink); color:var(--ink); }
.interest__input:checked + .interest__option,.segmented__input:checked + .segmented__option{ background:var(--ink); border-color:var(--ink); color:var(--ivory); }
.interest__input:focus-visible + .interest__option,.segmented__input:focus-visible + .segmented__option{ box-shadow:var(--focus); }

/* ---------- 12. Notices (MLS, demo) ---------- */
.notice--mls{ margin-top:clamp(48px,6vw,80px); padding-top:22px; border-top:1px solid var(--line); font-size:12.5px; line-height:1.65; color:var(--taupe); }
.notice--mls .notice__text{ display:grid; gap:4px; }
.notice__mls{ color:var(--ink-2); }
.notice--demo{ margin-bottom:40px; padding:14px 0; border-block:1px solid var(--line); font-size:13px; color:var(--taupe); }
.notice--demo strong{ color:var(--ink); }
.notice--fraud{ margin:1.6em 0; padding:14px 20px; border-left:2px solid var(--red); background:var(--sand); font-size:14px; }
.notice--fraud .notice__icon{ display:none; }
.tag{ display:inline-block; padding:2px 6px; border:1px solid var(--line-strong); font:500 9.5px/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--taupe); vertical-align:middle; }

/* ---------- 13. Utilities ---------- */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.nowrap{ white-space:nowrap; }
.placeholder{ display:inline-block; padding:0 6px; border:1px dashed var(--red); font:500 11px/1.6 var(--sans); color:var(--red-text); background:#fff; }

/* Cormorant's default figures are old-style: prices, phone numbers and addresses use lining figures. */
.contact-strip__list dd,.listing-card__price,.credits__subject,.area-more__list a,.signature,.about-teaser__quote,.profile__bio p{ font-variant-numeric:lining-nums; }

/* ---------- 14. Print ---------- */
@media print{
  .site-header,.site-nav,.notice--lang,.notice--blockers,.skip-link,.mobile-cta,.search-bar,.btn,.link-arrow,.site-footer__nav,.breadcrumb{ display:none !important; }
  body{ background:#fff; font-size:11pt; }
  .site-footer{ background:#fff; color:#000; }
  .site-footer a{ color:#000; }
  .site-footer__broker{ display:none; }
  .section,.band{ padding-block:24px; }
  .band--dark{ background:#fff; color:#000; }
}

/* Phone header (owner, 2026-10-28): on phones the RCR brokerage logo is the header's brand, in place of Yadira's
   wordmark. Kept last so it wins over the breakpoint rules above. Official artwork: height only, never stretched. */
@media (max-width: 599px){
  .site-header .wordmark{ display:none; }
  .site-header__broker{ padding-left:0; border-left:0; height:50px; text-decoration:none; }
  .site-header__broker img{ height:46px; width:auto; }
}