/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: 'Inter', sans-serif; background: #fff; color: #0a0a0a; overflow: hidden; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { text-decoration: none; color: inherit; }

/* ── TOKENS ── */
:root {
  --black: #0a0a0a;
  --border: #e6e6e6;
  --muted: #999;
  --gold: #b8975a;
  --D: 'Bebas Neue', sans-serif;
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
}

.logo { font-family: var(--D); font-size: 17px; letter-spacing: .06em; color: var(--black); }

.nav-links { display: flex; }

.nav-links a { position: relative; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #444; padding: 4px 14px; transition: color .2s; }
.nav-links a:hover,
.nav-links a.on { color: var(--black); }
/* Animated underline — a desktop hover bonus that signals the active section */
@media (hover: hover) and (pointer: fine) {
  .nav-links a::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 0;
    height: 1px; background: var(--black);
    transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
  }
  .nav-links a:hover::after,
  .nav-links a.on::after { transform: scaleX(1); }
}

.nav-cta { font-size: 10px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; background: var(--black); color: #fff; padding: 9px 22px; transition: background .2s, transform .1s ease; }
.nav-cta:hover { background: var(--gold); }
.nav-cta:active { transform: translateY(1px); }

/* Right-side controls grouped so the nav keeps its 3-zone balance */
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-lang { display: flex; align-items: center; gap: 5px; font-size: 11px; letter-spacing: .1em; font-weight: 500; }
.nav-lang a { color: var(--muted); transition: color .2s; }
.nav-lang a:hover, .nav-lang a.on { color: var(--black); }
.nav-lang .sep { color: var(--border); }

/* Mobile menu toggle — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--black);
  transition: transform .3s, opacity .3s, background .3s;
}
nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── SNAP SCROLL ──
   `mandatory` snapping so every full-screen section lands decisively, and
   NO `scroll-behavior: smooth` on the snap container — the smooth animation
   fights the snap and causes the "hover, then jitter" indecision. Crisp
   native snap is stable; the 2s content reveals carry the polish instead. */
main {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

section {
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

/* ── FADE ANIMATIONS ──
   Slower, softer easing so sections ease in rather than snap. */
.fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 2s cubic-bezier(.4, 0, .2, 1), transform 2s cubic-bezier(.4, 0, .2, 1);
}
.fade.in { opacity: 1; transform: none; }
.d1 { transition-delay: .25s; }
.d2 { transition-delay: .5s; }

/* ── SHARED ── */
.label {
  font-size: 9px;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

.btn {
  display: inline-block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--black);
  color: #fff;
  padding: 12px 26px;
  transition: background .2s;
  border: none;
  cursor: pointer;
}
.btn:hover { background: var(--gold); }

.btn-o {
  display: inline-block;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: transparent;
  color: var(--black);
  padding: 11px 26px;
  border: 1px solid var(--border);
  transition: border-color .2s;
}
.btn-o:hover { border-color: var(--black); }

/* Click feedback — a quick press confirms the tap on every button/CTA */
.btn, .btn-o, .btn-w, .fsub,
.hero-btn-primary, .hero-btn-ghost {
  transition: background .2s, border-color .2s, color .2s, transform .1s ease;
}
.btn:active, .btn-o:active, .btn-w:active, .fsub:active,
.hero-btn-primary:active, .hero-btn-ghost:active {
  transform: translateY(1px) scale(.99);
}

/* ── HERO ── */
#hero {
  flex-direction: column;
  position: relative;
}


.hero-video{
  position:absolute;
  inset:0;
  z-index:-1;
}

.hero-video video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
  filter:grayscale(80%);
  transition:filter 4s ease;
}

.hero-video video.loaded{
  filter:grayscale(0%) saturate(1.08) contrast(1.04);
}

.hero-fallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
  opacity:0;
  transition:opacity 1s ease;
}

.hero-fallback.show{
  opacity:1;
}

.hero-img {
  position: absolute;
  inset: 0;
}

.hero-img img {
  width: 100%;
  height: 100%;
  filter: grayscale(80%);
  transition: filter 4s ease;
  object-position: center 30%;
}

.hero-img img.loaded { filter: grayscale(0%) saturate(1.08) contrast(1.04); }

.hero-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 0 88px 60px;
  background: linear-gradient(to top, rgba(10, 10, 10, .65) 0%, transparent 100%);
}

.hero-tagline {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(200, 200, 200, .85);
  margin-bottom: 14px;
}

.hero-h1 {
  font-family: var(--D);
  font-size: clamp(72px, 11vw, 148px);
  line-height: .88;
  letter-spacing: .01em;
  color: #fff;
}

.hero-h1 em {
  font-style: italic;
  color: rgba(255, 255, 255, .6);
}

.hero-btns {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}

/* Hero entrance — a brief staggered rise on load sets the tone (storytelling
   first impression) without delaying the content. */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero-tagline { animation: heroRise 2s cubic-bezier(.4, 0, .2, 1) both; animation-delay: .2s; }
.hero-h1      { animation: heroRise 2s cubic-bezier(.4, 0, .2, 1) both; animation-delay: .5s; }
.hero-btns    { animation: heroRise 2s cubic-bezier(.4, 0, .2, 1) both; animation-delay: .8s; }

.hero-btn-primary {
  display: inline-block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: #fff;
  color: #0a0a0a;
  padding: 12px 26px;
  transition: background .2s, color .2s, transform .1s ease;
}
.hero-btn-primary:hover { background: var(--gold); color: #fff; }

.hero-btn-ghost {
  display: inline-block;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: transparent;
  color: #fff;
  padding: 11px 26px;
  border: 1px solid rgba(255, 255, 255, .4);
  transition: border-color .2s, transform .1s ease;
}
.hero-btn-ghost:hover { border-color: rgba(255, 255, 255, .9); }

/* ── STATEMENT ── */
#statement { display: grid; grid-template-columns: 1fr 1fr; }

.stmt-l {
  padding: 56px 52px;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--border);
}

.stmt-h {
  font-family: var(--D);
  font-size: clamp(48px, 7vw, 88px);
  line-height: .9;
  letter-spacing: .01em;
}
.stmt-h em { font-style: italic; color: var(--muted); }

.stmt-r {
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stmt-body {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.8;
  color: #555;
  margin-bottom: 36px;
  max-width: 600px;
}

.vmp { display: flex; flex-direction: column; }

.vr {
  display: grid;
  grid-template-columns: 64px 1fr;
  padding: 13px 0;
  border-top: 1px solid var(--border);
}
.vr:last-child { border-bottom: 1px solid var(--border); }

.vk {
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}
.vv { font-size: 1.5rem; font-weight: 300; line-height: 1.65; color: #444; margin-left:100px }

/* ── DISCIPLINES ── */
#disciplines { display: grid; grid-template-columns: repeat(4, 1fr); }

.dc {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dc:last-child { border-right: none; }

.dc-img { flex: 1; overflow: hidden; background: #f5f5f5; }
.dc-img img {
  height: 100%;
  filter: grayscale(100%);
  transition: transform .6s, filter .5s;
}
.dc:hover .dc-img img { transform: scale(1.04); filter: grayscale(0%); }

.dc-body {
  flex-shrink: 0;
  padding: 20px 22px 26px;
  border-top: 1px solid var(--border);
}
.dc-n { font-size: 9px; font-weight: 300; letter-spacing: .18em; color: var(--muted); margin-bottom: 7px; }
.dc-name { font-family: var(--D); font-size: 28px; letter-spacing: .01em; margin-bottom: 7px; }
.dc-desc { font-size: 13px; font-weight: 300; line-height: 1.65; color: #666; margin-bottom: 12px; }
.dc-link { font-size: 9px; font-weight: 300; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
.dc:hover .dc-link { color: var(--black); }

/* ── STUDIO ── */
#studio { display: grid; grid-template-columns: 1fr 1fr; }

.si { overflow: hidden; }
.si img { filter: grayscale(40%); transition: filter .6s; }
#studio:hover .si img { filter: grayscale(10%); }

.st {
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--border);
}
.st .label { margin-bottom: 18px; }
.st-h { font-family: var(--D); font-size: clamp(40px, 5vw, 64px); line-height: .9; letter-spacing: .01em; margin-bottom: 20px; }
.st-body { font-size: 13px; font-weight: 300; line-height: 1.85; color: #555; margin-bottom: 24px; max-width: 360px; }

.sg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); margin-bottom: 28px; }
.sp { padding: 11px 14px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sp:nth-child(2n) { border-right: none; }
.sp:nth-child(n+3) { border-bottom: none; }
.sp-k { font-size: 9px; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.sp-v { font-size: 13px; font-weight: 400; }
.br { display: flex; gap: 10px; }

/* ── EDUCATION ── */
#education { background: var(--black); display: grid; grid-template-columns: 1fr 1fr; }

.el { padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #1c1c1c; }
.el .label { color: #444; margin-bottom: 18px; }
.el-h { font-family: var(--D); font-size: clamp(40px, 5.5vw, 70px); line-height: .9; color: #fff; letter-spacing: .01em; margin-bottom: 20px; }
.el-body { font-size: 15px; font-weight: 300; line-height: 1.85; color: #888; margin-bottom: 28px; max-width: 420px; }

.btn-w { display: inline-block; font-size: 10px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; background: #fff; color: var(--black); padding: 12px 26px; transition: background .2s; }
.btn-w:hover { background: var(--gold); color: #fff; }

.er { padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; }
.pl { display: flex; flex-direction: column; }

.pi { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid #1c1c1c; transition: padding-left .2s; }
.pi:first-child { border-top: 1px solid #1c1c1c; }
.pi:hover { padding-left: 8px; }
.pi-t { font-size: 9px; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; color: #444; margin-bottom: 3px; }
.pi-n { font-family: var(--D); font-size: 18px; color: #fff; letter-spacing: .02em; }
.pi-a { color: #333; font-size: 14px; transition: color .2s, transform .2s; }
.pi:hover .pi-a { color: var(--gold); transform: translateX(4px); }

/* ── WORKSHOP ── */
#workshop { display: grid; grid-template-columns: 1fr 1fr; }

.sl { padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--border); }
.sl .label { margin-bottom: 18px; }
.sl-h { font-family: var(--D); font-size: clamp(40px, 5vw, 68px); line-height: .9; letter-spacing: .01em; margin-bottom: 18px; }
.sl-body { font-size: 15px; font-weight: 300; line-height: 1.85; color: #555; margin-bottom: 28px; max-width: 420px; }
.sr { padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; }

.ev { border: 1px solid var(--border); }
.ev-top { background: var(--black); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; }
.ev-s { font-size: 9px; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; color: #888; display: flex; align-items: center; gap: 7px; }
.ev-s::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.ev-d { font-size: 10px; font-weight: 300; color: #fff; letter-spacing: .06em; }
.ev-body { padding: 26px 24px; }
.ev-title { font-family: var(--D); font-size: 30px; line-height: .92; letter-spacing: .01em; margin-bottom: 7px; }
.ev-host { font-size: 11px; font-weight: 300; color: var(--muted); margin-bottom: 14px; letter-spacing: .04em; }
.ev-desc { font-size: 13px; font-weight: 300; line-height: 1.75; color: #555; margin-bottom: 18px; }
.ev-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 18px; }
.et { font-size: 9px; font-weight: 300; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--border); color: var(--muted); padding: 4px 9px; }

/* ── CONTACT ── */
#contact { display: grid; grid-template-columns: 1fr 1fr; }

.cl { padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--border); }
.cl-h { font-family: var(--D); font-size: clamp(48px, 6.5vw, 80px); line-height: .9; letter-spacing: .01em; margin-bottom: 40px; }

.irows { display: flex; flex-direction: column; border: 1px solid var(--border); }
.ir { padding: 13px 16px; border-bottom: 1px solid var(--border); }
.ir:last-child { border-bottom: none; }
.ir-k { font-size: 9px; font-weight: 300; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ir-v { font-size: 13px; font-weight: 300; line-height: 1.6; }
.ir-v a { color: var(--black); transition: color .2s; }
.ir-v a:hover { color: var(--gold); }

.soc-row { display: flex; gap: 12px; margin-top: 20px; }
.soc { font-size: 9px; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: 1px; transition: color .2s, border-color .2s; }
.soc:hover { color: var(--black); border-color: var(--black); }

.cr { padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; }
.cr-h { font-family: var(--D); font-size: 32px; letter-spacing: .01em; margin-bottom: 20px; }

.tabs { display: flex; border: 1px solid var(--border); margin-bottom: 18px; width: fit-content; }
.tb { font-size: 9px; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; padding: 8px 15px; color: var(--muted); background: transparent; border: none; cursor: pointer; transition: all .2s; }
.tb.on { background: var(--black); color: #fff; }

.fg { margin-bottom: 9px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.fl { font-size: 9px; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; display: block; }
.fi { background: #fff; border: 1px solid var(--border); padding: 10px 12px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 300; color: var(--black); outline: none; transition: border-color .2s; width: 100%; }
.fi:focus { border-color: var(--black); }
.fi::placeholder { color: #ccc; }
select.fi { appearance: none; cursor: pointer; }
textarea.fi { resize: none; height: 64px; }

.fn { font-size: 9px; font-weight: 300; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }
.fsub { background: var(--black); color: #fff; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; padding: 11px 24px; border: none; cursor: pointer; transition: background .2s; }
.fsub:hover { background: var(--gold); }
.fsuccess { display: none; background: #f5f5f5; padding: 12px 14px; font-size: 12px; font-weight: 300; color: var(--black); line-height: 1.65; margin-top: 9px; border: 1px solid var(--border); }

/* ── FOOTER ── */
footer { border-top: 1px solid var(--border); padding: 48px 48px 28px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.ft-logo { font-family: var(--D); font-size: 18px; letter-spacing: .04em; margin-bottom: 10px; }
.ft-brand p { font-size: 11px; font-weight: 300; line-height: 1.7; color: var(--muted); max-width: 200px; }
.ft-col h4 { font-size: 9px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--black); margin-bottom: 14px; }
.ft-col a, .ft-col p { display: block; font-size: 11px; font-weight: 300; color: var(--muted); text-decoration: none; line-height: 2.1; transition: color .2s; }
.ft-col a:hover { color: var(--black); }
.ft-btm { border-top: 1px solid var(--border); margin: 28px 48px 0; padding: 16px 0; display: flex; justify-content: space-between; }
.ft-btm p { font-size: 9px; font-weight: 300; color: var(--muted); letter-spacing: .06em; }

/* ── Desktop: ease the reading columns off the outer screen edges so copy
   sits closer to the centre divider (not centred — just less edge-pinned).
   The outer side gets extra padding; the inner gutter side stays ~52px. */
@media (min-width: 1025px) {
  .stmt-l, .el, .sl, .cl { padding-left: 100px; padding-right: 52px; }
  .stmt-r, .er, .sr, .cr { padding-left: 52px; padding-right: 100px; }
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

/* ── Tablet / small laptop: 2-up disciplines, give photos more width ── */
@media (max-width: 1024px) {
  nav { padding: 0 28px; }

  #disciplines { grid-template-columns: 1fr 1fr; }
  .dc { border-right: none; }
  .dc:nth-child(odd) { border-right: 1px solid var(--border); }
  .dc:nth-child(-n+2) { border-bottom: 1px solid var(--border); }

  .stmt-l, .stmt-r,
  .st, .el, .er, .sl, .sr, .cl, .cr { padding: 44px 36px; }
  .vv { margin-left: 24px; }
}

/* ── Mobile: stack everything into one scrolling column ── */
@media (max-width: 768px) {
  /* Disable snap so sections size to their content and scroll naturally */
  main { scroll-snap-type: none; }
  section { height: auto; scroll-snap-align: none; flex-direction: column; }
  #hero { height: 100vh; }

  /* Nav → hamburger menu */
  nav { padding: 0 18px; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 56px; left: 0; right: 0;
    flex-direction: column;
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 6px 0;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  nav.menu-open .nav-links { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links a,
  .nav-links a:hover,
  .nav-links a.on { color: var(--black); text-shadow: none; padding: 13px 24px; font-size: 14px; }

  /* All two/four-column section grids → single column */
  #statement, #disciplines, #studio, #education, #workshop, #contact {
    grid-template-columns: 1fr;
  }

  /* Reset desktop borders that assumed side-by-side columns */
  .stmt-l, .st, .el, .sl, .cl { border-right: none; }
  .st { border-left: none; }
  .dc, .dc:nth-child(odd) { border-right: none; border-bottom: 1px solid var(--border); }

  /* Comfortable padding */
  .stmt-l, .stmt-r,
  .st, .el, .er, .sl, .sr, .cl, .cr { padding: 40px 22px; }

  /* Images need explicit height once the section is auto-height */
  .dc-img { flex: none; height: 300px; }
  .si { height: 280px; }
  .si img { height: 100%; }

  /* Statement two-column key/value rows → simpler spacing + body text */
  .vv { margin-left: 16px; font-size: 15px; line-height: 1.6; }
  .vk { font-size: 11px; }
  .stmt-body { font-size: 15px; line-height: 1.7; }

  /* Section body copy */
  .el-body, .sl-body { font-size: 15px; line-height: 1.7; }
  .dc-desc, .ev-desc, .st-body { font-size: 13px; }
  /* Display-font card names — kept below the section titles */
  .dc-name { font-size: 20px; }
  .pi-n { font-size: 17px; }
  .sp-v { font-size: 13px; }

  /* Hero spacing */
  .hero-overlay { padding: 0 22px 40px; }
  .hero-tagline { font-size: 12px; }
  .hero-btns { flex-wrap: wrap; }

  /* Headings scale down on phones (the clamp() minimums are sized for desktop
     and stay oversized on small screens) — kept compact, not large-print */
  .hero-h1 { font-size: clamp(48px, 13vw, 78px); }
  .stmt-h  { font-size: clamp(33px, 9vw, 54px); }
  .el-h    { font-size: clamp(32px, 8.5vw, 50px); }
  .sl-h    { font-size: clamp(32px, 8.5vw, 50px); }
  .cl-h    { font-size: clamp(34px, 9vw, 54px); }
  .cr-h    { font-size: 28px; }

  /* Footer stacks */
  footer { grid-template-columns: 1fr 1fr; gap: 28px; padding: 40px 22px 24px; }
  .ft-brand { grid-column: 1 / -1; }
  .ft-btm { margin: 24px 22px 0; flex-direction: column; gap: 6px; }

  /* Contact form: stack first/last name */
  .frow { grid-template-columns: 1fr; }
}

/* Korean glyphs render visually larger than Latin at the same px, so the .ko
   page body copy looked oversized. Pull Korean content down so it sits clearly
   below the (Latin) section titles. Higher specificity → wins over the base. */
@media (max-width: 768px) {
  html[lang="ko"] .stmt-body,
  html[lang="ko"] .vv { font-size: 13.5px; line-height: 1.75; }
  html[lang="ko"] .el-body,
  html[lang="ko"] .sl-body { font-size: 13.5px; line-height: 1.75; }
  html[lang="ko"] .dc-desc,
  html[lang="ko"] .ev-desc,
  html[lang="ko"] .st-body { font-size: 12.5px; }
  html[lang="ko"] .ev-host,
  html[lang="ko"] .vk { font-size: 10.5px; }
}

/* ── Small phones ── */
@media (max-width: 420px) {
  .sg { grid-template-columns: 1fr; }
  .sp, .sp:nth-child(2n) { border-right: none; }
  .sp:nth-child(n+3) { border-bottom: 1px solid var(--border); }
  .sp:last-child { border-bottom: none; }
  .hero-btns { gap: 8px; }
  footer { grid-template-columns: 1fr; }
}

/* ── REDUCED MOTION ──
   Respect users who ask for less motion: neutralise transitions/animations
   (including the hero entrance) and show all fade-in content immediately. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .fade { opacity: 1 !important; transform: none !important; }
  .hero-tagline, .hero-h1, .hero-btns { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════════════════════
   HIGH-RESOLUTION TYPE SCALING
   The big display headings already grow with the viewport (clamp + vw), but
   the fixed-px body copy stays the same physical size and reads small on large
   high-res panels. These breakpoints step the body text up — a gentle nudge at
   1080p, more at 1440p, most at 4K.
   ══════════════════════════════════════════ */

/* ── 1080p and up: a small lift ── */
@media (min-width: 1920px) {
  .hero-tagline { font-size: 17px; }
  .stmt-body { font-size: 1.75rem; max-width: 660px; }
  .vv { font-size: 1.6rem; }
  .vk { font-size: 1.05rem; }
  .dc-name { font-size: 31px; }
  .dc-desc { font-size: 14px; }
  .el-body, .sl-body { font-size: 16px; max-width: 460px; }
  .ev-title { font-size: 33px; }
  .ev-desc, .ir-v { font-size: 14px; }
  .ev-host { font-size: 12px; }
  .pi-n { font-size: 20px; }
  .pi-t, .dc-n, .label, .ir-k { font-size: 10px; }
  .cr-h { font-size: 35px; }
}

/* ── 1440p and up: noticeably larger ── */
@media (min-width: 2560px) {
  .hero-tagline { font-size: 20px; }
  .stmt-body { font-size: 2.05rem; max-width: 760px; }
  .vv { font-size: 1.85rem; }
  .vk { font-size: 1.2rem; }
  .dc-name { font-size: 37px; }
  .dc-desc { font-size: 16px; }
  .el-body, .sl-body { font-size: 18px; max-width: 540px; }
  .ev-title { font-size: 39px; }
  .ev-desc, .ir-v { font-size: 16px; }
  .ev-host { font-size: 13px; }
  .pi-n { font-size: 24px; }
  .pi-t, .dc-n, .label, .ir-k { font-size: 11px; }
  .cr-h { font-size: 42px; }
}

/* ── 4K and up: largest step ── */
@media (min-width: 3840px) {
  .hero-tagline { font-size: 26px; }
  .stmt-body { font-size: 2.6rem; max-width: 980px; }
  .vv { font-size: 2.35rem; }
  .vk { font-size: 1.5rem; }
  .dc-name { font-size: 47px; }
  .dc-desc { font-size: 20px; }
  .el-body, .sl-body { font-size: 23px; max-width: 700px; }
  .ev-title { font-size: 50px; }
  .ev-desc, .ir-v { font-size: 20px; }
  .ev-host { font-size: 16px; }
  .pi-n { font-size: 30px; }
  .pi-t, .dc-n, .label, .ir-k { font-size: 13px; }
  .cr-h { font-size: 54px; }
}