.approach-list {
  display: grid;
  gap: 0 var(--space-12);
  margin: 0;
  padding: 0;
}

.approach-list li {
  border-block-start: var(--border-width) solid var(--color-border);
  padding-block: var(--space-6);
}

.approach-list li::marker {
  font-size: 0;
}

.approach-list h3 {
  color: var(--color-primary-dark);
  font-size: var(--font-size-service);
}

.approach-list p {
  margin-block-start: var(--space-2);
}

.tariff-models,
.about-chronology {
  display: grid;
  margin: 0;
}

.tariff-models {
  gap: var(--space-4) var(--space-8);
  border-block-start: var(--border-width) solid var(--color-accent);
  padding-block: var(--space-6) var(--space-8);
}

.tariff-models dt,
.about-chronology dt {
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-size: var(--font-size-service);
  font-weight: var(--font-weight-bold);
}

.tariff-models dd,
.about-chronology dd {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
}

.about-parcours-body,
.about-services-body {
  display: grid;
  gap: var(--space-8) var(--space-12);
}

.about-chronology {
  align-content: start;
  gap: var(--space-4);
}

.about-chronology > div {
  border-block-start: var(--border-width) solid var(--color-accent);
  padding-block-start: var(--space-3);
}

.about-services {
  padding-block: var(--space-8);
}

.breadcrumb {
  padding-block-start: var(--space-6);
  font-size: var(--font-size-small);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
}

.breadcrumb li::marker {
  font-size: 0;
}

.breadcrumb a {
  display: inline-block;
  padding-block: var(--space-2);
}

.page-hero {
  padding-block-start: var(--space-8);
}

.editorial-surface {
  background: var(--color-surface);
}

.service-directory {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

.service-directory > li {
  position: relative;
  border-block-start: var(--border-width) solid var(--color-border);
  padding-block: var(--space-8);
}

.service-directory p {
  font-size: var(--font-size-introduction);
}

.service-directory-link {
  text-decoration: none;
}

.service-directory-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.service-directory-arrow {
  display: none;
  color: var(--color-primary);
  font-size: var(--font-size-introduction);
  font-weight: var(--font-weight-bold);
}

.service-directory-arrow::before {
  content: '→';
}

/* Shared ruled-bullet pattern: a custom dot sits inside each li's own
   padding-inline-start, so the filet and the dot start flush with the
   container edge and wrapped lines align under the text, not the bullet. */
.service-scope,
.situations-list {
  padding-inline-start: 0;
  list-style: none;
}

.service-scope {
  margin: var(--space-8) 0 0;
}

.situations-list {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: var(--font-size-introduction);
}

.service-scope li,
.situations-list li {
  position: relative;
  padding-inline-start: var(--space-6);
  border-block-start: var(--border-width) solid var(--color-border);
}

.service-scope li::before,
.situations-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--space-1);
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: 50%;
  background: var(--color-primary);
}

.service-scope li {
  padding-block: var(--space-3);
}

/* Offset from each list's own padding-block token, plus a small fixed
   nudge to land on the first line's cap-height rather than its top edge. */
.service-scope li::before {
  inset-block-start: calc(var(--space-3) + 0.5em);
}

.situations-list li {
  padding-block: var(--space-6);
}

.situations-list li::before {
  inset-block-start: calc(var(--space-6) + 0.5em);
}

.service-situations-list {
  margin-block-start: var(--space-8);
  max-inline-size: var(--reading-width);
}

.related-services {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-8);
  margin: var(--space-8) 0 0;
  padding: 0;
}

.related-services li {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

.related-services li::marker {
  font-size: 0;
}

.related-services a {
  display: inline-block;
  padding-block: var(--space-2);
  font-size: var(--font-size-introduction);
}

.related-services .link-arrow {
  color: var(--color-primary);
}

.related-services .link-arrow::before {
  content: '→';
}

.mission-list {
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.mission-list li {
  position: relative;
  border-block-start: var(--border-width) solid var(--color-border);
}

.mission-list a {
  display: block;
  padding-block: var(--space-4);
  padding-inline-end: var(--space-8);
  color: inherit;
  font-size: var(--font-size-introduction);
  text-decoration: none;
}

.mission-list a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.mission-list .link-arrow {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 50%;
  color: var(--color-primary);
  transform: translateY(-50%);

  /* Sits visually over the stretched link; let clicks pass through to it. */
  pointer-events: none;
}

.mission-list .link-arrow::before {
  content: '→';
}

@media (width >= 56rem) {
  /* Third grid track for the decorative arrow, top-aligned with the title. */
  .service-directory .editorial-split {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
  }

  .service-directory-arrow {
    display: block;
  }

  .service-scope {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-8);
  }
}

.skip-link {
  position: absolute;
  z-index: var(--layer-skip-link);
  inset-block-start: var(--space-4);
  inset-inline-start: var(--gutter);
  transform: translateY(calc(-100% - var(--space-8)));
  border-radius: var(--radius-small);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

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

.site-header {
  border-block-end: var(--border-width) solid var(--color-border);
  background: var(--color-background);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-block-size: var(--header-height);
  gap: 0 var(--space-4);
}

.site-brand {
  display: block;
  flex: none;
}

.site-brand img {
  inline-size: var(--logo-width-mobile);
  block-size: var(--logo-height-mobile);

  /* The PNG's painted area is y=139..361; crop transparent padding only. */
  object-fit: cover;
}

.menu-toggle,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--target-size);
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--radius-small);
  padding: var(--space-2) var(--space-4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.menu-toggle,
.button-secondary {
  color: var(--color-primary);
  background: transparent;
}

.menu-toggle {
  border-color: transparent;
  font-weight: var(--font-weight-regular);
}

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

.button-primary:hover {
  color: var(--color-surface);
  background: var(--color-primary-dark);
}

.button-secondary:hover,
.menu-toggle:hover {
  color: var(--color-primary-dark);
  background: var(--color-accent);
}

.site-navigation {
  inline-size: 100%;
}

.navigation-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-2) 0 var(--space-6);
  list-style: none;
}

.footer-links a {
  display: inline-block;
  min-block-size: var(--space-8);
  padding-block: var(--space-1);
  scroll-margin-block: var(--space-2);
  text-decoration: none;
}

.footer-links a:hover,
.footer-links a[aria-current] {
  text-decoration: underline;
}

.mission-list a:hover,
.mission-list a:focus-visible {
  text-decoration: underline;
}

.navigation-list a:not(.button) {
  display: flex;
  align-items: center;
  min-block-size: var(--target-size);
  color: var(--color-text);
  font-size: var(--font-size-small);
  text-decoration: none;
}

.navigation-list a[aria-current],
.navigation-list a:not(.button):hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: var(--space-2);
}

.hero {
  padding-block-start: min(var(--section-space), var(--space-12));
}

.hero-copy {
  min-inline-size: 0;
}

.eyebrow {
  margin-block-end: var(--space-4);
  color: var(--color-primary);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
}

.hero-title {
  max-inline-size: var(--hero-heading-width);
  color: var(--color-primary-dark);
  font-size: var(--font-size-hero);
}

.hero-introduction {
  margin-block: var(--space-6);
  font-size: var(--font-size-introduction);
}

.hero-reassurance {
  margin-block-start: var(--space-4);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.proof-list {
  border-block-start: var(--border-width) solid var(--color-border);
  padding-block: var(--space-6);
}

.proof-list dt {
  color: var(--color-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.proof-list dd {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.section-title {
  font-size: var(--font-size-section);
}

.section-copy {
  margin-block-start: var(--space-6);
  font-size: var(--font-size-introduction);
  text-wrap: pretty;
}

.home-problems,
.home-about,
.home-pricing {
  background: var(--color-surface);
}

.home-problems .section-title,
.home-method .section-title,
.home-about .section-title,
.home-trust .section-title,
.home-pricing .section-title,
.home-faq .section-title {
  color: var(--color-primary-dark);
}

.home-services,
.home-final-cta {
  --color-focus: var(--color-accent);

  background: var(--color-primary-dark);
  color: var(--color-background);
}

.home-services .eyebrow,
.services-list li::marker {
  color: var(--color-accent);
}

.services-list {
  margin-block: var(--space-12);
  padding-inline-start: var(--space-8);
  list-style: decimal-leading-zero;
}

.services-list li {
  border-block-start: var(--border-width) solid var(--color-border-inverse);
  padding-block-start: var(--space-6);
  padding-inline-start: var(--space-2);
}

.services-list li::marker {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.services-list h3,
.method-list h3,
.testimonials h3 {
  font-size: var(--font-size-service);
}

.services-list p,
.method-list p {
  text-wrap: pretty;
}

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

.button-inverse:hover {
  color: var(--color-primary-dark);
  background: var(--color-background);
}

.home-method,
.home-trust,
.home-faq {
  background: var(--color-background);
}

.method-list {
  margin: var(--space-12) 0 0;
  padding: 0;
}

.method-list li::marker {
  /* Keep the native list; the visible 01–03 labels supply its numbering. */
  font-size: 0;
}

.method-list li {
  border-block-start: var(--border-width) solid var(--color-border);
  padding-block-start: var(--space-6);
}

.method-number {
  display: block;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.about-identity {
  margin-block-start: var(--space-6);
  border-block-start: var(--border-width) solid var(--color-accent);
  padding-block-start: var(--space-4);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold);
}

.about-copy {
  margin-block-start: 0;
}

.references-list {
  margin: var(--space-12) 0 0;
  padding: 0;
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-size: var(--font-size-service);
  font-weight: var(--font-weight-bold);
}

.references-list li {
  border-block-start: var(--border-width) solid var(--color-border);
  padding-block: var(--space-6);
}

.references-list li::marker {
  /* Retain native list semantics without adding a visual bullet to each name. */
  font-size: 0;
}

.testimonials {
  margin-block-start: var(--space-12);
}

.testimonials h3 {
  margin-block-end: var(--space-8);
  color: var(--color-primary-dark);
}

.testimonial {
  margin: 0;
  border-block-start: var(--border-width) solid var(--color-accent);
  padding-block: var(--space-8);
}

.testimonial:last-child {
  padding-block-end: 0;
}

.testimonial blockquote {
  margin: 0;
  font-size: var(--font-size-introduction);
  text-wrap: pretty;
}

.testimonial-company,
.testimonial-sector {
  display: block;
}

.testimonial-company {
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold);
}

.testimonial-sector {
  margin-block-start: var(--space-2);
  color: var(--color-muted);
  font-size: var(--font-size-small);
  text-wrap: pretty;
}

.faq-list details {
  border-block-start: var(--border-width) solid var(--color-border);
}

.faq-list details:last-child {
  border-block-end: var(--border-width) solid var(--color-border);
}

.faq-list summary {
  padding-block: var(--space-4);
  scroll-margin-block: var(--space-2);
  color: var(--color-primary-dark);
  font-size: var(--font-size-introduction);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.faq-list summary::marker {
  color: var(--color-primary);
}

.faq-list details p {
  padding-block-end: var(--space-6);
  text-wrap: pretty;
}

.home-final-cta .section-title {
  max-inline-size: var(--hero-heading-width);
}

.final-cta-actions {
  margin-block-start: var(--space-6);
}

.final-cta-actions .button {
  scroll-margin-block: var(--space-2);
}

.final-cta-reassurance {
  margin-block-start: var(--space-4);
  color: var(--color-accent);
  font-size: var(--font-size-small);
}

.button-accent {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-primary-dark);
}

.button-accent:hover {
  border-color: var(--color-background);
  background: var(--color-background);
  color: var(--color-primary-dark);
}

.site-footer {
  border-block-start: var(--border-width) solid var(--color-border);
  padding-block: var(--space-8);
  background: var(--color-background);
  font-size: var(--font-size-small);
}

.footer-brand {
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-size: var(--font-size-service);
  font-weight: var(--font-weight-bold);
}

.footer-heading {
  margin-block-end: var(--space-2);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold);
}

.footer-links {
  margin: 0;
  padding: 0;
}

.footer-links li::marker {
  font-size: 0;
}

.footer-bottom {
  margin-block-start: var(--space-8);
  border-block-start: var(--border-width) solid var(--color-border);
  padding-block-start: var(--space-4);
}

@media (width >=64rem) {
  .site-brand img {
    inline-size: var(--logo-width);
    block-size: var(--logo-height);
  }

  .site-header {
    position: sticky;
    z-index: var(--layer-header);
    inset-block-start: 0;
  }

  .header-inner {
    flex-wrap: nowrap;
  }

  .site-navigation {
    inline-size: auto;
  }

  .navigation-list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    padding: 0;
  }

  .navigation-list .button {
    font-size: var(--font-size-small);
  }
}

.page-hero .hero-introduction {
  margin-block-end: 0;
}

.editorial-split .section-title {
  color: var(--color-primary-dark);
}

/* These headings sit directly in a plain container (no editorial-split), so
   they need the same section-title color set explicitly here. */
#scope-title,
#situations-title,
#related-title,
#tariffs-criteria-title,
#tariffs-missions-title,
#rdv-steps-title,
#contact-info-title {
  color: var(--color-primary-dark);
}

.breadcrumb li + li {
  border-inline-start: var(--border-width) solid var(--color-border);
  padding-inline-start: var(--space-3);
}

.service-directory > li:last-child {
  border-block-end: var(--border-width) solid var(--color-border);
}

.mission-list li:last-child {
  border-block-end: var(--border-width) solid var(--color-border);
}

.service-directory > li:hover,
.service-directory > li:focus-within {
  background: var(--color-background);
}

.service-directory > li:hover .service-directory-link,
.service-directory > li:focus-within .service-directory-link {
  text-decoration: underline;
}

/* This section sits on the page's cream background, so the hover swap goes
   the other way from white-background lists like .service-directory. */
.mission-list li:hover,
.mission-list li:focus-within {
  background: var(--color-surface);
}

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

.pricing-page .hero-title {
  max-inline-size: none;
}

.pricing-page .hero-introduction {
  max-inline-size: none;
  margin-block-start: var(--space-4);
}

.about-page .section-title {
  margin-block-end: var(--space-6);
  color: var(--color-primary-dark);
}

.about-page .page-hero {
  padding-block-end: var(--space-8);
}

.about-page .hero-title {
  max-inline-size: var(--reading-width);
}

.about-page .about-identity {
  border: 0;
  padding: 0;
  font-size: var(--font-size-introduction);
}

.about-page .hero-introduction {
  margin-block-start: var(--space-3);
}

.about-services .section-title {
  margin-block-end: var(--space-4);
  font-size: var(--font-size-service);
}

.about-services-body .button {
  place-self: center start;
}

@media (width >= 48rem) {
  .tariff-models {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tariff-models > div + div {
    border-inline-start: var(--border-width) solid var(--color-border);
    padding-inline-start: var(--space-8);
  }

  .approach-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-parcours-body {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }

  .about-services-body {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-6);
  }
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8) var(--space-12);
}

/* A grid item's automatic minimum size is its content's min-content width. The
   need <select> is as wide as its longest option, so without this the single
   column could not shrink below it and the form escaped the container at 320px.
   The explicit minmax(0, 1fr) above floors the track; this floors the items. */
.contact-layout > * {
  min-inline-size: 0;
}

@media (width >= 64rem) {
  .contact-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field input,
.form-field select,
.form-field textarea {
  /* Controls follow their column and never set its floor: a <select> would
     otherwise be as wide as its longest option at every viewport. */
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--target-size);
  border: var(--border-width) solid var(--color-border-field);
  border-radius: var(--radius-small);
  padding: var(--space-2) var(--space-4);
  color: var(--color-text);
  background: var(--color-surface);
  font: inherit;
}

.form-field textarea {
  resize: vertical;
}

.form-consent {
  flex-direction: row;
  align-items: start;
  gap: var(--space-3);
}

.form-consent input {
  flex: none;

  /* WCAG 2.2 AA target size: 24px minimum, and the label beside it stays part
     of the same target through its for/id association. */
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-block-start: var(--space-1);

  /* Undo the shared text-field sizing above; a checkbox keeps its own shape. */
  min-block-size: 0;
  padding: 0;
}

.form-consent label {
  padding-block: var(--space-2);
}

/* Page hero variants: in-hero actions and a key-facts column (contact, rdv). */
.page-hero-actions {
  margin-block-start: var(--space-8);
}

.page-hero-grid {
  display: grid;
  gap: var(--space-8) var(--hero-gap);
  align-items: center;
}

.page-hero-points {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.page-hero-points > div {
  border-inline-start: var(--focus-width) solid var(--color-accent);
  padding-inline-start: var(--space-4);
}

.page-hero-points dt {
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-size: var(--font-size-service);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.page-hero-points dd {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
}

@media (width >= 56rem) {
  .page-hero-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

/* Contact info column */
.contact-info {
  align-self: start;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-medium);
  padding: var(--space-8) var(--space-6);
  background: var(--color-background);
}

.contact-info-title {
  color: var(--color-primary-dark);
  font-size: var(--font-size-service);
}

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

.contact-channels > div {
  border-block-start: var(--border-width) solid var(--color-border);
  padding-block: var(--space-4);
}

.contact-channels dt,
.contact-info-subtitle {
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold);
}

.contact-channels dd {
  margin: var(--space-1) 0 0;
}

.contact-info-subtitle {
  border-block-start: var(--border-width) solid var(--color-border);
  padding-block-start: var(--space-4);
}

/* Social links: icon + label rows, or icon-only circles in the footer */
.social-links {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--target-size);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.social-link:hover .social-label {
  text-decoration: underline;
}

.social-icon {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  fill: currentcolor;
}

.social-links-compact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.social-links-compact .social-link {
  justify-content: center;
  inline-size: var(--target-size);
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
}

.social-links-compact .social-link:hover {
  border-color: var(--color-primary);
  color: var(--color-surface);
  background: var(--color-primary);
}

.footer-heading-follow {
  margin-block-start: var(--space-6);
}

/* No dedicated error color exists in the palette yet; a heavier dark-green
   border keeps an invalid field perceivable without inventing a new token. */

/* Only after the field has been interacted with, so nothing is red on arrival.
   Colour is not the only cue: the border also thickens. Per-field error
   messages are deferred (see DESIGN_SYSTEM and DECISIONS). */
.form-field :user-invalid {
  border-color: var(--color-error);
  border-width: calc(var(--border-width) * 2);
}

/* Legal pages: one readable column, filets between sections */
.legal-content > * {
  max-inline-size: var(--reading-width);
}

.legal-content section + section {
  margin-block-start: var(--space-8);
  border-block-start: var(--border-width) solid var(--color-border);
  padding-block-start: var(--space-8);
}

.legal-content h2 {
  scroll-margin-block-start: calc(var(--header-height) + var(--space-6));
  color: var(--color-primary-dark);
  font-size: var(--font-size-service);
}

.legal-list {
  padding-inline-start: var(--space-6);
}

.legal-list > * + * {
  margin-block-start: var(--space-2);
}

.legal-content section > * + * {
  margin-block-start: var(--space-4);
}

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

.legal-facts > div {
  display: grid;
  gap: var(--space-1) var(--space-6);
  border-block-start: var(--border-width) solid var(--color-border);
  padding-block: var(--space-3);
}

.legal-facts dt {
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold);
}

.legal-facts dd {
  margin: 0;
}

@media (width >= 40rem) {
  .legal-facts > div {
    grid-template-columns: 14rem minmax(0, 1fr);
  }
}

.legal-layout {
  display: grid;
  gap: var(--space-8) var(--space-16);
  align-items: start;
}

.legal-toc {
  border-inline-start: var(--focus-width) solid var(--color-accent);
  padding-inline-start: var(--space-4);
}

.legal-toc-title {
  margin-block-end: var(--space-2);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold);
}

.legal-toc ol {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (width >= 64rem) {
  .legal-layout {
    grid-template-columns: minmax(0, 1fr) 16rem;
  }

  .legal-toc {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-8));
    grid-column: 2;
    grid-row: 1;
  }
}

/* ---------- Hero photo: the workspace scene in the homepage hero -----------
   The square frame is the one the retired inline illustration had (26rem, 1:1,
   1.5rem radius), so the hero keeps its desktop height; the portrait source is
   cropped to it, positioned low to favour the desk rather than the wall. */
.hero-photo {
  inline-size: 100%;
  max-inline-size: 26rem;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-large);
  background: var(--color-background);
  justify-self: center;
}

.hero-photo img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 55%;
}

/* ---------- Cards: one shared pattern for services and situations ---------- */
.card-grid {
  display: grid;
  gap: var(--space-6);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.card {
  display: flex;
  color: var(--color-text);
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  border: var(--border-width) solid var(--color-border);
  border-block-start: var(--focus-width) solid var(--color-primary);
  border-radius: var(--radius-medium);
  padding: var(--space-6);
  background: var(--color-surface);
  text-wrap: pretty;
}

.editorial-surface .card {
  background: var(--color-background);
}

.card-eyebrow {
  color: var(--color-primary);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
}

.card h3 {
  color: var(--color-primary-dark);
  font-size: var(--font-size-service);
}

.card-link {
  text-decoration: none;
}

.card-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.card-arrow {
  margin-block-start: auto;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.card-arrow::before {
  content: '→';
}

.card:hover,
.card:focus-within {
  border-color: var(--color-primary);
}

.card:hover .card-link,
.card:focus-within .card-link {
  text-decoration: underline;
}

@media (width >= 48rem) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Three items read best in three columns; four stay in a 2 x 2 block. */
@media (width >= 64rem) {
  .situations-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The service cards keep their own bottom margin before the hub button. */
.home-services-cards,
.related-cards {
  margin-block-end: var(--space-8);
}

/* The services hub lists titles, not page headings: keep them card-sized. */
.service-directory .section-title {
  font-size: var(--font-size-service);
}

/* About: the founder portrait sits beside the page title. */
.about-hero-grid {
  display: grid;
  gap: var(--hero-gap);
  align-items: center;
}

.about-portrait {
  inline-size: 100%;
  max-inline-size: var(--portrait-width);
  aspect-ratio: var(--portrait-ratio);
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-medium);
  background: var(--color-primary-dark);
  justify-self: center;
}

.about-portrait img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 30%;
}

@media (width >= 56rem) {
  .about-hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}