/* PStyle — inner-page styles (loaded on generic pages + About / Innovation Lab / Contact).
   Scope: editorial long-form About story, dark/spacious Innovation Lab coming-soon,
   Contact split (form + details). main.css (global) is already loaded; only page-
   specific rules live here. Raw values come from tokens.css via var(--…).
   Responsive 375 → 1440. Reuses .ps-container, .ps-eyebrow, .ps-btn, .ps-reveal,
   .ps-prose, .ps-on-dark, .ps-accent, .ps-accent-rule.
   Sections: About · Innovation Lab · Contact · Honeypot · Responsive · Reduced-motion. */

/* ============================================================ About
   Editorial long-form rhythm: a narrow lede, an asymmetric story split with one
   image, a dark "PStyle today" statement band, an optional full-width image band,
   and a quiet closing line. Generous whitespace throughout. */
.ps-about-hero {
  padding-bottom: var(--sp-5);
}

.ps-about-hero__title {
  margin: 0 0 var(--sp-4);
  font-size: var(--step-4);
  font-weight: var(--w-reg);
  line-height: 1.04;
  max-width: 16ch;
}

.ps-about-hero__lead {
  margin: 0;
  max-width: 52ch;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--muted);
}

/* Story split — image + text, asymmetric, image leads on desktop. */
.ps-about-story__inner {
  display: grid;
  grid-template-columns: 5fr 6fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 5vw, 6rem);
}

.ps-about-story__media {
  margin: 0;
}

.ps-about-story__media .ps-media,
.ps-about-story__media .ps-ph {
  width: 100%;
}

.ps-about-story__heading {
  margin: 0 0 var(--sp-3);
  font-size: var(--step-3);
  font-weight: var(--w-reg);
}

.ps-about-story__body {
  max-width: 48ch;
  color: var(--ink);
}

.ps-about-story__body p {
  color: var(--muted);
}

/* "PStyle today" — the positioning statement, on a dark band for weight.
   Ground + inverted text now come from .ps-surface--dark in page-about.php; the
   `background: var(--anthracite); color: var(--white)` pair that used to live
   here was removed because pages.css loads after main.css and would have beaten
   the utility class. */
.ps-about-today__inner {
  text-align: center;
}

.ps-about-today__eyebrow {
  /* The colour override is gone: .ps-eyebrow already reads var(--muted), which
     .ps-surface--dark re-scopes to --muted-invert = the same rgba(255,255,255,0.66)
     this rule used to set. Only the spacing is section-specific. */
  margin-bottom: var(--sp-4);
}

.ps-about-today__statement {
  margin: 0 auto var(--sp-4);
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--w-reg);
  line-height: 1.1;
  color: var(--white);
}

.ps-about-today__note {
  margin: 0 auto;
  max-width: 48ch;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--on-dark-72);
}

/* Optional full-width editorial image band (only when a featured image exists).
   Ground: .ps-surface--muted in page-about.php, so the dark "How we work" above
   and the white Note below both separate from it. */
.ps-about-band {
  padding-block: var(--section-y);
}

.ps-about-band__media {
  width: 100%;
}

/* Conditional-section correction: both the image band (featured image) and the
   Note (page body copy) are client-editable, so the Note can disappear and leave
   two muted grounds touching. When that happens the closing section takes the
   white ground and the alternation still holds — no reliance on a hairline
   between two identical grounds. */
.ps-about-band + .ps-about-close {
  background: var(--surface-1);
}

/* Authored prose note (only when the page has body content).
   The `padding-top: 0` that used to sit here was written when the Note and the
   band above it were both white and the collapsed gap was invisible. Now that
   the Note is a white surface between a muted band and a muted close, zero top
   padding made the white ground start on the first line of text — the band read
   as clipped. The override is removed so the section keeps the symmetric
   var(--section-y) padding of .ps-section; measured on /about/ and
   /bg/about-bg/. */

/* Closing philosophy line + CTA. */
.ps-about-close__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.ps-about-close__philosophy {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.2;
  color: var(--ink);
  max-width: 30ch;
}

.ps-about-close__cta {
  align-self: flex-start;
}

/* ============================================================ Innovation Lab
   The most experimental page: full-bleed dark, spacious, built around the P/LAB
   motif. The whole article is .ps-on-dark; we paint the page background dark and
   let the header/footer keep their own chrome. */
.ps-lab {
  background: var(--anthracite);
  color: var(--white);
}

.ps-lab-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--header-h) - var(--topbar-h));
  padding-block: var(--sp-8);
  overflow: hidden;
  background:
    radial-gradient(
      120% 100% at 82% 8%,
      rgba(24, 66, 182, 0.22) 0%,
      rgba(24, 66, 182, 0) 46%
    ),
    radial-gradient(
      120% 90% at 12% 100%,
      var(--lab-ground-hi) 0%,
      var(--anthracite) 40%,
      var(--anthracite-deep) 100%
    );
}

/* Faint technical grid — the "lab" texture, decorative only. */
.ps-lab-hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: clamp(48px, 6vw, 96px) clamp(48px, 6vw, 96px);
  /* #000 here is an ALPHA ramp, not a palette colour: a mask only reads the
     alpha channel, so opaque-black means "keep" and transparent means "hide".
     It is deliberately not a token — tokenising it would imply the grid changes
     colour with the palette, which it does not. */
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 92%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 92%);
}

.ps-lab-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 5vw, 6rem);
  width: 100%;
}

.ps-lab-hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9em;
  margin-bottom: var(--sp-4);
  color: var(--on-dark-72);
}

.ps-lab-hero__name {
  color: var(--white);
}

/* 14px status text on anthracite: --accent measures 1.98:1 here, so the label
   uses the on-dark accent (6.99:1). The dot below stays --accent — an accent
   BACKGROUND keeps the exact brand value. */
.ps-lab-hero__status {
  position: relative;
  padding-left: 1.1em;
  color: var(--accent-on-dark);
}

.ps-lab-hero__status::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--accent);
}

.ps-lab-hero__title {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--w-reg);
  line-height: 1.16;
  letter-spacing: -0.005em;
  color: var(--white);
  max-width: 24ch;
}

.ps-lab-hero__launch {
  margin: 0 0 var(--sp-4);
  font-size: var(--step-1);
  font-weight: var(--w-med);
  color: var(--white);
}

.ps-lab-hero__belief {
  margin: 0;
  max-width: 46ch;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--on-dark-66);
}

/* P/LAB motif — the experimental focal mark. */
.ps-lab-hero__motif {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
  text-align: right;
}

.ps-lab-mark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(4rem, 2rem + 12vw, 10rem);
  font-weight: var(--w-reg);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--white);
}

.ps-lab-mark__slash {
  margin-inline: 0.04em;
  color: var(--on-dark-40);
  font-weight: var(--w-reg);
}

.ps-lab-launch {
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--on-dark-60);
}

/* Optional prose note under the hero, on the dark ground. */
.ps-lab-note .ps-prose {
  color: var(--on-dark-78);
}

.ps-lab-note .ps-prose h2,
.ps-lab-note .ps-prose h3 {
  color: var(--white);
}

.ps-lab-foot {
  border-top: 1px solid var(--line-invert);
  padding-block: var(--sp-6);
}

.ps-lab-foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
}

.ps-lab-foot__line {
  margin: 0;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--on-dark-60);
}

.ps-lab-foot__philosophy {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--on-dark-82);
}

/* ============================================================ Contact
   Split: intro + details on the left, the four-field form on the right;
   collapses to stacked on mobile. The page was all-white; since 2026-08-12 the
   whole block sits on the muted ground (.ps-surface--muted on the <article>) and
   the form column is a quiet white card on it. */
.ps-contact {
  padding-block: var(--section-y);
}

.ps-contact__grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  align-items: start;
  gap: clamp(2.5rem, 1rem + 6vw, 7rem);
}

.ps-contact__title {
  margin: 0 0 var(--sp-4);
  font-size: var(--step-4);
  font-weight: var(--w-reg);
  line-height: 1.04;
  max-width: 14ch;
}

.ps-contact__lead {
  margin: 0 0 var(--sp-6);
  max-width: 44ch;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--muted);
}

.ps-contact__details {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.ps-contact__detail {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--sp-3);
  align-items: baseline;
}

.ps-contact__detail-label {
  margin: 0;
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-mid);
  color: var(--muted);
}

.ps-contact__detail-value {
  margin: 0;
  font-size: var(--step-0);
  color: var(--ink);
}

.ps-contact__detail-value a {
  color: var(--ink);
}

.ps-contact__detail-value a:hover,
.ps-contact__detail-value a:focus-visible {
  color: var(--accent);
}

/* Form column — a white card on the muted section ground. Deliberately quiet:
   a hairline border and sharp corners (var(--radius) = 0), NO box-shadow, so it
   reads as a panel in the same restrained language as the rest of the site and
   not as a floating widget. Padding uses the existing --sp-* scale. */
.ps-contact__formwrap {
  min-width: 0;
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Success / error banner. Inside the white card the warm-grey ground separates
   the notice from the panel; the added hairline keeps it legible as a distinct
   block even where the notice would sit directly on the muted section ground
   (warm-grey on warm-grey). The success/error variants keep their accent-tint /
   accent-edge treatment and only inherit the hairline. */
.ps-contact__notice {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  background: var(--warm-grey);
  font-size: var(--step-0);
}

.ps-contact__notice p {
  margin: 0;
}

.ps-contact__notice p + p {
  margin-top: 0.4em;
}

.ps-contact__notice-title {
  font-weight: var(--w-semi);
}

.ps-contact__notice--success {
  border-left-color: var(--accent);
  background: var(--accent-tint);
}

.ps-contact__notice--error {
  border-left-color: var(--accent);
  color: var(--ink);
}

/* The form itself. */
.ps-contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.ps-contact-form__field {
  margin-bottom: var(--sp-4);
}

.ps-contact-form__row .ps-contact-form__field {
  margin-bottom: 0;
}

/* Give the row spacing below it (its children carry none). */
.ps-contact-form__row {
  margin-bottom: var(--sp-4);
}

.ps-req {
  color: var(--accent);
}

.ps-contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-3);
}

.ps-contact-form__submit {
  flex: 0 0 auto;
}

.ps-contact-form__fineprint {
  margin: 0;
  max-width: 32ch;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--muted);
}

/* ============================================================ Honeypot
   Visually hidden but present in the DOM and submitted by bots. Not display:none
   and not the .screen-reader-text pattern (kept out of the a11y tree via
   aria-hidden + tabindex=-1 on the template side). */
.ps-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================ Responsive */
@media (max-width: 900px) {
  .ps-about-story__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .ps-about-story__media {
    max-width: 32rem;
  }

  .ps-lab-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .ps-lab-hero__motif {
    order: -1;
    align-items: flex-start;
    text-align: left;
  }

  .ps-contact__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  /* The white form card keeps a smaller inset at 375px so the fields do not lose
     width to padding (same --sp-* scale, one step down). */
  .ps-contact__formwrap {
    padding: var(--sp-4);
  }

  .ps-contact-form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ps-contact-form__row .ps-contact-form__field {
    margin-bottom: var(--sp-4);
  }

  .ps-contact__detail {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .ps-about-close__cta {
    width: 100%;
  }

  .ps-lab-hero {
    min-height: calc(100svh - var(--header-h));
  }
}

/* ============================================================ Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ============================================================ About — Phase C additions
   The Plamena Style → P STYLE timeline (with an optional heritage image beside
   it) and the "How we work" trio. Editorial, hairline-led, whitespace-first.
   Motion is limited to the existing .ps-reveal (JS-driven, reduced-motion safe);
   nothing here animates on its own. */
.ps-about-timeline__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(2rem, 1rem + 5vw, 6rem);
}

/* Two columns only when a valid heritage image is present. */
.ps-about-timeline.has-media .ps-about-timeline__inner {
  grid-template-columns: 5fr 6fr;
}

.ps-about-timeline__media {
  margin: 0;
}

.ps-about-timeline__fig {
  width: 100%;
}

.ps-about-timeline__head {
  margin-bottom: var(--sp-5);
}

.ps-about-timeline__heading {
  margin: var(--sp-2) 0 0;
  font-size: var(--step-3);
  font-weight: var(--w-reg);
  line-height: 1.1;
  max-width: 18ch;
}

.ps-about-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-5);
}

/* Each milestone: a hairline spine on the left with an accent node. */
.ps-about-timeline__item {
  position: relative;
  padding-left: var(--sp-4);
  border-left: 1px solid var(--line);
}

.ps-about-timeline__item::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0.35em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.ps-about-timeline__year {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--ink);
}

.ps-about-timeline__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--step-1);
  font-weight: var(--w-med);
  color: var(--ink);
}

.ps-about-timeline__text {
  margin: 0;
  max-width: 46ch;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--muted);
}

/* "How we work" trio — Design · Produce · Implement, hairline-separated.
   Anthracite ground with white typography (client's own example, approved
   2026-08-12): assigned with .ps-surface--dark ps-on-dark in page-about.php.
   The section's own `border-top: 1px solid var(--line)` was removed — it existed
   to separate this section from the white timeline above it, and the change of
   ground now does that far more strongly (inside the dark scope --line is
   re-scoped to --line-invert, so the rule would have drawn a faint white
   hairline on the dark edge for no reason).
   Children invert by themselves through the re-scoped tokens: __item's hairline
   (var(--line) → --line-invert), __title (inherits white), __text
   (var(--muted) → --muted-invert). Only __index needed an explicit switch,
   because it is accent-coloured TEXT. */
.ps-about-work__head {
  margin-bottom: var(--sp-5);
}

.ps-about-work__heading {
  margin: var(--sp-2) 0 0;
  font-size: var(--step-3);
  font-weight: var(--w-reg);
}

.ps-about-work__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.ps-about-work__item {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.ps-about-work__index {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  letter-spacing: var(--letter-mid);
  /* Accent as TEXT on anthracite (--accent is 1.98:1 there and fails AA). */
  color: var(--accent-on-dark);
}

.ps-about-work__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--step-1);
  font-weight: var(--w-med);
}

.ps-about-work__text {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 900px) {
  .ps-about-timeline.has-media .ps-about-timeline__inner {
    grid-template-columns: 1fr;
  }

  .ps-about-timeline__media {
    max-width: 32rem;
  }

  .ps-about-work__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ============================================================ Innovation Lab — Phase C additions
   Beneath the dark hero: an optional full-bleed concept-image band, research
   focus cards, a numbered roadmap ending on the approved 2027 launch beat, and a
   "Register your interest" CTA to Contact. Everything stays on the dark ground;
   these sit inside .ps-lab (which paints the page --anthracite). Motion is
   limited to .ps-reveal (reduced-motion safe). */
.ps-lab-band {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-invert);
  border-bottom: 1px solid var(--line-invert);
  /* This tone became a token (--anthracite-deep) in the 2026-08-12 iteration;
     the band was where it originally came from. */
  background: var(--surface-4);
}

.ps-lab-band .ps-media,
.ps-lab-band__media {
  width: 100%;
}

.ps-lab-band .ps-media__img {
  display: block;
  width: 100%;
  height: clamp(18rem, 12rem + 26vw, 40rem);
  object-fit: cover;
}

/* Cinematic darkening so the band reads as part of the dark page. */
.ps-lab-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(20, 20, 22, 0.2),
    rgba(20, 20, 22, 0.55)
  );
}

.ps-lab-focus .ps-eyebrow,
.ps-lab-roadmap .ps-eyebrow {
  color: var(--on-dark-72);
}

.ps-lab-focus__head,
.ps-lab-roadmap__head {
  margin-bottom: var(--sp-6);
}

.ps-lab-focus__heading,
.ps-lab-roadmap__heading {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--w-reg);
  line-height: 1.14;
  color: var(--white);
  max-width: 20ch;
}

/* Focus cards — a hairline grid on the dark ground (2×2 → single column). */
.ps-lab-focus__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-invert);
  border: 1px solid var(--line-invert);
}

.ps-lab-focus__item {
  margin: 0;
  padding: var(--sp-5) var(--sp-4);
  background: var(--anthracite);
}

.ps-lab-focus__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--step-1);
  font-weight: var(--w-med);
  color: var(--white);
}

.ps-lab-focus__text {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--on-dark-66);
}

/* Roadmap — numbered steps, hairline top rules; the last step (2027) accented. */
.ps-lab-roadmap {
  border-top: 1px solid var(--line-invert);
}

.ps-lab-roadmap__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

.ps-lab-roadmap__step {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-invert);
}

.ps-lab-roadmap__step:last-child {
  border-top-color: var(--accent);
}

.ps-lab-roadmap__index {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--on-dark-40);
}

/* The 2027 step is marked with the accent; on anthracite it must be the on-dark
   accent or the number reads as near-black (1.98:1). */
.ps-lab-roadmap__step:last-child .ps-lab-roadmap__index {
  color: var(--accent-on-dark);
}

.ps-lab-roadmap__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--step-1);
  font-weight: var(--w-med);
  color: var(--white);
}

.ps-lab-roadmap__text {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--on-dark-66);
}

/* Register-interest CTA — centred, on the dark ground. */
.ps-lab-cta {
  border-top: 1px solid var(--line-invert);
}

.ps-lab-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}

.ps-lab-cta__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--w-reg);
  line-height: 1.14;
  color: var(--white);
  max-width: 20ch;
}

.ps-lab-cta__text {
  margin: 0;
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--on-dark-72);
}

.ps-lab-cta__btn {
  margin-top: var(--sp-2);
}

@media (max-width: 900px) {
  .ps-lab-roadmap__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .ps-lab-focus__grid {
    grid-template-columns: 1fr;
  }

  .ps-lab-roadmap__list {
    grid-template-columns: 1fr;
  }

  .ps-lab-cta__btn {
    width: 100%;
  }
}