/* ============================================================================
   svc.css — the treatment pages (30 of them) and the six hub pages.
   ----------------------------------------------------------------------------
   Deliberately ONE external file rather than inlined per page: a visitor who
   reads two treatment pages downloads this once. The home page stays a single
   self-contained file because it is usually the only page in that visit.

   Same tokens as index-new.html. If a colour changes there, change it here —
   they are two files precisely because they are two different loading stories,
   not because they are two different designs.
   ========================================================================== */



:root{
  --deep:#06191a;
  --ocean-900:#0b2e2d; --ocean-800:#123a39; --ocean-700:#1a5a58;
  --ocean-600:#1f6e6b; --ocean-500:#2b8a86; --ocean-400:#3aa7a3;
  --ocean-100:#d7f4f3; --ocean-50:#eefbfb;
  --gold-600:#a9813a; --gold-500:#c8a24f; --gold-400:#d9bd76; --gold-300:#e9d7a8;
  --sand-50:#fdfaf6; --sand-100:#f8f1e7; --sand-200:#eee0cb;
  --ink:#0d2726; --ink-soft:#3d5a58;

  /* Named light surfaces, same values as before, so the dark block below has
     something to redefine. */
  --surface:#ffffff; --surface-warn:#fffdf7;
  --hdr-bg:rgba(253,250,246,.86);
  --line:rgba(13,39,38,.09);
  --link:#1f6e6b; --gold-ink:#a9813a;
  --chip:#eefbfb; --chip-fg:#1f6e6b;
  --f-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(1.15rem,4vw,3rem);
  --maxw:1080px;
  --r-lg:28px; --r-md:18px; --r-sm:12px;
  --shadow-soft:0 30px 80px -40px rgba(6,25,26,.55);
  --shadow-card:0 18px 50px -26px rgba(6,25,26,.42);
}

/* ── The dark version ─────────────────────────────────────────────────────
   Matches the home page exactly: page #0a1918, section #0e2120, card #142c2a,
   so a visitor moving from the home page to a treatment page does not cross a
   seam. The gold family and the dark call-to-action are identical in both
   themes -- only the light half of these pages moves.
   ────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark){
  /* guarded so a reader who chose light on a dark phone actually gets light */
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --sand-50:#0a1918; --sand-100:#0e2120; --sand-200:#26443f;
    --surface:#142c2a; --surface-warn:#17302b;
    --hdr-bg:rgba(9,23,22,.92);
    --ink:#e8f0ee; --ink-soft:#9db5b1;
    --link:#6fc9c0; --gold-ink:#d9bd76;
    --chip:#13322e; --chip-fg:#7fd6cc;
    --line:rgba(255,255,255,.09);
    --shadow-soft:0 30px 80px -40px rgba(0,0,0,.85);
    --shadow-card:0 18px 50px -26px rgba(0,0,0,.75);
  }
}

/* the same values for a reader who pressed the button on any page */
:root[data-theme="dark"]{
  color-scheme: dark;
  --sand-50:#0a1918; --sand-100:#0e2120; --sand-200:#26443f;
  --surface:#142c2a; --surface-warn:#17302b;
  --hdr-bg:rgba(9,23,22,.92);
  --ink:#e8f0ee; --ink-soft:#9db5b1;
  --link:#6fc9c0; --gold-ink:#d9bd76;
  --chip:#13322e; --chip-fg:#7fd6cc;
  --line:rgba(255,255,255,.09);
  --shadow-soft:0 30px 80px -40px rgba(0,0,0,.85);
  --shadow-card:0 18px 50px -26px rgba(0,0,0,.75);
}

/* ── the moon/sun, sized to sit beside the language row ────────────────── */
.theme-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 auto;border-radius:999px;cursor:pointer;padding:0;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  transition:border-color .3s,color .3s;
}
.theme-btn:hover{border-color:var(--gold-ink);color:var(--gold-ink)}
.theme-btn:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.theme-btn svg{width:17px;height:17px}
.theme-btn .t-sun{display:none}
:root[data-theme="dark"] .theme-btn .t-sun{display:block}
:root[data-theme="dark"] .theme-btn .t-moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .t-sun{display:block}
  :root:not([data-theme="light"]) .theme-btn .t-moon{display:none}
}

html[dir="rtl"]{
  --f-display:'Tajawal','Segoe UI',sans-serif;
  --f-body:'Tajawal','Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--sand-50);color:var(--ink);
  font-family:var(--f-body);font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.72;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:600;line-height:1.14;letter-spacing:-.015em}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{letter-spacing:0}
p{margin:0 0 1.1rem}
a{color:var(--link)}
/* ⚠️ height:auto IS NOT OPTIONAL HERE. Every <img> on these pages carries a
   width and a height attribute so the browser can reserve the space before
   the file arrives. With only max-width, a narrow screen squeezes the WIDTH to
   the column and leaves the HEIGHT at the attribute value — 655px — so a
   1200x655 photograph renders 570 wide by 655 tall and the teeth stretch
   vertically. It looked like a fault in the photographs; it was this line.
   Measured on a 375px phone: 570x655 before, 570x311 after. */
img{max-width:100%;height:auto}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* skip link — the page is long and the nav is short */
.skip{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:99;
  background:var(--ocean-800);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 12px 0;
}
.skip:focus{inset-inline-start:0}

/* ── header ─────────────────────────────────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:40;background:var(--hdr-bg);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.hdr-in{display:flex;align-items:center;gap:1rem;padding-block:.85rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;margin-inline-end:auto}
.brand svg{width:46px;height:31px;flex:0 0 auto}
.brand b{display:block;font-family:var(--f-display);font-size:1.3rem;font-weight:600;line-height:1}
.brand span{display:block;font-size:.6rem;letter-spacing:.19em;text-transform:uppercase;color:var(--gold-ink);margin-top:.28rem}
html[dir="rtl"] .brand b,html[dir="rtl"] .brand span{letter-spacing:0}

/* language row — plain links, so a crawler follows every translation */
.langs{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;font-size:.82rem}
.langs a,.langs strong{
  padding:.32rem .62rem;border-radius:999px;text-decoration:none;
  color:var(--ink-soft);border:1px solid transparent;white-space:nowrap;
}
.langs a:hover{background:var(--chip);color:var(--link)}
.langs strong{background:var(--ocean-800);color:#fff;font-weight:700}

/* ── breadcrumb ─────────────────────────────────────────────────────────── */
.crumb{font-size:.85rem;color:var(--ink-soft);padding-top:1.6rem}
.crumb a{color:var(--ink-soft)}
.crumb i{font-style:normal;opacity:.5;padding-inline:.45rem}

/* ── hero ───────────────────────────────────────────────────────────────── */
.top{padding-block:1.2rem 2.6rem}
.top h1{font-size:clamp(1.9rem,1.2rem + 2.6vw,3rem);max-width:20ch}
.lead{font-size:clamp(1.05rem,1rem + .35vw,1.22rem);color:var(--ink-soft);margin-top:1.2rem;max-width:62ch}
.facts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.fact{
  display:inline-flex;align-items:baseline;gap:.42rem;
  background:var(--surface);border:1px solid var(--sand-200);border-radius:999px;
  padding:.5rem 1rem;font-size:.87rem;box-shadow:var(--shadow-card);
}
.fact b{font-family:var(--f-display);font-size:1.12rem;color:var(--link)}
.fact.two b{color:var(--gold-ink)}

/* ── sections ───────────────────────────────────────────────────────────── */
.sec{padding-block:2.2rem}
.sec h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);margin-bottom:1rem}
.steps{margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{
  counter-increment:s;position:relative;padding-inline-start:3.1rem;
  padding-block:.55rem;margin-bottom:.5rem;
}
.steps li::before{
  content:counter(s);position:absolute;inset-inline-start:0;top:.55rem;
  width:2.15rem;height:2.15rem;border-radius:50%;display:grid;place-items:center;
  background:var(--chip);color:var(--link);
  font-family:var(--f-display);font-size:1rem;font-weight:600;
}

/* who it suits / when it does not — side by side, and the honest one is not
   hidden at the bottom of the page where nobody reads it */
.two-col{display:grid;gap:1.2rem}
@media(min-width:820px){.two-col{grid-template-columns:1fr 1fr;align-items:start}}
.card{background:var(--surface);border:1px solid var(--sand-200);border-radius:var(--r-md);padding:1.5rem 1.6rem;box-shadow:var(--shadow-card)}
.card.warn{background:var(--surface-warn);border-color:var(--sand-200)}
.card h2{font-size:1.15rem;margin-bottom:.85rem}
.card ul{margin:0;padding-inline-start:1.15rem}
.card li{margin-bottom:.62rem}
.card.warn li::marker{color:var(--gold-ink)}
.card.good li::marker{color:var(--ocean-500)}

.lasts{background:var(--ocean-800);color:#fff;border-radius:var(--r-md);padding:1.6rem 1.7rem}
.lasts h2{color:var(--gold-300);font-size:1.15rem;margin-bottom:.7rem}
.lasts p{margin:0;color:rgba(255,255,255,.86)}

/* ── faq ────────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--sand-200)}
.faq details{border-bottom:1px solid var(--sand-200)}
.faq summary{
  cursor:pointer;list-style:none;padding-block:1.05rem;
  font-weight:700;display:flex;gap:.9rem;align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-inline-start:auto;font-family:var(--f-display);
  font-size:1.4rem;line-height:1;color:var(--gold-ink);flex:0 0 auto;
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding-bottom:1.15rem;color:var(--ink-soft);max-width:70ch}
.faq .ans p{margin:0}

/* ── other treatments ───────────────────────────────────────────────────── */
.grid{display:grid;gap:.9rem;grid-template-columns:1fr}
@media(min-width:620px){.grid{grid-template-columns:1fr 1fr}}
.tile{
  display:block;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--sand-200);border-radius:var(--r-md);padding:1.15rem 1.3rem;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.tile b{display:block;font-family:var(--f-display);font-size:1.12rem;font-weight:600}
.tile span{display:block;font-size:.85rem;color:var(--ink-soft);margin-top:.3rem}
.tile em{font-style:normal;color:var(--gold-ink);font-weight:700}

/* ── cta ────────────────────────────────────────────────────────────────── */
.cta{background:linear-gradient(150deg,var(--ocean-800),var(--deep));color:#fff;border-radius:var(--r-lg);padding:clamp(1.8rem,4vw,3rem);margin-block:2.4rem}
.cta h2{color:#fff;font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem)}
.cta p{color:rgba(255,255,255,.78);margin-top:.9rem;max-width:56ch}
.btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;padding:.95rem 1.7rem;
  border-radius:999px;text-decoration:none;font-weight:800;font-size:.94rem;
  transition:transform .3s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(115deg,var(--gold-600),var(--gold-400) 55%,var(--gold-500));color:#1d1405}
.btn-ghost{border:1.6px solid rgba(255,255,255,.34);color:#fff}

/* ── footer ─────────────────────────────────────────────────────────────── */
.ft{background:var(--deep);color:rgba(255,255,255,.72);padding-block:2.4rem;font-size:.9rem}
.ft a{color:var(--gold-300)}
.ft .row{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center}
.ft .row + .row{margin-top:.7rem}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ── The treatment, photographed ───────────────────────────────────────────
   ⚠️ EVERY ONE OF THESE IS GENERATED, NOT A PATIENT, and the caption under
      them says so in the visitor's own language. A cosmetic before/after with
      no such line reads as a promise about the reader's own mouth — and it is
      also the thing ad reviewers and regulators look for first.
   The pair sits side by side rather than under a drag handle: the two frames
   were generated separately, so a wipe between them would jump. */
.shots{display:grid;gap:1rem}
/* ⚠️ 640, not 820: a tablet is 768 wide and had the pair stacked, which is
   the one layout a before/after must never have — you cannot compare two
   photographs you cannot see at the same time. At 640 each frame is ~300px,
   which is plenty for a mouth. */
@media(min-width:640px){.shots{grid-template-columns:1fr 1fr}}
.shot{margin:0;background:var(--surface);border:1px solid var(--sand-200);
      border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-card)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:.75rem 1rem;font-size:.92rem;font-weight:700;color:var(--ink)}
.shot-wide{margin-top:1rem}
.shots-note{margin:.9rem 0 0;font-size:.86rem;line-height:1.6;color:var(--ink-soft)}

/* ═══════════════════════════════════════════════════════════════════════════
   ONE SPIRIT WITH THE HOME PAGE
   ---------------------------------------------------------------------------
   The tokens above were already identical to the home page — same greens, same
   gold, same two typefaces. What was missing was the TREATMENT: the home page
   reveals its sections as you reach them, frames its pictures, and lets gold
   do the pointing. Without those the treatment pages read as a plain document
   attached to an expensive site, which is the seam the owner saw.

   ⚠️ Everything below is additive. No existing rule is changed, so a page that
      never loads this half still renders exactly as it did.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sections arrive rather than appear ───────────────────────────────────
   ⚠️ THE HIDDEN STATE IS APPLIED BY SCRIPT, NEVER IN THE STYLESHEET. If it
      lived here, a browser with JavaScript off — or any failure in svc.js —
      would leave the whole page at opacity 0 and the visitor would see a blank
      white page. The class is only ever added by code that also guarantees to
      take it off again. */
.sv-rv{opacity:0;transform:translateY(26px);
       transition:opacity .8s var(--ease),transform .8s var(--ease)}
.sv-rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .sv-rv{opacity:1;transform:none;transition:none}
}

/* ── A gold rule above every section heading ──────────────────────────────
   The home page marks a new section with a short gold line and a small caps
   label. There is no label to write here, so the line carries it alone. */
.sec > h2::before{
  content:"";display:block;width:34px;height:1.5px;
  background:var(--gold-500);opacity:.75;margin-bottom:.85rem;
}
.sec > h2{font-family:var(--f-display);font-weight:600;letter-spacing:-.01em}

/* ── The pictures get a frame, and a sane size ────────────────────────────
   ⚠️ THE WIDTH CAP IS THE POINT. A clinical close-up of a mouth at the full
      1080 of the column fills a laptop screen with gums and reads as a medical
      slide, not as a luxury clinic. Held to the width of the text column it
      reads as a photograph on a page. This was the owner's complaint and it
      was about size, not proportion — the frames were never distorted. */
.shots, .sec > .shot{max-width:820px;margin-inline:auto}
.shot{
  border:1px solid var(--sand-200);
  box-shadow:var(--shadow-card);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.shot:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
/* the hairline of gold the home page puts on anything it wants looked at */
.shot figcaption{
  border-top:1px solid var(--sand-200);
  background:linear-gradient(to bottom,rgba(217,189,118,.09),transparent);
}
.shot figcaption::before{
  content:"";display:inline-block;width:14px;height:1.5px;
  background:var(--gold-500);vertical-align:middle;
  margin-inline-end:.55rem;opacity:.85;
}
.shots-note{max-width:820px;margin-inline:auto;text-align:center}

/* ── The top of the page gets the same warm light as the home hero ────────
   A single very soft glow behind the headline. No animation: it sits under
   text that has to stay readable. */
.top{position:relative}
.top::before{
  content:"";position:absolute;z-index:-1;
  inset-block-start:-40%;inset-inline-start:-10%;
  width:min(640px,80%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(217,189,118,.16),transparent 68%);
  pointer-events:none;
}

/* NOTE: the booking-button and two-row header rules that stood here were
   removed on 2026-09-10, when the home page's own header replaced them.
   They styled a .hdr-book and a wrapping .langs row that no longer exist,
   so they looked inert — but their order:1 on .brand and order:2 on .nav
   were still applying to the new header, whose .hdr-actions has no order
   and therefore defaults to 0. Measured result: the language menu and the
   booking button rendered BEFORE the logo, at x141, on an LTR page.
   Dead CSS is not harmless. */

/* ═══════════════════════════════════════════════════════════════════════════
   THE HOME PAGE'S HEADER, VERBATIM
   ---------------------------------------------------------------------------
   The owner asked for one header across the whole site. What follows is the
   home page's own header CSS, values unchanged, so the two cannot drift into
   looking alike-but-not-the-same.

   ⚠️ ONE DELIBERATE DIFFERENCE: position sticky, not fixed. The home page's
      header floats over a hero that reserves 8.5rem of top padding for it.
      These pages open on a breadcrumb, so a fixed header would sit on top of
      the first line of text. Sticky looks identical and does not overlap.

   ⚠️ AND THE THEME BUTTON GOES, because it is gone on the home page. Dark mode
      was switched off there at the owner's request, and a header that offers a
      moon on one page and not on another is exactly the seam he pointed at.
      One rule at the bottom brings both back.

   These rules sit last in the file on purpose: they must beat the simpler
   header written for these pages before the home page existed in this form.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --line-2:rgba(18,58,57,.18);
  --head:#0b2e2d; --head-2:#123a39;
  --f-logo:"Didot LT Pro","Didot","Bodoni Moda","Bodoni MT",Georgia,serif;
  --f-slogan:"Century Schoolbook","Century","Bodoni Moda",Georgia,serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --line-2:rgba(255,255,255,.20);
    --head:#f1f7f5; --head-2:#d6e6e3;
  }
}
:root[data-theme="dark"]{
  --line-2:rgba(255,255,255,.20);
  --head:#f1f7f5; --head-2:#d6e6e3;
}

/* ── the bar ─────────────────────────────────────────────────────────────── */
.hdr{
  position:sticky;top:0;inset-inline:0;z-index:100;border-bottom:0;
  transition:background .45s var(--ease),box-shadow .45s var(--ease),backdrop-filter .45s;
}
.hdr.solid{
  background:var(--hdr-bg);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 0 var(--line), 0 14px 40px -30px rgba(6,25,26,.5);
}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
        height:78px;padding-block:0;flex-wrap:nowrap;row-gap:0}

/* ── the lockup ──────────────────────────────────────────────────────────── */
.brand{display:flex;align-items:center;gap:.7rem;margin-inline-end:0}
/* flex:0 0 auto is load-bearing: nothing else in this row can shrink, and an
   svg has no minimum content width, so the mark is what flex would crush. */
.brand svg{flex:0 0 auto;width:46px;height:31px;transition:transform .5s var(--ease)}
.brand:hover svg{transform:rotate(-8deg) scale(1.08)}
.brand-txt{line-height:1}
.brand-name{
  display:block;font-family:var(--f-logo);font-size:1.2rem;font-weight:500;
  color:var(--gold-300);text-transform:uppercase;letter-spacing:.16em;
  transition:color .45s;margin-inline-end:-.16em;
}
.brand-name::after{
  content:"";display:block;height:1px;margin:.34rem 0 .3rem;
  background:linear-gradient(90deg,var(--gold-500),rgba(200,162,79,.25));
}
html[dir="rtl"] .brand-name::after{background:linear-gradient(270deg,var(--gold-500),rgba(200,162,79,.25))}
.brand-sub{
  display:block;font-family:var(--f-logo);color:var(--ocean-400);
  font-weight:600;letter-spacing:.24em;
  font-size:clamp(.62rem,.5rem + .2vw,.7rem);
  text-transform:uppercase;transition:color .45s;
}
html[dir="rtl"] .brand-sub{letter-spacing:.06em;font-size:.66rem}
html[dir="rtl"] .brand-name{font-family:var(--f-logo);letter-spacing:.16em}
.brand-name,.brand-sub{white-space:nowrap}
.hdr-slogan{display:none}
@media (min-width:1100px){
  .hdr-slogan{
    display:block;margin-top:.28rem;font-family:var(--f-slogan);
    font-size:.68rem;letter-spacing:.08em;color:var(--gold-400);white-space:nowrap;
  }
  .hdr.solid .hdr-slogan{color:var(--gold-ink)}
}
.hdr.solid .brand-name{color:var(--gold-ink)}
.hdr.solid .brand-sub{color:#1F7D89}

/* ── the navigation ─────────────────────────────────────────────────────── */
.nav{display:none;align-items:center;gap:clamp(1.15rem,.2rem + 1.6vw,2rem);margin-inline:0}
@media (min-width:1100px){ .nav{display:flex} }
.nav a{
  position:relative;white-space:nowrap;font-size:.88rem;font-weight:700;
  color:rgba(255,255,255,.82);transition:color .3s;padding-block:.3rem;
  text-decoration:none;
}
.hdr.solid .nav a{color:var(--ink-soft)}
.nav a::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;width:0;height:1.5px;
  background:currentColor;transition:width .35s var(--ease);transform:none;
}
.nav a:hover{color:var(--gold-400)}
.hdr.solid .nav a:hover{color:var(--gold-ink)}
.nav a:hover::after{width:100%}

/* ── the right-hand group ───────────────────────────────────────────────── */
.hdr-actions{display:flex;align-items:center;gap:.6rem}

.lang{position:relative}
.lang-btn{
  display:flex;align-items:center;justify-content:center;min-height:40px;
  gap:.45rem;padding:.5rem .85rem;border-radius:999px;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.28);color:#fff;font-size:.82rem;font-weight:700;
  background:rgba(255,255,255,.08);backdrop-filter:blur(8px);transition:all .3s;
}
.hdr.solid .lang-btn{border-color:var(--line-2);color:var(--head);background:var(--surface)}
.lang-btn:hover{border-color:var(--gold-400)}
.lang-flag{font-size:1.05rem;line-height:1}
.lang-caret{width:12px;height:12px;transition:transform .3s var(--ease)}
.lang.open .lang-caret{transform:rotate(180deg)}
.lang-menu{
  position:absolute;inset-inline-end:0;top:calc(100% + 12px);width:196px;padding:.45rem;
  background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow-soft);
  border:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.97);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  z-index:5;
}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
/* ⚠️ Links, not buttons as on the home page. There the switch happens inside
   the page; here every language is its own URL, and a real href is the only
   thing a crawler follows and a visitor can open in a new tab. */
.lang-menu a{
  display:flex;align-items:center;gap:.7rem;width:100%;padding:.62rem .8rem;
  border-radius:11px;font-size:.9rem;font-weight:700;color:var(--head);
  transition:background .22s;text-align:start;text-decoration:none;
}
.lang-menu a:hover{background:var(--chip)}
.lang-menu a[aria-current="true"]{background:var(--sand-100);color:var(--gold-ink)}

.burger{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:999px;cursor:pointer;padding:0;
  border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
}
.hdr.solid .burger{border-color:var(--line-2);background:var(--surface)}
@media (min-width:1100px){ .burger{display:none !important} }
.burger span{display:block;width:19px;height:2px;background:#fff;border-radius:2px;
             transition:transform .4s var(--ease),opacity .25s}
.burger span+span{margin-top:4.5px}
.hdr.solid .burger span{background:var(--ink)}
.burger.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── the phone menu ─────────────────────────────────────────────────────── */
.drawer{
  position:fixed;inset:0;z-index:99;background:var(--ocean-900);
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;
  padding:6rem var(--pad) 3rem;
  clip-path:circle(0% at calc(100% - 60px) 40px);
  transition:clip-path .7s var(--ease);
}
html[dir="rtl"] .drawer{clip-path:circle(0% at 60px 40px)}
.drawer.on{clip-path:circle(150% at calc(100% - 60px) 40px)}
html[dir="rtl"] .drawer.on{clip-path:circle(150% at 60px 40px)}
.drawer a{
  font-family:var(--f-display);font-size:clamp(1.6rem,7vw,2.3rem);color:#fff;
  padding-block:.5rem;border-bottom:1px solid rgba(255,255,255,.08);
  text-decoration:none;
  opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;
}
.drawer.on a{opacity:1;transform:none}
.drawer a:hover{color:var(--gold-400)}
.drawer-cta{margin-top:1.8rem;display:flex;flex-direction:column;gap:.7rem}
.drawer-cta a{font-family:var(--f-body);font-size:.95rem;border-bottom:0;
              text-align:center;padding-block:.9rem}

.btn-sm{padding:.72rem 1.35rem;font-size:.86rem}

/* ── the narrow-screen trims, exactly as the home page makes them ───────── */
@media (max-width:640px){
  .hdr-in{gap:.6rem}
  .brand svg{width:38px;height:26px}
  .brand-name{font-size:1.02rem;letter-spacing:.12em;margin-inline-end:-.12em}
  .lang-code,.lang-caret{display:none}
  .lang-btn{padding-inline:.7rem}
  .brand-sub{letter-spacing:.1em;font-size:.58rem}
  .hdr-cta{display:none !important}
}
@media (max-width:430px){ .brand-sub{display:none} }

/* ⚠️ The moon is hidden because it is hidden on the home page: dark mode was
   switched off there at the owner's request, and a switch that appears on one
   page and not another is the seam this whole block exists to close.
   DELETE THIS RULE TO BRING DARK MODE BACK ON THESE PAGES. */
.theme-btn{display:none !important}

/* the drawn flags, not the emoji: Windows has no flag glyphs and renders
   them as the two letters of the country code. */
.fsvg{border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.18);flex:0 0 auto}
.lang-flag{display:flex;align-items:center}

/* ── The floating WhatsApp button and back-to-top ─────────────────────────
   Copied from the home page unchanged. On a phone this is the only booking
   button that is still on screen after the first flick of the thumb — the
   header's scrolls away — so its absence from these pages was the most
   expensive gap in them.

   ⚠️ BOTH START OFF-SCREEN AND ARE BROUGHT IN BY SCRIPT, which is the reverse
      of the rule used for the reveal animation and deliberately so: a floating
      button sitting over the first screen of a page hides content the visitor
      came to read, and if the script fails the fallback is a page with no
      floating button, not a page with a button stuck over its own heading. */
.fab{
  position:fixed;inset-inline-end:clamp(1rem,3vw,1.8rem);bottom:clamp(1rem,3vw,1.8rem);
  z-index:90;display:flex;flex-direction:column;gap:.7rem;align-items:flex-end;
}
.fab-wa{
  display:flex;align-items:center;gap:.65rem;padding:.85rem 1.25rem;border-radius:999px;
  background:#25D366;color:#062f14;font-weight:800;font-size:.92rem;
  text-decoration:none;
  box-shadow:0 18px 44px -16px rgba(37,211,102,.75);
  transform:translateY(90px);opacity:0;
  transition:transform .55s var(--ease),opacity .45s,box-shadow .35s;
}
.fab-wa.show{transform:none;opacity:1}
.fab-wa:hover{box-shadow:0 24px 54px -14px rgba(37,211,102,.9)}
.fab-wa svg{width:22px;height:22px;flex:0 0 auto}
/* the label stands down on the narrowest phones: at that width the pill and
   the header's language menu want the same corner, and the green circle reads
   as WhatsApp in every country this site is written for */
.fab-wa span{display:none}
@media (min-width:560px){ .fab-wa span{display:inline} }

.to-top{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:0;cursor:pointer;
  background:var(--surface);color:var(--head-2);box-shadow:var(--shadow-card);
  transform:translateY(90px);opacity:0;
  transition:transform .55s var(--ease),opacity .45s;
}
.to-top.show{transform:none;opacity:1}
.to-top svg{width:18px;height:18px}

@media (prefers-reduced-motion:reduce){
  .fab-wa,.to-top{transition:opacity .2s}
}

/* ⚠️ Nothing that floats belongs on paper. The home page hides the same set
   when printing; these pages had no print block at all, so a printed
   treatment page carried a green pill across the corner of the page. */
@media print{
  .fab,.hdr,.drawer{display:none !important}
  .shot{break-inside:avoid;box-shadow:none}
}