/* Wohl landing, v4 Aperture. Tokens mirror the Paper file: three type sizes, one blue. */
:root {
  --color-background: #F3F3F3;
  --color-surface: #FFFFFF;
  --color-foreground: #141414;
  --color-muted-foreground: #616161;
  --color-border: #CFCFCF;
  --color-primary: #0870B8;
  --color-primary-tint: #8CC2EE;
  --color-sage: #8FA38A;
  --color-sage-field: #E4EAE1;

  --font-sans: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, monospace;

  --text-display: 64px;
  --leading-display: 66px;
  --tracking-display: -0.035em;
  --text-display-compact: 44px;
  --leading-display-compact: 46px;
  --text-body: 17px;
  --leading-body: 27px;
  --text-label: 12px;
  --leading-label: 18px;
  --tracking-label: 0.12em;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* Set by film.js from the section's ground. */
  --fg: #FFFFFF;
  --fg-accent: var(--color-primary-tint);
  --fg-brand: var(--color-primary-tint);
}

body[data-theme="light"] {
  --fg: var(--color-foreground);
  --fg-accent: var(--color-muted-foreground);
  --fg-brand: var(--color-primary);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Each scroll step lands on the next section of the film; the content after it snaps by section. */
html { -webkit-text-size-adjust: 100%; scroll-snap-type: y mandatory; }
.film__snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; }
.section { scroll-snap-align: start; }
.footer { scroll-snap-align: end; }
body {
  background: var(--color-foreground);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.m-only { display: none !important; }

/* Type: the only three sizes. */
.display {
  font-family: var(--font-sans);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
  quotes: none;
}
.body { font-size: var(--text-body); line-height: var(--leading-body); }
.strong { font-weight: 700; }
.label, .chapter {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 400;
}
.muted { color: var(--color-muted-foreground); }

/* Buttons: words, not measurements, so sans 17/700. Blue never changes on hover. */
.button {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-weight: 700;
  line-height: 22px;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out);
}
.button:active { transform: scale(0.97); }
.button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.button--large { height: 56px; padding: 0 28px; }

/* The nav always sits on the ground, never on the picture, and carries the section count. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  height: 88px;
  padding: 0 var(--gutter, 88px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  color: var(--fg);
  transition: color 240ms var(--ease-out);
}
.nav__brand { display: flex; align-items: center; gap: 32px; }
.nav__lockup { color: var(--fg-brand); transition: color 240ms var(--ease-out); }
.nav__lockup svg { display: block; width: 98px; height: 28px; }
.nav__count { color: var(--fg-accent); font-variant-numeric: tabular-nums; transition: color 240ms var(--ease-out); }
body[data-theme="light"] .nav__count { color: var(--color-foreground); }
.nav__end { display: flex; align-items: center; gap: 40px; }
.nav__links { display: flex; gap: 32px; }
.nav.is-past { background: rgba(255,255,255,0.94); color: var(--color-foreground); backdrop-filter: blur(8px); height: 72px; box-shadow: 0 1px 0 var(--color-border); }
.nav.is-past .nav__lockup { color: var(--color-primary); }
.nav.is-past .nav__count { visibility: hidden; }

/* The film: a ground, and the picture clipped to an opening in it. */
.film { position: relative; }
.film__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  color: var(--fg);
}
.film__stage, .film__canvas, .film__marks { position: absolute; inset: 0; width: 100%; height: 100%; }
.film__stage { background: var(--color-foreground); transition: background-color 400ms var(--ease-out); }
.film__canvas { display: block; }
.film__marks { pointer-events: none; overflow: visible; }

/* Marks: blue is Wohl's line; joints are white discs with a graphite ring. Joints keep their
   screen size however the film is scaled (--s is the film's scale). */
.marks { opacity: 0; transition: opacity 240ms var(--ease-out); }
.marks.is-on { opacity: 1; }
.marks line, .marks circle { vector-effect: non-scaling-stroke; fill: none; }
.marks .halo { stroke: rgba(20,20,20,.45); stroke-width: 6; }
.marks .halo--thin { stroke-width: 5; }
.marks .chain { stroke: #FFFFFF; stroke-width: 2; }
.marks .dashed { stroke-dasharray: 4 3; }
.marks .leader { stroke: #FFFFFF; stroke-width: 1; }
.marks .joint { fill: #FFFFFF; stroke: var(--color-foreground); stroke-width: 2; r: calc(8px * var(--rk, 1) / var(--s, 1)); }
.marks .joint--md { r: calc(7px * var(--rk, 1) / var(--s, 1)); }
.marks .joint--sm { stroke-width: 1.5; r: calc(5px * var(--rk, 1) / var(--s, 1)); }
.marks .underlay { stroke: #FFFFFF; stroke-width: 6; }
.marks .wohl-line { stroke: var(--color-primary); stroke-width: 2; }
.marks [pathLength] { stroke-dasharray: 1; stroke-dashoffset: var(--draw, 1); }

.tag {
  position: absolute;
  left: 0; top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  background: #FFFFFF;
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
  pointer-events: none;
}
.tag--blue { background: var(--color-primary); color: #FFFFFF; }
.tag.is-on { opacity: 1; }

/* The design layer is a 1440x900 board scaled to the viewport, so every section keeps its composition. */
.film__design {
  position: absolute;
  left: 0; top: 0;
  width: 1440px;
  height: 900px;
  transform-origin: 0 0;
  pointer-events: none;
}
.beat {
  position: absolute;
  left: var(--x, 88px);
  top: var(--y);
  width: var(--w);
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 320ms var(--ease-out), transform 480ms var(--ease-out);
}
.beat.is-on { opacity: 1; transform: none; pointer-events: auto; }
.beat .chapter { color: var(--fg-accent); }
.beat .body { width: var(--bw, auto); padding-top: 8px; }
.beat .body--at { position: absolute; left: var(--bx, 0px); top: var(--by); padding-top: 0; }
/* Readings: the measured value beside the picture it measures. Mono means it was measured. */
.reading { display: flex; flex-direction: column; gap: 20px; padding-top: 24px; }
.reading__value { font-family: var(--font-mono); font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: -0.02em; font-weight: 500; color: var(--fg); }
.reading__value--blue { color: var(--color-primary); }
body[data-theme="dark"] .reading__value--blue { color: var(--color-primary-tint); }
.reading__label { width: 440px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border); color: var(--fg); }
body[data-theme="dark"] .reading__label { border-color: #FFFFFF40; }
.reading + .body { padding-top: 4px; }

/* 10: the care pathway, from the rate card, never a price. */
.pathway { position: absolute; left: 0; top: 316px; width: 1264px; }
.pathway__phases { position: relative; height: 36px; }
.pathway__phases p { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; }
.pathway__line { position: absolute; left: -88px; top: 52px; width: 1440px; height: 40px; display: block; }
.pathway__steps { position: absolute; top: 108px; left: 0; display: flex; width: 1264px; }
.pathway__step { width: 253px; flex-shrink: 0; padding-right: 36px; display: flex; flex-direction: column; gap: 10px; }
.pathway__step .body { padding-top: 0; width: auto; }
.pathway__desc { height: 135px; }
.pathway__tiers { padding-top: 6px; color: var(--color-muted-foreground); }
.pathway__note { position: absolute; top: 412px; left: 0; width: 1264px; padding-top: 16px; border-top: 1px solid var(--color-border); }

/* 11: the fee bracket beside the words, the team below. Only the measurement moves. */
.compare { position: absolute; left: 712px; top: 8px; width: 552px; display: flex; flex-direction: column; gap: 10px; }
.compare svg { display: block; width: 100%; overflow: visible; }
.compare__ticks { height: 24px; }
.compare__bracket { height: 40px; }
.compare__fees { display: flex; }
.compare__fees span { width: 55px; flex-shrink: 0; }
.compare__ours { padding-top: 28px; }
.compare .base { stroke: var(--color-border); stroke-width: 1; }
.compare .ticks line { stroke: var(--color-foreground); stroke-width: 1; }
.compare .ticks--muted line { stroke: var(--color-muted-foreground); }
.compare .ticks--open line { stroke: var(--color-border); }
.compare .bracket { fill: none; stroke: var(--color-primary); stroke-width: 3; }
.compare .bracket--open { stroke-dasharray: 8 8; }
.compare .bracket[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.beat.is-on .compare .bracket[pathLength] { animation: draw 700ms var(--ease-out) 240ms forwards; }
.compare .bracket--open { opacity: 0; transition: opacity 240ms var(--ease-out); }
.beat.is-on .compare .bracket--open { opacity: 1; transition-delay: 700ms; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* 13: the close. A Wohl blue panel over the fascia, white out of blue, the ribbon hanging from its top. */
.beat--panel { left: 720px; top: 520px; width: 1200px; height: 800px; gap: 0; background: var(--color-primary); color: #FFFFFF; }
.panel__words { position: absolute; left: 64px; top: 56px; width: 520px; display: flex; flex-direction: column; gap: 16px; }
.beat--panel .chapter, .beat--panel .label { color: #FFFFFF; }
.beat--panel h2 { width: 480px; }
.actions .label { white-space: nowrap; }
.actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 12px; }
.button--inverse { background: #FFFFFF; color: var(--color-primary); }
.button--inverse:focus-visible { outline-color: #FFFFFF; }
.ribbon { position: absolute; left: 592px; top: 0; width: 64px; height: 327px; overflow: visible; clip-path: inset(0 0 100% 0); transition: clip-path 700ms var(--ease-out) 200ms; }
.beat.is-on .ribbon { clip-path: inset(0 0 0 0); }
.ribbon rect, .ribbon path { fill: #FFFFFF; }
.ribbon text { fill: #FFFFFF; font-family: "Instrument Sans", sans-serif; font-weight: 700; font-stretch: 75%; font-size: 61.11px; }
.ribbon__mark circle, .ribbon__mark path { fill: none; stroke: #FFFFFF; stroke-width: 40; }

.film__loading { position: absolute; left: var(--gutter, 88px); bottom: 32px; color: var(--fg); opacity: .7; transition: opacity 400ms; display: none; }
.film__loading:not(.is-done) { display: block; }

/* Still mode (reduced motion, data saver, ?still): same design, nothing animates. */
html.is-still .beat, html.is-still .marks, html.is-still .tag, html.is-still .film__stage,
html.is-still .nav, html.is-still .ribbon, html.is-still .compare .bracket--open { transition: none; }
html.is-still .beat { transform: none; }
html.is-still .beat.is-on .compare .bracket[pathLength] { animation: none; stroke-dashoffset: 0; }

/* After the pin. */
.section { padding: 128px 88px 96px; }
.section--surface { background: var(--color-surface); }
.section--ground { background: var(--color-background); padding-top: 96px; }
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; border-bottom: 1px solid var(--color-foreground); padding-bottom: 24px; margin-bottom: 64px; }
.section__head--small { margin-bottom: 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.steps > div { display: flex; flex-direction: column; gap: 12px; }
.clinics { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
.clinics li { padding: 20px 0; border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 4px; }

.footer { background: var(--color-foreground); color: #FFFFFF; padding: 96px 88px 64px; display: flex; flex-direction: column; gap: 64px; }
.footer .muted { color: #9E9E9E; }
.footer__top { display: flex; justify-content: space-between; gap: 40px; }
.footer__lockup { display: block; width: 140px; height: 40px; color: var(--color-primary-tint); margin-bottom: 32px; }
.footer__facts { display: flex; flex-direction: column; gap: 12px; width: 520px; }
.tint { color: var(--color-primary-tint); }
.footer__base { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid #3A3A3A; padding-top: 24px; }

/* Phones: the words always sit at the top, the opening is anchored to the foot. */
@media (max-width: 767px) {
  :root { --text-display: var(--text-display-compact); --leading-display: var(--leading-display-compact); }
  .d-only { display: none !important; }
  .m-only { display: revert !important; }
  .nav { height: 56px; padding: 0 16px; }
  .nav__brand { gap: 14px; }
  .nav__lockup svg { width: 84px; height: 24px; }
  .nav__links { display: none; }
  .nav .button--nav { height: 36px; padding: 0 14px; }
  .nav.is-past { height: 56px; }
  .film__design { width: 100%; height: 100%; transform: none !important; }
  .marks { --rk: 0.75; }
  .beat { left: 16px; right: 16px; top: 96px; width: auto; gap: 12px; }
  .beat .body, .beat .body--at { position: static; width: auto; padding-top: 4px; }
  .reading { gap: 8px; padding-top: 8px; }
  .reading__value { font-size: var(--text-display-compact); line-height: var(--leading-display-compact); }
  .reading__label { width: auto; padding-bottom: 12px; }
  .beat--shut { top: calc(50% - 116px); }
  .beat--shut .body--at { position: absolute; top: 156px; left: 0; right: 0; }
  .pathway { position: static; width: auto; padding-top: 20px; }
  .pathway__steps { position: static; flex-direction: column; width: auto; gap: 0; }
  .pathway__step { width: auto; padding: 0 0 14px 24px; gap: 2px; position: relative; border-left: 3px solid var(--color-primary); }
  .pathway__step--hurts { border-left: 1px solid var(--color-border); margin-left: 1px; padding-left: 26px; }
  .pathway__step--after { border-left-color: var(--color-sage); }
  .pathway__step::before { content: ""; position: absolute; left: -8px; top: 0; width: 13px; height: 3px; background: currentColor; }
  .pathway__step--hurts::before { left: -7px; height: 2px; background: var(--color-foreground); }
  .pathway__step--plan::before { background: var(--color-primary); }
  .pathway__step--after::before { background: var(--color-sage); }
  .pathway__tiers { padding-top: 0; color: var(--color-foreground); }
  .compare { position: static; width: auto; gap: 8px; padding-top: 20px; }
  .compare__ticks { height: 20px; }
  .compare__bracket { height: 32px; }
  .compare__ours { padding-top: 12px; }
  .beat--panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: min(360px, 43%); min-height: 300px; }
  .panel__words { left: 16px; top: 36px; width: calc(100% - 100px); gap: 12px; }
  .beat--panel h2 { width: auto; }
  .actions .label { white-space: normal; }
  .ribbon { left: auto; right: 16px; width: 52px; height: 266px; }
  .actions { gap: 12px; padding-top: 8px; }
  .actions .button--large { height: 52px; padding: 0 22px; }
  .film__loading { display: none !important; }
  .section, .footer { padding-left: 16px; padding-right: 16px; }
  .section__head, .footer__top, .footer__base { flex-direction: column; align-items: flex-start; }
  .steps, .clinics { grid-template-columns: 1fr; }
  .footer__facts { width: auto; }
}
/* Short phones: 11 keeps the headline and the bracket. */
@media (max-width: 767px) and (max-height: 740px) {
  .m-short-hide { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .beat, .marks, .tag, .film__stage, .ribbon { transition: none; }
  .beat { transform: none; }
}