@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/archivo-latin.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: "Questrial";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/questrial-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Questrial";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/questrial-latin.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 {
  --ink: #141414;
  --ink-soft: #555555;
  --paper: #FAFAF9;
  --surface: #FFFFFF;
  --line: #E3E1DD;
  --accent: #0C5F53;
  --accent-strong: #108474;
  --accent-on-dark: #2FBFA8;
  --paper-on-dark: #FAFAF9;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 9rem;
  --fs-display: clamp(2.05rem, 1.3rem + 3vw, 3.6rem);
  --fs-h2: clamp(1.65rem, 1.1rem + 2.4vw, 2.75rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-small: 0.875rem;
  --container-gutter: clamp(1rem, 4vw, 2.5rem);
  /* Width of the left rail that carries section headings on wide viewports. */
  --rail: 26rem;
  /* Clears the sticky nav when an in-page anchor is targeted. */
  --anchor-offset: 92px;
}

html,
body {
  overflow-x: clip;
}

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

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Questrial", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
}

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

#main-content {
  scroll-margin-top: 80px;
}

figure,
blockquote,
dl,
dd {
  margin: 0;
}

p {
  max-width: 65ch;
  margin: 0 0 var(--space-4);
}

h1,
h2,
h3 {
  margin: 0;
  color: inherit;
  font-family: "Archivo", sans-serif;
}

h1,
h2 {
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 {
  max-width: 15ch;
  font-size: var(--fs-display);
}

h2 {
  max-width: 22ch;
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
}

a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:visited {
  color: var(--accent);
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button {
  color: inherit;
  font: inherit;
}

.container,
.container-wide {
  width: min(calc(100% - var(--container-gutter) - var(--container-gutter)), 1200px);
  margin-inline: auto;
}

.container-wide {
  width: min(calc(100% - var(--container-gutter) - var(--container-gutter)), 1400px);
}

.section {
  padding-block: var(--space-7);
}

.section-dark {
  background: var(--ink);
  color: var(--paper-on-dark);
}

.section-dark a:not(.button) {
  color: var(--accent-on-dark);
}

.section-intro {
  margin-bottom: var(--space-6);
}

.section-intro h2 {
  margin-bottom: var(--space-4);
}

.section-intro--wide p {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4rem);
}

.section-intro--split {
  display: grid;
  gap: var(--space-4);
}

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

.skip-link {
  position: fixed;
  z-index: 1000;
  inset: var(--space-3) auto auto var(--space-3);
  min-height: 44px;
  padding: 0.7rem 1rem;
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: "Archivo", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.button:visited {
  color: inherit;
}

.button--primary {
  background: var(--ink);
  color: var(--paper);
}

.button--primary:visited {
  color: var(--paper);
}

.button--secondary {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

.button--secondary:visited {
  color: var(--ink);
}

.button--on-dark {
  background: var(--paper);
  color: var(--ink);
}

.button--on-dark:visited {
  color: var(--ink);
}

.button--outline-light {
  border-color: var(--paper);
  background: transparent;
  color: var(--paper);
}

.button--outline-light:visited {
  color: var(--paper);
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
}

.utility-strip {
  background: var(--ink);
  color: var(--paper-on-dark);
  font-size: 0.75rem;
}

.utility-strip__inner {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.utility-strip__inner > a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.utility-strip a {
  color: var(--paper-on-dark);
}

.utility-strip__social {
  text-decoration: underline;
}

.site-header {
  position: sticky;
  z-index: 100;
  top: -44px;
  background: var(--paper);
}

.site-nav {
  position: sticky;
  top: 0;
  background: var(--paper);
}

.site-header.is-scrolled .site-nav {
  box-shadow: 0 1px 0 var(--line);
}

.site-nav__inner {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.wordmark {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink);
  font-family: "Archivo", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
  text-decoration: none;
}

.wordmark:visited {
  color: var(--ink);
}

.wordmark strong {
  font-weight: 800;
}

.site-nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 2px;
  background: transparent;
}

.site-nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin-block: 5px;
  background: var(--ink);
}

.site-nav__panel {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.site-nav__panel > a:not(.button) {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink);
  font-family: "Archivo", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav__panel > a:not(.button):visited {
  color: var(--ink);
}

.site-nav__menu li {
  display: flex;
}

.site-nav__menu a {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  font-family: "Archivo", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  min-height: 44px;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav__menu .cta a {
  background: var(--ink);
  border-radius: 2px;
  color: var(--paper);
  padding-inline: var(--space-3);
}

.site-nav__menu .cta a:hover {
  background: var(--accent-strong);
}

.hero {
  padding-block: var(--space-6);
}

.hero__grid {
  display: grid;
  gap: var(--space-5);
}

.hero__content {
  align-self: center;
  padding-block: var(--space-4);
  min-width: 0;
}

.hero__topic {
  margin-block: var(--space-4) var(--space-5);
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.hero__cue {
  margin: var(--space-4) 0 0;
  max-width: 42ch;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(250, 250, 249, 0.25);
  color: var(--accent-on-dark);
  font-size: var(--fs-small);
}

.image-frame {
  position: relative;
  overflow: hidden;
  background: #292929;
}

.image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-frame--portrait {
  aspect-ratio: 4 / 5;
}

.image-frame--square {
  aspect-ratio: 1;
}

.training-paths {
  display: grid;
  gap: 0;
  border-block: 1px solid var(--line);
}

.training-path {
  padding-block: var(--space-5);
  min-width: 0;
}

.training-path + .training-path {
  border-top: 1px solid var(--line);
}

.training-path h3 {
  margin-bottom: var(--space-3);
}

.training-path--beginner h3 {
  color: var(--accent);
}

.services {
  background: var(--surface);
}

/* Price sheets, not dashboards: a defined white sheet, hairline rules, no zebra
   banding, and the service name locked to the left edge while the sheet scrolls. */
.table-wrap {
  --sheet: var(--surface);
  --sheet-hover: var(--paper);
  position: relative;
  overflow-x: auto;
  background: var(--sheet);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  outline-offset: 4px;
}

/* Sections that are already white flip the sheet to paper so the table still
   reads as a discrete object rather than dissolving into the background. */
.services .table-wrap,
.location .table-wrap {
  --sheet: var(--paper);
  --sheet-hover: var(--surface);
}

.table-wrap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

/* Only the data sheets need a scroll floor. A table written inside an article
   has no wrapper to scroll in, so it must be free to reflow instead. */
.table-wrap table {
  min-width: 690px;
}

.entry__content > table,
.entry-section > table {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  margin-block: var(--space-5);
}

th,
td {
  padding: 1.15rem 1.1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: baseline;
}

thead th {
  padding-block: 0.85rem;
  border-bottom-color: var(--ink);
  color: var(--ink-soft);
  font-family: "Archivo", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

tbody th {
  font-family: "Archivo", sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

/* Sticky row header: the service name stays readable while the price columns
   scroll under it on narrow viewports. */
.table-wrap tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--sheet);
}

.table-wrap tbody th[scope="row"]::after {
  content: "";
  position: absolute;
  inset: 0 -1px 0 auto;
  width: 1px;
  background: var(--line);
}

.hours-table {
  background: transparent;
  border-top-color: rgba(250, 250, 249, 0.5);
  border-bottom-color: rgba(250, 250, 249, 0.2);
}

.hours-table table {
  min-width: 0;
}

.hours-table th,
.hours-table td {
  border-bottom-color: rgba(250, 250, 249, 0.2);
  padding-inline: 0 1rem;
}

.hours-table thead th {
  border-bottom-color: rgba(250, 250, 249, 0.5);
  color: inherit;
}

.hours-table tbody th[scope="row"] {
  position: static;
  background: transparent;
  font-family: "Questrial", sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
}

.hours-table tbody th[scope="row"]::after {
  content: none;
}

.services__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.services__footer p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}

.founder__grid {
  display: grid;
  gap: var(--space-5);
}

.founder__content {
  align-self: center;
  min-width: 0;
}

.founder__content h2 {
  margin-bottom: var(--space-4);
}

.work {
  border-top: 1px solid var(--line);
}

.work-gallery {
  columns: 2;
  column-gap: var(--space-3);
}

.work-gallery__item {
  margin-bottom: var(--space-3);
  break-inside: avoid;
}

.work-gallery__item--tall {
  aspect-ratio: 4 / 5;
}

.work-gallery__item--square {
  aspect-ratio: 1;
}

.supplies__grid {
  display: grid;
  gap: var(--space-5);
}

.section-intro > *,
.supplies__grid > *,
.proof__students > *,
.location__grid > *,
.faq__grid > *,
.final-cta__inner > *,
.site-footer__grid > * {
  min-width: 0;
}

.supplies p,
.final-cta p {
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
}

/* French-page note above the two English student reviews. */
.proof__note {
  margin: 0 0 var(--space-3);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.quote {
  border-top: 1px solid var(--line);
  padding-block: var(--space-5);
}

.quote blockquote {
  font-family: "Archivo", sans-serif;
  font-size: clamp(1.35rem, 1rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.35;
}

.quote figcaption {
  margin-top: var(--space-3);
  color: var(--ink-soft);
}

.quote--supporting {
  margin-left: auto;
}

.proof__clients {
  max-width: none;
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  border-left: 4px solid var(--accent-strong);
  background: var(--surface);
}

.proof__clients a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.location {
  background: var(--surface);
}

.location__grid {
  display: grid;
  gap: var(--space-5);
}

.location__intro h2 {
  margin-bottom: var(--space-4);
}

.location__details {
  padding: var(--space-5);
  border-top: 4px solid var(--accent-strong);
  background: var(--ink);
  color: var(--paper-on-dark);
  font-style: normal;
}

.location__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.location__details a {
  color: var(--accent-on-dark);
}

.faq__grid {
  display: grid;
  gap: var(--space-5);
}

.faq__list {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__item h3 {
  font-size: 1rem;
}

.faq__item button {
  display: grid;
  width: 100%;
  min-height: 60px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border: 0;
  background: transparent;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.faq__item button span {
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.faq__item button[aria-expanded="true"] span {
  transform: rotate(225deg);
}

.faq__panel {
  display: grid;
  grid-template-rows: 1fr;
}

.faq__panel > div {
  overflow: hidden;
}

.faq__panel p {
  padding: 0 0 var(--space-4);
  margin: 0;
  color: var(--ink-soft);
}

.js .faq__item.is-collapsed .faq__panel {
  grid-template-rows: 0fr;
}

.js .faq__item.is-collapsed .faq__panel p {
  padding-bottom: 0;
}

.final-cta__inner {
  display: grid;
  gap: var(--space-5);
}

.final-cta h2 {
  margin-bottom: var(--space-4);
}

/* Four columns, brand first. The old footer stacked six single-column groups and
   ran 1598px tall at 375; the grid plus the link-row density below cuts that to a
   closing block rather than a second page. */
.site-footer {
  padding-block: var(--space-5) calc(var(--space-5) + 72px);
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
}

.site-footer__col--brand {
  grid-column: 1 / -1;
}

/* Legal and social share one desktop column but sit side by side below it, so
   the last mobile grid row is not a half-empty stack. */
@media (max-width: 1023px) {
  .site-footer__col:last-child {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-4);
  }

  .site-footer__col:last-child > nav + nav h2 {
    margin-top: 0;
  }
}

.site-footer h2 {
  margin-bottom: var(--space-2);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.site-footer__col > nav + nav h2 {
  margin-top: var(--space-4);
}

.site-footer address {
  display: grid;
  justify-items: start;
  gap: 0;
  margin-top: var(--space-2);
  font-style: normal;
}

.site-footer address p {
  margin: 0;
  padding-block: 0.5rem;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}

/* 44px targets are kept, but the gap between rows is folded into the target
   itself rather than added on top of it: that alone was ~200px of footer. */
.site-footer address a,
.site-footer__menu a,
.site-footer__terms a,
.site-footer__credit a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.site-footer__menu {
  display: grid;
  justify-items: start;
}

/* The mini glossary is a link row, not a definition list: the definitions live
   on the glossary page these anchors point at. */
.site-footer__terms {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.site-footer__terms ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__credit {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
}

.wordmark--footer {
  font-size: 1.5rem;
}

.mobile-actions {
  position: fixed;
  z-index: 90;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.mobile-actions .button {
  min-width: 0;
  flex: 1 1 0;
  padding: 0.75rem 0.5rem;
  font-size: 0.8125rem;
  text-align: center;
}

.mobile-actions.is-hidden {
  display: none;
}

@media (hover: hover) {
  .button--primary:hover {
    background: var(--accent-strong);
    color: var(--paper);
  }

  .button--secondary:hover {
    background: var(--ink);
    color: var(--paper);
  }

  .button--on-dark:hover {
    background: var(--accent-on-dark);
    color: var(--ink);
  }

  .button--outline-light:hover {
    border-color: var(--accent-on-dark);
    color: var(--accent-on-dark);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .button,
  .site-nav__inner,
  .image-frame img,
  .faq__panel,
  .faq__panel p {
    transition-duration: 0.25s;
  }

  .button,
  .site-nav__inner {
    transition-property: color, background-color, border-color, transform, min-height;
  }

  .button:active {
    transform: translateY(1px);
  }

  .image-frame img {
    transition-property: transform;
  }

  .image-frame:hover img {
    transform: scale(1.02);
  }

  .faq__panel {
    transition-property: grid-template-rows;
  }

  .faq__panel p {
    transition-property: padding;
  }

  .faq__item button span {
    transition: transform 0.25s;
  }

  .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767px) {
  .js .site-nav__toggle {
    display: block;
  }

  .site-nav__panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    padding: var(--space-3) var(--container-gutter) var(--space-4);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--paper);
  }

  .js .site-nav__panel {
    display: none;
  }

  .js .site-nav__panel.is-open {
    display: grid;
  }

  .site-nav__panel > a:not(.button) {
    border-bottom: 1px solid var(--line);
  }

  .site-nav__menu li,
  .site-nav__menu a {
    width: 100%;
  }

  .site-nav__menu a {
    border-bottom: 1px solid var(--line);
  }

  .hero__media {
    order: 2;
  }

  .table-wrap {
    border-right: 4px solid var(--accent-strong);
  }

  .button-group .button {
    flex: 1 1 100%;
  }

  .utility-strip__inner {
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (min-width: 640px) {
  .work-gallery {
    columns: 3;
    column-gap: var(--space-4);
  }

  .work-gallery__item {
    margin-bottom: var(--space-4);
  }
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-8);
  }

  .section-intro--split h2 {
    max-width: 22ch;
  }

  .section-intro--split p {
    max-width: 58ch;
  }

  .training-paths {
    grid-template-columns: 7fr 5fr;
  }

  .training-path {
    padding: var(--space-5);
  }

  .training-path:first-child {
    padding-left: 0;
  }

  .training-path + .training-path {
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .founder__grid {
    grid-template-columns: 5fr 7fr;
    align-items: center;
  }

  .founder__content {
    padding-left: var(--space-5);
  }

  .supplies__grid {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }

  .proof__students {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--space-5);
  }

  .proof__note {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .quote--supporting {
    margin-top: var(--space-7);
  }

  .location__grid {
    grid-template-columns: 7fr 5fr;
    align-items: center;
  }

  .faq__grid {
    grid-template-columns: 4fr 8fr;
  }

  .final-cta__inner {
    grid-template-columns: 8fr 4fr;
    align-items: end;
  }

  .site-footer {
    padding-bottom: var(--space-5);
  }

  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-5);
  }

  .site-footer__col--brand {
    grid-column: auto;
  }

  .mobile-actions {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .site-nav__panel {
    gap: 0.5rem;
  }

  .site-nav__menu a,
  .site-nav__panel > a:not(.button) {
    font-size: 0.65rem;
    letter-spacing: 0.02em;
  }

  .site-nav__menu .cta a {
    padding-inline: 0.6rem;
  }
}

@media (min-width: 1024px) {
  .hero {
    display: grid;
    min-height: clamp(0px, calc(100dvh - 116px), 760px);
    align-content: end;
    padding-block: var(--space-6) var(--space-5);
  }

  /* Both columns sit on the same baseline at the foot of the band, so the
     portrait and the type block read as one composition rather than two stacks. */
  .hero__grid {
    min-height: 0;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: end;
    column-gap: var(--space-6);
  }

  .hero__media {
    max-height: min(calc(100dvh - 220px), 620px);
    justify-self: end;
    align-self: end;
  }

  .hero__content {
    align-self: end;
    padding-block: 0;
  }

  .hero h1 {
    max-width: 20ch;
  }

  .site-header.is-scrolled .site-nav__inner {
    min-height: 60px;
  }
}

@media (min-width: 1280px) {
  .hero__content {
    padding-left: var(--space-5);
  }
}

/* WordPress template integration */
.site-nav__panel ul,
.site-footer__menu,
.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__panel ul {
  display: contents;
}

.site-main {
  min-height: 55dvh;
}

.breadcrumbs {
  padding-block: var(--space-4);
  font-size: var(--fs-small);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-inline-start: var(--space-2);
  color: var(--ink-soft);
}

.entry,
.archive-list {
  padding-block: var(--space-6) var(--space-8);
}

.entry__header {
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
}

.entry__header h1,
.entry--404 h1,
.archive-list > h1 {
  font-size: var(--fs-display);
  max-width: 18ch;
}

/* The paragraph that opens a page is the deck, so it is set larger than body
   copy and is the one block allowed to sit at full measure before the sections. */
.entry__header > p,
.entry__content > p:first-child,
.archive-intro > p:first-child {
  max-width: 54ch;
  font-size: var(--fs-lead);
  line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   Sidehead sections. Every h2 and its body are wrapped by
   lashgasm_wrap_entry_sections(); above 1024px the heading moves into a left
   rail beside its own text instead of stacking one narrow column down an
   otherwise empty page. Tables, galleries and bands break out to full width.
   ------------------------------------------------------------------------ */

.entry-section {
  border-top: 1px solid var(--line);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
}

.entry-section > h2 {
  margin-bottom: var(--space-4);
}

.entry-section > h3 {
  margin-top: var(--space-5);
}

.entry-section > ul,
.entry-section > ol,
.entry__content > ul,
.entry__content > ol {
  max-width: 65ch;
  padding-inline-start: var(--space-4);
}

.entry-section > ul li + li,
.entry-section > ol li + li {
  margin-top: var(--space-2);
}

@media (min-width: 64rem) {
  .entry-section {
    display: grid;
    align-items: start;
    column-gap: var(--space-6);
    grid-template-columns: minmax(0, var(--rail)) minmax(0, 1fr);
  }

  .entry-section > h2 {
    grid-column: 1;
    margin-bottom: 0;
    max-width: none;
  }

  .entry-section > * {
    grid-column: 2;
  }

  .entry-section > .table-wrap,
  .entry-section > .course-compare,
  .entry-section > .cta-band,
  .entry-section > .credential-list,
  .entry-section > .portfolio-grid,
  .entry-section > .work-gallery,
  .entry-section > .promo-slots,
  .entry-section > .cluster-cards,
  .entry-section > .glossary-nav,
  .entry-section > .glossary-group,
  .entry-section > .faq__list,
  .entry-section > .proof__students,
  .entry-section > .curriculum,
  .entry-section > table,
  .entry-section > .map-figure {
    grid-column: 1 / -1;
    margin-top: var(--space-5);
  }
}

.entry__portrait {
  margin: 0 0 var(--space-5);
}

.cta-band {
  margin-block: var(--space-6);
  padding: var(--space-5) var(--space-5);
}

/* A band is the one moment a long page is allowed to break its column, so it
   runs out to the page gutter rather than sitting inside the text measure. */
.entry .cta-band,
.entry-section > .cta-band {
  margin-inline: calc(-1 * var(--container-gutter));
  padding-inline: var(--container-gutter);
}

.supplies .cta-band,
.final-cta .cta-band {
  margin: 0;
  padding: 0;
}

/* The closing sequence. A page that ends on a CTA band used to stack three
   separate gaps under it (the band's own 4rem bottom margin, the article's 9rem
   bottom padding and the footer's top padding), which measured ~230px of dead
   white space on the bridge pages. When the band is the last thing on the page it
   closes the page, and the footer reads as the next beat rather than a new one. */
.entry__content > .cta-band:last-child,
.entry__content > .entry-section:last-child > .cta-band:last-child {
  margin-bottom: 0;
}

.entry:has(> .entry__content > .cta-band:last-child),
.entry:has(> .entry__content > .entry-section:last-child > .cta-band:last-child) {
  padding-bottom: 0;
}

/* Same closing rule for the composed homepage, whose final section is a dark
   band rendered as a full section rather than an inline .cta-band. */
.site-main > .section-dark:last-child {
  margin-bottom: 0;
}

.category-rows {
  border-top: 1px solid var(--line);
  margin-block: var(--space-5);
}

.category-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  min-height: 64px;
  padding: var(--space-3);
  text-decoration: none;
}

.category-row:hover {
  background: var(--surface);
  color: var(--accent);
}

.curriculum {
  counter-reset: curriculum;
  list-style: none;
  margin-block: var(--space-5);
  padding: 0 0 0 var(--space-5) !important;
}

.curriculum li {
  border-left: 2px solid var(--accent-strong);
  counter-increment: curriculum;
  min-height: 80px;
  padding: 0 0 var(--space-5) var(--space-5);
  position: relative;
}

.curriculum li::before {
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  content: counter(curriculum);
  display: flex;
  height: 36px;
  justify-content: center;
  left: -19px;
  position: absolute;
  top: 0;
  width: 36px;
}

.contact-form {
  margin-top: var(--space-5);
  max-width: 720px;
}

.field {
  margin-bottom: var(--space-4);
}

.field label {
  display: block;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.field input,
.field textarea {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  font: inherit;
  min-height: 44px;
  padding: 0.8rem 1rem;
  width: 100%;
}

.field__error,
.form-status--error {
  color: #8C2F26;
}

.form-status {
  border-left: 4px solid var(--accent-strong);
  margin-block: var(--space-4);
  padding: var(--space-3);
}

.honeypot {
  left: -10000px;
  position: absolute;
}

.archive-item {
  border-top: 1px solid var(--line);
  padding-block: var(--space-5);
}

.archive-item__meta,
.entry__meta {
  color: var(--ink-soft);
  font-size: var(--fs-small);
}

.home-section-content > h2:first-child {
  margin-top: 0;
}

.home-section-content > .work-gallery,
.home-section-content > .proof__students,
.home-section-content > .faq__list,
.home-section-content > .table-wrap {
  margin-top: var(--space-5);
}

.home-section-content > .cta-band {
  margin: var(--space-5) 0 0;
  padding: 0;
}

.section-dark .home-section-content a:not(.button) {
  color: var(--accent-on-dark);
}

@media (min-width: 768px) {
  .training .home-section-content {
    display: grid;
    gap: var(--space-4) var(--space-5);
    grid-template-columns: 7fr 5fr;
  }

  .training .home-section-content > h2,
  .training .home-section-content > h2 + p {
    grid-column: 1 / -1;
  }

  .training .home-section-content > h3:nth-of-type(2),
  .training .home-section-content > h3:nth-of-type(2) ~ * {
    grid-column: 2;
  }
}

@media (max-width: 767px) {
  .entry__portrait {
    float: none;
    margin: 0 0 var(--space-5);
    max-width: none;
  }
}

/* ---------------------------------------------------------------------------
   Section 4 blocks: glossary, credentials, portfolio, promotions, clusters, map
   ------------------------------------------------------------------------ */

/* Alphabetical rail: forty links grouped under their initial letter so the eye
   lands on a letter first and the term second. */
.glossary-nav {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  margin-block: var(--space-5);
  padding-block: var(--space-4) var(--space-2);
  background: var(--surface);
}

.glossary-nav h3 {
  margin-top: 0;
  font-family: "Archivo", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.glossary-index {
  display: grid;
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.glossary-index__group {
  display: grid;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  border-top: 1px solid var(--line);
  padding-block: var(--space-2);
}

.glossary-index__letter {
  font-family: "Archivo", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}

.glossary-index__terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.glossary-index a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  font-size: var(--fs-small);
}

@media (min-width: 48rem) {
  .glossary-index__group {
    grid-template-columns: 2rem minmax(0, 1fr);
  }
}

.glossary-group {
  margin-top: var(--space-7);
}

.glossary-group > h3 {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-3);
  font-size: var(--fs-h3);
}

.glossary-terms {
  display: grid;
  gap: 0;
  margin-top: var(--space-5);
}

/* Print-quality definition setting: the term is display type, the definition is
   reading type at a fixed measure, separated by a single hairline. */
.glossary-term {
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-4);
  scroll-margin-top: var(--anchor-offset);
}

.glossary-term dt {
  font-family: "Archivo", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}

.glossary-term dd {
  margin: 0;
  max-width: 62ch;
  line-height: 1.65;
}

.glossary-term__link {
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .glossary-term {
    grid-template-columns: minmax(11rem, 1fr) 2.6fr;
  }

  .glossary-term dt {
    font-size: 1.25rem;
  }
}

/* Three real documents, presented as a curated row: each certificate is mounted
   on a paper board with its caption beneath, the way a framed document is hung.
   No card chrome, so they read as artefacts rather than UI tiles. */
.credential-list {
  display: grid;
  gap: var(--space-6) var(--space-5);
  margin-block: var(--space-5);
}

.credential {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.credential__body {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-3);
}

.credential__body h3 {
  margin-top: 0;
  font-size: var(--fs-h3);
}

.credential__meta {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
}

.credential__meta > div {
  display: grid;
  gap: var(--space-1);
  border-top: 1px solid var(--line);
  padding-top: var(--space-2);
}

.credential__meta dt {
  color: var(--ink-soft);
  font-family: "Archivo", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.credential__meta dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.5;
}

@media (min-width: 56rem) {
  .credential-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.portfolio-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin-block: var(--space-5);
}

.portfolio-item img {
  aspect-ratio: 4 / 5;
  background: var(--line);
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.portfolio-item h3 {
  font-size: var(--fs-h3);
  margin: var(--space-3) 0 var(--space-1);
}

.portfolio-item__attrs {
  color: var(--ink-soft);
  font-size: var(--fs-small);
  margin: 0;
}

.placeholder-note {
  border-left: 2px solid var(--accent);
  color: var(--ink-soft);
  font-size: var(--fs-small);
  margin: var(--space-2) 0 0;
  padding-left: var(--space-2);
}

/* Captioned gallery: the caption must sit under the image, not inside the
   fixed-ratio, overflow-hidden frame that would clip it. */
.work-gallery--captioned .work-gallery__item {
  aspect-ratio: auto;
  background: transparent;
  overflow: visible;
}

.work-gallery--captioned .work-gallery__item img {
  display: block;
  height: auto;
  width: 100%;
}

.work-gallery__item--crop img {
  aspect-ratio: 4 / 5;
  background: #292929;
  object-fit: cover;
}

.work-gallery__item--crop-square img {
  aspect-ratio: 1;
  background: #292929;
  object-fit: cover;
}

.work-gallery__item--natural img {
  border: 1px solid var(--line);
  object-fit: contain;
}

.work-gallery--captioned figcaption {
  color: var(--ink-soft);
  font-size: var(--fs-small);
  padding-block: var(--space-2);
}

.promo-slots {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-block: var(--space-5);
}

.promo-slot {
  border: 1px dashed var(--line);
  padding: var(--space-4);
}

.promo-slot__label {
  color: var(--ink-soft);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.promo-slot h3 {
  margin: var(--space-2) 0;
}

.promo-slot__status {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  margin: 0 0 var(--space-2);
}

.promo-channels ul {
  margin: var(--space-3) 0 0;
  padding-inline-start: var(--space-4);
}

.cluster-cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-block: var(--space-5);
}

.cluster-card {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-3);
}

.cluster-card h3 {
  margin-top: 0;
}

.cluster-card__count {
  color: var(--ink-soft);
  font-size: var(--fs-small);
  margin-bottom: 0;
}

/* Published guides inside a cluster card, and the same list used as a standalone
   pointer on the service, training and shop pillars. */
.cluster-links {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
}

.cluster-links li {
  border-top: 1px solid var(--line);
  padding-block: 0.6rem;
}

.cluster-links li:first-child {
  border-top: 0;
}

.map-figure {
  margin: var(--space-4) 0;
}

/* The frame owns the box. Poster image and Google iframe both fill it absolutely,
   so swapping one for the other on activation moves nothing: the aspect ratio is
   reserved from first paint and the layout shift is zero either way. */
.map-figure__frame {
  position: relative;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

/* Past ~800px the 3:2 ratio makes the map taller than the viewport, so the box
   switches to a fixed height. Fixed either way, so activation still shifts
   nothing. */
@media (min-width: 48rem) {
  .map-figure__frame {
    aspect-ratio: auto;
    height: clamp(22rem, 30vw, 30rem);
  }
}

.map-figure__frame > img,
.map-figure__frame > iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-figure__frame > img {
  object-fit: cover;
}

.map-figure__activate {
  position: absolute;
  z-index: 1;
  inset: auto auto var(--space-3) var(--space-3);
}

/* A scrim so the button keeps its contrast over the map tiles underneath it. */
.map-figure:not(.is-active) .map-figure__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 20, 20, 0.45), rgba(20, 20, 20, 0) 45%);
  pointer-events: none;
}

.map-figure__notice {
  color: var(--ink-soft);
}

.map-figure figcaption {
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-small);
  padding-top: var(--space-2);
}

.archive-list--hub {
  margin-top: var(--space-6);
}

.archive-list__heading {
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}

.archive-list .archive-item:first-of-type h3 {
  font-size: var(--fs-h2);
}

/* ---------------------------------------------------------------------------
   W3 editorial pass: founder masthead, section rhythm, restrained interaction
   ------------------------------------------------------------------------ */

/* Anna's page opens as a magazine profile: the name and deck sit on the same
   baseline as the foot of the portrait, then the article runs beneath both. */
@media (min-width: 64rem) {
  .entry--founder {
    display: grid;
    align-items: end;
    column-gap: var(--space-6);
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  }

  .entry--founder .entry__header {
    grid-area: 1 / 1;
    border-bottom: 0;
    margin-bottom: 0;
  }

  .entry--founder .entry__portrait {
    grid-area: 1 / 2;
    margin: 0;
  }

  .entry--founder .entry__content {
    grid-area: 2 / 1 / auto / -1;
    border-top: 1px solid var(--line);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
  }

  .entry--founder .entry-section:first-of-type {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
  }
}

.entry--founder .entry__header h1 {
  max-width: 17ch;
}

/* Home section intros share the deck setting used on interior pages. */
.section-intro p,
.section-intro--wide p,
.archive-intro > p:first-child {
  max-width: 56ch;
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.archive-intro {
  margin-bottom: var(--space-6);
}

.archive-list__heading {
  border-top: 2px solid var(--ink);
  margin-top: var(--space-7);
  max-width: none;
  padding-top: var(--space-4);
}

.archive-item h3 {
  max-width: 30ch;
}

/* Display-size links (headlines, table row headers) carry their underline in
   the accent and their text in ink. At small sizes the accent still owns the
   whole link; here a full column of teal headlines would swamp the page. */
.archive-item h3 a,
.cluster-card h3 a,
.portfolio-item h3 a,
.table-wrap tbody th[scope="row"] a,
.glossary-index a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.archive-item h3 a:visited,
.cluster-card h3 a:visited,
.portfolio-item h3 a:visited,
.table-wrap tbody th[scope="row"] a:visited,
.glossary-index a:visited {
  color: var(--ink);
}

.archive-item__meta,
.entry__meta {
  font-family: "Archivo", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* Blog article body: one measured column, quiet meta, generous leading. The
   article deck runs long, so it stays closer to body size than a page deck. */
.entry--article .entry__content p,
.entry--article .entry__content li {
  line-height: 1.75;
}

.entry--article .entry__header > p {
  max-width: 64ch;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
}

.entry__featured {
  margin: 0 0 var(--space-6);
}

.entry__featured img {
  width: 100%;
  height: auto;
}

.curriculum li {
  padding-bottom: var(--space-6);
}

.curriculum li::before {
  font-family: "Archivo", sans-serif;
  font-size: var(--fs-small);
  font-weight: 700;
}

.cluster-card {
  padding-bottom: var(--space-3);
}

.cluster-card h3 {
  font-size: var(--fs-h3);
}

.promo-slot {
  border: 0;
  border-top: 1px solid var(--line);
  padding: var(--space-4) 0 0;
}

.promo-slot__status {
  color: var(--ink-soft);
}

.portfolio-item h3 {
  font-size: 1.0625rem;
}

.work-gallery__item {
  background: #292929;
}

#main-content {
  scroll-margin-top: var(--anchor-offset);
}

.glossary-group,
.entry-section {
  scroll-margin-top: var(--anchor-offset);
}

/* The NAP block is a dark band, so its hours sheet drops the white surface and
   re-tints every rule for legibility against --ink. */
.location__details .table-wrap {
  border-top-width: 1px;
}

@media (hover: hover) {
  .site-nav__menu a:not(.cta a):hover,
  .site-nav__panel > a:not(.button):hover {
    color: var(--accent);
  }

  .table-wrap tbody tr:hover th[scope="row"],
  .table-wrap tbody tr:hover td {
    background: var(--sheet-hover);
  }

  .hours-table tbody tr:hover th[scope="row"],
  .hours-table tbody tr:hover td {
    background: rgba(250, 250, 249, 0.07);
  }

  .cluster-card:hover {
    border-top-color: var(--accent-strong);
  }

  .archive-item h3 a:hover,
  .cluster-card h3 a:hover,
  .portfolio-item h3 a:hover,
  .table-wrap tbody th[scope="row"] a:hover,
  .glossary-index a:hover {
    color: var(--accent);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cluster-card,
  tbody tr th[scope="row"],
  tbody tr td {
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
  }

  .category-row span[aria-hidden] {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .category-row:hover span[aria-hidden] {
    transform: rotate(90deg);
  }
}

@media (max-width: 767px) {
  .entry .cta-band,
  .entry-section > .cta-band {
    padding-block: var(--space-4);
  }

  .credential__meta > div {
    grid-template-columns: none;
  }
}

/* ---------------------------------------------------------------------------
   Google reviews ribbon (home)
   Adapted from 21st.dev @ddoemonn/logo-marquee (a11y contract, edge fades) and
   @serafimcloud/testimonials-with-marquee (duplicated track). The React
   requestAnimationFrame loop is replaced by one CSS animation on a single
   transform, so the strip is compositor-only and needs no JavaScript.
   ------------------------------------------------------------------------ */

.reviews-ribbon {
  margin-top: var(--space-5);
}

.reviews-ribbon__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
  max-width: none;
  margin: 0 0 var(--space-4);
  color: var(--ink-soft);
  font-family: "Archivo", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Five stars as one background image. The fill is --accent-strong (#108474)
   baked into the data URI, since a URI cannot read a custom property; if the
   accent token ever moves, this hex moves with it. */
.reviews-ribbon__stars,
.review__stars {
  display: block;
  width: 5.5rem;
  height: 1.1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 100 20%22 fill%3D%22%23108474%22%3E%3Cpath transform%3D%22translate(0 0)%22 d%3D%22M10 1.6 12.6 7.3 18.8 8 14.2 12.2 15.5 18.4 10 15.3 4.5 18.4 5.8 12.2 1.2 8 7.4 7.3Z%22%2F%3E%3Cpath transform%3D%22translate(20 0)%22 d%3D%22M10 1.6 12.6 7.3 18.8 8 14.2 12.2 15.5 18.4 10 15.3 4.5 18.4 5.8 12.2 1.2 8 7.4 7.3Z%22%2F%3E%3Cpath transform%3D%22translate(40 0)%22 d%3D%22M10 1.6 12.6 7.3 18.8 8 14.2 12.2 15.5 18.4 10 15.3 4.5 18.4 5.8 12.2 1.2 8 7.4 7.3Z%22%2F%3E%3Cpath transform%3D%22translate(60 0)%22 d%3D%22M10 1.6 12.6 7.3 18.8 8 14.2 12.2 15.5 18.4 10 15.3 4.5 18.4 5.8 12.2 1.2 8 7.4 7.3Z%22%2F%3E%3Cpath transform%3D%22translate(80 0)%22 d%3D%22M10 1.6 12.6 7.3 18.8 8 14.2 12.2 15.5 18.4 10 15.3 4.5 18.4 5.8 12.2 1.2 8 7.4 7.3Z%22%2F%3E%3C%2Fsvg%3E") no-repeat left center / contain;
}

.reviews-ribbon__stars {
  align-self: center;
}

/* Breaks out to the page gutter, the same move the CTA band makes, rather than
   to 100vw: a viewport-width child would clear the scrollbar and trip the
   no-horizontal-overflow gate. */
.ribbon {
  position: relative;
  margin-inline: calc(-1 * var(--container-gutter));
  padding-inline: var(--container-gutter);
  overflow: hidden;
}

.ribbon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.ribbon__track {
  display: flex;
  width: max-content;
  gap: var(--space-4);
}

.ribbon__group {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Fixed card box. The quote is clamped rather than allowed to set the height, so
   every card is the same size before the fonts land and the strip contributes no
   layout shift. The full text stays in the DOM for assistive technology. */
.review {
  display: flex;
  flex-direction: column;
  width: 20rem;
  min-height: 15rem;
  padding: var(--space-4);
  border-top: 2px solid var(--ink);
  background: var(--surface);
}

.review__stars {
  margin: 0 0 var(--space-3);
}

.review__quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Weight plus an accent underline, never colour alone. */
.review__key {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--accent-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Pushed to the foot of the card so every reviewer's name sits on one baseline
   across the strip, however long the quote above it runs. */
.review__name {
  margin: auto 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: "Archivo", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
}

.ribbon::before,
.ribbon::after {
  content: "";
  position: absolute;
  inset-block: 0;
  z-index: 1;
  width: clamp(2rem, 6vw, 5rem);
  pointer-events: none;
}

.ribbon::before {
  left: 0;
  background: linear-gradient(to right, var(--paper), rgba(250, 250, 249, 0));
}

.ribbon::after {
  right: 0;
  background: linear-gradient(to left, var(--paper), rgba(250, 250, 249, 0));
}

@keyframes ribbon-scroll {
  from { transform: translate3d(0, 0, 0); }
  /* Half the track plus half a gap: the two groups are identical, so landing
     exactly on the second one makes the loop seamless. */
  to { transform: translate3d(calc(-50% - (var(--space-4) / 2)), 0, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .ribbon__track {
    animation: ribbon-scroll 90s linear infinite;
    will-change: transform;
  }

  /* Pointer or keyboard, the strip stops while it is being read. Focusing it
     also hands scrolling back to the user, so a keyboard can reach every card. */
  .ribbon:hover .ribbon__track,
  .ribbon:focus-within .ribbon__track {
    animation-play-state: paused;
  }

  .ribbon:focus-within {
    overflow-x: auto;
  }
}

/* Reduced motion: one copy, no animation, a plain scrollable region. */
@media (prefers-reduced-motion: reduce) {
  .ribbon {
    overflow-x: auto;
  }

  .ribbon__group[aria-hidden="true"] {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Course comparison (transposed): three columns, no scroll floor
   ------------------------------------------------------------------------ */

.course-compare {
  margin-block: var(--space-5);
  background: var(--surface);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.services .course-compare,
.section-dark .course-compare {
  background: var(--paper);
}

/* No min-width anywhere: this table is allowed to reflow all the way down, which
   is the whole point of transposing it. The attribute rail takes a third at most
   so the two course columns stay comparable to each other. */
.course-compare table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
}

.course-compare th,
.course-compare td {
  padding: 0.9rem 0.75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.course-compare thead th {
  padding-top: var(--space-3);
  border-bottom: 1px solid var(--ink);
  vertical-align: bottom;
}

.course-compare thead th a {
  font-family: "Archivo", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  text-decoration-color: var(--accent-strong);
  text-decoration-thickness: 2px;
}

.course-compare tbody th {
  width: 26%;
  color: var(--ink-soft);
  font-family: "Archivo", sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.course-compare tbody td {
  font-size: 0.875rem;
  line-height: 1.45;
}

.course-compare tbody tr:last-child th,
.course-compare tbody tr:last-child td {
  border-bottom: 0;
}

.course-compare__payment td {
  padding-top: var(--space-3);
}

.course-compare__payment a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-family: "Archivo", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 48rem) {
  .course-compare th,
  .course-compare td {
    padding: 1.15rem 1.1rem;
  }

  .course-compare tbody th {
    width: 22%;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }

  .course-compare tbody td {
    font-size: 1rem;
  }

  .course-compare thead th a {
    font-size: 1.125rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .course-compare tbody tr th,
  .course-compare tbody tr td {
    transition: background-color 0.2s ease-out;
  }
}

@media (hover: hover) {
  .course-compare tbody tr:hover th,
  .course-compare tbody tr:hover td {
    background: var(--paper);
  }

  .services .course-compare tbody tr:hover th,
  .services .course-compare tbody tr:hover td {
    background: var(--surface);
  }

  .course-compare thead th a:hover {
    color: var(--accent);
  }
}