/* ─── Design Tokens — extracted from UI Kit v01 ─── */
:root {
  /* Colors */
  --color-bg-primary:                 #060805;
  --color-bg-secondary:               #171717; /* non-interactive/background/secondary */
  --color-fg-primary:                 #ededed;
  --color-fg-secondary:               #d3d9d5;
  --color-fg-tertiary:                #999999;
  --color-fg-quadruple:               #3a3a3a;
  --color-fg-quinary:                 #282828; /* non-interactive/foreground/quinary — divider component */
  --color-accent:                     #00d669;
  --color-bg-tertiary:                #3a3a3a; /* non-interactive/background/tertiary */
  --color-bg-contrast:                #ededed; /* non-interactive/background/contrast */
  --color-fg-warning-base:            #fda50d; /* non-interactive/foreground/warning/base */

  /* Non-interactive */
  --non-interactive-background-primary:   #060805;
  --non-interactive-foreground-primary:   #ededed;
  --non-interactive-foreground-secondary: #d3d9d5;
  --non-interactive-foreground-tertiary:  #999999;

  /* Buttons — synced to UI Kit (actions/*) */
  /* primary */
  --button-primary-bg:                #00d669;
  --button-primary-bg-hover:          #00b450;
  --button-primary-bg-pressed:        #00913a;
  --button-primary-label:             #060805;
  --button-primary-outline:           rgba(237, 237, 237, 0.64); /* #edededa3 */
  --button-primary-focus-ring:        #b6ffda;
  /* secondary (actions/secondary/regular) — bg updated #454545 → #3a3a3a */
  --button-secondary-bg:              #3a3a3a; /* default / focus / disabled */
  --button-secondary-bg-hover:        #747573;
  --button-secondary-bg-pressed:      #999999;
  --button-secondary-label:           #d3d9d5;
  --button-secondary-label-hover:     #ededed;
  --button-secondary-outline:         #ededed;
  --button-secondary-focus-ring:      #999999;
  /* tertiary */
  --button-tertiary-label:            #d3d9d5;
  --button-tertiary-label-hover:      #ededed;
  --button-tertiary-bg-hover:         #060805;
  --button-tertiary-bg-pressed:       #454545; /* unchanged */

  /* Typography */
  --font-family-base:                 'General Sans', sans-serif;

  --font-size-display:                64px;
  --line-height-display:              72px;
  --font-size-headline:               56px;
  --line-height-headline:             64px;
  --font-size-sub-headline:           40px;
  --line-height-sub-headline:         48px;
  --font-size-subtitle:               20px;
  --line-height-subtitle:             28px;
  --font-size-body:                   16px;
  --line-height-body:                 22px;
  --font-size-title:                  24px;
  --line-height-title:                32px;
  --font-size-label:                  12px;
  --line-height-label:                14px;

  /* Spacing */
  --gap-none:                         0px;
  --gap-2xsmall:                      4px;
  --gap-xsmall:                       6px;
  --gap-small:                        8px;
  --gap-small-medium:                 12px;
  --gap-medium:                       16px;
  --gap-medium-large:                 20px;
  --gap-large:                        24px;
  --gap-xlarge:                       32px;
  --gap-2xlarge:                      40px;
  --gap-3xlarge:                      48px;
  --gap-4xlarge:                      56px;
  --gap-5xlarge:                      64px;

  /* Component sizes (spacing/size/*) — mirrors the UI Kit ramp */
  --spacing-size-3xsmall:             12px;
  --spacing-size-2xsmall:             16px;
  --spacing-size-xsmall:              20px;
  --spacing-size-small:               24px;
  --spacing-size-small-medium:        32px;
  --spacing-size-medium:              40px;
  --spacing-size-medium-large:        48px;
  --spacing-size-large:               56px;
  --spacing-size-xlarge:              64px;
  --spacing-size-2xlarge:             72px;
  --spacing-size-3xlarge:             80px;

  /* Border radius (spacing/radius/*) — names match the UI Kit */
  --radius-full:                      9999px;
  --radius-2xlarge:                   32px;
  --radius-xlarge:                    24px;
  --radius-large:                     16px;
  --radius-medium:                    12px;
  --radius-small:                     8px;
  --radius-xsmall:                    4px;

  /* Opacity — synced to UI Kit (opacity/*) */
  --opacity-faint:                    0.04;
  --opacity-soft:                     0.16;
  --opacity-gentle:                   0.24;
  --opacity-mild:                     0.32;
  --opacity-strong:                   0.64;
  --opacity-solid:                    1;

  /* Outline */
  --outline-small:                    1px;
  --outline-medium:                   2px;

  /* ── Project component tokens ── */
  /* default */
  --project-default-label:            #d3d9d5;
  --project-default-sub-label:        #999999;
  --project-default-outline:          #3a3a3a;

  /* hover */
  --project-hover-label:              #00d669;
  --project-hover-sub-label:          #ededed;
  --project-hover-outline:            #00d669;

  /* focus */
  --project-focus-label:              #d3d9d5;
  --project-focus-sub-label:          #999999;
  --project-focus-outline:            #3a3a3a;
  --project-focus-ring:               #999999;

  /* pressed */
  --project-pressed-label:            #00d669;
  --project-pressed-sub-label:        #c2c7c3;
  --project-pressed-outline:          #10ffa4;

  /* disabled — same base colours; layers render at opacity/gentle (0.24),
     the "Coming soon" badge stays at full opacity (UI Kit 100:183) */
  --project-disabled-label:           #d3d9d5;
  --project-disabled-sub-label:       #999999;
  --project-disabled-outline:         #3a3a3a;

  /* ── Icon button — Project type (Work-page row arrow) ── */
  /* Updated UI Kit: icon is green across all states */
  --icon-button-project-default:      #00d669;
  --icon-button-project-hover:        #00b450;
  --icon-button-project-pressed:      #00d669;
}
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  background-color: var(--color-bg-primary);
  color: var(--color-fg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* full-bleed hero backdrop uses 100vw; clip prevents a horizontal
     scrollbar without creating a scroll container (keeps sticky working) */
  overflow-x: clip;
}
img {
  display: block;
  max-width: 100%;
}
/* ── Page container — max 976 px, always centred ── */
main {
  max-width: 976px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
/* On viewports narrower than 976 px add side breathing room */
@media (max-width: 976px) {
  main {
    padding-left: var(--gap-large);
    padding-right: var(--gap-large);
  }
}
@media (max-width: 480px) {
  main {
    padding-left: var(--gap-medium);
    padding-right: var(--gap-medium);
  }
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}
/* ── DS tooltip (UI Kit 138:276) — #3a3a3a, r4, h20, pad 0 8, 12 Medium #d3d9d5.
   Usage: <span class="dstip" data-tip="Password required">…</span> ── */
.dstip { position: relative; }
.dstip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--gap-small)); /* 8 above the trigger */
  translate: -50% 0;
  padding: 0 var(--gap-small);
  border-radius: var(--radius-xsmall); /* 4 */
  background: var(--color-bg-tertiary); /* #3a3a3a */
  color: var(--color-fg-secondary);     /* #d3d9d5 */
  font-size: var(--font-size-label);    /* 12 */
  line-height: 20px;                    /* h20 */
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 20;
}
.dstip:hover::after,
.dstip:focus-visible::after { opacity: 1; }
/* ─────────────────────────────────────────────
   Nav — fixed pill, always 40 px from the top
───────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 40px;
  left: 50%;
  translate: -50% 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  /* Figma "Right" group spaces the pills 8px apart (node 634:20345, itemSpacing 8).
     Logo keeps margin-right:auto, so this gap applies between the pills. */
  gap: var(--gap-small);
  /* width: 488px matches Figma Home nav */
  width: 488px;
  padding: var(--gap-2xsmall) var(--gap-2xsmall) var(--gap-2xsmall) var(--gap-small-medium);
  border-radius: var(--radius-full);

  /* Dark frosted glass (Figma 179:595): rgba(0,0,0,0.48) + 12px blur */
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--outline-small) solid rgba(237, 237, 237, 0.08);

  animation: nav-enter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Inner background tint — #EDEDED @ 4% */
.nav__bg {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #ededed;
  opacity: 0.04;
  pointer-events: none;
}

.nav::before { content: none; }
.nav::after  { content: none; }

/* ── Logo ── */
.nav__logo {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-right: auto;
  border-radius: var(--radius-full);
  outline: none;
}

.nav__logo:focus-visible::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: var(--outline-medium) solid #999;
  pointer-events: none;
}

.nav__logo-svg {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* ── HOVER: the outer ring + dot rotate together; inner spiral stays put ── */
.nav__logo-ring {
  transform-box: view-box;
  transform-origin: 16px 16px; /* logo centre */
}

.nav__logo:hover .nav__logo-ring {
  animation: logo-ring-spin 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes logo-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── PERIODIC (every 24s): the accent dot pulses — distinct from hover ── */
.nav__logo-dot {
  transform-box: fill-box;
  transform-origin: center;
}

.nav__logo-dot.is-pinging {
  animation: logo-dot-ping 1.4s ease-in-out;
}

/* Two-beat pulse with a soft green glow */
@keyframes logo-dot-ping {
  0%   { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(0, 214, 105, 0)); }
  20%  { transform: scale(1.7); filter: drop-shadow(0 0 2px rgba(0, 214, 105, 0.9)); }
  40%  { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(0, 214, 105, 0)); }
  60%  { transform: scale(1.45); filter: drop-shadow(0 0 1.5px rgba(0, 214, 105, 0.7)); }
  80%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(0, 214, 105, 0)); }
}

@media (prefers-reduced-motion: reduce) {
  .nav__logo:hover .nav__logo-ring,
  .nav__logo-dot.is-pinging {
    animation: none;
  }
}

/* ─────────────────────────────────────────────
   TERTIARY pill-button — "Work" / "About"
   Default: transparent bg, #d3d9d5 text
   Hover:   #060805 @ 0.32 bg, #ededed text
   Focus:   transparent bg, #999 ring
   Pressed: #454545 @ 0.32 bg, #d3d9d5 text
───────────────────────────────────────────── */

.nav__item {
  position: relative;
  z-index: 1;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gap-medium-large);
  border-radius: var(--radius-full);
  font-size: var(--font-size-body);
  font-weight: 500;
  /* Default text: secondary foreground */
  color: var(--color-fg-secondary); /* #d3d9d5 */
  white-space: nowrap;
  transition: color 0.15s;
}

/* Shared bg overlay layer */
.nav__item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #060805;
  opacity: 0;
  pointer-events: none;
  transition: background 0.15s, opacity 0.15s;
}

/* Hover — brighter text, dark bg overlay */
.nav__item:hover { color: var(--color-fg-primary); /* #ededed */ }
.nav__item:hover::before  { background: #060805; opacity: 0.32; }

/* Pressed — text stays secondary, charcoal bg overlay */
.nav__item:active { color: var(--color-fg-secondary); }
.nav__item:active::before { background: #454545; opacity: 0.32; }

/* Focus — ring only, no bg, default text */
.nav__item:focus-visible { outline: none; }
.nav__item:focus-visible::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: var(--outline-medium) solid #999;
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   DISABLED state — current page ("Work" on /work)
   Tertiary disabled (UI Kit): label #d3d9d5 @ opacity 0.24, no background.
   Stays hoverable so the tooltip can appear (no pointer-events:none).
───────────────────────────────────────────── */

.nav__item--disabled {
  cursor: default;
}

/* Dim only the label so the tooltip stays full-opacity */
.nav__item--disabled .nav__item-label {
  opacity: 0.24;
}

/* No background overlay in any interaction */
.nav__item--disabled:hover::before,
.nav__item--disabled:active::before {
  opacity: 0;
}

/* ── Tooltip (UI Kit node 138:276) — appears below the disabled item ── */
.nav__tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  translate: -50% 0;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gap-small); /* 0 8px */
  border-radius: var(--radius-xsmall);
  background: var(--button-secondary-bg); /* #3a3a3a — secondary/regular/default */
  color: var(--color-fg-secondary); /* #d3d9d5 */
  font-size: var(--font-size-label);     /* 12px */
  line-height: var(--line-height-label); /* 14px */
  font-weight: 500;            /* label/medium */
  white-space: nowrap;
  pointer-events: none;
  /* Hidden until hover */
  opacity: 0;
  translate: -50% -4px;
  transition: opacity 0.15s ease, translate 0.15s ease;
}

.nav__item--disabled:hover .nav__tooltip {
  opacity: 1;
  translate: -50% 0;
}

/* ─────────────────────────────────────────────
   SECONDARY pill-button — "Book an intro"
   Default:  #3a3a3a @ 0.24, bevel top+left, #d3d9d5 text
   Hover:    #747573 @ 0.32, #ededed text
   Focus:    default bg + #999 ring
   Pressed:  #999999 @ 0.32, #d3d9d5 text
───────────────────────────────────────────── */

.nav__item--cta {
  color: var(--color-fg-secondary); /* #d3d9d5 */
  transition: color 0.15s;
}

/* Override the shared ::before — secondary has its own bg */
.nav__item--cta::before {
  background: var(--button-secondary-bg); /* #3a3a3a */
  opacity: 0.24;
  border-top:  1px solid #ededed;
  border-left: var(--outline-small) solid #ededed;
  transition: background 0.15s, opacity 0.15s;
}

/* Hover — lighter bg, brighter text */
.nav__item--cta:hover { color: var(--color-fg-primary); /* #ededed */ }
.nav__item--cta:hover::before { background: var(--button-secondary-bg-hover); opacity: 0.32; }

/* Focus — reset to default bg + ring */
.nav__item--cta:focus-visible { outline: none; color: var(--color-fg-secondary); }
.nav__item--cta:focus-visible::before { background: var(--button-secondary-bg); opacity: 0.24; }
.nav__item--cta:focus-visible::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: var(--outline-medium) solid #999;
  pointer-events: none;
}

/* Pressed — light grey bg, text back to secondary */
.nav__item--cta:active { color: var(--color-fg-secondary); }
.nav__item--cta:active::before { background: #999999; opacity: 0.32; }

/* Disabled */
.nav__item--cta:disabled,
.nav__item--cta[aria-disabled="true"] { opacity: 0.24; pointer-events: none; cursor: not-allowed; }

/* ── Responsive ── */

@media (max-width: 540px) {
  .nav { width: auto; }
}

@media (max-width: 480px) {
  .nav {
    top: 16px;
    padding: var(--gap-2xsmall) var(--gap-2xsmall) var(--gap-2xsmall) var(--gap-small);
  }
  .nav__logo { margin-right: var(--gap-medium); }
  .nav__logo-svg { width: 28px; height: 28px; }
  .nav__item {
    height: 40px;
    padding: 0 var(--gap-small-medium);
    font-size: 14px;
  }
}

/* ── Entrance animation ── */
@keyframes nav-enter {
  0% {
    opacity: 0;
    translate: -50% -32px;
    scale: 0.90;
    filter: blur(6px);
  }
  55% {
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    translate: -50% 0;
    scale: 1;
    filter: blur(0px);
  }
}
/* ── Hero backdrop — exact Figma "background" vector + a subtle twinkle ──
   The SVG is inlined unchanged (66 #D3D9D5 component shapes at 8% opacity,
   as designed). A handful carry a gentle opacity pulse for a bit of life.
──────────────────────────────────────────────────────────────────────── */
.hero-net {
  position: absolute;
  top: 0;
  bottom: 0;
  /* break out of main's 976px column → span the full viewport width */
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  will-change: transform; /* smooth scroll parallax */
  z-index: 0;
  pointer-events: none;
}
.hero-net svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* the design's faint 8% component ghosting */
.hero-net path {
  fill-opacity: 0.08;
}
/* micro-interaction: a few shapes softly brighten in and out */
.hero-net path.tw {
  animation: hn-tw var(--dur, 7s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
  will-change: fill-opacity;
}
@keyframes hn-tw {
  0%, 100% { fill-opacity: 0.08; }
  50%      { fill-opacity: 0.26; }
}
/* stop the animation while scrolled past, and for reduced-motion */
.hero-net.is-paused path.tw { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero-net path.tw { animation: none; }
  .hero-net .edgedot { display: none; }
}
/* hide the backdrop on very small screens (< 390px) */
@media (max-width: 389px) {
  .hero-net { display: none; }
}
.hero {
  position: relative;
  width: 100%;
  min-height: 630px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-3xlarge);
  /* top padding 48 / bottom 0 → centred group sits 24px below true centre
     (Figma: hero content at y=173) */
  padding: 96px var(--gap-5xlarge) var(--gap-3xlarge); /* Figma hero pad [96,48] */
  background-color: var(--color-bg-primary);
}

/* ── Hero copy ── */
.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-small);
  text-align: center;
  max-width: 432px;
}

.hero__title {
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0;
}

.hero__subtitle {
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-subtitle);
  font-weight: 400;
  color: var(--color-fg-tertiary);
  max-width: 320px;
}

/* ── Responsive ── */

@media (max-width: 768px) {
  .hero {
    /* main provides side padding — remove hero's horizontal padding */
    padding: var(--gap-2xlarge) 0 0;
    min-height: 520px;
    gap: var(--gap-2xlarge);
  }
  .hero__title {
    font-size: 48px;
    line-height: 56px;
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: 420px;
  }
  .hero__title {
    font-size: 36px;
    line-height: 44px;
  }
  .hero__subtitle {
    font-size: 15px;
    max-width: 100%;
  }
  .hero__actions {
    flex-direction: column;
    width: 100%;
    gap: var(--gap-small);
  }
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── CTA buttons ── */
.hero__actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--gap-large);
}

/* ── Shared button styles ── */
.btn {
  position: relative;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gap-medium-large);
  border-radius: var(--radius-full);
  font-size: var(--font-size-body);
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.2s, transform 0.15s;
}

/* Secondary handles its own hover via ::before — only apply generic hover to others */
.btn:not(.btn--secondary):not(.btn--primary):hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* ── Primary button — UI Kit v01 / dark theme ── */
.btn--primary {
  background-color: #00d669;
  color: #060805;
  border-top:  1px solid rgba(237, 237, 237, 0.64);
  border-left: var(--outline-small) solid rgba(237, 237, 237, 0.64);
  border-right:  none;
  border-bottom: none;
  transition: background-color 0.15s;
}
.btn--primary:hover  { background-color: #00b450; opacity: 1; transform: none; }
.btn--primary:active { background-color: #00913a; opacity: 1; transform: none; }
.btn--primary:focus-visible { outline: none; background-color: #00d669; }
.btn--primary:focus-visible::after {
  content: '';
  position: absolute;
  inset: -5px -4px -4px -5px;
  border-radius: inherit;
  border: var(--outline-medium) solid #b6ffda;
  pointer-events: none;
}
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] { opacity: 0.24; pointer-events: none; cursor: not-allowed; }

/* ── Secondary button — UI Kit v01 / dark theme ── */
.btn--secondary {
  color: var(--color-fg-secondary); /* #d3d9d5 default */
  transition: color 0.15s;
}

/* Default — #3a3a3a @ 0.24, bevel border top+left #ededed (UI Kit updated) */
.btn--secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--button-secondary-bg); /* #3a3a3a */
  opacity: 0.24;
  border-top:  1px solid #ededed;
  border-left: var(--outline-small) solid #ededed;
  pointer-events: none;
  transition: background 0.15s, opacity 0.15s;
}
/* Hover — #747573 @ 0.32, text brightens */
.btn--secondary:hover { color: var(--color-fg-primary); /* #ededed */ }
.btn--secondary:hover::before { background: var(--button-secondary-bg-hover); opacity: 0.32; }
/* Focus — default bg + ring #999 */
.btn--secondary:focus-visible { outline: none; color: var(--color-fg-secondary); }
.btn--secondary:focus-visible::before { background: var(--button-secondary-bg); opacity: 0.24; }
.btn--secondary:focus-visible::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: var(--outline-medium) solid #999;
  pointer-events: none;
}
/* Pressed — #999 @ 0.32, text back to secondary */
.btn--secondary:active { color: var(--color-fg-secondary); }
.btn--secondary:active::before { background: #999999; opacity: 0.32; }
/* Disabled */
.btn--secondary:disabled,
.btn--secondary[aria-disabled="true"] { opacity: 0.24; pointer-events: none; cursor: not-allowed; }

/* ── Tertiary button (ghost) — UI Kit v01 states ── */

/* ── Tertiary button (ghost) — UI Kit v01 / dark theme ── */
.btn--ghost {
  background: transparent;
  border: none;
  color: var(--color-fg-secondary); /* #d3d9d5 */
  padding: 0 var(--gap-medium-large);
  transition: color 0.15s;
}
/* Hover — #060805 @ 0.32 bg, #ededed text */
.btn--ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #060805;
  opacity: 0;
  pointer-events: none;
  transition: background 0.15s, opacity 0.15s;
}
.btn--ghost:hover { color: var(--color-fg-primary); /* #ededed */ }
.btn--ghost:hover::before  { opacity: 0.32; }
/* Pressed — #454545 @ 0.32, text stays secondary */
.btn--ghost:active { color: var(--color-fg-secondary); }
.btn--ghost:active::before { background: #454545; opacity: 0.32; }
/* Focus — ring #999 */
.btn--ghost:focus-visible { outline: none; color: var(--color-fg-secondary); }
.btn--ghost:focus-visible::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: var(--outline-medium) solid #999;
  pointer-events: none;
}
/* Disabled */
.btn--ghost:disabled,
.btn--ghost[aria-disabled="true"] { opacity: 0.24; pointer-events: none; cursor: not-allowed; }

/* ── Borderless button — UI Kit v01 / dark theme ── */
/* Same as ghost but p-0 (no horizontal padding) */
.btn--borderless {
  background: transparent;
  border: none;
  color: #d3d9d5;
  padding: 0;
}
/* Hover — #060805 @ 0.32 */
.btn--borderless::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #060805;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.btn--borderless:hover::before { opacity: 0.32; }
/* Pressed — #454545 @ 0.32 */
.btn--borderless:active::before { background: #454545; opacity: 0.32; }
/* Focus — ring #999, inset -4px */
.btn--borderless:focus-visible { outline: none; }
.btn--borderless:focus-visible::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: var(--outline-medium) solid #999;
  pointer-events: none;
}
/* Disabled */
.btn--borderless:disabled,
.btn--borderless[aria-disabled="true"] { opacity: 0.24; pointer-events: none; cursor: not-allowed; }
/* ─────────────────────────────────────────────
   Badge — UI Kit `badge` (139:367)
   24px pill · 0 8px padding · label/medium #999 · 1px status border
───────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--spacing-size-small, 24px); /* 24px */
  padding: 0 var(--gap-small);             /* 0 8px */
  border-radius: var(--radius-full);
  border: var(--outline-small) solid var(--color-fg-quadruple); /* default #3a3a3a */
  font-size: var(--font-size-label);       /* 12px */
  line-height: var(--line-height-label);   /* 14px */
  font-weight: 500;                        /* label/medium */
  color: var(--color-fg-tertiary);         /* #999 */
  white-space: nowrap;
}

/* Status borders (non-interactive/foreground/<status>/light) */
.badge--default  { border-color: var(--color-fg-quadruple); /* #3a3a3a */ }
.badge--negative { border-color: #48050c; }
.badge--positive { border-color: #004c19; }
.badge--warning  { border-color: #492604; }
/* ─────────────────────────────────────────────
   ProjectGrid — "What I worked on" section
   Thumb card states: Default / Hover / Focus / Pressed
   New design: image fills full card, content overlay at bottom
───────────────────────────────────────────── */

.project-grid {
  padding: 132px 0; /* Figma section pad [132,132] */
}

.project-grid__heading {
  font-size: var(--font-size-sub-headline); /* 40px */
  line-height: var(--line-height-sub-headline); /* 48px */
  font-weight: 500;
  color: var(--color-fg-primary);
  margin-bottom: var(--gap-3xlarge);
}

.project-grid__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-3xlarge); /* 48px */
}

/* ── Thumb card ── */

.thumb {
  /* aspect-ratio matches Figma home-page grid (464×376) */
  aspect-ratio: 464 / 376;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xlarge); /* 24px */
  cursor: pointer;
  /* NO overflow:hidden here — focus ring must extend outside */
  outline: none;
}

/* ── Slot — fills the whole card (content is absolute) ── */

.thumb__slot {
  flex: 1 0 0;
  min-height: 0;
  position: relative;
  border-radius: var(--radius-xlarge); /* 24px — clips image to card corners */
  background-color: #171717;
  overflow: hidden;
}

.thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ── Gradient shadow — sits above image, behind content ── */

.thumb__shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 167px;
  background: linear-gradient(to bottom, rgba(6, 8, 5, 0), var(--color-bg-primary));
  opacity: 0.48;
  pointer-events: none;
  border-radius: 0 0 var(--radius-xlarge) var(--radius-xlarge);
}

/* ── Content overlay — frosted glass pill at bottom ── */

.thumb__content {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  border-radius: var(--radius-large); /* 16px */
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: var(--gap-small); /* 8px */
  padding: var(--gap-medium) var(--gap-medium) var(--gap-large); /* 16px sides, 24px bottom */
}

/* ── Title row: number + name ── */

.thumb__title-row {
  display: flex;
  align-items: center;
  gap: var(--gap-medium); /* 16px */
}

.thumb__number {
  font-size: var(--font-size-label);     /* 12px */
  line-height: var(--line-height-label); /* 14px */
  font-weight: 400;
  color: var(--project-default-sub-label); /* #999 */
  width: 16px;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.thumb__name {
  font-size: var(--font-size-title);     /* 24px */
  line-height: var(--line-height-title); /* 32px */
  font-weight: 500;
  color: var(--project-default-label); /* #d3d9d5 */
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* ── Meta row: industry · type · period ── */

.thumb__meta-row {
  display: flex;
  align-items: center;
  gap: var(--gap-medium); /* 16px */
  padding-left: var(--gap-xlarge);     /* aligns with name (skips 16px number + 16px gap) */
}

.thumb__tag {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: 400;
  color: var(--project-default-sub-label); /* #999 */
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.thumb__dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--project-default-sub-label); /* #999 */
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

/* ────────────────────────────────────────────
   STATE: Hover
   number + name → #00d669
   tags + dots   → #ededed
─────────────────────────────────────────── */

.thumb:not(.thumb--disabled):hover .thumb__number,
.thumb:not(.thumb--disabled):hover .thumb__name {
  color: var(--project-hover-label); /* #00d669 */
}

.thumb:not(.thumb--disabled):hover .thumb__tag {
  color: var(--project-hover-sub-label); /* #ededed */
}

.thumb:not(.thumb--disabled):hover .thumb__dot {
  background-color: var(--project-hover-sub-label);
}

/* ────────────────────────────────────────────
   STATE: Focus (keyboard navigation)
   Colors stay Default.
   2px #999 ring, 4px outside card (inset -4px in Figma)
─────────────────────────────────────────── */

.thumb:focus-visible {
  outline: var(--outline-medium) solid var(--project-focus-ring); /* 2px #999 */
  outline-offset: 4px;
}

/* ────────────────────────────────────────────
   STATE: Pressed / Active
   number + name → #00d669
   tags + dots   → #c2c7c3
─────────────────────────────────────────── */

.thumb:not(.thumb--disabled):active .thumb__number,
.thumb:not(.thumb--disabled):active .thumb__name {
  color: var(--project-pressed-label); /* #00d669 */
}

.thumb:not(.thumb--disabled):active .thumb__tag {
  color: var(--project-pressed-sub-label); /* #c2c7c3 */
}

.thumb:not(.thumb--disabled):active .thumb__dot {
  background-color: var(--project-pressed-sub-label);
}

/* ────────────────────────────────────────────
   STATE: Disabled (UI Kit 109:206)
   • not clickable, no hover/pressed states
   • slot (image) and content pill at opacity 0.32; shadow unchanged
   • "Coming soon" badge top-right at full opacity
─────────────────────────────────────────── */

.thumb--disabled { cursor: default; }

.thumb--disabled .thumb__slot,
.thumb--disabled .thumb__content {
  opacity: var(--opacity-mild); /* 0.32 */
}

.thumb__badge {
  position: absolute;
  top: var(--gap-medium);   /* 16 */
  right: var(--gap-medium); /* 16 */
  z-index: 1;
}

/* Locked badge (UI Kit 261:1254) — 40×40, #00d669, r12, pad 8, lock #060805 */
.thumb__lock {
  position: absolute;
  top: var(--gap-medium);   /* 16 (Figma: x408 in the 464 card) */
  right: var(--gap-medium); /* 16 */
  z-index: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-medium); /* 12 */
  background: var(--color-accent);     /* #00d669 */
  color: var(--color-bg-primary);      /* #060805 glyph */
}

/* ── Responsive ── */

@media (max-width: 768px) {
  .project-grid { padding: var(--gap-5xlarge) 0; } /* 64 on mobile */
  .project-grid__heading {
    font-size: 34px;
    line-height: 42px;
  }
}

@media (max-width: 600px) {
  .project-grid__grid {
    grid-template-columns: 1fr;
    gap: var(--gap-2xlarge);
  }
}

@media (max-width: 480px) {
  .project-grid__heading {
    font-size: 28px;
    line-height: 36px;
  }

  .thumb__name {
    font-size: var(--font-size-subtitle);
    line-height: var(--line-height-subtitle);
  }
}
/* ──────────────────────────────────────────────
   Clients — logo strip
────────────────────────────────────────────── */
.clients {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-large);
  padding: var(--gap-5xlarge) 0; /* 64 top/bottom */
  background-color: var(--color-bg-primary);
}

.clients__label {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: 400;
  color: var(--color-fg-tertiary);
  text-align: center;
  width: 100%;
}

.clients__logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.clients__logo {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

/* ── Responsive ── */

@media (max-width: 768px) {
  .clients__logos {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-2xlarge);
  }
  .clients__logo {
    max-height: 32px;
    width: auto;
    height: auto;
  }
}

@media (max-width: 480px) {
  .clients__logos {
    gap: var(--gap-xlarge);
  }
  .clients__logo {
    max-height: 24px;
  }
}
.soc {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-4xlarge);
  padding: 132px 0; /* Figma section pad [132,132] */
  background-color: var(--color-bg-primary);
}

/* ── Header ── */
.soc__header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium);
}

.soc__title {
  font-size: var(--font-size-sub-headline); /* 40px */
  line-height: var(--line-height-sub-headline); /* 48px */
  font-weight: 500;
  color: var(--color-fg-primary);
}

.soc__subtitle {
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-subtitle);
  font-weight: 400;
  color: var(--color-fg-tertiary);
  max-width: 760px;
}

/* ── Body row ── */
.soc__body {
  display: flex;
  gap: var(--gap-5xlarge);
  align-items: flex-start;
}

/* ── Left nav menu ── */
.soc__menu {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
}

/* Reset button defaults */
.soc__menu-item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--gap-large);
  padding-top: var(--gap-large);
  width: 100%;
  cursor: pointer;
  text-align: left;
}

.soc__menu-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small-medium);
}

.soc__menu-label {
  font-size: var(--font-size-body);
  font-weight: 500;
  line-height: var(--line-height-body);
  color: var(--color-fg-primary);
  transition: opacity 0.15s;
}

/* Inactive items are dimmed */
.soc__menu-item:not(.soc__menu-item--active) .soc__menu-label {
  opacity: 0.45;
}

.soc__menu-item:not(.soc__menu-item--active):hover .soc__menu-label {
  opacity: 0.75;
}

.soc__menu-desc {
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: var(--line-height-body);
  color: var(--color-fg-tertiary);
  animation: fade-in 0.2s ease both;
}

.soc__menu-divider {
  height: 1px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.08);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card slides up and fades in */
@keyframes card-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Each icon layer scales + fades in from slightly smaller */
@keyframes layer-assemble {
  0%   { opacity: 0; transform: scale(0.55); }
  65%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Right 2×2 icon grid (desktop) ── */
.soc__grid--desktop {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-5xlarge);
}

/* ── Inline accordion grid (mobile only, hidden on desktop) ── */
.soc__grid--inline {
  display: none;
}

.soc__card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xlarge);
  align-items: flex-start;
  animation: card-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.soc__card-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
}

.soc__card-title {
  font-size: var(--font-size-body);
  font-weight: 500;
  line-height: var(--line-height-body);
  color: var(--color-fg-primary);
}

.soc__card-desc {
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: var(--line-height-body);
  color: var(--color-fg-tertiary);
}

/* ── Responsive ── */

@media (max-width: 768px) {
  .soc__title {
    font-size: 34px;
    line-height: 42px;
  }
  .soc__body {
    flex-direction: column;
    gap: 0;
  }
  /* Menu spans full width; desktop grid hidden */
  .soc__menu {
    flex: 0 0 auto;
    width: 100%;
  }
  .soc__grid--desktop {
    display: none;
  }
  /* Hide the divider that sits inside the active button (between description and cards) */
  .soc__menu-item--active .soc__menu-divider {
    display: none;
  }

  /* Inline accordion grid: 2 columns under the active tab */
  .soc__grid--inline {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-large);
    /* padding-top spaces cards from description above;
       NO padding-bottom — the next menu-item's padding-top (24px) handles it */
    padding: var(--gap-large) 0 0;
  }

  /* Divider after the cards must span all columns to be full-width */
  .soc__grid--inline .soc__menu-divider {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  .soc__title {
    font-size: 28px;
    line-height: 36px;
  }
  /* Single column on small phones */
  .soc__grid--inline {
    grid-template-columns: 1fr;
  }
}

/* ── Service icon (72×72, UI Kit v01 — node 41:372) ── */
.service-icon {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  overflow: hidden;
}

/* Wrapper div: positioned by inline inset styles; layers assemble on enter */
.service-icon__layer {
  position: absolute;
  animation: layer-assemble 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Inner img: fills the wrapper completely */
.service-icon__layer-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}
.footer {
  width: 100%;
  padding: 132px 0; /* Figma: footer sections pad 132 top/bottom */
  background-color: var(--color-bg-primary);
}

@media (max-width: 768px) {
  .footer { padding: var(--gap-5xlarge) 0; } /* 64 on mobile */
}

.footer__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3xlarge); /* 48 — Figma footer content (headline → copyright) */
  /* max-width handled by main container */
}

.footer__headline {
  font-size: var(--font-size-sub-headline); /* 40px */
  line-height: var(--line-height-sub-headline); /* 48px */
  font-weight: 500;
  letter-spacing: 0;
}

.footer__headline--bright {
  color: var(--color-fg-primary);
}

.footer__headline--dim {
  color: var(--color-fg-tertiary);
}

/* ── Responsive ── */

@media (max-width: 768px) {
  .footer__headline {
    font-size: 34px;
    line-height: 42px;
  }
}

@media (max-width: 480px) {
  .footer__headline {
    font-size: 28px;
    line-height: 36px;
  }
}

/* Copyright — label/regular (updated token) */
.footer__copy {
  font-size: var(--font-size-label);   /* 12px */
  line-height: var(--line-height-label); /* 14px */
  font-weight: 400;
  color: var(--color-fg-tertiary);
}
/* ─────────────────────────────────────────────
   Work page — hero + project list layout
   projects component states: Default / Hover / Focus / Pressed
───────────────────────────────────────────── */

/* ── Hero ── (Figma node 167:594, 1200×630) */
.work-hero {
  position: relative;
  width: 100%;
  min-height: 630px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* content + scroll form a vertically-centered group, 32px apart */
  gap: var(--gap-xlarge); /* 32px */
  /* top padding 48 / bottom 0 → group sits 24px below centre
     (Figma: hero content at y=188, scroll at y=456) */
  padding-top: 96px;    /* Figma hero pad [96,48] */
  padding-bottom: var(--gap-3xlarge); /* 48px */
  background-color: var(--color-bg-primary);
}

.work-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-small); /* 8px */
  text-align: center;
  max-width: 508px;
}

.work-hero__title {
  font-size: var(--font-size-display);     /* 64px */
  line-height: var(--line-height-display); /* 72px */
  font-weight: 500;
  color: var(--color-fg-primary);
  letter-spacing: 0;
}

.work-hero__subtitle {
  font-size: var(--font-size-subtitle);     /* 20px */
  line-height: var(--line-height-subtitle); /* 28px */
  font-weight: 400;
  color: var(--color-fg-tertiary);
  max-width: 320px;
}

/* Scroll indicator — sits 32px below the content within the centered group */
.work-hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2xsmall); /* 4px */
}

.work-hero__scroll-icon {
  /* Mouse glyph is portrait (9.33 × 13.33, ratio 0.7) — keep proportional */
  width: 9.8px;
  height: 14px;
  display: block;
  animation: scroll-bob 1.8s ease-in-out infinite;
}

.work-hero__scroll-label {
  font-size: var(--font-size-label);     /* 12px */
  line-height: var(--line-height-label); /* 14px */
  font-weight: 400;
  color: var(--color-fg-tertiary);
}

@keyframes scroll-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* List container — 64px top/bottom padding (Figma projects section 119:2003) */
.work-list {
  padding-top: 132px;    /* Figma section pad [132,132] */
  padding-bottom: 132px;
}

@media (max-width: 768px) {
  .work-list { padding-top: var(--gap-5xlarge); padding-bottom: var(--gap-5xlarge); }
}

/* ── Row ── */

.wl-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap-2xlarge);    /* 40px */
  padding: var(--gap-large) 0; /* 24px top/bottom, 0 left/right (default state) */
  cursor: pointer;
  outline: none; /* custom focus ring below */

  /* Smooth transitions for hover/pressed indent and colour changes */
  transition:
    padding-left 0.2s ease-out,
    padding-right 0.2s ease-out;
}

/* Divider line: default — 1px #3a3a3a */
.wl-row::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--project-default-outline); /* #3a3a3a */
  pointer-events: none;
  transition: height 0.2s ease-out, background-color 0.2s ease-out;
}

/* Last row has no divider by default — but it can still appear on hover/pressed.
   Keep ::after present (height 0, transparent) so the hover/pressed states show it. */
.wl-row--last::after {
  height: 0;
  background-color: transparent;
}

/* ── Left side: number + name ── */

.wl-row__left {
  display: flex;
  align-items: center;
  gap: var(--gap-2xlarge); /* 40px */
  flex: 1;
  min-width: 0;
}

/* Locked state (UI Kit 238:140) — lock 24×24, accent glyph, after the name */
.wl-row__lock {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-accent); /* #00d669 */
}

.wl-row__number {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: 400;
  color: var(--project-default-sub-label); /* #999 */
  flex-shrink: 0;
  width: 20px;
  transition: color 0.2s ease-out;
}

.wl-row__name {
  font-size: var(--font-size-sub-headline); /* 40px */
  line-height: var(--line-height-sub-headline); /* 48px */
  font-weight: 500;
  color: var(--project-default-label); /* #d3d9d5 */
  transition: color 0.2s ease-out;
  white-space: nowrap;
}

/* ── Right side: industry · type · period ── */

.wl-row__right {
  display: flex;
  align-items: center;
  gap: var(--gap-medium); /* 16px */
  flex-shrink: 0;
}

.wl-row__tag {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: 400;
  color: var(--project-default-sub-label); /* #999 */
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: color 0.2s ease-out;
}

.wl-row__dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--project-default-sub-label); /* #999 */
  flex-shrink: 0;
  transition: background-color 0.2s ease-out;
}

/* ── Arrow button ── */

.wl-row__action {
  position: relative;
  width: var(--spacing-size-small-medium);  /* 32 */
  height: var(--spacing-size-small-medium);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  /* Updated icon-button token: arrow is green in the default state */
  color: var(--icon-button-project-default); /* #00d669 */
  transition: color 0.2s ease-out;
}

/* Both arrows stacked & centered in the 32×32 action; swap on hover/press.
   Each keeps its own glyph aspect ratio (up-right square, arrow-right wider).
   easeOutQuint for a silky, decelerating motion. */
.wl-row__arrow {
  position: absolute;
  inset: 0;
  margin: auto; /* centers the glyph within the action */
  display: block;
  will-change: opacity, transform;
  transition:
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.wl-row__arrow--up    { width: 14px;   height: 14px; }
.wl-row__arrow--right { width: 15.6px; height: 14px; }

/* Default: ↗ up-right shown, → arrow-right waiting, nudged left */
.wl-row__arrow--up    { opacity: 1; transform: translate(0, 0); }
.wl-row__arrow--right { opacity: 0; transform: translateX(-5px); }

/* Hover / Pressed: ↗ glides off up-right & fades, → eases in from the left.
   A small delay on the incoming arrow lets the outgoing one clear first. */
.wl-row:not(.wl-row--disabled):hover .wl-row__arrow--up,
.wl-row:not(.wl-row--disabled):active .wl-row__arrow--up {
  opacity: 0;
  transform: translate(5px, -5px);
}
.wl-row:not(.wl-row--disabled):hover .wl-row__arrow--right,
.wl-row:not(.wl-row--disabled):active .wl-row__arrow--right {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.06s;
}

@media (prefers-reduced-motion: reduce) {
  .wl-row__arrow { transition: opacity 0.2s ease; transition-delay: 0s; }
  .wl-row__arrow--up,
  .wl-row:not(.wl-row--disabled):hover .wl-row__arrow--up,
  .wl-row:not(.wl-row--disabled):active .wl-row__arrow--up,
  .wl-row__arrow--right,
  .wl-row:not(.wl-row--disabled):hover .wl-row__arrow--right,
  .wl-row:not(.wl-row--disabled):active .wl-row__arrow--right {
    transform: none;
  }
}

/* ────────────────────────────────────────────
   STATE: Disabled (UI Kit 100:183)
   • not clickable, no hover/pressed/focus behaviour
   • opacity/gentle (0.24) applied per layer — number, name, tags,
     dots, arrow and divider — NOT on the whole row
   • "Coming soon" badge stays at full opacity
─────────────────────────────────────────── */

.wl-row--disabled { cursor: default; }

.wl-row--disabled .wl-row__number,
.wl-row--disabled .wl-row__name,
.wl-row--disabled .wl-row__right,
.wl-row--disabled .wl-row__action {
  opacity: var(--opacity-gentle); /* 0.24 */
}

.wl-row--disabled .wl-row__number { color: var(--project-disabled-sub-label); }
.wl-row--disabled .wl-row__name   { color: var(--project-disabled-label); }
.wl-row--disabled .wl-row__tag    { color: var(--project-disabled-sub-label); }
.wl-row--disabled .wl-row__dot  { background-color: var(--project-disabled-sub-label); }

.wl-row--disabled::after {
  background-color: var(--project-disabled-outline); /* #3a3a3a */
  opacity: var(--opacity-gentle); /* 0.24 */
}

/* badge sits in the left group at full opacity */
.wl-row__badge { flex-shrink: 0; }

/* ────────────────────────────────────────────
   STATE: Hover
   • 16px left indent on the row
   • number + name + arrow → #00d669
   • tags + dots            → #ededed
   • divider                → 2px solid #00d669
─────────────────────────────────────────── */

.wl-row:not(.wl-row--disabled):hover {
  padding-left: var(--gap-medium); /* 16px indent */
}

.wl-row:not(.wl-row--disabled):hover .wl-row__number,
.wl-row:not(.wl-row--disabled):hover .wl-row__name {
  color: var(--project-hover-label); /* #00d669 */
}

/* Arrow follows the icon-button hover token */
.wl-row:not(.wl-row--disabled):hover .wl-row__action {
  color: var(--icon-button-project-hover); /* #00b450 */
}

.wl-row:not(.wl-row--disabled):hover .wl-row__tag {
  color: var(--project-hover-sub-label); /* #ededed */
}

.wl-row:not(.wl-row--disabled):hover .wl-row__dot {
  background-color: var(--project-hover-sub-label);
}

/* Hover divider — 2px green, on ALL rows incl. the last */
.wl-row:not(.wl-row--disabled):hover::after {
  height: 2px;
  background-color: var(--project-hover-outline); /* #00d669 */
}

/* ────────────────────────────────────────────
   STATE: Focus (keyboard navigation)
   • colors stay at Default
   • 2px #999 ring, 4px outside component
─────────────────────────────────────────── */

.wl-row:focus-visible {
  outline: var(--outline-medium) solid var(--project-focus-ring); /* 2px #999 */
  outline-offset: 4px;
}

/* Focus divider stays at Default */

/* ────────────────────────────────────────────
   STATE: Pressed / Active
   • 16px left indent (same as hover)
   • number + name + arrow → #00d669
   • tags + dots            → #c2c7c3
   • divider                → #10ffa4
─────────────────────────────────────────── */

.wl-row:not(.wl-row--disabled):active {
  padding-left: var(--gap-medium); /* 16px indent */
}

.wl-row:not(.wl-row--disabled):active .wl-row__number,
.wl-row:not(.wl-row--disabled):active .wl-row__name {
  color: var(--project-pressed-label); /* #00d669 */
}

/* Arrow follows the icon-button pressed token */
.wl-row:not(.wl-row--disabled):active .wl-row__action {
  color: var(--icon-button-project-pressed); /* #00d669 */
}

.wl-row:not(.wl-row--disabled):active .wl-row__tag {
  color: var(--project-pressed-sub-label); /* #c2c7c3 */
}

.wl-row:not(.wl-row--disabled):active .wl-row__dot {
  background-color: var(--project-pressed-sub-label);
}

/* Pressed divider — 2px bright green, on ALL rows incl. the last */
.wl-row:not(.wl-row--disabled):active::after {
  height: 2px;
  background-color: var(--project-pressed-outline); /* #10ffa4 */
}

/* ── Responsive ── */

@media (max-width: 768px) {
  .wl-row__right {
    display: none; /* hide tags on mobile */
  }
  .wl-row__name {
    font-size: 28px;
    line-height: 36px;
  }
  .work-hero {
    min-height: 520px;
  }
  .work-hero__title {
    font-size: 48px;
    line-height: 56px;
  }
}

@media (max-width: 480px) {
  .wl-row__name {
    font-size: 22px;
    line-height: 30px;
  }
  .work-hero {
    min-height: 440px;
  }
  .work-hero__title {
    font-size: 36px;
    line-height: 44px;
  }
  .work-hero__subtitle {
    font-size: 15px;
    max-width: 100%;
  }
}
/* ─────────────────────────────────────────────
   Testimonials — UI Kit `testimonials` (144:67)
   States mirror the project rows (project/* tokens):
   Default · Hover (indent + green) · Focus (ring) · Pressed · Disabled
   expanded=False (unselected) ↔ expanded=True (selected, reveals quote)
───────────────────────────────────────────── */

.tm-list {
  display: flex;
  flex-direction: column;
}

/* ── Row ── */
.tm {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--gap-large) 0; /* 24px top/bottom */
  cursor: pointer;
  outline: none;
  transition: padding-left 0.2s ease-out;
}

/* Bottom divider — default 1px #3a3a3a; last row none */
.tm::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--project-default-outline); /* #3a3a3a */
  pointer-events: none;
  transition: height 0.2s ease-out, background-color 0.2s ease-out;
}
/* Last row: no divider at rest — only shows on hover / pressed / expanded */
.tm--last::after { height: 0; background-color: transparent; }

/* ── Top row: avatar + name/title + chevron ── */
.tm__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-large);
}

.tm__left {
  display: flex;
  align-items: center;
  gap: var(--gap-large); /* 24px */
  min-width: 0;
}

.tm__avatar {
  width: var(--spacing-size-large);  /* 56 */
  height: var(--spacing-size-large);
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}
.tm__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tm__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-2xsmall); /* 4px */
  min-width: 0;
}

.tm__name {
  font-size: var(--font-size-title);     /* 24px */
  line-height: var(--line-height-title); /* 32px */
  font-weight: 500;
  color: var(--project-default-label); /* #d3d9d5 */
  transition: color 0.2s ease;
}

.tm__title {
  font-size: var(--font-size-body);     /* 16px */
  line-height: var(--line-height-body); /* 22px */
  font-weight: 400;
  color: var(--project-default-sub-label); /* #999 */
  transition: color 0.2s ease;
}

/* ── Chevron action — green icon (actions/tertiary icon = #00d669) ── */
.tm__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  color: var(--color-accent); /* #00d669 */
}
.tm__chevron-icon {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Quote — collapsed by default, revealed when open ── */
.tm__quote-wrap {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              margin-top 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.tm__quote {
  overflow: hidden;
  min-height: 0;
  max-width: 680px; /* ~66ch at 20px — comfortable reading measure */
  opacity: 0;
  transition: opacity 0.25s ease;
}
.tm__quote p {
  font-size: var(--font-size-subtitle);     /* 20px */
  line-height: var(--line-height-subtitle); /* 28px */
  font-weight: 400;
  /* dim base — key phrases lift to bright via .tm-hl (footer-headline pattern) */
  color: var(--color-fg-tertiary); /* #999 */
}
.tm__quote .tm-hl {
  color: var(--color-fg-primary); /* #ededed */
}
.tm__quote p + p {
  margin-top: var(--gap-medium); /* 16px between paragraphs */
}

/* ─── STATE: Hover (collapsed) — 16px indent, green name, bright sub, 2px green divider ─── */
.tm:hover { padding-left: var(--gap-medium); /* 16px */ }
.tm:hover .tm__name  { color: var(--project-hover-label); /* #00d669 */ }
.tm:hover .tm__title { color: var(--project-hover-sub-label); /* #ededed */ }
.tm:hover::after {
  height: 2px;
  background-color: var(--project-hover-outline); /* #00d669 */
}

/* ─── STATE: Focus — 2px #999 ring ─── */
.tm:focus-visible {
  outline: var(--outline-medium) solid var(--project-focus-ring);
  outline-offset: 4px;
  border-radius: var(--radius-small);
}

/* ─── STATE: Pressed (collapsed) — 16px indent, green name, #c2c7c3 sub, #10ffa4 divider ─── */
.tm:active { padding-left: var(--gap-medium); }
.tm:active .tm__name  { color: var(--project-pressed-label); /* #00d669 */ }
.tm:active .tm__title { color: var(--project-pressed-sub-label); /* #c2c7c3 */ }
.tm:active::after {
  height: 2px;
  background-color: var(--project-pressed-outline); /* #10ffa4 */
}

/* ─── STATE: Open (selected) — 16px indent (kept across all states while open),
   green name, chevron flips up, quote expands ─── */
.tm--open { padding-left: var(--gap-medium); /* 16px */ }
/* Expanded shows the 1px divider (covers the last row, which is hidden at rest) */
.tm--open::after { height: 1px; background-color: var(--project-default-outline); /* #3a3a3a */ }
.tm--open .tm__name { color: var(--project-hover-label); /* #00d669 */ }
.tm--open .tm__chevron-icon { transform: rotate(180deg); }
.tm--open .tm__quote-wrap {
  grid-template-rows: 1fr;
  margin-top: var(--gap-2xlarge); /* 40px */
}
.tm--open .tm__quote { opacity: 1; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .tm__name  { font-size: 20px; line-height: 28px; }
  .tm__quote { font-size: 17px; line-height: 25px; }
}
/* ─────────────────────────────────────────────
   About page (Figma 245:3418)
───────────────────────────────────────────── */

/* ── Hero — full-bleed cropped photo + frosted card ── */
.about-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 630px;
  overflow: hidden;
  background-color: var(--color-bg-secondary); /* #171717 behind the photo */
}

/* Photo layer — cropped, not resized. Fixed size + position reproduce the
   Figma crop (2230×743 at x −258 in the 1200 frame); background-attachment
   fixed pins it to the viewport for the same parallax as the other heroes. */
.about-hero__media {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('/assets/about/hero.webp');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: calc(50vw - 858px) 0;
  background-size: 2230px 743px;
}
/* Touch devices ignore fixed attachment; reduced motion opts out — static cover */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .about-hero__media {
    background-attachment: scroll;
    background-position: 32% center;
    background-size: cover;
  }
}

/* Frosted content card — bottom-left, its text aligned to the 976 column */
.about-hero__card {
  position: absolute;
  left: max(var(--gap-large), calc((100vw - 976px) / 2 - var(--gap-large)));
  bottom: var(--gap-5xlarge); /* 64px */
  width: min(558px, calc(100vw - 48px));
  padding: var(--gap-large); /* 24px */
  border-radius: var(--radius-large); /* 16px */
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: var(--gap-small); /* 8px */
  z-index: 1;
}
.about-hero__title {
  font-size: var(--font-size-display);     /* 64px */
  line-height: var(--line-height-display); /* 72px */
  font-weight: 500;
  color: var(--color-fg-primary);
  white-space: nowrap;
}
.about-hero__intro {
  font-size: var(--font-size-subtitle);     /* 20px */
  line-height: var(--line-height-subtitle); /* 28px */
  font-weight: 400;
  color: var(--color-fg-tertiary);
}

/* Shared: bright clause inside dim copy */
.about-bright { color: var(--color-fg-primary); }

/* Overline (label token — tertiary, uppercase) */
.about-overline {
  font-size: var(--font-size-label);     /* 12px */
  line-height: var(--line-height-label); /* 14px */
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-fg-tertiary);
}

/* Shared 40px section heading (sub-headline) */
.about-heading,
.about-textblock__heading {
  font-size: var(--font-size-sub-headline);     /* 40px */
  line-height: var(--line-height-sub-headline); /* 48px */
  font-weight: 500;
  color: var(--color-fg-primary);
}

/* Section divider (UI Kit divider — quinary) */
.about-divider {
  height: 0;
  margin: 0;
  border: none;
  border-top: var(--outline-small) solid var(--color-fg-quinary);
  opacity: 1;
}

/* ── How it all started + The story ── */
.about-story {
  padding: 132px 0; /* Figma section pad */
  display: flex;
  flex-direction: column;
  gap: var(--gap-7xlarge, 96px); /* 96px between the two blocks */
}
.about-textblock { display: flex; flex-direction: column; }
.about-textblock .about-overline { margin-bottom: var(--gap-medium); }   /* 16 */
.about-textblock__heading { margin-bottom: var(--gap-large); }           /* 24 */
.about-textblock__body { display: flex; flex-direction: column; gap: var(--gap-medium-large); } /* 20 */
.about-textblock__body p {
  font-size: var(--font-size-subtitle);     /* 20px */
  line-height: var(--line-height-subtitle); /* 28px */
  font-weight: 400;
  color: var(--color-fg-tertiary);
}

/* ── Generic section wrapper ── */
.about-section {
  padding: 132px 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-4xlarge); /* 56px heading → content */
}

/* ── Things that I've believed in ── */
.about-beliefs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-2xlarge); /* 40px */
}
.belief { display: flex; flex-direction: column; gap: var(--gap-large); } /* 24 icon→text */
.belief__content { display: flex; flex-direction: column; gap: var(--gap-small); } /* 8 */
.belief__title {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 500;
  color: var(--color-fg-primary);
}
.belief__desc {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: var(--color-fg-tertiary);
}

/* Layered belief icon (72px) — assembles when the grid enters view */
.about-ill {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  overflow: hidden;
}
.about-ill__layer { position: absolute; opacity: 0; }
.about-ill__layer-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}
.about-beliefs--in .about-ill__layer {
  animation: about-ill-assemble 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes about-ill-assemble {
  0%   { opacity: 0; transform: scale(0.55); }
  65%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Bookshelf ── */
.about-shelf {
  padding: 132px 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-4xlarge); /* 56px head → track */
}
.about-shelf__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-large);
}
.about-shelf__intro { display: flex; flex-direction: column; }
.about-shelf__intro .about-overline { margin-bottom: var(--gap-medium); }
.about-shelf__desc {
  margin-top: var(--gap-large); /* 24 heading → desc */
  max-width: 760px;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: var(--color-fg-tertiary);
}
.about-shelf__arrows { display: flex; gap: var(--gap-medium); flex-shrink: 0; }

/* Arrow icon-button (Figma icon-button — frosted secondary, green glyph) */
.about-arrow {
  position: relative;
  width: var(--spacing-size-medium-large); height: var(--spacing-size-medium-large); /* 48 */
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-accent);
  transition: opacity 0.15s ease;
}
.about-arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #3a3a3a;
  opacity: 0.24;
  border-top: var(--outline-small) solid #ededed;
  border-left: var(--outline-small) solid #ededed;
  transition: opacity 0.15s ease;
}
.about-arrow > svg { position: relative; }
.about-arrow:hover:not(:disabled)::before { opacity: 0.32; }
.about-arrow:disabled { color: var(--color-fg-tertiary); opacity: 0.32; cursor: default; }

/* Full-bleed drag track — first card aligns with the 976 column */
.about-shelf__track {
  display: flex;
  gap: var(--gap-large); /* 24 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: max(var(--gap-large), calc((100vw - 976px) / 2));
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}
.about-shelf__track::-webkit-scrollbar { display: none; }
.about-shelf__track.is-dragging { cursor: grabbing; }

.book {
  flex: 0 0 341px;
  width: 341px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-large); /* 24 cover → content */
}
.book__cover {
  width: 341px;
  height: 520px;
  overflow: hidden;
  background-color: var(--color-bg-secondary);
}
.book__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* A cover with thin white edges (Kobe): zoom slightly to crop them off */
.book__img--zoom { transform: scale(1.06); }

/* Stacked trio (Foundation) — full-size covers fanned into a pile.
   Figma: three w-330 covers offset ±4.5px horizontally / ~3% vertically. */
.book__cover--stack {
  overflow: visible;
  background: transparent;
  position: relative;
}
.book__cover--stack .book__img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transform:
    translate(-50%, -50%)
    translateX(calc((1 - var(--stack-i)) * 4.5px))
    translateY(calc((1 - var(--stack-i)) * 10px));
}
.book__content { display: flex; flex-direction: column; gap: var(--gap-small); } /* 8 */
.book__titles { display: flex; flex-direction: column; gap: var(--gap-2xsmall); } /* 4 */
.book__title {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 500;
  color: var(--color-fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book__author {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: var(--color-fg-tertiary);
}
.book__desc {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: var(--color-fg-tertiary);
}

/* ── Testimonials — full-bleed #171717 band ── */
.about-section--surface {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0;
  background-color: var(--color-bg-secondary);
}
.about-section__inner {
  width: 100%;
  max-width: calc(976px + 2 * var(--gap-large));
  margin: 0 auto;
  padding: 132px var(--gap-large);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--gap-4xlarge); /* 56 */
}

/* ── Today ── */
.about-today { display: flex; flex-direction: column; gap: var(--gap-large); }
.about-today__body { display: flex; flex-direction: column; gap: var(--gap-large); }
.about-today__body p {
  font-size: var(--font-size-subtitle);     /* 20px */
  line-height: var(--line-height-subtitle); /* 28px */
  font-weight: 400;
  color: var(--color-fg-tertiary);
}
.about-today__actions {
  margin-top: var(--gap-medium);
  display: flex;
  align-items: center;
  gap: var(--gap-large);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .about-hero__card { width: min(480px, calc(100vw - 48px)); }
  .about-hero__title { font-size: 48px; line-height: 56px; }
  .about-beliefs { grid-template-columns: repeat(2, 1fr); row-gap: var(--gap-3xlarge); }
}

@media (max-width: 768px) {
  .about-story,
  .about-shelf,
  .about-section { padding: var(--gap-5xlarge) 0; } /* 64 on mobile */
  .about-section__inner { padding: var(--gap-5xlarge) var(--gap-large); }
  .about-story { gap: var(--gap-5xlarge); }
  .about-shelf__head { flex-direction: column; align-items: flex-start; }
  .about-heading,
  .about-textblock__heading { font-size: 34px; line-height: 42px; }
  .about-hero { height: 560px; }
}

@media (max-width: 480px) {
  .about-hero__title { font-size: 36px; line-height: 44px; white-space: normal; }
  .about-beliefs { grid-template-columns: 1fr; }
  .about-today__actions { flex-direction: column; align-items: stretch; }
  .about-heading,
  .about-textblock__heading { font-size: 28px; line-height: 36px; }
  .book, .book__cover { width: 280px; }
  .book__cover { height: 427px; }
}
/* ─────────────────────────────────────────────
   Chip / Tag — UI Kit `chip` (139:284)
   24px outline pill · label/medium · border #ededed at state opacity
   Default 0.24 · Hover 0.64 (+bright label) · Pressed 1.0 · Focus ring
───────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--spacing-size-small, 24px); /* 24px */
  padding: 0 var(--gap-small);             /* 0 8px */
  border-radius: var(--radius-full);
  /* outline #ededed @ opacity/gentle (0.24) */
  border: var(--outline-small) solid rgba(237, 237, 237, 0.24);
  font-size: var(--font-size-label);       /* 12px */
  line-height: var(--line-height-label);   /* 14px */
  font-weight: 500;                        /* label/medium */
  color: var(--color-fg-secondary);        /* #d3d9d5 */
  white-space: nowrap;
  background: none;
  font-family: inherit;
}

/* Interactive variant — hover / focus / pressed / disabled */
.chip--interactive {
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

/* Hover — brighter border (#ededed @ 0.64) + brighter label */
.chip--interactive:hover {
  border-color: rgba(237, 237, 237, 0.64);
  color: var(--color-fg-primary); /* #ededed */
}

/* Pressed — solid border (#ededed @ 1.0), label back to secondary */
.chip--interactive:active {
  border-color: rgba(237, 237, 237, 1);
  color: var(--color-fg-secondary);
}

/* Focus — default border + 2px #999 ring */
.chip--interactive:focus-visible {
  border-color: rgba(237, 237, 237, 0.24);
  box-shadow: 0 0 0 2px #999;
}

/* Disabled — dim the whole chip */
.chip--interactive:disabled,
.chip--interactive[aria-disabled="true"] {
  opacity: 0.24;
  pointer-events: none;
  cursor: not-allowed;
}
/* ─────────────────────────────────────────────
   CarouselCard — design-system atom (Figma UI-Kit-v01 157:302)
   Number + Title + Description, 5 interaction states.
───────────────────────────────────────────── */

.carousel-card {
  position: relative;
  box-sizing: border-box;
  width: 100%; /* fluid — the container sizes it (312px default slot, 468px in the loan flow) */
  display: flex;
  flex-direction: column;
  gap: var(--gap-none); /* 0 — line-height carries the vertical rhythm */
  padding: var(--gap-large); /* 24px */
  border-radius: var(--radius-xlarge); /* 24px */
  border: 0;
  background: transparent;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Content sits above the frosted pressed-state layer */
.carousel-card__row,
.carousel-card__desc {
  position: relative;
  z-index: 1;
}

.carousel-card__row {
  display: flex;
  align-items: center;
  gap: var(--gap-medium); /* 16px */
  width: 100%;
}

.carousel-card__num {
  flex-shrink: 0;
  width: 16px;
  font-size: var(--font-size-label);     /* 12px */
  line-height: var(--line-height-label);  /* 14px */
  font-weight: 400;
  color: var(--color-fg-tertiary);        /* #999 */
  transition: color 0.2s ease;
}

.carousel-card__title {
  font-size: var(--font-size-title);      /* 24px */
  line-height: var(--line-height-title);  /* 32px */
  font-weight: 500;
  color: var(--color-fg-secondary);       /* #d3d9d5 */
  transition: color 0.2s ease;
}

.carousel-card__desc {
  padding-left: var(--gap-xlarge); /* 32px — aligns under the title, past the number column */
  font-size: var(--font-size-body);      /* 16px */
  line-height: var(--line-height-body);  /* 22px */
  font-weight: 400;
  color: var(--color-fg-tertiary);       /* #999 */
  transition: color 0.2s ease;
}

/* ── Hover ── accent title + number, brighter description ── */
.carousel-card:hover .carousel-card__num,
.carousel-card:hover .carousel-card__title {
  color: var(--color-accent); /* #00d669 */
}
.carousel-card:hover .carousel-card__desc {
  color: var(--color-fg-primary); /* #ededed */
}

/* ── Focus (keyboard) ── 2px ring, sits ~4px outside the card ── */
.carousel-card:focus-visible {
  outline: var(--outline-medium) solid var(--color-fg-tertiary); /* 2px #999 */
  outline-offset: 2px;
}

/* ── Pressed ── frosted fill + accent title, softened description ──
   Figma: rgba(58,58,58,0.48) layer at 0.64 opacity + 12px background blur. */
.carousel-card:active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(58, 58, 58, 0.31);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.carousel-card:active .carousel-card__num,
.carousel-card:active .carousel-card__title {
  color: var(--color-accent);
}
.carousel-card:active .carousel-card__desc {
  color: #c2c7c3; /* project/pressed/sub-label */
}

/* ── Active ── persistent pressed visual (e.g. the selected step in a flow) ── */
.carousel-card--active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(58, 58, 58, 0.31);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.carousel-card--active .carousel-card__num,
.carousel-card--active .carousel-card__title {
  color: var(--color-accent);
}
.carousel-card--active .carousel-card__desc {
  color: #c2c7c3; /* project/pressed/sub-label */
}

/* ── Disabled ── dimmed + inert (rendered as a non-interactive span) ── */
.carousel-card[data-disabled='true'] {
  opacity: 0.32; /* opacity/mild */
  cursor: default;
  pointer-events: none;
}
/* ─────────────────────────────────────────────
   Paper case study (Figma pg02Bcql… 191:1632)
   Bespoke layout; reuses design-system tokens + components.
───────────────────────────────────────────── */

.pcs { color: var(--color-fg-primary); }

/* Full-bleed helper values reused below via the 50vw trick. */

/* ── Hero — full-bleed #171717, frosted card bottom-left ── */
/* Full-bleed hero; the 16px padding shows the page bg around the framed image. */
.pcs-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 630px;
  padding: var(--gap-medium);
  box-sizing: border-box;
  background: var(--color-bg-primary); /* #060805 */
}
/* Inset image — rounded 24px (radius/xlarge), clips the tilted collage */
.pcs-hero__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xlarge); /* 24 */
  overflow: hidden;
  background: #171717; /* dark surround behind the dimmed collage */
}
/* App-screens collage: fixed size (consistent phone scale across breakpoints),
   left-anchored, rotated -15° (rotation pre-baked into the asset), 32%
   opacity. Matches Figma 245:2900.
   Parallax: background-attachment fixed pins the artwork to the viewport on
   the compositor (no JS lag) while the frame clips it — backgrounds can never
   escape the element, unlike position:fixed children. */
.pcs-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/work/paper/hero-home-tilted.webp');
  background-attachment: fixed;
  background-repeat: no-repeat;
  /* viewport coordinates: frame offsets (-252,-848) + 16px page inset */
  background-position: -236px -832px;
  background-size: 2568px 2608px;
  opacity: 0.32;
  pointer-events: none;
}
/* Touch devices ignore fixed attachment; reduced motion opts out — both get
   the static composition, anchored to the frame instead of the viewport */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .pcs-hero__bg {
    background-attachment: scroll;
    background-position: -252px -848px;
  }
}
/* Frosted card — bottom-left of the frame; reflows: fills width (title wraps to
   3 lines, meta to 2) on narrow, fixed 423px single-line from 768px up. */
.pcs-hero__card {
  position: absolute;
  z-index: 1;
  bottom: 48px;
  left: 16px;
  width: min(423px, calc(100% - 32px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--gap-large); /* 24 */
  padding: var(--gap-large); /* 24 */
  border-radius: var(--radius-large); /* 16 */
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.pcs-hero__logo { height: 24px; width: auto; align-self: flex-start; }
.pcs-hero__body { display: flex; flex-direction: column; gap: var(--gap-small); /* 8 */ }
.pcs-hero__title {
  font-size: var(--font-size-sub-headline);     /* 40 */
  line-height: var(--line-height-sub-headline);  /* 48 */
  font-weight: 500;
  color: var(--color-fg-primary);  /* #ededed */
}
.pcs-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-2xsmall) var(--gap-medium); /* 4 row (wrapped lines) · 16 column */
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: var(--color-fg-secondary); /* #d3d9d5 */
}
.pcs-hero__meta > span { white-space: nowrap; }
.pcs-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* From 768px up the card is a fixed 423px; its inner content (after the 24px
   padding) aligns to the 976px page content column, so past ~1200px it slides
   right with the viewport instead of staying pinned. Card is inside the 16px
   frame, so subtract the frame inset too: (100vw−976)/2 − 24 − 16.
   Figma: x88 @≤1200, x208 @1440, x485 @1994. */
@media (min-width: 768px) {
  .pcs-hero__card { left: max(72px, calc((100vw - 976px) / 2 - 40px)); }
}

/* ── Section rhythm — intro/meta/footer use 64px; the main body sections
   (case study, model, beyond, testimonials, CTA) use 132px per the design. ── */
.pcs-section { padding: var(--gap-5xlarge) 0; } /* 64 */
.pcs-section--body { padding: 132px 0; }
.pcs-beyond { padding-bottom: 0; } /* emails is last; testimonials' 132 top gives the gap */

/* Full-bleed #171717 band (The Model), content re-constrained to the 976 column */
.pcs-model-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--color-bg-secondary); /* #171717 — non-interactive/background/secondary */
  padding: 132px 0;
}
.pcs-model-band__inner {
  width: min(976px, calc(100vw - 48px));
  margin: 0 auto;
}

.pcs-divider {
  height: 0;
  margin: 0;
  background: none;
  /* 1px line via the token (matches the Figma divider's #3A3A3A SVG stroke).
     color set too, so the <hr> default #808080 can never leak in. */
  border: none;
  border-top: var(--outline-small) solid var(--color-fg-quinary); /* non-interactive/foreground/quinary #282828 */
  color: var(--color-fg-quinary);
  opacity: 1;
}

/* Section eyebrow label */
.pcs-label {
  font-size: var(--font-size-label);     /* 12 */
  line-height: var(--line-height-label);  /* 14 */
  color: var(--color-fg-tertiary);        /* #999 */
  margin: 0 0 var(--gap-medium); /* 16 to content */
}

.pcs-h2 {
  font-size: var(--font-size-sub-headline);     /* 40 */
  line-height: var(--line-height-sub-headline);  /* 48 */
  font-weight: 500;
  color: var(--color-fg-primary); /* #ededed */
}

.pcs-body {
  font-size: var(--font-size-body);     /* 16 */
  line-height: var(--line-height-body);  /* 22 */
  color: var(--color-fg-tertiary);       /* #999 */
}

/* heading + body group, then 32px to the media below */
.pcs-block__text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium); /* 16 */
  margin-bottom: var(--gap-xlarge); /* 32 */
}

/* ── Intro / sub-title copy ── */
.pcs-intro {
  font-size: var(--font-size-subtitle);     /* 20 */
  line-height: var(--line-height-subtitle);  /* 28 */
  color: var(--color-fg-tertiary);
}

/* ── Meta strip ── */
.pcs-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-2xlarge); /* 40 */
}
.pcs-meta__col { display: flex; flex-direction: column; gap: var(--gap-small); /* 8 */ }
.pcs-meta .pcs-label { margin-bottom: 0; }
.pcs-meta__value {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 500; /* body/medium */
  color: var(--color-fg-primary);
}
.pcs-meta__chips { display: flex; flex-wrap: wrap; gap: var(--gap-small); }

/* ── Case-study body — 132px top/bottom padding + 132px between sub-sections ── */
.pcs-case {
  display: flex;
  flex-direction: column;
  gap: 132px;
  padding: 132px 0;
}

/* Challenge / Approach — two columns */
.pcs-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2xlarge); /* 40 */
}
.pcs-two .pcs-block__text { margin-bottom: 0; }

/* ── Grab / drag / wheel horizontal rows (product + emails) ── */
.pcs-drag {
  display: flex;
  gap: var(--gap-2xlarge); /* 40 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: max(var(--gap-large), calc((100vw - 976px) / 2)); /* first item at column-left */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* fade the right edge only — slide 1 stays crisp at the content margin */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent 100%);
}
.pcs-drag::-webkit-scrollbar { display: none; }
.pcs-drag.is-dragging { cursor: grabbing; }

/* Carousel item variants */
.pcs-product-card {
  width: 408px;
  height: auto;
  flex-shrink: 0;
  align-self: flex-start;
  border-radius: var(--radius-large); /* 16 */
}
.pcs-email {
  width: 416px;
  height: auto;
  flex-shrink: 0;
  align-self: flex-start;
  border-radius: var(--radius-large); /* 16 */
}
/* Free-scrolling drag (no snap) for a smooth feel; arrows advance one card. */
.pcs-drag--product { gap: var(--gap-large); }     /* 24 */
.pcs-drag--emails  { gap: var(--gap-2xlarge); }   /* 40 */

/* ── Carousel header (heading + intro left, arrow icon-buttons right) ── */
.pcs-carousel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-large);
  margin-bottom: var(--gap-xlarge); /* 32 — head → track */
}
.pcs-carousel__text { margin-bottom: 0; max-width: 768px; }
.pcs-carousel__arrows { display: flex; gap: var(--gap-medium); flex-shrink: 0; }

/* Arrow icon-button (Figma icon-button — frosted secondary, green glyph) */
.pcs-arrow {
  position: relative;
  width: var(--spacing-size-medium-large); height: var(--spacing-size-medium-large); /* 48 */
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-accent); /* #00d669 arrow */
  transition: opacity 0.15s ease;
}
.pcs-arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--button-secondary-bg, #3a3a3a);
  opacity: 0.24;
  border-top: var(--outline-small) solid #ededed;
  border-left: var(--outline-small) solid #ededed;
  transition: opacity 0.15s ease;
}
.pcs-arrow > svg { position: relative; }
.pcs-arrow:hover:not(:disabled)::before { opacity: 0.32; }
.pcs-arrow:disabled { color: var(--color-fg-tertiary); opacity: 0.32; cursor: default; }

/* ── Onboarding — static wizard image ── */
.pcs-onboarding {
  border-radius: var(--radius-large);
  overflow: hidden;
}
.pcs-onboarding img { width: 100%; height: auto; display: block; }

/* ── Loan flow — pinned phone + scroll-driven steps ── */
.pcs-loan { position: relative; /* height set inline */ }
/* Pin sized to the content (Frame 8632 = 740px), centered in the viewport.
   This way it enters exactly 32px below the text (block__text margin), then
   sticks centered — instead of centering inside a full 100vh (which pushed
   the block ~148px below the text). */
.pcs-loan__pin {
  --pin-h: min(740px, 84vh);
  position: sticky;
  top: max(var(--gap-large), calc((100vh - var(--pin-h)) / 2));
  height: var(--pin-h);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2xlarge); /* 40 */
  align-items: center;
}
.pcs-loan__steps {
  display: flex;
  flex-direction: column;
  gap: var(--gap-large); /* 24 */
}
.pcs-loan__phone {
  position: relative;
  height: 100%;
  width: 100%;
}
.pcs-loan__phone img {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translate(-50%, 12px) scale(0.98);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.pcs-loan__phone img.is-active {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* Loan flow — mobile / reduced-motion fallback (no pin) */
.pcs-loan-fallback { display: flex; flex-direction: column; gap: var(--gap-3xlarge); }
.pcs-loan-fallback__row { display: flex; flex-direction: column; gap: var(--gap-large); }
.pcs-loan-fallback__row img { width: 280px; max-width: 80%; height: auto; align-self: center; }

/* ── The model — four icon steps ── */
.pcs-model {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-2xlarge); /* 40 */
  padding: 0;
  margin: 0;
}
.pcs-model__step { display: flex; flex-direction: column; }
.pcs-model__icon {
  width: var(--spacing-size-3xlarge); height: var(--spacing-size-3xlarge); /* 80 */
  margin-bottom: var(--gap-2xlarge); /* 40 */
}
.pcs-model__num {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: var(--color-accent); /* #00d669 */
  margin-bottom: var(--gap-small); /* 8 */
}
.pcs-model__title {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 500; /* body/medium */
  color: var(--color-fg-primary);
  margin-bottom: var(--gap-small); /* 8 */
}
.pcs-model__desc {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-fg-tertiary);
}

/* ── Beyond the app — video + emails ── */
.pcs-video {
  width: 100%;
  aspect-ratio: 976 / 693;
  object-fit: cover;
  border-radius: var(--radius-large);
  display: block;
  margin-bottom: 132px; /* video → "Communication emails" block (Figma) */
}

/* ── Testimonials ── (heading → rows tightened to 32 per design update) ── */
.pcs-testimonials .pcs-h2 { margin-bottom: var(--gap-xlarge); /* 32 */ }

/* ── What I actually do ── */
.pcs-do { display: flex; flex-direction: column; gap: var(--gap-4xlarge); /* 56 */ }
.pcs-do__text { display: flex; flex-direction: column; gap: var(--gap-large); /* 24 */ }
.pcs-do__actions { display: flex; gap: var(--gap-large); /* 24 */ }

/* ── Responsive ── */
@media (max-width: 900px) {
  .pcs-model { grid-template-columns: repeat(2, 1fr); row-gap: var(--gap-3xlarge); }
}

@media (max-width: 768px) {
  .pcs-two { grid-template-columns: 1fr; gap: var(--gap-3xlarge); }
  .pcs-meta { grid-template-columns: repeat(2, 1fr); row-gap: var(--gap-2xlarge); }
  /* 132px is a desktop rhythm — tighten to 64 on mobile */
  .pcs-section--body,
  .pcs-model-band { padding: var(--gap-5xlarge) 0; }
  .pcs-beyond { padding-bottom: 0; }
  .pcs-video { margin-bottom: var(--gap-5xlarge); } /* 64 on mobile */
  .pcs-case { gap: var(--gap-5xlarge); padding: var(--gap-5xlarge) 0; } /* 64 */
  .pcs-h2 { font-size: 32px; line-height: 40px; }
  .pcs-product-card { width: 260px; }
  .pcs-email { width: 300px; }
  /* stack the carousel arrows under the heading on narrow screens */
  .pcs-carousel__head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .pcs-meta { grid-template-columns: 1fr; }
  .pcs-model { grid-template-columns: 1fr; }
  .pcs-do__actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .pcs-loan__phone img { transition: none; }
}
/* ─────────────────────────────────────────────
   Moonsense case study (Figma pg02Bcql… EdXnhD…)
   Bespoke layout; reuses design-system tokens + components.
───────────────────────────────────────────── */

.pcs { color: var(--color-fg-primary); }

/* Full-bleed helper values reused below via the 50vw trick. */

/* ── Hero — full-bleed #171717, frosted card bottom-left ── */
/* Full-bleed hero; the 16px padding shows the page bg around the framed image. */
.mcs-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 630px;
  padding: var(--gap-medium);
  box-sizing: border-box;
  background: var(--color-bg-primary); /* #060805 */
}
/* Inset image — rounded 24px (radius/xlarge), clips the tilted collage */
.mcs-hero__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xlarge); /* 24 */
  overflow: hidden;
  background: var(--color-bg-primary); /* #060805 — Figma hero Image has no fill */
}
/* App-screens collage: fixed size (consistent phone scale across breakpoints),
   left-anchored, rotated -15°, 32% opacity. Matches Figma 245:2900. */
.mcs-hero__bg {
  position: absolute;
  top: -848px;  /* Figma: Image-frame layer at x -252, y -848 */
  left: -252px;
  width: 2568px;
  height: 2608px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.32;
  pointer-events: none;
}
.mcs-hero__bg img {
  width: 2085px;
  height: 2141px;
  transform: rotate(-15deg);
  object-fit: cover;
  display: block;
}
/* Frosted card — bottom-left of the frame; reflows: fills width (title wraps to
   3 lines, meta to 2) on narrow, fixed 423px single-line from 768px up. */
.mcs-hero__card {
  position: absolute;
  z-index: 1;
  bottom: 48px;
  left: 16px;
  width: min(399px, calc(100% - 32px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--gap-large); /* 24 */
  padding: var(--gap-large); /* 24 */
  border-radius: var(--radius-large); /* 16 */
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.mcs-hero__logo { height: 24px; width: auto; align-self: flex-start; }
.mcs-hero__body { display: flex; flex-direction: column; gap: var(--gap-small); /* 8 */ }
.mcs-hero__title {
  font-size: var(--font-size-sub-headline);     /* 40 */
  line-height: var(--line-height-sub-headline);  /* 48 */
  font-weight: 500;
  color: var(--color-fg-primary);  /* #ededed */
}
.mcs-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-2xsmall) var(--gap-medium); /* 4 row (wrapped lines) · 16 column */
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: var(--color-fg-secondary); /* #d3d9d5 */
}
.mcs-hero__meta > span { white-space: nowrap; }
.mcs-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* From 768px up the card is a fixed 423px; its inner content (after the 24px
   padding) aligns to the 976px page content column, so past ~1200px it slides
   right with the viewport instead of staying pinned. Card is inside the 16px
   frame, so subtract the frame inset too: (100vw−976)/2 − 24 − 16.
   Figma: x88 @≤1200, x208 @1440, x485 @1994. */
@media (min-width: 768px) {
  .mcs-hero__card { left: max(72px, calc((100vw - 976px) / 2 - 40px)); }
}

/* ── Section rhythm — intro/meta/footer use 64px; the main body sections
   (case study, model, beyond, testimonials, CTA) use 132px per the design. ── */
.mcs-section { padding: var(--gap-5xlarge) 0; } /* 64 */
.mcs-section--body { padding: 132px 0; }
.mcs-beyond { padding-bottom: 0; } /* emails is last; testimonials' 132 top gives the gap */

/* Full-bleed #171717 band (The Model), content re-constrained to the 976 column */
.mcs-model-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--color-bg-secondary); /* #171717 — non-interactive/background/secondary */
  padding: 132px 0;
}
.mcs-model-band__inner {
  width: min(976px, calc(100vw - 48px));
  margin: 0 auto;
}

.mcs-divider {
  height: 0;
  margin: 0;
  background: none;
  /* 1px line via the token (matches the Figma divider's #3A3A3A SVG stroke).
     color set too, so the <hr> default #808080 can never leak in. */
  border: none;
  border-top: var(--outline-small) solid var(--color-fg-quinary); /* non-interactive/foreground/quinary #282828 */
  color: var(--color-fg-quinary);
  opacity: 1;
}

/* Section eyebrow label */
.mcs-label {
  font-size: var(--font-size-label);     /* 12 */
  line-height: var(--line-height-label);  /* 14 */
  color: var(--color-fg-tertiary);        /* #999 */
  margin: 0 0 var(--gap-medium); /* 16 to content */
}

.mcs-h2 {
  font-size: var(--font-size-sub-headline);     /* 40 */
  line-height: var(--line-height-sub-headline);  /* 48 */
  font-weight: 500;
  color: var(--color-fg-primary); /* #ededed */
}

.mcs-body {
  font-size: var(--font-size-body);     /* 16 */
  line-height: var(--line-height-body);  /* 22 */
  color: var(--color-fg-tertiary);       /* #999 */
}

/* heading + body group, then 32px to the media below */
.mcs-block__text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium); /* 16 */
  margin-bottom: var(--gap-xlarge); /* 32 */
}

/* ── Intro / sub-title copy ── */
.mcs-intro {
  font-size: var(--font-size-subtitle);     /* 20 */
  line-height: var(--line-height-subtitle);  /* 28 */
  color: var(--color-fg-tertiary);
}

/* ── Meta strip ── */
.mcs-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-2xlarge); /* 40 */
}
.mcs-meta__col { display: flex; flex-direction: column; gap: var(--gap-small); /* 8 */ }
.mcs-meta .mcs-label { margin-bottom: 0; }
.mcs-meta__value {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 500; /* body/medium */
  color: var(--color-fg-primary);
}
.mcs-meta__chips { display: flex; flex-wrap: wrap; gap: var(--gap-small); }

/* ── Case-study body — 132px top/bottom padding + 132px between sub-sections ── */
.mcs-case {
  display: flex;
  flex-direction: column;
  gap: 132px;
  padding: 132px 0;
}

/* Challenge / Approach — two columns */
.mcs-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2xlarge); /* 40 */
}
.mcs-two .mcs-block__text { margin-bottom: 0; }

/* ── Grab / drag / wheel horizontal rows (product + emails) ── */
.mcs-drag {
  display: flex;
  gap: var(--gap-2xlarge); /* 40 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: max(var(--gap-large), calc((100vw - 976px) / 2)); /* first item at column-left */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* fade the right edge only — slide 1 stays crisp at the content margin */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent 100%);
}
.mcs-drag::-webkit-scrollbar { display: none; }
.mcs-drag.is-dragging { cursor: grabbing; }

/* Carousel item variants */
.mcs-product-card {
  width: 408px;
  height: auto;
  flex-shrink: 0;
  align-self: flex-start;
  border-radius: var(--radius-large); /* 16 */
}
.mcs-email {
  width: 416px;
  height: auto;
  flex-shrink: 0;
  align-self: flex-start;
  border-radius: var(--radius-large); /* 16 */
}
/* Free-scrolling drag (no snap) for a smooth feel; arrows advance one card. */
.mcs-drag--product { gap: var(--gap-large); }     /* 24 */
.mcs-drag--emails  { gap: var(--gap-2xlarge); }   /* 40 */

/* ── Carousel header (heading + intro left, arrow icon-buttons right) ── */
.mcs-carousel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-large);
  margin-bottom: var(--gap-xlarge); /* 32 — head → track */
}
.mcs-carousel__text { margin-bottom: 0; max-width: 768px; }
.mcs-carousel__arrows { display: flex; gap: var(--gap-medium); flex-shrink: 0; }

/* Arrow icon-button (Figma icon-button — frosted secondary, green glyph) */
.mcs-arrow {
  position: relative;
  width: var(--spacing-size-medium-large); height: var(--spacing-size-medium-large); /* 48 */
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-accent); /* #00d669 arrow */
  transition: opacity 0.15s ease;
}
.mcs-arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--button-secondary-bg, #3a3a3a);
  opacity: 0.24;
  border-top: var(--outline-small) solid #ededed;
  border-left: var(--outline-small) solid #ededed;
  transition: opacity 0.15s ease;
}
.mcs-arrow > svg { position: relative; }
.mcs-arrow:hover:not(:disabled)::before { opacity: 0.32; }
.mcs-arrow:disabled { color: var(--color-fg-tertiary); opacity: 0.32; cursor: default; }

/* ── Onboarding — static wizard image ── */
.mcs-onboarding {
  border-radius: var(--radius-large);
  overflow: hidden;
}
.mcs-onboarding img { width: 100%; height: auto; display: block; }

/* ── Loan flow — pinned phone + scroll-driven steps ── */
.mcs-loan { position: relative; /* height set inline */ }
/* Pin sized to the content (Frame 8632 = 740px), centered in the viewport.
   This way it enters exactly 32px below the text (block__text margin), then
   sticks centered — instead of centering inside a full 100vh (which pushed
   the block ~148px below the text). */
.mcs-loan__pin {
  --pin-h: min(740px, 84vh);
  position: sticky;
  top: max(var(--gap-large), calc((100vh - var(--pin-h)) / 2));
  height: var(--pin-h);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2xlarge); /* 40 */
  align-items: center;
}
.mcs-loan__steps {
  display: flex;
  flex-direction: column;
  gap: var(--gap-large); /* 24 */
}
.mcs-loan__phone {
  position: relative;
  height: 100%;
  width: 100%;
}
.mcs-loan__phone img {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translate(-50%, 12px) scale(0.98);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.mcs-loan__phone img.is-active {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* Loan flow — mobile / reduced-motion fallback (no pin) */
.mcs-loan-fallback { display: flex; flex-direction: column; gap: var(--gap-3xlarge); }
.mcs-loan-fallback__row { display: flex; flex-direction: column; gap: var(--gap-large); }
.mcs-loan-fallback__row img { width: 280px; max-width: 80%; height: auto; align-self: center; }

/* ── The model — four icon steps ── */
.mcs-model {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-2xlarge); /* 40 */
  padding: 0;
  margin: 0;
}
.mcs-model__step { display: flex; flex-direction: column; }
.mcs-model__icon {
  width: 80px; height: 80px;
  margin-bottom: var(--gap-2xlarge); /* 40 */
}
.mcs-model__num {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: var(--color-accent); /* #00d669 */
  margin-bottom: var(--gap-small); /* 8 */
}
.mcs-model__title {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 500; /* body/medium */
  color: var(--color-fg-primary);
  margin-bottom: var(--gap-small); /* 8 */
}
.mcs-model__desc {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-fg-tertiary);
}

/* ── Beyond the app — video + emails ── */
.mcs-video {
  width: 100%;
  aspect-ratio: 976 / 693;
  object-fit: cover;
  border-radius: var(--radius-large);
  display: block;
  margin-bottom: 132px; /* video → "Communication emails" block (Figma) */
}

/* ── Testimonials ── (heading → rows tightened to 32 per design update) ── */
.mcs-testimonials .mcs-h2 { margin-bottom: var(--gap-xlarge); /* 32 */ }

/* ── What I actually do ── */
.mcs-do { display: flex; flex-direction: column; gap: var(--gap-4xlarge); /* 56 */ }
.mcs-do__text { display: flex; flex-direction: column; gap: var(--gap-large); /* 24 */ }
.mcs-do__actions { display: flex; gap: var(--gap-large); /* 24 */ }

/* ── Responsive ── */
@media (max-width: 900px) {
  .mcs-model { grid-template-columns: repeat(2, 1fr); row-gap: var(--gap-3xlarge); }
}

@media (max-width: 768px) {
  .mcs-two { grid-template-columns: 1fr; gap: var(--gap-3xlarge); }
  .mcs-meta { grid-template-columns: repeat(2, 1fr); row-gap: var(--gap-2xlarge); }
  /* 132px is a desktop rhythm — tighten to 64 on mobile */
  .mcs-section--body,
  .mcs-model-band { padding: var(--gap-5xlarge) 0; }
  .mcs-beyond { padding-bottom: 0; }
  .mcs-video { margin-bottom: var(--gap-5xlarge); } /* 64 on mobile */
  .mcs-case { gap: var(--gap-5xlarge); padding: var(--gap-5xlarge) 0; } /* 64 */
  .mcs-h2 { font-size: 32px; line-height: 40px; }
  .mcs-product-card { width: 260px; }
  .mcs-email { width: 300px; }
  /* stack the carousel arrows under the heading on narrow screens */
  .mcs-carousel__head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .mcs-meta { grid-template-columns: 1fr; }
  .mcs-model { grid-template-columns: 1fr; }
  .mcs-do__actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .mcs-loan__phone img { transition: none; }
}

/* ══════════════════════════════════════════════════════
   Moonsense-specific additions & overrides
   ══════════════════════════════════════════════════════ */

/* ── Hero collage — Figma 245:4407: bounding box at (-329, -1163),
      image 2048×2478 rotated -15° (rotation pre-baked into the asset),
      56% opacity.
      Parallax: background-attachment fixed pins the artwork to the viewport
      on the compositor (no JS lag) while the frame clips it — backgrounds
      can never escape the element, unlike position:fixed children. ── */
.mcs-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/work/moonsense/hero-collage-tilted.webp');
  background-attachment: fixed;
  background-repeat: no-repeat;
  /* viewport coordinates: frame offsets (-329,-1163) + 16px page inset */
  background-position: -313px -1147px;
  background-size: 2619.614px 2923.791px;
  opacity: 0.56;
  pointer-events: none;
}
/* Touch devices ignore fixed attachment; reduced motion opts out — both get
   the static composition, anchored to the frame instead of the viewport */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .mcs-hero__bg {
    background-attachment: scroll;
    background-position: -329px -1163px;
  }
}

/* Moonsense logo in the hero card */
.mcs-hero__wordmark {
  display: block;
  width: 130px;
  height: 32px;
  align-self: flex-start;
}

/* ── Recorder phones — 375×812 frames, 32px gap (Figma track) ── */
.mcs-phone-card {
  width: 375px;
  height: auto;
  flex-shrink: 0;
  align-self: flex-start;
  border-radius: var(--radius-2xlarge); /* Figma frame cornerRadius (radius/2xlarge) */
}
.mcs-drag--phone { gap: var(--gap-xlarge); } /* 32 */

/* ── Full-card paging deck (Website / UI Guide) — 976×708 slides ── */
.mcs-deck { position: relative; }
.mcs-deck__track {
  /* neutralise the full-bleed .mcs-drag defaults — deck lives in the column */
  width: 100%;
  margin-left: 0;
  padding-inline: 0;
  -webkit-mask-image: none;
          mask-image: none;
  gap: var(--gap-medium); /* 16 seam while dragging */
  border-radius: var(--radius-xlarge); /* 24 */
  scroll-snap-type: x mandatory;
}
.mcs-deck-card {
  width: 100%;
  height: auto;
  aspect-ratio: 976 / 708;
  flex-shrink: 0;
  scroll-snap-align: start;
  border-radius: var(--radius-xlarge); /* 24 */
  display: block;
  background: var(--color-bg-secondary);
}

.mcs-deck--light .mcs-deck-card { background: #ededed; }

/* ── Website — hero-style full-bleed card (Figma 272:36006) ── */
.mcs-website {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--gap-medium);
  box-sizing: border-box;
  background: var(--color-bg-primary);
}
.mcs-website__frame {
  position: relative;
  height: 847px;
  border-radius: var(--radius-xlarge); /* 24 */
  overflow: hidden;
  background: var(--color-bg-primary);
}
.mcs-website__track {
  position: absolute;
  inset: 0;
  width: 100%;
  margin-left: 0;
  padding-inline: 0;
  -webkit-mask-image: none;
          mask-image: none;
  gap: var(--gap-medium); /* 16 */
  scroll-snap-type: x mandatory;
}
.mcs-website__slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  scroll-snap-align: start;
  overflow: hidden;
}
/* Fixed-size slide art, left-anchored — the frame crops/reveals it exactly
   like the hero collage (no scaling). Exported at 1962×847 to cover the
   widest hero breakpoint (1994). */
.mcs-website__slide img {
  width: 1962px;
  height: 847px;
  max-width: none;
  display: block;
}

/* Frosted text island — positioned like the hero card (column-aligned) */
.mcs-island {
  position: absolute;
  left: 16px;
  bottom: 32px;
  width: min(440px, calc(100% - 32px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--gap-large); /* 24 */
  padding: var(--gap-large); /* 24 */
  border-radius: var(--radius-large); /* 16 */
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.mcs-island__text { display: flex; flex-direction: column; gap: var(--gap-small); /* 8 */ }
.mcs-island__title {
  font-size: var(--font-size-sub-headline);     /* 40 */
  line-height: var(--line-height-sub-headline);  /* 48 */
  font-weight: 500;
  color: var(--color-fg-primary);
}
/* Same column tracking as .mcs-hero__card: island inner content aligns to the
   976 column; frame is inset 16, so (100vw−976)/2 − 24 − 16 */
@media (min-width: 768px) {
  .mcs-island { left: max(72px, calc((100vw - 976px) / 2 - 40px)); }
}

/* ── Band (Console / Beyond) — 976×708 box, 24 radius. Horizontal padding
   lives on the track so the next slide peeks a few pixels into the 24px
   ring (Figma: card 928 + gap 16 inside the 976 box → 8px sliver). ── */
.mcs-band {
  position: relative;
  border-radius: var(--radius-xlarge); /* 24 */
  padding: var(--gap-large) 0; /* 24 vertical */
  overflow: hidden;
}
.mcs-band--console { background: var(--color-bg-primary); }   /* #060805 */
.mcs-band--beyond  { background: var(--color-bg-secondary); } /* #171717 */
.mcs-band__track {
  /* column-scoped drag track inside the band */
  width: 100%;
  margin-left: 0;
  box-sizing: border-box;
  -webkit-mask-image: none;
          mask-image: none;
  scroll-snap-type: x mandatory;
}
.mcs-band__track--desktop {
  gap: var(--gap-medium); /* 16 (Figma 944−928) */
  padding-inline: var(--gap-large); /* 24 — next card peeks 8px into the ring */
  scroll-padding-left: var(--gap-large);
}
/* Mobile — one centered screen; neighbours peek ~8px each side (Figma
   WIZARD FLOW SCREENS Mobile: card 305 centered, next at +632) */
.mcs-band__track--mobile {
  gap: 327px;
  padding-inline: calc((100% - 305px) / 2);
}
.mcs-band-card {
  height: auto;
  flex-shrink: 0;
  align-self: flex-start;
  scroll-snap-align: start;
  display: block;
}
.mcs-band-card--desktop { width: 100%; }   /* fills the padded content box (928) */
.mcs-band-card--mobile  { width: 305px; scroll-snap-align: center; }

/* Desktop/mobile switch — bottom-center pill (Figma 262:3459) */
.mcs-switch {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--gap-2xsmall); /* 4 */
  padding: var(--gap-small); /* 8 */
  background: var(--color-bg-primary); /* #060805 */
}
/* the active side gets the rounder corners */
.mcs-switch--desktop { border-radius: var(--radius-2xlarge) var(--radius-large) var(--radius-large) var(--radius-2xlarge); }
.mcs-switch--mobile  { border-radius: var(--radius-large) var(--radius-2xlarge) var(--radius-2xlarge) var(--radius-large); }
.mcs-switch__btn {
  position: relative;
  width: var(--spacing-size-medium);  /* 40 */
  height: var(--spacing-size-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-medium); /* 12 */
  background: none;
  color: var(--color-accent); /* inactive icon is green per Figma */
  cursor: pointer;
  transition: color 0.15s ease;
}
.mcs-switch__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--button-secondary-bg, #3a3a3a);
  opacity: 0.24;
  border-top: var(--outline-small) solid #ededed;
  border-left: var(--outline-small) solid #ededed;
  transition: opacity 0.15s ease;
}
.mcs-switch__btn > svg { position: relative; }
.mcs-switch__btn:hover:not(.is-active)::before { opacity: 0.32; }
.mcs-switch__btn.is-active {
  border-radius: var(--radius-full);
  color: #3a3a3a; /* Figma: dark glyph on the green active toggle */
  cursor: default;
}
.mcs-switch__btn.is-active::before {
  background: var(--color-accent);
  opacity: 1;
  border-color: rgba(237, 237, 237, 0.64);
}

/* ── Recording journey — text left, phone video right ── */
.mcs-journey {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-medium); /* 16 */
  align-items: center;
}
.mcs-journey .mcs-block__text { margin-bottom: 0; }
.mcs-journey__media { display: flex; justify-content: center; }
.mcs-journey__video {
  width: 362px;
  max-width: 80%;
  aspect-ratio: 362 / 720;
  height: auto;
  object-fit: cover;
  display: block;
  /* the recordings carry a dark letterbox around the device chrome — mask it
     with a radius tangential to the phone's corner contour (~60px @ 360w) */
  border-radius: 60px;
}

/* Chapter break — Figma wraps sections in 132-padded chunks, so the gap
   between chapters is 132 (case gap) + 132 (chunk padding) */
.mcs-block--break { margin-top: 132px; }

/* ── Console chapter — full-bleed #171717 band (Figma 245:4505,
      non-interactive/background/secondary) holding the Console app
      section and its recording journey ── */
.mcs-chapter {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
  background: var(--color-bg-secondary); /* #171717 */
  padding: 132px max(var(--gap-large), calc((100vw - 976px) / 2));
  display: flex;
  flex-direction: column;
  gap: 132px;
}

/* ── Outcomes — 6 scope facts, 3×2 ── */
.mcs-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-2xlarge); /* 40 */
}
.mcs-metric { display: flex; flex-direction: column; gap: var(--gap-small); }
.mcs-metric__value {
  font-size: var(--font-size-sub-headline);     /* 40 */
  line-height: var(--line-height-sub-headline);  /* 48 */
  font-weight: 500;
  color: var(--color-fg-primary);
}
.mcs-metric__label {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-fg-tertiary);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .mcs-phone-card { width: 300px; }
  .mcs-island__title { font-size: 24px; line-height: 32px; }
  .mcs-band { padding: var(--gap-medium); }
  .mcs-band-card--mobile { width: 240px; }
  .mcs-switch { bottom: 24px; }
  .mcs-journey { grid-template-columns: 1fr; gap: var(--gap-xlarge); }
  .mcs-block--break { margin-top: var(--gap-5xlarge); }
  .mcs-chapter { padding-top: var(--gap-5xlarge); padding-bottom: var(--gap-5xlarge); gap: var(--gap-5xlarge); }
  .mcs-outcomes__grid { grid-template-columns: 1fr; gap: var(--gap-3xlarge); }
}
/* ─────────────────────────────────────────────
   Moonsense case study (Figma pg02Bcql… EdXnhD…)
   Bespoke layout; reuses design-system tokens + components.
───────────────────────────────────────────── */

.pcs { color: var(--color-fg-primary); }

/* Full-bleed helper values reused below via the 50vw trick. */

/* ── Hero — full-bleed #171717, frosted card bottom-left ── */
/* Full-bleed hero; the 16px padding shows the page bg around the framed image. */
.bcs-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 630px;
  padding: var(--gap-medium);
  box-sizing: border-box;
  background: var(--color-bg-primary); /* #060805 */
}
/* Inset image — rounded 24px (radius/xlarge), clips the tilted collage.
   clip-path (not just overflow) so the position:fixed parallax bg below is
   clipped to the frame while staying anchored to the viewport. */
.bcs-hero__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xlarge); /* 24 */
  overflow: hidden;
  clip-path: inset(0 round var(--radius-xlarge));
  background: var(--color-bg-primary); /* #060805 — Figma hero Image has no fill */
}
/* App-screens collage: fixed size (consistent phone scale across breakpoints),
   left-anchored, rotated -15°, 32% opacity. Matches Figma 245:2900. */
.bcs-hero__bg {
  position: absolute;
  top: -848px;  /* Figma: Image-frame layer at x -252, y -848 */
  left: -252px;
  width: 2568px;
  height: 2608px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.32;
  pointer-events: none;
}
.bcs-hero__bg img {
  width: 2085px;
  height: 2141px;
  transform: rotate(-15deg);
  object-fit: cover;
  display: block;
}
/* Frosted card — bottom-left of the frame; reflows: fills width (title wraps to
   3 lines, meta to 2) on narrow, fixed 423px single-line from 768px up. */
.bcs-hero__card {
  position: absolute;
  z-index: 1;
  bottom: 48px;
  left: 16px;
  width: min(399px, calc(100% - 32px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--gap-large); /* 24 */
  padding: var(--gap-large); /* 24 */
  border-radius: var(--radius-large); /* 16 */
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.bcs-hero__logo { height: 24px; width: auto; align-self: flex-start; }
.bcs-hero__body { display: flex; flex-direction: column; gap: var(--gap-small); /* 8 */ }
.bcs-hero__title {
  font-size: var(--font-size-sub-headline);     /* 40 */
  line-height: var(--line-height-sub-headline);  /* 48 */
  font-weight: 500;
  color: var(--color-fg-primary);  /* #ededed */
}
.bcs-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-2xsmall) var(--gap-medium); /* 4 row (wrapped lines) · 16 column */
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: var(--color-fg-secondary); /* #d3d9d5 */
}
.bcs-hero__meta > span { white-space: nowrap; }
.bcs-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* From 768px up the card is a fixed 423px; its inner content (after the 24px
   padding) aligns to the 976px page content column, so past ~1200px it slides
   right with the viewport instead of staying pinned. Card is inside the 16px
   frame, so subtract the frame inset too: (100vw−976)/2 − 24 − 16.
   Figma: x88 @≤1200, x208 @1440, x485 @1994. */
@media (min-width: 768px) {
  .bcs-hero__card { left: max(72px, calc((100vw - 976px) / 2 - 40px)); }
}

/* ── Section rhythm — intro/meta/footer use 64px; the main body sections
   (case study, model, beyond, testimonials, CTA) use 132px per the design. ── */
.bcs-section { padding: var(--gap-5xlarge) 0; } /* 64 */
.bcs-section--body { padding: 132px 0; }
.bcs-beyond { padding-bottom: 0; } /* emails is last; testimonials' 132 top gives the gap */

/* Full-bleed #171717 band (The Model), content re-constrained to the 976 column */
.bcs-model-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--color-bg-secondary); /* #171717 — non-interactive/background/secondary */
  padding: 132px 0;
}
.bcs-model-band__inner {
  width: min(976px, calc(100vw - 48px));
  margin: 0 auto;
}

.bcs-divider {
  height: 0;
  margin: 0;
  background: none;
  /* 1px line via the token (matches the Figma divider's #3A3A3A SVG stroke).
     color set too, so the <hr> default #808080 can never leak in. */
  border: none;
  border-top: var(--outline-small) solid var(--color-fg-quinary); /* non-interactive/foreground/quinary #282828 */
  color: var(--color-fg-quinary);
  opacity: 1;
}

/* Section eyebrow label */
.bcs-label {
  font-size: var(--font-size-label);     /* 12 */
  line-height: var(--line-height-label);  /* 14 */
  color: var(--color-fg-tertiary);        /* #999 */
  margin: 0 0 var(--gap-medium); /* 16 to content */
}

.bcs-h2 {
  font-size: var(--font-size-sub-headline);     /* 40 */
  line-height: var(--line-height-sub-headline);  /* 48 */
  font-weight: 500;
  color: var(--color-fg-primary); /* #ededed */
}

.bcs-body {
  font-size: var(--font-size-body);     /* 16 */
  line-height: var(--line-height-body);  /* 22 */
  color: var(--color-fg-tertiary);       /* #999 */
}

/* heading + body group, then 32px to the media below */
.bcs-block__text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium); /* 16 */
  margin-bottom: var(--gap-xlarge); /* 32 */
}

/* ── Intro / sub-title copy ── */
.bcs-intro {
  font-size: var(--font-size-subtitle);     /* 20 */
  line-height: var(--line-height-subtitle);  /* 28 */
  color: var(--color-fg-tertiary);
}

/* ── Meta strip ── */
.bcs-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-2xlarge); /* 40 */
}
.bcs-meta__col { display: flex; flex-direction: column; gap: var(--gap-small); /* 8 */ }
.bcs-meta .bcs-label { margin-bottom: 0; }
.bcs-meta__value {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 500; /* body/medium */
  color: var(--color-fg-primary);
}
.bcs-meta__chips { display: flex; flex-wrap: wrap; gap: var(--gap-small); }

/* ── Case-study body — 132px top/bottom padding + 132px between sub-sections ── */
.bcs-case {
  display: flex;
  flex-direction: column;
  gap: 132px;
  padding: 132px 0;
}

/* Challenge / Approach — two columns */
.bcs-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2xlarge); /* 40 */
}
.bcs-two .bcs-block__text { margin-bottom: 0; }

/* ── Grab / drag / wheel horizontal rows (product + emails) ── */
.bcs-drag {
  display: flex;
  gap: var(--gap-2xlarge); /* 40 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: max(var(--gap-large), calc((100vw - 976px) / 2)); /* first item at column-left */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* fade the right edge only — slide 1 stays crisp at the content margin */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent 100%);
}
.bcs-drag::-webkit-scrollbar { display: none; }
.bcs-drag.is-dragging { cursor: grabbing; }

/* Carousel item variants */
.bcs-product-card {
  width: 408px;
  height: auto;
  flex-shrink: 0;
  align-self: flex-start;
  border-radius: var(--radius-large); /* 16 */
}
.bcs-email {
  width: 416px;
  height: auto;
  flex-shrink: 0;
  align-self: flex-start;
  border-radius: var(--radius-large); /* 16 */
}
/* Free-scrolling drag (no snap) for a smooth feel; arrows advance one card. */
.bcs-drag--product { gap: var(--gap-large); }     /* 24 */
.bcs-drag--emails  { gap: var(--gap-2xlarge); }   /* 40 */

/* ── Carousel header (heading + intro left, arrow icon-buttons right) ── */
.bcs-carousel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-large);
  margin-bottom: var(--gap-xlarge); /* 32 — head → track */
}
.bcs-carousel__text { margin-bottom: 0; max-width: 768px; }
.bcs-carousel__arrows { display: flex; gap: var(--gap-medium); flex-shrink: 0; }

/* Arrow icon-button (Figma icon-button — frosted secondary, green glyph) */
.bcs-arrow {
  position: relative;
  width: var(--spacing-size-medium-large); height: var(--spacing-size-medium-large); /* 48 */
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-accent); /* #00d669 arrow */
  transition: opacity 0.15s ease;
}
.bcs-arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--button-secondary-bg, #3a3a3a);
  opacity: 0.24;
  border-top: var(--outline-small) solid #ededed;
  border-left: var(--outline-small) solid #ededed;
  transition: opacity 0.15s ease;
}
.bcs-arrow > svg { position: relative; }
.bcs-arrow:hover:not(:disabled)::before { opacity: 0.32; }
.bcs-arrow:disabled { color: var(--color-fg-tertiary); opacity: 0.32; cursor: default; }

/* ── Onboarding — static wizard image ── */
.bcs-onboarding {
  border-radius: var(--radius-large);
  overflow: hidden;
}
.bcs-onboarding img { width: 100%; height: auto; display: block; }

/* ── Loan flow — pinned phone + scroll-driven steps ── */
.bcs-loan { position: relative; /* height set inline */ }
/* Pin sized to the content (Frame 8632 = 740px), centered in the viewport.
   This way it enters exactly 32px below the text (block__text margin), then
   sticks centered — instead of centering inside a full 100vh (which pushed
   the block ~148px below the text). */
.bcs-loan__pin {
  --pin-h: min(740px, 84vh);
  position: sticky;
  top: max(var(--gap-large), calc((100vh - var(--pin-h)) / 2));
  height: var(--pin-h);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2xlarge); /* 40 */
  align-items: center;
}
.bcs-loan__steps {
  display: flex;
  flex-direction: column;
  gap: var(--gap-large); /* 24 */
}
.bcs-loan__phone {
  position: relative;
  height: 100%;
  width: 100%;
}
.bcs-loan__phone img {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translate(-50%, 12px) scale(0.98);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.bcs-loan__phone img.is-active {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* Loan flow — mobile / reduced-motion fallback (no pin) */
.bcs-loan-fallback { display: flex; flex-direction: column; gap: var(--gap-3xlarge); }
.bcs-loan-fallback__row { display: flex; flex-direction: column; gap: var(--gap-large); }
.bcs-loan-fallback__row img { width: 280px; max-width: 80%; height: auto; align-self: center; }

/* ── The model — four icon steps ── */
.bcs-model {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-2xlarge); /* 40 */
  padding: 0;
  margin: 0;
}
.bcs-model__step { display: flex; flex-direction: column; }
.bcs-model__icon {
  width: 80px; height: 80px;
  margin-bottom: var(--gap-2xlarge); /* 40 */
}
.bcs-model__num {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: var(--color-accent); /* #00d669 */
  margin-bottom: var(--gap-small); /* 8 */
}
.bcs-model__title {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 500; /* body/medium */
  color: var(--color-fg-primary);
  margin-bottom: var(--gap-small); /* 8 */
}
.bcs-model__desc {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-fg-tertiary);
}

/* ── Beyond the app — video + emails ── */
.bcs-video {
  width: 100%;
  aspect-ratio: 976 / 693;
  object-fit: cover;
  border-radius: var(--radius-large);
  display: block;
  margin-bottom: 132px; /* video → "Communication emails" block (Figma) */
}

/* ── Testimonials ── (heading → rows tightened to 32 per design update) ── */
.bcs-testimonials .bcs-h2 { margin-bottom: var(--gap-xlarge); /* 32 */ }

/* ── What I actually do ── */
.bcs-do { display: flex; flex-direction: column; gap: var(--gap-4xlarge); /* 56 */ }
.bcs-do__text { display: flex; flex-direction: column; gap: var(--gap-large); /* 24 */ }
.bcs-do__actions { display: flex; gap: var(--gap-large); /* 24 */ }

/* ── Responsive ── */
@media (max-width: 900px) {
  .bcs-model { grid-template-columns: repeat(2, 1fr); row-gap: var(--gap-3xlarge); }
}

@media (max-width: 768px) {
  .bcs-two { grid-template-columns: 1fr; gap: var(--gap-3xlarge); }
  .bcs-meta { grid-template-columns: repeat(2, 1fr); row-gap: var(--gap-2xlarge); }
  /* 132px is a desktop rhythm — tighten to 64 on mobile */
  .bcs-section--body,
  .bcs-model-band { padding: var(--gap-5xlarge) 0; }
  .bcs-beyond { padding-bottom: 0; }
  .bcs-video { margin-bottom: var(--gap-5xlarge); } /* 64 on mobile */
  .bcs-case { gap: var(--gap-5xlarge); padding: var(--gap-5xlarge) 0; } /* 64 */
  .bcs-h2 { font-size: 32px; line-height: 40px; }
  .bcs-product-card { width: 260px; }
  .bcs-email { width: 300px; }
  /* stack the carousel arrows under the heading on narrow screens */
  .bcs-carousel__head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .bcs-meta { grid-template-columns: 1fr; }
  .bcs-model { grid-template-columns: 1fr; }
  .bcs-do__actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .bcs-loan__phone img { transition: none; }
  /* no parallax — pin the collage back inside the frame */
  .bcs-hero__bg { position: absolute; top: -1163px; left: -329px; }
}

/* ══════════════════════════════════════════════════════
   Moonsense-specific additions & overrides
   ══════════════════════════════════════════════════════ */

/* ── Hero collage — Figma 245:4407: bounding box at (-329, -1163),
      image 2048×2478 rotated -15°, 56% opacity.
      Parallax: fixed to the viewport (frame offsets +16 baked in) and clipped
      by the frame's clip-path, so the island + page scroll over it. ── */
.bcs-hero__bg {
  position: fixed;
  top: -1147px;  /* -1163 + 16 frame inset */
  left: -313px;  /* -329 + 16 frame inset */
  width: 2619.614px;
  height: 2923.791px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: none;
}
.bcs-hero__bg img {
  width: 2048px;
  height: 2478.171px;
  transform: rotate(-15deg);
  object-fit: cover;
  display: block;
  opacity: 0.56;
}

/* Moonsense logo in the hero card */
.bcs-hero__wordmark {
  display: block;
  width: 150px;
  height: auto;
  align-self: flex-start;
}

/* ── Recorder phones — 375×812 frames, 32px gap (Figma track) ── */
.bcs-phone-card {
  width: 375px;
  height: auto;
  flex-shrink: 0;
  align-self: flex-start;
  border-radius: var(--radius-2xlarge); /* Figma frame cornerRadius (radius/2xlarge) */
}
.bcs-drag--phone { gap: var(--gap-xlarge); } /* 32 */

/* ── Full-card paging deck (Website / UI Guide) — 976×708 slides ── */
.bcs-deck { position: relative; }
.bcs-deck__track {
  /* neutralise the full-bleed .bcs-drag defaults — deck lives in the column */
  width: 100%;
  margin-left: 0;
  padding-inline: 0;
  -webkit-mask-image: none;
          mask-image: none;
  gap: var(--gap-medium); /* 16 seam while dragging */
  border-radius: var(--radius-xlarge); /* 24 */
  scroll-snap-type: x mandatory;
}
.bcs-deck-card {
  width: 100%;
  aspect-ratio: 976 / 708;
  flex-shrink: 0;
  scroll-snap-align: start;
  border-radius: var(--radius-xlarge); /* 24 */
  /* Card is the Figma "WIZARD FLOW SCREENS" frame: #ededed, clips its slides */
  position: relative;
  overflow: hidden;
  background: #ededed;
}
/* Each slide sits at natural scale at its Figma (x,y) offset — placement comes
   from inline styles (left/top/width/height as % of the 976×708 card). */
.bcs-deck-card img {
  position: absolute;
  display: block;
}

.bcs-deck--light .bcs-deck-card { background: #ededed; }

/* ── Website — hero-style full-bleed card (Figma 272:36006) ── */
.bcs-website {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--gap-medium);
  box-sizing: border-box;
  background: var(--color-bg-primary);
}
.bcs-website__frame {
  position: relative;
  height: 847px;
  border-radius: var(--radius-xlarge); /* 24 */
  overflow: hidden;
  background: var(--color-bg-primary);
}
.bcs-website__track {
  position: absolute;
  inset: 0;
  width: 100%;
  margin-left: 0;
  padding-inline: 0;
  -webkit-mask-image: none;
          mask-image: none;
  gap: var(--gap-medium); /* 16 */
  scroll-snap-type: x mandatory;
}
.bcs-website__slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  scroll-snap-align: start;
  overflow: hidden;
}
/* Fixed-size slide art, left-anchored — the frame crops/reveals it exactly
   like the hero collage (no scaling). Exported at 1962×847 to cover the
   widest hero breakpoint (1994). */
.bcs-website__slide img {
  width: 1962px;
  height: 847px;
  max-width: none;
  display: block;
}

/* Frosted text island — positioned like the hero card (column-aligned) */
.bcs-island {
  position: absolute;
  left: 16px;
  bottom: 32px;
  width: min(440px, calc(100% - 32px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--gap-large); /* 24 */
  padding: var(--gap-large); /* 24 */
  border-radius: var(--radius-large); /* 16 */
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.bcs-island__text { display: flex; flex-direction: column; gap: var(--gap-small); /* 8 */ }
.bcs-island__title {
  font-size: var(--font-size-sub-headline);     /* 40 */
  line-height: var(--line-height-sub-headline);  /* 48 */
  font-weight: 500;
  color: var(--color-fg-primary);
}
/* Same column tracking as .bcs-hero__card: island inner content aligns to the
   976 column; frame is inset 16, so (100vw−976)/2 − 24 − 16 */
@media (min-width: 768px) {
  .bcs-island { left: max(72px, calc((100vw - 976px) / 2 - 40px)); }
}

/* ── Band (Console / Beyond) — 976×708 box, 24 radius. Horizontal padding
   lives on the track so the next slide peeks a few pixels into the 24px
   ring (Figma: card 928 + gap 16 inside the 976 box → 8px sliver). ── */
.bcs-band {
  position: relative;
  border-radius: var(--radius-xlarge); /* 24 */
  padding: var(--gap-large) 0; /* 24 vertical */
  overflow: hidden;
}
.bcs-band--console { background: var(--color-bg-secondary); } /* #171717 — gray panel behind the screens (Figma) */
.bcs-band--beyond  { background: var(--color-bg-secondary); } /* #171717 */
.bcs-band__track {
  /* column-scoped drag track inside the band */
  width: 100%;
  margin-left: 0;
  box-sizing: border-box;
  -webkit-mask-image: none;
          mask-image: none;
  scroll-snap-type: x mandatory;
}
.bcs-band__track--desktop {
  gap: var(--gap-medium); /* 16 (Figma 944−928) */
  padding-inline: var(--gap-large); /* 24 — next card peeks 8px into the ring */
  scroll-padding-left: var(--gap-large);
}
/* Mobile — one centered screen; neighbours peek ~8px each side (Figma
   WIZARD FLOW SCREENS Mobile: card 305 centered, next at +632) */
.bcs-band__track--mobile {
  gap: 327px;
  padding-inline: calc((100% - 305px) / 2);
}
.bcs-band-card {
  height: auto;
  flex-shrink: 0;
  align-self: flex-start;
  scroll-snap-align: start;
  display: block;
}
.bcs-band-card--desktop { width: 100%; }   /* fills the padded content box (928) */
.bcs-band-card--mobile  { width: 305px; scroll-snap-align: center; }

/* Desktop/mobile switch — bottom-center pill (Figma 262:3459) */
.bcs-switch {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--gap-2xsmall); /* 4 */
  padding: var(--gap-small); /* 8 */
  background: var(--color-bg-primary); /* #060805 */
}
/* the active side gets the rounder corners */
.bcs-switch--desktop { border-radius: var(--radius-2xlarge) var(--radius-large) var(--radius-large) var(--radius-2xlarge); }
.bcs-switch--mobile  { border-radius: var(--radius-large) var(--radius-2xlarge) var(--radius-2xlarge) var(--radius-large); }
.bcs-switch__btn {
  position: relative;
  width: var(--spacing-size-medium);  /* 40 */
  height: var(--spacing-size-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-medium); /* 12 */
  background: none;
  color: var(--color-accent); /* inactive icon is green per Figma */
  cursor: pointer;
  transition: color 0.15s ease;
}
.bcs-switch__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--button-secondary-bg, #3a3a3a);
  opacity: 0.24;
  border-top: var(--outline-small) solid #ededed;
  border-left: var(--outline-small) solid #ededed;
  transition: opacity 0.15s ease;
}
.bcs-switch__btn > svg { position: relative; }
.bcs-switch__btn:hover:not(.is-active)::before { opacity: 0.32; }
.bcs-switch__btn.is-active {
  border-radius: var(--radius-full);
  color: #3a3a3a; /* Figma: dark glyph on the green active toggle */
  cursor: default;
}
.bcs-switch__btn.is-active::before {
  background: var(--color-accent);
  opacity: 1;
  border-color: rgba(237, 237, 237, 0.64);
}

/* ── Recording journey — text left, phone video right ── */
.bcs-journey {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-medium); /* 16 */
  align-items: center;
}
.bcs-journey .bcs-block__text { margin-bottom: 0; }
.bcs-journey__media { display: flex; justify-content: center; }
/* Unlike the Moonsense recordings (which sit in a black letterbox and get
   masked with a radius), this one is cropped tight to the device: the phone
   touches the frame edges and its rounded corners are already baked in over a
   page-coloured background. So: match the file's native 352×720 exactly — a
   362 box made `cover` scale up and clip the phone's top/bottom — and use no
   radius, which would slice the phone's own corners off. */
.bcs-journey__video {
  width: 352px;
  max-width: 80%;
  aspect-ratio: 352 / 720;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Chapter break — Figma wraps sections in 132-padded chunks, so the gap
   between chapters is 132 (case gap) + 132 (chunk padding) */
.bcs-block--break { margin-top: 132px; }

/* ── Console chapter — full-bleed #171717 band (Figma 245:4505,
      non-interactive/background/secondary) holding the Console app
      section and its recording journey ── */
.bcs-chapter {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
  background: var(--color-bg-secondary); /* #171717 */
  padding: 132px max(var(--gap-large), calc((100vw - 976px) / 2));
  display: flex;
  flex-direction: column;
  gap: 132px;
}

/* ── Outcomes — 4 scope facts, 2×2 (Figma 356:19991) ── */
.bcs-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-2xlarge); /* 40 */
}
.bcs-metric { display: flex; flex-direction: column; gap: var(--gap-small); }
.bcs-metric__value {
  font-size: var(--font-size-sub-headline);     /* 40 */
  line-height: var(--line-height-sub-headline);  /* 48 */
  font-weight: 500;
  color: var(--color-fg-primary);
}
.bcs-metric__label {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-fg-tertiary);
}

/* ── Images band — photo + mobile row, then a wide desktop row.
   Each row is a 976×531 window that clips its content (Figma 367:28608). ── */
.bcs-images {
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium); /* 16 between rows */
}
.bcs-images__row {
  display: flex;
  gap: var(--gap-medium); /* 16 */
  height: 531px;
}
/* Row 1: photo (320) + mobile screen (fills the rest) */
.bcs-images__photo {
  width: 320px;
  height: 100%;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-large); /* 16 */
  display: block;
}
.bcs-images__mobile {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  object-position: left top; /* top-anchored crop of the tall screen */
  border-radius: var(--radius-large);
  display: block;
}
/* Row 2: one wide desktop screen */
.bcs-images__desktop {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  border-radius: var(--radius-large);
  display: block;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .bcs-phone-card { width: 300px; }
  .bcs-island__title { font-size: 24px; line-height: 32px; }
  .bcs-band { padding: var(--gap-medium); }
  .bcs-band-card--mobile { width: 240px; }
  .bcs-switch { bottom: 24px; }
  .bcs-journey { grid-template-columns: 1fr; gap: var(--gap-xlarge); }
  .bcs-block--break { margin-top: var(--gap-5xlarge); }
  .bcs-chapter { padding-top: var(--gap-5xlarge); padding-bottom: var(--gap-5xlarge); gap: var(--gap-5xlarge); }
  .bcs-outcomes__grid { grid-template-columns: 1fr; gap: var(--gap-3xlarge); }
  /* Images rows go shorter and stack the photo/mobile pair */
  .bcs-images__row { height: auto; flex-direction: column; }
  .bcs-images__photo { width: 100%; height: 220px; }
  .bcs-images__mobile,
  .bcs-images__desktop { height: 240px; }
}


/* ══════════════════════════════════════════════════════
   Bentpixels overrides — v1 (placeholder art)
   ══════════════════════════════════════════════════════ */

/* Hero collage — full-cover parallax (art-agnostic until the final design):
   background-attachment fixed pins it to the viewport on the compositor
   while the frame clips it. cover sizes against the viewport under fixed
   attachment, which is the intent for this placeholder art. */
.bcs-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/work/bent-pixels/hero-collage.svg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  opacity: 0.5;
  pointer-events: none;
}
/* Touch devices ignore fixed attachment; reduced motion opts out — static */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .bcs-hero__bg { background-attachment: scroll; }
}

/* Wordmark placeholder until the real Bentpixels logo lands */
.bcs-hero__wordmark-text {
  align-self: flex-start;
  font-size: var(--font-size-subtitle);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-fg-primary);
}

/* Design-system deck sits on Material light gray */
.bcs-deck--light .bcs-deck-card { background: #ededed; }
/* ─────────────────────────────────────────────
   Paladin Software case study — node-to-node from Figma pg02Bcql…
   plcs- prefix. Content column = 976 (site `main`).
   Tokens: colors/gaps/radii from tokens.css; section rhythm 132 (design).
───────────────────────────────────────────── */

.plcs { color: var(--color-fg-primary); }

/* Tinted icon (glyph-only SVG mask, colour = currentColor) */
.plcs-ico {
  display: inline-block; width: 20px; height: 20px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* ── Hero — full-bleed, 16 inset frame, collage cropped not resized ── */
.plcs-hero {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  height: 630px; padding: var(--gap-medium); box-sizing: border-box;
  background: var(--color-bg-primary);
}
.plcs-hero__frame {
  position: relative; width: 100%; height: 100%;
  border-radius: var(--radius-xlarge); overflow: hidden;
  background: var(--color-bg-primary);
}
/* Collage with parallax — same pattern as the other case-study heroes:
   background-attachment fixed pins the artwork to the viewport on the
   compositor while the rounded frame clips it. Touch / reduced-motion
   fall back to the static composition. */
.plcs-hero__bg {
  position: absolute; inset: 0;
  /* the design window render (1962×598 design px) + 700px transparent headroom
     on top for the parallax travel. Centred on the frame at design scale. */
  background-image: url('/assets/work/paladin/redesign/hero-parallax.webp');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 1962px 1298px;
  background-position: calc(50vw - 981px) -684px; /* design row 0 at frame top (16) */
  pointer-events: none;
  opacity: 0.32; /* same dim as the Moonsense hero collage */
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .plcs-hero__bg {
    background-attachment: scroll;
    background-position: center -700px; /* static composition, frame-anchored */
  }
}
.plcs-hero__card {
  position: absolute; z-index: 1; bottom: 48px; left: 16px;
  width: min(760px, calc(100% - 32px)); box-sizing: border-box;
  display: flex; flex-direction: column; gap: var(--gap-large);
  padding: var(--gap-large);
  border-radius: var(--radius-large);
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.plcs-hero__wordmark { display: block; height: 28px; width: auto; color: #fff; align-self: flex-start; }
.plcs-hero__body { display: flex; flex-direction: column; gap: var(--gap-small); }
.plcs-hero__title {
  font-size: var(--font-size-sub-headline); line-height: var(--line-height-sub-headline);
  font-weight: 500; color: var(--color-fg-primary);
}
.plcs-hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-2xsmall) var(--gap-medium);
  font-size: var(--font-size-label); line-height: var(--line-height-label);
  color: var(--color-fg-secondary);
}
.plcs-hero__meta > span { white-space: nowrap; }
.plcs-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
/* Card text aligns with the 976 content column below: 16 frame inset + 24
   card padding → column − 40 (same rule as the Paper/Moonsense hero cards). */
@media (min-width: 768px) {
  .plcs-hero__card { left: max(72px, calc((100vw - 976px) / 2 - 40px)); }
}

/* ── Rhythm ── */
.plcs-section { padding: var(--gap-5xlarge) 0; }        /* 64 */
.plcs-section--body { padding: 132px 0; }               /* design body rhythm */
.plcs-divider {
  height: 0; margin: 0; border: none;
  border-top: var(--outline-small) solid var(--color-fg-quinary);
  color: var(--color-fg-quinary); opacity: 1;
}
.plcs-overline {
  font-size: var(--font-size-label); line-height: var(--line-height-label);
  color: var(--color-fg-tertiary); margin: 0;
  letter-spacing: 0; text-transform: uppercase;
}
.plcs-h2 {
  font-size: var(--font-size-sub-headline); line-height: var(--line-height-sub-headline); /* 40/48 */
  font-weight: 500; color: var(--color-fg-primary);
}
.plcs-h2--big { font-size: var(--font-size-sub-headline); line-height: var(--line-height-sub-headline); }
.plcs-body {
  font-size: var(--font-size-body); line-height: var(--line-height-body); /* 16/22 */
  color: var(--color-fg-tertiary);
}
.plcs-body--light { color: var(--color-fg-secondary); }
.plcs-body strong { color: var(--color-fg-primary); font-weight: 400; }

/* Intro — subtitle 20/28 fg/tertiary; highlights fg/primary; link accent */
.plcs-intro {
  font-size: var(--font-size-subtitle); line-height: var(--line-height-subtitle);
  color: var(--color-fg-tertiary); max-width: 976px;
}
.plcs-intro em { font-style: normal; color: var(--color-fg-primary); }
.plcs-intro__link { color: var(--color-accent); text-decoration: none; }
.plcs-intro__link:hover { text-decoration: underline; }

/* ── Meta strip ── */
.plcs-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-2xlarge); }
.plcs-meta__col { display: flex; flex-direction: column; gap: var(--gap-small); }
.plcs-meta__value { font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: 500; color: var(--color-fg-primary); }
.plcs-meta__chips { display: flex; flex-wrap: wrap; gap: var(--gap-small); }

/* ── Story ── */
.plcs-story { display: flex; flex-direction: column; gap: var(--gap-small); }
.plcs-prose { display: flex; flex-direction: column; gap: var(--gap-medium); max-width: 976px; margin-top: var(--gap-medium); }
.plcs-prose p { font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-fg-secondary); }

/* ── Icon-button (same component as the Moonsense/Paper carousels) ── */
.plcs-stepper { display: flex; gap: var(--gap-medium); flex-shrink: 0; }
.plcs-arrow {
  position: relative;
  width: var(--spacing-size-medium-large); height: var(--spacing-size-medium-large); /* 48 */
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-full); background: none;
  color: var(--color-accent); cursor: pointer; transition: opacity 0.15s ease;
}
.plcs-arrow::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--button-secondary-bg); opacity: var(--opacity-gentle); /* 0.24 */
  border-top: var(--outline-small) solid var(--color-fg-primary);
  border-left: var(--outline-small) solid var(--color-fg-primary);
  transition: opacity 0.15s ease;
}
.plcs-arrow > svg { position: relative; }
.plcs-arrow:hover:not(:disabled)::before { opacity: var(--opacity-mild); } /* 0.32 */
.plcs-arrow:disabled { color: var(--color-fg-tertiary); opacity: var(--opacity-mild); cursor: default; }

/* ── Website — hero-style full-bleed frame, slide carousel, frosted card ──
   Frame 1168×847 in a 1200 section (16 inset). Slides crop, never resize. */
.plcs-website {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  padding: var(--gap-medium); box-sizing: border-box;
  background: var(--color-bg-primary);
}
.plcs-website__frame {
  position: relative; height: 847px;
  border-radius: var(--radius-xlarge); overflow: hidden;
  background: var(--color-bg-secondary);
}
.plcs-website__track { display: flex; height: 100%; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.plcs-website__slide { flex: 0 0 100%; height: 100%; overflow: hidden; }
.plcs-website__slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center; /* slides are the design's exact window crop */
  display: block;
}
/* Card 440×auto, x72 in frame, bottom 32 — fills, radius, pads from node */
.plcs-website__card {
  position: absolute; z-index: 1; bottom: 32px;
  /* text edge aligns with the 976 column: 16 inset + 24 padding → −40 */
  left: max(72px, calc((100vw - 976px) / 2 - 40px));
  width: min(440px, calc(100% - 64px)); box-sizing: border-box;
  display: flex; flex-direction: column; gap: var(--gap-large); /* 24 */
  padding: var(--gap-large); /* 24 */
  border-radius: var(--radius-large); /* 16 */
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.plcs-website__card .plcs-h2 { font-size: 32px; line-height: 40px; }
@media (min-width: 1100px) {
  .plcs-website__card .plcs-h2 { font-size: var(--font-size-sub-headline); line-height: var(--line-height-sub-headline); }
}

/* ── The pitch — copy + solution cards over the fixed-size map ── */
.plcs-pitch { position: relative; /* map extends past the column on the right, per design */ }
.plcs-pitch__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 468px 468px; justify-content: space-between;
  gap: var(--gap-2xlarge); align-items: center;
  min-height: 566px; /* design content box (416:226) — contains the 447px map */
}
.plcs-pitch__copy { display: flex; flex-direction: column; gap: var(--gap-medium); }
.plcs-solutions {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 143px); justify-content: space-between;
  row-gap: 34px; /* node: rows y0 → y168, card 134 */
}
.plcs-solution {
  width: 143px; height: 134px; box-sizing: border-box; /* node 416:473 */
  border-radius: var(--radius-xlarge); /* 24 */
  background: var(--color-bg-secondary); /* non-interactive/background/secondary */
  display: flex; align-items: center; justify-content: center;
}
/* the design's Union vector = icon + label as one artwork, at natural size */
.plcs-solution img { display: block; }
/* Map — fixed 874×447 (node 416:227 at x195/y23 of the content box), #3a3a3a fills */
.plcs-map {
  position: absolute; z-index: 1;
  top: 155px; /* 132 section pad + 23 node offset */
  left: 195px;
  width: 874px; height: 447px;
  pointer-events: none;
}
.plcs-map__img { width: 100%; height: 100%; display: block; }
.plcs-map__pins { position: absolute; inset: 0; }
.plcs-pulsar { position: absolute; width: 0; height: 0; }
.plcs-pulsar__core, .plcs-pulsar__ring { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.plcs-pulsar__core {
  width: 4px; height: 4px; background: var(--color-accent);
  opacity: 0.2;
  animation: plcs-core var(--dur, 5s) ease-in-out infinite; animation-delay: var(--d, 0s);
}
.plcs-pulsar__ring {
  width: 16px; height: 16px; border: 1px solid var(--color-accent); opacity: 0;
  animation: plcs-pulse var(--dur, 5s) ease-out infinite; animation-delay: var(--d, 0s);
}
@keyframes plcs-pulse {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  14% { opacity: 0.6; } 40% { opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}
@keyframes plcs-core { 0%, 100% { opacity: 0.1; } 18% { opacity: 0.9; } 46% { opacity: 0.1; } }

/* ── The apps — full-bleed non-interactive/background/secondary band ── */
.plcs-apps {
  width: 100vw; margin-left: calc(50% - 50vw);
  background: var(--color-bg-secondary); /* #171717 */
}
.plcs-apps__inner { position: relative; width: min(976px, calc(100vw - 48px)); margin: 0 auto; }
.plcs-apps__list { display: flex; flex-direction: column; }

.plcs-app { display: flex; flex-direction: column; gap: var(--gap-xlarge); /* 32 */ padding: 132px 0; scroll-margin-top: 96px; }
.plcs-app + .plcs-app { border-top: var(--outline-small) solid var(--color-fg-quinary); }

/* Block head — text left (max 768), arrows bottom-right (node 401:17897) */
.plcs-block__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-large); }
.plcs-block__text { display: flex; flex-direction: column; max-width: 768px; }
.plcs-block__text .plcs-overline { margin-bottom: var(--gap-small); }
.plcs-block__text .plcs-body { margin-top: var(--gap-medium); }

/* Sticky rail — icon centers align with the app overline label (node x76 vs 112:
   20px icon 16px gap → -36 from column; pitch 36). Inactive #3a3a3a, active accent.
   Absolute full-height track (top 129 aligns icon 1 with label 1; bottom 132 stops
   the stack at the last app's decisions) + sticky inner so it can never leave the band. */
.plcs-rail {
  position: absolute; left: -36px; width: 20px;
  top: 129px; bottom: 132px;
  z-index: 3; pointer-events: none;
}
.plcs-rail__inner {
  position: sticky; top: 225px;
  display: flex; flex-direction: column; gap: var(--gap-medium); /* 16 → 36 pitch */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}
.plcs-rail__btn {
  appearance: none; border: none; background: none; padding: 0; cursor: pointer;
  width: 20px; height: 20px; border-radius: var(--radius-xsmall);
  display: grid; place-items: center;
  color: var(--color-fg-quadruple); /* #3a3a3a */
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.plcs-rail__btn:hover { color: var(--color-fg-secondary); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05); }
.plcs-rail__btn:active { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.09); }
.plcs-rail__btn.is-active { color: var(--color-accent); }
@media (max-width: 1120px) { .plcs-rail { display: none; } }

/* Screens container — WIZARD FLOW SCREENS: bg/primary, radius 24, pad 24 */
.plcs-screens {
  background: var(--color-bg-primary); /* non-interactive/background/primary */
  border-radius: var(--radius-xlarge); /* spacing/radius/xlarge */
  padding: var(--gap-large); /* spacing/gap/large 24 */
  overflow: hidden;
}
.plcs-screens__track { display: flex; align-items: flex-start; gap: var(--gap-medium); /* design strip: 16 between slides */ transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
.plcs-screens__cell { flex: 0 0 100%; }
/* natural slide height — no forced aspect, so shorter slides never crop */
.plcs-screens__cell img { width: 100%; height: auto; display: block; }

/* Design decisions (node "Icons" row) */
.plcs-decisions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-2xlarge); }
.plcs-decision { display: flex; flex-direction: column; gap: var(--gap-small); }
.plcs-decision__n { font-size: var(--font-size-label); line-height: var(--line-height-label); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.plcs-decision__title { font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: 500; color: var(--color-fg-primary); }
.plcs-decision__body { font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-fg-tertiary); }

/* ── Boards (UI guide / redesign) — head + 976 slide carousel ── */
.plcs-board { display: flex; flex-direction: column; gap: var(--gap-xlarge); }
.plcs-board__media { border-radius: var(--radius-xlarge); overflow: hidden; line-height: 0; }
/* fixed 976×708 window; oversized boards fit inside proportionally */
.plcs-board__media .plcs-screens__cell { aspect-ratio: 976 / 708; }
.plcs-board__media .plcs-screens__cell img { width: 100%; height: 100%; object-fit: contain; }
.plcs-board__media--light .plcs-screens__cell { background: #ededed; /* uiguide board fill (node 401:18918) */ }

/* ── Before/after comparison (redesign section) ──
   Container = WIZARD node 488:6395: bg/secondary, radius 24, pad 24.
   Divider = non-interactive/foreground/positive/base (--color-accent).
   Handle = DS icon-button primary (green, #ededed 64% top-left edge). */
.plcs-compare-wrap {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xlarge);
  padding: var(--gap-large);
}
.plcs-compare {
  position: relative;
  aspect-ratio: 928 / 661;
  overflow: hidden;
}
.plcs-compare__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  user-select: none; -webkit-user-select: none; pointer-events: none;
}
/* bleed 1px vertically — the old board's content sits a hair inside its box,
   letting the light design peek through at the top/bottom edges */
.plcs-compare__img--old { top: -1px; height: calc(100% + 2px); }
/* drag affordance lives only 8px around the line (and on the button) */
.plcs-compare__hit {
  position: absolute; top: 0; bottom: 0;
  width: 16px; margin-left: -8px;
  cursor: ew-resize; touch-action: none;
  z-index: 1;
}
.plcs-compare__line {
  position: absolute; top: 0; bottom: 0;
  width: var(--outline-small);
  margin-left: calc(-1 * var(--outline-small) / 2);
  background: var(--color-accent); /* non-interactive/foreground/positive/base */
  pointer-events: none;
}
.plcs-compare__handle {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: var(--spacing-size-medium-large); height: var(--spacing-size-medium-large); /* 48 */
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-full);
  background: var(--button-primary-bg);
  color: var(--color-fg-quadruple); /* drag glyph #3a3a3a, per the design export */
  cursor: ew-resize; padding: 0; touch-action: none; z-index: 2;
}
.plcs-compare__handle::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border-top: var(--outline-small) solid var(--color-fg-primary);
  border-left: var(--outline-small) solid var(--color-fg-primary);
  opacity: var(--opacity-strong); /* 0.64 edge, per the export */
  pointer-events: none;
}
.plcs-compare__handle:hover { background: var(--button-primary-bg-hover); }
.plcs-compare__handle:active { background: var(--button-primary-bg-pressed); }
.plcs-compare__handle:focus-visible { outline: var(--outline-medium) solid var(--button-primary-focus-ring); outline-offset: 2px; }
.plcs-compare__handle svg { display: block; width: 100%; height: 100%; }
/* hint nudge + smooth release (disabled while dragging) */
.plcs-compare.is-anim .plcs-compare__img--old { transition: clip-path 0.35s ease; }
.plcs-compare.is-anim .plcs-compare__line,
.plcs-compare.is-anim .plcs-compare__hit,
.plcs-compare.is-anim .plcs-compare__handle { transition: left 0.35s ease; }

/* ── The exit ── */
.plcs-exit { display: grid; grid-template-columns: 1fr auto; gap: var(--gap-3xlarge); align-items: center; }
.plcs-exit__copy { display: flex; flex-direction: column; gap: var(--gap-medium); max-width: 468px; }
.plcs-exit__logos { display: flex; align-items: center; }
.plcs-exit__logos img { width: 176px; height: 176px; }
.plcs-exit__logos img:last-child { margin-left: -28px; }

/* ── Testimonials — shared component; heading gap 32 (About pattern) ── */
.plcs-tms .plcs-h2 { margin-bottom: var(--gap-xlarge); }

/* ── Let's work together — content 128 (h2 48 + 24 + subtitle), actions +56 ── */
.plcs-cta { display: flex; flex-direction: column; }
.plcs-cta__text { display: flex; flex-direction: column; gap: var(--gap-large); }
.plcs-cta__text .plcs-body {
  font-size: var(--font-size-subtitle); line-height: var(--line-height-subtitle);
  max-width: 560px;
}
.plcs-cta__actions { display: flex; flex-wrap: wrap; gap: var(--gap-large); margin-top: var(--gap-4xlarge); /* 56 */ }
.plcs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--spacing-size-medium-large); /* 48 */
  padding: 0 var(--gap-large);
  border-radius: var(--radius-full);
  font-size: var(--font-size-body); font-weight: 500; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.plcs-btn--primary { background: var(--button-primary-bg); color: var(--button-primary-label); }
.plcs-btn--primary:hover { background: var(--button-primary-bg-hover); }
.plcs-btn--secondary { background: var(--color-bg-secondary); color: var(--button-secondary-label); }
.plcs-btn--secondary:hover { color: var(--button-secondary-label-hover); background: var(--button-secondary-bg); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .plcs-pitch__grid { grid-template-columns: 1fr; gap: var(--gap-2xlarge); }
  .plcs-map { position: relative; top: auto; left: auto; width: 100%; height: auto; aspect-ratio: 874 / 447; margin-top: var(--gap-xlarge); }
  .plcs-solutions { grid-template-columns: repeat(3, 143px); justify-content: start; column-gap: var(--gap-medium-large); }
}
@media (max-width: 900px) {
  .plcs-exit { grid-template-columns: 1fr; }
  .plcs-exit__logos { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .plcs-section { padding: var(--gap-3xlarge) 0; }
  .plcs-section--body { padding: var(--gap-5xlarge) 0; }
  .plcs-hero__title { font-size: 32px; line-height: 40px; }
  .plcs-hero__card { bottom: 16px; gap: var(--gap-medium); }
  .plcs-h2 { font-size: 32px; line-height: 40px; }
  .plcs-website__frame { height: 60vh; }
  .plcs-website__card { left: 32px; bottom: 24px; }
  .plcs-website__card .plcs-h2 { font-size: 28px; line-height: 36px; }
  .plcs-meta { grid-template-columns: repeat(2, 1fr); row-gap: var(--gap-2xlarge); }
  .plcs-decisions { grid-template-columns: repeat(2, 1fr); gap: var(--gap-xlarge); }
  .plcs-app { padding: var(--gap-5xlarge) 0; gap: var(--gap-large); }
  .plcs-block__head { flex-direction: column; align-items: flex-start; }
  .plcs-screens { padding: var(--gap-small-medium); }
  .plcs-solutions { grid-template-columns: repeat(2, 143px); }
}
@media (max-width: 480px) {
  .plcs-meta { grid-template-columns: 1fr; }
  .plcs-decisions { grid-template-columns: 1fr; }
  .plcs-exit__logos img { width: 128px; height: 128px; }
}
/* ─────────────────────────────────────────────
   input (UI Kit 240:273) — node-to-node.
   Kit values not in the global tokens live here as component vars.
───────────────────────────────────────────── */
.dsinput {
  --input-stroke:        #555555; /* kit: input outline default */
  --input-stroke-hover:  #999999;
  --input-bg:            var(--color-bg-primary);   /* #060805 */
  --input-bg-hover:      var(--color-bg-secondary); /* #171717 */
  --input-value:         #c2c7c3; /* kit: filled value */
  --input-error-stroke:  #f2705f; /* kit: error outline */
  --input-error:         #e93120; /* non-interactive/background/negative/base */
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
  width: 100%;
}

/* 56h box, r12, pad 0 12, gap 8 */
.dsinput__box {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap-small);
  height: 56px;
  padding: 0 var(--gap-small-medium); /* 12 */
  border-radius: var(--radius-medium); /* 12 */
  background: var(--input-bg);
  border-width: var(--outline-small);
  border-style: solid;
  border-color: var(--input-stroke);
  cursor: text;
  /* background only — transitioning border-color wedges in Chrome when React
     flips --error/--floating classes in the same frame (stuck at old colour) */
  transition: background 0.15s ease;
}
.dsinput__box:hover {
  background: var(--input-bg-hover);
  border-color: var(--input-stroke-hover);
}
/* Selected — focus-ring #00d669 2px at 4px offset (outer radius 16) */
.dsinput__box:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Leading icon 20×20 — accent; hover #00b450; error #e93120 */
.dsinput__lead { display: flex; flex-shrink: 0; color: var(--color-accent); }
.dsinput__box:hover .dsinput__lead { color: #00b450; }

/* Label ↔ value stack */
.dsinput__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  height: 100%;
}
.dsinput__label {
  color: var(--color-fg-tertiary); /* #999999 */
  font-size: var(--font-size-body); /* 16 — empty state */
  line-height: var(--line-height-body);
  transition: font-size 0.12s ease, line-height 0.12s ease;
  pointer-events: none;
}
.dsinput__box:hover .dsinput__label { color: var(--color-fg-secondary); }
/* Floating (filled/focused): label 10 Regular on top, value 16 below */
.dsinput__box--floating .dsinput__label { font-size: 10px; line-height: 12px; }
.dsinput__field {
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  color: var(--input-value); /* 16 #c2c7c3 */
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  outline: none;
  transition: height 0.12s ease, opacity 0.12s ease;
}
.dsinput__box--floating .dsinput__field { height: 22px; opacity: 1; }

/* Clear — 32 icon-button, secondary label colour */
.dsinput__clear {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-fg-secondary);
  transition: background 0.15s ease;
}
.dsinput__clear:hover { background: rgba(237, 237, 237, 0.08); }

/* Alarm — 24, error colour */
.dsinput__alarm { display: flex; flex-shrink: 0; color: var(--input-error); }

/* Supportive text — 10 Medium */
.dsinput__supportive {
  font-size: 10px;
  line-height: 12px;
  font-weight: 500;
  color: var(--color-fg-tertiary);
}

/* ── Error state (stroke #f2705f, content #e93120) ──
   Single-selector rules on purpose: mixed plain/:hover selector lists were
   being mangled by the CSS minifier (plain selector dropped in the build). */
.dsinput--error .dsinput__box { border-color: var(--input-error-stroke); }
.dsinput--error .dsinput__box:hover { border-color: var(--input-error-stroke); }
.dsinput--error .dsinput__lead { color: var(--input-error); }
.dsinput--error .dsinput__box:hover .dsinput__lead { color: var(--input-error); }
.dsinput--error .dsinput__label { color: var(--input-error); }
.dsinput--error .dsinput__box:hover .dsinput__label { color: var(--input-error); }
.dsinput--error .dsinput__supportive { color: var(--input-error); }
/* ─────────────────────────────────────────────
   Roche case study — visual build. rcs- prefix. (Figma 494:10811)
───────────────────────────────────────────── */

.rcs { color: var(--color-fg-primary); }

/* ── Hero — collage image (cropped) + frosted card ── */
.rcs-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 630px;
  padding: var(--gap-medium); /* 16px inset frame */
  box-sizing: border-box;
  background: var(--color-bg-primary);
}
.rcs-hero__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xlarge); /* 24 */
  overflow: hidden;
  background: var(--color-bg-secondary);
}
/* Crop effect, NOT zoom. The frame is a window onto the collage: element-
   relative cover scales the 2336×1196 export DOWN (~0.6×) to fill the frame
   and crops the overflow. `fixed` is what magnified it before (cover was sized
   to the viewport, not the frame) — so it is deliberately NOT used. */
.rcs-hero__media {
  position: absolute;
  inset: 0;
  background-image: url('/assets/work/roche/hero.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.32; /* same dim as the Moonsense hero collage */
}
.rcs-hero__card {
  position: absolute;
  z-index: 1;
  bottom: var(--gap-5xlarge); /* 64 (Figma: y392 in the 630 hero) */
  left: var(--gap-2xlarge);
  width: min(693px, calc(100% - 48px)); /* Figma 494:18486 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--gap-large);
  padding: var(--gap-large);
  border-radius: var(--radius-large);
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.rcs-hero__logo {
  align-self: flex-start;
  display: block;
  width: 62px;
  height: 32px;
}
.rcs-hero__body { display: flex; flex-direction: column; gap: var(--gap-small); }
.rcs-hero__title {
  font-size: var(--font-size-sub-headline);
  line-height: var(--line-height-sub-headline);
  font-weight: 500;
  color: var(--color-fg-primary);
}
.rcs-hero__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--gap-2xsmall) var(--gap-medium);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: var(--color-fg-secondary);
}
.rcs-hero__meta > span { white-space: nowrap; }
.rcs-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
@media (min-width: 768px) {
  .rcs-hero__card { left: max(56px, calc((100vw - 976px) / 2 - 24px)); }
}

/* ── Shared rhythm ── */
.rcs-section { padding: 132px 0; } /* Figma section frame py-132 */
.rcs-divider {
  height: 0; margin: 0; border: none;
  border-top: var(--outline-small) solid var(--color-fg-quinary);
  opacity: 1;
}
.rcs-label {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  text-transform: uppercase;
  color: var(--color-fg-tertiary);
  margin: 0 0 var(--gap-medium);
}
.rcs-h2 {
  font-size: var(--font-size-sub-headline); /* 40 */
  line-height: var(--line-height-sub-headline);
  font-weight: 500;
  color: var(--color-fg-primary);
}
.rcs-h2__dim { color: var(--color-fg-tertiary); }
.rcs-prose { display: flex; flex-direction: column; gap: var(--gap-medium); }
.rcs-prose p {
  font-size: var(--font-size-body);
  line-height: 1.7;
  color: var(--color-fg-secondary);
}
.rcs-prose strong { color: var(--color-fg-primary); font-weight: 500; }
.rcs-category {
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-subtitle);
  font-weight: 500;
  color: var(--color-fg-primary);
  margin: 0 0 var(--gap-large);
}
.rcs-block { display: flex; flex-direction: column; gap: var(--gap-medium); }
.rcs-block--tight { margin-top: var(--gap-2xlarge); }

/* ── Disclaimer + intro (Figma 494:18503 — py 64, gap 24) ── */
.rcs-intro-block { padding: var(--gap-5xlarge) 0; display: flex; flex-direction: column; gap: var(--gap-large); }
/* Meta strip section shares the same 64 rhythm (Figma 494:18507) */
.rcs-section--tight { padding: var(--gap-5xlarge) 0; }
/* inline-banner (UI-Kit 205:614, status Warning) */
.rcs-banner {
  display: flex;
  align-items: center;
  gap: var(--gap-small);                 /* 8 */
  padding: var(--gap-small);             /* 8 */
  border-radius: var(--radius-small);    /* 8 */
  background: rgba(58, 58, 58, 0.32); /* #3a3a3a @ 0.32 (Figma Background rect node-opacity) */
}
.rcs-banner__icon { flex-shrink: 0; }
.rcs-banner__label {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 500; /* body/medium — Figma banner label */
  color: var(--color-fg-secondary);
}
.rcs-banner__prefix {
  font-weight: 500;
  color: var(--color-fg-warning-base, #fda50d);
  margin-right: var(--gap-2xsmall);
}
.rcs-intro {
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-subtitle);
  color: var(--color-fg-tertiary);
}
.rcs-intro strong { color: var(--color-fg-primary); font-weight: 400; } /* Figma: #ededed, regular */

/* ── Meta strip ── */
.rcs-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-2xlarge); }
.rcs-meta__col { display: flex; flex-direction: column; gap: var(--gap-small); }
.rcs-meta .rcs-label { margin-bottom: 0; }
.rcs-meta__value { font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: 500; color: var(--color-fg-primary); }
.rcs-meta__chips { display: flex; flex-wrap: wrap; gap: var(--gap-small); }

/* ── Carousel ── */
.rcs-carousel {
  padding: 132px 0; /* Figma section frame py-132 */
  display: flex;
  flex-direction: column;
  gap: var(--gap-xlarge); /* 32 head → card */
}
/* Nested inside another block (e.g. token card under PUSHING) — no section pad */
.rcs-carousel--bare { padding: 0; }
/* Charts + Log-on live in one section frame, 132 apart (Figma 494:48972) */
.rcs-prodflow { display: flex; flex-direction: column; gap: 132px; }
/* Inside a grey band the band__inner already carries the 132px section padding —
   don't stack the carousel's own on top (was doubling to 264). */
.rcs-band .rcs-carousel { padding: 0; }
.rcs-carousel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-large);
}
.rcs-carousel__intro { display: flex; flex-direction: column; }
.rcs-carousel__intro .rcs-label { margin-bottom: var(--gap-medium); }
.rcs-carousel__desc {
  margin-top: var(--gap-medium); /* 16 — Figma Top frame gap */
  max-width: 760px;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-fg-tertiary);
}
.rcs-carousel__desc strong { color: var(--color-fg-primary); font-weight: 500; }
.rcs-carousel__arrows { display: flex; gap: var(--gap-medium); flex-shrink: 0; }
.rcs-arrow {
  position: relative;
  width: var(--spacing-size-medium-large); height: var(--spacing-size-medium-large); /* 48 */
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-full);
  background: none; color: var(--color-accent);
  transition: opacity 0.15s ease;
}
.rcs-arrow::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: #3a3a3a; opacity: 0.24;
  border-top: var(--outline-small) solid #ededed;
  border-left: var(--outline-small) solid #ededed;
  transition: opacity 0.15s ease;
}
.rcs-arrow > svg { position: relative; }
.rcs-arrow:hover:not(:disabled)::before { opacity: 0.32; }
.rcs-arrow:disabled { color: var(--color-fg-tertiary); opacity: 0.32; cursor: default; }

.rcs-screens {
  border-radius: var(--radius-xlarge); /* 24 */
  padding: var(--gap-large);           /* 24 */
  overflow: hidden;
}
.rcs-screens--secondary { background: var(--color-bg-secondary); } /* #171717 */
.rcs-screens--primary   { background: var(--color-bg-primary); }   /* #060805 */
.rcs-screens--light     { background: var(--color-bg-contrast, #ededed); } /* charts card */
.rcs-track {
  display: flex;
  gap: var(--gap-large);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  scroll-snap-type: x mandatory;
}
.rcs-track::-webkit-scrollbar { display: none; }
.rcs-track.is-dragging { cursor: grabbing; }
.rcs-slide {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  display: block;
  scroll-snap-align: start;
}
/* Peek the next slide (multi-slide carousels) — Figma: 928 slides, gap 16, in a
   24-padded card → the next slide starts 968 into the 976 window, so 8px of it
   shows at the card edge. The track bleeds into the card's right padding
   (margin −24 / padding 24) so that sliver isn't clipped by the content box. */
.rcs-track--peek {
  gap: var(--gap-medium);   /* 16 (single-slide tracks keep 24) */
  margin-right: calc(var(--gap-large) * -1);
  padding-right: var(--gap-large);
}

/* ── Full-bleed grey band (non-interactive/background/secondary #171717) ── */
.rcs-band {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--color-bg-secondary); /* #171717 */
  overflow: hidden; /* clips the bleeding architecture glow */
}
.rcs-band__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(976px + 2 * var(--gap-large));
  margin: 0 auto;
  padding: 132px var(--gap-large); /* Figma py-132 */
  box-sizing: border-box;
}

/* Arch band nests two 132-padded frames (Figma 494:33043 → 33044) — 264 effective */
.rcs-band--arch .rcs-band__inner { padding-top: 264px; padding-bottom: 264px; }

/* ── The architecture — 2-col row (text left, empty right); the colour-glow
   illustration bleeds off the top-right (Figma: left 269 / top -269). ── */
.rcs-arch {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2xlarge); /* 40 */
  align-items: center;
}
.rcs-arch__text { display: flex; flex-direction: column; gap: var(--gap-medium); } /* label→16→h2→16→body */
.rcs-arch__text .rcs-label { margin-bottom: 0; }
.rcs-arch__glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: -260px;
  left: calc(50% - 331px); /* content-left(50%-488) + 157 (Figma 269-112) */
  width: 1289px;
  height: 1092px;
  max-width: none;
}

/* ── Why it mattered ── */
.rcs-impact-section { display: flex; flex-direction: column; gap: var(--gap-4xlarge); }
.rcs-impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-2xlarge); }
.rcs-impact__card { display: flex; flex-direction: column; gap: var(--gap-large); }
.rcs-impact__icon { width: 72px; height: 72px; display: block; flex-shrink: 0; overflow: visible; }
/* Each circle scales + fades in on scroll-in (delay set inline, staggered) */
.rcs-impact__layer { transform-box: fill-box; transform-origin: center; opacity: 0; }
.rcs-impact--in .rcs-impact__layer { animation: rcs-assemble 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes rcs-assemble {
  0%   { opacity: 0; transform: scale(0.5); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
.rcs-impact__content { display: flex; flex-direction: column; gap: var(--gap-small); }
.rcs-impact__title { font-size: var(--font-size-body); font-weight: 500; color: var(--color-fg-primary); }
.rcs-impact__body { font-size: var(--font-size-body); line-height: 1.6; color: var(--color-fg-tertiary); }

/* ── Numbered caption list ── */
.rcs-list--numbered {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-2xlarge); /* 40 both axes (Figma grid gap-x/y 40) */
  margin: 0;
  padding: 0;
}
/* Governance / Pushing — one section, 132 between blocks (Figma 563:2290) */
.rcs-runs { display: flex; flex-direction: column; gap: 132px; }
.rcs-runblock { display: flex; flex-direction: column; gap: var(--gap-medium); }      /* label →16→ inner */
.rcs-runblock__inner { display: flex; flex-direction: column; gap: var(--gap-4xlarge); } /* 56 between text/carousel/list */
.rcs-runblock__top { display: flex; flex-direction: column; gap: var(--gap-medium); }  /* heading →16→ body */
.rcs-list--numbered li { display: flex; flex-direction: column; gap: var(--gap-small); }
.rcs-list__num { font-size: var(--font-size-label); line-height: var(--line-height-label); color: var(--color-accent); }
.rcs-list__label { font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: 500; color: var(--color-fg-primary); }
.rcs-list__desc { font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-fg-tertiary); }

/* ── Testimonials surface band ── */
.rcs-section--surface {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0;
  background: var(--color-bg-secondary);
}
.rcs-section__inner {
  width: 100%;
  max-width: calc(976px + 2 * var(--gap-large));
  margin: 0 auto;
  padding: var(--spacing-size-2xlarge) var(--gap-large);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--gap-4xlarge);
}

/* ── Testimonials (on #060805, no band) — heading →32→ list (Figma 494:52833) ── */
.rcs-testimonials { display: flex; flex-direction: column; gap: var(--gap-xlarge); }

/* ── CTA — content(heading→24→body) →56→ actions (Figma 494:52840) ── */
.rcs-cta { display: flex; flex-direction: column; gap: var(--gap-4xlarge); }
.rcs-cta__content { display: flex; flex-direction: column; gap: var(--gap-large); }
.rcs-cta__body { font-size: var(--font-size-subtitle); line-height: var(--line-height-subtitle); color: var(--color-fg-tertiary); }
.rcs-cta__actions { display: flex; align-items: center; gap: var(--gap-large); }

/* ── Password gate (Figma 622:22244 — Protected page) ── */
.rcs-gate {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  max-width: none; /* the gate IS <main> — override main's 976px cap so it fills */
  margin-left: calc(50% - 50vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xlarge); /* 32 logo → card */
  /* Figma pad [96,0,48,0]; top bumped to clear the fixed nav */
  padding: 160px var(--gap-large) var(--gap-3xlarge);
  box-sizing: border-box;
  background: var(--color-bg-primary);
  overflow: hidden;
}
/* Same hero collage as the case study, dimmed (Figma background @0.32) */
.rcs-gate__bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/work/roche/hero.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.32;
  pointer-events: none;
}
.rcs-gate__logo { position: relative; display: block; width: 48px; height: 48px; }

/* Glass card — main-menu recipe (rgba(0,0,0,.48) + blur + 4% tint + hairline) */
.rcs-gate__card {
  position: relative;
  width: min(520px, 100%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--gap-small-medium); /* 12 back → body */
  padding: var(--gap-large) var(--gap-2xlarge) var(--gap-2xlarge); /* [24,40,40,40] */
  border-radius: var(--radius-2xlarge); /* 32 */
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--outline-small) solid rgba(237, 237, 237, 0.08);
}
.rcs-gate__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #ededed;
  opacity: 0.04;
  pointer-events: none;
}
.rcs-gate__card > * { position: relative; }

/* Go back — pill-button: arrow-left 20 accent + 16 Medium #d3d9d5 */
.rcs-gate__back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-small);
  height: 48px;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 500;
  color: var(--color-fg-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}
.rcs-gate__back:hover { color: var(--color-fg-primary); }

.rcs-gate__body { display: flex; flex-direction: column; gap: var(--gap-xlarge); } /* 32 */
.rcs-gate__titlegroup { display: flex; flex-direction: column; gap: var(--gap-small-medium); } /* 12 */
.rcs-gate__title {
  font-size: var(--font-size-sub-headline);     /* 40 */
  line-height: var(--line-height-sub-headline); /* 48 */
  font-weight: 500;
  color: var(--color-fg-primary);
}
.rcs-gate__note {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-fg-tertiary);
}
.rcs-gate__fields { display: flex; flex-direction: column; gap: var(--gap-medium-large); } /* 20 */

/* Submit — pill-button primary: 48h, full radius, #00d669, label 16 Medium #060805,
   stroke #ededed@0.64 */
.rcs-gate__submit {
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  border: var(--outline-small) solid rgba(237, 237, 237, 0.64);
  color: var(--color-bg-primary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 500;
  font-family: var(--font-family-base);
  transition: filter 0.15s ease;
}
.rcs-gate__submit:hover { filter: brightness(1.08); }

.rcs-gate__copy {
  position: relative;
  margin-top: auto;
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: var(--color-fg-primary); /* Figma: #ededed */
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .rcs-arch { grid-template-columns: 1fr; }
  .rcs-arch__glow { height: 240px; order: -1; }
  .rcs-impact { grid-template-columns: 1fr; gap: var(--gap-3xlarge); }
  .rcs-list--numbered { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .rcs-hero__title { font-size: 32px; line-height: 40px; }
  .rcs-h2 { font-size: 28px; line-height: 36px; }
  .rcs-meta { grid-template-columns: repeat(2, 1fr); row-gap: var(--gap-2xlarge); }
  .rcs-carousel__head { flex-direction: column; align-items: flex-start; }
  .rcs-slide--wide { height: 360px; }
}
@media (max-width: 480px) {
  .rcs-meta { grid-template-columns: 1fr; }
  .rcs-list--numbered { grid-template-columns: 1fr; }
  .rcs-cta__actions { flex-direction: column; align-items: stretch; }
}
/* ─────────────────────────────────────────────
   Measure Studio case study — msc- prefix (Moonsense-style)
───────────────────────────────────────────── */

.msc { color: var(--color-fg-primary); }

/* ── Hero — framed dashboard crop + frosted card ── */
.msc-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 630px;
  padding: var(--gap-medium); /* 16 inset frame */
  box-sizing: border-box;
  background: var(--color-bg-primary);
}
.msc-hero__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xlarge); /* 24 */
  overflow: hidden;
  background: var(--color-bg-secondary);
}
/* Crop, not zoom: cover fills the frame and clips the overflow. Anchored
   top-left so the app nav + headline metrics stay in view. */
.msc-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/work/measure-studio/hero.webp');
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
}
.msc-hero__card {
  position: absolute;
  z-index: 1;
  bottom: var(--gap-2xlarge); /* 40 */
  left: max(var(--gap-large), calc((100vw - 976px) / 2 - var(--gap-large)));
  width: min(520px, calc(100% - 48px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--gap-large);
  padding: var(--gap-large);
  border-radius: var(--radius-large);
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.msc-hero__wordmark {
  align-self: flex-start;
  font-size: var(--font-size-subtitle);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.msc-hero__body { display: flex; flex-direction: column; gap: var(--gap-small); }
.msc-hero__title {
  font-size: var(--font-size-display);     /* 64 */
  line-height: var(--line-height-display); /* 72 */
  font-weight: 500;
  color: var(--color-fg-primary);
}
.msc-hero__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--gap-2xsmall) var(--gap-medium);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: var(--color-fg-secondary);
}
.msc-hero__meta > span { white-space: nowrap; }
.msc-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ── Shared type + rhythm ── */
.msc-section { padding: 132px 0; } /* 96 */
.msc-divider {
  height: 0; margin: 0; border: none;
  border-top: var(--outline-small) solid var(--color-fg-quinary);
  opacity: 1;
}
.msc-label {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  text-transform: uppercase;
  color: var(--color-fg-tertiary);
  margin: 0;
}
.msc-h2 {
  font-size: var(--font-size-sub-headline); /* 40 */
  line-height: var(--line-height-sub-headline);
  font-weight: 500;
  color: var(--color-fg-primary);
}
.msc-body {
  font-size: var(--font-size-body);
  line-height: 1.7;
  color: var(--color-fg-secondary);
}
.msc-intro {
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-subtitle);
  color: var(--color-fg-tertiary);
}

/* ── Meta strip ── */
.msc-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-2xlarge); }
.msc-meta__col { display: flex; flex-direction: column; gap: var(--gap-small); }
.msc-meta__value { font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: 500; color: var(--color-fg-primary); }
.msc-meta__chips { display: flex; flex-wrap: wrap; gap: var(--gap-small); }

/* ── Case body ── */
.msc-case { display: flex; flex-direction: column; }
.msc-two {
  padding: 132px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2xlarge);
}
.msc-two__col { display: flex; flex-direction: column; gap: var(--gap-large); }
.msc-block { padding: 132px 0; display: flex; flex-direction: column; gap: var(--gap-xlarge); }

/* ── The web-app band — distinct bg/secondary so the whole app tour reads as
      one delimited chapter, separate from the page around it ── */
.msc-appsband {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--color-bg-secondary);
}
.msc-appsband__inner {
  max-width: 976px;
  margin: 0 auto;
  padding: 132px var(--gap-large);
  display: flex;
  flex-direction: column;
}
.msc-appsband__lead { max-width: 760px; }

/* One app area — clear rhythm + a hairline between areas so the big dark
   screenshots never run into each other */
.msc-app {
  padding-block: var(--gap-5xlarge);
  display: flex;
  flex-direction: column;
  gap: var(--gap-xlarge);
}
.msc-app:first-of-type { padding-top: var(--gap-2xlarge); }
.msc-app + .msc-app { border-top: var(--outline-small) solid rgba(237, 237, 237, 0.08); }

/* Numbered UX-decision grid (2×2) */
.msc-decisions {
  list-style: none;
  margin: var(--gap-small) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-xlarge) var(--gap-2xlarge);
}
.msc-decision { display: flex; flex-direction: column; gap: var(--gap-2xsmall); }
.msc-decision__n {
  font-size: var(--font-size-label);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  margin-bottom: var(--gap-2xsmall);
}
.msc-decision__title {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 600;
  color: var(--color-fg-primary);
}
.msc-decision__body {
  margin: 0;
  font-size: var(--font-size-label);
  line-height: var(--line-height-subtitle);
  color: var(--color-fg-tertiary);
}
.msc-block__text { display: flex; flex-direction: column; gap: var(--gap-medium); }

/* Carousel head + arrows */
.msc-carousel__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--gap-large);
}
.msc-carousel__head .msc-block__text { max-width: 760px; }
.msc-carousel__arrows { display: flex; gap: var(--gap-medium); flex-shrink: 0; }
.msc-arrow {
  position: relative;
  width: var(--spacing-size-medium-large); height: var(--spacing-size-medium-large); /* 48 */
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-full);
  background: none; color: var(--color-accent);
  transition: opacity 0.15s ease;
}
.msc-arrow::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: #3a3a3a; opacity: 0.24;
  border-top: var(--outline-small) solid #ededed;
  border-left: var(--outline-small) solid #ededed;
  transition: opacity 0.15s ease;
}
.msc-arrow > svg { position: relative; }
.msc-arrow:hover:not(:disabled)::before { opacity: 0.32; }
.msc-arrow:disabled { color: var(--color-fg-tertiary); opacity: 0.32; cursor: default; }

/* Drag track — full-bleed, first card aligns to the 976 column */
.msc-drag {
  display: flex;
  gap: var(--gap-large);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: max(var(--gap-large), calc((100vw - 976px) / 2));
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}
.msc-drag::-webkit-scrollbar { display: none; }
.msc-drag.is-dragging { cursor: grabbing; }
.msc-screen-card {
  flex: 0 0 auto;
  height: 600px;
  width: auto;
  display: block;
  border-radius: var(--radius-large);
  border: var(--outline-small) solid var(--color-fg-quinary);
  scroll-snap-align: start;
}
/* Phone card — uniform tall device thumbnail (shows the top of each screen) */
.msc-phone-card {
  flex: 0 0 auto;
  width: 300px;
  height: 620px;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: var(--radius-2xlarge, 32px);
  border: var(--outline-small) solid var(--color-fg-quinary);
  background: var(--color-bg-secondary);
  scroll-snap-align: start;
}

/* ── Website — rounded window onto the marketing site ── */
.msc-website__intro { max-width: 760px; }
.msc-website__frame {
  width: 100%;
  max-height: 760px;
  overflow: hidden;
  border-radius: var(--radius-xlarge);
  border: var(--outline-small) solid var(--color-fg-quinary);
}
.msc-website__img { width: 100%; height: auto; display: block; }

/* ── Outcomes ── */
.msc-outcomes { display: flex; flex-direction: column; gap: var(--gap-2xlarge); }
.msc-outcomes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-2xlarge); }
.msc-metric { display: flex; flex-direction: column; gap: var(--gap-small); }
.msc-metric__value { font-size: var(--font-size-sub-headline); line-height: var(--line-height-sub-headline); font-weight: 500; color: var(--color-fg-primary); }
.msc-metric__label { font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-fg-tertiary); }

/* ── CTA ── */
.msc-do { display: flex; flex-direction: column; gap: var(--gap-2xlarge); }
.msc-do__text { display: flex; flex-direction: column; gap: var(--gap-medium); }
.msc-do__actions { display: flex; align-items: center; gap: var(--gap-large); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .msc-hero__title { font-size: 40px; line-height: 48px; }
  .msc-h2 { font-size: 28px; line-height: 36px; }
  .msc-meta { grid-template-columns: repeat(2, 1fr); row-gap: var(--gap-2xlarge); }
  .msc-two { grid-template-columns: 1fr; }
  .msc-outcomes__grid { grid-template-columns: 1fr; }
  .msc-carousel__head { flex-direction: column; align-items: flex-start; }
  .msc-screen-card { height: 420px; }
  .msc-section, .msc-block, .msc-two { padding: var(--gap-5xlarge) 0; }
  .msc-decisions { grid-template-columns: 1fr; gap: var(--gap-large); }
  .msc-app { padding-block: var(--gap-5xlarge); }
  .msc-appsband__inner { padding: var(--gap-5xlarge) var(--gap-large); }
}
@media (max-width: 480px) {
  .msc-hero__title { font-size: 34px; line-height: 42px; }
  .msc-meta { grid-template-columns: 1fr; }
  .msc-do__actions { flex-direction: column; align-items: stretch; }
  .msc-screen-card { height: 300px; }
}
/* ─────────────────────────────────────────────
   Project Detail / Case Study page
───────────────────────────────────────────── */

/* ── Hero — full-bleed #171717 with a frosted card (Figma 172:944) ── */
.pd-hero {
  position: relative;
  /* break out of the 976px content column to full viewport width */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 630px;
  background-color: #171717; /* non-interactive/background/secondary */
  overflow: hidden;
}

/* Frosted content card — bottom 48px, left aligned to the 976 content edge
   (112px from the screen edge at ≥1200, clamped to 24px on narrow screens) */
.pd-hero__card {
  position: absolute;
  left: max(var(--gap-large), calc((100vw - 976px) / 2));
  bottom: 48px;
  /* hug the (single-line) headline, but never exceed the viewport */
  width: max-content;
  max-width: calc(100vw - 2 * max(var(--gap-large), (100vw - 976px) / 2));
  padding: var(--gap-large); /* 24px */
  border-radius: var(--radius-large); /* 16px */
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: var(--gap-large); /* 24px — logo → body */
}

/* Client logo (or name fallback) */
.pd-hero__logo {
  display: block;
  height: 24px;
  width: auto;
  align-self: flex-start; /* SVGs otherwise stretch + self-center in the flex column */
}

.pd-hero__client {
  font-size: var(--font-size-subtitle);
  line-height: 1;
  font-weight: 500;
  color: var(--color-fg-secondary);
}

.pd-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small); /* 8px — headline → meta */
}

.pd-hero__headline {
  font-size: var(--font-size-sub-headline); /* 40px */
  line-height: var(--line-height-sub-headline); /* 48px */
  font-weight: 500;
  color: var(--color-fg-secondary); /* project/default/label #d3d9d5 */
  white-space: nowrap;
}

.pd-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--gap-medium); /* 16px */
  flex-wrap: wrap;
}

.pd-hero__tag {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: 400;
  color: var(--color-fg-tertiary); /* #999 */
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pd-hero__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-fg-tertiary);
  flex-shrink: 0;
}

/* Intro paragraph below the hero */
.pd-intro {
  max-width: 640px;
  margin: var(--gap-5xlarge) 0;
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-subtitle);
  color: var(--color-fg-tertiary);
}

/* Meta-strip chips wrapper */
.project-meta__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-small);
}

/* ── Back link ── */
.project-back {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xsmall);
  padding: var(--gap-3xlarge) 0 0;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: var(--color-fg-tertiary);
  transition: color 0.15s;
}

.project-back:hover {
  color: var(--color-fg-primary);
}

.project-back__arrow {
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s;
}

.project-back:hover .project-back__arrow {
  transform: translateX(-3px);
}

/* ── Year label (used in the next-project card meta) ── */
.project-hero__year {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: var(--color-fg-tertiary);
}

/* ── Meta strip ── */
.project-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-large);
  padding: var(--gap-large) 0;
  border-top: var(--outline-small) solid rgba(255, 255, 255, 0.08);
  border-bottom: var(--outline-small) solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--gap-5xlarge);
}

.project-meta__label {
  display: block;
  font-size: 11px;
  line-height: var(--line-height-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg-tertiary);
  margin-bottom: var(--gap-small);
}

.project-meta__value {
  display: block;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: var(--color-fg-primary);
}

/* ── Centered section ── */
.project-section {
  max-width: 640px;
  margin: 0 auto var(--gap-5xlarge);
}

.project-section__label {
  display: block;
  font-size: 11px;
  line-height: var(--line-height-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg-tertiary);
  margin-bottom: var(--gap-large);
}

.project-section__label::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin-top: var(--gap-small);
}

.project-section__heading {
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-subtitle);
  font-weight: 500;
  color: var(--color-fg-primary);
  margin-bottom: var(--gap-large);
}

.project-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium);
}

.project-section__body p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: var(--color-fg-tertiary);
}

/* ── Wide section (full 976 content width — screens / steps / gallery / columns) ── */
.project-wide {
  margin: 0 auto var(--gap-5xlarge);
}

.project-wide__body {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium);
  margin-bottom: var(--gap-3xlarge);
}

.project-wide__body p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: var(--color-fg-tertiary);
}

/* Two text columns under one heading (template "The Approach") */
.project-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2xlarge); /* 40px */
}

.project-columns p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: var(--color-fg-tertiary);
}

/* ── Screens row — phone mockups, staggered reveal ── */
.project-screens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--gap-large); /* 24px */
  align-items: start;
}

.project-screen {
  margin: 0;
  opacity: 0;
  transform: translateY(28px);
}

.project-screens.is-in .project-screen {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease var(--d, 0s), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}

.project-screen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-large); /* 16px */
  border: var(--outline-small) solid rgba(255, 255, 255, 0.1);
}

/* Raw UI screenshots get a device-like bezel */
.project-screen--framed img {
  border-radius: var(--radius-xlarge); /* 24px */
  border: 6px solid #26282b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.project-screen__caption {
  margin-top: var(--gap-medium);
  font-size: 11px;
  line-height: var(--line-height-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg-tertiary);
  text-align: center;
}

/* ── Sticky-phone scroll (loan flow) ── */
.pd-sticky {
  position: relative;
  /* height set inline: one 85vh beat per screen */
}

.pd-sticky__viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2xlarge); /* 40px */
  align-items: center;
}

.pd-sticky__steps {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xlarge); /* 40px */
}

.pd-sticky__step {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.35s ease;
}

.pd-sticky__step.is-active,
.pd-sticky__step:hover {
  opacity: 1;
}

.pd-sticky__step-caption {
  font-size: 11px;
  line-height: var(--line-height-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.pd-sticky__step-text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: var(--color-fg-primary);
  max-width: 380px;
}

.pd-sticky__phone {
  position: relative;
  height: 76vh;
}

.pd-sticky__screen {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.pd-sticky__screen.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pd-sticky__screen img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--radius-xlarge);
  border: 6px solid #26282b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ── Numbered steps (how the model works) ── */
.project-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-2xlarge); /* 40px */
  padding: var(--gap-3xlarge) 0 0;
  border-top: var(--outline-small) solid rgba(255, 255, 255, 0.08);
}

.project-step {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
  opacity: 0;
  transform: translateY(20px);
}

.project-steps.is-in .project-step {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease var(--d, 0s), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}

.project-step__num {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: 500;
  color: var(--color-accent);
}

.project-step__title {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 500;
  color: var(--color-fg-primary);
}

.project-step__text {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: 400;
  color: var(--color-fg-tertiary);
}

/* ── Gallery — wide artefacts (emails, partner flow) ── */
.project-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2xlarge) var(--gap-large);
}

.project-gallery__item {
  margin: 0;
  opacity: 0;
  transform: translateY(28px);
}

.project-gallery.is-in .project-gallery__item {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease var(--d, 0s), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}

.project-gallery__media {
  border-radius: var(--radius-medium);
  overflow: hidden;
  border: var(--outline-small) solid rgba(255, 255, 255, 0.1);
  background-color: #0d0f0c;
}

.project-gallery__media img {
  display: block;
  width: 100%;
  height: auto;
}

.project-gallery__caption {
  margin-top: var(--gap-medium);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: 400;
  color: var(--color-fg-tertiary);
}

/* Reveal animations respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .project-screen,
  .project-step,
  .project-gallery__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Split block (2-col text + image) ── */
.project-block {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--gap-5xlarge);
  align-items: center;
  margin-bottom: var(--gap-5xlarge);
}

.project-block--reverse {
  grid-template-columns: 3fr 2fr;
}

.project-block--reverse .project-block__copy {
  order: 2;
}

.project-block--reverse .project-block__visual {
  order: 1;
}

.project-block__copy {
  display: flex;
  flex-direction: column;
}

.project-block__label {
  display: block;
  font-size: 11px;
  line-height: var(--line-height-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg-tertiary);
  margin-bottom: var(--gap-large);
}

.project-block__label::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin-top: var(--gap-small);
}

.project-block__heading {
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-subtitle);
  font-weight: 500;
  color: var(--color-fg-primary);
  margin-bottom: var(--gap-large);
}

.project-block__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium);
}

.project-block__body p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: var(--color-fg-tertiary);
}

.project-block__visual {
  border-radius: var(--radius-medium);
  overflow: hidden;
  background-color: #0d0f0c;
  border: var(--outline-small) solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.project-block__visual--placeholder img {
  width: 35%;
  height: auto;
  object-fit: contain;
  opacity: 0.25;
}

/* ── Outcomes strip ── */
.project-outcomes {
  padding: var(--gap-5xlarge) 0;
  border-top: var(--outline-small) solid rgba(255, 255, 255, 0.08);
  border-bottom: var(--outline-small) solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--gap-5xlarge);
}

.project-outcomes__label {
  font-size: 11px;
  line-height: var(--line-height-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg-tertiary);
  margin-bottom: var(--gap-3xlarge);
}

.project-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-large);
}

.project-metric__value {
  display: block;
  font-size: var(--font-size-headline);
  line-height: var(--line-height-headline);
  font-weight: 500;
  color: var(--color-fg-primary);
  margin-bottom: var(--gap-xsmall);
}

.project-metric__label {
  display: block;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: var(--color-fg-tertiary);
}

/* ── Next project ── */
.project-next {
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium);
  padding: var(--gap-3xlarge) 0 var(--gap-5xlarge);
  cursor: pointer;
  transition: opacity 0.15s;
}

.project-next:hover {
  opacity: 0.8;
}

.project-next__eyebrow {
  font-size: 11px;
  line-height: var(--line-height-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg-tertiary);
}

.project-next__card {
  display: flex;
  align-items: center;
  gap: var(--gap-3xlarge);
  padding: var(--gap-3xlarge);
  border-radius: var(--radius-medium);
  border: var(--outline-small) solid rgba(255, 255, 255, 0.08);
  background-color: #0d0f0c;
  transition: border-color 0.2s;
}

.project-next:hover .project-next__card {
  border-color: rgba(255, 255, 255, 0.2);
}

.project-next__logo {
  flex-shrink: 0;
  opacity: 0.8;
}

.project-next__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xsmall);
}

.project-next__meta {
  display: flex;
  align-items: center;
  gap: var(--gap-small);
}

.project-next__headline {
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-subtitle);
  font-weight: 500;
  color: var(--color-fg-primary);
}

.project-next__arrow {
  flex-shrink: 0;
  font-size: var(--font-size-title);
  color: var(--color-fg-tertiary);
  transition: transform 0.2s, color 0.15s;
}

.project-next:hover .project-next__arrow {
  transform: translateX(4px);
  color: var(--color-fg-primary);
}

/* ── Responsive ── */

@media (max-width: 768px) {
  /* Hero card: allow the headline to wrap, shrink type */
  .pd-hero {
    min-height: 520px;
  }
  .pd-hero__card {
    width: auto;
    max-width: calc(100vw - 48px);
  }
  .pd-hero__headline {
    white-space: normal;
    font-size: 30px;
    line-height: 38px;
  }

  .project-meta {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--gap-2xlarge);
  }

  .project-block {
    grid-template-columns: 1fr;
    gap: var(--gap-3xlarge);
  }

  .project-columns {
    grid-template-columns: 1fr;
    gap: var(--gap-medium);
  }

  .project-screens {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-gallery {
    grid-template-columns: 1fr;
  }

  .project-block--reverse .project-block__copy {
    order: 1;
  }

  .project-block--reverse .project-block__visual {
    order: 2;
  }

  .project-next__card {
    gap: var(--gap-2xlarge);
  }
}

@media (max-width: 480px) {
  .project-meta {
    grid-template-columns: 1fr;
  }

  .project-screens,
  .project-steps {
    grid-template-columns: 1fr;
  }

  .project-outcomes__grid {
    grid-template-columns: 1fr;
    gap: var(--gap-3xlarge);
  }

  .project-metric__value {
    font-size: var(--font-size-sub-headline);
    line-height: var(--line-height-sub-headline);
  }

  .project-next__logo {
    display: none;
  }
}