/* Shared case-study layout (Sage's work-pages spec, 21 Oct 2026). 8px spacing base. */
.cs {
  --gutter: 40px; --measure: 40rem; /* 68ch of 16px Inter ≈ 640px */ --media: 1080px; --hero: 1280px;
  --s-hero-title: 64px; --s-section: 120px; --s-h2-p: 24px; --s-p-media: 48px; --s-media: 48px; --s-next: 160px;
  --fg: rgb(19, 19, 20); --body: rgb(80, 80, 84); --muted: rgba(19, 19, 20, .6); --line: rgba(19, 19, 20, .12); --card: rgb(244, 244, 245);
  font-family: "Inter", "Inter Placeholder", sans-serif; color: var(--body);
  font-size: 16px; line-height: 1.6; padding: 140px var(--gutter) 0; display: block;
  -webkit-font-smoothing: antialiased;
}
.cs-dark { --fg: #fff; --body: rgba(222, 222, 222, .8); --muted: rgba(255, 255, 255, .6); --line: rgba(255, 255, 255, .14); --card: rgb(20, 20, 20); background: #000; }
.cs-light, .cs-split { background: #fff; }
/* split: dark intro band (hero, title, lead, meta), light body (Boots, NFL) */
.cs-split .cs-band { --fg: #fff; --body: rgba(222, 222, 222, .8); --muted: rgba(255, 255, 255, .6); --line: rgba(255, 255, 255, .14);
  background: #000; color: var(--body); margin: -140px calc(-1 * var(--gutter)) 0; padding: 140px var(--gutter) 72px; }
.layout-case-study:has(.cs-split) .sh-logo { color: #fff; mix-blend-mode: difference; }
.layout-case-study:has(.cs-split) .sh-mobile nav.framer-v-9zpe5r { mix-blend-mode: difference; }
.cs *, .cs *::before, .cs *::after { box-sizing: border-box; }
.cs-measure { max-width: var(--measure); margin-inline: auto; }

/* Hero + intro */
.cs-hero { margin: 0 auto; max-width: var(--hero); }
.cs-hero img { display: block; width: 100%; height: auto; }
.cs-intro { margin-top: var(--s-hero-title); text-align: center; }
.cs-icon { width: 64px; height: 64px; border-radius: 14px; margin: 0 auto 24px; display: block; }
.cs-title { font: 800 60px/1.1 "Inter Tight", "Inter Tight Placeholder", sans-serif; letter-spacing: -1.3px; color: var(--fg); margin: 0; text-wrap: balance; }
.cs-lead { font-size: 18px; line-height: 1.6; margin: 24px 0 0; text-wrap: pretty; }
.cs-lead + .cs-lead { margin-top: 16px; }
.cs-meta-link { display: inline-block; margin-top: 16px; font-size: 12px; line-height: 1.5; letter-spacing: .1px; color: var(--muted); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.cs-meta-link:hover, .cs-meta-link:focus-visible { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.cs-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; margin: 32px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); }
.cs-meta div { text-align: left; min-width: 0; }
.cs-meta dt { font-size: 12px; line-height: 1.5; letter-spacing: .1px; color: var(--muted); }   /* sentence case on purpose */
.cs-meta dd { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--fg); }

/* Sections and rhythm */
.cs-section { margin-top: var(--s-section); }
.cs-h2 { font: 800 38px/1.2 "Inter Tight", "Inter Tight Placeholder", sans-serif; letter-spacing: -.74px; color: var(--fg); margin-block: 0; text-wrap: balance; }
.cs-h2 + .cs-text { margin-top: var(--s-h2-p); }
.cs-text > :first-child { margin-top: 0; }
.cs-text p, .cs-text ul { margin: 16px 0 0; text-wrap: pretty; }
.cs-text ul { padding-left: 1.2em; }
.cs-text li + li { margin-top: 8px; }
.cs-text h3 { font: 700 20px/1.3 "Inter Tight", "Inter Tight Placeholder", sans-serif; color: var(--fg); margin: 32px 0 0; }
.cs-text a { color: var(--fg); }
.cs-text strong { color: var(--fg); font-weight: 600; }
.cs-h2 + .cs-media, .cs-text + .cs-media { margin-top: var(--s-p-media); }
.cs-media + .cs-media { margin-top: var(--s-media); }
.cs-media + .cs-text { margin-top: var(--s-p-media); }

/* Media: contained 1080, grids 2-up/3-up (24px gap), phones 3-up */
.cs-media { max-width: var(--media); margin-inline: auto; display: grid; gap: 24px; }
.cs-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.cs-grid3, .cs-phones { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.cs-phones { max-width: 840px; }
.cs-fig, .cs-diagram { margin: 0; min-width: 0; }
.cs-fig img, .cs-fig video, .cs-diagram img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, auto); }
.cs-fig video { border-radius: 12px; }
.cs-media figcaption { margin-top: 12px; font-size: 12px; line-height: 1.5; letter-spacing: .1px; color: var(--muted); text-align: left; }
.cs-media figcaption strong { display: block; font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--fg); letter-spacing: 0; margin-bottom: 4px; }
.cs-media figcaption span { display: block; font-size: 14px; line-height: 1.6; color: var(--body); letter-spacing: 0; }
.cs-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 12px; }
.cs-zoom:focus-visible, .cs-next-card:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.cs-zoom picture { display: block; }

/* Flow diagrams: overview + detail crop (detail-only on mobile) */
.cs-diagram { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.cs-diagram-detail { display: grid; gap: 12px; justify-items: start; }
.cs-diagram-detail img { border: 1px solid var(--line); }
.cs-view-full { margin-top: 0; }
.cs-diagram figcaption { grid-column: 1 / -1; }

/* Next / previous */
.cs-next { max-width: var(--media); margin: var(--s-next) auto 0; padding-bottom: 40px; }
.cs-next-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; text-decoration: none; color: inherit;
  background: var(--card); border-radius: 18px; padding: 24px; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.cs-next-card:hover { transform: translateY(-4px); }
.cs-next-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
.cs-next-text { display: grid; gap: 8px; }
.cs-label { font-size: 12px; line-height: 1.5; letter-spacing: .1px; color: var(--muted); }
.cs-next-title { font: 800 38px/1.2 "Inter Tight", "Inter Tight Placeholder", sans-serif; letter-spacing: -.74px; color: var(--fg); text-wrap: balance; }
.cs-next-links { display: flex; justify-content: space-between; align-items: baseline; margin-top: 24px; }
.cs-prev { font-size: 14px; color: var(--fg); text-decoration: none; }
.cs-prev:hover { text-decoration: underline; text-underline-offset: 3px; }
.cs-next-links .cs-meta-link { margin-top: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Lightbox */
.cs-lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, .92); color: #fff; }
.cs-lightbox::backdrop { background: rgba(0, 0, 0, .6); }
.cs-lightbox-bar { position: fixed; top: 16px; right: 16px; display: flex; gap: 8px; z-index: 2; }
.cs-lightbox-bar button { font: 500 14px/1 "Inter", sans-serif; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: 10px 16px; cursor: pointer; }
.cs-lightbox-stage { width: 100%; height: 100%; overflow: auto; display: grid; place-items: center; padding: 64px 24px 24px; }
.cs-lightbox-stage img { max-width: 100%; max-height: calc(100vh - 96px); height: auto; cursor: zoom-in; }
.cs-lightbox.is-zoomed .cs-lightbox-stage { place-items: start; }
.cs-lightbox.is-zoomed .cs-lightbox-stage img { max-width: none; max-height: none; cursor: zoom-out; }

/* Shared fixed header (sticky nav on case pages) */
.site-header .sh-logo { position: fixed; top: 51px; left: 40px; z-index: 20; font: 500 24px/1.3 "Inter Tight", "Inter Tight Placeholder", sans-serif; letter-spacing: .1px; color: var(--fg); text-decoration: none; }
.site-header .sh-nav { position: fixed; z-index: 20; }
.site-header .sh-desktop, .site-header .sh-tablet { top: 40px; left: 50%; transform: translateX(-50%); }
.site-header .sh-mobile { top: 35px; left: 0; width: 100%; display: none; }
.site-header .sh-tablet { display: none; }
.site-header a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.cs-light .site-header .sh-mobile [style*="--extracted-1lwpl3i"], .layout-case-study:has(.cs-light) .sh-mobile [style*="--extracted-1lwpl3i"] { --extracted-1lwpl3i: rgb(19, 19, 20) !important; }
.layout-case-study:has(.cs-light) .sh-mobile .framer-DnSn9 > div { background-color: rgb(19, 19, 20) !important; }
.layout-case-study:has(.cs-light) .sh-mobile .framer-DnSn9 { --border-color: rgb(19, 19, 20) !important; }
.layout-case-study:has(.cs-light) .sh-logo { color: rgb(19, 19, 20); }
.layout-case-study:has(.cs-dark) .sh-logo { color: #fff; }
.layout-case-study .tpl-buy { position: fixed; top: 40px; right: 40px; z-index: 20; }

@media (min-width: 810px) and (max-width: 1199.98px) {
  .site-header .sh-desktop { display: none; }
  .site-header .sh-tablet { display: block; }
  .site-header .sh-logo { top: 40px; font-size: 20px; }
}
@media (max-width: 1199.98px) { .cs-diagram { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
@media (max-width: 809.98px) {
  .cs-split .cs-band { margin-top: -104px; padding-top: 104px; padding-bottom: 48px; }
  .cs { --gutter: 20px; --s-hero-title: 40px; --s-section: 72px; --s-h2-p: 16px; --s-p-media: 32px; --s-media: 24px; --s-next: 96px; padding-top: 104px; }
  .site-header .sh-desktop, .site-header .sh-tablet, .site-header .sh-logo { display: none; }
  .site-header .sh-mobile { display: block; }
  .layout-case-study .tpl-buy { display: none; }
  .cs-intro { text-align: left; }
  .cs-icon { margin-left: 0; }
  .cs-title { font-size: 38px; line-height: 1.15; letter-spacing: -.74px; }
  .cs-h2, .cs-next-title { font-size: 28px; line-height: 1.2; }
  .cs-lead { font-size: 17px; }
  .cs-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 16px; }
  .cs-grid2, .cs-grid3 { grid-template-columns: minmax(0, 1fr); }
  .cs-phones { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .cs-phones > .cs-fig { flex: 0 0 72%; scroll-snap-align: start; }
  .cs-diagram { grid-template-columns: minmax(0, 1fr); }
  .cs-diagram-full { display: none; }
  .cs-next-card { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
}

/* QA r3: mobile header gets a backdrop so content doesn't run under the logo/menu; phone mockups wrap instead of a hidden sideways strip */
@media (max-width: 809.98px) {
  .layout-case-study .site-header::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 104px; z-index: 19; pointer-events: none; background: linear-gradient(#000 0 84%, rgba(0,0,0,0)); }
  .layout-case-study:has(.cs-light) .site-header::before { background: linear-gradient(#fff 0 84%, rgba(255,255,255,0)); }
  .cs-phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; gap: 16px; }
  .cs-phones > .cs-fig { flex: none; }
}