/* =============================================================================
   Britt Health · styles.css
   Palette and type are fixed by the brief (taken from her business card).
   No gradients, no shadows, no glass, no glows. Corners are square everywhere.
   ============================================================================= */

:root {
  --taupe: #C3B29B;       /* brand field: giant hero name, section blocks */
  --cream: #F5F1EA;       /* page base, the colour her cutouts sit on */
  --olive: #5F684A;       /* ACCENT ONLY: booking actions. Nudged darker than #6B7355 so cream text passes WCAG AA (5.3:1) */
  --olive-deep: #4E563C;  /* hover */
  --ink: #1A1A1A;
  --ink-soft: #5C5750;
  --rule: rgba(26, 26, 26, .16);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gutter: clamp(20px, 4vw, 56px);
  --max: 1280px;
  --head-h: 64px;
  --vh: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}
/* Lenis rules (subset). The stock rule `.lenis.lenis-smooth iframe { pointer-events: none }`
   is deliberately left out so the Calendly calendar stays clickable. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
html.is-loading { overflow: hidden; }

body { margin: 0; font-size: clamp(16px, .5vw + 13px, 18px); line-height: 1.6; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
::selection { background: var(--taupe); color: var(--ink); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* small spaced capitals, the card's voice */
.caps {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: clamp(11px, .15vw + 10px, 13px);
  line-height: 1.5;
}

/* ---------- skip link ---------- */
.skip {
  position: fixed; left: var(--gutter); top: -120px; z-index: 200;
  background: var(--ink); color: var(--cream); padding: 10px 16px; text-decoration: none;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.skip:focus { top: 12px; }

/* ---------- loader (signature) ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--cream);
  display: grid; place-items: center;
  /* If JavaScript never runs, the loader gets out of the way by itself. */
  animation: loader-fallback .5s ease 2.8s forwards;
}
.loader.is-js { animation: none; }
.loader__sig { width: min(78vw, 560px); color: var(--ink); }   /* the signature is 3.3:1; phones get most of the width, desktops about 560 px */
@media (min-width: 900px) { .loader__sig { width: min(40vw, 560px); } }
.loader__sig svg { display: block; width: 100%; height: auto; overflow: visible; }
.loader.is-lifting { transform: translate3d(0, -100%, 0); transition: transform .6s cubic-bezier(.76, 0, .24, 1); }
.loader.is-done { visibility: hidden; pointer-events: none; }
html.no-loader .loader { display: none; }
@keyframes loader-fallback { to { opacity: 0; visibility: hidden; } }

/* ---------- header ---------- */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; height: var(--head-h); z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  pointer-events: none;
  border-bottom: 1px solid transparent;
  transition: transform .45s cubic-bezier(.76, 0, .24, 1), background-color .25s, border-color .25s;
}
.site-head > * { pointer-events: auto; }
/* past the hero it gets the page colour and a hairline so it never sits on top of text;
   scrolling down it steps out of the way, scrolling up brings it back (main.js) */
.site-head.is-scrolled { background: var(--cream); border-bottom-color: var(--rule); pointer-events: auto; }
.site-head.is-hidden { transform: translate3d(0, -100%, 0); }
.wordmark { text-decoration: none; }
.head-cta {
  color: var(--ink); text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid var(--olive);
  transition: border-color .2s, color .2s;
}
.head-cta:hover { color: var(--olive); }

/* ---------- button ---------- */
.btn {
  display: inline-block;
  background: var(--olive); color: var(--cream);
  text-decoration: none; text-transform: uppercase;
  letter-spacing: .22em; font-size: 12px; font-weight: 500;
  padding: 16px 30px 15px;
  border: 0;
  transition: background-color .2s, transform .15s;
}
.btn:hover { background: var(--olive-deep); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* =============================================================================
   HERO (static layout by default: phones, tablets in portrait, reduced motion,
   and any browser where the libraries did not load)
   Typographic only, no photograph and no personal name: the giant tonal brand,
   the plate, one aside line.
   ============================================================================= */
.scene { position: relative; background: var(--cream); }
.hero {
  position: relative;
  height: var(--vh); min-height: 560px;
  overflow: hidden;
}
.hero__name {
  position: absolute; left: var(--gutter); top: 46%;
  translate: 0 -52%;                 /* optical centre of the capitals on the 46% line */
  white-space: nowrap;
  font-weight: 300; text-transform: uppercase; letter-spacing: .08em; line-height: 1;
  /* "BRITT HEALTH" spans gutter to gutter; 7.22 is its measured width in em for the system font.
     main.js measures and sets it exactly in pinned mode, this is the static approximation */
  font-size: min(calc((100vw - 2 * var(--gutter)) / 7.22), 40vh);
  color: var(--taupe);
  pointer-events: none; user-select: none;
  will-change: transform;
}
.hero__word { display: inline; }
.hero__ch { display: inline-block; }   /* one span per letter so the entrance can stagger them */
.hero__beat { display: none; }         /* the second scroll beat; pinned mode only */
.hero__plate {
  position: absolute; left: var(--gutter); bottom: 12%;
  max-width: 460px;
}
.hero__plate h1 {
  font-weight: 300; text-transform: uppercase;
  letter-spacing: .3em; line-height: 1.3;
  font-size: clamp(16px, .45vw + 12px, 20px);
}
.hero__role {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
}
.hero__plate .btn { margin-top: 30px; }
.hero__aside {
  position: absolute; right: var(--gutter); bottom: 12%;
  margin: 0; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; row-gap: 7px;
}
.hero__aside-row { display: inline-flex; align-items: baseline; white-space: nowrap; }
/* hairline dividers between the items, centred on the capitals (the trailing letter-spacing of the word before adds .3em on the left) */
.hero__aside-row > span + span::before,
.hero__aside-row + .hero__aside-row::before {
  content: ''; display: inline-block; width: 1px; height: 1em;
  vertical-align: -.16em;
  background: currentColor; opacity: .5;
  margin: 0 1.1em 0 .8em;
}
@media (max-width: 1199px) {
  .hero__aside { flex-direction: column; align-items: flex-end; }
  .hero__aside-row + .hero__aside-row::before { display: none; }
}

/* Entrance: the head script sets html.js-enter before first paint, main.js plays the rise
   and removes the class. If scripts stall, everything is revealed after four seconds anyway. */
html.js-enter .hero__ch, html.js-enter .hero__aside, html.js-enter .hero__plate > * {
  opacity: 0;
  animation: enter-fallback 0s linear 4s forwards;
}
@keyframes enter-fallback { to { opacity: 1; } }

@media (max-width: 899px) {
  /* one left-aligned column, top to bottom: who it is for, the brand on two lines, the plate */
  .hero__name { top: 44%; line-height: .95; font-size: min(calc((100vw - 2 * var(--gutter)) / 4), 22vh); }
  .hero__word { display: block; will-change: transform; }
  .hero__plate { max-width: 80vw; }
  .hero__plate .btn { margin-top: 22px; }
  .hero__aside {
    top: calc(var(--head-h) + 4vh); bottom: auto;
    left: var(--gutter); right: auto;
    align-items: flex-start;
  }
}

/* ---------- intro / about (static layout): the bio on the left, the one photograph on the
   right as a rectangular 4:5 panel (a studio photo, not a cutout) ---------- */
.intro {
  position: relative;
  background: var(--cream);
  padding: clamp(72px, 14vh, 160px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(40px, 7vh, 72px);
}
.intro__copy { max-width: 33em; }
.intro__copy h2 { font-weight: 300; font-size: clamp(28px, 2.2vw + 12px, 44px); line-height: 1.1; }
.intro__copy p { margin-top: 1.2em; max-width: 34em; }
.intro__portrait { display: flex; justify-content: flex-start; }
.intro__portrait img { width: min(100%, 400px); height: auto; }
@media (min-width: 900px) {
  /* the bio column is exactly as wide as its text; the photograph is centred in what is left,
     so it sits midway between the words and the right-hand gutter */
  .intro { grid-template-columns: minmax(0, 28em) minmax(0, 1fr); column-gap: 0; align-items: center; }
  .intro__portrait { justify-content: center; }
  .intro__portrait img { width: min(43.2vh, 464px, calc(100% - 48px)); height: auto; }   /* 4:5 panel, 54% of the viewport tall, never closer than 24 px to either side */
}
@media (min-width: 1200px) {
  .intro { grid-template-columns: minmax(0, 33em) minmax(0, 1fr); }
}

/* =============================================================================
   HERO, pinned mode (set by main.js on wide screens without reduced motion)
   main.js positions the name and the role line and drives every transform.
   ============================================================================= */
html.js-pin .scene { height: var(--vh); overflow: hidden; }
html.js-pin .hero { position: absolute; inset: 0; height: 100%; min-height: 0; }
html.js-pin .hero__name { left: 0; top: 0; translate: none; }
html.js-pin .hero__beat {
  display: block;
  position: absolute; left: 0; top: 0;
  white-space: nowrap;
  font-weight: 300; text-transform: uppercase; letter-spacing: .22em; line-height: 1;
  color: var(--ink);
  opacity: 0; visibility: hidden;
  pointer-events: none; user-select: none;
  will-change: transform, opacity;
}
html.js-pin .hero__plate, html.js-pin .hero__aside { will-change: transform, opacity; }
html.js-pin .intro {
  position: absolute; inset: 0;
  padding: 0 var(--gutter);
  background: transparent;
  opacity: 0; visibility: hidden; pointer-events: none;
}
html.js-pin .intro__copy { will-change: transform, opacity; }
html.js-pin .intro__portrait { will-change: transform; }
html.js-pin .intro__portrait img { width: min(43.2vh, 464px, calc(100% - 48px)); height: auto; }

/* =============================================================================
   WHY
   ============================================================================= */
.why { background: var(--taupe); padding: clamp(72px, 10vw, 128px) var(--gutter); }
.why__inner { max-width: var(--max); margin: 0 auto; }
.why h2 { margin-bottom: clamp(36px, 5vw, 72px); }
.why__grid { display: grid; grid-template-columns: 1fr; }
.point { padding: clamp(28px, 3vw, 44px) 0; border-top: 1px solid var(--rule); }
.point h3 { font-weight: 300; font-size: clamp(24px, 1.5vw + 10px, 38px); line-height: 1.15; max-width: 16em; }
.point p { margin-top: .9em; max-width: 32em; }
@media (min-width: 900px) {
  .why__grid { grid-template-columns: 7fr 5fr; column-gap: clamp(48px, 6vw, 112px); }
  .point--lead { grid-row: 1 / span 2; }
  .point--lead h3 { font-size: clamp(32px, 2.3vw + 12px, 54px); max-width: 12em; }
  .point--lead p { font-size: clamp(17px, .4vw + 14px, 20px); margin-top: 1.2em; }
}

/* =============================================================================
   BOOK
   ============================================================================= */
.book { padding: clamp(80px, 12vh, 160px) var(--gutter); }
.book__inner { max-width: 780px; margin: 0 auto; }
.book__head { max-width: 40em; margin-bottom: clamp(32px, 4vw, 56px); }
.book__head p { margin-top: 1em; color: var(--ink-soft); }
.book__frame {
  position: relative;
  border: 1px solid var(--taupe);
  min-height: 700px;
  background: var(--cream);
}
.book__frame.is-white { background: #fff; }
.calendly-slot { min-height: inherit; }
.calendly-slot iframe { display: block; }
.book__loading {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--ink-soft);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  pointer-events: none;
}
.book__frame.is-ready .book__loading,
.book__frame.is-failed .book__loading { display: none; }
.book__note { margin-top: 16px; font-size: 14px; color: var(--ink-soft); }
.book__note a { color: var(--olive); }
.book__done { display: none; }
.book.is-booked .book__done { display: block; }
.book.is-booked .book__pitch { display: none; }
@media (max-width: 899px) {
  .book__frame { min-height: 640px; margin-left: -8px; margin-right: -8px; }
}

/* =============================================================================
   FOOTER
   ============================================================================= */
.site-foot { background: var(--taupe); color: var(--ink); padding: clamp(48px, 7vw, 88px) var(--gutter) 36px; }
.site-foot__inner { max-width: var(--max); margin: 0 auto; }
.site-foot__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 720px) { .site-foot__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }
.site-foot a { text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color .2s; }
.site-foot a:hover { border-bottom-color: var(--ink); }
.site-foot__label { display: block; margin-bottom: 12px; }
.site-foot__name { font-weight: 300; font-size: clamp(22px, 1.2vw + 12px, 30px); line-height: 1.2; }
.site-foot p { line-height: 1.8; }
.site-foot__legal {
  margin-top: clamp(40px, 6vw, 72px); padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 12px 32px;
  justify-content: space-between; align-items: center;
  font-size: 13px;
}
.credit { display: inline-flex; align-items: center; gap: 10px; border: 0 !important; }
.credit img { height: 17px; width: auto; }

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .loader { display: none; }
  .hero__name { will-change: auto; }
  .hero__ch, .hero__aside, .hero__plate > * { opacity: 1 !important; }
}