@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{--accent:#1D4963;--ink:#000000;--text:#050505;--muted:#161616;--line:#D5E5ED;--paper:#FFFFFF;--sky:#A0CBE2;--sky-light:#E4F0F7;--space:clamp(22px,4.3vw,80px);font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:104px}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}p,h1,h2,h3{margin:0}h1,h2,h3,p{word-break:keep-all;overflow-wrap:break-word}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:6px}.skip-link{position:fixed;top:12px;left:12px;z-index:100;background:var(--accent);color:white;padding:12px;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px var(--space);background:#FFFFFF;border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.brand{display:inline-flex;align-items:center;gap:7px;font-size:21px;letter-spacing:-1px;line-height:1.2;font-weight:500;white-space:nowrap}.brand strong{font-weight:900}.brand-mark{display:inline-block;width:16px;height:16px;border:5px solid var(--accent);border-radius:50%;margin-left:2px}.header nav{display:flex;align-items:center;gap:36px;font-size:15px;font-weight:600}.header nav a{transition:color .2s}.header nav a:hover{color:var(--accent)}.nav-contact{margin-left:8px}.nav-contact span{margin-left:12px}.hero{padding:55px var(--space) 58px;max-width:1920px;margin:auto}.hero-topline{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:32px}.eyebrow{font-size:13px;letter-spacing:1.2px;line-height:1.6;font-weight:600}.hero .eyebrow{color:var(--accent)}.hero-location{font-size:12px;letter-spacing:1px;color:var(--muted)}h1{font-size:clamp(42px,6.3vw,106px);font-weight:800;letter-spacing:-.055em;line-height:1.25}.being{color:var(--accent)}.period{color:var(--accent)}.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:35px}.hero-bottom p{font-size:17px;line-height:1.8;color: var(--text)}.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:12px 0 10px;border-bottom:1px solid currentColor;font-size:15px;font-weight:600;white-space:nowrap;transition:color .2s}.text-link:hover{color:var(--accent)}.text-link span{font-size:20px}.mobile-break{display:none}.section{padding:90px var(--space)}.work{padding-top:34px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:32px}.section-heading .eyebrow{color:var(--muted);margin-bottom:10px}h2{font-size:clamp(30px,3vw,48px);font-weight:700;letter-spacing:-.055em;line-height:1.4}.section-heading>p{font-size:15px;color:var(--muted);padding-bottom:5px}.portfolio-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:42px 24px}.project{grid-column:span 2;min-width:0}.project:nth-child(1),.project:nth-child(2){grid-column:span 3}.project-link{display:block}.project-visual{position:relative;aspect-ratio:16/9;background:#D5E6EF;overflow:hidden}.project-visual img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.6,.3,1)}.project-link:hover img{transform:scale(1.035)}.play-icon{position:absolute;bottom:18px;right:18px;display:grid;place-items:center;width:42px;height:42px;background:white;border-radius:50%;color:var(--ink);box-shadow:0 2px 16px #0002;transition:background .2s,color .2s}.play-icon svg{width:16px;height:16px;margin-left:2px;fill:currentColor}.project-link:hover .play-icon{background:var(--accent);color:white}.project-index{position:absolute;left:14px;top:14px;font-size:12px;letter-spacing:.8px;color:white;background:#17384db3;padding:5px 8px}.project-info{padding-top:16px}.project-client{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;color:var(--muted);font-size:13px;line-height:1.5}.project-title{font-size:19px;line-height:1.5;font-weight:600;letter-spacing:-.04em}.project:nth-child(-n+2) .project-title{font-size:24px}.project-type{font-size:12px;white-space:nowrap}.work-end{margin-top:50px;border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:25px}.work-end p{font-size:15px;color:var(--muted)}.about{background:var(--sky-light);color:var(--ink);padding-top:78px;padding-bottom:42px}.about>.eyebrow{color: var(--text);margin-bottom:34px}.about-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:9vw}.about h2{font-size:clamp(32px,3.5vw,58px);letter-spacing:-.055em;line-height:1.5}.about-copy{max-width:600px}.about-copy .lead{font-size:23px;line-height:1.65;font-weight:500;margin:0 0 27px}.about-copy p{font-size:16px;line-height:1.85;margin-top:17px;color: var(--text)}.about-signature{border-top:1px solid #B5D0DF;margin-top:70px;padding-top:25px;display:flex;justify-content:space-between;gap:20px;font-size:13px;letter-spacing:1px}.service-list{border-top:1px solid var(--ink)}.service-list article{display:grid;grid-template-columns:1fr 1.25fr 160px;align-items:center;gap:24px;padding:31px 0;border-bottom:1px solid var(--line)}.service-list h3{font-size:23px;font-weight:600;letter-spacing:-.04em}.service-list p{font-size:16px;line-height:1.8;color:var(--muted)}.service-type{font-size:12px;letter-spacing:.6px;color:var(--muted);text-align:right}.credentials{display:grid;grid-template-columns:1fr 1fr;gap:10vw;background:#EAF4F9;padding:38px;margin-top:60px}.credentials .eyebrow{color:var(--accent);font-size:12px}.credentials h3{font-size:24px;letter-spacing:-.04em;margin:10px 0 13px}.credentials p:not(.eyebrow){font-size:15px;line-height:1.8;color:var(--muted)}.credentials ul{list-style:none;margin:0;padding:0;align-self:center}.credentials li{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;font-size:15px;border-bottom:1px solid #C5DAE6}.credentials li:last-child{border-bottom:0}.credentials li span:last-child{font-size:13px;color:var(--accent);white-space:nowrap}.clients{padding-top:0;padding-bottom:75px}.clients>.eyebrow{text-align:center;color:var(--muted);margin-bottom:28px}.contact{background:#D5E8F2;color:var(--ink);padding-top:68px;padding-bottom:65px}.contact>.eyebrow{color: var(--text);margin-bottom:24px}.contact-heading{display:flex;justify-content:space-between;gap:30px;align-items:center}.contact h2{font-size:clamp(38px,5.6vw,88px);line-height:1.3;letter-spacing:-.055em}.contact-circle{display:grid;place-items:center;width:clamp(78px,11vw,165px);aspect-ratio:1;border-radius:50%;background:var(--accent);flex-shrink:0;font-size:clamp(45px,5.7vw,86px);transition:background .25s,transform .25s}.contact-circle:hover{background:#B1D5E8;transform:rotate(8deg)}.contact-intro{font-size:17px;line-height:1.8;color: var(--text);margin:26px 0 46px}.contact-details{display:grid;grid-template-columns:1.4fr 1fr .75fr;border-top:1px solid #A7C5D5;padding-top:28px;gap:30px}.contact-details>div{display:flex;flex-direction:column;gap:11px}.contact-label{font-size:12px;color: var(--text);letter-spacing:1px}.contact-details a,.contact-details div>span:last-child:not(.contact-label){font-size:20px;font-weight:500}.contact-details a:hover{text-decoration:underline;text-underline-offset:5px}.contact-email{overflow-wrap:anywhere}.contact a:focus-visible{outline-color:var(--ink)}footer{padding:30px var(--space);display:flex;justify-content:space-between;align-items:center;gap:24px;background:#D5E8F2;color:var(--ink);border-top:1px solid #B4CEDC}footer .brand{font-size:18px}footer .brand-mark{width:14px;height:14px;border-width:4px}footer p{font-size:12px;color: var(--text)}.socials{display:flex;gap:26px;font-size:13px}.socials a:hover{color: var(--accent)}
@media(min-width:1800px){.section,footer,.header{padding-left:max(var(--space),calc((100vw - 1700px)/2));padding-right:max(var(--space),calc((100vw - 1700px)/2))}}
@media(max-width:1050px){.header nav{gap:25px}.hero-location{display:none}.hero{padding-top:45px}.hero-bottom p{font-size:16px}.section-heading>p{max-width:220px;text-align:right}.project{grid-column:span 3}.project-title{font-size:19px}.project:nth-child(-n+2) .project-title{font-size:21px}.project-type{display:none}.about-layout{gap:45px}.about-copy .lead{font-size:20px}.service-list article{grid-template-columns:1fr 1.15fr;gap:18px}.service-type{display:none}.credentials{gap:35px;padding:30px}.contact-details{grid-template-columns:1.4fr 1fr}.contact-details>div:last-child{grid-column:1/-1}.contact-details a{font-size:19px}}
@media(max-width:650px){html{scroll-padding-top:86px}.header{padding-top:21px;padding-bottom:21px;gap:16px}.brand{font-size:17px;gap:5px;letter-spacing:-.8px}.brand-mark{width:13px;height:13px;border-width:4px}.header nav{gap:18px;font-size:13px}.header nav>a:first-child{display:none}.nav-contact{margin:0}.nav-contact span{margin-left:4px}.hero{padding-top:34px;padding-bottom:35px}.hero-topline{margin-bottom:25px}.eyebrow{font-size:12px;letter-spacing:.8px}h1{font-size:clamp(31px,6.85vw,45px);line-height:1.48;letter-spacing:-.055em}.hero-bottom{display:block;margin-top:23px}.hero-bottom p{font-size:14px;line-height:1.9}.hero-bottom .text-link{margin-top:23px;font-size:14px}.mobile-break{display:block}.section{padding-top:55px;padding-bottom:55px}.work{padding-top:18px}.section-heading{margin-bottom:24px;gap:15px}.section-heading>p{display:none}h2{font-size:28px}.portfolio-grid{grid-template-columns:1fr;gap:30px}.project,.project:nth-child(1),.project:nth-child(2){grid-column:auto}.project-info{padding-top:12px}.project-title,.project:nth-child(-n+2) .project-title{font-size:20px}.project-client{font-size:13px}.project-type{display:block;font-size:12px}.play-icon{height:36px;width:36px;bottom:14px;right:14px}.work-end{display:block;margin-top:32px;padding-top:22px}.work-end p{font-size:14px}.work-end .text-link{margin-top:8px;font-size:14px}.about{padding-bottom:30px}.about>.eyebrow{margin-bottom:22px}.about-layout{display:block}.about h2{font-size:33px}.about-copy{margin-top:30px}.about-copy .lead{font-size:19px;line-height:1.8}.about-copy p{font-size:15px;line-height:1.9}.about-signature{margin-top:35px;font-size:11px;letter-spacing:.4px}.service-list article{grid-template-columns:1fr;padding:25px 0;gap:10px}.service-list h3{font-size:22px}.service-list p{grid-column:1;font-size:15px;line-height:1.8}.credentials{grid-template-columns:1fr;padding:24px;gap:22px;margin-top:35px}.credentials h3{font-size:22px}.credentials p:not(.eyebrow){font-size:14px}.credentials li{font-size:14px;line-height:1.6}.clients{padding-top:0;padding-bottom:45px}.contact{padding-top:45px}.contact-heading{gap:14px}.contact h2{font-size:clamp(27px,7.2vw,43px);line-height:1.45}.contact-circle{width:60px;font-size:37px}.contact-intro{font-size:14px;line-height:1.9;margin:24px 0 30px}.contact-details{grid-template-columns:1fr;gap:24px}.contact-details a,.contact-details div>span:last-child:not(.contact-label){font-size:19px}.contact-details>div{gap:7px}.contact-label{font-size:12px}footer{display:grid;grid-template-columns:1fr;gap:22px;padding-top:28px;padding-bottom:28px}footer .brand{font-size:19px}footer p{order:3}.socials{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
.project-title a:hover{color:var(--accent)}.project-outbound{font-size:.8em;color:var(--muted);white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.procurement-highlight{display:flex;align-items:center;gap:24px;margin-top:34px;padding:20px 24px;background:#E4F0F7;border-left:4px solid var(--accent)}.procurement-badge{font-size:14px;font-weight:700;color:var(--accent);white-space:nowrap}.procurement-message{display:flex;flex-direction:column;gap:5px;min-width:0}.procurement-message strong{font-size:16px;line-height:1.6;word-break:keep-all}.procurement-message>span{font-size:13px;line-height:1.7;color: var(--text)}.procurement-more{margin-left:auto;font-size:14px;white-space:nowrap}.procurement-highlight:hover .procurement-more{color:var(--accent)}.public-contract{display:grid;grid-template-columns:1.2fr 1fr;gap:35px 48px;margin-top:60px;padding:48px;background:#E4F0F7;border-top:4px solid var(--accent)}.public-contract .eyebrow{color:var(--accent);font-size:13px}.contract-intro h3{font-size:clamp(27px,2.7vw,42px);font-weight:700;letter-spacing:-.05em;line-height:1.5;margin:12px 0 18px}.contract-intro>p:last-child{font-size:16px;line-height:1.8;color: var(--text)}.contract-amount{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-left:45px;border-left:1px solid #BAD4E3;gap:9px}.contract-amount>span:first-child{font-size:18px;font-weight:600;color:var(--accent)}.contract-amount>strong{font-size:clamp(42px,5vw,78px);line-height:1.25;letter-spacing:-.06em;color:var(--accent)}.contract-amount>strong span{font-size:.43em;letter-spacing:-.04em}.contract-amount>span:nth-of-type(2){font-size:16px;line-height:1.7}.contract-amount>p{font-size:14px;line-height:1.7;color: var(--text)}.contract-benefits{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;border-top:1px solid #BAD4E3;padding-top:30px}.contract-benefits h4{font-size:21px;font-weight:700;letter-spacing:-.04em;margin:10px 0 12px;line-height:1.5}.contract-benefits p{font-size:16px;line-height:1.8;color: var(--text)}.contract-documents{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 24px;padding:20px 0;border-top:1px solid #BAD4E3;border-bottom:1px solid #BAD4E3;font-size:14px;font-weight:600;line-height:1.7}.contract-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:35px}.contract-conditions{font-size:14px;line-height:1.8;max-width:670px;color: var(--text)}.contract-sources{grid-column:1/-1;font-size:12px;line-height:1.8;color: var(--text);margin-top:-14px}.contract-sources a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:1050px){.procurement-highlight{gap:18px}.procurement-more{display:none}.public-contract{padding:32px;gap:28px}.contract-amount{padding-left:28px}.contract-benefits{gap:24px}.contract-benefits h4{font-size:19px}.contract-bottom{display:block}.contract-bottom .text-link{margin-top:15px}}
@media(max-width:650px){.procurement-highlight{display:block;padding:17px 18px;margin-top:26px}.procurement-badge{display:block;margin-bottom:7px}.procurement-message strong{font-size:15px}.procurement-message>span{font-size:13px}.public-contract{grid-template-columns:1fr;padding:25px 22px;margin-top:35px;gap:26px}.contract-intro h3{font-size:26px}.contract-intro>p:last-child{font-size:16px}.contract-amount{padding:24px 0 0;border-left:0;border-top:1px solid #BAD4E3}.contract-amount>strong{font-size:58px}.contract-benefits{grid-template-columns:1fr;gap:26px;padding-top:24px}.contract-benefits h4{font-size:22px;margin-bottom:8px}.contract-documents{flex-direction:column;gap:10px;font-size:14px}.contract-conditions{font-size:14px}.contract-sources{margin-top:0}}

/* User-supplied JONJAE identity: sky imagery, original wordmark, navy typography. */
.header{padding-top:17px;padding-bottom:17px}.brand{display:inline-flex;line-height:1;flex-shrink:0}.header nav{font-weight:500}.nav-contact{background:#E4F0F7;padding:12px 18px;border-radius:100px}.hero{padding-top:27px;padding-bottom:48px}.hero-topline{margin-bottom:20px}.hero-identity{height:clamp(270px,31vw,520px);border-radius:24px;overflow:hidden;background:#C0DBEA}.hero-identity picture,.hero-identity img{display:block;width:100%;height:100%}.hero-identity img{object-fit:cover;object-position:center}.hero-story{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:center;margin-top:34px}h1{font-size:clamp(35px,3.75vw,64px);font-weight:600;line-height:1.55;letter-spacing:-.05em}.being,.period{color:var(--accent)}.hero-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:0}.hero-bottom p{font-size:16px;line-height:1.95}.hero-bottom .text-link{padding-top:6px}.procurement-highlight{border:1px solid #CFDFE9;border-left:4px solid #92C4DE;border-radius:12px;background:#EAF4F9}.procurement-badge{background:#D1E6F1;padding:8px 12px;border-radius:8px}.section-heading h2{font-weight:600}.project-visual{border-radius:14px}.about{background:linear-gradient(115deg,#E5F0F7 0%,#C4DFED 100%)}.about h2{font-weight:500}.about-copy p{line-height:1.95}.about-signature{color: var(--text)}.service-list{border-top-color:#AECBDC}.service-list h3{font-weight:500}.public-contract{background:#E5F1F8;border-top:4px solid #92C4DE;border-radius:18px;gap:35px 48px}.contract-amount{background:#C4DFED;border:0;padding:28px 35px;border-radius:14px}.contract-amount>strong{color: var(--accent)}.contract-documents{color: var(--accent)}.contact{background-color:#C5DFEC;background-image:linear-gradient(90deg,rgba(229,242,248,.95),rgba(202,225,238,.68)),url('/assets/jonjae-sky-banner.png');background-size:cover,320% auto;background-position:center,right center;background-repeat:no-repeat}.contact h2{font-weight:500}.contact-circle{background:#B9DBEC;color:var(--ink);border:1px solid #9DC6DD}.contact-circle:hover{background:#A7D0E5;transform:rotate(8deg)}.contact-details{border-top-color:#AECBDC}.contact-label{color: var(--text)}footer{background:#E3EFF6;color:var(--ink);border-top-color:#C4DAE6}footer .brand{font-size:initial}.socials{color: var(--text)}
@media(max-width:1050px){.hero-story{grid-template-columns:1fr;gap:18px}.hero-bottom{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:30px}.hero-bottom p{font-size:16px}h1{font-size:clamp(35px,4.6vw,48px)}.contract-amount{padding:26px}.public-contract{gap:28px}}
@media(max-width:650px){.header{padding-top:14px;padding-bottom:14px;gap:12px}.header nav{gap:14px;font-size:13px}.nav-contact{padding:10px 12px}.hero{padding-top:22px;padding-bottom:36px}.hero-topline{margin-bottom:16px}.hero-identity{height:270px;border-radius:16px}.hero-story{margin-top:23px;gap:18px}h1{font-size:clamp(28px,6.8vw,40px);line-height:1.6;font-weight:600}.hero-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:15px}.hero-bottom p{font-size:16px;line-height:1.95}.hero-bottom .text-link{margin-top:0;font-size:14px}.procurement-highlight{margin-top:24px}.procurement-badge{display:inline-block;font-size:14px;margin-bottom:10px}.procurement-message strong{font-size:15px}.project-visual{border-radius:10px}.about-copy p{font-size:16px}.about h2{font-size:31px}.service-list p{font-size:16px}.public-contract{gap:25px;border-radius:14px}.contract-amount{padding:22px;border:0}.contract-amount>strong{font-size:52px}.contact{background-size:cover,auto 150%;background-position:center,right center}.contact-intro{font-size:16px}.contact h2{font-size:clamp(26px,7vw,40px)}.contact-circle{width:56px;font-size:34px}}

/* Refinement: crop only the banner's vertical edges and clarify procurement text. */
.hero-identity {
  --banner-original-height: clamp(270px,31vw,520px);
  position: relative;
  height: calc(var(--banner-original-height) * .88);
}
.hero-identity picture {
  position: absolute;
  inset: 50% 0 auto;
  height: var(--banner-original-height);
  transform: translateY(-50%);
}
.hero-identity img { width: 100%; height: 100%; }
.public-contract {
  background: #F4F9FC;
  color: var(--ink);
  border: 1px solid #C8DFEC;
  border-top: 4px solid #92C4DE;
}
.public-contract .eyebrow { color: var(--accent); font-weight: 700; font-size: 14px; }
.contract-intro h3, .contract-benefits h4 { color: var(--ink); }
.contract-intro > p:last-child, .contract-benefits p {
  color: var(--text);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.95;
}
.contract-amount { background: #D4E8F3; border: 1px solid #B8D6E7; }
.contract-amount > strong { color: var(--ink); }
.contract-amount > span:first-child { color: var(--accent); font-weight: 700; }
.contract-amount > span:nth-of-type(2) { color: var(--text); font-weight: 500; }
.contract-amount > p { color: var(--text); font-size: 15px; line-height: 1.8; }
.contract-benefits { border-top-color: #C2D9E7; gap: 28px; }
.contract-benefits article + article { border-left: 1px solid #C2D9E7; padding-left: 28px; }
.contract-benefits h4 { margin-bottom: 14px; }
.contract-documents { color: var(--ink); font-size: 15px; border-color: #C2D9E7; }
.contract-conditions { color: var(--text); font-size: 15px; line-height: 1.9; }
.contract-sources { color: var(--text); font-size: 14px; }
.contract-sources a { color: var(--accent); }
.contract-bottom .text-link { color: var(--ink); font-weight: 700; }
@media(max-width:1050px) {
  .contract-benefits { gap: 22px; }
  .contract-benefits article + article { padding-left: 22px; }
}
@media(max-width:650px) {
  .hero-identity { --banner-original-height: 270px; }
  .contract-intro > p:last-child, .contract-benefits p { font-size: 16px; }
  .contract-benefits { gap: 24px; }
  .contract-benefits article + article { border-left: 0; border-top: 1px solid #C2D9E7; padding: 22px 0 0; }
  .contract-amount { border: 1px solid #B8D6E7; }
  .contract-documents { font-size: 14px; }
}

/* Portfolio-to-client flow and prominent official social channels. */
.clients { padding-top: 12px; padding-bottom: 70px; }
footer { display: block; padding-top: 44px; padding-bottom: 28px; }
.footer-social { display: flex; justify-content: space-between; align-items: center; gap: 42px; padding-bottom: 36px; border-bottom: 1px solid #BAD2E0; }
.footer-social-copy { max-width: 500px; }
.footer-social-copy .eyebrow { color: var(--text); font-size: 13px; }
.footer-social-copy h2 { color: var(--ink); font-size: clamp(24px,2.1vw,34px); line-height: 1.55; font-weight: 600; margin: 10px 0 12px; }
.footer-social-copy > p:last-child { font-size: 16px; color: var(--text); line-height: 1.8; }
.socials { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; flex-shrink: 0; }
.socials .social-button { display: flex; align-items: center; gap: 15px; min-width: 232px; min-height: 94px; padding: 20px 22px; border: 1px solid #B5CFDF; border-radius: 13px; background: #F8FCFE; color: var(--ink); transition: background .2s,border-color .2s,transform .2s; }
.socials .social-button:hover { background: #D1E7F2; border-color: #739FB7; color: var(--ink); transform: translateY(-2px); }
.socials .social-button:focus-visible { outline: 3px solid #2D607B; outline-offset: 4px; }
.social-icon { width: 29px; height: 29px; flex-shrink: 0; }
.social-label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.social-label strong { font-size: 21px; font-weight: 700; line-height: 1.25; }
.social-label > span { font-size: 13px; color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
.social-arrow { font-size: 25px; margin-left: auto; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 28px; }
.footer-bottom > p { font-size: 12px; color: var(--text); }
@media(max-width:1050px) {
  .footer-social { flex-direction: column; align-items: stretch; gap: 26px; }
  .footer-social-copy { max-width: none; }
  .socials { width: 100%; }
  .socials .social-button { min-width: 0; }
}
@media(max-width:650px) {
  .clients { padding-top: 0; padding-bottom: 45px; }
  footer { padding-top: 34px; padding-bottom: 24px; }
  .footer-social { gap: 23px; padding-bottom: 28px; }
  .footer-social-copy h2 { font-size: 25px; }
  .footer-social-copy > p:last-child { font-size: 15px; }
  .socials { grid-template-columns: 1fr; gap: 13px; }
  .socials .social-button { min-height: 84px; padding: 18px 20px; gap: 17px; }
  .social-label strong { font-size: 21px; }
  .social-label > span { font-size: 14px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; padding-top: 25px; gap: 20px; }
}

/* Black wordmark: regular STUDIO, bold JONJAE with the original open A. */
.brand-wordmark { display: flex; align-items: center; width: 196px; height: 46px; }
.brand-wordmark img { display: block; width: 100%; height: auto; }
footer .brand-wordmark { width: 220px; height: 48px; }
@media (max-width:650px) {
  .header .brand-wordmark { width: clamp(128px,38vw,154px); height: 38px; }
  footer .brand-wordmark { width: 200px; height: 44px; }
}

/* A firmer reading weight within the existing sky-blue identity. */
:root { --ink: #000000; }
body { font-weight: 500; }
.header nav, .about-copy .lead, .service-list h3,
.contact-details a, .contact-details div > span:last-child:not(.contact-label) { font-weight: 600; }
.hero h1, .section-heading h2, .project-title, .footer-social-copy h2 { font-weight: 700; }
.about h2, .contact h2 { font-weight: 600; }
.hero-bottom p, .about-copy p, .service-list p, .contact-intro { font-weight: 500; }
.hero h1, .section-heading h2, .project-title, .about h2,
.service-list h3, .contact h2, .footer-social-copy h2 { color: var(--ink); }
.brand-wordmark img { filter: drop-shadow(.15px 0 0 #000) drop-shadow(-.15px 0 0 #000); }

/* Every client uses its verified official asset. The grid grows with the list. */
.client-logos { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1320px; margin: 0 auto; padding: 20px; list-style: none; background: #fff; border: 1px solid #DCE8EF; border-radius: 18px; }
.client-logo { display: flex; align-items: center; justify-content: center; flex: 0 0 25%; min-width: 0; height: 152px; padding: 20px; }
.client-logo img { display: block; width: var(--logo-width,260px); max-width: 100%; max-height: var(--logo-height,84px); height: auto; object-fit: contain; }
.client-logo-hwacheon-jahwal, .client-logo-seoul-frc { padding: 6px; }
@media(max-width:1050px) {
  .client-logo { flex-basis: 33.333333%; }
}
@media(max-width:650px) {
  .client-logos { padding: 10px; border-radius: 14px; }
  .client-logo { flex-basis: 50%; height: 116px; padding: 16px; }
  .client-logo img { max-height: 74px; }
  .client-logo-hwacheon-jahwal img, .client-logo-seoul-frc img { max-height: 100px; }
}

/* Locally hosted YouTube thumbnails open the full video directly. */
.project-visual.project-link { display: block; position: relative; isolation: isolate; }
.project-visual.project-link img { width: 100%; height: 100%; object-fit: cover; }
.project-visual.project-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.project-visual .play-icon { width: 48px; height: 48px; z-index: 1; }
.project-visual .play-icon svg { width: 18px; height: 18px; }
.video-cta { opacity: 0; transition: opacity .18s; pointer-events: none; position: absolute; left: 16px; bottom: 18px; padding: 9px 12px; border-radius: 7px; background: rgba(255,255,255,.96); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.4; box-shadow: 0 2px 12px #0002; }
.project-link:hover .video-cta, .project-link:focus-visible .video-cta { opacity: 1; }
.project-link:focus-visible .play-icon { background: var(--accent); color: #fff; }
@media(max-width:650px) {
  .project-visual .play-icon { width: 42px; height: 42px; }
  .video-cta { left: 14px; bottom: 14px; padding: 8px 10px; }
}

/* Pure-white canvas with the studio sky blue reserved for identity and accents. */
body, .about, footer { background: #FFFFFF; }
.footer-credits { margin-top: 22px; }
.footer-credits p { font-size: 14px; line-height: 1.8; color: #414B52; }
.footer-credits a { text-decoration: underline; text-underline-offset: 3px; }