/* ═══════════════════════════════════════════════════════════════
   Ilkania Baez · Luxury Real Estate — tokens sampled from the brand kit
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ivory:#FEFCF5;        /* logo master background */
  --ivory-2:#F6F1E8;      /* alternate section ground */
  --beige:#EEE0D0;        /* pattern tile ground */
  --navy:#0A1525;         /* bands, footer */
  --navy-2:#16253C;       /* headline ink */
  --gold:#B18950;         /* sampled from the gold wordmark */
  --gold-2:#C9A96A;
  --gold-btn:#8E6B31;        /* white text on it: 4.9:1 */
  --gold-text:#836328;       /* small gold text on ivory: ≥4.9:1 */
  --ink:#181A1C;
  --ink-2:#4B5561;
  --ink-3:#7C8793;
  --line:#E2DCD1;
  --line-2:#EFE9DE;
  --white:#FFFFFF;
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --body:"Lora",Georgia,serif;
  --ui:"Jost","Helvetica Neue",Arial,sans-serif;
  --wrap:1180px;
  --pad:clamp(18px,4vw,48px);
  --header-h:166px;          /* 34 topbar + 130 nav + 2 borders — vertical logo needs the room */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ivory);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
section[id],footer[id]{scroll-margin-top:var(--header-h)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type */
.eyebrow{font-family:var(--ui);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-text);font-weight:500}
.eyebrow.navy{color:var(--navy-2)}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--navy-2);line-height:1.12;text-wrap:balance}
h1{font-size:clamp(38px,5.4vw,70px);letter-spacing:-.01em}
h2{font-size:clamp(27px,3.3vw,42px)}
h3{font-size:21px}
h1 em,h2 em{font-style:italic;color:var(--gold)}
.lead{font-size:17px;color:var(--ink-2);max-width:56ch}
.ui{font-family:var(--ui)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--ui);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;padding:14px 22px;border:1px solid transparent;transition:background .3s,color .3s,border-color .3s,transform .3s;white-space:nowrap}
.btn::after{content:"→";font-size:14px;letter-spacing:0;transition:transform .3s}
.btn:hover::after{transform:translateX(4px)}
.btn-gold{background:var(--gold-btn);color:var(--white)}
.btn-gold:hover{background:var(--navy)}
.btn-outline{border-color:var(--navy-2);color:var(--navy-2);background:transparent}
.btn-outline:hover{background:var(--navy-2);color:var(--ivory)}
.btn-outline.light{border-color:rgba(255,255,255,.7);color:var(--white)}
.btn-outline.light:hover{background:var(--white);color:var(--navy)}
.btn-navy{background:var(--navy);color:var(--ivory)}
.btn-navy:hover{background:var(--gold-btn)}
.link{font-family:var(--ui);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);font-weight:500;display:inline-flex;gap:8px;align-items:center}
.link::after{content:"→"}

/* section header — the mockup's signature pattern */
.sh{display:flex;align-items:center;gap:22px;margin-bottom:clamp(24px,4vh,40px);flex-wrap:wrap}
.sh h2{font-family:var(--display);font-size:16.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy-2);white-space:nowrap}
.sh .rule{flex:1;height:1px;background:var(--line);min-width:40px}
.sh .note{font-family:var(--ui);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.sh .link{margin-left:auto;border:1px solid var(--line);padding:9px 14px}
.section{padding:clamp(56px,8vh,96px) 0}
.section.alt{background:var(--ivory-2)}

/* ═══ top bar + nav ═══ */
.header{position:fixed;inset:0 0 auto 0;z-index:80;background:var(--ivory);border-bottom:1px solid var(--line)}
.topbar{border-bottom:1px solid var(--line-2);font-family:var(--ui);font-size:10.5px;letter-spacing:.06em;color:var(--ink-2)}
.topbar .wrap{max-width:none;display:flex;align-items:center;justify-content:space-between;gap:16px;height:34px}
.topbar .meta{display:flex;gap:18px;flex-wrap:wrap}
.topbar .meta span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-right:8px;vertical-align:middle}
.topbar .social{display:flex;align-items:center;gap:14px}
.topbar .social span{letter-spacing:.14em;text-transform:uppercase;font-size:9.5px;color:var(--ink-3)}
.topbar .social a,.topbar .social span.ico{color:var(--navy-2);display:inline-flex}
.social span.ico{opacity:.55;cursor:default}
.topbar .social svg{width:13px;height:13px}
.nav{height:130px}
/* Three-column grid: logo hugs the left edge, the menu is truly centred, the
   CTA hugs the right edge — independent of how wide the logo or button are. */
.nav .wrap{max-width:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;height:100%}
.nav .logo{justify-self:start}
.nav .nav-links{justify-self:center}
.nav > .wrap > .btn{justify-self:end}
.logo img{height:108px;width:auto}
.nav-links{display:flex;gap:26px;font-family:var(--ui);font-size:12.5px;letter-spacing:.08em;color:var(--navy-2)}
.nav-links a{position:relative;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .3s}
.nav-links a:hover::after,.nav-links a[aria-current]::after{right:0}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:transparent;place-items:center}
.burger span{display:block;width:18px;height:1.5px;background:var(--navy-2);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--navy-2)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.menu{position:fixed;inset:0;z-index:90;background:var(--navy);color:var(--ivory);padding:calc(var(--header-h) + 20px) var(--pad) 40px;display:none;flex-direction:column;gap:6px}
.menu[data-open="true"]{display:flex}
.menu a{font-family:var(--display);font-size:28px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.menu .close{position:absolute;top:18px;right:var(--pad);width:44px;height:44px;border:1px solid rgba(255,255,255,.3);background:transparent;color:var(--ivory);font-family:var(--ui)}

/* ═══ hero: pinned image-sequence stage ═══ */
.hero-rail{height:450vh;position:relative;margin-top:var(--header-h)}
.hero-stage{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow:hidden;background:var(--navy)}
.hero-media{position:absolute;inset:0}
.hero-media img,.hero-media canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media canvas{opacity:0;transition:opacity .5s}
.hero-stage.is-ready .hero-media canvas{opacity:1}
.hero-scrim{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s ease;
  background:linear-gradient(90deg,rgba(254,252,245,.78) 0%,rgba(254,252,245,.55) 38%,rgba(254,252,245,0) 70%)}
.hero-stage.is-arrived .hero-scrim{opacity:1}
.hero-copy{position:absolute;inset:0;display:flex;align-items:center;padding:0 var(--pad);pointer-events:none}
/* Hero copy hugs the page edge like the nav logo does, instead of sitting in
   the centred 1180 px container — on wide screens that left gap read as empty. */
.hero-copy > .wrap{width:100%;max-width:none;padding:0;display:grid;grid-template-columns:minmax(0,760px) 1fr;align-items:center}
.hero-block{position:relative;isolation:isolate;padding:30px 34px 30px;margin-left:-34px;opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);pointer-events:auto}
/* The copy carries its own ivory plate — a soft-edged wash plus a faded
   backdrop blur — so it stays legible over any frame at any viewport width,
   instead of depending on where a viewport-anchored gradient happens to land. */
/* The box is much larger than the copy (40% / 30% overhang) and the ellipse's
   radii are exactly half the box, so both the wash and the blur mask reach
   zero *inside* the box — the box edge never shows as a step. */
.hero-block::before{content:"";position:absolute;inset:-40% -30%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(254,252,245,.9) 0%,rgba(254,252,245,.84) 55%,rgba(254,252,245,.5) 76%,rgba(254,252,245,.16) 90%,rgba(254,252,245,0) 100%);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,rgba(0,0,0,.5) 80%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,rgba(0,0,0,.5) 80%,transparent 100%)}
.hero-stage.is-arrived .hero-block{opacity:1;transform:none}
.hero-block .eyebrow{color:var(--navy-2)}
.hero-block h1{margin-top:14px}
.hero-block h1 em{color:#9A783A}   /* deeper hero gold: ≥3.9:1 on the plate, still reads as gold */
.hero-block .lead{margin-top:18px;font-size:17.5px;color:var(--navy-2)}
.hero-actions{margin-top:22px;display:flex;gap:14px;flex-wrap:wrap}
.hero-side{justify-self:end;align-self:start;margin-top:8vh;border-left:1px solid rgba(255,255,255,.6);padding-left:16px;
  font-family:var(--ui);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--white);line-height:2;max-width:9ch;
  text-shadow:0 1px 8px rgba(0,0,0,.35);opacity:0;transition:opacity .9s ease .3s}
.hero-side::after{content:"";display:block;width:28px;height:1px;background:var(--white);margin-top:8px}
.hero-stage.is-arrived .hero-side{opacity:1}
.hero-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-family:var(--ui);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--white);text-shadow:0 1px 8px rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:opacity .5s;pointer-events:none}
.hero-cue i{display:block;width:1px;height:38px;background:linear-gradient(var(--white),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1)}100%{transform:scaleY(.2);transform-origin:bottom}}
.hero-stage.is-arrived .hero-cue{opacity:0}
.hero-skip{position:absolute;right:var(--pad);bottom:22px;font-family:var(--ui);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--white);text-shadow:0 1px 8px rgba(0,0,0,.45);border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:3px;transition:opacity .4s}
.hero-stage.is-arrived .hero-skip{opacity:0;pointer-events:none}
/* reduced motion / failure: composed still, copy visible, no rail */
.hero-stage.is-static{position:relative;height:auto;min-height:calc(100vh - var(--header-h))}
.hero-stage.is-static .hero-scrim,.hero-stage.is-static .hero-block,.hero-stage.is-static .hero-side{opacity:1;transform:none}
.hero-stage.is-static .hero-cue,.hero-stage.is-static .hero-skip{display:none}
.hero-rail.is-static{height:auto}

/* search panel */
.search{margin-top:26px;background:var(--white);box-shadow:0 20px 50px -24px rgba(10,21,37,.35);max-width:930px;pointer-events:auto}
.search .tabs{display:flex;background:var(--ivory-2);font-family:var(--ui);font-size:13.5px}
.search .tabs button{background:transparent;border:0;padding:13px 24px;color:var(--ink-2);border-bottom:2px solid transparent}
.search .tabs button[aria-selected="true"]{background:var(--white);color:var(--gold-text);border-bottom-color:var(--gold);font-weight:500}
.search form{display:grid;grid-template-columns:1.35fr 1fr 1fr auto;gap:18px;padding:18px 18px 20px;align-items:end}
.search label{display:block;font-family:var(--ui);font-size:11.5px;color:var(--ink-2);letter-spacing:.02em}
.search label span{display:block;margin-bottom:8px}
.field{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--white);padding:0 12px;height:44px;font-family:var(--ui);font-size:13.5px;color:var(--ink)}
.field svg{width:15px;height:15px;color:var(--gold);flex:none}
.field input,.field select{border:0;background:transparent;width:100%;height:100%;font:inherit;color:inherit;outline:none}
.field input::placeholder{color:var(--ink-3)}
.field.plain{border:0;padding:0;border-bottom:1px solid var(--line)}
.search .btn{height:44px;padding-top:0;padding-bottom:0}
.search .btn::before{content:"";width:13px;height:13px;border:1.6px solid currentColor;border-radius:50%;margin-right:2px;box-shadow:3px 3px 0 -1px currentColor;transform:rotate(-45deg) scale(.85)}

/* ═══ about ═══ */
.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr) minmax(0,.62fr);gap:clamp(24px,3.5vw,48px);align-items:stretch}
.about-photo{position:relative;background:var(--ivory-2);overflow:hidden;border:1px solid var(--line)}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:top}
.about-body{display:flex;flex-direction:column;justify-content:center}
.about-body h2{margin-top:12px}
.about-body .bio{margin-top:16px;color:var(--ink-2);font-size:15.5px}
.sig{margin-top:22px;font-family:var(--display);font-style:italic;font-size:30px;color:var(--navy-2);line-height:1}
.sig-sub{font-family:var(--ui);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
.sig-sub b{display:block;color:var(--navy-2);font-weight:500;letter-spacing:.2em;font-size:11px}
.stats{border:1px solid var(--line);background:var(--white);display:grid}
.stat{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line-2)}
.stat:last-child{border-bottom:0}
.stat svg{width:32px;height:32px;color:var(--gold);stroke-width:1.4}
.stat .n{font-family:var(--display);font-size:28px;color:var(--navy-2);line-height:1}
.stat .l{font-family:var(--ui);font-size:12px;color:var(--ink-2);margin-top:4px}
.demo-tag{display:inline-block;font-family:var(--ui);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  border:1px dashed var(--line);padding:2px 6px;margin-left:8px;vertical-align:middle}

/* ═══ listings ═══ */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.listing{border:1px solid var(--line);background:var(--white);display:flex;flex-direction:column}
.listing .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ivory-2)}
.listing .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.listing:hover .ph img{transform:scale(1.05)}
.badge{position:absolute;top:12px;left:12px;background:var(--navy);color:var(--ivory);font-family:var(--ui);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;padding:6px 10px}
.listing .body{padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.listing .price{font-family:var(--display);font-size:24px;color:var(--navy-2);line-height:1}
.listing .where{font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.listing .specs{display:flex;gap:16px;margin-top:8px;font-family:var(--ui);font-size:11.5px;color:var(--ink-2);flex-wrap:wrap}
.listing .specs span{display:inline-flex;align-items:center;gap:6px}
.listing .specs svg{width:14px;height:14px;color:var(--gold)}
.listing .btn{margin-top:auto;justify-content:center;width:100%}

/* ═══ communities ═══ */
.comm{display:flex;flex-direction:column}
.comm .ph{aspect-ratio:16/10;overflow:hidden;background:var(--ivory-2)}
.comm .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.comm:hover .ph img{transform:scale(1.05)}
.comm h3{font-family:var(--display);font-size:15px;letter-spacing:.2em;text-transform:uppercase;margin-top:16px}
.comm p{font-family:var(--ui);font-size:13px;color:var(--ink-2);margin-top:6px;max-width:34ch}
.comm .link{margin-top:10px;font-size:9.5px}

/* ═══ help ═══ */
.help{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.help-card{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);border:1px solid var(--line);background:var(--white);overflow:hidden}
.help-card.flip{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
.help-card .ph{position:relative;background:var(--ivory-2);min-height:320px}
.help-card .ph img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.help-card .ph .tag{position:absolute;left:16px;bottom:16px;font-family:var(--ui);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--white);line-height:1.9;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.help-card .body{padding:26px 26px 24px}
.help-card .body svg{width:30px;height:30px;color:var(--gold);stroke-width:1.4;margin-bottom:10px}
.help-card h3{margin-top:4px}
.help-card .desc{font-size:14px;color:var(--ink-2);margin-top:10px}
.checks{list-style:none;margin-top:14px;display:grid;gap:8px;font-family:var(--ui);font-size:13px;color:var(--ink-2)}
.checks li{display:flex;gap:10px;align-items:center}
.checks li::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--gold);flex:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23000'/%3E%3Cpath d='M7 12.5l3 3 7-7' stroke='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23000'/%3E%3Cpath d='M7 12.5l3 3 7-7' stroke='%23fff'/%3E%3C/svg%3E") center/contain no-repeat}
.help-card .btn{margin-top:18px}

/* ═══ why ═══ */
.why{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,.62fr);gap:clamp(24px,3.5vw,44px);align-items:center}
.why-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ivory-2)}
.why-photo img{width:100%;height:100%;object-fit:cover}
.why-photo .tag{position:absolute;left:18px;bottom:18px;font-family:var(--ui);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--white);line-height:1.9;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.feat{display:grid;gap:22px}
.feat > div{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start}
.feat .ic{width:44px;height:44px;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold)}
.feat .ic svg{width:20px;height:20px;stroke-width:1.5}
.feat h3{font-size:16.5px;font-family:var(--body);font-weight:500;color:var(--navy-2)}
.feat p{font-family:var(--ui);font-size:12.5px;color:var(--ink-2);margin-top:3px}
.quote{border-left:1px solid var(--gold);padding-left:22px}
.quote p{font-family:var(--display);font-style:italic;font-size:clamp(22px,2.2vw,30px);color:var(--navy-2);line-height:1.25}
.quote cite{display:block;font-style:normal;font-family:var(--ui);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:16px}

/* ═══ testimonials ═══ */
.testi{border:1px solid var(--line);background:var(--white);padding:24px 22px 22px;display:flex;flex-direction:column;gap:14px}
.stars{color:var(--gold);letter-spacing:2px;font-size:13px}
.testi p{font-size:14.5px;color:var(--ink-2);flex:1}
.testi .who{display:flex;align-items:center;gap:12px;font-family:var(--ui);font-size:12px}
.testi .who i{width:38px;height:38px;border-radius:50%;background:var(--ivory-2);border:1px solid var(--line);display:grid;place-items:center;font-style:normal;font-family:var(--display);color:var(--gold)}
.testi .who b{display:block;font-weight:500;color:var(--navy-2);letter-spacing:.04em}
.testi .who small{color:var(--ink-3)}

/* ═══ instagram ═══ */
.ig{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.ig figure{aspect-ratio:1;overflow:hidden;background:var(--beige);position:relative}
.ig img{width:100%;height:100%;object-fit:cover}
.ig .brandtile{display:grid;place-items:center;text-align:center;font-family:var(--ui);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--navy-2);line-height:2;padding:12px}
.ig .brandtile.pattern{background:url("marca/patron-palmas.avif") center/cover}
.ig .brandtile img{width:70%;height:auto;object-fit:contain}

/* ═══ cta band ═══
   The night villa is the background, full strength. A veil darkens only the
   middle band where the copy sits, so the photo stays readable at the edges
   and the text stays legible on top. Hairline gold frame, then the copy. */
.band{position:relative;isolation:isolate;background:var(--navy);color:var(--ivory);overflow:hidden;padding:clamp(110px,17vh,190px) 0;text-align:center}
.band-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.band-bg img{width:100%;height:100%;object-fit:cover;object-position:center 60%;animation:band-drift 28s ease-in-out infinite alternate;will-change:transform}
.band-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 46% 62% at 50% 52%,rgba(10,21,37,.72),rgba(10,21,37,.28) 70%,rgba(10,21,37,0) 100%),linear-gradient(rgba(10,21,37,.42),rgba(10,21,37,.18) 45%,rgba(10,21,37,.55))}
@keyframes band-drift{from{transform:scale(1.02)}to{transform:scale(1.09)}}
.band-frame{position:absolute;inset:22px;z-index:-1;border:1px solid rgba(201,169,106,.34);pointer-events:none}
.band-frame::before,.band-frame::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:54px;height:1px;background:var(--gold-2)}
.band-frame::before{top:-1px}.band-frame::after{bottom:-1px}
.band .wrap{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.band .eyebrow.on-dark{color:var(--gold-2);text-shadow:0 1px 10px rgba(0,0,0,.5)}
.band h2{color:var(--ivory);font-size:clamp(32px,4.2vw,60px);margin-top:16px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.band h2 em{color:var(--gold-2)}
.band-actions{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.band .btn-gold{box-shadow:0 14px 34px -12px rgba(177,137,80,.6)}
.band-note{margin-top:20px;font-family:var(--ui);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(254,252,245,.8);text-shadow:0 1px 10px rgba(0,0,0,.5)}
.band .side{font-family:var(--ui);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(254,252,245,.85);line-height:2;text-align:left;max-width:12ch;position:relative;padding-left:16px;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.band .side::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--gold-2);opacity:.7}
.band .side.r{text-align:right;justify-self:end;padding-left:0;padding-right:16px}
.band .side.r::before{left:auto;right:0}

/* ═══ contact ═══ */
.contact{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,.75fr) minmax(0,1.1fr) minmax(0,.7fr);gap:clamp(22px,3vw,40px);align-items:start}
.contact h2{margin-top:12px;font-size:clamp(24px,2.5vw,34px)}
.contact .lead{margin-top:14px;font-size:14.5px}
.clist{display:grid;gap:14px;font-family:var(--ui);font-size:13.5px;color:var(--ink-2);padding-top:12px}
.clist a,.clist span{display:flex;align-items:center;gap:12px}
.clist i{width:38px;height:38px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold);flex:none}
.clist svg{width:16px;height:16px;stroke-width:1.5}
.cform{display:grid;gap:12px;background:var(--white);border:1px solid var(--line);padding:20px}
.cform input,.cform textarea{width:100%;border:1px solid var(--line);padding:12px 13px;font-family:var(--ui);font-size:13.5px;background:var(--white);color:var(--ink)}
.cform textarea{min-height:96px;resize:vertical}
.cform .btn{justify-content:center}
.cform .demo{font-family:var(--ui);font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;text-align:center}
.map{position:relative;aspect-ratio:1/1.15;background:var(--ivory-2);border:1px solid var(--line);display:grid;place-items:center;text-align:center;padding:20px;
  background-image:radial-gradient(circle at 60% 40%,rgba(177,137,80,.15),transparent 45%),linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:auto,28px 28px,28px 28px}
.map .pin{width:34px;height:34px;color:var(--gold)}
.map b{display:block;font-family:var(--ui);font-weight:500;font-size:12px;color:var(--navy-2);letter-spacing:.06em;margin-top:8px}
.map small{font-family:var(--ui);font-size:11px;color:var(--ink-3);display:block}
.map .link{margin-top:12px;font-size:9px}

/* ═══ footer ═══ */
.search-slot{display:none}
.search-slot .search{max-width:none;box-shadow:none;border:1px solid var(--line);margin-top:10px}
.footer{background:var(--navy);color:rgba(254,252,245,.78);padding:clamp(48px,7vh,72px) 0 28px}
.fgrid{display:grid;grid-template-columns:1.1fr .8fr 1.2fr .7fr;gap:clamp(24px,4vw,56px);align-items:start}
.footer .logo img{height:150px}
.footer h4{font-family:var(--ui);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2);margin-bottom:14px}
.footer ul{list-style:none;display:grid;gap:8px;font-family:var(--ui);font-size:13px}
.footer ul.two{display:grid;grid-template-columns:1fr 1fr}
.footer ul a:hover{color:var(--gold-2)}
.news{display:flex;flex-wrap:wrap;border:1px solid rgba(254,252,245,.22)}
.news .demo{flex-basis:100%;font-family:var(--ui);font-size:10.5px;color:rgba(254,252,245,.6);padding:8px 12px 0;margin:0}
.news .demo:empty{display:none}
.news input{flex:1;background:transparent;border:0;padding:11px 12px;color:var(--ivory);font-family:var(--ui);font-size:12.5px;min-width:0}
.news input::placeholder{color:rgba(254,252,245,.45)}
.news button{background:var(--gold-btn);color:var(--white);border:0;font-family:var(--ui);font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:0 16px}
.footer .social{display:flex;gap:12px;margin-top:18px}
.footer .social a{width:34px;height:34px;border:1px solid rgba(254,252,245,.22);display:grid;place-items:center;color:var(--ivory)}
.footer .social svg{width:14px;height:14px}
.footer .ppp{font-family:var(--ui);font-size:10px;letter-spacing:.26em;text-transform:uppercase;line-height:2.2;color:rgba(254,252,245,.65);border-left:1px solid rgba(254,252,245,.22);padding-left:16px}
.fbottom{margin-top:clamp(30px,5vh,48px);padding-top:20px;border-top:1px solid rgba(254,252,245,.12);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;color:rgba(254,252,245,.5)}
.legal{margin-top:16px;font-family:var(--ui);font-size:10px;line-height:1.9;color:rgba(254,252,245,.42);max-width:100ch}

/* reveals — hidden state applied by JS only */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].in{opacity:1;transform:none}

/* ═══ responsive ═══ */
@media (max-width:1100px){
  .contact{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  :root{--header-h:83px}
  .topbar{display:none}
  .nav{height:82px}
  .nav .wrap{grid-template-columns:1fr auto}
  .nav .burger{justify-self:end}
  .logo img{height:62px}
  .nav-links,.nav .btn{display:none}
  .burger{display:grid}
  .hero-rail{height:380vh}
  .hero-copy > .wrap{grid-template-columns:1fr}
  .hero-side{display:none}
  .hero-scrim{background:linear-gradient(rgba(254,252,245,.18) 0%,rgba(254,252,245,.55) 45%,rgba(254,252,245,.86) 100%)}
  .hero-block{padding:22px 20px 20px;margin-left:-20px;margin-right:-20px}
  .search-slot{display:block;background:var(--ivory-2);padding:18px var(--pad) 6px}
  .about-photo{max-height:60vh}
  .hero-copy{align-items:flex-end;padding-bottom:26px}
  .hero-block .lead{display:none}
  .search{max-width:none}
  .search form{grid-template-columns:1fr 1fr;gap:12px;padding:14px}
  .search form .btn{grid-column:1/-1}
  .search .tabs button{padding:11px 16px;font-size:12.5px}
  .hero-actions .btn-outline{display:none}
  .about,.why{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr 1fr}
  .help{grid-template-columns:1fr}
  .ig{grid-template-columns:repeat(3,1fr)}
  .band .wrap{grid-template-columns:1fr}
  .band .side{display:none}
  .band{padding:80px 0}
  .band-frame{inset:12px}
  .band-actions .btn{width:100%;justify-content:center}
  .sh .link{margin-left:0}
}
@media (max-width:600px){
  /* Section titles are set nowrap for the desktop rule-line pattern; on a
     phone they must wrap or they push the page wider than the viewport. */
  .sh h2{white-space:normal;font-size:14.5px;letter-spacing:.16em;line-height:1.5}
  .sh .rule{display:none}
  .grid3{grid-template-columns:1fr}
  .help-card,.help-card.flip{grid-template-columns:1fr}
  .help-card .ph{min-height:200px}
  .contact,.fgrid{grid-template-columns:1fr}
  .footer ul{columns:1}
  .search form{grid-template-columns:1fr}
  .search .tabs{overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .hero-cue i{animation:none}
  *{transition:none!important}
}

/* ═══ vender / invertir (added 8 sep 2026) ═══ */
.search form[hidden]{display:none!important}
.search .sell-form{grid-template-columns:1.35fr 1fr 1fr auto}
.search .sell-title{grid-column:1/-1;font-family:var(--display);font-size:17px;line-height:1.3;color:var(--navy-2);margin:-2px 0 2px}
.search .demo{grid-column:1/-1;margin:0}
.hero-block .lead strong{color:var(--navy-2);font-weight:500}
.vender-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,64px);align-items:start}
.vender h3.big,.invertir h3.big{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.2vw,40px);line-height:1.12;color:var(--navy-2);margin-top:12px}
.vender .lead,.invertir .lead{margin-top:16px;font-size:15.5px;color:var(--ink-2);max-width:60ch}
.vender .lead strong{color:var(--navy-2);font-weight:500}
.trust{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--ui);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.trust span::before{content:"◆ ";font-size:7px;vertical-align:2px}
.vender .chips{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.steps{list-style:none;counter-reset:s;display:grid;gap:0;background:var(--white);border:1px solid var(--line)}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;padding:16px 18px;border-bottom:1px solid var(--line);align-items:start}
/* The counter takes column 1 across both rows; title and text stack in column 2. */
.steps li::before{grid-column:1;grid-row:1/3}
.steps b,.steps span{grid-column:2}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--display);font-size:22px;color:var(--gold);line-height:1}
.steps b{display:block;font-family:var(--display);font-weight:400;font-size:18px;color:var(--navy-2)}
.steps span{display:block;font-size:13px;color:var(--ink-2);line-height:1.55;margin-top:3px}
.why3{margin-top:clamp(34px,5vh,56px);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why3 article{background:var(--white);border:1px solid var(--line);padding:22px;border-top:2px solid var(--gold)}
.why3 h4{font-family:var(--display);font-weight:400;font-size:19px;color:var(--navy-2);margin-bottom:8px}
.why3 p{font-size:13.5px;color:var(--ink-2);line-height:1.6}
.faq{margin-top:clamp(30px,4vh,44px);max-width:860px}
.faq details{border-top:1px solid var(--line);padding:14px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-family:var(--display);font-size:18px;color:var(--navy-2);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-family:var(--ui);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:8px;font-size:14.5px;color:var(--ink-2);line-height:1.65;max-width:70ch}
.inv-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:start}
.invertir .checks{margin-top:18px}
.pm{background:var(--navy);color:var(--ivory);padding:clamp(24px,3vw,36px);position:relative;overflow:hidden}
.pm::after{content:"";position:absolute;inset:0;background:url("marca/patron-palmas.avif") center/cover;opacity:.07;pointer-events:none}
.pm > *{position:relative;z-index:1}
.pm .eyebrow{color:var(--gold-2)}
.pm h3{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.4vw,28px);color:var(--ivory);margin-top:10px}
.pm p{margin-top:12px;font-size:14.5px;color:rgba(254,252,245,.8);line-height:1.6}
.pm .checks{margin-top:14px}
.pm .checks li{color:rgba(254,252,245,.85)}
.pm .btn-outline{color:var(--ivory);border-color:rgba(254,252,245,.5)}
.pm .btn-outline:hover{background:var(--ivory);color:var(--navy)}
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.area{display:grid;gap:8px;background:var(--navy);color:var(--ivory);padding:24px 22px 20px;position:relative;overflow:hidden;min-height:180px;border-top:2px solid var(--gold)}
.area::after{content:"";position:absolute;inset:0;background:url("marca/patron-palmas.avif") center/cover;opacity:.08;pointer-events:none}
.area > *{position:relative;z-index:1}
.area .k{font-family:var(--ui);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2)}
.area b{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.05}
.area span:not(.k){font-size:13px;color:rgba(254,252,245,.78);line-height:1.55}
.area i{font-style:normal;font-family:var(--ui);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);margin-top:auto;padding-top:8px}
.area:hover b{color:var(--gold-2)}
.cform select{height:46px;border:1px solid var(--line);background:var(--white);padding:0 12px;font-family:var(--ui);font-size:14px;color:var(--ink)}
@media (max-width:960px){
  .vender-grid,.inv-grid{grid-template-columns:1fr}
  .why3,.areas{grid-template-columns:1fr}
  .search .sell-form{grid-template-columns:1fr}
}
@media (max-width:780px){
  /* Buttons may wrap on phones: a nowrap label wider than the column drags the
     whole page into horizontal scroll. */
  .btn{white-space:normal;text-align:center;line-height:1.3}
  /* On phones the plate must not wash out the whole frame: tighter, lighter. */
  .hero-block::before{inset:-14% -12%;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(254,252,245,.82) 0%,rgba(254,252,245,.62) 55%,rgba(254,252,245,.2) 82%,rgba(254,252,245,0) 100%)}
}

/* Long checklist items must wrap on phones (the help-card items were short). */
.checks li{white-space:normal;overflow-wrap:anywhere}
.invertir .checks li,.pm .checks li{white-space:normal}

/* ═══ silo nav · mega menu ═══ */
.nav{position:relative}
.nav-links{list-style:none;margin:0;padding:0}
.nav-links > li{position:static}
.nav-links > li > a{display:inline-block;padding:10px 0}
.nav-links > li > a{white-space:nowrap}
.nav-links a[aria-current="page"]{color:var(--gold-text)}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--ivory);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 40px 60px -40px rgba(10,21,37,.35);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:70}
.has-sub:hover .mega,.has-sub:focus-within .mega,.has-sub.open .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-in{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(auto-fit,minmax(200px,1fr));gap:clamp(24px,3vw,48px);padding-top:30px;padding-bottom:32px;align-items:start}
.mega-in.with-cards{grid-template-columns:minmax(0,.9fr) minmax(0,2.4fr)}
.mega-intro{padding-right:clamp(12px,2vw,28px);border-right:1px solid var(--line)}
.mega-title{font-family:var(--display);font-size:22px;line-height:1.2;color:var(--navy-2);margin-top:10px}
.mega-text{font-size:13px;color:var(--ink-2);line-height:1.6;margin:10px 0 16px;max-width:38ch}
.mega-g{font-family:var(--ui);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-text);margin-bottom:8px}
.mega-group ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega-group a{display:grid;gap:2px;padding:9px 10px;margin-left:-10px;border-radius:2px;text-transform:none;letter-spacing:0}
.mega-group a b{font-family:var(--display);font-weight:400;font-size:16px;color:var(--navy-2)}
.mega-group a span{font-family:var(--ui);font-size:12px;color:var(--ink-2)}
.mega-group a:hover{background:var(--white)}
.mega-group a:hover b{color:var(--gold-text)}
.mega-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mega-card{display:grid;gap:4px;text-transform:none;letter-spacing:0}
.mega-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;margin-bottom:6px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.mega-card:hover img{transform:scale(1.03)}
.mega-card b{font-family:var(--display);font-weight:400;font-size:17px;color:var(--navy-2)}
.mega-card span{font-family:var(--ui);font-size:12px;color:var(--ink-2)}
.mega-card:hover b{color:var(--gold-text)}
.nav-right{display:flex;align-items:center;gap:14px;justify-self:end}
.lang{font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-2);border:1px solid var(--line);padding:8px 10px;line-height:1}
.lang:hover{border-color:var(--gold);color:var(--gold-text)}
.menu .sub-list{list-style:none;margin:4px 0 10px 14px;padding:0;display:grid;gap:6px}
.menu .sub-list a{font-size:14px;color:var(--ink-2)}
.menu .lang{display:inline-block;margin-top:14px}
@media (max-width:960px){.mega{display:none}}

/* ═══ trust strip (home) ═══ */
.trust-strip{background:var(--ivory-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:22px;padding-bottom:22px}
.trust-strip .n{font-family:var(--display);font-size:24px;color:var(--navy-2);line-height:1.1}
.trust-strip .l{font-family:var(--ui);font-size:11px;letter-spacing:.08em;color:var(--ink-2);margin-top:4px}

/* ═══ pillars (home) ═══ */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pillar{background:var(--white);border:1px solid var(--line);border-top:2px solid var(--gold);padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.pillar .k{font-family:var(--ui);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-text)}
.pillar h3{font-family:var(--display);font-weight:400;font-size:22px;color:var(--navy-2);line-height:1.15}
.pillar p{font-size:13.5px;color:var(--ink-2);line-height:1.6;flex:1}
.pillar .link{margin-top:4px}

/* ═══ DR cards (4 up) ═══ */
.comm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:14px}

/* ═══ inner pages ═══ */
.inner main{padding-top:var(--header-h)}
.lp-hero{background:var(--ivory-2);border-bottom:1px solid var(--line);padding:clamp(40px,7vh,76px) 0}
.lp-hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:start}
.crumbs{font-family:var(--ui);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.crumbs a{color:var(--gold-text)}
.lp-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.8vw,48px);line-height:1.08;color:var(--navy-2);margin-top:12px}
.lp-hero .lead{margin-top:18px;font-size:16px;color:var(--ink-2);max-width:60ch}
.lp-trust{font-family:var(--ui);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-top:16px}
.pform{background:var(--white);border:1px solid var(--line);padding:22px;display:grid;gap:12px;box-shadow:0 30px 60px -40px rgba(10,21,37,.35)}
.pform .ptitle{font-family:var(--display);font-size:20px;color:var(--navy-2);line-height:1.25}
.pform label{display:grid;gap:5px;font-family:var(--ui);font-size:11px;letter-spacing:.06em;color:var(--ink-2)}
.pform input,.pform select,.pform textarea{min-height:44px;border:1px solid var(--line);background:var(--white);padding:10px 12px;font-family:var(--ui);font-size:14px;color:var(--ink)}
.pform textarea{min-height:96px;resize:vertical}
.pform .demo{font-family:var(--ui);font-size:11px;color:var(--ink-2);margin:0}
.pform .demo:empty{display:none}
.lp-body{padding:clamp(44px,7vh,80px) 0}
.lp-body .wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,5vw,64px)}
.lp-body h2{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.6vw,30px);color:var(--navy-2);margin:34px 0 10px}
.lp-body .prose > h2:first-child{margin-top:0}
.lp-body p{font-size:15.5px;color:var(--ink-2);line-height:1.7;margin-top:10px}
.lp-body ul.bul{margin:12px 0 0 0;padding:0;list-style:none;display:grid;gap:8px}
.lp-body ul.bul li{position:relative;padding-left:22px;font-size:15px;color:var(--ink-2);line-height:1.6}
.lp-body ul.bul li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--gold)}
.aside{display:grid;gap:18px;align-content:start;position:sticky;top:150px}
.tcard{background:var(--white);border:1px solid var(--line);padding:18px}
.tcard .eyebrow{margin-bottom:8px}
.tcard ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-family:var(--ui);font-size:13px;color:var(--ink-2)}
.tcard li::before{content:"— ";color:var(--gold)}
.tcard a{color:var(--navy-2)}
.tcard a:hover{color:var(--gold-text)}
.lp-cta{background:var(--navy);color:var(--ivory);padding:clamp(48px,8vh,80px) 0;text-align:center;position:relative;overflow:hidden}
.lp-cta::after{content:"";position:absolute;inset:0;background:url("marca/patron-palmas.avif") center/cover;opacity:.07;pointer-events:none}
.lp-cta .wrap{position:relative;z-index:1}
.lp-cta h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,42px);color:var(--ivory);margin-top:12px}
.lp-cta h2 em{font-style:italic;color:var(--gold-2)}
.lp-cta .chips{margin-top:24px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media (max-width:960px){
  .lp-hero .wrap,.lp-body .wrap{grid-template-columns:1fr}.aside{position:static}
  .trust-strip .wrap{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:1fr}
  .comm-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){.comm-grid{grid-template-columns:1fr}}

/* ═══ accessibility polish (Lighthouse) ═══ */
.footer h3.fh{font-family:var(--ui);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2);margin-bottom:12px;font-weight:500}
.crumbs{color:var(--ink-2)}
.demo-tag{color:#5C6771}
.sh .note{color:#4B5561}
.lp-trust,.eyebrow,.link,.mega-g,.pillar .k,.area .k{color:#7A5C24}
.legal{color:rgba(254,252,245,.72)}
.footer .ui{color:rgba(254,252,245,.78)!important}
.band-note{color:rgba(254,252,245,.88)}
.pform .demo,.search .demo,.news .demo{color:#4B5561}
.news .demo{color:rgba(254,252,245,.85)}
p a:not(.btn):not(.link),.legal a,.tcard a,.faq p a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(131,99,40,.55)}
.link{text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(122,92,36,.45)}
.crumbs a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(122,92,36,.5)}
.crumbs span[aria-current]{color:#4B5561}

/* ═══ page banner + photo area cards ═══ */
.lp-banner{margin:0;padding:clamp(18px,3vh,28px) 0 0}
.lp-banner img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block;border-radius:2px}
.comm-grid.three{grid-template-columns:repeat(3,1fr)}
.comm .k{font-family:var(--ui);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#7A5C24;margin:12px 0 -6px}
.mega-cards.three{grid-template-columns:repeat(3,1fr)}
.mega-in.with-cards{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,2fr)}
.mega-in.with-cards:not(:has(.mega-group)){grid-template-columns:minmax(0,.9fr) minmax(0,2.4fr)}
@media (max-width:960px){.comm-grid.three{grid-template-columns:1fr}}
/* width/height attributes reserve space, but the layout ratio must win once the
   image is scaled: height:auto lets aspect-ratio + object-fit take over. */
.lp-banner img{height:auto}
.mega-card img{height:auto;aspect-ratio:16/10}
.fbottom .credit{color:var(--gold-2)}

/* Header at 961–1100px: seven menu items + language + CTA must fit without
   crushing the logo column (grid 1fr auto 1fr lets the logo shrink first). */
@media (max-width:1100px) and (min-width:961px){
  .nav-links{gap:15px;font-size:12px}
  .nav-right{gap:10px}
  .nav-right .btn{padding:14px 16px;letter-spacing:.1em;gap:8px}
  .logo img{height:92px}
}

/* About page: portrait in the hero side column (4:5, top-anchored crop) */
.lp-portrait{margin:0;width:100%;max-width:520px;justify-self:end;aspect-ratio:4/5;background:var(--ivory-2);border:1px solid var(--line);overflow:hidden;box-shadow:0 30px 60px -40px rgba(10,21,37,.35)}
.lp-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
@media (max-width:960px){.lp-portrait{max-width:none;justify-self:stretch}}

/* Footer credit links to the agency */
.fbottom .credit a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.fbottom .credit a:hover{color:var(--white)}

/* Hero: the sticky stage now grows with its copy instead of clipping it —
   overflow:hidden was cutting the eyebrow and the two action buttons on
   laptop-height viewports (stage 614 px vs copy 722 px at 1440×780). */
.hero-stage{height:auto;min-height:calc(100vh - var(--header-h))}
.hero-copy{position:relative;inset:auto;min-height:calc(100vh - var(--header-h));padding:32px var(--pad) 40px}
.hero-cue,.hero-skip{bottom:auto;top:calc(100vh - var(--header-h) - 64px)}
@media (max-width:960px){.hero-copy{padding-bottom:26px}}
/* Laptop-height viewports: compact header + hero copy so the arrival frame fits */
@media (max-height:880px) and (min-width:961px){
  :root{--header-h:132px}
  .nav{height:96px}
  .logo img{height:80px}
  .hero-block{padding:22px 30px}
  .hero-block h1{font-size:clamp(34px,4.3vw,54px)}
  .hero-block .lead{margin-top:12px;font-size:16px}
  .search{margin-top:16px}
  .search .tabs button{padding:10px 20px}
  .search form{padding:12px 14px 14px;gap:14px}
  .hero-actions{margin-top:14px}
}

/* ───────── Real forms: validation state, WhatsApp alternative, honeypot ───────── */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pform .is-invalid,.cform .is-invalid,.search .is-invalid,.news .is-invalid{border-color:#B42318!important;box-shadow:0 0 0 2px rgba(180,35,24,.15)}
.wa-alt{font-family:var(--ui);font-size:11.5px;letter-spacing:.04em;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;justify-self:start}
.wa-alt:hover{color:var(--gold-text)}
.search .wa-alt{grid-column:1/-1;margin-top:-6px}
.cform .wa-alt{margin-top:-4px}
.demo .wa-link{display:inline-block;margin-top:6px;font-weight:500;color:var(--gold-text);text-decoration:underline;text-underline-offset:3px}
.pform.mini{padding:14px 0 0;border:0;box-shadow:none;background:transparent}
/* Seller's guide card (aside of the selling pages) */
.guide-card .gtitle{font-family:var(--display);font-size:19px;line-height:1.25;color:var(--navy-2);margin:6px 0}
.guide-card > p{font-size:14px;color:var(--ink-2);line-height:1.55}
/* Floating WhatsApp on phones and tablets */
.wa-float{display:none;position:fixed;right:16px;bottom:16px;z-index:70;width:54px;height:54px;border-radius:50%;background:var(--gold-btn);color:var(--white);align-items:center;justify-content:center;box-shadow:0 14px 30px -10px rgba(10,21,37,.5)}
.wa-float svg{width:24px;height:24px}
@media (max-width:960px){.wa-float{display:flex}body.menu-open .wa-float{display:none}}
/* Equal Housing Opportunity in the footer */
.eho{display:inline-flex;align-items:center;gap:8px;margin-bottom:8px;color:rgba(254,252,245,.72);font-family:var(--ui);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.eho svg{width:22px;height:22px;flex:none}
/* Vacation rental ROI calculator */
.lp-tool{padding:clamp(28px,5vh,56px) 0 0}
.calc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,48px);background:var(--white);border:1px solid var(--line);padding:clamp(20px,3vw,36px);box-shadow:0 30px 60px -40px rgba(10,21,37,.35)}
.calc-title{font-family:var(--display);font-size:24px;color:var(--navy-2);margin:6px 0 14px;line-height:1.2}
.calc-in{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;align-content:start}
.calc-in .eyebrow,.calc-in .calc-title{grid-column:1/-1}
.calc-in label{display:grid;gap:5px;font-family:var(--ui);font-size:11.5px;letter-spacing:.02em;color:var(--ink-2)}
.calc-in input{min-height:44px;border:1px solid var(--line);padding:8px 12px;font-family:var(--ui);font-size:15px;color:var(--ink);background:var(--white);width:100%}
.calc-out{background:var(--ivory-2);border:1px solid var(--line);padding:22px;display:grid;gap:12px;align-content:start}
.calc-out .co{display:flex;justify-content:space-between;gap:12px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:10px}
.calc-out .co span{font-family:var(--ui);font-size:12px;color:var(--ink-2)}
.calc-out .co b{font-family:var(--display);font-weight:400;font-size:22px;color:var(--navy-2);white-space:nowrap}
.calc-note{font-family:var(--ui);font-size:11.5px;color:var(--ink-2);line-height:1.5;margin:4px 0 6px}
@media (max-width:960px){.calc{grid-template-columns:1fr}.calc-in{grid-template-columns:1fr}}
/* Insights: post meta and cards */
.post-meta{font-family:var(--ui);font-size:12px;letter-spacing:.06em;color:var(--ink-2);margin-top:10px}
.post-list{display:grid;gap:18px;margin-top:20px}
.post-card{border:1px solid var(--line);background:var(--white);padding:22px 24px}
.post-card h3{font-family:var(--display);font-weight:400;font-size:22px;color:var(--navy-2);margin:8px 0 6px;line-height:1.2}
.post-card h3 a{color:inherit;text-decoration:none}
.post-card h3 a:hover{color:var(--gold-text)}
.post-card p{margin-top:4px}
/* Thank-you page */
.thanks-hero .wrap.one{grid-template-columns:minmax(0,760px)}
.thanks-hero .chips{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.thanks-hero .next{margin-top:26px}
.guide-dl{margin-top:18px}