/* Bernice Freed Bravo, Counseling. Colors come from her own photos: the terracotta office walls,
   her rust sweater and autumn leaves, the deep green of the forest trail. */

@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --cream: #f6efe5;
  --paper: #fbf8f3;
  --ink: #2a221d;
  --ink-soft: #5b4d44;
  --clay: #a9532c;
  --clay-deep: #8a4022;
  --clay-soft: #f1dccd;
  --forest: #213629;
  --gold: #e3aa45;
  --line: rgba(42, 34, 29, 0.14);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px;
  --gut: clamp(20px, 5vw, 56px);
  --radius: 22px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* Smooth jumps stay on for everyone (a jump that "just cuts" feels broken). */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 1.125rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: -0.01em; font-variation-settings: "SOFT" 60; }
h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); }
h3 { font-size: 1.3rem; line-height: 1.25; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
em { font-style: italic; }
.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 12px 28px; border-radius: 999px; border: 0; text-align: center;
  background: var(--clay); color: #fff; font: 600 1.05rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
  box-shadow: 0 10px 30px -12px rgba(138, 64, 34, 0.7);
}
.btn:hover { background: var(--clay-deep); transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.light { background: #fff; color: var(--forest); box-shadow: none; }
.btn.light:hover { background: var(--cream); }
.btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.btn.ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* Header */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 50; color: #fff;
  /* Over the photo the sky is bright, so the white menu gets a soft shadow to stay readable. */
  text-shadow: 0 1px 2px rgba(10, 18, 13, 0.55), 0 0 14px rgba(10, 18, 13, 0.45);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.head-row { display: flex; align-items: center; gap: 26px; height: 78px; }
.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; margin-right: auto; min-width: 0; }
.brand b { font: 500 1.32rem/1.1 var(--serif); letter-spacing: -0.005em; white-space: nowrap; }
.brand span { font-size: 0.8rem; letter-spacing: 0.02em; opacity: 0.85; margin-top: 3px; white-space: nowrap; }
.nav { display: flex; gap: 24px; }
.nav a { text-decoration: none; font-weight: 600; font-size: 1.02rem; white-space: nowrap; }
.nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.head-cta { min-height: 44px; padding: 0 20px; font-size: 0.96rem; box-shadow: none; display: none; white-space: nowrap; }
.past-hero .head-cta { display: inline-flex; }
.menu-btn { display: none; }
/* Solid, not frosted: a blur behind a fixed header redraws on every scroll step and makes phones stutter. */
.scrolled .site-head, .menu-open .site-head { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--line); text-shadow: none; }

/* Language switch: both always showing, the current one filled */
.lang-switch { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; flex: none; background: rgba(10, 18, 13, 0.42); }
.lang-switch a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; text-decoration: none; font: 700 0.9rem/1 var(--sans); }
.lang-switch a:hover { text-decoration: underline; text-underline-offset: 4px; }
.lang-switch a[aria-current] { background: #fff; color: var(--forest); text-decoration: none; text-shadow: none; }
.scrolled .lang-switch, .menu-open .lang-switch { background: transparent; }
.scrolled .lang-switch a[aria-current], .menu-open .lang-switch a[aria-current] { background: var(--forest); color: #fff; }
.lang-switch .short { display: none; }

/* Hero: her photo, words on it */
.hero { position: relative; min-height: max(580px, 76svh); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--forest); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 35%; transform: scale(1.04); transform-origin: 60% 40%; will-change: transform; animation: settle 2.4s var(--ease) both; }
@keyframes settle { from { transform: scale(1.14); filter: saturate(0.8); } }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15, 24, 18, 0.66) 0%, rgba(15, 24, 18, 0.3) 12%, rgba(15, 24, 18, 0) 26%),
    linear-gradient(90deg, rgba(20, 30, 24, 0.8) 0%, rgba(20, 30, 24, 0.52) 40%, rgba(20, 30, 24, 0) 68%),
    linear-gradient(0deg, rgba(20, 30, 24, 0.75) 0%, rgba(20, 30, 24, 0) 50%);
}
.hero-inner { position: relative; z-index: 2; padding-block: 130px 150px; will-change: transform, opacity; }
.hero h1 { font-size: clamp(2.6rem, 1.5rem + 4vw, 5.1rem); line-height: 1.03; max-width: 13ch; font-weight: 400; letter-spacing: -0.02em; }
.hero h1 em { color: #f5c57a; font-weight: 400; }

/* Status light: green while she's taking new clients, red when she isn't (site.json "accepting") */
.status {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 15px 7px 12px; border-radius: 999px;
  background: rgba(20, 30, 24, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); color: #fff; font: 600 0.92rem/1.2 var(--sans);
}
.status .dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #3ed37a; flex: none; }
.status.is-open .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 2.4s var(--ease) infinite; }
.status.is-closed .dot { background: #ff5b4d; }
@keyframes ping { 0% { transform: scale(1); opacity: 0.7; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
.book .status { margin-bottom: 22px; }
/* In the hero the light is a small plain line on its own row under the buttons, not a pill over the photo. */
.hero .status { flex-basis: 100%; padding: 0; background: none; box-shadow: none; font-weight: 500; font-size: 0.9rem; opacity: 0.92; }
.hero .status .dot { width: 8px; height: 8px; }
.hero-lead { margin-top: 22px; font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); max-width: 38ch; opacity: 0.95; }
.hero-lead a { color: inherit; text-decoration-color: rgba(255, 255, 255, 0.55); text-underline-offset: 4px; }
.hero-lead a:hover { text-decoration-color: #fff; }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.hello-link { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: #fff; font: 600 1rem/1.2 var(--sans); cursor: pointer; text-align: left; }
.hello-link .thumb { position: relative; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.hello-link .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hello-link .thumb svg { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
.hello-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.rise { animation: rise 1.1s var(--ease) both; }
.rise.d1 { animation-delay: 0.15s; } .rise.d2 { animation-delay: 0.3s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }

section { position: relative; }
.pad { padding-block: clamp(72px, 9vw, 120px); }

/* What we can work on: plain words and room to breathe, right under the hero */
.help { background: var(--cream); padding-block: clamp(56px, 6vw, 92px); }
.help-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.help-who { margin-top: 20px; color: var(--ink-soft); max-width: 44ch; }
.help-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; }
.help-list li { border-top: 1px solid var(--line); font: 400 clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem)/1.3 var(--serif); }
/* Each topic opens a short note (site.js). The note spans both columns under the tapped row, with a small notch
   pointing up at the topic, and grows open by easing its row from 0fr to 1fr. */
.help-topic { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 14px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: color 0.25s var(--ease); }
.help-topic::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--clay); border-bottom: 2px solid var(--clay); transform: translateY(-3px) rotate(45deg); transition: transform 0.3s var(--ease); }
.help-topic:hover, .help-topic[aria-expanded="true"] { color: var(--clay-deep); }
.help-topic[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.help-list .help-note { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; border: 0; font: inherit; transition: grid-template-rows 0.4s var(--ease); }
.help-list .help-note.open { grid-template-rows: 1fr; }
.help-note > div { overflow: hidden; }
.help-note p { position: relative; margin: 8px 0 16px; padding: 16px 18px; border-radius: 14px; background: var(--paper); box-shadow: 0 1px 0 var(--line), 0 10px 24px -18px rgba(42, 34, 29, 0.35); color: var(--ink-soft); font-size: 1rem; line-height: 1.6; opacity: 0; transform: translateY(-4px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.help-note.open p { opacity: 1; transform: none; transition-delay: 0.08s; }
.help-note p::before { content: ""; position: absolute; top: -6px; left: calc(var(--notch, 25%) - 6px); width: 12px; height: 12px; background: var(--paper); transform: rotate(45deg); border-radius: 2px 0 0 0; }
.help-more { padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 1rem; }

/* About + video */
.about { background: var(--paper); }
.about-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.hello { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 9 / 16; background: var(--forest); box-shadow: 0 40px 80px -36px rgba(60, 30, 15, 0.5); }
.hello video { width: 100%; height: 100%; object-fit: cover; }
.play {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px;
  padding: 0 20px 26px; border: 0; cursor: pointer; color: #fff; font: 600 1.12rem/1.35 var(--sans); letter-spacing: 0.01em; text-align: center;
  background: linear-gradient(0deg, rgba(20, 30, 24, 0.75) 0%, rgba(20, 30, 24, 0) 45%);
}
.play[hidden] { display: none; }
.play span.circle { width: 78px; height: 78px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: var(--clay); display: grid; place-items: center; transition: transform 0.3s var(--ease); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.45); }
.play:hover span.circle { transform: scale(1.07); }
.play svg { width: 28px; height: 28px; margin-left: 4px; }
.about h2 { margin-bottom: 22px; }
.about-feel { font: 400 clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem)/1.4 var(--serif); letter-spacing: -0.005em; max-width: 34ch; font-variation-settings: "SOFT" 80; }
.about-goal { color: var(--clay-deep); font-style: italic; }
.js [data-light] .w { opacity: 0.2; }
.about-text { margin-top: 22px; color: var(--ink-soft); max-width: 52ch; }
.about-es { margin-top: 14px; color: var(--clay-deep); font-weight: 500; }
.facts { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 30px; border-top: 1px solid var(--line); padding-top: 26px; }
.facts li { font-size: 0.96rem; color: var(--ink-soft); line-height: 1.45; }
.facts b { display: block; font: 500 1.1rem/1.3 var(--serif); color: var(--ink); margin-bottom: 2px; }

/* Approach: green, photo beside a two-column list */
.approach { background: var(--forest); color: #f4efe6; }
.approach-grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.approach-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; }
.approach-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); will-change: transform; }
.approach h2 { color: #fff; }
.approach-text { margin-top: 20px; font-size: 1.1rem; color: rgba(244, 239, 230, 0.86); max-width: 60ch; }
.approach-list { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; }
.approach-list li { padding: 18px 0 18px 20px; border-top: 1px solid rgba(255, 255, 255, 0.16); position: relative; }
.approach-list li::before { content: ""; position: absolute; left: 0; top: 27px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.approach-list h3 { color: #fff; font-size: 1.22rem; }
.approach-list p { margin-top: 5px; color: rgba(244, 239, 230, 0.8); font-size: 1rem; line-height: 1.5; }

/* Questions: heading beside the answers */
.questions { background: var(--paper); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 44px 18px 0; position: relative; font-weight: 600; font-size: 1.06rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px; border-right: 2px solid var(--clay); border-bottom: 2px solid var(--clay); transform: translateY(-70%) rotate(45deg); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 0 20px; color: var(--ink-soft); max-width: 60ch; font-size: 1.02rem; }
.faq details a { color: var(--clay-deep); }

/* Check your insurance: a plan picker inside the cost question */
.ins { margin: 0 0 24px; padding: 20px 22px; background: var(--cream); border-radius: 16px; max-width: 60ch; }
.ins[hidden] { display: none; }
.ins-label { display: block; font-weight: 600; margin-bottom: 10px; }
.ins select {
  width: 100%; min-height: 50px; padding: 0 44px 0 16px; border: 1.5px solid rgba(42, 34, 29, 0.28); border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9532c' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
  color: var(--ink); font: 500 1rem/1.2 var(--sans); appearance: none; -webkit-appearance: none; cursor: pointer;
}
.ins select:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.faq .ins p { padding: 0; max-width: none; }
.ins-out:not(:empty) { margin-top: 16px; }
.faq .ins-out p { color: var(--ink); }
.ins-out p + ol, .ins-out ol + p { margin-top: 10px; }
.ins-out ol { list-style: decimal; padding-left: 1.3em; color: var(--ink-soft); font-size: 1rem; }
.ins-out li + li { margin-top: 6px; }
.ins-out li::marker { color: var(--clay); font-weight: 600; }
.faq .ins .ins-note { margin-top: 12px; font-size: 0.88rem; color: var(--ink-soft); }

/* Book */
.book { background: var(--forest); color: #f4efe6; overflow: hidden; }
.book-bg { position: absolute; inset: -10% 0; opacity: 0.22; }
.book-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); will-change: transform; }
.book::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--forest) 0%, rgba(33, 54, 41, 0.6) 40%, var(--forest) 100%); }
.book .wrap { position: relative; z-index: 2; }
.book-face { width: 132px; height: 132px; margin: 0 auto 26px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 20px 40px -16px rgba(0, 0, 0, 0.6); }
.book-face img { width: 100%; height: 100%; object-fit: cover; }
.book-head { text-align: center; max-width: 760px; margin-inline: auto; }
.book h2 { color: #fff; }
.book-lead { margin-top: 16px; font-size: 1.22rem; color: rgba(244, 239, 230, 0.88); }
.book-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.book-note { margin-top: 18px; font-size: 0.95rem; color: rgba(244, 239, 230, 0.72); }
/* Booking card: sessions are booked through Mindful. */
.book-ways { display: grid; gap: 18px; max-width: 640px; margin: 40px auto 0; }
.book-way { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.book-way h3 { color: #fff; font-size: 1.45rem; }
.book-way p { color: rgba(244, 239, 230, 0.86); }
.book-way .btn { margin-top: auto; }
.book-way.main { background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55); }
.book-way.main h3 { color: var(--ink); }
.book-way.main p { color: var(--ink-soft); }
.book-way.main .btn { margin-top: 6px; }
.book-way-note { font-size: 0.94rem; }
.book-way-note a { color: var(--ink); font-weight: 700; white-space: nowrap; }

/* Message form: a light card under the booking buttons */
.msg { position: relative; margin: 44px auto 0; max-width: 640px; padding: clamp(22px, 4vw, 34px); background: var(--paper); color: var(--ink); border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5); }
.msg h3 { font-size: 1.45rem; margin-bottom: 18px; }
.msg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.msg label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 14px; }
.msg input, .msg select {
  display: block; width: 100%; margin-top: 6px; padding: 13px 14px; border: 1.5px solid rgba(42, 34, 29, 0.25); border-radius: 12px;
  background: #fff; color: var(--ink); font: 400 1rem/1.4 var(--sans);
}
.msg select {
  padding-right: 44px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9532c' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
}
.msg input:focus-visible, .msg select:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--clay); }
.msg .btn { width: 100%; margin-top: 4px; }
.msg .btn:disabled { opacity: 0.7; cursor: progress; }
.msg-status:not(:empty) { margin-top: 14px; font-weight: 600; }
.msg-status[data-kind="ok"] { color: #2c7a4b; }
.msg-status[data-kind="error"] { color: var(--clay-deep); }
/* The "no health details" note sits under the title, so it's read before anything is typed. */
.msg-note { margin: -8px 0 18px; font-size: 0.95rem; color: var(--ink-soft); }
.msg-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.crisis { margin: 48px auto 0; max-width: 760px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.98rem; color: rgba(244, 239, 230, 0.8); text-align: center; }
.crisis a { color: #fff; font-weight: 700; }

/* Footer */
.site-foot { background: #19271f; color: rgba(244, 239, 230, 0.75); padding-block: 56px 40px; font-size: 0.96rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.site-foot .brand { color: #fff; margin-bottom: 14px; }
.site-foot a { color: #fff; }
.site-foot p + p { margin-top: 6px; }
.foot-small { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 0.86rem; color: rgba(244, 239, 230, 0.55); }

/* Rise in once on view */
.js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease), transform 1s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* Smaller laptops */
@media (max-width: 1180px) {
  .nav { gap: 18px; }
}

/* Tablet */
@media (max-width: 1020px) {
  .nav { display: none; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 999px;
    border: 1.5px solid currentColor; background: rgba(10, 18, 13, 0.42); color: inherit; font: 600 0.95rem/1 var(--sans); cursor: pointer; flex: none;
  }
  .scrolled .menu-btn, .menu-open .menu-btn { background: transparent; }
  .menu-btn svg { width: 18px; height: 18px; }
  .menu-btn .x { display: none; }
  .menu-open .menu-btn .x { display: block; }
  .menu-open .menu-btn .bars { display: none; }
  #menu {
    position: fixed; inset: 78px 0 auto; background: var(--paper); color: var(--ink); padding: 18px var(--gut) 28px;
    box-shadow: 0 30px 40px -30px rgba(0, 0, 0, 0.35); display: none; max-height: calc(100svh - 78px); overflow-y: auto;
  }
  .menu-open #menu { display: block; }
  #menu .lang-switch { margin-bottom: 8px; }
  #menu .lang-switch a { min-height: 40px; padding: 0 18px; font-size: 1rem; }
  #menu .lang-switch a[aria-current] { background: var(--forest); color: #fff; }
  #menu > a { display: block; padding: 15px 0; border-bottom: 1px solid var(--line); text-decoration: none; font: 400 1.45rem/1.2 var(--serif); }
  #menu > a.btn { margin-top: 22px; border: 0; font: 600 1.05rem/1.2 var(--sans); display: flex; }
  .help-grid, .about-grid, .approach-grid, .faq-grid { grid-template-columns: 1fr; }
  .help-grid, .faq-grid { gap: 28px; }
  .about-grid { gap: 44px; }
  .hello { max-width: 300px; }
  .approach-photo { aspect-ratio: 16 / 10; }
  .foot-grid { grid-template-columns: 1fr; }
}
@media (min-width: 1021px) { #menu { display: none !important; } }

/* Phones */
@media (max-width: 640px) {
  body { font-size: 1.06rem; }
  .head-row { height: 68px; gap: 10px; }
  #menu { inset: 68px 0 auto; max-height: calc(100svh - 68px); }
  html { scroll-padding-top: 74px; }
  .brand b { font-size: 1.08rem; }
  .brand span { font-size: 0.72rem; }
  .head-cta { display: none !important; }
  .head-row > .lang-switch .full { display: none; }
  .head-row > .lang-switch .short { display: inline; }
  .head-row > .lang-switch a { min-height: 32px; padding: 0 10px; font-size: 0.82rem; }
  .menu-btn .label { display: none; }
  .menu-btn { width: 44px; padding: 0; justify-content: center; }
  /* Her photo runs full width at the top, the mountain on the left and her on the right. The words start over her
     jacket below her chin, where the photo is only dimmed, not covered. The photo keeps its shape (full width,
     about 0.97 times as tall), so her chin is always near 62vw down; the words and the dimming start from there, and a longer headline
     (Spanish) just runs onto the dark below the photo instead of zooming her face down under the words. */
  .hero { display: block; min-height: 0; background: #121915; }
  .hero-media img {
    height: auto; object-position: 50% 0%; transform-origin: 50% 20%;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent);
  }
  .hero::after {
    background: linear-gradient(180deg, rgba(8, 12, 10, 0.5) 0, rgba(8, 12, 10, 0) 96px, rgba(8, 12, 10, 0) calc(62vw - 24px), rgba(8, 12, 10, 0.52) calc(62vw + 48px), rgba(8, 12, 10, 0.76) calc(62vw + 170px), rgba(8, 12, 10, 0.86) 100%);
  }
  .hero-inner { padding-block: calc(62vw + 18px) 30px; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }
  /* Phones: the light sits centered right under the full-width Book button, above the video link. */
  .hero .status { order: 1; justify-content: center; margin-top: -4px; font-size: 0.86rem; }
  .hero .hello-link { order: 2; }
  .hero h1 { font-size: clamp(2.1rem, 1.1rem + 5.4vw, 2.6rem); }
  .hero-lead { margin-top: 12px; font-size: 1.02rem; }
  .hero-actions { margin-top: 20px; gap: 14px; }
  .hero-actions .btn { width: 100%; }
  .pad { padding-block: 56px; }
  .help { padding-block: 48px; }
  .help-who { margin-top: 14px; font-size: 1rem; }
  .help-list { column-gap: 20px; }
  .help-list li { font-size: 1.15rem; }
  .help-topic { padding: 11px 0; }
  .help-note p { padding: 14px 16px; font-size: 0.98rem; }
  /* The video stays in About but smaller, so it doesn't take a whole screen; the top button opens it full screen. */
  .about-grid { gap: 30px; }
  .hello { width: min(60%, 230px); margin-inline: auto; }
  .hello .play { gap: 10px; padding: 0 12px 18px; font-size: 1rem; }
  .hello .play span.circle { width: 62px; height: 62px; }
  .hello.is-open { display: block; position: fixed; inset: 0; z-index: 200; width: auto; max-width: none; margin: 0; border-radius: 0; aspect-ratio: auto; background: #000; box-shadow: none; }
  .hello.is-open video { object-fit: contain; }
  .video-open body { overflow: hidden; }
  .about-feel { font-size: 1.28rem; }
  .facts { grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 24px; padding-top: 20px; }
  /* Approach: the five ways of working swipe sideways instead of stacking. */
  .approach-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .approach-photo { aspect-ratio: 16 / 9; }
  .approach-text { font-size: 1.02rem; }
  .approach-list {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 24px calc(-1 * var(--gut)) 0; padding: 0 var(--gut) 4px;
  }
  .approach-list::-webkit-scrollbar { display: none; }
  .approach-list li { flex: 0 0 80%; scroll-snap-align: start; scroll-margin-left: var(--gut); padding: 18px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 16px; background: rgba(255, 255, 255, 0.05); }
  .approach-list li::before { display: none; }
  .faq-grid { gap: 18px; }
  .book-face { width: 84px; height: 84px; margin-bottom: 18px; }
  .book-lead { font-size: 1.05rem; }
  .book-actions { margin-top: 22px; }
  .book-actions .btn { width: 100%; }
  .book-ways { grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
  .book-way { padding: 22px 20px; }
  .book-way h3 { font-size: 1.3rem; }
  .book-way .btn { width: 100%; }
  .msg { margin-top: 28px; padding: 20px; }
  .msg h3 { font-size: 1.25rem; margin-bottom: 14px; }
  .msg-row { grid-template-columns: 1fr; }
  .crisis { margin-top: 32px; font-size: 0.92rem; }
  .site-foot { padding-block: 40px 28px; }
  .foot-grid { gap: 16px; }
  .foot-small { margin-top: 24px; }
}

/* Close button for the full-screen hello video (phones) */
.hello-close { display: none; }
.hello.is-open .hello-close {
  display: grid; place-items: center; position: absolute; z-index: 3; top: max(14px, env(safe-area-inset-top)); right: 14px;
  width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.94); color: var(--ink); cursor: pointer;
}
.hello-close svg { width: 22px; height: 22px; }