/* ===================================================================
     AMAAN PSYCHOTHERAPY - design tokens
     Copy this whole block into About / Services / Blog / Contact Us so
     every page shares one system. Only these values may be used:
     type  : Playfair Display (headings), DM Sans (everything else)
     color : #253028 #2A3931 #4A5650 #DDD9D4 #EBE7E2 #F6F4F1
     =================================================================== */
  :root{
    --c-950:#253028; /* near-black anchor - headings, primary buttons, footer CTA band */
    --c-900:#2A3931; /* dark - footer ground */
    --c-600:#4A5650; /* mid - secondary text, icon strokes, borders on dark */
    --c-300:#DDD9D4; /* line - borders, dividers, card grounds */
    --c-200:#EBE7E2; /* cream - alternating section grounds */
    --c-100:#F6F4F1; /* near-white - page ground */
    --font-display:'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:'DM Sans', -apple-system, 'Segoe UI', sans-serif;
    --container:2560px;
    --pad-inline:clamp(24px, 5vw, 128px);
    --ease:cubic-bezier(.16,.8,.36,1);
    --radius-pill:999px; /* buttons, chips */
    --radius-lg:28px;    /* cards, header, photo frames */
    --radius-md:18px;    /* smaller blocks */
  }

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{ margin:0; background:var(--c-100); color:var(--c-950); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }

h1,h2,h3{ font-family:var(--font-display); font-weight:500; margin:0; color:var(--c-950); }

p{ margin:0; }

ul{ margin:0; padding:0; list-style:none; }

a{ color:inherit; text-decoration:none; }

button{ font-family:inherit; }

img,svg{ display:block; max-width:100%; }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--pad-inline); }

.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===== overall scale =====
     The whole page (not the intro splash) is set at 80% so type, spacing
     and controls all read smaller together; the container is
     effectively full width, with generous side padding, so wide desktop
     screens are used edge to edge. */
  .site-header, main, .site-footer, .mobile-nav{ zoom:.8; }

/* ===== eyebrow (recurring diamond-mark label) ===== */
  .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--c-600); }

.eyebrow .mark-img{ width:13px; height:13px; flex:none; display:block; }

.eyebrow .eb-ar{ font-family:'Noto Naskh Arabic',serif; font-size:1.55em; font-weight:500; letter-spacing:0; text-transform:none; line-height:1; display:inline-block; unicode-bidi:isolate; margin-inline:2px; position:relative; top:-1px; }

.eyebrow .eb-dot{ opacity:.6; margin-inline:0; }

.eyebrow.on-dark{ color:rgba(246,244,241,.62); }

/* ===== buttons (shared system) - soft full-pill capsules ===== */
  .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:8px 8px 8px 26px; font-family:var(--font-body); font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border-radius:var(--radius-pill); border:1px solid transparent; cursor:pointer; transition:transform .45s var(--ease), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); white-space:nowrap; }

.btn-icon{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; flex:none; transition:transform .45s var(--ease), background-color .35s var(--ease), color .35s var(--ease); }

.btn-icon svg{ width:13px; height:13px; transition:transform .35s var(--ease); }

.btn-primary{ background:var(--c-950); color:var(--c-100); }

.btn-primary .btn-icon{ background:var(--c-100); color:var(--c-950); }

.btn-primary:hover{ background:var(--c-900); transform:translateY(-2px) scale(1.015); box-shadow:0 14px 28px -14px rgba(37,48,40,.45); }

.btn-secondary{ background:transparent; color:var(--c-950); border-color:var(--c-950); padding-left:26px; }

.btn-secondary .btn-icon{ background:var(--c-950); color:var(--c-100); }

.btn-secondary:hover{ background:var(--c-950); color:var(--c-100); transform:translateY(-2px); }

.btn-secondary:hover .btn-icon{ background:var(--c-100); color:var(--c-950); }

.btn-inverse{ background:var(--c-100); color:var(--c-950); }

.btn-inverse .btn-icon{ background:var(--c-950); color:var(--c-100); }

.btn-inverse:hover{ background:var(--c-300); transform:translateY(-2px) scale(1.015); box-shadow:0 14px 28px -14px rgba(0,0,0,.35); }

.btn:hover .btn-icon svg{ transform:translate(2px,-2px); }

/* a down-pointing arrow (e.g. "Learn More") nudges down on hover,
     not up and to the right like the ↗ arrows */
  .btn-down:hover .btn-icon svg{ transform:translateY(3px); }

.btn:active{ transform:translateY(0) scale(.99); }

.btn:focus-visible{ outline:2px solid var(--c-600); outline-offset:3px; }

/* ===== links: underline draws in on hover (shared system) ===== */
  .link-draw{ position:relative; display:inline-flex; align-items:center; gap:6px; font-weight:500; }

.link-draw::after{ content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }

.link-draw:hover::after, .link-draw:focus-visible::after{ transform:scaleX(1); }

.link-draw svg{ width:13px; height:13px; transition:transform .35s var(--ease); }

.link-draw:hover svg{ transform:translateX(3px); }

/* ===== scroll reveal (shared system) =====
     Visible by default - a static preview (the canvas editor, a no-JS
     fallback) must always show real content. The hidden starting state
     only applies once body.js-anim confirms this is a live page render
     (set in componentDidMount, below), so the fade/rise is something
     that HAPPENS to already-visible content, never what makes it appear. */
  [data-reveal]{ opacity:1; transform:none; }

body.js-anim [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }

body.js-anim [data-reveal].in-view{ opacity:1; transform:translateY(0); }

[data-reveal="stagger"] > *{ opacity:1; transform:none; }

body.js-anim [data-reveal="stagger"] > *{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }

body.js-anim [data-reveal="stagger"].in-view > *{ opacity:1; transform:translateY(0); }

[data-reveal="stagger"] > *:nth-child(1){ transition-delay:.05s; }

[data-reveal="stagger"] > *:nth-child(2){ transition-delay:.16s; }

[data-reveal="stagger"] > *:nth-child(3){ transition-delay:.27s; }

[data-reveal="stagger"] > *:nth-child(4){ transition-delay:.38s; }

/* ===== header ===== */
  .site-header{ position:sticky; top:0; z-index:60; background:rgba(246,244,241,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-radius:0 0 var(--radius-lg) var(--radius-lg); box-shadow:0 16px 32px -26px rgba(37,48,40,.35); }

.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:88px; gap:24px; }

.logo{ display:inline-flex; align-items:center; }

.logo-img{ height:38px; width:auto; display:block; }

.primary-nav{ display:flex; align-items:center; gap:40px; }

.primary-nav ul{ display:flex; align-items:center; gap:36px; }

.primary-nav a:not(.btn){ font-size:1.0625rem; font-weight:500; }

.header-actions{ display:flex; align-items:center; gap:22px; }

.header-actions .btn{ padding:6px 6px 6px 22px; font-size:.875rem; }

.header-actions .btn-icon{ width:30px; height:30px; }

/* Header "Book a Consultation": the dark fill sweeps across the pill
     from left to right on hover instead of appearing all at once, and
     drains back from right to left when the cursor leaves. The fill is
     a ::before layer scaled from 0 to full width, anchored to the left
     edge in both states - so growing pushes its right edge outward, and
     shrinking pulls that same edge back toward the left. The pill itself
     stays transparent (overriding the shared secondary-button hover
     background), the label and arrow circle flip colors a beat later so
     they change as the fill reaches them, and overflow:hidden keeps the
     sweep inside the rounded ends. */
  .header-actions .btn-secondary{ overflow:hidden; isolation:isolate; }

.header-actions .btn-secondary::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--c-950); transform:scaleX(0); transform-origin:left center; transition:transform .6s var(--ease); }

.header-actions .btn-secondary:hover{ background:transparent; transition-delay:0s, 0s, .12s, 0s, 0s; }

.header-actions .btn-secondary:hover::before{ transform:scaleX(1); }

.header-actions .btn-secondary:hover .btn-icon{ transition:transform .45s var(--ease), background-color .3s var(--ease) .24s, color .3s var(--ease) .24s; }

.nav-toggle{ display:none; width:40px; height:40px; align-items:center; justify-content:center; background:none; border:none; padding:0; cursor:pointer; }

.nav-toggle-bars{ position:relative; width:20px; height:14px; }

.nav-toggle-bars span{ position:absolute; left:0; right:0; height:1.5px; background:var(--c-950); transition:transform .4s var(--ease), opacity .3s var(--ease), top .4s var(--ease); }

.nav-toggle-bars span:nth-child(1){ top:0; }

.nav-toggle-bars span:nth-child(2){ top:6px; }

.nav-toggle-bars span:nth-child(3){ top:12px; }

.nav-toggle.is-open .nav-toggle-bars span:nth-child(1){ top:6px; transform:rotate(45deg); }

.nav-toggle.is-open .nav-toggle-bars span:nth-child(2){ opacity:0; }

.nav-toggle.is-open .nav-toggle-bars span:nth-child(3){ top:6px; transform:rotate(-45deg); }

/* ---- mobile-nav: a floating overlay panel rather than a dropdown
         strip - dimmed backdrop behind, a rounded card in front holding
         a small eyebrow "Menu" label (the same diamond-mark device used
         everywhere else on the page) with an explicit close button,
         larger well-spaced links, and the primary CTA anchored full-
         width at the bottom as the deliberate way out. Hidden outright
         on desktop; see the max-width:960px block for how it opens. ---- */
  .mobile-nav{ display:none; }

/* ===== footer ===== */
  .site-footer{ background:var(--c-900); color:var(--c-100); padding-top:clamp(64px,7vw,88px); }

.footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:48px; padding-bottom:56px; border-bottom:1px solid rgba(246,244,241,.14); }

.site-footer .logo-img{ height:34px; }

.footer-blurb{ margin-top:18px; font-size:.9375rem; line-height:1.65; color:rgba(246,244,241,.62); max-width:280px; }

.footer-name{ margin-top:14px; font-size:.9375rem; line-height:1.65; color:rgba(246,244,241,.62); max-width:340px; }

.footer-name .ar{ font-family:'Noto Naskh Arabic',serif; font-size:1.25em; line-height:1; color:rgba(246,244,241,.88); }

.footer-story{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-size:.8125rem; letter-spacing:.03em; color:rgba(246,244,241,.88); }

.footer-story svg{ width:14px; height:14px; }

.footer-heading{ font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(246,244,241,.5); margin-bottom:20px; }

.footer-links li{ margin-bottom:13px; }

.footer-links a{ font-size:.9375rem; color:rgba(246,244,241,.88); }

.footer-contact p{ font-size:.9375rem; color:rgba(246,244,241,.88); line-height:1.7; margin-bottom:14px; }

.footer-social{ display:flex; gap:16px; margin-top:6px; }

.footer-social a{ font-size:.8125rem; letter-spacing:.03em; color:rgba(246,244,241,.88); }

.footer-notice{ padding-top:28px; }

.footer-notice p{ font-size:.875rem; line-height:1.7; color:rgba(246,244,241,.7); max-width:none; text-wrap:pretty; }

.footer-notice strong{ font-weight:600; color:rgba(246,244,241,.92); }

.footer-legal{ display:flex; gap:24px; flex-wrap:wrap; }

.footer-legal a{ font-size:.75rem; letter-spacing:.03em; color:rgba(246,244,241,.7); }

.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:28px; flex-wrap:wrap; }

.footer-bottom p{ font-size:.75rem; color:rgba(246,244,241,.5); display:inline-flex; align-items:center; gap:10px; }

.footer-bottom .mark-img{ width:9px; height:9px; opacity:.5; }

/* ===== reduced motion =====
     Content already defaults to visible (see above), so reduced-motion
     only needs to neutralise the js-anim loops/transitions once they're
     running - near-instant instead of removed outright. */
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  }