/* Cindy Cole, REALTOR® | eXp Realty — v3
   Look & feel aligned with her office team site: Playfair Display (uppercase serif headings)
   + Montserrat (letter-spaced caps UI), black/white/stone palette, signature yellow accent,
   square outlined buttons, full-bleed photo hero. */
:root{
  --ink:#1a1a1a; --ink-2:#2b2b2b; --muted:#5e5e5e; --line:#d9d2c5;
  --white:#ffffff; --cream:#faf7f2; --stone:#f1ece4; --stone-2:#e6dfd3; --taupe:#c7b195; --taupe-dark:#8a7457;
  --yellow:#f5f709; --yellow-2:#e6e800;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --script:"Great Vibes","Brush Script MT",cursive;
  /* Type scale (one set of sizes used everywhere) */
  --fs-label:.75rem;      /* eyebrows, nav, form/contact labels, footer heads, captions */
  --fs-small:.875rem;     /* fine print, chips, secondary lines */
  --fs-body:1rem;         /* body copy (mobile) */
  --fs-lead:clamp(1.0625rem,1.6vw,1.1875rem);
  --fs-h3:1.25rem;
  --fs-h2:clamp(1.75rem,3.2vw,2.25rem);
  /* Spacing rhythm */
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-5:3rem;
  --section-y:clamp(4rem,8vw,6.5rem);
  --track-label:.18em;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;font-family:var(--sans);font-size:var(--fs-body);line-height:1.7;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.reviews:focus-visible{outline:3px solid var(--taupe-dark);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.2;color:var(--ink);margin:0 0 var(--sp-2)}
h2{font-size:var(--fs-h2);text-transform:uppercase;letter-spacing:.02em}
h3{font-size:var(--fs-h3);text-transform:uppercase;letter-spacing:.03em}
p{margin:0 0 var(--sp-2)}
@media (min-width:900px){body{font-size:1.0625rem}}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem}
.eyebrow{font-family:var(--sans);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:var(--fs-label);line-height:1.4;color:var(--taupe-dark);margin-bottom:var(--sp-2)}
.center{text-align:center}
.fine{font-size:var(--fs-small);color:var(--muted);line-height:1.6}
.rule{display:block;width:64px;height:2px;background:var(--yellow);margin:0 auto var(--sp-3);border:0}
.rule-left{margin-left:0}

/* Signature name (business-card style) */
.sig{font-family:var(--script);font-weight:400;letter-spacing:0;text-transform:none;line-height:1}
.caps-light{font-family:var(--sans);font-weight:300;text-transform:uppercase;letter-spacing:.32em}
/* Signature sub-line: "REALTOR® | The Escalante Group" — plain text, wraps between parts on narrow screens.
   Team name stays in the small light caps (always smaller than the eXp Realty text).
   The "|" sits in the gap before the team name and is clipped away if the team name wraps to its own line. */
.sig-line{display:block;overflow:hidden;max-width:100%;white-space:normal;padding-block:.08em}
.sig-line .sl-in{display:flex;flex-wrap:wrap;row-gap:.4em;margin-left:-1.3em}
.sig-line .sl-part{white-space:nowrap;margin-left:1.3em;position:relative}
.sig-line .sl-pipe{position:absolute;left:-.95em;top:0;letter-spacing:0;opacity:.6}

/* Monogram mark (Cindy's own: yellow circle + script C) */
.mono{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 2px var(--white),0 0 0 3px var(--ink);color:var(--ink);font-family:var(--script);font-size:1.75rem;line-height:1;padding-top:.15rem}

/* Buttons: square, letter-spaced caps */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:52px;padding:.85rem 1.9rem;border-radius:0;font-family:var(--sans);font-weight:700;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.btn-primary{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.btn-primary:hover{background:var(--yellow-2);border-color:var(--yellow-2)}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:#000}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-outline-light{background:transparent;color:#fff;border-color:#fff}
.btn-outline-light:hover{background:#fff;color:var(--ink)}
.btn-block{width:100%}
.ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin:var(--sp-4) 0}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--stone-2)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:76px}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);white-space:nowrap;min-width:0}
.logo-text{display:flex;align-items:center;gap:.65rem;min-width:0}
.logo-name{display:flex;flex-direction:column;line-height:1;min-width:0;flex:0 1 auto}
/* Header brokerage name is always >= 50% of the agent-name font size */
.logo-agent{font-size:clamp(1.6rem,3.6vw,2.1rem)}
.logo-realtor{font-size:.6rem;letter-spacing:.32em;margin-top:.15rem}
.logo-sep{width:1px;align-self:stretch;background:var(--line)}
.logo-broker{font-family:var(--sans);font-weight:700;font-size:clamp(.95rem,2vw,1.15rem);letter-spacing:.01em}
.nav{display:none;gap:2rem}
.nav a{text-decoration:none;font-weight:700;color:var(--ink);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;padding:.3rem 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--yellow)}
@media (min-width:1060px){.nav{display:flex}}
@media (max-width:420px){.mono{display:none}.logo-realtor{display:none}}


/* Hero: full-bleed photo, dark overlay */
.hero{position:relative;color:#fff;padding:var(--sp-5) 0 3.5rem;
  background:linear-gradient(90deg,rgba(15,15,15,.82) 0%,rgba(15,15,15,.62) 55%,rgba(15,15,15,.35) 100%),url("living.webp") center/cover no-repeat;}
.hero-grid{display:grid;gap:var(--sp-4);align-items:center}
.hero-text{order:2}
.hero-photo{order:1;max-width:340px;margin-inline:auto;width:100%}
.hero .eyebrow{color:var(--yellow)}
.agent-name{margin:0;color:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
/* Brokerage line below is exactly 50% (or more) of this name size at every width */
.agent-name .sig{font-size:clamp(3.2rem,7vw,5rem);padding:.05em .1em 0 0}
.agent-name .realtor{font-size:clamp(.95rem,1.6vw,1.15rem);color:#fff}
.hero-broker{margin:var(--sp-2) 0 var(--sp-3);display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .6rem}
.hero-broker .by{font-family:var(--sans);font-weight:300;font-size:var(--fs-small);letter-spacing:.18em;text-transform:uppercase}
.hero-broker strong{font-family:var(--sans);font-weight:700;font-size:clamp(1.6rem,3.5vw,2.5rem);line-height:1.1}
.lead{font-size:var(--fs-lead);line-height:1.65;max-width:42ch;color:#f4f1ec;margin-bottom:0}
.rating{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-weight:500;color:#e9e4da;font-size:var(--fs-small);margin:0}
.stars{color:var(--yellow);letter-spacing:.12em}
.hero-photo .frame{position:relative;border-radius:50%;aspect-ratio:1/1;padding:10px;background:rgba(255,255,255,.12);box-shadow:0 0 0 2px var(--yellow)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:50%}
.hero-areas{margin:var(--sp-2) 0 0;text-align:center;font-size:var(--fs-label);font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#fff}
@media (min-width:900px){
  .hero{padding:var(--section-y) 0}
  .hero-grid{grid-template-columns:1.25fr .75fr;gap:var(--sp-5)}
  .hero-text{order:1}.hero-photo{order:2;max-width:380px}
}

/* Sections */
.section{padding:var(--section-y) 0}
.section-stone{background:var(--stone)}
.section-cream{background:var(--cream)}
.section-head{text-align:center;max-width:720px;margin:0 auto var(--sp-5)}
.section-head p{color:var(--muted)}
.section-head p:last-child{margin-bottom:0}

/* Service tiles: photo with serif caps overlay */
.cards{display:grid;gap:var(--sp-4)}
@media (min-width:760px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;display:flex;flex-direction:column;border:1px solid var(--stone-2)}
.tile{position:relative;overflow:hidden;aspect-ratio:3/2}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .tile img{transform:scale(1.04)}
.tile::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.38)}
.tile h3{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;padding:var(--sp-2);text-align:center;color:#fff;font-size:clamp(1.25rem,2vw,1.5rem);letter-spacing:.08em}
.tile h3::after{content:"";width:44px;height:2px;background:#fff;margin-top:.7rem}
.card-body{padding:var(--sp-4) var(--sp-4) var(--sp-4);display:flex;flex-direction:column;flex:1}
.card-body p{color:var(--muted);margin-bottom:var(--sp-3)}
.card-body > :last-child{margin-bottom:0}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.steps li{counter-increment:s;background:var(--stone);padding:.25rem .7rem;font-size:var(--fs-small);line-height:1.5;font-weight:600;color:var(--ink)}
.steps li::before{content:counter(s) ". ";color:var(--taupe-dark);font-weight:700}
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:1.6rem;margin-bottom:var(--sp-1);font-weight:600;font-size:var(--fs-small)}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:.65rem;height:.65rem;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 1px var(--ink)}

/* About */
.about-grid{display:grid;gap:var(--sp-5);align-items:center}
.about-photo img{aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;width:100%;max-width:460px;margin-inline:auto;box-shadow:18px 18px 0 var(--stone-2)}
.about-text h2{margin-bottom:var(--sp-2)}
.promise{margin:var(--sp-4) 0 0;padding:var(--sp-3) var(--sp-4);background:var(--stone);border-left:3px solid var(--yellow);font-family:var(--serif);font-size:var(--fs-lead);color:var(--ink);font-style:italic;line-height:1.6}
@media (min-width:900px){.about-grid{grid-template-columns:.85fr 1.15fr;gap:4.5rem}}

/* Reviews */
.reviews{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:var(--sp-3);overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem .25rem 1.25rem;margin-inline:-.25rem}
.review{scroll-snap-align:start;margin:0;background:#fff;padding:var(--sp-4);border:1px solid var(--stone-2);display:flex;flex-direction:column;position:relative}
.review::before{content:"\201C";position:absolute;top:.2rem;right:1rem;font-family:var(--serif);font-size:4.5rem;line-height:1;color:var(--stone-2)}
.review blockquote{margin:var(--sp-2) 0 var(--sp-3);font-size:var(--fs-body);color:var(--ink-2);line-height:1.7}
.review figcaption{margin-top:auto;font-weight:700;font-size:var(--fs-label);letter-spacing:var(--track-label);line-height:1.5;text-transform:uppercase;color:var(--ink)}
.review figcaption span{display:block;font-weight:500;letter-spacing:.06em;text-transform:none;color:var(--muted);font-size:var(--fs-small)}
.review .stars{color:var(--ink)}
@media (min-width:760px){.reviews{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,1fr);overflow:visible}}
@media (min-width:1080px){.reviews{grid-template-columns:repeat(6,1fr)}.review{grid-column:span 2}.review:nth-child(4){grid-column:2/span 2}}
.review-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin:var(--sp-4) 0 var(--sp-3)}
.review-links + .fine{margin-bottom:0}

/* Areas: neighborhood-style tiles */
.area-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);grid-template-columns:1fr}
.area-list li{background:#fff;display:flex;flex-direction:column;border-top:3px solid var(--ink);padding:var(--sp-3) var(--sp-3) var(--sp-3) 1.75rem;position:relative}
.area-list li::before{content:"";position:absolute;left:0;top:var(--sp-3);bottom:var(--sp-3);width:1px;background:var(--line)}
.area-list strong{font-family:var(--sans);font-size:var(--fs-small);font-weight:700;letter-spacing:var(--track-label);line-height:1.5;margin-bottom:.25rem;text-transform:uppercase;color:var(--ink)}
.area-list span{color:var(--muted);font-size:var(--fs-small);line-height:1.55}
@media (min-width:600px){.area-list{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.area-list{grid-template-columns:repeat(4,1fr)}}

/* Contact */
.contact-grid{display:grid;gap:var(--sp-5)}
.contact-list{list-style:none;padding:0;margin:var(--sp-4) 0 0}
.contact-list li{display:grid;grid-template-columns:40px 1fr;gap:.25rem .9rem;align-items:start;margin-bottom:var(--sp-3)}
.contact-list li:last-child{margin-bottom:0}
.contact-list svg{grid-row:span 2;width:30px;height:30px;color:var(--ink);margin-top:.2rem}
.ci-label{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--taupe-dark);line-height:1.4}
.contact-list a,.contact-list address{font-size:var(--fs-lead);font-weight:700;text-decoration:none;word-break:break-word;font-style:normal;line-height:1.45}
.form{background:#fff;padding:var(--sp-4) var(--sp-3);border:1px solid var(--stone-2)}
.form h3{font-size:var(--fs-h3);margin-bottom:var(--sp-3)}
.field{display:flex;flex-direction:column;margin-bottom:var(--sp-3);flex:1}
.field-row{display:flex;flex-direction:column;gap:0}
.field label{font-weight:700;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.3rem}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;padding:.7rem .1rem;border:0;border-bottom:1.5px solid #9a948a;border-radius:0;background:transparent;color:var(--ink);width:100%}
.field textarea{border:1.5px solid #9a948a;padding:.7rem .8rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.hp{position:absolute;left:-9999px}
.form .fine{margin:var(--sp-2) 0 0}
.form .btn-block{margin-top:var(--sp-1)}
@media (min-width:600px){.field-row{flex-direction:row;gap:var(--sp-3)}.form{padding:var(--sp-4)}}
@media (min-width:900px){.contact-grid{grid-template-columns:1fr 1.1fr;gap:4.5rem;align-items:start}.form{padding:var(--sp-5)}}

/* Footer (light, like the office site) */
.site-footer{background:var(--stone);color:var(--ink);padding:var(--sp-5) 0 var(--sp-4);font-size:var(--fs-body);border-top:1px solid var(--stone-2)}
.site-footer a{color:var(--ink);text-underline-offset:3px}
.site-footer p{margin:0 0 .5rem}
.footer-top{display:grid;gap:var(--sp-4);padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.f-brand{display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem}
.f-name{display:flex;flex-direction:column;line-height:1}
/* Footer brokerage >= 50% of footer agent-name size */
.f-agent{font-size:2.4rem}
.f-realtor{font-size:.62rem;margin-top:.2rem}
.f-broker{font-family:var(--sans);font-weight:700;font-size:1.4rem;line-height:1.2;margin:0 0 .3rem}
.f-lic{font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.f-head{font-family:var(--sans);font-size:var(--fs-label);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin-bottom:.9rem!important;padding-bottom:.55rem;position:relative}
.f-head::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--yellow);box-shadow:0 0 0 .5px rgba(0,0,0,.08)}
.f-col{min-width:0}
.site-footer .nw{white-space:nowrap}
.f-lines{font-size:var(--fs-small);line-height:1.6;color:var(--ink-2);margin:0 0 .35rem!important;overflow-wrap:break-word}
.f-bname{margin:0 0 .4rem!important;line-height:1.3}
.f-bname strong{font-family:var(--sans);font-weight:700;font-size:1.2rem;color:var(--ink)}
.f-trec{font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.site-footer address{font-style:normal}
.trec-links{display:flex;flex-direction:column;gap:.75rem;padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.trec-links a{font-size:var(--fs-small);font-weight:700;line-height:1.5}
.footer-bottom{padding-top:var(--sp-3)}
.marks{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.eho,.realtor-mark{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.1em;margin:0!important}
.site-footer .fine{color:#4a4a4a;font-size:var(--fs-small);max-width:95ch}
@media (min-width:640px){.footer-top{grid-template-columns:1fr 1fr;column-gap:2.5rem}}
@media (min-width:1000px){.footer-top{grid-template-columns:1.35fr .9fr .75fr 1.4fr;column-gap:2.75rem}.f-col:not(.f-col-brand){padding-top:.9rem}}
@media (min-width:760px){.trec-links{flex-direction:row;gap:2.5rem}}

/* Thank-you page */
.thanks{min-height:58vh;display:flex;align-items:center;text-align:center;background:var(--cream)}
.thanks .wrap{max-width:640px;padding:var(--section-y) 0}
.thanks .lead{margin-inline:auto;color:var(--ink)}
.thanks .ctas{justify-content:center;margin-bottom:0}
.thanks h1{font-size:clamp(2rem,5vw,3rem);text-transform:uppercase;letter-spacing:.03em}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.tile img{transition:none}}
a[href^="tel:"]{white-space:nowrap}
@media (max-width:899px){
  .hero{background:linear-gradient(180deg,rgba(15,15,15,.72) 0%,rgba(15,15,15,.8) 100%),url("living.webp") center/cover no-repeat}
  .hero-photo{max-width:260px}
}
/* Signature sub-line fit: stack "REALTOR®" over "The Escalante Group" in the header where the nav is tight */
@media (min-width:1060px) and (max-width:1259px){.logo-realtor{width:min-content;letter-spacing:.24em}}


/* The Escalante Group logo (image only, not a link; sized modestly so eXp Realty stays more prominent) */
.team-logo{flex:none;display:block;width:44px;height:44px;object-fit:contain}
.team-logo-footer{width:48px;height:48px}
@media (max-width:420px){.team-logo-header{width:34px;height:34px}}

/* Team section: "Meet the Team Behind Your Move" (photos/names/titles from Cindy's guide; team name plain text, no links) */
.team-section .section-head{max-width:760px}
.team-section .section-head p:not(.eyebrow){color:var(--ink-2)}
.team-grid{list-style:none;margin:0 auto;padding:0;display:grid;gap:var(--sp-5) var(--sp-4);grid-template-columns:1fr;max-width:900px}
.team-member{text-align:center;margin:0 auto;width:100%;max-width:260px}
.team-member img{display:block;margin:0 auto;width:140px;height:auto;max-width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 25%;background:var(--stone-2);box-shadow:8px 8px 0 var(--stone-2);border-bottom:3px solid var(--yellow)}
.tm-name{margin:var(--sp-3) 0 .25rem;font-family:var(--sans);font-weight:700;font-size:var(--fs-small);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);line-height:1.4}
.tm-title{margin:0;font-family:var(--sans);font-weight:500;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--taupe-dark);line-height:1.5}
.team-broker{text-align:center;margin:2.75rem auto 0;font-size:.9rem;color:var(--muted);max-width:60ch}
.team-broker strong{color:var(--ink);font-weight:700}
@media (min-width:600px){.team-grid{grid-template-columns:repeat(3,1fr)}.team-member{max-width:none}}
@media (min-width:900px){.team-member img{width:172px}}
@media (min-width:600px) and (max-width:899px){.tm-name{letter-spacing:.12em}.tm-title{letter-spacing:.1em}}