/* =========================================================================
   Layout and components — static styles only.
   Every transition, hover and entrance lives in motion.css.
   ========================================================================= */

/* Base ------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* clip, not hidden, so the sticky nav keeps working */
}

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

h1, h2, h3, h4, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: var(--color-accent); color: var(--color-surface); }

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

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--color-ink);
  color: var(--color-ink-inverse);
}
.skip-link:focus { top: 16px; }

/* Type styles ------------------------------------------------------------ */

.display-xl {
  font-size: var(--fs-display-xl);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.display-l {
  font-size: var(--fs-display-l);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.body-l {
  font-size: var(--fs-body-l);
  line-height: 1.5;
  letter-spacing: -0.002em;
}

.mono-s {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  line-height: 1.5;
}

.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.muted { color: var(--color-ink-muted); }
.faint { color: var(--color-ink-faint); }

.accent-word {
  font-style: italic;
  color: var(--color-accent);
}

/* Rule: a 1px line on an element's top edge, drawn by S9. */
[data-rule] { position: relative; }
[data-rule]::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--rule-color, var(--color-line));
  transform-origin: left center;
  pointer-events: none;
}

/* Eyebrow ---------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-ink-muted);
}

.eyebrow__signal {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
}

/* Buttons ---------------------------------------------------------------- */

.arrow {
  flex: none;
  width: 16px;
  height: 16px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 5px 5px 5px 20px;
  border-radius: var(--radius);
  background: var(--color-ink);
  color: var(--color-ink-inverse);
  font-weight: 500;
  line-height: 1.55;
  white-space: nowrap;
}

.btn-primary__tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-surface);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px 13px 18px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius);
  color: var(--color-ink);
  font-weight: 500;
  line-height: 1.55;
  white-space: nowrap;
}

.btn-text {
  display: inline-flex;
  padding: 14px 4px;
  font-weight: 500;
  line-height: 1.55;
  white-space: nowrap;
}

.link-s3 {
  text-decoration-line: underline;
  text-decoration-color: var(--color-ink);
  text-decoration-thickness: from-font;
  text-underline-offset: 3px;
}

/* Quiet variant: no underline at rest, S3's hover state still applies. */
.link-s3--quiet { text-decoration-color: transparent; }

/* H1 · Nav --------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
}

.brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
}

.brand__avatar {
  flex: none;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
}

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

.brand__name {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.brand__title {
  font-weight: 600;
  line-height: 1.55;
}

.brand__role {
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  line-height: 1.5;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
  font-weight: 500;
  line-height: 1.55;
  white-space: nowrap;
}

.nav-link {
  position: relative;
  display: inline-block;
  padding-block: 2px;
}

.nav__toggle {
  display: none;
  padding: 12px 4px;
  font-weight: 500;
  line-height: 1.55;
}

/* H2 · Hero -------------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 56px;
  padding-bottom: clamp(72px, 7.2vw, 104px);
}

.hero__head {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hl-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.24em; /* 22px at 92 */
}

.hl-line--2 { column-gap: 0.26em; } /* 24px at 92 */

.hero__photo {
  position: relative;
  flex: none;
  width: 0.978em;  /* 90 at 92 */
  height: 0.913em; /* 84 at 92 */
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-line);
  border-radius: inherit;
  pointer-events: none;
}

.hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-top: 33px; /* 1px rule + 32 */
}

.hero__sub {
  max-width: 460px;
  color: var(--color-ink-muted);
}

.hero__ctas {
  display: flex;
  flex: none;
  align-items: center;
  gap: 24px;
}

/* H3 · Outcomes ---------------------------------------------------------- */

.outcomes {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: clamp(96px, 9.7vw, 140px);
}

.outcomes__grid {
  --rule-color: var(--color-ink);
  display: flex;
  align-items: stretch;
  padding-top: 1px;
}

.outcome {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 28px 28px 0;
  border-left: 1px solid var(--color-line);
}

.outcome:first-child {
  padding-left: 0;
  border-left: 0;
}

.outcome__product { color: var(--color-ink-faint); }

.outcome__value {
  font-size: var(--fs-number-xl);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.outcome__value--accent { color: var(--color-accent); }

.outcome__what { max-width: 260px; }

.outcome__was {
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  line-height: 1.5;
}

.count { display: inline-block; }

/* H4 + H5 · Selected work ------------------------------------------------ */

.work {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-bottom: var(--section-end);
}

/* The team in a couple of lines, in place of a section heading: 14px mono,
   the full width of the content */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.section-head__note {
  color: var(--color-ink-muted);
  white-space: nowrap;
}

/* A heading that wraps (on phones) splits evenly, no word left alone */
.section-head > :is(h2, h3) { text-wrap: balance; }

/* H3 · My work: the section heading, then the NGFT work. */
.my-work { padding-bottom: 64px; }

.work__list {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.work__row {
  display: grid;
  grid-template-columns: 770fr 550fr;
  align-items: start;
  gap: 24px;
}

.work__row--flip { grid-template-columns: 550fr 770fr; }
.work__row--full { grid-template-columns: 1fr; }

.card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  border-radius: var(--radius);
}

.card__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 770 / 500;
}

.card--full .card__panel { aspect-ratio: 1344 / 620; }
.card--narrow .card__panel { aspect-ratio: 550 / 500; }

.panel--tint { background: var(--color-accent-tint); }
.panel--sunken { background: var(--color-surface-sunken); }
.panel--inverse { background: var(--color-surface-inverse); }
.panel--surface {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}

/* Image slot: a screen sitting in its panel, centred, bleeding off the bottom.
   Drop an <img> inside and it covers the placeholder text. */
.slot {
  position: absolute;
  top: var(--slot-top, 11.2%);
  left: calc((100% - var(--slot-w, 83%)) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: var(--slot-w, 83%);
  aspect-ratio: var(--slot-ratio, 4 / 3);
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-screen);
  color: var(--color-ink-faint);
  white-space: nowrap;
}

.slot > img,
.slot > picture,
.slot > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.slot--2080x1320 { --slot-w: 77.381%; --slot-top: 11.613%; --slot-ratio: 2080 / 1320; }
.slot--1280x960  { --slot-w: 83.117%; --slot-top: 11.2%;   --slot-ratio: 1280 / 960; }
.slot--880x960   { --slot-w: 80%;     --slot-top: 11.2%;   --slot-ratio: 880 / 960; }
.slot--680x1000  { --slot-w: 61.818%; --slot-top: 11%;     --slot-ratio: 680 / 1000; }

/* The offer card's hover-to-play thumbnail (css/offer-thumb.css) fills the
   panel in place of a slot; its screen gets the slot's frame. */
.card .wt__screen {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-screen);
}

/* The compliance, SMS, instructor and training cards' motion graphics
   (css/compliance-thumb.css, sms-thumb.css, tablet-thumb.css, training-thumb.css)
   fill the panel; each SVG centres itself on the panel's own ground where the
   ratios differ. */
.card__panel > :is(.mg, .sd, .tb, .tr, .hx, .sg) {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

/* panel--surface already draws the 1px line; the graphic's own would double it */
.card__panel > .tb { box-shadow: none; }

/* The HX graphic (800 x 520, css/hx-thumb.css) sits in a wider panel. Its navy
   and top glow are painted on the panel instead of its own two ground rects, so
   they reach the edges without a seam. The glow matches the SVG's: centred 10%
   above the top, 85% of the height tall and 680/520 of the height wide. */
.card__panel > .hx {
  background:
    radial-gradient(var(--hx-glow-w, 60.3%) 85% at 50% -10%, rgb(42 47 208 / 0.55), rgb(42 47 208 / 0)),
    var(--hx-panel);
}

.card__panel > .hx .hx-svg > rect { fill: none; }

.card__info {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.card__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.card--full { --title-w: 760px; }
.card--wide { --title-w: 550px; }
.card--narrow { --title-w: 330px; }

.card__title,
.card__outcome { max-width: var(--title-w); }

.card__outcome { color: var(--color-ink-muted); }

.card__meta {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.card__where {
  color: var(--color-ink-muted);
  white-space: pre;
}

.chip {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: var(--radius);
  white-space: nowrap;
}

.chip--solid {
  background: var(--color-ink);
  color: var(--color-ink-inverse);
}

.chip--outline {
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
}

/* Client chip — names the company or product, pinned to the top left of a work
   thumbnail. Same shape and type as the status chip; only the colour differs. */
.chip--client {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  color: var(--color-ink-inverse);
}

.chip--ngft { background: var(--color-client-ngft); }
.chip--hx { background: var(--color-client-hx); }
.chip--snapgrid { background: var(--color-client-snapgrid); }

/* The chip is a fixed physical size while the thumbnail art scales with the
   panel, so on narrower cards the art rises to meet it. Shrink the chip and
   pull it further into the corner as the panels get smaller. */
@media (max-width: 1199px) {
  .chip--client {
    top: 12px;
    left: 12px;
    padding: 4px 7px;
    font-size: 11px;
    letter-spacing: 0.055em;
  }
}

@media (max-width: 599px) {
  .chip--client { top: 10px; left: 10px; }
}

/* Shared two-column split (Approach, About): 560 | 96 | 688 at 1440 --------- */

.split {
  display: grid;
  grid-template-columns: 560fr 688fr;
  align-items: start;
  column-gap: clamp(40px, 6.67vw, 96px);
}

/* H7 · Approach ---------------------------------------------------------- */

.approach { padding-bottom: var(--section-end); }

.approach__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.approach__head h2 { max-width: 560px; }
.approach__head p { max-width: 460px; }

.principle {
  --rule-color: var(--color-ink);
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 29px 0 48px; /* 1px rule + 28 */
}

.principle__num {
  flex: none;
  min-width: 16px;
  color: var(--color-accent);
}

.principle__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.principle__text p {
  max-width: 520px;
  color: var(--color-ink-muted);
}

/* H8 · About ------------------------------------------------------------- */

.about { padding-bottom: var(--section-end); }

.about__portrait {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 560 / 680;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
  color: var(--color-ink-faint);
}

.about__portrait > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__text,
.about__intro {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.about__intro > * { max-width: 620px; }

.experience {
  display: flex;
  flex-direction: column;
}

.experience__label {
  margin-bottom: 14px;
  color: var(--color-ink-muted);
}

.job { padding-top: 1px; }

.job__row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 16px;
}

.job__dates {
  flex: none;
  width: 190px;
  color: var(--color-ink-muted);
}

.job__company {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.job__role {
  color: var(--color-ink-muted);
  text-align: right;
}

.about__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* H9 · Contact ----------------------------------------------------------- */

/* H8b · Testimonials ------------------------------------------------------
   A horizontal rail of quotes. The viewport is a real scroll container with
   snap points, so with scripting off, or under reduced motion, it is still a
   swipeable, keyboard-scrollable list of all three. The script only advances
   it on a timer, and stops the moment a pointer, focus or touch arrives. */

/* The one section on the page that is not on the page's own ground: a very
   light wash of the accent, full width, so it reads as a different kind of
   content from the work above and the ask below. */
.testimonials {
  background: var(--color-accent-tint);
  padding-block: clamp(72px, 7.6vw, 104px);
}

.testimonials__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tm {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 48px;
}

.tm__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.tm__viewport::-webkit-scrollbar { display: none; }

.tm__item {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  gap: 32px;
  scroll-snap-align: start;
  min-width: 0;
}

/* Sized for a real testimonial rather than a one-line pull quote: people
   write a paragraph, so this has to stay readable at about 350 characters
   without turning into a wall. */
.tm__quote {
  max-width: 54ch;
  margin: 0;
  font-size: clamp(1.1875rem, 1.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.01em;
}

.tm__person {
  display: flex;
  align-items: center;
  gap: 16px;
  /* the rail is as tall as its longest quote, so pin the attribution to the
     bottom and it lands in the same place on every slide */
  margin-top: auto;
}

.tm__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 50%;
  /* translucent, so the well picks up whatever the section is sitting on */
  background: rgb(15 17 19 / 0.07);
}

.tm__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

.tm__who {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.tm__name { font-weight: 600; }
.tm__bio { color: var(--color-ink-muted); font-size: var(--fs-mono-s); }

/* LinkedIn mark, at its own brand colour; the label is for screen readers */
.tm__li {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  color: #0A66C2;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.tm__li:hover { opacity: 0.7; }
.tm__li svg { display: block; width: 20px; height: 20px; fill: currentColor; }

/* position, and a way to jump between the three */
.tm__dots {
  display: flex;
  gap: 8px;
}

.tm__dot {
  width: 28px;
  height: 3px;
  padding: 0;
  border: 0;
  background: rgb(15 17 19 / 0.18);
  transition: background var(--dur-fast) var(--ease-out);
}

.tm__dot[aria-current="true"] { background: var(--color-ink); }
.tm__dot:hover { background: var(--color-ink-muted); }

@media (max-width: 899px) {
  .tm__quote { max-width: none; }
  .tm { margin-top: 32px; }
}

.contact {
  --rule-color: var(--color-ink);
  padding-block: 121px 120px; /* 1px rule + 120 */
}

.contact__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.contact__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact__title .hl-line { align-items: flex-start; }

.contact__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
}

.email {
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: nowrap;
}

.email__label { color: var(--color-ink-muted); }

.email__address {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.002em;
}

.contact__note {
  max-width: 300px;
  color: var(--color-ink-muted);
}

/* H10 · Footer ----------------------------------------------------------- */

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

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 24px;
  padding-bottom: 32px;
}

.footer__credit { color: var(--color-ink-muted); }

.footer__links {
  display: flex;
  gap: 32px;
}

/* Placeholder copy inside empty image slots */
.slot__label,
.slot__size { position: relative; }

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1099px) {
  .outcomes__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }

  .outcome:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 899px) {
  /* Nav collapses into a menu */
  .nav__toggle { display: inline-flex; }

  .nav__menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 4px var(--gutter) 28px;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    background: var(--color-bg);
  }

  .nav.is-open .nav__menu { display: flex; }

  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__links li + li { border-top: 1px solid var(--color-line); }

  .nav-link {
    display: block;
    padding-block: 14px;
    font-size: 20px;
  }

  .nav__menu .btn-primary { align-self: flex-start; }

  .hero__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .work__row,
  .work__row--flip { grid-template-columns: 1fr; gap: 56px; }

  .card--full .card__panel { aspect-ratio: 7 / 4; }
  .card--full .card__panel > .hx { --hx-glow-w: 74.7%; } /* 680/520 of the height, at 7:4 */
  .card--full .slot--2080x1320 { --slot-w: 86%; --slot-top: 12%; }

  .card__info {
    flex-direction: column;
    gap: 14px;
  }

  .card__meta {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .split {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }

  .about__portrait { max-width: 520px; }
}

@media (max-width: 599px) {
  .hero { padding-top: 40px; gap: 40px; }

  .hero__ctas {
    flex-wrap: wrap;
    gap: 8px 24px;
  }

  .outcomes__grid {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .outcome,
  .outcome:first-child {
    padding: 24px 0 28px;
    border-left: 0;
  }

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

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* stacked under its heading, a long note wraps instead of widening the page */
  .section-head__note { white-space: normal; }

  .work,
  .work__list { gap: 48px; }

  .my-work { padding-bottom: 48px; }

  /* the contact headline's hand-set lines would leave a word alone on a
     phone, so they run together as one block of text here */
  .contact__title { display: block; }
  .contact__title .hl-line { display: inline; }

  .principle { gap: 20px; padding-bottom: 36px; }

  .job__row {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .job__dates { width: 100%; }

  .contact__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* =========================================================================
   Case study pages (work/*.html) — C-codes follow the margin markers on the
   Figma page "Case study template".
   ========================================================================= */

/* C2 · Header ------------------------------------------------------------ */

.cs-header {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 40px;
  padding-bottom: 64px;
}

.back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  color: var(--color-ink-muted);
}

.arrow-back {
  flex: none;
  width: 16px;
  height: 16px;
}

.cs-header .eyebrow { margin-top: 56px; } /* Figma: 24px spacer + one more 32px gap */

.cs-eyebrow__text { white-space: pre-wrap; }

.cs-title { max-width: 1200px; }

.cs-lede {
  max-width: 820px;
  color: var(--color-ink-muted);
}

.cs-meta {
  --rule-color: var(--color-ink);
  display: flex;
  padding-top: 1px;
}

.cs-meta__item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 20px 24px 0 0;
}

.cs-meta__label { color: var(--color-ink-faint); }
.cs-meta__value { max-width: 280px; }

/* C3 · Hero image -------------------------------------------------------- */

.cs-hero { padding-bottom: clamp(80px, 8.3vw, 120px); }

.cs-hero__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 1344 / 760;
}

/* Figma frame is 1120 x 760 inside a 1344 x 760 panel, 80px down. */
.slot--hero { --slot-w: 83.333%; --slot-top: 10.526%; --slot-ratio: 1120 / 760; }

/* C4 · Outcomes (reuses the Home outcome grid) --------------------------- */

.cs-outcomes {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: clamp(96px, 9.7vw, 140px);
}

.cs-outcomes__title { max-width: 900px; }
.cs-outcomes .outcome { gap: 12px; }

.seq > span { display: inline-block; }

/* C5 + C8 · Sticky-head split: 420 | 96 | 828 at 1440 ---------------------- */

.cs-split {
  display: grid;
  grid-template-columns: 420fr 828fr;
  align-items: start;
  column-gap: clamp(40px, 6.67vw, 96px);
  padding-bottom: var(--section-end);
}

.cs-split__head {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs-split__label { color: var(--color-ink-muted); }
.cs-split__head h2 { max-width: 420px; }

.cs-problem__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.cs-problem__body > .body-l { max-width: 780px; }

/* In-flow screenshot box (the Before image and the state cards).
   Drop an <img> inside and it covers the placeholder text. */
.shot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink-faint);
  white-space: nowrap;
}

.shot > img,
.shot > picture,
.shot > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.shot--before {
  aspect-ratio: 1656 / 1040;
  background: var(--color-surface-sunken);
}

.shot--state { aspect-ratio: 1320 / 800; }

.caption { color: var(--color-ink-muted); }

/* C6 · Flow stepper ------------------------------------------------------ */

.cs-flow {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: var(--section-end);
}

.cs-flow__title { max-width: 1000px; }

.flow {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.stepper {
  display: flex;
  gap: 16px;
}

.step {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding-top: 21px; /* 3px active bar + 18 */
}

/* Resting 1px line, with the 3px accent bar drawn over it when active. */
.step::before,
.step::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  pointer-events: none;
}

.step::before {
  height: 1px;
  background: var(--color-line);
}

.step::after {
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.step[aria-selected="true"]::after { transform: scaleX(1); }

.step__num { color: var(--color-ink-faint); }
.step[aria-selected="true"] .step__num { color: var(--color-accent); }

.step__title {
  color: var(--color-ink-muted);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.step[aria-selected="true"] .step__title { color: var(--color-ink); }

.step__desc {
  max-width: 230px;
  color: var(--color-ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

.flow__panel {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.flow__stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 1344 / 700;
}

/* 620 x 560 centred in a 1344 x 700 stage */
.slot--step { --slot-w: 46.131%; --slot-top: 10%; --slot-ratio: 1240 / 1120; }

.flow__captions { display: grid; }

.flow__caption {
  grid-area: 1 / 1;
  color: var(--color-ink-muted);
  white-space: pre-wrap;
}

/* C7 · Failure states ---------------------------------------------------- */

.cs-states {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: var(--section-end);
}

.cs-states__title { max-width: 1000px; }

.states {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.states__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 24px;
}

.state {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.state__label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-ink);
}

.state__marker {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
}

.state__marker--ink { background: var(--color-ink); }

.state__text {
  max-width: 560px;
  color: var(--color-ink-muted);
}

/* C1b · Case study summary — four rows for anyone who will not read 3,000
   words. Mono labels, hairline rules, square corners, existing tokens. */
.cs-summary {
  display: flex;
  flex-direction: column;
  margin-block: 8px 48px;
  border-top: 1px solid var(--color-line);
}

.cs-summary__row {
  display: flex;
  align-items: baseline;
  gap: 40px;
  padding-block: 16px;
  border-bottom: 1px solid var(--color-line);
}

.cs-summary__label {
  flex: 0 0 132px;
  max-width: 132px;
  color: var(--color-ink-muted);
}

.cs-summary__value {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 62ch;
}

@media (max-width: 760px) {
  .cs-summary__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-block: 14px;
  }

  .cs-summary__label { flex: none; max-width: none; }
}

/* C8 · Constraints ------------------------------------------------------- */

.constraint { padding-top: 1px; }

.constraint__row {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding-block: 20px;
}

.constraint__name {
  flex: 0 0 320px;
  max-width: 320px;
  font-weight: 600;
}

.constraint__how {
  flex: 1;
  max-width: 420px;
  color: var(--color-ink-muted);
}

/* C9 · Next case study --------------------------------------------------- */

.cs-next {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 41px;
  padding-bottom: clamp(80px, 8.3vw, 120px);
  border-top: 1px solid var(--color-line);
}

.cs-next__title { max-width: 18ch; text-wrap: balance; }
.cs-next__note { max-width: 48ch; color: var(--color-ink-muted); }
.cs-next__cta { padding-bottom: 20px; }

.next-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 56px;
  border-radius: var(--radius);
  background: var(--color-surface-inverse);
  color: var(--color-ink-inverse);
}

.next-card__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.next-card__label,
.next-card__meta { color: var(--color-ink-faint); }

.next-card__meta { white-space: pre-wrap; }

.next-card__tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-surface);
}

.next-card__tile svg {
  width: 28px;
  height: 28px;
}

/* Case study responsive -------------------------------------------------- */

@media (max-width: 1099px) {
  .cs-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 8px;
  }
}

@media (max-width: 899px) {
  .cs-split {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .cs-split__head { position: static; }

  /* Steps scroll sideways instead of squeezing */
  .stepper {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .stepper::-webkit-scrollbar { display: none; }

  .step {
    flex: 0 0 220px;
    scroll-snap-align: start;
  }

  .states__row { grid-template-columns: 1fr; gap: 40px; }

  .next-card { padding: 40px; }
}

@media (max-width: 599px) {
  .cs-header { padding-top: 28px; padding-bottom: 48px; }
  .cs-meta { grid-template-columns: 1fr; }

  .flow__stage { aspect-ratio: 1 / 1; }
  .slot--step { --slot-w: 80%; }

  .constraint__row {
    flex-direction: column;
    gap: 6px;
  }

  .constraint__name { flex-basis: auto; }

  .next-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
  }

  .next-card__tile {
    width: 56px;
    height: 56px;
  }
}

/* Placeholder copy still waiting for real content (search data-todo). */
[data-todo] { color: var(--color-ink-faint); }


/* =========================================================================
   Long-form case study (work/priced-offer.html) — CS-codes follow the
   Interaction annotations on the NGFT_design frame
   "Case study / Offer page (portfolio design)".
   ========================================================================= */

.h4 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.text-s {
  font-size: 14px;
  line-height: 1.5;
}

/* CS2 · Header, long-form variant */
.cs-header--long {
  gap: 28px;
  padding-bottom: 56px;
}

.cs-header--long .eyebrow { margin-top: 48px; } /* Figma: 20px spacer + one more 28px gap */
.cs-header--long .cs-title { max-width: 1300px; }
.cs-header--long .cs-lede { max-width: 860px; }
.cs-header--long .cs-meta__value { max-width: 300px; }

/* CS3 · Hero image + caption */
.cs-hero--long {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: clamp(64px, 6.67vw, 96px);
}

.slot--hero-long { --slot-w: 83.333%; --slot-top: 10.526%; --slot-ratio: 1120 / 722.4; }

.cs-hero__caption {
  max-width: 900px;
  color: var(--color-ink-muted);
}

/* CS4 · By the numbers */
.numbers {
  display: flex;
  flex-direction: column;
  padding-bottom: clamp(80px, 8.3vw, 120px);
}

.numbers .eyebrow { margin-bottom: 24px; }

.numbers__row {
  --rule-color: var(--color-line);
  display: flex;
  padding-top: 1px;
}

.numbers__row:first-of-type { --rule-color: var(--color-ink); }

.numbers__tile {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 28px 24px 32px 28px;
  border-left: 1px solid var(--color-line);
}

.numbers__tile:first-child {
  padding-left: 0;
  border-left: 0;
}

.numbers__value {
  font-size: var(--fs-number-xl);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.numbers__value--accent { color: var(--color-accent); }

.numbers__label {
  max-width: 260px;
  color: var(--color-ink-muted);
}

.numbers__note {
  max-width: 900px;
  color: var(--color-ink-muted);
}

/* Body: sticky side nav + content, 220 | 80 | 1044 at 1440 */
.cs-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(40px, 5.56vw, 80px);
  padding-bottom: clamp(80px, 8.3vw, 120px);
}

/* CS5 · Side nav */
.toc {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  padding-top: 40px;
}

.toc__label {
  margin-bottom: 16px;
  color: var(--color-ink-muted);
}

.toc__track { position: relative; }

.toc__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0 9px 16px;
  border-left: 1px solid var(--color-line);
  color: var(--color-ink-muted);
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
}

.toc__num {
  color: var(--color-ink-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
}

.toc__link[aria-current="true"] .toc__num { color: var(--color-accent); }

.toc__link[aria-current="true"] .toc__text {
  color: var(--color-ink);
  font-weight: 600;
}

/* One accent bar that slides to the active item (JS sets --y and --h). */
.toc__indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: var(--h, 40px);
  background: var(--color-accent);
  transform: translateY(var(--y, 0));
  pointer-events: none;
}

.toc__next {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 32px;
}

.toc__next-label { color: var(--color-ink-faint); }

.toc__next-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.toc__next-link .link-s3 { max-width: 190px; }

.toc__top {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: 16px;
  color: var(--color-ink-muted);
}

.toc .arrow-small {
  flex: none;
  width: 16px;
  height: 16px;
}

/* CS6 · Sections */
.cs-content { min-width: 0; }

.cs-section {
  --rule-color: var(--color-ink);
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 41px; /* 1px rule + 40 */
  padding-bottom: 120px;
  /* Lands 96px below the top (CS5). The page already has scroll-padding-top
     of nav + 16px, which adds to this, so subtract it. */
  scroll-margin-top: calc(96px - (var(--nav-h) + 16px));
}

.cs-section__overline {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cs-section__num {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  line-height: 1.5;
}

.cs-section__label { color: var(--color-ink-muted); }
.cs-section__title { max-width: 900px; }
.cs-section__title:focus { outline: none; }

.cs-section__lede {
  max-width: 820px;
  color: var(--color-ink-muted);
}

/* Figma spacer frames are flex children, so each brings one more 28px gap */
.cs-section .subhead {
  margin-top: 36px; /* 8 + 28 */
  color: var(--color-ink-muted);
}

.cs-section .lead-in { margin-top: 44px; } /* 16 + 28 */

.prose {
  max-width: 820px;
  color: var(--color-ink-muted);
}

.prose--ink { color: var(--color-ink); }
.prose--wide { max-width: 860px; }

/* Columns block */
.cols {
  display: flex;
  border-top: 1px solid var(--color-line);
}

.col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 20px 24px 4px;
  border-left: 1px solid var(--color-line);
}

.col:first-child {
  padding-left: 0;
  border-left: 0;
}

.col__text { color: var(--color-ink-muted); }

/* Figma sets column copy to a fixed measure: 300 in three columns, 474 in two.
   A block whose Figma measure differs sets --col-measure on itself. */
.col > * { max-width: var(--col-measure, 300px); }
.cols--2 { --col-measure: 474px; }

.col__result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.col__result::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  background: var(--color-accent);
}

/* Tint and dark panels */
.note-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px 48px 44px;
  border-radius: var(--radius);
  background: var(--color-accent-tint);
  color: var(--color-ink);
}

.note-panel > * { max-width: 948px; }

.note-panel--dark {
  background: var(--color-surface-inverse);
  color: var(--color-ink-inverse);
}

.note-panel--dark .body-l { color: var(--color-ink-faint); }

/* Accent-bordered block */
.aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0 4px 32px;
  border-left: 3px solid var(--color-accent);
}

.aside > * { max-width: 900px; }
.aside .body-l { max-width: 880px; }

.aside__quote {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.aside__note { max-width: 820px; color: var(--color-ink-muted); }

/* Tables */
.tbl {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}

.tbl th,
.tbl td {
  padding: 16px 16px 16px 0;
  vertical-align: top;
}

.tbl thead th {
  padding-block: 14px;
  border-top: 1px solid var(--color-ink);
  color: var(--color-ink-faint);
  font-weight: 500;
}

.tbl tbody tr { border-top: 1px solid var(--color-line); }
.tbl tbody th { font-weight: 600; }
.tbl td { color: var(--color-ink-muted); }
.tbl td.is-ink { color: var(--color-ink); }

.tbl tr.is-highlight > * { background: var(--color-accent-tint); }
.tbl tr.is-highlight > :first-child { padding-left: 12px; }

/* Ranked causes */
.cause {
  display: grid;
  grid-template-columns: 48px minmax(0, 340fr) minmax(0, 584fr);
  align-items: start;
  gap: 24px;
  padding: 22px 0 24px;
  border-top: 1px solid var(--color-line);
}

.cause:first-child { border-top-color: var(--color-ink); }
.cause__num { color: var(--color-accent); }
.cause > .h4 { max-width: 340px; } /* Figma's fixed measures; the columns run a little wider */

.cause__text {
  max-width: 584px;
  color: var(--color-ink-muted);
}

/* Phases */
.phases {
  display: flex;
  border-top: 1px solid var(--color-ink);
}

.phase {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 22px 20px 24px;
  border-left: 1px solid var(--color-line);
}

.phase:first-child { border-left: 0; }

.phase--capture { background: var(--color-accent-tint); }

.phase__name { color: var(--color-ink-muted); }
.phase--capture .phase__name { color: var(--color-accent); }

.phase__when { max-width: 220px; }

.phase__friction {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.phase__friction-label { color: var(--color-ink-faint); }
.phase__friction-text { max-width: 220px; color: var(--color-ink-muted); }

/* CS7 · Screens */
.figure {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
}

.screen-panel {
  padding: 40px;
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
}

.screen {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: 0 24px 48px -16px rgb(20 23 26 / 0.14);
}

.screen img {
  display: block;
  width: 100%;
  height: auto;
}

.is-zoomable { cursor: zoom-in; }

.figure__caption {
  max-width: 900px;
  color: var(--color-ink-muted);
}

/* Failure scenarios */
.scenarios {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.scenario {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}

.scenario__caption {
  display: grid;
  grid-template-columns: minmax(0, 300fr) minmax(0, 680fr);
  align-items: start;
  column-gap: 40px;
}

.scenario__label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scenario__label::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
}

.scenario__text {
  max-width: 680px; /* Figma's fixed measure; the column is a little wider */
  color: var(--color-ink-muted);
}

/* CS8 · Outcome claim */
.claim {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 40px 48px;
  border-radius: var(--radius);
  background: var(--color-accent-tint);
}

.claim__value {
  flex: none;
  color: var(--color-accent);
  font-size: clamp(64px, 6.67vw, 96px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.claim__text { max-width: 560px; }

/* Sent: text beside an accent-bordered note */
.pair {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.pair__main {
  display: flex;
  flex: 0 1 440px;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.pair__main p:last-child { color: var(--color-ink-muted); }

.pair .aside {
  flex: 0 1 548px;
  padding-left: 28px;
}

/* Unresolved list */
.unresolved__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-block: 16px;
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-muted);
}

.unresolved__item::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  background: var(--color-ink-faint);
}

/* Artefacts */
.artefacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 32px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.artefacts__label { color: var(--color-ink-muted); }

/* CS7 · Lightbox */
.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(16px, 4vw, 56px);
  border: 0;
  background: transparent;
  overflow: auto;
}

.lightbox::backdrop { background: rgb(15 17 19 / 0.86); }

.lightbox__frame {
  display: grid;
  place-items: center;
  min-height: 100%;
}

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 2 * clamp(16px, 4vw, 56px));
  width: auto;
  height: auto;
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.5);
  cursor: zoom-out;
}

.lightbox__close {
  position: fixed;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--color-ink);
  color: var(--color-ink-inverse);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Long-form responsive ---------------------------------------------------- */

@media (max-width: 1023px) {
  .cs-body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  /* CS5 below 1024: the side nav becomes a chip bar stuck under the Nav */
  .toc {
    top: var(--nav-bottom, 72px);
    z-index: 40;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0;
    border-bottom: 1px solid var(--color-line);
    background: rgb(242 243 240 / 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .toc__label,
  .toc__next,
  .toc__top,
  .toc__indicator { display: none; }

  .toc__list {
    display: flex;
    gap: 8px;
    padding: 10px var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .toc__list::-webkit-scrollbar { display: none; }

  .toc__link {
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
  }

  .toc__link[aria-current="true"] {
    border-color: var(--color-ink);
    background: var(--color-ink);
  }

  .toc__link[aria-current="true"] .toc__text { color: var(--color-ink-inverse); }

  .cs-section { scroll-margin-top: calc(var(--nav-bottom, 72px) + 64px - (var(--nav-h) + 16px)); }
}

@media (max-width: 899px) {
  .numbers__row { display: grid; grid-template-columns: 1fr 1fr; }
  .numbers__tile:nth-child(odd) { padding-left: 0; border-left: 0; }

  .cols,
  .phases { flex-wrap: wrap; }

  .cols .col { flex-basis: 100%; padding: 20px 0 16px; border-left: 0; }
  .cols .col + .col { border-top: 1px solid var(--color-line); }

  .phase { flex-basis: 50%; }
  .phase:nth-child(odd) { border-left: 0; }
  .phase:nth-child(n + 3) { border-top: 1px solid var(--color-line); }

  .cause { grid-template-columns: 32px minmax(0, 1fr); row-gap: 6px; }
  .cause__text { grid-column: 2; }

  .scenario__caption { grid-template-columns: 1fr; row-gap: 8px; }

  .pair { flex-direction: column; gap: 28px; }
  .pair .aside { flex-basis: auto; }

  .screen-panel { padding: 20px; }
}

@media (max-width: 599px) {
  .numbers__row { grid-template-columns: 1fr; }
  .numbers__tile,
  .numbers__tile:nth-child(odd) { padding: 22px 0 24px; border-left: 0; }
  .numbers__tile + .numbers__tile { border-top: 1px solid var(--color-line); }

  .cs-section { padding-bottom: 88px; }

  .note-panel { padding: 28px 24px 32px; }
  .aside { padding-left: 20px; }

  .phase { flex-basis: 100%; border-left: 0; }
  .phase + .phase { border-top: 1px solid var(--color-line); }

  .claim {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 28px 24px;
  }

  .screen-panel { padding: 12px; }

  .artefacts { padding: 22px 20px; }

  /* Tables stack: each row becomes a block, cells labelled from the header */
  .tbl thead { display: none; }
  .tbl,
  .tbl tbody,
  .tbl tr,
  .tbl th,
  .tbl td { display: block; width: auto; }
  .tbl tbody tr { padding-block: 14px; }
  .tbl tbody tr:first-child { border-top-color: var(--color-ink); }
  .tbl th,
  .tbl td { padding: 2px 0; }
  .tbl td[data-label]::before {
    content: attr(data-label) " · ";
    color: var(--color-ink-faint);
    font-family: var(--font-mono);
    font-size: var(--fs-mono-s);
  }
  .tbl tr.is-highlight { padding-inline: 12px; background: var(--color-accent-tint); }
  .tbl tr.is-highlight > * { background: none; }
  .tbl tr.is-highlight > :first-child { padding-left: 0; }
}

/* =========================================================================
   Long-form case study, second page (work/compliance-check.html) — MC-codes
   follow the Interaction annotations on the NGFT_design frame "Case study /
   Manual compliance check (portfolio design)". Same page structure as the
   offer page; this adds the pieces that page doesn't have.
   ========================================================================= */

/* MC2 · Title block: the title, then a muted subtitle 16px under it */
.cs-title-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs-title__line { display: block; } /* break after "answers", per the notes */

.cs-subtitle {
  max-width: 1100px;
  color: var(--color-ink-muted);
}

/* MC3 · Figma frame is 1120 x 796 inside the 1344 x 760 panel, 80px down */
.slot--hero-tall { --slot-ratio: 1120 / 796.4; }

/* Section 01 has no heading of its own, so its overline is the h2 */
h2.cs-section__overline { font: inherit; }

/* MC6 · By the numbers, inside a section: value and unit share a baseline */
.numbers--section { padding-bottom: 0; }

.numbers--section .numbers__row {
  padding-top: 0;
  border-top: 1px solid var(--color-line);
}

.numbers--section .numbers__row:first-child { border-top-color: var(--color-ink); }
.numbers--section .numbers__tile { padding: 24px 24px 28px 28px; }
.numbers--section .numbers__tile:first-child { padding-left: 0; }

.numbers--section .numbers__label {
  max-width: 209px;
  color: var(--color-ink);
}

.numbers__value--unit {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.numbers__unit {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

/* Section 03 · Cards: a mono label over ink copy; the last card is tinted */
.cols--cards .col__label { color: var(--color-ink-muted); }

.col__body p + p { margin-top: 1.55em; } /* Figma: one empty line between paragraphs */

.col--tint {
  padding: 20px 24px 24px 20px;
  background: var(--color-accent-tint);
}

.col--tint .col__label { color: var(--color-accent); }

/* MC7 · Callouts (pull quote, method). The 3px accent bar is its own layer
   so it can draw top to bottom. */
.callout {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 4px 0 4px 32px;
}

.callout::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--color-accent);
  transform-origin: top;
}

.callout__quote {
  max-width: 900px;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.callout__source {
  max-width: 820px;
  color: var(--color-ink-muted);
}

.callout__text { max-width: 880px; }

.screen-panel--tint { background: var(--color-accent-tint); }

/* MC8 · Five steps: number | title | body, each row under its own rule */
.flow-step {
  --rule-color: var(--color-line);
  display: grid;
  grid-template-columns: 48px minmax(0, 340fr) minmax(0, 584fr);
  align-items: start;
  gap: 24px;
  padding: 23px 0 24px; /* 1px rule + 22 */
}

.flow-step:first-child { --rule-color: var(--color-ink); }
.flow-step__num { color: var(--color-accent); }
.flow-step__text {
  max-width: 584px; /* Figma's fixed measure */
  color: var(--color-ink-muted);
}

/* Section 07 · Decisions: title | body */
.decision {
  display: grid;
  grid-template-columns: minmax(0, 380fr) minmax(0, 640fr);
  align-items: start;
  gap: 24px;
  padding: 22px 0 24px;
  border-top: 1px solid var(--color-line);
}

.decision:first-child { border-top-color: var(--color-ink); }
.decision__text { color: var(--color-ink-muted); }

/* MC10 · Failure table: the head row's top line is the table's S9 rule */
.tbl--ruled { --rule-color: var(--color-ink); }

.tbl--ruled thead th {
  padding-top: 15px; /* 1px rule + 14 */
  border-top: 0;
}

/* MC11 · Where it stands: what shipped | what is not measured yet */
.claim-lists {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.claim-list {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-ink);
}

.claim-list__label {
  margin-bottom: 8px;
  color: var(--color-accent);
}

.claim-list--open .claim-list__label { color: var(--color-ink-muted); }

.claim-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-block: 12px;
  border-top: 1px solid var(--color-line);
}

.claim-list__marker {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  background: var(--color-accent);
}

.claim-list--open .claim-list__marker { background: var(--color-ink-faint); }

/* MC12 · The rest of the flow: two columns of screens */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
}

.flow-cell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.flow-cell__panel {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
}

.flow-cell__panel--tint { background: var(--color-accent-tint); } /* 03 and 10 */
.flow-cell__text { color: var(--color-ink-muted); }

/* MC12 · Lightbox pager: previous / next through a set, and "3 of 6" */
.lightbox.is-grouped { padding-bottom: 88px; }

.lightbox.is-grouped .lightbox__img {
  max-height: calc(100dvh - clamp(16px, 4vw, 56px) - 88px);
}

.lightbox__pager {
  position: fixed;
  bottom: 16px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius);
  background: var(--color-ink);
  color: var(--color-ink-inverse);
  transform: translateX(-50%);
}

.lightbox__pager[hidden] { display: none; }

.lightbox__step {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
}

.lightbox__step svg {
  width: 16px;
  height: 16px;
}

.lightbox__count {
  min-width: 72px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 899px) {
  .numbers--section .numbers__tile:nth-child(odd) { padding-left: 0; }
  .numbers--section .numbers__tile:nth-child(n + 3) { border-top: 1px solid var(--color-line); }
  .numbers--section .numbers__label { max-width: 260px; }

  .cols .col--tint { padding: 20px 20px 24px; }

  .flow-step { grid-template-columns: 32px minmax(0, 1fr); row-gap: 6px; }
  .flow-step__text { grid-column: 2; }

  .decision { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }

  .claim-lists { flex-direction: column; align-items: stretch; gap: 40px; }
}

@media (max-width: 599px) {
  .numbers--section .numbers__tile,
  .numbers--section .numbers__tile:first-child,
  .numbers--section .numbers__tile:nth-child(odd) { padding: 22px 0 24px; }
  .numbers--section .numbers__label { max-width: 320px; }

  .callout { padding-left: 20px; }

  .tbl--ruled thead th { padding-top: 14px; }
  .tbl--ruled tbody tr:first-child { border-top: 0; }

  .flow-grid { grid-template-columns: minmax(0, 1fr); }
  .flow-cell__panel { padding: 12px; }
}

/* =========================================================================
   Long-form case study, third page (work/safety-report.html) — SM-codes
   follow the Interaction annotations on the NGFT_design frame "Case study /
   SMS safety manager flow (portfolio design)". Reuses everything above.
   ========================================================================= */

/* SM7 · Research numbers: number, then a title and a note */
.numbers--research .numbers__value { margin-bottom: 16px; } /* Figma: a 6px spacer + one more 10px gap */

.numbers__title {
  font-size: var(--fs-body-m);
  font-weight: 600;
  line-height: 1.55;
}

.numbers--research .numbers__label {
  max-width: 305px;
  color: var(--color-ink-muted);
}

/* SM6 · The big quote: Display/L, 16px over its source */
.callout--big { gap: 16px; }
.callout__big { max-width: 900px; }

/* SM8 · Decisions: label and title | body, then the full-width screen */
.design-decisions {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.design-decision {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.design-decision__text {
  --rule-color: var(--color-ink);
  display: grid;
  grid-template-columns: minmax(0, 380fr) minmax(0, 624fr);
  align-items: start;
  column-gap: 40px;
  padding-top: 29px; /* 1px rule + 28 */
}

.design-decision__head,
.design-decision__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.design-decision__label { color: var(--color-accent); }
.design-decision__body { color: var(--color-ink-muted); }

.design-decision__figure {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
}

.design-decision__caption { color: var(--color-ink-muted); }

/* SM10 · States: four small screens; the fourth, the irreversible close, tinted */
.states-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 28px;
  border-top: 1px solid var(--color-ink);
}

.states-block .h3 { max-width: 900px; }

.states-block__text {
  max-width: 820px;
  color: var(--color-ink-muted);
}

.states-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.states-block .states-grid { margin-top: 24px; } /* Figma: a 4px spacer + one more 20px gap */

.states-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.states-cell__panel {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
}

.states-cell__panel--tint { background: var(--color-accent-tint); }

.states-cell__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

/* SM11 · Measures: what will be measured | how, each row under its own rule */
.measures { margin: 0; }

.measure {
  --rule-color: var(--color-line);
  display: grid;
  grid-template-columns: minmax(0, 340fr) minmax(0, 704fr);
  padding-block: 17px 16px; /* 1px rule + 16 */
}

.measure:first-child { --rule-color: var(--color-ink); }

.measure dt {
  padding-right: 16px;
  font-weight: 600;
}

.measure dd {
  margin: 0;
  padding-right: 16px;
  color: var(--color-ink-muted);
}

@media (max-width: 1023px) {
  /* SM8: title and body stack above the screen */
  .design-decision__text { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }

  /* SM10: two columns below 1024 */
  .states-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
}

@media (max-width: 899px) {
  .numbers--research .numbers__row { grid-template-columns: minmax(0, 1fr); }
  .numbers--research .numbers__tile,
  .numbers--research .numbers__tile:nth-child(odd) { padding: 22px 0 24px; border-left: 0; }
  .numbers--research .numbers__tile + .numbers__tile { border-top: 1px solid var(--color-line); }

  .measure { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
}

/* SM10: one column under 640 */
@media (max-width: 639px) {
  .states-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   Long-form case study, fourth page (work/instructors.html) — IT-codes
   follow the Interaction annotations on the NGFT_design frame "Case study /
   Instructor tablet app (portfolio design)". Reuses everything above.
   ========================================================================= */

/* IT3 · Hero triptych: three portrait screens, 340 wide, 64 apart, in a
   1344 x 660 tint panel; each with its caption 18px under it */
.cs-hero--triptych { padding-bottom: clamp(64px, 6.67vw, 96px); }

.triptych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  column-gap: 5.575%;          /* 64 of the 1148 inside the padding */
  padding: 64px 7.292% 71px;   /* 98 of 1344 at the sides */
  border-radius: var(--radius);
  background: var(--color-accent-tint);
}

.triptych__item {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  margin: 0;
}

.triptych__caption {
  color: var(--color-ink-muted);
  white-space: pre-wrap;
}

/* IT6, TM6 · Compact numbers: 40px values, a line in ink, then a smaller note */
.numbers--compact .numbers__value {
  font-size: clamp(2rem, 2.78vw, 2.5rem);
  letter-spacing: -0.025em;
}

.numbers--compact .numbers__label { max-width: 296px; }

.numbers__detail {
  max-width: 296px;
  color: var(--color-ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* IT7 · Screen steps: text | a 420px tablet screen in a 520px panel */
.screen-steps {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.screen-step {
  --rule-color: var(--color-line);
  display: grid;
  grid-template-columns: minmax(0, 476fr) minmax(0, 520fr);
  align-items: center;
  column-gap: 48px;
  padding-top: 33px; /* 1px rule + 32 */
}

.screen-step:first-child { --rule-color: var(--color-ink); }

.screen-step__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.screen-step__num { color: var(--color-accent); }
.screen-step__text .body-l { color: var(--color-ink-muted); }

.screen-panel--tablet { padding: 40px 50px; }

.screen-panel--tablet .screen {
  max-width: 420px;
  margin-inline: auto;
}

/* IT8 · Tables: an empty corner cell, an accent column head, bold answers */
.tbl thead td {
  padding-block: 14px;
  border-top: 1px solid var(--color-ink);
}

.tbl thead th.is-accent { color: var(--color-accent); }

.tbl td.is-strong {
  color: var(--color-ink);
  font-weight: 500;
}

/* Columns with a mono label on top (IT: components, test cases) */
.col__label--accent { color: var(--color-accent); }

/* A tinted column can come first (IT7 signals) */
.col.col--tint { padding: 20px 24px 24px 20px; }
.col--tint .col__text { color: var(--color-ink); }

/* IT10 · Test cases: two rows of four */
.tests {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.cols--tests { --col-measure: 213px; }

/* IT9 · The full set: seven screens, four across */
.states-grid--set { row-gap: 40px; }
.states-grid--set .states-cell { gap: 12px; }

.states-grid--set .states-cell__title {
  font-size: var(--fs-body-m);
  line-height: 1.55;
}

@media (max-width: 1023px) {
  /* IT7: text, then screen */
  .screen-step { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
}

@media (max-width: 899px) {
  .cols .col.col--tint { padding: 20px 20px 24px; }
}

@media (max-width: 599px) {
  .triptych {
    column-gap: 12px;
    padding: 28px 16px 32px;
  }

  .triptych__item { gap: 10px; }
  .screen-panel--tablet { padding: 20px; }
}

/* =========================================================================
   Long-form case study, fifth page (work/training-record.html) — TM-codes
   follow the Interaction annotations on the NGFT_design frame "Case study /
   Training management (portfolio design)". Reuses everything above.
   ========================================================================= */

/* TM3 · The hero screen is shorter than its 1120 x 796 frame: keep it at
   its own height, pinned to the top, instead of cropping it to fill */
.slot > img.slot__img--top {
  bottom: auto;
  height: auto;
}

/* TM7 · Design steps: number | title | body, then the full-width screen */
.design-decision__text--numbered {
  grid-template-columns: 48px minmax(0, 320fr) minmax(0, 604fr);
  column-gap: 24px;
}

.design-decision__num { color: var(--color-accent); }

/* Figma: one empty line between the two paragraphs; fixed measures of 320
   and 604, a little narrower than the columns */
.design-decision__text--numbered .design-decision__body {
  gap: 1.55em;
  max-width: 604px;
}

.design-decision__text--numbered .h3 { max-width: 320px; }

/* TM9 · Claims with a title and a note */
.claim-lists--detailed .claim-list__item { padding: 16px 0 18px; }

.claim-list__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 460px;
}

.claim-list__title { font-weight: 600; }

.claim-list__text {
  color: var(--color-ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* TM10 · The full set: sixteen screens, four across */
.states-grid--full { row-gap: 36px; }

@media (max-width: 1023px) {
  .design-decision__text--numbered { grid-template-columns: 32px minmax(0, 1fr); row-gap: 8px; }
  .design-decision__text--numbered .design-decision__body { grid-column: 2; }
}

/* =========================================================================
   Long-form case study, sixth page (work/hx-insight.html) — HX-codes
   follow the frame "Case study / HX Insight, four flows / Desktop 1440"
   in talha-s-portfolio-final. Reuses everything above.
   ========================================================================= */

/* HX2 · On phones the first title line wraps; split it evenly so "email"
   isn't left alone on a line */
.cs-title--balance .cs-title__line { text-wrap: balance; }

/* HX6 · Beats: four screens per flow, two across (660 | 24 | 660 at 1440).
   Each: the screen, its time-and-person label, then one line on what it does. */
.beats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.beat {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Figma: a 1px stroke and no shadow on these screens */
.beat .screen { box-shadow: none; }

.beat__text {
  max-width: 560px;
  color: var(--color-ink-muted);
}

@media (max-width: 767px) {
  .beats { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
}

/* =========================================================================
   Short case studies (work/hx-timer.html, work/hx-mobile.html) — DT- and
   MA-codes follow the frames "Case study / HX Insight desktop timer" and
   "Case study / HX Insight mobile app" in talha-s-portfolio-final. They use
   the C6 flow stepper and the C7 states rows above.
   ========================================================================= */

/* The screens keep their own corners from Figma (12 on the 1280 x 880 Mac
   screen, 24 on the 402 x 874 phone), with a soft shadow instead of a slot's
   frame. Radius and shadow sit on the image, as percentages of its own box. */
.screenshot,
.phone { display: block; }

.screenshot img,
.phone img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 16px 32px -8px rgb(20 23 26 / 0.18);
}

.screenshot img { border-radius: 0.9375% / 1.364%; }
.phone img { border-radius: 5.97% / 2.746%; }

/* Figma: no shadow on the two "rest of the day" screens */
.screenshot--plain img { box-shadow: none; }

/* DT5 · label 16 under the screen, its line 16 under the label */
.state figcaption {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* DT3 · the 1120 x 770 screen, 80 down in a 1344 x 930 panel */
.cs-hero__panel--timer { aspect-ratio: 1344 / 930; }
.screenshot--hero-timer { position: absolute; top: 8.602%; left: 8.333%; width: 83.333%; }

/* DT4 · each step's 812 x 558 screen, 71 down in the 1344 x 700 stage */
.screenshot--timer { position: absolute; top: 10.143%; left: 19.792%; width: 60.417%; }

/* MA3, MA4 · phones 220 x 478, 24 apart: five across from 74, four from 196 */
.phones {
  position: absolute;
  top: var(--top, 0);
  left: var(--left);
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  column-gap: var(--gap);
  width: var(--w);
}

.phones--5 { --n: 5; --left: 5.506%; --w: 88.988%; --gap: 2.007%; }
.phones--4 { --n: 4; --left: 14.583%; --w: 70.833%; --gap: 2.521%; }

.cs-hero__panel--phones { aspect-ratio: 1344 / 638; }
.cs-hero__panel--phones .phones { --top: 12.539%; }   /* 80 down */
.flow__stage .phones { --top: 15.857%; }               /* 111 down */

/* Home cards: the timer screen sits like a slot, bleeding off the bottom;
   the mobile card shows three tabs */
.card__panel > .screenshot--card { position: absolute; top: 11.2%; left: 8.5%; width: 83%; }
.card__panel > .phones--card { --n: 3; --top: 10%; --left: 5%; --w: 90%; --gap: 4%; }

/* =========================================================================
   C10 · SnapGrid showcase
   A story rail followed by walk-through panels. The pieces inside the panels
   are the existing .screenshot, .phone, .step and .stepper; everything here
   is the layout they sit in.
   ========================================================================= */

/* The rail on this page is a static list, not a tablist, so the current step
   is a class instead of aria-selected. Same three marks as C6. */
.step--current::after { transform: scaleX(1); }
.step--current .step__num { color: var(--color-accent); }
.step--current .step__title { color: var(--color-ink); }

.sg-section {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: var(--section-end);
}

.sg-section__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sg-section__title { max-width: 1000px; }
.sg-section__lede { max-width: 780px; }

.sg-walks {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* A walk panel holds either three phones or one wide screen, centred. */
.sg-panel {
  display: flex;
  gap: 4%;
  align-items: center;
  justify-content: center;
  padding: 64px 40px;
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
}

.sg-panel .phone { flex: 0 1 264px; min-width: 0; }
.sg-panel .screenshot { flex: 0 1 960px; min-width: 0; }

/* Labelled cards: two wide screens, or four phones. */
.sg-grid {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.sg-grid--2 { --n: 2; }
.sg-grid--4 { --n: 4; }

.sg-card {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.sg-card__caption {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
}

.sg-card__text {
  max-width: 540px;
  color: var(--color-ink-muted);
  font-size: 15px;
  line-height: 1.47;
}

/* Hero: the office web app beside the crew's phone, on tint. */
.cs-hero__panel--sg {
  display: flex;
  gap: 3%;
  align-items: center;
  justify-content: center;
  padding-inline: 6%;
  aspect-ratio: 1344 / 806;
}

.cs-hero__panel--sg .screenshot { flex: 0 1 776px; min-width: 0; }
.cs-hero__panel--sg .phone { flex: 0 0 22%; min-width: 0; }

/* The walk sections keep their ids as shareable links, so they still need to
   land clear of the sticky nav, matching .cs-section. */
.sg-walk { scroll-margin-top: calc(96px - (var(--nav-h) + 16px)); }

@media (max-width: 899px) {
  .sg-panel { gap: 3%; padding: 40px 24px; }
  .sg-grid--4 { --n: 2; }
  .cs-hero__panel--sg { padding-inline: 4%; aspect-ratio: 1344 / 900; }
}

@media (max-width: 599px) {
  .sg-grid--2,
  .sg-grid--4 { --n: 1; }

  .sg-panel { padding: 24px 16px; }
  .sg-walks { gap: 40px; }

  /* Stacked, so the panel grows with its contents instead of holding a ratio */
  .cs-hero__panel--sg {
    flex-direction: column;
    gap: 24px;
    padding: 32px 24px;
    aspect-ratio: auto;
  }

  .cs-hero__panel--sg .screenshot,
  .cs-hero__panel--sg .phone { flex: 0 0 auto; width: 100%; }
  .cs-hero__panel--sg .phone { max-width: 190px; }
}