/* ==========================================================================
   Wayfarer Counseling
   ---------------------------------------------------------------------------
   VISUAL LANGUAGE — aerial perspective.

   Look at a range of ridges at dusk: the near one is dark, cool and sharp; each
   one behind it is paler, softer and further away. Distance is carried by value,
   not by outline. That is the whole system here.

   Anxiety flattens experience — people describe their world shrunk down to a
   small bubble of what feels safe. So the site is built to have depth: layered
   planes, a parallax hero where three layers move at three speeds, and section
   grounds that step through values of one cool hue.

   Rules:
     1. Depth comes from VALUE. No cards, no borders, no shadows, no radius.
     2. Warm ochre is light breaking through. It marks only what you can act on.
     3. No decorative marks anywhere. Type, photography and space do the work.
     4. One repeated structure: the term/meaning pair — a short name on the
        left, the plain-English explanation on the right. It's how Jeff writes,
        so it's how the page is built.
   ========================================================================== */

/* Self-hosted variable fonts — no third-party request, no tracking, one round
   trip each. Latin subset only; the practice site is English-only. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url('../fonts/newsreader-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/archivo-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- the depth scale: near (dark, cool) to far (pale) ----------------- */
  --near:    #131A22;   /* foreground ridge — body text, darkest plane       */
  --ridge:   #2A3D51;   /* middle distance — dark section grounds            */
  --far:     #55697C;   /* far ridges — secondary text                       */
  --haze:    #EDF0F2;   /* the air itself — page ground                      */
  --veil:    #F7F9FA;   /* a plane nearer the reader                         */
  --edge:    #C3CDD5;   /* hairlines                                         */
  --rule:    #9FB0BE;   /* hairlines that carry meaning                      */
  --seam:    #3B506A;   /* hairlines on dark planes                          */

  /* ---- warm light: the only warm hue, only on things you can act on ----- */
  --light:   #8C6420;   /* on pale grounds                                   */
  --light-d: #D9A552;   /* on dark grounds                                   */
  --mist:    #A9BACA;   /* secondary text on dark grounds                    */

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --step--1: 0.9375rem;
  --step-0:  1.125rem;
  --step-1:  1.3125rem;
  --step-2:  clamp(1.5rem, 2.2vw, 1.875rem);
  --step-3:  clamp(1.875rem, 3.4vw, 2.75rem);
  --step-4:  clamp(2.375rem, 4.8vw, 3.75rem);

  --rail-w:  150px;
  --gutter:  clamp(1.5rem, 5vw, 5rem);
  --measure: 62ch;
  --band:    clamp(4.5rem, 9vw, 7.5rem);
  --max:     1240px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--haze);
  color: var(--near);
  font-family: var(--serif);
  font-size: var(--step-0);
  font-variation-settings: 'opsz' 16;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--ridge); color: var(--haze); }

:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--light);
  outline-offset: 3px;
}
.plane--dark :where(a, button, input, textarea, [tabindex]):focus-visible,
.hero :where(a, button):focus-visible { outline-color: var(--light-d); }

/* ------------------------------------------------------------- typography */

h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }

h1 {
  font-size: var(--step-4);
  font-variation-settings: 'opsz' 48;
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.021em;
}

h2 {
  font-size: var(--step-3);
  font-variation-settings: 'opsz' 32;
  line-height: 1.12;
  letter-spacing: -0.014em;
}

h3 {
  font-size: var(--step-1);
  font-variation-settings: 'opsz' 20;
  font-weight: 500;
  line-height: 1.28;
}

p { margin: 0 0 1.1em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--step-2);
  font-variation-settings: 'opsz' 28;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.008em;
  max-width: 36ch;
}

/* Labels sit in the far distance: pale, small, wide-tracked. No icons. */
.label {
  display: block;
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--far);
  max-width: none;
  margin: 0 0 1.5rem;
}
.plane--dark .label { color: var(--mist); }

.ui { font-family: var(--sans); font-size: var(--step--1); line-height: 1.55; }
.num { font-family: var(--sans); font-variant-numeric: tabular-nums; }

a { color: var(--light); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
.plane--dark a { color: var(--light-d); }

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

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  padding: .95rem 1.6rem;
  border: 1px solid var(--light);
  background: var(--light);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { background: var(--near); border-color: var(--near); color: var(--haze); }

.btn--quiet { background: transparent; color: var(--near); border-color: var(--rule); }
.btn--quiet:hover { background: var(--near); border-color: var(--near); color: var(--haze); }

.plane--dark .btn { background: var(--light-d); border-color: var(--light-d); color: var(--near); }
.plane--dark .btn:hover { background: var(--haze); border-color: var(--haze); color: var(--near); }
.plane--dark .btn--quiet { background: transparent; color: var(--haze); border-color: var(--far); }
.plane--dark .btn--quiet:hover { background: var(--haze); color: var(--near); border-color: var(--haze); }

/* -------------------------------------------------------------- the rail */
/* A depth gauge, not a set of markers: one hairline spine with a filled
   segment showing how far down the page you are. Labels resolve out of the
   haze as they come near. */

.rail { display: none; }

@media (min-width: 1320px) {
  .rail {
    display: block;
    position: fixed;
    top: 50%;
    left: 2.25rem;
    transform: translateY(-50%);
    z-index: 40;
    width: calc(var(--rail-w) - 2.25rem);
    padding-left: 1rem;
    border-left: 1px solid var(--edge);
  }
  .rail::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 0;
    width: 1px;
    height: var(--rail-progress, 0%);
    background: var(--near);
    transition: height .25s ease-out;
  }
  .rail__list { list-style: none; margin: 0; padding: 0; }
  .rail__item + .rail__item { margin-top: .5rem; }
  .rail__link {
    display: block;
    font-family: var(--sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--far);
    transition: color .3s ease;
  }
  .rail__item.is-passed .rail__link { color: var(--ridge); }
  .rail__item.is-current .rail__link { color: var(--near); }
  .rail__link:hover { color: var(--light); }

  body { padding-left: var(--rail-w); }
}

/* ------------------------------------------------------- planes (depth) */

.plane { position: relative; padding: var(--band) 0; }
.plane--tight { padding: calc(var(--band) * .62) 0; }

.plane--haze  { background: var(--haze); }
.plane--veil  { background: var(--veil); }
.plane--ridge { background: var(--ridge); }
.plane--near  { background: var(--near); }

.plane--dark { color: var(--haze); }
.plane--dark h1, .plane--dark h2, .plane--dark h3 { color: var(--haze); }
.plane--dark p { color: var(--mist); }

.plane__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.rule { border: 0; border-top: 1px solid var(--edge); margin: 0; }
.plane--dark .rule { border-top-color: var(--seam); }

/* Skip link. Off the top of the screen until it is focused, which is the first
   thing Tab reaches on every page — otherwise a keyboard user walks the logo and
   six nav items before reaching the words, on every single page. */
.skip {
  position: fixed;
  top: 0;
  left: var(--gutter);
  z-index: 100;
  transform: translateY(-120%);
  background: var(--near);
  color: var(--haze);
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  padding: .8rem 1.25rem;
  transition: transform .18s ease;
}
.skip:focus, .skip:focus-visible { transform: translateY(0); }
main:focus { outline: none; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--haze);
  background: color-mix(in srgb, var(--haze) 90%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge);
}
.site-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: .875rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.site-header__brand { display: block; text-decoration: none; }
.site-header__brand img { width: 152px; }

.site-nav { display: flex; align-items: center; gap: 1.75rem; }
.site-nav a {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--near);
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
.site-nav a:hover, .site-nav a[aria-current='page'] { border-bottom-color: var(--light); color: var(--light); }
.site-nav .btn { padding: .625rem 1.125rem; font-size: .8125rem; color: #FFFFFF; border-bottom-width: 1px; }
.site-nav .btn:hover { color: var(--haze); border-bottom-color: var(--near); }

.nav-toggle { display: none; }

/* ------------------------------------------------------------------- hero */
/* Three planes at three speeds: the photograph furthest back, a graded veil
   in the middle, the words nearest the reader. */

.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--near);
  isolation: isolate;
}

.hero__layer { position: absolute; inset: 0; will-change: transform; }

.hero__photo { z-index: 0; top: -14%; height: 128%; }
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}

/* Aerial perspective made literal: the far distance hazes out to the page
   ground, so the hero dissolves into the section beneath it. */
.hero__veil {
  z-index: 1;
  background:
    linear-gradient(to top, var(--haze) 0%, rgba(237,240,242,0) 24%),
    linear-gradient(to top, rgba(19,26,34,.84) 0%, rgba(19,26,34,.36) 54%, rgba(19,26,34,.58) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4.5rem, 11vw, 8rem);
  will-change: transform;
}

.hero__content { max-width: 46rem; }
.hero .label { color: var(--mist); }
.hero h1 { color: #FFFFFF; margin-bottom: 1.5rem; }
.hero h1 em { font-style: normal; color: var(--light-d); }
.hero__sub {
  font-size: var(--step-1);
  line-height: 1.5;
  color: #E4EAEF;
  max-width: 46ch;
  margin-bottom: 2.25rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.5rem; }
.hero .btn { background: var(--light-d); border-color: var(--light-d); color: var(--near); }
.hero .btn:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--near); }
.hero .btn--quiet { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.5); }
.hero .btn--quiet:hover { background: #FFFFFF; color: var(--near); border-color: #FFFFFF; }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.28);
  font-family: var(--sans);
  font-size: .8125rem;
  color: #D6DFE6;
  max-width: none;
}
.hero__facts b { color: #FFFFFF; font-weight: 700; }

/* ------------------------------------------------------------ section head */

.head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.head h2 { max-width: 22ch; }
.head p { margin-top: 1rem; color: var(--far); }
.plane--dark .head p { color: var(--mist); }

.reading { max-width: 36rem; }
.reading .lead { max-width: none; }

/* ------------------------------------------------- the term/meaning pair */
/* The one repeated structure on the site. A short name, then what it means. */

.pairs { display: grid; }
.pair {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: 1.5rem 0;
  border-top: 1px solid var(--edge);
}
.pairs .pair:last-child { border-bottom: 1px solid var(--edge); }
.plane--dark .pair { border-top-color: var(--seam); }
.plane--dark .pairs .pair:last-child { border-bottom-color: var(--seam); }

.pair__term {
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--light);
}
.plane--dark .pair__term { color: var(--light-d); }
.pair__body p { font-size: 1rem; color: var(--far); max-width: var(--measure); }
.plane--dark .pair__body p { color: var(--mist); }
.pair__body b { color: var(--near); font-weight: 600; }
.plane--dark .pair__body b { color: var(--haze); }

/* ------------------------------------------------------------ what I treat */

.treat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); }
.treat__item h3 { margin-bottom: .75rem; padding-top: 1.25rem; border-top: 2px solid var(--near); }
.treat__item p { font-size: 1rem; color: var(--far); max-width: var(--measure); }
.treat__method {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--light);
}

/* --------------------------------------------------------------- the route */
/* A real sequence: what happens, in order, with the number that matters. */

.route { display: grid; }
.route__step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 14rem);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding: 2rem 0;
  border-top: 1px solid var(--seam);
}
.route__step:last-child { border-bottom: 1px solid var(--seam); }
.route__n {
  font-family: var(--sans);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--far);
  line-height: 1.1;
}
.route__step h3 { margin-bottom: .5rem; }
.route__step p { color: var(--mist); font-size: 1rem; max-width: var(--measure); }
.route__meta { font-family: var(--sans); padding-top: .2rem; }
.route__meta .k {
  display: block;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: .3rem;
}
.route__meta .v { font-size: 1.375rem; font-variant-numeric: tabular-nums; color: var(--light-d); }

/* ------------------------------------------------------ insurance + fees */

.money { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.plans__col h3 { margin-bottom: 1rem; font-size: 1.0625rem; padding-bottom: .5rem; border-bottom: 2px solid var(--near); }
.plans__list { list-style: none; margin: 0; padding: 0; }
.plans__list li {
  font-family: var(--sans);
  font-size: .9375rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--edge);
}

.fees { background: var(--veil); padding: 2rem; }
.fees h3 { margin-bottom: 1.25rem; }
.fees__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--edge);
}
.fees__row:last-of-type { border-bottom: 0; }
.fees__name { font-family: var(--sans); font-size: .9375rem; }
.fees__name em { display: block; font-style: normal; font-size: .75rem; color: var(--far); letter-spacing: .06em; }
.fees__amt { font-family: var(--sans); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.fees__note { margin-top: 1.25rem; font-family: var(--sans); font-size: .8125rem; color: var(--far); max-width: var(--measure); }

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

.about { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.about__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.about__creds { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.about__creds li {
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--far);
  padding: .45rem 0;
  border-top: 1px solid var(--edge);
}

/* ---------------------------------------------------------------- contact */

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }

.details { list-style: none; margin: 0; padding: 0; }
.details li { padding: 1.1rem 0; border-top: 1px solid var(--seam); }
.details li:last-child { border-bottom: 1px solid var(--seam); }
.details .k {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: .35rem;
}
.details .v { font-family: var(--sans); font-size: 1.0625rem; color: var(--haze); }
.details .v a { color: var(--haze); text-decoration-color: var(--far); }
.details .v a:hover { color: var(--light-d); }

.hours { display: grid; grid-template-columns: auto auto; gap: .4rem 1.5rem; justify-content: start; font-family: var(--sans); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.hours dt { color: var(--mist); }
.hours dd { margin: 0; color: var(--haze); }

.form { display: grid; gap: 1.25rem; }
.form__field { display: grid; gap: .4rem; }
.form__field label {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mist);
}
.form__field .opt { font-weight: 400; letter-spacing: .04em; text-transform: none; }
.form__field input,
.form__field textarea {
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--near);
  background: var(--haze);
  border: 1px solid transparent;
  border-radius: 0;
  padding: .8rem .875rem;
  width: 100%;
}
.form__field textarea { min-height: 8rem; resize: vertical; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form__note { font-family: var(--sans); font-size: .8125rem; color: var(--mist); max-width: 48ch; }
.form__note a { color: var(--light-d); }

/* A notice, set apart by ground value rather than a border stripe. */
/* ------------------------------------------------- the start-here panel */
/* Replaces the old mailto form. Inquiries go to SimplePractice, which is
   under a BAA - so unlike email, the whole trip is HIPAA-protected. The
   embeddable widget is Plus-plan only, so this links out instead. */
.start h3 { margin: .6rem 0 1rem; }
.start > p { font-family: var(--sans); font-size: 1.0625rem; color: var(--haze); max-width: 52ch; }
.start__cta { margin-top: 1.75rem; }
.start__sub { margin: 2.25rem 0 .875rem; }

.asks { list-style: none; margin: 0; padding: 0; max-width: 52ch; }
.asks li {
  font-family: var(--sans);
  font-size: .9375rem;
  color: var(--haze);
  padding: .7rem 0 .7rem 1.35rem;
  border-top: 1px solid var(--seam);
  position: relative;
}
.asks li:last-child { border-bottom: 1px solid var(--seam); }
.asks li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: .4rem; height: 1px; background: var(--far); }
.start .form__note { margin-top: 1.1rem; }

.notice { background: #1D2B3A; padding: 1.25rem 1.5rem; margin-top: 2.5rem; }
.notice p { font-family: var(--sans); font-size: .875rem; color: var(--mist); max-width: 56ch; }
.notice p + p { margin-top: .6rem; }
.notice ul { font-family: var(--sans); font-size: .875rem; color: var(--mist); margin: .7rem 0 0; padding-left: 1.1rem; max-width: 56ch; }
.notice li { margin-bottom: .4rem; }
.notice li::marker { color: var(--far); }
.notice li b { color: var(--haze); font-weight: 600; }
.notice--pale ul { color: var(--far); }
.notice--pale li b { color: var(--near); }
.notice a { color: var(--light-d); }
.notice strong { color: var(--haze); }

.notice--pale { background: var(--veil); margin-top: 0; }
.notice--pale p { color: var(--far); }
.notice--pale a { color: var(--light); }
.notice--pale strong { color: var(--near); }

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

.site-footer { background: var(--near); color: var(--mist); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.site-footer__inner { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.site-footer h2 { font-family: var(--sans); font-size: .6875rem; font-weight: 600; line-height: 1.4; letter-spacing: .15em; text-transform: uppercase; color: var(--mist); margin: 0 0 1rem; }
.site-footer img { width: 152px; margin-bottom: 1.25rem; filter: brightness(0) invert(1); opacity: .9; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a { font-family: var(--sans); font-size: .9375rem; color: var(--mist); text-decoration: none; }
.site-footer a:hover { color: var(--haze); text-decoration: underline; }
.site-footer p { font-family: var(--sans); font-size: .9375rem; max-width: 34ch; }
.site-footer__base a { font-size: inherit; color: var(--mist); text-decoration: underline; text-decoration-color: var(--far); }
.site-footer__base a:hover { color: var(--haze); text-decoration-color: var(--haze); }
.site-footer__base {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2A3644;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--mist);
}

/* -------------------------------------------------------- interior pages */

.page-head { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3rem); }
.page-head h1 { max-width: 18ch; margin-bottom: 1.25rem; }
.page-head p { color: var(--far); font-size: var(--step-1); }

/* A photograph used as a far plane. Full-bleed, and veiled a step back toward
   the haze so it reads as distance rather than as a picture competing with the
   type. Same idea as the hero, minus the parallax. */
.band { position: relative; display: block; }
.band img { width: 100%; height: clamp(180px, 26vw, 360px); object-fit: cover; }
.band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(237, 240, 242, .13);
  pointer-events: none;
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.75rem; padding-top: 1.25rem; border-top: 2px solid var(--near); }
.prose h3 { margin-top: 2.25rem; }
.prose h2 + p, .prose h3 + p, .prose h2 + .label { margin-top: .75rem; }
.prose .label { margin-bottom: 0; }
.prose ul { margin: 0; padding-left: 1.15rem; }
.prose li { margin-bottom: .7em; }
.prose li::marker { color: var(--far); }
.prose > :first-child { margin-top: 0; }
.prose > h2:first-child { border-top: 0; padding-top: 0; }

/* Legal text — a notice of privacy practices is long, dense and read in
   fragments. Slightly smaller, and every heading is an anchor target. */
.prose--legal { font-size: 1.0625rem; }
.prose--legal h2 { font-size: var(--step-2); }
.prose--legal h3 { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--edge); font-size: 1.125rem; }
.prose--legal h2 + .stamp + p + h3 { margin-top: 2rem; }
.prose--legal ul { margin-top: .8rem; }
.prose--legal .stamp {
  font-family: var(--sans);
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--far);
}

.toc { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 3rem; max-width: none; }
.toc a {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-decoration: none;
  color: var(--near);
  border-bottom: 1px solid var(--edge);
  padding-bottom: .2rem;
  transition: border-color .18s ease, color .18s ease;
}
.toc a:hover { border-bottom-color: var(--light); color: var(--light); }

/* ---------------------------------------------------------------- motion */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.reveal.is-in.is-in--now { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__layer, .hero__inner { transform: none !important; }
}

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

@media (max-width: 1000px) {
  .treat { grid-template-columns: 1fr; gap: 2rem; }
  .money, .contact, .about { grid-template-columns: 1fr; }
  .about__figure { max-width: 20rem; }
  .route__step { grid-template-columns: 3rem minmax(0, 1fr); }
  .route__meta { grid-column: 2 / -1; padding-top: 1rem; }
}

@media (max-width: 720px) {
  :root { --step-0: 1.0625rem; }
  .hero { min-height: 0; }
  /* Tight enough that the primary call to action clears the fold on a small
     phone, with just enough top padding to keep the words off the photo's
     subject. */
  .hero__inner { padding-bottom: clamp(2.5rem, 8vw, 4rem); padding-top: clamp(6rem, 26vw, 10rem); }
  .hero .label { margin-bottom: 1rem; }
  .hero__sub { margin-bottom: 1.5rem; }
  .hero__actions { margin-bottom: 1.75rem; }
  .site-header__inner { padding-block: .75rem; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--haze);
    border-bottom: 1px solid var(--edge);
    padding: .5rem var(--gutter) 1.25rem;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: .8rem 0; border-bottom: 1px solid var(--edge); }
  .site-nav .btn { margin-top: .875rem; text-align: center; border-bottom-width: 1px; }
  .nav-toggle {
    display: inline-block;
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: none;
    border: 0;
    border-bottom: 2px solid var(--light);
    color: var(--near);
    padding: .5rem 0 .25rem;
    cursor: pointer;
  }
  .plans { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; gap: .35rem; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
}