/* ========================================================
   VAMOS GRD — visual.css
   Design language: Technical / Engineering
   Based on reference: Public Sans + Inter, near-black/navy,
   technical-grid background, bento cards, data-mono tags
   ======================================================== */

/* ---------- 0. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--vg-font-body);
  color: var(--vg-on-surface);
  background: var(--vg-bg);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow-x: hidden;
}
p, h1, h2, h3, h4, li, span, a, dt, dd, td, th {
  word-break: keep-all;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--vg-secondary); outline-offset: 3px; }
::selection { background: var(--vg-secondary); color: #fff; }

/* ---------- 1. Design Tokens ---------- */
:root {
  /* Palette */
  --vg-bg:                    #fbf9fb;
  --vg-primary:               #000102;
  --vg-primary-container:     #0d1c32;
  --vg-on-primary:            #ffffff;
  --vg-on-primary-container:  #76859f;
  --vg-secondary:             #0051d5;
  --vg-secondary-container:   #316bf3;
  --vg-on-surface:            #1b1b1d;
  --vg-on-surface-variant:    #44474d;
  --vg-surface:               #fbf9fb;
  --vg-surface-container:     #efedef;
  --vg-surface-container-low: #f5f3f5;
  --vg-surface-container-high:#eae7ea;
  --vg-outline:               #75777e;
  --vg-outline-variant:       #c5c6cd;
  --vg-error:                 #ba1a1a;
  --vg-on-error-container:    #93000a;

  /* Typography */
  --vg-font-h:      "Public Sans", system-ui, sans-serif;
  --vg-font-body:   "Public Sans", system-ui, sans-serif;
  --vg-font-caps:   "Inter", system-ui, sans-serif;
  --vg-font-mono:   "Inter", system-ui, sans-serif;

  /* Type scale */
  --vg-fs-h1:       clamp(2rem, 4.5vw, 3rem);     /* 48px ref */
  --vg-fs-h2:       clamp(1.5rem, 3vw, 2rem);      /* 32px ref */
  --vg-fs-h3:       clamp(1.1rem, 1.8vw, 1.5rem);  /* 24px ref */
  --vg-fs-body-lg:  1.125rem;                       /* 18px */
  --vg-fs-body:     1rem;                           /* 16px */
  --vg-fs-caps:     0.6875rem;                      /* 11px */
  --vg-fs-mono:     0.875rem;                       /* 14px */

  /* Spacing */
  --vg-gutter:      32px;
  --vg-section-gap: 128px;
  --vg-margin:      clamp(24px, 4.5vw, 64px);
  --vg-grid-size:   32px;
  --vg-max-w:       1440px;
  --vg-header-h:    64px;

  /* Visual */
  --vg-radius:      0.25rem;
  --vg-radius-lg:   0.5rem;
  --vg-shadow-sm:   0 1px 4px rgba(0,1,2,0.08);
  --vg-shadow-md:   0 4px 16px rgba(0,1,2,0.10);
  --vg-ease:        cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. Technical Grid Background ---------- */
.technical-grid,
body {
  background-color: var(--vg-bg);
  background-size: 32px 32px;
  background-image:
    linear-gradient(to right, rgba(226, 232, 240, 0.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226, 232, 240, 0.5) 1px, transparent 1px);
}

/* ---------- 3. Layout ---------- */
.vg-container {
  width: 100%;
  max-width: var(--vg-max-w);
  margin: 0 auto;
  padding: 0 var(--vg-margin);
}

.vg-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--vg-gutter);
}

.vg-col-12 { grid-column: span 12; }
.vg-col-8  { grid-column: span 12; }
.vg-col-6  { grid-column: span 12; }
.vg-col-4  { grid-column: span 12; }

@media (min-width: 768px) {
  .vg-col-8  { grid-column: span 8; }
  .vg-col-6  { grid-column: span 6; }
  .vg-col-4  { grid-column: span 4; }
}

/* ---------- 4. Scroll Progress Bar ---------- */
#vg-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 2px;
  background: var(--vg-secondary);
  z-index: 200;
  transition: width 0.1s linear;
}

/* ---------- 5. Header / Nav ---------- */
.vg-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--vg-header-h);
  display: flex;
  align-items: center;
  background: rgba(251, 249, 251, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--vg-ease), background 0.3s var(--vg-ease);
}
.vg-header[data-scrolled="true"] {
  border-bottom-color: var(--vg-outline-variant);
  background: rgba(251, 249, 251, 0.95);
}
.vg-header__inner {
  width: 100%;
  max-width: var(--vg-max-w);
  margin: 0 auto;
  padding: 0 var(--vg-margin);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.vg-header__left {
  display: flex;
  align-items: center;
  gap: 32px;
}
.vg-brand {
  font-family: var(--vg-font-caps);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--vg-on-surface);
  text-transform: uppercase;
  text-decoration: none;
}
.vg-nav {
  display: none;
}
.vg-nav__list {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 0;
}
.vg-nav__link {
  font-family: var(--vg-font-body);
  font-size: var(--vg-fs-body);
  font-weight: 400;
  color: var(--vg-on-surface-variant);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  letter-spacing: -0.01em;
}
.vg-nav__link:hover,
.vg-nav__link.is-active {
  color: var(--vg-secondary);
  border-bottom-color: var(--vg-secondary);
}
.vg-header__cta {
  flex-shrink: 0;
}

/* Mobile nav */
.vg-burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.vg-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--vg-on-surface);
  transition: transform 0.3s, opacity 0.3s;
}

.vg-mnav {
  position: fixed;
  inset: var(--vg-header-h) 0 0 0;
  background: var(--vg-primary-container);
  color: #fff;
  padding: 32px var(--vg-margin);
  overflow-y: auto;
  z-index: 99;
}
.vg-mnav[hidden] { display: none; }
.vg-mnav__list { display: flex; flex-direction: column; gap: 0; }
.vg-mnav__list li {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.vg-mnav__list a {
  display: block;
  padding: 18px 0;
  font-family: var(--vg-font-caps);
  font-size: var(--vg-fs-caps);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
}
.vg-mnav__cta-link {
  color: var(--vg-secondary-container) !important;
}

@media (min-width: 900px) {
  .vg-nav { display: block; }
  .vg-burger { display: none; }
  .vg-header__cta { display: flex; }
}

/* ---------- 6. Buttons ---------- */
.vg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  min-height: 44px; /* touch target */
  font-family: var(--vg-font-caps);
  font-size: var(--vg-fs-caps);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: var(--vg-radius);
  transition: background 0.2s, color 0.2s, transform 0.2s;
  white-space: nowrap;
}
.vg-btn--primary {
  background: var(--vg-primary-container);
  color: var(--vg-on-primary);
}
.vg-btn--primary:hover {
  background: #1a2d4a;
}
.vg-btn--secondary {
  background: var(--vg-secondary);
  color: #fff;
}
.vg-btn--secondary:hover {
  background: var(--vg-secondary-container);
}
.vg-btn--danger {
  background: var(--vg-on-error-container);
  color: #fff;
}
.vg-btn--danger:hover {
  background: #7a0007;
}
.vg-btn--outline {
  background: transparent;
  color: var(--vg-on-surface);
  border: 1px solid var(--vg-outline-variant);
}
.vg-btn--outline:hover {
  background: var(--vg-surface-container);
}
.vg-btn--ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}
.vg-btn--ghost:hover {
  background: rgba(255,255,255,0.15);
}
.vg-btn--lg {
  padding: 14px 28px;
  font-size: 0.75rem;
}
.vg-btn .vg-btn__arrow {
  transition: transform 0.25s var(--vg-ease);
}
.vg-btn:hover .vg-btn__arrow {
  transform: translateX(4px);
}

/* ---------- 7. Ref Tag Badge ---------- */
.vg-ref-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--vg-outline-variant);
  background: var(--vg-surface);
  padding: 4px 8px;
  margin-bottom: 16px;
}
.vg-ref-tag__label {
  font-family: var(--vg-font-caps);
  font-size: var(--vg-fs-mono);
  font-weight: 500;
  color: var(--vg-on-surface-variant);
  line-height: 1.4;
}
.vg-ref-tag__value {
  font-family: var(--vg-font-caps);
  font-size: var(--vg-fs-mono);
  font-weight: 700;
  color: var(--vg-primary);
  line-height: 1.4;
}
/* Dark variant (inside dark panel) */
.vg-ref-tag--dark {
  border-color: rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
}
.vg-ref-tag--dark .vg-ref-tag__label { color: rgba(255,255,255,0.7); }
.vg-ref-tag--dark .vg-ref-tag__value { color: #fff; }

/* ---------- 8. Section Header ---------- */
.vg-section-header {
  grid-column: span 12;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--vg-outline-variant);
  margin-bottom: 0;
}
.vg-section-header h1,
.vg-section-header h2 {
  font-family: var(--vg-font-h);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vg-primary);
}
.vg-section-header h1 { font-size: var(--vg-fs-h1); line-height: 1.1; }
.vg-section-header h2 { font-size: var(--vg-fs-h2); line-height: 1.2; }
.vg-section-header p {
  font-family: var(--vg-font-body);
  font-size: var(--vg-fs-body-lg);
  line-height: 1.6;
  color: var(--vg-on-surface-variant);
  max-width: 720px;
  margin-top: 16px;
}

/* ---------- 9. Main Content Area ---------- */
.vg-main {
  padding-top: calc(var(--vg-header-h) + 64px);
  padding-bottom: var(--vg-section-gap);
}

/* Video hero: remove top padding so video starts right below fixed header */
.vg-main--video-hero {
  padding-top: 0;
}
body.has-urgency-bar .vg-main--video-hero {
  padding-top: 0;
}

/* ===== Fullbleed Video Hero ===== */
.vg-fullbleed-hero {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--vg-header-h));
  min-height: 560px;
  overflow: hidden;
  background: var(--vg-primary-container);
  display: flex;
  align-items: flex-end;
}
body.has-urgency-bar .vg-fullbleed-hero {
  height: calc(100vh - var(--vg-header-h) - var(--vg-urgency-h, 36px));
}
.vg-fullbleed-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.vg-fullbleed-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,  rgba(7,14,28,0.96) 0%,  rgba(7,14,28,0.6) 40%, rgba(7,14,28,0.15) 80%, transparent 100%),
    linear-gradient(to right, rgba(7,14,28,0.5) 0%, transparent 55%);
  pointer-events: none;
}
.vg-fullbleed-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--vg-max-w);
  margin: 0 auto;
  padding: 0 var(--vg-margin) clamp(48px, 7vh, 96px);
}
.vg-fullbleed-hero__h1 {
  font-family: var(--vg-font-h);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0;
  word-break: keep-all;
}
.vg-fullbleed-hero__desc {
  font-family: var(--vg-font-body);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: rgba(255,255,255,0.75);
  line-height: 1.75;
  max-width: 520px;
  margin: 0;
  word-break: keep-all;
}
.vg-hero-badge--dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  padding: 6px 14px;
  font-family: var(--vg-font-caps);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}
.vg-fullbleed-hero__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-family: var(--vg-font-caps);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  word-break: keep-all;
}
.vg-fullbleed-hero__scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,0.4);
  animation: hero-scroll-cue 2.2s ease-in-out infinite;
}
@keyframes hero-scroll-cue {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.4; }
  50%       { transform: translateX(-50%) translateY(6px); opacity: 0.8; }
}

/* vg-container needs top padding to follow video hero */
.vg-main--video-hero .vg-container:first-of-type {
  padding-top: var(--vg-section-gap);
}
.vg-section {
  padding-top: var(--vg-section-gap);
}
.vg-section--tight {
  padding-top: 64px;
}

/* ---------- 10. Bento Hero Grid ---------- */
.vg-bento-grid {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--vg-gutter);
}

/* Wide card (col-span-12) */
.vg-bento-wide {
  grid-column: span 12;
  height: 320px;
  position: relative;
  background: var(--vg-surface-container);
  border: 1px solid var(--vg-outline-variant);
  overflow: hidden;
}

/* Video hero variant — taller, full impact */
.vg-bento-wide--video {
  height: clamp(360px, 56vw, 600px);
  border-color: var(--vg-primary-container);
}

/* Hero video element */
.vg-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Video overlay — darker, more cinematic */
.vg-bento-overlay--video {
  background:
    linear-gradient(to top,  rgba(9,17,30,0.92) 0%, rgba(9,17,30,0.55) 40%, rgba(9,17,30,0.18) 70%, transparent 100%),
    linear-gradient(to right, rgba(9,17,30,0.3) 0%, transparent 60%);
}

.vg-bento-wide img,
.vg-bento-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  opacity: 0.8;
  transition: transform 0.7s var(--vg-ease), filter 0.4s;
}
.vg-bento-wide:hover img,
.vg-bento-card:hover img {
  transform: scale(1.05);
  filter: grayscale(0.6);
}
.vg-bento-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,28,50,0.9) 0%, rgba(13,28,50,0.4) 50%, transparent 100%);
  pointer-events: none;
}
.vg-bento-wide__content {
  position: absolute;
  bottom: 0; left: 0;
  padding: 32px;
  width: 100%;
}
.vg-bento-wide__content h2 {
  font-family: var(--vg-font-h);
  font-size: var(--vg-fs-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.2;
}
.vg-bento-wide__content p {
  font-family: var(--vg-font-body);
  font-size: var(--vg-fs-body);
  color: rgba(255,255,255,0.8);
  max-width: 640px;
  line-height: 1.5;
}

/* Small bento cards */
.vg-bento-card {
  grid-column: span 12;
  height: 400px;
  position: relative;
  background: var(--vg-surface-container);
  border: 1px solid var(--vg-outline-variant);
  overflow: hidden;
  transition: border-color 0.3s;
}
.vg-bento-card:hover {
  border-color: var(--vg-secondary);
}
.vg-card-index {
  position: absolute;
  top: 16px; right: 16px;
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vg-font-h);
  font-size: var(--vg-fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  z-index: 2;
}
.vg-bento-card__content {
  position: absolute;
  bottom: 0; left: 0;
  padding: 24px;
  z-index: 2;
}
.vg-bento-card__content h3 {
  font-family: var(--vg-font-h);
  font-size: var(--vg-fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.3;
}
.vg-bento-card__content p {
  font-family: var(--vg-font-body);
  font-size: var(--vg-fs-body);
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}

@media (min-width: 768px) {
  .vg-bento-card { grid-column: span 4; }
  .vg-bento-card--half { grid-column: span 6; }
}

/* ---------- 11. Panel layouts ---------- */
.vg-panel-light {
  border: 1px solid var(--vg-outline-variant);
  background: var(--vg-surface);
  padding: 32px;
}
.vg-panel-light h3 {
  font-family: var(--vg-font-h);
  font-size: var(--vg-fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--vg-on-surface);
  border-bottom: 1px solid var(--vg-outline-variant);
  padding-bottom: 16px;
  margin-bottom: 16px;
  line-height: 1.3;
}
.vg-panel-dark {
  background: var(--vg-primary-container);
  color: var(--vg-on-primary);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vg-panel-dark h3 {
  font-family: var(--vg-font-h);
  font-size: var(--vg-fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.3;
}
.vg-panel-dark p {
  color: rgba(255,255,255,0.8);
  font-size: var(--vg-fs-body-lg);
  line-height: 1.6;
  margin-bottom: 32px;
}

/* Phase list inside light panel */
.vg-phase-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vg-phase-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.vg-phase-item__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--vg-secondary);
  margin-top: 2px;
}
.vg-phase-item__content {}
.vg-phase-caps {
  display: block;
  font-family: var(--vg-font-caps);
  font-size: var(--vg-fs-caps);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vg-on-surface-variant);
  margin-bottom: 4px;
}
.vg-phase-item__content p {
  font-size: var(--vg-fs-body);
  color: var(--vg-on-surface);
  line-height: 1.5;
}

/* ---------- 12. KPI / Counter Cards ---------- */
.vg-kpi-grid {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--vg-gutter);
}
@media (min-width: 600px) {
  .vg-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}

.vg-kpi-card {
  border: 1px solid var(--vg-outline-variant);
  background: var(--vg-surface);
  padding: 24px;
}
.vg-kpi-card__number {
  font-family: var(--vg-font-h);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vg-primary);
  line-height: 1;
}
.vg-kpi-card__label {
  margin-top: 12px;
  font-family: var(--vg-font-caps);
  font-size: var(--vg-fs-caps);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vg-on-surface-variant);
}

/* ---------- 13. Case / Bento Case Cards ---------- */
.vg-case-grid {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--vg-gutter);
}
@media (min-width: 768px) {
  .vg-case-grid { grid-template-columns: repeat(3, 1fr); }
}

.vg-case-card {
  height: 400px;
  position: relative;
  background: var(--vg-surface-container);
  border: 1px solid var(--vg-outline-variant);
  overflow: hidden;
}
.vg-case-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform 0.7s var(--vg-ease), filter 0.4s;
}
.vg-case-card:hover img {
  transform: scale(1.05);
  filter: grayscale(0.6);
}
.vg-case-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,28,50,0.9) 0%, rgba(13,28,50,0.2) 60%, transparent 100%);
}
.vg-case-card__index {
  position: absolute;
  top: 16px; right: 16px;
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vg-font-h);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  z-index: 2;
}
.vg-case-card__content {
  position: absolute;
  bottom: 0; left: 0;
  padding: 24px;
  z-index: 2;
}
.vg-case-card__content h3 {
  font-family: var(--vg-font-h);
  font-size: var(--vg-fs-h3);
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.3;
}
.vg-case-card__content p {
  font-size: var(--vg-fs-body);
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}

/* ---------- 14. CTA Section (full dark panel) ---------- */
.vg-cta-section {
  grid-column: span 12;
  background: var(--vg-primary-container);
  padding: clamp(48px, 8vw, 80px) clamp(24px, 4vw, 64px);
  position: relative;
}
.vg-cta-section__inner {
  max-width: 720px;
}
.vg-cta-section h2 {
  font-family: var(--vg-font-h);
  font-size: var(--vg-fs-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin-top: 16px;
  margin-bottom: 16px;
  line-height: 1.2;
}
.vg-cta-section p {
  color: rgba(255,255,255,0.8);
  font-size: var(--vg-fs-body-lg);
  line-height: 1.6;
  margin-bottom: 32px;
}

/* ---------- 15. Page Header ---------- */
.vg-page-header {
  grid-column: span 12;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--vg-outline-variant);
}
.vg-page-header h1 {
  font-family: var(--vg-font-h);
  font-size: var(--vg-fs-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vg-primary);
  line-height: 1.1;
  margin-top: 12px;
  margin-bottom: 0;
}
.vg-page-header p {
  font-size: var(--vg-fs-body-lg);
  line-height: 1.6;
  color: var(--vg-on-surface-variant);
  max-width: 720px;
  margin-top: 16px;
}

/* ---------- 16. Process steps (Phase list, detailed) ---------- */
.vg-process-grid {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.vg-process-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vg-gutter);
  align-items: center;
}
@media (min-width: 768px) {
  .vg-process-row {
    grid-template-columns: 1fr 1.2fr;
  }
  .vg-process-row--reverse {
    grid-template-columns: 1.2fr 1fr;
    direction: rtl;
  }
  .vg-process-row--reverse > * { direction: ltr; }
}
.vg-process-media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--vg-surface-container);
  border: 1px solid var(--vg-outline-variant);
}
.vg-process-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.3);
  transition: transform 0.6s var(--vg-ease);
}
.vg-process-media:hover img { transform: scale(1.03); }
.vg-process-body__num {
  font-family: var(--vg-font-h);
  font-size: var(--vg-fs-h1);
  font-weight: 700;
  color: var(--vg-outline-variant);
  letter-spacing: -0.02em;
  line-height: 1;
}
.vg-process-body__title {
  font-family: var(--vg-font-h);
  font-size: var(--vg-fs-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vg-primary);
  margin: 12px 0 16px;
  line-height: 1.2;
}
.vg-process-body__desc {
  font-size: var(--vg-fs-body-lg);
  color: var(--vg-on-surface-variant);
  line-height: 1.7;
  max-width: 480px;
}

/* ---------- 17. Info Grid ---------- */
.vg-info-grid {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--vg-gutter);
}
@media (min-width: 600px) {
  .vg-info-grid { grid-template-columns: repeat(3, 1fr); }
}
.vg-info-item {
  border: 1px solid var(--vg-outline-variant);
  background: var(--vg-surface);
  padding: 24px;
}
.vg-info-item h3 {
  font-family: var(--vg-font-h);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--vg-primary);
  margin-bottom: 8px;
}
.vg-info-item p {
  font-size: var(--vg-fs-body);
  color: var(--vg-on-surface-variant);
  line-height: 1.65;
}

/* ---------- 18. Before/After comparison ---------- */
.vg-ba {
  grid-column: span 12;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--vg-outline-variant);
  overflow: hidden;
}
.vg-ba__col {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.vg-ba__col img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.vg-ba__col::before {
  content: attr(data-label);
  position: absolute;
  top: 16px; left: 16px;
  font-family: var(--vg-font-caps);
  font-size: var(--vg-fs-caps);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--vg-primary-container);
  padding: 6px 12px;
  z-index: 2;
}
.vg-ba__col + .vg-ba__col {
  border-left: 1px solid var(--vg-outline-variant);
}
.vg-ba__col--after::before {
  background: var(--vg-secondary);
}

/* ---------- 19. Consult cards ---------- */
.vg-consult-grid {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--vg-gutter);
}
@media (min-width: 768px) {
  .vg-consult-grid { grid-template-columns: repeat(2, 1fr); }
}
.vg-consult-card {
  border: 1px solid var(--vg-outline-variant);
  background: var(--vg-surface);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.vg-consult-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--vg-secondary);
  transition: width 0.4s var(--vg-ease);
}
.vg-consult-card:hover {
  border-color: var(--vg-secondary);
  box-shadow: var(--vg-shadow-md);
}
.vg-consult-card:hover::after { width: 100%; }
.vg-consult-card__icon {
  width: 48px; height: 48px;
  background: var(--vg-primary-container);
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vg-consult-card__title {
  font-family: var(--vg-font-h);
  font-size: var(--vg-fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--vg-primary);
  line-height: 1.3;
}
.vg-consult-card__num {
  font-family: var(--vg-font-caps);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--vg-primary);
  letter-spacing: -0.01em;
}
.vg-consult-card__hint {
  font-size: var(--vg-fs-body);
  color: var(--vg-on-surface-variant);
  line-height: 1.65;
}
.vg-consult-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* ---------- 20. FAQ ---------- */
.vg-faq {
  grid-column: span 12;
  max-width: 880px;
}
.vg-faq__item {
  border-top: 1px solid var(--vg-outline-variant);
}
.vg-faq__item:last-child {
  border-bottom: 1px solid var(--vg-outline-variant);
}
.vg-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--vg-font-h);
  font-size: var(--vg-fs-body-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--vg-on-surface);
  user-select: none;
}
.vg-faq__q::-webkit-details-marker { display: none; }
.vg-faq__toggle {
  font-family: var(--vg-font-caps);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--vg-secondary);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  transition: transform 0.3s;
}
.vg-faq__item[open] .vg-faq__toggle {
  content: none;
}
.vg-faq__a {
  display: none;
  padding: 0 0 24px;
  font-size: var(--vg-fs-body-lg);
  color: var(--vg-on-surface-variant);
  line-height: 1.75;
  max-width: 760px;
}
.vg-faq__item[open] > .vg-faq__a {
  display: block;
}

/* ---------- 21. Gallery strip ---------- */
.vg-strip {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.vg-strip__item {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--vg-surface-container);
}
.vg-strip__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.4);
  transition: transform 0.7s var(--vg-ease), filter 0.4s;
}
.vg-strip__item:hover img {
  transform: scale(1.05);
  filter: grayscale(0);
}
@media (max-width: 600px) {
  .vg-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 22. Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--vg-ease), transform 0.8s var(--vg-ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 23. Urgency Bar ---------- */
.vg-urgency-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110;
  height: 36px;
  background: var(--vg-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 var(--vg-margin);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.vg-urgency-bar__text {
  font-family: var(--vg-font-caps);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vg-urgency-bar__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  animation: urgency-pulse 2s ease-in-out infinite;
}
@keyframes urgency-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.4); }
}

/* When urgency bar is present, shift header & content down */
body.has-urgency-bar {
  --vg-urgency-h: 36px;
}
body.has-urgency-bar .vg-header {
  top: var(--vg-urgency-h);
}
body.has-urgency-bar .vg-main {
  padding-top: calc(var(--vg-header-h) + var(--vg-urgency-h) + 64px);
}
body.has-urgency-bar #vg-scroll-progress {
  top: var(--vg-urgency-h);
}

/* ---------- 24. Footer ---------- */
.vg-footer {
  background: #0a1929;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* 3-column body */
.vg-footer__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  max-width: var(--vg-max-w);
  margin: 0 auto;
  padding: 64px var(--vg-margin) 48px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
@media (min-width: 768px) {
  .vg-footer__body {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
  }
}

/* column label */
.vg-footer__col-label {
  font-family: var(--vg-font-caps);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vg-secondary);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vg-footer__col-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

/* Brand column */
.vg-footer__brand-name {
  font-family: var(--vg-font-h);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 4px;
}
.vg-footer__brand-sub {
  font-family: var(--vg-font-caps);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 20px;
}
.vg-footer__brand-desc {
  font-family: var(--vg-font-body);
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255,255,255,0.5);
}
.vg-footer__brand-desc strong {
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}

/* Info column */
.vg-footer__info-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0; margin: 0;
}
.vg-footer__info-list li {
  font-family: var(--vg-font-caps);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
  display: flex;
  gap: 8px;
}
.vg-footer__info-list li .vg-fi-key {
  color: rgba(255,255,255,0.25);
  min-width: 80px;
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 2px;
}
.vg-footer__info-list li .vg-fi-val {
  color: rgba(255,255,255,0.65);
}
.vg-footer__info-list a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.vg-footer__info-list a:hover { color: #fff; }

/* Quick links column */
.vg-footer__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  padding: 0; margin: 0;
}
.vg-footer__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--vg-font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.2s;
  gap: 8px;
}
.vg-footer__links a:last-child { border-bottom: none; }
.vg-footer__links a:hover { color: #fff; }
.vg-footer__links a .vg-arrow {
  font-size: 12px;
  opacity: 0.4;
  transition: transform 0.2s, opacity 0.2s;
}
.vg-footer__links a:hover .vg-arrow {
  transform: translateX(3px);
  opacity: 0.9;
}
.vg-footer__links a.is-cta {
  color: var(--vg-secondary);
  font-weight: 600;
  border-bottom: none;
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(0,81,213,0.12);
  border: 1px solid rgba(0,81,213,0.25);
}
.vg-footer__links a.is-cta:hover {
  background: rgba(0,81,213,0.22);
  color: #fff;
}

/* Bottom bar */
.vg-footer__bottom {
  max-width: var(--vg-max-w);
  margin: 0 auto;
  padding: 18px var(--vg-margin);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.vg-footer__copy {
  font-family: var(--vg-font-caps);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
}
.vg-footer__privacy {
  font-family: var(--vg-font-caps);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.2);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.2s;
}
.vg-footer__privacy:hover { color: rgba(255,255,255,0.55); }

/* ---------- 24. Skip link + accessibility ---------- */
.vg-skip {
  position: absolute;
  left: -9999px;
  top: -9999px;
  background: var(--vg-primary);
  color: #fff;
  padding: 12px 20px;
  z-index: 9999;
  font-family: var(--vg-font-caps);
  font-size: var(--vg-fs-caps);
  letter-spacing: 0.08em;
}
.vg-skip:focus {
  left: 16px;
  top: 16px;
}

/* ---------- 25. Sticky mobile CTA ---------- */
.vg-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--vg-primary-container);
  color: #fff;
  transform: translateY(100%);
  transition: transform 0.4s var(--vg-ease);
  /* 노치폰 safe-area */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left:   env(safe-area-inset-left,   0px);
  padding-right:  env(safe-area-inset-right,  0px);
}
.vg-sticky-cta[data-visible="true"] { transform: translateY(0); }
.vg-sticky-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  min-height: 52px; /* 노치 영역 위 충분한 터치 타겟 */
  font-family: var(--vg-font-caps);
  font-size: var(--vg-fs-caps);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.vg-sticky-cta__primary {
  background: var(--vg-secondary);
}
.vg-sticky-cta__primary:hover { background: var(--vg-secondary-container); }
.vg-sticky-cta__secondary:hover { background: rgba(255,255,255,0.1); }
@media (min-width: 769px) { .vg-sticky-cta { display: none; } }

/* ---------- 26. Privacy modal ---------- */
.vg-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
}
.vg-modal[aria-hidden="false"] { display: flex; }
.vg-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13,28,50,0.72);
  backdrop-filter: blur(4px);
}
.vg-modal__panel {
  position: relative;
  z-index: 1;
  width: min(620px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--vg-surface);
  border: 1px solid var(--vg-outline-variant);
  padding: 40px clamp(24px, 4vw, 48px);
}
.vg-modal__close {
  position: absolute;
  right: 16px; top: 12px;
  background: none;
  border: 0;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--vg-on-surface-variant);
}
.vg-modal h2 {
  font-family: var(--vg-font-h);
  font-size: var(--vg-fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.vg-modal h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.2em 0 0.4em;
}
.vg-modal p, .vg-modal li {
  font-size: var(--vg-fs-body);
  color: var(--vg-on-surface-variant);
  line-height: 1.65;
}

/* ---------- 27. Label Caps utility ---------- */
.vg-label-caps {
  font-family: var(--vg-font-caps);
  font-size: var(--vg-fs-caps);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- 28. Data mono utility ---------- */
.vg-mono {
  font-family: var(--vg-font-caps);
  font-size: var(--vg-fs-mono);
  font-weight: 500;
}

/* ---------- 29. Why-VAMOS 강점 카드 ---------- */
.vg-why-grid {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--vg-gutter);
}
@media (min-width: 600px) {
  .vg-why-grid { grid-template-columns: repeat(3, 1fr); }
}
.vg-why-card {
  border-top: 2px solid var(--vg-secondary);
  padding-top: 24px;
  padding-bottom: 8px;
}
.vg-why-card__icon {
  width: 48px; height: 48px;
  background: var(--vg-primary-container);
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

/* ---------- 30. Review 카드 ---------- */
.vg-review-grid {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--vg-gutter);
}
@media (min-width: 768px) {
  .vg-review-grid { grid-template-columns: repeat(3, 1fr); }
}
.vg-review-card {
  border: 1px solid var(--vg-outline-variant);
  background: var(--vg-surface);
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.vg-review-card:hover {
  border-color: var(--vg-secondary);
  box-shadow: var(--vg-shadow-md);
}
.vg-review-card__stars {
  color: var(--vg-secondary);
  font-size: 1rem;
  letter-spacing: 0.08em;
  line-height: 1;
}
.vg-review-card__body {
  font-size: var(--vg-fs-body);
  color: var(--vg-on-surface-variant);
  line-height: 1.75;
  flex: 1;
}
.vg-review-card__name {
  font-family: var(--vg-font-caps);
  font-size: var(--vg-fs-caps);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vg-outline);
  margin-top: auto;
}

/* ---------- 31. Reveal 변형: slide-left, scale ---------- */
[data-reveal="slide-left"] {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.8s var(--vg-ease), transform 0.8s var(--vg-ease);
}
[data-reveal="slide-left"].is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal="scale"] {
  opacity: 0;
  transform: scale(0.93);
  transition: opacity 0.7s var(--vg-ease), transform 0.7s var(--vg-ease);
}
[data-reveal="scale"].is-visible {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal="slide-left"],
  [data-reveal="scale"] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 32. Placeholder image ---------- */
.vg-img-ph {
  background: var(--vg-surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--vg-outline);
  font-family: var(--vg-font-caps);
  font-size: var(--vg-fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ========================================================
   MOBILE OPTIMIZATIONS
   ======================================================== */

@media (max-width: 767px) {

  /* 1. bento 카드 높이 축소 (400px → 260px) */
  .vg-bento-card {
    height: 260px !important;
  }

  /* 2. fullbleed hero 콘텐츠 여백 */
  .vg-fullbleed-hero__content {
    padding-bottom: clamp(80px, 12vh, 120px);
  }

  /* 3. hero desc 최소 font-size 보장 */
  .vg-fullbleed-hero__desc {
    font-size: 1rem;
    line-height: 1.65;
  }

  /* 4. 히어로 배지 — 모바일에서 줄바꿈 방지 */
  .vg-hero-badge--dark {
    font-size: 10px;
    padding: 5px 10px;
  }

  /* 5. 섹션 간격 축소 */
  .vg-grid-12 {
    row-gap: 64px !important;
  }

  /* 6. ref-tag 폰트 가독성 */
  .vg-ref-tag {
    font-size: 10px;
  }

  /* 7. 푸터 정보 줄바꿈 개선 */
  .vg-footer__info-list li {
    flex-direction: column;
    gap: 2px;
  }
  .vg-fi-key {
    min-width: unset;
  }

  /* 8. 리뷰 카드 단일 컬럼 */
  .vg-review-grid {
    grid-template-columns: 1fr !important;
  }

  /* 9. why-vamos 강점 카드 단일 컬럼 */
  .vg-why-grid {
    grid-template-columns: 1fr !important;
  }

  /* 10. 프로세스 연결선 숨김 (모바일 세로에서 의미없음) */
  #vg-process-connector {
    display: none;
  }

  /* 11. 시공사례 카드 높이 */
  .vg-case-card {
    height: 240px !important;
  }
}

/* safe-area: 히어로 CTA가 sticky CTA에 가리지 않도록 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .vg-fullbleed-hero__content {
    padding-bottom: calc(clamp(48px, 7vh, 96px) + env(safe-area-inset-bottom));
  }
}

/* ── Breadcrumb nav ── */
.vg-breadcrumb {
  background: var(--vg-surface-variant, #f0f4f8);
  border-bottom: 1px solid var(--vg-outline-variant, #dde3ea);
  padding: 8px var(--vg-margin, 24px);
}
.vg-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: var(--vg-max-w, 1200px);
  margin: 0 auto;
  list-style: none;
  font-size: 13px;
  color: var(--vg-on-surface-variant, #44546a);
}
.vg-breadcrumb__item + .vg-breadcrumb__item::before {
  content: '›';
  color: var(--vg-outline, #8fa3b8);
  font-size: 14px;
}
.vg-breadcrumb__link {
  color: var(--vg-on-surface-variant, #44546a);
  text-decoration: none;
}
.vg-breadcrumb__link:hover { color: var(--vg-primary, #0051d5); text-decoration: underline; }
.vg-breadcrumb__item--current { color: var(--vg-on-surface, #0d1c32); font-weight: 500; }