:root{
--teal:#1E8A85; --teal-deep:#14615D; --teal-darker:#0D3E3B; --teal-light:#E4F4F2;
--paper:#FFFFFF; --sand:#FAF8F5; --ink:#16302E; --ink-soft:#5A716F; --line:#E3E8E7;
--star:#F5A623;
--hdr-h:172px;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden}
body{font-family:'Inter',system-ui,sans-serif; background:var(--sand); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body.locked{overflow:hidden}
.overlay [hidden]{display:none!important}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; touch-action:manipulation}
a{touch-action:manipulation}
img{max-width:100%; display:block}
svg{max-width:100%}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
section{scroll-margin-top:var(--hdr-h)}

.eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#187772}
.h2{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; font-size:clamp(30px,4.4vw,46px); line-height:1.12}
.lede{font-size:16px; color:var(--ink-soft); line-height:1.7}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 22px; border-radius:999px; font-size:14px; font-weight:700; transition:transform .22s cubic-bezier(.34,1.3,.64,1), box-shadow .22s, background .3s, color .22s; white-space:nowrap}
.btn-p{background:linear-gradient(135deg,var(--teal-deep),var(--teal-darker)); color:#fff; box-shadow:0 10px 26px rgba(13,62,59,.4)}
.btn-p:hover{transform:translateY(-2px) scale(1.03); box-shadow:0 16px 36px rgba(13,62,59,.45); background:linear-gradient(135deg,var(--teal),var(--teal-deep))}
.btn-o{border:1.5px solid var(--ink); color:var(--ink)}
.btn-o:hover{background:var(--ink); color:#fff}
.btn-w{border:1.5px solid rgba(255,255,255,.6); color:#fff; backdrop-filter:blur(4px); background:rgba(255,255,255,.08)}
.btn-w:hover{background:#fff; color:var(--teal-deep); border-color:#fff}

/* ==================== HEADER ==================== */
/* header scaled up ~30% */
.hdr{position:sticky; top:0; z-index:800; background:var(--paper); padding:13px 0; box-shadow:0 1px 0 var(--line), 0 6px 20px rgba(20,97,93,.05)}
/* header spans the full window, not the 1180px content column, so the logo
sits hard left and Book Now sits hard right on wide screens */
.hdr-in{display:flex; align-items:center; justify-content:space-between; gap:20px;
max-width:none; width:100%; margin:0; padding:0 clamp(24px,3.5vw,64px)}
.hdr-logo img{height:146px; width:auto}
.nav{display:flex; align-items:center; gap:28px}
.nav a{font-size:15.5px; font-weight:600; color:var(--ink); position:relative; padding:4px 0}
.nav a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--teal); transition:width .22s}
.nav a:hover::after{width:100%}
.hdr-right{display:flex; align-items:center; gap:18px}

/* Google reviews block — enlarged, vertically centred in the header */
.rev-chip{display:flex; align-items:center; align-self:center; gap:20px; padding:20px 32px;
border:2px solid var(--teal); border-radius:18px; background:var(--teal-light);
box-shadow:0 8px 22px rgba(20,97,93,.16);
transition:border-color .18s, box-shadow .18s, transform .18s, background .18s}
.rev-chip:hover{border-color:var(--teal-deep); background:#D7EDEA; box-shadow:0 14px 32px rgba(20,97,93,.26); transform:translateY(-2px)}
.rev-chip-score{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:66px; line-height:.9; color:var(--teal-deep)}
.rev-chip-stars{display:flex; gap:4px; margin-bottom:6px}
.rev-chip-stars svg{fill:var(--star); stroke:none; width:21px; height:21px}
.rev-chip-txt{font-size:16px; font-weight:700; color:var(--ink-soft); letter-spacing:.01em; white-space:nowrap; display:block}
.rev-chip-txt b{color:var(--ink); font-size:18px}

.hdr-phone{font-size:16px; font-weight:700; color:var(--teal-deep); white-space:nowrap}
.hdr-right .btn{padding:11px 22px; font-size:14px}
.burger{display:none; align-items:center; gap:10px; height:42px; padding:0 17px 0 14px; border-radius:999px; background:var(--teal-light); border:1.5px solid var(--teal)}
.burger-lines{display:block; width:21px; height:2px; background:var(--teal-deep); position:relative; flex-shrink:0}
.burger-lines::before,.burger-lines::after{content:''; position:absolute; left:0; width:21px; height:2px; background:var(--teal-deep)}
.burger-lines::before{top:-6.5px} .burger-lines::after{top:6.5px}
.burger-label{font-size:14.5px; font-weight:700; color:var(--teal-deep)}

/* Mobile-only tap-to-call icon — the full phone number and .hdr-right are
   hidden below 1100px (folded into the burger drawer instead), so without
   this the number isn't reachable without opening the menu. */
.hdr-call-mobile{display:none; align-items:center; justify-content:center; width:42px; height:42px; border-radius:999px; background:#e8f7ed; border:1.5px solid #287e4e; color:#176138; flex-shrink:0}
.hdr-call-mobile svg{width:20px; height:20px; display:block}

.drawer{position:fixed; inset:0; z-index:990; background:var(--paper); display:none; flex-direction:column; padding:18px 24px 40px; padding-top:calc(18px + env(safe-area-inset-top)); padding-bottom:calc(40px + env(safe-area-inset-bottom)); overflow-y:auto; -webkit-overflow-scrolling:touch}
.drawer.open{display:flex}
.drawer-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px}
.drawer-top img{height:114px; width:auto}
.drawer-x{width:44px; height:44px; border-radius:999px; background:var(--sand); display:flex; align-items:center; justify-content:center}
.drawer .rev-chip{margin-bottom:22px; justify-content:center}
.drawer a.dlink{font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:600; padding:14px 0; border-bottom:1px solid var(--line)}
.drawer-foot{margin-top:28px; display:flex; flex-direction:column; gap:12px}

@media (max-width:1420px){ .nav{gap:20px} .nav a{font-size:14.5px} .hdr-phone{display:none} }
@media (max-width:1240px){ .rev-chip{padding:16px 24px; gap:14px} .rev-chip-score{font-size:52px} .rev-chip-txt{font-size:14px} .rev-chip-txt b{font-size:15.5px} }
@media (max-width:1100px){ .nav,.hdr-right{display:none} .burger{display:flex} .hdr-call-mobile{display:flex} :root{--hdr-h:140px} .hdr-logo img{height:114px} }
@media (max-width:560px){
  .hdr-in{gap:8px}
  .hdr-logo img{height:84px}
  .hdr-call-mobile{width:40px; height:40px; border-radius:10px}
  .hdr-call-mobile svg{width:18px; height:18px}
  .burger{height:40px; padding:0 12px}
  .burger-label{display:none}
}

/* ==================== HERO (Ken Burns motion) ==================== */
.hero{position:relative; min-height:clamp(560px,82vh,760px); display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; background:var(--ink)}
.kb{position:absolute; inset:0; z-index:0}
/* 4 slides × 2s each = 8s full loop. To change pace, edit --kb-loop
and set each delay below to loop ÷ 4. */
.kb{--kb-loop:8s}
.kb-slide{
position:absolute; inset:0; background-size:cover; background-position:center;
opacity:0; animation:kbCycle var(--kb-loop) infinite; will-change:transform,opacity;
}
.kb-slide:nth-child(1){animation-delay:0s; animation-name:kbCycleFirst} /* first photo shows at once; only later slides fade in */
.kb-slide:nth-child(2){animation-delay:2s}
.kb-slide:nth-child(3){animation-delay:4s}
.kb-slide:nth-child(4){animation-delay:6s}
@keyframes kbCycleFirst{
0% {opacity:1; transform:scale(1.00)}
25% {opacity:1}
30% {opacity:0}
100% {opacity:0; transform:scale(1.16)}
}
@keyframes kbCycle{
0% {opacity:0; transform:scale(1.00)}
5% {opacity:1}
25% {opacity:1}
30% {opacity:0}
100% {opacity:0; transform:scale(1.16)}
}
.kb-veil{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,40,38,.62), rgba(10,40,38,.48) 45%, rgba(10,40,38,.78))}
.hero-in{position:relative; z-index:2; color:#fff; padding:70px 24px}
.hero-eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.88); margin-bottom:18px}
.hero-title{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(38px,6.4vw,70px); line-height:1.05; letter-spacing:-.015em; max-width:15ch; margin:0 auto 20px; text-shadow:0 2px 24px rgba(0,0,0,.3)}
.hero-title em{font-style:italic}
.hero-sub{font-size:clamp(15.5px,2vw,18px); color:rgba(255,255,255,.9); max-width:54ch; margin:0 auto 32px; line-height:1.65}
.hero-cta{display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-bottom:30px}
.hero-micro{font-size:13px; color:rgba(255,255,255,.82); display:flex; gap:22px; justify-content:center; flex-wrap:wrap}
.hero-micro span{display:flex; align-items:center; gap:7px}
.hero-micro svg{stroke:#7FD6CF; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

@media (prefers-reduced-motion:reduce){
.kb-slide{animation:kbFadeOnly var(--kb-loop) infinite}
@keyframes kbFadeOnly{0%{opacity:0}5%{opacity:1}25%{opacity:1}30%{opacity:0}100%{opacity:0}}
}

/* ==================== SKIN STRIP ==================== */
.skin{background:var(--paper); padding:58px 0 40px}
.skin-head{text-align:center; margin-bottom:30px}
/* Show the source image in full — no cropping. It sits on a soft teal wash
so it doesn't read as a bare white rectangle. */
.skin-frame{max-width:1000px; margin:0 auto; border-radius:20px; overflow:hidden;
box-shadow:0 22px 54px -22px rgba(20,97,93,.3);
background:linear-gradient(150deg,var(--teal-light),#D6EAE8);
padding:clamp(14px,2.4vw,28px)}
.skin-frame img{width:100%; height:auto; display:block; border-radius:10px}
.scale-row{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; max-width:1000px; margin:18px auto 0}
@media (max-width:640px){ .scale-row{grid-template-columns:repeat(3,1fr)} }
.scale-chip{text-align:center; font-size:11.5px; font-weight:700; letter-spacing:.08em; padding:10px 4px; border-radius:8px; color:#fff}
.skin-note{max-width:640px; margin:24px auto 0; text-align:center; font-size:13.5px; color:var(--ink-soft); line-height:1.65}

/* ==================== SECTIONS ==================== */
.sec{padding:82px 0}
.tagline-line{font-size:clamp(20px,3.5vw,42px); white-space:nowrap; margin-bottom:24px}
#services{padding-top:44px}
#services .sec-head{margin-bottom:40px}
@media(max-width:760px){.tagline-line{white-space:normal; font-size:clamp(20px,5.4vw,26px); margin-bottom:16px}}
.sec-head{text-align:center; max-width:60ch; margin:0 auto 46px}
.sec-head .h2{margin:12px 0 14px}

/* service boxes */
.ways-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; scroll-margin-top:96px}
@media (max-width:1000px){ .ways-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .ways-grid{grid-template-columns:1fr; gap:26px} }
.way{display:flex; flex-direction:column}
/* whole card is the link — thicker teal frame, click anywhere */
a.way{color:inherit; text-decoration:none; cursor:pointer}
.way-box{border:6px solid var(--teal); border-radius:4px; padding:18px 18px 26px; background:var(--paper); flex:1; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s, border-color .2s}
/* hover: inset ring doubles the apparent frame to 12px without reflowing text */
.way:hover .way-box{transform:translateY(-3px); border-color:var(--teal-deep); box-shadow:inset 0 0 0 6px var(--teal-deep), 0 18px 40px -18px rgba(20,97,93,.38)}
a.way:focus-visible{outline:3px solid var(--teal-deep); outline-offset:4px; border-radius:6px}
.way-img{aspect-ratio:1/1; border-radius:2px; overflow:hidden; margin-bottom:22px; background:var(--teal-light)}
.way-img img{width:100%; height:100%; object-fit:cover}
.way h3{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:25px; text-align:center; margin-bottom:12px; line-height:1.2}
.way p{font-size:14px; color:var(--ink-soft); line-height:1.7; text-align:center; margin:0}

/* assessment band */
.assess-band{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:74px 0}
.assess-in{display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:center}
@media (max-width:860px){ .assess-in{grid-template-columns:1fr; gap:32px; text-align:center} }
.assess-in .h2{margin:12px 0 16px}
.assess-steps{list-style:none; margin:24px 0 30px; display:flex; flex-direction:column; gap:13px}
@media (max-width:860px){ .assess-steps{align-items:center} }
.assess-steps li{display:flex; align-items:center; gap:12px; font-size:15px}
.step-n{width:28px; height:28px; border-radius:50%; background:var(--teal-light); color:var(--teal-deep); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.assess-art{background:linear-gradient(160deg,var(--teal-light),#D3E9E6); border-radius:22px; padding:38px; display:flex; align-items:center; justify-content:center; box-shadow:0 20px 50px -20px rgba(20,97,93,.34)}
.assess-art img{width:100%; max-width:300px; height:auto; display:block; filter:drop-shadow(0 14px 24px rgba(20,97,93,.22))}

/* reviews section (full, in-page) */
.revsec{background:linear-gradient(165deg,var(--teal-deep),var(--teal) 60%,#2AA09A); color:#fff; padding:59px 0}
.revsec .eyebrow,.revsec .eyebrow a,.revsec .lede{color:#fff}
.revsec-top{display:flex; align-items:center; justify-content:center; gap:clamp(16px,4vw,42px); flex-wrap:wrap; text-align:center; margin-bottom:32px}
.revsec-score{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(56px,8vw,84px); line-height:.95}
.revsec-mid{display:flex; flex-direction:column; align-items:center; gap:8px}
.revsec-stars{display:flex; gap:4px}
.revsec-stars svg{fill:#FFD37A; stroke:none}
.revsec-count{font-size:16px}
.revsec-count b{font-weight:700}
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){ .quotes{grid-template-columns:1fr} }
.quote{background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); border-radius:16px; padding:22px 24px}
.quote-stars{display:flex; gap:3px; margin-bottom:11px}
.quote-stars svg{fill:#FFD37A; stroke:none}
.quote-body{font-size:14.5px; line-height:1.65; margin-bottom:13px}
.quote-who{font-size:12.5px; font-weight:600; color:rgba(255,255,255,.82)}
.quote-flag{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,255,255,.24); padding:4px 9px; border-radius:5px; margin-bottom:11px}
.revsec-links{display:flex; gap:12px; justify-content:center; margin-top:34px; flex-wrap:wrap}
.revsec-links .btn{color:#16302E; border:1px solid #4E7771; backdrop-filter:none}
.revsec-links .btn-read{background:#FBEFC8}
.revsec-links .btn-read:hover{background:#F3E2AE}
.revsec-links .btn-leave{background:#E6E0F8}
.revsec-links .btn-leave:hover{background:#D9D0F3}
.revsec-links .btn:focus-visible{outline:3px solid #fff; outline-offset:2px}

/* micro-trust line placed next to booking CTAs / forms */
.trust-line{font-size:13px; font-weight:600; color:var(--teal-deep); text-align:center; margin:12px 0 0; line-height:1.5}

/* footer "leave a review" nudge */
.foot-review{background:none; border:0; border-radius:0; padding:0; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:30px}
.foot-review p{font-size:15px; color:#fff; font-weight:600; margin:0}
.foot-review a.btn{font-size:14px; padding:11px 22px; text-decoration:none; color:#fff}
.foot-review a.btn:hover{color:var(--teal-deep)}
@media (max-width:600px){ .foot-review{justify-content:center; text-align:center} }

/* about */
.pillars{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:520px){ .pillars{grid-template-columns:1fr} }

/* About / Our Mission — tinted band so it separates from the white contact section below */
#about{background:var(--sand); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:66px 0}
.about-in{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
@media (max-width:860px){ .about-in{grid-template-columns:1fr; gap:30px} #about{padding:48px 0} }
.about-in .h2{margin:12px 0 14px}
.about-in p{margin-bottom:12px}
.mission-photo{margin:18px 0 0; width:190px; aspect-ratio:1/1; border-radius:50%; overflow:hidden; box-shadow:0 16px 36px -14px rgba(20,97,93,.32)}
.mission-photo img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:860px){ .mission-photo{margin-left:auto; margin-right:auto} }
.pillar{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:24px 22px; box-shadow:0 10px 30px -14px rgba(20,97,93,.2)}
.pillar-n{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:34px; color:var(--teal); line-height:1; margin-bottom:9px}
.pillar h3{font-size:14.5px; font-weight:700; margin-bottom:6px}
.pillar p{font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0}

/* contact + footer */
.contact{background:var(--paper); border-top:1px solid var(--line)}
.contact-in{display:grid; grid-template-columns:1fr 1.15fr; gap:52px; align-items:start}
@media (max-width:860px){ .contact-in{grid-template-columns:1fr; gap:32px} }
.info-row{display:flex; gap:14px; margin-bottom:22px}
.info-ico{width:42px; height:42px; border-radius:12px; background:var(--teal-light); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.info-ico svg{stroke:var(--teal-deep); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.info-row h3{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px}
.info-row p, .info-row a{font-size:15.5px; font-weight:600; line-height:1.5}
.info-row a:hover{color:var(--teal-deep)}
.socials{display:flex; gap:12px; margin-top:24px}
.social{width:44px; height:44px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center; transition:background .16s, transform .16s}
.social:hover{background:var(--teal); transform:translateY(-2px)}
.social svg{fill:#fff; stroke:none}
.map-box{border-radius:20px; overflow:hidden; border:1px solid var(--line); box-shadow:0 18px 44px -20px rgba(20,97,93,.28); min-height:380px}
.map-box:focus-within{outline:3px solid #14615D; outline-offset:3px}
.map-box iframe{width:100%; height:100%; min-height:380px; border:0; display:block}

.foot{background:var(--ink); color:rgba(255,255,255,.72); padding:52px 0 30px; font-size:13.5px}
.foot-in{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:38px; margin-bottom:36px}
@media (max-width:760px){ .foot-in{grid-template-columns:1fr; gap:26px} }
.foot h2{color:#fff; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px}
.foot ul{list-style:none; display:flex; flex-direction:column; gap:9px}
.foot a:hover{color:#fff}
.foot-logo{background:#fff; border-radius:14px; padding:10px 14px; display:inline-block; margin-bottom:16px}
.foot-logo img{height:76px; width:auto}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14); padding-top:22px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px}

/* ==================== COUPON POPUP ==================== */
.promo-scrim{position:fixed; inset:0; z-index:1100; background:rgba(10,40,38,.55); backdrop-filter:blur(3px); display:none; align-items:flex-start; justify-content:center; padding:60px 20px 20px; padding-bottom:calc(20px + env(safe-area-inset-bottom)); overflow-y:auto; -webkit-overflow-scrolling:touch}
.promo-scrim.open{display:flex; animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.promo{width:100%; max-width:460px; background:var(--paper); border-radius:22px; overflow:hidden; box-shadow:0 34px 80px rgba(10,40,38,.4); position:relative; animation:promoIn .38s cubic-bezier(.34,1.3,.64,1)}
@keyframes promoIn{from{opacity:0; transform:translateY(-22px) scale(.96)}to{opacity:1; transform:translateY(0) scale(1)}}
.promo-x{position:absolute; top:14px; right:14px; z-index:3; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(0,0,0,.16)}
.promo-x:hover{background:#fff}
.promo-top{background:linear-gradient(140deg,var(--teal),var(--teal-deep)); color:#fff; padding:34px 30px 30px; text-align:center; position:relative; overflow:hidden}
.promo-top::after{content:''; position:absolute; bottom:-70px; right:-50px; width:190px; height:190px; border-radius:50%; background:rgba(255,255,255,.09)}
.promo-badge{position:relative; z-index:1; display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; background:rgba(255,255,255,.22); padding:6px 13px; border-radius:99px; margin-bottom:14px}
.promo-head{position:relative; z-index:1; font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; font-size:clamp(30px,6vw,40px); line-height:1.08; margin-bottom:10px}
.promo-sub{position:relative; z-index:1; font-size:14.5px; opacity:.94; line-height:1.55; max-width:32ch; margin:0 auto}
.promo-body{padding:26px 30px 30px}
.promo-code{display:flex; align-items:center; justify-content:center; gap:10px; border:1.5px dashed var(--teal); border-radius:12px; padding:14px; margin-bottom:20px; background:var(--teal-light)}
.promo-code-label{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.promo-code-val{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:24px; color:var(--teal-deep); letter-spacing:.04em}
.promo-in{width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:11px; font-family:inherit; font-size:16px; background:var(--sand); margin-bottom:11px; transition:border-color .15s, box-shadow .15s, background .15s}
.promo-in:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 4px var(--teal-light); background:var(--paper)}
.promo-send{display:block; width:100%; padding:15px; border-radius:999px; color:#fff; text-align:center; text-decoration:none; font-size:14px; font-weight:800; background:linear-gradient(135deg,var(--teal),var(--teal-deep)); box-shadow:0 10px 24px rgba(20,97,93,.28); transition:transform .15s}
.promo-code[hidden]{display:none!important}
.promo-send:hover{transform:translateY(-1px)}
.promo-fine{font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:13px; line-height:1.5}
.promo-skip{display:block; width:100%; text-align:center; margin-top:14px; font-size:12.5px; font-weight:600; color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px}
.promo-skip:hover{color:var(--ink)}
.promo-done{display:none; padding:44px 30px; text-align:center}
.promo-done.show{display:block}
.promo-done .succ-ring{margin-bottom:18px}

/* ==================== ACTION RAIL ==================== */
.action-rail{position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:900; display:flex; flex-direction:column; gap:12px}
.action-rail > .rail-mobile-only{display:none}
.rail-mobile-label{display:none}
.rail-btn{position:relative; width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-deep)); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(20,97,93,.32); transition:transform .18s cubic-bezier(.34,1.4,.64,1), box-shadow .18s}
.rail-btn:hover{transform:scale(1.08); box-shadow:0 12px 28px rgba(20,97,93,.42)}
.rail-btn svg{stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rail-label{position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(6px); background:var(--ink); color:#fff; font-size:12.5px; font-weight:600; white-space:nowrap; padding:8px 13px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; box-shadow:0 6px 18px rgba(0,0,0,.18)}
.rail-label::after{content:''; position:absolute; left:100%; top:50%; transform:translateY(-50%); border:6px solid transparent; border-left-color:var(--ink)}
.rail-btn:hover .rail-label{opacity:1; transform:translateY(-50%) translateX(0)}

/* ==================== OVERLAYS ==================== */
.overlay{position:fixed; inset:0; z-index:1000; background:var(--paper); display:none; flex-direction:column}
.overlay.open{display:flex; animation:ovIn .3s cubic-bezier(.4,0,.2,1)}
@keyframes ovIn{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)}}
.ov-bar{flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:18px 26px; border-bottom:1px solid var(--line)}
.ov-bar-title{font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:600}
.ov-bar-right{display:flex; align-items:center; gap:16px}
.ov-back{font-size:13.5px; font-weight:600; color:var(--ink-soft)}
.ov-x{width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .15s}
.ov-x:hover{background:var(--sand)}
.ov-scroll{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:44px 26px 70px; padding-bottom:calc(70px + env(safe-area-inset-bottom))}
.ov-inner{max-width:760px; margin:0 auto}
@media (max-width:640px){ .ov-bar{padding:14px 16px} .ov-scroll{padding:28px 16px 60px} .ov-back{display:none} }

.f-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px}
@media (max-width:600px){ .f-row{grid-template-columns:1fr; gap:12px} }
.f-in{width:100%; padding:15px 17px; border:1.5px solid var(--line); border-radius:11px; font-family:inherit; font-size:16px; background:var(--sand); transition:border-color .15s, box-shadow .15s, background .15s}
.f-in:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 4px var(--teal-light); background:var(--paper)}
textarea.f-in{min-height:130px; resize:vertical}
.f-legend{font-size:14px; font-weight:600; margin:30px 0 12px}
.f-legend span.req{color:var(--teal)}
.opt-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:600px){ .opt-grid{grid-template-columns:1fr; gap:10px} }
.opt{display:flex; align-items:center; gap:12px; padding:15px 17px; border:1.5px solid var(--line); border-radius:11px; background:var(--sand); font-size:14.5px; font-weight:500; transition:border-color .15s, background .15s, box-shadow .15s}
.opt:hover{border-color:var(--teal)}
.opt.sel{border-color:var(--teal); background:var(--teal-light); font-weight:600; box-shadow:0 4px 12px rgba(20,97,93,.1)}
.opt-dot{width:19px; height:19px; border-radius:50%; border:2px solid #C9D4D3; flex-shrink:0; background:#fff; transition:border-color .15s, border-width .15s}
.opt.sel .opt-dot{border-color:var(--teal); border-width:6px}
.opt-box{width:19px; height:19px; border-radius:6px; border:2px solid #C9D4D3; flex-shrink:0; background:#fff; display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s}
.opt.sel .opt-box{background:var(--teal); border-color:var(--teal)}
.opt-box svg{display:none}
.opt.sel .opt-box svg{display:block}
.btn-main{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:11px 22px; border-radius:999px; color:#fff; font-size:14px; font-weight:700; background:linear-gradient(135deg,var(--teal),var(--teal-deep)); box-shadow:0 10px 26px rgba(20,97,93,.3); transition:transform .15s; margin-top:30px}
.btn-main:hover{transform:translateY(-1px)}
.btn-ghost{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 22px; border-radius:999px; border:1.5px solid var(--ink); color:var(--ink); font-size:14px; font-weight:700; transition:background .15s, color .15s}
.btn-ghost:hover{background:var(--ink); color:#fff}
.fine{font-size:12px; color:var(--ink-soft); text-align:center; margin-top:14px; line-height:1.5}
.ov-success{display:none; text-align:center; padding:60px 20px}
.ov-success.show{display:block}
.succ-ring{width:76px; height:76px; border-radius:50%; background:var(--teal-light); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; box-shadow:0 10px 26px rgba(20,97,93,.18)}
.succ-t{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; font-size:32px; margin-bottom:10px}
.succ-p{font-size:15px; color:var(--ink-soft); max-width:44ch; margin:0 auto 28px}
.succ-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.succ-cta .btn-main{width:auto; margin-top:0}

.rev-hero{text-align:center; margin-bottom:34px}
.rev-score{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:66px; line-height:1}
.rev-stars{display:flex; justify-content:center; gap:4px; margin:10px 0 8px}
.rev-stars svg{fill:var(--star); stroke:none}
.rev-count{font-size:14.5px; color:var(--ink-soft)}
.rev-tabs{display:flex; gap:6px; background:var(--sand); border:1px solid var(--line); border-radius:99px; padding:5px; max-width:420px; margin:0 auto 30px}
.rev-tabs button{flex:1; padding:12px 0; border-radius:99px; font-size:14px; font-weight:600; color:var(--ink-soft); transition:background .2s, color .2s}
.rev-tabs button.on{background:linear-gradient(135deg,var(--teal),var(--teal-deep)); color:#fff; box-shadow:0 4px 12px rgba(20,97,93,.3)}
.rev-pane{display:none} .rev-pane.on{display:block}
.rev-card{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:24px 26px; margin-bottom:16px; box-shadow:0 8px 24px -8px rgba(20,97,93,.1)}
.rev-card-top{display:flex; align-items:center; gap:13px; margin-bottom:13px}
.rev-av{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--teal-light),#C3E0DD); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:600; color:var(--teal-deep); flex-shrink:0}
.rev-name{font-size:14.5px; font-weight:700}
.rev-meta{font-size:12.5px; color:var(--ink-soft); display:flex; align-items:center; gap:7px; margin-top:2px}
.rev-meta svg{fill:var(--star); stroke:none}
.rev-body{font-size:14.5px; color:#3F5654; line-height:1.65}
.rev-placeholder{border-style:dashed; border-color:#C9D4D3; background:#FCFCFB}
.rev-flag{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#B0761A; background:#FDF3E2; padding:4px 9px; border-radius:5px; margin-bottom:11px}

@media (max-width:760px){
  .hero-cta{display:none}
  .hdr-call-mobile[href^="tel:"],.hdr-call-mobile[href^="https://wa.me/"]{display:none}
  .action-rail{top:auto; left:0; right:0; bottom:0; transform:none; z-index:941; flex-direction:row; gap:6px; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97); border-top:1px solid var(--line); box-shadow:0 -8px 26px rgba(20,97,93,.14)}
  .action-rail > .rail-btn{display:none}
  .action-rail > .rail-book,.action-rail > .rail-mobile-only,.action-rail > .cb-btn{display:flex; flex:1 1 0; min-width:0; width:auto; height:56px; border-radius:9px; flex-direction:column; gap:2px; color:#fff; font-size:11px; font-weight:800; box-shadow:none}
  .action-rail .rail-book{order:1; background:linear-gradient(135deg,var(--teal),var(--teal-deep))}
  .action-rail .cb-btn{order:2; background:#2D64B8}
  .action-rail .rail-whatsapp{order:3; background:#128C4B}
  .action-rail .rail-call{order:4; background:var(--teal-darker)}
  .action-rail .rail-mobile-label{display:block; line-height:1}
  .action-rail .rail-label{display:none}
  .action-rail .rail-btn svg{width:20px; height:20px}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}

@media (max-width:640px){
.rail-btn{width:46px; height:46px}
.rail-btn svg{width:20px; height:20px}
.rail-label{display:none}
.sec{padding:60px 0}
.promo-scrim{padding:24px 16px}
}