/* ==========================================================================
   악시오홀딩스 (AXIO HOLDINGS) — finance holding company tone
   Palette: deep navy / cream paper / restrained brass
   Type: Noto Serif KR (headings) + Noto Sans KR (body) + Cormorant (latin)
   ========================================================================== */

:root {
  /* Colour */
  --navy-900: #07141f;
  --navy-800: #0a1b2e;
  --navy-700: #10263c;
  --navy-600: #17324c;
  --ink: #16202b;
  --ink-soft: #3d4a57;
  --ink-mute: #6b7784;
  --line: #dcd8cf;
  --line-soft: #eae5db;
  --paper: #fbfaf7;
  --cream: #f4f0e7;
  --cream-deep: #ece7db;
  --brass: #a98a55;
  --brass-soft: #c9b189;
  --white: #fff;

  /* Type */
  --serif: "Noto Serif KR", "Cormorant Garamond", Georgia, serif;
  --sans: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --latin: "Cormorant Garamond", "Noto Serif KR", Georgia, serif;

  /* Metrics */
  --wrap: 1180px;
  --header-h: 78px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink);
  background: var(--paper);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--navy-800); color: var(--cream); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--navy-800);
  color: var(--cream);
  padding: 10px 18px;
  font-size: 13px;
  border-radius: 2px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 40px;
}

.section {
  padding: 124px 0;
  position: relative;
  scroll-margin-top: var(--header-h);
}
.section--paper { background: var(--paper); }
.section--cream { background: var(--cream); }
.section--navy {
  background: var(--navy-800);
  color: #e8e6e0;
}

.eyebrow {
  font-family: var(--latin);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 18px;
}
.eyebrow--light { color: var(--brass-soft); }

.section-head { max-width: 760px; margin-bottom: 68px; }
.section-head--light .section-title { color: var(--white); }

.section-title {
  font-size: clamp(26px, 2.9vw, 38px);
  color: var(--navy-800);
  padding-bottom: 22px;
  position: relative;
  margin-bottom: 24px;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 1px;
  background: var(--brass);
}
.section-title--light { color: var(--white); }

.section-lead {
  font-size: 16.5px;
  color: var(--ink-soft);
  font-weight: 300;
  line-height: 1.9;
  max-width: 640px;
}
.section-head--light .section-lead,
.section--navy .section-lead { color: rgba(232, 230, 224, 0.78); }

.section-head--split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 56px;
}
.section-head--split .section-lead--right {
  max-width: 360px;
  text-align: right;
  font-size: 15px;
  padding-bottom: 6px;
}

.footnote {
  margin-top: 40px;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ink-mute);
  max-width: 760px;
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
  border-radius: 1px;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn--brass {
  background: var(--brass);
  color: var(--white);
  border-color: var(--brass);
}
.btn--brass:hover {
  background: transparent;
  color: var(--brass-soft);
  border-color: var(--brass-soft);
}
.btn--ghost {
  background: transparent;
  color: #e8e6e0;
  border-color: rgba(232, 230, 224, 0.34);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(232, 230, 224, 0.7);
}
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease),
              border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.header-inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; }

/* The supplied AXIO Holdings lockup is a light silver mark on a transparent
   field, so it reads correctly over the dark hero with no extra treatment. */
.brand__logo {
  height: 27px;
  width: auto;
  display: block;
  transition: filter 0.4s var(--ease), opacity 0.4s var(--ease);
}


.nav { display: flex; align-items: center; gap: 34px; }

/* Language switch + hamburger share one right-hand cluster */
.header-tools {
  display: flex;
  align-items: center;
  gap: 18px;
}
.lang-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}
.lang-switch__btn {
  font-family: var(--latin);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(244, 240, 231, 0.5);
  padding: 4px 1px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lang-switch__btn:hover { color: var(--cream); }
.lang-switch__btn.is-active {
  color: var(--brass-soft);
  border-bottom-color: var(--brass-soft);
}
.lang-switch__sep {
  width: 1px;
  height: 9px;
  background: rgba(244, 240, 231, 0.24);
}
.site-header.is-solid .lang-switch__btn { color: var(--ink-mute); }
.site-header.is-solid .lang-switch__btn:hover { color: var(--navy-800); }
.site-header.is-solid .lang-switch__btn.is-active {
  color: var(--brass);
  border-bottom-color: var(--brass);
}
.site-header.is-solid .lang-switch__sep { background: var(--line); }

.nav__link {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(244, 240, 231, 0.82);
  padding: 6px 0;
  transition: color 0.3s var(--ease);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--brass-soft);
  transition: width 0.35s var(--ease);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after,
.nav__link.is-active::after { width: 100%; }
.nav__link.is-active { color: var(--white); }
.nav__link--cta {
  border: 1px solid rgba(201, 177, 137, 0.5);
  padding: 9px 20px;
  color: var(--brass-soft);
}
.nav__link--cta::after { display: none; }
.nav__link--cta:hover {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--white);
}

/* header on light sections */
.site-header.is-solid {
  background: rgba(251, 250, 247, 0.95);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 24px rgba(10, 27, 46, 0.05);
}
/* On the paper header the supplied silver lockup would wash out, so it is
   flattened to a solid mark — the artwork is transparent, so no box appears. */
.site-header.is-solid .brand__logo {
  filter: brightness(0) saturate(100%) invert(10%) sepia(28%) saturate(1400%) hue-rotate(180deg) brightness(93%);
}
.site-header.is-solid .nav__link { color: var(--ink-soft); }
.site-header.is-solid .nav__link:hover,
.site-header.is-solid .nav__link.is-active { color: var(--navy-800); }
.site-header.is-solid .nav__link--cta { color: var(--brass); }
.site-header.is-solid .nav__link--cta:hover { color: var(--white); }

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  align-items: flex-end;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--cream);
  transition: transform 0.35s var(--ease), opacity 0.3s var(--ease),
              background 0.3s var(--ease);
}
.site-header.is-solid .menu-toggle span { background: var(--navy-800); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--navy-900);
  color: var(--cream);
  overflow: hidden;
  padding: calc(var(--header-h) + 60px) 0 80px;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 78% 18%, rgba(169, 138, 85, 0.16), transparent 62%),
    radial-gradient(ellipse 70% 70% at 12% 88%, rgba(23, 50, 76, 0.85), transparent 60%),
    linear-gradient(155deg, #07141f 0%, #0a1b2e 46%, #102741 100%);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(201, 177, 137, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(201, 177, 137, 0.055) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 20%, transparent 78%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 40px;
}
.hero__title {
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.44;
  font-weight: 400;
  color: #fbf9f4;
  letter-spacing: -0.03em;
  max-width: 20em;
}
.hero__title-em {
  color: var(--brass-soft);
  font-style: normal;
}
.hero__lead {
  margin-top: 30px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.95;
  color: rgba(240, 237, 230, 0.74);
  font-weight: 300;
}
.hero__actions {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hero__steps {
  margin-top: clamp(56px, 8vh, 92px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(201, 177, 137, 0.22);
  max-width: 860px;
}
.hero__steps li {
  display: flex;
  align-items: baseline;
  gap: 13px;
  padding: 22px 28px 0 0;
}
.hero__steps li + li {
  border-left: 1px solid rgba(201, 177, 137, 0.15);
  padding-left: 28px;
}
.hero__steps-no {
  font-family: var(--latin);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--brass);
  flex: 0 0 auto;
}
.hero__steps-tx {
  font-size: 13.5px;
  color: rgba(240, 237, 230, 0.72);
  line-height: 1.6;
}

.hero__scroll {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 54px;
  background: rgba(201, 177, 137, 0.22);
  z-index: 2;
}
.hero__scroll span {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 18px;
  background: var(--brass);
  animation: scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(36px); opacity: 0; }
}

/* ---------- Roles (overview) ---------- */
.roles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.role {
  padding: 36px 28px 0;
  border-right: 1px solid var(--line-soft);
}
.role:last-child { border-right: 0; }
.role__no {
  font-family: var(--latin);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--brass);
}
.role__title {
  margin: 16px 0 14px;
  font-size: 21px;
  color: var(--navy-800);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.role__en {
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.role__text {
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
}

/* ---------- About ---------- */
.about__head { max-width: 820px; }
.about__lead {
  font-size: 17px;
  line-height: 2;
  color: var(--ink-soft);
  font-weight: 300;
}
.principles {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.principle {
  background: var(--cream);
  padding: 38px 34px 40px;
}
.principle h3 {
  font-size: 18px;
  color: var(--navy-800);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.principle p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-soft);
}

/* ---------- CEO greeting ---------- */
.greeting {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 76px;
  align-items: start;
}
.greeting__photo {
  margin: 0;
  position: sticky;
  top: calc(var(--header-h) + 40px);
}
.greeting__photo img {
  width: 100%;
  height: auto;
  filter: grayscale(12%) contrast(1.02);
  border: 1px solid var(--line);
  padding: 10px;
  background: var(--white);
}
.greeting__photo figcaption {
  margin-top: 20px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.greeting__photo figcaption strong {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--navy-800);
}
.greeting__photo figcaption span {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}

.greeting__quote {
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.72;
  color: var(--navy-800);
  padding-left: 24px;
  border-left: 2px solid var(--brass);
  margin: 0 0 28px;
  letter-spacing: -0.02em;
}
.greeting__text {
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--ink-soft);
  max-width: 660px;
  margin-bottom: 44px;
}

.cv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 46px;
  border-top: 1px solid var(--line);
  padding-top: 34px;
}
.cv__title {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--brass);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.cv__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  padding: 7px 0;
  border-bottom: 1px dotted var(--line);
}
.cv__list--tight li { border-bottom: 0; padding: 4px 0; }
.cv__main {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.6;
}
.cv__meta {
  font-size: 12px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cv__tags li {
  font-size: 12.5px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--white);
}

/* ---------- Strategy ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(201, 177, 137, 0.24);
  counter-reset: step;
}
.step {
  padding: 42px 38px 44px 0;
  position: relative;
}
.step + .step {
  border-left: 1px solid rgba(201, 177, 137, 0.15);
  padding-left: 38px;
}
.step__no {
  font-family: var(--latin);
  font-size: 46px;
  line-height: 1;
  color: rgba(201, 177, 137, 0.3);
  letter-spacing: 0.02em;
}
.step__en {
  font-family: var(--latin);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 10px 0 14px;
}
.step__title {
  font-size: 20px;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.45;
}
.step__text {
  font-size: 14px;
  line-height: 1.9;
  color: rgba(232, 230, 224, 0.7);
  margin-bottom: 22px;
}
.step__list li {
  position: relative;
  font-size: 13px;
  color: rgba(232, 230, 224, 0.62);
  padding-left: 14px;
  line-height: 1.9;
}
.step__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px;
  height: 1px;
  background: var(--brass);
}

/* ---------- Portfolio ---------- */
.portfolio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
.company {
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease),
              box-shadow 0.4s var(--ease);
}
.company:hover {
  border-color: var(--brass-soft);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(10, 27, 46, 0.07);
}

/* Logo plate: keeps every mark on an equal footing, muted to the site tone */
.company__plate {
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px 46px;
  background: linear-gradient(180deg, #f7f5f0 0%, #efebe2 100%);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
}
.company__plate--dark {
  background: linear-gradient(180deg, #12293f 0%, #0a1b2e 100%);
}
.company__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.32) 50%, transparent 58%);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  pointer-events: none;
}
.company:hover .company__plate::after { opacity: 1; }

.company__logo {
  max-height: 100%;
  max-width: 80%;
  width: auto;
  object-fit: contain;
  transition: opacity 0.45s var(--ease), filter 0.45s var(--ease);
}

/* Dark artwork on a transparent field (AXIS MOBILITY): warm neutral, translucent
   mark instead of a full-strength brand block. No brightness lift-down, so no
   plate edge can appear. */
.company__logo--ink {
  opacity: 0.5;
  filter: grayscale(1) sepia(0.28) contrast(1.15);
  mix-blend-mode: multiply;
}
.company:hover .company__logo--ink {
  opacity: 0.78;
  filter: grayscale(1) sepia(0.2) contrast(1.3);
}

/* OPEN MOBILITY PARTNERS ships as dark artwork on a *white* field. Multiply
   blending makes pure white transparent, and the contrast push keeps that white
   at full strength so the baked-in rectangle disappears on the cream plate.
   The artwork is padded with a lot of empty white, so a scale-up crops that
   margin (plate clips it) and brings the mark up to the others' size. */
.company__logo--white-field {
  opacity: 0.5;
  max-width: 100%;
  filter: grayscale(1) sepia(0.25) contrast(1.55);
  mix-blend-mode: multiply;
  transform: scale(1.7);
}
.company:hover .company__logo--white-field {
  opacity: 0.8;
  filter: grayscale(1) sepia(0.18) contrast(1.75);
}

/* VREM ships as a white wordmark on a *black* field. Inverting turns the black
   ground white (which multiply then drops) while the wordmark becomes dark, so
   only the wordmark remains. Scaled up because the supplied artwork is mostly
   empty canvas around a small wordmark. */
.company__logo--invert {
  opacity: 0.5;
  width: 250%;
  max-width: none;
  max-height: none;
  height: auto;
  filter: invert(1) grayscale(1) contrast(1.25);
  mix-blend-mode: multiply;
}
.company:hover .company__logo--invert {
  opacity: 0.78;
  filter: invert(1) grayscale(1) contrast(1.45);
}

/* The Q mark carries a coloured field that cannot be keyed out without erasing
   the white mark itself, so it is presented small, as a restrained seal. */
.company__logo--badge {
  max-width: 104px;
  opacity: 0.5;
  border-radius: 4px;
  filter: grayscale(1) sepia(0.25) contrast(1.05);
  mix-blend-mode: multiply;
}
.company:hover .company__logo--badge {
  opacity: 0.78;
  filter: grayscale(1) sepia(0.18) contrast(1.15);
}

.company__body {
  padding: 30px 34px 34px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.company__field {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--brass);
  margin-bottom: 12px;
}
.company__name {
  font-size: 21px;
  color: var(--navy-800);
  margin-bottom: 5px;
}
.company__latin {
  font-family: var(--latin);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.company__text {
  font-size: 14px;
  line-height: 1.88;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.company__more {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 0 7px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--navy-700);
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.company__more svg { width: 15px; height: 15px; transition: transform 0.35s var(--ease); }
.company__more:hover { color: var(--brass); border-color: var(--brass); }
.company__more:hover svg { transform: translateX(4px); }
.company__more:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
}

/* ---------- Shareholder ---------- */
.shareholder__head { max-width: 700px; }
.shareholder__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.value-card {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 32px 30px 34px;
  position: relative;
}
.value-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--brass), rgba(169, 138, 85, 0));
}
.value-card h3 {
  font-size: 17.5px;
  color: var(--navy-800);
  margin-bottom: 12px;
}
.value-card p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-soft);
}

.notice {
  margin-top: 26px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 2px solid var(--brass);
  padding: 30px 34px 32px;
  display: grid;
  gap: 12px;
}
.notice__title {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--navy-800);
}
.notice__text {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-soft);
  max-width: 760px;
}
.notice__link {
  font-size: 13px;
  color: var(--navy-700);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  justify-self: start;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.notice__link:hover { color: var(--brass); border-color: var(--brass); }

/* ---------- IR / news ---------- */
.news { border-top: 1px solid var(--line); }
.news__item {
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.35s var(--ease);
}
.news__link {
  display: grid;
  grid-template-columns: 82px 66px minmax(0, 1fr) 100px;
  align-items: center;
  gap: 20px;
  padding: 22px 8px;
  transition: background 0.35s var(--ease), padding-left 0.35s var(--ease);
}
.news__link:hover { background: rgba(255, 255, 255, 0.62); }
.news__link:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: -2px;
}
.news__link:hover .news__title { color: var(--brass); }
.news__link:hover .news__title::after { opacity: 1; transform: translateX(0); }
.news__date {
  font-family: var(--latin);
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.news__tag {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--brass);
  border: 1px solid rgba(169, 138, 85, 0.4);
  padding: 3px 0;
  text-align: center;
}
.news__title {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--navy-800);
  line-height: 1.5;
}
.news__meta {
  font-size: 11.5px;
  color: var(--ink-mute);
  text-align: right;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   Sub page (notice detail)
   ========================================================================== */
.page-sub { background: var(--paper); }

/* On sub pages the header is always on a light ground, so it starts solid. */
.site-header[data-solid="always"] {
  background: rgba(251, 250, 247, 0.96);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 24px rgba(10, 27, 46, 0.05);
  position: sticky;
  top: 0;
}
.site-header[data-solid="always"] .brand__logo {
  filter: brightness(0) saturate(100%) invert(10%) sepia(28%) saturate(1400%) hue-rotate(180deg) brightness(93%);
}
.site-header[data-solid="always"] .nav__link { color: var(--ink-soft); }
.site-header[data-solid="always"] .nav__link:hover,
.site-header[data-solid="always"] .nav__link.is-active { color: var(--navy-800); }
.site-header[data-solid="always"] .nav__link.is-active::after { width: 100%; }
.site-header[data-solid="always"] .nav__link--cta { color: var(--brass); }
.site-header[data-solid="always"] .nav__link--cta:hover {
  color: var(--white);
  background: var(--brass);
}
.site-header[data-solid="always"] .menu-toggle span { background: var(--navy-800); }

.notice-page {
  padding: calc(var(--header-h) + 56px) 0 110px;
  min-height: 68vh;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  margin-bottom: 40px;
}
.breadcrumb a {
  color: var(--ink-mute);
  transition: color 0.3s var(--ease);
}
.breadcrumb a:hover { color: var(--brass); }
.breadcrumb span[aria-hidden] { color: var(--line); }
.breadcrumb__current { color: var(--navy-700); }

/* ---------- Notice detail ---------- */
.notice-detail {
  border-top: 2px solid var(--navy-800);
  padding-top: 40px;
}
.notice-detail__head { padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.notice-detail__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.notice-detail__meta .news__tag { padding: 3px 12px; }
.notice-detail__date {
  font-family: var(--latin);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.notice-detail__title {
  font-size: clamp(23px, 2.8vw, 33px);
  line-height: 1.5;
  color: var(--navy-800);
  letter-spacing: -0.02em;
  max-width: 22em;
}

.notice-detail__body { padding: 38px 0 0; }
.notice-detail__note {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--ink-soft);
  max-width: 640px;
  padding: 20px 24px;
  background: var(--cream);
  border-left: 2px solid var(--brass);
}

.notice-detail__facts {
  margin-top: 34px;
  border-top: 1px solid var(--line-soft);
  max-width: 720px;
}
.notice-detail__facts > div {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.notice-detail__facts dt {
  width: 88px;
  flex: 0 0 auto;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}
.notice-detail__facts dd {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.notice-detail__facts dd a { border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.notice-detail__facts dd a:hover { color: var(--brass); border-color: var(--brass); }

/* ---------- Prev / next ---------- */
.notice-nav {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.notice-nav__item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 22px 26px;
  min-width: 0;
  transition: background 0.3s var(--ease);
}
.notice-nav__item--prev { border-right: 1px solid var(--line); }
.notice-nav__item--next { text-align: right; }
.notice-nav__item:hover { background: var(--cream); }
.notice-nav__item:hover .notice-nav__title { color: var(--brass); }
.notice-nav__dir {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.notice-nav__title {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--navy-800);
  line-height: 1.5;
  transition: color 0.3s var(--ease);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-actions { margin-top: 34px; }
.btn--outline-dark {
  background: transparent;
  color: var(--navy-800);
  border-color: var(--line);
}
.btn--outline-dark:hover {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--cream);
}

/* ---------- Contact ---------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 82px;
  align-items: start;
}
.contact__list {
  margin-top: 44px;
  border-top: 1px solid rgba(201, 177, 137, 0.2);
  max-width: 420px;
}
.contact__list > div {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(201, 177, 137, 0.13);
}
.contact__list dt {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  width: 60px;
  flex: 0 0 auto;
}
.contact__list dd {
  font-size: 14.5px;
  color: rgba(240, 237, 230, 0.86);
  /* Korean addresses must not break mid-word (e.g. "비394(논 / 현동)"). */
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.7;
}
.contact__list dd a { border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.contact__list dd a:hover { color: var(--brass-soft); border-bottom-color: var(--brass-soft); }

.contact__form {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(201, 177, 137, 0.22);
  padding: 36px 34px 34px;
  display: grid;
  gap: 18px;
}
.field { display: grid; gap: 8px; }
.field label {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 230, 224, 0.6);
}
.field label span { color: var(--brass); }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: rgba(7, 20, 31, 0.5);
  border: 1px solid rgba(201, 177, 137, 0.24);
  border-radius: 1px;
  color: #f2efe8;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  padding: 12px 14px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field textarea { resize: vertical; min-height: 104px; line-height: 1.7; }
.field select { appearance: none; cursor: pointer; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(232, 230, 224, 0.32); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brass-soft);
  background: rgba(7, 20, 31, 0.7);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #c98a7a; }

.form-status {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--brass-soft);
  min-height: 0;
}
.form-status.is-error { color: #dda294; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-900);
  color: rgba(232, 230, 224, 0.62);
  padding: 76px 0 40px;
  font-size: 13px;
}
.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(201, 177, 137, 0.16);
}
.footer__logo {
  height: 30px;
  width: auto;
  display: block;
  opacity: 0.92;
}
.footer__tagline {
  margin-top: 18px;
  max-width: 360px;
  font-size: 13px;
  line-height: 1.85;
  color: rgba(232, 230, 224, 0.5);
}
.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px 54px;
  align-content: start;
}
.footer__nav a {
  font-size: 13px;
  color: rgba(232, 230, 224, 0.62);
  transition: color 0.3s var(--ease);
  white-space: nowrap;
}
.footer__nav a:hover { color: var(--brass-soft); }

.footer__disclosure {
  margin-top: 32px;
  font-size: 11.5px;
  line-height: 1.95;
  color: rgba(232, 230, 224, 0.36);
  max-width: 860px;
}
.footer__bottom {
  margin-top: 34px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: rgba(232, 230, 224, 0.4);
  letter-spacing: 0.02em;
}
.footer__contact { font-variant-numeric: tabular-nums; }
.footer__address {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.7;
  /* Slightly stronger than the surrounding legal text so the address is
     actually readable, while staying subordinate to the contact line. */
  color: rgba(232, 230, 224, 0.52);
  max-width: 420px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ---------- Company detail modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 20, 31, 0.72);
  backdrop-filter: blur(4px);
}
.modal__panel {
  position: relative;
  width: min(620px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--paper);
  padding: 44px 44px 40px;
  border-top: 2px solid var(--brass);
  transform: translateY(14px);
  transition: transform 0.4s var(--ease);
  box-shadow: 0 30px 80px rgba(7, 20, 31, 0.4);
}
.modal.is-open .modal__panel { transform: translateY(0); }
.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-mute);
  padding: 6px;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.modal__close svg { width: 100%; height: 100%; }
.modal__close:hover { color: var(--navy-800); transform: rotate(90deg); }
.modal__close:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.modal__head {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
.modal__plate {
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  background: linear-gradient(180deg, #f7f5f0, #ece7db);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: hidden;
}
.modal__logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.45s var(--ease);
}
/* The shared detail screen repeats the card's logo treatment so a supplied
   artwork field never shows up as a rectangle here either. */
.modal__logo--ink {
  filter: grayscale(1) sepia(0.28) contrast(1.15);
  mix-blend-mode: multiply;
}
.modal__logo--white-field {
  filter: grayscale(1) sepia(0.25) contrast(1.55);
  mix-blend-mode: multiply;
}
.modal__logo--invert {
  width: 250%;
  max-width: none;
  max-height: none;
  filter: invert(1) grayscale(1) contrast(1.25);
  mix-blend-mode: multiply;
}
.modal__logo--badge {
  max-width: 62px;
  border-radius: 3px;
  filter: grayscale(1) sepia(0.25) contrast(1.05);
  mix-blend-mode: multiply;
}
.modal__field {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--brass);
  margin-bottom: 8px;
}
.modal__title {
  font-size: 22px;
  color: var(--navy-800);
  margin-bottom: 4px;
}
.modal__latin {
  font-family: var(--latin);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.modal__lead {
  font-size: 14.5px;
  line-height: 1.92;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.modal__subtitle {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 14px;
}
.modal__list { margin-bottom: 28px; }
.modal__list li {
  position: relative;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
  padding: 9px 0 9px 16px;
  border-bottom: 1px dotted var(--line);
}
.modal__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 6px;
  height: 1px;
  background: var(--brass);
}
.modal__note {
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--ink-mute);
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

body.no-scroll { overflow: hidden; }

/* ---------- Reveal on scroll ----------
   Elements are visible by default so print, no-JS and screenshot tools always
   show content. JS adds .js-anim to <html> and only then do they start hidden. */
.reveal {
  opacity: 1;
  transform: none;
}
.js-anim .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  will-change: opacity, transform;
}
.js-anim .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .wrap, .header-inner, .hero__inner { padding-left: 32px; padding-right: 32px; }
  .section { padding: 100px 0; }
  .nav { gap: 22px; }
  .greeting { grid-template-columns: 290px minmax(0, 1fr); gap: 52px; }
  .contact { grid-template-columns: minmax(0, 1fr) 390px; gap: 54px; }
  .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role { padding: 32px 26px 32px 0; }
  .role:nth-child(2n) { border-right: 0; }
  .role:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
  .role:nth-child(2n) { padding-left: 0; }
  .role:nth-child(2n+1) { padding-left: 0; }
}

@media (max-width: 900px) {
  /* mobile navigation */
  .menu-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(10, 27, 46, 0.985);
    backdrop-filter: blur(14px);
    padding: 12px 32px 30px;
    border-bottom: 1px solid rgba(201, 177, 137, 0.2);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s var(--ease), transform 0.32s var(--ease),
                visibility 0.32s var(--ease);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__link {
    padding: 16px 0;
    border-bottom: 1px solid rgba(201, 177, 137, 0.14);
    font-size: 15px;
    color: rgba(244, 240, 231, 0.86);
  }
  .nav__link::after { display: none; }
  .nav__link--cta {
    margin-top: 18px;
    border: 1px solid var(--brass);
    background: var(--brass);
    color: var(--white);
    text-align: center;
    padding: 13px 18px;
  }
  .site-header.is-solid .nav__link { color: rgba(244, 240, 231, 0.86); }

  /* header always readable when the menu is open */
  .site-header.is-nav-open { background: var(--navy-800); border-bottom-color: transparent; }
  .site-header.is-nav-open .brand__logo { filter: none; }
  .site-header.is-nav-open .menu-toggle span { background: var(--cream); }

  .menu-toggle.is-active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .menu-toggle.is-active span:nth-child(2) { opacity: 0; }
  .menu-toggle.is-active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .greeting { grid-template-columns: 1fr; gap: 44px; }
  .greeting__photo { position: static; max-width: 320px; }
  .contact { grid-template-columns: 1fr; gap: 48px; }
  .contact__form { max-width: 560px; }
  .principles { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; border-top: 0; }
  .step { padding: 32px 0 34px; border-top: 1px solid rgba(201, 177, 137, 0.2); }
  .step + .step { border-left: 0; padding-left: 0; }
  .step__no { font-size: 34px; }
  .section-head--split { flex-direction: column; align-items: flex-start; gap: 18px; }
  .section-head--split .section-lead--right { text-align: left; max-width: none; }
  .portfolio { grid-template-columns: 1fr; }
  .shareholder__grid { grid-template-columns: 1fr; }
  .footer__top { flex-direction: column; gap: 34px; }
  .footer__nav { grid-template-columns: repeat(3, auto); gap: 12px 32px; }
  .news__item {
    grid-template-columns: 74px 58px minmax(0, 1fr);
    row-gap: 6px;
  }
  .news__meta { display: none; }
}

@media (max-width: 640px) {
  :root { --header-h: 66px; }
  .wrap, .header-inner, .hero__inner { padding-left: 22px; padding-right: 22px; }
  .section { padding: 74px 0; }
  .brand__logo { height: 22px; }
  .hero { padding-top: calc(var(--header-h) + 46px); padding-bottom: 66px; min-height: auto; }
  .hero__title { font-size: clamp(25px, 7.4vw, 33px); line-height: 1.5; }
  .hero__lead { font-size: 14.5px; margin-top: 24px; }
  .hero__actions { margin-top: 34px; }
  .hero__actions .btn { flex: 1 1 100%; padding: 14px 20px; }
  .hero__steps { grid-template-columns: 1fr; margin-top: 44px; }
  .hero__steps li { padding: 15px 0; border-bottom: 1px solid rgba(201, 177, 137, 0.14); }
  .hero__steps li + li { border-left: 0; padding-left: 0; }
  .hero__steps li:first-child { padding-top: 18px; }
  .hero__scroll { display: none; }

  .section-title { font-size: 24px; padding-bottom: 18px; margin-bottom: 20px; }
  .section-lead { font-size: 15px; }
  .section-head { margin-bottom: 42px; }
  .eyebrow { font-size: 10.5px; letter-spacing: 0.2em; margin-bottom: 14px; }

  .roles { grid-template-columns: 1fr; border-top: 0; }
  .role {
    padding: 26px 0;
    border-right: 0;
    border-top: 1px solid var(--line-soft);
  }
  .role__title { flex-direction: row; align-items: baseline; gap: 10px; font-size: 19px; }
  .role__en { font-size: 10px; }

  .principles { margin-top: 40px; }
  .principle { padding: 28px 24px 30px; }

  .greeting__photo { max-width: 100%; }
  .greeting__quote { font-size: 18px; padding-left: 18px; margin-bottom: 22px; }
  .greeting__text { font-size: 14.5px; margin-bottom: 34px; }
  .cv { grid-template-columns: 1fr; gap: 26px; padding-top: 28px; }
  .cv__list li { flex-direction: column; gap: 3px; }
  .cv__main { font-size: 13.5px; }

  .step__title { font-size: 18px; }
  .company__plate { height: 138px; padding: 26px 30px; }
  .company__logo--badge { max-width: 78px; }
  .company__body { padding: 24px 24px 28px; }
  .company__name { font-size: 19px; }

  .value-card { padding: 26px 24px 28px; }
  .notice { padding: 24px 22px 26px; }

  .news__link {
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 18px 4px;
  }
  .news__date { grid-row: 1; font-size: 12.5px; }
  .news__tag { grid-row: 1; grid-column: 2; justify-self: end; padding: 2px 10px; }
  .news__title { grid-column: 1 / -1; font-size: 15px; }
  .news__meta { display: none; }

  /* sub page */
  .notice-page { padding: calc(var(--header-h) + 34px) 0 74px; }
  .breadcrumb { margin-bottom: 26px; font-size: 11.5px; gap: 7px; }
  .notice-detail { padding-top: 28px; }
  .notice-detail__head { padding-bottom: 24px; }
  .notice-detail__title { font-size: 21px; line-height: 1.52; }
  .notice-detail__body { padding-top: 28px; }
  .notice-detail__note { font-size: 13.5px; padding: 16px 18px; }
  .notice-detail__facts { margin-top: 26px; }
  .notice-detail__facts > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 12px 0;
  }
  .notice-detail__facts dt { width: auto; font-size: 10.5px; }
  .notice-detail__facts dd { font-size: 13.5px; }
  .notice-nav { grid-template-columns: 1fr; margin-top: 38px; }
  .notice-nav__item--prev {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .notice-nav__item--next { text-align: left; }
  .notice-nav__item { padding: 18px 16px; }
  .notice-nav__title { font-size: 14px; white-space: normal; }
  .notice-actions { margin-top: 26px; }
  .notice-actions .btn { width: 100%; }

  .header-tools { gap: 12px; }
  .lang-switch { gap: 7px; }
  .lang-switch__btn { font-size: 10.5px; letter-spacing: 0.12em; }

  .contact__form { padding: 26px 22px 26px; }
  .contact__list dd { font-size: 14px; }

  .site-footer { padding: 56px 0 32px; }
  .footer__nav { grid-template-columns: repeat(2, auto); gap: 10px 26px; }
  .footer__bottom { flex-direction: column; gap: 8px; }

  .modal { padding: 0; align-items: flex-end; }
  .modal__panel {
    width: 100%;
    max-height: 90vh;
    padding: 34px 24px 30px;
    transform: translateY(30px);
  }
  .modal__plate { width: 72px; height: 72px; }
  .modal__title { font-size: 19px; }
  .modal__head { gap: 16px; padding-bottom: 20px; margin-bottom: 22px; }
}

@media (max-width: 380px) {
  .hero__title { font-size: 23px; }
  .nav { padding-left: 22px; padding-right: 22px; }
}

/* ---------- Motion / print preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .hero__scroll, .modal, .contact__form, .hero__actions { display: none; }
  body { color: #000; background: #fff; }
  .section, .site-footer { padding: 20px 0; }
  .reveal { opacity: 1; transform: none; }
  .section--navy, .site-footer { background: #fff; color: #000; }
  .section--navy .section-title, .step__title, .contact__list dd { color: #000; }
}