/* ═══════════════════════════════════════════════
   ALLAH HEALS WELLNESS
   Fonts: OT Pergamon · PP Neue Corp · PP Playground
   ═══════════════════════════════════════════════ */

/* ── OT Pergamon (display + nav + body text) ── */
@font-face {
  font-family: 'OT Pergamon';
  src: url('../assets/fonts/OTPergamon-Extralight.woff2') format('woff2'),
       url('../assets/fonts/OTPergamon-Extralight.woff') format('woff');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'OT Pergamon';
  src: url('../assets/fonts/OTPergamon-Light.woff2') format('woff2'),
       url('../assets/fonts/OTPergamon-Light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'OT Pergamon';
  src: url('../assets/fonts/OTPergamon-Regular.woff2') format('woff2'),
       url('../assets/fonts/OTPergamon-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'OT Pergamon';
  src: url('../assets/fonts/OTPergamon-Semibold.woff2') format('woff2'),
       url('../assets/fonts/OTPergamon-Semibold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'OT Pergamon';
  src: url('../assets/fonts/OTPergamon-Bold.woff2') format('woff2'),
       url('../assets/fonts/OTPergamon-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'OT Pergamon';
  src: url('../assets/fonts/OTPergamon-Black.woff2') format('woff2'),
       url('../assets/fonts/OTPergamon-Black.woff') format('woff');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ── PP Neue Corp Normal (UI accents / pricing / forms) ── */
@font-face {
  font-family: 'PP Neue Corp';
  src: url('../assets/fonts/PPNeueCorp-NormalThin.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Neue Corp';
  src: url('../assets/fonts/PPNeueCorp-NormalMedium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Neue Corp';
  src: url('../assets/fonts/PPNeueCorp-NormalMediumItalic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'PP Neue Corp';
  src: url('../assets/fonts/PPNeueCorp-NormalUltrabold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ── PP Playground (script / watermark) ── */
@font-face {
  font-family: 'PP Playground';
  src: url('../assets/fonts/PPPlayground-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ── PP Fuji Sans (unused — kept in case blog body font changes again) ── */
@font-face {
  font-family: 'PP Fuji Sans';
  src: url('../assets/fonts/PPFuji-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Fuji Sans';
  src: url('../assets/fonts/PPFuji-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Fuji Sans';
  src: url('../assets/fonts/PPFuji-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── PP Editorial New (blog article body text) ── */
@font-face {
  font-family: 'PP Editorial New';
  src: url('../assets/fonts/PPEditorialNew-Ultralight.woff2') format('woff2');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Editorial New';
  src: url('../assets/fonts/PPEditorialNew-UltralightItalic.woff2') format('woff2');
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'PP Editorial New';
  src: url('../assets/fonts/PPEditorialNew-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Editorial New';
  src: url('../assets/fonts/PPEditorialNew-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ══════════════════════════════════════════════
   CSS VARIABLES
══════════════════════════════════════════════ */
:root {
  /* ── Canva colour palette ── */
  --tan:        #c9a87c;
  --tan-dk:     #b89060;
  --tan-lt:     #d9bb90;
  --card-bg:    #c0995f;
  --card-inner: #d4ad7d;
  --cream:      #f0e4cc;
  --ink:        #1a0800;
  --ink-soft:   #3d1a00;
  --maroon:     #6b1a1a;
  --red:        #eb1817;
  --red-dk:     #b51413;
  --red-lt:     #f04040;
  --night:      #0d1420;

  /* ── Typography ──
     OT Pergamon  → headings, nav, body text, hero — site-wide serif
     PP Neue Corp → UI accents, pricing, form labels (secondary)
     PP Playground → calligraphic script (footer watermark) */
  --font-display: 'OT Pergamon', 'EB Garamond', Georgia, serif;
  --font-head:    'OT Pergamon', 'EB Garamond', Georgia, serif;
  --font-body:    'OT Pergamon', 'EB Garamond', Georgia, serif;
  --font-ui:      'PP Neue Corp', 'Inter', system-ui, sans-serif;
  --font-script:  'PP Playground', 'Pinyon Script', cursive;

  --nav-h:  68px;
  --max-w:  1200px;
  --radius: 8px;
  --shadow: 0 6px 32px rgba(26,8,0,.18);
  --tr:     320ms cubic-bezier(.16,1,.3,1);
}

/* ══════════════════════════════════════════════
   RESET
══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); overflow-x: hidden; overflow-x: clip; }

body {
  font-family: var(--font-body);
  background-color: var(--tan);
  background-image: url('../assets/images/hijama-wellness-parchment-paper-background.png');
  background-size: 600px;
  background-repeat: repeat;
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.78;
  overflow-x: hidden;
  overflow-x: clip;
  /* Warm amber glow — default for light parchment sections */
  text-shadow: 0 0 6px rgba(201,168,124,.18), 0 0 16px rgba(201,168,124,.07);
}

/* Form controls opt out — glow on typed text hurts usability */
input, textarea, select {
  text-shadow: none;
}

/* Buttons, links, labels inherit the ambient glow */
button, a, label { text-shadow: inherit; }

/* ── Dark-background section overrides ──────────────────────────── */
/* Cool white glow for elements on dark navy/indigo backgrounds */
.lunar-section,
.night-sky-section,
.footer {
  text-shadow: 0 0 8px rgba(255,255,255,.16), 0 0 22px rgba(255,255,255,.07);
}

/* Rakee dark-tan panel — warm glow, slightly stronger */
.rakee-section .rakee-content {
  text-shadow: 0 0 6px rgba(201,168,124,.28), 0 0 18px rgba(201,168,124,.12);
}

.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; }

html { scrollbar-color: var(--red) var(--tan-dk); scrollbar-width: thin; }
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--tan-dk); }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 4px; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--red); outline-offset: 3px; border-radius: 2px;
}
a { color: inherit; text-decoration: none; }

/* ══════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════ */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(1rem,4vw,2.5rem); }
.alt-bg { background-color: var(--tan-dk); }
.page-section { padding: clamp(3rem,8vw,6rem) 0; position: relative; }

/* ══════════════════════════════════════════════
   GLOBAL TYPOGRAPHY
══════════════════════════════════════════════ */
.section-heading {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 7rem);
  font-weight: 900;
  letter-spacing: -.025em;
  color: var(--ink);
  line-height: .9;
}
.section-heading.red   { color: var(--red); text-shadow: 0 0 30px rgba(235,24,23,.28), 0 0 60px rgba(235,24,23,.12); }
.section-heading.white { color: #fff; }
.section-heading:not(.red):not(.white) { text-shadow: 0 2px 14px rgba(26,8,0,.14); }

.sickness-divider {
  border: none;
  border-top: 2px solid var(--ink);
  width: 25%;
  margin: 1.6rem auto;
}
.sickness-more-text p.sickness-cure-line {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  color: var(--red);
  text-shadow: 0 0 30px rgba(235,24,23,.28), 0 0 60px rgba(235,24,23,.12);
}

.label-the {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #000;
  margin-bottom: -.08em;
  line-height: 1;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 10px rgba(26,8,0,.18);
}
.section-label { margin-bottom: 1.8rem; }

.section-center-header { text-align: center; margin-bottom: clamp(2.2rem, 5.5vw, 4rem); }
.section-center-header .label-the { text-align: center; }
.section-sub {
  max-width: 580px;
  margin: .9rem auto 0;
  color: var(--ink-soft);
  font-size: clamp(.96rem, 1.55vw, 1.08rem);
  line-height: 1.8;
}

.section-intro {
  font-family: var(--font-body);
  font-size: clamp(.98rem, 1.9vw, 1.12rem);
  color: var(--ink-soft);
  max-width: 680px;
  margin-bottom: 1.6rem;
  line-height: 1.9;
}

/* ── PP Playground — selective calligraphic accents ── */

/* Utility: wrap any inline word in the script accent */
.script-accent {
  font-family: var(--font-script);
  font-weight: 400;
  font-style: normal;
}

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
.btn {
  display: inline-block;
  padding: .75em 2em;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--tr), color var(--tr), border-color var(--tr), transform 80ms ease;
  text-align: center;
}
.btn:active { transform: scale(.97) translateY(0); }
.btn-primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--red-dk); border-color: var(--red-dk);
  box-shadow: 0 6px 24px rgba(235,24,23,.28);
  transform: translateY(-2px);
}
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover, .btn-outline:focus-visible {
  background: var(--ink); color: var(--tan);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(26,8,0,.14);
}
.full-w { width: 100%; display: block; }

/* ── Canva-style arrow button ── */
.canva-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: none;
  border: 2px solid var(--ink);
  border-radius: 100px;
  padding: .45em .45em .45em 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(.9rem,1.8vw,1.1rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background var(--tr), color var(--tr), border-color var(--tr), transform 80ms ease;
}
.canva-btn:hover, .canva-btn:focus-visible { background: var(--ink); color: var(--tan); }
.canva-btn:active { transform: scale(.97); }
.canva-btn.large { font-size: clamp(1rem,2vw,1.25rem); padding: .5em .5em .5em 0; }

.cbtn-arrow {
  width: 2.2em; height: 2.2em;
  background: var(--ink); color: var(--tan);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3em; margin-right: .6em; flex-shrink: 0;
  transition: background var(--tr), color var(--tr);
}
.canva-btn:hover .cbtn-arrow,
.canva-btn:focus-visible .cbtn-arrow { background: var(--tan); color: var(--ink); }
.cbtn-text { padding-right: .8em; }
.canva-btn-row { margin: 1.5rem 0 .5rem; }

/* ══════════════════════════════════════════════
   EXPANDABLE PANELS
══════════════════════════════════════════════ */
.expandable {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 440ms cubic-bezier(.4,0,.2,1), opacity 340ms ease;
  visibility: hidden;
}
.expandable.is-open { max-height: 6000px; opacity: 1; margin-top: 2rem; visibility: visible; }
.expandable[hidden] { display: block !important; }

.expand-inner { padding-top: .5rem; }
.expand-inner h3 {
  font-family: var(--font-body);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 1.1rem;
  line-height: 1.2;
}
.expand-inner p, .expand-inner ol, .expand-inner ul { color: var(--ink-soft); }

/* Image revealed inside accordion */
.reveal-img-wrap { margin: 1rem 0 2rem; border-radius: var(--radius); overflow: hidden; }
.reveal-img-wrap img { width: 100%; height: auto; display: block; }

/* Blood-stagnation comparison chart — single color-swatch diagram. */
.stagnation-compare {
  padding: .5rem 0;
}
.stagnation-compare img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  /* Source swatches sit on a white card; multiply blends the white away
     so only the circles show against the section background. */
  mix-blend-mode: multiply;
}

/* ── Sickness: 2-col layout when expanded ── */
.sickness-section .expand-inner {
  display: grid;
  grid-template-columns: 1.6fr 2fr;
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(2rem, 4vw, 3.5rem);
  row-gap: clamp(.75rem, 1.5vw, 1.2rem);
  align-items: start;
  padding-top: .5rem;
}
.sickness-section .reveal-img-wrap {
  grid-column: 2;
  grid-row: 1 / 5;
  margin: 0;
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
  border-radius: var(--radius) 0 0 var(--radius);
  overflow: hidden;
}
.sickness-section .expand-inner > .sickness-more-text { grid-column: 1; grid-row: 1; }
.sickness-section .expand-inner > .sickness-more-text p { margin-bottom: .5rem; line-height: 1.9; font-size: 1.1rem; }
.sickness-section .expand-inner > .sickness-more-text .two-col-list { margin-bottom: .9rem; }
.sickness-section .expand-inner > .sickness-more-text .two-col-list li { font-size: 1.1rem; }
@media (max-width: 680px) {
  .sickness-section .expand-inner {
    grid-template-columns: 1fr;
    grid-template-rows: unset;
  }
  .sickness-section .reveal-img-wrap { grid-column: 1; grid-row: unset; position: static; margin: 0 0 1.5rem; }
  .sickness-section .expand-inner > .sickness-more-text { grid-column: 1; grid-row: unset; }
}

/* Body diagram layout — diagrams as primary focal point */
.body-diagram-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  margin: 2.5rem 0 2.5rem;
  /* Flush the diagrams all the way to the page's left edge */
  margin-left: calc(
    (clamp(1rem, 4vw, 2.5rem) * -1) +
    ((min(100vw, 1200px) - 100vw) / 2)
  );
}
/* Flex container for the diagram figure(s) */
.body-diagrams {
  display: flex;
  align-items: flex-end;
  gap: clamp(-1.5rem, -2vw, -.5rem);
}
.body-diagram-fig {
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.body-diagram-fig img {
  width: 100%;
  /* Fixed (not min-) height so figures sit flush/level with each other
     regardless of the images' native aspect ratios. */
  height: clamp(400px, 52vw, 680px);
  object-fit: contain;
  display: block;
  border-radius: var(--radius);
  filter: drop-shadow(0 6px 24px rgba(26,8,0,.18));
}
/* Single combined front+back diagram — wide format, no fixed height needed */
.body-diagram-fig--full img {
  height: auto;
  width: 100%;
}
.body-diagram-fig figcaption {
  margin-top: .85rem;
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tan-dk);
  text-align: center;
}
.body-diagram-text {
  padding-top: .5rem;
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
}
.body-diagram-text h3 { margin-top: 0; }

/* Diagram shown alone, no side text column — bled full-width so it reads
   as the centerpiece of the section rather than a normal inline image */
.body-diagram-layout--solo {
  grid-template-columns: 1fr;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.body-diagram-layout--solo .body-diagram-fig--full img {
  max-width: 1500px;
  margin: 0 auto;
}

@media (max-width: 960px) {
  .body-diagram-layout {
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(.75rem, 2vw, 1.5rem);
  }
  .body-diagram-text { position: static; }
}
@media (max-width: 640px) {
  .body-diagram-layout { grid-template-columns: 1fr; }
  .body-diagrams { gap: clamp(.5rem, 2vw, 1rem); }
  .body-diagram-text { padding-top: 1.5rem; }
}

.two-col-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem .75rem;
  margin-bottom: 1.5rem;
}
.two-col-list li { padding-left: 1.2rem; position: relative; color: var(--ink-soft); font-size: .95rem; }
.two-col-list li::before { content: '▸'; position: absolute; left: 0; color: var(--red); }
@media (max-width: 480px) { .two-col-list { grid-template-columns: 1fr; } }

.step-list { list-style: none; display: flex; flex-direction: column; gap: .6rem; counter-reset: step; }
.step-list li { padding-left: 2rem; position: relative; counter-increment: step; color: var(--ink-soft); }
.step-list li::before { content: counter(step) '.'; position: absolute; left: 0; font-weight: 700; color: var(--red); }

.hadith-block {
  margin-top: 1.5rem;
  background: rgba(26,8,0,.06);
  border-left: 3px solid var(--red);
  padding: .9rem 1.2rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display);
  font-style: italic;
}
.hadith-block p { margin: 0 0 .3rem; color: var(--ink); }
.hadith-block cite { font-style: normal; font-family: var(--font-body); font-size: .85rem; font-weight: 700; }

/* ══════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  background-color: rgba(201,168,124,.96);
  background-image: url('../assets/images/hijama-wellness-parchment-paper-background.png');
  background-size: 600px;
  background-repeat: repeat;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1.5px solid rgba(235,24,23,.14);
  transition: box-shadow var(--tr);
}
.navbar.scrolled { box-shadow: var(--shadow); }

.nav-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 clamp(.5rem,2vw,1.5rem);
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

/* Single logo — swaps on lang toggle */
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo-img  { height: calc(var(--nav-h) - 4px); width: auto; max-width: 480px; object-fit: contain; display: block; }
.nav-logo-img.nav-logo-fr   { display: none; }
body.lang-fr .nav-logo-img.nav-logo-en { display: none; }
body.lang-fr .nav-logo-img.nav-logo-fr { display: block; }

.nav-menu { display: flex; list-style: none; gap: clamp(.4rem,1.4vw,1.2rem); align-items: center; }
.nav-menu a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  padding: .25em 0;
  position: relative;
}
.nav-menu a::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 2px; background: var(--red);
  transition: width var(--tr);
}
.nav-menu a:hover::after,
.nav-menu a.active-link::after { width: 100%; }
.nav-menu .nav-signin { font-weight: 500; color: var(--ink-soft); }
.nav-menu .nav-book {
  background: var(--red); color: #fff !important;
  padding: .5em 1.2em; border-radius: var(--radius);
  transition: background var(--tr);
}
.nav-menu .nav-book:hover { background: var(--red-dk); }
.nav-menu .nav-book::after { display: none; }

/* ── Dropdown menus ── */
.nav-has-dd { position: relative; }
.nav-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-body);
  font-size: clamp(.78rem, 1.1vw, .9rem);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: .3em .1em;
  position: relative;
  transition: color var(--tr);
}
.nav-dd-trigger:hover { color: var(--red); }
.nav-caret {
  width: 9px;
  height: 6px;
  flex-shrink: 0;
  transition: transform .22s ease;
  stroke: currentColor;
}
.nav-has-dd.open .nav-caret { transform: rotate(180deg); }
.nav-dd {
  position: absolute;
  top: calc(100% + .7rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 200px;
  background: #fff;
  border: 1px solid rgba(201,168,124,.2);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(26,8,0,.12), 0 2px 8px rgba(26,8,0,.06);
  list-style: none;
  padding: .5rem 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 200;
}
.nav-has-dd.open .nav-dd {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dd a {
  display: block;
  padding: .6rem 1.2rem;
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--tr), color var(--tr);
  white-space: nowrap;
}
.nav-dd a:hover,
.nav-dd a.active { background: rgba(201,168,124,.12); color: var(--red); }
.nav-dd a::after { display: none; }
.nav-dd-sep {
  height: 1px;
  background: rgba(201,168,124,.25);
  margin: .4rem .8rem;
}

/* Language toggle */
.nav-lang { display: flex; align-items: center; gap: .15rem; padding-left: .2rem; }
.lang-sep { font-size: .75rem; color: rgba(26,8,0,.28); }
.lang-btn {
  font-family: var(--font-body);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .1em;
  background: none; border: none; cursor: pointer;
  color: var(--ink-soft); padding: .2em .3em;
  transition: color var(--tr);
}
.lang-btn.active { color: var(--red); }
.lang-btn:hover  { color: var(--red); }

.nav-right { display: flex; align-items: center; gap: .9rem; }
.nav-burger {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 28px; height: 20px; background: none; border: none; cursor: pointer; padding: 0;
}
.nav-burger span { display: block; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform var(--tr), opacity var(--tr); }

/* ── Dropdown nav — the menu has grown too long for a single inline row,
   so the same panel used on mobile is now used at every screen width:
   a hamburger trigger reveals a full-width parchment dropdown below the
   header, with sub-items (e.g. Services) as an inline accordion. ── */
.nav-menu {
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  background-color: rgba(201,168,124,.97);
  background-image: url('../assets/images/hijama-wellness-parchment-paper-background.png');
  background-size: 600px;
  background-repeat: repeat;
  backdrop-filter: blur(12px);
  flex-direction: column; align-items: stretch;
  gap: 0; padding: 0;
  max-height: 0; overflow: hidden;
  transition: max-height 400ms ease;
  border-bottom: 2px solid rgba(235,24,23,.2);
}
.nav-menu.open { max-height: 1200px; }
.nav-menu li   { width: 100%; }
.nav-menu a    { display: block; padding: 1rem 2rem; border-bottom: 1px solid rgba(26,8,0,.06); font-size: .95rem; }
.nav-menu a::after { display: none; }
.nav-menu .nav-book  { margin: .6rem 2rem; padding: .5em 1.2em; font-size: .85rem; border-radius: var(--radius); display: block; text-align: center; width: fit-content; }
.nav-menu .nav-lang  { padding: .9rem 2rem; justify-content: flex-start; border-bottom: 1px solid rgba(26,8,0,.06); }
.nav-dd-trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 2rem; font-size: .95rem; border-bottom: 1px solid rgba(26,8,0,.06);
  color: var(--ink);
}
.nav-dd {
  position: static; transform: none; min-width: 0; width: 100%;
  background: rgba(26,8,0,.06); border: none; border-radius: 0;
  box-shadow: none; padding: 0;
  max-height: 0; overflow: hidden;
  opacity: 1; pointer-events: none;
  transition: max-height .3s ease;
}
.nav-has-dd.open .nav-dd {
  max-height: 500px; pointer-events: auto; transform: none;
}
.nav-dd a { padding: .75rem 2rem .75rem 3rem; font-size: .9rem; }
.nav-dd-sep { margin: .25rem 2rem; }
.nav-burger.open span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* ══════════════════════════════════════════════
   HERO  — full-bleed + Bismillah overlay
══════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: var(--nav-h);
  background: var(--tan-lt);
  position: relative;
  overflow: hidden;
}

.hero-body {
  display: grid;
  grid-template-columns: 58% 42%;
  align-items: stretch;
}

.hero-img-wrap { position: relative; overflow: hidden; min-height: 80vh; }
.hero-illustration {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}

.hero-content {
  padding: clamp(3rem,6vw,5rem) clamp(2rem,4vw,4rem);
  display: flex; flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem,3vw,2.5rem);
}

.hero-location {
  font-family: var(--font-body);
  font-size: clamp(.7rem,1vw,.85rem);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0;
  animation: fadeUp .8s .1s ease forwards;
}

.hero-hadith-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 4.4rem);
  font-weight: 200;
  font-style: normal;
  line-height: 1.22;
  color: var(--ink);
  letter-spacing: -.02em;
  opacity: 0;
  animation: fadeUp .8s .35s ease forwards;
}

.hero-attribution {
  display: flex; flex-direction: column; gap: .35rem;
  padding-left: 1.4rem;
  border-left: 3px solid var(--red);
  opacity: 0;
  animation: fadeUp .8s .55s ease forwards;
}
.attr-name   { font-family: var(--font-body); font-size: clamp(.9rem, 1.5vw, 1.05rem); font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.attr-source {
  font-family: var(--font-script);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 400;
  color: rgba(26,8,0,.38);
  letter-spacing: .03em;
  line-height: 1.2;
}
.attr-hadith-num {
  font-family: var(--font-script);
  font-size: .7em;
  font-weight: 400;
  letter-spacing: .06em;
  color: rgba(26,8,0,.28);
  vertical-align: middle;
  margin-left: .3em;
}

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; animation: fadeUp .8s .75s ease forwards; }

/* ── Full-bleed hero variant ── */
.hero-fullbleed { padding-top: 0; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
/* Offset image and overlays below the fixed navbar so both head and bottom are visible */
.hero-fullbleed .hero-bg { top: var(--nav-h); }
.hero-fullbleed-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
  /* The endless slow zoom (heroZoom, 24s alternate) made the torn edges above
     the photo shimmer/flash and kept the GPU busy; the photo is now static. */
  animation: none;
  transform-origin: center center;
}
/* Subtle parchment texture over hero photo */
.hero-fullbleed::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: url('../assets/images/hijama-wellness-parchment-paper-background.png');
  background-size: 600px;
  background-repeat: repeat;
  opacity: .07;
  pointer-events: none;
}
.hero-bismillah {
  position: absolute; inset: 0; top: var(--nav-h); z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-script);
  font-size: clamp(7rem, 24vw, 22rem);
  color: rgba(255,255,255,.13);
  pointer-events: none;
  text-shadow: 0 2px 80px rgba(0,0,0,.5);
  letter-spacing: -.01em;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  transform: scaleX(1.18);
}
/* Scroll-cue sits at bottom of fullbleed hero */
.hero-fullbleed .hero-scroll-cue { bottom: 1.5rem; }

/* ── Hero CTA overlay ── */
.hero-cta-box {
  position: absolute;
  bottom: clamp(4.5rem, 9vw, 7rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  background: rgba(26,8,0,.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201,168,124,.28);
  border-radius: var(--radius);
  padding: clamp(1.3rem,3vw,2rem) clamp(1.8rem,5vw,3.2rem);
  max-width: min(520px, 90vw);
  width: max-content;
  animation: fadeUp .8s .4s both;
}
.hero-cta-tag {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 1rem;
}
.hero-cta-actions {
  display: flex;
  gap: .9rem;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-cta-box .btn-outline {
  border-color: rgba(201,168,124,.6);
  color: var(--cream);
  background: transparent;
}
.hero-cta-box .btn-outline:hover,
.hero-cta-box .btn-outline:focus-visible {
  background: rgba(201,168,124,.15);
  border-color: var(--tan);
  color: #fff;
}

/* ── Hadith feature section ── */
.hadith-section {
  padding: clamp(3.5rem,8vw,6rem) 0;
  text-align: center;
  background: var(--tan);
  position: relative;
}
/* The hero above and this section are both tan — the raw torn-edge PNG's
   own texture doesn't contrast enough to read as a rip, so give it a real
   drop-shadow instead of relying on color difference. */
.hadith-section > .torn-edge {
  filter: drop-shadow(0 5px 9px rgba(26,8,0,.45));
}
.hadith-section .hero-location { justify-content: center; margin-bottom: 1.5rem; }
.hadith-section .hero-hadith-h1 { max-width: 860px; margin: 0 auto 2.2rem; font-size: clamp(2rem, 4.5vw, 4.6rem); letter-spacing: -.025em; animation: none; opacity: 1; }
.hadith-attr-center { flex-direction: row; align-items: center; justify-content: center; gap: 1.5rem; border-left: none; border-top: 2px solid var(--red); padding: 1.2rem 0 0; animation: none; opacity: 1; max-width: 480px; margin: 0 auto 2rem; }
.hadith-actions-center { justify-content: center; animation: none; opacity: 1; }

.hero-scroll-cue {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  font-family: var(--font-body); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); opacity: 0; animation: fadeIn 1s 1.2s ease forwards; text-decoration: none;
}
.scroll-arr { font-size: 1.3rem; animation: bounce 2s 2s infinite; }

/* ══════════════════════════════════════════════
   CTA — FIND A LOCAL HEALER
   Identical shell/feel to the trust-bar below (dark, full-bleed, same
   padding, same giant faint script watermark) — description + button
   layered on top of the watermark instead of a stat list, kept slim.
══════════════════════════════════════════════ */
.healer-cta-banner {
  background: var(--ink);
  /* Top padding clears the big "&" seam ornament that overlaps into this section */
  padding: clamp(6.5rem, 10vw, 8.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.healer-cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 120% at 50% 50%, rgba(201,168,124,.07) 0%, transparent 70%);
  pointer-events: none;
}
.healer-cta-script-bg {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-script);
  text-align: center;
  max-width: min(92%, 1100px);
  margin: 0 auto;
  padding: 0 clamp(.5rem, 2vw, 1rem);
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
.healer-cta-line1 {
  font-size: clamp(3.2rem, 9.5vw, 8rem);
  line-height: 1.02;
  letter-spacing: .01em;
  color: var(--red);
  text-wrap: balance;
}
.section-seam-amp {
  position: relative;
  z-index: 3;
  text-align: center;
  font-family: var(--font-script);
  font-size: clamp(9rem, 21vw, 19rem);
  line-height: 1;
  color: rgba(235,24,23,.5);
  margin: -2rem 0 -5.6rem;
  pointer-events: none;
  user-select: none;
}
.healer-cta-line2 {
  font-size: clamp(1.55rem, 3.6vw, 2.7rem);
  line-height: 1.2;
  letter-spacing: .015em;
  color: var(--cream);
  max-width: 24em;
  margin-top: .55em;
  text-wrap: balance;
}
.healer-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1rem,4vw,2.5rem) 0;
}
.healer-cta-banner .btn {
  padding: .8em 2.4em;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
  flex-shrink: 0;
  box-shadow: 0 10px 30px rgba(235,24,23,.35);
}
/* ══════════════════════════════════════════════
   STATS / TRUST BAR
══════════════════════════════════════════════ */
.trust-bar {
  background: var(--ink);
  padding: clamp(2rem, 4vw, 3rem) 0;
  position: relative;
  overflow: hidden;
}
.trust-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 120% at 50% 50%, rgba(201,168,124,.07) 0%, transparent 70%);
  pointer-events: none;
}
.trust-bar-script-bg {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-script);
  font-size: clamp(3.5rem, 10vw, 9rem);
  color: rgba(201,168,124,.07);
  pointer-events: none; user-select: none;
  white-space: nowrap; overflow: hidden;
  letter-spacing: .08em;
}
.trust-bar-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  position: relative; z-index: 1;
}
.trust-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: clamp(.75rem, 2vw, 1.25rem) clamp(.75rem, 2vw, 1.75rem);
  text-align: center;
}
.trust-stat .trust-num,
.trust-stat .trust-suffix {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--tan);
  line-height: 1;
  display: inline;
}
/* PP Playground accent on the +/% symbols — placed after shared rule so it wins */
.trust-stat .trust-suffix {
  font-family: var(--font-script);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 400;
  vertical-align: middle;
}
.trust-num-wrap {
  display: flex;
  align-items: baseline;
  gap: .1rem;
}
.trust-label {
  font-family: var(--font-ui);
  font-size: clamp(.6rem, 1vw, .72rem);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(201,168,124,.55);
  white-space: nowrap;
}
.trust-divider {
  width: 1px;
  height: clamp(40px, 6vw, 60px);
  background: rgba(201,168,124,.18);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .trust-divider { display: none; }
  .trust-bar-list { gap: .5rem; }
  .trust-stat { padding: .75rem 1.5rem; }
}

/* ══════════════════════════════════════════════
   THE SICKNESS  (image moves into accordion)
══════════════════════════════════════════════ */
.sickness-section { background: var(--tan); overflow-x: clip; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); margin-top: -1px; }
.sickness-content { width: 100%; }
.sickness-content > .section-label,
.sickness-content > .section-intro,
.sickness-content > .canva-btn-row { max-width: 740px; }

/* ══════════════════════════════════════════════
   THE TREATMENT  (image moves into accordion)
══════════════════════════════════════════════ */
.treatment-section { background: var(--tan-dk); overflow-x: clip; padding-top: clamp(1.5rem, 3vw, 2.5rem); z-index: 0; }
.treatment-content { width: 100%; }
.treatment-content > .section-label,
.treatment-content > .section-intro,
.treatment-content > .canva-btn-row { max-width: 740px; }

/* ══════════════════════════════════════════════
   THE BENEFITS
══════════════════════════════════════════════ */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: 1.5rem;
  max-width: 820px;
}
.benefits-grid--more { margin-top: 0; }
/* Keep lone last card at half-width so it doesn't stretch full row */
.benefits-grid--more .benefit-card:last-child:nth-child(odd) {
  max-width: 100%;
}
#benefits-expand.is-open { margin-top: clamp(.75rem, 2vw, 1rem); }
@media (max-width: 480px) {
  .benefits-grid { grid-template-columns: 1fr; max-width: 100%; }
}
.benefit-card {
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(26,8,0,.1);
  border-radius: var(--radius);
  padding: 2rem 1.6rem;
  transition: box-shadow var(--tr), transform .2s ease;
}
.benefit-card { transition: box-shadow var(--tr), transform var(--tr), border-color var(--tr); }
.benefit-card:hover {
  box-shadow: 0 12px 40px rgba(26,8,0,.13);
  transform: translateY(-4px);
  border-color: rgba(201,168,124,.4);
}
.benefit-card .bi {
  font-size: 2.4rem; margin-bottom: .8rem; display: inline-block;
  transition: transform var(--tr);
}
.benefit-card:hover .bi { transform: scale(1.18) rotate(-4deg); }
.benefit-card h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.benefit-card p  { color: var(--ink-soft); font-size: .88rem; line-height: 1.65; }


/* ══════════════════════════════════════════════
   SECTION COVER ILLUSTRATIONS — decorative right-side overlay
══════════════════════════════════════════════ */
.section-cover-illus {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: .88;
  filter: saturate(.9) sepia(.05);
}
.section-cover-illus img {
  width: 100%; height: auto; display: block;
  object-fit: contain;
}

/* Razor — angled down, bleeds into next section */
.sickness-section .section-cover-illus {
  width: clamp(480px, 68vw, 880px);
  right: -6%;
  top: clamp(-3.5rem, -4vw, -2rem);
  transform: rotate(-22deg);
  transform-origin: top right;
  z-index: 5;
}

/* Pump — SSE orientation, nozzle toward cup, contained within section */
.treatment-section .section-cover-illus {
  width: clamp(420px, 60vw, 800px);
  left: auto;
  right: 0;
  top: clamp(12rem, 22vw, 18rem);
  bottom: auto;
  transform: rotate(-75deg);
  transform-origin: top center;
}

/* Benefits — cup rail: cup 1 always visible, cups 2 & 3 revealed together
   with the "SEE ALL BENEFITS" text expand. */
.benefits-section { overflow-x: clip; }
.benefits-cup-rail {
  position: absolute;
  right: 0;
  top: 0;
  /* Stop at the section's own bottom padding (roughly where the "Close"
     button sits), not the outer edge of the section box, so the last cup
     lands level with the button instead of past it in empty padding. */
  bottom: clamp(3rem, 8vw, 6rem);
  width: clamp(500px, 65vw, 900px);
  transform: translateX(46%);
  z-index: 0;
  pointer-events: none;
  opacity: .88;
  filter: saturate(.9) sepia(.05);
}
/* All three cups positioned against the rail's own full height (0% / 50% /
   100%), so spacing stays perfectly even regardless of the expand/collapse
   state of the wrapper around cups 2 & 3. */
.benefits-cup-rail > img.bcr-cup {
  position: absolute;
  left: 50%;
  top: clamp(1.5rem, 3vw, 2.5rem);
  transform: translateX(-50%);
}
.bcr-cup {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
#benefits-cups-expand {
  position: absolute;
  inset: 0;
  /* The open/close JS measures scrollHeight to animate max-height, but this
     wrapper's children are position:absolute (removed from flow), so its
     measured content height is ~0 — force the real inset-based height to
     always apply instead of that measurement collapsing it. */
  max-height: none !important;
}
#benefits-cups-expand .bcr-cup { position: absolute; left: 50%; }
#benefits-cups-expand .bcr-cup:nth-child(1) { top: 50%; transform: translate(-50%, -50%); }
#benefits-cups-expand .bcr-cup:nth-child(2) { top: auto; bottom: 0; transform: translateX(-50%); }

/* ══════════════════════════════════════════════
   BENEFITS PROGRESSION — horizontal 3-step row
══════════════════════════════════════════════ */
.benefits-progression {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(1rem, 2vw, 2rem) 0;
}
.bp-cup-img {
  flex: 1 1 0;
  max-width: clamp(160px, 28vw, 320px);
  height: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 580px) {
  .benefits-progression { flex-direction: column; align-items: center; gap: 2rem; }
  .bp-cup-img { max-width: 240px; }
}

/* ══════════════════════════════════════════════
   CAMEL DIVIDER
══════════════════════════════════════════════ */
.camel-divider { text-align: center; padding: 1.2rem 0; background: var(--tan); overflow: hidden; }
.camel-divider img { height: clamp(40px,6vw,70px); width: auto; opacity: .55; }

/* ══════════════════════════════════════════════
   CUPPING TYPES
══════════════════════════════════════════════ */
.cupping-types-section { background: var(--tan-dk); padding: clamp(3rem,8vw,6rem) 0; }
.cupping-types-grid {
  display: flex; align-items: center; justify-content: center; gap: 0;
  max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(1rem,4vw,2.5rem);
}
.ct-item { flex: 1; max-width: 380px; text-align: center; padding: 0 2rem; }
.ct-cup-img { width: clamp(120px,18vw,210px); height: auto; display: block; margin: 0 auto 1.25rem; }
.ct-item h3 {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .5rem;
  line-height: 1.1;
}
.ct-item p { font-size: .95rem; color: var(--ink-soft); }
.ct-divider { width: 2px; background: rgba(26,8,0,.25); height: 140px; align-self: center; flex-shrink: 0; }

/* ══════════════════════════════════════════════
   OUR SERVICES
══════════════════════════════════════════════ */
.services-section { background: var(--tan); }
.services-top { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; flex-wrap: wrap; }
.hijama-logo-wrap { flex: 0 0 auto; }
.services-logo-seal { width: clamp(50px,8vw,80px); height: auto; display: block; margin-bottom: .5rem; }
.services-wordmark  { width: clamp(110px,16vw,170px); height: auto; display: block; }
.services-pot { flex: 0 0 auto; max-width: 320px; }
.services-pot img { width: 100%; height: auto; display: block; }

.services-icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.75rem,2vw,1.5rem);
  border-top: 2px solid rgba(26,8,0,.12);
  padding-top: 2.5rem;
}
@media (max-width: 900px) { .services-icon-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 500px) { .services-icon-grid { grid-template-columns: repeat(2,1fr); } }

.svc-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.svc-icon-wrap { width: clamp(50px,8vw,70px); height: clamp(50px,8vw,70px); margin-bottom: .25rem; }
.svc-icon-wrap svg { width: 100%; height: 100%; }
.svc-item h4 { font-family: var(--font-body); font-size: clamp(.8rem,1.4vw,.98rem); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.svc-price { font-size: clamp(.68rem,1.1vw,.82rem); color: var(--ink-soft); font-weight: 600; }
.svc-link  { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red); transition: color var(--tr); }
.svc-link:hover { color: var(--red-dk); }

/* ══════════════════════════════════════════════
   SERVICES & PRICING — merged
══════════════════════════════════════════════ */
.services-pricing-section { background: var(--tan); overflow-x: clip; }

/* Service + pricing card grid */
.sp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(1rem,2.5vw,1.5rem);
  margin-top: 1rem;
}
@media (max-width: 600px) { .sp-grid { grid-template-columns: 1fr; } }

.sp-card {
  background: transparent;
  border: none;
  border-radius: var(--radius);
  padding: 2rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; align-items: center;
  gap: .6rem; text-align: center;
  transition: transform .2s ease;
}
.sp-card { transition: transform var(--tr); }
.sp-card:hover {
  transform: translateY(-5px);
}
.sp-card:hover .sp-icon-wrap { transform: scale(1.04); }
.sp-icon-wrap { transition: transform var(--tr); }

/* No badge/circle chrome — just the icon floating above the name/price text */
.sp-icon-wrap {
  width: min(92%, 280px);
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .8rem;
  overflow: hidden;
}
.sp-icon-wrap svg { width: 100%; height: 100%; }
/* The source PNG icons have a lot of empty canvas around a small glyph —
   zoom in just enough to crop that dead space without cutting into the
   glyph itself (no visible frame around it, so nothing may clip). */
.sp-icon-wrap img {
  width: 100%; height: 100%; object-fit: contain; display: block; transform: scale(4.2);
  /* Source icons have a solid white square behind the glyph — multiply
     blends that white away so only the black line art shows on the card. */
  mix-blend-mode: multiply;
}
/* The source glyphs aren't drawn at a consistent size within their canvas,
   so a single blanket zoom leaves some icons visually bigger than others.
   Per-icon zoom levels below normalize them to roughly the same apparent size. */
.sp-icon-wrap img[src*="wet-cupping-massage-icon"],
.sp-icon-wrap img[src*="dry-cupping-massage-icon"] { transform: scale(3.96); }
.sp-icon-wrap img[src*="dynamic-cupping-massage-icon"] { transform: scale(4.2); }
.sp-icon-wrap img[src*="sunnah-hijama-icon"] { transform: scale(3.6); }
.sp-icon-wrap img[src*="hot-stone-massage-icon"] { transform: scale(3.43); }
.sp-icon-wrap img[src*="healing-oil-massage-icon"] { transform: scale(4.12); }
.sp-icon-wrap img[src*="fire-cupping-icon"] { transform: scale(1.15); }
.sp-icon-wrap img[src*="ruqyah-icon"] { transform: scale(1.8); }
.sp-icon-wrap img[src*="consultation-icon"] { transform: scale(1.5); mix-blend-mode: normal; }

.sp-card-travel .sp-icon-wrap {
  width: clamp(60px, 8vw, 90px);
  aspect-ratio: 1 / 1;
}

.sp-card--soon { position: relative; }
.services-tear {
  grid-column: 1 / -1;
  /* Full page width: wider than the grid, centred on it, so it bleeds to
     both screen edges instead of stopping at the container padding. */
  /* Deliberately much wider than the screen and centred, so it spills past
     both edges — the flat left end and rounded right end of the artwork end
     up off-screen and only its ragged middle shows. */
  /* Sized with negative side margins (not `width`): a fixed 150vw width made
     the grid's columns grow to fit it and pushed every card off-centre. With
     auto width the item stretches to the grid width plus the negative margins
     and doesn't affect column sizing. */
  width: auto;
  justify-self: stretch;
  height: clamp(56px, 7vw, 110px);
  margin: .25rem calc((100% - 150vw) / 2) 1.25rem;
  background-image: url('../assets/images/torn-edge-strip-horizontal.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 4px 7px rgba(26,8,0,.3));
  pointer-events: none;
}
/* On phones there is no room to bleed past the screen edges (some mobile
   browsers zoom the whole page out to fit anything that sticks out), so the
   divider just fills the grid width there. */
@media (max-width: 900px) {
  .services-tear { margin-left: 0; margin-right: 0; }
}
.sp-soon-badge {
  display: inline-block;
  background: rgba(235,24,23,.55);
  color: #fff;
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35em .7em;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  margin: .2rem 0 .4rem;
}
.sp-soon-note {
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}

.sp-name {
  font-family: var(--font-body);
  font-size: clamp(.85rem,1.5vw,1rem);
  font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; margin: 0;
}
.sp-price-tag {
  font-family: var(--font-body);
  font-size: .88rem; color: var(--ink-soft); margin: 0;
}
.sp-price-tag strong { color: var(--red); font-size: 1.1rem; }

.sp-travel-note { font-family: var(--font-body); font-size: .82rem; color: var(--ink-soft); margin: .6rem 0 0; line-height: 1.5; }

.sp-toggle { margin-top: .4rem; align-self: center; font-size: .8rem; padding: .4em .4em .4em 0; }

.sp-detail { width: 100%; text-align: left; margin-top: .5rem; }
.sp-detail.is-open { padding-top: .75rem; }

/* Make travel card fill the grid well — spanning 2 cols on medium */
@media (min-width: 601px) {
  .sp-card-travel { grid-column: span 1; }
}

/* ══════════════════════════════════════════════
   PRICING
══════════════════════════════════════════════ */
.p-cat { border: 1px solid rgba(26,8,0,.12); border-radius: var(--radius); margin-bottom: .75rem; overflow: hidden; background: rgba(255,255,255,.2); }
.p-cat-hd {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 1.1rem; font-weight: 700;
  color: var(--ink); text-align: left; gap: .75rem;
  transition: background var(--tr);
}
.p-cat-hd:hover, .p-cat-hd:focus-visible { background: rgba(235,24,23,.06); }
.p-cat-hd[aria-expanded="true"] { color: var(--red); }
.p-cat-ico { font-size: 1.4rem; transition: transform var(--tr); flex-shrink: 0; line-height: 1; }
.p-cat-hd[aria-expanded="true"] .p-cat-ico { transform: rotate(45deg); }
.p-cat-bd.is-open { padding: 1.25rem; }

/* Per-service session menu — plain stacked list (all options visible at once,
   no carousel) revealed when a service card's "View Sessions" is pressed. */
.sp-menu-list { display: flex; flex-direction: column; gap: .75rem; }
.t-card   { background: rgba(255,255,255,.3); border: 1px solid rgba(26,8,0,.1); border-radius: var(--radius); padding: 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.t-card h4 { font-family: var(--font-body); font-size: 1.25rem; font-weight: 700; }
.t-card p  { color: var(--ink-soft); font-size: .93rem; }
.t-meta    { display: flex; justify-content: space-between; align-items: center; font-size: .88rem; color: var(--ink-soft); margin-top: .2rem; }
.t-price   { font-family: var(--font-display); font-size: 2rem; color: var(--red); }
.book-btn  { display: inline-block; padding: .5em 1.4em; background: var(--red); color: #fff; border-radius: var(--radius); font-family: var(--font-body); font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; align-self: flex-start; transition: background var(--tr); }
.book-btn:hover, .book-btn:focus-visible { background: var(--red-dk); }

.travel-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; padding: 1.25rem; }
@media (max-width: 600px) { .travel-grid { grid-template-columns: repeat(2,1fr); } }
.travel-card { background: rgba(255,255,255,.25); border: 1px solid rgba(26,8,0,.1); border-radius: var(--radius); padding: 1.1rem; text-align: center; }
.travel-card h4 { font-family: var(--font-body); font-size: .9rem; font-weight: 700; margin-bottom: .4rem; color: var(--ink-soft); }
.travel-card .t-price { font-size: 1.5rem; }

.pricing-note { margin-top: 1.5rem; font-size: .82rem; color: var(--ink-soft); font-style: italic; }
.pricing-cta-row { text-align: center; margin-top: 2rem; }

/* ── Shared Slider Engine ── */
.slider-wrap  { position: relative; overflow: hidden; }
.slider-track { display: flex; transition: transform 400ms cubic-bezier(.4,0,.2,1); will-change: transform; touch-action: pan-y; }
.slide        { flex: 0 0 100%; min-width: 0; padding: 0 .5rem; }
.slider-ui    { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2rem; }
.s-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: transparent; color: var(--ink); font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--tr), color var(--tr), border-color var(--tr); flex-shrink: 0; }
.s-btn:hover, .s-btn:focus-visible { background: var(--red); border-color: var(--red); color: #fff; }
.s-btn:disabled { opacity: .3; cursor: default; }
.s-dots { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.s-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(26,8,0,.25); border: none; cursor: pointer; padding: 0; transition: background var(--tr), transform var(--tr); }
.s-dot.active { background: var(--red); transform: scale(1.4); }

/* ══════════════════════════════════════════════
   SUNNAH LUNAR DATES
══════════════════════════════════════════════ */
.lunar-section {
  position: relative;
  overflow: hidden;
  background: transparent;
}

/* Camel caravan silhouette along the bottom edge */
.lunar-caravan {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 2; line-height: 0;
}
.lunar-caravan img {
  width: 100%;
  height: clamp(55px,9vw,110px);
  object-fit: cover; object-position: center bottom;
  display: block;
  opacity: .55;
  filter: brightness(.2) sepia(.15);
}

.lunar-overlay-content {
  position: relative; z-index: 3;
  text-align: center;
  max-width: 680px;
  padding: clamp(4rem,10vw,8rem) clamp(1.5rem,4vw,3rem);
}
.lunar-overlay-content .section-label { margin-bottom: 1.5rem; }
.lunar-text { font-family: var(--font-body); color: rgba(201,168,124,.82); font-size: clamp(.95rem,1.8vw,1.1rem); margin-bottom: 1rem; line-height: 1.85; }
.lunar-link { color: var(--tan-lt); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lunar-link:hover { color: #fff; }
.lunar-section .section-heading { color: var(--cream); }
.lunar-section .label-the { color: rgba(201,168,124,.65); }

.lunar-hadith {
  margin: 1.8rem 0 1.6rem;
  padding: 0;
}
.lunar-hadith-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.8vw, 1.85rem);
  color: var(--cream);
  line-height: 1.6;
  text-shadow: 0 0 14px rgba(201,168,124,.55), 0 0 34px rgba(201,168,124,.25);
}
.lunar-hadith-and {
  font-family: var(--font-script);
  font-style: normal;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  color: rgba(201,168,124,.55);
  text-align: center;
  margin: 0;
}
.lunar-hadith--secondary {
  margin-top: .4rem;
}
.lunar-hadith--secondary .lunar-hadith-text {
  text-shadow: none;
}
.lunar-hadith--secondary .lunar-hadith-attr {
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 400;
  font-style: normal;
  color: rgba(201,168,124,.6);
  letter-spacing: normal;
  text-shadow: none;
  margin-bottom: 0;
  margin-top: .5rem;
}
.lunar-hadith-attr {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 400;
  color: rgba(201,168,124,.7);
  letter-spacing: normal;
  margin-bottom: .7rem;
  text-shadow: none;
}

/* ══════════════════════════════════════════════
   ABOUT  — CTA pointer image as primary focal point
══════════════════════════════════════════════ */
/* Text box above, image below */
.about-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.about-content {
  min-width: 0;
  background: var(--tan);
  border-radius: var(--radius);
  padding: clamp(1rem, 2vw, 1.75rem);
}

.about-scholars-img {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* drop-shadow bleeds without clipping */
}
.about-scholars-img:has(img.is-portrait) {
  overflow: hidden;
  border-radius: var(--radius);
  height: clamp(600px, 68vw, 900px);
  width: 100%;
}
.about-scholars-img img {
  /*
   * Square bounding box: width === height, so rotating 90°
   * keeps the exact same layout footprint — no overflow, no reflow.
   * The finger points right in the source; -90deg rotates it upward.
   */
  width:  clamp(380px, 44vw, 540px);
  height: clamp(380px, 44vw, 540px);
  max-width: none;
  max-height: none;
  object-fit: contain;
  display: block;
  transform: rotate(-90deg);
  transform-origin: center center;
  filter:
    drop-shadow(0 14px 48px rgba(26,8,0,.24))
    drop-shadow(0 4px 12px rgba(26,8,0,.13));
}
/* Portrait images (not the rotated pointer graphic) sit upright, filling the
   column edge-to-edge. Centered anchor so both practitioners stay fully
   in frame instead of clipping one of them at an edge. */
.about-scholars-img img.is-portrait {
  transform: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  opacity: .35;
}

/* Heading — same size as every other section, warm glow */
.about-section .section-label { margin-bottom: 1.6rem; }
.about-section .section-heading {
  text-shadow:
    0 0 40px rgba(201,168,124,.4),
    0 0 18px rgba(201,168,124,.2),
    0 3px 10px rgba(26,8,0,.15);
}

.about-slide { background: rgba(255,255,255,.25); border: 1px solid rgba(26,8,0,.1); border-radius: var(--radius); padding: 2.2rem; }
.about-slide h3 { font-family: var(--font-display); font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 700; letter-spacing: -.01em; color: var(--red); margin-bottom: .9rem; line-height: 1.1; }
.about-slide p  { font-family: var(--font-body); color: var(--ink-soft); font-size: clamp(.96rem, 1.5vw, 1.05rem); line-height: 1.85; margin-bottom: .8rem; }

/* ══════════════════════════════════════════════
   RAKEE
══════════════════════════════════════════════ */
.rakee-section { overflow: visible; position: relative; }
/* Parchment scroll texture over the section */
.rakee-section::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image: url('../assets/images/hijama-wellness-parchment-paper-background.png');
  background-size: 520px;
  background-repeat: repeat;
  opacity: .18;
  mix-blend-mode: multiply;
}
.rakee-layout  { position: relative; z-index: 1; min-height: clamp(460px, 62vw, 820px); display: flex; align-items: center; }
/* Hand image sits as a full backdrop behind the text, fully visible (not cropped) */
.rakee-scroll-img {
  position: absolute;
  inset: 0;
  top: -7%;
  z-index: 1;
  overflow: visible;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
/* Pending image placeholder */
.rakee-img-pending { display: none; }
.rakee-scroll-img:has(.rakee-img-pending) {
  background:
    url('../assets/images/hijama-wellness-parchment-paper-background.png') center / 400px repeat,
    linear-gradient(160deg, rgba(184,144,96,.25) 0%, rgba(140,100,60,.35) 100%);
}
.rakee-scroll-img img:not(.rakee-img-pending) {
  /* Square bounding box so a 90° rotation doesn't reflow the layout. */
  width:  clamp(460px, 62vw, 820px);
  height: clamp(460px, 62vw, 820px);
  /* contain (not cover) — the whole hand is revealed, nothing cropped */
  object-fit: contain;
  object-position: center;
  display: block; margin: 0;
  opacity: .9;
  /* Source image points right; rotate so the finger points upward */
  transform: rotate(-90deg);
}
.rakee-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem,6vw,5rem) clamp(1.5rem,4vw,3.5rem);
  background: transparent;
}

/* ══════════════════════════════════════════════
   WHY CHOOSE US
══════════════════════════════════════════════ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
.why-card {
  background: transparent;
  border: none;
  padding: 2.2rem clamp(1.4rem,3vw,2.2rem);
  transition: transform var(--tr);
}
.why-card:hover {
  transform: translateY(-4px);
}
/* Icon floats free — no circle/card, no clipping, full icon visible */
.why-icon {
  width: 176px;
  height: 176px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: transform var(--tr);
}
.why-card:hover .why-icon {
  transform: translateY(-2px);
}
.why-icon img { width: 100%; height: 100%; object-fit: contain; }
.why-icon svg { width: 100%; height: 100%; }
.why-num  { font-family: var(--font-display); font-size: 2.25rem; color: rgba(235,24,23,.2); line-height: 1; margin-bottom: .25rem; }
.why-card h3 { font-family: var(--font-body); font-size: 1.2rem; font-weight: 700; margin-bottom: .6rem; }
.why-card p  { color: var(--ink-soft); font-size: .93rem; line-height: 1.7; }
@media (max-width: 480px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-icon { width: 88px; height: 88px; }
}

/* ══════════════════════════════════════════════
   HOW IT WORKS — VERTICAL TIMELINE
══════════════════════════════════════════════ */
.how-timeline {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
}
.how-step {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.2rem, 3vw, 2rem);
  padding: 0 0 clamp(2rem, 4vw, 2.8rem);
  position: relative;
}
.how-step--last { padding-bottom: 0; }
.how-node {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  position: relative;
  z-index: 1;
}
.how-node-icon {
  width: 176px;
  height: 176px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: transform var(--tr);
}
.how-node-icon svg { width: 100%; height: 100%; }
.how-node-icon img { width: 100%; height: 100%; object-fit: contain; }
.how-num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  color: rgba(235,24,23,.2);
  line-height: 1;
  margin-bottom: .25rem;
}
.how-body {
  position: relative;
  background: transparent;
  border: none;
  padding: 1.4rem 1.6rem;
  flex: 1;
  margin-top: .4rem;
  transition: transform var(--tr);
}
.how-body:hover {
  transform: translateX(4px);
}
.how-step:hover .how-node-icon {
  transform: scale(1.06);
}
.how-body h3 { font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; margin-bottom: .45rem; }
.how-body p  { color: var(--ink-soft); font-size: .93rem; line-height: 1.7; margin: 0; }
@media (max-width: 480px) {
  .how-node-icon { width: 88px; height: 88px; }
}

/* ══════════════════════════════════════════════
   AREAS WE SERVE
══════════════════════════════════════════════ */
.areas-layout {
  display: grid;
  grid-template-columns: 1fr 2.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.areas-header { position: sticky; top: calc(var(--nav-h) + 2rem); }
.areas-header .section-label { margin-bottom: 1.2rem; }
.areas-map-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}
.areas-map-btn { align-self: center; margin-top: clamp(-7rem, -15vw, -2rem); }
.areas-intro {
  color: var(--ink-soft);
  font-size: clamp(.9rem, 1.6vw, 1rem);
  line-height: 1.75;
  margin-bottom: 1.4rem;
}

/* Compact region list (left column) */
.areas-region-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-bottom: 1.6rem;
}
.arl-region {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: .88rem;
  padding: .45rem .65rem;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(26,8,0,.08);
  border-radius: 6px;
  border-left: 2.5px solid rgba(235,24,23,.35);
}
.arl-region strong {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 100px;
}
.arl-region span { color: var(--ink-soft); line-height: 1.4; }
.arl-region--gta { border-left-color: rgba(201,168,124,.7); }
.arl-region--gta strong { color: var(--ink-soft); }

/* SVG map */
.areas-map-wrap {
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 3.5rem) 1rem 0;
}
.areas-map-icon {
  display: block;
  width: min(95%, 640px);
  height: auto;
  opacity: 1;
  filter: brightness(0);
}

.areas-note { text-align: center; margin-top: 2.5rem; font-size: .88rem; color: var(--ink-soft); }
.areas-note a { color: var(--red); font-weight: 700; }
.areas-note a:hover { text-decoration: underline; }

/* Screen-reader only helper */
.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;
}

@media (max-width: 860px) {
  .areas-layout { grid-template-columns: 1fr; }
  .areas-header { position: static; }
  .areas-header .section-label,
  .areas-header .section-heading { text-align: center; }
  .areas-intro { text-align: center; max-width: 560px; margin-left: auto; margin-right: auto; }
  .areas-header .btn { display: block; width: fit-content; margin: 0 auto; }
  .arl-region { justify-content: flex-start; }
}

/* ══════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════ */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: .7rem; }
.faq-item { border: 1px solid rgba(26,8,0,.12); border-radius: var(--radius); overflow: hidden; background: rgba(255,255,255,.2); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: 1.1rem 1.4rem; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  color: var(--ink); text-align: left; transition: background var(--tr);
}
.faq-q:hover, .faq-q:focus-visible { background: rgba(235,24,23,.05); }
.faq-q[aria-expanded="true"] { color: var(--red); }
.faq-ico { font-size: 1.4rem; font-weight: 300; flex-shrink: 0; transition: transform var(--tr); line-height: 1; }
.faq-q[aria-expanded="true"] .faq-ico { transform: rotate(45deg); }
.faq-a { padding: 0 1.4rem; }
.faq-a.is-open { padding: 0 1.4rem 1.1rem; }
.faq-a p { color: var(--ink-soft); font-size: .95rem; }

/* ══════════════════════════════════════════════
   TESTIMONIALS  (no image banner — premium card grid)
══════════════════════════════════════════════ */
.testimonials-section {
  padding: clamp(3rem,8vw,6rem) 0;
  background-color: var(--cream);
  background-image:
    url('../assets/images/hijama-wellness-parchment-paper-background.png');
  background-size: 600px;
  background-repeat: repeat;
  position: relative;
}

/* Testimonial slider — 3-up desktop, 2-up tablet, 1-up mobile */
.testi-slider {
  overflow: hidden;
  border-radius: var(--radius);
}
.testi-slider .slider-track {
  align-items: stretch; /* uniform card height */
}
.testi-slider .slide {
  flex: 0 0 33.333%;
  padding: 0 clamp(.4rem, 1vw, .7rem);
  display: flex;
}
@media (max-width: 800px) { .testi-slider .slide { flex: 0 0 50%; } }
@media (max-width: 520px)  { .testi-slider .slide { flex: 0 0 100%; } }

.testi-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: clamp(1.5rem,3vw,2.2rem);
  display: flex; flex-direction: column; gap: .9rem;
  flex: 1;
  box-shadow: 0 4px 20px rgba(26,8,0,.10), 0 1px 4px rgba(26,8,0,.06);
  border: 1px solid rgba(201,168,124,.35);
}
.testi-stars   { color: #cc0000; font-size: 1.4rem; letter-spacing: .08em; }
.testi-card blockquote {
  font-family: var(--font-body); font-style: italic;
  color: var(--ink); font-size: clamp(.88rem,1.6vw,1rem);
  line-height: 1.7; flex: 1;
}
.testi-card cite { font-style: normal; font-family: var(--font-body); font-size: .95rem; font-weight: 700; letter-spacing: .04em; color: var(--ink); }

.testi-slider-ui {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* ══════════════════════════════════════════════
   IN SHA ALLAH — CTA Bridge
══════════════════════════════════════════════ */
.isha-section {
  position: relative;
  padding: clamp(5rem,12vw,10rem) 0;
  background: var(--tan);
  overflow: hidden;
  text-align: center;
}
.isha-watermark {
  position: absolute; inset: -10%; z-index: 0;
  font-family: var(--font-script);
  font-size: clamp(7rem,22vw,20rem);
  color: rgba(235,24,23,.06);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; user-select: none;
  line-height: 1.2; white-space: nowrap;
}
.isha-content {
  position: relative; z-index: 2;
  max-width: 720px; margin: 0 auto;
  padding: 0 clamp(1.5rem,4vw,3rem);
  display: flex; flex-direction: column; align-items: center;
}
.isha-headline {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.6rem,4vw,2.8rem); font-weight: 400;
  color: var(--red); -webkit-text-stroke: 1px rgba(255,255,255,.65);
  line-height: 1.3; margin-bottom: .9rem;
}
.isha-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem,2vw,1.2rem);
  color: var(--ink-soft); margin-bottom: 2.5rem; line-height: 1.75;
}
.isha-social { display: flex; justify-content: center; align-items: flex-end; gap: clamp(1.5rem,4vw,3rem); flex-wrap: wrap; }
.isha-icon {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--ink);
  transition: color var(--tr), transform var(--tr);
}
.isha-icon:hover { color: var(--red); transform: translateY(-4px); }
.isha-contact-img { height: 48px; width: auto; display: block; filter: brightness(0); opacity: .75; transition: opacity var(--tr); }
.isha-icon:hover .isha-contact-img { opacity: 1; filter: none; }
.isha-icon-emoji { font-size: 2.2rem; line-height: 1; }
.isha-icon-label { font-family: var(--font-body); font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* ══════════════════════════════════════════════
   NIGHT SKY / FAREWELL — editorial red serif
══════════════════════════════════════════════ */
.night-sky-section {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
  background: transparent;
  padding-bottom: clamp(80px, 12vw, 160px);
}
/* Twinkling star field — dense at top, sparse toward bottom */
.night-sky-section::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    /* ── Top band (y 2–14%) — densest ── */
    radial-gradient(circle, rgba(255,255,255,.95) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.80) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.72) 1px, transparent 2px),
    radial-gradient(circle, rgba(201,168,124,.88) 1.5px, transparent 3px),
    radial-gradient(circle, rgba(255,255,255,.88) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.60) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.92) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.78) 1px, transparent 2px),
    radial-gradient(circle, rgba(201,168,124,.70) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.85) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.48) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.90) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.65) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.40) 1px, transparent 2px),
    /* ── Upper-mid band (y 14–28%) ── */
    radial-gradient(circle, rgba(255,255,255,.82) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.58) 1px, transparent 2px),
    radial-gradient(circle, rgba(201,168,124,.75) 1.5px, transparent 3px),
    radial-gradient(circle, rgba(255,255,255,.70) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.45) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.88) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.62) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.50) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.75) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.38) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.80) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 2px),
    radial-gradient(circle, rgba(201,168,124,.60) 1px, transparent 2px),
    /* ── Mid band (y 28–44%) — moderate ── */
    radial-gradient(circle, rgba(255,255,255,.68) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.42) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.78) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.35) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.60) 1px, transparent 2px),
    radial-gradient(circle, rgba(201,168,124,.50) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.72) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.30) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.45) 1px, transparent 2px),
    /* ── Lower band (y 44–60%) — sparse ── */
    radial-gradient(circle, rgba(255,255,255,.40) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.28) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.35) 1px, transparent 2px),
    radial-gradient(circle, rgba(201,168,124,.38) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.32) 1px, transparent 2px),
    /* ── Very sparse (y 60–70%) — fading out ── */
    radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.20) 1px, transparent 2px);
  background-size:
    /* top band */
    2px 2px, 2px 2px, 2px 2px, 3px 3px, 2px 2px,
    2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px,
    2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px,
    /* upper-mid */
    2px 2px, 2px 2px, 3px 3px, 2px 2px, 2px 2px,
    2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px,
    2px 2px, 2px 2px, 2px 2px,
    /* mid */
    2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px,
    2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px,
    /* lower */
    2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px,
    /* very sparse */
    2px 2px, 2px 2px, 2px 2px;
  background-position:
    /* top band (y 2–14%) */
     5%  3%, 14%  8%, 23%  5%, 33%  2%, 42%  9%,
    51%  6%, 60%  3%, 71% 10%, 80%  5%, 90%  8%,
    97%  4%, 27% 11%,  9% 13%, 64% 12%, 47% 14%,
    /* upper-mid (y 15–28%) */
    17% 17%, 36% 20%, 55% 15%, 74% 18%, 92% 22%,
     3% 23%, 44% 26%, 63% 19%, 82% 24%, 11% 27%,
    29% 21%, 50% 28%, 85% 16%,
    /* mid (y 29–44%) */
    22% 31%, 68% 29%, 40% 35%, 88% 33%, 15% 38%,
    57% 36%, 76% 40%, 34% 43%, 95% 38%, 48% 42%,
    /* lower (y 45–59%) */
    26% 47%, 72% 50%, 10% 53%, 45% 56%, 88% 48%, 61% 58%,
    /* very sparse (y 60–70%) */
    18% 63%, 55% 67%, 80% 61%;
  animation: twinkleStarField 8s ease-in-out infinite alternate;
}
@keyframes twinkleStarField {
  0%   { opacity: 1; }
  35%  { opacity: .45; }
  65%  { opacity: .82; }
  100% { opacity: .35; }
}
/* Moonlight pool — silver-blue glow on the desert floor where the caravan travels */
.night-sky-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: clamp(220px, 35vw, 420px);
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% 100%,
      rgba(200, 215, 255, 0.22) 0%,
      rgba(160, 185, 245, 0.12) 35%,
      rgba(110, 140, 220, 0.05) 60%,
      transparent 80%
    ),
    radial-gradient(ellipse 120% 50% at 50% 100%,
      rgba(18, 16, 50, 0.88) 0%,
      rgba(28, 24, 65, 0.65) 30%,
      rgba(40, 36, 80, 0.28) 60%,
      transparent 82%
    );
}
.night-sky-img {
  display: none;
}
.night-sky-content {
  position: relative; z-index: 2;
  max-width: 760px; margin: 0 auto;
  padding: clamp(2rem,5vw,3rem) clamp(2rem,5vw,4rem) clamp(3rem,6vw,5rem);
  text-align: center;
  display: flex; flex-direction: column; gap: 1.5rem;
}

.farewell-box {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.farewell-arabic { display: flex; justify-content: center; gap: 1.5rem; }
.farewell-arabic img { height: 28px; width: auto; opacity: .55; filter: brightness(0) invert(1); }

.farewell-caravan {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
  pointer-events: none;
  height: clamp(180px, 28vw, 360px);
  display: flex; align-items: flex-end;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
}
.farewell-caravan img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  opacity: .5;
  display: block;
  transform: scaleX(1.1);
  transform-origin: center bottom;
}

.farewell-opening {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.1rem,2vw,1.4rem);
  color: #ffffff;
  line-height: 1.45;
  text-shadow: 0 0 12px rgba(255,255,255,.55), 0 0 28px rgba(255,255,255,.25), 0 0 50px rgba(201,168,124,.18);
}

.farewell-body {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--cream);
  font-size: clamp(1.3rem, 2.8vw, 1.85rem);
  line-height: 1.6;
}

.farewell-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem,2vw,1.4rem);
  color: #fff;
  line-height: 1.25;
  padding: 2rem 0;
  position: relative;
  text-shadow: 0 0 24px rgba(255,255,255,.3), 0 0 50px rgba(235,24,23,.2);
}
.farewell-quote::before, .farewell-quote::after {
  content: '';
  display: block;
  height: 1px;
  background: rgba(235,24,23,.45);
  width: 80px; margin: 0 auto;
}
.farewell-quote::before { margin-bottom: 1.5rem; }
.farewell-quote::after  { margin-top:    1.5rem; }

.farewell-dua {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--cream);
  font-size: clamp(1.3rem, 2.8vw, 1.85rem);
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,.18);
  padding-top: 1.2rem;
  margin-top: .4rem;
}

/* ══════════════════════════════════════════════
   NEWSLETTER
══════════════════════════════════════════════ */
.newsletter-section { overflow: hidden; }
.newsletter-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; align-items: stretch; }
.newsletter-scholars { overflow: hidden; }
.newsletter-scholars img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

.newsletter-card {
  background: #3a3a6e;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem,6vw,5rem) clamp(1.5rem,4vw,3.5rem);
  gap: 1.5rem;
}
.newsletter-heading { font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem,3.5vw,2.4rem); color: #fff; line-height: 1.2; }
.newsletter-form { display: flex; flex-direction: column; gap: .9rem; }
.newsletter-form label { font-family: var(--font-body); font-weight: 600; font-size: .95rem; color: rgba(255,255,255,.85); }
.newsletter-form input[type="email"] { width: 100%; padding: .85rem 1rem; background: #fff; border: none; border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; color: var(--ink); }
.newsletter-form input[type="email"]:focus { outline: 3px solid var(--tan); }
.nl-submit-btn { width: 100%; padding: .9rem; background: var(--ink); color: #fff; border: none; border-radius: 100px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background var(--tr); }
.nl-submit-btn:hover, .nl-submit-btn:focus-visible { background: var(--red); }
.nl-note    { font-family: var(--font-body); font-size: .76rem; color: rgba(255,255,255,.4); text-align: center; }
.nl-success { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius); padding: 1rem; color: rgba(255,255,255,.9); font-size: .95rem; text-align: center; }

/* ══════════════════════════════════════════════
   CONTACT / BOOKING
══════════════════════════════════════════════ */
.contact-section {
  position: relative;
  padding: clamp(3rem,8vw,6rem) 0;
  background-color: #e8d5b0;
  background-image: url('../assets/images/hijama-wellness-parchment-paper-background.png');
  background-size: 600px;
  background-repeat: repeat;
}
.contact-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem,6vw,5rem); align-items: stretch; }

.contact-info-col { display: flex; flex-direction: column; justify-content: center; text-align: left; }
.contact-info-col .label-the {
  text-shadow: 0 0 16px rgba(26,8,0,.35), 0 0 32px rgba(235,24,23,.18), 0 2px 5px rgba(0,0,0,.55);
}
.contact-info-col .section-heading {
  text-shadow: 0 0 22px rgba(235,24,23,.45), 0 0 46px rgba(235,24,23,.25), 0 0 70px rgba(235,24,23,.12);
  margin: 1rem 0 0;
}
.contact-tag {
  font-family: var(--font-body);
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  line-height: 1.2;
  color: #000;
  margin: 1rem 0 1.75rem;
  text-shadow: 0 0 14px rgba(26,8,0,.25), 0 2px 5px rgba(0,0,0,.55);
}
.contact-pills { display: flex; flex-wrap: wrap; gap: .7rem; }
.cpill { display: inline-flex; align-items: center; gap: .45rem; padding: .52em 1.2em; background: var(--ink); color: var(--tan); border-radius: 100px; font-family: var(--font-body); font-weight: 700; font-size: .82rem; letter-spacing: .04em; transition: background var(--tr); }
.cpill:hover, .cpill:focus-visible { background: var(--red); }

.booking-col { background: rgba(255,255,255,.3); border: 1px solid rgba(26,8,0,.1); border-radius: var(--radius); padding: 2rem; }
.booking-col h3 {
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #000;
  text-shadow: 0 0 14px rgba(26,8,0,.25), 0 2px 5px rgba(0,0,0,.55);
  margin-bottom: 1.4rem;
  text-align: center;
}
.booking-form { display: flex; flex-direction: column; gap: .9rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
/* Long option labels (esp. French) must not stretch the grid past the screen */
.contact-layout > *, .form-row > * { min-width: 0; }
.booking-form input, .booking-form select, .booking-form textarea { max-width: 100%; min-width: 0; }
.booking-form select { text-overflow: ellipsis; }
@media (max-width: 500px) { .form-row { grid-template-columns: 1fr; } }

.booking-form input, .booking-form select, .booking-form textarea {
  width: 100%; padding: .78rem 1rem;
  background: rgba(255,255,255,.5);
  border: 1.5px solid rgba(26,8,0,.18);
  border-radius: var(--radius);
  font-family: var(--font-body); font-size: .95rem; color: var(--ink);
  transition: border-color var(--tr), box-shadow var(--tr);
  -webkit-appearance: none; appearance: none;
}
.booking-form input:focus, .booking-form select:focus, .booking-form textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3.5px rgba(235,24,23,.1);
}
.booking-form input::placeholder, .booking-form textarea::placeholder { color: rgba(26,8,0,.35); }
.booking-form textarea { resize: vertical; min-height: 88px; }
.booking-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%231a0800'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

/* ── Date field — hides the native mm/dd/yyyy segments until a date is
   actually chosen, showing "Select a date" in their place instead ── */
.date-field { position: relative; }
.date-field input[type="date"] { color: transparent; }
.date-field input[type="date"].has-value { color: var(--ink); }
.date-field input[type="date"]::-webkit-calendar-picker-indicator {
  color: var(--red);
  opacity: .75;
  cursor: pointer;
}
.date-field input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.date-field-placeholder {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-family: var(--font-body);
  font-size: .95rem;
  color: rgba(26,8,0,.35);
}
.date-field input[type="date"].has-value + .date-field-placeholder { display: none; }

/* ── Booking calendar (our own, because the browser's can't be restyled and paints weekends red).
   The red days are the Sunnah dates: the 17th, 19th and 21st of the Hijri month. ── */
.date-field input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
/* with no date chosen, hide the browser's own mm/dd/yyyy text entirely (our "Select a date" label shows instead) */
.date-field input[type="date"]:not(.has-value)::-webkit-datetime-edit { visibility: hidden; }
.date-field input[type="date"]::-webkit-datetime-edit-month-field:focus,
.date-field input[type="date"]::-webkit-datetime-edit-day-field:focus,
.date-field input[type="date"]::-webkit-datetime-edit-year-field:focus { background: transparent; outline: none; }
.date-field::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eb1817' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E") no-repeat center / contain;
}
.cal-pop {
  position: absolute;
  z-index: 80;
  right: 0;
  top: calc(100% + 6px);
  width: min(320px, calc(100vw - 2rem));
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--tan);
  border-radius: 10px;
  padding: .9rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  font-family: var(--font-body);
}
.cal-pop[hidden] { display: none; }
.cal-pop.above { top: auto; bottom: calc(100% + 6px); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.cal-title { font-weight: 700; letter-spacing: .04em; text-transform: capitalize; }
.cal-nav { width: 32px; height: 32px; border: 1px solid var(--tan); border-radius: 6px; background: none; color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0; }
.cal-nav:hover:not(:disabled) { background: rgba(201,168,124,.35); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-dow span { font-size: .75rem; opacity: .65; padding: .2rem 0; }
.cal-day { aspect-ratio: 1; border: 0; background: none; color: var(--ink); font: inherit; font-size: .95rem; border-radius: 6px; cursor: pointer; padding: 0; }
.cal-day:hover:not(:disabled) { background: rgba(201,168,124,.35); }
.cal-day:disabled { opacity: .3; cursor: default; }
.cal-day.is-today { outline: 1px solid var(--tan-dk); }
.cal-day.is-sunnah { color: var(--red); font-weight: 800; background: rgba(235,24,23,.10); }
.cal-day.is-sunnah:hover:not(:disabled) { background: rgba(235,24,23,.22); }
.cal-day.is-selected { background: var(--ink); color: var(--cream); }
.cal-day.is-selected.is-sunnah { background: var(--red); color: #fff; }
.cal-nav:focus-visible, .cal-day:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.cal-legend { display: flex; align-items: center; gap: .45rem; margin-top: .6rem; font-size: .78rem; opacity: .85; }
.cal-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: none; }

/* ── "Writing on the scroll" treatment — text fields only, not dropdowns/date ── */
.booking-form input[type="text"],
.booking-form input[type="tel"],
.booking-form input[type="email"],
.booking-form textarea {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(26,8,0,.3);
  border-radius: 0;
  padding: .7rem .2rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.booking-form input[type="text"]:focus,
.booking-form input[type="tel"]:focus,
.booking-form input[type="email"]:focus,
.booking-form textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 1.5px 0 0 var(--red);
}
.booking-form input[type="text"]::placeholder,
.booking-form input[type="tel"]::placeholder,
.booking-form input[type="email"]::placeholder,
.booking-form textarea::placeholder {
  color: rgba(26,8,0,.4);
  font-style: italic;
}
.booking-form textarea { border: none; border-bottom: 1.5px solid rgba(26,8,0,.3); background: transparent; }
.form-success {
  margin-top: .75rem;
  background: rgba(0,100,40,.1);
  border: 1px solid rgba(0,100,40,.3);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  color: #004a20;
  font-size: .93rem;
  text-align: center;
  animation: slideDown 450ms cubic-bezier(.22,1,.36,1) both;
}

/* Sunnah date quick-select pills */
.sunnah-dates-wrap { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: -.2rem; }
.sunnah-dates-label { font-family: var(--font-body); font-size: .78rem; font-weight: 700; color: var(--ink); white-space: nowrap; letter-spacing: .01em; }
.sunnah-dates-pills { display: flex; gap: .4rem; flex-wrap: wrap; }
.sunnah-pill { display: inline-flex; flex-direction: column; align-items: center; background: rgba(201,168,124,.15); border: 1px solid rgba(201,168,124,.4); border-radius: 6px; padding: 3px 10px; cursor: pointer; transition: background .15s, border-color .15s; line-height: 1.3; text-align: center; }
.sunnah-pill:hover { background: rgba(201,168,124,.35); border-color: var(--tan); }
.sunnah-pill.is-selected { background: var(--tan); border-color: var(--tan-dk); }
.sunnah-pill .pill-hijri { font-family: var(--font-body); font-size: .74rem; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: .01em; }
.sunnah-pill.is-selected .pill-hijri { color: var(--ink); }
.sunnah-pill .pill-greg { font-family: var(--font-body); font-size: .8rem; color: var(--ink); font-weight: 600; }

/* ══════════════════════════════════════════════
   FOOTER  — PP Playground "In Sha Allah" watermark
══════════════════════════════════════════════ */
.footer { position: relative; overflow: hidden; background: var(--ink); }

/* Subtle art layer (very low opacity) */
.footer-art-wrap { position: absolute; inset: 0; opacity: .04; pointer-events: none; z-index: 0; }
.footer-art-img  { width: 100%; height: 100%; object-fit: cover; display: block; }

/* PP Playground script watermark */
.footer-isha-bg {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-script);
  font-size: clamp(8rem,25vw,24rem);
  color: rgba(201,168,124,.09);
  pointer-events: none; user-select: none;
  line-height: 1.2; white-space: nowrap; overflow: visible;
  padding: 0 2rem;
}

.footer-content { position: relative; z-index: 3; padding: clamp(2rem,4vw,3rem) 0 1.5rem; }

/* Footer is mirrored: rtl reverses the column order (brand ends up on the
   right); each column resets to ltr so its text still reads normally. */
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 2rem; direction: rtl; }
.footer-grid > * { direction: ltr; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* Header wordmark logo is dark-on-transparent, so on the dark footer it sits
   on a parchment tile (same texture as the header bar). The PNG has a lot of
   empty canvas above/below the lettering, so it's cropped to just the text. */
.footer-logo-tile {
  width: fit-content;
  max-width: 100%;
  padding: .7rem 1.1rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  background-color: rgba(201,168,124,.96);
  background-image: url('../assets/images/hijama-wellness-parchment-paper-background.png');
  background-size: 600px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.footer-logo-img {
  display: block;
  width: 230px;
  max-width: 100%;
  aspect-ratio: 1366 / 300;
  object-fit: cover;
  object-position: center 50%;
}

/* Logo resting on the bottom edge of the booking section's parchment, just
   above the footer. Its width/position match the footer's brand column
   (first of 5 columns, 1.3fr, 3rem gaps — mirrored to the right), so the
   footer tagline sits directly beneath it. */
.contact-logo-row {
  position: absolute;
  left: 0; right: 0; bottom: -28px;
  z-index: 4;
}
.contact-logo-row .container { display: flex; justify-content: flex-end; }
.contact-logo-col { width: calc((100% - 12rem) * 1.3 / 5.3); }
.contact-logo-col img {
  display: block;
  width: min(100%, 190px);
  aspect-ratio: 1366 / 300;
  object-fit: cover;
  margin-left: auto;
}
@media (max-width: 900px) { .contact-logo-col { width: calc((100% - 2rem) / 2); } }
@media (max-width: 480px) { .contact-logo-col { width: 100%; } }
.footer-logo { display: flex; flex-direction: column; line-height: 1; margin-bottom: .9rem; }
.footer-logo .logo-bottom { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: .04em; color: var(--red); }
.footer-brand > p  { font-family: var(--font-body); font-size: .9rem; color: rgba(201,168,124,.75); line-height: 1.7; }
.footer-social     { display: flex; gap: .85rem; margin-top: 1.4rem; }
.footer-social a   { width: 48px; height: 48px; background: rgba(201,168,124,.1); border: 1px solid rgba(201,168,124,.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background var(--tr), border-color var(--tr), transform var(--tr); text-decoration: none; }
.footer-social a:hover { background: var(--red); border-color: var(--red); transform: translateY(-2px); }
.footer-social a svg { width: 22px; height: 22px; fill: rgba(201,168,124,.85); transition: fill var(--tr); flex-shrink: 0; }
.footer-social a:hover svg { fill: #fff; }

.footer-col h4    { font-family: var(--font-body); font-size: .88rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; color: var(--tan-lt); }
.footer-col ul    { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.footer-col ul a  { font-family: var(--font-body); font-size: .88rem; color: rgba(201,168,124,.72); transition: color var(--tr); }
.footer-col ul a:hover { color: var(--red); }
.footer-col > p   { font-family: var(--font-body); font-size: .88rem; color: rgba(201,168,124,.72); margin-bottom: .55rem; line-height: 1.6; }
.footer-blog-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--red);
  margin-top: .3rem;
  transition: color var(--tr);
}
.footer-blog-link:hover { color: #fff; }

.footer-donate-row { display: flex; justify-content: flex-end; padding-top: .5rem; border-top: 1px solid rgba(201,168,124,.15); }
.footer-bottom { padding-top: 1rem; display: flex; justify-content: flex-start; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer-bottom p  { font-family: var(--font-body); font-size: .78rem; color: var(--tan); }

/* Donate button */
.donate-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.2rem;
  padding: .6em 1.6em;
  background: var(--red);
  color: #fff;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background var(--tr);
}
.donate-btn:hover, .donate-btn:focus-visible { background: var(--red-dk); color: #fff; }

/* Footer rotating quotes */
.footer-quote-rotator {
  padding: .75rem 0 1rem;
  margin-bottom: 1.5rem;
  max-width: 680px;
}

/* Quote rotator engine */
.quote-rotator { position: relative; min-height: 3.5em; }
.qr-item {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(.82rem,1.4vw,.95rem);
  color: rgba(201,168,124,.82);
  line-height: 1.7;
}
.qr-item cite { font-style: normal; font-weight: 600; color: rgba(201,168,124,.58); margin-left: .4em; }
.qr-item.active { opacity: 1; position: relative; }

/* Bottom-right floating quote widget */
.br-quote-widget {
  position: fixed;
  bottom: 2rem; right: 2rem;
  max-width: 300px; z-index: 90;
  background: rgba(13,20,32,.92);
  border: 1px solid rgba(201,168,124,.2);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem 1.2rem;
  backdrop-filter: blur(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.br-quote-widget.hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
.br-quote-widget .quote-rotator { min-height: 4.5em; }
.br-quote-widget .qr-item { color: rgba(201,168,124,.8); font-size: .82rem; }
.br-quote-widget .qr-item.active { position: relative; }
.br-quote-close {
  position: absolute; top: .5rem; right: .75rem;
  background: none; border: none;
  color: rgba(201,168,124,.35);
  font-size: 1.1rem; cursor: pointer;
  transition: color var(--tr);
}
.br-quote-close:hover { color: var(--red); }

/* ══════════════════════════════════════════════
   PARCHMENT BACKGROUND
══════════════════════════════════════════════ */
.parchment-bg {
  background-color: #e8d5b0 !important;
  background-image: url('../assets/images/hijama-wellness-parchment-paper-background.png') !important;
  background-size: 600px !important;
  background-repeat: repeat !important;
}

/* ══════════════════════════════════════════════
   LUNAR — two-column immersive
══════════════════════════════════════════════ */

/* Ripped-paper starfield, stretched once across the full height of both
   the lunar and night-sky sections as one shared, non-repeating image —
   anchored to the wrapper (not each section) so there are no tile seams
   and no phase break at the section boundary. */
.starry-duo {
  position: relative;
  background: #43456e;
}

/* ══════════════════════════════════════════════
   TORN PAPER EDGE — reusable, from test-torn-edge.html
   The tear's shape (torn-edge-strip-horizontal.png) used as a CSS mask
   over a flat color, so it can match any section's own background and
   still read as a seamless torn edge, not a fixed-color decal.
══════════════════════════════════════════════ */
.torn-edge {
  position: absolute;
  left: 0; right: 0;
  height: 40px;
  pointer-events: none;
  z-index: 2;
}
.torn-edge--mask {
  -webkit-mask-image: url('../assets/images/torn-edge-strip-horizontal.png');
  mask-image: url('../assets/images/torn-edge-strip-horizontal.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.torn-edge--flip {
  -webkit-mask-image: url('../assets/images/torn-edge-strip-horizontal-flip.png');
  mask-image: url('../assets/images/torn-edge-strip-horizontal-flip.png');
}
/* Natural parchment/scroll texture, no color mask — the default look,
   used everywhere unless a seam specifically needs a solid-color match. */
.torn-edge--raw {
  background-image: url('../assets/images/torn-edge-strip-horizontal.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* This strip's deepest dip sits near its own center, which would otherwise
   land right on the practitioner's head in the hero photo — widen and
   shift it left so the dip clears the head. */
/* The hero uses the same standard slanted tears as every other section seam
   (.torn-edge--raw at the top, its flipped twin .torn-edge--raw-flip at the
   bottom) — no custom size, filter or transform. */
.torn-edge--raw-flip {
  background-image: url('../assets/images/torn-edge-strip-horizontal-flip.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.torn-edge--mask.on-starry { background-color: #43456e; }
.torn-edge--mask.on-contact { background-color: #e8d5b0; }
.torn-edge--mask.on-cream { background-color: var(--cream); }
.torn-edge--mask.on-ink { background-color: var(--ink); }
.torn-edge--mask.on-tan { background-color: var(--tan); }
.torn-edge--mask.on-red { background-color: var(--red); }
.torn-edge--mask.on-tandk { background-color: var(--tan-dk); }
/* Superseded by the shared starfield above — the old dot field made the
   night-sky section visibly busier than the lunar section, reading as a
   seam at the boundary even though the background itself is continuous. */
.night-sky-section::before {
  content: none;
}
.starry-duo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Two copies of the same tile, offset by half a tile in both directions,
     so a sparse spot in one grid is covered by the other. */
  background-image:
    url('../assets/images/islamic-healing-starfield-mirror-tile.png'),
    url('../assets/images/islamic-healing-starfield-mirror-tile.png');
  background-repeat: repeat, repeat;
  background-size: 1900px 2034px, 1900px 2034px;
  background-position: 0px 260px, 950px 1017px;
  opacity: 0.6;
  /* Fade out over the bottom stretch so the pattern doesn't run behind
     the caravan at the very end of the farewell section. */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 88%, transparent 99%);
  mask-image: linear-gradient(to bottom, black 0%, black 88%, transparent 99%);
}

/* Shimmering star over "Prophet ﷺ" in the Sunnah Hijama Days hadith */
.prophet-name-star {
  position: relative;
  display: inline-block;
}
.north-star,
.shimmer-star {
  position: absolute;
  z-index: 2;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  box-shadow:
    0 0 4px 1px rgba(255,255,255,1),
    0 0 14px 4px rgba(255,255,255,.75),
    0 0 32px 8px rgba(255,255,255,.4),
    0 0 60px 16px rgba(201,168,124,.25);
  animation: northStarPulse 5s ease-in-out infinite;
}
.north-star { top: 22%; left: 36%; }
.shimmer-star {
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px;
}
.north-star::before,
.north-star::after,
.shimmer-star::before,
.shimmer-star::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.85), transparent);
  border-radius: 2px;
  transform-origin: center;
}
.north-star::before {
  width: 28px; height: 1.5px;
  transform: translate(-50%, -50%);
}
.north-star::after {
  width: 1.5px; height: 28px;
  transform: translate(-50%, -50%);
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.85), transparent);
}
.shimmer-star::before {
  width: 26px; height: 2px;
  transform: translate(-50%, -50%);
}
.shimmer-star::after {
  width: 2px; height: 26px;
  transform: translate(-50%, -50%);
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.85), transparent);
}
@keyframes northStarPulse {
  0%, 100% {
    opacity: 1;
    box-shadow:
      0 0 4px 1px rgba(255,255,255,1),
      0 0 14px 4px rgba(255,255,255,.75),
      0 0 32px 8px rgba(255,255,255,.4),
      0 0 60px 16px rgba(201,168,124,.25);
  }
  50% {
    opacity: .72;
    box-shadow:
      0 0 6px 2px rgba(255,255,255,.85),
      0 0 20px 6px rgba(255,255,255,.5),
      0 0 50px 14px rgba(255,255,255,.2),
      0 0 90px 24px rgba(201,168,124,.15);
  }
}

.lunar-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lstar { position: absolute; color: rgba(255,255,255,.8); animation: twinkle 3s ease-in-out infinite; }
.lstar:nth-child(2) { animation-delay: .7s; }
.lstar:nth-child(3) { animation-delay: 1.4s; }
.lstar:nth-child(4) { animation-delay: 2.1s; }
.lstar:nth-child(5) { animation-delay: .3s; }
.lstar:nth-child(6) { animation-delay: 1s; }
.lstar:nth-child(7) { animation-delay: 1.8s; }
.lstar:nth-child(8) { animation-delay: 2.5s; }
@keyframes twinkle { 0%,100%{opacity:var(--op,.5)} 50%{opacity:.1} }

/* Consolidated single-column layout — quote + calendar close together */
.lunar-consolidated {
  position: relative; z-index: 3;
  max-width: 720px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: clamp(1rem,2vw,1.5rem) clamp(2rem,6vw,5rem) clamp(3rem,7vw,5rem);
  text-align: center;
}
.lunar-consolidated .section-label { margin-bottom: .3rem; }
/* Moon art now sits as a soft full-bleed backdrop instead of its own column */
.lunar-moon-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
.lunar-moon-img {
  width: clamp(1100px, 160vw, 2000px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 40px rgba(201,168,124,.25));
  opacity: .32;
  transform: translateY(18vh);
}

/* ══ Sunnah Hijama Calendar Widget ══ */
.hijama-cal {
  position: relative;
  z-index: 3;
  margin-top: .4rem;
}
.hcal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(2.2rem,4.5vw,3rem);
}
.hcal-month-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(201,168,124,.5);
  margin-bottom: 0.2rem;
}
.hcal-month-name {
  font-family: var(--font-head);
  font-size: clamp(1.4rem,3vw,2rem);
  font-weight: 700;
  color: var(--cream);
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.hcal-year {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(201,168,124,.6);
  margin-top: 0.2rem;
}
.hcal-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.7rem,1.6vw,1rem);
  margin-bottom: 1.5rem;
}
.hcal-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: clamp(1.2rem,2.5vw,1.8rem) clamp(1rem,2vw,1.4rem);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(201,168,124,.28);
  border-radius: var(--radius);
  text-align: left;
  cursor: default;
  transition: border-color .3s, background .3s, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
  overflow: hidden;
}
.hcal-hijri { text-align: left; }
.hcal-hijri-month {
  font-family: var(--font-body);
  font-size: .68rem;
  letter-spacing: .06em;
  color: rgba(201,168,124,.55);
  margin-top: .15rem;
}
.hcal-card:not(.hcal-card--past) { cursor: pointer; }
.hcal-card:hover:not(.hcal-card--past) {
  background: rgba(201,168,124,.14);
  border-color: rgba(201,168,124,.75);
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 14px 40px rgba(0,0,0,.4), 0 0 28px rgba(201,168,124,.18);
}
/* "Book Now" sits in the middle, between the two dates — only revealed on hover */
.hcal-booknow {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  color: var(--ink);
  background: rgba(201,168,124,.92);
  border-radius: 99px;
  padding: .5rem .6rem;
  opacity: 0;
  transform: scale(.85);
  transition: background .3s, transform .3s, opacity .3s;
}
.hcal-card:hover:not(.hcal-card--past) .hcal-booknow {
  background: var(--tan);
  opacity: 1;
  transform: scale(1);
}
.hcal-card--today {
  background: rgba(201,168,124,.12);
  border-color: var(--tan);
  box-shadow: 0 0 0 1px rgba(201,168,124,.35), 0 4px 22px rgba(201,168,124,.2);
}
.hcal-card--past { opacity: .45; cursor: default; }
.hcal-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.18rem 0.6rem;
  border-radius: 99px;
  white-space: nowrap;
}
.hcal-badge--today { background: var(--tan); color: var(--ink); }
.hcal-badge--past  { background: rgba(255,255,255,.1); color: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.12); }
.hcal-hijri-num {
  font-family: var(--font-head);
  font-size: clamp(1.9rem,4vw,2.8rem);
  font-weight: 700;
  color: var(--tan);
  line-height: 1;
  filter: drop-shadow(0 0 14px rgba(201,168,124,.45));
}
.hcal-hijri-num sup { font-size: .42em; vertical-align: super; color: rgba(201,168,124,.65); }
/* Gregorian side mirrors the Hijri side's size/weight so neither reads as an afterthought */
.hcal-greg { text-align: right; }
.hcal-greg-num {
  font-family: var(--font-head);
  font-size: clamp(1.9rem,4vw,2.8rem);
  font-weight: 700;
  color: var(--tan);
  line-height: 1;
  filter: drop-shadow(0 0 14px rgba(201,168,124,.45));
}
.hcal-greg-month {
  font-family: var(--font-body);
  font-size: .68rem;
  letter-spacing: .06em;
  color: rgba(201,168,124,.55);
  margin-top: .15rem;
}
.hcal-note {
  font-family: var(--font-body);
  font-size: .76rem;
  color: rgba(201,168,124,.5);
  line-height: 1.75;
  padding-top: .9rem;
  border-top: 1px solid rgba(201,168,124,.1);
}
.hcal-note strong { color: rgba(201,168,124,.75); }
.hcal-fallback {
  font-family: var(--font-body);
  color: rgba(201,168,124,.65);
  font-size: .9rem;
  grid-column: 1 / -1;
  padding: 1.5rem;
  text-align: center;
  border: 1px solid rgba(201,168,124,.2);
  border-radius: var(--radius);
}

/* ══════════════════════════════════════════════
   SISTERS-ONLY — slim announcement banner
══════════════════════════════════════════════ */
.sisters-banner {
  background: var(--red);
  padding: clamp(2rem, 4vw, 3rem) 0;
  position: relative;
  overflow: hidden;
}
.sisters-banner-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 90% at 50% 0%, rgba(255,255,255,.1) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(255,255,255,.06) 0%, transparent 65%);
  pointer-events: none;
}
.sisters-banner-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  text-align: center;
}
.sisters-banner-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: #fff;
  opacity: .85;
  margin-bottom: .3rem;
}
.sisters-banner-flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-bottom: .2rem;
}
.sisters-banner-flourish span {
  width: 34px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.5));
}
.sisters-banner-flourish span:last-child {
  background: linear-gradient(to left, transparent, rgba(255,255,255,.5));
}
.sisters-banner-flourish i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.65);
  flex-shrink: 0;
  font-style: normal;
}
.sisters-banner-eyebrow {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin: 0;
}
.sisters-banner-script {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(3.6rem, 8.5vw, 6.4rem);
  color: #fff;
  line-height: 1.1;
  margin: 0;
  text-shadow: 0 0 10px rgba(255,255,255,.5), 0 0 28px rgba(255,255,255,.25);
}
.sisters-banner-sub {
  font-family: var(--font-body);
  font-size: clamp(.72rem, 2vw, .9rem);
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  text-align: center;
  max-width: 34em;
  margin: .15rem auto .4rem;
  text-wrap: balance;
}
.sisters-banner-cta {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 4px;
  padding: .6rem 1.6rem;
  transition: background .2s, border-color .2s, color .2s;
}
.sisters-banner-cta:hover {
  background: #fff;
  border-color: #fff;
  color: var(--red);
}

/* ══════════════════════════════════════════════
   STEP ICON (How It Works)
══════════════════════════════════════════════ */
.step-icon { width: 44px; height: 44px; margin: 0 auto 1rem; }
.step-icon svg { width: 100%; height: 100%; }

/* ══════════════════════════════════════════════
   BACK TO TOP
══════════════════════════════════════════════ */
.back-to-top {
  position: fixed; bottom: 6.5rem; right: 2rem; z-index: 80;
  width: 44px; height: 44px;
  background: var(--ink);
  color: var(--tan);
  border: 1px solid rgba(201,168,124,.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, background var(--tr), transform .2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: var(--red); transform: translateY(-3px); }

/* ── WhatsApp Float Button ── */
.whatsapp-float {
  position: fixed;
  bottom: 6.5rem;
  right: 4rem;
  z-index: 79;
  width: 50px;
  height: 50px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
  text-decoration: none;
  transition: transform var(--tr), box-shadow var(--tr);
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: scale(1.1);
  box-shadow: 0 8px 28px rgba(37,211,102,.45);
  outline: none;
}
.whatsapp-float svg { width: 26px; height: 26px; fill: #fff; flex-shrink: 0; }
.whatsapp-label {
  position: absolute;
  right: 58px;
  background: #25D366;
  color: #fff;
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: 600;
  padding: .3rem .7rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.whatsapp-float:hover .whatsapp-label { opacity: 1; }

/* Form next-steps hint */
.form-next-steps {
  font-family: var(--font-body);
  font-size: .82rem;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: .85rem;
  line-height: 1.65;
  text-align: center;
  opacity: .75;
}


/* ══════════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 750ms cubic-bezier(.22,1,.36,1), transform 750ms cubic-bezier(.22,1,.36,1);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 100ms; }
.reveal-d2 { transition-delay: 200ms; }

/* Card/item stagger — applied by JS when parent section becomes visible */
.anim-child {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 550ms cubic-bezier(.22,1,.36,1), transform 550ms cubic-bezier(.22,1,.36,1);
}
.anim-in .anim-child { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════════ */
@keyframes fadeUp   { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:none; } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes bounce   { 0%,100%{transform:translateY(0);} 50%{transform:translateY(7px);} }
@keyframes scaleIn  { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }
@keyframes slideRight { from { opacity:0; transform:translateX(-18px); } to { opacity:1; transform:none; } }
@keyframes heroZoom { from { transform:scale(1); } to { transform:scale(1.05); } }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Hero */
  .hero { grid-template-rows: 1fr auto; }
  .hero-body { grid-template-columns: 1fr; }
  .hero-img-wrap { min-height: 55vw; order: -1; }
  .hero-hadith-h1 { font-size: clamp(1.8rem,5vw,3rem); }

  /* 2-col → 1-col */
  .about-layout, .rakee-layout, .newsletter-layout, .contact-layout { grid-template-columns: 1fr; }
  /* On mobile the square shrinks to fit the single column */
  .about-scholars-img img {
    width:  clamp(280px, 78vw, 440px);
    height: clamp(280px, 78vw, 440px);
  }
  .newsletter-card { padding: 2.5rem 1.5rem; }
  /* Hide BR widget on small screens */
  .br-quote-widget { display: none; }
  /* Hadith section */
  .hadith-attr-center { flex-direction: column; gap: .5rem; }
  .services-top { justify-content: center; text-align: center; }
  .lunar-moon-img { width: clamp(140px,50vw,200px); }
  /* Hijama calendar — single column on mobile */
  .hcal-cards { grid-template-columns: 1fr; }
  .hcal-card { flex-direction: row; justify-content: flex-start; gap: 1rem; padding: .9rem 1.1rem; }
  .hcal-hijri-num { font-size: 1.9rem; min-width: 2.6rem; }
  .hcal-greg { text-align: left; }
  /* Sisters banner — wrap text on tiny screens */
  .sisters-banner-sub { text-align: center; }
}

/* ── Razor / pump / cups: ONE arrangement at every screen width ──────────
   (formerly phone-only; the owner wants desktop to match the phone look).
   Subtle watermark sitting behind the text. */
.section-cover-illus {
    z-index: -1;
    opacity: .48;
    filter: saturate(.75) sepia(.1);
  }
  /* Cup column sits directly beneath the pump's nozzle.
     Horizontal: the pump's nozzle tip is ~.295 x pump-width right of the
     section centre; the cups are drawn ~.3075 x rail-width left of the
     section's right edge, so shift by the difference.
     Vertical: nozzle tip is ~99px + .066 x pump-width below this section's
     top (with Treatment collapsed); start the column just under that. */
  .sickness-section .section-cover-illus {
    width: min(125vw, 650px);
    right: -20%;
    left: auto;
    top: -4rem;
    transform: rotate(-30deg);
    transform-origin: top right;
  }
  .treatment-section .section-cover-illus {
    width: min(140vw, 760px);
    left: 50%;
    right: auto;
    top: calc(135% + 30px);
    bottom: auto;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: top center;
  }
  .benefits-cup-rail {
    width: clamp(720px, 94vw, 1300px);
    /* same transparency/tint as the pump and razor above */
    opacity: .48;
    filter: saturate(.75) sepia(.1);
    top: 140px;
    transform: translateX(calc(46% - 50vw + .2951 * min(140vw, 760px) + .3075 * clamp(720px, 94vw, 1300px)));
  }
  /* Cups 2 & 3 stack directly beneath cup 1. The wrapper starts where cup 1's
     image ends (rail width x the 2732:1536 aspect ratio, plus spacing), and
     its children flow one under the other. */
  #benefits-cups-expand {
    inset: auto;
    left: 0;
    right: 0;
    top: calc(clamp(1.5rem, 3vw, 2.5rem) + clamp(720px, 94vw, 1300px) * .6822);
    overflow: visible;
    margin-top: 0 !important;
  }
  #benefits-cups-expand .bcr-cup {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    transform: none;
  }
  /* The desktop layout positions these two with :nth-child rules, which are
     more specific than the generic reset above — undo them here too. */
  #benefits-cups-expand .bcr-cup:nth-child(1) { top: auto; bottom: auto; transform: none; }
  /* The three source images draw their cups at slightly different heights and
     horizontal positions; this spaces cup 3 and lines it up with the others. */
  #benefits-cups-expand .bcr-cup:nth-child(2) { top: auto; bottom: auto; margin-top: 19%; transform: translateX(-5%); }

/* Desktop: same arrangement (razor at 30deg, upright pump with its nozzle
   down, cups stacked directly under the nozzle) sized and positioned for a
   wide screen instead of a phone. The pump is placed so its nozzle tip lands
   on the cups' centre line: cups are drawn ~.3075 x rail-width left of the
   right edge, the nozzle tip sits ~.2951 x pump-width right of the pump's
   left edge. Vertically the nozzle ends just above the first cup, so the
   pump spans the Treatment section handle-to-nozzle. */
@media (min-width: 901px) {
  .sickness-section .section-cover-illus {
    width: clamp(480px, 46vw, 660px);
    right: -3%;
    top: -3rem;
  }
  .treatment-section .section-cover-illus {
    width: clamp(420px, 56vw, 780px);
    left: calc(100% - .3075 * clamp(500px, 65vw, 900px) - .2951 * clamp(420px, 56vw, 780px));
    right: auto;
    top: calc(100% + 12px);
  }
  .benefits-cup-rail {
    width: clamp(500px, 65vw, 900px);
    top: 0;
    transform: translateX(46%);
  }
  #benefits-cups-expand {
    top: calc(clamp(1.5rem, 3vw, 2.5rem) + clamp(500px, 65vw, 900px) * .6822);
  }
}

@media (max-width: 900px) {
  /* Benefits progression stacks on mobile */
  .benefits-progression { flex-direction: column; }
  .bp-arrow { transform: rotate(90deg); }
  /* Back to top on mobile stays small */
  .back-to-top { bottom: 1.5rem; right: 1rem; width: 40px; height: 40px; }
}

@media (max-width: 640px) {
  .cupping-types-grid { flex-direction: column; align-items: center; gap: 1.5rem; }
  .ct-divider { width: 80px; height: 2px; }
}

@media print {
  .navbar, .hero-scroll-cue, .slider-ui, .s-btn, .s-dots, .canva-btn { display: none !important; }
  .expandable { max-height: none !important; opacity: 1 !important; visibility: visible !important; }
}

/* ══════════════════════════════════════════════
   FOUNDING CLIENTS OFFER
══════════════════════════════════════════════ */
.founding-section {
  position: relative;
  background: var(--ink);
  padding: clamp(4rem, 9vw, 7rem) 0;
  overflow: hidden;
}
.founding-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 70% at 20% 50%, rgba(201,168,124,.07) 0%, transparent 65%),
    radial-gradient(ellipse 50% 80% at 80% 50%, rgba(235,24,23,.05) 0%, transparent 65%);
  pointer-events: none;
}

/* Header */
.founding-header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.founding-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--tan);
  padding: .4rem 1.1rem;
  border-radius: 50px;
  margin-bottom: 1.4rem;
}
.founding-badge svg { flex-shrink: 0; color: var(--ink); }
.founding-headline {
  font-family: var(--font-head);
  font-size: clamp(2rem, 5vw, 3.8rem);
  color: var(--cream);
  line-height: 1.1;
  margin-bottom: .85rem;
}
.founding-subhead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: rgba(240,228,204,.7);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}
.founding-subhead strong { color: var(--tan); font-weight: 700; }

/* Body layout */
.founding-body-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 768px) {
  .founding-body-layout { grid-template-columns: 1fr; }
}

/* Copy */
.founding-copy p {
  font-family: var(--font-body);
  font-size: clamp(.95rem, 1.5vw, 1.05rem);
  color: rgba(240,228,204,.72);
  line-height: 1.85;
  margin-bottom: 1.1rem;
}
.founding-copy p:last-child { margin-bottom: 0; }
.founding-copy strong { color: var(--tan); font-weight: 700; }
.founding-invite {
  font-style: italic;
  color: rgba(240,228,204,.85) !important;
  border-left: 3px solid rgba(201,168,124,.4);
  padding-left: 1rem;
  margin-top: 1.4rem !important;
}

/* Price comparison */
.founding-pricing {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  justify-content: center;
}
@media (max-width: 460px) {
  .founding-pricing { flex-direction: column; }
  .founding-price-arrow { transform: rotate(90deg); }
}
.founding-price-card {
  flex: 1;
  max-width: 200px;
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.2rem, 2.5vw, 1.8rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.founding-price-regular {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}
.founding-price-regular .fpc-amount {
  text-decoration: line-through;
  opacity: .5;
}
.founding-price-offer {
  background: rgba(201,168,124,.1);
  border: 1px solid rgba(201,168,124,.35);
  position: relative;
  box-shadow: 0 0 0 1px rgba(201,168,124,.15), 0 8px 32px rgba(201,168,124,.12);
}
.fpc-discount-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: #fff;
  font-family: var(--font-ui);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .3rem .85rem;
  border-radius: 50px;
  white-space: nowrap;
}
.fpc-label {
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(201,168,124,.6);
  margin-top: .6rem;
}
.fpc-amount {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--cream);
  line-height: 1;
}
.founding-price-offer .fpc-amount { color: var(--tan); }
.fpc-per {
  font-family: var(--font-ui);
  font-size: .7rem;
  color: rgba(240,228,204,.45);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.fpc-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: .78rem;
  color: rgba(201,168,124,.55);
  margin-top: .25rem;
}
.founding-price-arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: rgba(201,168,124,.4);
  transition: color var(--tr);
}
.founding-price-arrow svg { width: 100%; height: 100%; }

/* CTA */
.founding-cta-row {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.founding-cta-btn {
  font-size: 1rem;
  padding: 1rem 2.6rem;
  animation: foundingPulse 3s ease-in-out infinite;
}
@keyframes foundingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(235,24,23,0); }
  50%       { box-shadow: 0 0 0 10px rgba(235,24,23,.12); }
}
.founding-cta-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: .85rem;
  color: rgba(240,228,204,.45);
  max-width: 440px;
  line-height: 1.6;
}
.founding-cta-note em { color: rgba(201,168,124,.65); font-style: normal; font-weight: 600; }

/* ── Founding teaser banner (homepage compact strip) ── */
.founding-teaser {
  background: var(--ink);
  border-top: 1px solid rgba(201,168,124,.12);
  border-bottom: 1px solid rgba(201,168,124,.12);
  padding: clamp(1.2rem, 2.5vw, 1.8rem) 0;
}
.founding-teaser-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}
.founding-teaser-left {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.4rem);
  flex-wrap: wrap;
}
.founding-teaser-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-ui);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--tan);
  padding: .35rem .95rem;
  border-radius: 50px;
  white-space: nowrap;
  flex-shrink: 0;
}
.founding-teaser-badge svg { flex-shrink: 0; }
.founding-teaser-text {
  font-family: var(--font-body);
  font-size: clamp(.88rem, 1.4vw, 1rem);
  color: rgba(240,228,204,.65);
  line-height: 1.45;
  margin: 0;
}
.founding-teaser-text strong { color: var(--tan); font-weight: 700; }
.founding-teaser-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(201,168,124,.15);
  border: 1px solid rgba(201,168,124,.38);
  padding: .65rem 1.4rem;
  border-radius: 50px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.founding-teaser-cta:hover {
  background: rgba(201,168,124,.28);
  border-color: var(--tan);
  color: var(--tan);
}
@media (max-width: 560px) {
  .founding-teaser-inner { justify-content: center; text-align: center; }
  .founding-teaser-left { justify-content: center; }
}

/* ══════════════════════════════════════════════
   DARK MODE TOGGLE BUTTON
══════════════════════════════════════════════ */
.dark-mode-btn {
  width: 34px; height: 34px;
  border: 1px solid rgba(201,168,124,.28);
  border-radius: 50%;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--tan);
  flex-shrink: 0;
  transition: background var(--tr), border-color var(--tr), transform .25s ease, color var(--tr);
}
.dark-mode-btn:hover {
  background: rgba(201,168,124,.14);
  border-color: var(--tan);
  transform: rotate(18deg);
}
.dm-icon { width: 15px; height: 15px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dm-sun  { display: none; }
[data-theme="dark"] .dm-moon { display: none; }
[data-theme="dark"] .dm-sun  { display: block; }

/* ── Dark theme variables ─────────────────── */
[data-theme="dark"] {
  --ink:      #e8d5b0;
  --ink-soft: rgba(232,213,176,.58);
  --cream:    #0e0c18;
}

/* ── Body ────────────────────────────────── */
[data-theme="dark"] body {
  background-color: #0e0c18;
  background-image: none;
  color: #e8d5b0;
}

/* ── Navbar ──────────────────────────────── */
[data-theme="dark"] .navbar {
  background: rgba(14,12,24,.88);
  border-bottom: 1px solid rgba(201,168,124,.1);
}
[data-theme="dark"] .navbar.scrolled { background: rgba(14,12,24,.97); }
[data-theme="dark"] .nav-menu a { color: rgba(232,213,176,.85); }
[data-theme="dark"] .nav-menu a:hover { color: var(--tan); }
[data-theme="dark"] .nav-burger span { background: var(--tan); }
[data-theme="dark"] .nav-logo-img { filter: brightness(1.15); }
@media (max-width: 900px) {
  [data-theme="dark"] .nav-menu {
    background-color: #15112a;
    background-image: none;
    border-top: 1px solid rgba(201,168,124,.12);
  }
  [data-theme="dark"] .nav-menu a { border-bottom-color: rgba(201,168,124,.08); }
  [data-theme="dark"] .nav-menu .nav-lang { border-bottom-color: rgba(201,168,124,.08); }
}

/* ── Light sections → dark ───────────────── */
[data-theme="dark"] .hadith-section,
[data-theme="dark"] .testimonials-section,
[data-theme="dark"] .contact-section {
  background-color: #0e0c18;
  background-image: none;
}
[data-theme="dark"] .page-section {
  background-color: #13101f;
  background-image: none;
}
[data-theme="dark"] .page-section.parchment-bg {
  background-color: #13101f !important;
  background-image: none !important;
}
[data-theme="dark"] .alt-bg {
  background-color: #1a1530 !important;
}
[data-theme="dark"] .services-pricing-section {
  background-color: #1a1530;
  background-image: none;
}

/* ── Typography on dark ──────────────────── */
[data-theme="dark"] .section-heading { color: var(--cream); }
[data-theme="dark"] .section-sub,
[data-theme="dark"] .section-eyebrow + p { color: rgba(232,213,176,.6); }
[data-theme="dark"] h2:not(.section-heading),
[data-theme="dark"] h3,
[data-theme="dark"] h4 { color: #e8d5b0; }
[data-theme="dark"] p   { color: rgba(232,213,176,.72); }
[data-theme="dark"] li  { color: rgba(232,213,176,.7); }

/* ── Cards & surfaces ────────────────────── */
[data-theme="dark"] .sp-name { color: #e8d5b0; }
[data-theme="dark"] .sp-price-tag { color: rgba(232,213,176,.6); }

[data-theme="dark"] .why-card {
  background: transparent;
  border: none;
}
[data-theme="dark"] .why-card h3 { color: #e8d5b0; }
[data-theme="dark"] .why-num { color: rgba(201,168,124,.22); }
[data-theme="dark"] .how-num { color: rgba(201,168,124,.22); }
[data-theme="dark"] .how-body {
  background: transparent;
  border: none;
}
[data-theme="dark"] .how-body h3 { color: #e8d5b0; }
[data-theme="dark"] .how-body p  { color: rgba(232,213,176,.65); }
[data-theme="dark"] .how-node-icon {
  background: rgba(255,255,255,.06);
  border-color: rgba(201,168,124,.2);
}
[data-theme="dark"] .area-card {
  background: rgba(255,255,255,.04);
  border-color: rgba(201,168,124,.14);
}
[data-theme="dark"] .area-card h3 { color: var(--red); }
[data-theme="dark"] .area-tags li {
  background: rgba(255,255,255,.06);
  border-color: rgba(201,168,124,.18);
  color: rgba(232,213,176,.65);
}
[data-theme="dark"] .area-card--gta {
  background: rgba(201,168,124,.07);
  border-color: rgba(201,168,124,.2);
}
[data-theme="dark"] .area-gta-note { color: rgba(232,213,176,.6); }

[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .testimonial-card-inner {
  background: rgba(255,255,255,.04);
  border-color: rgba(201,168,124,.15);
}
[data-theme="dark"] .t-text { color: rgba(232,213,176,.75); }
[data-theme="dark"] .t-name { color: #e8d5b0; }

[data-theme="dark"] .faq-item {
  background: rgba(255,255,255,.03);
  border-color: rgba(201,168,124,.15);
}
[data-theme="dark"] .faq-q { color: #e8d5b0; }
[data-theme="dark"] .faq-q:hover { background: rgba(201,168,124,.07); }
[data-theme="dark"] .faq-a p { color: rgba(232,213,176,.7); }


/* ── Contact form ────────────────────────── */
[data-theme="dark"] .contact-section {
  background-color: #0e0c18;
  background-image: none;
}
[data-theme="dark"] .contact-form-wrap,
[data-theme="dark"] .contact-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,168,124,.18);
}
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
  background: rgba(255,255,255,.06);
  color: #e8d5b0;
  border-color: rgba(201,168,124,.22);
}
[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder { color: rgba(232,213,176,.35); }
[data-theme="dark"] .form-group label { color: rgba(232,213,176,.7); }
[data-theme="dark"] select option { background: #1a1530; color: #e8d5b0; }

/* ── Hadith section ──────────────────────── */
[data-theme="dark"] .hero-hadith-h1 { color: #e8d5b0; }
[data-theme="dark"] .hadith-attr { color: rgba(232,213,176,.6); }

/* ── Areas section ───────────────────────── */
[data-theme="dark"] .area-chip {
  background: rgba(255,255,255,.05);
  border-color: rgba(201,168,124,.2);
  color: rgba(232,213,176,.8);
}
[data-theme="dark"] .area-chip:hover {
  background: rgba(201,168,124,.12);
  border-color: var(--tan);
  color: var(--tan);
}

/* ── About section ───────────────────────── */
[data-theme="dark"] .about-body { color: rgba(232,213,176,.72); }
[data-theme="dark"] .about-scholars-img { border-color: rgba(201,168,124,.2); }

/* ── Scrollbar ───────────────────────────── */
[data-theme="dark"] html { scrollbar-color: var(--tan-dk) #1a1530; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #1a1530; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--tan-dk); }


/* ══════════════════════════════════════════════
   HERO tears
   Base = the phone look (mirrored, shadowed top tear; taller shadowed bottom
   tear; slow photo zoom). Desktop (>=901px) shows more of the photo: the
   bottom tear is thin, and both tears get a stronger shadow. Desktop also
   uses a solid header instead of the frosted-glass blur (it flickered).
══════════════════════════════════════════════ */
.hero-fullbleed-img { animation: heroZoom 24s ease-in-out infinite alternate; }
.hero-fullbleed > .torn-edge--raw {
  width: 130%;
  left: -30%;
  right: auto;
  transform: scaleX(-1);
  filter: drop-shadow(0 5px 9px rgba(0,0,0,.45));
}
.hero-fullbleed > .torn-edge--raw-flip {
  height: clamp(50px, 6vw, 90px);
  filter: drop-shadow(0 -4px 8px rgba(26,8,0,.4));
}
@media (min-width: 901px) {
  .navbar, .nav-menu {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* The artwork thins out toward one end, so on a wide screen the tears would
     stop short of the edge. Draw each 2x wider than the hero and slide it so
     the screen only shows the fuller stretch (roughly 47%-97% of the artwork):
     evenly ragged edge to edge. */
  .hero-fullbleed > .torn-edge--raw {
    width: 200%; left: -6%; right: auto;
    height: 40px;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)) drop-shadow(0 3px 8px rgba(0,0,0,.25));
  }
  .hero-fullbleed > .torn-edge--raw-flip {
    width: 200%; left: -94%; right: auto;
    height: 40px;
    filter: drop-shadow(0 -8px 18px rgba(0,0,0,.45)) drop-shadow(0 -3px 8px rgba(0,0,0,.22));
  }
}

/* Firefox only: it flickers when a CSS filter/transform sits over the slowly
   zooming photo. Same look, but the tears are pre-rendered images with the
   shadow built in, the photo is still, and the page background scrolls
   normally instead of being fixed. */
@supports (-moz-appearance: none) {
  .hero-fullbleed-img { animation: none; }
  body { background-attachment: scroll; }
  .hero-fullbleed > .torn-edge--raw {
    left: 0;
    right: auto;
    width: 100%;
    height: 56px;
    transform: none;
    filter: none;
    background-image: url('../assets/images/hero-tear-top-ff.png');
    background-size: 100% 100%;
  }
  .hero-fullbleed > .torn-edge--raw-flip {
    height: clamp(60px, 7.2vw, 108px);
    filter: none;
    background-image: url('../assets/images/hero-tear-bottom-ff.png');
    background-size: 100% 100%;
  }
  @media (min-width: 901px) {
    .hero-fullbleed > .torn-edge--raw {
      width: 100%; left: 0; right: auto; height: 74px;
      background-image: url('../assets/images/hero-tear-top-ff-wide.png');
    }
    .hero-fullbleed > .torn-edge--raw-flip {
      width: 100%; left: 0; right: auto; height: 57px;
      background-image: url('../assets/images/hero-tear-bottom-ff-wide.png');
    }
  }
}