/* Site stylesheet: Beaufort Pro, the supplied logo, and a quiet editorial layout.
   Originated as the homepage direction; the rules above the "Shared components
   for interior pages" section further down are unchanged from that design. */
@font-face {
  font-family: Manrope;
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  /* Confirmed brand palette. Keep these source values unchanged. */
  --jet-black: #18262e;
  --seashell: #f9f2ec;
  --blue-slate: #5b7486;
  --jet-black-2: #1c3442;
  --silver: #c0b7b2;

  --paper: var(--seashell);
  --ink: var(--jet-black-2);
  --body: var(--jet-black);
  --muted: var(--jet-black-2);
  --stone: var(--seashell);
  --line: var(--silver);
  --water: var(--jet-black-2);
  --display: "beaufort-pro", Georgia, serif;
  --text: Manrope, Arial, sans-serif;
  color-scheme: light;
  font-family: var(--text);
  color: var(--body);
  background: var(--paper);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.75; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .3em; }
button, summary { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
figure, p, h1, h2, h3, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 300; line-height: 0.9; color: var(--jet-black); }
h1 { font-size: clamp(44px, 4.7vw, 68px); letter-spacing: -.045em; }
h2 { font-size: clamp(31px, 3.05vw, 44px); letter-spacing: -.035em; text-wrap: balance; }
h3 { font-size: 31px; letter-spacing: -.025em; }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--water); outline-offset: 6px; }
@supports not selector(:focus-visible) { a:focus, summary:focus { outline: 2px solid var(--water); outline-offset: 6px; } }
[id] { scroll-margin-top: 145px; }
.wrap { width: min(100% - 112px, 1240px); margin: 0 auto; }
.section { padding: 100px 0; }
.eyebrow { color: var(--jet-black); font-size: 13px; font-weight: 600; line-height: 1.6; margin-bottom: 24px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 32px; padding: 15px 24px; min-height: 52px; border: 1px solid var(--ink); border-radius: 3px; color: var(--paper); background: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; transition: background .18s ease, border-color .18s ease; }
.button:hover { background: var(--jet-black); border-color: var(--jet-black); }
.button span { font-size: 19px; line-height: 1; }
.button-small { padding: 11px 19px; min-height: 46px; gap: 20px; }
.text-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; color: var(--ink); font-weight: 600; font-size: 14px; text-decoration-thickness: 1px; }
.text-link:hover { color: var(--water); text-decoration-thickness: 2px; }
.text-link span { font-size: 19px; font-weight: 400; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 20px; background: var(--ink); color: var(--seashell); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 114px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: block; flex-shrink: 0; width: 222px; }
.brand img { width: 100%; }
.desktop-nav { display: flex; align-items: center; gap: clamp(20px, 2.5vw, 36px); }
.desktop-nav > a:not(.button) { display: flex; align-items: center; min-height: 44px; text-decoration: none; font-size: 13px; color: var(--ink); }
.desktop-nav > a:not(.button):hover { text-decoration: underline; }
.mobile-menu { display: none; }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(48px, 7vw, 100px); align-items: center; padding-top: 54px; padding-bottom: 70px; }
.hero-copy { padding: 20px 0; }
.hero .eyebrow { margin-bottom: 25px; }
.hero-intro { font-size: 16px; line-height: 1.85; margin-top: 29px; max-width: 440px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; column-gap: 25px; row-gap: 10px; margin-top: 31px; }
.hero-actions .text-link { font-size: 13px; gap: 12px; }
.hero-note { margin-top: 22px; color: var(--muted); font-size: 12px; }
.hero-image video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 28% 50%; border-radius: 12px; background: var(--silver); }
.support { background: var(--stone); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-intro { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: start; margin-bottom: 58px; }
.section-intro .eyebrow { padding-top: 10px; }
.section-intro h2 { max-width: 680px; }
.service-pair { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--silver); border-bottom: 1px solid var(--silver); }
.service { padding: 38px 58px 35px 0; display: flex; flex-direction: column; align-items: flex-start; }
.service + .service { border-left: 1px solid var(--silver); padding-left: 58px; padding-right: 0; }
.service-lede { font-size: 18px; line-height: 1.6; color: var(--ink); margin-top: 16px; margin-bottom: 16px; }
.service p:not(.service-lede) { font-size: 15px; }
.service .service-topics { font-size: 12px; line-height: 1.9; color: var(--muted); padding-top: 22px; padding-bottom: 20px; }
.service .text-link { margin-top: auto; }
.support-note { text-align: center; font-size: 13px; margin-top: 28px; }
.about-layout { display: grid; grid-template-columns: 1fr 1.35fr; gap: 110px; }
.about-photo { display: block; width: 132px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; margin-top: 28px; background: var(--silver); }
.about-name { margin-top: 38px; color: var(--ink); font-size: 15px; }
.about-name span { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.about-copy p + p { margin-top: 24px; }
.about-copy .large-copy { font-size: 20px; line-height: 1.8; color: var(--ink); }
.about-copy .text-link { margin-top: 25px; }
.sessions { background: var(--ink); color: var(--seashell); }
.sessions h2 { color: var(--paper); }
.sessions .eyebrow { color: var(--silver); }
.sessions .text-link { color: var(--paper); margin-top: 27px; }
.sessions a:focus-visible { outline-color: var(--seashell); }
.sessions-layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: 110px; }
.sessions-intro { max-width: 350px; margin-top: 23px; font-size: 15px; }
.session-details dl > div { padding: 23px 0; border-bottom: 1px solid var(--blue-slate); }
.session-details dl > div:first-child { padding-top: 0; }
.session-details dt { color: var(--silver); font-size: 12px; margin-bottom: 7px; }
.session-details dd { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; color: var(--paper); font-size: 20px; }
.session-details dd span { font-size: 16px; white-space: nowrap; }
.session-details > p { margin-top: 22px; font-size: 12px; line-height: 1.85; }
.session-details > p + p { margin-top: 10px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 54px; }
.steps li { border-top: 1px solid var(--line); padding-top: 23px; }
.step-number { color: var(--muted); font-size: 12px; display: block; margin-bottom: 22px; }
.steps h3 { font-size: 25px; margin-bottom: 17px; }
.steps p { font-size: 14px; }
.steps .text-link { margin-top: 14px; }
.questions { padding-top: 0; }
.questions-layout { border-top: 1px solid var(--line); padding-top: 65px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 90px; }
.questions .eyebrow { font-size: 12px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 74px; padding: 20px 0; list-style: none; color: var(--ink); font-size: 15px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 22px; font-weight: 400; flex-shrink: 0; }
.faq details[open] summary::after { content: '−'; }
.faq summary:hover { color: var(--water); }
.answer { padding: 0 30px 25px 0; font-size: 14px; }
.answer .text-link { margin-top: 14px; }
.contact { background: var(--ink); color: var(--seashell); }
.contact h2 { color: var(--paper); }
.contact .eyebrow { color: var(--silver); }
.contact a:focus-visible { outline-color: var(--seashell); }
.contact-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 90px; align-items: start; }
.contact-copy > p:first-child { max-width: 390px; font-size: 17px; }
.email-link { display: inline-block; color: var(--ink); font-size: clamp(16px, 1.5vw, 21px); font-weight: 500; margin: 22px 0 16px; padding: 8px 0; overflow-wrap: anywhere; }
.email-link span { display: inline-block; margin-left: 12px; }
.contact .email-link { color: var(--paper); }
.contact-note { font-size: 12px; max-width: 360px; color: var(--muted); }
.contact .contact-note { color: var(--silver); }
.site-footer { padding: 65px 0 27px; font-size: 12px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 60px; }
.footer-brand { display: inline-block; color: var(--jet-black); font-family: var(--display); font-size: 22px; text-decoration: none; padding: 8px 0; margin-bottom: 12px; }
.footer-top nav { display: flex; flex-direction: column; align-items: flex-start; }
.footer-top nav a { min-height: 44px; display: inline-flex; gap: 8px; align-items: center; text-decoration: none; }
.footer-top nav a:hover { text-decoration: underline; }
.footer-bottom { margin-top: 40px; padding-top: 27px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-end; gap: 50px; font-size: 11px; }
.crisis { max-width: 690px; }
.copyright { white-space: nowrap; }
@media (max-width: 1100px) {
  .wrap { width: calc(100% - 64px); }
  .desktop-nav { gap: 20px; }
  .brand { width: 190px; }
  .hero { gap: 48px; }
  .about-layout, .sessions-layout { gap: 65px; }
  .questions-layout, .contact-layout { gap: 50px; }
  .service { padding-right: 35px; }
  .service + .service { padding-left: 35px; }
}
@media (max-width: 959px) {
  .desktop-nav { display: none; }
  .header-inner { min-height: 98px; flex-wrap: wrap; gap: 0; }
  .mobile-menu { display: block; }
  .mobile-menu summary { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-height: 48px; min-width: 78px; list-style: none; font-size: 14px; color: var(--ink); cursor: pointer; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .menu-bars { display: block; width: 20px; height: 8px; border-top: 1px solid; border-bottom: 1px solid; }
  .mobile-menu[open] .menu-bars { height: 1px; border-bottom: 0; }
  .mobile-menu[open] { width: 100%; padding-bottom: 20px; }
  .mobile-menu[open] summary { position: absolute; right: 32px; top: 25px; }
  .mobile-menu nav { border-top: 1px solid var(--line); display: grid; padding-top: 8px; }
  .mobile-menu nav a { text-decoration: none; padding: 12px 0; min-height: 48px; color: var(--ink); }
  .mobile-menu nav a:last-child { color: var(--water); }
  .hero { gap: 32px; padding-top: 40px; padding-bottom: 55px; }
  .hero h1 { font-size: 46px; }
  .hero-intro { font-size: 14px; }
  .hero-image video { aspect-ratio: 3 / 4; }
  .section { padding: 75px 0; }
  .section-intro { grid-template-columns: 1fr 1.8fr; gap: 25px; }
  .steps { gap: 30px; }
  .steps h3 { font-size: 22px; }
  .about-layout, .sessions-layout { gap: 40px; }
  .about-copy .large-copy { font-size: 18px; }
  .questions { padding-top: 0; }
  .questions-layout { gap: 35px; }
  .contact-layout { grid-template-columns: 1fr 1fr; gap: 35px; }
  .footer-top { gap: 30px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 18px; }
}
@media (max-width: 639px) {
  .wrap { width: calc(100% - 40px); }
  .header-inner { min-height: 92px; }
  .brand { width: 186px; }
  .mobile-menu[open] summary { right: 20px; top: 22px; }
  .site-header:has(.mobile-menu[open]) { max-height: 100dvh; overflow-y: auto; }
  [id] { scroll-margin-top: 115px; }
  .hero { grid-template-columns: 1fr; padding-top: 30px; padding-bottom: 40px; gap: 32px; }
  .hero-copy { padding: 0; }
  .hero .eyebrow { margin-bottom: 20px; font-size: 12px; }
  .hero h1 { font-size: clamp(42px, 10.6vw, 60px); }
  .hero-intro { font-size: 15px; margin-top: 22px; max-width: 350px; }
  .desktop-break { display: none; }
  .hero-actions { margin-top: 24px; gap: 12px 20px; }
  .hero-note { margin-top: 13px; }
  .hero-image video { aspect-ratio: 5 / 4; object-position: 30% 50%; }
  .section { padding: 58px 0; }
  .eyebrow { margin-bottom: 18px; font-size: 12px; }
  .section-intro { display: block; margin-bottom: 32px; }
  .section-intro .eyebrow { padding: 0; }
  h2 { font-size: 31px; }
  h3 { font-size: 28px; }
  .service-pair { grid-template-columns: 1fr; }
  .service { padding: 29px 0; }
  .service + .service { border-left: 0; border-top: 1px solid var(--silver); padding: 29px 0; }
  .service-lede { font-size: 17px; }
  .support-note { text-align: left; margin-top: 22px; }
  .about-layout, .sessions-layout, .questions-layout, .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .about-name { margin-top: 20px; }
  .about-copy .large-copy { font-size: 17px; }
  .about-copy { font-size: 15px; }
  .session-details dd { font-size: 18px; }
  .session-details dd span { font-size: 14px; }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .steps li { display: grid; grid-template-columns: 28px 1fr; column-gap: 16px; padding-top: 23px; }
  .step-number { grid-row: 1 / 4; padding-top: 6px; }
  .steps h3 { font-size: 23px; margin-bottom: 12px; }
  .steps p, .steps .text-link { grid-column: 2; }
  .questions { padding-top: 0; }
  .questions-layout { padding-top: 46px; }
  .faq summary { font-size: 14px; min-height: 70px; gap: 20px; }
  .answer { padding-right: 12px; }
  .contact-copy > p:first-child { font-size: 16px; }
  .email-link { font-size: 16px; }
  .site-footer { padding-top: 45px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 25px; }
  .footer-top > div { grid-column: 1 / -1; }
  .footer-brand { font-size: 21px; }
  .footer-bottom { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media print {
  .site-header { position: static; }
  .desktop-nav, .mobile-menu, .hero-actions, .skip-link { display: none; }
  .wrap { width: 100%; }
  .section { padding: 30px 0; }
  .sessions { background: var(--seashell); color: var(--body); }
  .sessions h2, .sessions .eyebrow { color: var(--jet-black); }
  .sessions a, .session-details dt, .session-details dd { color: var(--ink); }
  .contact { background: var(--seashell); color: var(--body); }
  .contact h2, .contact .eyebrow { color: var(--jet-black); }
  .contact .email-link, .contact-note { color: var(--ink); }
  .hero-image { max-width: 220px; }
  a { text-decoration: underline; }
}

/* Section headings mask-reveal into view on scroll, site-wide (home.js
   wraps each h2's text per line and toggles .is-visible via
   IntersectionObserver). Dormant unless JS has run: with JS disabled, or
   under reduced motion (home.js skips the wrap in that case), a heading
   is just its plain, fully visible text — never invisible, never waiting
   on an animation. */
.reveal-line { display: block; overflow: hidden; padding-bottom: 0.2em; }
.reveal-line .reveal-inner { display: inline-block; transform: translateY(110%); opacity: 0; transition: transform 1.1s cubic-bezier(.19, 1, .22, 1), opacity 1s ease; transition-delay: var(--reveal-delay, 0ms); }
.reveal-line.is-visible .reveal-inner { transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal-line .reveal-inner { transform: none; opacity: 1; }
}
@media print {
  .reveal-line .reveal-inner { transform: none; opacity: 1; }
}

/* =========================================================================
   Shared components for interior pages (About, Counselling, Coaching,
   Privacy, 404). Same tokens and type as the homepage above, extended with
   a few layout pieces the homepage doesn't need. Nothing above this line
   is touched by these rules.
   ========================================================================= */
.page-hero { padding-top: 54px; padding-bottom: 60px; border-bottom: 1px solid var(--line); }
.page-hero h1 { max-width: 16ch; }
.page-hero .hero-intro { margin-top: 22px; }
/* A full-bleed band draws its own line across the page, and the hero's
   hairline stops short of the edges, so the two together read as a
   mistake. Older browsers without :has() simply keep the rule. */
.page-hero:has(+ .tile-cinema) { border-bottom: 0; }

/* Small eyebrow in its own left column; the heading and the prose that
   follows both sit in the wider right column, so the paragraph aligns
   directly under the heading instead of jumping back to the margin. */
.section-split { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: start; }
.section-split .eyebrow { padding-top: 10px; }
.section-split .flow { margin-top: 24px; }
/* The mirror, for a section that opens with its heading rather than an
   eyebrow: prose in the wide column, photograph in the narrow one on the
   right. */
.section-split-reverse { grid-template-columns: 2fr 1fr; }

/* A quiet supporting photograph in the left column, rather than a band of
   its own. The column stretches to the full height of the row so the
   photograph can sit on its floor, level with the last line of prose
   beside it: eyebrow at the top, image at the bottom, air between. One
   ratio for all of them, so the column keeps a steady rhythm down the
   page. */
.section-side { align-self: stretch; display: flex; flex-direction: column; }
.section-aside { margin-top: auto; aspect-ratio: 3 / 2; object-position: center 40%; }
/* Kate's portrait is the one photograph of a person we actually know, and
   it was taken upright: it keeps its own proportions rather than being
   cropped to the landscape the others share. */
.about-portrait { aspect-ratio: 4 / 5; object-position: center 30%; }

.section-band { background: var(--stone); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.flow > * + * { margin-top: 24px; }
.measure { max-width: 640px; }

.tile { display: block; width: 100%; height: auto; background: var(--stone); border-radius: 12px; overflow: hidden; object-fit: cover; }
.tile-4x3 { aspect-ratio: 4 / 3; }
.tile-4x5 { aspect-ratio: 4 / 5; }
.tile-16x9 { aspect-ratio: 16 / 9; }
/* The band under a page hero: full bleed, edge to edge, at a fixed height
   rather than a ratio, so it stays a band and never becomes the page.
   Square corners, since rounded ones read as a mistake against the
   viewport edge. Shorter as the screen narrows. */
.tile-cinema { width: 100%; height: 460px; border-radius: 0; object-position: center 35%; }
.tile-empty { display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; border: 1px dashed var(--silver); color: var(--muted); text-align: left; }
.tile-empty b { display: block; color: var(--ink); font-size: 12px; font-weight: 600; }
.tile-empty span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; }

.list-two { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; list-style: none; }
.list-two li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.list-note { margin-top: 28px; color: var(--muted); font-size: 13px; }
@media (min-width: 768px) {
  .list-two { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}

.placeholder-box { max-width: 640px; padding: 28px; border: 1px dashed var(--silver); border-radius: 8px; }
.placeholder-box > * + * { margin-top: 20px; }

@media (max-width: 1100px) {
  .section-split { grid-template-columns: 1fr 1.8fr; gap: 40px; }
  .section-split-reverse { grid-template-columns: 1.8fr 1fr; }
}
@media (max-width: 959px) {
  .tile-cinema { height: 380px; }
}
@media (max-width: 639px) {
  .page-hero { padding-top: 34px; padding-bottom: 40px; }
  .tile-cinema { height: 300px; }
  .section-split { display: block; }
  .section-split .eyebrow { padding-top: 0; }
  .section-split .flow { margin-top: 20px; }
  /* Stacked, there is no column floor to sit on: the photograph just
     follows the eyebrow, and needs its own space before the heading. In
     the reversed variant it follows the prose instead, so the space goes
     above it. */
  .section-aside { margin-top: 0; margin-bottom: 26px; }
  .section-split-reverse .section-aside { margin-top: 26px; margin-bottom: 0; }
}

@media (max-width: 360px) {
  /* On the narrowest phones the address fills the line on its own and
     strands its arrow on the next one. A point smaller keeps them
     together. */
  .email-link { font-size: 14px; }
}

@media print {
  .tile { display: none; }
  .section-band { background: var(--seashell); }
}