/* ============================================================================
   FUMORA — Home Physiotherapy, Orthotics & Prosthetics · Karachi
   Single stylesheet. Plain CSS3, no build step, no framework.

   CONTENTS
   01. Design tokens          14. Process steps
   02. Base / reset           15. Marquee ticker (DARK BAND)
   03. Layout helpers         16. Stats counters
   04. Buttons & links        17. Testimonials carousel
   05. Top info bar           18. Team cards
   06. Header + navigation    19. Brand strip
   07. Hero slider            20. Blog cards
   08. Trust badge strip      21. Quote slab (DARK SLAB)
   09. Section headings       22. CTA banner
   10. About block            23. Footer
   11. Feature cards          24. Floating WhatsApp / Call buttons
   12. Service cards          25. Inner page hero + breadcrumb
   13. Body map (DARK SLAB)   26. Forms  27. FAQ  28. Contact/map
                              29. Article  30. Reveal + utilities
   ========================================================================= */

/* ---------- 01. DESIGN TOKENS ------------------------------------------- */
:root{
  /* Brand — deep teal / emerald primary */
  --teal-900:#052E2B;
  --teal-800:#07403C;
  --teal-700:#0A5750;
  --teal-600:#0E7167;   /* primary */
  --teal-500:#12907F;
  --emerald:#16A67F;
  --emerald-soft:#D7F0E7;
  --mint-50:#F1F9F7;
  --mint-100:#E4F2EF;

  /* Warm accent — coral for CTAs, amber for highlights */
  --coral:#FF6B4A;
  --coral-600:#EF5433;
  --coral-soft:#FFE9E3;
  --amber:#FFB020;

  /* Neutrals */
  --white:#FFFFFF;
  --grey-50:#F6F9F8;
  --grey-100:#EEF3F2;
  --line:#E1ECE9;
  --ink:#0C2321;        /* headings */
  --body:#4C6764;       /* body copy */
  --muted:#7B928F;
  --on-dark:#C7DEDA;

  /* Type */
  --f-head:'Sora',ui-sans-serif,system-ui,sans-serif;
  --f-body:'Inter',ui-sans-serif,system-ui,sans-serif;

  --t-xs:clamp(.75rem,.73rem + .08vw,.8rem);
  --t-sm:clamp(.84rem,.82rem + .1vw,.9rem);
  --t-base:clamp(.97rem,.95rem + .12vw,1.03rem);
  --t-lead:clamp(1.06rem,1rem + .3vw,1.2rem);
  --t-h4:clamp(1.1rem,1.02rem + .35vw,1.3rem);
  --t-h3:clamp(1.3rem,1.15rem + .6vw,1.6rem);
  --t-h2:clamp(1.85rem,1.4rem + 2vw,2.9rem);
  --t-h1:clamp(2.15rem,1.55rem + 2.7vw,3.6rem);

  /* Space & shape */
  --wrap:1220px;
  --gut:26px;
  --sp:clamp(64px,7.5vw,112px);       /* vertical section rhythm */
  --r-sm:12px;
  --r:18px;
  --r-lg:26px;
  --r-xl:36px;
  --pill:999px;

  /* Layered soft shadows */
  --sh-1:0 1px 2px rgba(9,42,39,.04), 0 4px 14px -6px rgba(9,42,39,.08);
  --sh-2:0 2px 6px rgba(9,42,39,.05), 0 14px 34px -12px rgba(9,42,39,.14);
  --sh-3:0 4px 10px rgba(9,42,39,.06), 0 30px 66px -20px rgba(9,42,39,.22);
  --sh-teal:0 14px 34px -12px rgba(14,113,103,.5);
  --sh-coral:0 14px 34px -12px rgba(255,107,74,.55);

  --ease:cubic-bezier(.2,.8,.3,1);
}

/* ---------- 02. BASE ---------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:110px; }
html,body{ max-width:100%; overflow-x:clip; }
body{
  margin:0;
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.7;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }
h1,h2,h3,h4,h5{
  font-family:var(--f-head);
  color:var(--ink);
  margin:0 0 .55em;
  line-height:1.18;
  letter-spacing:-.025em;
  font-weight:600;
}
h1{ font-size:var(--t-h1); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); }
h4{ font-size:var(--t-h4); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
:focus-visible{ outline:3px solid var(--emerald); outline-offset:3px; border-radius:4px; }

/* Respect users who ask for less motion */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- 03. LAYOUT -------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
@media (max-width:640px){ :root{ --gut:18px; } }

.section{ padding-block:var(--sp); position:relative; }
.section--tight{ padding-block:clamp(46px,5vw,70px); }
.section--soft{ background:var(--grey-50); }
.section--mint{ background:linear-gradient(180deg,var(--mint-50),var(--white)); }

/* Dark feature slabs: inset + heavily rounded, so they read as a deliberate
   feature block inside the light site rather than a theme switch. */
.slab{
  position:relative;
  margin-inline:clamp(10px,2vw,26px);
  border-radius:var(--r-xl);
  overflow:hidden;
  color:var(--on-dark);
  background:
    radial-gradient(720px 460px at 82% 8%,rgba(22,166,127,.22),transparent 62%),
    radial-gradient(620px 420px at 6% 92%,rgba(255,107,74,.14),transparent 60%),
    linear-gradient(165deg,var(--teal-800) 0%,var(--teal-900) 100%);
  padding-block:var(--sp);
}
.slab h1,.slab h2,.slab h3,.slab h4{ color:var(--white); }
.slab p{ color:var(--on-dark); }
.slab .wrap{ position:relative; z-index:2; }
.slab::after{                    /* faint grid texture */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
          mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
}
@media (max-width:640px){ .slab{ border-radius:24px; } }

/* Decorative floating blobs + outline shapes */
.blob{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0; }
.blob--teal{ background:rgba(22,166,127,.24); }
.blob--coral{ background:rgba(255,107,74,.2); }
.blob--amber{ background:rgba(255,176,32,.2); }
.blob--float{ animation:floaty 13s ease-in-out infinite; }
.blob--float.d2{ animation-duration:17s; animation-delay:-4s; }
.blob--float.d3{ animation-duration:21s; animation-delay:-8s; }
@keyframes floaty{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(18px,-26px,0) scale(1.07); }
}
.shape{ position:absolute; z-index:0; opacity:.55; pointer-events:none; animation:drift 18s ease-in-out infinite; }
.shape.d2{ animation-duration:24s; animation-delay:-6s; }
.shape.d3{ animation-duration:30s; animation-delay:-12s; }
@keyframes drift{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-30px) rotate(16deg); }
}

.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; gap:18px; } }

/* ---------- 04. BUTTONS ------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-body); font-weight:600; font-size:var(--t-sm);
  line-height:1; padding:16px 30px; min-height:52px;
  border-radius:var(--pill); border:1.5px solid transparent; cursor:pointer;
  transition:transform .28s var(--ease),box-shadow .28s ease,background .25s ease,
             color .25s ease,border-color .25s ease;
}
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px); }
.btn .arw{ transition:transform .25s ease; }
.btn:hover .arw{ transform:translateX(4px); }
.btn svg{ flex-shrink:0; }

.btn--coral{ background:var(--coral); color:var(--white); box-shadow:var(--sh-coral); }
.btn--coral:hover{ background:var(--coral-600); box-shadow:0 20px 40px -14px rgba(255,107,74,.7); }
.btn--teal{ background:var(--teal-600); color:var(--white); box-shadow:var(--sh-teal); }
.btn--teal:hover{ background:var(--teal-700); box-shadow:0 20px 40px -14px rgba(14,113,103,.65); }
.btn--white{ background:var(--white); color:var(--teal-700); box-shadow:var(--sh-2); }
.btn--white:hover{ background:var(--mint-50); }
.btn--line{ background:transparent; color:var(--teal-700); border-color:var(--line); }
.btn--line:hover{ border-color:var(--teal-600); background:var(--mint-50); }
.btn--ghost{ background:rgba(255,255,255,.06); color:var(--white); border-color:rgba(255,255,255,.3); }
.btn--ghost:hover{ border-color:var(--emerald); color:var(--white); background:rgba(22,166,127,.18); }
.btn--wa{ background:#25D366; color:var(--white); box-shadow:0 14px 34px -12px rgba(37,211,102,.6); }
.btn--wa:hover{ background:#1EBE5B; }
.btn--sm{ padding:12px 22px; min-height:44px; font-size:var(--t-xs); }
.btn--block{ width:100%; }

.tlink{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:var(--t-sm); color:var(--teal-600); }
.tlink .arw{ transition:transform .25s ease; }
.tlink:hover{ color:var(--coral); }
.tlink:hover .arw{ transform:translateX(5px); }

/* ---------- 05. TOP INFO BAR ------------------------------------------- */
.topbar{ background:var(--teal-900); color:var(--on-dark); font-size:var(--t-xs); line-height:1; }
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:11px; flex-wrap:wrap; }
.topbar__items{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.topbar a,.topbar .ti{ display:inline-flex; align-items:center; gap:8px; transition:color .2s ease; }
.topbar a:hover{ color:var(--emerald); }
.topbar svg{ opacity:.85; flex-shrink:0; }
.socials{ display:flex; align-items:center; gap:9px; }
.socials a{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.08);
  transition:background .25s ease,transform .25s var(--ease);
}
.socials a:hover{ background:var(--emerald); transform:translateY(-2px); }
@media (max-width:900px){
  .topbar__in{ justify-content:center; padding-block:9px; }
  .topbar .ti--hours{ display:none; }
}
@media (max-width:520px){
  .topbar .ti--mail{ display:none; }
  .topbar__items{ gap:14px; }
}

/* ---------- 06. HEADER / NAV -------------------------------------------- */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease,background .3s ease;
}
.header.is-stuck{ box-shadow:0 10px 30px -16px rgba(9,42,39,.28); background:rgba(255,255,255,.97); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:16px; transition:padding .3s var(--ease); }
.header.is-stuck .nav{ padding-block:9px; }        /* shrink on scroll */

.brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }

/* Compact logo artwork (icon + FUMORA, no stacked tagline).
   The SVG is 281.2 x 66 (≈4.26:1), so 40px tall ≈ 170px wide. Dropping the
   tagline means the wordmark itself is far larger per pixel of height, which
   is why the header reads clearly at 40px where the full lockup did not.
   height drives it and width:auto keeps the ratio — never set both. */
.brand__logo{
  height:40px; width:auto; display:block; flex-shrink:0;
  transition:height .3s var(--ease);
}
.header.is-stuck .brand__logo{ height:34px; }   /* shrinks with the sticky bar */

/* Icon-only fallback for very narrow phones — hidden by default,
   swapped in below 480px where the full wordmark would crowd the nav. */
.brand__icon{ display:none; height:38px; width:auto; flex-shrink:0; }

.menu{ display:flex; align-items:center; gap:30px; }
.menu > li{ position:relative; }
.menu > li > a{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--t-sm); font-weight:600; color:var(--ink);
  padding:10px 0; position:relative; transition:color .2s ease;
}
.menu > li > a::after{
  content:""; position:absolute; left:0; bottom:4px; height:2px; width:0;
  background:var(--coral); border-radius:2px; transition:width .28s var(--ease);
}
.menu > li > a:hover{ color:var(--teal-600); }
.menu > li > a:hover::after,
.menu > li > a.is-active::after{ width:100%; }
.menu > li > a.is-active{ color:var(--teal-600); }
.menu .caret{ transition:transform .25s ease; }
.has-sub:hover .caret{ transform:rotate(180deg); }

.submenu{
  position:absolute; top:100%; left:-18px; min-width:252px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-3); padding:10px; margin-top:6px;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .24s ease,transform .24s var(--ease),visibility .24s;
}
.has-sub:hover .submenu,
.has-sub:focus-within .submenu{ opacity:1; visibility:visible; transform:translateY(0); }
.submenu a{
  display:block; padding:11px 14px; border-radius:var(--r-sm);
  font-size:var(--t-sm); font-weight:500; color:var(--body);
  transition:background .2s ease,color .2s ease,padding-left .2s ease;
}
.submenu a:hover{ background:var(--mint-50); color:var(--teal-700); padding-left:19px; }

.nav__cta{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.burger{ display:none; background:none; border:none; cursor:pointer; padding:9px; border-radius:10px; }
.burger span{
  display:block; width:24px; height:2px; border-radius:2px;
  background:var(--teal-800); margin:5px 0;
  transition:transform .3s var(--ease),opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1040px){
  .burger{ display:block; }
  .menu{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--white); border-bottom:1px solid var(--line);
    box-shadow:0 26px 44px -18px rgba(9,42,39,.3);
    padding:8px var(--gut) 22px;
    max-height:calc(100dvh - 70px); overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-12px); pointer-events:none;
    transition:opacity .25s ease,transform .25s var(--ease),visibility .25s;
  }
  .menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
  .menu > li{ border-bottom:1px solid var(--line); }
  .menu > li:last-child{ border-bottom:none; }
  .menu > li > a{ padding:16px 2px; font-size:1rem; justify-content:space-between; }
  .menu > li > a::after{ display:none; }
  .submenu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; border-radius:0; margin:0 0 10px;
    padding:0 0 0 12px; min-width:0; display:none;
  }
  .has-sub.is-open .submenu{ display:block; }
  .has-sub.is-open .caret{ transform:rotate(180deg); }
  .nav__cta .btn{ padding:12px 20px; min-height:44px; font-size:var(--t-xs); }
}
@media (max-width:560px){
  .nav__cta .btn{ padding:11px 15px; font-size:.72rem; min-height:42px; }
}
@media (max-width:520px){
  .header .brand__logo,
  .header.is-stuck .brand__logo{ height:32px; }
}
/* Below 480px the full wordmark plus the Book button would wrap the nav, so the
   header alone falls back to the icon mark. Scoped to .header on purpose — the
   footer keeps the full lockup at every width. */
@media (max-width:480px){
  .header .brand__logo{ display:none; }
  .header .brand__icon{ display:block; }
}

/* ---------- 07. HERO SLIDER --------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 620px at 88% 6%,rgba(22,166,127,.14),transparent 60%),
    radial-gradient(700px 520px at 4% 96%,rgba(255,176,32,.13),transparent 58%),
    linear-gradient(180deg,var(--mint-50) 0%,var(--white) 78%);
  padding-block:clamp(44px,5.5vw,80px) clamp(56px,6vw,96px);
}
.hero__slides{ display:grid; position:relative; z-index:2; }
.hero__slide{
  grid-area:1/1; display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(32px,4vw,60px); align-items:center;
  opacity:0; visibility:hidden; transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),visibility .7s;
}
.hero__slide.is-active{ opacity:1; visibility:visible; transform:none; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--t-xs); font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--teal-600);
  background:var(--emerald-soft); padding:9px 18px; border-radius:var(--pill);
  margin-bottom:20px;
}
.eyebrow--plain{ background:none; padding:0; color:var(--emerald); }
.slab .eyebrow{ background:rgba(22,166,127,.16); color:#7FE3C4; }

.hero h1{ margin-bottom:20px; max-width:15ch; }
.hero h1 em{ font-style:normal; color:var(--teal-600); position:relative; white-space:nowrap; }
.hero h1 em::after{           /* hand-drawn underline accent */
  content:""; position:absolute; left:0; right:0; bottom:.04em; height:.22em;
  background:var(--amber); opacity:.32; border-radius:var(--pill); z-index:-1;
}
.hero__lead{ font-size:var(--t-lead); max-width:52ch; margin-bottom:30px; }
.hero__btns{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__note{ display:flex; align-items:center; gap:9px; margin-top:22px; font-size:var(--t-sm); color:var(--muted); }
.hero__note svg{ color:var(--emerald); flex-shrink:0; }

/* hero image stack */
.hero__media{ position:relative; }
.hero__img{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  aspect-ratio:5/4; box-shadow:var(--sh-3); background:var(--mint-100);
}
.hero__img img{ width:100%; height:100%; object-fit:cover; transition:transform 8s ease-out; }
.hero__slide.is-active .hero__img img{ transform:scale(1.07); }   /* slow ken-burns */
.hero__badge{
  position:absolute; bottom:-22px; left:-18px; z-index:3;
  background:var(--white); border-radius:var(--r-lg); padding:16px 22px;
  box-shadow:var(--sh-3); display:flex; align-items:center; gap:14px;
  animation:floaty 7s ease-in-out infinite;
}
.hero__badge .ic{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--emerald-soft); color:var(--teal-600); flex-shrink:0; }
.hero__badge b{ display:block; font-family:var(--f-head); font-size:1.15rem; color:var(--ink); line-height:1.1; }
.hero__badge span{ font-size:var(--t-xs); color:var(--muted); }
@media (max-width:640px){ .hero__badge{ left:8px; bottom:-18px; padding:12px 16px; } }

/* slider controls */
.hero__ctrl{ display:flex; align-items:center; gap:16px; margin-top:clamp(34px,4vw,52px); position:relative; z-index:3; }
.dots{ display:flex; gap:9px; }
.dots button{
  width:10px; height:10px; padding:0; border-radius:50%; border:none; cursor:pointer;
  background:var(--line); transition:width .3s var(--ease),background .3s ease;
}
.dots button.is-active{ width:30px; border-radius:var(--pill); background:var(--coral); }
.arrows{ display:flex; gap:10px; margin-left:auto; }
.arrows button{
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:1.5px solid var(--line); background:var(--white); color:var(--teal-700);
  display:grid; place-items:center;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s var(--ease);
}
.arrows button:hover{ background:var(--teal-600); color:var(--white); border-color:var(--teal-600); transform:translateY(-2px); }

@media (max-width:940px){
  .hero__slide{ grid-template-columns:1fr; }
  .hero h1{ max-width:100%; }
  .hero__media{ order:-1; max-width:560px; }
  .hero__img{ aspect-ratio:16/11; }
}
@media (max-width:600px){
  .hero__btns .btn{ flex:1 1 100%; }
  .arrows{ display:none; }
  .hero__ctrl{ justify-content:center; }
}

/* ---------- 08. TRUST BADGE STRIP --------------------------------------- */
.trust{
  position:relative; z-index:5;
  margin-top:calc(var(--sp) * -.42);
  margin-bottom:calc(var(--sp) * -.42);
}
.trust__in{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-3); padding:clamp(22px,3vw,36px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.trust__item{ display:flex; align-items:center; gap:15px; padding:6px 14px; position:relative; }
.trust__item + .trust__item::before{
  content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background:var(--line);
}
.trust__ic{ width:50px; height:50px; border-radius:16px; display:grid; place-items:center; flex-shrink:0; background:var(--emerald-soft); color:var(--teal-600); }
.trust__item:nth-child(2) .trust__ic{ background:var(--coral-soft); color:var(--coral-600); }
.trust__item:nth-child(3) .trust__ic{ background:#FFF4DE; color:#C9820B; }
.trust__item b{ display:block; font-family:var(--f-head); font-size:1.28rem; color:var(--ink); line-height:1.1; }
.trust__item span{ font-size:var(--t-xs); color:var(--muted); line-height:1.35; display:block; }
@media (max-width:1000px){
  .trust__in{ grid-template-columns:1fr 1fr; gap:18px 10px; }
  .trust__item:nth-child(odd)::before{ display:none; }
}
@media (max-width:560px){
  .trust__in{ grid-template-columns:1fr; }
  .trust__item::before{ display:none !important; }
  .trust__item{ padding:4px; }
}

/* ---------- 09. SECTION HEADINGS ---------------------------------------- */
.shead{ max-width:660px; margin-bottom:clamp(34px,4vw,58px); }
.shead--center{ margin-inline:auto; text-align:center; }
.shead p{ font-size:var(--t-lead); color:var(--body); }
.slab .shead p{ color:var(--on-dark); opacity:.86; }
.shead--center .eyebrow{ justify-content:center; }

/* ---------- 10. ABOUT --------------------------------------------------- */
.about{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(34px,4.5vw,68px); align-items:center; }
@media (max-width:940px){ .about{ grid-template-columns:1fr; } }

.figstack{ position:relative; }
.figstack__main{ border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--sh-3); background:var(--mint-100); }
.figstack__main img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.figstack:hover .figstack__main img{ transform:scale(1.06); }
.figstack__sub{
  position:absolute; right:-24px; bottom:34px; width:52%;
  border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3;
  border:6px solid var(--white); box-shadow:var(--sh-3); background:var(--mint-100);
}
.figstack__sub img{ width:100%; height:100%; object-fit:cover; }
.figstack__chip{
  position:absolute; left:-20px; top:28px; z-index:3;
  background:var(--teal-700); color:var(--white); border-radius:var(--r);
  padding:16px 20px; box-shadow:var(--sh-3); text-align:center;
  animation:floaty 9s ease-in-out infinite;
}
.figstack__chip b{ display:block; font-family:var(--f-head); font-size:1.7rem; line-height:1; }
.figstack__chip span{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
@media (max-width:940px){ .figstack{ max-width:520px; margin-inline:auto; } }
@media (max-width:560px){
  .figstack__sub{ right:-8px; width:46%; }
  .figstack__chip{ left:-8px; padding:12px 15px; }
  .figstack__chip b{ font-size:1.35rem; }
}

.checks{ display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; margin:26px 0 30px; }
@media (max-width:560px){ .checks{ grid-template-columns:1fr; } }
.checks li{ display:flex; align-items:flex-start; gap:11px; font-size:var(--t-sm); color:var(--body); font-weight:500; }
.checks .tick{
  width:22px; height:22px; border-radius:50%; flex-shrink:0; margin-top:2px;
  display:grid; place-items:center; background:var(--emerald-soft); color:var(--teal-600);
}
.slab .checks li{ color:var(--on-dark); }
.slab .checks .tick{ background:rgba(22,166,127,.2); color:#7FE3C4; }

/* signature row under about text */
.sigrow{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--line); }
.sigrow__who b{ display:block; font-family:var(--f-head); color:var(--ink); }
.sigrow__who span{ font-size:var(--t-xs); color:var(--muted); }

/* ---------- 11. FEATURE CARDS ------------------------------------------- */
.fcard{
  position:relative; overflow:hidden;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px 30px 30px; box-shadow:var(--sh-1);
  transition:transform .38s var(--ease),box-shadow .38s ease,border-color .38s ease;
}
.fcard::before{
  content:""; position:absolute; inset:auto -40% 100% auto; width:230px; height:230px;
  border-radius:50%; background:radial-gradient(circle,rgba(22,166,127,.16),transparent 70%);
  transition:transform .5s var(--ease); transform:translate(0,0);
}
.fcard:hover{ transform:translateY(-9px); box-shadow:var(--sh-3); border-color:var(--emerald); }
.fcard:hover::before{ transform:translate(-20%,60%); }
.fcard > *{ position:relative; z-index:1; }
.fcard__ic{
  width:60px; height:60px; border-radius:19px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--teal-600),var(--teal-800)); color:var(--white);
  margin-bottom:20px; box-shadow:var(--sh-teal);
  transition:transform .4s cubic-bezier(.2,1.4,.4,1);
}
.fcard:hover .fcard__ic{ transform:rotate(-8deg) scale(1.07); }
.fcard:nth-child(2) .fcard__ic{ background:linear-gradient(150deg,var(--coral),var(--coral-600)); box-shadow:var(--sh-coral); }
.fcard:nth-child(3) .fcard__ic{ background:linear-gradient(150deg,var(--amber),#E08A00); box-shadow:0 14px 30px -12px rgba(255,176,32,.7); }
.fcard:nth-child(4) .fcard__ic{ background:linear-gradient(150deg,var(--emerald),var(--teal-700)); }
.fcard h3{ font-size:var(--t-h4); margin-bottom:10px; }
.fcard p{ font-size:var(--t-sm); margin:0; }

/* ---------- 12. SERVICE CARDS ------------------------------------------- */
.scard{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:transform .38s var(--ease),box-shadow .38s ease,border-color .38s ease;
}
.scard:hover{ transform:translateY(-9px); box-shadow:var(--sh-3); border-color:var(--emerald); }
.scard__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--mint-100); }
.scard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.scard:hover .scard__media img{ transform:scale(1.09); }
.scard__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(5,46,43,.55));
}
.scard__tag{
  position:absolute; left:16px; bottom:14px; z-index:2;
  font-size:var(--t-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--white); background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28); padding:7px 14px; border-radius:var(--pill);
}
.scard__body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.scard__ic{
  width:48px; height:48px; border-radius:15px; display:grid; place-items:center;
  background:var(--emerald-soft); color:var(--teal-600); margin-bottom:16px;
  transition:background .3s ease,color .3s ease;
}
.scard:hover .scard__ic{ background:var(--teal-600); color:var(--white); }
.scard h3{ font-size:var(--t-h4); margin-bottom:9px; }
.scard p{ font-size:var(--t-sm); margin-bottom:18px; flex:1; }
.scard .tlink{ margin-top:auto; }

/* compact service card, no image */
.scard--flat .scard__body{ padding:30px 28px; }

/* ---------- 12b. PILLAR CARDS (the 3 core services) -------------------- */
/* Large card used on services.html and the home services section: image,
   icon, blurb, then the pillar's sub-services listed underneath. */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch; }
@media (max-width:1040px){ .pillars{ grid-template-columns:1fr; gap:22px; max-width:640px; margin-inline:auto; } }

.pillar{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-1);
  transition:transform .38s var(--ease),box-shadow .38s ease,border-color .38s ease;
}
.pillar:hover{ transform:translateY(-9px); box-shadow:var(--sh-3); border-color:var(--emerald); }
.pillar__media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--mint-100); }
.pillar__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.pillar:hover .pillar__media img{ transform:scale(1.08); }
.pillar__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(5,46,43,.1) 0%,rgba(5,46,43,.62) 100%);
}
.pillar__num{
  position:absolute; top:16px; left:18px; z-index:2;
  font-family:var(--f-head); font-weight:700; font-size:.78rem; letter-spacing:.16em;
  color:var(--white); background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.3); padding:7px 14px; border-radius:var(--pill);
}
.pillar__title{
  position:absolute; left:20px; right:20px; bottom:16px; z-index:2;
  font-family:var(--f-head); font-weight:600; font-size:var(--t-h3);
  color:var(--white); letter-spacing:-.025em; line-height:1.15; margin:0;
}
.pillar__body{ padding:26px 26px 30px; display:flex; flex-direction:column; flex:1; }
.pillar__ic{
  width:54px; height:54px; border-radius:17px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--teal-600),var(--teal-800)); color:var(--white);
  margin:-52px 0 18px; position:relative; z-index:3; border:4px solid var(--white);
  box-shadow:var(--sh-teal);
  transition:transform .4s cubic-bezier(.2,1.4,.4,1);
}
.pillar:nth-child(2) .pillar__ic{ background:linear-gradient(150deg,var(--coral),var(--coral-600)); box-shadow:var(--sh-coral); }
.pillar:nth-child(3) .pillar__ic{ background:linear-gradient(150deg,var(--amber),#E08A00); box-shadow:0 14px 30px -12px rgba(255,176,32,.7); }
.pillar:hover .pillar__ic{ transform:rotate(-8deg) scale(1.06); }
.pillar__lead{ font-size:var(--t-sm); margin-bottom:20px; }
.pillar .tlink{ margin-top:auto; padding-top:22px; }

/* the sub-service list inside a pillar card */
.sublist{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:6px; }
.sublist li{ background:var(--grey-50); transition:background .22s ease; }
.sublist a{
  display:flex; align-items:center; gap:10px; padding:11px 15px;
  font-size:var(--t-sm); font-weight:500; color:var(--body);
  transition:color .22s ease,padding-left .22s ease;
}
.sublist li:hover{ background:var(--mint-50); }
.sublist a:hover{ color:var(--teal-700); padding-left:20px; }
.sublist svg{ color:var(--emerald); flex-shrink:0; }
.sublist__label{
  font-size:var(--t-xs); font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin-bottom:11px; display:block;
}

/* ---------- 12c. SUB-SERVICE CARDS (inside a pillar page) -------------- */
.subgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:1100px){ .subgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .subgrid{ grid-template-columns:1fr; } }

.subcard{
  position:relative; overflow:hidden; scroll-margin-top:120px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 24px 26px; box-shadow:var(--sh-1);
  transition:transform .35s var(--ease),box-shadow .35s ease,border-color .35s ease;
}
.subcard::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--emerald),var(--coral));
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.subcard:hover{ transform:translateY(-7px); box-shadow:var(--sh-2); border-color:var(--emerald); }
.subcard:hover::before,.subcard:target::before{ transform:scaleX(1); }
.subcard:target{ border-color:var(--emerald); box-shadow:var(--sh-2); }
.subcard__ic{
  width:48px; height:48px; border-radius:15px; display:grid; place-items:center;
  background:var(--emerald-soft); color:var(--teal-600); margin-bottom:16px;
  transition:background .3s ease,color .3s ease;
}
.subcard:hover .subcard__ic{ background:var(--teal-600); color:var(--white); }
.subcard__tag{
  font-size:var(--t-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--emerald); display:block; margin-bottom:8px;
}
.subcard h3{ font-size:var(--t-h4); margin-bottom:9px; }
.subcard p{ font-size:var(--t-sm); margin:0; }

/* quick jump-links row at the top of a pillar page */
.jumpbar{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.jumpbar a{
  font-size:var(--t-sm); padding:10px 18px; border-radius:var(--pill);
  background:var(--white); border:1px solid var(--line); color:var(--body);
  box-shadow:var(--sh-1);
  transition:transform .25s var(--ease),border-color .25s ease,color .25s ease,box-shadow .25s ease;
}
.jumpbar a:hover{ transform:translateY(-4px); border-color:var(--emerald); color:var(--teal-700); box-shadow:var(--sh-2); }

/* ---------- 13. BODY MAP (DARK SLAB) ------------------------------------ */
.bmap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,4.5vw,64px); align-items:center; }
@media (max-width:940px){ .bmap{ grid-template-columns:1fr; } }
.bmap__stage{
  position:relative; border-radius:var(--r-lg); padding:30px 24px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
}
.bmap__stage svg{ width:100%; max-width:250px; margin-inline:auto; display:block; }
.bmap__body{ fill:rgba(22,166,127,.09); stroke:rgba(22,166,127,.42); stroke-width:1.2; }
.pin{ cursor:pointer; }
.pin .hit{ fill:transparent; }
.pin .dot{ fill:var(--emerald); transition:r .25s ease,fill .25s ease; }
.pin .halo{ fill:none; stroke:var(--emerald); stroke-width:1.2; animation:halo 2.6s ease-out infinite; }
@keyframes halo{ 0%{ r:6; opacity:.75; } 100%{ r:18; opacity:0; } }
.pin:hover .dot,.pin.is-active .dot{ r:7.5; }
.pin.is-active .dot{ fill:var(--coral); }
.pin.is-active .halo{ stroke:var(--coral); }

.bmap__hint{ text-align:center; font-size:var(--t-xs); color:var(--on-dark); opacity:.6; margin-top:14px; }
.bmap__panel{
  margin-top:22px; border-radius:var(--r); padding:22px 24px; min-height:150px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
}
.bmap__panel .tag{
  display:inline-block; font-size:var(--t-xs); font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:#7FE3C4; margin-bottom:9px;
}
.bmap__panel h4{ color:var(--white); margin-bottom:8px; }
.bmap__panel p{ font-size:var(--t-sm); margin-bottom:14px; }
.bmap__panel .tlink{ color:#7FE3C4; }
.bmap__panel .tlink:hover{ color:var(--coral); }

/* ---------- 14. PROCESS STEPS ------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; position:relative; }
.steps::before{
  content:""; position:absolute; top:34px; left:10%; right:10%; height:2px;
  background:repeating-linear-gradient(90deg,var(--emerald-soft) 0 10px,transparent 10px 20px);
}
.step{ position:relative; text-align:center; }
.step__num{
  width:68px; height:68px; margin:0 auto 20px; border-radius:22px;
  display:grid; place-items:center; position:relative; z-index:2;
  background:var(--white); border:2px solid var(--emerald-soft); color:var(--teal-600);
  font-family:var(--f-head); font-weight:700; font-size:1.25rem;
  box-shadow:var(--sh-1);
  transition:transform .35s var(--ease),background .35s ease,color .35s ease,border-color .35s ease;
}
.step:hover .step__num{ background:var(--teal-600); color:var(--white); border-color:var(--teal-600); transform:translateY(-6px) rotate(-6deg); }
.step h4{ margin-bottom:8px; }
.step p{ font-size:var(--t-sm); margin:0; }
@media (max-width:1000px){ .steps{ grid-template-columns:1fr 1fr; } .steps::before{ display:none; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; gap:30px; } }

/* ---------- 15. MARQUEE (DARK BAND) ------------------------------------- */
.marquee{
  background:linear-gradient(90deg,var(--teal-800),var(--teal-600),var(--teal-800));
  color:var(--white); padding-block:18px; overflow:hidden; white-space:nowrap;
}
.marquee__track{ display:inline-flex; animation:slide 36s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee span{
  display:inline-flex; align-items:center; gap:26px; padding-inline:26px;
  font-family:var(--f-head); font-weight:600; font-size:clamp(1.05rem,.9rem + .7vw,1.5rem);
  letter-spacing:-.01em;
}
.marquee span::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--amber); flex-shrink:0; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- 16. STATS COUNTERS ------------------------------------------ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.stat{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px 26px; text-align:center; box-shadow:var(--sh-1);
  transition:transform .35s var(--ease),box-shadow .35s ease;
}
.stat:hover{ transform:translateY(-7px); box-shadow:var(--sh-2); }
.stat__ic{ width:52px; height:52px; margin:0 auto 16px; border-radius:16px; display:grid; place-items:center; background:var(--emerald-soft); color:var(--teal-600); }
.stat:nth-child(2) .stat__ic{ background:var(--coral-soft); color:var(--coral-600); }
.stat:nth-child(3) .stat__ic{ background:#FFF4DE; color:#C9820B; }
.stat b{ display:block; font-family:var(--f-head); font-size:clamp(1.9rem,1.4rem + 1.6vw,2.7rem); color:var(--ink); line-height:1; margin-bottom:8px; }
.stat span{ font-size:var(--t-sm); color:var(--muted); }
@media (max-width:1000px){ .stats{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .stats{ grid-template-columns:1fr; } }

/* ---------- 17. TESTIMONIALS CAROUSEL ----------------------------------- */
.carousel{ position:relative; }
.carousel__viewport{ overflow:hidden; padding:10px 4px 18px; }
.carousel__track{ display:flex; gap:26px; transition:transform .6s var(--ease); will-change:transform; }
.carousel__slide{ flex:0 0 auto; }
@media (max-width:640px){ .carousel__track{ gap:16px; } }

.tcard{
  height:100%; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:32px 30px; box-shadow:var(--sh-1);
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s ease,border-color .35s ease;
}
.tcard:hover{ transform:translateY(-6px); box-shadow:var(--sh-2); border-color:var(--emerald); }
.tcard__quote{ font-size:1.6rem; line-height:1; color:var(--emerald); opacity:.35; font-family:var(--f-head); }
.stars{ color:var(--amber); letter-spacing:2px; font-size:.9rem; margin:10px 0 14px; }
.tcard p{ font-size:var(--t-sm); flex:1; }
.tcard__who{ display:flex; align-items:center; gap:13px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.tcard__av{
  width:46px; height:46px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:var(--emerald-soft); display:grid; place-items:center;
  font-family:var(--f-head); font-weight:600; color:var(--teal-600);
}
.tcard__av img{ width:100%; height:100%; object-fit:cover; }
.tcard__who b{ display:block; font-family:var(--f-head); font-size:var(--t-sm); color:var(--ink); }
.tcard__who span{ font-size:var(--t-xs); color:var(--muted); }

.carousel__ctrl{ display:flex; align-items:center; gap:16px; margin-top:12px; }
.carousel__ctrl .dots{ margin-inline:auto; }
.carousel__ctrl .arrows{ margin-left:0; }
@media (max-width:600px){ .carousel__ctrl .arrows{ display:none; } }

/* ---------- 18. TEAM ---------------------------------------------------- */
.tm{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-1);
  transition:transform .38s var(--ease),box-shadow .38s ease,border-color .38s ease;
}
.tm:hover{ transform:translateY(-9px); box-shadow:var(--sh-3); border-color:var(--emerald); }
.tm__ph{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--mint-100); }
.tm__ph img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.tm:hover .tm__ph img{ transform:scale(1.08); }
.tm__soc{
  position:absolute; inset:auto 0 0 0; display:flex; justify-content:center; gap:10px;
  padding:16px; background:linear-gradient(180deg,transparent,rgba(5,46,43,.75));
  transform:translateY(100%); opacity:0;
  transition:transform .4s var(--ease),opacity .3s ease;
}
.tm:hover .tm__soc{ transform:none; opacity:1; }
.tm__soc a{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.2); color:var(--white); backdrop-filter:blur(6px);
  transition:background .25s ease;
}
.tm__soc a:hover{ background:var(--emerald); }
.tm__b{ padding:22px 24px 26px; text-align:center; }
.tm__b h4{ margin-bottom:4px; }
.tm__role{ font-size:var(--t-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--emerald); }
.tm__b p{ font-size:var(--t-sm); margin-top:12px; }

/* ---------- 19. BRAND STRIP --------------------------------------------- */
.brands{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.brands__item{
  display:flex; align-items:center; gap:10px;
  padding:16px 26px; border-radius:var(--r); background:var(--white);
  border:1px solid var(--line); box-shadow:var(--sh-1);
  font-family:var(--f-head); font-weight:600; font-size:var(--t-sm); color:var(--muted);
  transition:transform .3s var(--ease),color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.brands__item:hover{ transform:translateY(-5px); color:var(--teal-700); border-color:var(--emerald); box-shadow:var(--sh-2); }
.brands__item svg{ color:var(--emerald); flex-shrink:0; }

/* ---------- 20. BLOG CARDS ---------------------------------------------- */
.bcard{
  display:flex; flex-direction:column; overflow:hidden; height:100%;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:transform .38s var(--ease),box-shadow .38s ease,border-color .38s ease;
}
.bcard:hover{ transform:translateY(-9px); box-shadow:var(--sh-3); border-color:var(--emerald); }
.bcard__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--mint-100); }
.bcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.bcard:hover .bcard__media img{ transform:scale(1.08); }
.bcard__cat{
  position:absolute; top:14px; left:14px; z-index:2;
  font-size:var(--t-xs); font-weight:600; padding:7px 14px; border-radius:var(--pill);
  background:var(--white); color:var(--teal-700); box-shadow:var(--sh-1);
}
.bcard__body{ padding:24px 26px 28px; display:flex; flex-direction:column; flex:1; }
.bmeta{ display:flex; align-items:center; gap:16px; font-size:var(--t-xs); color:var(--muted); margin-bottom:12px; flex-wrap:wrap; }
.bmeta span{ display:inline-flex; align-items:center; gap:6px; }
.bcard h3{ font-size:var(--t-h4); margin-bottom:10px; }
.bcard:hover h3{ color:var(--teal-600); }
.bcard p{ font-size:var(--t-sm); margin-bottom:18px; flex:1; }

/* ---------- 21. QUOTE SLAB ---------------------------------------------- */
.quote{ max-width:900px; margin-inline:auto; text-align:center; }
.quote__mark{ font-family:var(--f-head); font-size:5.5rem; line-height:.7; color:var(--emerald); opacity:.35; display:block; margin-bottom:10px; }
.quote blockquote{
  margin:0 0 28px; font-family:var(--f-head); font-weight:500;
  font-size:clamp(1.3rem,.95rem + 1.9vw,2.3rem); line-height:1.34;
  color:var(--white); letter-spacing:-.022em;
}
.quote__who{ display:inline-flex; align-items:center; gap:14px; }
.quote__av{ width:52px; height:52px; border-radius:50%; overflow:hidden; border:2px solid rgba(255,255,255,.3); flex-shrink:0; background:var(--teal-700); }
.quote__av img{ width:100%; height:100%; object-fit:cover; }
.quote__who b{ display:block; color:var(--white); font-family:var(--f-head); text-align:left; }
.quote__who span{ font-size:var(--t-xs); color:var(--on-dark); opacity:.75; display:block; text-align:left; }

/* ---------- 22. CTA BANNER ---------------------------------------------- */
.cta{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  margin-inline:clamp(10px,2vw,26px);
  background:
    radial-gradient(700px 420px at 85% 10%,rgba(255,176,32,.2),transparent 60%),
    linear-gradient(140deg,var(--teal-600),var(--teal-900));
  color:var(--white); padding:clamp(44px,6vw,80px) clamp(24px,4vw,64px);
  text-align:center;
}
.cta h2{ color:var(--white); max-width:20ch; margin-inline:auto; }
.cta p{ color:var(--on-dark); font-size:var(--t-lead); max-width:56ch; margin-inline:auto; margin-bottom:32px; }
.cta__btns{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.cta__note{ margin-top:24px; font-size:var(--t-xs); color:var(--on-dark); opacity:.72; }
@media (max-width:600px){ .cta__btns .btn{ flex:1 1 100%; } .cta{ border-radius:24px; } }

/* ---------- 23. FOOTER -------------------------------------------------- */
.footer{ background:var(--teal-900); color:var(--on-dark); padding-block:clamp(56px,6vw,86px) 28px; }
.footer__cols{ display:grid; grid-template-columns:1.7fr 1fr 1.1fr 1.3fr; gap:clamp(28px,3.5vw,52px); padding-bottom:44px; }
@media (max-width:900px){
  .footer__cols{ grid-template-columns:1fr 1fr; }
  .footer__cols > div:first-child{ grid-column:1/-1; }
}
@media (max-width:520px){ .footer__cols{ grid-template-columns:1fr; } }
/* Footer sits on --teal-900, so it uses the white artwork. Slightly larger
   than the header lockup, and never swapped for the icon — there is room here. */
.footer .brand__logo--footer{ height:46px; }
@media (max-width:520px){ .footer .brand__logo--footer{ height:40px; } }

/* The compact logo drops the tagline, so the full brand name is restored here
   as one legible line. Same eyebrow language used across the site (uppercase,
   letter-spaced, --emerald) — no new colours or tokens. */
.footer__tagline{
  font-size:var(--t-xs); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--emerald);
  margin:14px 0 0;
}
.footer__about{ font-size:var(--t-sm); opacity:.78; max-width:38ch; margin:18px 0 22px; }
.footer h5{
  font-family:var(--f-head); font-size:var(--t-sm); color:var(--white);
  letter-spacing:.02em; margin-bottom:20px; position:relative; padding-bottom:12px;
}
.footer h5::after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background:var(--coral); border-radius:2px; }
.footer li{ margin-bottom:12px; font-size:var(--t-sm); opacity:.78; }
.footer li a{ display:inline-flex; align-items:center; gap:9px; transition:color .2s ease,transform .2s var(--ease); }
.footer li a:hover{ color:var(--emerald); transform:translateX(4px); }
.footer .fcontact li{ display:flex; align-items:flex-start; gap:11px; opacity:.8; }
.footer .fcontact svg{ color:var(--emerald); flex-shrink:0; margin-top:4px; }
.footer .socials a{ background:rgba(255,255,255,.09); width:36px; height:36px; }
.footer__bot{
  border-top:1px solid rgba(255,255,255,.1); padding-top:24px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:var(--t-xs); opacity:.6;
}
@media (max-width:600px){ .footer__bot{ flex-direction:column; text-align:center; } }

/* ---------- 24. FLOATING ACTION BUTTONS --------------------------------- */
.fab{
  position:fixed; right:20px; bottom:20px; z-index:95;
  display:flex; flex-direction:column; gap:12px; align-items:flex-end;
}
.fab a{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  color:var(--white); position:relative;
  transition:transform .3s cubic-bezier(.2,1.4,.4,1),box-shadow .3s ease;
}
.fab a:hover{ transform:scale(1.09); }
.fab__wa{ background:#25D366; box-shadow:0 12px 30px -8px rgba(37,211,102,.65); }
.fab__call{ background:var(--coral); box-shadow:0 12px 30px -8px rgba(255,107,74,.65); }
.fab a::before{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid currentColor;
  animation:ripple 2.4s ease-out infinite; pointer-events:none;
}
.fab__wa::before{ color:#25D366; }
.fab__call::before{ color:var(--coral); animation-delay:1.2s; }
@keyframes ripple{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.55); opacity:0; } }
.fab__label{
  position:absolute; right:68px; top:50%; transform:translateY(-50%) translateX(8px);
  background:var(--ink); color:var(--white); font-size:var(--t-xs); font-weight:600;
  padding:8px 14px; border-radius:var(--pill); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .25s ease,transform .25s var(--ease);
}
.fab a:hover .fab__label{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (max-width:600px){
  .fab{ right:14px; bottom:14px; gap:10px; }
  .fab a{ width:50px; height:50px; }
  .fab__label{ display:none; }
}

/* ---------- 25. INNER PAGE HERO ----------------------------------------- */
.phero{
  position:relative; overflow:hidden; text-align:center;
  padding-block:clamp(52px,6vw,86px);
  background:
    radial-gradient(760px 460px at 82% 12%,rgba(22,166,127,.16),transparent 60%),
    radial-gradient(620px 420px at 8% 90%,rgba(255,176,32,.14),transparent 58%),
    linear-gradient(180deg,var(--mint-50),var(--white));
}
.phero .wrap{ position:relative; z-index:2; }
.phero h1{ max-width:19ch; margin-inline:auto; }
.phero p{ font-size:var(--t-lead); max-width:60ch; margin-inline:auto; }
.crumb{ display:flex; justify-content:center; align-items:center; gap:9px; font-size:var(--t-xs); color:var(--muted); margin-bottom:18px; flex-wrap:wrap; }
.crumb a:hover{ color:var(--teal-600); }
.crumb .sep{ opacity:.5; }
.crumb .cur{ color:var(--teal-600); font-weight:600; }

/* ---------- 26. FORMS --------------------------------------------------- */
.formcard{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(26px,3.5vw,44px); box-shadow:var(--sh-2);
}
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.fgrid .full{ grid-column:1/-1; }
@media (max-width:640px){ .fgrid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:var(--t-xs); font-weight:600; color:var(--ink); }
.field label .req{ color:var(--coral); }
input,select,textarea{
  font-family:var(--f-body); font-size:16px; color:var(--ink);
  padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--grey-50);
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
input::placeholder,textarea::placeholder{ color:#9FB3B0; }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--emerald); background:var(--white);
  box-shadow:0 0 0 4px rgba(22,166,127,.14);
}
textarea{ resize:vertical; min-height:130px; }
select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234C6764' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:42px; }
.form-note{ font-size:var(--t-xs); color:var(--muted); margin-top:14px; text-align:center; }
.form-msg{
  display:none; margin-top:16px; padding:14px 18px; border-radius:var(--r-sm);
  background:var(--emerald-soft); color:var(--teal-700); font-size:var(--t-sm); font-weight:500;
}
.form-msg.is-shown{ display:block; }

/* radio / chip choices */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chips input{ position:absolute; opacity:0; pointer-events:none; }
.chips label{
  cursor:pointer; padding:11px 20px; border-radius:var(--pill);
  border:1.5px solid var(--line); background:var(--white); font-size:var(--t-sm);
  font-weight:500; color:var(--body);
  transition:all .25s ease;
}
.chips input:checked + label{ background:var(--teal-600); border-color:var(--teal-600); color:var(--white); box-shadow:var(--sh-teal); }
.chips input:focus-visible + label{ outline:3px solid var(--emerald); outline-offset:2px; }

/* ---------- 27. FAQ ----------------------------------------------------- */
.faq{ max-width:860px; margin-inline:auto; }
.faq__item{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:14px; overflow:hidden; box-shadow:var(--sh-1);
  transition:border-color .3s ease,box-shadow .3s ease;
}
.faq__item[open]{ border-color:var(--emerald); box-shadow:var(--sh-2); }
.faq__item summary{
  cursor:pointer; list-style:none; padding:22px 26px; gap:18px;
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--f-head); font-weight:600; font-size:var(--t-h4); color:var(--ink);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__ind{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; background:var(--mint-100); color:var(--teal-600);
  transition:transform .3s var(--ease),background .3s ease,color .3s ease;
}
.faq__item[open] .faq__ind{ transform:rotate(45deg); background:var(--teal-600); color:var(--white); }
.faq__body{ padding:0 26px 24px; }
.faq__body p{ font-size:var(--t-sm); margin:0; }
@media (max-width:600px){ .faq__item summary{ padding:18px 20px; } .faq__body{ padding:0 20px 20px; } }

/* ---------- 28. CONTACT / MAP / AREAS ----------------------------------- */
.icard{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 28px; box-shadow:var(--sh-1); height:100%;
  transition:transform .35s var(--ease),box-shadow .35s ease,border-color .35s ease;
}
.icard:hover{ transform:translateY(-6px); box-shadow:var(--sh-2); border-color:var(--emerald); }
.icard__ic{ width:54px; height:54px; border-radius:17px; display:grid; place-items:center; background:var(--emerald-soft); color:var(--teal-600); margin-bottom:18px; }
.icard:nth-child(2) .icard__ic{ background:var(--coral-soft); color:var(--coral-600); }
.icard:nth-child(3) .icard__ic{ background:#FFF4DE; color:#C9820B; }
.icard h4{ margin-bottom:6px; }
.icard p{ font-size:var(--t-sm); margin:0; }
.icard a:hover{ color:var(--teal-600); }

.mapwrap{
  border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--sh-2); background:var(--mint-100); line-height:0;
}
.mapwrap iframe{ width:100%; height:420px; border:0; display:block; }
@media (max-width:700px){ .mapwrap iframe{ height:300px; } }

.areas{ display:flex; flex-wrap:wrap; gap:11px; }
.areas li{
  font-size:var(--t-sm); padding:11px 20px; border-radius:var(--pill);
  background:var(--white); border:1px solid var(--line); color:var(--body);
  box-shadow:var(--sh-1); display:inline-flex; align-items:center; gap:8px;
  transition:transform .25s var(--ease),border-color .25s ease,color .25s ease,box-shadow .25s ease;
}
.areas li:hover{ transform:translateY(-4px); border-color:var(--emerald); color:var(--teal-700); box-shadow:var(--sh-2); }
.areas svg{ color:var(--emerald); flex-shrink:0; }

/* generic pill list (conditions) */
.pills{ display:flex; flex-wrap:wrap; gap:11px; }
.pills li{
  font-size:var(--t-sm); padding:11px 20px; border-radius:var(--pill);
  background:var(--white); border:1px solid var(--line); color:var(--body); box-shadow:var(--sh-1);
  transition:transform .25s var(--ease),border-color .25s ease,color .25s ease;
}
.pills li:hover{ transform:translateY(-4px); border-color:var(--emerald); color:var(--teal-700); }
.slab .pills li{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.15); color:var(--on-dark); box-shadow:none; }
.slab .pills li:hover{ border-color:var(--emerald); color:var(--white); }

/* ---------- 29. ARTICLE ------------------------------------------------- */
.layout{ display:grid; grid-template-columns:1fr 340px; gap:clamp(30px,4vw,56px); align-items:start; }
@media (max-width:1000px){ .layout{ grid-template-columns:1fr; } }
.article__hero{ border-radius:var(--r-xl); overflow:hidden; aspect-ratio:16/9; box-shadow:var(--sh-2); margin-bottom:34px; background:var(--mint-100); }
.article__hero img{ width:100%; height:100%; object-fit:cover; }
.article{ font-size:var(--t-base); }
.article h2{ font-size:var(--t-h3); margin-top:2em; }
.article h3{ font-size:var(--t-h4); margin-top:1.8em; }
.article ul{ margin:0 0 1.3em; }
.article ul li{ position:relative; padding-left:28px; margin-bottom:11px; }
.article ul li::before{
  content:""; position:absolute; left:4px; top:.62em; width:8px; height:8px;
  border-radius:50%; background:var(--emerald);
}
.article blockquote{
  margin:1.8em 0; padding:26px 30px; border-left:4px solid var(--emerald);
  background:var(--mint-50); border-radius:0 var(--r) var(--r) 0;
  font-family:var(--f-head); font-size:var(--t-lead); color:var(--ink); line-height:1.5;
}
.article figure{ margin:2em 0; }
.article figure img{ border-radius:var(--r-lg); box-shadow:var(--sh-2); width:100%; }
.article figcaption{ font-size:var(--t-xs); color:var(--muted); text-align:center; margin-top:12px; }

.sidebar{ position:sticky; top:120px; display:flex; flex-direction:column; gap:22px; }
@media (max-width:1000px){ .sidebar{ position:static; } }
.swidget{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; box-shadow:var(--sh-1); }
.swidget h4{ font-size:var(--t-h4); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.swidget--cta{ background:linear-gradient(150deg,var(--teal-600),var(--teal-900)); border:none; text-align:center; }
.swidget--cta h4,.swidget--cta p{ color:var(--white); border:none; }
.swidget--cta p{ font-size:var(--t-sm); opacity:.85; margin-bottom:20px; }
.plist li{ margin-bottom:16px; }
.plist a{ display:flex; gap:14px; align-items:center; }
.plist img{ width:70px; height:60px; object-fit:cover; border-radius:var(--r-sm); flex-shrink:0; background:var(--mint-100); }
.plist b{ font-family:var(--f-head); font-size:var(--t-sm); color:var(--ink); font-weight:600; display:block; line-height:1.35; }
.plist span{ font-size:var(--t-xs); color:var(--muted); }
.plist a:hover b{ color:var(--teal-600); }
.taglist{ display:flex; flex-wrap:wrap; gap:9px; }
.taglist a{ font-size:var(--t-xs); padding:8px 15px; border-radius:var(--pill); background:var(--mint-50); color:var(--body); transition:background .25s ease,color .25s ease; }
.taglist a:hover{ background:var(--teal-600); color:var(--white); }

.share{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:40px; padding-top:26px; border-top:1px solid var(--line); }
.share b{ font-family:var(--f-head); font-size:var(--t-sm); color:var(--ink); }
/* Icon-only links inside a share row become circles. The :not(.btn) guard
   matters: this row is also used next to real buttons, and without it a
   .btn dropped in here gets forced into a 38px circle and looks broken. */
.share a:not(.btn){
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--mint-50); color:var(--teal-700);
  transition:background .25s ease,color .25s ease,transform .25s var(--ease);
}
.share a:not(.btn):hover{ background:var(--teal-600); color:var(--white); transform:translateY(-3px); }

/* ---------- 30. REVEAL + UTILITIES -------------------------------------- */
[data-rv]{ opacity:0; transform:translateY(24px); transition:opacity .75s var(--ease),transform .75s var(--ease); }
[data-rv].is-visible{ opacity:1; transform:none; }
[data-rv][data-d="1"]{ transition-delay:.09s; }
[data-rv][data-d="2"]{ transition-delay:.18s; }
[data-rv][data-d="3"]{ transition-delay:.27s; }
[data-rv][data-d="4"]{ transition-delay:.36s; }
[data-rv][data-d="5"]{ transition-delay:.45s; }
@media (prefers-reduced-motion:reduce){
  [data-rv]{ opacity:1 !important; transform:none !important; }
}

/* Image fallback: if an Unsplash URL fails to load, the tile keeps a branded
   gradient instead of showing a broken-image icon. */
img.img-failed{ visibility:hidden; }
.hero__img,.figstack__main,.figstack__sub,.scard__media,.bcard__media,
.tm__ph,.article__hero{ background-image:linear-gradient(150deg,var(--teal-600),var(--teal-900)); }

.center{ text-align:center; }
.mt-lg{ margin-top:clamp(30px,4vw,48px); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--teal-700); color:var(--white); padding:12px 20px; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0; }

/* ---------- 12d. PILLAR TEASER TAGS (concise home-page pillar cards) ----- */
/* Short chips replacing the long sub-service list on the home page — the
   full lists now live on the pillar pages. */
.pillar__tags{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 6px; }
.pillar__tags li{
  font-size:var(--t-xs); font-weight:500; color:var(--body);
  background:var(--grey-50); border:1px solid var(--line);
  padding:7px 13px; border-radius:var(--pill);
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.pillar:hover .pillar__tags li{ border-color:var(--emerald-soft); }
.pillar__tags li:last-child{
  background:var(--mint-50); color:var(--teal-700); font-weight:600;
  border-color:var(--emerald-soft);
}

/* ---------- 12e. SUB-SERVICE GROUP HEADINGS (orthotics page) ------------ */
.subgroup{ margin:clamp(34px,4vw,52px) 0 22px; scroll-margin-top:120px; }
.subgroup:first-of-type{ margin-top:0; }
.subgroup__title{
  display:flex; align-items:center; gap:14px;
  font-size:var(--t-h3); margin:0 0 8px;
}
.subgroup__num{
  display:grid; place-items:center; flex-shrink:0;
  width:40px; height:40px; border-radius:13px;
  background:var(--teal-600); color:var(--white);
  font-family:var(--f-head); font-weight:700; font-size:.85rem;
  box-shadow:var(--sh-teal);
}
.subgroup__lead{ font-size:var(--t-sm); color:var(--muted); max-width:70ch; margin:0; }

/* the local-language / clinical alternative name inside a card title */
.subcard__alt{
  display:block; font-family:var(--f-body); font-weight:500;
  font-size:var(--t-xs); color:var(--muted); letter-spacing:0; margin-top:3px;
}

/* ---------- 24b. HERO IMAGE: CONTAINED VARIANT ------------------------- */
/* For product-style shots on a plain ground that must not be cropped. */
.hero__img--contain{ background:var(--mint-50); }
.hero__img--contain img{ object-fit:contain; padding:clamp(18px,3vw,40px); }
.hero__slide.is-active .hero__img--contain img{ transform:none; }

/* ---------- 28b. MAP BAND (home page) ---------------------------------- */
.mapband .wrap{ position:relative; z-index:2; }
.mapband .mapwrap{ box-shadow:var(--sh-3); }
.mapband .mapwrap iframe{ height:440px; }
@media (max-width:700px){ .mapband .mapwrap iframe{ height:320px; } }

/* ---------- 23b. FOOTER: AREAS WE SERVE -------------------------------- */
.footer__areas{
  border-top:1px solid rgba(255,255,255,.1);
  padding:26px 0 22px;
}
.footer__areas h5{ margin-bottom:14px; }
.footer__areas ul{ display:flex; flex-wrap:wrap; gap:9px; }
.footer__areas li{ margin:0; opacity:1; }
.footer__areas li span,
.footer__areas li a{
  display:inline-block;
  font-size:var(--t-xs); color:var(--on-dark);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  padding:7px 14px; border-radius:var(--pill);
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.footer__areas li a:hover{ background:rgba(22,166,127,.22); border-color:var(--emerald); color:var(--white); }
.footer__areas .note{ font-size:var(--t-xs); opacity:.6; margin-top:14px; }

/* ---------- 25b. PAGE-HERO BACKGROUND PHOTOS ---------------------------- */
/* Additive only: .phero keeps its existing gradient stack. A themed page gets
   .phero--bg plus one .phero--<page> class that supplies the image.

   Layering inside .phero (which is position:relative, overflow:hidden):
     ::before  z-0  the photograph
     .blob     z-0  the existing decorative blur (unchanged, paints over photo)
     ::after   z-1  translucent brand wash — this is what keeps text readable
     .wrap     z-2  the actual heading content (already set on .phero .wrap)

   The wash is deliberately heavy (~.86 light) so --ink headings clear WCAG AA
   over a busy photo. The photo still reads as texture underneath, and the
   mint/amber tint keeps the page feeling like the rest of the site. */
.phero--bg{
  min-height:clamp(240px,30vw,360px);
  background-color:var(--mint-50);      /* fallback while the photo loads */
}
.phero--bg::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--phero-photo);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* Wash opacity is not a taste call — it is set from measured contrast.
   Worst case (a pure-black photo underneath) this scrim yields:
     h1  --ink   12.2:1     body --body 4.56:1     both clear WCAG AA.
   Dropping to .84 put body text at 3.7:1, i.e. below AA, so .93 is the floor. */
.phero--bg::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(120deg,rgba(22,166,127,.08),rgba(255,176,32,.06)),
    linear-gradient(180deg,
      rgba(241,249,247,.94) 0%,
      rgba(241,249,247,.93) 45%,
      rgba(255,255,255,.96) 100%);
}
/* The breadcrumb uses --muted, which already sat at 3.09:1 on the plain hero —
   under AA before any photo. On themed pages it moves up one existing token to
   --body, which clears AA. No new colours; scoped to themed pages only. */
.phero--bg .crumb{ color:var(--body); }
/* Photos are large; on small screens a fixed focal point avoids awkward crops. */
@media (max-width:700px){
  .phero--bg{ min-height:200px; }
  .phero--bg::before{ background-position:50% 32%; }
}
/* Users who ask for reduced data get the flat brand gradient, not a 2MB PNG. */
@media (prefers-reduced-data:reduce){
  .phero--bg::before{ display:none; }
}

/* one rule per themed page — image only, everything else inherited */
.phero--about{         --phero-photo:url("../images/bg/about.png"); }
.phero--services{      --phero-photo:url("../images/bg/services.png"); }
.phero--physiotherapy{ --phero-photo:url("../images/bg/physiotherapy.png"); }
.phero--orthotics{     --phero-photo:url("../images/bg/orthotics.png"); }
.phero--prosthetics{   --phero-photo:url("../images/bg/prosthetics.png"); }
.phero--testimonials{  --phero-photo:url("../images/bg/testimonials.png"); }
.phero--contact{       --phero-photo:url("../images/bg/contact.png"); }