/* ===== styles.css ===== */
:root{--ink:#171914;--muted:#65685f;--paper:#f4f1eb;--card:#fffdf8;--lime:#d9ff57;--coral:#ff6b4a;--line:rgba(23,25,20,.14);--max:1440px;--radius:28px;--shadow:0 22px 60px rgba(25,28,20,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font:inherit}.skip-link{position:fixed;left:16px;top:-80px;z-index:99;background:var(--ink);color:white;padding:12px 18px;border-radius:999px}.skip-link:focus{top:16px}.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;width:min(calc(100% - 48px),var(--max));margin:18px auto;padding:12px 14px 12px 18px;border:1px solid var(--line);border-radius:999px;background:rgba(244,241,235,.84);backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:10px;font-size:14px}.brand-avatar{position:relative;display:block;width:34px;height:34px;flex:0 0 34px;overflow:hidden;border:1px solid rgba(23,25,20,.12);border-radius:50%;background:#f7f5f1}.brand-avatar img{position:absolute;left:50%;top:-1px;width:48px;max-width:none;height:auto;transform:translateX(-50%)}.site-header nav{display:flex;align-items:center;gap:28px;font-size:14px}.site-header nav a:last-child{background:var(--ink);color:white;padding:11px 17px;border-radius:999px}.menu-toggle{display:none;background:none;border:0}.hero,.page,.case{width:min(calc(100% - 48px),var(--max));margin:0 auto}.hero{min-height:calc(100vh - 100px);display:grid;grid-template-columns:1.15fr .85fr;gap:8vw;align-items:center;padding:70px 0 100px}.kicker,.eyebrow{display:block;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:700}.hero h1{font-size:clamp(56px,8vw,118px);line-height:.88;letter-spacing:-.07em;margin:18px 0 34px;max-width:880px}.hero h1 em,.site-footer h2 em{font-family:Georgia,serif;font-weight:400}.hero-copy{font-size:clamp(19px,2vw,27px);color:var(--muted);max-width:680px}.hero-actions{display:flex;gap:14px;margin-top:38px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border:1px solid var(--ink);border-radius:999px;font-weight:700;transition:.25s}.button.primary{background:var(--ink);color:white}.button:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.12)}.portrait-wrap{position:relative;aspect-ratio:4/5;max-width:480px;justify-self:end;border-radius:240px 240px 32px 32px;background:var(--coral);overflow:hidden;box-shadow:var(--shadow)}.portrait-wrap:after{content:"10+ years\A designing impact";white-space:pre;position:absolute;right:20px;bottom:20px;background:var(--lime);padding:15px 18px;border-radius:50%;width:118px;height:118px;display:grid;place-items:center;text-align:center;font-size:13px;font-weight:800;transform:rotate(8deg)}.portrait-wrap img{width:100%;height:100%;object-fit:cover;object-position:center top}.section{padding:110px 0}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:42px}.section-head h2,.page-title{font-size:clamp(44px,6vw,82px);letter-spacing:-.055em;line-height:1;margin:10px 0}.section-head p{max-width:440px;color:var(--muted);font-size:18px}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.project-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.35s}.project-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.project-card .visual{aspect-ratio:16/10;background:#e9ebe4;overflow:hidden}.project-card img{width:100%;height:100%;object-fit:cover;transition:.6s}.project-card:hover img{transform:scale(1.035)}.project-card .meta{padding:24px 26px 28px}.project-card h3{font-size:28px;letter-spacing:-.03em;margin:5px 0 8px}.tags{font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:#9a3f2d;font-weight:800}.project-card p{color:var(--muted);margin:0}.impact-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.stat{background:var(--card);padding:36px}.stat strong{font-size:clamp(42px,5vw,72px);letter-spacing:-.06em}.stat span{display:block;color:var(--muted)}.page{padding:80px 0 120px}.page-intro{max-width:800px;font-size:22px;color:var(--muted)}.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}.shot{background:var(--card);border-radius:20px;overflow:hidden;border:1px solid var(--line)}.shot img{aspect-ratio:3/2;width:100%;object-fit:cover}.shot span{display:block;padding:14px 16px;font-weight:700}.case{padding:24px 0 130px}.case-hero{min-height:72vh;display:flex;flex-direction:column;justify-content:flex-end;padding:50px;border-radius:40px;background:var(--ink);color:white;overflow:hidden;position:relative}.case-hero:after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;right:-80px;top:-120px;background:var(--accent,var(--lime));filter:blur(2px)}.case-hero>*{position:relative;z-index:1}.case-hero h1{font-size:clamp(56px,8vw,112px);line-height:.9;letter-spacing:-.065em;margin:18px 0 26px;max-width:1000px}.case-hero p{font-size:22px;max-width:720px;color:#d5d6cf}.case-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:26px 0 110px}.fact{padding:24px 0;border-top:1px solid var(--line)}.fact b{display:block;margin-top:8px}.story{display:grid;grid-template-columns:280px minmax(0,760px);gap:80px;justify-content:center;padding:80px 0}.story aside{position:sticky;top:120px;height:max-content}.story article h2{font-size:clamp(38px,5vw,64px);letter-spacing:-.05em;line-height:1.03;margin:0 0 24px}.story article h3{font-size:26px;margin-top:50px}.story article p,.story article li{font-size:19px;color:var(--muted)}.story article blockquote{margin:50px 0;padding:32px;border-radius:22px;background:var(--card);font-family:Georgia,serif;font-size:30px;line-height:1.25}.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:34px 0}.metric{background:var(--lime);border-radius:22px;padding:24px}.metric strong{font-size:54px;letter-spacing:-.06em}.metric span{display:block}.process{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:30px 0}.process span{padding:18px 12px;border:1px solid var(--line);border-radius:14px;text-align:center;font-size:13px;font-weight:700}.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:8vw;align-items:start}.resume-list{margin-top:55px}.role{display:grid;grid-template-columns:220px 1fr;gap:30px;padding:34px 0;border-top:1px solid var(--line)}.role h3{margin:0;font-size:25px}.role p{margin:7px 0;color:var(--muted)}.pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}.pill{border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-size:13px;font-weight:700}.site-footer{background:var(--ink);color:white;padding:100px max(24px,calc((100% - var(--max))/2));display:grid;grid-template-columns:1fr auto;gap:70px}.site-footer h2{font-size:clamp(58px,8vw,112px);letter-spacing:-.065em;line-height:.9;margin:18px 0}.footer-links{display:flex;flex-direction:column;justify-content:end;gap:15px;font-size:18px}.site-footer>p{grid-column:1/-1;color:#a9aca3;border-top:1px solid #3b3d37;padding-top:22px}.reveal{animation:reveal .65s both}@keyframes reveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:40px}.portrait-wrap{justify-self:start;width:min(100%,430px)}.project-grid{grid-template-columns:1fr}.impact-strip{grid-template-columns:1fr}.shots{grid-template-columns:repeat(2,1fr)}.story{grid-template-columns:1fr;gap:24px}.story aside{position:static}.case-facts{grid-template-columns:1fr}.process{grid-template-columns:1fr 1fr}.about-grid{grid-template-columns:1fr}.role{grid-template-columns:1fr}.site-footer{grid-template-columns:1fr}}@media(max-width:640px){.site-header{width:calc(100% - 24px);margin:10px auto}.menu-toggle{display:block}.site-header nav{display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;align-items:stretch;padding:22px;border:1px solid var(--line);border-radius:24px;background:var(--paper)}.site-header nav.open{display:flex}.hero,.page,.case{width:calc(100% - 28px)}.hero{gap:50px}.hero-actions{flex-direction:column;align-items:stretch}.section{padding:75px 0}.section-head{display:block}.shots{grid-template-columns:1fr}.case-hero{min-height:68vh;padding:28px;border-radius:28px}.case-facts{margin-bottom:45px}.story{padding:45px 6px}.metrics{grid-template-columns:1fr}.site-footer{padding:70px 24px}.project-card h3{font-size:24px}}
.home-active .site-header{border-color:rgba(255,255,255,.2);background:rgba(13,15,12,.78);color:#fff;box-shadow:none}
.site-header{width:max-content;max-width:calc(100% - 48px);gap:clamp(40px,5vw,72px)}
@media(max-width:640px){.site-header{width:calc(100% - 24px);max-width:none;gap:0}}
.home-active .brand-avatar{border-color:rgba(255,255,255,.42);background:#f7f5f1}
.home-active .site-header nav a:last-child{background:#f7f5f1;color:#080a08}
.home-active .menu-toggle{color:#fff}
.home-hero{position:relative;display:flex;min-height:clamp(440px,52svh,540px);width:min(calc(100% - 24px),var(--max));margin:-92px auto 0;padding:clamp(116px,7.5vw,124px) clamp(30px,5.4vw,70px) clamp(26px,3vw,34px);flex-direction:column;justify-content:flex-start;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:38px;background:radial-gradient(circle at 86% 10%,rgba(244,94,75,.16),transparent 34%),radial-gradient(circle at 12% 94%,rgba(244,94,75,.07),transparent 36%),#050705;color:#f7f5f1;isolation:isolate}
.home-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,rgba(255,255,255,.025),transparent 34%,rgba(244,94,75,.035));pointer-events:none}
.home-hero:after{display:none}
.home-hero-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(20px,2.4vw,30px);color:rgba(255,255,255,.72);font-size:10px;font-weight:760;letter-spacing:.08em;text-transform:uppercase}
.home-hero-content{max-width:1120px}
.home-status,.home-domain-pill,.home-inline-cta,.home-talk-pill{display:inline-flex;height:clamp(40px,3vw,46px);align-items:center;justify-content:center;gap:8px;margin-inline:.035em;padding:0 clamp(13px,1.45vw,19px);border-radius:999px;font-size:clamp(11px,.96vw,14px);font-weight:720;line-height:1;letter-spacing:-.015em;vertical-align:middle;white-space:nowrap;transform:translateY(-4px)}
.home-status{border:1px solid rgba(255,255,255,.86);background:#f7f5f1;color:#080a08;box-shadow:0 4px 18px rgba(0,0,0,.12)}
.home-status i{position:relative;width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:#ef6a61}
.home-status i:after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;animation:status-ping 1.4s cubic-bezier(0,0,.2,1) infinite}
.home-hero h1{max-width:1040px;margin:0;font-size:clamp(48px,5.45vw,76px);font-weight:540;line-height:1.01;letter-spacing:-.052em;text-wrap:balance}
.home-hero h1 em{color:#f45e4b;font-style:normal;font-weight:720}
.home-domain-pill{border:1px solid var(--line);background:#fff;color:var(--ink)}
.home-inline-cta{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.32);background:rgba(8,10,8,.76);color:#f7f5f1;isolation:isolate;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(12px);transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.home-inline-cta:before{content:"";position:absolute;inset:-1px;z-index:-1;background:linear-gradient(110deg,#080a08 0%,#080a08 38%,#f45e4b 52%,#080a08 70%,#080a08 100%);background-size:240% 100%;background-position:100% 0;opacity:.4;transition:opacity .35s ease,background-position .75s cubic-bezier(.22,1,.36,1)}
.home-inline-label{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.home-eye{position:relative;display:inline-block;width:25px;height:16px;flex:0 0 25px;border:1.5px solid currentColor;border-radius:50%;opacity:.9;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .2s ease}
.home-eye:after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:currentColor;transform:translate(-50%,-50%);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.home-inline-cta:hover:before,.home-inline-cta:focus-visible:before{opacity:1;background-position:0 0}
.home-inline-cta:hover .home-inline-label,.home-inline-cta:focus-visible .home-inline-label{transform:translateX(-3px)}
.home-inline-cta:hover .home-eye,.home-inline-cta:focus-visible .home-eye{opacity:1;transform:translateX(3px) scale(1.05)}
.home-inline-cta:hover .home-eye:after,.home-inline-cta:focus-visible .home-eye:after{transform:translate(-15%,-50%)}
.home-talk-pill{border:1px solid #f7f5f1;background:#f7f5f1;color:#080a08;box-shadow:0 4px 18px rgba(0,0,0,.1);transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.home-talk-icon{display:inline-grid;width:23px;height:23px;place-items:center;border:1px solid rgba(8,10,8,.22);border-radius:50%;font-style:normal;font-size:.82em;transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .2s ease,color .2s ease}
.home-talk-pill:hover,.home-talk-pill:focus-visible{background:#f45e4b;border-color:#f45e4b;color:#080a08}
.home-talk-pill:hover .home-talk-icon,.home-talk-pill:focus-visible .home-talk-icon{background:#080a08;border-color:#080a08;color:#fff;transform:translate(3px,-3px) rotate(4deg)}
.home-inline-cta:focus-visible,.home-talk-pill:focus-visible,.home-resume-link:focus-visible{outline:3px solid rgba(255,255,255,.9);outline-offset:4px}
.home-hero-note{display:flex;align-items:end;justify-content:space-between;gap:36px;margin-top:clamp(22px,2.6vw,32px);padding-top:14px;border-top:1px solid rgba(255,255,255,.2)}
.home-hero-note p{max-width:660px;margin:0;color:rgba(255,255,255,.72);font-size:clamp(14px,1.18vw,17px);line-height:1.5}
.home-resume-link{display:inline-flex;min-height:44px;align-items:center;padding:0 8px;color:#f7f5f1;font-size:14px;font-weight:700;white-space:nowrap;transition:color .2s ease,transform .2s ease}
.home-resume-link:hover{color:#f45e4b;transform:translateX(2px)}
.home-work{--work-card-bleed:clamp(12px,calc(50vw - 732px),80px);position:relative;width:min(calc(100% - 48px),1440px);margin-top:12px;padding-top:80px;scroll-margin-top:100px;isolation:isolate}
.home-work:before{content:"";position:absolute;inset:0 calc(0px - var(--work-card-bleed));z-index:-1;border:1px solid var(--line);border-radius:38px;background:var(--card);box-shadow:0 18px 48px rgba(25,28,20,.06)}
.home-work:focus{outline:none}
.home-work .section-head{margin-bottom:32px}
.home-work .section-head h2{font-size:clamp(38px,4.8vw,62px);line-height:1.02}
.home-work .section-head p{max-width:400px;font-size:16px}
.home-work .project-grid{gap:16px}
.home-work .project-card{border-radius:20px}
.home-work .project-card .visual{aspect-ratio:1.9/1}
.home-work .project-card .meta{padding:16px 18px 19px}
.home-work .project-card h3{margin:3px 0 5px;font-size:22px}
.home-work .project-card p{font-size:13.5px;line-height:1.48}
.home-work .project-card .tags{font-size:10px}
.kfh-project-visual{position:relative;isolation:isolate;background:linear-gradient(135deg,#eef8f7 0%,#f8fbfa 54%,#d8f3ee 100%)}
.kfh-project-visual:before{content:"";position:absolute;right:-8%;top:-42%;z-index:-1;width:48%;aspect-ratio:1;border:24px solid rgba(1,176,169,.22);border-radius:50%;transform:rotate(-18deg)}
.kfh-project-visual:after{content:"";position:absolute;left:42%;bottom:-38%;z-index:-1;width:46%;aspect-ratio:1;border:22px solid rgba(0,132,124,.1);border-radius:50%}
.kfh-thumb-copy{position:absolute;left:5.5%;top:11%;z-index:2;width:48%;color:#123c42}
.kfh-thumb-brand{display:flex;align-items:center;gap:8px;margin-bottom:18px;text-transform:uppercase;letter-spacing:.08em}
.kfh-thumb-brand b{display:grid;min-width:42px;height:24px;place-items:center;border-radius:7px;background:#063f46;color:#fff;font-size:11px;letter-spacing:.06em}
.kfh-thumb-brand span{font-size:10px;font-weight:800}
.kfh-thumb-copy>p{max-width:250px;margin:0;color:#173b42;font-size:clamp(15px,1.65vw,22px)!important;font-weight:750;line-height:1.08!important;letter-spacing:-.035em}
.kfh-thumb-metrics{display:flex;gap:7px;margin-top:18px}
.kfh-thumb-metrics>span{display:flex;min-width:0;padding:7px 9px;border:1px solid rgba(6,63,70,.14);border-radius:10px;background:rgba(255,255,255,.74);color:#456267;flex-direction:column;font-size:7px;font-weight:700;line-height:1.2;box-shadow:0 8px 20px rgba(5,66,69,.07);backdrop-filter:blur(8px)}
.kfh-thumb-metrics strong{color:#063f46;font-size:13px;letter-spacing:-.04em}
.kfh-thumb-device{position:absolute;right:-5%;bottom:-18%;z-index:1;width:68%!important;height:auto!important;max-width:none;object-fit:contain!important;filter:drop-shadow(0 18px 20px rgba(4,55,59,.18));transform:rotate(-2deg);transform-origin:60% 70%;transition:transform .6s cubic-bezier(.22,1,.36,1)!important}
.kfh-project-card:hover .kfh-thumb-device{transform:rotate(-1deg) translateY(-5px) scale(1.025)}
.project-highlights{display:flex;gap:6px;margin-top:13px;flex-wrap:wrap}
.project-highlights span{padding:6px 10px;border:1px solid rgba(6,63,70,.15);border-radius:999px;background:#eef8f6;color:#21575a;font-size:12px;font-weight:700;line-height:1.1;white-space:nowrap}
@keyframes status-ping{0%{opacity:.7;transform:scale(1)}75%,100%{opacity:0;transform:scale(2.6)}}
@media(min-width:981px){.home-hero{min-height:auto;justify-content:flex-start}}
@media(max-width:980px) and (min-width:761px){.home-hero{min-height:auto;padding:100px 36px 30px}.home-hero-meta{margin-bottom:22px}.home-hero h1{max-width:900px;font-size:clamp(42px,5.4vw,48px);line-height:1.03}.home-status,.home-domain-pill,.home-inline-cta,.home-talk-pill{height:38px;padding:0 12px;font-size:11px;transform:translateY(-3px)}.home-hero-note{gap:28px;margin-top:28px;padding-top:14px}.home-hero-note p{max-width:540px;font-size:14px}.home-resume-link{font-size:13px}}
@media(max-width:900px) and (min-width:641px){.home-work .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.home-active .site-header{background:rgba(8,10,8,.86);backdrop-filter:blur(18px)}.home-active .site-header nav{border-color:rgba(255,255,255,.2);background:#0d0f0c;color:#fff}.home-active .site-header nav a:last-child{background:#f7f5f1;color:#080a08}.home-hero{min-height:auto;width:calc(100% - 12px);margin:-76px auto 0;padding:108px 20px 30px;border-radius:26px}.home-hero-meta{align-items:flex-start;gap:5px;margin-bottom:30px;flex-direction:column;font-size:9px}.home-hero h1{font-size:clamp(38px,9.8vw,48px);line-height:1.04;letter-spacing:-.048em;text-wrap:pretty}.home-status,.home-domain-pill,.home-inline-cta,.home-talk-pill{height:40px;margin-inline:.02em;padding:0 12px;font-size:10.5px;transform:translateY(-3px)}.home-status i{width:7px;height:7px;flex-basis:7px}.home-eye{width:21px;height:14px;flex-basis:21px}.home-talk-icon{width:20px;height:20px}.home-hero-note{align-items:flex-start;gap:18px;margin-top:36px;padding-top:16px;flex-direction:column}.home-hero-note p{font-size:15px}.home-resume-link{width:max-content;padding-left:2px}.home-work{--work-card-bleed:18px;margin-top:8px;padding-top:68px}.home-work:before{border-radius:26px}.home-work .section-head{margin-bottom:24px}.home-work .section-head h2{font-size:42px}.home-work .section-head p{font-size:15px}.home-archive{padding-top:80px}.kfh-thumb-copy{left:4.5%;top:9%;width:50%}.kfh-thumb-brand{margin-bottom:10px}.kfh-thumb-copy>p{font-size:clamp(14px,2.8vw,20px)!important}.kfh-thumb-metrics{margin-top:11px}.kfh-thumb-device{right:-7%;bottom:-20%;width:67%!important}}
@media(max-width:460px){.kfh-thumb-copy{top:10%;width:54%}.kfh-thumb-brand{gap:5px;margin-bottom:7px}.kfh-thumb-brand b{min-width:34px;height:20px;font-size:9px}.kfh-thumb-brand span{font-size:8px}.kfh-thumb-copy>p{font-size:13px!important}.kfh-thumb-metrics{margin-top:8px}.kfh-thumb-metrics>span{padding:5px 6px;font-size:6px}.kfh-thumb-metrics>span:nth-child(2){display:none}.kfh-thumb-metrics strong{font-size:11px}.kfh-thumb-device{right:-13%;bottom:-16%;width:72%!important}.project-highlights span{font-size:8px}}
.kfh-project-visual{display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);align-items:center;gap:6px;padding:clamp(16px,2.3vw,24px);background:radial-gradient(circle at 82% 18%,rgba(255,255,255,.72),transparent 28%),linear-gradient(135deg,#c1e6e1 0%,#e8f4f1 48%,#afdcd6 100%)}
.kfh-project-visual:before{border-color:rgba(0,169,164,.26)}
.kfh-project-visual:after{border-color:rgba(0,105,108,.14)}
.kfh-thumb-copy{position:relative;left:auto;top:auto;width:auto;z-index:2}
.kfh-thumb-brand{margin-bottom:16px}
.kfh-thumb-brand b{background:linear-gradient(135deg,#07555c,#00a9a4);box-shadow:0 7px 16px rgba(0,92,95,.2)}
.kfh-thumb-brand span{color:#006c71;font-size:11px}
.kfh-thumb-copy>p{max-width:220px;color:#07555c;font-size:clamp(15px,1.55vw,20px)!important}
.kfh-thumb-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:0}
.kfh-thumb-stat{position:relative;display:flex;min-width:0;min-height:58px;padding:9px 10px;overflow:hidden;border:1px solid rgba(0,105,108,.18);border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(210,241,237,.58));color:#365b5e;flex-direction:column;justify-content:center;font-size:9px;font-weight:760;line-height:1.15;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 24px rgba(0,76,79,.12);backdrop-filter:blur(16px) saturate(155%);-webkit-backdrop-filter:blur(16px) saturate(155%)}
.kfh-thumb-stat:nth-child(3){grid-column:1/-1}
.kfh-thumb-stat:after{content:"";position:absolute;inset:-35% auto -35% -55%;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.76),transparent);transform:skewX(-16deg);pointer-events:none}
.kfh-thumb-stat strong{display:flex;align-items:center;gap:2px;color:#07555c;font-size:16px;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.kfh-thumb-stat strong b{font:inherit}
.kfh-thumb-stat strong small{margin-left:1px;font-size:.5em;font-weight:850;letter-spacing:.02em;text-transform:uppercase}
.kfh-thumb-stat>span{margin-top:4px;text-wrap:balance}
.kfh-metric-arrow{display:inline-grid;width:1.42em;height:1.42em;margin-right:.12em;place-items:center;align-self:center;flex:0 0 1.42em;border-radius:50%;background:#07555c;color:#fff;font-size:.68em;font-style:normal;font-weight:900;line-height:1;box-shadow:0 .28em .55em rgba(0,83,87,.18)}
.kfh-thumb-device{position:relative;right:auto;bottom:auto;justify-self:center;width:120%!important;height:auto!important;transform:translateX(-2%) rotate(-2deg)}
.kfh-project-card:hover .kfh-thumb-device{transform:translateX(-2%) translateY(-4px) rotate(-1deg) scale(1.02)}
.is-thumb-motion-ready .kfh-thumb-brand,.is-thumb-motion-ready .kfh-thumb-copy>p,.is-thumb-motion-ready .kfh-thumb-stat{opacity:0;transform:translateY(10px)}
.eyewa-visual-abstract{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);align-items:center;gap:6px;padding:clamp(16px,2.3vw,24px)}
.project-card .eyewa-visual-abstract{background:linear-gradient(135deg,#eaf7ee 0%,#f6fbf7 55%,#dff3e5 100%)}
.eyewa-visual-abstract:before,.eyewa-visual-abstract:after{content:none}
.eyewa-abstract-glasses{position:absolute;z-index:0;top:8%;right:-6%;width:64%;max-width:220px;transform:rotate(-14deg)}
.eyewa-glass-lens{position:absolute;top:0;width:46%;aspect-ratio:1;border:7px solid rgba(21,128,61,.16);border-radius:50%}
.eyewa-glass-lens:first-child{left:0}
.eyewa-glass-lens:nth-child(2){right:0}
.eyewa-abstract-glasses .eyewa-glass-bridge{position:absolute;top:calc(23% - 4px);left:46%;width:8%;height:7px;background:rgba(21,128,61,.16)}
.eyewa-abstract-glasses .eyewa-glass-temple{position:absolute;top:18%;right:-14%;width:22%;height:7px;background:rgba(21,128,61,.16);transform:rotate(18deg);transform-origin:0 50%}
.eyewa-thumb-copy{position:relative;z-index:2;color:#14532d}
.eyewa-thumb-brand{display:flex;align-items:center;gap:8px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.08em}
.eyewa-thumb-brand b{display:grid;min-width:42px;height:24px;place-items:center;border-radius:7px;background:linear-gradient(135deg,#15803d,#22c55e);color:#fff;font-size:11px;letter-spacing:.06em;box-shadow:0 7px 16px rgba(21,128,61,.25)}
.eyewa-thumb-brand span{color:#15803d;font-size:11px;font-weight:800}
.eyewa-thumb-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.eyewa-thumb-stat:nth-child(3){grid-column:1/-1}
.eyewa-thumb-stat{display:flex;flex-direction:column;justify-content:center;min-height:58px;padding:9px 10px;border:none;border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(214,242,224,.58));box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 24px rgba(20,83,45,.12);backdrop-filter:blur(16px) saturate(155%);-webkit-backdrop-filter:blur(16px) saturate(155%);font-size:9px;line-height:1.15;opacity:0;transform:translateY(18px) scale(.94);transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.eyewa-visual-abstract.is-visible .eyewa-thumb-stat{opacity:1;transform:translateY(0) scale(1)}
.eyewa-visual-abstract.is-visible .eyewa-thumb-stat:nth-child(2){transition-delay:.12s}
.eyewa-visual-abstract.is-visible .eyewa-thumb-stat:nth-child(3){transition-delay:.24s}
.eyewa-thumb-stat-hero{background:rgba(255,255,255,.94)}
.eyewa-thumb-stat-hero strong{font-size:16px}
.eyewa-visual-abstract.is-visible .eyewa-thumb-stat-hero strong{animation:eyewa-hero-pop .6s cubic-bezier(.22,1,.36,1) .5s both}
@keyframes eyewa-hero-pop{0%{transform:scale(1)}50%{transform:scale(1.16)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.eyewa-visual-abstract.is-visible .eyewa-thumb-stat-hero strong{animation:none}}
.eyewa-thumb-stat-hero small{font-size:.5em}
.eyewa-thumb-stat strong{display:flex;align-items:center;gap:0;line-height:1;color:#14532d;font-size:16px;letter-spacing:-.045em;font-weight:800;white-space:nowrap}
.eyewa-thumb-counter{line-height:1;font-variant-numeric:tabular-nums}
.eyewa-thumb-stat small{margin-left:1px;font-size:.55em;font-weight:800;align-self:center}
.eyewa-thumb-stat span{display:block;margin-top:4px;color:#3f6b4c;font-size:9px;font-weight:700;text-wrap:balance}
.eyewa-metric-arrow{display:inline-grid;width:1.42em;height:1.42em;margin-right:.12em;place-items:center;align-self:center;flex:0 0 1.42em;border-radius:50%;background:#15803d;color:#fff;font-size:.68em;animation:eyewa-metric-arrow-down 1.8s ease-in-out infinite}
@keyframes eyewa-metric-arrow-down{0%,100%{transform:translateY(-1px)}50%{transform:translateY(2px)}}
.home-timeline{position:relative;z-index:5}
.home-timeline .section-head{margin-bottom:clamp(28px,4vw,52px)}
.timeline-track{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);padding-top:34px}
.timeline-rail{position:absolute;top:6px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--line) 0%,var(--line) 78%,var(--coral) 100%);border-radius:2px}
.timeline-rail::after{content:"";position:absolute;right:-1px;top:50%;width:10px;height:10px;transform:translateY(-50%);border-radius:50%;background:var(--coral);box-shadow:0 0 0 5px rgba(255,107,74,.2)}
.timeline-stop{position:relative;display:flex;flex-direction:column;gap:5px;padding:22px 20px 20px;border-radius:20px;background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(255,255,255,.38));border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 30px rgba(25,28,20,.08);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);outline:none;cursor:default;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease}
.timeline-stop:hover,.timeline-stop:focus-visible{z-index:9;transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 24px 54px rgba(25,28,20,.16);border-color:rgba(255,255,255,.95)}
.timeline-stop:hover .timeline-dot,.timeline-stop:focus-visible .timeline-dot{background:var(--coral);box-shadow:0 0 0 4px var(--paper),0 0 0 5px rgba(23,25,20,.35)}
.timeline-dot{position:absolute;top:-32px;left:18px;width:12px;height:12px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--line)}
.timeline-stop-now .timeline-dot{background:var(--coral);box-shadow:0 0 0 4px var(--paper),0 0 0 5px rgba(23,25,20,.35)}
.timeline-stop-now{background:linear-gradient(165deg,rgba(255,255,255,.78) 52%,rgba(255,107,74,.14))}
.timeline-dates{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.timeline-live{width:7px;height:7px;border-radius:50%;background:var(--coral);animation:timeline-live-pulse 1.6s ease-in-out infinite}
@keyframes timeline-live-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,74,.4)}50%{box-shadow:0 0 0 5px rgba(255,107,74,0)}}
.timeline-org{margin:3px 0 0;font-size:16.5px;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.timeline-role{margin:0;font-size:11.5px;font-weight:600;color:var(--muted)}
.timeline-win{margin:10px 0 0;font-size:12.5px;font-weight:800;color:var(--ink)}
.timeline-detail{margin:2px 0 0;font-size:12px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.timeline-stat{display:flex;align-items:baseline;gap:7px;margin:auto 0 0;padding-top:14px}
.timeline-stat strong{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--ink);border-bottom:1.5px dashed rgba(23,25,20,.28);transition:border-color .25s ease}
.timeline-stop:hover .timeline-stat strong,.timeline-stop:focus-visible .timeline-stat strong{border-color:rgba(23,25,20,.6)}
.timeline-stop-now .timeline-stat strong{background:var(--ink);color:#fff;padding:1px 8px;border-radius:9px;border-bottom:none}
.timeline-stat span{font-size:10.5px;font-weight:600;line-height:1.3;color:var(--muted)}
.timeline-tip{position:absolute;left:-2px;top:calc(100% + 12px);z-index:8;display:block;width:min(264px,76vw);padding:14px 16px;border-radius:14px;background:#0d0f0c;color:#fff;box-shadow:0 18px 44px rgba(15,17,12,.3);opacity:0;transform:translateY(-7px) scale(.97);transform-origin:top left;transition:opacity .28s ease,transform .36s cubic-bezier(.22,1,.36,1);pointer-events:none}
.timeline-tip:after{content:"";position:absolute;left:20px;bottom:100%;border:7px solid transparent;border-bottom-color:#0d0f0c}
.timeline-tip b{display:block;margin-bottom:6px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#ff8a70}
.timeline-tip i{display:block;margin-top:5px;font-style:normal;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.8)}
.timeline-stop:hover .timeline-tip,.timeline-stop:focus-visible .timeline-tip{opacity:1;transform:translateY(0) scale(1)}
.timeline-stop:nth-last-child(-n+2) .timeline-tip{left:auto;right:-2px;transform-origin:top right}
.timeline-stop:nth-last-child(-n+2) .timeline-tip:after{left:auto;right:20px}
@media(max-width:1180px){.timeline-track{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:0}.timeline-rail{display:none}.timeline-dot{display:none}}
@media(max-width:600px){.timeline-track{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.timeline-stop,.timeline-tip{transition:none!important}.timeline-live{animation:none}}
@media(prefers-reduced-motion:reduce){.eyewa-metric-arrow{animation:none}}
.project-card .eyewa-thumb-device{position:absolute;z-index:1;right:5%;top:50%;height:92%;width:auto;max-width:none;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(20,83,45,.22));transform:translateY(-50%);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.eyewa-project-card:hover .eyewa-thumb-device{transform:translateY(calc(-50% - 6px)) rotate(-2deg) scale(1.03)}
@media(max-width:760px){.eyewa-thumb-copy{width:58%}}
.is-thumb-motion-ready .kfh-thumb-device{opacity:0;transform:translateX(8%) translateY(12px) rotate(2deg) scale(.92)}
.is-thumb-animated .kfh-thumb-brand,.is-thumb-animated .kfh-thumb-copy>p{animation:kfh-thumb-copy-in .65s cubic-bezier(.22,1,.36,1) both}
.is-thumb-animated .kfh-thumb-copy>p{animation-delay:.08s}
.is-thumb-animated .kfh-thumb-stat{animation:kfh-thumb-stat-in .62s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.16s + var(--thumb-delay,0s))}
.is-thumb-animated .kfh-thumb-stat:nth-child(1){--thumb-delay:0s}
.is-thumb-animated .kfh-thumb-stat:nth-child(2){--thumb-delay:.1s}
.is-thumb-animated .kfh-thumb-stat:nth-child(3){--thumb-delay:.2s}
.is-thumb-animated .kfh-thumb-stat:after{animation:kfh-thumb-glint 1s .45s ease-out both}
.is-thumb-animated .kfh-metric-arrow.is-down{animation:kfh-thumb-arrow-down 1.3s .75s ease-in-out infinite}
.is-thumb-animated .kfh-metric-arrow.is-up{animation:kfh-thumb-arrow-up 1.3s .75s ease-in-out infinite}
.is-thumb-animated .kfh-thumb-device{animation:kfh-thumb-device-in .9s .08s cubic-bezier(.22,1,.36,1) both,kfh-thumb-device-float 3.8s 1.05s ease-in-out infinite alternate}
.is-thumb-animated.kfh-project-visual:before{animation:kfh-thumb-orbit-one 1.2s cubic-bezier(.22,1,.36,1) both}
.is-thumb-animated.kfh-project-visual:after{animation:kfh-thumb-orbit-two 1.25s .08s cubic-bezier(.22,1,.36,1) both}
@keyframes kfh-thumb-copy-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes kfh-thumb-stat-in{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
@keyframes kfh-thumb-glint{from{left:-55%}to{left:145%}}
@keyframes kfh-thumb-device-in{from{opacity:0;transform:translateX(8%) translateY(12px) rotate(2deg) scale(.92)}to{opacity:1;transform:translateX(-2%) rotate(-2deg) scale(1)}}
@keyframes kfh-thumb-device-float{from{transform:translateX(-2%) translateY(0) rotate(-2deg)}to{transform:translateX(-2%) translateY(-4px) rotate(-1.2deg)}}
@keyframes kfh-thumb-orbit-one{from{opacity:0;transform:translate(24px,-14px) rotate(-28deg) scale(.82)}to{opacity:1;transform:rotate(-18deg) scale(1)}}
@keyframes kfh-thumb-orbit-two{from{opacity:0;transform:translate(-20px,18px) scale(.84)}to{opacity:1;transform:none}}
@keyframes kfh-thumb-arrow-down{0%,100%{transform:translateY(-1px)}50%{transform:translateY(2px)}}
@keyframes kfh-thumb-arrow-up{0%,100%{transform:translateY(1px)}50%{transform:translateY(-2px)}}
@media(max-width:900px){.kfh-thumb-stat{padding-inline:8px}.kfh-thumb-stat strong{gap:1px}.kfh-thumb-stat strong small{margin-left:1px;flex:0 0 auto;font-size:.64em;line-height:1}.kfh-metric-arrow{margin-right:.04em}}
@media(max-width:760px){.kfh-project-visual{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:15px}.kfh-thumb-copy{left:auto;top:auto;width:auto}.kfh-thumb-brand{margin-bottom:10px}.kfh-thumb-brand span{font-size:9px}.kfh-thumb-metrics{gap:6px;margin-top:0}.kfh-thumb-stat{min-height:52px;padding:7px 8px;font-size:8px}.kfh-thumb-stat strong{font-size:14px}.kfh-thumb-device{right:auto;bottom:auto;width:122%!important}}
@media(max-width:460px){.kfh-project-visual{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:2px;padding:12px}.kfh-thumb-copy{top:auto;width:auto}.kfh-thumb-brand{margin-bottom:8px}.kfh-thumb-brand span{font-size:8.5px}.kfh-thumb-metrics{gap:5px;margin-top:0}.kfh-thumb-stat{min-height:48px;padding:6px 7px;font-size:7.5px}.kfh-thumb-stat strong{font-size:13px}.kfh-thumb-device{right:auto;bottom:auto;width:126%!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,color,background-color,border-color,box-shadow,fill,stroke!important;transition-duration:.16s!important}}
.long-study{display:grid;grid-template-columns:260px minmax(0,860px);gap:72px;justify-content:center;padding:70px 0}.study-toc{position:sticky;top:110px;height:max-content;border-top:1px solid var(--line);padding-top:18px}.study-toc a{display:block;color:var(--muted);font-size:13px;padding:7px 0}.study-toc a:hover{color:var(--ink)}.chapter{padding:18px 0 88px;border-top:1px solid var(--line);scroll-margin-top:110px}.chapter-num{font-size:12px;letter-spacing:.16em;font-weight:800;color:#27856c}.chapter h2{font-size:clamp(36px,5vw,64px);letter-spacing:-.05em;line-height:1.03;margin:12px 0 25px}.chapter h3{font-size:23px;margin:36px 0 12px}.chapter p,.chapter li{font-size:18px;color:var(--muted)}.chapter ul{padding-left:22px}.chapter li+li{margin-top:10px}.finding-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}.finding{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}.finding strong{font-size:34px;letter-spacing:-.04em;display:block}.chapter.dark{background:var(--ink);color:white;border-radius:28px;padding:34px;margin-bottom:80px}.chapter.dark p,.chapter.dark li{color:#c8cbc2}.chapter.accent{background:var(--lime);border-radius:28px;padding:34px;margin-bottom:80px}.chapter.accent p,.chapter.accent li{color:#30342b}.content-columns{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.content-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px}.content-card h3{margin-top:0}.case-end{padding:80px 30px;text-align:center;background:var(--card);border-radius:28px}.case-end h2{font-size:clamp(44px,7vw,88px);letter-spacing:-.06em;margin:0}@media(max-width:900px){.long-study{grid-template-columns:1fr;gap:25px}.study-toc{position:static}.content-columns{grid-template-columns:1fr}}@media(max-width:640px){.finding-grid{grid-template-columns:1fr}.chapter.dark,.chapter.accent{padding:24px}}
.case:focus,.case main:focus,main:focus{outline:none}
.case>.media-hero+.case-facts{margin-top:24px}
.site-header a:focus-visible,.menu-toggle:focus-visible{outline:3px solid #157d66;outline-offset:3px}
.site-header{transition:border-color .28s ease,background-color .28s ease,box-shadow .28s ease}
.site-header .brand{position:relative;padding:4px 9px 4px 4px;margin-left:-4px;border-radius:999px;transition:background-color .28s ease,color .28s ease,transform .28s cubic-bezier(.22,1,.36,1)}
.site-header .brand-avatar{transition:border-color .28s ease,box-shadow .28s ease,transform .42s cubic-bezier(.22,1,.36,1)}
.site-header .brand b{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.site-header .brand:hover,.site-header .brand:focus-visible{background:rgba(23,25,20,.07);transform:translateY(-1px)}
.site-header .brand:hover .brand-avatar,.site-header .brand:focus-visible .brand-avatar{box-shadow:0 7px 18px rgba(16,22,18,.14);transform:scale(1.08) rotate(-3deg)}
.site-header .brand:hover b,.site-header .brand:focus-visible b{transform:translateX(2px)}
.site-header nav{gap:4px}
.site-header nav a{position:relative;display:inline-flex;min-height:40px;align-items:center;justify-content:center;gap:4px;padding:0 12px;overflow:hidden;border-radius:999px;isolation:isolate;transition:background-color .28s ease,color .28s ease,box-shadow .28s ease,transform .32s cubic-bezier(.22,1,.36,1)}
.site-header nav a:not(:last-child):after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:1px;border-radius:999px;background:currentColor;opacity:.7;transform:scaleX(0);transform-origin:left;transition:transform .38s cubic-bezier(.22,1,.36,1)}
.site-header nav a:not(:last-child):hover,.site-header nav a:not(:last-child):focus-visible{background:rgba(23,25,20,.07);box-shadow:inset 0 0 0 1px rgba(23,25,20,.035);transform:translateY(-1px)}
.site-header nav a:not(:last-child):hover:after,.site-header nav a:not(:last-child):focus-visible:after{transform:scaleX(1)}
.site-header nav a span{display:inline-block;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.site-header nav a:hover span,.site-header nav a:focus-visible span{transform:translate(2px,-2px) rotate(3deg)}
.site-header nav a:last-child{min-height:44px;padding:0 17px;box-shadow:0 8px 20px rgba(8,10,8,.1)}
.site-header nav a:last-child:before{content:"";position:absolute;inset:-45% auto -45% -28%;width:20%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-220%) skewX(-18deg);transition:transform .7s cubic-bezier(.22,1,.36,1);pointer-events:none}
.site-header nav a:last-child:hover,.site-header nav a:last-child:focus-visible{border-color:transparent;background:var(--coral,#ff6b4a);color:#080a08;box-shadow:0 11px 26px rgba(97,28,15,.2);transform:translateY(-2px)}
.site-header nav a:last-child:hover:before,.site-header nav a:last-child:focus-visible:before{transform:translateX(720%) skewX(-18deg)}
.home-active .site-header .brand:hover,.home-active .site-header .brand:focus-visible,.home-active .site-header nav a:not(:last-child):hover,.home-active .site-header nav a:not(:last-child):focus-visible{background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.home-active .site-header a:focus-visible{outline-color:#fff}
@media(max-width:640px){
.menu-toggle{min-width:54px;min-height:44px;padding:0 8px;border-radius:999px;cursor:pointer}
.site-header nav{gap:8px}
.site-header nav a{display:flex;align-items:center;justify-content:flex-start;min-height:44px;padding:10px 14px}
.site-header nav a:last-child{padding:11px 17px}
.case-facts{margin-top:24px}
}
.home-hero{
--hero-pointer-x:50%;
--hero-pointer-y:46%;
--hero-texture-x:0px;
--hero-texture-y:0px;
transition:border-color .45s ease,box-shadow .45s ease;
}
.home-hero:before{
content:"";
position:absolute;
inset:0;
z-index:-1;
display:block;
border-radius:inherit;
background:
radial-gradient(circle 300px at var(--hero-pointer-x) var(--hero-pointer-y),rgba(244,94,75,.24) 0%,rgba(244,94,75,.1) 34%,transparent 72%),
linear-gradient(115deg,rgba(255,255,255,.035),transparent 36%,rgba(244,94,75,.045));
opacity:.62;
pointer-events:none;
transition:opacity .45s ease;
}
.home-hero:after{
content:"";
position:absolute;
inset:-10%;
z-index:-1;
display:block;
border-radius:inherit;
background:
radial-gradient(circle,rgba(255,255,255,.32) 0 .55px,transparent .75px) 0 0/5px 5px,
repeating-linear-gradient(118deg,rgba(255,255,255,.025) 0 1px,transparent 1px 7px);
opacity:.13;
mix-blend-mode:soft-light;
pointer-events:none;
transform:translate3d(var(--hero-texture-x),var(--hero-texture-y),0);
transition:opacity .45s ease;
will-change:transform;
}
.home-hero.is-hero-pointer-active{
border-color:rgba(255,137,116,.29);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 24px 70px rgba(17,8,5,.16);
}
.home-hero.is-hero-pointer-active:before{opacity:.9}
.home-hero.is-hero-pointer-active:after{opacity:.2}
.home-hero .home-inline-cta,.home-hero .home-talk-pill,.home-hero .home-resume-link{
--hero-magnetic-x:0px;
--hero-magnetic-y:0px;
translate:var(--hero-magnetic-x) var(--hero-magnetic-y);
will-change:translate;
}
.home-hero .home-inline-cta{
transition:translate .3s cubic-bezier(.22,1,.36,1),background-color .2s ease,border-color .2s ease,color .2s ease;
}
.home-hero .home-talk-pill{
transition:translate .3s cubic-bezier(.22,1,.36,1),background-color .2s ease,border-color .2s ease,color .2s ease;
}
.home-hero .home-resume-link{
transition:translate .3s cubic-bezier(.22,1,.36,1),color .2s ease,transform .2s ease;
}
@keyframes home-hero-ambient-glow{
0%{opacity:.46;filter:saturate(.92)}
50%{opacity:.68;filter:saturate(1.08)}
100%{opacity:.52;filter:saturate(1)}
}
@keyframes home-hero-ambient-grain{
from{transform:translate3d(-4px,-2px,0)}
to{transform:translate3d(4px,2px,0)}
}
@media(hover:none),(pointer:coarse){
.home-hero:before{animation:home-hero-ambient-glow 8s ease-in-out infinite alternate}
.home-hero:after{animation:home-hero-ambient-grain 12s ease-in-out infinite alternate;opacity:.11}
}
@media(prefers-reduced-motion:reduce){
.home-hero:before{opacity:.5!important;animation:none!important}
.home-hero:after{opacity:.08!important;animation:none!important;transform:none!important}
.home-hero .home-inline-cta,.home-hero .home-talk-pill,.home-hero .home-resume-link{translate:0 0!important}
}
.shot{
width:100%;
padding:0;
color:inherit;
text-align:left;
appearance:none;
cursor:zoom-in;
box-shadow:0 10px 28px rgba(25,28,22,.04);
transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;
}
.shot:hover{
transform:translateY(-6px);
border-color:rgba(23,25,20,.28);
box-shadow:0 20px 44px rgba(25,28,22,.12);
}
.shot:focus-visible{
outline:3px solid var(--coral);
outline-offset:4px;
}
.shot img{
transition:transform .5s cubic-bezier(.22,1,.36,1),filter .35s ease;
}
.shot:hover img,.shot:focus-visible img{
transform:scale(1.035);
filter:saturate(1.04);
}
.shot-lightbox{
position:fixed;
inset:0;
width:100vw;
max-width:none;
height:100dvh;
max-height:none;
margin:0;
padding:clamp(68px,7vw,100px) clamp(18px,4vw,58px) clamp(22px,4vw,46px);
overflow:auto;
border:0;
background:rgba(23,25,20,.8);
color:#fff;
cursor:zoom-out;
}
.shot-lightbox::backdrop{
background:transparent;
}
.shot-lightbox[open]{
display:grid;
place-items:center;
animation:shot-lightbox-in .24s ease both;
}
.shot-lightbox-panel{
width:min(94vw,1600px);
margin:0;
display:grid;
justify-items:center;
gap:14px;
cursor:default;
animation:shot-lightbox-panel-in .32s cubic-bezier(.22,1,.36,1) both;
}
.shot-lightbox img{
width:auto;
max-width:100%;
height:auto;
max-height:78dvh;
object-fit:contain;
border-radius:18px;
background:transparent;
box-shadow:0 30px 90px rgba(0,0,0,.52);
}
.shot-lightbox figcaption{
color:rgba(255,255,255,.82);
font-size:14px;
font-weight:700;
letter-spacing:.02em;
}
@keyframes shot-lightbox-in{
from{opacity:0}
to{opacity:1}
}
@keyframes shot-lightbox-panel-in{
from{opacity:0;transform:translateY(18px) scale(.975)}
to{opacity:1;transform:none}
}
@media(max-width:640px){
.shot-lightbox{padding:72px 12px 18px}
.shot-lightbox img{max-height:72dvh;border-radius:12px}
}
@media(prefers-reduced-motion:reduce){
.shot,.shot img,.shot-lightbox[open],.shot-lightbox-panel{animation:none!important;transition:none!important}
}
@media(max-width:980px) and (min-width:761px){
.home-hero{min-height:auto;padding-bottom:22px}
.home-hero-note{margin-bottom:0}
}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.drag-contact-card{
--drag-card-x:0px;
--drag-card-y:0px;
--drag-card-rotate:0deg;
position:fixed;
right:clamp(16px,3vw,42px);
bottom:clamp(16px,3vw,36px);
z-index:16;
width:min(356px,calc(100vw - 32px));
padding:20px;
overflow:hidden;
border:1px solid rgba(255,255,255,.19);
border-radius:28px;
background:
radial-gradient(circle at 88% 8%,rgba(244,94,75,.22),transparent 42%),
radial-gradient(circle at 10% 90%,rgba(31,115,106,.18),transparent 46%),
linear-gradient(145deg,rgba(28,31,27,.98),rgba(7,9,7,.99));
box-shadow:0 22px 58px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);
color:#fff;
cursor:grab;
opacity:0;
visibility:hidden;
pointer-events:none;
touch-action:none;
user-select:none;
-webkit-user-select:none;
transform:translate3d(var(--drag-card-x),var(--drag-card-y),0) rotate(var(--drag-card-rotate));
transform-origin:50% 64%;
will-change:transform;
transition:opacity .28s ease,visibility .28s ease,transform .72s cubic-bezier(.2,1.25,.3,1),box-shadow .24s ease,scale .24s ease;
}
.drag-contact-card::before{
content:"";
position:absolute;
inset:-35% -20% auto 36%;
height:68%;
border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.11),transparent 68%);
pointer-events:none;
}
.drag-contact-card.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.drag-contact-card.is-dragging{
cursor:grabbing;
scale:1.025;
box-shadow:0 34px 82px rgba(0,0,0,.48),0 0 0 1px rgba(244,94,75,.22),inset 0 1px 0 rgba(255,255,255,.1);
transition:box-shadow .18s ease,scale .18s ease;
}
.drag-contact-card.is-gliding{transition:transform .52s cubic-bezier(.18,.86,.32,1.04),box-shadow .24s ease,scale .24s ease}
.drag-contact-card.is-returning{transition:transform .76s cubic-bezier(.2,1.35,.3,1),box-shadow .24s ease,scale .24s ease}
.drag-contact-card:focus-visible{outline:3px solid #f45e4b;outline-offset:4px}
.drag-contact-head{
position:relative;
display:grid;
grid-template-columns:46px minmax(0,1fr) auto;
gap:11px;
align-items:center;
}
.drag-contact-avatar{
display:grid;
width:46px;
height:46px;
overflow:hidden;
place-items:center;
border:1px solid rgba(255,255,255,.32);
border-radius:50%;
background:#f4f1eb;
}
.drag-contact-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.drag-contact-head b,.drag-contact-head small{display:block}
.drag-contact-head b{font-size:15px;line-height:1.2}
.drag-contact-head small{margin-top:3px;color:rgba(255,255,255,.57);font-size:12px;line-height:1.2}
.drag-contact-hint{
display:inline-flex;
gap:7px;
align-items:center;
padding:8px 10px;
border:1px solid rgba(255,255,255,.16);
border-radius:999px;
background:rgba(255,255,255,.07);
color:rgba(255,255,255,.72);
font-size:11px;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
}
.drag-contact-hint i{width:6px;height:6px;border-radius:50%;background:#f45e4b;box-shadow:0 0 0 4px rgba(244,94,75,.13)}
.drag-contact-card>p{
position:relative;
margin:28px 0 22px;
color:rgba(255,255,255,.7);
font-size:17px;
line-height:1.16;
}
.drag-contact-card>p strong{
display:inline-block;
margin-top:3px;
color:#fff;
font-family:Georgia,"Times New Roman",serif;
font-size:31px;
font-style:italic;
font-weight:400;
letter-spacing:-.045em;
}
.drag-contact-cta{
position:relative;
display:flex;
width:fit-content;
min-height:50px;
padding:7px 9px 7px 18px;
gap:18px;
align-items:center;
border:1px solid rgba(255,255,255,.72);
border-radius:999px;
background:#f8f7f3;
color:#111;
font-size:14px;
font-weight:750;
text-decoration:none;
touch-action:manipulation;
transition:transform .24s cubic-bezier(.22,1,.36,1),background-color .2s ease,color .2s ease;
}
.drag-contact-cta span:last-child{display:grid;width:34px;height:34px;place-items:center;border:1px solid rgba(0,0,0,.18);border-radius:50%;font-size:17px;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.drag-contact-cta:hover,.drag-contact-cta:focus-visible{transform:translateY(-2px);background:#f45e4b;color:#fff;outline:none}
.drag-contact-cta:hover span:last-child,.drag-contact-cta:focus-visible span:last-child{transform:rotate(8deg) translate(1px,-1px);border-color:rgba(255,255,255,.46)}
@media(max-width:640px){
.drag-contact-card{right:12px;bottom:12px;width:min(318px,calc(100vw - 24px));padding:16px;border-radius:24px}
.drag-contact-head{grid-template-columns:40px minmax(0,1fr) auto;gap:9px}
.drag-contact-avatar{width:40px;height:40px}
.drag-contact-hint{padding:7px 9px;font-size:10px}
.drag-contact-card>p{margin:22px 0 18px;font-size:15px}
.drag-contact-card>p strong{font-size:27px}
.drag-contact-cta{min-height:46px}
}
@media(max-width:390px){
.drag-contact-hint{width:35px;height:35px;padding:0;justify-content:center;font-size:0}
.drag-contact-hint i{width:7px;height:7px}
}
@media(prefers-reduced-motion:reduce){
.drag-contact-card,.drag-contact-card.is-gliding,.drag-contact-card.is-returning,.drag-contact-cta,.drag-contact-cta span:last-child{transition:none!important}
.drag-contact-card.is-dragging{scale:1}
}
.site-footer{
position:relative;
display:block;
padding:clamp(64px,8vw,110px) max(20px,calc((100% - var(--max))/2));
overflow:hidden;
background:#11140f;
color:#fff;
}
.footer-contact-panel{
position:relative;
width:100%;
padding:clamp(24px,4vw,46px);
overflow:hidden;
border:1px solid rgba(255,255,255,.15);
border-radius:32px;
background:
radial-gradient(circle at 94% -8%,rgba(244,94,75,.18),transparent 38%),
linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
box-shadow:0 24px 65px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.1);
}
.footer-contact-heading{
display:grid;
grid-template-columns:minmax(0,.82fr) minmax(300px,1.18fr);
gap:18px clamp(32px,6vw,90px);
align-items:end;
}
.footer-contact-heading .eyebrow{grid-column:1/-1;color:#ff9387}
.footer-contact-heading h2{
margin:0;
font-size:clamp(43px,6.2vw,84px);
line-height:.94;
letter-spacing:-.055em;
}
.footer-contact-heading p{
max-width:520px;
margin:0;
color:rgba(255,255,255,.68);
font-size:clamp(16px,1.8vw,21px);
}
.footer-contact-options{
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
gap:14px;
margin-top:34px;
}
.footer-contact-method{
position:relative;
display:flex;
min-width:0;
min-height:92px;
gap:14px;
align-items:center;
padding:17px 18px;
border:1px solid rgba(255,255,255,.14);
border-radius:22px;
background:rgba(255,255,255,.075);
box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
color:#fff;
transition:transform .28s cubic-bezier(.22,1,.36,1),background-color .22s ease,border-color .22s ease;
}
.footer-contact-method:hover,.footer-contact-method:focus-within{
transform:translateY(-3px);
border-color:rgba(255,255,255,.28);
background:rgba(255,255,255,.115);
}
.footer-contact-icon{
position:relative;
display:grid;
width:48px;
height:48px;
flex:0 0 48px;
place-items:center;
border-radius:15px;
background:#f8f7f3;
color:#11140f;
}
.footer-email-icon::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:22px;
height:16px;
border:2px solid currentColor;
border-radius:4px;
transform:translate(-50%,-50%);
}
.footer-email-icon::after{
content:"";
position:absolute;
left:50%;
top:10px;
margin-left:-7px;
width:14px;
height:14px;
border-right:2px solid currentColor;
border-bottom:2px solid currentColor;
transform:rotate(45deg);
transform-origin:center;
}
.footer-linkedin-icon{font-size:20px;font-weight:850;letter-spacing:-.04em}
.footer-contact-copy{display:block;min-width:0;flex:1}
.footer-contact-copy small{
display:block;
margin-bottom:3px;
color:rgba(255,255,255,.55);
font-size:10px;
font-weight:750;
letter-spacing:.13em;
text-transform:uppercase;
}
.footer-contact-copy a,.footer-contact-copy strong{
display:block;
overflow:hidden;
color:#fff;
font-size:clamp(15px,1.8vw,19px);
font-weight:700;
line-height:1.3;
text-overflow:ellipsis;
white-space:nowrap;
}
.footer-copy-email{
position:relative;
display:grid;
width:46px;
height:46px;
flex:0 0 46px;
place-items:center;
border:1px solid rgba(255,255,255,.18);
border-radius:50%;
background:rgba(0,0,0,.18);
color:#fff;
cursor:pointer;
transition:transform .25s cubic-bezier(.22,1,.36,1),background-color .2s ease,color .2s ease;
}
.footer-copy-email:hover,.footer-copy-email:focus-visible{transform:scale(1.07);background:#f8f7f3;color:#11140f;outline:none}
.footer-copy-email.is-copied{background:#f45e4b;color:#fff}
.copy-glyph{position:relative;width:20px;height:20px}
.copy-glyph::before,.copy-glyph::after{
content:"";
position:absolute;
width:11px;
height:13px;
border:2px solid currentColor;
border-radius:3px;
}
.copy-glyph::before{left:1px;top:1px;opacity:.52}
.copy-glyph::after{left:6px;top:5px}
.footer-contact-action{
padding:8px 12px;
border:1px solid rgba(255,255,255,.15);
border-radius:999px;
color:rgba(255,255,255,.72);
font-size:12px;
font-weight:700;
white-space:nowrap;
}
.footer-copy-toast{
position:absolute;
top:22px;
right:22px;
z-index:4;
padding:10px 14px;
border:1px solid rgba(255,255,255,.2);
border-radius:999px;
background:rgba(12,15,12,.82);
box-shadow:0 12px 28px rgba(0,0,0,.22);
color:#fff;
font-size:12px;
font-weight:750;
opacity:0;
transform:translateY(-8px) scale(.96);
visibility:hidden;
backdrop-filter:blur(16px);
transition:opacity .2s ease,transform .25s cubic-bezier(.22,1,.36,1),visibility .2s ease;
}
.footer-copy-toast.is-visible{opacity:1;transform:none;visibility:visible}
.contact-card-playground{
position:relative;
isolation:isolate;
width:100%;
min-height:clamp(450px,48vw,580px);
margin-top:22px;
overflow:hidden;
border:1px solid rgba(255,255,255,.14);
border-radius:32px;
background:
radial-gradient(circle at 82% 32%,rgba(244,94,75,.13),transparent 34%),
radial-gradient(circle at 12% 92%,rgba(31,115,106,.2),transparent 38%),
linear-gradient(145deg,#171a16,#0c0e0c);
box-shadow:0 24px 65px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);
}
.contact-card-playground::before{
content:"";
position:absolute;
inset:0;
z-index:0;
opacity:.14;
background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);
background-size:42px 42px;
mask-image:linear-gradient(to bottom right,black,transparent 72%);
pointer-events:none;
}
.contact-playground-copy{
position:absolute;
top:clamp(26px,4vw,48px);
left:clamp(26px,4vw,48px);
z-index:1;
max-width:390px;
pointer-events:none;
}
.contact-playground-copy .eyebrow{color:#ff9387}
.contact-playground-copy p{margin:8px 0 0;color:rgba(255,255,255,.62);font-size:clamp(14px,1.5vw,17px)}
.contact-card-playground .drag-contact-card{
position:absolute;
top:0;
right:auto;
bottom:auto;
left:0;
z-index:2;
width:min(356px,calc(100% - 24px));
opacity:0;
visibility:hidden;
transform:translate3d(var(--drag-card-x),var(--drag-card-y),0) rotate(var(--drag-card-rotate));
transition:opacity .28s ease,visibility .28s ease,box-shadow .24s ease,scale .24s ease;
}
.contact-card-playground .drag-contact-card.is-visible{opacity:1;visibility:visible}
.contact-card-playground .drag-contact-card.is-resetting{transition:transform .56s cubic-bezier(.2,1.25,.3,1),opacity .28s ease,visibility .28s ease,box-shadow .24s ease}
.contact-card-playground .drag-contact-card.is-dragging{transition:box-shadow .18s ease,scale .18s ease}
.contact-card-playground .drag-contact-card.is-gliding{
transition:box-shadow .2s ease,scale .2s ease;
box-shadow:0 30px 74px rgba(0,0,0,.42),0 0 0 1px rgba(244,94,75,.13),inset 0 1px 0 rgba(255,255,255,.1);
}
body.is-dragging-contact-card,body.is-dragging-contact-card *{
cursor:grabbing!important;
user-select:none!important;
-webkit-user-select:none!important;
}
.site-footer>.footer-bottom{
margin:24px 0 0;
padding-top:22px;
border-top:1px solid rgba(255,255,255,.16);
color:rgba(255,255,255,.56);
}
body:not(.home-active) .contact-card-playground{display:none}
.site-footer{
background:var(--paper);
color:var(--ink);
}
.footer-contact-panel{
color:#fff;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.17),
inset 0 -1px 0 rgba(0,0,0,.46),
0 7px 0 rgba(23,25,20,.1),
0 24px 55px rgba(23,25,20,.2),
0 48px 95px rgba(23,25,20,.12);
}
.contact-card-playground{
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
}
.contact-card-playground::before{content:none}
.site-footer>.footer-bottom{
border-top-color:rgba(23,25,20,.15);
color:rgba(23,25,20,.58);
}
@media(max-width:760px){
.footer-contact-heading{grid-template-columns:1fr}
.footer-contact-options{grid-template-columns:1fr}
.contact-card-playground{min-height:520px}
.contact-card-playground .drag-contact-card{right:auto;bottom:auto;width:min(318px,calc(100% - 24px));padding:16px;border-radius:24px}
}
@media(max-width:430px){
.site-footer{padding-right:14px;padding-left:14px}
.footer-contact-panel{padding:22px 16px;border-radius:26px}
.footer-contact-method{min-height:82px;padding:14px 12px;border-radius:18px}
.footer-contact-icon{width:42px;height:42px;flex-basis:42px;border-radius:13px}
.footer-contact-copy a,.footer-contact-copy strong{font-size:14px}
.footer-contact-action{display:none}
.footer-copy-email{width:42px;height:42px;flex-basis:42px}
.footer-copy-toast{top:12px;right:12px}
.contact-card-playground{min-height:488px;border-radius:26px}
.contact-playground-copy{top:22px;left:20px}
}
@media(prefers-reduced-motion:reduce){
.footer-contact-method,.footer-copy-email,.footer-copy-toast,.contact-card-playground .drag-contact-card{transition:none!important}
}
.footer-contact-panel.ft2{
color:var(--ink);
display:grid;
gap:0;
padding:0;
border:0;
border-radius:0;
background:none;
box-shadow:none;
}
.ft2 > .eyebrow{color:#22c55e}
.ft2 h2{
margin:18px 0 0;
font-size:clamp(46px,7vw,96px);
line-height:.94;
letter-spacing:-.055em;
}
.ft2 .ft2-sub{
max-width:520px;
margin:20px 0 0;
color:var(--muted);
font-size:clamp(15px,1.7vw,19px);
line-height:1.55;
text-wrap:pretty;
}
.ft2 .ft2-email{
justify-self:start;
margin:clamp(30px,4vw,52px) 0 0;
min-height:44px;
display:inline-flex;
align-items:center;
color:var(--ink);
font-size:clamp(24px,3.6vw,48px);
font-weight:750;
letter-spacing:-.03em;
line-height:1.1;
text-decoration:none;
border-bottom:3px solid var(--coral);
padding-bottom:6px;
word-break:break-all;
transition:color .22s ease,border-color .22s ease;
}
.ft2 .ft2-email:hover{color:#22c55e;border-color:#22c55e}
.ft2 .ft2-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vw,32px)}
.ft2 .ft2-copy,.ft2 .ft2-link{
white-space:nowrap;
display:inline-flex;
align-items:center;
gap:8px;
min-height:44px;
padding:10px 20px;
border:1px solid var(--line);
border-radius:999px;
background:none;
color:var(--ink);
font:inherit;
font-size:14px;
font-weight:700;
text-decoration:none;
cursor:pointer;
transition:background-color .22s ease,border-color .22s ease,transform .22s ease;
}
.ft2 .ft2-copy:hover,.ft2 .ft2-link:hover{background:rgba(23,25,20,.06);border-color:rgba(23,25,20,.4);transform:translateY(-2px)}
.ft2 .footer-copy-toast{position:static;margin-top:14px}
@media(max-width:520px){
.ft2 .ft2-email{font-size:clamp(20px,6.4vw,26px)}
}
@media(prefers-reduced-motion:reduce){
.ft2 .ft2-copy,.ft2 .ft2-link,.ft2 .ft2-email{transition:none}
}
.footer-contact-panel.ft3{
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
grid-template-areas:"lead signal" "actions signal";
column-gap:clamp(32px,5vw,80px);
padding-top:clamp(34px,4vw,54px);
border-top:2px solid var(--ink);
}
.ft3::before,.ft3::after{content:none!important}
.ft3 .ft3-lead{grid-area:lead}
.ft3 .ft3-actions{grid-area:actions;align-self:start;padding-top:clamp(30px,4vw,46px)}
.ft3 .ft3-signal{grid-area:signal}
.ft3 > .ft3-lead > .eyebrow{color:#22c55e}
.ft3 h2{
margin:16px 0 0;
font-size:clamp(44px,6.4vw,88px);
line-height:.92;
letter-spacing:-.055em;
}
.ft3 .ft3-sub{
max-width:34ch;
margin:18px 0 0;
color:var(--muted);
font-size:clamp(15px,1.6vw,18px);
line-height:1.55;
text-wrap:pretty;
}
.ft3 .ft3-email-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding-bottom:14px;
border-bottom:2px solid var(--ink);
}
.ft3 .ft3-email{
min-width:0;
color:var(--ink);
font-size:clamp(22px,3.1vw,40px);
font-weight:750;
letter-spacing:-.035em;
line-height:1.05;
text-decoration:none;
word-break:break-word;
transition:color .2s ease;
}
.ft3 .ft3-email:hover{color:#22c55e}
.ft3 .ft3-copy{
flex:0 0 auto;
min-height:44px;
padding:11px 20px;
border:1px solid rgba(23,25,20,.28);
border-radius:999px;
background:none;
color:var(--ink);
font:inherit;
font-size:13px;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
cursor:pointer;
transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.ft3 .ft3-copy:hover{background:#171914;border-color:#171914;color:#fff}
.ft3 .ft3-links{
display:grid;
margin:0;
padding:0;
list-style:none;
}
.ft3 .ft3-links a{
display:grid;
grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;
align-items:baseline;
gap:4px 18px;
min-height:56px;
padding:16px 2px;
border-bottom:1px solid var(--line);
color:var(--ink);
text-decoration:none;
transition:padding-left .22s ease,border-color .22s ease;
}
.ft3 .ft3-links a:hover{padding-left:10px;border-color:rgba(23,25,20,.45)}
.ft3 .ft3-links span{font-size:17px;font-weight:700;letter-spacing:-.01em}
.ft3 .ft3-links b{color:var(--muted);font-size:14px;font-weight:400}
.ft3 .ft3-links i{font-style:normal;color:#22c55e;font-size:16px}
.ft3 .footer-copy-toast{position:static;margin-top:14px}
.ft3 .ft3-signal{
display:grid;
align-content:start;
gap:0;
padding-left:clamp(24px,3vw,44px);
border-left:1px solid var(--line);
}
.ft3 .ft3-signal-item{
display:grid;
gap:5px;
padding:18px 0;
border-bottom:1px solid var(--line);
}
.ft3 .ft3-signal-item:first-child{padding-top:0}
.ft3 .ft3-signal-item:last-child{border-bottom:0}
.ft3 .ft3-signal-item b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.ft3 .ft3-signal-item span{color:var(--muted);font-size:14px;line-height:1.5;text-wrap:pretty}
.ft3 .ft3-status{grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.ft3 .ft3-status > div{display:grid;gap:5px}
.ft3 .ft3-dot{
width:9px;height:9px;margin-top:6px;
border-radius:50%;
background:#22c55e;
box-shadow:0 0 0 4px rgba(207,63,48,.16);
}
.ft3 #ft3-clock{font-variant-numeric:tabular-nums}
@media(max-width:860px){
.footer-contact-panel.ft3{
grid-template-columns:1fr;
grid-template-areas:"lead" "actions" "signal";
}
.ft3 .ft3-signal{
margin-top:34px;
padding-left:0;
padding-top:26px;
border-left:0;
border-top:1px solid var(--line);
}
.ft3 .ft3-signal-item:first-child{padding-top:0}
}
@media(max-width:520px){
.ft3 .ft3-email-row{flex-direction:column;align-items:flex-start;gap:14px}
.ft3 .ft3-links a{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name arrow" "desc arrow"}
.ft3 .ft3-links span{grid-area:name}
.ft3 .ft3-links b{grid-area:desc}
.ft3 .ft3-links i{grid-area:arrow;align-self:center}
}
@media(prefers-reduced-motion:reduce){
.ft3 .ft3-copy,.ft3 .ft3-email,.ft3 .ft3-links a{transition:none}
}
body.home-active footer#contact .ft3{
border-top:0;
padding:clamp(30px,3.6vw,48px) 0 clamp(10px,1.6vw,20px);
}
body.home-active footer#contact .ft3 .ft3-sub{color:rgba(247,246,242,.7)!important}
body.home-active footer#contact .ft3 .ft3-email{color:#faf9f6!important}
body.home-active footer#contact .ft3 .ft3-email:hover{color:#ff8a72!important}
body.home-active footer#contact .ft3 .ft3-email-row{border-bottom-color:rgba(255,255,255,.32)}
body.home-active footer#contact .ft3 .ft3-copy{
border-color:rgba(255,255,255,.34)!important;
background:rgba(255,255,255,.06)!important;
color:#faf9f6!important;
}
body.home-active footer#contact .ft3 .ft3-copy:hover{
background:#faf9f6!important;
border-color:#faf9f6!important;
color:#14170f!important;
}
body.home-active footer#contact .ft3 .ft3-links a{border-bottom-color:rgba(255,255,255,.16)}
body.home-active footer#contact .ft3 .ft3-links a:hover{border-bottom-color:rgba(255,255,255,.4)}
body.home-active footer#contact .ft3 .ft3-links span{color:#faf9f6}
body.home-active footer#contact .ft3 .ft3-links b{color:rgba(247,246,242,.6)}
body.home-active footer#contact .ft3 .ft3-links i{color:#ff8a72}
body.home-active footer#contact .ft3 .ft3-signal{border-left-color:rgba(255,255,255,.16)}
body.home-active footer#contact .ft3 .ft3-signal-item{border-bottom-color:rgba(255,255,255,.16)}
body.home-active footer#contact .ft3 .ft3-signal-item b{color:#faf9f6}
body.home-active footer#contact .ft3 .ft3-signal-item span{color:rgba(247,246,242,.62)}
body.home-active footer#contact .ft3 .ft3-dot{
background:#ff8a72;
box-shadow:0 0 0 4px rgba(255,138,114,.18);
}
body.home-active footer#contact .ft3 #ft3-clock{color:#ff8a72}
body.home-active footer#contact .ft3 .footer-copy-toast{color:rgba(247,246,242,.72)}
@media(max-width:860px){
body.home-active footer#contact .ft3 .ft3-signal{border-top-color:rgba(255,255,255,.16)}
}
body.home-active footer#contact .ft3{padding-bottom:clamp(4px,1vw,12px)}
body.home-active footer#contact .ft3 .ft3-links a:last-child{border-bottom:0}
.ft3 .ft3-copy,
body.home-active footer#contact .ft3 .ft3-copy{
width:auto!important;
height:auto!important;
flex:0 0 auto!important;
flex-basis:auto!important;
min-width:0;
min-height:44px!important;
padding:11px 20px!important;
border-radius:999px!important;
place-items:center;
}
.ft3 .ft3-copy-label{display:inline-block;white-space:nowrap}
.case-crumb{display:flex;align-items:center;gap:8px;margin:0 0 18px;font-size:12px;font-weight:600;color:var(--muted)}
.case-crumb a{color:var(--muted);text-decoration:none;transition:color .2s ease}
.case-crumb a:hover{color:var(--ink);text-decoration:underline}
.case-crumb b{font-weight:700;color:var(--ink)}
.shot-lightbox-close{position:absolute;top:10px;right:10px;z-index:2;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.24);cursor:pointer;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.shot-lightbox-close:hover{background:#fff;transform:scale(1.08)}
.shot-lightbox-panel{position:relative}
.home-timeline,.home-archive-section{
--work-card-bleed:clamp(12px,calc(50vw - 732px),80px);
position:relative;
width:min(calc(100% - 48px),1440px);
margin-top:12px;
padding-top:80px;
scroll-margin-top:100px;
isolation:isolate;
}
.home-timeline:before,.home-archive-section:before{
content:"";
position:absolute;
inset:0 calc(0px - var(--work-card-bleed));
z-index:-1;
border:1px solid var(--line);
border-radius:38px;
background:var(--card);
box-shadow:0 18px 48px rgba(25,28,20,.06);
}
.home-timeline .section-head,.home-archive-section .section-head{margin-bottom:32px}
.home-timeline .section-head h2,.home-archive-section .section-head h2{font-size:clamp(38px,4.8vw,62px);line-height:1.02}
.home-timeline .section-head p{max-width:400px;font-size:16px}
.home-archive-section{padding-top:80px}
.home-archive-section .shots{margin-top:0}
@media(max-width:760px){
.home-timeline,.home-archive-section{--work-card-bleed:18px;margin-top:8px;padding-top:68px}
.home-timeline:before,.home-archive-section:before{border-radius:26px}
.home-timeline .section-head,.home-archive-section .section-head{margin-bottom:24px}
.home-timeline .section-head h2,.home-archive-section .section-head h2{font-size:42px}
.home-timeline .section-head p{font-size:15px}
}
.shot-lightbox-panel{width:fit-content;max-width:min(94vw,1600px)}
.shot-lightbox img{max-width:min(94vw,1600px)}
.home-work,.home-timeline,.home-archive-section{padding-bottom:96px}
.timeline-track{gap:16px}
.case-crumb a{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;margin-inline:-4px}
.home-resume-link{display:inline-flex;align-items:center;min-height:44px}
.finding-replay{min-height:44px}
.is-return-visit .reveal{animation:none}
.is-return-visit .home-hero:not(.is-hero-entered) #home-hero-title,
.is-return-visit .home-hero:not(.is-hero-entered) .home-hero-meta,
.is-return-visit .home-hero:not(.is-hero-entered) .home-hero-note{animation:none;opacity:1;transform:none}
.project-highlights span{
border:1px solid rgba(255,255,255,.8);
background:linear-gradient(150deg,rgba(255,255,255,.82),rgba(236,242,238,.5));
color:#3c4a44;
box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 6px 16px rgba(25,28,20,.08);
backdrop-filter:blur(10px) saturate(140%);
-webkit-backdrop-filter:blur(10px) saturate(140%);
}
.shot{position:relative}
.shot span{
position:absolute;left:12px;bottom:12px;
padding:9px 14px;
border:1px solid rgba(255,255,255,.75);
border-radius:999px;
background:linear-gradient(150deg,rgba(255,255,255,.7),rgba(255,255,255,.38));
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 8px 20px rgba(15,18,14,.22);
backdrop-filter:blur(14px) saturate(150%);
-webkit-backdrop-filter:blur(14px) saturate(150%);
color:var(--ink);
font-size:13px;
font-weight:700;
line-height:1;
}
:root{
--ease-entrance:cubic-bezier(.22,1,.36,1);
--ease-standard:cubic-bezier(.2,.72,.2,1);
--ease-exit:cubic-bezier(.4,0,1,1);
--dur-feedback:140ms;
--dur-state:220ms;
--dur-view:420ms;
--dur-focal:560ms;
}
.button{transition:transform var(--dur-state) var(--ease-entrance),box-shadow var(--dur-state) var(--ease-entrance),background-color var(--dur-state) var(--ease-standard),color var(--dur-state) var(--ease-standard)}
@media(prefers-reduced-motion:no-preference){
::view-transition-old(root){animation:vt-fade-out var(--dur-view) var(--ease-exit) both}
::view-transition-new(root){animation:vt-fade-in var(--dur-view) var(--ease-entrance) both}
::view-transition-group(case-stage){
animation-duration:var(--dur-focal);
animation-timing-function:var(--ease-entrance);
z-index:5;
}
::view-transition-image-pair(case-stage){isolation:auto}
::view-transition-old(case-stage),
::view-transition-new(case-stage){
height:100%;width:100%;
object-fit:cover;object-position:center top;
animation-duration:var(--dur-focal);
animation-timing-function:var(--ease-entrance);
mix-blend-mode:normal;
}
::view-transition-old(case-stage){animation-name:vt-fade-out;animation-duration:calc(var(--dur-focal) * .55)}
::view-transition-new(case-stage){animation-name:vt-fade-in;animation-delay:calc(var(--dur-focal) * .18);animation-duration:calc(var(--dur-focal) * .82)}
}
@keyframes vt-fade-out{from{opacity:1}to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0}to{opacity:1}}
.vt-stage-active{border-radius:var(--radius)}
@media(max-width:640px){
.site-header nav{
display:flex;
opacity:0;visibility:hidden;
transform:translateY(-10px) scale(.985);
transform-origin:top center;
pointer-events:none;
box-shadow:0 18px 44px rgba(25,28,20,.16);
transition:opacity var(--dur-state) var(--ease-standard),
transform var(--dur-state) var(--ease-entrance),
visibility 0s linear var(--dur-state);
}
.site-header nav.open{
opacity:1;visibility:visible;transform:none;pointer-events:auto;
transition:opacity var(--dur-feedback) var(--ease-standard),
transform var(--dur-state) var(--ease-entrance),
visibility 0s;
}
.site-header nav a{
opacity:0;transform:translateY(-6px);
transition:opacity var(--dur-feedback) var(--ease-standard),
transform var(--dur-state) var(--ease-entrance);
}
.site-header nav.open a{opacity:1;transform:none}
.site-header nav.open a:nth-child(1){transition-delay:40ms}
.site-header nav.open a:nth-child(2){transition-delay:75ms}
.site-header nav.open a:nth-child(3){transition-delay:110ms}
.site-header nav.open a:nth-child(4){transition-delay:145ms}
.menu-toggle{transition:opacity var(--dur-feedback) var(--ease-standard)}
.menu-toggle[aria-expanded="true"]{opacity:.55}
}
.app-toast{
position:fixed;left:50%;bottom:26px;z-index:60;
display:flex;align-items:center;gap:10px;
padding:13px 20px;border-radius:999px;
background:var(--ink);color:#f7f6f2;
font-size:15px;font-weight:600;letter-spacing:-.01em;
box-shadow:0 16px 40px rgba(25,28,20,.28);
opacity:0;visibility:hidden;
transform:translateX(-50%) translateY(10px) scale(.97);
transition:opacity var(--dur-state) var(--ease-standard),
transform var(--dur-state) var(--ease-entrance),
visibility 0s linear var(--dur-state);
}
.app-toast.is-visible{
opacity:1;visibility:visible;
transform:translateX(-50%) translateY(0) scale(1);
transition:opacity var(--dur-feedback) var(--ease-standard),
transform var(--dur-state) var(--ease-entrance),
visibility 0s;
}
.app-toast-dot{
width:8px;height:8px;border-radius:50%;background:var(--lime);flex:0 0 8px;
}
@media(prefers-reduced-motion:no-preference){
.app-toast.is-visible .app-toast-dot{animation:app-toast-pulse 1.6s var(--ease-standard) infinite}
}
@keyframes app-toast-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}
@media(max-width:640px){.app-toast{left:16px;right:16px;bottom:16px;transform:translateY(10px) scale(.97);justify-content:center}
.app-toast.is-visible{transform:translateY(0) scale(1)}}

/* ===== media.css ===== */
.media-block {
margin: 34px 0 54px;
}
.media-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 14px;
}
.media-heading figcaption {
color: var(--ink);
font-size: 12px;
font-weight: 850;
letter-spacing: .13em;
text-transform: uppercase;
}
.media-heading p {
max-width: 500px;
margin: 0;
color: var(--muted);
font-size: 13px !important;
line-height: 1.45 !important;
text-align: right;
}
.media-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.media-open {
display: grid;
width: 100%;
min-width: 0;
margin: 0;
padding: 10px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 20px;
background: #fff;
color: inherit;
cursor: zoom-in;
}
.media-open:hover {
border-color: rgba(23, 25, 20, .34);
box-shadow: 0 16px 40px rgba(23, 25, 20, .09);
}
.media-open:focus-visible,
.rail-controls button:focus-visible,
.study-deep-dive summary:focus-visible {
outline: 3px solid #157d66;
outline-offset: 3px;
}
.media-open img {
width: 100%;
height: auto;
max-height: 700px;
margin: auto;
object-fit: contain;
border-radius: 12px;
}
.media-grid .media-open:only-child {
grid-column: 1 / -1;
}
.case > .media-hero {
margin: 48px 0 28px;
}
.media-hero .media-open {
padding: clamp(12px, 2.5vw, 32px);
background: #eef1ed;
}
.media-hero img {
max-height: 680px;
}
.logo-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.logo-grid .media-open {
min-height: 128px;
padding: 24px;
cursor: zoom-in;
}
.logo-grid img {
max-height: 76px;
}
.media-neo .media-static {
cursor: default;
}
.media-neo .media-static:hover {
border-color: var(--line);
box-shadow: none;
transform: none;
}
.rail-shell {
position: relative;
}
.rail-controls {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 12px;
}
.rail-progress {
color: var(--muted);
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.rail-controls > div {
display: flex;
gap: 8px;
}
.rail-controls button {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--card);
color: var(--ink);
cursor: pointer;
}
.rail-controls button:hover {
background: var(--ink);
color: #fff;
}
.media-rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(620px, 82%);
gap: 14px;
padding: 2px 2px 16px;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-behavior: smooth;
scroll-snap-type: inline mandatory;
scrollbar-color: rgba(23, 25, 20, .35) transparent;
scrollbar-width: thin;
}
.media-rail > * {
scroll-snap-align: start;
}
.media-rail .media-open {
min-height: 420px;
}
.media-rail .media-open img {
max-height: 620px;
}
.media-system .media-rail {
grid-auto-columns: minmax(480px, 64%);
}
.media-before .media-rail,
.media-improvements .media-rail,
.media-ui .media-rail {
grid-auto-columns: minmax(560px, 76%);
}
.video-block video {
display: block;
width: 100%;
max-height: 720px;
border: 1px solid var(--line);
border-radius: 22px;
background: #10120f;
box-shadow: 0 24px 55px rgba(23, 25, 20, .12);
}
.motion-note {
margin: 10px 2px 0 !important;
color: var(--muted) !important;
font-size: 13px !important;
}
.quote-rail {
grid-auto-columns: minmax(310px, 42%);
}
.review-card {
display: flex;
flex-direction: column;
min-height: 265px;
margin: 0;
padding: 28px;
border: 1px solid var(--line);
border-radius: 22px;
background: #20221f;
color: #fff;
}
.review-card span {
align-self: flex-start;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, .12);
font-size: 11px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.review-card p {
margin: 30px 0 !important;
color: #fff !important;
font-family: Georgia, serif;
font-size: clamp(21px, 2.3vw, 28px) !important;
line-height: 1.25 !important;
}
.review-card cite {
margin-top: auto;
color: #b9bcb4;
font-size: 14px;
font-style: normal;
}
.case-impact-summary {
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: clamp(34px, 6vw, 82px);
align-items: end;
padding: clamp(52px, 7vw, 88px) 0 34px;
}
.impact-summary-copy h2 {
margin: 12px 0 18px;
font-size: clamp(34px, 4.4vw, 60px);
line-height: 1;
letter-spacing: -.05em;
}
.impact-summary-copy p {
max-width: 540px;
color: var(--muted);
font-size: 17px;
}
.case-jump {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 46px;
margin-top: 14px;
font-weight: 800;
}
.case-impact-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.case-impact-grid > div {
min-height: 180px;
padding: 26px;
border: 1px solid var(--line);
border-radius: 22px;
background: var(--card);
}
.case-impact-grid > div:first-child,
.case-impact-grid > div:nth-child(4) {
background: var(--ink);
color: #fff;
}
.case-impact-grid > div:nth-child(2) {
background: #c7f4e7;
}
.case-impact-grid > div:nth-child(3) {
background: var(--lime);
}
.case-impact-grid strong {
display: block;
font-size: clamp(36px, 4vw, 54px);
line-height: 1;
letter-spacing: -.06em;
}
.case-impact-grid span {
display: block;
margin-top: 40px;
font-size: 14px;
}
.priority-decision {
margin: 28px 0 44px;
}
.research-overview {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 18px 0 44px;
}
.research-overview > div {
min-height: 190px;
padding: 24px;
border: 1px solid rgba(23, 25, 20, .2);
border-radius: 20px;
background: rgba(255, 255, 255, .72);
}
.research-overview span {
display: block;
margin-bottom: 30px;
color: #5f6657;
font-size: 11px;
font-weight: 850;
letter-spacing: .1em;
}
.research-overview strong {
display: block;
font-size: 22px;
}
.research-overview p {
margin: 10px 0 0 !important;
color: #42463d !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
.decision-track {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
margin-top: 14px;
}
.decision-track > div {
min-height: 240px;
padding: 20px;
border: 1px solid rgba(23, 25, 20, .2);
border-radius: 18px;
background: rgba(255, 255, 255, .72);
}
.decision-track > div:last-child {
background: var(--ink);
color: #fff;
}
.decision-track b {
display: block;
color: #5f6657;
font-size: 10px;
letter-spacing: .09em;
text-transform: uppercase;
}
.decision-track > div:last-child b,
.decision-track > div:last-child p {
color: #c7cbc1 !important;
}
.decision-track strong {
display: block;
margin: 34px 0 12px;
font-size: 22px;
line-height: 1.05;
}
.decision-track p {
margin: 0 !important;
color: #42463d !important;
font-size: 13px !important;
line-height: 1.5 !important;
}
.result-panel {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 22px;
align-items: center;
margin: 18px 0 30px;
padding: 18px;
border: 1px solid var(--line);
border-radius: 24px;
background: var(--card);
}
.result-panel > div {
min-height: 200px;
padding: 24px;
border-radius: 18px;
background: #ecece7;
}
.result-panel .result-after {
background: var(--lime);
}
.result-panel strong {
display: block;
margin-top: 32px;
font-size: clamp(48px, 6vw, 76px);
line-height: .9;
letter-spacing: -.07em;
}
.result-panel p {
margin: 12px 0 0 !important;
color: var(--ink) !important;
font-size: 14px !important;
}
.result-arrow {
font-size: 28px;
}
.research-comparison {
position: relative;
}
.research-comparison > h2 {
margin-top: 52px !important;
padding-top: 42px;
border-top: 1px solid var(--line);
}
.research-comparison > h2:first-of-type {
margin-top: 12px !important;
padding-top: 0;
border-top: 0;
}
.research-synthesis {
margin: 56px 0 10px;
padding: clamp(28px, 4vw, 46px);
border-radius: 28px;
background: var(--ink);
color: #fff;
}
.research-synthesis h3 {
max-width: 700px;
margin: 12px 0 28px !important;
font-size: clamp(28px, 4vw, 44px) !important;
line-height: 1.02 !important;
letter-spacing: -.04em;
}
.research-synthesis > div {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.research-synthesis p {
margin: 0 !important;
padding: 20px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 18px;
color: #d4d7cf !important;
font-size: 15px !important;
}
.research-synthesis .synthesis-decision {
margin-top: 12px !important;
border-color: transparent;
background: var(--lime);
color: var(--ink) !important;
}
.study-deep-dive {
margin: 30px 0 46px;
border: 1px solid var(--line);
border-radius: 22px;
background: rgba(255, 255, 255, .55);
overflow: hidden;
}
.chapter.dark .study-deep-dive {
border-color: rgba(255, 255, 255, .2);
background: rgba(255, 255, 255, .06);
}
.study-deep-dive summary {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 60px;
padding: 0 22px;
font-weight: 800;
cursor: pointer;
list-style: none;
}
.study-deep-dive summary::-webkit-details-marker {
display: none;
}
.study-deep-dive summary .deep-dive-icon {
font-size: 28px;
font-weight: 400;
transition: transform .2s ease;
}
.study-deep-dive[open] summary .deep-dive-icon {
transform: rotate(45deg);
}
.deep-dive-content {
padding: 0 22px 24px;
border-top: 1px solid var(--line);
}
.chapter.dark .deep-dive-content {
border-top-color: rgba(255, 255, 255, .14);
}
.reading-progress {
position: fixed;
inset: 0 0 auto;
z-index: 50;
height: 3px;
background: transparent;
pointer-events: none;
}
.reading-progress span {
display: block;
width: 100%;
height: 100%;
background: #28a889;
transform: scaleX(0);
transform-origin: left;
}
.study-toc a {
display: flex !important;
align-items: center;
min-height: 44px;
padding: 8px 10px !important;
border-radius: 10px;
transition: color .2s ease, background .2s ease;
}
.study-toc a.active {
background: var(--ink);
color: #fff !important;
}
.kfh-lightbox {
width: min(94vw, 1440px);
max-width: none;
max-height: 92vh;
padding: 54px 22px 22px;
border: 0;
border-radius: 24px;
background: #10120f;
color: #fff;
}
.kfh-lightbox::backdrop {
background: rgba(10, 11, 9, .82);
backdrop-filter: blur(8px);
}
.kfh-lightbox > div {
display: grid;
place-items: center;
}
.kfh-lightbox img {
max-width: 100%;
max-height: calc(92vh - 120px);
border-radius: 12px;
}
.kfh-lightbox p {
margin: 14px 0 0;
color: #c8cbc3;
font-size: 14px;
}
.lightbox-close {
position: absolute;
top: 10px;
right: 12px;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
color: #fff;
font-size: 28px;
cursor: pointer;
}
.long-study .chapter h2 {
font-size: clamp(36px, 4.2vw, 56px);
line-height: 1.03;
}
.long-study .chapter h3 {
font-size: 22px;
line-height: 1.25;
}
.long-study .chapter p,
.long-study .chapter li {
font-size: 17px;
line-height: 1.72;
}
.long-study .chapter {
padding-bottom: 76px;
}
@media (max-width: 1100px) {
.decision-track {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.research-overview {
grid-template-columns: 1fr;
}
.media-rail {
grid-auto-columns: minmax(520px, 82%);
}
}
@media (max-width: 900px) {
.case-impact-summary {
grid-template-columns: 1fr;
}
.long-study {
display: block !important;
}
.study-toc {
position: sticky !important;
top: 82px !important;
z-index: 10;
display: flex;
gap: 6px;
margin: 0 -4px 34px;
padding: 8px 4px !important;
overflow-x: auto;
border: 0 !important;
background: rgba(244, 241, 235, .93);
backdrop-filter: blur(14px);
scrollbar-width: none;
}
.study-toc::-webkit-scrollbar {
display: none;
}
.study-toc .eyebrow {
display: none;
}
.study-toc a {
flex: 0 0 auto;
min-height: 44px;
padding: 8px 14px !important;
border: 1px solid var(--line);
background: var(--card);
}
}
@media (max-width: 700px) {
.media-heading {
display: block;
}
.media-heading p {
margin-top: 7px;
text-align: left;
}
.media-grid {
grid-template-columns: 1fr;
}
.media-grid .media-open:only-child {
grid-column: auto;
}
.logo-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.logo-grid .media-open {
min-height: 108px;
padding: 18px;
}
.media-rail,
.media-system .media-rail,
.media-before .media-rail,
.media-improvements .media-rail,
.media-ui .media-rail,
.quote-rail {
grid-auto-columns: 88%;
}
.media-rail .media-open {
min-height: 270px;
}
.media-rail .media-open img {
max-height: 440px;
}
.review-card {
min-height: 250px;
padding: 24px;
}
.case-impact-grid {
grid-template-columns: 1fr 1fr;
}
.case-impact-grid > div {
min-height: 148px;
padding: 20px;
}
.case-impact-grid span {
margin-top: 28px;
}
.decision-track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 82%;
grid-template-columns: none;
padding-bottom: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.decision-track > div {
min-height: 220px;
scroll-snap-align: start;
}
.result-panel {
grid-template-columns: 1fr;
}
.result-panel > div {
min-height: 170px;
}
.result-arrow {
justify-self: center;
transform: rotate(90deg);
}
.research-synthesis > div {
grid-template-columns: 1fr;
}
.kfh-lightbox {
width: 96vw;
padding-inline: 12px;
}
}
@media (max-width: 440px) {
.case-impact-grid {
grid-template-columns: 1fr;
}
.case-impact-grid > div {
min-height: 132px;
}
.case-impact-grid span {
margin-top: 22px;
}
}
@media (prefers-reduced-motion: reduce) {
.media-rail {
scroll-behavior: auto;
}
}
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.case .case-hero {
display: grid;
grid-template-columns: minmax(0, .78fr) minmax(480px, 1.22fr);
grid-template-rows: auto auto auto;
gap: 18px clamp(30px, 5vw, 72px);
align-content: center;
min-height: min(760px, calc(100vh - 130px));
padding: clamp(36px, 5vw, 64px);
}
.case .case-hero::after {
top: -190px;
right: -130px;
width: 520px;
height: 520px;
background: #4f827b;
opacity: .52;
}
.case .case-hero > .eyebrow,
.case .case-hero > h1,
.case .case-hero > p {
grid-column: 1;
margin-block: 0;
}
.case .case-hero > h1 {
max-width: 600px;
font-size: clamp(54px, 6.8vw, 92px);
}
.case .case-hero > p {
align-self: start;
max-width: 560px;
font-size: clamp(17px, 1.55vw, 21px);
}
.case-hero-visual {
grid-column: 2;
grid-row: 1 / 4;
align-self: center;
min-width: 0;
margin: 0;
}
.case-hero-visual .media-open {
padding: 0;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.case-hero-visual .media-open:hover {
border-color: transparent;
box-shadow: none;
transform: translateY(-4px) rotate(-.35deg);
}
.case-hero-visual img {
width: 100%;
border-radius: 0;
filter: drop-shadow(0 34px 34px rgba(0, 0, 0, .42));
transition: transform .45s cubic-bezier(.2, .72, .2, 1), filter .45s ease;
}
.case-hero-visual .media-open:hover img {
filter: drop-shadow(0 40px 42px rgba(0, 0, 0, .5));
transform: scale(1.012);
}
.case-impact-summary {
align-items: center;
padding-block: clamp(62px, 8vw, 108px);
}
.case-impact-grid {
gap: 12px;
}
.case-impact-grid > .impact-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 206px;
padding: 24px;
overflow: hidden;
border: 1px solid rgba(23, 25, 20, .12);
border-radius: 26px;
box-shadow: 0 14px 36px rgba(23, 25, 20, .07);
}
.case-impact-grid > div.impact-onboarding {
background: #153d38;
color: #f8fbf9;
}
.case-impact-grid > div.impact-adoption {
background: #d9e5ff;
color: #1a2238;
}
.case-impact-grid > div.impact-delivery {
background: #f0ddcd;
color: #3b2920;
}
.case-impact-grid > div.impact-deadlines {
background: #34303d;
color: #faf8fd;
}
.case-impact-grid .impact-index {
margin: 0 0 auto;
font-size: 10px;
font-weight: 850;
letter-spacing: .14em;
opacity: .72;
text-transform: uppercase;
}
.case-impact-grid .impact-card strong {
margin-top: 40px;
font-size: clamp(40px, 4vw, 58px);
}
.case-impact-grid .impact-card > span:not(.impact-index) {
margin-top: 10px;
font-size: 14px;
font-weight: 650;
}
.case-impact-grid .impact-card i {
position: absolute;
right: 24px;
bottom: 24px;
width: 48px;
height: 5px;
border-radius: 99px;
background: currentColor;
opacity: .24;
transform: scaleX(.25);
transform-origin: left;
}
.motion-ready .case-impact-grid .impact-card {
opacity: 0;
transform: translateY(24px) scale(.97);
}
.motion-ready .case-impact-grid.is-visible .impact-card {
animation: metric-card-in .72s cubic-bezier(.2, .72, .2, 1) forwards;
}
.motion-ready .case-impact-grid.is-visible .impact-card:nth-child(2) { animation-delay: .09s; }
.motion-ready .case-impact-grid.is-visible .impact-card:nth-child(3) { animation-delay: .18s; }
.motion-ready .case-impact-grid.is-visible .impact-card:nth-child(4) { animation-delay: .27s; }
.case-impact-grid.is-visible .impact-card i {
animation: metric-line-in .9s .45s cubic-bezier(.2, .72, .2, 1) forwards;
}
@keyframes metric-card-in {
to { opacity: 1; transform: none; }
}
@keyframes metric-line-in {
to { transform: scaleX(1); }
}
.product-analysis-layout {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
gap: clamp(28px, 5vw, 58px);
align-items: center;
margin: 54px 0 24px;
padding: clamp(26px, 4vw, 44px);
border: 1px solid var(--line);
border-radius: 28px;
background: rgba(255, 255, 255, .56);
}
.product-analysis-copy h3 {
margin: 0 0 14px !important;
font-size: clamp(27px, 3vw, 36px) !important;
}
.product-analysis-copy p {
margin: 0 !important;
}
.product-analysis-layout .media-product {
margin: 0;
}
.product-analysis-layout .media-heading {
display: none;
}
.product-analysis-layout .media-open {
padding: 7px;
border-radius: 18px;
}
.gif-block .media-open {
padding: clamp(8px, 1.4vw, 16px);
background: #fff;
}
.gif-block .animated-evidence {
width: 100%;
max-height: 720px;
object-fit: contain;
}
.chapter.dark .verified-findings {
gap: 14px;
}
.chapter.dark .verified-findings .finding {
min-height: 176px;
padding: 24px;
border-color: rgba(255, 255, 255, .16);
background: #f7f8f6;
color: #2b4047;
}
.chapter.dark .verified-findings .finding strong {
margin-bottom: 28px;
color: #2b4047;
font-size: clamp(38px, 4vw, 52px);
line-height: 1;
}
.chapter.dark .verified-findings .finding span {
display: block;
color: #626b6a;
font-size: 15px;
line-height: 1.4;
}
.document-link-wrap {
margin: 18px 0 8px !important;
}
.document-link {
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 48px;
padding: 0 18px;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 999px;
background: rgba(255, 255, 255, .08);
color: #fff;
font-size: 14px;
font-weight: 800;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.document-link:hover {
border-color: rgba(255, 255, 255, .54);
background: rgba(255, 255, 255, .14);
transform: translateY(-2px);
}
.document-link:focus-visible {
outline: 3px solid #9ee2d5;
outline-offset: 3px;
}
.research-synthesis .synthesis-decision {
background: #d9d7fa;
color: #272540 !important;
}
.chapter.accent {
background: #dce9e5;
}
.chapter.accent .chapter-num {
color: #286b61;
}
.chapter.accent p,
.chapter.accent li {
color: #34433f;
}
.chapter.accent .decision-track > div {
border-color: rgba(21, 61, 56, .16);
background: rgba(255, 255, 255, .66);
}
.chapter.accent .decision-track > div:last-child {
background: #153d38;
color: #fff;
}
.result-panel {
overflow: hidden;
box-shadow: 0 18px 44px rgba(23, 25, 20, .08);
}
.result-panel > div {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.result-panel .result-after {
color: #fff;
}
.result-onboarding .result-after {
background: #0f6d65;
}
.result-adoption .result-after {
background: #5b5fa8;
}
.result-panel .result-after p,
.result-panel .result-after .eyebrow {
color: #fff !important;
}
.result-panel .result-after .eyebrow {
opacity: .78;
}
.motion-ready .result-panel .result-before,
.motion-ready .result-panel .result-after,
.motion-ready .result-panel .result-arrow {
opacity: 0;
}
.motion-ready .result-panel .result-before {
transform: translateX(-28px);
}
.motion-ready .result-panel .result-after {
transform: translateX(28px);
}
.motion-ready .result-panel .result-arrow {
transform: scale(.6);
}
.motion-ready .result-panel.is-visible .result-before,
.motion-ready .result-panel.is-visible .result-after,
.motion-ready .result-panel.is-visible .result-arrow {
animation: result-in .7s cubic-bezier(.2, .72, .2, 1) forwards;
}
.motion-ready .result-panel.is-visible .result-arrow { animation-delay: .16s; }
.motion-ready .result-panel.is-visible .result-after { animation-delay: .28s; }
@keyframes result-in {
to { opacity: 1; transform: none; }
}
.media-mobile .media-open {
position: relative;
}
.coming-soon-overlay {
position: absolute;
inset: 10px;
z-index: 2;
display: grid;
place-items: center;
border-radius: 12px;
background: linear-gradient(135deg, rgba(12, 24, 23, .58), rgba(12, 24, 23, .28));
color: #fff;
font-size: clamp(22px, 4vw, 48px);
font-weight: 800;
letter-spacing: -.03em;
text-shadow: 0 2px 18px rgba(0, 0, 0, .32);
backdrop-filter: blur(2px);
}
@media (max-width: 980px) {
.case .case-hero {
grid-template-columns: 1fr;
grid-template-rows: auto;
min-height: auto;
}
.case .case-hero > .eyebrow,
.case .case-hero > h1,
.case .case-hero > p,
.case-hero-visual {
grid-column: 1;
grid-row: auto;
}
.case-hero-visual {
margin-top: 20px;
}
}
@media (max-width: 700px) {
.case .case-hero {
gap: 15px;
padding: 28px 22px 22px;
}
.case .case-hero > h1 {
font-size: clamp(46px, 15vw, 68px);
}
.case-hero-visual {
margin-top: 12px;
}
.case-hero-visual .media-open {
padding: 0;
border-radius: 0;
}
.case-hero-visual img {
border-radius: 0;
filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .4));
}
.product-analysis-layout {
grid-template-columns: 1fr;
margin-top: 42px;
padding: 22px;
}
.product-analysis-layout .media-product {
max-width: 460px;
}
.result-panel .result-before,
.result-panel .result-after {
transform: none;
}
.motion-ready .result-panel .result-before,
.motion-ready .result-panel .result-after {
transform: translateY(22px);
}
}
@media (prefers-reduced-motion: reduce) {
.motion-ready .case-impact-grid .impact-card,
.motion-ready .result-panel .result-before,
.motion-ready .result-panel .result-after,
.motion-ready .result-panel .result-arrow {
opacity: 1;
transform: none;
animation: none;
}
.case-impact-grid .impact-card i {
transform: scaleX(1);
animation: none;
}
}
.media-open.media-static{cursor:default}
.media-open.media-static:hover{border-color:var(--line);box-shadow:none}

/* ===== editorial.css ===== */

body.kfh-active {
--kfh-ink: #090909;
--kfh-muted: #5f5e66;
--kfh-paper: #ffffff;
--kfh-soft: #f7f7f6;
--kfh-line: #e5e5e3;
--kfh-accent: #cf3f30;
--kfh-accent-dark: #c33a2d;
--kfh-accent-soft: #fff1ee;
--ink: var(--kfh-ink);
--muted: var(--kfh-muted);
--paper: var(--kfh-paper);
--card: var(--kfh-paper);
--line: var(--kfh-line);
--coral: var(--kfh-accent);
background: var(--kfh-paper);
color: var(--kfh-ink);
}
.kfh-active .site-header a:focus-visible,
.kfh-active .menu-toggle:focus-visible,
.kfh-active .media-open:focus-visible,
.kfh-active .rail-controls button:focus-visible,
.kfh-active .study-deep-dive summary:focus-visible,
.kfh-active .document-link:focus-visible,
.kfh-active .gif-toggle:focus-visible,
.kfh-active .finding-replay:focus-visible,
.kfh-active .mobile-toc-trigger:focus-visible {
outline: 3px solid var(--kfh-accent);
outline-offset: 3px;
}
.kfh-active .case {
width: min(calc(100% - 48px), 1280px);
padding: 22px 0 128px;
}
.kfh-active .case .case-hero {
grid-template-columns: minmax(0, .84fr) minmax(460px, 1.16fr);
min-height: min(600px, calc(100vh - 260px));
gap: 18px clamp(32px, 5vw, 72px);
padding: clamp(20px, 3vw, 36px) 0 clamp(48px, 6vw, 80px);
border-bottom: 1px solid var(--kfh-line);
border-radius: 0;
background: var(--kfh-paper);
color: var(--kfh-ink);
overflow: hidden;
}
.kfh-active .case .case-hero::after {
display: none;
}
.kfh-active .case .case-hero > .eyebrow {
color: var(--kfh-accent);
}
.kfh-active .case .case-hero > h1 {
max-width: 680px;
color: var(--kfh-ink);
font-size: clamp(48px, 5.5vw, 76px);
line-height: .96;
letter-spacing: -.065em;
}
.kfh-active .case .case-hero > p {
max-width: 570px;
color: var(--kfh-muted);
font-size: clamp(18px, 1.55vw, 21px);
line-height: 1.55;
}
.kfh-active .case-hero-visual img {
filter: none;
}
.kfh-active .case-hero-visual .media-open:hover img {
filter: none;
}
.kfh-active .case-impact-summary {
display: block;
padding: clamp(80px, 10vw, 138px) 0 clamp(72px, 9vw, 116px);
border-bottom: 1px solid var(--kfh-line);
}
.kfh-active .impact-summary-copy {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr);
column-gap: clamp(40px, 7vw, 100px);
align-items: end;
}
.kfh-active .impact-summary-copy .eyebrow {
grid-column: 1 / -1;
color: var(--kfh-accent);
}
.kfh-active .impact-summary-copy h2 {
max-width: 800px;
margin: 16px 0 0;
color: var(--kfh-ink);
font-size: clamp(46px, 5.8vw, 78px);
line-height: .98;
letter-spacing: -.065em;
}
.kfh-active .impact-summary-copy p {
margin: 0;
color: var(--kfh-muted);
font-size: 17px;
line-height: 1.65;
}
.kfh-active .case-jump {
grid-column: 2;
justify-self: start;
margin-top: 20px;
color: var(--kfh-accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 6px;
}
.kfh-active .case-impact-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(24px, 3vw, 44px);
margin-top: clamp(58px, 7vw, 88px);
}
.kfh-active .case-impact-grid > .impact-card,
.kfh-active .case-impact-grid > div.impact-onboarding,
.kfh-active .case-impact-grid > div.impact-adoption,
.kfh-active .case-impact-grid > div.impact-delivery,
.kfh-active .case-impact-grid > div.impact-deadlines {
position: relative;
display: grid;
min-height: 0;
align-content: start;
padding: 22px 0 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--kfh-ink);
}
.kfh-active .case-impact-grid .impact-card::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--kfh-ink);
content: '';
transform: scaleX(0);
transform-origin: left center;
transition: transform .78s cubic-bezier(.22, .68, 0, 1);
transition-delay: calc(var(--impact-order) * 90ms);
}
.kfh-active .case-impact-grid.is-visible .impact-card::before,
.kfh-active .case-impact-grid:not(.editorial-reveal) .impact-card::before {
transform: scaleX(1);
}
.kfh-active .case-impact-grid .impact-index {
margin: 0;
color: var(--kfh-accent);
font-size: 11px;
font-weight: 700;
letter-spacing: .16em;
opacity: 1;
text-transform: uppercase;
}
.kfh-active .case-impact-grid .impact-card strong {
display: flex;
margin: clamp(28px, 3.4vw, 52px) 0 0;
align-items: baseline;
color: var(--kfh-ink);
font-size: clamp(52px, 5.6vw, 86px);
font-weight: 600;
line-height: .9;
letter-spacing: -.055em;
font-variant-numeric: tabular-nums;
}
.kfh-active .case-impact-grid .impact-card strong span {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
}
.kfh-active .case-impact-grid .impact-unit {
font-size: .46em;
letter-spacing: -.02em;
}
.kfh-active .case-impact-grid .impact-caption {
margin-top: 14px;
color: var(--kfh-ink);
font-size: 15px;
font-weight: 500;
line-height: 1.35;
text-wrap: pretty;
}
.kfh-active .impact-track {
position: relative;
height: 4px;
margin-top: clamp(22px, 2.6vw, 34px);
background: rgba(20, 20, 18, .09);
}
.kfh-active .impact-track i,
.kfh-active .impact-track b {
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: scaleX(0);
transform-origin: left center;
transition: transform 1.05s cubic-bezier(.22, .68, 0, 1);
transition-delay: calc(var(--impact-order) * 90ms + 180ms);
}
.kfh-active .impact-track i {
width: var(--impact-from, 0%);
background: rgba(20, 20, 18, .22);
}
.kfh-active .impact-track b {
width: var(--impact-to, 0%);
background: var(--kfh-accent);
transition-delay: calc(var(--impact-order) * 90ms + 340ms);
}
.kfh-active .impact-track-solo b {
transition-delay: calc(var(--impact-order) * 90ms + 200ms);
}
.kfh-active .case-impact-grid.is-visible .impact-track i,
.kfh-active .case-impact-grid.is-visible .impact-track b,
.kfh-active .case-impact-grid:not(.editorial-reveal) .impact-track i,
.kfh-active .case-impact-grid:not(.editorial-reveal) .impact-track b {
transform: scaleX(1);
}
.kfh-active .impact-foot {
display: flex;
margin-top: 14px;
align-items: center;
gap: 10px;
color: var(--kfh-muted);
font-size: 12px;
letter-spacing: .01em;
}
.kfh-active .impact-was {
font-variant-numeric: tabular-nums;
}
.kfh-active .impact-delta {
padding: 3px 8px;
border: 1px solid var(--kfh-accent);
border-radius: 999px;
color: var(--kfh-accent);
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
}
.kfh-active .metric-arrow {
padding-inline: .07em;
color: var(--kfh-accent);
}
.kfh-active .case-facts {
gap: 36px;
margin: 0 0 clamp(92px, 11vw, 150px);
}
.kfh-active .fact {
padding: 26px 0 0;
border-top: 1px solid var(--kfh-line);
color: var(--kfh-muted);
}
.kfh-active .fact b {
color: var(--kfh-ink);
font-size: 17px;
}
.kfh-active .long-study {
grid-template-columns: 218px minmax(0, 900px);
gap: clamp(52px, 7vw, 96px);
justify-content: space-between;
padding: 0;
}
.kfh-active .study-toc {
top: 108px;
padding-top: 20px;
border-top: 1px solid var(--kfh-line);
}
.kfh-active .study-toc > .eyebrow {
margin-bottom: 14px;
}
.kfh-active .toc-links {
display: grid;
gap: 0;
}
.kfh-active .study-toc a {
min-height: 44px;
padding: 9px 0 9px 14px !important;
border: 0;
border-left: 2px solid transparent;
border-radius: 0;
background: transparent;
color: var(--kfh-muted);
line-height: 1.25;
}
.kfh-active .study-toc a:hover {
color: var(--kfh-ink);
}
.kfh-active .study-toc a.active {
border-left-color: var(--kfh-accent);
background: transparent;
color: var(--kfh-ink) !important;
font-weight: 750;
}
.kfh-active .mobile-toc-trigger {
display: none;
}
.kfh-active .chapter,
.kfh-active .chapter.dark,
.kfh-active .chapter.accent {
margin: 0;
padding: 24px 0 clamp(100px, 11vw, 148px);
border-top: 1px solid var(--kfh-line);
border-radius: 0;
background: transparent;
color: var(--kfh-ink);
scroll-margin-top: 104px;
}
.kfh-active .chapter-num,
.kfh-active .chapter.accent .chapter-num {
color: var(--kfh-accent);
}
.kfh-active .long-study .chapter .chapter-title {
max-width: 800px;
margin: 14px 0 28px;
color: var(--kfh-ink);
font-size: clamp(48px, 5.8vw, 76px);
line-height: .98;
letter-spacing: -.065em;
}
.kfh-active .long-study .chapter .section-title {
max-width: 760px;
margin: clamp(72px, 9vw, 108px) 0 22px;
padding-top: 24px;
border-top: 1px solid var(--kfh-line);
color: var(--kfh-ink);
font-size: clamp(32px, 3.7vw, 48px);
line-height: 1.04;
letter-spacing: -.045em;
}
.kfh-active .long-study .chapter h3 {
max-width: 740px;
margin: 50px 0 14px;
color: var(--kfh-ink);
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.18;
letter-spacing: -.025em;
}
.kfh-active .chapter p,
.kfh-active .chapter li,
.kfh-active .chapter.dark p,
.kfh-active .chapter.dark li,
.kfh-active .chapter.accent p,
.kfh-active .chapter.accent li {
max-width: 68ch;
color: var(--kfh-muted);
font-size: 17px;
line-height: 1.75;
}
.kfh-active .chapter .chapter-lede {
max-width: 62ch;
margin-bottom: 44px;
color: var(--kfh-muted);
font-size: clamp(19px, 2vw, 23px);
line-height: 1.58;
}
.kfh-active .content-columns {
gap: 28px;
margin-block: 32px;
}
.kfh-active .content-card {
padding: 22px 0 0;
border: 0;
border-top: 1px solid var(--kfh-line);
border-radius: 0;
background: transparent;
}
.kfh-active .content-card h3 {
margin-top: 0;
}
.kfh-active .research-overview {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
margin: 36px 0 72px;
}
.kfh-active .research-overview > div {
min-height: 0;
padding: 20px 0 0;
border: 0;
border-top: 1px solid var(--kfh-ink);
border-radius: 0;
background: transparent;
}
.kfh-active .research-overview span {
margin-bottom: 34px;
color: var(--kfh-accent);
}
.kfh-active .research-overview strong {
font-size: 19px;
}
.kfh-active .research-overview p,
.kfh-active .decision-track p {
color: var(--kfh-muted) !important;
}
.kfh-active .priority-decision {
margin: 38px 0 66px;
}
.kfh-active .priority-decision > .eyebrow {
color: var(--kfh-accent);
}
.kfh-active .decision-track {
gap: 18px;
margin-top: 28px;
}
.kfh-active .decision-track > div,
.kfh-active .chapter.accent .decision-track > div,
.kfh-active .chapter.accent .decision-track > div:last-child {
min-height: 225px;
padding: 20px 0 0;
border: 0;
border-top: 1px solid var(--kfh-line);
border-radius: 0;
background: transparent;
color: var(--kfh-ink);
}
.kfh-active .decision-track > div:last-child {
border-top-color: var(--kfh-accent);
}
.kfh-active .decision-track b,
.kfh-active .decision-track > div:last-child b,
.kfh-active .decision-track > div:last-child p {
color: var(--kfh-muted) !important;
}
.kfh-active .decision-track > div:last-child b,
.kfh-active .decision-track > div:last-child strong {
color: var(--kfh-accent) !important;
}
.kfh-active .decision-track strong {
margin: 42px 0 14px;
font-size: 21px;
}
.kfh-active .finding-grid,
.kfh-active .chapter.dark .verified-findings {
gap: 18px;
margin-top: 36px;
}
.kfh-active .finding,
.kfh-active .chapter.dark .verified-findings .finding {
min-height: 196px;
padding: 28px;
border: 1px solid var(--kfh-line);
border-radius: 14px;
background: var(--kfh-soft);
color: var(--kfh-ink);
}
.kfh-active .finding strong,
.kfh-active .chapter.dark .verified-findings .finding strong {
display: flex;
align-items: baseline;
margin: 0 0 26px;
color: var(--kfh-accent);
font-size: clamp(54px, 5.4vw, 72px);
line-height: .9;
letter-spacing: -.055em;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.kfh-active .finding strong > span,
.kfh-active .chapter.dark .verified-findings .finding strong > span {
display: inline;
color: inherit;
font-size: inherit;
line-height: inherit;
}
.kfh-active .finding strong > span:last-child,
.kfh-active .chapter.dark .verified-findings .finding strong > span:last-child {
margin-left: .08em;
font-size: .52em;
line-height: 1;
letter-spacing: -.02em;
}
.kfh-active .finding > span,
.kfh-active .chapter.dark .verified-findings .finding > span {
color: var(--kfh-muted);
font-size: 17px;
line-height: 1.45;
}
.kfh-active .feature-adoption-story {
margin-top: 34px;
padding: clamp(28px, 4vw, 48px);
border: 1px solid var(--kfh-line);
border-radius: 18px;
background: var(--kfh-paper);
}
.kfh-active .adoption-story-heading {
display: flex;
justify-content: space-between;
gap: 24px;
align-items: baseline;
padding-bottom: 24px;
border-bottom: 1px solid var(--kfh-line);
}
.kfh-active .adoption-story-heading .eyebrow {
color: var(--kfh-accent);
}
.kfh-active .adoption-story-heading p {
margin: 0;
color: var(--kfh-muted);
font-size: 15px;
}
.kfh-active .adoption-comparison {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: clamp(18px, 3vw, 36px);
align-items: center;
padding-top: 34px;
}
.kfh-active .adoption-state {
min-width: 0;
padding: clamp(24px, 3vw, 34px);
border: 1px solid var(--kfh-line);
border-radius: 14px;
background: var(--kfh-soft);
}
.kfh-active .adoption-after {
border-color: rgba(207, 63, 48, .26);
background: var(--kfh-accent-soft);
}
.kfh-active .adoption-state > span {
color: var(--kfh-muted);
font-size: 12px;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
.kfh-active .adoption-state strong {
display: flex;
align-items: baseline;
margin: 24px 0 6px;
color: var(--kfh-ink);
font-size: clamp(58px, 7vw, 92px);
line-height: .86;
letter-spacing: -.07em;
white-space: nowrap;
}
.kfh-active .adoption-state strong span {
margin-left: .07em;
font-size: .48em;
letter-spacing: -.02em;
}
.kfh-active .adoption-state p {
margin: 0;
color: var(--kfh-muted);
font-size: 16px;
}
.kfh-active .adoption-track {
height: 7px;
margin-top: 32px;
overflow: hidden;
border-radius: 999px;
background: rgba(9, 9, 9, .09);
}
.kfh-active .adoption-track i {
display: block;
width: calc(var(--adoption-progress) * 100%);
height: 100%;
border-radius: inherit;
background: var(--kfh-muted);
transform: scaleX(0);
transform-origin: left;
transition: transform 1.1s cubic-bezier(.2, .72, .2, 1) .25s;
}
.kfh-active .adoption-after .adoption-track i {
background: var(--kfh-accent);
}
.kfh-active .feature-adoption-story.is-visible .adoption-track i {
transform: scaleX(1);
}
.kfh-active .adoption-direction {
display: grid;
justify-items: center;
gap: 8px;
color: var(--kfh-accent);
}
.kfh-active .adoption-direction span {
font-size: 36px;
line-height: 1;
}
.kfh-active .adoption-direction small {
max-width: 88px;
color: var(--kfh-muted);
font-size: 10px;
font-weight: 800;
line-height: 1.25;
letter-spacing: .1em;
text-align: center;
text-transform: uppercase;
}
.kfh-active .adoption-scale {
display: flex;
justify-content: space-between;
margin-top: 14px;
color: var(--kfh-muted);
font-size: 11px;
}
.kfh-active .adoption-chart {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
grid-template-rows: minmax(330px, 34vw) auto;
column-gap: 14px;
row-gap: 20px;
padding-top: 38px;
}
.kfh-active .adoption-y-axis {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
padding-bottom: 1px;
color: var(--kfh-muted);
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.kfh-active .adoption-plot {
position: relative;
min-width: 0;
border-bottom: 1px solid var(--kfh-ink);
border-left: 1px solid var(--kfh-line);
background: repeating-linear-gradient(
to top,
transparent 0,
transparent calc(25% - 1px),
var(--kfh-line) calc(25% - 1px),
var(--kfh-line) 25%
);
}
.kfh-active .adoption-bars {
position: absolute;
inset: 0 clamp(26px, 7vw, 92px);
display: grid;
grid-template-columns: repeat(2, minmax(70px, 1fr));
gap: clamp(42px, 10vw, 150px);
align-items: end;
}
.kfh-active .adoption-bar {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.kfh-active .adoption-bar strong {
margin-bottom: 12px;
color: var(--kfh-ink);
font-size: clamp(34px, 5vw, 58px);
line-height: .9;
letter-spacing: -.06em;
white-space: nowrap;
}
.kfh-active .adoption-bar strong span {
margin-left: .06em;
font-size: .52em;
letter-spacing: -.02em;
}
.kfh-active .adoption-bar-fill {
display: block;
width: min(100%, 150px);
height: var(--bar-height);
min-height: 10px;
border-radius: 8px 8px 0 0;
background: var(--kfh-muted);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 1.05s cubic-bezier(.2, .72, .2, 1) .2s;
}
.kfh-active .adoption-bar-after .adoption-bar-fill {
background: var(--kfh-accent);
}
.kfh-active .feature-adoption-story.is-visible .adoption-bar-fill {
transform: scaleY(1);
}
.kfh-active .adoption-chart-labels {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(42px, 10vw, 150px);
padding: 0 clamp(26px, 7vw, 92px);
text-align: center;
}
.kfh-active .adoption-chart-labels div {
display: grid;
gap: 4px;
}
.kfh-active .adoption-chart-labels strong {
color: var(--kfh-ink);
font-size: 12px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.kfh-active .adoption-chart-labels span {
color: var(--kfh-muted);
font-size: 13px;
}
.kfh-active .research-finding-story {
position: relative;
isolation: isolate;
margin-top: 34px;
overflow: hidden;
padding: clamp(28px, 4vw, 48px);
border: 1px solid rgba(255, 255, 255, .11);
border-radius: 18px;
background: var(--kfh-ink);
color: var(--kfh-paper);
}
.kfh-active .research-finding-story::before {
position: absolute;
z-index: -1;
top: -34%;
right: -15%;
width: 56%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(207, 63, 48, .28), transparent 68%);
content: "";
}
.kfh-active .research-finding-story::after {
position: absolute;
z-index: 4;
inset: -20% auto -20% -30%;
width: 18%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
content: "";
opacity: 0;
pointer-events: none;
transform: skewX(-18deg);
}
.kfh-active .finding-story-meta {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: center;
padding-bottom: 24px;
border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.kfh-active .finding-story-meta .eyebrow {
color: #ff9a8e;
}
.kfh-active .finding-replay {
min-height: 44px;
padding: 0 17px;
border: 1px solid rgba(255, 255, 255, .26);
border-radius: 999px;
background: transparent;
color: var(--kfh-paper);
cursor: pointer;
font-size: 12px;
font-weight: 750;
transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.kfh-active .finding-replay:hover {
border-color: rgba(255, 255, 255, .7);
background: rgba(255, 255, 255, .08);
transform: translateY(-2px);
}
.kfh-active .finding-story-stage {
display: grid;
grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr);
gap: clamp(28px, 5vw, 70px);
align-items: center;
padding: clamp(34px, 5vw, 64px) 0;
}
.kfh-active .finding-gauge {
position: relative;
width: min(100%, 310px);
aspect-ratio: 1;
justify-self: center;
}
.kfh-active .finding-gauge::after {
position: absolute;
inset: 18%;
border: 1px solid rgba(255, 154, 142, .34);
border-radius: 50%;
content: "";
opacity: 0;
}
.kfh-active .finding-gauge svg {
width: 100%;
height: 100%;
overflow: visible;
transform: rotate(-90deg);
}
.kfh-active .finding-gauge circle {
fill: none;
stroke-width: 16;
}
.kfh-active .finding-gauge-track {
stroke: rgba(255, 255, 255, .12);
}
.kfh-active .finding-gauge-progress {
stroke: #ff796b;
stroke-dasharray: 66 100;
stroke-dashoffset: 66;
stroke-linecap: round;
transition: stroke-dashoffset 1.15s cubic-bezier(.2, .72, .2, 1) .12s;
}
.kfh-active .finding-gauge .finding-gauge-marker {
fill: var(--kfh-paper);
stroke: var(--kfh-ink);
stroke-width: 3;
opacity: 0;
transform: rotate(0deg);
transform-origin: 110px 110px;
transition: opacity .3s ease .9s, transform 1.15s cubic-bezier(.2, .72, .2, 1) .12s;
}
.kfh-active .finding-score {
position: absolute;
inset: 0;
display: grid;
place-content: center;
text-align: center;
}
.kfh-active .finding-score strong {
color: var(--kfh-paper);
font-size: clamp(68px, 8vw, 100px);
line-height: .82;
letter-spacing: -.07em;
font-variant-numeric: tabular-nums;
}
.kfh-active .finding-score span {
margin-top: 14px;
color: rgba(255, 255, 255, .58);
font-size: 11px;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
.kfh-active .finding-story-copy {
padding-left: clamp(24px, 4vw, 54px);
border-left: 1px solid rgba(255, 255, 255, .14);
}
.kfh-active .finding-story-copy > * {
opacity: 0;
transform: translateY(14px);
transition: opacity .55s ease, transform .55s cubic-bezier(.2, .72, .2, 1);
}
.kfh-active .finding-status {
display: inline-flex;
min-height: 34px;
align-items: center;
padding: 0 13px;
border: 1px solid rgba(255, 154, 142, .4);
border-radius: 999px;
background: rgba(207, 63, 48, .16);
color: #ffb0a7;
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.kfh-active .finding-story-copy h4 {
margin: 28px 0 12px;
color: var(--kfh-paper);
font-size: clamp(36px, 5vw, 62px);
line-height: .96;
letter-spacing: -.055em;
}
.kfh-active .finding-story-copy p {
max-width: 510px;
margin: 0;
color: rgba(255, 255, 255, .69);
font-size: clamp(16px, 1.6vw, 19px);
line-height: 1.55;
}
.kfh-active .finding-story-copy .finding-range {
margin-bottom: 22px;
color: #ff9a8e;
font-size: 13px;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
.kfh-active .finding-benchmark {
padding: 24px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 14px;
background: rgba(255, 255, 255, .05);
}
.kfh-active .finding-benchmark > div:first-child {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 20px;
}
.kfh-active .finding-benchmark > div:first-child span {
color: rgba(255, 255, 255, .58);
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.kfh-active .finding-benchmark > div:first-child strong {
color: var(--kfh-paper);
font-size: 25px;
}
.kfh-active .finding-benchmark-track {
height: 8px;
margin: 16px 0 18px;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, .11);
}
.kfh-active .finding-benchmark-track i {
display: block;
width: 86%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #ff9a8e, #cf3f30);
transform: scaleX(0);
transform-origin: left;
transition: transform .9s cubic-bezier(.2, .72, .2, 1) .72s;
}
.kfh-active .finding-benchmark p {
margin: 0;
color: rgba(255, 255, 255, .78);
font-size: 15px;
}
.kfh-active .chapter .research-finding-story .finding-story-copy p {
color: rgba(255, 255, 255, .72);
}
.kfh-active .chapter .research-finding-story .finding-story-copy .finding-range {
color: #ff9a8e;
}
.kfh-active .chapter .research-finding-story .finding-benchmark p {
color: rgba(255, 255, 255, .78);
}
.kfh-active .research-finding-story.finding-animate::after {
animation: finding-sweep .85s cubic-bezier(.2, .72, .2, 1) .08s both;
}
.kfh-active .research-finding-story.finding-animate .finding-gauge-progress {
stroke-dashoffset: 0;
}
.kfh-active .research-finding-story.finding-animate .finding-gauge-marker {
opacity: 1;
transform: rotate(237.6deg);
}
.kfh-active .research-finding-story.finding-animate .finding-gauge::after {
animation: finding-pulse 1s ease .72s both;
}
.kfh-active .research-finding-story.finding-animate .finding-story-copy > * {
opacity: 1;
transform: none;
}
.kfh-active .research-finding-story.finding-animate .finding-story-copy > :nth-child(1) {
transition-delay: .3s;
}
.kfh-active .research-finding-story.finding-animate .finding-story-copy > :nth-child(2) {
transition-delay: .4s;
}
.kfh-active .research-finding-story.finding-animate .finding-story-copy > :nth-child(3) {
transition-delay: .5s;
}
.kfh-active .research-finding-story.finding-animate .finding-story-copy > :nth-child(4) {
transition-delay: .6s;
}
.kfh-active .research-finding-story.finding-animate .finding-benchmark-track i {
transform: scaleX(1);
}
.kfh-active .research-finding-story.finding-reset::after {
animation: none;
opacity: 0;
}
.kfh-active .research-finding-story.finding-reset .finding-gauge-progress {
stroke-dashoffset: 66;
transition: none;
}
.kfh-active .research-finding-story.finding-reset .finding-gauge-marker {
opacity: 0;
transform: rotate(0deg);
transition: none;
}
.kfh-active .research-finding-story.finding-reset .finding-gauge::after {
animation: none;
opacity: 0;
}
.kfh-active .research-finding-story.finding-reset .finding-story-copy > * {
opacity: 0;
transform: translateY(14px);
transition: none;
}
.kfh-active .research-finding-story.finding-reset .finding-benchmark-track i {
transform: scaleX(0);
transition: none;
}
@keyframes finding-sweep {
0% { left: -30%; opacity: 0; }
20% { opacity: 1; }
100% { left: 118%; opacity: 0; }
}
@keyframes finding-pulse {
0% { opacity: 0; transform: scale(.72); }
45% { opacity: .85; }
100% { opacity: 0; transform: scale(1.45); }
}
.kfh-active .research-synthesis {
margin: 74px 0 0;
padding: clamp(30px, 5vw, 54px);
border: 1px solid var(--kfh-line);
border-radius: 16px;
background: var(--kfh-soft);
color: var(--kfh-ink);
}
.kfh-active .research-synthesis .eyebrow {
color: var(--kfh-accent);
}
.kfh-active .research-synthesis h3 {
color: var(--kfh-ink);
}
.kfh-active .research-synthesis p {
border-color: var(--kfh-line);
border-radius: 10px;
color: var(--kfh-muted) !important;
}
.kfh-active .research-synthesis .synthesis-decision {
border: 0;
border-left: 3px solid var(--kfh-accent);
border-radius: 0;
background: var(--kfh-accent-soft);
color: var(--kfh-ink) !important;
}
.kfh-active .result-panel {
gap: 0;
margin: 30px 0 52px;
padding: 0;
border: 0;
border-block: 1px solid var(--kfh-line);
border-radius: 0;
background: transparent;
box-shadow: none;
}
.kfh-active .result-panel > div {
min-height: 240px;
padding: 30px;
border-radius: 0;
background: var(--kfh-soft);
}
.kfh-active .result-panel .result-after,
.kfh-active .result-onboarding .result-after,
.kfh-active .result-adoption .result-after {
background: var(--kfh-accent-soft);
color: var(--kfh-ink);
}
.kfh-active .result-panel .result-after p,
.kfh-active .result-panel .result-after .eyebrow {
color: var(--kfh-ink) !important;
}
.kfh-active .result-panel .result-after .eyebrow {
color: var(--kfh-accent-dark) !important;
opacity: 1;
}
.kfh-active .result-panel strong {
color: var(--kfh-ink);
font-variant-numeric: tabular-nums;
}
.kfh-active .result-arrow {
display: grid;
place-items: center;
align-self: stretch;
width: 74px;
background: var(--kfh-paper);
color: var(--kfh-accent);
}
.kfh-active .media-block {
margin: 42px 0 72px;
}
.kfh-active .media-heading {
margin-bottom: 16px;
padding-top: 18px;
border-top: 1px solid var(--kfh-line);
}
.kfh-active .media-heading figcaption {
color: var(--kfh-ink);
}
.kfh-active .media-heading p {
color: var(--kfh-muted);
}
.kfh-active .media-open {
border-color: var(--kfh-line);
border-radius: 14px;
background: var(--kfh-paper);
box-shadow: none;
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.kfh-active .media-open:hover {
border-color: #c9c9c5;
box-shadow: 0 16px 40px rgba(9, 9, 9, .08);
transform: translateY(-2px);
}
.kfh-active .media-open img {
border-radius: 9px;
}
.kfh-active .logo-grid {
gap: 10px;
}
.kfh-active .logo-grid .media-static {
border-color: var(--kfh-line);
background: var(--kfh-soft);
cursor: default;
}
.kfh-active .logo-grid .media-static:hover {
border-color: var(--kfh-line);
box-shadow: none;
transform: none;
}
.kfh-active .rail-controls button {
border-color: var(--kfh-line);
background: var(--kfh-paper);
}
.kfh-active .rail-controls button:hover {
border-color: var(--kfh-ink);
background: var(--kfh-ink);
}
.kfh-active .gif-stage {
position: relative;
}
.kfh-active .gif-block .media-open {
padding: 10px;
background: var(--kfh-soft);
}
.kfh-active .gif-toggle {
position: absolute;
left: 22px;
bottom: 22px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 16px;
border: 1px solid rgba(255, 255, 255, .35);
border-radius: 999px;
background: rgba(9, 9, 9, .86);
color: #fff;
font-size: 12px;
font-weight: 750;
cursor: pointer;
backdrop-filter: blur(10px);
}
.kfh-active .gif-block.is-paused .gif-toggle {
background: var(--kfh-accent);
}
.kfh-active .motion-note {
color: var(--kfh-muted) !important;
}
.kfh-active .product-analysis-layout {
margin: 58px 0 38px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.kfh-active .product-analysis-layout .media-product {
margin: 0;
}
.kfh-active .diagram-motion-stage {
position: relative;
grid-column: 1 / -1;
overflow: hidden;
border-radius: 14px;
isolation: isolate;
}
.kfh-active .diagram-motion-stage .media-open {
position: relative;
z-index: 0;
}
.kfh-active .diagram-motion-stage.diagram-motion-ready .media-open img {
opacity: 0;
clip-path: inset(0 100% 0 0);
transform: scale(.985);
}
.kfh-active .diagram-motion-stage.diagram-motion-ready.is-diagram-animated .media-open img {
animation: kfh-diagram-reveal 1.7s cubic-bezier(.16, 1, .3, 1) forwards;
}
.kfh-active .diagram-motion-stage .media-open::after {
position: absolute;
z-index: 2;
top: 10px;
bottom: 10px;
left: -12%;
width: 12%;
background: linear-gradient(90deg, transparent, rgba(207, 63, 48, .2), rgba(255, 255, 255, .82), transparent);
content: "";
opacity: 0;
pointer-events: none;
transform: skewX(-12deg);
}
.kfh-active .diagram-motion-stage.is-diagram-animated .media-open::after {
animation: kfh-diagram-scan 1.8s .12s cubic-bezier(.22, .72, .2, 1) both;
}
.kfh-active .diagram-pulse {
position: absolute;
z-index: 3;
width: 18px;
height: 18px;
border: 2px solid var(--kfh-accent);
border-radius: 50%;
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) scale(.45);
}
.kfh-active .diagram-motion-stage.is-diagram-animated .diagram-pulse {
animation: kfh-diagram-pulse .72s cubic-bezier(.16, 1, .3, 1) both;
}
.kfh-active .diagram-motion-stage.is-diagram-animated .pulse-one { animation-delay: .28s; }
.kfh-active .diagram-motion-stage.is-diagram-animated .pulse-two { animation-delay: .58s; }
.kfh-active .diagram-motion-stage.is-diagram-animated .pulse-three { animation-delay: .88s; }
.kfh-active .diagram-motion-stage.is-diagram-animated .pulse-four { animation-delay: 1.18s; }
.kfh-active .diagram-motion-stage.is-diagram-animated .pulse-five { animation-delay: 1.48s; }
.kfh-active .diagram-process .pulse-one { top: 17%; left: 19%; }
.kfh-active .diagram-process .pulse-two { top: 18%; left: 50%; }
.kfh-active .diagram-process .pulse-three { top: 47%; left: 50%; }
.kfh-active .diagram-process .pulse-four { top: 58%; left: 78%; }
.kfh-active .diagram-process .pulse-five { top: 79%; left: 72%; }
.kfh-active .diagram-workflow .pulse-one { top: 50%; left: 11%; }
.kfh-active .diagram-workflow .pulse-two { top: 50%; left: 31%; }
.kfh-active .diagram-workflow .pulse-three { top: 50%; left: 50%; }
.kfh-active .diagram-workflow .pulse-four { top: 50%; left: 69%; }
.kfh-active .diagram-workflow .pulse-five { top: 50%; left: 87%; }
.kfh-active .diagram-replay {
position: absolute;
z-index: 4;
right: 24px;
bottom: 24px;
display: inline-flex;
min-height: 42px;
align-items: center;
gap: 8px;
padding: 0 15px;
border: 1px solid rgba(255, 255, 255, .42);
border-radius: 999px;
background: rgba(9, 9, 9, .82);
color: #fff;
font-size: 12px;
font-weight: 750;
cursor: pointer;
backdrop-filter: blur(10px);
}
.kfh-active .diagram-replay:hover {
background: var(--kfh-accent);
}
.kfh-active .diagram-replay:focus-visible {
outline: 3px solid var(--kfh-accent);
outline-offset: 3px;
}
@keyframes kfh-diagram-reveal {
0% { opacity: .16; clip-path: inset(0 100% 0 0); transform: scale(.985); }
35% { opacity: .72; }
100% { opacity: 1; clip-path: inset(0); transform: scale(1); }
}
@keyframes kfh-diagram-scan {
0% { left: -12%; opacity: 0; }
15% { opacity: 1; }
84% { opacity: .9; }
100% { left: 106%; opacity: 0; }
}
@keyframes kfh-diagram-pulse {
0% { opacity: 0; box-shadow: 0 0 0 0 rgba(207, 63, 48, .34); transform: translate(-50%, -50%) scale(.45); }
35% { opacity: 1; }
100% { opacity: 0; box-shadow: 0 0 0 18px rgba(207, 63, 48, 0); transform: translate(-50%, -50%) scale(1); }
}
.kfh-active .review-card {
border-radius: 14px;
background: var(--kfh-ink);
}
.kfh-active .document-link {
border-color: var(--kfh-ink);
background: var(--kfh-ink);
color: #fff;
}
.kfh-active .document-link:hover {
border-color: var(--kfh-accent);
background: var(--kfh-accent);
}
.kfh-active .study-deep-dive,
.kfh-active .chapter.dark .study-deep-dive {
border-color: var(--kfh-line);
border-radius: 12px;
background: var(--kfh-paper);
}
.kfh-active .deep-dive-content,
.kfh-active .chapter.dark .deep-dive-content {
border-top-color: var(--kfh-line);
}
.kfh-active #kfh-3 > .study-deep-dive {
margin: 38px 0 72px;
border: 1px solid rgba(207, 63, 48, .24);
border-radius: 16px;
background: #f8ece9;
box-shadow: 0 18px 44px rgba(94, 38, 30, .06);
}
.kfh-active #kfh-3 > .study-deep-dive summary {
display: grid;
min-height: 82px;
grid-template-columns: minmax(0, 1fr) auto;
gap: 20px;
align-items: center;
padding: 16px 22px 16px 26px;
color: var(--kfh-ink);
line-height: 1.3;
}
.kfh-active #kfh-3 > .study-deep-dive .deep-dive-label {
min-width: 0;
font-size: clamp(16px, 1.6vw, 19px);
font-weight: 760;
text-align: left;
}
.kfh-active #kfh-3 > .study-deep-dive .deep-dive-icon {
position: relative;
display: block;
width: 38px;
height: 38px;
flex: 0 0 38px;
border-radius: 50%;
background: var(--kfh-accent);
color: #fff;
font-size: 0;
line-height: 0;
}
.kfh-active #kfh-3 > .study-deep-dive .deep-dive-icon::before,
.kfh-active #kfh-3 > .study-deep-dive .deep-dive-icon::after {
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
border-radius: 999px;
background: currentColor;
content: "";
transform: translate(-50%, -50%);
}
.kfh-active #kfh-3 > .study-deep-dive .deep-dive-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
transition: transform .24s ease;
}
.kfh-active #kfh-3 > .study-deep-dive[open] .deep-dive-icon {
transform: none;
}
.kfh-active #kfh-3 > .study-deep-dive[open] .deep-dive-icon::after {
transform: translate(-50%, -50%) rotate(0deg);
}
.kfh-active #kfh-3 > .study-deep-dive .deep-dive-content {
padding: 4px 26px 28px;
border-top-color: rgba(207, 63, 48, .18);
background: rgba(255, 255, 255, .5);
}
.kfh-active #kfh-8 > .study-deep-dive {
margin: 42px 0 76px;
border: 1px solid var(--kfh-line);
border-radius: 18px;
background: rgba(248, 247, 244, .88);
box-shadow: 0 20px 54px rgba(38, 31, 28, .07);
}
.kfh-active #kfh-8 > .study-deep-dive summary {
display: grid;
min-height: 86px;
grid-template-columns: minmax(0, 1fr) 40px;
gap: 24px;
align-items: center;
padding: 18px 26px;
color: var(--kfh-ink);
line-height: 1.3;
}
.kfh-active #kfh-8 > .study-deep-dive .deep-dive-label {
min-width: 0;
font-size: clamp(16px, 1.6vw, 19px);
font-weight: 760;
text-align: left;
}
.kfh-active #kfh-8 > .study-deep-dive .deep-dive-icon {
position: relative;
display: grid;
width: 40px;
height: 40px;
place-items: center;
border: 1px solid rgba(207, 63, 48, .22);
border-radius: 50%;
background: var(--kfh-accent-soft);
color: var(--kfh-accent);
font-size: 0;
line-height: 0;
}
.kfh-active #kfh-8 > .study-deep-dive .deep-dive-icon::before,
.kfh-active #kfh-8 > .study-deep-dive .deep-dive-icon::after {
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
border-radius: 999px;
background: currentColor;
content: "";
transform: translate(-50%, -50%);
}
.kfh-active #kfh-8 > .study-deep-dive .deep-dive-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
transition: transform .24s ease;
}
.kfh-active #kfh-8 > .study-deep-dive[open] .deep-dive-icon {
transform: none;
}
.kfh-active #kfh-8 > .study-deep-dive[open] .deep-dive-icon::after {
transform: translate(-50%, -50%) rotate(0deg);
}
.kfh-active #kfh-8 > .study-deep-dive .deep-dive-content {
padding: 22px 26px 36px;
border-top-color: var(--kfh-line);
background: rgba(255, 255, 255, .62);
}
.kfh-active #kfh-8 > .study-deep-dive .deep-dive-content > h2 {
max-width: 720px;
margin: 52px 0 18px;
padding-top: 32px;
border-top: 1px solid var(--kfh-line);
font-size: clamp(30px, 4vw, 44px);
line-height: 1.05;
letter-spacing: -.045em;
}
.kfh-active #kfh-8 > .study-deep-dive .deep-dive-content > h2:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.kfh-active #kfh-8 > .study-deep-dive .deep-dive-content > h3 {
margin-top: 36px;
}
.kfh-active #kfh-8 > .study-deep-dive .deep-dive-content > p,
.kfh-active #kfh-8 > .study-deep-dive .deep-dive-content > ul {
margin-right: 0;
margin-left: 0;
}
.kfh-active .reading-progress span {
background: var(--kfh-accent);
}
.kfh-active .coming-soon-overlay {
background: rgba(9, 9, 9, .68);
}
.kfh-active .case-end {
padding: clamp(64px, 8vw, 100px) 30px;
border: 1px solid var(--kfh-line);
border-radius: 16px;
background: var(--kfh-soft);
}
.kfh-active .case-end h2 em {
color: var(--kfh-accent);
}
.kfh-active .editorial-motion-ready .editorial-reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity .7s cubic-bezier(.2, .72, .2, 1), transform .7s cubic-bezier(.2, .72, .2, 1);
}
.kfh-active .editorial-motion-ready .editorial-reveal.is-visible {
opacity: 1;
transform: none;
}
.kfh-active .counter {
font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
.kfh-active .adoption-track i,
.kfh-active .adoption-bar-fill {
transition: none;
}
}
.kfh-active .questionnaire-figure {
margin-top: 34px;
}
.kfh-active .questionnaire-scene {
position: relative;
overflow: hidden;
padding: clamp(22px, 5vw, 58px);
border: 1px solid #deddd9;
border-radius: 24px;
background: #f4f3f0;
}
.kfh-active .questionnaire-paper {
position: relative;
width: min(100%, 900px);
margin: 0 auto;
padding: clamp(30px, 5vw, 58px);
border: 1px solid #e1e0dc;
border-radius: 18px;
background: #fff;
box-shadow: 0 18px 50px rgba(29, 28, 25, .07);
color: #1d1d1b;
}
.kfh-active .questionnaire-paper header {
display: flex;
justify-content: space-between;
gap: 32px;
align-items: flex-start;
padding-bottom: 26px;
border-bottom: 1px solid #e7e6e2;
}
.kfh-active .questionnaire-paper header span {
color: var(--kfh-accent);
font-size: 10px;
font-weight: 800;
letter-spacing: .17em;
text-transform: uppercase;
}
.kfh-active .questionnaire-paper h4 {
margin: 7px 0 0;
color: #181816;
font-size: clamp(24px, 3vw, 36px);
line-height: 1.08;
letter-spacing: -.03em;
}
.kfh-active .questionnaire-paper header p {
margin: 0;
color: #85827c;
font-size: 10px;
line-height: 1.65;
text-align: right;
text-transform: uppercase;
letter-spacing: .1em;
}
.kfh-active .questionnaire-paper header p b {
color: #2c2b28;
font-weight: 800;
}
.kfh-active .questionnaire-intro {
max-width: 560px;
margin: 24px 0 26px;
color: #73716c;
font-size: 13px;
line-height: 1.6;
}
.kfh-active .questionnaire-intro b {
color: #2c2b28;
font-weight: 700;
}
.kfh-active .questionnaire-fields {
display: grid;
gap: 0;
}
.kfh-active .questionnaire-row {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 16px;
padding: 24px 0;
border-top: 1px solid #ecebe8;
}
.kfh-active .questionnaire-row > span {
padding-top: 3px;
color: #b4b1aa;
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: .08em;
}
.kfh-active .questionnaire-row strong {
display: block;
max-width: 680px;
color: #24231f;
font-size: clamp(16px, 1.7vw, 19px);
line-height: 1.35;
letter-spacing: -.01em;
}
.kfh-active .questionnaire-paper .questionnaire-answer {
max-width: 640px;
margin: 10px 0 0;
color: #4c4a45;
font-size: clamp(14px, 1.4vw, 16px);
line-height: 1.62;
text-wrap: pretty;
}
.kfh-active .questionnaire-paper .questionnaire-note {
max-width: 560px;
margin: 12px 0 0;
padding-left: 12px;
border-left: 2px solid #e0ded8;
color: #96938c;
font-size: 12px;
font-style: italic;
line-height: 1.5;
}
.kfh-active .questionnaire-paper footer {
display: grid;
grid-template-columns: auto auto 1fr;
gap: 14px;
align-items: center;
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid #e7e6e2;
color: #8c8983;
font-size: 9px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.kfh-active .questionnaire-paper footer i {
height: 1px;
background: #d7d5d0;
}
.kfh-active .verified-findings .finding {
position: relative;
overflow: hidden;
}
.kfh-active .verified-findings .finding::after {
position: absolute;
top: -54px;
right: -54px;
width: 150px;
height: 150px;
border-radius: 50%;
background: radial-gradient(circle, rgba(207, 63, 48, .11), transparent 70%);
content: "";
opacity: 0;
transform: scale(.65);
}
.kfh-active .finding-meter {
position: absolute;
right: 28px;
bottom: 20px;
left: 28px;
height: 5px;
overflow: hidden;
border-radius: 999px;
background: #dddcd9;
}
.kfh-active .finding-meter::after {
display: block;
width: var(--finding-value);
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #ff8f82, var(--kfh-accent));
box-shadow: 0 0 14px rgba(207, 63, 48, .22);
content: "";
transform: scaleX(0);
transform-origin: left;
will-change: transform;
}
.kfh-active .metrics-motion-ready .finding {
opacity: 0;
transform: translateY(28px) scale(.975);
}
.kfh-active .verified-findings.is-metric-animated .finding {
animation: metric-card-arrive .72s cubic-bezier(.16, 1, .3, 1) both;
animation-delay: calc(var(--finding-order) * 110ms);
}
.kfh-active .verified-findings.is-metric-animated .finding::after {
animation: metric-orbit .8s ease-out both;
animation-delay: calc(220ms + var(--finding-order) * 110ms);
}
.kfh-active .verified-findings.is-metric-animated .finding-meter::after {
animation: metric-fill 1s cubic-bezier(.16, 1, .3, 1) both;
animation-delay: calc(300ms + var(--finding-order) * 110ms);
}
@keyframes metric-card-arrive {
from { opacity: 0; transform: translateY(28px) scale(.975); }
to { opacity: 1; transform: none; }
}
@keyframes metric-fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes metric-orbit {
0% { opacity: 0; transform: scale(.65); }
55% { opacity: 1; }
100% { opacity: .48; transform: scale(1); }
}
.kfh-active .document-link {
position: relative;
overflow: hidden;
border-color: rgba(207, 63, 48, .28);
background: linear-gradient(135deg, rgba(207, 63, 48, .16), rgba(255, 255, 255, .74));
color: #9e2f25;
box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 12px 32px rgba(117, 39, 30, .1);
backdrop-filter: blur(18px) saturate(135%);
-webkit-backdrop-filter: blur(18px) saturate(135%);
}
.kfh-active .document-link::before {
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .72) 48%, transparent 72%);
content: "";
transform: translateX(-120%);
transition: transform .65s cubic-bezier(.16, 1, .3, 1);
}
.kfh-active .document-link > * {
position: relative;
}
.kfh-active .document-link:hover {
border-color: rgba(207, 63, 48, .52);
background: linear-gradient(135deg, rgba(207, 63, 48, .23), rgba(255, 255, 255, .8));
color: #85271f;
box-shadow: inset 0 1px rgba(255, 255, 255, .94), 0 18px 40px rgba(117, 39, 30, .15);
}
.kfh-active .document-link:hover::before {
transform: translateX(120%);
}
.kfh-active .quote-marquee-shell {
margin-block: 34px 72px;
}
.kfh-active .quote-marquee {
position: relative;
overflow: hidden;
padding: 18px 0;
border: 1px solid rgba(207, 63, 48, .11);
border-radius: 20px;
background:
radial-gradient(circle at 12% 0%, rgba(207, 63, 48, .07), transparent 36%),
linear-gradient(135deg, rgba(248, 245, 241, .66), rgba(255, 255, 255, .4));
box-shadow: inset 0 1px rgba(255, 255, 255, .82), 0 18px 46px rgba(49, 37, 29, .055);
backdrop-filter: blur(14px) saturate(118%);
-webkit-backdrop-filter: blur(14px) saturate(118%);
isolation: isolate;
}
.kfh-active .quote-marquee::before,
.kfh-active .quote-marquee::after {
position: absolute;
z-index: 3;
top: 0;
bottom: 0;
width: clamp(34px, 5vw, 62px);
border: 0;
background-color: rgba(255, 255, 255, .07);
backdrop-filter: blur(12px) saturate(112%);
-webkit-backdrop-filter: blur(12px) saturate(112%);
content: "";
pointer-events: none;
}
.kfh-active .quote-marquee::before {
left: 0;
border-radius: 19px 0 0 19px;
background:
linear-gradient(90deg,
rgba(255, 255, 255, .3) 0%,
rgba(255, 250, 248, .16) 44%,
rgba(255, 255, 255, 0) 100%);
border-left: 1px solid rgba(255, 255, 255, .62);
box-shadow: inset 10px 0 22px rgba(255, 255, 255, .08);
-webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .88) 58%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .88) 58%, transparent 100%);
}
.kfh-active .quote-marquee::after {
right: 0;
border-radius: 0 19px 19px 0;
background:
linear-gradient(270deg,
rgba(255, 255, 255, .3) 0%,
rgba(255, 250, 248, .16) 44%,
rgba(255, 255, 255, 0) 100%);
border-right: 1px solid rgba(255, 255, 255, .62);
box-shadow: inset -10px 0 22px rgba(255, 255, 255, .08);
-webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .88) 58%, transparent 100%);
mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .88) 58%, transparent 100%);
}
.kfh-active .quote-marquee-track {
display: flex;
width: max-content;
animation: quote-marquee var(--marquee-duration) linear infinite;
will-change: transform;
}
.kfh-active .quote-marquee-group {
display: flex;
gap: 18px;
padding-right: 18px;
}
.kfh-active .quote-marquee:hover .quote-marquee-track,
.kfh-active .quote-marquee:focus .quote-marquee-track,
.kfh-active .quote-marquee:focus-within .quote-marquee-track {
animation-play-state: paused;
}
.kfh-active .quote-marquee .review-card {
width: clamp(300px, 35vw, 430px);
min-height: 300px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 16px;
background:
radial-gradient(circle at 100% 0%, rgba(207, 63, 48, .28), transparent 42%),
linear-gradient(145deg, rgba(17, 17, 17, .95), rgba(38, 27, 25, .86));
box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 14px 35px rgba(31, 23, 20, .16);
backdrop-filter: blur(18px) saturate(130%);
-webkit-backdrop-filter: blur(18px) saturate(130%);
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.kfh-active .quote-marquee .review-card:hover {
border-color: rgba(255, 143, 130, .6);
box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 22px 44px rgba(83, 36, 30, .22);
transform: translateY(-6px);
}
.kfh-active .quote-marquee .review-card span {
border: 1px solid rgba(255, 255, 255, .13);
background: rgba(255, 255, 255, .09);
backdrop-filter: blur(12px);
}
.kfh-active .marquee-note {
margin: 10px 0 0;
color: var(--kfh-muted);
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
}
@keyframes quote-marquee {
to { transform: translateX(-50%); }
}
.kfh-active .finding-gauge-progress {
filter: drop-shadow(0 0 10px rgba(255, 121, 107, .34));
}
.kfh-active .finding-benchmark > div:first-child strong {
display: inline-flex;
align-items: baseline;
}
.kfh-active .finding-benchmark > div:first-child strong b {
font: inherit;
font-variant-numeric: tabular-nums;
}
.kfh-active .finding-benchmark > div:first-child strong small {
font-size: .72em;
}
.kfh-active .finding-benchmark-track i {
position: relative;
overflow: visible;
}
.kfh-active .finding-benchmark-track i::after {
position: absolute;
top: 50%;
right: -5px;
width: 10px;
height: 10px;
border: 2px solid #1b1716;
border-radius: 50%;
background: #ff9a8e;
box-shadow: 0 0 0 0 rgba(255, 154, 142, .5);
content: "";
transform: translateY(-50%);
}
.kfh-active .research-finding-story.finding-animate .finding-gauge {
animation: gauge-arrive 1.15s cubic-bezier(.16, 1, .3, 1) both;
}
.kfh-active .research-finding-story.finding-animate .finding-score strong {
animation: score-pop .72s cubic-bezier(.16, 1, .3, 1) .62s both;
}
.kfh-active .research-finding-story.finding-animate .finding-benchmark {
animation: benchmark-arrive .72s cubic-bezier(.16, 1, .3, 1) .62s both;
}
.kfh-active .research-finding-story.finding-animate .finding-benchmark-track i::after {
animation: benchmark-pulse 1.35s ease 1.45s 2;
}
.kfh-active .research-finding-story.finding-reset .finding-gauge,
.kfh-active .research-finding-story.finding-reset .finding-score strong,
.kfh-active .research-finding-story.finding-reset .finding-benchmark {
animation: none;
opacity: 0;
}
@keyframes gauge-arrive {
from { opacity: 0; transform: scale(.76) rotate(-8deg); }
to { opacity: 1; transform: none; }
}
@keyframes score-pop {
0% { opacity: .25; transform: scale(.65); }
70% { opacity: 1; transform: scale(1.08); }
100% { opacity: 1; transform: none; }
}
@keyframes benchmark-arrive {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: none; }
}
@keyframes benchmark-pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 154, 142, .5); }
100% { box-shadow: 0 0 0 14px rgba(255, 154, 142, 0); }
}
.kfh-active .business-impact-success {
position: relative;
margin: clamp(64px, 8vw, 104px) 0;
padding: clamp(30px, 5vw, 56px);
overflow: hidden;
border: 1px solid rgba(255, 143, 130, .28);
border-radius: 28px;
background:
radial-gradient(circle at 92% 4%, rgba(207, 63, 48, .32), transparent 34%),
radial-gradient(circle at 8% 100%, rgba(255, 143, 130, .13), transparent 34%),
linear-gradient(145deg, #0b0b0a, #171211 68%, #0c0b0a);
box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 28px 72px rgba(45, 24, 20, .16);
color: #fff;
}
.kfh-active .business-impact-success::before {
position: absolute;
top: -96px;
right: -72px;
width: 280px;
height: 280px;
border: 1px solid rgba(255, 154, 142, .18);
border-radius: 50%;
box-shadow: 0 0 0 34px rgba(255, 154, 142, .04), 0 0 0 68px rgba(255, 154, 142, .025);
content: "";
}
.kfh-active .business-impact-heading {
position: relative;
z-index: 1;
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
padding-bottom: 30px;
border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.kfh-active .business-impact-heading .eyebrow {
order: 2;
margin-bottom: 9px;
color: #ff9a8e;
}
.kfh-active .business-impact-heading h2 {
margin: 0;
color: #fff;
font-size: clamp(38px, 5.6vw, 68px);
letter-spacing: -.055em;
}
.kfh-active .business-impact-grid.content-columns {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin: 28px 0 0;
}
.kfh-active .business-impact-grid .impact-success-card.content-card {
min-height: 270px;
padding: 22px;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 18px;
background: linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .045));
box-shadow: inset 0 1px rgba(255, 255, 255, .09);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
transition: transform .28s ease, border-color .28s ease, background .28s ease;
}
.kfh-active .business-impact-grid .impact-success-card:hover {
border-color: rgba(255, 154, 142, .42);
background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 143, 130, .065));
transform: translateY(-5px);
}
.kfh-active .impact-success-mark {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: clamp(48px, 6vw, 76px);
color: rgba(255, 255, 255, .52);
}
.kfh-active .impact-success-mark b {
font-size: 11px;
letter-spacing: .14em;
}
.kfh-active .impact-success-mark i {
display: grid;
width: 30px;
height: 30px;
place-items: center;
border: 1px solid rgba(255, 154, 142, .42);
border-radius: 50%;
background: rgba(207, 63, 48, .17);
color: #ff9a8e;
font-size: 13px;
font-style: normal;
}
.kfh-active .business-impact-grid .impact-success-card h3 {
margin: 0 0 14px;
color: #fff;
font-size: clamp(22px, 2.4vw, 29px);
line-height: 1.08;
letter-spacing: -.035em;
}
.kfh-active .business-impact-grid .impact-success-card p {
margin: 0;
color: rgba(255, 255, 255, .68);
font-size: 15px;
line-height: 1.55;
}
.kfh-active .business-impact-grid .impact-success-card p + p {
margin-top: 10px;
}
.kfh-active .editorial-motion-ready .business-impact-success.is-visible .impact-success-card {
animation: impact-card-rise .72s cubic-bezier(.16, 1, .3, 1) both;
animation-delay: calc(180ms + var(--impact-order) * 120ms);
}
@keyframes impact-card-rise {
from { opacity: 0; transform: translateY(24px) scale(.98); }
to { opacity: 1; transform: none; }
}
@media (max-width: 720px) {
.kfh-active .questionnaire-scene {
padding: 14px;
border-radius: 18px;
}
.kfh-active .questionnaire-paper {
padding: 24px 18px;
border-radius: 14px;
}
.kfh-active .questionnaire-paper header {
align-items: start;
}
.kfh-active .questionnaire-paper header p {
display: none;
}
.kfh-active .questionnaire-fields {
gap: 0;
}
.kfh-active .questionnaire-row {
grid-template-columns: 32px minmax(0, 1fr);
gap: 10px;
padding: 20px 0;
}
.kfh-active .questionnaire-paper footer {
display: none;
}
.kfh-active .quote-marquee {
margin-inline: -10px;
border-radius: 16px;
}
.kfh-active .quote-marquee::before,
.kfh-active .quote-marquee::after {
width: 38px;
}
.kfh-active .quote-marquee .review-card {
width: min(78vw, 330px);
min-height: 260px;
padding: 24px;
}
.kfh-active .finding-meter {
right: 22px;
left: 22px;
}
.kfh-active .business-impact-success {
margin-inline: -4px;
padding: 26px 18px 18px;
border-radius: 22px;
}
.kfh-active .business-impact-heading {
display: block;
padding-bottom: 22px;
}
.kfh-active .business-impact-heading .eyebrow {
display: block;
margin: 0 0 10px;
}
.kfh-active .business-impact-grid.content-columns {
grid-template-columns: 1fr;
}
.kfh-active .business-impact-grid .impact-success-card.content-card {
min-height: 0;
}
.kfh-active .impact-success-mark {
margin-bottom: 34px;
}
}
@media (prefers-reduced-motion: reduce) {
.kfh-active .diagram-motion-stage .media-open img {
opacity: 1;
clip-path: none;
transform: none;
animation: none;
}
.kfh-active .diagram-motion-stage .media-open::after,
.kfh-active .diagram-pulse {
display: none;
animation: none;
}
.kfh-active .verified-findings .finding,
.kfh-active .verified-findings .finding::after,
.kfh-active .verified-findings .finding-meter::after,
.kfh-active .research-finding-story .finding-gauge,
.kfh-active .research-finding-story .finding-score strong,
.kfh-active .research-finding-story .finding-benchmark,
.kfh-active .research-finding-story .finding-benchmark-track i::after {
opacity: 1;
transform: none;
animation: none;
}
.kfh-active .quote-marquee {
overflow-x: auto;
-webkit-mask-image: none;
mask-image: none;
}
.kfh-active .quote-marquee-track {
animation: none;
}
.kfh-active .quote-marquee-group[aria-hidden="true"] {
display: none;
}
}
.kfh-active .result-panel {
position: relative;
isolation: isolate;
overflow: hidden;
}
.kfh-active .result-panel::before {
position: absolute;
z-index: 5;
top: 0;
bottom: 0;
left: -18%;
width: 15%;
background: linear-gradient(90deg, transparent, rgba(207, 63, 48, .24), transparent);
content: "";
opacity: 0;
pointer-events: none;
transform: skewX(-16deg);
}
.kfh-active .result-panel > div {
position: relative;
isolation: isolate;
overflow: hidden;
}
.kfh-active .result-panel > div::before {
position: absolute;
z-index: -1;
top: -90px;
right: -80px;
width: 230px;
height: 230px;
border-radius: 50%;
background: radial-gradient(circle, rgba(207, 63, 48, .13), transparent 68%);
content: "";
opacity: 0;
transform: scale(.65);
}
.kfh-active .result-panel .result-before::before {
background: radial-gradient(circle, rgba(9, 9, 9, .08), transparent 68%);
}
.kfh-active .result-meter {
position: relative;
display: block;
width: 100%;
height: 6px;
margin-top: 24px;
overflow: hidden;
border-radius: 999px;
background: rgba(9, 9, 9, .1);
}
.kfh-active .result-meter::after {
display: block;
width: var(--result-value);
height: 100%;
border-radius: inherit;
background: #73726f;
content: "";
transform: scaleX(0);
transform-origin: left;
}
.kfh-active .result-after .result-meter::after {
background: linear-gradient(90deg, #ff8f82, var(--kfh-accent));
box-shadow: 0 0 18px rgba(207, 63, 48, .28);
}
.kfh-active .result-arrow {
--result-arrow-rotation: 0deg;
position: relative;
z-index: 2;
isolation: isolate;
width: 96px;
background: transparent;
font-size: 34px;
font-weight: 400;
}
.kfh-active .result-arrow::before {
position: absolute;
z-index: -1;
width: 58px;
height: 58px;
border: 1px solid rgba(207, 63, 48, .23);
border-radius: 50%;
background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(207, 63, 48, .08));
box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 12px 26px rgba(112, 43, 34, .1);
content: "";
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.kfh-active .motion-ready .result-panel .result-before,
.kfh-active .motion-ready .result-panel .result-after {
opacity: 0;
filter: blur(7px);
}
.kfh-active .motion-ready .result-panel .result-before {
transform: translateX(-56px) scale(.96);
}
.kfh-active .motion-ready .result-panel .result-after {
transform: translateX(56px) scale(.96);
}
.kfh-active .motion-ready .result-panel .result-arrow {
opacity: 0;
transform: rotate(var(--result-arrow-rotation)) scale(.3);
}
.kfh-active .motion-ready .result-panel.is-visible .result-before {
animation: result-before-arrive .82s cubic-bezier(.16, 1, .3, 1) both;
}
.kfh-active .motion-ready .result-panel.is-visible .result-arrow {
animation: result-arrow-arrive .76s cubic-bezier(.34, 1.56, .64, 1) .34s both;
}
.kfh-active .motion-ready .result-panel.is-visible .result-after {
animation: result-after-arrive .86s cubic-bezier(.16, 1, .3, 1) .48s both;
}
.kfh-active .motion-ready .result-panel.is-visible::before {
animation: result-scan 1s cubic-bezier(.16, 1, .3, 1) .58s both;
}
.kfh-active .motion-ready .result-panel.is-visible > div::before {
animation: result-orb .9s ease-out .72s both;
}
.kfh-active .motion-ready .result-panel.is-visible .result-before strong {
animation: result-number-settle .65s cubic-bezier(.16, 1, .3, 1) .25s both;
}
.kfh-active .motion-ready .result-panel.is-visible .result-after strong {
animation: result-number-settle .65s cubic-bezier(.16, 1, .3, 1) .78s both;
}
.kfh-active .motion-ready .result-panel.is-visible .result-before .result-meter::after {
animation: result-meter-fill 1s cubic-bezier(.16, 1, .3, 1) .42s both;
}
.kfh-active .motion-ready .result-panel.is-visible .result-after .result-meter::after {
animation: result-meter-fill 1s cubic-bezier(.16, 1, .3, 1) .94s both;
}
@keyframes result-before-arrive {
from { opacity: 0; filter: blur(7px); transform: translateX(-56px) scale(.96); }
to { opacity: 1; filter: none; transform: none; }
}
@keyframes result-after-arrive {
from { opacity: 0; filter: blur(7px); transform: translateX(56px) scale(.96); }
to { opacity: 1; filter: none; transform: none; }
}
@keyframes result-arrow-arrive {
0% { opacity: 0; transform: rotate(var(--result-arrow-rotation)) scale(.3); }
70% { opacity: 1; transform: rotate(var(--result-arrow-rotation)) scale(1.14); }
100% { opacity: 1; transform: rotate(var(--result-arrow-rotation)) scale(1); }
}
@keyframes result-scan {
0% { left: -18%; opacity: 0; }
22% { opacity: 1; }
100% { left: 112%; opacity: 0; }
}
@keyframes result-orb {
0% { opacity: 0; transform: scale(.65); }
55% { opacity: .9; }
100% { opacity: .46; transform: scale(1); }
}
@keyframes result-number-settle {
0% { opacity: .25; transform: translateY(14px) scale(.82); }
72% { opacity: 1; transform: translateY(0) scale(1.06); }
100% { opacity: 1; transform: none; }
}
@keyframes result-meter-fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@media (max-width: 720px) {
.kfh-active .result-arrow {
--result-arrow-rotation: 90deg;
width: 100%;
height: 76px;
}
.kfh-active .result-panel > div {
min-height: 220px;
}
}
@media (prefers-reduced-motion: reduce) {
.kfh-active .motion-ready .result-panel .result-before,
.kfh-active .motion-ready .result-panel .result-after,
.kfh-active .motion-ready .result-panel .result-arrow,
.kfh-active .motion-ready .result-panel.is-visible .result-before,
.kfh-active .motion-ready .result-panel.is-visible .result-after,
.kfh-active .motion-ready .result-panel.is-visible .result-arrow,
.kfh-active .motion-ready .result-panel.is-visible > div::before,
.kfh-active .motion-ready .result-panel.is-visible strong,
.kfh-active .motion-ready .result-panel.is-visible .result-meter::after {
opacity: 1;
filter: none;
transform: none;
animation: none;
}
.kfh-active .result-panel .result-meter::after {
transform: scaleX(1);
}
.kfh-active .result-arrow {
transform: rotate(var(--result-arrow-rotation));
}
.kfh-active .result-panel::before {
display: none;
}
}
@media (max-width: 1100px) {
.kfh-active .case .case-hero {
grid-template-columns: minmax(0, .9fr) minmax(400px, 1.1fr);
}
.kfh-active .case-impact-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 34px;
}
.kfh-active .research-overview {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kfh-active .decision-track {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.kfh-active .case {
padding-top: 28px;
}
.kfh-active .case .case-hero {
grid-template-columns: 1fr;
min-height: auto;
padding: 58px 0 52px;
}
.kfh-active .case .case-hero::after {
top: auto;
right: 5%;
bottom: 4%;
width: 62vw;
height: 62vw;
transform: none;
}
.kfh-active .case-hero-visual {
max-width: 740px;
margin-top: 34px;
}
.kfh-active .impact-summary-copy {
grid-template-columns: 1fr;
}
.kfh-active .impact-summary-copy .eyebrow,
.kfh-active .impact-summary-copy h2,
.kfh-active .impact-summary-copy p,
.kfh-active .case-jump {
grid-column: 1;
}
.kfh-active .impact-summary-copy p {
max-width: 620px;
margin-top: 26px;
}
.kfh-active .long-study {
display: block;
}
.kfh-active .study-toc {
position: sticky !important;
top: 82px !important;
z-index: 15;
display: block;
margin: 0 0 58px;
padding: 0 !important;
overflow: visible;
border: 1px solid var(--kfh-line) !important;
border-radius: 14px;
background: rgba(255, 255, 255, .96);
box-shadow: 0 12px 32px rgba(9, 9, 9, .08);
backdrop-filter: blur(16px);
}
.kfh-active .study-toc > .eyebrow {
display: none;
}
.kfh-active .mobile-toc-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 66px;
padding: 10px 16px;
border: 0;
border-radius: 14px;
background: transparent;
color: var(--kfh-ink);
text-align: left;
cursor: pointer;
}
.kfh-active .mobile-toc-trigger span {
display: grid;
min-width: 0;
padding-right: 16px;
}
.kfh-active .mobile-toc-trigger small {
color: var(--kfh-accent);
font-size: 9px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.kfh-active .mobile-toc-trigger b {
font-size: 14px;
}
.kfh-active .mobile-toc-trigger i {
position: relative;
display: grid;
width: 36px;
height: 36px;
flex: 0 0 36px;
place-items: center;
border: 1px solid var(--kfh-line);
border-radius: 50%;
font-style: normal;
transition: border-color .2s ease, background-color .2s ease;
}
.kfh-active .mobile-toc-trigger i::before {
content: "";
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.kfh-active .toc-links {
display: none;
max-height: min(60vh, 430px);
padding: 4px 14px 14px;
overflow-y: auto;
border-top: 1px solid var(--kfh-line);
}
.kfh-active .study-toc.toc-open .toc-links {
display: grid;
}
.kfh-active .study-toc.toc-open .mobile-toc-trigger i {
border-color: rgba(217, 61, 46, .26);
background: rgba(217, 61, 46, .08);
}
.kfh-active .study-toc.toc-open .mobile-toc-trigger i::before {
transform: translateY(2px) rotate(225deg);
}
.kfh-active .study-toc a {
min-height: 46px;
padding: 10px 0 10px 12px !important;
border: 0;
border-left: 2px solid transparent;
background: transparent;
}
.kfh-active .chapter,
.kfh-active .chapter.dark,
.kfh-active .chapter.accent {
scroll-margin-top: 168px;
}
}
@media (max-width: 700px) {
.kfh-active .case {
width: calc(100% - 32px);
}
.kfh-active #kfh-8 > .study-deep-dive {
margin: 34px 0 64px;
border-radius: 16px;
}
.kfh-active #kfh-8 > .study-deep-dive summary {
min-height: 78px;
grid-template-columns: minmax(0, 1fr) 38px;
gap: 14px;
padding: 16px 18px;
}
.kfh-active #kfh-8 > .study-deep-dive .deep-dive-icon {
width: 38px;
height: 38px;
}
.kfh-active #kfh-8 > .study-deep-dive .deep-dive-content {
padding: 20px 18px 28px;
}
.kfh-active #kfh-8 > .study-deep-dive .deep-dive-content > h2 {
margin-top: 44px;
padding-top: 26px;
font-size: clamp(28px, 8.4vw, 36px);
}
.kfh-active .case .case-hero {
gap: 14px;
padding: 42px 0 38px;
}
.kfh-active .case .case-hero > h1 {
font-size: clamp(40px, 11.5vw, 54px);
}
.kfh-active .case-hero-visual {
margin-top: 24px;
}
.kfh-active .case-hero-visual img {
filter: none;
}
.kfh-active .case-impact-summary {
padding: 72px 0 80px;
}
.kfh-active .impact-summary-copy h2 {
font-size: clamp(42px, 13vw, 60px);
}
.kfh-active .case-impact-grid {
grid-template-columns: 1fr;
gap: 28px;
margin-top: 58px;
}
.kfh-active .case-impact-grid > .impact-card,
.kfh-active .case-impact-grid > div.impact-onboarding,
.kfh-active .case-impact-grid > div.impact-adoption,
.kfh-active .case-impact-grid > div.impact-delivery,
.kfh-active .case-impact-grid > div.impact-deadlines {
min-height: 0;
}
.kfh-active .case-impact-grid .impact-card strong {
margin-top: 22px;
}
.kfh-active .case-facts {
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 90px;
}
.kfh-active .long-study .chapter .chapter-title {
font-size: clamp(42px, 13vw, 60px);
}
.kfh-active .long-study .chapter .section-title {
margin-top: 66px;
font-size: clamp(31px, 9.5vw, 42px);
}
.kfh-active .chapter p,
.kfh-active .chapter li,
.kfh-active .chapter.dark p,
.kfh-active .chapter.dark li,
.kfh-active .chapter.accent p,
.kfh-active .chapter.accent li {
font-size: 16px;
line-height: 1.72;
}
.kfh-active .content-columns,
.kfh-active .research-overview,
.kfh-active .finding-grid,
.kfh-active .chapter.dark .verified-findings,
.kfh-active .research-synthesis > div {
grid-template-columns: 1fr;
}
.kfh-active .decision-track {
grid-auto-columns: 82%;
grid-template-columns: none;
}
.kfh-active .adoption-story-heading,
.kfh-active .adoption-comparison {
display: grid;
grid-template-columns: 1fr;
}
.kfh-active .adoption-direction {
grid-template-columns: auto 1fr;
justify-content: start;
justify-items: start;
}
.kfh-active .adoption-direction span {
transform: rotate(90deg);
}
.kfh-active .adoption-direction small {
max-width: none;
align-self: center;
text-align: left;
}
.kfh-active .adoption-chart {
grid-template-columns: 42px minmax(0, 1fr);
grid-template-rows: 300px auto;
column-gap: 10px;
padding-top: 30px;
}
.kfh-active .adoption-bars {
inset-inline: 16px;
gap: 28px;
}
.kfh-active .adoption-chart-labels {
gap: 28px;
padding-inline: 16px;
}
.kfh-active .adoption-bar strong {
font-size: clamp(31px, 9vw, 42px);
}
.kfh-active .adoption-bar-fill {
width: min(100%, 92px);
}
.kfh-active .adoption-chart-labels strong {
font-size: 10px;
line-height: 1.35;
}
.kfh-active .adoption-chart-labels span {
font-size: 12px;
}
.kfh-active .research-finding-story {
padding: 24px;
}
.kfh-active .finding-story-meta {
display: grid;
justify-content: stretch;
}
.kfh-active .finding-replay {
justify-self: start;
}
.kfh-active .finding-story-stage {
grid-template-columns: 1fr;
gap: 34px;
padding: 38px 0;
}
.kfh-active .finding-gauge {
width: min(100%, 240px);
}
.kfh-active .finding-story-copy {
padding: 30px 0 0;
border-top: 1px solid rgba(255, 255, 255, .14);
border-left: 0;
}
.kfh-active .finding-story-copy h4 {
font-size: 40px;
}
.kfh-active .finding-benchmark {
padding: 20px;
}
.kfh-active .result-panel {
grid-template-columns: 1fr;
}
.kfh-active .result-panel > div {
min-height: 200px;
padding: 26px;
}
.kfh-active .result-arrow {
width: 100%;
height: 62px;
transform: rotate(90deg);
}
.kfh-active .media-heading {
display: block;
}
.kfh-active .media-heading p {
margin-top: 8px;
text-align: left;
}
.kfh-active .product-analysis-layout {
grid-template-columns: 1fr;
padding: 28px 0;
}
.kfh-active .gif-toggle {
left: 16px;
bottom: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.kfh-active .editorial-motion-ready .editorial-reveal {
opacity: 1;
transform: none;
transition: none;
}
.kfh-active .research-finding-story::after {
display: none;
}
.kfh-active .finding-gauge-progress {
stroke-dashoffset: 0;
transition: none;
}
.kfh-active .finding-gauge-marker,
.kfh-active .finding-story-copy > * {
opacity: 1;
transform: none;
transition: none;
}
.kfh-active .finding-gauge-marker {
transform: rotate(237.6deg);
}
.kfh-active .finding-benchmark-track i {
transform: scaleX(1);
transition: none;
}
}
.kfh-active .team-roles-story,
.kfh-active .collaboration-story,
.kfh-active .version-control-feature {
margin: 64px 0 84px;
border: 1px solid var(--kfh-line);
border-radius: 28px;
}
.kfh-active .team-roles-story {
padding: clamp(28px, 4vw, 46px);
background:
radial-gradient(circle at 92% 8%, rgba(0, 108, 110, .12), transparent 36%),
linear-gradient(145deg, #f6f8f6 0%, #eef4f2 100%);
}
.kfh-active .team-roles-heading,
.kfh-active .collaboration-heading {
display: grid;
grid-template-columns: minmax(150px, .34fr) minmax(0, 1fr);
column-gap: 32px;
align-items: start;
padding-bottom: 30px;
border-bottom: 1px solid rgba(14, 24, 23, .14);
}
.kfh-active .team-roles-heading .eyebrow,
.kfh-active .collaboration-heading .eyebrow,
.kfh-active .version-control-copy .eyebrow {
margin-top: 5px;
color: var(--kfh-accent);
}
.kfh-active .team-roles-heading h3,
.kfh-active .collaboration-heading h3,
.kfh-active .version-control-copy h3 {
margin: 0 0 12px;
}
.kfh-active .team-roles-heading p,
.kfh-active .collaboration-heading p {
grid-column: 2;
margin: 0;
}
.kfh-active .role-ownership-grid.content-columns {
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: 16px;
margin: 28px 0 0;
}
.kfh-active .role-ownership-grid .role-ownership-card.content-card {
min-height: 100%;
padding: 28px;
border: 1px solid rgba(14, 24, 23, .13);
border-radius: 20px;
background: rgba(255, 255, 255, .72);
box-shadow: 0 16px 42px rgba(12, 29, 27, .06);
}
.kfh-active .role-card-label,
.kfh-active .collaboration-index {
display: inline-flex;
align-items: center;
min-height: 28px;
margin-bottom: 26px;
color: var(--kfh-accent);
font-size: 11px;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
.kfh-active .role-ownership-grid .role-card-lead.content-card {
border-color: rgba(255, 255, 255, .1);
background: linear-gradient(145deg, #0b1716 0%, #132422 100%);
color: #fff;
}
.kfh-active .role-card-lead .role-card-label {
color: #77d9cf;
}
.kfh-active .long-study .chapter .role-card-lead h3 {
position: relative;
margin-bottom: 24px;
padding-left: 18px;
color: #b7fff3;
}
.kfh-active .long-study .chapter .role-card-lead h3::before {
position: absolute;
inset: .12em auto .12em 0;
width: 4px;
border-radius: 999px;
background: linear-gradient(180deg, #77d9cf, #fff);
content: '';
}
.kfh-active .role-card-lead li {
color: #fff;
}
.kfh-active .role-card-team h3:not(:first-of-type) {
margin-top: 28px;
padding-top: 26px;
border-top: 1px solid rgba(14, 24, 23, .13);
}
.kfh-active .collaboration-story {
padding: clamp(28px, 4vw, 46px);
border-color: rgba(211, 61, 44, .2);
background:
radial-gradient(circle at 10% 0%, rgba(211, 61, 44, .11), transparent 34%),
linear-gradient(145deg, rgba(253, 244, 241, .96), rgba(249, 248, 245, .96));
}
.kfh-active .collaboration-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 28px;
}
.kfh-active .collaboration-card {
min-width: 0;
padding: 26px 24px;
border: 1px solid rgba(211, 61, 44, .16);
border-radius: 18px;
background: rgba(255, 255, 255, .67);
box-shadow: 0 14px 36px rgba(56, 26, 21, .05);
}
.kfh-active .collaboration-card h3 {
margin: 0 0 16px;
font-size: clamp(20px, 1.8vw, 24px);
}
.kfh-active .collaboration-card p,
.kfh-active .collaboration-card li {
font-size: 15px;
line-height: 1.65;
}
.kfh-active .collaboration-card ul {
margin-bottom: 0;
padding-left: 18px;
}
.kfh-active .version-control-feature {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
gap: clamp(28px, 4vw, 48px);
align-items: center;
padding: clamp(18px, 2.5vw, 28px);
background: linear-gradient(145deg, #f3f5f4, #ecefed);
overflow: hidden;
}
.kfh-active .version-control-visual,
.kfh-active .version-control-copy {
min-width: 0;
}
.kfh-active .version-control-media.media-block {
margin: 0;
}
.kfh-active .version-control-media .media-grid {
display: block;
}
.kfh-active .version-control-media .media-open {
width: 100%;
max-height: 430px;
padding: 8px;
overflow: hidden;
background: #fff;
}
.kfh-active .version-control-media .media-open img {
width: 100%;
max-height: 410px;
object-fit: cover;
object-position: center top;
}
.kfh-active .version-control-copy {
padding: 18px 18px 18px 0;
}
.kfh-active .version-control-copy p {
margin: 0;
font-size: 16px;
line-height: 1.7;
}
@media (max-width: 900px) {
.kfh-active .collaboration-grid {
grid-template-columns: 1fr 1fr;
}
.kfh-active .collaboration-card:last-child {
grid-column: 1 / -1;
}
.kfh-active .version-control-feature {
grid-template-columns: 1fr;
}
.kfh-active .version-control-copy {
padding: 4px 10px 14px;
}
}
@media (max-width: 700px) {
.kfh-active .team-roles-story,
.kfh-active .collaboration-story,
.kfh-active .version-control-feature {
margin: 48px 0 66px;
border-radius: 22px;
}
.kfh-active .team-roles-story,
.kfh-active .collaboration-story {
padding: 22px 18px;
}
.kfh-active .team-roles-heading,
.kfh-active .collaboration-heading {
grid-template-columns: 1fr;
gap: 8px;
}
.kfh-active .team-roles-heading p,
.kfh-active .collaboration-heading p {
grid-column: 1;
}
.kfh-active .role-ownership-grid.content-columns,
.kfh-active .collaboration-grid {
grid-template-columns: 1fr;
}
.kfh-active .collaboration-card:last-child {
grid-column: auto;
}
.kfh-active .role-ownership-grid .role-ownership-card.content-card,
.kfh-active .collaboration-card {
padding: 24px 20px;
}
.kfh-active .version-control-feature {
gap: 20px;
padding: 14px;
}
.kfh-active .version-control-media .media-open,
.kfh-active .version-control-media .media-open img {
max-height: 330px;
}
}

/* ===== kfh-editorial-redesign.css ===== */
body.kfhr-active{--kfhr-ink:#102b29;--kfhr-muted:#657673;--kfhr-green:#006c64;--kfhr-mint:#d9f3ec;--kfhr-cream:#f5f1e8;--kfhr-line:rgba(16,43,41,.14);background:#fbfaf6;color:var(--kfhr-ink)}
.kfhr-active .site-header{background:rgba(251,250,246,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--kfhr-line)}
.kfhr-active .kfhr-case{max-width:none;padding:0}.kfhr-active .kfhr-case .case-hero{position:relative;display:grid;grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);gap:clamp(40px,7vw,110px);min-height:min(640px,78vh);padding:clamp(24px,3vw,40px) max(6vw,calc((100vw - 1440px)/2)) 72px;overflow:hidden;background:var(--kfhr-cream)}
.kfhr-active .kfhr-case .case-hero:before{content:"KFH / JAZEEL";position:absolute;right:-.03em;top:.42em;color:rgba(0,108,100,.055);font-size:clamp(100px,15vw,245px);font-weight:900;letter-spacing:-.08em;white-space:nowrap}
.kfhr-active .kfhr-case .case-hero>.eyebrow{align-self:end;color:var(--kfhr-green);font-weight:800;letter-spacing:.14em}.kfhr-active .kfhr-case .case-hero h1{grid-column:1;max-width:780px;margin:.7rem 0 1.4rem;color:var(--kfhr-ink);font-size:clamp(54px,6.2vw,104px);line-height:.92;letter-spacing:-.065em;text-wrap:balance}.kfhr-active .kfhr-case .case-hero>p{grid-column:1;max-width:610px;margin:0;color:var(--kfhr-muted);font-size:clamp(18px,1.5vw,24px);line-height:1.5}.kfhr-active .kfhr-hero-art{grid-column:2;grid-row:1/5;align-self:center;position:relative;min-height:580px}.kfhr-active .kfhr-hero-art:before{content:"";position:absolute;inset:10% 0 2% 7%;border-radius:48% 52% 40% 60%;background:linear-gradient(145deg,#9ddbd0,#006c64);transform:rotate(-8deg)}.kfhr-active .kfhr-hero-art img{position:absolute;z-index:2;left:-8%;top:15%;width:118%;filter:drop-shadow(0 32px 35px rgba(1,67,62,.25));animation:kfhr-float 5s ease-in-out infinite alternate}
.kfhr-active .kfhr-impact{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:0;padding:0 max(6vw,calc((100vw - 1440px)/2));background:var(--kfhr-green);color:#fff}.kfhr-active .kfhr-impact>div{min-height:210px;padding:36px 28px;border-left:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column;justify-content:space-between}.kfhr-active .kfhr-impact-copy{border-left:0!important}.kfhr-active .kfhr-impact small{opacity:.7;text-transform:uppercase;letter-spacing:.12em}.kfhr-active .kfhr-impact strong{font-size:clamp(36px,4vw,62px);letter-spacing:-.06em}.kfhr-active .kfhr-impact span{font-size:13px;opacity:.78}
.kfhr-active .kfhr-case>.case-facts{display:grid;grid-template-columns:repeat(3,1fr);max-width:1440px;margin:0 auto;padding:72px 6vw 0}.kfhr-active .kfhr-case .fact{padding:18px 0;border-top:1px solid var(--kfhr-line)}.kfhr-active .kfhr-case .fact .eyebrow{color:var(--kfhr-green)}
.kfhr-active .kfhr-case .long-study{display:grid;grid-template-columns:260px minmax(0,920px);gap:clamp(50px,8vw,140px);max-width:1440px;margin:0 auto;padding:80px 6vw 160px}.kfhr-active .kfhr-case .study-toc{position:sticky;top:112px;align-self:start;padding:20px 0;border-top:1px solid var(--kfhr-line)}.kfhr-active .kfhr-case .study-toc .eyebrow{display:block;margin-bottom:22px;color:var(--kfhr-green)}.kfhr-active .kfhr-case .study-toc a{display:block;padding:9px 0 9px 16px;border-left:2px solid transparent;color:var(--kfhr-muted);font-size:12px;line-height:1.25;text-decoration:none;transition:.25s ease}.kfhr-active .kfhr-case .study-toc a:hover,.kfhr-active .kfhr-case .study-toc a.active{border-left-color:var(--kfhr-green);color:var(--kfhr-ink);transform:translateX(4px)}
.kfhr-active .kfhr-case article{min-width:0}.kfhr-active .kfhr-case .chapter{padding:0 0 130px;margin:0;border:0;background:transparent;color:var(--kfhr-ink)}.kfhr-active .kfhr-case .chapter+.chapter{padding-top:110px;border-top:1px solid var(--kfhr-line)}.kfhr-active .kfhr-case .chapter-num{display:block;margin-bottom:24px;color:var(--kfhr-green);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.kfhr-active .kfhr-case .chapter h2{max-width:780px;margin:0 0 30px;color:var(--kfhr-ink);font-size:clamp(42px,5.2vw,76px);line-height:.98;letter-spacing:-.055em}.kfhr-active .kfhr-case .chapter h3{margin:70px 0 18px;color:var(--kfhr-ink);font-size:clamp(24px,2.6vw,38px);line-height:1.08;letter-spacing:-.035em}.kfhr-active .kfhr-case .chapter p,.kfhr-active .kfhr-case .chapter li{max-width:710px;color:var(--kfhr-muted);font-size:18px;line-height:1.75}.kfhr-active .kfhr-case .chapter ul{max-width:720px;padding-left:1.2em}.kfhr-active .kfhr-case .chapter li::marker{color:var(--kfhr-green)}
.kfhr-active .kfhr-case .content-columns{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:48px 0}.kfhr-active .kfhr-case .content-card{padding:28px;border:1px solid var(--kfhr-line);border-radius:20px;background:#fff;box-shadow:0 18px 50px rgba(16,43,41,.055)}.kfhr-active .kfhr-case .content-card h3{margin:0 0 12px;font-size:22px}.kfhr-active .kfhr-case .content-card p,.kfhr-active .kfhr-case .content-card li{font-size:15px;line-height:1.6}
.kfhr-active .kfhr-gallery{margin:52px 0 90px}.kfhr-active .kfhr-gallery-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:18px}.kfhr-active .kfhr-gallery-head strong{font-size:14px}.kfhr-active .kfhr-gallery-head span{color:var(--kfhr-muted);font-size:12px}.kfhr-active .kfhr-gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}.kfhr-active .kfhr-gallery-grid figure{grid-column:span 6;margin:0;overflow:hidden;border-radius:18px;background:var(--kfhr-mint)}.kfhr-active .kfhr-gallery-grid figure:first-child:last-child{grid-column:1/-1}.kfhr-active .kfhr-gallery-grid img{display:block;width:100%;height:100%;min-height:280px;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}.kfhr-active .kfhr-gallery-grid figure:hover img{transform:scale(1.025)}.kfhr-active .kfhr-gallery-grid.is-contain img{object-fit:contain;padding:26px}
.kfhr-active .kfhr-reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}.kfhr-active .kfhr-reveal.is-visible{opacity:1;transform:none}.kfhr-active .kfhr-progress{position:fixed;z-index:99;left:0;top:0;width:100%;height:3px;background:transparent}.kfhr-active .kfhr-progress i{display:block;width:100%;height:100%;background:#d5a94f;transform:scaleX(0);transform-origin:left}.kfhr-active .site-footer{background:#102b29;color:#fff}
@keyframes kfhr-float{to{transform:translateY(-14px) rotate(1deg)}}
@media(max-width:900px){.kfhr-active .kfhr-case .case-hero{grid-template-columns:1fr;padding-inline:24px}.kfhr-active .kfhr-hero-art{grid-column:1;grid-row:auto;min-height:420px}.kfhr-active .kfhr-impact{grid-template-columns:repeat(2,1fr);padding-inline:24px}.kfhr-active .kfhr-impact-copy{grid-column:1/-1}.kfhr-active .kfhr-case .long-study{grid-template-columns:1fr;padding-inline:24px}.kfhr-active .kfhr-case .study-toc{position:relative;top:auto;display:flex;gap:8px;overflow:auto}.kfhr-active .kfhr-case .study-toc>.eyebrow{display:none}.kfhr-active .kfhr-case .study-toc a{flex:0 0 auto;padding:10px 14px;border:1px solid var(--kfhr-line);border-radius:999px}.kfhr-active .kfhr-case .study-toc a:hover,.kfhr-active .kfhr-case .study-toc a.active{transform:none;background:var(--kfhr-green);color:#fff}.kfhr-active .kfhr-case>.case-facts{padding-inline:24px}}
@media(max-width:620px){.kfhr-active .kfhr-case .case-hero h1{font-size:48px}.kfhr-active .kfhr-hero-art{min-height:300px}.kfhr-active .kfhr-impact{grid-template-columns:1fr 1fr}.kfhr-active .kfhr-impact>div{min-height:150px;padding:24px 16px}.kfhr-active .kfhr-case>.case-facts{grid-template-columns:1fr}.kfhr-active .kfhr-case .content-columns{grid-template-columns:1fr}.kfhr-active .kfhr-gallery-grid figure{grid-column:1/-1}.kfhr-active .kfhr-case .chapter p,.kfhr-active .kfhr-case .chapter li{font-size:16px}}
@media(prefers-reduced-motion:reduce){.kfhr-active .kfhr-hero-art img{animation:none}.kfhr-active .kfhr-reveal{opacity:1;transform:none;transition:none}}

/* ===== home-redesign.css ===== */
body.home-rd-active{--hrd-ink:#111310;--hrd-muted:#74776f;--hrd-paper:#f7f7f3;--hrd-lime:#dfff57;--hrd-mint:#bde9dc;background:var(--hrd-paper);color:var(--hrd-ink)}
.home-rd-active .site-header{top:18px;left:50%;right:auto;width:min(680px,calc(100% - 32px));padding:8px 10px 8px 18px;border:1px solid rgba(17,19,16,.09);border-radius:999px;background:rgba(255,255,255,.88);box-shadow:0 18px 45px rgba(23,29,20,.1);backdrop-filter:blur(18px);transform:translateX(-50%)}
.home-rd-active .site-header .brand-avatar{display:none}.home-rd-active .site-header .brand b{font-size:14px}.home-rd-active .site-header nav{gap:4px}.home-rd-active .site-header nav a{padding:11px 14px;border-radius:999px;font-size:13px}.home-rd-active .site-header nav a:hover{background:#f0f1ec}.home-rd-active .site-header nav a:last-child{background:var(--hrd-ink);color:#fff}
.new-home-hero{position:relative;display:flex;min-height:100svh;padding:clamp(140px,18vh,220px) 24px 80px;align-items:center;flex-direction:column;justify-content:center;text-align:center;overflow:hidden}.new-home-hero:before,.new-home-hero:after{content:"";position:absolute;width:420px;aspect-ratio:1;border:1px solid rgba(17,19,16,.08);border-radius:50%;pointer-events:none}.new-home-hero:before{left:-260px;top:16%}.new-home-hero:after{right:-310px;bottom:-5%}.new-home-kicker{display:flex;gap:10px;margin-bottom:42px;color:var(--hrd-muted);font-size:11px;font-weight:750;letter-spacing:.13em;text-transform:uppercase}.new-home-kicker span+span:before{content:"·";margin-right:10px}.new-home-hero h1{max-width:1050px;margin:0;color:var(--hrd-ink);font-size:clamp(52px,7.35vw,112px);font-weight:650;line-height:.94;letter-spacing:-.065em;text-wrap:balance}.new-home-hero h1 em{color:#969a91;font-family:inherit;font-style:normal;font-weight:520}.new-home-hero>p{max-width:680px;margin:38px auto 0;color:var(--hrd-muted);font-size:clamp(17px,1.5vw,22px);line-height:1.55;text-wrap:balance}.new-home-actions{display:flex;gap:10px;margin-top:38px}.new-home-actions a{display:flex;align-items:center;gap:12px;padding:14px 20px;border:1px solid rgba(17,19,16,.15);border-radius:999px;color:var(--hrd-ink);font-size:13px;font-weight:750;text-decoration:none;transition:.3s ease}.new-home-actions a:first-child{background:var(--hrd-ink);color:#fff}.new-home-actions a:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(17,19,16,.12)}.new-home-scroll{position:absolute;bottom:28px;display:flex;align-items:center;gap:10px;color:var(--hrd-muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.new-home-scroll i{display:block;width:5px;height:5px;border-radius:50%;background:var(--hrd-ink);animation:hrd-pulse 1.8s ease-in-out infinite}
.experience-strip{padding:46px max(6vw,calc((100vw - 1320px)/2));border-block:1px solid rgba(17,19,16,.11);background:#fff}.experience-strip>span{display:block;margin-bottom:25px;color:var(--hrd-muted);font-size:10px;font-weight:750;letter-spacing:.13em;text-align:center;text-transform:uppercase}.experience-logos{display:flex;align-items:center;justify-content:space-between;gap:26px;overflow:hidden}.experience-logos b{color:#393c36;font-size:clamp(15px,2vw,24px);font-weight:760;letter-spacing:-.03em;white-space:nowrap}.experience-logos b:nth-child(5),.experience-logos b:nth-child(6){font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.home-highlights{max-width:1440px;margin:0 auto;padding:clamp(100px,13vw,180px) 5vw}.highlights-head{display:grid;grid-template-columns:180px minmax(0,1fr) 320px;gap:30px;align-items:end;margin-bottom:68px}.highlights-head>span{align-self:start;color:var(--hrd-muted);font-size:11px;font-weight:750;letter-spacing:.13em;text-transform:uppercase}.highlights-head h2{margin:0;color:var(--hrd-ink);font-size:clamp(54px,7vw,100px);font-weight:620;line-height:.88;letter-spacing:-.065em}.highlights-head p{margin:0 0 5px;color:var(--hrd-muted);font-size:16px;line-height:1.55}.highlight-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}.highlight-card{position:relative;display:flex;min-height:430px;padding:30px;border:1px solid rgba(17,19,16,.11);border-radius:26px;color:var(--hrd-ink);flex-direction:column;justify-content:space-between;overflow:hidden;text-decoration:none;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}.highlight-card:hover{transform:translateY(-7px);box-shadow:0 28px 60px rgba(17,19,16,.11)}.highlight-feature{grid-column:span 7;min-height:580px;background:var(--hrd-lime)}.highlight-feature:after{content:"";position:absolute;right:-12%;bottom:-23%;width:55%;aspect-ratio:1;border:40px solid rgba(17,19,16,.07);border-radius:50%}.highlight-dark{grid-column:span 5;min-height:580px;background:var(--hrd-ink);color:#fff}.highlight-mint{grid-column:span 5;background:var(--hrd-mint)}.highlight-paper{grid-column:span 4;background:#fff}.highlight-line{grid-column:span 3;background:#e8e8e1}.highlight-index{position:relative;z-index:1;font-size:10px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;opacity:.65}.highlight-card>div{position:relative;z-index:1}.highlight-card strong{display:block;margin-bottom:26px;font-size:clamp(50px,6vw,92px);font-weight:650;line-height:.8;letter-spacing:-.07em}.highlight-card h3{max-width:540px;margin:0 0 18px;font-size:clamp(28px,3.2vw,48px);font-weight:620;line-height:.98;letter-spacing:-.05em}.highlight-card p{max-width:520px;margin:0;font-size:15px;line-height:1.55;opacity:.7}.highlight-link{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding-top:22px;border-top:1px solid currentColor;font-size:12px;font-weight:750}.highlight-link i{font-size:20px;font-style:normal}.home-rd-reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}.home-rd-reveal.is-visible{opacity:1;transform:none}
.home-section-rail{position:sticky;z-index:20;bottom:18px;display:flex;width:max-content;max-width:calc(100% - 24px);margin:-62px auto 26px;padding:7px;border:1px solid rgba(17,19,16,.09);border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 16px 40px rgba(17,19,16,.12);backdrop-filter:blur(18px)}.home-section-rail a{padding:10px 16px;border-radius:999px;color:var(--hrd-muted);font-size:11px;font-weight:750;text-decoration:none}.home-section-rail a:hover{background:var(--hrd-ink);color:#fff}.home-rd-active .home-work{margin-top:0}.home-rd-active .home-work:before{background:#111310}.home-rd-active .home-work .section-head .eyebrow,.home-rd-active .home-work .section-head h2,.home-rd-active .home-work .section-head p{color:#fff}
@keyframes hrd-pulse{50%{transform:scale(1.8);opacity:.35}}
@media(max-width:900px){.home-rd-active .site-header{width:calc(100% - 24px)}.home-rd-active .site-header nav a{padding-inline:10px}.highlights-head{grid-template-columns:1fr}.highlights-head>span{margin-bottom:5px}.highlights-head p{max-width:500px}.highlight-feature,.highlight-dark{grid-column:span 12}.highlight-mint{grid-column:span 7}.highlight-paper{grid-column:span 5}.highlight-line{grid-column:span 12;min-height:340px}.experience-logos{justify-content:flex-start;overflow-x:auto}}
@media(max-width:700px){.home-rd-active .site-header{top:10px}.home-rd-active .site-header .brand b{font-size:12px}.home-rd-active .site-header nav a[data-home-linkedin]{display:none}.new-home-hero{padding-top:120px}.new-home-hero h1{font-size:clamp(45px,12.5vw,64px)}.new-home-actions{width:100%;max-width:360px;flex-direction:column}.new-home-actions a{justify-content:center}.experience-strip{padding-inline:24px}.home-highlights{padding-inline:16px}.highlight-card,.highlight-feature,.highlight-dark,.highlight-mint,.highlight-paper,.highlight-line{grid-column:1/-1;min-height:400px;padding:24px}.highlight-feature,.highlight-dark{min-height:500px}.home-section-rail{overflow:auto}.home-section-rail a{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.home-rd-reveal{opacity:1;transform:none;transition:none}.new-home-scroll i{animation:none}}
.home-rd-active .site-header{left:auto;right:auto;margin:18px auto;background:#fff!important;color:var(--hrd-ink)!important;transform:none}
.home-rd-active .home-section-rail{top:96px;bottom:auto;margin:34px auto -70px}
.home-rd-active .site-header{width:min(790px,calc(100% - 32px))}
.new-home-hero{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(330px,.86fr);gap:clamp(38px,6vw,96px);padding-inline:max(5vw,calc((100vw - 1380px)/2));text-align:left}
.new-home-copy{position:relative;z-index:2}.new-home-kicker{justify-content:flex-start}.new-home-hero h1{max-width:820px;font-size:clamp(58px,6.7vw,104px);text-wrap:balance}.new-home-hero>p{margin-inline:0}.new-home-copy>p{max-width:650px;margin:32px 0 0;color:var(--hrd-muted);font-size:clamp(17px,1.4vw,21px);line-height:1.58}.new-home-actions{justify-content:flex-start}
.new-home-portrait{position:relative;align-self:end;width:100%;max-width:520px;min-height:660px;margin:0;justify-self:end;overflow:hidden;border-radius:260px 260px 30px 30px;background:linear-gradient(155deg,#dfff57 0%,#c8eec3 48%,#9dd7ca 100%);isolation:isolate}.new-home-portrait:before{content:"";position:absolute;z-index:-1;inset:11% -30% auto auto;width:85%;aspect-ratio:1;border:1px solid rgba(17,19,16,.15);border-radius:50%}.new-home-portrait:after{content:"10+ YEARS";position:absolute;z-index:3;right:22px;top:38%;display:grid;width:104px;aspect-ratio:1;place-items:center;border-radius:50%;background:#111310;color:#fff;font-size:11px;font-weight:800;letter-spacing:.11em;transform:rotate(8deg)}.new-home-portrait img{position:absolute;left:50%;bottom:-2%;width:111%;max-width:none;height:auto;filter:saturate(.86) contrast(1.03);transform:translateX(-50%);transition:transform .7s cubic-bezier(.2,.8,.2,1)}.new-home-portrait:hover img{transform:translateX(-50%) scale(1.025)}.new-home-portrait>span{position:absolute;z-index:3;left:25px;top:26px;padding:9px 13px;border:1px solid rgba(17,19,16,.15);border-radius:999px;background:rgba(255,255,255,.65);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(10px)}
.home-highlights{max-width:1560px;padding-top:150px;background:#fafafa}.highlights-head{grid-template-columns:160px minmax(0,1fr) 280px;padding-bottom:70px;border-bottom:1px solid rgba(17,19,16,.12)}.highlights-head h2{font-size:clamp(54px,6.2vw,92px)}
.highlight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.highlight-card,.highlight-feature,.highlight-dark,.highlight-mint,.highlight-paper,.highlight-line{grid-column:auto;min-height:510px;padding:54px 38px 40px;border:0;border-right:1px solid rgba(17,19,16,.12);border-bottom:1px solid rgba(17,19,16,.12);border-radius:0;background:transparent;color:var(--hrd-ink);box-shadow:none}.highlight-card:nth-child(3n){border-right:0}.highlight-card:hover{box-shadow:none;transform:translateY(-5px)}.highlight-card:after{display:none}.highlight-mark{display:block;width:58px;height:58px;color:var(--hrd-ink);font-size:42px;font-weight:500;line-height:1}.highlight-card strong{margin-bottom:18px;font-size:clamp(48px,4.6vw,76px)}.highlight-card h3{max-width:360px;font-size:clamp(27px,2.5vw,39px)}.highlight-card p{max-width:360px;font-size:15px}.highlight-link{border-top:0;color:#92958e;font-size:13px;font-weight:600}.home-section-rail{display:none!important}
@media(max-width:1000px){.new-home-hero{grid-template-columns:1fr;padding-top:150px}.new-home-copy{padding-top:55px}.new-home-portrait{width:min(100%,540px);min-height:600px;justify-self:center}.highlight-grid{grid-template-columns:repeat(2,1fr)}.highlight-card:nth-child(3n){border-right:1px solid rgba(17,19,16,.12)}.highlight-card:nth-child(2n){border-right:0}}
@media(max-width:700px){.home-rd-active .site-header nav a{padding-inline:8px;font-size:11px}.home-rd-active .site-header nav a[href*="Resume"]{display:none}.new-home-hero{padding-inline:18px}.new-home-copy{padding-top:30px}.new-home-hero h1{font-size:clamp(48px,13vw,68px)}.new-home-portrait{min-height:470px;border-radius:220px 220px 24px 24px}.new-home-portrait:after{width:82px;right:12px}.highlights-head{display:block;padding-bottom:45px}.highlights-head h2{margin:20px 0}.highlight-grid{grid-template-columns:1fr}.highlight-card,.highlight-card:nth-child(2n),.highlight-card:nth-child(3n){min-height:430px;border-right:0;padding-inline:22px}}
.new-home-hero{display:flex;min-height:auto;padding:clamp(155px,18vh,210px) 24px 0;gap:0;align-items:center;justify-content:flex-start;text-align:center}
.new-home-copy{display:flex;width:100%;align-items:center;flex-direction:column}.new-home-kicker{margin-bottom:22px;justify-content:center}.new-home-hero h1{max-width:900px;font-size:clamp(48px,6vw,86px);line-height:.94}.new-home-copy>p{max-width:660px;margin:24px auto 0;font-size:clamp(16px,1.25vw,19px);text-align:center}.new-home-actions{margin-top:28px;justify-content:center}
.new-home-portrait{width:min(560px,62vw);max-width:none;min-height:620px;margin:72px auto 0;align-self:center;justify-self:auto;border-radius:280px 280px 0 0}.new-home-portrait img{bottom:-5%;width:108%}.new-home-portrait>span{left:50%;transform:translateX(-50%);white-space:nowrap}.new-home-portrait:after{right:12px;top:39%}.new-home-scroll{display:none}
.experience-strip{position:relative;z-index:4;padding-block:38px}.experience-logos{gap:clamp(26px,4vw,70px);justify-content:center}.experience-logos b{font-size:clamp(14px,1.7vw,22px)}.experience-logos b:nth-child(5),.experience-logos b:nth-child(6){font-weight:760;letter-spacing:-.03em;text-transform:none}
@media(max-width:700px){.new-home-hero{padding:125px 16px 0}.new-home-copy{padding-top:0}.new-home-hero h1{font-size:clamp(45px,12vw,62px)}.new-home-portrait{width:min(100%,430px);min-height:500px;margin-top:50px}.new-home-portrait>span{top:20px}.experience-strip{padding-inline:18px}.experience-logos{justify-content:flex-start}}
.new-home-portrait{width:min(560px,74vw);min-height:560px;margin-top:58px;overflow:hidden;border-radius:0;background:transparent!important;isolation:auto}.new-home-portrait:before,.new-home-portrait:after,.new-home-portrait>span{display:none!important}.new-home-portrait img{bottom:-7%;width:100%;filter:grayscale(1) contrast(1.08) brightness(1.03);mix-blend-mode:multiply}.new-home-portrait:hover img{transform:translateX(-50%)}
.experience-strip{border:0;background:#10110f;color:#fff}.experience-strip>span{color:#91948d}.experience-logos b{color:#fff;font-size:clamp(14px,1.5vw,20px);font-weight:680;letter-spacing:-.025em}
.home-highlights{max-width:none;margin:0;padding:clamp(100px,10vw,150px) max(5vw,calc((100vw - 1500px)/2));background:#f7f7f7}.highlights-head{display:grid;grid-template-columns:150px minmax(0,1fr) 300px;gap:30px;align-items:end;margin:0 0 55px;padding:0;border:0}.highlights-head h2{font-size:clamp(46px,5vw,72px);font-weight:660;line-height:.95}.highlights-head p{font-size:15px}
.highlight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(360px,auto));column-gap:clamp(34px,5vw,90px);row-gap:58px}.highlight-card,.highlight-feature,.highlight-dark,.highlight-mint,.highlight-paper,.highlight-line{display:flex;min-height:0;padding:0;border:0!important;background:transparent;color:#111310;box-shadow:none;flex-direction:column;justify-content:flex-start}.highlight-card:nth-child(n){grid-column:auto}.highlight-card:nth-child(2){grid-column:2;grid-row:1}.highlight-card:nth-child(3){grid-column:3;grid-row:1}.highlight-card:nth-child(4){grid-column:4;grid-row:1}.highlight-card:nth-child(5){grid-column:2;grid-row:2}.highlight-card:nth-child(6){grid-column:3;grid-row:2}.highlight-card:nth-child(7){grid-column:4;grid-row:2}.highlight-lead{grid-column:1!important;grid-row:1/3!important}.highlight-card:hover{box-shadow:none;transform:none}.highlight-icon{width:48px;height:48px;margin:0 0 42px;fill:none;stroke:#111310;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.highlight-lead .highlight-icon{width:70px;height:70px;margin-bottom:48px}.highlight-card>div{margin:0}.highlight-label{display:block;margin-bottom:13px;color:#8b8e87;font-size:11px;font-weight:720;letter-spacing:.1em;text-transform:uppercase}.highlight-card strong{display:none}.highlight-card h3{max-width:330px;margin:0 0 16px;font-size:clamp(25px,2.25vw,34px);font-weight:680;line-height:1.05;letter-spacing:-.045em}.highlight-lead h3{max-width:350px;font-size:clamp(42px,4.1vw,66px);line-height:.98}.highlight-card p{max-width:320px;color:#4f524c;font-size:14px;line-height:1.55;opacity:1}.highlight-lead p{max-width:350px;font-size:17px}.highlight-link{margin-top:34px;padding:0;border:0;color:#9a9d96;font-size:14px}.highlight-lead .highlight-link{margin-top:42px;justify-content:flex-start;gap:10px}
@media(max-width:1050px){.highlight-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:auto}.highlight-card:nth-child(n),.highlight-lead{grid-column:auto!important;grid-row:auto!important;min-height:360px}.highlight-lead{grid-column:1/-1!important;min-height:500px}.highlight-card h3{font-size:31px}.highlight-lead h3{font-size:58px}.highlights-head{grid-template-columns:1fr}.experience-logos{justify-content:flex-start;overflow-x:auto}}
@media(max-width:700px){.new-home-portrait{min-height:450px}.highlight-grid{grid-template-columns:1fr;gap:65px}.highlight-card:nth-child(n),.highlight-lead{grid-column:1!important;min-height:0;padding:0}.highlight-lead{min-height:430px}.highlight-card h3{font-size:30px}.highlight-lead h3{font-size:46px}.highlight-icon{margin-bottom:30px}.highlights-head{display:block}.experience-strip{margin-top:0}}
@media(min-width:1051px){.highlight-grid{grid-template-columns:minmax(0,1.22fr) repeat(3,minmax(0,1fr));column-gap:clamp(34px,4vw,76px)}.highlight-lead h3{max-width:390px;font-size:clamp(40px,3.35vw,56px)}}
.highlights-head h2{font-size:clamp(44px,4.6vw,66px)}
.highlight-icon{display:flex;width:76px;height:66px;margin:0 0 42px;align-items:center;color:#080908;fill:none;stroke:none}.highlight-lead .highlight-icon{width:82px;height:78px;margin-bottom:52px}.highlight-icon svg{display:block;width:100%;height:100%;overflow:visible}.highlight-icon svg path,.highlight-icon svg circle{fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:square;stroke-linejoin:miter}.highlight-icon-drop svg path{stroke-width:7}.highlight-icon-growth svg path{stroke-width:6}.highlight-icon-screens .screen-grid{fill:currentColor}.highlight-icon-screens .screen-grid rect{rx:1}.highlight-icon-checkout .eye-solid{fill:currentColor;stroke:none}.highlight-icon-checkout .eye-cut{fill:#f7f7f7;stroke:none}.highlight-icon-quality .badge-ring{stroke-width:4}.highlight-icon-quality svg path{stroke-width:7}.mark-word{position:relative;display:flex;align-items:flex-end;color:#080908;font-style:normal;font-weight:900;letter-spacing:-.12em;line-height:.78}.mark-word b,.mark-word i{font-style:normal}.mark-credit b{font-size:63px}.mark-credit i{margin-left:-7px;font-size:42px}.mark-credit:after{content:"";position:absolute;left:2px;right:-3px;bottom:-10px;height:5px;background:#080908}.mark-cx{gap:7px;letter-spacing:-.07em}.mark-cx b{font-size:48px}.mark-cx i{font-size:34px;font-weight:800}.highlight-card h3{font-size:clamp(27px,2.15vw,33px);line-height:1.08}.highlight-lead h3{font-size:clamp(45px,3.6vw,62px);line-height:.99}.highlight-card p{font-size:16px;line-height:1.48}.highlight-lead p{font-size:18px;line-height:1.52}.highlight-link{font-size:16px;font-weight:500;color:#a3a59f}
@media(max-width:700px){.highlight-icon{width:66px;height:58px}.highlight-lead .highlight-icon{width:72px;height:68px}.highlight-card h3{font-size:30px}.highlight-lead h3{font-size:48px}.highlight-card p{font-size:16px}}
.home-rd-active .site-header .brand-avatar{display:block;width:34px;height:34px;flex:0 0 34px}.home-rd-active .site-header .brand{padding-left:4px}.new-home-hero{padding-bottom:clamp(90px,12vh,150px)}
.new-home-hero{
width:min(calc(100% - 32px),1120px);
margin:0 auto;
padding:clamp(118px,14vh,154px) 20px clamp(72px,9vh,104px);
justify-content:center;
}
.new-home-copy{max-width:920px;margin-inline:auto}
.new-home-kicker{margin-bottom:18px}
.new-home-hero h1{
max-width:820px;
margin-inline:auto;
font-size:clamp(44px,5.35vw,74px);
line-height:.98;
letter-spacing:-.057em;
}
.new-home-hero h1 em{color:#74786f}
.new-home-copy>p{
max-width:610px;
margin-top:22px;
color:#5d6159;
font-size:clamp(15px,1.22vw,18px);
line-height:1.55;
}
.new-home-actions{margin-top:26px}
.new-home-actions a{min-height:46px}
.home-rd-active .home-work{
--work-card-bleed:clamp(12px,calc(50vw - 572px),72px);
margin-top:0;
padding-top:clamp(70px,8vw,104px);
padding-bottom:clamp(52px,6vw,82px);
}
.home-rd-active .home-work:before{
background:#f2f2ee;
border-color:rgba(17,19,16,.09);
box-shadow:none;
}
.home-rd-active .home-work .section-head{margin-bottom:clamp(28px,3.5vw,42px)}
.home-rd-active .home-work .section-head .eyebrow{color:#6d7169}
.home-rd-active .home-work .section-head h2{color:#111310}
.home-rd-active .home-work .section-head p{color:#5d6159}
.home-rd-active .home-work .project-card{
border-color:rgba(17,19,16,.1);
background:#fff;
box-shadow:0 1px 0 rgba(17,19,16,.03);
}
.home-rd-active .home-work .project-card:hover{
box-shadow:0 22px 48px rgba(17,19,16,.09);
}
.home-rd-active .home-work .project-card p{color:#5d6159}
@media(max-width:900px){
.new-home-hero{padding-top:clamp(112px,15vh,134px);padding-bottom:72px}
.new-home-hero h1{max-width:700px;font-size:clamp(42px,7.2vw,62px)}
.new-home-copy>p{max-width:560px}
}
@media(max-width:700px){
.new-home-hero{width:calc(100% - 24px);padding:110px 8px 62px}
.new-home-kicker{gap:6px;margin-bottom:16px;font-size:9px}
.new-home-kicker span+span:before{margin-right:6px}
.new-home-hero h1{font-size:clamp(39px,11vw,52px);line-height:1}
.new-home-copy>p{margin-top:19px;font-size:15px}
.new-home-actions{margin-top:23px}
.home-rd-active .home-work{padding-top:60px;padding-bottom:42px}
.home-rd-active .home-work .section-head h2{font-size:clamp(36px,10vw,44px)}
}

/* ===== harmony.css ===== */

.hm-case{--hm-accent:#77e89c;--hm-accent-ink:#27856c}
.hm-progress{position:sticky;top:0;z-index:40;height:3px;margin-bottom:-3px;background:transparent}
.hm-progress i{display:block;height:100%;background:var(--hm-accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .12s linear}
.hm-case .case-hero h1{max-width:16ch}
.hm-case .long-study .chapter p.hm-lead{font-size:clamp(18px,1.7vw,22px);line-height:1.55;text-wrap:pretty}
.hm-case .long-study .chapter p.hm-note{color:var(--muted);font-size:14px}
.hm-reveal,.hm-rail-node,.hm-metric,.hm-case .long-study .chapter .hm-validation-list li{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);transition-delay:calc(var(--i,0)*60ms)}
.hm-reveal.is-in,.hm-rail.is-in .hm-rail-node,.hm-metrics.is-in .hm-metric,.hm-case .long-study .chapter .hm-validation.is-in .hm-validation-list li,.hm-case .long-study .chapter .hm-validation-list li.is-in{opacity:1;transform:none}
.hm-fig{margin:26px 0;display:grid;gap:10px}
.hm-fig .hm-shot{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card);aspect-ratio:var(--ratio,16/10);cursor:default;transition:transform .3s ease,box-shadow .3s ease}
.hm-fig .hm-shot:focus-visible{outline:2px solid var(--hm-accent-ink);outline-offset:3px}
.hm-fig img{width:100%;height:100%;object-fit:cover;display:block}
.hm-missing{display:none}
.hm-fig.is-missing img{display:none}
.hm-fig.is-missing .hm-shot{cursor:default;background:repeating-linear-gradient(135deg,rgba(23,25,20,.03) 0 12px,transparent 12px 24px),var(--card)}
.hm-fig.is-missing .hm-missing{display:grid;place-items:center;position:absolute;inset:0;color:var(--muted);font-size:13px;letter-spacing:.02em}
.hm-case .long-study .chapter .hm-fig figcaption{color:var(--muted);font-size:14px;line-height:1.5}
.hm-fig-hero{margin:32px 0 0}
.hm-rail{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0 0;padding:0}
.hm-rail-node{position:relative;display:grid;gap:10px;padding:20px 18px;border:1px solid var(--line);border-radius:18px;background:var(--card);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .6s ease}
.hm-rail-node:hover,.hm-rail-node:focus-visible{transform:translateY(-4px);border-color:var(--hm-accent);box-shadow:var(--shadow);outline:none}
.hm-rail-dot{width:10px;height:10px;border:2px solid var(--hm-accent-ink);border-radius:50%;transition:background .25s ease}
.hm-rail-node:hover .hm-rail-dot,.hm-rail-node:focus-visible .hm-rail-dot{background:var(--hm-accent)}
.hm-rail-num{color:var(--hm-accent-ink);font-size:12px;font-weight:700;letter-spacing:.14em}
.hm-case .long-study .chapter .hm-rail-label{font-size:15px;line-height:1.4;text-wrap:pretty}
.hm-quote{margin:28px 0;padding:clamp(28px,4vw,52px)}
.hm-case .long-study .chapter .hm-quote p{margin:0;font-size:clamp(30px,3.6vw,52px);font-weight:600;line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.hm-sev{display:grid;gap:14px;margin:26px 0;padding:26px 24px;border:1px solid var(--line);border-radius:20px;background:var(--card)}
.hm-sev-row{display:grid;grid-template-columns:80px minmax(0,1fr) 44px;align-items:center;gap:16px}
.hm-sev-label{font-size:14px;font-weight:600}
.hm-sev-track{height:14px;border-radius:999px;background:rgba(23,25,20,.06);overflow:hidden}
.hm-sev-bar{display:block;height:100%;width:0;border-radius:999px;background:var(--c);transition:width .7s cubic-bezier(.2,.7,.3,1);transition-delay:calc(var(--i,0)*90ms)}
.hm-sev-val{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.hm-sev:hover .hm-sev-row{opacity:.4;transition:opacity .2s ease}
.hm-sev .hm-sev-row:hover{opacity:1}
.hm-case .long-study .chapter .hm-sev-total{grid-column:1/-1;margin:2px 0 0;color:var(--muted);font-size:13px}
.hm-pill{transition:box-shadow .25s ease}
.hm-pill:hover{box-shadow:inset 0 -2px 0 var(--hm-accent)}
.hm-rules{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 28px;margin:26px 0 0;padding:0}
.hm-case .long-study .chapter .hm-rules li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;text-wrap:pretty}
.hm-rules li span{color:var(--hm-accent-ink);font-size:12px;font-weight:700;letter-spacing:.08em;padding-top:3px}
.hm-type{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.hm-type-row{overflow:hidden;display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:baseline;gap:20px;padding:12px 0;border-bottom:1px solid var(--line);transition:transform .25s ease}
.hm-type-row:hover{transform:translateX(6px)}
.hm-type-name{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.hm-type-sample{line-height:1.18;letter-spacing:-.01em;min-width:0;overflow-wrap:break-word}
.hm-type-spec{color:var(--muted);font-size:12.5px;white-space:nowrap}
.hm-states{margin:26px 0;border:1px solid var(--line);border-radius:20px;background:var(--card);overflow:hidden}
.hm-states-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:10px;border-bottom:1px solid var(--line)}
.hm-state-tab{min-height:44px;padding:10px 16px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s ease,color .2s ease}
.hm-state-tab:hover{background:rgba(23,25,20,.05)}
.hm-state-tab.is-active{background:var(--hm-accent);color:#0d2b1f}
.hm-state-tab:focus-visible{outline:2px solid var(--hm-accent-ink);outline-offset:2px}
.hm-states-panel{display:grid;gap:14px;padding:28px 24px}
.hm-state-demo{display:flex;flex-wrap:wrap;align-items:center;gap:18px;transition:opacity .25s ease}
.hm-demo-btn{min-height:44px;padding:12px 22px;border:0;border-radius:12px;background:var(--ink);color:#fff;font:inherit;font-size:15px;font-weight:600}
.hm-demo-field{display:grid;gap:6px;min-width:220px}
.hm-demo-field span{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hm-demo-field input{min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:15px}
.hm-state-demo[data-state=hover] .hm-demo-btn{background:#2c3128}
.hm-state-demo[data-state=focus] .hm-demo-btn{box-shadow:0 0 0 3px rgba(119,232,156,.6)}
.hm-state-demo[data-state=focus] .hm-demo-field input{border-color:var(--hm-accent-ink);box-shadow:0 0 0 3px rgba(119,232,156,.35)}
.hm-state-demo[data-state=filled] .hm-demo-field input{border-color:var(--ink)}
.hm-state-demo[data-state=error] .hm-demo-field input{border-color:var(--coral);box-shadow:0 0 0 3px rgba(255,107,74,.2)}
.hm-state-demo[data-state=error] .hm-demo-btn{background:var(--coral)}
.hm-state-demo[data-state=disabled]{opacity:.45}
.hm-case .long-study .chapter .hm-state-caption{margin:0;color:var(--muted);font-size:13.5px}
.hm-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hm-grid-3 .hm-fig{margin:0}
.hm-tokens{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0 0;padding:0}
.hm-token{position:relative;display:grid;gap:4px;width:100%;min-height:72px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.hm-token:hover{transform:translateY(-3px);border-color:var(--hm-accent);box-shadow:var(--shadow)}
.hm-token:focus-visible{outline:2px solid var(--hm-accent-ink);outline-offset:2px}
.hm-token b{font-size:13px;font-weight:700;letter-spacing:-.01em}
.hm-token span{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.hm-token.is-copied::after{content:"Copied";position:absolute;top:8px;right:8px;padding:3px 9px;border-radius:999px;background:var(--hm-accent);color:#0d2b1f;font-size:11px;font-weight:700}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hm-phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0}
.hm-phase{display:grid;gap:8px;padding:20px 18px;border:1px solid var(--line);border-left:3px solid var(--hm-accent);border-radius:14px;background:var(--card)}
.hm-phase b{font-size:15px}
.hm-case .long-study .chapter .hm-phase span{color:var(--muted);font-size:14px;line-height:1.5;text-wrap:pretty}
.hm-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 28px;margin-top:16px}
.hm-doc{padding:16px 0;border-bottom:1px solid var(--line)}
.hm-doc b{display:block;margin-bottom:5px;font-size:14px}
.hm-case .long-study .chapter .hm-doc p{margin:0;color:var(--muted);font-size:14px;line-height:1.55;text-wrap:pretty}
.hm-validation{padding:clamp(28px,4vw,52px)}
.hm-case .long-study .chapter .hm-validation-lead{margin:0;font-size:clamp(17px,1.6vw,20px);line-height:1.5}
.hm-validation-list{list-style:none;display:grid;gap:14px;margin:26px 0;padding:0}
.hm-case .long-study .chapter .hm-validation-list li{position:relative;padding-left:26px;font-size:clamp(16px,1.5vw,19px);line-height:1.45;transition-delay:calc(var(--i)*120ms)}
.hm-validation-list li::before{content:"";position:absolute;top:.6em;left:0;width:10px;height:10px;border-radius:50%;background:var(--hm-accent)}
.hm-case .long-study .chapter .hm-validation-kicker{margin:0;font-size:clamp(24px,3vw,40px);font-weight:600;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.hm-case .long-study .chapter .hm-validation-note{margin:0 0 22px;color:rgba(255,255,255,.6);font-size:14px;line-height:1.55;max-width:56ch;text-wrap:pretty}
.hm-case .hm-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:28px 0 0;border:1px solid var(--line);border-radius:22px;background:var(--card);overflow:hidden}
.hm-case .hm-metric{display:grid;align-content:start;gap:10px;margin:0;padding:28px 24px 30px;border-radius:0;background:none}
.hm-case .hm-metric+.hm-metric{border-left:1px solid var(--line)}
.hm-case .hm-metric::before{content:"";width:34px;height:4px;border-radius:2px;background:var(--hm-accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*130ms + 250ms)}
.hm-metrics.is-in .hm-metric::before{transform:scaleX(1)}
.hm-case .hm-metric{transition-delay:calc(var(--i)*110ms)}
.hm-case .hm-metric strong{font-size:clamp(34px,3.4vw,54px);font-weight:650;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.hm-case .hm-metric b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.hm-case .long-study .chapter .hm-metric span{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5;max-width:22ch;text-wrap:pretty}
.hm-case .hm-metric:hover strong{color:var(--hm-accent-ink);transition:color .25s ease}
.hm-case .case-end.hm-end{padding:clamp(30px,4vw,46px);text-align:left;background:var(--ink);color:#fff;border-radius:28px}
.hm-case .long-study .chapter .hm-end-statement{margin:0 0 34px;color:#fff;font-size:clamp(26px,3.2vw,42px);font-weight:600;line-height:1.1;letter-spacing:-.03em;max-width:22ch;text-wrap:balance}
.hm-case .hm-end-statement em{font-style:normal;color:var(--hm-accent)}
.hm-end-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.hm-end-byline{display:grid;gap:3px}
.hm-end-byline b{font-size:16px;letter-spacing:-.01em}
.hm-end-byline span{color:rgba(255,255,255,.55);font-size:13.5px}
.hm-case .hm-end-cta{border-color:#fff;background:#fff;color:var(--ink)}
.hm-case .hm-end-cta:hover{background:var(--hm-accent);border-color:var(--hm-accent)}
@media(max-width:900px){
.hm-case .hm-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
.hm-case .hm-metric+.hm-metric{border-left:0}
.hm-case .hm-metric:nth-child(even){border-left:1px solid var(--line)}
.hm-case .hm-metric:nth-child(n+3){border-top:1px solid var(--line)}
.hm-rail{grid-template-columns:minmax(0,1fr)}
.hm-rules,.hm-docs{grid-template-columns:minmax(0,1fr)}
.hm-grid-3,.hm-phases{grid-template-columns:repeat(2,minmax(0,1fr))}
.hm-tokens{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
.hm-grid-3,.hm-phases{grid-template-columns:minmax(0,1fr)}
.hm-type-row{grid-template-columns:minmax(0,1fr);gap:6px}
.hm-type-spec{opacity:1;transform:none}
.hm-sev-row{grid-template-columns:64px minmax(0,1fr) 34px;gap:10px}
}
@media(prefers-reduced-motion:reduce){
.hm-reveal,.hm-rail-node,.hm-metric,.hm-case .long-study .chapter .hm-validation-list li{opacity:1;transform:none;transition:none}
.hm-progress i{transition:none}
}
.hm-case .hm-quote,
.hm-case .hm-validation{
border-color:transparent;
background:var(--ink);
color:#fff;
}
.hm-case .long-study .chapter .hm-quote p,
.hm-case .long-study .chapter .hm-validation-lead,
.hm-case .long-study .chapter .hm-validation-list li,
.hm-case .long-study .chapter .hm-validation-kicker{color:#fff}
.hm-case .long-study .chapter .hm-validation-lead{color:rgba(255,255,255,.72)}
.hm-case .finding.accent{
border-left:3px solid var(--hm-accent);
background:rgba(119,232,156,.1);
}
.hm-case .long-study .chapter .finding.accent p{color:var(--ink)}
.hm-token{min-width:0}
.hm-token b,.hm-token span{min-width:0;overflow-wrap:anywhere}
.hm-case .hm-tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.hm-case .hm-tag{padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);font-size:12.5px;font-weight:600;letter-spacing:-.005em}
.hm-micro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}
.hm-micro-item{display:grid;align-content:start;gap:8px;padding:20px 18px 22px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.hm-micro-item b{font-size:15px;letter-spacing:-.01em}
.hm-case .long-study .chapter .hm-micro-what{font-size:14px;line-height:1.5}
.hm-case .long-study .chapter .hm-micro-why{color:var(--muted);font-size:13.5px;line-height:1.5;text-wrap:pretty}
.hm-micro-stage{display:grid;place-items:center;min-height:96px;margin-bottom:6px;border-radius:14px;background:rgba(23,25,20,.04)}
.hm-micro-card{padding:12px 18px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:14px;font-weight:600;transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease}
.hm-micro-item[data-micro=lift]:hover .hm-micro-card{transform:translateY(-4px);box-shadow:var(--shadow)}
.hm-micro-btn{min-height:44px;padding:12px 20px;border:0;border-radius:12px;background:var(--ink);color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease}
.hm-micro-item[data-micro=press]:hover .hm-micro-btn{transform:scale(.97)}
.hm-micro-btn-ghost{border:1px solid var(--line);background:#fff;color:var(--ink)}
.hm-micro-btn-ghost:focus-visible,.hm-micro-item[data-micro=focus]:hover .hm-micro-btn-ghost{outline:none;box-shadow:0 0 0 3px rgba(119,232,156,.7)}
.hm-micro-skel{display:block;width:76%;height:14px;border-radius:999px;background:linear-gradient(90deg,rgba(23,25,20,.07) 25%,rgba(23,25,20,.14) 37%,rgba(23,25,20,.07) 63%);background-size:400% 100%}
.hm-micro-item[data-micro=load]:hover .hm-micro-skel{animation:hm-shimmer .9s linear infinite}
@keyframes hm-shimmer{from{background-position:100% 0}to{background-position:0 0}}
.hm-micro-confirm{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:600}
.hm-micro-confirm i{width:10px;height:10px;border:2px solid var(--hm-accent-ink);border-radius:50%;transition:background .22s ease,transform .22s ease}
.hm-micro-item[data-micro=confirm]:hover .hm-micro-confirm i{background:var(--hm-accent);transform:scale(1.15)}
@media(max-width:900px){.hm-micro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.hm-micro{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){
.hm-micro-card,.hm-micro-btn,.hm-micro-confirm i{transition:none}
.hm-micro-item[data-micro=lift]:hover .hm-micro-card,
.hm-micro-item[data-micro=press]:hover .hm-micro-btn,
.hm-micro-item[data-micro=confirm]:hover .hm-micro-confirm i{transform:none}
.hm-micro-item[data-micro=load]:hover .hm-micro-skel{animation:none}
}
.hm-case .hm-hero{align-items:center}
.hm-case .hm-hero>.hm-brandmark,.hm-case .hm-hero>.eyebrow,.hm-case .hm-hero>h1,.hm-case .hm-hero>p,.hm-case .hm-hero>.hm-tags{grid-column:1}
.hm-case .hm-hero>.hm-tags{margin-top:22px}
.hm-case .hm-hero .hm-tag{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:rgba(255,255,255,.74)}
.hm-hero-visual{grid-column:2;grid-row:1 / -1;align-self:center;display:grid;gap:14px;min-width:0}
.hm-hero-panel{position:relative;overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.14);background:radial-gradient(120% 100% at 20% 0%,#f7fbf8 0%,#e8f3ec 55%,#dcebe2 100%);aspect-ratio:5/4;box-shadow:0 40px 70px rgba(0,0,0,.34)}
.hm-hero-sheet{position:absolute;display:block;width:78%;height:auto;filter:drop-shadow(0 18px 26px rgba(16,43,41,.14))}
.hm-hero-sheet.is-back{top:-6%;right:-16%;width:70%;opacity:.7;animation:hm-drift 13s ease-in-out infinite alternate}
.hm-hero-sheet.is-front{bottom:-8%;left:-6%;animation:hm-drift 11s ease-in-out infinite alternate-reverse}
@keyframes hm-drift{from{transform:translateY(0)}to{transform:translateY(-14px)}}
.hm-hero-caption{display:flex;align-items:baseline;gap:10px;color:rgba(255,255,255,.62);font-size:12.5px;letter-spacing:.02em}
.hm-hero-caption b{color:#fff;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:980px){.hm-hero-visual{grid-column:1;grid-row:auto;margin-top:26px;max-width:560px}}
@media(prefers-reduced-motion:reduce){.hm-hero-sheet{animation:none}}
.hm-matrix{margin:28px 0 6px;display:grid;gap:16px}
.hm-roll-tabs{display:flex;flex-wrap:wrap;gap:10px}
.hm-roll-tab{display:grid;gap:3px;padding:12px 16px;min-height:44px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background .2s ease}
.hm-roll-tab b{font-size:14px;font-weight:700;letter-spacing:-.01em}
.hm-roll-tab span{color:var(--muted);font-size:12px}
.hm-roll-tab:hover{transform:translateY(-2px);border-color:var(--hm-accent);box-shadow:var(--shadow)}
.hm-roll-tab:focus-visible{outline:2px solid var(--hm-accent-ink);outline-offset:3px}
.hm-roll-tab.is-active{border-color:var(--hm-accent-ink);background:#eefaf2}
.hm-roll-tab.is-active span{color:var(--hm-accent-ink)}
.hm-mx-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--card);padding:6px 10px 10px}
.hm-mx{border-collapse:collapse;width:100%;min-width:700px;table-layout:fixed}
.hm-mx th,.hm-mx td{padding:0;border:0}
.hm-mx thead th{height:168px;vertical-align:bottom;padding-bottom:10px;transition:color .2s ease}
.hm-mx thead th span{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;color:var(--muted);font-size:11.5px;font-weight:600;letter-spacing:.01em}
.hm-mx .hm-mx-corner{width:168px;text-align:left;vertical-align:bottom;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.hm-mx tbody th[scope=row]{width:168px;padding:0 14px 0 2px;text-align:left;font-size:13.5px;font-weight:500;line-height:1.3;color:var(--ink);border-top:1px solid rgba(23,25,20,.07);height:38px;transition:color .2s ease}
.hm-mx-bandhead th{padding:16px 2px 8px!important;border-top:1px solid var(--line)!important;text-align:left;display:table-cell}
.hm-mx-bandhead b{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--hm-accent-ink)}
.hm-mx-bandhead span{margin-left:10px;color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.02em}
.hm-mx td{border-top:1px solid rgba(23,25,20,.07);height:38px;text-align:center;transition:background .2s ease}
.hm-mx td i{display:inline-block;width:7px;height:7px;border-radius:50%;background:rgba(23,25,20,.13);vertical-align:middle}
.hm-mx td.is-on i{width:11px;height:11px;background:var(--hm-accent-ink);box-shadow:0 0 0 4px rgba(119,232,156,.24)}
.hm-matrix .hm-mx td.is-on i{transform:scale(0);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.3,1),opacity .3s ease;transition-delay:var(--d,0ms)}
.hm-matrix.is-in .hm-mx td.is-on i{transform:scale(1);opacity:1}
.hm-mx td.is-cross,.hm-mx th.is-cross{background:rgba(119,232,156,.13)}
.hm-mx tr.is-cross th[scope=row]{color:var(--hm-accent-ink);font-weight:700}
.hm-mx th.is-cross span{color:var(--hm-accent-ink)}
.hm-mx-ship tr th[scope=row]{font-weight:700}
.hm-mx-ship td,.hm-mx-ship th{border-top:2px solid var(--line)!important;background:rgba(119,232,156,.06)}
.hm-mx-band{transition:opacity .3s ease}
.hm-mx-band.is-dim{opacity:.24}
.hm-case .long-study .chapter .hm-mx-legend{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:0;color:var(--muted);font-size:12.5px}
.hm-mx-key{display:inline-flex;align-items:center;gap:8px}
.hm-mx-key i{width:7px;height:7px;border-radius:50%;background:rgba(23,25,20,.16)}
.hm-mx-key.is-on i{width:11px;height:11px;background:var(--hm-accent-ink)}
.hm-mx-hint{margin-left:auto}
@media(max-width:700px){.hm-mx-hint{display:none}}
@media(prefers-reduced-motion:reduce){.hm-matrix .hm-mx td.is-on i{transform:none;opacity:1;transition:none}}
.hm-case .hm-brandmark{display:block;height:30px;width:auto;box-sizing:content-box;margin-bottom:18px;padding:10px 14px;border-radius:10px;background:#fff}
.hm-drift{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:26px 0 0;padding:30px 26px;border:1px solid var(--line);border-radius:20px;background:var(--card)}
.hm-drift-btn{display:inline-grid;place-items:center;min-height:42px;padding:12px 20px;border-radius:var(--r,8px);background:var(--bg,#1e8055);color:#fff;font-weight:600;line-height:1}
.hm-drift-btn.is-ghost{background:transparent;border:1px solid #1e8055;color:#1e8055}
.hm-fig-sheet .hm-shot{background:#fff}
.hm-fig-sheet img{object-fit:contain;padding:8px;box-sizing:border-box}
.hm-mood{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin:24px 0}
.hm-mood-tile{margin:0}
.hm-mood-tile:nth-child(1){grid-column:span 3}
.hm-mood-tile:nth-child(2){grid-column:span 3}
.hm-mood-tile:nth-child(3){grid-column:span 2}
.hm-mood-tile:nth-child(4){grid-column:span 2}
.hm-mood-tile:nth-child(5){grid-column:span 2}
.hm-mood-tile .hm-shot{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card);aspect-ratio:4/3;cursor:default;transition:transform .3s ease,box-shadow .3s ease}
.hm-mood-tile .hm-shot:focus-visible{outline:2px solid var(--hm-accent-ink);outline-offset:3px}
.hm-mood-tile img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:700px){
.hm-mood{grid-template-columns:repeat(2,minmax(0,1fr))}
.hm-mood-tile:nth-child(n){grid-column:span 1}
.hm-mood-tile:nth-child(1){grid-column:span 2}
}
.hm-case .hm-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:26px 0}
.hm-case .hm-board-cell{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:10px;padding:18px 18px 20px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.hm-case .hm-board-cell[style*="--span:2"]{grid-column:1/-1}
.hm-case .hm-board-label{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.hm-case .hm-board-stage{min-width:0;display:grid;place-items:center;justify-items:stretch;text-align:center;min-height:118px;padding:18px;border-radius:14px;background:rgba(23,25,20,.035)}
.hm-case .hm-board-row{justify-items:center;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.hm-case .hm-board-stack{display:grid;gap:14px;justify-items:stretch;width:100%}
.hm-case .hm-board,.hm-case .hm-stretch{--cb:#1e8055;--cb-dark:#166342}
.hm-case .hm-c-btn{min-height:40px;padding:11px 20px;border:0;border-radius:8px;background:var(--cb);color:#fff;font:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer;transition:background .2s ease,transform .12s ease}
.hm-case .hm-c-btn:hover{background:var(--cb-dark)}
.hm-case .hm-c-btn:active{transform:scale(.97)}
.hm-case .hm-c-btn:focus-visible{outline:2px solid var(--cb);outline-offset:2px}
.hm-case .hm-c-btn-lg{min-height:48px;padding:14px 26px;font-size:15px}
.hm-case .hm-c-btn-sm{min-height:34px;padding:9px 15px;font-size:13px}
.hm-case .hm-c-btn-ghost{border:1px solid var(--cb);background:transparent;color:var(--cb)}
.hm-case .hm-c-btn-ghost:hover{background:rgba(30,128,85,.08)}
.hm-case .hm-c-btn-danger{background:#d64545}
.hm-case .hm-c-btn-danger:hover{background:#b83a3a}
.hm-case .hm-c-btn-danger:focus-visible{outline-color:#d64545}
.hm-case .hm-c-field{display:grid;gap:6px;width:100%}
.hm-case .hm-c-field span{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.hm-case .hm-c-field input{min-height:44px;padding:11px 14px;border:1px solid rgba(23,25,20,.18);border-radius:8px;background:#fff;font:inherit;font-size:14px;color:var(--ink)}
.hm-case .hm-c-search{display:flex;align-items:center;gap:10px;min-height:44px;padding:11px 14px;border:1px solid rgba(23,25,20,.14);border-radius:999px;background:#fff;color:var(--muted);font-size:14px}
.hm-case .hm-c-search svg{width:17px;height:17px;flex:0 0 auto}
.hm-case .hm-c-pin{display:flex;gap:10px}
.hm-case .hm-c-pin-box{display:grid;place-items:center;width:42px;height:50px;border:1px solid rgba(23,25,20,.18);border-radius:8px;background:#fff;font-size:20px;line-height:1;color:var(--ink)}
.hm-case .hm-c-pin-box.is-filled{border-color:var(--cb)}
.hm-case .hm-c-pin-box.is-active{border-color:var(--cb);box-shadow:0 0 0 3px rgba(30,128,85,.22)}
.hm-case .hm-c-tabs{display:flex;justify-content:space-between;gap:0;width:100%;border-bottom:1px solid rgba(23,25,20,.12)}
.hm-case .hm-c-tabs span{flex:0 1 auto;padding:12px 12px;text-align:center;font-size:13px;font-weight:600;color:var(--muted)}
.hm-case .hm-c-tabs span.is-active{color:var(--cb);box-shadow:inset 0 -2px 0 var(--cb)}
.hm-case .hm-c-appbar{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;border-radius:8px;background:var(--cb);color:#fff}
.hm-case .hm-c-appbar b{flex:1;font-size:14px;font-weight:600}
.hm-case .hm-c-back,.hm-case .hm-c-appbar-act{opacity:.9;font-size:15px}
.hm-case .hm-c-fab{display:grid;place-items:center;justify-self:center;width:52px;height:52px;border-radius:50%;background:var(--cb);color:#fff;font-size:24px;line-height:1;box-shadow:0 8px 20px rgba(30,128,85,.35)}
.hm-case .hm-c-bottomnav{display:flex;width:100%;box-sizing:border-box;border-top:1px solid rgba(23,25,20,.1);background:#fff;border-radius:8px;overflow:hidden}
.hm-case .hm-c-bottomnav span{flex:1;padding:14px 8px;text-align:center;font-size:12px;font-weight:600;color:var(--muted)}
.hm-case .hm-c-bottomnav span.is-active{color:var(--cb);background:rgba(30,128,85,.08)}
.hm-case .hm-c-dialog{display:grid;gap:10px;width:100%;max-width:360px;padding:20px;border-radius:12px;background:#fff;box-shadow:0 18px 40px rgba(25,28,20,.16)}
.hm-case .hm-c-dialog b{font-size:16px;letter-spacing:-.01em}
.hm-case .long-study .chapter .hm-c-dialog p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.hm-case .hm-c-dialog-acts{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.hm-case .hm-stretch{display:grid;gap:16px;margin:22px 0}
.hm-case .hm-stretch-item{display:grid;gap:8px;width:var(--w,100%);max-width:100%}
.hm-case .hm-c-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.hm-case .hm-c-row-avatar{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:rgba(30,128,85,.14);color:var(--cb);font-size:15px;font-weight:700}
.hm-case .hm-c-row-text{display:grid;gap:2px;flex:1;min-width:0}
.hm-case .hm-c-row-text b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-case .hm-c-row-text small{color:var(--muted);font-size:12.5px}
.hm-case .hm-c-row-amt{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.hm-board-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.hm-live-state{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hm-live-state b{padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--hm-accent-ink);font-size:10.5px;letter-spacing:.04em}
.hm-live-state.is-tick b{animation:hm-chip .2s ease}
@keyframes hm-chip{50%{transform:scale(1.1)}}
.hm-case .long-study .chapter .hm-live-msg{margin:0;color:var(--muted);font-size:13px;line-height:1.5;transition:color .18s ease}
.hm-case .long-study .chapter .hm-live-msg.is-error{color:#b83a3a}
.hm-case .hm-amt{flex:1 1 200px;max-width:280px}
.hm-case .hm-amt-wrap{position:relative;display:flex;align-items:center}
.hm-case .hm-amt-wrap i{position:absolute;left:14px;color:var(--muted);font-style:normal;font-size:14px}
.hm-case .hm-amt-wrap input{width:100%;padding-left:42px}
.hm-case .hm-c-field input,.hm-case .hm-c-search{transition:border-color .18s ease,box-shadow .18s ease}
.hm-case .hm-c-field input:focus{outline:none;border-color:var(--cb,#1e8055);box-shadow:0 0 0 3px rgba(30,128,85,.18)}
.hm-case .hm-amt[data-state=hover] input{border-color:rgba(23,25,20,.4)}
.hm-case .hm-amt[data-state=filled] input{border-color:var(--ink)}
.hm-case .hm-amt[data-state=error] input,.hm-case .hm-amt[data-state=error] input:focus{border-color:#d64545;box-shadow:0 0 0 3px rgba(214,69,69,.14)}
.hm-case .hm-amt.is-disabled{opacity:.5}
.hm-case .hm-live-btn{display:inline-flex;align-items:center;gap:9px;min-width:170px;justify-content:center}
.hm-case .hm-live-btn .hm-spin{display:none;width:13px;height:13px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:hm-rot .7s linear infinite}
.hm-case .hm-live-btn.is-loading .hm-spin{display:inline-block}
.hm-case .hm-live-btn.is-loading{opacity:.85}
.hm-case .hm-live-btn.is-success{background:var(--cb-dark,#166342)}
.hm-case .hm-live-btn:disabled{cursor:default}
@keyframes hm-rot{to{transform:rotate(360deg)}}
.hm-case .hm-pin-live{cursor:pointer}
.hm-case .hm-c-pin-box{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.hm-case .hm-c-pin-box.is-ok{border-color:var(--cb,#1e8055);background:rgba(30,128,85,.08)}
.hm-case .hm-c-search input{flex:1;min-width:0;border:0;background:none;padding:0;font:inherit;font-size:14px;color:var(--ink)}
.hm-case .hm-c-search input:focus{outline:none}
.hm-case .hm-c-search:focus-within{border-color:var(--cb,#1e8055);box-shadow:0 0 0 3px rgba(30,128,85,.16)}
.hm-case .hm-c-tabs button{flex:0 1 auto;padding:12px;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:color .18s ease,box-shadow .18s ease}
.hm-case .hm-c-tabs button:hover{color:var(--ink)}
.hm-case .hm-c-tabs button.is-active{color:var(--cb,#1e8055);box-shadow:inset 0 -2px 0 var(--cb,#1e8055)}
.hm-case .hm-c-tabs button:focus-visible{outline:2px solid var(--cb,#1e8055);outline-offset:-2px}
.hm-case .long-study .chapter .hm-tab-panel{margin:0;font-size:13.5px;color:var(--muted)}
.hm-case .hm-tab-panel.is-swap{animation:hm-fadein .2s ease}
@keyframes hm-fadein{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.hm-case .hm-c-fab{border:0;cursor:pointer;font:inherit;font-size:24px;line-height:1;transition:transform .15s ease,background .18s ease}
.hm-case .hm-c-fab:hover{background:var(--cb-dark,#166342)}
.hm-case .hm-c-fab:active{transform:scale(.92)}
.hm-case .hm-c-fab:focus-visible{outline:2px solid var(--cb,#1e8055);outline-offset:3px}
.hm-case .hm-c-bottomnav button{flex:1;padding:14px 8px;border:0;background:#fff;text-align:center;font:inherit;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:color .18s ease,background .18s ease}
.hm-case .hm-c-bottomnav button:hover{color:var(--ink)}
.hm-case .hm-c-bottomnav button.is-active{color:var(--cb,#1e8055);background:rgba(30,128,85,.08)}
.hm-case .hm-c-bottomnav button:focus-visible{outline:2px solid var(--cb,#1e8055);outline-offset:-2px}
.hm-case .hm-dlg-stage{position:relative;justify-items:stretch}
.hm-case .hm-dlg-actions{display:flex;justify-content:flex-end;width:100%}
.hm-case .hm-c-row{transition:opacity .22s ease,transform .22s ease}
.hm-case .hm-c-row.is-removed{opacity:0;transform:translateY(-6px)}
.hm-case .hm-dlg-empty{display:flex;align-items:center;gap:10px;justify-content:center;width:100%;padding:18px;border:1px dashed var(--line);color:var(--muted);font-size:13.5px}
.hm-case .hm-dlg-reset{border:0;background:none;padding:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--hm-accent-ink);text-decoration:underline;cursor:pointer}
.hm-case .hm-dlg-overlay{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:14px;background:rgba(9,9,9,.32);opacity:0;pointer-events:none;transition:opacity .18s ease}
.hm-case [data-live=dialog].is-open .hm-dlg-overlay{opacity:1;pointer-events:auto}
.hm-case .hm-dlg-overlay .hm-c-dialog{transform:scale(.96);transition:transform .18s ease}
.hm-case [data-live=dialog].is-open .hm-dlg-overlay .hm-c-dialog{transform:none}
@media(prefers-reduced-motion:reduce){
.hm-case .hm-live-btn .hm-spin{animation-duration:1.5s}
.hm-case .hm-tab-panel.is-swap{animation:none}
.hm-live-state.is-tick b{animation:none}
}

/* ===== contact-polish.css ===== */

body.home-active footer#contact > section.footer-contact-panel {
position: relative;
isolation: isolate;
overflow: hidden;
color: #f7f6f2;
background:
radial-gradient(ellipse 72% 105% at 2% 98%, rgba(0, 112, 101, 0.42) 0%, rgba(0, 112, 101, 0.13) 44%, transparent 70%),
radial-gradient(ellipse 68% 92% at 102% -5%, rgba(225, 86, 70, 0.38) 0%, rgba(225, 86, 70, 0.11) 46%, transparent 72%),
linear-gradient(135deg, #1b2422 0%, #0d1211 54%, #211513 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.17) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 -1px 0 rgba(0, 0, 0, 0.24),
0 32px 78px rgba(18, 15, 12, 0.2),
0 12px 28px rgba(18, 15, 12, 0.12) !important;
}
body.home-active footer#contact > section.footer-contact-panel::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(118deg, rgba(255, 255, 255, 0.085), transparent 28%, transparent 70%, rgba(255, 255, 255, 0.04)),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 84px);
mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0.42));
}
body.home-active footer#contact > section.footer-contact-panel::after {
content: "";
position: absolute;
width: 18rem;
aspect-ratio: 1;
right: -7rem;
top: -9rem;
z-index: -1;
pointer-events: none;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 0 0 3.5rem rgba(255, 255, 255, 0.015),
0 0 0 7rem rgba(255, 255, 255, 0.012);
}
body.home-active footer#contact > section.footer-contact-panel h2 {
color: #faf9f6 !important;
text-shadow: 0 1px 22px rgba(255, 255, 255, 0.055);
}
body.home-active footer#contact > section.footer-contact-panel > p,
body.home-active footer#contact > section.footer-contact-panel .footer-contact-heading p {
color: rgba(247, 246, 242, 0.72) !important;
}
body.home-active footer#contact .footer-contact-panel .footer-contact-method {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.055)) !important;
border: 1px solid rgba(255, 255, 255, 0.16) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.11),
0 16px 36px rgba(0, 0, 0, 0.14) !important;
-webkit-backdrop-filter: blur(18px) saturate(135%);
backdrop-filter: blur(18px) saturate(135%);
transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
body.home-active footer#contact .footer-contact-panel .footer-contact-method :is(strong, a) {
color: #faf9f6 !important;
}
body.home-active footer#contact .footer-contact-panel .footer-contact-method :is(.footer-contact-label, small) {
color: rgba(247, 246, 242, 0.58) !important;
}
body.home-active footer#contact .footer-contact-panel .footer-copy-email {
color: #faf9f6 !important;
background: rgba(8, 12, 11, 0.28) !important;
border-color: rgba(255, 255, 255, 0.16) !important;
}
@media (hover: hover) and (pointer: fine) {
body.home-active footer#contact .footer-contact-panel .footer-contact-method:hover {
transform: translateY(-3px);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07)) !important;
border-color: rgba(255, 255, 255, 0.26) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 20px 42px rgba(0, 0, 0, 0.2) !important;
}
}
@media (max-width: 700px) {
body.home-active footer#contact > section.footer-contact-panel {
border-radius: 2rem;
background:
radial-gradient(ellipse 95% 82% at 0% 100%, rgba(0, 112, 101, 0.34), transparent 70%),
radial-gradient(ellipse 88% 74% at 105% 0%, rgba(225, 86, 70, 0.3), transparent 72%),
linear-gradient(145deg, #19211f 0%, #0c1110 58%, #1f1513 100%) !important;
}
}
@media (prefers-reduced-motion: reduce) {
body.home-active footer#contact .footer-contact-panel .footer-contact-method {
transition: none;
}
}
.site-footer .ft4 {
position: relative;
width: 100%;
display: grid;
gap: clamp(30px, 4vw, 52px);
padding: clamp(26px, 3.4vw, 48px);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 24px;
background:
radial-gradient(120% 130% at 92% -20%, rgba(255, 107, 74, .2), transparent 52%),
linear-gradient(158deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .022)),
#11140f;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 70px rgba(0, 0, 0, .3);
}
.site-footer .ft4-top {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
align-items: end;
gap: 10px clamp(32px, 5vw, 72px);
}
.site-footer .ft4-lead {
display: grid;
gap: 18px;
}
.site-footer .ft4-eyebrow {
color: var(--coral);
font-size: 12px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
}
.site-footer .ft4 h2 {
margin: 0;
color: #fff;
font-size: clamp(46px, 7vw, 92px);
font-weight: 700;
line-height: .92;
letter-spacing: -.045em;
}
.site-footer .ft4-sub {
max-width: 40ch;
margin: 0 0 clamp(4px, .8vw, 12px);
color: rgba(247, 246, 242, .66);
font-size: clamp(15px, 1.25vw, 18px);
line-height: 1.5;
text-wrap: pretty;
}
.site-footer .ft4-tiles {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.25fr) minmax(0, 1fr);
gap: 14px;
}
.site-footer .ft4-tile {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
min-height: 88px;
padding: 16px 18px;
border: 1px solid rgba(255, 255, 255, .13);
border-radius: 18px;
background: rgba(255, 255, 255, .045);
color: #fff;
text-decoration: none;
transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.site-footer a.ft4-tile:hover {
border-color: rgba(255, 255, 255, .3);
background: rgba(255, 255, 255, .085);
transform: translateY(-2px);
}
.site-footer a.ft4-tile:focus-visible,
.site-footer .ft4-copy:focus-visible {
outline: 2px solid var(--coral);
outline-offset: 3px;
}
.site-footer .ft4-tile-icon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 14px;
background: rgba(255, 255, 255, .06);
color: #fff;
}
.site-footer .ft4-tile-icon svg { width: 21px; height: 21px; }
.site-footer .ft4-tile-icon-solid {
border-color: transparent;
background: #faf9f6;
color: #11140f;
}
.site-footer .ft4-tile-text {
display: grid;
gap: 5px;
min-width: 0;
}
.site-footer .ft4-tile-text small {
color: rgba(247, 246, 242, .5);
font-size: 11px;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
}
.site-footer .ft4-tile-text a,
.site-footer .ft4-tile-text b {
overflow: hidden;
color: #fff;
font-size: clamp(16px, 1.5vw, 20px);
font-weight: 700;
letter-spacing: -.02em;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.site-footer .ft4-tile-text a:hover { color: #ff8a72; }
.site-footer .ft4-copy {
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 14px;
background: rgba(255, 255, 255, .05);
color: #fff;
cursor: pointer;
transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.site-footer .ft4-copy svg { width: 18px; height: 18px; }
.site-footer .ft4-copy:hover { border-color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .1); }
.site-footer .ft4-copy.is-copied { border-color: transparent; background: var(--coral); color: #fff; }
.site-footer .ft4-pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 15px;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
letter-spacing: -.005em;
white-space: nowrap;
}
.site-footer .ft4-pill svg { width: 13px; height: 13px; }
.site-footer a.ft4-tile:hover .ft4-pill { border-color: rgba(255, 255, 255, .48); }
.site-footer .ft4 .footer-copy-toast {
position: absolute;
top: auto;
left: auto;
width: max-content;
right: clamp(26px, 3.4vw, 48px);
bottom: clamp(20px, 2.4vw, 30px);
padding: 8px 14px;
border-radius: 999px;
background: var(--coral);
color: #fff;
font-size: 13px;
font-weight: 600;
opacity: 0;
transform: translateY(8px);
transition: opacity .22s ease, transform .22s ease;
pointer-events: none;
}
.site-footer .ft4 .footer-copy-toast.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 1280px) {
.site-footer .ft4-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.site-footer .ft4-tile-email { grid-column: 1 / -1; }
.site-footer .ft4-tiles .ft4-tile {
grid-template-columns: auto minmax(0, 1fr);
row-gap: 12px;
}
.site-footer .ft4-tiles .ft4-tile-email {
grid-template-columns: auto minmax(0, 1fr) auto;
row-gap: 0;
}
.site-footer .ft4-tiles .ft4-pill {
grid-column: 2;
justify-self: start;
}
}
@media (max-width: 860px) {
.site-footer .ft4-top { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; }
.site-footer .ft4-sub { margin-bottom: 0; }
}
@media (max-width: 620px) {
.site-footer .ft4 { border-radius: 20px; }
.site-footer .ft4-tiles { grid-template-columns: minmax(0, 1fr); }
.site-footer .ft4-tile { min-height: 78px; gap: 13px; padding: 14px 15px; }
.site-footer .ft4-tile-icon { width: 40px; height: 40px; border-radius: 12px; }
.site-footer .ft4 .footer-copy-toast { right: auto; left: clamp(20px, 3vw, 26px); }
}

/* ===== hero.css ===== */

body.home-active {
background: #f3f0ea;
--page-gutter: clamp(24px, 5.6vw, 96px);
--page-card: min(calc(100% - var(--page-gutter)), 1600px);
--page-bleed: clamp(12px, calc(50vw - var(--page-gutter) / 2 - 720px), 80px);
--page-content: calc(var(--page-card) - 2 * var(--page-bleed));
--page-inset: max(var(--page-bleed), 28px);
--page-card-x: calc((100% - var(--page-card)) / 2);
}
body.home-active .home-work,
body.home-active .home-timeline,
body.home-active .home-archive-section {
--work-card-bleed: var(--page-bleed);
width: var(--page-content);
margin-inline: auto;
padding-inline: max(0px, calc(var(--page-inset) - var(--page-bleed)));
}
body.home-active .site-header {
margin-top: calc(var(--page-gutter) / 2);
}
body.home-active .site-footer {
padding-inline: var(--page-card-x);
}
body.home-active .home-hero .home-inline-cta,
body.home-active .home-hero .home-talk-pill,
body.home-active .home-hero .home-resume-link {
translate: none;
will-change: auto;
}
body.home-active .home-hero {
--hero-ease: cubic-bezier(.22, 1, .36, 1);
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
width: var(--page-card);
min-height: calc(100svh - var(--page-gutter));
justify-content: flex-start;
margin: -88px auto clamp(18px, 2vw, 32px);
padding-block: clamp(148px, 16vh, 214px) clamp(44px, 5.5vh, 76px);
padding-inline: var(--page-inset);
overflow: hidden;
border: 1px solid rgba(255, 122, 109, 0.26);
border-radius: 38px;
color: #f8f6f2;
background:
radial-gradient(ellipse 50% 72% at 94% 14%, rgba(109, 43, 36, 0.42), transparent 72%),
radial-gradient(ellipse 42% 64% at 4% 18%, rgba(4, 37, 31, 0.34), transparent 70%),
linear-gradient(115deg, #060a08 0%, #070706 48%, #180d0a 100%);
box-shadow: 0 28px 64px rgba(31, 24, 16, 0.14);
}
body.home-active .home-hero::after {
content: "";
position: absolute;
inset: -20%;
z-index: -1;
pointer-events: none;
border-radius: inherit;
background:
radial-gradient(ellipse 34% 38% at 22% 78%, rgba(29, 92, 78, 0.22), transparent 70%),
radial-gradient(ellipse 36% 40% at 78% 26%, rgba(150, 46, 38, 0.24), transparent 70%);
animation: hero-drift 26s ease-in-out infinite alternate;
will-change: transform;
}
body.home-active .home-hero .home-hero-grain {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
border-radius: inherit;
opacity: 0.055;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
background-size: 180px 180px;
}
@keyframes hero-drift {
0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
50%  { transform: translate3d(3%, -2.5%, 0) rotate(2deg) scale(1.04); }
100% { transform: translate3d(-2.5%, 2%, 0) rotate(-1.5deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
body.home-active .home-hero::after { animation: none; }
}
body.home-active .home-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
display: block;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(circle 46vmax at var(--hero-pointer-x, 50%) var(--hero-pointer-y, 46%),
rgba(255, 108, 88, 0.20) 0%,
rgba(244, 94, 75, 0.11) 26%,
rgba(244, 94, 75, 0.035) 52%,
transparent 74%),
linear-gradient(115deg, rgba(255, 255, 255, 0.03), transparent 38%, rgba(244, 94, 75, 0.05));
opacity: 0.72;
transition: opacity 0.6s ease;
}
body.home-active .home-hero.is-hero-pointer-active::before {
opacity: 1;
}
body.home-active .home-hero-meta {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
margin-block: 0 clamp(40px, 6vh, 84px);
color: rgba(248, 246, 242, 0.66);
font-size: clamp(0.75rem, 0.76vw, 0.92rem);
font-weight: 700;
letter-spacing: 0.15em;
line-height: 1.3;
text-transform: uppercase;
margin-bottom: clamp(36px, 5vh, 56px);
}
body.home-active .home-hero-content {
max-width: none;
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 0;
}
body.home-active #home-hero-title {
max-width: 32ch; 
margin: 0;
color: #f8f6f2;
font-size: clamp(3.4rem, 4.6vw, 5.9rem);
font-weight: 500;
letter-spacing: -0.045em;
line-height: 1.12;
text-align: left;
text-wrap: pretty;
}
body.home-active #home-hero-title em {
font-style: normal;
font-weight: inherit;
}
body.home-active #home-hero-title .home-status,
body.home-active #home-hero-title .home-inline-cta,
body.home-active #home-hero-title .home-talk-pill {
transform: translateY(0);
display: inline-flex;
align-items: center;
justify-content: flex-start;
width: auto;
min-width: 0;
min-height: 0;
margin-inline: 0.1em;
border-radius: 999px;
font-family: inherit;
font-size: clamp(0.88rem, 0.9vw, 1.18rem);
font-style: normal;
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
transition:
transform 0.26s cubic-bezier(.33, 1, .68, 1),
background-color 0.22s ease,
border-color 0.22s ease,
box-shadow 0.26s cubic-bezier(.33, 1, .68, 1),
color 0.22s ease;
}
body.home-active #home-hero-title .home-status {
gap: 0.6em;
padding: 0.84em 1.36em;
color: #151816;
background: #f7f4ef;
border: 1px solid rgba(255, 255, 255, 0.7);
}
body.home-active #home-hero-title .home-status i {
width: 0.62em;
height: 0.62em;
border-radius: 999px;
background: #f45e4b;
box-shadow: 0 0 0 0 rgba(244, 94, 75, 0.5);
animation: hero-status-pulse 2.6s ease-out infinite;
}
body.home-active #home-hero-title .home-inline-cta {
gap: 0.68em;
padding: 0.8em 1.28em;
color: #f8f6f2;
background: rgba(8, 11, 9, 0.72);
border: 1px solid rgba(248, 246, 242, 0.32);
backdrop-filter: blur(14px);
}
body.home-active #home-hero-title .home-inline-cta .home-eye {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9em;
height: 1.9em;
border-radius: 999px;
border: 1px solid rgba(248, 246, 242, 0.36);
transition: border-color 0.22s ease, background-color 0.22s ease;
}
body.home-active #home-hero-title .home-inline-cta .home-eye::after {
content: "";
width: 0.42em;
height: 0.42em;
border-radius: 999px;
background: #f8f6f2;
transform: translate(var(--eye-x, 0px), var(--eye-y, 0px));
}
body.home-active #home-hero-title .home-talk-pill {
gap: 0.6em;
padding: 0.78em 0.82em 0.78em 1.3em;
color: #111411;
background: #f7f4ef;
border: 1px solid rgba(255, 255, 255, 0.7);
}
body.home-active #home-hero-title .home-talk-pill .home-talk-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9em;
height: 1.9em;
border-radius: 999px;
font-style: normal;
font-size: 0.82em;
color: #111411;
background: rgba(17, 20, 17, 0.08);
transition: transform 0.26s cubic-bezier(.33, 1, .68, 1), background-color 0.22s ease, color 0.22s ease;
}
body.home-active #home-hero-title .home-status,
body.home-active #home-hero-title .home-inline-cta,
body.home-active #home-hero-title .home-talk-pill,
body.home-active .home-resume-link,
body.home-active .site-header .brand,
body.home-active .site-header nav a {
min-height: 44px;
}
body.home-active .site-header nav a {
display: inline-flex;
align-items: center;
}
body.home-active #home-hero-title .home-status:hover {
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(6, 8, 7, 0.34);
}
body.home-active #home-hero-title .home-inline-cta:hover {
transform: translateY(-2px);
background: rgba(16, 21, 18, 0.9);
border-color: rgba(255, 137, 116, 0.6);
box-shadow: 0 10px 30px rgba(244, 94, 75, 0.18);
}
body.home-active #home-hero-title .home-inline-cta:hover .home-eye {
transform: none;
border-color: rgba(255, 137, 116, 0.85);
background: rgba(244, 94, 75, 0.16);
}
body.home-active #home-hero-title .home-inline-cta:hover .home-eye::after {
transform: translate(var(--eye-x, 0px), var(--eye-y, 0px));
}
body.home-active #home-hero-title .home-talk-pill:hover {
transform: translateY(-2px);
color: #fff6f3;
background: #f0503c;
border-color: rgba(255, 190, 178, 0.55);
box-shadow: 0 12px 32px rgba(240, 80, 60, 0.34);
}
body.home-active #home-hero-title .home-talk-pill:hover .home-talk-icon {
transform: translate(0.18em, -0.18em);
color: #d8402d;
background: #fff6f3;
}
body.home-active #home-hero-title .home-status:active,
body.home-active #home-hero-title .home-inline-cta:active,
body.home-active #home-hero-title .home-talk-pill:active {
transform: translateY(0);
}
body.home-active .home-hero :focus-visible {
outline: 2px solid #ff8974;
outline-offset: 3px;
}
body.home-active #home-hero-title .home-status:focus-visible,
body.home-active #home-hero-title .home-inline-cta:focus-visible,
body.home-active #home-hero-title .home-talk-pill:focus-visible,
body.home-active .home-resume-link:focus-visible {
border-radius: 999px;
}
@keyframes hero-status-pulse {
0% { box-shadow: 0 0 0 0 rgba(244, 94, 75, 0.45); }
70% { box-shadow: 0 0 0 0.5em rgba(244, 94, 75, 0); }
100% { box-shadow: 0 0 0 0 rgba(244, 94, 75, 0); }
}
body.home-active #home-hero-title .home-into-pair {
white-space: nowrap; 
}
@media (max-width: 620px) {
body.home-active #home-hero-title .home-into-pair {
white-space: normal; 
}
}
body.home-active #home-hero-title .home-rotating-phrase {
display: inline;
color: inherit;
white-space: normal;
}
body.home-active #home-hero-title .home-rotating-suffix {
display: inline;
}
body.home-active #home-hero-title .home-rotating-group {
display: inline;
color: #ff756b;
white-space: normal; 
}
body.home-active #home-hero-title .home-rotating-comma {
color: #ff756b;
}
body.home-active #home-hero-title .home-rotating-word {
position: relative;
display: inline-block;
box-sizing: content-box;
height: 1.04em;
padding-top: 0.14em;
padding-bottom: 0.14em;
margin-top: -0.14em;
margin-bottom: -0.14em;
margin-right: -4px;          
overflow: hidden;
vertical-align: -0.19em;  
color: #ff756b;
transition: width 0.18s cubic-bezier(.33, 1, .68, 1);
}
body.home-active #home-hero-title .home-rotating-word::before {
content: "momentum";
display: inline-block;
visibility: hidden;
white-space: nowrap;
pointer-events: none;
}
body.home-active #home-hero-title .home-rotating-word > span {
color: #ff756b;
background: none;
-webkit-text-fill-color: currentColor;
animation: none !important;
}
body.home-active #home-hero-title .home-rotating-suffix {
color: #f8f6f2;
font-weight: inherit;
}
body.home-active .home-hero-note {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 40px;
margin-top: clamp(44px, 6.5vh, 92px);
padding-top: clamp(24px, 2.8vh, 38px);
border-top: 1px solid rgba(248, 246, 242, 0.2);
}
body.home-active .home-hero-note p {
max-width: 56ch;
margin: 0;
color: rgba(248, 246, 242, 0.68);
font-size: clamp(1rem, 1.05vw, 1.3rem);
line-height: 1.55;
text-wrap: pretty;
}
body.home-active .home-resume-link {
display: inline-flex;
align-items: center;
gap: 0.4em;
color: #f8f6f2;
font-weight: 700;
white-space: nowrap;
transition: color 0.22s ease, transform 0.26s cubic-bezier(.33, 1, .68, 1);
}
body.home-active .home-resume-link span {
transition: transform 0.42s var(--hero-ease);
}
body.home-active .home-resume-link:hover {
color: #ff9387;
}
body.home-active .home-resume-link:hover span {
transform: translate(0.2em, -0.2em);
}
@keyframes hero-rise {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-rise-soft {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-pill-in {
from { opacity: 0; transform: translateY(10px) scale(0.94); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
body.home-active .site-header,
body.home-active .home-hero:not(.is-hero-entered) .home-hero-meta,
body.home-active .home-hero:not(.is-hero-entered) #home-hero-title,
body.home-active .home-hero:not(.is-hero-entered) .home-hero-note {
animation: hero-rise 0.72s var(--hero-ease, cubic-bezier(.22, 1, .36, 1)) both;
}
body.home-active .site-header { animation-delay: 0.04s; animation-name: hero-rise-soft; }
body.home-active .home-hero:not(.is-hero-entered) .home-hero-meta { animation-delay: 0.16s; animation-name: hero-rise-soft; }
body.home-active .home-hero:not(.is-hero-entered) #home-hero-title { animation-delay: 0.26s; }
body.home-active .home-hero:not(.is-hero-entered) .home-hero-note { animation-delay: 0.62s; animation-name: hero-rise-soft; }
body.home-active .home-hero:not(.is-hero-entered) #home-hero-title .home-status,
body.home-active .home-hero:not(.is-hero-entered) #home-hero-title .home-inline-cta,
body.home-active .home-hero:not(.is-hero-entered) #home-hero-title .home-talk-pill {
animation: hero-pill-in 0.6s var(--hero-ease) both;
}
body.home-active .home-hero:not(.is-hero-entered) #home-hero-title .home-status { animation-delay: 0.44s; }
body.home-active .home-hero:not(.is-hero-entered) #home-hero-title .home-inline-cta { animation-delay: 0.52s; }
body.home-active .home-hero:not(.is-hero-entered) #home-hero-title .home-talk-pill { animation-delay: 0.6s; }
@media (max-width: 1180px) {
body.home-active #home-hero-title {
max-width: 24ch;
font-size: clamp(3rem, 5.4vw, 4.6rem);
}
}
@media (max-width: 999px) {
body.home-active .home-hero {
min-height: auto;
margin: -88px auto 18px;
padding-block: clamp(130px, 18vw, 168px) clamp(36px, 7vw, 60px);
border-radius: 34px;
}
body.home-active .home-hero-meta {
margin-bottom: clamp(36px, 8vw, 60px);
font-size: clamp(0.75rem, 1.8vw, 0.8rem);
letter-spacing: 0.12em;
}
body.home-active #home-hero-title {
max-width: none;
font-size: clamp(2.9rem, 7.6vw, 4.6rem);
line-height: 1.08;
}
body.home-active #home-hero-title .home-status,
body.home-active #home-hero-title .home-inline-cta,
body.home-active #home-hero-title .home-talk-pill {
font-size: clamp(0.82rem, 1.9vw, 0.95rem);
vertical-align: middle;
}
body.home-active .home-hero-note {
grid-template-columns: 1fr;
align-items: start;
gap: 20px;
margin-top: clamp(36px, 8vw, 60px);
}
}
@media (max-width: 620px) {
body.home-active .home-hero {
margin-top: -68px;
padding-block: clamp(112px, 28vw, 142px) 32px;
border-radius: 28px;
}
body.home-active .home-hero-meta {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
body.home-active #home-hero-title {
font-size: clamp(2.3rem, 9.4vw, 3.4rem);
letter-spacing: -0.045em;
line-height: 1.12;
}
body.home-active #home-hero-title .home-status,
body.home-active #home-hero-title .home-inline-cta,
body.home-active #home-hero-title .home-talk-pill {
margin-inline: 0.06em;
font-size: 0.85rem;
vertical-align: middle;
}
body.home-active #home-hero-title .home-inline-cta .home-eye,
body.home-active #home-hero-title .home-talk-pill .home-talk-icon {
width: 1.7em;
height: 1.7em;
}
}
@media (hover: none), (pointer: coarse) {
body.home-active .home-hero::before {
background:
radial-gradient(ellipse 70% 60% at 86% 12%, rgba(255, 108, 88, 0.2), transparent 70%),
linear-gradient(115deg, rgba(255, 255, 255, 0.03), transparent 38%, rgba(244, 94, 75, 0.05));
}
}
@media (prefers-reduced-motion: reduce) {
body.home-active .site-header,
body.home-active .home-hero-meta,
body.home-active #home-hero-title,
body.home-active .home-hero-note,
body.home-active #home-hero-title .home-status,
body.home-active #home-hero-title .home-inline-cta,
body.home-active #home-hero-title .home-talk-pill,
body.home-active #home-hero-title .home-status i {
animation: none !important;
opacity: 1;
transform: none;
}
body.home-active #home-hero-title .home-rotating-word {
width: auto !important;
height: auto;
overflow: visible;
transition: none;
}
body.home-active #home-hero-title .home-rotating-word::before {
content: none;
}
body.home-active #home-hero-title .home-rotating-word > span:not(:first-child) {
display: none !important;
}
body.home-active #home-hero-title .home-rotating-word > span:first-child {
position: static !important;
display: inline !important;
opacity: 1 !important;
filter: none !important;
transform: none !important;
}
}
body.home-active .footer-contact-panel {
width: 100%;
}
body.home-active .footer-contact-copy a,
body.home-active .footer-contact-copy strong {
display: inline-flex;
align-items: center;
min-height: 44px;
}
body.home-active .footer-copy-email {
width: 44px;
height: 44px;
flex-basis: 44px;
}
@media (max-width: 430px) {
body.home-active .site-header {
margin-top: calc(var(--page-gutter) / 2);
}
body.home-active .site-footer {
padding-inline: var(--page-card-x);
}
}
.shot-lightbox-panel img {
width: auto;
max-width: min(92vw, 1800px, var(--shot-natural, 1800px));
max-height: 82vh;
height: auto;
object-fit: contain;
image-rendering: auto;
}

/* ===== eyewa-editorial.css ===== */

body.eyewa-case-active {
--kfh-ink: #090909;
--kfh-muted: #5f5e66;
--kfh-paper: #ffffff;
--kfh-soft: #f7f7f6;
--kfh-line: #e5e5e3;
--kfh-accent: #cf3f30;
--kfh-accent-dark: #c33a2d;
--kfh-accent-soft: #fff1ee;
--ink: var(--kfh-ink);
--muted: var(--kfh-muted);
--paper: var(--kfh-paper);
--card: var(--kfh-paper);
--line: var(--kfh-line);
--coral: var(--kfh-accent);
background: var(--kfh-paper);
color: var(--kfh-ink);
}
.eyewa-case-active .site-header a:focus-visible,
.eyewa-case-active .menu-toggle:focus-visible,
.eyewa-case-active .media-open:focus-visible,
.eyewa-case-active .rail-controls button:focus-visible,
.eyewa-case-active .study-deep-dive summary:focus-visible,
.eyewa-case-active .document-link:focus-visible,
.eyewa-case-active .gif-toggle:focus-visible,
.eyewa-case-active .finding-replay:focus-visible,
.eyewa-case-active .mobile-toc-trigger:focus-visible {
outline: 3px solid var(--kfh-accent);
outline-offset: 3px;
}
.eyewa-case-active .case {
width: min(calc(100% - 48px), 1280px);
padding: 22px 0 128px;
}
.eyewa-case-active .case .case-hero {
grid-template-columns: minmax(0, .84fr) minmax(460px, 1.16fr);
min-height: min(600px, calc(100vh - 260px));
gap: 18px clamp(32px, 5vw, 72px);
padding: clamp(20px, 3vw, 36px) 0 clamp(48px, 6vw, 80px);
border-bottom: 1px solid var(--kfh-line);
border-radius: 0;
background: var(--kfh-paper);
color: var(--kfh-ink);
overflow: hidden;
}
.eyewa-case-active .case .case-hero::after {
display: none;
}
.eyewa-case-active .case .case-hero > .eyebrow {
color: var(--kfh-accent);
}
.eyewa-case-active .case .case-hero > h1 {
max-width: 680px;
color: var(--kfh-ink);
font-size: clamp(48px, 5.5vw, 76px);
line-height: .96;
letter-spacing: -.065em;
}
.eyewa-case-active .case .case-hero > p {
max-width: 570px;
color: var(--kfh-muted);
font-size: clamp(18px, 1.55vw, 21px);
line-height: 1.55;
}
.eyewa-case-active .case-hero-visual img {
filter: none;
}
.eyewa-case-active .case-hero-visual .media-open:hover img {
filter: none;
}
.eyewa-case-active .case-impact-summary {
display: block;
padding: clamp(80px, 10vw, 138px) 0 clamp(72px, 9vw, 116px);
border-bottom: 1px solid var(--kfh-line);
}
.eyewa-case-active .impact-summary-copy {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr);
column-gap: clamp(40px, 7vw, 100px);
align-items: end;
}
.eyewa-case-active .impact-summary-copy .eyebrow {
grid-column: 1 / -1;
color: var(--kfh-accent);
}
.eyewa-case-active .impact-summary-copy h2 {
max-width: 800px;
margin: 16px 0 0;
color: var(--kfh-ink);
font-size: clamp(46px, 5.8vw, 78px);
line-height: .98;
letter-spacing: -.065em;
}
.eyewa-case-active .impact-summary-copy p {
margin: 0;
color: var(--kfh-muted);
font-size: 17px;
line-height: 1.65;
}
.eyewa-case-active .case-jump {
grid-column: 2;
justify-self: start;
margin-top: 20px;
color: var(--kfh-accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 6px;
}
.eyewa-case-active .case-impact-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(24px, 3vw, 44px);
margin-top: clamp(58px, 7vw, 88px);
}
.eyewa-case-active .case-impact-grid > .impact-card,
.eyewa-case-active .case-impact-grid > div.impact-onboarding,
.eyewa-case-active .case-impact-grid > div.impact-adoption,
.eyewa-case-active .case-impact-grid > div.impact-delivery,
.eyewa-case-active .case-impact-grid > div.impact-deadlines {
position: relative;
display: grid;
min-height: 0;
align-content: start;
padding: 22px 0 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--kfh-ink);
}
.eyewa-case-active .case-impact-grid .impact-card::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--kfh-ink);
content: '';
transform: scaleX(0);
transform-origin: left center;
transition: transform .78s cubic-bezier(.22, .68, 0, 1);
transition-delay: calc(var(--impact-order) * 90ms);
}
.eyewa-case-active .case-impact-grid.is-visible .impact-card::before,
.eyewa-case-active .case-impact-grid:not(.editorial-reveal) .impact-card::before {
transform: scaleX(1);
}
.eyewa-case-active .case-impact-grid .impact-index {
margin: 0;
color: var(--kfh-accent);
font-size: 11px;
font-weight: 700;
letter-spacing: .16em;
opacity: 1;
text-transform: uppercase;
}
.eyewa-case-active .case-impact-grid .impact-card strong {
display: flex;
margin: clamp(28px, 3.4vw, 52px) 0 0;
align-items: baseline;
color: var(--kfh-ink);
font-size: clamp(52px, 5.6vw, 86px);
font-weight: 600;
line-height: .9;
letter-spacing: -.055em;
font-variant-numeric: tabular-nums;
}
.eyewa-case-active .case-impact-grid .impact-card strong span {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
}
.eyewa-case-active .case-impact-grid .impact-unit {
font-size: .46em;
letter-spacing: -.02em;
}
.eyewa-case-active .case-impact-grid .impact-caption {
margin-top: 14px;
color: var(--kfh-ink);
font-size: 15px;
font-weight: 500;
line-height: 1.35;
text-wrap: pretty;
}
.eyewa-case-active .impact-track {
position: relative;
height: 4px;
margin-top: clamp(22px, 2.6vw, 34px);
background: rgba(20, 20, 18, .09);
}
.eyewa-case-active .impact-track i,
.eyewa-case-active .impact-track b {
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: scaleX(0);
transform-origin: left center;
transition: transform 1.05s cubic-bezier(.22, .68, 0, 1);
transition-delay: calc(var(--impact-order) * 90ms + 180ms);
}
.eyewa-case-active .impact-track i {
width: var(--impact-from, 0%);
background: rgba(20, 20, 18, .22);
}
.eyewa-case-active .impact-track b {
width: var(--impact-to, 0%);
background: var(--kfh-accent);
transition-delay: calc(var(--impact-order) * 90ms + 340ms);
}
.eyewa-case-active .impact-track-solo b {
transition-delay: calc(var(--impact-order) * 90ms + 200ms);
}
.eyewa-case-active .case-impact-grid.is-visible .impact-track i,
.eyewa-case-active .case-impact-grid.is-visible .impact-track b,
.eyewa-case-active .case-impact-grid:not(.editorial-reveal) .impact-track i,
.eyewa-case-active .case-impact-grid:not(.editorial-reveal) .impact-track b {
transform: scaleX(1);
}
.eyewa-case-active .impact-foot {
display: flex;
margin-top: 14px;
align-items: center;
gap: 10px;
color: var(--kfh-muted);
font-size: 12px;
letter-spacing: .01em;
}
.eyewa-case-active .impact-was {
font-variant-numeric: tabular-nums;
}
.eyewa-case-active .impact-delta {
padding: 3px 8px;
border: 1px solid var(--kfh-accent);
border-radius: 999px;
color: var(--kfh-accent);
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
}
.eyewa-case-active .metric-arrow {
padding-inline: .07em;
color: var(--kfh-accent);
}
.eyewa-case-active .case-facts {
gap: 36px;
margin: 0 0 clamp(92px, 11vw, 150px);
}
.eyewa-case-active .fact {
padding: 26px 0 0;
border-top: 1px solid var(--kfh-line);
color: var(--kfh-muted);
}
.eyewa-case-active .fact b {
color: var(--kfh-ink);
font-size: 17px;
}
.eyewa-case-active .long-study {
grid-template-columns: 218px minmax(0, 900px);
gap: clamp(52px, 7vw, 96px);
justify-content: space-between;
padding: 0;
}
.eyewa-case-active .study-toc {
top: 108px;
padding-top: 20px;
border-top: 1px solid var(--kfh-line);
}
.eyewa-case-active .study-toc > .eyebrow {
margin-bottom: 14px;
}
.eyewa-case-active .toc-links {
display: grid;
gap: 0;
}
.eyewa-case-active .study-toc a {
min-height: 44px;
padding: 9px 0 9px 14px !important;
border: 0;
border-left: 2px solid transparent;
border-radius: 0;
background: transparent;
color: var(--kfh-muted);
line-height: 1.25;
}
.eyewa-case-active .study-toc a:hover {
color: var(--kfh-ink);
}
.eyewa-case-active .study-toc a.active {
border-left-color: var(--kfh-accent);
background: transparent;
color: var(--kfh-ink) !important;
font-weight: 750;
}
.eyewa-case-active .mobile-toc-trigger {
display: none;
}
.eyewa-case-active .chapter,
.eyewa-case-active .chapter.dark,
.eyewa-case-active .chapter.accent {
margin: 0;
padding: 24px 0 clamp(100px, 11vw, 148px);
border-top: 1px solid var(--kfh-line);
border-radius: 0;
background: transparent;
color: var(--kfh-ink);
scroll-margin-top: 104px;
}
.eyewa-case-active .chapter-num,
.eyewa-case-active .chapter.accent .chapter-num {
color: var(--kfh-accent);
}
.eyewa-case-active .long-study .chapter .chapter-title {
max-width: 800px;
margin: 14px 0 28px;
color: var(--kfh-ink);
font-size: clamp(48px, 5.8vw, 76px);
line-height: .98;
letter-spacing: -.065em;
}
.eyewa-case-active .long-study .chapter .section-title {
max-width: 760px;
margin: clamp(72px, 9vw, 108px) 0 22px;
padding-top: 24px;
border-top: 1px solid var(--kfh-line);
color: var(--kfh-ink);
font-size: clamp(32px, 3.7vw, 48px);
line-height: 1.04;
letter-spacing: -.045em;
}
.eyewa-case-active .long-study .chapter h3 {
max-width: 740px;
margin: 50px 0 14px;
color: var(--kfh-ink);
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.18;
letter-spacing: -.025em;
}
.eyewa-case-active .chapter p,
.eyewa-case-active .chapter li,
.eyewa-case-active .chapter.dark p,
.eyewa-case-active .chapter.dark li,
.eyewa-case-active .chapter.accent p,
.eyewa-case-active .chapter.accent li {
max-width: 68ch;
color: var(--kfh-muted);
font-size: 17px;
line-height: 1.75;
}
.eyewa-case-active .chapter .chapter-lede {
max-width: 62ch;
margin-bottom: 44px;
color: var(--kfh-muted);
font-size: clamp(19px, 2vw, 23px);
line-height: 1.58;
}
.eyewa-case-active .content-columns {
gap: 28px;
margin-block: 32px;
}
.eyewa-case-active .content-card {
padding: 22px 0 0;
border: 0;
border-top: 1px solid var(--kfh-line);
border-radius: 0;
background: transparent;
}
.eyewa-case-active .content-card h3 {
margin-top: 0;
}
.eyewa-case-active .research-overview {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
margin: 36px 0 72px;
}
.eyewa-case-active .research-overview > div {
min-height: 0;
padding: 20px 0 0;
border: 0;
border-top: 1px solid var(--kfh-ink);
border-radius: 0;
background: transparent;
}
.eyewa-case-active .research-overview span {
margin-bottom: 34px;
color: var(--kfh-accent);
}
.eyewa-case-active .research-overview strong {
font-size: 19px;
}
.eyewa-case-active .research-overview p,
.eyewa-case-active .decision-track p {
color: var(--kfh-muted) !important;
}
.eyewa-case-active .priority-decision {
margin: 38px 0 66px;
}
.eyewa-case-active .priority-decision > .eyebrow {
color: var(--kfh-accent);
}
.eyewa-case-active .decision-track {
gap: 18px;
margin-top: 28px;
}
.eyewa-case-active .decision-track > div,
.eyewa-case-active .chapter.accent .decision-track > div,
.eyewa-case-active .chapter.accent .decision-track > div:last-child {
min-height: 225px;
padding: 20px 0 0;
border: 0;
border-top: 1px solid var(--kfh-line);
border-radius: 0;
background: transparent;
color: var(--kfh-ink);
}
.eyewa-case-active .decision-track > div:last-child {
border-top-color: var(--kfh-accent);
}
.eyewa-case-active .decision-track b,
.eyewa-case-active .decision-track > div:last-child b,
.eyewa-case-active .decision-track > div:last-child p {
color: var(--kfh-muted) !important;
}
.eyewa-case-active .decision-track > div:last-child b,
.eyewa-case-active .decision-track > div:last-child strong {
color: var(--kfh-accent) !important;
}
.eyewa-case-active .decision-track strong {
margin: 42px 0 14px;
font-size: 21px;
}
.eyewa-case-active .finding-grid,
.eyewa-case-active .chapter.dark .verified-findings {
gap: 18px;
margin-top: 36px;
}
.eyewa-case-active .finding,
.eyewa-case-active .chapter.dark .verified-findings .finding {
min-height: 196px;
padding: 28px;
border: 1px solid var(--kfh-line);
border-radius: 14px;
background: var(--kfh-soft);
color: var(--kfh-ink);
}
.eyewa-case-active .finding strong,
.eyewa-case-active .chapter.dark .verified-findings .finding strong {
display: flex;
align-items: baseline;
margin: 0 0 26px;
color: var(--kfh-accent);
font-size: clamp(54px, 5.4vw, 72px);
line-height: .9;
letter-spacing: -.055em;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.eyewa-case-active .finding strong > span,
.eyewa-case-active .chapter.dark .verified-findings .finding strong > span {
display: inline;
color: inherit;
font-size: inherit;
line-height: inherit;
}
.eyewa-case-active .finding strong > span:last-child,
.eyewa-case-active .chapter.dark .verified-findings .finding strong > span:last-child {
margin-left: .08em;
font-size: .52em;
line-height: 1;
letter-spacing: -.02em;
}
.eyewa-case-active .finding > span,
.eyewa-case-active .chapter.dark .verified-findings .finding > span {
color: var(--kfh-muted);
font-size: 17px;
line-height: 1.45;
}
.eyewa-case-active .feature-adoption-story {
margin-top: 34px;
padding: clamp(28px, 4vw, 48px);
border: 1px solid var(--kfh-line);
border-radius: 18px;
background: var(--kfh-paper);
}
.eyewa-case-active .adoption-story-heading {
display: flex;
justify-content: space-between;
gap: 24px;
align-items: baseline;
padding-bottom: 24px;
border-bottom: 1px solid var(--kfh-line);
}
.eyewa-case-active .adoption-story-heading .eyebrow {
color: var(--kfh-accent);
}
.eyewa-case-active .adoption-story-heading p {
margin: 0;
color: var(--kfh-muted);
font-size: 15px;
}
.eyewa-case-active .adoption-comparison {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: clamp(18px, 3vw, 36px);
align-items: center;
padding-top: 34px;
}
.eyewa-case-active .adoption-state {
min-width: 0;
padding: clamp(24px, 3vw, 34px);
border: 1px solid var(--kfh-line);
border-radius: 14px;
background: var(--kfh-soft);
}
.eyewa-case-active .adoption-after {
border-color: rgba(207, 63, 48, .26);
background: var(--kfh-accent-soft);
}
.eyewa-case-active .adoption-state > span {
color: var(--kfh-muted);
font-size: 12px;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
.eyewa-case-active .adoption-state strong {
display: flex;
align-items: baseline;
margin: 24px 0 6px;
color: var(--kfh-ink);
font-size: clamp(58px, 7vw, 92px);
line-height: .86;
letter-spacing: -.07em;
white-space: nowrap;
}
.eyewa-case-active .adoption-state strong span {
margin-left: .07em;
font-size: .48em;
letter-spacing: -.02em;
}
.eyewa-case-active .adoption-state p {
margin: 0;
color: var(--kfh-muted);
font-size: 16px;
}
.eyewa-case-active .adoption-track {
height: 7px;
margin-top: 32px;
overflow: hidden;
border-radius: 999px;
background: rgba(9, 9, 9, .09);
}
.eyewa-case-active .adoption-track i {
display: block;
width: calc(var(--adoption-progress) * 100%);
height: 100%;
border-radius: inherit;
background: var(--kfh-muted);
transform: scaleX(0);
transform-origin: left;
transition: transform 1.1s cubic-bezier(.2, .72, .2, 1) .25s;
}
.eyewa-case-active .adoption-after .adoption-track i {
background: var(--kfh-accent);
}
.eyewa-case-active .feature-adoption-story.is-visible .adoption-track i {
transform: scaleX(1);
}
.eyewa-case-active .adoption-direction {
display: grid;
justify-items: center;
gap: 8px;
color: var(--kfh-accent);
}
.eyewa-case-active .adoption-direction span {
font-size: 36px;
line-height: 1;
}
.eyewa-case-active .adoption-direction small {
max-width: 88px;
color: var(--kfh-muted);
font-size: 10px;
font-weight: 800;
line-height: 1.25;
letter-spacing: .1em;
text-align: center;
text-transform: uppercase;
}
.eyewa-case-active .adoption-scale {
display: flex;
justify-content: space-between;
margin-top: 14px;
color: var(--kfh-muted);
font-size: 11px;
}
.eyewa-case-active .adoption-chart {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
grid-template-rows: minmax(330px, 34vw) auto;
column-gap: 14px;
row-gap: 20px;
padding-top: 38px;
}
.eyewa-case-active .adoption-y-axis {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
padding-bottom: 1px;
color: var(--kfh-muted);
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.eyewa-case-active .adoption-plot {
position: relative;
min-width: 0;
border-bottom: 1px solid var(--kfh-ink);
border-left: 1px solid var(--kfh-line);
background: repeating-linear-gradient(
to top,
transparent 0,
transparent calc(25% - 1px),
var(--kfh-line) calc(25% - 1px),
var(--kfh-line) 25%
);
}
.eyewa-case-active .adoption-bars {
position: absolute;
inset: 0 clamp(26px, 7vw, 92px);
display: grid;
grid-template-columns: repeat(2, minmax(70px, 1fr));
gap: clamp(42px, 10vw, 150px);
align-items: end;
}
.eyewa-case-active .adoption-bar {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.eyewa-case-active .adoption-bar strong {
margin-bottom: 12px;
color: var(--kfh-ink);
font-size: clamp(34px, 5vw, 58px);
line-height: .9;
letter-spacing: -.06em;
white-space: nowrap;
}
.eyewa-case-active .adoption-bar strong span {
margin-left: .06em;
font-size: .52em;
letter-spacing: -.02em;
}
.eyewa-case-active .adoption-bar-fill {
display: block;
width: min(100%, 150px);
height: var(--bar-height);
min-height: 10px;
border-radius: 8px 8px 0 0;
background: var(--kfh-muted);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 1.05s cubic-bezier(.2, .72, .2, 1) .2s;
}
.eyewa-case-active .adoption-bar-after .adoption-bar-fill {
background: var(--kfh-accent);
}
.eyewa-case-active .feature-adoption-story.is-visible .adoption-bar-fill {
transform: scaleY(1);
}
.eyewa-case-active .adoption-chart-labels {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(42px, 10vw, 150px);
padding: 0 clamp(26px, 7vw, 92px);
text-align: center;
}
.eyewa-case-active .adoption-chart-labels div {
display: grid;
gap: 4px;
}
.eyewa-case-active .adoption-chart-labels strong {
color: var(--kfh-ink);
font-size: 12px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.eyewa-case-active .adoption-chart-labels span {
color: var(--kfh-muted);
font-size: 13px;
}
.eyewa-case-active .research-finding-story {
position: relative;
isolation: isolate;
margin-top: 34px;
overflow: hidden;
padding: clamp(28px, 4vw, 48px);
border: 1px solid rgba(255, 255, 255, .11);
border-radius: 18px;
background: var(--kfh-ink);
color: var(--kfh-paper);
}
.eyewa-case-active .research-finding-story::before {
position: absolute;
z-index: -1;
top: -34%;
right: -15%;
width: 56%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(207, 63, 48, .28), transparent 68%);
content: "";
}
.eyewa-case-active .research-finding-story::after {
position: absolute;
z-index: 4;
inset: -20% auto -20% -30%;
width: 18%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
content: "";
opacity: 0;
pointer-events: none;
transform: skewX(-18deg);
}
.eyewa-case-active .finding-story-meta {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: center;
padding-bottom: 24px;
border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.eyewa-case-active .finding-story-meta .eyebrow {
color: #ff9a8e;
}
.eyewa-case-active .finding-replay {
min-height: 44px;
padding: 0 17px;
border: 1px solid rgba(255, 255, 255, .26);
border-radius: 999px;
background: transparent;
color: var(--kfh-paper);
cursor: pointer;
font-size: 12px;
font-weight: 750;
transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.eyewa-case-active .finding-replay:hover {
border-color: rgba(255, 255, 255, .7);
background: rgba(255, 255, 255, .08);
transform: translateY(-2px);
}
.eyewa-case-active .finding-story-stage {
display: grid;
grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr);
gap: clamp(28px, 5vw, 70px);
align-items: center;
padding: clamp(34px, 5vw, 64px) 0;
}
.eyewa-case-active .finding-gauge {
position: relative;
width: min(100%, 310px);
aspect-ratio: 1;
justify-self: center;
}
.eyewa-case-active .finding-gauge::after {
position: absolute;
inset: 18%;
border: 1px solid rgba(255, 154, 142, .34);
border-radius: 50%;
content: "";
opacity: 0;
}
.eyewa-case-active .finding-gauge svg {
width: 100%;
height: 100%;
overflow: visible;
transform: rotate(-90deg);
}
.eyewa-case-active .finding-gauge circle {
fill: none;
stroke-width: 16;
}
.eyewa-case-active .finding-gauge-track {
stroke: rgba(255, 255, 255, .12);
}
.eyewa-case-active .finding-gauge-progress {
stroke: #ff796b;
stroke-dasharray: 52 100;
stroke-dashoffset: 52;
stroke-linecap: round;
transition: stroke-dashoffset 1.15s cubic-bezier(.2, .72, .2, 1) .12s;
}
.eyewa-case-active .finding-gauge .finding-gauge-marker {
fill: var(--kfh-paper);
stroke: var(--kfh-ink);
stroke-width: 3;
opacity: 0;
transform: rotate(0deg);
transform-origin: 110px 110px;
transition: opacity .3s ease .9s, transform 1.15s cubic-bezier(.2, .72, .2, 1) .12s;
}
.eyewa-case-active .finding-score {
position: absolute;
inset: 0;
display: grid;
place-content: center;
text-align: center;
}
.eyewa-case-active .finding-score strong {
color: var(--kfh-paper);
font-size: clamp(68px, 8vw, 100px);
line-height: .82;
letter-spacing: -.07em;
font-variant-numeric: tabular-nums;
}
.eyewa-case-active .finding-score span {
margin-top: 14px;
color: rgba(255, 255, 255, .58);
font-size: 11px;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
.eyewa-case-active .finding-story-copy {
padding-left: clamp(24px, 4vw, 54px);
border-left: 1px solid rgba(255, 255, 255, .14);
}
.eyewa-case-active .finding-story-copy > * {
opacity: 0;
transform: translateY(14px);
transition: opacity .55s ease, transform .55s cubic-bezier(.2, .72, .2, 1);
}
.eyewa-case-active .finding-status {
display: inline-flex;
min-height: 34px;
align-items: center;
padding: 0 13px;
border: 1px solid rgba(255, 154, 142, .4);
border-radius: 999px;
background: rgba(207, 63, 48, .16);
color: #ffb0a7;
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.eyewa-case-active .finding-story-copy h4 {
margin: 28px 0 12px;
color: var(--kfh-paper);
font-size: clamp(36px, 5vw, 62px);
line-height: .96;
letter-spacing: -.055em;
}
.eyewa-case-active .finding-story-copy p {
max-width: 510px;
margin: 0;
color: rgba(255, 255, 255, .69);
font-size: clamp(16px, 1.6vw, 19px);
line-height: 1.55;
}
.eyewa-case-active .finding-story-copy .finding-range {
margin-bottom: 22px;
color: #ff9a8e;
font-size: 13px;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
.eyewa-case-active .finding-benchmark {
padding: 24px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 14px;
background: rgba(255, 255, 255, .05);
}
.eyewa-case-active .finding-benchmark > div:first-child {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 20px;
}
.eyewa-case-active .finding-benchmark > div:first-child span {
color: rgba(255, 255, 255, .58);
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.eyewa-case-active .finding-benchmark > div:first-child strong {
color: var(--kfh-paper);
font-size: 25px;
}
.eyewa-case-active .finding-benchmark-track {
height: 8px;
margin: 16px 0 18px;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, .11);
}
.eyewa-case-active .finding-benchmark-track i {
display: block;
width: 60%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #ff9a8e, #cf3f30);
transform: scaleX(0);
transform-origin: left;
transition: transform .9s cubic-bezier(.2, .72, .2, 1) .72s;
}
.eyewa-case-active .finding-benchmark p {
margin: 0;
color: rgba(255, 255, 255, .78);
font-size: 15px;
}
.eyewa-case-active .chapter .research-finding-story .finding-story-copy p {
color: rgba(255, 255, 255, .72);
}
.eyewa-case-active .chapter .research-finding-story .finding-story-copy .finding-range {
color: #ff9a8e;
}
.eyewa-case-active .chapter .research-finding-story .finding-benchmark p {
color: rgba(255, 255, 255, .78);
}
.eyewa-case-active .research-finding-story.finding-animate::after {
animation: finding-sweep .85s cubic-bezier(.2, .72, .2, 1) .08s both;
}
.eyewa-case-active .research-finding-story.finding-animate .finding-gauge-progress {
stroke-dashoffset: 0;
}
.eyewa-case-active .research-finding-story.finding-animate .finding-gauge-marker {
opacity: 1;
transform: rotate(187.2deg);
}
.eyewa-case-active .research-finding-story.finding-animate .finding-gauge::after {
animation: finding-pulse 1s ease .72s both;
}
.eyewa-case-active .research-finding-story.finding-animate .finding-story-copy > * {
opacity: 1;
transform: none;
}
.eyewa-case-active .research-finding-story.finding-animate .finding-story-copy > :nth-child(1) {
transition-delay: .3s;
}
.eyewa-case-active .research-finding-story.finding-animate .finding-story-copy > :nth-child(2) {
transition-delay: .4s;
}
.eyewa-case-active .research-finding-story.finding-animate .finding-story-copy > :nth-child(3) {
transition-delay: .5s;
}
.eyewa-case-active .research-finding-story.finding-animate .finding-story-copy > :nth-child(4) {
transition-delay: .6s;
}
.eyewa-case-active .research-finding-story.finding-animate .finding-benchmark-track i {
transform: scaleX(1);
}
.eyewa-case-active .research-finding-story.finding-reset::after {
animation: none;
opacity: 0;
}
.eyewa-case-active .research-finding-story.finding-reset .finding-gauge-progress {
stroke-dashoffset: 52;
transition: none;
}
.eyewa-case-active .research-finding-story.finding-reset .finding-gauge-marker {
opacity: 0;
transform: rotate(0deg);
transition: none;
}
.eyewa-case-active .research-finding-story.finding-reset .finding-gauge::after {
animation: none;
opacity: 0;
}
.eyewa-case-active .research-finding-story.finding-reset .finding-story-copy > * {
opacity: 0;
transform: translateY(14px);
transition: none;
}
.eyewa-case-active .research-finding-story.finding-reset .finding-benchmark-track i {
transform: scaleX(0);
transition: none;
}
@keyframes finding-sweep {
0% { left: -30%; opacity: 0; }
20% { opacity: 1; }
100% { left: 118%; opacity: 0; }
}
@keyframes finding-pulse {
0% { opacity: 0; transform: scale(.72); }
45% { opacity: .85; }
100% { opacity: 0; transform: scale(1.45); }
}
.eyewa-case-active .research-synthesis {
margin: 74px 0 0;
padding: clamp(30px, 5vw, 54px);
border: 1px solid var(--kfh-line);
border-radius: 16px;
background: var(--kfh-soft);
color: var(--kfh-ink);
}
.eyewa-case-active .research-synthesis .eyebrow {
color: var(--kfh-accent);
}
.eyewa-case-active .research-synthesis h3 {
color: var(--kfh-ink);
}
.eyewa-case-active .research-synthesis p {
border-color: var(--kfh-line);
border-radius: 10px;
color: var(--kfh-muted) !important;
}
.eyewa-case-active .research-synthesis .synthesis-decision {
border: 0;
border-left: 3px solid var(--kfh-accent);
border-radius: 0;
background: var(--kfh-accent-soft);
color: var(--kfh-ink) !important;
}
.eyewa-case-active .result-panel {
gap: 0;
margin: 30px 0 52px;
padding: 0;
border: 0;
border-block: 1px solid var(--kfh-line);
border-radius: 0;
background: transparent;
box-shadow: none;
}
.eyewa-case-active .result-panel > div {
min-height: 240px;
padding: 30px;
border-radius: 0;
background: var(--kfh-soft);
}
.eyewa-case-active .result-panel .result-after,
.eyewa-case-active .result-onboarding .result-after,
.eyewa-case-active .result-adoption .result-after {
background: var(--kfh-accent-soft);
color: var(--kfh-ink);
}
.eyewa-case-active .result-panel .result-after p,
.eyewa-case-active .result-panel .result-after .eyebrow {
color: var(--kfh-ink) !important;
}
.eyewa-case-active .result-panel .result-after .eyebrow {
color: var(--kfh-accent-dark) !important;
opacity: 1;
}
.eyewa-case-active .result-panel strong {
color: var(--kfh-ink);
font-variant-numeric: tabular-nums;
}
.eyewa-case-active .result-arrow {
display: grid;
place-items: center;
align-self: stretch;
width: 74px;
background: var(--kfh-paper);
color: var(--kfh-accent);
}
.eyewa-case-active .media-block {
margin: 42px 0 72px;
}
.eyewa-case-active .media-heading {
margin-bottom: 16px;
padding-top: 18px;
border-top: 1px solid var(--kfh-line);
}
.eyewa-case-active .media-heading figcaption {
color: var(--kfh-ink);
}
.eyewa-case-active .media-heading p {
color: var(--kfh-muted);
}
.eyewa-case-active .media-open {
border-color: var(--kfh-line);
border-radius: 14px;
background: var(--kfh-paper);
box-shadow: none;
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.eyewa-case-active .media-open:hover {
border-color: #c9c9c5;
box-shadow: 0 16px 40px rgba(9, 9, 9, .08);
transform: translateY(-2px);
}
.eyewa-case-active .media-open img {
border-radius: 9px;
}
.eyewa-case-active .logo-grid {
gap: 10px;
}
.eyewa-case-active .logo-grid .media-static {
border-color: var(--kfh-line);
background: var(--kfh-soft);
cursor: default;
}
.eyewa-case-active .logo-grid .media-static:hover {
border-color: var(--kfh-line);
box-shadow: none;
transform: none;
}
.eyewa-case-active .rail-controls button {
border-color: var(--kfh-line);
background: var(--kfh-paper);
}
.eyewa-case-active .rail-controls button:hover {
border-color: var(--kfh-ink);
background: var(--kfh-ink);
}
.eyewa-case-active .gif-stage {
position: relative;
}
.eyewa-case-active .gif-block .media-open {
padding: 10px;
background: var(--kfh-soft);
}
.eyewa-case-active .gif-toggle {
position: absolute;
left: 22px;
bottom: 22px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 16px;
border: 1px solid rgba(255, 255, 255, .35);
border-radius: 999px;
background: rgba(9, 9, 9, .86);
color: #fff;
font-size: 12px;
font-weight: 750;
cursor: pointer;
backdrop-filter: blur(10px);
}
.eyewa-case-active .gif-block.is-paused .gif-toggle {
background: var(--kfh-accent);
}
.eyewa-case-active .motion-note {
color: var(--kfh-muted) !important;
}
.eyewa-case-active .product-analysis-layout {
margin: 58px 0 38px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.eyewa-case-active .product-analysis-layout .media-product {
margin: 0;
}
.eyewa-case-active .diagram-motion-stage {
position: relative;
grid-column: 1 / -1;
overflow: hidden;
border-radius: 14px;
isolation: isolate;
}
.eyewa-case-active .diagram-motion-stage .media-open {
position: relative;
z-index: 0;
}
.eyewa-case-active .diagram-motion-stage.diagram-motion-ready .media-open img {
opacity: 0;
clip-path: inset(0 100% 0 0);
transform: scale(.985);
}
.eyewa-case-active .diagram-motion-stage.diagram-motion-ready.is-diagram-animated .media-open img {
animation: kfh-diagram-reveal 1.7s cubic-bezier(.16, 1, .3, 1) forwards;
}
.eyewa-case-active .diagram-motion-stage .media-open::after {
position: absolute;
z-index: 2;
top: 10px;
bottom: 10px;
left: -12%;
width: 12%;
background: linear-gradient(90deg, transparent, rgba(207, 63, 48, .2), rgba(255, 255, 255, .82), transparent);
content: "";
opacity: 0;
pointer-events: none;
transform: skewX(-12deg);
}
.eyewa-case-active .diagram-motion-stage.is-diagram-animated .media-open::after {
animation: kfh-diagram-scan 1.8s .12s cubic-bezier(.22, .72, .2, 1) both;
}
.eyewa-case-active .diagram-pulse {
position: absolute;
z-index: 3;
width: 18px;
height: 18px;
border: 2px solid var(--kfh-accent);
border-radius: 50%;
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) scale(.45);
}
.eyewa-case-active .diagram-motion-stage.is-diagram-animated .diagram-pulse {
animation: kfh-diagram-pulse .72s cubic-bezier(.16, 1, .3, 1) both;
}
.eyewa-case-active .diagram-motion-stage.is-diagram-animated .pulse-one { animation-delay: .28s; }
.eyewa-case-active .diagram-motion-stage.is-diagram-animated .pulse-two { animation-delay: .58s; }
.eyewa-case-active .diagram-motion-stage.is-diagram-animated .pulse-three { animation-delay: .88s; }
.eyewa-case-active .diagram-motion-stage.is-diagram-animated .pulse-four { animation-delay: 1.18s; }
.eyewa-case-active .diagram-motion-stage.is-diagram-animated .pulse-five { animation-delay: 1.48s; }
.eyewa-case-active .diagram-process .pulse-one { top: 17%; left: 19%; }
.eyewa-case-active .diagram-process .pulse-two { top: 18%; left: 50%; }
.eyewa-case-active .diagram-process .pulse-three { top: 47%; left: 50%; }
.eyewa-case-active .diagram-process .pulse-four { top: 58%; left: 78%; }
.eyewa-case-active .diagram-process .pulse-five { top: 79%; left: 72%; }
.eyewa-case-active .diagram-workflow .pulse-one { top: 50%; left: 11%; }
.eyewa-case-active .diagram-workflow .pulse-two { top: 50%; left: 31%; }
.eyewa-case-active .diagram-workflow .pulse-three { top: 50%; left: 50%; }
.eyewa-case-active .diagram-workflow .pulse-four { top: 50%; left: 69%; }
.eyewa-case-active .diagram-workflow .pulse-five { top: 50%; left: 87%; }
.eyewa-case-active .diagram-replay {
position: absolute;
z-index: 4;
right: 24px;
bottom: 24px;
display: inline-flex;
min-height: 42px;
align-items: center;
gap: 8px;
padding: 0 15px;
border: 1px solid rgba(255, 255, 255, .42);
border-radius: 999px;
background: rgba(9, 9, 9, .82);
color: #fff;
font-size: 12px;
font-weight: 750;
cursor: pointer;
backdrop-filter: blur(10px);
}
.eyewa-case-active .diagram-replay:hover {
background: var(--kfh-accent);
}
.eyewa-case-active .diagram-replay:focus-visible {
outline: 3px solid var(--kfh-accent);
outline-offset: 3px;
}
@keyframes kfh-diagram-reveal {
0% { opacity: .16; clip-path: inset(0 100% 0 0); transform: scale(.985); }
35% { opacity: .72; }
100% { opacity: 1; clip-path: inset(0); transform: scale(1); }
}
@keyframes kfh-diagram-scan {
0% { left: -12%; opacity: 0; }
15% { opacity: 1; }
84% { opacity: .9; }
100% { left: 106%; opacity: 0; }
}
@keyframes kfh-diagram-pulse {
0% { opacity: 0; box-shadow: 0 0 0 0 rgba(207, 63, 48, .34); transform: translate(-50%, -50%) scale(.45); }
35% { opacity: 1; }
100% { opacity: 0; box-shadow: 0 0 0 18px rgba(207, 63, 48, 0); transform: translate(-50%, -50%) scale(1); }
}
.eyewa-case-active .review-card {
border-radius: 14px;
background: var(--kfh-ink);
}
.eyewa-case-active .document-link {
border-color: var(--kfh-ink);
background: var(--kfh-ink);
color: #fff;
}
.eyewa-case-active .document-link:hover {
border-color: var(--kfh-accent);
background: var(--kfh-accent);
}
.eyewa-case-active .study-deep-dive,
.eyewa-case-active .chapter.dark .study-deep-dive {
border-color: var(--kfh-line);
border-radius: 12px;
background: var(--kfh-paper);
}
.eyewa-case-active .deep-dive-content,
.eyewa-case-active .chapter.dark .deep-dive-content {
border-top-color: var(--kfh-line);
}
.eyewa-case-active #kfh-3 > .study-deep-dive {
margin: 38px 0 72px;
border: 1px solid rgba(207, 63, 48, .24);
border-radius: 16px;
background: #f8ece9;
box-shadow: 0 18px 44px rgba(94, 38, 30, .06);
}
.eyewa-case-active #kfh-3 > .study-deep-dive summary {
display: grid;
min-height: 82px;
grid-template-columns: minmax(0, 1fr) auto;
gap: 20px;
align-items: center;
padding: 16px 22px 16px 26px;
color: var(--kfh-ink);
line-height: 1.3;
}
.eyewa-case-active #kfh-3 > .study-deep-dive .deep-dive-label {
min-width: 0;
font-size: clamp(16px, 1.6vw, 19px);
font-weight: 760;
text-align: left;
}
.eyewa-case-active #kfh-3 > .study-deep-dive .deep-dive-icon {
position: relative;
display: block;
width: 38px;
height: 38px;
flex: 0 0 38px;
border-radius: 50%;
background: var(--kfh-accent);
color: #fff;
font-size: 0;
line-height: 0;
}
.eyewa-case-active #kfh-3 > .study-deep-dive .deep-dive-icon::before,
.eyewa-case-active #kfh-3 > .study-deep-dive .deep-dive-icon::after {
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
border-radius: 999px;
background: currentColor;
content: "";
transform: translate(-50%, -50%);
}
.eyewa-case-active #kfh-3 > .study-deep-dive .deep-dive-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
transition: transform .24s ease;
}
.eyewa-case-active #kfh-3 > .study-deep-dive[open] .deep-dive-icon {
transform: none;
}
.eyewa-case-active #kfh-3 > .study-deep-dive[open] .deep-dive-icon::after {
transform: translate(-50%, -50%) rotate(0deg);
}
.eyewa-case-active #kfh-3 > .study-deep-dive .deep-dive-content {
padding: 4px 26px 28px;
border-top-color: rgba(207, 63, 48, .18);
background: rgba(255, 255, 255, .5);
}
.eyewa-case-active #kfh-8 > .study-deep-dive {
margin: 42px 0 76px;
border: 1px solid var(--kfh-line);
border-radius: 18px;
background: rgba(248, 247, 244, .88);
box-shadow: 0 20px 54px rgba(38, 31, 28, .07);
}
.eyewa-case-active #kfh-8 > .study-deep-dive summary {
display: grid;
min-height: 86px;
grid-template-columns: minmax(0, 1fr) 40px;
gap: 24px;
align-items: center;
padding: 18px 26px;
color: var(--kfh-ink);
line-height: 1.3;
}
.eyewa-case-active #kfh-8 > .study-deep-dive .deep-dive-label {
min-width: 0;
font-size: clamp(16px, 1.6vw, 19px);
font-weight: 760;
text-align: left;
}
.eyewa-case-active #kfh-8 > .study-deep-dive .deep-dive-icon {
position: relative;
display: grid;
width: 40px;
height: 40px;
place-items: center;
border: 1px solid rgba(207, 63, 48, .22);
border-radius: 50%;
background: var(--kfh-accent-soft);
color: var(--kfh-accent);
font-size: 0;
line-height: 0;
}
.eyewa-case-active #kfh-8 > .study-deep-dive .deep-dive-icon::before,
.eyewa-case-active #kfh-8 > .study-deep-dive .deep-dive-icon::after {
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
border-radius: 999px;
background: currentColor;
content: "";
transform: translate(-50%, -50%);
}
.eyewa-case-active #kfh-8 > .study-deep-dive .deep-dive-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
transition: transform .24s ease;
}
.eyewa-case-active #kfh-8 > .study-deep-dive[open] .deep-dive-icon {
transform: none;
}
.eyewa-case-active #kfh-8 > .study-deep-dive[open] .deep-dive-icon::after {
transform: translate(-50%, -50%) rotate(0deg);
}
.eyewa-case-active #kfh-8 > .study-deep-dive .deep-dive-content {
padding: 22px 26px 36px;
border-top-color: var(--kfh-line);
background: rgba(255, 255, 255, .62);
}
.eyewa-case-active #kfh-8 > .study-deep-dive .deep-dive-content > h2 {
max-width: 720px;
margin: 52px 0 18px;
padding-top: 32px;
border-top: 1px solid var(--kfh-line);
font-size: clamp(30px, 4vw, 44px);
line-height: 1.05;
letter-spacing: -.045em;
}
.eyewa-case-active #kfh-8 > .study-deep-dive .deep-dive-content > h2:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.eyewa-case-active #kfh-8 > .study-deep-dive .deep-dive-content > h3 {
margin-top: 36px;
}
.eyewa-case-active #kfh-8 > .study-deep-dive .deep-dive-content > p,
.eyewa-case-active #kfh-8 > .study-deep-dive .deep-dive-content > ul {
margin-right: 0;
margin-left: 0;
}
.eyewa-case-active .reading-progress span {
background: var(--kfh-accent);
}
.eyewa-case-active .coming-soon-overlay {
background: rgba(9, 9, 9, .68);
}
.eyewa-case-active .case-end {
padding: clamp(64px, 8vw, 100px) 30px;
border: 1px solid var(--kfh-line);
border-radius: 16px;
background: var(--kfh-soft);
}
.eyewa-case-active .case-end h2 em {
color: var(--kfh-accent);
}
.eyewa-case-active .editorial-motion-ready .editorial-reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity .7s cubic-bezier(.2, .72, .2, 1), transform .7s cubic-bezier(.2, .72, .2, 1);
}
.eyewa-case-active .editorial-motion-ready .editorial-reveal.is-visible {
opacity: 1;
transform: none;
}
.eyewa-case-active .counter {
font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
.eyewa-case-active .adoption-track i,
.eyewa-case-active .adoption-bar-fill {
transition: none;
}
}
.eyewa-case-active .questionnaire-figure {
margin-top: 34px;
}
.eyewa-case-active .questionnaire-scene {
position: relative;
overflow: hidden;
padding: clamp(22px, 5vw, 58px);
border: 1px solid #deddd9;
border-radius: 24px;
background: #f4f3f0;
}
.eyewa-case-active .questionnaire-paper {
position: relative;
width: min(100%, 900px);
margin: 0 auto;
padding: clamp(30px, 5vw, 58px);
border: 1px solid #e1e0dc;
border-radius: 18px;
background: #fff;
box-shadow: 0 18px 50px rgba(29, 28, 25, .07);
color: #1d1d1b;
}
.eyewa-case-active .questionnaire-paper header {
display: flex;
justify-content: space-between;
gap: 32px;
align-items: flex-start;
padding-bottom: 26px;
border-bottom: 1px solid #e7e6e2;
}
.eyewa-case-active .questionnaire-paper header span {
color: var(--kfh-accent);
font-size: 10px;
font-weight: 800;
letter-spacing: .17em;
text-transform: uppercase;
}
.eyewa-case-active .questionnaire-paper h4 {
margin: 7px 0 0;
color: #181816;
font-size: clamp(24px, 3vw, 36px);
line-height: 1.08;
letter-spacing: -.03em;
}
.eyewa-case-active .questionnaire-paper header p {
margin: 0;
color: #85827c;
font-size: 10px;
line-height: 1.65;
text-align: right;
text-transform: uppercase;
letter-spacing: .1em;
}
.eyewa-case-active .questionnaire-paper header p b {
color: #2c2b28;
font-weight: 800;
}
.eyewa-case-active .questionnaire-intro {
max-width: 560px;
margin: 24px 0 26px;
color: #73716c;
font-size: 13px;
line-height: 1.6;
}
.eyewa-case-active .questionnaire-intro b {
color: #2c2b28;
font-weight: 700;
}
.eyewa-case-active .questionnaire-fields {
display: grid;
gap: 0;
}
.eyewa-case-active .questionnaire-row {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 16px;
padding: 24px 0;
border-top: 1px solid #ecebe8;
}
.eyewa-case-active .questionnaire-row > span {
padding-top: 3px;
color: #b4b1aa;
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: .08em;
}
.eyewa-case-active .questionnaire-row strong {
display: block;
max-width: 680px;
color: #24231f;
font-size: clamp(16px, 1.7vw, 19px);
line-height: 1.35;
letter-spacing: -.01em;
}
.eyewa-case-active .questionnaire-paper .questionnaire-answer {
max-width: 640px;
margin: 10px 0 0;
color: #4c4a45;
font-size: clamp(14px, 1.4vw, 16px);
line-height: 1.62;
text-wrap: pretty;
}
.eyewa-case-active .questionnaire-paper .questionnaire-note {
max-width: 560px;
margin: 12px 0 0;
padding-left: 12px;
border-left: 2px solid #e0ded8;
color: #96938c;
font-size: 12px;
font-style: italic;
line-height: 1.5;
}
.eyewa-case-active .questionnaire-paper footer {
display: grid;
grid-template-columns: auto auto 1fr;
gap: 14px;
align-items: center;
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid #e7e6e2;
color: #8c8983;
font-size: 9px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.eyewa-case-active .questionnaire-paper footer i {
height: 1px;
background: #d7d5d0;
}
.eyewa-case-active .verified-findings .finding {
position: relative;
overflow: hidden;
}
.eyewa-case-active .verified-findings .finding::after {
position: absolute;
top: -54px;
right: -54px;
width: 150px;
height: 150px;
border-radius: 50%;
background: radial-gradient(circle, rgba(207, 63, 48, .11), transparent 70%);
content: "";
opacity: 0;
transform: scale(.65);
}
.eyewa-case-active .finding-meter {
position: absolute;
right: 28px;
bottom: 20px;
left: 28px;
height: 5px;
overflow: hidden;
border-radius: 999px;
background: #dddcd9;
}
.eyewa-case-active .finding-meter::after {
display: block;
width: var(--finding-value);
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #ff8f82, var(--kfh-accent));
box-shadow: 0 0 14px rgba(207, 63, 48, .22);
content: "";
transform: scaleX(0);
transform-origin: left;
will-change: transform;
}
.eyewa-case-active .metrics-motion-ready .finding {
opacity: 0;
transform: translateY(28px) scale(.975);
}
.eyewa-case-active .verified-findings.is-metric-animated .finding {
animation: metric-card-arrive .72s cubic-bezier(.16, 1, .3, 1) both;
animation-delay: calc(var(--finding-order) * 110ms);
}
.eyewa-case-active .verified-findings.is-metric-animated .finding::after {
animation: metric-orbit .8s ease-out both;
animation-delay: calc(220ms + var(--finding-order) * 110ms);
}
.eyewa-case-active .verified-findings.is-metric-animated .finding-meter::after {
animation: metric-fill 1s cubic-bezier(.16, 1, .3, 1) both;
animation-delay: calc(300ms + var(--finding-order) * 110ms);
}
@keyframes metric-card-arrive {
from { opacity: 0; transform: translateY(28px) scale(.975); }
to { opacity: 1; transform: none; }
}
@keyframes metric-fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes metric-orbit {
0% { opacity: 0; transform: scale(.65); }
55% { opacity: 1; }
100% { opacity: .48; transform: scale(1); }
}
.eyewa-case-active .document-link {
position: relative;
overflow: hidden;
border-color: rgba(207, 63, 48, .28);
background: linear-gradient(135deg, rgba(207, 63, 48, .16), rgba(255, 255, 255, .74));
color: #9e2f25;
box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 12px 32px rgba(117, 39, 30, .1);
backdrop-filter: blur(18px) saturate(135%);
-webkit-backdrop-filter: blur(18px) saturate(135%);
}
.eyewa-case-active .document-link::before {
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .72) 48%, transparent 72%);
content: "";
transform: translateX(-120%);
transition: transform .65s cubic-bezier(.16, 1, .3, 1);
}
.eyewa-case-active .document-link > * {
position: relative;
}
.eyewa-case-active .document-link:hover {
border-color: rgba(207, 63, 48, .52);
background: linear-gradient(135deg, rgba(207, 63, 48, .23), rgba(255, 255, 255, .8));
color: #85271f;
box-shadow: inset 0 1px rgba(255, 255, 255, .94), 0 18px 40px rgba(117, 39, 30, .15);
}
.eyewa-case-active .document-link:hover::before {
transform: translateX(120%);
}
.eyewa-case-active .quote-marquee-shell {
margin-block: 34px 72px;
}
.eyewa-case-active .quote-marquee {
position: relative;
overflow: hidden;
padding: 18px 0;
border: 1px solid rgba(207, 63, 48, .11);
border-radius: 20px;
background:
radial-gradient(circle at 12% 0%, rgba(207, 63, 48, .07), transparent 36%),
linear-gradient(135deg, rgba(248, 245, 241, .66), rgba(255, 255, 255, .4));
box-shadow: inset 0 1px rgba(255, 255, 255, .82), 0 18px 46px rgba(49, 37, 29, .055);
backdrop-filter: blur(14px) saturate(118%);
-webkit-backdrop-filter: blur(14px) saturate(118%);
isolation: isolate;
}
.eyewa-case-active .quote-marquee::before,
.eyewa-case-active .quote-marquee::after {
position: absolute;
z-index: 3;
top: 0;
bottom: 0;
width: clamp(34px, 5vw, 62px);
border: 0;
background-color: rgba(255, 255, 255, .07);
backdrop-filter: blur(12px) saturate(112%);
-webkit-backdrop-filter: blur(12px) saturate(112%);
content: "";
pointer-events: none;
}
.eyewa-case-active .quote-marquee::before {
left: 0;
border-radius: 19px 0 0 19px;
background:
linear-gradient(90deg,
rgba(255, 255, 255, .3) 0%,
rgba(255, 250, 248, .16) 44%,
rgba(255, 255, 255, 0) 100%);
border-left: 1px solid rgba(255, 255, 255, .62);
box-shadow: inset 10px 0 22px rgba(255, 255, 255, .08);
-webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .88) 58%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .88) 58%, transparent 100%);
}
.eyewa-case-active .quote-marquee::after {
right: 0;
border-radius: 0 19px 19px 0;
background:
linear-gradient(270deg,
rgba(255, 255, 255, .3) 0%,
rgba(255, 250, 248, .16) 44%,
rgba(255, 255, 255, 0) 100%);
border-right: 1px solid rgba(255, 255, 255, .62);
box-shadow: inset -10px 0 22px rgba(255, 255, 255, .08);
-webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .88) 58%, transparent 100%);
mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .88) 58%, transparent 100%);
}
.eyewa-case-active .quote-marquee-track {
display: flex;
width: max-content;
animation: quote-marquee var(--marquee-duration) linear infinite;
will-change: transform;
}
.eyewa-case-active .quote-marquee-group {
display: flex;
gap: 18px;
padding-right: 18px;
}
.eyewa-case-active .quote-marquee:hover .quote-marquee-track,
.eyewa-case-active .quote-marquee:focus .quote-marquee-track,
.eyewa-case-active .quote-marquee:focus-within .quote-marquee-track {
animation-play-state: paused;
}
.eyewa-case-active .quote-marquee .review-card {
width: clamp(300px, 35vw, 430px);
min-height: 300px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 16px;
background:
radial-gradient(circle at 100% 0%, rgba(207, 63, 48, .28), transparent 42%),
linear-gradient(145deg, rgba(17, 17, 17, .95), rgba(38, 27, 25, .86));
box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 14px 35px rgba(31, 23, 20, .16);
backdrop-filter: blur(18px) saturate(130%);
-webkit-backdrop-filter: blur(18px) saturate(130%);
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.eyewa-case-active .quote-marquee .review-card:hover {
border-color: rgba(255, 143, 130, .6);
box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 22px 44px rgba(83, 36, 30, .22);
transform: translateY(-6px);
}
.eyewa-case-active .quote-marquee .review-card span {
border: 1px solid rgba(255, 255, 255, .13);
background: rgba(255, 255, 255, .09);
backdrop-filter: blur(12px);
}
.eyewa-case-active .marquee-note {
margin: 10px 0 0;
color: var(--kfh-muted);
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
}
@keyframes quote-marquee {
to { transform: translateX(-50%); }
}
.eyewa-case-active .finding-gauge-progress {
filter: drop-shadow(0 0 10px rgba(255, 121, 107, .34));
}
.eyewa-case-active .finding-benchmark > div:first-child strong {
display: inline-flex;
align-items: baseline;
}
.eyewa-case-active .finding-benchmark > div:first-child strong b {
font: inherit;
font-variant-numeric: tabular-nums;
}
.eyewa-case-active .finding-benchmark > div:first-child strong small {
font-size: .72em;
}
.eyewa-case-active .finding-benchmark-track i {
position: relative;
overflow: visible;
}
.eyewa-case-active .finding-benchmark-track i::after {
position: absolute;
top: 50%;
right: -5px;
width: 10px;
height: 10px;
border: 2px solid #1b1716;
border-radius: 50%;
background: #ff9a8e;
box-shadow: 0 0 0 0 rgba(255, 154, 142, .5);
content: "";
transform: translateY(-50%);
}
.eyewa-case-active .research-finding-story.finding-animate .finding-gauge {
animation: gauge-arrive 1.15s cubic-bezier(.16, 1, .3, 1) both;
}
.eyewa-case-active .research-finding-story.finding-animate .finding-score strong {
animation: score-pop .72s cubic-bezier(.16, 1, .3, 1) .62s both;
}
.eyewa-case-active .research-finding-story.finding-animate .finding-benchmark {
animation: benchmark-arrive .72s cubic-bezier(.16, 1, .3, 1) .62s both;
}
.eyewa-case-active .research-finding-story.finding-animate .finding-benchmark-track i::after {
animation: benchmark-pulse 1.35s ease 1.45s 2;
}
.eyewa-case-active .research-finding-story.finding-reset .finding-gauge,
.eyewa-case-active .research-finding-story.finding-reset .finding-score strong,
.eyewa-case-active .research-finding-story.finding-reset .finding-benchmark {
animation: none;
opacity: 0;
}
@keyframes gauge-arrive {
from { opacity: 0; transform: scale(.76) rotate(-8deg); }
to { opacity: 1; transform: none; }
}
@keyframes score-pop {
0% { opacity: .25; transform: scale(.65); }
70% { opacity: 1; transform: scale(1.08); }
100% { opacity: 1; transform: none; }
}
@keyframes benchmark-arrive {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: none; }
}
@keyframes benchmark-pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 154, 142, .5); }
100% { box-shadow: 0 0 0 14px rgba(255, 154, 142, 0); }
}
.eyewa-case-active .business-impact-success {
position: relative;
margin: clamp(64px, 8vw, 104px) 0;
padding: clamp(30px, 5vw, 56px);
overflow: hidden;
border: 1px solid rgba(255, 143, 130, .28);
border-radius: 28px;
background:
radial-gradient(circle at 92% 4%, rgba(207, 63, 48, .32), transparent 34%),
radial-gradient(circle at 8% 100%, rgba(255, 143, 130, .13), transparent 34%),
linear-gradient(145deg, #0b0b0a, #171211 68%, #0c0b0a);
box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 28px 72px rgba(45, 24, 20, .16);
color: #fff;
}
.eyewa-case-active .business-impact-success::before {
position: absolute;
top: -96px;
right: -72px;
width: 280px;
height: 280px;
border: 1px solid rgba(255, 154, 142, .18);
border-radius: 50%;
box-shadow: 0 0 0 34px rgba(255, 154, 142, .04), 0 0 0 68px rgba(255, 154, 142, .025);
content: "";
}
.eyewa-case-active .business-impact-heading {
position: relative;
z-index: 1;
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
padding-bottom: 30px;
border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.eyewa-case-active .business-impact-heading .eyebrow {
order: 2;
margin-bottom: 9px;
color: #ff9a8e;
}
.eyewa-case-active .business-impact-heading h2 {
margin: 0;
color: #fff;
font-size: clamp(38px, 5.6vw, 68px);
letter-spacing: -.055em;
}
.eyewa-case-active .business-impact-grid.content-columns {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin: 28px 0 0;
}
.eyewa-case-active .business-impact-grid .impact-success-card.content-card {
min-height: 270px;
padding: 22px;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 18px;
background: linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .045));
box-shadow: inset 0 1px rgba(255, 255, 255, .09);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
transition: transform .28s ease, border-color .28s ease, background .28s ease;
}
.eyewa-case-active .business-impact-grid .impact-success-card:hover {
border-color: rgba(255, 154, 142, .42);
background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 143, 130, .065));
transform: translateY(-5px);
}
.eyewa-case-active .impact-success-mark {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: clamp(48px, 6vw, 76px);
color: rgba(255, 255, 255, .52);
}
.eyewa-case-active .impact-success-mark b {
font-size: 11px;
letter-spacing: .14em;
}
.eyewa-case-active .impact-success-mark i {
display: grid;
width: 30px;
height: 30px;
place-items: center;
border: 1px solid rgba(255, 154, 142, .42);
border-radius: 50%;
background: rgba(207, 63, 48, .17);
color: #ff9a8e;
font-size: 13px;
font-style: normal;
}
.eyewa-case-active .business-impact-grid .impact-success-card h3 {
margin: 0 0 14px;
color: #fff;
font-size: clamp(22px, 2.4vw, 29px);
line-height: 1.08;
letter-spacing: -.035em;
}
.eyewa-case-active .business-impact-grid .impact-success-card p {
margin: 0;
color: rgba(255, 255, 255, .68);
font-size: 15px;
line-height: 1.55;
}
.eyewa-case-active .business-impact-grid .impact-success-card p + p {
margin-top: 10px;
}
.eyewa-case-active .editorial-motion-ready .business-impact-success.is-visible .impact-success-card {
animation: impact-card-rise .72s cubic-bezier(.16, 1, .3, 1) both;
animation-delay: calc(180ms + var(--impact-order) * 120ms);
}
@keyframes impact-card-rise {
from { opacity: 0; transform: translateY(24px) scale(.98); }
to { opacity: 1; transform: none; }
}
@media (max-width: 720px) {
.eyewa-case-active .questionnaire-scene {
padding: 14px;
border-radius: 18px;
}
.eyewa-case-active .questionnaire-paper {
padding: 24px 18px;
border-radius: 14px;
}
.eyewa-case-active .questionnaire-paper header {
align-items: start;
}
.eyewa-case-active .questionnaire-paper header p {
display: none;
}
.eyewa-case-active .questionnaire-fields {
gap: 0;
}
.eyewa-case-active .questionnaire-row {
grid-template-columns: 32px minmax(0, 1fr);
gap: 10px;
padding: 20px 0;
}
.eyewa-case-active .questionnaire-paper footer {
display: none;
}
.eyewa-case-active .quote-marquee {
margin-inline: -10px;
border-radius: 16px;
}
.eyewa-case-active .quote-marquee::before,
.eyewa-case-active .quote-marquee::after {
width: 38px;
}
.eyewa-case-active .quote-marquee .review-card {
width: min(78vw, 330px);
min-height: 260px;
padding: 24px;
}
.eyewa-case-active .finding-meter {
right: 22px;
left: 22px;
}
.eyewa-case-active .business-impact-success {
margin-inline: -4px;
padding: 26px 18px 18px;
border-radius: 22px;
}
.eyewa-case-active .business-impact-heading {
display: block;
padding-bottom: 22px;
}
.eyewa-case-active .business-impact-heading .eyebrow {
display: block;
margin: 0 0 10px;
}
.eyewa-case-active .business-impact-grid.content-columns {
grid-template-columns: 1fr;
}
.eyewa-case-active .business-impact-grid .impact-success-card.content-card {
min-height: 0;
}
.eyewa-case-active .impact-success-mark {
margin-bottom: 34px;
}
}
@media (prefers-reduced-motion: reduce) {
.eyewa-case-active .diagram-motion-stage .media-open img {
opacity: 1;
clip-path: none;
transform: none;
animation: none;
}
.eyewa-case-active .diagram-motion-stage .media-open::after,
.eyewa-case-active .diagram-pulse {
display: none;
animation: none;
}
.eyewa-case-active .verified-findings .finding,
.eyewa-case-active .verified-findings .finding::after,
.eyewa-case-active .verified-findings .finding-meter::after,
.eyewa-case-active .research-finding-story .finding-gauge,
.eyewa-case-active .research-finding-story .finding-score strong,
.eyewa-case-active .research-finding-story .finding-benchmark,
.eyewa-case-active .research-finding-story .finding-benchmark-track i::after {
opacity: 1;
transform: none;
animation: none;
}
.eyewa-case-active .quote-marquee {
overflow-x: auto;
-webkit-mask-image: none;
mask-image: none;
}
.eyewa-case-active .quote-marquee-track {
animation: none;
}
.eyewa-case-active .quote-marquee-group[aria-hidden="true"] {
display: none;
}
}
.eyewa-case-active .result-panel {
position: relative;
isolation: isolate;
overflow: hidden;
}
.eyewa-case-active .result-panel::before {
position: absolute;
z-index: 5;
top: 0;
bottom: 0;
left: -18%;
width: 15%;
background: linear-gradient(90deg, transparent, rgba(207, 63, 48, .24), transparent);
content: "";
opacity: 0;
pointer-events: none;
transform: skewX(-16deg);
}
.eyewa-case-active .result-panel > div {
position: relative;
isolation: isolate;
overflow: hidden;
}
.eyewa-case-active .result-panel > div::before {
position: absolute;
z-index: -1;
top: -90px;
right: -80px;
width: 230px;
height: 230px;
border-radius: 50%;
background: radial-gradient(circle, rgba(207, 63, 48, .13), transparent 68%);
content: "";
opacity: 0;
transform: scale(.65);
}
.eyewa-case-active .result-panel .result-before::before {
background: radial-gradient(circle, rgba(9, 9, 9, .08), transparent 68%);
}
.eyewa-case-active .result-meter {
position: relative;
display: block;
width: 100%;
height: 6px;
margin-top: 24px;
overflow: hidden;
border-radius: 999px;
background: rgba(9, 9, 9, .1);
}
.eyewa-case-active .result-meter::after {
display: block;
width: var(--result-value);
height: 100%;
border-radius: inherit;
background: #73726f;
content: "";
transform: scaleX(0);
transform-origin: left;
}
.eyewa-case-active .result-after .result-meter::after {
background: linear-gradient(90deg, #ff8f82, var(--kfh-accent));
box-shadow: 0 0 18px rgba(207, 63, 48, .28);
}
.eyewa-case-active .result-arrow {
--result-arrow-rotation: 0deg;
position: relative;
z-index: 2;
isolation: isolate;
width: 96px;
background: transparent;
font-size: 34px;
font-weight: 400;
}
.eyewa-case-active .result-arrow::before {
position: absolute;
z-index: -1;
width: 58px;
height: 58px;
border: 1px solid rgba(207, 63, 48, .23);
border-radius: 50%;
background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(207, 63, 48, .08));
box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 12px 26px rgba(112, 43, 34, .1);
content: "";
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.eyewa-case-active .motion-ready .result-panel .result-before,
.eyewa-case-active .motion-ready .result-panel .result-after {
opacity: 0;
filter: blur(7px);
}
.eyewa-case-active .motion-ready .result-panel .result-before {
transform: translateX(-56px) scale(.96);
}
.eyewa-case-active .motion-ready .result-panel .result-after {
transform: translateX(56px) scale(.96);
}
.eyewa-case-active .motion-ready .result-panel .result-arrow {
opacity: 0;
transform: rotate(var(--result-arrow-rotation)) scale(.3);
}
.eyewa-case-active .motion-ready .result-panel.is-visible .result-before {
animation: result-before-arrive .82s cubic-bezier(.16, 1, .3, 1) both;
}
.eyewa-case-active .motion-ready .result-panel.is-visible .result-arrow {
animation: result-arrow-arrive .76s cubic-bezier(.34, 1.56, .64, 1) .34s both;
}
.eyewa-case-active .motion-ready .result-panel.is-visible .result-after {
animation: result-after-arrive .86s cubic-bezier(.16, 1, .3, 1) .48s both;
}
.eyewa-case-active .motion-ready .result-panel.is-visible::before {
animation: result-scan 1s cubic-bezier(.16, 1, .3, 1) .58s both;
}
.eyewa-case-active .motion-ready .result-panel.is-visible > div::before {
animation: result-orb .9s ease-out .72s both;
}
.eyewa-case-active .motion-ready .result-panel.is-visible .result-before strong {
animation: result-number-settle .65s cubic-bezier(.16, 1, .3, 1) .25s both;
}
.eyewa-case-active .motion-ready .result-panel.is-visible .result-after strong {
animation: result-number-settle .65s cubic-bezier(.16, 1, .3, 1) .78s both;
}
.eyewa-case-active .motion-ready .result-panel.is-visible .result-before .result-meter::after {
animation: result-meter-fill 1s cubic-bezier(.16, 1, .3, 1) .42s both;
}
.eyewa-case-active .motion-ready .result-panel.is-visible .result-after .result-meter::after {
animation: result-meter-fill 1s cubic-bezier(.16, 1, .3, 1) .94s both;
}
@keyframes result-before-arrive {
from { opacity: 0; filter: blur(7px); transform: translateX(-56px) scale(.96); }
to { opacity: 1; filter: none; transform: none; }
}
@keyframes result-after-arrive {
from { opacity: 0; filter: blur(7px); transform: translateX(56px) scale(.96); }
to { opacity: 1; filter: none; transform: none; }
}
@keyframes result-arrow-arrive {
0% { opacity: 0; transform: rotate(var(--result-arrow-rotation)) scale(.3); }
70% { opacity: 1; transform: rotate(var(--result-arrow-rotation)) scale(1.14); }
100% { opacity: 1; transform: rotate(var(--result-arrow-rotation)) scale(1); }
}
@keyframes result-scan {
0% { left: -18%; opacity: 0; }
22% { opacity: 1; }
100% { left: 112%; opacity: 0; }
}
@keyframes result-orb {
0% { opacity: 0; transform: scale(.65); }
55% { opacity: .9; }
100% { opacity: .46; transform: scale(1); }
}
@keyframes result-number-settle {
0% { opacity: .25; transform: translateY(14px) scale(.82); }
72% { opacity: 1; transform: translateY(0) scale(1.06); }
100% { opacity: 1; transform: none; }
}
@keyframes result-meter-fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@media (max-width: 720px) {
.eyewa-case-active .result-arrow {
--result-arrow-rotation: 90deg;
width: 100%;
height: 76px;
}
.eyewa-case-active .result-panel > div {
min-height: 220px;
}
}
@media (prefers-reduced-motion: reduce) {
.eyewa-case-active .motion-ready .result-panel .result-before,
.eyewa-case-active .motion-ready .result-panel .result-after,
.eyewa-case-active .motion-ready .result-panel .result-arrow,
.eyewa-case-active .motion-ready .result-panel.is-visible .result-before,
.eyewa-case-active .motion-ready .result-panel.is-visible .result-after,
.eyewa-case-active .motion-ready .result-panel.is-visible .result-arrow,
.eyewa-case-active .motion-ready .result-panel.is-visible > div::before,
.eyewa-case-active .motion-ready .result-panel.is-visible strong,
.eyewa-case-active .motion-ready .result-panel.is-visible .result-meter::after {
opacity: 1;
filter: none;
transform: none;
animation: none;
}
.eyewa-case-active .result-panel .result-meter::after {
transform: scaleX(1);
}
.eyewa-case-active .result-arrow {
transform: rotate(var(--result-arrow-rotation));
}
.eyewa-case-active .result-panel::before {
display: none;
}
}
@media (max-width: 1100px) {
.eyewa-case-active .case .case-hero {
grid-template-columns: minmax(0, .9fr) minmax(400px, 1.1fr);
}
.eyewa-case-active .case-impact-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 34px;
}
.eyewa-case-active .research-overview {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.eyewa-case-active .decision-track {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.eyewa-case-active .case {
padding-top: 28px;
}
.eyewa-case-active .case .case-hero {
grid-template-columns: 1fr;
min-height: auto;
padding: 58px 0 52px;
}
.eyewa-case-active .case .case-hero::after {
top: auto;
right: 5%;
bottom: 4%;
width: 62vw;
height: 62vw;
transform: none;
}
.eyewa-case-active .case-hero-visual {
max-width: 740px;
margin-top: 34px;
}
.eyewa-case-active .impact-summary-copy {
grid-template-columns: 1fr;
}
.eyewa-case-active .impact-summary-copy .eyebrow,
.eyewa-case-active .impact-summary-copy h2,
.eyewa-case-active .impact-summary-copy p,
.eyewa-case-active .case-jump {
grid-column: 1;
}
.eyewa-case-active .impact-summary-copy p {
max-width: 620px;
margin-top: 26px;
}
.eyewa-case-active .long-study {
display: block;
}
.eyewa-case-active .study-toc {
position: sticky !important;
top: 82px !important;
z-index: 15;
display: block;
margin: 0 0 58px;
padding: 0 !important;
overflow: visible;
border: 1px solid var(--kfh-line) !important;
border-radius: 14px;
background: #fff; 
box-shadow: 0 12px 32px rgba(9, 9, 9, .08);
}
.eyewa-case-active .study-toc > .eyebrow {
display: none;
}
.eyewa-case-active .mobile-toc-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 66px;
padding: 10px 16px;
border: 0;
border-radius: 14px;
background: transparent;
color: var(--kfh-ink);
text-align: left;
cursor: pointer;
}
.eyewa-case-active .mobile-toc-trigger span {
display: grid;
min-width: 0;
padding-right: 16px;
}
.eyewa-case-active .mobile-toc-trigger small {
color: var(--kfh-accent);
font-size: 9px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.eyewa-case-active .mobile-toc-trigger b {
font-size: 14px;
}
.eyewa-case-active .mobile-toc-trigger i {
position: relative;
display: grid;
width: 36px;
height: 36px;
flex: 0 0 36px;
place-items: center;
border: 1px solid var(--kfh-line);
border-radius: 50%;
font-style: normal;
transition: border-color .2s ease, background-color .2s ease;
}
.eyewa-case-active .mobile-toc-trigger i::before {
content: "";
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.eyewa-case-active .toc-links {
display: none;
max-height: min(60vh, 430px);
padding: 4px 14px 14px;
overflow-y: auto;
border-top: 1px solid var(--kfh-line);
}
.eyewa-case-active .study-toc.toc-open .toc-links {
display: grid;
}
.eyewa-case-active .study-toc.toc-open .mobile-toc-trigger i {
border-color: rgba(217, 61, 46, .26);
background: rgba(217, 61, 46, .08);
}
.eyewa-case-active .study-toc.toc-open .mobile-toc-trigger i::before {
transform: translateY(2px) rotate(225deg);
}
.eyewa-case-active .study-toc a {
min-height: 46px;
padding: 10px 0 10px 12px !important;
border: 0;
border-left: 2px solid transparent;
background: transparent;
}
.eyewa-case-active .chapter,
.eyewa-case-active .chapter.dark,
.eyewa-case-active .chapter.accent {
scroll-margin-top: 168px;
}
}
@media (max-width: 700px) {
.eyewa-case-active .case {
width: calc(100% - 32px);
}
.eyewa-case-active #kfh-8 > .study-deep-dive {
margin: 34px 0 64px;
border-radius: 16px;
}
.eyewa-case-active #kfh-8 > .study-deep-dive summary {
min-height: 78px;
grid-template-columns: minmax(0, 1fr) 38px;
gap: 14px;
padding: 16px 18px;
}
.eyewa-case-active #kfh-8 > .study-deep-dive .deep-dive-icon {
width: 38px;
height: 38px;
}
.eyewa-case-active #kfh-8 > .study-deep-dive .deep-dive-content {
padding: 20px 18px 28px;
}
.eyewa-case-active #kfh-8 > .study-deep-dive .deep-dive-content > h2 {
margin-top: 44px;
padding-top: 26px;
font-size: clamp(28px, 8.4vw, 36px);
}
.eyewa-case-active .case .case-hero {
gap: 14px;
padding: 42px 0 38px;
}
.eyewa-case-active .case .case-hero > h1 {
font-size: clamp(40px, 11.5vw, 54px);
}
.eyewa-case-active .case-hero-visual {
margin-top: 24px;
}
.eyewa-case-active .case-hero-visual img {
filter: none;
}
.eyewa-case-active .case-impact-summary {
padding: 72px 0 80px;
}
.eyewa-case-active .impact-summary-copy h2 {
font-size: clamp(42px, 13vw, 60px);
}
.eyewa-case-active .case-impact-grid {
grid-template-columns: 1fr;
gap: 28px;
margin-top: 58px;
}
.eyewa-case-active .case-impact-grid > .impact-card,
.eyewa-case-active .case-impact-grid > div.impact-onboarding,
.eyewa-case-active .case-impact-grid > div.impact-adoption,
.eyewa-case-active .case-impact-grid > div.impact-delivery,
.eyewa-case-active .case-impact-grid > div.impact-deadlines {
min-height: 0;
}
.eyewa-case-active .case-impact-grid .impact-card strong {
margin-top: 22px;
}
.eyewa-case-active .case-facts {
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 90px;
}
.eyewa-case-active .long-study .chapter .chapter-title {
font-size: clamp(42px, 13vw, 60px);
}
.eyewa-case-active .long-study .chapter .section-title {
margin-top: 66px;
font-size: clamp(31px, 9.5vw, 42px);
}
.eyewa-case-active .chapter p,
.eyewa-case-active .chapter li,
.eyewa-case-active .chapter.dark p,
.eyewa-case-active .chapter.dark li,
.eyewa-case-active .chapter.accent p,
.eyewa-case-active .chapter.accent li {
font-size: 16px;
line-height: 1.72;
}
.eyewa-case-active .content-columns,
.eyewa-case-active .research-overview,
.eyewa-case-active .finding-grid,
.eyewa-case-active .chapter.dark .verified-findings,
.eyewa-case-active .research-synthesis > div {
grid-template-columns: 1fr;
}
.eyewa-case-active .decision-track {
grid-auto-columns: 82%;
grid-template-columns: none;
}
.eyewa-case-active .adoption-story-heading,
.eyewa-case-active .adoption-comparison {
display: grid;
grid-template-columns: 1fr;
}
.eyewa-case-active .adoption-direction {
grid-template-columns: auto 1fr;
justify-content: start;
justify-items: start;
}
.eyewa-case-active .adoption-direction span {
transform: rotate(90deg);
}
.eyewa-case-active .adoption-direction small {
max-width: none;
align-self: center;
text-align: left;
}
.eyewa-case-active .adoption-chart {
grid-template-columns: 42px minmax(0, 1fr);
grid-template-rows: 300px auto;
column-gap: 10px;
padding-top: 30px;
}
.eyewa-case-active .adoption-bars {
inset-inline: 16px;
gap: 28px;
}
.eyewa-case-active .adoption-chart-labels {
gap: 28px;
padding-inline: 16px;
}
.eyewa-case-active .adoption-bar strong {
font-size: clamp(31px, 9vw, 42px);
}
.eyewa-case-active .adoption-bar-fill {
width: min(100%, 92px);
}
.eyewa-case-active .adoption-chart-labels strong {
font-size: 10px;
line-height: 1.35;
}
.eyewa-case-active .adoption-chart-labels span {
font-size: 12px;
}
.eyewa-case-active .research-finding-story {
padding: 24px;
}
.eyewa-case-active .finding-story-meta {
display: grid;
justify-content: stretch;
}
.eyewa-case-active .finding-replay {
justify-self: start;
}
.eyewa-case-active .finding-story-stage {
grid-template-columns: 1fr;
gap: 34px;
padding: 38px 0;
}
.eyewa-case-active .finding-gauge {
width: min(100%, 240px);
}
.eyewa-case-active .finding-story-copy {
padding: 30px 0 0;
border-top: 1px solid rgba(255, 255, 255, .14);
border-left: 0;
}
.eyewa-case-active .finding-story-copy h4 {
font-size: 40px;
}
.eyewa-case-active .finding-benchmark {
padding: 20px;
}
.eyewa-case-active .result-panel {
grid-template-columns: 1fr;
}
.eyewa-case-active .result-panel > div {
min-height: 200px;
padding: 26px;
}
.eyewa-case-active .result-arrow {
width: 100%;
height: 62px;
transform: rotate(90deg);
}
.eyewa-case-active .media-heading {
display: block;
}
.eyewa-case-active .media-heading p {
margin-top: 8px;
text-align: left;
}
.eyewa-case-active .product-analysis-layout {
grid-template-columns: 1fr;
padding: 28px 0;
}
.eyewa-case-active .gif-toggle {
left: 16px;
bottom: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.eyewa-case-active .editorial-motion-ready .editorial-reveal {
opacity: 1;
transform: none;
transition: none;
}
.eyewa-case-active .research-finding-story::after {
display: none;
}
.eyewa-case-active .finding-gauge-progress {
stroke-dashoffset: 0;
transition: none;
}
.eyewa-case-active .finding-gauge-marker,
.eyewa-case-active .finding-story-copy > * {
opacity: 1;
transform: none;
transition: none;
}
.eyewa-case-active .finding-gauge-marker {
transform: rotate(187.2deg);
}
.eyewa-case-active .finding-benchmark-track i {
transform: scaleX(1);
transition: none;
}
}
.eyewa-case-active .team-roles-story,
.eyewa-case-active .collaboration-story,
.eyewa-case-active .version-control-feature {
margin: 64px 0 84px;
border: 1px solid var(--kfh-line);
border-radius: 28px;
}
.eyewa-case-active .team-roles-story {
padding: clamp(28px, 4vw, 46px);
background:
radial-gradient(circle at 92% 8%, rgba(0, 108, 110, .12), transparent 36%),
linear-gradient(145deg, #f6f8f6 0%, #eef4f2 100%);
}
.eyewa-case-active .team-roles-heading,
.eyewa-case-active .collaboration-heading {
display: grid;
grid-template-columns: minmax(150px, .34fr) minmax(0, 1fr);
column-gap: 32px;
align-items: start;
padding-bottom: 30px;
border-bottom: 1px solid rgba(14, 24, 23, .14);
}
.eyewa-case-active .team-roles-heading .eyebrow,
.eyewa-case-active .collaboration-heading .eyebrow,
.eyewa-case-active .version-control-copy .eyebrow {
margin-top: 5px;
color: var(--kfh-accent);
}
.eyewa-case-active .team-roles-heading h3,
.eyewa-case-active .collaboration-heading h3,
.eyewa-case-active .version-control-copy h3 {
margin: 0 0 12px;
}
.eyewa-case-active .team-roles-heading p,
.eyewa-case-active .collaboration-heading p {
grid-column: 2;
margin: 0;
}
.eyewa-case-active .role-ownership-grid.content-columns {
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: 16px;
margin: 28px 0 0;
}
.eyewa-case-active .role-ownership-grid .role-ownership-card.content-card {
min-height: 100%;
padding: 28px;
border: 1px solid rgba(14, 24, 23, .13);
border-radius: 20px;
background: rgba(255, 255, 255, .72);
box-shadow: 0 16px 42px rgba(12, 29, 27, .06);
}
.eyewa-case-active .role-card-label,
.eyewa-case-active .collaboration-index {
display: inline-flex;
align-items: center;
min-height: 28px;
margin-bottom: 26px;
color: var(--kfh-accent);
font-size: 11px;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
.eyewa-case-active .role-ownership-grid .role-card-lead.content-card {
border-color: rgba(255, 255, 255, .1);
background: linear-gradient(145deg, #0b1716 0%, #132422 100%);
color: #fff;
}
.eyewa-case-active .role-card-lead .role-card-label {
color: #77d9cf;
}
.eyewa-case-active .long-study .chapter .role-card-lead h3 {
position: relative;
margin-bottom: 24px;
padding-left: 18px;
color: #b7fff3;
}
.eyewa-case-active .long-study .chapter .role-card-lead h3::before {
position: absolute;
inset: .12em auto .12em 0;
width: 4px;
border-radius: 999px;
background: linear-gradient(180deg, #77d9cf, #fff);
content: '';
}
.eyewa-case-active .role-card-lead li {
color: #fff;
}
.eyewa-case-active .role-card-team h3:not(:first-of-type) {
margin-top: 28px;
padding-top: 26px;
border-top: 1px solid rgba(14, 24, 23, .13);
}
.eyewa-case-active .collaboration-story {
padding: clamp(28px, 4vw, 46px);
border-color: rgba(211, 61, 44, .2);
background:
radial-gradient(circle at 10% 0%, rgba(211, 61, 44, .11), transparent 34%),
linear-gradient(145deg, rgba(253, 244, 241, .96), rgba(249, 248, 245, .96));
}
.eyewa-case-active .collaboration-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 28px;
}
.eyewa-case-active .collaboration-card {
min-width: 0;
padding: 26px 24px;
border: 1px solid rgba(211, 61, 44, .16);
border-radius: 18px;
background: rgba(255, 255, 255, .67);
box-shadow: 0 14px 36px rgba(56, 26, 21, .05);
}
.eyewa-case-active .collaboration-card h3 {
margin: 0 0 16px;
font-size: clamp(20px, 1.8vw, 24px);
}
.eyewa-case-active .collaboration-card p,
.eyewa-case-active .collaboration-card li {
font-size: 15px;
line-height: 1.65;
}
.eyewa-case-active .collaboration-card ul {
margin-bottom: 0;
padding-left: 18px;
}
.eyewa-case-active .version-control-feature {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
gap: clamp(28px, 4vw, 48px);
align-items: center;
padding: clamp(18px, 2.5vw, 28px);
background: linear-gradient(145deg, #f3f5f4, #ecefed);
overflow: hidden;
}
.eyewa-case-active .version-control-visual,
.eyewa-case-active .version-control-copy {
min-width: 0;
}
.eyewa-case-active .version-control-media.media-block {
margin: 0;
}
.eyewa-case-active .version-control-media .media-grid {
display: block;
}
.eyewa-case-active .version-control-media .media-open {
width: 100%;
max-height: 430px;
padding: 8px;
overflow: hidden;
background: #fff;
}
.eyewa-case-active .version-control-media .media-open img {
width: 100%;
max-height: 410px;
object-fit: cover;
object-position: center top;
}
.eyewa-case-active .version-control-copy {
padding: 18px 18px 18px 0;
}
.eyewa-case-active .version-control-copy p {
margin: 0;
font-size: 16px;
line-height: 1.7;
}
@media (max-width: 900px) {
.eyewa-case-active .collaboration-grid {
grid-template-columns: 1fr 1fr;
}
.eyewa-case-active .collaboration-card:last-child {
grid-column: 1 / -1;
}
.eyewa-case-active .version-control-feature {
grid-template-columns: 1fr;
}
.eyewa-case-active .version-control-copy {
padding: 4px 10px 14px;
}
}
@media (max-width: 700px) {
.eyewa-case-active .team-roles-story,
.eyewa-case-active .collaboration-story,
.eyewa-case-active .version-control-feature {
margin: 48px 0 66px;
border-radius: 22px;
}
.eyewa-case-active .team-roles-story,
.eyewa-case-active .collaboration-story {
padding: 22px 18px;
}
.eyewa-case-active .team-roles-heading,
.eyewa-case-active .collaboration-heading {
grid-template-columns: 1fr;
gap: 8px;
}
.eyewa-case-active .team-roles-heading p,
.eyewa-case-active .collaboration-heading p {
grid-column: 1;
}
.eyewa-case-active .role-ownership-grid.content-columns,
.eyewa-case-active .collaboration-grid {
grid-template-columns: 1fr;
}
.eyewa-case-active .collaboration-card:last-child {
grid-column: auto;
}
.eyewa-case-active .role-ownership-grid .role-ownership-card.content-card,
.eyewa-case-active .collaboration-card {
padding: 24px 20px;
}
.eyewa-case-active .version-control-feature {
gap: 20px;
padding: 14px;
}
.eyewa-case-active .version-control-media .media-open,
.eyewa-case-active .version-control-media .media-open img {
max-height: 330px;
}
}

/* ===== eyewa.css ===== */

body.eyewa-case-active{
--ey-ink:var(--kfh-ink);
--ey-muted:var(--kfh-muted);
--ey-line:var(--kfh-line);
--ey-paper:var(--kfh-paper);
--ey-soft:var(--kfh-soft);
--ey-accent:var(--kfh-accent);
}
.eyewa-case .ey-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@keyframes ey-odo{from{transform:translateY(0)}to{transform:translateY(var(--to,0))}}
.ey-odo{display:inline-flex;align-items:baseline;font-variant-numeric:tabular-nums}
.ey-odo-col{display:block;height:1em;overflow:hidden;line-height:1}
.ey-odo-sep{display:block}
.ey-odo-reel{display:block;transform:translateY(var(--to,0))}
.eyewa-case .ey-odo-reel i{display:block;height:1em;line-height:1;text-align:center;font-style:normal}
.ey-play .ey-odo-reel{
animation:ey-odo 2.1s cubic-bezier(.16,1,.3,1) forwards;
animation-delay:calc(var(--c,0) * 130ms + 100ms);
}
.ey-odo-unit{margin-left:.05em}
@keyframes ey-track{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ey-node{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.eyewa-case .ey-rail{position:relative;margin:clamp(34px,4vw,56px) 0}
.eyewa-case .ey-rail ol{
display:grid;
grid-template-columns:repeat(var(--rail-cols,5),minmax(0,1fr));
gap:clamp(14px,1.8vw,26px);
margin:0;
padding:0;
list-style:none;
}
.eyewa-case .ey-rail-circles ol{--rail-cols:6}
.eyewa-case .ey-rail-track{
position:absolute;
top:23px;
left:calc(100% / var(--rail-cols,5) / 2);
right:calc(100% / var(--rail-cols,5) / 2);
height:1px;
background:var(--ey-line);
overflow:hidden;
}
.eyewa-case .ey-rail-circles .ey-rail-track{--rail-cols:6;top:calc(clamp(58px,5.2vw,74px) / 2)}
.eyewa-case .ey-rail-track::after{
position:absolute;
inset:0;
background:var(--ey-accent);
content:"";
transform-origin:left center;
}
.eyewa-case .ey-rail.ey-play .ey-rail-track::after{animation:ey-track 1.4s cubic-bezier(.22,.68,0,1) .15s both}
.eyewa-case .ey-rail li{display:grid;justify-items:center;gap:14px;text-align:center;opacity:1;margin:0}
.eyewa-case .ey-rail li::marker{content:none}
.eyewa-case .ey-rail.ey-play li{
animation:ey-node .6s cubic-bezier(.22,.68,0,1) both;
animation-delay:calc(var(--n,0) * 150ms + 220ms);
}
.eyewa-case .ey-rail-dot{
display:grid;
width:46px;
height:46px;
place-items:center;
border:1px solid var(--ey-line);
border-radius:999px;
background:var(--ey-paper);
color:var(--ey-accent);
font-size:12px;
font-weight:700;
font-variant-numeric:tabular-nums;
}
.eyewa-case .ey-rail-icon{width:clamp(58px,5.2vw,74px);height:clamp(58px,5.2vw,74px)}
.eyewa-case .ey-rail-icon svg{width:42%;height:42%}
.eyewa-case .ey-rail li > div{display:grid;gap:5px}
.eyewa-case .ey-rail b{font-size:clamp(13px,1.2vw,15px);font-weight:700;line-height:1.25}
.eyewa-case .ey-rail li span:not(.ey-rail-dot){color:var(--ey-muted);font-size:12px;line-height:1.45;text-wrap:pretty}
@keyframes ey-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.eyewa-case .ey-funnel{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
align-items:end;
gap:clamp(18px,2.6vw,40px);
margin:clamp(30px,3.6vw,48px) 0 0;
padding:clamp(24px,3vw,40px) clamp(20px,2.6vw,36px) clamp(20px,2.4vw,30px);
border:1px solid var(--ey-line);
border-radius:20px;
background:var(--ey-soft);
}
.eyewa-case .ey-funnel-step{display:grid;gap:16px;align-content:end}
.eyewa-case .ey-funnel-barzone{
display:flex;
align-items:flex-end;
height:clamp(170px,20vw,250px);
}
.eyewa-case .ey-funnel-bar{
display:block;
width:100%;
height:var(--h,100%);
min-height:6px;
border-radius:6px 6px 0 0;
background:var(--ey-accent);
transform-origin:bottom center;
}
.eyewa-case .ey-funnel.ey-play .ey-funnel-bar{
animation:ey-grow 1.1s cubic-bezier(.22,.68,0,1) both;
animation-delay:calc(var(--f,0) * 220ms);
}
.eyewa-case .ey-funnel-step:nth-child(2) .ey-funnel-bar{background:color-mix(in oklch,var(--ey-accent) 68%,#fff)}
.eyewa-case .ey-funnel-step:nth-child(3) .ey-funnel-bar{background:color-mix(in oklch,var(--ey-accent) 40%,#fff)}
.eyewa-case .ey-funnel-meta{display:grid;gap:6px;padding-top:14px;border-top:1px solid var(--ey-line)}
.eyewa-case .ey-funnel-meta b{font-size:14px;font-weight:700}
.eyewa-case .ey-funnel-meta span{color:var(--ey-muted);font-size:12px;line-height:1.45;text-wrap:pretty}
.eyewa-case .ey-funnel-drops{
grid-column:1 / -1;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(18px,2.6vw,40px);
margin-top:clamp(18px,2.2vw,28px);
padding-top:clamp(18px,2.2vw,28px);
border-top:1px solid var(--ey-line);
}
.eyewa-case .ey-funnel-drop{
display:grid;
grid-template-columns:auto minmax(0,1fr);
align-items:baseline;
gap:4px 10px;
color:var(--ey-accent);
font-size:clamp(26px,3.4vw,44px);
font-weight:600;
letter-spacing:-.04em;
}
.eyewa-case .ey-funnel-drop i{font-style:normal}
.eyewa-case .ey-funnel-drop em{
grid-column:2;
color:var(--ey-muted);
font-size:12px;
font-style:normal;
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
}
.eyewa-case .ey-table-wrap{margin:clamp(28px,3.4vw,44px) 0;overflow-x:auto}
.eyewa-case .ey-table{width:100%;min-width:760px;border-collapse:collapse;text-align:left}
.eyewa-case .ey-table caption{padding:0 0 16px;font-size:17px;font-weight:700;text-align:left}
.eyewa-case .ey-table th,.eyewa-case .ey-table td{
padding:16px 18px;
border-bottom:1px solid var(--ey-line);
vertical-align:middle;
font-size:14px;
line-height:1.5;
}
.eyewa-case .ey-table th:first-child,.eyewa-case .ey-table td:first-child{padding-left:0}
.eyewa-case .ey-table thead th{border-bottom:2px solid var(--ey-ink);text-align:center}
.eyewa-case .ey-table thead th:first-child{
color:var(--ey-muted);
font-size:11px;
font-weight:700;
letter-spacing:.14em;
text-align:left;
text-transform:uppercase;
}
.eyewa-case .ey-logo-cell{display:grid;width:100%;height:32px;place-items:center}
.eyewa-case .ey-logo-cell img{max-width:106px;max-height:19px;width:auto;height:auto;object-fit:contain}
.eyewa-case .ey-table tbody th{width:26%;font-size:15px;font-weight:600;text-wrap:pretty}
.eyewa-case .ey-table td{color:var(--ey-muted);font-variant-numeric:tabular-nums;text-align:center}
.eyewa-case .ey-table td[data-neg]{color:var(--ey-accent);font-weight:700}
.eyewa-case .ey-table .ey-cell-self{background:color-mix(in oklch,var(--ey-accent) 7%,transparent);color:var(--ey-ink);font-weight:600}
.eyewa-case .ey-table-findings tbody th{width:56%}
.eyewa-case .ey-table-findings tbody th b{display:block;font-size:16px;font-weight:700}
.eyewa-case .ey-table-findings tbody th span{
display:block;
margin-top:6px;
color:var(--ey-muted);
font-size:13px;
font-weight:400;
line-height:1.5;
text-wrap:pretty;
}
.eyewa-case .ey-table-findings td{text-align:left}
.eyewa-case .ey-table-findings tr[data-tier="premium"] th{box-shadow:inset 3px 0 0 var(--ey-accent)}
.eyewa-case .ey-table-findings tr[data-tier="enhanced"] th{box-shadow:inset 3px 0 0 color-mix(in oklch,var(--ey-accent) 55%,#fff)}
.eyewa-case .ey-table-findings tr[data-tier="basic"] th{box-shadow:inset 3px 0 0 var(--ey-line)}
.eyewa-case .ey-table-findings tr[data-tier] th{padding-left:16px}
.eyewa-case .ey-pill{
display:inline-flex;
padding:5px 11px;
border:1px solid var(--ey-line);
border-radius:999px;
font-size:12px;
font-weight:700;
white-space:nowrap;
}
.eyewa-case .ey-pill[data-level="very-high"]{border-color:var(--ey-accent);color:var(--ey-accent)}
.eyewa-case .ey-pill[data-level="high"]{border-color:color-mix(in oklch,var(--ey-accent) 55%,#fff)}
.eyewa-case .ey-legend{display:flex;gap:18px;margin:16px 0 0;padding:0;list-style:none}
.eyewa-case .ey-legend span{
display:inline-flex;
align-items:center;
gap:8px;
color:var(--ey-muted);
font-size:11px;
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
}
.eyewa-case .ey-legend span::before{width:10px;height:10px;border-radius:3px;content:""}
.eyewa-case .ey-legend span[data-tier="premium"]::before{background:var(--ey-accent)}
.eyewa-case .ey-legend span[data-tier="enhanced"]::before{background:color-mix(in oklch,var(--ey-accent) 55%,#fff)}
.eyewa-case .ey-legend span[data-tier="basic"]::before{background:var(--ey-line)}
.eyewa-case .ey-stat-row,.eyewa-case .ey-benchmark-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:clamp(22px,3vw,44px);
margin:clamp(28px,3.4vw,44px) 0;
}
.ey-ov-results-foot{max-width:74ch;margin:20px 0 0;color:var(--ey-muted);font-size:13.5px;line-height:1.55}
.eyewa-case .ey-stat{display:grid;align-content:start;gap:10px;padding-top:18px;border-top:2px solid var(--ey-ink)}
.eyewa-case .ey-stat strong{
color:var(--ey-accent);
font-size:clamp(42px,5vw,72px);
font-weight:600;
line-height:.9;
letter-spacing:-.05em;
}
.eyewa-case .ey-stat-major strong{font-size:clamp(52px,6vw,86px)}
.eyewa-case .ey-stat > span{font-size:15px;font-weight:600;line-height:1.35;text-wrap:pretty}
.eyewa-case .ey-stat cite{
color:var(--ey-muted);
font-size:11px;
font-style:normal;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
}
.eyewa-case .ey-refs{display:grid;gap:14px;margin:18px 0 0;padding:0;list-style:none}
.eyewa-case .ey-refs li{display:grid;gap:4px;padding-top:14px;border-top:1px solid var(--ey-line)}
.eyewa-case .ey-refs b{font-size:14px;font-weight:700}
.eyewa-case .ey-refs span{color:var(--ey-muted);font-size:14px;line-height:1.5;text-wrap:pretty}
.eyewa-case .ey-suggest{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(20px,2.6vw,34px);
margin:clamp(26px,3vw,40px) 0;
}
.eyewa-case .ey-suggest-card{
display:grid;
align-content:start;
gap:10px;
padding:clamp(20px,2.4vw,30px);
border:1px solid var(--ey-line);
border-radius:20px;
background:var(--ey-soft);
}
.eyewa-case .ey-suggest-card p{margin:0;font-size:15px;line-height:1.5;text-wrap:pretty}
.eyewa-case .ey-detail-plate{
display:grid;
place-items:center;
margin-top:8px;
padding:18px;
border-radius:14px;
background:#fff;
}
.eyewa-case .ey-detail-plate img{width:auto;max-width:100%;height:auto}
@keyframes ey-note{from{opacity:0;transform:translateY(18px) rotate(0deg)}to{opacity:1;transform:translateY(0) rotate(calc(var(--r) * 1.4deg))}}
.eyewa-case .ey-sortboard{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
gap:clamp(14px,2vw,26px);
margin:clamp(28px,3.4vw,44px) 0;
padding:clamp(24px,3vw,40px);
border:1px solid var(--ey-line);
border-radius:20px;
background:var(--ey-soft);
}
.eyewa-case .ey-note{
display:grid;
align-content:space-between;
aspect-ratio:1;
padding:14px;
background:#7ed2f0;
color:#0e2a33;
transform:rotate(calc(var(--r) * 1.4deg));
box-shadow:4px 6px 14px rgba(12,42,52,.18);
}
.eyewa-case .ey-sortboard.ey-play .ey-note{
animation:ey-note .6s cubic-bezier(.22,.68,0,1) both;
animation-delay:calc(var(--i,0) * 90ms);
}
.eyewa-case .ey-note span{
justify-self:end;
font-size:17px;
font-weight:700;
font-variant-numeric:tabular-nums;
opacity:.6;
}
.eyewa-case .ey-note b{align-self:end;font-size:14px;font-weight:600;line-height:1.25}
.eyewa-case .ey-caption{color:var(--ey-muted);font-size:13px}
.eyewa-case .ey-gallery{
display:grid;
grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));
gap:clamp(12px,1.6vw,22px);
margin:clamp(26px,3vw,40px) 0;
}
.eyewa-case .ey-fig{margin:clamp(26px,3vw,40px) 0;display:grid;gap:12px}
.eyewa-case .ey-gallery .ey-fig{margin:0;gap:10px}
.eyewa-case .ey-fig figcaption{color:var(--ey-muted);font-size:12px;line-height:1.5;text-wrap:pretty}
.eyewa-case .ey-fig figcaption b{display:block;color:var(--ey-ink);font-size:12px;font-weight:700}
.eyewa-case .ey-fig-plain{max-width:760px}
.eyewa-case .ey-fig-narrow{max-width:320px}
.eyewa-case .ey-fig-plain img{
width:100%;
height:auto;
border:1px solid var(--ey-line);
border-radius:18px;
background:var(--ey-paper);
}
.eyewa-case .shot.ey-shot{
display:block;
width:100%;
padding:0;
border:1px solid var(--ey-line);
border-radius:14px;
background:var(--ey-paper);
cursor:default;
overflow:hidden;
}
.eyewa-case .shot.ey-shot img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.eyewa-case .ey-fig-plain .shot.ey-shot{border-radius:18px}
.eyewa-case .ey-flow-pair{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(20px,2.6vw,36px);
margin:clamp(26px,3vw,40px) 0;
}
.eyewa-case .ey-flowcard{margin:0;gap:0}
.eyewa-case .ey-flowcard-tab{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:140px;
height:44px;
padding:0 24px;
border:1px solid var(--ey-line);
border-bottom:0;
border-radius:16px 16px 0 0;
background:var(--ey-paper);
}
.eyewa-case .ey-flowcard-tab img{max-width:96px;max-height:18px;width:auto;height:auto;object-fit:contain}
.eyewa-case .ey-flowcard .shot.ey-shot{border-top-left-radius:0}
.eyewa-case .ey-flowcard > figcaption:last-child{margin-top:12px}
.eyewa-case .ey-compare{display:grid;gap:clamp(24px,3vw,40px);margin:clamp(26px,3vw,40px) 0}
.eyewa-case .ey-compare-row{display:grid;gap:14px}
.eyewa-case .ey-compare-row .ey-gallery{margin:0}
.eyewa-case .ey-compare-label{
display:inline-flex;
align-items:center;
align-self:start;
justify-self:start;
padding:6px 13px;
border-radius:999px;
font-size:11px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
}
.eyewa-case .ey-compare-row[data-row="original"] .ey-compare-label{
border:1px solid var(--ey-line);
color:var(--ey-muted);
}
.eyewa-case .ey-compare-row[data-row="proposed"] .ey-compare-label{
background:var(--ey-accent);
color:#fff;
}
.eyewa-case .ey-compare-row[data-row="original"] .shot.ey-shot{opacity:.86}
.eyewa-case .ey-ba{margin:clamp(26px,3vw,40px) 0}
.eyewa-case .ey-ba header{display:flex;flex-wrap:wrap;gap:14px}
.eyewa-case .ey-ba-toggle{
display:flex;
border:1px solid var(--ey-line);
border-radius:999px;
background:var(--ey-paper);
overflow:hidden;
}
.eyewa-case .ey-ba-toggle button{
min-height:44px;
padding:0 20px;
border:0;
background:transparent;
color:var(--ey-muted);
cursor:pointer;
font:inherit;
font-size:13px;
font-weight:700;
transition:background-color .2s ease,color .2s ease;
}
.eyewa-case .ey-ba-toggle button:hover{color:var(--ey-ink)}
.eyewa-case .ey-ba-toggle button[aria-pressed="true"]{background:var(--ey-ink);color:#fff}
.eyewa-case .ey-ba-toggle button:focus-visible{outline:3px solid var(--ey-accent);outline-offset:-3px}
.eyewa-case .ey-ba-panel{display:none}
.eyewa-case .ey-ba-panel.is-active{display:block}
@media(max-width:900px){
.eyewa-case .ey-columns-3,.eyewa-case .ey-suggest,.eyewa-case .ey-flow-pair{grid-template-columns:minmax(0,1fr)}
.eyewa-case .ey-rail ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.eyewa-case .ey-rail-circles ol{grid-template-columns:repeat(2,minmax(0,1fr))}
.eyewa-case .ey-rail-track{display:none}
.eyewa-case .ey-gallery{--cols:3}
.eyewa-case .ey-funnel{grid-template-columns:minmax(0,1fr)}
.eyewa-case .ey-funnel-barzone{height:clamp(90px,18vw,140px)}
.eyewa-case .ey-funnel-drops{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:620px){
.eyewa-case .ey-gallery{--cols:2}
.eyewa-case .ey-rail ol,.eyewa-case .ey-rail-circles ol{grid-template-columns:minmax(0,1fr)}
}
.eyewa-case .case-hero-visual{grid-column:2;grid-row:1 / span 3;align-self:center;display:flex;gap:clamp(14px,1.8vw,26px);align-items:flex-start;margin-top:0}
.eyewa-case .case-hero > .eyebrow,.eyewa-case .case-hero > h1,.eyewa-case .case-hero > p{grid-column:1}
.eyewa-case .case-hero-visual .ey-hero-shot{flex:1;min-width:0;display:block;transform:translateY(calc(var(--h,0) * 16px))}
.eyewa-case .case-hero-visual .shot.ey-shot{display:block;width:100%}
.eyewa-case .case-hero-visual img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 10px 26px rgba(12,42,52,.12)}
@media(max-width:760px){.eyewa-case .case-hero-visual .ey-hero-shot{transform:none}}
@media(max-width:900px){.eyewa-case .case-hero-visual{grid-column:1;grid-row:auto;margin-top:30px;max-width:640px}}
@keyframes ey-rise{from{transform:translateY(16px)}to{transform:translateY(0)}}
.eyewa-case .ey-anim.ey-play .ey-anim-item{
animation:ey-rise .55s cubic-bezier(.22,.68,0,1) both;
animation-delay:calc(var(--i,0) * 70ms);
}
.eyewa-case .shot.ey-shot{transition:none}
.eyewa-case .shot.ey-shot:hover{transform:none;box-shadow:0 10px 28px rgba(25,28,22,.04)}
.eyewa-case .shot.ey-shot:hover img{transform:none;filter:none}
.eyewa-case .ey-suggest-card{transition:transform .35s cubic-bezier(.22,.68,0,1),box-shadow .35s cubic-bezier(.22,.68,0,1)}
.eyewa-case .ey-suggest-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(12,42,52,.10)}
.eyewa-case .ey-table tbody tr{transition:background-color .2s ease}
.eyewa-case .ey-table tbody tr:hover{background:rgba(12,42,52,.035)}
.eyewa-case .ey-note{transition:transform .3s cubic-bezier(.22,.68,0,1)}
.eyewa-case .ey-note:hover{transform:rotate(calc(var(--r,0) * 1deg)) translateY(-5px) scale(1.03)}
@keyframes ey-heatpulse{from{filter:saturate(1) contrast(1)}to{filter:saturate(1.4) contrast(1.07)}}
@keyframes ey-heat{from{transform:translate(-50%,-50%) scale(.9)}to{transform:translate(calc(-50% + 3px),calc(-50% - 4px)) scale(1.12)}}
.eyewa-case .ey-heatwrap{position:relative;display:block;overflow:hidden;border-radius:12px}
.eyewa-case .ey-heatlive img{animation:ey-heatpulse 3.8s ease-in-out infinite alternate}
.eyewa-case .ey-heatveil{position:absolute;inset:0;background:rgba(108,116,205,.34);mix-blend-mode:multiply;pointer-events:none}
.eyewa-case .ey-heatspot{
position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;
transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(198,24,24,var(--o,.8)) 0%,rgba(255,138,0,.6) 30%,rgba(255,224,70,.48) 52%,rgba(110,200,120,.3) 70%,transparent 82%);
filter:blur(5px);mix-blend-mode:hard-light;
animation:ey-heat 3.4s ease-in-out infinite alternate;
animation-delay:calc(var(--d,0) * 1s);
}
.eyewa-case .case-impact-summary{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3.4vw,44px)}
.eyewa-case .case-impact-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;border-top:2px solid var(--ey-ink,#17140f)}
.eyewa-case .case-impact-grid > .impact-card{
min-height:0!important;
gap:0!important;
padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,38px) clamp(20px,2.4vw,30px) 0!important;
}
.eyewa-case .case-impact-grid > .impact-card + .impact-card{padding-left:clamp(20px,2.6vw,38px)!important;border-left:1px solid var(--ey-line)}
.eyewa-case .case-impact-grid .impact-card::before{display:none}
.eyewa-case .case-impact-grid .impact-index{color:var(--ey-accent)}
.eyewa-case .case-impact-grid .impact-card strong{
margin:clamp(10px,1.2vw,16px) 0 0!important;
color:var(--ey-accent);
font-size:clamp(56px,7.4vw,104px);
font-weight:800;
letter-spacing:-.045em;
line-height:.9;
}
.eyewa-case .case-impact-grid .impact-unit{font-size:.44em;font-weight:700}
.eyewa-case .case-impact-grid .impact-caption{margin-top:10px!important;max-width:24ch;font-size:14px;line-height:1.5;text-wrap:pretty}
@media(max-width:640px){
.eyewa-case .case-impact-grid{grid-template-columns:minmax(0,1fr)!important}
.eyewa-case .case-impact-grid > .impact-card + .impact-card{padding-left:0!important;border-left:0;border-top:1px solid var(--ey-line)}
}
.eyewa-case .case-hero > .ey-hero-meta{grid-column:1;color:var(--ey-muted);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:14px}
.eyewa-case .case-hero > p strong{display:block;margin-bottom:10px;color:var(--ey-ink,#17140f);font-weight:700}
.eyewa-case .ey-retro{display:grid;gap:14px;margin:clamp(18px,2vw,26px) 0 0;padding:0;list-style:none}
.eyewa-case .ey-retro li{padding:0 0 14px;border-bottom:1px solid var(--ey-line);line-height:1.6}
.eyewa-case .ey-retro li:last-child{border-bottom:0}
.eyewa-case .ey-retro b{display:block;margin-bottom:2px}
.eyewa-case blockquote{
margin:clamp(30px,3.6vw,48px) 0 0;
padding:clamp(20px,2.4vw,30px) 0 0;
border-top:2px solid var(--ey-ink,#17140f);
color:var(--ey-ink,#17140f);
font-size:clamp(21px,2.3vw,29px);
font-weight:700;
letter-spacing:-.02em;
line-height:1.4;
max-width:30em;
text-wrap:balance;
}
.eyewa-case blockquote strong{color:var(--ey-accent);font-weight:inherit}
.eyewa-case .ey-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,44px);margin:clamp(20px,2.4vw,30px) 0 0;padding-top:clamp(22px,2.6vw,34px);border-top:2px solid var(--ey-ink,#17140f)}
.eyewa-case .ey-result{display:grid;gap:9px;align-content:start}
.eyewa-case .ey-result strong{font-size:clamp(44px,5.4vw,68px);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--ey-accent);font-variant-numeric:tabular-nums}
.eyewa-case .ey-result>span{color:var(--ey-muted);font-size:14px;line-height:1.5;max-width:26ch;text-wrap:pretty}
.eyewa-case .ey-results>p{grid-column:1/-1;margin:0;color:var(--ey-muted);font-size:14px;line-height:1.6;max-width:64ch}
@keyframes ey-dot{from{transform:scale(.45)}to{transform:scale(1)}}
.eyewa-case .ey-rail-dot{width:54px;height:54px;border:2px solid var(--ey-accent);font-size:13px;box-shadow:0 8px 20px rgba(207,63,48,.15)}
.eyewa-case .ey-rail-track{top:27px;height:2px}
.eyewa-case .ey-rail-circles .ey-rail-track{top:calc(clamp(58px,5.2vw,74px) / 2)}
.eyewa-case .ey-rail.ey-play .ey-rail-dot{animation:ey-dot .55s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--n,0) * 150ms + 260ms)}
.eyewa-case .ey-rail b{font-size:clamp(14px,1.3vw,16px)}
@keyframes ey-growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.eyewa-case .ey-funnel{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:0;row-gap:0}
.eyewa-case .ey-funnel-row{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:clamp(16px,2.4vw,36px);align-items:center;padding:clamp(12px,1.4vw,18px) 0}
.eyewa-case .ey-funnel-row + .ey-funnel-row{border-top:1px solid var(--ey-line)}
.eyewa-case .ey-funnel-head{display:grid;gap:4px}
.eyewa-case .ey-funnel-head b{font-size:clamp(14px,1.3vw,15px);line-height:1.3}
.eyewa-case .ey-funnel-head span{color:var(--ey-muted);font-size:12.5px;line-height:1.45;text-wrap:pretty}
.eyewa-case .ey-funnel-lane{display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);height:auto}
.eyewa-case .ey-funnel-bar{width:var(--h,100%);min-width:6px;height:clamp(32px,3.2vw,44px);min-height:0;border-radius:4px;background:color-mix(in oklab,var(--ey-accent) calc(100% - var(--f,0) * 32%),#f6ded9);transform-origin:left center}
.eyewa-case .ey-funnel.ey-play .ey-funnel-bar{animation:ey-growx 1s cubic-bezier(.22,.68,0,1) both;animation-delay:calc(var(--f,0) * 240ms)}
.eyewa-case .ey-funnel-val{font-size:clamp(16px,1.5vw,20px);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.eyewa-case .ey-funnel-gap{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:clamp(16px,2.4vw,36px)}
.eyewa-case .ey-gapin{grid-column:2;display:flex;align-items:baseline;gap:10px;padding:2px 0 4px;color:var(--ey-accent)}
.eyewa-case .ey-gapin i{font-style:normal;font-weight:700}
.eyewa-case .ey-gapin strong{font-size:clamp(19px,2vw,26px);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.eyewa-case .ey-gapin em{font-style:normal;color:var(--ey-muted);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:700px){
.eyewa-case .ey-funnel-row,.eyewa-case .ey-funnel-gap{grid-template-columns:minmax(0,1fr)}
.eyewa-case .ey-gapin{grid-column:1}
}
@media(prefers-reduced-motion:reduce){
.eyewa-case .ey-play .ey-odo-reel,
.eyewa-case .ey-rail.ey-play li,
.eyewa-case .ey-rail.ey-play .ey-rail-track::after,
.eyewa-case .ey-funnel.ey-play .ey-funnel-bar,
.eyewa-case .ey-sortboard.ey-play .ey-note,
.eyewa-case .ey-rail.ey-play .ey-rail-dot,
.eyewa-case .ey-funnel.ey-play .ey-funnel-bar,
.eyewa-case .ey-anim.ey-play .ey-anim-item{animation:none!important}
.eyewa-case .ey-heatlive img,.eyewa-case .ey-heatspot{animation:none!important}
.eyewa-case .shot.ey-shot,.eyewa-case .ey-suggest-card,.eyewa-case .ey-note{transition:none}
}
.eyewa-case-active .ey-overview {
margin: 56px 0 8px;
border-top: 2px solid var(--kfh-ink);
}
.eyewa-case-active .ey-ov-head {
display: grid;
gap: 12px;
padding: 30px 0 30px;
}
.eyewa-case-active .ey-ov-head h2 {
max-width: 26ch;
margin: 0;
font-size: clamp(30px, 3.6vw, 46px);
font-weight: 600;
line-height: 1.04;
letter-spacing: -.03em;
text-wrap: balance;
}
.eyewa-case-active .ey-ov-ladder {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0;
padding: 0;
border-top: 1px solid var(--kfh-line);
list-style: none;
}
.eyewa-case-active .ey-ov-ladder li {
display: grid;
align-content: start;
gap: 12px;
padding: 26px 30px 30px 0;
}
.eyewa-case-active .ey-ov-ladder li + li {
padding-left: 30px;
border-left: 1px solid var(--kfh-line);
}
.eyewa-case-active .ey-ov-step {
display: flex;
align-items: baseline;
gap: 10px;
color: var(--kfh-accent);
font-size: 11px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
.eyewa-case-active .ey-ov-step i {
font-style: normal;
font-variant-numeric: tabular-nums;
opacity: .5;
}
.eyewa-case-active .ey-ov-ladder p {
margin: 0;
color: var(--kfh-ink);
font-size: 15.5px;
line-height: 1.6;
text-wrap: pretty;
}
.eyewa-case-active .ey-ov-ladder b {
font-weight: 600;
color: var(--kfh-accent);
white-space: nowrap;
}
.eyewa-case-active .ey-ov-results {
position: relative;
overflow: hidden;
padding: 26px 30px 28px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(20, 18, 15, .88), rgba(20, 18, 15, .78));
backdrop-filter: blur(18px) saturate(1.3);
-webkit-backdrop-filter: blur(18px) saturate(1.3);
border: 1px solid rgba(255, 255, 255, .14);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 60px -30px rgba(20, 18, 15, .5);
color: #fff;
}
.eyewa-case-active .ey-ov-results::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(120% 90% at 8% 0%, rgba(255, 255, 255, .1), transparent 55%);
}
.eyewa-case-active .ey-ov-results-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.eyewa-case-active .ey-ov-results-top p {
margin: 0;
color: rgba(255, 255, 255, .5);
font-size: 12px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
}
.eyewa-case-active .ey-ov-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 32px;
}
.eyewa-case-active .ey-ov-metric {
display: grid;
align-content: start;
gap: 0 40px;
padding: 22px 0 4px;
}
.eyewa-case-active .ey-ov-metric + .ey-ov-metric {
padding-left: 32px;
border-left: 1px solid rgba(255, 255, 255, .16);
}
.eyewa-case-active .ey-ov-metric b {
display: flex;
align-items: baseline;
color: var(--kfh-accent);
font-size: clamp(44px, 4.6vw, 66px);
font-weight: 600;
line-height: .9;
letter-spacing: -.045em;
font-variant-numeric: tabular-nums;
}
.eyewa-case-active .ey-ov-metric b i {
font-style: normal;
font-size: .38em;
letter-spacing: -.02em;
}
.eyewa-case-active .ey-ov-metric-copy {
display: grid;
gap: 6px;
margin-top: 12px;
max-width: 34ch;
}
.eyewa-case-active .ey-ov-metric-label {
font-size: clamp(16px, 1.4vw, 19px);
font-weight: 600;
line-height: 1.15;
letter-spacing: -.02em;
}
.eyewa-case-active .ey-ov-metric-note {
color: rgba(255, 255, 255, .55);
font-size: 12.5px;
line-height: 1.5;
text-wrap: pretty;
}
.eyewa-case-active .ey-ov-results-foot {
max-width: 74ch;
margin: 20px 0 0;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, .16);
color: rgba(255, 255, 255, .5);
font-size: 12.5px;
line-height: 1.55;
text-wrap: pretty;
}
@media (max-width: 900px) {
.eyewa-case-active .ey-ov-ladder {
grid-template-columns: 1fr;
}
.eyewa-case-active .ey-ov-ladder li {
padding: 22px 0 24px;
}
.eyewa-case-active .ey-ov-ladder li + li {
padding-left: 0;
border-left: 0;
border-top: 1px solid var(--kfh-line);
}
.eyewa-case-active .ey-ov-results {
padding: 22px 20px 24px;
}
.eyewa-case-active .ey-ov-metrics {
grid-template-columns: 1fr;
}
.eyewa-case-active .ey-ov-metric {
gap: 10px;
padding: 18px 0;
}
.eyewa-case-active .ey-ov-metric + .ey-ov-metric {
padding-left: 0;
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .16);
}
.eyewa-case-active .ey-ov-results-top {
flex-wrap: wrap;
gap: 8px 20px;
}
}
.eyewa-case-active .ey-gallery-heat {
max-width: 100%;
gap: 26px 26px;
}
.eyewa-case-active .ey-gallery-heat .ey-heatwrap img {
width: 100%;
}
.eyewa-case .ey-sortboard {
grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
gap: 22px 18px;
padding: 34px 28px 38px;
border: 0;
border-radius: 4px;
background:
radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, .5), transparent 60%),
repeating-linear-gradient(92deg, rgba(120, 96, 66, .05) 0 2px, transparent 2px 7px),
linear-gradient(160deg, #e6ded1, #d9cfbe 60%, #cfc4b1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -30px 60px rgba(72, 56, 34, .1);
}
.eyewa-case .ey-note {
position: relative;
align-content: start;
aspect-ratio: 3 / 2.15;
padding: 12px 14px 14px;
border: 0;
border-radius: 2px;
background:
linear-gradient(180deg, transparent 27px, rgba(70, 110, 170, .16) 27px 28px, transparent 28px),
repeating-linear-gradient(180deg, transparent 0 21px, rgba(70, 110, 170, .11) 21px 22px),
linear-gradient(#fffdf6, #fdf8ea);
box-shadow:
0 1px 1px rgba(60, 45, 25, .16),
2px 8px 16px rgba(60, 45, 25, .17),
8px 20px 34px rgba(60, 45, 25, .1);
}
.eyewa-case .ey-note::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
background: rgba(196, 74, 58, .5);
}
.eyewa-case .ey-note span {
justify-self: start;
width: 22px;
height: 22px;
display: grid;
place-items: center;
border: 1px solid rgba(60, 45, 25, .3);
border-radius: 50%;
color: rgba(52, 44, 32, .62);
font-family: "Caveat", ui-sans-serif, cursive;
font-size: 15px;
font-weight: 700;
opacity: 1;
}
.eyewa-case .ey-note b {
align-self: start;
margin-top: 6px;
color: #26304a;
font-family: "Caveat", ui-sans-serif, cursive;
font-size: 25px;
font-weight: 600;
line-height: 1.06;
letter-spacing: .01em;
}
.eyewa-case .ey-note:nth-child(2n) b { transform: rotate(-.6deg); }
.eyewa-case .ey-note:nth-child(3n) b { transform: rotate(.7deg); }
.eyewa-case .ey-note:hover {
transform: rotate(calc(var(--r, 0) * 1deg)) translateY(-6px) scale(1.035);
box-shadow:
0 1px 1px rgba(60, 45, 25, .16),
4px 14px 26px rgba(60, 45, 25, .22),
12px 30px 50px rgba(60, 45, 25, .12);
}
.eyewa-case-active .ey-gallery-iter {
gap: 22px 20px;
align-items: start;
}
.eyewa-case-active .ey-gallery-iter figcaption b {
display: block;
margin-bottom: 4px;
color: var(--kfh-ink);
font-size: 13px;
font-weight: 600;
letter-spacing: -.005em;
}
@media (max-width: 700px) {
.eyewa-case-active .ey-gallery-iter {
--cols: 2;
}
}
.eyewa-case-active .ey-gallery-pair {
max-width: 560px;
}
.eyewa-case-active .ey-ov-results {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(22px, 3vw, 34px);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 16px;
background:
linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 36%),
rgba(21, 23, 27, .86);
color: #f7f5f2;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .18),
0 28px 70px -38px rgba(8, 10, 14, .82);
backdrop-filter: blur(26px) saturate(1.2);
-webkit-backdrop-filter: blur(26px) saturate(1.2);
}
.eyewa-case-active .ey-ov-results::before {
display: block;
content: "";
position: absolute;
z-index: -1;
inset: 1px;
border-radius: 15px;
background: linear-gradient(112deg, rgba(255, 255, 255, .06), transparent 28%, transparent 76%, rgba(255, 255, 255, .025));
pointer-events: none;
}
.eyewa-case-active .ey-ov-results-top {
padding-bottom: 18px;
border-bottom-color: rgba(255, 255, 255, .14);
}
.eyewa-case-active .ey-ov-results .ey-ov-step {
color: #f7f5f2;
}
.eyewa-case-active .ey-ov-results-top p {
color: #aeb2ba;
}
.eyewa-case-active .ey-ov-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 22px;
}
.eyewa-case-active .ey-ov-metric {
min-width: 0;
padding: 24px 0 8px;
}
.eyewa-case-active .ey-ov-metric + .ey-ov-metric {
padding-left: 22px;
border-left-color: rgba(255, 255, 255, .14);
}
.eyewa-case-active .ey-ov-metric b {
color: #e2b88f;
font-size: clamp(42px, 4.4vw, 64px);
letter-spacing: -.045em;
}
.eyewa-case-active .ey-ov-evidence-tag {
color: #b9bdc5;
font-size: 10px;
font-weight: 800;
letter-spacing: .14em;
line-height: 1.2;
text-transform: uppercase;
}
.eyewa-case-active .ey-ov-metric-label {
color: #f8f7f4;
}
.eyewa-case-active .ey-ov-metric-note {
color: #bfc2c8;
}
.eyewa-case-active .ey-ov-metric.is-modeled {
grid-column: 1 / -1;
grid-template-columns: minmax(190px, .42fr) minmax(0, 1fr);
align-self: stretch;
align-items: center;
gap: 18px 30px;
margin: 18px 0 0;
padding: 18px 22px;
border: 1px solid rgba(226, 184, 143, .28);
border-radius: 14px;
background: rgba(226, 184, 143, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.eyewa-case-active .ey-ov-metric.is-modeled .ey-ov-metric-copy {
max-width: none;
margin-top: 0;
}
.eyewa-case-active .ey-ov-metric.is-modeled b,
.eyewa-case-active .ey-ov-metric.is-modeled .ey-ov-metric-label {
color: #f0dfcf;
}
.eyewa-case-active .ey-ov-metric.is-modeled .ey-ov-evidence-tag,
.eyewa-case-active .ey-ov-metric.is-modeled .ey-ov-metric-note {
color: #c7b4a2;
}
.eyewa-case-active .ey-ov-results-foot {
max-width: none;
border-top-color: rgba(255, 255, 255, .14);
color: #aeb2ba;
}
.eyewa-case .ey-suggest-card-merged {
grid-column: 1 / -1;
gap: 16px;
padding: clamp(18px, 2.2vw, 26px);
border-radius: 16px;
}
.eyewa-case .ey-suggest-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.eyewa-case .ey-suggest-item {
display: grid;
align-content: start;
gap: 10px;
min-width: 0;
}
.eyewa-case .ey-suggest-item p {
min-height: 2.8em;
font-weight: 650;
}
.eyewa-case .ey-suggest-card-merged .ey-detail-plate {
margin-top: 0;
min-height: 112px;
padding: 10px;
border: 1px solid var(--ey-line);
border-radius: 12px;
}
.eyewa-case .ey-suggest-card-merged .ey-detail-plate img {
width: 100%;
max-height: 170px;
object-fit: contain;
}
@media (min-width: 701px) and (max-width: 900px) {
.eyewa-case-active .ey-ov-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.eyewa-case-active .ey-ov-metric {
gap: 0;
padding: 22px 0 6px;
}
.eyewa-case-active .ey-ov-metric + .ey-ov-metric {
padding-left: 18px;
border-top: 0;
border-left: 1px solid rgba(255, 255, 255, .14);
}
.eyewa-case-active .ey-ov-metric + .ey-ov-metric.is-modeled {
margin-top: 16px;
padding: 16px 18px;
border-left: 1px solid rgba(226, 184, 143, .28);
}
}
@media (max-width: 700px) {
.eyewa-case-active .ey-ov-metrics {
grid-template-columns: 1fr;
}
.eyewa-case-active .ey-ov-metric + .ey-ov-metric {
padding-left: 0;
border-left: 0;
border-top-color: rgba(255, 255, 255, .14);
}
.eyewa-case-active .ey-ov-metric + .ey-ov-metric.is-modeled {
grid-template-columns: 1fr;
gap: 8px;
margin-top: 8px;
padding: 16px;
border-top: 1px solid rgba(226, 184, 143, .28);
border-left: 1px solid rgba(226, 184, 143, .28);
}
}
@keyframes ey-process-line {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes ey-process-step {
from { opacity: .2; clip-path: inset(0 0 100% 0); transform: translateY(24px); }
to { opacity: 1; clip-path: inset(0); transform: translateY(0); }
}
@keyframes ey-process-node {
0% { background: var(--ey-paper); color: var(--ey-accent); transform: scale(.7); box-shadow: 0 0 0 rgba(143, 48, 43, 0); }
65% { background: var(--ey-accent); color: #fff; transform: scale(1.08); box-shadow: 0 12px 26px rgba(143, 48, 43, .28); }
100% { background: var(--ey-accent); color: #fff; transform: scale(1); box-shadow: 0 8px 18px rgba(143, 48, 43, .2); }
}
.eyewa-case #eyewa-1 .ey-rail.ey-play .ey-rail-track::after {
animation: ey-process-line 1.5s cubic-bezier(.16, 1, .3, 1) both;
}
.eyewa-case #eyewa-1 .ey-rail.ey-play li {
animation: ey-process-step .72s cubic-bezier(.16, 1, .3, 1) both;
animation-delay: calc(var(--n, 0) * 170ms + 180ms);
}
.eyewa-case #eyewa-1 .ey-rail.ey-play .ey-rail-dot {
animation: ey-process-node .66s cubic-bezier(.16, 1, .3, 1) both;
animation-delay: calc(var(--n, 0) * 170ms + 260ms);
}
.eyewa-case-active .ey-gallery-heat {
--cols: 3;
width: min(100%, 650px);
margin-inline: auto;
gap: 16px;
}
.eyewa-case-active .ey-gallery-heat .ey-heatwrap img {
max-height: 430px;
object-fit: contain;
}
@media (max-width: 700px) {
.eyewa-case-active .ey-gallery-heat {
--cols: 3;
gap: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.eyewa-case #eyewa-1 .ey-rail.ey-play li,
.eyewa-case #eyewa-1 .ey-rail.ey-play .ey-rail-dot,
.eyewa-case #eyewa-1 .ey-rail.ey-play .ey-rail-track::after {
animation: none;
}
}
@media (max-width: 520px) {
.eyewa-case .ey-suggest-grid {
grid-template-columns: 1fr;
}
.eyewa-case .ey-suggest-item p {
min-height: 0;
}
}

/* ===== resume.css ===== */
.resume-active .site-header{background:var(--paper);border-color:var(--line)}
.resume-page{width:min(calc(100% - 48px),var(--max));margin:0 auto;padding:clamp(120px,10vw,150px) 0 120px}
.resume-crumb{margin:0 0 18px;color:var(--muted);font-size:13px}
.resume-crumb a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.resume-crumb a:hover{color:var(--ink)}
.resume-head{padding:36px 40px;border-radius:26px;background:linear-gradient(120deg,#fff3e9 0%,#fdeee9 45%,#f4f1eb 100%)}
.resume-head-row{display:flex;gap:28px;align-items:center}
.resume-photo{width:112px;height:112px;flex:0 0 auto;border-radius:50%;object-fit:cover;border:3px solid var(--card);box-shadow:0 8px 24px rgba(23,25,20,.14)}
.resume-head-copy h1{margin:0;font-size:clamp(38px,4.6vw,54px);font-weight:640;letter-spacing:-.03em;line-height:1}
.resume-role-title{margin:8px 0 0;font-size:clamp(16px,1.6vw,19px);font-weight:600;color:var(--coral)}
.resume-meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin:14px 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.resume-meta li{display:flex;align-items:center;gap:6px}
.resume-meta a{color:var(--muted);text-decoration:none}
.resume-meta a:hover{color:var(--ink)}
.resume-copy-btn{display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border:1px solid var(--line);border-radius:7px;background:none;color:var(--muted);cursor:pointer;transition:.2s ease}
.resume-copy-btn svg{width:13px;height:13px}
.resume-copy-btn:hover{border-color:var(--ink);color:var(--ink)}
.resume-copy-btn.is-copied{border-color:var(--coral);background:var(--coral);color:#171914}
.resume-visa{display:inline-flex;margin-top:16px;padding:7px 16px;border:1px solid var(--coral);border-radius:999px;background:rgba(255,107,74,.12);color:#c1401f;font-size:13px;font-weight:700;letter-spacing:-.005em}
.resume-head-actions{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.resume-download{background:var(--ink);color:var(--card);border-color:var(--ink)}
.resume-download:hover{background:var(--coral);border-color:var(--coral);color:#171914}
.resume-back{color:var(--ink);border:1px solid var(--line);background:none}
.resume-back:hover{border-color:var(--ink)}
.resume-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;margin-top:48px;align-items:start}
.resume-section-title{margin:0 0 26px;padding-bottom:10px;border-bottom:3px solid var(--coral);font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.resume-role{position:relative;padding:24px 0 24px 22px;border-top:1px solid var(--line);border-left:3px solid;border-left-color:hsl(calc(14 + var(--i,0)*28),78%,58%)}
.resume-role:first-of-type{border-top:0;padding-top:0}
.resume-role-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.resume-role-head h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em}
.resume-role-dates{font-size:13px;color:var(--muted);white-space:nowrap}
.resume-role-org{margin:4px 0 0;font-size:14px;font-weight:600;color:var(--coral)}
.resume-role-bullets{margin:12px 0 0;padding-left:20px}
.resume-role-bullets li{margin:6px 0;font-size:15px;line-height:1.55;color:#3c3f37}
.resume-side{position:sticky;top:110px;display:grid;gap:20px}
.resume-side-card{padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.resume-side-card h2{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}
.resume-side-card p{margin:0;font-size:14px;line-height:1.58;color:#3c3f37}
.resume-skill-group{margin:0 0 4px}
.resume-skill-group:last-child{margin-bottom:0}
.resume-skill-group b{display:block;margin-bottom:3px;color:var(--ink);font-size:12.5px;font-weight:700}
.resume-pill-row{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.resume-pill-row:last-child{margin-bottom:0}
.resume-pill{padding:4px 10px;border-radius:999px;background:rgba(23,25,20,.06);color:#3c3f37;font-size:11.5px;font-weight:600}
.resume-pill-row.is-accent-a .resume-pill{background:rgba(255,107,74,.12);color:#c1401f}
.resume-pill-row.is-accent-b .resume-pill{background:rgba(52,131,111,.14);color:#256b57}
.resume-pill-row.is-accent-c .resume-pill{background:rgba(90,98,214,.13);color:#3d43a8}
@media(max-width:900px){
.resume-body{grid-template-columns:1fr}
.resume-side{position:static}
.resume-head-row{flex-wrap:wrap}
}
@media(max-width:560px){
.resume-photo{width:72px;height:72px}
.resume-head-copy h1{font-size:34px}
}

/* ===== harmony-editorial.css ===== */

body.harmony-case-active {
--kfh-ink: #090909;
--kfh-muted: #5f5e66;
--kfh-paper: #ffffff;
--kfh-soft: #f7f7f6;
--kfh-line: #e5e5e3;
--hm-green: #1e8055;
--hm-green-dark: #166342;
--hm-green-soft: #e9f6ef;
--ink: var(--kfh-ink);
--muted: var(--kfh-muted);
--paper: var(--kfh-paper);
--card: var(--kfh-paper);
--line: var(--kfh-line);
background: var(--kfh-paper);
color: var(--kfh-ink);
}
.harmony-case-active .hm-case {
--hm-accent: #1e8055;
--hm-accent-ink: #166342;
}
.harmony-case-active .case {
width: min(calc(100% - 48px), 1280px);
padding: 22px 0 128px;
}
.harmony-case-active .case .case-hero {
min-height: min(600px, calc(100vh - 260px));
gap: 18px clamp(32px, 5vw, 72px);
padding: clamp(20px, 3vw, 36px) 0 clamp(48px, 6vw, 80px);
border-bottom: 1px solid var(--kfh-line);
border-radius: 0;
background: var(--kfh-paper);
color: var(--kfh-ink);
}
.harmony-case-active .case .case-hero::after { display: none; }
.harmony-case-active .case .case-hero > .eyebrow { color: var(--hm-green); }
.harmony-case-active .case .case-hero > h1 {
max-width: 680px;
color: var(--kfh-ink);
font-size: clamp(48px, 5.5vw, 76px);
line-height: .96;
letter-spacing: -.065em;
}
.harmony-case-active .case .case-hero > p {
max-width: 570px;
color: var(--kfh-muted);
font-size: clamp(18px, 1.55vw, 21px);
line-height: 1.55;
}
.harmony-case-active .case-crumb a { color: var(--kfh-muted); }
.harmony-case-active .case-crumb b { color: var(--kfh-ink); }
.harmony-case-active .hm-case .hm-brandmark {
padding: 0;
border-radius: 0;
background: transparent;
}
.harmony-case-active .hm-case .hm-hero .hm-tag {
border-color: var(--kfh-line);
background: transparent;
color: var(--kfh-muted);
}
.harmony-case-active .hm-hero-panel {
border: 1px solid var(--kfh-line);
border-radius: 0;
background: var(--kfh-soft);
box-shadow: none;
}
.harmony-case-active .hm-hero-caption { color: var(--kfh-muted); }
.harmony-case-active .hm-hero-caption b { color: var(--kfh-ink); }
.harmony-case-active .case-facts { gap: 36px; margin: 0 0 clamp(92px, 11vw, 150px); }
.harmony-case-active .fact {
padding: 26px 0 0;
border: 0;
border-top: 1px solid var(--kfh-line);
border-radius: 0;
background: transparent;
color: var(--kfh-muted);
}
.harmony-case-active .fact .eyebrow { color: var(--hm-green); }
.harmony-case-active .fact b { color: var(--kfh-ink); font-size: 17px; }
.harmony-case-active .long-study {
grid-template-columns: 218px minmax(0, 900px);
gap: clamp(52px, 7vw, 96px);
justify-content: space-between;
padding: 0;
}
.harmony-case-active .study-toc { top: 108px; padding-top: 20px; border-top: 1px solid var(--kfh-line); }
.harmony-case-active .study-toc > .eyebrow { margin-bottom: 14px; color: var(--hm-green); }
.harmony-case-active .study-toc a {
min-height: 0;
padding: 9px 0 9px 14px;
border-left: 2px solid transparent;
color: var(--kfh-muted);
font-size: 12px;
line-height: 1.25;
}
.harmony-case-active .study-toc a:hover { color: var(--kfh-ink); }
.harmony-case-active .study-toc a.active {
border-left-color: var(--hm-green);
color: var(--kfh-ink);
font-weight: 750;
}
.harmony-case-active .hm-case .chapter {
margin: 0;
padding: 24px 0 clamp(100px, 11vw, 148px);
border-top: 1px solid var(--kfh-line);
border-radius: 0;
background: transparent;
color: var(--kfh-ink);
scroll-margin-top: 104px;
}
.harmony-case-active .hm-case .chapter-num {
color: var(--hm-green);
letter-spacing: .12em;
text-transform: uppercase;
}
.harmony-case-active .hm-case .chapter h2 {
max-width: 800px;
margin: 14px 0 28px;
color: var(--kfh-ink);
font-size: clamp(48px, 5.8vw, 76px);
line-height: .98;
letter-spacing: -.065em;
}
.harmony-case-active .hm-case .chapter h3 {
max-width: 740px;
margin: 50px 0 14px;
color: var(--kfh-ink);
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.18;
letter-spacing: -.025em;
}
.harmony-case-active .hm-case .chapter p,
.harmony-case-active .hm-case .chapter li {
max-width: 68ch;
color: var(--kfh-muted);
font-size: 17px;
line-height: 1.75;
}
.harmony-case-active .hm-case .long-study .chapter p.hm-lead {
max-width: 62ch;
color: var(--kfh-muted);
font-size: clamp(19px, 2vw, 23px);
line-height: 1.58;
}
.harmony-case-active .hm-case .finding {
padding: 22px 0 0;
border: 0;
border-top: 1px solid var(--kfh-ink);
border-radius: 0;
background: transparent;
}
.harmony-case-active .hm-case .finding.accent {
border-left: 0;
border-top: 2px solid var(--hm-green);
background: transparent;
}
.harmony-case-active .hm-case .long-study .chapter .finding.accent p { color: var(--kfh-ink); }
.harmony-case-active .hm-rail-node,
.harmony-case-active .hm-phase,
.harmony-case-active .hm-doc,
.harmony-case-active .hm-micro-item {
border: 0;
border-top: 1px solid var(--kfh-line);
border-radius: 0;
background: transparent;
padding-inline: 0;
}
.harmony-case-active .hm-rail-node:hover,
.harmony-case-active .hm-rail-node:focus-visible {
transform: none;
border-top-color: var(--hm-green);
box-shadow: none;
}
.harmony-case-active .hm-phase { border-top: 2px solid var(--hm-green); }
.harmony-case-active .hm-micro-stage { border-radius: 0; background: var(--kfh-soft); }
.harmony-case-active .hm-sev,
.harmony-case-active .hm-states,
.harmony-case-active .hm-drift,
.harmony-case-active .hm-mx-scroll,
.harmony-case-active .hm-case .hm-board-cell,
.harmony-case-active .hm-c-dialog {
border: 1px solid var(--kfh-line);
border-radius: 0;
background: var(--kfh-paper);
}
.harmony-case-active .hm-case .hm-board-stage { border-radius: 0; background: var(--kfh-soft); }
.harmony-case-active .hm-sev-track { background: var(--kfh-soft); }
.harmony-case-active .hm-token {
border: 1px solid var(--kfh-line);
border-radius: 0;
background: var(--kfh-paper);
}
.harmony-case-active .hm-token:hover {
transform: none;
border-color: var(--hm-green);
box-shadow: none;
}
.harmony-case-active .hm-token.is-copied::after { background: var(--hm-green); color: #fff; }
.harmony-case-active .hm-fig .hm-shot,
.harmony-case-active .hm-mood-tile .hm-shot {
border-radius: 0;
border-color: var(--kfh-line);
background: var(--kfh-soft);
}
.harmony-case-active .hm-fig .hm-shot:hover,
.harmony-case-active .hm-mood-tile .hm-shot:hover { transform: none; box-shadow: none; }
.harmony-case-active .pill.hm-pill {
border: 1px solid var(--kfh-line);
border-radius: 999px;
background: transparent;
color: var(--kfh-muted);
}
.harmony-case-active .hm-pill:hover { box-shadow: inset 0 -2px 0 var(--hm-green); }
.harmony-case-active .hm-rules li span { color: var(--hm-green); }
.harmony-case-active .hm-rail-num { color: var(--hm-green); }
.harmony-case-active .hm-rail-dot { border-color: var(--hm-green); }
.harmony-case-active .hm-rail-node:hover .hm-rail-dot { background: var(--hm-green); }
.harmony-case-active .hm-state-tab.is-active { background: var(--hm-green); color: #fff; }
.harmony-case-active .hm-state-tab:focus-visible,
.harmony-case-active .hm-token:focus-visible,
.harmony-case-active .hm-roll-tab:focus-visible,
.harmony-case-active .hm-fig .hm-shot:focus-visible,
.harmony-case-active .hm-mood-tile .hm-shot:focus-visible {
outline: 3px solid var(--hm-green);
outline-offset: 3px;
}
.harmony-case-active .hm-state-demo[data-state=focus] .hm-demo-btn { box-shadow: 0 0 0 3px rgba(30, 128, 85, .45); }
.harmony-case-active .hm-state-demo[data-state=focus] .hm-demo-field input { border-color: var(--hm-green); box-shadow: 0 0 0 3px rgba(30, 128, 85, .25); }
.harmony-case-active .hm-demo-btn { border-radius: 8px; }
.harmony-case-active .hm-demo-field input { border-radius: 8px; }
.harmony-case-active .hm-micro-btn-ghost:focus-visible,
.harmony-case-active .hm-micro-item[data-micro=focus]:hover .hm-micro-btn-ghost { box-shadow: 0 0 0 3px rgba(30, 128, 85, .4); }
.harmony-case-active .hm-micro-confirm i { border-color: var(--hm-green); }
.harmony-case-active .hm-micro-item[data-micro=confirm]:hover .hm-micro-confirm i { background: var(--hm-green); }
.harmony-case-active .hm-roll-tab { border-radius: 0; background: var(--kfh-paper); }
.harmony-case-active .hm-roll-tab:hover { transform: none; border-color: var(--hm-green); box-shadow: none; }
.harmony-case-active .hm-roll-tab.is-active { border-color: var(--hm-green); background: var(--hm-green-soft); }
.harmony-case-active .hm-roll-tab.is-active span { color: var(--hm-green-dark); }
.harmony-case-active .hm-mx td.is-on i { background: var(--hm-green); box-shadow: 0 0 0 4px rgba(30, 128, 85, .16); }
.harmony-case-active .hm-mx td.is-cross,
.harmony-case-active .hm-mx th.is-cross { background: var(--hm-green-soft); }
.harmony-case-active .hm-mx tr.is-cross th[scope=row],
.harmony-case-active .hm-mx th.is-cross span,
.harmony-case-active .hm-mx-bandhead b { color: var(--hm-green-dark); }
.harmony-case-active .hm-mx-ship td,
.harmony-case-active .hm-mx-ship th { background: rgba(30, 128, 85, .05); }
.harmony-case-active .hm-mx-key.is-on i { background: var(--hm-green); }
.harmony-case-active .hm-case .hm-quote,
.harmony-case-active .hm-case .hm-validation {
border-radius: 0;
background: var(--kfh-ink);
}
.harmony-case-active .hm-validation-list li::before { background: var(--hm-green); }
.harmony-case-active .hm-progress i { background: var(--hm-green); }
.harmony-case-active .hm-sev .hm-sev-bar[style*="#77e89c"] { background: var(--hm-green); }
.harmony-case-active .hm-case .hm-metrics {
border: 0;
border-radius: 0;
background: transparent;
gap: 22px;
overflow: visible;
}
.harmony-case-active .hm-case .hm-metric {
padding: 20px 0 0;
border: 0 !important;
border-top: 1px solid var(--kfh-ink) !important;
}
.harmony-case-active .hm-case .hm-metric::before { display: none; }
.harmony-case-active .hm-case .hm-metric strong { color: var(--kfh-ink); }
.harmony-case-active .hm-case .hm-metric:hover strong { color: var(--hm-green-dark); }
.harmony-case-active .hm-metric-method { margin-top: 26px; background: var(--hm-green-soft); }
.harmony-case-active .hm-metric-method h3 { margin-top: 0; }
.harmony-case-active .hm-formula { white-space: nowrap; color: var(--hm-green-dark); font-weight: 750; }
.harmony-case-active .hm-case .case-end.hm-end {
border-radius: 0;
background: var(--kfh-ink);
}
.harmony-case-active .hm-case .hm-end-statement em { color: #6fdca6; }
.harmony-case-active .hm-case .hm-end-cta:hover { background: #6fdca6; border-color: #6fdca6; color: var(--kfh-ink); }
@media (max-width: 900px) {
.harmony-case-active .long-study {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.harmony-case-active .long-study > * {
min-width: 0;
}
.harmony-case-active .hm-stretch-item {
width: 100% !important;
min-width: 0;
}
.harmony-case-active .hm-case .hm-metric:nth-child(even) { border-left: 0 !important; }
}
.harmony-case-active .mobile-toc-trigger { display: none; }
.harmony-case-active .hm-toc .toc-links { display: block; }
@media (max-width: 900px) {
.harmony-case-active .study-toc.hm-toc {
position: sticky !important;
top: 82px !important;
z-index: 15;
display: block;
margin: 0 0 48px;
padding: 0 !important;
overflow: visible;
border: 1px solid var(--kfh-line) !important;
border-radius: 14px;
background: #fff;
box-shadow: 0 12px 32px rgba(9, 9, 9, .08);
}
.harmony-case-active .hm-toc > .eyebrow { display: none; }
.harmony-case-active .mobile-toc-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 66px;
padding: 10px 16px;
border: 0;
border-radius: 14px;
background: transparent;
color: var(--kfh-ink, #111);
text-align: left;
cursor: pointer;
}
.harmony-case-active .mobile-toc-trigger span { display: grid; min-width: 0; padding-right: 16px; }
.harmony-case-active .mobile-toc-trigger small {
color: var(--hm-green);
font-size: 9px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.harmony-case-active .mobile-toc-trigger b { font-size: 14px; }
.harmony-case-active .mobile-toc-trigger i {
position: relative;
display: grid;
width: 36px;
height: 36px;
flex: 0 0 36px;
place-items: center;
border: 1px solid var(--kfh-line);
border-radius: 50%;
font-style: normal;
transition: border-color .2s ease, background-color .2s ease;
}
.harmony-case-active .mobile-toc-trigger i::before {
content: "";
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.harmony-case-active .hm-toc .toc-links {
display: none;
max-height: min(60vh, 430px);
padding: 4px 14px 14px;
overflow-y: auto;
border-top: 1px solid var(--kfh-line);
}
.harmony-case-active .hm-toc.toc-open .toc-links { display: block; }
.harmony-case-active .hm-toc.toc-open .mobile-toc-trigger i {
border-color: rgba(30, 128, 85, .3);
background: var(--hm-green-soft);
}
.harmony-case-active .hm-toc.toc-open .mobile-toc-trigger i::before {
transform: translateY(2px) rotate(225deg);
}
.harmony-case-active .hm-toc a { min-height: 46px; }
}

/* ===== talon.css ===== */

body.talon-case-active{
--kfh-accent:#2f62e9;
--kfh-accent-dark:#2a56d4;
--kfh-accent-soft:#edf2fe;
}
.talon-case .tl-bigshot{display:block;width:100%}
.talon-case .tl-bigshot img{display:block;width:100%;height:auto;object-fit:contain;border-radius:14px;border:1px solid var(--kfh-line,#e5e5e3);background:#fff}
.talon-case .tl-bigshot.tl-matte img{padding:clamp(14px,2.4vw,28px)}
.talon-case .case-hero-visual .media-open{cursor:default}
.talon-case .case-hero-visual .media-open:hover{transform:none;box-shadow:none;border-color:var(--kfh-line,#e5e5e3)}
@media (min-width:981px){
body.talon-case-active .case .case-hero{grid-template-columns:minmax(0,.78fr) minmax(480px,1.22fr);align-items:center}
.talon-case .case-hero-visual img{width:min(112%,calc(100% + 56px));max-width:none}
body.talon-case-active .case .case-hero > p{max-width:46ch}
}
.talon-case .case-hero-visual{align-self:center}
.talon-case .case-hero-visual .media-open{padding:0;border:0;background:transparent;overflow:visible}
.talon-case .case-hero-visual img{display:block;width:100%;height:auto;border:1px solid var(--kfh-line,#e5e5e3);border-radius:18px;background:#fff;box-shadow:0 18px 34px rgba(15,23,42,.08),0 44px 96px rgba(15,23,42,.14)}
@media (max-width:980px){body.talon-case-active .case .case-hero{grid-template-columns:1fr}.talon-case .case-hero-visual img{box-shadow:0 24px 60px rgba(15,23,42,.12)}}
.talon-case .media-grid img{background:#fff}
.tl-sprint{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:34px 0 8px;padding:0;list-style:none}
.tl-sprint>li{position:relative;padding:26px 20px 22px !important;border:1px solid var(--kfh-line,#e5e5e3);border-radius:16px;background:#fff;display:flex;flex-direction:column;gap:10px;overflow:hidden;max-width:none !important}
.tl-sprint .tl-num{position:absolute;top:2px;right:10px;font-size:72px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--kfh-accent-soft,#edf2fe);pointer-events:none}
.tl-sprint .tl-day{position:relative;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--kfh-accent,#2f62e9);font-weight:700}
.tl-sprint h4{position:relative;margin:0;font-size:21px;line-height:1.2;color:var(--kfh-ink,#090909)}
.tl-sprint>li>ul{position:relative;margin:2px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.tl-sprint>li>ul li{font-size:14px !important;line-height:1.5 !important;color:var(--kfh-muted,#5f5e66);padding-left:14px;position:relative;max-width:none !important}
.tl-sprint>li>ul li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--kfh-accent,#2f62e9);opacity:.55}
.tl-wall{margin:34px 0 8px;padding:34px 0;border:1px solid var(--kfh-line,#e5e5e3);border-radius:16px;background:#fff;display:grid;gap:38px;overflow:hidden}
.tl-wall-row{display:flex;overflow:hidden;--dur:38s;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tl-wall-track{display:flex;align-items:center;gap:78px;padding-right:78px;flex:none;min-width:100%;animation:tl-scroll var(--dur) linear infinite}
.tl-wall-row[data-dir="rtl"] .tl-wall-track{animation-direction:reverse}
.tl-wall-track img{height:46px;width:auto;flex:none}
.tl-wall:hover .tl-wall-track{animation-play-state:paused}
@keyframes tl-scroll{to{transform:translateX(-100%)}}
.tl-logo-cards{display:flex;flex-wrap:wrap;gap:18px;margin:34px 0 8px}
.tl-logo-cards figure{flex:1 1 240px;margin:0;display:grid;place-items:center;padding:44px 30px;border:1px solid var(--kfh-line,#e5e5e3);border-radius:16px;background:#fff}
.tl-logo-cards img{width:min(280px,84%);height:auto;animation:tl-float 5.5s ease-in-out infinite;animation-delay:calc(var(--i,0)*.7s)}
@keyframes tl-float{50%{transform:translateY(-7px)}}
.tl-flow{margin:34px 0 8px;padding:clamp(28px,4vw,44px) clamp(16px,3vw,30px);border:1px solid var(--kfh-line,#e5e5e3);border-radius:16px;background:#fff;display:grid;justify-items:center}
.tl-n{display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;border-radius:12px;font-size:15px;line-height:1.35;text-align:center;background:#e9e7fb;color:#33305f;border:1.5px solid transparent}
.tl-n-green{background:#eef3c8;color:#3d411b}
.tl-n-ghost{background:#fff;border:1.5px dashed #a39e93;color:#33302a}
.tl-n-plain{background:#fff;border:1.5px solid var(--kfh-line,#ddd9d0);color:#33302a}
.tl-n-gray{background:#eceae4;color:#33302a}
.tl-n-hot{border-color:var(--kfh-accent,#2f62e9);box-shadow:0 0 0 3px rgba(47,98,233,.16);color:var(--kfh-accent,#2f62e9);font-weight:600}
.tl-frow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.tl-fline{width:2px;height:32px;background:#cfcbc2;position:relative;margin:4px 0;transform-origin:top}
.tl-fline::after{content:"";position:absolute;left:50%;bottom:0;width:8px;height:8px;border-right:2px solid #cfcbc2;border-bottom:2px solid #cfcbc2;transform:translateX(-50%) rotate(45deg)}
.tl-fcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;align-items:start;margin-top:4px}
.tl-fcol{display:grid;gap:10px;justify-items:stretch;padding:18px 14px;border-radius:14px;background:var(--kfh-soft,#f7f7f6);border:1px solid var(--kfh-line,#eceae2)}
.tl-fcol .tl-n{width:100%}
.tl-heur-wrap{margin:34px 0 8px;border:1px solid var(--kfh-line,#e5e5e3);border-radius:14px;overflow-x:auto;background:#fff}
.tl-heur{width:100%;border-collapse:collapse;min-width:760px}
.tl-heur th,.tl-heur td{padding:15px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--kfh-line,#e5e5e3);font-size:15px !important;line-height:1.55 !important}
.tl-heur thead th{border-top:0;font-size:12px !important;letter-spacing:.09em;text-transform:uppercase;color:var(--kfh-muted,#5f5e66);background:var(--kfh-soft,#f7f7f6)}
.tl-heur .tl-heur-screen th{background:var(--kfh-accent-soft,#edf2fe);color:var(--kfh-accent-dark,#2a56d4);font-size:13px !important;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.tl-heur td:nth-child(2){white-space:nowrap;color:var(--kfh-muted,#5f5e66)}
.tl-pri{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12.5px !important;font-weight:600;white-space:nowrap}
.tl-pri[data-pri="low"]{background:#e8f3e2;color:#3c6b2f}
.tl-pri[data-pri="medium"]{background:#fdf0d3;color:#8a6410}
.tl-pri[data-pri="high"]{background:#fde3dd;color:#a33520}
.tl-pri[data-pri="emergency"]{background:#c8381f;color:#fff}
.tl-clarity{margin:34px 0 8px;padding:clamp(30px,4vw,46px);border:1px solid var(--kfh-line,#e5e5e3);border-radius:16px;background:#fff;display:grid;justify-items:center;gap:14px;text-align:center}
.tl-clarity-title{font-size:20px;font-weight:700;color:#dd9f56}
.tl-clarity-ring{position:relative;width:min(240px,60vw)}
.tl-clarity-ring svg{display:block;width:100%;height:auto;transform:rotate(-90deg)}
.tl-cl-track{fill:none;stroke:#efece6;stroke-width:12}
.tl-cl-val{fill:none;stroke:#dd9f56;stroke-width:12;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:calc(326.7 - 326.7*.52);transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1)}
.tl-armed .tl-cl-val{stroke-dashoffset:326.7}
.tl-armed.tl-play .tl-cl-val{stroke-dashoffset:calc(326.7 - 326.7*.52)}
.tl-clarity-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(40px,6vw,56px);color:var(--kfh-ink,#090909)}
.tl-clarity p{max-width:34ch;margin:0;font-size:16px !important;color:var(--kfh-muted,#5f5e66)}
body.talon-case-active .tl-score-method{margin-top:24px}
body.talon-case-active .tl-score-method h3{margin-top:0}
.tl-morph{position:relative;margin:34px 0 8px;border:1px solid var(--kfh-line,#e5e5e3);border-radius:14px;overflow:hidden;background:#fff}
.tl-morph img{display:block;width:100%;height:auto;padding:clamp(10px,1.8vw,20px)}
.tl-morph .tl-morph-hi{position:absolute;inset:0;height:100%;object-fit:contain;opacity:0;animation:tl-morph 9s ease-in-out infinite}
.tl-morph-tag{position:absolute;top:16px;left:16px;display:grid}
.tl-morph-tag b{grid-area:1/1;padding:6px 13px;border-radius:999px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:#14120e;color:#fff;width:max-content}
.tl-morph-tag .tl-tag-lo{animation:tl-morph-rev 9s ease-in-out infinite}
.tl-morph-tag .tl-tag-hi{opacity:0;animation:tl-morph 9s ease-in-out infinite;background:var(--kfh-accent,#2f62e9)}
@keyframes tl-morph{0%,38%{opacity:0}52%,88%{opacity:1}100%{opacity:0}}
@keyframes tl-morph-rev{0%,38%{opacity:1}52%,88%{opacity:0}100%{opacity:1}}
.tl-armed .tl-i{opacity:0;transform:translateY(14px)}
.tl-armed .tl-fline{transform:scaleY(0)}
.tl-armed.tl-play .tl-i{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i,0)*70ms)}
.tl-armed.tl-play .tl-fline{transition:opacity .4s ease,transform .4s ease;transition-delay:calc(var(--i,0)*70ms)}
@media (max-width:1100px){.tl-sprint{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
.tl-sprint{grid-template-columns:repeat(2,1fr)}
.tl-fcols{grid-template-columns:1fr}
.tl-wall-track img{height:34px}
.tl-wall-track{gap:52px;padding-right:52px}
}
@media (max-width:560px){.tl-sprint{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){
.tl-wall-track{animation:none}
.tl-logo-cards img{animation:none}
.tl-morph .tl-morph-hi{animation:none;opacity:1}
.tl-morph-tag .tl-tag-lo{animation:none;opacity:0}
.tl-morph-tag .tl-tag-hi{animation:none;opacity:1}
}

/* ===== ai-system.css ===== */

.project-card.coming-soon-card{position:relative;cursor:default}
.project-card.coming-soon-card .visual{filter:saturate(.55);opacity:.9}
.coming-soon-banner{position:absolute;top:14px;left:14px;z-index:3;padding:7px 14px;border-radius:999px;background:#14120e;color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.project-card.coming-soon-card:hover{transform:none;box-shadow:none}
body.ai-system-case-active{
--kfh-accent:#d81e2c;
--kfh-accent-dark:#b81724;
--kfh-accent-soft:#fdeceb;
}
.ai-system-system-reel{position:relative;width:calc(100% - clamp(36px,8vw,140px));max-width:1440px;aspect-ratio:1800/980;margin:clamp(54px,7vw,104px) auto;overflow:hidden;border-radius:16px;background:#f5f3ef;box-shadow:0 22px 56px rgba(15,23,42,.12)}
.ai-system-system-reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1.008);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.ai-system-system-reel img.is-active{opacity:1;transform:scale(1)}
.ai-system-reel-controls{position:absolute;z-index:3;left:14px;right:14px;bottom:14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:0;padding:9px 11px;border-radius:12px;background:rgba(16,16,18,.88);color:#fff;box-shadow:0 12px 30px rgba(15,23,42,.22)}
.ai-system-reel-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.ai-system-reel-dots{display:flex;align-items:center;gap:7px}
.ai-system-reel-dots button{position:relative;width:30px;height:9px;padding:0;overflow:hidden;border:0;border-radius:999px;background:rgba(255,255,255,.34);cursor:pointer;transform:scaleX(.3);transition:transform .25s cubic-bezier(.16,1,.3,1),background .2s ease}
.ai-system-reel-dots button::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.ai-system-reel-dots button.is-active{transform:scaleX(1);background:rgba(255,255,255,.28)}
.ai-system-reel-dots button.is-active::after{animation:aiSystemReelProgress var(--reel-cycle,1667ms) linear forwards}
.ai-system-system-reel.is-paused .ai-system-reel-dots button.is-active::after,.ai-system-system-reel.is-hover-paused .ai-system-reel-dots button.is-active::after,.ai-system-system-reel:focus-within .ai-system-reel-dots button.is-active::after{animation-play-state:paused}
.ai-system-reel-dots button:focus-visible,.ai-system-reel-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ai-system-reel-toggle{justify-self:end;padding:4px 2px;border:0;background:transparent;color:rgba(255,255,255,.82);font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.ai-system-reel-toggle:hover{color:#fff}
@keyframes aiSystemReelProgress{to{transform:scaleX(1)}}
.ai-system-case .case-hero{grid-template-rows:auto auto auto auto}
.ai-system-case .case-hero>.case-crumb{grid-column:1/-1;grid-row:1;margin-bottom:8px}
.ai-system-case .case-hero>.eyebrow{grid-column:1;grid-row:2;align-self:end}
.ai-system-case .case-hero>h1{grid-column:1;grid-row:3}
.ai-system-case .case-hero>p{grid-column:1;grid-row:4;align-self:start}
.ai-system-case .case-hero>.ai-system-system-reel{grid-column:2;grid-row:2/5;align-self:center;width:100%;max-width:none;margin:0;aspect-ratio:1800/980;border-radius:16px;background:#f5f3ef;box-shadow:0 22px 56px rgba(15,23,42,.12)}
.ai-system-case .ai-system-slot{display:block;width:100%;aspect-ratio:16/9;margin:34px 0 8px;border-radius:14px;overflow:hidden}
.ai-system-evidence{margin-top:38px}
.ai-system-shot-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;align-items:start}
.ai-system-shot{display:block;width:100%;border-radius:14px;overflow:hidden;background:#eef1f4;box-shadow:0 14px 34px rgba(15,23,42,.09)}
.ai-system-shot img{display:block;width:100%;height:auto}
.ai-system-shot-grid .ai-system-shot:first-child{grid-column:span 7}
.ai-system-shot-grid .ai-system-shot:nth-child(2){grid-column:span 5;margin-top:44px}
.ai-system-shot-grid .ai-system-shot:nth-child(3){grid-column:3/span 8;margin-top:-8px}
.ai-system-evidence-foundation .ai-system-shot{background:#f3f5f7;padding:clamp(8px,1.2vw,16px)}
.ai-system-flowlist{margin:34px 0 8px;display:grid;gap:14px}
.ai-system-flowlist>div{padding:22px 24px;border:1px solid var(--kfh-line,#e5e5e3);border-radius:16px;background:#fff}
.ai-system-flowlist h4{margin:0 0 12px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--kfh-muted,#5f5e66)}
.ai-system-flowlist ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:stretch}
.ai-system-flowlist li{display:grid;grid-template-columns:minmax(0,1fr) 18px;gap:10px;align-items:center;min-width:0;font-size:14.5px !important;color:var(--kfh-ink,#090909)}
.ai-system-flowlist li:last-child{grid-template-columns:minmax(0,1fr)}
.ai-system-flowlist li span{display:flex;align-items:center;justify-content:center;min-height:52px;padding:8px 12px;border-radius:14px;background:var(--kfh-soft,#f7f7f6);border:1px solid var(--kfh-line,#e5e5e3);line-height:1.25;text-align:center}
.ai-system-flowlist li:not(:last-child)::after{content:"→";display:grid;place-items:center;color:var(--kfh-muted,#5f5e66);font-size:17px}
.ai-system-flowlist .ai-system-flow-new li span{background:var(--kfh-accent-soft,#fdeceb);border-color:rgba(216,30,44,.25)}
.ai-system-input-lab{margin:34px 0 8px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0;border:1px solid var(--kfh-line,#e5e5e3);border-radius:16px;overflow:hidden;background:#fff}
.ai-system-input-stage{padding:clamp(26px,3.4vw,44px);display:grid;gap:26px;align-content:start}
.ai-system-field{display:grid;gap:7px}
.ai-system-field label{font-size:13.5px;font-weight:600;color:var(--kfh-ink,#090909)}
.ai-system-field input{width:100%;min-height:46px;padding:0 14px;font:inherit;font-size:15px;color:var(--kfh-ink,#090909);background:#fff;border:1.5px solid #c9c8c4;border-radius:10px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;outline:none}
.ai-system-field input:hover:not(:disabled):not([readonly]){border-color:#8f8e89}
.ai-system-field input:focus-visible{border-color:var(--kfh-accent,#d81e2c);box-shadow:0 0 0 3px rgba(216,30,44,.16)}
.ai-system-field input:disabled{background:#f2f1ee;color:#9a9994;cursor:not-allowed}
.ai-system-field input[readonly]{background:var(--kfh-soft,#f7f7f6)}
.ai-system-field.ai-system-field-error input{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.ai-system-field .ai-system-help{font-size:13px;color:var(--kfh-muted,#5f5e66)}
.ai-system-field .ai-system-error{display:none;align-items:center;gap:6px;font-size:13px;color:#b3261e;font-weight:600}
.ai-system-field.ai-system-field-error .ai-system-error{display:inline-flex}
.ai-system-field.ai-system-field-error .ai-system-help{display:none}
.ai-system-input-panel{padding:clamp(26px,3.4vw,44px);background:#101012;color:#eceae6;display:grid;gap:18px;align-content:start}
.ai-system-input-panel h4{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ai-system-state-chip{justify-self:start;padding:7px 16px;border-radius:999px;font-size:14px;font-weight:700;background:rgba(255,255,255,.1);color:#fff;transition:background .2s ease,color .2s ease}
.ai-system-state-chip[data-state="Focused"]{background:#d81e2c}
.ai-system-state-chip[data-state="Error"]{background:#b3261e}
.ai-system-state-chip[data-state="Filled"]{background:#1f7a3d}
.ai-system-state-chip[data-state="Hover"]{background:#4b4b52}
.ai-system-input-panel dl{margin:0;display:grid;gap:12px}
.ai-system-input-panel dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.ai-system-input-panel dd{margin:3px 0 0;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.88)}
.ai-system-input-panel code{display:block;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.06);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.65;white-space:pre;overflow-x:auto;color:#d7e3ff}
.ai-system-consolidate{--component-red:#e31b2b;--component-ink:#202533;--component-muted:#697386;--component-line:#d9dee7;--component-surface:#f5f7f9;position:relative;margin:34px 0 8px;padding:clamp(22px,3.4vw,42px);border:1px solid var(--component-line);border-radius:16px;background:var(--component-surface);display:grid;gap:24px;justify-items:stretch;overflow:hidden}
.ai-system-button-specimen-head{display:flex;align-items:end;justify-content:space-between;gap:24px}
.ai-system-button-specimen-head>div{display:grid;gap:5px}
.ai-system-button-specimen-head small,.ai-system-button-sample>span,.ai-system-canonical>small{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--component-muted)}
.ai-system-button-specimen-head b{font-size:19px;color:var(--component-ink)}
.ai-system-button-specimen-head>span{font-size:13px;color:var(--component-muted)}
.ai-system-legacy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--component-line);border-radius:12px;overflow:hidden;background:var(--component-line);gap:1px;transition:opacity .45s ease,filter .45s ease}
.ai-system-button-sample{min-height:142px;padding:20px;display:grid;align-content:space-between;justify-items:start;gap:24px;background:#fff}
.ai-system-button-sample button,.ai-system-canonical>button{min-height:44px;padding:0 20px;border-radius:8px;font:600 14px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;white-space:nowrap;cursor:default}
.ai-system-button-sample .is-primary,.ai-system-button-sample .is-loading,.ai-system-button-sample .is-compact,.ai-system-canonical>button{border:1px solid var(--component-red);background:var(--component-red);color:#fff}
.ai-system-button-sample .is-secondary{border:1px solid var(--component-ink);background:var(--component-ink);color:#fff}
.ai-system-button-sample .is-brand-outline{border:1px solid var(--component-red);background:#fff;color:var(--component-red)}
.ai-system-button-sample .is-compact{min-height:36px;padding:0 16px;font-size:13px}
.ai-system-button-sample .is-loading{display:inline-flex;align-items:center;gap:9px}
.ai-system-button-sample .is-loading i{width:14px;height:14px;border:2px solid rgba(255,255,255,.42);border-top-color:#fff;border-radius:50%;animation:aiSystemButtonSpin .8s linear infinite}
.ai-system-button-sample .is-disabled{border:1px solid #d4dae2;background:#e8ecf1;color:#8a94a3}
@keyframes aiSystemButtonSpin{to{transform:rotate(1turn)}}
.ai-system-consolidate.is-merged .ai-system-legacy-grid{opacity:.13;filter:saturate(.2)}
.ai-system-canonical{display:none;grid-template-columns:auto minmax(220px,1fr);align-items:center;gap:18px 28px;padding:24px;border-radius:12px;background:var(--component-ink);color:#fff;text-align:left}
.ai-system-consolidate.is-merged .ai-system-canonical{display:grid;animation:aiSystemCanonicalIn .4s cubic-bezier(.16,1,.3,1) both}
.ai-system-canonical>small{grid-column:1/-1;color:rgba(255,255,255,.56)}
.ai-system-canonical>button{box-shadow:0 10px 24px rgba(227,27,43,.24)}
.ai-system-canonical code{display:block;padding:14px 18px;border-radius:10px;background:rgba(255,255,255,.07);color:#f4f6fa;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.7;white-space:pre;overflow-x:auto;max-width:100%}
.ai-system-merge-btn{font:inherit;justify-self:center;min-height:46px;padding:0 24px;border:1px solid var(--component-red);border-radius:8px;background:var(--component-red);color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.ai-system-merge-btn:hover{transform:translateY(-2px);background:#c91625;box-shadow:0 10px 24px rgba(227,27,43,.2)}
.ai-system-merge-btn:focus-visible{outline:3px solid rgba(8,120,209,.3);outline-offset:3px}
@keyframes aiSystemCanonicalIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ai-system-loop{margin:34px 0 8px;padding:clamp(26px,3.4vw,44px);border:1px solid var(--kfh-line,#e5e5e3);border-radius:16px;background:#fff;display:grid;gap:26px}
.ai-system-loop-track{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.ai-system-loop-stage{display:grid;gap:4px;justify-items:center;padding:16px 18px;border:1.5px solid var(--kfh-line,#e5e5e3);border-radius:14px;background:var(--kfh-soft,#f7f7f6);min-width:120px;transition:border-color .3s ease,background .3s ease}
.ai-system-loop-stage i{font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--kfh-muted,#5f5e66)}
.ai-system-loop-stage b{font-size:15px;color:var(--kfh-ink,#090909)}
.ai-system-loop-track>.ai-system-loop-arrow{color:var(--kfh-muted,#5f5e66)}
.ai-system-loop.is-active .ai-system-loop-stage[data-hot]{border-color:var(--kfh-accent,#d81e2c);background:var(--kfh-accent-soft,#fdeceb)}
.ai-system-loop-issue{font:inherit;justify-self:center;padding:11px 20px;border:1.5px dashed #a39e93;border-radius:999px;background:#fff;font-size:14px;cursor:pointer;transition:border-color .2s ease}
.ai-system-loop-issue:hover{border-color:var(--kfh-ink,#090909)}
.ai-system-loop-result{display:none;grid-template-columns:1fr 1fr;gap:16px}
.ai-system-loop.is-active .ai-system-loop-result{display:grid}
.ai-system-loop-result>div{padding:20px 22px;border-radius:14px;font-size:14.5px;line-height:1.6}
.ai-system-loop-result .ai-system-rule{background:#101012;color:rgba(255,255,255,.9)}
.ai-system-loop-result .ai-system-rule small{display:block;margin-bottom:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ai-system-loop-result .ai-system-inherit{background:var(--kfh-accent-soft,#fdeceb);color:#6d1119}
.ai-system-loop-result .ai-system-inherit small{display:block;margin-bottom:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(109,17,25,.6)}
.ai-system-context{margin:34px 0 8px;display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);border:1px solid var(--kfh-line,#e5e5e3);border-radius:16px;overflow:hidden;background:#fff}
.ai-system-context-nav{display:flex;flex-direction:column;background:var(--kfh-soft,#f7f7f6);border-right:1px solid var(--kfh-line,#e5e5e3);padding:14px 0}
.ai-system-context-nav button{font:inherit;text-align:left;padding:11px 22px;border:0;background:none;font-size:14px;color:var(--kfh-muted,#5f5e66);cursor:pointer;border-left:3px solid transparent}
.ai-system-context-nav button:hover{color:var(--kfh-ink,#090909)}
.ai-system-context-nav button[aria-selected="true"]{color:var(--kfh-accent-dark,#b81724);border-left-color:var(--kfh-accent,#d81e2c);background:#fff;font-weight:600}
.ai-system-context-body{padding:clamp(22px,3vw,36px);display:grid;gap:12px;align-content:start}
.ai-system-context-body h4{margin:0 0 4px;font-size:17px;color:var(--kfh-ink,#090909)}
.ai-system-context-body ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.ai-system-context-body li{padding:13px 16px;border:1px solid var(--kfh-line,#e5e5e3);border-radius:10px;font-size:14px !important;line-height:1.55 !important;background:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ai-system-context-cap{font-size:12.5px;color:var(--kfh-muted,#5f5e66)}
.ai-system-roadmap{margin:34px 0 8px;border:1px solid var(--kfh-line,#e5e5e3);border-radius:16px;background:#fff;overflow-x:auto}
.ai-system-roadmap-inner{min-width:920px;padding:clamp(24px,3vw,38px);display:grid;gap:0}
.ai-system-rm-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--kfh-muted,#5f5e66);margin:0 0 10px}
.ai-system-rm-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.ai-system-rm-row>div{padding:14px;border-radius:12px;font-size:13.5px;line-height:1.45;text-align:center;transition:background .2s ease,border-color .2s ease}
.ai-system-rm-a>div{background:var(--kfh-soft,#f7f7f6);border:1px solid var(--kfh-line,#e5e5e3)}
.ai-system-rm-b>div{background:var(--kfh-accent-soft,#fdeceb);border:1px solid rgba(216,30,44,.2)}
.ai-system-rm-links{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;height:34px}
.ai-system-rm-links span{position:relative}
.ai-system-rm-links span::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--kfh-line,#e5e5e3);transition:background .2s ease}
.ai-system-roadmap [data-col]:hover{border-color:var(--kfh-accent,#d81e2c)}
.ai-system-roadmap.ai-system-hover-0 .ai-system-rm-links span:nth-child(1)::before,.ai-system-roadmap.ai-system-hover-1 .ai-system-rm-links span:nth-child(2)::before,.ai-system-roadmap.ai-system-hover-2 .ai-system-rm-links span:nth-child(3)::before,.ai-system-roadmap.ai-system-hover-3 .ai-system-rm-links span:nth-child(4)::before,.ai-system-roadmap.ai-system-hover-4 .ai-system-rm-links span:nth-child(5)::before,.ai-system-roadmap.ai-system-hover-5 .ai-system-rm-links span:nth-child(6)::before{background:var(--kfh-accent,#d81e2c)}
.ai-system-rm-row .is-pair{background:#fff;border-color:var(--kfh-accent,#d81e2c)}
.ai-system-thesis{width:calc(100% - clamp(36px,8vw,140px));max-width:1440px;margin:clamp(54px,7vw,104px) auto 0;padding:clamp(32px,5vw,68px) 0;border-top:1px solid var(--kfh-line,#e5e5e3);border-bottom:1px solid var(--kfh-line,#e5e5e3)}
.ai-system-thesis h2{max-width:980px;margin:0 0 20px;font-size:clamp(34px,5vw,68px);line-height:.98;letter-spacing:-.04em}
.ai-system-thesis>p{max-width:880px;margin:0;color:var(--kfh-muted,#5f5e66);font-size:clamp(18px,1.8vw,24px);line-height:1.55}
.ai-system-thesis>div{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(34px,5vw,64px);border-top:1px solid var(--kfh-line,#e5e5e3)}
.ai-system-thesis>div span{display:grid;gap:8px;padding:20px 24px 0 0;font-size:14.5px;line-height:1.5;color:var(--kfh-muted,#5f5e66)}
.ai-system-thesis>div span+span{border-left:1px solid var(--kfh-line,#e5e5e3);padding-left:24px}
.ai-system-thesis>div b{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--kfh-ink,#090909)}
.ai-system-ownership{width:calc(100% - clamp(36px,8vw,140px));max-width:1440px;margin:clamp(48px,6vw,88px) auto 0;padding:clamp(28px,4vw,52px);border-top:1px solid var(--kfh-line,#e5e5e3);border-bottom:1px solid var(--kfh-line,#e5e5e3)}
.ai-system-ownership>h2{max-width:900px;margin:12px 0 16px;font-size:clamp(30px,4vw,54px);line-height:1.02;letter-spacing:-.04em}
.ai-system-ownership>p{max-width:820px;margin:0;color:var(--kfh-muted,#5f5e66);font-size:clamp(17px,1.6vw,22px);line-height:1.55}
.ai-system-ownership-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);margin-top:clamp(28px,4vw,48px)}
.ai-system-ownership-grid>div+div{border-left:1px solid var(--kfh-line,#e5e5e3);padding-left:clamp(28px,5vw,72px)}
.ai-system-ownership-grid h3{margin:0 0 18px;font-size:18px}
.ai-system-ownership-grid ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.ai-system-ownership-grid li{position:relative;padding-left:20px;color:var(--kfh-muted,#5f5e66);line-height:1.55}
.ai-system-ownership-grid li::before{content:"";position:absolute;left:0;top:.65em;width:7px;height:7px;border-radius:50%;background:var(--kfh-accent,#d81e2c)}
.ai-system-ownership-inline{margin-top:38px;padding-top:28px;border-top:1px solid var(--kfh-line,#e5e5e3)}
.ai-system-deepdive{margin:0 0 clamp(76px,10vw,144px);padding:clamp(30px,4vw,52px) 0;border-top:1px solid var(--kfh-line,#e5e5e3)}
.ai-system-deepdive>h2{max-width:900px;margin:12px 0 18px;font-size:clamp(34px,4.8vw,64px);line-height:.98;letter-spacing:-.045em}
.ai-system-deepdive>p{max-width:850px;color:var(--kfh-muted,#5f5e66)}
.ai-system-deepdive>h3{margin-top:42px}
.ai-system-note{font-size:14px!important;line-height:1.55!important;color:var(--kfh-muted,#5f5e66)!important}
.ai-system-decision-table{margin-top:34px;border-top:1px solid var(--kfh-line,#e5e5e3)}
.ai-system-decision-head,.ai-system-decision-row{display:grid;grid-template-columns:minmax(150px,.55fr) minmax(0,1fr) minmax(0,1.15fr);gap:clamp(18px,3vw,42px);padding:18px 0;border-bottom:1px solid var(--kfh-line,#e5e5e3);align-items:start}
.ai-system-decision-head{padding:12px 0;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--kfh-muted,#5f5e66)}
.ai-system-decision-row strong{font-size:16px}
.ai-system-decision-row span{font-size:14.5px;line-height:1.55;color:var(--kfh-muted,#5f5e66)}
.ai-system-decision-row span:last-child{color:var(--kfh-ink,#090909)}
.ai-system-trust-types{display:grid;grid-template-columns:repeat(3,1fr);margin:34px 0;border-top:1px solid var(--kfh-line,#e5e5e3);border-bottom:1px solid var(--kfh-line,#e5e5e3)}
.ai-system-trust-types>div{display:grid;gap:7px;padding:22px 22px 22px 0}
.ai-system-trust-types>div+div{border-left:1px solid var(--kfh-line,#e5e5e3);padding-left:22px}
.ai-system-trust-types b{font-size:16px}
.ai-system-trust-types span{font-size:14px;line-height:1.5;color:var(--kfh-muted,#5f5e66)}
.ai-system-security-flow{display:grid;grid-template-columns:1fr 32px 1fr 32px 1fr;gap:8px;align-items:center;padding:clamp(24px,3vw,38px);border-radius:16px;background:#101012;color:#fff}
.ai-system-security-flow>div{display:grid;gap:7px;align-content:start;min-height:112px}
.ai-system-security-flow small{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ai-system-security-flow b{font-size:17px}
.ai-system-security-flow span{font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.7)}
.ai-system-security-flow i{text-align:center;font-style:normal;color:#ff6672;font-size:20px}
.ai-system-security-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);margin-top:34px}
.ai-system-security-grid h3{margin:0 0 14px;font-size:18px}
.ai-system-security-grid ul{margin:0;padding-left:20px}
.ai-system-security-grid li{margin:0 0 9px;font-size:15px!important;line-height:1.5!important}
.ai-system-governance-summary{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr);gap:clamp(26px,4vw,56px);align-items:start;margin-top:34px;padding:clamp(26px,3.5vw,42px);border-radius:16px;background:#202533;color:#fff}
.ai-system-governance-summary>div{display:grid;gap:10px}
.ai-system-governance-summary small{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#ff6672}
.ai-system-governance-summary p{margin:0!important;font-size:14px!important;line-height:1.55!important;color:rgba(255,255,255,.66)!important}
.ai-system-governance-summary blockquote{margin:0!important;padding:0!important;background:transparent!important;color:#fff!important;font-size:clamp(22px,2.6vw,34px)!important;line-height:1.18!important;letter-spacing:-.025em!important}
.ai-system-governance-summary blockquote small{display:block;margin-bottom:12px;letter-spacing:.1em}
.ai-system-pilot-steps{counter-reset:pilot;margin:34px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--kfh-line,#e5e5e3);border-left:1px solid var(--kfh-line,#e5e5e3)}
.ai-system-pilot-steps li{counter-increment:pilot;display:grid;align-content:start;gap:9px;min-height:170px;padding:22px;border-right:1px solid var(--kfh-line,#e5e5e3);border-bottom:1px solid var(--kfh-line,#e5e5e3)}
.ai-system-pilot-steps li::before{content:"0" counter(pilot);font-size:11px;letter-spacing:.1em;color:var(--kfh-accent,#d81e2c);font-weight:700}
.ai-system-pilot-steps b{font-size:16px}
.ai-system-pilot-steps span{font-size:14px;line-height:1.5;color:var(--kfh-muted,#5f5e66)}
.ai-system-component-evidence{margin-top:34px}
.ai-system-component-showcase{--component-red:#e31b2b;--component-ink:#202533;--component-muted:#697386;--component-line:#d9dee7;--component-surface:#f5f7f9;display:grid;grid-template-columns:minmax(190px,.32fr) minmax(0,1fr);min-height:520px;border:1px solid var(--component-line);border-radius:16px;overflow:hidden;background:#fff;color:var(--component-ink)}
.ai-system-component-nav{display:flex;flex-direction:column;gap:4px;padding:22px 14px;background:var(--component-surface);border-right:1px solid var(--component-line)}
.ai-system-component-nav>div{display:grid;gap:5px;padding:0 10px 16px}
.ai-system-component-nav small{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--component-muted)}
.ai-system-component-nav b{font-size:16px}
.ai-system-component-nav button{min-height:42px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--component-muted);font:600 13.5px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:left;cursor:pointer;transition:background .18s ease,color .18s ease}
.ai-system-component-nav button:hover{background:#e9edf2;color:var(--component-ink)}
.ai-system-component-nav button[aria-selected="true"]{background:#dbe1e8;color:var(--component-ink)}
.ai-system-component-nav button:focus-visible,.ai-system-component-stage button:focus-visible,.ai-system-component-stage input:focus-visible,.ai-system-component-stage select:focus-visible{outline:3px solid rgba(8,120,209,.25);outline-offset:2px}
.ai-system-component-stage{min-width:0;padding:clamp(24px,3.5vw,42px);display:grid;grid-template-rows:auto 1fr;gap:28px}
.ai-system-component-stage>header{display:flex;align-items:start;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--component-line)}
.ai-system-component-stage>header>div{display:grid;gap:9px}
.ai-system-component-stage h3{margin:0;font-size:clamp(24px,3vw,34px);letter-spacing:-.025em}
.ai-system-component-stage>header code{align-self:center;max-width:48%;padding:10px 12px;border-radius:8px;background:#292c24;color:#f5f7f9;font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:normal}
.ai-system-component-status{justify-self:start;padding:5px 10px;border:1px solid #d8c65d;border-radius:999px;background:#fffce9;color:#665800;font-size:11px;font-weight:700}
.ai-system-component-status[data-status="ready"]{border-color:#65cdb0;background:#ecfbf6;color:#176c59}
.ai-system-component-status[data-status="documented"]{border-color:#aeb7c4;background:#f3f5f7;color:#465166}
.ai-system-component-panels{display:grid;align-items:center;min-width:0}
.ai-system-component-panels>[role="tabpanel"]{min-width:0}
.ai-system-mini-date{width:min(100%,380px);display:grid;gap:16px}
.ai-system-mini-date>label{width:170px;padding:10px 12px;border:1px solid #aeb7c4;border-radius:10px;background:#f2f7fa;display:grid;gap:4px;font-size:12px;font-weight:700}
.ai-system-mini-date>label span{color:var(--component-muted);font-size:14px;font-weight:500}
.ai-system-mini-calendar{padding:18px;border:1px solid var(--component-line);border-radius:14px;background:#fff}
.ai-system-mini-calendar>header{display:grid;grid-template-columns:32px 1fr 32px;align-items:center;margin-bottom:16px;text-align:center}
.ai-system-mini-calendar>header button{width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--component-ink);font-size:20px;cursor:pointer}
.ai-system-mini-calendar>header svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ai-system-mini-calendar>header button:hover{background:var(--component-surface)}
.ai-system-mini-calendar>header b{font-size:14px}
.ai-system-mini-week,.ai-system-mini-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}
.ai-system-mini-week{margin-bottom:6px}
.ai-system-mini-week b{padding:5px 0;font-size:10px;color:var(--component-muted)}
.ai-system-mini-days button{aspect-ratio:1;border:0;border-radius:50%;background:transparent;color:var(--component-ink);font:600 12px/1 system-ui;cursor:pointer}
.ai-system-mini-days>span{aspect-ratio:1}
.ai-system-mini-days button:hover{background:var(--component-surface)}
.ai-system-mini-days button[aria-pressed="true"]{background:var(--component-ink);color:#fff}
.ai-system-mini-field{width:min(100%,430px);display:grid;gap:8px}
.ai-system-mini-field>label,.ai-system-mini-options legend{font-size:14px;font-weight:700}
.ai-system-mini-field>span{font-size:12.5px;line-height:1.45;color:var(--component-muted)}
.ai-system-mini-field select,.ai-system-mini-field input{width:100%;min-height:48px;padding:0 14px;border:1px solid #aeb7c4;border-radius:10px;background:#fff;color:var(--component-ink);font:14px system-ui}
.ai-system-mini-field select{-webkit-appearance:none;appearance:none;padding-right:52px;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 7.5 5 5 5-5' stroke='%23202533' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px 18px}
.ai-system-mini-phone{display:grid;grid-template-columns:auto 1fr;border:1px solid #aeb7c4;border-radius:10px;overflow:hidden;background:#fff}
.ai-system-mini-phone>span{display:grid;place-items:center;padding:0 14px;border-right:1px solid var(--component-line);background:var(--component-surface);font-size:14px;font-weight:700}
.ai-system-mini-phone input{border:0;border-radius:0}
.ai-system-mini-options{width:min(100%,460px);margin:0;padding:0;border:0;display:grid;gap:14px}
.ai-system-mini-options legend{margin-bottom:16px}
.ai-system-mini-options>label{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;cursor:pointer}
.ai-system-mini-options input[type="checkbox"],.ai-system-mini-options input[type="radio"]{width:20px;height:20px;margin:1px 0 0;accent-color:var(--component-ink)}
.ai-system-mini-options label>span{display:grid;gap:3px;font-size:14px}
.ai-system-mini-options label small{color:var(--component-muted);font-size:12.5px;line-height:1.4}
.ai-system-mini-switch{grid-template-columns:48px 1fr!important}
.ai-system-mini-switch input{position:absolute;width:1px!important;height:1px!important;opacity:0}
.ai-system-mini-switch i{position:relative;width:46px;height:26px;border-radius:999px;background:#aeb7c4;transition:background .2s ease}
.ai-system-mini-switch i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(32,37,51,.22);transition:transform .2s cubic-bezier(.16,1,.3,1)}
.ai-system-mini-switch input:checked+i{background:var(--component-ink)}
.ai-system-mini-switch input:checked+i::after{transform:translateX(20px)}
.ai-system-mini-switch input:focus-visible+i{outline:3px solid rgba(8,120,209,.25);outline-offset:3px}
.ai-system-mini-gauge-wrap{width:min(100%,390px);display:grid;justify-items:center;gap:12px}
.ai-system-mini-gauge{--gauge-value:64;position:relative;width:240px;aspect-ratio:2/1;display:grid;place-items:end center;background:conic-gradient(from 270deg at 50% 100%,var(--component-red) calc(var(--gauge-value)*.5%),#e4e8ee 0 50%,transparent 0);border-radius:999px 999px 0 0}
.ai-system-mini-gauge::after{content:"";position:absolute;left:14%;bottom:0;width:72%;height:72%;border-radius:inherit;background:#fff}
.ai-system-mini-gauge strong,.ai-system-mini-gauge span{position:absolute;z-index:1}
.ai-system-mini-gauge strong{bottom:22px;font-size:34px;font-variant-numeric:tabular-nums}
.ai-system-mini-gauge span{bottom:3px;color:var(--component-muted);font-size:12px}
.ai-system-mini-gauge-wrap>label{font-size:12px;font-weight:700;color:var(--component-muted)}
.ai-system-mini-gauge-wrap>input{width:240px;accent-color:var(--component-red)}
.ai-system-code-evidence{margin-top:20px;border:1px solid #29292d;border-radius:16px;overflow:hidden;background:#101012;color:#f7f5f1}
.ai-system-code-evidence>div{display:grid;grid-template-columns:minmax(180px,.75fr) 1fr 1fr;gap:0}
.ai-system-code-evidence>div+div{border-top:1px solid #29292d}
.ai-system-code-evidence header,.ai-system-code-evidence>div>div{display:grid;align-content:start;gap:8px;padding:20px 22px}
.ai-system-code-evidence header{background:#17171a}
.ai-system-code-evidence>div>div{border-left:1px solid #29292d}
.ai-system-code-evidence header b{font-size:15px}
.ai-system-code-evidence header span{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.55)}
.ai-system-code-evidence small{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#ff7d87}
.ai-system-code-evidence code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.55;white-space:normal;color:#e7e4de}
.ai-system-maturity{counter-reset:maturity;margin:34px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(7,1fr);overflow:hidden;border:1px solid var(--kfh-line,#e5e5e3);border-radius:16px}
.ai-system-maturity li{counter-increment:maturity;position:relative;display:grid;align-content:start;gap:8px;min-height:138px;padding:20px 14px}
.ai-system-maturity li+li{border-left:1px solid var(--kfh-line,#e5e5e3)}
.ai-system-maturity li::before{content:counter(maturity);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:11px;font-weight:700;background:#ecebe8;color:#6a6965}
.ai-system-maturity b{font-size:13.5px}
.ai-system-maturity span{font-size:11px;color:var(--kfh-muted,#5f5e66)}
.ai-system-maturity [data-status="complete"]::before{content:"✓";background:#152a1c;color:#fff}
.ai-system-maturity [data-status="active"]{background:var(--kfh-accent-soft,#fdeceb)}
.ai-system-maturity [data-status="active"]::before{background:var(--kfh-accent,#d81e2c);color:#fff}
.ai-system-limitations>ul{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,64px);margin:34px 0 0;padding:0;list-style:none;border-top:1px solid var(--kfh-line,#e5e5e3)}
.ai-system-limitations>ul li{padding:16px 0 16px 24px;border-bottom:1px solid var(--kfh-line,#e5e5e3);position:relative;font-size:15px!important;line-height:1.55!important}
.ai-system-limitations>ul li::before{content:"";position:absolute;left:0;top:25px;width:8px;height:8px;border-radius:50%;background:var(--kfh-accent,#d81e2c)}
.ai-system-limitations blockquote{margin-top:52px!important;font-size:clamp(25px,3.2vw,42px)!important;line-height:1.15!important;letter-spacing:-.025em}
.ai-system-builder{margin-top:34px;border:1px solid var(--kfh-line,#e5e5e3);border-radius:16px;overflow:hidden;background:#fff}
.ai-system-builder [hidden]{display:none!important}
.ai-system-builder-library{display:grid;grid-template-columns:minmax(210px,.8fr) minmax(0,1.35fr) auto;gap:24px;align-items:center;padding:clamp(24px,3vw,38px);border-bottom:1px solid var(--kfh-line,#e5e5e3);background:var(--kfh-soft,#f7f7f6)}
.ai-system-builder-library small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--kfh-accent-dark,#b81724);font-weight:700}
.ai-system-builder-library h3{margin:7px 0 5px;font-size:20px}
.ai-system-builder-library p{margin:0;font-size:13.5px;line-height:1.5;color:var(--kfh-muted,#5f5e66)}
.ai-system-builder-controls{display:flex;flex-wrap:wrap;gap:10px}
.ai-system-builder-controls button{font:inherit;min-height:44px;padding:0 16px;border:1px solid #cfcfcb;border-radius:10px;background:#fff;color:var(--kfh-ink,#090909);font-size:13.5px;font-weight:600;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
.ai-system-builder-controls button:hover{border-color:#8e8d88}
.ai-system-builder-controls button:focus-visible,.ai-system-builder-review:focus-visible{outline:3px solid rgba(216,30,44,.22);outline-offset:2px}
.ai-system-builder-controls button[aria-pressed="true"]{background:#101012;border-color:#101012;color:#fff}
.ai-system-builder-review{font:inherit;min-height:46px;padding:0 20px;border:0;border-radius:999px;background:var(--kfh-accent,#d81e2c);color:#fff;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:transform .18s ease,background .18s ease}
.ai-system-builder-review:hover{transform:translateY(-1px);background:var(--kfh-accent-dark,#b81724)}
.ai-system-builder-stage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(210px,.65fr);gap:0;min-height:410px}
.ai-system-builder-window{margin:clamp(24px,3vw,38px);border:1px solid #d8d8d4;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 18px 40px rgba(15,23,42,.08)}
.ai-system-builder-window>header{display:flex;align-items:center;gap:6px;min-height:42px;padding:0 14px;background:#f0efec;border-bottom:1px solid #d8d8d4}
.ai-system-builder-window>header span{width:8px;height:8px;border-radius:50%;background:#c1c0bc}
.ai-system-builder-window>header b{margin-left:8px;font-size:12px;color:#55545a}
.ai-system-builder-window>nav{display:flex;gap:20px;padding:16px 24px 0;border-bottom:1px solid #e8e7e3}
.ai-system-builder-window>nav button{font:inherit;padding:0 0 12px;border:0;border-bottom:2px solid transparent;background:none;font-size:13px;color:#66656b}
.ai-system-builder-window>nav button:first-child{border-bottom-color:var(--kfh-accent,#d81e2c);color:#101012;font-weight:700}
.ai-system-builder-form{display:grid;gap:20px;align-content:start;max-width:420px;padding:clamp(30px,5vw,62px)}
.ai-system-builder-form>div{display:grid;gap:7px}
.ai-system-builder-form label{font-size:13px;font-weight:700}
.ai-system-builder-form input{min-height:46px;padding:0 14px;border:1px solid #c9c8c4;border-radius:10px;background:#fff;font:inherit;font-size:14px;color:#333}
.ai-system-builder-form>button{justify-self:start;min-height:44px;padding:0 20px;border:0;border-radius:10px;background:var(--kfh-accent,#d81e2c);color:#fff;font:inherit;font-size:14px;font-weight:700}
.ai-system-builder-empty{margin:0;color:var(--kfh-muted,#5f5e66);font-size:14px}
.ai-system-builder-checks{display:grid;align-content:center;gap:0;padding:clamp(24px,3vw,38px);background:#101012;color:#fff}
.ai-system-builder-checks span{position:relative;padding:14px 0 14px 26px;border-bottom:1px solid rgba(255,255,255,.12);font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.76)}
.ai-system-builder-checks span::before{content:"✓";position:absolute;left:0;color:#70d68c;font-weight:800}
.ai-system-builder-checks span:last-child::before{content:"○";color:#ff939b}
.ai-system-builder.is-review-ready .ai-system-builder-checks span:last-child::before{content:"✓";color:#70d68c}
.ai-system-builder-status{display:flex;gap:18px;align-items:baseline;padding:18px clamp(24px,3vw,38px);border-top:1px solid var(--kfh-line,#e5e5e3);background:#fff}
.ai-system-builder-status b{font-size:13px;white-space:nowrap}
.ai-system-builder-status span{font-size:13.5px;line-height:1.5;color:var(--kfh-muted,#5f5e66)}
.ai-system-builder.is-review-ready .ai-system-builder-status{background:#edf7ef}
.ai-system-future-steps{display:grid;grid-template-columns:repeat(5,1fr);margin-top:42px;border-top:1px solid var(--kfh-line,#e5e5e3);border-left:1px solid var(--kfh-line,#e5e5e3)}
.ai-system-future-steps>div{display:grid;align-content:start;gap:9px;min-height:152px;padding:18px;border-right:1px solid var(--kfh-line,#e5e5e3);border-bottom:1px solid var(--kfh-line,#e5e5e3)}
.ai-system-future-steps b{font-size:14px;line-height:1.35}
.ai-system-future-steps span{font-size:12.5px;line-height:1.5;color:var(--kfh-muted,#5f5e66)}
.ai-system-outcome-columns{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);margin:34px 0 54px}
.ai-system-outcome-columns>div+div{border-left:1px solid var(--kfh-line,#e5e5e3);padding-left:clamp(36px,6vw,80px)}
.ai-system-outcome-columns h3{margin:0 0 16px}
.ai-system-outcome-columns ul{margin:0;padding-left:20px}
.ai-system-outcome-columns li{margin-bottom:10px}
.ai-system-end-state{margin-top:52px;padding:clamp(28px,4vw,48px);border-radius:16px;background:#101012;color:#fff}
.ai-system-end-state b{display:block;margin-bottom:12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#ff9098}
.ai-system-end-state p{max-width:850px;margin:0;font-size:clamp(20px,2.4vw,31px)!important;line-height:1.32!important;color:rgba(255,255,255,.92)!important}
.ai-system-armed .ai-system-i{opacity:0;transform:translateY(14px)}
.ai-system-armed.ai-system-play .ai-system-i{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i,0)*70ms)}
@media (max-width:900px){
.ai-system-system-reel{width:calc(100% - 32px);margin:48px auto;border-radius:14px}
.ai-system-case .case-hero{grid-template-rows:auto}
.ai-system-case .case-hero>.case-crumb,.ai-system-case .case-hero>.eyebrow,.ai-system-case .case-hero>h1,.ai-system-case .case-hero>p,.ai-system-case .case-hero>.ai-system-system-reel{grid-column:1;grid-row:auto}
.ai-system-case .case-hero>.ai-system-system-reel{width:100%;margin:26px 0 0}
.ai-system-shot-grid{grid-template-columns:1fr}
.ai-system-shot-grid .ai-system-shot:first-child,.ai-system-shot-grid .ai-system-shot:nth-child(2),.ai-system-shot-grid .ai-system-shot:nth-child(3){grid-column:auto;margin-top:0}
.ai-system-input-lab{grid-template-columns:1fr}
.ai-system-context{grid-template-columns:1fr}
.ai-system-context-nav{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--kfh-line,#e5e5e3);padding:8px}
.ai-system-context-nav button{border-left:0;border-radius:999px;padding:9px 14px}
.ai-system-context-nav button[aria-selected="true"]{background:var(--kfh-accent-soft,#fdeceb)}
.ai-system-loop-result{grid-template-columns:1fr}
.ai-system-thesis>div{grid-template-columns:1fr}
.ai-system-thesis>div span+span{border-left:0;border-top:1px solid var(--kfh-line,#e5e5e3);padding-left:0}
.ai-system-ownership-grid,.ai-system-security-grid{grid-template-columns:1fr}
.ai-system-governance-summary{grid-template-columns:1fr}
.ai-system-legacy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ai-system-ownership-grid>div+div{border-left:0;border-top:1px solid var(--kfh-line,#e5e5e3);padding:28px 0 0}
.ai-system-pilot-steps{grid-template-columns:repeat(2,1fr)}
.ai-system-component-showcase{grid-template-columns:1fr}
.ai-system-component-nav{flex-direction:row;align-items:center;overflow-x:auto;border-right:0;border-bottom:1px solid var(--component-line)}
.ai-system-component-nav>div{min-width:170px;padding:0 10px}
.ai-system-component-nav button{flex:0 0 auto;white-space:nowrap}
.ai-system-code-evidence>div{grid-template-columns:1fr 1fr}
.ai-system-code-evidence header{grid-column:1/-1;border-bottom:1px solid #29292d}
.ai-system-code-evidence>div>div:first-of-type{border-left:0}
.ai-system-maturity{grid-template-columns:repeat(4,1fr)}
.ai-system-maturity li:nth-child(5){border-left:0;border-top:1px solid var(--kfh-line,#e5e5e3)}
.ai-system-maturity li:nth-child(n+6){border-top:1px solid var(--kfh-line,#e5e5e3)}
.ai-system-builder-library{grid-template-columns:1fr}
.ai-system-builder-review{justify-self:start}
.ai-system-builder-stage{grid-template-columns:1fr}
.ai-system-builder-checks{grid-template-columns:repeat(2,1fr)}
.ai-system-builder-checks span:nth-child(odd){padding-right:18px}
.ai-system-future-steps{grid-template-columns:repeat(2,1fr)}
.ai-system-outcome-columns{grid-template-columns:1fr}
.ai-system-outcome-columns>div+div{border-left:0;border-top:1px solid var(--kfh-line,#e5e5e3);padding:32px 0 0}
}
@media (max-width:680px){
.ai-system-flowlist ol{grid-template-columns:1fr;gap:8px}
.ai-system-flowlist li,.ai-system-flowlist li:last-child{grid-template-columns:1fr;gap:8px}
.ai-system-flowlist li:not(:last-child)::after{content:"↓";min-height:18px}
.ai-system-flowlist li span{min-height:48px}
.ai-system-ownership{width:calc(100% - 32px);padding-left:0;padding-right:0}
.ai-system-thesis{width:calc(100% - 32px)}
.ai-system-trust-types,.ai-system-pilot-steps,.ai-system-limitations>ul{grid-template-columns:1fr}
.ai-system-component-stage>header{display:grid}
.ai-system-component-stage>header code{max-width:100%}
.ai-system-button-specimen-head{align-items:start;flex-direction:column;gap:8px}
.ai-system-legacy-grid,.ai-system-canonical{grid-template-columns:1fr}
.ai-system-canonical>small{grid-column:auto}
.ai-system-button-sample{min-height:124px}
.ai-system-trust-types>div+div{border-left:0;border-top:1px solid var(--kfh-line,#e5e5e3);padding-left:0}
.ai-system-security-flow{grid-template-columns:1fr;padding:24px}
.ai-system-security-flow>div{min-height:0}
.ai-system-security-flow i{transform:rotate(90deg)}
.ai-system-code-evidence>div{grid-template-columns:1fr}
.ai-system-code-evidence>div>div{border-left:0;border-top:1px solid #29292d}
.ai-system-maturity{grid-template-columns:1fr}
.ai-system-maturity li{min-height:0;grid-template-columns:32px 1fr;align-items:center}
.ai-system-maturity li+li,.ai-system-maturity li:nth-child(5){border-left:0;border-top:1px solid var(--kfh-line,#e5e5e3)}
.ai-system-maturity span{grid-column:2}
.ai-system-builder-controls{display:grid;grid-template-columns:1fr}
.ai-system-builder-controls button{text-align:left}
.ai-system-builder-checks,.ai-system-future-steps{grid-template-columns:1fr}
.ai-system-builder-window{margin:16px}
.ai-system-builder-form{padding:28px 22px}
.ai-system-builder-status{display:grid;gap:7px}
}
@media (prefers-reduced-motion:reduce){.ai-system-system-reel img{transition:opacity .18s ease}.ai-system-reel-dots button.is-active::after{animation:none;transform:scaleX(1)}.ai-system-reel-toggle{display:none}.ai-system-button-sample .is-loading i{animation:none}.ai-system-consolidate.is-merged .ai-system-canonical{animation:none}}

/* ===== project-thumbs.css ===== */

.project-card .kfh-project-visual,.project-card .eyewa-visual-abstract{container-type:inline-size}
.project-card .hm-project-visual{
background:radial-gradient(circle at 82% 18%,rgba(255,255,255,.72),transparent 30%),
linear-gradient(135deg,#c3e7d4 0%,#eef8f2 48%,#b2dfc6 100%);
}
.project-card .hm-project-visual:before{border-color:rgba(30,128,85,.26)}
.project-card .hm-project-visual:after{border-color:rgba(13,43,31,.13)}
.hm-project-visual .kfh-thumb-copy{color:#123c2c}
.hm-project-visual .kfh-thumb-brand b{background:linear-gradient(135deg,#0f4d33,#31a06b);box-shadow:0 7px 16px rgba(15,77,51,.22)}
.hm-project-visual .kfh-thumb-brand span{color:#166342}
.hm-project-visual .kfh-thumb-stat{
border-color:rgba(22,99,66,.18);
background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(206,238,220,.6));
color:#3d6152;
box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 24px rgba(9,64,42,.12);
}
.hm-project-visual .kfh-thumb-stat strong{color:#14563a}
.hm-project-visual .kfh-metric-arrow{background:#166342;box-shadow:0 .28em .55em rgba(9,64,42,.2)}
.hm-project-visual .kfh-thumb-device{
position:absolute;right:-2.5%;bottom:7%;width:59%!important;height:79%!important;
transform:rotate(1.2deg);z-index:2;
}
.kfh-thumb-stat strong small.unit{margin-left:.42em}
.hm-thumb-stage{display:block}
.hm-component-board{
width:100%;height:100%;overflow:hidden;border-radius:10px;background:#fff;
border:1px solid rgba(22,99,66,.16);
box-shadow:0 18px 32px rgba(9,58,38,.24);
transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1);
}
.hm-component-board img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.kfh-project-card:hover .hm-component-board{transform:translateY(-5px);box-shadow:0 23px 38px rgba(9,58,38,.27)}
.project-card .tl-project-visual{
background:radial-gradient(circle at 82% 18%,rgba(255,255,255,.75),transparent 30%),
linear-gradient(135deg,#c8d7fb 0%,#eef2fe 48%,#bccffa 100%);
}
.project-card .tl-project-visual:before{border-color:rgba(47,98,233,.24)}
.project-card .tl-project-visual:after{border-color:rgba(24,45,120,.12)}
.tl-project-visual .kfh-thumb-copy{color:#1b2c5e}
.tl-project-visual .kfh-thumb-brand b{background:linear-gradient(135deg,#1d3fae,#4f7bff);box-shadow:0 7px 16px rgba(29,63,174,.24)}
.tl-project-visual .kfh-thumb-brand span{color:#2a56d4}
.tl-project-visual .kfh-thumb-stat{
border-color:rgba(47,98,233,.18);
background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(214,226,253,.6));
color:#4a5a86;
box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 24px rgba(20,45,120,.12);
}
.tl-project-visual .kfh-thumb-stat strong{color:#1d3fae}
.tl-project-visual .kfh-metric-arrow{background:#2a56d4;box-shadow:0 .28em .55em rgba(20,45,120,.2)}
.tl-project-visual .kfh-thumb-device{
position:absolute;right:-4%;bottom:9%;width:67%!important;height:auto!important;
aspect-ratio:2520/1600;transform:rotate(-1deg);z-index:1;
}
.tl-thumb-stage{display:block}
.tl-feature-shot{
width:100%;height:100%;overflow:hidden;border-radius:10px;background:#fff;
border:1px solid rgba(24,45,120,.14);
box-shadow:0 18px 34px rgba(18,40,110,.25);
transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1);
}
.tl-feature-shot img{content:url("assets/talon/prototype-framed.png");display:block;width:100%;height:100%;object-fit:contain;object-position:50% 50%}
.kfh-project-card:hover .tl-feature-shot{transform:translateY(-5px);box-shadow:0 23px 40px rgba(18,40,110,.28)}
@container (max-width:470px){
.project-card .kfh-project-visual,.project-card .eyewa-visual-abstract{padding:14px;gap:5px}
.kfh-project-visual .kfh-thumb-brand,.eyewa-visual-abstract .eyewa-thumb-brand{margin-bottom:9px}
.kfh-project-visual .kfh-thumb-brand b,.eyewa-visual-abstract .eyewa-thumb-brand b{min-width:33px;height:19px;font-size:8.5px}
.kfh-project-visual .kfh-thumb-brand span,.eyewa-visual-abstract .eyewa-thumb-brand span{font-size:8.5px}
.kfh-project-visual .kfh-thumb-copy>p{max-width:none;font-size:12.5px!important}
.kfh-project-visual .kfh-thumb-metrics,.eyewa-visual-abstract .eyewa-thumb-metrics{gap:5px;margin-top:10px}
.kfh-project-visual .kfh-thumb-stat,.eyewa-visual-abstract .eyewa-thumb-stat{min-height:0;padding:6px 7px;font-size:9px;border-radius:9px}
.kfh-project-visual .kfh-thumb-stat strong,.eyewa-visual-abstract .eyewa-thumb-stat strong{font-size:13px}
.kfh-project-visual .kfh-thumb-stat strong small,.eyewa-visual-abstract .eyewa-thumb-stat strong small{font-size:.62em}
.kfh-project-visual .kfh-thumb-stat>span,.eyewa-visual-abstract .eyewa-thumb-stat>span{margin-top:3px}
.eyewa-visual-abstract .eyewa-abstract-glasses{right:-12%;width:52%;opacity:.6}
}
@container (max-width:430px){
.hm-project-visual .kfh-thumb-device{right:-6%;bottom:8%;width:61%!important;height:75%!important}
.tl-project-visual .kfh-thumb-device{right:-6%;bottom:13%;width:61%!important;height:auto!important}
.kfh-project-visual:not(.hm-project-visual):not(.tl-project-visual) .kfh-thumb-device{width:132%!important}
.eyewa-visual-abstract .eyewa-thumb-device{right:2%;height:84%}
}
@container (max-width:330px){
.kfh-project-visual .kfh-thumb-stat,.eyewa-visual-abstract .eyewa-thumb-stat{padding:5px 6px;font-size:8.5px}
.kfh-project-visual .kfh-thumb-stat strong,.eyewa-visual-abstract .eyewa-thumb-stat strong{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
.hm-project-visual .kfh-thumb-device,.tl-project-visual .kfh-thumb-device{animation:none!important}
}
.project-card .visual.ai-thumb{
position:relative;
display:flex;
align-items:center;
gap:6%;
padding:6% 7%;
background:
radial-gradient(ellipse 90% 120% at 88% 0%, rgba(120,26,24,.35), transparent 60%),
linear-gradient(120deg,#170a0c 0%,#1d0c0e 55%,#2a0f10 100%);
container-type:inline-size;
}
.ai-thumb-left,.ai-thumb-copy{font-size:max(10px,2.4cqw)}
.ai-thumb-left{
flex:1 1 56%;
display:flex;
flex-direction:column;
gap:.9em;
min-width:0;
}
.ai-thumb-row{display:flex;gap:.8em}
.ai-box{
height:2.3em;
border:1px solid rgba(255,255,255,.15);
border-radius:.7em;
background:rgba(255,255,255,.02);
animation:aiScan 7s ease-in-out calc(var(--i)*.32s) infinite;
}
@keyframes aiScan{
0%,14%,100%{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.02)}
4%{border-color:rgba(255,182,170,.75);background:rgba(224,60,50,.12)}
8%{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.05)}
46%,54%{border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.06)}
62%{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.02)}
}
.ai-thumb-arrow{
font-style:normal;
color:#e2453c;
font-weight:800;
font-size:1.5em;
line-height:1;
margin:.1em 0 .1em 2.6em;
animation:aiArrow 7s ease-in-out infinite;
}
@keyframes aiArrow{
0%,34%,58%,100%{transform:none;opacity:.9}
40%,48%{transform:translateY(.28em);opacity:1}
}
.ai-thumb-save{
align-self:flex-start;
padding:.75em 1.5em;
border-radius:.6em;
background:#d92c27;
color:#fff;
font-weight:800;
font-size:1.05em;
letter-spacing:-.01em;
animation:aiSave 7s cubic-bezier(.33,1,.68,1) infinite;
}
@keyframes aiSave{
0%,42%{transform:none;box-shadow:0 0 0 0 rgba(224,49,46,0)}
47%{transform:scale(.94)}
52%{transform:none;box-shadow:0 0 0 0 rgba(224,49,46,.5)}
72%{box-shadow:0 0 0 1.1em rgba(224,49,46,0)}
100%{transform:none;box-shadow:0 0 0 0 rgba(224,49,46,0)}
}
.ai-thumb-copy{
flex:1 1 38%;
display:flex;
flex-direction:column;
gap:.9em;
min-width:0;
}
.ai-thumb-copy b{
color:#f6f2ee;
font-size:2.05em;
line-height:1.04;
letter-spacing:-.04em;
font-weight:800;
}
.ai-thumb-copy span{
color:#b9a9a5;
font-size:1.05em;
line-height:1.35;
max-width:14em;
}
.ai-thumb-copy small{
color:#8d7c78;
font-size:.92em;
line-height:1.4;
max-width:15em;
}
@media(prefers-reduced-motion:reduce){
.ai-box,.ai-thumb-arrow,.ai-thumb-save{animation:none!important}
}
.hm-component-board{position:relative}
.hm-token-chip{
position:absolute;left:var(--x);top:var(--y);z-index:2;
display:inline-flex;align-items:center;gap:.45em;padding:.4em .6em .4em .45em;
border-radius:.6em;background:rgba(255,255,255,.96);color:#123c2c;
box-shadow:0 .6em 1.4em rgba(9,58,38,.22),0 0 0 1px rgba(30,128,85,.14);
font-size:max(9px,1.9cqw);line-height:1;white-space:nowrap;
animation:hm-chip 7.5s cubic-bezier(.22,1,.36,1) calc(var(--i)*1.1s) infinite;
transform-origin:left center;
}
.hm-token-chip i{display:block;width:1.1em;height:1.1em;border-radius:.3em;flex:0 0 auto}
.hm-token-chip i.is-radius{background:transparent;border:2px solid #1e8055;border-radius:.45em}
.hm-token-chip b{font-weight:700}
.hm-token-chip small{color:#5a7d6a;font-size:.9em}
@keyframes hm-chip{
0%,4%{opacity:0;transform:translateY(.6em) scale(.9)}
9%,55%{opacity:1;transform:none}
62%,100%{opacity:0;transform:translateY(-.4em) scale(.96)}
}
.tl-feature-shot{position:relative}
.tl-stepper{
position:absolute;left:4%;right:4%;bottom:5%;z-index:2;
display:grid;grid-template-columns:repeat(4,1fr);gap:.4em;padding:.5em .6em .7em;
border-radius:.7em;background:rgba(255,255,255,.94);
box-shadow:0 .8em 1.8em rgba(18,40,110,.22),0 0 0 1px rgba(24,45,120,.12);
font-size:max(8px,1.7cqw);color:#1b2c5e;
}
.tl-stepper>span{display:flex;align-items:center;gap:.4em;font-weight:700;white-space:nowrap;opacity:.42;animation:tl-step 6.4s ease-in-out calc(var(--i)*1.6s) infinite}
.tl-stepper>span b{display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:#e8edfb;color:#2a56d4;font-size:.9em;transition:none}
.tl-stepper-bar{position:absolute;left:.6em;right:.6em;bottom:.32em;height:.22em;border-radius:1em;background:rgba(42,86,212,.14);overflow:hidden}
.tl-stepper-bar::after{content:"";position:absolute;inset:0;background:#2a56d4;transform-origin:left;animation:tl-bar 6.4s linear infinite}
@keyframes tl-step{
0%,3%{opacity:.42}
6%,22%{opacity:1}
28%,100%{opacity:.42}
}
@keyframes tl-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){
.hm-token-chip{animation:none;opacity:1}
.hm-token-chip:not(:first-of-type){display:none}
.tl-stepper>span{animation:none;opacity:1}
.tl-stepper-bar::after{animation:none;transform:none}
}

/* ===== case-extras.css ===== */

.case .case-tldr{
--case-accent:#ff756b;
margin:28px 0 8px;
padding:26px 28px 24px;
border:1px solid rgba(23,25,20,.14);
border-left:4px solid var(--case-accent);
border-radius:22px;
background:#fffdf8;
color:#171914;
}
.case .case-tldr-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.case .case-tldr-eyebrow{color:#171914;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.case .case-tldr-hint{font-size:13px;color:#65685f}
.case .case-tldr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 28px;margin:0}
.case .case-tldr-grid>div{min-width:0}
.case .case-tldr-grid dt{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#65685f;margin:0 0 6px;font-family:inherit}
.case .case-tldr-grid dd{margin:0;font-size:15.5px;line-height:1.5;color:#171914;font-weight:400;font-family:inherit}
.case .case-tldr-grid>div:nth-child(3) dd{font-weight:700}
.case .case-next{
--case-accent:#ff756b;
text-decoration:none;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:"eyebrow cta" "title cta" "desc cta";
gap:6px 32px;
align-items:center;
margin:70px 0 0;
padding:34px 36px;
border:1px solid var(--line);
border-radius:28px;
background:var(--ink);
color:#f8f6f2;
position:relative;
overflow:hidden;
transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;
}
.case-next::before{
content:"";position:absolute;inset:auto -80px -140px auto;width:320px;height:320px;border-radius:50%;
background:var(--case-accent);opacity:.28;filter:blur(40px);transition:opacity .4s,transform .6s;
}
.case-next:hover{transform:translateY(-4px);box-shadow:0 22px 60px rgba(25,28,20,.22)}
.case-next:hover::before{opacity:.5;transform:scale(1.15)}
.case-next>*{position:relative;z-index:1}
.case .case-next-eyebrow{grid-area:eyebrow;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--case-accent)}
.case .case-next-title{grid-area:title;color:#f8f6f2;font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.1;text-wrap:pretty}
.case .case-next-desc{grid-area:desc;color:#b9b6ae;font-size:16px;max-width:60ch}
.case .case-next-cta{grid-area:cta;display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:999px;background:#f8f6f2;color:var(--ink);font-weight:700;white-space:nowrap}
.case-next-cta i{font-style:normal;transition:transform .3s}
.case-next:hover .case-next-cta i{transform:translateX(4px)}
.case-extra-progress{position:fixed;inset:0 0 auto;z-index:50;height:3px;pointer-events:none}
.case-extra-progress span{display:block;height:100%;background:var(--case-accent,#ff756b);transform:scaleX(0);transform-origin:left}
@media(max-width:900px){
.case .case-tldr-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
.case .case-tldr{padding:22px 20px 20px;border-radius:18px}
.case .case-tldr-grid{grid-template-columns:1fr;gap:16px}
.case-next{grid-template-columns:1fr;grid-template-areas:"eyebrow" "title" "desc" "cta";padding:26px 24px;margin-top:50px}
.case-next-cta{justify-self:start;margin-top:8px}
}
@media(prefers-reduced-motion:reduce){
.case-next,.case-next::before,.case-next-cta i{transition:none}
}
.case-hero h1.split-words .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.case-hero h1.split-words .w>span{display:inline-block;transform:translateY(112%);opacity:0}
.case-hero h1.split-words.is-in .w>span{animation:word-rise .95s cubic-bezier(.22,1,.36,1) calc(.08s + var(--wi,0) * 45ms) forwards}
@keyframes word-rise{to{transform:none;opacity:1}}
@media(prefers-reduced-motion:no-preference){
.case.case-entering .case-tldr{animation:tldr-up .9s cubic-bezier(.22,1,.36,1) .35s both}
}
@keyframes tldr-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.case-extra-progress.is-arming span{animation:progress-arm .8s cubic-bezier(.65,0,.35,1) 1}
@keyframes progress-arm{0%{transform:scaleX(0)}45%{transform:scaleX(.28)}100%{transform:scaleX(0)}}
body.chapters-armed .case .chapter .chapter-num{translate:-12px 0;opacity:0;transition:translate .8s cubic-bezier(.22,1,.36,1),opacity .6s ease}
body.chapters-armed .case .chapter.ch-in .chapter-num{translate:0 0;opacity:1}
body.chapters-armed .case .chapter figure img,
body.chapters-armed .case .chapter figure video,
body.chapters-armed .case .chapter .media-grid>*{clip-path:inset(0 100% 0 0);scale:1.03;transition:clip-path 1s cubic-bezier(.22,1,.36,1),scale 1.6s cubic-bezier(.22,1,.36,1)}
body.chapters-armed .case .chapter.ch-in figure img,
body.chapters-armed .case .chapter.ch-in figure video,
body.chapters-armed .case .chapter.ch-in .media-grid>*{clip-path:inset(0 0 0 0);scale:1}
body.chapters-armed .case .chapter .media-grid>* img{clip-path:none;scale:1}
body.chapters-armed .case .chapter.ch-in figure:nth-of-type(2) img,
body.chapters-armed .case .chapter.ch-in .media-grid>:nth-child(2){transition-delay:.14s}
body.chapters-armed .case .chapter.ch-in figure:nth-of-type(3) img,
body.chapters-armed .case .chapter.ch-in .media-grid>:nth-child(3){transition-delay:.28s}
body.chapters-armed .case .chapter.ch-in .media-grid>:nth-child(4){transition-delay:.42s}
body.chapters-armed .case .chapter .ey-compare-row{clip-path:inset(0 100% 0 0 round 14px);transition:clip-path 1.1s cubic-bezier(.22,1,.36,1)}
body.chapters-armed .case .chapter.ch-in .ey-compare-row{clip-path:inset(0 0 0 0 round 14px)}
body.chapters-armed .case .chapter.ch-in .ey-compare-row:nth-child(2){transition-delay:.28s}
.tldr-num{font-variant-numeric:tabular-nums}
.notfound{
width:min(calc(100% - 48px),var(--max));margin:24px auto 90px;padding:clamp(56px,9vw,120px) clamp(24px,6vw,80px);
border-radius:38px;color:#f8f6f2;position:relative;overflow:hidden;isolation:isolate;
background:radial-gradient(ellipse 50% 72% at 94% 14%,rgba(109,43,36,.42),transparent 72%),linear-gradient(115deg,#060a08 0%,#070706 48%,#180d0a 100%);
}
.notfound-eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#ff756b}
.notfound h1{margin:14px 0 18px;font-size:clamp(34px,5vw,64px);font-weight:500;letter-spacing:-.045em;line-height:1.08;max-width:22ch;text-wrap:pretty}
.notfound h1 em{font-style:normal;color:#ff756b}
.notfound p{margin:0 0 30px;color:#b9b6ae;font-size:18px;max-width:52ch}
.notfound-actions{display:flex;flex-wrap:wrap;gap:12px}
.notfound-actions a{display:inline-flex;align-items:center;gap:8px;padding:14px 20px;border-radius:999px;font-weight:700;border:1px solid rgba(255,255,255,.22);color:#f8f6f2;transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .3s}
.notfound-actions a:first-child{background:#f8f6f2;color:#0f100e;border-color:#f8f6f2}
.notfound-actions a:hover{transform:translateY(-2px)}
.notfound-path{margin-top:34px;font-size:13px;color:#8d8a83;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@media(max-width:640px){.notfound{width:calc(100% - 28px);border-radius:28px;margin-bottom:60px}}

/* ===== site-extras.css ===== */

.home-clients{width:min(calc(100% - 48px),var(--max));margin:0 auto}
.home-clients-inner{display:flex;align-items:center;gap:28px}
.home-clients-label{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.home-clients-track{
flex:1 1 auto;min-width:0;display:flex;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.home-clients-list{display:flex;flex:0 0 auto;gap:clamp(28px,4vw,56px);margin:0;padding:0 clamp(14px,2vw,28px) 0 0;list-style:none;animation:clients-marquee 42s linear infinite}
.home-clients-track:hover .home-clients-list{animation-play-state:paused}
.home-clients-list li{white-space:nowrap;font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--ink);opacity:.62;transition:opacity .3s}
.home-clients-list li:hover{opacity:1}
@keyframes clients-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media(max-width:640px){
.home-clients{width:calc(100% - 28px)}
.home-clients-inner{flex-direction:column;align-items:flex-start;gap:12px}
.home-clients-track{width:100%}
}
@media(prefers-reduced-motion:reduce){
.home-clients-list{animation:none;flex-wrap:wrap}
.home-clients-list[aria-hidden]{display:none}
.home-clients-track{mask-image:none;-webkit-mask-image:none}
}
.home-principles-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 28px;margin:0;padding:0;list-style:none;counter-reset:none}
.home-principle{position:relative;padding:22px 0 0;border-top:1px solid var(--ink);min-height:100%}
.home-principle-num{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--coral);margin-bottom:32px}
.home-principle h3{margin:0 0 10px;font-size:22px;letter-spacing:-.03em;line-height:1.15;max-width:11ch}
.home-principle p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55;max-width:30ch}
@media(max-width:1080px){.home-principles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.home-principles-grid{grid-template-columns:1fr;gap:26px}.home-principle-num{margin-bottom:14px}.home-principle h3{max-width:none}.home-principle p{max-width:none}}
@media(prefers-reduced-motion:no-preference){
body.reveal-armed .project-card:not(.is-in),
body.reveal-armed .home-principle:not(.is-in),
body.reveal-armed .timeline-stop:not(.is-in),
body.reveal-armed .home-section-head:not(.is-in){opacity:0}
body.reveal-armed .project-card.is-in,body.reveal-armed .home-principle.is-in,
body.reveal-armed .timeline-stop.is-in,body.reveal-armed .home-section-head.is-in{
animation:reveal-up .85s cubic-bezier(.22,1,.36,1) calc(var(--i,0) * 90ms) backwards;
}
body.reveal-armed .timeline-rail{transform:scaleX(0);transform-origin:left}
body.reveal-armed .timeline-track.is-in .timeline-rail{animation:rail-draw 1.4s cubic-bezier(.22,1,.36,1) .1s both}
body.reveal-armed .timeline-rail::after{opacity:0}
body.reveal-armed .timeline-track.is-in .timeline-rail::after{animation:rail-dot .4s ease-out 1.3s both}
}
@keyframes reveal-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes rail-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rail-dot{from{opacity:0;transform:translateY(-50%) scale(.4)}to{opacity:1;transform:translateY(-50%) scale(1)}}
.cursor-pill{
position:fixed;left:0;top:0;z-index:60;pointer-events:none;
display:inline-flex;align-items:center;gap:9px;padding:7px 8px 7px 16px;border-radius:999px;
background:var(--ink);color:#f8f6f2;font-size:13px;font-weight:700;letter-spacing:.01em;
box-shadow:0 12px 30px rgba(25,28,20,.22);
opacity:0;transform:translate(-50%,-50%) scale(.6);
transition:opacity .22s ease,transform .32s cubic-bezier(.22,1,.36,1);
will-change:transform;
}
.cursor-pill.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cursor-pill-label{white-space:nowrap}
.cursor-pill-arrow{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.14);will-change:transform}
.cursor-pill-arrow svg{width:13px;height:13px;display:block}
@media(hover:none),(pointer:coarse),(max-width:900px){.cursor-pill{display:none}}
body.has-cursor-pill .project-card:not(.coming-soon-card){cursor:none}
body.has-cursor-pill .project-card:not(.coming-soon-card) *{cursor:none}
.mobile-cta{
position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:45;
display:none;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:999px;
background:rgba(23,25,20,.92);color:#f8f6f2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 18px 44px rgba(0,0,0,.35);
transform:translateY(calc(100% + 24px));opacity:0;
transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s;
}
.mobile-cta.is-on{transform:none;opacity:1}
.mobile-cta-text{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.25}
.mobile-cta-text b{display:block;font-size:14px}
.mobile-cta-text span{color:#b9b6ae}
.mobile-cta-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:12px 16px;border-radius:999px;background:#f8f6f2;color:#0f100e;font-weight:800;font-size:14px}
@media(max-width:640px){.mobile-cta{display:flex}body.has-mobile-cta{padding-bottom:84px}}
.nav-backdrop{position:fixed;inset:0;z-index:15;background:rgba(23,25,20,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s}
.nav-backdrop.is-on{opacity:1;pointer-events:auto}
body.nav-open{overflow:hidden}
body.nav-open .mobile-cta{transform:translateY(calc(100% + 24px));opacity:0}
@media(min-width:641px){.nav-backdrop{display:none}}
.site-intro{
position:fixed;inset:0;z-index:100;display:grid;place-items:center;
background:#0a0908;color:#f8f6f2;cursor:pointer;
animation:intro-curtain .7s cubic-bezier(.76,0,.24,1) 1.35s both;
}
.site-intro-inner{text-align:center;padding:0 24px;animation:intro-fade .5s ease .95s both}
.site-intro-name{display:block;font-size:clamp(34px,6vw,84px);font-weight:600;letter-spacing:-.05em;line-height:1;overflow:hidden}
.site-intro-name span{display:inline-block;animation:intro-rise .8s cubic-bezier(.22,1,.36,1) both}
.site-intro-role{display:block;margin-top:14px;font-size:clamp(12px,1.2vw,14px);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#ff756b;animation:intro-rise .8s cubic-bezier(.22,1,.36,1) .18s both}
.site-intro-skip{position:absolute;right:20px;bottom:20px;font-size:12px;color:#8d8a83;letter-spacing:.06em}
@keyframes intro-rise{from{opacity:0;transform:translateY(110%)}to{opacity:1;transform:none}}
@keyframes intro-fade{to{opacity:0;transform:translateY(-10px)}}
@keyframes intro-curtain{to{transform:translateY(-100%);border-radius:0 0 40px 40px}}
.site-intro.is-skipped{animation:intro-curtain .5s cubic-bezier(.76,0,.24,1) 0s both}
body.intro-active .home-hero:not(.is-hero-entered) .home-hero-meta,
body.intro-active .home-hero:not(.is-hero-entered) #home-hero-title,
body.intro-active .home-hero:not(.is-hero-entered) .home-hero-note{animation-play-state:paused}
.project-card .visual{position:relative}
.card-preview-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:3}
.project-card:hover .card-preview-video.is-ready{opacity:1}
@media(hover:none){.card-preview-video{display:none}}
body.home-active{--card-gap:clamp(12px,1.4vw,20px);--card-pad:clamp(56px,6.5vw,84px)}
body.home-active .home-hero{margin-bottom:0}
body.home-active .home-clients{
width:var(--page-content);margin:0 auto;
padding:clamp(22px,2.8vw,40px) max(0px,calc(var(--page-inset) - var(--page-bleed)));
}
body.home-active .home-work,
body.home-active .home-principles,
body.home-active .home-timeline,
body.home-active .home-archive-section{
--work-card-bleed:var(--page-bleed);
position:relative;isolation:isolate;
width:var(--page-content);margin-inline:auto;
margin-top:var(--card-gap);
padding-top:var(--card-pad);padding-bottom:var(--card-pad);
padding-inline:max(0px,calc(var(--page-inset) - var(--page-bleed)));
scroll-margin-top:100px;
}
body.home-active .home-work{margin-top:0} 
body.home-active .home-principles:before{
content:"";position:absolute;inset:0 calc(0px - var(--work-card-bleed));z-index:-1;
border:1px solid var(--line);border-radius:38px;background:var(--card);box-shadow:0 18px 48px rgba(25,28,20,.06);
}
body.home-active .home-principles .section-head{margin-bottom:32px}
body.home-active .home-principles .section-head h2{font-size:clamp(38px,4.8vw,62px);line-height:1.02}
body.home-active .home-principles .section-head p{max-width:400px;font-size:16px}
@media(max-width:760px){
body.home-active .home-principles:before{border-radius:26px}
body.home-active .home-principles .section-head{margin-bottom:24px}
body.home-active .home-principles .section-head h2{font-size:42px}
body.home-active .home-principles .section-head p{font-size:15px}
}
body.home-active .home-work .section-head h2,
body.home-active .home-principles .section-head h2,
body.home-active .home-timeline .section-head h2,
body.home-active .home-archive-section .section-head h2{
font-size:clamp(30px,3.1vw,44px);line-height:1.06;letter-spacing:-.04em;
}
body.home-active .section-head .eyebrow{margin-bottom:6px}
.site-footer .ft4 h2{font-size:clamp(30px,3.1vw,44px)!important;line-height:1.06!important}
@media(max-width:760px){
body.home-active .home-work .section-head h2,
body.home-active .home-principles .section-head h2,
body.home-active .home-timeline .section-head h2,
body.home-active .home-archive-section .section-head h2{font-size:32px}
.site-footer .ft4 h2{font-size:32px!important}
}
.split-words .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.split-words .w>span{display:inline-block;transform:translateY(112%);opacity:0}
.split-words.is-in .w>span{animation:word-rise .9s cubic-bezier(.22,1,.36,1) calc(var(--wi,0) * 55ms) forwards}
@keyframes word-rise{to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.split-words .w>span{transform:none;opacity:1;animation:none}}
@media(prefers-reduced-motion:no-preference){
body.reveal-armed .timeline-track.is-in .timeline-rail::after{animation:rail-dot .4s ease-out 1.3s both,rail-pulse 1.1s ease-out 1.75s 1}
}
@keyframes rail-pulse{0%{box-shadow:0 0 0 5px rgba(255,107,74,.2),0 0 0 0 rgba(255,107,74,.45)}100%{box-shadow:0 0 0 5px rgba(255,107,74,.2),0 0 0 26px rgba(255,107,74,0)}}
@media(hover:hover) and (pointer:fine){
.project-card .kfh-thumb-device,.project-card .eyewa-thumb-device,.project-card .hm-thumb-stage,.project-card .tl-thumb-stage,.project-card .ai-thumb-copy{
translate:calc(var(--px,0) * -7px) calc(var(--py,0) * -5px);transition:translate .45s cubic-bezier(.22,1,.36,1)
}
.project-card .kfh-thumb-copy,.project-card .eyewa-thumb-copy,.project-card .ai-thumb-left{
translate:calc(var(--px,0) * 4px) calc(var(--py,0) * 3px);transition:translate .45s cubic-bezier(.22,1,.36,1)
}
}
@media(hover:hover) and (pointer:fine){
.project-card .kfh-thumb-stat,.project-card .eyewa-thumb-stat{transition:translate .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.project-card:hover .kfh-thumb-stat,.project-card:hover .eyewa-thumb-stat{translate:0 -3px}
.project-card:hover .kfh-thumb-stat[data-thumb-order="1"],.project-card:hover .eyewa-thumb-stat:nth-child(2){transition-delay:40ms}
.project-card:hover .kfh-thumb-stat[data-thumb-order="2"],.project-card:hover .eyewa-thumb-stat:nth-child(3){transition-delay:80ms}
.project-card:hover .kfh-metric-arrow,.project-card:hover .eyewa-metric-arrow{animation:arrow-tick .55s cubic-bezier(.22,1,.36,1) .12s 1}
}
@keyframes arrow-tick{0%{translate:0 0}40%{translate:0 -3px}100%{translate:0 0}}
.home-clients-list{animation:none}
.home-clients-track{cursor:default}
.home-clients-track:hover li{opacity:.3}
.home-clients-track li{transition:opacity .35s ease,translate .35s cubic-bezier(.22,1,.36,1)}
.home-clients-track li:hover{opacity:1;translate:0 -1px}
.site-header{transition:padding .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,background-color .28s ease,border-color .28s ease}
body.is-scrolled .site-header{padding:8px 10px 8px 14px;box-shadow:0 12px 34px rgba(25,28,20,.14)}
body.is-scrolled.home-active .site-header{box-shadow:0 12px 34px rgba(0,0,0,.35)}
.hero-scroll-cue{
position:absolute;left:50%;bottom:14px;z-index:2;translate:-50% 0;
display:flex;flex-direction:column;align-items:center;gap:8px;
font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(248,246,242,.55);
pointer-events:none;transition:opacity .5s ease,translate .5s ease;
}
.hero-scroll-cue i{display:block;width:1px;height:30px;background:linear-gradient(180deg,rgba(248,246,242,.0),rgba(248,246,242,.7));transform-origin:top;animation:cue-line 1.8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cue-line{0%{transform:scaleY(0);opacity:0}30%{opacity:1}100%{transform:scaleY(1);opacity:0}}
body.is-scrolled .hero-scroll-cue{opacity:0;translate:-50% 8px}
@media(max-width:760px){.hero-scroll-cue{display:none}}
@media(prefers-reduced-motion:reduce){.hero-scroll-cue i{animation:none;transform:none;opacity:.6}}
@media(prefers-reduced-motion:no-preference){
body.home-active .home-hero{border-radius:calc(38px + var(--hero-exit,0) * 18px)}
body.home-active .home-hero .home-hero-content,body.home-active .home-hero .home-hero-meta{translate:0 calc(var(--hero-exit,0) * 56px);opacity:calc(1 - var(--hero-exit,0) * .32)}
body.home-active .home-hero .home-hero-note{translate:0 calc(var(--hero-exit,0) * 26px);opacity:calc(1 - var(--hero-exit,0) * .45)}
}
.project-card .visual img{transition:opacity .55s ease}
.project-card .visual img.img-pending{opacity:0}
.project-card .visual.is-loading{background:linear-gradient(120deg,#ecebe5,#f4f2ec 45%,#ecebe5);background-size:200% 100%;animation:img-shimmer 1.6s linear infinite}
@keyframes img-shimmer{from{background-position:120% 0}to{background-position:-80% 0}}
@media(prefers-reduced-motion:reduce){.project-card .visual.is-loading{animation:none}}
.timeline-now-clock{display:flex;align-items:center;gap:6px;margin:2px 0 0;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--coral);font-variant-numeric:tabular-nums}
.timeline-now-clock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral);animation:timeline-live-pulse 1.6s ease-in-out infinite}
.timeline-stop-now .timeline-live{display:none}
.mobile-cta.is-first{animation:cta-spring .8s cubic-bezier(.22,1.4,.36,1) both}
@keyframes cta-spring{from{transform:translateY(calc(100% + 24px));opacity:0}to{transform:none;opacity:1}}
.mobile-cta-text b{display:flex;align-items:center;gap:6px}
.mobile-cta-dot{width:7px;height:7px;border-radius:50%;background:#ff756b;flex:0 0 auto}
.mobile-cta.is-first .mobile-cta-dot{animation:cta-breathe 1.2s ease-out .7s 1}
@keyframes cta-breathe{0%{box-shadow:0 0 0 0 rgba(255,117,107,.5)}100%{box-shadow:0 0 0 10px rgba(255,117,107,0)}}
@media(prefers-reduced-motion:reduce){.mobile-cta.is-first,.mobile-cta.is-first .mobile-cta-dot{animation:none}}
.menu-toggle{display:none;width:44px;height:44px;padding:0;border-radius:999px;cursor:pointer;place-items:center}
@media(max-width:640px){.menu-toggle{display:grid}}
.menu-icon{position:relative;display:block;width:20px;height:14px}
.menu-icon i{position:absolute;left:0;width:20px;height:2px;border-radius:2px;background:currentColor;transition:translate .32s cubic-bezier(.22,1,.36,1),rotate .32s cubic-bezier(.22,1,.36,1),width .32s}
.menu-icon i:first-child{top:2px}
.menu-icon i:last-child{bottom:2px;width:14px}
.menu-toggle[aria-expanded="true"]{opacity:1}
.menu-toggle[aria-expanded="true"] .menu-icon i:first-child{translate:0 4px;rotate:45deg}
.menu-toggle[aria-expanded="true"] .menu-icon i:last-child{width:20px;translate:0 -4px;rotate:-45deg}
@media(prefers-reduced-motion:no-preference){
.site-footer .ft4 h2{clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.22,1,.36,1)}
.site-footer .ft4.is-in h2{clip-path:inset(0 -2% 0 0)}
}
.ft4-tile-email{translate:var(--mx,0) var(--my,0);transition:translate .45s cubic-bezier(.22,1,.36,1)}
.ft4-copy{position:relative}
.ft4-copy .copy-check{position:absolute;inset:0;margin:auto;width:18px;height:18px;opacity:0}
.ft4-copy .copy-check path{stroke-dasharray:24;stroke-dashoffset:24}
.ft4-copy.is-copied>svg:not(.copy-check){opacity:0}
.ft4-copy.is-copied .copy-check{opacity:1}
.ft4-copy.is-copied .copy-check path{animation:check-draw .5s cubic-bezier(.22,1,.36,1) forwards}
@keyframes check-draw{to{stroke-dashoffset:0}}
.home-resume-link span,.ft4-tile .ft4-pill svg{display:inline-block;transition:translate .3s}
.is-opening>span,.is-opening .ft4-pill svg{animation:arrow-fly .7s cubic-bezier(.22,1,.36,1) 1}
@keyframes arrow-fly{0%{translate:0 0;opacity:1}45%{translate:8px -8px;opacity:0}46%{translate:-6px 6px;opacity:0}100%{translate:0 0;opacity:1}}

/* ===== motion-extras.css ===== */

@media(prefers-reduced-motion:no-preference){
body.home-active .home-hero:not(.is-hero-entered) #home-hero-title .hl{
animation:hl-in .9s cubic-bezier(.22,1,.36,1) calc(.34s + var(--hl,0) * .16s) both;
}
body.home-active .home-hero:not(.is-hero-entered) #home-hero-title .home-inline-cta{animation:hero-pill-pop .7s cubic-bezier(.34,1.56,.64,1) .78s both}
body.home-active .home-hero:not(.is-hero-entered) #home-hero-title .home-talk-pill{animation:hero-pill-pop .7s cubic-bezier(.34,1.56,.64,1) .96s both}
}
@keyframes hl-in{from{opacity:0;filter:blur(9px)}to{opacity:1;filter:blur(0)}}
@keyframes hero-pill-pop{from{opacity:0;transform:translateY(10px) scale(.86)}to{opacity:1;transform:translateY(0) scale(1)}}
body.home-active #home-hero-title .home-rotating-word>span::after{
content:"";position:absolute;left:0;bottom:.05em;height:.055em;width:100%;border-radius:2px;
background:currentColor;opacity:.9;transform:scaleX(0);transform-origin:left center;
}
@media(prefers-reduced-motion:no-preference){
body.home-active #home-hero-title .home-rotating-word>span.is-run::after{animation:word-scrub 2.6s linear both}
}
@keyframes word-scrub{
0%{transform:scaleX(0);transform-origin:left center}
12%{transform:scaleX(0);transform-origin:left center}
82%{transform:scaleX(1);transform-origin:left center}
82.01%{transform:scaleX(1);transform-origin:right center}
100%{transform:scaleX(0);transform-origin:right center}
}
body.home-active #home-hero-title .home-inline-cta .home-eye{position:relative;overflow:hidden}
body.home-active #home-hero-title .home-inline-cta .home-eye::before{
content:"";position:absolute;inset:-1px;border-radius:inherit;background:#161b18;
transform:scaleY(0);transform-origin:center top;pointer-events:none;
}
@media(prefers-reduced-motion:no-preference){
body.home-active #home-hero-title .home-inline-cta:hover .home-eye::before{animation:eye-blink .3s ease .08s 1}
body.home-active #home-hero-title .home-inline-cta .home-eye.is-glance::after{transform:translate(0,.34em)!important;transition:transform .2s cubic-bezier(.22,1,.36,1)}
}
@keyframes eye-blink{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0)}}
body.home-active #home-hero-title .home-talk-pill{position:relative;overflow:hidden;isolation:isolate}
body.home-active #home-hero-title .home-talk-pill::before{
content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:#f0503c;
transform:translateX(-102%);transition:transform .42s cubic-bezier(.22,1,.36,1);
}
body.home-active #home-hero-title .home-talk-pill:hover{background:#f7f4ef}
body.home-active #home-hero-title .home-talk-pill:hover::before{transform:translateX(0)}
body.home-active #home-hero-title .home-talk-pill .home-talk-icon{position:relative;overflow:hidden}
body.home-active #home-hero-title .home-talk-pill .home-talk-icon>span,
body.home-active #home-hero-title .home-talk-pill .home-talk-icon::after{
display:block;transition:transform .38s cubic-bezier(.22,1,.36,1);
}
body.home-active #home-hero-title .home-talk-pill .home-talk-icon::after{
content:"↗";position:absolute;inset:0;display:grid;place-items:center;transform:translate(-100%,100%);
}
body.home-active #home-hero-title .home-talk-pill:hover .home-talk-icon{transform:none}
body.home-active #home-hero-title .home-talk-pill:hover .home-talk-icon>span{transform:translate(100%,-100%)}
body.home-active #home-hero-title .home-talk-pill:hover .home-talk-icon::after{transform:translate(0,0)}
@media(prefers-reduced-motion:reduce){
body.home-active #home-hero-title .home-talk-pill::before{transition:none}
body.home-active #home-hero-title .home-talk-pill .home-talk-icon>span,
body.home-active #home-hero-title .home-talk-pill .home-talk-icon::after{transition:none}
}
body.home-active .home-hero-meta span.is-typing{display:inline-block;white-space:nowrap}
body.home-active .home-hero-meta span.is-typing::after{
content:"";display:inline-block;width:.5em;height:.95em;margin-left:.12em;vertical-align:-.12em;
background:#ff756b;animation:meta-caret .9s steps(2,jump-none) infinite;
}
@keyframes meta-caret{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:no-preference){
.project-card:hover .kfh-metric-arrow.is-down{animation:arrow-pulse-down .46s ease-in-out .1s 3}
.project-card:hover .kfh-metric-arrow.is-up,
.project-card:hover .eyewa-metric-arrow{animation:arrow-pulse-up .46s ease-in-out .1s 3}
}
@keyframes arrow-pulse-down{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes arrow-pulse-up{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:no-preference){
body.reveal-armed .project-card .visual{transition:scale 1.1s cubic-bezier(.22,1,.36,1)}
body.reveal-armed .project-card:not(.is-in) .visual{scale:1.04}
body.reveal-armed .project-card.is-in .visual{scale:1}
body.reveal-armed .project-card .meta{transition:opacity .7s ease,translate .9s cubic-bezier(.22,1,.36,1)}
body.reveal-armed .project-card:not(.is-in) .meta{opacity:0;translate:0 10px}
body.reveal-armed .project-card.is-in .meta{opacity:1;translate:0 0;transition-delay:.12s}
}
.coming-soon-banner{overflow:hidden}
.coming-soon-banner::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.32) 50%,transparent 68%);
transform:translateX(-130%);
}
@media(prefers-reduced-motion:no-preference){
.coming-soon-banner::after{animation:cs-shimmer 6s ease-in-out 1.2s infinite}
.project-card.coming-soon-card{animation:cs-breathe 4.2s ease-in-out infinite}
}
@keyframes cs-shimmer{0%{transform:translateX(-130%)}18%{transform:translateX(130%)}100%{transform:translateX(130%)}}
@keyframes cs-breathe{0%,100%{border-color:var(--line)}50%{border-color:rgba(23,25,20,.34)}}
@media(prefers-reduced-motion:no-preference){
body.reveal-armed .shots:not(.is-in) .shot{opacity:0}
body.reveal-armed .shots.is-in .shot{animation:shot-in .75s cubic-bezier(.22,1,.36,1) calc(var(--i,0) * 45ms) backwards}
.shot{transform-style:preserve-3d;will-change:transform}
.shot:hover{transform:translateY(-6px) perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg))}
.shot span{position:relative;overflow:hidden;transition:translate .35s cubic-bezier(.22,1,.36,1)}
.shot span::after{
content:"↗";position:absolute;right:16px;top:14px;font-weight:800;color:var(--coral);
transform:translate(-6px,120%);opacity:0;transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .25s;
}
.shot:hover span::after,.shot:focus-visible span::after{transform:translate(0,0);opacity:1}
}
@keyframes shot-in{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.shot-lightbox.is-morph[open]{animation:none}
.shot-lightbox.is-morph .shot-lightbox-panel{animation:none}
@media(prefers-reduced-motion:no-preference){
::view-transition-group(shot-morph){animation-duration:.5s;animation-timing-function:cubic-bezier(.22,1,.36,1);z-index:80}
::view-transition-old(shot-morph),::view-transition-new(shot-morph){height:100%;width:100%;object-fit:contain;animation-duration:.5s;mix-blend-mode:normal}
::view-transition-old(shot-morph){animation-name:vt-fade-out;animation-duration:.22s}
::view-transition-new(shot-morph){animation-name:vt-fade-in;animation-duration:.3s}
.shot-lightbox.slide-left img{animation:lb-slide-left .42s cubic-bezier(.22,1,.36,1) both}
.shot-lightbox.slide-right img{animation:lb-slide-right .42s cubic-bezier(.22,1,.36,1) both}
.shot-lightbox.slide-left figcaption,.shot-lightbox.slide-right figcaption{animation:vt-fade-in .4s ease both}
}
@keyframes lb-slide-left{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes lb-slide-right{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
.home-principle-num .odo{display:inline-flex;height:1.2em;overflow:hidden;line-height:1.2;vertical-align:top}
.home-principle-num .odo-d{display:inline-block;height:1.2em}
.home-principle-num .odo-reel{display:block;transition:translate .9s cubic-bezier(.22,1,.36,1)}
.home-principle-num .odo-reel i{display:block;height:1.2em;font-style:normal}
.home-principle::before{
content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--ink);
transform:scaleX(0);transform-origin:left center;
}
@media(prefers-reduced-motion:no-preference){
body.reveal-armed .home-principle{border-top-color:rgba(23,25,20,.16)}
body.reveal-armed .home-principle.is-in::before{animation:line-draw 1.1s cubic-bezier(.22,1,.36,1) calc(var(--i,0) * 90ms + .15s) both}
body.reveal-armed .home-principle:not(.is-in) .odo-reel{translate:0 0!important}
}
@keyframes line-draw{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:no-preference){
.timeline-tip i{opacity:0;translate:0 6px}
.timeline-stop:hover .timeline-tip i,.timeline-stop:focus-visible .timeline-tip i{animation:tip-line .4s cubic-bezier(.22,1,.36,1) calc(.1s + var(--n,0) * 45ms) forwards}
.timeline-tip b{opacity:0;translate:0 4px}
.timeline-stop:hover .timeline-tip b,.timeline-stop:focus-visible .timeline-tip b{animation:tip-line .35s cubic-bezier(.22,1,.36,1) .06s forwards}
.timeline-tip:after{translate:-8px 0;transition:translate .35s cubic-bezier(.22,1,.36,1)}
.timeline-stop:hover .timeline-tip:after,.timeline-stop:focus-visible .timeline-tip:after{translate:0 0}
}
@keyframes tip-line{to{opacity:1;translate:0 0}}
.timeline-stop-now .timeline-dot{position:relative}
.timeline-stop-now .timeline-dot::after{
content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid var(--coral);opacity:0;pointer-events:none;
}
@media(prefers-reduced-motion:no-preference){
.timeline-stop-now .timeline-dot::after{animation:radar-ring 2.4s ease-out infinite}
.timeline-now-clock .clock-colon{animation:clock-colon 1s steps(2,jump-none) infinite}
}
.timeline-now-clock .clock-colon{font-style:normal;letter-spacing:0;margin:0 -.04em}
@keyframes radar-ring{0%{transform:scale(.6);opacity:.7}70%{transform:scale(3.2);opacity:0}100%{transform:scale(3.2);opacity:0}}
@keyframes clock-colon{from{opacity:1}to{opacity:.15}}
@media(prefers-reduced-motion:no-preference){
.drag-contact-card.is-idle-hint .drag-contact-hint{animation:hint-wiggle .9s cubic-bezier(.36,.07,.19,.97) 1}
.contact-card-playground .drag-contact-card.is-dragging{box-shadow:0 34px 70px rgba(15,17,12,.32),0 4px 14px rgba(15,17,12,.14)}
}
@keyframes hint-wiggle{0%,100%{rotate:0deg;translate:0 0}20%{rotate:-6deg;translate:-2px 0}40%{rotate:5deg;translate:2px 0}60%{rotate:-4deg}80%{rotate:3deg}}
.ft4-tile-email .ft4-tile-text a .ch{display:inline-block;white-space:pre}
@media(prefers-reduced-motion:no-preference){
.ft4-tile-email .ft4-tile-text a.is-scatter .ch{animation:ch-scatter .62s cubic-bezier(.22,1,.36,1) calc(var(--ci,0) * 12ms) both}
}
@keyframes ch-scatter{0%{translate:0 0;opacity:1}30%{translate:var(--sx,2px) var(--sy,-3px);opacity:.55;color:var(--coral)}100%{translate:0 0;opacity:1}}
.case .fact{position:relative}
.case .fact::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:currentColor;opacity:.32;transform:scaleX(0);transform-origin:left center}
@media(prefers-reduced-motion:no-preference){
.case.case-entering .case-facts .fact{animation:fact-in .8s cubic-bezier(.22,1,.36,1) calc(.62s + var(--fi,0) * .09s) both;border-top-color:transparent}
.case.case-entering .case-facts .fact::before{animation:line-draw .9s cubic-bezier(.22,1,.36,1) calc(.62s + var(--fi,0) * .09s) both}
.case .case-facts .fact:nth-child(1){--fi:0}.case .case-facts .fact:nth-child(2){--fi:1}.case .case-facts .fact:nth-child(3){--fi:2}.case .case-facts .fact:nth-child(4){--fi:3}
}
@keyframes fact-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.study-toc.has-marker{position:sticky}
.study-toc .toc-marker{
position:absolute;left:-10px;top:0;width:2px;height:var(--toc-h,0px);border-radius:2px;
background:var(--accent,var(--coral));translate:0 var(--toc-y,0px);opacity:0;pointer-events:none;
transition:translate .55s cubic-bezier(.34,1.3,.64,1),height .4s cubic-bezier(.22,1,.36,1),opacity .3s;
}
.study-toc.has-marker.marker-on .toc-marker{opacity:1}
body.kfh-active .study-toc .toc-marker,body.eyewa-case-active .study-toc .toc-marker{left:0}
.study-toc.has-marker a{position:relative}
.study-toc.has-marker a.active{border-left-color:transparent!important}
.study-toc .toc-n{font-variant-numeric:tabular-nums;transition:color .3s}
.study-toc a.active .toc-n{color:var(--accent,var(--coral))}
@media(max-width:980px){.study-toc .toc-marker{display:none}}
@media(prefers-reduced-motion:reduce){.study-toc .toc-marker{transition:none}}
.case .chapter-num{position:relative;display:inline-block;padding-bottom:6px;margin-bottom:-6px}
.case .chapter-num::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:2.4em;border-radius:2px;background:var(--accent,currentColor);transform:scaleX(0);transform-origin:left center}
.case .chapter-num .ch-n{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:no-preference){
.case .chapter-num.num-in::after{animation:line-draw .8s cubic-bezier(.22,1,.36,1) .25s both}
}
.case .case-next::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(110deg,transparent 35%,color-mix(in srgb,var(--case-accent) 22%,transparent) 50%,transparent 65%);
transform:translateX(-120%);
}
.case .case-next-title{transition:translate .45s cubic-bezier(.22,1,.36,1)}
.case .case-next-cta i{position:relative;display:inline-block;width:1.1em;height:1em;color:transparent;transition:width .4s cubic-bezier(.22,1,.36,1),transform .3s}
.case .case-next-cta i::before{content:"";position:absolute;left:0;top:50%;height:2px;width:calc(100% - .1em);border-radius:2px;background:var(--ink);translate:0 -50%;transition:width .4s cubic-bezier(.22,1,.36,1)}
.case .case-next-cta i::after{content:"";position:absolute;right:.1em;top:50%;width:.5em;height:.5em;border-top:2px solid var(--ink);border-right:2px solid var(--ink);translate:0 -50%;rotate:45deg}
@media(prefers-reduced-motion:no-preference){
.case .case-next:hover::after{animation:next-sweep .9s cubic-bezier(.22,1,.36,1) both}
.case .case-next:hover .case-next-title{translate:-6px 0}
.case .case-next:hover .case-next-cta i{width:2.4em;transform:none}
}
@keyframes next-sweep{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
#main:empty{min-height:100vh}

/* ===== hero-video.css ===== */

body.home-active #home-hero-title .home-inline-cta[data-hero-video]{
position:relative;overflow:hidden;
border-color:rgba(255,255,255,.4);
background:rgba(8,10,8,.76);
transition:background-color .2s ease,border-color .2s ease;
}
body.home-active #home-hero-title .home-inline-cta[data-hero-video]::before{display:none}
body.home-active #home-hero-title .home-inline-cta[data-hero-video]:hover,
body.home-active #home-hero-title .home-inline-cta[data-hero-video]:focus-visible{
background:rgba(255,255,255,.1);
border-color:rgba(255,255,255,.55);
}
body.home-active #home-hero-title .home-inline-cta .home-inline-label,
body.home-active #home-hero-title .home-inline-cta .home-eye{position:relative;z-index:1}
body.home-active #home-hero-title .home-inline-cta .home-inline-label{text-shadow:0 1px 8px rgba(4,6,5,.7)}
.home-cta-bg{
position:absolute;inset:0;
z-index:0;
border-radius:inherit;
overflow:hidden;
pointer-events:none;
}
.home-cta-bg .home-cta-video{
width:100%;height:100%;
display:block;
object-fit:cover;
object-position:center;
opacity:.4;
transition:opacity .25s ease;
}
body.home-active #home-hero-title .home-inline-cta.is-previewing .home-cta-video,
body.home-active #home-hero-title .home-inline-cta:focus-visible .home-cta-video{opacity:.55}
.hero-reel-card{
position:fixed;left:0;top:0;
width:0;height:0;
z-index:120;
pointer-events:none;
will-change:transform;
}
.hero-reel-card-inner{
position:absolute;left:0;top:0;
width:224px;height:224px;
border-radius:24px;
overflow:hidden;
background:#050705;
box-shadow:0 30px 70px rgba(0,0,0,.55);
opacity:0;
transform:scale(.8);
transform-origin:0 0;
transition:opacity .22s ease,transform .32s cubic-bezier(.22,1,.36,1);
}
.hero-reel-card.is-visible .hero-reel-card-inner{opacity:1;transform:scale(1)}
.hero-reel-card-video{
width:100%;height:100%;
display:block;
object-fit:cover;
}
.hero-reel-card-border{
position:absolute;inset:0;
border:2px solid rgba(255,255,255,.15);
border-radius:24px;
pointer-events:none;
z-index:2;
}
.hero-reel-card-badge{
position:absolute;right:8px;bottom:8px;
z-index:3;
display:inline-flex;align-items:center;gap:6px;
height:28px;
padding:0 11px;
border-radius:999px;
border:2px solid rgba(255,255,255,.15);
background:#050705;
color:#f8f6f2;
font-size:13px;font-weight:600;letter-spacing:-.01em;
line-height:1;
}
.hero-reel-card-badge svg{width:15px;height:15px;display:block}
@media(hover:none),(pointer:coarse){.hero-reel-card{display:none}}
@media(prefers-reduced-motion:reduce){
.hero-reel-card-inner{transition:opacity .16s ease;transform:none}
}
html.hero-reel-open{overflow:hidden}
.hero-reel-modal{
position:fixed;inset:0;
width:100vw;max-width:none;
height:100dvh;max-height:none;
margin:0;padding:0;
border:0;
background:rgba(0,0,0,.8);
color:#f8f6f2;
overscroll-behavior:contain;
}
.hero-reel-modal::backdrop{background:transparent}
.hero-reel-modal[open]{display:grid;place-items:center}
.hero-reel-frame{
position:relative;
width:90vmin;height:90vmin;
border-radius:32px;
overflow:hidden;
background:#000;
box-shadow:0 40px 110px rgba(0,0,0,.6);
}
.hero-reel-video{width:100%;height:100%;display:block;object-fit:cover;background:#000}
.hero-reel-close{
position:absolute;top:16px;right:16px;
z-index:3;
display:grid;place-items:center;
width:36px;height:36px;
padding:0;
border:0;
border-radius:999px;
background:rgba(0,0,0,.35);
color:#fff;
opacity:.7;
cursor:pointer;
transition:opacity .2s ease,background .2s ease;
}
.hero-reel-close svg{width:16px;height:16px;display:block}
.hero-reel-close:hover{opacity:1;background:rgba(0,0,0,.55)}
.hero-reel-close:focus-visible{opacity:1;outline:2px solid rgba(255,255,255,.9);outline-offset:2px}
.hero-reel-hint{
position:absolute;left:50%;bottom:16px;z-index:3;
translate:-50% 0;
padding:8px 14px;
border-radius:999px;
border:1px solid rgba(255,255,255,.24);
background:rgba(0,0,0,.6);
color:#fff;
font:inherit;font-size:12px;font-weight:600;
cursor:pointer;
}
@media(prefers-reduced-motion:no-preference){
.hero-reel-modal[open]{animation:hero-reel-fade .2s ease both}
.hero-reel-modal[open] .hero-reel-frame{animation:hero-reel-zoom .2s ease both}
.hero-reel-modal.is-closing{animation:hero-reel-fade .2s ease reverse both}
.hero-reel-modal.is-closing .hero-reel-frame{animation:hero-reel-zoom .2s ease reverse both}
}
@keyframes hero-reel-fade{from{opacity:0}to{opacity:1}}
@keyframes hero-reel-zoom{from{transform:scale(.95)}to{transform:none}}
@media(max-width:600px){
.hero-reel-frame{width:92vmin;height:92vmin;border-radius:22px}
.hero-reel-close{top:10px;right:10px}
}

/* ===== case-typography.css ===== */

body.case-active main h1{
font-size:clamp(28px,3vw,38px)!important;
line-height:1.1!important;
letter-spacing:-.025em!important;
}
body.case-active main h2{
font-size:clamp(22px,2.1vw,28px)!important;
line-height:1.2!important;
letter-spacing:-.02em!important;
}
body.case-active main h3{
font-size:clamp(17px,1.4vw,19px)!important;
line-height:1.3!important;
letter-spacing:-.01em!important;
}
body.case-active main h4{
font-size:clamp(15px,1.1vw,17px)!important;
line-height:1.35!important;
}

/* ===== interactions.css ===== */

body.home-active #home-hero-title .hl{display:inline;position:relative;left:var(--lean-x,0);top:var(--lean-y,0);transition:left .5s cubic-bezier(.22,1,.36,1),top .5s cubic-bezier(.22,1,.36,1)}
.project-grid.has-tilt{perspective:1400px}
.project-grid.has-tilt .project-card{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .4s ease}
.project-grid.has-tilt .project-card.is-tilting{transform:rotateY(calc(var(--px,0)*4deg)) rotateX(calc(var(--py,0)*-4deg));box-shadow:0 26px 60px rgba(25,28,20,.16)}
.project-grid.has-tilt .project-card .visual,.project-grid.has-tilt .project-card .meta{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.project-grid.has-tilt .project-card.is-tilting .visual{transform:translateZ(26px)}
.project-grid.has-tilt .project-card.is-tilting .meta{transform:translateZ(12px)}
[data-countup]{font-variant-numeric:tabular-nums;transition:color .35s ease}
[data-countup].is-counted{color:var(--case-accent,var(--coral,#ff6b4a))}
.dsp{margin:36px 0 8px;border:1px solid rgba(23,25,20,.12);border-radius:20px;background:#fffdf8;overflow:hidden}
.dsp-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 22px;border-bottom:1px solid rgba(23,25,20,.12)}
.dsp-head h3{margin:0;font-size:17px}
.dsp-head p{margin:0;font-size:13px;color:#65685f}
.dsp-body{display:grid;grid-template-columns:minmax(0,1fr) 250px}
.dsp-stage{display:grid;place-items:center;gap:34px;padding:40px 24px;min-height:420px;background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(23,25,20,.045) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(23,25,20,.045) 23px 24px);--surface-base:#fff;--surface-subtle:#f3f1ec;--content-primary:#171914;--content-secondary:#5f625a;--content-on-accent:#fff;--color-accent:#1f5eff;--color-accent-hover:#174ccc;--color-border-default:#c9c6bf;--color-border-strong:#171914;--color-focus:#ffb020;--radius-control:8px}
.dsp-controls{padding:18px 20px;border-left:1px solid rgba(23,25,20,.12);display:grid;gap:14px;align-content:start;font-size:13px}
.dsp-controls fieldset{border:0;margin:0;padding:0;display:grid;gap:6px}
.dsp-controls legend{font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#65685f;padding:0;margin-bottom:2px}
.dsp-seg{display:flex;gap:4px;flex-wrap:wrap}
.dsp-seg label{cursor:pointer}
.dsp-seg input{position:absolute;opacity:0;pointer-events:none}
.dsp-seg span{display:inline-block;padding:5px 10px;border-radius:999px;border:1px solid rgba(23,25,20,.12);background:#fff;font-weight:500;transition:background .25s ease,color .25s ease}
.dsp-seg input:checked+span{background:#171914;color:#fff;border-color:#171914}
.dsp-seg input:focus-visible+span{outline:2px solid #ff6b4a;outline-offset:2px}
.dsp-spec{margin:6px 0 0;padding:12px;border-radius:8px;background:#f1eee7;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.55;color:#3a3d36;white-space:pre-wrap}
@media(max-width:820px){.dsp-body{grid-template-columns:1fr}.dsp-controls{border-left:0;border-top:1px solid rgba(23,25,20,.12)}}
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--g,8px);height:var(--h,40px);padding:0 var(--px,16px);border-radius:var(--radius-control);font:inherit;font-weight:600;font-size:var(--fs,14px);line-height:1;cursor:pointer;border:1px solid transparent;transition:background .25s ease,color .25s ease,box-shadow .25s ease;position:relative}
.ds-btn[data-size=sm]{--h:32px;--px:12px;--fs:13px;--g:6px}
.ds-btn[data-size=md]{--h:40px;--px:16px;--fs:14px;--g:8px}
.ds-btn[data-size=lg]{--h:48px;--px:20px;--fs:16px;--g:10px}
.ds-btn[data-density=compact]{--h:calc(var(--h) - 6px);--px:calc(var(--px) - 4px)}
.ds-btn[data-variant=primary]{background:var(--color-accent);color:var(--content-on-accent)}
.ds-btn[data-variant=secondary]{background:var(--surface-base);color:var(--content-primary);border-color:var(--color-border-default)}
.ds-btn[data-variant=ghost]{background:transparent;color:var(--content-primary)}
.ds-btn[data-state=hover][data-variant=primary]{background:var(--color-accent-hover)}
.ds-btn[data-state=hover][data-variant=secondary]{background:var(--surface-subtle);border-color:var(--color-border-strong)}
.ds-btn[data-state=hover][data-variant=ghost]{background:var(--surface-subtle)}
.ds-btn[data-state=focus]{box-shadow:0 0 0 2px var(--surface-base),0 0 0 4px var(--color-focus)}
.ds-btn[data-state=disabled]{opacity:.45;cursor:not-allowed}
.ds-btn[data-state=loading]{color:transparent}
.ds-btn[data-state=loading]::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-color:var(--content-on-accent) transparent var(--content-on-accent) transparent;animation:ds-spin .8s linear infinite}
.ds-btn[data-state=loading][data-variant=secondary]::after,.ds-btn[data-state=loading][data-variant=ghost]::after{border-color:var(--content-primary) transparent var(--content-primary) transparent}
.ds-btn svg{width:1.05em;height:1.05em}
.ds-btn[data-icon=end]{flex-direction:row-reverse}
.ds-btn[data-icon=none] svg{display:none}
@keyframes ds-spin{to{transform:rotate(360deg)}}
.ds-dp{width:296px;background:var(--surface-base);border:1px solid var(--color-border-default);border-radius:12px;box-shadow:0 12px 34px rgba(25,28,20,.12);padding:12px;font-size:var(--fs,13px);color:var(--content-primary);transform:scale(var(--dp-scale,1));transform-origin:top center;transition:transform .3s ease}
.ds-dp[data-size=sm]{--fs:12px;--dp-scale:.92}.ds-dp[data-size=lg]{--fs:14px;--dp-scale:1.08}
.ds-dp[data-density=compact]{--dp-scale:.88}
.ds-dp-head{display:flex;justify-content:space-between;align-items:center;margin:2px 4px 10px;font-weight:600}
.ds-dp-head button{width:28px;height:28px;border-radius:6px;border:1px solid var(--color-border-default);background:var(--surface-base);cursor:pointer;font:inherit}
.ds-dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.ds-dp-grid span{font-size:11px;color:var(--content-secondary);padding:4px 0;font-weight:600}
.ds-dp-grid b{font-weight:500;padding:0;height:34px;display:grid;place-items:center;border-radius:6px;cursor:default}
.ds-dp-grid b.is-muted{color:var(--content-secondary);opacity:.5}
.ds-dp-grid b.is-today{box-shadow:inset 0 0 0 1px var(--color-border-strong)}
.ds-dp-grid b.in-range{background:var(--surface-subtle);border-radius:0}
.ds-dp-grid b.is-start,.ds-dp-grid b.is-end{background:var(--color-accent);color:var(--content-on-accent);border-radius:6px}
.ds-dp[data-state=hover] .ds-dp-grid b.is-hover{background:var(--surface-subtle)}
.ds-dp[data-state=focus] .ds-dp-grid b.is-start{box-shadow:0 0 0 2px var(--surface-base),0 0 0 4px var(--color-focus)}
.ds-dp[data-state=disabled]{opacity:.45}
.ds-dp[data-state=loading] .ds-dp-grid{opacity:.35}
.ds-dp-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--color-border-default)}
.case-extra-progress,.reading-progress,.hm-progress{overflow:visible}
.case-extra-progress .progress-ticks,.reading-progress .progress-ticks,.hm-progress .progress-ticks{position:absolute;inset:0;pointer-events:none}
.progress-tick{position:absolute;top:-6px;width:14px;height:16px;translate:-50% 0;pointer-events:auto;cursor:pointer}
.progress-tick::after{content:"";position:absolute;left:50%;top:6px;width:2px;height:7px;translate:-50% 0;background:var(--case-accent,#ff756b);opacity:.55;transition:opacity .2s ease,height .2s ease}
.progress-tick:hover::after,.progress-tick:focus-visible::after{opacity:1;height:11px}
@media(prefers-reduced-motion:reduce){
.project-grid.has-tilt .project-card,.project-grid.has-tilt .project-card .visual,.project-grid.has-tilt .project-card .meta,body.home-active #home-hero-title .hl{transition:none;transform:none;translate:0 0}
}
.dsp-tabs{display:flex;gap:4px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid rgba(23,25,20,.12);background:#faf8f3}
.dsp-tabs button{font:inherit;font-size:13px;font-weight:600;padding:7px 12px;border-radius:999px;border:1px solid transparent;background:transparent;color:#65685f;cursor:pointer;transition:background .25s ease,color .25s ease}
.dsp-tabs button:hover{color:#171914;background:#f1eee7}
.dsp-tabs button.is-on{background:#171914;color:#fff}
.dsp-tabs button:focus-visible{outline:2px solid #ff6b4a;outline-offset:2px}
.dsp-stage{--color-danger:#d4372a;--color-danger-soft:#fbe9e6}
.ds-field{display:grid;gap:6px;width:min(100%,340px);font-size:var(--fs,14px);color:var(--content-primary)}
.ds-field[data-size=sm]{--fs:13px;--h:32px;--px:10px}.ds-field[data-size=md]{--fs:14px;--h:40px;--px:12px}.ds-field[data-size=lg]{--fs:16px;--h:48px;--px:14px}
.ds-field[data-density=compact]{--h:calc(var(--h) - 6px)}
.ds-label{font-size:12px;font-weight:600;color:var(--content-primary)}
.ds-input{display:flex;align-items:center;gap:8px;height:var(--h,40px);padding:0 var(--px,12px);background:var(--surface-base);border:1px solid var(--color-border-default);border-radius:var(--radius-control);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.ds-input svg{width:16px;height:16px;color:var(--content-secondary);flex:0 0 auto}
.ds-input input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:inherit;outline:none}
.ds-input input::placeholder{color:var(--content-secondary);opacity:.7}
.ds-field[data-state=hover] .ds-input{border-color:var(--color-border-strong)}
.ds-field[data-state=focus] .ds-input{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--surface-base),0 0 0 4px var(--color-focus)}
.ds-field[data-state=error] .ds-input{border-color:var(--color-danger);background:var(--color-danger-soft)}
.ds-field[data-state=disabled]{opacity:.45}
.ds-help{font-size:12px;color:var(--content-secondary)}
.ds-help.is-error{color:var(--color-danger)}
.ds-radio-group{display:grid;gap:12px;font-size:var(--fs,14px);color:var(--content-primary)}
.ds-radio-group[data-layout=horizontal]{grid-auto-flow:column;gap:22px}
.ds-radio-group[data-size=sm]{--fs:13px;--d:16px}.ds-radio-group[data-size=md]{--fs:14px;--d:20px}
.ds-radio{display:flex;gap:10px;align-items:flex-start;cursor:default}
.ds-radio-dot{flex:0 0 auto;width:var(--d,20px);height:var(--d,20px);border-radius:50%;border:1.5px solid var(--color-border-default);background:var(--surface-base);position:relative;transition:border-color .2s ease,box-shadow .2s ease;margin-top:1px}
.ds-radio.is-checked .ds-radio-dot{border-color:var(--color-accent);border-width:calc(var(--d,20px)*.3)}
.ds-radio-text{display:grid;gap:2px}.ds-radio-text b{font-weight:500}.ds-radio-text small{font-size:12px;color:var(--content-secondary)}
.ds-radio-group[data-state=hover] .ds-radio.is-target .ds-radio-dot{border-color:var(--color-border-strong)}
.ds-radio-group[data-state=focus] .ds-radio.is-checked .ds-radio-dot{box-shadow:0 0 0 2px var(--surface-base),0 0 0 4px var(--color-focus)}
.ds-radio-group[data-state=disabled]{opacity:.45}
.ds-toggle{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--content-primary);cursor:default}
.ds-toggle[data-size=sm]{--tw:32px;--th:18px}.ds-toggle[data-size=md]{--tw:40px;--th:22px}.ds-toggle[data-size=lg]{--tw:52px;--th:28px}
.ds-toggle-track{position:relative;width:var(--tw,40px);height:var(--th,22px);border-radius:999px;background:var(--color-border-default);transition:background .25s ease,box-shadow .2s ease;flex:0 0 auto}
.ds-toggle-thumb{position:absolute;top:2px;left:2px;width:calc(var(--th,22px) - 4px);height:calc(var(--th,22px) - 4px);border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.22,1,.36,1)}
.ds-toggle[data-checked=on] .ds-toggle-track{background:var(--color-accent)}
.ds-toggle[data-checked=on] .ds-toggle-thumb{transform:translateX(calc(var(--tw,40px) - var(--th,22px)))}
.ds-toggle[data-state=hover] .ds-toggle-track{filter:brightness(.92)}
.ds-toggle[data-state=focus] .ds-toggle-track{box-shadow:0 0 0 2px var(--surface-base),0 0 0 4px var(--color-focus)}
.ds-toggle[data-state=disabled]{opacity:.45}
.ds-select{position:relative;display:grid;gap:6px;width:min(100%,340px);font-size:var(--fs,14px);color:var(--content-primary)}
.ds-select[data-size=sm]{--fs:13px;--h:32px;--px:10px}.ds-select[data-size=md]{--fs:14px;--h:40px;--px:12px}.ds-select[data-size=lg]{--fs:16px;--h:48px;--px:14px}
.ds-select-control{display:flex;align-items:center;gap:6px;min-height:var(--h,40px);padding:4px var(--px,12px);background:var(--surface-base);border:1px solid var(--color-border-default);border-radius:var(--radius-control);transition:border-color .2s ease,box-shadow .2s ease}
.ds-select-control>svg{width:16px;height:16px;margin-left:auto;color:var(--content-secondary);flex:0 0 auto;transition:transform .25s ease}
.ds-select-value{flex:1}
.ds-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:6px;background:var(--surface-subtle);font-size:12px;font-weight:500}
.ds-chip i{font-style:normal;color:var(--content-secondary)}
.ds-select[data-state=hover] .ds-select-control{border-color:var(--color-border-strong)}
.ds-select[data-state=focus] .ds-select-control,.ds-select[data-state=open] .ds-select-control{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--surface-base),0 0 0 4px var(--color-focus)}
.ds-select[data-state=open] .ds-select-control>svg{transform:rotate(180deg)}
.ds-select[data-state=error] .ds-select-control{border-color:var(--color-danger);background:var(--color-danger-soft)}
.ds-select[data-state=disabled]{opacity:.45}
.ds-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:2;padding:6px;background:var(--surface-base);border:1px solid var(--color-border-default);border-radius:10px;box-shadow:0 12px 34px rgba(25,28,20,.14)}
.ds-select[data-state=open]{margin-bottom:200px}
.ds-menu-search{padding:4px 4px 8px;border-bottom:1px solid var(--color-border-default);margin-bottom:4px}
.ds-menu-search input{width:100%;box-sizing:border-box;height:32px;padding:0 10px;border:1px solid var(--color-border-default);border-radius:6px;font:inherit;font-size:13px;background:var(--surface-subtle)}
.ds-option{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;font-size:13px}
.ds-option.is-hover{background:var(--surface-subtle)}
.ds-option.is-selected{color:var(--color-accent);font-weight:600}
.ds-check{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--color-border-default);flex:0 0 auto;position:relative}
.ds-option.is-selected .ds-check{background:var(--color-accent);border-color:var(--color-accent)}
.ds-option.is-selected .ds-check::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
@media(max-width:820px){.ds-radio-group[data-layout=horizontal]{grid-auto-flow:row}}
.dsp.dsp-final{margin:-92px 0 8px}
@media(max-width:820px){.dsp.dsp-final{margin:-40px 0 8px}}

/* ===== contact-form.css ===== */

body.home-active .site-footer {
margin-top: var(--card-gap);
padding-top: 0;
padding-bottom: var(--card-pad);
}
body.home-active .site-footer .ft4.ft4-form {
padding: var(--card-pad) var(--page-inset);
}
body.home-active .site-footer > .footer-bottom {
margin-top: var(--card-gap);
padding-top: 20px;
}
.site-footer .ft4.ft4-form {
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
align-items: start;
gap: clamp(36px, 5vw, 80px);
scroll-margin-top: 96px;
outline: none;
transition: border-color .35s ease, box-shadow .35s ease;
}
.site-footer .ft4.ft4-form:has(.ft5-form :focus-visible) {
border-color: rgba(255, 255, 255, .22);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 70px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 107, 74, .08);
}
.site-footer .ft4-form .ft4-lead { gap: 16px; }
.site-footer .ft4-form h2 {
font-size: clamp(34px, 3.6vw, 52px) !important;
line-height: 1.04 !important;
letter-spacing: -.04em;
max-width: 12ch;
}
.site-footer .ft4-form .ft4-sub {
margin: 4px 0 0;
max-width: 36ch;
}
.site-footer .ft5-links {
display: grid;
gap: 2px;
margin: clamp(18px, 2.4vw, 30px) 0 0;
padding: 0;
list-style: none;
}
.site-footer .ft5-links li {
display: flex;
align-items: center;
gap: 10px;
min-height: 46px;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.site-footer .ft5-links li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.site-footer .ft5-links small {
flex: 0 0 82px;
color: rgba(247, 246, 242, .5);
font-size: 11px;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
}
.site-footer .ft5-links a {
flex: 0 1 auto;
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
overflow: hidden;
color: #fff;
font-size: 15px;
font-weight: 600;
letter-spacing: -.01em;
text-overflow: ellipsis;
white-space: nowrap;
transition: color .2s ease;
}
.site-footer .ft5-links a:hover { color: #ff8a72; }
.site-footer .ft5-links a svg { width: 12px; height: 12px; flex: none; transition: translate .3s cubic-bezier(.22, 1, .36, 1); }
.site-footer .ft5-links a:hover svg { translate: 2px -2px; }
.site-footer .ft5-links .ft4-copy {
width: 34px;
height: 34px;
margin-left: auto;
border-radius: 10px;
}
.site-footer .ft5-links .ft4-copy svg { width: 15px; height: 15px; }
.site-footer .ft5-links .ft4-copy .copy-check { width: 15px; height: 15px; }
.site-footer .ft5-form {
position: relative;
display: grid;
gap: 4px;
}
.site-footer .ft5-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 4px 14px;
}
.site-footer .ft5-field {
position: relative;
display: grid;
align-content: start;
gap: 8px;
min-width: 0;
padding-bottom: 30px;
}
.site-footer .ft5-field label {
color: rgba(247, 246, 242, .62);
font-size: 11px;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
transition: color .2s ease;
}
.site-footer .ft5-field:focus-within label { color: #fff; }
.site-footer .ft5-field input,
.site-footer .ft5-field textarea {
width: 100%;
min-height: 54px;
padding: 14px 16px;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 16px;
background: rgba(255, 255, 255, .045);
color: #fff;
font: inherit;
font-size: 16px;
line-height: 1.45;
letter-spacing: -.005em;
outline: none;
appearance: none;
-webkit-appearance: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.site-footer .ft5-field textarea {
min-height: 176px;
resize: vertical;
}
.site-footer .ft5-field input::placeholder,
.site-footer .ft5-field textarea::placeholder { color: rgba(247, 246, 242, .34); }
.site-footer .ft5-field input:hover,
.site-footer .ft5-field textarea:hover {
border-color: rgba(255, 255, 255, .28);
background: rgba(255, 255, 255, .07);
}
.site-footer .ft5-field input:focus-visible,
.site-footer .ft5-field textarea:focus-visible {
border-color: rgba(255, 138, 114, .9);
background: rgba(255, 255, 255, .06);
box-shadow: 0 0 0 3px rgba(255, 107, 74, .18), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.site-footer .ft5-field.is-filled label::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-left: 8px;
border-radius: 50%;
background: var(--coral);
vertical-align: 1px;
}
.site-footer .ft5-field.is-invalid input,
.site-footer .ft5-field.is-invalid textarea {
border-color: rgba(255, 107, 74, .8);
background: rgba(255, 107, 74, .06);
}
.site-footer .ft5-error {
position: absolute;
left: 2px;
bottom: 6px;
color: #ff8a72;
font-size: 13px;
line-height: 18px;
font-weight: 500;
letter-spacing: -.005em;
white-space: nowrap;
opacity: 0;
transform: translateY(-3px);
transition: opacity .2s ease, transform .2s ease;
}
.site-footer .ft5-field.is-invalid .ft5-error { opacity: 1; transform: none; }
.site-footer .ft5-count {
position: absolute;
right: 4px;
bottom: 6px;
color: rgba(247, 246, 242, .42);
font-size: 12px;
line-height: 18px;
font-variant-numeric: tabular-nums;
}
.site-footer .ft5-count[hidden] { display: none; }
.site-footer .ft5-count.is-over { color: #ff8a72; }
.site-footer .ft5-field input:read-only,
.site-footer .ft5-field textarea:read-only { opacity: .7; }
.site-footer .ft5-honey {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.site-footer .ft5-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 18px;
margin-top: 2px;
}
.site-footer .ft5-submit {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 52px;
padding: 0 24px 0 26px;
border: 1px solid transparent;
border-radius: 999px;
background: #faf9f6;
color: #11140f;
font-size: 15px;
font-weight: 700;
letter-spacing: -.01em;
cursor: pointer;
transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, background .2s ease, color .2s ease, opacity .2s ease;
}
.site-footer .ft5-submit i {
display: inline-block;
font-style: normal;
transition: translate .3s cubic-bezier(.22, 1, .36, 1);
}
.site-footer .ft5-submit:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}
.site-footer .ft5-submit:hover i { translate: 2px -2px; }
.site-footer .ft5-submit:active { transform: translateY(0); }
.site-footer .ft5-submit:focus-visible {
outline: 2px solid var(--coral);
outline-offset: 3px;
}
.site-footer .ft5-submit[disabled] {
cursor: default;
transform: none;
box-shadow: none;
opacity: .8;
}
.site-footer .ft5-submit .ft5-spin {
display: none;
width: 14px;
height: 14px;
border: 2px solid rgba(17, 20, 15, .25);
border-top-color: #11140f;
border-radius: 50%;
animation: ft5-spin .8s linear infinite;
}
.site-footer .ft5-submit.is-loading .ft5-spin { display: inline-block; }
.site-footer .ft5-submit.is-loading i { display: none; }
@keyframes ft5-spin { to { rotate: 360deg; } }
.site-footer .ft5-status {
display: none;
color: #ff8a72;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
}
.site-footer .ft5-status.is-error { display: block; }
.site-footer .ft5-status a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .ft5-hint {
color: rgba(247, 246, 242, .42);
font-size: 13px;
}
.site-footer .ft5-done {
display: grid;
align-content: center;
justify-items: start;
gap: 12px;
min-height: 320px;
padding: clamp(22px, 3vw, 36px);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 20px;
background: rgba(255, 255, 255, .045);
opacity: 0;
transform: translateY(10px);
animation: ft5-in .55s cubic-bezier(.22, 1, .36, 1) .05s forwards;
}
.site-footer .ft5-done[hidden] { display: none; }
.site-footer .ft5-done:focus { outline: none; }
.site-footer .ft5-done-mark {
display: grid;
place-items: center;
width: 46px;
height: 46px;
margin-bottom: 6px;
border-radius: 14px;
background: var(--coral);
color: #fff;
}
.site-footer .ft5-done-mark svg { width: 22px; height: 22px; }
.site-footer .ft5-done-mark path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: ft5-check .6s cubic-bezier(.22, 1, .36, 1) .3s forwards; }
.site-footer .ft5-done b {
color: #fff;
font-size: clamp(22px, 2.2vw, 28px);
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.15;
}
.site-footer .ft5-done p {
margin: 0;
color: rgba(247, 246, 242, .62);
font-size: 15px;
line-height: 1.5;
}
.site-footer .ft5-done button {
margin-top: 8px;
padding: 0;
border: 0;
background: none;
color: #fff;
font-size: 14px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 4px;
cursor: pointer;
}
@keyframes ft5-in { to { opacity: 1; transform: none; } }
@keyframes ft5-check { to { stroke-dashoffset: 0; } }
@media (max-width: 1080px) {
.site-footer .ft4.ft4-form { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.site-footer .ft4-form h2 { max-width: 16ch; }
}
@media (max-width: 620px) {
.site-footer .ft5-row { grid-template-columns: minmax(0, 1fr); }
.site-footer .ft5-field input,
.site-footer .ft5-field textarea { font-size: 16px; }
.site-footer .ft5-field textarea { min-height: 160px; }
.site-footer .ft5-submit { width: 100%; }
.site-footer .ft5-links small { flex-basis: 72px; }
.site-footer .ft5-links a { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.site-footer .ft5-done { animation: none; opacity: 1; transform: none; }
.site-footer .ft5-done-mark path { animation: none; stroke-dashoffset: 0; }
.site-footer .ft5-submit, .site-footer .ft5-submit i, .site-footer .ft5-links a svg { transition: none; }
}