/* Shared site chrome — header, footer and the tokens they need.
   Extracted from the homepage so every page uses the same header and footer.
   Loaded AFTER the homepage's inline <style>, so this file is the source of truth. */
/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --forest:#1E3A2B;
  --forest-deep:#101F16;
  --forest-soft:#2C5140;
  --gold:#D9A441;
  --gold-lt:#E8C071;
  --gold-pale:#F3DFB4;
  --cream:#F7F1E3;
  --cream-2:#FBF7EC;
  --cream-3:#FEFCF6;
  --olive:#8A9A5B;
  --olive-lt:#C8D2A8;
  --ink:#1B2718;
  --muted:#5E6C58;
  --line:rgba(30,58,43,.13);
  --r-sm:14px; --r-md:22px; --r-lg:30px; --r-xl:44px;
  --shadow-s:0 2px 10px rgba(20,38,28,.06);
  --shadow-m:0 20px 50px -24px rgba(20,38,28,.3);
  --shadow-l:0 48px 100px -44px rgba(20,38,28,.5);
  --header-h:84px;
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Height of the fixed mobile bottom bar another agent adds in assets/floating.*.
     Defined here too (defensively) so this file's mobile bottom padding can
     never drift out of sync with that stylesheet even if load order changes. */
  --bottombar-h:68px;
}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(217,164,65,.2)}
html,body{max-width:100%}
/* ---- HORIZONTAL CONTAINMENT vs. ScrollTrigger PINNING ---------------------
   `overflow-x:hidden` on html/body forces overflow-y to compute to `auto`,
   which turns those elements into scroll containers. That is precisely the
   configuration that upsets ScrollTrigger's pin (pinType:"fixed") in some
   engines. `overflow-x:clip` clips without ever creating a scroll container
   and leaves overflow-y at `visible`, so the viewport keeps scrolling
   normally and the pin is untouched — that is the rule we want everywhere.
   Where `clip` is unsupported (iOS Safari < 16) we fall back to `hidden`,
   but ONLY below 900px. The pin exists exclusively at >=900px, so the
   fallback can never be in force inside the pinned range. */
@media (max-width:899.98px){html,body{overflow-x:hidden}}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(15px,.5vw + 13.6px,16.5px);line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
html.lenis,html.lenis body{height:auto}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
@keyframes plFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
body.cur-on .cur-dot,body.cur-on .cur-ring{opacity:1}
body.cur-invert .cur-dot{background:var(--gold)}
body.cur-invert .cur-ring{border-color:rgba(232,192,113,.55)}
/* NB: the rest of the coarse-pointer overrides live at the very END of this
   stylesheet — they have to out-order `will-change:transform` and
   `.socials a{transition:...}
/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap{width:min(100% - 2.8rem,var(--maxw));margin-inline:auto;position:relative;z-index:2}
.kicker{
  font-size:.66rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--olive);
  display:inline-flex;align-items:center;gap:.75rem;
}
.kicker::before{content:"";width:32px;height:1px;background:currentColor;opacity:.6}
.kicker--gold{color:var(--gold)}
.kicker--light{color:var(--gold-lt)}
/* display type scale — big contrast against the small body copy */
.d1{font-size:clamp(3.1rem,8.2vw,7rem);line-height:.94}
.d3{font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.06}
/* ============================================================
   BUTTONS  (Motion owns press/hover)
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:1.02rem 1.9rem;border-radius:999px;
  font-weight:700;font-size:.9rem;letter-spacing:.01em;will-change:transform;position:relative}
.btn-gold{background:linear-gradient(135deg,var(--gold-lt),var(--gold));color:#3A2A08;box-shadow:0 14px 34px -14px rgba(217,164,65,.9)}
.btn-ghost{border:1.5px solid rgba(30,58,43,.26);color:var(--forest)}
.btn-ghost:hover{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.btn-light{background:var(--cream);color:var(--forest)}
/* ============================================================
   HEADER
   ============================================================ */
/* Solid at rest, not just once .scrolled lands: the header was fully
   transparent over the hero (and briefly on first paint before the scroll
   listener ever fires), leaving the forest-green nav text and the
   multiply-blended logo with no light backdrop to read against. This whole
   file loads after index.php's inline <style>, so at equal specificity it
   wins on the homepage too — see chrome.css's file-level comment. */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);display:flex;align-items:center;
  background:rgba(247,241,227,.92);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  transition:background .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;border-bottom:1px solid var(--line)}
.hdr.scrolled{background:rgba(247,241,227,.96);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 10px 34px -26px rgba(20,38,28,.55)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.logo{display:flex;align-items:center;flex-shrink:0}
.brand-logo{display:block;width:138px;height:auto;mix-blend-mode:multiply}
.nav{display:flex;align-items:center;gap:.2rem}
.nav a{position:relative;padding:.55rem .85rem;font-size:.85rem;font-weight:600;color:var(--forest)}
.nav a::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.35rem;height:1.5px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.hdr-cta{display:flex;align-items:center;gap:.7rem}
.lang-btn{border:1px solid rgba(247,241,227,.35);background:transparent;color:inherit;border-radius:999px;padding:.35rem .7rem;font:inherit;font-size:.72rem;font-weight:800;letter-spacing:.05em;cursor:pointer;line-height:1}
.lang-btn:hover{background:rgba(247,241,227,.14)}
.ftr a[href^="mailto:"],.ftr a[href^="tel:"],.ftr a[href*="wa.me"]{text-decoration:none;border-bottom:1px solid rgba(247,241,227,.3)}
.hdr-cta .btn{padding:.75rem 1.4rem;font-size:.83rem}
.burger{display:none;width:46px;height:46px;border-radius:13px;border:1.5px solid var(--line);flex-direction:column;gap:5px}
.burger span{display:block;width:19px;height:2px;background:var(--forest);border-radius:2px;transition:transform .35s var(--ease),opacity .25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{position:fixed;inset:var(--header-h) 0 auto 0;z-index:99;background:rgba(247,241,227,.97);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);
  padding:1.1rem 0 1.7rem;transform:translateY(-115%);transition:transform .5s var(--ease);box-shadow:var(--shadow-m);display:none;
  /* phone landscape: the panel is taller than the viewport, so let it scroll */
  max-height:calc(100svh - var(--header-h));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mobile-nav.open{transform:translateY(0)}
.mobile-nav a{display:block;padding:.9rem .2rem;font-size:1.05rem;font-weight:600;border-bottom:1px solid var(--line)}
/* `.mobile-nav a` (0,1,1) outranks `.btn` (0,1,0), which was stripping the CTA
   back to a left-aligned block with a stray hairline. Restate it at (0,2,0). */
.mobile-nav a.btn{display:flex;justify-content:center;text-align:center;
  padding:1.02rem 1.9rem;border-bottom:0;margin-top:1.3rem;width:100%}
/* ============================================================
   THE SINGLE JAR
   The product photo is 241x321 native and is NEVER scaled past ~1.2x.
   Its background is a flat #FAFAFA, so the image multiplies against an
   opaque cream disc inside an isolated stacking context: the white box
   disappears into the disc, and because the disc is opaque the jar still
   reads correctly over the dark Procedure section.
   ============================================================ */
.product-layer{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}
@keyframes spinOrbit{to{transform:rotate(360deg)}}
/* ---- INLINE (MOBILE) JAR -------------------------------------------------
   Every dimension below derives from one token, --jar-d, so the frame, the
   photo, the orbit and the surrounding whitespace can never drift apart.

   The .6847 / .912 pair is exactly 241/352 and 321/352, i.e. the photo keeps
   the same proportion inside the frame that it has on desktop (352px frame,
   241x321 photo at native size), at any --jar-d.

   DPR: the source is 241x321, so rendered width = jar-d * .6847:
       jar-d 292 (ceiling)      -> 200 CSS px = 0.83x native
       jar-d 257 (390px phone)  -> 176 CSS px = 0.73x native
       jar-d 238 (360px phone)  -> 163 CSS px = 0.68x native
   It is therefore never displayed above native, and the smaller it is the
   less the device has to invent: the physical upscale on a 3x screen drops
   from 3.0x (were it shown at native 241 CSS px) to 2.0x-2.5x. That is the
   only lever available without a larger asset — the file is not upscaled.
   HARD CEILING: --jar-d 352px puts the photo at exactly 241 = native. Past
   that it is a true upscale and goes visibly soft. Do not raise it.
   Before this, the 421-899px range used a fixed 320px frame -> a 308px disc
   holding a 321px-tall photo, so the jar was silently clipped top and bottom.
   image-rendering stays `auto` on purpose — a photograph must be smoothly
   resampled; crisp-edges/pixelated would make a soft image worse, not better.
   66vw keeps it clear of the headline and buttons on a 360px phone. */
.product-layer.is-inline{
  --jar-d:min(292px,66vw);
  --orbit-d:min(calc(var(--jar-d) * 1.33),92vw);
  --orbit-bleed:calc((var(--orbit-d) - var(--jar-d)) / 2);
  position:relative;inset:auto;height:auto;display:flex;justify-content:center;overflow:visible;
  /* room for the orbit ring's bleed, so it never crosses the hero facts rule */
  padding:calc(var(--orbit-bleed) + 8px) 0 calc(var(--orbit-bleed) + 16px);
}
/* Everything inside the SVG scales with the viewBox, so at ~342px rendered the
   1px ring became a 0.73px hairline and the label ~10.9px. Restore optical
   weight. 16px/.3em lays 72 glyphs into ~1060 of the path's 1168 units, so the
   repeat still closes; do not go past ~17px or the tail gets clipped. */
.product-layer.is-inline .orbit text{font-size:16px;letter-spacing:.3em}
.hero-photo img{width:100%;height:100%;object-fit:cover;opacity:.26;filter:saturate(.8)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),opacity .4s}
.media img.img-failed{opacity:0}
/* ============================================================
   PROCEDURE — dark horizontal gallery with a progress rail
   ============================================================ */
.procedure{background:var(--forest-deep);color:var(--cream);display:block;padding:0;overflow:hidden}
.pstep-thumb img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.pstep-thumb img.img-failed{opacity:0}
@keyframes chatLoop{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.bub--image img{width:100%;height:112px;object-fit:contain;border-radius:12px;background:linear-gradient(145deg,#FAF4DF,#F0D994)}
.review-photo img{display:block;width:100%;height:100%;min-height:240px;object-fit:cover;transition:transform .45s var(--ease)}
.review-photo:hover img{transform:scale(1.04)}
@keyframes reviewMarquee{to{transform:translateX(-50%)}}
.cert-badge img{display:block;max-width:100%;max-height:100%;object-fit:contain}
/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--forest-deep);color:rgba(247,241,227,.7);position:relative;overflow:hidden}
.ftr-photo{position:absolute;inset:0;z-index:0}
.ftr-photo img{width:100%;height:100%;object-fit:cover;opacity:.13}
.ftr-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,31,22,.92),rgba(16,31,22,.985))}
.ftr-cta-band{padding:clamp(56px,7vw,88px) 0;border-bottom:1px solid rgba(247,241,227,.1);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.ftr-cta-band h3{color:var(--cream);max-width:18ch}
.ftr-top{padding:clamp(48px,6vw,76px) 0 clamp(40px,5vw,58px);display:grid;grid-template-columns:1.3fr .8fr .95fr;gap:clamp(2rem,4vw,3.4rem)}
.ftr .brand-logo{width:172px;filter:grayscale(1) brightness(0) invert(1);mix-blend-mode:screen}
.ftr-tag{font-family:"Fraunces",serif;font-size:1.55rem;color:var(--cream);margin-top:1.35rem;font-style:italic;line-height:1.26;max-width:15ch}
.ftr h4{font-size:.68rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:1.15rem;font-family:"Manrope"}
.ftr li{margin-bottom:.65rem}
.ftr li a,.ftr-c li{font-size:.88rem;transition:color .3s}
.ftr li a:hover{color:var(--gold-lt)}
.ftr-c li{display:flex;gap:.65rem;align-items:flex-start;line-height:1.5}
.ftr-c svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;color:var(--gold)}
.socials a{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;border:1px solid rgba(247,241,227,.15);
  transition:background .35s,border-color .35s,color .35s;will-change:transform}
.socials a:hover{background:var(--gold);color:#3A2A08;border-color:var(--gold)}
/* Only the copyright line lives here now (the old .ftr-legal link strip
   moved into the Explore column), so centre it instead of space-between. */
.ftr-bot{border-top:1px solid rgba(247,241,227,.1);padding:1.6rem 0;display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;font-size:.78rem;text-align:center}
.ftr-bot a:hover{color:var(--gold-lt)}
/* ============================================================
   FOOTER ACCORDION — <details>/<summary> gives the mobile
   collapse/expand natively, no JS: closed by default (mobile),
   forced open with the toggle affordance hidden on desktop below.
   ============================================================ */
.ftr-acc-sum{display:flex;align-items:center;justify-content:space-between;gap:.75rem;cursor:pointer;list-style:none}
/* Chrome/Firefox already drop the native marker once summary is a flex box;
   Safari keeps drawing its own triangle regardless, hence this. */
.ftr-acc-sum::-webkit-details-marker{display:none}
.ftr-acc-sum h4{margin-bottom:0}/* the 1.15rem gap moves to .ftr-acc-body so the summary row itself stays tight */
.ftr-acc-body{margin-top:1.15rem}
.ftr-acc-chevron{width:9px;height:9px;flex-shrink:0;border-right:1.5px solid var(--gold-lt);border-bottom:1.5px solid var(--gold-lt);
  transform:rotate(45deg);transition:transform .35s var(--ease)}/* down-chevron at rest */
.ftr-acc[open] .ftr-acc-chevron{transform:rotate(-135deg)}/* up-chevron once opened */
@media (max-width:760px){
  /* Single column and the accordion behaviour must land together, or a
     tablet-width screen gets four cramped columns each holding a collapsed
     header. This duplicates the 620px block's grid-template-columns:1fr on
     narrower phones, which is harmless — both say the same thing. */
  .ftr-top{grid-template-columns:1fr}
  /* The other agent's fixed bottom bar (~68px) would otherwise sit over the
     last footer row on mobile. */
  .ftr{padding-bottom:calc(var(--bottombar-h) + env(safe-area-inset-bottom))}
}
@media (min-width:761px){
  /* Desktop: plain always-open columns, no accordion affordance. Any normal
     author rule beats the UA stylesheet's "hide a closed <details>'s
     children" behaviour regardless of specificity (author origin always
     outranks user-agent origin in the cascade), so this plain selector is
     enough — no !important needed. */
  .ftr-acc-sum{cursor:default;pointer-events:none}
  .ftr-acc-chevron{display:none}
  .ftr-acc-body{display:block}
}
@media (max-width:1080px){.nav{display:none}.hdr-cta .btn{display:none}.burger{display:flex;align-items:center;justify-content:center}.mobile-nav{display:block}}
@media (max-width:620px){.wrap{width:min(100% - 2rem,var(--maxw))}/* Display type: every clamp below is tuned to land on EXACTLY the same px
     value as the base scale at 620px, so nothing jumps at the breakpoint.
     The old floors were fixed rem minimums, so on a 360px phone .d1 stayed at
     49.6px and "transparency." measured ~322px inside a 328px column — it was
     one glyph away from being clipped by SplitText's line mask. */
  .d1{font-size:clamp(2.45rem,10vw,3.18rem)}/* 620:38.4  414:33.1  390:31.2 360:28.8 */
  .d3{font-size:clamp(1.45rem,5.6vw,1.7rem)}.kicker{font-size:.7rem;letter-spacing:.2em}/* .28em tracking ran the longest
                                                   kicker to 319px in a 328px column */
  .kicker::before{width:22px}/* stats stay two-up: the numbers are short, and one 358px-wide card per row
     for a 33px numeral read as an empty box. auto-fit drops to one column
     below ~310px on its own. */
  .stats{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:.8rem}/* 620:38.4 — "1000+" = 97px in a 122px column */
  .stat-l{font-size:.72rem;letter-spacing:.12em}.ftr-top{grid-template-columns:1fr}.ftr-c{grid-column:span 1}.ftr-cta-band .btn{width:100%}.hero-actions .btn{flex:1 1 100%}.ftr-bot{flex-direction:column;gap:.5rem}}
/* ============================================================
   TOUCH POINTERS
   Placed last on purpose: these must out-order the `will-change:transform`
   and `.socials a{transition:...}
/* Once JS runs it is authoritative, because ?motion=full must be able to
   restore full motion on a machine whose OS reports "reduce" (and ?motion=reduce
   must be able to still everything on a machine that reports "no-preference").
   These class rules outrank the media query above on specificity. */
html.rm-off .orbit{animation:spinOrbit 34s linear infinite}
html.rm-on  .orbit{animation:none}
html.rm-on *,html.rm-on *::before,html.rm-on *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;scroll-behavior:auto !important;
}
@keyframes jarShake{
  0%,100%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(-4px,1px) rotate(-1deg)}
  40%{transform:translate(4px,-1px) rotate(1deg)}
  60%{transform:translate(-3px,1px) rotate(-.7deg)}
  80%{transform:translate(3px,0) rotate(.7deg)}
}
html.rm-on .jar__view{animation:none!important}
html.rm-on .jar__view--front{opacity:1}
html.rm-on .jar__view--side,html.rm-on .jar__view--back{opacity:0}
html.rm-on .chat-scroll{animation:none!important}
@media (max-width:700px){.booking-actions .btn{flex:1}}

/* Google Translate: hide its injected banner and stop it shifting the page. */
.goog-te-banner-frame,iframe.skiptranslate{display:none!important}
body{top:0!important}
#gt_host{display:none}
.goog-tooltip,.goog-tooltip:hover{display:none!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}