/* ==========================================================================
   SKYBOUND SCALING - case.css
   Case-study pages (work/). Loads after main.css and composes the same
   design system: paper atmosphere, ink/blue/orange, Archivo display type,
   glass panels, and the round-dot particle language as a contained visual -
   no background particles.

   TABLE OF CONTENTS
   ------------------------------------------------------------------
   01  Case hero
   02  Facts strip
   03  Feature: stat band + particle visual
   04  Scope rows
   05  Story blocks
   06  Next case
   07  Responsive
   08  Reduced motion
   09  Brand book (Brand DNA)
   ------------------------------------------------------------------ */

/* ============ 01 CASE HERO ============ */
.case-hero{
  padding:calc(var(--header-h) + clamp(34px,5.5vh,68px)) var(--pad) clamp(34px,5vh,58px);
}
.case-eyebrow{
  display:flex;align-items:center;
  color:rgba(10,10,12,.62);
  letter-spacing:.22em;
  margin-bottom:clamp(22px,3.4vh,38px);
}
.case-display{
  margin:0;
  font-weight:900;font-variation-settings:'wdth' 122;
  /* pure-vw sizing: the longest line here is "CALLURA." (~5.4em at wdth 122),
     so 12vw can never overflow the padded column at any viewport width */
  font-size:clamp(34px,12vw,190px);
  line-height:.9;letter-spacing:-.035em;
  text-transform:uppercase;
  color:var(--ink);
}
.case-display .ln{display:block;white-space:nowrap}
.case-display .punct{
  color:var(--blue);
  font-weight:900;font-variation-settings:'wdth' 122;
}
.case-intro{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(28px,4vw,72px);
  align-items:end;
  margin-top:clamp(26px,4vh,48px);
}
.case-sub{
  max-width:560px;
  font-size:clamp(15px,1.15vw,17px);line-height:1.62;
  color:rgba(10,10,12,.72);
}
.case-hero-cta{justify-self:end}

/* ============ 02 FACTS STRIP ============ */
.case-meta{padding:clamp(8px,1.6vh,20px) var(--pad) 0}
.case-facts{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0 clamp(20px,2.4vw,40px);
  border-top:1px solid var(--line);
}
.case-facts .fact{min-width:0}
.case-facts .fact .v{font-size:clamp(15px,1.2vw,18px)}
.case-live-link{
  color:var(--blue);position:relative;display:inline-block;
}
.case-live-link::after{
  content:'';position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:var(--blue);transform:scaleX(0);transform-origin:right;
  transition:transform .35s cubic-bezier(.65,0,.35,1);
}
.case-live-link:hover::after{transform:scaleX(1);transform-origin:left}

/* ============ 03 FEATURE: LIVE SITE SCREENSHOT ============ */
.case-feature{padding:clamp(56px,9vh,120px) var(--pad) 0}
.case-shot{
  margin:0;
  margin-inline:auto;
}
/* the browser panel - same tilting treatment the stat band used to carry */
.cs-frame{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:22px;
  background:var(--ink);
  transform:perspective(1400px) rotateX(0deg) rotateY(0deg);
  transform-style:preserve-3d;
  will-change:transform;
  box-shadow:0 44px 96px -38px rgba(20,30,55,.45);
}
/* the chrome bar - ink header that frames the shot as a real window */
.cs-bar{
  display:flex;align-items:center;gap:14px;
  height:clamp(38px,4.4vh,46px);
  padding:0 clamp(14px,1.4vw,20px);
  background:
    radial-gradient(70% 160% at 50% 0%, rgba(34,48,254,.16) 0%, transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);
  color:rgba(255,255,255,.62);
  font-size:clamp(9px,.78vw,12px);
  letter-spacing:.08em;
}
.cs-dots{display:flex;gap:7px;flex:0 0 auto}
.cs-dots i{
  width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.2);
}
.cs-url{
  margin:0 auto;
  padding:4px 14px;border-radius:100px;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.72);
  max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cs-img{
  display:block;width:100%;height:auto;
  background:var(--paper);
}
.cs-cap{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:clamp(16px,3vw,48px);
  padding-top:18px;
  color:rgba(10,10,12,.6);
  letter-spacing:.08em;
}
.cs-cap .cs-cap-note{text-align:right}

/* ============ 04 SCOPE ROWS ============ */
.case-scope{padding:clamp(72px,11vh,150px) var(--pad) 0}
.scope-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:18px;
  color:rgba(10,10,12,.6);
}
.scope-row{
  display:grid;
  grid-template-columns:auto minmax(0,.55fr) minmax(0,1fr);
  gap:clamp(20px,3.5vw,64px);
  align-items:baseline;
  padding:clamp(22px,3.2vh,34px) 0;
  border-top:1px solid var(--line);
}
.scope-idx{
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.12em;
  color:var(--blue);
  min-width:3ch;
}
.scope-title{
  margin:0;
  font-size:clamp(20px,1.9vw,28px);font-weight:800;
  font-variation-settings:'wdth' 116;letter-spacing:-.02em;line-height:1.08;
  text-transform:uppercase;
}
.scope-desc{
  margin:0;
  font-size:15px;line-height:1.6;
  color:rgba(10,10,12,.7);
  max-width:52ch;
}

/* ============ 05 STORY BLOCKS ============ */
.case-story{padding:clamp(72px,11vh,150px) var(--pad) 0}
.story-block{
  display:grid;
  grid-template-columns:minmax(0,.4fr) minmax(0,1fr);
  gap:clamp(20px,3.5vw,64px);
  padding:clamp(30px,4.4vh,52px) 0;
  border-top:1px solid var(--line);
}
.story-label{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);
}
.story-text{
  margin:0;
  font-size:clamp(20px,2vw,30px);font-weight:600;
  font-variation-settings:'wdth' 104;
  line-height:1.32;letter-spacing:-.015em;
  color:var(--ink);
  max-width:26em;
}
.story-text .hl{color:var(--blue)}

/* ============ 06 NEXT CASE ============ */
.case-next{
  display:block;
  margin-top:clamp(80px,12vh,160px);
  padding:clamp(48px,8vh,96px) var(--pad) clamp(88px,12vh,150px);
  border-top:1px solid var(--line);
  text-decoration:none;color:var(--ink);
}
.cn-eyebrow{
  display:flex;justify-content:space-between;align-items:center;
  color:rgba(10,10,12,.6);
  margin-bottom:clamp(18px,3vh,32px);
}
.cn-title{
  display:inline-flex;align-items:baseline;gap:clamp(14px,2vw,32px);
  font-weight:900;font-variation-settings:'wdth' 122;
  font-size:clamp(40px,8vw,120px);
  line-height:.9;letter-spacing:-.035em;
  text-transform:uppercase;
  transition:color .4s cubic-bezier(.65,0,.35,1);
}
.cn-title .cn-arr{
  font-weight:700;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.case-next:hover .cn-title{color:var(--blue)}
.case-next:hover .cn-arr{transform:translateX(clamp(8px,1.4vw,22px))}
.case-next:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

/* ============ 07 RESPONSIVE ============ */
@media (max-width:1020px){
  .case-intro{grid-template-columns:1fr;align-items:start}
  .case-hero-cta{justify-self:start}
  .case-facts{grid-template-columns:repeat(3,1fr)}
  .scope-row{grid-template-columns:auto minmax(0,1fr)}
  .scope-desc{grid-column:2/3}
}
@media (max-width:720px){
  .case-hero{padding-top:calc(var(--header-h) + clamp(28px,4.5vh,48px))}
  .case-display{letter-spacing:-.03em}
  .case-facts{grid-template-columns:1fr 1fr}
  .case-facts .fact:nth-child(odd){padding-right:0}
  .cs-frame{border-radius:16px}
  .cs-bar{height:32px}
  .cs-dots{display:none}
  .cs-url{margin:0;max-width:100%}
  .cs-cap{flex-direction:column;gap:6px}
  .cs-cap .cs-cap-note{text-align:left}
  .story-block{grid-template-columns:1fr;gap:14px}
  .scope-row{gap:14px 20px}
  .scope-title{font-size:clamp(19px,5.4vw,24px)}
}
@media (max-width:420px){
  .case-facts{grid-template-columns:1fr}
}

/* ============ 08 REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  .cn-title,.cn-title .cn-arr,.case-live-link::after{transition:none}
  .bb-chip,.bb-swatch,.bb-mark img{transition:none}
}

/* ==========================================================================
   09 BRAND BOOK (Brand DNA)
   Each case page sets the client's own palette on .brandbook via custom
   properties, so one stylesheet renders four distinct brand identities:
     --bb-bg      stage background
     --bb-ink     text on the stage
     --bb-accent  the brand's signature accent
   Typography specimens name the real typeface and fall back to Archivo,
   so nothing is fetched from a third party.
   ========================================================================== */
.brandbook{
  padding:clamp(60px,9vh,110px) var(--pad) clamp(50px,8vh,96px);
  border-top:1px solid var(--line);
}
.bb-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  margin-bottom:clamp(28px,4vh,46px);
}
.bb-head h2{
  font-size:clamp(28px,4.6vw,58px);
  line-height:.98;letter-spacing:-.035em;font-weight:800;
  margin:0;
}
.bb-head .mono{color:rgba(10,10,12,.55)}

/* ---- Stage: logo + tagline, painted in the brand's own colors ---- */
.bb-stage{
  position:relative;overflow:hidden;
  background:var(--bb-bg,#0A0A0C);
  color:var(--bb-ink,#fff);
  border-radius:clamp(16px,1.6vw,26px);
  padding:clamp(30px,5vw,70px);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(26px,4vw,60px);align-items:center;
  margin-bottom:clamp(18px,2.6vh,30px);
}
.bb-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 85% 15%,
    color-mix(in srgb,var(--bb-accent,#fff) 22%,transparent),transparent 60%);
}
.bb-mark{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(110px,15vw,190px);
  padding:clamp(18px,2.4vw,30px);
  border:1px dashed color-mix(in srgb,var(--bb-ink,#fff) 26%,transparent);
  border-radius:14px;
}
.bb-mark img{
  max-width:min(100%,260px);height:auto;display:block;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.32));
}
.bb-stage-copy{position:relative;z-index:1;min-width:0}
.bb-tagline{
  margin:0 0 18px;
  font-size:clamp(21px,3.1vw,40px);
  line-height:1.12;letter-spacing:-.025em;font-weight:800;
  text-wrap:balance;
}
.bb-tagline .bb-accent{color:var(--bb-accent,#fff)}
.bb-stage-note{
  margin:0;font-size:clamp(13px,1.15vw,16px);line-height:1.55;
  color:color-mix(in srgb,var(--bb-ink,#fff) 72%,transparent);
  max-width:52ch;
}
.bb-specs{
  display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none;
}
.bb-specs li{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--bb-ink,#fff) 28%,transparent);
  color:color-mix(in srgb,var(--bb-ink,#fff) 82%,transparent);
}

/* ---- Blocks ---- */
.bb-block{margin-top:clamp(30px,4.4vh,52px)}
.bb-block-head{
  display:flex;align-items:baseline;gap:14px;
  margin-bottom:clamp(14px,2vh,22px);
}
.bb-block-head h3{
  font-size:clamp(17px,1.9vw,24px);
  letter-spacing:-.02em;font-weight:800;margin:0;
}
.bb-block-head .mono{color:rgba(10,10,12,.5);white-space:nowrap}
.bb-rule{flex:1;height:1px;background:var(--line);min-width:20px}

/* ---- Palette ---- */
.bb-swatches{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(10px,1.2vw,16px);
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
}
.bb-swatch{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:#fff;
  transition:transform .35s cubic-bezier(.65,0,.35,1),
             box-shadow .35s cubic-bezier(.65,0,.35,1);
}
.bb-chip{
  display:block;height:clamp(74px,8.5vw,104px);
  background:var(--c);
  border-bottom:1px solid var(--line);
}
.bb-swatch-body{padding:12px 14px 14px}
.bb-swatch-name{
  display:block;font-weight:700;font-size:14px;letter-spacing:-.01em;
  margin-bottom:6px;
}
.bb-swatch dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:2px 10px}
.bb-swatch dt{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(10,10,12,.42);
}
.bb-swatch dd{
  margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;color:rgba(10,10,12,.78);
}
@media (hover:hover){
  .bb-swatch:hover{transform:translateY(-3px);box-shadow:0 16px 34px -20px rgba(10,20,40,.5)}
}

/* ---- Typography ---- */
.bb-type{
  display:grid;gap:clamp(10px,1.2vw,16px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.bb-face{
  border:1px solid var(--line);border-radius:14px;
  padding:clamp(16px,2vw,26px);background:#fff;
  min-width:0;
}
.bb-face-role{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(10,10,12,.45);margin:0 0 8px;
}
.bb-face-name{
  font-size:clamp(24px,3.2vw,40px);line-height:1.04;
  letter-spacing:-.02em;font-weight:700;margin:0 0 14px;
  font-family:var(--bb-face,var(--sans));
}
.bb-specimen{
  margin:0;font-family:var(--bb-face,var(--sans));
  font-size:clamp(12px,1.15vw,15px);line-height:1.7;
  color:rgba(10,10,12,.66);word-break:break-word;
}
.bb-specimen span{display:block}

/* ---- Voice ---- */
.bb-voice{
  margin:0;display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.bb-voice-item{
  border:1px solid var(--line);border-radius:14px;
  padding:clamp(16px,2vw,24px);background:#fff;min-width:0;
}
.bb-voice-item dt{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(10,10,12,.45);margin-bottom:10px;
}
.bb-voice-item dd{margin:0}
.bb-values{
  font-size:clamp(15px,1.5vw,19px);line-height:1.45;
  font-weight:700;letter-spacing:-.015em;margin:0;
}
.bb-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.bb-pills li{
  font-size:12.5px;line-height:1;padding:8px 11px;border-radius:999px;
  background:var(--paper-soft);color:rgba(10,10,12,.8);
  border:1px solid var(--line-soft);
}
.bb-pills.is-accent li{
  background:color-mix(in srgb,var(--bb-accent,#2230FE) 13%,#fff);
  border-color:color-mix(in srgb,var(--bb-accent,#2230FE) 30%,transparent);
}
.bb-source{
  margin:clamp(22px,3vh,32px) 0 0;
  font-size:12.5px;color:rgba(10,10,12,.5);
}

/* ---- Brand book responsive ---- */
@media (max-width:900px){
  .bb-stage{grid-template-columns:1fr;gap:24px}
  .bb-mark{min-height:130px}
}
@media (max-width:720px){
  .brandbook{padding-top:clamp(44px,6vh,64px)}
  .bb-swatches{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
  .bb-chip{height:64px}
  .bb-type,.bb-voice{grid-template-columns:1fr}
  .bb-block-head{flex-wrap:wrap;gap:8px}
  .bb-block-head .bb-rule{display:none}
  .bb-mark img{max-width:min(100%,190px)}
}
@media (max-width:420px){
  .bb-swatches{grid-template-columns:1fr 1fr}
  .bb-swatch-body{padding:10px 11px 12px}
  .bb-swatch dl{grid-template-columns:1fr}
  .bb-swatch dt{margin-top:4px}
}