/* ============================================================
   CASE STUDY PAGES — harmonised with the homepage design system
   ink / bone / chartreuse-orange→pink — editorial, dark-first
   Built on the tokens defined in styles.css (auto light/dark).
   ============================================================ */

/* glassmorphism surface — matches the homepage cards.
   Default = dark; the light override mirrors styles.css. */
.glass-surface {
  background: rgba(11, 11, 12, 0.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
}
html[data-theme="light"] .glass-surface {
  background: rgba(240, 239, 246, 0.12);
}

/* lighter panel surface for image frames + the infographic band.
   One knob — tweak these two values to taste. */
body.casestudy-page { --surface: #1e1e22; }
html[data-theme="light"] body.casestudy-page { --surface: #f4f3fa; }

/* ------------------------------------------------------------
   Layout primitives
------------------------------------------------------------ */
.case-study-body {
  position: relative;
  z-index: 2;
}

/* offset in-page anchor jumps (side-nav dots, footer links) for the fixed nav */
.casestudy-page :is(section, footer)[id] { scroll-margin-top: 90px; }

.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  align-items: flex-start;
}
.cent { align-items: center; }

/* ------------------------------------------------------------
   Typography
------------------------------------------------------------ */
.case-study-body p { color: var(--bone-dim); }
.case-study-body strong { color: var(--bone); font-weight: 500; }

p.case { margin-bottom: 1rem; }

h2.summary-h2,
h2.case {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--bone);
}
h2.summary-h2 { margin-bottom: 1.6rem; }
h2.case { margin-bottom: clamp(1.5rem, 5vh, 3rem); }

h3.case {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 1rem;
}

.hrspace {
  margin: 2.4em 0;
  border: none;
  border-top: 1px solid var(--line);
}

.link--underline {
  color: var(--bone);
  background-image: var(--accent-gradient);
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size 0.4s var(--ease-out), color 0.3s;
}
.link--underline:hover {
  background-size: 100% 1.5px;
  color: var(--accent);
}

/* ------------------------------------------------------------
   HERO
------------------------------------------------------------ */
.hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero.case1 { background-image: url("../img/work/Roster/PASS_Roster_AIOP_2.jpg"); }
.hero.case2 { background-image: url("../img/work/Opsview/Opsview-dark-laptop.jpg"); }
.hero.case-naloxone { background-image: url("../img/work/Naloxone/iPad-Pro-2018-scaled.jpg"); }
.hero.case-signal { background-image: url("../img/work/Signal/hero-signal.jpg"); }

/* video-backed hero — poster image is the static fallback */
.hero.case-video { background-color: var(--ink); }
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;            /* sits behind the scrim (also z-index 0, later in DOM) and the content (z-index 1) */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* legibility scrim — follows the theme */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0.35) 0%, rgba(11, 11, 12, 0.7) 55%, var(--ink) 100%);
}
html[data-theme="light"] .hero-scrim {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.68) 55%, var(--ink) 100%);
}

/* Signal: lighter top so the hero image shows through more */
.hero.case-signal .hero-scrim {
  background: linear-gradient(180deg, rgba(11, 11, 12, 0) 0%, rgba(11, 11, 12, 0.6) 55%, var(--ink) 100%);
}
html[data-theme="light"] .hero.case-signal .hero-scrim {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 55%, var(--ink) 100%);
}

.hero .container {
  position: relative;
  z-index: 1;
  /* no horizontal padding; left margin = gutter so the content lines up
     with the nav logo, and the column is capped so text isn't too wide */
  width: auto;
  max-width: 56rem;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: clamp(3rem, 10vh, 7rem);
  padding-top: clamp(7rem, 14vh, 10rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.case-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bone-dim);
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  transition: color 0.3s, gap 0.3s var(--ease-out);
}
.case-back-arrow { font-family: var(--f-display); } /* Safiro — matches .work-card-arrow on the homepage */
.case-back:hover { color: var(--accent); gap: 0.8rem; }

.case-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--bone-dim);
  margin-bottom: clamp(1rem, 2.5vh, 1.6rem);
}
.case-eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-gradient);
  flex-shrink: 0;
  animation: pulse 2.4s ease-in-out infinite;
}

.hero h1 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(3rem, 12vw, 11rem);
  line-height: 0.85;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--bone);
}
.hero h1 .outline { -webkit-text-stroke-width: clamp(1.5px, 0.22vw, 3px); }

.hero-tagline {
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
  max-width: 34em;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  color: var(--bone-dim);
  text-wrap: balance;
}

/* ------------------------------------------------------------
   SUMMARY
------------------------------------------------------------ */
.summary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(4rem, 12vh, 8rem) 0 clamp(2rem, 6vh, 4rem);
}
.summary > .container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(2rem, 5vw, 4rem);
}
.summary-content { flex: 1 1 58%; min-width: 280px; }
.summary-table { flex: 1 1 30%; min-width: 240px; font-size: 0.95rem; }

table { width: 100%; border-collapse: collapse; }
table td {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.6;
  color: var(--bone-dim);
  vertical-align: top;
}
.col1 {
  width: 38%;
  padding-right: 1.5rem;
}
.col1 strong {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ------------------------------------------------------------
   CONTENT BLOCKS
------------------------------------------------------------ */
.case-study-content { padding: clamp(2rem, 6vh, 4rem) 0; }

.image-text-block {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 5vh, 3rem);
}

/* image group panel — glass, matches homepage cards */
.padded {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-radius: 12px;
  /* solid surface (no live backdrop-blur) — much cheaper on integrated GPUs */
  background: var(--surface);
  border: 1px solid var(--line);
}

.pad-gap { display: grid; gap: clamp(2rem, 5vw, 4rem); }

.image-text-block img {
  flex: 1 1 40%;
  max-width: 100%;
  border-radius: 8px;
}

.soft-shadow { box-shadow: 0 5px 24px rgba(0, 0, 0, 0.25); }

/* Dark mode: rest the content imagery at a dimmer level so bright UI shots
   don't glare, and bring each image to full brightness on hover. Only on
   hover-capable devices — touch users can't hover, so they see them full. */
@media (hover: hover) {
  html[data-theme="dark"] .case-study-body img {
    filter: brightness(0.72);
    /* keep the lightbox images' transform + shadow easing intact */
    transition: filter 0.45s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s;
  }
  html[data-theme="dark"] .case-study-body img:hover { filter: brightness(1); }
  /* leave the comparison slider and the faint background flourish alone */
  html[data-theme="dark"] .case-study-body .image-compare img { filter: none; }
  html[data-theme="dark"] .case-study-body .background-icon { filter: brightness(0) invert(1); }
}

/* title + text editorial split */
.title-text-block {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin: clamp(3rem, 8vh, 6rem) 0 clamp(2rem, 5vh, 3rem);
  width: 100%;
}
.title-text-block h2,
.title-text-block h3 { grid-column: 1; grid-row: 1; }
.title-text-block > p,
.title-text-block > div {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* full-bleed image band */
.big-img-col1 {
  position: relative;
  z-index: 2;
  margin: clamp(2rem, 6vh, 4rem) 0;
}
.big-img-col1 .container { max-width: 100%; padding: 0; }
.big-img { width: 100%; display: block; }

/* video */
.video-container {
  width: 100%;
  position: relative;
  padding-top: 47%;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.video-container video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------
   QUOTE
------------------------------------------------------------ */
.quote { padding: clamp(3rem, 8vh, 6rem) 0; }
blockquote {
  position: relative;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin-bottom: 2rem;
  max-width: 22em;
}
blockquote strong { color: var(--accent); font-weight: 600; }
blockquote::before {
  content: "";
  display: block;
  width: 36px;
  height: 24px;
  margin-bottom: 1rem;
  background-image: url(../img/work/quote2.svg);
  background-size: 30px;
  background-repeat: no-repeat;
  filter: invert(1);
}
html[data-theme="light"] blockquote::before { filter: none; }
blockquote.quote-above::before { margin-left: 0; }

.avatar {
  display: block;
  margin-top: 2rem;
  width: 54px;
  height: 54px;
  background-color: var(--ink-3);
  border-radius: 50%;
}
.av-john { background-image: url(../img/work/Roster/Avatar_John.png); background-size: 54px; }
.av-rc { background-image: url(../img/work/robert.jpg); background-size: 54px; }
.quoteby {
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--bone);
  margin-left: 72px;
  width: 200px;
  line-height: 1.5;
}
.role { font-weight: 400; font-size: 0.85rem; color: var(--bone-dim); }

/* ------------------------------------------------------------
   FOOTER / END ROW
------------------------------------------------------------ */
.footer { padding-top: clamp(3rem, 8vh, 6rem); }
.footer .container { gap: clamp(2rem, 6vw, 4rem); }

.endrow {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 96px;
  border-top: 1px solid var(--line);
  gap: 2rem;
  margin: clamp(3rem, 8vh, 5rem) auto 0;
  padding: 1.5rem var(--gutter);
}
.endrow a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bone-dim);
}
.endrow a:hover { color: var(--accent); }
.endrow a svg { transition: transform 0.35s var(--ease-out); }
.endrow a:hover svg { transform: translateX(-3px); }

/* ------------------------------------------------------------
   EDITORIAL GRID OVERLAY (dev)
------------------------------------------------------------ */
.case-grid-overlay {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  grid-template-columns: repeat(8, 1fr);
  gap: 24px;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}
.case-grid-overlay > div { border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }

/* ------------------------------------------------------------
   BEFORE/AFTER COMPARE + DIAGRAM GRID (shared, e.g. case2)
------------------------------------------------------------ */
.image-compare {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  user-select: none;
  touch-action: pan-y;
  cursor: col-resize;
}
.image-compare__after { display: block; width: 100%; height: auto; }
.image-compare__clip { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.image-compare__clip img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.image-compare__divider {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: var(--accent);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.image-compare__handle {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--bone);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  color: var(--ink);
  flex-shrink: 0;
}
.image-compare__labels {
  position: absolute;
  bottom: 1rem; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 0 1rem;
  pointer-events: none;
}
.image-compare__label {
  background: rgba(11, 11, 12, 0.55);
  color: var(--bone);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.diagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2rem;
  row-gap: 0.75rem;
  margin: 3rem 0 5rem;
}
.diagram-item { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-items: start; }
.diagram-item img { width: 100%; border-radius: 0.75rem; display: block; }
.diagram-item h4 { font-size: 1rem; font-weight: 600; margin: 0; color: var(--bone); }
.diagram-item p { font-size: 0.875rem; line-height: 1.6; margin: 0; }
.diagram-item .diagram-notes-label {
  font-family: var(--f-mono);
  font-size: 0.7rem; font-weight: 600;
  color: var(--bone-faint);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 1.5rem 0 0;
  align-self: end;
}
.diagram-notes { font-size: 0.875rem; color: var(--bone-faint); line-height: 1.6; margin: 0; }
@media (max-width: 768px) { .diagram-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   LIGHTBOX
------------------------------------------------------------ */
.lightbox-img {
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, filter 0.3s;
}
.lightbox-img:hover {
  transform: scale(1.01);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.lightbox-bg { background: var(--ink-3); }

.lightbox {
  /* The stage is stationary (it carries the backdrop blur). Scrolling happens
     on the inner .lightbox-scroll so the fixed controls don't ride along — a
     filter/backdrop-filter ancestor makes position:fixed anchor to it, so if
     this element scrolled, the controls would scroll with it. */
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 5, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox.show { opacity: 1; visibility: visible; }
/* full-width images are often taller than the viewport, so let this layer
   scroll vertically; contain stops the page behind from chaining */
.lightbox-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  text-align: center;
}
/* image always fills the width so fine detail is legible; height is free to
   exceed the viewport and scroll */
.lightbox-content {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 0;
}
/* controls stay fixed to the viewport while the image scrolls beneath */
.lightbox .close,
.lightbox .prev,
.lightbox .next {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--bone);
  background: rgba(4, 4, 5, 0.5);
  border: 1px solid rgba(234, 230, 222, 0.18);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: color 0.3s, background 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}
.lightbox .close { top: 20px; right: 24px; font-size: 1.6rem; line-height: 1; }
.lightbox .prev, .lightbox .next { top: 50%; transform: translateY(-50%); font-size: 1.4rem; }
.lightbox .prev { left: 24px; }
.lightbox .next { right: 24px; }
.lightbox .close:hover,
.lightbox .prev:hover,
.lightbox .next:hover { color: var(--accent); background: rgba(4, 4, 5, 0.78); }
.lightbox .prev:hover { transform: translateY(-50%) scale(1.08); }
.lightbox .next:hover { transform: translateY(-50%) scale(1.08); }

/* light mode: the near-black control chips read as heavy, so use a light,
   frosted chip with a dark glyph instead */
html[data-theme="light"] .lightbox .close,
html[data-theme="light"] .lightbox .prev,
html[data-theme="light"] .lightbox .next {
  color: var(--bone);
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .lightbox .close:hover,
html[data-theme="light"] .lightbox .prev:hover,
html[data-theme="light"] .lightbox .next:hover { color: var(--accent); background: rgba(255, 255, 255, 0.85); }

/* ------------------------------------------------------------
   TOP PROGRESS BAR
------------------------------------------------------------ */
.top-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--accent-gradient);
  width: 0;
  transition: width 0.2s ease;
  z-index: 1001;
}

/* ------------------------------------------------------------
   SIDE NAV — progress dots (glass, accent)
------------------------------------------------------------ */
.side-nav {
  position: fixed;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 60px;
  background: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
  border-radius: 30px;
  transition: width 0.3s var(--ease-out), opacity 0.4s ease, visibility 0.4s ease;
  z-index: 60;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
}
.side-nav.open { width: 200px; visibility: visible; }
.side-nav.visible { opacity: 1; visibility: visible; }

@media (max-width: 540px) { .side-nav { display: none !important; } }

.side-nav-content {
  padding: 52px 10px 20px;
  height: 100%;
  display: flex;
  align-items: flex-start;
  overflow: visible;
}

.side-nav-toggle {
  position: absolute;
  right: 14px; top: 14px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), background 0.3s;
  z-index: 1000;
  background: rgba(234, 230, 222, 0.1);
  border: 1px solid var(--line);
  border-radius: 50%;
}
.side-nav-toggle:hover { transform: scale(1.1); border-color: var(--accent-dim); }
.side-nav.open .side-nav-toggle { transform: rotate(180deg); right: 10px; }
.side-nav-toggle svg { width: 14px; height: 14px; color: var(--bone-dim); }

.side-nav-dots {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 10px;
  overflow: visible;
}
.side-nav-dots::before {
  content: '';
  position: absolute;
  left: 17px; top: 15px; bottom: 15px;  /* centred on the 16px dot box (10px pad + 8px - 1px) */
  width: 2px;
  background: rgba(234, 230, 222, 0.05);
}
html[data-theme="light"] .side-nav-dots::before {
  background: rgba(15, 15, 16, 0.05);
}

.side-nav-dot {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  width: 100%;
  justify-content: flex-start;
}
.side-nav-dot:last-child { margin-bottom: 0; }

/* uniform 16px layout box for every dot so all centres line up on the
   connecting line; size difference is done with transform:scale, which
   scales around the centre and never shifts it */
.side-nav-dot .dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: var(--bone-faint);
  position: relative;
  z-index: 2;
  transform: scale(0.6);            /* inactive = smaller */
  transition: transform 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
}
.side-nav-dot.active .dot {
  background: var(--accent);
  transform: scale(1);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.side-nav-dot:hover .dot { background: var(--bone-dim); transform: scale(0.78); }
.side-nav-dot.active:hover .dot { background: var(--accent); transform: scale(1); }

.side-nav-dot .dot-label {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--bone-dim);
  transition: all 0.3s ease;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-10px);
  position: absolute;
  left: 30px;
  pointer-events: none;
}
.side-nav.open .side-nav-dot .dot-label { opacity: 1; transform: translateX(0); }
.side-nav-dot:hover .dot-label { color: var(--bone); }
.side-nav-dot.active .dot-label { color: var(--accent); }

.side-nav-dot .dot-tooltip {
  position: absolute;
  left: 30px; top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--bone);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  z-index: 1001;
  pointer-events: none;
}
.side-nav:not(.open) .side-nav-dot:hover .dot-tooltip { opacity: 1; visibility: visible; }
.side-nav.open .dot-tooltip { display: none; }

/* ------------------------------------------------------------
   REVEAL GUARD (kept visible if JS fails; GSAP `from` handles motion)
------------------------------------------------------------ */

/* ------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1024px) {
  .hero h1 { max-width: 12ch; }
}

@media (max-width: 768px) {
  .summary { padding: clamp(2rem, 8vh, 4rem) 0; }
  .summary > .container { flex-direction: column; }
  .summary-content, .summary-table { flex: 1 1 100%; }
  .summary-table { margin-top: 1rem; }

  .image-text-block { flex-direction: column; margin-bottom: 0; }
  .title-text-block { display: block; margin: clamp(2rem, 6vh, 3rem) 0; }
  .title-text-block > p,
  .title-text-block > div { margin-top: 1.5rem; }

  .case-grid-overlay { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .case-grid-overlay > div:nth-child(n+5) { display: none; }

  blockquote { max-width: none; }
  .quoteby { margin-left: 0; width: auto; }

  .endrow { flex-wrap: wrap; gap: 1rem; }
}

@media (max-width: 600px) {
  .hero { min-height: 88vh; }
  .padded { border-radius: 0; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* ------------------------------------------------------------
   PERFORMANCE — case pages are long, image-heavy reading pages.
   Kill the continuous full-screen compositing that the homepage
   can afford behind its WebGL scene but a content page can't:
     - the grain layer uses mix-blend-mode (re-blends the whole
       viewport against scrolling content every frame)
     - the glow tweens two huge layers forever
   Both are cosmetic here; dropping them smooths scrolling on
   integrated GPUs without changing the layout or palette.
------------------------------------------------------------ */
body.casestudy-page .grain { display: none; }
body.casestudy-page .glow::before,
body.casestudy-page .glow::after { animation: none; }

/* Skip rendering off-screen media (big win for the GIF/image panels —
   off-screen animated GIFs stop decoding). `auto` remembers the real
   size after first render so the scrollbar + side-nav stay stable. */
.padded,
.video-container,
.big-img-col1,
#discovery-carousel,
#ipad-carousel,
.infographic-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}