/* A single case study, on the paper ground. Title, the live site floating over a band of the
   collection's own imagery, the facts, then one feature per section with the running pages. */
body.cp{
  --cp-ink:var(--fo-ink);--cp-faint:var(--fo-muted-2);--cp-line:var(--fo-edge);--cp-cell:var(--fo-surface);
  background:var(--fo-bg);color:var(--fo-ink)}
.cp .wrap{max-width:1440px}

/* Title */
.cp-head{padding-top:62px;padding-bottom:60px}
.cp-head .crumb{padding:0;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-faint)}
.cp-head .crumb a:hover{color:var(--cp-ink)}
.cp-head h1{font-size:clamp(46px,7.2vw,112px);font-weight:600;letter-spacing:-.045em;line-height:.98;margin:30px 0 26px;max-width:14ch;color:var(--cp-ink)}
.cp-head p{font-size:clamp(19px,1.9vw,27px);line-height:1.35;letter-spacing:-.012em;max-width:30ch;color:var(--muted)}

/* The live site over a band of imagery */
.cp-stage{position:relative;overflow:hidden;padding:clamp(40px,5vw,72px) 0;isolation:isolate}
.cp-stage>img.bg{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;z-index:-2;will-change:transform}
.cp-stage::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,17,25,.12),rgba(15,17,25,.34))}
.cp-stage .frame{max-width:1120px;margin:0 auto}

/* Browser frame. Square, like everything else on Folium. */
.frame{background:var(--fo-paper);border:1px solid var(--fo-edge-strong);box-shadow:0 50px 90px -56px rgba(20,30,80,.42)}
.frame .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--fo-surface);border-bottom:1px solid var(--fo-edge)}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:var(--fo-edge-strong);flex:none}
.frame .bar span{margin-left:10px;padding:5px 12px;min-width:0;max-width:380px;flex:0 1 auto;background:var(--fo-paper);border:1px solid var(--fo-edge);
  font-size:11.5px;color:var(--fo-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame img,.frame video{display:block;width:100%;height:auto;background:var(--fo-surface)}
.cp-stage .frame{border-color:rgba(255,255,255,.5);box-shadow:0 60px 110px -50px rgba(0,0,0,.7)}

/* Intro and the facts panel */
.cp-intro{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);padding:110px 0 0}
.cp-intro .big{font-size:clamp(24px,2.5vw,36px);line-height:1.25;letter-spacing:-.02em;color:var(--cp-ink);font-weight:500}
.cp-intro .body{margin-top:28px;font-size:17px;line-height:1.7;color:var(--muted);max-width:60ch}
.cp-intro .body+.body{margin-top:14px}
.cp-meta dt{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-faint);margin-bottom:9px}
.cp-meta dd{margin:0 0 30px;font-size:16px;line-height:1.7;color:var(--cp-ink)}
.cp-meta ul{list-style:none}
.pill{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border:1px solid var(--fo-brand-line);color:var(--cp-ink);text-decoration:none;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:background .2s ease,border-color .2s ease}
.pill:hover{background:var(--fo-brand);border-color:var(--fo-brand);color:var(--fo-ink-inverse)}

/* Numbers and lists in a ruled grid */
.cp-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-faint);margin:100px 0 18px}
.cp-label em{margin-left:12px;color:var(--fo-faint,#b6b9c9)}
.cells{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--cp-line);border-left:1px solid var(--cp-line)}
.cells>*{border-right:1px solid var(--cp-line);border-bottom:1px solid var(--cp-line);background:var(--cp-cell)}
.cells.num>div{padding:34px 30px 30px}
.cells.num b{display:block;font-size:clamp(38px,4.4vw,64px);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--cp-ink)}
.cells.num small{display:block;margin-top:18px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-faint)}
.cells.num span{display:block;margin-top:8px;font-size:14px;line-height:1.55;color:var(--muted)}
.cells.num.two{grid-template-columns:repeat(2,1fr)}
.cells.list{list-style:none;grid-template-columns:repeat(3,1fr)}
.cells.list.two{grid-template-columns:repeat(2,1fr)}
.cells.list li{display:flex;align-items:center;gap:14px;padding:22px 24px;font-size:14.5px;line-height:1.5;color:var(--cp-ink)}
.cells.list li::before{content:'';flex:none;width:8px;height:8px;background:var(--fo-brand)}

/* Feature sections */
.feat{padding-top:140px}
.feat .k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-faint);margin-bottom:18px}
.feat h2{font-size:clamp(30px,3.6vw,54px);font-weight:500;letter-spacing:-.035em;line-height:1.06;max-width:17ch;color:var(--cp-ink)}
.feat p{margin-top:20px;font-size:17px;line-height:1.7;color:var(--muted);max-width:58ch}
.feat .frame,.feat .shot{margin-top:52px}
.feat.centre{text-align:center}
.feat.centre h2,.feat.centre p{margin-left:auto;margin-right:auto}
.feat.centre .frame{max-width:1120px;margin-left:auto;margin-right:auto;text-align:left}

/* Text beside a phone */
.feat.side{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:center}
.phone{justify-self:center;width:min(300px,100%);padding:9px;background:var(--fo-night);border-radius:40px;box-shadow:0 50px 90px -46px rgba(20,30,80,.5)}
.phone img{display:block;width:100%;height:auto;border-radius:30px}

/* Plates in one justified row at their own proportions (see cases.css for the --sum rule) */
.plates{display:flex;gap:12px;margin-top:52px;align-items:flex-start;max-width:calc(var(--sum,4) * 400px)}
.plates figure{flex:var(--ar) 1 0;min-width:0;margin:0}
.plates img{display:block;width:100%;aspect-ratio:var(--ar);height:auto;background:var(--fo-scan)}
.plates figcaption{margin-top:10px;font-size:12px;line-height:1.45;color:var(--cp-faint)}

/* The quote, across a band of imagery */
.cp-quote{position:relative;margin-top:150px;padding:clamp(90px,11vw,170px) 0;overflow:hidden;isolation:isolate;text-align:center;
  border-top:1px solid var(--cp-line);border-bottom:1px solid var(--cp-line)}
.cp-quote>img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;z-index:-2;opacity:.35;filter:grayscale(.3);will-change:transform}
.cp-quote::after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,rgba(255,255,255,.7),rgba(255,255,255,.96) 75%)}
.cp-quote blockquote{max-width:24ch;margin:0 auto;font-size:clamp(26px,3.3vw,48px);line-height:1.2;letter-spacing:-.025em;font-weight:500;color:var(--cp-ink)}
.cp-quote cite{display:block;margin-top:30px;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fo-muted)}

/* Next case */
.cp-next{padding-top:120px}
.cp-next h2{font-size:clamp(28px,3vw,42px);font-weight:500;letter-spacing:-.03em;color:var(--cp-ink)}
.cp-next a.card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:32px;text-decoration:none;color:inherit;
  border:1px solid var(--cp-line);background:var(--cp-cell);transition:border-color .25s ease}
.cp-next a.card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.cp-next a.card div{padding:30px 40px 30px 0}
.cp-next a.card small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-faint)}
.cp-next a.card b{display:block;margin-top:12px;font-size:clamp(26px,2.8vw,40px);font-weight:500;letter-spacing:-.03em;color:var(--cp-ink)}
.cp-next a.card span{display:block;margin-top:12px;font-size:16px;line-height:1.6;color:var(--muted)}
.cp-next a.card em{display:inline-block;margin-top:22px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fo-brand)}
.cp-next a.card:hover{border-color:var(--fo-brand-line)}

/* The shared CTA keeps its own dark band, as on every other page */
.cp .cta{margin-top:140px}

/* Entrances */
.cp .rise{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.cp .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cp .rise{opacity:1;transform:none;transition:none}}

@media (max-width:1000px){
  .cells{grid-template-columns:1fr 1fr}
  .cells.list{grid-template-columns:1fr 1fr}
  .cp-intro{grid-template-columns:1fr;gap:44px}
  .feat.side{grid-template-columns:1fr;gap:44px}
  .cp-next a.card{grid-template-columns:1fr;gap:0}
  .cp-next a.card div{padding:26px 26px 30px}
}
@media (max-width:640px){
  .cp .wrap{padding:0 16px}
  .cp-head{padding-top:40px;padding-bottom:40px}
  .cp-head h1{margin:22px 0 18px}
  .cp-stage{padding:26px 16px}
  .cp-intro{padding-top:72px}
  .cells.num>div{padding:24px 18px}
  .cells.list,.cells.list.two{grid-template-columns:1fr}
  .cp-label{margin-top:72px}
  .feat{padding-top:96px}
  .feat .frame,.feat .shot{margin-top:34px}
  .frame .bar span{max-width:60%}
  .plates{gap:6px;margin-top:34px}
  .plates figure:nth-child(n+4){display:none}
  .plates figcaption{display:none}
  .cp-quote{margin-top:100px}
  .cp .cta{margin-top:100px}
}