:root{
  --paper:#F8F8F7; --tint:#EEEEED; --brand:#75787B; --label:#5F6265;
  --muted:#6E7073; --faint:#939598; --line:#E2E2E0; --ink:#2B2D2E; --rule:#E6E6E4;
  --serif:'Prata',Didot,'Bodoni MT',Georgia,serif;
  --sans:'Jost','Avenir Next',Optima,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none;transition:color .2s}
a:hover{color:var(--brand)}
img{display:block;max-width:100%}
.wrap{padding:0 96px}
.eyebrow{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--label)}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
p{margin:0}

/* ---------- header ----------
   The full header sits in normal flow and simply scrolls away — it never
   animates or changes height, so the page never shifts under the reader.
   The compact bar is position:fixed and therefore out of flow entirely;
   it slides down from above once the full header has cleared the viewport.
   Nothing is ever visible twice, and nothing reflows. */
.hdr{position:relative;z-index:40;background:var(--paper)}
.hdr-full{display:flex;flex-direction:column;align-items:center;gap:9px;padding:26px 0 20px}
.hdr-full .mark{width:278px}
.hdr-tag{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:#828588}
.nav{display:flex;gap:44px;margin-top:18px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.nav a.on{color:var(--label);border-bottom:1px solid var(--brand);padding-bottom:3px}
/* min-height, not height: the bar is parked with translateY(-100%), which shifts
   by the box height. With a fixed height the nav wraps out of the box on narrow
   screens and that overflow stays on screen above the logo. Letting the box grow
   keeps the parking offset honest at every width. */
.hdr-mini{position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;min-height:74px;padding:0 34px;
  border-bottom:1px solid var(--line);background:rgba(248,248,247,.94);
  -webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px);
  transform:translateY(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  will-change:transform;box-shadow:0 1px 14px rgba(0,0,0,0)}
.hdr-mini .mark{width:115px}
.hdr-mini .nav{margin-top:0;gap:36px;font-size:11px}
body.scrolled .hdr-mini{transform:translateY(0);box-shadow:0 1px 14px rgba(0,0,0,.06)}
@media (prefers-reduced-motion:reduce){.hdr-mini{transition:none}}

/* ---------- hero ---------- */
.hero{position:relative;height:760px;overflow:hidden;background:#2B2D2E}
.hero img{position:absolute;inset:0;width:100%;height:760px;object-fit:cover;
  opacity:0;transition:opacity 1.4s ease-in-out;will-change:opacity}
.hero img.on{opacity:1}
@media (prefers-reduced-motion:reduce){.hero img{transition:none}}
.hero .scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(16,14,12,.34) 0%,rgba(16,14,12,.10) 30%,rgba(16,14,12,.40) 58%,rgba(16,14,12,.66) 80%,rgba(16,14,12,.80) 100%)}
.hero .inner{z-index:3;position:absolute;left:0;right:0;bottom:96px;display:flex;flex-direction:column;align-items:center;gap:26px;padding:0 120px}
.hero h1{font-size:58px;line-height:1.18;color:#FCFCFC;text-align:center;max-width:900px;text-wrap:pretty;text-shadow:0 1px 2px rgba(0,0,0,.4),0 4px 30px rgba(0,0,0,.55)}
.hero .sub{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:rgba(252,252,252,.92);text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 16px rgba(0,0,0,.5)}
.btn-ghost{border:1px solid rgba(252,252,252,.85);color:#FCFCFC;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);padding:15px 40px;font-size:11px;letter-spacing:.26em;text-transform:uppercase}
.btn-ghost:hover{background:rgba(252,252,252,.12);color:#FCFCFC}
.dots{z-index:3;position:absolute;left:0;right:0;bottom:40px;display:flex;justify-content:center;gap:10px}
.dots i{width:28px;height:2px;background:rgba(252,252,252,.4);display:block;cursor:pointer;transition:background .3s}
.dots i.on{background:#FCFCFC}

/* ---------- blocks ---------- */
.statement{display:flex;flex-direction:column;align-items:center;gap:26px;padding:96px 260px 56px;text-align:center}
.statement h2{font-size:27px;line-height:1.62;color:#3A3C3E;text-wrap:pretty}
.statement p{font-size:15px;line-height:1.95;color:var(--muted);font-weight:300;max-width:700px;text-wrap:pretty}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.split img{height:620px;width:100%;object-fit:cover}
.split .body{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:0 96px;background:var(--tint)}
.split h3{font-size:34px;line-height:1.32}
.meta{display:flex;gap:40px;font-size:13px;color:#55575A;font-weight:300}
.price{font-family:var(--serif);font-size:26px;margin-top:4px}
.link-u{border-bottom:1px solid var(--brand);color:var(--label);padding-bottom:5px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;align-self:flex-start}
.btn{border:1px solid #C9CACB;padding:15px 40px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#4E5052;display:inline-block}
.btn:hover{border-color:var(--brand);color:var(--ink)}
.btn-solid{background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:16px 42px;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;display:inline-block}
.btn-solid:hover{background:#3A3C3E;color:var(--paper)}

/* ---------- team ---------- */
.team-sec{display:flex;flex-direction:column;gap:38px;padding:56px 0 96px}
.team-head{display:flex;flex-direction:column;align-items:center;gap:16px;padding:0 96px;text-align:center}
.team-head h2{font-size:36px}
.team-head p{font-size:15px;color:var(--muted);font-weight:300;max-width:620px;line-height:1.85}
.rail{overflow-x:auto;padding-left:96px;scrollbar-width:none;scroll-behavior:auto;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail-inner{display:flex;gap:30px;padding-right:96px}
.card{flex:0 0 268px}
.card img{width:268px;height:340px;object-fit:cover;object-position:center top}
.card .nm{font-family:var(--serif);font-size:19px;margin-top:16px}
.card .rl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:6px;line-height:1.6}
.rail-ctl{display:flex;align-items:center;gap:26px;padding:0 96px}
.arrow{width:44px;height:44px;border:1px solid #C9CACB;display:flex;align-items:center;justify-content:center;cursor:pointer;background:none}
.arrow:hover{border-color:var(--brand)}
.track{flex:1;height:1px;background:var(--line);position:relative}
.track span{position:absolute;left:0;top:0;height:1px;background:var(--brand);width:22%;transition:width .3s}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 30px}
.grid4 .card{flex:none}
.grid4 .card img{width:100%;height:380px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}

/* ---------- page furniture ---------- */
.page-head{display:flex;flex-direction:column;align-items:center;gap:22px;padding:52px 300px 56px;text-align:center}
.page-head h1{font-size:46px;line-height:1.28}
.page-head p{font-size:15px;line-height:1.95;color:var(--muted);font-weight:300;text-wrap:pretty}
.prose{max-width:580px;margin-left:auto;margin-right:auto}
.prose p{font-size:18px;line-height:1.8;color:var(--muted);font-weight:300;text-wrap:pretty}
.prose .lead{font-family:var(--serif);font-size:26px;line-height:1.6;color:#3A3C3E}
.notice{background:var(--tint);border-left:3px solid var(--brand);padding:22px 26px;font-size:14px;line-height:1.85;color:#55575A;font-weight:300}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#E6E6E4;padding:74px 96px 54px;margin-top:0}
.ftr-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;align-items:start}
.ftr .mark{width:174px;filter:brightness(0) invert(1);opacity:.9}
.ftr .addr{font-size:12px;line-height:1.9;color:#A8AAAC;font-weight:300;margin-top:14px}
.ftr-nav{display:flex;flex-direction:column;gap:12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.ftr-nav a{color:#E6E6E4}
.ftr-nav a:hover{color:#fff}
.ftr .contact{display:flex;flex-direction:column;gap:12px;font-size:13px;color:#A8AAAC;font-weight:300}
.ftr hr{height:1px;background:#3C3E40;border:0;margin:46px 0 22px}
.ftr .fine{font-size:10px;letter-spacing:.14em;color:#747678}

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:20px;max-width:640px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--label)}
.field input,.field textarea{font-family:var(--sans);font-size:15px;font-weight:300;color:var(--ink);
  border:1px solid #D9D9D7;background:#fff;padding:14px 16px;border-radius:0}
/* iOS Safari zooms the whole page when a focused input is under 16px. */
@media (max-width:1100px){ .field input,.field textarea{font-size:16px} }
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand)}
.field textarea{min-height:150px;resize:vertical}

@media (max-width:1100px){
  .wrap,.rail,.rail-ctl,.team-head,.ftr{padding-left:32px;padding-right:32px}
  .rail-inner{padding-right:32px}
  .statement{padding:80px 32px 70px}
  .page-head{padding:64px 32px 48px}
  .split{grid-template-columns:1fr}
  .split .body{padding:48px 32px}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:1fr}
  .hero h1{font-size:38px}
  .hdr-full .mark{width:200px}
  .nav{gap:24px;font-size:11px;flex-wrap:wrap;justify-content:center}
  .ftr-cols{grid-template-columns:1fr;gap:34px}
}

/* ============================================================
   WordPress theme additions
   The prototype carried these as inline styles; as a real theme
   they belong in classes so they can be maintained in one place.
   ============================================================ */

.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.screen-reader-text:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;
  background:var(--paper);color:var(--ink);padding:12px 18px;z-index:200;border:1px solid var(--brand)}

.page-intro{max-width:620px;margin:0 auto}
.page-intro p{font-size:15px;line-height:1.95;color:var(--muted);font-weight:300;text-wrap:pretty}

/* --- agent profile --- */
.agent-head{display:grid;grid-template-columns:620px minmax(0,1fr)}
.agent-portrait{width:100%;height:720px;object-fit:cover;object-position:center top;display:block}
.agent-portrait.ph{display:flex;align-items:center;justify-content:center}
.agent-meta{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:0 96px}
.agent-meta h1{font-size:48px;line-height:1.2}
.backlink{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
.agent-role{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--label);line-height:1.7}
.rule{height:1px;background:var(--line);margin:10px 0}
.agent-contact{display:flex;flex-direction:column;gap:13px;font-size:14px;font-weight:300}
.agent-contact a{color:#55575A}
.agent-bio{display:flex;flex-direction:column;gap:24px;padding:80px 32px 84px}
.agent-listings{padding-bottom:104px}
.section-head{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--rule);padding-bottom:22px;margin-bottom:40px}
.section-head h2{font-size:30px}
.section-note{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* the block editor wraps paragraphs; keep bio type consistent either way */
.agent-bio p,.prose .wp-block-paragraph{font-size:18px;line-height:1.85;color:var(--muted);font-weight:300;text-wrap:pretty}
.agent-bio{max-width:880px;margin-left:auto;margin-right:auto}

@media (max-width:1100px){
  .agent-head{grid-template-columns:1fr}
  .agent-portrait{height:520px}
  .agent-meta{padding:48px 32px}
  .agent-meta h1{font-size:36px}
  .agent-bio{padding:56px 32px 64px}
  .section-head{flex-direction:column;gap:10px;align-items:flex-start}
}

/* --- contact --- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:80px;padding:0 96px 110px}
.contact-grid .form{max-width:none}          /* let the fields use the column */
.contact-details{display:flex;flex-direction:column;gap:26px}
.contact-details p{font-size:15px;line-height:1.95;color:var(--muted);font-weight:300;margin-top:12px}
.contact-details a{color:var(--muted)}
.contact-details a:hover{color:var(--ink)}
.charles-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice-sent{background:#EEF3EF;border-left:3px solid #1E7A46;padding:18px 22px;margin-bottom:26px;
  font-size:14px;line-height:1.8;color:#33453B;font-weight:300}
.notice-failed{background:#FBF0EF;border-left:3px solid #A32B25;padding:18px 22px;margin-bottom:26px;
  font-size:14px;line-height:1.8;color:#5A3230;font-weight:300}
.form button.btn-solid{align-self:flex-start;cursor:pointer;font-family:var(--sans)}
@media (max-width:1100px){ .contact-grid{grid-template-columns:1fr;gap:44px;padding:0 32px 80px} }

/* --- page banner (a featured image on any page) --- */
.page-banner{margin:0 0 84px;position:relative}
.page-banner img{width:100%;height:620px;object-fit:cover;display:block}
.page-banner figcaption{padding:14px 96px 0;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
@media (max-width:1100px){
  .page-banner{margin-bottom:52px}
  .page-banner img{height:360px}
  .page-banner figcaption{padding:12px 32px 0}
}

/* prose headings, for pages with real structure like About */
.prose h2{font-family:var(--serif);font-size:27px;line-height:1.4;color:var(--ink);
  margin:52px 0 18px}
.prose h2:first-child{margin-top:0}
.prose p + p{margin-top:22px}
.prose .lede{font-family:var(--serif);font-size:23px;line-height:1.62;color:#3A3C3E}

/* --- deposits: one action, given room --- */
.deposit-action{display:flex;flex-direction:column;align-items:center;gap:18px;
  padding:16px 32px 96px}
.btn-lg{padding:22px 62px;font-size:12px;letter-spacing:.3em}
.deposit-hint{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.deposit-note{max-width:620px;margin:0 auto;padding:0 32px 110px;text-align:center;
  border-top:1px solid var(--line);padding-top:44px}
.deposit-note p{font-size:14px;line-height:1.9;color:var(--muted);font-weight:300;text-wrap:pretty}
@media (max-width:1100px){
  .deposit-action{padding:8px 32px 64px}
  .btn-lg{padding:20px 44px}
  .deposit-note{padding-bottom:72px}
}

/* --- full-width page body: room for listing grids, maps, tables --- */
.wide-body{max-width:1440px;margin:0 auto;padding:0 64px 110px}
.wide-body > p{max-width:620px;margin-left:auto;margin-right:auto;
  font-size:15px;line-height:1.95;color:var(--muted);font-weight:300;text-align:center}
@media (max-width:1100px){ .wide-body{padding:0 24px 80px} }

/* ---------- 404 ---------- */
.nf-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  max-width:1000px;margin:0 auto}
.nf-card{display:flex;flex-direction:column;gap:10px;padding:34px 32px;
  border:1px solid var(--line);background:var(--tint);transition:border-color .2s}
.nf-card:hover{border-color:var(--brand)}
.nf-t{font-family:var(--serif);font-size:21px;color:var(--ink)}
.nf-d{font-size:14px;line-height:1.8;color:var(--muted);font-weight:300}
.nf-home{display:flex;justify-content:center;margin-top:48px}
@media (max-width:1100px){
  .nf-links{grid-template-columns:1fr;gap:16px;padding:0 32px}
  .nf-card{padding:26px 24px}
  .nf-home{margin-top:36px}
}

/* ---------- narrow phones ---------- */
/* At 320-360px the nav sat flush against both screen edges. */
@media (max-width:400px){
  .nav{gap:22px;font-size:11px;flex-wrap:wrap;justify-content:center;padding:0 16px}
  .hdr-mini{padding:10px 18px;gap:14px}
  .hdr-mini .nav{gap:18px;font-size:10px;padding:0}
  .hdr-full{padding:22px 0 16px}
  .page-head{padding:44px 22px 40px}
  .page-head h1{font-size:34px}
}