/* =====================================================================
   Turi Design — monochrome design system
   Grayscale only. NO black backgrounds: sections alternate between a light
   gray and a SLIGHTLY DARKER gray. Text stays dark (near-black) everywhere.
   Black is used only for small accents (buttons, logo, rules).
   Class names kept for stability:
     .light  = lighter gray panel
     .dark   = slightly darker gray panel (NOT dark mode)
   Type: Orbitron (display) · Maven Pro (labels) · Open Sans (body)
   ===================================================================== */

:root {
  /* two alternating mid-grays (.light = lighter, .dark = slightly darker) */
  --panel-light:  #e6e6e6;
  --panel-dark:   #d8d8d8;   /* slightly darker, for alternation */
  --header-bg:    #f5f5f5;

  /* charcoal blocks (cards / media) — light text on them */
  --block-1:    #3d3d3d;
  --block-2:    #2d2d2d;
  --block-line: rgba(255, 255, 255, 0.14);
  --on-block:        #ffffff;
  --on-block-soft:   #dcdcdc;
  --on-block-mute:   #b0b0b0;

  /* ink (text on gray) */
  --ink:      #1a1a1a;
  --ink-soft: #2b2b2b;
  --ink-mute: #555555;

  /* accents (monochrome) */
  --black:    #0a0a0a;
  --line:     rgba(0, 0, 0, 0.16);
  --line-2:   rgba(0, 0, 0, 0.26);
  --media-1:  #b0b0b0;

  --font-display: 'Orbitron', sans-serif;
  --font-alt:     'Maven Pro', sans-serif;
  --font-body:    'Bai Jamjuree', -apple-system, system-ui, sans-serif;

  --maxw:   1180px;
  --pad:    clamp(20px, 5vw, 64px);
  --radius: 6px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--panel-light);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.4rem, 6vw, 3.2rem); letter-spacing: 0.04em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
p  { margin: 0 0 1.1em; }
em { font-style: italic; color: var(--ink); }
strong { font-weight: 600; color: var(--ink); }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: #000; }

/* ---------- section tones (both light grays) ---------- */
.sec { padding: clamp(64px, 10vw, 130px) 0; }
.sec.tight { padding: clamp(40px, 6vw, 80px) 0; }
.light { background: var(--panel-light); }
.dark  { background: var(--panel-dark); }     /* slightly darker gray */
.dark.alt { background: var(--panel-dark); }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- eyebrow / labels ---------- */
.eyebrow {
  font-family: var(--font-alt);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.86rem;
  color: var(--ink-mute);
  margin-bottom: 1.1em;
}
.emph { position: relative; white-space: nowrap; }
.emph::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.06em;
  height: 3px; background: var(--ink); opacity: 0.9;
}

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 88px; }
.nav .logo img { height: 64px; width: auto; display: block; filter: invert(1); }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; position: relative; }
.nav ul a {
  color: var(--ink-soft);
  font-family: var(--font-alt);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  text-decoration: none;
  padding-bottom: 4px;
  white-space: nowrap;
}
.nav ul a:hover, .nav ul a.active { color: #000; }
/* single sliding underline; position + width set by assets/js/nav.js */
.nav-underline {
  position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
  background: var(--ink); pointer-events: none;
  transition: left 0.3s ease-out, width 0.3s ease-out;
}
/* hamburger toggle — hidden on desktop, shown on mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  margin: 0; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; margin: 0 auto;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  #primary-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--header-bg);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  #primary-nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: 4px var(--pad) 14px; }
  .nav ul a { display: block; padding: 15px 0; font-size: 0.95rem; border-bottom: 1px solid var(--line); }
  .nav ul li:last-child a { border-bottom: 0; }
  .nav-underline { display: none; }
}

/* ---------- buttons (black on gray) ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-alt);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 14px 30px;
  border-radius: 3px;
  text-decoration: none;
  background: var(--black);
  color: #fff;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn:hover { background: #333; color: #fff; transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn.ghost:hover { background: var(--black); color: #fff; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: clamp(90px, 16vh, 180px) 0 clamp(70px, 12vh, 130px);
  overflow: hidden;
  background:
    radial-gradient(75% 95% at 88% 0%, #c8c8c8, transparent 60%),
    var(--panel-light);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg svg { width: 100%; height: 100%; display: block; }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { max-width: none; }
/* vision page: manifesto hero on the slightly darker gray, to set it apart */
.hero.vision-hero { background: radial-gradient(75% 95% at 88% 0%, #c4c4c4, transparent 60%), var(--panel-dark); }
.hero .lead { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--ink-soft); max-width: 60ch; margin: 1.2em auto 0.4em; }
.hero p.sub { font-size: clamp(1.1rem, 2vw, 1.35rem); max-width: 800px; margin: 0.9em auto 0; color: var(--ink-soft); text-wrap: pretty; }
.hero .sig { font-family: var(--font-alt); color: var(--ink-mute); letter-spacing: 0.04em; margin-top: 1.6em; }
.hero .cta-row { margin-top: 2.4em; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* ---------- home hero: crossfading image slideshow ---------- */
.hero-slideshow {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(480px, 82vh, 780px);
  text-align: center;
  color: #fff;
}
.hero-slides { position: absolute; inset: 0; z-index: 0; background: #0a0a0a; }
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
}
.hero-slide.is-active { opacity: 1; }
/* keep the aircraft cabin's focal area below the top text band */
.hero-slide--aircraft { object-position: center top; }
.hero-slide--sportcar { object-position: center bottom; }
/* home hero: draggable horizontal slider — hero-slideshow.js adds .is-draggable
   when there are >=2 images, so single-image heroes keep the crossfade default */
.hero-slideshow.is-draggable { cursor: grab; touch-action: pan-y; user-select: none; }
.hero-slideshow.is-draggable.dragging { cursor: grabbing; }
.hero-slideshow.is-draggable .hero-slides { inset: 0 auto 0 0; display: flex; width: max-content; will-change: transform; }
.hero-slideshow.is-draggable .hero-slide { position: relative; inset: auto; height: 100%; flex: 0 0 auto; opacity: 1; transition: none; -webkit-user-drag: none; }
/* in-card galleries: cross-fade carousel — drag/swipe to change slide */
.n-media.is-carousel { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.n-media.is-carousel.dragging { cursor: grabbing; }
.n-media.is-carousel img { -webkit-user-drag: none; }
/* tools hero: greeble texture field with the Q logo centred over it */
.hero-cluster .hero-slides { background: #0a0a0a url("../img/tools/virqubeBackground01.jpg") center / cover no-repeat; }
.hero-cluster .hero-logo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;
  pointer-events: none;
}
.hero-cluster .hero-logo img {
  display: block; height: clamp(160px, 27vh, 260px); width: auto;
  /* black shadow that repeats the logo shape, dropped just below it */
  filter: drop-shadow(0 14px 9px rgba(0, 0, 0, 0.9));
}
.hero-cluster .hero-slide { object-fit: contain; object-position: center bottom; }
.hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  /* sit halfway between the CTA buttons' lower edge and the bottom of the hero:
     the bottom band's padding-bottom is that gap, so center the dash box on half of it */
  bottom: calc(clamp(28px, 5vh, 60px) / 2 - 9.5px);
  z-index: 3;
  display: flex;
  gap: 12px;
  justify-content: center;
}
.hero-dots button {
  width: 26px;
  height: 3px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  box-sizing: content-box;
  -webkit-appearance: none;
  appearance: none;
}
.hero-dots button::before {
  content: "";
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
  transition: background 0.4s ease;
}
.hero-dots button:hover::before { background: rgba(255, 255, 255, 0.7); }
.hero-dots button.is-active::before { background: #fff; }
.hero-slideshow .hero-band { position: relative; z-index: 2; }
.hero-slideshow .hero-band-top {
  background: linear-gradient(to bottom,
    rgba(10, 10, 10, 0.98) 0%,
    rgba(10, 10, 10, 0.82) 40%,
    rgba(10, 10, 10, 0.45) 75%,
    transparent 100%);
  padding: clamp(24px, 4vh, 54px) 0 clamp(40px, 8vh, 90px);
}
.hero-slideshow .hero-band-bottom {
  background: linear-gradient(to top,
    rgba(10, 10, 10, 0.7) 0%,
    rgba(10, 10, 10, 0.45) 55%,
    rgba(10, 10, 10, 0.15) 85%,
    transparent 100%);
  padding: clamp(40px, 8vh, 90px) 0 clamp(28px, 5vh, 60px);
}
.hero-slideshow h1 { color: #fff; max-width: none; }
.hero-slideshow .lead { font-size: clamp(1.1rem, 2vw, 1.35rem); color: rgba(255, 255, 255, 0.92); max-width: none; margin: 1.1em auto 0.4em; }
/* signature line: same low resting position across the hero pages (drop the bottom margin so it
   sits one dots-gap above the slideshow dots on the home hero) */
.hero-slideshow .sig, .media-hero .sig { font-family: var(--font-alt); color: rgba(255, 255, 255, 0.72); letter-spacing: 0.04em; margin: 1.4em 0 0; }
.hero-slideshow .sig a, .media-hero .sig a { color: inherit; text-decoration: none; }
.hero-slideshow .sig a:hover, .media-hero .sig a:hover { color: #fff; text-decoration: underline; }
.hero-slideshow .cta-row { margin-top: 2em; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hero-slideshow .btn { background: #fff; color: #0a0a0a; }
.hero-slideshow .btn:hover { background: #e6e6e6; color: #0a0a0a; }
.hero-slideshow .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.hero-slideshow .btn.ghost:hover { background: #fff; color: #0a0a0a; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* ---------- manifesto ---------- */
.manifesto p { font-size: clamp(1.05rem, 1.8vw, 1.28rem); max-width: 70ch; }

/* ---------- manifesto / the vision (centered, two worlds) ---------- */
.manifesto-vision { text-align: center; }
.manifesto-vision .wrap { max-width: 860px; }
.manifesto-vision .eyebrow { margin-bottom: 1.6em; }
.manifesto-vision p { font-size: clamp(1.06rem, 1.8vw, 1.26rem); max-width: 64ch; margin: 0 auto 1.1em; }
.manifesto-vision p:last-child { margin-bottom: 0; }
.manifesto-vision .closer { margin: 0.3em auto 0; }
.manifesto-vision .closer:first-of-type { margin-top: 1.8em; }

/* ---------- bridge beat (theory -> practice) ---------- */
.bridge p { max-width: 64ch; margin: 0.7em auto 0; color: var(--ink-mute); }
.hero .manifesto-vision { margin-top: 1.8em; margin-bottom: 0.4em; }
.hero .manifesto-vision p { max-width: none; }   /* use the full content width (logo-to-Contact) */
.vision-more { margin-top: 1.6em; }
.vision-more a { font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; text-decoration: none; }

/* accelerator closing couplet */
.accel-close { max-width: 42ch; margin: 0 auto; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.45; color: var(--ink); }
.accel-close strong { font-weight: 600; }
/* inline emphasis by size (not weight) */
.accel-line { font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.5; color: var(--ink); }

/* cadenced lines + centered section notes (home narrative beats) */
.cadence { max-width: 60ch; margin: 0 auto 1.8em; color: var(--ink); font-size: clamp(1.04rem, 1.8vw, 1.28rem); line-height: 1.65; }
.cadence:last-child { margin-bottom: 0; }
.sec-note { max-width: 64ch; margin: 0 auto 2.2em; color: var(--ink-mute); }
.sec-note:last-child { margin-bottom: 0; }

/* museum teaser (home) */
.years-row { font-family: var(--font-display); font-size: clamp(1rem, 2.4vw, 1.4rem); letter-spacing: 0.06em; color: var(--ink); line-height: 1.9; max-width: 30ch; margin: 0 auto; }

/* explore the system (home funnel cards) */
.sys-card { text-decoration: none; text-align: left; }
.sys-card h3 { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sys-card .arr { color: var(--on-block-mute); transition: transform 0.2s ease; }
.sys-card:hover .arr { transform: translateX(5px); color: var(--on-block); }

/* ---------- clarification strip (dark band, aside after the manifesto) ---------- */
.clarify { background: linear-gradient(150deg, var(--block-1), var(--block-2)); border-top: 1px solid var(--block-line); border-bottom: 1px solid var(--block-line); }
.clarify p { max-width: 74ch; margin: 0 auto 0.9em; color: var(--on-block-soft); font-size: 0.97rem; }
.clarify p:last-child { margin-bottom: 0; }
.clarify strong { color: var(--on-block); font-weight: 600; }

/* ---------- global horizontal centering ---------- */
.sec, .hero { text-align: center; }
.case-body { text-align: left; }   /* keep long-form case study readable */

/* ---------- section heads ---------- */
.shead { max-width: 64ch; margin: 0 auto 2.6em; }
.shead p { color: var(--ink-mute); }

/* ---------- feature (present / Uniphy) ---------- */
.feature { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }
.feature .meta { font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; color: var(--ink-mute); margin-bottom: 1.1em; }
.feature .media {
  aspect-ratio: 4 / 3; border-radius: var(--radius);
  border: 1px solid var(--block-line);
  background: linear-gradient(150deg, var(--block-1), var(--block-2));
  display: grid; place-items: center; text-align: center; padding: 24px;
  font-family: var(--font-alt); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.72rem;
  color: var(--on-block-mute);
}

/* ---------- cards grid ---------- */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 860px) { .grid3, .grid2 { grid-template-columns: 1fr; } }
.card {
  background: linear-gradient(150deg, var(--block-1), var(--block-2));
  border: 1px solid var(--block-line);
  border-radius: var(--radius); padding: 30px 28px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.card:hover { border-color: rgba(255, 255, 255, 0.4); transform: translateY(-3px); }
.card .num { font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.1em; margin-bottom: 0.8em; display: block; color: var(--on-block); }
.card h3 { margin-bottom: 0.5em; color: var(--on-block); }
.card p { font-size: 0.96rem; margin: 0; color: var(--on-block-mute); }
.card .when { margin-top: 1em; font-size: 0.85rem; color: var(--on-block-soft); }
.card .when b { font-weight: 600; color: var(--on-block); }
/* value step inside a card (explanation above, value highlighted below) */
.card .value { margin: 1.1em 0 0; padding-top: 0.95em; border-top: 1px solid var(--block-line); font-size: 0.92rem; color: var(--on-block-soft); }
.card .value b { display: block; margin-bottom: 0.2em; font-weight: 600; color: var(--on-block); font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.66rem; }

/* service modes (Assets / Tools / Strategy) as cards — reuse .card, left-aligned, feet aligned */
.svc-grid { margin-top: 2.6em; }
.svc-grid .card { text-align: left; display: flex; flex-direction: column; }
.svc-grid .card .num { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1; margin-bottom: 0.15em; }
.svc-grid .card .tag { display: block; margin: 0.5em 0 1em; font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.64rem; color: var(--on-block-mute); }
.svc-grid .card h3 { margin-bottom: 0.7em; }
.svc-grid .card .when { margin-top: 1.1em; }
.svc-grid .card .when + .when { margin-bottom: 1.6em; }   /* keep the divider clear of the text above */
.svc-grid .card .value.outputs { margin-top: auto; }   /* push outputs to the card foot so the three align */
/* service card header: number on the left, themed icon on the right */
.svc-grid .card .svc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.15em; }
.svc-grid .card .svc-top .num { margin-bottom: 0; }
.svc-grid .card .svc-top .ic { color: var(--on-block); }
.svc-grid .card .svc-top .ic svg { width: 30px; height: 30px; display: block; }
.svc-grid .card .svc-top .ic-sm svg { width: 26px; height: 26px; }
/* image header: full-bleed to the card edges, sits above the title */
.svc-grid .card .card-media {
  margin: -30px -28px 1.4em; overflow: hidden;
  border-bottom: 1px solid var(--block-line);
  border-radius: var(--radius) var(--radius) 0 0;
}
.svc-grid .card .card-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* tools page: image header + tag, no title; the Status line and the video
   carousel both sit at the card foot (Status just above the carousel) */
.tools-grid .card .tag { margin-top: 0; }
.tools-grid .card .when { margin-top: auto; padding-top: 1.1em; }
/* video carousel fused into the card foot: full-bleed to the card edges and
   flush with the bottom, no gap (mirrors the .card-media header at the top) */
.svc-grid .card .n-media {
  position: relative; margin: 1.3em -28px -30px; aspect-ratio: 16 / 9; overflow: hidden;
  border-top: 1px solid var(--block-line);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--black); display: grid; place-items: center;
}
.svc-grid .card .n-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-grid .card .n-media .cv-video { display: block; width: 100%; height: 100%; }
.svc-grid .card .n-media .cv-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* cross-faded layers (image or video thumb) stacked by carousel.js */
.svc-grid .card .n-media.is-carousel > img,
.svc-grid .card .n-media.is-carousel > .cv-video { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; }
.svc-grid .card .n-media.is-carousel > img.is-active,
.svc-grid .card .n-media.is-carousel > .cv-video.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .svc-grid .card .n-media.is-carousel > img,
  .svc-grid .card .n-media.is-carousel > .cv-video { transition: none; }
}
/* collapsible foot of the level cards: Main contact / Best when / Typical outputs.
   The chevron sits at the card foot; clicking reveals everything below it. */
/* cards sharing a row keep one height (default grid stretch) so they stay aligned
   as the text reflows at narrower widths (e.g. iPad landscape). Stacked in a single
   column the height no longer matters. */
.svc-grid .card .card-fold { margin-top: auto; }   /* keep the fold at the card foot */
/* each card sizes to its own content, so opening one expands only that card.
   level-cards.js equalises the closed heights so cards sharing a row still match;
   tighten the bottom padding (the card's own padding dominated the space under the chevron) */
.svc-grid .card:has(.card-fold) { align-self: start; padding-bottom: 20px; }
.card-fold-toggle { list-style: none; cursor: pointer; display: flex; justify-content: center;
  padding: 0.2em 0 0.25em; }
/* the divider appears only once the card is open: a light hairline above the revealed content */
.card-fold[open] .card-fold-toggle { border-bottom: 1px solid var(--block-line); }
.card-fold-toggle::-webkit-details-marker { display: none; }
.card-fold-ic { display: grid; place-items: center; color: var(--on-block); transition: transform 0.3s ease; }
.card-fold[open] .card-fold-ic { transform: rotate(180deg); }
.card-fold-body { padding-top: 1.1em; }
.card-fold-body > .when:first-child { margin-top: 0; }

/* ---------- carousel overlays (play badge + dashes), shared by every gallery ---------- */
/* play badge over a video slide */
.cv-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 56px; height: 56px; border-radius: 50%; pointer-events: none;
  background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.75);
  display: grid; place-items: center; transition: background 0.2s ease, transform 0.2s ease;
}
.cv-play::after {
  content: ""; margin-left: 4px;
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
[data-gallery]:hover .cv-play { background: rgba(0, 0, 0, 0.78); transform: translate(-50%, -50%) scale(1.06); }
/* slide dashes overlaid inside the media, pinned to the bottom */
.n-dots {
  position: absolute; left: 0; right: 0; bottom: 9px; z-index: 3;
  display: flex; justify-content: center; gap: 5px; padding: 0 12px;
}
.n-dots:empty { display: none; }
.n-dot {
  width: 18px; height: 3px; padding: 0; border: 0; border-radius: 2px;
  background: rgba(255, 255, 255, 0.45); cursor: pointer; transition: background 0.15s ease;
}
.n-dot:hover { background: rgba(255, 255, 255, 0.7); }
.n-dot.is-active { background: #fff; }
/* legibility scrim behind the dashes, over any image */
.is-carousel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); pointer-events: none;
}

/* why-me: compact value cards (Rare / Portable / Lean / Deep / Connected) */
.why-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 2.6em; }
.why-grid .card { padding: 24px 22px; text-align: left; }
.why-grid .card .ic { display: block; color: var(--on-block); margin-bottom: 0.8em; }
.why-grid .card .ic svg { width: 28px; height: 28px; display: block; }
.why-grid .card h3 { margin-bottom: 0.5em; }
.why-grid .card p { font-size: 0.9rem; line-height: 1.6; }
@media (max-width: 1024px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  {
  .why-grid { grid-template-columns: 1fr; }
  /* stacked full-width cards: put the icon and title on one line, text below,
     to claw back vertical space */
  .why-grid .card { display: grid; grid-template-columns: auto 1fr; column-gap: 0.7em; align-items: center; }
  .why-grid .card .ic { margin-bottom: 0; }
  .why-grid .card h3 { margin-bottom: 0; }
  .why-grid .card p { grid-column: 1 / -1; margin-top: 0.55em; }
}

/* ---------- integrated design: horizontal stacked blocks ---------- */
.integrations { display: flex; flex-direction: column; gap: 14px; }
.integration { background: linear-gradient(150deg, var(--block-1), var(--block-2)); border: 1px solid var(--block-line); border-radius: var(--radius); text-align: left; transition: border-color 0.2s ease; }
.integration:hover { border-color: rgba(255, 255, 255, 0.32); }
.integration > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: clamp(14px, 2.2vw, 20px);
  padding: clamp(20px, 2.6vw, 30px) clamp(22px, 3vw, 42px);
}
.integration > summary::-webkit-details-marker { display: none; }
.integration > summary::marker { content: ""; }
.integration .num { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 2rem); color: var(--on-block); line-height: 1; width: clamp(34px, 5vw, 48px); flex: none; }
.integration summary h3 { color: var(--on-block-mute); margin: 0; flex: 1; font-weight: 400; }
.integration summary h3 strong { font-weight: 400; color: var(--on-block); }
.integration .int-ic { flex: none; display: flex; color: var(--on-block); }
.integration .int-ic svg { width: 24px; height: 24px; display: block; }
.integration .int-toggle { position: relative; flex: none; width: 22px; height: 22px; transform-origin: 50% 50%; transition: transform 0.3s ease; }
.integration .int-toggle::before, .integration .int-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--on-block); }
.integration .int-toggle::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.integration .int-toggle::after { width: 2px; height: 16px; transform: translate(-50%, -50%); }
.integration[open] .int-toggle { transform: rotate(135deg); }
.integration .int-body { padding: 0 clamp(22px, 3vw, 42px) clamp(26px, 3vw, 34px); }
/* native animated expand/collapse (Chromium); instant fallback elsewhere */
:root { interpolate-size: allow-keywords; }
.integration::details-content { height: 0; overflow: clip; transition: height 0.34s ease, content-visibility 0.34s allow-discrete; }
.integration[open]::details-content { height: auto; }
.integration .int-body > p:first-child { margin-top: 0; }
.integration p { color: var(--on-block-mute); margin: 0 0 0.7em; max-width: 78ch; }
.integration .int-foot {
  margin-top: 1.3em; padding-top: 1em; border-top: 1px solid var(--block-line);
  display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(20px, 4vw, 40px); flex-wrap: wrap;
}
.integration .value { margin: 0; color: var(--on-block-soft); font-size: 0.95rem; flex: 1 1 50%; min-width: 240px; }
.integration .value b { display: block; margin-bottom: 0.25em; color: var(--on-block); font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.66rem; }
.integration .int-link {
  flex: 1 1 280px; max-width: 360px; display: block; text-decoration: none;
  background: var(--black); border-radius: var(--radius); padding: 15px 18px;
  transition: background 0.2s ease, transform 0.18s ease;
}
.integration .int-link:hover { background: #333; transform: translateY(-2px); }
.integration .il-title { display: block; font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: #fff; margin-bottom: 0.4em; }
.integration .il-desc { display: block; font-size: 0.82rem; color: rgba(255, 255, 255, 0.62); line-height: 1.45; }

/* ---------- selected work (visual gallery) ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .gallery { grid-template-columns: 1fr; } }
.work-card { display: flex; flex-direction: column; }
.work-card .thumb {
  aspect-ratio: 4 / 3; border-radius: var(--radius);
  border: 1px solid var(--block-line);
  background: linear-gradient(150deg, var(--block-1), var(--block-2));
  display: grid; place-items: center; text-align: center; padding: 16px; overflow: hidden;
  color: var(--on-block-mute);
  font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.work-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.work-card:hover .thumb { border-color: rgba(255, 255, 255, 0.4); transform: translateY(-3px); }
.work-card .yr-tag { font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem; color: var(--ink-mute); margin-top: 1em; }
.work-card h3 { margin: 0.25em 0 0.3em; font-size: 1.08rem; }
.work-card p { font-size: 0.92rem; color: var(--ink-mute); margin: 0; }
.work-card .more { margin-top: 0.6em; font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; }

/* ---------- talks & moments (photo strip) ---------- */
.talks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .talks-grid { grid-template-columns: 1fr; } }
.talk { margin: 0; }
.talk .thumb {
  aspect-ratio: 4 / 3; border-radius: var(--radius);
  border: 1px solid var(--block-line);
  background: linear-gradient(150deg, var(--block-1), var(--block-2));
  display: grid; place-items: center; overflow: hidden;
  color: var(--on-block-mute);
  font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem;
}
.talk .thumb img { width: 100%; height: 100%; object-fit: cover; }
.talk figcaption { margin-top: 0.7em; font-size: 0.9rem; color: var(--ink-mute); }

/* ---------- the two halves: experience design + experience engineering ---------- */
.duo { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px, 4vw, 48px); align-items: start; }
@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; gap: 30px; }
  .duo-plus { display: none; }
}
.duo-col h3 { margin: 0 0 0.1em; }
.duo-col .role { font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.7rem; color: var(--ink-mute); margin: 0 0 1.1em; }
.duo-col .disc { margin-top: 1.2em; font-family: var(--font-alt); letter-spacing: 0.05em; font-size: 0.82rem; color: var(--ink-mute); }
.duo-plus { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--ink); line-height: 1; align-self: center; }

/* ---------- disciplines: creative side · number · technical side ---------- */
/* each row is one discipline; the two halves converge on a central axis,
   echoing the centred number layout of the case study */
.disciplines { max-width: none; text-align: left; }
/* column header: which side is creative, which is technical */
.disc-cols-head {
  display: grid; grid-template-columns: 1fr clamp(52px, 6.5vw, 92px) 1fr;
  gap: clamp(16px, 2.2vw, 38px); align-items: center;
  padding-bottom: 1.1em; margin-bottom: 0.4em; border-bottom: 1px solid var(--line-2);
}
.disc-cols-head .eyebrow { margin: 0; }
.disc-cols-head .h-creative { text-align: right; }
.disc-cols-head .h-technical { text-align: left; }
.disc-cols-head .h-plus { text-align: center; font-family: var(--font-display); color: var(--ink); font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1; position: relative; top: -0.1em; }

.discipline {
  display: grid;
  grid-template-columns: 1fr clamp(52px, 6.5vw, 92px) 1fr;
  gap: clamp(16px, 2.2vw, 38px);
  align-items: start;
  padding: clamp(28px, 4vw, 46px) 0;
  border-bottom: 1px solid var(--line);
}
.discipline:last-child { border-bottom: 0; }
/* the whole left half hugs the centre (right-aligned), the whole right half
   mirrors it (left-aligned): eyebrow, title, description and sub-disciplines alike */
.d-creative, .d-creative .d-tag, .d-creative h3, .d-creative p, .d-creative .d-skills { text-align: right; }
.d-technical, .d-technical .d-tag, .d-technical h3, .d-technical p, .d-technical .d-skills { text-align: left; }
.d-side .d-tag { font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.66rem; color: var(--ink-mute); margin: 0 0 0.7em; }
/* two-column layout has a fixed content width, so the title uses a fixed size
   chosen to keep even the longest title on a single line */
.d-side h3 { margin: 0 0 0.5em; font-size: 1.08rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.d-side p  { color: var(--ink-mute); margin: 0 0 0.7em; max-width: none; min-height: 3.4em; }
/* only the description is width-capped; eyebrow + sub-disciplines span the full
   column so their edge reaches the central axis like the title does */
.d-side .d-tag, .d-side .d-skills { max-width: none; }
.d-creative p  { margin-left: auto; }    /* description box hugs the centre on the left half */
.d-technical p { margin-right: auto; }   /* ...and on the right half */
/* sub-disciplines: detached at the foot of each side by a hairline */
.d-side .d-skills { font-family: var(--font-alt); letter-spacing: 0.04em; font-size: 0.78rem; color: var(--black); margin: 1em 0 0; padding-top: 0.85em; border-top: 1px solid var(--line); }
/* central axis: number + discipline name, with a hairline suggesting the join */
.d-axis { justify-self: center; align-self: start; text-align: center; }
.d-axis .d-num { display: block; font-family: var(--font-display); color: var(--ink); font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1; letter-spacing: 0.02em; }
.d-axis .d-name { display: block; margin-top: 0.6em; font-family: var(--font-alt); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.74rem; color: var(--ink); }
/* central axis foot: hairline, then a discipline icon as large as the number */
.d-axis .d-ic { display: block; color: var(--ink); }
.d-axis .d-ic::before { content: ""; display: block; width: 1px; height: clamp(26px, 4vw, 46px); background: var(--ink); margin: 0.85em auto 0.85em; }
.d-axis .d-ic svg { width: clamp(2.4rem, 5vw, 3.4rem); height: auto; display: block; margin: 0 auto; }
@media (max-width: 1180px) {
  .disc-cols-head { display: none; }
  .discipline { grid-template-columns: 1fr; gap: 4px; }
  .d-creative, .d-creative .d-tag, .d-creative h3, .d-creative p, .d-creative .d-skills,
  .d-technical, .d-technical .d-tag, .d-technical h3, .d-technical p, .d-technical .d-skills { text-align: left; }
  .d-creative p, .d-technical p, .d-side p { margin-left: 0; margin-right: 0; max-width: none; min-height: 0; }
  .d-side h3 { white-space: normal; font-size: clamp(1.1rem, 2vw, 1.3rem); }   /* stacked: room for bigger titles that can wrap */
  .d-axis { justify-self: stretch; align-self: start; text-align: left; order: -1; display: flex; align-items: baseline; gap: 12px; margin-bottom: 0.6em; }
  .d-axis .d-name { margin-top: 0; }
  .d-axis .d-ic { display: block; margin-left: auto; align-self: center; }
  .d-axis .d-ic::before { display: none; }
  .d-technical { margin-top: 1.4em; }
}

/* ---------- mobile: creative/technical as a two-option switch within one card ----------
   desktop keeps both sides visible either side of the axis; below the stacking
   breakpoint the two sides become tabs of one card. A segmented control with a
   sliding pill toggles which side is shown. State is driven from hidden radios via
   plain sibling selectors (~) so it stays reliable across engines. */
.d-toggle-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
.d-switch { display: none; }
@media (max-width: 1180px) {
  .d-axis { order: -2; }                 /* axis stays at the top of the card */
  .d-switch {
    display: inline-flex; order: -1; justify-self: start; align-self: start;
    margin: 0.1em 0 1.3em; overflow: hidden;
    border: 1px solid var(--line-2); border-radius: 999px;
  }
  .d-switch label {
    flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap;
    font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.12em;
    font-size: 0.66rem; line-height: 1; padding: 0.66em 1.3em;
    color: var(--ink-mute); cursor: pointer; user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .d-switch label + label { border-left: 1px solid var(--line-2); }
  /* active segment — font-weight change keeps the selector re-evaluating reliably */
  .d-toggle-input.is-creative:checked  ~ .d-switch .sw-creative,
  .d-toggle-input.is-technical:checked ~ .d-switch .sw-technical {
    background: var(--ink); color: var(--on-block); font-weight: 600;
  }
  .d-toggle-input:focus-visible ~ .d-switch { outline: 2px solid var(--ink); outline-offset: 2px; }
  /* show only the selected side */
  .d-toggle-input.is-creative:checked  ~ .d-technical,
  .d-toggle-input.is-technical:checked ~ .d-creative { display: none; }
  .d-technical { margin-top: 0; }
}

/* hero plus accent (echo of the logo) */
.hero h1 .plus { color: var(--ink); font-weight: 500; }
.hero h1 .nw { white-space: nowrap; }
/* mobile: shrink so "Experience Engineering." fits and breaks cleanly after the + */
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(1.45rem, 6.4vw, 2.4rem); letter-spacing: 0.01em; }
}
/* tiniest screens: let the second phrase wrap rather than ever clip */
@media (max-width: 360px) {
  .hero h1 .rel { white-space: normal; }
}

/* ---------- museum of firsts (reuses the case study item layout) ---------- */
/* same image · centred axis · text grid; the axis shows the year instead of a counter */
.case-body > ol.year-list > li::before { content: attr(data-year); }
/* timeline: the tick under each year stretches down to the next year, forming a
   continuous temporal axis with the years as nodes (last year ends the axis) */
.case-body > ol.year-list > li::after {
  align-self: stretch; height: auto;   /* fill the item's row height, then bridge the gap below */
  /* balanced breathing room above and below each year on the axis */
  margin: 3.4rem 0 calc(1.6rem - clamp(40px, 6vw, 72px));
}
.case-body > ol.year-list > li:last-child::after { display: none; }

/* ---------- clients ---------- */
.clients-viewport { overflow: hidden; width: 100%; cursor: grab; touch-action: pan-y; }
.clients-viewport.dragging { cursor: grabbing; }
.clients { display: flex; flex-wrap: nowrap; gap: clamp(8px, 1.2vw, 24px); align-items: center; justify-content: flex-start; width: max-content; padding: 0; margin: 0; will-change: transform; }
.clients li { list-style: none; flex: none; display: flex; align-items: center; justify-content: center; }
.clients img { display: block; height: auto; width: auto; opacity: 0.72; user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* keep the thin wordmarks at full strength to balance visual weight */
.clients img[src*="louis-vuitton"], .clients img[src*="bulgari"] { opacity: 1; }
/* clients band: dark like the cards, logos already white on transparent */
#clients { background: linear-gradient(150deg, var(--block-1), var(--block-2)); border-top: 1px solid var(--block-line); border-bottom: 1px solid var(--block-line); padding-top: clamp(30px, 4.5vw, 54px); }
#clients .eyebrow { color: var(--on-block-mute); margin-bottom: clamp(28px, 4vw, 52px); }

/* ---------- contact ---------- */
.contact { text-align: center; }
.contact h2 { max-width: 22ch; margin-inline: auto; }
.contact > .wrap > p { max-width: 52ch; margin-inline: auto; color: var(--ink-mute); }

/* ---------- contact form ---------- */
.form { max-width: 620px; margin: 2.4em auto 0; text-align: left; display: grid; gap: 18px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }
.form label { display: block; font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.66rem; color: var(--ink-mute); margin-bottom: 0.5em; }
.form input, .form select, .form textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: #f0f0f0; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 12px 14px; transition: border-color 0.15s ease;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ink); }
.form textarea { min-height: 140px; resize: vertical; }
.form button.btn { border: 0; cursor: pointer; }
.form .form-actions { margin-top: 0.4em; }
.form .form-note { font-size: 0.82rem; color: var(--ink-mute); margin: 0.2em 0 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--panel-dark); border-top: 1px solid var(--line); padding: 40px 0; color: var(--ink-mute); font-size: 0.85rem; }
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: #000; }
.site-footer .social { display: inline-flex; align-items: center; gap: 18px; }
.site-footer .social a { display: inline-flex; transition: color 0.15s ease, transform 0.15s ease; }
.site-footer .social a:hover { transform: translateY(-2px); }
.site-footer .social svg { width: 20px; height: 20px; display: block; }

/* =====================================================================
   Case study page
   ===================================================================== */
.case-hero {
  padding: clamp(80px, 14vh, 150px) 0 clamp(40px, 6vw, 70px);
  background: radial-gradient(75% 95% at 88% 0%, #d4d4d4, transparent 60%), var(--panel-dark);
}
.case-hero .kicker { font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem; color: var(--ink-mute); margin-top: 1.4em; }
.case-hero .hook { font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--ink-soft); max-width: 60ch; border-left: 2px solid var(--ink); padding-left: 22px; margin-top: 1.8em; }
/* museum hero: centred, no vertical rule on the hook */
.museum-hero { text-align: center; }
.museum-hero .hook { border-left: 0; padding-left: 0; margin-left: auto; margin-right: auto; }
/* museum image hero: image fills the whole hero so no panel shows below it */
.museum-hero.media-hero { min-height: clamp(480px, 82vh, 780px); }
.museum-hero.media-hero .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; aspect-ratio: auto; }
/* mobile: wrap at the normal hero size like the other heroes (no font shrinking) */
.museum-hero.media-hero h1 { font-size: clamp(2.4rem, 6vw, 3.2rem); }
/* wide screens: keep the long title on a single line, scaling down only enough to fit */
@media (min-width: 761px) {
  .museum-hero.media-hero h1 { white-space: nowrap; font-size: min(3.2rem, calc((100vw - 2 * var(--pad)) * 0.044)); }
}
/* about hero: same layout as the home hero (single portrait + gradient bands) */
.hero-slideshow .hero-back { position: absolute; top: clamp(16px, 3vw, 26px); left: 0; z-index: 3; width: 100%; margin: 0; padding: 0 var(--pad); text-align: left; }
.hero-slideshow .hero-back .backlink { color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); }
.about-hero .hero-slide { object-position: center 28%; }
.about-hero .hero-band-top .eyebrow { color: rgba(255, 255, 255, 0.78); margin-bottom: 0.6em; }

.backlink { font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.76rem; text-decoration: none !important; }

/* full-bleed image hero (case study page + home case-study section) */
/* full-bleed image hero with a dark band (case study page + home case-study section) */
.media-hero { position: relative; display: grid; padding: 0; min-height: 0; color: #fff; }
.media-hero .hero-img { grid-column: 1; grid-row: 1; display: block; width: 100%; height: auto; }
.media-hero .hero-band { grid-column: 1; grid-row: 1; align-self: end; z-index: 2; background: linear-gradient(to top, rgba(12, 12, 12, 0.62) 0%, rgba(12, 12, 12, 0.36) 45%, rgba(12, 12, 12, 0.1) 80%, transparent 100%); padding: clamp(48px, 9vw, 110px) 0 clamp(28px, 5vw, 60px); }
.media-hero .hero-band .wrap { text-align: center; }
/* home case-study: darken the whole image and centre the text vertically */
.sec.media-hero .hero-band { align-self: stretch; display: grid; align-content: center; background: rgba(16, 16, 16, 0.55); padding: clamp(28px, 5vw, 60px) 0; }
/* fill the full section height (set by the text band), cropping the sides instead of leaving grey below */
.sec.media-hero .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; }
/* desktop: give the home case-study section more vertical presence (between text height and a full hero) */
@media (min-width: 761px) { .sec.media-hero { min-height: 78vh; } }
.media-hero h1, .media-hero h2, .media-hero h3 { color: #fff; }
.media-hero .eyebrow, .media-hero .meta, .media-hero .kicker { color: rgba(255, 255, 255, 0.78); }
.media-hero p { color: rgba(255, 255, 255, 0.92); }
.media-hero a:not(.btn) { color: #fff; }
.media-hero .hook { color: #fff; border-left: 0; padding-left: 0; margin-left: auto; margin-right: auto; }
.media-hero .btn { background: #fff; color: #0a0a0a; }
.media-hero .btn:hover { background: #e6e6e6; color: #0a0a0a; }
.media-hero .hero-back { position: absolute; top: clamp(16px, 3vw, 26px); left: 0; z-index: 3; width: 100%; margin: 0; padding: 0 var(--pad); text-align: left; }
.media-hero .hero-back .backlink { color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); }
.case-sub { font-size: clamp(1.1rem, 2vw, 1.5rem); margin: 0.1em 0 1.2em; }
/* home case-study: stack the body lines with no gap between paragraphs */
.sec.media-hero .hero-band p:not(.case-sub) { margin: 0; }
/* page heroes (case study / about / museum): on mobile the wide image is shorter than the
   text band, exposing the grey page background; let the image cover the hero instead */
.media-hero:not(.sec) { background: #0a0a0a; }
@media (max-width: 760px) {
  .media-hero:not(.sec) .hero-img { height: 100%; object-fit: cover; }
  /* on mobile, make the case-study heroes as tall as the home hero */
  .sec.media-hero,
  .case-hero.media-hero { min-height: clamp(480px, 82vh, 780px); }
}

.case-body { max-width: none; }

/* prose pages (tools, about): read the whole page as left-aligned prose, the way
   the case study body reads, rather than centered columns. Section heads and intro
   anchor to the left edge; body notes run full width. CTAs stay centered. */
.page-prose .sec { text-align: left; }
.page-prose .shead { max-width: none; margin-left: 0; margin-right: 0; }
.page-prose .cadence { margin-left: 0; margin-right: 0; }
.page-prose .sec-note { max-width: none; margin-left: 0; margin-right: 0; text-align: left; }
/* keep the process image's left edge flush with the text column */
.page-prose .tool-schema { margin-left: 0; margin-right: 0; }
/* call-to-action blocks stay centered even on the left-aligned page */
.page-prose .sec.contact { text-align: center; }
.page-prose .sec-cta { text-align: center; margin-left: auto; margin-right: auto; }
/* services: the "Why" disciplines block is a symmetric centerpiece (creative
   mirrors technical around a central axis) — keep it and its heading centered */
.page-prose .sec.sec-symmetric { text-align: center; }
.page-prose .sec.sec-symmetric .shead { max-width: none; margin-left: 0; margin-right: 0; text-align: left; }
/* the accelerator closing couplet follows the left-aligned reading flow */
.page-prose .accel-close { margin-left: 0; }
.case-intro { max-width: none; margin: 0 0 2.6em; text-align: left; }
.case-intro p { color: var(--ink-soft); margin: 0 0 0.9em; }
.case-intro p:last-child { margin-bottom: 0; }
.case-intro .case-intro-big { font-size: clamp(1.04rem, 1.8vw, 1.28rem); color: var(--ink); line-height: 1.65; margin-top: 1.1em; }
.case-body h2 { margin-top: 2.2em; }
.case-body h2:first-child { margin-top: 0; }
.case-body ul, .case-body ol { padding-left: 0; list-style: none; }
.case-body > ul > li, .case-body > ol > li {
  background: #c4c4c4;
  border-radius: var(--radius);
  padding: 26px 28px; margin-bottom: 14px; color: var(--ink-soft);
}
.case-body > ul > li strong, .case-body > ul > li em,
.case-body > ol > li strong, .case-body > ol > li em { color: var(--ink); }
.case-body > ul > li a, .case-body > ol > li a { color: var(--ink); }
.case-body > ol { counter-reset: caseitem; }
.case-body > ol > li {
  counter-increment: caseitem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* image · number · text */
  gap: clamp(12px, 2.2vw, 26px);
  align-items: start;
  text-align: left;
  background: none; padding: 0;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.case-body > ol > li:last-child { margin-bottom: 0; }
/* number sits exactly in the centre of the row / page, aligned to the top */
.case-body > ol > li::before {
  content: counter(caseitem, decimal-leading-zero);
  grid-column: 2; grid-row: 1; align-self: start; justify-self: center;
  margin-top: -0.063em;   /* lift the number's ink to the title's ink line */
  font-family: var(--font-display); color: var(--ink);
  font-size: clamp(1.65rem, 3vw, 2rem); line-height: 1; letter-spacing: 0.02em;
  white-space: nowrap;
}
/* vertical tick below the number, echoing the disciplines axis on the services page */
.case-body > ol > li::after {
  content: ""; grid-column: 2; grid-row: 1;
  justify-self: center; align-self: start;
  width: 1px; height: clamp(26px, 4vw, 46px); background: var(--ink);
  margin-top: clamp(2.1rem, 3.4vw, 2.55rem);
}
/* fixed 16:9 image on the left, top-aligned */
.case-body > ol > li .n-media {
  grid-column: 1; grid-row: 1; align-self: start;
  margin-top: 3px;   /* drop hard image edge to the title/number ink line */
  aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  background: var(--media-1); display: grid; place-items: center; position: relative;
}
.case-body > ol > li .n-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* museum timeline: less wide (3:2) photos, leaving the case study at 16:9 */
.case-body > ol.year-list > li .n-media { aspect-ratio: 3 / 2; }
/* fill the tile so object-fit cover crops centered (not top-anchored) for portrait-ish photos */
.case-body > ol.year-list > li .n-media img { position: absolute; inset: 0; }
/* in-page carousel: stacked images cross-faded by carousel.js */
.case-body > ol > li .n-media.is-carousel img {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease;
}
.case-body > ol > li .n-media.is-carousel img.is-active { opacity: 1; }
/* figure groups a single image with its "visit the live site" link below it */
.case-body > ol > li .n-figure { grid-column: 1; grid-row: 1; align-self: start; min-width: 0; }
/* "visit the live site" link below a tile image */
.case-body > ol > li .n-visit { margin: 12px 0 0; text-align: center; }
.case-body > ol > li .n-visit a {
  font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.74rem; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line-2); padding-bottom: 3px; transition: border-color 0.15s ease;
}
.case-body > ol > li .n-visit a:hover { border-bottom-color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .case-body > ol > li .n-media.is-carousel img { transition: none; }
}
.case-body > ol > li .n-media.is-empty {
  text-align: center; padding: 10px;
  color: var(--ink-mute); font-family: var(--font-alt);
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.64rem; line-height: 1.5;
}
.case-body > ol > li .n-media.is-empty::after { content: "Immagine in arrivo"; }
/* text on the right of the centred number, top-aligned */
.case-body > ol > li .n-text { grid-column: 3; grid-row: 1; align-self: start; }
@media (max-width: 760px) {
  .case-body > ol > li { grid-template-columns: 1fr; gap: 14px; }
  .case-body > ol > li::before { grid-column: 1; grid-row: auto; justify-self: start; }
  .case-body > ol > li::after { display: none; }
  .case-body > ol.year-list > li::after { display: none; }   /* hide the timeline axis on stacked mobile */
  .case-body > ol > li .n-media { grid-column: 1; grid-row: auto; order: -1; }
  .case-body > ol > li .n-figure { grid-column: 1; grid-row: auto; order: -1; }
  .case-body > ol > li .n-text { grid-column: 1; grid-row: auto; }
}
.case-body .activity { display: block; color: var(--ink-soft); }
.case-body .impact { display: block; margin-top: 1.1em; color: var(--ink-soft); font-size: 0.92rem; }
.case-body .activity b, .case-body .impact b { display: block; margin-bottom: 0.4em; color: var(--ink); font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.66rem; font-weight: 600; }
.case-body .activity p, .case-body .impact p { margin: 0 0 0.6em; }
.case-body .activity p:last-child, .case-body .impact p:last-child { margin-bottom: 0; }
.case-body > ol > li .n-text h3 { margin: -1px 0 0.6em; }   /* optical lift to match image/number top */

/* case study entries: real centre axis (number, line, then the matching service icon + name) */
.case-body > ol:not(.year-list) > li::before,
.case-body > ol:not(.year-list) > li::after { content: none; }
.case-body > ol:not(.year-list) > li .n-axis {
  grid-column: 2; grid-row: 1; justify-self: center; align-self: start;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.n-axis .n-num { font-family: var(--font-display); color: var(--ink); line-height: 1; letter-spacing: 0.02em; font-size: clamp(1.65rem, 3vw, 2rem); margin-top: -0.063em; }
.n-axis .n-line { width: 1px; height: clamp(26px, 4vw, 46px); background: var(--ink); margin: clamp(0.8rem, 1.8vw, 1.1rem) 0 clamp(0.9rem, 1.8vw, 1.2rem); }
.n-axis .n-svc { color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 0.45em; }
.n-axis .n-svc svg { width: 26px; height: 26px; display: block; }
.n-axis .n-svc b { font-family: var(--font-alt); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.6rem; white-space: nowrap; }
/* fixed, compact centre column + tighter gap so the image and text sit closer and the images grow larger */
@media (min-width: 761px) { .case-body > ol:not(.year-list) > li { grid-template-columns: 1fr clamp(60px, 6vw, 74px) 1fr; gap: clamp(8px, 1.4vw, 16px); } }
@media (max-width: 760px) {
  .case-body > ol:not(.year-list) > li .n-axis { grid-column: 1; grid-row: auto; flex-direction: row; justify-self: start; align-items: center; gap: 10px; }
  .n-axis .n-line { display: none; }
  .n-axis .n-svc { flex-direction: row; gap: 0.5em; }
}

/* ===== case study: featured dark entry (Integrated Design Twin) — same layout & spacing as the numbered entries, on a full-bleed dark band ===== */
.case-body > ol > li.feature {
  background: var(--block-2);
  /* full-bleed dark band without affecting layout flow or causing horizontal scroll */
  box-shadow: 0 0 0 100vmax var(--block-2);
  clip-path: inset(0 -100vmax);
  padding: clamp(34px, 5vw, 60px) 0;
}
.case-body > ol > li.feature::before { color: var(--on-block); }
.case-body > ol > li.feature::after { background: var(--on-block); }
.case-body > ol > li.feature .n-text h3 { color: var(--on-block); }
.case-body > ol > li.feature .n-text p,
.case-body > ol > li.feature .n-text { color: var(--on-block-soft); }
.case-body > ol > li.feature .n-text strong,
.case-body > ol > li.feature .n-text em,
.case-body > ol > li.feature .n-text a { color: var(--on-block); }
.case-body > ol > li.feature .impact { color: var(--on-block-soft); }
.case-body > ol > li.feature .impact b { color: var(--on-block); }
.case-body > ol > li.feature .n-visit a { color: var(--on-block); border-bottom-color: var(--block-line); }
.case-body > ol > li.feature .n-visit a:hover { border-bottom-color: var(--on-block); }
.case-body > ol > li.feature .n-axis .n-num { color: var(--on-block); }
.case-body > ol > li.feature .n-axis .n-line { background: var(--on-block); }
.case-body > ol > li.feature .n-axis .n-svc { color: var(--on-block-mute); }
/* the image tile = tools hero look (texture field + Q logo + proportional shadow) */
.case-body > ol > li.feature .twin-media {
  background: #0a0a0a url("../img/tools/virqubeBackground01.jpg") center / cover no-repeat;
}
.case-body > ol > li.feature .twin-media img {
  width: auto; height: clamp(64px, 12vw, 132px); object-fit: contain;
  filter: drop-shadow(0 clamp(5px, 0.9vw, 10px) clamp(3px, 0.6vw, 6px) rgba(0, 0, 0, 0.85));
}
/* museum: Integrated Design Twin entry reuses the tools hero look (bg field + Q logo + proportional shadow) */
.case-body > ol.year-list > li .n-media.qhero {
  background: #0a0a0a url("../img/tools/virqubeBackground01.jpg") center / cover no-repeat;
  display: grid; place-items: center;
}
.case-body > ol.year-list > li .n-media.qhero img {
  position: static; inset: auto; width: auto; height: clamp(64px, 12vw, 132px);
  object-fit: contain;
  filter: drop-shadow(0 clamp(5px, 0.9vw, 10px) clamp(3px, 0.6vw, 6px) rgba(0, 0, 0, 0.85));
}
/* ===== museum: sticky list of years on the left, working as navigation ===== */
.case-body.has-yearnav { display: grid; grid-template-columns: clamp(46px, 6vw, 78px) 1fr; column-gap: clamp(16px, 3vw, 44px); align-items: start; }
/* entry grid (desktop): image narrower so the centre line stays at the page centre, text fills right */
@media (min-width: 761px) {
  .case-body.has-yearnav .year-list > li {
    --c: clamp(56px, 7vw, 94px);
    --shift: clamp(31px, 4.5vw, 61px);
    --eg: clamp(12px, 2.2vw, 26px);
    grid-template-columns: calc(50% - var(--shift) - var(--c) / 2 - var(--eg)) var(--c) 1fr;
  }
}
.case-body.has-yearnav > .case-intro { grid-column: 1 / -1; }
.case-body.has-yearnav > .year-nav { grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: 104px; display: flex; flex-direction: column; align-items: center; gap: 0.3em; }
.case-body.has-yearnav > .year-list { grid-column: 2; grid-row: 2; margin-top: 0; }
.case-body.has-yearnav > .case-intro { margin-bottom: 3.6em; }
.year-nav a { display: block; text-align: center; font-family: var(--font-display); font-size: clamp(0.7rem, 1vw, 0.86rem); letter-spacing: 0.03em; color: #aeaeae; text-decoration: none; line-height: 1.2; transition: color 0.15s ease; }
.year-nav a:not(:first-child)::before { content: ""; display: block; width: 1px; height: 0.9em; background: var(--line-2); margin: 0 auto 0.3em; }
.year-nav a:hover { color: var(--ink); }
.year-nav a.is-active { color: var(--ink); font-weight: 500; }
@media (max-width: 760px) {
  /* keep the year rail on mobile, narrower; entries stack in a single column */
  .case-body.has-yearnav { grid-template-columns: clamp(36px, 11vw, 52px) 1fr; column-gap: clamp(10px, 3vw, 18px); }
  .case-body.has-yearnav > .year-nav { top: 100px; }   /* clear the ~89px sticky header */
}

/* museum: clamp an entry's text to the image height, reveal the rest with a chevron */
.year-list .n-clip { position: relative; }
/* fade the last line out to transparent (so it stays fully shaped, not cut in half) */
.year-list li.clampable:not(.is-open) .n-clip {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2em), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 2em), transparent);
}
.year-list .n-more { display: none; margin: 0.5em 0 0; padding: 0.25em 0.4em; border: 0; background: none; color: var(--ink-mute); cursor: pointer; line-height: 0; }
.year-list li.clampable .n-more { display: inline-flex; }
.year-list .n-more svg { display: block; transition: transform 0.25s ease; }
.year-list li.is-open .n-more svg { transform: rotate(180deg); }
.year-list .n-more:hover { color: var(--ink); }
/* desktop: the collapsed text box matches the image height and the chevron sits
   at its bottom edge (aligned with the bottom of the image) */
@media (min-width: 761px) {
  .year-list li.clampable:not(.is-open) .n-text { position: relative; min-height: var(--imgh, 0); }
  .year-list li.clampable:not(.is-open) .n-more { position: absolute; left: 0; bottom: 0; margin: 0; }
}

.pullquote { font-family: var(--font-alt); font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.35; border: 0; margin: 1.4em 0; padding: 0 0 0 22px; border-left: 3px solid var(--ink); color: var(--ink); }
.note { font-size: 0.85rem; color: var(--ink-mute); background: var(--media-1); border: 1px dashed var(--line); border-radius: 6px; padding: 14px 18px; }

/* =====================================================================
   Lightbox / fullscreen gallery
   ===================================================================== */
[data-gallery] { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(10, 10, 10, 0.93);
  padding: clamp(20px, 5vw, 60px);
  touch-action: pan-y pinch-zoom;   /* horizontal gesture drives the swipe */
}
.lightbox .lb-media img { -webkit-user-drag: none; }
.lightbox.is-open { display: flex; }
.lb-stage { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 94vw; }
/* the media is a fixed viewport holding a prev/current/next track that can be dragged */
.lb-media { width: min(92vw, 1400px); height: calc(100vh - 160px); height: calc(100dvh - 160px); overflow: hidden; }
.lb-track { display: flex; height: 100%; will-change: transform; }
.lb-slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lb-slide img { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; display: block; border-radius: 4px; -webkit-user-drag: none; }
/* video: a poster + play button until tapped (the iframe is mounted on play).
   keep it 16:9 AND contained: cap the width by the available box height too, so a
   short (landscape) box shrinks the width instead of squashing aspect */
.lb-videowrap { position: relative; width: min(100%, 1280px, calc((100dvh - 160px) * 16 / 9)); aspect-ratio: 16 / 9; max-height: 100%; }
.lb-videowrap .lb-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.lb-videowrap iframe.lb-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 4px; display: block; }
.lb-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); cursor: pointer; display: grid; place-items: center; transition: background 0.15s ease; }
.lb-play:hover { background: rgba(0, 0, 0, 0.78); }
.lb-play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
/* caption + dashes live in a bar pinned to the bottom, so they never shift
   when the image changes aspect ratio */
.lb-bar {
  position: fixed; left: 0; right: 0; bottom: 24px; z-index: 205;
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 60px;
}
.lb-placeholder {
  width: min(82vw, 900px); aspect-ratio: 4 / 3; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px;
  color: #9a9a9a; font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem;
}
.lb-cap { color: #d6d6d6; font-family: var(--font-alt); font-size: 0.85rem; letter-spacing: 0.04em; text-align: center; max-width: 60ch; }
.lb-close, .lb-prev, .lb-next {
  position: fixed; background: none; border: 0; color: #fff; cursor: pointer;
  line-height: 1; padding: 12px; opacity: 0.7; transition: opacity 0.15s ease;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { opacity: 1; }
.lb-close { top: 14px; right: 20px; font-size: 2.6rem; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 3rem; }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
/* dash indicators: one per image, classic gallery feedback */
.lb-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; max-width: min(92vw, 720px); }
.lb-dots:empty { display: none; }
.lb-dot { width: 20px; height: 3px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.32); cursor: pointer; transition: background 0.15s ease; }
.lb-dot:hover { background: rgba(255, 255, 255, 0.6); }
.lb-dot.is-active { background: #fff; }
/* short landscape (phones rotated): vertical space is scarce, so let the media
   fill (almost) the whole height and float the controls over it instead of
   reserving a band for them — the image stays as large as the viewport allows */
@media (orientation: landscape) and (max-height: 600px) {
  .lightbox { padding: 0; }
  .lb-media { height: 100dvh; }
  .lb-videowrap { width: min(100%, 1280px, calc(100dvh * 16 / 9)); }
  .lb-bar { bottom: 6px; gap: 5px; padding: 0 54px; }
  .lb-cap { background: rgba(0, 0, 0, 0.4); padding: 3px 11px; border-radius: 11px; backdrop-filter: blur(2px); }
  .lb-close { font-size: 2rem; top: 4px; right: 10px; }
  .lb-prev, .lb-next { font-size: 2.2rem; }
}