:root { --forest:#102f2b; --deep:#08231f; --sand:#f2eee4; --cream:#faf8f2; --coral:#dd6b4d; --ink:#18302c; --muted:#65746f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif; line-height:1.65; }
a { color:inherit; }
img { display:block; max-width:100%; }
h1,h2,h3,blockquote { font-family:Georgia,"Times New Roman",serif; font-weight:400; line-height:1.05; letter-spacing:-.035em; }
h1 em,h2 em { color:var(--coral); font-weight:400; }
.container { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.section { padding:112px 0; }
.eyebrow { margin:0 0 20px; color:#6c7b75; font-size:.72rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
.eyebrow.light { color:rgba(255,255,255,.74); }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 25px; border:1px solid var(--forest); background:var(--forest); color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; transition:.25s ease; }
.button:hover { background:var(--coral); border-color:var(--coral); color:#fff; transform:translateY(-2px); }
.button-small { min-height:42px; padding:0 19px; }
.button-light { background:#fff; border-color:#fff; color:var(--forest); }
.button-outline-light { background:transparent; border-color:rgba(255,255,255,.55); }
.text-link { display:inline-flex; gap:10px; align-items:center; font-size:.77rem; font-weight:700; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
.text-link span { color:var(--coral); font-size:1rem; transition:transform .2s ease; }
.text-link:hover span { transform:translateX(4px); }
.text-link.light { color:#fff; }
.site-header { position:absolute; top:0; right:0; left:0; z-index:20; border-bottom:1px solid rgba(255,255,255,.18); }
.site-nav { min-height:90px; }
.brand { display:flex; gap:12px; align-items:center; color:#fff; text-decoration:none; line-height:1; }
.brand-mark { width:48px; height:48px; flex:0 0 48px; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,.22)); }
.brand strong,.brand small { display:block; }
.brand strong { font-family:Georgia,serif; font-size:1.12rem; font-weight:400; }
.brand small { margin-top:6px; font-size:.58rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.site-header .nav-link { margin:0 9px; color:rgba(255,255,255,.88); font-size:.75rem; font-weight:650; letter-spacing:.08em; text-transform:uppercase; }
.site-header .nav-link:hover { color:#fff; }
.navbar-toggler { border-color:rgba(255,255,255,.5); filter:invert(1); }
.hero { position:relative; display:flex; min-height:92vh; align-items:flex-end; overflow:hidden; color:#fff; background:var(--deep); }
.hero-media,.hero-media img,.hero-shade { position:absolute; inset:0; width:100%; height:100%; }
.hero-media img { object-fit:cover; object-position:center 52%; animation:hero-in 1.4s ease-out both; }
.hero-shade { background:linear-gradient(90deg,rgba(5,27,24,.78) 0%,rgba(5,27,24,.35) 54%,rgba(5,27,24,.12) 100%),linear-gradient(0deg,rgba(4,25,22,.48),transparent 55%); }
.hero-content { position:relative; z-index:2; padding-bottom:105px; }
.hero h1 { max-width:780px; margin:0; color:#fff; font-size:clamp(3.5rem,7vw,7rem); }
.hero h1 em { color:#f2b497; }
.hero-lead { max-width:620px; margin:30px 0; color:rgba(255,255,255,.86); font-size:1.08rem; }
.hero-actions { display:flex; gap:28px; align-items:center; }
.scroll-cue { position:absolute; right:5vw; bottom:48px; z-index:3; display:flex; gap:12px; align-items:center; color:#fff; font-size:.64rem; font-weight:700; letter-spacing:.14em; text-decoration:none; text-transform:uppercase; transform:rotate(90deg); transform-origin:right; }
.scroll-cue span { width:48px; height:1px; background:rgba(255,255,255,.6); }
.intro { background:var(--sand); }
.intro-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:9vw; align-items:start; }
.intro h2,.section-heading h2,.local-guide h2,.contact h2 { margin:0; font-size:clamp(2.8rem,5vw,5rem); }
.intro-copy { padding-top:44px; color:#445752; font-size:1.06rem; }
.intro-copy p:first-child { margin-top:0; }
.section-heading { display:flex; justify-content:space-between; gap:40px; align-items:end; margin-bottom:52px; }
.section-heading>p { max-width:370px; color:var(--muted); }
.stay-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.stay-card { background:#fff; box-shadow:0 14px 50px rgba(14,49,43,.08); }
.stay-image { position:relative; display:block; aspect-ratio:4/3; overflow:hidden; }
.stay-image img { width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.stay-image:hover img { transform:scale(1.035); }
.image-arrow { position:absolute; right:18px; bottom:18px; display:grid; width:43px; height:43px; place-items:center; border-radius:50%; background:rgba(255,255,255,.94); color:var(--forest); }
.stay-card-body { padding:30px; }
.stay-card-body .eyebrow { margin-bottom:12px; }
.stay-card h3 { margin:0 0 15px; font-size:2rem; }
.stay-card h3 a { text-decoration:none; }
.stay-card-body>p:not(.eyebrow) { min-height:78px; color:var(--muted); }
.experience-band { padding:0; background:var(--forest); color:#fff; }
.experience-grid { display:grid; width:100%; max-width:none; grid-template-columns:1.05fr .95fr; }
.experience-image { min-height:760px; }
.experience-image img { width:100%; height:100%; object-fit:cover; }
.experience-copy { align-self:center; max-width:650px; padding:90px 8vw; }
.experience-copy h2 { margin:0; font-size:clamp(3rem,5vw,5.5rem); }
.experience-copy>p:not(.eyebrow) { margin:30px 0; color:rgba(255,255,255,.72); }
.experience-list { margin:35px 0 45px; padding:0; border-top:1px solid rgba(255,255,255,.2); list-style:none; }
.experience-list li { display:flex; gap:18px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.2); font-family:Georgia,serif; font-size:1.25rem; }
.experience-list span { color:#e7a487; font-family:"Avenir Next",sans-serif; font-size:.68rem; letter-spacing:.1em; }
.guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:10vw; }
.guide-grid>div:last-child { padding-top:52px; color:var(--muted); }
.guide-facts { display:grid; grid-template-columns:repeat(3,1fr); margin-top:45px; padding-top:30px; border-top:1px solid #d8d8cf; }
.guide-facts strong,.guide-facts span { display:block; }
.guide-facts strong { color:var(--forest); font-family:Georgia,serif; font-size:1.3rem; font-weight:400; }
.guide-facts span { margin-top:5px; font-size:.72rem; }
.story { min-height:620px; padding:135px 0; color:#fff; text-align:center; background:linear-gradient(rgba(7,36,31,.68),rgba(7,36,31,.68)),url('/images/properties/shared-location/property-exterior-aerial-02-2400.webp') center/cover; }
.story-inner { max-width:850px; }
.story blockquote { margin:35px 0; font-size:clamp(2.4rem,4.5vw,4.4rem); }
.story-inner>p:last-child { font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.contact { background:#e7ded0; text-align:center; }
.contact-inner { max-width:820px; }
.contact p:not(.eyebrow) { max-width:610px; margin:28px auto 32px; color:#596660; }
.contact small { display:block; margin-top:20px; color:#69736f; }
.site-footer { padding:65px 0 35px; background:var(--deep); color:rgba(255,255,255,.68); }
.site-footer .container { display:grid; grid-template-columns:1fr 1fr; gap:35px; }
.footer-brand strong,.footer-brand span { display:block; }
.footer-brand strong { color:#fff; font-family:Georgia,serif; font-size:1.5rem; font-weight:400; }
.footer-brand span { font-size:.73rem; letter-spacing:.12em; text-transform:uppercase; }
.footer-links { display:flex; gap:28px; justify-content:end; }
.footer-links a { color:#fff; font-size:.73rem; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
.site-footer small { grid-column:1/-1; padding-top:25px; border-top:1px solid rgba(255,255,255,.12); font-size:.68rem; }
@keyframes hero-in { from { opacity:0; transform:scale(1.04); } to { opacity:1; transform:scale(1); } }
@media (max-width:991px) { .site-header .navbar-collapse { margin:18px -24px -1px; padding:18px 24px; background:var(--deep); } .site-header .nav-link { margin:3px 0; } .stay-grid { grid-template-columns:1fr 1fr; } .stay-card:last-child { grid-column:1/-1; max-width:calc(50% - 13px); } .experience-grid { grid-template-columns:1fr; } .experience-image { min-height:520px; } }
@media (max-width:700px) { .container { width:min(100% - 30px,1180px); } .section { padding:76px 0; } .site-nav { min-height:74px; } .hero { min-height:88vh; } .hero-content { padding-bottom:76px; } .hero h1 { font-size:3.45rem; } .hero-lead { font-size:.95rem; } .hero-actions { align-items:flex-start; flex-direction:column; gap:20px; } .scroll-cue { display:none; } .intro-grid,.guide-grid { grid-template-columns:1fr; gap:32px; } .intro-copy,.guide-grid>div:last-child { padding-top:0; } .section-heading { align-items:start; flex-direction:column; margin-bottom:35px; } .stay-grid { grid-template-columns:1fr; } .stay-card:last-child { grid-column:auto; max-width:none; } .stay-card-body>p:not(.eyebrow) { min-height:auto; } .experience-image { min-height:380px; } .experience-copy { padding:70px 26px; } .guide-facts { gap:14px; } .story { min-height:520px; padding:90px 0; } .site-footer .container { grid-template-columns:1fr; } .footer-links { justify-content:start; flex-wrap:wrap; } .site-footer small { grid-column:auto; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Interior pages */
body:not(.home-page) .site-header { background:linear-gradient(rgba(5,30,26,.38),transparent); }
.page-hero { display:flex; min-height:640px; align-items:flex-end; padding:170px 0 90px; color:#fff; background-position:center; background-size:cover; }
.page-hero-stays { background-image:linear-gradient(90deg,rgba(4,30,26,.76),rgba(4,30,26,.2)),url('/images/properties/shared-location/property-exterior-aerial-01-2400.webp'); }
.page-hero-experience { background-image:linear-gradient(90deg,rgba(4,30,26,.8),rgba(4,30,26,.2)),url('/images/properties/shared-location/playa-hermosa-beach-proximity-01-2400.webp'); }
.page-hero-concierge { background-image:linear-gradient(90deg,rgba(4,30,26,.82),rgba(4,30,26,.15)),url('/images/properties/shared-location/playa-hermosa-sunset-01-2400.webp'); }
.page-hero-surf { background-image:linear-gradient(90deg,rgba(4,30,26,.84),rgba(4,30,26,.18)),url('/images/properties/shared-location/playa-hermosa-aerial-ocean-01-2400.webp'); }
.page-hero h1 { max-width:800px; margin:0; font-size:clamp(3.8rem,7vw,7rem); }
.page-hero>div>p:last-child { max-width:620px; margin:28px 0 0; color:rgba(255,255,255,.82); font-size:1.08rem; }
.listing-stack { display:grid; gap:100px; }
.listing-row { display:grid; grid-template-columns:1.15fr .85fr; gap:7vw; align-items:center; }
.listing-row.reverse .listing-photo { order:2; }
.listing-photo { display:block; aspect-ratio:5/4; overflow:hidden; }
.listing-photo img { width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.listing-photo:hover img { transform:scale(1.025); }
.listing-copy h2,.detail-grid h2,.experience-page-grid h2,.surf-grid h2 { margin:0 0 25px; font-size:clamp(2.8rem,4.5vw,4.8rem); }
.listing-copy>p:not(.eyebrow),.lead-copy { color:var(--muted); font-size:1.05rem; }
.listing-copy ul { margin:28px 0 34px; padding:20px 0; border-block:1px solid #d8dcd7; list-style:none; }
.listing-copy li { padding:5px 0; }
.rental-hero { position:relative; display:flex; min-height:82vh; align-items:flex-end; overflow:hidden; color:#fff; }
.rental-hero>img,.rental-hero-shade { position:absolute; inset:0; width:100%; height:100%; }
.rental-hero>img { object-fit:cover; }
.rental-hero-shade { background:linear-gradient(0deg,rgba(4,27,23,.75),transparent 68%); }
.rental-hero .container { position:relative; z-index:1; padding-bottom:80px; }
.rental-hero h1 { max-width:900px; margin:0; font-size:clamp(3.8rem,7vw,7rem); }
.rental-hero .container>p:last-child { max-width:600px; margin:22px 0 0; color:rgba(255,255,255,.84); }
.detail-grid { display:grid; grid-template-columns:1fr 390px; gap:10vw; align-items:start; }
.detail-panel { padding:38px; background:var(--sand); }
.detail-panel h3,.experience-page-grid aside h3 { margin:0 0 20px; font-family:Georgia,serif; font-size:1.8rem; font-weight:400; }
.detail-panel ul,.experience-page-grid aside ul { margin:0 0 30px; padding:0; list-style:none; }
.detail-panel li,.experience-page-grid aside li { padding:10px 0; border-bottom:1px solid #d3d4ca; }
.gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:8px; background:var(--cream); }
.gallery-grid img { width:100%; height:440px; grid-column:span 4; object-fit:cover; }
.gallery-grid img:first-child,.gallery-grid img:nth-child(5) { grid-column:span 8; }
.facts-section { background:var(--sand); }
.facts-grid { display:grid; grid-template-columns:1fr 1fr; gap:10vw; }
.facts-grid h2 { margin:0 0 30px; font-size:4rem; }
.bed-list { margin:0; padding:0; list-style:none; }
.bed-list li { display:flex; justify-content:space-between; padding:18px 0; border-bottom:1px solid #ced2ca; }
.bed-list strong { font-weight:600; }
.info-note { padding:22px 0; border-bottom:1px solid #ced2ca; }
.info-note strong { font-family:Georgia,serif; font-size:1.3rem; font-weight:400; }
.info-note p { margin:7px 0 0; color:var(--muted); }
.next-step { padding:110px 0; color:#fff; text-align:center; background:var(--forest); }
.next-step h2 { margin:0 0 38px; font-size:clamp(3rem,5vw,5rem); }
.experience-page-grid,.surf-grid { display:grid; grid-template-columns:1fr .8fr; gap:10vw; align-items:start; }
.experience-page-grid>div>p:not(.eyebrow),.surf-grid>div>p:not(.eyebrow) { margin-bottom:35px; color:var(--muted); font-size:1.05rem; }
.experience-page-grid aside { padding:40px; background:var(--sand); }
.seo-links { padding:45px 0; background:var(--deep); color:#fff; }
.seo-links .container { display:flex; gap:25px; justify-content:space-between; align-items:center; }
.seo-links p { margin:0; font-family:Georgia,serif; font-size:1.25rem; }
.seo-links .container div { display:flex; gap:18px; flex-wrap:wrap; justify-content:end; }
.seo-links a { color:rgba(255,255,255,.75); font-size:.68rem; letter-spacing:.09em; text-decoration:none; text-transform:uppercase; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.service-grid article { min-height:270px; padding:34px; background:var(--sand); }
.service-grid article>span { color:var(--coral); }
.service-grid h3 { margin:48px 0 15px; font-size:1.8rem; }
.service-grid p { color:var(--muted); }
.report-placeholder { padding:50px; color:#fff; background:var(--forest); }
.report-placeholder span,.report-placeholder strong { display:block; }
.report-placeholder span { color:rgba(255,255,255,.6); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; }
.report-placeholder strong { margin:25px 0 10px; font-family:Georgia,serif; font-size:3rem; font-weight:400; }
.report-placeholder p { color:rgba(255,255,255,.66); }
@media (max-width:900px) { .listing-row,.detail-grid,.experience-page-grid,.surf-grid { grid-template-columns:1fr; gap:45px; } .listing-row.reverse .listing-photo { order:initial; } .gallery-grid img,.gallery-grid img:first-child,.gallery-grid img:nth-child(5) { height:340px; grid-column:span 6; } .service-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:700px) { .page-hero { min-height:560px; padding-bottom:65px; } .listing-stack { gap:70px; } .rental-hero { min-height:75vh; } .rental-hero .container { padding-bottom:55px; } .gallery-grid img,.gallery-grid img:first-child,.gallery-grid img:nth-child(5) { height:290px; grid-column:1/-1; } .facts-grid { grid-template-columns:1fr; gap:55px; } .service-grid { grid-template-columns:1fr; } .seo-links .container { align-items:flex-start; flex-direction:column; } .seo-links .container div { justify-content:start; } }
.form-hero,.thanks-page { display:flex; min-height:560px; align-items:flex-end; padding:170px 0 80px; color:#fff; background:linear-gradient(90deg,rgba(4,30,26,.84),rgba(4,30,26,.25)),url('/images/properties/shared-location/property-exterior-aerial-03-2400.webp') center/cover; }
.form-hero h1,.thanks-page h1 { margin:0; font-size:clamp(3.7rem,7vw,6.5rem); }
.form-hero .container>p:last-child,.thanks-page .container>p:not(.eyebrow) { max-width:620px; margin:25px 0 0; color:rgba(255,255,255,.8); }
.inquiry-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:9vw; align-items:start; }
.inquiry-grid h2 { margin:0; font-size:clamp(2.8rem,4.5vw,4.8rem); }
.inquiry-grid>div>p:not(.eyebrow) { color:var(--muted); }
.trust-note { display:flex; gap:5px; flex-direction:column; margin-top:35px; padding:22px; background:var(--sand); }
.trust-note strong { font-family:Georgia,serif; font-size:1.2rem; font-weight:400; }
.trust-note span { color:var(--muted); font-size:.82rem; }
.inquiry-form { display:grid; gap:10px; padding:45px; background:#fff; box-shadow:0 18px 60px rgba(10,42,36,.09); }
.inquiry-form label { margin-top:9px; font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.inquiry-form input,.inquiry-form select,.inquiry-form textarea { width:100%; padding:13px 14px; border:1px solid #c9d0cb; border-radius:0; color:var(--ink); background:#fff; font:inherit; }
.inquiry-form input:focus,.inquiry-form select:focus,.inquiry-form textarea:focus { outline:2px solid var(--coral); outline-offset:1px; }
.field-pair { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field-pair>div { display:grid; gap:10px; }
.check-field { display:flex; gap:10px; align-items:center; margin:15px 0!important; letter-spacing:0!important; text-transform:none!important; }
.check-field input { width:auto; }
.inquiry-form span.field-validation-error,.validation-summary { color:#a53322; font-size:.78rem; }
.inquiry-form .button { margin-top:22px; }
.inquiry-form small { color:var(--muted); }
.thanks-page { min-height:100vh; align-items:center; padding-bottom:80px; }
.thanks-page .button { margin-top:35px; }
@media (max-width:800px) { .inquiry-grid { grid-template-columns:1fr; } }
@media (max-width:600px) { .inquiry-form { padding:28px 20px; } .field-pair { grid-template-columns:1fr; gap:10px; } }
.policy-hero { display:flex; min-height:400px; align-items:flex-end; padding:150px 0 65px; color:#fff; background:var(--forest); }
.policy-hero h1 { margin:0; font-size:5rem; }
.policy { background:var(--cream); }
.policy .container { max-width:780px; }
.policy h2 { margin:42px 0 12px; font-size:2rem; }
.policy p { color:var(--muted); }
.policy-date { font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }