/* ==========================================================================
   v2 — "Vitality" layer. Loaded after styles.css.
   Warm paper + night blocks, editorial serif headlines with one italic word,
   product screens always inside a browser frame, and small motion with purpose.
   Every animation is wrapped for prefers-reduced-motion.
   ========================================================================== */

@font-face { font-family: "IBM Plex Serif"; src: url("../fonts/ibm-plex-serif-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("../fonts/ibm-plex-serif-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("../fonts/ibm-plex-serif-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("../fonts/ibm-plex-serif-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --bg: #f4f5f6;
  --surface: #e9ebee;
  --line: #d9dce0;
  --ink-2: #2b2d31;
  --muted: #565a61;
  --accent: #c23a1c;
  --night: #101216;
  --night-2: #1b1d23;
  --night-ink: #f3efe6;
  --night-ink-2: #d6d1c5;
  --night-muted: #b3afa4;
  --night-line: #34363e;
  --shadow-frame: 0 1px 0 rgba(20, 18, 12, 0.05), 0 24px 48px -24px rgba(20, 18, 12, 0.35);
}
body { background: var(--bg); }

/* ---- Headlines: serif, with one italic accent word ---------------------- */
.hero__statement,
.case-hero__title,
.about-hero .case-hero__title,
.h2,
.h2--ed,
.work__title,
.case-contact__title,
.contact-panel__title,
.next-case__title,
.decision__title {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.hero__statement { font-size: clamp(2.25rem, 5.6vw, 4.25rem); line-height: 1.06; letter-spacing: -0.028em; }
.case-opening .case-hero__title,
.about-hero .case-hero__title { font-size: clamp(2.5rem, 5vw, 4.75rem); line-height: 1.04; letter-spacing: -0.03em; }
.work__title { text-transform: none; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -0.02em; }
.h2, .h2--ed { line-height: 1.1; }
em.it { font-style: normal; font-weight: inherit; color: var(--accent); }
.night em.it { color: #ff7a59; }

/* ---- Product screens live in a browser frame ---------------------------- */
.case .shot {
  padding-top: 30px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-frame);
}
.case .shot::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 30px;
  background: linear-gradient(#f1f2f4, #e8eaed); border-bottom: 1px solid var(--line); z-index: 1;
}
.case .shot::after {
  content: ""; position: absolute; left: 13px; top: 10px; width: 10px; height: 10px; border-radius: 50%; z-index: 2;
  background: #ff5f57; box-shadow: 16px 0 0 #febc2e, 32px 0 0 #28c840;
}
.case .shot--natural { background: var(--case-bg); }
.case .fig-full img { border-radius: 14px; box-shadow: var(--shadow-frame); }

/* ---- Night blocks (full-bleed) ----------------------------------------- */
.night {
  --ink: var(--night-ink); --ink-2: var(--night-ink-2); --muted: var(--night-muted);
  --line: var(--night-line); --rule: var(--night-line); --accent: #ff7a59;
  background-color: #101216; color: var(--night-ink);
  box-shadow: 0 0 0 100vmax #101216; clip-path: inset(0 -100vmax);
}
.night .label, .night .sub-label { color: var(--night-muted); }
.night .h2, .night .h2--ed, .night .decision__title, .night .card__title { color: var(--night-ink); }
.night .lead, .night .ed__text p, .night p { color: var(--night-ink-2); }
.night .small, .night .footnote { color: var(--night-muted); }
.night a { color: var(--night-ink); }
.night .case-validation li, .night .case-validation h4 { color: var(--night-ink); }
.night .case-validation li { border-color: var(--night-line); }
.night .case-validation p { color: var(--night-ink-2); }
.night hr, .night .rule { border-color: var(--night-line); background: var(--night-line); }
.night .case-options div { border-color: var(--night-line); }
.night .case-options dt, .night .case-options dd { color: var(--night-ink-2); }
.night .case-options dt { color: var(--night-ink); }
.night .reflect { border-color: var(--night-line); }
@media (forced-colors: active), print { .night { box-shadow: none; clip-path: none; background: transparent; color: CanvasText; } }

/* Dark contact block closes every page */
.case-contact { --ink: var(--night-ink); --ink-2: var(--night-ink-2); --muted: var(--night-muted); --accent: #ff7a59;
  background-color: #101216; color: var(--night-ink); box-shadow: 0 0 0 100vmax #101216; clip-path: inset(0 -100vmax); }
.case-contact__title { color: var(--night-ink); }
.case-contact__email { color: var(--night-ink-2); }
.case-contact .btn--primary { background: #ff6a45; color: #111216; }
.case-contact .btn--primary:hover { background: #ff8465; }

/* ---- Big stats (real facts only, count up once) ------------------------- */
.bigstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 32px; }
.bigstat { padding: 24px 0 0; border-top: 1px solid var(--night-line); }
.bigstat__n { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.03em; color: var(--night-ink); font-variant-numeric: tabular-nums; }

.bigstat__t { margin-top: 10px; font-size: 1rem; line-height: 1.4; color: var(--night-ink-2); }

/* ---- Scroll progress ---------------------------------------------------- */
.v2-progress { position: fixed; z-index: 60; inset: 0 0 auto 0; height: 3px; background: transparent; pointer-events: none; }
.v2-progress i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* ---- Home hero chips (fall in once) ------------------------------------ */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chips li { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.6); font-size: 0.9375rem; line-height: 1.2; color: var(--ink-2); }
.chips li:nth-child(3n+1) { background: #ffe3da; border-color: #f6c9bb; }
.chips li:nth-child(3n+2) { background: #dfe8f7; border-color: #c3d3ee; }
.chips li:nth-child(3n) { background: #e6efd9; border-color: #cfdcb9; }

/* ---- Scroll-through browser frame for long screens ---------------------- */
.scrollframe { margin: 0; }
.scrollframe__win { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: var(--shadow-frame); overflow: hidden; }
.scrollframe__bar { position: relative; z-index: 2; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 13px; background: linear-gradient(#f1f2f4, #e8eaed); border-bottom: 1px solid var(--line); }
.scrollframe__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.scrollframe__bar i:nth-child(2) { background: #febc2e; }
.scrollframe__bar i:nth-child(3) { background: #28c840; }
.scrollframe__bar span { margin-left: 10px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.4px; color: var(--muted); }
.scrollframe__vp { position: relative; height: clamp(380px, 52vh, 560px); overflow: auto; background: var(--white); }
.scrollframe__vp:focus-visible, .scrollframe__vp:focus-within { outline: 3px solid var(--accent); outline-offset: -3px; }
.scrollframe__vp img { display: block; width: 100%; height: auto; will-change: transform; cursor: zoom-in; }
.scrollframe__hint { display: none; position: absolute; z-index: 3; right: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(17, 18, 22, 0.86); color: var(--night-ink); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.4px; text-transform: uppercase; pointer-events: none; }
.scrollframe__meter { display: none; position: absolute; z-index: 3; top: 34px; right: 0; width: 3px; height: calc(100% - 34px); background: transparent; pointer-events: none; }
.scrollframe__meter i { display: block; width: 100%; height: var(--h, 20%); background: var(--accent); transform: translateY(var(--y, 0)); border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .scrollframe--animated .scrollframe__vp { overflow: hidden; }
  .scrollframe--animated .scrollframe__hint, .scrollframe--animated .scrollframe__meter { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .scrollframe__vp img { transform: none !important; }
  .scrollframe__hint, .scrollframe__meter { display: none; }
}

/* ---- Before / after slider --------------------------------------------- */
.compare { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: var(--shadow-frame); --pos: 50%; touch-action: pan-y; }
.compare__img { display: block; width: 100%; height: auto; }
.compare__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.compare__after img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--accent); transform: translateX(-1px); pointer-events: none; }
.compare__handle::after { content: "↔"; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; transform: translate(-50%, -50%); background: var(--accent); color: #fff; font-size: 1.125rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.compare__range:disabled + .compare__handle { display: none; }
.compare__range:focus-visible + .compare__handle::after { outline: 3px solid var(--ink); outline-offset: 2px; }
.compare__tag { position: absolute; bottom: 14px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgba(17, 18, 22, 0.82); color: var(--night-ink); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.4px; text-transform: uppercase; pointer-events: none; }
.compare__tag--l { left: 12px; }
.compare__tag--r { right: 12px; }

/* ---- Motion (guarded) --------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .chips li { opacity: 0; transform: translateY(-14px) rotate(-2deg); animation: chip-drop 0.7s var(--ease) forwards; animation-delay: calc(0.35s + var(--i, 0) * 70ms); }
  @keyframes chip-drop { 60% { transform: translateY(3px) rotate(0.5deg); } to { opacity: 1; transform: none; } }
  .tilt { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.25s var(--ease); will-change: transform; }
  .project .cover { transition: transform 0.45s var(--ease); }
  .project:hover .cover { transform: translateY(-4px); }
  .project .mock { transition: transform 0.6s var(--ease); }
  .project:hover .mock { transform: translateY(-6px) scale(1.012); }
  .case .shot { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
  @media (hover: hover) { .case .shot[data-zoom]:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(20, 18, 12, 0.05), 0 30px 56px -24px rgba(20, 18, 12, 0.42); } }
  .btn--primary { transition: transform 0.2s var(--ease), background 0.2s var(--ease); }
  .js .bigstat { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .is-visible .bigstat, .bigstat.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .chips li, .bigstat { opacity: 1; transform: none; } }

/* Portrait fade follows the paper colour */
.hero-visual__fade { background: linear-gradient(180deg, rgba(244,245,246,0) 0%, rgba(244,245,246,0.8) 50%, #f4f5f6 62%, #f4f5f6 100%); }
.hero__statement { font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.08; }
.scrollframe { max-width: 1100px; margin-inline: auto; }
.scrollframe figcaption { margin-top: 14px; }

/* Lens */
.lens { position: absolute; z-index: 5; width: 168px; height: 168px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(20,18,12,.25), 0 16px 36px rgba(20,18,12,.35); background-color: #fff; background-repeat: no-repeat; pointer-events: none; opacity: 0; transition: opacity 0.15s var(--ease); }
.bigstats { grid-template-columns: repeat(auto-fit, minmax(180px, 280px)); gap: 32px; }
@media (hover: none) { .lens { display: none; } }

/* Proof strip: where I have worked, with real dates (static) */
.proofstrip { padding: clamp(36px, 5vw, 64px) 0; margin-block: clamp(24px, 4vw, 56px); background-color: #101216; box-shadow: 0 0 0 100vmax #101216; clip-path: inset(0 -100vmax); color: var(--night-ink); }
.proofstrip__label { font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--night-muted); margin-bottom: 28px; }
.proofstrip__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; border-top: 1px solid var(--night-line); }
.proofstrip__item { padding: 22px 24px 8px 0; border-bottom: 1px solid var(--night-line); }
.proofstrip__name { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--night-ink); transition: color 0.2s var(--ease); }
.proofstrip__meta { margin-top: 10px; font-size: 1rem; line-height: 1.45; color: var(--night-ink-2); }
.proofstrip__dates { font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.4px; color: var(--night-muted); padding-bottom: 14px; }
@media (hover: hover) { .proofstrip__item:hover .proofstrip__name { color: #ff7a59; } }
@media (forced-colors: active), print { .proofstrip { box-shadow: none; clip-path: none; background: transparent; color: CanvasText; } }


/* Framed screens take the image's own proportions: no white letterbox inside the window. */
.case .shot--wide, .case .shot--decision, .case .shot--inline { aspect-ratio: auto; }
.case .shot--wide img, .case .shot--decision img, .case .shot--inline img { width: 100%; height: auto; display: block; }
.case .shot--ref img { object-fit: cover; }
.iter__shots { align-items: stretch; }
.iter__shot { display: flex; flex-direction: column; }
.iter__shot .shot--natural { flex: 1; aspect-ratio: auto; }
.case .shot--natural img { max-width: 78%; max-height: 78%; }

/* ---- Case hero facts: quiet columns instead of pills --------------------- */
.case-hero .meta, .about-hero .meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px 28px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--ink); }
.case-hero .meta__item, .about-hero .meta__item { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.case-hero .meta__label, .about-hero .meta__label { font-size: 0.75rem; color: var(--muted); }
.case-hero .meta__value, .about-hero .meta__value { font-size: 1rem; line-height: 1.35; color: var(--ink); font-weight: 500; }

/* Portrait: fade the photo itself (mask) instead of painting a colour block over it. */
.hero-visual__fade { display: none; }
.hero-visual__portrait {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 81%, rgba(0, 0, 0, 0.6) 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 81%, rgba(0, 0, 0, 0.6) 90%, transparent 100%);
}
@media (forced-colors: active) { .hero-visual__portrait { -webkit-mask-image: none; mask-image: none; } }
@media (max-width: 600px) {
  .hero-visual { margin-bottom: 64px; }
  .hero-visual__tag { bottom: -64px; }
}

/* ---- Rolling accent phrase (hero) --------------------------------------- */
.roll { animation: none !important; }
.roll__stack { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.14em; margin-bottom: -0.14em; max-width: 100%; }
.roll__stack::before { content: attr(data-sizer); display: block; visibility: hidden; white-space: nowrap; }
.roll__p { position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--accent); }
.roll__c { display: inline-block; transform: translateY(115%); transition: transform 0.6s var(--ease); transition-delay: calc(var(--k, 0) * 26ms); }
.roll__p.is-on .roll__c { transform: none; }
.roll__p.is-out .roll__c { transform: translateY(-115%); }
@media (prefers-reduced-motion: reduce) { .roll__c { transition: none; } }

/* ---- Annotated screens: numbered pins + matching notes ------------------- */
.annotated { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin: 0; }
.annotated .shot { grid-column: 1; grid-row: 1; }
.annotated__list { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 6px; }
.annotated__cap { grid-column: 1 / -1; margin-top: -4px; }
.pins { position: relative; line-height: 0; }
.pins img { display: block; width: 100%; height: auto; }
.pin { position: absolute; left: var(--x); top: var(--y); z-index: 3; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-family: var(--mono); font-weight: 600; font-size: 0.8125rem; line-height: 1;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.92), 0 8px 16px rgba(20, 18, 12, 0.35); transition: transform 0.2s var(--ease); }
.pin.is-active { transform: translate(-50%, -50%) scale(1.28); }
.annotated__list li { display: grid; grid-template-columns: 28px 1fr; column-gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid transparent; counter-increment: ann; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.annotated__list { counter-reset: ann; }
.annotated__list li::before { content: counter(ann); grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-family: var(--mono); font-weight: 600; font-size: 0.8125rem; }
.annotated__list li.is-active { background: var(--white); border-color: var(--line); }
.annotated__t { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: var(--ink); }
.annotated__d { margin-top: 4px; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .js .annotated .pin { opacity: 0; transform: translate(-50%, -50%) scale(0.4); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); transition-delay: calc(var(--n, 1) * 120ms + 300ms); }
  .annotated.is-visible .pin { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .annotated.is-visible .pin.is-active { transform: translate(-50%, -50%) scale(1.28); transition-delay: 0s; }
}
@media (max-width: 860px) { .annotated { grid-template-columns: minmax(0, 1fr); } .annotated__list { grid-column: 1; grid-row: auto; } }

/* ---- About: experience in serif, recommendations at night ---------------- */
.tl__org { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 1.875rem); letter-spacing: -0.015em; }
.how h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; }
.night .said__item { background: var(--night-2); border-color: var(--night-line); }
.night .said__item blockquote p { font-family: var(--serif); font-weight: 400; font-size: clamp(1.1875rem, 1.7vw, 1.4375rem); line-height: 1.5; color: var(--night-ink); }
.night .said__item figcaption { color: var(--night-ink-2); }
.night .said__item figcaption strong { color: var(--night-ink); }
.night .said__item figcaption span { color: var(--night-muted); }
.night .said__item figcaption img { box-shadow: 0 0 0 2px var(--night-line); }

/* Pause control for the rotating words */
.roll__pause { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.roll__pause:hover { background: var(--ink); color: var(--bg); }
.hero__cta { align-items: center; }
@media (forced-colors: active) { .roll__pause { border-color: ButtonText; } }

/* Viewer: a zoomed image is reachable from its left edge */
.viewer.is-zoomed .viewer__stage { display: block; }
.viewer.is-zoomed .viewer__stage img { display: block; margin: 0 auto; }

/* ---- Home: four equal cards; Vision leads by order and a small label ---- */
.work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
.project__kicker { font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent); }
.project__flag { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.5px; text-transform: uppercase; vertical-align: 1px; }
@media (max-width: 620px) { .work__grid { grid-template-columns: minmax(0, 1fr); } }


/* ---- Home: how I work now ---- */
.howwork { padding-block: clamp(56px, 8vw, 104px); }
.howwork__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; list-style: none; padding: 0; counter-reset: none; }
.howwork__list li { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 1px solid var(--rule); }
.howwork__n { font-family: var(--mono); font-size: .8125rem; color: var(--accent); }
.howwork__list h3 { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; }
.howwork__list p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) { .howwork__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .howwork__list { grid-template-columns: 1fr; gap: 20px; } }

/* Narrow screens: the rolling phrase wraps as static text instead of clipping. */
@media (max-width: 480px) {
  .roll__stack { display: inline; overflow: visible; padding: 0; margin: 0; }
  .roll__stack::before { display: none; }
  .roll__p { position: static; white-space: normal; }
  .roll__p .roll__c { display: inline; transform: none !important; transition: none; }
  .roll__pause { display: none; }
}

/* ---- Case at a glance: three numbered cards and one constraint line ---- */
.case .glance { gap: 16px; }
.case .glance__item { position: relative; overflow: hidden; gap: 10px; padding: 27px 24px 26px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.case .glance__item::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); }
.case .glance__label { display: flex; align-items: baseline; gap: 10px; }
.glance__n { color: var(--accent); }
.case .glance__text { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.3; letter-spacing: -0.015em; text-wrap: balance; }
.case .glance__more { font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.case .glance__item--result { background: var(--night); border-color: var(--night); }
.case .glance__item--result::before { background: #ff7a59; }
.case .glance__item--result .glance__label { color: var(--night-muted); }
.case .glance__item--result .glance__n { color: #ff7a59; }
.case .glance__item--result .glance__text { color: var(--night-ink); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 400; letter-spacing: -0.03em; }
.case .glance__item--result .glance__more { color: var(--night-ink-2); }
.glance__constraint { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 4px 0 0; padding: 14px 4px 0; border-top: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.glance__constraint span { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); }
@media (max-width: 860px) { .case .glance__item { padding: 20px; } }

/* Glance cards: lift and soft shadow on hover (fine pointers, motion allowed) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .case .glance__item { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease); }
  .case .glance__item::before { transition: height 0.35s var(--ease); }
  .case .glance__item:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(16, 18, 22, 0.06), 0 18px 32px -12px rgba(16, 18, 22, 0.28), 0 40px 60px -36px rgba(16, 18, 22, 0.3); border-color: #c9cbd0; }
  .case .glance__item:hover::before { height: 5px; }
  .case .glance__item--result:hover { border-color: var(--night); box-shadow: 0 2px 4px rgba(16, 18, 22, 0.2), 0 22px 36px -12px rgba(16, 18, 22, 0.55), 0 44px 64px -36px rgba(194, 58, 28, 0.35); }
}

/* An odd last card spans the row: cover beside its caption, so the grid never ends on a gap */
@media (min-width: 621px) {
  .work__grid .project:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px; }
  .work__grid .project:last-child:nth-child(odd) .project__caption { padding: 0 clamp(8px, 4vw, 56px); }
}

/* Hero headline: word-by-word entrance */
@media (prefers-reduced-motion: no-preference) {
  .hero__statement.is-words { animation: none; }
  .hero__statement .hw { display: inline-block; opacity: 0; transform: translateY(0.45em); animation: hw-in 0.7s var(--ease) forwards; animation-delay: calc(var(--w, 0) * 45ms + 80ms); }
  @keyframes hw-in { to { opacity: 1; transform: none; } }
}

.roll__stack { padding-right: 0.08em; }

.case .glance__text { font-size: clamp(1.25rem, 1.6vw, 1.45rem); }
.case .glance__item--result .glance__text { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }

/* ---- Case opening v3: text beside one screen, with air ---------------------
   Two columns again, but a quieter one: smaller title, a two-line subtitle,
   only Role and Timeline, generous gaps, and a clear pause before the summary cards. */
@media (min-width: 1101px) {
  .case-opening { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "hero image" "glance glance"; column-gap: clamp(56px, 7vw, 120px); row-gap: clamp(88px, 9vw, 144px); align-items: center; padding-top: clamp(24px, 3vw, 48px); }
  .case-opening > .case-hero { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(28px, 3vw, 40px); padding: 0; }
  .case-opening .case-hero > .case-hero__title { font-size: clamp(2.75rem, 4.2vw, 4rem); line-height: 1.08; max-width: none; }
  .case-opening .case-hero > .case-hero__sub { font-size: 1.1875rem; line-height: 1.55; max-width: 30em; margin: 0; }
  .case-opening .case-hero > .meta { display: flex; gap: 48px; margin: 8px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); }
  .case-opening > .case-hero-image { padding: 0; background: none; margin: 0; }
  .case-opening .case-hero-image .hero-stage { width: 100%; max-width: none; margin: 0; aspect-ratio: 5 / 4; }
  .case-opening .case-hero-image .hero-stage__front { left: 5%; bottom: 7%; width: 80%; }
  .case-opening .case-hero-image .hero-stage__back { top: 7%; right: -9%; width: 66%; }
  .case-opening .case-hero-image .fig-caption { margin: 18px 0 0; }
  .case-opening > .glance { margin-top: 0; gap: 24px; }
}
.case .glance__item { padding: 32px 30px 34px; gap: 14px; }
.glance__constraint { margin-top: 12px; padding-top: 20px; }