/* ============================================================
   COASTAL CRITTERS — stylesheet
   ============================================================ */

:root{
  --pink:        #FF4D79;
  --pink-dk:     #E8305F;
  --pink-lt:     #FF8FAB;
  --blush:       #FFF1F4;
  --blush-2:     #FFE3EA;
  --navy:        #12315C;
  --navy-2:      #0C2244;
  --teal:        #1B8A9A;
  --teal-lt:     #4FB8C4;
  --green:       #3E9B5F;
  --orange:      #F2802B;
  --gold:        #FFC94D;
  --cream:       #FFF8EF;
  --sand:        #FDF3E3;
  --ink:         #23334B;
  --ink-soft:    #5A6B84;

  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-xl: 44px;

  --sh-sm: 0 4px 14px rgba(18,49,92,.08);
  --sh-md: 0 14px 34px rgba(18,49,92,.12);
  --sh-lg: 0 26px 60px rgba(18,49,92,.18);
  --sh-pink: 0 14px 34px rgba(255,77,121,.34);

  --f-head: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --f-body: 'Nunito', system-ui, -apple-system, sans-serif;
  --f-script: 'Pacifico', 'Brush Script MT', cursive;

  --nav-h: 78px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }

body{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--blush);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; }
a{ color:var(--pink-dk); }

h1,h2,h3,h4{ font-family:var(--f-head); color:var(--navy); line-height:1.08; margin:0 0 .4em; letter-spacing:-.5px; }
h2{ font-size:clamp(2rem, 4.4vw, 3.3rem); font-weight:800; }
h3{ font-size:1.28rem; font-weight:700; }
em{ font-style:normal; color:var(--pink); }

.wrap{ width:min(1200px, 92vw); margin-inline:auto; }
.wrap.narrow{ width:min(860px, 92vw); }

.ico{ width:1em; height:1em; fill:currentColor; }

/* ---------- scroll progress ---------- */
.progress{
  position:fixed; inset:0 0 auto 0; height:4px; z-index:120;
  background:transparent; pointer-events:none;
}
.progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--pink),var(--gold),var(--teal));
  border-radius:0 4px 4px 0; transition:width .1s linear;
}

/* ============================================================ BUTTONS ============================================================ */
.btn{
  --bg:var(--pink); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--f-head); font-weight:700; font-size:1rem;
  padding:.82em 1.6em; border-radius:999px; border:0;
  background:var(--bg); color:var(--fg);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  box-shadow:0 8px 20px rgba(18,49,92,.14);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.3), box-shadow .25s, filter .2s;
}
.btn:hover{ transform:translateY(-3px) scale(1.03); box-shadow:var(--sh-md); filter:saturate(1.08); }
.btn:active{ transform:translateY(-1px) scale(.99); }
.btn .arr{ transition:transform .25s; }
.btn:hover .arr{ transform:translateX(5px); }

.btn-pink{ --bg:linear-gradient(135deg,var(--pink),#FF7A5C); box-shadow:var(--sh-pink); }
.btn-teal{ --bg:linear-gradient(135deg,var(--teal),var(--teal-lt)); }
.btn-green{ --bg:linear-gradient(135deg,var(--green),#68C08A); }
.btn-orange{ --bg:linear-gradient(135deg,var(--orange),var(--gold)); }
.btn-ghost{ --bg:rgba(255,255,255,.9); --fg:var(--navy); border:2.5px solid var(--navy); backdrop-filter:blur(6px); }
.btn-link{ --bg:transparent; --fg:var(--ink-soft); box-shadow:none; text-decoration:underline; padding:.5em 1em; }
.btn-link:hover{ box-shadow:none; }
.btn-lg{ font-size:1.1rem; padding:1em 2em; }
.btn-block{ display:flex; width:100%; }

/* ============================================================ NAV ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0 max(1.4rem, 4vw);
  transition:background .35s, box-shadow .35s, height .35s, backdrop-filter .35s;
}
.nav.is-stuck{
  height:66px; background:rgba(255,241,244,.86);
  backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 6px 24px rgba(18,49,92,.10);
}

.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.brand-mark{
  width:48px; height:48px; flex:none; display:block; position:relative;
  border-radius:50%; overflow:hidden; background:#FFF3F6;
  border:2.5px solid #fff; box-shadow:0 4px 12px rgba(18,49,92,.20);
  transition:transform .4s cubic-bezier(.2,.9,.3,1.4);
}
.brand:hover .brand-mark{ transform:rotate(-8deg) scale(1.09); }
.brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.brand-text{ display:flex; flex-direction:column; line-height:.9; }
.brand-script{ font-family:var(--f-script); font-size:1.42rem; color:var(--navy); }
.brand-block{ font-family:var(--f-head); font-weight:800; font-size:.76rem; letter-spacing:3.4px; color:var(--teal); margin-top:2px; }

.nav-links{ display:flex; align-items:center; gap:.35rem; }
.nav-links a{
  font-family:var(--f-head); font-weight:600; font-size:.98rem;
  color:var(--navy); text-decoration:none; padding:.5em .9em; border-radius:999px;
  position:relative; transition:color .2s, background .25s;
}
.nav-links a:not(.nav-cta)::after{
  content:''; position:absolute; left:50%; bottom:.28em; width:0; height:3px;
  background:var(--pink); border-radius:3px; transform:translateX(-50%); transition:width .3s;
}
.nav-links a:not(.nav-cta):hover{ color:var(--pink-dk); }
.nav-links a:not(.nav-cta):hover::after{ width:52%; }
.nav-links a.active{ color:var(--pink-dk); }
.nav-links a.active::after{ width:52%; }
.nav-cta{ margin-left:.6rem; color:#fff !important; }

.burger{ display:none; width:46px; height:46px; border:0; border-radius:14px; background:rgba(255,255,255,.8); cursor:pointer; padding:0; place-items:center; box-shadow:var(--sh-sm); }
.burger span{ display:block; width:22px; height:2.8px; background:var(--navy); border-radius:3px; margin:4px auto; transition:.3s; }
.burger.is-open span:nth-child(1){ transform:translateY(6.8px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); }

/* ============================================================ HERO ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center; text-align:center;
  padding:calc(var(--nav-h) + 3rem) 1rem 5rem;
  overflow:hidden; isolation:isolate;
}
.hero-scene{ position:absolute; inset:0; z-index:-1; }
.hero-scene .sky{ position:absolute; inset:0; width:100%; height:100%; }
.hero-fade{ position:absolute; inset:auto 0 0 0; height:34%; background:linear-gradient(transparent, var(--blush) 88%); }

.palm{ position:absolute; bottom:-2%; width:clamp(210px, 27vw, 420px); filter:drop-shadow(0 12px 26px rgba(18,49,92,.22)); will-change:transform; }
.palm-l{ left:-6%; transform-origin:bottom center; animation:sway 7s ease-in-out infinite; }
.palm-r{ right:-6%; transform-origin:bottom center; animation:sway 8.5s ease-in-out infinite reverse; }
@keyframes sway{ 0%,100%{ rotate:-1.4deg } 50%{ rotate:1.8deg } }

.float-critter{
  position:absolute; width:clamp(84px, 9vw, 138px); height:clamp(84px, 9vw, 138px);
  filter:drop-shadow(0 12px 22px rgba(18,49,92,.24)); will-change:transform;
}
.fc1{ left:6%;  bottom:16%; animation:bob 5.4s ease-in-out infinite; }
.fc2{ right:8%; bottom:22%; animation:bob 6.6s ease-in-out infinite .7s; }
.fc3{ left:14%; top:max(30%, 120px); animation:bob 7.4s ease-in-out infinite .3s; opacity:.96; }
.fc4{ right:13%; top:max(26%, 108px); animation:bob 6s  ease-in-out infinite 1.1s; opacity:.96; }
/* uses `transform` so the JS parallax (which sets `translate`) can compose with it */
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-2deg) } 50%{ transform:translateY(-18px) rotate(3deg) } }

.hero-inner{ position:relative; max-width:940px; }

.pill{
  display:inline-flex; align-items:center; gap:.5em;
  background:rgba(255,255,255,.92); color:var(--pink-dk);
  font-family:var(--f-head); font-weight:700; font-size:.92rem;
  padding:.5em 1.15em; border-radius:999px; margin-bottom:1.2rem;
  box-shadow:var(--sh-sm); border:2px solid rgba(255,77,121,.25);
}
.pop{ animation:pop .7s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pop{ from{ opacity:0; transform:scale(.7) translateY(14px) } to{ opacity:1; transform:none } }

.hero-title{
  font-family:var(--f-head); font-weight:800;
  font-size:clamp(2.5rem, 7.4vw, 5.4rem); line-height:.98;
  margin:0 0 1rem; text-transform:uppercase; letter-spacing:-1.5px;
  text-shadow:0 3px 0 rgba(255,255,255,.85), 0 14px 30px rgba(18,49,92,.18);
}
.hero-title .line{ display:block; opacity:0; transform:translateY(34px); animation:riseIn .85s cubic-bezier(.2,.9,.3,1.05) forwards; }
.hero-title .l1{ font-size:.52em; color:var(--pink); animation-delay:.1s; letter-spacing:1px; }
.hero-title .l2{ color:var(--navy); animation-delay:.24s; }
.hero-title .l3{ color:var(--teal); animation-delay:.38s; font-size:.86em; }
@keyframes riseIn{ to{ opacity:1; transform:none } }

.hero-sub{
  max-width:660px; margin:0 auto 2rem; font-size:1.1rem; color:#33465f;
  background:rgba(255,255,255,.6); padding:.9rem 1.3rem; border-radius:var(--r-md);
  backdrop-filter:blur(4px);
  opacity:0; animation:riseIn .8s .55s cubic-bezier(.2,.9,.3,1.05) forwards;
}
.hero-sub strong{ color:var(--navy); }

.hero-cta{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; opacity:0; animation:riseIn .8s .7s cubic-bezier(.2,.9,.3,1.05) forwards; }

.hero-stats{
  display:flex; gap:clamp(.5rem,3vw,2.4rem); justify-content:center; flex-wrap:wrap;
  margin-top:2.6rem; opacity:0; animation:riseIn .8s .9s cubic-bezier(.2,.9,.3,1.05) forwards;
}
.stat{ background:rgba(255,255,255,.86); border-radius:var(--r-md); padding:.75rem 1.25rem; min-width:118px; box-shadow:var(--sh-sm); border:2px solid rgba(255,255,255,.9); }
.stat b{ display:block; font-family:var(--f-head); font-size:1.85rem; color:var(--pink); line-height:1; }
.stat span{ font-size:.78rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.7px; }

.scroll-hint{ position:absolute; bottom:1.6rem; left:50%; translate:-50% 0; width:26px; height:42px; border:2.6px solid var(--navy); border-radius:999px; opacity:.5; }
.scroll-hint span{ position:absolute; top:8px; left:50%; translate:-50% 0; width:4px; height:8px; background:var(--navy); border-radius:3px; animation:wheel 1.6s infinite; }
@keyframes wheel{ 0%{ opacity:0; transform:translate(-50%,0) } 30%{ opacity:1 } 100%{ opacity:0; transform:translate(-50%,16px) } }

/* ============================================================ MARQUEE ============================================================ */
.marquee{ background:var(--navy); color:#fff; padding:.85rem 0; overflow:hidden; }
.marquee-track{ display:flex; align-items:center; gap:2.2rem; width:max-content; animation:slide 32s linear infinite; }
.marquee-track span{ font-family:var(--f-head); font-weight:700; font-size:1.02rem; letter-spacing:2.6px; text-transform:uppercase; white-space:nowrap; }
.marquee-track .ico{ width:1.05em; height:1.05em; color:var(--pink); flex:none; }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ============================================================ SECTIONS ============================================================ */
.section{ position:relative; padding:clamp(4rem, 8vw, 7rem) 0; }
.section.sand{ background:var(--sand); }
.section.cream{ background:var(--cream); }
.section.blush{ background:var(--blush); }
.section.navy{ background:linear-gradient(165deg,var(--navy),var(--navy-2)); }

.wave-div{ position:absolute; left:0; bottom:-1px; width:100%; height:clamp(46px,6vw,90px); }

.head{ text-align:center; max-width:760px; margin:0 auto clamp(2.4rem,4vw,3.6rem); }
.head.light h2{ color:#fff; }
.head.light .lede{ color:rgba(255,255,255,.78); }
.head.light .eyebrow{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.28); }
.eyebrow{
  display:inline-block; font-family:var(--f-head); font-weight:700;
  font-size:.8rem; letter-spacing:2.6px; text-transform:uppercase;
  color:var(--pink-dk); background:rgba(255,77,121,.12); border:2px solid rgba(255,77,121,.22);
  padding:.34em 1em; border-radius:999px; margin-bottom:.9rem;
}
.lede{ font-size:1.08rem; color:var(--ink-soft); margin:.4rem auto 0; max-width:640px; }
.note{ text-align:center; color:var(--ink-soft); font-size:.94rem; margin-top:2.4rem; font-style:italic; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.2,.9,.3,1), transform .7s cubic-bezier(.2,.9,.3,1); transition-delay:calc(var(--i,0) * 80ms); }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================ FEATURES ============================================================ */
/* flex (not grid) so a short final row centres instead of hanging left */
.feature-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem; }
.feature{ flex:1 1 205px; max-width:290px; }
.feature{
  background:#fff; border-radius:var(--r-lg); padding:2rem 1.5rem; text-align:center;
  box-shadow:var(--sh-sm); border:2px solid #fff; position:relative; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2), box-shadow .35s, border-color .35s;
}
.feature::before{ content:''; position:absolute; inset:auto 0 0 0; height:5px; background:linear-gradient(90deg,var(--pink),var(--gold),var(--teal)); transform:scaleX(0); transform-origin:left; transition:transform .45s; }
.feature:hover{ transform:translateY(-9px); box-shadow:var(--sh-md); border-color:var(--blush-2); }
.feature:hover::before{ transform:scaleX(1); }
.feature p{ color:var(--ink-soft); font-size:.97rem; margin:0; }
.feature-ico{ width:66px; height:66px; margin:0 auto 1rem; border-radius:20px; display:grid; place-items:center; transition:transform .4s cubic-bezier(.2,.9,.3,1.5); }
.feature:hover .feature-ico{ transform:rotate(-8deg) scale(1.1); }
.feature-ico svg{ width:34px; height:34px; }
.feature-ico.pink{ background:#FFE1E8; color:var(--pink); }
.feature-ico.orange{ background:#FFE9D6; color:var(--orange); }
.feature-ico.gold{ background:#FFF3D2; color:#E8A400; }
.feature-ico.green{ background:#DFF3E5; color:var(--green); }
.feature-ico.teal{ background:#D8F0F3; color:var(--teal); }

/* ============================================================ FILTERS ============================================================ */
.filters{ position:relative; display:flex; gap:.3rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.6rem; background:#fff; padding:.4rem; border-radius:999px; width:max-content; margin-inline:auto; box-shadow:var(--sh-sm); }
.filter{
  position:relative; z-index:2; border:0; background:transparent; cursor:pointer;
  font-family:var(--f-head); font-weight:700; font-size:.98rem; color:var(--ink-soft);
  padding:.62em 1.35em; border-radius:999px; transition:color .3s;
}
.filter.is-on{ color:#fff; }
.filter-pill{ position:absolute; z-index:1; top:.4rem; bottom:.4rem; border-radius:999px; background:linear-gradient(135deg,var(--pink),#FF7A5C); box-shadow:var(--sh-pink); transition:left .42s cubic-bezier(.2,.9,.3,1.25), width .42s cubic-bezier(.2,.9,.3,1.25); }

/* ============================================================ CRITTER CARDS ============================================================ */
.critter-grid{ display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); }

.critter{ perspective:1200px; background:none; border:0; padding:0; cursor:pointer; font:inherit; text-align:inherit;
  opacity:0; transform:translateY(26px) scale(.96);
  transition:opacity .5s, transform .5s cubic-bezier(.2,.9,.3,1.2);
  transition-delay:calc(var(--i,0) * 40ms); }
.critter.in{ opacity:1; transform:none; }
.critter.hide{ display:none; }

.critter-inner{ position:relative; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.3,.9,.3,1.05); border-radius:var(--r-lg); }
.critter.flipped .critter-inner{ transform:rotateY(180deg); }

.critter-face{
  border-radius:var(--r-lg); padding:1.3rem 1.1rem; min-height:296px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:var(--sh-sm); border:2.5px solid #fff; text-align:center;
}
.critter-front{ background:#fff; transition:box-shadow .35s, transform .35s; }
.critter:hover .critter-front{ box-shadow:var(--sh-md); }
.critter-back{
  position:absolute; inset:0; transform:rotateY(180deg);
  background:linear-gradient(160deg, var(--c1), var(--c2)); color:#fff; justify-content:center;
}
.critter-back h3{ color:#fff; font-size:1.1rem; }
.critter-back p{ font-size:.94rem; margin:.2rem 0 0; line-height:1.55; color:rgba(255,255,255,.94); }
.critter-back .flip-back{ margin-top:1rem; font-family:var(--f-head); font-size:.82rem; letter-spacing:1.4px; text-transform:uppercase; opacity:.85; }

.critter-art{ width:100%; height:150px; border-radius:var(--r-md); background:linear-gradient(160deg,var(--c1),var(--c2)); display:grid; place-items:center; margin-bottom:.9rem; position:relative; overflow:hidden; }
.critter-art::after{ content:''; position:absolute; inset:auto -20% -35% -20%; height:70%; background:rgba(255,255,255,.22); border-radius:50%; }
.critter-art svg{ width:118px; height:118px; position:relative; z-index:1; filter:drop-shadow(0 8px 14px rgba(18,49,92,.2)); transition:transform .45s cubic-bezier(.2,.9,.3,1.4); }
.critter:hover .critter-art svg{ transform:scale(1.12) rotate(-5deg); }
.critter-front h3{ margin:0 0 .15rem; font-size:1.14rem; }
.critter-front .c-sub{ font-size:.83rem; color:var(--ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.9px; }
.c-badge{ margin-top:.7rem; font-family:var(--f-head); font-size:.74rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; padding:.28em .85em; border-radius:999px; }
.c-badge.mammal{ background:#FFE1E8; color:var(--pink-dk); }
.c-badge.reptile{ background:#DFF3E5; color:#2C7A48; }
.c-flip-hint{ margin-top:auto; padding-top:.6rem; font-size:.76rem; color:var(--ink-soft); opacity:.7; }

/* ============================================================ PRICING ============================================================ */
/* fixed counts (4 / 2 / 1) — auto-fit would strand the 4th card alone on a row */
.price-grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(4,1fr); align-items:start; }
@media (max-width:1180px){ .price-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  .price-grid{ grid-template-columns:1fr; } }

.price-card{
  position:relative; background:#fff; border-radius:var(--r-xl); padding:2rem 1.6rem 1.7rem;
  box-shadow:var(--sh-md); border-top:8px solid var(--accent);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.15), box-shadow .3s;
  transform-style:preserve-3d;
}
.price-card:hover{ box-shadow:var(--sh-lg); }
.price-card.featured{ background:linear-gradient(180deg,#fff,#FFF4F7); }
.ribbon{
  position:absolute; top:-15px; left:50%; translate:-50% 0;
  background:linear-gradient(135deg,var(--gold),var(--orange)); color:var(--navy);
  font-family:var(--f-head); font-weight:800; font-size:.76rem; letter-spacing:1.5px; text-transform:uppercase;
  padding:.4em 1.1em; border-radius:999px; box-shadow:0 8px 18px rgba(242,128,43,.4); white-space:nowrap;
}
.price-card header{ text-align:center; margin-bottom:1rem; }
.pc-ico{ font-size:2.1rem; display:block; line-height:1; margin-bottom:.4rem; }
.price-card h3{ font-size:1.35rem; color:var(--accent); margin:0 0 .3rem; }
.pc-tag{ display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--ink-soft); background:#F3F5F9; padding:.28em .85em; border-radius:999px; }
.pc-headline{ text-align:center; font-family:var(--f-head); font-weight:800; font-size:2.7rem; line-height:1; margin:.4rem 0 .3rem; }
.pc-headline small{ font-size:.95rem; font-weight:700; color:var(--ink-soft); display:block; letter-spacing:.5px; }
.pc-headline.green{ color:var(--green); } .pc-headline.teal{ color:var(--teal); } .pc-headline.orange{ color:var(--orange); }
.pc-meta{ text-align:center; font-size:.93rem; color:var(--ink-soft); margin:.2rem 0 1.1rem; line-height:1.5; }
.pc-meta strong{ color:var(--navy); }

.pc-prices{ display:flex; gap:.7rem; margin:.2rem 0 1.2rem; }
.pc-tier{ flex:1; background:#FFE7ED; border-radius:var(--r-md); padding:.7rem .5rem; text-align:center; border:2px solid #FFD3DF; }
.pc-tier span{ display:block; font-size:.78rem; font-weight:800; letter-spacing:.6px; color:var(--pink-dk); text-transform:uppercase; }
.pc-tier b{ display:block; font-family:var(--f-head); font-size:1.9rem; color:var(--pink); line-height:1.1; }

.pc-list{ list-style:none; padding:0; margin:0 0 1.5rem; display:grid; gap:.6rem; }
.pc-list li{ position:relative; padding-left:1.85rem; font-size:.96rem; line-height:1.5; color:#3B4C63; }
.pc-list li::before{
  content:''; position:absolute; left:0; top:.28em; width:1.25rem; height:1.25rem; border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
}
.pc-list li strong{ color:var(--navy); }

/* ============================================================ WHY ============================================================ */
.why-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.3rem; }
.why{ flex:1 1 215px; max-width:300px; text-align:center; padding:1.6rem 1.2rem; border-radius:var(--r-lg); background:#fff; box-shadow:var(--sh-sm); transition:transform .35s cubic-bezier(.2,.9,.3,1.2); }
.why:hover{ transform:translateY(-8px) rotate(-1deg); }
.why h3{ font-size:1.08rem; margin-bottom:.3rem; }
.why p{ margin:0; font-size:.94rem; color:var(--ink-soft); }
.why-ico{ width:62px; height:62px; margin:0 auto .9rem; border-radius:50%; display:grid; place-items:center; }
.why-ico svg{ width:32px; height:32px; }
.why-ico.pink{ background:#FFE1E8; color:var(--pink); }
.why-ico.green{ background:#DFF3E5; color:var(--green); }
.why-ico.teal{ background:#D8F0F3; color:var(--teal); }
.why-ico.orange{ background:#FFE9D6; color:var(--orange); }

/* ============================================================ STEPS ============================================================ */
.steps{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:1.6rem 1.3rem; }
.step{ flex:1 1 215px; max-width:300px; position:relative; background:#fff; border-radius:var(--r-lg); padding:2.4rem 1.4rem 1.6rem; box-shadow:var(--sh-sm); text-align:center; transition:transform .35s; }
.step:hover{ transform:translateY(-7px); }
.step-n{
  position:absolute; top:-22px; left:50%; translate:-50% 0;
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--pink),#FF7A5C); color:#fff;
  font-family:var(--f-head); font-weight:800; font-size:1.35rem; box-shadow:var(--sh-pink);
}
.step h3{ font-size:1.1rem; }
.step p{ margin:0; font-size:.94rem; color:var(--ink-soft); }

/* ============================================================ GALLERY ============================================================ */
.gallery-grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); }
.gallery-grid:empty{ display:none; }
.gphoto{
  position:relative; padding:0; border:0; cursor:pointer; background:#fff;
  border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-sm);
  aspect-ratio:1/1; display:block;
  opacity:0; transform:translateY(24px) scale(.96);
  transition:opacity .5s, transform .45s cubic-bezier(.2,.9,.3,1.2), box-shadow .35s;
  transition-delay:calc(var(--i,0) * 55ms);
}
.gphoto.in{ opacity:1; transform:none; }
.gphoto img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.9,.3,1.1); }
.gphoto:hover{ box-shadow:var(--sh-lg); }
.gphoto:hover img{ transform:scale(1.08); }
.gphoto::after{
  content:'⤢'; position:absolute; right:.6rem; bottom:.6rem;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:var(--pink-dk); font-size:1rem;
  opacity:0; transform:scale(.6); transition:.3s cubic-bezier(.2,.9,.3,1.4);
}
.gphoto:hover::after{ opacity:1; transform:none; }
.gphoto figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.6rem .8rem .6rem; text-align:left;
  background:linear-gradient(transparent, rgba(18,49,92,.72));
  color:#fff; font-family:var(--f-head); font-weight:600; font-size:.9rem;
}

.gallery-empty{ text-align:center; background:#fff; border-radius:var(--r-xl); padding:2.6rem 1.6rem; box-shadow:var(--sh-sm); border:2.5px dashed var(--blush-2); }
.gallery-empty[hidden]{ display:none; }
.ge-art{ display:flex; justify-content:center; gap:.4rem; margin-bottom:.6rem; }
.ge-art svg{ width:74px; height:74px; filter:drop-shadow(0 8px 14px rgba(18,49,92,.16)); }
.ge-art svg:nth-child(1){ rotate:-8deg; } .ge-art svg:nth-child(3){ rotate:8deg; }
.gallery-empty p{ color:var(--ink-soft); max-width:460px; margin:.3rem auto 0; }

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(12,34,68,.94); backdrop-filter:blur(8px);
  padding:clamp(1rem,5vw,3rem); animation:fadeIn .28s ease both;
}
.lightbox[hidden]{ display:none; }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
.lb-figure{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:.9rem; animation:pop .35s cubic-bezier(.2,1.3,.4,1) both; }
.lb-figure img{ max-width:100%; max-height:78vh; border-radius:var(--r-md); box-shadow:0 30px 70px rgba(0,0,0,.5); object-fit:contain; }
.lb-figure figcaption{ color:#fff; font-family:var(--f-head); font-size:1.05rem; text-align:center; }
.lb-figure figcaption:empty{ display:none; }
.lb-x, .lb-nav{
  position:absolute; border:0; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.14); backdrop-filter:blur(6px);
  border-radius:50%; display:grid; place-items:center; line-height:1;
  transition:background .25s, transform .25s cubic-bezier(.2,.9,.3,1.4);
}
.lb-x:hover, .lb-nav:hover{ background:var(--pink); transform:scale(1.12); }
.lb-x{ top:1.1rem; right:1.1rem; width:46px; height:46px; font-size:1.8rem; }
.lb-nav{ top:50%; translate:0 -50%; width:54px; height:54px; font-size:2.4rem; padding-bottom:6px; }
.lb-prev{ left:1.1rem; } .lb-next{ right:1.1rem; }

.social-cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.6rem; }
.social-card{
  display:flex; align-items:center; gap:.9rem; text-decoration:none;
  background:#fff; padding:.9rem 1.5rem .9rem 1rem; border-radius:999px;
  box-shadow:var(--sh-sm); transition:transform .3s cubic-bezier(.2,.9,.3,1.3), box-shadow .3s;
}
.social-card:hover{ transform:translateY(-5px) scale(1.03); box-shadow:var(--sh-md); }
.sc-ico{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:#fff; flex:none; }
.sc-ico svg{ width:26px; height:26px; }
.social-card.ig .sc-ico{ background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7); }
.social-card.tt .sc-ico{ background:#111; }
.social-card b{ display:block; font-family:var(--f-head); color:var(--navy); font-size:1.05rem; line-height:1.2; }
.social-card small{ color:var(--pink-dk); font-weight:800; font-size:.74rem; letter-spacing:1.4px; text-transform:uppercase; }

/* ============================================================ FAQ ============================================================ */
.acc{ display:grid; gap:.85rem; }
.acc details{ background:#fff; border-radius:var(--r-md); box-shadow:var(--sh-sm); overflow:hidden; border:2px solid transparent; transition:border-color .3s, box-shadow .3s; }
.acc details[open]{ border-color:#FFD3DF; box-shadow:var(--sh-md); }
.acc summary{
  cursor:pointer; list-style:none; padding:1.1rem 3.4rem 1.1rem 1.4rem; position:relative;
  font-family:var(--f-head); font-weight:700; font-size:1.06rem; color:var(--navy);
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{
  content:'+'; position:absolute; right:1.15rem; top:50%; translate:0 -50%;
  width:30px; height:30px; border-radius:50%; background:var(--blush-2); color:var(--pink-dk);
  display:grid; place-items:center; font-size:1.35rem; font-weight:700; line-height:1;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.3), background .3s;
}
.acc summary:hover::after{ background:var(--pink); color:#fff; }
.acc details[open] summary::after{ transform:translateY(-50%) rotate(135deg); background:var(--pink); color:#fff; }
.acc-body{ padding:0 1.4rem 1.3rem; }
.acc-body p{ margin:0; color:var(--ink-soft); }

/* ============================================================ BOOKING ============================================================ */
.book-sec{ background:linear-gradient(165deg,#FFE3EA,#FFF1F4 55%,#FFF8EF); }
.book-wrap{ display:grid; gap:2.6rem; grid-template-columns:1fr 1.05fr; align-items:start; }
.book-copy h2{ margin-bottom:.5rem; }
.book-copy .lede{ margin-left:0; }

.contact-list{ list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:.85rem; }
.contact-list li{ display:flex; align-items:center; gap:.9rem; background:#fff; padding:.85rem 1.15rem; border-radius:var(--r-md); box-shadow:var(--sh-sm); transition:transform .3s cubic-bezier(.2,.9,.3,1.3); }
.contact-list li:hover{ transform:translateX(7px); }
.cl-ico{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; flex:none; }
.cl-ico svg{ width:24px; height:24px; }
.cl-ico.pink{ background:var(--pink); } .cl-ico.teal{ background:var(--teal); }
.cl-ico.navy{ background:var(--navy); } .cl-ico.dark{ background:#111; }
.cl-ico.grad{ background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7); }
.contact-list small{ display:block; font-size:.72rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-soft); }
.contact-list a, .contact-list b{ font-family:var(--f-head); font-weight:700; font-size:1.06rem; color:var(--navy); text-decoration:none; }
.contact-list a:hover{ color:var(--pink-dk); }

.book-form{ background:#fff; border-radius:var(--r-xl); padding:2rem; box-shadow:var(--sh-lg); position:relative; }
.bf-row{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
.field{ display:block; margin-bottom:1rem; }
.field > span{ display:block; font-family:var(--f-head); font-weight:700; font-size:.92rem; color:var(--navy); margin-bottom:.35rem; }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--f-body); font-size:1rem; color:var(--ink);
  padding:.8rem 1rem; border-radius:var(--r-sm); border:2.5px solid #E8EDF4; background:#FBFCFE;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.field textarea{ resize:vertical; min-height:104px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--pink); background:#fff; box-shadow:0 0 0 4px rgba(255,77,121,.16);
}
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#E8305F; background:#FFF5F7; }
.err{ display:none; font-style:normal; font-size:.83rem; font-weight:700; color:#E8305F; margin-top:.3rem; }
.field.invalid .err{ display:block; }

.form-alt{ text-align:center; font-size:.92rem; color:var(--ink-soft); margin:.9rem 0 0; }

.form-done{
  position:absolute; inset:0; background:#fff; border-radius:var(--r-xl);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:2rem; gap:.4rem; animation:pop .5s cubic-bezier(.2,1.4,.4,1) both;
}
.form-done[hidden]{ display:none; }
.fd-ico{ width:72px; height:72px; margin-bottom:.6rem; }
.fd-ico svg{ width:100%; height:100%; display:block; }
.form-done p{ color:var(--ink-soft); max-width:400px; margin:0 0 1rem; }

/* ============================================================ FOOTER ============================================================ */
.footer{ position:relative; background:var(--navy); color:rgba(255,255,255,.78); padding:4.5rem 0 0; margin-top:-1px; }
.foot-wave{ position:absolute; left:0; bottom:100%; margin-bottom:-2px; width:100%; height:70px; }
.foot-grid{ display:grid; gap:2.2rem; grid-template-columns:1.5fr 1fr 1.2fr 1.4fr; padding-bottom:2.6rem; }
.foot-brand{ margin-bottom:.9rem; }
.foot-brand .brand-script{ color:#fff; font-size:1.7rem; }
.foot-brand .brand-block{ color:var(--teal-lt); font-size:.82rem; }
.foot-tag{ font-size:.96rem; margin:0; line-height:1.7; }
.footer h4{ color:#fff; font-size:1.02rem; letter-spacing:.4px; margin-bottom:.9rem; }
.footer a{ display:block; color:rgba(255,255,255,.74); text-decoration:none; font-size:.95rem; padding:.24rem 0; transition:color .2s, transform .25s; }
.footer a:hover{ color:var(--pink-lt); transform:translateX(5px); }
/* the generic rule above must not flatten the logo lock-up */
.footer a.foot-brand{ display:inline-flex; padding:0; }
.footer a.foot-brand:hover{ transform:none; }
.foot-loc{ display:block; margin-top:.7rem; font-size:.86rem; color:var(--teal-lt); font-weight:700; }
.foot-sign{ text-align:center; font-family:var(--f-script); font-size:1.6rem; color:#fff; margin:0 0 2rem; }
.foot-sign span{ display:block; font-family:var(--f-head); font-size:.9rem; letter-spacing:2px; text-transform:uppercase; color:var(--teal-lt); margin-top:.3rem; }
.foot-strip{ background:var(--navy-2); display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; padding:.9rem 1rem; font-family:var(--f-head); font-weight:700; letter-spacing:2.4px; text-transform:uppercase; font-size:.84rem; color:#fff; }
.foot-strip .ico{ width:.95em; height:.95em; color:var(--pink); }
.copy{ text-align:center; font-size:.82rem; padding:1rem; margin:0; background:var(--navy-2); color:rgba(255,255,255,.5); }

/* ============================================================ MEET THE OWNER ============================================================ */
.owner-sec{ background:linear-gradient(150deg,#FFF1F4,#FFE3EA 45%,#FFF8EF); overflow:hidden; }
.owner-wrap{ display:grid; gap:clamp(2rem,5vw,3.6rem); grid-template-columns:.85fr 1.15fr; align-items:center; }

.owner-media{ position:relative; }
.owner-photo{
  position:relative; aspect-ratio:1/1; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(160deg,#FFD9E2,#FFB5C8);
  box-shadow:var(--sh-lg); border:8px solid #fff; rotate:-2.5deg;
  transition:rotate .5s cubic-bezier(.2,.9,.3,1.2), transform .5s;
}
.owner-media:hover .owner-photo{ rotate:0deg; transform:translateY(-6px); }
.owner-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.owner-photo img.is-logo{ object-fit:contain; padding:6%; background:#fff; }

.owner-badge{
  position:absolute; left:50%; bottom:-18px; translate:-50% 0; z-index:3;
  display:inline-flex; align-items:center; gap:.5em; white-space:nowrap;
  background:#fff; color:var(--pink-dk); font-family:var(--f-head); font-weight:700; font-size:.9rem;
  padding:.55em 1.2em; border-radius:999px; box-shadow:var(--sh-md); border:2.5px solid var(--blush-2);
}
.owner-float{ position:absolute; width:92px; height:92px; z-index:2; filter:drop-shadow(0 10px 18px rgba(18,49,92,.22)); }
.of1{ top:-26px; right:-18px; animation:bob 6.2s ease-in-out infinite; }
.of2{ bottom:6%; left:-34px; animation:bob 7.4s ease-in-out infinite .8s; }

.owner-copy .eyebrow{ font-size:.95rem; letter-spacing:1px; text-transform:none; }
.owner-copy h2{ margin-bottom:.3rem; }
.owner-intro{ font-family:var(--f-head); font-weight:700; font-size:1.2rem; color:var(--teal); margin:0 0 1.1rem; }
.owner-copy p{ color:#3B4C63; margin:0 0 1rem; font-size:1.03rem; }
.owner-sign{ font-family:var(--f-script); font-size:1.32rem; color:var(--pink-dk); line-height:1.6; }
.owner-cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4rem; }

/* ============================================================ REVIEWS ============================================================ */
.rating-summary{ display:inline-flex; align-items:center; gap:.7rem; flex-wrap:wrap; justify-content:center; margin-top:1rem; background:#fff; padding:.6rem 1.3rem; border-radius:999px; box-shadow:var(--sh-sm); }
.rating-summary[hidden]{ display:none; }
.rs-stars{ display:inline-flex; gap:2px; }
.rs-stars svg{ width:20px; height:20px; fill:#DCE3EC; }
.rs-stars svg.on{ fill:var(--gold); }
.rs-text{ font-size:.95rem; color:var(--ink-soft); font-weight:700; }
.rs-text b{ font-family:var(--f-head); font-size:1.25rem; color:var(--navy); }

.reviews-grid{ display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); }
.reviews-grid:empty{ display:none; }
.review{
  background:#fff; border-radius:var(--r-lg); padding:1.5rem 1.4rem; box-shadow:var(--sh-sm);
  border:2px solid #fff; position:relative; display:flex; flex-direction:column;
  opacity:0; transform:translateY(24px); transition:opacity .5s, transform .5s cubic-bezier(.2,.9,.3,1.2), box-shadow .35s;
  transition-delay:calc(var(--i,0) * 60ms);
}
.review.in{ opacity:1; transform:none; }
.review:hover{ box-shadow:var(--sh-md); border-color:var(--blush-2); }
.review-stars{ display:flex; gap:2px; margin-bottom:.6rem; }
.review-stars svg{ width:18px; height:18px; fill:#DCE3EC; }
.review-stars svg.on{ fill:var(--gold); }
.review-text{ margin:0 0 1rem; color:#3B4C63; font-size:1rem; line-height:1.6; flex:1; }
.review-text::before{ content:'“'; font-family:var(--f-script); color:var(--pink-lt); font-size:2rem; line-height:0; vertical-align:-.35em; margin-right:.15em; }
.review-who{ display:flex; align-items:center; gap:.7rem; }
.review-avatar{
  width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--pink),#FF9A5B); color:#fff;
  font-family:var(--f-head); font-weight:800; font-size:1.05rem;
}
.review-name{ font-family:var(--f-head); font-weight:700; color:var(--navy); line-height:1.2; }
.review-meta{ display:block; font-size:.8rem; color:var(--ink-soft); font-weight:600; }
.reviews-empty{ text-align:center; background:#fff; border-radius:var(--r-xl); padding:2.8rem 1.6rem; box-shadow:var(--sh-sm); border:2.5px dashed var(--blush-2); }
.reviews-empty[hidden]{ display:none; }
.re-art{ width:56px; height:56px; fill:var(--gold); margin-bottom:.4rem; }
.reviews-empty p{ color:var(--ink-soft); max-width:440px; margin:.3rem auto 0; }
.reviews-actions{ text-align:center; margin-top:2.4rem; }

/* ============================================================ MODAL ============================================================ */
.modal{ position:fixed; inset:0; z-index:210; display:grid; place-items:center; padding:1.2rem; }
.modal[hidden]{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(12,34,68,.6); backdrop-filter:blur(6px); animation:fadeIn .28s ease both; }
.modal-card{
  position:relative; width:min(560px,100%); max-height:90vh; overflow-y:auto;
  background:#fff; border-radius:var(--r-xl); padding:2rem; box-shadow:var(--sh-lg);
  animation:pop .4s cubic-bezier(.2,1.3,.4,1) both;
}
.modal-x{
  position:absolute; top:.9rem; right:.9rem; width:38px; height:38px; border:0; cursor:pointer;
  border-radius:50%; background:var(--blush-2); color:var(--pink-dk); font-size:1.5rem; line-height:1;
  display:grid; place-items:center; transition:.25s cubic-bezier(.2,.9,.3,1.4);
}
.modal-x:hover{ background:var(--pink); color:#fff; transform:rotate(90deg); }
.modal-card h3{ font-size:1.5rem; margin-bottom:.2rem; }
.modal-sub{ color:var(--ink-soft); margin:0 0 1.4rem; font-size:.96rem; }
.modal-note{ font-size:.85rem; color:var(--ink-soft); text-align:center; margin:.9rem 0 0; line-height:1.55; }

/* honeypot — off-screen rather than display:none, which bots skip */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-error{
  background:#FFE7EC; color:#B3123F; border:2px solid #FFC2D2;
  border-radius:var(--r-sm); padding:.7rem 1rem; margin:0 0 1rem;
  font-size:.93rem; font-weight:700; text-align:center;
}
.form-error[hidden]{ display:none; }

.btn[disabled]{ opacity:.6; pointer-events:none; }

.star-field{ border:0; padding:0; margin:0 0 1rem; }
.star-field > span{ display:block; font-family:var(--f-head); font-weight:700; font-size:.92rem; color:var(--navy); margin-bottom:.35rem; }
.star-pick{ display:flex; gap:.3rem; }
.star-pick button{ border:0; background:none; cursor:pointer; padding:.15rem; line-height:0; border-radius:8px; transition:transform .22s cubic-bezier(.2,.9,.3,1.5); }
.star-pick button:hover{ transform:scale(1.22) rotate(-8deg); }
.star-pick svg{ width:34px; height:34px; fill:#DCE3EC; transition:fill .2s; }
.star-pick button.on svg{ fill:var(--gold); }
.star-field.invalid .err{ display:block; }

.modal-done{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:.3rem; animation:pop .45s cubic-bezier(.2,1.3,.4,1) both; }
.modal-done[hidden]{ display:none; }
.modal-done p{ color:var(--ink-soft); margin:0 0 1rem; }

/* ============================================================ MISC ============================================================ */
.to-top{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:90;
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--pink),#FF7A5C); color:#fff; text-decoration:none;
  font-size:1.3rem; box-shadow:var(--sh-pink);
  opacity:0; pointer-events:none; transform:translateY(16px) scale(.85); transition:.35s cubic-bezier(.2,.9,.3,1.3);
}
.to-top.show{ opacity:1; pointer-events:auto; transform:none; }
.to-top:hover{ transform:translateY(-4px) scale(1.08); }

.paw-trail{ position:fixed; z-index:9999; pointer-events:none; width:22px; height:22px; fill:var(--pink); opacity:.55; animation:pawFade 1s forwards; }
@keyframes pawFade{ from{ transform:scale(.4) rotate(var(--rot)); opacity:.6 } to{ transform:scale(1.15) rotate(var(--rot)); opacity:0 } }

.confetti{ position:fixed; z-index:9998; pointer-events:none; width:14px; height:14px; }

/* ============================================================ RESPONSIVE ============================================================ */
@media (max-width:1080px){
  .owner-wrap{ grid-template-columns:1fr; }
  .owner-media{ max-width:340px; margin-inline:auto; }
  .of1{ right:-8px; } .of2{ left:-18px; }
}

@media (max-width:1000px){
  .book-wrap{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}

/* nav carries 6 links + CTA, so it collapses to the drawer earlier than the other breakpoints */
@media (max-width:1000px){
  .burger{ display:grid; }
  .nav{ background:rgba(255,241,244,.9); backdrop-filter:blur(14px); box-shadow:0 4px 20px rgba(18,49,92,.08); }
  .nav.is-stuck{ height:var(--nav-h); } /* keep drawer flush with the bar */
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:.2rem;
    background:rgba(255,255,255,.98); backdrop-filter:blur(20px);
    padding:1.1rem max(1.4rem,4vw) 1.6rem;
    box-shadow:0 20px 40px rgba(18,49,92,.16);
    border-radius:0 0 var(--r-lg) var(--r-lg);
    clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none;
    transition:clip-path .45s cubic-bezier(.2,.9,.3,1), opacity .3s;
  }
  .nav-links.open{ clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto; }
  .nav-links a{ font-size:1.15rem; padding:.75em .6em; border-bottom:1.5px solid #F3E6EA; border-radius:0; }
  .nav-links a:not(.nav-cta)::after{ display:none; }
  .nav-cta{ margin:.9rem 0 0; border-bottom:0 !important; justify-content:center; }
  .hero-title{ letter-spacing:-.5px; }
  .fc3,.fc4{ display:none; }
  .hero-stats{ gap:.6rem; }
  .stat{ min-width:0; flex:1 1 40%; padding:.6rem .8rem; }
  .pc-prices{ flex-direction:column; }
}

@media (max-width:560px){
  body{ font-size:16px; }
  .bf-row{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; text-align:center; }
  .foot-brand{ justify-content:center; }
  .footer a:hover{ transform:none; }
  .book-form{ padding:1.4rem; }
  .filters{ width:100%; border-radius:var(--r-lg); }
  .filter{ flex:1 1 auto; font-size:.88rem; padding:.6em .8em; }
  .filter-pill{ display:none; }
  .filter.is-on{ background:linear-gradient(135deg,var(--pink),#FF7A5C); }
  .critter-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .critter-face{ min-height:250px; }
  .critter-art{ height:112px; }
  .critter-art svg{ width:88px; height:88px; }
  .to-top{ right:.9rem; bottom:.9rem; }
  .gallery-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.7rem; }
  .reviews-grid{ grid-template-columns:1fr; }
  .modal-card{ padding:1.5rem 1.2rem; }
  .owner-float{ width:70px; height:70px; }
  .lb-nav{ width:44px; height:44px; font-size:2rem; }
  .lb-prev{ left:.5rem; } .lb-next{ right:.5rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal, .critter, .gphoto, .review{ opacity:1; transform:none; }
}