/* ==========================================================================
   nicecom — company site
   Sections are numbered the way the archive numbers them: §00 … §07.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §00  Masthead
   -------------------------------------------------------------------------- */
.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.masthead.is-stuck { border-bottom-color: var(--rule); }

:root { --masthead-h: 64px; }

.masthead__in {
  display: flex;
  align-items: center;
  gap: var(--s5);
  height: 64px;
}

.brand { display: flex; align-items: center; gap: var(--s3); flex: none; }
.brand img { height: 20px; width: auto; }
.brand__tag {
  color: var(--ink-3);
  border-left: 1px solid var(--rule);
  padding-left: var(--s3);
}
@media (max-width: 900px) { .brand__tag { display: none; } }

.nav { margin-left: auto; display: flex; gap: var(--s5); }
.nav a {
  color: var(--ink-2);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  padding: var(--s2) 0;
  position: relative;
  transition: color var(--dur) var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 2px;
  height: 1px;
  background: var(--brand);
  transition: right var(--dur) var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { right: 0; }

/* Narrow: the nav drops to a full-width strip under the logo. Five items in
   Korean fit a 320px viewport once the gap is elastic, so it never has to
   scroll sideways -- a horizontal strip that hides items is a strip whose
   later items nobody finds. */
@media (max-width: 760px) {
  :root { --masthead-h: 100px; }
  .masthead { padding-bottom: 44px; }
  .masthead__in { height: 56px; }
  .nav {
    position: absolute;
    left: 0; right: 0;
    top: 56px;
    height: 44px;
    margin-left: 0;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(0.5rem, 3vw, var(--s5));
    padding-inline: var(--gutter);
    border-top: 1px solid var(--rule-soft);
  }
  .nav a {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: clamp(0.75rem, 3.4vw, 0.8125rem);
    padding-block: 0;
  }
  .nav a::after { bottom: 10px; }
}

/* --------------------------------------------------------------------------
   Section scaffolding
   -------------------------------------------------------------------------- */
/* Anchor jumps must clear the fixed masthead. */
section[id] { scroll-margin-top: calc(var(--masthead-h) + 1rem); }

.sec { padding-block: clamp(3rem, 7vw, 5.5rem); position: relative; }
.sec--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.sec__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3) var(--s5);
  align-items: baseline;
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.sec__num { color: var(--brand-deep); }
.sec__title {
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.sec__sub {
  grid-column: 2;
  color: var(--ink-2);
  font-size: 0.9375rem;
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   §01  Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-top: calc(var(--masthead-h) + clamp(3rem, 9vw, 7rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  position: relative;
  overflow: hidden;
}

/* Hairline column grid — the archive's underlying paper */
.hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero__grid::before {
  content: "";
  display: block;
  height: 100%;
  background-image: repeating-linear-gradient(
    to right,
    var(--rule-soft) 0 1px,
    transparent 1px calc(100% / 6)
  );
  opacity: 0.9;
}
@media (max-width: 760px) { .hero__grid { display: none; } }

.hero__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .hero__in { grid-template-columns: 1fr; } }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--ink-3);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.hero__eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
  max-width: 160px;
}

/* Korean sets far narrower than Latin at the same size, so the ceiling is
   high enough for 운영합니다. to actually fill its column on a wide screen. */
.hero h1 {
  font-size: clamp(2.75rem, 11vw, 10.5rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.96;
}
.hero h1 .l { display: block; overflow: hidden; }
.hero h1 .l > span {
  display: block;
  transform: translateY(100%);
  transition: transform 700ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.hero.is-in h1 .l > span,
html:not(.js) .hero h1 .l > span { transform: none; }
.hero h1 em { font-style: normal; color: var(--brand-deep); }

.hero__lede {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  max-width: 44ch;
  color: var(--ink-2);
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.75;
}

/* Stat register */
.stats { border-top: 1px solid var(--ink); min-width: 15rem; }
@media (max-width: 900px) { .stats { min-width: 0; max-width: 22rem; } }
.stats dl { display: grid; grid-template-columns: 1fr auto; }
.stats dt,
.stats dd {
  padding-block: var(--s3);
  border-bottom: 1px solid var(--rule);
}
/* dt 와 dd 가 각자 border-bottom 을 그리므로 둘의 높이가 같아야 선이 한 줄로
   이어진다. align-self: center 로 dt 를 가운데 두면 dt 가 제 글자 높이만큼만
   차지해서 왼쪽 선이 오른쪽 선보다 위로 뜬다. 칸은 늘리고 글자만 가운데 둔다. */
.stats dt {
  color: var(--ink-3);
  display: flex;
  align-items: center;
}
.stats dd {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.hero__foot {
  position: relative;
  margin-top: clamp(3rem, 8vw, 6rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
}
.scrollhint { display: inline-flex; align-items: center; gap: var(--s2); }
.scrollhint span { animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge {
  0%, 62%, 100% { transform: translateY(0); }
  76%           { transform: translateY(4px); }
}

/* --------------------------------------------------------------------------
   §02  Products — the register of things we run
   Note: no border-top. The section header already closes with a rule, and a
   second one a gap below reads as an empty table row.
   -------------------------------------------------------------------------- */
.prod { border-top: 0; }

.prod__row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: var(--s4) var(--s5);
  align-items: start;
  padding-block: clamp(1.5rem, 3.5vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background var(--dur) var(--ease);
}
.prod__row::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--gutter) * -0.5);
  background: var(--brand-wash);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  z-index: -1;
  pointer-events: none;
}
.prod__row:hover::before,
.prod__row:focus-within::before { opacity: 1; }

.prod__i { color: var(--ink-3); padding-top: 0.55rem; }

.prod__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  font-size: clamp(1.375rem, 3vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.prod__latin {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: lowercase;
}
.prod__summary { margin-top: var(--s2); font-size: 1rem; color: var(--ink); }
.prod__detail {
  margin-top: var(--s2);
  max-width: 58ch;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink-2);
}

.prod__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s3);
  text-align: right;
}
.plats { display: flex; flex-wrap: wrap; gap: var(--s1); justify-content: flex-end; }
.plat {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}
.visit {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding-inline: var(--s3);
  margin-right: calc(var(--s3) * -1);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-deep);
  white-space: nowrap;
}
.visit svg { width: 12px; height: 12px; transition: transform var(--dur) var(--ease); }
.prod__row:hover .visit svg { transform: translate(2px, -2px); }

.prod__flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand-deep);
  border-radius: 2px;
  padding: 0.15rem 0.4rem;
  vertical-align: 0.35em;
}

@media (max-width: 760px) {
  .prod__row { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .prod__meta { grid-column: 2; align-items: flex-start; text-align: left; }
  .plats { justify-content: flex-start; }
  .visit { margin-left: calc(var(--s3) * -1); margin-right: 0; }
}

/* --------------------------------------------------------------------------
   §03  Works — the logo wall
   -------------------------------------------------------------------------- */
.wall { position: relative; }

.wall__readout {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 2.25rem;
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-3);
}
.wall__readout b {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
}
.wall__readout span {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* The rules are drawn on the cells, not by letting a background show through
   1px gaps. That older trick needed the row count to come out even, so the
   build padded the list up to a multiple of 24 -- which cost one blank row on
   a desktop and several on a phone. Borders just stop where the logos do. */
.wall__grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  border-top: 1px solid var(--rule-soft);
  border-left: 1px solid var(--rule-soft);
  perspective: 1400px;
}
@media (max-width: 1180px) { .wall__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .wall__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .wall__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cell {
  position: relative;
  aspect-ratio: 5 / 3;
  display: grid;
  place-items: center;
  padding: var(--s3);
  background: var(--card);
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
/* Promoted only while the pointer is actually over the wall. Held on all 72
   tiles at rest it is 72 idle compositor layers for an effect nobody has
   triggered yet. */
.wall__grid:hover .cell { will-change: transform; }
.cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) contrast(0.95);
  opacity: 0.55;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.cell__i {
  position: absolute;
  top: 5px; left: 7px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.cell.is-near { transform: scale(1.06) translateZ(0); z-index: 2; }
.cell.is-hot {
  transform: scale(1.18) translateZ(20px);
  z-index: 3;
  box-shadow: 0 2px 6px rgba(22, 24, 26, 0.06),
              0 12px 32px rgba(22, 24, 26, 0.12);
}
.cell.is-hot img { filter: none; opacity: 1; }
.cell.is-hot .cell__i { opacity: 1; }
.cell:focus-visible { z-index: 4; }

/* Touch and reduced-motion get colour without the choreography */
@media (hover: none) {
  .cell img { filter: grayscale(0.3); opacity: 0.85; }
  .cell.is-near, .cell.is-hot { transform: none; box-shadow: none; }
}

.wall__more {
  margin-top: var(--s5);
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  color: var(--ink-3);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   §04  Services
   -------------------------------------------------------------------------- */
.svc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 860px) { .svc { grid-template-columns: 1fr; } }

.svc__col { background: var(--paper); padding: clamp(1.5rem, 3vw, 2.25rem) 0; }
.svc__col + .svc__col { padding-left: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 860px) { .svc__col + .svc__col { padding-left: 0; } }

.svc__k { color: var(--brand-deep); }
.svc__h {
  margin-top: var(--s2);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.svc__list { margin-top: var(--s4); }
.svc__list li {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding-block: var(--s2);
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.svc__list li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   §05  History — a turning ring
   The years are mounted on the face of a cylinder and the whole cylinder
   turns. That is the reason it feels smooth: a frame of animation writes one
   transform, on the ring, and the browser composites nine cards that never
   change. Placing each card individually every frame -- which is what the
   first attempt did -- is forty-five style writes a frame, and it stutters.

   Cards are positioned once, in script, because the radius depends on how
   many there are and how wide they render.
   -------------------------------------------------------------------------- */
:root { --flow-w: min(60vw, 15rem); --flow-h: 24rem; }
@media (min-width: 761px) { :root { --flow-w: 21rem; --flow-h: 25rem; } }

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

.era__deck {
  order: 1;
  position: relative;
  height: calc(var(--flow-h) + 3rem);
  margin-inline: calc(var(--gutter) * -1);
  margin-block: var(--s4) var(--s5);
  overflow: hidden;
  perspective: 1500px;
  cursor: grab;
  /* Sideways belongs to the ring, up and down to the page. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.era__deck.is-drag { cursor: grabbing; }

/* A few degrees of downward tilt: the ring reads as an object on a surface
   rather than a flat fan. */
.era__tilt {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  transform: rotateX(-5deg);
}

.era__ring {
  position: relative;
  width: var(--flow-w);
  height: var(--flow-h);
  transform-style: preserve-3d;
  will-change: transform;
  /* transform is set in script: translateZ(-radius) rotateY(rot) */
}

.era__yr {
  position: absolute;
  inset: 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(22, 24, 26, 0.05),
              0 18px 36px -22px rgba(22, 24, 26, 0.4);
  /* The far side of the ring is facing away; hiding it keeps the reversed
     text off the screen and halves what has to be painted. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  /* transform is set in script: rotateY(i * angle) translateZ(radius) */
}
.era__yr.is-mid {
  border-color: var(--ink-3);
  box-shadow: 0 2px 4px rgba(22, 24, 26, 0.06),
              0 28px 52px -26px rgba(22, 24, 26, 0.48);
}

.era__head {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding-bottom: var(--s3);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.era__n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 4.5vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.era__label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
}

.era__items { display: grid; }
.era__items li {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding-block: 0.3rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.era__items li + li { border-top: 1px solid var(--rule-soft); }
.era__items li::before {
  content: "";
  flex: none;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brand);
  transform: translateY(-3px);
}

.era__yr--turn { background: var(--brand-wash); border-color: var(--brand); }
.era__yr--turn .era__head { border-bottom-color: var(--rule-wash); }
.era__yr--turn .era__items li + li { border-top-color: var(--rule-wash); }

@media (max-width: 760px) {
  /* Slightly less floor than ceiling: the last line should not sit on the
     edge of the card. */
  .era__yr { padding: var(--s4) var(--s4) 0.75rem; }
  .era__items li { font-size: 0.6875rem; line-height: 1.4; padding-block: 0.14rem; }
  /* The year is the biggest thing on the card and the fullest year (2015, with
     eight entries) had 10px of clearance under its last line. Taking the
     heading down buys that back where it costs least -- the number is still
     the first thing you read. */
  .era__head {
    gap: 0.1rem;
    padding-bottom: 0.4rem;
    margin-bottom: 0.4rem;
  }
  .era__n { font-size: 1.25rem; }
  .era__label { font-size: 0.8125rem; }
}

/* ── The index, under the ring ─────────────────────────────────────────── */
.era__index { order: 2; }
.era__years {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s1);
}
.era__y a {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding-inline: var(--s3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  transition: color var(--dur) var(--ease);
}
.era__y a:hover { color: var(--ink); }
.era__dot {
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.era__y.is-on a { color: var(--ink); font-weight: 500; }
.era__y.is-on .era__dot {
  background: var(--brand-deep);
  box-shadow: inset 0 0 0 1px var(--brand-deep), 0 0 0 3px var(--brand-wash);
}
@media (max-width: 620px) {
  .era__ylabel { display: none; }
  .era__y a { padding-inline: var(--s2); }
}

/* --------------------------------------------------------------------------
   §06  Process
   Seven numbered tiles. Same per-cell rules as the logo wall, so the eighth
   slot on a four-up grid is simply where the row stops.
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
@media (max-width: 1024px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .steps { grid-template-columns: 1fr; } }

.step {
  position: relative;
  background: var(--paper);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--s3) var(--s4);
  transition: background var(--dur) var(--ease);
}
.step:hover { background: var(--brand-wash); }

.step__n { color: var(--brand-deep); grid-column: 1; align-self: center; }
.step__ico {
  grid-column: 2;
  justify-self: end;
  color: var(--brand);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.step__ico svg { width: clamp(28px, 6vw, 34px); height: auto; }
.step:hover .step__ico { color: var(--brand-deep); transform: translateY(-2px); }

.step__t {
  grid-column: 1 / -1;
  margin-top: var(--s3);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.step__d {
  grid-column: 1 / -1;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink-2);
}

/* One row per step: number, then title over copy, then the icon. Stacked the
   way the desktop tile does it, seven steps ran nearly 1,300px on a phone. */
@media (max-width: 560px) {
  /* A single column of rows wants horizontal rules only -- the side borders
     that frame a grid just box in a list. */
  .steps { border-left: 0; }
  .step {
    border-right: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0 var(--s4);
    padding: var(--s4) 0;
  }
  .step__n { grid-column: 1; grid-row: 1; align-self: baseline; }
  .step__t { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 1rem; }
  .step__ico { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .step__ico svg { width: 24px; }
  .step__d { grid-column: 2; grid-row: 2; margin-top: 0.15rem; }
}

/* --------------------------------------------------------------------------
   Colophon — the registered entity, and the year
   This is the whole footer now. §07 used to sit above it repeating the office
   number in display type next to a table that repeated it again; the register
   below states each fact once. Nothing personal is printed here: the mobile
   number and email live on the cards, which get handed to someone on purpose.
   -------------------------------------------------------------------------- */
.colophon {
  background: var(--ink);
  color: var(--on-ink-2);
  padding-block: clamp(2rem, 4vw, 2.75rem);
  scroll-margin-top: var(--masthead-h);
}

/* One run of facts, wrapping as the width allows. A column grid spread them
   across the page and stranded the phone number on a second row by itself --
   this is a company register, it should read as one line of small print. */
.colophon__reg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) clamp(1rem, 2.5vw, 2rem);
}
.colophon__reg > div {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  min-width: 0;
}
/* Labels carry the mono treatment; values stay in the text face so the Korean
   address is not stretched or upper-cased. */
.colophon__reg dt {
  flex: none;
  color: var(--on-ink-3);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.colophon__reg dd { font-size: 0.875rem; line-height: 1.7; }
.colophon__reg a {
  border-bottom: 1px solid var(--rule-on-ink-2);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.colophon__reg a:hover { color: var(--paper); border-bottom-color: var(--brand); }

.colophon__end {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-on-ink);
  color: var(--on-ink-3);
}

/* --------------------------------------------------------------------------
   Phone density
   The desktop scale leaves a lot of air between things, which reads as
   composure on a wide screen and as scrolling past nothing on a narrow one.
   Everything below only tightens spacing -- no type, no content, no order.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .sec { padding-block: 2rem; }
  .sec--tight { padding-block: 1.75rem; }
  .sec__head {
    padding-bottom: var(--s4);
    margin-bottom: var(--s5);
    gap: var(--s2) var(--s4);
  }

  /* §01 — the hero's foot does not need six rems of runway above it. */
  .hero { padding-bottom: 1.75rem; }
  .hero__foot { margin-top: 2rem; padding-top: var(--s3); }
  .hero__lede { margin-top: var(--s5); }
  .stats dt, .stats dd { padding-block: var(--s2); }

  /* §02 — the platform chips and the visit link were each taking a row of
     their own under the copy. Side by side they take one. */
  .prod__row { padding-block: var(--s5); gap: var(--s3) var(--s4); }
  .prod__detail { margin-top: var(--s1); }
  .prod__meta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    width: 100%;
  }
  .plats { flex: 1; }

  /* §04 */
  .svc__col { padding-block: var(--s5); }
  .svc__list { margin-top: var(--s3); }
  .svc__list li { padding-block: 0.4rem; }

  /* §05 */
  .era__items li { padding-block: 0.4rem; }
  .era__items { padding-bottom: var(--s4); }

  /* Colophon */
  .colophon { padding-block: var(--s6); }
  .colophon__end { margin-top: var(--s4); padding-top: var(--s3); }
}