@font-face {
  font-family: Readex;
  src: url("/assets/fonts/readex-arabic.woff2") format("woff2");
  font-weight: 160 700;
  font-display: swap;
  unicode-range: U+0600-06ff,U+0750-077f,U+0870-0891,U+0897-08ff,U+200c-200e,U+2010-2011,U+204f,U+2e41,U+fb50-fdff,U+fe70-fefc;
}
@font-face {
  font-family: Readex;
  src: url("/assets/fonts/readex-latin.woff2") format("woff2");
  font-weight: 160 700;
  font-display: swap;
  unicode-range: U+0000-00ff,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+0304,U+0308,U+0329,U+2000-206f,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd;
}
:root {
  --ink: #2b2426;
  --secondary: #5e5356;
  --cherry: #9a2f49;
  --rose: #f9e7e8;
  --cream: #fbf7f1;
  --paper: #fffdfa;
  --line: #e5dcd6;
  font-family: Readex, Tahoma, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
a { text-decoration: none; color: inherit; }
button { font: inherit; color: inherit; }
button, summary { cursor: pointer; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--cherry); outline-offset: 5px; }
::selection { background: #f1cbd1; color: #382b2e; }
svg { display: block; }
p, h1, h2, h3, h4 { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 18px; }
.wrap { width: min(1200px, 88%); margin-inline: auto; }
.icon { width: 20px; height: 20px; flex: none; }
.skip-link { position: absolute; z-index: 20; inset-block-start: -60px; inset-inline-start: 10px; padding: 8px 15px; background: #fff; color: var(--cherry); }
.skip-link:focus { top: 8px; }
.site-header { position: relative; z-index: 5; background: #fffdfa; border-bottom: 1px solid #eadfd9; }
.header-inner { height: 77px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.care-symbol { width: 41px; height: 42px; }
.brand-name { font-size: 21px; line-height: 1.35; font-weight: 520; letter-spacing: -.035em; }
html[lang=en] .brand-name { font-size: 16px; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.language { min-height: 38px; display: inline-flex; gap: 7px; align-items: center; border: 1px solid #d8cdca; border-radius: 50px; padding: 4px 13px; font-size: 12px; font-weight: 420; direction: ltr; }
.language .icon { width: 16px; height: 16px; }
.language:hover, .menu-toggle:hover { background: #f7e9e8; }
.menu-toggle { border: 0; background: transparent; min-height: 44px; min-width: 36px; display: grid; place-items: center; border-radius: 8px; }
.menu-toggle[aria-expanded="false"] .close-icon, .menu-toggle[aria-expanded="true"] .menu-icon { display: none; }
#main-nav { display: none; position: absolute; inset: 100% 0 auto; padding: 12px 6% 18px; background: #fffdfa; border-bottom: 1px solid var(--line); }
#main-nav.open { display: grid; }
#main-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; transition: color .18s; }
#main-nav a:hover, #main-nav [aria-current] { color: var(--cherry); }
.hero { position: relative; isolation: isolate; background: var(--cream); overflow: hidden; }
.hero-inner { display: grid; align-items: center; gap: 36px; padding-block: 38px 51px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--cherry); font-size: 13px; font-weight: 500; }
.dash { display: inline-block; width: 28px; height: 2px; background: #b65667; }
h1 { font-size: clamp(52px, 11.7vw, 79px); line-height: 1.3; font-weight: 575; letter-spacing: -.05em; margin-block: 8px 14px; }
.surname { position: relative; white-space: nowrap; }
.pencil-line { width: 100%; height: .15em; position: absolute; left: 0; bottom: -.05em; transform: rotate(-1deg); }
.credential { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; font-size: 17px; font-weight: 460; color: #553c43; line-height: 1.6; }
.credential-code { display: inline-flex; direction: ltr; align-items: center; border: 1px solid #dfc6c7; border-radius: 5px; background: #f8ece9; color: #804052; font-size: 11px; letter-spacing: .5px; line-height: 1.8; padding: 0 7px; font-weight: 530; }
.intro { max-width: 505px; color: var(--secondary); font-weight: 360; font-size: 16px; line-height: 1.95; margin-top: 13px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 19px; margin-top: 23px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 23px; background: var(--cherry); color: #fff; border-radius: 10px; font-weight: 480; font-size: 15px; box-shadow: 0 4px 8px -5px #6d16264a; transition: background .2s, transform .2s; }
.button:hover { background: #7c2038; transform: translateY(-1px); }
.button .icon { width: 19px; height: 19px; }
.text-link { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 450; color: #554449; }
.text-link .icon { width: 15px; height: 15px; transition: transform .2s; }
.text-link:hover .icon { transform: translateY(3px); }
.hero-visual { position: relative; width: 96%; margin-inline: auto; aspect-ratio: 1.47; }
.hero-photo, .photo-backing { position: absolute; width: 100%; height: 100%; inset: 0; border-radius: 36% 20px 32% 20px / 48% 20px 42% 20px; }
.hero-photo { object-fit: cover; object-position: 40% 50%; }
.photo-backing { background: #e8b8b9; transform: rotate(-3deg) translate(-2px, 5px); }
.rays { position: absolute; width: 10%; height: auto; top: 3.5%; left: 3%; transform: rotate(4deg); }
.hand-loop { position: absolute; width: 15%; height: auto; right: 0; bottom: 0; transform: rotate(-9deg); }
.wave { position: absolute; bottom: -1px; width: 100%; height: 23px; }
.paths { padding-block: 33px 40px; }
.section-heading { margin-bottom: 21px; }
h2 { font-size: clamp(30px, 3.1vw, 44px); font-weight: 530; line-height: 1.5; letter-spacing: -.037em; }
.section-heading .eyebrow { font-size: 12px; margin-bottom: 2px; }
.section-heading .dash { width: 22px; }
.path-grid { display: grid; align-items: start; gap: 18px; }
.path-card { --card-color: #fae9e8; --card-border: #eed6d6; --card-accent: #943048; border: 1px solid var(--card-border); border-radius: 18px; background: var(--card-color); }
.path-card.practitioners { --card-color: #f2ece9; --card-border: #e4d9d4; --card-accent: #67414a; }
.path-card summary { list-style: none; border-radius: inherit; }
.path-card summary::-webkit-details-marker { display: none; }
.card-teaser { display: grid; grid-template-columns: minmax(0, 1fr) 80px; align-items: center; gap: 6px; padding: 21px 19px; }
.card-copy { display: flex; flex-direction: column; align-items: start; }
.audience { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--card-accent); font-weight: 550; }
.audience i { width: 6px; height: 6px; border-radius: 100%; background: currentColor; }
.question { display: block; margin-top: 7px; font-size: 20px; font-weight: 540; line-height: 1.55; letter-spacing: -.035em; }
.path-summary { color: #5d5154; font-size: 13px; font-weight: 350; line-height: 1.85; margin-top: 5px; }
.card-art { width: 100%; height: auto; transition: transform .25s; }
.path-card summary:hover .card-art { transform: translateY(-3px) rotate(-2deg); }
.disclosure { display: inline-flex; align-items: center; gap: 9px; color: var(--card-accent); font-size: 12px; font-weight: 540; margin-top: 16px; }
.disclosure .icon { width: 17px; height: 17px; }
html[dir=ltr] .flow-arrow { transform: scaleX(-1); }
.expanded-label, [open] .collapsed-label { display: none; }
[open] .expanded-label { display: inline; }
[open] .disclosure .icon { transform: rotate(90deg); }
.path-content { padding: 0 23px 24px; color: var(--secondary); font-size: 14px; line-height: 1.9; }
.path-content > p { padding-top: 20px; border-top: 1px solid var(--card-border); }
.path-content ol { padding-inline-start: 1.6em; margin: 19px 0 22px; }
.path-content li { padding-inline-start: 5px; margin-bottom: 14px; }
.path-content li::marker { color: var(--card-accent); font-weight: 500; }
.path-content h4 { color: var(--ink); font-size: 15px; font-weight: 550; }
.path-content .button { font-size: 14px; min-height: 44px; }
.about { display: grid; gap: 18px; border-top: 1px solid var(--line); padding-block: 37px 45px; }
.about h2 { color: var(--ink); margin-bottom: 12px; }
.about-copy { max-width: 740px; font-weight: 365; font-size: 16px; line-height: 1.95; color: var(--secondary); }
.personal-note {
  position: relative;
  isolation: isolate;
  margin: 9px 4px;
  padding: 25px 27px 19px;
  color: #633442;
  background-color: #faece9;
  background-image: repeating-linear-gradient(transparent 0 33px, #ead0d1 33px 34px);
  background-position: 0 20px;
  border: 1px solid #eddbd8;
  border-radius: 2px 4px 14px 1px;
  box-shadow: 0 6px 10px -9px #5e343b;
  transform: rotate(-1.5deg);
}
.personal-note::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 37%;
  width: 65px;
  height: 19px;
  background: #e7cfb8d9;
  transform: rotate(4deg);
  clip-path: polygon(2% 0,100% 4%,98% 23%,100% 38%,98% 66%,100% 92%,1% 100%,3% 78%,0 64%,3% 36%,0 19%);
}
.personal-note p { font-weight: 420; font-size: 16px; line-height: 34px; }
.contact { color: #fffaf5; background: #512c37; }
.contact-inner { padding-block: 40px; display: grid; gap: 24px; align-items: center; }
.contact-copy p { max-width: 470px; font-size: 15px; font-weight: 350; line-height: 1.9; color: #efdbdc; margin-top: 11px; }
.contact-links { display: grid; }
.contact-links a { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #845e67; padding: 12px 1px; }
.contact-links a:first-child { padding-top: 0; }
.contact-links a:last-child { border: 0; }
.contact-links a:hover bdi { text-decoration: underline; }
.back-top { display: inline-flex; align-items: center; gap: 7px; color: #f0dfe1; font-size: 12px; min-height: 42px; margin-top: 13px; }
.back-top:hover { color: #fff; text-decoration: underline; }
.back-top .icon { width: 16px; height: 16px; }
.contact-links a > span { flex: 1; }
.contact-links small { display: block; color: #e5c9ce; font-size: 11px; margin-bottom: 3px; }
.contact-links bdi { font-size: 14px; }
.contact-links .flow-arrow { width: 16px; }

@media (min-width: 560px) {
  .hero-visual { max-width: 530px; }
  .card-teaser { grid-template-columns: minmax(0, 1fr) 120px; padding: 25px; }
  .hero-actions { gap: 25px; }
}
@media (min-width: 800px) {
  .header-inner { height: 82px; }
  .care-symbol { width: 47px; height: 48px; }
  .brand-name { font-size: 24px; }
  html[lang=en] .brand-name { font-size: 19px; }
  #main-nav, #main-nav.open { position: static; display: flex; align-self: stretch; align-items: stretch; gap: clamp(16px, 2.6vw, 40px); border: 0; padding: 0; background: transparent; }
  #main-nav a { position: relative; font-size: 13px; }
  #main-nav [aria-current]::after { content: ''; position: absolute; bottom: 13px; inset-inline: 28%; border-bottom: 2px solid #aa4259; border-radius: 2px; }
  .language { padding: 5px 15px; }
  .menu-toggle { display: none; }
  .hero-inner { grid-template-columns: 1fr 1.11fr; gap: 6.6%; padding-block: 51px 64px; }
  .hero-copy { padding-bottom: 5px; }
  .hero-visual { width: 97%; max-width: none; aspect-ratio: 1.47; }
  .hero-photo, .photo-backing { border-radius: 36% 24px 32% 24px / 48% 24px 42% 24px; }
  .photo-backing { transform: rotate(-3.2deg) translate(-4px, 7px); }
  .intro { font-size: clamp(15px, 1.2vw, 18px); }
  h1 { font-size: clamp(60px, 6vw, 91px); margin-block: 9px 17px; }
  .credential { font-size: clamp(16px, 1.38vw, 20px); }
  .hero-actions { margin-top: 23px; }
  .paths { padding-block: 37px 58px; }
  .section-heading { margin-bottom: 22px; }
  .path-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
  .card-teaser { grid-template-columns: minmax(0, 1fr) 24%; gap: 12px; min-height: 210px; padding: clamp(19px,2vw,30px); }
  .question { font-size: clamp(19px,1.75vw,26px); }
  .card-art { max-width: 140px; justify-self: end; }
  .about { grid-template-columns: 1fr .85fr; gap: 10%; align-items: center; padding-block: 58px 68px; }
  .contact-inner { grid-template-columns: 1fr .9fr; gap: 13%; padding-block: 52px; }
  html[lang=en] h1 { font-size: clamp(48px,4.5vw,72px); }
  html[lang=en] .hero-inner { grid-template-columns: 1fr 1fr; gap: 5%; }
  html[lang=en] .question { font-size: clamp(17px,1.6vw,23px); }
}
@media (min-width: 1150px) {
  .header-inner { height: 86px; }
  #main-nav a { font-size: 14px; }
  .hero-inner { padding-block: 53px 66px; }
  .eyebrow { font-size: 14px; }
  .hero-actions { margin-top: 25px; }
  .button { min-height: 51px; padding-inline: 25px; }
  .card-teaser { min-height: 210px; }
  .path-summary { font-size: 14px; }
}
@media (max-width: 399px) {
  .wrap { width: 90%; }
  .hero-inner { padding-top: 29px; }
  .hero-actions { gap: 15px; }
  .card-teaser { grid-template-columns: minmax(0, 1fr) 67px; }
  html[lang=en] h1 { font-size: 41px; }
}
@media (max-width: 359px) {
  .header-inner { gap: 7px; }
  .header-actions { gap: 3px; }
  .brand { gap: 5px; }
  .care-symbol { width: 32px; height: 34px; }
  html[lang=en] .brand-name { font-size: 14px; }
  .language { padding-inline: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
