/* Case study template. Desktop measurements follow the Figma case study frames (1440 wide, 100px side margins). */
.case{--accent:#c8302b;--band:#e8413c;--title:#9f0501;--on-band:var(--black);--muted:#5e574d;--card:#e9dfcf;--gutter:clamp(16px,6.95vw,100px)}
.case.c-red{--accent:#c8302b;--band:#e8413c;--title:#9f0501}
.case.c-gold{--accent:#b06d00;--band:#f6a925;--title:#b16e00}
.case.c-olive{--accent:#5b7a2b;--band:#a3b47c;--title:#506225}
.case.c-teal{--accent:#1e6b5c;--band:#2a8a78;--title:#244d47;--on-band:var(--cream)}
.case p,.case h1,.case h2,.case h3,.case figure{margin:0}
.wrap{max-width:calc(1240px + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}

/* close × back to home: sits on the colour band, turns dark once you scroll past it */
.case-close{position:fixed;top:60px;right:60px;z-index:20;display:block;width:20px;height:20px;color:var(--on-band);transition:color .2s}
.case-close svg{display:block;width:21.75px;height:21.75px;margin:-.875px}
.case-close.past-band{color:var(--black)}

/* ---------- top band ---------- */
.band{position:relative;background:linear-gradient(var(--band),var(--band)) top/100% 900px no-repeat}
/* title size: as large as the design, but never wider than the column (--tr = width of the longest line per px of font size) */
.case-title{padding-top:60px;font:400 min(var(--tmax,240px),calc((100vw - 2*var(--gutter)) / var(--tr,4.1)))/.875 "Tanker",var(--heading);color:var(--title);text-transform:uppercase;letter-spacing:0;white-space:nowrap}
.case-title.smaller{--tmax:210px;line-height:.881}
.case-context{display:grid;grid-template-columns:minmax(0,810px) 300px;justify-content:space-between;align-items:start;gap:40px;color:var(--on-band)}
.case-title + .case-context{margin-top:var(--context-top,79px)}
.case-context .blurb{font:400 32px/42px var(--heading);font-variation-settings:"SOFT" 0,"WONK" 0}
.project-data{margin:0;display:flex;flex-direction:column;gap:16px}
.project-data div{display:flex;flex-direction:column;gap:4px}
.project-data div+div{border-top:1px solid currentColor;padding-top:16px}
.project-data dt{font:500 12px/16px var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.65}
.project-data dd{margin:0;font:500 18px/24px var(--body)}
.case .hero-img{margin-top:44px}
.hero-img img{display:block;width:100%;height:auto;border-radius:20px;box-shadow:0 16px 40px rgba(0,0,0,.12)}

/* ---------- body ---------- */
.case-body{display:flex;flex-direction:column;gap:180px;padding-top:150px;padding-bottom:120px}
.cs{display:flex;flex-direction:column;gap:44px}
.cs-text{display:flex;flex-direction:column;gap:18px;max-width:1004px}
.eyebrow{font:600 13px/18px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.cs-text h2,.h-sub{font:600 54px/62px "Big Shoulders",var(--heading);color:var(--black);text-wrap:balance}
.blurb-sm{font:400 21px/32px var(--body);color:var(--muted);max-width:720px}
/* lists: an arrow in the page's accent colour and medium-weight black text, so they read apart from the muted blurb
   (same pattern as the Customer voice card on AI Backgrounds) */
.cs-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.cs-list li{display:flex;gap:14px;font:500 19px/28px var(--body);color:var(--black);max-width:760px}
.cs-list li::before{content:"\2192";flex:none;color:var(--accent)}
/* list without arrows, where the lead words carry the colour instead (IA + Redesign, The system) */
.cs-list.plain li::before{content:none}
.cs-list .hl{font-weight:600;color:var(--accent)}
.cs-sub{display:flex;flex-direction:column;gap:14px;max-width:960px}
.cs-sub .h-sub{font-size:36px;line-height:42px}

.stat-open{display:flex;flex-direction:column;gap:8px;max-width:860px}
.stat-num{font:700 160px/160px "Big Shoulders",var(--heading);color:var(--accent)}
.stat-num.s150{font-size:150px;line-height:150px}
.stat-desc{font:400 30px/40px var(--heading);font-variation-settings:"SOFT" 0,"WONK" 0;color:var(--black)}

/* images */
.cs img,.cs video{display:block;max-width:100%;height:auto}
.img{border-radius:20px;overflow:hidden;background:var(--card)}
.img img,.img video{width:100%}
.img-row{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:var(--gap,24px);align-items:start}
.card{background:var(--card);border-radius:20px}
.split{display:grid;grid-template-columns:440px minmax(0,1fr);gap:64px;align-items:center}
.split.top{align-items:start}
.split .cs-text{gap:18px}

/* captioned tiles (3 across) */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.tile{display:flex;flex-direction:column;gap:10px}
.tile .img{margin-bottom:8px}
/* caption tags (SHIPPED, CONCEPT, PROPOSED): IBM Plex Mono SemiBold 12, 10% tracking, accent colour. .tile .tag beats the general .tile p rule */
.tag,.tile .tag{font:600 12px/16px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.tile h3{font:600 28px/32px "Big Shoulders",var(--heading)}
.tile p{font:400 16px/24px var(--body);color:var(--muted)}

/* ---------- hotspots on annotated images (IA + Redesign) ---------- */
.annotated{position:relative}
.hotspot{position:absolute;width:12px;height:12px;margin:0;padding:0;border:0;background:none;cursor:pointer;transform:translate(0,0)}
/* always-on marker from Figma: yellow dot inside a thin yellow ring, on a dark cover */
.hotspot::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;background:radial-gradient(circle closest-side,#ffc629 0 3.2px,#111 3.3px 4.8px,#ffc629 4.9px 6.3px,#111 6.4px)}
.hotspot .leader{position:absolute;left:5px;bottom:100%;width:2px;height:var(--lead);background:#ffc629;opacity:0;transition:opacity .15s}
.hotspot .tip{position:absolute;left:var(--tx);bottom:calc(100% + var(--lead) - 0px);background:#fff;color:#000;border-radius:4px;padding:10px 16px;font:500 15px/20px var(--body);white-space:pre;text-align:left;opacity:0;pointer-events:none;transition:opacity .15s;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.hotspot:hover .leader,.hotspot:focus-visible .leader,.hotspot:hover .tip,.hotspot:focus-visible .tip,.hotspot.open .leader,.hotspot.open .tip{opacity:1}
.tier{position:absolute;width:2.581%;aspect-ratio:1;height:auto;margin:0;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.tier::after{content:"";position:absolute;inset:-12.5%;border-radius:50%;border:2px solid #ffc629;opacity:0;transition:opacity .15s}
/* every tier popup opens in the same spot: upper left of the More menu column, clear of the bottom toolbar */
.annotated .pop{position:absolute;right:47.42%;top:24.89%;width:260px;background:#fff;border-radius:6px;padding:16px 18px;text-align:left;opacity:0;pointer-events:none;transition:opacity .15s;box-shadow:0 4px 18px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:6px;z-index:3}
/* bigger invisible tap area so the small hotspot dots are easy to hit on touch screens (visuals unchanged).
   The tier dots sit too close together on phones to enlarge without stealing each other's taps. */
.hotspot::after{content:"";position:absolute;left:50%;top:50%;width:32px;height:32px;transform:translate(-50%,-50%);border-radius:50%}
.tier:hover::after,.tier:focus-visible::after,.tier.open::after{opacity:1}
.tier:hover + .pop,.tier:focus-visible + .pop,.tier.open + .pop{opacity:1}
/* grouped tap areas for the tier dots (built in case.js); only used on tablets and phones */
.tier-group{display:none;position:absolute;margin:0;padding:0;border:0;border-radius:8px;background:transparent;cursor:pointer;z-index:2}
.tier-group:focus-visible{outline:2px solid #ffc629;outline-offset:1px}
@media (max-width:900px){.tier-group{display:block}.annotated .tier{pointer-events:none}}
.pop b{font:500 11px/14px var(--mono);letter-spacing:.08em;color:#c8302b}
.pop strong{font:500 18px/24px var(--body);color:var(--black)}
.pop span{font:400 14px/20px var(--body);color:var(--muted)}
.pop i{font:500 13px/18px var(--body);font-style:normal;color:var(--black)}
.hint{font:500 12px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- IA + Redesign modules ---------- */
.interviews{display:grid;grid-template-columns:600px 1px minmax(0,1fr);gap:56px;align-items:center;padding:52px 56px}
.interviews .divider{align-self:stretch;background:#d6c9b8}
.interviews .count{display:flex;align-items:flex-end;gap:20px;margin-bottom:28px}
.interviews .count b{font:700 140px/130px "Big Shoulders",var(--heading);color:var(--accent)}
.interviews .count span{font:500 24px/32px var(--body);padding-bottom:3px}
.bars{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.bars li{display:grid;grid-template-columns:110px minmax(0,424px) auto;gap:20px;align-items:center;font:400 18px/24px var(--body);color:var(--muted)}
.bars .track{height:12px;border-radius:6px;background:#d6c9b8;overflow:hidden}
.bars .fill{display:block;height:100%;border-radius:6px;background:var(--accent)}
.bars b{font-weight:500;color:var(--black)}
.heard{display:flex;flex-direction:column;gap:14px}
.heard p:not(.eyebrow){font:600 32px/38px "Big Shoulders",var(--heading)}
.cut-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cut-cards .card{overflow:hidden}
.cut-cards .visual{background:#242424;position:relative}
.cut-cards .visual img{width:100%}
.cut-cards .visual video{position:absolute;left:7.56%;top:33.9%;width:84.63%}
.cut-cards .text{padding:24px 28px 40px;display:flex;flex-direction:column;gap:8px}
.cut-cards h3{font:600 28px/34px "Big Shoulders",var(--heading)}
.cut-cards p{font:400 17px/26px var(--body);color:var(--muted)}
.shipped{display:grid;grid-template-columns:340px minmax(0,1fr);gap:48px;align-items:center;padding:40px}
.shipped .text{display:flex;flex-direction:column;gap:12px}
.shipped h3{font:600 32px/38px "Big Shoulders",var(--heading)}
.shipped p:not(.eyebrow){font:400 18px/28px var(--body);color:var(--muted)}
.result{display:flex;flex-direction:column;gap:20px}
.quote-row{display:flex;gap:20px;align-items:flex-start;max-width:933px}
.quote-row img{flex:0 0 137px;width:137px;border-radius:14px}
.quote-row .big{font:400 30px/40px var(--heading);font-variation-settings:"SOFT" 0,"WONK" 0}
.quote-row .q{font:italic 400 26px/36px var(--heading);color:var(--muted);margin-top:20px}
.quote-row .sm{font:400 18px/26px var(--body);color:var(--muted);margin-top:12px}

/* ---------- AI Backgrounds modules ---------- */
.mini-card{padding:48px;display:flex;flex-direction:column;justify-content:space-between;min-height:560px;gap:32px}
.mini-card .head{display:flex;flex-direction:column;gap:10px}
.mini-card .head .eyebrow{color:#c8302b}
.mini-card h3{font:600 32px/38px "Big Shoulders",var(--heading)}
.comp-list{list-style:none;margin:0;padding:0}
.comp-list li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:18px 0;border-top:1px solid #c7baa8}
.comp-list li:last-child{border-bottom:1px solid #c7baa8}
.comp-list b{font:600 28px/32px "Big Shoulders",var(--heading)}
.comp-list span{font:400 16px/24px var(--body);color:var(--muted)}
.voice-stats{display:flex;gap:20px}
.voice-stats div{display:flex;flex-direction:column;gap:4px;flex:1}
.voice-stats b{font:700 96px/92px "Big Shoulders",var(--heading);color:#c8302b}
.voice-stats span{font:500 17px/24px var(--body);max-width:182px}
.approach{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font:400 16px/24px var(--body);color:var(--muted)}
.phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;padding:56px 72px 48px;align-items:start}
.phones .tile{gap:10px}
.phones .tile img{width:100%;margin-bottom:20px}
.phones h3{font:500 20px/26px var(--body)}

/* ---------- Avatars ---------- */
.why{display:flex;gap:20px;align-items:center;max-width:1157px}
.why img{flex:0 0 137px;width:137px}
.why h3{font:400 30px/40px var(--heading);font-variation-settings:"SOFT" 0,"WONK" 0}
.why p{font:400 18px/26px var(--body);color:var(--muted);margin-top:12px;max-width:646px}

/* ---------- Dashboards ---------- */
.four-up{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:40px}
.four-up img{border-radius:10px;width:100%}

/* takeaway */
.takeaway .cs-text{gap:14px}
.takeaway h2{margin-top:0}

/* ---------- smaller screens ---------- */
@media (max-width:1240px){
  .case-context .blurb{font-size:clamp(22px,2.2vw + 6px,32px);line-height:1.31}
  .interviews{grid-template-columns:1fr;gap:32px}
  .interviews .divider{height:1px}
  .bars li{grid-template-columns:90px minmax(0,1fr) auto}
}
@media (max-width:900px){
  .case-close{top:20px;right:20px}
  .band{background-size:100% calc(100% - 22vw)}
  .case-title{padding-top:72px}
  .case-context{grid-template-columns:1fr;gap:28px}
  .case-title + .case-context{margin-top:40px}
  .case .hero-img{margin-top:36px}
  .case-body{gap:96px;padding-top:80px;padding-bottom:80px}
  .cs{gap:28px}
  .cs-text h2,.h-sub{font-size:clamp(34px,8vw,44px);line-height:1.15}
  .cs-sub .h-sub{font-size:30px;line-height:36px}
  .blurb-sm{font-size:18px;line-height:28px}
  .cs-list li{font-size:17px;line-height:26px;gap:12px}
  .stat-num,.stat-num.s150{font-size:clamp(52px,16.5vw,120px);line-height:1}
  .stat-desc{font-size:22px;line-height:32px}
  /* tablets keep the side-by-side image rows, just with tighter spacing (they stack on phones, below) */
  .img-row{--gap:16px}
  .tiles,.cut-cards{gap:16px}
  .cut-cards .text{padding:18px 18px 24px}
  .cut-cards h3{font-size:22px;line-height:28px}
  .cut-cards p{font-size:15px;line-height:22px}
  .split{grid-template-columns:1fr;gap:28px}
  .shipped{grid-template-columns:1fr;padding:28px 24px}
  .interviews{padding:32px 24px}
  .interviews .count b{font-size:96px;line-height:90px}
  .mini-card{padding:32px 24px;min-height:0}
  .comp-list li{grid-template-columns:1fr;gap:6px}
  .voice-stats b{font-size:72px;line-height:70px}
  .phones{padding:32px 24px;gap:24px}
  .phones h3{font-size:17px;line-height:22px}
  .four-up{padding:20px;gap:16px}
  .quote-row,.why{flex-direction:column;align-items:flex-start}
  .quote-row .big,.why h3{font-size:24px;line-height:32px}
  .quote-row .q{font-size:20px;line-height:28px}
  .hotspot .tip{font-size:13px;line-height:17px;padding:7px 10px}
  .img.annotated{overflow:visible} .img.annotated>img{border-radius:20px}
  /* on small screens the diagram is too short to hold the popup, so it opens just below the image */
  .annotated .pop{left:0;right:auto;top:calc(100% + 10px);width:100%;padding:12px 14px} .pop strong{font-size:16px;line-height:20px} .pop span{font-size:13px;line-height:18px}
}
.img.bordered-16{border-radius:16px;background:transparent} /* the thin outline is already in the exported image */
.shipped video{width:100%;height:auto;display:block}
.case-title + .case-context{margin-top:var(--context-top)}
@media (max-width:900px){.case-title + .case-context{margin-top:40px}}
/* phones: one image per row */
@media (max-width:600px){
  .img-row,.tiles,.cut-cards,.phones,.four-up{grid-template-columns:1fr}
  .img-row.keep-2{grid-template-columns:repeat(2,minmax(0,1fr));--gap:12px}
  .phones{gap:40px}
  .phones h3{font-size:20px;line-height:26px}
  /* one phone per row, centred, with its caption lined up under it */
  .phones .tile{width:100%;max-width:320px;margin:0 auto}
  .cut-cards .text{padding:24px 28px 40px}
  .cut-cards h3{font-size:28px;line-height:34px}
  .cut-cards p{font-size:17px;line-height:26px}
}
.quote-row img,.why img{height:auto}
/* never let a tooltip or an unloaded title font push the page sideways */
body.case{overflow-x:clip}
@media (max-width:900px){.case-title{white-space:normal;overflow-wrap:anywhere}}
/* images keep their proportions everywhere in the page body (sections outside .cs included) */
.case-body img,.case-body video{display:block;max-width:100%;height:auto}
/* belt and braces: if the title font is slow to load, its fallback can't push the page sideways */
.band{overflow-x:clip}
/* mobile screens strip (IA + Redesign): breathing room so the end phones don't touch the card edge; background matches the image's own */
.img.padded-x{background:#e8d9c4;padding:0 3.23%}

/* image strip inset inside its card, matching Figma: 13px top, 14px sides, 15px bottom at full size */
.img.padded{background:#e8d9c4;padding:1.048% 1.129% 1.21%}
/* thin outline drawn in code (for images exported without it) */
.img.outlined{border:1px solid #c7baa8;border-radius:16px;background:transparent}

/* ---------- Dashboards: public preview + password dialog (Figma "case 4 - dashboards password", "Password modal") ---------- */
.teaser-intro{display:flex;flex-direction:column;gap:14px}
.teaser-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.btn-cream{display:inline-block;padding:16px 28px;border-radius:10px;background:var(--cream);color:var(--accent);font:500 18px/24px var(--body);text-decoration:none;transition:filter .2s}
.btn-cream:hover{filter:brightness(.96)}
.btn-cream:focus-visible,.access-note a:focus-visible,.unlock a:focus-visible,.unlock button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.access-note{margin:0;font:400 18px/24px var(--body);color:rgba(246,237,224,.8)}
.access-note a{color:inherit;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.teaser-card{margin:0;background:var(--card);border-radius:20px;padding:40px}
.teaser-card.first{margin-top:44px}
.teaser-card img{display:block;width:100%;height:auto;border-radius:10px}
.teaser-body{padding-top:60px;padding-bottom:120px}

.unlock{width:min(560px,calc(100vw - 32px));max-width:none;padding:48px 48px 40px;border:0;border-radius:6px;background:#fbf6ee;color:var(--black);box-shadow:0 18px 44px rgba(20,20,20,.25)}
.unlock::backdrop{background:rgba(20,20,20,.42)}
.unlock-close{position:absolute;top:22px;right:24px;width:32px;height:32px;border:0;background:none;color:#6b6357;font-size:18px;line-height:32px;cursor:pointer}
.unlock-form{display:flex;flex-direction:column}
.unlock-eyebrow{margin:0;font:500 13px/18px var(--mono);text-transform:uppercase;color:#1e6b5c}
.unlock h2{margin:10px 0 32px;font:600 34px/40px var(--heading);font-variation-settings:"SOFT" 0,"WONK" 0;color:var(--black)}
.unlock-field{display:flex;flex-direction:column;gap:8px}
.unlock-field label{font:500 12px/16px var(--mono);text-transform:uppercase;color:#6b6357}
.unlock-input{display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(20,20,20,.55);padding-bottom:7px}
.unlock-input input{flex:1;min-width:0;border:0;padding:0;background:none;font:400 17px/24px var(--body);color:var(--black);outline:none}
.unlock-input:focus-within{border-bottom:2px solid var(--black);padding-bottom:6px}
.unlock-show{border:0;padding:4px 0;background:none;font:500 12px/16px var(--mono);text-transform:uppercase;color:#6b6357;cursor:pointer}
.unlock-field.has-error label{color:#b50500}
.unlock-field.has-error .unlock-input{border-bottom:2px solid #b50500;padding-bottom:6px}
.unlock-error{margin:0;font:400 14px/20px var(--body);color:#b50500}
.unlock-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:36px}
.pill{border-radius:999px;padding:13px 22px;font:600 16px/22px var(--body);cursor:pointer}
.pill.outline{border:1.5px solid var(--black);background:none;color:var(--black)}
.pill.solid{border:1.5px solid var(--black);background:var(--black);color:var(--cream)}
.pill:disabled{opacity:.6;cursor:progress}
.unlock-ask{margin:20px 0 0;padding-top:16px;border-top:1px solid #d9ccba;font:500 15px/22px var(--body)}
.unlock-ask a{color:var(--black);text-underline-offset:3px}
@media (max-width:900px){
  .teaser-card{padding:20px}
  .teaser-card.first{margin-top:36px}
  .teaser-body{padding-top:32px;padding-bottom:80px}
  .btn-cream,.access-note{font-size:16px}
}
@media (max-width:520px){
  .unlock{padding:40px 24px 28px}
  .unlock h2{font-size:28px;line-height:34px}
  .unlock-actions .pill{flex:1 1 auto}
}