/* ==========================================================================
   Move with Stephania
   Design tokens taken from the original Framer build.
   ========================================================================== */

/* ----------------------------------------------------------------- fonts --
   Self-hosted via Fontsource. Both families are Google Fonts under the
   Open Font License, so hosting the files ourselves is permitted and
   removes the runtime request to Google.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/ubuntu-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ubuntu-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ubuntu-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ubuntu-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Bowlby One SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/bowlby-one-sc-latin-400-normal.woff2") format("woff2");
}

:root {
  --charcoal: #464c54;
  --charcoal-deep: #33383f;
  --cream: #fcf7f3;
  --cream-alt: #faf5ed;
  --rose: #c98f8a;
  --rose-deep: #bf8c88;
  --sage: #eaebe1;
  --tan: #cfc7bd;
  --white: #ffffff;
  --pale: #e9ebe1;
  --rose-panel: #bd8a85;

  /* every page banner shares this shape, matching Framer's 1440x588 */
  --banner-ratio: 1440 / 588;
  --header-h: 6rem;

  --font-body: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Bowlby One SC", "Ubuntu", sans-serif;

  --shell: 1100px;
  --shell-wide: 1240px;
  --gutter: clamp(1.5rem, 5vw, 4.375rem);
  --section-y: clamp(4rem, 8vw, 7rem);

  --grain: url("/assets/img/grain.png");
}

/* --------------------------------------------------------------- reset -- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
  line-height: 1.55;
  color: var(--charcoal);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

/* height:auto lets CSS aspect-ratio win over the width/height attributes,
   which are there so the browser reserves space before the image loads */
img { max-width: 100%; height: auto; display: block; }

/* <picture> is removed from the box tree so every layout rule below can keep
   targeting the <img> exactly as if the wrapper were not there */
picture { display: contents; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--charcoal);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  z-index: 200;
}
.skip-link:focus { left: 0; }

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

/* ------------------------------------------------------------ utilities -- */

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.shell--wide { width: min(100% - (var(--gutter) * 2), var(--shell-wide)); }

/* Full-bleed photographic background sitting behind a section's content */
.section-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Film-grain overlay, matching how Framer layered it: a transparent PNG at
   normal blend rather than a blend mode, so photographs keep their contrast */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: var(--grain);
  background-size: 256px 256px;
  pointer-events: none;
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  font-size: clamp(1.75rem, 1.1rem + 2.7vw, 2.625rem);
  color: var(--charcoal);
}

.eyebrow {
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 400;
  color: var(--charcoal);
}

/* ---------------------------------------------------------------- links -- */

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 1.75rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
}
.arrow-link .arrow { transition: transform 0.28s ease; }
.arrow-link:hover .arrow { transform: translateX(6px); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  padding: 0.85rem 1.15rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  transition: background-color 0.25s ease;
}
.btn .arrow { transition: transform 0.28s ease; }
.btn:hover .arrow { transform: translateX(6px); }

.btn--rose { background: var(--rose); color: var(--white); }
.btn--rose:hover { background: var(--rose-deep); }

.btn--dark { background: var(--charcoal); color: var(--white); }
.btn--dark:hover { background: var(--charcoal-deep); }

/* --------------------------------------------------------------- header -- */

/* The header floats over the top of the page rather than sitting above it,
   so the hero photograph shows through the translucent bar, as on Framer.
   Change position to sticky if the nav should follow the scroll instead. */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-inline: var(--gutter);
  min-height: var(--header-h);
  /* Framer washes the header differently per page, always with a 12% white
     layer on top. Default is cream, used on About, Anatomy and Private Study. */
  background:
    linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
    rgba(250, 244, 237, 0.62);
}

/* Home: no wash at all, just the white layer, so the pale studio wall reads
   through almost untouched */
.site-header--clear { background: rgba(255, 255, 255, 0.12); }

/* Trainings: pale sage rather than cream */
.site-header--sage {
  background:
    linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
    rgba(221, 222, 213, 0.7);
}

.wordmark {
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  text-decoration: none;
  color: var(--charcoal);
  letter-spacing: -0.01em;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3.125rem);
}

.site-nav a {
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--charcoal);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.22s ease, color 0.22s ease;
}
.site-nav a:hover { border-bottom-color: var(--rose); }
.site-nav a[aria-current="page"] { color: var(--rose); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 24px;
  margin-inline: auto;
  background: var(--charcoal);
  transition: transform 0.28s ease, opacity 0.2s ease;
}

/* ----------------------------------------------------------------- hero -- */

/* width is pinned so that aspect-ratio never widens the box past the
   viewport when a min-height kicks in on small screens */
.hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--banner-ratio);
  min-height: 260px;
  background: var(--tan);
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Stephania's frame is wider than the export Framer served, so this is the
     crop that puts the wall/floor line where the original has it, at roughly
     64% down the banner. Verified with tools/measure-banner.py. */
  object-position: center 42%;
}

.page-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--banner-ratio);
  min-height: 260px;
  background: var(--tan);
  display: grid;
  place-items: center;
}
.page-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero .page-hero-label {
  position: relative;
  z-index: 3;
  font-family: var(--font-display);
  text-transform: uppercase;
  /* cream, not rose: the live site changed this at some point */
  color: var(--cream-alt);
  font-size: clamp(1.75rem, 0.9rem + 3.6vw, 4.0625rem);
  line-height: 1.05;
  text-align: center;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------- intro -- */

.intro {
  background: var(--cream);
  padding-block: var(--section-y);
  text-align: center;
}
.intro h2 {
  font-weight: 400;
  color: var(--rose);
  font-size: clamp(1.5rem, 1rem + 2.1vw, 2.375rem);
  line-height: 1.25;
  margin-bottom: 1.75rem;
}
.intro p {
  max-width: 51.25rem;
  margin-inline: auto;
}
.intro p + p { margin-top: 1.5rem; }
.intro .arrow-link { margin-top: 2.75rem; }

/* Rose variant used at the top of the Anatomy page */
.intro--rose {
  position: relative;
  overflow: hidden;
  background: var(--rose);
  color: var(--cream-alt);
}
.intro--rose > .shell { position: relative; z-index: 3; }
.intro--rose h1 {
  font-weight: 500;
  color: var(--cream-alt);
  font-size: clamp(1.5rem, 1rem + 2.1vw, 2.25rem);
  line-height: 1.25;
  margin-bottom: 1.75rem;
}
.intro--rose p { max-width: 46rem; margin-inline: auto; }

/* ------------------------------------------------------- ways to study -- */

.ways {
  position: relative;
  padding-block: var(--section-y);
  background: var(--tan);
  overflow: hidden;
}
.ways > .shell { position: relative; z-index: 3; }
.ways .display { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }

.ways-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3.125rem);
}

.way-card { display: flex; flex-direction: column; }
.way-card img {
  width: 100%;
  height: 18.8125rem;
  object-fit: cover;
}
.way-card h3 {
  font-weight: 500;
  font-size: clamp(1.375rem, 1.05rem + 1.35vw, 1.875rem);
  line-height: 1.15;
  margin-top: 1.5rem;
}
.way-card .way-sub {
  font-style: italic;
  margin-top: 0.85rem;
  color: var(--charcoal);
}
.way-card .way-body { margin-top: 1.1rem; flex: 1; }
.way-card .btn { margin-top: 1.75rem; }

/* ------------------------------------------------------------ cta band -- */

.band {
  display: grid;
  grid-template-columns: 43% 57%;
  align-items: stretch;
  background: var(--sage);
  position: relative;
  overflow: hidden;
}
.band-media { position: relative; min-height: 20rem; }
.band-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band-copy {
  position: relative;
  z-index: 3;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4.375rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.9rem;
}
.band-copy h2 {
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.125rem);
  line-height: 1.25;
}
.band-copy .btn { margin-top: 0.9rem; }
.band-copy p:not(.eyebrow) { max-width: 28rem; }

/* Dark variant used for the "not sure which training" band */
.band--dark {
  grid-template-columns: 37.5% 62.5%;
  background: #60605c;
  color: var(--cream-alt);
}
.band--dark .band-title {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.375rem, 1.05rem + 1.4vw, 1.9375rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* -------------------------------------------------------- testimonials -- */

.testimonials {
  background: var(--cream);
  padding-block: var(--section-y);
  overflow: hidden;
}
.testimonials .display { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }

.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee ul {
  display: flex;
  flex-shrink: 0;
  gap: 1.5rem;
  padding-right: 1.5rem;
  animation: marquee 64s linear infinite;
}
.marquee:hover ul { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.t-card {
  width: 20rem;
  flex: 0 0 20rem;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(70, 76, 84, 0.07);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 23rem;
}
.t-card blockquote { margin: 0; font-size: 1rem; line-height: 1.5; }
.t-card blockquote p + p { margin-top: 0.85rem; }

/* short rose rule above the attribution */
.t-attrib::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--rose);
  margin-bottom: 0.85rem;
}
.t-card .t-name { font-weight: 500; }
.t-card .t-role { font-size: 0.875rem; font-style: italic; color: #6d737a; margin-top: 0.15rem; }

/* ----------------------------------------------------------- newsletter -- */

.newsletter {
  position: relative;
  background: var(--rose-deep);
  color: var(--white);
  text-align: center;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
.newsletter > .shell { position: relative; z-index: 3; }
.newsletter h2 {
  font-weight: 400;
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.25rem);
  line-height: 1.25;
}
.newsletter p.blurb {
  max-width: 40rem;
  margin: 1.1rem auto 0;
}
.newsletter .note {
  margin-top: 1.1rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.85);
}

.subscribe {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2.25rem;
  flex-wrap: wrap;
}
.subscribe input[type="email"] {
  font: inherit;
  font-size: 1.0625rem;
  width: min(100%, 24rem);
  padding: 0.9rem 1.1rem;
  border: 0;
  border-radius: 8px;
  background: var(--white);
  color: var(--charcoal);
}
.subscribe input::placeholder { color: #9aa0a6; }
.subscribe button {
  font: inherit;
  font-size: 1.0625rem;
  padding: 0.9rem 1.5rem;
  border: 0;
  border-radius: 8px;
  background: var(--charcoal-deep);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.subscribe button:hover { background: #22262b; }

/* --------------------------------------------------------------- footer -- */

.site-footer {
  background: #e0e1d8;
  color: var(--charcoal);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}
.footer-inner {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-name {
  font-weight: 500;
  font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem);
}
.footer-tagline {
  margin-top: 0.7rem;
  max-width: 24rem;
}
.footer-nav ul { display: grid; gap: 0.9rem; text-align: right; }
.footer-nav a {
  text-decoration: none;
  transition: color 0.22s ease;
}
.footer-nav a:hover { color: var(--rose); }

@media (max-width: 640px) {
  .footer-nav ul { text-align: left; }
}

/* ----------------------------------------------------------- about page -- */

.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--sage);
}
/* The photograph fills the full height of the section, so its bottom edge
   lands on the section's, and it crops at the sides rather than cutting her
   off at the waist. Height comes from the copy column beside it. */
.about-media { position: relative; overflow: hidden; }
.about-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.about-copy {
  /* extra top padding clears the header floating over this column */
  padding: calc(var(--header-h) + clamp(2rem, 4vw, 3.5rem)) clamp(1.5rem, 5vw, 4.375rem)
           clamp(3rem, 6vw, 5rem);
  background: var(--sage);
}
.about-copy h1 {
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 2.3vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 2rem;
}
.about-copy p + p { margin-top: 1.5rem; }

/* ------------------------------------------------------- trainings page -- */

.section {
  padding-block: var(--section-y);
  background: var(--cream);
}
.section--alt { background: var(--cream-alt); }

.section-intro { max-width: 46rem; }
.section-intro .eyebrow { display: block; margin-bottom: 1rem; }
.section-intro h1,
.section-intro h2 {
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.125rem);
  line-height: 1.25;
  margin-bottom: 1.25rem;
}

/* Centred variant used on Trainings and Private Study */
.section-intro--center {
  margin-inline: auto;
  text-align: center;
}
/* the eyebrow above a centred intro is upright, not italic */
.section-intro--center .eyebrow { font-style: normal; }
.section-intro--center p { margin-inline: auto; }

.section-intro--rose-heading h1,
.section-intro--rose-heading h2 { color: var(--rose); }

.training-list { margin-top: 2.5rem; }
.training-year {
  font-weight: 500;
  font-size: 1.375rem;
  margin: 2.75rem 0 0.5rem;
}
.training-year:first-child { margin-top: 0; }

/* No rules between rows: the original keeps this list open, not table-like */
.training-row {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr 1fr auto;
  gap: 1rem 2rem;
  align-items: center;
  padding-block: 1.15rem;
  text-decoration: none;
  transition: opacity 0.22s ease;
}
.training-row:hover { opacity: 0.62; }
.training-row.is-closed {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
}
.training-dates { font-size: 1.1875rem; }
.training-title, .training-location { color: var(--charcoal); }
.training-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.0625rem;
  white-space: nowrap;
}
.training-row:hover .arrow { transform: translateX(6px); }
.training-row .arrow { transition: transform 0.28s ease; }

.training-empty { margin-top: 2rem; font-style: italic; }

.help-block { text-align: center; }
.help-block .display { margin-bottom: 1.5rem; }
.help-block p { max-width: 34rem; margin-inline: auto; }
.help-block .arrow-link { margin-top: 2rem; }

/* --------------------------------------------------------- anatomy page -- */

.course-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.75rem);
  align-items: start;
}

.curriculum { margin-top: 1.75rem; max-width: 30rem; }
.curriculum li {
  font-weight: 300;
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);
  line-height: 1.4;
  padding-block: 1.05rem;
  border-bottom: 1px solid rgba(70, 76, 84, 0.18);
}
.curriculum-link { margin-top: 2rem; font-weight: 500; }

/* The whole card links out to the hosted course */
.course-card {
  display: block;
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(70, 76, 84, 0.14);
}
.course-card img {
  width: 100%;
  aspect-ratio: 464 / 283;
  object-fit: cover;
}
.course-card-body { padding: 1.5rem; }
.course-card-title { font-size: 1.25rem; font-weight: 500; }
.course-card-stat { font-size: 1.25rem; font-weight: 500; margin-top: 1.35rem; }
.course-card-body p:last-child { margin-top: 1.35rem; }

/* ---------------------------------------------------------------- forms -- */

/* Full-bleed split: form on a rose panel, photograph alongside it */
.contact-split {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.contact-panel {
  position: relative;
  background: var(--rose-panel);
  color: var(--pale);
  padding: clamp(2.5rem, 5vw, 3.25rem) clamp(1.5rem, 5vw, 2.5rem);
  display: flex;
  justify-content: center;
}
.contact-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 29rem;
}

.contact-media { position: relative; min-height: 20rem; }
.contact-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-title {
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(1.375rem, 1.05rem + 1.4vw, 1.9375rem);
  line-height: 1.2;
  margin-bottom: 1.35rem;
}

.form { display: grid; gap: 1.15rem; }
.form label {
  display: block;
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.form input,
.form textarea {
  font: inherit;
  font-size: 1rem;
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 0;
  border-radius: 10px;
  background: rgba(187, 187, 187, 0.15);
  color: var(--pale);
}
.form input::placeholder,
.form textarea::placeholder { color: rgba(233, 235, 225, 0.62); }
.form textarea { min-height: 6.25rem; resize: vertical; }
.form input:focus,
.form textarea:focus {
  outline: 2px solid rgba(233, 235, 225, 0.55);
  outline-offset: 1px;
  background: rgba(187, 187, 187, 0.22);
}
.form button {
  font: inherit;
  width: 100%;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 0.6rem;
  padding: 0.8rem 1.25rem;
  background: #333333;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.1875rem;
  font-weight: 500;
  transition: background-color 0.25s ease;
}
.form button:hover { background: #1f1f1f; }
.form .hp { position: absolute; left: -9999px; }

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 900px) {
  .ways-grid { grid-template-columns: 1fr; gap: 3rem; }
  .band { grid-template-columns: 1fr; }
  .band-media { min-height: 16rem; }
  .about-split { grid-template-columns: 1fr; }
  .about-media { height: 65vh; }
  .contact-split { grid-template-columns: 1fr; }
  .contact-media { min-height: 16rem; order: 2; }
  .course-grid { grid-template-columns: 1fr; }
  .training-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding-block: 1.5rem;
  }
  .training-cta { justify-self: start; margin-top: 0.6rem; }
}

@media (max-width: 760px) {
  :root { --header-h: 5.25rem; }
  .site-header {
    min-height: var(--header-h);
    padding-top: 0.4rem;
  }
  .site-header .wordmark,
  .site-header .nav-toggle {
    transform: translateY(0.7rem);
  }
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    background: var(--cream);
    padding: 1.5rem var(--gutter) 2.5rem;
    border-bottom: 1px solid rgba(70, 76, 84, 0.12);
    transform: translateY(-120%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .site-nav.is-open { transform: translateY(0); }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 1.15rem; }
  .site-nav a { font-size: 1.25rem; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .t-card { width: 17rem; flex-basis: 17rem; min-height: 0; }
  .subscribe { flex-direction: column; align-items: stretch; }
  .subscribe input[type="email"] { width: 100%; }

  /* Consistent mobile hero rhythm across the site. */
  .page-hero {
    aspect-ratio: 1 / 1;
    min-height: 0;
  }
  /* The supplied Home artwork already has its intended mobile composition. */
  .hero {
    aspect-ratio: 676 / 835;
    min-height: 0;
  }
  .hero img {
    object-position: center 50%;
    transform: translate(4vw, -22px) scale(1.33);
    transform-origin: center 29%;
  }

  .page-anatomy .page-hero img { object-position: center 48%; }
  .page-anatomy .page-hero-label {
    position: absolute;
    top: 60%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
  }
  .page-private-study .page-hero img { object-position: center 50%; }
  .page-private-study .page-hero-label {
    position: absolute;
    top: 53%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
  }

  /* Home offering cards follow the compact Framer mobile treatment. */
  .ways-grid { gap: 3.5rem; }
  .way-card h3 {
    white-space: nowrap;
    font-size: clamp(1.6rem, 7.4vw, 2rem);
    margin-top: 1.25rem;
  }
  .way-card .way-sub { margin-top: 0.55rem; }
  .way-card .way-body { margin-top: 0.85rem; }
  .way-card .btn {
    align-self: flex-start;
    width: auto;
    min-width: 0;
    margin-top: 1.25rem;
    padding: 0.72rem 1rem;
  }

  /* Keep the two Home banner headings visually connected. */
  .band-copy { gap: 0.25rem; }
  .band-copy .btn { margin-top: 1rem; }

  /* The photograph leads into the form on both contact sections. */
  .contact-media {
    order: 1;
    display: block;
    height: 17rem;
    min-height: 17rem;
    aspect-ratio: auto;
  }
  .contact-media img { object-position: center 13%; }
  .contact-panel {
    order: 2;
    padding: 2.15rem var(--gutter) 2.5rem;
  }
  .contact-title { margin-bottom: 1.15rem; }

  /* Show the complete About portrait before the copy, without a dead gap. */
  .about-media {
    display: block;
    height: 32rem;
    min-height: 32rem;
    aspect-ratio: auto;
  }
  .about-media img { object-position: center top; }
  .about-copy {
    padding: 2.25rem var(--gutter) 3.5rem;
  }

  /* Airier footer, matching the mobile reference. */
  .site-footer { padding: 3.25rem 0 3rem; }
  .footer-inner {
    display: block;
  }
  .footer-name {
    font-size: 1.75rem;
    line-height: 1.15;
  }
  .footer-tagline {
    margin-top: 1rem;
    max-width: 20rem;
    line-height: 1.55;
  }
  .footer-nav { margin-top: 2.5rem; }
  .footer-nav ul { gap: 1.5rem; }
}

/* ------------------------------------------------------ desktop pass -- */
/* Stephania's round-2 desktop corrections. Everything here is scoped to
   min-width 901px so the narrow-screen layout above is untouched.
   Two asks: running text set in Ubuntu Light, and the intro sections
   made shorter. Values measured off the Framer site at 1440px. */

@media (min-width: 901px) {

  /* -- 1. body copy in Ubuntu Light --------------------------------- */
  /* A bare element selector, so anything carrying a class-based weight
     (nav, buttons, eyebrows, card titles, headings) keeps it. */
  p, li, dd, blockquote,
  .form input, .form textarea { font-weight: 300; }

  /* Bowlby One SC ships at 400 only, so this label must not go lighter */
  .page-hero .page-hero-label { font-weight: 400; }

  /* -- 2. intro sections: shorter, and set at Framer's 20/28 -------- */

  .intro p,
  .section--intro .section-intro p {
    font-size: 1.25rem;      /* 20px */
    line-height: 1.4;        /* 28px */
  }

  .intro h2,
  .intro--rose h1,
  .section--intro .section-intro h1,
  .section--intro .section-intro h2 {
    font-size: 2.25rem;      /* 36px */
    line-height: 1.2;        /* 43.2px */
  }

  /* Home intro: 70 / 70, heading at 400, copy column 820px */
  .intro { padding-block: 4.375rem; }
  .intro h2 { font-weight: 400; margin-bottom: 2.125rem; }
  .intro p { max-width: 51.25rem; }
  .intro p + p { margin-top: 0.75rem; }
  .intro .arrow-link { margin-top: 1.5rem; }

  /* Anatomy rose band: 65 / 65, heading at 500, copy column 817px */
  .intro--rose { padding-block: 4.0625rem; }
  .intro--rose h1 { font-weight: 500; margin-bottom: 1.9375rem; }
  .intro--rose p { max-width: 51.0625rem; }

  /* Trainings and Private Study share the .section shell */
  .section--intro .section-intro h1,
  .section--intro .section-intro h2 { font-weight: 500; }

  /* Trainings: 63 / 66, copy column 904px */
  .section--intro:has(.section-intro--trainings) {
    padding-block: 3.9375rem 3.5625rem;
  }
  .section-intro--trainings { max-width: 56.5rem; }
  .section-intro--trainings .eyebrow { margin-bottom: 1.375rem; }
  .section-intro--trainings h1 { margin-bottom: 2.6875rem; }

  /* Private Study: 45 / 58, copy column 899px, heading held narrower */
  .section--intro:has(.section-intro--private) {
    padding-block: 2.8125rem 3.625rem;
  }
  .section-intro--private { max-width: 56.1875rem; }
  .section-intro--private h1 {
    max-width: 40rem;
    margin-inline: auto;
    margin-bottom: 1.9375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee ul { animation: none; flex-wrap: wrap; justify-content: center; }
  .marquee { mask-image: none; -webkit-mask-image: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}