/* Long-form case study layout (Arounda-style narrative). Loads after agency-redesign.css. */
.cs{--cs-accent:var(--lime);--cs-tint:#e8f3f8;--cs-tint-2:#eef0fb;--pad:clamp(20px,5vw,76px);--max:1320px}
.cs a{color:inherit}
.cs-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* breadcrumb + hero */
.cs-crumb{display:flex;gap:10px;padding-top:34px;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#6f6d76}
.cs-crumb a{text-decoration:none;transition:color .2s}.cs-crumb a:hover{color:var(--ink)}
.cs-crumb b{color:var(--ink);font-weight:700}
.cs-hero{padding:clamp(56px,8vw,110px) 0 clamp(36px,4vw,56px)}
.cs-hero h1{font-size:clamp(48px,7.4vw,118px);line-height:.95;font-weight:500;max-width:1180px}
.cs-hero h1 em,.cs h2 em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:-.03em;color:var(--cs-accent)}
.cs-hero-row{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-top:clamp(28px,4vw,48px);flex-wrap:wrap}
.cs-hero-row p{max-width:520px;color:#c1bfc8;font-size:18px;line-height:1.55}
.cs-tags{display:flex;flex-wrap:wrap;gap:8px}
.cs-tags span{border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:13px;font-weight:500;color:#dcdae0}

.cs-cover{margin:0 var(--pad);border-radius:clamp(18px,2.4vw,32px);overflow:hidden;aspect-ratio:2/1;background:#15161b}
.cs-cover img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06);transition:transform 1.6s var(--ease)}
.cs-cover.in img{transform:none}

/* facts */
.cs-facts{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;padding:clamp(40px,5vw,64px) 0;border-bottom:1px solid var(--line)}
.cs-facts dt{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#6f6d76;margin-bottom:10px}
.cs-facts dd{margin:0;font-size:17px;line-height:1.4;color:var(--ink)}
.cs-facts dd small{display:block;color:var(--muted);font-size:13px;margin-top:2px}

/* section scaffold: label column + content column */
.cs-sec{padding:clamp(80px,10vw,150px) 0}
.cs-sec+.cs-sec{padding-top:0}
.cs-grid{display:grid;grid-template-columns:minmax(200px,1fr) 2.4fr;gap:clamp(24px,5vw,90px)}
.cs-label{position:sticky;top:110px;align-self:start}
.cs-label .num{display:block;font-family:'Instrument Serif',serif;font-style:italic;font-size:22px;color:var(--cs-accent);margin-bottom:10px}
.cs h2{font-size:clamp(38px,4.6vw,72px);line-height:1;font-weight:500}
.cs-lead{font-size:clamp(20px,1.9vw,27px);line-height:1.45;color:#dedce2;max-width:820px}
.cs-body{color:#b9b7c0;font-size:17px;line-height:1.65;max-width:680px}
.cs-body+.cs-body{margin-top:16px}

/* light sections */
.cs-paper{background:var(--paper);color:#141418}
.cs-paper .cs-lead{color:#2a2a31}.cs-paper .cs-body{color:#55535c}
.cs-paper .cs-facts dd,.cs-paper h3{color:#141418}
.cs-paper .eyebrow{color:#8a8890}

/* problem / solution */
.cs-ps{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(36px,4vw,56px)}
.cs-ps article{border-radius:24px;padding:clamp(26px,3vw,42px);background:#fff;min-height:260px;display:flex;flex-direction:column;gap:18px}
.cs-ps article:last-child{background:#141418;color:#f4f2ed}
.cs-ps h3{font-size:28px;font-weight:500}
.cs-ps article:last-child h3{color:#f4f2ed}
.cs-ps p{font-size:17px;line-height:1.6;color:#55535c}
.cs-ps article:last-child p{color:#c1bfc8}
.cs-ps .tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:#f1efe9;color:#6f6d76}
.cs-ps article:last-child .tag{background:var(--cs-accent);color:#131411}

/* process */
.cs-process{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(36px,4vw,56px)}
.cs-process li{list-style:none;border:1px solid var(--line);border-radius:22px;padding:26px 24px 30px;display:flex;flex-direction:column;gap:14px;min-height:300px;transition:border-color .3s,background .3s}
.cs-process li:hover{border-color:var(--cs-accent);background:#ffffff06}
.cs-process .n{font-size:56px;line-height:1;font-weight:500;letter-spacing:-.06em;color:var(--cs-accent)}
.cs-process h3{font-size:22px;font-weight:500}
.cs-process ul{margin:auto 0 0;padding:0;display:grid;gap:8px}
.cs-process ul li{border:0;padding:0;min-height:0;font-size:14px;color:#a8a6ae;display:block}
.cs-process ul li::before{content:'— ';color:#5d5b63}
.cs-process ul li:hover{background:none}
.cs-process{padding:0}

/* media */
.cs-figure{margin:0;border-radius:clamp(16px,2vw,28px);overflow:hidden;background:#15161b;position:relative}
.cs-figure img{display:block;width:100%;height:auto}
.cs-figure figcaption{position:absolute;left:16px;bottom:16px;background:#0b0b0fcc;backdrop-filter:blur(10px);color:#e9e7ec;font-size:12px;font-weight:600;letter-spacing:.02em;padding:8px 13px;border-radius:999px}
.cs-full{margin-top:clamp(40px,5vw,72px)}
.cs-panel{border-radius:clamp(20px,2.6vw,36px);padding:clamp(16px,2.4vw,36px);background:var(--cs-tint);margin-top:clamp(40px,5vw,72px)}
.cs-panel.alt{background:var(--cs-tint-2)}
.cs-panel.dark{background:#121318}
.cs-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.2vw,16px)}
.cs-bento>*{grid-column:span 6}
.cs-bento .w12{grid-column:span 12}.cs-bento .w8{grid-column:span 8}.cs-bento .w4{grid-column:span 4}.cs-bento .w7{grid-column:span 7}.cs-bento .w5{grid-column:span 5}
.cs-bento .cs-figure{height:100%}
.cs-bento .cs-figure img{height:100%;object-fit:cover}

/* missing-image slot (filled later with the ChatGPT presentation renders) */
.cs-slot.is-missing{min-height:320px;background:repeating-linear-gradient(135deg,#1a1b21 0 14px,#16171c 14px 28px);display:flex;align-items:center;justify-content:center;border:1px dashed #3a3b44}
.cs-slot.is-missing img{display:none}
.cs-slot.is-missing::after{content:attr(data-slot);font:600 13px/1.5 'DM Sans',sans-serif;color:#8d8b95;text-align:center;padding:24px;white-space:pre-line}
.cs-paper .cs-slot.is-missing{background:repeating-linear-gradient(135deg,#ebe8e1 0 14px,#e6e2da 14px 28px);border-color:#cfcac0}

/* feature rows */
.cs-feature{display:grid;grid-template-columns:1fr 1.55fr;gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(48px,6vw,90px) 0;border-top:1px solid var(--line)}
.cs-feature:nth-of-type(even){grid-template-columns:1.55fr 1fr}
.cs-feature:nth-of-type(even) .cs-feature-copy{order:2}
.cs-feature h3{font-size:clamp(28px,2.8vw,42px);line-height:1.05;font-weight:500;margin:14px 0 18px}
.cs-feature .points{margin:24px 0 0;padding:0;display:grid;gap:12px}
.cs-feature .points li{list-style:none;display:flex;gap:12px;font-size:15px;color:#c1bfc8;line-height:1.5}
.cs-feature .points li::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--cs-accent);margin-top:8px}

/* bilingual pair */
.cs-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,16px)}
.cs-pair .lang{display:inline-block;margin-bottom:12px;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8a8890}

/* scope numbers */
.cs-scope{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #d8d4cb;margin-top:clamp(36px,4vw,56px)}
.cs-scope div{padding:28px 24px 0 0;border-right:1px solid #d8d4cb;margin-right:24px}
.cs-scope div:last-child{border-right:0}
.cs-scope strong{display:block;font-size:clamp(48px,5.4vw,84px);line-height:1;font-weight:500;letter-spacing:-.06em}
.cs-scope span{display:block;margin-top:10px;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8a8890}
.cs-scope p{margin-top:12px;font-size:15px;line-height:1.55;color:#55535c;max-width:250px}

/* related */
.cs-related{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.cs-related a{text-decoration:none;display:block}
.cs-related .thumb{border-radius:20px;overflow:hidden;aspect-ratio:2/1;background:#15161b}
.cs-related .thumb div{width:100%;height:100%;background-size:100% 300%;background-position:center top;transition:transform .8s var(--ease)}
.cs-related a:hover .thumb div{transform:scale(1.05)}
.cs-related h3{font-size:24px;font-weight:500;margin-top:16px}
.cs-related p{color:var(--muted);font-size:14px;margin-top:6px}

/* reveal */
.cs .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.cs .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cs .rv,.cs-cover img{opacity:1;transform:none;transition:none}}

@media (max-width:1100px){
  .cs-facts{grid-template-columns:repeat(3,1fr)}
  .cs-process{grid-template-columns:repeat(2,1fr)}
  .cs-scope{grid-template-columns:repeat(2,1fr)}.cs-scope div:nth-child(2){border-right:0}
}
@media (max-width:820px){
  .cs-grid,.cs-feature,.cs-feature:nth-of-type(even){grid-template-columns:1fr}
  .cs-feature:nth-of-type(even) .cs-feature-copy{order:0}
  .cs-label{position:static}
  .cs-ps,.cs-pair{grid-template-columns:1fr}
  .cs-related{grid-template-columns:1fr 1fr}
  .cs-bento>*,.cs-bento .w8,.cs-bento .w4,.cs-bento .w7,.cs-bento .w5{grid-column:span 12}
  .cs-cover{aspect-ratio:4/3}
}
@media (max-width:560px){
  .cs-facts{grid-template-columns:1fr 1fr}
  .cs-process,.cs-scope,.cs-related{grid-template-columns:1fr}
  .cs-scope div{border-right:0;border-bottom:1px solid #d8d4cb;padding-bottom:24px}
  .cs-hero-row p{font-size:16px}
}

/* proto-personas */
.cs-personas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px)}
.persona{background:#fff;border-radius:22px;padding:24px;color:#141418;display:flex;flex-direction:column;gap:20px}
.persona header{display:flex;gap:14px;align-items:center}
.persona .av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--cs-accent);color:#fff;font-weight:700;font-size:15px;letter-spacing:.02em}
.persona h3{font-size:21px;font-weight:500}
.persona small{color:#77757e;font-size:13px}
.persona dl{margin:0;display:grid;gap:14px}
.persona dl div{border-top:1px solid #ebe9e4;padding-top:12px}
.persona dt{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8a8890;margin-bottom:6px}
.persona dd{margin:0;font-size:15px;line-height:1.5;color:#2a2a31;display:flex;flex-wrap:wrap;gap:6px}
.persona dd span{background:var(--cs-tint);color:#0d4f6e;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600}
.cs-note{margin-top:16px;font-size:13px;color:#77757e}
.cs-panel .cs-note{margin:14px 6px 0}
.cs-panel-label{display:block;margin:4px 6px 18px;color:#77757e}

/* user flow */
.cs-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:14px;counter-reset:f}
.cs-flow li{position:relative;background:#1b1c22;border:1px solid #2a2b33;border-radius:16px;padding:16px 14px;counter-increment:f;display:flex;flex-direction:column;gap:6px;min-height:118px}
.cs-flow li::before{content:counter(f,decimal-leading-zero);font-family:'Instrument Serif',serif;font-style:italic;color:var(--cs-accent);font-size:18px}
.cs-flow li:not(:last-child)::after{content:'';position:absolute;right:-14px;top:50%;width:14px;height:1px;background:var(--cs-accent)}
.cs-flow b{font-weight:600;font-size:15px;color:#f4f2ed}
.cs-flow small{font-size:12px;line-height:1.4;color:#8f8d97}
.cs-flow li.key{background:var(--cs-accent);border-color:var(--cs-accent)}
.cs-flow li.key::before,.cs-flow li.key b,.cs-flow li.key small{color:#06253a}

/* layout skeletons */
.cs-skeletons{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px);margin-top:clamp(10px,1.2vw,16px)}
.sk{margin:0;background:var(--cs-tint);border-radius:22px;padding:18px 18px 14px}
.sk figcaption{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5e7380;margin-top:12px;text-align:center}
.sk-screen{aspect-ratio:16/10;background:#fff;border-radius:10px;display:flex;overflow:hidden;box-shadow:0 10px 30px #0b244018}
.sk i,.sk b{display:block;background:#dfe6ea;border-radius:4px}
.sk-side{width:19%;background:#f3f6f8;padding:10px 7px;display:flex;flex-direction:column;gap:6px}
.sk-side i{height:7px}.sk-side i.on{background:var(--cs-accent)}
.sk-main{flex:1;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.sk-bar{display:flex;justify-content:space-between}.sk-bar .w40{width:40%;height:9px}.sk-bar .btn{width:16%;height:9px;background:var(--cs-accent)}
.sk-search{height:12px;border:1px solid #dfe6ea;border-radius:6px}
.sk-table{display:grid;gap:6px}.sk-table i{height:9px}.sk-table i:nth-child(odd){background:#eaeff2}
.sk-tabs{display:flex;gap:6px}.sk-tabs i{width:16%;height:7px}.sk-tabs i.on{background:var(--cs-accent)}
.sk-split{flex:1;display:flex;gap:8px;min-height:0}
.sk-graph{flex:1;border:1px dashed #cfd9df;border-radius:6px;position:relative}
.sk-graph b{position:absolute;width:22%;height:16%;background:#e6f2f8;border:1px solid var(--cs-accent)}
.sk-graph b:nth-child(1){left:6%;top:20%}.sk-graph b:nth-child(2){left:6%;top:60%}.sk-graph b:nth-child(3){left:40%;top:40%;background:var(--cs-accent)}.sk-graph b:nth-child(4){left:72%;top:40%}
.sk-props{width:30%;display:flex;flex-direction:column;gap:6px}.sk-props i{height:8px}
.sk-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.sk-kpis i{height:22px;background:#eef3f6}
.sk-chart{flex:1;display:flex;align-items:flex-end;gap:5px;padding:6px;border:1px solid #eef3f6;border-radius:6px}.sk-chart b{flex:1;background:#bfe6f7}

@media (max-width:1100px){.cs-flow{grid-template-columns:repeat(4,1fr)}.cs-flow li:nth-child(4)::after{display:none}}
@media (max-width:820px){.cs-personas,.cs-skeletons{grid-template-columns:1fr}.cs-flow{grid-template-columns:1fr 1fr}.cs-flow li::after{display:none}}

/* browser frame (long pages scroll on hover) */
.cs-browser{margin:0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 70px #00000040;border:1px solid #ffffff14}
.cs-browser .bar{height:34px;background:#1d1e24;display:flex;align-items:center;gap:7px;padding:0 14px}
.cs-browser .bar i{width:10px;height:10px;border-radius:50%;background:#3a3b44}
.cs-browser .bar i:nth-child(1){background:#ff5f57}.cs-browser .bar i:nth-child(2){background:#febc2e}.cs-browser .bar i:nth-child(3){background:#28c840}
.cs-browser .view{aspect-ratio:16/10;overflow:hidden}
.cs-browser .view img{display:block;width:100%;height:auto}
.cs-browser.scroll .view img{transition:transform 7s cubic-bezier(.45,0,.25,1)}
.cs-browser.scroll:hover .view img{transform:translateY(calc(-100% + var(--vh,0px)))}
.cs-browser.scroll .view{position:relative}
.cs-browser.scroll .view::after{content:'Hover to scroll';position:absolute;right:12px;bottom:12px;font:600 11px 'DM Sans',sans-serif;background:#0b0b0fcc;color:#fff;padding:6px 11px;border-radius:999px;transition:opacity .3s}
.cs-browser.scroll:hover .view::after{opacity:0}

/* phone frame for raw mobile exports */
.cs-phones{display:flex;justify-content:center;gap:clamp(12px,2vw,28px);padding:clamp(18px,3vw,40px);border-radius:clamp(18px,2.4vw,32px);background:var(--cs-tint)}
.cs-paper .cs-phones{background:#fff}
.cs-phone{margin:0;flex:0 1 270px;max-width:270px;padding:9px;border-radius:42px;background:#0d0e11;box-shadow:0 30px 60px #00000038,inset 0 0 0 2px #2a2b31}
.cs-phone .screen{border-radius:34px;overflow:hidden;aspect-ratio:9/19.5;background:#000}
.cs-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.cs-feature.is-phone{grid-template-columns:1fr 1.3fr}
.cs-feature.is-phone:nth-of-type(even){grid-template-columns:1.3fr 1fr}
.cs-pair.phones .cs-phones{padding:clamp(14px,2vw,28px)}

/* personas: quotes, 4 columns, original boards */
.persona blockquote{margin:0;font-family:'Instrument Serif',serif;font-style:italic;font-size:21px;line-height:1.3;color:#2a2a31}
.cs-personas.cols-4{grid-template-columns:repeat(4,1fr)}
.cs-personas.cols-2{grid-template-columns:repeat(2,1fr)}
.cs-boards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px);margin-top:clamp(10px,1.2vw,16px)}
.cs-boards .cs-figure{background:#fff}

/* palette */
.cs-palette{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1vw,14px)}
.cs-palette .sw b{display:block;aspect-ratio:1/1.1;border-radius:18px;background:var(--c);box-shadow:inset 0 0 0 1px #00000014}
.cs-palette .sw span{display:block;margin-top:12px;font-weight:600;font-size:15px;color:#141418}
.cs-palette .sw code{font-size:12px;color:#77757e}
.cs-type{margin-top:clamp(20px,2.4vw,32px);background:#fff;border-radius:18px;padding:22px 24px;display:flex;align-items:baseline;gap:24px;flex-wrap:wrap}
.cs-type strong{font-size:44px;font-weight:500;letter-spacing:-.04em;color:#141418}
.cs-type p{color:#77757e;font-size:14px}

/* mobile skeletons */
.sk-mobile{width:46%;margin:0 auto;aspect-ratio:9/19;background:#fff;border-radius:18px;padding:14px 10px;display:flex;flex-direction:column;gap:7px;box-shadow:0 10px 30px #0b244018;position:relative}
.sk-mobile i,.sk-mobile b{display:block;background:#dfe6ea;border-radius:4px}
.sk-mobile i{height:7px}.sk-mobile .w40{width:40%}.sk-mobile .w60{width:65%;height:10px}
.sk-mobile b{height:16%;background:#eef2f4;border-radius:8px}
.sk-mobile b.hero{height:28%}.sk-mobile b.opt{height:14%;border:1px solid #e1e7ea;background:#fff}.sk-mobile b.opt.on{border-color:var(--cs-accent);background:var(--cs-tint)}
.sk-mobile .cta{margin-top:auto;height:14px;border-radius:999px;background:var(--cs-accent)}
.sk-chips{display:flex;gap:4px}.sk-chips i{flex:1;height:8px;border-radius:999px}.sk-chips i.on{background:var(--cs-accent)}
.sk-rows{display:grid;gap:6px}.sk-rows i{height:9px}
.sk-tab{margin-top:auto;display:flex;justify-content:space-around}.sk-tab i{width:12%;height:8px}.sk-tab i.on{background:var(--cs-accent)}
.sk-mobile b:not(.hero):not(.opt){flex:none}

/* flow column counts */
.cs-flow.n5{grid-template-columns:repeat(5,1fr)}.cs-flow.n6{grid-template-columns:repeat(6,1fr)}

@media (max-width:1100px){.cs-personas.cols-4{grid-template-columns:repeat(2,1fr)}.cs-flow.n5,.cs-flow.n6{grid-template-columns:repeat(3,1fr)}.cs-flow.n5 li::after,.cs-flow.n6 li::after{display:none}}
@media (max-width:820px){.cs-boards{grid-template-columns:1fr}.cs-palette{grid-template-columns:repeat(3,1fr)}.cs-feature.is-phone,.cs-feature.is-phone:nth-of-type(even){grid-template-columns:1fr}.cs-personas.cols-4,.cs-personas.cols-2{grid-template-columns:1fr}.cs-flow.n5,.cs-flow.n6{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cs-phone{padding:6px;border-radius:30px}.cs-phone .screen{border-radius:25px}.cs-phones{gap:10px;padding:14px}}

/* composed boards (ChatGPT, from real screens) */
.cs-board{background:transparent}
.cs-board img{border-radius:inherit}
.cs-showcase{padding:clamp(56px,7vw,110px) 0 0;border-top:1px solid var(--line)}
.cs-showcase+.cs-showcase{margin-top:clamp(56px,7vw,110px)}
.cs-showcase-copy{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(20px,4vw,72px);align-items:end;margin-bottom:clamp(24px,3vw,44px)}
.cs-showcase-copy .eyebrow{grid-column:1/-1;margin-bottom:-8px}
.cs-showcase-copy h3{font-size:clamp(32px,3.6vw,56px);line-height:1;font-weight:500}
.cs-showcase+.cs-feature{margin-top:clamp(56px,7vw,110px)}
@media (max-width:820px){.cs-showcase-copy{grid-template-columns:1fr}}