/* AI showcase — sibling of the portfolio, same tokens, own rhythm. */
:root{--ai-wash:#eee8f5;--ai-deep:#2b2140;--ai-line:#cdc4dd}

/* scroll progress (both sites) */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;z-index:120;pointer-events:none}
.no-motion .scroll-progress{display:none}

/* ---- hero ---- */
.ai-top{background:var(--purple)}
.ai-hero{padding:70px 0 84px}
.ai-hero h1{font-size:clamp(50px,7.6vw,124px);max-width:1180px;margin:26px 0 34px}
.ai-hero .lede{max-width:760px;font-size:23px}
.ai-hero-foot{display:flex;flex-wrap:wrap;gap:26px;align-items:center;margin-top:52px;padding-top:26px;border-top:1px solid #211f2640;font-size:15px}
.pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ink);border-radius:40px;padding:13px 24px;font-size:16px;transition:transform .25s var(--ease),background .25s var(--ease)}
.pill:hover{background:var(--ink);color:var(--paper)}

/* ---- evidence ---- */
.ai-figures{background:var(--paper);border-bottom:1px solid var(--line)}
.ai-figures-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;padding:52px 0}
.ai-figures-grid div{border-left:2px solid var(--purple);padding-left:20px}
.ai-figures-grid strong{display:block;font-family:Syne,sans-serif;font-size:clamp(30px,3.6vw,52px);letter-spacing:-.05em;line-height:1.05}
.ai-figures-grid span{display:block;font-size:15px;margin-top:10px;max-width:230px}

/* ---- principles ---- */
.ai-principles{background:var(--ai-wash);padding:96px 0;border-bottom:1px solid var(--line)}
.ai-principles h2{font-size:clamp(38px,4.6vw,70px);max-width:900px;margin-bottom:20px}
.ai-principles .lede{max-width:660px;font-size:19px}
.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:60px}
.principle{background:var(--paper);border:1px solid var(--ai-line);padding:34px 30px 30px;position:relative;overflow:hidden}
.principle:before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease);background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(187,164,242,.34),transparent 70%);pointer-events:none}
.principle:hover:before{opacity:1}
.principle h3{font-family:Syne,sans-serif;font-size:24px;letter-spacing:-.03em;margin:18px 0 12px;position:relative}
.principle p{font-size:16px;position:relative}
.principle .num{font-family:Syne,sans-serif;font-size:14px;letter-spacing:.1em;color:#6b5f7d;position:relative}

/* ---- case index ---- */
.ai-cases{padding:100px 0}
.ai-cases .section-heading{margin-bottom:20px}
.case-card{display:grid;grid-template-columns:88px 1fr 1.05fr;gap:5%;align-items:center;padding:44px 0;border-top:1px solid var(--ink);position:relative;transition:background .35s var(--ease)}
.case-card:last-of-type{border-bottom:1px solid var(--ink)}
.case-card:hover{background:#efeae2}
.case-card .idx{font-family:Syne,sans-serif;font-size:19px;letter-spacing:.06em;align-self:start;padding-top:6px}
.case-card h3{font-family:Syne,sans-serif;font-size:clamp(27px,2.9vw,42px);letter-spacing:-.04em;margin:14px 0 16px;max-width:16ch}
.case-card p{font-size:17px;max-width:46ch}
.case-card .stat{display:flex;gap:22px;flex-wrap:wrap;margin-top:24px;font-size:14px}
.case-card .stat b{font-family:Syne,sans-serif;font-size:26px;letter-spacing:-.04em;display:block;line-height:1.1}
.case-card .stat i{font-style:normal;display:block;max-width:150px;color:#57525c;margin-top:4px}
.case-shot{position:relative;overflow:hidden;background:#e4dcef;aspect-ratio:16/9}
.case-shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.case-card:hover .case-shot img{transform:scale(1.04)}
.case-go{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-size:16px;position:relative}
.case-go:after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.case-card:hover .case-go:after{transform:scaleX(1)}

/* ---- case detail additions ---- */
.case-rail{position:sticky;top:104px;align-self:start;display:flex;flex-direction:column;gap:11px;font-size:14px;border-left:1px solid var(--line);padding-left:18px}
.case-rail a{color:#6c6672;transition:color .25s var(--ease),transform .25s var(--ease)}
.case-rail a[aria-current=true]{color:var(--ink);font-weight:600;transform:translateX(3px)}
.case-layout{display:grid;grid-template-columns:200px 1fr;gap:52px;max-width:1220px;margin:auto;padding:64px 5%}
.case-layout .case-section{grid-template-columns:.55fr 1.45fr}
.callout{background:var(--ai-wash);border-left:3px solid var(--purple);padding:26px 30px;margin:28px 0}
.callout p{font-size:17px}
.callout .eyebrow{margin-bottom:10px;display:block}
.ledger{border-top:1px solid var(--line);margin-top:26px}
.ledger div{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:15px 0;border-bottom:1px solid var(--line);font-size:16px}
.ledger b{font-family:Syne,sans-serif;letter-spacing:-.03em;white-space:nowrap}

/* before / after */
.compare{position:relative;overflow:hidden;border:1px solid var(--line);--split:50%}
.compare img{display:block;width:100%}
.compare .after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 0 var(--split))}
.compare input{position:absolute;inset:auto 0 16px;width:calc(100% - 40px);margin:0 20px}
.compare figcaption{font-size:14px;color:#59545b;padding:10px 2px}

@media(max-width:980px){
 .ai-figures-grid{grid-template-columns:repeat(2,1fr)}
 .principle-grid{grid-template-columns:1fr}
 .case-card{grid-template-columns:52px 1fr;gap:22px}
 .case-shot{grid-column:1/-1;margin-top:22px}
 .case-layout{grid-template-columns:1fr;gap:0}
 .case-rail{display:none}
}
@media(max-width:560px){
 .ai-figures-grid{grid-template-columns:1fr;gap:26px}
 .ai-hero .lede{font-size:19px}
 .case-card h3{font-size:30px}
}
@media(prefers-reduced-motion:reduce){.scroll-progress{display:none}}