/* =========================================================================
MOTHER'S BLESSING: base.css
Shared mechanics that make the page move. Load BEFORE style.css:
Colours, fonts and section designs live in style.css (it overrides the
tokens below). Do not delete rules here; add new ones in style.css.
========================================================================= */
html,body{margin:0}
img{max-width:100%}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
[hidden]{display:none!important}
:root{
color-scheme: light;
--c-bg:#FAFAF7; --c-ink:#111111; --c-accent:#007830; --c-on-accent:#FFFFFF; --c-accent-ink:#005A24;
--c-line:#DCE3DD; --c-card:#FFFFFF; --c-soft:#EEF6F0; --c-muted:#55625A; --c-red:#E80010;
--body:"DM Sans","Segoe UI",system-ui,sans-serif;
--ease:cubic-bezier(.34,1.3,.64,1); --ease2:cubic-bezier(.16,1,.3,1);
--maxw:1260px; --gut:20px; --secpad:96px;
}
/* ---- layout helpers ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:var(--secpad);position:relative;scroll-margin-top:70px}
.sh{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap;margin-bottom:48px}
.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.two-col > *{min-width:0}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:860px){ .two-col{grid-template-columns:1fr;gap:36px} .sec{padding-block:64px} }
/* ---- progress bar + custom cursor ---- */
#progress{position:fixed;left:0;right:0;top:0;height:3px;background:var(--c-accent);transform-origin:left;transform:scaleX(0);z-index:200}
#cursor{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--c-accent);pointer-events:none;z-index:300;opacity:0;mix-blend-mode:difference;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),opacity .3s}
#cursor.big{width:54px;height:54px;margin:-27px 0 0 -27px}
@media (pointer:coarse){#cursor{display:none}}
/* ---- nav mechanics (style.css styles the look) ---- */
.nav{position:sticky;top:0;z-index:100;transition:box-shadow .3s,background .3s,padding .3s}
.nav-in{display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;color:inherit}
.links{display:flex;align-items:center;gap:18px;margin-left:auto;white-space:nowrap;font-size:14px;font-weight:600}
.links > a{text-decoration:none;color:inherit}
.nav-cta{flex:none;white-space:nowrap}
.menu-btn{display:none;cursor:pointer}
@media (max-width:1220px){
.nav .links,.nav .nav-cta{display:none}
.menu-btn{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.nav.open .nav-in{flex-wrap:wrap}
.nav.open .links{display:flex;flex-direction:column;align-items:flex-start;order:3;width:100%;margin:0;padding:14px 4px 6px;gap:14px;font-size:17px;max-height:70vh;overflow:auto}
.nav.open .nav-cta{display:inline-flex;order:4;margin:6px 0 10px}
.nav.open .dd-menu{position:static;translate:none;box-shadow:none;margin-top:8px;min-width:0;display:none}
.nav.open .dd.open .dd-menu{display:block}
}
/* ---- dropdown (Follow Us) ---- */
.dd{position:relative}
.dd-btn{background:none;border:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:0}
.dd-btn .chev{transition:transform .35s var(--ease);display:inline-block}
.dd-menu{position:absolute;top:calc(100% + 18px);left:50%;min-width:260px;translate:-50% 0;background:var(--c-card);color:var(--c-ink);border:1px solid var(--c-line);border-radius:18px;padding:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:top center;transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .35s;z-index:60}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.dd-menu a{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;text-decoration:none;transition:background .25s,transform .3s var(--ease);opacity:0;transform:translateY(6px)}
.dd-menu a:hover{background:var(--c-soft)}
.dd-menu a b{display:block;font-size:15px;line-height:1.2}
.dd-menu a small{display:block;font-size:12.5px;color:var(--c-muted);line-height:1.3;font-weight:500}
.dd-menu .di{width:40px;height:40px;border-radius:11px;background:var(--c-soft);display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--c-accent-ink)}
.dd-menu .di svg{width:18px;height:18px;fill:currentColor}
@media (hover:hover){ .dd:hover .dd-menu{opacity:1;visibility:visible;transform:none} .dd:hover .dd-menu a{opacity:1;transform:none} .dd:hover .chev{transform:rotate(180deg)} }
.dd.open .dd-menu{opacity:1;visibility:visible;transform:none}
.dd.open .dd-menu a{opacity:1;transform:none}
.dd.open .chev{transform:rotate(180deg)}
.dd-menu a:nth-child(1){transition-delay:.04s}.dd-menu a:nth-child(2){transition-delay:.08s}.dd-menu a:nth-child(3){transition-delay:.12s}.dd-menu a:nth-child(4){transition-delay:.16s}.dd-menu a:nth-child(5){transition-delay:.2s}
/* ---- social icons ---- */
.soc{display:flex;gap:8px;align-items:center}
.soc a,.soc button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--c-line);background:transparent;color:inherit;cursor:pointer;transition:background .3s,color .3s,transform .4s var(--ease),border-color .3s;padding:0}
.soc a:hover,.soc button:hover{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent);transform:translateY(-3px) rotate(-6deg)}
.soc svg{width:16px;height:16px;fill:currentColor}
/* ---- whatsapp slide-over + floating button ---- */
#waScrim{position:fixed;inset:0;background:rgba(10,8,4,.45);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;z-index:240}
#waScrim.open{opacity:1;visibility:visible}
#waPanel{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:#fff;color:#16130D;z-index:250;transform:translateX(105%);transition:transform .6s var(--ease);display:flex;flex-direction:column;box-shadow:-30px 0 60px -30px rgba(0,0,0,.5);font-family:var(--body)}
#waPanel.open{transform:none}
.wa-head{background:#0B5D4B;color:#fff;padding:calc(22px + env(safe-area-inset-top,0px)) 22px 20px;display:flex;gap:14px;align-items:center}
.wa-head .wa-logo{width:46px;height:46px;border-radius:50%;background:#25D366;display:grid;place-items:center;flex:none}
.wa-head .wa-logo svg{width:26px;height:26px;fill:#fff}
.wa-head b{display:block;font-size:17px}
.wa-head small{opacity:.8;font-size:13px}
.wa-close{margin-left:auto;background:rgba(255,255,255,.15);border:0;color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:18px}
.wa-tabs{display:flex;gap:6px;padding:14px 18px 0}
.wa-tabs button{flex:1;border:0;background:#EEF4F1;color:#0B5D4B;padding:11px;border-radius:999px;font:700 14px var(--body);cursor:pointer;transition:background .3s,color .3s}
.wa-tabs button[aria-selected="true"]{background:#0B5D4B;color:#fff}
.wa-body{padding:18px;overflow:auto;flex:1;background:#EFE9DF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='1.2' fill='%23d8cfbf'/%3E%3C/svg%3E")}
.wa-view{display:grid;gap:12px;animation:waIn .5s var(--ease) both}
@keyframes waIn{from{opacity:0;transform:translateX(20px)}}
.bubble{background:#fff;border-radius:4px 16px 16px 16px;padding:12px 14px;font-size:14.5px;line-height:1.5;max-width:92%;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.bubble.me{background:#D9FDD3;border-radius:16px 4px 16px 16px;justify-self:end}
.bubble small{display:block;color:#667;font-size:11px;margin-top:4px;text-align:right}
.comm-card{background:#fff;border-radius:16px;padding:16px;display:grid;gap:10px}
.comm-card b{font-size:16px}
.comm-card ul{margin:0;padding-left:18px;font-size:14px;color:#445;display:grid;gap:4px}
.wa-chips{display:flex;flex-wrap:wrap;gap:8px}
.wa-chip{border:1px solid #BFD8CF;background:#fff;color:#0B5D4B;border-radius:999px;padding:8px 12px;font:600 13px var(--body);cursor:pointer;transition:background .25s,color .25s}
.wa-chip.on,.wa-chip:hover{background:#0B5D4B;color:#fff}
#waText{width:100%;border:1px solid #D5DDD9;border-radius:14px;padding:12px;font:500 14.5px var(--body);resize:vertical;min-height:84px;background:#fff;color:#16130D}
.wa-go{display:flex;justify-content:center;align-items:center;gap:8px;background:#25D366;color:#073B2F;text-decoration:none;font-weight:800;padding:14px;border-radius:999px;transition:transform .3s var(--ease),box-shadow .3s}
.wa-go:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px #25D366}
.wa-note{font-size:12px;color:#667;text-align:center}
.wa-float{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;background:#25D366;border:0;display:grid;place-items:center;cursor:pointer;z-index:120;box-shadow:0 14px 30px -10px rgba(37,211,102,.8);animation:waPulse 2.8s ease-in-out infinite}
.wa-float svg{width:30px;height:30px;fill:#fff}
@keyframes waPulse{0%,100%{box-shadow:0 14px 30px -10px rgba(37,211,102,.8),0 0 0 0 rgba(37,211,102,.45)}50%{box-shadow:0 14px 30px -10px rgba(37,211,102,.8),0 0 0 14px rgba(37,211,102,0)}}
/* ---- toast ---- */
#toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translate(-50%,24px);background:var(--c-ink);color:#fff;padding:12px 20px;border-radius:999px;font:600 14px var(--body);opacity:0;pointer-events:none;transition:opacity .35s,transform .45s var(--ease);z-index:400;max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
/* ---- split text ([data-split="words"|"chars"]) ---- */
.split .sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .sc{display:inline-block;transform:translateY(0);transition:transform 1s var(--ease),opacity 1s var(--ease);transition-delay:calc(var(--i) * var(--stag,45ms))}
.split.pre .sc{transform:translateY(110%);opacity:0}
.split.first .sc{animation:scUp 1s var(--ease) both;animation-delay:calc(.15s + var(--i) * var(--stag,45ms))}
@keyframes scUp{from{transform:translateY(110%);opacity:0}}
/* ---- reveals ([data-a="up|fade|scale|left|right|blur|clip"], optional style="--d:.2s") ---- */
[data-a]{transition:opacity 1s var(--ease),transform 1s var(--ease),clip-path 1.2s var(--ease),filter 1s var(--ease);transition-delay:var(--d,0s)}
[data-a="up"].pre{opacity:0;transform:translateY(50px)}
[data-a="fade"].pre{opacity:0}
[data-a="scale"].pre{opacity:0;transform:scale(.92)}
[data-a="left"].pre{opacity:0;transform:translateX(-60px)}
[data-a="right"].pre{opacity:0;transform:translateX(60px)}
[data-a="blur"].pre{opacity:0;filter:blur(12px);transform:translateY(20px)}
[data-a="clip"].pre{clip-path:inset(100% 0 0 0)}
[data-a="clip"]{clip-path:inset(0 0 0 0)}
.first[data-a]{animation:aIn 1.1s var(--ease) both;animation-delay:calc(.2s + var(--d,0s))}
@keyframes aIn{from{opacity:0;transform:translateY(30px)}}
/* ---- forms ---- */
.err{border-color:#C2410C !important;box-shadow:0 0 0 4px rgba(194,65,12,.15) !important}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
#bookForm .ok{display:none}
#bookForm.done > :not(.ok){display:none}
#bookForm.done .ok{display:block;text-align:center;padding:28px 8px;animation:aIn .7s var(--ease) both}
.ok svg{width:74px;height:74px}
.ok path{fill:none;stroke:var(--c-accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:60;stroke-dashoffset:60}
#bookForm.done .ok path{animation:okDraw .7s .2s var(--ease) forwards}
@keyframes okDraw{to{stroke-dashoffset:0}}
.ok b{display:block;font-size:22px;margin-top:10px}
.ok span{font-size:14.5px;opacity:.75}
/* ---- "Sample" / "Add" placeholder chip ---- */
.sample{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:#FFF1CF;color:#7A5000;border-radius:6px;padding:3px 8px;vertical-align:middle;font-family:var(--body)}
/* ---- carousel (.car > .car-track > .car-card*, .car-ctl with .car-dots .car-arrows .car-count) ---- */
.car{position:relative}
.car-track{display:flex;gap:var(--cgap,22px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:8px 2px 18px;position:relative;cursor:grab;overscroll-behavior-x:contain;outline:none}
.car-track::-webkit-scrollbar{display:none}
.car-track.drag{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
.car-card{flex:0 0 var(--cw,min(420px,86%));scroll-snap-align:start;transition:transform .7s var(--ease),opacity .7s var(--ease),filter .7s}
.car.focus .car-card:not(.is-on){opacity:.5;transform:scale(.96)}
.car-ctl{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;flex-wrap:wrap}
.car-dots{display:flex;gap:8px;align-items:center}
.car-dots button{width:10px;height:10px;border-radius:99px;border:0;padding:0;cursor:pointer;background:var(--c-line);transition:width .5s var(--ease),background .3s}
.car-dots button[aria-current="true"]{width:34px;background:var(--c-accent)}
.car-arrows{display:flex;gap:10px}
.car-arrows button{width:52px;height:52px;border-radius:50%;cursor:pointer;font-size:18px;display:grid;place-items:center;border:1px solid var(--c-line);background:var(--c-card);color:var(--c-ink);transition:transform .4s var(--ease),background .3s,color .3s,border-color .3s}
.car-arrows button:hover{transform:scale(1.07);background:var(--c-accent);color:var(--c-on-accent);border-color:var(--c-accent)}
.car-count{font-variant-numeric:tabular-nums;font-weight:700;opacity:.7}
.swipe-hint{display:inline-flex;align-items:center;gap:8px;font-size:13px;opacity:.65}
.swipe-hint i{display:inline-block;width:26px;height:2px;background:currentColor;position:relative;animation:hint 1.8s var(--ease) infinite}
@keyframes hint{0%{transform:translateX(-6px);opacity:0}40%{opacity:1}100%{transform:translateX(10px);opacity:0}}
/* ---- reviews ---- */
.rev-card{box-sizing:border-box;margin:0;display:flex;flex-direction:column;gap:16px;--cw:100%}
.rev-card blockquote{margin:0}
.rev-card figcaption{display:flex;gap:12px;align-items:center;margin-top:auto}
.rev-card figcaption b{display:block}
.rev-card figcaption small{display:block;opacity:.7}
.rev-source{margin-left:auto;font-size:12px;color:var(--c-accent-ink);white-space:nowrap}
.rev-stars{color:#F2B01E;letter-spacing:2px}
.rev-av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;flex:none;background:var(--c-soft);color:var(--c-accent-ink)}
#revTrack.swap .rev-card{animation:aIn .7s var(--ease) both}
#revForm{display:grid;gap:14px}
#revForm label{display:grid;gap:6px;font-size:13px;font-weight:700}
#revForm input[type=text],#revForm select,#revForm textarea{width:100%;font:500 15.5px var(--body);padding:12px 14px;border-radius:12px;border:1px solid var(--c-line)}
.stars{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.stars input{position:absolute;opacity:0;width:1px;height:1px}
.stars label,#revForm .stars label{display:inline-block;font-size:34px;line-height:1;cursor:pointer;color:var(--c-line);transition:color .2s,transform .3s var(--ease)}
.stars label:hover,.stars label:hover ~ label,.stars input:checked ~ label{color:#F2B01E}
.stars label:hover{transform:scale(1.18)}
.stars input:focus-visible + label{outline:2px solid var(--c-accent);border-radius:4px}
.rev-go{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:800;padding:15px;border-radius:999px;background:#fff;color:#1F1F1F;box-shadow:inset 0 0 0 1.5px #DADCE0;transition:box-shadow .3s,transform .4s var(--ease)}
.rev-go:hover{box-shadow:inset 0 0 0 1.5px #4285F4,0 10px 20px -12px rgba(66,133,244,.8);transform:translateY(-2px)}
.rev-go svg{width:20px;height:20px}
.fine{font-size:12.5px;opacity:.7;line-height:1.5}
/* ---- marquee ticker: ---- */
.mq{overflow:hidden;white-space:nowrap}
.mq-track{display:inline-flex;gap:40px;padding-right:40px;animation:mq 38s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
/* ---- before/after drag reveal ----
With no images, .ba shows the empty labelled box (use .ba-ph placeholders). */
.ba{position:relative;overflow:hidden;aspect-ratio:4/5;--pos:50%;touch-action:pan-y;cursor:ew-resize;user-select:none;background:var(--c-soft)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .ba-after{clip-path:inset(0 0 0 var(--pos))}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.ba-handle::after{content:"↔";position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;color:var(--c-ink);display:grid;place-items:center;font-size:16px;box-shadow:0 6px 16px -4px rgba(0,0,0,.35)}
.ba-ph{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;pointer-events:none}
.ba-ph span{display:grid;place-items:center;font:700 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent-ink);opacity:.8}
.ba-ph span + span{border-left:2px dashed var(--c-line)}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}