:root {
      --ink: #101b24;
      --ink-soft: #182832;
      --gold: #c9a45f;
      --gold-light: #e4c98e;
      --water: #76c7d3;
      --paper: #f4f1e9;
      --muted: #aab5b8;
      --white: #fff;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      background: var(--ink);
      color: var(--paper);
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.6;
    }

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

    .shell {
      width: min(1160px, calc(100% - 48px));
      margin: auto;
    }

    header {
      height: 88px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(255,255,255,.09);
    }

    .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 4px;
    }

    .brand-mark {
      width: 39px;
      height: 39px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 34px;
      color: #c3cccd;
      font-size: 13px;
    }

    .nav-links a:hover { color: var(--gold-light); }

    .nav-cta {
      border: 1px solid rgba(201,164,95,.65);
      padding: 10px 17px;
      color: var(--gold-light);
    }

    .hero {
      min-height: 690px;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      align-items: center;
      gap: 40px;
      padding-top: 65px;
      padding-bottom: 75px;
    }

    .eyebrow {
      color: var(--gold-light);
      text-transform: uppercase;
      letter-spacing: 3px;
      font-size: 11px;
      font-weight: 700;
    }

    h1 {
      font-size: clamp(48px, 6.2vw, 78px);
      line-height: 1.04;
      letter-spacing: -3px;
      margin: 24px 0;
      max-width: 650px;
    }

    h1 span { color: var(--gold-light); }

    .hero-copy {
      max-width: 530px;
      color: #b7c1c2;
      font-size: 17px;
      line-height: 1.9;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 35px;
    }

    .button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-height: 48px;
      padding: 0 22px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      transition: .2s ease;
    }

    .button-primary {
      background: var(--gold);
      color: #14212a;
    }

    .button-primary:hover { background: var(--gold-light); }

    .button-outline {
      border: 1px solid rgba(255,255,255,.3);
      color: var(--paper);
    }

    .button-outline:hover { border-color: var(--gold); }

    .visual {
      position: relative;
      min-height: 490px;
      display: grid;
      place-items: center;
    }

    .visual::before {
      content: "";
      position: absolute;
      width: 390px;
      height: 390px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(72,145,155,.18), transparent 70%);
    }

    .emblem {
      position: relative;
      width: min(100%, 470px);
      filter: drop-shadow(0 24px 35px rgba(0,0,0,.3));
    }

    .visual-caption {
      position: absolute;
      bottom: 3px;
      color: #89999d;
      font-size: 10px;
      letter-spacing: 3px;
      text-transform: uppercase;
    }

    .meaning {
      background: #172731;
      border-top: 1px solid rgba(255,255,255,.07);
      border-bottom: 1px solid rgba(255,255,255,.07);
      padding: 75px 0;
    }

    .meaning-grid {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 70px;
      align-items: start;
    }

    h2 {
      font-size: clamp(32px, 4vw, 46px);
      line-height: 1.15;
      letter-spacing: -1.5px;
      margin: 15px 0;
    }

    .meaning p {
      color: #b7c1c2;
      font-size: 16px;
      line-height: 1.9;
      margin: 0;
    }

    .section {
      padding: 105px 0;
    }

    .section-intro {
      max-width: 650px;
      margin-bottom: 48px;
    }

    .section-intro p {
      color: var(--muted);
      font-size: 16px;
      line-height: 1.8;
    }

    .principles {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .principle {
      padding: 30px;
      min-height: 205px;
      background: #172731;
      border: 1px solid rgba(255,255,255,.08);
    }

    .principle-number {
      color: var(--gold);
      font-size: 12px;
      letter-spacing: 2px;
    }

    .principle h3 {
      font-size: 19px;
      margin: 24px 0 10px;
    }

    .principle p {
      color: #aab8ba;
      font-size: 14px;
      line-height: 1.8;
      margin: 0;
    }

    .product-section {
      background: var(--paper);
      color: var(--ink);
      padding: 100px 0;
    }

    .product-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 55px;
      align-items: center;
    }

    .product-kicker {
      color: #8b6a32;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
    }

    .product-card h2 { margin-top: 17px; }

    .product-card p {
      color: #59656a;
      line-height: 1.9;
      font-size: 16px;
    }

    .product-visual {
      min-height: 300px;
      display: grid;
      place-items: center;
      background: #e7e2d6;
      border: 1px solid #d8d0c0;
      padding: 35px;
    }

    .product-symbol {
      width: 160px;
      height: 160px;
      border: 1px solid rgba(139,106,50,.5);
      display: grid;
      place-items: center;
      color: #8b6a32;
      font-size: 43px;
      font-weight: 700;
      letter-spacing: -3px;
    }

    .product-note {
      font-size: 12px !important;
      color: #778084 !important;
      border-left: 2px solid var(--gold);
      padding-left: 13px;
      margin-top: 25px;
    }

    .closing {
      text-align: center;
      padding: 100px 24px;
    }

    .closing h2 {
      max-width: 650px;
      margin: 18px auto;
    }

    .closing p {
      color: var(--muted);
      max-width: 550px;
      margin: 0 auto 30px;
    }

    footer {
      border-top: 1px solid rgba(255,255,255,.09);
      padding: 27px 0;
      color: #87969a;
      font-size: 12px;
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }

    @media (max-width: 800px) {
      header { height: auto; min-height: 88px; padding: 12px 0; }
      .nav { align-items: flex-start; flex-direction: column; gap: 14px; }
      .nav-links { width: 100%; gap: 12px 18px; flex-wrap: wrap; font-size: 12px; }
      .hero {
        grid-template-columns: 1fr;
        padding-top: 75px;
        gap: 10px;
      }
      .visual { min-height: 390px; }
      .emblem { max-width: 370px; }
      .meaning-grid, .product-card { grid-template-columns: 1fr; gap: 25px; }
      .principles { grid-template-columns: 1fr; }
      .section { padding: 75px 0; }
    }

    @media (max-width: 430px) {
      .shell { width: min(100% - 32px, 1160px); }
      .brand { font-size: 17px; letter-spacing: 3px; }
      .nav-cta { padding: 8px 11px; font-size: 11px; }
      h1 { letter-spacing: -2px; }
      .visual { min-height: 320px; }
      .visual::before { width: min(390px, 100vw); height: min(390px, 100vw); }
    }


/* DIJUANG multi-page navigation */
.nav-menu { position: relative; }
.nav-menu summary {
  cursor: pointer;
  list-style: none;
  color: #c3cccd;
  font-size: 13px;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { content: "⌄"; margin-left: 7px; color: var(--gold); }
.nav-menu[open] summary,
.nav-menu summary:hover { color: var(--gold-light); }
.nav-dropdown {
  position: absolute;
  z-index: 30;
  top: calc(100% + 18px);
  left: -18px;
  min-width: 230px;
  display: grid;
  gap: 2px;
  padding: 9px;
  background: #182832;
  border: 1px solid rgba(201,164,95,.28);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.nav-dropdown a {
  display: block;
  padding: 10px 12px;
  color: #c3cccd;
  font-size: 12px;
}
.nav-dropdown a:hover {
  color: var(--gold-light);
  background: rgba(255,255,255,.05);
}
@media (max-width: 800px) {
  .nav-menu { position: static; }
  .nav-dropdown {
    position: static;
    min-width: 0;
    margin-top: 8px;
    box-shadow: none;
  }
}


/* DIJUANG multi-page company sections */
.company-page { padding-bottom: 70px; }
.company-hero { padding: 105px 0 65px; max-width: 850px; }
.company-hero h1 { margin: 20px 0; }
.company-lead { max-width: 760px; color: #b7c1c2; font-size: 19px; line-height: 1.85; }
.company-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.company-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 20px 0 75px; }
.company-card { border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.025); padding: 30px; min-height: 190px; }
.company-card h2 { color: var(--paper); font-size: 22px; line-height: 1.3; margin: 10px 0 12px; }
.company-card p { color: #b7c1c2; line-height: 1.85; margin: 0; }
.company-status { display: inline-block; color: var(--gold-light); border: 1px solid rgba(201,164,95,.4); padding: 4px 9px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.company-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 55px 0 20px; }
.company-bottom h2 { font-size: clamp(30px, 4vw, 46px); margin: 14px 0; }
.company-bottom p { color: #b7c1c2; margin-bottom: 25px; }
@media (max-width: 800px) {
  .company-hero { padding: 70px 0 45px; }
  .company-grid { grid-template-columns: 1fr; }
  .company-card { padding: 24px; }
}

/* Accessibility: visible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 3px;
}

/* Accessibility: respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}


/* Accessibility: skip navigation */
.skip-link {
  transition: none;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 12px 18px;
  background: #ffffff;
  color: #101b24;
  border: 2px solid currentColor;
  border-radius: 4px;
  font-weight: 700;
  transform: translateY(-160%);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

@media (max-width: 430px) {
  .company-hero h1 {
    font-size: clamp(2.2rem, 10.5vw, 2.8rem);
    letter-spacing: -.055em;
  }
}