.nav__brand {
  font-size: var(--txt-xl);
  font-weight: 700;
  display: flex;           
  align-items: center;     
  gap: var(--sp-sm);       
}

.nav__brand-icon {        
  width: 4rem;
  height: 4rem;
  display: block;
}


    .password-gate {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--sp-2xl);
      background: linear-gradient(135deg, var(--clr-white) 0%, var(--clr-bg-secondary) 100%);
    }

    .password-box {
      background: var(--clr-white);
      border: 1px solid var(--clr-border);
      padding: var(--sp-5xl) var(--sp-4xl);
      max-width: 32rem;
      width: 100%;
      text-align: center;
      box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.08);
    }

    .password-box h1 {
      font-size: var(--txt-3xl);
      margin-bottom: var(--sp-xl);
      line-height: 1.1;
    }

    .password-box p {
      margin-bottom: var(--sp-4xl);
      color: var(--clr-grey);
      line-height: 1.7;
    }

    .password-input {
      width: 100%;
      padding: var(--sp-lg) var(--sp-xl);
      font-size: var(--txt-base);
      font-family: inherit;
      border: 1px solid var(--clr-border);
      border-radius: 0;
      margin-bottom: var(--sp-lg);
      transition: all var(--trans);
      background: var(--clr-white);
    }

    .password-input:focus {
      outline: none;
      border-color: var(--clr-black);
      box-shadow: 0 0 0 3px rgba(28, 28, 28, 0.05);
    }

    .password-error {
      color: #C62828;
      font-size: var(--txt-sm);
      margin-bottom: var(--sp-lg);
      opacity: 0;
      transition: opacity var(--trans);
      padding: var(--sp-md);
      background: #FFEBEE;
      border-left: 3px solid #C62828;
    }

    .password-error.show {
      opacity: 1;
    }

    .manual-content {
      display: none;
    }

    .manual-content.unlocked {
      display: block;
    }

    /* Hero Section */
    .manual-hero {
      background: linear-gradient(135deg, var(--clr-bg-secondary) 0%, var(--clr-bg-tertiary) 100%);
      padding: var(--sp-6xl) 0;
      margin-bottom: var(--sp-6xl);
      border-bottom: 1px solid var(--clr-border);
    }

    .manual-hero h1 {
      font-size: var(--txt-4xl);
      margin-bottom: var(--sp-lg);
      line-height: 1;
    }

    .manual-hero .date {
      font-size: var(--txt-lg);
      color: var(--clr-grey);
      font-weight: 500;
      margin-bottom: 0;
    }

    /* Notice */
    .notice {
      background: var(--clr-bg-tertiary);
      padding: var(--sp-xl) var(--sp-2xl);
      margin-bottom: var(--sp-4xl);
      border-left: 4px solid var(--clr-black);
      line-height: 1.6;
    }

    .notice strong {
      display: inline;
      font-weight: 600;
      color: var(--clr-black);
    }

    .notice a {
      color: var(--clr-black);
    }

    /* Section Headers */
    .section-header {
      margin-bottom: var(--sp-5xl);
    }

    .section-header h2 {
      font-size: var(--txt-3xl);
      margin-bottom: var(--sp-md);
      line-height: 1.1;
    }

    .section-header p {
      font-size: var(--txt-lg);
      color: var(--clr-grey);
      max-width: 50rem;
    }

    /* Part Reference Links */
    .part-ref {
      color: var(--clr-black);
      text-decoration: none;
      font-weight: 600;
      font-size: 0.75em;
      padding: 0.1em 0.3em;
      background: var(--clr-bg-tertiary);
      border-radius: 2px;
      transition: all var(--trans);
      display: inline-block;
      line-height: 1;
    }

    .part-ref:hover {
      background: var(--clr-black);
      color: var(--clr-white);
    }

    sup {
      line-height: 0;
      position: relative;
      vertical-align: baseline;
      top: -0.5em;
    }

    /* Parts Legend - Combined Compact Layout */
    .parts-section {
      background: var(--clr-bg-secondary);
      padding: var(--sp-5xl) 0;
      margin: 0;
      border-top: 1px solid var(--clr-border);
      border-bottom: 1px solid var(--clr-border);
    }

    .parts-section .container {
      max-width: 1400px;
    }

    .parts-wrapper {
      /* Inside container, no extra styling needed */
    }

    .parts-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-xs);
      padding: 0;
      background: transparent;
    }

    .part-item {
      display: grid;
      grid-template-columns: auto auto 1fr auto;
      gap: var(--sp-sm);
      align-items: center;
      padding: var(--sp-sm);
      background: var(--clr-white);
      border: 1px solid var(--clr-border);
      transition: all var(--trans);
      cursor: pointer;
      user-select: none;
    }

    .part-item:hover {
      border-color: var(--clr-black);
    }

    .part-item.checked {
      background: var(--clr-bg-tertiary);
      border-color: var(--clr-grey);
      opacity: 0.5;
    }

    .part-item.checked .part-label {
      text-decoration: line-through;
      color: var(--clr-grey);
    }

    .part-checkbox {
      width: 1.1rem;
      height: 1.1rem;
      border: 2px solid var(--clr-border);
      background: var(--clr-white);
      border-radius: 0.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--trans);
      flex-shrink: 0;
    }

    .part-item:hover .part-checkbox {
      border-color: var(--clr-black);
    }

    .part-item.checked .part-checkbox {
      background: var(--clr-black);
      border-color: var(--clr-black);
    }

    .part-checkbox::after {
      content: '\2713';
      color: var(--clr-white);
      font-size: 0.7rem;
      font-weight: 700;
      opacity: 0;
      transform: scale(0);
      transition: all 0.2s ease;
    }

    .part-item.checked .part-checkbox::after {
      opacity: 1;
      transform: scale(1);
    }

    .part-content {
      display: contents;
    }

    .part-text {
      display: contents;
    }

    .part-number {
      font-size: var(--txt-sm);
      font-weight: 700;
      color: var(--clr-black);
    }

    .part-label {
      font-size: var(--txt-sm);
      line-height: 1.3;
      color: var(--clr-black);
      font-weight: 400;
      transition: all var(--trans);
    }

    .parts-images {
      display: none;
    }

    .part-image-wrapper {
      position: relative;
      background: var(--clr-bg-tertiary);
      border: 1px solid var(--clr-border);
      aspect-ratio: 1;
      overflow: hidden;
      width: 50px;
      height: 50px;
      flex-shrink: 0;
      transition: transform var(--trans);
    }

    .part-image-wrapper:hover {
      transform: scale(1.1);
    }

    .part-image-wrapper.checked {
      opacity: 0.5;
      filter: grayscale(100%);
    }

    .part-image-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .part-image-number {
      display: none;
    }

    @media (max-width: 1200px) {
      .parts-list {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 767px) {
      .parts-section {
        padding: var(--sp-4xl) 0;
      }

      .parts-list {
        grid-template-columns: 1fr;
      }

      .part-item {
        padding: var(--sp-xs);
      }

      .part-image-wrapper {
        width: 40px;
        height: 40px;
      }

      .part-image-number {
        font-size: 1rem;
      }
    }

    /* Steps */
    .steps-section {
      padding: var(--sp-6xl) 0;
    }

    .step {
      margin-bottom: var(--sp-section);
      position: relative;
    }

    .step:last-child {
      margin-bottom: 0;
    }

    .step-header {
      margin-bottom: var(--sp-4xl);
      max-width: 55rem;
    }

    .step-number {
      font-size: var(--txt-xs);
      font-weight: 700;
      color: var(--clr-grey);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: var(--sp-md);
    }

    .step-title {
      font-size: var(--txt-2xl);
      line-height: 1.3;
      color: var(--clr-black);
      font-weight: 600;
    }

    .step-content {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--sp-3xl);
    }

    .step-images {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
      gap: var(--sp-2xl);
    }

    .step-image-wrapper {
      position: relative;
      background: var(--clr-bg-tertiary);
      aspect-ratio: 4/3;
      overflow: hidden;
      cursor: pointer;
      transition: all var(--trans);
      border: 1px solid var(--clr-border);
    }

    .step-image-wrapper:hover {
      transform: translateY(-4px);
      box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.12);
      border-color: var(--clr-black);
    }

    .step-image-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform var(--trans);
    }

    .step-image-wrapper:hover img {
      transform: scale(1.05);
    }

    .step-image-wrapper::after {
      content: '\f00e';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      position: absolute;
      bottom: var(--sp-lg);
      right: var(--sp-lg);
      width: 2.5rem;
      height: 2.5rem;
      background: rgba(28, 28, 28, 0.85);
      color: var(--clr-white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--txt-sm);
      opacity: 0;
      transition: opacity var(--trans);
      pointer-events: none;
      backdrop-filter: blur(8px);
    }

    .step-image-wrapper:hover::after {
      opacity: 1;
    }

    .step-substeps {
      margin-top: var(--sp-2xl);
      padding: var(--sp-2xl);
      background: var(--clr-bg-tertiary);
      border-left: 3px solid var(--clr-grey);
    }

    .step-substeps h4 {
      font-size: var(--txt-lg);
      font-weight: 600;
      margin-bottom: var(--sp-lg);
      color: var(--clr-black);
    }

    .step-substeps ol {
      list-style: none;
      counter-reset: substep-counter;
      padding-left: 0;
    }

    .step-substeps li {
      counter-increment: substep-counter;
      position: relative;
      padding-left: var(--sp-3xl);
      margin-bottom: var(--sp-lg);
      line-height: 1.6;
    }

    .step-substeps li:last-child {
      margin-bottom: 0;
    }

    .step-substeps li::before {
      content: counter(substep-counter);
      position: absolute;
      left: 0;
      top: 0;
      width: 1.5rem;
      height: 1.5rem;
      background: var(--clr-black);
      color: var(--clr-white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--txt-xs);
      font-weight: 700;
    }

    .substep-images {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
      gap: var(--sp-lg);
      margin-top: var(--sp-xl);
    }

    .substep-image-wrapper {
      position: relative;
      background: var(--clr-white);
      aspect-ratio: 1;
      overflow: hidden;
      cursor: pointer;
      transition: all var(--trans);
      border: 1px solid var(--clr-border);
    }

    .substep-image-wrapper:hover {
      transform: translateY(-2px);
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
      border-color: var(--clr-black);
    }

    .substep-image-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Divider */
    .step-divider {
      height: 1px;
      background: linear-gradient(to right, transparent, var(--clr-border) 50%, transparent);
      margin: var(--sp-6xl) 0;
    }

    /* Final Note */
    .final-note {
      background: var(--clr-black);
      color: var(--clr-white);
      padding: var(--sp-6xl) var(--sp-4xl);
      margin-top: var(--sp-section);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .final-note::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(to right, transparent, var(--clr-white) 50%, transparent);
    }

    .final-note h3 {
      font-size: var(--txt-3xl);
      color: var(--clr-white);
      margin-bottom: var(--sp-2xl);
      line-height: 1.1;
    }

    .final-note p {
      color: var(--clr-white);
      opacity: 0.9;
      font-size: var(--txt-lg);
      line-height: 1.7;
      max-width: 45rem;
      margin: 0 auto var(--sp-lg);
    }

    .final-note p:last-child {
      margin-bottom: 0;
    }

    .final-note a {
      color: var(--clr-white);
      font-weight: 600;
    }

    /* Progress Indicator */
    .progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      background: var(--clr-black);
      width: 0%;
      z-index: 10000;
      transition: width 0.1s ease;
    }

    /* GLightbox custom background */
    .glightbox-container {
      background: #fafafa !important;
    }

    .gslide-media {
      background: #fafafa !important;
    }

    @media (max-width: 991px) {
      .manual-hero h1 {
        font-size: var(--txt-3xl);
      }

      .section-header h2 {
        font-size: var(--txt-2xl);
      }

      .step-title {
        font-size: var(--txt-xl);
      }

      .step-images {
        grid-template-columns: 1fr;
        gap: var(--sp-xl);
      }

      .step {
        margin-bottom: var(--sp-6xl);
      }
    }

    @media (max-width: 767px) {
      .password-box {
        padding: var(--sp-4xl) var(--sp-3xl);
      }

      .password-box h1 {
        font-size: var(--txt-2xl);
      }

      .manual-hero {
        padding: var(--sp-5xl) 0;
      }

      .manual-hero h1 {
        font-size: var(--txt-2xl);
      }

      .parts-section {
        padding: var(--sp-6xl) 0;
      }

      .parts-section .section-header {
        margin-bottom: var(--sp-3xl);
      }

      .parts-wrapper {
        gap: var(--sp-2xl);
      }

      .parts-list {
        grid-template-columns: 1fr;
        gap: var(--sp-md);
        padding: var(--sp-4xl);
      }

      .parts-images {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-md);
        padding: var(--sp-4xl);
      }

      .part-item {
        padding: var(--sp-md) var(--sp-lg);
      }

      .part-checkbox {
        width: 1.5rem;
        height: 1.5rem;
      }

      .part-content {
        gap: var(--sp-sm);
      }

      .part-label {
        font-size: var(--txt-sm);
      }

      .steps-section {
        padding: var(--sp-5xl) 0;
      }

      .step-images {
        gap: var(--sp-lg);
      }

      .final-note {
        padding: var(--sp-5xl) var(--sp-2xl);
      }

      .final-note h3 {
        font-size: var(--txt-2xl);
      }
    }