/* Materials and light: the visual language of the actual bathrooms. */
:root{--paper:#f7f6f3;--white:#fff;--ink:#333330;--muted:#77766f;--olive:#6e685f;--line:#dddad3;--sage:#eeece6;--dark:#353531}
::selection{background:#ded9cf}
h1,h2,h3{font-weight:450;letter-spacing:-.045em}
h2{font-size:clamp(29px,3.15vw,45px);line-height:1.4}
.wrap{max-width:1400px;width:calc(100% - 112px)}
.section-space{padding-block:98px}
.eyebrow{font-weight:450;letter-spacing:.015em;font-size:12px;color:#78776e;margin-bottom:22px}
.site-header{background:#f7f6f3ee;backdrop-filter:blur(14px)}
.header-inner{height:91px;max-width:1560px}
.header-contact{background:transparent;border:1px solid #aaa69c;color:var(--ink);border-radius:0;padding:10px 18px;gap:25px}
.header-contact:hover{background:#e8e5dd}
.reading-progress{height:1px;background:#aaa191}
.studio-hero{padding:52px 0 0}
.studio-heading{display:grid;grid-template-columns:1.35fr 1fr;align-items:end;gap:60px;margin-bottom:46px}
.studio-heading .eyebrow{margin-bottom:24px}
.studio-heading h1{font-size:clamp(40px,4.5vw,68px);font-weight:420;line-height:1.23;letter-spacing:-.06em;animation:hero-in .9s var(--ease) both}
.studio-heading h1 span{color:#8a867c}
.studio-intro{justify-self:end;padding-bottom:3px}
.studio-intro>p{font-size:14px;line-height:1.9;color:#737169}
.studio-intro>.text-link{margin-top:20px;font-size:12px;gap:38px}
.studio-images{display:grid;grid-template-columns:1.15fr 1fr;gap:20px}
.studio-image{display:block;min-width:0;text-align:left;padding:0;width:100%}
.studio-image>div{overflow:hidden;height:clamp(410px,43vw,620px);background:#d8d5cd}
.studio-image img{height:100%;width:100%;object-position:center 61%;transition:transform 1.2s var(--ease);animation:photo-scale 1.4s var(--ease) both}
.studio-image:last-child img{object-position:center 63%}
.studio-image:hover img{transform:scale(1.018)}
.studio-caption{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:17px;font-size:13px;font-weight:450}
.studio-caption>span:last-child{font-size:21px;color:#8a867c;font-weight:300}
.studio-caption small{font-size:11px;margin-left:20px;font-weight:400;color:#878278}
.studio-foot{display:flex;align-items:center;gap:36px;margin-top:31px;border-top:1px solid var(--line);padding:19px 0;font-size:11px;color:#77746b}
.studio-foot>a:last-child{margin-left:auto;display:flex;align-items:center;gap:32px;color:#57564f}
.studio-foot>a:nth-child(2){letter-spacing:.04em;color:#57564f}
.portfolio{background:var(--paper)}
.section-heading{margin-bottom:36px;align-items:flex-end}
.section-heading .eyebrow{margin-bottom:18px}
.section-heading h2{font-weight:450}
.section-aside{color:#77746b;font-size:13px}
.small-count{border:0;padding:0;margin-left:18px;color:#9a9489;font-size:11px;letter-spacing:0;font-weight:400}
.portfolio-toolbar{border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:25px}
.filter-list{gap:20px;padding:0;overflow:visible}
.filter,.filter.active{background:transparent;border-radius:0;color:#8c887d;padding:7px 0;min-height:44px;font-size:12px;border-bottom:1px solid transparent}
.filter.active{color:#333330;border-bottom-color:#55524b}
.filter:hover{background:transparent;color:#333330}
.filter span{font-size:9px;margin-left:8px}
.circle-button{border-radius:0;border-color:#d8d3c9;height:40px;width:40px;font-size:20px}
.circle-button:hover{background:#e8e5dd}
.project-image{border-radius:0;aspect-ratio:3/4}
.project-image .image-number{display:none}
.project-image .image-open{border-radius:0;width:32px;height:32px;background:#f7f6f3e8;bottom:14px;right:14px;font-size:19px}
.project-image:after{display:none}
.project-card-button:hover img{transform:scale(1.02)}
.project-card-button:hover .image-open{transform:translate(2px,-2px)}
.project-meta{font-size:11px;color:#8a857b;margin-top:19px}
.project-card h3{font-size:20px;font-weight:450}
.project-card .project-subtitle{font-size:12px;color:#8a857b;margin-top:9px}
.portfolio-bottom{border-color:var(--line);font-size:11px;color:#77746b;padding-top:20px}
.text-link{font-size:12px;font-weight:400}
.text-link:after{bottom:5px;opacity:.4}
.transformation{border-top:1px solid var(--line);gap:90px}
.comparison-project{border-color:var(--line)}
.comparison-project>span{font-size:9px;color:#928b80}
.comparison-project h3{font-size:18px;font-weight:450}
.compare-controls{gap:18px;margin-bottom:19px}
.compare-mode{font-size:11px;border:0;border-bottom:1px solid transparent;border-radius:0;padding:8px 0;color:#8b857a}
.compare-mode[aria-pressed=true]{background:transparent;color:#333330;border-color:#55524b}
.compare,.compare.side-by-side{border-radius:0;background:#e6e2d9}
.compare-label{border-radius:0;font-size:9px;background:#f7f6f3db}
.compare-line span{background:#f7f6f3;color:#55524b;box-shadow:none}
#comparison-help{color:#77746b}
.difference{background:#ebe8e1}
.difference-layout{gap:85px}
.detail-image>div{left:28px;bottom:27px}
.detail-image:after{background:linear-gradient(transparent,#34332aab)}
.detail-image span{font-size:11px;letter-spacing:.02em}
.detail-image strong{font-size:27px;font-weight:350}
.difference-list article{border-color:#cec9bf;gap:24px}
.difference-list h3{font-size:22px;font-weight:450}
.difference-list p{color:#787266;font-size:14px}
.difference-list article>span{color:#948b7c}
.process{background:var(--dark);color:#f2efe8}
.process .eyebrow{color:#aaa598}
.process .section-aside{color:#b1ada3}
.process-photo{height:440px}
.process-photo img{filter:none}
.process-photo:after{background:linear-gradient(transparent,#34332aaa)}
.process-step,.process-step:last-child{border-color:#68655b}
.process-step h3{font-weight:400}
.process-step summary>span,.process-step i{color:#a7a18f}
.process-step p{color:#b7b1a2;font-size:13px}
.schedule-note{border-color:#68655b}
.schedule-note>span{font-size:11px;letter-spacing:0;color:#b5aea0}
.journal .section-heading h2{font-size:34px}
.journal-row:hover{background:#efede6}
.journal-tag{color:#877866;font-size:11px}
.journal-row h3{font-weight:450;font-size:20px}
.journal-arrow{border:0;border-radius:0;font-size:24px}
.faq{background:#f0eeea}
.faq-title h2{font-size:34px;line-height:1.5}
.faq-list details,.faq-list details:last-child{border-color:#d4cfc5}
.faq-list p{color:#777065}
.contact-heading h2{font-size:clamp(36px,4.3vw,61px);font-weight:400}
.contact-heading>p:last-child{color:#77746b}
.contact-label{font-size:11px;letter-spacing:.02em}
.phone-number{font-weight:350}
.phone-number span{color:#827565}
.button{border-radius:0}
.button.primary{background:#625e55;color:white}
.button.primary:hover{background:#49473f}
.button.outline{border-color:#b5ada0}
.button.outline:hover{background:#e9e5dc}
.consultation{background:transparent;border:0;border-left:1px solid var(--line);border-radius:0;padding:0 0 0 44px}
.consultation-kicker{font-weight:450}
.naver-n{border-radius:0;background:#e4e2d9;color:#5e6652}
.naver-talk{border-color:var(--line)}
.choice-list span{border-radius:0;border-color:#d2ccbf}
.choice-list input:checked+span{background:#e7e2d8;border-color:#827565;color:#49473f}
form label,form legend{color:#6b665b}
input:not([type=range]):not([type=radio]),textarea{border-color:#c5beb0}
.form-note{color:#7c7468;text-align:left}
.form-feedback{color:#6e685f}
footer{background:#e9e6de}
.footer-top{border-color:#cfc9bd}
.footer-top>p{letter-spacing:0;font-size:12px;color:#878073}
.footer-bottom,.footer-bottom button{color:#7b7467}
.mobile-contact-bar{background:#f7f6f3f2;border-color:#d7d0c3}
.mobile-contact-bar a{border-radius:0;background:#625e55}
.mobile-contact-bar a:last-child{background:#e6e1d6;color:#49473f}
dialog{border-radius:0}
dialog::backdrop{background:#24221ddd}
.gallery-main,.gallery-main>img{background:#e6e1d7}
.gallery-arrow{background:#f7f6f3eb;box-shadow:none}
.gallery-thumb,.project-tags span{border-radius:0}
.project-tags span{background:#eae6dd;color:#6c6254}
.project-dialog-copy h2{font-weight:450}
.project-dialog-copy>p:not(.eyebrow){color:#777065}
.toast{border-radius:0;background:#47443c}
.js-motion .reveal{transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-motion .reveal.visible{transform:none}
@media(max-width:1150px){.wrap{width:calc(100% - 70px)}.studio-hero{padding-top:38px}.studio-heading{gap:35px}.studio-heading h1{font-size:53px}.studio-images{gap:17px}.studio-image>div{height:480px}.studio-caption small{display:block;margin:4px 0 0}.section-space{padding-block:82px}}
@media(max-width:900px){.studio-heading{grid-template-columns:1.2fr 1fr;gap:30px}.studio-heading h1{font-size:44px}.studio-intro>p{font-size:12px}.studio-images{gap:14px;grid-template-columns:1fr 1fr}.studio-image>div{height:420px}.studio-foot{gap:20px;font-size:10px}.studio-foot>a:last-child{gap:15px}.studio-foot>a:last-child span{display:none}.filter-list{gap:18px}.filter{font-size:11px}.transformation{gap:40px}.difference-layout{gap:40px}.faq-title h2{font-size:28px}.consultation{padding-left:27px}.mobile-menu:not([hidden]){background:var(--paper)}.section-aside{font-size:12px}}
@media(max-width:640px){
 .wrap{width:calc(100% - 40px)}.header-inner{height:71px}.header-contact{padding:9px 12px;gap:11px;font-size:10px}.site-header{border-bottom-color:#e4dfd5}
 .studio-hero{padding-top:33px}.studio-heading{display:block;margin-bottom:28px}.studio-heading .eyebrow{font-size:10px;margin-bottom:20px}.studio-heading h1{font-size:clamp(35px,10.2vw,57px);font-weight:410;line-height:1.28;letter-spacing:-.06em}.studio-intro{margin-top:24px}.studio-intro>p{font-size:13px;line-height:1.9}.studio-intro>.text-link{font-size:12px;margin-top:14px;gap:29px}
 .studio-images{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:88%;gap:13px;margin-right:-20px;padding-right:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.studio-images::-webkit-scrollbar{display:none}.studio-image{scroll-snap-align:start}.studio-image>div{height:auto;aspect-ratio:3/4}.studio-image img{object-position:center}.studio-image:last-child img{object-position:center}.studio-caption{margin-top:13px;font-size:12px}.studio-caption small{display:block;margin-top:5px;font-size:11px}.studio-caption>span:last-child{font-size:19px}
 .studio-foot{margin-top:24px;padding:15px 0;flex-wrap:wrap;gap:10px 18px;font-size:10px}.studio-foot>p{flex:1;white-space:nowrap}.studio-foot>a:last-child{display:none}.studio-foot>a:nth-child(2){font-size:11px}
 .section-space{padding-block:58px}.section-heading h2{font-size:29px;line-height:1.4}.section-heading .eyebrow{font-size:11px;margin-bottom:17px}.section-aside{font-size:13px;margin-top:18px}.small-count{font-size:10px;margin-left:10px}.portfolio-toolbar{padding-bottom:7px;margin-bottom:21px}.filter-list{gap:20px;overflow-x:auto;margin:0;padding:0}.filter{font-size:11px;min-height:44px;padding-inline:0}.filter span{margin-left:5px}.project-card h3{font-size:19px}.project-meta{font-size:10px;margin-top:16px}.project-card .project-subtitle{font-size:11px}.project-image{aspect-ratio:3/4}.portfolio-track.expanded .project-card h3{font-size:16px}.portfolio-track.expanded .project-meta{font-size:10px}.project-image .image-open{width:29px;height:29px;bottom:11px;right:11px;font-size:17px}.portfolio-bottom{font-size:11px;gap:12px}.portfolio-bottom .text-link{font-size:11px}.transformation{gap:28px}.transformation h2{font-size:30px}.eyebrow{font-size:11px;letter-spacing:0}.compare-mode{font-size:12px}.compare-controls{gap:20px}.difference-layout{gap:26px}.difference-list h3{font-size:21px}.difference-list p{font-size:14px}.difference-list article{gap:21px}.detail-image strong{font-size:24px}.process-photo{height:330px}.process-step h3{font-size:18px}.process-step p{font-size:14px}.schedule-note>span{font-size:10px}.journal .section-heading h2{font-size:28px}.journal-row h3{font-size:17px}.journal-arrow{width:30px}.journal-tag{font-size:10px}.faq-title h2{font-size:29px}.faq-list p{font-size:14px}.contact-heading h2{font-size:36px;line-height:1.4}.contact-heading>p:last-child{font-size:13px}.contact-layout{margin-top:32px}.consultation{border-left:0;border-top:1px solid var(--line);padding:28px 0 0;margin-top:28px}.phone-number{font-size:36px}.form-note{font-size:11px;text-align:left}.footer-top>p{font-size:11px;letter-spacing:0}.footer-bottom{font-size:11px}.mobile-contact-bar a{font-size:13px}.project-dialog-copy>p:not(.eyebrow){font-size:14px}
}
@media(max-width:360px){.studio-heading h1{font-size:33px}.studio-intro>p{font-size:12px}.header-contact{font-size:9px;padding-inline:10px}.studio-foot{font-size:9px}.studio-foot>a:nth-child(2){font-size:10px}.filter-list{gap:17px}.filter{font-size:10px}.contact-heading h2{font-size:32px}.phone-number{font-size:31px}}
/* Quiet typography still needs readable contrast and comfortable controls. */
.studio-heading{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.header-contact{min-height:44px}
.circle-button{width:44px;height:44px}
.eyebrow,.studio-caption small,.project-meta,.project-card .project-subtitle,.filter,.small-count,.section-aside{color:#6e6a61}
.difference-list p,.faq-list p,.footer-bottom,.footer-bottom button,.footer-top>p{color:#696358}
.project-image{background:#ddd9d1}
.gallery-thumb span,#gallery-counter{background:#34332ac9;border-radius:0}
@media(max-width:760px) and (min-width:641px){.studio-heading{display:block}.studio-intro{margin-top:24px}.studio-heading h1{font-size:48px}.studio-intro>p{font-size:14px}}
@media(max-width:640px){.studio-caption small,.project-meta,.project-card .project-subtitle,.filter{font-size:12px}.dialog-top .circle-button{width:44px;height:44px}}
@media print{.studio-heading h1{font-size:36px}.studio-images{display:grid;grid-template-columns:1fr 1fr}.studio-image>div{height:320px}.studio-hero{padding:20px 0}.studio-foot{display:none}}