/* ============================================================
   ALIGNED — shared styles for sub-pages (V6 earthy palette).
   index.html stays self-contained; every other page loads this
   plus a small page-specific <style> block.
   ============================================================ */
:root{
  --white:#FFFFFF;
  --cloud:#F2F2F2;
  --cloud-deep:#E4E4E2;
  --marmalade:#EABF7F;
  --marmalade-deep:#D9A75F;
  --cocoa:#A68E74;
  --cocoa-deep:#7A6248;
  --slate:#73726D;
  --ink:#1B1D1E;

  --ivory:#FFFFFF;
  --ivory-deep:var(--cloud);
  --grey:var(--ink);
  --grey-soft:var(--slate);
  --gold:var(--marmalade);
  --gold-deep:var(--cocoa-deep);

  --r-card:22px;
  --r-media:24px;
  --r-btn:999px;

  --shadow-sm:0 4px 14px -8px rgba(27,29,30,.24);
  --shadow-md:0 22px 48px -26px rgba(27,29,30,.3);
  --shadow-lg:0 40px 90px -40px rgba(27,29,30,.4);

  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:68px;
  --maxw:1320px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  background:var(--ivory);
  color:var(--grey);
  font-size:clamp(1rem,.96rem + .25vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* faint paper texture */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

h1,h2,h3,h4{font-family:"Hanken Grotesk",sans-serif;color:var(--grey);line-height:1.04;
  letter-spacing:-.02em;margin:0;font-weight:700}
p{margin:0}
a{color:inherit;text-decoration:none}
/* height:auto matters: several <img> carry width/height attributes (correctly,
   to reserve space and avoid layout shift). Where CSS then sets only a width,
   the attribute's height stays in force and the image is stretched to fit —
   which is what squashed the Google Reviews logo into a 170x282 box against
   its true 751x282. Rules that deliberately set a height (the object-fit:cover
   media) are class-based and still win over this. */
img{max-width:100%;height:auto;display:block}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem)}
section{position:relative;z-index:2}

.h-section{font-size:clamp(2rem,1.4rem + 3vw,3.4rem);font-weight:800}
.lede{font-size:clamp(1.08rem,1rem + .5vw,1.3rem);color:var(--grey);max-width:60ch;line-height:1.6}

/* ---------- Buttons (flat translucent glass) ---------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:700;font-size:1rem;
  padding:.95rem 1.7rem;border-radius:var(--r-btn);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
  white-space:nowrap;will-change:transform;
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
}
.btn i{font-size:1.15em;position:relative;z-index:2}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{color:var(--ink);
  background:rgba(234,191,127,.78);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 24px -16px rgba(27,29,30,.45)}
.btn-primary:hover{transform:translateY(-1px);background:rgba(234,191,127,.95)}
.btn-on-dark{color:var(--ink);
  background:rgba(242,242,242,.82);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 24px -16px rgba(0,0,0,.4)}
.btn-on-dark:hover{transform:translateY(-1px);background:rgba(255,255,255,.96)}
.btn-ghost{color:var(--ink);
  background:rgba(27,29,30,.04);border:1px solid rgba(27,29,30,.18)}
.btn-ghost:hover{transform:translateY(-1px);background:rgba(27,29,30,.09)}
.btn-ghost-light{color:var(--ivory);
  background:rgba(242,242,242,.1);border:1px solid rgba(242,242,242,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.btn-ghost-light:hover{transform:translateY(-1px);background:rgba(242,242,242,.2)}
.btn-whatsapp{color:#fff;
  background:#25D366;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px -16px rgba(27,29,30,.45)}
.btn-whatsapp:hover{transform:translateY(-1px);background:#25D366}
@media (prefers-reduced-transparency:reduce){
  .btn{backdrop-filter:none;-webkit-backdrop-filter:none}
  .btn-primary{background:var(--marmalade)}
  .btn-on-dark{background:var(--cloud)}
  .btn-ghost{background:rgba(27,29,30,.06)}
  .btn-ghost-light{background:rgba(242,242,242,.2)}
}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

.text-link{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;color:var(--gold-deep)}
.text-link i{transition:transform .25s var(--ease)}
.text-link:hover i{transform:translateX(4px)}

/* ---------- Navigation (floating slate glass pills) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:.8rem 0;background:transparent}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem)}
.brand,.nav__links,.nav__toggle,.nav__lang{
  background:rgba(74,73,70,.7);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 30px -20px rgba(27,29,30,.6);
  transition:background .3s var(--ease);
}
.nav.scrolled .brand,.nav.scrolled .nav__links,.nav.scrolled .nav__toggle,.nav.scrolled .nav__lang{
  background:rgba(62,61,59,.88)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.3rem;
  letter-spacing:-.02em;color:var(--ivory);padding:.55rem 1.1rem;border-radius:var(--r-btn)}
.brand__logo{height:26px;width:auto;display:block}
.footer .brand{background:none;border:none;box-shadow:none;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.footer .brand__logo{height:34px}
.nav__links{display:flex;align-items:center;gap:.15rem;padding:.3rem;border-radius:var(--r-btn)}
.nav__links a{display:inline-block;padding:.55rem 1.15rem;border-radius:var(--r-btn);
  font-size:.93rem;font-weight:600;color:rgba(255,255,255,.82);
  transition:color .2s,background .25s var(--ease)}
.nav__links a:hover{color:#fff;background:rgba(242,242,242,.16)}
.nav__links a.active{color:#fff;background:rgba(242,242,242,.18)}
.nav__cta{display:flex;align-items:center;gap:.75rem}
.nav .btn{padding:.68rem 1.35rem;font-size:.92rem}
.nav__toggle{display:none;width:46px;height:46px;border-radius:var(--r-btn);color:var(--ivory);
  align-items:center;justify-content:center;font-size:1.4rem}
.nav__lang{display:inline-flex;align-items:center;gap:.45rem;padding:.66rem 1.05rem;
  border-radius:var(--r-btn);color:rgba(255,255,255,.85);
  font-size:.88rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.nav__lang i{font-size:1.1rem}
.nav .nav__lang:hover{color:#fff;background:rgba(42,41,40,.95)}
@media (max-width:1240px){
  .nav__links a{padding:.5rem .85rem;font-size:.88rem}
  .nav .btn{padding:.6rem 1.1rem;font-size:.88rem}
  .brand__logo{height:23px}
}
@media (max-width:1020px){
  .nav__links{position:fixed;left:1rem;right:1rem;top:calc(var(--nav-h) + .4rem);
    flex-direction:column;align-items:stretch;
    gap:.2rem;background:rgba(38,38,37,.94);padding:.6rem;border-radius:24px;
    transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .35s var(--ease),opacity .3s var(--ease),visibility .35s;
    box-shadow:0 30px 50px -25px rgba(0,0,0,.6);max-height:calc(100dvh - var(--nav-h) - env(safe-area-inset-top) - 1.5rem);overflow-y:auto;overscroll-behavior:contain}
  .nav__links.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;transition-property:transform,opacity}
  .nav__links a{padding:.95rem 1.1rem;border-radius:16px;font-size:1.02rem}
  .nav__toggle{display:flex}
}
@media (max-width:880px){.nav__cta .btn{display:none}}
@media (max-width:600px){.nav__lang{padding:.55rem .8rem;font-size:.8rem}}

/* ---------- Sub-page hero (photo + ink scrim, no video) ---------- */
/* dvh, not vh. On iOS Safari vh resolves against the LARGE viewport, the one
   with the address bar hidden, so on first paint the hero is taller than the
   screen actually is and the copy at its foot starts below the fold, then
   jumps up as the bar retracts. index.html has used dvh since it was built;
   these five did not. */
.subhero{position:relative;min-height:64dvh;display:flex;align-items:flex-end;
  padding:calc(var(--nav-h) + 4rem) 0 clamp(2.5rem,6vw,4.5rem);overflow:hidden;
  background:var(--ink);color:var(--cloud)}
.subhero__media{position:absolute;inset:0;z-index:0}
.subhero__media img{width:100%;height:100%;object-fit:cover}
/* The team shot is 3:2, so a wide box loses the frame top and bottom. Centred
   put the back row's heads under the nav; 30% clears them without leaving a
   band of empty wall up top, and spends the loss on the uniforms. */
.subhero__media img[src*="about-team"]{object-position:center 30%}
/* Below ~880px the subhero box turns portrait while these photos stay
   landscape, so `cover` keeps only a ~30-40% window of the frame and a centred
   crop lands on the wrong part. The scrim is darkest at the left (where the
   copy sits) and clears to the right, so each subject is held right of centre.
   The desktop (landscape box) crop is fine and is left alone. */
@media (max-width:880px){
  /* dog 56-84%, doctor 63-93%: centred kept the empty corridor instead */
  .subhero__media img[src*="pet-chiro-hero"]{object-position:80% center}
  /* Six staff in two rows, faces spanning 28-75% and symmetric about centre.
     A centred crop keeps the middle pair whole and half of each flanking
     face — the most legible window the narrow box allows. Held slightly
     right of centre so the scrim's dark left edge doesn't swallow a face. */
  .subhero__media img[src*="about-team"]{object-position:58% center}
}
.subhero__scrim{display:none}
/* Team-portrait variant: the side-weighted scrim above was built for photos
   with an empty left corridor, and it buries the two staff on the left of the
   group shot. Here the faces sit in the upper two-thirds and the copy sits at
   the bottom, so the darkness goes bottom-only and the faces stay lit. */
/* Six people in two rows need vertical room the standard 64vh box doesn't have.
   82vh shows ~77% of the frame instead of ~60%, which is what it takes to get
   both rows of faces in above the copy. Desktop only — below 880px the box is
   already portrait and taller than the photo needs. */
@media (min-width:881px){
  .subhero--portrait{min-height:82dvh}
}
.subhero--portrait .subhero__scrim{display:none}
.subhero .container{position:relative;z-index:2}
.subhero h1{color:var(--white);font-size:clamp(2.4rem,1.8rem + 4.2vw,4.6rem);font-weight:800;
  letter-spacing:-.03em;max-width:17ch;margin:.9rem 0 0}
.subhero h1 .alt{color:var(--marmalade);font-style:italic;font-weight:700}
.subhero__sub{color:rgba(255,255,255,.87);max-width:52ch;margin:1.3rem 0 0;
  font-size:clamp(1.02rem,1rem + .4vw,1.22rem);line-height:1.55}
.subhero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.9rem}
.crumbs{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;
  color:rgba(255,255,255,.65);margin-bottom:1.1rem}
.crumbs a:hover{color:#fff}
.crumbs i{font-size:.75rem}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
.no-js .reveal{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

@media (max-width:1020px){
  .no-js .nav{position:relative;background:var(--ink)}
  .no-js .nav__inner{flex-wrap:wrap}
  .no-js .nav__links{position:static;order:3;flex:1 0 100%;opacity:1;visibility:visible;
    pointer-events:auto;transform:none}
  .no-js .nav__toggle{display:none}
}


/* ---------- FAQ accordion ---------- */
.faq{max-width:840px;margin:0 auto}
.faq details{background:var(--white);border:1px solid var(--cloud-deep);border-radius:18px;
  margin-bottom:.85rem;overflow:hidden;transition:box-shadow .3s var(--ease)}
.faq details[open]{box-shadow:var(--shadow-sm)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;
  padding:1.15rem 1.45rem;font-weight:700;font-size:1.02rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{color:var(--gold-deep);font-size:1.15rem;flex:0 0 auto;
  transition:transform .35s var(--ease)}
.faq details[open] summary i{transform:rotate(45deg)}
.faq__a{padding:0 1.45rem 1.35rem;color:var(--slate);font-size:.97rem;line-height:1.62;max-width:62ch}

/* ---------- Category / filter chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1.15rem;border-radius:999px;
  font-size:.9rem;font-weight:700;color:var(--gold-deep);cursor:pointer;
  background:var(--white);border:1px solid var(--cloud-deep);
  transition:background .25s var(--ease),color .25s,border-color .25s,transform .25s var(--ease)}
.chip:hover{transform:translateY(-1px);border-color:rgba(234,191,127,.5)}
.chip.active{background:var(--ink);color:var(--cloud);border-color:var(--ink)}

/* ---------- Dark full-bleed CTA band (shared final section) ---------- */
.final{position:relative;background:#F7EFE2;color:var(--grey);padding:clamp(5rem,11vw,8rem) 0;
  text-align:center;overflow:hidden}
.final__bg{position:absolute;inset:0;z-index:0}
.final__bg img{width:100%;height:100%;object-fit:cover;opacity:.35}
.final__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(247,239,226,.92),rgba(247,239,226,.86)),
    radial-gradient(700px 360px at 50% -10%,rgba(255,255,255,.55),transparent 60%)}
.final .container{position:relative;z-index:2}
.final h2{color:var(--grey);font-size:clamp(2.1rem,1.4rem + 3.6vw,3.6rem);max-width:20ch;margin:0 auto;line-height:1.06}
.final h2 em{color:var(--gold-deep);font-style:italic}
.final p{color:var(--grey);margin:1.4rem auto 0;max-width:48ch;font-size:1.12rem}
.final__actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.4rem}

/* ---------- Footer ---------- */
.footer{background:var(--grey);color:rgba(242,242,242,.78);padding:clamp(3.5rem,7vw,5rem) 0 2rem}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:2.4rem}
.footer .brand{color:var(--ivory);margin-bottom:1rem}
.footer__about{max-width:34ch;font-size:.94rem;line-height:1.6}
.footer h4{color:var(--ivory);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.1rem}
.footer ul li{margin-bottom:.7rem}
.footer ul a{font-size:.94rem;transition:color .2s}.footer ul a:hover{color:var(--ivory)}
.footer__contact div{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.9rem;font-size:.94rem}
.footer__contact i{color:var(--cocoa);font-size:1.2rem;margin-top:1px;flex:0 0 auto}
.footer__social{display:flex;gap:.7rem;margin-top:1.2rem}
.footer__social a{width:42px;height:42px;border-radius:999px;display:grid;place-items:center;
  background:rgba(242,242,242,.1);color:var(--ivory);font-size:1.2rem;transition:background .25s,transform .25s}
.footer__social a:hover{background:var(--marmalade);color:var(--ink);transform:translateY(-2px)}
.footer__bar{border-top:1px solid rgba(242,242,242,.14);margin-top:2.6rem;padding-top:1.6rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.85rem;color:rgba(242,242,242,.6)}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}

/* ---------- Sticky mobile book button ---------- */
.mobile-book{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:90;display:none;
  transform:translateY(140%);transition:transform .4s var(--ease)}
.mobile-book.show{transform:translateY(0)}
.mobile-book .btn{width:100%;padding:1.05rem;box-shadow:var(--shadow-lg)}
@media (max-width:880px){.mobile-book{display:block}}

/* skip link + focus */
.skip{position:absolute;left:-999px;top:.5rem;z-index:200;background:var(--ink);color:var(--cloud);
  padding:.7rem 1.2rem;border-radius:8px}
.skip:focus{left:.5rem}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

/* =====================================================================
   V6 AUDIT COMPONENTS — shared across every sub-page.
   These three blocks are the audit's site-wide asks made reusable:
     .pillars   echo of the four Aligned System pillars (homepage defines
                them; every other page repeats them so the differentiation
                is not a one-page claim)
     .promise   the Aligned Honesty Promise — risk reversal pulled out of
                the FAQ and given its own highlighted box
     .transband transitional CTA for the ~95% who will not book on visit
                one: the free 5-Minute Posture Self-Check, over WhatsApp
   ===================================================================== */

/* ---------- Four-pillar echo strip ---------- */
.pillars{padding:clamp(3.4rem,7vw,5.5rem) 0;background:var(--cloud);
  border-top:1px solid var(--cloud-deep);border-bottom:1px solid var(--cloud-deep)}
.pillars--plain{background:var(--white)}
.pillars__head{max-width:60ch;margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.pillars__k{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--cocoa-deep);margin:0 0 .8rem;display:flex;align-items:center;gap:.7rem}
.pillars__k::before{content:"";width:34px;height:1px;background:var(--marmalade);flex:none}
.pillars__head p{margin-top:1rem;color:var(--slate);max-width:58ch}
.pillars__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,2vw,1.3rem)}
.pcard{background:var(--white);border:1px solid var(--cloud-deep);border-radius:var(--r-card);
  padding:clamp(1.2rem,2.2vw,1.6rem);box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pillars--plain .pcard{background:var(--cloud)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.pcard--lead{border-color:rgba(234,191,127,.75)}
.pcard__icn{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:rgba(234,191,127,.18);color:var(--cocoa-deep);font-size:1.35rem;margin-bottom:.85rem}
.pcard--lead .pcard__icn{background:var(--marmalade);color:var(--ink)}
.pcard h3{font-size:1.05rem;margin-bottom:.4rem}
.pcard p{font-size:.9rem;color:var(--slate);line-height:1.5;margin:0}
.pillars__foot{margin-top:1.6rem;font-size:.95rem;font-weight:700;font-style:italic;color:var(--cocoa-deep)}
@media (max-width:1020px){.pillars__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pillars__grid{grid-template-columns:1fr}}

/* ---------- Aligned Honesty Promise (risk reversal) ---------- */
.promise{background:var(--ink);color:var(--cloud);border-radius:var(--r-card);
  padding:clamp(1.7rem,4vw,2.6rem);display:grid;grid-template-columns:auto 1fr;
  gap:clamp(1.2rem,3vw,2rem);align-items:start;box-shadow:var(--shadow-md)}
.promise__icn{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;
  background:var(--marmalade);color:var(--ink);font-size:1.7rem;flex:none}
.promise h3{color:var(--white);font-size:clamp(1.2rem,1.05rem + .6vw,1.55rem);margin-bottom:.8rem}
.promise p{color:rgba(242,242,242,.84);line-height:1.6;max-width:64ch}
.promise ul{display:grid;gap:.55rem;margin-top:1.1rem}
.promise li{display:flex;gap:.65rem;align-items:flex-start;font-size:.95rem;
  color:rgba(242,242,242,.84);line-height:1.5}
.promise li i{color:var(--marmalade);margin-top:3px;flex:0 0 auto}
.promise__sig{margin-top:1.3rem;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--marmalade)}
@media (max-width:620px){.promise{grid-template-columns:1fr}}

/* ---------- Transitional CTA band (above the footer, every page) ---------- */
.transband{background:var(--cloud);border-top:1px solid var(--cloud-deep);
  padding:clamp(2.6rem,5vw,4rem) 0}
.transband__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.4rem 2.4rem;background:var(--white);border:1px solid var(--cloud-deep);
  border-radius:var(--r-card);padding:clamp(1.5rem,3.5vw,2.2rem);box-shadow:var(--shadow-sm)}
.transband__copy{flex:1 1 34ch}
.transband__k{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--cocoa-deep);margin:0 0 .5rem}
.transband h2{font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem);margin-bottom:.6rem}
.transband p{color:var(--slate);font-size:.95rem;line-height:1.55;max-width:56ch}
.transband__actions{display:flex;flex-wrap:wrap;gap:.8rem}
.pillars h2 em,.transband h2 em{color:var(--cocoa-deep);font-style:italic}

/* =====================================================================
   CONDITION LANDING PAGES (slipped-disc / sciatica / office-back-pain)
   Decision-stage pages: someone searching "sciatica treatment KL" lands
   here, recognises themselves in the symptom list, and books. Shared
   styles live here so the three pages stay one design, not three.
   ===================================================================== */
.sec{padding:clamp(4.5rem,9vw,7.5rem) 0}
.sec--cloud{background:var(--cloud)}
.sec__head{max-width:62ch;margin-bottom:clamp(2.2rem,4.5vw,3.2rem)}
.sec__head .h-section{margin-top:1rem}
.sec__head p{margin-top:1.1rem}
.sec__head--center{text-align:center;margin-left:auto;margin-right:auto}
.sec__k{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--cocoa-deep);margin:0}

/* condition hero */
.chero{position:relative;min-height:78dvh;display:flex;align-items:flex-end;background:var(--ink);
  padding:calc(var(--nav-h) + 3rem) 0 clamp(2.5rem,6vw,4rem);overflow:hidden}
.chero__media{position:absolute;inset:0;z-index:0}
.chero__media img{width:100%;height:100%;object-fit:cover}
.chero__scrim{display:none}
.chero .container{position:relative;z-index:2}
.chero h1{color:var(--white);font-size:clamp(2.2rem,1.7rem + 3.6vw,4.1rem);font-weight:800;
  max-width:18ch;margin:.9rem 0 0;letter-spacing:-.03em}
.chero h1 .alt{color:var(--marmalade);font-style:italic;font-weight:700}
.chero__sub{color:rgba(255,255,255,.87);max-width:56ch;margin:1.2rem 0 0;
  font-size:clamp(1rem,.98rem + .35vw,1.15rem);line-height:1.6}
.chero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
/* Figures and the low-commitment door. Both live inside .hero-band now (see
   below); .subhero__* is here rather than up with the rest of the sub-page
   hero because the three are one component wearing three prefixes. */
.chero__meta,.subhero__meta{display:flex;flex-wrap:wrap;gap:1.1rem 2.2rem;margin-top:2rem;padding-top:1.3rem;
  border-top:1px solid rgba(255,255,255,.2);max-width:620px;color:var(--white)}
.chero__meta b,.subhero__meta b{display:block;font-size:1.35rem;font-weight:800;line-height:1}
.chero__meta b span,.subhero__meta b span{color:var(--marmalade);font-size:.8rem;letter-spacing:.06em;margin-right:.25rem}
.chero__meta span,.subhero__meta span{font-size:.82rem;color:rgba(255,255,255,.62)}
.chero__trans,.subhero__trans{margin:1.1rem 0 0;font-size:.9rem;color:rgba(255,255,255,.72)}
.chero__trans a,.subhero__trans a{font-weight:700;color:var(--marmalade);display:inline-flex;align-items:center;gap:.4rem}
.chero__trans a i,.subhero__trans a i{transition:transform .25s var(--ease)}
.chero__trans a:hover i,.subhero__trans a:hover i{transform:translateX(4px)}

/* "does this sound like you?" — the self-recognition moment */
.symp{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.symp li{display:flex;gap:.8rem;align-items:flex-start;background:var(--white);
  border:1px solid var(--cloud-deep);border-radius:16px;padding:1.05rem 1.15rem;
  font-size:.95rem;line-height:1.5;box-shadow:var(--shadow-sm)}
.symp li i{color:var(--cocoa-deep);font-size:1.15rem;margin-top:1px;flex:0 0 auto}
.symp__foot{margin-top:1.6rem;font-size:.98rem;color:var(--slate)}
.symp__foot a{font-weight:700;color:var(--gold-deep)}
@media (max-width:900px){.symp{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.symp{grid-template-columns:1fr}}

/* plain-language mechanism block */
.mech{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.mech__body{display:grid;gap:1.05rem;max-width:58ch}
.mech__media{border-radius:var(--r-media);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3}
.mech__media img{width:100%;height:100%;object-fit:cover}
.mech__note{margin-top:1.4rem;padding:1rem 1.15rem;border-left:3px solid var(--marmalade);
  background:rgba(234,191,127,.14);border-radius:0 12px 12px 0;font-size:.94rem;line-height:1.55}
@media (max-width:880px){.mech{grid-template-columns:1fr}}

/* what happens at your assessment — numbered path */
.path{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:pstep}
.pathstep{background:var(--white);border:1px solid var(--cloud-deep);border-radius:var(--r-card);
  padding:clamp(1.2rem,2.2vw,1.6rem);box-shadow:var(--shadow-sm)}
.pathstep__n{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--marmalade);color:var(--ink);font-weight:800;margin-bottom:.85rem}
.pathstep h3{font-size:1.05rem;margin-bottom:.4rem}
.pathstep p{font-size:.9rem;color:var(--slate);line-height:1.5}
@media (max-width:900px){.path{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.path{grid-template-columns:1fr}}

/* related-condition footer links */
.related{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.related a{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.15rem;border-radius:999px;
  background:var(--white);border:1px solid var(--cloud-deep);font-weight:700;font-size:.9rem;
  transition:background .25s,transform .25s}
.related a:hover{background:var(--marmalade);transform:translateY(-2px)}

/* Long offer-bearing CTAs ("Book — RM50 off this August") are wider than a
   320px viewport, and .btn is nowrap by design. Below 420px let them wrap
   onto two lines instead of setting the layout's min-content width — a
   pricing card that cannot shrink pushes the whole page sideways. */
@media (max-width:420px){
  /* .btn is an inline-flex row, so white-space alone is not enough — the
     icon and label are flex items and need flex-wrap to break onto a
     second line. */
  .btn{white-space:normal;text-align:center;line-height:1.25;flex-wrap:wrap}
}

/* ---------- condition guides: shared components ---------- */
/* Lifted out of the page-local <style> blocks on the hand-written condition
   pages so the thirteen generated guides do not each repeat forty lines.
   slipped-disc/sciatica/office-back-pain still carry their own copies; those
   are identical and harmless, and are left alone deliberately. */
.redflag{background:#FFF4E8;border:1px solid rgba(217,167,95,.6);border-radius:var(--r-card);
  padding:clamp(1.4rem,3vw,2rem);display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start}
.redflag__icn{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:#C0392B;color:#fff;font-size:1.5rem;flex:none}
.redflag h3{font-size:1.15rem;margin-bottom:.6rem}
.redflag ul{display:grid;gap:.5rem;margin:.9rem 0 0}
.redflag li{display:flex;gap:.6rem;align-items:flex-start;font-size:.94rem;line-height:1.5}
.redflag li i{color:#C0392B;margin-top:3px;flex:0 0 auto}
.redflag p{line-height:1.6}
@media (max-width:620px){.redflag{grid-template-columns:1fr}}

.causes{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.cause{background:var(--white);border:1px solid var(--cloud-deep);border-radius:var(--r-card);
  padding:clamp(1.2rem,2.2vw,1.6rem);box-shadow:var(--shadow-sm)}
.cause summary{display:flex;align-items:center;gap:.75rem;cursor:pointer;font-weight:700;list-style:none}
.cause summary::-webkit-details-marker{display:none}
.cause__icn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(234,191,127,.18);color:var(--cocoa-deep);font-size:1.3rem;flex:none}
.cause p{font-size:.92rem;color:var(--slate);line-height:1.55;margin-top:.9rem}
@media (max-width:900px){.causes{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.causes{grid-template-columns:1fr}}

/* .keyfacts — the answer block under the hero. One definition sentence and
   three question-shaped answers, each written to survive being quoted on its
   own. Sits high on the page because that is where both a person in pain and
   a crawler look first. */
.keyfacts{background:var(--white);border:1px solid var(--cloud-deep);border-radius:var(--r-card);
  padding:clamp(1.5rem,3.2vw,2.4rem);box-shadow:var(--shadow-sm)}
.keyfacts__k{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.9rem}
.keyfacts__def{font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);line-height:1.62;color:var(--ink);
  max-width:74ch;padding-bottom:clamp(1.1rem,2.4vw,1.5rem);border-bottom:1px solid var(--cloud-deep)}
.kf__rows{display:grid;gap:clamp(1rem,2.2vw,1.4rem);margin-top:clamp(1.1rem,2.4vw,1.5rem)}
.kf__row h3{font-size:1rem;margin-bottom:.3rem;color:var(--ink)}
.kf__row p{font-size:.94rem;line-height:1.6;color:var(--slate);max-width:74ch}
@media (min-width:900px){.kf__rows{grid-template-columns:1fr 1fr;gap:1.4rem 2.2rem}
  .kf__row:first-child{grid-column:1/-1}}

/* V9 neck-pain pilot. Kept in the generator-owned CSS block so a rebuild
   cannot silently remove the information hierarchy improvements. */
.chero--v9{min-height:min(720px,82dvh)}
.chero--v9 .chero__sub{max-width:48ch}
.condition-jump{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--cloud-deep);backdrop-filter:blur(12px)}
.condition-jump .container{display:flex;gap:.55rem;overflow-x:auto;padding-top:.7rem;padding-bottom:.7rem;
  scrollbar-width:none;scroll-padding-inline:1.25rem}
.condition-jump .container::-webkit-scrollbar{display:none}
.condition-jump a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1rem;
  border:1px solid var(--cloud-deep);border-radius:999px;background:var(--white);font-weight:700;font-size:.9rem}
.condition-approach{padding:clamp(2.8rem,6vw,4.5rem) 0;background:var(--ink);color:var(--cloud)}
.condition-approach .container{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}
.condition-approach h2{color:var(--white);font-size:clamp(1.8rem,3vw,2.7rem)}
.condition-approach p{margin-top:.8rem;max-width:62ch;color:rgba(242,242,242,.75)}
.condition-approach .text-link{color:var(--marmalade);white-space:nowrap}
#symptoms,#assessment,#pricing,#faq{scroll-margin-top:76px}
@media(max-width:767px){
  .chero--v9{min-height:min(650px,78dvh)}
  .condition-jump{top:0}
  .condition-approach .container{grid-template-columns:1fr;align-items:start;gap:1.2rem}
  .condition-approach .text-link{white-space:normal}
}
@media(prefers-reduced-transparency:reduce){.condition-jump{backdrop-filter:none}}
.path--compact{grid-template-columns:repeat(3,1fr)}
@media(max-width:800px){.path--compact{grid-template-columns:1fr}}

/* Final cascade for V9 detail-polish hero and mobile dock rules. */
.subhero,.chero{background:var(--cloud);color:var(--ink)}
.subhero h1,.chero h1{color:var(--ink)}
.subhero h1 .alt,.chero h1 .alt{color:var(--cocoa-deep)}
.subhero__sub,.chero__sub{color:var(--ink)}
.crumbs{color:var(--cocoa-deep)}
.crumbs a:hover{color:var(--ink)}
.chero__meta span,.subhero__meta span,.chero__trans,.subhero__trans{color:var(--slate)}
.subhero__trans a,.chero__trans a{color:var(--cocoa-deep)}
.subhero__actions .btn-ghost-light,.chero__actions .btn-ghost-light{color:var(--ink);background:rgba(255,255,255,.56);border-color:rgba(27,29,30,.24)}
.mobile-book{bottom:max(12px,env(safe-area-inset-bottom));display:none;grid-template-columns:minmax(0,1fr) auto;gap:.7rem;align-items:stretch;opacity:0;visibility:hidden;pointer-events:none;transition:transform .25s var(--ease),opacity .2s ease,visibility .25s}
.mobile-book.show{opacity:1;visibility:visible;pointer-events:auto}
.mobile-book .btn{min-width:0;min-height:52px;padding:.8rem 1rem;white-space:normal;line-height:1.2}
.mobile-whatsapp{width:52px;min-height:52px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;border:1px solid rgba(255,255,255,.72);box-shadow:0 12px 28px -16px rgba(27,29,30,.55);font-size:1.5rem}
.mobile-whatsapp:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media(max-width:880px){
  .mobile-book{display:grid}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  html{overflow-x:clip}
  h1,h2,h3,p,a,li,summary{overflow-wrap:anywhere}
  .mech>*,.split>*{min-width:0;max-width:100%}
  .scrub--on .scrub__panel{max-width:calc(100vw - 5rem)}
}
@media(prefers-reduced-motion:reduce){.mobile-book{transition:none}}

/* Clear-photo heroes: local type backing replaces full-image scrims. */
.chero__scrim,.chero__scrim::after{display:none!important;background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.subhero .container,.chero .container{max-width:min(1180px,calc(100% - 3rem))}
.subhero h1,.chero h1,.subhero__sub,.chero__sub,.crumbs{text-shadow:0 1px 1px rgba(255,255,255,.92),0 3px 12px rgba(255,255,255,.72)}
.subhero h1,.chero h1,.subhero__sub,.chero__sub,.crumbs{width:fit-content;background:rgba(250,247,241,.88);box-shadow:.28em 0 rgba(250,247,241,.88),-.28em 0 rgba(250,247,241,.88);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.subhero:has(img[src*="pet-chiro-hero"]) .container{margin-left:max(1.5rem,calc((100% - 1180px)/2));margin-right:auto}
.subhero:has(img[src*="pet-chiro-hero"]) .subhero__media img{object-position:72% center}
.chero:has(img[src*="neck-pain"]) h1,.chero:has(img[src*="neck-pain"]) .chero__sub,.chero:has(img[src*="neck-pain"]) .crumbs{color:#fff;background:rgba(27,29,30,.76);box-shadow:.28em 0 rgba(27,29,30,.76),-.28em 0 rgba(27,29,30,.76);text-shadow:0 1px 1px rgba(0,0,0,.9),0 3px 12px rgba(0,0,0,.72)}
@media(max-width:880px){
  .subhero,.chero{display:block;min-height:0;padding:0;background:var(--cloud);overflow:visible}
  .subhero__media,.chero__media{position:relative;height:clamp(250px,68vw,430px)}
  .subhero__media img,.chero__media img{object-position:center center}
  .subhero:has(img[src*="pet-chiro-hero"]) .subhero__media img{object-position:72% center}
  .chero:has(img[src*="neck-pain"]) .chero__media img{object-position:66% center}
  .subhero .container,.chero .container{max-width:none;margin:0;padding:1.5rem 1.5rem 2.6rem}
  .subhero h1,.chero h1,.subhero__sub,.chero__sub,.crumbs,.chero:has(img[src*="neck-pain"]) h1,.chero:has(img[src*="neck-pain"]) .chero__sub,.chero:has(img[src*="neck-pain"]) .crumbs{color:var(--ink);background:none;box-shadow:none;text-shadow:none;width:auto}
  .crumbs{margin-top:0}
}

/* Photographic page heroes share the homepage's progressive treatment.
   Keep the two layers independent: blur behind the copy, light above it.
   Compact condition heroes deliberately retain their separate layout. */
.subhero .subhero__scrim{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
.subhero__scrim::before,.subhero__scrim::after{content:"";position:absolute;inset:0}
.subhero__scrim::before{
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 22%,rgba(0,0,0,.35) 45%,transparent 60%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 22%,rgba(0,0,0,.35) 45%,transparent 60%);
}
.subhero__scrim::after{background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.88) 25%,rgba(255,255,255,.55) 43%,rgba(255,255,255,.16) 58%,transparent 70%)}
.subhero h1,.subhero .subhero__sub,.subhero .crumbs{background:none;box-shadow:none;text-shadow:none;color:var(--ink)}
@media(min-width:881px){
  .subhero{display:grid;align-items:center;min-height:0;padding:var(--nav-h) 0 0}
  .subhero .subhero__media{position:relative;inset:auto;grid-area:1/1}
  .subhero .subhero__media img{display:block;width:100%;height:auto;object-fit:contain}
  .subhero .subhero__scrim{top:var(--nav-h)}
  .subhero .container{grid-area:1/1;padding-block:3rem;width:100%}
  .subhero h1{max-width:11ch;font-size:clamp(2.4rem,4.2vw,3.75rem);line-height:1.08}
  .subhero .subhero__sub{max-width:36%;font-size:clamp(1rem,1.35vw,1.22rem)}
  .subhero__actions{max-width:40%}
}
@media(max-width:880px){
  .subhero{padding-top:var(--nav-h)}
  .subhero .subhero__media{height:auto}
  .subhero .subhero__media img{display:block;height:auto;width:100%;object-fit:contain}
  .subhero .subhero__scrim{display:none}
}
@media(prefers-reduced-transparency:reduce){
  .subhero__scrim::before{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Equal outer heights for the floating header pills on every viewport. */
.nav .brand,.nav .nav__lang,.nav .nav__toggle,.nav .nav__cta>.btn{height:46px;min-height:46px;box-sizing:border-box;padding-block:0;align-items:center;justify-content:center}
.nav .nav__toggle{width:46px}
@media(min-width:1021px){
 .nav .nav__links{height:46px;box-sizing:border-box;padding-block:3px}
 .nav .nav__links a{display:flex;align-items:center;height:38px;padding-block:0;white-space:nowrap}
}

/* Desktop navigation scrolls with the page. */
@media(min-width:1021px){
 body .nav{position:absolute}
 body .v9-anchor-nav,body .condition-jump{position:static;top:auto}
}