/* Maria van Helbergen · one stylesheet, mobile-first.
   Base rules = phone. Everything larger is added in min-width blocks at 640 / 900 / 1200. */

:root{--cream:#F6EFE3;--paper:#FBF6EC;--ink:#29241F;--body:#473F37;--muted:#6B6157;--line:#E2D6C2;--terra:#9A4326;--terra-hover:#BB5A3C;--sand:#EFE3D0;}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--ink);font-family:'Karla',sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
h1,h2,h3,.serif{font-family:'Spectral',serif;font-weight:500;line-height:1.08;letter-spacing:-0.01em;text-wrap:pretty}
p{text-wrap:wrap}
a{color:inherit;text-decoration:none}
a:hover{color:var(--terra)}
.wrap,.narrow{width:100%;margin:0 auto;padding:0 20px}
.wrap{max-width:1160px}
.narrow{max-width:760px}
.eyebrow,.label{font-size:15px;font-weight:700;color:var(--terra);letter-spacing:normal;text-transform:none}
.media{overflow:hidden;background:var(--sand);border:1px solid var(--line)}
.media picture{display:block;width:100%;height:100%}
.media img{width:100%;height:100%;object-fit:cover}
section{padding:44px 0}
.tint{background:var(--paper)}
.tint + .tint{padding-top:0}
/* two adjacent sections on the page background read as one zone: drop the doubled gap */
.zone + .zone{padding-top:0}
.divider{height:1px;background:var(--line)}
.sec-head{margin-bottom:14px}
.sec-title{font-size:26px;font-weight:400}
.lead-quote{font-size:17px;color:var(--body)}
.lead-quote em{font-style:italic;color:var(--terra)}

/* BUTTONS: solid terracotta by default, .ghost is the outlined variant */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:13px 22px;
  font-family:'Karla',sans-serif;font-weight:700;font-size:16px;letter-spacing:.01em;border:1px solid var(--terra);
  border-radius:2px;background:var(--terra);color:#fff;transition:background .2s,border-color .2s,color .2s,transform .2s}
.btn:hover{background:var(--terra-hover);border-color:var(--terra-hover);color:#fff;transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* NAV: sticky, Book always visible in the bar, four links behind the hamburger */
header.nav{position:sticky;top:0;z-index:30;background:rgba(246,239,227,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:12px;min-height:60px}
.brand{display:inline-flex;align-items:center;gap:.26em;min-height:44px;font-family:'Spectral',serif;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.15;margin-right:auto}
.brand:hover{color:var(--ink)}
.brand span{color:var(--terra)}
.nav-right{display:flex;align-items:center;gap:4px}
.nav-book{min-height:44px;padding:11px 16px;font-size:14px}
.nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-right:-10px;border:0;background:none;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;margin:0 auto;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
header.nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.nav.open .nav-toggle span:nth-child(2){opacity:0}
header.nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-links{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;background:var(--cream);
  border-bottom:1px solid var(--line);box-shadow:0 20px 36px rgba(24,21,17,.1);padding:6px 0 10px}
header.nav.open .nav-links{display:flex}
.nav-links a{display:flex;align-items:center;min-height:48px;padding:12px 20px;font-size:17px;color:var(--ink)}
.nav-links a:hover{background:rgba(154,67,38,.06);color:var(--ink)}
.nav-links a.active{color:var(--terra);font-weight:700}

/* HOME HERO: copy, portrait, then a full-width primary action */
.hero{padding:26px 0 40px}
.hero-grid{display:grid}
.hero h1{margin-top:10px;font-size:36px;font-weight:400}
.hero h1 em{font-style:italic;color:var(--terra)}
.hero .lede{margin-top:16px;font-size:17px;line-height:1.55;color:var(--muted)}
.lede-more{display:none}
.hero-img{width:100%;aspect-ratio:4/5;margin-top:24px}
.hero-cta{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.hero-cta .btn{width:100%}
.hero-note{font-size:14px;color:var(--muted)}
.hero-meta{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.hero-meta p{font-size:14px;line-height:1.7;color:var(--muted)}
.hero-meta strong{color:var(--ink);font-weight:700}
/* phone only: trim the empty wall above her head and shorten the block, while
   keeping her arms resting on the chair in frame (no awkward mid-arm cut).
   Desktop/tablet (>=640px) keep the original 4:5, centred. */
@media(max-width:639.98px){
  .hero-img{aspect-ratio:5/6}
  .hero-img img{object-position:center 76%}
}
/* desktop/tablet: same 4:5 frame, but shift the crop down so there is less wall
   above her head and her arms rest fully in frame. */
@media(min-width:640px){
  .hero-img img{object-position:center 82%}
}

/* ABOUT */
.about-grid{display:grid;gap:24px;margin-top:24px}
.portrait{width:100%;aspect-ratio:3/4}
/* zinduka.jpg is landscape and its column is tall, so the crop takes from the sides:
   anchor it at 22% where Maria is, rather than at the centre */
.about-grid .portrait img{object-position:38% 30%}
.about-body p{font-size:17px;color:var(--body)}
.about-body p + p{margin-top:18px}
.about-tail{font-size:17px;color:var(--body)}

/* TEASER CARDS */
.teasers{display:grid;gap:1px;margin-top:32px;background:var(--line);border:1px solid var(--line)}
.teaser{display:flex;flex-direction:column;gap:10px;padding:24px 20px;background:var(--cream);transition:background .2s}
.teaser:hover{background:var(--paper);color:inherit}
.teaser h3{font-size:24px;font-weight:500}
.teaser p{font-size:16px;color:var(--muted)}
.teaser .go{margin-top:4px;font-size:14px;font-weight:700;color:var(--terra)}

/* HOME layout - portrait phones (<640px): Book + note drop to the bottom of the
   hero, with the two boxes below them. From 640px up the boxes sit in the About
   block instead (original desktop/tablet layout). The two teaser sets are the
   same markup duplicated; only one is shown at a time. */
.hero-cta{order:98}
.hero-teasers{order:99;margin-top:26px}
.about-teasers{display:none}
@media(min-width:640px){
  .hero-teasers{display:none}
  .about-teasers{display:grid}
}

/* SUB-PAGE HERO */
.page-hero{padding:30px 0 34px;text-align:center;border-bottom:1px solid var(--line)}
.page-hero .eyebrow{display:inline-block;margin-bottom:12px}
.page-hero h1{max-width:20ch;margin:0 auto;font-size:32px;font-weight:400}
.page-hero h1 em{font-style:italic;color:var(--terra)}
.page-hero .lede{max-width:52ch;margin:16px auto 0;font-size:17px;line-height:1.55;color:var(--muted)}

/* COUNSELLING: challenges. On phones a two-column grid, ordered so each row pairs
   two terms of equal height; tablet and up gets chips. */
.welcome-line{max-width:52ch;margin-top:20px;font-size:17px;line-height:1.55;color:var(--body)}
.welcome-line .lead-in{display:block;margin-bottom:8px}
.challenges{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;margin-top:20px;list-style:none}
.challenges li{position:relative;padding-left:13px;font-size:14.5px;line-height:1.35;color:var(--body)}
.challenges li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:1px;background:var(--terra)}

/* COUNSELLING: areas of special focus */
.offer{display:grid;gap:10px;padding:26px 0;border-top:1px solid var(--line)}
.offer:last-child{border-bottom:1px solid var(--line)}
.offer h3{font-size:24px;font-weight:500}
.offer .who{margin-top:6px;font-size:14px;font-weight:700;color:var(--terra)}
.offer p{font-size:16.5px;color:var(--body)}

/* COUNSELLING: methods */
.tech-grid{display:grid;gap:12px;margin-top:26px}
.tech{padding:22px 20px;background:var(--paper);border:1px solid var(--line);border-radius:2px}
.tech h4{margin-bottom:8px;font-family:'Spectral',serif;font-size:20px;font-weight:600}
.tech p{font-size:15.5px;color:var(--muted)}

/* COUNSELLING: what to expect */
.steps{display:grid;gap:20px;margin-top:24px}
.step{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start}
.step .n{grid-row:span 2;font-family:'Spectral',serif;font-size:32px;font-weight:300;line-height:.9;color:var(--terra)}
.step h4{font-size:19px;font-weight:600}
.step p{font-size:16px;color:var(--muted)}

/* PROJECTS: separators sit between projects only, never above the first */
.project{display:grid;gap:18px;padding:30px 0}
.project + .project{border-top:1px solid var(--line)}
.project:first-of-type{padding-top:0}
.project .label{display:block;margin-bottom:10px}
.project h3{font-size:28px;font-weight:500}
.project p{font-size:16.5px;color:var(--body)}
.project p + p{margin-top:12px}
.pimg{width:100%;aspect-ratio:4/3}
/* The support question shifts voice, so it shifts typeface: serif italic, no rule */
.bb-cta{margin-top:24px}
.bb-cta p{margin-bottom:16px;font-family:'Spectral',serif;font-style:italic;font-size:21px;line-height:1.35;color:var(--ink)}
.bb-cta .btn{width:100%}
/* the private-practice note reads as regular body text (inherits .project p); on mobile it is
   the third paragraph, so it takes the same inter-paragraph spacing */
.bb-note{margin-top:12px}
/* mobile: photo, note and body text all join one flex flow (display:contents) so the note
   becomes the third paragraph, sitting above the italic "Interested" question */
.has-note{display:flex;flex-direction:column}
.has-note .pmedia,.has-note .pbody{display:contents}
.has-note .bb-note{order:1}
.has-note .bb-cta{order:2}

/* PROJECTS: closing call to action */
.cta-band{text-align:center}
.cta-band .label{display:inline-block;margin-bottom:14px}
.cta-band h2{font-size:28px;font-weight:400;text-wrap:balance}
.cta-band .lede{max-width:54ch;margin:16px auto 0;font-size:17px;color:var(--muted)}
.cta-band .btn{width:100%;margin-top:24px}

/* CONTACT */
/* Stacked (phone) view centres the intro like the page-hero on the other pages;
   reset to left at 640 where the grid becomes two columns. */
.contact-head{padding:30px 0 40px;text-align:center}
.contact-grid{display:grid;gap:28px;margin-top:20px}
.contact-grid h1{font-size:28px;font-weight:400;line-height:1.12}
.contact-grid h1 em{font-style:italic;color:var(--terra)}
.contact-intro{max-width:44ch;margin:16px auto 0;font-size:17px;color:var(--muted)}
.contact-actions{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.contact-actions .btn{width:100%}
.contact-info{text-align:left}
.contact-info dt{margin-top:18px;font-size:14px;font-weight:700;color:var(--terra)}
.contact-info dt:first-of-type{margin-top:0}
.contact-info dd{margin-top:2px;font-size:16.5px;line-height:1.5;color:var(--muted)}
.contact-info dd a{color:var(--ink);border-bottom:1px solid var(--line)}
.contact-info dd a:hover{color:var(--ink);border-bottom-color:var(--terra)}
.contact-info .big{display:inline-flex;align-items:center;min-height:44px;font-family:'Spectral',serif;font-size:19px;color:var(--ink);word-break:break-word}

/* CONTACT: FAQ */
.faq{max-width:760px;margin-top:22px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:16px 0;
  font-family:'Spectral',serif;font-size:18px;font-weight:500;color:var(--ink);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:24px;font-weight:300;line-height:1;color:var(--terra);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{max-width:66ch;margin:0 0 16px;font-size:16.5px;line-height:1.6;color:var(--body)}

/* FOOTER */
footer{padding:22px 0;background:var(--paper);border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.foot-inner{display:flex;flex-direction:column;gap:2px}
.foot-inner a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}
.foot-inner a:hover{color:var(--terra)}
.foot-social svg{display:block}

/* ============ 640px and up: small tablet, landscape phone ============ */
@media(min-width:640px){
  body{font-size:17px}
  .wrap,.narrow{padding:0 28px}
  section{padding:56px 0}
  .sec-title{font-size:30px}
  .hero h1{font-size:44px}
  .hero .lede,.page-hero .lede{font-size:19px}
  .lede-more{display:inline}
  .page-hero{padding:38px 0 42px}
  .page-hero h1{font-size:38px}
  /* Own composition for this band: the headline runs the full width, then the photo
     sits beside the actions and the credentials instead of above them. */
  .hero-grid{grid-template-columns:320px 1fr;column-gap:32px;
    grid-template-areas:"eyebrow eyebrow" "title title" "lede lede" "media cta" "media meta"}
  .hero-grid .eyebrow{grid-area:eyebrow}
  .hero-grid h1{grid-area:title}
  .hero-grid .lede{grid-area:lede;max-width:46ch}
  .hero-img{grid-area:media}
  .hero-cta{grid-area:cta;align-self:start;margin-top:24px}
  .hero-meta{grid-area:meta;align-self:end;margin-top:0}
  .about-grid{grid-template-columns:.8fr 1.2fr;column-gap:28px;row-gap:18px;margin-top:30px;
    grid-template-areas:"media quote" "media body" "tail tail"}
  .about-grid .lead-quote{grid-area:quote}
  .about-grid .portrait{grid-area:media;align-self:stretch;aspect-ratio:auto;min-height:300px}
  .about-body{grid-area:body}
  .about-tail{grid-area:tail}
  .contact-head{text-align:left}
  .contact-intro{margin-left:0;margin-right:0}
  .contact-grid{grid-template-columns:1fr 1fr;gap:32px;margin-top:26px}
  /* Photo top right at 48%. The text box runs the full width, so lines beside the
     photo are shortened by it and the lines below it use the whole page width.
     Zinduka mirrors it to the left, matching the alternation at 1200. */
  .project{display:block;padding:36px 0}
  .project::after{content:"";display:block;clear:both}
  .pimg{float:right;width:48%;aspect-ratio:3/2;margin:0 0 20px 4%}
  .project.flip .pimg{float:left;margin:0 4% 20px 0}
  /* Bounce Back: photo + note travel together as the floated block, note tucked under the image */
  .has-note .pmedia{display:block;float:right;width:48%;margin:0 0 20px 4%}
  .has-note .pbody{display:block}
  .has-note .pimg{float:none;width:100%;margin:0}
  .has-note .bb-note{margin-top:16px}
  .teasers{grid-template-columns:1fr 1fr}
  .teaser{padding:30px 26px}
  .teaser .go{margin-top:auto}
  /* four-column grid with cards spanning two, so the fifth one centres on its row */
  .tech-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .tech{grid-column:span 2}
  .tech:nth-child(5){grid-column:2/span 2}
  .challenges{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 20px}
  .steps{grid-template-columns:1fr}
  .cta-band h2{font-size:34px}
  .cta-band .btn{width:auto}
  .bb-cta .btn{width:auto}
  .foot-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:20px}
}

/* ============ 768px and up: the two-column composition arrives (tablet) ============
   Layout switches here; the nav stays behind the hamburger until 900, because four
   links plus the Book button do not fit next to the wordmark at this width. */
@media(min-width:768px){
  .wrap,.narrow{padding:0 36px}
  section{padding:64px 0}
  .sec-title{font-size:36px}

  .hero{padding:36px 0 56px}
  .hero-grid{grid-template-columns:1.15fr .85fr;column-gap:40px;
    grid-template-areas:"eyebrow media" "title media" "lede media" "cta meta"}
  .hero-grid .eyebrow{grid-area:eyebrow}
  .hero-grid h1{grid-area:title;margin-top:14px;font-size:48px}
  .hero-grid .lede{grid-area:lede;max-width:none;margin-top:20px}
  .hero-cta{grid-area:cta;margin-top:28px}
  .hero-img{grid-area:media;margin-top:0;align-self:start;max-width:none}
  .hero-meta{grid-area:meta;align-self:end;margin-top:20px}

  .page-hero{padding:42px 0 46px}
  .page-hero h1{font-size:46px}
  .hero-cta{flex-direction:row;flex-wrap:wrap;align-items:center}
  .hero-cta .btn{width:auto}
  .hero-note{flex:0 0 100%;margin-top:2px}

  .about-grid{grid-template-columns:.82fr 1.18fr;column-gap:40px;row-gap:20px;margin-top:36px;
    grid-template-areas:"media quote" "media body" "tail tail"}
  .about-grid .lead-quote{grid-area:quote;max-width:54ch;font-size:18px}
  .about-grid .portrait{grid-area:media;align-self:stretch;aspect-ratio:auto;max-width:none}
  .about-body{grid-area:body}
  .about-body p{max-width:54ch;font-size:18px}
  .about-tail{grid-area:tail;font-size:18px}
  .teasers{margin-top:40px}
  .teaser{padding:32px 28px}
  .teaser h3{font-size:26px}

  .welcome-line{margin-top:24px;font-size:19px}
  .offer{grid-template-columns:.4fr .6fr;gap:36px;padding:36px 0}
  .offer h3{font-size:27px}
  .offer p{max-width:52ch;font-size:17.5px}
  /* five cards on a six-column grid so the second row centres under the first */
  .tech-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:32px}
  .tech{grid-column:span 2;padding:24px 22px}
  .tech:nth-child(4){grid-column:2/span 2}
  .tech:nth-child(5){grid-column:span 2}
  .tech h4{font-size:21px}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:32px}
  .step{display:block}
  .step .n{font-size:38px}
  .step h4{margin:12px 0 6px;font-size:21px}

  .project{padding:44px 0}
  .project h3{font-size:30px}
  .project p{font-size:17.5px}
  .bb-cta{margin-top:26px}
  .bb-cta p{font-size:22px}
  .cta-band h2{font-size:38px}
  .cta-band .lede{margin-top:20px;font-size:18px}
  .cta-band .btn{margin-top:28px}

  .contact-head{padding:42px 0 54px}
  .contact-grid{grid-template-columns:1fr 1fr;gap:40px;margin-top:32px}
  .contact-grid h1{font-size:34px}
  .contact-actions{margin-top:24px}
  .contact-info dt{margin-top:18px}
  .contact-info .big{font-size:20px}
  .faq{margin-top:28px}
  .faq summary{font-size:19px;padding:17px 0}
  .faq details p{font-size:17px}
  footer{padding:26px 0}
}

/* ============ 900px and up: full desktop nav and the larger editorial scale ============ */
@media(min-width:900px){
  body{font-size:18px}
  .wrap,.narrow{padding:0 40px}
  section{padding:72px 0}
  .sec-title{font-size:42px}

  .nav-inner{min-height:78px;gap:0}
  .brand{font-size:22px}
  .nav-toggle{display:none}
  .nav-links{position:static;flex-direction:row;align-items:center;gap:32px;order:2;margin-right:32px;padding:0;
    background:none;border:0;box-shadow:none;display:flex}
  .nav-links a{min-height:0;padding:0;font-size:15px;font-weight:500;color:var(--muted);position:relative}
  .nav-links a:hover{background:none;color:var(--ink)}
  .nav-links a.active{font-weight:500;color:var(--ink)}
  .nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-27px;height:2px;background:var(--terra)}
  .nav-right{order:3}
  .nav-book{min-height:0;padding:13px 24px;font-size:15px}

  .hero{padding:44px 0 72px}
  .hero-grid{column-gap:56px}
  .hero-grid h1{margin-top:16px;font-size:64px}
  .hero-grid .lede{margin-top:26px}
  .hero-cta{margin-top:36px}
  .hero-meta{margin-top:24px}

  .page-hero{padding:48px 0 52px}
  .page-hero h1{font-size:54px}

  .about-grid{column-gap:56px;row-gap:24px;margin-top:44px}
  .about-grid .lead-quote{font-size:19px}
  .about-body p{font-size:19px}
  .about-tail{font-size:19px}
  .teasers{margin-top:48px}
  .teaser{padding:40px}
  .teaser h3{font-size:28px}

  .welcome-line{margin-top:26px;font-size:20px}
  .challenges{grid-template-columns:repeat(4,minmax(0,1fr));gap:11px 24px;margin-top:26px}
  .challenges li{font-size:15.5px}
  .offer{gap:48px;padding:42px 0}
  .offer h3{font-size:30px}
  .offer p{font-size:18px}
  .tech-grid{gap:16px;margin-top:36px}
  .tech{padding:28px 26px}
  .tech h4{font-size:22px}
  .steps{gap:36px;margin-top:36px}
  .step .n{font-size:40px}
  .step h4{margin:14px 0 8px;font-size:22px}

  .project{padding:52px 0}
  .project h3{font-size:34px}
  .project p{font-size:18px}
  .bb-cta{margin-top:30px}
  .bb-cta p{font-size:24px}
  .cta-band h2{font-size:44px}
  .cta-band .lede{margin-top:22px;font-size:19px}
  .cta-band .btn{margin-top:32px}

  .contact-head{padding:48px 0 64px}
  .contact-grid{gap:56px;margin-top:40px}
  .contact-grid h1{font-size:40px}
  .contact-actions{margin-top:28px}
  /* only here do both buttons fit on one line, so only here do they drop to their own width */
  .contact-actions{flex-direction:row;flex-wrap:wrap}
  .contact-actions .btn{width:auto}
  .contact-info dt{margin-top:20px}
  .contact-info .big{font-size:22px}
  .faq{margin-top:32px}
  .faq summary{font-size:20px;padding:18px 0}
  .faq details p{font-size:17px}
  footer{padding:30px 0}
  /* released only here: below 900 every width is touch hardware */
  .foot-inner a{min-height:0}
}

/* ============ 1200px and up: full editorial scale ============ */
@media(min-width:1200px){
  .wrap,.narrow{padding:0 48px}
  section{padding:88px 0}
  .sec-title{font-size:52px}
  .hero{padding:48px 0 88px}
  .hero-grid{column-gap:64px}
  .hero-grid h1{font-size:86px}
  .hero-grid .lede{font-size:21px}
  .page-hero h1{font-size:76px}
  .page-hero .lede{font-size:21px}
  .about-grid{column-gap:60px}
  .cta-band h2{font-size:48px}
  .contact-grid{gap:60px}
  .contact-grid h1{font-size:46px}
  /* side by side from here: there is enough width for the two heights to sit close */
  .project{display:grid;grid-template-columns:1fr .9fr;column-gap:48px;row-gap:20px;align-items:center;
    grid-template-areas:"head media" "body media"}
  .project::after{display:none}
  .phead{grid-area:head}
  .pbody{grid-area:body}
  .project .pimg{grid-area:media;aspect-ratio:4/3;float:none;width:auto;margin:0}
  .project.flip .pimg{float:none;margin:0}
  .project.flip{grid-template-columns:.9fr 1fr;grid-template-areas:"media head" "media body"}
  .project p,.pbody p{max-width:46ch}
  .bb-cta p{max-width:34ch}
  /* Bounce Back: photo + note stack as one centred block in the right column, so the note sits just under the image (level with the "Interested" line) */
  .has-note .pmedia{grid-area:media;display:flex;flex-direction:column;justify-content:center;gap:16px;float:none;width:auto;margin:0}
  .has-note .pimg{float:none;width:auto}
  .has-note .bb-note{margin-top:0}
}

/* Users who prefer less motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
}

/* ===== Counselling: visual redesign (grouped list, pull-quote, focus cards, timeline, method icons) ===== */
.section-intro{margin-top:6px;color:var(--muted);font-size:16.5px}
.ico{width:30px;height:30px;color:var(--terra);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* grouped "what I can support you with" */
.support-groups{display:grid;grid-template-columns:1fr;gap:16px;margin-top:24px}
.support-group{background:var(--cream);border:1px solid var(--line);border-radius:2px;padding:20px}
.group-label{display:block;margin-bottom:12px;font-size:15px;font-weight:700;color:var(--terra)}
.support-group ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:7px 16px}
.support-group li{position:relative;padding-left:15px;font-size:14.5px;line-height:1.3;color:var(--body)}
.support-group li::before{content:"";position:absolute;left:2px;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--terra);opacity:.65}

/* pull-quote rest point */
/* dark anchor band: one high-contrast rest point in the earthy palette */
.quote-band{text-align:center;padding:34px 0;background:var(--ink);color:var(--cream)}
.pull-quote{max-width:30ch;margin:0 auto;font-family:'Spectral',serif;font-weight:400;font-size:26px;line-height:1.3;color:var(--cream)}
.pull-quote em{font-style:italic;color:#E0A089}

/* areas of special focus as cards */
.focus{display:grid;grid-template-columns:1fr;gap:16px;margin-top:26px}
.focus-card{background:var(--cream);border:1px solid var(--line);border-radius:2px;padding:26px 24px}
.fc-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.focus-card .ico{width:34px;height:34px;flex:none}
.focus-card h3{font-size:22px;font-weight:600}
.focus-card .who{margin-top:6px;font-size:14px;font-weight:700;color:var(--terra)}
.focus-card p{margin-top:12px;font-size:16.5px;color:var(--body)}
/* collapsible on phones: summary is the tappable head, chevron rotates */
.focus-card>summary{cursor:pointer;list-style:none}
.focus-card>summary::-webkit-details-marker{display:none}
.focus-card>summary::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;border-right:2px solid var(--terra);border-bottom:2px solid var(--terra);transform:rotate(45deg);transition:transform .2s}
.focus-card[open]>summary::after{transform:rotate(-135deg)}
.focus-card:not([open])>summary{margin-bottom:0}

/* what to expect: numbered timeline */
.timeline{list-style:none;margin-top:24px;display:grid;gap:20px}
.timeline li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.tl-n{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:none;border-radius:50%;border:1.5px solid var(--terra);color:var(--terra);font-family:'Spectral',serif;font-size:18px}
.timeline h4{font-size:19px;font-weight:600}
.timeline p{margin-top:4px;font-size:16px;color:var(--muted)}

/* method cards: icon beside the heading */
.tech-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tech-head .ico{width:26px;height:26px;flex:none}
.tech-head h4{margin:0}

@media(min-width:640px){
  .support-groups{grid-template-columns:1fr 1fr;gap:20px}
  .focus{grid-template-columns:1fr 1fr;gap:20px}
  .focus-card>summary{cursor:default;pointer-events:none}
  .focus-card>summary::after{display:none}
  .quote-band{padding:44px 0}
  .pull-quote{font-size:32px}
  .timeline{grid-template-columns:repeat(3,1fr);gap:28px}
}
@media(min-width:900px){
  .pull-quote{font-size:40px}
  .focus-card{padding:32px 30px}
  .section-intro{font-size:18px}
}