
/* Layout: navy masthead + hero band, bone body with alternating navy/plum bands; left-aligned, sharp corners, thin blue rules */
:root{
  --navy:#101B2D; --navy-2:#17253C; --blue:#1E8FFF; --blue-ink:#0B6FD6;
  --bone:#F7F5F1; --bone-2:#EDE9E1; --ink:#14161A; --plum:#3E2E52;
  --muted:#5A5F6B; --line:#D9D3C7; --on-navy:#F7F5F1; --on-navy-muted:#AEB7C6;
  --display:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1160px;
}
*{box-sizing:border-box}
body{background:var(--bone);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--navy)}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.12;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--navy);color:var(--on-navy);border-bottom:1px solid rgba(30,143,255,.35)}
.top .wrap{display:flex;align-items:center;gap:24px;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.brand svg{flex:none}
.brand-text{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;line-height:1.15;min-width:0}
.brand-name,.brand-sub{font-family:var(--display);font-weight:800;letter-spacing:.08em;font-size:.95rem;color:var(--on-navy);text-transform:uppercase}
.brand-div{width:1px;height:18px;background:var(--blue)}
nav.main{display:flex;gap:22px;margin-left:auto;font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.04em}
nav.main a{text-decoration:none;color:var(--on-navy);opacity:.88}
nav.main a:hover{opacity:1;color:var(--blue)}
.phone-pill{display:flex;align-items:center;gap:10px;color:var(--on-navy);text-decoration:none;white-space:nowrap}
.phone-pill .ic{width:34px;height:34px;border-radius:50%;background:var(--blue);display:grid;place-items:center;flex:none;transition:background .15s}
.phone-pill:hover .ic{background:var(--blue-ink)}
.phone-pill .tx{display:flex;flex-direction:column;line-height:1.1}
.phone-pill .lb{font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-muted)}
.phone-pill .nm{font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.02em}
nav.main a{white-space:nowrap}
.brand-text{flex-direction:column;align-items:flex-start;gap:3px}.brand-div{display:none}
@media (max-width:1180px){nav.main{gap:16px;font-size:.78rem}.brand-name,.brand-sub{font-size:.85rem}}
@media (max-width:420px){.brand-name,.brand-sub{font-size:.7rem!important}.phone-pill{gap:7px}.phone-pill .nm{font-size:.74rem!important}.brand svg{width:34px;height:34px}}

@media (max-width:900px){.top .wrap{flex-wrap:wrap;row-gap:10px}.phone-pill{margin-left:auto}nav.main{order:3;width:100%;margin-left:0;overflow-x:auto;gap:18px;padding-bottom:2px;white-space:nowrap}}
@media (max-width:560px){.brand-text{flex-direction:column;align-items:flex-start;gap:2px}.brand-div{display:none}.brand-name,.brand-sub{font-size:.8rem}.phone-pill .lb{display:none}.phone-pill .nm{font-size:.82rem}.phone-pill .ic{width:30px;height:30px}}

/* Hero */
.hero{background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-40px;width:520px;height:520px;background:radial-gradient(closest-side,rgba(62,46,82,.75),transparent);pointer-events:none}
.hero .wrap{position:relative;z-index:1;padding-block:72px 64px;display:grid;grid-template-columns:1.25fr .9fr;gap:56px;align-items:end}
.hero h1{font-size:clamp(2.2rem,5.2vw,4rem);font-weight:800;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero .lede{margin-top:18px;font-size:1.12rem;color:var(--on-navy-muted);max-width:34ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;padding:14px 20px;text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-ink)}
.btn-ghost{border-color:rgba(247,245,241,.4);color:var(--on-navy);background:transparent}
.btn-ghost:hover{border-color:var(--on-navy)}
.search-card{background:var(--bone);color:var(--ink);padding:24px;border-top:3px solid var(--blue)}
.search-card h2{font-size:1.05rem;font-weight:700;margin-bottom:14px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fgrid .full{grid-column:1/-1}
label.f{display:flex;flex-direction:column;gap:4px;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.f input,.f select{font:inherit;font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--ink);background:#fff;border:1px solid var(--line);padding:10px 11px;border-radius:0;width:100%;min-width:0}
.search-card .btn{width:100%;justify-content:center;margin-top:12px}
.note{font-size:.78rem;color:var(--muted);margin-top:10px}
.note[data-state="on"]{color:var(--blue-ink);font-weight:600}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:36px;padding-block:52px 44px}}

/* Strip */
.strip{background:var(--navy-2);color:var(--on-navy)}
.strip .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding-block:0}
.strip div{padding:18px 20px 18px 0;font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-navy-muted)}
.strip strong{color:var(--on-navy);display:block;font-size:.95rem;letter-spacing:.02em;text-transform:none}
@media (max-width:700px){.strip .wrap{grid-template-columns:1fr}.strip div{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}}

/* Sections */
section.s{padding-block:68px}
section.reviews{background:var(--navy);color:var(--on-navy)}
section.reviews .s-head{margin-bottom:24px}
section.reviews .s-head p{color:var(--on-navy-muted)}
section.reviews .btn[style]{background:var(--bone)!important;color:var(--navy)!important}
@media (max-width:800px){section.s{padding-block:52px}}
.s-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:36px}
.s-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;margin-top:10px}
.s-head p{color:var(--muted);max-width:52ch}
@media (max-width:800px){.s-head{grid-template-columns:1fr;gap:14px}}

/* Buy / Sell */
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.side{background:#fff;border:1px solid var(--line);padding:36px;display:flex;flex-direction:column;gap:18px;min-width:0}
.side.sell{background:var(--plum);color:var(--on-navy);border-color:var(--plum)}
.side h3{font-size:1.6rem;font-weight:800}
.side .sub{color:var(--muted)}
.side.sell .sub{color:#CFC6DD}
.side ol{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:step}
.side li{counter-increment:step;display:grid;grid-template-columns:34px 1fr;gap:10px;padding:13px 0;border-top:1px solid var(--line)}
.side.sell li{border-top-color:rgba(255,255,255,.16)}
.side li::before{content:counter(step,decimal-leading-zero);font-family:var(--display);font-weight:700;font-size:.8rem;color:var(--blue);padding-top:2px}
.side.sell li::before{color:#8FC6FF}
.side li b{font-weight:600}
.side .btn{align-self:flex-start;margin-top:auto}
.side:not(.sell) .btn{background:var(--navy);color:var(--on-navy)}
.side:not(.sell) .btn:hover{background:var(--ink)}
.side.sell .btn{background:var(--bone);color:var(--plum)}
@media (max-width:820px){.split{grid-template-columns:1fr}.side{padding:26px}}

/* Principles */
.princ{background:var(--bone-2)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.pgrid h3{font-size:1.15rem;font-weight:700;margin-bottom:10px;padding-top:16px;border-top:2px solid var(--navy)}
.pgrid p{color:var(--muted)}
@media (max-width:800px){.pgrid{grid-template-columns:1fr;gap:28px}}

/* Areas */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.area{border-top:3px solid var(--blue);padding-top:18px;min-width:0}
.area .county{font-family:var(--display);font-size:1.3rem;font-weight:800}
.area .meta{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{font-size:.85rem;font-weight:500;padding:7px 12px;border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--ink)}
.chip:hover{border-color:var(--blue);color:var(--blue-ink)}
@media (max-width:800px){.areas{grid-template-columns:1fr}}

/* About */
.about{background:var(--navy);color:var(--on-navy)}
.about .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.portrait{display:block;width:100%;aspect-ratio:4/5;max-width:100%;height:auto;object-fit:cover;object-position:50% 20%;background:var(--navy-2);border:1px solid rgba(30,143,255,.35)}
.about h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;margin:10px 0 18px}
.about p{color:var(--on-navy-muted);max-width:58ch}
.about p+p{margin-top:14px}
.about .sig{margin-top:22px;font-family:var(--display);font-weight:700;color:var(--on-navy);letter-spacing:.04em}
@media (max-width:820px){.about .wrap{grid-template-columns:1fr;gap:32px}.portrait{max-width:420px;margin-inline:auto}}

/* Value form */
.value .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.value h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;margin:10px 0 16px}
.value p.lead{color:var(--muted);max-width:46ch}
.value ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.value li{padding-left:22px;position:relative}
.value li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--blue)}
.vform{background:#fff;border:1px solid var(--line);padding:28px}
.vform .btn{background:var(--blue);color:#fff;width:100%;justify-content:center;margin-top:14px}
@media (max-width:820px){.value .wrap{grid-template-columns:1fr;gap:32px}}

/* Footer */
footer{background:var(--ink);color:var(--on-navy-muted);font-size:.85rem}
footer .wrap{padding-block:48px 36px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}
footer h4{font-family:var(--display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy);margin:0 0 12px}
footer a{text-decoration:none}
footer a:hover{color:var(--blue)}
footer .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:20px;font-size:.75rem;line-height:1.6;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.eho{display:inline-flex;align-items:center;gap:8px}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
