@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

*{box-sizing:border-box}:root{--ink:#101f3b;--muted:#65728a;--blue:#3862ff;--line:#e2e8f1;--navy:#0b2039}.wr{font-family:Inter,Arial,sans-serif;color:var(--ink);overflow:hidden}.wr .shell{width:min(1180px,calc(100% - 48px));margin:auto}.wr .section{padding:76px 0}.wr em{display:block;font-style:normal;font-size:10px;letter-spacing:.14em;font-weight:900;color:var(--blue);margin-bottom:10px}.wr h1,.wr h2,.wr h3,.wr p{margin-top:0}.wr h1{font-size:49px;line-height:1.02;letter-spacing:-.045em}.wr h2{font-size:34px;line-height:1.08;letter-spacing:-.035em}.wr h3{font-size:17px}.wr p{font-size:14px;line-height:1.55;color:var(--muted)}.wr small{font-size:11px;color:#68768c}.center{text-align:center}.intro{max-width:780px;margin:0 auto 36px!important}.hero{background:linear-gradient(90deg,#fff 0 46%,#f0f5ff 100%)}.wr nav{height:64px;display:flex;align-items:center;gap:30px}.logo{font-size:19px;font-weight:900;color:var(--ink);text-decoration:none}.logo span{color:var(--blue)}.links{display:flex;gap:24px;margin-left:25px}.links a{font-size:11px;font-weight:700;color:#59677c;text-decoration:none}.topcta{margin-left:auto;background:var(--blue);color:#fff;padding:10px 17px;border-radius:7px;text-decoration:none;font-size:11px;font-weight:800}.heroGrid{display:grid;grid-template-columns:46% 54%;min-height:430px;align-items:center}.heroCopy{padding-right:30px}.heroCopy p{font-size:15px}.buttons{display:flex;gap:12px;margin:22px 0 14px}.btn{display:inline-flex;min-height:44px;align-items:center;padding:0 18px;border-radius:7px;text-decoration:none;font-size:12px;font-weight:800}.primary{background:var(--blue);color:#fff}.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.outline{background:#fff;color:var(--blue);border:1px solid #7691ff}.scene{height:420px;position:relative;background:radial-gradient(circle at 60% 15%,#a8c3a4,transparent 25%),linear-gradient(#e5e9e5 0 58%,#b59a7b 59%);overflow:hidden}.note{position:absolute;right:20px;top:18px;font:15px/1.25 cursive;transform:rotate(-5deg)}.laptop{position:absolute;width:80%;left:10%;bottom:35px;transform:rotate(-2deg)}.screen{border:9px solid #171c22;border-radius:10px 10px 4px 4px;overflow:hidden;background:#fff;box-shadow:0 24px 40px #0004}.fakeNav{height:35px;display:flex;align-items:center;padding:0 13px;font-size:7px;background:#fff}.fakeNav span{margin-left:auto;color:#64748b}.pool{height:220px;background:linear-gradient(120deg,#10253e 0 52%,#466574 52%);position:relative;overflow:hidden}.pool>div{position:absolute;z-index:2;padding:32px 23px;color:#fff}.pool h3{font-size:27px;line-height:1.05;margin:8px 0}.pool p{font-size:9px;color:#cbd7e2}.pool button,.roofHero button{border:0;background:#2588ff;color:#fff;border-radius:4px;padding:8px 11px;font-size:8px}.pool>i{position:absolute;width:55%;height:80%;right:-5%;bottom:-20%;background:linear-gradient(145deg,#83b6c1,#15536e);border-radius:50% 0 0;transform:skewY(-8deg)}.proof{height:32px;background:#10223a;color:#d8e3ee;display:flex;justify-content:space-around;align-items:center;font-size:7px}.base{height:15px;margin:0 -7%;background:linear-gradient(#d3d5d7,#888b8e);border-radius:0 0 50% 50%}.heroProof{height:70px;display:grid;grid-template-columns:repeat(3,1fr);align-items:center}.heroProof div{display:grid;grid-template-columns:35px 1fr}.heroProof i{grid-row:1/3;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#e8efff;color:var(--blue);font-style:normal}.heroProof b{font-size:10px}.heroProof span{font-size:8px;color:#77849a}.four{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.plain article{padding:10px 20px}.plain p,.cards p{font-size:12px}.ico{width:55px;height:55px;border-radius:50%;display:grid;place-items:center;margin:0 auto 13px;font-style:normal;font-weight:900}.blue{background:#e9efff;color:#3862ff}.green{background:#e5f7ef;color:#18ad67}.purple{background:#f0eaff;color:#7659df}.orange{background:#fff0e7;color:#f1762d}.soft{background:#fbfcfe}.split{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}.feature{padding-bottom:66px}.photo{height:285px;border-radius:10px;background:linear-gradient(135deg,#8d9d8b,#42544f 55%,#263844);position:relative;overflow:hidden}.scribble{position:absolute;left:18px;top:25px;color:#fff;font:18px/1.2 cursive;transform:rotate(-4deg)}.person{position:absolute;right:8%;bottom:-5%;width:135px;height:235px;background:#28343d;border-radius:60px 25px 0 0}.person:before{content:"";position:absolute;left:30px;top:-45px;width:55px;height:65px;border-radius:45%;background:#b68c72}.tablet{position:absolute;left:38%;bottom:22px;width:155px;height:108px;border:7px solid #171c21;border-radius:7px;background:#f8fafc;transform:rotate(10deg);padding:12px}.tablet b{font-size:9px}.tablet span{display:block;height:12px;background:#dce5ef;margin-top:6px}.improve h2{margin-bottom:28px}.cards{gap:16px;text-align:left}.cards article{background:#fff;border:1px solid #e5eaf1;border-radius:9px;padding:22px;box-shadow:0 7px 18px #0f1f3d0a}.sq{width:36px;height:36px;border-radius:7px;display:grid;place-items:center;font-style:normal;margin-bottom:12px}.dark{background:linear-gradient(110deg,#071a2e,#0c2945);color:#fff}.dark h2{color:#fff}.dark p{color:#c5d2df}.dark em{color:#83a8ff}.preserve{display:grid;grid-template-columns:1.25fr .75fr .42fr;gap:38px;align-items:center}.checks{background:#ffffff12;border-radius:8px;padding:17px}.checks span{display:block;padding:7px 0;border-bottom:1px solid #ffffff12;font-size:10px}.hand{font:16px/1.3 cursive;transform:rotate(-4deg)}.hand u{display:block;width:70px;height:3px;background:#27c873;margin:10px 0 0 12px}.approach{padding:60px 0!important}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:left}.three article{display:grid;grid-template-columns:65px 1fr;gap:14px}.three .ico{margin:0}.three p{font-size:12px}.process{background:linear-gradient(90deg,#f3f8ff,#eaf3ff)}.processHead{display:flex;justify-content:space-between;align-items:end}.processHead p{max-width:400px;font-size:11px}.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:28px}.timeline article{position:relative;border-top:1px solid #cbd9f1;padding-top:24px}.timeline article:not(:last-child):after{content:"→";position:absolute;right:-20px;top:13px;color:#7190ff;font-size:20px}.timeline b{position:absolute;top:-14px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-size:9px}.timeline h3{font-size:14px}.timeline p{font-size:11px}.homeOffer{background:#edf5ff}.block{display:block;margin-top:12px}.roofSite{border:1px solid #dbe4ef;border-radius:9px;overflow:hidden;background:#fff;box-shadow:0 10px 25px #0f1f3d12}.roofHero{height:215px;display:grid;grid-template-columns:1fr 1fr;padding:28px;background:linear-gradient(120deg,#10243d 0 52%,#a9b2b7 52%);color:#fff}.roofHero h3{font-size:27px}.house{position:relative}.house i{position:absolute;width:90%;height:85px;top:15%;background:#343b40;clip-path:polygon(50% 0,100% 100%,0 100%)}.house b{position:absolute;width:65%;height:90px;left:13%;top:48%;background:#dfd2bc}.roofProof{height:52px;display:grid;grid-template-columns:repeat(4,1fr);text-align:center;align-items:center}.roofProof b{font-size:12px}.roofProof small{display:block;font-size:6px}.pricing{background:#f9fbfe}.pricingGrid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px}.priceCard,.priceSide>article{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:25px;box-shadow:0 6px 18px #0f1f3d0a}.lists{display:grid;grid-template-columns:1fr 1fr}.lists li{font-size:11px;margin:6px 0}.lists li::marker{color:#19ad65}.priceSide{display:grid;gap:16px}.priceSide h2{font-size:25px}.testimonial{display:grid!important;grid-template-columns:50px 1fr;gap:13px}.avatar{width:47px;height:47px;border-radius:50%;display:grid;place-items:center;background:#dbe3ea;font-size:11px;font-weight:900}.testimonial p{font-size:12px;margin-bottom:5px}.testimonial small{display:block}.testimonial strong{display:block;color:#ffb400;margin-top:6px}.final{padding:68px 0;background:linear-gradient(135deg,#0d2944,#071a2e);color:#fff}.final h2{color:#fff}.final p{color:#cbd6e1}.final em{color:#a6b9e8}.centerBtns{justify-content:center}.darkBtn{background:#142840;color:#fff;border:1px solid #718096}footer{padding:22px 0}footer .shell{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#718096}footer b{display:block;color:var(--ink);font-size:12px}footer small{display:block;font-size:7px}
@media(max-width:900px){.heroGrid,.split,.pricingGrid,.preserve{grid-template-columns:1fr}.scene{height:390px}.four,.timeline{grid-template-columns:repeat(2,1fr)}.three{grid-template-columns:1fr}.links{display:none}.processHead{display:block}.timeline article:after{display:none}.hand{display:none}}
@media(max-width:600px){.wr .shell{width:calc(100% - 28px)}.wr .section{padding:55px 0}.wr h1{font-size:38px}.wr h2{font-size:29px}.scene{height:315px;margin:0 -14px}.laptop{width:90%;left:5%}.pool{height:180px}.pool h3{font-size:22px}.heroProof{height:auto;grid-template-columns:1fr;gap:15px;padding:20px 0}.four,.timeline{grid-template-columns:1fr}.buttons{flex-direction:column}.btn{width:100%;justify-content:center}.photo{height:240px}.preserve{grid-template-columns:1fr}.roofHero{grid-template-columns:1fr}.house{display:none}.roofProof{grid-template-columns:repeat(2,1fr);height:90px}.lists{grid-template-columns:1fr}footer .shell{flex-direction:column;align-items:flex-start;gap:10px}footer span{display:none}}

/* =========================================================
   MASTER REFERENCE POLISH — 2026-09-15
   Keeps existing working markup; matches supplied reference
   proportions, density, hierarchy and section rhythm.
   ========================================================= */

.wr .shell{width:min(1180px,calc(100% - 64px))}
.wr .section{padding:72px 0}
.wr h1{font-size:52px;max-width:620px}
.wr h2{font-size:36px}
.wr p{line-height:1.58}

/* HERO */
.hero{background:#fff}
.wr nav{height:68px}
.heroGrid{grid-template-columns:48% 52%;min-height:445px}
.heroCopy{padding:38px 38px 42px 0}
.heroCopy p{max-width:575px}
.scene{height:445px;border-radius:0;background:
 radial-gradient(circle at 30% 10%,rgba(115,153,103,.35),transparent 25%),
 radial-gradient(circle at 80% 8%,rgba(180,195,170,.48),transparent 24%),
 linear-gradient(180deg,#edf0eb 0 56%,#cbb396 57%,#b99a78 100%)}
.laptop{width:82%;left:9%;bottom:38px;transform:perspective(1000px) rotateY(-3deg) rotateX(1deg)}
.screen{border-width:10px;box-shadow:0 25px 45px rgba(0,0,0,.30)}
.pool{height:238px}
.pool>i{width:60%;height:92%;background:
 linear-gradient(145deg,rgba(153,205,215,.95),rgba(28,96,122,.98) 62%,#0a3854)}
.pool:after{content:"";position:absolute;right:7%;top:20%;width:39%;height:47%;background:
 linear-gradient(145deg,#d9c9aa,#987a59);clip-path:polygon(15% 40%,50% 0,100% 35%,100% 100%,0 100%,0 56%);opacity:.88}
.pool>div{z-index:3}
.note{right:24px;top:23px;font-size:16px}
.heroProof{height:76px}

/* ARRIVAL SECTION */
.center .four.plain{margin-top:42px}
.plain article{padding:6px 32px}
.plain .ico{width:62px;height:62px;font-size:20px}
.plain h3{margin-bottom:7px}

/* VISITOR EXPERIENCE */
.feature{grid-template-columns:1.08fr .92fr;gap:70px;align-items:center;padding-bottom:74px}
.feature>div:first-child{padding-right:18px}
.photo{height:315px;border-radius:12px;background:
 radial-gradient(circle at 16% 15%,rgba(255,255,255,.18),transparent 22%),
 linear-gradient(135deg,#738778,#465b53 52%,#25363f)}
.person{right:5%;width:150px;height:255px}
.person:before{width:61px;height:70px}
.tablet{left:36%;bottom:25px;width:175px;height:122px}
.scribble{font-size:20px;left:20px;top:28px}
.improve{padding-top:4px}
.cards article{padding:25px 23px;min-height:190px}
.cards h3{margin-bottom:8px}

/* PRESERVE SEO */
.dark{background:linear-gradient(105deg,#061a2e,#0c2947 72%,#0b2039)}
.preserve{grid-template-columns:1.22fr .72fr .38fr;gap:44px}
.checks{padding:20px 21px}
.checks span{font-size:11px;padding:8px 0}
.hand{font-size:18px}

/* APPROACH */
.approach{padding:66px 0!important}
.three{margin-top:34px;gap:52px}
.three article{grid-template-columns:70px 1fr}
.three .ico{width:62px;height:62px}

/* PROCESS */
.process{padding:66px 0!important;background:linear-gradient(90deg,#f2f7ff,#e7f1ff)}
.timeline{margin-top:38px}
.timeline article{padding-top:28px}
.timeline b{width:31px;height:31px;top:-16px}
.timeline h3{font-size:15px}

/* $97 OFFER */
.homeOffer{padding:62px 0!important;background:linear-gradient(90deg,#edf5ff,#e5f0ff)}
.homeOffer .split{grid-template-columns:.96fr 1.04fr;gap:62px}
.roofSite{transform:translateY(2px);box-shadow:0 15px 30px rgba(15,31,61,.12)}
.roofHero{height:225px;background:linear-gradient(120deg,#10243d 0 50%,#aab3b8 50%)}
.roofHero h3{font-size:29px}
.house i{background:#30383d}
.house b{background:#dfd0b4}
.roofSite .fakeNav{height:38px}

/* PRICING */
.pricing{padding:66px 0!important}
.pricingGrid{grid-template-columns:1.08fr .92fr;gap:24px}
.priceCard,.priceSide>article{padding:28px;border-radius:11px}
.priceCard h2{font-size:31px}
.priceSide h2{font-size:26px}
.testimonial{min-height:128px}

/* FINAL CTA */
.final{padding:72px 0;position:relative;background:
 linear-gradient(rgba(5,24,42,.92),rgba(5,24,42,.94)),
 radial-gradient(circle at 80% 25%,#3c566e,#122d47 50%,#071a2e)}
.final:after{content:"";position:absolute;right:-4%;bottom:-35%;width:36%;height:130%;
 background:linear-gradient(145deg,transparent 42%,rgba(255,255,255,.05) 43% 45%,transparent 46%),
 linear-gradient(30deg,transparent 45%,rgba(255,255,255,.035) 46% 48%,transparent 49%);
 transform:rotate(-8deg);pointer-events:none}
.final .shell{position:relative;z-index:2}
.final h2{font-size:31px;max-width:900px;margin-left:auto;margin-right:auto}
.final p{max-width:720px;margin-left:auto;margin-right:auto}

/* FOOTER */
footer{padding:25px 0}
footer .shell{min-height:32px}

@media(max-width:900px){
 .wr .shell{width:min(100% - 36px,1180px)}
 .heroGrid{grid-template-columns:1fr}
 .heroCopy{padding-right:0}
 .scene{height:410px}
 .feature{grid-template-columns:1fr;gap:35px}
 .homeOffer .split{grid-template-columns:1fr}
}
@media(max-width:600px){
 .wr .shell{width:calc(100% - 28px)}
 .wr h1{font-size:40px}
 .wr h2{font-size:30px}
 .scene{height:330px}
 .pool{height:188px}
 .pool:after{display:none}
 .plain article{padding:8px}
 .cards article{min-height:0}
}


/* =========================================================
   TYPOGRAPHY MATCH — supplied master reference
   TYPOGRAPHY ONLY. No section/layout/image changes.
   ========================================================= */

/* Use a system stack that closely matches the clean reference.
   No external font dependency, so it loads immediately. */
.wr{
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Main display typography */
.wr h1,
.wr h2,
.wr h3{
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:#101f3b;
  font-weight:750;
}

.wr h1{
  font-size:52px;
  line-height:1.025;
  letter-spacing:-0.045em;
  font-weight:780;
}

.wr h2{
  font-size:35px;
  line-height:1.08;
  letter-spacing:-0.035em;
  font-weight:760;
}

.wr h3{
  font-size:17px;
  line-height:1.18;
  letter-spacing:-0.018em;
  font-weight:720;
}

/* Body copy: reference is visibly darker/larger than current live build */
.wr p{
  font-size:14.5px;
  line-height:1.58;
  letter-spacing:-0.006em;
  font-weight:430;
  color:#53627a;
}

.wr .heroCopy p{
  font-size:15.5px;
  line-height:1.52;
  color:#526179;
}

.wr .intro{
  font-size:14px;
  line-height:1.52;
}

/* Eyebrows */
.wr em{
  font-size:10px;
  line-height:1.25;
  letter-spacing:.145em;
  font-weight:800;
}

/* Navigation */
.wr .logo{
  font-size:19px;
  letter-spacing:-.025em;
  font-weight:800;
}
.wr .links a{
  font-size:11px;
  font-weight:600;
  letter-spacing:-.005em;
}
.wr .topcta{
  font-size:11px;
  font-weight:700;
}

/* Buttons */
.wr .btn{
  font-size:12px;
  line-height:1;
  font-weight:700;
  letter-spacing:-.005em;
}

/* Supporting labels */
.wr small{
  font-size:11px;
  line-height:1.4;
  font-weight:450;
}

/* Four-column sections */
.wr .plain h3,
.wr .cards h3{
  font-size:17px;
  font-weight:720;
}
.wr .plain p,
.wr .cards p{
  font-size:12.5px;
  line-height:1.5;
  color:#58677d;
}

/* Dark preservation section */
.wr .dark h2{
  font-size:35px;
  font-weight:760;
}
.wr .dark p{
  font-size:14px;
  line-height:1.55;
}
.wr .dark b{
  font-weight:700;
}
.wr .checks span{
  font-size:11px;
  line-height:1.35;
  font-weight:520;
}

/* Understand → Trust → Act */
.wr .three h3{
  font-size:17px;
  font-weight:720;
}
.wr .three p{
  font-size:12.5px;
  line-height:1.5;
}

/* Process */
.wr .process h2{
  font-size:34px;
}
.wr .timeline h3{
  font-size:15px;
  line-height:1.22;
  font-weight:720;
}
.wr .timeline p{
  font-size:11.5px;
  line-height:1.48;
}
.wr .timeline b{
  font-weight:750;
}

/* $97 offer */
.wr .homeOffer h2{
  font-size:34px;
  font-weight:760;
}
.wr .homeOffer p{
  font-size:14px;
}

/* Pricing */
.wr .priceCard h2{
  font-size:31px;
  font-weight:760;
}
.wr .priceSide h2{
  font-size:25px;
  font-weight:750;
}
.wr .priceCard p,
.wr .priceSide p{
  font-size:13px;
  line-height:1.52;
}
.wr .lists li{
  font-size:11.5px;
  line-height:1.35;
  font-weight:480;
}

/* Final CTA */
.wr .final h2{
  font-size:31px;
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:750;
}
.wr .final p{
  font-size:13.5px;
}

/* Footer */
.wr footer{
  font-size:10px;
}
.wr footer b{
  font-size:12px;
  font-weight:750;
}

@media(max-width:900px){
  .wr h1{font-size:46px}
  .wr h2{font-size:32px}
}
@media(max-width:600px){
  .wr h1{font-size:38px;line-height:1.04}
  .wr h2{font-size:29px}
  .wr p{font-size:14px}
  .wr .heroCopy p{font-size:15px}
}

/* =========================================================
   MANROPE TYPOGRAPHY — REAL WEB FONT LOAD
   Typography only.
   ========================================================= */
.wr,
.wr button,
.wr input,
.wr textarea,
.wr select,
.wr a {
  font-family: "Manrope", Arial, sans-serif !important;
}

.wr h1,
.wr h2,
.wr h3,
.wr h4,
.wr h5,
.wr h6 {
  font-family: "Manrope", Arial, sans-serif !important;
  color:#101f3b;
}

.wr h1{
  font-size:52px;
  line-height:1.04;
  letter-spacing:-0.045em;
  font-weight:800;
}

.wr h2{
  font-size:35px;
  line-height:1.10;
  letter-spacing:-0.035em;
  font-weight:800;
}

.wr h3{
  font-size:17px;
  line-height:1.25;
  letter-spacing:-0.025em;
  font-weight:700;
}

.wr p{
  font-family:"Manrope",Arial,sans-serif !important;
  font-size:14.5px;
  line-height:1.62;
  letter-spacing:-0.012em;
  font-weight:400;
  color:#53627a;
}

.wr .heroCopy p{
  font-size:15px;
  line-height:1.60;
  font-weight:400;
}

.wr em{
  font-family:"Manrope",Arial,sans-serif !important;
  font-size:10px;
  line-height:1.3;
  letter-spacing:.14em;
  font-weight:800;
}

.wr .logo{font-weight:800}
.wr .links a{font-weight:600}
.wr .topcta,.wr .btn{font-weight:700}

.wr .plain h3,
.wr .cards h3,
.wr .three h3,
.wr .timeline h3{
  font-weight:700;
}

.wr .plain p,
.wr .cards p,
.wr .three p{
  font-size:12.5px;
  line-height:1.58;
  font-weight:400;
}

.wr .timeline p{
  font-size:11.5px;
  line-height:1.55;
}

.wr .checks span,
.wr .lists li{
  font-family:"Manrope",Arial,sans-serif !important;
  font-weight:500;
}

.wr .final h2{font-weight:800}

@media(max-width:900px){
  .wr h1{font-size:46px}
  .wr h2{font-size:32px}
}
@media(max-width:600px){
  .wr h1{font-size:38px}
  .wr h2{font-size:29px}
  .wr p{font-size:14px}
}


/* =========================================================
   DARK SECTION + FINAL CTA CONTRAST FIX
   Keep Manrope typography; fix heading/body colors only.
   ========================================================= */
.wr .dark h1,
.wr .dark h2,
.wr .dark h3 {
    color: #ffffff !important;
}

.wr .dark p {
    color: #c5d2df !important;
}

.wr .final h1,
.wr .final h2,
.wr .final h3 {
    color: #ffffff !important;
}

.wr .final p {
    color: #cbd6e1 !important;
}