:root {
  /* 8px baseline spacing variables (neo-swiss grid) */
  --unit: 8px;
  --space-8: calc(var(--unit) * 1);   /* 8px */
  --space-16: calc(var(--unit) * 2);  /* 16px */
  --space-24: calc(var(--unit) * 3);  /* 24px */
  --space-32: calc(var(--unit) * 4);  /* 32px */
  --space-48: calc(var(--unit) * 6);  /* 48px */
  --space-64: calc(var(--unit) * 8);  /* 64px */
  --space-80: calc(var(--unit) * 10); /* 80px */
  --space-1: var(--space-8);
  --space-2: var(--space-16);
  --space-3: var(--space-24);
  --space-4: var(--space-32);
  --space-5: var(--space-48);

  /* color palette */
  --color-black: #050505;
  --color-white: #ffffff;
  --color-gray-50: #f9f7f2;
  --color-gray-100: #f3f1ec;
  --color-gray-400: #cfcfcf;
  --color-gray-700: #7a7a7a;
  --color-accent: #ff003c;
  /* Accessible variant for small text on light background (keeps the same vibe as the original accent) */
  --color-accent-text: #d80034;
  --color-page-accent: var(--color-accent);

  /* accent utility */
.accent-neo {
  color: var(--color-accent);
}

  /* typography scale */
  --font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --font-size-sm: clamp(0.85rem, 0.82rem + 0.2vw, 1rem);
  --font-size-base: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  --font-size-lg: clamp(1.25rem, 1.05rem + 0.6vw, 1.65rem);
  --font-size-xl: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  --font-size-hero: clamp(3rem, 10vw, 9rem);
  --line-height-base: 1.6;

  background-color: var(--color-gray-100);
  color: var(--color-black);
}

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

* {
  margin: 0;
}

html,
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-black);
  background: var(--color-gray-100);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

body {
  /* Responsive padding with 8px-grid endpoints */
  padding-left: clamp(var(--space-2), 7vw, var(--space-64));
  padding-right: clamp(var(--space-1), 4vw, var(--space-32));
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 1.05;
  text-transform: uppercase;
}

h2 {
  font-size: var(--font-size-xl);
  line-height: 1.2;
}

h3 {
  font-size: var(--font-size-lg);
  line-height: 1.25;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover,
a:focus {
  opacity: 0.75;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-gray-100);
}

main {
  flex: 1;
}

.skip-link {
  position: absolute;
  left: clamp(1rem, 6vw, 8rem);
  top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-black);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transform: translateY(-120%);
  transition: transform 0.2s ease;
  z-index: 20;
}

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

.container {
  width: 100%;
  margin: 0;
  padding-left: clamp(var(--space-2), 7vw, var(--space-80));
  padding-right: clamp(var(--space-1), 4vw, var(--space-32));
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(var(--space-2), 2.5vw, var(--space-4));
}

.col-3 {
  grid-column: span 3;
}

.col-4 {
  grid-column: span 4;
}

.col-5 {
  grid-column: span 5;
}

.col-6 {
  grid-column: span 6;
}

.col-12 {
  grid-column: span 12;
}

@media (max-width: 768px) {
  body {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .container {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

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

  .col-md-6 {
    grid-column: span 6;
  }
}

@media (max-width: 480px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-1);
  }

  .col-sm-4 {
    grid-column: span 4;
  }
}

/* header */
.site-header {
  border-bottom: 1px solid var(--color-black);
  padding-block: var(--space-2);
}

.site-header-grid {
  align-items: center;
}

.site-brand a {
  color: var(--color-black);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: var(--font-size-xs);
}

.site-nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  text-transform: lowercase;
}

.site-nav a {
  color: var(--color-black);
  padding: 0.25rem 0.5rem;
  transition: color 0.2s ease;
}

.site-nav a:hover,
.site-nav a:focus {
  color: var(--color-accent);
  opacity: 1;
}

.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle-label {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 6px;
  padding: 0.5rem;
  justify-self: end;
}

.nav-toggle-label span {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--color-black);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (max-width: 767px) {
  .site-header-grid {
    gap: var(--space-1);
    grid-template-columns: 1fr auto;
  }

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

  .nav-toggle-label {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .nav-toggle:checked + .nav-toggle-label + .site-nav {
    max-height: 260px;
    margin-top: var(--space-1);
  }
}

/* hero */
.hero {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-black);
}

.hero-grid {
  row-gap: var(--space-3);
  column-gap: clamp(var(--space-4), 6vw, var(--space-12, calc(var(--unit) * 24)));
  align-items: flex-end;
}

.hero-heading {
  grid-column: 1 / span 7;
}

.hero-copy {
  grid-column: 9 / span 4;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-3);
  color: var(--color-black);
}

.hero h1 {
  font-size: var(--font-size-hero);
  line-height: 0.95;
  font-weight: 700;
}

.word {
  display: block;
  margin-bottom: 0.25rem;
  animation-duration: 1s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: 1;
  animation-name: wordFade;
  color: var(--color-black);
}

.word:nth-of-type(2) {
  animation-delay: 0.9s;
}

.word:nth-of-type(3) {
  animation-delay: 1.8s;
  animation-name: wordFadeFinal;
  animation-fill-mode: forwards;
}

@media (min-width: 768px) {
  .word {
    margin-bottom: 0;
    margin-right: var(--space-2);
    display: inline-block;
  }
}

.hero .lede {
  font-size: var(--font-size-lg);
  text-transform: lowercase;
  max-width: 36ch;
}

@media (max-width: 480px) {
  .hero h1 {
    /* Bigger hero on small screens (64px–96px range) */
    font-size: clamp(4rem, 14vw, 6rem);
    line-height: 0.92;
  }

  .hero .lede {
    /* Larger subtitle under hero */
    font-size: clamp(1.5rem, 4.5vw, 2rem);
  }
}

.hero-link {
  margin-top: var(--space-1);
  text-transform: lowercase;
  font-size: var(--font-size-sm);
  align-self: flex-start;
  color: var(--color-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.hero-link:hover {
  opacity: 1;
  color: var(--color-black);
}

@media (max-width: 1023px) {
  .hero-heading,
  .hero-copy {
    grid-column: 1 / -1;
  }

  .hero-copy {
    align-self: flex-start;
  }
}

/* shared section styling */
.timeline-section,
.designers-section {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-black);
}

.section-eyebrow {
  grid-column: 1 / -1;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--font-size-xs);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-black);
  color: var(--color-black);
}

.section-teaser {
  grid-column: 1 / -1;
  text-transform: lowercase;
  color: var(--color-black);
  max-width: 60ch;
  width: 100%;
  margin-bottom: var(--space-3);
}

.section-link-wrap {
  grid-column: 10 / span 3;
  display: flex;
  justify-content: flex-end;
}

.section-link {
  text-transform: lowercase;
  color: var(--color-accent-text);
  font-size: var(--font-size-sm);
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Accessible focus styles for keyboard users */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}

.nav-toggle:focus-visible + .nav-toggle-label {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}

.section-link:hover {
  color: var(--color-black);
  opacity: 1;
}

@media (max-width: 1023px) {
  .section-teaser,
  .section-link-wrap {
    grid-column: 1 / -1;
  }

  .section-link-wrap {
    justify-content: flex-start;
    margin-top: var(--space-2);
  }
}

/* timeline & designers sections share flex layout */
.designers-layout,
.timeline-layout {
  display: flex;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: flex-start;
  margin-top: var(--space-4);
  width: 100%;
}

.designers-intro,
.timeline-intro {
  flex: 0 0 clamp(18rem, 26vw, 24rem);
}

.designer-row,
.timeline-row {
  flex: 1;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(1.5rem, 3vw, 4rem);
  justify-content: space-between;
}

.designer-card,
.timeline-card {
  flex: 1 1 0;
  border-top: 1px solid var(--color-black);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.designer-card a {
  text-transform: uppercase;
  color: var(--color-black);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.designer-role {
  font-size: var(--font-size-sm);
  color: #666666;
  text-transform: lowercase;
}

.designer-desc,
.timeline-caption {
  max-width: 28ch;
}

.page-content-grid .designers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.designers-link-wrap,
.timeline-link-wrap {
  margin-top: var(--space-3);
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 1023px) {
  .designers-layout,
  .timeline-layout {
    flex-direction: column;
  }

  .designers-intro,
  .timeline-intro {
    flex: 0 0 auto;
    width: 100%;
  }

  .designers-layout,
  .timeline-layout {
    margin-top: var(--space-2);
    gap: var(--space-3);
  }

  .designer-row,
  .timeline-row {
    flex-direction: column;
  }

  .designers-link-wrap,
  .timeline-link-wrap {
    justify-content: flex-start;
  }

  .designers-section .grid {
    display: block;
  }

  .designers-section .section-eyebrow,
  .designers-section .section-teaser,
  .designers-section .designers-grid {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .designers-section .designer-row,
  .timeline-row {
    flex-direction: column;
  }

  .timeline-row .timeline-card {
    order: 999;
  }

  .timeline-row .timeline-card:nth-child(3) {
    order: 1;
  }

  .timeline-row .timeline-card:nth-child(2) {
    order: 2;
  }

  .timeline-row .timeline-card:nth-child(1) {
    order: 3;
  }
}

.timeline-card::before {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-accent);
  margin-bottom: var(--space-1);
}

.timeline-year {
  font-size: var(--font-size-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-black);
}

/* standalone page sections */
.page-section {
  border-bottom: 1px solid var(--color-black);
  padding-block: var(--space-5);
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3.5rem);
}

.page-intro {
  grid-column: span 4;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: var(--font-size-xs);
}

.page-lede {
  grid-column: span 5;
  max-width: 42ch;
}

.page-content-grid {
  grid-column: span 12;
  margin-top: var(--space-4);
}

.timeline-grid {
  display: block;
}

.timeline-stack {
  position: relative;
  display: block;
  margin-top: var(--space-4);
}

.timeline-stack .timeline-item {
  grid-column: unset;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-2);
  align-items: flex-start;
  margin-top: var(--space-5);
  row-gap: var(--space-1);
  position: relative;
  padding-left: 0;
}

.timeline-stack .timeline-item:first-child {
  margin-top: 0;
}

.timeline-spine {
  position: absolute;
  left: calc((100% / 12) * 0.5);
  top: 0;
  bottom: 0;
  width: 1px;
  background: #d3d3d3;
}

.timeline-stack .timeline-dot {
  position: absolute;
  left: calc((100% / 12) * 0.5);
  top: var(--space-2);
  transform: translate(-50%, 0);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
}

.timeline-stack .timeline-item .timeline-year {
  grid-column: 3 / span 2;
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: 0;
  font-weight: 600;
  text-transform: none;
  margin-top: var(--space-2);
}

.timeline-stack .timeline-item .timeline-caption {
  grid-column: 5 / -1;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  margin-top: var(--space-1);
}
@media (max-width: 1023px) {
  .page-intro,
  .page-lede,
  .page-content-grid {
    grid-column: 1 / -1;
  }
}

/* footer */
.site-footer {
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-black);
  text-transform: lowercase;
  font-size: var(--font-size-sm);
  /* Increase contrast on the light background */
  color: #666666;
}

.site-footer-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2);
}

.site-footer-text {
  margin: 0;
}

.site-footer-links {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.site-footer-links a {
  color: inherit;
  text-decoration: none;
  letter-spacing: 0.04em;
}

.site-footer-links a:hover {
  color: var(--color-accent-text);
  opacity: 1;
}

.site-footer-links a:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .site-footer-grid {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .site-footer-links {
    flex-wrap: wrap;
    gap: var(--space-1);
  }
}

/* typography helpers */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--font-size-xs);
  color: var(--color-black);
}

/* animations */
@keyframes wordFade {
  0% {
    color: var(--color-black);
  }
  10% {
    color: var(--color-accent);
  }
  90% {
    color: var(--color-accent);
  }
  100% {
    color: var(--color-black);
  }
}

@keyframes wordFadeFinal {
  0% {
    color: var(--color-black);
  }
  10% {
    color: var(--color-accent);
  }
  100% {
    color: var(--color-accent);
  }
}

@media (max-width: 768px) {
  .page-content-grid .designers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .designers-list,
  .timeline-grid {
    padding-top: 0 !important;
    margin-top: 0 !important;
    gap: 0.5rem !important;
  }

  /* Home page preview sections: keep breathing room between separator lines */
  .timeline-section,
  .designers-section {
    padding-top: var(--space-4) !important;
    padding-bottom: var(--space-3) !important;
  }

  .section-eyebrow,
  .section-header {
    margin-bottom: 0.25rem !important;
  }

  .section-teaser {
    margin-top: 0.25rem !important;
    margin-bottom: var(--space-2) !important;
  }

  .timeline-stack .timeline-dot {
    left: 0;
    top: var(--space-1);
    transform: translate(0, 0);
  }

  .timeline-stack {
    padding-left: 0;
    margin-top: var(--space-3);
  }

  .timeline-spine {
    display: none;
  }

  .timeline-stack .timeline-item {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: var(--space-4);
    row-gap: var(--space-1);
    padding-left: 0;
  }

  .timeline-stack .timeline-item .timeline-year,
  .timeline-stack .timeline-item .timeline-caption {
    grid-column: 1 / -1;
    margin-top: var(--space-1);
  }

  .designer-item,
  .designer-card {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .designers-list > *:first-child,
  .timeline-grid > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  hr,
  .section-divider,
  .divider,
  .timeline-section > * + hr,
  .designers-section > * + hr {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .designers-section .section-header {
    margin-top: 0.25rem !important;
  }

  .section-break,
  .divider-wrap,
  .section-separator {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

@media (min-width: 769px) {
  .site-header nav,
  .site-nav {
    grid-column: 9 / span 4;
    justify-self: end;
  }
}
/* Desktop header alignment (12-col grid) */
@media (min-width: 769px) {

  /* Make the header use the full site grid */
  .site-header-grid {
    grid-template-columns: repeat(12, 1fr);
  }

  /* Brand on the left */
  .site-brand {
    grid-column: 1 / span 4;
  }

  /* Nav on the right */
  .site-nav-desktop {
    grid-column: 9 / span 4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  /* Optional: tighten right edge spacing */
  .site-nav {
    padding-right: 1rem;
  }
}
.designers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* mobile */
@media (max-width: 768px) {
  .designers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {

  .timeline-stack {
    grid-template-columns: 24px 1fr;
    padding-left: 12px;
  }

  .timeline-spine {
    left: 12px;
  }

  .timeline-dot {
    left: 12px;
  }

  .timeline-year {
    margin-left: 16px;
    padding-left: 12px;
    transform: translateY(-2px); /* lifts the date slightly for clean baseline alignment */
}
  } /* NEW: fix spacing between dot and year */
  .timeline-item {
    grid-template-columns: 32px 1fr;
    column-gap: 12px;
  }
  
  .timeline-dot {
  transform: translateY(4px);
}

/* ABOUT PAGE — desktop spacing */
.about.page-grid {
  padding-top: 8rem;
  padding-bottom: 6rem;
}

.about-title {
  margin-top: 2rem;
  margin-bottom: 3rem;
}

/* ABOUT PAGE — mobile spacing */
@media (max-width: 768px) {
  .about.page-grid {
    padding-top: 5rem;
    padding-bottom: 4rem;
  }

  .about-title {
    margin-top: 1rem;
    margin-bottom: 2rem;
  }
}
/* ABOUT PAGE ONLY — neo-swiss grid */
.about.page-grid {
  display: grid;
  grid-template-columns: 1fr minmax(48ch, 70ch) 1fr;
  padding-top: 8rem;
  padding-bottom: 6rem;
}

.about.page-grid > * {
  grid-column: 2;
}

/* mobile version */
@media (max-width: 768px) {
  .about.page-grid {
    grid-template-columns: 1fr;
    padding-top: 5rem;
    padding-bottom: 4rem;
  }

  .about.page-grid > * {
    grid-column: 1;
  }
}
/* -------------------------------------------------- */
/* NEO-SWISS TYPE SCALE — GLOBAL TYPOGRAPHIC UPGRADE  */
/* -------------------------------------------------- */

/* Base body size — modern Swiss prefers slightly larger text */
body {
  font-size: 20px;
  line-height: 1.45;
}

/* Section labels like "TIMELINE" */
h2,
.section-label {
  font-size: 22px;
  letter-spacing: 0.05em;
}

/* Major page titles ("WHAT IS NEO-SWISS?", "DESIGNERS", etc.) */
h1 {
  font-size: clamp(64px, 10vw, 88px);
  line-height: 1.05;
  font-weight: 700;
}

/* Timeline year */
.timeline-year {
  font-size: 30px;
  font-weight: 600;
}

/* Timeline description text */
.timeline-caption {
  font-size: 20px;
  line-height: 1.45;
}

/* Extra spacing between timeline items */
.timeline-item {
  margin-bottom: 4rem;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  body {
    font-size: 18px;
    line-height: 1.45;
  }

  h1 {
    font-size: clamp(44px, 12vw, 72px);
  }

  .timeline-year {
    font-size: 26px;
  }

  .timeline-item {
    margin-bottom: 3rem;
  }
}
/* -------------------------------------------------- */
/* NEO-SWISS ABOUT PAGE: TYPOGRAPHY + SPACING TUNING  */
/* -------------------------------------------------- */

/* larger intro for proper Swiss hierarchy */
.about-intro {
  font-size: 22px;
  line-height: 1.5;
  max-width: 70ch;
  margin-top: 2rem;      /* tighten spacing */
  margin-bottom: 4rem;   /* clean rhythm */
}

/* adjust headline spacing for strong Swiss presence */
.about-title {
  margin-top: 3rem;
  margin-bottom: 2.5rem;
  line-height: 0.95; /* tighter, museum-style headline */
}

/* highlight the word NEO in brand accent color */
.about-title .accent-neo {
  color: #ff004f;  /* your dot color */
}

/* ensure consistent vertical rhythm for all subsequent sections */
.about-section {
  margin-top: 4rem;
  margin-bottom: 3rem;
}

.about-section h2 {
  margin-bottom: 1rem;
  font-size: 32px;
  line-height: 1.2;
}

/* mobile refinements */
@media (max-width: 768px) {
  .about-intro {
    font-size: 20px;
    margin-top: 1.5rem;
    margin-bottom: 3rem;
  }

  .about-title {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .about-section {
    margin-top: 3rem;
  }
}

/* --------------------------------------- */
/* GLOBAL PAGE HERO / INTRO SPACING       */
/* --------------------------------------- */

.page-hero-title {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  line-height: 1;
  margin-top: 4rem;
  margin-bottom: 3rem;
  text-transform: uppercase;
}

.page-hero-title .accent-neo {
  color: var(--accent-color);
}

.page-hero-intro {
  font-size: clamp(1.125rem, 2.6vw, 1.45rem);
  line-height: 1.55;
  max-width: 70ch;
  margin-bottom: 5rem;
}

.page-grid {
  display: grid;
  grid-template-columns: 1fr minmax(48ch, 70ch) 1fr;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.page-grid > * {
  grid-column: 2;
}

/* mobile */
@media (max-width: 768px) {
  .page-hero-title {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .page-grid {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
/* unify all hero titles (designers/timeline) to match ABOUT page */
.page-hero-title {
  font-size: clamp(3rem, 8vw, 6rem);   /* same scale as WHAT IS NEO-SWISS */
  font-weight: 700;
  line-height: 1;
  margin-top: 4rem;
  margin-bottom: 3rem;
  text-transform: uppercase;
}
/* make designers + timeline intros match ABOUT intro scale */
.page-lede {
  font-size: 1.25rem;
  line-height: 1.6;
  max-width: 65ch;
}
/* ---------------------------------------- */
/* MOBILE FIXES FOR HERO TITLES & GRID */
/* ---------------------------------------- */

/* Prevent hero titles from causing overflow on small screens */
@media (max-width: 768px) {
  .page-hero-title {
    font-size: clamp(2.2rem, 10vw, 3.5rem);
    line-height: 1.1;
    word-break: break-word;   /* forces long words like TIMELINE to wrap */
  }

  .page-grid {
    grid-template-columns: 1fr;  /* no side gutters shrinking space */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .page-grid > * {
    grid-column: 1;  /* everything becomes 1-column cleanly */
  }
}