/* ==========================================================================
   Kaushik Kishor — shared theme (sub-pages)
   Consistent chrome: glass header · dark top band · light content · footer · ƙ drawer
   ========================================================================== */

:root {
  --paper: #F6F4EE;
  --card-a: #141019;
  --card-b: #08070B;
  --text: #F4F1EA;
  --text-soft: #9E98A6;
  --text-faint: #625D6B;
  --ink: #17140F;
  --ink-soft: #3F3B33;
  --ink-mid: #575248;
  --ink-faint: #8A8377;
  --hairline: #E4DFD2;
  --hairline-d: #D8D2C2;
  --gold: #FF6B57;         /* single coral accent */
  --gold-bright: #FF8A79;

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --body: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; max-width: 100vw; }

/* ---------- cross-page shared-element transitions (View Transitions API) ---------- */
@view-transition { navigation: auto; }
::view-transition-group(hero-photo) { animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.45,0,0.2,1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.42s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(24px,5vw,64px); }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0; }

/* ---------- comet cursor ---------- */
#comet { position: fixed; inset: 0; z-index: 50; pointer-events: none; }

/* ---------- Case-study sticky bar + scroll progress ---------- */
.casebar { position: fixed; top: 0; left: 0; right: 0; z-index: 58; transform: translateY(-100%); transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
  background: rgba(246,244,238,0.82); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--hairline); }
.casebar.show { transform: translateY(0); }
.casebar .cb-in { max-width: 1240px; margin: 0 auto; padding: 11px clamp(20px,4vw,40px); display: flex; align-items: center; gap: 18px; }
.casebar .cb-id { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; min-width: 0; }
.casebar .cb-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--gold); color: #100C18; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 15px; line-height: 1; flex-shrink: 0; }
.casebar .cb-name { font-family: var(--display); font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.casebar .cb-nav { display: flex; align-items: center; gap: clamp(14px,1.8vw,24px); }
.casebar .cb-nav a { font-family: var(--body); font-size: 13.5px; color: var(--ink-mid); text-decoration: none; transition: color 0.2s ease; cursor: pointer; }
.casebar .cb-nav a:hover { color: var(--ink); }
.casebar .cb-cta { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #100C18; background: var(--gold); padding: 9px 15px; border-radius: 9px; text-decoration: none; white-space: nowrap; transition: background 0.25s ease; }
.casebar .cb-cta:hover { background: var(--gold-bright); }
.casebar .kprog { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2.5px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
@media (max-width: 720px) { .casebar .cb-nav { display: none; } }

/* hero "Check live project" CTA */
.hero-cta { display: inline-flex; align-items: center; gap: 9px; margin-top: clamp(24px,2.8vw,32px); font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #100C18; background: var(--gold); padding: 13px 22px; border-radius: 11px; text-decoration: none; transition: background 0.25s ease, transform 0.2s ease; box-shadow: 0 12px 30px -14px rgba(255,107,87,0.7); }
.hero-cta:hover { background: var(--gold-bright); transform: translateY(-1px); }
.hero-cta span { font-size: 15px; line-height: 1; }
.hero-cta[href="#"], .hero-cta[href=""] { display: none; } /* hide until a real Figma link is set */

/* ---------- Top band (dark mini-hero) ---------- */
.topband { position: relative; margin: 24px 24px 0; border-radius: 26px; overflow: hidden; min-height: clamp(300px,44vh,440px);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(160deg, var(--card-a), var(--card-b)); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 40px 90px -40px rgba(0,0,0,0.6); }
.topband canvas { position: absolute; inset: 0; z-index: 1; opacity: 0.5; }
.topband .tb-neb { position: absolute; inset: -16%; z-index: 1; pointer-events: none; filter: blur(22px);
  background: radial-gradient(40% 50% at 62% 40%, rgba(124,92,255,0.13), transparent 62%), radial-gradient(36% 44% at 28% 68%, rgba(255,107,87,0.11), transparent 64%); }
.topband .tb-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(4,3,8,0.5), transparent 44%); }
.tb-inner { position: relative; z-index: 3; padding: clamp(120px,16vh,180px) clamp(24px,4vw,52px) clamp(38px,5vw,56px); max-width: 1440px; margin: 0 auto; width: 100%; }
.tb-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0 0 clamp(16px,2vw,22px); }
.page-title { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; line-height: 0.92; font-size: clamp(44px,7vw,104px); color: var(--text); margin: 0; }
.page-title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold); }
.page-lead { font-family: var(--serif); font-style: italic; font-size: clamp(17px,1.6vw,22px); line-height: 1.4; color: var(--text-soft); margin: clamp(18px,2.2vw,26px) 0 0; max-width: 50ch; }

/* ---------- Floating glass header ---------- */
.cap { position: absolute; z-index: 6; top: 16px; left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 9px 10px 9px 14px; border-radius: 16px; background: rgba(255,255,255,0.055); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 14px 44px -20px rgba(0,0,0,0.85); }
.cap .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.cap .mark { width: 30px; height: 30px; border-radius: 9px; background: var(--gold); color: #100C18; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 18px; line-height: 1; }
.cap .who { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--text); }
.cap nav { display: flex; align-items: center; gap: clamp(16px,2vw,26px); }
.cap nav a { position: relative; font-family: var(--body); font-size: 14px; color: var(--text-soft); text-decoration: none; transition: color 0.25s ease; cursor: pointer; }
.cap nav a:hover, .cap nav a.on { color: var(--text); }
.cap nav a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.cap nav a:hover::after, .cap nav a.on::after { transform: scaleX(1); }
.cap .right { display: flex; align-items: center; gap: 16px; }
.cap .status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-soft); white-space: nowrap; }
.cap .status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(255,107,87,0.6); animation: pulseC 2.4s infinite; }
.cap .time { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: var(--text-faint); white-space: nowrap; }
.cap .divider { width: 1px; height: 22px; background: rgba(255,255,255,0.14); }
.cap .talk { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #100C18; background: var(--gold); padding: 10px 16px; border-radius: 10px; text-decoration: none; white-space: nowrap; transition: background 0.3s ease; }
.cap .talk:hover { background: var(--gold-bright); }
@keyframes pulseC { 0%{box-shadow:0 0 0 0 rgba(255,107,87,0.55);}70%{box-shadow:0 0 0 9px rgba(255,107,87,0);}100%{box-shadow:0 0 0 0 rgba(255,107,87,0);} }
@media (max-width: 1080px) { .cap .time { display: none; } }
@media (max-width: 900px) { .cap nav, .cap .status, .cap .divider { display: none; } }

/* ---------- Content helpers ---------- */
.section { padding-top: clamp(70px,9vw,120px); padding-bottom: clamp(70px,9vw,120px); }
.section--tight { padding-top: clamp(48px,6vw,80px); padding-bottom: clamp(48px,6vw,80px); }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0 0 clamp(20px,2.4vw,32px); }
.h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 0.98; font-size: clamp(30px,4.2vw,60px); color: var(--ink); margin: 0; }
.h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold); }
.lede { font-size: clamp(17px,1.5vw,21px); line-height: 1.7; color: var(--ink-soft); margin: 0 0 20px; max-width: 60ch; }
.lede:last-child { margin-bottom: 0; }
.body-p { font-size: clamp(15.5px,1.3vw,18px); line-height: 1.72; color: var(--ink-soft); margin: 0 0 20px; max-width: 62ch; }
.body-p:last-child { margin-bottom: 0; }
.body-p strong, .lede strong { color: var(--ink); font-weight: 600; }
.hr { height: 1px; background: var(--hairline); border: none; margin: 0; }

/* buttons / links */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  color: var(--paper); background: var(--ink); padding: 15px 24px; border-radius: 12px; transition: background 0.3s ease, transform 0.2s ease; }
.btn:hover { background: var(--gold); color: #100C18; }
.btn--coral { background: var(--gold); color: #100C18; }
.btn--coral:hover { background: var(--gold-bright); }
.link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.link .ar { color: var(--gold); transition: transform 0.3s ease; }
.link:hover .ar { transform: translateX(4px); }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--hairline); margin-top: clamp(40px,6vw,80px); }
.foot .foot-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 30px; padding: 30px 0 46px; }
.foot .foot-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.foot .foot-nav a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mid); text-decoration: none; transition: color 0.25s ease; }
.foot .foot-nav a:hover { color: var(--gold); }
.foot p { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2,0.7,0.2,1); }

/* ---------- ƙ quick-answers: floating button + drawer ---------- */
.kfab { position: fixed; z-index: 70; right: clamp(18px,3vw,32px); bottom: clamp(18px,3vw,32px); display: inline-flex; align-items: center; }
.kfab button { width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer; background: var(--gold); color: #100C18; font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 34px -8px rgba(255,107,87,0.7); transition: transform 0.25s ease, box-shadow 0.3s ease; }
.kfab button:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 42px -8px rgba(255,107,87,0.95); }
.kfab .klabel { position: absolute; right: 72px; top: 50%; transform: translateY(-50%) translateX(6px); white-space: nowrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); background: rgba(20,16,25,0.92); border: 1px solid rgba(255,255,255,0.12); padding: 8px 12px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; }
.kfab:hover .klabel { opacity: 1; transform: translateY(-50%) translateX(0); }
.kclip { position: fixed; inset: 0; z-index: 80; overflow: hidden; pointer-events: none; }
body.kopen .kclip { pointer-events: auto; }
.kbackdrop { position: absolute; inset: 0; background: rgba(4,3,7,0.55); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.kdrawer { position: absolute; z-index: 1; top: 0; right: 0; height: 100%; width: min(440px, 92vw); background: linear-gradient(160deg,#141019,#08070C); border-left: 1px solid rgba(255,255,255,0.1); box-shadow: -34px 0 90px -24px rgba(0,0,0,0.7); transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1); display: flex; flex-direction: column; }
body.kopen .kbackdrop { opacity: 1; pointer-events: auto; }
body.kopen .kdrawer { transform: translateX(0); }
.kdrawer .khead { display: flex; align-items: center; gap: 12px; padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.kdrawer .kmark { width: 40px; height: 40px; border-radius: 12px; background: var(--gold); color: #100C18; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 22px; }
.kdrawer .ktitle .t { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--text); }
.kdrawer .ktitle .s { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-top: 2px; }
.kdrawer .kclose { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.14); background: none; color: var(--text-soft); cursor: pointer; font-size: 15px; transition: color 0.25s ease, border-color 0.25s ease; }
.kdrawer .kclose:hover { color: var(--text); border-color: rgba(255,255,255,0.3); }
.kdrawer .kbody { flex: 1; overflow-y: auto; padding: 24px; }
.kdrawer .kwelcome { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.5; color: var(--text-soft); margin: 0 0 22px; }
.kdrawer .kwelcome b { color: var(--text); font-style: normal; font-weight: 600; }
.kprompt { display: block; width: 100%; text-align: left; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px 16px; margin: 0 0 10px; cursor: pointer; transition: border-color 0.25s ease; }
.kprompt:hover { border-color: rgba(255,107,87,0.45); }
.kprompt .q { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--body); font-size: 14.5px; color: var(--text); }
.kprompt .q .chev { color: var(--gold); transition: transform 0.3s ease; }
.kprompt.open .q .chev { transform: rotate(90deg); }
.kprompt .a { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease; font-size: 13.5px; line-height: 1.55; color: var(--text-soft); }
.kprompt.open .a { max-height: 220px; opacity: 1; margin-top: 10px; }
.kdrawer .kfoot { padding: 18px 24px 24px; border-top: 1px solid rgba(255,255,255,0.1); }
.kmore { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-soft); text-decoration: none; transition: color 0.25s ease; }
.kmore:hover { color: var(--gold); }
@media (max-width: 520px) { .kfab .klabel { display: none; } }

/* ---------- Mobile menu (burger + full-screen overlay) ---------- */
.cap-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); color: var(--text); cursor: pointer; }
.mnav { position: fixed; inset: 0; z-index: 90; overflow: hidden; background: rgba(8,7,12,0.98); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
body.mopen .mnav { opacity: 1; pointer-events: auto; }
.mnav-links { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; text-align: center; }
.mnav-links a { display: block; font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; font-size: 32px; color: var(--text); text-decoration: none; }
.mnav-links a:active { color: var(--gold); }
.mnav-links a.mnav-cta { margin-top: 14px; font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #100C18; background: var(--gold); padding: 15px 30px; border-radius: 12px; }
.mnav-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mnav-status { position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--text-soft); white-space: nowrap; }
.mnav-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

@media (max-width: 900px) {
  .cap { padding: 9px 12px; }
  .cap nav, .cap .right { display: none; }
  .cap-burger { display: inline-flex; }
  .wrap { padding-left: 16px; padding-right: 16px; }
  .cs-text, .cs-wide { padding-left: 16px; padding-right: 16px; }
  .tb-inner { padding-left: 16px; padding-right: 16px; }
  .topband { margin-left: 16px; margin-right: 16px; }
  .casebar .cb-in { padding-left: 16px; padding-right: 16px; }
  h1, h2, h3 { overflow-wrap: break-word; }
}

@media (max-width: 820px) {
  .topband { margin: 16px 16px 0; }
}
/* ============ Case study ============ */
.case-deck { font-family: var(--serif); font-style: italic; font-size: clamp(17px,1.7vw,23px); line-height: 1.45; color: var(--text-soft); margin: clamp(20px,2.4vw,30px) 0 0; max-width: 60ch; }
.cs-text { max-width: 820px; margin: 0 auto; padding: 0 clamp(24px,5vw,40px); }
.cs-wide { max-width: 1200px; margin: 0 auto; padding: 0 clamp(24px,5vw,40px); }

.case-overview { font-family: var(--display); font-weight: 600; letter-spacing: -0.015em; font-size: clamp(20px,2.1vw,30px); line-height: 1.4; color: var(--ink); margin: 0; }
.case-overview strong { color: var(--ink); font-weight: 800; }

.case-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(18px,2.4vw,32px); border-top: 1px solid var(--hairline-d); margin-top: clamp(40px,5vw,60px); padding-top: clamp(26px,3vw,34px); }
.case-meta .mk { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.case-meta .mv { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(14px,1.2vw,16px); letter-spacing: -0.01em; color: var(--ink); margin-top: 9px; }
.case-meta .mv span { display: block; font-family: var(--body); font-weight: 400; font-size: 12.5px; color: var(--ink-mid); margin-top: 3px; }

.cs-figure { margin: clamp(32px,4vw,52px) auto 0; }
.cs-figure a { display: block; }
.cs-figure img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--hairline-d); box-shadow: 0 26px 62px -30px rgba(23,20,15,0.4); background: #fff; }
.cs-figure figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: var(--ink-faint); margin-top: 13px; text-align: center; }

/* ---------- Lightbox: tap a case-study screenshot to zoom ---------- */
.cs-figure img { cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(6,5,9,0.96); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; overflow: auto; -webkit-overflow-scrolling: touch; }
body.lbopen { overflow: hidden; }
body.lbopen .lb { opacity: 1; pointer-events: auto; }
.lb img { display: block; max-height: 100%; width: auto; max-width: none; margin: 0 auto; border-radius: 6px; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.lb.zoom img { max-height: none; margin: 0; border-radius: 0; cursor: zoom-out; }
.lb-close { position: fixed; top: 14px; right: 14px; z-index: 210; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.22); background: rgba(20,16,25,0.85); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lb-hint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 210; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,0.75); background: rgba(20,16,25,0.85); border: 1px solid rgba(255,255,255,0.16); padding: 8px 14px; border-radius: 20px; pointer-events: none; transition: opacity 0.25s ease; white-space: nowrap; }
.lb.zoom .lb-hint { opacity: 0; }

/* ---------- Print / PDF export ---------- */
@media print {
  @page { size: A4; margin: 12mm; }
  html, body { background: #fff !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #comet, .kfab, .kclip, .kbackdrop, .kdrawer, .casebar, .mnav, .cap, .cap-burger, .lb, .lb-close, .lb-hint, .case-next, .foot { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .topband { margin: 0 0 9mm !important; border-radius: 12px !important; box-shadow: none !important; min-height: 0 !important; break-inside: avoid; }
  .topband canvas { display: none !important; }
  .tb-inner { padding: 20mm 11mm 13mm !important; max-width: none !important; }
  main.case { padding-top: 0 !important; }
  .cs { padding: 0 !important; }
  .cs-text, .cs-wide { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
  .cs-figure { break-inside: avoid; margin-top: 7mm !important; }
  .cs-figure img { box-shadow: none !important; max-height: 235mm; object-fit: contain; }
  .cs-vid { max-height: 150mm; }
  h1, h2, h3 { break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
}

/* screenshot placeholder (waiting for a real export) */
.cs-ph { aspect-ratio: 16 / 10; border: 1.5px dashed var(--hairline-d); border-radius: 14px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 clamp(24px,5vw,48px); background: repeating-linear-gradient(135deg, transparent 0 15px, rgba(23,20,15,0.028) 15px 16px), var(--paper); }
.cs-ph span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.8; }
.cs-ph b { display: block; margin-top: 8px; color: var(--gold); font-weight: 500; letter-spacing: 0.04em; text-transform: none; font-size: 13px; }
.cs-ph.tall { aspect-ratio: 4 / 3; }

.cs { padding: clamp(58px,7vw,100px) 0 0; }
.cs-num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.cs-title { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; font-size: clamp(28px,3.6vw,46px); color: var(--ink); margin: 14px 0 0; }
.cs-intro { font-family: var(--serif); font-style: italic; font-size: clamp(18px,1.6vw,23px); line-height: 1.42; color: var(--ink-soft); margin: 20px 0 0; }
.cs-body { margin: 22px 0 0; }
.cs-body p { font-size: clamp(16px,1.25vw,18px); line-height: 1.72; color: var(--ink-soft); margin: 0 0 18px; }
.cs-body p:last-child { margin-bottom: 0; }
.cs-body strong { color: var(--ink); font-weight: 600; }

.cs-3part { margin: clamp(32px,4vw,50px) auto 0; border-top: 1px solid var(--hairline); }
.cs-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px 22px; padding: clamp(20px,2.4vw,28px) 0; border-bottom: 1px solid var(--hairline); }
.cs-row .cl { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); padding-top: 2px; }
.cs-row.accent .cl { color: var(--gold); }
.cs-row .ct { font-size: clamp(16px,1.25vw,18px); line-height: 1.62; color: var(--ink-soft); }
.cs-row.emph .ct { color: var(--ink); font-weight: 500; }
.cs-row .ct strong { color: var(--ink); font-weight: 600; }

.cs-compare table { width: 100%; border-collapse: collapse; }
.cs-compare th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; padding: 0 14px 12px 0; border-bottom: 1px solid var(--hairline-d); }
.cs-compare td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; color: var(--ink-soft); vertical-align: top; }
.cs-compare td.after { color: var(--ink); font-weight: 500; }
.cs-compare .cap { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 14px; }
.cs-stats { display: flex; flex-wrap: wrap; gap: clamp(28px,5vw,64px); margin-top: clamp(28px,3.5vw,40px); }
.cs-stat .big { font-family: var(--display); font-weight: 800; font-size: clamp(32px,4.6vw,52px); letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.cs-stat .big .arw { color: var(--gold); margin: 0 8px; }
.cs-stat .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 10px; }

.case-next { border-top: 1px solid var(--hairline); margin: clamp(70px,9vw,120px) auto 0; max-width: 1200px; padding: clamp(34px,4vw,50px) clamp(24px,5vw,40px) 0; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.case-next .nl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.case-next a.next { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(22px,2.6vw,34px); color: var(--ink); text-decoration: none; }
.case-next a.next:hover { color: var(--gold); }
.case-next a.next .arw { color: var(--gold); }

/* ============ Oroko case study — editorial-faithful blocks ============ */

/* Very-wide breakout figure (the sitemap) — runs wider than the system maps */
.cs-figure.cs-xwide { max-width: 1500px; margin-left: auto; margin-right: auto; padding: 0 clamp(24px,5vw,40px); }

/* ---- Design system (§07): Colour + Typography specimens ---- */
.cs-ds { max-width: 900px; margin: clamp(40px,5vw,64px) auto 0; padding: 0 clamp(24px,5vw,40px); }
.cs-ds-part + .cs-ds-part { margin-top: clamp(48px,6vw,80px); }
.cs-ds-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin: 0 0 clamp(18px,2vw,24px); }
.cs-ds-group + .cs-ds-group { margin-top: clamp(28px,3vw,40px); }
.cs-ds-group .g { font-size: 1.1875rem; font-weight: 600; color: var(--ink); margin: 0 0 16px; letter-spacing: -0.01em; }
.cs-sw { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px,1.4vw,16px); }
.cs-sw-item { border: 1px solid var(--hairline-d); border-radius: 12px; overflow: hidden; background: var(--paper); }
.cs-sw-item .chip { height: clamp(48px,7vw,64px); border-bottom: 1px solid var(--hairline-d); }
.cs-sw-item .meta { padding: clamp(10px,1.2vw,13px) clamp(12px,1.4vw,15px); }
.cs-sw-item .nm { font-size: 1.0625rem; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.3; letter-spacing: -0.01em; }
.cs-sw-item .hx { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 5px 0 0; }
.cs-sw-item .nt { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: 7px 0 0; }
.cs-type-note { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 clamp(20px,2.6vw,32px); max-width: 62ch; }
.cs-type-note em { font-family: var(--serif); font-style: italic; color: var(--ink); }
.cs-type { border-top: 1px solid var(--hairline); }
.cs-type-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(14px,3vw,44px); align-items: center; padding: clamp(26px,3.4vw,44px) 0; border-bottom: 1px solid var(--hairline); }
.cs-type-name { font-family: var(--body); font-weight: 600; font-size: 1.1875rem; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.cs-type-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 6px 0 0; }
.cs-type-why { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 12px 0 0; max-width: 42ch; }
.cs-type-sample { font-size: clamp(26px,3.6vw,48px); line-height: 1.08; color: var(--ink); letter-spacing: -0.005em; }
.cs-type-sample.serif { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; }
.cs-type-sample.sans { font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 400; }

/* ---- Highlights (§08, §11): image first, in a uniform white 16:9 matte ---- */
.cs-hl { margin-top: clamp(52px,6vw,80px); }
.cs-hl-item { padding-top: clamp(64px,9vw,112px); }
.cs-hl-item:first-child { padding-top: 0; }
.cs-hl-fig { max-width: 1200px; margin: 0 auto; padding: 0 clamp(24px,5vw,40px); }
.cs-hl-fig figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 14px; text-align: center; }
.cs-hl-text { max-width: 820px; margin: clamp(20px,2.4vw,28px) auto 0; padding: 0 clamp(24px,5vw,40px); }
.cs-hl-title { font-family: var(--body); font-weight: 600; font-size: 1.1875rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.cs-hl-desc { font-size: 1.0625rem; line-height: 1.75; color: var(--ink-soft); margin: 8px 0 0; }
.cs-hl-desc strong { color: var(--ink); font-weight: 600; }

/* Uniform white matte — every app screenshot sits centered in the same 16:9 white
   card whatever its native size, so the set reads as one consistent size. */
.cs-hl-fig a, .cs-row-item figure a, .cs-vg-card a {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; overflow: hidden; background: #fff;
  border: 1px solid var(--hairline-d); border-radius: 14px;
  box-shadow: 0 22px 52px -28px rgba(23,20,15,0.4);
  padding: clamp(16px,2vw,30px);
}
.cs-vg-card a { padding: clamp(10px,1.4vw,18px); box-shadow: 0 18px 44px -26px rgba(23,20,15,0.4); }
.cs-hl-fig img, .cs-row-item figure img, .cs-vg-card img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
  border: 0; border-radius: 0; box-shadow: none; background: none;
}

/* Stacked rows (§11 "The client's side") */
.cs-rows { max-width: 1200px; margin: clamp(44px,5.5vw,68px) auto 0; padding: 0 clamp(24px,5vw,40px); display: grid; gap: clamp(44px,5.5vw,68px); }
.cs-row-item figure { margin: 0; }
.cs-row-item .rt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); margin: clamp(16px,2vw,22px) 0 0; }
.cs-row-item .rd { max-width: 820px; font-size: 1.0625rem; line-height: 1.75; color: var(--ink-soft); margin: 8px 0 0; }

/* ---- View grid (§10 four views): 2-up matte cards ---- */
.cs-vg { max-width: 1200px; margin: clamp(40px,5vw,64px) auto 0; padding: 0 clamp(24px,5vw,40px); display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(30px,3.6vw,48px) clamp(24px,2.8vw,36px); }
.cs-vg-card { margin: 0; }
.cs-vg-card h4 { font-family: var(--body); font-weight: 600; font-size: 1.1875rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); margin: 16px 0 0; }
.cs-vg-card p { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); margin: 8px 0 0; }

/* ---- Phase divider (§09): minimal gear-change rule ---- */
.cs-phase { max-width: 820px; margin: clamp(80px,11vw,150px) auto clamp(56px,7vw,100px); padding: 0 clamp(24px,5vw,40px); }
.cs-phase .rule { border-top: 2px solid var(--ink); padding-top: 14px; }
.cs-phase .pl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.cs--afterphase { padding-top: 0; }

@media (max-width: 820px) {
  .cs-vg { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cs-row { grid-template-columns: 1fr; gap: 6px; }
  .cs-sw { grid-template-columns: repeat(2, 1fr); }
  .cs-type-row { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}