/* Website UI kit – page layout only. All visual styling comes from /styles.css */
.site { min-height: 100vh; background: var(--bg); color: var(--ink); overflow-x: clip; }
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--page-margin); }
.sec { padding-top: var(--section-gap); }
.sec-head { margin-bottom: 40px; }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.c-3-10 { grid-column: 3 / span 8; }
.c-3-6 { grid-column: 3 / span 4; }
.c-7-11 { grid-column: 7 / span 5; }
.c-1-4 { grid-column: 1 / span 4; }
.c-5-12 { grid-column: 5 / span 8; }
.c-4-9 { grid-column: 4 / span 6; }

.hero { position: relative; min-height: min(100vh, 920px); display: flex; flex-direction: column; }
.hero__body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 64px; padding-bottom: 96px; }
.hero__who { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
.hero__cap { color: var(--ink-2); max-width: 280px; }
.hero__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; padding: 0 var(--page-margin) 28px; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-2); }
.hero__foot nav { display: flex; gap: 20px; }
.hero__foot nav a { color: var(--ink); }
.hero__foot nav a:hover { color: var(--accent-text); }
.hero__foot > :last-child { justify-self: end; }

.heroB { position: relative; min-height: min(100vh, 920px); display: flex; flex-direction: column; overflow: hidden; }
.heroB__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; padding: 64px var(--page-margin) 96px; position: relative; z-index: 1; }
.heroB__pattern { position: absolute; inset: 0; pointer-events: none; }

.about2 { row-gap: 48px; }
.k-small { color: var(--ink-2); margin-bottom: 10px; display: block; }
.principles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.principles li::before { content: "– "; color: var(--ink-2); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--col-gap); }
.projects { display: flex; flex-direction: column; gap: 72px; }
.approach { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.approach > :nth-child(-n+3) { grid-column: span 2; }
.approach > :nth-child(n+4) { grid-column: span 3; }
.feed { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.feed > * { scroll-snap-align: start; }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.panel-media { position: relative; }
.mob-menu { position: fixed; inset: 8px; z-index: 70; border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.mob-menu a { font-size: var(--fs-h2); letter-spacing: var(--tr-h2); padding: 6px 0; }

@media (max-width: 1024px) {
  .c-3-10, .c-3-6, .c-7-11, .c-4-9 { grid-column: 1 / -1; }
  .c-1-4, .c-5-12 { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .cases, .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .approach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .approach > * { grid-column: span 1 !important; }
}
@media (max-width: 640px) {
  .g12 { grid-template-columns: minmax(0, 1fr); }
  .g12 > * { grid-column: 1 / -1 !important; }
  .cases, .posts, .approach { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .hero__body { padding-top: 40px; padding-bottom: 64px; }
  .hero__who { margin-bottom: 28px; gap: 14px; }
  .hero__foot nav { display: none; }
  .hero__foot { grid-template-columns: 1fr 1fr; padding-bottom: 20px; }
  .feed { grid-auto-columns: 86%; }
  .sec-head { margin-bottom: 28px; }
  .projects { gap: 48px; }
}

@media (max-width: 1024px) { .cv-toc { display: none; } }
@media (max-width: 640px) { .cv-row { grid-template-columns: minmax(0,1fr) !important; gap: 6px !important; } }