/* =========================================================
   SensoVia Therapy — Editorial Design System (Revision 3)
   Approved palette:
   Primary background   #FFFFFF
   Secondary background #F7F9F8
   Accent               #A7C4C2
   Supporting neutral    #E8ECEB
   Primary text          #333638
   --charcoal-deep is a darker tone of Warm Charcoal, used only for
   true page headings (h1–h4), which were always charcoal.
   --accent-deep is the same teal hue/saturation as the accent, one
   subtle shade darker — used for eyebrow labels, session numbers,
   and other small teal accents that were always teal, never charcoal.
   ========================================================= */

:root{
  --white:#FFFFFF;
  --mist:#F7F9F8;
  --accent:#A7C4C2;
  --accent-rgb:167,196,194;
  --stone:#E8ECEB;
  --charcoal:#333638;
  --charcoal-deep:#202224; /* darker shade of Warm Charcoal, headings only */

  --accent-deep:#79A5A2; /* the same teal hue and saturation, one subtle shade darker for contrast */

  --font-serif:'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:'Jost', 'Helvetica Neue', Arial, sans-serif;

  --container:1240px;
  --gutter:6vw;

  --ease: cubic-bezier(.34,.02,.13,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--white);
  color:var(--charcoal);
  font-family:var(--font-sans);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

::selection{ background:var(--accent); color:var(--white); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ---------- Layout helpers ---------- */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.container-wide{
  max-width:1440px;
  margin:0 auto;
  padding-left:calc(var(--gutter) / 1.4);
  padding-right:calc(var(--gutter) / 1.4);
}

section{ position:relative; }
.section-pad{ padding:min(8.6vw,6.6rem) 0; }
.section-pad-sm{ padding:min(5.6vw,4.3rem) 0; }

.bg-white{ background:var(--white); }
.bg-mist{ background:var(--mist); }
.bg-stone{ background:var(--stone); }
.bg-charcoal{ background:var(--charcoal); color:var(--white); }

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-serif);
  font-weight:500;
  letter-spacing:0.005em;
  color:var(--charcoal-deep);
  margin:0;
}
.eyebrow{
  font-family:var(--font-sans);
  font-size:0.86rem;
  letter-spacing:0.17em;
  text-transform:uppercase;
  color:var(--accent-deep);
  font-weight:600;
  margin:0 0 1.3rem;
  display:block;
}
.display-1{
  font-size:clamp(2.6rem, 5.6vw, 4.7rem);
  line-height:1.08;
  font-weight:500;
}
.display-2{
  font-size:clamp(2.1rem, 4.2vw, 3.4rem);
  line-height:1.14;
  font-weight:500;
}
.display-3{
  font-size:clamp(1.7rem, 2.9vw, 2.4rem);
  line-height:1.22;
  font-weight:500;
}
.subhead{
  font-size:clamp(1.16rem, 1.5vw, 1.4rem);
  line-height:1.76;
  font-weight:400;
  color:var(--charcoal);
  opacity:.92;
}
p{ margin:0 0 1.2em; font-size:1.05rem; }
p:last-child{ margin-bottom:0; }
.lede{ font-size:1.17rem; line-height:1.85; opacity:.92; font-weight:400; }
.small-caps-label{
  font-family:var(--font-sans);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--charcoal);
  opacity:.55;
}

.rule{
  width:52px;
  height:1px;
  background:var(--accent);
  border:0;
  margin:1.6rem 0;
}
.rule-center{ margin-left:auto; margin-right:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:1.05rem 2.3rem;
  font-family:var(--font-sans);
  font-size:.86rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:500;
  border:1px solid var(--charcoal);
  background:transparent;
  color:var(--charcoal);
  cursor:pointer;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--accent);
  color:var(--charcoal-deep);
  border-color:var(--accent);
}
.btn-primary:hover{
  background:var(--charcoal-deep);
  border-color:var(--charcoal-deep);
  color:var(--white);
}
.btn-outline:hover{
  background:var(--charcoal-deep);
  color:var(--white);
}
.btn-ghost{
  border-color:rgba(51,54,56,.35);
  padding:1rem 2.1rem;
}
.btn-ghost:hover{ border-color:var(--charcoal); background:var(--white); }
.btn-on-dark{ border-color:var(--white); color:var(--white); }
.btn-on-dark:hover{ background:var(--accent); border-color:var(--accent); color:var(--charcoal-deep); }

/* A nowrap button wider than its text column cannot be centred by
   text-align: there is no free space to distribute, so it aligns left and
   overflows to the right. Flex centring splits the overflow evenly. */
.cta-center{ display:flex; justify-content:center; }

/* Below this width the long button labels no longer fit the screen. Their
   nowrap minimum width was what pushed whole sections past the viewport
   edge, so let the labels wrap instead of forcing the page wider. */
@media (max-width:640px){
  .btn{ white-space:normal; text-align:center; }
}

.text-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.92rem;
  letter-spacing:.03em;
  color:var(--charcoal-deep);
  border-bottom:1px solid var(--accent);
  padding-bottom:.2rem;
  transition:border-color .35s var(--ease), opacity .35s var(--ease);
}
.text-link:hover{ border-color:var(--charcoal-deep); }
.text-link svg{ width:14px; height:14px; transition:transform .35s var(--ease); }
.text-link:hover svg{ transform:translateX(4px); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:rgba(247,249,248,.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.site-header.is-scrolled{
  border-bottom-color:var(--stone);
  background:rgba(247,249,248,.94);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:.9rem;
  padding-bottom:.9rem;
}
.logo-link{ display:flex; align-items:center; flex-shrink:0; }
.logo-link img{
  height:116px;
  width:auto;
  /* Scaled visually rather than by height: a transform doesn't affect layout,
     so the header keeps its exact height and the nav links stay put. The 22%
     overhang (13px at rest) stays inside the header's .9rem padding. */
  transform-origin:left center;
  transition:height .5s var(--ease);
}
/* Applied only where the header has room to spare. Between 861px and 1039px
   the nav already sits flush against the logo (zero gap), so it keeps its
   existing size there instead of colliding. */
@media (min-width:1040px){ .logo-link img{ transform:scale(1.22); } }
@media (max-width:860px){ .logo-link img{ transform:scale(1.22); } }
.site-header.is-scrolled .logo-link img{ height:56px; }

.main-nav{
  display:flex;
  align-items:center;
  gap:2.6rem;
}
.main-nav a{
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--charcoal-deep);
  position:relative;
  padding-bottom:.35rem;
}
.main-nav a::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:var(--accent-deep);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s var(--ease);
}
.main-nav a:hover::after{ transform:scaleX(1); }
.main-nav a.active::after{ transform:scaleX(1); background:var(--charcoal-deep); }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:34px;
  height:34px;
  background:none;
  border:0;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;
  height:1px;
  background:var(--charcoal-deep);
  width:100%;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 860px){
  .logo-link img{ height:84px; }
  .site-header.is-scrolled .logo-link img{ height:44px; }
  .main-nav{
    position:fixed;
    /* .site-header carries a backdrop-filter, which makes it the containing
       block for its fixed children. `inset:0` therefore sized this overlay to
       the header (113px tall) rather than the screen, and centring 212px of
       links inside it pushed Home and About off the top edge. Viewport units
       size it to the screen regardless of the containing block. */
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    height:100dvh;
    overflow-y:auto;
    background:var(--white);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:2.2rem;
    padding:5rem 1.5rem;
    transform:translateY(-100%);
    opacity:0;
    visibility:hidden;
    transition:transform .5s var(--ease), opacity .5s var(--ease), visibility 0s linear .5s;
    z-index:900;
  }
  .main-nav.is-open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    transition:transform .5s var(--ease), opacity .5s var(--ease), visibility 0s linear 0s;
  }
  .main-nav a{ font-size:1.05rem; }
  .nav-toggle{ display:flex; z-index:950; }
}

/* =========================================================
   HERO (generic, reused with modifiers)
   ========================================================= */
.hero{
  position:relative;
  padding-top:calc(7.8rem + 2.4vw);
  padding-bottom:3vw;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
}
.hero-copy{ max-width:640px; }
.hero-copy .btn{ margin-top:2.2rem; }
.hero-media{
  margin-top:2.8rem;
  width:100%;
  overflow:hidden;
  border-radius:2px;
}
.hero-media img{ width:100%; height:auto; object-fit:cover; }

/* No-crop treatment: preserves the full photograph without cropping
   important body language, faces, or surrounding composition. */
.hero-media.no-crop{ background:var(--mist); display:flex; align-items:center; justify-content:center; }
.hero-media.no-crop img{ height:auto; object-fit:contain; }

@media (min-width: 980px){
  .hero-split{
    padding-top:calc(7.8rem + 1vw);
    padding-bottom:0;
  }
  .hero-split .hero-grid{
    grid-template-columns: 1fr 1fr;
    gap:3.6vw;
    min-height:84vh;
  }
  .hero-split .hero-copy{ padding:3vw 0; }
  .hero-split .hero-media{
    margin-top:0;
    height:84vh;
    align-self:stretch;
  }
  .hero-split .hero-media img{ height:100%; }
  .hero-split .hero-media.no-crop img{ width:100%; height:100%; }
}

/* =========================================================
   MOBILE READING ORDER
   Images follow the copy they illustrate. Scoped to the sections that
   opt in, and to the mobile breakpoint only — desktop is untouched.
   ========================================================= */
@media (max-width:860px){
  /* Most sections need nothing here at all: their markup is authored in the
     mobile reading order (heading, copy, image, CTA), so the single-column
     stack the base styles already produce is correct, in normal flow, with
     DOM order matching what the reader sees.

     Four sections cannot be handled that way. Desktop places the photograph
     in one column and the whole copy block in the other, centred as a unit,
     which requires the copy to be one element there — while the mobile order
     asks for the image to sit *inside* that copy (the two heroes put it
     before the CTA; the two Therapy sections put it mid-section). Dissolving
     the copy wrapper with display:contents lets its children join the
     section's own stack so all the parts can be ordered together. It changes
     no geometry and adds no duplicate, hidden or out-of-flow content. */
  .stack-split > .stack-copy{ display:contents; }
  /* Preserves the width cap the dissolved wrapper used to apply. */
  .stack-split.hero-grid{ --stack-copy-max:640px; }
  .stack-split > .stack-copy > *{ max-width:var(--stack-copy-max, 560px); }
  .stack-split > .stack-media{ order:1; }
  .stack-split > .stack-copy > .after-media{ order:2; }
  /* Promoted children become grid items, which blockifies inline-flex links
     and would stretch them to the full column. Size them to content again. */
  .stack-split > .stack-copy > .btn,
  .stack-split > .stack-copy > .text-link{ justify-self:start; }

  /* The hero grid has no row gap, but .split does, and that gap would open up
     between every promoted child. Zero it and let the copy keep its own
     margins; the photograph carries the spacing either side. */
  .stack-split.split{ row-gap:0; }
  .stack-split.split > .stack-media{ margin:2rem 0; }

  /* Reveal handling. A dissolved wrapper generates no box, so an
     IntersectionObserver never reports it and its `is-visible` class never
     arrives — anything keyed to that class would stay at opacity 0 forever.
     That is what previously blanked the two heroes. So the resting state here
     is always visible, and the fade is additive only: if it never runs, the
     copy still shows. */
  @keyframes copy-rise{
    from{ opacity:0; transform:translateY(28px); }
  }
  /* Heroes are above the fold, so they animate on load. */
  .stack-split.hero-grid > .stack-copy > *{ animation:copy-rise .9s var(--ease); }
  /* Sections further down animate with the photograph beside them, which does
     generate a box and does receive is-visible. */
  .stack-split.split > .stack-media.is-visible ~ .stack-copy > *{
    animation:copy-rise .9s var(--ease);
  }

  .hide-on-mobile{ display:none; }
}

/* My Philosophy is three stacked sections. The markup runs heading, copy,
   photograph — the mobile order — so mobile needs no rule. Desktop restores
   the photograph to its approved position between the two. */
@media (min-width:861px){
  .philosophy-group{ display:flex; flex-direction:column; }
  .philosophy-group > .philosophy-media{ order:1; }
  .philosophy-group > .philosophy-body{ order:2; }
}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1.is-visible{ transition-delay:.1s; }
.reveal-delay-2.is-visible{ transition-delay:.2s; }
.reveal-delay-3.is-visible{ transition-delay:.3s; }

/* =========================================================
   CHOOSE-YOUR-PATH CARDS (Homepage)
   ========================================================= */
.path-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--stone);
  border:1px solid var(--stone);
}
@media (min-width:900px){
  .path-grid{ grid-template-columns:1fr 1fr; gap:2.4rem; background:none; border:none; }
}
.path-card{
  background:var(--white);
  display:flex;
  flex-direction:column;
}
@media (min-width:900px){
  .path-card{ border:1px solid var(--stone); }
}
.path-card-media{ aspect-ratio:4/4.4; overflow:hidden; }
.path-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.path-card:hover .path-card-media img{ transform:scale(1.045); }
.path-card-body{
  padding:2.6rem clamp(1.6rem,3vw,3.2rem) 3rem;
  display:flex;
  flex-direction:column;
  flex:1;
}
.path-card-title{ font-size:clamp(1.6rem,2.1vw,1.95rem); margin-bottom:.6rem; }
.path-card-sub{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:1.18rem;
  line-height:1.4;
  letter-spacing:0.002em;
  color:var(--charcoal-deep);
  margin-bottom:1.5rem;
}
.path-card-body p{ opacity:.92; }
/* The two cards carry different amounts of copy. Letting the last paragraph
   absorb the difference drops both buttons onto the same baseline without
   changing card size or the gap above the button. */
.path-card-body p:last-of-type{ flex:1 1 auto; }
/* This button's nowrap width was the widest thing in the card, so between
   900px and ~1150px it forced its grid column wider than its twin (511px vs
   345px) and pushed the row past the page edge. Allowing the label to wrap
   keeps the two columns equal; it still sits on one line wherever it fits. */
.path-card-body .btn{ align-self:flex-start; margin-top:1.8rem; white-space:normal; }
/* In this band the longer label wraps to two lines while the shorter one
   stays on one, which would leave the buttons unlevel. Reserving two lines
   for both keeps them the same size and on the same baseline. Above 1200px
   both fit on one line and this no longer applies. */
@media (min-width:900px) and (max-width:1199px){
  .path-card-body .btn{ min-height:calc(2 * 1.7em + 2.1rem + 2px); }
}

/* =========================================================
   PHILOSOPHY / IMAGE-TEXT SPLIT
   ========================================================= */
.split{
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  gap:2.4rem;
}
/* Placement above the mobile breakpoint is stated explicitly rather than
   inherited from source order, so each section's markup can be authored in
   its mobile reading order without affecting anything here. Between 861px
   and 979px .split is still a single column, and it stacked image-first, so
   the rule starts at 861px rather than at the two-column breakpoint. */
@media (min-width:861px){
  .split > .split-media{ order:-1; }
}
@media (min-width:980px){
  .split{ grid-template-columns:1.08fr 0.92fr; gap:4.4vw; }
  /* Replaces a direction:rtl flip that depended on the media coming first in
     the DOM. The track widths are mirrored too: rtl rendered the wider
     1.08fr track on the right, so the photograph keeps it when reversed. */
  .split.reverse{ grid-template-columns:0.92fr 1.08fr; }
  .split.reverse > .split-media{ order:1; }
  /* Under rtl the copy sat against the end of its track, so a block narrower
     than the track (max-width:560px) was inset from the left. Stated directly
     now that the flip is gone. */
  .split.reverse > .split-copy{ justify-self:end; }
}
.split-media{ overflow:hidden; }
.split-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.split-media.ratio-tall{ aspect-ratio:4/5; }
.split-media.ratio-wide{ aspect-ratio:5/4; }

/* No-crop / natural-ratio treatment: shows the complete photograph
   at its own aspect ratio so no person or detail is cropped out. */
.split-media.ratio-auto{ aspect-ratio:auto; }
.split-media.ratio-auto img{ height:auto; object-fit:cover; }

.split-copy{ max-width:560px; }
.split-copy p{ opacity:.92; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--mist); }

/* The footer signature is the orchid photograph alone — uninterrupted. */
.footer-signature{
  position:relative;
  height:40vh;
  min-height:260px;
  overflow:hidden;
}
.footer-signature img{
  width:100%; height:100%; object-fit:cover; object-position:75% 35%;
}

.footer-brand{ padding-top:.4rem; margin-bottom:2.6rem; }
.footer-brand img.footer-logo{ height:168px; margin-bottom:1.3rem; }
@media (max-width:600px){
  .footer-brand img.footer-logo{ height:112px; }
}
.brand-promise{
  font-family:var(--font-serif);
  font-size:clamp(1.3rem,2vw,1.7rem);
  font-style:italic;
  color:var(--charcoal-deep);
}
/* Understated attribution under the brand mark — footer-weight type, no new
   colour or scale. */
.founder-line{
  margin-top:.75rem;
  font-size:.82rem;
  letter-spacing:.02em;
  /* One step stronger — it was reading lighter than the tagline (.8) and the
     footer links (.88) directly beside it. Font, size and spacing unchanged. */
  opacity:.85;
}

.footer-main{ padding:2.8rem 0 1.8rem; border-top:1px solid var(--stone); }
.footer-cols{
  display:grid;
  grid-template-columns:1fr;
  gap:2.2rem;
  padding-bottom:2.2rem;
}
@media (min-width:760px){
  .footer-cols{ grid-template-columns: 1.3fr 1fr 1fr; gap:2vw; }
  /* Navigate and Connect used to sit in a band below the logo block, which
     left a tall empty gap. Promoting them into one grid alongside the brand
     lines their tops up with the logo and shortens the footer. `display:
     contents` lets the existing three columns become items of that grid
     without changing the markup. */
  .footer-main > .container-wide{
    display:grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    column-gap:2vw;
    row-gap:1.6rem;
    align-items:start;
  }
  .footer-brand{ grid-column:1; grid-row:1; margin-bottom:0; }
  .footer-cols{ display:contents; }
  .footer-cols > *:nth-child(1){ grid-column:1; grid-row:2; }
  .footer-cols > *:nth-child(2){ grid-column:2; grid-row:1; }
  .footer-cols > *:nth-child(3){ grid-column:3; grid-row:1; }
  .footer-bottom{ grid-column:1 / -1; grid-row:3; margin-top:.6rem; }
}
.footer-tagline{ opacity:.8; font-size:.96rem; max-width:320px; }
.footer-col-title{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--charcoal-deep); opacity:.62; margin-bottom:1.1rem; display:block;
}
.footer-nav a, .footer-contact a{
  display:block;
  font-size:.92rem;
  padding:.35rem 0;
  opacity:.88;
  transition:opacity .3s var(--ease);
}
.footer-nav a:hover, .footer-contact a:hover{ opacity:1; color:var(--accent-deep); }

.footer-social{ display:flex; gap:1rem; margin-top:1.2rem; }
.footer-social a{
  width:34px; height:34px;
  border:1px solid var(--stone);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.footer-social a:hover{ border-color:var(--accent); background:var(--white); }
.footer-social svg{ width:15px; height:15px; }

.footer-bottom{
  border-top:1px solid var(--stone);
  padding-top:1.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2rem;
  align-items:center;
  justify-content:space-between;
  font-size:.78rem;
  opacity:.65;
}
.footer-legal{ display:flex; gap:1.6rem; }
.footer-legal a:hover{ opacity:1; text-decoration:underline; }

/* =========================================================
   SHARED CONTENT COMPONENTS
   ========================================================= */
.section-head{ max-width:680px; margin-bottom:3.1rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* Session cards (Method page) — compact ordered list beside Elena's photograph */
.session-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:2.6rem;
  margin-top:.9rem;
}
@media (min-width:980px){
  /* Cards left, photograph right. Default `stretch` top-aligns both columns
     and gives the media column the card stack's exact height. */
  .session-layout{ grid-template-columns:48fr 52fr; gap:3.2rem; }
}

.session-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.8rem;
}
.session-card{
  background:var(--mist);
  border:1px solid var(--stone);
  padding:1.7rem 1.7rem;
  display:flex;
  align-items:baseline;
  gap:1.1rem;
  transition:background .4s var(--ease);
}
.session-card:hover{ background:var(--white); }
.session-number{
  font-family:var(--font-serif);
  font-size:1.5rem;
  color:var(--accent-deep);
  letter-spacing:.02em;
  flex-shrink:0;
}
.session-title{
  font-family:var(--font-serif);
  font-size:1.34rem;
  line-height:1.32;
}

.session-media{ margin:0; }
.session-media img{ display:block; width:100%; height:auto; }
@media (min-width:980px){
  .session-media{ position:relative; }
  /* Absolute so the photograph contributes no intrinsic height: the row is
     sized by the six cards and the image fills exactly that. */
  .session-media img{
    position:absolute;
    inset:0;
    height:100%;
    object-fit:cover;
    object-position:50% 45%;
  }
}

/* Outcome cards (Method page) — equal pillars, no numbering */
.outcome-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.4rem 2.4rem;
  margin-top:.9rem;
}
@media (min-width:700px){ .outcome-grid{ grid-template-columns:1fr 1fr; } }
.outcome-card{ border-top:2px solid var(--accent); padding-top:1.5rem; }
.outcome-card h3{ font-size:1.4rem; }

/* Criteria list (Method - Is This Right For You) */
.criteria-list{ margin-top:1.8rem; }
.criteria-list li{
  display:flex;
  gap:1rem;
  padding:1.1rem 0;
  border-bottom:1px solid var(--stone);
  font-size:1.03rem;
  opacity:.92;
}
.criteria-list li:first-child{ border-top:1px solid var(--stone); }
.criteria-list li .mark{ color:var(--accent-deep); font-family:var(--font-serif); font-size:1.1rem; flex-shrink:0; }

/* Comparison (OT page) */
.compare-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--stone);
  border:1px solid var(--stone);
  margin-top:.9rem;
}
@media (min-width:760px){ .compare-grid{ grid-template-columns:1fr 1fr; } }
.compare-col{ background:var(--white); padding:2.6rem clamp(1.6rem,3vw,3rem); }
.compare-col.is-featured{
  background:
    linear-gradient(rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.16)),
    var(--white);
  border-top:3px solid var(--accent);
  position:relative;
}
.compare-col h3{
  font-family:var(--font-sans);
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  opacity:.55;
  margin-bottom:1.6rem;
}
.compare-col.is-featured h3{
  opacity:1;
  color:var(--accent-deep);
  font-weight:700;
}
.compare-col ul li{
  padding:.85rem 0;
  border-top:1px solid var(--stone);
  font-size:1rem;
  opacity:.78;
}
.compare-col.is-featured ul li{
  opacity:1;
  color:var(--charcoal-deep);
  font-weight:400;
  border-top-color:rgba(var(--accent-rgb),.4);
}
.compare-col ul li:last-child{ padding-bottom:0; }

/* Category groups (OT — What OT can help with) */
.category-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.4rem 3vw;
  margin-top:.9rem;
}
@media (min-width:700px){ .category-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .category-grid{ grid-template-columns:repeat(3,1fr); } }
.category-block h3{
  font-size:1.2rem;
  margin-bottom:1rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--accent);
}
.category-block li{
  font-size:.97rem;
  opacity:.86;
  padding:.4rem 0;
}
.closing-note{
  margin-top:3rem;
  padding-top:2.2rem;
  border-top:1px solid var(--stone);
  max-width:760px;
  opacity:.86;
  font-size:.99rem;
}

/* Pathway diagram (OT — Your Therapy Journey) */
.pathway{
  margin-top:2.6rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}
.pathway-node{
  padding:1.3rem 2.2rem;
  border:1px solid var(--charcoal-deep);
  font-family:var(--font-serif);
  font-size:1.15rem;
  text-align:center;
  background:var(--white);
  color:var(--charcoal-deep);
}
/* Charcoal read as black against the rest of the system; the start node now
   uses the brand's deep teal. Text goes to charcoal because white on this
   teal is only 2.7:1 — charcoal on it is 5.9:1. */
.pathway-node.is-start{
  background:var(--accent-deep);
  border-color:var(--accent-deep);
  color:var(--charcoal-deep);
}
.pathway-connector{ width:1px; height:2.4rem; background:var(--accent); }
.pathway-branch{
  display:flex;
  gap:2.5rem;
  flex-wrap:wrap;
  justify-content:center;
}
.pathway-branch .pathway-node{ min-width:220px; }
.pathway-branch-wrap{ display:flex; flex-direction:column; align-items:center; }

/* Credentials (About) */
.credentials-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.2rem;
  margin-top:2.2rem;
}
@media (min-width:700px){ .credentials-grid{ grid-template-columns:1fr 1fr; } }
.credential-block{ border-top:1px solid var(--accent); padding-top:1.3rem; }
.credential-block .small-caps-label{ display:block; margin-bottom:.7rem; }
.credential-block p{ font-family:var(--font-serif); font-size:1.22rem; color:var(--charcoal-deep); opacity:.95; }

/* Contact form */
.contact-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:3.4rem;
}
@media (min-width:980px){ .contact-layout{ grid-template-columns: 0.85fr 1.15fr; gap:5.4vw; } }
.contact-info-block{ margin-top:2.4rem; }
.contact-info-block a{ display:block; font-size:1.08rem; color:var(--charcoal-deep); font-weight:400; margin-bottom:.5rem; border-bottom:1px solid transparent; transition:border-color .3s var(--ease); }
.contact-info-block a:hover{ border-color:var(--accent-deep); }

.field{ margin-bottom:1.6rem; }
.field label{
  display:block;
  font-size:.8rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--charcoal-deep);
  opacity:.85;
  margin-bottom:.6rem;
}
.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea{
  width:100%;
  padding:.95rem 1rem;
  border:1px solid var(--stone);
  background:var(--mist);
  font-family:var(--font-sans);
  font-size:1rem;
  font-weight:400;
  color:var(--charcoal-deep);
  border-radius:0;
  appearance:none;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent-deep); background:var(--white);
}
.field-row{ display:grid; grid-template-columns:1fr; gap:1.6rem; }
@media (min-width:600px){ .field-row{ grid-template-columns:1fr 1fr; } }

.radio-group{ display:flex; flex-direction:column; gap:.7rem; }
.radio-option{
  display:flex; align-items:center; gap:.7rem;
  padding:.85rem 1rem;
  border:1px solid var(--stone);
  background:var(--mist);
  cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease);
  font-size:.98rem;
  font-weight:400;
  color:var(--charcoal-deep);
}
.radio-option:hover{ border-color:var(--accent); }
.radio-option input{ accent-color:var(--accent-deep); width:16px; height:16px; }
.radio-option.is-selected{ border-color:var(--accent-deep); background:var(--white); }

.form-note{
  margin-top:1.6rem;
  font-size:.88rem;
  color:var(--charcoal);
  opacity:.72;
}
.confirm-message{
  display:none;
  padding:2rem;
  background:var(--mist);
  border:1px solid var(--stone);
  font-family:var(--font-serif);
  font-size:1.15rem;
  color:var(--charcoal-deep);
  margin-top:1rem;
}
.confirm-message.is-visible{ display:block; }

/* About heading — same family, weight, colour and line-height as .display-1,
   stepped down about 17% at every stop of the clamp. Scoped to this heading
   so the display scale is untouched everywhere else. */
.heading-name{ font-size:clamp(2.15rem, 4.6vw, 3.9rem); }
/* Keeps the name and credentials on one line. Released on the narrowest
   phones, where holding it together would push the heading off the page. */
.name-inline{ white-space:nowrap; }
@media (max-width:400px){
  .name-inline{ white-space:normal; }
}

/* Signature above the contact form. */
.form-signature{ margin-bottom:2.2rem; }

/* Byline (Contact) — the name in the editorial serif, the role in the same
   small-caps treatment already used for labels elsewhere. No new type scale,
   colours or weights. */
.byline{
  font-family:var(--font-serif);
  font-size:1.24rem;
  line-height:1.4;
  color:var(--charcoal-deep);
  margin:0 0 .3rem;
}
.byline-role{
  font-family:var(--font-sans);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--charcoal);
  opacity:.55;
  margin:0 0 1.5rem;
}

/* =========================================================
   FAQ ACCORDION (Method + Occupational Therapy)
   Built on native <details>, so every answer is reachable and
   keyboard operable with no JavaScript involved at all.
   ========================================================= */
.faq-list{ border-top:1px solid var(--stone); }
.faq-item{ border-bottom:1px solid var(--stone); }
.faq-q{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2rem;
  padding:1.65rem 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-sans);
  font-size:1.02rem;
  line-height:1.6;
  color:var(--charcoal-deep);
  transition:opacity .3s var(--ease);
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q:hover{ opacity:.68; }
.faq-q:focus-visible{ outline:1px solid var(--accent-deep); outline-offset:5px; }
.faq-mark{
  flex-shrink:0;
  font-size:1.15rem;
  line-height:1.45;
  color:var(--accent-deep);
}
.faq-mark::before{ content:'+'; }
.faq-item[open] .faq-mark::before{ content:'\2212'; }
.faq-a{ padding-bottom:1.9rem; }
.faq-a p{ font-size:.99rem; line-height:1.85; opacity:.88; margin:0 0 1.05em; }
.faq-a p:last-of-type{ margin-bottom:0; }
.faq-a .text-link{ margin-top:1.2rem; }
/* Opening fade — universal, and cheap enough to never be the thing that breaks. */
.faq-item[open] .faq-a{ animation:faq-reveal .42s var(--ease); }
@keyframes faq-reveal{ from{ opacity:0; transform:translateY(-6px); } }
/* True height animation where the browser supports it; the fade above is what
   everyone else gets. Scoped to the list so nothing global is affected. */
@supports (interpolate-size: allow-keywords){
  .faq-list{ interpolate-size:allow-keywords; }
  .faq-item::details-content{
    block-size:0;
    overflow:hidden;
    transition:block-size .42s var(--ease), content-visibility .42s allow-discrete;
  }
  .faq-item[open]::details-content{ block-size:auto; }
}

/* Footer disclaimer (Method + Contact) — secondary to the footer content
   above it: existing sans-serif, below body scale, warm charcoal muted to the
   same weight the footer already uses for supporting text. */
.footer-disclaimer{
  margin-top:1.7rem;
  font-family:var(--font-sans);
  font-size:.76rem;
  line-height:1.9;
  color:var(--charcoal);
  opacity:.6;
}
@media (min-width:760px){
  .footer-disclaimer{ grid-column:1 / -1; grid-row:4; }
}

/* Utility */
.mt-0{ margin-top:0; }
.text-center{ text-align:center; }
.max-w-sm{ max-width:520px; }
.max-w-md{ max-width:680px; }
.max-w-lg{ max-width:820px; }
.mx-auto{ margin-left:auto; margin-right:auto; }