/* Coastal Hearth — coastal boutique design system */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --sand:#e9d6b4; --sand-deep:#d6bd93;
  --turq:#35b5b5; --turq-deep:#1f8f8f; --aqua:#8fdcda;
  --cream:#fbf7ee; --cream-warm:#f5ecda;
  --drift:#6b5b48; --drift-dark:#4a3f32;
  --navy:#1e3a5f; --sea:#0f2b45;
  --white:#ffffff;
  --radius:18px;
  --shadow:0 18px 50px rgba(15,43,69,.14);
  --shadow-soft:0 8px 24px rgba(15,43,69,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;background:var(--cream);color:var(--drift-dark);overflow-x:hidden;line-height:1.65}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- preloader ---------- */
#preloader{position:fixed;inset:0;background:linear-gradient(160deg,var(--cream),var(--sand));z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .7s ease,visibility .7s}
#preloader.done{opacity:0;visibility:hidden}
#preloader .pl-logo{font-family:'Great Vibes',cursive;font-size:clamp(2.4rem,7vw,3.6rem);color:var(--navy)}
#preloader .waves{width:180px;height:34px}
#preloader .waves path{fill:none;stroke:var(--turq);stroke-width:3;stroke-linecap:round;animation:waveDash 1.6s linear infinite}
#preloader .waves path:nth-child(2){stroke:var(--turq-deep);animation-delay:.2s}
#preloader .waves path:nth-child(3){stroke:var(--aqua);animation-delay:.4s}
@keyframes waveDash{0%{stroke-dasharray:12 200;stroke-dashoffset:0}100%{stroke-dasharray:12 200;stroke-dashoffset:-212}}

/* ---------- scroll progress ---------- */
#progress{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--turq),var(--aqua));z-index:9000;border-radius:0 4px 4px 0}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:800;padding:14px 5vw;display:flex;align-items:center;justify-content:space-between;transition:background .4s,box-shadow .4s,padding .4s}
header.scrolled{background:rgba(251,247,238,.92);backdrop-filter:blur(14px);box-shadow:var(--shadow-soft);padding:8px 5vw}
.brand img{height:44px;width:auto}
nav{display:flex;gap:26px;align-items:center}
nav a{font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sea);text-decoration:none;position:relative;font-weight:500}
nav a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--turq);transition:width .35s}
nav a:hover::after{width:100%}
.nav-call{background:var(--navy);color:#fff!important;padding:10px 22px;border-radius:50px}
.nav-call::after{display:none}
.nav-call:hover{background:var(--turq-deep);transform:translateY(-2px)}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:6px;padding:8px}
.burger span{display:block;width:26px;height:2px;background:var(--navy);border-radius:2px;transition:.3s}
@media(max-width:860px){
  nav{position:fixed;top:0;right:-100%;height:100vh;width:min(78vw,320px);background:var(--cream);flex-direction:column;justify-content:center;box-shadow:-10px 0 40px rgba(0,0,0,.15);transition:right .4s ease;z-index:850}
  nav.open{right:0}
  .burger{display:flex;z-index:860}
}

/* ---------- hero ---------- */
.hero{min-height:100svh;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;background:var(--sea)}
.hero-bg{position:absolute;inset:0;background:url('hero.jpg') center/cover no-repeat;transform:scale(1.08);animation:heroDrift 22s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1.08) translateY(0)}to{transform:scale(1.14) translateY(-18px)}}
.hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,43,69,.42) 0%,rgba(15,43,69,.12) 42%,rgba(15,43,69,.55) 100%)}
#bubbles{position:absolute;inset:0;pointer-events:none}
.hero-inner{position:relative;z-index:3;max-width:900px;padding:120px 6vw 90px}
.hero-eyebrow{font-size:.85rem;letter-spacing:.42em;text-transform:uppercase;color:var(--aqua);margin-bottom:14px}
.hero h1{font-family:'Great Vibes',cursive;font-size:clamp(3.4rem,11vw,7.2rem);line-height:1.05;text-shadow:0 6px 30px rgba(0,0,0,.35);margin-bottom:8px}
.hero .wave-rule{width:190px;height:26px;margin:10px auto}
.hero .tagline{font-family:'Cormorant Garamond',serif;font-size:clamp(1.25rem,3.4vw,1.8rem);font-style:italic;color:#fff;opacity:.95;margin-bottom:34px}
.hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:15px 38px;border-radius:60px;font-size:.95rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;font-weight:600;transition:transform .3s,box-shadow .3s,background .3s;cursor:pointer;border:none}
.btn-primary{background:linear-gradient(135deg,var(--turq),var(--turq-deep));color:#fff;box-shadow:0 12px 30px rgba(53,181,181,.45)}
.btn-primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 18px 40px rgba(53,181,181,.55)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.65);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.28);transform:translateY(-3px)}
.hero-scroll{position:absolute;bottom:88px;left:50%;transform:translateX(-50%);z-index:3;color:#fff;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;opacity:.85;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,10px)}}
.wave-divider{display:block;width:100%;height:70px;margin-bottom:-1px;position:relative;z-index:4}

/* ---------- sections ---------- */
section{padding:90px 6vw;position:relative}
.section-head{text-align:center;max-width:720px;margin:0 auto 54px}
.eyebrow{font-size:.82rem;letter-spacing:.38em;text-transform:uppercase;color:var(--turq-deep);margin-bottom:12px;font-weight:600}
.section-head h2{font-family:'Great Vibes',cursive;font-size:clamp(2.6rem,7vw,4rem);color:var(--navy);margin-bottom:10px}
.section-head p{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-style:italic;color:var(--drift)}
.wave-rule{width:150px;height:22px;margin:14px auto 0}

/* category tabs */
.cat-tabs{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:44px}
.cat-tab{padding:12px 30px;border-radius:50px;border:1.5px solid var(--sand-deep);background:transparent;color:var(--drift-dark);font-family:'Jost';font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.3s;font-weight:500}
.cat-tab:hover{border-color:var(--turq);color:var(--turq-deep)}
.cat-tab.active{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:var(--shadow-soft)}

/* product grid */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:26px;max-width:1200px;margin:0 auto}
.product{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft);transition:transform .4s,box-shadow .4s;cursor:pointer;position:relative}
.product:hover{transform:translateY(-10px);box-shadow:var(--shadow)}
.product .p-img{aspect-ratio:1/1;overflow:hidden;position:relative}
.product .p-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.product:hover .p-img img{transform:scale(1.07)}
.product .p-badge{position:absolute;top:14px;left:14px;background:var(--turq);color:#fff;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;padding:7px 15px;border-radius:30px;font-weight:600}
.product .p-body{padding:20px 22px 24px;text-align:center}
.product h3{font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:var(--navy);margin-bottom:4px;font-weight:600}
.product .p-sub{font-size:.86rem;color:var(--drift);letter-spacing:.06em;margin-bottom:10px}
.product .p-price{font-size:1.25rem;color:var(--turq-deep);font-weight:600;letter-spacing:.04em}
.product .p-cta{margin-top:12px;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--turq-deep);font-weight:600}
.hidden{display:none!important}

/* quick view modal */
.modal{position:fixed;inset:0;z-index:950;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:.35s}
.modal.open{opacity:1;visibility:visible}
.modal-back{position:absolute;inset:0;background:rgba(15,43,69,.6);backdrop-filter:blur(6px)}
.modal-card{position:relative;background:var(--cream);border-radius:24px;max-width:760px;width:100%;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 30px 80px rgba(0,0,0,.35);transform:translateY(26px) scale(.97);transition:.35s}
.modal.open .modal-card{transform:none}
.modal-card .m-img{background:var(--sand)}
.modal-card .m-img img{width:100%;height:100%;object-fit:cover;min-height:320px}
.modal-card .m-body{padding:40px 36px;display:flex;flex-direction:column;justify-content:center}
.modal-card h3{font-family:'Great Vibes',cursive;font-size:2.4rem;color:var(--navy);margin-bottom:6px}
.modal-card .m-sub{font-size:.9rem;color:var(--drift);letter-spacing:.08em;margin-bottom:14px}
.modal-card p{font-size:1rem;color:var(--drift-dark);margin-bottom:18px}
.modal-card .m-price{font-size:1.6rem;color:var(--turq-deep);font-weight:600;margin-bottom:22px}
.modal-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.9);font-size:1.2rem;cursor:pointer;color:var(--navy);z-index:2}
@media(max-width:680px){.modal-card{grid-template-columns:1fr}.modal-card .m-img img{min-height:220px}}

/* ---------- story ---------- */
.story{background:linear-gradient(180deg,var(--cream) 0%,var(--cream-warm) 100%)}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:1100px;margin:0 auto;align-items:center}
.story-photo{border-radius:26px;overflow:hidden;box-shadow:var(--shadow);transform:rotate(-2deg);transition:transform .5s}
.story-photo:hover{transform:rotate(0) scale(1.02)}
.story-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.story-copy .script{font-family:'Great Vibes',cursive;font-size:clamp(2.2rem,5vw,3.2rem);color:var(--turq-deep);margin-bottom:14px}
.story-copy h2{font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--navy);margin-bottom:18px;font-weight:600}
.story-copy p{margin-bottom:16px;color:var(--drift-dark)}
.tagline-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.chip{background:#fff;border:1px solid var(--sand-deep);padding:9px 20px;border-radius:40px;font-size:.85rem;color:var(--drift-dark);font-style:italic;font-family:'Cormorant Garamond',serif;font-size:1.02rem}
@media(max-width:860px){.story-grid{grid-template-columns:1fr}}

/* ---------- values ---------- */
.values{background:var(--navy);color:#fff;overflow:hidden}
.values .section-head h2{color:#fff}
.values .section-head p{color:var(--aqua)}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1100px;margin:0 auto}
.value-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:40px 32px;text-align:center;backdrop-filter:blur(8px);transition:transform .4s,background .4s}
.value-card:hover{transform:translateY(-8px);background:rgba(255,255,255,.1)}
.value-icon{font-size:2.6rem;margin-bottom:16px;display:block}
.value-card h3{font-family:'Cormorant Garamond',serif;font-size:1.5rem;margin-bottom:10px;color:var(--aqua)}
.value-card p{font-size:.98rem;opacity:.88}
@media(max-width:760px){.values-grid{grid-template-columns:1fr}}

/* ---------- reviews ---------- */
.reviews-invite{max-width:720px;margin:0 auto;text-align:center;background:#fff;border-radius:26px;padding:56px 40px;box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
.reviews-invite::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--turq),var(--aqua),var(--turq))}
.reviews-invite .stars{font-size:1.6rem;letter-spacing:.3em;color:var(--sand-deep);margin-bottom:16px}
.reviews-invite h2{font-family:'Great Vibes',cursive;font-size:2.8rem;color:var(--navy);margin-bottom:12px}
.reviews-invite p{color:var(--drift-dark);margin-bottom:26px}

/* ---------- contact ---------- */
.contact{background:linear-gradient(160deg,var(--sand),var(--cream-warm))}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:1000px;margin:0 auto}
.contact-card{background:#fff;border-radius:var(--radius);padding:44px 36px;text-align:center;box-shadow:var(--shadow-soft);transition:transform .35s}
.contact-card:hover{transform:translateY(-6px)}
.contact-card .c-icon{font-size:2.4rem;margin-bottom:14px;display:block}
.contact-card h3{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--navy);margin-bottom:8px}
.contact-card p{color:var(--drift);margin-bottom:18px;font-size:.95rem}
.contact-card a.big{font-size:1.25rem;font-weight:600;color:var(--turq-deep);text-decoration:none;word-break:break-all}
.contact-card a.big:hover{color:var(--navy)}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--sea);color:#fff;padding:56px 6vw 110px;text-align:center}
footer .f-logo{font-family:'Great Vibes',cursive;font-size:2.6rem;margin-bottom:8px}
footer .f-tag{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--aqua);margin-bottom:20px}
footer .f-links{display:flex;gap:24px;justify-content:center;margin-bottom:20px;flex-wrap:wrap}
footer .f-links a{color:#fff;text-decoration:none;font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
footer .f-links a:hover{opacity:1;color:var(--aqua)}
footer .f-fine{font-size:.82rem;opacity:.6}

/* ---------- sticky mobile bar ---------- */
.sticky-bar{position:fixed;bottom:0;left:0;right:0;z-index:820;display:none;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(251,247,238,.96);backdrop-filter:blur(12px);box-shadow:0 -8px 30px rgba(15,43,69,.14)}
.sticky-bar a{flex:1;text-align:center;padding:14px;border-radius:14px;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;font-weight:600}
.sticky-bar .sb-call{background:var(--navy);color:#fff}
.sticky-bar .sb-shop{background:linear-gradient(135deg,var(--turq),var(--turq-deep));color:#fff}
@media(max-width:760px){.sticky-bar{display:flex}}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
.reveal-d1{transition-delay:.12s}.reveal-d2{transition-delay:.24s}.reveal-d3{transition-delay:.36s}

/* ---------- cursor glow ---------- */
#glow{position:fixed;width:340px;height:340px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(143,220,218,.28) 0%,transparent 65%);transform:translate(-50%,-50%);left:-500px;top:-500px}
@media(hover:none){#glow{display:none}}

/* ---------- magnetic ---------- */
.magnetic{transition:transform .25s ease}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .hero-bg{animation:none}
  html{scroll-behavior:auto}
}