/* ==========================================================================
   Self-hosted web fonts: replaces fonts.googleapis.com / fonts.gstatic.com.
   Files: /assets/fonts/ (copied unchanged from src/fonts/). Source, licence
   (SIL OFL 1.1) and sizes: src/fonts/README.md. Downloaded 2026-09-24.

   Only the faces the built site actually requests (computed-style sweep of all
   46 pages). Subsets: latin + latin-ext (Cormorant Garamond, Lato), arabic +
   latin (Vazirmatn). unicode-range values are Google's originals, so a browser
   fetches a subset file only when a page contains characters from it.

   Cormorant Garamond (normal) and Vazirmatn are variable fonts: one file per
   subset serves every kept weight, so font-weight is declared as a range and
   the file name carries only the base weight (400).
   Cormorant normal is capped at 600, as Google's CSS was: the drawer CTA
   (.drawer a beats .btn on font-family) asks for 700 and gets 600, never faux bold.
   Block order follows Google's CSS (latin last), which matters where latin and
   latin-ext ranges overlap (U+0304, U+0308, U+0329).
   ========================================================================== */

/* Cormorant Garamond · italic · 300 (static) · latin-ext */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-300-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cormorant Garamond · italic · 300 (static) · latin */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-300-italic-latin.woff2") format("woff2");
  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;
}

/* Cormorant Garamond · normal · 400-600 (variable) · latin-ext */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cormorant Garamond · normal · 400-600 (variable) · latin */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-400-latin.woff2") format("woff2");
  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;
}

/* Lato · normal · 400 (static) · latin-ext */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/lato-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lato · normal · 400 (static) · latin */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/lato-400-latin.woff2") format("woff2");
  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;
}

/* Lato · normal · 700 (static) · latin-ext */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/lato-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lato · normal · 700 (static) · latin */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/lato-700-latin.woff2") format("woff2");
  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;
}

/* Vazirmatn · normal · 400-700 (variable) · arabic */
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/vazirmatn-400-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* Vazirmatn · normal · 400-700 (variable) · latin */
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/vazirmatn-400-latin.woff2") format("woff2");
  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;
}

/* ==========================================================================
   NATALIE MADJIDIAN · V4
   Her palette, her typefaces, and since V4 a ROUND arch: the window of a
   Frankfurt Altbau instead of the pointed Persian arch of V1–V3 (Goran asked
   for fewer Middle Eastern cues; colours and type stay exactly as she approved
   them). Motion and photographs are in the "V4" section at the end.
   The LAYOUT GRAMMAR is borrowed from
   the Mindy theme and rebuilt in her language:
     · two-tone headline (roman line + italic serif line)
     · slashed eyebrow labels
     · dark sections as floating rounded panels, not full-bleed bands
     · section header row: heading left, ghost pill right
     · photo cards with an overlay label and a circular arrow
     · a fact strip where Mindy puts client counts (see the note in that section)
     · a handwritten signature over the portrait
     · pill tabs for the therapy methods
     · a quiet marquee
   Everything Mindy does that German healthcare advertising law forbids —
   patient testimonials, client counts, superlatives — is deliberately absent.
   ========================================================================== */
:root{
  /* grounds */
  --paper:#FCF9F3; --paper-2:#F6EEE2; --sand:#EADCC6; --sand-2:#DFCDB2;
  /* deep grounds */
  --olive:#333C2D; --olive-deep:#262E21; --espresso:#2A211A;
  /* warm accents */
  --rust:#AC5C3A; --rust-deep:#8E4A2C; --walnut:#6E5340;
  --ochre:#C68C3C; --ochre-on-dark:#D9A055; --caramel:#C0895E;
  /* ink — warm browns, never grey */
  --ink:#2B211B; --ink-soft:#6B5A4C; --ink-faint:#7B6A58;
  --line:#E4D8C6; --line-soft:#EFE6D8;
  /* on dark */
  --on-dark:#F4EDE1; --on-dark-soft:#C3BCA9; --on-dark-line:rgba(244,237,225,.18);
  /* semantic */
  --err:#A32F1E; --ok:#2F5233;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --script:"Caveat","Segoe Script",cursive;
  --fa:"Vazirmatn","Noto Naskh Arabic",Tahoma,sans-serif;

  --wide:1280px; --mid:1080px; --measure:62ch;
  --pad:clamp(20px,5vw,64px);
  --gap:clamp(72px,10vw,128px);
  --safe-b:env(safe-area-inset-bottom, 0px);

  /* Mindy's most portable move: generous panel radii. Hers are 30px; at this
     scale 26px sits better under a serif face. */
  --r-panel:26px; --r-card:18px; --r-pill:999px;

  --ease:ease-out; --ease-in:ease-in;
  --dur-1:160ms; --dur-2:240ms; --dur-3:320ms; --dur-out:150ms;
  /* V4 motion: arrivals decelerate like something settling, never bounce */
  --ease-expo:cubic-bezier(.16,1,.3,1); --ease-draw:cubic-bezier(.65,0,.35,1);

  --z-grain:1; --z-content:2; --z-header:50;
  color-scheme:light;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important;}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    animation-delay:0ms !important; transition-duration:.01ms !important; transition-delay:0ms !important;}
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* her linen/stone texture note */
body::before{
  content:""; position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:400; line-height:1.1;
  text-wrap:balance; letter-spacing:-.005em; overflow-wrap:break-word;
  -webkit-hyphens:manual; hyphens:manual;}
/* hyphenation only where a German compound really outruns the column — on a wide
   screen it produced "Metho-den" in a 3rem display face */
@media (max-width:700px){ h1,h2,h3,h4{-webkit-hyphens:auto; hyphens:auto;} }
p{margin:0 0 1.15em; text-wrap:pretty;} p:last-child{margin-bottom:0;}
a,button,summary,[role="button"]{touch-action:manipulation;}
img{max-width:100%; display:block;}

/* ---------- the two-tone headline: Mindy's signature, in Cormorant ---------- */
.d1{font-size:clamp(2.35rem,4.2vw,3.4rem);}   /* measured: the first line fills the
                                                  571px hero column at 56px, so 54px is
                                                  the largest size that keeps it on one line */
.d2{font-size:clamp(2.1rem,4vw,3.3rem);}
.d3{font-size:clamp(1.6rem,2.6vw,2.2rem);}
.d4{font-size:clamp(1.3rem,2vw,1.7rem);}
/* the second line leans: italic, a touch lighter, slightly larger optical size */
.lean{display:block; font-style:italic; font-weight:300; color:var(--rust-deep);}
.band.dark .lean,.band.espresso .lean,.panel .lean{color:var(--ochre-on-dark);}

.lede{font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.3rem,2.2vw,1.85rem); line-height:1.42; color:var(--walnut);}
.prose{max-width:var(--measure); color:var(--ink-soft);}
.small{font-size:.93rem; line-height:1.65; color:var(--ink-soft);}

/* ---------- slashed eyebrow — Mindy frames its labels in slashes ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-size:.685rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; margin-bottom:1.1rem;
  /* rust is 4.20:1 at this size on the tinted ground — under AA for small text.
     rust-deep is 6.1:1 and reads as the same colour at 11px. */
  color:var(--rust-deep);
}
.eyebrow::before,.eyebrow::after{content:"/"; opacity:.5; font-weight:400;}
.band.dark .eyebrow,.panel .eyebrow{color:var(--ochre-on-dark);}

/* ---------- shell ---------- */
.wrap{max-width:var(--wide); margin:0 auto; padding-inline:var(--pad); position:relative; z-index:var(--z-content);}
.band{padding-block:var(--gap); position:relative;}
.band.tight{padding-block:clamp(48px,7vw,84px);}
.band.tint{background:var(--paper-2);}
.band.sand{background:var(--sand);}

/* ---------- header ---------- */
/* Parked ABOVE the viewport, not to the left: a left:-9999px skip link counts as
   real leftward overflow once the page flips to RTL, and made the whole document
   11218px wide in Farsi. */
.skip{position:absolute; top:0; inset-inline-start:0; z-index:200; min-height:44px;
  display:inline-flex; align-items:center; background:var(--espresso); color:var(--on-dark);
  padding:14px 20px; border-radius:0 0 6px 0; font:700 .8rem/1 var(--sans);
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  transform:translateY(-130%); transition:transform var(--dur-1) var(--ease);}
.skip:focus{transform:none;}
.site-head{position:sticky; top:0; z-index:var(--z-header);
  background:rgba(252,249,243,.93); backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);}
.site-head.scrolled{border-bottom-color:var(--line); box-shadow:0 1px 18px rgba(43,33,27,.055);}
.head-in{max-width:var(--wide); margin:0 auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px; height:84px;}
@media (max-width:900px){ .head-in{height:68px;} }
.logo{display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); min-height:44px;}
.logo .lt{display:block; font-family:var(--serif); font-size:1.24rem; line-height:1.05;}
.logo .ls{display:block; font-family:var(--sans); font-size:.55rem; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-faint); margin-top:3px;}
.nav{display:flex; align-items:center; gap:28px;}
.nav a{font-family:var(--sans); font-size:.87rem; color:var(--ink); text-decoration:none;
  position:relative; display:inline-flex; align-items:center; min-height:44px;}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:11px; height:1px;
  background:var(--rust); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-1) var(--ease);}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);}
.nav a[aria-current],.nav .navlink[aria-current]{color:var(--rust);}
@media (max-width:1080px){ .nav{display:none;} }
/* focus-area dropdown — all five services reachable from the header, as in V1 */
.dd{position:relative;}
.dd > .navlink{font-family:var(--sans); font-size:.87rem; color:var(--ink); background:none;
  border:0; padding:0; cursor:pointer; position:relative; display:inline-flex; align-items:center;
  gap:.45em; min-height:44px;}
.dd > .navlink::after{content:""; width:5px; height:5px; margin-top:-3px;
  border-right:1.2px solid var(--caramel); border-bottom:1.2px solid var(--caramel);
  transform:rotate(45deg); transition:transform var(--dur-2) var(--ease);}
.dd.open > .navlink::after{transform:rotate(-135deg); margin-top:1px;}
.dd.open > .navlink{color:var(--rust);}
.dd-menu{
  position:absolute; top:calc(100% + 12px); inset-inline-start:50%;
  transform:translateX(-50%) translateY(-6px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  padding:10px; min-width:300px; box-shadow:0 18px 44px rgba(43,33,27,.12);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2);
}
.dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd.open .dd-menu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.dd-menu a{display:flex; flex-direction:column; justify-content:center; min-height:52px;
  padding:9px 14px; font-size:.9rem; border-radius:8px; text-decoration:none; color:var(--ink);
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);}
.dd-menu a::after{display:none;}
.dd-menu a:hover,.dd-menu a[aria-current="page"]{background:var(--paper-2); color:var(--rust);}
.dd-menu a .dds{display:block; font-size:.74rem; color:var(--ink-faint); margin-top:2px; line-height:1.4;}
.dd.shut .dd-menu,.dd.shut:hover .dd-menu,.dd.shut:focus-within .dd-menu{opacity:0; visibility:hidden;}
[dir="rtl"] .dd-menu{transform:translateX(50%) translateY(-6px);}
[dir="rtl"] .dd:hover .dd-menu,[dir="rtl"] .dd:focus-within .dd-menu,[dir="rtl"] .dd.open .dd-menu{
  transform:translateX(50%) translateY(0);}
.head-right{display:flex; align-items:center; gap:18px;}
.langs{display:flex; align-items:center; gap:2px; font-family:var(--sans);
  font-size:.7rem; font-weight:700; letter-spacing:.11em;}
.langs a{padding:0 10px; color:var(--ink-faint); text-decoration:none;
  font:inherit; border-radius:6px; min-height:44px; min-width:44px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:color var(--dur-1) var(--ease);}
.langs a:hover{color:var(--ink);}
.langs a[aria-current]{color:var(--rust);}
.langs .sep{color:var(--line);}
@media (max-width:1080px){ .langs{display:none;} }
.burger{display:none; background:none; border:0; cursor:pointer; padding:10px; margin-right:-10px;
  min-width:44px; min-height:44px; flex-direction:column; align-items:center; justify-content:center; gap:6px;}
.burger span{display:block; flex:0 0 auto; width:24px; height:1.5px; background:var(--ink);
  transition:transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0; transform:scaleX(.4);}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
@media (max-width:1080px){ .burger{display:inline-flex;} }
/* .head-in scopes it so this wins wherever it sits relative to .btn — a bare
   .head-cta ties with .btn{display:inline-flex} and loses on source order */
@media (max-width:640px){ .head-in .head-cta{display:none;} }

/* ---------- buttons: Mindy's pill + leading arrow, in rust ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.75em; min-height:48px;
  font-family:var(--sans); font-size:.76rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; padding:1.05em 1.9em; border-radius:var(--r-pill);
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);}
.btn:active{transform:translateY(1px);}
.btn .ar{flex:0 0 auto; font-size:1.05em; line-height:1; transition:transform var(--dur-2) var(--ease);}
/* uppercase German labels are long; on a narrow phone they must be allowed to
   wrap rather than push the arrow out of the button */
@media (max-width:480px){
  .btn{flex-wrap:wrap; text-align:center; font-size:.7rem; letter-spacing:.1em; padding:1em 1.3em;}
}
.btn:hover .ar{transform:translateX(3px);}
.btn-primary{background:var(--rust); color:#FFF8F0; border-color:var(--rust);}
.btn-primary:hover{background:var(--rust-deep); border-color:var(--rust-deep);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--sand-2);}
.btn-ghost:hover{border-color:var(--walnut); background:rgba(110,83,64,.06);}
.panel .btn-ghost,.band.dark .btn-ghost{color:var(--on-dark); border-color:var(--on-dark-line);}
.panel .btn-ghost:hover,.band.dark .btn-ghost:hover{background:rgba(244,237,225,.09); border-color:var(--on-dark-soft);}
.btn-sm{min-height:44px; padding:.85em 1.5em; font-size:.7rem;}

/* circular arrow button — Mindy puts these on every card */
.circ{display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%; border:1px solid var(--sand-2);
  color:var(--rust); background:var(--paper); text-decoration:none; font-size:1.1rem;
  flex:0 0 auto;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);}
.circ:hover{background:var(--rust); color:#FFF8F0; border-color:var(--rust); transform:rotate(-45deg);}

/* ---------- section header row: heading left, pill right ---------- */
.sechead{display:flex; align-items:flex-end; justify-content:space-between; gap:28px;
  flex-wrap:wrap; margin-bottom:clamp(34px,4.5vw,56px);}
.sechead .st{max-width:min(100%,560px);}   /* a ch value here would measure against the
                                               wrapper's sans font, not the serif heading */

/* ---------- arch: her threshold motif, used as the photo mask ----------
   A semicircle on top of a portrait frame. Oversized radii are scaled down by
   the browser until they fit, which gives exactly half the frame's width as the
   radius at any size; isolation keeps Safari clipping the scaled photo inside. */
.ph{position:relative; overflow:hidden; background:linear-gradient(150deg,var(--sand) 0%,var(--paper-2) 62%);
  aspect-ratio:4/5; border-radius:var(--r-card); isolation:isolate;
  overflow:clip;}   /* clip, not hidden: a hidden box is a scroll container, and the
                       photo's scroll-linked drift would follow the frame, not the page */
.ph.arch{border-radius:999em 999em 0 0;}
.ph.tall{aspect-ratio:4/5;}
.ph.wide{aspect-ratio:16/11;}
.ph.sq{aspect-ratio:1/1;}
@media (max-width:620px){ .ph.tall{aspect-ratio:5/4;} }   /* a portrait card one-up on a
                                                             phone would be a full screen */
.ph.olive{background:linear-gradient(150deg,#4A5442 0%,var(--olive) 70%);}
.ph.rust{background:linear-gradient(150deg,#D2A277 0%,var(--caramel) 70%);}
.ph::after{
  content:attr(data-photo); position:absolute; inset:auto 14px 14px 14px;
  font-family:var(--sans); font-size:.63rem; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--walnut); opacity:.62;
}
.ph.olive::after{color:var(--on-dark-soft);}
.fcard .ph::after{display:none;}   /* the card carries its own label */

/* ---------- hero ---------- */
.hero{position:relative; padding-block:clamp(48px,7vw,96px) clamp(56px,8vw,110px); overflow:hidden;}
/* the warm equivalent of Mindy's pink/lavender wash */
.hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:150%;
  background:
    radial-gradient(58% 46% at 78% 8%, rgba(234,220,198,.72) 0%, rgba(234,220,198,0) 62%),
    radial-gradient(50% 40% at 8% 4%, rgba(246,238,226,.95) 0%, rgba(246,238,226,0) 66%);
  pointer-events:none;
}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(40px,5vw,64px); align-items:center;
  position:relative; z-index:var(--z-content);}
@media (min-width:980px){ .hero-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.82fr); gap:clamp(48px,6vw,88px);} }
.hero h1{margin-bottom:.5em;}
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:2.3rem;}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:2.6rem; padding-top:1.6rem;
  border-top:1px solid var(--line); font-family:var(--sans); font-size:.755rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); font-variant-numeric:tabular-nums;}
/* the small floating card Mindy parks over its hero image */
.hero-media{position:relative;}
.hero-card{position:absolute; left:-6%; bottom:7%; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-card); padding:16px 20px;
  box-shadow:0 22px 48px rgba(43,33,27,.10); max-width:230px;}
@media (max-width:979px){
  .hero-card{position:static; max-width:none; margin-top:18px;
    display:inline-flex; gap:16px; align-items:baseline;}
  .hero-card .hv{font-size:1.15rem;}
}
@media (max-width:520px){ .hero-card{display:block;} }
.hero-card .hk{font-family:var(--sans); font-size:.6rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:.35rem;}
.hero-card .hv{font-family:var(--serif); font-size:1.32rem; line-height:1.2; color:var(--ink);}

/* ---------- fact strip ----------
   Mindy puts client counts here ("10.000+ Mentally Health Clients"). A German
   psychotherapist may not advertise with those (§11 HWG, Berufsordnung) and she
   has no clients yet — so the device stays and carries practice facts instead. */
.facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px;
  list-style:none; margin:0; padding:0;}
@media (min-width:820px){ .facts{grid-template-columns:repeat(4,minmax(0,1fr));} }
.facts .fk{font-family:var(--serif); font-size:clamp(2rem,3.4vw,2.9rem); line-height:1;
  color:var(--rust); display:block; margin-bottom:.4rem; font-variant-numeric:tabular-nums;}
.facts .fl{font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); display:block;}
.facts .fn{font-size:.9rem; color:var(--ink-soft); margin-top:.5rem; line-height:1.55;}

/* ---------- split with signature ---------- */
.split{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(36px,5vw,64px); align-items:center;}
@media (min-width:900px){ .split{grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(48px,6vw,86px);} }
.split.flip > *:first-child{order:2;}
@media (max-width:899px){ .split.flip > *:first-child{order:0;} }
.sig{font-family:var(--script); font-size:clamp(2.2rem,4vw,3rem); color:var(--rust);
  line-height:1; margin-top:1.6rem; display:block; transform:rotate(-3deg); transform-origin:left;}
.sig-role{font-family:var(--sans); font-size:.63rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint); display:block; margin-top:.9rem;}
/* signature laid over the portrait, the way Mindy does it */
.media-sig{position:relative;}
.media-sig .sig{position:absolute; left:8%; bottom:12%; margin:0;
  color:var(--espresso); text-shadow:0 1px 0 rgba(252,249,243,.5);}
@media (max-width:620px){ .media-sig .sig{position:static; color:var(--rust); margin-top:1.2rem;} }

/* ---------- focus cards: photo + overlay label + circular arrow ---------- */
.cards{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(22px,2.6vw,30px);}
@media (min-width:620px){ .cards.c2,.cards.c3{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:940px){ .cards.c3{grid-template-columns:repeat(3,minmax(0,1fr));} }

/* Five services in one grid instead of two blocks with a seam between them:
   three across, then two across, one row-gap, and every card the SAME HEIGHT.
   A fixed aspect-ratio cannot do that — a 2-up card is wider, so it would also
   be taller. Height is therefore the constant and the ratio gives way. */
.cards.c32{grid-template-columns:minmax(0,1fr);}
.cards.c32 .ph{aspect-ratio:auto; height:auto; min-height:clamp(240px,30vw,400px);}
@media (min-width:620px){
  .cards.c32{grid-template-columns:repeat(6,minmax(0,1fr));}
  .cards.c32 > *{grid-column:span 3;}
  .cards.c32 > *:nth-child(5){grid-column:span 6;}
}
@media (min-width:940px){
  .cards.c32 > *{grid-column:span 2;}
  .cards.c32 > *:nth-child(4),.cards.c32 > *:nth-child(5){grid-column:span 3;}
}
.fcard{display:grid; grid-template-columns:minmax(0,1fr); text-decoration:none; color:inherit; position:relative;}
.fcard > .ph,.fcard > .ov{grid-area:1 / 1;}
/* width:100%: a box with an aspect ratio that is stretched to a tall label
   would otherwise take its WIDTH from that height (height x ratio) and run off
   the phone. With the width fixed, the ratio still sets the card's minimum
   height and the label can only make it taller. */
.fcard .ph{margin-bottom:0; align-self:stretch; width:100%; min-width:0;}
.fcard .ov{
  position:relative; align-self:end; padding:22px 22px 24px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  /* the scrim has to carry white type over ANY photo, including a bright one:
     it stays near-opaque through the whole text block and only fades above it */
  background:linear-gradient(to top, rgba(42,33,26,.93) 0%, rgba(42,33,26,.88) 46%,
                                     rgba(42,33,26,.52) 76%, rgba(42,33,26,0) 100%);
  padding-top:70px;
  border-radius:0 0 var(--r-card) var(--r-card);
}
.fcard .ph.arch + .ov{border-radius:0;}
.fcard .ovt{color:var(--on-dark);}
.fcard .ovt h3{font-size:clamp(1.28rem,2vw,1.55rem); color:var(--on-dark); margin-bottom:.2rem;}
.fcard .ovt span{display:block; font-family:var(--sans); font-size:.68rem; font-weight:700;
  letter-spacing:.16em; line-height:1.3; text-transform:uppercase; color:var(--on-dark-soft);
  /* two lines are reserved so a wrapping subtitle does not lift its card's title
     out of line with the others */
  min-height:2.6em;}
@media (max-width:620px){ .fcard .ovt span{min-height:0;} }
.fcard .circ{width:46px; height:46px; background:rgba(252,249,243,.14); border-color:rgba(244,237,225,.4);
  color:var(--on-dark); backdrop-filter:blur(6px);}
.fcard:hover .circ{background:var(--rust); border-color:var(--rust); color:#FFF8F0; transform:rotate(-45deg);}

/* ---------- quiet marquee ---------- */
.ticker{border-block:1px solid var(--line); padding-block:26px; overflow:hidden;
  background:var(--paper); position:relative;}
.ticker-row{display:flex; width:max-content; animation:slide 46s linear infinite;}
.ticker-row .tk{display:flex; flex:0 0 auto;}
.ticker:hover .ticker-row{animation-play-state:paused;}
/* Natalie keeps the marquee but asked that it hold still for anyone who has told
   their system to reduce motion: no animation, and the loop's second copy goes */
@media (prefers-reduced-motion:reduce){
  .ticker-row{animation:none; width:auto; justify-content:center;}
  .ticker-row .tk{flex-wrap:wrap; justify-content:center; row-gap:10px; flex:1 1 auto; min-width:0;}
  .ticker-row .dup{display:none;}
}
.ticker span{font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.35rem,2.4vw,2rem); color:var(--walnut); padding-inline:.7em;
  display:inline-flex; align-items:center; gap:.9em; white-space:nowrap;}
/* a plain round dot between the words (V3 had a turned drop, closer to a boteh) */
.ticker span::after{content:""; width:7px; height:7px; border-radius:50%;
  background:var(--caramel); opacity:.6; flex:0 0 auto;}
@keyframes slide{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- floating dark panel — Mindy's inset rounded section ---------- */
.panel{background:var(--olive); color:var(--on-dark); border-radius:var(--r-panel);
  padding:clamp(38px,5vw,70px) clamp(24px,4vw,58px); position:relative; overflow:hidden;}
.panel.espresso{background:var(--espresso);}
.panel h2,.panel h3{color:var(--on-dark);}
.panel .prose{color:var(--on-dark-soft);}
.panel::after{ /* a single arch ghost, her motif as texture — placed so the panel's
                  overflow crops it into a sweeping curve, not a stray rectangle */
  content:""; position:absolute; right:-96px; bottom:-190px; width:360px; height:440px;
  border:1px solid var(--on-dark-line); border-radius:180px 180px 0 0; pointer-events:none;
}

/* ---------- method tabs ---------- */
.tabs{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(28px,3.5vw,40px);}
.tab{font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; padding:.9em 1.5em; min-height:44px; border-radius:var(--r-pill);
  border:1px solid var(--sand-2); background:transparent; color:var(--ink-soft); cursor:pointer;
  display:inline-flex; align-items:center;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);}
.tab:hover{border-color:var(--walnut); color:var(--ink);}
.tab[aria-selected="true"]{background:var(--espresso); border-color:var(--espresso); color:var(--on-dark);}
.tabpanel[hidden]{display:none;}
.tabpanel{animation:tab-in .45s var(--ease-expo) both;}
@keyframes tab-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.tabgrid{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,52px); align-items:center;}
@media (min-width:860px){ .tabgrid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);} }

/* ---------- steps ---------- */
.steps{list-style:none; margin:0; padding:0; counter-reset:s;
  display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px,3vw,36px);}
@media (min-width:760px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:1100px){ .steps{grid-template-columns:repeat(4,minmax(0,1fr));} }
.steps > li{counter-increment:s; padding-top:22px; border-top:1px solid var(--line);}
.steps > li::before{content:"0" counter(s); font-family:var(--sans); font-size:.68rem; font-weight:700;
  letter-spacing:.2em; color:var(--rust); display:block; margin-bottom:.9rem; font-variant-numeric:tabular-nums;}
.steps h3{font-size:1.28rem; margin-bottom:.45rem;}
.steps p{font-size:.97rem; line-height:1.65; color:var(--ink-soft); margin:0;}

/* ---------- fee rows ---------- */
.fees{list-style:none; margin:0; padding:0;}
.fees li{display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:18px 0; border-bottom:1px solid var(--on-dark-line);}
.fees li:last-child{border-bottom:0;}
@media (max-width:600px){
  .fees li{flex-direction:column; align-items:flex-start; gap:8px;}
  .fees .fv{align-self:flex-start;}
}
.fees .fl{font-family:var(--serif); font-size:1.24rem; color:var(--on-dark);}
.fees .fd{display:block; font-family:var(--sans); font-size:.87rem; color:var(--on-dark-soft);
  line-height:1.55; margin-top:.25rem; max-width:46ch;}
.fees .fv{font-family:var(--sans); font-size:.95rem; font-weight:700; color:var(--ochre-on-dark);
  white-space:nowrap; font-variant-numeric:tabular-nums;}

/* ---------- journal ---------- */
.jcard{display:block; text-decoration:none; color:inherit;}
.jcard .ph{margin-bottom:1.4rem; transition:transform var(--dur-3) var(--ease);}
.jcard:hover .ph{transform:scale(1.015);}
.jcard .jm{font-family:var(--sans); font-size:.67rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:.6rem; display:block;}
.jcard h3{font-size:clamp(1.3rem,2vw,1.62rem); margin-bottom:.45rem;
  transition:color var(--dur-1) var(--ease);}
.jcard:hover h3{color:var(--rust);}
.jcard p{font-size:.95rem; color:var(--ink-soft); line-height:1.65;}

/* ---------- closing CTA ---------- */
.cta-in{text-align:center; max-width:44ch; margin:0 auto;}
.cta-in .btn{margin-top:1.8rem;}
.cta-note{font-size:.87rem; color:var(--on-dark-soft); margin-top:1.6rem;}

/* ---------- footer ---------- */
.site-foot{background:var(--espresso); color:var(--on-dark-soft); padding-block:clamp(56px,7vw,88px) 34px;}
.foot-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:38px;}
@media (min-width:820px){ .foot-grid{grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));} }
.site-foot .foot-h{font-family:var(--sans); font-size:.66rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--on-dark); margin:0 0 1.1rem; line-height:1.4;}
.site-foot a{color:var(--on-dark-soft); text-decoration:none; font-size:.93rem; line-height:1.65;
  display:inline-flex; align-items:center; min-height:44px;
  transition:color var(--dur-1) var(--ease);}
.foot-bottom a{min-height:44px;}
.site-foot a:hover{color:var(--on-dark);}
.foot-brand p{font-size:.93rem; line-height:1.65; max-width:34ch;}
.foot-list{list-style:none; margin:0; padding:0;}
.foot-bottom{margin-top:44px; padding-top:22px; border-top:1px solid var(--on-dark-line);
  display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between;
  font-size:.8rem; color:var(--on-dark-soft);}

/* ---------- reveal ---------- */
/* only when the script is there to show it again: without JavaScript, or for a
   crawler, nothing is ever hidden */
.js .rv{opacity:0; transform:translateY(12px);
  transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);}
.js .rv.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .js .rv{opacity:1; transform:none; transition:none;} }
@keyframes fadein{from{opacity:0;} to{opacity:1;}}

/* ---------- focus ---------- */
:focus-visible{outline:2px solid var(--rust); outline-offset:3px; border-radius:3px;}
.panel :focus-visible,.site-foot :focus-visible{outline-color:var(--ochre-on-dark);}
main:focus{outline:none;}

/* ---------- drawer ---------- */
.drawer{position:fixed; inset:68px 0 0; z-index:40; background:var(--paper);
  padding:24px var(--pad) calc(32px + var(--safe-b)); overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:4px;
  visibility:hidden; opacity:0; transform:translateY(-10px); pointer-events:none;
  transition:opacity var(--dur-out) var(--ease-in), transform var(--dur-out) var(--ease-in),
             visibility 0s linear var(--dur-out);}
.drawer.open{visibility:visible; opacity:1; transform:none; pointer-events:auto;
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s;}
.drawer > *{opacity:0; transform:translateY(7px);
  transition:opacity var(--dur-out) var(--ease-in), transform var(--dur-out) var(--ease-in);}
.drawer.open > *{opacity:1; transform:none;
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);}
.drawer.open > *:nth-child(1){transition-delay:30ms;}
.drawer.open > *:nth-child(2){transition-delay:60ms;}
.drawer.open > *:nth-child(3){transition-delay:90ms;}
.drawer.open > *:nth-child(4){transition-delay:120ms;}
.drawer.open > *:nth-child(5){transition-delay:150ms;}
.drawer.open > *:nth-child(n+6){transition-delay:180ms;}
/* :not(.btn): the drawer CTA is a button and keeps the button's face and size
   (in V3 it inherited the serif at 1.3rem from this rule) */
.drawer a:not(.btn){font-family:var(--serif); font-size:1.3rem; line-height:1.25; color:var(--ink);
  text-decoration:none; display:flex; align-items:center; min-height:46px; padding:9px 0;
  border-bottom:1px solid var(--line-soft); transition:color var(--dur-1) var(--ease);}
.drawer a:not(.btn):hover{color:var(--rust);}
.dgroup{font-family:var(--sans); font-size:.65rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-faint); margin:16px 0 2px;}
.dgroup:first-of-type{margin-top:4px;}
[dir="rtl"] .dgroup{letter-spacing:normal; text-transform:none;}
.dlangs{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; padding-bottom:18px;
  border-bottom:1px solid var(--line);}
.drawer .dlangs a{font-family:var(--sans); font-size:.75rem; font-weight:700; letter-spacing:.13em;
  border:1px solid var(--line); border-radius:var(--r-pill); padding:9px 18px;
  color:var(--ink-soft); min-height:44px; display:inline-flex; align-items:center; line-height:1;}
.drawer .dlangs a[aria-current]{border-color:var(--rust); color:var(--rust);}
.dcta{margin-top:auto; padding-top:18px; position:sticky; bottom:0;
  background:linear-gradient(to bottom, rgba(252,249,243,0), var(--paper) 42%);}
.dcta .btn{width:100%;}
.drawer:focus{outline:none;}

/* ---------- small screens ---------- */
@media (max-width:600px){
  .hero-meta{gap:8px 18px; font-size:.7rem;}
  .facts{gap:24px 16px;}
  .facts .fn{font-size:.86rem;}
  .tab{padding:.8em 1.1em; font-size:.66rem; letter-spacing:.1em;}
  .sechead{gap:20px; margin-bottom:clamp(28px,6vw,40px);}
  .sechead .btn-sm{width:100%; justify-content:center;}
  .foot-bottom{flex-direction:column; gap:8px;}
  .cta-in .btn{width:100%;}
  .hero-actions .btn{width:100%; justify-content:center;}
}
@media (max-width:420px){
  .fcard .ovt h3{font-size:1.2rem;}
  .fcard .ov{padding:18px 16px 20px; padding-top:56px;}
  .fcard .circ{width:44px; height:44px;}
}

/* ---------- RTL (Farsi) ----------
   Persian has no letter-case, no italic and no small caps; forcing any of them
   is the classic way a "translated" page ends up unreadable. */
[dir="rtl"] body,[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,
[dir="rtl"] .lede,[dir="rtl"] .fees .fl,[dir="rtl"] .ticker span,
[dir="rtl"] .hero-card .hv,[dir="rtl"] .drawer a{
  font-family:var(--fa); letter-spacing:normal;
}
[dir="rtl"] .lean,[dir="rtl"] .lede,[dir="rtl"] .ticker span{font-style:normal; font-weight:400;}
/* components that name --sans or --serif (nav, buttons, labels, eyebrows, FAQ)
   keep their Latin face for Latin words and take Vazirmatn for Persian glyphs,
   instead of whatever the system falls back to */
[dir="rtl"]{--sans:"Lato","Vazirmatn",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif;
  --serif:"Cormorant Garamond","Vazirmatn",Georgia,serif;}
[dir="rtl"] .eyebrow,[dir="rtl"] .btn,[dir="rtl"] .tab,[dir="rtl"] .hero-meta span,
[dir="rtl"] .facts .fl,[dir="rtl"] .fcard .ovt span,[dir="rtl"] .jcard .jm,
[dir="rtl"] .sig-role,[dir="rtl"] .site-foot .foot-h,[dir="rtl"] .steps > li::before,
[dir="rtl"] .hero-card .hk,[dir="rtl"] .skip,[dir="rtl"] .ph::after,[dir="rtl"] .dlangs a{
  letter-spacing:normal; text-transform:none;
}
[dir="rtl"] .ph::after{direction:rtl;}
/* directional ornaments have to turn round with the text */
[dir="rtl"] .btn .ar{transform:scaleX(-1);}
[dir="rtl"] .btn:hover .ar{transform:scaleX(-1) translateX(3px);}
[dir="rtl"] .circ{transform:scaleX(-1);}
[dir="rtl"] .circ:hover,[dir="rtl"] .fcard:hover .circ{transform:scaleX(-1) rotate(-45deg);}
[dir="rtl"] .nav a::after{transform-origin:right;}
[dir="rtl"] .nav a:hover::after,[dir="rtl"] .nav a[aria-current="page"]::after{transform:scaleX(1);}
[dir="rtl"] .hero-card{left:auto; right:-6%;}
[dir="rtl"] .media-sig .sig{left:auto; right:8%;}
[dir="rtl"] .sig{transform:rotate(3deg); transform-origin:right;}
[dir="rtl"] .panel::after{right:auto; left:-96px;}
[dir="rtl"] .ticker-row{animation-name:slide-rtl;}
@keyframes slide-rtl{from{transform:translateX(0);} to{transform:translateX(50%);}}
/* the signature is her actual name — it stays Latin and stays in Caveat */
[dir="rtl"] .sig{font-family:var(--script);}

/* ---------- FAQ disclosure ---------- */
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative;
  min-height:44px; display:flex; align-items:center;
  font-family:var(--serif); font-size:clamp(1.12rem,1.7vw,1.32rem); line-height:1.35;
  transition:color var(--dur-1) var(--ease);}
.faq summary:hover{color:var(--rust);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:""; position:absolute; right:6px; top:50%; width:11px; height:11px;
  margin-top:-7px; border-right:1.5px solid var(--caramel); border-bottom:1.5px solid var(--caramel);
  transform:rotate(45deg); transition:transform var(--dur-2) var(--ease);}
.faq summary:hover::after{border-color:var(--rust);}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-3px;}
.faq .fa{padding:0 40px 24px 0; font-size:.99rem; line-height:1.72; color:var(--ink-soft);
  max-width:64ch;}
.faq details[open] .fa{animation:fadein var(--dur-2) var(--ease) both;}

/* ---------- legal prose and single notes ---------- */
.legal{max-width:var(--measure);}
.legal .prose{max-width:none;}
.legal h2{margin-top:0;}
.notice{background:var(--paper-2); border-left:3px solid var(--caramel);
  padding:20px 24px; margin:0; font-size:.95rem; line-height:1.65; color:var(--ink-soft);
  max-width:var(--measure); border-radius:0 var(--r-card) var(--r-card) 0;}

/* a page with no hero photo keeps its measure instead of stretching edge to edge */
.hero-grid.single{grid-template-columns:minmax(0,1fr);}
@media (min-width:980px){ .hero-grid.single{grid-template-columns:minmax(0,min(46rem,100%));} }

/* Impressum and Datenschutz exist in German only; English and Farsi readers get
   one line in their language saying so (Natalie, E8) */
.langfallback{background:var(--sand); color:var(--ink); font:400 .95rem/1.6 var(--sans);
  padding:14px var(--pad); text-align:center;}
.langfallback p{margin:0 auto; max-width:70ch;}
.langfallback a{color:var(--rust-deep);}
[dir="rtl"].langfallback,div[dir="rtl"],
.site-head[dir="rtl"],.drawer[dir="rtl"],.site-foot[dir="rtl"]{font-family:var(--fa);}

/* ---------- RTL for the blocks added above ---------- */
[dir="rtl"] .faq summary{padding-right:0; padding-left:40px;}
[dir="rtl"] .faq summary::after{right:auto; left:6px;}
[dir="rtl"] .faq .fa{padding-right:0; padding-left:40px;}
[dir="rtl"] .notice{border-left:0; border-right:3px solid var(--caramel);
  border-radius:var(--r-card) 0 0 var(--r-card);}

/* the V2 review bar has been removed — the draft now presents as the site itself */

/* ---------- enquiry form ----------
   For an audience with social anxiety, OCD shame, ADHD executive dysfunction and
   burnout exhaustion, a phone call is the highest-friction action on the page.
   Writing has to be possible, and it has to look easy. */
.formwrap{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-panel);
  padding:clamp(24px,4vw,44px);}
.band.tint .formwrap{background:var(--paper);}
.formnote{background:var(--paper-2); border-left:3px solid var(--caramel); padding:16px 20px;
  margin:0 0 26px; font-size:.9rem; line-height:1.6; color:var(--ink-soft);
  border-radius:0 var(--r-card) var(--r-card) 0;}
[dir="rtl"] .formnote{border-left:0; border-right:3px solid var(--caramel);
  border-radius:var(--r-card) 0 0 var(--r-card);}
.fieldrow{display:grid; grid-template-columns:minmax(0,1fr); gap:0 20px;}
@media (min-width:640px){ .fieldrow{grid-template-columns:repeat(2,minmax(0,1fr));} }
.field{margin-bottom:20px;}
.field > label{display:block; font-family:var(--sans); font-size:.78rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--walnut); margin-bottom:7px;}
[dir="rtl"] .field > label{letter-spacing:normal; text-transform:none;}
.field .req{color:var(--rust); margin-inline-start:.25em;}
.field .help{display:block; font-size:.85rem; color:var(--ink-soft); margin-top:6px; line-height:1.55;}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],
.field select,.field textarea{
  width:100%; min-height:50px; font:400 1rem/1.5 var(--sans); color:var(--ink);
  background:var(--paper-2); border:1px solid var(--sand-2); border-radius:8px;
  padding:12px 14px;
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);}
.field textarea{min-height:120px; resize:vertical;}
.field select{appearance:none; background-image:
  linear-gradient(45deg,transparent 50%,var(--walnut) 50%),
  linear-gradient(135deg,var(--walnut) 50%,transparent 50%);
  background-position:calc(100% - 20px) 23px, calc(100% - 14px) 23px;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-inline-end:44px;}
[dir="rtl"] .field select{background-position:14px 23px, 20px 23px;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--rust); outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--rust) 22%,transparent);}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--rust); outline-offset:1px;}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--err);}
.field .err{display:none; font-size:.85rem; color:var(--err); margin-top:7px; font-weight:700;}
.field.invalid .err{display:block; animation:errin var(--dur-1) var(--ease) both;}
@keyframes errin{from{opacity:0; transform:translateY(-3px);} to{opacity:1; transform:none;}}
.checkrow{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start;
  margin-bottom:22px;}
.checkrow input[type="checkbox"]{width:22px; height:22px; margin-top:2px; accent-color:var(--rust);}
.checkrow label{font-size:.92rem; line-height:1.6; color:var(--ink-soft);}
.checkrow .err{grid-column:2; display:none; font-size:.85rem; color:var(--err); margin-top:7px;
  font-weight:700;}
.checkrow.invalid .err{display:block; animation:errin var(--dur-1) var(--ease) both;}
.checkrow.invalid input[type="checkbox"]{outline:2px solid var(--err); outline-offset:3px;}
.checkrow.invalid label{color:var(--err);}
.formstatus{margin-top:18px; font-size:.92rem; line-height:1.65; min-height:1.65em;}
.formstatus.bad{color:var(--err); font-weight:700;}
.formstatus.ok{color:var(--ok); font-weight:700;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
[dir="rtl"] .hp{left:auto; right:-9999px;}
.formdone{display:none;}
.formdone.on{display:block; animation:fadein var(--dur-3) var(--ease) both;}
form.sent{display:none;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn:disabled:active{transform:none;}

/* ==========================================================================
   V3 · components added for Natalie's review
   ========================================================================== */

/* the launch date sits directly under the buttons, in plain type (Natalie 1.2):
   in small caps at the bottom of the hero it was being missed */
.hero-note{display:flex; align-items:baseline; gap:.6em; margin:1.1rem 0 0;
  font-size:.98rem; line-height:1.55; color:var(--ink);}
.hero-note::before{content:""; flex:0 0 auto; width:8px; height:8px; border-radius:50%;
  background:var(--caramel); transform:translateY(-1px);}

/* three focus cards, one row on a tablet and up, every card the same height */
.cards.c3 .ph{aspect-ratio:auto; height:auto; min-height:clamp(260px,31vw,410px);}
@media (min-width:620px) and (max-width:759px){ .cards.c3{grid-template-columns:minmax(0,1fr);} }
@media (min-width:760px){ .cards.c3{grid-template-columns:repeat(3,minmax(0,1fr));} }

/* the formats under the focus cards: smaller and purely informational (1.6) */
.formats{margin-top:clamp(34px,4.5vw,52px);}
.fmt-label{font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 .4rem;}
.fmt-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:6px 30px;}
@media (min-width:760px){ .fmt-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
.fmt{padding-top:14px; border-top:1px solid var(--line); margin-top:10px;}
.fmt h3{font-size:1.3rem; line-height:1.25; margin:0 0 .25rem;}
.fmt h3 a{color:inherit; text-decoration:none; display:inline-flex; align-items:center; min-height:44px;
  background:linear-gradient(currentColor,currentColor) 0 88%/0 1px no-repeat;
  transition:background-size var(--dur-2) var(--ease), color var(--dur-1) var(--ease);}
.fmt h3 a:hover{color:var(--rust); background-size:100% 1px;}
.fmt p{font-size:.94rem; line-height:1.6; color:var(--ink-soft); margin:0;}
.fmt-link{display:inline-flex; align-items:center; gap:.6em; min-height:44px; margin-top:.3rem;
  font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rust-deep); text-decoration:none;}
.fmt-link:hover{color:var(--rust);}
.fmt-link .ar{transition:transform var(--dur-2) var(--ease);}
.fmt-link:hover .ar{transform:translateX(3px);}
[dir="rtl"] .fmt-label,[dir="rtl"] .fmt-link{letter-spacing:normal; text-transform:none;}
[dir="rtl"] .fmt-link .ar{transform:scaleX(-1);}
[dir="rtl"] .fmt-link:hover .ar{transform:scaleX(-1) translateX(3px);}
[dir="rtl"] .fmt h3 a{background-position:100% 88%;}

/* prices by insurance status: one card each, the figure inside (Natalie 3.1) */
.pcards{display:grid; grid-template-columns:minmax(0,1fr); gap:18px;}
@media (min-width:900px){ .pcards{grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;} }
.pcard{border:1px solid var(--on-dark-line); border-radius:var(--r-card);
  background:rgba(244,237,225,.045); padding:clamp(22px,2.4vw,30px);
  display:flex; flex-direction:column;}
.pcard .pt{font-size:1.38rem; line-height:1.2; color:var(--on-dark); margin:0;}
.pcard .pv{font-family:var(--sans); font-size:1.02rem; font-weight:700; color:var(--ochre-on-dark);
  font-variant-numeric:tabular-nums; margin:.55rem 0 .85rem; text-wrap:balance;}
.pcard .pp{font-size:.93rem; line-height:1.65; color:var(--on-dark-soft); margin:0;}
.plabel{font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--on-dark-soft); margin:clamp(30px,4vw,44px) 0 0;}
.pcards + .plabel + .fees{margin-top:.3rem;}
.pnote{margin-top:1.8rem; font-size:.9rem;}
[dir="rtl"] .plabel{letter-spacing:normal; text-transform:none;}
[dir="rtl"] .pcard .pt{font-family:var(--fa);}

/* the crisis numbers on the contact page are tap-to-call links */
.facts a.fk{text-decoration:none; min-height:44px;}
.facts a.fk:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.12em;}

/* an anchor jump (Termin anfragen -> #anfrage) must not end under the sticky header */
section[id]{scroll-margin-top:60px;}

/* a German compound in an uppercase, letter-spaced label ("BEREITSCHAFTSDIENST")
   is wider than half a 320px screen; let it break instead of pushing the page sideways */
.facts li{min-width:0;}
.facts .fl,.facts .fk{overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto;}

/* ==========================================================================
   V4 · photographs, the round arch in motion, and the rest of the motion
   One idea carries all of it: a window opening onto daylight. The hero frame
   opens and a pencil line traces the arch around it (the one authored moment);
   every photograph after that opens the same way as it comes into view. The
   rest is quiet feedback: lines that draw the steps, tabs that settle, pages
   that cross-fade, a warm light that follows the pointer over dark panels.
   Nothing here hides content without JavaScript (.js gate), and every moving
   part has a reduced-motion path at the end of this section.
   ========================================================================== */

/* ---------- photographs in the frames ---------- */
.ph.has-img{background:var(--sand);}
.ph.has-img::after{display:none;}          /* the photo brief stays in data-photo */
.ph picture,.ph img,.ph .cine{position:absolute; inset:0; width:100%; height:100%;}
.ph img,.ph .cine{display:block; object-fit:cover;}
.ph .cine{opacity:0; transition:opacity .7s ease;}
.ph .cine.on{opacity:1;}

/* the window opens: from a slit in the middle to the whole frame; in an arch
   frame the opening is itself an arch that widens */
.js .ph.has-img:not(.hero-ph) picture{clip-path:inset(0 50%);
  transition:clip-path 1.15s var(--ease-expo) var(--d,0ms);}
.js .ph.arch.has-img:not(.hero-ph) picture{clip-path:inset(0 50% round 999em 999em 0 0);}
.js .ph.has-img.seen picture{clip-path:inset(0);}
.js .ph.arch.has-img.seen picture{clip-path:inset(0 round 999em 999em 0 0);}
.js .ph.has-img:not(.hero-ph) img{transform:scale(1.12);
  transition:transform 1.7s var(--ease-expo) var(--d,0ms);}
.js .ph.has-img.seen img{transform:none;}
/* on a card the photo leans in a little when the card is pointed at */
.fcard .ph.has-img.seen img{transition:transform .9s var(--ease-expo);}
.fcard:hover .ph.has-img.seen img,.fcard:focus-visible .ph.has-img.seen img{transform:scale(1.045);}

/* depth while scrolling: the photo drifts a few percent inside its frame, tied
   to the scroll position (browsers without scroll timelines simply skip it) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .ph.has-img:not(.hero-ph):not(.has-video) picture{animation:drift linear both;
      animation-timeline:view(); animation-range:cover 0% cover 100%;}
  }
}
@keyframes drift{from{transform:translateY(-3.5%) scale(1.08);} to{transform:translateY(3.5%) scale(1.08);}}

/* ---------- the hero: the one authored moment ---------- */
.frame{position:relative;}
.hero-ph{animation:open-arch 1.3s var(--ease-expo) .12s both;}
@keyframes open-arch{from{clip-path:inset(0 50% round 999em 999em 0 0);}
                     to{clip-path:inset(0 round 999em 999em 0 0);}}
.hero-ph img{animation:settle 1.9s var(--ease-expo) .12s both;}
@keyframes settle{from{transform:scale(1.14);} to{transform:none;}}
/* a pencil line traces the arch just outside the frame, open at the bottom
   like a doorway, then stays as a quiet second outline */
.frame-line{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none;}
.frame-line path{fill:none; stroke:var(--caramel); stroke-width:.9; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:0; opacity:.75;
  animation:trace 2s var(--ease-draw) .5s both;}
@keyframes trace{from{stroke-dashoffset:1;} to{stroke-dashoffset:0;}}
[dir="rtl"] .frame-line{transform:scaleX(-1);}   /* it starts on the reading side */

/* the headline comes into focus line by line; the rest follows it down */
.hero h1 .ln{display:block; animation:focus-in 1.05s var(--ease-expo) .08s both;}
.hero h1 .ln + .ln{animation-delay:.24s;}
@keyframes focus-in{from{opacity:0; transform:translateY(.3em); filter:blur(10px);}
                    to{opacity:1; transform:none; filter:none;}}
.hero-copy > :not(h1){animation:rise .9s var(--ease-expo) both;}
.hero-copy > :nth-child(1){animation-delay:.02s;}
.hero-copy > :nth-child(3){animation-delay:.42s;}
.hero-copy > :nth-child(4){animation-delay:.5s;}
.hero-copy > :nth-child(5){animation-delay:.58s;}
.hero-copy > :nth-child(6){animation-delay:.66s;}
.hero-copy > :nth-child(n+7){animation-delay:.74s;}
@keyframes rise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}

/* "Termine ab November": the dot takes two slow breaths once the page has
   settled, then rests (under five seconds, so it never needs a pause control) */
.hero-note::before{animation:breathe 2.4s ease-in-out 1.4s 2;}
@keyframes breathe{
  0%{transform:translateY(-1px) scale(1); box-shadow:0 0 0 0 rgba(192,137,94,.5);}
  45%{transform:translateY(-1px) scale(1.2);}
  100%{transform:translateY(-1px) scale(1); box-shadow:0 0 0 10px rgba(192,137,94,0);}}

/* ---------- the steps draw their own line, one after another ---------- */
.js .steps > li{border-top-color:transparent; position:relative;}
.js .steps > li::after{content:""; position:absolute; top:-1px; inset-inline:0; height:1px;
  background:var(--sand-2); transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--ease-expo);}
[dir="rtl"] .steps > li::after{transform-origin:right;}
.js .steps > li::before{opacity:0; transform:translateY(6px);
  transition:opacity .6s ease, transform .9s var(--ease-expo);}
.js .steps.in li::after,.js .steps.in li::before{transform:none; opacity:1;}
.js .steps > li:nth-child(2)::after,.js .steps > li:nth-child(2)::before{transition-delay:.14s;}
.js .steps > li:nth-child(3)::after,.js .steps > li:nth-child(3)::before{transition-delay:.28s;}
.js .steps > li:nth-child(4)::after,.js .steps > li:nth-child(4)::before{transition-delay:.42s;}
.js .steps > li:nth-child(n+5)::after,.js .steps > li:nth-child(n+5)::before{transition-delay:.56s;}

/* ---------- warm light that follows the pointer over a dark panel ---------- */
.panel > *{position:relative; z-index:1;}
.panel::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),
             rgba(217,160,85,.13), rgba(217,160,85,0) 70%);
  opacity:0; transition:opacity .6s ease;}
.panel.lit::before{opacity:1;}

/* ---------- the marquee rests when it is off screen, or when tapped ---------- */
.ticker.off .ticker-row,.ticker.paused .ticker-row{animation-play-state:paused;}

/* ---------- pages cross-fade into each other; the header stays put ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto;}
}
.site-head{view-transition-name:site-head;}
::view-transition-old(root){animation:vt-out .26s cubic-bezier(.4,0,1,1) both;}
::view-transition-new(root){animation:vt-in .55s var(--ease-expo) both;}
@keyframes vt-out{to{opacity:0;}}
@keyframes vt-in{from{opacity:0; transform:translateY(10px);}}

/* ---------- browser surfaces in her palette ---------- */
::selection{background:color-mix(in srgb,var(--rust) 24%,var(--paper)); color:var(--ink);}
.panel ::selection,.site-foot ::selection{background:color-mix(in srgb,var(--ochre-on-dark) 38%,var(--espresso));
  color:var(--on-dark);}
html{scrollbar-color:var(--sand-2) var(--paper-2); accent-color:var(--rust);}
input,textarea{caret-color:var(--rust);}

/* ---------- reduced motion: everything in place, nothing travels ---------- */
@media (prefers-reduced-motion:reduce){
  .js .ph.has-img picture,.js .ph.arch.has-img picture,.ph.has-img picture{clip-path:none; transition:none; animation:none;}
  .js .ph.has-img img,.hero-ph img{transform:none; transition:none; animation:none;}
  .hero-ph,.hero h1 .ln,.hero-copy > *,.frame-line path,.hero-note::before{animation:none;}
  .js .steps > li::after,.js .steps > li::before{transform:none; opacity:1; transition:none;}
  .panel::before{display:none;}
  .ph .cine{display:none;}
}

/* a long compound or address breaks inside its column on a 320 px phone
   (Impressum, fact lists) instead of running past it */
.prose,.legal,.faq .fa,.facts .fn,main li{overflow-wrap:break-word;}

/* ==========================================================================
   V4.1 · Farsi rewrite (native speaker's text, 30 Sep 2026): lists inside
   running text, long steps on the process page, teasers under blog cards,
   and a crisis line in the footer that is not a phone number
   ========================================================================== */
.flist{list-style:disc; margin:0 0 1.15em; padding-inline-start:1.25em; max-width:var(--measure); color:var(--ink-soft);}
.flist li{margin:.4em 0; line-height:1.7;}
.flist li::marker{color:var(--caramel);}
.panel .flist{color:var(--on-dark-soft);}
.steps.long{grid-template-columns:minmax(0,1fr);}
@media (min-width:860px){ .steps.long{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,4vw,52px) clamp(32px,4vw,64px);} }
.steps.long > li p + p,.steps.long > li p + .flist,.steps.long > li .flist + p{margin-top:.75em;}
.steps.long .flist{font-size:.97rem; margin-bottom:0;}
.steps-after{margin-top:clamp(30px,4vw,46px); max-width:var(--measure);}
.fcell{display:flex; flex-direction:column; gap:16px; min-width:0;}
.fcard-d p{font-size:.95rem; line-height:1.7; color:var(--ink-soft); margin:0 0 .7em; max-width:var(--measure);}
.fcard-d p:last-child{margin-bottom:0;}
.foot-list .foot-plain{display:inline-flex; align-items:center; min-height:44px;
  font-size:.93rem; line-height:1.65; color:var(--on-dark-soft);}