/* =========================================================
   The Next Big Thing — site styles
   Every value references css/tokens.css, which is generated
   from design-system/tokens.json. Change tokens, not this file.
   ========================================================= */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-24);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  letter-spacing: var(--text-body-tracking);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote, fieldset { margin: 0; }
ol[role="list"], ul[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }

:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

::selection { background: var(--color-accent); color: var(--color-text); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

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

.skip-link {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-action);
  color: var(--color-action-fg);
  transform: translateY(-200%);
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}
.skip-link:focus { transform: none; }

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

.section { padding-block: var(--space-section); }
.section--sunken { background: var(--color-surface-sunken); }
.section--tint { background: var(--color-surface-tint); }

.section-head {
  display: grid;
  gap: var(--space-5);
  max-width: var(--space-measure-wide);
  margin-block-end: var(--space-16);
}

.section-head--split { max-width: none; }

@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: 1.25fr 1fr;
    align-items: end;
    column-gap: var(--space-16);
  }
  .section-head--split .eyebrow { grid-column: 1 / -1; }
}

.section-head--centered {
  margin-inline: auto;
  text-align: center;
}
.section-head--centered .lead { max-width: var(--space-measure-wide); margin-inline: auto; }
@media (min-width: 900px) {
  .section-head--centered { max-width: none; }
}

/* ---------- Typography ---------- */
.display, .h-xl, .h-lg, .h-md, .title, .statement {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" var(--font-soft);
  font-weight: var(--text-heading-weight);
  text-wrap: balance;
}

.display {
  font-size: var(--text-display-size);
  line-height: var(--text-display-line);
  letter-spacing: var(--text-display-tracking);
  font-weight: var(--text-display-weight);
}
.h-xl {
  font-size: var(--text-heading-xl-size);
  line-height: var(--text-heading-xl-line);
  letter-spacing: var(--text-heading-xl-tracking);
}
.h-lg {
  font-size: var(--text-heading-lg-size);
  line-height: var(--text-heading-lg-line);
  letter-spacing: var(--text-heading-lg-tracking);
}
.h-md {
  font-size: var(--text-heading-size);
  line-height: var(--text-heading-line);
  letter-spacing: var(--text-heading-tracking);
}
.title {
  font-size: var(--text-title-size);
  line-height: var(--text-title-line);
  letter-spacing: var(--text-title-tracking);
  font-weight: var(--font-weight-regular);
}
.statement {
  font-size: var(--text-statement-size);
  line-height: var(--text-statement-line);
  letter-spacing: var(--text-statement-tracking);
  font-weight: var(--text-display-weight);
  text-wrap: pretty;
}

.display em, .h-xl em, .h-lg em, .h-md em, .statement em {
  font-style: var(--font-em-style);
  font-variation-settings: "SOFT" 100;
  color: var(--color-text-accent);
}

.lead {
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-line);
  letter-spacing: var(--text-lead-tracking);
  color: var(--color-text-secondary);
  max-width: var(--space-measure);
  text-wrap: pretty;
}

.small { font-size: var(--text-small-size); line-height: var(--text-small-line); }
.muted { color: var(--color-text-muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow-size);
  line-height: var(--text-eyebrow-line);
  letter-spacing: var(--text-eyebrow-tracking);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  color: var(--eyebrow-fg);
}
.eyebrow::before {
  content: "";
  flex: none;
  inline-size: var(--eyebrow-dot-size);
  block-size: var(--eyebrow-dot-size);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-mono-tracking);
}


/* ---------- Buttons ---------- */
.btn {
  --_bg: var(--button-bg);
  --_fg: var(--button-fg);
  --_bd: var(--button-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--button-height);
  padding-inline: var(--button-padding-x);
  border: 1px solid var(--_bd);
  border-radius: var(--button-radius);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--font-body);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--motion-duration-fast) var(--motion-ease-out),
    color var(--motion-duration-fast) var(--motion-ease-out),
    border-color var(--motion-duration-fast) var(--motion-ease-out);
}
.btn:hover { --_bg: var(--button-hover-bg); --_bd: var(--button-hover-bg); }

.btn--icon { padding-inline-end: var(--button-icon-inset); }

.btn__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--button-icon-size);
  block-size: var(--button-icon-size);
  border-radius: var(--radius-pill);
  background: var(--_fg);
  color: var(--_bg);
  transition: transform var(--motion-duration-base) var(--motion-ease-out),
              background-color var(--motion-duration-fast) var(--motion-ease-out),
              color var(--motion-duration-fast) var(--motion-ease-out);
}
.btn__icon svg { inline-size: 55%; block-size: 55%; }
.btn:hover .btn__icon { transform: translateX(var(--button-icon-nudge)); }

.btn--ghost {
  --_bg: transparent;
  --_fg: var(--color-text);
  --_bd: var(--color-border-strong);
}
.btn--ghost:hover { --_bg: var(--color-text); --_fg: var(--color-canvas); --_bd: var(--color-text); }
/* The icon normally takes the button's background colour, which is transparent here */
.btn--ghost .btn__icon { color: var(--color-canvas); }
.btn--ghost:hover .btn__icon { color: var(--color-text); }


.btn--sm {
  min-height: var(--button-height-sm);
  padding-inline: var(--button-padding-x-sm);
}
.btn--sm.btn--icon { padding-inline-end: var(--space-2); }
.btn--sm .btn__icon { inline-size: var(--button-icon-size-sm); block-size: var(--button-icon-size-sm); }

.btn--block { width: 100%; justify-content: space-between; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-thickness var(--motion-duration-fast) var(--motion-ease-out);
}
.text-link:hover { text-decoration-thickness: var(--focus-width); }

/* ---------- Chips & badges ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--chip-height);
  padding-inline: var(--chip-padding-x);
  border: 1px solid var(--chip-border);
  border-radius: var(--chip-radius);
  color: var(--chip-fg);
  font-size: var(--text-caption-size);
  line-height: 1;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--chip-height);
  padding-inline: var(--chip-padding-x);
  border-radius: var(--chip-radius);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow-size);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
}

.glass-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--chip-height);
  padding-inline: var(--chip-padding-x);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* ---------- Icon badge ---------- */
.icon-badge {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--icon-badge-size);
  block-size: var(--icon-badge-size);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text);
}
.icon-badge svg { inline-size: var(--icon-size); block-size: var(--icon-size); }

/* ---------- Brand ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-variation-settings: "SOFT" var(--font-soft);
  font-size: var(--text-title-size);
  font-weight: var(--text-display-weight);
  letter-spacing: var(--text-display-tracking);
  white-space: nowrap;
}
.brand__mark { inline-size: var(--button-icon-size-sm); block-size: var(--button-icon-size-sm); color: var(--color-accent); }
.brand__word em { font-style: var(--font-em-style); color: var(--color-text-accent); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  inset-block-start: var(--nav-offset);
  inset-inline: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding-inline: var(--space-gutter);
  pointer-events: none;
}

.nav__pill {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: min(100%, var(--nav-max-width));
  height: var(--nav-height);
  padding-inline: var(--space-5) var(--space-2);
  border: 1px solid var(--nav-border);
  border-radius: var(--radius-pill);
  background: var(--nav-bg);
  backdrop-filter: blur(var(--nav-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(140%);
  color: var(--color-text);
  transition:
    background-color var(--motion-duration-base) var(--motion-ease-out),
    border-color var(--motion-duration-base) var(--motion-ease-out),
    color var(--motion-duration-base) var(--motion-ease-out),
    box-shadow var(--motion-duration-base) var(--motion-ease-out);
}

.nav.is-solid .nav__pill {
  background: var(--nav-bg-solid);
  border-color: var(--color-border);
  color: var(--color-text);
  box-shadow: var(--shadow-float);
}

.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-1);
  margin-inline: auto;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--button-height-sm);
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
}
.nav__link:hover { background: var(--color-hover-tint); }
.nav.is-solid .nav__link:hover { background: var(--color-hover-tint); }

.nav__cta { margin-inline-start: auto; }

.nav__toggle {
  display: grid;
  place-items: center;
  inline-size: var(--button-height-sm);
  block-size: var(--button-height-sm);
  border-radius: var(--radius-pill);
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
}
.nav__toggle:hover { background: var(--color-hover-tint); }
.nav.is-solid .nav__toggle:hover { background: var(--color-hover-tint); }
.nav__toggle svg { inline-size: var(--icon-size); block-size: var(--icon-size); }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

.nav__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-canvas);
  color: var(--color-text);
  box-shadow: var(--shadow-float);
}
.nav__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--button-height);
  padding-inline: var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-title-size);
  letter-spacing: var(--text-title-tracking);
}
.nav__menu a:hover { background: var(--color-hover-tint); }

@media (max-width: 519px) {
  .nav__cta { display: none; }
  .nav__toggle { margin-inline-start: auto; }
}

@media (min-width: 1000px) {
  .nav__links { display: flex; }
  .nav__cta { margin-inline-start: 0; }
  .nav__toggle, .nav__menu { display: none !important; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(55% 60% at 88% 18%, var(--color-wash-a) 0%, transparent 70%),
    radial-gradient(45% 50% at 8% 92%, var(--color-wash-b) 0%, transparent 70%),
    var(--color-canvas);
}

/* Soft dot grid — palette-driven texture that fades out towards the bottom */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--color-border-tint) 1.5px, transparent 1.5px);
  background-size: var(--space-6) var(--space-6);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 75%);
  mask-image: linear-gradient(180deg, black 0%, transparent 75%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding-block: calc(var(--nav-offset) + var(--nav-height) + var(--space-16)) var(--space-24);
  min-block-size: 100%;
  justify-content: center;
}

.hero__title { max-width: 15ch; }
.hero__title em { color: var(--color-text-accent); }
.hero__sub { max-width: var(--space-measure); }

/* ---------- Hero 3D scene ---------- */
.hero__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  perspective: 1600px;
  pointer-events: none;
  overflow: hidden;
}
.hero__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--scroll, 0) * -24deg))
    rotateY(-6deg)
    translateY(calc(var(--scroll, 0) * -8%))
    scale(calc(1 - var(--scroll, 0) * 0.16));
  opacity: calc(1 - var(--scroll, 0) * 0.95);
  will-change: transform, opacity;
}

.hero__orb {
  position: absolute;
  inset-block-start: 30%;
  inset-inline-start: 58%;
  inline-size: min(46vw, 30rem);
  block-size: min(46vw, 30rem);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-wash-b) 0%, var(--color-wash-a) 55%, transparent 78%);
  filter: blur(6px);
  transform: translate3d(-50%, -50%, -260px);
}

.hero__dot {
  position: absolute;
  inline-size: var(--size, 0.75rem);
  block-size: var(--size, 0.75rem);
  border-radius: 50%;
  background: var(--color-accent);
  transform: translate3d(var(--x, 0), var(--y, 0), var(--tz, 0px));
  animation: hero-dot-twinkle 4.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes hero-dot-twinkle {
  0%, 100% { opacity: 0.35; translate: 0 0; }
  50% { opacity: 1; translate: 0 -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__stage { transform: rotateY(-6deg) !important; opacity: 1 !important; }
  .hero__dot { animation: none; }
}

@media (max-width: 640px) {
  .hero__stage { transform-origin: 75% 40%; scale: 0.68; }
}
@media (max-width: 640px) and (max-height: 700px) {
  .hero__scene { opacity: 0.7; }
}


/* ---------- Principles ---------- */
/* ---------- Principles ---------- */

.principles {
  display: grid;
  gap: var(--space-8);
  margin-block-start: var(--space-12);
}
.principle {
  display: grid;
  gap: var(--space-3);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border-strong);
}
.principle h3 {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--text-body-tracking);
}
.principle p { color: var(--color-text-muted); }

@media (min-width: 768px) {
  .principles { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
}

.pillar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--card-padding);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color var(--motion-duration-base) var(--motion-ease-out),
    box-shadow var(--motion-duration-base) var(--motion-ease-out);
}
.pillar-card:hover, .pillar-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--pillar-accent, var(--color-text-accent));
  box-shadow: var(--shadow-float);
}
.pillar-card:active { transform: translateY(-2px) scale(0.98); transition-duration: 0.1s; }
.pillar-card:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }

/* Homepage only: each pillar card gets its own colour */
.pillar-card--learn { --pillar-accent: var(--pillar-learn-accent); --pillar-soft: var(--pillar-learn-soft); }
.pillar-card--education { --pillar-accent: var(--pillar-education-accent); --pillar-soft: var(--pillar-education-soft); }
.pillar-card--career { --pillar-accent: var(--pillar-career-accent); --pillar-soft: var(--pillar-career-soft); }


.pillar-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--icon-badge-size);
  block-size: var(--icon-badge-size);
  border-radius: var(--radius-pill);
  background: var(--pillar-soft, var(--color-surface-accent-soft));
  color: var(--pillar-accent, var(--color-text-accent));
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color var(--motion-duration-base) var(--motion-ease-out),
    color var(--motion-duration-base) var(--motion-ease-out);
}
.pillar-card__icon svg { inline-size: var(--icon-size); block-size: var(--icon-size); }
.pillar-card:hover .pillar-card__icon {
  transform: rotate(-10deg) scale(1.12);
  background: var(--pillar-accent, var(--color-action));
  color: var(--color-action-fg);
}

.pillar-card__body { display: grid; gap: var(--space-1); }
.pillar-card__title {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" var(--font-soft);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-heading-size);
  line-height: 1.1;
}
.pillar-card__hint { font-size: var(--text-body-size); color: var(--color-text-secondary); }

.pillar-card__arrow {
  position: absolute;
  inset-block-start: var(--space-5);
  inset-inline-end: var(--space-5);
  inline-size: var(--space-5);
  block-size: var(--space-5);
  color: var(--pillar-accent, var(--color-text-accent));
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity 0.25s var(--motion-ease-out), transform 0.3s var(--motion-ease-out);
}
.pillar-card:hover .pillar-card__arrow,
.pillar-card:focus-visible .pillar-card__arrow { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pillar-card, .pillar-card__icon, .pillar-card__arrow { transition-duration: 0.01ms !important; }
}

/* ---------- Panels ---------- *//* ---------- Panels ---------- */

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--panel-padding);
  border-radius: var(--panel-radius);
  background: var(--color-surface-sunken);
}
.panel--feature {
  background: var(--feature-bg);
  color: var(--feature-fg);
}
.panel--feature .eyebrow { color: var(--feature-fg); }
.panel--feature .eyebrow::before { background: var(--feature-fg); }
.panel p { color: var(--color-text-secondary); }
.panel--feature p { color: var(--feature-fg); }

.checklist { display: grid; gap: var(--space-3); margin-block-start: var(--space-3); }
.checklist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}
.checklist svg { inline-size: var(--icon-size); block-size: var(--icon-size); margin-block-start: var(--space-1); }

.dot-list { display: grid; gap: var(--space-2); margin-block-start: var(--space-2); }
.dot-list li {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  font-size: var(--text-body-size);
  color: var(--color-text-secondary);
}
.dot-list li::before {
  content: "";
  flex: none;
  inline-size: var(--eyebrow-dot-size);
  block-size: var(--eyebrow-dot-size);
  border-radius: var(--radius-pill);
  background: var(--color-text-muted);
  transform: translateY(calc(var(--eyebrow-dot-size) * -0.5));
}

/* ---------- Formats ---------- */
.formats { display: grid; gap: var(--space-4); }
@media (min-width: 960px) {
  .formats { grid-template-columns: repeat(3, 1fr); }
}
.format { gap: var(--space-4); }
.format--recommended { border-color: var(--color-border-strong); }
.format .card__top { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-4); min-height: var(--chip-height); }
.format ul { display: grid; gap: var(--space-2); margin-block: var(--space-2) var(--space-4); }
.format li {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  font-size: var(--text-body-size);
  color: var(--color-text-secondary);
}
.format li::before {
  content: "";
  flex: none;
  inline-size: var(--eyebrow-dot-size);
  block-size: var(--eyebrow-dot-size);
  border-radius: var(--radius-pill);
  background: var(--color-text);
  transform: translateY(calc(var(--eyebrow-dot-size) * -0.5));
}
.format__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: auto;
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--text-small-size);
}

#pricing .formats { gap: var(--space-6); }
#pricing .format__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}
#pricing .format__title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}
#pricing .format__title-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
}
#pricing .card__numeral {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
#pricing .format__foot { border-block-start: none; padding-block-start: 0; }
#pricing .format__price {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" var(--font-soft);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-lead-size);
  line-height: 1.15;
  color: var(--color-text-accent);
}
.format__foot .muted { font-size: var(--text-small-size); }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; gap: var(--space-12); }
.faq__intro { display: grid; gap: var(--space-5); align-content: start; }
@media (min-width: 960px) {
  .faq__grid { grid-template-columns: 5fr 7fr; gap: var(--space-20); }
  .faq__intro { position: sticky; inset-block-start: var(--space-32); }
}

.faq-list { border-block-end: 1px solid var(--color-border); }
.faq-item { border-block-start: 1px solid var(--color-border); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--button-height);
  padding-block: var(--space-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" var(--font-soft);
  font-size: var(--text-title-size);
  line-height: var(--text-title-line);
  letter-spacing: var(--text-title-tracking);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover .faq-icon { background: var(--color-text); color: var(--color-canvas); }
.faq-icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--button-icon-size);
  block-size: var(--button-icon-size);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  transition: transform var(--motion-duration-base) var(--motion-ease-out),
              background-color var(--motion-duration-fast) var(--motion-ease-out),
              color var(--motion-duration-fast) var(--motion-ease-out);
}
.faq-icon svg { inline-size: 50%; block-size: 50%; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item p {
  max-width: var(--space-measure);
  padding-block-end: var(--space-6);
  color: var(--color-text-secondary);
}

/* ---------- Booking ---------- */
.book__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--space-12);
  padding: var(--panel-padding);
  border-radius: var(--panel-radius);
  background:
    radial-gradient(70% 90% at 100% 100%, var(--color-wash-b) 0%, transparent 60%),
    var(--color-surface-tint-strong);
}
.book__copy { display: grid; gap: var(--space-5); align-content: start; }
.book__options { justify-items: start; margin-block-start: var(--space-3); }
.book__options-note { font-size: var(--text-small-size); color: var(--color-text-secondary); }
.form-card__title { font-family: var(--font-display); font-size: var(--text-title-size); line-height: var(--text-title-line); font-weight: var(--font-weight-regular); }
.book__facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-3); }

@media (min-width: 960px) {
  .book__panel { grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
}

.form-card {
  display: grid;
  gap: var(--space-4);
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  color: var(--color-text);
}
.form-grid { display: grid; gap: var(--space-4); }
.form-grid[hidden] { display: none; }
@media (min-width: 560px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
}

.field { display: grid; gap: var(--space-1); }
.field label, .field legend {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
}
.field .optional { color: var(--color-text-muted); font-weight: var(--font-weight-regular); }

.input {
  width: 100%;
  min-height: var(--input-height);
  padding-inline: var(--input-padding-x);
  border: 0;
  border-block-end: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--input-fg);
  transition:
    background-color var(--motion-duration-fast) var(--motion-ease-out),
    box-shadow var(--motion-duration-fast) var(--motion-ease-out);
}
textarea.input { padding-block: var(--space-3); min-height: 5rem; resize: vertical; }
/* The booking form has few fields: keep its inputs compact so it doesn't tower over the copy */
.form-card .input:not(textarea) { min-height: 2.75rem; }
.input::placeholder { color: var(--input-placeholder); }
.input:focus { outline: none; background: var(--input-bg-focus); box-shadow: inset 0 calc(var(--focus-width) * -1) 0 var(--input-border-focus); }
.input:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-width); }
.input[aria-invalid="true"] { box-shadow: inset 0 calc(var(--focus-width) * -1) 0 var(--input-error); }
.field__error { color: var(--input-error); font-size: var(--text-caption-size); }
.field__error:empty { display: none; }

.segmented { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-1); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  display: inline-flex;
  align-items: center;
  min-height: var(--button-height-sm);
  padding-inline: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-regular);
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out),
              border-color var(--motion-duration-fast) var(--motion-ease-out),
              color var(--motion-duration-fast) var(--motion-ease-out);
}
.segmented label:hover { border-color: var(--color-border-strong); }
.segmented input:checked + label { background: var(--color-text); border-color: var(--color-text); color: var(--color-canvas); }
.segmented input:focus-visible + label { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-width); }

.form-note { font-size: var(--text-caption-size); color: var(--color-text-muted); }
.form-error { font-size: var(--text-small-size); color: var(--input-error); }
.form-error[hidden] { display: none; }
.btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }

.form-success {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding-block: var(--space-6);
}
.form-success[hidden] { display: none; }
.form-success .icon-badge { background: var(--color-surface-accent-soft); color: var(--color-text-accent); }

/* ---------- Footer ---------- */
.footer {
  padding-block: var(--space-20) var(--space-8);
  background: var(--color-surface-tint);
}
.footer__top { display: grid; gap: var(--space-10); padding-block-end: var(--space-12); }
.footer__about { display: grid; gap: var(--space-4); max-width: var(--space-measure); }
.footer__about p { color: var(--color-text-secondary); }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
/* Phones: Contact (a long email) gets its own full-width row so the two link columns stay even */
.footer__cols > div:last-child { grid-column: 1 / -1; }
.footer__cols h2 {
  margin-block-end: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow-size);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-accent);
}
.footer__cols ul { display: grid; gap: var(--space-2); }
.footer__cols a { display: inline-flex; min-height: var(--space-8); align-items: center; }
.footer__cols a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.3em; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border-tint);
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
}
.footer__bottom ul { display: flex; gap: var(--space-5); }

@media (min-width: 900px) {
  .footer__top { grid-template-columns: 1fr 1.75fr; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); gap: var(--space-10); }
  .footer__cols > div:last-child { grid-column: auto; }
}

/* ---------- Scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition:
      opacity var(--motion-duration-reveal) var(--motion-ease-out),
      transform var(--motion-duration-reveal) var(--motion-ease-out);
    transition-delay: calc(var(--reveal-index, 0) * var(--motion-stagger));
  }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
}

/* =========================================================
   Multi-page chrome — dropdown, mobile menu, sticky CTA
   ========================================================= */
.nav__item { position: relative; }
.nav__dropdown-toggle { gap: var(--space-1); color: inherit; }
.nav__chevron {
  inline-size: var(--space-4);
  block-size: var(--space-4);
  transition: transform var(--motion-duration-base) var(--motion-ease-out);
}
.nav__dropdown-toggle[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }
.nav__link[aria-current="page"],
.nav__dropdown-toggle[data-current] { background: var(--color-hover-tint); }
.nav.is-solid .nav__link[aria-current="page"],
.nav.is-solid .nav__dropdown-toggle[data-current] { background: var(--color-hover-tint); }

.nav__dropdown {
  position: absolute;
  inset-block-start: calc(100% + var(--space-3));
  inset-inline-start: 50%;
  display: grid;
  gap: var(--space-1);
  inline-size: min(24rem, 90vw);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-canvas);
  color: var(--color-text);
  box-shadow: var(--shadow-float);
  transform: translateX(-50%);
}
.nav__dropdown[hidden] { display: none; }
/* Invisible bridge so the pointer can cross the gap without closing the menu */
.nav__dropdown::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 100%;
  block-size: var(--space-3);
}
.nav__dropdown-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
}
.nav__dropdown-link:hover,
.nav__dropdown-link[aria-current="page"] { background: var(--color-hover-tint); }
.nav__dropdown-link strong {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" var(--font-soft);
  font-size: var(--text-lead-size);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--text-title-tracking);
  line-height: var(--text-title-line);
}
.nav__dropdown-link strong + span {
  display: block;
  margin-block-start: var(--space-1);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--color-text-muted);
}

.nav__menu {
  max-block-size: calc(100svh - var(--nav-offset) - var(--nav-height) - var(--space-8));
  overflow-y: auto;
}
.nav__menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  min-height: var(--button-height);
  padding-inline: var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-title-size);
  letter-spacing: var(--text-title-tracking);
  text-align: start;
  color: inherit;
}
.nav__menu-toggle:hover,
.nav__menu-toggle[data-current] { background: var(--color-hover-tint); }
.nav__menu-toggle[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }
.nav__submenu { padding-inline-start: var(--space-4); }
.nav .nav__menu .nav__submenu a { justify-content: flex-start; gap: var(--space-3); }
/* Right arrow marking the three pillar sub-pages */
.nav__sub-arrow { flex: none; inline-size: var(--space-4); block-size: var(--space-4); color: var(--color-text-accent); }
.nav__dropdown-link .nav__sub-arrow { margin-block-start: 0.3em; }
.nav__submenu[hidden] { display: none; }
.nav .nav__menu .nav__submenu a { font-size: var(--text-lead-size); min-height: var(--button-height-sm); }
.nav__menu a[aria-current="page"] { background: var(--color-hover-tint); }
.nav .nav__menu .btn {
  --_bg: var(--button-bg);
  --_fg: var(--button-fg);
  --_bd: var(--button-bg);
  margin-block-start: var(--space-3);
  padding-inline: var(--button-padding-x) var(--button-icon-inset);
  border-radius: var(--button-radius);
  font-family: var(--font-body);
  font-size: var(--button-font-size);
  letter-spacing: normal;
}
.nav .nav__menu .btn:hover { --_bg: var(--button-hover-bg); --_bd: var(--button-hover-bg); background: var(--_bg); }

/* Sticky CTA — fixed at the bottom of the screen at every size, stepping aside
   near the booking form so it never covers it */
.float-cta {
  --_bg: var(--button-bg);
  --_fg: var(--button-fg);
  --tx: 0;
  position: fixed;
  z-index: 40;
  inset-inline: var(--space-3);
  inset-block-end: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: var(--button-height);
  padding-inline: var(--button-padding-x) var(--button-icon-inset);
  border-radius: var(--radius-pill);
  background: var(--_bg);
  color: var(--_fg);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  box-shadow: var(--shadow-float);
  transform: translate(var(--tx), 0);
  transition:
    transform var(--motion-duration-base) var(--motion-ease-out),
    opacity var(--motion-duration-base) var(--motion-ease-out);
}
.float-cta.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--tx), calc(100% + var(--space-6)));
}
.footer { padding-block-end: calc(var(--space-8) + var(--button-height) + var(--space-4)); }

@media (min-width: 520px) {
  .float-cta {
    inset-inline: auto;
    inset-inline-end: var(--space-4);
    inline-size: max-content;
  }
}


/* =========================================================
   Sub-page hero + word cloud
   ========================================================= */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 85% 10%, var(--color-wash-a) 0%, transparent 70%),
    radial-gradient(50% 60% at 10% 100%, var(--color-wash-b) 0%, transparent 70%),
    var(--color-surface-tint);
}
.page-hero__inner {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
  padding-block: calc(var(--nav-offset) + var(--nav-height) + var(--space-20)) var(--space-20);
}
.page-hero--center .page-hero__inner { justify-items: center; text-align: center; }
.page-hero--center .lead { margin-inline: auto; }
.page-hero__title em { color: var(--color-text-accent); }

.cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-2) var(--space-6);
  max-inline-size: 62rem;
  margin-inline: auto;
  padding-block: var(--space-6) var(--space-10);
}
.cloud__word {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" var(--font-soft);
  font-weight: var(--text-display-weight);
  font-size: var(--text-title-size);
  line-height: var(--text-heading-line);
  letter-spacing: var(--text-heading-tracking);
  color: var(--color-text);
}
.cloud__word--xl { font-size: var(--text-heading-xl-size); }
.cloud__word--lg { font-size: var(--text-heading-lg-size); }
.cloud__word--md { font-size: var(--text-heading-size); }
.cloud__word--it { font-style: var(--font-em-style); font-variation-settings: "SOFT" 100; }
.cloud__word--mono {
  font-family: var(--font-mono);
  font-size: var(--text-small-size);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
}
.cloud__break { flex-basis: 100%; block-size: 0; }
/* Phones: a step smaller so words pair up on each line instead of standing alone */
@media (max-width: 719px) {
  .cloud { gap: var(--space-1) var(--space-4); }
  .cloud__word { font-size: 1.125rem; }
  .cloud__word--xl { font-size: 1.75rem; }
  .cloud__word--lg { font-size: 1.5rem; }
  .cloud__word--md { font-size: 1.3125rem; }
  .cloud__word--mono { font-size: var(--text-caption-size); }
}
.cloud__pillar-row {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  margin-block: var(--space-4);
}
.cloud__word--pillar {
  font-size: var(--text-page-title-size);
  line-height: 1.02;
  letter-spacing: var(--text-display-tracking);
  font-weight: 700;
  text-wrap: balance;
  color: var(--color-text-accent);
}

@media (prefers-reduced-motion: no-preference) {
  .js .cloud__word {
    opacity: 0;
    filter: blur(0.5rem);
    transform: translateY(var(--space-2));
    transition:
      opacity 1.2s var(--motion-ease-out),
      filter 1.2s var(--motion-ease-out),
      transform 1.2s var(--motion-ease-out);
    transition-delay: var(--delay, 0s);
  }
  .js .cloud__word.is-in { opacity: 1; filter: none; transform: none; }
  .js .cloud__word.is-in.is-dim { opacity: 0.4; }
}

/* =========================================================
   Home page
   ========================================================= */
.display--long {
  font-size: var(--text-page-title-size);
  line-height: 1.02;
  max-width: 17ch;
}

.hero__beats { display: grid; gap: var(--space-3); max-width: var(--space-measure-wide); }
.hero__beats-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100;
  font-style: var(--font-em-style);
  font-weight: var(--text-display-weight);
  font-size: var(--text-heading-size);
  line-height: var(--text-heading-line);
  letter-spacing: var(--text-heading-tracking);
}

/* ---------- Imperatives ---------- */
.web-grid { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 960px) {
  .web-grid { grid-template-columns: 5fr 7fr; gap: var(--space-16); }
}

.web-graphic { display: flex; justify-content: center; }
.web-graphic__svg { inline-size: min(100%, 22rem); block-size: auto; overflow: visible; }
.web-graphic__ring { fill: none; stroke: var(--color-border-tint); stroke-width: 1.5; }
.web-graphic__spoke { stroke: var(--color-border-tint); stroke-width: 1.5; }
.web-graphic__node-ring { fill: var(--color-canvas); stroke: var(--color-accent); stroke-width: 2; }
.web-graphic__node-text {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  fill: var(--color-text-accent);
  text-anchor: middle;
  dominant-baseline: central;
}
.web-graphic__core { fill: var(--color-surface-tint); stroke: var(--color-border-tint); stroke-width: 1.5; }

@media (prefers-reduced-motion: no-preference) {
  .web-graphic__node { animation: web-pulse 3.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
  .web-graphic__node:nth-of-type(1) { animation-delay: 0s; }
  .web-graphic__node:nth-of-type(2) { animation-delay: 0.4s; }
  .web-graphic__node:nth-of-type(3) { animation-delay: 0.8s; }
  .web-graphic__spin { animation: web-spin 90s linear infinite; transform-origin: 200px 200px; }
}
@keyframes web-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
@keyframes web-spin { to { transform: rotate(360deg); } }

.web-list { border-block-end: 1px solid var(--color-border); }
.web-item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}
.web-item:first-child { border-block-start-color: var(--color-border-strong); }
.web-item__node {
  display: grid;
  place-items: center;
  inline-size: var(--space-8);
  block-size: var(--space-8);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-caption-size);
  color: var(--color-text-accent);
}
.web-item__arrow {
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
  color: var(--color-text-accent);
  transform: scaleX(-1);
}
.web-item__body { display: grid; gap: var(--space-1); }
.web-item__lead {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" var(--font-soft);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-lead-size);
  line-height: 1.3;
  text-wrap: balance;
}
.web-item__sub {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-small-line);
  color: var(--color-text-secondary);
}


@media (min-width: 480px) and (max-width: 959px) {
  .web-graphic { margin-block-end: var(--space-4); }
}

/* ---------- Card ---------- */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--card-padding);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

/* ---------- Linked cards ---------- *//* ---------- Linked cards ---------- */
.card--link { position: relative; }
.card--link:hover { border-color: var(--color-border-strong); }
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.card__link:focus-visible { outline: none; }
.card--link:has(.card__link:focus-visible) {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}
.card--link .chips { margin-block-start: 0; padding-block-start: 0; }
.card__numeral {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100;
  font-style: var(--font-em-style);
  font-size: var(--text-title-size);
  color: var(--color-text-accent);
}
.card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: auto;
  padding-block-start: var(--space-4);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
}
.card__more svg {
  inline-size: var(--space-4);
  block-size: var(--space-4);
  transition: transform var(--motion-duration-base) var(--motion-ease-out);
}
.card--link:hover .card__more svg { transform: translateX(var(--button-icon-nudge)); }

/* ---------- Key deliverable ---------- */
.deliverable__intro {
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  max-width: var(--space-measure-wide);
  margin-inline: auto;
  margin-block-end: var(--space-12);
  text-align: center;
}
.deliverable__intro .lead { max-width: var(--space-measure); }
/* Desktop shows the intro beside the paper instead (.pager-pin__intro), so hide this
   copy visually there; it stays for screen readers, as the side copy is aria-hidden */
@media (min-width: 900px) {
  .js .deliverable__intro {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.pager-pin { position: relative; }
.js .pager-pin { block-size: 240vh; }

.pager-pin__sticky {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  block-size: clamp(30rem, 88vh, 46rem);
  padding-block: var(--space-6);
  padding-inline: var(--space-gutter);
  overflow: hidden;
}
.js .pager-pin__sticky { position: sticky; inset-block-start: var(--space-24); }

.pager-pin__intro { display: none; }

.pager-pin__doc-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  inline-size: min(100%, 30rem);
  min-inline-size: 0;
}

@media (min-width: 900px) {
  .js .pager-pin__sticky { flex-direction: row; justify-content: center; gap: var(--space-16); }
  .pager-pin__intro {
    display: block;
    flex: 0 1 20rem;
    text-align: start;
  }
  .pager-pin__intro .lead { margin-block-start: var(--space-4); max-width: none; }
  .pager-pin__doc-col { flex: 0 1 30rem; }
}

.pager-doc {
  --font-doc: 'Lora', Georgia, serif;
  position: relative;
  inline-size: min(100%, 30rem);
  margin-inline: auto;
}

.pager-doc__stage {
  position: relative;
  aspect-ratio: 3 / 4;
  perspective: 2200px;
}
/* Pages stack in one grid cell, so the stage grows to fit the longest page
   (aspect-ratio is only a minimum) — the paper never scrolls inside itself */
.js .pager-doc__stage { display: grid; }
/* A hint of the pages waiting underneath, so the stack reads as a document */
.pager-doc__stage::before,
.pager-doc__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.pager-doc__stage::before { transform: translate(8px, 10px) rotate(1.4deg); z-index: -2; }
.pager-doc__stage::after { transform: translate(4px, 5px) rotate(0.6deg); z-index: -1; opacity: 0.9; }

.pager-doc__page {
  position: relative;
  z-index: 2;
  display: block;
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.04);
  font-family: var(--font-doc);
}
.js .pager-doc__page {
  grid-area: 1 / 1;
  transform-origin: left center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(var(--flip, 0deg));
}
.pager-doc__page[data-page="0"] { z-index: 3; }
.pager-doc__page[data-page="1"] { z-index: 2; }
.pager-doc__page[data-page="2"] { z-index: 1; }
.pager-doc__page + .pager-doc__page { margin-block-start: var(--space-6); }
.js .pager-doc__page + .pager-doc__page { margin-block-start: 0; }

.pager-doc__letterhead { text-align: center; padding-block-end: var(--space-4); margin-block-end: var(--space-5); border-block-end: 2px double var(--color-border-strong); }
.pager-doc__pageno { display: block; font-family: var(--font-mono); font-size: var(--text-caption-size); letter-spacing: var(--text-eyebrow-tracking); text-transform: uppercase; color: var(--color-text-muted); }
.pager-doc__doctitle { display: block; margin-block-start: var(--space-2); font-family: var(--font-doc); font-weight: var(--font-weight-semibold); font-size: var(--text-heading-size); font-style: italic; }

.doc__entry {
  display: grid;
  grid-template-columns: var(--space-8) 1fr;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--color-border);
  font-family: var(--font-doc);
}
.doc__entry:first-child { border-block-start: 0; padding-block-start: 0; }
.doc__entry .mono { font-family: var(--font-doc); color: var(--color-text-accent); font-weight: var(--font-weight-semibold); }
.doc__entry strong {
  display: block;
  font-family: var(--font-doc);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-lead-size);
  line-height: 1.3;
}
.doc__gloss {
  display: block;
  margin-block-start: var(--space-1);
  font-family: var(--font-doc);
  font-style: italic;
  font-size: var(--text-small-size);
  line-height: var(--text-small-line);
  color: var(--color-text-muted);
}

/* Phones: tighter paper so the whole page (and the part switcher) fits on screen */
@media (max-width: 519px) {
  .js .pager-pin__sticky {
    inset-block-start: calc(var(--nav-offset) + var(--nav-height));
    block-size: calc(100svh - var(--nav-offset) - var(--nav-height));
    /* leave room at the bottom for the floating "Let's talk about the future" button */
    padding-block: var(--space-2) calc(var(--button-height) + var(--space-5));
    gap: var(--space-3);
  }
  .pager-pin__doc-col { gap: var(--space-3); }
  .pager-doc__stage { aspect-ratio: auto; }
  .pager-doc__page { padding: var(--space-4) var(--space-5); }
  .pager-doc__letterhead { padding-block-end: var(--space-3); margin-block-end: var(--space-2); }
  .pager-doc__doctitle { font-size: var(--text-title-size); }
  .doc__entry { padding-block: var(--space-3); }
  .doc__entry strong { font-size: var(--text-body-size); }
}

.pager-doc__crumbs { display: none; justify-content: center; margin-block-start: 0; }
.js .pager-doc__crumbs {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
}
.pager-doc__crumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height-sm);
  padding-inline: var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  transition:
    background-color var(--motion-duration-fast) var(--motion-ease-out),
    color var(--motion-duration-fast) var(--motion-ease-out);
}
.pager-doc__crumb:hover { background: var(--color-hover-tint); color: var(--color-text); }
.pager-doc__crumb:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.pager-doc__crumb.is-active { background: var(--color-action); color: var(--color-action-fg); }
.pager-doc__crumb.is-active:hover { background: var(--color-action-hover); }

/* ---------- How we work: scroll-phased timeline ---------- */
/* ---------- How we work: scroll-phased timeline ---------- */
.how-pin { position: relative; }
.js .how-pin { block-size: 280vh; }

.how-pin__sticky {
  block-size: clamp(26rem, 78vh, 40rem);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.js .how-pin__sticky { position: sticky; inset-block-start: var(--space-24); }

.how-track { position: relative; display: block; inline-size: 100%; }
.js .how-track { display: flex; flex-shrink: 0; inline-size: 300%; block-size: 100%; will-change: transform; }

.how-track__line {
  display: none;
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: 2px;
  background: var(--color-border-strong);
}
.js .how-track__line { display: block; }
.how-track__arrowhead {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0;
  translate: 0 -50%;
  inline-size: 0;
  block-size: 0;
  border-block: 0.5rem solid transparent;
  border-inline-start: 0.875rem solid var(--color-border-strong);
}

.how-station {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--space-gutter);
  text-align: center;
}
.js .how-station { flex: 0 0 33.3333%; justify-content: center; }

.how-station__phase {
  margin-block-end: var(--space-2);
  color: var(--color-text-accent);
}
.how-station__title { margin-block-end: var(--space-6); text-wrap: balance; }

.how-station__dot {
  position: relative;
  z-index: 1;
  inline-size: var(--space-4);
  block-size: var(--space-4);
  margin-block-end: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-canvas);
  border: 2px solid var(--color-border-strong);
}
.js .how-station.is-active .how-station__dot { background: var(--color-accent); border-color: var(--color-accent); }

.how-station__card {
  display: grid;
  gap: var(--space-4);
  max-inline-size: 26rem;
  padding: var(--card-padding);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  text-align: start;
}
.how-station__step { display: grid; grid-template-columns: var(--space-8) 1fr; gap: var(--space-3); }
.how-station__step + .how-station__step { padding-block-start: var(--space-4); margin-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); }
.how-station__step .mono { color: var(--color-text-accent); padding-block-start: var(--space-1); }
.how-station__step h4 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" var(--font-soft);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-lead-size);
  line-height: var(--text-title-line);
}
.how-station__step p { margin-block-start: var(--space-1); font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--color-text-secondary); }
.how-station__step--featured {
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface-accent-soft);
}

.how-pin__progress { display: none; }
.js .how-pin__progress {
  display: block;
  inline-size: min(100% - var(--space-gutter) * 2, 24rem);
  block-size: 3px;
  margin: var(--space-6) auto 0;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  overflow: hidden;
}
.how-pin__progress-bar { inline-size: 0%; block-size: 100%; background: var(--color-accent); }

@media (min-width: 640px) {
  .how-station__title { font-size: var(--text-heading-lg-size); }
}

.section-foot { display: flex; justify-content: center; margin-block-start: var(--space-10); }

/* =========================================================
   Sub-pages — shared blocks
   ========================================================= */
.note-card {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-12);
  padding: var(--card-padding);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.note-card p { max-width: var(--space-measure-wide); color: var(--color-text-secondary); }

.draft-note {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding: var(--card-padding);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-card);
}
.draft-note p { max-width: var(--space-measure-wide); color: var(--color-text-secondary); }

/* ---------- Closing CTA band ---------- */
.cta-band { padding-block: var(--space-section); }
.cta-band__panel {
  display: grid;
  gap: var(--space-8);
  padding: var(--panel-padding);
  border-radius: var(--panel-radius);
  background:
    radial-gradient(70% 90% at 100% 100%, var(--color-wash-b) 0%, transparent 60%),
    var(--color-surface-tint-strong);
}
.cta-band__copy { display: grid; gap: var(--space-5); }
@media (min-width: 960px) {
  .cta-band__panel { grid-template-columns: minmax(0, 1.4fr) auto; align-items: end; gap: var(--space-16); }
}

/* ---------- Pillar pager ---------- */
.pager { display: grid; gap: var(--space-4); padding-block-start: var(--space-section); }
.pager__link {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  transition: border-color var(--motion-duration-base) var(--motion-ease-out);
}
.pager__link:hover { border-color: var(--color-border-strong); }
.pager__link .mono { color: var(--color-text-muted); }
.pager__link--next { text-align: end; }
.pager__title { display: flex; align-items: center; gap: var(--space-3); }
.pager__link--next .pager__title { justify-content: flex-end; }
.pager__arrow {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--icon-badge-size);
  block-size: var(--icon-badge-size);
  border-radius: var(--radius-pill);
  background: var(--color-action);
  color: var(--color-action-fg);
  transition: transform var(--motion-duration-base) var(--motion-ease-out);
}
.pager__arrow svg { inline-size: 55%; block-size: 55%; }
.pager__link--prev .pager__arrow svg { transform: scaleX(-1); }
.pager__link:hover .pager__arrow { transform: translateX(4px); }
.pager__link--prev:hover .pager__arrow { transform: translateX(-4px); }
@media (min-width: 768px) {
  .pager { grid-template-columns: 1fr 1fr; }
  .pager__link--next:only-child { grid-column: 2; }
}

/* ---------- Key questions ---------- */
.lesson__label {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow-size);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-accent);
}

/* Four white boxes (key questions / focus areas): one column on phones, 2×2 above */
.card-grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }

/* Focus box: number, green title, the question it answers */
.focus-card { gap: var(--space-2); }
.focus-card .h-md { margin-block-start: var(--space-2); color: var(--color-text-accent); }
.focus-card p { font-size: var(--text-lead-size); line-height: var(--text-lead-line); }

/* ---------- Pillar overview ---------- */
.overview { display: grid; gap: var(--space-8); }
.overview__head { display: grid; gap: var(--space-5); align-content: start; }
.overview__body { display: grid; gap: var(--space-5); }
.overview__body strong { font-weight: inherit; color: var(--color-text-accent); }
@media (min-width: 900px) {
  .overview { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-16); }
}

/* ---------- Example lesson (stepper) ---------- */
.lesson-steps { display: grid; gap: var(--space-8); margin-block-start: var(--space-2); }
.lesson-step { position: relative; display: grid; grid-template-columns: var(--space-12) 1fr; gap: var(--space-5); align-items: start; }
.lesson-step__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--space-12);
  block-size: var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--color-action);
  color: var(--color-action-fg);
  font-family: var(--font-mono);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}
.lesson-step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--space-12) / 2 - 0.5px);
  inset-block-start: var(--space-12);
  block-size: calc(100% - var(--space-12) + var(--space-8));
  border-inline-start: 2px dashed var(--color-border-strong);
}
.lesson-step__body h3 { margin-block-end: var(--space-2); }
.lesson-step__body p { color: var(--color-text-secondary); }
.lesson-step__body p + p { margin-block-start: var(--space-3); }
.lesson-step__body .lesson__label { display: block; margin-block-start: var(--space-3); }
.lesson-step__body .dot-list,
.lesson-step__body .checklist { margin-block-start: var(--space-2); }
.lesson-step__badge { vertical-align: middle; margin-inline-start: var(--space-2); }

.lesson-step--summary .lesson-step__body {
  padding: var(--card-padding);
  border-radius: var(--radius-card);
  background: var(--color-surface-tint);
}

/* =========================================================
   By age · Why us · Pricing
   ========================================================= */

/* ---------- By age matrix ---------- */
/* "My child is [16–18]" picker: shows one age band at a time (JS only) */
.age-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-block-end: var(--space-8);
  font-family: var(--font-display);
  font-variation-settings: "SOFT" var(--font-soft);
  font-size: var(--text-heading-lg-size);
  letter-spacing: var(--text-heading-lg-tracking);
  line-height: 1.1;
}
.age-picker[hidden] { display: none; }
.age-picker__control { position: relative; display: inline-flex; align-items: center; }
.age-picker__select {
  appearance: none;
  -webkit-appearance: none;
  padding: var(--space-2) calc(var(--space-6) + var(--icon-size)) var(--space-2) var(--space-5);
  border: 2px solid var(--color-action);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-accent);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
}
.age-picker__select:hover { background: var(--color-surface-accent-soft); }
.age-picker__select:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.age-picker__control svg {
  position: absolute;
  inset-inline-end: var(--space-4);
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
  color: var(--color-text-accent);
  pointer-events: none;
}
.age-band[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .js .age-band { animation: age-band-in var(--motion-duration-base) var(--motion-ease-out); }
}
@keyframes age-band-in { from { opacity: 0; transform: translateY(var(--space-2)); } }

.age-grid { display: grid; gap: var(--space-4); }
.age-grid__head { display: none; }
.age-band {
  display: grid;
  gap: var(--space-5);
  padding: var(--card-padding);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.age-band__head { display: grid; gap: var(--space-2); align-content: start; justify-items: start; }
.age-band__age {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" var(--font-soft);
  font-weight: var(--text-display-weight);
  font-size: var(--text-heading-lg-size);
  line-height: 1;
  letter-spacing: var(--text-heading-lg-tracking);
}
.age-band__stage { font-weight: var(--font-weight-medium); }
.age-band__summary { font-size: var(--text-small-size); line-height: var(--text-small-line); color: var(--color-text-secondary); }
.age-note { max-width: var(--space-measure); margin-block-start: var(--space-8); font-size: var(--text-lead-size); line-height: var(--text-lead-line); color: var(--color-text-secondary); }
.age-band__cells { display: grid; gap: var(--space-4); }
.age-band__cells > div {
  display: grid;
  gap: var(--space-1);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}
.age-band__cells dt {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow-size);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-text-accent);
}
.age-band__cells dd { font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--color-text-secondary); }

@media (min-width: 1100px) {
  .age-grid {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }
  .age-grid__head,
  .age-band { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)); }
  .age-grid__head { background: var(--color-surface-tint-strong); }
  .age-grid__head span {
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--text-eyebrow-size);
    letter-spacing: var(--text-eyebrow-tracking);
    text-transform: uppercase;
  }
  .age-grid__head span + span { border-inline-start: 1px solid var(--color-border-tint); }
  .age-band { gap: 0; padding: 0; border: 0; border-block-start: 1px solid var(--color-border); border-radius: 0; background: transparent; }
  .age-band__head { padding: var(--space-6) var(--space-5); }
  .age-band__cells { display: contents; }
  .age-band__cells > div { padding: var(--space-6) var(--space-5); border-block-start: 0; border-inline-start: 1px solid var(--color-border); }
  .age-band__cells dt {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- Why us: AllEars ---------- */
.text-link { color: var(--color-text-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.text-link:hover { text-decoration-thickness: 2px; }
.nowrap { white-space: nowrap; }
.venture { display: grid; gap: var(--space-10); align-items: center; }
.venture__copy { display: grid; gap: var(--space-5); justify-items: start; }
.venture__media { display: grid; gap: var(--space-6); justify-items: start; }
.venture__media .site-shot { justify-self: stretch; }
.venture__links { display: grid; gap: var(--space-3); justify-items: start; }
@media (min-width: 900px) {
  .venture { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); }
}
/* A browser-window frame around a screenshot, linking to the live site */
.site-shot {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
  transition: transform var(--motion-duration-base) var(--motion-ease-out), box-shadow var(--motion-duration-base) var(--motion-ease-out);
}
.site-shot:hover { transform: translateY(-4px); }
.site-shot:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.site-shot__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
}
.site-shot__bar > span:not(.site-shot__url) { inline-size: 0.625rem; block-size: 0.625rem; border-radius: var(--radius-pill); background: var(--color-border-strong); }
.site-shot__url {
  margin-inline-start: var(--space-3);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-caption-size);
  color: var(--color-text-muted);
}
.site-shot img { display: block; inline-size: 100%; block-size: auto; }
@media (prefers-reduced-motion: reduce) { .site-shot { transition: none; } .site-shot:hover { transform: none; } }

/* ---------- Why us: profile ---------- */
.card .icon-badge + .h-md { margin-block-start: var(--space-4); }
.profile { display: grid; gap: var(--space-12); align-items: start; }
@media (min-width: 960px) {
  .profile { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-20); }
  .profile__photo { position: sticky; inset-block-start: var(--space-32); }
}
.profile__photo {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-panel);
  background:
    radial-gradient(80% 60% at 20% 0%, var(--color-wash-b) 0%, transparent 70%),
    var(--color-surface-tint-strong);
}
/* Landscape photo cropped into the 4:5 frame: from just under the ceiling to the
   bottom of the photo, x 440–1318 of the 2000×1333 original (screen on the right trimmed) */
.profile__img {
  position: absolute;
  inset-block-start: -21.40%;
  inset-inline-start: -50.09%;
  inline-size: 227.69%;
  block-size: 121.40%;
  max-inline-size: none;
}
/* Phones/tablets: the photo spans the full width, so use a landscape 4:3 frame that
   takes in the laptop on the left and part of the screen on the right (x 150–1614) */
@media (max-width: 959px) {
  .profile__photo { aspect-ratio: 4 / 3; }
  .profile__img {
    inset-block-start: -21.40%;
    inset-inline-start: -10.25%;
    inline-size: 136.61%;
    block-size: 121.40%;
  }
}
.profile__initials {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100;
  font-style: var(--font-em-style);
  font-weight: var(--text-display-weight);
  font-size: var(--text-display-size);
  line-height: 1;
  color: var(--color-text-accent);
}
.profile__photo-note {
  position: absolute;
  inset-inline: var(--space-5);
  inset-block-end: var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
}
.profile__body { display: grid; gap: var(--space-6); }
.profile__body > p:not(.eyebrow):not(.lead) { max-width: var(--space-measure); color: var(--color-text-secondary); }

.creds { border-block-end: 1px solid var(--color-border); margin-block-start: var(--space-4); }
.creds li {
  display: grid;
  grid-template-columns: var(--space-24) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}
.creds .mono { color: var(--color-text-accent); }
.creds strong {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" var(--font-soft);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-lead-size);
  line-height: var(--text-title-line);
}
.creds .small { display: block; margin-block-start: var(--space-1); color: var(--color-text-muted); }

/* ---------- Pricing detail ---------- */
.format__best {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  font-size: var(--text-small-size);
  line-height: var(--text-small-line);
}
.format__best strong {
  display: block;
  margin-block-end: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow-size);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}
.format__price {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" var(--font-soft);
  font-size: var(--text-title-size);
  line-height: var(--text-title-line);
}

/* =========================================================
   v2 additions — light tint panel
   ========================================================= */
.panel--tint { background: var(--color-surface-tint); }