*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--canvas:#FFFFFF;--ink:#000000;--red:#E8302A;--blue:#1A50B0;--yellow:#F0C808;--steel:#666666;--grid:#E0E0E0;--block:#1A1A1A}
html{scroll-behavior:smooth}
body{background:var(--canvas);color:var(--ink);font-family:'Jost',sans-serif;font-weight:400;font-size:1rem;line-height:1.75;overflow-x:hidden}

/* Entry */
.entry{min-height:100vh;padding:8vw;display:flex;flex-direction:column;justify-content:center;position:relative}
.circle-accent{position:absolute;top:10%;right:8%;width:160px;height:160px;border-radius:50%;background:var(--red);opacity:0.12}
.hero{font-weight:700;font-size:clamp(3rem,8vw,7rem);letter-spacing:-0.03em;text-transform:uppercase}
.hero-line{width:100%;height:1px;background:var(--ink);margin:1.5rem 0}
.subtitle{font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-size:0.8125rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--steel)}

/* Grid sections */
.grid-section{padding:4rem 8vw;display:grid;gap:24px}
.left-heavy{grid-template-columns:2fr 1fr}
.right-heavy{grid-template-columns:1fr 3fr}
@media(max-width:768px){.left-heavy,.right-heavy{grid-template-columns:1fr}}

.section-block{padding:2rem 0}
.icon-row{display:flex;align-items:center;gap:1rem;margin-bottom:0.75rem}
.icon{width:32px;height:32px}
.icon-row h2{font-weight:700;font-size:clamp(1.2rem,2.5vw,1.8rem);letter-spacing:-0.02em;text-transform:uppercase}
.summary{color:var(--steel);font-size:0.9rem;margin-bottom:0.5rem}
.detail{max-height:0;overflow:hidden;transition:max-height 0.6s cubic-bezier(0.4,0,0.2,1)}
.detail.open{max-height:500px}
.detail p{padding-top:1rem;color:var(--ink);line-height:1.75}

/* Workshop */
.workshop{padding:4rem 8vw;background:var(--block);color:var(--canvas)}
.icon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
@media(max-width:600px){.icon-grid{grid-template-columns:repeat(2,1fr)}}
.icon-cell{display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:1.5rem;cursor:pointer;transition:transform 0.3s ease}
.icon-cell:hover{transform:scale(1.05)}
.icon-cell svg{width:48px;height:48px}
.icon-cell span{font-family:'IBM Plex Sans',sans-serif;font-size:0.8125rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--grid)}

/* Output */
.output{padding:6rem 8vw;text-align:center}
.statement{font-weight:700;font-size:clamp(1.5rem,3vw,2.5rem);max-width:600px;margin:0 auto 3rem}
.three-shapes{display:flex;justify-content:center;gap:48px;margin-bottom:3rem}
.three-shapes svg{width:48px;height:48px}
.final-line{width:100%;height:1px;background:var(--ink)}

@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
}