:root{
  --white:#ffffff;
  --ink:#1c3a3f;
  --ink-soft:#527074;
  --ink-faint:#86a0a3;
  --irid-lav:#cdc4f5;
  --irid-mint:#bfeee0;
  --irid-blush:#f7d6e4;
  --irid-sky:#cfe4fa;
  --irid-pearl:#ecf4f3;
  --accent:#5e8c93;
  --accent-deep:#2e565c;
  --line:#e9e8f0;
  --radius:18px;
  --shadow:0 10px 40px rgba(46,86,92,.08);
  --shadow-lift:0 18px 50px rgba(46,86,92,.16);
  --grad-irid:linear-gradient(120deg,#a8cdd1,var(--irid-sky) 28%,var(--irid-mint) 52%,var(--irid-blush) 78%,#a8cdd1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;background:var(--white);color:var(--ink);line-height:1.6;overflow-x:hidden}
::selection{background:#cfe3e4}
h1,h2,h3{font-weight:600;line-height:1.15}
img{max-width:100%}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:15px;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);transition:border-color .2s, box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(94,140,147,.15)}
label{font-size:13px;font-weight:500;color:var(--ink-soft);display:block;margin-bottom:6px}

.orb{position:fixed;border-radius:50%;filter:blur(80px);opacity:.28;pointer-events:none;z-index:0}
.orb-1{width:480px;height:480px;background:#a8cdd1;top:-140px;left:-120px;animation:drift1 38s ease-in-out infinite}
.orb-2{width:420px;height:420px;background:var(--irid-mint);top:30%;right:-160px;animation:drift2 44s ease-in-out infinite}
.orb-3{width:380px;height:380px;background:var(--irid-blush);bottom:-120px;left:22%;animation:drift3 50s ease-in-out infinite}
.orb-4{width:300px;height:300px;background:var(--irid-sky);top:60%;left:-120px;animation:drift2 56s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,50px) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,70px) scale(1.08)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-60px) scale(1.15)}}
@media (prefers-reduced-motion: reduce){.orb{animation:none}}

main,header,footer,section{position:relative;z-index:1}

.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(18px,5vw,56px);background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(233,232,240,.7);transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 6px 30px rgba(46,86,92,.08)}
.logo-wrap{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo-mono{width:44px;height:44px;border-radius:50%;overflow:hidden;position:relative;background:#fff;border:1.5px solid transparent;background-image:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)),var(--grad-irid);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:var(--shadow);flex-shrink:0;transition:transform .25s}
.logo-wrap:hover .logo-mono{transform:rotate(-8deg) scale(1.06)}
.logo-mono img{width:100%;height:100%;object-fit:contain;padding:4px;transform:translateY(-2px)}
.logo{font-family:'DM Serif Display',serif;font-size:26px;font-weight:400;letter-spacing:.5px;text-decoration:none;background:linear-gradient(100deg,#2e565c,#3e8e7e 40%,#8aa9d6 75%,#2e565c);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 9s linear infinite}
@keyframes shimmer{to{background-position:250% center}}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{text-decoration:none;color:var(--ink-soft);font-size:15px;font-weight:500;position:relative;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--grad-irid);border-radius:2px;transition:width .28s}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-actions{display:flex;gap:10px;align-items:center}
.icon-btn{position:relative;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;transition:transform .2s, box-shadow .2s}
.icon-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.icon-btn svg{width:20px;height:20px;stroke:var(--ink-soft)}
.cart-count{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;border-radius:10px;background:var(--accent-deep);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 5px;opacity:0;transform:scale(.5);transition:all .25s}
.cart-count.show{opacity:1;transform:scale(1)}
@media(max-width:760px){.nav-links{display:none}}

/* ===== Mobile action bar =====
   Below 760px the nav links are hidden and there was no persistent way to reach
   Book, Shop or the phone number without scrolling the whole page. This pins the
   three existing calls to action to the bottom of the viewport on phones.
   Same destinations and same labels as the hero buttons — nothing new is claimed. */
.mobile-bar{display:none}
@media(max-width:760px){
  .mobile-bar{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
    position:fixed;left:0;right:0;bottom:0;z-index:120;
    padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-top:1px solid rgba(233,232,240,.9);box-shadow:0 -6px 24px rgba(46,86,92,.09)
  }
  .mobile-bar a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:52px;padding:7px 4px;border-radius:14px;text-decoration:none;
    font-size:12.5px;font-weight:600;letter-spacing:.2px;line-height:1.1;
    color:var(--ink);background:#fff;border:1px solid var(--line)
  }
  .mobile-bar a.primary{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
  .mobile-bar a.primary svg{stroke:#fff}
  .mobile-bar svg{width:18px;height:18px;stroke:var(--accent-deep);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  /* keep the footer clear of the bar */
  footer{padding-bottom:96px}
}

.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:130px 20px 70px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-deep);background:#fff;border:1px solid var(--line);padding:8px 18px;border-radius:999px;box-shadow:var(--shadow);margin-bottom:26px}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--grad-irid);background-size:300% 300%;animation:shimmer 4s linear infinite}
.hero-logo{height:clamp(150px,24vw,240px);width:auto;max-width:88vw;object-fit:contain;margin:26px 0 44px}
.hero h1{font-size:clamp(38px,6.4vw,72px);font-weight:700;max-width:820px;letter-spacing:-1px;color:#476D75}
.hero h1 .grad{background:linear-gradient(100deg,#4a7d85,#7b9fc7 22%,#9188c2 40%,#b48bad 56%,#7fb3ae 74%,#4a7d85 100%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 8s linear infinite}
.hero p{font-size:clamp(16px,2vw,19px);color:var(--ink-soft);max-width:560px;margin:22px auto 38px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:999px;font-size:16px;font-weight:600;text-decoration:none;border:none;transition:transform .22s, box-shadow .22s}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.98)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 10px 30px rgba(28,58,63,.25)}
.btn-dark:hover{box-shadow:0 16px 40px rgba(28,58,63,.3)}
.btn-irid{position:relative;background:#fff;color:var(--ink);border:1px solid transparent;background-image:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)),var(--grad-irid);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:var(--shadow)}
.btn-irid:hover{box-shadow:var(--shadow-lift)}
.hero-scroll{margin-top:64px;color:var(--ink-faint);font-size:13px;letter-spacing:1px;text-transform:uppercase;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

.strip{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:15px 0}
.strip-track{display:flex;gap:56px;width:max-content;animation:marquee 30s linear infinite;white-space:nowrap}
.strip span{font-size:14px;font-weight:500;color:var(--ink-soft);letter-spacing:.6px}
.strip b{color:var(--accent-deep)}
@keyframes marquee{to{transform:translateX(-50%)}}

.section{padding:96px clamp(18px,6vw,72px);max-width:1200px;margin:0 auto}
.section-head{text-align:center;max-width:640px;margin:0 auto 54px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--accent-deep);margin-bottom:12px}
.section-head h2{font-size:clamp(28px,4vw,42px);letter-spacing:-.5px}
.section-head p{color:var(--ink-soft);margin-top:14px;font-size:17px}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}
/* Reveal animations are driven by IntersectionObserver. Without JS every section
   would stay at opacity:0, so force them visible instead of showing a blank page. */
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:38px}
.chip{padding:11px 24px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:16.5px;font-weight:500;color:var(--ink-soft);transition:all .22s}
.chip:hover{border-color:var(--accent);color:var(--accent-deep);transform:translateY(-2px)}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;transition:transform .28s, box-shadow .28s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
#productGrid .card:hover{box-shadow:0 18px 50px rgba(11,79,85,.45)}
.card .tile{height:130px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:var(--irid-pearl);position:relative;overflow:hidden}
.card .tile::before{content:"";position:absolute;inset:0;background:var(--grad-irid);opacity:.35;background-size:300% 300%;animation:tileflow 14s ease infinite}
@keyframes tileflow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.card .tile svg{position:relative;width:54px;height:54px;stroke:var(--accent-deep);opacity:.85}
.card .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:8px;z-index:2;border-radius:14px}
@media(min-width:560px){.card.featured{grid-column:span 2}}
.card.featured{border:2px solid transparent;background-image:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)),var(--grad-irid);background-origin:border-box;background-clip:padding-box,border-box}
.card.featured .tile{height:190px}
.card.featured h3{font-size:19px}
.card.featured .price{font-size:22px}
.combo-flag{position:absolute;top:12px;right:12px;z-index:3;background:var(--grad-irid);background-size:300% 300%;animation:tileflow 6s ease infinite;color:#123c41;font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 12px;border-radius:999px}
.cat-head{grid-column:1/-1;margin:30px 0 2px;padding-bottom:10px;border-bottom:2px solid #d9e8e9}
.cat-head:first-child{margin-top:0}
.cat-head h3{font-size:26px;color:#2e565c}
.cat-head p{font-size:16.5px;color:var(--ink-soft);margin-top:2px}
.card h3{font-size:16.5px;font-weight:600;margin-bottom:4px}
.card .tile-link{display:block;text-decoration:none}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--accent-deep)}
.card .desc{font-size:13.5px;color:var(--ink-soft);flex:1;margin-bottom:14px}
.card .row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px}
.card .price{font-size:18px;font-weight:700}
.add-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;background:var(--ink);color:#fff;border:none;font-size:13.5px;font-weight:600;transition:all .22s}
.add-btn:hover{background:var(--accent-deep);transform:translateY(-2px)}
.add-btn.added{background:#0f6e56}
.view-all{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600;color:var(--accent-deep);text-decoration:none}
.view-all:hover{text-decoration:underline}

.nav-new{position:absolute;top:-13px;left:-8px;background:var(--grad-irid);background-size:300% 300%;animation:blink 1.15s ease-in-out infinite,tileflow 6s ease infinite;color:#123c41;font-size:9.5px;font-weight:700;letter-spacing:1.2px;padding:2px 8px;border-radius:999px;transform:rotate(-8deg);pointer-events:none;box-shadow:0 3px 10px rgba(46,86,92,.3)}
@media (prefers-reduced-motion: reduce){.nav-new{animation:none}}
.new-badge{display:inline-block;background:var(--grad-irid);background-size:300% 300%;animation:blink 1.15s ease-in-out infinite,tileflow 6s ease infinite;color:#123c41;font-size:13px;font-weight:700;letter-spacing:2.5px;padding:6px 16px;border-radius:999px;margin-bottom:14px}
@keyframes blink{0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(46,86,92,.4)}50%{opacity:.45;transform:scale(1.06);box-shadow:0 0 0 10px rgba(46,86,92,0)}}
@media (prefers-reduced-motion: reduce){.new-badge{animation:none}}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;align-items:stretch}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;display:flex;flex-direction:column;position:relative;transition:transform .28s, box-shadow .28s}
.tier:hover{transform:translateY(-8px);box-shadow:var(--shadow-lift)}
.tier .gem{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.tier .gem svg{width:24px;height:24px}
.tier-bronze .gem{background:#faece7}.tier-bronze .gem svg{stroke:#993c1d}
.tier-silver .gem{background:#f1efe8}.tier-silver .gem svg{stroke:#5f5e5a}
.tier-gold .gem{background:#faeeda}.tier-gold .gem svg{stroke:#ba7517}
.tier-diamond .gem{background:var(--irid-pearl)}.tier-diamond .gem svg{stroke:var(--accent-deep)}
.tier h3{font-size:20px}
.tier .tprice{font-size:34px;font-weight:700;margin:8px 0 2px}
.tier .tprice small{font-size:15px;font-weight:500;color:var(--ink-faint)}
.tier .tsave{font-size:13px;font-weight:600;color:#0f6e56;margin-bottom:18px}
.tier ul{list-style:none;flex:1;margin-bottom:22px}
.tier li{font-size:14px;color:var(--ink-soft);padding:7px 0;border-bottom:1px dashed var(--line);display:flex;gap:9px;align-items:flex-start}
.tier li::before{content:"✓";color:var(--accent-deep);font-weight:700;flex-shrink:0}
.tier-btn{width:100%;padding:13px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;font-size:15px;font-weight:600;transition:all .22s}
.tier-btn:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.tier-diamond{border:2px solid transparent;background-image:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)),var(--grad-irid);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:var(--shadow)}
.tier-diamond .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad-irid);background-size:300% 300%;animation:tileflow 8s ease infinite;color:var(--accent-deep);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 16px;border-radius:999px;white-space:nowrap}
.tier-diamond .tier-btn{background:var(--ink);color:#fff;border-color:var(--ink)}
.tier-diamond .tier-btn:hover{background:var(--accent-deep);border-color:var(--accent-deep)}

.book-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
@media(max-width:860px){.book-wrap{grid-template-columns:1fr}}
.book-info h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:16px;letter-spacing:-.5px}
.book-info p{color:var(--ink-soft);margin-bottom:22px}
.notice{display:flex;gap:12px;align-items:flex-start;background:var(--irid-pearl);border:1px solid var(--irid-lav);border-radius:14px;padding:14px 16px;font-size:13.5px;color:var(--accent-deep)}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}
.submit-btn{width:100%;margin-top:20px;padding:15px;border-radius:999px;border:none;background:var(--ink);color:#fff;font-size:16px;font-weight:600;transition:all .22s}
.submit-btn:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:var(--shadow-lift)}

.drawer-veil{position:fixed;inset:0;background:rgba(28,58,63,.35);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:200;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer-veil.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--white);z-index:201;transform:translateX(105%);transition:transform .38s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(28,58,63,.15)}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:19px}
.drawer-close{background:none;border:none;font-size:26px;color:var(--ink-faint);line-height:1}
.drawer-body{flex:1;overflow-y:auto;padding:18px 24px}
.cart-item{display:flex;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.cart-item .ci-tile{width:52px;height:52px;border-radius:12px;background:var(--irid-pearl);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent-deep);font-size:13px}
.cart-item .ci-info{flex:1}
.cart-item .ci-info h4{font-size:14px;font-weight:600}
.cart-item .ci-info span{font-size:13px;color:var(--ink-soft)}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:15px;transition:all .15s}
.qty button:hover{border-color:var(--accent);color:var(--accent-deep)}
.drawer-foot{padding:20px 24px;border-top:1px solid var(--line)}
.subtotal{display:flex;justify-content:space-between;font-size:16px;font-weight:600;margin-bottom:14px}
.empty-cart{text-align:center;color:var(--ink-faint);padding:60px 0;font-size:15px}

.modal-veil{position:fixed;inset:0;background:rgba(28,58,63,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
.modal-veil.open{display:flex;animation:fadein .25s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{background:var(--white);border-radius:22px;max-width:480px;width:100%;padding:34px;position:relative;animation:pop .3s cubic-bezier(.22,1,.36,1);max-height:90vh;overflow-y:auto}
@keyframes pop{from{transform:scale(.92) translateY(16px);opacity:0}to{transform:none;opacity:1}}
.modal h3{font-size:22px;margin-bottom:6px}
.modal .msub{color:var(--ink-soft);font-size:14.5px;margin-bottom:20px}
.modal .drawer-close{position:absolute;top:18px;right:20px}
.success{text-align:center;padding:16px 0}
.success .check{width:64px;height:64px;border-radius:50%;background:var(--grad-irid);background-size:300% 300%;animation:tileflow 6s ease infinite;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:28px;color:var(--accent-deep)}

footer{border-top:1px solid var(--line);background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:48px clamp(18px,6vw,72px);text-align:center}
footer .logo{font-size:38px}
footer p{color:var(--ink-soft);font-size:14px;margin-top:10px}
footer .fine{color:var(--ink-faint);font-size:12.5px;margin-top:18px}

.timeline{position:relative;max-width:720px;margin:0 auto;padding-left:34px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--grad-irid);background-size:100% 300%;animation:tlflow 12s ease infinite}
@keyframes tlflow{0%,100%{background-position:50% 0%}50%{background-position:50% 100%}}
.tl-item{position:relative;padding:0 0 34px 18px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-32px;top:5px;width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 0 0 4px rgba(94,140,147,.15)}
.tl-year{font-size:13px;font-weight:700;letter-spacing:1.5px;color:var(--accent-deep);text-transform:uppercase}
.tl-item h3{font-size:18px;margin:4px 0 6px}
.tl-item p{font-size:14.5px;color:var(--ink-soft)}
.pull-quote{max-width:640px;margin:52px auto 0;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 36px;box-shadow:var(--shadow);position:relative}
.pull-quote::before{content:"“";position:absolute;top:-6px;left:24px;font-size:74px;line-height:1;background:var(--grad-irid);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.pull-quote blockquote{font-size:clamp(18px,2.4vw,22px);font-weight:500;line-height:1.5}
.pull-quote cite{display:block;margin-top:14px;font-style:normal;font-size:14px;color:var(--ink-faint)}
.story-link{display:inline-flex;align-items:center;gap:7px;margin-top:34px;font-size:14.5px;font-weight:600;color:var(--accent-deep);text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s}
.story-link:hover{border-color:var(--accent)}
blockquote.instagram-media{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);min-height:220px;border-radius:16px;overflow:hidden}
.ig-fallback{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;aspect-ratio:9/16;min-height:420px;padding:26px 22px;text-align:center;overflow:hidden;background:linear-gradient(150deg,#0b4f55,#2e565c 45%,#5e8c93 100%)}
.ig-fallback::before{content:"";position:absolute;inset:0;background:var(--grad-irid);background-size:300% 300%;opacity:.32;animation:tileflow 12s ease infinite;pointer-events:none}
.ig-fallback .ig-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(11,79,85,.4);transition:transform .3s}
.instagram-media:hover .ig-play{transform:translate(-50%,-60%) scale(1.12)}
.ig-fallback .ig-play svg{width:26px;height:26px;fill:var(--accent-deep);margin-left:3px}
.ig-fallback .ig-tag{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.9);color:var(--accent-deep);font-size:11.5px;font-weight:700;letter-spacing:.5px;padding:5px 11px;border-radius:999px}
.ig-fallback span{position:relative;font-size:15px;font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35);line-height:1.35}
.ig-fallback a{position:relative;font-size:13.5px;font-weight:600;color:#fff;text-decoration:none;opacity:.9}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-bottom:44px}
.rev-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;transition:transform .28s, box-shadow .28s}
.rev-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.rev-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rev-avatar{width:42px;height:42px;border-radius:50%;background:var(--irid-pearl);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--accent-deep);flex-shrink:0}
.rev-name{font-size:14.5px;font-weight:600}
.rev-meta{font-size:12px;color:var(--ink-faint)}
.stars{color:#eab308;font-size:15px;letter-spacing:2px;margin-bottom:10px}
.rev-text{font-size:14px;color:var(--ink-soft);flex:1}
.rev-google{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-faint);margin-top:14px}
.star-pick{display:flex;gap:6px;font-size:28px;margin:4px 0 2px;cursor:pointer;user-select:none}
.star-pick span{color:#d8d8e2;transition:color .15s, transform .15s}
.star-pick span.on{color:#eab308}
.star-pick span:hover{transform:scale(1.2)}
.rev-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;padding:13px 26px;border-radius:999px;font-size:14.5px;font-weight:500;z-index:400;opacity:0;transition:all .35s cubic-bezier(.22,1,.36,1);box-shadow:0 14px 40px rgba(28,58,63,.3)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ===== BUTTON RESKIN: static teal bold-italic, iridescent on hover/press ===== */
.btn,.add-btn,.tier-btn,.submit-btn,.chip{font-weight:700;font-style:italic;color:#2e565c;background:#fff;background-image:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)),var(--grad-irid);background-origin:border-box;background-clip:padding-box,border-box;border:1.5px solid transparent;box-shadow:var(--shadow)}
.btn-dark,.tier-diamond .tier-btn,.add-btn,.submit-btn{background:#fff;background-image:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)),var(--grad-irid);background-origin:border-box;background-clip:padding-box,border-box;color:#2e565c}
.btn:hover,.btn:active,.add-btn:hover,.add-btn:active,.tier-btn:hover,.tier-btn:active,.tier-diamond .tier-btn:hover,.submit-btn:hover,.submit-btn:active,.chip:hover,.chip:active,.chip.active{background:var(--grad-irid);background-size:280% 280%;background-origin:border-box;background-clip:border-box;animation:tileflow 7s ease infinite;color:#123c41;border-color:transparent}
.contact-grad{background:linear-gradient(100deg,#3c2e8f,#5a4fcf 38%,#2b6cb0 68%,#3c2e8f);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 8s linear infinite;text-decoration:none}
.pearl-grad{background:linear-gradient(100deg,#4a7d85,#7b9fc7 22%,#9188c2 40%,#b48bad 56%,#7fb3ae 74%,#4a7d85 100%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 8s linear infinite;text-decoration:none}
.ig-follow-btn{display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:11px 20px;border-radius:999px;background:linear-gradient(100deg,#3c2e8f,#5a4fcf 38%,#2b6cb0 68%,#3c2e8f);background-size:250% auto;color:#fff;font-size:15px;font-weight:700;text-decoration:none;box-shadow:0 6px 18px rgba(60,46,143,.28);animation:shimmer 8s linear infinite;transition:transform .25s, box-shadow .25s}
.ig-follow-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(60,46,143,.36)}
.ig-follow-btn .ig-follow-word{padding-left:9px;margin-left:2px;border-left:1px solid rgba(255,255,255,.4)}

/* ===== APPLE GLASS THEME ===== */
.card,.tier,.form-card,.rev-card,.pull-quote,.modal,.notice,.hero-badge{background-color:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);border-color:rgba(255,255,255,.75)}
.chip,.btn,.add-btn,.tier-btn,.submit-btn,.icon-btn{-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5)}
.chip{background:rgba(255,255,255,.5)}
.icon-btn{background:rgba(255,255,255,.55)}
.drawer{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(28px) saturate(1.6);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6)}
.card,.tier,.rev-card{box-shadow:0 8px 32px rgba(28,58,63,.08), inset 0 1px 0 rgba(255,255,255,.9)}
.orb{opacity:.42}

/* ===== LIQUID GLASS: lensing, morphing nav, ambient tint ===== */
.nav{transition:box-shadow .3s, left .45s cubic-bezier(.22,1,.36,1), right .45s cubic-bezier(.22,1,.36,1), top .45s cubic-bezier(.22,1,.36,1), border-radius .45s cubic-bezier(.22,1,.36,1), background .3s}
.nav.scrolled{left:14px;right:14px;top:10px;border-radius:999px;background:rgba(255,255,255,.58);-webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8);-webkit-backdrop-filter:blur(26px) saturate(1.8);border:1px solid rgba(255,255,255,.75);box-shadow:0 12px 40px rgba(28,58,63,.14), inset 0 1px 0 rgba(255,255,255,.9)}
.card,.rev-card,.form-card,.pull-quote{position:relative;overflow:hidden}
.tier{position:relative;overflow:visible}
.card::after,.tier::after,.rev-card::after,.form-card::after,.pull-quote::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.55), rgba(255,255,255,.12) 45%, transparent 70%)}
.card:hover::after,.tier:hover::after,.rev-card:hover::after,.form-card:hover::after,.pull-quote:hover::after{opacity:1}
.btn,.add-btn,.tier-btn,.submit-btn,.chip{position:relative;overflow:hidden}
.btn::after,.add-btn::after,.tier-btn::after,.submit-btn::after,.chip::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.8), rgba(255,255,255,.2) 55%, transparent 75%)}
.btn:hover::after,.add-btn:hover::after,.tier-btn:hover::after,.submit-btn:hover::after,.chip:hover::after{opacity:1}
.card,.tier,.rev-card,.form-card,.modal,.notice{-webkit-backdrop-filter:blur(24px) saturate(1.85);backdrop-filter:blur(24px) saturate(1.85);-webkit-backdrop-filter:blur(24px) saturate(1.85);box-shadow:0 8px 32px rgba(28,58,63,.09), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(28,58,63,.06)}
.btn,.add-btn,.tier-btn,.submit-btn,.chip{transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-radius .3s, background .3s}
.btn:active,.add-btn:active,.tier-btn:active,.submit-btn:active,.chip:active{transform:scale(.94);border-radius:24px}

/* ===== /shop routes — generated by tools/build-shop.js ===== */
.subpage{max-width:1200px;margin:0 auto;padding:112px clamp(18px,6vw,72px) 40px}
.crumbs{font-size:13.5px;margin-bottom:26px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--accent-deep)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--ink-faint)}
.crumbs [aria-current]{color:var(--ink-faint)}
.pdp{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,54px);align-items:start}
@media(max-width:860px){.pdp{grid-template-columns:1fr}}
.pdp-media{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;display:flex;align-items:center;justify-content:center;min-height:300px;position:relative;overflow:hidden}
.pdp-media::before{content:"";position:absolute;inset:0;background:var(--grad-irid);background-size:300% 300%;opacity:.2;animation:tileflow 14s ease infinite}
.pdp-media img{position:relative;max-height:400px;width:auto;object-fit:contain}
.pdp-media svg{position:relative;width:96px;height:96px;stroke:var(--accent-deep);fill:none;opacity:.85}
.pdp h1{font-size:clamp(27px,3.6vw,40px);letter-spacing:-.5px;margin-top:6px}
.pdp .lede{color:var(--ink-soft);font-size:17px;margin-top:16px}
.pdp-price{font-size:32px;font-weight:700;color:var(--accent-deep);margin:22px 0 2px}
.pdp-price small{font-size:14.5px;font-weight:500;color:var(--ink-soft);margin-left:8px}
.pdp-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 6px}
/* The site's liquid-glass rule paints .btn-dark and .btn-irid identically, which
   would leave Buy and Book indistinguishable on a product page. .btn-quiet is the
   same outline treatment already used by .chip and the mobile bar, so the primary
   buy path reads first without introducing a new visual language. */
.btn-quiet{background:#fff;background-image:none;color:var(--ink-soft);border:1px solid var(--line);box-shadow:none}
.btn-quiet:hover{color:var(--accent-deep);border-color:var(--accent);box-shadow:var(--shadow)}
.pdp-meta{list-style:none;margin:24px 0 0;font-size:14.5px;color:var(--ink-soft)}
.pdp-meta li{padding:10px 0;border-bottom:1px solid var(--line)}
.pdp-meta li:last-child{border-bottom:none}
.pdp-meta b{color:var(--ink);font-weight:600}
.pdp-notice{margin-top:22px}
.shop-sub{color:var(--ink-soft);font-size:17px;margin-top:14px;max-width:720px}
.rel{margin-top:70px}
.rel h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.4px;margin-bottom:6px}
.rel p.rel-sub{color:var(--ink-soft);margin-bottom:24px}
/* On phones a full-height product shot pushed the H1, price and Buy button below
   the fold. Cap it so the buy path is visible without scrolling. */
@media(max-width:640px){.pdp-media{min-height:0;padding:14px}.pdp-media img{max-height:230px}}