:root {
  --ink: #0b1c2c;
  --navy: #09273a;
  --navy-2: #0c3448;
  --green: #b7e72d;
  --green-dark: #8dbb0e;
  --paper: #f4f2eb;
  --white: #ffffff;
  --muted: #66737c;
  --line: #dce1df;
  --soft: #eaf0ee;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: Arial, Helvetica, sans-serif; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
main { overflow: hidden; }

.header { height: 84px; display: flex; align-items: center; gap: 34px; padding: 0 max(5vw, 32px); border-bottom: 1px solid rgba(255,255,255,.12); color: white; position: absolute; z-index: 30; top: 0; width: 100%; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brandMark { width: 45px; height: 45px; display: grid; place-items: center; position: relative; background: var(--green); color: var(--navy); border-radius: 13px 13px 13px 3px; font-size: 15px; }
.brandMark b { letter-spacing: -1px; }
.brandMark i { position: absolute; right: -4px; top: -8px; color: white; font-size: 20px; font-style: normal; font-weight: 900; }
.brandText { display: flex; flex-direction: column; line-height: 1; }
.brandText strong { font-size: 20px; letter-spacing: -.7px; }
.brandText small { margin-top: 6px; font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px; opacity: .65; }
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav a { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.78); transition: .2s; }
.nav a:hover { color: var(--green); }
.headerPhone { display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,.18); padding-left: 24px; }
.headerPhone small { font-size: 9px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--green); }
.headerPhone b { font-size: 13px; margin-top: 3px; }
.menuButton { display: none; }

.button { border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 14px; font-weight: 800; font-size: 13px; padding: 16px 22px; border-radius: 3px; transition: transform .2s, background .2s, color .2s; }
.button:hover { transform: translateY(-2px); }
.buttonSmall { background: var(--green); color: var(--navy); padding: 13px 18px; }
.buttonPrimary { background: var(--green); color: var(--navy); }
.buttonPrimary:hover { background: #c7f344; }
.buttonGhost { background: transparent; color: white; border: 1px solid rgba(255,255,255,.35); }
.buttonLight { background: white; color: var(--navy); }
.buttonWhatsApp { background: #20ba65; color: white; font-size: 14px; }
.buttonWhatsApp b { margin-left: auto; }
.full { width: 100%; }

.hero { min-height: 780px; padding: 168px max(7vw, 56px) 95px; background: var(--navy); color: white; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(350px, .65fr); gap: 7vw; align-items: center; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .06; background-image: linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px); background-size: 60px 60px; mask-image: linear-gradient(to right, black, transparent 75%); }
.heroGlow { position: absolute; width: 620px; height: 620px; right: 4%; top: 9%; border: 1px solid rgba(183,231,45,.15); border-radius: 50%; box-shadow: 0 0 0 70px rgba(183,231,45,.025), 0 0 0 140px rgba(183,231,45,.015); }
.heroContent, .heroCard { position: relative; z-index: 2; }
.eyebrow, .kicker { text-transform: uppercase; letter-spacing: 2.3px; font-size: 10px; font-weight: 900; color: var(--green-dark); }
.eyebrow { color: var(--green); display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 30px; height: 1px; background: var(--green); }
.hero h1 { font-size: clamp(58px, 6.4vw, 94px); letter-spacing: -5px; line-height: .94; margin: 28px 0 30px; max-width: 860px; }
.hero h1 em { color: var(--green); font-style: normal; }
.heroContent > p { max-width: 650px; color: #bcc9cf; line-height: 1.75; font-size: 17px; margin: 0; }
.heroActions { display: flex; gap: 12px; margin-top: 38px; }
.trustLine { display: flex; gap: 36px; margin-top: 54px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.13); max-width: 720px; }
.trustLine > div { display: flex; gap: 10px; align-items: flex-start; }
.trustLine b { color: var(--green); }
.trustLine span { display: flex; flex-direction: column; }
.trustLine strong { font-size: 11px; }
.trustLine small { color: #7f959f; margin-top: 4px; font-size: 10px; }

.heroCard { background: white; color: var(--ink); border-radius: 5px; padding: 32px; box-shadow: 0 24px 70px rgba(0,0,0,.25); }
.status { color: #24774e; font-weight: 800; font-size: 10px; text-transform: uppercase; letter-spacing: 1.3px; display: flex; align-items: center; gap: 8px; margin-bottom: 26px; }
.status span { width: 8px; height: 8px; background: #31c878; border-radius: 50%; box-shadow: 0 0 0 5px rgba(49,200,120,.12); }
.heroCardTop small { text-transform: uppercase; letter-spacing: 1.5px; font-size: 9px; color: var(--muted); }
.heroCardTop strong { display: block; font-size: 27px; letter-spacing: -1px; margin-top: 8px; }
.heroCardTop p { color: var(--muted); line-height: 1.6; font-size: 13px; }
.miniServices { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 24px 0; padding: 8px 0; }
.miniServices > div { display: flex; gap: 14px; padding: 13px 0; align-items: center; }
.miniServices i { width: 30px; height: 30px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; color: var(--navy); font-size: 9px; font-weight: 900; font-style: normal; }
.miniServices span { display: flex; flex-direction: column; }
.miniServices b { font-size: 12px; }
.miniServices small { font-size: 10px; color: var(--muted); margin-top: 3px; }
.heroCard > a { color: var(--navy); font-size: 12px; font-weight: 900; display: flex; justify-content: space-between; }
.heroCard > a span { color: var(--green-dark); }

.serviceTicker { height: 58px; background: var(--green); color: var(--navy); display: flex; align-items: center; justify-content: center; gap: 26px; white-space: nowrap; font-size: 10px; font-weight: 900; letter-spacing: 1.7px; }
.serviceTicker i { font-style: normal; font-size: 20px; opacity: .45; }
.section { padding: 110px max(7vw, 56px); }
.servicesSection { background: var(--paper); }
.sectionHeading { display: grid; grid-template-columns: 1fr .75fr; gap: 9vw; align-items: end; margin-bottom: 56px; }
.sectionHeading h2, .areaSection h2, .faqIntro h2 { font-size: clamp(38px, 4vw, 58px); letter-spacing: -2.7px; line-height: 1.02; margin: 15px 0 0; }
.sectionHeading p { color: var(--muted); line-height: 1.75; font-size: 14px; max-width: 520px; margin: 0; }
.serviceGrid { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid #d6d7cf; border-top: 1px solid #d6d7cf; }
.serviceCard { padding: 34px; min-height: 285px; border-right: 1px solid #d6d7cf; border-bottom: 1px solid #d6d7cf; position: relative; background: rgba(255,255,255,.35); transition: .25s; }
.serviceCard:hover { background: white; transform: translateY(-4px); box-shadow: 0 18px 50px rgba(22,43,47,.08); z-index: 2; }
.serviceIcon { width: 48px; height: 48px; border-radius: 14px 14px 14px 3px; background: var(--navy); color: var(--green); display: grid; place-items: center; font-size: 22px; }
.serviceNumber { position: absolute; top: 35px; right: 34px; font-family: monospace; color: #9aa09d; font-size: 10px; }
.serviceCard h3 { margin: 30px 0 10px; font-size: 20px; }
.serviceCard p { color: var(--muted); line-height: 1.65; font-size: 13px; min-height: 44px; }
.serviceCard button, .faqIntro button { padding: 0; background: none; border: 0; color: var(--navy); font-size: 11px; font-weight: 900; cursor: pointer; margin-top: 15px; }
.serviceCard button span { color: var(--green-dark); margin-left: 8px; }
.wideCallout { background: var(--navy); color: white; margin-top: 22px; padding: 24px 30px; display: flex; align-items: center; justify-content: space-between; }
.wideCallout > div { display: flex; align-items: center; gap: 18px; }
.calloutIcon { width: 40px; height: 40px; background: var(--green); color: var(--navy); display: grid; place-items: center; border-radius: 50%; font-weight: 900; }
.wideCallout p { display: flex; flex-direction: column; margin: 0; }
.wideCallout b { font-size: 13px; }
.wideCallout small { color: #93a6ae; margin-top: 4px; }
.wideCallout > a { color: var(--green); font-size: 11px; font-weight: 900; border-bottom: 1px solid var(--green); padding-bottom: 3px; }

.differenceSection { padding-top: 0; background: var(--paper); }
.differencePanel { background: var(--navy); color: white; display: grid; grid-template-columns: 1.25fr .75fr; }
.differenceCopy { padding: 70px; }
.kicker.light { color: var(--green); }
.differenceCopy h2, .condoCopy h2, .contactCopy h2 { font-size: clamp(42px, 4.2vw, 64px); letter-spacing: -3px; line-height: 1; margin: 18px 0 26px; }
.differenceCopy > p { color: #a9bbc3; line-height: 1.7; max-width: 620px; }
.differenceList { margin-top: 42px; }
.differenceList > div { display: flex; align-items: center; gap: 22px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.12); }
.differenceList > div > b { color: var(--green); font-family: monospace; font-size: 11px; }
.differenceList span { display: flex; flex-direction: column; }
.differenceList strong { font-size: 13px; }
.differenceList small { color: #8399a2; margin-top: 5px; }
.proofCard { background: var(--green); color: var(--navy); padding: 55px; display: flex; flex-direction: column; justify-content: center; }
.proofSeal { width: 74px; height: 74px; border: 2px solid var(--navy); border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 20px; }
.proofSeal sup { font-size: 12px; position: absolute; margin: -20px 0 0 38px; }
.proofCard h3 { margin: 28px 0 12px; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; }
.proofCard blockquote { margin: 0; font-size: 25px; line-height: 1.35; letter-spacing: -.7px; font-weight: 800; }
.proofStats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid rgba(9,39,58,.25); margin-top: 36px; padding-top: 24px; }
.proofStats div { display: flex; flex-direction: column; }
.proofStats strong { font-size: 24px; }
.proofStats small, .proofNote { font-size: 9px; margin-top: 4px; opacity: .7; }
.proofNote { margin-top: 25px; }

.pricingSection { background: white; }
.pricingLayout { display: grid; grid-template-columns: 1.15fr .7fr; gap: 34px; align-items: start; }
.priceTable { border: 1px solid var(--line); }
.priceTableHeader, .priceRow { display: grid; grid-template-columns: 1fr 210px; padding: 16px 22px; align-items: center; }
.priceTableHeader { background: var(--soft); color: var(--muted); text-transform: uppercase; letter-spacing: 1.3px; font-size: 8px; font-weight: 900; }
.priceTableHeader span:last-child, .priceRow strong { text-align: right; }
.priceRow { border-top: 1px solid var(--line); font-size: 13px; }
.priceRow strong { color: var(--navy); }
.priceTable > p { margin: 0; padding: 16px 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; line-height: 1.5; }
.dayCard { background: var(--paper); padding: 38px; border-top: 4px solid var(--green); position: relative; }
.tag { position: absolute; top: 0; right: 0; background: var(--green); color: var(--navy); padding: 9px 12px; font-size: 8px; font-weight: 900; letter-spacing: .7px; }
.dayCard > small { text-transform: uppercase; letter-spacing: 1.5px; color: var(--green-dark); font-weight: 900; font-size: 9px; }
.dayCard h3 { font-size: 30px; margin: 8px 0; }
.dayCard > p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.dayPrice { display: flex; align-items: baseline; margin: 22px 0; padding-bottom: 22px; border-bottom: 1px solid #d4d7d0; }
.dayPrice sup { font-size: 12px; font-weight: 900; }
.dayPrice strong { font-size: 51px; letter-spacing: -3px; }
.dayPrice span { color: var(--muted); font-size: 10px; margin-left: 8px; }
.dayCard ul { list-style: none; padding: 0; margin: 0 0 26px; }
.dayCard li { padding: 8px 0; font-size: 12px; }
.dayCard li::before { content: "✓"; color: var(--green-dark); font-weight: 900; margin-right: 10px; }

.condoSection { background: var(--navy-2); color: white; padding: 110px max(7vw, 56px); display: grid; grid-template-columns: 1.1fr .7fr; gap: 9vw; align-items: center; position: relative; }
.condoSection::after { content: "DR"; position: absolute; right: -50px; bottom: -120px; font-size: 360px; font-weight: 900; color: rgba(255,255,255,.025); letter-spacing: -35px; }
.condoCopy, .condoPlan { position: relative; z-index: 2; }
.condoCopy > p { color: #a8bac2; line-height: 1.7; max-width: 650px; }
.condoBenefits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 25px; margin: 34px 0; }
.condoBenefits div { font-size: 12px; }
.condoBenefits span { color: var(--green); margin-right: 8px; }
.condoPlan { background: white; color: var(--ink); padding: 38px; border-radius: 4px; }
.planTop { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.planTop span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; }
.planTop b { color: var(--green-dark); font-size: 11px; }
.condoPlan h3 { font-size: 14px; margin: 28px 0 14px; }
.condoPlan h3 strong { font-size: 31px; display: block; margin-top: 4px; }
.condoPlan h3 small { font-size: 10px; color: var(--muted); font-weight: normal; margin-left: 4px; }
.condoPlan > p { color: var(--muted); line-height: 1.6; font-size: 12px; margin-bottom: 26px; }
.planMetric { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: 13px 0; font-size: 11px; }
.planMetric b { color: var(--navy); }
.condoPlan > small { color: var(--muted); font-size: 8px; }

.areaSection { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 8vw; background: var(--paper); }
.areaHeading { display: flex; gap: 26px; align-items: flex-start; }
.mapPin { width: 58px; height: 58px; background: var(--green); border-radius: 50% 50% 50% 8px; display: grid; place-items: center; font-size: 25px; flex-shrink: 0; }
.areaHeading h2 { font-size: 42px; }
.areaHeading p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.neighborhoods { display: flex; flex-wrap: wrap; gap: 10px; }
.neighborhoods span { background: white; border: 1px solid #d8dcd7; padding: 13px 17px; font-size: 11px; font-weight: 800; }

.faqSection { display: grid; grid-template-columns: .7fr 1.3fr; gap: 9vw; }
.faqIntro { position: sticky; top: 30px; align-self: start; }
.faqIntro p { color: var(--muted); line-height: 1.65; font-size: 13px; max-width: 360px; }
.faqIntro button { color: var(--green-dark); }
.faqList details { border-top: 1px solid var(--line); }
.faqList details:last-child { border-bottom: 1px solid var(--line); }
.faqList summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 23px 0; font-size: 14px; font-weight: 800; }
.faqList summary::-webkit-details-marker { display: none; }
.faqList summary span { color: var(--green-dark); font-size: 19px; transition: transform .2s; }
.faqList details[open] summary span { transform: rotate(45deg); }
.faqList details p { margin: -5px 50px 24px 0; color: var(--muted); line-height: 1.7; font-size: 12px; }

.contactSection { background: var(--navy); color: white; padding: 110px max(7vw, 56px); display: grid; grid-template-columns: .8fr 1fr; gap: 9vw; align-items: center; }
.contactCopy > p { color: #9cb0b9; line-height: 1.7; max-width: 540px; }
.contactInfo { display: flex; flex-direction: column; margin-top: 40px; }
.contactInfo small { color: var(--green); text-transform: uppercase; letter-spacing: 1.4px; font-size: 9px; }
.contactInfo a { font-size: 27px; font-weight: 900; margin: 7px 0; }
.contactInfo span { color: #8097a1; font-size: 10px; }
.contactSafety { display: flex; gap: 13px; margin-top: 32px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.12); }
.contactSafety > b { color: var(--green); }
.contactSafety span { display: flex; flex-direction: column; }
.contactSafety strong { font-size: 11px; }
.contactSafety small { color: #7f969f; margin-top: 4px; font-size: 9px; }
.contactForm { background: white; color: var(--ink); padding: 38px; border-radius: 5px; }
.formHead { display: flex; gap: 14px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 25px; }
.formHead > span { background: var(--green); width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; font-size: 9px; font-weight: 900; }
.formHead div { display: flex; flex-direction: column; }
.formHead b { font-size: 14px; }
.formHead small { color: var(--muted); font-size: 9px; margin-top: 4px; }
.contactForm label { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.contactForm label > span { font-size: 10px; font-weight: 900; }
.contactForm label em { font-style: normal; color: var(--muted); font-weight: normal; }
.fieldGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.contactForm input, .contactForm select, .contactForm textarea { width: 100%; border: 1px solid #d9dfdc; background: #f8faf9; padding: 13px 14px; outline: none; color: var(--ink); border-radius: 2px; font-size: 12px; }
.contactForm input:focus, .contactForm select:focus, .contactForm textarea:focus { border-color: var(--green-dark); box-shadow: 0 0 0 3px rgba(183,231,45,.15); }
.contactForm textarea { resize: vertical; }
.waDot { color: white; }
.formNote { display: block; text-align: center; color: var(--muted); margin-top: 10px; font-size: 8px; }

footer { background: #071925; color: white; padding: 70px max(7vw, 56px) 28px; }
.footerTop { display: grid; grid-template-columns: 1.4fr repeat(3, .6fr); gap: 60px; }
.footerBrand p { color: #708895; line-height: 1.6; max-width: 280px; font-size: 11px; margin-top: 20px; }
.footerTop > div:not(:first-child) { display: flex; flex-direction: column; gap: 10px; }
.footerTop > div:not(:first-child) > b { color: var(--green); text-transform: uppercase; letter-spacing: 1.4px; font-size: 9px; margin-bottom: 10px; }
.footerTop a, .footerTop span { color: #8499a2; font-size: 10px; }
.footerTop strong { font-size: 11px; margin: -5px 0 8px; }
.footerBottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 55px; padding-top: 22px; display: flex; justify-content: space-between; color: #596f79; font-size: 9px; }
.floatingWhatsApp { position: fixed; z-index: 40; right: 22px; bottom: 22px; background: #20ba65; color: white; border: 0; border-radius: 40px; padding: 13px 18px; display: flex; gap: 9px; align-items: center; cursor: pointer; box-shadow: 0 8px 30px rgba(0,0,0,.22); }
.floatingWhatsApp span { font-size: 9px; }
.floatingWhatsApp b { font-size: 11px; }

@media (max-width: 1100px) {
  .header { padding: 0 28px; gap: 20px; }
  .nav { gap: 17px; }
  .headerPhone { display: none; }
  .hero { grid-template-columns: 1.15fr .75fr; gap: 45px; padding-left: 50px; padding-right: 50px; }
  .hero h1 { font-size: 67px; }
  .trustLine { gap: 18px; }
  .section, .condoSection, .contactSection { padding-left: 50px; padding-right: 50px; }
}

@media (max-width: 820px) {
  .header { position: absolute; height: 74px; }
  .header > .buttonSmall { display: none; }
  .menuButton { display: flex; margin-left: auto; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.25); background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 3px; }
  .menuButton span { width: 16px; height: 1px; background: white; }
  .nav { display: none; position: absolute; top: 74px; left: 0; right: 0; background: var(--navy); padding: 22px 28px; flex-direction: column; align-items: flex-start; margin: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .nav.open { display: flex; }
  .hero { grid-template-columns: 1fr; padding: 130px 28px 70px; }
  .hero h1 { font-size: clamp(50px, 13vw, 74px); letter-spacing: -3.5px; }
  .heroCard { max-width: 540px; }
  .trustLine { flex-wrap: wrap; }
  .serviceTicker { justify-content: flex-start; overflow: hidden; padding-left: 20px; }
  .section, .condoSection, .contactSection { padding: 78px 28px; }
  .sectionHeading { grid-template-columns: 1fr; gap: 24px; }
  .serviceGrid { grid-template-columns: repeat(2, 1fr); }
  .differencePanel, .pricingLayout, .condoSection, .contactSection { grid-template-columns: 1fr; }
  .differenceCopy { padding: 50px; }
  .proofCard { padding: 50px; }
  .areaSection, .faqSection { grid-template-columns: 1fr; }
  .faqIntro { position: static; }
  .footerTop { grid-template-columns: 1fr 1fr; }
  .footerBrand { grid-column: 1 / -1; }
}

@media (max-width: 540px) {
  .brandText small { display: none; }
  .brandText strong { font-size: 18px; }
  .heroActions { flex-direction: column; align-items: stretch; }
  .heroActions .button { width: 100%; }
  .trustLine { flex-direction: column; gap: 17px; }
  .serviceGrid { grid-template-columns: 1fr; }
  .serviceCard { min-height: 250px; }
  .wideCallout { align-items: flex-start; gap: 20px; flex-direction: column; }
  .differenceCopy, .proofCard, .dayCard, .condoPlan, .contactForm { padding: 30px 24px; }
  .differenceCopy h2, .condoCopy h2, .contactCopy h2 { font-size: 42px; letter-spacing: -2.2px; }
  .priceTableHeader, .priceRow { grid-template-columns: 1fr 120px; padding-left: 14px; padding-right: 14px; }
  .priceTableHeader { line-height: 1.4; }
  .condoBenefits { grid-template-columns: 1fr; }
  .areaHeading { flex-direction: column; }
  .fieldGrid { grid-template-columns: 1fr; gap: 0; }
  .footerTop { grid-template-columns: 1fr; gap: 38px; }
  .footerBrand { grid-column: auto; }
  .footerBottom { flex-direction: column; gap: 8px; }
  .floatingWhatsApp b { display: none; }
  .floatingWhatsApp { width: 50px; height: 50px; border-radius: 50%; padding: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}