/* ==========================================================================
   Dr. Moaiyad Pacha — Specialist Orthodontics, Dubai
   Layout system v5
   --------------------------------------------------------------------------
   Rebuilt from the layout primitives up. v4 grew a centred 1080px box that
   every page sat inside, a mega menu positioned from the middle of one nav
   button, three-column grids that crushed cards to 200px, and a fixed 300px
   rail that squeezed the article beside it. None of that is patched here;
   the containers, sections, grids, shells, menu and image components are all
   redefined.

   Rules of the system
   -------------------
   * One container primitive (.wrap) with five widths. Nothing else sets a
     max-inline-size on a layout box, and the page itself is never boxed —
     backgrounds, heroes and media run edge to edge while text stays at a
     reading measure.
   * One spacing scale, plus fixed relationships inside a section.
   * Grids are auto-fit with a real minimum, so a column can never become a
     narrow text chute; the row drops to fewer columns instead.
   * Every rule uses logical properties, so Arabic is a real layout rather
     than a mirrored one.
   * No overflow:hidden hiding a layout bug, no negative margins used as
     positioning hacks, no fixed heights on anything that holds text.

   01 Tokens          06 Mobile nav        11 Cards & tiles
   02 Reset           07 Heroes            12 Gallery & lightbox
   03 Type            08 Breadcrumbs       13 Tables, FAQ, forms
   04 Layout          09 Editorial blocks  14 Footer
   05 Header & menu   10 Article shells    15 Motion  16 RTL  17 Print
   ========================================================================== */

/* 01 ── TOKENS ─────────────────────────────────────────────────────────── */
:root{
  /* ---- Colour ---------------------------------------------------------- */
  --color-background:#FFFFFF;
  --color-ivory:#FAF7F2;          /* first warm step                        */
  --color-ivory-2:#F2EDE5;        /* second warm step                       */
  --color-ink:#161412;            /* dark editorial surface                 */

  --color-bronze:#8A5A2B;         /* 5.87:1 on white — safe for text        */
  --color-bronze-dark:#6F4A20;    /* 7.85:1 — hover / active                */
  --color-bronze-bright:#B07D3A;  /* rules and marks only, never text       */
  --color-bronze-wash:#F6EFE6;
  --color-bronze-line:#E6DACA;

  --color-text:#17150F;           /* 17.9:1 on white                        */
  --color-text-2:#332F28;         /* body copy                              */
  --color-muted:#5A5550;          /* 7.37:1 on white                        */
  --color-muted-2:#6B655E;        /* lightest permitted                     */
  --color-on-dark:rgba(255,255,255,.82);
  --color-on-dark-2:rgba(255,255,255,.62);

  --color-border:#E8E2D9;
  --color-border-strong:#D6CCBD;
  --color-focus:#8A5A2B;

  /* The colour of the reveal curtain. It inherits, so any figure picks up
     the surface it is actually sitting on without knowing where it is. */
  --veil:var(--color-background);

  /* ---- Containers ------------------------------------------------------
     Five widths, chosen per block. The page is never inside one box.       */
  --page-max:1760px;      /* outermost frame on very large screens          */
  --wide-max:1520px;      /* grids, rails, editorial compositions           */
  --content-max:1120px;   /* standard content                               */
  --media-max:1320px;     /* stand-alone figures                            */
  --reading-max:68ch;     /* long-form medical prose                        */

  /* Gutter: 20px on a phone, ~32px on a tablet, ~56–64px on a laptop,
     80px on a large desktop. One expression, no breakpoint steps.          */
  --gutter:clamp(20px,4.4vw,80px);

  /* ---- Space -----------------------------------------------------------
     A single 4px scale. Templates reference these; they never write raw
     pixel margins.                                                         */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:24px;  --space-6:32px;  --space-7:48px;  --space-8:64px;
  --space-9:80px;  --space-10:96px; --space-11:120px; --space-12:160px;

  /* Section rhythm. Three deliberate weights; a page mixes them.           */
  --section-space-sm:clamp(48px,7vw,80px);
  --section-space-md:clamp(64px,9vw,120px);
  --section-space-lg:clamp(72px,12vw,160px);

  /* Internal rhythm inside a section: eyebrow → heading → intro → media →
     body → CTA. Fixed relationships, so nothing lands on a stray value.    */
  --flow-eyebrow:var(--space-5);
  --flow-heading:var(--space-5);
  --flow-intro:var(--space-7);
  --flow-media:var(--space-7);
  --flow-cta:var(--space-8);

  /* ---- Type ------------------------------------------------------------ */
  --font-display:'Newsreader','Times New Roman',Georgia,serif;
  --font-text:'Public Sans',system-ui,-apple-system,'Segoe UI',Helvetica,sans-serif;
  --font-ar-display:'Tajawal','IBM Plex Sans Arabic',system-ui,sans-serif;
  --font-ar-text:'IBM Plex Sans Arabic','Tajawal',system-ui,sans-serif;

  /* Scale rebuilt so headings shrink before they wrap into narrow stacks:
     the lower bound of each clamp is a size that fits a 320px column.      */
  --fs-micro:.6875rem;
  --fs-sm:.8125rem;
  --fs-base:clamp(1rem,.97rem + .14vw,1.0625rem);
  --fs-lead:clamp(1.0625rem,1rem + .5vw,1.375rem);
  --fs-h4:1.0625rem;
  --fs-h3:clamp(1.1875rem,1.12rem + .34vw,1.4375rem);
  --fs-h2:clamp(1.5rem,1.24rem + 1.28vw,2.625rem);
  --fs-h1:clamp(1.875rem,1.44rem + 2.1vw,3.5rem);
  --fs-hero:clamp(2.25rem,1.5rem + 3.6vw,5.25rem);

  --ls-eyebrow:.2em;
  --lh-head:1.14;
  --lh-body:1.7;

  /* ---- Aspect ratios — intentional, one per image role ----------------- */
  --ar-portrait:4/5;
  --ar-editorial:4/3;
  --ar-wide:3/2;
  --ar-cinema:16/9;
  --ar-tile:16/10;

  /* ---- Radius — restrained. Large media is square. --------------------- */
  --radius-xs:2px;
  --radius:3px;
  --radius-pill:999px;

  /* ---- Depth — hairlines first, shadow only where it earns its place --- */
  --shadow-subtle:0 1px 2px rgba(22,20,18,.04);
  --shadow-lift:0 6px 18px rgba(22,20,18,.06),0 1px 3px rgba(22,20,18,.04);
  --shadow-menu:0 24px 60px rgba(22,20,18,.13),0 2px 8px rgba(22,20,18,.06);

  /* ---- Motion ---------------------------------------------------------- */
  --motion-fast:180ms;
  --motion-normal:320ms;
  --motion-slow:650ms;
  --motion-reveal:900ms;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  /* ---- Chrome ---------------------------------------------------------- */
  --nav-h:78px;
  --aside-w:clamp(260px,24vw,340px);

  /* ---- Layers ---------------------------------------------------------- */
  --z-sticky:50;
  --z-header:200;
  --z-menu:210;
  --z-overlay:300;
  --z-skip:400;
}

/* 02 ── RESET ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;min-inline-size:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--color-background);color:var(--color-text-2);
  font-family:var(--font-text);font-size:var(--fs-base);line-height:var(--lh-body);
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
figure,dl,blockquote{margin:0}
img,video,svg,picture{max-inline-size:100%;display:block}
img,video{block-size:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;color:inherit}
hr{border:0;border-block-start:1px solid var(--color-border);margin-block:var(--space-9)}
::selection{background:var(--color-bronze-wash);color:var(--color-text)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:2px}

.skip-link{
  position:absolute;inset-block-start:-100px;inset-inline-start:var(--space-4);
  z-index:var(--z-skip);background:var(--color-bronze);color:#fff;
  padding:var(--space-3) var(--space-5);border-radius:var(--radius);
  text-decoration:none;font-weight:600;
}
.skip-link:focus{inset-block-start:var(--space-3)}
.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* 03 ── TYPE ──────────────────────────────────────────────────────────── */
h1,h2,h3{
  font-family:var(--font-display);font-weight:400;font-optical-sizing:auto;
  color:var(--color-text);line-height:var(--lh-head);letter-spacing:-.018em;
  margin:0 0 var(--flow-heading);text-wrap:balance;
}
h1{font-size:var(--fs-h1);line-height:1.07;letter-spacing:-.026em;
  max-inline-size:20ch}
h2{font-size:var(--fs-h2);letter-spacing:-.022em;
  margin-block-start:clamp(48px,8vw,96px);max-inline-size:24ch}
h3{font-size:var(--fs-h3);margin-block-start:clamp(32px,5vw,48px);max-inline-size:34ch}
h4{font-family:var(--font-text);font-size:var(--fs-h4);font-weight:650;
  color:var(--color-text);line-height:1.35;margin:var(--space-6) 0 var(--space-3)}
h2:first-child,h3:first-child,h4:first-child{margin-block-start:0}

p{margin:0 0 var(--space-5);text-wrap:pretty}
p:last-child{margin-block-end:0}

a{color:var(--color-bronze);text-decoration:none;
  transition:color var(--motion-fast) var(--ease)}
a:hover{color:var(--color-bronze-dark)}

.prose a{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  box-shadow:inset 0 -1px 0 0 var(--color-bronze-line);
  transition:background-size var(--motion-normal) var(--ease),
             color var(--motion-fast) var(--ease);
  padding-block-end:1px;
}
.prose a:hover{background-size:100% 1px}
[dir="rtl"] .prose a{background-position:100% 100%}

strong,b{font-weight:650;color:var(--color-text)}
em,i{font-style:italic}

.eyebrow{
  font-family:var(--font-text);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--color-bronze);margin:0 0 var(--flow-eyebrow);
  display:flex;align-items:center;gap:var(--space-4);
}
.eyebrow::before{
  content:"";inline-size:var(--rule,32px);block-size:1px;flex:none;
  background:var(--color-bronze-bright);transform-origin:left center;
}
[dir="rtl"] .eyebrow::before{transform-origin:right center}

.lead{font-size:var(--fs-lead);line-height:1.58;color:var(--color-text-2);
  max-inline-size:60ch}
.small{font-size:var(--fs-sm);color:var(--color-muted);line-height:1.6}
.dim{color:var(--color-muted)}

/* Reading measure. Medical prose is never stretched across a wide screen. */
.prose{max-inline-size:var(--reading-max)}
.prose ul,.prose ol{margin:0 0 var(--space-5);padding-inline-start:1.25em}
.prose li{margin-block-end:var(--space-3)}
.prose li::marker{color:var(--color-bronze-bright)}
.prose > :last-child{margin-block-end:0}
/* Long unbroken strings (a URL, an appliance code) wrap rather than widen
   the column. break-word, not anywhere: ordinary words still break at
   sensible points. */
.prose,.nap dd,.footer address,.pull,.callout,.tile__body{overflow-wrap:break-word}

/* 04 ── LAYOUT ────────────────────────────────────────────────────────── */
/* One container primitive. .wrap is the standard content width; modifiers
   widen or narrow it. Nothing else in the stylesheet sets a max-inline-size
   on a layout box. */
.wrap{inline-size:100%;max-inline-size:var(--content-max);margin-inline:auto;
  padding-inline:var(--gutter)}
.wrap-content{max-inline-size:var(--content-max)}
.wrap-wide{max-inline-size:var(--wide-max)}
.wrap-narrow{max-inline-size:calc(var(--reading-max) + 2 * var(--gutter))}
.wrap-page{max-inline-size:var(--page-max)}
.wrap-full{max-inline-size:none}

/* Full-bleed: a block that runs edge to edge. Every element carrying this
   class is a direct child of a full-width <section>, never of a padded
   .wrap, so it is simply 100% wide. Sizing from 100vw instead would make it
   a scrollbar wider than the page and shift it off centre. */
.bleed{inline-size:100%;margin-inline:0}

.section{padding-block:var(--section-space-md)}
.section--sm{padding-block:var(--section-space-sm)}
.section--md{padding-block:var(--section-space-md)}
.section--lg{padding-block:var(--section-space-lg)}
.section--tight{padding-block:var(--section-space-sm)}
.section--flush-top{padding-block-start:0}
.section--flush-bottom{padding-block-end:0}
.section--ivory{background:var(--color-ivory);--veil:var(--color-ivory)}
.section--ivory-2{background:var(--color-ivory-2);--veil:var(--color-ivory-2)}
.section--bronze{background:var(--color-bronze-wash);--veil:var(--color-bronze-wash)}
.section--ink{background:var(--color-ink);color:var(--color-on-dark);
  --veil:var(--color-ink)}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}
.section--ink .eyebrow{color:#D6A56C}
.section--ink .eyebrow::before{background:#B07D3A}
.section--ink a{color:#E3C199}
.section--ink .small,.section--ink .dim{color:var(--color-on-dark-2)}
.section--ink .lead{color:var(--color-on-dark)}

.section-head{max-inline-size:56ch;margin-block-end:clamp(40px,6vw,80px)}
.section-head p{color:var(--color-muted)}
.section-head--wide{max-inline-size:72ch}
.section-num{
  font-family:var(--font-display);font-size:.75rem;letter-spacing:.24em;
  color:var(--color-bronze);display:block;margin-block-end:var(--space-4);
}

/* Grids. auto-fit with a real minimum, so a column can never collapse into
   a narrow text chute — the row drops to fewer columns instead. */
.grid{display:grid;gap:clamp(24px,2.4vw,44px)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}

/* Splits. Asymmetric by default; the media side may be the wider one so an
   image is never squeezed into a small centred rectangle. */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,4.4vw,88px);align-items:center}
.split--top{align-items:start}
.split--wide{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.split--narrow{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.split--57{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split--75{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width:1000px){
  .split,.split--wide,.split--narrow,.split--57,.split--75{
    grid-template-columns:minmax(0,1fr);gap:var(--space-7)}
}

/* A bronze hairline that draws itself into view. */
.divider{block-size:1px;background:var(--color-border);position:relative;
  margin-block:var(--space-9)}
.divider::after{content:"";position:absolute;inset-block-start:0;
  inset-inline-start:0;block-size:1px;inline-size:0;
  background:var(--color-bronze-bright);
  transition:inline-size var(--motion-slow) var(--ease-out)}
.divider.in::after{inline-size:88px}

/* ---- Image components ------------------------------------------------
   One class per image role. There is no single generic object-fit:cover: a
   portrait, a clinical photograph and a wide editorial band each get the
   ratio and the fit that suits what they show. */
.im{display:block;inline-size:100%;background:var(--color-ivory-2)}
.im img{inline-size:100%;display:block}

/* Native ratio, nothing cropped. The default for clinical photographs,
   where a crop would remove anatomy. */
.im--native img{block-size:auto}

.im--portrait{aspect-ratio:var(--ar-portrait)}
.im--editorial{aspect-ratio:var(--ar-editorial)}
.im--wide{aspect-ratio:var(--ar-wide)}
.im--cinema{aspect-ratio:var(--ar-cinema)}
.im--tile{aspect-ratio:var(--ar-tile)}
.im--portrait img,.im--editorial img,.im--wide img,
.im--cinema img,.im--tile img{block-size:100%;object-fit:cover;
  object-position:var(--focal-x,50%) var(--focal-y,50%)}

/* A portrait is framed from the upper part of the picture, never from the
   middle, so the face is never cut. Individual images override the focal
   point with --focal-x / --focal-y, set per asset by the build. */
.im--portrait img,.im--face img{
  object-position:var(--focal-x,50%) var(--focal-y,20%)}

/* Fills the column it is given, in both axes, so a 50/50 split has a
   full-height image on its side rather than a small centred rectangle. */
.im--fill{block-size:100%;aspect-ratio:auto}
.im--fill img{block-size:100%;object-fit:cover;
  object-position:var(--focal-x,50%) var(--focal-y,50%)}

/* 05 ── HEADER & MEGA MENU ────────────────────────────────────────────── */
.header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:var(--z-header);
  border-block-end:1px solid transparent;
  transition:background var(--motion-normal) var(--ease),
             border-color var(--motion-normal) var(--ease),
             transform var(--motion-normal) var(--ease);
}
.header[data-solid="true"],.header[data-menu-state="open"]{
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.5) blur(18px);
  -webkit-backdrop-filter:saturate(1.5) blur(18px);
  border-block-end-color:var(--color-border);
}
.header[data-hidden="true"]{transform:translateY(-100%)}

/* Over a dark hero the chrome inverts — but not while the mega menu is
   open, because the panel behind it is white. */
.header[data-over="dark"][data-solid="false"][data-menu-state="closed"] .brand__name b{color:#fff}
.header[data-over="dark"][data-solid="false"][data-menu-state="closed"] .brand__name span{color:rgba(255,255,255,.7)}
.header[data-over="dark"][data-solid="false"][data-menu-state="closed"] .brand__mark{border-color:rgba(255,255,255,.55);color:#fff}
.header[data-over="dark"][data-solid="false"][data-menu-state="closed"] .nav__link{color:rgba(255,255,255,.9)}
.header[data-over="dark"][data-solid="false"][data-menu-state="closed"] .nav__link::after{background:#D6A56C}
.header[data-over="dark"][data-solid="false"][data-menu-state="closed"] .lang{border-color:rgba(255,255,255,.35)}
.header[data-over="dark"][data-solid="false"][data-menu-state="closed"] .lang a{color:rgba(255,255,255,.78)}
.header[data-over="dark"][data-solid="false"][data-menu-state="closed"] .lang a[aria-current="true"]{background:#fff;color:var(--color-text)}
.header[data-over="dark"][data-solid="false"][data-menu-state="closed"] .burger span,
.header[data-over="dark"][data-solid="false"][data-menu-state="closed"] .burger span::before,
.header[data-over="dark"][data-solid="false"][data-menu-state="closed"] .burger span::after{background:#fff}
.header[data-over="dark"][data-solid="false"][data-menu-state="closed"] .burger{border-color:rgba(255,255,255,.38)}

.header__bar{min-block-size:var(--nav-h);display:grid;align-items:center;
  grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-5)}
.brand{display:flex;align-items:center;gap:var(--space-3);justify-self:start}
.brand__mark{
  inline-size:38px;block-size:38px;flex:none;border:1px solid var(--color-bronze);
  color:var(--color-bronze);display:grid;place-items:center;border-radius:50%;
  font-family:var(--font-display);font-size:.9375rem;
  transition:background var(--motion-normal) var(--ease),
             color var(--motion-normal) var(--ease);
}
.brand:hover .brand__mark{background:var(--color-bronze);color:#fff}
.brand__name{display:grid;line-height:1.2}
.brand__name b{font-family:var(--font-display);font-weight:500;font-size:1.0625rem;
  color:var(--color-text);letter-spacing:-.01em;white-space:nowrap}
.brand__name span{font-size:.5625rem;color:var(--color-muted);letter-spacing:.13em;
  text-transform:uppercase;white-space:nowrap}

.nav{display:flex;align-items:center;justify-content:center;
  gap:clamp(2px,.4vw,8px);justify-self:center}
.nav__link{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:10px 2px;font-size:clamp(.8125rem,.77rem + .12vw,.875rem);
  font-weight:500;color:var(--color-text-2);white-space:nowrap;
  font-family:inherit;margin-inline:clamp(4px,.55vw,12px);
  transition:color var(--motion-fast) var(--ease);
}
.nav__link::after{
  content:"";position:absolute;inset-block-end:2px;inset-inline-start:50%;
  translate:-50% 0;inline-size:0;block-size:1px;background:var(--color-bronze);
  transition:inline-size var(--motion-normal) var(--ease);
}
.nav__link:hover::after,.nav__link[aria-expanded="true"]::after{inline-size:100%}
.nav__link[aria-current="page"]{color:var(--color-bronze)}
.nav__link[aria-current="page"]::after{inline-size:100%}
.nav__link svg{inline-size:9px;block-size:9px;opacity:.55;
  transition:transform var(--motion-normal) var(--ease)}
.nav__link[aria-expanded="true"] svg{transform:rotate(180deg)}

/* The mega menu spans the header, not the button that opens it.
   v4 anchored it to .has-menu with inset-inline-start:50% and a -50%
   translate, so a 1080px panel was centred on a nav button that sits left
   of centre — which is why its first column started off-screen. The panel is
   now a full-width strip positioned on the header itself, with an inner
   .wrap that shares the page container and gutter. It cannot leave the
   viewport at any width. */
.has-menu{position:static}
.menu{
  position:absolute;inset-block-start:100%;inset-inline:0;
  background:#fff;border-block:1px solid var(--color-border);
  box-shadow:var(--shadow-menu);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--motion-normal) var(--ease),
             transform var(--motion-normal) var(--ease),
             visibility var(--motion-normal) var(--ease);
  z-index:var(--z-menu);
  max-block-size:calc(100svh - var(--nav-h));overflow-y:auto;
}
.menu[data-open="true"]{opacity:1;visibility:visible;transform:none}
.menu__inner{
  display:grid;gap:clamp(24px,2.4vw,48px);
  padding-block:clamp(28px,3vw,52px);
  /* Five columns while each stays wide enough to read; below that the grid
     drops to four, then three, then two. Text never leaves the viewport. */
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  align-items:start;
}
.menu__col h5{
  font-family:var(--font-text);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--color-bronze);margin:0 0 var(--space-4);
  padding-block-end:var(--space-3);
  border-block-end:1px solid var(--color-bronze-line);
}
.menu__link{
  display:block;padding:7px 0;font-size:.875rem;color:var(--color-text-2);
  line-height:1.4;position:relative;
  transition:color var(--motion-fast) var(--ease),
             padding-inline-start var(--motion-fast) var(--ease);
}
.menu__link:hover{color:var(--color-bronze);padding-inline-start:10px}
.menu__link::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:50%;
  inline-size:0;block-size:1px;background:var(--color-bronze);
  transition:inline-size var(--motion-fast) var(--ease);
}
.menu__link:hover::before{inline-size:6px}
.menu__feature{background:var(--color-ivory);padding:var(--space-5);
  align-self:stretch}
.menu__feature .im{margin-block-end:var(--space-4)}
.menu__feature h5{border:0;padding:0;margin-block-end:var(--space-2)}
.menu__feature p{font-size:.8125rem;color:var(--color-muted);
  margin:0 0 var(--space-3);line-height:1.5}
/* On a narrow desktop the feature card is the first thing to go: it is
   decoration, and the links are not. */
@media (max-width:1420px){.menu__feature{display:none}}

.nav-tail{display:flex;align-items:center;gap:var(--space-4);justify-self:end}
.lang{display:inline-flex;border:1px solid var(--color-border-strong);
  border-radius:var(--radius-pill);overflow:hidden;font-size:.75rem;
  font-weight:600;flex:none}
.lang a{padding:5px 12px;color:var(--color-muted);line-height:1.6;
  transition:background var(--motion-fast) var(--ease),
             color var(--motion-fast) var(--ease)}
.lang a[aria-current="true"]{background:var(--color-text);color:#fff}
.lang a:not([aria-current]):hover{background:var(--color-ivory-2);
  color:var(--color-text)}

.burger{
  display:none;inline-size:44px;block-size:44px;flex:none;
  border:1px solid var(--color-border-strong);border-radius:var(--radius);
  align-items:center;justify-content:center;
  transition:border-color var(--motion-normal) var(--ease);
}
.burger span{display:block;inline-size:18px;block-size:1.5px;
  background:var(--color-text);position:relative;
  transition:background var(--motion-fast) var(--ease)}
.burger span::before,.burger span::after{
  content:"";position:absolute;inset-inline:0;block-size:1.5px;
  background:var(--color-text);transition:transform var(--motion-normal) var(--ease);
}
.burger span::before{inset-block-start:-6px}
.burger span::after{inset-block-start:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* The desktop bar carries seven items plus a CTA. Below 1180px there is no
   longer room for them at a readable size, so the drawer takes over. */
@media (max-width:1180px){
  .nav,.nav-tail .btn{display:none}
  .burger{display:flex}
  /* Two tracks, not three: the empty nav column must not cost a gap. */
  .header__bar{grid-template-columns:minmax(0,1fr) auto;gap:var(--space-4)}
  /* Every control in the mobile layout is at least a finger tall. */
  .btn{min-block-size:44px}
  .btn--sm{padding-block:11px}
}
@media (max-width:700px){
  /* Wordmark, language pair and burger do not fit on one phone line, and
     the language switch is also in the drawer. */
  .header .nav-tail .lang{display:none}
  .header .brand__name span{display:none}
  /* The wordmark yields before anything leaves the screen. */
  .brand{min-inline-size:0}
  .brand__name{min-inline-size:0}
  .brand__name b{overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:360px){
  .brand__mark{inline-size:34px;block-size:34px;font-size:.875rem}
  .brand__name b{font-size:1rem}
}
.header-spacer{block-size:var(--nav-h)}

/* 06 ── MOBILE NAV ────────────────────────────────────────────────────── */
/* Independent of the desktop menu: its own markup, its own positioning, its
   own scroll container. Nothing here is shared with .menu. */
.drawer{
  position:fixed;inset:0;z-index:var(--z-overlay);background:#fff;
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0);
  transition:opacity var(--motion-normal) var(--ease),
             clip-path var(--motion-normal) var(--ease),
             visibility var(--motion-normal) var(--ease);
}
.drawer[data-open="true"]{opacity:1;visibility:visible;clip-path:inset(0 0 0 0)}
.drawer__top{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);min-block-size:var(--nav-h);flex:none;
  padding-inline:var(--gutter);border-block-end:1px solid var(--color-border)}
.drawer__body{padding:var(--space-7) var(--gutter) var(--space-10);flex:1 0 auto}
.drawer[data-open="true"] .drawer__body > *{
  animation:drawerIn var(--motion-slow) var(--ease-out) both}
.drawer[data-open="true"] .drawer__body > *:nth-child(1){animation-delay:60ms}
.drawer[data-open="true"] .drawer__body > *:nth-child(2){animation-delay:100ms}
.drawer[data-open="true"] .drawer__body > *:nth-child(3){animation-delay:140ms}
.drawer[data-open="true"] .drawer__body > *:nth-child(4){animation-delay:180ms}
.drawer[data-open="true"] .drawer__body > *:nth-child(5){animation-delay:220ms}
.drawer[data-open="true"] .drawer__body > *:nth-child(6){animation-delay:260ms}
.drawer[data-open="true"] .drawer__body > *:nth-child(n+7){animation-delay:300ms}
@keyframes drawerIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.drawer__group{border-block-end:1px solid var(--color-border)}
.drawer__group > summary{
  padding:var(--space-5) 0;font-family:var(--font-display);
  font-size:clamp(1.25rem,1.06rem + .95vw,1.625rem);color:var(--color-text);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:var(--space-4);
}
.drawer__group > summary::-webkit-details-marker{display:none}
.drawer__group > summary::after{
  content:"";inline-size:9px;block-size:9px;flex:none;
  border-inline-end:1.5px solid var(--color-bronze);
  border-block-end:1.5px solid var(--color-bronze);
  transform:rotate(45deg);transition:transform var(--motion-normal) var(--ease);
}
.drawer__group[open] > summary::after{transform:rotate(-135deg)}
.drawer__sub{padding:0 0 var(--space-5);display:grid;gap:2px}
.drawer__sub a{padding:10px 0 10px var(--space-5);font-size:.9375rem;
  color:var(--color-text-2);border-inline-start:1px solid var(--color-border);
  transition:border-color var(--motion-fast) var(--ease),
             color var(--motion-fast) var(--ease),
             padding-inline-start var(--motion-fast) var(--ease)}
.drawer__sub a:hover{border-inline-start-color:var(--color-bronze);
  color:var(--color-bronze);padding-inline-start:calc(var(--space-5) + 4px)}
.drawer__sub h6{font-family:var(--font-text);font-size:var(--fs-micro);
  font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--color-bronze);margin:var(--space-5) 0 var(--space-2)}
.drawer__link{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);padding:var(--space-5) 0;font-family:var(--font-display);
  font-size:clamp(1.25rem,1.06rem + .95vw,1.625rem);color:var(--color-text);
  border-block-end:1px solid var(--color-border)}
.drawer__link::after{content:"";inline-size:18px;block-size:1px;flex:none;
  background:var(--color-bronze);
  transition:inline-size var(--motion-normal) var(--ease)}
.drawer__link:hover::after{inline-size:34px}
.drawer__cta{margin-block-start:var(--space-8);display:grid;gap:var(--space-3)}
.drawer__meta{margin-block-start:var(--space-8);padding-block-start:var(--space-5);
  border-block-start:1px solid var(--color-border);font-size:.8125rem;
  color:var(--color-muted);line-height:1.9}
.drawer__meta .lang{display:flex;inline-size:fit-content;font-size:.8125rem}
.drawer__meta .lang a{padding:10px 18px;line-height:1.4}
body.is-locked{overflow:hidden}

/* 07 ── HEROES ────────────────────────────────────────────────────────── */
/* Homepage: the real breathing video, full bleed, playing behind the type. */
.hero{
  position:relative;min-block-size:100svh;display:flex;align-items:flex-end;
  background:var(--color-ink);color:#fff;isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__media video,.hero__media img,.hero__media picture{
  position:absolute;inset:0;inline-size:100%;block-size:100%;
  object-fit:cover;object-position:58% 34%;
}
.hero__media video{z-index:1;opacity:0;transition:opacity 1.4s var(--ease)}
.hero__media video[data-ready="true"]{opacity:1}
.hero__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,9,7,.52) 0%,rgba(10,9,7,.16) 26%,
                    rgba(10,9,7,.30) 58%,rgba(10,9,7,.86) 100%),
    linear-gradient(90deg,rgba(10,9,7,.64) 0%,rgba(10,9,7,.14) 58%,rgba(10,9,7,0) 100%);
}
[dir="rtl"] .hero__scrim{
  background:
    linear-gradient(180deg,rgba(10,9,7,.52) 0%,rgba(10,9,7,.16) 26%,
                    rgba(10,9,7,.30) 58%,rgba(10,9,7,.86) 100%),
    linear-gradient(270deg,rgba(10,9,7,.64) 0%,rgba(10,9,7,.14) 58%,rgba(10,9,7,0) 100%);
}
.hero__inner{position:relative;z-index:3;inline-size:100%;
  padding-block:calc(var(--nav-h) + var(--space-10)) var(--space-10)}
.hero__eyebrow{
  font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:#D9B588;margin:0 0 var(--space-6);
  display:flex;align-items:center;gap:var(--space-4);
}
.hero__eyebrow::before{content:"";inline-size:44px;block-size:1px;
  background:#B07D3A;flex:none}
.hero h1{
  color:#fff;font-size:var(--fs-hero);line-height:1.02;letter-spacing:-.032em;
  margin:0 0 var(--space-6);max-inline-size:15ch;font-weight:400;
}
.hero h1 em{font-style:italic;color:#EBCFAA}
.hero__lede{font-size:var(--fs-lead);color:rgba(255,255,255,.86);
  max-inline-size:48ch;margin:0 0 var(--flow-intro)}
.hero__focus{display:flex;flex-wrap:wrap;margin:0 0 var(--space-8);padding:0;
  font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.86)}
.hero__focus li{list-style:none;display:flex;align-items:center}
.hero__focus li:not(:last-child)::after{content:"";inline-size:3px;block-size:3px;
  border-radius:50%;background:#B07D3A;margin-inline:var(--space-4);flex:none}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.hero__foot{margin-block-start:var(--space-9);padding-block-start:var(--space-5);
  border-block-start:1px solid rgba(255,255,255,.2);display:flex;flex-wrap:wrap;
  gap:var(--space-5) var(--space-9);align-items:baseline;font-size:.75rem;
  color:rgba(255,255,255,.66)}
.hero__foot b{color:#fff;font-weight:600;display:block;font-size:.875rem;
  margin-block-end:3px}
.hero__scroll{position:absolute;inset-block-end:var(--space-7);
  inset-inline-end:var(--gutter);z-index:4;display:flex;align-items:center;
  gap:var(--space-3);font-size:.6875rem;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:rgba(255,255,255,.64)}
.hero__scroll i{inline-size:1px;block-size:52px;background:rgba(255,255,255,.28);
  position:relative;overflow:hidden;display:block}
.hero__scroll i::after{content:"";position:absolute;inset-inline:0;block-size:16px;
  background:#B07D3A;animation:scrollhint 2.6s var(--ease-in-out) infinite}
@keyframes scrollhint{0%{inset-block-start:-16px}62%,100%{inset-block-start:52px}}
@media (max-width:900px){.hero__scroll{display:none}}
@media (max-width:700px){
  .hero{min-block-size:92svh}
  /* Desktop rhythm inside the hero pushed the booking button to 780px down a
     390×844 screen, level with the call bar. The internal gaps are tightened
     so the whole opening — eyebrow, heading, lede, focus list and both
     buttons — lands inside the first screen. Nothing is removed. */
  .hero__inner{padding-block:calc(var(--nav-h) + var(--space-6)) var(--space-7)}
  .hero h1{max-inline-size:none;margin-block-end:var(--space-5)}
  .hero__eyebrow{margin-block-end:var(--space-5)}
  .hero__lede{margin-block-end:var(--space-6)}
  .hero__focus{margin-block-end:var(--space-6)}
  .hero__foot{margin-block-start:var(--space-7)}
}

/* Interior heroes. Five treatments, assigned per page by the layout recipe. */
.phero{position:relative;padding-block:clamp(56px,7vw,104px) clamp(44px,5vw,80px)}
.phero h1{max-inline-size:18ch}
.phero__lede{font-size:var(--fs-lead);color:var(--color-text-2);
  max-inline-size:58ch;margin-block-start:var(--space-5)}
.phero__meta{display:flex;flex-wrap:wrap;gap:var(--space-2);
  margin-block-start:var(--space-6)}
.phero__meta span{font-size:.75rem;padding:6px var(--space-4);
  border-radius:var(--radius-pill);border:1px solid var(--color-bronze-line);
  background:#fff;color:var(--color-bronze-dark);font-weight:550}

/* (a) media — a photograph filling the fold with the heading over it */
.phero--media{background:var(--color-ink);--veil:var(--color-ink);color:#fff;
  padding-block:calc(var(--nav-h) + clamp(56px,7vw,120px)) clamp(56px,7vw,112px);
  min-block-size:clamp(400px,56svh,620px);display:flex;align-items:flex-end;
  isolation:isolate}
.phero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.phero__bg picture{block-size:100%}
.phero__bg img{inline-size:100%;block-size:100%;object-fit:cover;
  object-position:var(--focal-x,50%) var(--focal-y,50%)}
.phero--media::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(10,9,7,.58) 0%,rgba(10,9,7,.26) 40%,rgba(10,9,7,.82) 100%),
    linear-gradient(90deg,rgba(10,9,7,.58),rgba(10,9,7,0) 72%);
}
[dir="rtl"] .phero--media::after{
  background:
    linear-gradient(180deg,rgba(10,9,7,.58) 0%,rgba(10,9,7,.26) 40%,rgba(10,9,7,.82) 100%),
    linear-gradient(270deg,rgba(10,9,7,.58),rgba(10,9,7,0) 72%);
}
.phero--media > .wrap{position:relative;z-index:2}
.phero--media h1{color:#fff}
.phero--media .phero__lede{color:rgba(255,255,255,.86)}
.phero--media .eyebrow{color:#D9B588}
.phero--media .eyebrow::before{background:#B07D3A}
.phero--media .phero__meta span{background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.3);color:#fff}

/* (b) type — heading alone, on ivory or white with an opening rule */
.phero--type{background:var(--color-ivory);--veil:var(--color-ivory);
  padding-block:calc(var(--nav-h) + clamp(40px,5vw,72px)) clamp(48px,6vw,80px)}
.phero--rule{background:#fff}
.phero--rule::before{content:"";position:absolute;inset-block-start:0;
  inset-inline-start:0;inline-size:min(38vw,320px);block-size:2px;
  background:var(--color-bronze)}
.phero--type h1{max-inline-size:20ch}

/* Full-width band that follows or precedes a type hero. */
.phero__band{margin:0;background:var(--color-ivory-2);--veil:var(--color-ivory-2)}
.phero__band .im{aspect-ratio:auto}
.phero__band img{inline-size:100%;block-size:auto;max-block-size:76svh;
  object-fit:cover;object-position:var(--focal-x,50%) var(--focal-y,50%)}
@media (min-width:900px){
  .phero__band img{block-size:clamp(300px,32vw,460px);max-block-size:none}
}

/* (c) split — heading beside the image, the image filling its half */
.phero--split{background:var(--color-ivory);--veil:var(--color-ivory);padding-block-end:0}
.phero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4vw,80px);align-items:center}
.phero__cut{margin:0;align-self:stretch;min-block-size:clamp(300px,34vw,540px)}
.phero__cut .im{block-size:100%;aspect-ratio:auto}
.phero__cut img{inline-size:100%;block-size:100%;object-fit:cover;
  object-position:var(--focal-x,50%) var(--focal-y,50%)}
@media (max-width:1000px){
  .phero__grid{grid-template-columns:minmax(0,1fr)}
  .phero__cut{margin-inline:calc(-1 * var(--gutter));min-block-size:0}
  .phero__cut img{block-size:auto;max-block-size:70svh;
    aspect-ratio:var(--ar-wide);object-fit:cover}
}

/* (d) overlap — a wide image with the heading card riding up over it */
.phero--overlap{background:transparent;padding-block:0}
.phero__card{background:#fff;padding:clamp(28px,3.4vw,64px);
  max-inline-size:min(760px,100%);
  margin-block:clamp(-160px,-12vw,-56px) var(--section-space-md);
  position:relative;z-index:2;
  border-inline-start:2px solid var(--color-bronze)}
.phero__card h1{max-inline-size:none}

/* 08 ── BREADCRUMBS ───────────────────────────────────────────────────── */
.crumbs{padding-block:var(--space-4);font-size:.75rem;color:var(--color-muted);
  border-block-end:1px solid var(--color-border);background:#fff}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:var(--space-2);align-items:center}
.crumbs li{display:flex;align-items:center;gap:var(--space-2)}
.crumbs li+li::before{content:"";inline-size:12px;block-size:1px;flex:none;
  background:var(--color-border-strong)}
.crumbs a{color:var(--color-muted)}
.crumbs a:hover{color:var(--color-bronze)}
.crumbs [aria-current="page"]{color:var(--color-text-2)}

/* 09 ── EDITORIAL BLOCKS ──────────────────────────────────────────────── */
/* A figure uses the whole column it is given. */
.figure{margin-block:clamp(40px,6vw,80px);max-inline-size:var(--media-max)}
.figure .im{aspect-ratio:auto}
.figure img{inline-size:100%;block-size:auto}
.figure figcaption,.mod__media figcaption{
  font-size:.8125rem;color:var(--color-muted);margin-block-start:var(--space-4);
  line-height:1.6;padding-inline-start:var(--space-4);
  border-inline-start:1px solid var(--color-bronze-bright);
}

/* Wide media band with an overlaid statement. */
.band{position:relative;margin-block:var(--section-space-md);isolation:isolate}
.band .im{aspect-ratio:auto}
.band img{inline-size:100%;block-size:clamp(300px,44vw,620px);object-fit:cover;
  object-position:var(--focal-x,50%) var(--focal-y,50%)}
.band__overlay{position:absolute;inset-block-end:0;inset-inline-start:0;
  z-index:2;padding:clamp(24px,3.4vw,64px);color:#fff;max-inline-size:56ch}
.band__overlay h3{color:#fff;margin:0 0 var(--space-3);font-size:var(--fs-h2);
  max-inline-size:none}
.band__overlay p{color:rgba(255,255,255,.86);margin:0}
.band{--veil:var(--color-background)}
.band--overlay::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(10,9,7,.86),rgba(10,9,7,.02) 62%)}

/* On a phone the band is a clinical photograph roughly 350px across. A
   statement laid over it covers the anatomy it is describing and leaves
   three lines of small white type on a busy image. Below the split the
   photograph keeps its own shape and shows everything, and the statement
   becomes a caption underneath it. */
@media (max-width:760px){
  .band img{block-size:auto;max-block-size:64svh}
  .band--overlay::after{display:none}
  .band__overlay{position:static;padding:var(--space-5) 0 0;max-inline-size:none}
  .band__overlay h3{color:var(--color-text);font-size:var(--fs-h3)}
  .band__overlay p{color:var(--color-muted)}
  .section--ink .band__overlay h3{color:#fff}
  .section--ink .band__overlay p{color:var(--color-on-dark-2)}
}

/* Image + text module. The image fills its column rather than sitting as a
   small stamp beside a wall of text. */
.mod{margin-block:var(--section-space-md)}
.mod__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,3.6vw,72px);align-items:center}
.mod--reverse .mod__media{order:2}
.mod__media{margin:0;align-self:stretch}
.mod__media .im{aspect-ratio:auto}
.mod__media img{inline-size:100%;block-size:auto}
.mod__body h2,.mod__body h3{margin-block-start:0}
.mod__body h2{font-size:var(--fs-h3);letter-spacing:-.014em}
.mod__body > :last-child{margin-block-end:0}
@media (max-width:900px){
  .mod__grid{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  .mod--reverse .mod__media{order:0}
}

.pull{margin-block:var(--section-space-md);
  padding-inline-start:clamp(20px,5vw,64px);
  border-inline-start:1px solid var(--color-bronze);max-inline-size:46ch}
.pull p{font-family:var(--font-display);
  font-size:clamp(1.3125rem,1.05rem + 1.1vw,1.875rem);line-height:1.3;
  color:var(--color-text);margin:0;letter-spacing:-.02em}
.pull cite{display:block;margin-block-start:var(--space-6);font-style:normal;
  font-size:.8125rem;color:var(--color-muted)}
.pull cite b{display:block;color:var(--color-text-2);font-weight:600}

.callout{background:var(--color-bronze-wash);
  padding:clamp(24px,4vw,48px) clamp(20px,5vw,64px);
  margin-block:clamp(32px,5vw,64px);
  border-inline-start:1px solid var(--color-bronze)}
.callout__t{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:500;
  color:var(--color-bronze-dark);margin:0 0 var(--space-3);
  line-height:var(--lh-head)}
.callout p:last-child{margin-block-end:0}
.callout--warn,.callout--sand{background:var(--color-ivory-2);
  border-inline-start-color:var(--color-text)}
.callout--warn .callout__t,.callout--sand .callout__t{color:var(--color-text)}

.steps{list-style:none;margin-block:var(--space-7);padding:0;counter-reset:step}
.steps{--step-indent:clamp(40px,11vw,64px)}
.steps li{counter-increment:step;position:relative;
  padding-inline-start:var(--step-indent);
  padding-block-end:clamp(32px,5vw,64px)}
.steps li::before{content:counter(step,decimal-leading-zero);
  position:absolute;inset-inline-start:0;inset-block-start:-4px;
  font-family:var(--font-display);font-size:1.125rem;color:var(--color-bronze)}
.steps li::after{content:"";position:absolute;inset-inline-start:12px;
  inset-block-start:26px;block-size:calc(100% - 34px);inline-size:1px;
  background:var(--color-border)}
.steps li::after{inset-inline-start:calc(var(--step-indent) / 2 - 20px)}
.steps li:last-child::after{display:none}
.steps b{display:block;color:var(--color-text);font-weight:650;
  margin-block-end:var(--space-2)}
.steps p{color:var(--color-muted);margin:0}

/* Horizontal step flow — used by "Your first visit". */
.flow{display:grid;gap:1px;background:var(--color-border);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.flow__step{background:#fff;padding:clamp(24px,2.2vw,44px)}
.flow__n{font-family:var(--font-display);font-size:.75rem;letter-spacing:.24em;
  color:var(--color-bronze);display:block;margin-block-end:var(--space-5)}
.flow__step i{font-size:1.375rem;color:var(--color-bronze);display:block;
  margin-block-end:var(--space-5);inline-size:auto}
.flow__step h3{margin:0 0 var(--space-3);font-family:var(--font-text);
  font-size:1.0625rem;font-weight:650;max-inline-size:none}
.flow__step p{margin:0;font-size:.9375rem;color:var(--color-muted)}
.section--ivory .flow{background:var(--color-border-strong)}
.section--ivory .flow__step{background:var(--color-ivory)}

.stats{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  border-block-start:1px solid var(--color-border);margin-block:var(--space-8);
  gap:var(--space-6) clamp(24px,2.4vw,48px)}
.stats div{padding-block-start:var(--space-7)}
.stats b{display:block;font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.375rem);color:var(--color-text);
  line-height:1.08;margin-block-end:var(--space-3);letter-spacing:-.026em}
.stats span{font-size:.8125rem;color:var(--color-muted);line-height:1.5;
  display:block}
.section--ink .stats{border-block-start-color:rgba(255,255,255,.2)}
.section--ink .stats b{color:#fff}
.section--ink .stats span{color:var(--color-on-dark-2)}

.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;padding:0;
  margin-block:var(--space-7)}
.chips a{display:inline-block;padding:9px var(--space-5);
  border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);
  font-size:.8125rem;color:var(--color-text-2);
  transition:border-color var(--motion-fast) var(--ease),
             color var(--motion-fast) var(--ease),
             background var(--motion-fast) var(--ease)}
.chips a:hover{border-color:var(--color-bronze);color:var(--color-bronze);
  background:var(--color-bronze-wash)}

.cta-band{background:var(--color-ink);--veil:var(--color-ink);color:var(--color-on-dark);
  position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;
  block-size:1px;background:linear-gradient(90deg,transparent,
  var(--color-bronze-bright) 50%,transparent)}
.cta-band h2{color:#fff;margin-block-start:0;font-size:var(--fs-h1)}
.cta-band p{color:var(--color-on-dark-2)}

.disclaimer{font-size:.8125rem;color:var(--color-muted);
  border-block-start:1px solid var(--color-border);
  padding-block-start:var(--space-5);margin-block-start:clamp(48px,8vw,96px);
  line-height:1.65}

.nap{display:grid;gap:var(--space-4);font-size:.9375rem}
.nap dt{font-size:var(--fs-micro);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--color-muted-2);font-weight:600}
.nap dd{margin:0 0 var(--space-3);color:var(--color-text-2)}
.nap dd:last-child{margin-block-end:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-3);padding:15px var(--space-7);border-radius:var(--radius);
  font-family:var(--font-text);font-size:.875rem;font-weight:600;
  letter-spacing:.01em;border:1px solid transparent;cursor:pointer;
  text-align:center;text-decoration:none;line-height:1.25;position:relative;
  max-inline-size:100%;overflow:hidden;
  transition:background var(--motion-normal) var(--ease),
             color var(--motion-normal) var(--ease),
             border-color var(--motion-normal) var(--ease),
             transform var(--motion-fast) var(--ease)}
.btn > *{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;z-index:0;
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--motion-normal) var(--ease)}
[dir="rtl"] .btn::before{transform-origin:right center}
.btn:hover::before{transform:scaleX(1)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn--primary{background:var(--color-bronze);color:#fff}
.btn--primary::before{background:var(--color-bronze-dark)}
.btn--primary:hover{color:#fff}
.btn--secondary{background:transparent;color:var(--color-bronze);
  border-color:var(--color-bronze)}
.btn--secondary::before{background:var(--color-bronze)}
.btn--secondary:hover{color:#fff}
.btn--ghost{background:transparent;color:var(--color-text);
  border-color:var(--color-border-strong)}
.btn--ghost::before{background:var(--color-text)}
.btn--ghost:hover{color:#fff;border-color:var(--color-text)}
.btn--light{background:#fff;color:var(--color-bronze-dark)}
.btn--light::before{background:var(--color-bronze-wash)}
.btn--on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn--on-dark::before{background:rgba(255,255,255,.14)}
.btn--on-dark:hover{color:#fff;border-color:#fff}
.btn--sm{padding:10px var(--space-5);font-size:.8125rem}
.btn--lg{padding:18px var(--space-8);font-size:.9375rem}
.btn--block{inline-size:100%}
@media (max-width:520px){.hero__actions .btn,.cta-band .btn{inline-size:100%}}

.link-arrow{display:inline-flex;align-items:center;gap:12px;font-weight:600;
  font-size:.875rem;color:var(--color-bronze);text-decoration:none}
.link-arrow::after{content:"";inline-size:22px;block-size:1px;
  background:currentColor;flex:none;
  transition:inline-size var(--motion-normal) var(--ease)}
.link-arrow:hover::after{inline-size:40px}

/* 10 ── ARTICLE SHELLS ────────────────────────────────────────────────── */
/* Main column ~72–75%, rail ~25–28%, with a real gap. v4 gave the rail a
   fixed 300px inside a 1080px container, which left the prose barely wider
   than the rail on a laptop. */
.article{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,var(--aside-w));
  gap:clamp(40px,4.4vw,88px);align-items:start}
@media (max-width:1080px){.article{grid-template-columns:minmax(0,1fr)}}
.article--wide{grid-template-columns:minmax(0,1fr)}
.article--wide .prose{margin-inline:auto}
.article--flip{grid-template-columns:minmax(0,var(--aside-w)) minmax(0,1fr)}
.article--flip > .prose{grid-column:2;grid-row:1}
.article--flip > .aside{grid-column:1;grid-row:1}
@media (max-width:1080px){
  .article--flip{grid-template-columns:minmax(0,1fr)}
  .article--flip > .prose{grid-column:1}
  .article--flip > .aside{grid-column:1;grid-row:2}
}
/* Asymmetric shell: a running title column beside the prose. */
.article--sticky{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
@media (max-width:1000px){.article--sticky{grid-template-columns:minmax(0,1fr)}}

.aside{display:grid;gap:var(--space-6);align-content:start}
@media (min-width:1081px){
  .aside{position:sticky;inset-block-start:calc(var(--nav-h) + 24px);
    z-index:var(--z-sticky)}
}
@media (max-width:1080px){
  /* Under the prose rather than beside it. 80px of clear air on a phone
     reads as a gap in the page, so the join is proportionate instead. */
  .aside{margin-block-start:clamp(40px,6vw,80px);
    grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
}
.aside--strip{margin-block-start:var(--section-space-sm);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  align-items:start}
@media (min-width:1081px){.aside--strip{position:static}}

.sticky-col{position:sticky;inset-block-start:calc(var(--nav-h) + 48px)}
@media (max-width:1000px){.sticky-col{position:static}}
.sticky-head .sticky-col{max-inline-size:34ch}
.sticky-head__t{font-family:var(--font-display);
  font-size:clamp(1.375rem,1.15rem + 1vw,2rem);line-height:1.16;
  margin-block:var(--space-4) var(--space-6);max-inline-size:18ch}
.sticky-head__toc{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  border-inline-start:1px solid var(--color-border);
  padding-inline-start:var(--space-5)}
.sticky-head__toc a{font-size:.875rem;color:var(--color-muted);
  text-decoration:none}
.sticky-head__toc a:hover{color:var(--color-bronze-dark)}

/* "On this page" — compact, never a tall box. On a phone it is a closed
   accordion, so it costs one line instead of a screen. */
.toc{border-block:1px solid var(--color-border);padding-block:var(--space-4)}
.toc > summary{list-style:none;cursor:pointer;display:flex;
  justify-content:space-between;align-items:center;gap:var(--space-4);
  font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--color-bronze)}
.toc > summary::-webkit-details-marker{display:none}
.toc > summary::after{content:"";inline-size:8px;block-size:8px;flex:none;
  border-inline-end:1.5px solid currentColor;
  border-block-end:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform var(--motion-normal) var(--ease)}
.toc[open] > summary::after{transform:rotate(-135deg)}
.toc ol{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:2px;
  counter-reset:toc}
.toc a{counter-increment:toc;display:block;padding:6px 0;font-size:.875rem;
  line-height:1.45;color:var(--color-text-2);
  transition:color var(--motion-fast) var(--ease)}
.toc a::before{content:counter(toc,decimal-leading-zero);
  font-size:.6875rem;color:var(--color-bronze);margin-inline-end:var(--space-3);
  font-family:var(--font-display)}
.toc a:hover{color:var(--color-bronze)}
@media (min-width:1081px){
  .toc > summary{pointer-events:none}
  .toc > summary::after{display:none}
}

/* 11 ── CARDS & TILES ─────────────────────────────────────────────────── */
/* A card holds a heading, two or three lines and a link. Anything longer
   belongs in a section, not in a box. */
.card{background:#fff;border:1px solid var(--color-border);
  padding:clamp(24px,2vw,40px);
  transition:border-color var(--motion-normal) var(--ease),
             background var(--motion-normal) var(--ease),
             transform var(--motion-normal) var(--ease)}
a.card:hover{border-color:var(--color-bronze);background:var(--color-bronze-wash);
  transform:translateY(-2px)}
.card h3{margin:0 0 var(--space-3);font-size:1.0625rem;
  font-family:var(--font-text);font-weight:650;letter-spacing:-.005em;
  max-inline-size:none}
.card p{color:var(--color-muted);font-size:.9375rem;margin-block-end:0;
  line-height:1.6}
.card__num{font-family:var(--font-display);font-size:.8125rem;
  color:var(--color-bronze);display:block;margin-block-end:var(--space-4);
  letter-spacing:.12em}
.card--flat{background:transparent;border:0;
  border-block-start:1px solid var(--color-text);padding:var(--space-5) 0 0}
.section--ink .card{background:transparent;border-color:rgba(255,255,255,.18)}
.section--ink .card p{color:var(--color-on-dark-2)}
.section--ink a.card:hover{border-color:#B07D3A;background:rgba(255,255,255,.04)}

/* Image-led focus panels. */
/* Four panels, so the row count is stated rather than fitted: auto-fit gave
   three across a 1280px screen and left a quarter of the band empty. One,
   two, then four — never a row with a hole in it. */
.focus{display:grid;gap:1px;background:var(--color-border);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.focus{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.focus{grid-template-columns:repeat(4,minmax(0,1fr))}}
.focus__item{position:relative;display:block;overflow:hidden;
  background:var(--color-ink);color:#fff;min-block-size:clamp(360px,36vw,520px);
  isolation:isolate}
/* The photograph is the panel's background, so its wrapper is taken out of
   flow along with the <img> inside it. Only the <img> was positioned before,
   which left the .im wrapper occupying a full panel height of normal flow
   and pushed the heading, the copy and the link out of the bottom of the
   panel — where overflow:hidden removed them. Four labelled clinical panels
   were showing as bare photographs, at every width. */
.focus__item .im{position:absolute;inset:0;z-index:0;block-size:auto}
.focus__item img{position:absolute;inset:0;inline-size:100%;block-size:100%;
  object-fit:cover;object-position:var(--focal-x,50%) var(--focal-y,50%);
  z-index:0;filter:saturate(.82) brightness(.86);
  transition:transform 1.4s var(--ease-out),filter var(--motion-slow) var(--ease)}
.focus__item::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(10,9,7,.94) 4%,rgba(10,9,7,.42) 54%,
             rgba(10,9,7,.34) 100%)}
.focus__item:hover img{transform:scale(1.06);filter:saturate(1) brightness(1)}
.focus__body{position:relative;z-index:2;block-size:100%;display:flex;
  flex-direction:column;justify-content:flex-end;padding:clamp(24px,2.2vw,44px);
  min-block-size:inherit}
.focus__n{font-family:var(--font-display);font-size:.75rem;color:#D9B588;
  letter-spacing:.24em;margin-block-end:var(--space-4)}
.focus__item h3{color:#fff;font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);
  margin:0 0 var(--space-3);font-family:var(--font-display);font-weight:400;
  letter-spacing:-.018em;max-inline-size:none}
.focus__item p{color:rgba(255,255,255,.8);font-size:.875rem;
  margin:0 0 var(--space-6);line-height:1.55}
.focus__more{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:#EBCFAA;display:inline-flex;align-items:center;gap:var(--space-3);
  font-weight:600}
.focus__more::after{content:"";inline-size:18px;block-size:1px;
  background:currentColor;flex:none;
  transition:inline-size var(--motion-normal) var(--ease)}
.focus__item:hover .focus__more::after{inline-size:36px}

/* Link tile: a picture that identifies the page it links to. */
.tile{display:block;background:#fff}
.tile__img{display:block;overflow:hidden;background:var(--color-ivory-2)}
.tile__img img{inline-size:100%;aspect-ratio:var(--ar-tile);object-fit:cover;
  object-position:var(--focal-x,50%) var(--focal-y,50%);
  transition:transform 1.2s var(--ease-out)}
a.tile:hover .tile__img img{transform:scale(1.045)}
.tile__body{padding:var(--space-5) 0 0}
.tile__body h3{margin:0 0 var(--space-2);font-size:1.0625rem;
  font-family:var(--font-text);font-weight:650;color:var(--color-text);
  max-inline-size:none;transition:color var(--motion-fast) var(--ease)}
a.tile:hover .tile__body h3{color:var(--color-bronze)}
.tile__body p{margin:0;font-size:.875rem;color:var(--color-muted)}

/* Horizontal rail — scroll-snap, no library. */
.rail{display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(280px,clamp(280px,25vw,380px));
  gap:clamp(20px,2vw,36px);overflow-x:auto;scroll-snap-type:x proximity;
  padding-block-end:var(--space-5);padding-inline:var(--gutter);
  scrollbar-width:thin;scroll-padding-inline-start:var(--gutter);
  overscroll-behavior-inline:contain}
.rail > *{scroll-snap-align:start}
.rail::-webkit-scrollbar{block-size:2px}
.rail::-webkit-scrollbar-thumb{background:var(--color-border-strong)}

/* 12 ── GALLERY & LIGHTBOX ────────────────────────────────────────────── */
.gallery{display:grid;gap:1px;background:var(--color-border);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.gallery__item{position:relative;display:block;padding:0;overflow:hidden;
  background:var(--color-ivory-2);cursor:zoom-in;inline-size:100%;
  text-align:start;font:inherit;color:inherit}
.gallery__item img{inline-size:100%;display:block;
  transition:transform 1.2s var(--ease-out)}
.gallery__item:hover img{transform:scale(1.04)}
.gallery__item figcaption{padding:var(--space-4) var(--space-5);font-size:.8125rem;
  color:var(--color-muted);background:#fff;line-height:1.5}
.section--ink .gallery{background:rgba(255,255,255,.16)}
.section--ink .gallery__item{background:#0F0E0C}
.section--ink .gallery__item figcaption{background:var(--color-ink);
  color:rgba(255,255,255,.7)}

dialog.lightbox{border:0;padding:0;background:transparent;inline-size:100%;
  block-size:100%;max-inline-size:100%;max-block-size:100%;overflow:hidden}
dialog.lightbox::backdrop{background:rgba(8,7,6,.96)}
.lightbox__inner{block-size:100%;display:grid;grid-template-rows:1fr auto;
  padding:clamp(12px,3vw,44px);gap:var(--space-4)}
.lightbox__stage{display:grid;place-items:center;min-block-size:0}
.lightbox__stage img{max-inline-size:100%;max-block-size:100%;object-fit:contain}
.lightbox__bar{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);color:rgba(255,255,255,.84);font-size:.8125rem}
.lightbox__cap{max-inline-size:70ch;line-height:1.5}
.lightbox__nav{display:flex;gap:var(--space-2);flex:none;align-items:center}
.lightbox__btn{inline-size:46px;block-size:46px;
  border:1px solid rgba(255,255,255,.3);color:#fff;display:grid;
  place-items:center;font-size:1.125rem;line-height:1;
  transition:background var(--motion-fast) var(--ease),
             border-color var(--motion-fast) var(--ease)}
.lightbox__btn:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* 13 ── TABLES, FAQ, FORMS ────────────────────────────────────────────── */
.table-scroll{overflow-x:auto;overflow-y:hidden;contain:inline-size;
  -webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;
  margin-block:var(--space-8);border-block:1px solid var(--color-border)}
table{border-collapse:collapse;inline-size:100%;font-size:.9rem;
  min-inline-size:min(640px,100%)}
/* Below the reading width the table is the scroll container's content, so it
   takes the readable minimum rather than the column's. */
.table-scroll > table{min-inline-size:640px}
th,td{padding:var(--space-5);text-align:start;
  border-block-end:1px solid var(--color-border);vertical-align:top}
thead th{font-weight:650;color:var(--color-text);font-size:.6875rem;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;white-space:nowrap;
  border-block-end-color:var(--color-text)}
tbody th{font-weight:600;color:var(--color-text)}
tbody tr:last-child td,tbody tr:last-child th{border-block-end:0}

.faq{border-block-start:1px solid var(--color-border)}
.faq details{border-block-end:1px solid var(--color-border)}
.faq summary{padding:var(--space-6) clamp(40px,10vw,80px) var(--space-6) 0;cursor:pointer;
  list-style:none;color:var(--color-text);position:relative;
  font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);font-family:var(--font-display);
  font-weight:400;transition:color var(--motion-fast) var(--ease)}
[dir="rtl"] .faq summary{padding:var(--space-6) 0 var(--space-6) clamp(40px,10vw,80px)}
.faq summary:hover{color:var(--color-bronze)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;
  background:var(--color-bronze);
  transition:transform var(--motion-normal) var(--ease),
             opacity var(--motion-normal) var(--ease)}
.faq summary::before{inset-inline-end:10px;inset-block-start:calc(50% - .5px);
  inline-size:15px;block-size:1px}
.faq summary::after{inset-inline-end:17px;inset-block-start:calc(50% - 7.5px);
  inline-size:1px;block-size:15px}
.faq details[open] summary::after{transform:rotate(90deg);opacity:0}
.faq__a{padding:0 clamp(0px,4vw,80px) var(--space-7) 0;color:var(--color-text-2);
  max-inline-size:72ch}
[dir="rtl"] .faq__a{padding:0 0 var(--space-7) clamp(0px,4vw,80px)}
.faq__a p:last-child{margin-block-end:0}
.faq details[open] .faq__a{animation:faqin var(--motion-normal) var(--ease) both}
@keyframes faqin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.form{display:grid;gap:var(--space-5)}
.field{display:grid;gap:8px}
.field label{font-size:.8125rem;font-weight:600;color:var(--color-text)}
.field input,.field select,.field textarea{padding:14px var(--space-5);
  border:1px solid var(--color-border-strong);border-radius:var(--radius);
  background:#fff;color:var(--color-text);font-size:max(16px,.9375rem);
  inline-size:100%;min-block-size:48px;
  transition:border-color var(--motion-normal) var(--ease),
             box-shadow var(--motion-normal) var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--color-bronze);box-shadow:0 0 0 3px var(--color-bronze-wash)}
.field textarea{min-block-size:140px;resize:vertical;line-height:1.6}
.field--row{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:var(--space-5)}
.form__note{font-size:.75rem;color:var(--color-muted);line-height:1.6}
.form__status{font-size:.875rem;font-weight:600;padding:var(--space-4) var(--space-5);
  border-radius:var(--radius)}
.form__status[data-state="success"]{background:#EAF4EC;color:#1E5B31}
.form__status[data-state="error"]{background:#FBEAEA;color:#8A2A2A}
.hp{position:absolute;inset-inline-start:-9999px;inline-size:1px;
  block-size:1px;opacity:0}

/* 13b ── floating WhatsApp / booking widget ──────────────────────────────
   Fixed to the viewport corner on every page. Named .fbtn rather than the
   more obvious .fab — Font Awesome's own stylesheet (loaded after this one,
   for the icon font) defines a class literally called .fab as its shorthand
   for "brands" icons, and silently overrode this widget's layout when the
   two collided. On narrow viewports the mobile .callbar already owns the
   full-width bottom strip (see 14), so the stack is lifted clear of it in
   the media query below rather than overlapping it or the footer beneath. */
.fbtn-stack{position:fixed;inset-block-end:var(--space-6);
  inset-inline-end:var(--space-6);z-index:var(--z-sticky);
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-3);
  transition:opacity var(--motion-normal) var(--ease),
             transform var(--motion-normal) var(--ease)}
/* Stepped aside rather than left to sit on top of the footer's own links
   once it scrolls into view — see the IntersectionObserver in site.js. */
.fbtn-stack.is-clear{opacity:0;transform:translateY(12px) scale(.94);
  pointer-events:none}
.fbtn{display:inline-flex;align-items:center;gap:var(--space-3);
  border:0;cursor:pointer;border-radius:var(--radius-pill);
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  transition:transform var(--motion-fast) var(--ease),
             box-shadow var(--motion-fast) var(--ease)}
.fbtn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.fbtn svg{inline-size:26px;block-size:26px;flex:none}
.fbtn__label{font-family:var(--font-text);font-size:.8125rem;font-weight:600;
  white-space:nowrap;padding-inline-end:2px}
.fbtn--whatsapp{background:#25D366;color:#fff;inline-size:56px;block-size:56px;
  justify-content:center;padding:0}
.fbtn--book{background:var(--color-bronze);color:#fff;padding-block:15px;
  padding-inline:17px var(--space-5)}
.fbtn--book:hover{background:var(--color-bronze-dark)}
@media (max-width:860px){
  .fbtn-stack{inset-block-end:calc(76px + var(--space-4) + env(safe-area-inset-bottom))}
}
@media (max-width:520px){.fbtn__label{display:none}.fbtn--book{padding:0;inline-size:56px;
  block-size:56px;justify-content:center}}

dialog.book-modal{border:0;padding:0;background:transparent;inline-size:min(560px,92vw);
  max-block-size:min(720px,88vh);border-radius:var(--radius)}
dialog.book-modal::backdrop{background:rgba(8,7,6,.72)}
.book-modal__inner{background:#fff;padding:clamp(28px,4vw,44px);
  overflow-y:auto;max-block-size:min(720px,88vh);position:relative}
.book-modal__close{position:absolute;inset-block-start:var(--space-5);
  inset-inline-end:var(--space-5);inline-size:36px;block-size:36px;border:0;
  background:transparent;color:var(--color-muted);font-size:1.5rem;line-height:1;
  cursor:pointer;border-radius:50%;
  transition:background var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease)}
.book-modal__close:hover{background:var(--color-bronze-wash);color:var(--color-bronze-dark)}
.book-modal h2{margin-block-start:0;padding-inline-end:var(--space-7)}

/* Font Awesome — outline (regular) weight only, sized to the type. */
.fa-regular{font-size:.9em;color:var(--color-bronze);inline-size:1.1em;
  text-align:center}
.nap dt .fa-regular{margin-inline-end:6px}

/* Google reviews. Nothing is asserted here until the practice's own figures
   are supplied; the panel is a link to the listing, not a rating badge. */
.rev{border:1px solid var(--color-border);background:#fff;
  padding:clamp(28px,2.6vw,48px);display:grid;gap:var(--space-5);
  justify-items:start;align-content:start}
.section--ink .rev{background:transparent;border-color:rgba(255,255,255,.18)}
.rev__icon{font-size:1.5rem;color:var(--color-bronze);inline-size:auto}
.rev__summary{display:flex;align-items:baseline;gap:var(--space-4);flex-wrap:wrap}
.rev__score{font-family:var(--font-display);font-size:clamp(2.25rem,1.6rem + 2vw,3.25rem);
  line-height:1;color:var(--color-text);letter-spacing:-.03em}
.section--ink .rev__score{color:#fff}
.rev__meta{font-size:var(--fs-micro);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--color-muted);display:grid;gap:4px}
.rev__meta b{font-size:.8125rem;letter-spacing:0;text-transform:none;
  color:var(--color-text-2);font-weight:600}
.section--ink .rev__meta b{color:var(--color-on-dark)}

/* Contact actions — an icon list where no photograph would mean anything. */
.actions{display:grid;gap:1px;background:var(--color-border);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  margin-block:var(--space-8)}
.actions a{display:flex;gap:var(--space-5);align-items:flex-start;
  background:#fff;padding:clamp(20px,1.8vw,32px);color:var(--color-text-2);
  transition:background var(--motion-normal) var(--ease)}
.actions a:hover{background:var(--color-bronze-wash)}
.actions i{font-size:1.25rem;color:var(--color-bronze);inline-size:1.4em;
  flex:none;margin-block-start:2px}
.actions b{display:block;color:var(--color-text);font-weight:650;
  margin-block-end:4px}
.actions span{font-size:.875rem;color:var(--color-muted);display:block}

/* 14 ── FOOTER ────────────────────────────────────────────────────────── */
.footer{background:var(--color-ink);--veil:var(--color-ink);color:var(--color-on-dark-2);
  padding-block:var(--section-space-md) var(--space-7);font-size:.875rem}
.footer a{color:rgba(255,255,255,.78)}
.footer a:hover{color:#fff}
.footer__grid{display:grid;gap:clamp(32px,3vw,64px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.footer h5,.footer .foot-h{font-family:var(--font-text);font-size:var(--fs-micro);
  font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:#D6A56C;margin:0 0 var(--space-5)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.footer__brand b{display:block;font-family:var(--font-display);font-size:1.5rem;
  color:#fff;margin-block-end:var(--space-3);font-weight:400;letter-spacing:-.02em}
.footer__bottom{margin-block-start:clamp(48px,7vw,96px);padding-block-start:var(--space-5);
  border-block-start:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;
  gap:var(--space-4);justify-content:space-between;font-size:.75rem;
  color:rgba(255,255,255,.5)}
.footer__bottom ul{display:flex;flex-wrap:wrap;gap:var(--space-5)}

.callbar{display:none;position:fixed;inset-block-end:0;inset-inline:0;z-index:180;
  background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
  border-block-start:1px solid var(--color-border);
  padding:10px var(--space-4) calc(10px + env(safe-area-inset-bottom));
  gap:var(--space-3)}
.callbar .btn{flex:1;padding-block:13px}
@media (max-width:860px){.callbar{display:flex}body{padding-block-end:76px}}

/* 15 ── MOTION ────────────────────────────────────────────────────────── */
/* Every pattern is opt-in per element and scoped to html.js, so with
   scripting off nothing is hidden. Motion is applied on top of a layout
   that already works; it never carries structure. */
html.js .rv{opacity:0;transform:translateY(24px);
  transition:opacity var(--motion-reveal) var(--ease-out),
             transform var(--motion-reveal) var(--ease-out)}
html.js .rv.in{opacity:1;transform:none}
html.js .rv-fade{opacity:0;transition:opacity var(--motion-reveal) var(--ease-out)}
html.js .rv-fade.in{opacity:1}

/* The masked reveal is a curtain that wipes away, not a clip applied to the
   figure itself.
   v5 used clip-path:inset(0 0 100% 0), which collapses the element's paint
   area to nothing — and an element with no paint area is invisible both to
   the IntersectionObserver that is supposed to reveal it and to the
   browser's lazy-image loader. Masked figures therefore deadlocked: the
   observer never fired, .in was never added, the clip never lifted, and the
   image inside was never even requested. That is why photographs were
   missing on a phone. The element now keeps its full box at all times and
   only a pseudo-element moves, so layout, observation and image loading are
   all independent of the animation. */
html.js .rv-mask,html.js .rv-mask-x{position:relative}
html.js .rv-mask::before,html.js .rv-mask-x::before{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:var(--veil,var(--color-background));
  transition:transform 1.15s var(--ease-out);
}
html.js .rv-mask::before{transform-origin:bottom center}
html.js .rv-mask.in::before{transform:scaleY(0)}
html.js .rv-mask-x::before{transform-origin:right center}
html.js .rv-mask-x.in::before{transform:scaleX(0)}
html.js [dir="rtl"] .rv-mask-x::before{transform-origin:left center}

/* The zoom settles from 107% to 100%, so it must be clipped by its own
   frame. Without this the oversized image is 7% wider than a full-bleed
   figure and pushes the whole page sideways. */
html.js .rv-zoom{overflow:hidden}
html.js .rv-zoom img{transform:scale(1.07);
  transition:transform 1.5s var(--ease-out)}
html.js .rv-zoom.in img{transform:scale(1)}
html.js .rv-stag > *{opacity:0;transform:translateY(18px)}
html.js .rv-stag.in > *{opacity:1;transform:none;
  transition:opacity var(--motion-slow) var(--ease-out),
             transform var(--motion-slow) var(--ease-out)}
html.js .rv-stag.in > *:nth-child(1){transition-delay:0ms}
html.js .rv-stag.in > *:nth-child(2){transition-delay:80ms}
html.js .rv-stag.in > *:nth-child(3){transition-delay:160ms}
html.js .rv-stag.in > *:nth-child(4){transition-delay:240ms}
html.js .rv-stag.in > *:nth-child(5){transition-delay:320ms}
html.js .rv-stag.in > *:nth-child(6){transition-delay:400ms}
html.js .rv-stag.in > *:nth-child(n+7){transition-delay:480ms}
html.js .rv-words span{display:inline-block;opacity:0;transform:translateY(.5em);
  transition:opacity var(--motion-slow) var(--ease-out),
             transform var(--motion-slow) var(--ease-out)}
html.js .rv-words.in span{opacity:1;transform:none}
html.js .rv-rule{transform:scaleX(0);transform-origin:left center;
  transition:transform var(--motion-slow) var(--ease-out)}
html.js .rv-rule.in{transform:scaleX(1)}
html.js [dir="rtl"] .rv-rule{transform-origin:right center}
html.js [data-parallax]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  .rv,.rv-fade,.rv-stag > *,.rv-words span{opacity:1!important;transform:none!important}
  .rv-mask::before,.rv-mask-x::before{display:none!important}
  .rv-zoom img{transform:none!important}
  .rv-rule{transform:scaleX(1)!important}
  .hero__scroll i::after{display:none}
  [data-parallax]{transform:none!important}
}

/* 16 ── RTL & ARABIC ──────────────────────────────────────────────────── */
[dir="rtl"]{--font-display:var(--font-ar-display);--font-text:var(--font-ar-text);
  --ls-eyebrow:.08em}
[dir="rtl"] body{line-height:1.9}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{letter-spacing:0;line-height:1.5;
  font-weight:700}
[dir="rtl"] h1{line-height:1.4}
[dir="rtl"] h4{font-weight:700}
[dir="rtl"] .hero h1{line-height:1.36;letter-spacing:0;font-weight:700;
  max-inline-size:17ch;font-size:clamp(1.875rem,1.35rem + 2.6vw,3.5rem)}
[dir="rtl"] .hero h1 em{font-style:normal;color:#EBCFAA}
[dir="rtl"] .hero__focus{letter-spacing:0}
[dir="rtl"] .drawer__group > summary,[dir="rtl"] .drawer__link{font-weight:700}
[dir="rtl"] .pull p{line-height:1.62;font-weight:500;letter-spacing:0}
[dir="rtl"] .faq summary{font-weight:600}
[dir="rtl"] .stats b,[dir="rtl"] .footer__brand b,[dir="rtl"] .band__overlay h3,
[dir="rtl"] .focus__item h3,[dir="rtl"] .callout__t,
[dir="rtl"] .sticky-head__t{font-weight:700;letter-spacing:0}
[dir="rtl"] .btn{letter-spacing:0;font-weight:700}
[dir="rtl"] .prose{max-inline-size:62ch}
[dir="rtl"] .brand__name b{font-weight:700}
[dir="rtl"] .drawer__group > summary::after{transform:rotate(135deg)}
[dir="rtl"] .drawer__group[open] > summary::after{transform:rotate(-135deg)}
[dir="rtl"] .toc > summary::after{transform:rotate(135deg)}
[dir="rtl"] .toc[open] > summary::after{transform:rotate(-135deg)}
.ltr{direction:ltr;display:inline-block;unicode-bidi:isolate}

/* 17 ── PRINT ─────────────────────────────────────────────────────────── */
@media print{
  .header,.header-spacer,.drawer,.callbar,.cta-band,.footer,.aside,
  .hero__media,.hero__scroll,dialog.lightbox,.fbtn-stack,dialog.book-modal{display:none!important}
  body{background:#fff;color:#000;padding:0}
  .hero{min-block-size:auto;background:#fff;color:#000}
  .hero h1,.hero__lede{color:#000}
}