/* ==========================================================================
   CSC Innovations — KIT layer ("The Case-Study Gallery")
   Loads AFTER site.css on the four example pages (social kit, business cards,
   letterhead, brand refresh). Shared DNA: Midnight-Emerald dark base, the mono
   spec voice, framed presentation of REAL generated brand work. Each page sets
   its own --kit-accent secondary tone; everything else is shared here.
   ========================================================================== */

body.page-kit{--kit-accent:var(--accent);background:
  radial-gradient(120% 80% at 50% -6%, rgba(52,199,123,.10), transparent 55%),
  var(--bg);}

/* ---- Gallery hero ------------------------------------------------------- */
.kit-hero{position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(72px,10vw,128px) clamp(40px,5vw,64px);border-bottom:1px solid var(--line);
  background:
    radial-gradient(90% 120% at 88% -20%, color-mix(in srgb,var(--kit-accent) 16%, transparent), transparent 60%),
    radial-gradient(70% 90% at 6% 110%, rgba(52,199,123,.10), transparent 60%),
    var(--bg-2);}
.kit-hero .container{position:relative;z-index:1;max-width:var(--container);}
.kit-hero .eyebrow{color:var(--kit-accent);}
.kit-hero .eyebrow::before{background:var(--kit-accent);}
.kit-hero h1{font-size:var(--fs-display);letter-spacing:-.035em;line-height:1.02;max-width:16ch;}
.kit-hero h1 em{color:var(--kit-accent);font-style:italic;}
.kit-hero .lead{margin-top:var(--s3);max-width:60ch;}
/* mono spec strip under the hero headline */
.spec-strip{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s5);
  padding-top:var(--s4);border-top:1px solid var(--line);}
.spec-strip .spec{min-width:0;}
.spec-strip dt{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:5px;}
.spec-strip dd{margin:0;font-family:var(--serif);font-size:19px;color:var(--text);}
.spec-strip dd em{color:var(--kit-accent);font-style:italic;}

/* huge faint mono watermark index behind the hero (art-school tell) */
.kit-hero .wm{position:absolute;right:-2%;bottom:-22%;z-index:0;font-family:var(--mono);
  font-size:clamp(140px,30vw,360px);font-weight:700;line-height:.8;color:var(--text);opacity:.03;
  letter-spacing:-.04em;pointer-events:none;-webkit-user-select:none;user-select:none;}

/* ---- Case-study block --------------------------------------------------- */
.case{padding-block:clamp(56px,8vw,104px);border-bottom:1px solid var(--line);}
.case:last-of-type{border-bottom:0;}
.case-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--s4);
  margin-bottom:var(--s5);}
.case-index{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--kit-accent);margin-bottom:var(--s2);display:block;}
.case-head h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.03em;}
.case-head h2 em{font-style:italic;color:var(--kit-accent);}
.case-desc{margin-top:var(--s2);max-width:52ch;color:var(--text-muted);font-size:var(--fs-sm);}
.case-meta{text-align:right;font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);line-height:1.9;flex-shrink:0;}
@media (max-width:720px){
  .case-head{grid-template-columns:1fr;align-items:start;}
  .case-meta{text-align:left;}
}

/* palette swatch row pulled from the brand */
.swatches{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);}
.swatch{display:flex;flex-direction:column;gap:7px;}
.swatch i{display:block;width:54px;height:54px;border-radius:10px;border:1px solid var(--line-strong);
  box-shadow:var(--sh-1);}
.swatch span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-faint);text-transform:uppercase;}

/* ---- Frames (the presentation craft) ----------------------------------- */
/* generic framed plate for any flat graphic */
.plate{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--sh-2);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);}
.plate:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--line-strong);}
.plate img{width:100%;display:block;}
.plate .cap{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text);
  background:rgba(8,16,11,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:5px 10px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.08);}

/* browser chrome — wraps a logo lockup / web mock so it reads as a real screen */
.browser{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-strong);
  box-shadow:var(--sh-3);background:#0c130f;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);}
.browser:hover{transform:translateY(-4px);box-shadow:var(--sh-forest);}
.browser .bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--surface);
  border-bottom:1px solid var(--line);}
.browser .bar .dot{width:11px;height:11px;border-radius:50%;background:var(--line-strong);flex:0 0 auto;}
.browser .bar .dot:nth-child(1){background:#ff5f57;}
.browser .bar .dot:nth-child(2){background:#febc2e;}
.browser .bar .dot:nth-child(3){background:#28c840;}
.browser .bar .url{margin-left:10px;font-family:var(--mono);font-size:11.5px;color:var(--text-faint);
  background:var(--bg-2);padding:5px 12px;border-radius:var(--r-pill);flex:1;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.browser img{width:100%;display:block;background:#fff;}

/* phone frame — wraps a feed/post into a device */
.phone{position:relative;width:100%;max-width:300px;margin-inline:auto;border-radius:32px;
  padding:10px;background:linear-gradient(160deg,#222a25,#0d1410);
  box-shadow:var(--sh-3), inset 0 0 0 1px rgba(255,255,255,.05);}
.phone::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:56px;height:5px;border-radius:3px;background:rgba(255,255,255,.18);z-index:2;}
.phone .screen{border-radius:24px;overflow:hidden;background:#0c130f;}
.phone .screen img{width:100%;display:block;}

/* social-kit canvas: profile (circle) + cover (banner) + 3 posts */
.kit-canvas{display:grid;grid-template-columns:260px 1fr;gap:var(--s4);align-items:start;}
@media (max-width:820px){.kit-canvas{grid-template-columns:1fr;gap:var(--s4);}}
.avatar-col{display:flex;flex-direction:column;gap:var(--s3);}
.avatar{aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid var(--line-strong);
  box-shadow:var(--sh-2);background:var(--surface);}
.avatar img{width:100%;height:100%;object-fit:cover;}
.cover-frame{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-2);}
.cover-frame img{width:100%;display:block;}
.posts-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s4);}
@media (max-width:560px){.posts-row{grid-template-columns:1fr 1fr;}}
.post-tile{aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--sh-1);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);}
.post-tile:hover{transform:translateY(-4px);box-shadow:var(--sh-2);}
.post-tile img{width:100%;height:100%;object-fit:cover;display:block;}

/* business-card stage — front + back, gently tilted, floating on a surface */
.card-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:center;
  padding:clamp(28px,5vw,64px);border-radius:var(--r-lg);overflow:hidden;
  background:
    radial-gradient(90% 120% at 80% 0%, color-mix(in srgb,var(--kit-accent) 14%, transparent), transparent 60%),
    linear-gradient(160deg,#10171300,#0a0f0c);
  border:1px solid var(--line);}
@media (max-width:680px){.card-stage{grid-template-columns:1fr;}}
.bizcard{border-radius:14px;overflow:hidden;box-shadow:var(--sh-3);border:1px solid rgba(255,255,255,.06);
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease);}
.bizcard img{width:100%;display:block;}
.card-stage .bizcard.front{transform:rotate(-3deg);}
.card-stage .bizcard.back{transform:rotate(3deg);}
.card-stage:hover .bizcard.front{transform:rotate(-1.5deg) translateY(-4px);}
.card-stage:hover .bizcard.back{transform:rotate(1.5deg) translateY(-4px);}

/* letterhead — an on-page paper mockup carrying the REAL logo */
.letter-stage{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:start;}
@media (max-width:820px){.letter-stage{grid-template-columns:1fr;}}
.sheet{position:relative;aspect-ratio:8.5/11;background:#fbfaf7;color:#1a1a17;border-radius:6px;
  box-shadow:var(--sh-3);overflow:hidden;padding:11% 11% 9%;display:flex;flex-direction:column;
  font-family:var(--sans);}
.sheet .sheet-head{display:flex;align-items:center;justify-content:space-between;gap:6%;
  padding-bottom:7%;border-bottom:2px solid rgba(0,0,0,.08);}
.sheet .sheet-brand{display:flex;align-items:center;gap:clamp(9px,1.6vw,15px);min-width:0;}
.sheet .sheet-logo{height:clamp(38px,6vw,60px);width:auto;border-radius:9px;flex:0 0 auto;}
.sheet .sheet-name{font-family:var(--serif);font-weight:600;font-size:clamp(17px,2.6vw,25px);
  color:#1a1a17;letter-spacing:-.02em;line-height:1.05;}
.sheet .sheet-name small{display:block;font-family:var(--mono);font-weight:500;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:#8a8a80;margin-top:5px;}
.sheet .sheet-meta{text-align:right;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:#6b6b63;line-height:1.7;flex:0 0 auto;}
@media (max-width:480px){.sheet .sheet-meta{display:none;}}
.sheet .sheet-body{padding-top:7%;}
.sheet .sheet-body .ln{height:8px;border-radius:4px;background:rgba(0,0,0,.07);margin-bottom:13px;}
.sheet .sheet-body .ln.s{width:62%;}
.sheet .sheet-body .ln.t{width:40%;background:rgba(0,0,0,.12);height:11px;margin-bottom:22px;}
.sheet .sheet-foot{margin-top:auto;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:#8a8a80;
  padding-top:6%;border-top:1px solid rgba(0,0,0,.08);}
.sheet .accent-edge{position:absolute;left:0;top:0;bottom:0;width:7px;}

/* before / after refresh pair */
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s4);align-items:center;}
@media (max-width:760px){.ba{grid-template-columns:1fr;}.ba .ba-arrow{transform:rotate(90deg);justify-self:center;}}
.ba-cell{text-align:center;}
.ba-cell .ba-tag{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:var(--s2);display:inline-block;}
.ba-cell.before .ba-tag{color:var(--text-faint);}
.ba-cell.after .ba-tag{color:var(--kit-accent);}
.ba-arrow{font-family:var(--mono);font-size:24px;color:var(--kit-accent);opacity:.8;}
/* "Dated before" logos — believable older marks, rebuilt in CSS so the after
   has something real to beat. Each variant evokes a specific era/cliché. */
.before-logo{aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;gap:16px;
  border-radius:var(--r-md);border:1px solid var(--line);overflow:hidden;position:relative;
  padding:0 7%;box-shadow:inset 0 2px 10px rgba(0,0,0,.18);}
.before-logo .bl-mark{flex:0 0 auto;}
.before-logo .bl-word{font-family:Georgia,'Times New Roman',serif;line-height:1.04;}
.before-logo .bl-word small{display:block;font-size:.4em;margin-top:.4em;}

/* Ember Road — a tired italic wordmark + a brown "coffee blob" with steam */
.before-logo.bl-ember{background:linear-gradient(168deg,#efeadf,#ddd6c4);}
.before-logo.bl-ember .bl-mark{position:relative;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#7a4a2b,#3c2212 72%);
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.45),0 2px 3px rgba(0,0,0,.3);}
.before-logo.bl-ember .bl-mark::before,
.before-logo.bl-ember .bl-mark::after{content:"";position:absolute;top:-15px;width:4px;height:15px;
  border-radius:3px;background:rgba(120,80,50,.45);}
.before-logo.bl-ember .bl-mark::before{left:19px;transform:rotate(-13deg);}
.before-logo.bl-ember .bl-mark::after{left:33px;transform:rotate(11deg);}
.before-logo.bl-ember .bl-word{font-style:italic;font-weight:700;color:#5a3a22;
  font-size:clamp(19px,2.9vw,30px);text-shadow:1px 1px 0 #fff;}
.before-logo.bl-ember .bl-word small{font-style:normal;letter-spacing:.24em;color:#8a7a5e;}

/* Ironside — faux-chrome Word-Art bevel + a generic cog */
.before-logo.bl-iron{background:linear-gradient(180deg,#3a3f47,#22252b);}
.before-logo.bl-iron .bl-mark{position:relative;width:54px;height:54px;border-radius:50%;
  background:conic-gradient(from 40deg,#9aa1ab,#e7ebf0,#7c828c,#cfd4db,#8a909a,#e7ebf0,#9aa1ab);
  box-shadow:inset 0 0 0 7px #2b2e34,0 2px 4px rgba(0,0,0,.55);}
.before-logo.bl-iron .bl-mark::after{content:"";position:absolute;inset:35%;border-radius:50%;background:#2b2e34;}
.before-logo.bl-iron .bl-word{font-weight:700;letter-spacing:.02em;font-size:clamp(19px,2.9vw,32px);
  background:linear-gradient(180deg,#f4f7fb 0%,#b3b9c2 47%,#5c626b 53%,#dfe3e9 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.before-logo.bl-iron .bl-word small{-webkit-text-fill-color:#aab0ba;color:#aab0ba;letter-spacing:.26em;}

/* Cedar & Sage — a clip-art leaf + a thin spa script */
.before-logo.bl-cedar{background:#f6f5f0;}
.before-logo.bl-cedar .bl-mark{width:42px;height:52px;border-radius:0 50% 0 50%;transform:rotate(45deg);
  background:radial-gradient(circle at 52% 38%,#84c46f,#3c8a47);box-shadow:inset 0 -3px 6px rgba(0,0,0,.18);}
.before-logo.bl-cedar .bl-word{font-family:'Segoe Script','Brush Script MT',cursive;font-weight:400;
  color:#6f7a66;font-size:clamp(22px,3.3vw,34px);}
.before-logo.bl-cedar .bl-word small{font-family:Georgia,serif;letter-spacing:.34em;color:#9aa192;}
.after-logo{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line-strong);box-shadow:var(--sh-2);background:#fff;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);}
.after-logo img{width:100%;display:block;}
/* (L) the AFTER is the focal — on case hover it lifts + glows while the dated BEFORE recedes */
.before-logo{transition:filter var(--t) var(--ease);}
.case:hover .ba-cell.after .after-logo{transform:translateY(-4px);box-shadow:var(--sh-forest);border-color:var(--kit-accent);}
.case:hover .ba-cell.before .before-logo{filter:saturate(.82) brightness(.9);}
.case:hover .ba-arrow{color:var(--kit-accent);opacity:1;transform:translateX(3px);}
.ba-arrow{transition:color var(--t) var(--ease),opacity var(--t) var(--ease),transform var(--t) var(--ease);}

/* figure captions inside cases sit left under their plate */
.case .figure-cap,.kit-canvas .figure-cap{text-align:left;}

/* mono note rail under a case */
.kit-note{display:flex;gap:var(--s2);align-items:flex-start;margin-top:var(--s4);
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.03em;color:var(--text-faint);line-height:1.7;}
.kit-note::before{content:"//";color:var(--kit-accent);flex:0 0 auto;}

/* closing CTA band reused across the 4 pages */
.kit-cta{position:relative;overflow:hidden;border-radius:var(--r-lg);
  padding:clamp(36px,5vw,64px);text-align:center;
  background:
    radial-gradient(80% 130% at 50% 0%, color-mix(in srgb,var(--kit-accent) 22%, transparent), transparent 60%),
    linear-gradient(160deg,#114e30,#0a2516);
  border:1px solid color-mix(in srgb,var(--kit-accent) 30%, transparent);box-shadow:var(--sh-forest);}
.kit-cta .eyebrow{justify-content:center;}
.kit-cta h2{max-width:20ch;margin-inline:auto;}
.kit-cta .lead{margin:var(--s3) auto var(--s4);}
.kit-cta .btn-row{justify-content:center;}

/* generic two/three-up gallery grid for cases */
.kit-grid{display:grid;gap:var(--s4);}
.kit-grid.two{grid-template-columns:repeat(2,1fr);}
.kit-grid.three{grid-template-columns:repeat(3,1fr);}
@media (max-width:820px){.kit-grid.three{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.kit-grid.two,.kit-grid.three{grid-template-columns:1fr;}}