/* T2 Case study template. Loads after tokens.css, components.css and 11-home-v4/assets/v4.css, so the page shares the
   home page's nav, footer, type, cards and journey stage. Every value is a token or derives from one.
   No gradient text, no accent bars, no colored left borders, no thumbnail strips, no asset-type labels. Engine: Claude. */

main>.container{padding-top:var(--sp-4)}
.cs-crumb{display:flex;gap:var(--sp-2);align-items:center;font-size:var(--fs-ui);margin:var(--sp-2) 0 var(--sp-4)}
.cs-crumb a{color:var(--text);text-underline-offset:3px}

/* ===== 1. Header: one white card, title row above the journey visual ===== */
.cs-hero__card{background:var(--bg-raised);border-radius:var(--r-xl);padding:var(--v3-panel-pad);display:grid;gap:var(--sp-7)}
.cs-hero__text{display:grid;gap:var(--sp-5)}
.cs-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5)}
.cs-logo{display:block;width:auto;max-height:40px}
.cs-client{font:var(--fw-bold) var(--fs-h4)/1 var(--font-display)}
.cs-kind{font:var(--fw-bold) var(--fs-ui)/1.3 var(--font-body);color:var(--accent)}
.cs-award{display:inline-flex;gap:.45em;align-items:baseline;font:var(--fw-medium) var(--fs-ui)/1 var(--font-body);padding:9px 16px;border-radius:var(--r-pill);border:var(--bw-hair) solid var(--line)}
.cs-award span:last-child{font-weight:var(--fw-bold)}
.cs-h1{max-width:22ch}
.cs-hero__sub{display:grid;gap:var(--sp-3);align-content:start}
.cs-hero__sub .t-lead{max-width:44ch}
.cs-read{font-size:var(--fs-ui)}
.cs-hero__visual{margin:0}
.journey.cs-hero__visual{border-radius:var(--r-l)}
.cs-hero__visual--mock{border-radius:var(--r-l);overflow:hidden}
@media (min-width:1024px){
  .cs-hero__text{grid-template-columns:7fr 5fr;column-gap:var(--sp-8);align-items:end}
  .cs-hero__meta{grid-column:1/-1}
  .cs-hero__sub{padding-bottom:6px}
}

/* ===== shared section rhythm ===== */
.cs-sec{padding-top:var(--section-y)}
.cs-sec .section-header{margin-bottom:var(--title-gap)}
.cs-split{display:grid;gap:var(--sp-5)}
.cs-split .section-header{margin-bottom:0}
.cs-prose{display:grid;gap:var(--sp-4);max-width:var(--measure-body)}
.cs-prose p{font-size:var(--fs-body);line-height:var(--lh-body)}
.cs-prose .cs-lead{font:var(--fw-medium) var(--fs-lead)/var(--lh-lead) var(--font-display);letter-spacing:var(--ls-heading)}
@media (min-width:1024px){.cs-split{grid-template-columns:5fr 7fr;column-gap:var(--sp-9);align-items:start}.cs-split .t-h2{max-width:14ch}}

/* ===== 3. Approach: numbered white cards, two per row, matched height ===== */
.cs-steps{list-style:none;margin:var(--sp-8) 0 0;padding:0;display:grid;gap:var(--sp-4);grid-template-columns:1fr}
@media (min-width:768px){.cs-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.cs-steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cs-step{background:var(--bg-raised);border-radius:var(--r-l);padding:var(--sp-6);display:grid;gap:var(--sp-3);align-content:start}
.cs-step__ic{display:block;height:96px;width:auto;margin:0 0 var(--sp-2)}   /* glass icon in place of a number (Andrew, Oct 27) */
.cs-step p{font-size:var(--fs-body);line-height:var(--lh-body)}

/* ===== 4. The work: one touchpoint per card, each a large stage with real creative in a plain device ===== */
.cs-work{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-5)}
.tp figure{margin:0;background:var(--bg-raised);border-radius:var(--r-xl);padding:var(--sp-3)}
.tp figcaption{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4);align-items:baseline;padding:var(--sp-5) var(--sp-4) var(--sp-3);
  font:var(--fw-medium) var(--fs-lead)/var(--lh-lead) var(--font-display);letter-spacing:var(--ls-heading)}
.tp__n{font:var(--fw-bold) var(--fs-h3)/1 var(--font-display);color:var(--accent);font-variant-numeric:tabular-nums;min-width:1ch}
.tp figcaption span:last-child{max-width:48ch}
@media (min-width:1024px){.tp figcaption{padding:var(--sp-6) var(--sp-6) var(--sp-4)}}

/* the stage: the journey visuals' Halo light, devices placed by layout */
.tp-stage{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r-l);overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 36%,#FFFFFF 0%,#FBFBFD 42%,var(--c-halo) 100%)}
.tp-slot{position:absolute;display:block;container-type:inline-size}
/* desktop placements (percent of the stage) */
.tp-stage--laptop .tp-slot--1{left:14%;top:7%;width:72%}
.tp-stage--monitor .tp-slot--1{left:18%;top:5%;width:64%}
.tp-stage--phone-pair .tp-slot--1{left:27%;top:7%;width:21%}
.tp-stage--phone-pair .tp-slot--2{left:52%;top:13%;width:21%}
.tp-stage--tablet-pair .tp-slot--1{left:18%;top:8%;width:30%}
.tp-stage--tablet-pair .tp-slot--2{left:52%;top:14%;width:30%}
.tp-stage--tablet-phone .tp-slot--1{left:22%;top:7%;width:33%}
.tp-stage--tablet-phone .tp-slot--2{left:59%;top:13%;width:19%}
.tp-stage--tablet-land .tp-slot--1{left:21%;top:9%;width:58%}
.tp-stage--tablet-land-phone .tp-slot--1{left:13%;top:15%;width:52%}
.tp-stage--tablet-land-phone .tp-slot--2{left:66%;top:8%;width:19%}
.tp-stage--hero-pair{aspect-ratio:16/10}
.tp-stage--hero-pair .tp-slot--1{left:25%;top:9%;width:64%}
.tp-stage--hero-pair .tp-slot--2{left:9%;top:24%;width:17%;z-index:2}
/* phones: taller stages so each device stays large */
@media (max-width:767px){
  .tp figure{padding:var(--sp-2)}
  .tp figcaption{padding:var(--sp-4) var(--sp-3) var(--sp-2);gap:var(--sp-3)}
  .tp-stage--laptop,.tp-stage--monitor,.tp-stage--tablet-land{aspect-ratio:4/3}
  .tp-stage--laptop .tp-slot--1{left:4%;top:14%;width:92%}
  .tp-stage--monitor .tp-slot--1{left:6%;top:6%;width:88%}
  .tp-stage--tablet-land .tp-slot--1{left:6%;top:7%;width:88%}
  .tp-stage--phone-pair,.tp-stage--tablet-pair,.tp-stage--tablet-phone,.tp-stage--tablet-land-phone{aspect-ratio:1/1}
  .tp-stage--phone-pair .tp-slot--1{left:8%;top:4%;width:41%}
  .tp-stage--phone-pair .tp-slot--2{left:52%;top:9%;width:41%}
  .tp-stage--tablet-pair .tp-slot--1{left:3%;top:9%;width:46%}
  .tp-stage--tablet-pair .tp-slot--2{left:51%;top:19%;width:46%}
  .tp-stage--tablet-phone .tp-slot--1{left:4%;top:9%;width:56%}
  .tp-stage--tablet-phone .tp-slot--2{left:61%;top:14%;width:35%}
  .tp-stage--tablet-land-phone .tp-slot--1{left:3%;top:24%;width:66%}
  .tp-stage--tablet-land-phone .tp-slot--2{left:62%;top:8%;width:34%;z-index:2}
  .tp-stage--hero-pair{aspect-ratio:4/3.2}
  .tp-stage--hero-pair .tp-slot--1{left:23%;top:12%;width:74%}
  .tp-stage--hero-pair .tp-slot--2{left:2%;top:24%;width:22%}
}

/* ===== devices: sized from their own width (container units), so one set of rules works at every stage size ===== */
.dev{display:block;position:relative;width:100%}
.dev::after{content:"";position:absolute;left:10%;right:10%;bottom:-4cqw;height:6cqw;border-radius:50%;background:radial-gradient(closest-side,rgba(10,10,15,.18),rgba(10,10,15,0));z-index:-1}
.dev img{display:block;max-width:none}
.scr{display:flex;flex-direction:column;overflow:hidden;background:#fff;position:relative}
.sk{display:block;height:2.4cqw;border-radius:1cqw;background:#E4E6ED;flex:none}
.lines{display:flex;flex-direction:column;gap:2cqw}
.lines--h .sk{height:4.4cqw}
/* phone */
.phone{aspect-ratio:9/19.3;border-radius:15cqw;background:#17171D;padding:3cqw;box-shadow:inset 0 0 0 .5cqw #3A3A44,0 14cqw 24cqw -6cqw rgba(10,10,15,.28),0 5cqw 10cqw -4cqw rgba(10,10,15,.2)}
.phone .scr{height:100%;border-radius:12.5cqw}
.phone .status{flex:none;height:12cqw;display:flex;align-items:center;justify-content:space-between;padding:0 9cqw}
.phone .status i{display:block;height:3cqw;border-radius:1cqw;background:#0A0A0F;width:10cqw}
.phone .status i:last-child{width:8cqw}
.phone .scr::before{content:"";position:absolute;left:50%;top:4.2cqw;width:4.4cqw;height:4.4cqw;margin-left:-2.2cqw;border-radius:50%;background:#0A0A0F;z-index:3}
.s-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:4cqw;padding:2cqw 6cqw 4cqw;border-bottom:1px solid #EEF0F4}
.s-top .sk{height:3.2cqw}
.sq{display:block;width:7cqw;height:7cqw;border-radius:2cqw;background:#E4E6ED}
.post{display:flex;flex-direction:column;gap:3cqw;padding:5cqw 6cqw;border-bottom:2.4cqw solid #F1F2F6}
.post__hd{display:flex;gap:3.5cqw;align-items:center}
.post__hd .lines{flex:1;gap:1.6cqw}
.av{display:block;width:11cqw;height:11cqw;border-radius:50%;background:#E4E6ED;flex:none}
.post__media{display:block;margin:0 -6cqw}
.post__media img{width:100%;height:auto}
.post__ft{display:flex;justify-content:space-between;padding-top:1cqw}
.art{display:flex;flex-direction:column;gap:4.5cqw;padding:6cqw}
.ad{display:flex;justify-content:center;padding:2cqw 0;background:#F5F6FA;margin:0 -6cqw}
.ad img{width:60%;height:auto}
/* laptop and monitor: plain lid, no marks */
.lid{display:block;background:#16161C;border-radius:2.2cqw 2.2cqw .9cqw .9cqw;padding:1.8cqw 1.8cqw 2.6cqw;position:relative;
  box-shadow:inset 0 0 0 .18cqw #34343E,0 6cqw 10cqw -3cqw rgba(10,10,15,.28),0 2.4cqw 5cqw -2cqw rgba(10,10,15,.2)}
.lid .scr{aspect-ratio:16/10;border-radius:.7cqw}
.base{display:block;position:relative;height:2.2cqw;width:112%;margin-left:-6%;margin-top:-.2cqw;border-radius:.2cqw .2cqw 2.4cqw 2.4cqw/.2cqw .2cqw 1.8cqw 1.8cqw;background:linear-gradient(180deg,#EEF0F4 0%,#D3D6DE 55%,#AEB2BE 100%)}
.base::before{content:"";position:absolute;left:43%;right:43%;top:0;height:.8cqw;border-radius:0 0 1cqw 1cqw;background:#C6C9D2}
.monitor .lid{border-radius:1.6cqw;padding:1.4cqw}
.monitor .lid .scr{aspect-ratio:16/9}
.neck{display:block;width:13%;height:9cqw;margin:-.2cqw auto 0;background:linear-gradient(90deg,#C9CCD5,#E9EBF0 45%,#BFC3CD)}
.foot{display:block;width:38%;height:1.6cqw;margin:0 auto;border-radius:1cqw 1cqw .6cqw .6cqw;background:linear-gradient(180deg,#E6E8EE,#BFC3CD)}
.monitor::after{left:26%;right:26%}
/* tablet */
.tablet{aspect-ratio:3/4;border-radius:9cqw;background:#17171D;padding:4.6cqw;box-shadow:inset 0 0 0 .4cqw #3A3A44,0 12cqw 20cqw -6cqw rgba(10,10,15,.28),0 4cqw 8cqw -3cqw rgba(10,10,15,.2)}
.tablet--land{aspect-ratio:4/3;border-radius:6.6cqw;padding:3.4cqw}
.tablet .scr{height:100%;border-radius:4cqw}
.tablet--land .scr{border-radius:3cqw}
/* screens */
.bar{flex:none;display:flex;align-items:center;gap:2cqw;height:4.6cqw;padding:0 1.6cqw;background:#F1F2F6}
.dots{display:flex;gap:.7cqw}.dots i{display:block;width:1cqw;height:1cqw;border-radius:50%;background:#D3D6DE}
.url{display:block;height:2cqw;width:44%;border-radius:1cqw;background:#fff}
.page{display:flex;flex-direction:column;gap:2.4cqw;overflow:hidden;flex:1}
.page>img{width:100%;height:auto}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;padding:0 2.4cqw}
.cards3>span{display:block;background:#F5F6FA;border-radius:1cqw;padding:2cqw}
.cards3 .sk{height:1.2cqw}.cards3 .lines{gap:1.2cqw}
.ebook{flex:1;display:grid;grid-template-columns:40% 1fr;gap:5%;align-items:center;padding:4% 7%;background:linear-gradient(180deg,#fff,#F7F8FB)}
.ebook__cover{display:block;border-radius:.8cqw;overflow:hidden;box-shadow:0 2cqw 4cqw -1.6cqw rgba(10,10,15,.3)}
.ebook__cover img{width:100%;height:auto}
.ebook__copy{display:flex;flex-direction:column;gap:3cqw}
.ebook__copy .sk{height:1.3cqw}.ebook__copy .lines{gap:1.5cqw}.ebook__copy .lines--h .sk{height:3cqw}
.pill{display:block;width:34%;height:4.4cqw;border-radius:3cqw;background:#0A0A0F}
.player{position:relative;display:block;flex:1;background:#0A0A0F}
.player img{width:100%;height:100%;object-fit:contain}
.ctl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:2.4cqw;padding:2cqw 3cqw;background:linear-gradient(0deg,rgba(10,10,15,.55),rgba(10,10,15,0))}
.play{display:block;width:0;height:0;border-style:solid;border-width:1.4cqw 0 1.4cqw 2.2cqw;border-color:transparent transparent transparent #fff}
.track{display:block;flex:1;height:.6cqw;border-radius:1cqw;background:rgba(255,255,255,.35);overflow:hidden}
.track b{display:block;width:38%;height:100%;background:#fff}
/* a document read on the device: full width, the page continues below the fold (never cropped at the sides) */
.fill{display:flex;flex-direction:column;flex:1;background:#fff;overflow:hidden}
.fill img{width:100%;height:auto;flex:none}
.fill__more{display:block;padding:6cqw}
.fill__more .lines{gap:3cqw}
.contain{display:flex;flex:1;align-items:center;justify-content:center;background:var(--c-halo);padding:3%}
.contain img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:.8cqw}
.phone .player{display:flex;align-items:center}
.phone .player img{height:auto}

/* ===== 5. Results ===== */
.cs-results{background:var(--bg-raised);border-radius:var(--r-xl);padding:var(--v3-panel-pad);display:grid;gap:var(--sp-8)}
.cs-results__text{display:grid;gap:var(--sp-4);align-content:start}
.cs-results__text .t-lead{max-width:40ch}
.cs-results__nums{display:grid;gap:var(--sp-6);align-content:start}
.cs-stat{display:grid;gap:var(--sp-2);align-content:start}
.cs-stat .stat__num{color:var(--text);font-size:var(--fs-stat);font-variant-numeric:tabular-nums}
.cs-stat--lead .stat__num{font-size:var(--fs-giant);line-height:.9}
.cs-stat--lead .stat__label{font-size:var(--fs-lead);max-width:24ch}
.cs-stat .stat__label{max-width:24ch;font-size:var(--fs-body);line-height:var(--lh-list)}
.cs-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);padding-top:var(--sp-6);border-top:var(--bw-hair) solid var(--line)}
@media (min-width:1024px){.cs-results{grid-template-columns:5fr 7fr;column-gap:var(--sp-9)}}
@media (max-width:767px){.cs-stat-row{grid-template-columns:1fr}.cs-stat--lead .stat__num{font-size:clamp(88px,26vw,120px)}}

/* ===== 6. Quote ===== */
.cs-quote{margin:0;border-radius:var(--r-xl)}

/* ===== 7. Services ===== */
.cs-svc{display:grid;gap:var(--sp-4)}
.cs-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.cs-tags a{display:inline-flex;align-items:center;min-height:48px;padding:0 var(--sp-5);border-radius:var(--r-pill);border:var(--bw-box) solid var(--text);
  color:var(--text);text-decoration:none;font:var(--fw-medium) var(--fs-ui)/1 var(--font-body);transition:background var(--dur-instant),color var(--dur-instant)}
.cs-tags a:hover{background:var(--text);color:var(--bg-raised)}

/* ===== 8. Related: creative-only cards keep the asset's own proportions on the Halo stage ===== */
.cs-creative{display:flex;align-items:center;justify-content:center;padding:7%}
.journey.cs-creative img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-s)}
.v3-work3 .work-card .t-body{max-width:none}
.cs-sec+.cta{margin-top:var(--section-y)}
.journey.cs-creative img{box-shadow:0 1px 0 rgba(10,10,15,.05),0 8px 24px -6px rgba(10,10,15,.14)}
@media (max-width:767px){.cs-hero__visual{margin-inline:calc(-1 * var(--v3-panel-pad) + var(--sp-2))}}