/* ================================================================
   CODEVELLA® — Style system
   THEME: edit --teal to change the main brand green (#00846a).
   Fonts load from Google Fonts; system fallbacks work offline.
   ================================================================ */
:root{--teal:#00846a;--teal-dark:#006e58;--ink:#202925;--cream:#f7f7ef;--paper:#fffefa;--lime:#e6efb1;--pink:#f1c1c9;--orange:#ffc58c;--line:rgba(28,48,41,.18);--ease:cubic-bezier(.22,1,.36,1);--font-en:'DM Sans','Arial Narrow',Arial,sans-serif;--font-ko:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{overflow-x:clip;margin:0;background:var(--cream);color:var(--ink);font-family:var(--font-ko);font-size:15px;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}::selection{background:var(--lime);color:var(--teal-dark)}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button,select,input,textarea{outline-offset:3px}img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
button{border:0}
svg{display:block}
section{position:relative} 
.wrap{width:min(100% - 112px,1520px);margin-inline:auto}
.section-pad{padding-block:150px}
.skip-link{position:fixed;top:-80px;left:16px;z-index:999;background:white;padding:12px}
.skip-link:focus{top:12px}
.page-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;pointer-events:none}
.page-progress span{display:block;width:100%;height:100%;background:#f3ae77;transform:scaleX(0);transform-origin:left}

/* NAV */
.site-header{height:88px;position:absolute;top:0;left:0;width:100%;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:0 4.1%;border-bottom:1px solid rgba(0,132,106,.2);transition:background .35s,border .35s;gap:20px}
.site-header.scrolled{position:fixed;background:rgba(247,247,239,.96);backdrop-filter:blur(20px);border-color:var(--line);height:76px}
.brand{display:flex;align-items:center;gap:12px;white-space:nowrap}
.brand-sign{position:relative;font:900 36px/.8 var(--font-en);color:var(--teal);letter-spacing:-.15em}
.brand-spark{font:700 11px var(--font-en);position:absolute;right:-11px;top:-9px;color:var(--teal)}
.brand-name{font:900 19px var(--font-en);color:var(--teal);letter-spacing:-.085em}
.brand-reg{font-size:9px;vertical-align:top;margin-left:2px;letter-spacing:0}
.desktop-nav{display:flex;align-items:center;gap:39px;margin-left:auto;margin-right:24px}
.desktop-nav a,.header-tools{font:800 11px var(--font-en);letter-spacing:.035em}
.desktop-nav a{position:relative;padding-block:14px}
.desktop-nav a::after{position:absolute;content:"";height:1px;width:0;left:0;bottom:8px;background:var(--teal);transition:width .3s}
.desktop-nav a:hover::after{width:100%}
.desktop-nav a span{color:var(--teal)}
.header-tools{display:flex;align-items:center;gap:23px}
.availability{white-space:nowrap;color:#65746b;font-size:9px}
.availability i{display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#71bb74;box-shadow:0 0 0 4px #71bb7420;vertical-align:middle}
.header-contact{display:flex;align-items:center;gap:17px;background:var(--teal);border-radius:32px;color:white;padding:15px 18px 15px 22px;white-space:nowrap;transition:background .25s,transform .25s}
.header-contact:hover{background:var(--ink);transform:translateY(-2px)}
.header-contact span{font-size:16px;line-height:0}
.menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--teal);border-radius:50%;background:transparent;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-toggle span{width:18px;height:2px;background:var(--teal);transition:transform .2s}
.menu-toggle.is-open span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-toggle.is-open span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:70;background:var(--cream);padding:130px 7vw 45px;transform:translateY(-110%);transition:transform .65s var(--ease);display:flex;flex-direction:column;justify-content:space-between}
.mobile-menu.is-open{transform:translateY(0)}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu nav a{font:900 clamp(46px,11vw,95px)/1.17 var(--font-en);border-bottom:1px solid var(--line);letter-spacing:-.07em;padding:12px 0;color:var(--teal)}
.mobile-menu nav a span{font:700 12px var(--font-en);letter-spacing:0;vertical-align:top;margin-right:16px}
.mobile-menu p{font:700 11px var(--font-en);letter-spacing:.12em}

/* FLOATING CONTACT DOCK */
.quick-dock{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:65;display:flex;flex-direction:column;align-items:center;gap:8px}
.dock-main,.dock-mini{box-shadow:0 7px 34px #003f3232;display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease),background .3s,color .3s}
.dock-main{width:58px;min-height:166px;border-radius:35px;background:var(--teal);color:#fff;writing-mode:vertical-rl;gap:13px;padding:15px 0;flex-direction:row}
.dock-main:hover{background:var(--ink);transform:translateX(-4px)}
.dock-main .dock-icon{font:500 24px var(--font-en);writing-mode:horizontal-tb;transform:rotate(45deg)}
.dock-text{font:800 10px var(--font-en);letter-spacing:.12em}
.dock-mini{width:47px;height:47px;border:1px solid #e1e9e0;border-radius:50%;background:var(--paper);color:var(--teal)}
.dock-mini:hover{background:var(--lime);transform:translateX(-4px)}
.dock-mini span{font:500 25px var(--font-en)}

/* HERO */
.hero{background:var(--cream);color:var(--teal);min-height:810px;height:min(980px,100svh);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding-top:88px}
.hero-topline{display:flex;align-items:center;gap:12px;padding-top:30px;font:800 10px var(--font-en);letter-spacing:.075em}
.hero-topline>span:last-child{margin-left:auto}
.eyebrow-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 5px #00846a17}
.tiny-arrow{font-size:18px}
.hero-type{position:relative;width:min(100% - 105px,1510px);margin-inline:auto;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;padding-top:26px}
.hero-word{font:900 clamp(170px,24.3vw,480px)/.73 var(--font-en);letter-spacing:-.105em;white-space:nowrap;text-transform:uppercase;overflow:visible;transform-origin:left center;font-stretch:condensed}
.hero-word .char{display:inline-block;will-change:transform;opacity:0;transform:translateY(110%) rotate(6deg);animation:charRise 1.45s var(--ease) both;animation-delay:calc(.13s + var(--i)*.075s)}
.hero-word-one{margin-left:-.055em}
.hero-second-line{display:flex;align-items:center;gap:2.4%;position:relative}
.hero-word-two{margin-left:4.3vw;padding-bottom:.11em}
.hero-dash,.hero-period{font:900 .66em/.7 var(--font-en);letter-spacing:-.12em;vertical-align:15%}
.hero-dash{margin-left:.12em}
.hero-period{margin-left:0}
.hero-sticker{position:absolute;left:2%;top:13%;width:clamp(70px,9.6vw,145px);height:auto;z-index:2;color:var(--teal);transform:rotate(-13deg);animation:float-sticker 6s ease-in-out infinite}
.hero-sticker svg{width:100%;overflow:visible}
.hero-sticker text{fill:currentColor;font:800 12.2px var(--font-en);letter-spacing:3.2px}
.hero-sticker svg>path{transform-origin:center;animation:spin-star 18s linear infinite}
.hero-bottom{position:relative;display:flex;justify-content:space-between;align-items:end;gap:20px;padding-bottom:33px;z-index:3}
.hero-bottom p{font:500 15px/1.8 var(--font-ko);color:#3c5d52}
.hero-bottom p strong{font-weight:800;color:var(--ink)}
.hero-bottom .hero-english{font:500 14px/1.6 var(--font-en);color:var(--teal);text-align:right}
.hero-english strong{font-weight:800;color:var(--teal)!important}
.circle-link{width:117px;height:117px;border:1px solid var(--teal);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:background .3s,color .3s,transform .3s}
.circle-link:hover{background:var(--teal);color:white;transform:rotate(-12deg)}
.circle-link span{font:700 10px/1.3 var(--font-en);text-align:center}
.circle-link strong{font:500 34px/1 var(--font-en)}
.hero-outline{position:absolute;top:50%;right:-135px;transform:translateY(-50%) rotate(90deg);font:700 10px var(--font-en);letter-spacing:.28em;opacity:.6;pointer-events:none}@keyframes charRise{to{transform:translateY(0) rotate(0);opacity:1}}@keyframes float-sticker{0%,100%{transform:translateY(0) rotate(-13deg)}50%{transform:translateY(-16px) rotate(-1deg)}}@keyframes spin-star{to{transform:rotate(360deg)}}

/* MARQUEE */
.ticker{background:var(--lime);border-top:1px solid var(--teal);border-bottom:1px solid var(--teal);overflow:hidden;white-space:nowrap;padding:16px 0 14px;transform:rotate(-1.1deg);width:102%;margin-left:-1%;position:relative;z-index:4}
.ticker-track{display:flex;width:max-content;animation:moveTicker 24s linear infinite}
.ticker-track span{display:block;font:900 clamp(20px,3.7vw,49px)/1 var(--font-en);letter-spacing:-.06em;color:var(--teal);padding-right:20px}
.ticker-track em{font-family:Georgia,serif;font-weight:400}
.ticker:hover .ticker-track{animation-play-state:paused}@keyframes moveTicker{to{transform:translateX(-50%)}}

/* COMMON */
.section-index{display:inline-block;font:800 11px var(--font-en);letter-spacing:.08em;color:var(--teal)}
.section-index.dark{color:var(--ink)}
.section-index.light{color:#e9f8da}
.small-kicker{display:inline-flex;gap:16px;align-items:center;font:800 12px var(--font-en);letter-spacing:.09em;color:var(--teal)}
.small-kicker span{font-size:20px}
.serif-accent{font:italic 400 .95em Georgia,'Times New Roman',serif;letter-spacing:-.075em}
.green-point{color:var(--teal)}
.reveal{opacity:0;transform:translateY(55px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in-view{opacity:1;transform:translateY(0)}

/* INTRO */
.intro{background:var(--cream)}
.intro-grid{display:grid;grid-template-columns:24% minmax(0,1fr);gap:5%}
.section-side{display:flex;flex-direction:column;align-items:flex-start}
.section-side .flower-mark{font:400 clamp(120px,16vw,245px)/1 var(--font-en);color:var(--pink);margin-top:85px;animation:spin-star 35s linear infinite}
.section-side p{font:800 12px/1.4 var(--font-en);letter-spacing:.05em;margin-top:auto}
.intro-main{padding-top:6px}
.intro-headline{font:800 clamp(45px,5.6vw,93px)/1.37 var(--font-ko);letter-spacing:-.083em;margin:52px 0 70px;word-break:keep-all}
.intro-headline .serif-accent{font-size:1.09em;white-space:nowrap;color:var(--teal)}
.intro-lower{border-top:1px solid var(--line);padding-top:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.intro-lower p{max-width:520px;font:500 14px/1.95 var(--font-ko);word-break:keep-all;color:#536159}
.text-link{font:800 12px var(--font-en);letter-spacing:.05em;border-bottom:1px solid currentColor;padding-bottom:8px;display:inline-flex;white-space:nowrap;gap:70px;align-items:center}
.text-link span{font-size:23px;line-height:0}
.text-link:hover{color:var(--teal)}

/* WORKS */
.works{background:#e9eddf;padding-top:125px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.massive-head{font:900 clamp(90px,13vw,205px)/.9 var(--font-en);letter-spacing:-.11em;margin-top:28px;position:relative;white-space:nowrap}
.massive-head .outlined{color:transparent;-webkit-text-stroke:2px var(--ink)}
.head-asterisk{font-size:.27em;color:var(--teal);display:inline-block;vertical-align:top;margin:.18em -.13em 0 .04em;animation:spin-star 22s linear infinite}
.small-year{font:800 12px var(--font-en);letter-spacing:0;position:absolute;right:-78px;top:8px;transform:rotate(90deg)}
.works-heading-note{padding-bottom:16px;max-width:340px}
.works-heading-note p{font:500 15px/1.9 var(--font-ko)}
.works-heading-note span{font:800 10px var(--font-en);display:block;margin-top:40px;color:var(--teal);letter-spacing:.1em}
.filter-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px solid #bec8bc;padding-top:23px;margin-top:65px;margin-bottom:37px}
.filter-btn{border:1px solid #c3cdc1;background:transparent;padding:14px 21px;border-radius:30px;font:800 11px var(--font-en);color:#4d5d51;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.filter-btn span{opacity:.65;margin-left:14px}
.filter-btn:hover{border-color:var(--teal);color:var(--teal)}
.filter-btn.active{background:var(--teal);border-color:var(--teal);color:white}
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:58px 24px;min-height:400px}
.project-card{min-width:0;animation:cardAppear .55s var(--ease) both}
.project-card.is-hidden{display:none}
.project-img-btn{position:relative;display:block;overflow:hidden;width:100%;padding:0;text-align:left;background:#d7e3d4;isolation:isolate;aspect-ratio:1.32;border-radius:3px}
.project-img-btn:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.project-img-btn img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .5s}
.project-img-btn:hover img{transform:scale(1.055)}
.project-img-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 58%,#00000035);opacity:0;transition:opacity .3s}
.project-img-btn:hover::after{opacity:1}
.project-tag{position:absolute;top:22px;left:22px;z-index:1;padding:11px 14px;font:800 10px var(--font-en);letter-spacing:.05em;color:var(--ink);background:#fffc;border-radius:20px;backdrop-filter:blur(8px)}
.project-arrow{position:absolute;right:22px;bottom:22px;z-index:1;width:55px;height:55px;border-radius:50%;background:var(--paper);color:var(--teal);font:500 30px var(--font-en);display:grid;place-items:center;transform:rotate(-45deg) translateY(8px);opacity:0;transition:transform .4s var(--ease),opacity .3s}
.project-img-btn:hover .project-arrow,.project-img-btn:focus-visible .project-arrow{transform:rotate(0) translateY(0);opacity:1}
.project-info{display:flex;align-items:flex-start;justify-content:space-between;padding-top:19px;gap:20px}
.project-info h3{font:800 clamp(25px,2.4vw,37px)/1.15 var(--font-en);letter-spacing:-.06em}
.project-info p{font:500 12px var(--font-ko);color:#596b61;margin-top:9px}
.project-info>span{font:800 12px var(--font-en);padding-top:7px;color:var(--teal)}
.works-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:75px;padding-top:28px;border-top:1px solid #bdc9bd}
.works-bottom p{font:800 11px var(--font-en);letter-spacing:.1em}
.works-bottom p span{color:var(--teal);font-size:23px;vertical-align:middle}
.pill-btn{border-radius:50px;padding:16px 21px;min-width:195px;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;font:800 11px var(--font-en);letter-spacing:.055em;transition:transform .25s,background .25s}
.pill-btn span{font-size:22px;font-weight:500;line-height:0}
.pill-btn-dark{background:var(--ink);color:white}
.pill-btn-dark:hover{background:var(--teal);transform:translateY(-3px)}@keyframes cardAppear{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}

/* HORIZONTAL FIGURE SECTION */
.people-section{height:225vh;background:var(--teal);color:#f3f9e7}
.people-sticky{height:100svh;min-height:720px;position:sticky;top:0;display:flex;flex-direction:column;overflow:hidden;padding-top:60px}
.people-top{display:flex;justify-content:space-between;align-items:center}
.people-sub{text-align:right;font:800 10px/1.55 var(--font-en);letter-spacing:.04em}
.people-title{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding-top:40px;z-index:2}
.people-title h2{font:900 clamp(62px,7.5vw,130px)/.9 var(--font-en);letter-spacing:-.095em}
.people-title h2 i{font-family:Georgia,serif;font-weight:400}
.people-title h2 span{color:var(--lime);font-size:.32em;vertical-align:top;display:inline-block;margin-left:7px;animation:spin-star 18s linear infinite}
.people-title p{font:500 15px/1.7 var(--font-ko);text-align:right;margin-bottom:7px;white-space:nowrap}
.people-viewport{position:relative;flex:1;width:100%;min-height:300px;display:flex;align-items:flex-end;overflow:hidden;z-index:1}
.people-track{display:flex;align-items:flex-end;width:max-content;gap:18px;will-change:transform;padding:0 80px 22px;transition:transform .12s linear}
.person{flex:0 0 195px;transform:translateY(var(--shift));display:flex;align-items:center;flex-direction:column;justify-content:flex-end;position:relative}
.person img{width:100%;height:265px;object-fit:contain;object-position:center bottom;filter:none;animation:littleBob 4s ease-in-out infinite}
.person:nth-child(2n) img{animation-delay:-1.5s}
.person:nth-child(3n) img{animation-delay:-2.6s}
.person span{font:800 10px var(--font-en);letter-spacing:.09em;margin-top:11px;white-space:nowrap;color:#dbedc4}
.people-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff3b;padding-top:13px;padding-bottom:26px;font:700 10px var(--font-en);letter-spacing:.07em;z-index:3}@keyframes littleBob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(.7deg)}}

/* SERVICES */
.services{background:var(--cream);padding-top:175px;padding-bottom:160px}
.services-layout{display:grid;grid-template-columns:44% 1fr;gap:7%}
.services-title h2{font:900 clamp(67px,7.5vw,117px)/.97 var(--font-en);letter-spacing:-.095em;margin-top:49px}
.services-title h2 .serif-accent{color:var(--teal);font-size:.91em;white-space:nowrap}
.services-title>p{font:500 15px/1.9 var(--font-ko);margin-top:45px}
.service-star{font:400 clamp(90px,13vw,190px)/1 var(--font-en);color:var(--pink);margin-top:100px;display:inline-block;animation:spin-star 30s linear infinite}.service-list{padding-top:83px}.service-item{border-top:1px solid var(--line)}.service-item:last-child{border-bottom:1px solid var(--line)}.service-trigger{display:flex;width:100%;gap:25px;align-items:center;padding:34px 0;background:transparent;text-align:left;color:var(--ink)}.service-num{align-self:flex-start;font:800 12px var(--font-en);padding-top:10px;color:var(--teal)}.service-name{flex:1;font:800 clamp(27px,3vw,46px)/1.1 var(--font-en);letter-spacing:-.07em;transition:color .25s}.service-name small{display:block;font:600 12px var(--font-ko);letter-spacing:0;margin-top:10px;color:#6b776f}.service-trigger:hover .service-name,.is-open .service-name{color:var(--teal)}.service-plus{font:300 38px var(--font-en);color:var(--teal);line-height:1}.service-panel{padding:0 50px 34px 45px;max-width:610px}.service-panel p{font:500 15px/1.95 var(--font-ko);color:#57665b;word-break:keep-all}.service-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.service-tags span{border:1px solid #cbd5c6;border-radius:30px;padding:9px 12px;font:700 9px var(--font-en);letter-spacing:.03em;color:#486558}

/* MANIFESTO */
.manifesto{background:var(--ink);color:var(--cream);padding-top:130px;overflow:hidden}
.manifesto h2{font:900 clamp(75px,13vw,210px)/.97 var(--font-en);letter-spacing:-.095em;margin:70px 0 50px}
.manifesto h2 .stroke{color:transparent;-webkit-text-stroke:2px var(--cream)}
.manifesto h2 .script{font:italic 400 .94em Georgia,serif;color:var(--lime)}
.manifesto-bottom{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid #ffffff36;padding-top:26px;padding-bottom:95px}
.manifesto-bottom p{font:500 16px/1.8 var(--font-ko)}
.manifesto-symbol{font:500 100px/.8 var(--font-en);color:var(--pink)}
.manifesto-marquee{overflow:hidden;white-space:nowrap;background:var(--lime);color:var(--ink);padding:15px 0;transform:rotate(2deg) scale(1.04);margin-bottom:-10px}
.manifesto-marquee>div{font:900 22px var(--font-en);letter-spacing:.09em;display:inline-block;animation:moveTicker 32s linear infinite}

/* PROCESS */
.process{background:#f1f2e6}
.process-head{align-items:flex-end}
.process-title{font:900 clamp(55px,6.7vw,105px)/1.05 var(--font-en);letter-spacing:-.085em;margin-top:46px}
.process-title span{font:italic 400 .98em Georgia,serif;color:var(--teal)}
.process-head>p{font:500 15px/1.9 var(--font-ko);padding-bottom:6px}
.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-top:75px}
.process-card{min-height:385px;border:1px solid #d3dbd0;background:#f9faf1;padding:26px 26px 30px;display:flex;flex-direction:column;transition:background .35s,transform .35s,border .35s}
.process-card:nth-child(2){transition-delay:.09s}
.process-card:nth-child(3){transition-delay:.18s}
.process-card:nth-child(4){transition-delay:.27s}
.process-card:hover{background:var(--lime);border-color:var(--teal);transform:translateY(-10px)}
.process-card>span{font:800 11px var(--font-en);color:var(--teal)}
.process-glyph{font:400 90px/1 var(--font-en);color:var(--teal);margin:46px 0 auto;align-self:center}
.process-card h3{font:800 clamp(23px,2.3vw,36px)/1 var(--font-en);letter-spacing:-.06em;margin-top:25px}
.process-card p{font:500 13px/1.8 var(--font-ko);margin-top:17px;color:#5c685f;word-break:keep-all}

/* FAQ */
.faq{background:var(--cream)}
.faq-layout{display:grid;grid-template-columns:40% 1fr;gap:8%}
.faq-title{font:900 clamp(58px,6.5vw,110px)/1.03 var(--font-en);letter-spacing:-.09em;margin:40px 0 32px}
.faq-title i{font:italic 400 .9em Georgia,serif;color:var(--teal)}
.faq-layout>div:first-child>p{font:500 14px/1.8 var(--font-ko)}
.faq-list{padding-top:55px}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item button{display:flex;align-items:center;justify-content:space-between;gap:15px;background:transparent;width:100%;padding:28px 0;text-align:left;font:700 17px var(--font-ko);color:var(--ink)}
.faq-item button>span:last-child{font:300 30px var(--font-en);color:var(--teal)}
.faq-item>div{font:500 14px/1.95 var(--font-ko);padding:0 42px 25px 0;color:#53665a;word-break:keep-all}

/* CONTACT & FOOTER */
.contact{background:var(--teal);color:#f6f7ee;overflow:hidden}
.contact-inner{padding-top:70px;padding-bottom:100px}
.contact-top{display:flex;justify-content:space-between;gap:15px;padding-bottom:22px;border-bottom:1px solid #ffffff51;font:800 11px var(--font-en);letter-spacing:.05em}
.contact-overline{font:800 12px var(--font-en);letter-spacing:.11em;margin-top:75px}
.contact h2{font:900 clamp(90px,13.4vw,225px)/.94 var(--font-en);letter-spacing:-.105em;margin-top:23px;white-space:nowrap}
.contact h2 em{font:italic 400 .96em Georgia,serif;letter-spacing:-.09em}
.contact h2 em span{color:var(--lime)}.contact-bottom{border-top:1px solid #ffffff63;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding-top:24px;margin-top:65px}
.contact-bottom>p{font:500 15px/1.9 var(--font-ko)}
.contact-round{background:var(--lime);color:var(--teal);border-radius:50%;width:172px;height:172px;display:flex;align-items:center;justify-content:center;flex-direction:column;flex-shrink:0;gap:12px;transition:transform .35s var(--ease),background .35s}
.contact-round:hover{background:#fff;transform:rotate(-12deg)}
.contact-round span{font:800 10px var(--font-en);letter-spacing:.02em}
.contact-round strong{font:300 76px/1 var(--font-en)}
.contact-mail{display:flex;flex-direction:column;align-items:flex-start;gap:15px}
.contact-mail small{font:800 10px var(--font-en);letter-spacing:.09em}
.contact-mail>a{font:700 clamp(21px,2.4vw,36px) var(--font-en);letter-spacing:-.045em;border-bottom:1px solid #ffffff8a;padding-bottom:7px}
.copy-email{background:transparent;color:#f0f9ea;font:800 10px var(--font-en);border:0;padding:0}
.copy-email:hover{color:var(--lime)}
.site-footer{background:#e4eddd;padding-top:70px}
.footer-main{display:flex;justify-content:space-between;gap:35px;padding-bottom:90px}
.footer-logo{color:var(--teal);font:900 clamp(50px,8vw,140px)/1 var(--font-en);letter-spacing:-.105em}
.footer-logo span{font:800 16px var(--font-en);vertical-align:top;letter-spacing:0;margin-left:7px}
.footer-right{display:flex;gap:100px;padding-top:12px}
.footer-right>div{display:flex;flex-direction:column;gap:13px}
.footer-right small{font:800 10px var(--font-en);letter-spacing:.07em;color:var(--teal);margin-bottom:13px}
.footer-right a{font:700 13px var(--font-en)}
.footer-right a:hover{color:var(--teal)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #bfcfbb;padding:23px 0;font:800 10px var(--font-en);letter-spacing:.03em;color:#58665a}

/* MODALS, DRAWER, TOAST */
.modal-layer,.drawer-layer{position:fixed;inset:0;z-index:190;pointer-events:none;visibility:hidden}
.modal-layer.is-open,.drawer-layer.is-open{visibility:visible;pointer-events:auto}
.modal-backdrop,.drawer-backdrop{position:absolute;inset:0;background:#132d28c9;opacity:0;transition:opacity .4s}
.modal-layer.is-open .modal-backdrop,.drawer-layer.is-open .drawer-backdrop{opacity:1}
.project-dialog{position:absolute;inset:6% 7%;display:grid;grid-template-columns:56% 44%;background:var(--paper);overflow:auto;transform:translateY(35px) scale(.97);opacity:0;transition:transform .55s var(--ease),opacity .4s;outline:none}
.modal-layer.is-open .project-dialog{transform:none;opacity:1}
.modal-close{position:absolute;z-index:3;right:22px;top:22px;width:44px;height:44px;background:#fff;border-radius:50%;font:300 35px/1 var(--font-en);color:var(--teal)}
.modal-cover{min-height:460px;background:#e1e8d9}
.modal-cover img{width:100%;height:100%;object-fit:cover}
.modal-detail{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(35px,5vw,90px) clamp(35px,4.8vw,80px)}
.modal-kicker{font:800 11px var(--font-en);color:var(--teal);letter-spacing:.09em}
.modal-detail h2{font:900 clamp(40px,4vw,76px)/1.08 var(--font-en);letter-spacing:-.07em;margin-top:24px}
.modal-detail>p{font:500 15px/1.9 var(--font-ko);color:#52645a;margin-top:24px;word-break:keep-all}
.modal-meta{width:100%;display:flex;gap:50px;margin-top:50px;border-top:1px solid var(--line);padding-top:18px}
.modal-meta span{display:flex;flex-direction:column;gap:15px;font:800 10px var(--font-en);color:var(--teal)}
.modal-meta strong{font:700 14px var(--font-en);color:var(--ink)}
.modal-detail .pill-btn{margin-top:35px}
.modal-contact{font:800 12px var(--font-en);color:var(--teal);margin-top:auto;padding:35px 0 0;background:transparent;border-bottom:1px solid var(--teal)}
.inquiry-drawer{position:absolute;top:0;right:0;width:min(100%,560px);height:100%;background:var(--cream);transform:translateX(110%);transition:transform .6s var(--ease);overflow:auto;outline:none}
.drawer-layer.is-open .inquiry-drawer{transform:translateX(0)}
.drawer-top{height:79px;border-bottom:1px solid var(--line);padding:0 38px;display:flex;align-items:center;justify-content:space-between;font:800 11px var(--font-en);letter-spacing:.06em;color:var(--teal)}
.drawer-top button{width:42px;height:42px;border:1px solid var(--teal);background:transparent;border-radius:50%;font:300 30px var(--font-en);color:var(--teal)}
.drawer-content{padding:60px 45px 75px}
.drawer-content h2{font:900 110px/.83 var(--font-en);letter-spacing:-.1em;margin:36px 0 33px;color:var(--teal)}
.drawer-content h2 em{font:italic 400 .95em Georgia,serif}
.drawer-content h2>span{font:400 50px var(--font-en);vertical-align:top;margin-left:10px}
.drawer-intro{font:500 14px/1.85 var(--font-ko);color:#58685e;max-width:380px}
.drawer-content form{display:flex;flex-direction:column;margin-top:40px}
.drawer-content form label{font:800 10px var(--font-en);color:var(--teal);letter-spacing:.05em;margin:24px 0 10px}
.drawer-content form label span{color:#c86964}
.drawer-content input,.drawer-content select,.drawer-content textarea{width:100%;border:0;border-bottom:1px solid #b9cabe;border-radius:0;background:transparent;padding:13px 0;color:var(--ink);font:500 15px var(--font-ko);outline:none}
.drawer-content input:focus,.drawer-content select:focus,.drawer-content textarea:focus{border-color:var(--teal);border-width:2px}
.drawer-content textarea{resize:vertical}
.drawer-submit{background:var(--teal);border-radius:45px;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:21px 25px;margin-top:35px;font:800 12px var(--font-en);letter-spacing:.05em;transition:background .2s}
.drawer-submit:hover{background:var(--ink)}
.drawer-submit span{font-size:24px;line-height:0}
.drawer-note{font:500 11px/1.7 var(--font-ko);color:#78857d;margin-top:13px}
.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,15px);z-index:400;pointer-events:none;background:var(--ink);color:#fff;padding:13px 24px;border-radius:30px;font:700 13px var(--font-ko);opacity:0;transition:opacity .3s,transform .3s;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.cursor-orb{position:fixed;z-index:99;left:0;top:0;width:85px;height:85px;border-radius:50%;background:var(--lime);color:var(--teal);display:grid;place-items:center;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .25s,scale .25s;will-change:left,top;mix-blend-mode:normal}
.cursor-orb.show{opacity:1;scale:1}
.cursor-orb span{font:900 11px var(--font-en)}



/* RESPONSIVE */
@media(max-width:1300px){
  .wrap{width:min(100% - 84px,1520px)}
  .availability{display:none}
  .desktop-nav{gap:25px}
  .hero-type{width:calc(100% - 85px)}
  .hero-word{font-size:25vw}
  .hero-outline{display:none}
  .project-dialog{inset:5%}
  .process-card{padding:22px}
  .people-section{height:210vh}
}
@media(max-width:980px){
  .site-header{padding-inline:28px}
  .desktop-nav,.availability,.header-contact{display:none}
  .menu-toggle{display:flex}
  .wrap{width:calc(100% - 56px)}
  .hero{min-height:720px;height:90svh}
  .hero-type{width:calc(100% - 58px)}
  .hero-word{font-size:25.5vw}
  .hero-bottom .hero-english{display:none}
  .intro-grid{grid-template-columns:16% 1fr;gap:4%}
  .intro-headline{font-size:6.9vw}
  .section-side .flower-mark{font-size:15vw}
  .works-heading-note{display:none}
  .projects-grid{gap:42px 18px}
  .people-title h2{font-size:8vw}
  .people-title p{font-size:12px}
  .person{flex-basis:175px}
  .person img{height:235px}
  .services-layout{grid-template-columns:1fr 1.25fr;gap:5%}
  .services-title h2{font-size:7vw}
  .service-name{font-size:3.1vw}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .process-card{min-height:305px}
  .process-glyph{margin:30px 0 auto}
  .faq-layout{grid-template-columns:1fr 1.1fr;gap:5%}
  .faq-title{font-size:6.4vw}
  .footer-right{gap:40px}
  .contact h2{font-size:13.1vw}
}
@media(max-width:700px){
  .wrap{width:calc(100% - 36px)}
  .section-pad{padding-block:90px}
  .site-header{height:68px;padding-inline:18px}
  .site-header.scrolled{height:68px}
  .brand-name{font-size:16px}
  .brand-sign{font-size:30px}
  .menu-toggle{width:39px;height:39px}
  .quick-dock{right:13px;top:auto;bottom:22px;transform:none;gap:5px}
  .dock-main{width:53px;min-height:53px;height:53px;writing-mode:horizontal-tb;flex-direction:row;padding:0;border-radius:50%}
  .dock-main .dock-icon{font-size:27px}
  .dock-text,.dock-mini{display:none}
  .hero{padding-top:68px;min-height:670px;height:94svh}
  .hero-topline{padding-top:25px;font-size:8px;gap:7px}
  .hero-topline>span:last-child{display:none}
  .hero-type{width:calc(100% - 20px);justify-content:center;padding:0 5px}
  .hero-word{font-size:28vw;letter-spacing:-.108em;line-height:.86}
  .hero-word-two{margin-left:9vw}
  .hero-sticker{width:61px;left:2%;top:11%}
  .hero-second-line{padding-top:12px}
  .hero-bottom{padding-bottom:36px;align-items:flex-end}
  .hero-bottom p{font-size:12px}
  .hero-scroll{width:85px;height:85px}
  .hero-scroll span{font-size:9px}
  .hero-scroll strong{font-size:24px}
  .ticker{padding:13px 0}
  .ticker-track span{font-size:25px}
  .intro-grid{grid-template-columns:1fr;gap:10px}
  .section-side{flex-direction:row;align-items:center;justify-content:space-between}
  .section-side .flower-mark{display:none}
  .section-side p{text-align:right;font-size:9px}
  .intro-main{padding-top:30px}
  .small-kicker{font-size:10px}
  .intro-headline{font-size:clamp(39px,8vw,65px);line-height:1.45;margin:26px 0 35px;letter-spacing:-.08em}
  .intro-headline .serif-accent{font-size:1.03em}
  .intro-lower{display:block}
  .intro-lower p{font-size:13px}
  .text-link{margin-top:25px}
  .works{padding-top:85px}
  .massive-head{font-size:18vw;margin-top:24px}
  .small-year{font-size:9px;right:-10px;top:-8px;transform:none}
  .filter-row{margin-top:38px;margin-bottom:22px;overflow:auto;display:flex;flex-wrap:nowrap;padding-bottom:6px;scrollbar-width:none}
  .filter-row::-webkit-scrollbar{display:none}
  .filter-btn{font-size:10px;padding:12px 14px}
  .projects-grid{grid-template-columns:1fr;gap:32px}
  .project-img-btn{aspect-ratio:1.3}
  .project-info h3{font-size:27px}
  .works-bottom{margin-top:52px;gap:15px}
  .works-bottom p{font-size:9px}
  .pill-btn{min-width:160px;font-size:10px;padding:15px}
  .people-section{height:auto}
  .people-sticky{height:auto;min-height:750px;position:relative;padding-top:50px}
  .people-top{align-items:flex-start}
  .people-sub{font-size:8px}
  .people-title{display:block;padding-top:55px}
  .people-title h2{font-size:clamp(57px,11.8vw,86px)}
  .people-title p{text-align:left;margin-top:20px;font-size:12px}
  .people-viewport{margin-top:45px;min-height:330px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
  .people-viewport::-webkit-scrollbar{display:none}
  .people-track{padding:0 15px 25px;transform:none!important;gap:0}
  .person{flex-basis:165px;scroll-snap-align:center}
  .person img{height:215px}
  .people-bottom{padding-bottom:30px}
  .people-bottom span:nth-child(2){display:none}
  .services-layout{grid-template-columns:1fr;gap:18px}
  .services-title h2{font-size:clamp(68px,13vw,95px);margin-top:35px}
  .services-title>p{font-size:13px;margin-top:25px}
  .service-star{display:none}
  .service-list{padding-top:40px}
  .service-trigger{padding:24px 0;gap:14px}
  .service-name{font-size:clamp(27px,6.5vw,41px)}
  .service-num{font-size:10px}
  .service-panel{padding:0 10px 27px 28px}
  .service-panel p{font-size:13px}
  .manifesto{padding-top:90px}
  .manifesto h2{font-size:clamp(67px,11vw,110px);margin:55px 0 60px}
  .manifesto h2 .stroke{-webkit-text-stroke:1px var(--cream)}
  .manifesto-bottom{padding-bottom:70px}
  .manifesto-bottom p{font-size:12px}
  .manifesto-symbol{font-size:60px}
  .process-head{display:block}
  .process-title{font-size:clamp(54px,10.4vw,75px)}
  .process-head>p{font-size:13px;margin-top:22px}
  .process-grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:40px}
  .process-card{padding:17px;min-height:290px}
  .process-glyph{font-size:65px}
  .process-card h3{font-size:22px}
  .process-card p{font-size:11px}
  .faq-layout{grid-template-columns:1fr;gap:25px}
  .faq-title{font-size:clamp(64px,12vw,90px)}
  .faq-list{padding-top:5px}
  .faq-item button{font-size:14px;padding:22px 0}
  .faq-item>div{font-size:12px}
  .contact-inner{padding-top:40px;padding-bottom:70px}
  .contact-top{font-size:9px}
  .contact-top>span:nth-child(2){display:none}
  .contact-overline{margin-top:70px;font-size:10px}
  .contact h2{font-size:15vw;margin-top:30px}
  .contact-bottom{margin-top:60px;display:grid;grid-template-columns:1fr auto;align-items:start}
  .contact-bottom>p{font-size:12px;line-height:1.8}
  .contact-round{width:112px;height:112px}
  .contact-round span{font-size:8px}
  .contact-round strong{font-size:50px}
  .contact-mail{grid-column:1/-1;margin-top:20px}
  .contact-mail>a{font-size:26px}
  .site-footer{padding-top:55px}
  .footer-main{display:block;padding-bottom:65px}
  .footer-logo{font-size:12.5vw}
  .footer-right{justify-content:space-between;margin-top:45px;padding-right:15px}
  .footer-bottom{flex-direction:column;gap:12px;font-size:9px}
  .footer-bottom span:nth-child(2){display:none}
  .project-dialog{inset:5% 4%;grid-template-columns:1fr;overflow:auto;max-height:90svh}
  .modal-cover{min-height:0;aspect-ratio:1.35}
  .modal-detail{padding:28px}
  .modal-detail h2{font-size:45px;margin-top:12px}
  .modal-detail>p{font-size:13px;margin-top:15px}
  .modal-meta{margin-top:25px}
  .modal-contact{padding:30px 0 0}
  .drawer-top{padding:0 22px;height:68px}
  .drawer-content{padding:40px 23px 65px}
  .drawer-content h2{font-size:93px}
  .cursor-orb{display:none}
}
@media(max-width:400px){
  .hero{min-height:590px}
  .hero-word{font-size:27.7vw}
  .hero-topline{font-size:7px}
  .hero-bottom p{font-size:11px}
  .hero-scroll{width:76px;height:76px}
  .intro-headline{font-size:37px}
  .people-title h2{font-size:55px}
  .people-title p{margin-top:12px}
  .contact-mail>a{font-size:24px}
  .process-card h3{font-size:19px}
  .process-card p{font-size:10px}
  .process-card{min-height:265px}}
@media(hover:none){
  .cursor-orb{display:none}
  .project-arrow{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .hero-word .char{opacity:1;transform:none}
  .people-track{transition:none!important}
}

/* Hidden property must win over component display declarations. */
[hidden]{display:none!important}
/* Avoid 1–4px page overflow from the rotated edge-to-edge marquee on mobile. */
html{overflow-x:clip}


/* ========================================================================
   V2 OPENING — WHITE TYPOGRAPHY ON #00846a, CURTAIN SLIDES UP
   Only active if JS adds <html class="has-intro"> in index.html.
   Existing CODE— / VELLA. hero letter keyframes and timings remain unchanged.
   ======================================================================== */
html.has-intro,html.has-intro body{overflow:hidden!important}
/* Hold the original hero's character animations at frame 0 until the intro is gone. */
html.has-intro .hero-word .char{animation-play-state:paused!important}
/* Hide the non-animated dash and period while the curtain is moving. */
html.has-intro .hero-type{visibility:hidden}
.launch-curtain{display:none;position:fixed;inset:0;z-index:1000;background:#00846a;color:#fff;overflow:hidden;transform:translate3d(0,0,0);transition:transform 1.12s cubic-bezier(.76,0,.22,1);will-change:transform;isolation:isolate}
html.has-intro .launch-curtain{display:flex}
.launch-curtain.is-leaving{transform:translate3d(0,-105%,0)}
.launch-frame{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;width:100%;min-height:100%;min-height:100svh;padding:clamp(24px,3.4vw,55px) clamp(24px,4.2vw,74px) clamp(27px,3.6vw,58px)}
.launch-topline,.launch-bottomline{display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;gap:25px;font:800 clamp(9px,.73vw,12px)/1.35 var(--font-en);letter-spacing:.09em}
.launch-topline>span:nth-child(2){text-align:center}.launch-topline>span:last-child{text-align:right}.launch-brand-mini{font-size:clamp(14px,1.12vw,19px);font-weight:900;letter-spacing:-.07em;white-space:nowrap}.launch-brand-mini sup{font-size:9px;vertical-align:top;padding-left:2px}.launch-asterisk{font-size:18px;margin-right:5px;display:inline-block;animation:spin-star 9s linear infinite}
.launch-center{position:relative;width:100%;margin:auto 0;padding:40px 0 25px;display:flex;flex-direction:column;align-items:center;text-align:center}
.launch-kicker{font:800 clamp(9px,.9vw,13px)/1.5 var(--font-en);letter-spacing:.2em;margin-bottom:clamp(28px,3.5vw,52px);opacity:0;animation:launchFade .75s .15s ease both}
.launch-wordmark{width:100%;display:flex;align-items:baseline;justify-content:center;white-space:nowrap;font:900 clamp(48px,13.4vw,250px)/.84 var(--font-en);letter-spacing:-.105em;white-space:nowrap}
.launch-mask{display:inline-block;overflow:hidden;line-height:1.17;padding-bottom:.08em;margin-bottom:-.08em}
.launch-word{display:inline-block;opacity:0;transform:translate3d(0,115%,0);animation:launchWordRise .93s cubic-bezier(.2,1,.27,1) both}
.launch-word-a{animation-delay:.12s}.launch-word-b{animation-delay:.27s}
.launch-dot{font-size:.64em;vertical-align:15%;margin-left:.055em;letter-spacing:-.12em}
.launch-subrow{display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(100%,1070px);border-top:1px solid rgba(255,255,255,.55);padding:22px 4px 0;margin-top:clamp(23px,3vw,44px);font:800 clamp(10px,.82vw,14px)/1.45 var(--font-en);letter-spacing:.15em;opacity:0;animation:launchFade .7s .6s ease both}
.launch-subrow span:last-child{font:500 24px/1 var(--font-en)}
.launch-bottomline{grid-template-columns:1fr minmax(100px,260px) 1fr}.launch-bottomline>span{white-space:nowrap}.launch-midpoint{font-size:8px;padding:0 5px}.launch-loading{width:100%;height:2px;background:rgba(255,255,255,.3);overflow:hidden}.launch-loading>span{display:block;width:100%;height:100%;background:#fff;transform-origin:left;transform:scaleX(0);animation:launchLoad 1.65s ease-out forwards}
.launch-skip{justify-self:end;border:1px solid rgba(255,255,255,.65);border-radius:100px;background:transparent;color:#fff;padding:12px 17px;font:800 10px/1 var(--font-en);letter-spacing:.12em;display:inline-flex;align-items:center;gap:22px;transition:background .2s,color .2s}.launch-skip span{font-size:17px;font-weight:500}.launch-skip:hover,.launch-skip:focus-visible{background:#fff;color:#00846a}
.launch-decoration{position:absolute;right:-3.5vw;top:18%;font:400 clamp(150px,26vw,440px)/1 var(--font-en);color:rgba(255,255,255,.075);animation:spin-star 32s linear infinite;z-index:1;pointer-events:none}
@keyframes launchWordRise{to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes launchFade{to{opacity:1}}
@keyframes launchLoad{to{transform:scaleX(1)}}
@media(max-width:900px){
  .launch-topline{grid-template-columns:1fr 1fr}
  .launch-topline>span:nth-child(2){display:none}
  .launch-bottomline{grid-template-columns:1fr auto}
  .launch-loading{display:none}
  .launch-wordmark{font-size:13.5vw}
}
@media(max-width:600px){
  .launch-frame{padding:26px 22px 30px}
  .launch-topline{font-size:9px}
  .launch-edition{font-size:9px}
  .launch-brand-mini{font-size:16px}
  .launch-center{padding:50px 0 30px}
  .launch-kicker{font-size:8px;letter-spacing:.1em;margin-bottom:30px}
  .launch-wordmark{font-size:13.45vw;letter-spacing:-.105em}
  .launch-subrow{margin-top:22px;padding-top:13px;font-size:9px;letter-spacing:.055em}
  .launch-subrow span:last-child{font-size:20px}
  .launch-bottomline>span{font-size:8px;letter-spacing:.015em}
  .launch-skip{font-size:9px;padding:11px 12px;gap:8px}
}
@media(max-width:360px){
  .launch-bottomline>span{font-size:7px}
  .launch-frame{padding-inline:16px}
}
@media(prefers-reduced-motion:reduce){
  .launch-curtain{display:none!important}
}






/* V3: outline people on the original teal background. SVG files are transparent, white-stroke line art. */


/* ========================================================================
   V4 — EDITORIAL GRID / SERIF DISPLAY
   2026-11-04. Original V2 launch curtain, V3 white-line people and all
   animation JavaScript remain intact. These are non-invasive CSS overrides.

   EDIT THESE VALUES:
     --hero-grid-step      = grid cell size
     --hero-grid-fine      = thin-grid line color/strength
     --hero-grid-major     = every fourth guide-line strength
     --font-display       = big heading typeface
   ======================================================================== */
:root {
  --font-display: 'Bodoni Moda', 'Didot', 'GFS Didot', 'Times New Roman', serif;
  --hero-grid-step: clamp(78px, 7.45vw, 118px);
  --hero-grid-fine: rgba(0, 132, 106, .115);
  --hero-grid-major: rgba(0, 132, 106, .115);
}
/* The intro is intentionally type-only on teal. The grid starts in the
   actual cream-coloured hero, making the upward curtain reveal distinct. */
.hero {
  isolation: isolate;
  background: #f8f8f2;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--hero-grid-fine) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hero-grid-fine) 1px, transparent 1px),
    linear-gradient(to right, var(--hero-grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hero-grid-major) 1px, transparent 1px);
  background-size:
    var(--hero-grid-step) var(--hero-grid-step),
    var(--hero-grid-step) var(--hero-grid-step),
    calc(var(--hero-grid-step) * 4) calc(var(--hero-grid-step) * 4),
    calc(var(--hero-grid-step) * 4) calc(var(--hero-grid-step) * 4);
  background-position: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 3%, #000 18%, #000 79%, transparent 99%);
  mask-image: linear-gradient(to bottom, transparent 3%, #000 18%, #000 79%, transparent 99%);
}
.hero > .hero-topline, .hero > .hero-type, .hero > .hero-bottom {
  position: relative;
  z-index: 1;
}
.hero > .hero-outline { z-index: 1; }
/* Elegant high-contrast serif as display typography. Per-letter animation
   is not altered; the JS still wraps CODE and VELLA in the same .char spans. */
.hero-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(175px, 25.6vw, 445px);
  line-height: .78;
  letter-spacing: -.066em;
  font-stretch: normal;
  font-kerning: normal;
}
.hero-word-one { margin-left: -.025em; }
.hero-word-two {
  margin-left: 5.3vw;
  font-size: clamp(130px, 23.2vw, 396px);
  font-style: italic;
  padding-bottom: .095em;
}
.hero-dash, .hero-period {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -.055em;
}
.hero-dash { margin-left: .085em; }
.hero-period { margin-left: -.04em; }
.hero-sticker { left: 1.6%; top: 8%; }
/* Apply the editorial serif to display accents but keep UI, navigation,
   project descriptions and Korean body copy in accessible clean sans type. */
.serif-accent, .faq-title i, .contact h2 em {
  font-family: var(--font-display);
  font-weight: 500;
}
/* In the opening screen, match the hero's type family while preserving
   its original rise/slide timings, sizes and white-on-teal presentation. */
.launch-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.052em;
  font-size: clamp(48px, 12.65vw, 235px);
}
.launch-dot { font-family: var(--font-display); }

@media (max-width: 1300px) {
  .hero-word { font-size: 26vw; }
  .hero-word-two { font-size: 23.2vw; }
}
@media (max-width: 980px) {
  .hero-word { font-size: 26vw; }
  .hero-word-two { margin-left: 5vw; font-size: 23.5vw; }
}
@media (max-width: 700px) {
  :root {
    --hero-grid-step: clamp(50px, 15.4vw, 82px);
    --hero-grid-fine: rgba(0, 132, 106, .095);
    --hero-grid-major: rgba(0, 132, 106, .10);
  }
  .hero-word {
    font-size: 24.8vw;
    line-height: .87;
    letter-spacing: -.075em;
  }
  .hero-word-one { margin-left: 0; }
  .hero-word-two { margin-left: 4.5vw; font-size: 24.3vw; }
  .hero-dash { margin-left: .04em; }
  .hero-sticker { left: 1%; top: 10%; }
  .launch-wordmark { font-size: 13vw; }
}
@media (max-width: 400px) {
  .hero-word { font-size: 24.8vw; }
  .hero-word-two { font-size: 24.1vw; }
}


/* ================================================================
   PORTFOLIO V5 — Full-length screenshot preview + live website
   Added to the CURRENT user-edited CODEVELLA source, not older V4/V5.
   The portfolio card thumbnails / people characters / brand are untouched.
   ================================================================ */
.project-dialog{
  inset:clamp(10px,3vw,46px) clamp(10px,4vw,68px);
  max-width:1560px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  grid-template-columns:none;
  min-height:0;
  overflow:hidden;
  background:var(--cream);
  box-shadow:0 24px 95px #071b1759;
}
.modal-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex:0 0 auto;padding:12px 20px 12px 27px;
  min-height:70px;border-bottom:1px solid var(--line);
  background:var(--cream);
}
.modal-toolbar-label{
  font:800 10px/1.5 var(--font-en);letter-spacing:.06em;color:var(--teal);
}
.modal-toolbar-label>span{margin-inline:7px;opacity:.62}
.modal-toolbar-actions{display:flex;align-items:center;gap:16px}
.modal-live-top{
  display:inline-flex;align-items:center;gap:10px;padding:11px 16px;
  background:var(--teal);color:#fff;border-radius:30px;
  font:800 11px var(--font-en);white-space:nowrap;
}
.modal-live-top:hover{background:var(--ink)}
.modal-close{
  position:static;flex:0 0 43px;width:43px;height:43px;
  display:grid;place-items:center;border:1px solid #bed0c3;
  background:#fff;color:var(--teal);font:300 31px/1 var(--font-en);
}
.modal-close:hover{background:var(--teal);color:#fff}
.modal-body{
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(335px,.82fr);
  flex:1;min-height:0;overflow:hidden;
}
.modal-cover{
  min-height:0;min-width:0;height:100%;aspect-ratio:auto;
  display:flex;flex-direction:column;overflow:hidden;
  border-right:1px solid var(--line);background:#e2e9e2;
}
.modal-cover-heading{
  flex:0 0 auto;display:flex;justify-content:space-between;gap:14px;
  padding:14px clamp(14px,2vw,27px);
  background:#e7eee7;border-bottom:1px solid var(--line);
  font:800 10px/1.5 var(--font-en);letter-spacing:.065em;color:var(--teal);
}
.modal-image-scroll{
  flex:1;min-height:0;overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#00846a85 #dce8df;
}
.modal-image-scroll:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}
.modal-cover .modal-image-scroll img{
  display:block;width:100%;height:auto;max-width:none;
  object-fit:contain;object-position:top center;
}
.modal-preview-note{
  flex:0 0 auto;background:#f2f5ee;color:#5e6c62;
  font:500 12px/1.6 var(--font-ko);
  padding:12px clamp(14px,2vw,27px);
  border-top:1px solid var(--line);
}
.modal-detail{
  min-height:0;min-width:0;overflow-y:auto;
  padding:clamp(30px,4.1vw,70px) clamp(25px,4vw,70px);
}
.modal-detail h2{overflow-wrap:anywhere}
.modal-detail .pill-btn{width:100%;max-width:390px}
.modal-live-notice{
  margin-top:30px!important;
  padding:15px 17px;border:1px dashed #b8c9bc;border-radius:3px;
  color:#586c62!important;font:500 12px/1.7 var(--font-ko)!important;
}
.modal-detail .modal-contact{margin-top:auto}
@media(max-width:950px){
  .modal-body{grid-template-columns:minmax(0,1fr) minmax(290px,.8fr)}
  .modal-detail{padding:30px 25px}
  .modal-detail h2{font-size:clamp(36px,5vw,58px)}
  .modal-meta{gap:22px}
}
@media(max-width:700px){
  .project-dialog{inset:0;width:100%;height:100dvh;max-width:none;max-height:none;transform:translateY(30px);}
  .modal-toolbar{padding:9px 15px;min-height:64px}
  .modal-toolbar-label{font-size:9px}
  .modal-toolbar-label>span{margin-inline:3px}
  .modal-toolbar-actions{gap:8px}
  .modal-live-top{font-size:9px;padding:10px 12px}
  .modal-close{width:38px;height:38px;flex-basis:38px;font-size:26px}
  .modal-body{display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
  .modal-cover{height:min(52dvh,540px);min-height:260px;flex:0 0 auto;border-right:0;border-bottom:1px solid var(--line)}
  .modal-cover-heading{font-size:9px;padding:12px 16px}
  .modal-preview-note{font-size:11px;padding:11px 16px}
  .modal-detail{flex:0 0 auto;min-height:auto;overflow:visible;padding:32px 24px 45px}
  .modal-detail h2{font-size:clamp(39px,10vw,58px);margin-top:14px}
  .modal-meta{margin-top:30px}
  .modal-detail .modal-contact{margin-top:30px;padding-top:16px}
}
@media(prefers-reduced-motion:reduce){
  .project-dialog{transition:none}
}