@charset "UTF-8";
/* NDA CASE STUDY — page-specific styles only.
   Base patterns → base.css | Shared single-page components → single-page.css */


/* ── SIDEBAR ── */
.sidebar{position:sticky;top:calc(var(--nav-offset, 92px) + 16px)}
.company-card{background:var(--graph);border:1px solid var(--b1);border-radius:10px;overflow:hidden}
.company-card::before{content:'';display:block;height:2px;background:var(--unit)}
.company-card-body{padding:24px}
.company-logo{width:88px;height:88px;padding:14px;margin-bottom:18px;border-radius:18px;background:linear-gradient(145deg, rgba(240, 238, 232, .96), rgba(214, 223, 235, .92));border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.55)}
.company-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block;filter:drop-shadow(0 1px 1px rgba(255,255,255,.18)) drop-shadow(0 6px 12px rgba(9,13,20,.18))}
.company-name{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.03em;color:var(--n0);margin-bottom:4px}
.company-sub{font-size:13px;color:var(--dim);margin-bottom:20px;line-height:1.5}
.company-site-link{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--b1);color:var(--text);font-size:11px;font-weight:600;line-height:1;transition:border-color .15s,background .15s,color .15s}
.company-site-link:hover{border-color:var(--b2);background:rgba(255,255,255,.08);color:var(--n0)}
.company-rows{display:flex;flex-direction:column;gap:1px;background:var(--b1);border-radius:6px;overflow:hidden;margin-bottom:20px}
.company-row{background:var(--graph);padding:10px 14px}
.company-row-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.company-row-val{font-size:12.5px;color:var(--text);line-height:1.5}
.company-services{margin-bottom:20px}
.company-services-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.service-tag{display:inline-flex;font-size:11px;font-weight:500;color:var(--mid);background:rgba(255,255,255,.04);border:1px solid var(--b1);border-radius:4px;padding:4px 9px;margin:0 4px 4px 0;line-height:1}
.service-tag-link{transition:border-color .15s,color .15s,background .15s}
.service-tag-link:hover{color:var(--unit);border-color:rgba(var(--unit-rgb),.24);background:rgba(var(--unit-rgb),.08)}
.company-metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--b1);border-radius:6px;overflow:hidden}
.company-metric{background:var(--graph);padding:14px}
.company-metric-num{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:4px;color:var(--unit)}
.company-metric-num--private{color:var(--mid)}
.company-privacy-note{margin-top:14px;padding:12px 14px;border-radius:8px;border:1px solid rgba(var(--unit-rgb),.12);background:rgba(255,255,255,.04);font-size:13px;line-height:1.6;color:var(--mid)}
.company-metric-label{font-size:11px;color:var(--dim);line-height:1.4}

/* ── MAIN CONTENT ── */
.case-content{display:flex;flex-direction:column;gap:0}
.case-proof{display:grid;gap:28px;margin-bottom:24px;padding-bottom:40px;border-bottom:1px solid var(--b1)}
.proof-intro{max-width:760px}
.proof-block{display:grid;gap:18px}
.proof-block-head{max-width:760px}
.proof-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.proof-card{display:grid;gap:10px;padding:20px;background:var(--proof-card-bg);border:1px solid var(--b1);border-radius:12px;transition:border-color .2s, transform .2s, background .2s}
.proof-card:hover{border-color:var(--b2);transform:translateY(-2px);background:var(--proof-card-hover-bg)}
.proof-card-type{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--unit)}
.proof-card-title{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.03em;line-height:1.2;color:var(--proof-card-title)}
.proof-card-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--proof-card-meta)}
.proof-card-link{font-size:11px;font-weight:600;color:var(--proof-card-link)}
.testimonial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.testimonial-card{display:grid;gap:14px}
.testimonial-grid > .testimonial-card:only-child{grid-column:1 / -1}
.testimonial-quote{height:100%;margin:0}
.testimonial-video iframe{aspect-ratio:16/9}
.testimonial-local-video video{aspect-ratio:16/9;height:auto;object-fit:cover}
.testimonial-link{height:100%}
.case-videos{display:grid;gap:18px;margin-bottom:24px;padding-bottom:40px;border-bottom:1px solid var(--b1)}
.video-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.video-gallery.single{grid-template-columns:1fr}
.video-card{background:var(--graph);border:1px solid var(--b1);border-radius:10px;overflow:hidden}
.video-card-meta{padding:14px 16px 16px}
.video-card-title{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--n0);margin-bottom:6px}
.video-card-caption{font-size:11px;color:var(--dim);line-height:1.6}
.cs-section{padding:48px 0;border-bottom:1px solid var(--b1)}
.cs-section:first-child{padding-top:0}
.cs-section:last-child{border-bottom:none}
.cs-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.cs-label::before{content:'';display:block;width:16px;height:1px;background:var(--unit);flex-shrink:0}
.cs-h{font-family:var(--display);font-size:clamp(20px,2.5vw,30px);font-weight:700;letter-spacing:-.04em;line-height:1.1;color:var(--n0);margin-bottom:16px}
.cs-h em{font-family:var(--serif);font-style:italic;font-weight:400;color:rgba(255,255,255,.5)}
.cs-body{font-size:16px;color:var(--mid);line-height:1.85}
.cs-body p{margin-bottom:14px}
.cs-body p:last-child{margin-bottom:0}
.cs-body strong{color:var(--text);font-weight:500}
.overview-lead{font-family:var(--display);font-size:clamp(17px,2vw,22px);font-weight:600;letter-spacing:-.025em;color:var(--text);line-height:1.5;margin-bottom:20px}
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--b1);border-radius:10px;overflow:hidden;margin-bottom:32px}
.result-block{background:var(--graph);padding:28px 24px}
.result-num{font-family:var(--display);font-size:clamp(20px,2.8vw,34px);font-weight:700;letter-spacing:-.04em;line-height:1.05;color:var(--unit);margin-bottom:8px;overflow-wrap:anywhere;word-break:break-word}
.case-results-private .result-num{display:none}
.case-results-private .result-block{padding-top:18px}
.case-results-private .result-label{margin-top:0}
.result-label{font-size:12px;color:var(--mid);line-height:1.5;overflow-wrap:anywhere}
.result-context{font-size:11px;color:var(--dim);margin-top:4px;line-height:1.4}
.quote-block{background:var(--blue);border:1px solid var(--b1);border-left:3px solid var(--unit);border-radius:0 8px 8px 0;padding:32px 32px 28px;margin:0}
.quote-text{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2vw,22px);color:var(--n0);line-height:1.65;margin-bottom:16px}
.quote-attr{font-size:11px;color:var(--dim);line-height:1.5}
.quote-attr strong{color:var(--mid);font-weight:500}
.deliverables{display:flex;flex-direction:column;gap:2px}
.deliverable{display:flex;align-items:flex-start;gap:16px;background:var(--graph);border:1px solid var(--b1);border-radius:8px;padding:18px 20px;transition:border-color .2s}
.deliverable:hover{border-color:var(--b2)}
.deliverable-icon{width:28px;height:28px;border-radius:6px;flex-shrink:0;background:rgba(255,255,255,.05);border:1px solid var(--b1);display:flex;align-items:center;justify-content:center;font-size:12px;margin-top:1px}
.deliverable-title{font-family:var(--display);font-size:13.5px;font-weight:700;letter-spacing:-.02em;color:var(--n0);margin-bottom:3px}
.deliverable-desc{font-size:14px;color:var(--dim);line-height:1.6}
.media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.media-grid--masonry{display:block;columns:2 240px;column-gap:20px}
.media-figure{background:var(--graph);border:1px solid var(--b1);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;height:100%}
.media-grid--masonry .media-figure{display:inline-block;width:100%;height:auto;margin:0 0 20px;break-inside:avoid}
.media-figure img,.media-figure video,.media-embed iframe{display:block;width:100%;border:0}
.media-figure img,.media-figure video{aspect-ratio:16/10;height:auto;object-fit:cover}
.media-grid--masonry .media-figure img{aspect-ratio:auto}
.media-figure figcaption,.media-embed-caption{padding:14px 16px;font-size:11px;color:var(--dim);line-height:1.6;flex:1}
.media-embed{background:var(--graph);border:1px solid var(--b1);border-radius:10px;overflow:hidden}
.media-embed iframe{aspect-ratio:16/9}
.partner-strip{display:grid;gap:16px}
.partner-strip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.partner-logo-card{display:grid;align-content:space-between;gap:10px;min-height:120px;padding:18px;background:linear-gradient(180deg, rgba(21,28,42,.96), rgba(15,22,34,.96));border:1px solid var(--b1);border-radius:12px;transition:border-color .2s,transform .2s,background .2s}
.partner-logo-card:hover{border-color:rgba(var(--unit-rgb),.28);transform:translateY(-2px);background:linear-gradient(180deg, rgba(24,32,48,.98), rgba(15,22,34,.98))}
.partner-logo-name{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.03em;color:var(--n0)}
.partner-logo-meta{font-size:11px;line-height:1.6;color:var(--mid)}
.partner-logo-note{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--unit)}
.partner-strip-note{font-size:13px;line-height:1.6;color:var(--dim)}

/* ── LIGHTBOX ── */
.is-lightbox-ready{cursor:zoom-in}
body.lightbox-open{overflow:hidden}
.image-lightbox{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:32px}
.image-lightbox[hidden]{display:none}
.image-lightbox-backdrop{position:absolute;inset:0;background:rgba(5,7,10,.9);backdrop-filter:blur(10px)}
.image-lightbox-dialog{position:relative;z-index:1;width:min(1100px,100%);max-height:calc(100vh - 64px);display:grid;gap:14px}
.image-lightbox-close{justify-self:end;min-width:44px;min-height:44px;padding:10px 14px;border-radius:999px;border:1px solid var(--b2);background:rgba(9,13,20,.84);color:var(--n0);font:600 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.image-lightbox-figure{margin:0;display:grid;gap:14px}
.image-lightbox-image{display:block;width:100%;max-height:calc(100vh - 160px);object-fit:contain;border-radius:14px;background:#05070a;box-shadow:0 20px 80px rgba(0,0,0,.45)}
.image-lightbox-caption{max-width:880px;margin:0 auto;text-align:center;font-size:12px;line-height:1.7;color:var(--mid)}

/* ── UNIT VARIANTS ── */
body.unit-growth .hero-unit-tag{background:rgba(232,91,158,.1);color:var(--growth);border:1px solid rgba(232,91,158,.2)}
body.unit-innovation .hero-unit-tag{background:rgba(34,182,230,.08);color:var(--innovation);border:1px solid rgba(34,182,230,.16)}
body.unit-learn .hero-unit-tag{background:rgba(242,131,63,.08);color:var(--learn);border:1px solid rgba(242,131,63,.16)}

/* ── LIGHT MODE ── */
html[data-theme="light"] .hero-h em,
html[data-theme="light"] .cs-h em{color:rgba(15,23,42,.56)}


html[data-theme="light"] #hero .hero-phrase,
html[data-theme="light"] .cs-body,
html[data-theme="light"] .overview-lead,
html[data-theme="light"] .company-sub,
html[data-theme="light"] .company-row-val,
html[data-theme="light"] .company-privacy-note,
html[data-theme="light"] .company-metric-label,
html[data-theme="light"] .result-label,
html[data-theme="light"] .result-context,
html[data-theme="light"] .deliverable-desc,
html[data-theme="light"] .video-card-caption,
html[data-theme="light"] .media-figure figcaption,
html[data-theme="light"] .media-embed-caption,
html[data-theme="light"] .related-excerpt,
html[data-theme="light"] .related-link{color:var(--mid)}

html[data-theme="light"] .company-card{background:rgba(255,255,255,.90)}
html[data-theme="light"] .company-logo{background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(232,238,246,.94));border-color:rgba(15,23,42,.12)}
html[data-theme="light"] .company-site-link{color:var(--mid)}
html[data-theme="light"] .company-site-link:hover{color:var(--n0)}

html[data-theme="light"] .cs-h,
html[data-theme="light"] .hero-h,
html[data-theme="light"] .video-card-title,
html[data-theme="light"] .related-title,
html[data-theme="light"] .deliverable-title,
html[data-theme="light"] .company-name,
html[data-theme="light"] .company-row-label,
html[data-theme="light"] .company-services-label{color:var(--n0)}

html[data-theme="light"] .company-row,
html[data-theme="light"] .video-card,
html[data-theme="light"] .media-figure,
html[data-theme="light"] .media-embed,
html[data-theme="light"] .deliverable,
html[data-theme="light"] .related-card,
html[data-theme="light"] .proof-card{background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,245,251,.95))}

/* ── MEDIA CAROUSEL (blocks/media-carousel.njk) ──
   Fixed-footprint replacement for .media-grid on entry `gallery` blocks: one
   scroll-snap row, one 16/9 frame, one reserved caption box, so a 12-item
   gallery is exactly as tall as a 2-item one. .media-grid above stays — the
   legacy hand-written case bodies in src/cases/**.md still ship that markup.
   Mirrored, scoped to .article-body, in article.css: news entries render the
   same blocks but load article.css and never this file, the same split the
   .media-embed rules already use. Keep the two in sync. */
.media-carousel{display:grid;gap:14px;max-width:100%;min-width:0}
.media-carousel__viewport{min-width:0}
.media-carousel__track{position:relative;display:flex;gap:20px;margin:0;padding:0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin}
.media-carousel__slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;scroll-snap-stop:always;background:var(--graph);border:1px solid var(--b1);border-radius:10px;overflow:hidden}
.media-carousel__figure{margin:0;display:block}
/* The frame is what makes the footprint predictable: same box for a portrait
   screenshot, a landscape photo and a video facade. `contain` over `cover`
   because these galleries are mostly analytics screenshots — cropping them
   would hide the thing the caption is pointing at. */
.media-carousel__frame{position:relative;aspect-ratio:16/9;background:#05070a;display:flex;align-items:center;justify-content:center;overflow:hidden}
.media-carousel__frame img{width:100%;height:100%;object-fit:contain;display:block;border:0}
.media-carousel__frame .video-facade{width:100%;height:100%}
.media-carousel__frame .video-facade__button{height:100%;border:0;border-radius:0}
.media-carousel__frame .video-facade iframe{height:100%;border-radius:0}
/* Fixed height, not min-height: the caption box must not resize between slides. */
.media-carousel__caption{height:5.6em;overflow-y:auto;margin:0;padding:14px 16px;font-size:11px;line-height:1.6;color:var(--dim)}
.media-carousel__controls{display:none;align-items:center;gap:10px}
.js .media-carousel__controls{display:flex}
.media-carousel__status{margin:0 auto 0 0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.media-carousel__nav{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:999px;border:1px solid var(--b1);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.media-carousel__nav:hover:not(:disabled){border-color:var(--b2);background:rgba(255,255,255,.08);color:var(--n0)}
.media-carousel__nav:disabled{opacity:.35;cursor:default}
.media-carousel__nav svg{width:16px;height:16px}
html[data-theme="light"] .media-carousel__slide{background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,245,251,.95))}
html[data-theme="light"] .media-carousel__frame{background:rgba(15,23,42,.06)}
html[data-theme="light"] .media-carousel__caption,
html[data-theme="light"] .media-carousel__status{color:var(--mid)}
@media (prefers-reduced-motion: reduce){
  .media-carousel__track{scroll-behavior:auto}
}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  /* Shared #hero and #body breakpoints live in single-page.css */
  .sidebar{position:static;top:auto}
  .results-grid{grid-template-columns:1fr 1fr}
  .company-metrics{grid-template-columns:repeat(4,1fr)}
  .media-grid{grid-template-columns:1fr}
  .media-grid--masonry{columns:1}
  .proof-list,.testimonial-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  /* Shared page-trail, #hero, .hero-inner, #hero .hero-phrase, #body breakpoints in single-page.css */
  .results-grid{grid-template-columns:1fr 1fr}
  .company-metrics{grid-template-columns:1fr 1fr}
  .media-grid{grid-template-columns:1fr}
  .media-grid--masonry{columns:1}
  .case-proof{gap:20px;padding-bottom:32px}
  .proof-card{padding:18px}
}