/* ---------------------------------------------------------
   Ben Berger — Counsellor & Therapist
   Design tokens
--------------------------------------------------------- */
:root{
  --ink:        #16232B;   /* deep navy-teal, night-water dark */
  --ink-soft:   #24363D;
  --sand:       #F3EFE5;   /* warm paper */
  --sand-deep:  #E8E0CD;
  --sage:       #5C7A6D;   /* eucalyptus */
  --sage-deep:  #46605A;
  --ochre:      #C99A5B;   /* dusk-light accent for CTAs */
  --ochre-deep: #B3813E;
  --text-dark:  #1B2320;
  --text-light: #F3EFE5;
  --line-dark:  rgba(27,35,32,0.14);
  --line-light: rgba(243,239,229,0.22);

  --serif: "Newsreader", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max: 1180px;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  font-size: 112.5%; /* 18px base — raises every rem-based size on the page */
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body{
  margin:0;
  font-family: var(--sans);
  color: var(--text-dark);
  background: var(--sand);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3{
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h1{ font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 500; }
h2{ font-size: clamp(1.7rem, 3.4vw, 2.5rem); }

p{ margin: 0 0 1.1em; max-width: 62ch; }

a{ color: inherit; }

img{ max-width: 100%; height: auto; display: block; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--text-light);
  padding:0.75em 1.25em; z-index:1000; border-radius: 0 0 6px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(243,239,229,0.9);
  border-radius: 2px;
}

.section-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) var(--pad);
}

.section-tag{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--sage-deep);
  margin-bottom: 0.6em;
}
.section-tag--light{ color: #C8D6CD; }

.section--sand{ background: var(--sand); }
.section--ink{ background: var(--ink); color: var(--text-light); }
.section--ink p{ color: rgba(243,239,229,0.85); }
.section--ink h2{ color: var(--text-light); }

/* ---------------------------------------------------------
   Header / Nav
--------------------------------------------------------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 200;
}
/*
  The scrolled-state background/blur lives on this pseudo-element
  rather than on .site-header itself. Any of filter, backdrop-filter,
  transform, perspective, or will-change on .site-header would make
  it a containing block for its position:fixed descendants (per the
  CSS spec) - including .main-nav, the mobile menu panel. That would
  make the "fixed" menu track the header bar instead of the viewport,
  squashing it into a thin strip instead of a full-height panel. Chrome
  applies this part of the spec consistently; some other browsers and
  devtools emulation are inconsistent about it, which is why the bug
  can appear browser-specific even though it isn't.
*/
.site-header::before{
  content: "";
  position: absolute; inset: 0;
  background: rgba(22,35,43,0.92);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
  pointer-events: none;
}
.site-header.is-scrolled::before{
  opacity: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.header-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.1rem var(--pad);
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--text-light);
  text-decoration:none;
  letter-spacing: 0.01em;
}
.main-nav{ display:flex; align-items:center; gap: 2rem; }
.main-nav a{
  color: var(--text-light);
  text-decoration:none;
  font-size: 0.95rem;
  opacity: 0.88;
}
.main-nav a:hover{ opacity: 1; }
.nav-cta{
  border: 1px solid var(--line-light);
  padding: 0.55em 1.1em;
  border-radius: 999px;
  opacity: 1 !important;
}
.nav-cta:hover{ background: rgba(255,255,255,0.08); }

.nav-toggle{
  display:none;
  position: relative; z-index: 1; /* paint above .main-nav's fixed panel when open */
  background:none; border:0; cursor:pointer;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  padding: 0;
}
.nav-toggle span{
  display:block; height:2px; width:22px; background: var(--text-light);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Morph into an "X" while the mobile menu is open, so there's always
   a visible, tappable way to close it - reusing the same button
   rather than adding a separate close control. */
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* ---------------------------------------------------------
   Fill-on-scroll photo component
   .fillphoto__bw sits underneath, colour image is revealed
   bottom-up via clip-path as the element scrolls through view.
--------------------------------------------------------- */
.fillphoto{
  position: absolute; inset: 0;
  overflow: hidden;
  --fill: 0%;
}
/* ---------------------------------------------------------
   Credit-strip crop
   Some source photos have a thin copyright credit baked into
   the bottom edge of the actual file (so the credit travels
   with the file if anyone saves it via dev tools), which must
   never be visible on the live page on any device.
   object-fit:cover on its own isn't reliable for this: on a
   tall narrow viewport with a wide photo, cover crops the
   SIDES and shows the full height (credit included), while on
   a wide short viewport it crops top+bottom. So instead of
   cropping the outer box, this wrapper renders the image
   slightly taller than the visible box and anchors it to the
   top, pushing a fixed physical strip off the bottom edge
   where the outer .fillphoto's overflow:hidden clips it - this
   holds regardless of viewport aspect ratio.
   --crop-ratio = full-image-height / visible-height, e.g. for
   a 1280px-tall photo with a 27px bottom strip: 1280/1253 =
   1.021548. Leave unset (defaults to 1, a no-op) for photos
   with no credit strip.
--------------------------------------------------------- */
.fillphoto__crop{
  position: absolute; left:0; right:0; top:0;
  height: calc(100% * var(--crop-ratio, 1));
}
.fillphoto__bw,
.fillphoto__color{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none; /* stops the iOS long-press "Save Image" menu */
}
.fillphoto__bw{ filter: grayscale(1) contrast(1.02); }
.fillphoto__color{
  clip-path: inset(calc(100% - var(--fill)) 0 0 0);
  will-change: clip-path;
}
.fillphoto--hero .fillphoto__color{
  transition: clip-path 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.fillphoto--hero.is-revealed{ --fill: 100%; }

@media (prefers-reduced-motion: reduce){
  .fillphoto__color{ clip-path: none !important; }
  .fillphoto__bw{ display:none; }
}
.fillphoto__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(16,24,26,0.6) 0%, rgba(16,24,26,0.42) 50%, rgba(16,24,26,0.65) 100%);
}
.fillphoto__scrim--light{
  background: linear-gradient(180deg, rgba(16,24,26,0.45) 0%, rgba(16,24,26,0.3) 50%, rgba(16,24,26,0.5) 100%);
}

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:flex-end;
  color: var(--text-light);
  overflow: hidden;
}
.hero__content{
  position: relative; z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  width:100%;
  padding: 0 var(--pad) clamp(3.5rem, 9vw, 6rem);
}
.hero .eyebrow{
  font-family: var(--serif); font-style: italic;
  font-size: 1.05rem; color: #D9E2DC; margin-bottom: 0.8em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}
.hero h1{ max-width: 15ch; color: var(--text-light); text-shadow: 0 2px 18px rgba(0,0,0,0.45); }
.hero__lede{
  max-width: 46ch;
  font-size: 1.1rem;
  color: rgba(243,239,229,0.9);
  text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
.hero__actions{ display:flex; gap:1rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */
.btn{
  display:inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.9em 1.6em;
  border-radius: 999px;
  text-decoration:none;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn--primary{
  background: var(--ochre);
  color: #201406;
}
.btn--primary:hover{ background: var(--ochre-deep); }
.btn--ghost{
  border-color: rgba(243,239,229,0.55);
  color: var(--text-light);
  background: rgba(16,24,26,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.btn--ghost:hover{ background: rgba(16,24,26,0.6); border-color: var(--text-light); }
.section--sand .btn--ghost{
  border-color: var(--line-dark);
  color: var(--text-dark);
  background: rgba(243,239,229,0.6);
}
.section--sand .btn--ghost:hover{ background: rgba(243,239,229,0.85); }
.btn--wide{ width:100%; text-align:center; }

/* ---------------------------------------------------------
   About
--------------------------------------------------------- */
.about-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.about-photo img{
  border-radius: 6px;
  box-shadow: 0 20px 40px -20px rgba(27,35,32,0.35);
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.credentials{
  list-style:none; margin: 1.6em 0 0; padding: 1.4em 0 0;
  border-top: 1px solid var(--line-dark);
  display:flex; flex-direction:column; gap: 0.5em;
  font-size: 0.95rem; color: var(--sage-deep);
}

/* ---------------------------------------------------------
   Issue list
--------------------------------------------------------- */
.issue-list{
  list-style:none; margin: 1.6em 0 2em; padding:0;
  display:flex; flex-wrap:wrap; gap: 0.9em 1.6em;
  max-width: 56ch;
}
.issue-list li{
  position:relative;
  padding-left: 1.1em;
  font-size: 1.05rem;
}
.issue-list li::before{
  content:"";
  position:absolute; left:0; top:0.55em;
  width:6px; height:6px; border-radius:50%;
  background: var(--sage);
}
.work-with__note{ max-width: 48ch; font-style: italic; font-family: var(--serif); font-size: 1.1rem; }

/* ---------------------------------------------------------
   Photo bands
--------------------------------------------------------- */
.photoband{
  position: relative;
  min-height: 62vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.photoband__quote{
  position: relative; z-index:2;
  max-width: 46ch;
  margin: 0 var(--pad);
  padding: 1.4em 1.9em;
  text-align:center;
  color: var(--text-light);
  background: rgba(12,18,17,0.05);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  border-radius: 14px;
}
.photoband__quote p{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2rem);
  max-width: none;
  margin:0;
  text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}

/* ---------------------------------------------------------
   Sessions
--------------------------------------------------------- */
.sessions-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 3rem;
  margin-top: 2.5rem;
}
.session-card{ padding-top: 1.2rem; border-top: 1px solid var(--line-light); }
.session-card__meta{
  font-family: var(--serif); font-style: italic;
  color: #D9E2DC;
  margin-bottom: 0.4em;
  font-size: 1.05rem;
}

/* ---------------------------------------------------------
   FAQ
--------------------------------------------------------- */
.faq-list{ margin-top: 2rem; max-width: 74ch; }
.faq-item{
  border-bottom: 1px solid var(--line-dark);
  padding: 1.3em 0;
}
.faq-item summary{
  cursor:pointer;
  font-family: var(--serif);
  font-size: 1.15rem;
  list-style: none;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-family: var(--sans);
  font-size: 1.4rem;
  color: var(--sage-deep);
  flex-shrink:0;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin-top: 0.9em; }

/* ---------------------------------------------------------
   Contact
--------------------------------------------------------- */
.contact-grid{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.contact-details{ margin: 2em 0 0; }
.contact-details > div{ margin-bottom: 1.2em; }
.contact-details dt{
  font-size: 0.95rem; text-transform: none; color: #C2CFC8;
  margin-bottom: 0.2em;
}
.contact-details dd{ margin:0; font-size: 1.05rem; }
.contact-details a{ text-decoration: underline; text-decoration-color: rgba(243,239,229,0.4); }

/* Extra top clearance for a page whose first section isn't a
   full-height hero (like feedback.html) - without this, the fixed
   header sits on top of and hides the start of the section. */
.page-intro{ padding-top: clamp(8rem, 16vw, 10rem); }

.feedback-wrap{ max-width: 640px; margin: 0 auto; }

.contact-form{
  background: var(--ink-soft);
  border: 1px solid var(--line-light);
  border-radius: 10px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.form-row{ margin-bottom: 1.2rem; }
.form-row--split{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field label{
  display:block; font-size: 0.98rem; margin-bottom: 0.4em; color: #DCE6E0;
}
.field input, .field textarea{
  width:100%;
  background: rgba(243,239,229,0.06);
  border: 1px solid rgba(243,239,229,0.42);
  border-radius: 6px;
  padding: 0.8em 0.9em;
  color: var(--text-light);
  font-family: var(--sans);
  font-size: 1rem;
}
.field input:focus, .field textarea:focus{
  outline:none;
  border-color: var(--ochre);
  background: rgba(243,239,229,0.1);
}
.field textarea{ resize: vertical; }
.form-note{
  font-size: 0.95rem; color: #C2CFC8; margin: 1em 0 0; max-width: none;
}
.form-status{
  font-size: 0.95rem; color: #DCE6E0; font-weight: 600;
  margin: 1em 0 0; max-width: none;
}
.form-status:empty{ margin: 0; }
.form-status--error{ color: #F0A98E; }

.hp-field{
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */
.site-footer{ background: var(--ink); color: rgba(243,239,229,0.65); }
.footer-inner{
  padding-top: 2rem; padding-bottom: 2rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap: 0.5rem;
  font-size: 0.98rem;
}
.footer-inner a{ text-decoration: underline; text-decoration-color: rgba(243,239,229,0.35); }
/* Copyright + photo-credit line: shrinks a little on narrow screens
   so it stays on one line most of the time, but wraps normally (no
   horizontal scrolling) on phones too narrow to fit it even then. */
.footer-credit{
  max-width: 100%;
  font-size: clamp(0.78rem, 2.1vw, 0.98rem);
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width: 860px){
  .about-grid, .contact-grid{ grid-template-columns: 1fr; }
  .about-photo{ order:-1; max-width: 320px; }
  .sessions-grid{ grid-template-columns: 1fr; gap: 1.8rem; }

  .main-nav{
    position: fixed; inset: 0 0 0 auto;
    width: min(78vw, 320px);
    background: var(--ink);
    flex-direction: column; align-items: flex-start;
    padding: 6rem 2rem 2rem;
    gap: 1.6rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav a{ font-size: 1.1rem; }
  .nav-cta{ margin-top: 0.5rem; }
  .nav-toggle{ display:flex; }
}

@media (max-width: 560px){
  .form-row--split{ grid-template-columns: 1fr; }
  .issue-list{ gap: 0.7em 1.2em; }
}