@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;600&display=swap");

:root{
  --ink: #23241f;
  --ink-soft: #4a4c43;
  --paper: #f2efe6;
  --paper-deep: #e8e3d3;
  --sage: #7b8567;
  --sage-deep: #4f5940;
  --blueprint: #2c4257;
  --blueprint-light: #3d5a73;
  --line: #d3ccb8;
  --line-strong: #b9b19a;
  --white: #fffdf8;

  /* Typography system: Korean/body/headings = Pretendard, technical labels = IBM Plex Mono */
  --sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --display: var(--sans);
  --body: var(--sans);
  --mono: "IBM Plex Mono", "Pretendard Variable", "Pretendard", "Noto Sans KR", sans-serif;
}

/* ---------- Reset / Base ---------- */

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html{
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body{
  margin: 0;
  padding: 0;
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.68;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-x: hidden;
}

main{
  margin: 0;
  padding: 0;
}

img{
  max-width: 100%;
  display: block;
}

a{
  color: inherit;
  text-decoration: none;
}

ul{
  list-style: none;
}

button{
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 640px){
  .wrap{
    padding: 0 20px;
  }
}

.eyebrow{
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage-deep);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.eyebrow::before{
  content: '';
  width: 24px;
  height: 2px;
  background: var(--sage-deep);
  display: inline-block;
}

h1,
h2,
h3{
  font-family: var(--display);
  font-weight: 650;
  letter-spacing: -0.03em;
  word-break: keep-all;
}

/* ---------- Header ---------- */

.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(242,239,230,0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(35,36,31,0.035);
}

.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 108px;
}

.logo{
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-img{
  height: 88px;
  width: auto;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}

.logo-text{
  display: flex;
  flex-direction: column;
  font-family: var(--display);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.1;
}

.logo-text small{
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-top: 4px;
}

.nav-links{
  display: flex;
  gap: 40px;
  font-size: 15px;
  font-weight: 500;
}

.nav-links a{
  position: relative;
  padding: 4px 0;
  color: var(--ink-soft);
  transition: color .2s;
}

.nav-links a:hover{
  color: var(--ink);
}

.nav-links a::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--sage-deep);
  transition: width .25s ease;
}

.nav-links a:hover::after{
  width: 100%;
}

.nav-cta{
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border: 1px solid var(--ink);
  border-radius: 100px;
  transition: background .2s, color .2s;
  white-space: nowrap;
}

.nav-cta:hover{
  background: var(--ink);
  color: var(--paper);
}

@media (max-width: 860px){
  .nav-links{
    display: none;
  }
}


/* ---------- Sticky site navigation refinement ---------- */
.site-header{
  --site-header-height:108px;
  width:100%;
  isolation:isolate;
  transition:
    background-color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.site-header .nav,
.site-header .logo-img,
.site-header .logo-text,
.site-header .logo-text small,
.site-header .nav-links,
.site-header .nav-cta{
  transition:
    height .32s cubic-bezier(.22,.61,.36,1),
    width .32s cubic-bezier(.22,.61,.36,1),
    padding .32s cubic-bezier(.22,.61,.36,1),
    gap .32s cubic-bezier(.22,.61,.36,1),
    font-size .32s cubic-bezier(.22,.61,.36,1),
    margin .32s cubic-bezier(.22,.61,.36,1),
    background-color .3s ease,
    color .3s ease,
    border-color .3s ease,
    opacity .3s ease;
}

/* The header stays visible, but gives more of the viewport back to the project imagery. */
.site-header.is-scrolled{
  --site-header-height:76px;
  background:rgba(242,239,230,.93);
  border-bottom-color:rgba(185,177,154,.78);
  box-shadow:0 8px 24px rgba(35,36,31,.055);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);
  backdrop-filter:blur(14px) saturate(1.05);
}

.site-header.is-scrolled .nav{
  height:76px;
}

.site-header.is-scrolled .logo{
  gap:11px;
}

.site-header.is-scrolled .logo-img{
  height:58px;
}

.site-header.is-scrolled .logo-text{
  font-size:20px;
}

.site-header.is-scrolled .logo-text small{
  margin-top:3px;
  font-size:9px;
}

.site-header.is-scrolled .nav-links{
  gap:34px;
  font-size:14px;
}

.site-header.is-scrolled .nav-cta{
  padding:9px 18px;
  font-size:13px;
}

/* Keep the current section legible in a long one-page site. */
.nav-links a.is-active,
.nav-links a[aria-current="location"]{
  color:var(--ink);
}

.nav-links a.is-active::after,
.nav-links a[aria-current="location"]::after{
  width:100%;
}

.nav-links a:focus-visible,
.logo:focus-visible,
.nav-cta:focus-visible{
  outline:2px solid var(--sage-deep);
  outline-offset:5px;
}

/* Anchor destinations should settle below the compact sticky header. */
#services,
#portfolio,
#process,
#company,
#contact{
  scroll-margin-top:94px;
}

@media (max-width:860px){
  .site-header,
  .site-header.is-scrolled{
    --site-header-height:68px;
  }

  .site-header .nav,
  .site-header.is-scrolled .nav{
    height:68px;
  }

  .site-header .logo-img,
  .site-header.is-scrolled .logo-img{
    width:50px;
    height:50px;
  }

  .site-header .logo-text,
  .site-header.is-scrolled .logo-text{
    font-size:16px;
  }

  .site-header .logo-text small,
  .site-header.is-scrolled .logo-text small{
    font-size:7.5px;
  }

  .site-header .nav-cta,
  .site-header.is-scrolled .nav-cta{
    padding:8px 12px;
    font-size:11.5px;
  }

  #services,
  #portfolio,
  #process,
  #company,
  #contact{
    scroll-margin-top:82px;
  }
}

@media (prefers-reduced-motion:reduce){
  .site-header,
  .site-header .nav,
  .site-header .logo-img,
  .site-header .logo-text,
  .site-header .logo-text small,
  .site-header .nav-links,
  .site-header .nav-cta{
    transition:none;
  }
}

/* ---------- Hero ---------- */

.hero-full{
  position: relative;
  width: 100%;
  height: 68vh;
  min-height: 500px;
  max-height: 720px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--ink);
}

.hf-track{
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  transition: transform .7s cubic-bezier(.65,0,.35,1);
}

.hf-slide{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.hf-slide::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(35,36,31,0) 55%,
    rgba(35,36,31,0.55) 100%
  );
}

.hf-edge{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 2;
  background: transparent;
}

.hf-edge-l{
  left: 0;
  cursor: w-resize;
}

.hf-edge-r{
  right: 0;
  cursor: e-resize;
}

.hf-overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 3;
  padding: 0 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}

@media (max-width: 640px){
  .hf-overlay{
    padding: 0 20px;
    bottom: 12px;
  }
}

.hf-label{
  max-width: 58%;
  color: var(--white);
  overflow: hidden;
}

.hf-category{
  display: block;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .09em;
  color: rgba(255,253,248,.72);
}

.hf-title{
  display: block;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hf-project{
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(255,253,248,.68);
}

.hf-controls{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.hf-progress{
  width: 130px;
  height: 1px;
  background: rgba(255,253,248,0.28);
  position: relative;
  overflow: hidden;
}

.hf-progress-bar{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--white);
}

.hf-progress-bar.animate{
  animation: hfFill 4.8s linear;
}

@keyframes hfFill{
  from{ width: 0%; }
  to{ width: 100%; }
}

.hf-arrow{
  font-family: var(--display);
  font-size: 22px;
  color: rgba(255,253,248,0.75);
  line-height: 1;
  padding: 2px 4px;
  transition: color .2s;
}

.hf-arrow:hover{
  color: var(--white);
}

/* ---------- Intro copy ---------- */

.intro{
  padding: 110px 0 90px;
}

.intro-wrap{
  max-width: 680px;
}

.intro h1{
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.25;
  margin: 18px 0 24px;
  word-break: keep-all;
}

/* Main message: one strong headline + a quieter service line. */
.intro .intro-title > span{
  display: block;
}

.intro .intro-title .accent{
  margin-top: 12px;
  font-family: var(--body);
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.025em;
  color: var(--sage-deep);
}

.intro h1 span.keep-word{
  display: inline-block;
}

.intro h1 em{
  font-style: normal;
  color: var(--sage-deep);
  border-bottom: 2px solid var(--sage);
}

.intro p{
  font-size: 17px;
  color: var(--ink-soft);
  margin-bottom: 34px;
  max-width: 520px;
  word-break: keep-all;
  line-height: 1.65;
}

.hero-actions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-tags{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.hero-tags .hero-tag{
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  padding: 7px 15px;
  border-radius: 100px;
  background: rgba(255,253,248,0.7);
}

.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  transition: transform .2s ease, background .2s, box-shadow .2s;
}

.btn-primary{
  background: var(--ink);
  color: var(--paper);
}

.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(35,36,31,0.22);
}

.btn-ghost{
  border: 1px solid var(--line-strong);
  color: var(--ink);
}

.btn-ghost:hover{
  border-color: var(--ink);
  background: var(--white);
}

/* ---------- Section shared ---------- */

/*
  hero-full, intro, trust-stats는 각자 별도 여백값을 사용하므로
  공통 section padding 적용 대상에서 제외합니다.
*/
main > section:not(.hero-full):not(.intro):not(.trust-stats){
  padding: 140px 0;
}

.section-head{
  max-width: 680px;
  margin-bottom: 64px;
}

.section-head h2{
  font-size: clamp(28px, 3.4vw, 40px);
  margin-top: 16px;
  margin-bottom: 12px;
}

.section-head p{
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 1.6;
}

/* ---------- Services ---------- */

.services{
  background: var(--paper-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.service-grid{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  overflow: hidden;
}

@media (max-width: 640px){
  .service-grid{
    grid-template-columns: 1fr;
  }
}

.service-item{
  min-height: 230px;
  background: var(--paper);
  padding: 30px 32px;
  transition: background .2s, transform .2s;
}

.service-item:hover{
  background: var(--white);
}

/* Keep the existing 2x2 layout, but make major repair the visual starting point. */
.service-item-major{
  background: rgba(255,253,248,.78);
}

.service-item-major h3{
  color: var(--sage-deep);
}

.service-item svg{
  width: 32px;
  height: 32px;
  color: var(--sage-deep);
  margin-bottom: 20px;
}

.service-item h3{
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  font-family: var(--body);
}

.service-item p{
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 430px;
}

.service-cta{
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background .2s;
}

.service-cta:hover{
  background: #33342c;
}

.service-cta .sc-label{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--sage);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.service-cta h3{
  font-size: 19px;
  font-weight: 600;
  font-family: var(--display);
  margin-bottom: 16px;
  line-height: 1.35;
}

.service-cta .sc-arrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.service-cta .sc-arrow svg{
  width: 16px;
  height: 16px;
  margin: 0;
  transition: transform .2s;
}

.service-cta:hover .sc-arrow svg{
  transform: translateX(4px);
}

/* ---------- Process ---------- */

.process-list{
  display: flex;
  flex-direction: column;
}

.process-item{
  display: grid;
  grid-template-columns: 90px 1fr 1.3fr;
  gap: 28px;
  padding: 38px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}

.process-item:last-child{
  border-bottom: 1px solid var(--line);
}

@media (max-width: 760px){
  .process-item{
    grid-template-columns: 50px 1fr;
  }

  .process-item .process-desc{
    grid-column: 2;
  }
}

.process-num{
  font-family: var(--mono);
  font-size: 28px;
  color: var(--line-strong);
  font-weight: 500;
}

.process-title{
  font-size: 20px;
  font-weight: 600;
  font-family: var(--display);
}

.process-title span{
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--sage-deep);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  font-weight: 500;
}

.process-desc{
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ---------- Blueprint dialogue ---------- */

.dialogue{
  background: var(--ink);
  color: var(--paper);
}

.dialogue .section-head p{
  color: rgba(242,239,230,0.75);
}

.dialogue .eyebrow{
  color: var(--sage);
}

.dialogue .eyebrow::before{
  background: var(--sage);
}

.plan-wrap{
  position: relative;
  background: var(--blueprint);
  border-radius: 18px;
  padding: 40px;
  overflow: hidden;
}

.plan-wrap::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}

.plan-svg{
  position: relative;
  width: 100%;
  height: auto;
  display: block;
}

.pin-group{
  outline: none;
  cursor: pointer;
}

.pin{
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
  transition: r .2s ease, fill .2s ease;
}

.pin-group:hover .pin,
.pin-group:focus .pin{
  r: 12;
}

.pin-group.active .pin{
  fill: var(--sage);
  stroke: var(--white);
  stroke-width: 2;
}

.note-panel{
  position: relative;
  margin-top: 26px;
  background: rgba(242,239,230,0.06);
  border: 1px solid rgba(242,239,230,0.18);
  border-radius: 14px;
  padding: 24px 26px;
  min-height: 110px;
}

.note-tag{
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sage);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.note-line{
  font-size: 15px;
  margin-bottom: 8px;
  display: flex;
  gap: 12px;
}

.note-line b{
  flex-shrink: 0;
  color: var(--sage);
  font-weight: 600;
  min-width: 82px;
}

.note-hint{
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(242,239,230,0.5);
  margin-top: 16px;
}

/* ---------- Portfolio ---------- */

.portfolio-tabs{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.tab{
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  color: var(--ink-soft);
  transition: all .2s;
}

.tab.active,
.tab:hover{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.portfolio-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 900px){
  .portfolio-grid{
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 560px){
  .portfolio-grid{
    grid-template-columns: 1fr;
  }
}

.pf-card{
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .25s ease, box-shadow .25s ease;
}

.pf-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 18px 34px rgba(35,36,31,.12);
}

.pf-card:hover .pf-thumb{
  transform: scale(1.025);
}

.pf-thumb{
  aspect-ratio: 4/3;
  position: relative;
  background-size: cover;
  background-position: center;
  transition: transform .45s ease;
}

.pf-body{
  padding: 20px 22px 24px;
}

.pf-cat{
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--sage-deep);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pf-title{
  font-size: 17px;
  font-weight: 600;
  margin-top: 6px;
  font-family: var(--body);
}

.pf-desc{
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 6px;
  line-height: 1.5;
}


/* 3 x 3 portfolio archive tile */
.pf-card-archive{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}

.pf-card-archive .pf-thumb{
  background:linear-gradient(135deg,#2d2e28,#20211d);
}

.pf-thumb-archive{
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  position:relative;
  overflow:hidden;
}

.pf-thumb-archive::before{
  content:'';
  position:absolute;
  width:190px;
  height:190px;
  right:-54px;
  top:-62px;
  border:1px solid rgba(242,239,230,.14);
  border-radius:50%;
}

.pf-thumb-archive::after{
  content:'';
  position:absolute;
  width:130px;
  height:130px;
  right:24px;
  bottom:-72px;
  border:1px solid rgba(242,239,230,.08);
  border-radius:50%;
}

.pf-archive-kicker{
  position:relative;
  z-index:1;
  margin-bottom:12px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--sage);
}

.pf-thumb-archive strong{
  position:relative;
  z-index:1;
  max-width:210px;
  font-family:var(--display);
  font-size:26px;
  line-height:1.18;
  font-weight:600;
}

.pf-archive-arrow{
  position:absolute;
  right:24px;
  bottom:24px;
  z-index:1;
  font-size:24px;
  transition:transform .25s ease;
}

.pf-card-archive .pf-body{
  background:var(--ink);
}

.pf-card-archive .pf-cat{color:var(--sage);}
.pf-card-archive .pf-title{color:var(--paper);}
.pf-card-archive .pf-desc{color:rgba(242,239,230,.68);}

.pf-card-archive:hover{
  box-shadow:0 18px 34px rgba(35,36,31,.2);
}

.pf-card-archive:hover .pf-thumb{transform:none;}
.pf-card-archive:hover .pf-archive-arrow{transform:translate(3px,-3px);}


/* ---------- Project Archive ---------- */

.project-archive{
  margin-top: 34px;
  min-height: 250px;
  padding: 42px 46px;
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 42px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.project-archive::before{
  content: '';
  position: absolute;
  right: -80px;
  top: -120px;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(242,239,230,.12);
  border-radius: 50%;
  pointer-events: none;
}

.project-archive::after{
  content: '';
  position: absolute;
  right: 50px;
  bottom: -150px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(242,239,230,.08);
  border-radius: 50%;
  pointer-events: none;
}

.project-archive:hover{
  transform: translateY(-4px);
  background: #2d2e28;
  box-shadow: 0 20px 40px rgba(35,36,31,.2);
}

.archive-number{
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-size: clamp(56px,7vw,86px);
  font-weight: 600;
  line-height: 1;
  color: var(--sage);
}

.archive-content{
  position: relative;
  z-index: 1;
  max-width: 620px;
}

.archive-label{
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--sage);
}

.archive-content h3{
  margin-bottom: 12px;
  font-size: clamp(25px,3vw,36px);
  line-height: 1.25;
  color: var(--paper);
}

.archive-content p{
  max-width: 580px;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(242,239,230,.72);
}

.archive-action{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border: 1px solid rgba(242,239,230,.42);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.project-archive:hover .archive-action{
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.archive-action span{
  font-size: 17px;
  transition: transform .2s ease;
}

.project-archive:hover .archive-action span{
  transform: translate(2px,-2px);
}

@media (max-width: 820px){
  .project-archive{
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 36px 30px;
  }

  .archive-number{
    font-size: 64px;
  }

  .archive-action{
    width: max-content;
  }
}

@media (max-width: 560px){
  .project-archive{
    margin-top: 26px;
    padding: 30px 24px;
    min-height: auto;
  }

  .archive-number{
    font-size: 54px;
  }

  .archive-content h3{
    font-size: 28px;
  }

  .archive-action{
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Testimonial ---------- */

.testimonial-section{
  background: var(--paper-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.t-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 900px){
  .t-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .t-grid{
    grid-template-columns: 1fr;
  }
}

.t-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  transition: transform .25s ease, box-shadow .25s ease;
}

.t-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(35,36,31,0.08);
}

.t-quote-mark{
  font-family: var(--display);
  font-size: 44px;
  line-height: 1;
  color: var(--sage);
  margin-bottom: 12px;
}

.t-quote{
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 24px;
}

.t-meta{
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--sage-deep);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

/* ---------- CTA / Contact ---------- */

.cta{
  background: var(--sage-deep);
  color: var(--paper);
  border-radius: 22px;
  padding: 72px 54px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
}

@media (max-width: 860px){
  .cta{
    grid-template-columns: 1fr;
    padding: 44px 30px;
  }
}

.cta h2{
  font-size: clamp(26px,3.2vw,34px);
  margin-bottom: 18px;
}

.cta p{
  opacity: .9;
  font-size: 15.5px;
  margin-bottom: 28px;
  max-width: 440px;
  line-height: 1.6;
}

.cta-info{
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--mono);
  font-size: 14px;
}

.cta-info a{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.form-field{
  margin-bottom: 18px;
}

.form-field label{
  display: block;
  font-size: 13.5px;
  margin-bottom: 8px;
  opacity: .9;
  font-weight: 500;
}

.form-field input,
.form-field select,
.form-field textarea{
  width: 100%;
  padding: 13px 16px;
  border-radius: 8px;
  border: 1px solid rgba(242,239,230,0.3);
  background: rgba(242,239,230,0.08);
  color: var(--paper);
  font-family: var(--body);
  font-size: 14.5px;
}

.form-field input::placeholder,
.form-field textarea::placeholder{
  color: rgba(242,239,230,.5);
}

.form-field select option{
  background: #d8d8d8;
  color: #252525;
}

.form-field textarea{
  resize: vertical;
  min-height: 90px;
}

.cta form .btn-primary{
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

/* ---------- Trust stats ---------- */

.trust-stats{
  padding: 56px 0;
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.stats-grid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  overflow: hidden;
}

.stat-item{
  min-height: 160px;
  padding: 28px 24px;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-kicker{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--sage);
  margin-bottom: 10px;
}

.stat-value{
  font-family: var(--display);
  font-size: 36px;
  line-height: 1;
  margin-bottom: 12px;
}

.stat-title{
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.stat-desc{
  font-size: 13px;
  line-height: 1.6;
  color: rgba(242,239,230,.72);
}

@media (max-width: 900px){
  .stats-grid{
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 520px){
  .stats-grid{
    grid-template-columns: 1fr;
  }
}

/* ---------- Footer ---------- */

footer{
  padding: 64px 0 34px;
  border-top: 1px solid var(--line);
  background: var(--paper-deep);
}

.footer-company{
  display: grid;
  grid-template-columns:
    minmax(270px, .85fr)
    minmax(0, 2.2fr)
    auto;
  gap: 36px;
  align-items: start;
}

.footer-brand{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.footer-brand strong{
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  word-break: keep-all;
}

.footer-brand span{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .08em;
  color: var(--sage-deep);
}

.footer-info{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 38px;
  row-gap: 14px;
  margin: 0;
  font-style: normal;
}

.footer-info > div{
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.footer-label{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--sage-deep);
  white-space: nowrap;
}

.footer-info a{
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition:
    color .2s ease,
    text-decoration-color .2s ease;
}

.footer-info a[href^="tel:"],
.footer-info a[href^="mailto:"]{
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.footer-info a:hover{
  color: var(--ink);
  text-decoration-color: currentColor;
}

.footer-links{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.footer-links a{
  position: relative;
  color: var(--ink-soft);
  transition: color .2s ease;
}

.footer-links a:hover{
  color: var(--ink);
}

.footer-bottom{
  margin-top: 42px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.footer-bottom p{
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* 태블릿 */

@media (max-width: 1100px){
  .footer-company{
    grid-template-columns:
      minmax(220px, .8fr)
      minmax(0, 1.8fr);
    gap: 40px;
  }

  .footer-links{
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 22px;
  }
}

/* 모바일 */

@media (max-width: 720px){
  footer{
    padding: 48px 0 28px;
  }

  .footer-company{
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-brand strong{
    font-size: 19px;
  }

  .footer-info{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .footer-info > div{
    grid-template-columns: 98px minmax(0, 1fr);
    gap: 10px;
    font-size: 13px;
  }

  .footer-links{
    grid-column: auto;
    justify-content: flex-start;
  }

  .footer-bottom{
    margin-top: 30px;
  }
}

@media (max-width: 420px){
  .footer-info > div{
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .footer-label{
    margin-bottom: 2px;
  }

  .footer-info a[href^="mailto:"]{
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ---------- Reveal animation ---------- */

.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.in{
  opacity: 1;
  transform: none;
}

/* ---------- Contact form: FormSubmit / Privacy ---------- */

.contact-form{
  min-width: 0;
}

.form-honeypot{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline: none;
  border-color: rgba(242,239,230,.8);
  box-shadow: 0 0 0 3px rgba(242,239,230,.12);
}

.privacy-box{
  margin-top: 4px;
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(242,239,230,.28);
  border-radius: 10px;
  background: rgba(242,239,230,.06);
}

.privacy-check{
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
}

.privacy-check input{
  width: 17px;
  height: 17px;
  margin-top: 3px;
  flex: 0 0 auto;
  accent-color: var(--paper);
}

.privacy-check span{
  display: block;
  min-width: 0;
}

.privacy-check strong{
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--paper);
}

.privacy-check small{
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(242,239,230,.72);
}

.privacy-details{
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(242,239,230,.18);
}

.privacy-details summary{
  width: max-content;
  max-width: 100%;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(242,239,230,.86);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-content{
  margin-top: 12px;
  padding: 13px 14px;
  border-radius: 8px;
  background: rgba(35,36,31,.18);
}

.privacy-content p{
  max-width: none;
  margin: 0 0 7px;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(242,239,230,.72);
}

.privacy-content p:last-child{
  margin-bottom: 0;
}

.privacy-content b{
  color: rgba(242,239,230,.95);
}

.captcha-notice{
  max-width: none !important;
  margin: 0 0 14px !important;
  font-family: var(--mono);
  font-size: 11px !important;
  line-height: 1.55 !important;
  color: rgba(242,239,230,.58);
}

@media (max-width: 560px){
  .privacy-box{
    padding: 14px;
  }

  .privacy-details summary{
    width: auto;
  }
}
.before-after {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 24px;
    max-width: 1080px;
}

.before-after .media{
    width:100%;
}

.before-after img{
    width:100%;
    display:block;
    border-radius:20px;
}

@media (max-width:820px){
    .before-after{
        grid-template-columns:1fr;
    }
}

.section-image-stack .media{
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 20px;
}

.section-image-stack .media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.section-image-stack .media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


/* ---------- Mobile Header ---------- */

@media (max-width: 768px){

  .site-header .wrap{
    padding-left: 16px;
    padding-right: 16px;
  }

  .nav{
    height: 76px;
    gap: 10px;
  }

  .logo{
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .logo-img{
    width: 56px;
    height: 56px;
    flex-shrink: 0;
  }

  .logo-text{
    min-width: 0;
    font-size: 17px;
    line-height: 1.05;
    white-space: nowrap;
  }

  .logo-text small{
    margin-top: 3px;
    font-size: 8px;
    letter-spacing: 0.08em;
  }

  .nav-cta{
    flex: 0 0 auto;
    padding: 9px 13px;
    font-size: 12px;
    white-space: nowrap;
  }

}
/* ---------- Mobile Dialogue Text ---------- */

@media (max-width: 640px){

  .plan-wrap{
    padding: 24px 18px;
  }

  .plan-svg{
    max-height: 230px;
  }

  .note-panel{
    padding: 20px 18px;
  }

  .note-line{
    display: block;
    margin-bottom: 20px;
  }

  .note-line b{
    display: block;
    min-width: 0;
    margin-bottom: 8px;
    font-size: 14px;
  }

  .note-line span{
    display: block;
    font-size: 14px;
    line-height: 1.75;
  }

}
/* ---------- Footer layout final override ---------- */

.footer-company{
  display: grid;
  grid-template-columns:
    minmax(250px, 0.9fr)
    minmax(560px, 1.8fr)
    120px;
  gap: 34px;
  width: 100%;
  align-items: start;
}

.footer-brand{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.footer-brand strong{
  display: block;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  white-space: nowrap;
}

.footer-brand span{
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .08em;
  color: var(--sage-deep);
  white-space: nowrap;
}

.footer-info{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 36px;
  row-gap: 14px;
  width: 100%;
  min-width: 0;
  margin: 0;
  font-style: normal;
}

.footer-info > div{
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.footer-label{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--sage-deep);
  white-space: nowrap;
}

.footer-info a[href^="tel:"],
.footer-info a[href^="mailto:"]{
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.footer-links{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  min-width: 120px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 1100px){
  .footer-company{
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .footer-links{
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
  }
}

@media (max-width: 760px){
  .footer-company{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-info{
    grid-template-columns: 1fr;
  }

  .footer-links{
    grid-column: auto;
    align-items: flex-start;
  }

  .footer-brand strong,
  .footer-brand span{
    white-space: normal;
  }
}

@media (max-width: 420px){
  .footer-info > div{
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .footer-info a[href^="mailto:"]{
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================
   Migrated from index.html: keep presentation in style.css
   ========================================================== */

/* --- company-trust-styles --- */
.company-trust{padding:104px 0;background:#f7f5ef;color:#1c1c1c}
  .company-trust .company-head{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:64px;align-items:end;margin-bottom:44px}
  .company-trust .company-head h2{margin:8px 0 0;font-size:clamp(32px,3vw,40px);line-height:1.16;letter-spacing:-.035em;word-break:keep-all}
  .company-trust .company-head h2 .company-title-line{display:block;white-space:nowrap}
  .company-trust .company-head p{margin:0;max-width:620px;font-size:16px;line-height:1.85;color:#5d5a54}
  .company-trust .company-head p strong{display:block;margin-bottom:8px;color:#2a2926;font-weight:600}
  .company-trust .company-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(28,28,28,.16);border-left:1px solid rgba(28,28,28,.16)}
  .company-trust .company-card{min-height:210px;padding:32px 34px;border-right:1px solid rgba(28,28,28,.16);border-bottom:1px solid rgba(28,28,28,.16);background:rgba(255,255,255,.34)}
  .company-trust .company-card .num{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:#8a857b;margin-bottom:22px}
  .company-trust .company-card h3{margin:0 0 12px;font-size:23px;letter-spacing:-.03em}
  .company-trust .company-card p{margin:0;color:#666159;font-size:15px;line-height:1.72}
  .company-trust .company-card .company-keywords{margin-top:16px;font-family:var(--mono);font-size:12.5px;line-height:1.7;letter-spacing:.01em;color:#4f5940}
  .company-trust .company-note{margin-top:24px;font-size:13px;line-height:1.7;color:#777168}
  .company-trust .office-note{margin-top:42px;padding-top:24px;border-top:1px solid rgba(28,28,28,.14);display:flex;justify-content:space-between;gap:24px;color:#6b665e;font-size:14px;line-height:1.7}
  .company-trust .company-office-photo{position:relative;margin:42px 0 0;min-height:clamp(300px,38vw,500px);overflow:hidden;border:1px solid rgba(28,28,28,.16);background:#ece9e1}
  .company-trust .company-office-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;z-index:2}
  .company-trust .company-office-photo .office-photo-ui{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:28px;background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(28,28,28,.035))}
  .company-trust .company-office-photo .office-photo-frame{width:min(760px,88%);min-height:210px;border:1px dashed rgba(28,28,28,.24);display:grid;place-items:center;text-align:center;padding:36px 24px;background:rgba(247,245,239,.58)}
  .company-trust .company-office-photo .office-label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#8a857b;margin-bottom:14px}
  .company-trust .company-office-photo strong{display:block;font-size:22px;letter-spacing:-.03em;color:#2a2926;margin-bottom:9px}
  .company-trust .company-office-photo p{margin:0;font-size:14px;line-height:1.7;color:#777168}
  .company-trust .company-office-photo.has-photo .office-photo-ui{display:none}
  @media (max-width:900px){
    .company-trust{padding:88px 0}
    .company-trust .company-head{grid-template-columns:1fr;gap:24px;margin-bottom:40px}
    .company-trust .company-grid{grid-template-columns:1fr}
    .company-trust .company-card{min-height:0;padding:28px 24px}
    .company-trust .office-note{flex-direction:column}
    .company-trust .company-head h2 .company-title-line{white-space:normal}
  }

  /* Keep linked and non-linked testimonial cards visually consistent. */
  .testimonial-section .t-card{
    color:inherit;
    text-decoration:none;
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  }
  .testimonial-section .t-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(35,36,31,.08);
  }
  .testimonial-section a.t-card{cursor:pointer}
  .testimonial-section a.t-card:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* --- intro-title-wrap-fix --- */
/* Desktop: keep the headline on two intentional, balanced lines. */
  .intro .intro-title-balanced{
    max-width:none;
    font-size:clamp(40px,3.55vw,54px);
    line-height:1.16;
    letter-spacing:-0.045em;
    word-break:keep-all;
  }
  .intro .intro-title-balanced .intro-title-line{
    display:block;
    width:max-content;
    max-width:100%;
    white-space:nowrap;
  }

  /* Tablet/mobile: let each phrase wrap naturally within the available width. */
  @media (max-width:900px){
    .intro .intro-title-balanced{
      font-size:clamp(38px,7.8vw,52px);
      line-height:1.18;
    }
    .intro .intro-title-balanced .intro-title-line{
      width:auto;
      max-width:none;
      white-space:normal;
      word-break:keep-all;
    }
  }

  @media (max-width:560px){
    .intro .intro-title-balanced{
      font-size:clamp(34px,10vw,46px);
      letter-spacing:-0.05em;
    }
  }

/* --- office-gallery-styles --- */
.company-trust .office-story{margin-top:42px;padding-top:34px;border-top:1px solid rgba(28,28,28,.14)}
  .company-trust .office-story-head{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:48px;align-items:end;margin-bottom:26px}
  .company-trust .office-story-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#8a857b;margin-bottom:10px}
  .company-trust .office-story-head h3{margin:0;font-size:clamp(28px,2.6vw,38px);line-height:1.2;letter-spacing:-.035em;word-break:keep-all}
  .company-trust .office-story-head p{margin:0;max-width:680px;color:#666159;line-height:1.85;word-break:keep-all}
  .company-trust .office-gallery figure{margin:0}
  .company-trust .office-main-photo,.company-trust .office-sub-photo{overflow:hidden;border:1px solid rgba(28,28,28,.14);background:#ece9e1;padding:0;line-height:0}
  .company-trust .office-main-photo{aspect-ratio:16/9}
  .company-trust .office-sub-photo{aspect-ratio:1.62/1}
  .company-trust .office-gallery img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(1.025);transform-origin:center center}
  .company-trust .office-main-photo img{object-position:center center}
  .company-trust .office-sub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
  .company-trust .office-caption{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-top:12px}
  .company-trust .office-caption strong{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:#2f2d29;font-weight:500}
  .company-trust .office-caption span{font-size:13px;line-height:1.65;color:#777168;text-align:right}
  .company-trust .office-gallery-note{margin-top:24px;padding:20px 0 0;border-top:1px solid rgba(28,28,28,.12);font-size:14px;line-height:1.8;color:#6b665e}
  @media (max-width:900px){
    .company-trust .office-story-head{grid-template-columns:1fr;gap:16px}
    .company-trust .office-sub-grid{grid-template-columns:1fr}
    .company-trust .office-caption{display:block}
    .company-trust .office-caption span{display:block;margin-top:5px;text-align:left}
  }

/* --- archive-layout-fix --- */
/* Final safeguard: archive CTA is 2 columns on desktop, 1 column on mobile. */
  .project-archive{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:48px;
  }
  .project-archive .archive-content{
    min-width:0;
    max-width:720px;
  }
  .project-archive .archive-action{
    width:max-content;
    justify-self:end;
  }
  @media (max-width:820px){
    .project-archive{
      grid-template-columns:1fr;
      gap:24px;
    }
    .project-archive .archive-action{
      justify-self:start;
      width:max-content;
    }
  }
  @media (max-width:560px){
    .project-archive .archive-action{
      width:100%;
      justify-self:stretch;
      justify-content:center;
    }
  }



/* ==========================================================
   2026-08-11 UX refinements
   ========================================================== */

/* Intro category chips are now real project-filter controls. */
.hero-tags .hero-tag{
  appearance:none;
  cursor:pointer;
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

@media (hover:hover){
  .hero-tags .hero-tag:hover{
    transform:translateY(-2px);
    border-color:var(--ink);
    background:var(--white);
    color:var(--ink);
    box-shadow:0 8px 18px rgba(35,36,31,.08);
  }
}

.hero-tags .hero-tag.is-active,
.hero-tags .hero-tag[aria-pressed="true"]{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}

.hero-tags .hero-tag:focus-visible,
.portfolio-filter-status button:focus-visible{
  outline:2px solid var(--sage-deep);
  outline-offset:3px;
}

#services,
#portfolio,
#process,
#how-we-work,
#company,
#contact{
  scroll-margin-top:118px;
}

.portfolio-filter-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:-26px 0 28px;
  padding:14px 18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,253,248,.6);
  color:var(--ink-soft);
  font-size:14px;
}

.portfolio-filter-status[hidden]{
  display:none;
}

.portfolio-filter-status button{
  flex:0 0 auto;
  padding:7px 12px;
  border:1px solid var(--line-strong);
  border-radius:100px;
  background:var(--paper);
  color:var(--ink);
  font-size:12.5px;
  font-weight:600;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}

@media (hover:hover){
  .portfolio-filter-status button:hover{
    background:var(--ink);
    color:var(--paper);
    border-color:var(--ink);
  }
}

/* The company-standard cards now respond like the service cards without
   pretending to be links: visual feedback only, no pointer cursor. */
.company-trust .company-card{
  position:relative;
  transition:
    background .22s ease,
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.company-trust .company-card h3{
  transition:transform .22s ease,color .22s ease;
}

@media (hover:hover){
  .company-trust .company-card:hover{
    z-index:1;
    background:rgba(255,255,255,.78);
    transform:translateY(-3px);
    border-color:rgba(28,28,28,.25);
    box-shadow:0 12px 28px rgba(35,36,31,.08);
  }

  .company-trust .company-card:hover h3{
    transform:translateX(3px);
    color:var(--sage-deep);
  }
}

/* Office image containers: eliminate the visible inner gap and crop a tiny
   amount past the source-image edge so any baked-in light border disappears. */
.company-trust .office-main-photo,
.company-trust .office-sub-photo{
  padding:0;
  line-height:0;
  background:transparent;
}

.company-trust .office-gallery img{
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  transform-origin:center center;
}

.company-trust .office-main-photo img{
  transform:scale(1.015);
}

.company-trust .office-sub-photo img{
  transform:scale(1.04);
}

@media (max-width:640px){
  .portfolio-filter-status{
    align-items:flex-start;
    flex-direction:column;
    margin-top:-20px;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-tags .hero-tag,
  .company-trust .company-card,
  .company-trust .company-card h3{
    transition:none;
  }
}

/* ==========================================================
   Office gallery hover refinement - 2026-08-11
   Safe override: keeps the existing HTML structure and filenames.
   ========================================================== */

.company-trust .office-main-photo img,
.company-trust .office-sub-photo img{
  transition:
    transform .65s cubic-bezier(.22,.61,.36,1),
    filter .65s ease;
  will-change: transform;
}

.company-trust .office-caption{
  transition: transform .45s ease;
}

.company-trust .office-caption strong{
  transition: color .45s ease;
}

@media (hover:hover) and (pointer:fine){
  .company-trust .office-main:hover .office-main-photo img{
    transform: scale(1.065);
    filter: brightness(.975) contrast(1.02);
  }

  .company-trust .office-sub-grid figure:hover .office-sub-photo img{
    transform: scale(1.09);
    filter: brightness(.975) contrast(1.02);
  }

  .company-trust .office-main:hover .office-caption,
  .company-trust .office-sub-grid figure:hover .office-caption{
    transform: translateY(-4px);
  }

  .company-trust .office-main:hover .office-caption strong,
  .company-trust .office-sub-grid figure:hover .office-caption strong{
    color: var(--sage-deep);
  }
}

@media (prefers-reduced-motion:reduce){
  .company-trust .office-main-photo img,
  .company-trust .office-sub-photo img,
  .company-trust .office-caption,
  .company-trust .office-caption strong{
    transition: none;
  }
}


/* ==========================================================
   Mokdong major-repair design / review case - clean 4-step layout
   ========================================================== */

.mokdong-proof{
  background:var(--paper-deep);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.mokdong-proof-head{
  display:grid;
  grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
  gap:76px;
  align-items:end;
  margin-bottom:58px;
}

.mokdong-proof-head h2{
  margin-top:16px;
  max-width:620px;
  font-size:clamp(30px,3.7vw,44px);
  line-height:1.2;
  letter-spacing:-.035em;
}

.mokdong-proof-principle{
  margin:18px 0 0;
  max-width:620px;
  color:var(--sage-deep);
  font-size:15px;
  line-height:1.7;
  font-weight:600;
}

.mokdong-proof-intro{
  max-width:650px;
  justify-self:end;
}

.mokdong-proof-intro > p:first-child{
  margin:0;
  color:var(--ink-soft);
  font-size:15.5px;
  line-height:1.8;
}

.mokdong-proof-summary{
  margin:19px 0 0;
  padding-top:15px;
  border-top:1px solid var(--line-strong);
  color:var(--sage-deep);
  font-family:var(--mono);
  font-size:11px;
  line-height:1.7;
  letter-spacing:.025em;
}

.mokdong-proof-steps{
  display:grid;
  gap:24px;
}

.mokdong-proof-step{
  display:grid;
  grid-template-columns:minmax(0,1.82fr) minmax(290px,.78fr);
  min-width:0;
  min-height:390px;
  overflow:hidden;
  background:rgba(247,245,239,.78);
  border:1px solid var(--line-strong);
  border-radius:18px;
}

/* 사진이 카드 외곽선에 바로 붙지 않도록 사무실 갤러리처럼 숨을 줍니다. */
.mokdong-proof-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  min-width:0;
  height:390px;
  min-height:390px;
  box-sizing:border-box;
  gap:12px;
  padding:16px;
  background:rgba(242,239,230,.72);
  border-right:1px solid var(--line-strong);
}

.mokdong-proof-shot{
  position:relative;
  min-width:0;
  height:100%;
  margin:0;
  overflow:hidden;
  background:#e7e2d5;
  border-radius:10px;
}

.mokdong-proof-shot img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .48s cubic-bezier(.2,.65,.3,1);
}

.mokdong-proof-shot figcaption{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:2;
  max-width:calc(100% - 20px);
  padding:6px 8px;
  background:rgba(25,27,24,.72);
  color:#fff;
  font-family:var(--mono);
  font-size:8.5px;
  line-height:1.25;
  letter-spacing:.055em;
  backdrop-filter:blur(4px);
}

.drawing-pair .mokdong-proof-shot,
.document-pair .mokdong-proof-shot{
  background:#fff;
}

.drawing-pair .drawing-shot img{
  object-fit:contain;
  padding:18px 12px 22px;
  background:#fff;
}

.document-pair .document-shot{
  background:#f6f4ee;
}

.document-pair .document-shot img{
  object-fit:contain;
  padding:20px;
  background:#f6f4ee;
}

.mokdong-proof-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:38px 36px;
}

.mokdong-proof-num{
  display:block;
  margin-bottom:16px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.075em;
  color:var(--sage-deep);
}

.mokdong-proof-copy h3{
  margin:0 0 14px;
  font-family:var(--body);
  font-size:clamp(19px,1.55vw,22px);
  line-height:1.48;
  letter-spacing:-.028em;
}

.mokdong-proof-copy p{
  margin:0;
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.78;
}

.mokdong-proof-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  margin-top:24px;
  padding-bottom:4px;
  border-bottom:1px solid var(--ink);
  color:var(--ink);
  font-size:13.5px;
  font-weight:600;
}

.mokdong-proof-link span{transition:transform .2s ease;}

@media (hover:hover){
  .mokdong-proof-step{
    transition:border-color .22s ease,box-shadow .22s ease;
  }
  .mokdong-proof-step:hover{
    border-color:var(--sage);
    box-shadow:0 14px 28px rgba(35,36,31,.05);
  }
  .mokdong-proof-shot:hover img{
    transform:scale(1.022);
  }
  .mokdong-proof-link:hover span{transform:translateX(4px);}
}

@media (max-width:1000px){
  .mokdong-proof-step{
    grid-template-columns:minmax(0,1.5fr) minmax(270px,.84fr);
  }
  .mokdong-proof-pair{height:350px;min-height:350px;padding:14px;gap:10px;}
  .mokdong-proof-copy{padding:32px 28px;}
}

@media (max-width:820px){
  .mokdong-proof-head{
    grid-template-columns:1fr;
    gap:24px;
    margin-bottom:42px;
  }
  .mokdong-proof-intro{justify-self:start;}
  .mokdong-proof-step{grid-template-columns:1fr;}
  .mokdong-proof-pair{
    height:auto;
    min-height:0;
    aspect-ratio:16 / 8.7;
    border-right:0;
    border-bottom:1px solid var(--line-strong);
  }
  .mokdong-proof-copy{padding:28px 28px 32px;}
}

@media (max-width:620px){
  .mokdong-proof-head h2{font-size:34px;}
  .mokdong-proof-principle{font-size:14px;}
  .mokdong-proof-steps{gap:18px;}
  .mokdong-proof-step{border-radius:14px;}
  .mokdong-proof-pair{
    grid-template-columns:1fr 1fr;
    aspect-ratio:16 / 10.7;
    padding:9px;
    gap:7px;
  }
  .mokdong-proof-shot{border-radius:7px;}
  .drawing-pair .drawing-shot img{padding:9px 5px 14px;}
  .document-pair .document-shot img{padding:8px;}
  .mokdong-proof-shot figcaption{
    left:7px;
    bottom:7px;
    max-width:calc(100% - 14px);
    padding:5px 6px;
    font-size:7px;
  }
  .mokdong-proof-copy{padding:24px 21px 27px;}
}

@media (prefers-reduced-motion:reduce){
  .mokdong-proof-step,
  .mokdong-proof-shot img,
  .mokdong-proof-link span{transition:none;}
}



/* ==========================================================
   2026-08-13 PROCESS REDESIGN
   - Project process becomes an editorial proof/story section.
   - How We Work becomes working principles, avoiding duplicate timelines.
   ========================================================== */

/* ---------- FROM DESIGN TO COMPLETION ---------- */
.project-story{
  background:var(--paper-deep);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.project-story-head{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:78px;
  align-items:end;
  margin-bottom:72px;
}

.project-story-heading h2{
  margin:16px 0 0;
  max-width:620px;
  font-size:clamp(34px,4vw,48px);
  line-height:1.14;
  letter-spacing:-.04em;
}

.project-story-principle{
  margin:18px 0 0;
  color:var(--sage-deep);
  font-size:15px;
  font-weight:600;
  line-height:1.7;
}

.project-story-intro{
  max-width:650px;
  justify-self:end;
}

.project-story-intro > p{
  margin:0;
  color:var(--ink-soft);
  font-size:15.5px;
  line-height:1.85;
}

.project-story-flow{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--line-strong);
  color:var(--sage-deep);
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.045em;
  white-space:nowrap;
}

.project-story-flow i{
  flex:1 1 24px;
  height:1px;
  min-width:14px;
  background:var(--line-strong);
}

.project-story-stages{
  border-top:1px solid var(--line-strong);
}

.story-stage{
  padding:68px 0 76px;
  border-bottom:1px solid var(--line-strong);
}

.story-stage--last{
  padding-bottom:0;
  border-bottom:0;
}

.story-stage-head{
  display:grid;
  grid-template-columns:72px minmax(0,1.05fr) minmax(300px,.95fr);
  gap:28px;
  align-items:start;
  margin-bottom:34px;
}

.story-stage-index{
  font-family:var(--mono);
  font-size:24px;
  line-height:1;
  color:var(--line-strong);
  font-weight:500;
}

.story-stage-title > span{
  display:block;
  margin-bottom:8px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.08em;
  color:var(--sage-deep);
}

.story-stage-title h3{
  margin:0;
  max-width:520px;
  font-family:var(--body);
  font-size:clamp(21px,2.15vw,27px);
  line-height:1.42;
  letter-spacing:-.032em;
}

.story-stage-head > p,
.story-stage-description > p{
  margin:2px 0 0;
  color:var(--ink-soft);
  font-size:14.5px;
  line-height:1.82;
}

.story-media{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

.story-figure{
  min-width:0;
  margin:0;
}

.story-image{
  width:100%;
  overflow:hidden;
  background:var(--white);
}

.story-image img{
  width:100%;
  height:100%;
  max-width:none;
  display:block;
}

.story-image--photo{
  aspect-ratio:5 / 6;
}

.story-image--photo img{
  object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1), filter .6s ease;
}

.story-image--drawing{
  aspect-ratio:4 / 3;
  padding:22px;
  border:1px solid rgba(35,36,31,.11);
}

.story-image--drawing img{
  object-fit:contain;
  background:#fff;
}

.story-media--documents{
  gap:28px;
}

.story-image--document{
  aspect-ratio:4 / 5.15;
  padding:28px 38px;
  border:1px solid rgba(35,36,31,.12);
  background:#f8f6f0;
}

.story-image--document img{
  object-fit:contain;
}

.story-figure figcaption{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line);
  color:var(--ink-soft);
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.45;
  letter-spacing:.055em;
}

.story-figure figcaption span{
  color:var(--sage-deep);
  font-weight:600;
}

.story-project-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  margin-top:18px;
  padding-bottom:4px;
  border-bottom:1px solid var(--ink);
  color:var(--ink);
  font-size:13.5px;
  font-weight:600;
}

.story-project-link span{
  transition:transform .2s ease;
}

@media (hover:hover) and (pointer:fine){
  .story-image--photo:hover img{
    transform:scale(1.025);
    filter:brightness(.985) contrast(1.015);
  }
  .story-project-link:hover span{
    transform:translateX(4px);
  }
}

/* ---------- HOW WE WORK / PRINCIPLES ---------- */
.work-principles{
  background:var(--paper);
}

.work-principles-head{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:78px;
  align-items:end;
  margin-bottom:58px;
}

.work-principles-head h2{
  margin:16px 0 0;
  font-size:clamp(34px,3.8vw,46px);
  line-height:1.18;
  letter-spacing:-.04em;
}

.work-principles-head > p{
  margin:0;
  max-width:650px;
  justify-self:end;
  color:var(--ink-soft);
  font-size:15.5px;
  line-height:1.85;
}

.principles-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
}

.principle-card{
  min-height:285px;
  padding:34px 34px 38px;
  border-right:1px solid var(--line);
}

.principle-card:first-child{
  padding-left:0;
}

.principle-card:last-child{
  padding-right:0;
  border-right:0;
}

.principle-kicker,
.aftercare-kicker{
  font-family:var(--mono);
  font-size:11px;
  line-height:1.5;
  letter-spacing:.08em;
  color:var(--sage-deep);
}

.principle-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:42px;
}

.principle-kicker span{
  color:var(--line-strong);
  font-size:18px;
  letter-spacing:0;
}

.principle-card h3{
  margin:0 0 14px;
  font-family:var(--body);
  font-size:21px;
  line-height:1.4;
  letter-spacing:-.03em;
}

.principle-card p{
  margin:0;
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.8;
}

.aftercare-band{
  display:grid;
  grid-template-columns:170px minmax(260px,.9fr) minmax(0,1.25fr);
  gap:30px;
  align-items:start;
  padding:30px 0 0;
}

.aftercare-band h3{
  margin:0;
  font-family:var(--body);
  font-size:19px;
  line-height:1.45;
  letter-spacing:-.025em;
}

.aftercare-band p{
  margin:0;
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.8;
}

@media (max-width:960px){
  .project-story-head,
  .work-principles-head{
    grid-template-columns:1fr;
    gap:24px;
    margin-bottom:52px;
  }
  .project-story-intro,
  .work-principles-head > p{
    justify-self:start;
  }
  .story-stage-head{
    grid-template-columns:56px minmax(0,1fr);
  }
  .story-stage-head > p,
  .story-stage-description{
    grid-column:2;
  }
  .principle-card{
    padding-left:24px;
    padding-right:24px;
  }
  .principle-card:first-child{padding-left:0;}
  .principle-card:last-child{padding-right:0;}
  .aftercare-band{
    grid-template-columns:130px minmax(220px,.8fr) minmax(0,1.2fr);
  }
}

@media (max-width:760px){
  .project-story-flow{
    flex-wrap:wrap;
    gap:8px 10px;
    white-space:normal;
  }
  .project-story-flow i{
    flex:0 0 22px;
  }
  .story-stage{
    padding:50px 0 56px;
  }
  .story-stage-head{
    grid-template-columns:1fr;
    gap:12px;
    margin-bottom:26px;
  }
  .story-stage-head > p,
  .story-stage-description{
    grid-column:auto;
  }
  .story-stage-index{
    font-size:20px;
    margin-bottom:2px;
  }
  .story-media{
    grid-template-columns:1fr;
    gap:30px;
  }
  .story-image--photo{
    aspect-ratio:4 / 4.7;
  }
  .story-image--drawing{
    aspect-ratio:4 / 3.1;
    padding:14px;
  }
  .story-image--document{
    aspect-ratio:4 / 5.2;
    padding:22px 28px;
  }
  .principles-grid{
    grid-template-columns:1fr;
  }
  .principle-card,
  .principle-card:first-child,
  .principle-card:last-child{
    min-height:0;
    padding:30px 0 34px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .principle-card:last-child{
    border-bottom:0;
  }
  .principle-kicker{
    margin-bottom:24px;
  }
  .aftercare-band{
    grid-template-columns:1fr;
    gap:10px;
    padding-top:28px;
  }
}

@media (max-width:520px){
  .project-story-heading h2,
  .work-principles-head h2{
    font-size:34px;
  }
  .project-story-principle{
    font-size:14px;
  }
  .story-stage-title h3{
    font-size:21px;
  }
  .story-image--document{
    padding:16px;
  }
  .story-figure figcaption{
    align-items:flex-start;
    font-size:9.5px;
  }
}

@media (prefers-reduced-motion:reduce){
  .story-image--photo img,
  .story-project-link span{
    transition:none;
  }
}


/* ---------- Sticky header final safeguard ---------- */
@media (max-width:768px){
  .site-header .nav,
  .site-header.is-scrolled .nav{height:68px;}
  .site-header .logo-img,
  .site-header.is-scrolled .logo-img{width:50px;height:50px;}
  .site-header .logo-text,
  .site-header.is-scrolled .logo-text{font-size:16px;}
  .site-header .logo-text small,
  .site-header.is-scrolled .logo-text small{font-size:7.5px;}
  .site-header .nav-cta,
  .site-header.is-scrolled .nav-cta{padding:8px 12px;font-size:11.5px;}
}


/* ==========================================================
   2026-08-13 final UX correction
   - fixed navigation: no sticky jitter / always reachable
   - HOW WE WORK: four equal principles
   ========================================================== */

/* A fixed header is more reliable here than sticky because the page uses
   overflow control and many large sections. Keep the initial document flow
   with body padding so the hero starts exactly below the header. */
body{
  padding-top:108px;
}

.site-header{
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:5000;
  will-change:auto;
  transform:translateZ(0);
}

/* Fixed positioning means the compact transition no longer changes document
   layout, preventing the threshold flicker that could occur with sticky. */
.site-header .nav{
  will-change:height;
}

/* Four principles belong to the same hierarchy, so they share one grid. */
.principles-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line-strong);
}

.principle-card,
.principle-card:first-child,
.principle-card:last-child{
  position:relative;
  min-height:255px;
  padding:30px 25px 32px;
  border-right:1px solid var(--line);
  border-bottom:0;
  transition:
    background .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.principle-card:last-child{
  border-right:0;
}

.principle-kicker{
  margin-bottom:32px;
}

.principle-card h3{
  font-size:19px;
  margin-bottom:12px;
  transition:transform .22s ease, color .22s ease;
}

@media (hover:hover) and (pointer:fine){
  .principle-card:hover{
    z-index:2;
    background:rgba(255,253,248,.82);
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(35,36,31,.09);
  }

  .principle-card:hover h3{
    transform:translateX(3px);
    color:var(--sage-deep);
  }
}

@media (prefers-reduced-motion:reduce){
  .principle-card,
  .principle-card h3{
    transition:none;
  }
}

.principle-card p{
  font-size:13.5px;
  line-height:1.75;
}

/* Legacy fourth-row treatment is no longer used. */
.aftercare-band{
  display:none;
}

@media (max-width:1050px){
  .principles-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .principle-card,
  .principle-card:first-child,
  .principle-card:last-child{
    min-height:230px;
    padding:28px 26px 30px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .principle-card:nth-child(2n){border-right:0;}
  .principle-card:nth-last-child(-n+2){border-bottom:0;}
}

@media (max-width:860px){
  body{
    padding-top:68px;
  }
}

@media (max-width:760px){
  .principles-grid{
    grid-template-columns:1fr;
  }
  .principle-card,
  .principle-card:first-child,
  .principle-card:last-child{
    min-height:0;
    padding:28px 22px 30px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .principle-card:last-child{
    border-bottom:0;
  }
}

/* ==========================================================
   2026-08-13 architectural drawing detail viewer
   - full-width drawings for legibility
   - one consistent CSS frame instead of relying on source borders
   - cropped preview + original-resolution lightbox
   ========================================================== */

/* Drawings need reading space, unlike project photography. */
.story-stage--drawings .story-stage-head{
  margin-bottom:42px;
}

.story-media--drawings{
  grid-template-columns:1fr !important;
  gap:52px;
}

.story-figure--drawing{
  width:100%;
}

/* One clean frame for both drawings. The original image border is clipped
   inside the viewport so mismatched source borders no longer define the UI. */
.drawing-preview-button{
  position:relative;
  width:100%;
  display:block;
  overflow:hidden;
  border:1px solid var(--line-strong);
  background:#fff;
  text-align:left;
  cursor:zoom-in;
  box-shadow:0 1px 0 rgba(35,36,31,.025);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.drawing-preview-canvas{
  display:block;
  width:100%;
  overflow:hidden;
  background:#fff;
  line-height:0;
}

.drawing-preview-canvas img{
  width:100%;
  height:auto;
  max-width:none;
  display:block;
  object-fit:contain;
  transform:scale(1.028);
  transform-origin:center center;
  filter:contrast(1.11) brightness(.995);
  transition:transform .55s cubic-bezier(.22,.61,.36,1), filter .35s ease;
}

/* The two source drawings have slightly different canvas proportions.
   Individual scale values crop only the source-paper edge, not the building. */
.drawing-preview-canvas--front img{
  transform:scale(1.032);
}

.drawing-preview-canvas--rear img{
  transform:scale(1.026);
}

.drawing-view-hint{
  position:absolute;
  right:16px;
  bottom:16px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border:1px solid rgba(35,36,31,.18);
  background:rgba(242,239,230,.94);
  color:var(--ink);
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  line-height:1;
  letter-spacing:.07em;
  backdrop-filter:blur(6px);
}

.drawing-view-hint b{
  font-family:var(--body);
  font-size:15px;
  font-weight:400;
  line-height:.8;
}

.story-figure--drawing figcaption{
  justify-content:space-between;
  gap:22px;
}

.drawing-caption-title{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
  color:var(--ink-soft);
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.45;
  letter-spacing:.055em;
}

.drawing-caption-title b{
  color:var(--sage-deep);
  font-weight:600;
}

.drawing-caption-open{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--ink-soft);
  font-family:var(--body);
  font-size:12px;
  font-weight:600;
  line-height:1.4;
  border-bottom:1px solid transparent;
  padding:0 0 2px;
  transition:color .2s ease,border-color .2s ease;
}

.drawing-caption-open span{
  font-size:13px;
}

@media (hover:hover) and (pointer:fine){
  .drawing-preview-button:hover{
    border-color:var(--sage-deep);
    box-shadow:0 16px 34px rgba(35,36,31,.07);
    transform:translateY(-2px);
  }
  .drawing-preview-button:hover .drawing-preview-canvas img{
    transform:scale(1.045);
    filter:contrast(1.14) brightness(.995);
  }
  .drawing-preview-canvas--front img{
    transform:scale(1.032);
  }
  .drawing-preview-canvas--rear img{
    transform:scale(1.026);
  }
  .drawing-preview-button:hover .drawing-preview-canvas--front img{
    transform:scale(1.05);
  }
  .drawing-preview-button:hover .drawing-preview-canvas--rear img{
    transform:scale(1.044);
  }
  .drawing-caption-open:hover{
    color:var(--ink);
    border-color:currentColor;
  }
}

/* ---------- Full-screen original drawing viewer ---------- */
body.drawing-modal-open{
  overflow:hidden;
}

.drawing-lightbox[hidden]{
  display:none;
}

.drawing-lightbox{
  position:fixed;
  inset:0;
  z-index:9000;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  background:rgba(22,23,20,.96);
  color:var(--paper);
}

.drawing-lightbox-toolbar{
  min-height:68px;
  padding:13px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid rgba(242,239,230,.16);
  background:rgba(22,23,20,.98);
}

.drawing-lightbox-heading{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:18px;
}

.drawing-lightbox-heading > span{
  flex:0 0 auto;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  color:rgba(242,239,230,.54);
}

.drawing-lightbox-heading strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.055em;
  color:var(--paper);
}

.drawing-lightbox-close{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:rgba(242,239,230,.78);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  transition:color .2s ease;
}

.drawing-lightbox-close span{
  font-family:var(--body);
  font-size:24px;
  font-weight:300;
  line-height:1;
}

.drawing-lightbox-viewport{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:28px 34px;
  cursor:default;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    #1b1c19;
  background-size:24px 24px;
}

.drawing-lightbox-viewport.is-draggable{
  cursor:grab;
}

.drawing-lightbox-viewport.is-dragging{
  cursor:grabbing;
}

.drawing-lightbox-stage{
  display:grid;
  place-items:center;
  transform:translate3d(0,0,0) scale(1);
  transform-origin:center center;
  will-change:transform;
}

.drawing-lightbox-stage img{
  display:block;
  width:auto;
  height:auto;
  max-width:min(92vw,1810px);
  max-height:calc(100vh - 190px);
  object-fit:contain;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

.drawing-lightbox-controls{
  min-height:58px;
  padding:10px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  border-top:1px solid rgba(242,239,230,.16);
  background:rgba(22,23,20,.98);
}

.drawing-zoom-buttons{
  display:flex;
  align-items:center;
  gap:8px;
}

.drawing-zoom-buttons button{
  min-width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(242,239,230,.22);
  color:var(--paper);
  font-size:18px;
  line-height:1;
  transition:background .2s ease,border-color .2s ease;
}

.drawing-zoom-buttons button:disabled{
  opacity:.35;
  cursor:default;
}

.drawing-zoom-buttons .drawing-zoom-reset{
  width:auto;
  padding:0 12px;
  font-family:var(--body);
  font-size:11px;
  font-weight:600;
}

#drawingZoomLevel{
  min-width:52px;
  text-align:center;
  font-family:var(--mono);
  font-size:10px;
  color:rgba(242,239,230,.7);
}

.drawing-lightbox-controls > p{
  margin:0;
  font-family:var(--mono);
  font-size:9.5px;
  line-height:1.5;
  letter-spacing:.03em;
  color:rgba(242,239,230,.48);
}

@media (hover:hover) and (pointer:fine){
  .drawing-lightbox-close:hover{color:var(--paper);}
  .drawing-zoom-buttons button:not(:disabled):hover{
    background:rgba(242,239,230,.1);
    border-color:rgba(242,239,230,.5);
  }
}

@media (max-width:760px){
  .story-media--drawings{
    gap:38px;
  }
  .story-stage--drawings .story-stage-head{
    margin-bottom:30px;
  }
  .drawing-view-hint{
    right:10px;
    bottom:10px;
    padding:7px 9px;
    font-size:8.5px;
  }
  .story-figure--drawing figcaption{
    align-items:flex-start;
  }
  .drawing-caption-title{
    font-size:9.3px;
  }
  .drawing-caption-open{
    font-size:11px;
  }
  .drawing-lightbox-toolbar{
    min-height:60px;
    padding:10px 14px;
  }
  .drawing-lightbox-heading{
    display:block;
  }
  .drawing-lightbox-heading > span{
    display:block;
    margin-bottom:3px;
    font-size:8px;
  }
  .drawing-lightbox-heading strong{
    display:block;
    max-width:62vw;
    font-size:9px;
  }
  .drawing-lightbox-close{
    font-size:0;
  }
  .drawing-lightbox-close span{
    font-size:28px;
  }
  .drawing-lightbox-viewport{
    padding:16px 10px;
  }
  .drawing-lightbox-stage img{
    max-width:96vw;
    max-height:calc(100vh - 162px);
  }
  .drawing-lightbox-controls{
    min-height:52px;
    padding:8px 12px;
  }
  .drawing-lightbox-controls > p{
    display:none;
  }
  .drawing-zoom-buttons{
    width:100%;
    justify-content:center;
  }
}

@media (max-width:520px){
  .story-figure--drawing figcaption{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  .drawing-caption-open{
    width:max-content;
  }
}

@media (prefers-reduced-motion:reduce){
  .drawing-preview-button,
  .drawing-preview-canvas img,
  .drawing-caption-open{
    transition:none;
  }
}

/* ==========================================================
   2026-08-13 permit / start-notice document polish
   - remove the beige mat around each document
   - make the paper itself the visual frame
   - add the same subtle interaction language as project imagery
   - reuse the full-screen viewer for original document inspection
   ========================================================== */

.story-media--documents{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  align-items:start;
}

.story-figure--document{
  min-width:0;
}

.document-preview-button{
  position:relative;
  width:100%;
  display:block;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(35,36,31,.14);
  border-radius:0;
  background:#fff;
  text-align:left;
  cursor:zoom-in;
  box-shadow:0 1px 0 rgba(35,36,31,.02);
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s ease,
    border-color .35s ease;
}

.document-preview-canvas{
  display:block;
  width:100%;
  aspect-ratio:210 / 297;
  overflow:hidden;
  background:#fff;
  line-height:0;
}

.document-preview-canvas img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  background:#fff;
  transform:scale(1.002);
  transform-origin:center center;
  filter:contrast(1.025) brightness(1.002);
  transition:
    transform .5s cubic-bezier(.22,.61,.36,1),
    filter .45s ease;
}

.document-view-hint{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border:1px solid rgba(35,36,31,.16);
  background:rgba(242,239,230,.94);
  color:var(--ink);
  font-family:var(--mono);
  font-size:9px;
  font-weight:500;
  line-height:1;
  letter-spacing:.065em;
  backdrop-filter:blur(5px);
  opacity:.9;
  transition:opacity .25s ease, transform .25s ease;
}

.document-view-hint b{
  font-family:var(--body);
  font-size:14px;
  font-weight:400;
  line-height:.8;
}

.document-caption{
  justify-content:space-between;
  gap:20px;
}

.document-caption-title{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
  color:var(--ink-soft);
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.45;
  letter-spacing:.055em;
}

.document-caption-title b{
  color:var(--sage-deep);
  font-weight:600;
}

.document-caption-open{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 0 2px;
  border-bottom:1px solid transparent;
  color:var(--ink-soft);
  font-family:var(--body);
  font-size:12px;
  font-weight:600;
  line-height:1.4;
  transition:color .2s ease,border-color .2s ease;
}

.document-caption-open span{
  font-size:13px;
}

@media (hover:hover) and (pointer:fine){
  .document-preview-button:hover{
    transform:translateY(-5px);
    border-color:rgba(79,89,64,.42);
    box-shadow:0 16px 34px rgba(35,36,31,.09);
  }

  .document-preview-button:hover .document-preview-canvas img{
    transform:scale(1.012);
    filter:contrast(1.045) brightness(1.002);
  }

  .document-preview-button:hover .document-view-hint{
    opacity:1;
    transform:translateY(-2px);
  }

  .document-caption-open:hover{
    color:var(--ink);
    border-color:currentColor;
  }
}

/* Document viewer uses the same reliable zoom / drag engine as drawings,
   but gets a paper-focused presentation. */
.drawing-lightbox.is-document .drawing-lightbox-viewport{
  background:#1b1c19;
}

.drawing-lightbox.is-document .drawing-lightbox-stage img{
  max-width:min(86vw,1200px);
  max-height:calc(100vh - 170px);
  box-shadow:0 26px 76px rgba(0,0,0,.34);
}

@media (max-width:820px){
  .story-media--documents{
    gap:18px;
  }

  .document-view-hint{
    right:10px;
    bottom:10px;
    padding:7px 8px;
    font-size:8px;
  }

  .document-caption{
    display:grid !important;
    grid-template-columns:1fr;
    gap:7px !important;
  }

  .document-caption-open{
    width:max-content;
  }
}

@media (max-width:620px){
  .story-media--documents{
    grid-template-columns:1fr;
    gap:34px;
  }

  .document-preview-button{
    max-width:520px;
    margin:0 auto;
  }
}

@media (prefers-reduced-motion:reduce){
  .document-preview-button,
  .document-preview-canvas img,
  .document-view-hint,
  .document-caption-open{
    transition:none;
  }
}

/* ==========================================================
   2026-08-18 TYPOGRAPHY REFINEMENT V2
   SOTONG DESIGN editorial hierarchy
   - Large Korean brand/project headlines: Noto Serif KR
   - Body, navigation, cards, small headings: Pretendard
   - Technical labels and project codes: IBM Plex Mono
   ========================================================== */

:root{
  --editorial: "Noto Serif KR", "AppleMyungjo", "Batang", serif;
}

/* Keep everyday interface copy modern and restrained. */
h3{
  font-family:var(--body);
  font-weight:600;
  letter-spacing:-0.025em;
}

/* Use serif only where the page needs an architectural/editorial focal point. */
h1,
h2{
  font-family:var(--editorial);
  font-weight:600;
  letter-spacing:-0.035em;
  text-wrap:balance;
}

.intro h1{
  font-family:var(--editorial);
  font-weight:600;
  line-height:1.22;
  letter-spacing:-0.042em;
}

/* The supporting service line should remain clean and contemporary. */
.intro .intro-title .accent{
  font-family:var(--body);
  font-weight:500;
  letter-spacing:-0.025em;
}

.section-head h2{
  line-height:1.27;
}

.project-story-heading h2,
.work-principles-head h2,
.company-trust .company-head h2{
  font-family:var(--editorial);
  font-weight:600;
  line-height:1.24;
  letter-spacing:-0.04em;
}

/* Keep secondary card titles and working-process headings in Pretendard. */
.service-item h3,
.service-cta h3,
.process-title,
.pf-title,
.story-stage-title h3,
.principle-card h3,
.aftercare-band h3,
.company-trust .company-card h3,
.company-trust .office-story-head h3,
.mokdong-proof-copy h3{
  font-family:var(--body);
}

/* Large facts stay sans-serif, but with a calmer, tighter setting. */
.stat-value{
  font-family:var(--body);
  font-weight:400;
  letter-spacing:-0.035em;
  line-height:1.04;
}

/* Testimonials should feel conversational rather than literary. */
.t-quote{
  font-family:var(--body);
  font-weight:450;
  letter-spacing:-0.02em;
}

.t-quote-mark{
  font-family:var(--editorial);
  font-weight:500;
}

/* CTA headline is a brand statement, so it joins the editorial heading system. */
.cta h2{
  font-family:var(--editorial);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-0.035em;
}

@media (max-width:640px){
  .intro h1{
    line-height:1.25;
    letter-spacing:-0.038em;
  }

  .section-head h2,
  .project-story-heading h2,
  .work-principles-head h2,
  .company-trust .company-head h2{
    line-height:1.3;
  }
}

/* ==========================================================
   2026-08-18 TYPOGRAPHY REFINEMENT V3
   Brand/editorial titles aligned with SOTONG DESIGN identity
   ========================================================== */

/* Brand name: connect the header identity to the editorial headline system. */
.logo-text{
  font-family:var(--editorial);
  font-weight:600;
  letter-spacing:-0.04em;
  line-height:1.08;
}

/* Keep the English studio name technical and restrained. */
.logo-text small{
  font-family:var(--mono);
  font-weight:500;
  letter-spacing:.12em;
}

/* This is a section-level brand statement, not a small card heading. */
.company-trust .office-story-head h3{
  font-family:var(--editorial);
  font-weight:600;
  line-height:1.28;
  letter-spacing:-0.04em;
  text-wrap:balance;
}

/* ==========================================================
   2026-08-18 FOOTER BRAND TYPOGRAPHY
   - Match footer brand title with the editorial H1/H2 / logo system
   ========================================================== */

.footer-brand strong{
  font-family:var(--editorial);
  font-weight:600;
  letter-spacing:-0.035em;
  line-height:1.35;
}