/* MPS Installs — v3 "Field Notes"
   Modelled on the typographic/grid end of Siteinspire's energy category (Field by Ragged Edge, Numbered's work):
   white paper, black type, one flat ink-blue, hairline rules, numbered sections, photography given the full width.
   No gradients, no glass, no glow, no icon cards. Headline: Archivo (Omnibus-Type) · Body: Source Sans 3 (Adobe). */
@import url("style.css");
:root{
  --bg:#FFFFFF; --bg-2:#F4F4F2; --ink:#111111;
  --sun:#1D3BE6; --sun-2:#1D3BE6; --sun-soft:rgba(29,59,230,.08);
  --cell:#1D3BE6; --cell-soft:rgba(29,59,230,.08);
  --line:#111111; --line-soft:rgba(17,17,17,.15);
  --glass:#fff; --glass-strong:#fff; --radius:0; --radius-sm:0; --shadow:none;
  --h:"Archivo",Helvetica,Arial,sans-serif; --b:"Source Sans 3","Source Sans Pro",Helvetica,Arial,sans-serif;
  --max:1280px;
}
body{background:#fff;color:var(--ink);font-size:18px;line-height:1.5}
body::before,body::after{display:none}
p{opacity:1;color:#333}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.03em;font-variation-settings:"wdth" 100;opacity:1}
h1{font-size:clamp(2.8rem,8.4vw,7.2rem);line-height:.94;letter-spacing:-.04em}
h2{font-size:clamp(1.9rem,4vw,3.4rem);line-height:1;opacity:1}
h3{font-size:1.35rem;letter-spacing:-.02em}
.grad-text{background:none;-webkit-text-fill-color:currentColor;color:var(--sun)}
.eyebrow{font-family:var(--h);font-weight:700;font-size:.72rem;letter-spacing:.16em;opacity:1;color:#111;margin-bottom:1em}
.eyebrow::before{display:none}
.num{font-family:var(--h);font-weight:800;font-size:.8rem;letter-spacing:.08em;color:var(--sun);display:block;margin-bottom:10px}
.rulebar{border-top:1px solid var(--line)}
.wrap{padding:0 clamp(16px,3vw,40px)}
section{padding:clamp(48px,7vw,96px) 0}

/* nav */
.nav{background:#fff;backdrop-filter:none;border-bottom:1px solid var(--line)}
.nav .wrap{height:64px}
.logo{font-weight:800;letter-spacing:-.03em;font-size:1.1rem}
.logo .mark{background:#111;border-radius:0;box-shadow:none;width:28px;height:28px}
.logo .mark svg{stroke:#fff;width:16px;height:16px}
.logo small{letter-spacing:.14em;font-weight:600}
.nav-links{font-family:var(--h);font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;gap:22px}
.nav-links a{opacity:.7}
.nav-links a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:6px}
.nav-phone{font-family:var(--h);font-weight:700;letter-spacing:-.01em}
.burger{border-radius:0;border-color:#111;background:#fff}
.mobile-menu{background:#fff;font-family:var(--h)}
.mobile-menu a{border-color:var(--line-soft)}

/* buttons: flat, square, one colour */
.btn{border-radius:0;font-family:var(--h);font-weight:700;letter-spacing:-.01em;padding:16px 22px}
.btn-sun{background:var(--sun);color:#fff;box-shadow:none}
.btn-sun::after{display:none}
.btn-sun:hover{background:#1330C4;transform:none;box-shadow:none}
.btn-ghost{background:transparent;border:1px solid #111;color:#111;opacity:1}
.btn-ghost:hover{background:#111;color:#fff}
.btn-sm{padding:10px 14px;font-size:.85rem}
.tlink{font-family:var(--h);font-weight:700;color:var(--sun);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.tlink:hover{color:#111}

/* hero: typographic, then the photograph at full width */
.hero3{padding:clamp(32px,5vw,72px) 0 0}
.hero3 h1{max-width:18ch;margin-bottom:.35em}
.hero3-row{display:grid;gap:24px;align-items:end;border-top:1px solid var(--line);padding-top:22px;margin-top:8px}
@media(min-width:900px){.hero3-row{grid-template-columns:1.2fr .8fr;gap:64px}}
.hero3 .lede{font-size:clamp(1.1rem,1.6vw,1.35rem);max-width:34em;color:#333;margin:0}
.hero3 .cta-col{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.hero3 .cta-col .btn{width:100%;max-width:360px;justify-content:space-between}
.hero3 .fine{font-size:.85rem;color:#666;margin:0}
.photo{margin:clamp(28px,4vw,56px) 0 0;position:relative}
.photo img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;display:block;filter:saturate(.92)}
.photo figcaption{display:flex;justify-content:space-between;gap:16px;font-size:.8rem;color:#666;padding:10px 0;border-bottom:1px solid var(--line);font-family:var(--h);letter-spacing:.02em}
.photo figcaption b{color:#111;font-weight:700}

/* fact row */
.facts3{display:grid;border-top:1px solid var(--line)}
@media(min-width:760px){.facts3{grid-template-columns:repeat(3,1fr)}}
.facts3 div{padding:22px 0;border-bottom:1px solid var(--line)}
@media(min-width:760px){.facts3 div{padding:26px 26px 26px 0;border-bottom:0;border-right:1px solid var(--line-soft)}.facts3 div:last-child{border-right:0}.facts3 div+div{padding-left:26px}}
.facts3 b{display:block;font-family:var(--h);font-weight:800;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.04em;line-height:1;margin-bottom:8px}
.facts3 p{margin:0;font-size:.95rem;color:#444}

/* numbered sections */
.sec{display:grid;gap:28px;border-top:1px solid var(--line);padding-top:28px}
@media(min-width:900px){.sec{grid-template-columns:1fr 1fr;gap:64px}}
.sec img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:saturate(.92);margin:0}
.sec.flip img{order:2}
.sec .body p{max-width:38em}
.sec ul{list-style:none;padding:0;margin:18px 0 0;border-top:1px solid var(--line-soft)}
.sec li{padding:12px 0;border-bottom:1px solid var(--line-soft);display:grid;grid-template-columns:20px 1fr;gap:12px;color:#222}
.sec li::before{content:"";width:9px;height:9px;background:#111;margin-top:9px}

/* ledger prices */
.ledger{border-top:2px solid #111}
.ledger-row{display:grid;gap:8px 20px;padding:22px 0;border-bottom:1px solid var(--line-soft);align-items:center}
@media(min-width:800px){.ledger-row{grid-template-columns:1.3fr 1fr 1fr 1fr auto}}
.ledger-row h3{margin:0}
.ledger-row .k{font-family:var(--h);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#666;display:block;margin-bottom:2px}
.ledger-row .price{font-family:var(--h);font-weight:800;font-size:2.4rem;letter-spacing:-.04em;line-height:1}
.ledger-row .price small{font-family:var(--b);font-size:.8rem;font-weight:400;color:#666;display:block;letter-spacing:0;margin-top:4px}
.ledger-row .pop{font-family:var(--h);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--sun);padding:4px 7px;margin-left:10px;vertical-align:middle}

/* sizer as a ruled form */
.sizer3{border:1px solid #111;padding:0;display:grid}
@media(min-width:900px){.sizer3{grid-template-columns:1fr 1fr}}
.sizer3 .controls{padding:24px;border-bottom:1px solid #111}
@media(min-width:900px){.sizer3 .controls{border-bottom:0;border-right:1px solid #111}}
.sizer3 .ctrl label{font-family:var(--h);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;opacity:1;color:#111}
.sizer3 .ctrl label b{color:var(--sun)}
input[type=range]{background:linear-gradient(90deg,#111 var(--pct,50%),#ddd var(--pct,50%));height:2px;border-radius:0}
input[type=range]::-webkit-slider-thumb{border-radius:0;border:0;background:#111;width:16px;height:22px;box-shadow:none}
input[type=range]::-moz-range-thumb{border-radius:0;border:0;background:#111;width:16px;height:22px}
.seg{background:#fff;border:1px solid #111;border-radius:0;padding:0;gap:0}
.seg button{border-radius:0;border-right:1px solid #111;opacity:1;color:#111;font-family:var(--h);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:#111;color:#fff;box-shadow:none}
.toggle{font-family:var(--h);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;opacity:1}
.switch{border-radius:0;background:#ddd}.switch::after{border-radius:0;background:#111}.switch[aria-checked=true]{background:var(--sun)}.switch[aria-checked=true]::after{background:#fff}
.sizer3 .out{padding:24px;display:flex;flex-direction:column;gap:0}
.sizer3 .readout{grid-template-columns:1fr;gap:0;margin:0}
.sizer3 .readout div{display:flex;justify-content:space-between;align-items:baseline;background:none;border:0;border-bottom:1px solid var(--line-soft);border-radius:0;padding:12px 0}
.sizer3 .readout small{font-family:var(--h);letter-spacing:.1em;opacity:1;color:#666;margin:0}
.sizer3 .readout b{font-family:var(--h);font-weight:800;font-size:1.6rem;letter-spacing:-.03em}
.sizer3 .readout b.sun,.sizer3 .readout b.cell{color:#111}
.sizer3 .btn{margin-top:auto;width:100%;justify-content:space-between}
.sizer3 .star-foot{font-size:.78rem;color:#666;margin:12px 0 0}

/* areas as text columns */
.areas3{columns:2;column-gap:32px;font-size:1rem}
@media(min-width:700px){.areas3{columns:4}}
.areas3 a{display:block;padding:7px 0;border-bottom:1px solid var(--line-soft);break-inside:avoid}
.areas3 a small{color:#777;margin-left:6px}
.areas3 a:hover{color:var(--sun)}

/* faq */
details{background:#fff;border:0;border-bottom:1px solid var(--line-soft);border-radius:0;padding:0}
details:first-child{border-top:1px solid #111}
summary{font-family:var(--h);font-weight:700;font-size:1.05rem;opacity:1;padding:18px 0}
summary::after{border-color:#111;width:10px;height:10px}
details p{color:#333}

/* band */
.band{background:#111;color:#fff;border:0;border-radius:0;text-align:left;padding:clamp(32px,5vw,64px)}
.band::before{display:none}
.band h2{color:#fff;opacity:1}
.band p{color:#bbb;margin:0 0 24px}
.band .hero-ctas{justify-content:flex-start}
.band .btn-ghost{border-color:#fff;color:#fff}
.band .btn-ghost:hover{background:#fff;color:#111}

/* footer */
footer{background:#fff;border-top:1px solid #111;color:#333}
footer h4{font-family:var(--h);color:#111;opacity:1;font-weight:700}
footer .logo .mark{background:#111}
.foot-bottom{border-color:var(--line-soft);color:#666;opacity:1}
.mobile-cta{background:#fff;border-top:1px solid #111}
.form-card{background:#fff;border:1px solid #111;border-radius:0;box-shadow:none}
.field input,.field select,.field textarea{background:#fff;border:1px solid #111;border-radius:0;color:#111}
.field select option{background:#fff}
.form-ok{background:var(--sun-soft);border-color:var(--sun);border-radius:0}
.strip{border-top:1px solid #111;border-bottom:1px solid #111;background:#fff}
.strip .wrap{padding-top:22px;padding-bottom:22px}
.strip b{font-family:var(--h);font-weight:800;color:#111;letter-spacing:-.03em}
.strip p{color:#444;font-size:.92rem}
.page-hero p{color:#333}
.icon{background:#111;color:#fff;border-radius:0}.icon.cell{background:var(--sun);color:#fff}
.card h3{margin-top:14px}
.local-facts div{background:#fff;border:1px solid #111;border-radius:0}
.local-facts b{color:#111}
.map{border-radius:0;border-color:#111}
.map iframe{filter:grayscale(.2)}
.area-list a{background:#fff;border:1px solid #111;border-radius:0}
.area-list a:hover{background:#111;color:#fff}
.region-h{color:var(--sun);font-family:var(--h);font-weight:800;opacity:1}
.crumbs{color:#666;opacity:1}
.pkg .price{color:#111}
.pkg .spec b{color:#111}
.pkg.popular{background:#fff;border-color:#111}
.timeline .step{border:1px solid #111;border-radius:0;background:#fff}
.step .when{color:var(--sun)}
.cells i{border-radius:0;background:#e5e5e5}.cells i.on{background:#111}
.split li{color:#222}
.split li::before{border-color:#111;background:#fff}
.hero-ctas .btn-ghost{background:#fff}
.reveal{opacity:1;transform:none}
@media(max-width:700px){.photo img{aspect-ratio:4/3}}

.vatbar{background:#111;color:#fff}.vatbar a{color:#fff}.progress i.on{background:#111}.wstep legend{font-family:var(--h);font-weight:800}
@media(min-width:900px){.nav-links{font-size:.76rem;gap:16px}}
