/* /case-studies/ (20 Oct): top WHITE, light rows (paper / soft bone), one dark band. Loaded after about2.css (route bar,
   word rise, white-space scale). Hit areas never move on hover; only what is inside them does. Reduce Motion = finished states. */
.sv[data-tone="light"].kc-alt { --bg: #F5F0E8; --panel2: #FFFFFF; }
.abx .kc-top { padding-top: clamp(40px, 6vh, 76px); padding-bottom: clamp(100px, 15vh, 170px); }
.abx .kc-sec { --pad: clamp(110px, 16vh, 190px); }

/* ===== shared: top copy ===== */
.kt-copy h1 { max-width: 11em; }
.kt-facts { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 4px 0 30px; padding: 0; list-style: none; }
.kt-facts li { display: flex; align-items: baseline; gap: 8px; }
.kt-facts b { font: 700 clamp(1.7rem, 2.5vw, 2.3rem)/1 var(--serif); letter-spacing: -0.02em; }
.kt-facts span { color: var(--muted); font-size: .95rem; }
.kt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kt-chips a { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--panel); font-size: .9rem; font-weight: 600; text-decoration: none; transition: color .3s var(--ease), border-color .3s var(--ease); }
.kt-chips a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--espresso); transform: translateY(101%); transition: transform .35s var(--ease); }
.kt-chips .ic { width: 18px; height: 18px; color: var(--accent); transition: color .3s; }
.kt-chips a.on { color: var(--bone); border-color: var(--espresso); } .kt-chips a.on::before { transform: none; } .kt-chips a.on .ic { color: var(--gold); }
@media (hover: hover) { .kt-chips a:hover { color: var(--bone); border-color: var(--espresso); } .kt-chips a:hover::before { transform: none; } .kt-chips a:hover .ic { color: var(--gold); } }

/* Top 1 · prints fanned on a desk */
.kt1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.kt1-stage { position: relative; aspect-ratio: 1.2; }
.kt1-fan { position: absolute; inset: 0; }
.kt1-c { --d: calc(var(--i) - 2); position: absolute; left: 50%; top: 50%; z-index: var(--z); width: 70%; margin: 0; padding: 8px 8px 0; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  box-shadow: 0 1px 0 rgba(23,17,14,.05), 0 22px 44px -22px rgba(23,17,14,.42);
  transform: translate(-50%, -50%) translate(calc(var(--d) * 10%), calc(var(--d) * var(--d) * 1.6%)) rotate(calc(var(--d) * 4.5deg));
  transition: transform .6s var(--ease), opacity .6s var(--ease); }
.kt1:not(.dealt) .kt1-c { transition-delay: calc(var(--i) * 90ms); }
.ax:not(.in) .kt1-c { opacity: 0; transform: translate(-50%, -38%) rotate(0deg); }
.kt1-c img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; border-radius: 8px; }
.kt1-c figcaption { display: flex; align-items: center; gap: 8px; padding: 10px 4px 12px; font: 600 .9rem/1 var(--sans); }
.kt1-c figcaption .ic { width: 16px; height: 16px; color: var(--accent); }
.kt1-c.on { z-index: 20; transform: translate(-50%, -50%) translate(calc(var(--d) * 10%), -10%) rotate(0deg) scale(1.05); }
.kt1-hit { position: absolute; inset: 0; z-index: 30; display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); }
.kt1-hit a { display: block; }

/* Top 2 · an index of results; a picture of the proof follows the pointer */
.kt2-top .kt-copy { max-width: 780px; }
.kt2-list { margin: clamp(44px, 7vh, 84px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.kt2-r { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) minmax(0, 1.7fr) 52px; align-items: center; gap: 24px;
  padding: clamp(22px, 3.4vh, 34px) 14px; border-bottom: 1px solid var(--rule); text-decoration: none; transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 70ms); }
.ax:not(.in) .kt2-r { opacity: 0; transform: translateY(18px); }
.kt2-r::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #F3EEE6; transform: scaleY(0); transform-origin: bottom; transition: transform .4s var(--ease); }
.kt2-w { display: flex; align-items: center; gap: 10px; font: 600 .85rem/1.3 var(--sans); color: var(--accent-text); }
.kt2-w .ic { width: 20px; height: 20px; }
.kt2-c { font: 700 clamp(1.2rem, 1.7vw, 1.5rem)/1.2 var(--serif); }
.kt2-v { display: flex; align-items: baseline; gap: 14px; }
.kt2-v b { font: 700 clamp(2rem, 3.6vw, 3.2rem)/1 var(--serif); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kt2-v span { color: var(--muted); font-size: .95rem; line-height: 1.4; }
.kt2-th { display: none; }
.kt2-go { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--rule); border-radius: 50%; transition: background .3s, border-color .3s; }
.kt2-go .ic { width: 18px; height: 18px; transition: transform .35s var(--ease); }
@media (hover: hover) { .kt2-r:hover::before { transform: none; } .kt2-r:hover .kt2-go { background: var(--gold); border-color: var(--gold); } .kt2-r:hover .kt2-go .ic { transform: translateX(3px); } }
.kt2-float { position: fixed; left: 0; top: 0; z-index: 40; width: 330px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 30px 60px -20px rgba(23,17,14,.45); pointer-events: none; opacity: 0; transition: opacity .25s var(--ease); will-change: transform; }
.kt2-float.on { opacity: 1; }
.kt2-float img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; border-radius: 9px; }

/* Top 3 · a folder with one tab per kind of work */
.kt3 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.kt3-box { position: relative; padding: 0 clamp(12px, 1.6vw, 20px) clamp(22px, 2.4vw, 30px); border: 1px solid var(--line); border-radius: 22px; background: #F3EEE6; box-shadow: 0 34px 70px -44px rgba(23,17,14,.5); }
.kt3-tabs { display: flex; gap: 4px; padding-top: 10px; overflow-x: auto; scrollbar-width: none; }
.kt3-tabs::-webkit-scrollbar { display: none; }
.kt3-tabs button { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 0; border-radius: 12px 12px 0 0; background: transparent; color: #5F5A55; font: 600 .9rem/1 var(--sans); cursor: pointer; transition: color .3s, background .3s; }
.kt3-tabs .ic { width: 18px; height: 18px; color: var(--accent); }
.kt3-tabs button[aria-selected="true"] { background: #fff; color: var(--espresso); }
@media (hover: hover) { .kt3-tabs button:hover { color: var(--espresso); } }
.kt3-ps { padding: clamp(14px, 2vw, 22px); border-radius: 0 14px 14px 14px; background: #fff; }
.kt3-p { display: grid; gap: 18px; } .kt3-p[hidden] { display: none; }
.kt3-p:not([hidden]) { animation: kt3in .5s var(--ease); }
@keyframes kt3in { from { opacity: 0; transform: translateY(10px); } }
.kt3-pic { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; aspect-ratio: 16 / 8; }
.kt3-pic img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.kt3-tx { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.kt3-cl { width: 100%; margin: 0 !important; font: 600 .9rem/1.3 var(--sans); color: var(--accent-text); }
.kt3-v { margin: 0 !important; } .kt3-v b { font: 700 clamp(2rem, 3.4vw, 3rem)/1 var(--serif); letter-spacing: -0.02em; } .kt3-v span { color: var(--muted); }
.kt3-go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--espresso); }
.kt3-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .35s var(--ease); }
@media (hover: hover) { .kt3-go:hover svg { transform: translateX(4px); } .kt3-go:hover { color: var(--accent-text); } }
.kt3-time { position: absolute; left: 22px; right: 22px; bottom: 10px; height: 2px; border-radius: 2px; background: rgba(23,17,14,.08); overflow: hidden; }
.kt3-time::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.kt3-box.run .kt3-time::after { animation: kt3t 3.8s linear forwards; }
.kt3-box.stop .kt3-time { opacity: 0; }
@keyframes kt3t { to { transform: scaleX(1); } }

/* ===== the five cases: shared ===== */
.kc-head { margin-bottom: clamp(24px, 4vh, 40px); }
.kc-head h2 { margin-bottom: 10px; font-size: clamp(2.2rem, 4.4vw, 3.8rem); }
.kc-where { margin: 0 !important; color: var(--muted); }
.kc-goal { max-width: 32em; font-size: clamp(1.06rem, 1.3vw, 1.2rem); } .kc-goal b { font-weight: 600; }
.sv h3.kc-sub, .kc2-cols h3 { margin: 34px 0 14px; font: 600 .76rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.kc-did { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.kc-did li { position: relative; padding-left: 28px; line-height: 1.55; }
.kc-did li::before { content: ""; position: absolute; left: 0; top: .78em; width: 14px; height: 1.5px; background: var(--accent); }
.kc-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 30px 0 22px; padding-top: 26px; border-top: 1px solid var(--rule); }
.kc-big b { font: 700 clamp(3.2rem, 6.8vw, 6.2rem)/.95 var(--serif); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.kc-big span { max-width: 15em; color: var(--muted); font-size: clamp(1.02rem, 1.2vw, 1.15rem); line-height: 1.4; }
.kc-more { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--rule); border-radius: 16px; background: var(--rule); }
.kc-more li { position: relative; padding: 18px 20px 20px; background: var(--panel); }
.kc-more li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.kc-more li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
@media (hover: hover) { .kc-more li:hover::after { transform: scaleX(1); } }
.kc-more b { display: block; margin-bottom: 6px; font: 700 1.55rem/1.1 var(--serif); letter-spacing: -0.01em; }
.kc-more span { display: block; color: var(--muted); font-size: .93rem; line-height: 1.45; }
.kc-src { display: flex; gap: 12px; margin: 28px 0 0 !important; padding: 14px 16px; border-radius: 12px; background: var(--panel2); color: var(--muted); font-size: .9rem; line-height: 1.5 !important; }
.kc-src .ic { flex: none; width: 20px; height: 20px; color: var(--accent-text); }
.kc-src b { color: var(--ink); font-weight: 600; }
.kc-zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #fff; cursor: zoom-in; }
.kc-zoom img { width: 100%; height: auto; }
.kc-zi { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(23,17,14,.84); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s var(--ease); }
.kc-zi .ic { width: 18px; height: 18px; color: var(--bone); }
@media (hover: hover) { .kc-zoom:hover .kc-zi, .kc-zoom:focus-visible .kc-zi { opacity: 1; transform: none; } }
@media (hover: none) { .kc-zi { width: 34px; height: 34px; opacity: .92; transform: none; } }
.kc-fig { margin: 0; } .kc-fig figcaption { margin-top: 12px; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.kc-phones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
.kc-phones .kc-zoom { border: 1px solid var(--line); border-radius: 14px; }
.kc-phones img { aspect-ratio: 260 / 574; object-fit: cover; object-position: top; }

/* Case 1 · story left, a stack of prints right */
.kc1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.kc1-pics { position: sticky; top: 108px; }
.kc1-stack { position: relative; aspect-ratio: 16 / 11.5; }
.kc1-p { position: absolute; inset: 0; z-index: calc(10 - var(--o)); display: flex; align-items: center; pointer-events: none;
  transform: translate(calc(var(--o) * 14px), calc(var(--o) * -14px)) rotate(calc(var(--o) * 1.6deg)); transition: transform .55s var(--ease), opacity .45s var(--ease); }
.kc1-p.top { pointer-events: auto; }
.kc1-p.far { opacity: 0; }
.kc1-p.out { opacity: 0; transform: translate(-26%, 6%) rotate(-7deg); }
.kc1-p .kc-fig { width: 100%; padding: 12px 12px 4px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -36px rgba(23,17,14,.5); }
.kc1-p .kc-fig > .kc-zoom { display: flex; justify-content: center; } .kc1-p .kc-fig > .kc-zoom img { width: auto; max-width: 100%; max-height: min(52vh, 440px); }
.kc1-p:not(.top) figcaption { opacity: 0; }
.kc1-p figcaption { margin: 10px 4px 10px; transition: opacity .3s; }
.ax:not(.in) .kc1-stack { opacity: 0; transform: translateY(30px); } .kc1-stack { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.kc1-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.kc1-nav button, .kc2-nav button, .kc-lb-nav button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--panel); color: var(--ink); cursor: pointer; transition: background .3s, border-color .3s, color .3s; }
.kc1-nav .ic, .kc2-nav .ic, .kc-lb-nav .ic { width: 18px; height: 18px; }
@media (hover: hover) { .kc1-nav button:hover, .kc2-nav button:hover, .kc-lb-nav button:hover { background: var(--gold); border-color: var(--gold); color: var(--espresso); } }
.kc1-ct { min-width: 4.5em; text-align: center; color: var(--muted); font: 600 .85rem/1 var(--mono); }

/* Case 2 · the number big, three columns, a strip of screenshots */
.kc2-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 90px); align-items: end; }
.kc2-top .kc-head { margin-bottom: 0; }
.kc2-big b { display: block; font: 700 clamp(3.8rem, 9.4vw, 8.6rem)/.9 var(--serif); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.kc2-big span { display: block; margin-top: 12px; color: var(--muted); font-size: 1.1rem; }
.kc2-ba { display: grid; gap: 10px; max-width: 520px; margin-top: 28px; }
.kc2-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 5.2ch; align-items: center; gap: 14px; }
.kc2-l { color: var(--muted); font: 600 .8rem/1 var(--sans); }
.kc2-bar { height: 12px; overflow: hidden; border-radius: 99px; background: var(--line); }
.kc2-bar i { display: block; height: 100%; border-radius: inherit; background: rgba(23,17,14,.3); transform: scaleX(var(--w)); transform-origin: left; transition: transform 1.3s var(--ease) .3s; }
.kc2-row.on .kc2-bar i { background: var(--gold); }
.ax:not(.in) .kc2-bar i { transform: scaleX(0); }
.kc2-row > b { font: 700 1.3rem/1 var(--serif); text-align: right; font-variant-numeric: tabular-nums; }
.kc2-ba p { margin: 4px 0 0 !important; color: var(--muted); font-size: .88rem; }
.kc2-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 52px); margin: clamp(52px, 8vh, 96px) 0 clamp(40px, 6vh, 64px); padding-top: 34px; border-top: 1px solid var(--rule); }
.sv .kc2-cols h3 { margin-top: 0; }
.kc-more-s { grid-template-columns: 1fr; } .kc-more-s b { font-size: 1.3rem; } .kc-more-s li { padding: 14px 16px; }
.kc2-strip { display: flex; gap: 18px; margin: 0 calc(var(--px) * -1); padding: 4px var(--px) 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--px); scrollbar-width: thin; }
.kc2-strip:focus-visible { outline-offset: -4px; }
.kc2-f { flex: none; width: min(560px, 80vw); margin: 0; scroll-snap-align: start; }
.kc2-f > .kc-zoom { aspect-ratio: 16 / 9; border: 1px solid var(--line); } .kc2-f > .kc-zoom img { height: 100%; object-fit: cover; object-position: left top; }
.kc2-f figcaption { margin-top: 12px; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.kc2-f.is-ph .kc-phones { max-width: 420px; }
.ax:not(.in) .kc2-f { opacity: 0; transform: translateX(40px); } .kc2-f { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.kc2-f:nth-child(2) { transition-delay: .1s; } .kc2-f:nth-child(3) { transition-delay: .2s; } .kc2-f:nth-child(4) { transition-delay: .3s; }
.kc2-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* Case 3 · pins on the real numbers */
.kc3-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; margin-bottom: clamp(30px, 5vh, 56px); }
.kc3-top .kc-head { margin-bottom: 0; } .kc3-top .kc-goal { margin-bottom: 4px; }
.kc3-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 64px); align-items: start; }
.kc3-view { position: sticky; top: 108px; }
.kc3-v { margin: 0; }
.kc3-v figcaption { margin-top: 12px; color: var(--muted); font-size: .9rem; }
.kc3-img { position: relative; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 30px 60px -40px rgba(23,17,14,.5); }
.kc3-img .kc-zoom { border-radius: 14px; }
.kc3-pin { position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -62px;   /* the pin sits just left of the number, so the number stays readable */ padding: 0; border: 0; background: none; cursor: pointer; }
.kc3-pin span { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--espresso); font: 700 .9rem/1 var(--sans);
  box-shadow: 0 0 0 4px rgba(205,168,95,.3), 0 6px 14px rgba(23,17,14,.3); transition: transform .3s var(--ease), background .3s, color .3s; }
.kc3-pin span::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--gold); border-radius: 50%; opacity: 0; }
.kc3-v.ping .kc3-pin span::after { animation: kcping 1.4s var(--ease) calc(var(--k) * .25s) 2; }
@keyframes kcping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } }
.kc3-pin.on span { background: var(--espresso); color: var(--gold); transform: scale(1.14); }
@media (hover: hover) { .kc3-pin:hover span { background: var(--espresso); color: var(--gold); transform: scale(1.14); } }
.kc3-ths { display: flex; gap: 10px; margin-top: 18px; overflow-x: auto; padding: 3px; }
.kc3-t { flex: none; width: 96px; height: 60px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; opacity: .55; transition: opacity .3s, box-shadow .3s; }
.kc3-t img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.kc3-t[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--gold); }
@media (hover: hover) { .kc3-t:hover { opacity: 1; } }
.kc3-ph { max-width: 520px; }
.kc3-side .kc-big { margin-top: 0; padding-top: 0; border-top: 0; } .kc3-side .kc-big b { font-size: clamp(3rem, 5.2vw, 4.6rem); }
.kc3-side .kc-sub:first-of-type { margin-top: 10px; }
.kc3-n { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kc3-n li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel2); line-height: 1.4; transition: background .3s, color .3s; }
.kc3-n li.kc3-nl { padding: 0; }
.kc3-nb { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 12px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.kc3-nb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.kc3-n li span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--espresso); font: 700 .85rem/1 var(--sans); }
.kc3-n li.on { background: var(--espresso); color: var(--bone); }
.kc3-n:empty, .kc3-n[hidden] { display: none; }

/* ===== More case studies (the dark band) ===== */
.kl-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(36px, 6vh, 60px); }
.kl-cta p { margin: 0 !important; color: var(--muted); font-size: .95rem; }
/* closing */
.kc-close .micro a { color: var(--accent-text); }

/* lightbox */
.kc-lb { width: min(1200px, 94vw); max-width: none; max-height: 94vh; padding: 0; overflow: hidden; border: 0; border-radius: 18px; background: #fff; color: #17110E; box-shadow: 0 40px 100px rgba(0,0,0,.5); }
.kc-lb::backdrop { background: rgba(23,17,14,.84); }
.kc-lb[open] { animation: kclb .35s var(--ease); } @keyframes kclb { from { opacity: 0; transform: scale(.96); } }
.kc-lb-in { position: relative; display: grid; gap: 12px; padding: 16px; }
.kc-lb img { width: 100%; height: auto; max-height: calc(94vh - 140px); object-fit: contain; border-radius: 10px; background: #F3EFE8; }
.kc-lb-cap { margin: 0; padding-right: 8px; color: #3E3631; font-size: .95rem; line-height: 1.45; }
.kc-lb-nav { display: flex; align-items: center; gap: 10px; } .kc-lb-nav button { --panel: #fff; --ink: #17110E; --rule: rgba(23,17,14,.18); }
.kc-lb-ct { color: #5F5A55; font: 600 .85rem/1 var(--mono); }
.kc-lb-x { position: absolute; top: 24px; right: 24px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #17110E; cursor: pointer; }
.kc-lb-x .ic { width: 20px; height: 20px; color: #F1E9DE; }
@media (hover: hover) { .kc-lb-x:hover { background: var(--gold); } .kc-lb-x:hover .ic { color: #17110E; } }


/* ===== Case cards on the landing page (each opens its own case page) ===== */
.kh-read { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid rgba(169,133,61,.6); border-radius: 999px; color: var(--espresso); font-weight: 600; transition: color .3s var(--ease), border-color .3s; }
.kh-read::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--espresso); transform: translateY(101%); transition: transform .4s var(--ease); }
.kh-read svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .35s var(--ease); }
.kh-toast { position: fixed; left: 50%; bottom: 96px; z-index: 90; max-width: calc(100vw - 32px); margin: 0; padding: 12px 18px; border-radius: 14px; background: #17110E; color: #F1E9DE; font-size: .92rem; box-shadow: 0 14px 34px rgba(0,0,0,.35); transform: translateX(-50%); }

/* ===== "Our work" round 2 ===== */
a.kh-read { text-decoration: none; }
@media (hover: hover) { a.kh-read:hover { color: var(--bone); border-color: var(--espresso); } a.kh-read:hover::before { transform: none; } a.kh-read:hover svg { transform: translateX(3px); } }
/* 1 · stacking covers */
.kss { margin: 0; padding: 0; list-style: none; }
.ks { position: sticky; top: calc(96px + var(--i) * 30px); margin-bottom: clamp(60px, 14vh, 140px); }
.ks:last-child { margin-bottom: 0; }
.ks-c { position: relative; display: flex; flex-direction: column; height: clamp(460px, calc(100vh - 250px), 660px); overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: #fff;
  box-shadow: 0 -18px 40px -30px rgba(23,17,14,.3), 0 40px 80px -60px rgba(23,17,14,.5); transform-origin: 50% 0; will-change: transform; }
.ks-band { display: flex; align-items: center; justify-content: space-between; flex: none; height: 30px; padding: 0 26px; border-bottom: 1px solid var(--line); background: #FBF8F3; color: var(--accent-text); font: 600 .82rem/1 var(--sans); }
.ks-band span:first-child { display: flex; align-items: center; gap: 8px; } .ks-band .ic { width: 16px; height: 16px; }
.ks-of { color: var(--muted); }
.ks-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: center; min-height: 0; padding: clamp(24px, 3.4vw, 52px); }
.sv h3.ks-cl { margin: 0 0 6px; font: 700 clamp(1.9rem, 3.4vw, 3rem)/1.05 var(--serif); letter-spacing: -0.025em; }
.ks-wh { margin: 0 0 4px !important; color: var(--muted); }
.ks-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 22px 0 12px !important; padding-top: 20px; border-top: 1px solid var(--rule); }
.ks-big b { font: 700 clamp(2.8rem, 5.2vw, 4.6rem)/1 var(--serif); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .ks-big span { max-width: 15em; color: var(--muted); line-height: 1.4; }
.ks-goal { max-width: 28em; margin-bottom: 22px !important; }
.ks-pic .kc-zoom { aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 60px -40px rgba(23,17,14,.5); }
.ks-pic .kc-zoom img { height: 100%; object-fit: cover; object-position: left top; }
.ks-dim { position: absolute; inset: 0; background: #17110E; opacity: 0; pointer-events: none; }
/* every other cover is black (Deepak, 21 Oct); the section behind stays soft bone */
.ks-dk .ks-c { border-color: rgba(205,168,95,.24); background: #17110E; color: #F1E9DE; box-shadow: 0 -18px 40px -30px rgba(23,17,14,.45), 0 40px 80px -50px rgba(23,17,14,.7); }
.ks-dk .ks-band { border-color: rgba(205,168,95,.18); background: #201915; color: #CDA85F; } .ks-dk .ks-of, .ks-dk .ks-wh, .ks-dk .ks-big span { color: #B9AA98; }
.ks-dk .ks-big { border-color: rgba(205,168,95,.22); }
.ks-dk .kh-read { border-color: rgba(205,168,95,.6); color: #F1E9DE; } .ks-dk .kh-read::before { background: #CDA85F; }
@media (hover: hover) { .ks-dk a.kh-read:hover { border-color: #CDA85F; color: #17110E; } }
.ks-dk .ks-pic .kc-zoom { border-color: rgba(205,168,95,.2); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.ks-dk .ks-dim { background: #000; }
/* 2 · numbers made of proof */
.kns { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.kn { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 70px); align-items: center; padding: clamp(36px, 6vh, 64px) 0; border-bottom: 1px solid var(--rule); }
.kn-num { position: relative; overflow: hidden; padding-bottom: .06em; font: 700 clamp(4.2rem, calc(var(--k) * 1vw), 15rem)/.9 var(--serif); letter-spacing: -0.05em; white-space: nowrap; }
.kn-ink, .kn-img { display: block; transition: opacity .7s var(--ease), transform 1s var(--ease); }
.kn-ink { color: var(--espresso); }
.kn-img { position: absolute; left: 0; top: 0; color: transparent; background-position: left top; background-size: cover; -webkit-background-clip: text; background-clip: text; opacity: 0; }
.kn:not(.seen) .kn-ink, .kn:not(.seen) .kn-img { transform: translateY(100%); }
.kn.on .kn-ink { opacity: 0; } .kn.on .kn-img { opacity: 1; }
.kn-w { display: flex; align-items: center; gap: 8px; margin-bottom: 10px !important; color: var(--accent-text); font: 600 .88rem/1.3 var(--sans); } .kn-w .ic { width: 18px; height: 18px; }
.sv h3.kn-cl { margin: 0 0 10px; font: 700 clamp(1.6rem, 2.4vw, 2.1rem)/1.1 var(--serif); letter-spacing: -0.02em; }
.kn-res { margin-bottom: 8px !important; } .kn-res b { font-weight: 600; }
.kn-goal { margin-bottom: 22px !important; color: var(--muted); }
.kn-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.kc-zoom.kw-proof { display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 48px; padding: 0 6px; overflow: visible; border-radius: 999px; background: transparent; color: var(--ink); font: 600 .95rem/1 var(--sans); }
.kw-proof .ic { width: 18px; height: 18px; color: var(--accent-text); } .kw-proof span { border-bottom: 1px solid rgba(169,133,61,.5); padding-bottom: 2px; }
@media (hover: hover) { .kw-proof:hover span { border-color: var(--espresso); } }
/* 3 · question on the front, answer on the back */
.kfs { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.kf { flex: 0 0 calc((100% - 44px) / 3); height: 450px; perspective: 1400px; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 90ms); }
.ax:not(.in) .kf { opacity: 0; transform: translateY(30px); }
.kf-in { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .9s var(--ease); }
.kf.on .kf-in { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) { .kf:hover .kf-in { transform: rotateY(180deg); } }
.kf-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 30px; border-radius: 24px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kf-front { border: 1px solid var(--line); background: #fff; box-shadow: 0 30px 60px -44px rgba(23,17,14,.45); }
.kf-back { background: #17110E; color: #F1E9DE; transform: rotateY(180deg); }
.kf-w { display: flex; align-items: center; gap: 8px; margin: 0 !important; color: var(--accent-text); font: 600 .88rem/1.3 var(--sans); } .kf-w .ic { width: 18px; height: 18px; }
.kf-q { margin: 34px 0 auto !important; font: 700 clamp(1.6rem, 2.3vw, 2.1rem)/1.15 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.kf-cl { margin: 0 0 20px !important; font-weight: 600; } .kf-cl span { display: block; color: var(--muted); font-size: .92rem; font-weight: 400; }
.kf-turn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent-text); font: 600 .95rem/1 var(--sans); cursor: pointer; }
.kf-turn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.kf-big { margin: 0 !important; } .kf-big b { display: block; color: #CDA85F; font: 700 clamp(3rem, 4.4vw, 4.2rem)/1 var(--serif); letter-spacing: -0.03em; } .kf-big span { display: block; margin-top: 8px; color: #CBBBA6; font-size: .95rem; line-height: 1.4; }
.kf-pic { display: block; margin: 18px 0 auto; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 9; } .kf-pic img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.kf-back .kh-read { align-self: flex-start; margin-top: 18px; border-color: rgba(205,168,95,.6); color: #F1E9DE; } .kf-back .kh-read::before { background: #CDA85F; }
@media (hover: hover) { .kf-back a.kh-read:hover { color: #17110E; border-color: #CDA85F; } }
.kf-hint { display: none; margin: 22px 0 0 !important; color: var(--muted); font-size: .92rem; text-align: center; }
@media (hover: none) { .kf-hint { display: block; } }

/* ===== "More work" round 2 (dark band) ===== */
/* 1 · sealed envelopes */
.kes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 26px; margin: 0; padding: 0; list-style: none; }
.ke { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 50ms); }
.ax:not(.in) .ke { opacity: 0; transform: translateY(24px); }
.ke-a { display: block; padding-top: 34px; text-decoration: none; }
.ke-env { position: relative; display: block; aspect-ratio: 1.55; perspective: 700px; transform: rotate(var(--r)); transition: transform .5s var(--ease); filter: drop-shadow(0 18px 22px rgba(0,0,0,.35)); }
.ke-a:hover .ke-env, .ke-a:focus-visible .ke-env, .ke-a.open .ke-env { transform: rotate(0deg); }
.ke-back { position: absolute; inset: 0; border-radius: 8px; background: #DCCDB7; }
.ke-note { position: absolute; left: 18%; right: 18%; top: 14%; z-index: 1; display: flex; align-items: flex-start; justify-content: center; height: 46%; padding: 10px 10px 0; border-radius: 6px; background: #FFFDF9; color: #7A5A16; font: italic 700 .9rem/1.3 var(--serif); text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,.14); transition: transform .55s var(--ease); }
.ke-note svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ke-pocket { position: absolute; inset: 0; z-index: 2; border-radius: 8px; background: #F1E9DE; clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); }
.ke-flap { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 60%; border-radius: 8px 8px 0 0; background: #E6D9C6; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transition: transform .5s var(--ease), z-index 0s .25s; }
.ke-seal { position: absolute; left: 50%; top: 60%; z-index: 4; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #E9C985, #CDA85F 55%, #9C7A35); box-shadow: 0 4px 10px rgba(0,0,0,.35); transition: transform .4s var(--ease), opacity .3s; }
.ke-seal .ic { width: 20px; height: 20px; color: #3A2A10; }
.ke-a:hover .ke-flap, .ke-a:focus-visible .ke-flap, .ke-a.open .ke-flap { z-index: 0; transform: rotateX(180deg); transition: transform .5s var(--ease), z-index 0s; }
.ke-a:hover .ke-seal, .ke-a:focus-visible .ke-seal, .ke-a.open .ke-seal { opacity: 0; transform: scale(.4) rotate(-20deg); }
.ke-a:hover .ke-note, .ke-a:focus-visible .ke-note, .ke-a.open .ke-note { transform: translateY(-62%); transition-delay: .15s; }
.ke-lab { display: block; margin-top: 16px; } .ke-lab b { display: block; font: 700 1.12rem/1.25 var(--serif); } .ke-lab span { display: block; margin-top: 3px; color: var(--muted); font-size: .9rem; }
/* 2 · orbit */
.ko { position: relative; width: min(880px, 100%); aspect-ratio: 1; margin: 30px auto 0; }
.ko-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ko-lines line { stroke: rgba(205,168,95,.3); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; transition: stroke .3s; }
.ko-lines line.on { stroke: #CDA85F; stroke-dasharray: none; stroke-width: 2; }
.ko-ns { margin: 0; padding: 0; list-style: none; }
.ko-n { position: absolute; transform: translate(-50%, -50%); transition: opacity .6s var(--ease); transition-delay: calc(var(--i) * 60ms); }
.ax:not(.in) .ko-n { opacity: 0; }
.ko-n a { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 136px; padding: 12px 10px; border: 1px solid var(--rule); border-radius: 16px; background: var(--panel); text-align: center; text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.ko-ic { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 2px; border-radius: 50%; background: rgba(205,168,95,.13); transition: background .3s; } .ko-ic .ic { width: 20px; height: 20px; color: #CDA85F; transition: color .3s; }
.ko-n b { font: 700 .98rem/1.2 var(--serif); } .ko-n a > span:last-child { color: var(--muted); font-size: .82rem; transition: color .3s; }
.ko-n a.on { border-color: #F1E9DE; background: #F1E9DE; color: #17110E; } .ko-n a.on .ko-ic { background: #CDA85F; } .ko-n a.on .ic { color: #17110E; } .ko-n a.on > span:last-child { color: #5F5A55; }
.ko-mid { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 44%; aspect-ratio: 1; padding: 5%; border: 1px solid rgba(205,168,95,.4); border-radius: 50%; background: radial-gradient(circle, #2A211B, #1D1612); text-align: center; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 14px rgba(205,168,95,.05), 0 0 0 30px rgba(205,168,95,.03); }
.ko-lock { width: 30px; height: 30px; margin-bottom: 10px; color: #CDA85F; }
.ko-q { margin-bottom: 8px !important; font: 700 clamp(1.1rem, 1.7vw, 1.45rem)/1.2 var(--serif); }
.ko-cap { min-height: 2.8em; margin-bottom: 14px !important; color: var(--muted); font-size: .88rem; line-height: 1.4 !important; }
.ko-mid .btn { min-height: 46px; padding: 0 18px; font-size: .92rem; }
/* 3 · card file */
.kx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.kx-q { margin-bottom: 14px !important; font: 700 clamp(1.6rem, 2.6vw, 2.2rem)/1.2 var(--serif); } .kx-copy p:not(.kx-q) { max-width: 30em; margin-bottom: 28px !important; color: var(--muted); }
.kx-file { position: relative; padding-top: 80px; }
.kx-cs { position: relative; height: 300px; margin: 0; padding: 0; list-style: none; perspective: 1400px; perspective-origin: 50% 130%; }
.kx-c { position: absolute; left: 0; right: 0; bottom: 0; height: 290px; padding: 40px 30px 26px; border-radius: 14px; background: #F6F0E6; color: #17110E; cursor: pointer;
  transform: translateY(calc(var(--p, 0) * -18px)) scale(calc(1 - var(--p, 0) * .045)); transform-origin: 50% 100%; transition: transform .7s var(--ease), opacity .5s var(--ease); box-shadow: 0 20px 40px -20px rgba(0,0,0,.7); }
.kx-c.gone { opacity: 0; transform: rotateX(-96deg); pointer-events: none; }
.kx-c.far { opacity: 0; }
.kx-tab { position: absolute; top: -28px; left: var(--tx); display: flex; align-items: center; height: 30px; padding: 0 16px; border-radius: 10px 10px 0 0; background: #F6F0E6; color: #7A5A16; font: 600 .82rem/1 var(--sans); }
.kx-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: rgba(169,133,61,.15); } .kx-ic .ic { width: 22px; height: 22px; color: #7A5A16; }
.kx-ind { display: block; margin-bottom: 8px; font: 700 clamp(1.6rem, 2.4vw, 2.1rem)/1.15 var(--serif); }
.kx-p { display: block; color: #5F5A55; }
.kx-lines { position: absolute; left: 30px; right: 30px; bottom: 54px; height: 41px; background: repeating-linear-gradient(to bottom, transparent 0 19px, rgba(23,17,14,.09) 19px 20px); }
.kx-box { position: relative; z-index: 40; display: flex; align-items: center; justify-content: center; height: 96px; margin-top: -44px; border: 1px solid rgba(205,168,95,.3); border-radius: 6px 6px 18px 18px; background: linear-gradient(#2A211B, #1D1612); box-shadow: 0 30px 50px -30px rgba(0,0,0,.8); }
.kx-box span { padding: 6px 14px; border: 1px solid rgba(205,168,95,.55); border-radius: 4px; color: #CDA85F; font: 600 .8rem/1 var(--mono); letter-spacing: .08em; }
.kx-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.kx-nav button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--panel); color: var(--ink); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.kx-nav .ic { width: 18px; height: 18px; } .kx-ct { min-width: 5em; color: var(--muted); font: 600 .85rem/1 var(--mono); text-align: center; }
@media (hover: hover) { .kx-nav button:hover { border-color: #CDA85F; background: #CDA85F; color: #17110E; } }
@media (max-width: 1100px) { .kes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kf { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 900px) {
  .ks { position: static; margin-bottom: 22px; } .ks-c { height: auto; transform: none !important; } .ks-body { grid-template-columns: minmax(0, 1fr); } .ks-pic { order: -1; } .ks-dim { display: none; }
  .kn { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .kx { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .kes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } .ke-note { left: 12%; right: 12%; height: 52%; padding: 7px 6px 0; font-size: .78rem; } .ke-seal { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  .ko { aspect-ratio: auto; margin-top: 0; } .ko-lines { display: none; }
  .ko-mid { position: relative; left: auto; top: auto; width: 100%; aspect-ratio: auto; margin-bottom: 20px; padding: 30px 22px; border-radius: 24px; transform: none; box-shadow: none; }
  .ko-ns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ko-n { position: static; transform: none; } .ko-n a { width: auto; height: 100%; }
  .kf { flex-basis: 100%; height: 430px; }
  .kx-c { padding: 34px 22px 22px; } .kx-tab { left: calc(var(--tx) * .5); }
}
@media (prefers-reduced-motion: reduce) {
  .kf, .kf-in, .ke, .ke-flap, .ke-note, .ke-seal, .ko-n, .kx-c, .kn-ink, .kn-img { transition: none !important; }
  .ks { position: static; margin-bottom: 22px; } .ks-c { height: auto; min-height: 460px; }
}


/* ===== the separate case pages (21 Oct; first: Dr. Mehta's) ===== */
.cq-copy h1 { max-width: 15em; }
.cq-f { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 26px; margin: 6px 0 32px; }
.cq-f div { padding-left: 14px; border-left: 2px solid var(--gold); } .cq-f dt { margin-bottom: 4px; color: var(--muted); font-size: .82rem; } .cq-f dd { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.35; }
/* top 1 · the proof rises under the headline */
.cq-t1 .cq-copy { max-width: 900px; }
.cq-rise { margin: clamp(48px, 8vh, 84px) 0 0; perspective: 1600px; }
.cq-rise .kc-zoom { border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 50px 90px -50px rgba(23,17,14,.55); transform-origin: 50% 100%; transition: transform 1.4s var(--ease) .25s, opacity 1s var(--ease) .25s; }
.ax:not(.in) .cq-rise .kc-zoom { opacity: 0; transform: rotateX(16deg) translateY(50px) scale(.94); }
.cq-rise figcaption { margin-top: 14px; color: var(--muted); font-size: .9rem; }
/* top 2 · the result beside the headline */
.cq-t2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 5vw, 90px); align-items: center; }
.cq-card { padding: clamp(26px, 3vw, 42px); border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: 0 40px 80px -56px rgba(23,17,14,.5); }
.cq-k { margin-bottom: 6px !important; color: var(--muted); font-weight: 600; }
.cq-huge { margin: 0 !important; } .cq-huge b { display: block; font: 700 clamp(4.5rem, 9vw, 8rem)/.9 var(--serif); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.cq-card .kc2-ba { max-width: none; }
.cq-cs { margin: 18px 0 6px !important; color: var(--muted); font-size: .88rem; }
/* problem and fix 1 · side by side, a line draws across */
.cq-p1 { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.cq-r { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); gap: 10px; align-items: center; }
.cq-was, .cq-now { position: relative; padding: 26px 28px; border-radius: 20px; }
.cq-was { border: 1px dashed rgba(23,17,14,.2); background: rgba(23,17,14,.035); color: #3E3631; }
.cq-now { border: 1px solid var(--line); background: #fff; box-shadow: 0 24px 50px -40px rgba(23,17,14,.45); transition: opacity .8s var(--ease) .55s, transform .8s var(--ease) .55s; }
.cq-r:not(.in) .cq-now { opacity: 0; transform: translateX(-22px); }
.cq-ic { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%; }
.cq-was .cq-ic { background: rgba(23,17,14,.08); } .cq-was .cq-ic .ic { width: 16px; height: 16px; color: #5F5A55; }
.cq-now .cq-ic { background: #CDA85F; } .cq-now .cq-ic .ic { width: 18px; height: 18px; color: #17110E; }
.cq-l { margin-bottom: 8px !important; color: var(--muted); font: 600 .8rem/1 var(--sans); } .cq-now .cq-l { color: var(--accent-text); }
.cq-was p:last-child, .cq-now p:last-child { margin: 0 !important; font-size: 1.05rem; line-height: 1.55; }
.cq-arrow { justify-self: center; width: 80px; height: 20px; fill: none; stroke: #A9853D; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cq-arrow path { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1s var(--ease) .3s; } .cq-r.in .cq-arrow path { stroke-dashoffset: 0; }
/* problem and fix 2 · switch cards */
.cq-p2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.cq-sc { display: flex; flex-direction: column; min-height: 330px; padding: 22px 24px 28px; border: 1px dashed rgba(23,17,14,.22); border-radius: 22px; background: rgba(23,17,14,.035); transition: background .5s, border-color .5s, box-shadow .5s; }
.cq-sc.fix { border: 1px solid #CDA85F; background: #fff; box-shadow: 0 30px 60px -44px rgba(23,17,14,.45); }
.cq-sw { display: inline-flex; align-self: flex-start; padding: 4px; border-radius: 999px; background: rgba(23,17,14,.07); }
.cq-sw button { min-height: 40px; padding: 0 15px; border: 0; border-radius: 999px; background: transparent; color: #5F5A55; font: 600 .85rem/1 var(--sans); cursor: pointer; transition: background .3s, color .3s; }
.cq-sw button[aria-pressed="true"] { background: #17110E; color: #F1E9DE; } .cq-sc.fix .cq-sw button[aria-pressed="true"] { background: #CDA85F; color: #17110E; }
.cq-sci { display: grid; place-items: center; width: 48px; height: 48px; margin: 32px 0 18px; border-radius: 50%; background: rgba(169,133,61,.14); } .cq-sci .ic { color: #7A5A16; }
.cq-st { display: grid; } .cq-st p { grid-area: 1 / 1; margin: 0 !important; font: 700 clamp(1.2rem, 1.6vw, 1.4rem)/1.38 var(--serif); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.cq-s1 { opacity: 0; transform: translateY(10px); } .cq-sc.fix .cq-s0 { opacity: 0; transform: translateY(-10px); } .cq-sc.fix .cq-s1 { opacity: 1; transform: none; }
/* problem and fix 3 · struck through, then fixed */
.cq-p3 { position: relative; max-width: 920px; padding-left: 46px; }
.cq-rail { position: absolute; left: 10px; top: 10px; bottom: 10px; width: 2px; background: var(--rule); } .cq-rail i { position: absolute; inset: 0; background: #CDA85F; transform: scaleY(var(--p, 0)); transform-origin: top; }
.cq-xs { display: grid; gap: clamp(60px, 12vh, 120px); margin: 0; padding: 0; list-style: none; }
.cq-xa { margin: 0 0 16px !important; color: var(--ink); font: 700 clamp(1.5rem, 2.6vw, 2.2rem)/1.32 var(--serif); letter-spacing: -0.015em; transition: color .6s; }
.cq-xa span { background: linear-gradient(#CDA85F, #CDA85F) no-repeat 0 60% / 0% 3px; transition: background-size .9s var(--ease); }
.cq-x.on .cq-xa { color: #8A8178; } .cq-x.on .cq-xa span { background-size: 100% 3px; }
.cq-xb { display: flex; align-items: flex-start; gap: 12px; margin: 0 !important; font-size: 1.12rem; line-height: 1.55; opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease) .35s, transform .7s var(--ease) .35s; }
.cq-xb .ic { flex: none; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: #CDA85F; color: #17110E; } .cq-x.on .cq-xb { opacity: 1; transform: none; }
/* results 1 · pins (uses the kc3 viewer) */
.kc3-pin.up { margin: -64px 0 0 -22px; }
.cq-nr { margin: 0 0 16px !important; } .cq-nr b { display: block; font: 700 clamp(2.6rem, 4.4vw, 3.8rem)/1 var(--serif); letter-spacing: -0.03em; } .cq-nr span { display: block; margin-top: 6px; color: var(--muted); }
.kc3-n ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cq-r1 .kc3-side .kc-sub { margin-top: 0; }
.cq-ex { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 34px 0 0; padding: 0; list-style: none; }
.cq-ex li { padding: 24px 26px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.cq-ex .cq-rv b { font-size: clamp(2.6rem, 4.4vw, 3.6rem); }
/* results 2 · result cards */
.cq-r2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.cq-rc { padding: clamp(24px, 2.6vw, 36px); border: 1px solid var(--line); border-radius: 22px; background: #fff; transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .3s; transition-delay: calc(var(--i) * 70ms), calc(var(--i) * 70ms), 0s; }
.cq-rc.big { grid-column: 1 / -1; } .ax:not(.in) .cq-rc { opacity: 0; transform: translateY(24px); }
@media (hover: hover) { .cq-rc:hover { border-color: #CDA85F; } }
.cq-rv { margin: 0 0 6px !important; } .cq-rv b { font: 700 clamp(2.8rem, 5vw, 4.4rem)/1 var(--serif); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .cq-rc.big .cq-rv b { font-size: clamp(4rem, 8vw, 7rem); }
.cq-rl { margin-bottom: 6px !important; font-size: 1.08rem; font-weight: 600; } .cq-rt { margin-bottom: 0 !important; color: var(--muted); }
.cq-rc .kc2-ba { margin: 18px 0 4px; }
.cq-ths { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.kc-zoom.cq-th { width: 136px; height: 84px; border: 1px solid var(--line); border-radius: 10px; } .cq-th img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.cq-th .kc-zi { right: 6px; bottom: 6px; width: 30px; height: 30px; opacity: 1; transform: none; } .cq-th .kc-zi .ic { width: 14px; height: 14px; }
/* results 3 · scroll story */
.cq-s3 { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 5vw, 90px); align-items: start; }
.cq-ss { margin: 0; padding: 0; list-style: none; }
.cq-s { display: flex; flex-direction: column; justify-content: center; min-height: 62vh; padding: 20px 0; opacity: .3; transition: opacity .5s var(--ease); } .cq-s.on { opacity: 1; }
.cq-si { display: none; }
.cq-sf { position: sticky; top: 110px; } .cq-spin { position: relative; height: min(70vh, 600px); }
.cq-sp { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; margin: 0; opacity: 0; pointer-events: none; transform: scale(.97); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.cq-sp.on { opacity: 1; pointer-events: auto; transform: none; }
.cq-sp .kc-zoom { display: flex; justify-content: center; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 40px 80px -50px rgba(23,17,14,.5); }
.cq-sp .kc-zoom img { width: auto; max-width: 100%; max-height: min(56vh, 520px); }
.cq-sp figcaption { margin-top: 12px; color: var(--muted); font-size: .9rem; }
/* what we learned (dark) */
.sv h2.cq-quote { max-width: 17em; font-size: clamp(2.2rem, 4.6vw, 4rem); }
.cq-band .rls { margin-top: clamp(40px, 6vh, 70px); }
@media (max-width: 900px) {
  .cq-t2, .cq-s3 { grid-template-columns: minmax(0, 1fr); }
  .cq-r { grid-template-columns: minmax(0, 1fr); } .cq-arrow { transform: rotate(90deg); height: 40px; } .cq-r:not(.in) .cq-now { transform: translateY(-16px); }
  .cq-p2 { grid-template-columns: minmax(0, 1fr); } .cq-sc { min-height: 0; }
  .cq-sf { display: none; } .cq-s { min-height: 0; padding: 24px 0; opacity: 1; } .cq-si { display: block; margin-top: 16px; } .cq-si .kc-zoom { border: 1px solid var(--line); border-radius: 14px; }
}
@media (max-width: 760px) { .cq-r2 { grid-template-columns: minmax(0, 1fr); } .cq-p3 { padding-left: 30px; } .cq-rail { left: 4px; } }
@media (prefers-reduced-motion: reduce) {
  .cq-rise .kc-zoom, .cq-now, .cq-arrow path, .cq-st p, .cq-xa, .cq-xa span, .cq-xb, .cq-rc, .cq-s, .cq-sp { transition: none !important; }
}

/* ===== smaller screens ===== */
@media (max-width: 900px) {
  .kt1 { grid-template-columns: minmax(0, 1fr); gap: 34px; }   /* 21 Oct: the hero stacks on phones and tablets (headline was squeezed to ~144 px) */
  .kt1-stage { width: 100%; max-width: 560px; aspect-ratio: 1.35; margin-inline: auto; }
  .kt2-r { grid-template-columns: minmax(0, 1fr) 92px; gap: 6px 16px; padding: 22px 6px; }
  .kt2-w, .kt2-c, .kt2-v { grid-column: 1; } .kt2-v { flex-wrap: wrap; gap: 4px 12px; }
  .kt2-th { display: block; grid-column: 2; grid-row: 1 / span 3; align-self: center; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; aspect-ratio: 1; }
  .kt2-th img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
  .kt2-go, .kt2-float { display: none; }
  .kc2-cols { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kc-more { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {   /* 21 Oct: the pins viewer stacks (picture, then the list) instead of two squeezed columns */
  .kc3-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } .kc3-view { position: static; }
}
@media (max-width: 560px) {
  .kc1-stack { aspect-ratio: 16 / 13; }
  .kc-phones { gap: 6px; }
  .kc-more { grid-template-columns: 1fr; }
  .kc3-pin { width: 40px; height: 40px; margin: -20px 0 0 -42px; } .kc3-pin span { width: 24px; height: 24px; font-size: .78rem; }
  .kc-lb-in { padding: 10px; } .kc-lb-x { top: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .kt3-time { display: none; }
}