/* ============================================================
   나름연구소 — 콘텐츠 전략 · 제작 · 교육
   한글 우선 / 여백과 타이포 중심 / 에디토리얼
   ============================================================ */

:root {
  /* surface — 명도 단차를 또렷하게 */
  --bg:        #FBFBF9;
  --bg-soft:   #F1F0E9;
  --bg-card:   #FFFFFF;
  --bg-deep:   #17231F;
  --bg-deep-2: #1F2E2A;

  /* ink */
  --ink:       #191C1A;
  --ink-2:     #434E4A;
  --ink-3:     #6A756F;
  --ink-inv:   #F5F7F5;
  --ink-inv-2: #AEBCB7;

  /* line */
  --line:      #E2E0D7;
  --line-soft: #EDEBE3;
  --line-deep: #2E403B;

  /* brand — 절제해서 사용 */
  --brand:      #0B7F6E;
  --brand-deep: #086154;
  --brand-hi:   #0B9C86;
  --brand-mint: #35E0B0;
  --brand-blue: #0A86B4;
  --brand-wash: #E9F3F0;
  --brand-line: #C3DFD9;

  /* type */
  --font-kr: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Malgun Gothic', sans-serif;
  --font-en: 'Pretendard Variable', Pretendard, system-ui, sans-serif;

  /* metrics */
  --maxw: 1120px;
  --maxw-narrow: 720px;
  --gutter: clamp(20px, 5vw, 44px);
  --r-sm: 6px;
  --r-md: 10px;
  --nav-h: 78px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 1px 2px rgba(23,35,31,.04), 0 10px 28px rgba(23,35,31,.06);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-kr);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--ink-2);
  background: var(--bg);
  letter-spacing: -0.005em;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--brand-wash); color: var(--brand-deep); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 300;
  background: var(--ink); color: var(--ink-inv);
  padding: 12px 18px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500;
}
.skip-link:focus { top: 14px; }

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--maxw-narrow) + var(--gutter) * 2); }

.section { padding-block: clamp(76px, 11vw, 150px); }
.section--tight { padding-block: clamp(58px, 8vw, 104px); }
.section--soft { background: var(--bg-soft); }
.section--deep { background: var(--bg-deep); color: var(--ink-inv); }
.section--line { border-top: 1px solid var(--line); }

/* ============================================================
   TYPOGRAPHY — 위계를 뚜렷하게
   ============================================================ */
h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--ink);
  line-height: 1.32;
  letter-spacing: -0.025em;
}
.section--deep h1, .section--deep h2,
.section--deep h3, .section--deep h4 { color: var(--ink-inv); }

/* 히어로 */
.h1 {
  font-size: clamp(36px, 6.4vw, 72px);
  line-height: 1.18;
  letter-spacing: -0.035em;
  font-weight: 700;
}
/* 섹션 제목 */
.h2 {
  font-size: clamp(25px, 3.4vw, 40px);
  line-height: 1.3;
  letter-spacing: -0.03em;
}
/* 블록 제목 */
.h3 {
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.02em;
}
/* 작은 제목 */
.h4 { font-size: 16.5px; line-height: 1.5; }

.lead {
  font-size: clamp(16px, 1.45vw, 18.5px);
  line-height: 1.85;
  color: var(--ink-2);
}
.section--deep .lead { color: var(--ink-inv-2); }
.muted { color: var(--ink-3); font-size: 14.5px; line-height: 1.7; }
.measure { max-width: 34em; }
.measure-s { max-width: 27em; }
.stack > * + * { margin-top: 1.05em; }
.center { text-align: center; }
.center .measure, .center .measure-s { margin-inline: auto; }

strong { color: var(--ink); font-weight: 700; }
.section--deep strong { color: var(--ink-inv); }

/* 영문 보조 라벨 — 눈에 띄지 않게 */
.en {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================
   섹션 헤더 — 라벨 / 제목 / 설명의 위계 분리
   1행: 라벨   2행: 제목 | 설명 (첫 베이스라인 정렬)
   ============================================================ */
.sec-head { margin-bottom: clamp(32px, 4.5vw, 60px); }

.sec-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--brand);
  margin-bottom: clamp(14px, 1.6vw, 20px);
}
.sec-label::before {
  content: '';
  width: 20px; height: 1px;
  background: currentColor;
  flex: none;
}
.section--deep .sec-label { color: var(--brand-mint); }

.sec-head__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 4.5vw, 64px);
  align-items: baseline;
}
.sec-head__main--solo { grid-template-columns: minmax(0, 1fr); }
.sec-head__aside > * + * { margin-top: .9em; }
@media (max-width: 840px) {
  .sec-head__main { grid-template-columns: 1fr; gap: 16px; align-items: start; }
}
.sec-head.center { text-align: center; }
.sec-head.center .sec-label { justify-content: center; }
.sec-head.center .sec-head__main { grid-template-columns: minmax(0, 1fr); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 28px;
  border-radius: 100px;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
  white-space: nowrap;
}
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-deep); transform: translateY(-1px); }

.btn--ghost { border: 1px solid var(--line); background: var(--bg-card); color: var(--ink); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }

.btn--onDeep { border: 1px solid var(--line-deep); color: var(--ink-inv); }
.btn--onDeep:hover { border-color: var(--brand-mint); color: var(--brand-mint); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--brand);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color .22s var(--ease), gap .22s var(--ease);
}
.link-arrow:hover { border-bottom-color: var(--brand); gap: 12px; }
.section--deep .link-arrow { color: var(--brand-mint); }
.section--deep .link-arrow:hover { border-bottom-color: var(--brand-mint); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center .btn-row { justify-content: center; }

/* ============================================================
   NAV — 브랜드(2행 블록) / 메뉴(1행 링크)로 위계 분리
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  background: rgba(251,251,249,.86);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line); }

.nav__progress {
  position: absolute; left: 0; bottom: -1px;
  height: 2px; width: 100%;
  background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .08s linear;
}

.nav__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--gutter);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand { display: block; line-height: 1.25; }
.brand__name {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.brand__title {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: .01em;
  margin-top: 2px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 38px);
  font-size: 14.5px;
  font-weight: 500;
}
.nav__links a {
  position: relative;
  color: var(--ink-3);
  padding-block: 6px;
  transition: color .2s var(--ease);
}
.nav__links a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .26s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); background: var(--brand); }

.nav__toggle { display: none; width: 42px; height: 42px; margin-right: -9px; position: relative; }
.nav__toggle span {
  position: absolute; left: 11px;
  width: 20px; height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.nav__toggle span:nth-child(1) { top: 15px; }
.nav__toggle span:nth-child(2) { top: 20.5px; }
.nav__toggle span:nth-child(3) { top: 26px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 800px) {
  :root { --nav-h: 70px; }
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 6px var(--gutter) 20px;
    font-size: 16px;
    transform: translateY(-10px);
    opacity: 0; visibility: hidden;
    transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { padding: 15px 2px; border-bottom: 1px solid var(--line-soft); }
  .nav__links a::after { display: none; }
}

/* ============================================================
   HERO — 중앙 정렬형
   ============================================================ */
.hero {
  padding-top: calc(var(--nav-h) + clamp(64px, 13vw, 150px));
  padding-bottom: clamp(70px, 12vw, 150px);
  text-align: center;
}
.hero--page {
  padding-top: calc(var(--nav-h) + clamp(52px, 9vw, 104px));
  padding-bottom: clamp(46px, 7vw, 82px);
}
.hero__title { margin-inline: auto; }
.hero__sub {
  margin: clamp(22px, 3vw, 34px) auto 0;
  max-width: 30em;
}
.hero .btn-row { margin-top: clamp(30px, 4vw, 46px); }

.hero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: clamp(44px, 7vw, 80px);
  font-size: 12px;
  color: var(--ink-3);
}
.hero__scroll i {
  width: 1px; height: 34px;
  background: linear-gradient(var(--line), var(--brand-line));
  display: block;
}

/* ============================================================
   문의 — 이메일 하나가 남는 구조
   ============================================================ */
.mailto {
  display: inline-block;
  font-family: var(--font-en);
  font-size: clamp(24px, 4.6vw, 52px);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--ink-inv);
  line-height: 1.2;
  padding-bottom: 8px;
  border-bottom: 1.5px solid rgba(53,224,176,.5);
  transition: color .25s var(--ease), border-color .25s var(--ease);
  word-break: break-all;
}
.mailto:hover { color: var(--brand-mint); border-bottom-color: var(--brand-mint); }
.mailto--light { color: var(--ink); border-bottom-color: var(--brand-line); }
.mailto--light:hover { color: var(--brand); border-bottom-color: var(--brand); }

.copy-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--ink-inv-2);
  border: 1px solid var(--line-deep);
  border-radius: 100px; padding: 7px 15px;
  transition: border-color .22s var(--ease), color .22s var(--ease);
}
.copy-btn:hover, .copy-btn.is-done { border-color: var(--brand-mint); color: var(--brand-mint); }

/* ============================================================
   조회수 비교
   ============================================================ */
.compare__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
}
.compare__opt {
  text-align: left;
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .2s var(--ease);
}
.compare__opt:hover { border-color: var(--brand-line); transform: translateY(-2px); }
.compare__opt[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-wash); }

.compare__tag { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.compare__opt[aria-pressed="true"] .compare__tag { color: var(--brand); }

.compare__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.compare__row + .compare__row { border-top: 1px dashed var(--line); padding-top: 14px; }
.compare__opt[aria-pressed="true"] .compare__row + .compare__row { border-top-color: var(--brand-line); }
.compare__k { font-size: 14px; color: var(--ink-3); }
.compare__v {
  font-family: var(--font-en);
  font-size: clamp(27px, 3.4vw, 37px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.compare__u { font-family: var(--font-kr); font-size: 14.5px; font-weight: 400; color: var(--ink-3); margin-left: 3px; }
.compare__v--hi { color: var(--brand); }

.compare__hint {
  margin-top: 18px;
  font-size: 14px;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 9px;
}
.compare__hint::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); flex: none;
}

.compare__answer {
  margin-top: 24px;
  border-left: 2px solid var(--brand);
  padding: 4px 0 4px clamp(20px, 3vw, 30px);
  display: none;
}
.compare__answer.is-open { display: block; animation: fadeUp .5s var(--ease); }
.compare__answer > * + * { margin-top: .95em; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================
   목적별 탭
   ============================================================ */
.tabs__list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tabs__tab {
  padding: 11px 22px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-3);
  transition: background-color .24s var(--ease), border-color .24s var(--ease), color .24s var(--ease);
}
.tabs__tab:hover { border-color: var(--brand-line); color: var(--brand); }
.tabs__tab[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.tabs__panel[hidden] { display: none; }
.tabs__panel { animation: fadeUp .45s var(--ease); }
.tabs__panelInner {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(16px, 4vw, 48px);
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-card);
  padding: clamp(26px, 4vw, 44px);
}
.tabs__goal {
  font-size: clamp(19px, 2.1vw, 23px);
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.025em;
  line-height: 1.45;
}
@media (max-width: 680px) { .tabs__panelInner { grid-template-columns: 1fr; gap: 14px; } }

/* ============================================================
   아코디언
   ============================================================ */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  text-align: left;
  padding: clamp(22px, 3vw, 30px) 4px;
  transition: color .2s var(--ease);
}
.acc__btn:hover .acc__ttl { color: var(--brand); }
.acc__idx { font-family: var(--font-en); font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--brand); }
.acc__ttl {
  font-size: clamp(18px, 2.1vw, 23px);
  font-weight: 700; color: var(--ink);
  letter-spacing: -0.025em;
  transition: color .2s var(--ease);
}
.acc__ttl em {
  display: block;
  font-style: normal;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0;
  margin-top: 6px;
}
.acc__icon { position: relative; width: 20px; height: 20px; flex: none; }
.acc__icon::before, .acc__icon::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: var(--ink-3);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease), background-color .2s var(--ease);
}
.acc__icon::before { width: 13px; height: 1.4px; }
.acc__icon::after  { width: 1.4px; height: 13px; }
.acc__btn:hover .acc__icon::before, .acc__btn:hover .acc__icon::after { background: var(--brand); }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: translate(-50%,-50%) scaleY(0); }
.acc__btn[aria-expanded="true"] .acc__icon::before { background: var(--brand); }

.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease); }
.acc__panel.is-open { grid-template-rows: 1fr; }
.acc__panelInner { overflow: hidden; }
.acc__body {
  padding: 0 4px clamp(26px, 3vw, 34px) 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 40px);
}
@media (max-width: 760px) { .acc__body { grid-template-columns: 1fr; padding-left: 4px; gap: 18px; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 13.5px;
  color: var(--ink-2);
  background: var(--bg-soft);
  border-radius: 100px;
  padding: 7px 15px;
}
.section--soft .chip { background: var(--bg-card); }

/* ============================================================
   프로젝트 그리드 + 모달
   ============================================================ */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.filters button {
  padding: 12px 20px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 14px; font-weight: 500;
  color: var(--ink-3);
  transition: background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.filters button:hover { border-color: var(--brand-line); color: var(--brand); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.filters button span { font-family: var(--font-en); font-size: 12px; opacity: .55; margin-left: 5px; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(18px, 2.4vw, 26px);
}
.work-card {
  text-align: left;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-card);
  overflow: hidden;
  transition: border-color .25s var(--ease), transform .3s var(--ease);
}
.work-card:hover { border-color: var(--brand-line); transform: translateY(-3px); }
.work-card[hidden] { display: none; }
.work-card__thumb { aspect-ratio: 16 / 9; background: var(--bg-soft); overflow: hidden; position: relative; }
.work-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.work-card:hover .work-card__thumb img { transform: scale(1.04); }
.work-card__thumb::after {
  content: '자세히 보기';
  position: absolute; inset: auto 0 0 0;
  padding: 26px 18px 14px;
  font-size: 13px; font-weight: 500; color: #fff;
  background: linear-gradient(transparent, rgba(23,35,31,.74));
  opacity: 0; transition: opacity .3s var(--ease);
}
.work-card:hover .work-card__thumb::after,
.work-card:focus-visible .work-card__thumb::after { opacity: 1; }
.work-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.work-card__body h3 { font-size: 17px; line-height: 1.5; }
.work-card__meta { font-size: 13.5px; color: var(--ink-3); }
.work-card__role { font-size: 13px; color: var(--brand); margin-top: auto; padding-top: 10px; }

.modal {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  padding: var(--gutter);
  background: rgba(23,35,31,.55);
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__box {
  position: relative;
  width: min(600px, 100%);
  max-height: min(88vh, 860px);
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--r-md);
  transform: translateY(14px) scale(.985);
  transition: transform .32s var(--ease);
}
.modal.is-open .modal__box { transform: none; }
.modal__thumb { aspect-ratio: 16/9; background: var(--bg-soft); }
.modal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.modal__body { padding: clamp(24px, 4vw, 34px); }
.modal__body h3 { font-size: clamp(20px, 2.4vw, 25px); margin-bottom: 10px; }
.modal__meta { font-size: 14px; color: var(--ink-3); }
.modal__role {
  display: inline-block; margin: 14px 0 18px;
  font-size: 13px; color: var(--brand);
  background: var(--brand-wash); border-radius: 100px; padding: 6px 14px;
}
.modal__desc { color: var(--ink-2); font-size: 16px; }
.modal__close {
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(251,251,249,.94);
  color: var(--ink);
  font-size: 20px; line-height: 1;
  transition: background-color .2s var(--ease);
}
.modal__close:hover { background: #fff; }

/* ============================================================
   로고 · 이력 · 숫자
   ============================================================ */
.logos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 14px;
  align-items: center;
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--line);
}
.logos__label { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); margin-bottom: 6px; }
.logos img {
  width: 100%; height: 52px; object-fit: contain;
  filter: grayscale(1); opacity: .45;
  transition: opacity .3s var(--ease), filter .3s var(--ease);
}
.logos img:hover { filter: none; opacity: 1; }
@media (max-width: 860px) { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .logos img { height: 44px; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--line);
  padding-block: 36px 44px;
  font-size: 14px;
  color: var(--ink-3);
}
.footer__inner { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
.footer__links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__links a { transition: color .2s var(--ease); }
.footer__links a:hover { color: var(--brand); }
.footer__name { color: var(--ink); font-weight: 500; }

.to-top {
  position: fixed;
  right: clamp(16px, 3vw, 30px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 150;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--ink-2);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s var(--ease), visibility .3s, transform .3s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--brand); color: var(--brand); }

@media (max-width: 520px) {
  body { font-size: 16px; }
  .work-grid { grid-template-columns: 1fr; }
}
/* Shared page rhythm and editorial home */
:root { --maxw: 1240px; --brand: #347769; --brand-deep: #24594e; }
body { line-height: 1.75; }
.section { padding-block: clamp(56px, 7vw, 88px); }
.section--tight { padding-block: clamp(42px, 5vw, 64px); }
.sec-head { margin-bottom: 32px; }
.sec-head__main { align-items: start; }
.h1 { font-size: clamp(36px, 4.7vw, 64px); line-height: 1.25; }
.h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.4; }
.hero--page { text-align: left; padding-top: calc(var(--nav-h) + 65px); padding-bottom: 64px; border-bottom: 1px solid var(--line); }
.hero--page .h1 { margin: 0; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.duo > .stack { max-width: 40em; }
.grid--half { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.body-text { font-size: 16px; line-height: 1.8; }
.info-row { display: grid; grid-template-columns: 200px 1fr; gap: 30px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.info-list { border-top: 1px solid var(--line); }
.info-row dt { color: var(--ink); font-weight: 700; }
.cta-band { text-align: center; }
.cta-band .btn-row { justify-content: center; margin-top: 26px; }
.cta-band .lead { margin-top: 16px; }
.cta-band .sec-label { justify-content: center; }
.section-intro { margin-top: 18px; max-width: 42em; }
.profile-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-bottom:24px; }
.topic__en { font: 12px var(--font-en); letter-spacing:.08em; color:var(--brand); }
.article { padding-bottom: 72px; }
.home-intro { padding: calc(var(--nav-h) + 24px) 0 44px; }
.intro-topline { display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:16px; font-size:12px; color:var(--ink-3); }
.intro-grid { display:grid; grid-template-columns: 1.25fr 1fr; gap:40px; align-items:center; padding:48px 0 42px; }
.intro-grid .lead { margin-top:22px; font-size:17px; }
.title-accent { color:var(--brand-deep); }
.direction-art { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:24px 16px; background-image:radial-gradient(var(--line) 1px,transparent 1px); background-size:18px 18px; min-height:280px; }
.art-caption,.art-bottom { font-size:13px; color:var(--ink-3); background:var(--bg); padding:0 8px; }
.art-circles { position:relative; width:100%; height:190px; }
.art-circle { position:absolute; top:8px; width:174px; height:174px; border:1px solid #8eada2; border-radius:50%; display:flex; flex-direction:column; justify-content:center; text-align:center; font-size:13px; line-height:1.6; }
.art-circle b { font-size:24px; font-weight:500; }
.art-circle--a { right:calc(50% - 18px); background:rgba(146,180,164,.15); padding-right:12px; }
.art-circle--b { left:calc(50% - 18px); background:rgba(200,189,158,.18); border-color:#bcb295; padding-left:12px; }
.art-cross { position:absolute; left:50%; top:80px; transform:translateX(-50%); color:var(--brand); font-size:20px; }
.service-choices { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.service-choice { background:#f0f2ed; border:1px solid #d8ded4; padding:25px 30px; position:relative; transition:background .2s,border-color .2s,transform .2s; }
.service-choice:hover { background:#e6ece5; border-color:var(--brand); transform:translateY(-3px); }
.choice-top { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--ink-2); }
.choice-top > span { font-size:24px; line-height:1; }
.service-choice h2 { font-size:29px; margin:12px 0 10px; }
.service-choice p { font-size:14px; line-height:1.8; }
.choice-bottom { border-top:1px solid #d4ddd2; margin-top:20px; padding-top:15px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:11px; color:var(--ink-3); }
.choice-bottom b { font-size:12px; font-weight:500; color:var(--brand-deep); }
.profile-strip { background:var(--bg-soft); border-block:1px solid var(--line); }
.profile-strip .container { display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr; align-items:center; gap:28px; padding-block:25px; font-size:13px; }
.profile-strip .container > span { border-left:1px solid #d2d4ca; padding-left:26px; }
.featured-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.featured { border-bottom:1px solid var(--line); padding-bottom:24px; }
.featured img { width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--bg-soft); }
.featured > div { padding-top:20px; }
.featured .sec-label { margin-bottom:10px; font-size:12px; }
.featured h3 { font-size:21px; }
.featured p { margin-top:8px; color:var(--ink-3); font-size:14px; }
.featured .link-arrow { margin-top:16px; font-size:13px; }
.featured:hover h3 { color:var(--brand); }
.contact-hero { padding:calc(var(--nav-h) + 65px) 0 64px; }
.contact-hero .sec-label { justify-content:center; }
.contact-hero .h1 { font-size:clamp(32px,4vw,52px); }
.contact-hero .lead { margin-top:22px; }
.contact-mail { display:inline-block; font:600 clamp(26px,5vw,64px)/1.3 var(--font-en); letter-spacing:-.03em; color:var(--brand-deep); border-bottom:2px solid var(--brand-line); margin:34px 0 22px; overflow-wrap:anywhere; }
.contact-mail span { font-size:.6em; }
.contact-hero .copy-btn { color:var(--ink-2); border-color:var(--line); }
.contact-hero .copy-btn:hover { color:var(--brand-deep); border-color:var(--brand); }
.contact-guide { margin:38px auto 0; padding-top:26px; border-top:1px solid var(--line); max-width:680px; font-size:14px; }
.contact-guide .chips { justify-content:center; margin-top:18px; }
.dual { grid-template-columns:repeat(2,minmax(0,1fr)); }
.plan { grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.compare__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:800px) {
 .intro-grid { grid-template-columns:1fr; gap:24px; padding-block:32px; }
 .direction-art { display:none; }
 .intro-topline > span:last-child { display:none; }
 .home-intro { padding-top:calc(var(--nav-h) + 16px); }
 .duo { grid-template-columns:1fr; gap:24px; }
 .profile-strip .container { grid-template-columns:1fr 1fr; gap:18px; }
 .profile-strip .container > span { padding-left:16px; }
 .service-choice { padding:24px; }
 .hero--page { padding-top:calc(var(--nav-h) + 40px); padding-bottom:42px; }
}
@media(max-width:580px) {
 .service-choices,.featured-grid,.grid--half,.dual { grid-template-columns:1fr; }
 .service-choice h2 { font-size:26px; }
 .service-choice p br { display:none; }
 .info-row { grid-template-columns:1fr; gap:8px; padding:20px 0; }
 .compare__grid { grid-template-columns:1fr; }
 .contact-hero { padding-top:calc(var(--nav-h) + 40px); }
 .contact-hero .lead br { display:none; }
 .contact-mail { letter-spacing:-.03em; }
}
/* White surfaces, clear text, and restrained interactive accents */
:root { --bg:#fff; --bg-soft:#f6f7f5; --ink:#171d1a; --ink-2:#36413c; --ink-3:#59665f; --line:#dce2dd; --ink-inv-2:#d0dbd5; }
.nav { background:rgba(255,255,255,.95); }
.home-intro { padding-top:calc(var(--nav-h) + 36px); }
.intro-grid { padding:32px 0 56px; min-height:360px; }
.service-choice { background:#fff; border-color:#ced8d1; }
.service-choice:hover { background:#f3f8f5; }
.profile-strip { background:#f6f7f5; }
.featured { display:flex; flex-direction:column; border-bottom:0; }
.featured > div { padding:0 0 24px; }
.featured img { margin-top:auto; }
.topic::before { inset:0; width:auto; height:auto; border:2px solid var(--brand); border-radius:inherit; background:none; transform:none; opacity:0; pointer-events:none; transition:opacity .25s var(--ease); }
.topic:hover { border-color:var(--brand); }
.topic:hover::before { opacity:1; transform:none; }
.mailto,.contact-mail { user-select:text; cursor:text; border-bottom:0; }
.mailto:hover { color:var(--ink-inv); }
.contact-hero .h1 { font-size:clamp(32px,4vw,48px); }
.contact-hero .lead { margin-top:18px; }
.strategy-intro { display:grid; grid-template-columns:1.5fr 1fr; align-items:center; gap:36px; }
.strategy-intro .h1 { font-size:clamp(32px,3.4vw,48px); }
.portrait-interactive { --portrait-x:0deg; --portrait-y:0deg; position:relative; display:flex; flex-direction:column; align-items:center; justify-self:center; width:min(100%,340px); padding:20px 20px 12px; isolation:isolate; }
.portrait-disc { display:block; width:220px; height:244px; overflow:hidden; border-radius:46% 46% 42% 42%; background:#eff4ef; border:1px solid #d5dfd7; transform:perspective(650px) rotateX(var(--portrait-x)) rotateY(var(--portrait-y)); transition:transform .25s ease,background .3s ease; }
.portrait-disc img { width:174px; height:auto; margin:15px auto 0; }
.portrait-orbit { position:absolute; width:284px; height:214px; border:1px solid #d7e0da; border-radius:50%; top:40px; transform:rotate(-24deg); z-index:-1; transition:transform .6s ease; }
.portrait-orbit::after { content:''; position:absolute; top:22px; right:32px; width:9px; height:9px; border-radius:50%; background:var(--brand); }
.portrait-greeting { font-size:15px; font-weight:500; color:var(--ink); margin-top:22px; }
.portrait-hint { font-size:11px; color:var(--ink-3); margin-top:6px; }
.portrait-interactive:hover .portrait-orbit,.portrait-interactive:focus-visible .portrait-orbit { transform:rotate(-8deg); }
.portrait-interactive[aria-pressed=true] .portrait-disc { background:#e3eee6; }
.portrait-interactive[aria-pressed=true] .portrait-orbit { transform:rotate(12deg); }
@media(max-width:800px) {
 .intro-grid { grid-template-columns:1.2fr 1fr; gap:12px; padding:24px 0 60px; min-height:0; }
 .intro-grid .h1 { font-size:clamp(32px,5vw,44px); }
 .portrait-interactive { padding-inline:0; }
 .portrait-disc { width:160px; height:180px; }
 .portrait-disc img { width:130px; margin-top:10px; }
 .portrait-orbit { width:198px; height:155px; top:30px; }
 .portrait-greeting { font-size:12px; }
 .strategy-intro { grid-template-columns:1fr; }
 .strategy-intro .direction-art { display:flex; max-width:440px; width:100%; justify-self:center; }
}
@media(max-width:580px) {
 .intro-grid { grid-template-columns:1fr; gap:26px; padding-bottom:54px; }
 .intro-grid .h1 { font-size:clamp(34px,8.8vw,46px); }
 .portrait-interactive { justify-self:center; }
 .portrait-disc { width:164px; height:178px; }
 .portrait-greeting { margin-top:14px; }
 .home-intro { padding-top:calc(var(--nav-h) + 24px); }
 .art-circle { width:140px; height:140px; }
 .art-circles { height:160px; }
 .art-cross { top:62px; }
 .direction-art { min-height:250px; }
 .featured > div { padding-bottom:18px; }
}
@media(prefers-reduced-motion:reduce) { .portrait-disc,.portrait-orbit { transform:none !important; } }
/* Service identities and portfolio presentation */
.page-education { --brand:#3d6e8f; --brand-deep:#2c5572; --brand-line:#c8dce9; --brand-wash:#eef5fa; --brand-mint:#acd8f2; --bg-deep:#1d2b38; --line-deep:#3a4d5b; --bg-soft:#f4f7fa; }
.page-strategy { --brand:#347769; --brand-deep:#24594e; --bg-soft:#f4f7f4; }
.service-hero { text-align:center; }
.service-hero .sec-label { justify-content:center; }
.hero--page .service-hero .h1 { font-size:clamp(34px,4.2vw,58px); max-width:none !important; margin-inline:auto; line-height:1.35; }
.service-hero .hero__meta { max-width:none !important; justify-content:center; margin-top:26px; }
.service-hero .direction-art { width:min(100%,720px); margin:36px auto 0; background:none; min-height:340px; padding:0; gap:18px; }
.service-hero .art-caption,.service-hero .art-bottom { font-size:15px; }
.service-hero .art-circles { height:250px; }
.service-hero .art-circle { width:240px; height:240px; font-size:17px; }
.service-hero .art-circle b { font-size:34px; }
.service-hero .art-circle--a { right:calc(50% - 35px); }
.service-hero .art-circle--b { left:calc(50% - 35px); }
.service-hero .art-cross { top:100px; font-size:28px; }
.learning-planet { position:relative; width:min(100%,620px); height:340px; margin:30px auto 0; display:grid; place-items:center; }
.planet-orbit { position:absolute; border:1px solid #c6d8e5; border-radius:50%; }
.planet-orbit--outer { width:94%; height:260px; transform:rotate(-12deg); }
.planet-orbit--inner { width:75%; height:300px; transform:rotate(28deg); }
.planet-core { display:flex; flex-direction:column; justify-content:center; gap:9px; width:228px; height:228px; border-radius:50%; border:1px solid #adc9dc; background:radial-gradient(circle at 35% 30%,#f5faff,#d5e6f0); box-shadow:0 18px 40px #497b9b12; color:var(--brand-deep); z-index:1; }
.planet-core small { font-size:12px; }
.planet-core strong { font-size:30px; color:var(--brand-deep); }
.planet-core > span { font-size:16px; }
.planet-label { position:absolute; padding:7px 12px; background:var(--bg); color:var(--ink-2); font-size:14px; z-index:2; }
.planet-label--a { top:35px; left:12%; }.planet-label--b { right:3%; top:160px; }.planet-label--c { bottom:15px; left:22%; }
.cv__content { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 44px; }
.career-heading { margin-bottom:36px; }
.acc__body { align-items:start; }
.acc__body .chips { align-content:start; align-items:flex-start; }
.compare__k,.compare__u { font-size:18px; }.compare__tag { font-size:15px; }.compare__v { font-size:clamp(36px,4vw,48px); }
.contact-guide .chips { gap:0; counter-reset:brief; }
.contact-guide .tag { border:0; border-radius:0; padding:10px 16px; color:var(--ink-2); font-size:14px; }
.contact-guide .tag::before { counter-increment:brief; content:'0' counter(brief); color:var(--brand); font:12px var(--font-en); margin-right:8px; }
.contact-hero .copy-btn { background:var(--brand-deep); color:white; border-color:var(--brand-deep); }
.contact-hero .copy-btn:hover { background:var(--brand); color:white; }
.footer-business { margin-top:26px; padding-top:20px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-3); line-height:1.9; }
.footer-business span { margin-left:18px; }.footer-business address { font-style:normal; }
.home-career { margin-top:32px; max-width:470px; }
.home-career .sec-label { font-size:12px; margin-bottom:14px; }
.home-career dl { display:grid; gap:10px; }
.home-career dl > div { display:grid; grid-template-columns:120px 1fr; gap:14px; font-size:14px; }
.home-career dt { color:var(--ink-3); }.home-career dd { color:var(--ink); }
.portrait-interactive { cursor:default; }
.client-band { padding:26px 0; border-block:1px solid var(--line); background:#fafbf9; overflow:hidden; }
.logos img { height:50px; max-width:140px; justify-self:center; padding:6px 12px; opacity:.75; }
.logos img[src*="elice"] { max-width:106px; height:40px; }
.showcase { overflow:hidden; background:linear-gradient(#fff,#f7f9f8 70%,#fff); }
.showcase-head { display:flex; justify-content:space-between; gap:24px; align-items:end; }
.showcase-controls { display:flex; gap:10px; }.showcase-controls button { width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:white; }.showcase-controls button:hover { color:var(--brand); border-color:var(--brand); }
.floating-gallery { position:relative; height:400px; margin:38px -20px 0; perspective:1000px; }
.floating-case { position:absolute; width:53%; max-width:570px; top:25px; left:50%; margin-left:-26.5%; background:#fff; border:1px solid #dce3df; padding:10px; border-radius:8px; box-shadow:0 6px 12px -8px #17231f40; transition:transform .55s ease,opacity .4s ease; transform:translateX(calc(var(--offset,0)*72%)) rotateY(calc(var(--offset,0)*-15deg)) scale(var(--scale,1)); z-index:var(--layer,1); }
.floating-case img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:3px; }.floating-case span { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:14px 7px 5px; }.floating-case strong { font-size:15px; }.floating-case small { color:var(--ink-3); font-size:12.5px; }
.floating-case[aria-hidden=true] { pointer-events:none; }.gallery-status { text-align:center; font-size:13px; color:var(--ink-3); }
@media(max-width:800px) { .home-career dl > div { grid-template-columns:1fr; gap:0; }.floating-gallery { height:320px; }.floating-case { width:70%; margin-left:-35%; }.floating-case span { display:block; }.floating-case small { display:block; margin-top:4px; } }
@media(max-width:580px) {
 .hero--page .service-hero .h1 { font-size:30px; }
 .service-hero .art-circle { width:168px; height:168px; font-size:14px; }.service-hero .art-circle b { font-size:26px; }.service-hero .art-circles { height:182px; }.service-hero .art-cross { top:69px; font-size:22px; }.service-hero .direction-art { min-height:265px; }.service-hero .art-caption,.service-hero .art-bottom { font-size:13px; }
 .learning-planet { height:285px; }.planet-core { width:178px; height:178px; }.planet-core small { font-size:12px; }.planet-core strong { font-size:25px; }.planet-orbit--outer { height:200px; }.planet-orbit--inner { height:265px; }.planet-label { font-size:12px; padding:4px 6px; }.planet-label--a { left:2%; top:26px; }.planet-label--b { right:0; top:196px; }.planet-label--c { left:10%; bottom:8px; }
 .cv__content { grid-template-columns:1fr; }.home-career dl > div { grid-template-columns:110px 1fr; gap:8px; }.home-career { margin-top:24px; }.home-career dd { font-size:13px; }
 .floating-gallery { height:270px; margin-inline:0; }.floating-case { width:84%; margin-left:-42%; }.floating-case strong { font-size:13px; }.floating-case small { font-size:12px; }.showcase-head { align-items:center; }.showcase-head .h2 { font-size:24px; }.showcase-controls { gap:8px; }.showcase-controls button { width:44px; height:44px; }
 .footer-business span { display:block; margin-left:0; }.contact-guide .chips { display:grid; grid-template-columns:1fr 1fr; text-align:left; }.contact-guide .tag { padding:8px; font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .floating-case { transition:none; } }
/* ============================================================
   나름연구소 — 회사 사이트 전용
   ============================================================ */
.brand { display: flex; align-items: center; gap: 11px; }
.brand__logo { width: 22px; height: auto; flex: none; }
.brand__text { display: block; line-height: 1.25; }
.contact-mail, .mailto { cursor: pointer; }
.mailto:hover { color: var(--brand-mint); }
.contact-mail:hover { color: var(--brand); }
.contact-mail { user-select: auto; }

/* 홈 히어로 — '나다움' 오비트 */
.identity-art { position: relative; height: clamp(300px, 30vw, 400px); background: radial-gradient(ellipse at center, #e3f3ed 0, transparent 68%); }
.identity-orbit { position: absolute; width: 80%; height: 64%; left: 10%; top: 18%; border: 1px solid #a9d9cd; border-radius: 50%; }
.orbit-one { transform: rotate(-38deg); }
.orbit-two { transform: rotate(38deg); }
.identity-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(72px, 7vw, 100px); font-weight: 500; letter-spacing: -.08em; line-height: 1; color: var(--ink); transition: transform .35s ease; }
.identity-core span { display: block; font-size: clamp(28px, 2.8vw, 36px); letter-spacing: .15em; margin: 12px 0 0 7px; }
.identity-core i { position: absolute; right: -24px; top: 0; width: 17px; height: 17px; border-radius: 50%; background: linear-gradient(135deg, #00D9A0, #01A4DC); }
.art-label { position: absolute; background: var(--bg); border: 1px solid var(--line); border-radius: 30px; padding: 7px 15px; font-size: 13px; color: var(--ink-2); }
.label-one { top: 20%; left: 6%; }
.label-two { top: 46%; right: 0; }
.label-three { bottom: 14%; left: 18%; }
@media (max-width: 800px) { .identity-art { height: 240px; } .identity-core { font-size: 64px; } .identity-core span { font-size: 24px; } }
@media (max-width: 580px) { .identity-art { height: 200px; } .identity-core { font-size: 56px; } .art-label { font-size: 12px; padding: 5px 12px; } }

/* 사람들 */
.people-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.people-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(24px, 3vw, 32px); }
.people-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.people-photo { flex: none; width: 76px; height: 76px; border-radius: 50%; background: var(--bg-soft); overflow: hidden; }
.people-photo img { width: 100%; height: 100%; object-fit: cover; }
.people-heading h3 { font-size: 20px; }
.people-role { font-size: 14px; font-weight: 500; color: var(--brand); margin-top: 2px; }
.people-expertise { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.6; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.people-bio { display: grid; gap: 9px; }
.people-bio li { position: relative; padding-left: 15px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.people-bio li::before { content: ''; position: absolute; left: 0; top: .72em; width: 4px; height: 4px; border-radius: 50%; background: var(--brand-line); }
@media (max-width: 900px) { .people-grid { grid-template-columns: 1fr; } }
@media (min-width: 801px) { .br-desktop { display: inline; } }
@media (max-width: 800px) { .br-desktop { display: none; } }

/* 협력기관 로고 (정지) */
.client-band .sec-label { margin-bottom: 18px; }
.client-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 20px; align-items: center; }
.client-grid img { width: 100%; height: 50px; object-fit: contain; filter: grayscale(.65); opacity: .8; padding: 6px 12px; }
.client-grid img[src*="elice"] { height: 36px; }
@media (max-width: 860px) { .client-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .client-grid img { height: 42px; } }

/* 서비스 3갈래 */
.service-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.service-choice h2 { font-size: 24px; }
@media (max-width: 960px) { .service-choices { grid-template-columns: 1fr; } }

/* 기획 · 제작 히어로 흐름 */
.flow-art { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; max-width: 760px; margin: 34px auto 0; counter-reset: step; }
.flow-art li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 38px; text-align: center; }
.flow-art li::before { content: ''; position: absolute; top: 10px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--bg); border: 2px solid var(--brand); z-index: 1; }
.flow-art li::after { content: ''; position: absolute; top: 16px; left: 50%; width: 100%; height: 2px; background: var(--brand-line); }
.flow-art li:last-child::after { display: none; }
.flow-art__end::before { background: var(--brand); }
.flow-art b { font-size: 18px; color: var(--ink); }
.flow-art span { font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 580px) { .flow-art b { font-size: 15px; } .flow-art span { font-size: 11.5px; } }

/* 태그 · 주제 카드 (정리 과정에서 분리) */
.tag { font-size: 13.5px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 100px; padding: 5px 13px; line-height: 1.6; }
.section--deep .tag { border-color: var(--line-deep); color: var(--ink-inv-2); }
.grid--half .topic { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(26px, 3.2vw, 38px); display: flex; flex-direction: column; gap: 12px; position: relative; transition: border-color .25s var(--ease); }
.topic h3 { font-size: clamp(19px, 2vw, 22px); }
.topic p { font-size: 15.5px; line-height: 1.8; color: var(--ink-2); }

/* 서비스 3행 */
.service-rows { border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.7fr) auto; gap: 8px 28px; align-items: baseline; padding: clamp(26px, 3.4vw, 40px) 4px; border-bottom: 1px solid var(--line); transition: background-color .25s var(--ease); }
.service-row:hover { background: #f3f8f5; }
.service-row__no { font-size: 13px; color: var(--brand); font-weight: 600; }
.service-row h2 { font-size: clamp(24px, 2.8vw, 32px); letter-spacing: -.03em; }
.service-row p { font-size: 15.5px; line-height: 1.75; color: var(--ink-2); max-width: 34em; }
.service-row small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.service-row__go { font-size: 14.5px; font-weight: 600; color: var(--brand-deep); white-space: nowrap; }
@media (max-width: 900px) { .service-row { grid-template-columns: 40px minmax(0, 1fr); } .service-row p, .service-row__go { grid-column: 2; } .service-row__go { margin-top: 6px; } }

/* 주요 경력: 하나의 목록 */
.record { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 5vw, 72px); margin-top: clamp(30px, 4vw, 48px); }
.record li { display: grid; gap: 4px; padding: 20px 0; border-top: 1px solid var(--line-deep); }
.record strong { font-size: clamp(16.5px, 1.6vw, 18px); font-weight: 600; color: var(--ink-inv); line-height: 1.5; }
.record span { font-size: 15px; color: var(--ink-inv-2); line-height: 1.65; }
@media (max-width: 720px) { .record { grid-template-columns: 1fr; } }

/* ============================================================
   줄바꿈 · 타입 스케일
   ============================================================ */
h1, h2, h3, .h1, .h2, .h3, .tabs__goal, .acc__ttl, .service-row h2 { text-wrap: balance; }
p, li, dd, .lead, .body-text, .section-intro { text-wrap: pretty; }
.home-intro .h1 { font-size: clamp(34px, 4.6vw, 68px); line-height: 1.3; }
.home-intro .lead { font-size: clamp(15.5px, 1.3vw, 17px); max-width: 32em; }
@media (max-width: 580px) { .home-intro .lead br { display: none; } }
.flow-art { margin-bottom: clamp(28px, 4vw, 44px); }

/* ============================================================
   스크롤 등장 (JS가 켜진 경우에만)
   ============================================================ */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   포인터 반응 (마우스가 있는 환경에서만)
   ============================================================ */
@media (hover: hover) {
  .work-card, .people-card, .topic, .compare__opt { transition: transform .3s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease); }
  .work-card:hover, .people-card:hover, .topic:hover { transform: translateY(-4px); border-color: var(--brand-line); box-shadow: 0 8px 16px -12px rgba(23,35,31,.35); }
  .people-card:hover .people-photo { transform: scale(1.06); }
  .people-photo { transition: transform .4s var(--ease); }

  .service-row:hover h2 { color: var(--brand-deep); }
  .service-row__go span { display: inline-block; transition: transform .25s var(--ease); }
  .service-row:hover .service-row__go span { transform: translateX(6px); }
  .service-row h2 { transition: color .2s var(--ease); }

  .record li { transition: border-color .25s var(--ease); }
  .record li strong { transition: color .25s var(--ease); }
  .record li:hover { border-top-color: var(--brand-mint); }
  .record li:hover strong { color: var(--brand-mint); }

  .client-grid img { transition: filter .3s var(--ease), opacity .3s var(--ease); }
  .client-grid img:hover { filter: none; opacity: 1; }

  .chip { transition: background-color .2s var(--ease), color .2s var(--ease); }
  .chip:hover { background: var(--brand-wash); color: var(--brand-deep); }
  .tag { transition: border-color .2s var(--ease), color .2s var(--ease); }
  .hero__meta .tag:hover { border-color: var(--brand); color: var(--brand-deep); }

  .flow-art li::before { transition: background-color .25s var(--ease), transform .25s var(--ease); }
  .flow-art li b { transition: color .25s var(--ease); }
  .flow-art li:hover::before { background: var(--brand); transform: scale(1.25); }
  .flow-art li:hover b { color: var(--brand); }

  .art-circle { transition: transform .5s var(--ease), background-color .3s var(--ease); }
  .art-circles:hover .art-circle--a { transform: translateX(16px); }
  .art-circles:hover .art-circle--b { transform: translateX(-16px); }
  .art-circle--a:hover { background: rgba(52,119,105,.16); }
  .art-circle--b:hover { background: rgba(200,189,158,.34); }

  .orbit-one, .orbit-two { transition: transform 1.2s var(--ease); }
  .identity-art:hover .orbit-one { transform: rotate(-16deg); }
  .identity-art:hover .orbit-two { transform: rotate(16deg); }
  .identity-core { transform: translate(calc(-50% + var(--mx, 0) * 10px), calc(-50% + var(--my, 0) * 8px)); transition: transform .35s var(--ease); }
  .identity-art:hover .identity-core { transform: translate(calc(-50% + var(--mx, 0) * 10px), calc(-50% + var(--my, 0) * 8px)) scale(1.05); }
  .art-label { transition: border-color .25s var(--ease), color .25s var(--ease); }
  .art-label:hover { border-color: var(--brand); color: var(--brand-deep); }

  .planet-orbit { transition: transform 1.2s var(--ease); }
  .learning-planet:hover .planet-orbit--outer { transform: rotate(-4deg); }
  .learning-planet:hover .planet-orbit--inner { transform: rotate(40deg); }
  .planet-label { transition: color .25s var(--ease); }
  .planet-label:hover { color: var(--brand-deep); }
}
.work-card:focus-visible, .service-row:focus-visible, .people-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .work-card:hover, .people-card:hover, .topic:hover, .art-circles:hover .art-circle, .identity-art:hover .identity-core { transform: none; }
}

/* ============================================================
   간격 조정: 제목 아래 본문은 촘촘하게, 제목과 비주얼 사이는 넉넉하게
   ============================================================ */
.stack > * + * { margin-top: .55em; }
.lead { line-height: 1.7; }
.duo { gap: 26px; }
.service-row p { line-height: 1.65; }

.hero--page .h1 + .hero__meta { margin-top: 36px; }
.service-hero .direction-art { margin-top: 56px; }
.learning-planet { margin: 52px auto 0; }
.learning-planet + .hero__meta { margin-top: 44px; }
.flow-art { margin-top: 40px; }

.home-intro .lead { margin-top: 28px; }
.intro-grid { padding: 40px 0 72px; }
.sec-head { margin-bottom: clamp(36px, 5vw, 56px); }
main .reveal[style*="margin-bottom"] { margin-bottom: clamp(32px, 4.5vw, 56px) !important; }

.catchphrase { font-size: clamp(32px, 5vw, 56px); line-height: 1.3; letter-spacing: -.035em; }
.catchphrase__brand { margin-top: 28px; font-size: 17px; font-weight: 600; letter-spacing: .08em; color: var(--brand-mint); }
.contact-hero .lead { margin-top: 24px; }
@media (max-width: 800px) { .service-hero .direction-art { margin-top: 40px; } .learning-planet { margin-top: 36px; } .intro-grid { padding-bottom: 48px; } }

/* ============================================================
   홈 개편: 히어로 로고, 소개, 서비스, 협력기관 흐름
   ============================================================ */
.intro-grid { align-items: center; }
.hero-mark { display: flex; justify-content: center; }
.hero-mark img, .hero-mark video { height: clamp(260px, 30vw, 420px); width: auto; display:block; }
@media (max-width: 580px) { .hero-mark img, .hero-mark video { height: 230px; } }

.brand-intro { padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.brand-intro__text { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.7; font-weight: 500; color: var(--ink); max-width: 36em; margin-inline: auto; }
.brand-intro .identity-art { max-width: 560px; margin: clamp(28px, 4vw, 44px) auto 0; height: clamp(230px, 26vw, 340px); }
@media (max-width: 580px) { .brand-intro__text br { display: none; } .brand-intro .identity-art { display: block; } }
.services-home { padding-block: clamp(8px, 1vw, 16px) clamp(48px, 6vw, 80px); }

.client-band { padding: 30px 0 24px; }
.client-band .sec-label { margin-bottom: 14px; }
.logo-window { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logo-track { display: flex; width: max-content; animation: logoFlow 55s linear infinite; }
.logo-group { display: flex; flex: none; align-items: center; }
.client-logo { width: 180px; height: 80px; padding: 16px 30px; display: grid; place-items: center; }
.client-logo img { width: 120px; height: 44px; object-fit: contain; filter: grayscale(.65); opacity: .85; }
.client-logo img[src*="elice"] { width: 90px; height: 34px; }
.client-band:hover .logo-track { animation-play-state: paused; }
@keyframes logoFlow { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } .logo-window { overflow-x: auto; } .logo-group[aria-hidden="true"] { display: none; } }

.sec-head__main { gap: 14px; }

/* 홈 하단 문의 */
.cta-kicker { font-size: clamp(16px, 1.6vw, 19px); font-weight: 500; color: var(--brand-mint); margin-bottom: 18px; }
.cta-title { font-size: clamp(36px, 5.6vw, 64px); line-height: 1.2; letter-spacing: -.035em; font-weight: 700; color: var(--ink-inv); }
.cta-title span { color: var(--brand-mint); }
.cta-mail { margin-top: clamp(28px, 4vw, 44px); }
.mailto--sm { font-size: clamp(17px, 1.8vw, 22px); font-weight: 500; letter-spacing: -.01em; padding-bottom: 4px; color: var(--ink-inv-2); border-bottom: 1px solid rgba(53,224,176,.45); }
.mailto--sm:hover { color: var(--ink-inv); }

/* 전략 페이지 안내 문구 */
.compare-prompt { margin-top: 12px; font-size: 17px; font-weight: 500; color: var(--brand-deep); }

/* 벤 다이어그램: 평소엔 살짝 걸치고, 올리면 교집합이 생김 (글자는 가리지 않음) */
.art-circles { --shift: 28px; }
.service-hero .art-circle--a { right: calc(50% - 10px); }
.service-hero .art-circle--b { left: calc(50% - 10px); }
@media (max-width: 580px) { .art-circles { --shift: 16px; } }
@media (hover: hover) {
  .art-cross { opacity: 0; transition: opacity .35s var(--ease); }
  .art-circles:hover .art-cross { opacity: 1; }
  .art-circles:hover .art-circle--a { transform: translateX(var(--shift)); }
  .art-circles:hover .art-circle--b { transform: translateX(calc(var(--shift) * -1)); }
}
/* 화면에 들어오면(스크롤) 호버 없이도 겹쳐짐 */
  .art-circle { transition: transform .9s var(--ease); }
  .art-circles.is-merged .art-circle--a { transform: translateX(var(--shift)); }
  .art-circles.is-merged .art-circle--b { transform: translateX(calc(var(--shift) * -1)); }
  .art-arrow { opacity: 0; transform: scaleY(.2); transition: opacity .5s var(--ease) .5s, transform .6s var(--ease) .5s; }
  .art-circles.is-merged .art-arrow { opacity: 1; transform: none; }
  .art-cross { opacity: 0; transition: opacity .5s var(--ease) .4s; }
  .art-circles.is-merged .art-cross { opacity: 1; }


/* 갤러리 드래그 */
.floating-gallery { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.floating-gallery.is-dragging { cursor: grabbing; }
.floating-gallery img { -webkit-user-drag: none; user-drag: none; }
@media (max-width: 800px) { .service-hero .direction-art { display: flex; min-height: 300px; } }

/* ---- Home: full-screen logo hero + dark brand statement ---- */
.home-intro { min-height: 100svh; padding: calc(var(--nav-h) + 56px) 0 96px; display: flex; align-items: center; justify-content: center; position: relative; }
.home-intro > .container { width: 100%; display: flex; justify-content: center; }
.home-intro .hero-mark video { height: min(52vh, 480px); width: auto; max-width: 100%; }
.scroll-cue { position: absolute; left: 50%; bottom: 36px; width: 44px; height: 44px; margin-left: -22px; display: grid; place-items: center; color: var(--ink-3); text-decoration: none; }
.scroll-cue span { display: block; font-size: 30px; font-weight: 300; line-height: 1; transform: rotate(90deg); }
.scroll-cue:hover { color: var(--brand); }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue { animation: cue-bob 2.2s ease-in-out infinite; }
  @keyframes cue-bob { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(8px); opacity: 1; } }
}
@media (max-width: 580px) { .home-intro .hero-mark video { height: min(46vh, 340px); } .scroll-cue { bottom: 24px; } }

.brand-intro--dark { background: #0d1512; border-top: 0; color: #fff; padding: clamp(88px, 12vw, 160px) 0 clamp(96px, 12vw, 160px); }
.brand-intro--dark .brand-title { color: #fff; font-size: clamp(26px, 3.6vw, 52px); line-height: 1.3; margin: 0 auto clamp(28px, 4vw, 48px); text-wrap: balance; }
.brand-intro--dark .brand-title .title-accent { color: #35E0B0; display: inline; }
.brand-intro--dark .brand-intro__text { color: #c9d6d0; }
.brand-intro--dark .identity-art { background: radial-gradient(ellipse at center, rgba(0,224,160,.16) 0, transparent 68%); }
.brand-intro--dark .identity-orbit { border-color: rgba(255,255,255,.2); }
.brand-intro--dark .identity-core { color: #fff; }
.brand-intro--dark .identity-core i { background: linear-gradient(135deg, #00e0a0, #2aa8ff); }
.brand-intro--dark .art-label { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #dbe6e0; }
.brand-intro--dark .art-label:hover { border-color: #00e0a0; color: #00e0a0; }
@media (max-width: 580px) { .brand-intro--dark .brand-title { font-size: clamp(22px, 6.4vw, 30px); } .brand-intro--dark .brand-title .title-accent { display: block; } }

/* ---- Revisions: home service rows, client band, modal note, spacing ---- */
.services-home { padding-top: clamp(64px, 8vw, 112px); }
.service-row { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.7fr) 210px; padding: clamp(28px, 3.6vw, 44px) clamp(20px, 2.6vw, 36px); align-items: center; }
.service-row__no { align-self: start; padding-top: 8px; }
.service-row__go { justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 14.5px; font-weight: 600; transition: background-color .25s var(--ease); }
.service-row:hover .service-row__go { background: var(--brand-deep); }
@media (max-width: 900px) { .service-row { grid-template-columns: 40px minmax(0, 1fr); } .service-row p, .service-row__go { grid-column: 2; } .service-row__go { justify-self: start; margin-top: 10px; } }

.client-band { padding: 10px 0; }
.client-logo { height: 60px; padding: 8px 30px; }
.client-logo img { height: 36px; }
.client-logo img[src*="hanyang"] { width: 44px; height: 44px; }
.client-logo img[src*="elice"] { height: 28px; }

.planet-core { width: 262px; height: 262px; gap: 12px; }
.planet-core small { font-size: 15px; }
.planet-core strong { font-size: 38px; }
@media (max-width: 580px) { .planet-core { width: 214px; height: 214px; } .planet-core small { font-size: 13px; } .planet-core strong { font-size: 30px; } }

.record .record__sub { font-size: 13px; color: var(--ink-inv-2); opacity: .6; line-height: 1.5; }
.modal__thumb { position: relative; }
.modal__note { position: absolute; right: 10px; bottom: 8px; padding: 3px 8px; border-radius: 4px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; line-height: 1.4; }

.section-intro { margin-top: 18px; }
.flow-art { margin-top: clamp(40px, 5vw, 64px); margin-bottom: clamp(56px, 7vw, 96px); }

/* ---- Round 3 ---- */
/* hero label: no dash, centered */
.service-hero .sec-label::before { display: none; }
.service-hero .sec-label { justify-content: center; text-align: center; }

/* education topic note */
.topic-note { margin-top: 22px; font-size: 13.5px; color: var(--ink-3); text-align: center; }

/* contact */
.contact-hero .h1 { font-size: clamp(30px, 3.7vw, 44px); }
.contact-mail { font-size: clamp(20px, 2.4vw, 28px); margin: 30px 0 18px; }
.contact-guide > p { font-size: 16px; color: var(--ink-2); }

/* gallery status spacing */
.floating-gallery { margin-bottom: 36px; }
.gallery-status { margin-top: 12px; }

/* home service cards, side by side */
.service-rows { border-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.service-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: clamp(28px, 3.2vw, 40px); background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 28px -20px rgba(23,35,31,.35); transition: background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.service-row:hover { background: #f3f8f5; border-color: var(--brand-line); box-shadow: 0 18px 36px -22px rgba(23,35,31,.4); transform: translateY(-3px); }
.service-row__no { padding: 0; margin-bottom: 18px; }
.service-row h2 { margin-bottom: 14px; }
.service-row p { max-width: none; flex: 1; }
.service-row__go { margin-top: 28px; justify-self: auto; }
@media (max-width: 760px) { .service-rows { grid-template-columns: 1fr; } .service-row p, .service-row__go { grid-column: auto; } .service-row__go { justify-self: auto; margin-top: 24px; } }

/* piled client logos, fading downward */
.logos--pile { display: block; border-top: 1px solid var(--line); }
.logo-pile { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 4px; max-width: 920px; margin: 8px auto 0; max-height: 330px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 22%, rgba(0,0,0,.05) 100%); mask-image: linear-gradient(180deg, #000 0%, #000 22%, rgba(0,0,0,.05) 100%); }
.logos .logo-pile img { width: auto; height: var(--h, 40px); max-width: 128px; padding: 4px 14px; transform: translate(var(--dx, 0), var(--dy, 0)); object-fit: contain; filter: grayscale(1); opacity: .7; }
.logos .logo-pile img:hover { filter: none; opacity: 1; }

/* subtle 3D shapes */
.art-circle { box-shadow: inset -14px -18px 34px rgba(30,70,58,.14), inset 10px 12px 24px rgba(255,255,255,.75), 0 26px 38px -22px rgba(30,70,58,.45); }
.art-circle--a { background: radial-gradient(circle at 32% 26%, rgba(250,254,252,.95), rgba(190,218,207,.9) 58%, rgba(150,190,174,.9)); }
.art-circle--b { background: radial-gradient(circle at 32% 26%, rgba(255,253,246,.95), rgba(226,218,190,.9) 58%, rgba(200,188,152,.9)); box-shadow: inset -14px -18px 34px rgba(110,95,50,.14), inset 10px 12px 24px rgba(255,255,255,.75), 0 26px 38px -22px rgba(110,95,50,.45); }
.art-circle--a:hover, .art-circle--b:hover { filter: brightness(1.04); }

.planet-core { background: radial-gradient(circle at 32% 26%, #fbfdff 0, #e3eef6 45%, #bcd4e3 100%); box-shadow: inset -16px -20px 36px rgba(60,100,130,.18), inset 12px 14px 26px rgba(255,255,255,.85), 0 30px 44px -22px rgba(55,95,125,.5); }
.planet-orbit { border-color: #b7cddc; box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 6px 14px -8px rgba(60,100,130,.35); }
.planet-label { border-radius: 999px; box-shadow: 0 8px 16px -10px rgba(40,70,95,.45); border: 1px solid #e3ebf1; }

.brand-intro--dark .identity-art::after { content: ''; position: absolute; left: 50%; top: 50%; width: clamp(180px, 20vw, 250px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(120,255,214,.28), rgba(0,224,160,.08) 45%, rgba(13,21,18,0) 72%); box-shadow: inset -14px -18px 36px rgba(0,0,0,.45), inset 10px 12px 26px rgba(160,255,225,.14), 0 30px 50px -24px rgba(0,224,160,.35); pointer-events: none; }
.brand-intro--dark .identity-core { z-index: 2; text-shadow: 0 2px 0 rgba(255,255,255,.25), 0 14px 24px rgba(0,0,0,.55); }
.brand-intro--dark .identity-core i { background: radial-gradient(circle at 32% 28%, #d8fff0, #00e0a0 45%, #2aa8ff 100%); box-shadow: inset -3px -4px 6px rgba(0,60,90,.35), 0 6px 12px rgba(0,224,160,.45); }
.brand-intro--dark .identity-orbit { border-color: rgba(190,255,235,.28); box-shadow: 0 0 18px rgba(0,224,160,.12), inset 0 0 18px rgba(0,224,160,.08); }
.brand-intro--dark .art-label { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 20px -10px rgba(0,0,0,.7); z-index: 2; }

/* ---- Round 4 ---- */
/* direction art: spacing, caption, palette, arrow */
.service-hero .direction-art { margin-top: clamp(80px, 9vw, 112px); gap: 30px; }
.art-caption { font-size: clamp(17px, 1.7vw, 20px); font-weight: 700; color: var(--ink-2); letter-spacing: -.01em; }
.service-hero .art-caption { font-size: clamp(17px, 1.7vw, 20px); }
.service-hero .art-bottom { margin-top: 26px; }
.art-circle--a { background: radial-gradient(circle at 32% 26%, rgba(242,255,250,.96), rgba(150,226,198,.88) 55%, rgba(60,196,152,.9)); border-color: #46c79d; box-shadow: inset -14px -18px 34px rgba(0,110,80,.16), inset 10px 12px 24px rgba(255,255,255,.75), 0 26px 38px -22px rgba(0,120,90,.5); }
.art-circle--b { background: radial-gradient(circle at 32% 26%, rgba(244,250,255,.96), rgba(160,208,252,.88) 55%, rgba(60,150,240,.9)); border-color: #5aa6ee; box-shadow: inset -14px -18px 34px rgba(0,70,150,.16), inset 10px 12px 24px rgba(255,255,255,.75), 0 26px 38px -22px rgba(0,90,170,.5); }
.art-circles { --c: 174px; --h: 190px; --gap: 56px; }
.service-hero .art-circles { --c: 240px; --h: 250px; }
@media (max-width: 580px) { .service-hero .art-circles { --c: 168px; --h: 182px; } }
.art-arrow { position: absolute; left: 50%; top: calc(8px + var(--c) / 2); height: calc(var(--h) - 8px - var(--c) / 2 + 50px); width: 2px; margin-left: -1px; background: linear-gradient(180deg, rgba(36,89,78,.9), rgba(36,89,78,.9)); z-index: 3; pointer-events: none; }
.art-arrow::before { content: ''; position: absolute; left: 50%; top: -4px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #fff; border: 2px solid var(--brand-deep); }
.art-arrow::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 11px; height: 11px; margin-left: -5.5px; border-right: 2px solid var(--brand-deep); border-bottom: 2px solid var(--brand-deep); transform: translateY(1px) rotate(45deg); }
.service-hero .art-circles { margin-bottom: 0; }
.service-hero .direction-art .art-bottom { position: relative; z-index: 1; }

/* photo CTA sections */
.cta-photo { position: relative; color: #fff; background: #0f1a16 var(--cta-img) center / cover no-repeat; isolation: isolate; padding-block: clamp(80px, 10vw, 128px); }
.cta-photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,21,18,.74), rgba(13,21,18,.66)); }
.cta-photo h2, .cta-photo .lead { color: #fff; }
.cta-photo .lead { color: rgba(255,255,255,.86); }
.cta-photo .btn--ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.45); color: #fff; }
.cta-photo .btn--ghost:hover { background: #fff; color: var(--brand-deep); border-color: #fff; }
.cta-photo--sky { padding-block: clamp(110px, 14vw, 180px); }
.cta-photo--sky::before { background: linear-gradient(180deg, rgba(8,40,60,.66), rgba(10,60,70,.5)); }
.cta-photo .catchphrase__brand { color: #7ff0cf; }
.cta-photo--sky .catchphrase__brand { color: rgba(255,255,255,.92); }

/* ---- Round 5 ---- */
/* venn arrow: only when circles overlap, softer, more room above caption */
.art-arrow { height: calc(var(--h) - 8px - var(--c) / 2 + 34px); background: rgba(36,89,78,.38); transform-origin: top; }
.art-arrow::before { border-color: rgba(36,89,78,.5); }
.art-arrow::after { border-color: rgba(36,89,78,.5); }
@media (hover: hover) {
  .art-arrow { opacity: 0; transform: scaleY(.2); transition: opacity .4s var(--ease), transform .55s var(--ease); }
  .art-circles:hover .art-arrow { opacity: 1; transform: none; transition-delay: .12s; }
}
.service-hero .art-bottom { margin-top: 34px; }

/* body copy rhythm: tighter lines under section headings */
.lead { line-height: 1.6; }
.stack > * + * { margin-top: .3em; }
.body-text { line-height: 1.65; }
.compare__answer > * + * { margin-top: .6em; }
.compare__answer .h3 { margin-bottom: 10px !important; }
.section--roomy { padding-block: clamp(76px, 10vw, 136px); }

/* contact: more air under nav, centered catchphrase + entrance motion */
.contact-hero { padding-top: calc(var(--nav-h) + 104px); }
@media (max-width: 580px) { .contact-hero { padding-top: calc(var(--nav-h) + 64px); } }
.cta-photo--sky .cta-band { position: relative; }
.cta-photo--sky .catchphrase__brand { position: absolute; left: 0; right: 0; top: 100%; margin-top: 30px; }
@media (prefers-reduced-motion: no-preference) {
  .js .cta-photo--sky .catchphrase { opacity: 0; transform: translateY(28px); letter-spacing: .03em; filter: blur(6px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), letter-spacing 1.4s var(--ease), filter 1.1s var(--ease); }
  .js .cta-photo--sky .catchphrase__brand { opacity: 0; transition: opacity .9s var(--ease) .7s; }
  .js .cta-photo--sky .cta-band.is-in .catchphrase { opacity: 1; transform: none; letter-spacing: -.035em; filter: none; }
  .js .cta-photo--sky .cta-band.is-in .catchphrase__brand { opacity: 1; }
}


/* ---- Round 6: team cards ---- */
.people-card { position: relative; overflow: hidden; padding: 0 0 clamp(24px, 2.6vw, 30px); border-radius: 18px; border: 1px solid var(--line); background: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 14px 30px -24px rgba(23,35,31,.35); }
.people-head { margin: 0; padding: clamp(26px, 3vw, 34px) clamp(22px, 2.6vw, 30px) clamp(20px, 2.2vw, 24px); background: linear-gradient(180deg, #eef6f2 0%, #fff 100%); gap: 18px; align-items: center; }
.people-photo { width: 84px; height: 84px; border-radius: 22px; background: #fff; border: 1px solid #d9e8e0; box-shadow: 0 10px 20px -14px rgba(23,35,31,.5); }
.people-photo img { mix-blend-mode: multiply; }
.people-heading h3 { font-size: 22px; letter-spacing: -.02em; }
.people-role { display: inline-block; margin-top: 8px; padding: 3px 11px; border-radius: 999px; background: rgba(52,119,105,.1); color: var(--brand-deep); font-size: 12.5px; font-weight: 600; }
.people-label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 8px; }
.people-expertise { margin: 0 clamp(22px, 2.6vw, 30px); padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.people-expertise p { font-size: 15px; font-weight: 600; line-height: 1.55; color: var(--ink); }
.people-label--bio { margin: 0 clamp(22px, 2.6vw, 30px) 10px; }
.people-bio { margin-inline: clamp(22px, 2.6vw, 30px); gap: 10px; }
.people-bio li { padding-left: 22px; font-size: 14.5px; }
.people-bio li::before { left: 2px; top: .5em; width: 5px; height: 9px; border-radius: 0; background: none; border-right: 1.6px solid var(--brand); border-bottom: 1.6px solid var(--brand); transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .people-card:hover { box-shadow: 0 22px 40px -26px rgba(23,35,31,.45); }
  .people-card:hover .people-photo { transform: scale(1.04); }
}

/* identity orbits settle when scrolled into view (no hover needed) */
@media (prefers-reduced-motion: no-preference) {
  .identity-art.is-active .orbit-one { transform: rotate(-16deg); }
  .identity-art.is-active .orbit-two { transform: rotate(16deg); }
}


/* ---- Round 7: impeccable pass ---- */
/* anchor #people: land with the heading just under the nav, not 240px below it */
#people { scroll-margin-top: calc(20px - clamp(56px, 7vw, 88px)); }

/* team cards: uniform hairline, no one-sided accent; each portrait sits on a tint from the logo palette */
.people-card { padding: clamp(26px, 3vw, 34px); border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: none; overflow: visible; }
.people-head { padding: 0; margin-bottom: 24px; background: none; gap: 20px; }
.people-photo { width: 92px; height: 92px; border-radius: 50%; border: 0; box-shadow: none; background: #dff3ea; }
.people-card:nth-child(2) .people-photo { background: #dcecfb; }
.people-card:nth-child(3) .people-photo { background: #ecefe9; }
.people-photo img { mix-blend-mode: multiply; }
.people-heading h3 { font-size: 23px; }
.people-role { display: block; margin-top: 6px; padding: 0; background: none; border-radius: 0; color: var(--brand-deep); font-size: 14px; font-weight: 600; }
.people-expertise, .people-label--bio, .people-bio { margin-inline: 0; }
@media (prefers-reduced-motion: no-preference) {
  .people-card:hover { border-color: var(--brand-line); box-shadow: 0 18px 34px -28px rgba(23,35,31,.45); }
}

/* dark brand section: solid emphasis instead of gradient text, no blur/glow decoration */
.brand-intro--dark .art-label { backdrop-filter: none; -webkit-backdrop-filter: none; }
.brand-intro--dark .identity-orbit { box-shadow: none; }

/* ---- Round 8: labels removed, mobile type + tap targets ---- */
.service-row h2 { margin-top: 0; }
.brand__title { font-size: 12.5px; }
.people-label { font-size: 12.5px; }
@media (max-width: 800px) {
  .brand-intro--dark .brand-title { font-size: clamp(28px, 8vw, 34px); }
  .nav__toggle { width: 44px; height: 44px; }
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .footer__links a, .footer a { display: inline-block; padding-block: 10px; }
  .mailto, .contact-mail { display: inline-block; padding-block: 8px; }
  .copy-btn { min-height: 44px; }
  .modal__close { width: 44px; height: 44px; }
  .art-label, .floating-case small, .gallery-status { font-size: 13px; }
}


/* ---- Round 9 ---- */
/* home service cards: larger copy on desktop */
.service-row h2 { font-size: clamp(28px, 2.9vw, 38px); }
.service-row p { font-size: clamp(16.5px, 1.35vw, 18.5px); line-height: 1.7; }
.service-row small { font-size: 14.5px; margin-top: 10px; }
.service-row__go { font-size: 15.5px; padding: 13px 24px; }

/* team portraits: white face, thin logo-gradient ring */
.people-photo, .people-card:nth-child(2) .people-photo, .people-card:nth-child(3) .people-photo { padding: 3px; background: linear-gradient(135deg, #00d9a0, #1f9bff); border: 0; }
.people-photo img { border-radius: 50%; background: #fff; mix-blend-mode: normal; }

/* identity words, loosely placed */
.art-label { font-size: 15px; padding: 8px 18px; }
.label-one { top: 18%; left: 9%; }
.label-two { top: 52%; right: 2%; }
.label-three { bottom: 10%; left: 22%; }
.label-four { top: 8%; right: 14%; }
@media (max-width: 580px) { .art-label { font-size: 13px; padding: 6px 14px; } }
.floating-gallery { margin-bottom: 12px; }

/* education hero: a steady core inside waves of change */
.change-field { position: relative; width: min(100%, 760px); height: 320px; margin: 52px auto 0; display: grid; place-items: center; }
.change-field__waves { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cw { fill: none; stroke-linecap: round; stroke-width: 2; vector-effect: non-scaling-stroke; }
.cw1 { stroke: #aac4d6; } .cw2 { stroke: #7fa6c0; } .cw3 { stroke: #c4d6e2; }
.change-field__core { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 10px; width: 224px; height: 224px; border-radius: 50%; background: #2f4a63; color: #fff; box-shadow: 0 0 0 10px #fff, 0 18px 30px -18px rgba(30,50,70,.6); }
.change-field__core small { font-size: 14px; color: #c9d8e4; }
.change-field__core strong { font-size: 34px; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.cf-chip { position: absolute; z-index: 3; left: 0; top: 0; padding: 8px 15px; border-radius: 999px; background: #fff; border: 1px solid #d3e0ea; color: var(--ink-2); font-size: 14px; box-shadow: 0 8px 16px -10px rgba(40,70,95,.45); will-change: transform; }
@media (max-width: 580px) { .change-field { height: 270px; margin-top: 36px; } .change-field__core { width: 178px; height: 178px; box-shadow: 0 0 0 8px #fff, 0 14px 24px -16px rgba(30,50,70,.6); } .change-field__core small { font-size: 12.5px; } .change-field__core strong { font-size: 27px; } .cf-chip { font-size: 12.5px; padding: 6px 11px; } }

/* education: faint lecture photo on the right of the 'composition' section */
.section--lecture { position: relative; overflow: hidden; }
.section--lecture::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 48%; background: var(--lecture-img) right center / cover no-repeat; opacity: .15; filter: blur(1px); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 62%); mask-image: linear-gradient(90deg, transparent 0%, #000 62%); pointer-events: none; z-index: 0; }
.section--lecture > .container { position: relative; z-index: 1; }
@media (max-width: 800px) { .section--lecture::after { width: 100%; opacity: .1; -webkit-mask-image: none; mask-image: none; } }
.change-field + .hero__meta { margin-top: 44px; }

/* ---- Round 10 ---- */
/* education hero: tags under the title (like strategy), graphic below */
.service-hero .hero__meta + .change-field { margin-top: clamp(80px, 9vw, 112px); }
.change-field__core { background: radial-gradient(circle at 32% 26%, #7a9fbf 0, #456682 46%, #263f55 100%); box-shadow: inset -16px -20px 36px rgba(8,20,32,.4), inset 12px 14px 26px rgba(255,255,255,.2), 0 0 0 10px #fff, 0 30px 44px -22px rgba(30,50,70,.7); }
@media (max-width: 580px) { .change-field__core { box-shadow: inset -12px -16px 28px rgba(8,20,32,.4), inset 9px 11px 20px rgba(255,255,255,.2), 0 0 0 8px #fff, 0 22px 32px -18px rgba(30,50,70,.7); } }

/* lecture photo: keep clear of the text columns */
.section--lecture::after { width: 28%; opacity: .2; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
@media (max-width: 1180px) { .section--lecture::after { opacity: .08; width: 40%; } }

/* home service card: two intentional lines */
.service-row { padding: clamp(28px, 3vw, 38px); }
.service-row p { font-size: clamp(15px, 1.22vw, 17px); max-width: none; }
@media (max-width: 760px) { .service-row p br { display: none; } .service-row p { font-size: 16px; } }


/* ---- Round 11 ---- */
/* core: main word dead-center, caption sits above it */
.change-field__core { display: grid; place-items: center; gap: 0; }
.change-field__core strong { grid-area: 1 / 1; }
.change-field__core small { grid-area: 1 / 1; align-self: start; justify-self: center; margin-top: 52px; font-size: 17px; color: #d3e1ec; }
@media (max-width: 580px) { .change-field__core small { margin-top: 42px; font-size: 14.5px; } }

/* lecture photo: whole figure visible, parked in the empty area beside the heading */
.section--lecture::after { top: 28px; bottom: auto; right: 2%; width: 44%; height: 420px; background: var(--lecture-img) right top / contain no-repeat; opacity: .17; filter: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, #000 55%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, #000 55%, transparent 100%); mask-composite: intersect; }
@media (max-width: 1180px) { .section--lecture::after { opacity: .1; width: 52%; height: 340px; } }
@media (max-width: 800px) { .section--lecture::after { width: 100%; height: 300px; right: 0; opacity: .08; -webkit-mask-image: none; mask-image: none; } }

/* ---- Round 12 ---- */
.change-field__core strong { transform: translateY(13px); }
.change-field__core small { margin-top: 64px; }
@media (max-width: 580px) { .change-field__core strong { transform: translateY(10px); } .change-field__core small { margin-top: 52px; } }
.section--lecture::after {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 72%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 26%, #000 56%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 72%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 26%, #000 56%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (max-width: 800px) { .section--lecture::after {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 26%, #000 56%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 26%, #000 56%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; } }

/* ---- Round 13: image box = exact image size so the bottom fade ends at the photo's edge ---- */
.section--lecture::after { height: auto; aspect-ratio: 1672 / 941; background-size: 100% 100%; background-position: center; }
@media (max-width: 1180px) { .section--lecture::after { height: auto; } }
@media (max-width: 800px) { .section--lecture::after { height: auto; } }


/* ---- Round 14: mobile project grids, two per row ---- */
@media (max-width: 640px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .work-card__body { padding: 12px 12px 14px; gap: 3px; }
  .work-card__body h3 { font-size: 14px; line-height: 1.4; }
  .work-card__meta { font-size: 12px; line-height: 1.4; }
  .work-card__role { font-size: 11.5px; padding-top: 6px; line-height: 1.4; }
  .work-card__thumb::after { display: none; }
}

/* ---- Round 15: media save deterrents ---- */
img, video { -webkit-touch-callout: none; -webkit-user-drag: none; user-drag: none; }
img, video, .work-card__thumb, .modal__thumb { -webkit-user-select: none; user-select: none; }

/* ---- Round 16: flow lights up step by step ---- */
.flow-art li::after { background: linear-gradient(var(--brand), var(--brand)) left center / 0% 100% no-repeat, var(--brand-line); }
.flow-art li::before { transition: background-color .35s var(--ease), transform .35s var(--ease); }
.flow-art li b { transition: color .35s var(--ease); }
.flow-art li.is-lit::before { background: var(--brand); transform: scale(1.25); }
.flow-art li.is-lit b { color: var(--brand); }
@media (prefers-reduced-motion: no-preference) {
  .flow-art li::after { transition: background-size .5s var(--ease); }
}
.flow-art li.is-line::after { background-size: 100% 100%, auto; }

/* ---- Round 17: accordion body aligns with the title/subtitle left edge ---- */
.acc { --acc-idx: 28px; --acc-gap: 18px; --acc-pad: 4px; }
.acc__btn { gap: var(--acc-gap); padding-inline: var(--acc-pad); }
.acc__idx { display: inline-block; width: var(--acc-idx); }
.acc__body { padding-left: calc(var(--acc-pad) + var(--acc-idx) + var(--acc-gap)); padding-right: var(--acc-pad); }
@media (max-width: 760px) { .acc__body { padding-left: calc(var(--acc-pad) + var(--acc-idx) + var(--acc-gap)); } }