/* ==========================================================================
   Work carousel — 1200 x 700 slides with grouped progress indicator
   Built from Figma "MC Portfolio 2026" → Website Designs.
   ========================================================================== */

@font-face {
  font-family: "DIN";
  src: url("../fonts/DINWebPro-Medium.woff") format("woff");
  font-weight: 500 700;
  font-display: swap;
}

:root {
  --wc-bg: #000;
  --wc-text: #eeeeec;          /* primary text */
  --wc-text-dim: #7c7b74;      /* secondary text */
  --wc-gray-text: #afafaf;     /* body copy on slides */
  --wc-link: #fff;             /* links */
  --wc-highlight: #d1ff47;     /* link hover, "after" chips, outcome icons */
  --wc-highlight-2: #FE3D02;   /* "before" chips */
  --wc-seg-inactive: #3b3a37;  /* progress segments */
  --wc-seg-set: #6f6d66;       /* playing segment track / hover */
  --wc-seg-active: var(--wc-highlight); /* fill of the playing segment */
  --wc-seg-hover: #fff;        /* other project's group on hover */
  --wc-radius: 12px;
  --wc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wc-duration: 850ms;
  --wc-gutter: 28px;
  --wc-display: "DIN Alternate", "DIN", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wc-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--wc-bg);
  color: var(--wc-text);
  font-family: var(--wc-display);
  font-weight: 700;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Links: white, highlight on rollover */
a { color: var(--wc-link); text-decoration: none; transition: color 150ms; }
a:focus-visible { color: var(--wc-highlight); }
/* Hover only on devices that truly hover: on touch screens a :hover style
   makes iOS Safari treat the first tap as a hover and need a second tap. */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--wc-highlight); }
}

/* ---------- Header ---------- */
.wc-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 72px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--wc-gutter);
  line-height: 1.5;
  letter-spacing: -0.16px;
  pointer-events: none;
}
.wc-header > * { pointer-events: auto; }
/* Name in the header on every page (Figma: DIN Alternate Bold 24/150%, -1%) */
.wc-name {
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: -0.24px;
}
.wc-nav { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }

/* ---------- Stage & slides ---------- */
.wc-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.wc-slide {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: inline-size;   /* slide content scales with the frame */
  will-change: transform, opacity;
  transition:
    transform var(--wc-duration) var(--wc-ease),
    opacity var(--wc-duration) var(--wc-ease);
}
.wc-stage.is-dragging .wc-slide,
.wc-stage.no-anim .wc-slide { transition: none; }
.wc-slide.is-peek { cursor: pointer; }

/* Frame: design canvas is 1200 x 700. --u = 1 design px. */
.wc-frame {
  --u: calc(100cqw / 1200);
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 700;
  border-radius: var(--wc-radius);
  overflow: hidden;
  background: var(--slide-bg, #000);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
  font-family: var(--wc-body);
  font-weight: 400;
  letter-spacing: 0.07px;
  isolation: isolate;
  transform: translateZ(0);        /* Safari: keep rounded corners clipping video */
}

/* Frame stroke: drawn on a layer above the slide content so edge-to-edge
   videos and images can't cover it */
.wc-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #222;
  pointer-events: none;
}

/* Plain media slides (older projects) */
.wc-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--fit, cover);
  background: transparent;
}
.wc-frame.is-multi { padding: 5% 6%; }
.wc-frame.is-multi .wc-media {
  width: auto;
  height: 100%;
  max-width: calc((100% - 4% * 2) / 2);
  object-fit: contain;
  flex: 0 1 auto;
}

/* ---------- Designed layouts: hero / phones / text ---------- */
.wc-body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: calc(40 * var(--u));
  padding: calc(20 * var(--u)) calc(60 * var(--u));
}

.wc-text {
  flex: 0 0 auto;
  width: calc(360 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}
.wc-text h2,
.wc-text h3,
.wc-outcomes h2,
.wc-outcome h3 {
  margin: 0;
  font-family: var(--wc-display);
  font-weight: 700;
  color: #fff;
}
.wc-text h2 { font-size: calc(28 * var(--u)); line-height: 1.2; }
.wc-layout-hero .wc-text h2 { font-size: calc(40 * var(--u)); }
.wc-text h3 { font-size: calc(20 * var(--u)); line-height: 1.4; }
.wc-text p,
.wc-outcome p,
.wc-outcome ul {
  margin: 0;
  font-size: calc(15 * var(--u));
  line-height: 1.4;
  color: var(--wc-gray-text);
}
.wc-text p + p,
.wc-outcome p + p,
.wc-outcome p + ul { margin-top: calc(12 * var(--u)); }
.wc-meta { font-size: calc(15 * var(--u)); line-height: 1.4; color: var(--wc-gray-text); }
.wc-role { color: var(--wc-highlight); }

/* Hero: title left, device video fills the rest of the frame */
.wc-hero-media {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  align-self: stretch;
  margin: calc(-20 * var(--u)) 0;
  height: calc(100% + 40 * var(--u));
}
/* The hero video always plays at the full frame height (minus an optional
   "inset", in design px); its width follows the video's own shape and it
   stays centred in the media column, even if slightly wider than it. */
.wc-hero-media {
  box-sizing: border-box;
  padding: calc(var(--media-inset, 0) * var(--u)) 0;
  display: flex;
  justify-content: center;
}
.wc-hero-media .wc-media {
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

/* Device: one recording inside a still device frame (older iPhone, iPad).
   Screen + frame are positioned in design px by work-carousel.js. */
.wc-device-screen,
.wc-device-frame,
.wc-device-mask {
  position: absolute;
  display: block;
}
.wc-device-screen { overflow: hidden; background: #000; }
.wc-device-screen .wc-media { object-fit: cover; }
.wc-device-frame { z-index: 1; pointer-events: none; user-select: none; }
.wc-device-frame.is-under { z-index: 0; }   /* iPhone 4: recording on top */
.wc-device-mask { position: absolute; background: #000; pointer-events: none; }

/* Text-only hero (title card, no device yet): keep the title on phones
   and narrow windows (.is-narrow: see below) */
.wc-stage.is-narrow .wc-frame.is-text-only .wc-body { justify-content: flex-start; padding: 0 24px; }
.wc-stage.is-narrow .wc-frame.is-text-only .wc-body > .wc-text { display: flex; width: auto; gap: 6px; }
.wc-stage.is-narrow .wc-frame.is-text-only .wc-text h2 { font-size: 24px; }
.wc-stage.is-narrow .wc-frame.is-text-only .wc-meta { font-size: 13px; }

/* Phones: iPhone frames with captions underneath */
.wc-mocks {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(40 * var(--u));
}
.wc-phone {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  padding-top: calc(20 * var(--u));
}
/* iPhone 15 Pro frame (img/devices/iphone-15-pro-frame.png, transparent screen) sits
   over the screen. Figma size 292 x 599.345. */
.wc-phone-device {
  position: relative;
  width: calc(292 * var(--u));
  aspect-ratio: 292 / 599.345;
}
.wc-phone-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.wc-phone-screen {
  position: absolute;
  inset: 1.92% 4.48% 1.84% 4.4%;
  border-radius: calc(29.787 * var(--u));
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
.wc-phone-screen .wc-media { object-fit: cover; }
.wc-phone-label {
  margin: 0;
  text-align: center;
  font-size: max(11px, calc(14 * var(--u)));
  line-height: 1.4;
  color: #fff;
}
.wc-phone-label span { color: var(--wc-gray-text); white-space: pre-line; }

/* Callout chips (Figma "chip"): pill + 70px leader line pointing at the phone */
.wc-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  color: var(--chip-bg);
  opacity: 0;
  transform: translateY(calc(6 * var(--u)));
  transition: opacity 250ms ease, transform 250ms ease;
  pointer-events: none;
}
.wc-chip--orange { --chip-bg: var(--wc-highlight-2); --chip-fg: #fff; }
.wc-chip--green { --chip-bg: var(--wc-highlight);   --chip-fg: #000; }
.wc-chip-line {
  flex: 0 0 auto;
  width: calc(70 * var(--u));
  height: 1px;
  background: currentColor;
}
.wc-chip-pill {
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: calc(14 * var(--u));
  line-height: 1.4;
  white-space: nowrap;
}
/* Cascade in (JS adds .chips-in 2s after the slide becomes active) */
.wc-slide.chips-in .wc-chip {
  opacity: 1;
  transform: none;
  transition:
    opacity 500ms var(--wc-ease) calc(var(--i, 0) * 180ms),
    transform 600ms var(--wc-ease) calc(var(--i, 0) * 180ms);
}

/* Text slide (Outcomes) */
.wc-outcomes {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(40 * var(--u));
  padding: calc(20 * var(--u)) calc(60 * var(--u));
}
.wc-outcomes h2 { font-size: calc(40 * var(--u)); line-height: 1.2; }
.wc-outcome-cols { display: flex; gap: calc(40 * var(--u)); }
.wc-outcome {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}
.wc-outcome-head { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.wc-outcome h3 { font-size: calc(20 * var(--u)); line-height: 1.4; white-space: nowrap; }
.wc-outcome-icon {
  flex: 0 0 auto;
  display: flex;
  padding: calc(6 * var(--u));
  border-radius: 999px;
  background: var(--wc-highlight);
}
.wc-outcome-icon img { display: block; width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.wc-outcome ul { padding-left: calc(22.5 * var(--u)); }
.wc-outcome li::marker { font-size: 0.8em; }
.wc-outcome-chev { display: none; }   /* phones only (expand / collapse) */
.wc-frame.no-anim .wc-outcome-chev,
.wc-frame.no-anim .wc-outcome-body,
.wc-frame.no-anim .wc-outcome-inner { transition: none !important; }   /* instant reset */

/* ---------- Soft text fade on slide change ---------- */
.wc-fade {
  opacity: 0;
  transform: translateY(calc(8 * var(--u)));
  transition: opacity 350ms ease, transform 350ms ease;
}
.wc-slide.is-current .wc-fade {
  opacity: 1;
  transform: none;
  transition:
    opacity 900ms ease calc(250ms + var(--fi, 0) * 120ms),
    transform 900ms var(--wc-ease) calc(250ms + var(--fi, 0) * 120ms);
}

/* Narrow (JS sets .is-narrow on the stage for phone-width windows, < 768px,
   and desktop frames <= 700px wide): drop the text column and chips — the
   page caption already names the project; on phones the text opens in the
   overlay — and centre the devices. */
.wc-stage.is-narrow .wc-body > .wc-text,
.wc-stage.is-narrow .wc-chip { display: none; }
.wc-stage.is-narrow .wc-body { justify-content: center; }
.wc-stage.is-narrow .wc-mocks,
.wc-stage.is-narrow .wc-hero-media { flex: 0 1 auto; }
.wc-stage.is-narrow .wc-mocks { gap: calc(60 * var(--u)); }

/* Compact Outcomes (phones, and desktop frames <= 700px wide): sections
   stack and expand / collapse on tap, one open at a time; the first
   starts open. Scrolls if it doesn't fit. */
.wc-frame.is-compact .wc-outcomes {
  justify-content: flex-start;
  gap: 20px;
  padding: 16px 32px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.wc-frame.is-compact .wc-outcomes h2 { margin-top: auto; font-size: 28px; }
.wc-frame.is-compact .wc-outcome-cols { flex-direction: column; gap: 0; margin-bottom: auto; }
.wc-frame.is-compact .wc-outcome { flex: 0 0 auto; gap: 0; border-top: 1px solid #222; }
.wc-frame.is-compact .wc-outcome:last-child { border-bottom: 1px solid #222; }
.wc-frame.is-compact .wc-outcome-head {
  gap: 10px;
  min-height: 56px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.wc-frame.is-compact .wc-outcome-head:focus-visible h3 { color: var(--wc-highlight); }
.wc-frame.is-compact .wc-outcome h3 { font-size: 20px; }
.wc-frame.is-compact .wc-outcome p,
.wc-frame.is-compact .wc-outcome ul { display: block; font-size: 15px; }
.wc-frame.is-compact .wc-outcome p + p,
.wc-frame.is-compact .wc-outcome p + ul { margin-top: 12px; }
.wc-frame.is-compact .wc-outcome ul { padding-left: 22.5px; }
.wc-frame.is-compact .wc-outcome-icon { padding: 6px; }
.wc-frame.is-compact .wc-outcome-icon img { width: 16px; height: 16px; }
.wc-frame.is-compact .wc-outcome-chev {
  display: flex;
  margin-left: auto;
  color: var(--wc-text-dim);
  transition: transform 0.3s ease;
}
.wc-frame.is-compact .wc-outcome-chev svg { width: 20px; height: 20px; }
.wc-frame.is-compact .wc-outcome.is-open .wc-outcome-chev { transform: rotate(180deg); }
.wc-frame.is-compact .wc-outcome-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.wc-frame.is-compact .wc-outcome.is-open .wc-outcome-body { grid-template-rows: 1fr; }
.wc-frame.is-compact .wc-outcome-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.wc-frame.is-compact .wc-outcome-inner > :last-child { margin-bottom: 20px; }
.wc-frame.is-compact .wc-outcome.is-open .wc-outcome-inner {
  opacity: 1;
  transition: opacity 0.3s ease 0.05s;
}

/* ---------- Bottom bar: caption + progress ---------- */
.wc-caption {
  position: fixed;
  left: var(--wc-gutter);
  bottom: 18px;             /* title + subtitle; top lines up with the progress bar */
  z-index: 40;
  max-width: calc(50% - 160px);
  line-height: 1.5;
  letter-spacing: -0.16px;
  transition: opacity 200ms, color 150ms;
}
.wc-caption:not([href]) { color: var(--wc-text); cursor: default; }
/* Title: DIN Alternate Bold 16/24 (Figma caption), desktop and phones */
.wc-caption-title {
  display: block;
  font-family: var(--wc-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}
.wc-caption-sub {
  display: block;
  font-family: var(--wc-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: #afafaf;
}
.wc-caption.is-swapping { opacity: 0; }
.wc-caption.is-covered { opacity: 0; pointer-events: none; }   /* phones: text overlay open */

.wc-progress {
  position: fixed;
  left: 50%;
  bottom: 36px;             /* keeps the bar where it was with the taller targets */
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1120px;
  padding: 0;
}
/* Figma "Progress bar": one pill per project, 16px segments with 2px gaps.
   Other projects: 3px tall, dark. Current project: 4px tall, the playing
   segment widens to 32px and fills with the highlight color.

   Each segment is a 28px-tall transparent button (12px of hover/click area
   above and below the bar); the visible bar is the .wc-seg-bar inside it.
   State rules set --h (bar height) and --bg (bar color) on the button. */
.wc-group {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}
.wc-seg {
  --h: 3px;
  --bg: var(--wc-seg-inactive);
  position: relative;
  display: block;
  /* Explicit width (not flex-basis): Safari ignores flex-basis on <button>s
     with native appearance and collapses them to dots */
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 16px;
  min-width: 0;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: width 400ms var(--wc-ease);
}
.wc-seg-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--h);
  margin-top: calc(var(--h) / -2);
  overflow: hidden;
  background: var(--bg);
  transition:
    height 250ms var(--wc-ease),
    margin-top 250ms var(--wc-ease),
    background-color 200ms ease;
}
/* Pill ends on each project's first and last segment */
.wc-seg:first-child .wc-seg-bar { border-radius: 32px 0 0 32px; }
.wc-seg:last-child .wc-seg-bar  { border-radius: 0 32px 32px 0; }
.wc-seg:only-child .wc-seg-bar  { border-radius: 32px; }

.wc-group.is-current .wc-seg {
  --h: 4px;
  --bg: var(--wc-seg-set);
}
.wc-seg.is-active { width: 32px; }

/* ---- Hover (mouse only) ----
   Hovering a project's group expands all of its segments together
   (16 → 24px; the playing segment 32 → 48px), easing back on leave.
   Current project: segments stay individually clickable, so the one under
   the pointer also turns white (the playing segment keeps its fill).
   Other projects: the whole group is one target (it always opens the
   project's first slide), so all its segments turn white and grow to 4px. */
@media (hover: hover) {
  .wc-group:hover .wc-seg { width: 24px; }
  .wc-group:hover .wc-seg.is-active { width: 48px; }
  .wc-group.is-current .wc-seg:not(.is-active):hover { --bg: var(--wc-seg-hover); }
  .wc-group:not(.is-current):hover .wc-seg {
    --h: 4px;
    --bg: var(--wc-seg-hover);
  }
}
.wc-seg-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--wc-seg-active);
}
.wc-seg:not(.is-active) .wc-seg-fill { opacity: 0; }

/* ---------- Arrows (appear on hover) ---------- */
.wc-arrow {
  position: fixed;
  top: 50%;
  z-index: 45;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border: 1px solid rgba(150, 150, 160, 0.25);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(15, 15, 15, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  opacity: 0;
  filter: blur(4px);
  transform: scale(0.75);
  pointer-events: none;
  transition: opacity 250ms var(--wc-ease), transform 250ms var(--wc-ease), filter 250ms var(--wc-ease), color 150ms;
}
.wc-arrow svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .wc-arrow:hover { color: var(--wc-highlight); }
}
.wc-arrow.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  pointer-events: auto;
}
.wc-arrow:active { transform: scale(0.92); }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  :root { --wc-gutter: 24px; }
  .wc-nav { gap: 16px; }
  .wc-caption {
    max-width: none;
    right: var(--wc-gutter);
    bottom: 64px;
  }
  .wc-progress { bottom: 20px; }
  /* Other projects' bars: half width (8px segments instead of 16px) */
  .wc-group:not(.is-current) .wc-seg { width: 8px; }
  .wc-arrow { display: none; }
  .wc-frame.is-multi { padding: 6% 4%; }
}

/* Text overlay, its button and on-mock chips only exist on phones */
.wc-overlay, .wc-more, .wc-mchip { display: none; }

/* ---------- Phones: big mockups + tap-to-read overlay ----------
   From Figma "Mobile – Work page (390 × 844)". JS sizes "tall" frames to the
   space between the header and the caption (--m-w x --m-h: 342 x 632 at
   390 x 844, starting 28px below the 62px header). Mocks are the desktop
   size (292 wide), capped so device + label fit the height. */
@media (max-width: 767px) {
  .wc-header {
    height: 62px;
    align-items: flex-start;
    padding-top: 16px;
  }
  .wc-name { font-size: 20px; line-height: 30px; letter-spacing: -0.2px; }
  .wc-nav { margin-top: 6px; }

  .wc-frame.is-tall {
    --mock-w: min(292px, 85vw, (var(--m-h) - 32px) * 0.4872);   /* phone mock width */
    aspect-ratio: auto;
    background: var(--slide-bg, transparent);
    border-radius: 0;
    overflow: visible;
  }
  .wc-frame::after { display: none; }   /* phones: no stroke around any slide */

  /* Phones layout */
  .wc-frame.is-tall .wc-body { padding: 0; gap: 0; justify-content: center; }
  .wc-frame.is-tall .wc-mocks {
    --pw: var(--mock-w);
    flex: 0 0 auto;
    height: auto;
    gap: 40px;
  }
  /* 2+ mocks: full size in a row you swipe through (JS sets "left" while
     dragging and eases it to the nearest phone on release; a position
     change, not a transform, so iOS Safari keeps drawing video) */
  .wc-frame.is-tall.is-pan .wc-body { justify-content: flex-start; }
  .wc-frame.is-tall .wc-mocks.is-multi {
    position: relative;
    left: 0;
    width: max-content;
    justify-content: flex-start;
    padding: 0 calc((var(--m-w) - var(--pw)) / 2);
    transition: left 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .wc-frame.is-tall .wc-mocks.no-pan { transition: none; }
  .wc-frame.is-tall .wc-phone { height: auto; padding-top: 0; gap: 12px; }
  .wc-frame.is-tall .wc-phone-device { width: var(--pw); }
  .wc-frame.is-tall .wc-phone-screen { border-radius: calc(var(--pw) * 0.102); }
  .wc-frame.is-tall .wc-phone-label { font-size: 14px; }

  /* Hero: the area runs edge to edge, 30px under the header to 8px above
     the region's end, and crops the device */
  .wc-frame.is-tall .wc-hero-media {
    position: absolute;
    top: -30px;
    right: calc(var(--wc-gutter) * -1);
    bottom: -8px;
    left: calc(var(--wc-gutter) * -1);
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    align-items: center;
    overflow: hidden;
  }
  .wc-frame.is-tall .wc-hero-media .wc-media {
    flex: 0 0 auto;
    width: auto;
    height: calc(var(--m-h) * var(--m-zoom, 1.25));
    max-height: none;
  }
  /* Hero "zoom" phone: rests at the same size and place as the phone mocks
     on the other slides (centre = 14px + half the region height inside the
     hero area, which starts 30px above the region), then zooms to 150% */
  .wc-frame.is-tall .wc-zoom-device {
    --pu: calc(var(--mock-w) / 292);
    top: calc(14px + var(--m-h) / 2 + var(--zy, 0) * var(--pu));
  }

  /* Outcomes on phones: fill the tall frame (type + sections: .is-compact) */
  .wc-frame.is-tall .wc-outcomes {
    top: -34px;
    bottom: -3px;
    padding: 0;
  }

  /* Overlay: full width, black gradient (clear at the top, 90% from 65%
     down), text aligned to the bottom; fades in on tap */
  .wc-overlay {
    display: block;
    position: absolute;
    top: -34px;
    right: calc(var(--wc-gutter) * -1);
    bottom: -122px;            /* to the bottom of the screen (region ends 122px up) */
    left: calc(var(--wc-gutter) * -1);
    z-index: 20;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* clear at the top, 90% black from 65.3% of the Figma overlay's height
       (region + 37px) down to the bottom of the screen */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.9) calc((var(--m-h) + 37px) * 0.653));
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms ease, visibility 0s linear 250ms;
  }
  .wc-slide.is-reading .wc-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity 250ms ease;
  }
  /* Same type as the desktop slide text (.wc-text): 28px DIN title,
     20px DIN subheads, 15px Helvetica body in --wc-gray-text, 16px gaps */
  .wc-overlay-text {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 16px;
    padding: var(--wc-gutter);
    padding-bottom: calc(var(--wc-gutter) + 119px);   /* text stays above the caption line */
    transform: translateY(8px);
    transition: transform 400ms var(--wc-ease);
  }
  .wc-slide.is-reading .wc-overlay-text { transform: none; }
  .wc-overlay h2,
  .wc-overlay h3 {
    margin: 0;
    font-family: var(--wc-display);
    font-weight: 700;
    color: #fff;
  }
  .wc-overlay h2 { font-size: 28px; line-height: 1.2; }
  .wc-overlay h3 { font-size: 20px; line-height: 1.4; }
  .wc-overlay .wc-meta { margin-top: 4px; font-size: 15px; line-height: 1.4; }
  .wc-overlay p {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--wc-gray-text);
  }
  .wc-overlay p + p { margin-top: 12px; }
  /* Callout chips on top of the phone mocks (Figma "IG Search 02 / 05"
     mobile): no leader line; left / right edges line up with the page
     gutter; "--mt" is the top in phone design px (292 wide). Cascade in
     with the desktop chips (.chips-in). */
  .wc-frame.is-tall .wc-mchip {
    display: block;
    position: absolute;
    z-index: 3;
    top: calc(var(--mt, 0) * var(--pw) / 292);
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--chip-bg);
    color: var(--chip-fg);
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 250ms ease, transform 250ms ease;
  }
  .wc-frame.is-tall .wc-mchip--left  { left:  calc((var(--pw) - var(--m-w)) / 2); }
  .wc-frame.is-tall .wc-mchip--right { right: calc((var(--pw) - var(--m-w)) / 2); }
  .wc-slide.chips-in .wc-frame.is-tall .wc-mchip {
    opacity: 1;
    transform: none;
    transition:
      opacity 500ms var(--wc-ease) calc(var(--i, 0) * 180ms),
      transform 600ms var(--wc-ease) calc(var(--i, 0) * 180ms);
  }
  /* Swipeable rows: chips on the phones out of view stay hidden (JS marks
     the phone the row is panned to .is-active) */
  .wc-frame.is-tall .wc-mocks.is-multi .wc-phone:not(.is-active) .wc-mchip {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 200ms ease, transform 200ms ease;
  }

  /* + button, right of the caption; shows on slides that have text */
  .wc-caption { right: calc(var(--wc-gutter) + 52px); }
  .wc-more {
    display: flex;
    position: fixed;
    right: var(--wc-gutter);
    bottom: 66px;
    z-index: 45;
    width: 36px;
    height: 36px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(150, 150, 160, 0.3);
    border-radius: 999px;
    color: #fff;
    background: rgba(30, 30, 30, 0.8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    transition: opacity 250ms var(--wc-ease), transform 250ms var(--wc-ease), background-color 200ms;
  }
  .wc-more.is-available { opacity: 1; transform: none; pointer-events: auto; }
  .wc-more svg { width: 20px; height: 20px; }
  .wc-more { color: var(--wc-text); }
  .wc-more .wc-more-x,
  .wc-more.is-open .wc-more-i { display: none; }
  .wc-more.is-open .wc-more-x { display: block; width: 18px; height: 18px; }
  .wc-more.is-open { background: #fff; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --wc-duration: 1ms; }
  .wc-fade, .wc-chip, .wc-mchip { transform: none !important; }
}

/* ==========================================================================
   About & Contact (Figma "About" 270:8866, "Contact" 297:9900)
   One full-screen CSS grid of square cells. The MC logo (2 x 1 cells) and
   the text block (5 x 2 cells) are placed in it as grid items; shape-grid.js
   adds a shape for every remaining cell and the grid flows them around the
   logo and text (grid-auto-flow: dense). Resizing just reflows the grid.
   ========================================================================== */

/* Header nav: current page bright, others dim */
.wc-nav a { color: var(--wc-text-dim); }
.wc-nav a[aria-current="page"] { color: var(--wc-text); }
.wc-nav a:focus-visible { color: var(--wc-highlight); }
@media (hover: hover) and (pointer: fine) {
  .wc-nav a:hover { color: var(--wc-highlight); }
}

:root {
  --sg-grey: #1a1a1a;          /* resting shape color */
}

/* ---------- The grid ---------- */
.sg-grid {
  --cell: 84px;                /* shape / cell size */
  --logo-col: 2;               /* logo + text start column */
  --text-cols: 5;              /* text block width in cells */
  --text-rows: 2;              /* text block height in cells */
  --logo-row: 4;               /* set by shape-grid.js to centre vertically */
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--cell));
  grid-template-rows: repeat(auto-fill, var(--cell));
  grid-auto-rows: var(--cell);
  grid-auto-flow: dense;
  place-content: center;
  overflow: hidden;
}

/* MC logo: 2 x 1 cells, always highlighted. Sized by width + its 2:1
   shape (not height: 100%, which Safari resolves against the whole page),
   and layered above the shape cells. */
.sg-logo {
  grid-column: var(--logo-col) / span 2;
  grid-row: var(--logo-row);
  align-self: start;
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
}

/* Text block: 5 x 2 cells under the logo, text centred in the block */
.sg-text {
  grid-column: var(--logo-col) / span var(--text-cols);
  grid-row: var(--text-row, 5) / span var(--text-rows);
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--wc-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.0454px;
  color: var(--wc-gray-text);
}
.pg-bio p { margin: 0; }
.pg-bio p + p { margin-top: 8px; }
.pg-bio a { color: var(--wc-link); }
.pg-bio a:focus-visible { color: var(--wc-highlight); }
@media (hover: hover) and (pointer: fine) {
  .pg-bio a:hover { color: var(--wc-highlight); }
}

/* Contact links */
.pg-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.pg-bio .pg-links a {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  color: var(--wc-link);           /* white text, grey icons (Figma) */
}
.pg-links img { display: block; width: 24px; height: 24px; flex: 0 0 auto; }
.pg-bio .pg-links a:focus-visible { color: var(--wc-highlight); }
@media (hover: hover) and (pointer: fine) {
  .pg-bio .pg-links a:hover { color: var(--wc-highlight); }
}

/* Entrance fade for the logo and text */
.pg-fade {
  opacity: 0;
  transform: translateY(8px);
  animation: pg-in 900ms var(--wc-ease) 150ms forwards;
}
.sg-text .pg-fade, .pg-fade + .pg-fade { animation-delay: 270ms; }
@keyframes pg-in { to { opacity: 1; transform: none; } }

/* ---------- Shapes (one per remaining cell) ---------- */
.sg-cell {
  position: relative;
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--fade, 1800ms) ease-in-out;
}
.sg-cell.is-on { opacity: 1; }
.sg-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  color: var(--sg-grey);
  /* keep the highlight color while fading out, then drop back to grey */
  transition: color 0s linear var(--fade, 1800ms);
}
/* Hover: fade in to highlight 1 */
.sg-cell.is-hot { opacity: 1; transition: opacity 250ms ease-out; }
.sg-cell.is-hot .sg-shape {
  color: var(--wc-highlight);
  transition: color 250ms ease-out;
}
/* Click: pinned on the highlight color until clicked again */
.sg-cell.is-pinned { opacity: 1; transition: opacity 250ms ease-out; }
.sg-cell.is-pinned .sg-shape {
  color: var(--wc-highlight);
  transition: color 250ms ease-out;
}
.sg-cell.no-anim, .sg-cell.no-anim .sg-shape { transition: none !important; }

/* Phones: smaller cells; logo in the first column and the text spans the
   full width (5 cells is too narrow), with rows to fit (shape-grid.js) */
@media (max-width: 767px) {
  .sg-grid { --cell: 51px; --logo-col: 1; }
  .sg-text { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-fade { animation: none; opacity: 1; transform: none; }
  .sg-cell, .sg-shape { transition: none !important; }
}

/* ---------- Hero "zoom": phone recording that pushes in and back out ----------
   The recording plays inside the iPhone 15 Pro frame; work-carousel.js sets
   --z (scale) and --zy (vertical offset, design px) from the video's time.
   Size and position change (not a transform) so iOS Safari keeps drawing the
   video. --pu = px per design px of the phone: the frame's --u on desktop,
   ~80% of the screen width on phones. Rest size = Figma 292 x 599.345. */
.wc-hero-media.wc-zoom { position: relative; }
.wc-zoom-device {
  --pu: var(--u);
  --pw: calc(292 * var(--pu) * var(--z, 1));
  position: absolute;
  left: 50%;
  top: calc(50% + var(--zy, 0) * var(--pu));
  width: var(--pw);
  height: calc(var(--pw) * 599.345 / 292);
  margin-left: calc(var(--pw) / -2);
  margin-top: calc(var(--pw) * 599.345 / 292 / -2);
}
.wc-zoom-device .wc-phone-screen { border-radius: calc(var(--pw) * 0.102); }
.wc-frame .wc-hero-media .wc-zoom-device .wc-media {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
@media (max-width: 767px) {
  /* phones: size + rest position set in the "Phones" block above */
}

/* Touch: respond to taps immediately (no double-tap-to-zoom wait) */
a, button, .wc-seg, .wc-arrow { touch-action: manipulation; }