/* Case study pages: same felt world as the home page, no film. */
.case-page{margin:0;background:var(--cream);}
.case-page .site{box-shadow:none;border-radius:0;z-index:auto;}
.case-bar{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px clamp(18px,5vw,64px);background:linear-gradient(180deg,var(--cream) 70%,rgba(244,239,232,0));}
.case-bar__brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700;font-size:1.1rem;}
.case-bar__brand .mark{width:24px;height:28px;border-radius:7px 7px 10px 10px;background:linear-gradient(160deg,#5B7BA6,#3d5678);box-shadow:0 6px 14px rgba(91,123,166,.35);}
.case-bar__nav{display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.55);backdrop-filter:blur(10px);border:1px solid rgba(91,123,166,.16);}
.case-bar__nav a{font-size:.82rem;font-weight:500;color:var(--ink-soft);text-decoration:none;padding:7px 14px;border-radius:999px;}
.case-bar__nav a:hover{color:var(--ink);}
.case .wrap{margin-bottom:clamp(72px,10vw,140px);}
.case-kicker{margin:0 0 18px;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--denim);}
.case-hero{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,5vw,80px);align-items:center;padding-top:clamp(24px,4vw,56px);}
.case-hero .display{max-width:18ch;margin-bottom:24px;}
.case-hero .lede{margin:0;}
.case-hero__media{position:relative;padding:24px 12px 12px 40px;}
.case-hero__media .tray__in{aspect-ratio:9/13;}
.case-hero__media video{display:block;width:100%;height:100%;object-fit:cover;}
.mascot{position:absolute;width:120px;height:auto;pointer-events:none;filter:drop-shadow(0 12px 20px rgba(120,100,70,.18));}
.mascot--a{left:-6px;bottom:-18px;transform:rotate(-8deg);}
.facts{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;padding:22px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.facts span{display:block;font-size:.8rem;color:var(--ink-soft);margin-bottom:4px;}
.facts strong{font-weight:600;}
.numbers__row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin:0 0 28px;}
.numbers__row div{background:var(--cream-deep);border-radius:var(--r-out);padding:28px 26px;}
.numbers__row b{display:block;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700;font-size:clamp(2.4rem,4.5vw,3.6rem);letter-spacing:-.03em;line-height:1;}
.numbers__row span{display:block;margin-top:10px;color:var(--ink-soft);}
.numbers p,.heard > p,.end p{max-width:62ch;}
.insights{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px);margin-top:36px;}
.insight{background:#fff;border-radius:var(--r-out);padding:30px 30px 26px;box-shadow:0 1px 2px rgba(30,30,30,.05),0 18px 50px rgba(120,100,70,.10);}
.insight h3{margin:0 0 14px;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:600;font-size:1.35rem;letter-spacing:-.02em;line-height:1.15;}
.insight p{margin:0 0 12px;color:var(--ink-soft);}
blockquote{margin:0;padding:0 0 0 18px;border-left:1px solid var(--hair);font-size:1.02rem;line-height:1.5;}
blockquote cite{display:block;margin-top:8px;font-style:normal;font-size:.86rem;color:var(--ink-soft);}
.insight blockquote + p{margin-top:14px;}
.did{display:grid;grid-template-columns:6fr 6fr;gap:clamp(32px,5vw,80px);align-items:start;}
.did__text p{max-width:58ch;}
.did__media{position:relative;padding-bottom:120px;}
.did__midfi{position:absolute;right:-8px;bottom:0;width:38%;transform:rotate(3deg);}
.did__midfi .tray__in{aspect-ratio:9/16;}
.screens__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);}
.screen{margin:0;}
.screen .tray__in{aspect-ratio:9/16;overflow:auto;scrollbar-width:none;}
.screen .tray__in::-webkit-scrollbar{display:none;}
.screen .tray__in img{width:100%;height:auto;display:block;}
.screen figcaption{margin-top:16px;color:var(--ink-soft);padding:0 6px;}
.screen figcaption strong{color:var(--ink);}
.screens__hint{margin:14px 6px 0;font-size:.86rem;color:var(--ink-soft);}
.tested__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);}
.tested h3{margin:0 0 18px;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:600;font-size:1.3rem;}
.tested blockquote{margin-bottom:18px;}
.fixes{list-style:none;margin:0;padding:0;}
.fixes li{padding:12px 0;border-top:1px solid var(--hair);}
.fixes li:last-child{border-bottom:1px solid var(--hair);}
.end__next{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:32px;}
@media (max-width:860px){
  .case-hero,.did,.tested__cols,.insights{grid-template-columns:1fr;}
  .case-hero__media{padding:12px 32px 0 12px;max-width:360px;}
  .facts{grid-template-columns:1fr 1fr;}
  .numbers__row{grid-template-columns:1fr;}
  .screens__grid{grid-template-columns:1fr;gap:36px;}
  .screen .tray__in{aspect-ratio:9/14;}
  .did__media{padding-bottom:0;} .did__midfi{position:static;width:50%;margin-top:20px;transform:none;}
}
.case-page,.case-bar{font-family:'Figtree',system-ui,sans-serif;}
.case-bar__nav a{white-space:nowrap;}
@media (max-width:860px){.case-bar{padding:14px 18px;} .case-bar__brand{font-size:1rem;} .case-bar__brand span.mark{flex:0 0 auto;} .case-bar__nav a{padding:7px 10px;font-size:.8rem;}}
.did__midfi .tray__in{aspect-ratio:auto;}
.did__midfi .tray__in img{width:100%;height:auto;display:block;}

/* template additions: wide hero media, flow tray, before/after pairs */
.case-hero__media .tray__in--wide{aspect-ratio:1800/1036;}
.case-hero__media .tray__in--wide img{width:100%;height:100%;object-fit:cover;display:block;}
.tray__in--flow,.tray__in--auto{aspect-ratio:auto;}
.tray__in--flow img,.tray__in--auto img{width:100%;height:auto;display:block;}
.tray-caption{margin:12px 6px 0;font-size:.9rem;color:var(--ink-soft);}
.did .did__media.reveal{padding-bottom:0;}
.pairs{display:grid;gap:clamp(40px,5vw,72px);}
.pair{margin:0;}
.pair__imgs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);}
.pair__imgs .tray{position:relative;}
.pair__imgs .tray__in{aspect-ratio:4/3;background:#fff;}
.pair__imgs .tray__in img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;padding:4%;}
.pair__tag{position:absolute;left:22px;top:22px;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:rgba(244,239,232,.9);padding:6px 12px;border-radius:999px;}
.pair figcaption{margin-top:18px;max-width:70ch;color:var(--ink-soft);padding:0 6px;}
.pair figcaption strong{color:var(--ink);}
@media (max-width:860px){.pair__imgs{grid-template-columns:1fr;} .case-hero__media{max-width:none;padding:0;}}
.tray__in--flow{overflow:auto;scrollbar-width:thin;}
@media (max-width:860px){.tray__in--flow img{min-width:900px;}}
.screens__grid--wide .screen .tray__in{aspect-ratio:auto;overflow:hidden;}
.screens__grid--wide .screen .tray__in img{width:100%;height:auto;}
.pair__imgs{align-items:start;}
.pair__imgs .tray__in{aspect-ratio:auto;}
.pair__imgs .tray__in img{height:auto;object-fit:unset;padding:3%;}
.case-hero__media video{display:block;width:100%;height:100%;object-fit:cover;}
.strip--case{margin:0 calc(-1 * clamp(18px,5vw,64px));padding-left:clamp(18px,5vw,64px);scroll-padding-inline:clamp(18px,5vw,64px);}

/* ---------- interactive template parts ---------- */
.stepper{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,64px);align-items:start;}
.stepper__list{display:grid;gap:8px;margin:0;padding:0;list-style:none;}
.stepper__btn{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;width:100%;text-align:left;font:inherit;color:var(--ink);background:transparent;border:0;border-radius:18px;padding:14px 16px;cursor:pointer;transition:background .25s var(--ease);}
.stepper__btn:hover{background:rgba(255,255,255,.5);}
.stepper__btn.is-on{background:#fff;box-shadow:0 1px 2px rgba(30,30,30,.05),0 14px 40px rgba(120,100,70,.10);}
.stepper__btn small{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--denim);}
.stepper__btn strong{display:block;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:600;font-size:1.15rem;letter-spacing:-.01em;}
.stepper__btn span{display:block;margin-top:4px;color:var(--ink-soft);font-size:.95rem;max-width:40ch;}
.stepper__panel .tray__in{aspect-ratio:auto;}
.stepper__panel img{width:100%;height:auto;display:block;}
.stepper__panel p{margin:14px 6px 0;color:var(--ink-soft);}
.flowbox{margin-top:36px;}
.flowbox__bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px;}
.flowbox__bar span{margin-right:8px;color:var(--ink-soft);font-size:.95rem;}
.flowbox__btn{font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);background:var(--cream-deep);border:0;border-radius:999px;padding:8px 16px;cursor:pointer;transition:background .2s,color .2s;}
.flowbox__btn.is-on{background:var(--ink);color:#fff;}
.flowbox .tray__in{aspect-ratio:auto;overflow:auto;}
.flowbox svg{display:block;width:100%;height:auto;min-width:900px;}
.flowbox .node,.flowbox .edge{transition:opacity .35s var(--ease);}
.flowbox .is-dim{opacity:.14;}
.anno{position:relative;margin:0;padding:0 0 0;}
.anno__img{display:block;width:100%;height:auto;border-radius:18px;background:#fff;}
.anno__lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.anno__lines path{fill:none;stroke:var(--ink);stroke-opacity:.6;stroke-width:1.5;}
.anno__pin{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--denim);color:#fff;font-size:.72rem;font-weight:700;font-style:normal;display:grid;place-items:center;box-shadow:0 0 0 4px rgba(244,239,232,.9);}
.anno__notes{display:grid;grid-template-columns:repeat(var(--cols,2),1fr);gap:16px;margin-top:56px;padding:0 6px;}
.anno__note{position:relative;font-size:.92rem;line-height:1.4;color:var(--ink);background:rgba(255,255,255,.7);border-radius:14px;padding:12px 14px;}
.anno__note::before{content:attr(data-n);display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--denim);color:#fff;font-size:.7rem;font-weight:700;margin-right:8px;vertical-align:1px;}
.pair--anno .tray__in{padding:18px;}
.ds{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,56px);align-items:start;}
.ds__swatches{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.sw{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;background:#fff;border-radius:16px;padding:10px 12px;}
.sw i{width:52px;height:52px;border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4);}
.sw b{display:block;font-weight:600;font-size:.95rem;}
.sw small{display:block;color:var(--ink-soft);font-size:.8rem;font-variant-numeric:tabular-nums;}
.sw em{display:inline-block;font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.06em;padding:2px 7px;border-radius:999px;background:var(--cream-deep);margin-right:4px;}
.ds__type{background:#fff;border-radius:22px;padding:24px;}
.ds__type .aa{font-family:'Poppins',system-ui,sans-serif;font-weight:600;font-size:clamp(3rem,6vw,5rem);line-height:1;letter-spacing:-.02em;color:#042c2c;}
.ds__type p{margin:10px 0 0;color:var(--ink-soft);font-size:.9rem;}
.ds__ui{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;font-family:'Poppins',system-ui,sans-serif;}
.ds__ui .b1{background:#e76e50;color:#fff;border-radius:8px;padding:9px 16px;font-size:.85rem;font-weight:600;}
.ds__ui .b2{background:#0d8385;color:#fff;border-radius:8px;padding:9px 16px;font-size:.85rem;font-weight:600;}
.ds__ui .b3{background:#f1f5f9;color:#64738b;border-radius:8px;padding:9px 16px;font-size:.85rem;font-weight:600;}
.ds__ui .chip{border:1px solid #0d8385;color:#0d8385;border-radius:999px;padding:6px 12px;font-size:.78rem;}
@media (max-width:860px){.stepper,.ds{grid-template-columns:1fr;} .anno__notes{grid-template-columns:1fr;margin-top:24px;} .anno__lines{display:none;} .ds__swatches{grid-template-columns:1fr;}}
.ds__title{margin:clamp(40px,6vw,72px) 0 20px;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:600;font-size:1.5rem;letter-spacing:-.02em;}
.pair--anno .pair__imgs .tray__in img.anno__img{padding:0;}
.pair--anno .pair__imgs .tray__in{padding:14px;}
.case .did--steps{display:block;}
.stepper__btn > div{min-width:0;}
.stepper__btn span{white-space:normal;}
.flowbox__full{margin-left:auto;background:#fff;}
.flowbox .tray__in:fullscreen{background:var(--cream);display:grid;place-items:center;padding:40px;}
.flowbox .tray__in:fullscreen svg{min-width:0;width:min(100%,1640px);}
.anno__lines path{stroke:var(--denim);stroke-opacity:.9;stroke-width:1.5;}
.anno__lines path.halo{stroke:#fff;stroke-opacity:.9;stroke-width:5;}
@media (max-width:860px){.flowbox__full{display:none;} .flowbox svg{min-width:1100px;}}

.anno__note::before{background:var(--denim);}
.anno__notes{margin-top:44px;}
@media (max-width:860px){.stepper__panels{order:-1;} .stepper{gap:20px;}}
.stepper__panel .tray__in img{max-height:520px;object-fit:contain;background:#fff;}
.screens__grid--4{grid-template-columns:repeat(4,1fr);}
.takeaways{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);align-items:start;}
.takeaways .tray__in{padding:14px;}
.takeaways .anno__img{padding:0;}
.takeaways .anno__notes{margin-top:36px;}
@media (max-width:860px){.screens__grid--4,.takeaways{grid-template-columns:1fr;}}
.takeaways{grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);}
.takeaways .tray__in{padding:10px;}
.takeaways .anno__notes{grid-template-columns:1fr !important;gap:10px;margin-top:28px;}
.takeaways .anno__note{font-size:.86rem;padding:10px 12px;}
.takeaways .tray-caption{font-size:.86rem;}
@media (max-width:1100px){.takeaways{grid-template-columns:1fr 1fr;}}
@media (max-width:860px){.takeaways{grid-template-columns:1fr;} .takeaways .anno{max-width:360px;margin:0 auto;}}
.stepper__panels{position:sticky;top:96px;}
.takeaways .anno__lines{display:none;}
.takeaways .anno__pin{width:24px;height:24px;margin:-12px 0 0 -12px;font-size:.78rem;}
/* scrollable phone screens: a hint chip that fades once the user scrolls */
.tray--scroll{position:relative;}
.tray--scroll::after{content:"Scroll";position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:var(--ink);background:rgba(244,239,232,.92);padding:7px 12px 7px 12px;border-radius:999px;box-shadow:0 6px 18px rgba(30,30,30,.14);pointer-events:none;transition:opacity .3s var(--ease);animation:hint-bob 1.8s ease-in-out infinite;}
.tray--scroll.is-scrolled::after{opacity:0;animation:none;}
@keyframes hint-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-5px)}}
@media (prefers-reduced-motion:reduce){.tray--scroll::after{animation:none;}}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);}
.twocol p{margin:0;max-width:44ch;color:color-mix(in srgb,var(--ink) 82%,var(--ink-soft));}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);}
.ds--slime{grid-template-columns:1fr 1fr 1fr;align-items:stretch;}
.ds__type--slime small{display:block;font-size:.8rem;color:var(--ink-soft);margin-bottom:10px;}
.slime-logo{font-family:'Clash Display',system-ui,sans-serif;font-weight:700;font-size:clamp(3rem,6vw,5rem);color:#11358B;line-height:1;letter-spacing:-.01em;}
.slime-aa{font-family:'Archivo',system-ui,sans-serif;font-weight:600;font-size:clamp(3rem,6vw,5rem);color:#1E1E1E;line-height:1;}
.ds__type--slime p{font-family:'Archivo',system-ui,sans-serif;}
.slime-colors{display:grid;gap:12px;align-content:start;}
.slime-colors div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;background:#fff;border-radius:16px;padding:10px 12px;}
.slime-colors i{grid-row:1/3;width:52px;height:52px;border-radius:50%;}
.slime-colors b{font-weight:600;font-size:.95rem;} .slime-colors small{color:var(--ink-soft);font-size:.8rem;}
.cascade{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.5vw,32px);}
.cascade .tray:nth-child(2n){transform:translateY(40px);}
@media (max-width:860px){.twocol,.trio,.ds--slime,.cascade{grid-template-columns:1fr;} .cascade .tray:nth-child(2n){transform:none;}}
.twocol .display--sm,.case .wrap > .display--sm{margin-bottom:20px;}
.case .wrap > .lede{margin-bottom:28px;}

/* live device duo: laptop + phone shells with video inside */
.duo{position:relative;padding:4% 14% 6% 2%;}
.duo__laptop{position:relative;}
.duo__laptop .lid{background:#1E1E1E;border-radius:22px 22px 6px 6px;padding:2% 2% 2.4%;box-shadow:0 30px 70px rgba(30,30,30,.22);}
.duo__laptop .scr{background:#000;border-radius:10px;overflow:hidden;aspect-ratio:16/10;}
.duo__laptop .scr video,.duo__laptop .scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
.duo__laptop .base{height:18px;margin:0 -3%;background:linear-gradient(#d9d6d1,#bdb9b3);border-radius:0 0 14px 14px;}
.duo__laptop .base::after{content:"";display:block;width:16%;height:6px;margin:0 auto;background:#a9a5a0;border-radius:0 0 6px 6px;}
.duo__phone{position:absolute;right:2%;bottom:0;width:22%;background:#1E1E1E;border-radius:12% / 6%;padding:3.5%;box-shadow:0 30px 70px rgba(30,30,30,.28);}
.duo__phone .scr{background:#000;border-radius:10% / 5%;overflow:hidden;aspect-ratio:9/19.5;}
.duo__phone .scr video,.duo__phone .scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
.case-hero__media .duo{padding:0 12% 4% 0;}
.duo--wide{max-width:1100px;margin:0 auto;}
@media (max-width:860px){.duo{padding:0 16% 2% 0;}}
.case-hero__media .duo{padding:0 14% 6% 0;}
.case-hero__media .duo__phone{width:26%;bottom:-4%;}
.duo--wide .duo__phone{width:20%;right:0;}
.duo__laptop .base{margin:0 -2%;}

/* device duo v2: real frames (her MacBook and iPhone PNGs), video mapped to the measured screen openings */
.duo{padding:0;position:relative;}
.duo__laptop,.duo__phone{background:none;padding:0;box-shadow:none;border-radius:0;}
.duo__laptop{position:relative;width:100%;aspect-ratio:1469/972;}
.duo__laptop .lid,.duo__laptop .base{display:contents;}
.duo__laptop .scr{position:absolute;left:7.56%;top:5.56%;width:85.02%;height:80.35%;border-radius:0;overflow:hidden;background:#000;aspect-ratio:auto;z-index:1;}
.duo__laptop::after{content:"";position:absolute;inset:0;background:url(../assets/devices/macbook.png) center/100% 100% no-repeat;pointer-events:none;z-index:0;}
.duo__laptop .scr video,.duo__laptop .scr img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
.duo__laptop{filter:drop-shadow(0 30px 50px rgba(30,30,30,.25));}
.duo__phone{position:absolute;right:0;bottom:-6%;width:21%;aspect-ratio:759/1543;filter:drop-shadow(0 26px 40px rgba(30,30,30,.3));}
.duo__phone::after{content:"";position:absolute;inset:0;background:url(../assets/devices/iphone.png) center/100% 100% no-repeat;pointer-events:none;z-index:2;}
.duo__phone .scr{position:absolute;left:4.74%;top:1.88%;width:90.38%;height:96.18%;border-radius:12% / 6%;overflow:hidden;background:#000;aspect-ratio:auto;z-index:1;}
.duo__phone .scr video,.duo__phone .scr img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
.case-hero__media .duo,.duo--wide{padding:2% 14% 8% 0;}
.case-hero__media .duo__phone{width:24%;right:-2%;}
.duo--wide .duo__phone{width:19%;right:0;}
@media (max-width:860px){.case-hero__media .duo,.duo--wide{padding:0 12% 6% 0;} .case-hero__media .duo__phone{width:26%;right:0;}}
.case-hero__media .duo,.duo--wide{padding:2% 14% 12% 0;}
.duo__phone{bottom:0;}
.case-bar__cv{background:var(--ink);color:#fff !important;font-weight:600;}
@media (max-width:860px){.case-bar__nav a{padding:7px 9px;} .case-bar__cv{padding:7px 10px !important;}}