/* ===== Case study page (Agent support / Conversational AI) ===== */
/* Rebuilt from Figma node 2593:2187 — extends style.css tokens (colors,
   --font, --side-pad, --max-content) rather than redefining them. */

/* ---- The one logo, throughout ----
   Fixed (not inside .case2-hero, which fades to invisible) and always the
   same clickable element — it interpolates from "floating, larger,
   translucent, over the hero photo" to "small, opaque, sitting on the
   solid bar" as --case2-progress goes 0→1, instead of crossfading between
   two separate logo elements (which just doubled up messily mid-scroll).
   Always above both the bar background and the hero/title card/content
   stack, so it's clickable at every scroll position. */
.case2-nav {
  position: fixed;
  top: calc(24px - 12px * var(--case2-progress, 0));
  left: var(--side-pad);
  z-index: 31;
}
.case2-nav .logo img {
  width: calc(90px - 38px * var(--case2-progress, 0));
  height: calc(90px - 38px * var(--case2-progress, 0));
}
.case2-nav .logo--light img { opacity: calc(0.6 + 0.4 * var(--case2-progress, 0)); }

/* ---- Persistent top bar ----
   Background only — fixed for the whole page (not sticky — it needs to
   stay pinned right through the rest of the scroll, past every later
   section, which a plain sticky element can't do without a bounded
   container). Starts fully transparent and fades to solid black as
   --case2-progress goes 0→1, exactly mirroring how .site-nav fades in over
   style.css's --nav-progress. Once fully visible it also starts sitting
   *above* the title card and body (z-index), which is what makes them
   scroll up and disappear behind it afterwards. */
.case2-site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 76px;
  z-index: 30;
  background: rgba(0, 0, 0, var(--case2-progress, 0));
  pointer-events: none;
}
.case2-site-nav.is-visible { pointer-events: auto; }

/* ---- Hero banner ----
   Sticky rather than static: it pins at the top of the viewport as soon as
   scrolling starts (it's the first thing on the page, so there's no runway
   to scroll through before it engages) and stays pinned there while the
   title card and body scroll up over it. Its own opacity fades to 0 in
   sync with --case2-progress, which is what actually "covers" it — once
   invisible, .is-hidden also drops it from hit-testing so an invisible,
   still-pinned hero doesn't swallow clicks meant for the content on top
   of it for the rest of the page. */
.case2-hero {
  position: sticky;
  top: 0;
  width: 100%;
  opacity: calc(1 - var(--case2-progress, 0));
}
.case2-hero.is-hidden { visibility: hidden; pointer-events: none; }
.case2-hero > img { width: 100%; aspect-ratio: 2158 / 1309; object-fit: cover; }

/* ---- Content backdrop ----
   Wraps everything after the hero (title card, body, footer) in one real
   stacking context (position+explicit z-index, not just DOM order) so all
   of it unambiguously paints above the sticky .case2-hero behind it, and
   gives that stack one continuous, full-bleed white backing via ::before
   — otherwise only the parts of the title card/body that happen to have
   their own background would mask the hero, leaving it peeking through
   the page's side gutters and the gaps between text lines while it fades. */
.case2-content {
  position: relative;
  z-index: 1;
  /* flow-root, not the default block: without it, the title card's own
     negative top margin (it overlaps the hero on purpose) collapses
     straight through this wrapper and becomes *this element's* position
     instead — pulling the backdrop below up to start flush with the card
     and erasing the overlap/floating-card look entirely. flow-root blocks
     that collapsing without clipping the card's overflow the way
     overflow:hidden would. */
  display: flow-root;
}
.case2-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--white);
  z-index: -1;
}

/* ---- Title card — overlaps the bottom of the hero photo ----
   Shares .case2-body's exact max-width/side-pad box (instead of its own
   narrower, independently-centered one) so the breadcrumb and heading's
   left edge always lines up with the body copy below, at every breakpoint
   — and stays there as --case2-progress runs 0→1: only the background
   (::before, below) moves/scales, never this box or its padding, so the
   text never shifts. */
.case2-title-card {
  position: relative;
  z-index: 2;
  margin: -18% auto 0;
  /* Same box model as .case2-inner (width:100% capped by max-width, inset
     via padding alone) so the two always land on the identical left edge
     — the previous width:calc(100% - 2*side-pad) double-counted the pad
     (once via its own auto-centered margin, again via padding), landing
     a few px right of .case2-inner's content at most viewport widths. */
  width: 100%;
  max-width: var(--max-content);
  padding: 48px var(--side-pad);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* The card's actual visible background — grows outward from matching the
   card's own box (left:0;right:0, progress 0) to full viewport width
   (progress 1), while the card above stays put so its text never moves.
   OFFSET is the card's own distance from the viewport edge, derived the
   same way its width is: side-pad once the viewport is too narrow for
   max-content, otherwise the leftover space max-width's auto-centering
   splits evenly. Shrinking left/right by that same amount on both sides
   is what turns a centered box into a full-bleed one without a hardcoded
   breakpoint. Corners square off in step with the same progress. */
.case2-title-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--case2-progress, 0) * max(var(--side-pad), (100vw - var(--max-content)) / 2));
  /* Right mirrors left: full card width at rest. A narrower resting width
     was tried here to line up with the confidentiality note below, but the
     card overlaps the hero photo above (margin-top:-18%) — narrowing this
     sheet left the photo showing through the gap on the right, its bottom
     edge reading as a stray line right under the title. Full width keeps
     the sheet solid over the photo; the note-width alignment still holds
     for the actual text/content via h1's own max-width. */
  right: calc(-1 * var(--case2-progress, 0) * max(var(--side-pad), (100vw - var(--max-content)) / 2));
  background: var(--white);
  border-radius: calc(24px * (1 - var(--case2-progress, 0)))
                 calc(24px * (1 - var(--case2-progress, 0))) 0 0;
  z-index: -1;
}
.case2-breadcrumb { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.case2-breadcrumb a { padding: 8px 12px; }
.case2-breadcrumb a:hover { color: var(--orange); }
.case2-breadcrumb-caret { color: var(--dark-grey); }
.case2-breadcrumb [aria-current] { padding: 8px 12px; color: var(--ash-grey); }
.case2-title-card h1 {
  font-weight: 700;
  font-size: clamp(30px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -1.5px;
  /* Caps the text's own line length to match the confidentiality
     note/diagram below (--case2-note-width), while the card itself
     stays at the page's normal left-aligned column width. */
  max-width: var(--case2-note-width);
}

/* ---- Page-scoped accent + neutrals — matches the eyebrow/heading/body
   type scale confirmed against design-system.html's Figma redesign (same
   #e46008 kicker color, same Montserrat weights/sizes), so both case
   study pages read as one consistent system. ---- */
:root {
  --case2-orange: #e46008;
  --case2-black: #0a0a0a;
  --case2-text: #080808;
  --case2-muted: #6b7280;
  /* Shared by the confidentiality note and the Background diagram right
     below it, so the two always line up at the same width. */
  --case2-note-width: 800px;
}

/* ---- Body shell ----
   No max-width/side-padding here anymore — individual sections center
   themselves via .case2-inner, so a section can instead skip .case2-inner
   and go full-bleed (.case2-bleed) while its own content still lines up
   with everyone else's via a nested .case2-inner. */
.case2-body {
  width: 100%;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
/* Centers content to the page column — matches design-system.html's
   .ds-inner. Put this on the same element as .case2-block for a normal
   (white) section, or on a child of .case2-bleed for a full-bleed one. */
.case2-inner {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--side-pad);
  box-sizing: border-box;
}
/* Full-bleed section background (Research/"what these looked like" grey,
   Outcomes dark) — spans edge to edge while its .case2-inner child keeps
   content lined up with the rest of the page. */
.case2-bleed { width: 100%; padding: clamp(56px, 9vw, 96px) 0; }
.case2-bleed--grey { background: #e7e7e7; }
.case2-bleed--dark { background: var(--dark); }
/* Closes the .case2-body gap between the shipped-experience mockup and
   the Outcomes panel right after it, so the grey block runs straight
   into the dark one with no white seam. */
.case2-bleed--grey + .case2-bleed--dark { margin-top: -80px; }
.case2-bleed--dark .case2-block h2 { color: var(--white); }
.case2-bleed--dark .case2-block .case2-text { color: #c7c7ca; }

.case2-block { display: flex; flex-direction: column; gap: 24px; }
.case2-eyebrow {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--case2-orange);
  margin: 0;
}
.case2-block h2 {
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 32px);
  line-height: 1.3;
  color: var(--case2-black);
  margin: 0;
}
/* Heading hierarchy within a section: .case2-subtitle is a subheading one
   level below the section h2 (e.g. "Design system" inside "Designing the
   experience"); .case2-subtitle--sub nests one level further (e.g.
   "Component sticker sheet" inside "Design system"). */
.case2-subtitle { font-weight: 700; font-size: clamp(19px, 2vw, 22px); color: var(--case2-black); margin: 0; }
.case2-subtitle--sub { font-weight: 600; font-size: 16px; color: var(--case2-black); margin: 0; }
/* max-width caps the line length for readability — full column width at
   17px was running ~18-20 words per line; this brings it under ~14. */
.case2-text { font-size: 17px; line-height: 1.6; color: var(--case2-text); max-width: 800px; display: flex; flex-direction: column; gap: 1em; }
.case2-text b, .case2-text strong { font-weight: 700; }
.case2-text .case2-highlight { color: var(--case2-orange); }
.case2-lead { font-weight: 700; font-size: 24px; line-height: 1.35; color: var(--case2-black); max-width: 760px; margin: 0; }

/* ---- Confidentiality note + meta row (right under the hero, matches
   design-system.html's plain grey note + .ds-meta 3-column pattern) ---- */
.case2-confidentiality {
  background: #e8e8e8;
  border-radius: 8px;
  padding: 16px 24px;
  margin-bottom: 32px;
  max-width: var(--case2-note-width);
}
.case2-confidentiality p { font-size: 14px; line-height: 1.5; color: var(--case2-orange); margin: 0; }
.case2-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  padding: 24px 0;
}
.case2-meta__item dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--case2-muted);
  margin: 0 0 6px;
}
.case2-meta__item dd { font-size: 14px; font-weight: 500; color: var(--case2-black); margin: 0; max-width: 320px; }

/* ---- Generic embed / picture frame ---- */
.case2-frame {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: var(--light-grey-bg);
}
.case2-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case2-frame--proto { aspect-ratio: 16 / 9; }
.case2-frame--proto iframe { width: 100%; height: 100%; border: none; display: block; }
.case2-frame--proto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case2-frame--tall { aspect-ratio: 1680 / 1333; display: flex; align-items: center; justify-content: center; }
/* Hugs the image's own natural height instead of forcing a fixed
   aspect-ratio box and cropping (object-fit:cover) to fill it — used
   where the source asset's real proportions should show in full. */
.case2-frame--hug { aspect-ratio: auto; height: auto; }
.case2-frame--hug img { width: 100%; height: auto; object-fit: contain; }
.case2-frame--md { aspect-ratio: 16 / 9; max-width: var(--case2-note-width); }
.case2-frame--contain {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fixed, capped height — these are tall phone-mockup screenshots that
     would otherwise render at their full intrinsic height once scaled to
     the column width, spilling several screens' worth of scroll. */
  height: 420px;
}
.case2-frame--contain img { width: auto; height: 100%; object-fit: contain; }

/* ---- Live-prototype click-to-load cover ---- */
.case2-proto-cover { position: relative; cursor: pointer; }
.case2-proto-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 9999px;
  background: #b0270e;
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, background 0.15s ease;
}
.case2-proto-play svg { flex-shrink: 0; }
.case2-proto-cover:hover .case2-proto-play,
.case2-proto-cover:focus-visible .case2-proto-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #8f2009;
}

/* ---- Live-prototype CTA button overlay (Refining & handing off) ---- */
.case2-frame--cta { position: relative; }
.case2-frame--cta .case2-launch {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: 9999px;
  background: #b0270e;
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.case2-frame--cta .case2-launch:hover { background: #8f2009; }

/* ---- Card grid (Constraints / Testing quotes) ---- */
.case2-card-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.case2-card {
  flex: 1 1 240px;
  background: var(--white);
  border-radius: 10px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.case2-card h3 { color: var(--case2-black); font-weight: 600; font-size: 16px; line-height: 1.2; }
.case2-card p { color: var(--case2-text); font-size: 14px; line-height: 1.55; margin: 0; }

/* ---- "What we chose not to build" ---- */
.case2-cut-rows { display: flex; flex-direction: column; gap: 20px; }
.case2-cut-row {
  position: relative;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.case2-cut-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--case2-muted);
}
.case2-cut-row .headline {
  font-weight: 400;
  font-size: 15px;
  color: var(--case2-orange);
  text-decoration: line-through;
  margin: 0;
}
.case2-cut-row .body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--case2-text);
  margin: 0;
}

/* ---- "Designing the experience" — full-bleed sticky board sandwiched
   between two normal-width pieces of the same section, all three grouped
   as one .case2-body flex child with their own tighter internal rhythm
   (24px) instead of the page's usual 80px section gap. ---- */
.case2-designing-experience { display: flex; flex-direction: column; gap: 24px; }
.case2-designing-experience .case2-bleed { padding: 0; }

/* ---- Sticky notes board ("What made it through") ----
   No .case2-inner wrapper — sits directly in the full-bleed .case2-bleed
   so, unlike the max-content column, there's room for all five notes on
   one row at their full size instead of the fifth wrapping down. */
.case2-sticky-board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  padding: 24px var(--side-pad);
}
.case2-sticky {
  flex: 1 1 190px;
  max-width: 280px;
  aspect-ratio: 1 / 1;
  padding: 20px;
  border-radius: 2px;
  box-shadow: 4px 12px 8px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.case2-sticky::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #b0270e;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
.case2-sticky:nth-child(1) { background: #fff7a1; transform: rotate(-3deg); }
.case2-sticky:nth-child(2) { background: #ffb2d6; transform: rotate(2deg); }
.case2-sticky:nth-child(3) { background: #b2ffcc; transform: rotate(-1.5deg); }
.case2-sticky:nth-child(4) { background: #b2ebf2; transform: rotate(3.5deg); }
.case2-sticky:nth-child(5) { background: #ffe0b2; transform: rotate(-2deg); }
.case2-sticky h4 { font-weight: 500; font-size: 18px; color: var(--dark); display: flex; align-items: center; gap: 8px; }
.case2-sticky h4::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); flex: none; }
.case2-sticky p { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--dark); }

/* ---- Feature showcases ("What these looked like") — one full-width
   showcase (title+sub, then picture), or a row of compact ones ---- */
.case2-showcase { display: flex; flex-direction: column; gap: 20px; }
.case2-showcase-row { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 32px; }
.case2-showcase-row .case2-showcase { flex: 1 1 320px; }
.case2-showcase__title { font-weight: 600; font-size: 19px; color: var(--case2-black); margin: 0; }
.case2-showcase__sub { font-size: 15px; color: var(--case2-muted); margin: 4px 0 0; }

/* ---- Testimonial / quote cards ---- */
.case2-testimonial { background: var(--light-grey-bg); text-align: left; }
.case2-testimonial h3 { color: var(--case2-black); font-style: italic; font-size: 15px; font-weight: 400; line-height: 1.55; }
.case2-testimonial .tenure { color: var(--case2-muted); font-weight: 600; font-size: 12px; letter-spacing: 0.4px; }

/* ---- Outcomes (see .case2-bleed--dark above for the full-bleed bg) ---- */
.case2-outcome-grid { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 8px; }
.case2-outcome { flex: 1 1 200px; display: flex; flex-direction: column; gap: 8px; }
.case2-outcome .label { color: #a8a8ae; font-weight: 600; font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; }
.case2-outcome .stat { color: var(--white); font-weight: 700; font-size: 19px; line-height: 1.3; }
.case2-outcome .desc { color: #a8a8ae; font-weight: 400; font-size: 13px; line-height: 1.5; }

/* ---- Other projects (compact quick-link tile) ---- */
.case2-other { display: flex; flex-direction: column; gap: 20px; padding-bottom: 96px; }
/* Matches the small uppercase kicker label used for this same section
   on the design-system.html case study (.ds-eyebrow). */
.case2-other h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--case2-orange);
}
.case2-other .tile {
  flex: 0 1 320px;
  padding: 16px;
  gap: 16px;
}
.case2-other .tile__img { aspect-ratio: 320 / 200; }
.case2-other .tile h3 { font-size: 19px; }
.case2-other .tile__heading { gap: 8px; }
.case2-other .tile__text {
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Closing social/copyright bar ----
   .how--bar-only reuses .how (the homepage's full contact-section
   footer) for just its background/color, but had no override of its
   own — so it was inheriting .how's full 96px/48px hero-footer padding
   and sticky positioning meant for a section that also holds
   .how__inner above the bar. That left a tall block of plain dark
   background above the actual icon+copyright row. Neither is needed
   for a bar that's just the last thing in normal document flow. */
.how--bar-only {
  position: static;
  padding: 0;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .case2-title-card { margin-top: -24%; max-width: none; border-radius: 0; padding: 32px 24px; }
  .case2-meta { flex-direction: column; gap: 20px; }
}

@media (max-width: 600px) {
  .case2-nav { top: 12px; left: 20px; }
  .case2-nav .logo img { width: 60px; height: 60px; }
  .case2-title-card { padding: 20px 16px; margin-top: -16%; }
  .case2-title-card h1 { font-size: 17px; }
  .case2-body { padding-top: 64px; gap: 64px; }
  .case2-card-grid { flex-direction: column; }
  .case2-sticky-board { flex-direction: column; align-items: center; }
  .case2-sticky { max-width: 240px; }
  .case2-outcome-grid { flex-direction: column; }
  .case2-bleed { padding: 40px 0; }
  .case2-bleed--grey + .case2-bleed--dark { margin-top: -64px; }
  .case2-showcase-row { flex-direction: column; }
  .case2-frame--contain { height: 320px; }
}

/* ---- Shared minimal scroll-reveal (see reveal.js) ----
   Same effect as design-system.html's own reveal system, applied here so
   agent-support.html reads as part of the same site. Safe default: fully
   visible with no JS / reduced motion; JS opts elements into a fade+rise
   only once confirmed running. */
[data-reveal] { opacity: 1; transform: none; }
html.reveal-js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.reveal-js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.reveal-js [data-reveal] { opacity: 1; transform: none; transition: none; }
}