/* S9-r5: approved option-02 identity and shared semantic colours.
   Typography and responsive application are governed by brand-system.css. */
:root {
  --paper: var(--vv-krem);
  --ink: var(--vv-fenyo);
  --text: var(--vv-tinta);
  --quiet: var(--vv-muted);
  --accent: var(--vv-paprika);
  --accent-hover: var(--vv-accent-hover);
  --leaf: var(--vv-zsalya);
  --white: var(--vv-feher);
  --line: var(--vv-line);
}
.header { background: rgba(251,244,232,.98); height: 96px; }
.header .logo.vv-wordmark { min-height: 70px; }
.header .logo.vv-wordmark img { width: 285px; max-height: none; height: auto; }
.header .logo.vv-wordmark picture { display: block; line-height: 0; }
.footer-logo.vv-wordmark { min-height: 72px; }
.footer-logo.vv-wordmark img { width: 285px; height: auto; }
.vv-hero h1 span, .page-hero h1 span { color: var(--accent); }
.preview-bar, .channel-band { background: var(--leaf); color: var(--ink); }
.preview-bar a { display: flex; align-items: center; min-height: 32px; }
.preview-detail { opacity: 1; }
.channel-band .container-xl { color: var(--ink); }
.hero-visual, .package-section, .commercial-strip,
.location-local, .rhythm, .step-output { background: var(--leaf); }
.hero-visual { border-color: var(--line); box-shadow: 0 18px 60px -25px #153d2d3b; }
.hero-operation { display: grid; grid-template-columns: minmax(0,1fr) 153px; gap: 15px; align-items: center; }
.hero-operation .channel-grid { grid-template-columns: 1fr; gap: 7px; }
.hero-operation .channel-grid > div { min-height: 54px; padding: 9px 11px; }
.hero-operation .channel-grid span { font-size: 13px; }
.hero-operation .channel-grid small { font-size: 11px; }
.hero-host { width: 153px; height: auto; display: block; }
.signal, .visual-top, .channel-grid .bi, .channel-grid small,
.service-number, .service-icon, .detail-index, .detail-heading > .bi,
.rhythm > span, .conditions-teaser .bi, .check-list .bi,
.plain-card > .bi, .location-local > .bi, .large-list .bi,
.known-owner .bi, .example-path, .goal-index { color: var(--ink); }
.signal > span { background: var(--ink); }
.visual-connector { color: var(--ink); }
.visual-connector span { background: #7f9788; }
.channel-grid > div, .service-grid .service-item, .plain-card { border-color: var(--line); }
.plain-card { background: var(--white); }
.service-grid .service-item:hover { border-color: var(--ink); }
.split-us { color: var(--paper); }
.split-you, .split-note { color: var(--text); }
.split-you p.split-note { border-color: #9fb19e; }
.split-us .check-list .bi, .split-us .eyebrow { color: var(--leaf); }
.button-light:hover { background: var(--paper); }
.button-light:focus-visible, .closing-section a:focus-visible,
.split-us a:focus-visible { outline-color: var(--paper); }
.step-number { color: var(--accent); }
.page-character { text-align: right; }
.page-character img { width: 215px; max-height: 280px; object-fit: contain; }
.brand-status { display: inline-flex; flex-wrap: wrap; gap: 11px; padding: 12px 16px; margin-top: 27px; background: var(--leaf); font-size: 14px; color: var(--ink); }
.brand-master { display: block; margin-inline: auto; width: 272px; }
.brand-wordmark-surface { margin-bottom: 16px; }
.brand-icon-usage > img { flex-basis: 64px; width: 64px; height: 64px; }
.production-story { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 25px; }
.production-story article { display: flex; flex-direction: column; }
.production-image { height: 248px; display: flex; align-items: center; justify-content: center; padding: 12px; background: var(--paper); margin-bottom: 27px; border: 1px solid var(--line); }
.production-image img { display: block; width: auto; max-width: 100%; height: 100%; object-fit: contain; }
.production-logo img { width: 100%; height: auto; }
.production-story .eyebrow { display: block; font-size: 10px; margin-bottom: 12px; }
.production-story h3 { font-size: 25px; line-height: 1.15; letter-spacing: -.03em; }
.production-story p { font-size: 16px; line-height: 1.65; }
.brand-deliverables { display: grid; grid-template-columns: repeat(4,1fr); gap: 25px; padding-block: 35px; margin-top: 25px; border-block: 1px solid #a3b5a4; }
.brand-deliverables strong { display: block; font-size: 52px; line-height: 1.1; color: var(--ink); font-weight: 600; letter-spacing: -.05em; }
.brand-deliverables span { display: block; margin-top: 9px; font-size: 14px; }
.brand-deliverables + .scope-note { margin-top: 24px; max-width: 960px; }
.brand-resource-links { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 24px; }
.character-sheet { display: block; width: 100%; margin-bottom: 24px; }
.palette { grid-template-columns: repeat(3,1fr); }
.brand .table-responsive { outline-offset: 6px; }
.brand .table-responsive:focus-visible { outline: 3px solid var(--accent); }
@media (max-width:1199px) {
  .header .logo.vv-wordmark img { width: 285px; }
  .production-story { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 32px; }
  .production-image { height: 260px; }
}
@media (max-width:991px) {
  .hero-visual { max-width: 590px; margin-inline: auto; }
  .hero-operation { grid-template-columns: minmax(0,1fr) 170px; }
  .hero-host { width: 170px; }
  .brand-master { width: 225px; }
}
@media (max-width:767px) {
  .header { height: 78px; }
  .header .logo.vv-wordmark { min-height: 54px; }
  .header .logo.vv-wordmark img { width: 260px; }
  .footer-logo.vv-wordmark img { width: 275px; }
  .hero-operation { grid-template-columns: minmax(0,1fr) 110px; gap: 8px; }
  .hero-host { width: 110px; }
  .hero-operation .channel-grid > div { grid-template-columns: 18px minmax(0,1fr); padding: 8px; column-gap: 7px; }
  .hero-operation .channel-grid .bi { font-size: 18px; }
  .hero-operation .channel-grid span { font-size: 12px; }
  .hero-operation .channel-grid small { font-size: 10px; }
  .page-character { text-align: left; }
  .page-character img { width: 160px; max-height: 200px; }
  .brand-status { line-height: 1.6; }
  .brand-master { width: 220px; }
  .brand-icon-usage p { min-width: 0; }
  .brand-icon-usage { flex-wrap: wrap; gap: 18px; align-items: flex-start; }
  .brand-icon-usage > img { flex-shrink: 0; }
  .brand-icon-usage p { flex: 1 1 calc(100% - 100px); margin-bottom: 0; }
  .brand-icon-usage > a { flex-basis: 100%; }
  .production-story { grid-template-columns: 1fr; }
  .production-story article { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 20px; }
  .production-image { height: 166px; padding: 8px; margin: 0; }
  .production-story h3 { font-size: 23px; }
  .production-story .eyebrow { font-size: 9px; margin-bottom: 10px; }
  .production-story p { font-size: 15px; }
  .brand-deliverables { grid-template-columns: repeat(2,1fr); row-gap: 28px; }
  .brand-deliverables strong { font-size: 44px; }
  .brand-resource-links { display: grid; gap: 15px; }
  .brand-resource-links .text-link { font-size: 14px; }
  .palette { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:575px) {
  .header .logo.vv-wordmark img { width: 219px; }
  .mobile-nav-toggle { margin-left: 7px; }
}
@media (max-width:359px) {
  .header .logo.vv-wordmark img { width: 204px; }
  .hero-operation { grid-template-columns: minmax(0,1fr) 87px; }
  .hero-host { width: 87px; }
  .hero-operation .channel-grid > div { padding: 6px; gap: 5px; }
  .hero-operation .channel-grid span { font-size: 11px; }
  .hero-operation .channel-grid small { font-size: 9px; }
  .production-story article { grid-template-columns: 85px minmax(0,1fr); gap: 15px; }
  .production-image { height: 137px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}