/* ===== header: current page =====
     The link for the page you're on keeps its underline drawn. */
  .primary-nav a[aria-current="page"]::after{ transform:scaleX(1); }

.mobile-nav-links a[aria-current="page"]{ color:var(--c-600); }

/* ===================================================================
     ABOUT PAGE
     All copy on this page is the therapist's own write-up, word for word
     (only the opening dash became a comma, per the site's no-em-dash
     rule). Structure comes entirely from layout and type: the page adds
     no headings or labels of its own beyond the page name and her name
     and title.
     =================================================================== */

  /* ---- shared: the eyebrow-sized diamond that opens a section ---- */
  .about-mark{ width:14px; height:14px; display:block; }

/* ---- hero: her opening line, name and title, portrait placeholder.
         Same "coming into focus" entrance as the home hero, with no
         intro splash on this page so it starts immediately. The hover
         effect on the headline words matches the home headline. ---- */
  .about-hero{ position:relative; background:var(--c-100); padding-top:clamp(56px,8vw,112px); padding-bottom:clamp(72px,9vw,128px); overflow:hidden; }

.about-hero .container{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(40px,6vw,96px); align-items:center; }

.about-eyebrow{ margin-bottom:26px; }

.about-hero h1{ font-size:clamp(1.6rem, 1.1vw + 1.15rem, 2.3rem); line-height:1.22; letter-spacing:-.01em; }

.about-hero h1 .line{ display:block; text-wrap:balance; }

.about-hero .about-text{ margin-top:28px; }

.about-byline{ margin-top:36px; padding-top:24px; border-top:1px solid var(--c-300); max-width:380px; }

.about-name{ font-family:var(--font-display); font-size:1.5rem; font-weight:500; line-height:1.25; color:var(--c-950); }

.about-role{ margin-top:8px; font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--c-600); }

/* portrait placeholder: an arch with an offset outline behind it, the
     brand's person illustration standing in until her photo arrives */
  .about-portrait-wrap{ position:relative; width:100%; max-width:440px; margin-left:auto; margin-right:20px; }

.about-portrait-wrap::before{ content:''; position:absolute; inset:20px -20px -20px 20px; border:1px solid var(--c-300); border-radius:999px 999px var(--radius-lg) var(--radius-lg); }

.about-portrait{ position:relative; z-index:1; aspect-ratio:4/5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:var(--c-200); border:1px solid var(--c-300); border-radius:999px 999px var(--radius-lg) var(--radius-lg); }

.about-portrait img{ width:34%; height:auto; opacity:.2; }

.about-portrait span{ font-size:.6875rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--c-600); }

/* hero entrance: same focus-in as the home hero (see the notes there
     for why the hidden state is scoped with :not(.in-view)) */
  body.js-anim .about-hero [data-reveal]{ transition:opacity .8s var(--ease), filter .9s var(--ease), transform .9s var(--ease); }

body.js-anim .about-hero [data-reveal]:not(.in-view){ opacity:0; filter:blur(10px); transform:translateY(8px); }

body.js-anim .about-hero [data-reveal].in-view{ filter:none; }

body.js-anim .about-hero .about-eyebrow{ transition-delay:0s; }

body.js-anim .about-hero h1 .line:nth-child(1){ transition-delay:.1s; }

body.js-anim .about-hero h1 .line:nth-child(2){ transition-delay:.25s; }

body.js-anim .about-hero .about-byline{ transition-delay:.45s; }

body.js-anim .about-hero .about-portrait-wrap{ transition-delay:.3s; }

/* hover words: the word under the cursor eases to the mid green-grey
     while swelling slightly, then settles back slowly (fine pointers
     only, so a tap never leaves a word stuck) */
  .about-hero h1 .word{ display:inline-block; transition:color .8s var(--ease), transform .8s var(--ease); }

@media (hover:hover) and (pointer:fine){
    .about-hero h1 .word:hover{ color:var(--c-600); transform:scale(1.07); transition-duration:.28s; }
  }

/* ===================================================================
     THE READING SYSTEM. Three roles, each with exactly one look, used
     in exactly one way, on every section of the page:
       page title : the opening line (hero only)
       heading    : Playfair Display, one size. ALWAYS comes first in a
                    section and is always the section's own lead sentence.
       body       : DM Sans, one size. ALWAYS follows a heading.
     Sections differ only by background; every section uses the same
     width, the same spacing, and the same heading-then-body order.
     =================================================================== */
  .about-sec{ background:var(--c-100); padding-block:clamp(56px,7vw,96px); }

.about-sec--tint{ background:var(--c-200); }

.about-sec .container{ display:flex; flex-direction:column; }

.about-h{ max-width:780px; font-family:var(--font-display); font-size:clamp(1.375rem, .7vw + 1.15rem, 1.75rem); line-height:1.4; font-weight:500; color:var(--c-950); text-wrap:pretty; }

.about-text{ max-width:none; font-size:1.125rem; line-height:1.8; color:var(--c-600); }

.about-h + .about-text{ margin-top:20px; }
.about-h--next{ margin-top:clamp(32px,4vw,48px); }

.about-text + .about-text{ margin-top:16px; }

/* a section can hold two heading + body blocks; a hairline separates them */
  .about-block + .about-block{ margin-top:clamp(44px,5.5vw,72px); padding-top:clamp(44px,5.5vw,72px); border-top:1px solid var(--c-300); }

/* lists (approaches; the closing three) share one row style */
  .about-rows{ margin-top:22px; max-width:none; }

.about-rows li{ display:flex; align-items:center; gap:16px; padding:16px 0; border-top:1px solid var(--c-300); font-size:1.125rem; line-height:1.5; color:var(--c-950); transition:transform .5s var(--ease); }

.about-rows li:last-child{ border-bottom:1px solid var(--c-300); }

.about-rows .mark-img{ width:11px; height:11px; flex:none; opacity:.4; transition:opacity .4s var(--ease), transform .5s var(--ease); }

@media (hover:hover) and (pointer:fine){
    .about-rows li:hover{ transform:translateX(6px); }
    .about-rows li:hover .mark-img{ opacity:1; transform:rotate(90deg); }
  }

.about-rows + .about-text{ margin-top:22px; }

/* one continuous reading column (heading once, then paragraphs) */
  .about-flow{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,7vw,128px); align-items:start; }

.about-flow .about-h{ position:sticky; top:112px; max-width:520px; }

.about-body .about-text{ max-width:none; }

.about-body .about-text + .about-text{ margin-top:20px; }

.about-body .about-rows{ margin-top:0; max-width:none; }

/* centred variant (closing "what therapy should feel like" section) */
  .about-flow--center{ display:block; text-align:center; }

.about-flow--center .about-h{ position:static; max-width:none; margin-inline:auto; }

.about-flow--center .about-body{ margin-top:28px; }

.about-flow--center .about-rows{ width:fit-content; max-width:100%; margin-inline:auto; text-align:left; }

.about-flow--center .about-rows li{ display:flex; align-items:baseline; gap:14px; text-align:left; padding-inline:8px; }

.about-flow--center .about-rows .mark-img{ position:relative; top:0; align-self:flex-start; margin-top:.62em; }

/* how I work: two columns on wide screens, stacked on narrow ones */
  .about-cols{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,7vw,128px); align-items:start; }

.about-cols .about-rows{ max-width:none; }

.about-cols .about-col:last-child .about-text{ max-width:none; }

.about-cols .about-col:first-child .about-text{ max-width:none; }

.about-cols .about-col > .about-text + .about-text{ margin-top:20px; }

/* ---- the story behind the logo: the wordmark with its Arabic letters
         called out (live type and hairlines, not an image of her slide) ---- */
  #logo{ scroll-margin-top:96px; }

.logo-fig{ margin:0 auto clamp(32px,4vw,48px); max-width:480px; }

.ls{ position:relative; display:flex; flex-direction:column; align-items:center; }

.ls-ar{ font-family:'Noto Naskh Arabic',serif; font-size:clamp(2.4rem,3vw + 1.2rem,3.4rem); line-height:1.25; color:var(--c-950); }

.ls-cap{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:.9375rem; line-height:1.4; color:var(--c-600); text-align:center; }

.ls-stem{ width:1px; height:20px; background:var(--c-600); opacity:.55; }

.ls-br{ width:100%; height:16px; border:1px solid rgba(74,86,80,.55); }

.ls-br--above{ border-bottom:none; }

.ls-br--below{ border-top:none; }

.ls-word{ display:block; width:100%; height:auto; margin-block:16px; }

.ls-below{ display:grid; grid-template-columns:18.1% 17.3% 34% 30.6%; width:100%; }

.ls-item{ display:flex; flex-direction:column; align-items:center; }

.ls-item--m{ grid-column:2; }

.ls-item--n{ grid-column:4; }

.ls-item .ls-br{ width:100%; }

.ls-item .ls-cap{ width:max(100%,150px); margin-top:10px; }

.ls-item .ls-ar{ margin-top:6px; font-size:clamp(2rem,2vw + 1rem,2.6rem); }

.logo-fig figcaption{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* closing band: the page's last two sentences, then the booking button */
  /* closing invitation: a rounded card inside the last section */
  .about-cta{ margin-top:clamp(48px,6vw,72px); padding:clamp(32px,4.5vw,52px) clamp(24px,5vw,64px); background:var(--c-100); border:1px solid var(--c-300); border-radius:var(--radius-lg); text-align:center; display:flex; flex-direction:column; align-items:center; }

.about-cta h2{ font-size:clamp(1.6rem, 1.2vw + 1.2rem, 2.2rem); line-height:1.25; max-width:none; }

.about-cta p{ margin-top:14px; max-width:none; font-size:1.125rem; line-height:1.7; color:var(--c-600); }

.about-cta .btn{ margin-top:26px; }

@media (max-width:960px){
    .about-hero .container{ grid-template-columns:1fr; }
    .about-cols{ grid-template-columns:1fr; gap:40px; }
    .about-flow{ grid-template-columns:1fr; gap:20px; }
    .about-flow .about-h{ position:static; }
    .about-portrait-wrap{ max-width:380px; margin-inline:0; }
  }

@media (max-width:640px){
    .about-portrait-wrap{ margin-inline:auto; left:-7px; }
    .about-portrait-wrap::before{ inset:14px -14px -14px 14px; }
  }

/* ===== closing CTA band ===== */
  .cta-band{ background:var(--c-950); padding-block:clamp(88px,11vw,140px); text-align:center; }

.cta-band .container{ max-width:none; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }

.cta-band .eyebrow{ margin-bottom:22px; }

.cta-band h2{ color:var(--c-100); font-size:clamp(1.9rem,1.6vw + 1.4rem,2.625rem); line-height:1.2; text-wrap:balance; }

.cta-band h2 em{ font-style:italic; font-weight:500; }

.cta-band p em{ font-family:var(--font-display); font-style:italic; font-weight:500; color:var(--c-100); }

.cta-band p{ margin-top:20px; color:rgba(246,244,241,.68); font-size:1.0625rem; line-height:1.7; max-width:none; }

.cta-band .btn{ margin-top:38px; }

/* ===== responsive ===== */
  @media (max-width:960px){
    .primary-nav{ display:none; }
    .header-actions .btn{ display:none; }
    .nav-toggle{ display:inline-flex; }

    .mobile-nav{ position:fixed; inset:0; z-index:200; display:flex; align-items:flex-start; justify-content:center; padding:104px 20px 32px; opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility 0s linear .4s; }
    .mobile-nav.is-open{ opacity:1; visibility:visible; transition:opacity .4s var(--ease), visibility 0s; }
    .mobile-nav-backdrop{ position:absolute; inset:0; background:rgba(37,48,40,.45); }
    .mobile-nav-panel{ position:relative; z-index:1; width:100%; max-width:420px; max-height:100%; overflow-y:auto; display:flex; flex-direction:column; background:var(--c-100); border-radius:var(--radius-lg); box-shadow:0 32px 64px -24px rgba(37,48,40,.5); padding:26px 26px 30px; transform:translateY(14px) scale(.98); transition:transform .45s var(--ease); }
    .mobile-nav.is-open .mobile-nav-panel{ transform:translateY(0) scale(1); }
    .mobile-nav-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
    .mobile-nav-label{ margin:0; }
    .mobile-nav-close{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; flex:none; border:1px solid var(--c-300); background:none; color:var(--c-950); cursor:pointer; transition:background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
    .mobile-nav-close svg{ width:14px; height:14px; }
    .mobile-nav-close:hover{ background:var(--c-950); border-color:var(--c-950); color:var(--c-100); }
    .mobile-nav-close:active{ transform:scale(.92); }
    .mobile-nav-links{ display:flex; flex-direction:column; }
    .mobile-nav-links a{ padding:15px 2px; font-family:var(--font-body); font-size:1.3125rem; font-weight:500; color:var(--c-950); border-bottom:1px solid var(--c-300); }
    .mobile-nav-links a:first-child{ padding-top:2px; }
    .mobile-nav-links a:last-child{ border-bottom:none; }
    .mobile-nav-cta{ margin-top:26px; width:100%; }
    body.nav-open{ overflow:hidden; }

    .footer-top{ grid-template-columns:1fr 1fr; row-gap:40px; }
  }

@media (max-width:640px){
    .site-header .container{ height:76px; }
    .site-header .logo-img{ height:32px; }
    .mobile-nav{ padding-top:92px; }
    /* buttons hug their labels (both as wide as the longer one, centred) instead of stretching across the screen */
    .footer-top{ grid-template-columns:1fr; }
    .footer-bottom{ flex-direction:column; align-items:flex-start; }
  }

.about-portrait.has-photo{ padding:0; overflow:hidden; }

.about-portrait.has-photo img{ position:absolute; inset:0; width:100%; height:100%; opacity:1; object-fit:cover; }

/* phones: the logo explanation is smaller, with its captions and letters scaled to match */
@media (max-width:640px){
  .logo-fig{ max-width:300px; }
  .ls-ar{ font-size:2rem; }
  .ls-cap{ font-size:.78rem; }
  .ls-item .ls-cap{ width:max(100%,112px); margin-top:8px; }
  .ls-item .ls-ar{ font-size:1.6rem; }
  .ls-stem{ height:14px; }
  .ls-br{ height:12px; }
  .ls-word{ margin-block:12px; }
}