@font-face{font-family:Paperlogy;src:url(assets/paperlogy.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:Pretendard;src:url(assets/pretendard.woff) format("woff");font-weight:400;font-display:swap}
:root{--ink:#223431;--muted:#52615c;--coral:#ef624c;--accent:#c44835;--paper:#fff;--line:#deded5}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 Pretendard,system-ui,sans-serif;word-break:keep-all}
h1,h2,h3,strong{font-family:Paperlogy,Pretendard,sans-serif;font-weight:700}
h1,h2,h3,p,figure,dl,dd{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
img{display:block;max-width:100%}
.frame{width:min(1280px,calc(100% - 104px));margin-inline:auto}
.top{border-bottom:1px solid var(--line)}
.nav{height:83px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.brand img:first-child{width:35px}.brand img:last-child{width:105px}
nav{display:flex;gap:clamp(22px,3vw,50px);font-size:15px}
nav a:hover,.up:hover,.hero-bottom a:hover{color:var(--accent)}
.nav-cta{border:1px solid #bdbfb3;border-radius:40px;padding:9px 16px;font-size:14px;white-space:nowrap}
.nav-cta:hover{background:#edece5}.nav-cta span{margin-left:7px}
.menu{display:none}
.hero{display:grid;grid-template-columns:1.05fr 1fr;column-gap:clamp(24px,5vw,80px);padding-top:clamp(42px,5.5vw,88px);align-items:center}
.eyebrow{font:700 11px/1.4 Paperlogy,sans-serif;letter-spacing:.19em;display:flex;align-items:center;gap:9px}
.eyebrow i,.art-dot{width:8px;height:8px;background:var(--coral);border-radius:50%;flex:none}
h1{font-size:clamp(43px,5.4vw,88px);line-height:1.13;letter-spacing:-.07em;margin:25px 0 24px}
h1 em{font-style:normal;color:var(--accent)}
.lead{color:var(--muted);font-size:clamp(16px,1.35vw,20px);line-height:1.65}
.primary{display:inline-flex;align-items:center;gap:28px;background:var(--ink);color:white;padding:13px 19px 13px 22px;border-radius:40px;margin-top:30px;font-size:15px}
.primary:hover{background:#3c514b}
.primary span{color:#ffb3a2}
.hero-art{position:relative;aspect-ratio:1.08;overflow:hidden;isolation:isolate;background:#f5f6f2;border:1px solid #dbded3;display:grid;place-items:center}
.hero-art::before{content:"";position:absolute;inset:0;background:linear-gradient(#44584b0d 1px,transparent 1px),linear-gradient(90deg,#44584b0d 1px,transparent 1px);background-size:calc(100% / 12) calc(100% / 11);z-index:-2;mask-image:radial-gradient(ellipse,#000,transparent 93%)}
.orbit{position:absolute;border-radius:50%;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);z-index:-1}
.outer{width:73%;border:1px solid #aeb8aa}
.inner{width:57%;background:#fff;border:1px solid #cbd2c4;box-shadow:0 25px 65px #2a40341c}
.symbol{width:43%;filter:drop-shadow(0 13px 12px #32433821);transform:rotate(-5deg)}
.art-index,.art-base{position:absolute;display:flex;align-items:center;justify-content:space-between;gap:10px;left:6%;right:6%;font:700 clamp(8px,1vw,10px)/1.4 Paperlogy,sans-serif;letter-spacing:.15em}
.art-index{top:7%}.art-base{bottom:7%}.cross{position:absolute;font:22px/1 Pretendard;color:#66766a}.one{top:25%;right:15%}.two{bottom:24%;left:15%}
.hero-bottom{grid-column:1/-1;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;margin-top:43px;padding:17px 0;font-size:13px;color:var(--muted)}
.hero-bottom a span{margin-right:8px}
section,article{scroll-margin-top:24px}
.about{padding-block:105px;display:grid;grid-template-columns:1.1fr 1fr;gap:45px}
h2{font-size:clamp(34px,4.2vw,62px);letter-spacing:-.065em;line-height:1.17;margin-top:16px}
.about-content{align-self:end}.about-content>p{color:var(--muted);font-size:18px;max-width:410px}
.name{border-top:1px solid var(--line);margin-top:24px;padding-top:16px;display:flex;align-items:center;gap:24px}
.name div{display:grid;gap:2px}.name strong{font-size:25px;line-height:1.2}.name span{font-size:14px}.name b,.name div:last-child strong{color:var(--accent)}
.services{background:#fff;padding:95px 0}
.feature{--product:#244bb6;--surface:#edf0ff;--border:#cdd8fb;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);background:var(--surface);margin-bottom:18px;min-height:365px}
.feature:last-child{margin-bottom:0}
.feature-copy{padding:clamp(26px,4vw,60px);align-self:center}
.product{display:flex;align-items:center;gap:8px;color:var(--product);font:700 12px/1.4 Paperlogy,sans-serif;letter-spacing:.075em}.product img{width:28px;height:28px;object-fit:contain}
.feature h3{font-size:clamp(28px,3.15vw,48px);line-height:1.16;letter-spacing:-.06em;margin:14px 0}
.feature-copy>p:not(.product){color:#394940;max-width:430px}.feature small{display:block;color:var(--muted);margin-top:16px;line-height:1.5}
.feature-art{display:grid;place-content:center;min-width:0;padding:25px;background:repeating-linear-gradient(90deg,transparent 0 31px,#fff6 31px 32px);border-left:1px solid var(--border)}
.mock{width:min(330px,100%);background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px 22px;box-shadow:0 12px 32px #222d2b12}
.mock-top{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-bottom:9px;border-bottom:1px solid var(--border);color:var(--product);font-size:13px}.mock-top span{font-size:11px}
.mock-brand{display:inline-flex;align-items:center;gap:7px}.mock-brand img{width:25px;height:25px;object-fit:contain}
.flow{margin:10px 0 0;padding:0;list-style:none;counter-reset:flow}.flow li{counter-increment:flow;position:relative;padding:6px 0 6px 33px;line-height:1.4}.flow li::before{content:counter(flow);position:absolute;left:0;top:8px;border-radius:50%;display:grid;place-items:center;width:22px;height:22px;background:var(--surface);color:var(--product);font-size:11px}.flow b,.flow span,.compare b,.compare span,.operator span{display:block}.flow b,.compare b,.operator b{font-size:14px}.flow span,.compare span,.operator span{font-size:12px;color:var(--muted)}
.skincare img{width:223px;border-radius:12px;box-shadow:0 12px 32px #39255422}.skincare figcaption{text-align:center;font-size:11px;color:var(--muted);margin-top:8px}
.query{background:var(--surface);padding:8px;margin-top:13px;color:var(--product);font-size:13px}.query span{font-size:19px;line-height:1;margin-right:4px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:8px 0}.compare>div{border:1px solid var(--border);padding:8px}.operator{padding-top:6px}
.principles{background:var(--ink);color:#faf8ee;padding:95px 0}
.principle-list{margin-top:28px}.principle-list>div{padding:20px 0;border-top:1px solid #65746a;display:grid;grid-template-columns:1fr 1.3fr;gap:10px}.principle-list h3{font-size:22px}.principle-list p{color:#d3dcd4}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#65746a;padding:1px;list-style:none;margin:22px 0 0}.process li{background:var(--ink);padding:13px;color:#f2eae0;text-align:center;font-size:14px}
.people{padding-block:95px}.team{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:27px 0 0;padding:0;list-style:none}
footer{background:#f8f9f7}.foot{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:14px}.foot p,.up{font-size:12px}.foot p{letter-spacing:.11em}
@media(max-width:950px){.frame{width:calc(100% - 56px)}.nav-cta{display:none}.desktop{display:none}.about,.services,.principles,.people{padding-block:70px}}
@media(max-width:680px){.frame{width:calc(100% - 36px)}.nav{height:65px;position:relative}.menu{display:block;background:transparent;border:1px solid var(--line);padding:5px 13px;border-radius:30px}.nav nav{display:none;position:absolute;top:59px;right:0;background:var(--paper);padding:16px;border:1px solid var(--line);z-index:2;flex-direction:column;gap:12px;min-width:145px}.nav nav.open{display:flex}.hero{grid-template-columns:1fr;gap:24px;padding-top:34px}.hero h1{font-size:clamp(38px,10.7vw,62px);margin:15px 0}.primary{margin-top:19px}.hero-art{aspect-ratio:1.25}.hero-bottom{margin-top:0;padding:12px 0}.about,.services,.principles,.people{padding-block:52px}.about{grid-template-columns:1fr;gap:14px}.feature{grid-template-columns:1fr}.feature-art{border-left:0;border-top:1px solid var(--border)}.principle-list>div{grid-template-columns:1fr;gap:3px}.process{grid-template-columns:repeat(2,1fr)}.foot p{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.product-cta{display:inline-flex;align-items:center;gap:18px;margin-top:20px;padding:9px 15px;border-radius:40px;background:var(--product);color:#fff;font-size:14px}
.product-cta:hover{background:#193785}

/* Portfolio, service details, and company information */
.section-intro{font-size:clamp(16px,1.4vw,20px);color:var(--muted);max-width:660px;margin-top:15px}
.name small{font-size:10px;letter-spacing:.12em;color:var(--muted)}
.services{border-top:1px solid #e7eae5}
.portfolio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:33px 0 46px}
.portfolio a{display:grid;align-content:start;gap:9px;border:1px solid var(--border);background:var(--surface);padding:clamp(16px,2.4vw,31px);border-radius:14px;transition:transform .2s,box-shadow .2s}
.portfolio a:hover{transform:translateY(-3px);box-shadow:0 10px 26px #22343114}
.portfolio a>span:last-child{color:var(--muted);font-size:14px}
.portfolio strong{font-size:clamp(20px,2.2vw,33px);line-height:1.15;letter-spacing:-.045em}
.portfolio-brand{display:flex;align-items:center;gap:12px}.portfolio-brand img{width:42px;height:42px;flex:0 0 42px;object-fit:contain}.portfolio-brand strong{color:#1d2737}
.portfolio-type{display:flex;justify-content:space-between;gap:8px;color:var(--product);font-size:13px}
.blue{--product:#244bb6;--surface:#edf0ff;--border:#cdd8fb}
.violet{--product:#6236a3;--surface:#f3edfc;--border:#dfd2f3}
.green{--product:#226447;--surface:#edf6ee;--border:#cde2d1}
.feature{border-radius:18px;overflow:hidden;margin-bottom:24px}
.feature-art{background:radial-gradient(ellipse at center,#fff9,transparent 77%),repeating-linear-gradient(90deg,transparent 0 31px,#fff6 31px 32px)}
.skincare img{width:clamp(220px,24vw,315px)}
.mock-note{margin-top:8px;padding-top:7px;border-top:1px solid var(--border);font-size:11px;color:var(--product)}
.feature-details,.roadmap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;margin:0;list-style:none}
.feature-details{grid-column:1/-1;border-top:1px solid var(--border);background:#ffffffa8}
.feature-details li{padding:clamp(16px,2.6vw,32px)}
.feature-details li+li{border-left:1px solid var(--border)}
.feature-details span,.process span,.org-lead span{font:700 10px Paperlogy,sans-serif;letter-spacing:.14em;color:var(--product)}
.feature-details p,.process p,.roadmap p{font-size:15px;color:var(--muted);line-height:1.55}
h4{margin:0 0 5px;font:700 18px/1.3 Paperlogy,sans-serif;letter-spacing:-.035em}
.feature-details span+h4,.process span+h4{margin-top:8px}
.inputs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:17px}
.inputs div{border:1px solid var(--border);background:#fff8;border-radius:8px;padding:7px 11px}
.inputs dt{color:var(--product);font-weight:700;font-size:14px}
.inputs dd{font-size:13px;color:var(--muted)}
.principles{background:#f4f7f4;color:var(--ink)}
.principle-list>div{border-color:#d6e0d8}
.principle-list p{color:var(--muted)}
.engineering{margin-top:55px;padding-top:32px;border-top:1px solid #d6e0d8}
.engineering h3{font-size:clamp(26px,3.2vw,44px);letter-spacing:-.06em;margin:9px 0}
.engineering>p:not(.eyebrow){color:var(--muted)}
.process{background:#d6e0d8;border-radius:12px;overflow:hidden}
.process li{background:#fff;color:var(--ink);text-align:left;padding:clamp(13px,2vw,25px)}
.process span,.org-lead span{color:var(--accent)}
.organization{display:grid;grid-template-columns:1fr 2.6fr;gap:13px;margin-top:28px}
.org-lead,.org-groups>div{border-radius:12px;padding:clamp(14px,2.2vw,26px)}
.org-lead{background:var(--ink);color:#fff}
.org-lead span{color:#ffb3a2}
.org-lead h3{margin-top:8px;font-size:25px}
.org-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.org-groups>div{border:1px solid var(--line);background:#fafbf9}
.org-groups h3{font-size:17px}
.org-groups ul{margin:8px 0 0;padding:0;list-style:none;color:var(--muted)}
.growth{background:#f9f7f4;padding:85px 0}
.roadmap{margin-top:32px;gap:18px;counter-reset:roadmap}
.roadmap li{padding:15px 0;border-top:1px solid #d6d5cc;counter-increment:roadmap}
.roadmap li::before{content:"0" counter(roadmap);font:700 15px Paperlogy,sans-serif;color:var(--accent)}
.roadmap h3{font-size:clamp(17px,2vw,24px);margin:7px 0 4px}
@media(max-width:820px){.portfolio{gap:7px}.organization{grid-template-columns:1fr}.growth{padding-block:65px}}
@media(max-width:680px){.portfolio,.feature-details,.roadmap{grid-template-columns:1fr}.portfolio{margin:22px 0 27px}.feature-details li+li{border-left:0;border-top:1px solid var(--border)}.process{grid-template-columns:repeat(2,minmax(0,1fr))}.org-groups{gap:5px}.org-groups>div{padding:9px}.org-groups ul{font-size:14px}.growth{padding-block:48px}}
@media(prefers-reduced-motion:reduce){.portfolio a{transition:none}}