/* Content-page blocks (app/blocks/*). Shared sections the homepage also uses live in site.css. */

/* ===== Page hero ===== */
.page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-950); color: var(--white); }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.22;
  background: var(--world-dots, none) 70% 40% / max(100%, 1100px) auto no-repeat;
}
.page-hero::after {
  content: ""; position: absolute; top: -40%; right: -12%; z-index: -1; width: 55%; aspect-ratio: 1;
  background: radial-gradient(circle, rgb(221 51 29 / 0.22), transparent 65%);
}
.page-hero__content {
  display: grid; gap: 1.25rem; justify-items: start;
  padding-block: calc(var(--header-h) + clamp(3rem, 6vw, 5rem)) clamp(3.5rem, 7vw, 6rem);
}
.page-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3); max-width: 48rem;
  color: var(--red-100); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.page-hero__eyebrow::before { content: ""; flex: none; width: 2.5rem; height: 2px; background: var(--red-600); }
.page-hero__title {
  max-width: 20ch; color: var(--white); font-size: var(--fs-page-title); font-weight: 700;
  line-height: var(--lh-tight); letter-spacing: -0.01em; overflow-wrap: break-word; hyphens: auto;
}
.page-hero__text { display: grid; gap: var(--space-4); max-width: 44rem; color: rgb(255 255 255 / 0.85); font-size: var(--fs-lead); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: var(--space-3); }

.page-hero--photo::before, .page-hero--photo::after { content: none; }
.page-hero__media { position: absolute; inset: 0; z-index: -1; }
.page-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(10 13 18 / 0.9) 0%, rgb(10 13 18 / 0.66) 50%, rgb(10 13 18 / 0.3) 100%),
    linear-gradient(0deg, rgb(10 13 18 / 0.75) 0%, transparent 50%);
}
.page-hero__picture, .page-hero__picture img { width: 100%; height: 100%; }
.page-hero__picture img { object-fit: cover; }
.page-hero--photo .page-hero__content { min-height: clamp(560px, 82svh, 800px); align-content: end; }
@media (max-width: 767px) {
  .page-hero__media::after { background: linear-gradient(0deg, rgb(10 13 18 / 0.92) 0%, rgb(10 13 18 / 0.7) 60%, rgb(10 13 18 / 0.55) 100%); }
  .page-hero--photo .page-hero__content { min-height: clamp(520px, 88svh, 720px); }
}

/* Key points under the hero text (service pages). Never animated: they sit in the first viewport. */
.page-hero__highlights {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-4);
  width: 100%; margin-top: var(--space-6);
}
.page-hero__highlight {
  display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5);
  border: 1px solid rgb(255 255 255 / 0.14); border-top: 3px solid var(--red-600); border-radius: var(--radius);
  background: rgb(10 13 18 / 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.page-hero__highlight-title { color: var(--white); font-size: 1.25rem; line-height: 1.25; }
.page-hero__highlight-text { color: rgb(255 255 255 / 0.78); font-size: var(--fs-small); }

/* ===== Breadcrumbs ===== */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-small); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-2); color: rgb(255 255 255 / 0.7); }
.crumbs li + li::before {
  content: ""; width: 0.375rem; height: 0.375rem; opacity: 0.6;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg);
}
.crumbs a { color: rgb(255 255 255 / 0.85); text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; }
.crumbs [aria-current] { color: var(--white); font-weight: 600; }

/* ===== Intro ===== */
.intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.intro--text .intro__grid { grid-template-columns: minmax(0, 1fr); max-width: 52rem; text-align: center; }
.intro--text .intro__body { justify-items: center; }
.intro--reverse .intro__media { order: 2; }
.intro__body { display: grid; gap: var(--space-5); justify-items: start; }
.intro__text { color: var(--color-text-muted); }
.section--dark .intro__text { color: rgb(255 255 255 / 0.8); }
.intro__media { position: relative; }
.intro__img { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 5 / 4; }
.intro__img img { width: 100%; height: 100%; object-fit: cover; }
.intro__media--pair { padding: 0 14% 16% 0; }
.intro__img--inset { position: absolute; right: 0; bottom: 0; width: 50%; aspect-ratio: 1; border: 6px solid var(--white); }
@media (max-width: 1023px) {
  .intro__grid { grid-template-columns: minmax(0, 1fr); }
  .intro--reverse .intro__media { order: 0; }
  .intro__media { max-width: 40rem; }
}

/* ===== Features ===== */
.features__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: end; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.features__head .section-head { margin-bottom: 0; }
.features__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-5); }
.feature {
  display: grid; align-content: start; gap: var(--space-3); padding: var(--space-6);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--white);
  transition: border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.feature:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.feature__mark {
  display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--space-2); border-radius: 50%;
  background: var(--red-50); color: var(--red-600); font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
}
.feature__mark .icon { width: 1.25rem; height: 1.25rem; }
.feature__title { font-size: var(--fs-h3); overflow-wrap: break-word; hyphens: auto; }
.feature__body { color: var(--color-text-muted); }
.section--dark .feature { border-color: rgb(255 255 255 / 0.12); background: rgb(255 255 255 / 0.04); }
.section--dark .feature__title { color: var(--white); }
.section--dark .feature__body { color: rgb(255 255 255 / 0.75); }
.features--media .features__layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.features__img { position: sticky; top: calc(var(--header-h) + var(--space-5)); overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 5; }
.features__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) {
  .features--media .features__layout { grid-template-columns: minmax(0, 1fr); }
  .features__img { position: relative; top: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  .features__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .features__head > .btn { justify-self: start; }
}
@media (min-width: 1024px) {
  .features__grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
  .features--media .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Accordion ===== */
.accordion__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.accordion__intro { position: sticky; top: calc(var(--header-h) + var(--space-5)); display: grid; gap: var(--space-5); }
.accordion__intro .section-head { margin-bottom: 0; }
.accordion__img { overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 3; }
.accordion__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) {
  .accordion__grid { grid-template-columns: minmax(0, 1fr); }
  .accordion__intro { position: static; }
}

/* ===== Band ===== */
.band { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-y); background: var(--ink-950); color: rgb(255 255 255 / 0.85); }
.band__media { position: absolute; inset: 0; z-index: -1; }
.band__picture, .band__picture img { width: 100%; height: 100%; }
.band__picture img { object-fit: cover; }
.band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10 13 18 / 0.94) 0%, rgb(10 13 18 / 0.8) 55%, rgb(10 13 18 / 0.45) 100%); }
.band__body { display: grid; gap: var(--space-5); justify-items: start; max-width: 46rem; }
.band .section-title { color: var(--white); }
@media (max-width: 767px) { .band__media::after { background: rgb(10 13 18 / 0.86); } }

/* ===== Steps: cards hanging from route pins (spec 2026-10-13 §3.3) ===== */
.steps__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-7) var(--space-5); padding-top: 1.625rem; }
.step {
  position: relative; display: grid; align-content: start; gap: var(--space-3);
  padding: calc(1.625rem + var(--space-5)) var(--space-6) var(--space-6); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-md);
}
.step__num {
  position: absolute; z-index: 1; top: 0; left: var(--space-6); transform: translateY(-50%);
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--red-600); color: var(--white); box-shadow: 0 0 0 6px rgb(221 51 29 / 0.16);
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; line-height: 1;
}
/* One row of steps: a dashed lane runs from each pin to the next. */
@media (min-width: 1200px) {
  .steps__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .step:not(:last-child)::after {
    content: ""; position: absolute; top: -1px; left: calc(var(--space-6) + 1.625rem); width: calc(100% + var(--space-5)); height: 2px;
    background: repeating-linear-gradient(90deg, var(--gray-500) 0 6px, transparent 6px 14px);
  }
}
/* One column of steps (phones): the lane runs down from each pin to the next. */
@media (max-width: 559px) {
  .step:not(:last-child)::after {
    content: ""; position: absolute; z-index: -1; top: 0; left: calc(var(--space-6) + 1.625rem - 1px); width: 2px; height: calc(100% + var(--space-7));
    background: repeating-linear-gradient(180deg, var(--gray-500) 0 6px, transparent 6px 14px);
  }
}
.step__title { font-size: var(--fs-h3); overflow-wrap: break-word; }
.step__body { color: var(--color-text-muted); }

/* ===== Link cards ===== */
.cards__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--space-5); }
.link-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--white);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2);
}
.link-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--shadow-lg); }
.link-card:focus-within { box-shadow: 0 0 0 3px var(--color-focus); }
.link-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.link-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.link-card:hover .link-card__media img { transform: scale(1.05); }
.link-card__body { flex: 1; display: grid; align-content: start; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-6); }
.link-card__title { font-size: var(--fs-h3); overflow-wrap: break-word; }
.link-card__link { color: inherit; text-decoration: none; }
.link-card__link:focus-visible { outline: none; }
.link-card__link::after { content: ""; position: absolute; inset: 0; }
.link-card__text { color: var(--color-text-muted); }
.link-card__more { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--red-600); font-size: var(--fs-small); font-weight: 600; }
.link-card__more .icon { width: 1rem; height: 1rem; transition: transform var(--dur-2) var(--ease-out); }
.link-card:hover .link-card__more .icon { transform: translateX(4px); }
@media (min-width: 1024px) { .cards__grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }

/* ===== Callout ===== */
.callout { padding-block: clamp(3rem, 5vw, 4rem); }
.callout__inner {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem); border-radius: var(--radius-xl); background: var(--red-600); color: var(--white);
}
.callout__inner::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.3; background: var(--world-dots, none) center / max(100%, 1100px) auto no-repeat; }
.callout__text { display: grid; gap: var(--space-4); justify-items: start; }
.callout .chip { border-color: rgb(255 255 255 / 0.35); background: rgb(255 255 255 / 0.12); color: var(--white); }
.callout .chip::before { background: var(--white); box-shadow: 0 0 0 4px rgb(255 255 255 / 0.25); }
.callout__title { color: var(--white); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.callout__phone {
  display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-6) var(--space-3) var(--space-3);
  border-radius: var(--radius-pill); background: var(--white); color: var(--ink-950); text-decoration: none;
  transition: background-color var(--dur-2), color var(--dur-2);
}
.callout__phone:hover { background: var(--ink-950); color: var(--white); }
.callout__phone-icon { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--red-600); color: var(--white); }
.callout__phone-label { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.callout__phone-number { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
@media (max-width: 767px) { .callout__inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) {
  .callout__inner { padding: var(--space-6) var(--space-5); }
  .callout__phone { width: 100%; gap: var(--space-3); padding-right: var(--space-4); }
  .callout__phone-icon { width: 2.5rem; height: 2.5rem; }
  .callout__phone-number { font-size: clamp(1.0625rem, 0.85rem + 1.2vw, 1.5rem); }
}

/* ===== Gallery ===== */
.gallery__grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.gallery__item { overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 3 / 4; }
.gallery__item:nth-child(even) { margin-top: var(--space-7); }
.gallery__img, .gallery__img img { width: 100%; height: 100%; }
.gallery__img img { object-fit: cover; transition: transform 1s var(--ease-out); }
.gallery__item:hover .gallery__img img { transform: scale(1.05); }
@media (max-width: 767px) {
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery__item:nth-child(even) { margin-top: var(--space-5); }
}

/* ===== Newsletter ===== */
.newsletter__card {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding: clamp(1.75rem, 4vw, 3.5rem); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--white); box-shadow: var(--shadow-lg);
}
.newsletter__intro { display: grid; gap: var(--space-4); }
.newsletter__form { display: grid; gap: var(--space-4); }
.newsletter__consent { color: var(--color-text-muted); font-size: var(--fs-small); }
.newsletter__consent a { color: var(--red-700); font-weight: 600; }
@media (max-width: 1023px) { .newsletter__card { grid-template-columns: minmax(0, 1fr); } }

/* ===== Prose (legal) ===== */
.prose { display: grid; gap: var(--space-4); max-width: 48rem; margin-inline: auto; }
.prose h2 { margin-top: var(--space-6); font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.prose h3 { margin-top: var(--space-3); font-size: var(--fs-h3); }
.prose ul, .prose ol { display: grid; gap: var(--space-2); padding-left: 1.25rem; }
.prose li::marker { color: var(--red-600); }
.prose a { color: var(--red-700); font-weight: 600; overflow-wrap: anywhere; }

/* ===== Facts ===== */
.facts { position: relative; z-index: 1; margin-top: calc(-1 * var(--space-8)); }
.page-hero:has(+ .facts) .page-hero__content { padding-bottom: calc(clamp(3.5rem, 7vw, 6rem) + var(--space-8)); }
.facts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-lg); }
.fact { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-5) var(--space-6); border-left: 1px solid var(--color-border); }
.fact:first-child { border-left: 0; }
.fact__label { color: var(--color-text-muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.fact__value { margin: 0; color: var(--ink-950); font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
@media (max-width: 1023px) {
  .facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(odd) { border-left: 0; }
  .fact:nth-child(n + 3) { border-top: 1px solid var(--color-border); }
}
@media (max-width: 479px) {
  .facts__grid { grid-template-columns: minmax(0, 1fr); }
  .fact { border-left: 0; }
  .fact + .fact { border-top: 1px solid var(--color-border); }
}

/* ===== Jobs ===== */
.jobs__table { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--white); }
.jobs__head, .job { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: var(--space-5); align-items: center; padding: var(--space-5) var(--space-6); }
.jobs__head { background: var(--ink-950); color: var(--white); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.jobs__list { list-style: none; }
.job + .job { border-top: 1px solid var(--color-border); }
.job__title { font-size: var(--fs-h3); }
.job__title a { color: inherit; text-decoration: none; }
.job__title a:hover { color: var(--red-600); }
.job__text { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--fs-small); }
.job__cell { color: var(--ink-950); font-weight: 600; }
.job__cell-label { display: block; color: var(--color-text-muted); font-size: var(--fs-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
@media (min-width: 1024px) {
  .job__cell-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 1023px) {
  .jobs__head { display: none; }
  .job { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .job__main, .job .btn { grid-column: 1 / -1; }
  .job .btn { justify-self: start; }
}

/* ===== Contact ===== */
.contact__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact__aside { display: grid; gap: var(--space-5); }
.contact__list { list-style: none; display: grid; gap: var(--space-4); }
.contact__item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--white); font-style: normal; }
.contact__item address { font-style: normal; }
.contact__icon { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--red-50); color: var(--red-600); }
.contact__icon .icon { width: 1.25rem; height: 1.25rem; }
.contact__item a { color: var(--ink-950); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.contact__item a:hover { color: var(--red-600); text-decoration: underline; }
.contact__map { display: grid; gap: var(--space-4); justify-items: start; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--ink-950); color: var(--white); box-shadow: var(--shadow-md); }
.contact__map-frame { position: relative; width: 100%; }
.contact__form { padding: clamp(1.5rem, 3vw, 2.75rem); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-lg); }
.contact__form-title { margin-bottom: var(--space-5); font-size: var(--fs-h3); }
@media (max-width: 1023px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } }

/* ===== Founder ===== */
.founder__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.founder__media { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
.founder__img { overflow: hidden; border-radius: var(--radius-xl); aspect-ratio: 4 / 5; box-shadow: var(--shadow-lg); }
.founder__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.founder__body { display: grid; gap: var(--space-5); justify-items: start; }
.founder__id { display: grid; gap: var(--space-1); padding-left: var(--space-5); border-left: 3px solid var(--red-600); }
.founder__name { font-size: var(--fs-h3); }
.founder__role { color: var(--red-700); font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.founder__profile { justify-self: start; margin-top: var(--space-2); color: var(--blue-900); }
.founder__bio { color: var(--color-text-muted); }
@media (max-width: 1023px) {
  .founder__grid { grid-template-columns: minmax(0, 1fr); }
  .founder__media { position: static; max-width: 28rem; }
}

/* ===== Timeline ===== */
.timeline__list { --rail: var(--space-7); list-style: none; position: relative; display: grid; gap: var(--space-5); max-width: 52rem; margin-inline: auto; padding-left: var(--rail); }
.timeline__list::before { content: ""; position: absolute; left: 0.6875rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: linear-gradient(var(--red-600), var(--gray-200)); }
.milestone { position: relative; display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--white); }
.milestone::before { content: ""; position: absolute; left: calc(-1 * var(--rail) + 0.25rem); top: 1.75rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--red-600); box-shadow: 0 0 0 5px var(--red-50); }
.milestone__label { font-size: var(--fs-h3); }
.milestone__body { color: var(--color-text-muted); }
@media (max-width: 479px) { .timeline__list { --rail: var(--space-6); } .milestone { padding: var(--space-4) var(--space-5); } }

/* ===== Form placeholder (Phase 4 stand-in) ===== */
.placeholder-panel__inner { display: grid; gap: var(--space-5); justify-items: start; padding: clamp(2rem, 4vw, 3.5rem); border: 2px dashed var(--gray-300); border-radius: var(--radius-xl); background: var(--gray-100); }
.placeholder-panel__form-title { font-size: var(--fs-h3); }
.placeholder-panel__note { padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--white); color: var(--gray-600); font-size: var(--fs-small); }