/* ============================================================================
   NALA MED SPA — Elementor widgets stylesheet
   Everything the widgets render is scoped under `.nala-w`, so nothing leaks
   into the theme and nothing the theme does leaks in.
   Order matters:  tokens → globals → theme armour → components → Elementor
   fixes → editor → mobile.  Do not reorder.
   ========================================================================= */

/* ==========================================================================
   1. TOKENS — the single source of truth for every colour, size and easing.
   Change a value here and it changes everywhere. Never hard-code a colour in
   the JS: a stray hex there is why a palette change used to "come back".
   ========================================================================== */
:root{
  --bronze:#ac7944;
  --bronze-deep:#8c5f33;
  --bronze-soft:#c69c6d;
  --bronze-pale:#e3cdae;
  --gold-line:#d9b98c;

  --paper:#fbf7f2;
  --paper-2:#f6efe6;
  --sand:#efe4d6;
  --shell:#ffffff;

  --deep:#2b2018;
  --deep-2:#3a2a1e;

  --ink:#2a2019;
  --ink-2:#5a4a3c;
  --ink-3:#8b7867;
  --on-deep:#f7ede0;
  --on-deep-2:#cdb79e;

  --cream-btn:#f7e9cf;
  --sage:#8a9478;
  --sage-deep:#6f7a5e;
  --star:#e6a833;

  --font-display:'Playfair Display','Times New Roman',Georgia,serif;
  --font-body:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --fs-hero:clamp(2.6rem,6.4vw,6.2rem);
  --fs-h2:clamp(2.05rem,4.2vw,3.9rem);
  --fs-h3:clamp(1.35rem,2.1vw,1.9rem);
  --fs-lead:clamp(1rem,1.25vw,1.18rem);
  --fs-body:clamp(.95rem,1.05vw,1.03rem);
  --fs-eyebrow:.72rem;

  --lh-tight:1.06;
  --lh-body:1.78;
  --ls-eyebrow:.32em;

  --gutter:clamp(1.25rem,5vw,5.5rem);
  --chapter:clamp(5.5rem,11vh,10rem);
  --maxw:1320px;
  --maxw-narrow:980px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --r-sm:4px;--r-md:10px;--r-lg:18px;--r-pill:999px;
  --shadow-card:0 1px 2px rgba(42,32,25,.04),0 18px 44px -22px rgba(42,32,25,.28);
  --shadow-lift:0 2px 6px rgba(42,32,25,.06),0 40px 80px -34px rgba(42,32,25,.40);

  --z-grain:90;--z-header:100;--z-menu:120;--z-cursor:200;--z-loader:300;
}

/* ==========================================================================
   2. GLOBALS — the few rules that genuinely must sit outside `.nala-w`.
   ========================================================================== */

/* overflow-x:CLIP, never HIDDEN. `hidden` combined with the height:100% that
   many themes set turns <body> itself into the scroll container: the wheel
   moves body.scrollTop while window.pageYOffset stays 0, and every
   scroll-driven effect on the page dies silently. `clip` blocks sideways
   overflow without creating a scroll container. */
/* The theme loads after us and sets `body{overflow-x:hidden}`. Combined with
   the `height:100%` themes also set, that turns <body> itself into the scroll
   container: the wheel moves body.scrollTop while window.pageYOffset stays at
   0, every scroll-driven effect dies, and the layout width shrinks by the
   scrollbar. `clip` blocks sideways overflow without creating a scroll
   container, so we take it back — but only on pages that actually contain a
   NALA widget, never site-wide. */
html{overflow-x:clip}
body{overflow-x:clip;height:auto}
body.nala-page,
body:has(.nala-w){overflow-x:clip!important;height:auto!important}
html:has(body.nala-page),
html:has(.nala-w){overflow-x:clip!important;height:auto!important}
body.nala-menu-open{overflow:hidden}

html.lenis,html.lenis body{height:auto}
html.lenis-smooth{scroll-behavior:auto!important}
html.lenis-stopped{overflow:hidden}

.nala-w *,.nala-w *::before,.nala-w *::after{box-sizing:border-box}
.nala-w ::selection{background:var(--bronze);color:#fff}

/* ==========================================================================
   3. THEME ARMOUR
   Hello Elementor's reset.css forces colour #cc3366 (pink) and a matching
   border on every a / button / [type=submit], with !important, and it loads
   AFTER this file. Past projects fixed the base state, shipped, and then had
   the pink reappear through :hover, :focus and :active — so every state is
   neutralised here in one go, including the mobile tap highlight.
   Absolutely no pink anywhere, in any state, on any element.
   ========================================================================== */
.nala-w a,
.nala-w a:link,.nala-w a:visited,.nala-w a:hover,
.nala-w a:focus,.nala-w a:active{
  color:inherit;
  text-decoration:none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
/* Two separate jobs, deliberately kept apart:

   1. COLOUR is forced with !important, because the theme uses !important and
      loads last. This is the only way the pink never comes back.
   2. GEOMETRY is reset WITHOUT !important, at element-level specificity. Our
      own class rules (.btn, .chip, .burger …) outrank it naturally, and so do
      Elementor's Style-tab controls — so the client can still set padding,
      width and radius from the panel. Forcing geometry here is what silently
      squashed the burger and stole 36px from every accordion question. */
.nala-w button,
.nala-w [type="button"],.nala-w [type="submit"],.nala-w [type="reset"],
.nala-w button:hover,.nala-w button:focus,.nala-w button:active,.nala-w button:visited,
.nala-w [type="submit"]:hover,.nala-w [type="submit"]:focus,.nala-w [type="submit"]:active,
.nala-w [type="button"]:hover,.nala-w [type="button"]:focus{
  color:inherit!important;
  background-color:transparent!important;
  background-image:none!important;
  border-color:currentColor!important;
  border-style:none!important;
  border-width:0!important;
  outline-color:transparent!important;
  box-shadow:none!important;
  text-decoration:none!important;
  -webkit-tap-highlight-color:rgba(0,0,0,0)!important;
}
.nala-w button,
.nala-w [type="button"],.nala-w [type="submit"],.nala-w [type="reset"]{
  -webkit-appearance:none;
  appearance:none;
  padding:0;
  width:auto;
  min-width:0;
  border-radius:0;
  font:inherit;
  cursor:pointer;
  text-align:inherit;
}
/* Focus stays visible for keyboard users — bronze, never pink. */
.nala-w a:focus-visible,.nala-w button:focus-visible,
.nala-w input:focus-visible,.nala-w textarea:focus-visible{
  outline:2px solid var(--bronze)!important;
  outline-offset:3px;
}
/* Some themes tint svg fills through the link colour. */
.nala-w a svg,.nala-w button svg{color:inherit}

/* --------------------------------------------------------------------------
   3b. RE-ASSERT our own components after the armour.
   The armour above strips every button property with !important. These rules
   put ours back — and win, because a class selector (0,2,0) outranks the
   armour's element selector (0,1,1) even when both are !important.
   Elementor's own Style-tab colours outrank both, so per-instance editing
   still works exactly as expected.
   -------------------------------------------------------------------------- */
.nala-w .btn{
  background-color:var(--btn-bg)!important;
  border:1px solid var(--btn-bd)!important;
  color:var(--btn-fg)!important;
  border-radius:var(--r-sm);
  width:auto;
  -webkit-appearance:none;appearance:none;
}
.nala-w .btn:hover,.nala-w .btn:focus-visible{color:var(--paper)!important}
.nala-w .btn--sage,.nala-w .btn--bronze{color:#fff!important}
.nala-w .btn--sage:hover,.nala-w .btn--bronze:hover{color:#fff!important}
.nala-w .btn--onDeep{color:var(--on-deep)!important}
.nala-w .btn--onDeep:hover,.nala-w .btn--onDeep:focus-visible{color:var(--deep)!important}

.nala-w .chip{
  background-color:transparent!important;
  border:1px solid rgba(172,121,68,.34)!important;
  color:var(--ink-2)!important;
  border-radius:var(--r-pill);
}
.nala-w .chip:hover,.nala-w .chip:focus-visible{border-color:var(--bronze)!important;color:var(--bronze)!important}
.nala-w .chip[aria-pressed="true"]{background-color:var(--ink)!important;border-color:var(--ink)!important;color:var(--paper)!important}

/* Geometry of our real <button> elements.
   The armour above strips width/border-radius from every button with
   !important, which also hits ours — an element selector plus !important beats
   an un-flagged class rule. These put the shapes back. Without them the burger
   stretches, the accordion header collapses and the submit button stops being
   full width, but ONLY on mobile, where it is easiest to miss. */
/* The armour zeroes button padding; the accordion header wants the small
   inline inset the design was drawn with. Stated explicitly rather than
   inherited from a browser default, so it renders the same everywhere. */
.nala-w .acc__btn{color:inherit!important;padding-inline:6px}
.nala-w .formcard .btn,
.nala-w .formcard button[type="submit"]{width:100%}
.nala-w .burger span{background-color:currentColor!important}
.nala-w .totop{background-color:var(--ink)!important;color:var(--paper)!important;border-radius:50%!important}
.nala-w .totop:hover{background-color:var(--bronze)!important}
.nala-w .mmenu__close{color:var(--ink)!important}
.nala-w .footer__social a{color:var(--on-deep-2)}
.nala-w .footer__social a:hover{background-color:var(--cream-btn);color:var(--deep)}

/* Fonts.
   Set on the widget ROOT only, not on a list of elements. `.nala-w` sits
   inside Elementor's widget container, so as the nearer ancestor it already
   wins the inherited font — while a blanket `.nala-w span { font-body }` would
   also hit the word-spans inside a heading and knock the display face off the
   headline. Form controls do not inherit font at all, so they are named.
   No !important anywhere here, so per-instance Typography controls still win. */
/* The static site carried its base typography on <body>. A plugin cannot touch
   <body>, so the same values live on the widget root and inherit from there —
   without them the theme's size, weight and line-height leak in and every
   paragraph reflows. */
.nala-w{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:300;
  line-height:var(--lh-body);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.nala-w input,.nala-w textarea,.nala-w select,.nala-w button{font-family:inherit}

/* Rich-text blocks: the WYSIWYG control returns its own <p> tags, and the
   reset zeroes their margins. Restore the rhythm here so an edited paragraph
   is spaced exactly like the hand-written markup it replaced. */
.nala-w .nala-rte > * + *{margin-top:1.3rem}
.nala-w .nala-rte p{max-width:58ch}
.nala-w .nala-rte a{color:var(--bronze);text-decoration:underline;text-underline-offset:3px}
.nala-w .nala-rte ul{list-style:disc;padding-inline-start:1.2em}
.nala-w .nala-rte li + li{margin-top:.4rem}
.nala-w h1,.nala-w h2,.nala-w h3,.nala-w h4,.nala-w .display,
.nala-w h1 *,.nala-w h2 *,.nala-w h3 *,.nala-w h4 *,
.nala-w .acc__q,.nala-w .why__t,.nala-w .marquee__item,
.nala-w .about__num,.nala-w .score__big,.nala-w .cta__phone{
  font-family:var(--font-display);
}
/* ============================================================
   NALA MED SPA — Mini-site
   One continuous scroll journey. No hard section edges.
   ============================================================ */

/* ---------- Reset (zero-specificity so component rules always win) ---------- */
:where(.nala-w html, .nala-w body, .nala-w h1, .nala-w h2, .nala-w h3, .nala-w h4, .nala-w p, .nala-w ul, .nala-w ol, .nala-w li, .nala-w figure, .nala-w blockquote, .nala-w dl, .nala-w dd){margin:0;padding:0}
:where(.nala-w ul, .nala-w ol){list-style:none}
:where(.nala-w img, .nala-w picture, .nala-w video){display:block;max-width:100%}
:where(.nala-w button){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(.nala-w a){color:inherit;text-decoration:none}
:where(.nala-w input, .nala-w textarea, .nala-w select, .nala-w button){font:inherit}


/* Lenis */
html.lenis, html.lenis body{height:auto}
.nala-w .lenis.lenis-smooth{scroll-behavior:auto!important}
.nala-w .lenis.lenis-stopped{overflow:hidden}


/* ---------- Shared layout ---------- */
.nala-w .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.nala-w .wrap--narrow{max-width:var(--maxw-narrow)}
.nala-w .chapter{position:relative;padding-block:var(--chapter)}

/* ---------- Type ---------- */
.nala-w .eyebrow{
  font-family:var(--font-body);
  font-size:var(--fs-eyebrow);
  font-weight:500;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--bronze);
  display:inline-flex;align-items:center;gap:.75rem;
}
.nala-w .eyebrow::before{
  content:"";width:34px;height:1px;background:currentColor;opacity:.55;flex:none;
}
.nala-w .eyebrow--center::after{content:"";width:34px;height:1px;background:currentColor;opacity:.55;flex:none}

.nala-w h1, .nala-w h2, .nala-w h3, .nala-w .display{
  font-family:var(--font-display);
  font-weight:500;
  line-height:var(--lh-tight);
  letter-spacing:-.015em;
  color:var(--ink);
}
.nala-w h2, .nala-w .h2{font-size:var(--fs-h2)}
.nala-w h3, .nala-w .h3{font-size:var(--fs-h3)}
.nala-w .lead{font-size:var(--fs-lead);color:var(--ink-2);max-width:64ch}
.nala-w .muted{color:var(--ink-3)}
.nala-w em.accent{font-style:italic;color:var(--bronze)}

/* ---------- Buttons ---------- */
.nala-w .btn{
  --btn-bg:var(--cream-btn);
  --btn-fg:var(--ink);
  --btn-bd:transparent;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.05rem 2.1rem;
  min-height:54px;
  font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:1px solid var(--btn-bd);
  border-radius:var(--r-sm);
  overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease-out),border-color .45s var(--ease-out),transform .45s var(--ease-out);
  will-change:transform;
}
.nala-w .btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.nala-w .btn:hover, .nala-w .btn:focus-visible{color:var(--paper)}
.nala-w .btn:hover::after, .nala-w .btn:focus-visible::after{transform:translateY(0)}
.nala-w .btn:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.nala-w .btn .ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}

.nala-w .btn--sage{--btn-bg:var(--sage);--btn-fg:#fff}
.nala-w .btn--sage::after{background:var(--sage-deep)}
.nala-w .btn--ghost{--btn-bg:transparent;--btn-bd:rgba(42,32,25,.28)}
.nala-w .btn--ghost::after{background:var(--ink)}
.nala-w .btn--ghost:hover{border-color:var(--ink)}
.nala-w .btn--onDeep{--btn-bg:transparent;--btn-bd:rgba(247,237,224,.34);--btn-fg:var(--on-deep)}
.nala-w .btn--onDeep::after{background:var(--cream-btn)}
.nala-w .btn--onDeep:hover, .nala-w .btn--onDeep:focus-visible{color:var(--deep);border-color:var(--cream-btn)}
.nala-w .btn--bronze{--btn-bg:var(--bronze);--btn-fg:#fff}
.nala-w .btn--bronze::after{background:var(--bronze-deep)}
.nala-w .btn--sm{padding:.8rem 1.5rem;min-height:44px;font-size:.68rem}

/* Text link with underline sweep */
.nala-w .tlink{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);padding-block:.3rem;
}
.nala-w .tlink::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.nala-w .tlink:hover::after, .nala-w .tlink:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nala-w .tlink .arw{transition:transform .45s var(--ease-out)}
.nala-w .tlink:hover .arw{transform:translateX(4px)}

/* ---------- Reveal system ----------
   Hide rules are NOT gated behind a root class, so the matching .is-in
   reveal rule always wins the cascade (equal specificity + later in file).
   A safety timeout in JS adds .is-in to everything if the engine never boots. */
html.nala-anim .nala-w .rv{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease-out),transform .95s var(--ease-out)}
html.nala-anim .nala-w .rv.is-in{opacity:1;transform:none}
html.nala-anim .nala-w .rv-d1{transition-delay:.08s}html.nala-anim .nala-w .rv-d2{transition-delay:.16s}html.nala-anim .nala-w .rv-d3{transition-delay:.24s}
html.nala-anim .nala-w .rv-d4{transition-delay:.32s}html.nala-anim .nala-w .rv-d5{transition-delay:.40s}html.nala-anim .nala-w .rv-d6{transition-delay:.48s}

/* Masked line reveal for display headings */
.nala-w .mask-line{display:block;overflow:hidden}
html.nala-anim .nala-w .mask-line > span{display:block;transform:translateY(110%);transition:transform 1.1s var(--ease-out)}
html.nala-anim .nala-w .is-in .mask-line > span, html.nala-anim .nala-w .mask-line.is-in > span{transform:none}

@media (prefers-reduced-motion:reduce){
  .nala-w .rv{opacity:1!important;transform:none!important;transition:none!important}
  .nala-w .mask-line > span{transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- Grain + scroll progress ---------- */
.nala-w .grain{
  position:fixed;inset:-120px;z-index:var(--z-grain);pointer-events:none;
  opacity:.34;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}
}
.nala-w .progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:calc(var(--z-header) + 5);
  background:transparent;pointer-events:none;
}
.nala-w .progress__bar{
  height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--bronze-pale),var(--bronze),var(--bronze-deep));
}

/* ============================================================
   LOADER
   ============================================================ */
.nala-w .loader{
  position:fixed;inset:0;z-index:var(--z-loader);
  display:grid;place-items:center;
  background:var(--paper);
  transition:opacity .8s var(--ease-out),visibility .8s;
}
.nala-w .loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.nala-w .loader__inner{display:grid;justify-items:center;gap:1.6rem;width:min(300px,62vw)}
.nala-w .loader__logo{width:100%;height:auto;opacity:0;animation:loaderIn 1.1s var(--ease-out) .12s forwards}
@keyframes loaderIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.nala-w .loader__track{width:100%;height:1px;background:rgba(172,121,68,.20);overflow:hidden}
.nala-w .loader__fill{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--bronze)}
.nala-w .loader__pct{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--bronze);font-weight:500}

/* ============================================================
   HEADER + TOP BAR
   ============================================================ */
/* Top bar lives INSIDE the fixed header, so the two can never overlap.
   It collapses away once the header sticks. */
.nala-w .topbar{
  background:var(--deep);color:var(--on-deep-2);
  font-size:.72rem;letter-spacing:.06em;
  overflow:hidden;
  max-height:44px;
  transition:max-height .5s var(--ease-out),opacity .4s var(--ease-out);
}
.nala-w .header.is-stuck .topbar{max-height:0;opacity:0}
.nala-w .topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:38px;padding-block:.35rem}
.nala-w .topbar__rating{display:inline-flex;align-items:center;gap:.5rem}
.nala-w .topbar__score{font-family:var(--font-display);font-size:1rem;color:var(--cream-btn);line-height:1}
.nala-w .stars{display:inline-flex;gap:2px;color:var(--star)}
.nala-w .stars svg{width:12px;height:12px;fill:currentColor}
.nala-w .topbar__where{display:inline-flex;align-items:center;gap:.42rem;transition:color .35s}
.nala-w .topbar__where:hover{color:var(--cream-btn)}
.nala-w .topbar__where svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}

.nala-w .header{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-header);
  background:rgba(251,247,242,.82);
  backdrop-filter:saturate(1.4) blur(16px);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);
  transition:transform .5s var(--ease-out),background-color .5s var(--ease-out),
             box-shadow .5s var(--ease-out),backdrop-filter .5s;
}
.nala-w .header.is-stuck{
  background:rgba(251,247,242,.94);
  box-shadow:0 1px 0 rgba(42,32,25,.07),0 18px 40px -34px rgba(42,32,25,.5);
}
.nala-w .header.is-hidden{transform:translateY(-104%)}
.nala-w .header__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:82px;transition:min-height .5s var(--ease-out)}
.nala-w .header.is-stuck .header__in{min-height:70px}

.nala-w .brand{display:block;flex:none;width:clamp(122px,11vw,164px);transition:width .5s var(--ease-out)}
.nala-w .brand img{width:100%;height:auto}
.nala-w .brand .logo-light{display:block}
.nala-w .brand .logo-dark{display:none}
/* The mark ships in brand bronze and stays that way — the header has its own
   light ground, so there is never a photograph directly behind it. */

.nala-w .nav{display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2.3rem)}
.nala-w .nav a{
  position:relative;font-size:.73rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);padding-block:.45rem;transition:color .4s var(--ease-out);
}
.nala-w .nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--bronze);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out);
}
.nala-w .nav a:hover::after, .nala-w .nav a:focus-visible::after, .nala-w .nav a.is-active::after{transform:scaleX(1);transform-origin:left}
.nala-w .nav a:hover{color:var(--bronze)}

.nala-w .header__cta{display:flex;align-items:center;gap:.7rem}
.nala-w .header .btn{padding:.85rem 1.6rem;min-height:46px;font-size:.68rem}


/* Burger */
.nala-w .burger{display:none;width:46px;height:46px;place-items:center;border-radius:var(--r-sm)}
.nala-w .burger span{display:block;width:22px;height:1.5px;background:var(--ink);margin:4px 0;
  transition:transform .45s var(--ease-out),opacity .3s}

/* Mobile menu — its own top bar and its own X (never the header's, which sits underneath) */
.nala-w .mmenu{
  position:fixed;inset:0;z-index:var(--z-menu);
  background:var(--paper);
  display:flex;flex-direction:column;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease-out);
  overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:max(2rem,env(safe-area-inset-bottom));
}
.nala-w .mmenu.is-open{clip-path:inset(0 0 0 0)}
.nala-w .mmenu__bar{display:flex;align-items:center;justify-content:space-between;
  min-height:84px;flex:none;border-bottom:1px solid rgba(172,121,68,.16)}
.nala-w .mmenu__close{width:46px;height:46px;display:grid;place-items:center;color:var(--ink)}
.nala-w .mmenu__close svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;fill:none}
.nala-w .mmenu__body{padding-block:clamp(1.5rem,5vh,3rem);display:grid;gap:.2rem;align-content:start}
.nala-w .mmenu__body a.mlink{
  display:block;font-family:var(--font-display);font-size:clamp(1.7rem,7vw,2.4rem);
  color:var(--ink);padding-block:.42rem;
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),color .3s;
}
.nala-w .mmenu.is-open .mlink{opacity:1;transform:none}
.nala-w .mmenu__body a.mlink:hover{color:var(--bronze)}
.nala-w .mmenu__foot{margin-top:auto;display:grid;gap:.7rem;padding-top:1.6rem;
  border-top:1px solid rgba(172,121,68,.16)}
/* size rules target links only — never the CTA buttons ("giant buttons" bug) */
.nala-w .mmenu__foot .btn{font-size:.7rem}
.nala-w .mmenu__meta{font-size:.8rem;color:var(--ink-3);line-height:1.9}

/* ============================================================
   HERO — split editorial.
   A cream panel of type against a tall photograph that bleeds off the right
   edge. Deliberately not the full-bleed-image-with-text-on-top that every med
   spa uses: the type gets its own ground, so it can be large and still calm.
   ============================================================ */
.nala-w .hero{
  position:relative;
  display:grid;
  /* Reads from a variable so the Elementor Style control can drive it.
     Elementor writes the VARIABLE, never the property — its desktop value
     carries no media query and loads after this file, so writing the
     property there would override the mobile layout further down. That is
     what flattened the phone hero into two squeezed columns. */
  grid-template-columns:var(--hero-cols,minmax(0,1.02fr) minmax(0,.98fr));
  align-items:stretch;
  min-height:var(--hero-minh,min(92lvh,900px));
  background:var(--paper);
  isolation:isolate;
  overflow:clip;
}

/* --- type panel --- */
.nala-w .hero__panel{
  position:relative;z-index:2;
  display:flex;align-items:center;
  padding-block:clamp(6rem,12vh,8rem) clamp(2.2rem,5vh,3.2rem);
  padding-inline:var(--gutter) clamp(1.5rem,4vw,4rem);
  background:linear-gradient(160deg,var(--panel-from,var(--paper)) 0%,color-mix(in srgb,var(--panel-from,var(--paper)) 55%,var(--panel-to,var(--sand))) 62%,var(--panel-to,var(--sand)) 100%);
}
.nala-w .hero__panelIn{width:100%;max-width:var(--hero-panel-maxw,34rem);margin-inline-start:auto}

.nala-w .hero__where{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.68rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:var(--bronze);
}
.nala-w .hero__where::before{content:"";width:30px;height:1px;background:currentColor;opacity:.6}

.nala-w .hero__title{
  margin-top:1.5rem;
  font-size:clamp(2.7rem,5.1vw,4.9rem);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.026em;
  color:var(--ink);
}
.nala-w .hero__title em{font-style:italic;color:var(--bronze)}

/* the rule draws itself in once the panel is revealed */
html.nala-anim .nala-w .hero__rule{
  display:block;height:1px;width:100%;max-width:190px;
  margin-top:clamp(1.5rem,3vh,2.2rem);
  background:var(--bronze);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease-out) .55s;
}
html.nala-anim .nala-w .hero.is-in .hero__rule{transform:scaleX(1)}

.nala-w .hero__key{
  margin-top:clamp(1.2rem,2.6vh,1.8rem);
  max-width:40ch;
  font-size:clamp(1rem,1.15vw,1.14rem);
  color:var(--ink-2);
}
.nala-w .hero__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.8rem,3.4vh,2.6rem)}

/* the four categories, as a quiet index rather than a nav */
.nala-w .hero__index{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.55rem clamp(1rem,2vw,2rem);
  margin-top:clamp(1.5rem,3.2vh,2.4rem);
  padding-top:clamp(1rem,2vh,1.4rem);
  border-top:1px solid rgba(172,121,68,.22);
}
.nala-w .hero__index li{
  display:flex;align-items:baseline;gap:.6rem;
  font-size:.78rem;letter-spacing:.04em;color:var(--ink-2);
}
.nala-w .hero__index i{
  font-family:var(--font-display);font-style:normal;
  font-size:.72rem;color:var(--bronze);opacity:.85;
}

/* --- photograph --- */
.nala-w .hero__figure{
  position:relative;z-index:1;
  margin:0;overflow:hidden;
  background:var(--sand) url("../img/hero-700.webp") center 30%/cover no-repeat;
}
/* Taken out of flow on purpose. Left in it, the photograph's own aspect ratio
   decides the grid row height and the hero grows past the viewport no matter
   what min-height says. Absolute also gives the parallax its overflow room. */
.nala-w .hero__figure img{
  position:absolute;inset:-6% 0;
  width:100%;height:112%;
  object-fit:cover;object-position:center 32%;
  transform:scale(1.02);will-change:transform;
  filter:saturate(.94) contrast(1.03);
}
/* softens the seam so the panel and the photograph read as one surface */
.nala-w .hero__figure::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--paper-2) 0%,rgba(246,239,230,.35) 8%,transparent 26%);
}

/* Sits ON the seam, half over the cream panel and half over the photograph.
   A direct child of the hero, not of the figure — the figure clips its
   overflow to hold the image, and would cut the chip in half. */
.nala-w .hero__badge{
  position:absolute;left:51%;bottom:clamp(1.4rem,4vh,2.8rem);z-index:4;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.72rem 1.15rem;
  background:var(--paper);
  color:var(--ink);
  font-size:.72rem;letter-spacing:.1em;white-space:nowrap;
  box-shadow:var(--shadow-card);
  transform:translateX(-46%);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.nala-w .hero__badge:hover{transform:translateX(-46%) translateY(-3px);box-shadow:var(--shadow-lift)}
.nala-w .hero__badge b{font-family:var(--font-display);font-size:1rem;font-weight:500}
.nala-w .hero__badge .stars{color:var(--star)}
.nala-w .hero__badge .stars svg{width:13px;height:13px;fill:currentColor}

.nala-w .hero__cue{
  position:absolute;left:var(--gutter);bottom:1.6rem;z-index:3;
  color:var(--ink-3);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
}
.nala-w .hero__cue .scrollcue__rail{background:rgba(42,32,25,.18)}
.nala-w .hero__cue .scrollcue__rail::after{background:var(--bronze)}

/* --- alternate layout: text over a full-bleed photograph --- */
.nala-w .hero--full{
  display:flex;align-items:flex-end;
  grid-template-columns:none;
  padding-block:clamp(9rem,17vh,12rem) clamp(3.5rem,9vh,6rem);
  background:var(--deep);
}
.nala-w .hero--full .hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:var(--deep) url("../img/hero-700.webp") center 30%/cover no-repeat}
.nala-w .hero--full .hero__media img{
  position:absolute;inset:-6% 0;width:100%;height:112%;
  object-fit:cover;object-position:center 30%;
  transform:scale(1.01);will-change:transform;filter:saturate(.93) contrast(1.04);
}
.nala-w .hero--full .hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(28,19,13,.78) 0%,rgba(28,19,13,.46) 38%,rgba(28,19,13,.10) 68%,transparent 88%),
    linear-gradient(180deg,rgba(28,19,13,.55) 0%,rgba(28,19,13,.10) 30%,rgba(28,19,13,.34) 64%,rgba(28,19,13,.80) 100%);
}
.nala-w .hero--full .hero__in{position:relative;z-index:2;width:100%}
.nala-w .hero--full .hero__eyebrow{color:var(--bronze-pale);margin-bottom:1.4rem}
.nala-w .hero--full h1{
  color:#fff;font-size:var(--fs-hero);font-weight:500;letter-spacing:-.02em;max-width:17ch;
  text-shadow:0 2px 40px rgba(28,20,14,.45);
}
.nala-w .hero--full h1 .w{display:inline-block;opacity:0;filter:blur(9px);transform:translateY(.34em);
  transition:opacity .9s var(--ease-out),filter .9s var(--ease-out),transform .9s var(--ease-out)}
.nala-w .hero--full .hero__sub{
  margin-top:1.6rem;max-width:60ch;color:rgba(255,255,255,.90);font-weight:300;
  text-shadow:0 1px 24px rgba(28,20,14,.5);
}
.nala-w .hero--full .hero__actions{margin-top:2.4rem}
.nala-w .hero--full .hero__badge{background:rgba(255,255,255,.10);color:#fff;backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.26);border-radius:var(--r-pill);left:auto;right:var(--gutter);transform:none}
.nala-w .hero--full .hero__badge:hover{transform:translateY(-3px)}

/* ============================================================
   MARQUEE — infinite loop. Spacing via margin, NOT gap, so the
   -50% translate lands exactly on the end of one set.
   ============================================================ */
.nala-w .marquee{
  position:relative;z-index:2;
  padding-block:clamp(1.4rem,3vw,2.2rem);
  background:var(--paper);
  border-block:1px solid rgba(172,121,68,.16);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.nala-w .marquee__track{display:flex;width:max-content;will-change:transform}
.nala-w .marquee__item{
  display:inline-flex;align-items:center;
  margin-inline:clamp(1.6rem,3.2vw,3rem);   /* margin, not gap */
  font-family:var(--font-display);
  font-size:clamp(1.05rem,1.9vw,1.6rem);
  font-style:italic;color:var(--bronze-deep);white-space:nowrap;
}
.nala-w .marquee__item::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--bronze);
  margin-inline-end:clamp(1.6rem,3.2vw,3rem);flex:none;opacity:.7;
}

/* ============================================================
   ABOUT — editorial split, sticky media column
   ============================================================ */
.nala-w .about{position:relative;padding-block:var(--chapter)}
.nala-w .about__grid{
  display:grid;gap:clamp(2.4rem,5vw,5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  align-items:start;
}
.nala-w .about__copy > * + *{margin-top:1.3rem}
.nala-w .about__copy h2{margin-top:1.2rem;max-width:16ch}
.nala-w .about__copy p{max-width:58ch;color:var(--ink-2)}

.nala-w .about{--sticky-pos:sticky}
.nala-w .about__media{position:var(--sticky-pos,static);top:clamp(90px,12vh,130px)}
.nala-w .about__frame{
  position:relative;overflow:hidden;border-radius:var(--r-md);
  aspect-ratio:3/4;background:var(--sand);
  box-shadow:var(--shadow-lift);
}
/* Height/parallax overflow lives on the frame, never on the <img>,
   so an inherited `img{height:auto}` can't open a gap. */
.nala-w .about__frame img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.08);will-change:transform;
}
.nala-w .about__frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(43,32,24,.42));
  pointer-events:none;
}
.nala-w .about__stat{
  position:absolute;left:0;bottom:0;z-index:3;      /* explicit z above the <img> */
  padding:clamp(1.2rem,2.4vw,1.9rem);
  color:#fff;
}
.nala-w .about__num{
  display:flex;align-items:baseline;gap:.18rem;
  font-family:var(--font-display);font-size:clamp(2.6rem,5vw,4rem);line-height:1;
}
.nala-w .about__num span{font-size:.5em}
.nala-w .about__stat small{
  display:block;margin-top:.5rem;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.nala-w .about__tape{
  position:absolute;right:clamp(1rem,2vw,1.6rem);top:clamp(1rem,2vw,1.6rem);z-index:3;
  padding:.5rem .9rem;border-radius:var(--r-pill);
  background:rgba(251,247,242,.92);color:var(--bronze-deep);
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
}

/* Second about beat — reversed, on sand */
.nala-w .care{position:relative;padding-block:var(--chapter)}
.nala-w .care__grid{
  display:grid;gap:clamp(2.4rem,5vw,5rem);
  grid-template-columns:minmax(0,.9fr) minmax(0,1fr);align-items:center;
}
.nala-w .care__media{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;
  box-shadow:var(--shadow-card);background:var(--sand)}
.nala-w .care__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);will-change:transform}
.nala-w .care__copy > * + *{margin-top:1.3rem}
.nala-w .care__copy p{max-width:56ch;color:var(--ink-2)}
.nala-w .care__copy .btn{margin-top:1.4rem}

/* ============================================================
   WHY CHOOSE US — numbered list that lights up on scroll
   ============================================================ */
.nala-w .why{position:relative;padding-block:var(--chapter)}
.nala-w .why__head{display:grid;gap:clamp(1.6rem,3vw,3rem);grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem)}
.nala-w .why__head h2{max-width:15ch}
.nala-w .why__head .lead{max-width:46ch}
.nala-w .why__list{border-top:1px solid rgba(172,121,68,.22)}
.nala-w .why__item{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,3vw,2.6rem);
  align-items:center;
  padding-block:clamp(1.3rem,2.6vw,2rem);
  border-bottom:1px solid rgba(172,121,68,.22);
  position:relative;
}
.nala-w .why__item::before{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--bronze);transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease-out);
}
.nala-w .why__item.is-in::before{transform:scaleX(1)}
.nala-w .why__n{
  font-family:var(--font-display);font-size:clamp(1rem,1.5vw,1.2rem);
  color:var(--bronze);min-width:2.6ch;letter-spacing:.04em;
}
html.nala-anim .nala-w .why__t{
  font-family:var(--font-display);
  font-size:clamp(1.12rem,2.05vw,1.68rem);
  line-height:1.35;color:var(--ink);
  /* JS drives this value inline with !important — no class/cascade fight */
  opacity:.24;
  transition:opacity .8s var(--ease-out),color .8s var(--ease-out);
}
.nala-w .why__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(2rem,4vw,3rem)}

/* ============================================================
   SERVICES — filter chips + card grid
   ============================================================ */
.nala-w .services{position:relative;padding-block:var(--chapter)}
.nala-w .services__head{text-align:center;display:grid;justify-items:center;gap:1.1rem;
  margin-bottom:clamp(2rem,4vw,3rem)}
.nala-w .services__head h2{max-width:18ch}
.nala-w .services__head .lead{max-width:60ch}

.nala-w .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;
  margin-bottom:clamp(2.2rem,4.5vw,3.4rem)}
/* Hard reset so no theme/kit button style can leak in (incl. full-width blocks) */
.nala-w .chip{
  -webkit-appearance:none!important;appearance:none!important;
  background:transparent!important;
  border:1px solid rgba(172,121,68,.34)!important;
  border-radius:var(--r-pill)!important;
  box-shadow:none!important;
  width:auto!important;
  display:inline-flex!important;align-items:center;gap:.45rem;
  padding:.62rem 1.15rem!important;
  font-size:.68rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2)!important;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .4s var(--ease-out),color .4s var(--ease-out),border-color .4s var(--ease-out);
}
.nala-w .chip:hover, .nala-w .chip:focus-visible{border-color:var(--bronze)!important;color:var(--bronze)!important}
.nala-w .chip[aria-pressed="true"]{
  background:var(--ink)!important;border-color:var(--ink)!important;color:var(--paper)!important;
}
.nala-w .chip__n{font-size:.62rem;opacity:.6;font-variant-numeric:tabular-nums}

.nala-w .cards{
  display:grid;gap:clamp(.9rem,1.4vw,1.25rem);
  /* Three across. Four fits more rows on screen, but each card carries a full
     paragraph and at ~280px wide that becomes a wall of small text. */
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.nala-w .card{
  position:relative;display:flex;flex-direction:column;
  background:var(--shell);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),opacity .5s,visibility .5s;
  will-change:transform;
}
.nala-w .card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lift)}
.nala-w .card.is-hidden{display:none}
.nala-w .card__media{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--sand);flex:none}
.nala-w .card__media img{
  width:100%!important;height:100%!important;max-width:none;
  object-fit:cover;object-position:center;
  transform:scale(1.02);transition:transform 1s var(--ease-out);
}
.nala-w .card:hover .card__media img{transform:scale(1.08)}
.nala-w .card__tag{
  position:absolute;left:.8rem;top:.8rem;z-index:3;    /* explicit z above the <img> */
  padding:.34rem .72rem;border-radius:var(--r-pill);
  background:rgba(251,247,242,.94);color:var(--bronze-deep);
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
}
.nala-w .card__body{display:flex;flex-direction:column;gap:.7rem;padding:clamp(1.1rem,1.7vw,1.45rem);flex:1}
.nala-w .card__body h3{font-size:clamp(1.02rem,1.25vw,1.18rem);line-height:1.3}
.nala-w .card__body p{font-size:.85rem;line-height:1.68;color:var(--ink-2);flex:1}
.nala-w .card__body .tlink{margin-top:.2rem;align-self:flex-start}

.nala-w .services__more{display:flex;justify-content:center;margin-top:clamp(2rem,4vw,3rem)}

/* "View all" — a phone stacks sixteen cards into a very long scroll, so only
   the first few are shown until asked. Desktop shows the whole grid. */
.nala-w .cards__more{display:none;justify-content:center;margin-top:clamp(1.2rem,2.5vw,1.8rem)}
.nala-w .cards__more.is-on{display:flex}
.nala-w .cards__count{font-variant-numeric:tabular-nums;opacity:.6;margin-inline-start:.5rem}
.nala-w .card.is-clipped{display:none}

/* Touch: no hover exists, so reveal everything and kill stuck hover states */
@media (hover:none){
  .nala-w .card:hover{transform:none;box-shadow:var(--shadow-card)}
  .nala-w .card:hover .card__media img{transform:scale(1.02)}
  .nala-w .tlink::after{transform:scaleX(1)}
}

/* ============================================================
   REVIEWS — deep warm chapter
   ============================================================ */
.nala-w .reviews{position:relative;padding-block:clamp(6rem,13vh,11rem);color:var(--on-deep);overflow:clip}
.nala-w .reviews__bg{position:absolute;inset:0;z-index:0;background:var(--deep)}
.nala-w .reviews__bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at 18% 12%,rgba(172,121,68,.30),transparent 60%),
    radial-gradient(60% 50% at 88% 90%,rgba(198,156,109,.20),transparent 62%);
}
.nala-w .reviews .wrap{position:relative;z-index:2}
.nala-w .reviews h2{color:var(--on-deep);max-width:16ch}
.nala-w .reviews .eyebrow{color:var(--bronze-pale)}
.nala-w .reviews__grid{
  display:grid;gap:clamp(2.2rem,5vw,4.5rem);
  grid-template-columns:minmax(0,.92fr) minmax(0,1fr);align-items:center;
}
.nala-w .reviews__copy > * + *{margin-top:1.3rem}
.nala-w .reviews__copy p{color:var(--on-deep-2);max-width:54ch}
.nala-w .reviews__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem}

.nala-w .score{
  position:relative;
  padding:clamp(2rem,4vw,3.2rem);
  border:1px solid rgba(247,237,224,.18);border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(247,237,224,.09),rgba(247,237,224,.03));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  text-align:center;display:grid;justify-items:center;gap:.9rem;
}
.nala-w .score__big{font-family:var(--font-display);font-size:clamp(4rem,10vw,7rem);line-height:.9;color:var(--cream-btn)}
.nala-w .score .stars svg{width:22px;height:22px}
.nala-w .score__meta{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-deep-2)}
.nala-w .score__divider{width:44px;height:1px;background:rgba(247,237,224,.28)}
.nala-w .score__note{font-size:.86rem;color:var(--on-deep-2);line-height:1.8;max-width:38ch}
.nala-w .score__g{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-deep-2)}
.nala-w .score__g svg{width:15px;height:15px}

/* ============================================================
   FAQ
   ============================================================ */
.nala-w .faq{position:relative;padding-block:var(--chapter)}
.nala-w .faq__grid{display:grid;gap:clamp(2rem,4.5vw,4.5rem);
  grid-template-columns:minmax(0,.72fr) minmax(0,1fr);align-items:start}
.nala-w .faq{--sticky-pos:sticky}
.nala-w .faq__aside{position:var(--sticky-pos,static);top:clamp(90px,13vh,140px);display:grid;gap:1.2rem}
.nala-w .faq__aside h2{max-width:13ch}
.nala-w .faq__aside .lead{max-width:38ch}
.nala-w .faq__list{border-top:1px solid rgba(172,121,68,.24)}

.nala-w .acc{border-bottom:1px solid rgba(172,121,68,.24)}
.nala-w .acc__btn{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.4rem;
  padding-block:clamp(1.15rem,2.2vw,1.6rem);text-align:left;
  -webkit-tap-highlight-color:transparent;
}
.nala-w .acc__q{
  font-family:var(--font-display);font-size:clamp(1.02rem,1.5vw,1.24rem);
  line-height:1.42;color:var(--ink);transition:color .4s var(--ease-out);
}
.nala-w .acc__btn:hover .acc__q, .nala-w .acc[data-open="true"] .acc__q{color:var(--bronze-deep)}
.nala-w .acc__ico{position:relative;flex:none;width:26px;height:26px;margin-top:.15rem;
  border:1px solid rgba(172,121,68,.4);border-radius:50%;transition:background-color .45s,border-color .45s}
.nala-w .acc__ico::before, .nala-w .acc__ico::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--bronze);
  transition:transform .45s var(--ease-out),background-color .45s;
}
.nala-w .acc__ico::before{width:10px;height:1.4px;transform:translate(-50%,-50%)}
.nala-w .acc__ico::after{width:1.4px;height:10px;transform:translate(-50%,-50%)}
.nala-w .acc[data-open="true"] .acc__ico{background:var(--bronze);border-color:var(--bronze)}
.nala-w .acc[data-open="true"] .acc__ico::before, .nala-w .acc[data-open="true"] .acc__ico::after{background:#fff}
.nala-w .acc[data-open="true"] .acc__ico::after{transform:translate(-50%,-50%) scaleY(0)}
.nala-w .acc__panel{overflow:hidden;height:0;transition:height .6s var(--ease-out)}
.nala-w .acc__inner{padding-bottom:clamp(1.15rem,2.2vw,1.6rem);color:var(--ink-2);max-width:62ch}

/* ============================================================
   CTA BAND — full-bleed image
   ============================================================ */
.nala-w .cta{position:relative;overflow:clip;isolation:isolate;
  padding-block:clamp(6rem,15vh,11rem);text-align:center;color:#fff}
.nala-w .cta__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--deep)}
.nala-w .cta__media img{width:100%;height:118%;object-fit:cover;object-position:center 55%;
  transform:translateY(-6%);will-change:transform}
.nala-w .cta__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(43,32,24,.72),rgba(43,32,24,.58) 50%,rgba(43,32,24,.80));}
.nala-w .cta .wrap{position:relative;z-index:2;display:grid;justify-items:center;gap:1.4rem}
.nala-w .cta .eyebrow{color:var(--bronze-pale)}
.nala-w .cta h2{color:#fff;max-width:17ch}
.nala-w .cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:.8rem}
.nala-w .cta__phone{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.2rem);color:var(--cream-btn);
  transition:color .4s}
.nala-w .cta__phone:hover{color:#fff}

/* ============================================================
   CONTACT
   ============================================================ */
.nala-w .contact{position:relative;padding-block:var(--chapter)}
.nala-w .contact__grid{display:grid;gap:clamp(2.4rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:start}
.nala-w .contact__copy > * + *{margin-top:1.3rem}
.nala-w .contact__copy p{max-width:56ch;color:var(--ink-2)}

.nala-w .info{display:grid;gap:1rem;margin-top:2rem}
.nala-w .info__row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start}
.nala-w .info__ico{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(172,121,68,.32);color:var(--bronze)}
/* Line icons: stroke only. A blanket fill:currentColor would turn them into blobs. */
.nala-w .info__ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.nala-w .info__row b{display:block;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;margin-bottom:.2rem}
.nala-w .info__row a, .nala-w .info__row span{color:var(--ink);font-size:.95rem;line-height:1.6}
.nala-w .info__row a{transition:color .35s}
.nala-w .info__row a:hover{color:var(--bronze)}

.nala-w .hours{margin-top:2.2rem;border-top:1px solid rgba(172,121,68,.22)}
.nala-w .hours__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.72rem;border-bottom:1px solid rgba(172,121,68,.16);font-size:.9rem}
.nala-w .hours__row.is-today{color:var(--bronze-deep);font-weight:500}
.nala-w .hours__d{color:var(--ink-2)}
.nala-w .hours__t{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.nala-w .hours__t.is-closed{color:var(--ink-3)}

.nala-w .formcard{
  background:var(--shell);border-radius:var(--r-lg);box-shadow:var(--shadow-card);
  padding:clamp(1.5rem,3vw,2.6rem);
}
.nala-w .formcard h3{margin-bottom:1.4rem;font-size:1.3rem}
.nala-w .field{position:relative;margin-bottom:1.1rem}
.nala-w .field label{display:block;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.45rem;font-weight:500}
.nala-w .field input, .nala-w .field textarea{
  width:100%;padding:.92rem 1rem;
  background:var(--paper-2);color:var(--ink);
  border:1px solid transparent;border-radius:var(--r-sm);
  font-size:.95rem;font-weight:300;
  transition:border-color .35s,background-color .35s;
}
.nala-w .field textarea{min-height:118px;resize:vertical}
.nala-w .field input:focus, .nala-w .field textarea:focus{outline:none;border-color:var(--bronze);background:var(--shell)}
.nala-w .field input::placeholder, .nala-w .field textarea::placeholder{color:var(--ink-3);opacity:.7}
.nala-w .formcard .btn{width:100%}
.nala-w .form__note{margin-top:.9rem;font-size:.76rem;color:var(--ink-3);line-height:1.7}
.nala-w .form__msg{margin-top:1rem;font-size:.9rem;display:none}
.nala-w .form__msg.is-on{display:block}
.nala-w .form__msg.ok{color:var(--sage-deep)}
.nala-w .form__msg.err{color:#a5452e}
.nala-w .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* ============================================================
   FOOTER
   ============================================================ */
.nala-w .footer{position:relative;background:var(--deep);color:var(--on-deep-2);
  padding-block:clamp(3.5rem,7vw,5.5rem) 0;overflow:clip}
.nala-w .footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 60% at 12% 0%,rgba(172,121,68,.22),transparent 62%);
}
.nala-w .footer .wrap{position:relative;z-index:2}
.nala-w .footer__grid{display:grid;gap:clamp(2rem,4vw,3.4rem);
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
.nala-w .footer__brand{display:block;width:clamp(150px,14vw,196px);margin-bottom:1.3rem}
.nala-w .footer__brand img{width:100%;height:auto;filter:brightness(0) invert(1);opacity:.94}
.nala-w .footer__about{font-size:.88rem;line-height:1.85;max-width:38ch}
.nala-w .footer__social{display:flex;gap:.55rem;margin-top:1.4rem}
.nala-w .footer__social a{
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(247,237,224,.20);color:var(--on-deep-2);
  transition:background-color .4s,color .4s,border-color .4s,transform .4s var(--ease-out);
}
.nala-w .footer__social a:hover{background:var(--cream-btn);color:var(--deep);border-color:var(--cream-btn);
  transform:translateY(-3px)}
.nala-w .footer__social svg{width:17px;height:17px;fill:currentColor}
.nala-w .footer h4{
  font-family:var(--font-body);font-size:.66rem;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--cream-btn);margin-bottom:1.2rem;
}
.nala-w .footer__links{display:grid;gap:.62rem;font-size:.88rem}
.nala-w .footer__links a{color:var(--on-deep-2);transition:color .35s,padding-inline-start .35s}
.nala-w .footer__links a:hover{color:var(--cream-btn);padding-inline-start:6px}
.nala-w .footer__bottom{
  margin-top:clamp(2.5rem,5vw,4rem);padding-block:1.5rem;
  border-top:1px solid rgba(247,237,224,.14);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;
  font-size:.75rem;color:rgba(205,183,158,.72);
}
.nala-w .footer__hours{font-variant-numeric:tabular-nums;letter-spacing:.03em}

/* ============================================================
   MOBILE STICKY ACTION BAR + BACK TO TOP + CURSOR
   ============================================================ */
.nala-w .mbar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:calc(var(--z-header) - 1);
  padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
  background:rgba(251,247,242,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(172,121,68,.18);
  gap:.5rem;
}
.nala-w .mbar .btn{flex:1;min-height:50px;padding-inline:.8rem;font-size:.66rem}

.nala-w .totop{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:calc(var(--z-header) - 2);
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:var(--ink);color:var(--paper);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out),visibility .45s,background-color .35s;
}
.nala-w .totop.is-on{opacity:1;visibility:visible;transform:none}
.nala-w .totop:hover{background:var(--bronze)}
.nala-w .totop svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}

.nala-w .cursor{
  position:fixed;left:0;top:0;z-index:var(--z-cursor);pointer-events:none;
  width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid rgba(172,121,68,.7);
  transition:width .35s var(--ease-out),height .35s var(--ease-out),
             margin .35s var(--ease-out),background-color .35s,opacity .3s;
  opacity:0;mix-blend-mode:difference;filter:invert(1);
}
.nala-w .cursor.is-on{opacity:1}
.nala-w .cursor.is-hot{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(172,121,68,.22)}

/* ============================================================
   RESPONSIVE — mobile is its own discipline, not a squeezed desktop
   ============================================================ */
@media (max-width:1080px){
  .nala-w .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nala-w .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nala-w .nav, .nala-w .header__cta .btn--ghost{display:none}
  .nala-w .burger{display:grid}
  .nala-w .about__grid, .nala-w .care__grid, .nala-w .why__head, .nala-w .reviews__grid, .nala-w .faq__grid, .nala-w .contact__grid{
    grid-template-columns:minmax(0,1fr)
  }
  .nala-w .care__grid > .care__media{order:-1}
  /* direct property, not the variable: Elementor only ever writes the
     variable, so this can never be outranked */
  .nala-w .about__media, .nala-w .faq__aside{position:static!important}
  .nala-w .about__frame{aspect-ratio:4/3}
  /* On a phone the two columns become one composition rather than two stacked
     blocks: the photograph fills the top, and the cream panel rides up over it
     with a rounded edge so the seam reads as intentional. */
  .nala-w .hero{grid-template-columns:minmax(0,1fr);min-height:0}

  /* One value drives the picture height AND where the rating chip sits, so the
     two cannot drift apart on a different screen size. */
  /* Direct properties, and !important, because an Elementor Style value has
     the same specificity and loads later. Everything the editor can change
     on this section goes through a variable instead, so nothing here is
     fighting the client's own settings — only the desktop defaults. */
  .nala-w .hero{
    --hero-media:clamp(260px,44vh,430px);
    grid-template-columns:minmax(0,1fr)!important;
    min-height:0!important;
  }
  .nala-w .hero__figure{
    order:-1;
    height:var(--hero-media);
    margin-bottom:0;
  }
  .nala-w .hero__figure img{inset:0;height:100%;object-position:center 38%}
  /* the left-edge fade belongs to the desktop split; on a phone it would sit
     across the top of the picture */
  .nala-w .hero__figure::before{
    background:linear-gradient(180deg,rgba(28,19,13,.30) 0%,transparent 34%,transparent 70%,rgba(28,19,13,.22) 100%);
  }

  .nala-w .hero__panel{
    position:relative;z-index:2;
    margin-top:-26px;
    border-radius:24px 24px 0 0;
    padding-block:clamp(1.6rem,4vh,2.4rem) clamp(2rem,5vh,3rem);
    padding-inline:var(--gutter);
    background:linear-gradient(180deg,var(--panel-from,var(--paper)) 0%,var(--panel-to,var(--sand)) 100%);
    box-shadow:0 -18px 40px -24px rgba(42,32,25,.34);
  }
  .nala-w .hero__panelIn{max-width:100%!important;margin-inline-start:0}

  .nala-w .hero__title{
    margin-top:1rem;
    font-size:clamp(2.5rem,11vw,3.3rem);
    line-height:1.04;
  }
  .nala-w .hero__rule{margin-top:1.1rem;max-width:150px}
  .nala-w .hero__key{margin-top:1rem;font-size:1rem;line-height:1.62;max-width:100%}
  .nala-w .hero__actions{margin-top:1.4rem;gap:.6rem;flex-wrap:nowrap}
  .nala-w .hero__actions .btn{flex:1 1 0;min-width:0;padding-inline:.7rem;white-space:nowrap}

  .nala-w .hero__index{
    margin-top:1.4rem;padding-top:1rem;
    gap:.45rem 1rem;
  }
  .nala-w .hero__index li{font-size:.75rem}

  /* On the photograph, clear of the fixed header — where it used to sit it was
     hidden behind the header bar. */
  /* On the photograph, just above the panel's rounded edge — and well clear of
     the fixed header, which is where it used to disappear behind. */
  .nala-w .hero__badge{
    left:auto;right:var(--gutter);
    top:calc(var(--hero-media) - 26px);
    bottom:auto;
    transform:translateY(-100%) translateY(-12px);
    padding:.5rem .85rem;font-size:.66rem;
    border-radius:var(--r-pill);
  }
  .nala-w .hero__badge:hover{transform:translateY(-100%) translateY(-12px)}

  .nala-w .hero__cue{display:none}
  .nala-w .mbar{display:flex}
  .nala-w .totop{bottom:calc(72px + env(safe-area-inset-bottom))}
  body{padding-bottom:0}
  .nala-w .footer{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .nala-w .cursor{display:none}
}
@media (max-width:640px){
  .nala-w .cards{grid-template-columns:minmax(0,1fr)}
  .nala-w .footer__grid{grid-template-columns:minmax(0,1fr)}
  .nala-w .hero__title{font-size:clamp(2.3rem,9vw,3.1rem)}
  .nala-w .hero__actions .btn{flex:1 1 100%;min-width:0}
  .nala-w .hero__index{grid-template-columns:minmax(0,1fr)}
  .nala-w .topbar__in{font-size:.66rem}
  .nala-w .why__item{grid-template-columns:minmax(0,1fr);gap:.35rem}
  .nala-w .why__n{min-width:0}
  .nala-w .footer__bottom{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   CHAPTER BRIDGES — soften the seam where a deep chapter meets
   the light page, so no edge reads as a "section boundary".
   ============================================================ */
.nala-w .bridge{
  position:absolute;left:0;right:0;height:clamp(90px,11vh,170px);
  z-index:1;pointer-events:none;
}
.nala-w .bridge--in{top:0;background:linear-gradient(180deg,var(--paper),transparent)}
.nala-w .bridge--out{bottom:0;background:linear-gradient(0deg,var(--paper),transparent)}
.nala-w .reviews .bridge{opacity:.28}
.nala-w .cta .bridge{opacity:.24;z-index:2}
.nala-w .reviews .wrap, .nala-w .cta .wrap{z-index:3}

/* ---------- Consultation tile inside the services grid ---------- */
.nala-w .card--cta{
  background:linear-gradient(155deg,var(--sand),var(--paper-2));
  border:1px solid rgba(172,121,68,.28);
  box-shadow:none;
}
.nala-w .card--cta:hover{transform:translateY(-8px);box-shadow:var(--shadow-card)}
.nala-w .card--cta .card__body{justify-content:center;gap:1rem;padding:clamp(1.6rem,2.6vw,2.2rem)}
.nala-w .card--cta h3{font-size:clamp(1.14rem,1.6vw,1.4rem);line-height:1.32}
.nala-w .card--cta p{flex:0 1 auto}
.nala-w .card__cta{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.4rem}
.nala-w .card__cta .btn{flex:1 1 auto;min-width:132px}

/* ---------- Mobile rhythm + touch ergonomics ---------- */
@media (max-width:900px){
  :root{--chapter:clamp(3.4rem,7vh,5rem)}

  /* No headline, row or paragraph may clip or push the page sideways. The same
     guard ships in the Elementor build, so both render identically. */
  /* overflow-wrap is the safety net against a long word pushing the page
     sideways. hyphens:auto is NOT — it breaks ordinary words mid-syllable
     ("pop-ular") in the middle of a heading, which reads as a typo. */
  .nala-w h1, .nala-w h2, .nala-w h3, .nala-w .acc__q, .nala-w .why__t, .nala-w .marquee__item, .nala-w .hero__title{
    overflow-wrap:anywhere;word-break:normal;hyphens:manual;max-width:100%;
  }
  .nala-w p, .nala-w li, .nala-w a, .nala-w span{overflow-wrap:anywhere;max-width:100%}
  .nala-w .info__row a, .nala-w .footer__links a{overflow-wrap:break-word}
  /* the sticky Call/Book bar already owns the bottom-right corner */
  .nala-w .totop{display:none}
  .nala-w .hero__actions .btn{padding-inline:1rem;font-size:.7rem;letter-spacing:.14em;white-space:nowrap}
  .nala-w .about__grid, .nala-w .care__grid{gap:2rem}
  .nala-w .care__grid > .care__media{margin-bottom:.4rem}
  .nala-w .about__frame{aspect-ratio:16/11}
  .nala-w .about__tape{
    right:auto;left:clamp(1rem,2vw,1.6rem);
    max-width:calc(100% - 2.4rem);
    font-size:.56rem;letter-spacing:.16em;line-height:1.5;
  }
  .nala-w .why__head{gap:1.1rem}
  .nala-w .faq__aside{gap:.9rem}
  .nala-w .reviews{padding-block:clamp(4rem,9vh,7rem)}
  .nala-w .cta{padding-block:clamp(4rem,10vh,7rem)}
  .nala-w .footer{padding-block:clamp(2.6rem,6vw,4rem) 0}
  .nala-w .bridge{height:clamp(60px,8vh,110px)}
}
@media (max-width:400px){
  .nala-w .hero__actions .btn{font-size:.65rem;letter-spacing:.1em;padding-inline:.7rem}
}

/* ---------- Touch targets: 44px minimum on touch devices ---------- */
@media (hover:none),(max-width:900px){
  .nala-w .tlink{min-height:44px;padding-block:.75rem;align-items:center}
  .nala-w .card__body .tlink{margin-top:0;margin-bottom:-.5rem}
  .nala-w .chip{min-height:44px}
  /* The contact links, the CTA phone and the logo are all tappable and all sit
     below 44px at their natural text height. The second rule here used to undo
     the first, which is why the phone and email were 36px. */
  .nala-w .info__row a, .nala-w .form__note a, .nala-w .faq__aside .tlink{min-height:44px;display:inline-flex;align-items:center}
  .nala-w .cta__phone{min-height:44px;display:inline-flex;align-items:center}
  .nala-w .brand{min-height:44px;display:flex;align-items:center}
}

/* ==========================================================================
   4. ELEMENTOR INTEGRATION
   ========================================================================== */

/* Widgets are full-bleed blocks; Elementor's column padding must not inset them. */
.elementor-widget-nala-header,.elementor-widget-nala-hero,.elementor-widget-nala-marquee,
.elementor-widget-nala-about,.elementor-widget-nala-care,.elementor-widget-nala-why,
.elementor-widget-nala-services,.elementor-widget-nala-reviews,.elementor-widget-nala-faq,
.elementor-widget-nala-cta,.elementor-widget-nala-contact,.elementor-widget-nala-footer{
  width:100%;
}
.nala-w{display:block;width:100%;position:relative}

/* A chapter paints its own background as a gradient that starts in the previous
   chapter's tone and ends in the next one's. That is what keeps the scroll
   reading as one continuous sheet instead of stacked bands — and unlike the
   scroll-driven body tint it used to use, it cannot be knocked out by a theme. */
.nala-w .nala-chapter{
  background:linear-gradient(180deg,var(--bg-from,var(--paper)) 0%,var(--bg-to,var(--paper)) 100%);
}

/* Theme and WooCommerce stylesheets both push `img{height:auto}` after ours,
   which quietly breaks object-fit and leaves a gap under the picture. Any image
   that must fill a frame overrides it here; the Style-tab fit controls do the
   same on a per-widget basis. */
.nala-w .card__media img,
.nala-w .about__frame img,
.nala-w .care__media img,
.nala-w .hero__media img,
.nala-w .cta__media img{
  height:100%!important;
  width:100%!important;
  max-width:none!important;
  object-fit:cover;
}
/* The hero and CTA keep extra height so the parallax has somewhere to travel;
   the overflow lives on the frame, never on the <img>. */
.nala-w .hero__media img{height:112%!important}
.nala-w .cta__media img{height:118%!important}

/* Elementor wraps widgets in containers with overflow/transform, which breaks
   position:sticky. Ours are re-parented to <body> by the JS where needed; this
   keeps the rest sane. */
.elementor-widget-nala-header{position:relative;z-index:var(--z-header)}
.nala-w .header{position:fixed}

/* Logos: the mark ships transparent, so it can be tinted per context. */
.nala-w .brand img,.nala-w .footer__brand img{width:100%;height:auto;max-width:100%}

/* ==========================================================================
   5. EDITOR PREVIEW
   Inside the editor nothing is pinned, nothing is fixed and nothing is hidden,
   so every section is flat, visible and clickable. Animations are a live-page
   feature only — preview them in a new tab.
   ========================================================================== */
.nala-editor-preview .header{position:relative!important;top:auto!important}
.nala-editor-preview .hero{min-height:520px!important;height:auto!important}
.nala-editor-preview .about__media,
.nala-editor-preview .faq__aside{position:static!important;top:auto!important}
.nala-editor-preview .loader,
.nala-editor-preview .cursor,
.nala-editor-preview .grain,
.nala-editor-preview .progress,
.nala-editor-preview .mmenu,
.nala-editor-preview .mbar,
.nala-editor-preview .totop{display:none!important}
.nala-editor-preview .marquee__track{transform:none!important}
.nala-editor-preview .reviews,
.nala-editor-preview .cta{padding-block:4rem!important}
.nala-editor-preview .why__t{opacity:1!important}
.nala-editor-preview .rv{opacity:1!important;transform:none!important}
.nala-editor-preview .hero h1 .w{opacity:1!important;filter:none!important;transform:none!important}
/* The accordion is height-driven by JS; show the first panel so the copy is
   findable and editable in the panel preview. */
.nala-editor-preview .acc__panel{height:auto!important;opacity:.55}

/* ==========================================================================
   6. NO-JS / REDUCED MOTION — content is never left hidden
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .nala-w .rv,.nala-w .hero h1 .w,.nala-w .why__t{opacity:1!important;transform:none!important;filter:none!important}
  .nala-w .marquee__track{transform:none!important}
}

/* ==========================================================================
   7. MOBILE HARDENING
   A phone is not a narrow desktop. These rules exist to make three specific
   failures impossible: text that clips, images that clip, and controls that
   cannot be tapped.
   ========================================================================== */
@media (max-width:900px){
  /* No headline may ever be cut off or push the page sideways. */
  /* overflow-wrap is the safety net against a long word pushing the page
     sideways. hyphens:auto is NOT — it breaks ordinary words mid-syllable
     ("pop-ular") in the middle of a heading, which reads as a typo. */
  .nala-w h1,.nala-w h2,.nala-w h3,.nala-w .acc__q,.nala-w .why__t,.nala-w .marquee__item{
    overflow-wrap:anywhere;
    word-break:normal;
    hyphens:manual;
    max-width:100%;
  }
  .nala-w p,.nala-w li,.nala-w a,.nala-w span{overflow-wrap:anywhere;max-width:100%}
  /* Long unbroken strings (emails, addresses) must wrap rather than overflow. */
  .nala-w .info__row a,.nala-w .footer__links a{overflow-wrap:break-word}

  /* Nothing inside a widget may exceed the viewport. */
  .nala-w img,.nala-w video,.nala-w figure,.nala-w table{max-width:100%}
  .nala-w .wrap{max-width:100%}

  /* Grids collapse to one readable column. */
  .nala-w .cards{grid-template-columns:minmax(0,1fr)}
  .nala-w .about__grid,.nala-w .care__grid,.nala-w .why__head,
  .nala-w .reviews__grid,.nala-w .faq__grid,.nala-w .contact__grid,
  .nala-w .footer__grid{grid-template-columns:minmax(0,1fr)}

  /* Anything sticky becomes static — sticky inside a scrolled phone viewport
     is where sections used to "disappear". */
  .nala-w .about__media,.nala-w .faq__aside{position:static}

  /* 44px minimum for every tappable thing. */
  .nala-w .btn,.nala-w .chip,.nala-w .acc__btn,.nala-w .tlink,
  .nala-w .burger,.nala-w .mmenu__close{min-height:44px}
}

/* There is no hover on a touch screen. Anything that only appears on :hover is
   invisible on a phone, and a hover effect triggered by a tap gets stuck on. */
@media (hover:none){
  .nala-w .card:hover{transform:none;box-shadow:var(--shadow-card)}
  .nala-w .card:hover .card__media img{transform:scale(1.02)}
  .nala-w .tlink::after{transform:scaleX(1)}
  .nala-w .btn{transform:none!important}
  .nala-w .cursor{display:none!important}
}