/* ==========================================================================
   MASSAGE DUBAI MARINA — homepage
   Built on the official brand system (Brand Guidelines v1.0, August 2026).
   Colours, typography, layout tokens and logo artwork all come from the
   supplied brand asset kit. Edit CONFIG at the bottom for the WhatsApp number.

   THE RULE THAT SHAPES THIS WHOLE FILE (Guidelines p.13):
     "Petrol carries information. Copper creates emphasis."
   Copper on ivory measures 2.83:1 and copper on petrol 2.36:1 — both FAIL for
   text. So copper never carries live copy here. It appears only in the logo,
   hairlines, icon strokes, indicator dots and decorative facets. Every label,
   price, link and button word is petrol, deep harbour, ivory or white.
   ========================================================================== */

/* ---------- 1. TOKENS — brand palette, verbatim ---------- */
:root{
  /* Brand colours — mdm-brand-tokens.css */
  --petrol:#225365;          /* Marina Petrol — primary text, nav, dark fields */
  --harbour:#0A1F26;         /* Deep Harbour  — high-contrast text, footer     */
  --copper:#C2744A;          /* Warm Copper   — accents, facets. NON-TEXT ONLY */
  --copper-light:#D48C64;    /* Sunlit Copper — highlights                     */
  --ivory:#EFE3DA;           /* Marina Ivory  — primary light background       */
  --sand:#D9C6B7;            /* Soft Sand     — borders, neutral panels        */
  --white:#FFFFFF;
  --sand-soft:#E7DAD0;       /* sand↔ivory tint, decorative artwork only       */

  /* Semantic surfaces */
  --paper:var(--white);      /* raised panels and cards */

  /* Text — every value AA or better on its intended background */
  --ink:var(--petrol);            /* body on ivory 6.69:1, on white 8.42:1 */
  --ink-strong:var(--harbour);    /* headlines                             */
  --ink-soft:#3F6675;             /* muted petrol — 4.9:1 ivory, 6.2:1 white */
  --ink-onDark:var(--ivory);      /* on petrol 6.69:1                      */
  --ink-onDark-soft:var(--sand);  /* on petrol 5.13:1                      */

  /* Lines — 1px sand or copper hairlines, never heavy frames (p.14) */
  --line:rgba(194,116,74,.42);      /* copper hairline */
  --line-soft:rgba(34,83,101,.16);  /* petrol hairline */
  --line-onDark:rgba(239,227,218,.20);

  /* Type (p.13) — Bodoni Moda display, Manrope body */
  --mdm-font-display:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  --mdm-font-body:Manrope,"Avenir Next",Arial,sans-serif;

  /* Layout tokens (p.14) */
  --u:8px;
  --gutter:clamp(20px,5vw,64px);    /* 20 mobile / 32 tablet / 64 desktop */
  --maxw:1280px;
  --section-y:clamp(56px,8vw,96px); /* 56 / 72 / 96                       */

  --ease:cubic-bezier(.22,.61,.36,1);
  --radius:8px;                     /* card radius 6–10px                 */
  --radius-sm:6px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--mdm-font-body);font-size:16px;font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--mdm-font-display);font-weight:500;line-height:1.1;letter-spacing:-.005em;color:var(--ink-strong)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* Paper grain — subtle, sits above background, never blocks clicks */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. PRIMITIVES ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
/* anchor targets must clear the sticky header */
section[id],[id^="top"]{scroll-margin-top:clamp(84px,12vh,116px)}
.section{padding-block:var(--section-y);position:relative}
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--petrol);margin:0 0 20px;display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--copper);flex:none}
.eyebrow.center{justify-content:center}
.eyebrow.on-dark{color:var(--sand)}
.eyebrow.on-dark::before{background:var(--copper)}

h1{font-size:clamp(32px,3.5vw,48px);font-weight:500;line-height:1.14;letter-spacing:-.01em}
h2{font-size:clamp(28px,3.4vw,40px);font-weight:500;line-height:1.15}
h3{font-size:clamp(20px,2.2vw,26px);font-weight:600;line-height:1.25}
.lede{font-size:clamp(18px,1.6vw,20px);line-height:1.55;color:var(--ink-soft);max-width:64ch}
.muted{color:var(--ink-soft)}
.rule{height:1px;background:var(--line-soft);border:0;margin:0}
.serif-i{font-family:var(--mdm-font-display);font-style:italic;font-weight:300}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 30px;border-radius:var(--radius);
  font-family:var(--mdm-font-body);font-size:14px;font-weight:600;letter-spacing:.01em;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
  white-space:nowrap;text-align:center;
}
.btn svg{flex:none}
.btn--primary{background:var(--petrol);color:var(--white);border:1px solid var(--petrol)}
.btn--primary:hover{background:var(--harbour);border-color:var(--harbour);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{border-color:var(--petrol);color:var(--petrol);transform:translateY(-2px)}
.btn--onDark{background:transparent;color:var(--ink-onDark);border:1px solid var(--line-onDark)}
.btn--onDark:hover{background:var(--ink-onDark);color:var(--petrol);transform:translateY(-2px)}
.btn--light{background:var(--ivory);color:var(--petrol);border:1px solid var(--ivory)}
.btn--light:hover{background:var(--white);border-color:var(--white);transform:translateY(-2px)}
.btn--sm{min-height:44px;padding:11px 20px;font-size:13px}

/* Text link with animated underline */
.tlink{
  display:inline-flex;align-items:center;gap:9px;position:relative;
  font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--petrol);
  min-height:44px;
}
.tlink::after{content:"";position:absolute;inset-inline-start:0;bottom:10px;height:1px;width:0;background:currentColor;transition:width .35s var(--ease)}
.tlink:hover::after,.tlink:focus-visible::after{width:100%}
.tlink .arw{transition:transform .35s var(--ease)}
.tlink:hover .arw{transform:translateX(4px)}

/* Focus — visible everywhere, never removed */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--petrol);outline-offset:3px;border-radius:2px;
}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:2000;background:var(--petrol);color:var(--ivory);padding:14px 22px}
.skip:focus{inset-inline-start:12px;top:12px}

/* Scroll reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none}
  *{animation:none!important}
}

/* ---------- 4. ANNOUNCEMENT + HEADER ---------- */
.topbar{
  background:var(--petrol);color:var(--ink-onDark-soft);
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
}
.topbar .wrap{display:flex;align-items:center;justify-content:center;gap:26px;min-height:40px;flex-wrap:wrap;text-align:center}
.topbar .dot{width:5px;height:5px;border-radius:50%;background:var(--copper);flex:none}
.topbar a{color:var(--sand);border-bottom:1px solid transparent;transition:border-color .25s}
.topbar a:hover{border-color:var(--sand)}
.topbar .hide-sm{display:none}
@media(min-width:860px){.topbar .hide-sm{display:inline}}

.header{
  position:sticky;top:0;z-index:900;
  background:rgba(239,227,218,0);border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s var(--ease);
}
.header.is-stuck{background:rgba(239,227,218,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
.header .wrap{display:flex;align-items:center;gap:24px;min-height:var(--header-h,84px)}
/* Logo is locked artwork from the brand kit — never retyped as live text.
   Clear space: at least half an i-dot all round, so the flex gap/padding here
   must not be reduced. */
.brand{display:flex;align-items:center;flex:none;min-height:40px;padding-inline-end:8px}
.brand img{height:var(--logo-h,60px);width:auto;display:block}
@media(max-width:599px){.brand img{height:var(--logo-h-sm,46px)}}

.nav{display:none;margin-inline-start:auto}
.nav ul{display:flex;align-items:center;gap:26px}
.nav a{font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--ink);position:relative;padding-block:12px;white-space:nowrap}
.nav a::after{content:"";position:absolute;inset-inline-start:0;bottom:4px;height:1px;width:0;background:var(--copper);transition:width .3s var(--ease)}
.nav a:hover::after,.nav a[aria-current="true"]::after{width:100%}
.header-actions{display:flex;align-items:center;gap:14px;margin-inline-start:auto}
@media(min-width:1160px){
  .nav{display:block}
  .header-actions{margin-inline-start:34px}
}
.lang{display:none;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
@media(min-width:760px){.lang{display:flex}}
.lang a{
  display:grid;place-items:center;min-width:38px;min-height:32px;padding:6px 13px;
  border-radius:999px;font-size:12px;font-weight:600;color:var(--ink-soft);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.lang a:hover{color:var(--petrol)}
.lang a[aria-current="page"]{background:var(--petrol);color:var(--ivory)}
.header .btn--primary{display:none}
@media(min-width:600px){.header .btn--primary{display:inline-flex}}

.burger{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius)}
@media(min-width:1160px){.burger{display:none}}
.burger span{display:block;width:18px;height:1px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1px;background:var(--ink);transition:transform .3s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* Mobile menu */
.menu{
  position:fixed;inset:0;z-index:1000;background:var(--ivory);
  display:flex;flex-direction:column;padding:26px var(--gutter) 40px;
  transform:translateY(-100%);transition:transform .5s var(--ease);visibility:hidden;
}
.menu.is-open{transform:none;visibility:visible}
.menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:auto}
.menu-close{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius);font-size:22px;line-height:1}
.menu nav ul{display:grid;gap:2px;margin-block:40px}
.menu nav a{
  font-family:var(--mdm-font-display);font-size:clamp(30px,9vw,46px);font-weight:300;
  display:flex;align-items:baseline;gap:16px;padding-block:10px;border-bottom:1px solid var(--line-soft);
}
.menu nav a i{font-family:var(--mdm-font-body);font-style:normal;font-size:11px;letter-spacing:.2em;color:var(--petrol)}
.menu-foot{display:grid;gap:14px}
.menu-foot .btn{width:100%}
.menu-meta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-align:center}

/* ---------- 5. HERO ---------- */
.hero{position:relative;padding-block:clamp(40px,7vw,72px) clamp(56px,8vw,96px)}
.hero-grid{display:grid;gap:clamp(40px,6vw,64px);align-items:center}
@media(min-width:980px){.hero-grid{grid-template-columns:1.12fr .88fr;gap:56px}}
.hero h1 .em{font-style:italic;color:var(--petrol)}
.hero .lede{margin-top:26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-cta .btn{flex:1 1 auto;min-width:210px}
@media(min-width:520px){.hero-cta .btn{flex:0 0 auto}}
.hero-meta{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:44px;padding-top:26px;border-top:1px solid var(--line-soft)}
.hero-meta li{display:flex;flex-direction:column;gap:2px}
.hero-meta b{font-family:var(--mdm-font-display);font-size:clamp(22px,1.9vw,26px);font-weight:500;line-height:1;color:var(--ink-strong)}
.hero-meta span{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}

/* Arch art frame */
.arch{
  position:relative;aspect-ratio:4/5;max-height:74vh;margin-inline:auto;width:100%;
  border-radius:999px 999px 4px 4px;overflow:hidden;background:var(--sand-soft);
  box-shadow:0 40px 80px -50px rgba(10,31,38,.45);
}
.arch img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2}
.arch .art{position:absolute;inset:0;z-index:1}
.arch .art .b{position:absolute;border-radius:50%;filter:blur(40px)}
.arch .art .b1{width:80%;height:60%;top:-8%;left:-14%;background:var(--sand-soft)}
.arch .art .b2{width:75%;height:60%;bottom:-10%;right:-16%;background:var(--copper)}
.arch .art .b3{width:58%;height:46%;top:34%;left:26%;background:var(--ivory)}
.arch .art .b4{width:46%;height:36%;bottom:16%;left:-8%;background:var(--petrol);opacity:.38}
.arch .veins{position:absolute;inset:0;z-index:1;mix-blend-mode:soft-light;opacity:.5}
.arch-cap{
  position:absolute;z-index:3;inset-inline:14px;bottom:14px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.6);padding:14px 18px;border-radius:var(--radius);
  display:flex;align-items:center;gap:14px;
}
.arch-cap .pulse{width:8px;height:8px;border-radius:50%;background:var(--copper);flex:none;position:relative}
.arch-cap .pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--copper);opacity:.6;animation:ping 2.6s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.35);opacity:0}}
.arch-cap b{display:block;font-family:var(--mdm-font-body);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.arch-cap span{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.4}

/* ---------- 6. TRUST STRIP ---------- */
.trust{border-block:1px solid var(--line-soft);background:var(--paper)}
.trust ul{display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.trust ul{grid-template-columns:repeat(4,1fr)}}
.trust li{padding:26px 18px;display:flex;gap:13px;align-items:flex-start;border-inline-end:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.trust li:nth-child(2n){border-inline-end:0}
@media(min-width:900px){
  .trust li{border-bottom:0}
  .trust li:nth-child(2n){border-inline-end:1px solid var(--line-soft)}
  .trust li:last-child{border-inline-end:0}
}
.trust svg{color:var(--copper);flex:none;margin-top:3px}
.trust b{display:block;font-family:var(--mdm-font-body);font-size:13px;font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.trust span{font-size:13.5px;color:var(--ink-soft);line-height:1.5}

/* ---------- 7. SECTION HEADERS ---------- */
.s-head{display:grid;gap:22px;margin-bottom:clamp(44px,5vw,68px)}
@media(min-width:900px){.s-head{grid-template-columns:1fr auto;align-items:end;gap:40px}}
.s-head .lede{margin-top:18px}

/* ---------- 8. TREATMENTS (editorial rows) ---------- */
.trow{
  display:grid;gap:6px 26px;padding-block:30px;border-top:1px solid var(--line-soft);
  grid-template-columns:auto 1fr;align-items:start;transition:background .35s var(--ease);
}
.trow:last-of-type{border-bottom:1px solid var(--line-soft)}
@media(min-width:900px){.trow{grid-template-columns:76px 1fr auto auto;align-items:center;padding-block:26px}}
.trow:hover{background:rgba(217,198,183,.30)}
.trow .num{font-family:var(--mdm-font-display);font-size:26px;color:var(--copper);line-height:1;padding-top:5px}
.trow .body h3{margin-bottom:5px}
.trow .body p{font-size:14.5px;color:var(--ink-soft);max-width:46ch;line-height:1.6}
.trow .price{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;margin-top:8px}
@media(min-width:900px){.trow .price{grid-column:auto;margin-top:0;flex-direction:column;align-items:flex-end;gap:2px;text-align:end}}
.trow .price b{font-family:var(--mdm-font-display);font-size:23px;font-weight:400}
.trow .price span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.trow .act{grid-column:1/-1;margin-top:12px}
@media(min-width:900px){.trow .act{grid-column:auto;margin-top:0;margin-inline-start:24px}}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.tag{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--petrol);border:1px solid var(--line);border-radius:999px;padding:4px 11px}

/* ---------- 9. PRICING ---------- */
.pricing{background:var(--paper);border-block:1px solid var(--line-soft)}
.ptable{width:100%;border-collapse:collapse;font-size:15px}
.ptable caption{text-align:start;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);padding-bottom:16px}
.ptable th,.ptable td{padding:18px 14px;text-align:end;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.ptable thead th{
  font-family:var(--mdm-font-body);font-size:10.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:14px;
}
.ptable th[scope="row"]{text-align:start;font-family:var(--mdm-font-display);font-size:20px;font-weight:400}
.ptable th[scope="row"] small{display:block;font-family:var(--mdm-font-body);font-size:12px;letter-spacing:.04em;color:var(--ink-soft);margin-top:3px}
.ptable td.aed{font-family:var(--mdm-font-display);font-size:20px}
.ptable td.aed em{font-style:normal;font-size:11px;color:var(--ink-soft);letter-spacing:.1em;margin-inline-end:4px}
.ptable tbody tr{transition:background .3s var(--ease)}
.ptable tbody tr:hover{background:rgba(217,198,183,.32)}
.ptable td.book{width:1%;white-space:nowrap}
.ptable tr.feature th[scope="row"]{color:var(--petrol)}
@media(max-width:800px){
  .ptable,.ptable tbody,.ptable tr,.ptable td,.ptable th{display:block;text-align:start}
  /* a table-caption inside a block-ified table collapses to a thin column */
  .ptable caption{display:block;width:100%}
  .ptable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ptable tr{border:1px solid var(--line-soft);background:var(--ivory);padding:20px;margin-bottom:14px;border-radius:var(--radius)}
  .ptable th,.ptable td{border:0;padding:0}
  .ptable th[scope="row"]{margin-bottom:14px}
  .ptable td.aed{display:flex;justify-content:space-between;align-items:baseline;padding-block:9px;border-top:1px solid var(--line-soft)}
  .ptable td.aed::before{content:attr(data-label);font-family:var(--mdm-font-body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
  .ptable td.book{width:auto;margin-top:16px}
  .ptable td.book .btn{width:100%}
}
.pnotes{display:grid;gap:20px;margin-top:44px}
@media(min-width:820px){.pnotes{grid-template-columns:1.15fr .85fr;gap:40px}}
.addons li{display:flex;justify-content:space-between;gap:20px;padding-block:13px;border-bottom:1px solid var(--line-soft);font-size:15px}
.addons li b{font-family:var(--mdm-font-display);font-size:18px;font-weight:400;white-space:nowrap}
.pnote-card{background:var(--ivory);border:1px solid var(--line);padding:28px;border-radius:var(--radius)}
.pnote-card h3{font-size:22px;margin-bottom:12px}
.pnote-card p{font-size:14.5px;color:var(--ink-soft);line-height:1.65}
.pnote-card .btn{margin-top:20px;width:100%}

/* ---------- 10. THERAPISTS ---------- */
.tgrid{display:grid;gap:clamp(24px,3vw,34px);grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.tcard{display:flex;flex-direction:column}
.portrait{
  position:relative;aspect-ratio:4/5;margin:0 0 20px;overflow:hidden;border-radius:2px;
  background:linear-gradient(150deg,var(--sand-soft) 0%,var(--sand) 45%,var(--copper-light) 100%);
}
.portrait::before{ /* monogram fallback shown when no photo file is present */
  content:attr(data-initial);position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mdm-font-display);font-size:104px;color:rgba(255,255,255,.55);z-index:1;
}
.portrait::after{ /* fine veining over the placeholder */
  content:"";position:absolute;inset:0;z-index:1;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .08' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");
}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:transform .8s var(--ease)}
.tcard:hover .portrait img{transform:scale(1.04)}
.portrait .badge{
  position:absolute;z-index:3;top:12px;inset-inline-start:12px;
  background:rgba(255,255,255,.94);border-radius:999px;padding:6px 12px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);
}
.portrait .rating{
  position:absolute;z-index:3;bottom:12px;inset-inline-end:12px;
  background:rgba(10,31,38,.82);color:var(--ink-onDark);border-radius:999px;padding:6px 12px;
  font-size:11.5px;letter-spacing:.08em;display:flex;align-items:center;gap:6px;
}
.tcard h3{font-size:25px}
.tcard .role{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol);margin-top:6px}
.tcard .bio{font-size:14.5px;color:var(--ink-soft);line-height:1.62;margin-top:12px}
.tcard dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:18px 0 0;font-size:13px}
.tcard dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);padding-top:3px}
.tcard dd{margin:0;color:var(--ink)}
.tcard .btn{margin-top:20px;width:100%}
.tcard-foot{margin-top:auto;padding-top:4px}
.therapist-note{
  margin-top:clamp(36px,5vw,52px);padding:26px 30px;border:1px solid var(--line);border-radius:var(--radius);
  display:grid;gap:18px;align-items:center;background:var(--paper);
}
@media(min-width:840px){.therapist-note{grid-template-columns:1fr auto}}
.therapist-note p{font-size:15px;color:var(--ink-soft);max-width:66ch}
.therapist-note b{color:var(--ink);font-weight:400}

/* ---------- 11. TOWERS / AREAS ---------- */
.areas{background:var(--petrol);color:var(--ink-onDark)}
.areas h2,.areas h3{color:var(--ink-onDark)}
.areas .lede{color:var(--ink-onDark-soft)}
.areas .rule{background:var(--line-onDark)}
.finder{display:grid;gap:14px;margin-bottom:44px}
@media(min-width:700px){.finder{grid-template-columns:1fr auto;align-items:center}}
.field{position:relative;display:flex;align-items:center}
.field svg{position:absolute;inset-inline-start:18px;color:var(--ink-onDark-soft);pointer-events:none}
.field input{
  width:100%;min-height:56px;background:transparent;color:var(--ink-onDark);
  border:1px solid var(--line-onDark);border-radius:var(--radius);
  padding:14px 20px 14px 52px;font-family:var(--mdm-font-body);font-size:15px;font-weight:300;
}
.field input::placeholder{color:var(--ink-onDark-soft)}
.field input:focus{border-color:var(--sand);outline-offset:2px}
.finder .count{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-onDark-soft);white-space:nowrap}

.area-group{margin-bottom:40px}
.area-group h3{
  font-family:var(--mdm-font-body);font-size:11.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sand);display:flex;align-items:baseline;gap:14px;margin-bottom:20px;
}
.area-group h3::after{content:"";flex:1;height:1px;background:var(--line-onDark)}
.area-group h3 em{font-style:normal;font-size:10.5px;color:var(--ink-onDark-soft);letter-spacing:.1em}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 17px;
  border:1px solid var(--line-onDark);border-radius:999px;font-size:13.5px;color:var(--ink-onDark);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.chip .wa,.chip .go{width:14px;height:14px;color:var(--copper);opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s}
.chip:hover{background:var(--sand);border-color:var(--sand);color:var(--petrol);transform:translateY(-2px)}
.chip:hover .wa,.chip:hover .go{opacity:1;transform:none;color:var(--petrol)}
/* A linked area heading stays typographically identical to a plain one. */
.area-group h3 a{color:inherit;border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
.area-group h3 a:hover{border-bottom-color:var(--sand)}
.area-group[hidden]{display:none}
.no-results{font-size:15px;color:var(--ink-onDark-soft);padding:24px 0}
.areas-foot{
  margin-top:20px;padding-top:34px;border-top:1px solid var(--line-onDark);
  display:grid;gap:20px;align-items:center;
}
@media(min-width:860px){.areas-foot{grid-template-columns:1fr auto}}
.areas-foot p{color:var(--ink-onDark-soft);font-size:15px;max-width:60ch}

/* ---------- 12. PROCESS ---------- */
.process-visual{
  position:relative;aspect-ratio:4/3;margin:0 0 clamp(24px,3vw,34px);overflow:hidden;
  border-radius:var(--radius);background:var(--sand-soft);box-shadow:0 32px 70px -52px rgba(10,31,38,.6);
}
@media(min-width:760px){.process-visual{aspect-ratio:16/7}}
.process-visual::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 48%,rgba(10,31,38,.66) 100%);
}
.process-visual img{width:100%;height:100%;object-fit:cover;object-position:center 52%}
.process-visual figcaption{
  position:absolute;z-index:2;inset-inline:clamp(18px,3vw,34px);bottom:clamp(16px,2.6vw,30px);
  color:var(--ink-onDark);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;
}
.process-visual figcaption b{font-family:var(--mdm-font-display);font-size:clamp(24px,2.6vw,34px);font-weight:400}
.process-visual figcaption span{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-onDark-soft)}
.steps{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--ivory);padding:34px 28px 38px;display:flex;flex-direction:column;gap:14px;transition:background .35s var(--ease)}
.step:hover{background:var(--paper)}
.step .n{font-family:var(--mdm-font-display);font-size:13px;letter-spacing:.2em;color:var(--petrol)}
.step h3{font-size:23px}
.step p{font-size:14.5px;color:var(--ink-soft);line-height:1.62}

/* ---------- 12B. WHY-AT-HOME STORY ---------- */
.why-story{display:grid;gap:clamp(34px,5vw,64px);align-items:start;margin-top:clamp(44px,6vw,72px)}
@media(min-width:940px){.why-story{grid-template-columns:1.15fr .85fr}}
.why-story .prose{max-width:860px}
.why-photo{
  position:relative;aspect-ratio:4/5;margin:0;overflow:hidden;border-radius:var(--radius);
  background:var(--sand-soft);box-shadow:0 34px 76px -50px rgba(10,31,38,.6);
}
.why-photo::before{
  content:"";position:absolute;z-index:2;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(10,31,38,.62) 100%);
}
.why-photo img{width:100%;height:100%;object-fit:cover}
.why-photo figcaption{
  position:absolute;z-index:3;inset-inline:20px;bottom:18px;color:var(--ink-onDark);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
}
@media(max-width:939px){.why-photo{order:-1;aspect-ratio:16/11}}

/* ---------- 13. STANDARDS ---------- */
.standards{background:var(--sand)}
.standards .std-grid{display:grid;gap:clamp(34px,5vw,64px)}
@media(min-width:940px){.standards .std-grid{grid-template-columns:.85fr 1.15fr}}
.std-list li{display:flex;gap:18px;padding-block:20px;border-top:1px solid rgba(34,83,101,.22)}
.std-list li:last-child{border-bottom:1px solid rgba(34,83,101,.22)}
.std-list .ic{width:26px;flex:none;display:grid;place-items:start center;padding-top:3px;color:var(--copper)}
.std-list b{display:block;font-family:var(--mdm-font-display);font-size:20px;font-weight:400;margin-bottom:4px}
.std-list p{font-size:14.5px;color:var(--petrol);line-height:1.6}

/* ---------- 14. TESTIMONIALS ---------- */
.quotes{position:relative;text-align:center;max-width:900px;margin-inline:auto}
.quote{display:none}
.quote.is-active{display:block;animation:fade .6s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.quote blockquote{margin:0;font-family:var(--mdm-font-display);font-weight:300;font-style:italic;font-size:clamp(24px,3.4vw,40px);line-height:1.32;letter-spacing:-.01em}
.quote figcaption{margin-top:28px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.quote .stars{color:var(--copper);letter-spacing:.28em;font-size:13px;margin-bottom:22px}
.q-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:40px}
.q-controls button{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:background .25s,border-color .25s,color .25s}
.q-controls button:hover{background:var(--petrol);border-color:var(--petrol);color:var(--ivory)}
.q-dots{display:flex;gap:9px}
.q-dots button{width:26px;height:26px;border:0;border-radius:0;display:grid;place-items:center;background:none}
.q-dots button::after{content:"";width:7px;height:7px;border-radius:50%;border:1px solid var(--copper);transition:background .25s}
.q-dots button[aria-selected="true"]::after{background:var(--copper);border-color:var(--copper)}
.q-dots button:hover{background:none}
.q-dots button:hover::after{background:var(--copper)}

/* ---------- 15. FAQ ---------- */
.faq-grid{display:grid;gap:clamp(30px,4vw,60px)}
@media(min-width:980px){.faq-grid{grid-template-columns:.72fr 1.28fr}}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq details:first-of-type{border-top:1px solid var(--line-soft)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;
  font-family:var(--mdm-font-display);font-size:clamp(19px,2.1vw,24px);font-weight:400;line-height:1.32;
  transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--petrol)}
.faq summary::after,.faq summary::before{
  content:"";position:absolute;inset-inline-end:6px;top:50%;background:var(--copper);transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.faq summary::after{width:15px;height:1px;margin-top:0}
.faq summary::before{width:1px;height:15px;margin-top:-7px;inset-inline-end:13px}
.faq details[open] summary::before{transform:rotate(90deg);opacity:0}
.faq details p{padding:0 40px 26px 0;font-size:15px;color:var(--ink-soft);line-height:1.7;max-width:62ch}
.faq-aside{background:var(--paper);border:1px solid var(--line);padding:32px;border-radius:var(--radius);align-self:start}
.faq-aside h3{font-size:26px;margin-bottom:12px}
.faq-aside p{font-size:14.5px;color:var(--ink-soft);margin-bottom:22px}
.faq-aside .btn{width:100%}
.faq-aside .hours{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--ink-soft);display:grid;gap:7px}
.faq-aside .hours div{display:flex;justify-content:space-between;gap:14px}

/* ---------- 16. FINAL CTA ---------- */
.finale{background:var(--harbour);color:var(--ink-onDark);text-align:center;position:relative;overflow:hidden}
.finale::before{
  content:"";position:absolute;width:min(760px,120vw);aspect-ratio:1;left:50%;top:-42%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(194,116,74,.22),transparent 66%);pointer-events:none;
}
.finale .wrap{position:relative}
.finale h2{color:var(--ink-onDark);max-width:16ch;margin-inline:auto}
.finale p{color:var(--ink-onDark-soft);max-width:52ch;margin:26px auto 0;font-size:17px}
.finale .btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:40px}
.finale .btns .btn{min-width:220px}
.finale .fine{margin-top:34px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-onDark-soft)}

/* ---------- 17. FOOTER ---------- */
.footer{background:var(--petrol);color:var(--ink-onDark-soft);border-top:1px solid var(--line-onDark);font-size:14px}
.f-grid{display:grid;gap:38px;padding-block:clamp(52px,6vw,76px)}
@media(min-width:860px){.f-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px}}
.footer h4{font-family:var(--mdm-font-body);font-size:10.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);margin-bottom:20px}
.footer li{margin-bottom:11px}
.footer a{transition:color .25s}
.footer a:hover{color:var(--sand)}
.f-brand .brand img{height:68px}
.f-brand p{margin-top:20px;max-width:36ch;line-height:1.7}
.socials{display:flex;gap:10px;margin-top:24px}
.socials a{width:42px;height:42px;border:1px solid var(--line-onDark);border-radius:50%;display:grid;place-items:center;transition:background .25s,color .25s,border-color .25s}
.socials a:hover{background:var(--sand);border-color:var(--sand);color:var(--petrol)}
.f-bottom{border-top:1px solid var(--line-onDark);padding-block:24px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:.06em}
.f-bottom ul{display:flex;flex-wrap:wrap;gap:12px 22px}
.demo-note{
  border-top:1px solid var(--line-onDark);padding-block:16px;font-size:11.5px;letter-spacing:.08em;
  color:rgba(217,198,183,.72);text-align:center;
}

/* ---------- 18. STICKY WHATSAPP ---------- */
.wa-fab{
  position:fixed;z-index:800;inset-inline-end:22px;bottom:22px;
  width:58px;height:58px;border-radius:50%;background:var(--petrol);color:var(--white);
  display:grid;place-items:center;box-shadow:0 14px 34px -12px rgba(10,31,38,.55);
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.wa-fab:hover{background:var(--harbour);transform:scale(1.06)}
.wa-fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--copper);animation:ping 3.4s var(--ease) infinite}
@media(max-width:599px){
  .wa-fab{display:none}
  .mobar{display:grid}
  body{padding-bottom:76px}
}
.mobar{
  display:none;position:fixed;z-index:800;inset-inline:0;bottom:0;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);
  border-top:1px solid var(--line-soft);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobar a{
  min-height:60px;display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:13px;font-weight:600;letter-spacing:.01em;
}
.mobar .call{background:var(--paper);color:var(--ink)}
.mobar .wa{background:var(--petrol);color:var(--white)}

/* ---------- 19. READING PROGRESS ---------- */
.progress{position:fixed;top:0;inset-inline:0;height:2px;z-index:950;background:transparent;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--copper-light),var(--copper));transform-origin:0 50%}

/* ---------- 20. MARQUEE (towers ticker) ---------- */
.ticker{overflow:hidden;border-block:1px solid var(--line-soft);background:var(--ivory);padding-block:16px;position:relative}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.ticker::before{inset-inline-start:0;background:linear-gradient(90deg,var(--ivory),transparent)}
.ticker::after{inset-inline-end:0;background:linear-gradient(270deg,var(--ivory),transparent)}
.ticker-track{display:flex;width:max-content;animation:slide 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span,.ticker a{
  display:inline-flex;align-items:center;gap:22px;padding-inline:22px;white-space:nowrap;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
.ticker span::after,.ticker a::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--copper);opacity:.7}
/* Linked items still read as part of the strip — colour shift only on hover. */
.ticker a{transition:color .25s var(--ease)}
.ticker a:hover,.ticker a:focus-visible{color:var(--petrol)}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* ---------- 21. BENEFITS ---------- */
.bene{display:grid;gap:clamp(24px,3vw,34px);grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.bene article{padding:32px 28px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--paper);position:relative;overflow:hidden;transition:border-color .35s var(--ease),transform .35s var(--ease)}
.bene article::after{content:"";position:absolute;inset-inline-start:0;top:0;width:0;height:2px;background:var(--copper);transition:width .5s var(--ease)}
.bene article:hover{border-color:var(--line);transform:translateY(-4px)}
.bene article:hover::after{width:100%}
.bene .ic{display:block;color:var(--copper);margin-bottom:18px}
.bene h3{font-size:22px;margin-bottom:10px}
.bene p{font-size:14.5px;color:var(--ink-soft);line-height:1.65}

/* ---------- 22. BOOKING BUILDER ---------- */
.builder{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.builder-grid{display:grid}
@media(min-width:960px){.builder-grid{grid-template-columns:1.35fr .95fr}}
.builder-form{padding:clamp(26px,4vw,44px)}
.bfield{margin-bottom:30px}
.bfield:last-child{margin-bottom:0}
.bfield > legend,.bfield > .lbl{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:14px;display:flex;align-items:center;gap:9px;padding:0;
}
.bfield > legend b,.bfield > .lbl b{width:18px;height:18px;border-radius:50%;background:var(--petrol);color:var(--white);font-size:9.5px;font-weight:400;display:grid;place-items:center;letter-spacing:0}
fieldset.bfield{border:0;padding:0;margin-inline:0}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{
  display:flex;align-items:center;justify-content:center;min-height:46px;padding:11px 18px;
  border:1px solid var(--line-soft);border-radius:999px;font-size:13.5px;color:var(--ink);
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.opt:hover span{border-color:var(--petrol);transform:translateY(-1px)}
.opt input:checked + span{background:var(--petrol);border-color:var(--petrol);color:var(--ivory)}
.opt input:focus-visible + span{outline:2px solid var(--petrol);outline-offset:3px}
.binputs{display:grid;gap:12px}
@media(min-width:560px){.binputs{grid-template-columns:1fr 1fr}}
.binput{position:relative}
.binput input{
  width:100%;min-height:52px;padding:14px 16px;background:var(--ivory);color:var(--ink);
  border:1px solid var(--line-soft);border-radius:var(--radius);
  font-family:var(--mdm-font-body);font-size:15px;font-weight:300;
}
.binput input:hover{border-color:var(--line)}
.binput input::placeholder{color:var(--ink-soft)}
.binput.full{grid-column:1/-1}

.builder-summary{
  background:var(--petrol);color:var(--ink-onDark);padding:clamp(26px,4vw,40px);
  display:flex;flex-direction:column;
}
.builder-summary h3{color:var(--ink-onDark);font-size:26px;margin-bottom:6px}
.builder-summary .sub{font-size:13px;color:var(--ink-onDark-soft);margin-bottom:26px}
.sum-list{display:grid;gap:0;margin-bottom:24px}
.sum-list div{display:flex;justify-content:space-between;gap:18px;padding-block:13px;border-bottom:1px solid var(--line-onDark);font-size:14px}
.sum-list dt{color:var(--ink-onDark-soft);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding-top:2px}
.sum-list dd{margin:0;text-align:end;max-width:60%}
.sum-total{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding-block:20px;margin-bottom:22px}
/* direct child only — the price lives in a nested span and must keep 42px */
.sum-total > span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-onDark-soft)}
.sum-total b{font-family:var(--mdm-font-display);font-size:42px;font-weight:400;line-height:1;transition:opacity .25s var(--ease)}
.sum-total b em{font-style:normal;font-family:var(--mdm-font-body);font-size:13px;letter-spacing:.12em;color:var(--ink-onDark-soft);margin-inline-end:6px}
.sum-total.flash b{opacity:.35}
.builder-summary .btn{width:100%;margin-top:auto}
.builder-summary .fine{font-size:11.5px;color:rgba(217,198,183,.8);margin-top:16px;line-height:1.6;text-align:center}

/* ---------- 23. TREATMENT GUIDE ---------- */
.guide{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden}
.guide .grow{display:grid;gap:4px 20px;background:var(--ivory);padding:24px 26px;transition:background .3s var(--ease)}
@media(min-width:820px){.guide .grow{grid-template-columns:1.1fr 1.4fr .9fr;align-items:center;gap:26px}}
.guide .grow:hover{background:var(--paper)}
.guide .grow.head{background:var(--petrol);color:var(--ink-onDark)}
@media(max-width:819px){.guide .grow.head{display:none}} /* column labels are meaningless once stacked */
.guide .grow.head span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand)}
.guide .want{font-family:var(--mdm-font-display);font-size:20px}
.guide .rec{font-size:14.5px;color:var(--ink-soft);line-height:1.55}
.guide .go{justify-self:start}
@media(min-width:820px){.guide .go{justify-self:end}}

/* ---------- 24. JOURNAL ---------- */
.journal{display:grid;gap:clamp(24px,3vw,32px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.jcard{display:flex;flex-direction:column;border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;background:var(--paper);transition:transform .4s var(--ease),border-color .4s var(--ease)}
.jcard:hover{transform:translateY(-5px);border-color:var(--line)}
.jthumb{aspect-ratio:16/10;position:relative;overflow:hidden;background:linear-gradient(140deg,var(--sand-soft),var(--sand) 55%,var(--copper))}
.jthumb::after{content:"";position:absolute;inset:0;opacity:.2;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='j'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.015 .09' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23j)'/%3E%3C/svg%3E")}
.jthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.jcard:hover .jthumb img{transform:scale(1.05)}
.jbody{padding:26px;display:flex;flex-direction:column;gap:12px;flex:1}
.jmeta{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol)}
.jcard h3{font-size:23px;line-height:1.22}
.jcard p{font-size:14.5px;color:var(--ink-soft);line-height:1.65}
.jcard .tlink{margin-top:auto}

/* ---------- 25. THERAPIST FILTERS ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px}
.filters button{
  min-height:44px;padding:10px 19px;border:1px solid var(--line-soft);border-radius:999px;
  font-size:12.5px;letter-spacing:.06em;color:var(--ink-soft);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.filters button:hover{border-color:var(--petrol);color:var(--petrol)}
.filters button[aria-pressed="true"]{background:var(--petrol);border-color:var(--petrol);color:var(--ivory)}
.tcard[hidden]{display:none}

/* ---------- 26. BACK TO TOP + TOAST ---------- */
.totop{
  position:fixed;z-index:800;inset-inline-end:22px;bottom:92px;width:46px;height:46px;
  border:1px solid var(--line);border-radius:50%;background:var(--ivory);color:var(--ink);
  display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,background .25s,color .25s;
}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--petrol);color:var(--ivory);border-color:var(--petrol)}
@media(max-width:599px){.totop{bottom:76px;inset-inline-end:16px}}
.toast{
  position:fixed;z-index:1200;left:50%;bottom:26px;transform:translate(-50%,20px);
  background:var(--petrol);color:var(--ink-onDark);padding:14px 24px;border-radius:999px;
  font-size:13.5px;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  box-shadow:0 18px 40px -20px rgba(10,31,38,.6);max-width:calc(100vw - 40px);text-align:center;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(max-width:599px){.toast{bottom:84px}}

/* ---------- 27. ANIMATION REFINEMENTS ---------- */
/* Staggered reveal — applied by JS via --d */
.rv{transition-delay:var(--d,0ms)}
/* Word-by-word hero reveal */
.reveal-line{display:block;overflow:hidden}
.reveal-line > span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.rv.in .reveal-line > span{transform:none}
.rv.in .reveal-line:nth-child(2) > span{transition-delay:.09s}
.rv.in .reveal-line:nth-child(3) > span{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){.reveal-line > span{transform:none!important}}
/* Section headings get a hairline that draws in */
.s-head .eyebrow::before{width:0;transition:width .8s var(--ease) .1s}
.rv.in .eyebrow::before{width:28px}

/* ---------- 28. PERFORMANCE ---------- */
/* NOTE: content-visibility:auto was tried on #areas / #journal and removed.
   It does cut initial render work, but because the real height of those
   sections only resolves once they are reached, the scrollbar and the reading
   progress bar shift underneath the user mid-scroll. Predictable scrolling is
   worth more here than the saving: the page is light enough already — speed
   comes from lazy images, deferred reveal work and one small inline script.
   If the journal ever grows to 20+ cards, revisit this with a fixed
   contain-intrinsic-size rather than `auto`. */

/* Promote only what actually animates on scroll */
.arch{will-change:transform}
.ticker-track{will-change:transform}

/* ---------- 29. UTIL ---------- */
.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}
.center-narrow{max-width:760px;margin-inline:auto;text-align:center}
.prose p{max-width:66ch;color:var(--ink-soft);font-size:16px;line-height:1.8;margin-bottom:18px}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:400;color:var(--ink)}
.prose a{color:var(--petrol);border-bottom:1px solid var(--line);transition:border-color .25s}
.prose a:hover{border-color:var(--petrol)}

/* ==========================================================================
   30. ARABIC / RTL
   The whole layout is built on logical properties (margin-inline,
   inset-inline-start, padding-inline, text-align:start), so setting
   dir="rtl" mirrors it without a separate stylesheet. What follows is only
   what genuinely differs for Arabic.
   ========================================================================== */

[dir="rtl"]{
  /* Brand Arabic pairing (Guidelines p.13) */
  --mdm-font-display:"Noto Naskh Arabic","Times New Roman",serif;
  --mdm-font-body:"Noto Sans Arabic",Arial,sans-serif;
}

/* CRITICAL: Arabic is cursive. Any letter-spacing breaks the joins between
   letters and renders words as disconnected glyphs. Latin tracking is reset
   everywhere, then re-allowed only on elements that hold Latin strings
   (prices, times, the AED unit). */
[dir="rtl"] body,
[dir="rtl"] .eyebrow,
[dir="rtl"] .btn,
[dir="rtl"] .tlink,
[dir="rtl"] .nav a,
[dir="rtl"] .tag,
[dir="rtl"] .topbar,
[dir="rtl"] .menu-meta,
[dir="rtl"] .menu nav a i,
[dir="rtl"] .hero-meta span,
[dir="rtl"] .trust b,
[dir="rtl"] .tcard .role,
[dir="rtl"] .portrait .badge,
[dir="rtl"] .tcard dt,
[dir="rtl"] .area-group h3,
[dir="rtl"] .area-group h3 em,
[dir="rtl"] .finder .count,
[dir="rtl"] .step .n,
[dir="rtl"] .jmeta,
[dir="rtl"] .quote figcaption,
[dir="rtl"] .sum-list dt,
[dir="rtl"] .sum-total > span,
[dir="rtl"] .bfield > legend,
[dir="rtl"] .bfield > .lbl,
[dir="rtl"] .ptable caption,
[dir="rtl"] .ptable thead th,
[dir="rtl"] .ptable td.aed em,
[dir="rtl"] .guide .grow.head span,
[dir="rtl"] .footer h4,
[dir="rtl"] .f-bottom,
[dir="rtl"] .finale .fine,
[dir="rtl"] .demo-note,
[dir="rtl"] .mobar a,
[dir="rtl"] .lang button,
[dir="rtl"] .why-photo figcaption{letter-spacing:normal;text-transform:none}

/* Latin-only runs keep their Latin treatment */
[dir="rtl"] .num,
[dir="rtl"] .aed,
[dir="rtl"] .sum-total b,
[dir="rtl"] .hero-meta b,
[dir="rtl"] [lang="en"]{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .hero-meta li,
[dir="rtl"] .price,
[dir="rtl"] .sum-total{text-align:start}

/* Naskh needs more leading than Bodoni; tighten nothing, open everything */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{
  letter-spacing:normal;line-height:1.4;font-weight:500;
}
[dir="rtl"] h1{font-size:clamp(30px,3.4vw,46px);line-height:1.4}
[dir="rtl"] h2{font-size:clamp(24px,2.8vw,34px);line-height:1.45}
[dir="rtl"] h3{font-size:clamp(18px,2vw,23px);line-height:1.45}
[dir="rtl"] .lede,[dir="rtl"] .prose p{line-height:1.9}
[dir="rtl"] body{line-height:1.85}
[dir="rtl"] .quote blockquote{font-size:clamp(20px,2.6vw,32px);line-height:1.6;font-style:normal}
[dir="rtl"] .serif-i,[dir="rtl"] .hero h1 .em{font-style:normal;color:var(--petrol)}

/* Directional glyphs and motion have to flip */
[dir="rtl"] .arw{display:inline-block;transform:scaleX(-1)}
[dir="rtl"] .tlink:hover .arw{transform:scaleX(-1) translateX(4px)}
[dir="rtl"] .ticker-track{animation-direction:reverse}
[dir="rtl"] .progress i{transform-origin:100% 50%;margin-inline-start:auto}
[dir="rtl"] .burger span::before,[dir="rtl"] .burger span::after{left:auto;right:0}

/* The logo is fixed artwork: it must never be mirrored (Guidelines p.11) */
[dir="rtl"] .brand img{transform:none}

/* The reveal slide keeps its vertical direction; nothing to mirror there. */