/* Shared case-study layout. Imported by /partner/<client>.html pages.
   Builds on legal.css (which carries the nav, footer, brand glow,
   font stack, color tokens) and adds the bits a case study needs:
   wider container, hero image, project meta strip, alternating
   image+copy split sections, and a multi-image gallery. */

/* The case-page body atmosphere now lives in legal.css under
   body.case-page / body.legal-page so legal pages can share it
   without loading case.css. */

.case{
  /* Container width chosen to keep prose from feeling stranded on a
     wide field. The body paragraphs cap at 880px for readability;
     1280px container leaves the right-hand whitespace looking
     intentional rather than empty. Hero, splits, gallery, and CTA
     still get the full container width. */
  max-width:1280px;
  margin:0 auto;
  padding:120px clamp(20px,3.5vw,56px) 80px;
  position:relative;
}

/* === HEADER ============================================
   The client logo sits as a proud "stamp" at the top of the page.
   No inline text label next to it - the page is *about* this brand,
   so the logo gets to speak alone instead of being a small chip
   followed by the same brand name in tracked caps. */
.case__head{margin-bottom:40px}
.case__client{
  display:flex;align-items:center;
  margin-bottom:32px;
}
.case__client-logo{
  height:clamp(56px,7vw,88px);
  width:auto;display:block;
  /* Default: invert dark-on-white logos to white. Pages whose source
     SVG is already white-on-transparent should also add the
     case__client-logo--white modifier to skip the filter. */
  filter:brightness(0) invert(1);
  opacity:1;
}
.case__client-logo--white{
  /* Already white in the source - render as-is. */
  filter:none;
  opacity:1;
}
/* Legacy text-label class - kept harmless for any markup that still
   includes it, but display:none so the logo carries the brand alone. */
.case__client-name{display:none}
.case h1.case__title{
  font-family:var(--ff);
  font-size:clamp(40px,5.2vw,72px);
  font-weight:200;letter-spacing:-.02em;line-height:1.02;
  margin-bottom:18px;
  color:#fff;
}
.case h1.case__title .grad{
  background:var(--G);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200%;
  animation:gradShift 6s ease infinite;
  font-weight:400;
}
.case__subhead{
  font-family:var(--ff);
  font-size:clamp(18px,1.6vw,22px);
  font-weight:400;line-height:1.55;color:rgba(255,255,255,.82);
  max-width:820px;
  margin-bottom:36px;
}

/* === META STRIP ======================================== */
.case__meta{
  display:grid;
  /* Year column is narrow (always 4 chars), Scope takes the room
     because its values are the longest, Status is medium. Letting
     the columns size by content removes the awkward empty gap that
     a flat 1fr/1fr/1fr distribution leaves under Year and Status. */
  grid-template-columns:auto minmax(0,1.4fr) auto;
  gap:0;
  padding:28px 0;
  border-top:1px solid var(--bd);
  border-bottom:1px solid var(--bd);
  margin-bottom:48px;
  align-items:start;
}
.case__meta > [role="listitem"]{
  position:relative;
  padding:0 clamp(24px,3vw,40px);
  text-align:left;
  min-width:0;
}
.case__meta > [role="listitem"]:first-child{padding-left:0;padding-right:clamp(32px,4vw,56px)}
.case__meta > [role="listitem"]:last-child{padding-right:0;padding-left:clamp(32px,4vw,56px)}
.case__meta > [role="listitem"] + [role="listitem"]::before{
  content:"";
  position:absolute;
  /* Span the full content height of the listitem so the divider
     reaches from the label down to the bottom of the value list,
     instead of stopping short on multi-line Scope cells. */
  left:0;top:0;bottom:0;
  width:1px;
  background:rgba(255,255,255,.10);
}
.case__meta-label{
  display:block;
  font-family:var(--ff);
  font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--f3);
  margin-bottom:12px;
}
.case__meta-value{
  display:block;
  font-family:var(--ff);
  font-size:15px;font-weight:300;line-height:1.55;
  color:#fff;
  margin:0;padding:0;
  list-style:none;
  /* Block any inherited uppercase from parent contexts so multi-word
     scope items render as written (e.g. "Digital production", not
     "DIGITAL PRODUCTION"). Same explicit reset for letter-spacing. */
  text-transform:none;
  letter-spacing:0;
}
/* When meta-value is a <ul> with a list of items, render each on its
   own line with a soft separator. Single-item values (Year, Status)
   render through the same selector but as plain text via <span>. */
ul.case__meta-value li{
  list-style:none;
  padding:2px 0;
}

/* === HERO IMAGE ======================================= */
/* Selector covers <img class="case__hero-img"> AND
   <video class="case__hero-img"> so case studies can use either
   format for the hero asset. */
.case__hero-img,
video.case__hero-img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:14px;
  margin-bottom:64px;
  display:block;
  background:#0a0a0a;
}

/* === SECTION ========================================== */
.case__section{margin-bottom:72px}
.case__section:last-of-type{margin-bottom:48px}
.case__kicker{
  display:inline-block;
  font-family:var(--ff);
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--f3);margin-bottom:14px;
}
.case h2{
  font-family:var(--ff);
  font-size:clamp(28px,3vw,40px);
  font-weight:300;letter-spacing:-.012em;line-height:1.15;
  color:#fff;
  margin-bottom:18px;
}
.case h2 .grad{
  background:var(--G);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200%;
  animation:gradShift 6s ease infinite;
  font-weight:400;
}
.case p{
  color:rgba(255,255,255,.85);
  font-size:17px;line-height:1.7;font-weight:400;
  max-width:880px;
  margin-bottom:20px;
}
.case p strong{color:#fff;font-weight:600}

/* === SPLIT (image-and-copy) =========================== */
.case__split{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
.case__split--reverse{grid-template-columns:1fr 1.1fr}
.case__split--reverse .case__split-media{order:2}
.case__split--reverse .case__split-copy{order:1}
.case__split-media img,
.case__split-media video{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  background:#0a0a0a;
}
/* Optional 2-up stack inside a split-media slot, used when a section
   warrants two paired stills (e.g. 3M's "What We Do" pairs an
   iridescent vinyl roll with a colour-shift close-up). */
.case__split-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.case__split-stack img,
.case__split-stack video{
  border-radius:12px;
}
.case__split-copy h2{margin-top:0}

/* === DISCIPLINE LIST ==================================
   Stacked list of capability lines: each item is an uppercase tracked
   label + a one-line description. Used in 3M's "What We Do" section so
   three disciplines stack legibly instead of forming a wall paragraph.
   Reusable for any case study that needs to enumerate capabilities. */
.case__disciplines{
  display:flex;flex-direction:column;
  gap:18px;
  margin-top:24px;
  max-width:760px;
}
.case__discipline{
  display:grid;
  grid-template-columns:minmax(140px,180px) 1fr;
  gap:clamp(16px,2vw,28px);
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.08);
  align-items:baseline;
}
.case__discipline:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.case__discipline-label{
  font-family:var(--ff);
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;
  line-height:1.3;
}
.case__discipline-body{
  font-family:var(--ff);
  font-size:15px;font-weight:300;line-height:1.6;
  color:var(--f2);
  margin:0;
}
@media(max-width:680px){
  .case__discipline{grid-template-columns:1fr;gap:6px}
}

/* === GALLERY ==========================================
   Uniform-row grid. Every row uses the same fixed height so single-
   col 4:3 tiles, double-col 16:9 tiles, and wide stretch tiles all
   share one baseline and there is no dead space between rows. The
   row height is set in CSS via container queries below so the math
   works out across viewport widths. */
.case__gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  /* Row height tracks roughly 4:3 of a single column at the typical
     desktop viewport; this is overridden in the container below. */
  grid-auto-rows:260px;
  gap:14px;
  margin-bottom:64px;
}
.case__gallery img,
.case__gallery video{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:10px;
  display:block;
  background:#0a0a0a;
}
.case__gallery img:first-child,
.case__gallery video:first-child{
  grid-column:span 2;
}
/* Wide tile mid-gallery: spans 2 cols, single row. Sits flush with
   the 4:3 tiles in the same row because every row is the same
   fixed height. */
.case__gallery .case__gallery-wide{
  grid-column:span 2;
}
/* Scale the row height with viewport width so tiles never look
   awkwardly squat or tall. The numbers approximate a 4:3 single-col
   tile at each container width: 1280px container / 4 cols = 320 col
   width, 4:3 = 240 row height. We bias slightly taller for visual
   weight. */
@media(min-width:1100px){.case__gallery{grid-auto-rows:260px}}
@media(min-width:1400px){.case__gallery{grid-auto-rows:300px}}
@media(max-width:900px){.case__gallery{grid-auto-rows:220px}}
@media(max-width:600px){
  .case__gallery{grid-template-columns:1fr;grid-auto-rows:auto}
  .case__gallery img,.case__gallery video{aspect-ratio:4/3;height:auto}
  .case__gallery img:first-child,
  .case__gallery video:first-child,
  .case__gallery .case__gallery-wide{grid-column:auto}
}
/* Video-only gallery (Avery launch films): looser min column width and
   16:9 tiles instead of the uniform-row treatment. Each video sizes
   itself to 16:9, no fixed grid row height. */
.case__gallery--video{
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  grid-auto-rows:auto;
}
.case__gallery--video video{
  aspect-ratio:16/9;
  height:auto;
}
.case__gallery--video video:first-child{grid-column:auto;aspect-ratio:16/9}

/* === CALLOUT ==========================================
   For sections that need to stand apart from the regular flow
   without being a full split-with-media layout. Used by the 3M
   Zeno Kiosk section: a frosted card with its own kicker, headline,
   and body, sitting inline in the case study scroll. */
.case__callout{
  position:relative;
  margin:32px 0 72px;
  padding:clamp(28px,3.4vw,44px);
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 32%),rgba(10,12,18,.78);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  -webkit-backdrop-filter:blur(28px) saturate(1.15);
  backdrop-filter:blur(28px) saturate(1.15);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,
             0 1px 0 rgba(255,255,255,.08) inset;
}
.case__callout .case__kicker{margin-bottom:10px}
.case__callout h2{
  margin-bottom:14px;
  font-size:clamp(24px,2.6vw,32px);
}
.case__callout p:last-child{margin-bottom:0}
/* Two-column variant for callouts that include a media element (e.g.
   the 3M Kiosk testimonial). Copy on the left, media on the right at
   desktop widths; stacks on mobile. */
.case__callout--media{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:clamp(24px,3vw,40px);
  align-items:stretch;
}
.case__callout--media .case__callout-copy{
  display:flex;flex-direction:column;justify-content:center;
}
.case__callout--media .case__callout-copy > :last-child{margin-bottom:0}
.case__callout-media{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  background:#0a0a0a;
  min-height:100%;
}
.case__callout-media video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
@media(max-width:780px){
  .case__callout--media{grid-template-columns:1fr;gap:22px;align-items:stretch}
  .case__callout-media{aspect-ratio:16/9;min-height:0}
  .case__callout-media video{position:static}
}

/* === STAT BAND ========================================
   Three hard numbers immediately after the hero. Big gradient numeral,
   small uppercase label. Same gradient treatment as .grad / .feat-hl
   on the Zeno page so the language is consistent across the site. */
.case__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,48px);
  padding:36px 0 0;
  margin:-32px 0 64px;
}
.case__stat{
  display:flex;flex-direction:column;gap:8px;
  position:relative;
  padding-left:clamp(16px,2vw,24px);
}
.case__stat + .case__stat::before{
  content:"";
  position:absolute;
  left:0;top:8px;bottom:8px;
  width:1px;
  background:rgba(255,255,255,.10);
}
.case__stat-num{
  font-family:var(--ff);
  font-size:clamp(32px,4vw,52px);
  font-weight:300;
  letter-spacing:-.015em;
  line-height:1;
  background:var(--G);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200%;
  animation:gradShift 6s ease infinite;
}
.case__stat-lab{
  font-family:var(--ff);
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--f3);
}
@media(max-width:780px){
  .case__stats{grid-template-columns:1fr;gap:18px;margin:-24px 0 48px}
  .case__stat{padding-left:14px}
  /* In 1-col the inter-column ::before vertical bar would render as a
     stray 1px line on the left edge of every stat row. Hide it. */
  .case__stat + .case__stat::before{display:none}
}

/* === INLINE HIGHLIGHT =================================
   In-flow keyword emphasis. Mirrors .feat-hl on the Zeno page so
   the typographic language is the same site-wide: gradient text,
   uppercase, slight tracking, weight 600, ~92% body size. Best for
   short anchors (1-4 words) that should pop. Long sentences in this
   style read as shouting - use .case-line for sentence-length
   takeaways instead. */
.case-hl{
  background:var(--G);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200%;
  animation:gradShift 6s ease infinite;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.92em;
}

/* === SENTENCE-LEVEL HIGHLIGHT =========================
   Sentence-length takeaway emphasis - lets a skimmer land on the
   key line per section. Uses the same gradient-clipped text
   treatment as .feat-hl on the Zeno page (background-clip:text,
   transparent fill, animated 200% gradient) so the visual
   language is identical site-wide. Slightly heavier than body
   weight; mixed-case (no uppercase) so a long sentence reads as
   emphasis rather than shouting. Used as the closing/landing
   sentence per section. */
.case-line{
  background:linear-gradient(90deg,#46FF81 0%,#44CCFF 52%,#283FFF 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  background-size:200%;
  animation:gradShift 6s ease infinite;
  font-weight:500;
}

/* === PULL QUOTE =======================================
   Set apart from the body for a one-liner that deserves to land. Used
   sparingly - when a section has a single sentence worth promoting. The
   gradient bar on the left echoes the FAQ-item gradient bar on the
   Zeno page so the visual language stays consistent. */
.case__pullquote{
  position:relative;
  margin:32px 0;
  padding:8px 0 8px clamp(20px,2vw,28px);
  font-family:var(--ff);
  font-size:clamp(20px,2.1vw,28px);
  font-weight:300;
  line-height:1.4;
  letter-spacing:-.01em;
  color:#fff;
  max-width:820px;
}
.case__pullquote::before{
  content:"";
  position:absolute;
  left:0;top:8px;bottom:8px;
  width:3px;
  background:linear-gradient(180deg,#46FF81 0%,#44CCFF 52%,#283FFF 100%);
  border-radius:3px;
}

/* === SECTION NAV RAIL =================================
   Sticky right-edge mini-TOC. Desktop only. Each item is a small
   dot + label that scrolls the matching section into view. Active
   section gets the gradient treatment so the reader always knows
   where they are in the page. */
.case__rail{
  position:fixed;
  top:50%;
  right:clamp(18px,2.4vw,32px);
  transform:translateY(-50%);
  display:flex;flex-direction:column;gap:14px;
  z-index:50;
  font-family:var(--ff);
}
.case__rail a{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;
  color:var(--f3);
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  transition:color .25s;
  padding:4px 0;
}
/* The dot is a fixed 14x14 box that NEVER resizes - this stops the
   horizontal jiggle that transform:scale was causing on the label
   text every time the active section changed. The visible dot is
   painted via radial-gradient color stops INSIDE the box; growing
   the dot is a re-paint, not a layout change, so the label text
   stays locked. */
.case__rail a::before{
  content:"";
  width:14px;height:14px;
  flex-shrink:0;
  background:radial-gradient(circle at center, rgba(255,255,255,.28) 0 3px, transparent 3.5px);
  transition:background .25s,filter .25s;
}
.case__rail a:hover{color:#fff}
.case__rail a:hover::before{
  background:radial-gradient(circle at center, rgba(255,255,255,.75) 0 3.5px, transparent 4px);
}
.case__rail a.is-active{color:#fff}
.case__rail a.is-active::before{
  background:radial-gradient(circle at center, #44CCFF 0 4.5px, rgba(68,204,255,.25) 5px, transparent 6.5px);
  filter:drop-shadow(0 0 6px rgba(68,204,255,.65));
}
@media(max-width:1560px){.case__rail{display:none}}

/* === NEXT CASE BAND ===================================
   Two-up case-to-case nav before the CTA. Thumbnail + label + name.
   Loops the three case studies so a reader always has somewhere to
   go from the bottom of any page. */
.case__next{
  margin:80px 0 0;
  padding:32px 0;
  border-top:1px solid var(--bd);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,2vw,32px);
}
/* Prev/next cards: brand-lit at rest, brighter on hover. Resting state
   carries enough brand-blue tint and a real lifted shadow so the cards
   read as obvious buttons without the user needing to hover first.
   Hover deepens everything: brighter background, white-blue border,
   bigger shadow, label glows brand green. Same vocabulary as the
   .faq-toggle hover state and .fc-tile--primary on the Zeno page. */
.case__next-link{
  display:flex;align-items:stretch;gap:0;
  padding:0;
  text-decoration:none;
  border-radius:14px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(68,204,255,.10), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(40,63,255,.16), transparent 55%),
    linear-gradient(180deg, rgba(28,38,78,.55), rgba(14,22,52,.78));
  border:1px solid rgba(68,204,255,.30);
  -webkit-backdrop-filter:blur(28px) saturate(1.2);
  backdrop-filter:blur(28px) saturate(1.2);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 14px 36px rgba(40,63,255,.18),
    0 4px 14px rgba(68,204,255,.08);
  transition:background .25s,border-color .25s,transform .25s,box-shadow .25s;
  position:relative;
  overflow:hidden;
  min-height:120px;
}
.case__next-link:hover{
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(68,204,255,.18), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(40,63,255,.28), transparent 55%),
    linear-gradient(180deg, rgba(40,52,100,.65), rgba(20,32,72,.85));
  border-color:rgba(68,204,255,.6);
  transform:translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 22px 56px rgba(40,63,255,.32),
    0 8px 24px rgba(68,204,255,.18);
}
.case__next-link--prev{text-align:left}
.case__next-link--next{text-align:right}
.case__next-thumb{
  width:200px;
  align-self:stretch;
  object-fit:cover;
  background:#0a0a0a;
  flex-shrink:0;
  display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.case__next-link:hover .case__next-thumb{transform:scale(1.04)}
.case__next-link--next .case__next-thumb{order:2}
.case__next-meta{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:18px 26px;
  flex:1;
  min-width:0;
}
.case__next-link--next .case__next-meta{align-items:flex-end}
/* Direction label gets an arrow that slides on hover - the canonical
   "this is a navigation link" pattern. */
.case__next-dir{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ff);
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(68,204,255,.85);
  transition:color .25s,gap .25s;
}
.case__next-link:hover .case__next-dir{color:#46FF81;gap:10px}
.case__next-link--prev .case__next-dir::before{
  content:"\2190";  /* left arrow */
  font-size:14px;letter-spacing:0;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.case__next-link--next .case__next-dir::after{
  content:"\2192";  /* right arrow */
  font-size:14px;letter-spacing:0;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.case__next-link--prev:hover .case__next-dir::before{transform:translateX(-3px)}
.case__next-link--next:hover .case__next-dir::after{transform:translateX(3px)}
.case__next-name{
  font-family:var(--ff);
  font-size:clamp(15px,1.4vw,18px);font-weight:400;
  line-height:1.25;
  color:#fff;
  /* Allow long case names to wrap to a second line instead of getting
     clipped with an ellipsis - "Avery Dennison - Online Visualizer"
     was being cut to "very Dennison - Online Visualizer" before. */
  white-space:normal;
  text-wrap:balance;
}
@media(max-width:780px){
  .case__next-thumb{width:140px}
  .case__next-link{min-height:100px}
}
@media(max-width:600px){
  .case__next{grid-template-columns:1fr;gap:10px}
  .case__next-link--next{text-align:left}
  .case__next-link--next .case__next-thumb{order:0}
  .case__next-link--next .case__next-meta{align-items:flex-start}
  .case__next-thumb{width:120px}
}

/* === CTA ==============================================
   Brand-blue lit panel - same colour language as the home page's
   .h1-card hover glow and the FAQ contact tile on the Zeno page.
   Not a dark frost panel: a luminous brand-blue surface that reads
   as the warm "let's talk" close to the page. Uses radial-gradient
   layers with brand colours to give the panel its own light source,
   then a brand-tinted box-shadow to make it feel lifted off the
   page. The body atmosphere already provides ambient blue; this
   panel adds a brighter, more saturated accent on top. */
.case__cta{
  margin:24px 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
  padding:clamp(48px,6vw,88px) clamp(24px,4vw,48px);
  text-align:center;
  border-radius:18px;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(70,255,129,.10), transparent 55%),
    radial-gradient(90% 120% at 100% 0%, rgba(68,204,255,.18), transparent 60%),
    radial-gradient(80% 120% at 50% 100%, rgba(40,63,255,.28), transparent 65%),
    linear-gradient(180deg, rgba(20,28,68,.55), rgba(10,18,52,.75));
  border:1px solid rgba(68,204,255,.32);
  -webkit-backdrop-filter:blur(28px) saturate(1.2);
  backdrop-filter:blur(28px) saturate(1.2);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 24px 60px rgba(40,63,255,.22),
    0 8px 24px rgba(68,204,255,.10);
  position:relative;
  overflow:hidden;
}
/* Headline scale matches the rest of the site's big-tier headlines:
   .h1 / .hub-card__title / .legal-wrap h1 all sit around clamp(40-44,
   5.5vw, 68-76). Previous CTA was clamp(28,3.4vw,42) which read tiny
   compared to every other heading on the site. */
.case__cta-headline{
  font-family:var(--ff);
  font-size:clamp(40px,5vw,68px);
  font-weight:200;letter-spacing:-.02em;line-height:1.02;
  color:#fff;
  margin:0;
  max-width:18ch;
  text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
/* Email pill: glass surface with a text-flip animation on hover.
   Default text scales up + fades out, data-hover text scales up + in
   from below. Same pattern as the .legal-back / .foot-legal-row
   data-hover system used elsewhere on the site. */
.case__cta-email{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ff);
  font-size:clamp(17px,1.5vw,21px);
  font-weight:400;letter-spacing:.01em;
  color:#fff;text-decoration:none;
  padding:16px 32px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  overflow:hidden;
  min-width:280px;
  transition:background .25s,border-color .25s,box-shadow .25s;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.case__cta-email__text{
  display:inline-block;
  transition:transform .25s cubic-bezier(.25,.25,0,1),opacity .25s cubic-bezier(.25,.25,0,1);
}
.case__cta-email[data-hover]::after{
  content:attr(data-hover);
  position:absolute;
  left:0;right:0;top:50%;
  transform:translateY(calc(-50% + 100%));
  opacity:0;
  transition:transform .25s cubic-bezier(.25,.25,0,1),opacity .25s cubic-bezier(.25,.25,0,1);
  pointer-events:none;
  text-align:center;
  font-weight:500;
}
.case__cta-email:hover{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.5);
  box-shadow:0 10px 32px rgba(40,63,255,.28);
}
.case__cta-email:hover .case__cta-email__text{
  transform:translateY(-100%);
  opacity:0;
}
.case__cta-email[data-hover]:hover::after{
  transform:translateY(-50%);
  opacity:1;
}

/* === MOBILE ===========================================
   Tighten the layout so case studies read comfortably on phones:
   reduce the giant top/bottom padding, collapse splits to a single
   column with media stacked above copy, fix the meta strip dividers
   that left a vertical bar on the wrong edge in 1-column mode, and
   trim section + hero spacing so the page doesn't feel sparse. */
@media(max-width:780px){
  .case{padding:80px clamp(20px,5vw,32px) 56px}

  /* Meta strip in 1-col: drop the inter-column vertical dividers
     (they sit on the left edge in 1-col and look like errant lines)
     and use top borders between rows instead. Reset the per-item
     padding so each row reads as a flush stack. */
  .case__meta{grid-template-columns:1fr;gap:0;margin-bottom:40px;padding:0}
  .case__meta > [role="listitem"]{
    padding:14px 0;
    border-top:1px solid rgba(255,255,255,.10);
  }
  .case__meta > [role="listitem"]:first-child{padding-left:0;border-top:0;padding-top:18px}
  .case__meta > [role="listitem"]:last-child{padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.10)}
  /* Hide the desktop ::before vertical dividers in 1-col. */
  .case__meta > [role="listitem"] + [role="listitem"]::before{display:none}
  .case__meta-label{margin-bottom:8px}
  ul.case__meta-value li{padding:1px 0}

  .case__head{margin-bottom:32px}
  .case__hero-img,
  video.case__hero-img{aspect-ratio:4/3;margin-bottom:48px}
  .case__subhead{margin-bottom:32px}

  .case__section{margin-bottom:48px}
  .case h2{margin-bottom:14px}
  .case p{font-size:15px;line-height:1.7}

  .case__split,
  .case__split--reverse{grid-template-columns:1fr;gap:18px}
  .case__split--reverse .case__split-media{order:0}
  .case__split--reverse .case__split-copy{order:0}

  .case__pullquote{
    font-size:clamp(18px,4.6vw,22px);
    padding-left:14px;
    margin:24px 0;
  }
  .case__pullquote::before{width:2px}

  /* Prev/next cards in 1-col: shrink the thumb so the meta has room
     for the case name without truncation, and pull the gap tighter. */
  .case__next{margin-top:48px;padding-top:24px}
  .case__next-meta{padding:14px 18px}
  .case__next-name{font-size:15px;white-space:normal}

  /* Callout on mobile: tighter padding so the inner video and copy
     have actual breathing room on a 360px viewport. The desktop
     clamp floor is 28px which leaves the embedded video squeezed
     after the case container's own side padding. */
  .case__callout{
    padding:24px 20px;
    margin:24px 0 56px;
  }
  .case__callout--media{gap:18px}

  /* CTA on mobile: the headline can take a wider char count without
     looking awkward, and the smaller container needs tighter padding. */
  .case__cta{
    padding:clamp(40px,8vw,56px) clamp(20px,5vw,28px);
    gap:24px;
    border-radius:14px;
  }
  .case__cta-headline{
    font-size:clamp(28px,7vw,40px);
    max-width:24ch;
  }
  .case__cta-email{
    font-size:16px;
    padding:14px 24px;
    /* Phone viewports can be 320px wide; the desktop min-width of
       280px would push the pill against the panel edge. Drop the
       floor and let the padding define the size. */
    min-width:0;
  }

  /* Tap-feedback: cards on mobile fire :hover briefly on tap then
     leave it stuck. Mirror :active so the tap reads visibly without
     leaving the card in the hover state after the user lets go. */
  .case__next-link:active,
  .blog-card:active{
    transform:translateY(-1px);
  }
}

/* Small-phone tightening for prev/next thumbs - the 120px thumb at
   <=600 ate too much horizontal real estate on a 360px viewport,
   leaving the case name with ~200px of room to wrap into. */
@media(max-width:480px){
  .case__next-thumb{width:96px}
  .case__next-meta{padding:12px 14px}
  .case__next-name{font-size:14px}
  .case__next-dir{font-size:10px}
}

/* Even tighter at small-phone widths. */
@media(max-width:480px){
  .case{padding:72px 18px 48px}
  .case h1.case__title{font-size:clamp(34px,9vw,44px)}
  .case h2{font-size:clamp(24px,6vw,30px)}
}