@import url("./assets/repository-tokens.css");
/* Source: design-system/tokens.css, generated from Intelligaia Web DS. */
:root{--brand-yellow:#ffc800;--brand-blue:#4a8bf5;--brand-purple:#8a5af0;--brand-blue-ink:#1a5fcc;--brand-purple-ink:#7546dc;--brand-blue-soft:#dce8fd;--brand-purple-soft:#e7dcfd;--brand-focus:var(--brand-purple)}
h1,h2,h3{word-spacing:normal}a:focus-visible,button:focus-visible,input:focus-visible{outline-color:var(--brand-focus)}
.process-tabs button[aria-current=true]{color:var(--brand-purple-ink);border-color:var(--brand-purple)}
.diagnostic-path b,.engagement-map span{background:var(--brand-yellow)}
.beats button.active .step-dot{background:var(--brand-blue)}
.engagement-map i{background:var(--brand-blue-soft);border-color:var(--brand-blue)}
.team-map i{background:var(--brand-purple-soft);border-color:var(--brand-purple)}
.team-map span{background:var(--brand-purple-soft)}
.portfolio h2 em{color:var(--brand-blue-ink)}
.process-arrow,.workflow-heading{color:var(--brand-purple-ink)}
.action:hover,.agent-link:hover{border-color:var(--brand-purple)}
/* Shorter holds retain reading time without requiring excessive wheel travel. */
.chapter{height:180vh}.chapter#hero{height:220vh}.chapter#wall{height:360vh}.chapter#ladder{height:290vh}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Hero: the current light-theme Figma roles, with a yellow accent mode. */
:root{--color-canvas:#fafaf6;--color-ink:#04050a;--accent-fill:var(--brand-yellow);--accent-ink:var(--color-ink)}
body[data-chapter="0"] .reading-shade{background:linear-gradient(90deg,var(--color-canvas) 0%,var(--color-canvas) 55%,color-mix(in srgb,var(--color-canvas) 90%,transparent) 100%)}
#hero .copy{width:100%;max-width:none;align-items:flex-start;justify-content:center;padding:110px 7vw 135px}
#hero h1{max-width:84vw;color:var(--color-ink);font-size:clamp(74px,8.7vw,260px);line-height:1.1;letter-spacing:-.018em;margin:0}
#hero .hero-context{display:block;font:300 clamp(32px,3.05vw,92px)/1.2 Oswald,sans-serif;letter-spacing:0;margin-bottom:22px;color:var(--color-ink)}
#hero .hero-verdict{display:block}
#hero h1 em{color:var(--accent-ink);background:linear-gradient(transparent 70%,var(--accent-fill) 70%,var(--accent-fill) 94%,transparent 94%);text-decoration:none;padding-inline:.02em}
#hero .pad-note{display:none}
#hero .typing-line{color:var(--color-ink);line-height:1.16}
#hero .typing-line>span+span{margin-top:.16em}
body[data-chapter="0"] header .agent{background:var(--accent-fill);color:var(--accent-ink);border-color:var(--accent-fill)}
@media(max-width:760px){#hero .copy{padding:105px 25px 125px}#hero h1{font-size:12.4vw;max-width:100%;line-height:1.15}#hero .hero-context{font-size:6.5vw;line-height:1.25;margin-bottom:18px}#hero .hero-second{padding:100px 25px 135px}}

/* Core palette: ink + yellow, blue as the single supporting interface accent. */
.craft-number{color:var(--color-ink)}
#who h2 em{color:var(--color-ink);text-decoration-color:var(--brand-yellow)}
.process-tabs button[aria-current=true],.process-arrow,.workflow-heading{color:var(--brand-blue-ink);border-color:var(--brand-blue)}
.team-map i,.team-map span{background:var(--brand-blue-soft);border-color:var(--brand-blue)}
#wall .copy,#proof .copy,#who .copy{transition:none}
.word{transform:none}

/* V6 repository brand update, 2026-09-15. Source recorded in BRAND-SOURCES.md. */
:root{--brand-yellow:var(--ig-yellow);--yellow:var(--ig-yellow);--brand-blue:var(--ig-blue);--brand-purple:var(--ig-purple);--brand-focus:var(--ig-ink);--color-ink:var(--ig-ink);--ink:var(--ig-ink);--accent-fill:var(--ig-yellow);--g:linear-gradient(var(--ig-blue),var(--ig-blue))}
h1,h2,h3,.craft-number{color:var(--ig-ink)}
.metrics strong{color:var(--ig-ink);background:none;-webkit-text-fill-color:var(--ig-ink);-webkit-text-stroke:0;filter:none;font-weight:500}
.metrics article{border-top:3px solid var(--ig-blue)}
.agent,.agent-link{border-color:var(--ig-blue);box-shadow:none}
.agent:hover,.pill:hover,.action:hover{background:var(--ig-yellow);color:var(--ig-ink);border-color:var(--ig-ink)}
.action,.pill{border-radius:var(--ig-radius-pill);font-family:var(--ig-font-body)}
#who .craft-number{opacity:1;color:var(--ig-ink)}
@media(prefers-reduced-motion:reduce){.word{filter:none!important;opacity:1!important}.typed-word span{opacity:1!important}.metrics strong{animation:none}}

.workflow-heading,.wall-card>small,.process-arrow,.beats button,.beats button strong{color:var(--ig-ink)}
.beats button.active{background:color-mix(in srgb,var(--ig-blue) 12%,white);color:var(--ig-ink)}
.diagnostic-path::before,.diagnostic-path::after{background:var(--ig-blue)}
.beats .step-dot{border-color:var(--ig-blue);color:var(--ig-ink)}

/* Original repository numeral artwork: 2 + 7, unmodified SVGs. */
#who .craft-number{display:flex;align-items:center;width:40vw;max-width:1100px;left:4vw;top:50%;transform:translateY(-50%);font-size:0;letter-spacing:0}
#who .craft-number img{display:block;width:60%;height:auto;flex:none;object-fit:contain}
#who .craft-number img+img{margin-left:-20%}
@media(max-width:760px){#who .craft-number{position:relative;left:auto;right:auto;top:auto;transform:none;width:190px;max-width:70vw;margin:0 auto 20px;align-self:center}#who .copy{padding-top:90px}#who h2{font-size:42px}}

/* Golden rules: whole-word reveal and foreground-dependent atmosphere. */
.gold-word{display:inline-block;transform:none;will-change:opacity,filter}
html:not(.reveal-ready) h1{visibility:hidden}
#wall-label{color:var(--ig-ink)!important;font-family:Geist,sans-serif}
#wall .wall-art{width:min(88vw,2500px);max-width:none;background:transparent;box-shadow:none;border:0;padding:26px 0 0;margin-top:32px;opacity:var(--diagram,0);transition:opacity .24s}
#wall .beats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,100px);margin-top:12px}
#wall .beats button{position:relative;display:flex;height:auto;min-height:0;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:14px;padding:16px 8px 28px;background:none!important;border:0;border-radius:0;color:var(--ig-ink)}
#wall .process-glyph{display:block;width:clamp(100px,10vw,270px);height:clamp(100px,10vw,270px);object-fit:contain;transform:translateY(8px);transition:transform .4s}
#wall .beats button.active .process-glyph{transform:translateY(-10px)}
#wall .beats button::after{content:'';position:absolute;bottom:0;left:20%;width:60%;height:5px;background:transparent}
#wall .beats button.active::after{background:var(--ig-yellow)}
#wall .beats strong{font-size:clamp(18px,1.7vw,46px);font-weight:400}
#wall .beats small{font-size:clamp(14px,1.05vw,28px);color:var(--ig-ink);margin-top:7px}
.workflow-track{height:3px;background:color-mix(in srgb,var(--ig-ink) 15%,transparent);margin:20px 5% 0}
.workflow-track i{display:block;width:100%;height:100%;background:var(--ig-blue);transform-origin:left;transform:scaleX(var(--workflow-progress,0));transition:transform .16s linear}
.reading-shade{transition:opacity .18s linear}
#wash{transition:background .24s linear}
@media(max-width:760px){#wall .wall-art{width:100%;margin-top:22px}#wall .beats{grid-template-columns:1fr 1fr;gap:12px}#wall .process-glyph{width:76px;height:76px}#wall .beats button{gap:5px;padding:5px 0 12px}#wall .beats strong{font-size:16px}#wall .beats small{font-size:12px}#wall .workflow-heading{font-size:14px}#wall .wall-card h3{font-size:36px}}
@media(prefers-reduced-motion:reduce){.gold-word{opacity:1!important;filter:none!important}.process-glyph{transform:none!important}}

#wall .wall-art{opacity:calc(var(--diagram,0)*var(--wall-ready,0))}
.chapter .rungs,.chapter .portfolio-grid,.chapter .metrics,.chapter .engagement{opacity:var(--copy-ready,0);transition:opacity .4s}
@media(prefers-reduced-motion:reduce){#wall .wall-art,.chapter .rungs,.chapter .portfolio-grid,.chapter .metrics,.chapter .engagement{opacity:1}}

#wall .beats button.active strong{color:var(--ig-blue);font-weight:500}
#wall .workflow-track{display:block;opacity:1;transform:none;min-height:3px;flex-shrink:0}
#wall .workflow-track i{opacity:1}

/* V6 revision: shared chrome, staged hero and persistent workflows. */
header nav,.site-header nav{gap:clamp(24px,2.4vw,64px)!important}
header .agent,header .agent-link,body[data-chapter="0"] header .agent{background:var(--ig-yellow)!important;color:var(--ig-ink)!important;border:1px solid var(--ig-yellow)!important;border-radius:var(--ig-radius-pill);font-family:var(--ig-font-body);box-shadow:none}
header .agent:hover,header .agent-link:hover{background:var(--ig-ink)!important;color:var(--ig-yellow)!important;border-color:var(--ig-ink)!important}
#hero .hero-context{font-size:clamp(54px,6.8vw,204px);transform:translateY(80px);transition:font-size .6s ease,transform .6s ease;margin-bottom:32px}
#hero.context-settled .hero-context{font-size:clamp(30px,2.6vw,78px);transform:translateY(0)}
#hero .hero-verdict{opacity:0}#hero.context-settled .hero-verdict{opacity:1}
#hero h1 em{position:relative;background:none;isolation:isolate}
#hero h1 em::after{content:'';position:absolute;left:0;right:0;bottom:.015em;height:.14em;background:linear-gradient(to bottom,var(--ig-blue) 0 28%,transparent 28% 40%,var(--ig-yellow) 40%);z-index:-1;clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.2,.8,.2,1)}
#hero.verdict-settled h1 em::after{clip-path:inset(0)}
#wall .wall-art{width:min(84vw,2200px);padding:clamp(20px,2.1vw,56px);margin:32px auto 0;background:rgba(255,255,255,.78);backdrop-filter:blur(16px);border:1px solid rgba(4,5,10,.12);border-radius:var(--ig-radius-md);box-shadow:0 20px 60px rgba(4,5,10,.05);opacity:var(--wall-ready,0)}
#wall .workflow-heading{color:var(--ig-ink)}
#wall .beats{gap:clamp(18px,2vw,54px);margin-top:16px}
#wall .beats button{height:auto;min-height:0;padding:0 8px 20px;gap:4px}
.workflow-illustration{width:clamp(120px,13vw,330px);height:auto;overflow:visible;color:var(--ig-ink)}
.workflow-illustration g,.workflow-illustration .bridge,.workflow-illustration .check,.workflow-illustration .signal{transition:transform .6s ease,opacity .6s ease;transform-box:fill-box;transform-origin:center}
.beats button .lens{transform:translateX(-12px)}.beats button.active .lens{transform:translateX(10px)}
.beats button .bridge{transform:translateY(-18px);opacity:.4}.beats button.active .bridge,.beats button.complete .bridge{transform:translateY(0);opacity:1}
.beats button .check{stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset .8s}.beats button.active .check{stroke-dashoffset:0}
.beats button .signal{opacity:.3}.beats button.active .signal{opacity:1;transform:translateY(-5px)}
#wall .beats strong{font-size:clamp(17px,1.45vw,38px)}#wall .beats small{font-size:clamp(13px,.9vw,24px)}
#ladder .process-tabs{position:relative;gap:24px;border:0;padding-bottom:20px}
#ladder .process-tabs::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(to right,var(--ig-blue),var(--ig-yellow));transform:scaleX(var(--process-progress,0));transform-origin:left}
#ladder .process-tabs button{border:0;border-bottom:1px solid rgba(4,5,10,.15);border-radius:0;background:transparent;color:var(--ig-ink);padding:18px 24px}
#ladder .process-tabs button[aria-current=true]{border-color:var(--ig-yellow);background:rgba(255,200,0,.14);color:var(--ig-ink)}
#ladder .process-visual{border:1px solid rgba(4,5,10,.12);border-radius:var(--ig-radius-md);background:rgba(255,255,255,.82);backdrop-filter:blur(16px);overflow:hidden}
#ladder .process-picture{transform:translateY(calc((1 - var(--process-progress,0))*8px))}
@media(max-width:1000px){header nav,.site-header nav{gap:20px!important}}
@media(max-width:760px){#hero .hero-context{font-size:11vw;transform:translateY(60px)}#hero.context-settled .hero-context{font-size:6.5vw}#wall .wall-art{width:100%;padding:16px;margin-top:20px}#wall .workflow-illustration{width:100px}#wall .beats{gap:12px}#wall .beats button{padding:0 0 12px}#wall .beats strong{font-size:15px}#wall .beats small{font-size:11px}#ladder .process-tabs{gap:8px}#ladder .process-tabs button{padding:12px 8px}}
@media(prefers-reduced-motion:reduce){#hero .hero-context{transform:none;transition:none}#hero .hero-verdict{opacity:1}#hero h1 em::after{clip-path:inset(0);transition:none}.workflow-illustration *{transition:none!important}.beats button .check{stroke-dashoffset:0}}
#wall .workflow-track{width:90%;align-self:center}
#ladder .process-arrow{color:var(--ig-blue)}
/* Case-cover card anatomy: one source hero, text lane and reserved action lane. */
#work .portfolio-grid .project{flex-basis:56%;flex-shrink:0;min-width:0;border-radius:var(--ig-radius-md);background:#fff;overflow:hidden}
#work .project-image{height:auto;aspect-ratio:16/10;padding:0;background:#fff;display:flex;align-items:center;justify-content:center}
#work .project-image img{width:100%;height:100%;object-fit:contain;object-position:center;transform:none}
#work .project-caption{position:relative;min-height:150px;padding:26px 110px 28px 28px}
#work .project-caption h3{font-size:clamp(28px,2.2vw,58px);color:var(--ig-ink)}
#work .project-caption>span:not(.sr-only){max-width:none;font:400 clamp(15px,1vw,26px)/1.5 var(--ig-font-body);min-height:3em}
#work .project-caption .case-arrow{position:absolute;right:28px;top:50%;margin:0;transform:translateY(-50%);display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--ig-yellow);color:var(--ig-ink);font:400 36px var(--ig-font-body);transition:transform .24s,box-shadow .24s}
.chapter .copy{transition:opacity .22s linear}.hero-second{will-change:opacity,transform}
#work .portfolio-grid{scroll-snap-type:none!important;scroll-behavior:auto!important}
@media(hover:hover) and (pointer:fine){#work .project:hover .case-arrow{transform:translate(3px,calc(-50% - 3px));box-shadow:0 8px 25px #ffc80060}#work .project:hover .project-image img{transform:none}}
@media(min-width:2400px){#work .project-caption{padding-right:150px;min-height:210px}#work .project-caption .case-arrow{width:90px;height:90px;font-size:54px;right:32px}}
@media(max-width:760px){#work .portfolio-grid .project{flex-basis:80%}#work .project-caption{padding:18px 70px 20px 18px;min-height:135px}#work .project-caption h3{font-size:28px}#work .project-caption>span:not(.sr-only){font-size:14px}#work .project-caption .case-arrow{right:14px;width:42px;height:42px;font-size:28px}}
@media(prefers-reduced-motion:reduce){.chapter .copy,#work .case-arrow{transition:none!important}}
#work .project-image{aspect-ratio:2200/1268}

/* One meaningful hero keyword; the same blue/yellow line used under “decides”. */
:is(#opening,.about-opening) h1 .hero-keyword{position:relative;display:inline-block;isolation:isolate;font-style:normal;text-decoration:none;background:none;white-space:nowrap}
:is(#opening,.about-opening) h1 .hero-keyword::after{content:'';position:absolute;left:0;right:0;bottom:-.05em;height:.14em;background:linear-gradient(to bottom,var(--ig-blue,#3782F0) 0 28%,transparent 28% 40%,var(--ig-yellow,#FFC800) 40%);z-index:-1;clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.2,.8,.2,1)}
:is(#opening,.about-opening) h1 .hero-keyword.is-underlined::after{clip-path:inset(0)}
@media(prefers-reduced-motion:reduce){:is(#opening,.about-opening) h1 .hero-keyword::after{clip-path:inset(0);transition:none}}

/* Cover frames inherit the selected artwork's original proportions. */
#work .project-image{height:auto;min-height:0;max-height:none;aspect-ratio:var(--cover-ratio);padding:0;flex-shrink:0}
#work .project-image img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}

/* Uniform selected-work media windows and readable proof/mobile actions. */
#work .project-image{aspect-ratio:1713/1149;overflow:hidden}
#work .project-image img{width:100%;height:100%;object-fit:cover;object-position:center}
#work .project-caption{flex:1}
#proof .copy>p:not(.fine){font-family:Geist,Arial,sans-serif;font-weight:400;color:var(--color-ink,#121212);font-size:clamp(18px,1.22vw,30px)}
#proof .metrics strong{color:#121212;-webkit-text-fill-color:#121212;opacity:1;font-size:clamp(50px,4.6vw,126px)}
#cue{touch-action:manipulation}
@media(max-width:760px){
 #proof .metrics strong{font-size:clamp(36px,10vw,46px)}
 #start .exit-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
 #start.close .exit-links>*{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:8px 6px!important;font-size:clamp(10px,2.7vw,13px)!important;gap:5px;white-space:nowrap}
 #start .exit-links .ai-prompt-icon{width:14px;height:14px}
}