/* ==========================================================================
   Phase — case studies (work/*)
   The flow system (css/flow.css) in the poster theme (css/home.css: the
   palette, the sticker hero, the manifesto and the close; js/home.js). The
   client's own colours come in as custom properties on <body>:
     --brand     the disc + the manifesto's page (a solid colour)
     --brand-fg  text on --brand
     --brand-hi  the manifesto's accent
   Sections: the live site (js/work.js renders the scrolling browser frame
   into #caseStage), project details, the look + palette, a horizontal run
   of screens, the choices that carry the page (stacked cards) and the
   process (a rail).
   ========================================================================== */

body.case{--hm-ground:var(--brand)}

/* ==========================================================================
   HERO + MANIFESTO
   ========================================================================== */
.case .hm-sun{--s:clamp(250px,28vw,480px);left:66%;top:52%}
.case .hm-hero h1{font-size:clamp(3.4rem,11vw,11rem);letter-spacing:-.055em}
.case .hm-hero__sub{max-width:32em;color:rgba(10,10,10,.8)}
.case .hm-manifesto{
  color:var(--brand-fg,#fff);
  --fl-ink:var(--brand-fg,#fff);
  --fl-faint:color-mix(in srgb,var(--brand-fg,#fff) 62%,transparent);
  --fl-dim:color-mix(in srgb,var(--brand-fg,#fff) 80%,transparent);
}
.case .hm-manifesto .fl-manifesto__text{max-width:26ch}
.case .hm-manifesto .fl-lit-accent .fl-w,
.case .hm-manifesto .fl-lit-accent:not(:has(.fl-w)){color:var(--brand-hi,#0a0a0a)}

/* ==========================================================================
   THE LIVE SITE
   ========================================================================== */
.cs-site{padding:clamp(100px,11vw,160px) 0 clamp(60px,7vw,100px)}
.cs-site__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 32px;margin-bottom:clamp(22px,2.6vw,36px)}
.cs-site__head .fl-label{margin:0}
.cs-live{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 18px 12px 14px;
  border-radius:var(--radius-pill);
  background:#0a0a0a;
  color:#fff;
  font-weight:600;
  font-size:.95rem;
  box-shadow:0 14px 30px -16px rgba(10,10,10,.6);
}
.cs-live i{width:9px;height:9px;border-radius:50%;background:var(--p-green);box-shadow:0 0 0 4px rgba(1,186,78,.25)}
.cs-live em{font-style:normal;font-family:var(--fl-mono);font-size:.72rem;letter-spacing:.06em;color:rgba(255,255,255,.6)}
.cs-live svg{width:15px;height:15px;transition:transform .35s var(--fl-ease)}
.cs-live:hover svg{transform:translate(2px,-2px)}
.case .case-stage{margin:0}
.case .case-stage .stage,
.case .project-hero-media{border-radius:28px}

/* ==========================================================================
   PROJECT DETAILS
   ========================================================================== */
.cs-details{padding:clamp(60px,7vw,100px) 0 clamp(90px,10vw,140px)}
.cs-details__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.cs-detail{
  overflow:hidden;
  border-radius:24px;
  background:var(--fl-surface);
  border:1px solid var(--fl-line);
  box-shadow:0 30px 60px -48px rgba(60,40,10,.5);
}
.cs-detail h3{
  padding:22px 24px 18px;
  font-family:var(--fl-mono);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg);
  background:var(--c);
}
.cs-detail ul{display:flex;flex-direction:column;gap:12px;padding:22px 24px 26px}
.cs-detail li{position:relative;padding-left:20px;line-height:1.5}
.cs-detail li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--c)}

/* ==========================================================================
   THE LOOK + PALETTE
   ========================================================================== */
.cs-look{padding:clamp(90px,10vw,140px) 0;background:var(--fl-bg-2)}
.cs-look__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,100px);align-items:center}
.cs-look .fl-h2{max-width:13ch}
.cs-look__copy{margin-top:24px}
.cs-look__copy p{max-width:52ch;margin-bottom:16px;font-size:1.05rem;line-height:1.65;color:var(--fl-dim)}
.cs-palette__label{margin-bottom:14px;font-family:var(--fl-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fl-faint)}
/* the palette as fat round stickers */
.cs-swatches{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}
.cs-swatch{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:2px;
  aspect-ratio:1;
  padding:clamp(18px,2vw,26px);
  border-radius:50%;
  color:var(--fg);
  background:var(--c);
  box-shadow:0 24px 40px -24px rgba(10,10,10,.5);
  transform:rotate(var(--rot,0deg));
  text-align:center;
  align-items:center;
  justify-content:center;
}
.cs-swatch span{font-weight:600;font-size:clamp(.95rem,1.3vw,1.15rem);letter-spacing:-.01em}
.cs-swatch b{font-family:var(--fl-mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;opacity:.75}
.cs-swatch--light{box-shadow:inset 0 0 0 2px rgba(10,10,10,.12),0 24px 40px -24px rgba(10,10,10,.5)}

/* ==========================================================================
   INSIDE THE PRODUCT — a run of screens
   ========================================================================== */
.cs-inside{background:var(--fl-bg)}
.cs-shot{
  flex:none;
  width:min(720px,80vw);
  align-self:center;
  margin:0;
  overflow:hidden;
  border-radius:24px;
  background:#0b0b10;
  box-shadow:0 40px 80px -46px rgba(10,10,10,.75);
  scroll-snap-align:center;
}
.cs-shot img{display:block;width:100%;height:auto}
.cs-shot--device{width:min(860px,84vw);overflow:visible;background:none;box-shadow:none;padding:0 40px 30px 0}
.cs-inside .fl-run__track{align-items:center}
/* the device stage, split: the browser on its own, then the phone on its
   own, on the same glass */
.cs-stage--desktop{--fw:70%;--ft:7%}
.cs-stage--phone .stage__phone{right:auto;bottom:auto;left:50%;top:50%;width:21.5%;translate:-50% -50%}

/* ==========================================================================
   WHAT MAKES IT WORK + HOW WE GOT THERE
   ========================================================================== */
.cs-works{background:var(--fl-bg-2)}
.cs-process{padding:clamp(110px,12vw,170px) 0 clamp(90px,10vw,140px)}
.cs-rail__n{display:block;margin-bottom:10px;font-family:var(--fl-mono);font-size:.78rem;letter-spacing:.14em;color:var(--brand)}
.cs-rail h3{margin-bottom:8px;font-size:1.15rem;font-weight:600;letter-spacing:-.02em}
.cs-rail p{font-size:.92rem;line-height:1.5;color:var(--fl-dim)}
.cs-rail > li:not(.fl-rail__line)::before{border-color:var(--brand)}

.cs-cta .fl-cta__title{max-width:12ch;font-size:clamp(2.8rem,7.4vw,7rem)}

/* ==========================================================================
   THE RESULTS (local-business case studies) — the numbers on the client's
   colour, the revenue chart (js/proof-charts.js) on a white card, then the
   client's own words on the pink poster quote (css/home.css)
   ========================================================================== */
.cs-results{padding:clamp(110px,12vw,170px) 0;background:var(--fl-bg);overflow-x:clip}
.cs-result{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
  padding:clamp(28px,4.4vw,64px);
  border-radius:40px;
  color:var(--brand-fg,#fff);
  background:var(--brand);
  box-shadow:0 50px 90px -60px rgba(10,10,10,.55);
}
.cs-result__sticker{
  position:absolute;
  right:clamp(-30px,-2vw,-12px);
  top:clamp(-50px,-3.6vw,-26px);
  z-index:2;
  width:clamp(80px,8.4vw,124px);
  height:auto;
  transform:rotate(12deg);
  filter:drop-shadow(0 16px 20px rgba(10,10,10,.22));
}
.cs-result p{color:inherit}
.cs-result__k{font-family:var(--fl-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.cs-result__t{max-width:18ch;margin-top:14px;font-size:clamp(1.7rem,3vw,2.7rem);font-weight:600;letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
.cs-result__stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:clamp(26px,3vw,40px);
  padding-top:24px;
  border-top:2px solid color-mix(in srgb,var(--brand-fg,#fff) 30%,transparent);
}
.cs-result__stats b{display:block;font-size:clamp(2rem,3.6vw,3.3rem);font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--brand-hi,inherit)}
.cs-result__stats span{display:block;margin-top:8px;font-size:.9rem;line-height:1.35;opacity:.85}
.cs-result__chart .cs-chart{
  margin:0;
  color:#0a0a0a;
  border:0;
  border-radius:28px;
  background:var(--fl-surface);
  box-shadow:0 40px 70px -40px rgba(10,10,10,.6);
  transform:rotate(1.5deg);
}
.cs-result__chart .cs-chart__eyebrow{font-family:var(--fl-mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.cs-result__chart .cs-chart__line{stroke-width:4.5}
.cs-result__chart .cs-chart__num{font-size:clamp(2.4rem,3.6vw,3.2rem);font-weight:600;letter-spacing:-.05em}
.cs-result__chart .cs-chart__hit{background:var(--p-red);border-color:#0a0a0a;box-shadow:0 0 0 5px rgba(255,77,54,.25)}
.cs-result__chart .cs-chart__hit::before,
.cs-result__chart .cs-chart__hit::after{border-color:var(--p-red)}
.cs-result__chart .cs-chart__callout{border:2px solid #0a0a0a;background:#fff;box-shadow:0 14px 28px -12px rgba(10,10,10,.45)}
.cs-result__chart .cs-chart__callout::after{border-color:#0a0a0a;border-width:0 2px 2px 0;border-style:solid}
.cs-result__chart .cs-chart__callout-icon{color:#0a0a0a;background:var(--p-yellow);box-shadow:none}
.cs-quote{margin-top:clamp(90px,10vw,140px)}
.cs-quote figcaption img{object-fit:cover;padding:0}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .cs-rail{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .cs-details__grid{grid-template-columns:1fr}
  .cs-result{grid-template-columns:minmax(0,1fr);border-radius:32px}
  .cs-look__grid{grid-template-columns:1fr}
  .cs-swatches{max-width:420px}
  .cs-shot--device{padding:0 20px 20px 0}
}
@media (max-width:640px){
  .cs-rail{grid-template-columns:1fr}
  .cs-result__stats{gap:12px}
  .cs-result__stats b{font-size:1.7rem}
  .cs-result__stats span{font-size:.8rem}
  .cs-result__chart .cs-chart__callout{display:none}
}