/* ==========================================================
   Longoria Real Estate — shared stylesheet
   Design tokens carried over from the original preview.
   ========================================================== */

:root{
  --ink:#1A1917;
  --ink-2:#3C382F;
  --ink-3:#6B655A;
  --paper:#FBF9F6;
  --paper-2:#F3EEE7;
  --paper-3:#EAE3D8;
  --line:#DED5C8;
  --line-2:#C9BDAA;
  --brass:#96774B;
  --brass-2:#7C6038;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:1160px;
  --read:720px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.005em;margin:0}
h1{font-size:clamp(2.4rem,5.2vw,3.7rem);line-height:1.08}
h2{font-size:clamp(1.9rem,3.4vw,2.65rem);line-height:1.15;margin-bottom:1.1rem}
h3{font-size:1.42rem;line-height:1.25;margin-bottom:.5rem}
h4{font-size:1.16rem;margin-bottom:.7rem}
p{margin:0 0 1.15rem}
p:last-child{margin-bottom:0}

a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;width:100%}
/* Reading column. Left edge stays flush with every other section
   so the page has one consistent left margin instead of jogging
   in and out as the column width changes. */
.read{max-width:var(--read);margin-left:0;margin-right:0}
.wrap.read{max-width:var(--wrap)}
.wrap.read > *{max-width:var(--read)}
.wrap.read > .faq,
.wrap.read > .places{max-width:var(--read)}

section{padding:78px 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}

.eyebrow{
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:600;
  margin:0 0 .85rem;
}

.sub{
  font-size:1.16rem;
  line-height:1.6;
  color:var(--ink-2);
  max-width:60ch;
  margin:1.35rem 0 0;
}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--paper);
  padding:12px 18px;z-index:200;
}
.skip:focus{left:12px;top:12px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:14.5px;
  letter-spacing:.045em;
  font-weight:500;
  text-decoration:none;
  padding:15px 30px;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{background:var(--brass-2);border-color:var(--brass-2);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn + .btn{margin-left:12px}
@media (max-width:520px){
  .btn{display:block;text-align:center}
  .btn + .btn{margin-left:0;margin-top:12px}
}

.tel{
  display:inline-block;
  font-size:15px;
  text-decoration:none;
  border-bottom:1px solid var(--line-2);
  padding-bottom:2px;
  color:var(--ink-2);
}
.tel:hover{border-bottom-color:var(--ink)}

.more{
  display:inline-block;
  margin-top:.9rem;
  font-size:14px;
  letter-spacing:.03em;
  text-decoration:none;
  color:var(--brass-2);
  border-bottom:1px solid transparent;
  padding-bottom:1px;
}
.more:hover{border-bottom-color:currentColor}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:100;
  background:rgba(251,249,246,.94);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;gap:24px;padding-top:15px;padding-bottom:15px}
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto;flex-shrink:0}
.brand img{width:158px}
.brand .brand-fallback{display:none}

.nav{display:flex;align-items:center;gap:26px}
.nav a{
  font-size:14.5px;text-decoration:none;color:var(--ink-2);
  border-bottom:1px solid transparent;padding-bottom:2px;white-space:nowrap;
}
.nav a:hover{color:var(--ink);border-bottom-color:var(--brass)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brass)}
.nav-contact{
  border:1px solid var(--line-2)!important;
  padding:9px 17px!important;
  border-radius:0;
}
.nav-contact:hover{background:var(--ink);color:var(--paper)!important;border-color:var(--ink)!important}

.burger{
  display:none;background:none;border:1px solid var(--line-2);
  width:42px;height:38px;cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.burger span{display:block;width:18px;height:1px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:18px;height:1px;background:var(--ink);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}

@media (max-width:600px){
  .brand img{width:118px}
}

@media (max-width:960px){
  .burger{display:flex}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:8px 24px 20px;
  }
  .nav.on{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav-contact{margin-top:14px;text-align:center}
}

/* ---------- hero ---------- */
.hero{
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  padding:96px 0 88px;
}
/* Hero shares the same left margin as every section below it. */
.hero-in{max-width:var(--wrap)}
.hero-in > *{max-width:860px}
.hero h1{margin-bottom:0}
.hero .btn{margin-top:2.1rem}

/* Typographic hero — used where no photograph exists yet.
   To add a photo later: give .hero a background-image and add
   class "hero-photo" to switch the type to light-on-dark.      */
.hero.hero-type{
  background:var(--paper-2);
  padding:108px 0 96px;
}
.hero.hero-type .rule{
  width:64px;height:1px;background:var(--brass);
  margin:0 0 1.9rem;border:0;
}

/* ---------- reading sections ---------- */
.note{
  border-left:2px solid var(--brass);
  padding:2px 0 2px 22px;
  margin:1.9rem 0 0;
  font-family:var(--serif);
  font-size:1.32rem;
  line-height:1.42;
  color:var(--ink-2);
}
.note p{margin:0}

.feat{
  display:grid;
  grid-template-columns:minmax(200px,300px) 1fr;
  gap:34px;
  padding:32px 0;
  border-top:1px solid var(--line);
}
.feat:first-of-type{border-top:0;padding-top:6px}
.feat h3{margin:0}

@media (max-width:760px){
  .feat{grid-template-columns:1fr;gap:12px}
}

/* ---------- grids ---------- */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.cell{background:var(--paper);padding:30px 28px}
.num{
  display:block;
  font-family:var(--sans);
  font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--brass);font-weight:600;margin-bottom:.7rem;
}
.k{
  font-family:var(--serif);
  font-size:1.34rem;line-height:1.25;
  margin:0 0 .6rem;
}
.cell p:not(.k){font-size:15.5px;color:var(--ink-2);line-height:1.62}

@media (max-width:900px){.grid.three{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .grid.two,.grid.three{grid-template-columns:1fr}
}

/* ---------- place list ---------- */
.places{display:flex;flex-wrap:wrap;gap:9px;margin-top:1.6rem}
.places span{
  font-size:13.5px;letter-spacing:.02em;
  border:1px solid var(--line-2);
  padding:7px 14px;color:var(--ink-2);
}

/* ---------- testimonial ---------- */
/* Deliberately not a left-ruled block — .note already uses that
   treatment, and the two often sit near each other. A filled card
   keeps a client's words visually distinct from Jahda's. */
.quote{
  background:var(--paper-2);
  border:1px solid var(--line);
  padding:32px 34px 28px;
  margin:2.6rem 0 0;
  max-width:64ch;
}
.quote blockquote{
  margin:0;
  font-family:var(--serif);
  font-size:1.44rem;
  line-height:1.42;
  color:var(--ink);
}
.quote blockquote p{margin:0 0 .85rem}
.quote blockquote p:last-child{margin-bottom:0}
.quote figcaption{
  margin-top:1.15rem;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-3);
}

@media (max-width:600px){
  .quote{padding-left:18px}
  .quote blockquote{font-size:1.24rem}
}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  font-family:var(--serif);
  font-size:1.28rem;
  padding:22px 40px 22px 0;
  cursor:pointer;
  list-style:none;
  position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:50%;
  transform:translateY(-50%);
  font-family:var(--sans);font-size:20px;color:var(--brass);
  transition:transform .2s ease;
}
.faq details[open] summary::after{content:"–"}
.faq details > div{padding:0 40px 24px 0;color:var(--ink-2);font-size:16px}

/* ---------- cta band ---------- */
.cta-band{background:var(--ink);color:var(--paper);border-top:0}
.cta-band h2{color:var(--paper)}
.cta-band p{color:rgba(251,249,246,.76);max-width:62ch}
.cta-band .wrap{max-width:var(--read)}
.cta-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:1.9rem}
.cta-band .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cta-band .btn:hover{background:var(--brass);border-color:var(--brass);color:#fff}
.cta-band .tel{color:rgba(251,249,246,.82);border-bottom-color:rgba(251,249,246,.34)}
.cta-band .tel:hover{border-bottom-color:var(--paper)}

/* ---------- misc content bits ---------- */
.hero.wide .hero-in > *{max-width:900px}
.fine{font-size:13.5px;line-height:1.6;color:var(--ink-3);margin-top:1rem}
.pos-place{
  font-family:var(--sans);font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:1.4rem;
}
.price-band{
  font-size:13px;letter-spacing:.03em;color:var(--brass-2);
  margin-top:.9rem;margin-bottom:0;
}
.magnet{background:var(--paper-2)}

/* ---------- forms ---------- */
.form-band{background:var(--paper-2)}
.lead-form{margin-top:2rem}
.lead-form .row{margin-bottom:20px}
.lead-form .row.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.lead-form .row.split .row{margin-bottom:0}
.lead-form label{
  display:block;font-size:13.5px;letter-spacing:.02em;
  color:var(--ink-2);margin-bottom:7px;font-weight:500;
}
.lead-form .opt{color:var(--ink-3);font-weight:400}
.lead-form input,
.lead-form select,
.lead-form textarea{
  width:100%;
  font-family:var(--sans);
  font-size:16px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line-2);
  border-radius:0;
  padding:13px 14px;
  transition:border-color .15s ease,box-shadow .15s ease;
  -webkit-appearance:none;appearance:none;
}
.lead-form select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236B655A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px;
  padding-right:38px;
}
.lead-form textarea{resize:vertical;min-height:96px}
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus{
  outline:none;border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(150,119,75,.14);
}
.lead-form .btn{margin-top:6px}
.lead-form .btn:disabled{opacity:.6;cursor:default}

/* honeypot — off-screen, never shown to a human */
.trap{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}

.form-status{margin-top:14px;font-size:14.5px;line-height:1.55}
.form-status.is-warn{color:#8A4B2A}
.form-status:empty{margin-top:0}

.form-done{
  border:1px solid var(--line-2);
  background:var(--paper);
  padding:28px 26px;
}
.form-done .k{margin-bottom:.5rem}
.form-done p:last-child{font-size:15.5px;color:var(--ink-2);margin:0}

@media (max-width:640px){
  .lead-form .row.split{grid-template-columns:1fr;gap:20px}
}

/* ---------- editor's note (visible only with ?draft=1) ------ */
.draft-note{display:none}
body.show-draft .draft-note{
  display:block;
  background:#FFF8E1;
  border:1px dashed #C9A227;
  padding:18px 22px;
  margin:0 0 28px;
  font-size:14.5px;
  color:#5C4A00;
}
body.show-draft .draft-note strong{display:block;margin-bottom:.3rem}

/* ---------- footer ---------- */
.site-foot{
  background:var(--paper);
  border-top:1px solid var(--line);
  padding:64px 0 30px;
}
.foot-grid{
  display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:48px;
  padding-bottom:44px;border-bottom:1px solid var(--line);
}
.foot-wordmark{width:212px}
.foot-tag{margin:20px 0 0;font-size:14px;line-height:1.65;max-width:34ch;color:var(--ink-3)}
.foot-h{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  margin:6px 0 18px;color:var(--ink-3);font-weight:600;font-family:var(--sans);
}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list li{margin-bottom:11px}
.foot-list a{
  color:inherit;text-decoration:none;font-size:15px;
  border-bottom:1px solid transparent;padding-bottom:1px;
}
.foot-list a:hover{border-bottom-color:currentColor}
.foot-list .big{font-size:19px;letter-spacing:.01em}

.foot-legal{padding-top:34px}

/* TREC: the broker's name must be at least HALF the size of the
   largest agent or team contact information on the page.
   Largest agent text here is the 19px phone number.
   .foot-broker-name is 15px. 15 >= 9.5 ✓
   DO NOT reduce .foot-broker-name below 15px.                  */
.foot-broker{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.foot-kw{height:34px;width:auto}
.foot-broker-name{font-size:15px;line-height:1.45;margin:0}
.foot-broker-name span{display:block;font-size:13px;color:var(--ink-3)}

/* TREC: both notices must be readily noticeable, at least 10pt
   (≈13.3px). Set to 14px.                                      */
.foot-notices{
  display:flex;gap:28px;flex-wrap:wrap;
  padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.foot-notices a{
  font-size:14px;color:inherit;text-decoration:underline;
  text-underline-offset:3px;padding:4px 0;
}

.foot-bot{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:22px;font-size:12.5px;line-height:1.6;color:var(--ink-3);
}
.foot-bot p{margin:0;max-width:62ch}
.eho{display:flex;align-items:center;gap:9px;white-space:nowrap}
.eho svg{width:19px;height:19px;fill:currentColor;opacity:.85}

@media (max-width:820px){
  .foot-grid{grid-template-columns:1fr;gap:36px}
  section{padding:58px 0}
  .hero{padding:68px 0 60px}
  .hero.hero-type{padding:76px 0 68px}
}

/* ---------- footer social icons ---------- */
.foot-social{
  display:flex;
  gap:14px;
  margin-top:20px;
}
.foot-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border:1px solid var(--line-2);
  border-radius:50%;
  color:var(--ink-2);
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.foot-social a:hover,
.foot-social a:focus-visible{
  color:var(--paper);
  background:var(--brass);
  border-color:var(--brass);
}
.foot-social svg{width:18px;height:18px}