/* Case study pages */

 /* ---------- case hero ---------- */
.c-hero{background:var(--night);color:var(--thread);padding:calc(var(--nav-h) + clamp(56px,9vw,120px)) 0 0;position:relative}
.c-hero::before{content:"";position:absolute;inset:0;background:url(../img/hero-ending.jpg) 50% 50%/cover no-repeat;opacity:.12;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%);pointer-events:none}
.c-hero .wrap{position:relative}
.c-back{display:flex;width:fit-content;align-items:center;gap:10px;color:var(--thread-dim);text-decoration:none;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:clamp(28px,4vw,48px);transition:color .3s,gap .4s var(--ease-out)}
.c-back:hover{color:var(--thread);gap:14px}
.c-hero .kicker{color:var(--thread-dim)}
.c-hero h1{font-size:clamp(40px,5.6vw,92px);line-height:.99;letter-spacing:-.034em;color:#F3EEE5;max-width:17ch;margin-top:22px}
.c-meta{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 32px;margin:clamp(40px,5vw,64px) 0 clamp(48px,6vw,80px);padding-top:28px;border-top:1px solid rgba(232,223,207,.18)}
@media (max-width:1180px){.c-meta{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.c-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
.c-meta dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--thread-dim);margin-bottom:8px}
.c-meta dd{margin:0;color:var(--thread);font-size:15px;line-height:1.45}
.c-cover{position:relative;z-index:2;margin-bottom:calc(-1 * clamp(80px,12vw,200px))}
.c-cover__frame{border-radius:20px;overflow:hidden;background:var(--night-2);box-shadow:0 50px 100px -50px rgba(0,0,0,.8);transform:translateY(calc((var(--p,0) - .5)*-18px))}
.c-cover__frame img{width:100%;height:auto;display:block}

/* ---------- 30 second summary ---------- */
.c-summary{padding:calc(clamp(80px,12vw,200px) + clamp(56px,7vw,100px)) 0 clamp(64px,8vw,120px)}
.c-tldr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:28px}
.c-tldr > div{border-top:1px solid var(--line-strong);padding-top:18px}
.c-tldr h2{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.c-tldr p{font-family:var(--display);font-size:clamp(19px,1.5vw,24px);line-height:1.3;letter-spacing:-.012em;color:var(--text-primary);margin:0}
.c-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(48px,6vw,88px)}
.c-metric b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(34px,3.6vw,58px);line-height:1;letter-spacing:-.035em;color:var(--accent)}
.c-metric span{display:block;margin-top:10px;color:var(--text-secondary);font-size:15px;max-width:28ch}
@media (max-width:860px){.c-tldr{grid-template-columns:1fr}}

/* ---------- body: side index + content ---------- */
.c-body{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:start;padding-bottom:clamp(80px,10vw,140px)}
.c-index{position:sticky;top:calc(var(--nav-h) + 28px);align-self:start}
.c-index ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:1px solid var(--line)}
.c-index a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;text-decoration:none;color:var(--text-tertiary);font-size:14px;line-height:1.3;transition:color .3s,border-color .3s}
.c-index a:hover{color:var(--text-primary)}
.c-index a[aria-current="true"]{color:var(--text-primary);border-left-color:var(--accent)}
.c-index__label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);margin:0 0 14px}
.c-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:120;background:var(--accent);transform-origin:left;transform:scaleX(var(--read,0))}
@media (max-width:1000px){.c-body{grid-template-columns:1fr}.c-index{display:none}}

.c-content{min-width:0}
.c-sec{padding-top:clamp(56px,7vw,104px);scroll-margin-top:calc(var(--nav-h) + 12px)}
.c-sec:first-child{padding-top:0}
.c-sec > .kicker{margin-bottom:18px}
.c-sec h2{font-size:clamp(30px,3.2vw,50px);line-height:1.04;letter-spacing:-.028em;max-width:22ch;margin-bottom:26px}
.c-sec p{font-size:clamp(17px,.6vw + 12px,19px);line-height:1.65;color:var(--text-secondary);max-width:66ch}
.c-sec p strong{color:var(--text-primary);font-weight:500}

/* quotes and callouts */
.c-quote{margin:36px 0;padding:6px 0 6px 26px;border-left:2px solid var(--accent);max-width:62ch}
.c-quote p{font-family:var(--display);font-size:clamp(22px,2vw,30px);line-height:1.22;letter-spacing:-.018em;color:var(--text-primary);margin:0}
.c-quote cite{display:block;margin-top:14px;font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary)}
.c-call{margin:40px 0;font-family:var(--display);font-size:clamp(26px,2.8vw,42px);line-height:1.1;letter-spacing:-.025em;color:var(--text-primary);max-width:24ch}
.c-call::before{content:"";display:block;width:44px;height:2px;background:var(--accent);margin-bottom:22px}

/* figures: shown whole, scaled to fit the screen; very wide ones scroll sideways past the page edge */
.c-fig{margin:40px 0}
.c-fig__frame{border-radius:16px;background:var(--panel-2);border:1px solid var(--line);position:relative;overflow:hidden}
.c-fit{display:flex;justify-content:center;align-items:center;padding:0}
.c-fit__box{position:relative;flex:none;overflow:hidden}
.c-fit__box > iframe{position:absolute;left:0;top:0;max-width:none;border:0;background:transparent;transform-origin:0 0;transform:scale(var(--s,1))}
.c-fit--img .c-fit__box > img{display:block;width:100%;height:100%}
/* bleed: the frame runs past the right margin to the edge of the screen and scrolls sideways, with no scrollbar */
.c-fig__frame.is-bleed{border-right:0;border-radius:16px 0 0 16px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;overscroll-behavior-x:contain}
.c-fig__frame.is-bleed::-webkit-scrollbar{display:none;width:0;height:0}
.c-fig__frame.is-bleed .c-fit{justify-content:flex-start;padding-right:var(--gutter)}
.c-fig__frame.is-dragging{cursor:grabbing}
.c-fig__frame.is-dragging iframe{pointer-events:none}
.c-drag{position:absolute;left:0;top:0;bottom:0;z-index:2}
.c-bleed-hint{position:absolute;right:calc(var(--gutter) + 12px);bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(12,20,26,.82);color:var(--thread);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;pointer-events:none;transition:opacity .5s var(--ease-out)}
.c-bleed-hint i{display:inline-block;width:18px;height:1px;background:currentColor;position:relative;animation:hint 1.8s var(--ease-io) infinite}
.c-bleed-hint i::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
@keyframes hint{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.c-fig__frame.is-scrolled .c-bleed-hint{opacity:0}
.c-fig figcaption{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-top:12px;font-size:14px;color:var(--text-tertiary)}
.c-full{flex:none;background:none;border:0;padding:6px 0;color:var(--text-secondary);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.c-full::after{content:"";width:9px;height:9px;border:1.3px solid currentColor;border-radius:2px}
.c-full:hover{color:var(--accent)}

/* carousel: one stage of fixed height, every slide whole, crossfade with a short drift */
.c-car{margin:40px 0;outline:none}
.c-car:focus-visible .c-car__stage{outline:2px solid var(--accent);outline-offset:4px}
.c-car__stage{position:relative;border-radius:18px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden;height:var(--stage-h,520px);transition:height .5s var(--ease-out)}
.c-slide{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateX(calc(var(--dir,1)*40px)) scale(.985);transition:opacity .6s var(--ease-out),transform .8s var(--ease-out),visibility 0s linear .8s}
.c-slide.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease-out),transform .8s var(--ease-out),visibility 0s}
.c-slide.is-leaving{transform:translateX(calc(var(--dir,1)*-40px)) scale(.985)}
.c-slide .c-fit{flex:1;padding:var(--pad,24px)}
.c-slide figcaption{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:0 24px 16px;font-size:14px;color:var(--text-tertiary)}
.c-car__bar{display:flex;align-items:center;gap:16px;margin-top:14px}
.c-car__dots{display:flex;gap:8px;flex:1}
.c-dot{width:28px;height:44px;border:0;background:none;cursor:pointer;position:relative;padding:0}
.c-dot::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--line-strong);transition:background-color .3s}
.c-dot.is-active::after{background:var(--accent)}
.c-car__thumbs{display:flex;gap:10px;flex:1;overflow-x:auto;scrollbar-width:none}
.c-car__thumbs::-webkit-scrollbar{display:none}
.c-thumb{flex:none;width:92px;height:62px;border-radius:10px;border:1.5px solid transparent;background:var(--panel-2);padding:4px;cursor:pointer;opacity:.55;transition:opacity .3s,border-color .3s,transform .4s var(--ease-out)}
.c-thumb img{width:100%;height:100%;object-fit:contain}
.c-thumb:hover{opacity:.9}
.c-thumb.is-active{opacity:1;border-color:var(--accent);transform:translateY(-2px)}
.c-car__count{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--text-tertiary);white-space:nowrap}
.c-car__btns{display:flex;gap:8px}
.c-car__btns button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;cursor:pointer;display:grid;place-items:center;transition:background-color .3s,border-color .3s}
.c-car__btns button:hover{background:var(--panel);border-color:var(--text-primary)}
.c-car__btns button:disabled{opacity:.35;cursor:default}

/* decision items */
.c-items{list-style:none;padding:0;margin:36px 0;display:grid;grid-template-columns:minmax(0,1fr);gap:0;counter-reset:it}
.c-item,.c-car,.c-fig{min-width:0}
.c-item{border-top:1px solid var(--line);padding:30px 0 10px}
.c-item:last-child{border-bottom:1px solid var(--line)}
.c-item h3{font-size:clamp(22px,1.8vw,28px);letter-spacing:-.02em;margin-bottom:12px;display:flex;gap:14px;align-items:baseline}
.c-item h3 span{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--accent);letter-spacing:.1em}
.c-item > p{margin-bottom:12px}

/* plain list */
.c-list{list-style:none;padding:0;margin:28px 0;display:grid;gap:10px;max-width:66ch;counter-reset:li}
.c-list li{display:grid;grid-template-columns:42px 1fr;gap:12px;color:var(--text-secondary);font-size:17px;line-height:1.5;counter-increment:li}
.c-list li::before{content:counter(li,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--accent);padding-top:4px}

/* stat strip */
.c-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px 32px;margin:36px 0;padding:28px 0;border-block:1px solid var(--line);max-width:1080px}
.c-stats b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(26px,2.4vw,38px);letter-spacing:-.03em;color:var(--accent);line-height:1.05}
.c-stats span{display:block;margin-top:6px;font-size:14px;color:var(--text-secondary)}

/* impact columns */
.c-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px clamp(24px,3vw,44px);margin:36px 0;max-width:1080px}
.c-cols > div{border-top:2px solid var(--text-primary);padding-top:18px}
.c-cols h3{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-primary);margin-bottom:12px}
.c-cols p{font-size:16px!important;line-height:1.6}

/* method table */
.c-table{width:100%;max-width:1080px;border-collapse:collapse;margin:32px 0;font-size:15px}
.c-table th{text-align:left;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);padding:0 0 12px;border-bottom:1px solid var(--line-strong)}
.c-table td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text-secondary)}
.c-table td:first-child{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);width:150px;padding-top:17px}
@media (max-width:600px){.c-table td:first-child{width:96px}}

/* ---------- takeaway ---------- */
.c-take{background:var(--night);color:var(--thread);padding:clamp(100px,13vw,190px) 0;position:relative;overflow:hidden}
.c-take::before{content:"";position:absolute;inset:0;background:url(../img/hero-ending.jpg) 50% 50%/cover no-repeat;opacity:.14}
.c-take .wrap{position:relative;max-width:1080px}
.c-take .kicker{color:var(--thread-dim)}
.c-take h2{font-size:clamp(34px,4.4vw,70px);line-height:1.02;letter-spacing:-.032em;color:#F3EEE5;margin:24px 0 36px;max-width:20ch}
.c-take p{color:var(--thread);font-size:clamp(17px,.7vw + 12px,20px);line-height:1.65;max-width:62ch;opacity:.92}

/* ---------- next case: a full-width preview, image shown whole ---------- */
.c-next{padding:clamp(90px,11vw,170px) 0 clamp(70px,8vw,120px)}
.c-next__link{display:block;text-decoration:none;color:inherit}
.c-next__head{display:grid;gap:22px;margin-bottom:clamp(32px,4vw,56px)}
.c-next__row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap}
.c-next__title{font-family:var(--display);font-weight:500;font-size:clamp(36px,5vw,84px);line-height:1;letter-spacing:-.035em;margin:0;max-width:18ch;text-wrap:balance}
.c-next__go{display:inline-flex;align-items:center;gap:16px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary)}
.c-next__arrow{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--sans);font-size:22px;letter-spacing:0;transition:transform .6s var(--ease-out),background-color .3s}
.c-next__link:hover .c-next__arrow{transform:translateX(8px) rotate(-12deg);background:var(--accent-hover)}
.c-next__media{border-radius:24px;overflow:hidden;background:var(--night-2);box-shadow:0 60px 120px -60px rgba(12,20,26,.55);transform:translateY(calc((var(--p,0.5) - .5)*-26px));transition:box-shadow .6s var(--ease-out)}
.c-next__media img{width:100%;height:auto;display:block;transition:transform 1.4s var(--ease-out)}
.c-next__link:hover .c-next__media{box-shadow:0 70px 140px -60px rgba(12,20,26,.7)}
.c-next__link:hover .c-next__media img{transform:scale(1.015)}

/* ---------- short contact band ---------- */
.c-cta{background:var(--panel-2);border-top:1px solid var(--line);padding:clamp(64px,8vw,110px) 0}
.c-cta .wrap{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between}
.c-cta h2{font-size:clamp(28px,3vw,46px);letter-spacing:-.028em;max-width:18ch}
.c-cta__actions{display:flex;flex-wrap:wrap;gap:12px}

/* full-size viewer: an overlay above the page, minimised with one click */
.lightbox,.viewer{width:min(96vw,1680px);max-width:none;max-height:92vh;padding:0;border:0;border-radius:18px;background:var(--panel-2);overflow:hidden;opacity:0;transform:translateY(12px) scale(.97);transition:opacity .35s var(--ease-out),transform .5s var(--ease-out);display:none}
.lightbox[open],.viewer[open]{display:flex;flex-direction:column}
.lightbox.open,.viewer.open{opacity:1;transform:none}
.lightbox::backdrop,.viewer::backdrop{background:rgba(8,13,17,.84);backdrop-filter:blur(6px)}
.viewer__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 12px 12px 22px;border-bottom:1px solid var(--line)}
.viewer__title{font-size:14px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer__close{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--night);color:var(--thread);cursor:pointer;font-weight:500}
.viewer__body{overflow:auto;flex:1;display:grid;place-items:start center;padding:20px;scrollbar-width:none}
.viewer__body::-webkit-scrollbar{display:none}
.viewer__box{position:relative;overflow:hidden}
.viewer__box iframe{position:absolute;left:0;top:0;transform-origin:0 0}
.viewer__body img{max-width:100%;height:auto;border-radius:10px}
.viewer__body iframe{border:0;background:transparent;display:block;max-width:none}
.lightbox img{width:100%;height:auto}
.lightbox__close{position:sticky;top:12px;float:right;margin:12px 12px -56px 0;z-index:2;min-height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--night);color:var(--thread);cursor:pointer;font-weight:500}

@media (prefers-reduced-motion:reduce){
  .c-cover__frame,.c-next__media,.c-next__media img,.c-slide{transform:none!important}
}

/* phone recording placed inside the onboarding mockup (positions match the source image) */
.c-phone{position:absolute;top:9.25%;left:40.13%;width:22.44%;height:82%;border-radius:13%/6.33%;overflow:hidden;background:#fff;pointer-events:none}
.c-phone video{width:100%;height:100%;object-fit:cover}
.c-cta__actions{align-items:center}
.c-cta__mail{font-family:var(--display);font-size:clamp(18px,1.6vw,24px);letter-spacing:-.015em;color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--line-strong);margin-right:12px;transition:border-color .3s}
.c-cta__mail:hover{border-color:var(--accent)}
.c-fit--img .c-fit__box{cursor:zoom-in}
.c-fig--phone .c-fit__box{cursor:zoom-in}

/* ---------- round 3: images sit straight on the canvas ---------- */
.c-fig__frame{background:transparent;border:0;border-radius:0}
.c-fig--img .c-fit{justify-content:center}
.c-fig--img .c-fit__box{border-radius:14px}
/* diagrams keep a quiet panel with room above and below, so every board breathes the same way */
.c-fig--diagram .c-fig__frame{background:var(--panel-2);border:1px solid var(--line);border-radius:18px}
.c-fig--diagram .c-fit{padding:clamp(22px,3vw,40px) 0}
.c-fig--diagram .c-fig__frame.is-bleed{border-radius:18px 0 0 18px;border-right:0}
.c-fig--diagram .c-fig__frame.is-bleed .c-fit{padding-left:clamp(22px,3vw,40px)}

/* ---------- carousels: no frame, content centred and as tall as the screen allows ---------- */
.c-car__stage{background:transparent;border:0;border-radius:0;overflow:visible}
.c-slide{align-items:center;justify-content:center}
.c-slide .c-fit{flex:none;padding:0;width:100%}
.c-slide .c-fit__box{border-radius:12px;overflow:hidden}
.c-car__stage{overflow:hidden}
.c-car__bar{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.c-car__cap{margin:0!important;flex:1 1 260px;font-size:14px!important;line-height:1.45!important;color:var(--text-tertiary)!important;min-width:0}
.c-car__dots{flex:none;display:flex;gap:6px}
.c-car__thumbs{margin-top:16px}
.c-car__bar .c-full{margin-left:4px}

/* viewer: image and caption, sized to the screen */
.viewer__body{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px}
.viewer__body img{max-width:none;border-radius:10px;display:block}
.viewer__cap{margin:0;font-size:14px;color:var(--text-secondary);text-align:center;max-width:80ch}
.viewer{height:92vh}
.viewer__body{min-height:0}