@font-face{font-family:"Tribeca";src:url("assets/fonts/tribeca/Tribeca.ttf") format("truetype");font-display:swap}
:root{
  --navy:#0B2A4A; --deep:#071B30; --aqua:#2EC4C6; --water:#8FE3E0; --sun:#FFC93C;
  --hibiscus:#F26B3A; --sand:#F6EFE4; --ink:#13253A; --muted:#5B6B7C; --line:#E4DCCD;
  --radius:18px; --shadow:0 18px 40px -18px rgba(7,27,48,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Manrope,system-ui,sans-serif;color:var(--ink);background:var(--sand);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Fraunces,Georgia,serif;line-height:1.08;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:800}
h2{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:700}
h3{font-size:1.3rem;font-weight:700}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%;display:block}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--aqua);margin-bottom:.8em}
section{position:relative}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;padding:.85em 1.4em;border-radius:999px;font-weight:700;text-decoration:none;border:0;cursor:pointer;font:inherit;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s}
.btn--sun{background:var(--sun);color:var(--deep)}
.btn--sun:hover{transform:translateY(-2px);background:#FFD562}
.btn--ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6)}
.btn--ghost:hover{background:rgba(255,255,255,.1)}
.btn--block{width:100%}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem clamp(1rem,4vw,3rem);transition:background .3s,box-shadow .3s}
.nav.is-solid{background:rgba(246,239,228,.94);backdrop-filter:blur(10px);box-shadow:0 6px 24px -14px rgba(7,27,48,.5)}
.nav__logo img{height:96px;width:auto;margin:-14px 0;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.nav__links{display:flex;gap:1.8rem}
.nav__links a{text-decoration:none;font-weight:600;color:#fff;opacity:.9}
.nav.is-solid .nav__links a{color:var(--ink)}
.nav__cta{display:flex;align-items:center;gap:1rem}
.nav__phone{font-weight:700;text-decoration:none;color:#fff}
.nav.is-solid .nav__phone{color:var(--navy)}
@media (max-width:900px){.nav__links{display:none}.nav__phone{display:none}.nav__logo img{height:76px;margin:-10px 0}}

/* hero */
.hero{min-height:100vh;display:flex;align-items:center;overflow:hidden;color:#fff;padding:7rem clamp(1rem,4vw,3rem) 9rem;background:var(--deep)}
.hero__bg{position:absolute;inset:-14% 0;background-size:cover;background-position:center 78%;will-change:transform}
.hero__shade{position:absolute;inset:0;background:linear-gradient(105deg,rgba(7,27,48,.92) 0%,rgba(11,42,74,.72) 45%,rgba(11,42,74,.35) 100%)}
.hero__caustics{position:absolute;inset:0;opacity:.18;mix-blend-mode:screen;pointer-events:none;
  background:
   radial-gradient(60px 24px at 20% 70%,var(--water),transparent 70%),
   radial-gradient(90px 30px at 70% 80%,var(--water),transparent 70%),
   radial-gradient(70px 20px at 45% 60%,var(--water),transparent 70%),
   radial-gradient(110px 34px at 85% 55%,var(--water),transparent 70%);
  background-size:400px 200px;animation:shimmer 14s linear infinite}
@keyframes shimmer{to{background-position:400px 60px,-400px 40px,200px -60px,-200px 80px}}
.hero__palm{position:absolute;right:-30px;bottom:40px;width:min(34vw,360px);opacity:.75;will-change:transform;pointer-events:none}
.hero__flower{position:absolute;left:46%;bottom:120px;width:72px;opacity:.9;will-change:transform;pointer-events:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.hero__inner{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero__lead{font-size:1.15rem;max-width:34ch;opacity:.92}
.hero__ticks{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.55rem}
.hero__ticks li{padding-left:1.8rem;position:relative;font-weight:600}
.hero__ticks li::before{content:"";position:absolute;left:0;top:.45em;width:1.05rem;height:.6rem;border-left:3px solid var(--sun);border-bottom:3px solid var(--sun);transform:rotate(-45deg)}
.wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:90px;fill:var(--sand);z-index:3}
@media (max-width:900px){.hero__inner{grid-template-columns:1fr}.hero__palm{opacity:.35}.hero__flower{display:none}}

/* quote form */
.quote{background:#fff;color:var(--ink);border-radius:var(--radius);padding:clamp(1.3rem,3vw,2rem);box-shadow:0 30px 60px -24px rgba(0,0,0,.55);display:grid;gap:.85rem}
.quote h2{font-size:1.7rem;margin:0}
.quote__sub{color:var(--muted);margin:0 0 .2rem;font-size:.95rem}
.quote__row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.quote label{display:grid;gap:.3rem;font-size:.82rem;font-weight:700;color:var(--navy)}
.quote .opt{font-weight:500;color:var(--muted)}
.quote input,.quote select,.quote textarea{font:inherit;font-weight:500;padding:.7em .85em;border:1.5px solid var(--line);border-radius:10px;background:#FBF8F2;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.quote input:focus,.quote select:focus,.quote textarea:focus{outline:none;border-color:var(--aqua);box-shadow:0 0 0 4px rgba(46,196,198,.18)}
.quote .consent{grid-template-columns:auto 1fr;align-items:start;gap:.6rem;font-weight:500;font-size:.72rem;color:var(--muted);line-height:1.45}
.quote .consent input{margin-top:.2em;width:1.05rem;height:1.05rem;accent-color:var(--navy)}
.quote__ok{background:#E6F7F2;color:#0E6B55;padding:.7em 1em;border-radius:10px;font-weight:700;margin:0}
.quote__err{background:#FDECEC;color:#9B1C1C;padding:.7em 1em;border-radius:10px;font-weight:700;margin:0}
.quote .is-bad{border-color:var(--hibiscus)}
@media (max-width:520px){.quote__row{grid-template-columns:1fr}}

/* trust */
.trust{max-width:1200px;margin:-2.5rem auto 0;padding:0 clamp(1rem,4vw,3rem);display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;z-index:4}
.trust__item{position:relative;overflow:visible;background:#fff;border-radius:14px;padding:1.1rem 1.2rem;box-shadow:var(--shadow);display:grid}
.trust__item strong{font-family:Fraunces,serif;font-size:1.25rem;color:var(--navy)}
.trust__item span{color:var(--muted);font-size:.9rem}
@media (max-width:900px){.trust{grid-template-columns:1fr 1fr}}

/* section shells */
.services,.signs,.process,.work,.faq{max-width:1200px;margin:0 auto;padding:clamp(4rem,9vw,7rem) clamp(1rem,4vw,3rem)}
.section-head{max-width:640px;margin-bottom:2.6rem}

/* services */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.card{background:#fff;border-radius:var(--radius);padding:1.8rem;box-shadow:0 2px 0 var(--line);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;transform-style:preserve-3d}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card p{color:var(--muted);margin:0}
.card__icon{width:54px;height:54px;border-radius:14px;margin-bottom:1.1rem;position:relative;overflow:hidden;background:var(--navy)}
.card__icon--plaster{background:linear-gradient(160deg,#fff 0%,#DCEFF2 100%);border:2px solid var(--water)}
.card__icon--pebble{background:radial-gradient(circle at 25% 30%,#7D8B8F 0 5px,transparent 6px),radial-gradient(circle at 60% 40%,#C9B79A 0 6px,transparent 7px),radial-gradient(circle at 40% 72%,#4C6A73 0 6px,transparent 7px),radial-gradient(circle at 78% 75%,#A99C86 0 5px,transparent 6px),#E9E2D4}
.card__icon--tile{background:repeating-linear-gradient(90deg,var(--aqua) 0 12px,#fff 12px 14px),var(--aqua);background-blend-mode:normal}
.card__icon--tile::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 12px,#fff 12px 14px)}
.card__icon--coping{background:linear-gradient(var(--aqua),var(--aqua)) bottom/100% 55% no-repeat,repeating-linear-gradient(90deg,#D8C7A8 0 16px,#BCA785 16px 18px)}
.card__icon--deck{background:repeating-linear-gradient(0deg,#E6D6BC 0 9px,#CDB792 9px 11px)}
.card--cta{background:var(--navy);color:#fff;text-decoration:none;display:flex;flex-direction:column;justify-content:center;gap:.4rem}
.card--cta p{color:rgba(255,255,255,.8);margin-bottom:1rem}
.card--cta .btn{align-self:flex-start}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}

/* parallax band */
.band{height:min(70vh,560px);overflow:hidden;display:grid;place-items:center;text-align:center;color:#fff}
.band__bg{position:absolute;inset:-45% 0;background-size:cover;background-position:center;will-change:transform}
.band__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,27,48,.55),rgba(11,42,74,.75))}
.band__inner{position:relative;z-index:2;padding:0 1.5rem}
.band__quote{font-family:Fraunces,serif;font-style:italic;font-weight:700;font-size:clamp(2rem,5.4vw,4rem);line-height:1.1;margin-bottom:1.5rem;text-shadow:0 6px 30px rgba(0,0,0,.35)}

/* signs */
.signs__list{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.signs__list li{display:grid;grid-template-columns:90px 1fr;gap:1rem;align-items:baseline;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.signs__list span{font-family:Fraunces,serif;font-size:2.2rem;font-weight:800;color:var(--aqua);line-height:1}
.signs__list p{margin:0;font-size:1.08rem;color:var(--muted)}
.signs__list strong{color:var(--ink)}

/* process */
.process{background:transparent}
.process__track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.process__line{position:absolute;left:28px;right:28px;top:27px;height:4px;background:var(--line);border-radius:4px;overflow:hidden}
.process__fill{height:100%;width:0;background:linear-gradient(90deg,var(--aqua),var(--water));border-radius:4px}
.step{position:relative}
.step__n{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--navy);color:var(--sun);font-family:Fraunces,serif;font-size:1.5rem;font-weight:800;margin-bottom:1.1rem;position:relative;z-index:1;box-shadow:0 0 0 6px var(--sand)}
.step p{color:var(--muted)}
@media (max-width:900px){.process__track{grid-template-columns:1fr 1fr}.process__line{display:none}}
@media (max-width:560px){.process__track{grid-template-columns:1fr}}

/* work */
.work__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.shot{margin:0;border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 2px 0 var(--line)}
.shot__ph{aspect-ratio:4/3;display:grid;place-items:center;color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;
  background:repeating-linear-gradient(135deg,#EFE7D8 0 14px,#F6F0E4 14px 28px);border-bottom:1px dashed var(--line)}
.shot figcaption{padding:.9rem 1.1rem;font-weight:700;color:var(--navy)}
@media (max-width:800px){.work__grid{grid-template-columns:1fr}}

/* areas */
.areas{background:var(--navy);color:#fff;overflow:hidden;padding:clamp(4rem,9vw,6.5rem) clamp(1rem,4vw,3rem)}
.areas__bg{position:absolute;inset:-30% -10%;opacity:.12;will-change:transform;
  background:repeating-radial-gradient(circle at 70% 50%,transparent 0 38px,var(--water) 38px 40px)}
.areas__inner{position:relative;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:center}
.areas p{opacity:.85}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.7rem}
.chips li{padding:.65em 1.15em;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(143,227,224,.35);font-weight:700;transition:background .2s,transform .2s}
.chips li:hover{background:var(--aqua);color:var(--deep);transform:translateY(-2px)}
@media (max-width:860px){.areas__inner{grid-template-columns:1fr}}

/* faq */
.faq__list{display:grid;gap:.8rem;max-width:860px}
.faq details{background:#fff;border-radius:14px;padding:1.1rem 1.4rem;box-shadow:0 2px 0 var(--line)}
.faq summary{cursor:pointer;font-weight:700;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:Fraunces,serif;font-size:1.5rem;line-height:1;color:var(--aqua);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:.8rem 0 0;color:var(--muted)}

/* cta */
.cta{padding:0 clamp(1rem,4vw,3rem) clamp(4rem,8vw,6rem)}
.cta__inner{max-width:1200px;margin:0 auto;border-radius:28px;padding:clamp(2.5rem,6vw,4.5rem);color:#fff;text-align:center;
  background:var(--navy)}
.cta__inner p{opacity:.85;max-width:46ch;margin:0 auto 1.6rem}
.cta__btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* footer */
.foot{background:var(--deep);color:rgba(255,255,255,.8);padding:3rem clamp(1rem,4vw,3rem) 2rem}
.foot__logo{height:150px;width:auto;margin-bottom:1.6rem}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1200px}
.foot__cols div{display:grid;gap:.25rem;font-size:.95rem}
.foot__cols strong{color:#fff;margin-bottom:.2rem}
.foot__cols a{text-decoration:none}
.foot__fine{margin-top:2rem;font-size:.82rem;opacity:.6}
@media (max-width:700px){.foot__cols{grid-template-columns:1fr}}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.is-in{opacity:1;transform:none}

/* edit mode */
.editbar{position:fixed;right:18px;bottom:18px;z-index:100;display:flex;gap:.5rem}
.editbar button{font:inherit;font-weight:700;font-size:.85rem;padding:.65em 1.1em;border-radius:999px;border:0;cursor:pointer;background:var(--deep);color:#fff;box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.editbar #editSave{background:var(--sun);color:var(--deep)}
body.editing [data-edit]{outline:2px dashed rgba(46,196,198,.8);outline-offset:3px;border-radius:4px;cursor:text}
body.editing [data-edit]:focus{outline:2px solid var(--hibiscus);background:rgba(255,201,60,.12)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* compact quote form */
.quote{padding:1.3rem 1.4rem;gap:.6rem;max-width:440px;justify-self:end;width:100%}
.quote h2{font-size:1.4rem}
.quote__sub{font-size:.85rem;margin:0}
.quote__row{gap:.6rem}
.quote label{font-size:.76rem;gap:.2rem}
.quote input,.quote select,.quote textarea{padding:.5em .7em;font-size:.9rem;border-radius:8px}
.quote .opt{font-size:.72rem}
.quote .consent{font-size:.66rem;line-height:1.35}
.quote .btn{padding:.7em 1.2em;font-size:.95rem}
@media (max-width:900px){.quote{justify-self:stretch;max-width:none}}

/* flip cards */
.card--flip{padding:0;background:transparent;box-shadow:none;perspective:1200px;outline:none}
.card--flip:hover{transform:none;box-shadow:none}
.card__inner{display:grid;height:100%;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.card--flip:hover .card__inner,.card--flip:focus-visible .card__inner,.card--flip.is-flipped .card__inner{transform:rotateY(180deg)}
.card__face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius);overflow:hidden}
.card__front{background:#fff;padding:1.8rem;box-shadow:0 2px 0 var(--line)}
.card__back{transform:rotateY(180deg);position:relative;box-shadow:var(--shadow);min-height:100%}
.swatch{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.card__cap{position:absolute;left:12px;bottom:12px;background:rgba(7,27,48,.78);color:#fff;font-weight:700;font-size:.85rem;padding:.45em .8em;border-radius:999px;backdrop-filter:blur(4px)}
.card__hint{display:inline-block;margin-top:1rem;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--aqua)}
@media (hover:none){.card__hint::after{content:" (tap)"}}

.card__back--wet::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(46,196,198,.35),rgba(18,124,154,.45));mix-blend-mode:multiply;pointer-events:none}
.card__back--wet .card__cap{z-index:1}

/* tiki display type, matched to the logo lettering */
h1,h2,.band__quote,.signs__list span,.step__n,.trust__item strong{font-family:"Tribeca","Germania One",Fraunces,serif;font-weight:400;letter-spacing:.01em}
h1{font-size:clamp(3rem,7vw,5.4rem);line-height:.98;color:var(--sun);text-shadow:3px 3px 0 var(--hibiscus),6px 6px 0 rgba(7,27,48,.55)}
h2{font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1}
.band__quote{font-style:normal;color:var(--sun);text-shadow:3px 3px 0 var(--hibiscus),0 8px 30px rgba(0,0,0,.4)}
.cta__inner h2{color:var(--sun);text-shadow:2px 2px 0 var(--hibiscus)}
.quote h2{font-size:1.7rem}
.trust__item strong{font-size:1.5rem}
h3{font-family:Manrope,system-ui,sans-serif;font-weight:800;letter-spacing:-.01em}

/* Tribeca is all caps, so it runs a bit smaller */
h1{font-size:clamp(2.6rem,5.4vw,4.3rem);line-height:1.02}
h2{font-size:clamp(1.9rem,3.8vw,2.8rem);line-height:1.05}
.quote h2{font-size:1.45rem}
.band__quote{font-size:clamp(1.9rem,4.6vw,3.4rem)}

/* calmer headline */
h1{font-size:clamp(2.2rem,4.2vw,3.3rem);line-height:1.08;color:#fff;text-shadow:0 2px 18px rgba(7,27,48,.45)}
h1 .hl{color:var(--sun)}
.band__quote{text-shadow:0 4px 24px rgba(0,0,0,.45)}
.cta__inner h2{text-shadow:none}

/* hard-clip parallax layers so the photo never paints outside its section */
.hero,.band,.areas{clip-path:inset(0);isolation:isolate}

/* anchor jumps land below the fixed header */
#quote,#services,#process,#areas,#faq,#work{scroll-margin-top:120px}

/* tropical decor on the trust cards */
.deco{position:absolute;pointer-events:none;z-index:2;transition:transform .5s ease}
.deco--bush-bl{width:70px;height:46px;left:-18px;bottom:-16px}
.deco--flower-bl{width:44px;height:44px;left:30px;bottom:-14px}
.deco--flower-tr{width:46px;height:46px;right:-12px;top:-16px;transform:rotate(14deg)}
.deco--palm-br{width:64px;height:80px;right:-14px;bottom:-6px}
.deco--bush-br{width:58px;height:38px;right:-24px;bottom:-14px}
.deco--flower-tr2{width:42px;height:42px;right:-10px;top:-14px;transform:rotate(-10deg)}
.deco--bush-bl2{width:60px;height:40px;left:-16px;bottom:-14px}
.trust__item:hover .deco--palm-br{transform:rotate(-4deg)}
.trust__item:hover .deco--flower-tr,.trust__item:hover .deco--flower-tr2{transform:rotate(30deg) scale(1.08)}
@media (max-width:900px){.deco--palm-br{width:50px;height:62px}}

/* keep bushes off the gap between cards */
.deco--bush-br{right:18px}
.deco--bush-bl2{left:16px}

.deco--bush-front{width:56px;height:37px;right:-2px;bottom:-14px;z-index:3}

/* parrot that flies out of the bushes on scroll */
.parrot{position:absolute;right:6px;bottom:-4px;width:58px;height:46px;z-index:2;pointer-events:none;opacity:0;transform-origin:50% 50%;will-change:transform,opacity}
.parrot__wing{transform-origin:66px 54px}
.parrot.is-flying .parrot__wing{animation:flap .38s ease-in-out infinite alternate}
@keyframes flap{from{transform:rotate(-8deg)}to{transform:rotate(38deg) scaleY(.7)}}
@media (prefers-reduced-motion:reduce){.parrot{display:none}}

/* more tropical decor */
.card,.process__track,.cta__inner,.signs .section-head{position:relative}
.card--cta{overflow:visible}
.d-svc-bush{width:70px;height:46px;left:-20px;bottom:-16px;z-index:3}
.d-svc-flower{width:40px;height:40px;left:34px;bottom:-14px;z-index:3}
.d-cta-palm{width:90px;height:112px;right:-18px;bottom:-8px;opacity:.95}
.d-cta-bush{width:64px;height:42px;right:-14px;bottom:-14px;z-index:3}
.d-cta-flower{width:44px;height:44px;right:-12px;top:-16px;transform:rotate(12deg)}
.d-signs-flower{position:relative;display:inline-block;vertical-align:middle;width:46px;height:46px;margin-left:.4rem;transform:rotate(-8deg)}
.d-proc-palm{width:70px;height:88px;right:-6px;top:-66px}
.d-proc-bush{width:62px;height:40px;right:-18px;top:2px;z-index:2}
.d-areas{position:absolute;right:2%;bottom:0;width:260px;height:180px;pointer-events:none;opacity:.9}
.d-areas .deco{position:absolute}
.d-a1{width:120px;height:150px;right:60px;bottom:-4px}
.d-a2{width:90px;height:112px;right:0;bottom:-4px}
.d-a3{width:100px;height:64px;right:40px;bottom:-14px;z-index:3}
.d-a4{width:44px;height:44px;right:150px;bottom:6px;z-index:3}
.cta__inner{overflow:visible}
.d-c-palm{width:120px;height:150px;left:10px;bottom:-6px}
.d-c-bush{width:96px;height:62px;left:-16px;bottom:-18px;z-index:3}
.d-c-bush2{width:80px;height:52px;right:-14px;bottom:-16px;z-index:3}
.d-c-flower{width:48px;height:48px;right:56px;bottom:-10px;z-index:4}
.d-c-flower2{width:42px;height:42px;left:74px;bottom:-12px;z-index:4}
.foot{position:relative;padding-top:4.5rem}
.d-foot{position:absolute;left:0;right:0;top:-26px;display:flex;justify-content:space-between;padding:0 2%;pointer-events:none}
.d-foot .deco{position:static;width:90px;height:58px}
.d-foot .deco:nth-child(even){width:70px;height:46px;margin-top:10px}
@media (max-width:900px){.d-areas{display:none}.d-c-palm{width:80px;height:100px}.d-foot .deco:nth-child(n+6){display:none}}

/* footer hedge: overlapping bushes with a couple of palms */
.d-foot{top:-34px;height:70px;justify-content:flex-start;align-items:flex-end;padding:0;overflow:hidden;gap:0}
.d-foot .deco{position:relative;flex:0 0 auto;width:96px;height:62px;margin-left:-30px;margin-top:0}
.d-foot .deco:first-child{margin-left:-10px}
.d-foot .deco:nth-child(3n){width:78px;height:50px}
.d-foot .deco:nth-child(even){width:88px;height:57px;margin-top:0}
.d-foot .d-fp{width:56px;height:70px;margin-left:-20px;margin-right:-26px;z-index:0}
.d-foot .d-ff{width:34px;height:34px;margin-left:-22px;margin-right:-14px;z-index:3;align-self:center}
@media (max-width:900px){.d-foot .deco:nth-child(n+6){display:block}}

.d-foot{top:-62px;height:98px}
.d-foot .d-fp{width:70px;height:88px}

.foot{padding-top:3rem}

/* belt and braces: nothing from the hero photo can show below the wave */
.hero,.band{overflow:hidden;contain:paint}
.trust{position:relative;z-index:5;background:linear-gradient(to bottom,transparent 0,transparent 2.5rem,var(--sand) 2.5rem)}
.services{position:relative;z-index:1;background:var(--sand)}

/* ROOT CAUSE FIX: overflow:hidden boxes can still be scrolled by anchor links
   (#quote lives inside .hero), which shifted the hero's insides. overflow:clip can't be scrolled. */
.hero,.band,.areas{overflow:clip !important}

/* tighter spacing between sections */
.services,.signs,.process,.work,.faq{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.work{padding-bottom:clamp(1rem,2vw,1.5rem)}
.process{padding-top:clamp(1.5rem,3vw,2.5rem)}
.section-head{margin-bottom:1.8rem}

/* ===== PHONES: compact estimate form + compact service tiles ===== */
@media (max-width:600px){
  .quote{padding:1rem 1rem 1.1rem;gap:.5rem}
  .quote h2{font-size:1.2rem}
  .quote__sub{display:none}
  .quote__row{grid-template-columns:1fr 1fr}
  .quote .f-msg textarea{min-height:0;height:2.4em}
  .quote input,.quote select,.quote textarea{padding:.45em .6em;font-size:16px}
  .quote .consent{font-size:.62rem}
  .quote .btn{padding:.65em 1em}

  .cards{grid-template-columns:1fr 1fr;gap:.8rem}
  .card--flip .card__front{padding:1rem .9rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:118px}
  .card--flip .card__front p,.card--flip .card__hint{display:none}
  .card--flip .card__front h3{font-size:1rem;margin:0}
  .card--flip .card__icon{width:38px;height:38px;border-radius:10px;margin-bottom:.6rem}
  .card--flip .card__back{min-height:118px}
  .card__cap{font-size:.65rem;left:6px;bottom:6px;padding:.35em .6em}
  .card--cta{padding:1rem .9rem;min-height:118px}
  .card--cta h3{font-size:1rem}
  .card--cta p{display:none}
  .card--cta .btn{padding:.5em .9em;font-size:.8rem}
  .d-svc-bush{width:48px;height:32px;left:-12px;bottom:-10px}
  .d-svc-flower{width:28px;height:28px;left:22px;bottom:-9px}
  .d-cta-palm{width:56px;height:70px;right:-8px}
  .d-cta-bush{width:44px;height:28px;right:-8px;bottom:-9px}
  .d-cta-flower{width:30px;height:30px;right:-6px;top:-10px}
}

/* phone overflow fix */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.hero__inner>*{min-width:0}
.quote,.quote label,.quote input,.quote select,.quote textarea{min-width:0;max-width:100%}
@media (max-width:600px){.hero{padding-left:14px;padding-right:14px}.quote{width:100%;box-sizing:border-box}.quote label{font-size:.74rem}.quote__row{gap:.5rem}}

/* phones: phone number under the Free estimate button */
@media (max-width:900px){
  .nav__cta{flex-direction:column;align-items:center;gap:.15rem}
  .nav__phone{display:block;font-size:.8rem;font-weight:700;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
  .nav.is-solid .nav__phone{color:var(--navy);text-shadow:none}
  .nav__cta .btn{padding:.55em 1.1em;font-size:.9rem}
}
@media (max-width:900px){.nav__cta{flex-direction:column-reverse}}
.card__more{display:inline-block;margin-top:.7rem;font-weight:700;font-size:.9rem;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--aqua);position:relative;z-index:2}
.card__back .card__more{position:absolute;right:.8rem;bottom:.7rem;background:#fff;border:0;padding:.3rem .7rem;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.faq__more{max-width:760px;margin:1.4rem auto 0;text-align:center;font-weight:600}
.faq__more a{color:var(--navy)}
/* ---- nav dropdowns + phone menu ---- */
.nav__links{align-items:center}
.dd{position:relative}
.dd summary{list-style:none;cursor:pointer;font-weight:600;color:#fff;opacity:.9}
.dd summary::-webkit-details-marker,.mnav summary::-webkit-details-marker{display:none}
.dd summary::after{content:" ▾";font-size:.75em}
.nav.is-solid .dd summary{color:var(--ink)}
.dd__menu{position:absolute;top:calc(100% + .6rem);left:-.8rem;min-width:220px;background:#fff;border-radius:14px;box-shadow:0 18px 40px -12px rgba(0,0,0,.35);padding:.5rem;display:grid;z-index:80}
.dd__menu a{color:var(--ink)!important;opacity:1!important;padding:.55rem .8rem;border-radius:9px;font-weight:600}
.dd__menu a:hover{background:var(--sand)}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;font-weight:800;padding:.5em 1em;border-radius:999px;border:2px solid currentColor;color:#fff}
.nav.is-solid .mnav summary{color:var(--navy)}
.mnav__panel{position:fixed;left:.7rem;right:.7rem;top:84px;max-height:calc(100vh - 110px);overflow:auto;background:#fff;border-radius:16px;box-shadow:0 24px 50px -10px rgba(0,0,0,.45);padding:.8rem;display:grid;z-index:90}
.mnav__panel b{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--aqua);margin:.7rem .7rem .2rem}
.mnav__panel a{color:var(--ink);text-decoration:none;font-weight:600;padding:.6rem .7rem;border-radius:9px}
.mnav__panel a:hover{background:var(--sand)}
@media (max-width:900px){.mnav{display:block;margin-left:auto}}