/* ==========================================================================
   COMPONENTS — assembled from System/02-Components/snippets/*.html
   Isokon Case 002. Component mechanisms are copied as-is; only content-
   shaped values (card counts, aspect-ratios matched to Isokon's actual
   assets) are customized, and those customizations live in page.css, not
   here — see COMPONENT-LIBRARY.md "what changes per case".
   ========================================================================== */

/* ---- Page loader ---- */
.page-loader { position: fixed; inset: 0; z-index: 999; background: var(--color-bg); display: flex; align-items: center; justify-content: center; transition: opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow); }
.page-loader__mark { font-family: var(--font-display); font-size: var(--size-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-ink-faint); }
.page-loader.is-hidden { opacity: 0; visibility: hidden; }

/* ---- Cursor ---- */
html.has-custom-cursor, html.has-custom-cursor a, html.has-custom-cursor button { cursor: none; }
.c-cursor {
  position: fixed; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-accent); pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.5s cubic-bezier(0.2, 0.96, 0.34, 1), height 0.5s cubic-bezier(0.2, 0.96, 0.34, 1),
    background 0.5s cubic-bezier(0.2, 0.96, 0.34, 1), opacity 0.3s var(--ease-out);
}
.c-cursor.is-out { opacity: 0; }
.c-cursor.is-large { width: 64px; height: 64px; background: rgba(177, 146, 111, 0.12); box-shadow: 0 0 30px rgba(177, 146, 111, 0.55); }
.c-cursor.is-small { width: 26px; height: 26px; background: rgba(177, 146, 111, 0); box-shadow: 0 0 24px rgba(177, 146, 111, 0.9); }

/* ---- Button ---- */
.c-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 1.1em 2.75em; font-family: var(--font-display); font-size: var(--size-label);
  font-weight: 500; letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--color-ink); border: 1px solid var(--color-line-strong); overflow: hidden;
  cursor: pointer; background: transparent;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.c-btn::before { content: ""; position: absolute; inset: 0; background: var(--color-accent); transform: translateX(-101%); transition: transform var(--dur-base) var(--ease-in-out); z-index: -1; }
.c-btn:hover, .c-btn:focus-visible { color: var(--color-bg); border-color: var(--color-accent); }
.c-btn:hover::before, .c-btn:focus-visible::before { transform: translateX(0); }

/* ---- Header ---- */
.c-header {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-xs) var(--container-pad); mix-blend-mode: normal;
  transition: background var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out);
}
.c-header.is-scrolled { padding-block: var(--space-3xs) calc(var(--space-3xs) + 0.5rem); }
.c-header.is-scrolled::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 200px;
  background: linear-gradient(180deg, rgba(14, 17, 18, 0.55) 0%, rgba(14, 17, 18, 0.3) 45%, rgba(14, 17, 18, 0) 100%);
  backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  z-index: -1; pointer-events: none;
}
.c-header__logo { display: flex; align-items: center; }
.c-header__logo img { height: clamp(34px, 3.6vw, 42px); width: auto; }
.c-header__nav { display: flex; align-items: center; gap: var(--space-md); }
.c-header__link { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: var(--tracking-normal); color: var(--color-ink); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); transition: color var(--dur-fast) var(--ease-out); }
.c-header__link:hover { color: var(--color-accent); }
@media (max-width: 640px) { .c-header__nav { gap: var(--space-sm); } .c-header__nav .c-btn { display: none; } }

/* ---- Footer ---- */
.c-footer { padding: var(--space-xl) var(--container-pad) var(--space-lg); border-top: 1px solid var(--color-line); font-family: var(--font-display); font-size: 0.8625rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-dim); }
.c-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr 1fr; gap: var(--space-lg); max-width: var(--container-max); margin-inline: auto; padding-bottom: var(--space-lg); }
.c-footer__logo img { height: 42px; width: auto; }
.c-footer__nav { display: flex; flex-direction: column; gap: var(--space-2xs); }
.c-footer__nav a { color: var(--color-ink-dim); transition: color var(--dur-fast) var(--ease-out); }
.c-footer__nav a:hover, .c-footer__nav a[aria-current="page"] { color: var(--color-accent); }
.c-footer__contact { display: flex; flex-direction: column; gap: var(--space-2xs); list-style: none; margin: 0; padding: 0; }
.c-footer__contact a { color: var(--color-ink-dim); text-transform: none; letter-spacing: var(--tracking-normal); font-family: var(--font-body); font-size: 0.935rem; transition: color var(--dur-fast) var(--ease-out); }
.c-footer__contact a:hover { color: var(--color-accent); }
.c-footer__social { display: flex; flex-direction: column; gap: var(--space-2xs); align-items: flex-start; }
.c-footer__flip { position: relative; display: inline-block; overflow: hidden; height: 1.4em; line-height: 1.4em; transition: transform var(--dur-base) var(--ease-in-out); }
.c-footer__flip::after { content: attr(data-text); position: absolute; left: 0; top: 100%; color: var(--color-accent); }
.c-footer__flip:hover { transform: translateY(-100%); }
.c-footer__bottom { max-width: var(--container-max); margin-inline: auto; padding-top: var(--space-lg); border-top: 1px solid var(--color-line); color: var(--color-ink-faint); text-align: center; }
@media (max-width: 860px) { .c-footer__grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-lg); } }
@media (max-width: 480px) { .c-footer__grid { grid-template-columns: 1fr; } }

/* ---- Back to top ---- */
.c-totop { position: fixed; bottom: 40px; right: 40px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-line); background: rgba(14, 17, 18, 0.6); backdrop-filter: blur(6px); z-index: var(--z-overlay); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.c-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.c-totop:hover { border-color: var(--color-accent); }
.c-totop__arrow { position: absolute; top: 50%; left: 50%; width: 10px; height: 20px; transform: translate(-50%, -40%); }
.c-totop__arrow::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--color-ink-dim); border-top: 2px solid var(--color-ink-dim); position: absolute; top: 2px; left: 50%; transform: translateX(-50%) rotate(-45deg); transition: border-color var(--dur-base) var(--ease-out); }
.c-totop__arrow::after { content: ""; position: absolute; height: 100%; width: 2px; top: 0; left: 50%; transform: scaleY(0) translateX(-50%); transform-origin: top; background: var(--color-accent); transition: transform var(--dur-base) var(--ease-out); }
.c-totop:hover .c-totop__arrow::before { border-color: var(--color-accent); }
.c-totop:hover .c-totop__arrow::after { transform: scaleY(1) translateX(-50%); }
@media (max-width: 640px) { .c-totop { bottom: 20px; right: 20px; width: 38px; height: 38px; } }

/* ---- Hero ---- */
.c-hero { position: relative; height: 100svh; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden; background: var(--color-bg); }
@media (max-height: 500px) {
  .c-hero { min-height: 380px; align-items: center; }
  .c-hero__content { padding-bottom: var(--space-sm); }
  .c-hero__title { font-size: clamp(1.75rem, 4vw + 1rem, 3rem); }
  .c-hero__lead { display: none; }
  .c-hero__scroll { display: none !important; }
}
.c-hero__media { position: absolute; inset: 0; z-index: 0; }
.c-hero__media img, .c-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.c-hero__media img.c-hero__kenburns { transform-origin: 54% 46%; animation: heroKenBurns 22s ease-out forwards; }
@keyframes heroKenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .c-hero__media img.c-hero__kenburns { animation: none; } }
.c-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,17,18,0.15) 0%, rgba(14,17,18,0.25) 55%, rgba(14,17,18,0.92) 100%); }
.c-hero__content { position: relative; z-index: 1; width: 100%; padding: 0 var(--container-pad) var(--space-xl); }
.c-hero__eyebrow { margin-bottom: var(--space-sm); font-size: 1.0625rem; letter-spacing: var(--tracking-wide); color: var(--color-accent-soft); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.95)) drop-shadow(0 3px 14px rgba(0, 0, 0, 0.7)); }
.c-hero__eyebrow::before { height: 2px; }
.c-hero__brand { display: flex; align-items: center; margin-bottom: var(--space-2xs); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.85)); }
.c-hero__brand img { height: clamp(28px, 3vw, 40px); width: auto; }
.c-hero__title { font-family: var(--font-display); font-size: var(--size-hero); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; max-width: 20ch; }
.c-hero__lead { margin-top: var(--space-sm); max-width: 42ch; font-size: var(--size-lead); color: var(--color-ink-dim); }
.c-hero__scroll { position: absolute; left: 50%; bottom: var(--space-md); transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); height: 60px; }
.c-hero__scroll-arrow { position: relative; width: 20px; height: 30px; animation: scrollBounce 2.2s var(--ease-in-out) infinite; }
.c-hero__scroll-arrow::before { content: ""; width: 14px; height: 14px; border-right: 2px solid var(--color-ink); border-bottom: 2px solid var(--color-ink); position: absolute; top: 0; left: 3px; transform: rotate(45deg); transition: border-color var(--dur-base) var(--ease-out); }
.c-hero__scroll-arrow::after { content: ""; width: 2px; height: 100%; background: var(--color-accent); position: absolute; bottom: 0; left: 9px; transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease-out); }
.c-hero__scroll:hover .c-hero__scroll-arrow::before { border-color: var(--color-accent); }
.c-hero__scroll:hover .c-hero__scroll-arrow::after { transform: scaleY(1); }
.c-hero__scroll-label { position: relative; display: block; overflow: hidden; height: 1.2em; line-height: 1.2; color: transparent; font-family: var(--font-display); font-size: var(--size-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; }
.c-hero__scroll-label::before, .c-hero__scroll-label::after { content: attr(data-text); position: absolute; inset: 0; transition: transform var(--dur-base) var(--ease-in-out); }
.c-hero__scroll-label::before { color: var(--color-ink-dim); transform: translateY(0); }
.c-hero__scroll-label::after { color: var(--color-accent); transform: translateY(-170%); }
.c-hero__scroll:hover .c-hero__scroll-label::before { transform: translateY(150%); }
.c-hero__scroll:hover .c-hero__scroll-label::after { transform: translateY(0); }
@keyframes scrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .c-hero__scroll-arrow { animation: none; } }

/* ---- Statement ---- */
.c-statement { padding-block: var(--space-section); display: flex; justify-content: center; }
.c-statement__text { max-width: 20ch; text-align: center; font-family: var(--font-display); font-size: var(--size-h1); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-ink); }
.c-statement__text em { font-style: normal; color: var(--color-accent); }

/* ---- Horizontal gallery (Campaign Reach) ---- */
.c-hgallery { position: relative; overflow-x: hidden; overflow-y: visible; height: 100svh; min-height: 560px; display: flex; flex-direction: column; justify-content: center; }
.c-hgallery__head { padding-inline: var(--container-pad); max-width: var(--container-max); margin-inline: auto; margin-bottom: var(--space-md); }
.c-hgallery__head .u-section-lead { max-width: 82ch; }
.c-hgallery__title { margin-top: var(--space-sm); font-family: var(--font-display); font-size: var(--size-h2); font-weight: 600; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; max-width: 18ch; }
.c-hgallery__track { display: flex; align-items: flex-end; gap: var(--space-md); padding-inline: var(--container-pad); will-change: transform; }
.c-hgallery__card { flex: 0 0 auto; width: min(60vw, 460px); }
.c-hgallery__frame { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--color-bg-raised); }
.c-hgallery__frame img, .c-hgallery__frame video { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.c-hgallery__card:hover .c-hgallery__frame img, .c-hgallery__card:hover .c-hgallery__frame video { transform: scale(1.05); }
.c-hgallery__caption { display: flex; justify-content: space-between; margin-top: var(--space-2xs); font-family: var(--font-display); font-size: var(--size-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-dim); }
.c-hgallery__caption span:last-child { color: var(--color-accent); }
.c-hgallery__finale { position: fixed; inset: 0; z-index: 40; opacity: 0; pointer-events: none; visibility: hidden; transform-origin: 0 0; will-change: opacity, transform; background: var(--color-bg); }
.c-hgallery__finale video { width: 100%; height: 100%; object-fit: contain; }
/* Swipeable strip fallback — replaces the pinned/scrubbed cinematic gallery
   on any phone-sized touch viewport: narrow (portrait, <=767px) OR short
   (landscape phone, <=500px tall). The landscape clause matches the JS
   isPhone definition in main.js (which skips the pin + FLIP finale on the
   same viewports) so CSS and JS agree; without it, a sideways phone keeps
   the pinned track here while main.js has already dropped the pin, leaving a
   dead non-scrubbing strip. Real tablets in landscape are >=768px tall, so
   they never match and keep the desktop cinematic. */
@media (pointer: coarse) and (max-width: 767px),
       (pointer: coarse) and (max-height: 500px) {
  .c-hgallery__track { overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--space-sm); transform: none !important; }
  .c-hgallery__card { scroll-snap-align: start; width: 78vw; }
  .c-hgallery__finale { display: none; }
}
/* Reduced-motion fallback (any device, not just phone) — main.js skips
   creating the pin/FLIP ScrollTrigger entirely under prefers-reduced-motion
   (System/03-Animation-Playbook §8), so without this the section would be
   a fixed-height flex row clipping every card past the first viewport with
   no way to reach the rest. Same scroll-snap strip as the phone fallback. */
@media (prefers-reduced-motion: reduce) {
  .c-hgallery { height: auto; min-height: 0; padding-block: var(--space-lg); }
  .c-hgallery__track { overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--space-sm); transform: none !important; }
  .c-hgallery__card { scroll-snap-align: start; }
  .c-hgallery__finale { display: none; }
}

/* ---- Bridge (fullscreen narrative interstitial, Campaign Reach → Jumbo) ---- */
.c-bridge { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; background: var(--color-bg); text-align: center; padding-block: var(--space-xl); }
.c-bridge__content { width: 100%; padding: 0 var(--container-pad); }
.c-bridge__title { font-family: var(--font-display); font-size: var(--size-h1); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; max-width: 20ch; margin-inline: auto; }
.c-bridge__lead { margin: var(--space-sm) auto 0; max-width: 42ch; font-size: var(--size-lead); color: var(--color-ink-dim); }
.c-bridge__visual { margin: var(--space-lg) auto 0; max-width: min(90vw, 1600px); }
.c-bridge__visual img { width: 100%; height: auto; display: block; }

/* ---- Jumbo (fullscreen OOH billboard breather) ---- */
.c-jumbo { position: relative; min-height: 100svh; overflow: hidden; }
.c-jumbo__media { position: absolute; inset: 0; z-index: 0; }
.c-jumbo__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.c-jumbo__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 17, 18, 0) 60%, rgba(14, 17, 18, 0.65) 100%); }
.c-jumbo__caption { position: absolute; z-index: 1; left: var(--container-pad); right: var(--container-pad); bottom: var(--space-sm); display: flex; justify-content: space-between; font-family: var(--font-display); font-size: var(--size-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink); }
.c-jumbo__caption span:last-child { color: var(--color-accent); }

/* ---- Timeline (Process) ---- */
.c-timeline { padding-block: var(--space-section); text-align: center; }
.c-timeline__head { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); margin-bottom: var(--space-md); }
.c-timeline__title { font-family: var(--font-display); font-size: var(--size-h1); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; max-width: 22ch; margin-inline: auto; }
.c-timeline__title em { font-style: normal; color: var(--color-accent); }
.c-timeline__list { list-style: none; margin: 0 auto; padding: 0 var(--container-pad); max-width: 460px; display: flex; flex-direction: column; align-items: center; }
.c-timeline__item { font-family: var(--font-display); font-size: var(--size-h3); font-weight: 600; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-ink); padding-block: var(--space-2xs); }
.c-timeline__item:not(:last-child)::after { content: "↓"; display: block; margin-top: var(--space-2xs); color: var(--color-accent); font-size: 1.1rem; }
.c-timeline__closing { margin: var(--space-lg) auto 0; padding-inline: var(--container-pad); max-width: 46ch; font-family: var(--font-display); font-size: var(--size-h3); font-weight: 500; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-ink-dim); }

/* ---- Promo (fullscreen reel, plays once, crossfades to logo) ---- */
.c-promo { position: relative; min-height: 100svh; overflow: hidden; background: var(--color-bg); }
.c-promo__media { position: absolute; inset: 0; }
.c-promo__media video { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.8s var(--ease-out); }
.c-promo.is-finished .c-promo__media video { opacity: 0; }
.c-promo__endcard { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.8s var(--ease-out); }
.c-promo.is-finished .c-promo__endcard { opacity: 1; }
.c-promo__endcard img { width: clamp(160px, 20vw, 280px); height: auto; }

/* ---- Quote ---- */
.c-quote { padding-block: var(--space-section); padding-inline: var(--container-pad); display: flex; justify-content: center; }
.c-quote__inner { max-width: 60ch; text-align: center; }
.c-quote__text { font-family: var(--font-display); font-weight: 400; font-size: var(--size-h3); line-height: var(--leading-snug); color: var(--color-ink); }
.c-quote__cite { display: flex; align-items: center; justify-content: center; margin-top: var(--space-md); font-family: var(--font-display); font-size: var(--size-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-dim); }

.page-section--light {
  --color-bg: #e4dfd7; --color-bg-raised: #ddd6c9; --color-ink: #1b1712;
  --color-ink-dim: #635d51; --color-ink-faint: #948d7d;
  --color-line: rgba(27, 23, 18, 0.14); --color-line-strong: rgba(27, 23, 18, 0.3);
  /* !important: this override must always win regardless of which
     nth-of-type(odd/even) parity this section happens to land on — without
     it, .page-section:nth-of-type(even)'s higher selector specificity
     (two compound selectors vs. this rule's one class) silently wins
     whenever a DOM change shifts this section onto an even position. */
  background: var(--color-bg) !important;
}

/* ---- Mockup grid (Details, Digital/Web) ---- */
.c-mockup-grid { padding-block: var(--space-section); }
.c-mockup-grid__head { padding-inline: var(--container-pad); max-width: var(--container-max); margin-inline: auto; margin-bottom: var(--space-md); }
.c-mockup-grid__title { margin-top: var(--space-sm); font-family: var(--font-display); font-size: var(--size-h2); font-weight: 600; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; max-width: 18ch; }
.c-mockup-grid__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); padding-inline: var(--container-pad); max-width: var(--container-max); margin-inline: auto; perspective: 1600px; }
@media (max-width: 960px) { .c-mockup-grid__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .c-mockup-grid__list { grid-template-columns: 1fr; } }

.c-mockup-grid__list--details { grid-template-columns: repeat(12, 1fr); row-gap: var(--space-lg); }
.c-mockup-grid__list--details .c-mockup-card:nth-child(1) { grid-column: span 7; }
.c-mockup-grid__list--details .c-mockup-card:nth-child(1) .c-mockup-card__frame { aspect-ratio: 3 / 4; }
.c-mockup-grid__list--details .c-mockup-card:nth-child(2) { grid-column: span 5; align-self: end; }
.c-mockup-grid__list--details .c-mockup-card:nth-child(2) .c-mockup-card__frame { aspect-ratio: 1 / 1; }
.c-mockup-grid__list--details .c-mockup-card:nth-child(3) { grid-column: span 5; }
.c-mockup-grid__list--details .c-mockup-card:nth-child(3) .c-mockup-card__frame { aspect-ratio: 3 / 4; }
.c-mockup-grid__list--details .c-mockup-card:nth-child(4) { grid-column: span 7; align-self: end; }
.c-mockup-grid__list--details .c-mockup-card:nth-child(4) .c-mockup-card__frame { aspect-ratio: 5 / 3; }
@media (max-width: 860px) {
  .c-mockup-grid__list--details { grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
  .c-mockup-grid__list--details .c-mockup-card { grid-column: span 1 !important; align-self: auto !important; }
  .c-mockup-grid__list--details .c-mockup-card__frame { aspect-ratio: 3 / 4 !important; }
  .c-mockup-grid__list--details .c-mockup-card:nth-child(4) { grid-column: span 2 !important; }
  .c-mockup-grid__list--details .c-mockup-card:nth-child(4) .c-mockup-card__frame { aspect-ratio: 5 / 3 !important; }
}

.c-mockup-card { display: flex; flex-direction: column; gap: var(--space-2xs); transform-style: preserve-3d; transition: transform var(--dur-fast) var(--ease-out); }
.c-mockup-card__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-bg-raised); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0); transition: box-shadow var(--dur-base) var(--ease-out); }
.c-mockup-card__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.c-mockup-card:hover .c-mockup-card__frame img { transform: scale(1.06); }
.c-mockup-card:hover .c-mockup-card__frame { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55); }
.c-mockup-card__caption { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: var(--size-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-dim); }
.c-mockup-card__caption span:last-child { color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) { .c-mockup-card { transform: none !important; } }

/* ---- Showcase (Digital/Web) ---- */
.c-showcase { padding-top: var(--space-section); padding-bottom: 0; }
.c-showcase__head { padding-inline: var(--container-pad); max-width: var(--container-max); margin-inline: auto; margin-bottom: var(--space-md); }
.c-showcase__title { margin-top: var(--space-sm); font-family: var(--font-display); font-size: var(--size-h2); font-weight: 600; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; max-width: 16ch; }
.c-showcase__frame { position: relative; overflow: hidden; }
.c-showcase__frame img { width: 100%; height: auto; display: block; }
/* True full-bleed: breaks out of container-max/container-pad to span the
   entire viewport width, edge to edge. body has overflow-x:hidden (see
   base.css) so the scrollbar-width sliver this technique can introduce
   never shows a horizontal scrollbar or a stray gap. */
.c-showcase__grid { width: 100vw; margin-left: calc(50% - 50vw); }
.c-showcase__parallax { will-change: transform; }

/* ---- Origin — three real source photos, editorial "Apple feel" treatment ---- */
/* Extra breathing room at the bottom so the whole section (title + hero +
   duo) can be viewed and settle before the Void's black hold scrolls in —
   the section is ~1 viewport tall, so without this the duo gets chased
   off-screen by the incoming black the moment it appears. */
.c-origin-apple { padding-top: var(--space-section); padding-bottom: calc(var(--space-section) + 22vh); }
.c-origin-apple__head { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); text-align: center; margin-bottom: var(--space-lg); }
.c-origin-apple__title { margin-top: var(--space-sm); font-family: var(--font-display); font-size: var(--size-h1); font-weight: 700; letter-spacing: var(--tracking-tight); text-transform: uppercase; line-height: var(--leading-tight); }
.c-origin-apple__lead { margin: var(--space-sm) auto 0; max-width: 46ch; font-size: var(--size-lead); color: var(--color-ink-dim); }
.c-origin-apple__hero { margin: 0 auto; max-width: 1180px; padding-inline: var(--container-pad); }
.c-origin-apple__duo { max-width: 1180px; margin: var(--space-lg) auto 0; padding-inline: var(--container-pad); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.c-origin-apple__cell { margin: 0; }
.c-origin-apple__frame { position: relative; overflow: hidden; background: var(--color-bg-raised); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.65); }
.c-origin-apple__frame img { width: 100%; height: auto; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.c-origin-apple__hero:hover .c-origin-apple__frame img,
.c-origin-apple__cell:hover .c-origin-apple__frame img { transform: scale(1.03); }
.c-origin-apple__cap { margin-top: var(--space-xs); text-align: center; font-family: var(--font-display); font-size: var(--size-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-faint); }
@media (max-width: 720px) { .c-origin-apple__duo { grid-template-columns: 1fr; gap: var(--space-lg); } }

/* ---- Signature — closing credit before the CTA ---- */
.c-signature { position: relative; padding-block: calc(var(--space-section) * 1.1) calc(var(--space-section) * 1.5); text-align: center; background: var(--color-bg); }
html.is-ready .c-signature.r-fade { transition: opacity 2.2s var(--ease-out); }
.c-signature__brand { font-family: var(--font-display); font-size: var(--size-h2); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink); margin-bottom: var(--space-2xs); }
.c-signature__tagline { font-family: var(--font-display); font-size: var(--size-lead); font-weight: 500; color: var(--color-accent-soft); margin-bottom: var(--space-lg); }
.c-signature__roles { font-family: var(--font-body); font-size: var(--size-small); color: var(--color-ink-faint); line-height: var(--leading-body); }
.c-signature__divider { display: block; width: 28px; height: 1px; background: var(--color-line); margin: var(--space-lg) auto; }
.c-signature__line { font-family: var(--font-display); font-size: var(--size-lead); font-weight: 500; letter-spacing: var(--tracking-normal); color: var(--color-ink-dim); }
.c-signature__meta { font-family: var(--font-display); font-size: var(--size-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-ink-faint); }

/* ---- CTA ---- */
.c-cta { position: relative; min-height: 90svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.c-cta__media { position: absolute; inset: 0; z-index: 0; }
.c-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.c-cta__media::after { content: ""; position: absolute; inset: 0; background: var(--color-overlay-strong); }
.c-cta__content { position: relative; z-index: 1; padding: var(--space-xl) var(--container-pad); }
.c-cta__title { margin-top: var(--space-sm); font-family: var(--font-display); font-size: var(--size-h1); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; max-width: 20ch; margin-inline: auto; }
.c-cta__title em { font-style: normal; color: var(--color-accent); }
.c-cta__lead { margin: var(--space-sm) auto var(--space-lg); max-width: 42ch; color: var(--color-ink-dim); font-size: var(--size-lead); }

/* ==========================================================================
   PHOTO-CASE ADDITIONS (Diatonica Photography kit — to be back-ported to
   System/02-Components/snippets as photo-diptych + hero-meta). Image-first
   components: let the photograph carry the section, minimal chrome.
   ========================================================================== */

/* ---- Hero meta row (Client / Year / Role) — editorial credit under the lead ---- */
.c-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); font-family: var(--font-display); font-size: var(--size-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-dim); }
.c-hero__meta span { display: inline-flex; gap: var(--space-3xs); }
.c-hero__meta b { color: var(--color-ink); font-weight: 600; }

/* ---- Diptych — two photographs side by side, stacks on narrow screens.
   The workhorse of an editorial photo case: pair a wide + a detail, or two
   moods of the same subject. Uniform landscape frame keeps the rhythm. ---- */
.c-diptych { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); padding-inline: var(--container-pad); max-width: var(--container-max); margin-inline: auto; margin-block: var(--space-lg); }
.c-diptych__cell { position: relative; }
.c-diptych__frame { position: relative; overflow: hidden; aspect-ratio: 1980 / 1200; background: var(--color-bg-raised); }
.c-diptych__frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.c-diptych__cell:hover .c-diptych__frame img { transform: scale(1.04); }
.c-diptych__cap { display: flex; justify-content: space-between; margin-top: var(--space-2xs); font-family: var(--font-display); font-size: var(--size-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-dim); }
.c-diptych__cap span:last-child { color: var(--color-accent); }
@media (max-width: 720px) { .c-diptych { grid-template-columns: 1fr; gap: var(--space-sm); } }

/* ---- Filmstrip — native horizontal scroll-snap gallery, ALL viewports,
   CSS-only (no pin, no JS). The safe editorial alternative to the campaign
   case's pinned FLIP hgallery: a photo sequence you simply swipe/drag
   through. Works identically portrait + landscape, phone → desktop. ---- */
.c-filmstrip { padding-block: var(--space-section); }
.c-filmstrip__head { padding-inline: var(--container-pad); max-width: var(--container-max); margin-inline: auto; margin-bottom: var(--space-md); }
.c-filmstrip__title { margin-top: var(--space-sm); font-family: var(--font-display); font-size: var(--size-h2); font-weight: 600; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; max-width: 18ch; }
.c-filmstrip__lead { margin-top: var(--space-sm); max-width: 60ch; font-size: var(--size-lead); color: var(--color-ink-dim); }
.c-filmstrip__track {
  display: flex; gap: var(--space-md); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--container-pad);
  padding-inline: var(--container-pad); padding-bottom: var(--space-sm);
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--color-line) transparent;
}
.c-filmstrip__track::-webkit-scrollbar { height: 4px; }
.c-filmstrip__track::-webkit-scrollbar-thumb { background: var(--color-line); }
.c-filmstrip__card { flex: 0 0 auto; width: min(66vw, 640px); scroll-snap-align: start; }
.c-filmstrip__frame { position: relative; overflow: hidden; aspect-ratio: 1980 / 1200; background: var(--color-bg-raised); }
.c-filmstrip__frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.c-filmstrip__card:hover .c-filmstrip__frame img { transform: scale(1.04); }
.c-filmstrip__cap { display: flex; justify-content: space-between; margin-top: var(--space-2xs); font-family: var(--font-display); font-size: var(--size-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-dim); }
.c-filmstrip__cap span:last-child { color: var(--color-accent); }
@media (pointer: coarse) and (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
  .c-filmstrip__card { width: 80vw; }
}