/* Motion is scoped to the first section; the hero and following sections keep their layout. */
#about{position:relative;overflow:hidden}
#about .section-kicker{position:relative;padding-bottom:18px}
#about .section-kicker::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
#about .section-kicker.visible::after{transform:scaleX(1)}
#about .statement{--reading-progress:0;position:relative}
#about .statement-word{display:inline-block;color:color-mix(in srgb,var(--ink) calc(var(--word-progress,1)*100%),#c6c7bc);transition:color .12s linear;will-change:color}
#about .statement>span .statement-word{color:color-mix(in srgb,var(--ink) calc(var(--word-progress,1)*100%),#c6c7bc)}
#about .statement em .statement-word{color:color-mix(in srgb,var(--accent-text) calc(var(--word-progress,1)*100%),#c6c7bc)}
#about .about-description{transition-delay:.08s}
#about .about-signature{transition-delay:.2s}
#about .services{position:relative}
#about .service{position:relative;overflow:hidden;border-top:0;border-bottom:0;border-radius:0;isolation:isolate}
#about .service::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line);z-index:2;transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
#about .service.visible::before{transform:scaleX(1)}
#about .service:last-child{border-bottom:1px solid var(--line)}
#about .service::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);opacity:0;transform:scaleY(.93);transform-origin:top;transition:opacity .35s,transform .55s cubic-bezier(.2,.7,.2,1)}
#about .service[open]::after{opacity:1;transform:scaleY(1)}
#about .service summary{position:relative;padding:31px 22px;gap:22px;transition:padding .5s,color .35s}
#about .service[open] summary{color:var(--paper)}
#about .service-num{width:35px;transition:color .35s}
#about .service[open] .service-num{color:var(--orange)}
#about .service h3{line-height:1.14;position:relative;overflow:hidden;transition:color .3s;letter-spacing:-.05em}
#about .service-title,#about .service-title-echo{display:block;transition:transform .6s cubic-bezier(.22,.7,.2,1)}
#about .service-title-echo{position:absolute;left:0;top:100%;color:var(--orange)}
#about .service summary:hover .service-title,#about .service summary:hover .service-title-echo,#about .service summary:focus-visible .service-title,#about .service summary:focus-visible .service-title-echo{transform:translateY(-100%)}
#about .service summary:hover h3{color:var(--ink)}
#about .service[open] summary:hover h3{color:var(--paper)}
#about .service-tags{transition:color .35s,transform .5s}
#about .service[open] .service-tags{color:#aeb1a2}
#about .service-symbol{display:grid;place-items:center;width:35px;height:35px;border:1px solid var(--line);border-radius:50%;font-size:24px;font-weight:400;margin-left:20px;transition:transform .45s,background .35s,color .35s,border-color .35s}
#about .service[open] .service-symbol{background:var(--orange);border-color:var(--orange);color:var(--ink);transform:rotate(45deg)}
#about .service summary:hover .service-symbol{color:var(--ink);background:var(--orange);border-color:var(--orange)}
#about .service-body{padding:0 65px 38px 79px;min-height:175px;gap:45px;align-items:center}
#about .service-body>p{max-width:430px;line-height:1.6;color:#bec1b3;animation:approach-copy-in .55s both}
#about .service-body>[aria-hidden]{flex-shrink:0;transform:perspective(600px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) rotate(-4deg);transition:transform .35s ease;animation:approach-visual-in .6s cubic-bezier(.2,.7,.2,1) both}
#about .mini-layout{width:240px;height:140px;margin-right:0;background:var(--orange);color:var(--ink);padding:20px;border-radius:5px;box-shadow:0 10px 30px #0003;gap:6px}
#about .mini-layout i{background:var(--ink);transition:transform .6s cubic-bezier(.2,.7,.2,1),border-radius .5s}
#about .mini-layout i:nth-child(2){background:#67742b}
#about .mini-layout i:nth-child(3){background:#e4edb3}
#about .service:hover .mini-layout i:nth-child(1){transform:translateY(-5px);border-radius:20px 20px 0 0}
#about .service:hover .mini-layout i:nth-child(2){transform:translateY(5px);border-radius:0 0 20px 20px}
#about .service:hover .mini-layout i:nth-child(3){border-radius:50%}
#about .mini-layout span{font-size:13px;font-weight:550}
#about .mini-code{width:240px;padding:18px 22px;border:1px solid #55594b;border-radius:6px;color:#b4baa4;background:#2c2f25;font-size:16px;box-shadow:0 10px 30px #0002;line-height:1.7}
#about .mini-code span{display:inline-block;color:var(--orange);animation:approach-code-in 1s cubic-bezier(.2,.7,.2,1) both}
#about .mini-motion{width:240px;height:140px;border:1px solid #55594b;border-radius:6px;justify-content:center;gap:22px;background:#2c2f25}
#about .mini-motion span{color:var(--orange);font-size:85px;animation:approach-spin 15s linear infinite}
#about .mini-motion i{color:var(--paper);font-size:12px}
#about .service[open] summary:focus-visible{outline-color:var(--orange);outline-offset:-5px}
@keyframes approach-copy-in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes approach-visual-in{from{opacity:0;translate:0 20px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes approach-code-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes approach-spin{to{transform:rotate(360deg)}}
@media(max-width:1050px){#about .service summary{padding:26px 18px;gap:16px}#about .service-symbol{margin-left:5px}#about .service-body{padding:0 38px 32px 69px;gap:35px}#about .service-body>p{font-size:14px;max-width:340px}#about .mini-layout,#about .mini-code,#about .mini-motion{width:200px}#about .service-tags{font-size:9px}}
@media(max-width:700px){#about .service summary{padding:24px 15px;gap:10px}#about .service-num{width:20px}#about .service-symbol{width:27px;height:27px;font-size:20px;margin-left:0}#about .service h3{font-size:26px}#about .service-tags{padding-left:30px;font-size:9px}#about .service-body{padding:0 25px 28px 45px;min-height:0;flex-direction:column;align-items:flex-start;gap:25px}#about .service-body>p{font-size:13px;max-width:280px}#about .service-body>[aria-hidden]{align-self:flex-end}#about .mini-layout{width:180px;height:110px;padding:15px}#about .mini-layout span{font-size:11px}#about .mini-code{width:180px;font-size:13px}#about .mini-motion{width:180px;height:110px}#about .mini-motion span{font-size:65px}#about .mini-motion i{display:block;font-size:10px}#about .section-kicker{padding-bottom:16px}}
@media(prefers-reduced-motion:reduce){#about .statement-word{color:var(--ink)!important}#about .statement em .statement-word{color:var(--accent-text)!important}#about .service-body>[aria-hidden]{transform:none;animation:none}#about .service-title,#about .service-title-echo{transition:none}#about .service::before,#about .section-kicker::after{transform:none}}