/* ---- Page Layout ---- */
    .page-body {
      font-family: 'Inter', system-ui, sans-serif;
      overflow-x: hidden;
    }

    /* ---- Nav (matches index.html) ---- */
    .page-nav {
      position: fixed;
      top: 6.25rem;
      left: 0;
      right: 0;
      z-index: 100;
      background: var(--retire-bg);
      border-bottom: 0.0625rem solid var(--retire-border);
      box-shadow: var(--retire-shadow);
    }
    .nav-inner {
      max-width: 75rem;
      margin: 0 auto;
      padding: 0 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 4.25rem;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      text-decoration: none;
      color: var(--retire-text);
      font-weight: 800;
      font-size: 1.375rem;
    }
    .nav-logo-icon {
      width: 2.5rem;
      height: 2.5rem;
      background: var(--retire-primary);
      border-radius: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      font-size: 1.125rem;
    }
    .nav-links {
      display: none;
      align-items: center;
      gap: 0.25rem;
      list-style: none;
    }
    .nav-links a {
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 1rem;
      color: var(--retire-text-secondary);
      text-decoration: none;
      font-size: var(--font-body);
      font-weight: 500;
      border-radius: 0.375rem;
      transition: color var(--transition-fast), background var(--transition-fast);
      min-height: var(--touch-min);
    }
    .nav-links a:hover {
      color: var(--retire-primary);
      background: var(--retire-bg-alt);
    }
    .nav-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .mobile-menu-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--touch-min);
      height: var(--touch-min);
      border: none;
      background: transparent;
      color: var(--retire-text);
      font-size: 1.375rem;
      cursor: pointer;
      border-radius: 0.375rem;
    }
    .mobile-menu-btn:hover { background: var(--retire-surface); }

    /* Mobile nav panel */
    .mobile-nav {
      display: none;
      position: fixed;
      top: 6.25rem;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--retire-bg);
      z-index: 99;
      padding: 1.5rem;
      overflow-y: auto;
    }
    .mobile-nav.open { display: block; }
    .mobile-nav a {
      display: flex;
      align-items: center;
      padding: 0.875rem 1rem;
      color: var(--retire-text);
      text-decoration: none;
      font-size: var(--font-label);
      font-weight: 500;
      border-radius: 0.5rem;
      min-height: var(--touch-min);
    }
    .mobile-nav a:hover { background: var(--retire-surface); }

    /* Theme toggle */
    .theme-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--touch-min);
      height: var(--touch-min);
      border: 0.0625rem solid var(--retire-border);
      background: var(--retire-surface);
      color: var(--retire-text);
      border-radius: 0.5rem;
      cursor: pointer;
      font-size: 1.125rem;
      transition: all var(--transition-fast);
    }
    .theme-btn:hover { background: var(--retire-card-hover-bg); }

    /* ---- Content Area ---- */
    .content-area {
      max-width: 56rem;
      margin: 0 auto;
      padding: 6.5rem 1.5rem 4rem;
    }

    /* ---- Page Header ---- */
    .page-header {
      text-align: center;
      margin-bottom: 3rem;
    }
    .page-header h1 {
      font-size: var(--font-heading-xl);
      font-weight: 800;
      color: var(--retire-text);
      margin-bottom: 0.75rem;
      line-height: var(--line-height-heading);
    }
    .page-header p {
      font-size: var(--font-label);
      color: var(--retire-text-secondary);
      max-width: 36rem;
      margin: 0 auto;
      line-height: var(--line-height-body);
    }

    /* ---- Contact Layout ---- */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    /* ---- Info Cards ---- */
    .info-cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .info-card {
      background: var(--retire-surface-elevated);
      border: 0.0625rem solid var(--retire-border);
      border-radius: var(--card-radius);
      padding: 1.5rem;
      display: flex;
      align-items: flex-start;
      gap: 1rem;
    }
    .info-card-icon {
      width: 3rem;
      height: 3rem;
      border-radius: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      flex-shrink: 0;
    }
    .info-card h3 {
      font-size: var(--font-heading-sm);
      font-weight: 700;
      color: var(--retire-text);
      margin-bottom: 0.25rem;
    }
    .info-card p {
      font-size: var(--font-body);
      color: var(--retire-text-secondary);
      line-height: var(--line-height-body);
    }
    .info-card a {
      color: var(--retire-primary);
      text-decoration: underline;
      text-underline-offset: 0.125rem;
    }
    .info-card a:hover {
      color: var(--retire-primary-dark);
    }

    /* ---- Contact Form Card ---- */
    .form-card {
      background: var(--retire-surface-elevated);
      border: 0.0625rem solid var(--retire-border);
      border-radius: var(--card-radius);
      padding: 2rem;
    }
    .form-card h2 {
      font-size: var(--font-heading-md);
      font-weight: 700;
      color: var(--retire-text);
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: 0.625rem;
    }
    .form-card h2 i {
      color: var(--retire-primary);
    }

    /* ---- Form Fields ---- */
    .form-group {
      margin-bottom: 1.25rem;
    }
    .form-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
    }
    .field-error {
      font-size: 0.875rem;
      color: var(--retire-rose);
      margin-top: 0.25rem;
      display: none;
    }
    .field-error.visible {
      display: block;
    }

    /* Honeypot */
    .hp-field {
      display: none;
    }

    /* ---- Status Messages ---- */
    .form-status {
      display: none;
      padding: 1rem 1.25rem;
      border-radius: 0.5rem;
      font-size: var(--font-body);
      line-height: var(--line-height-body);
      margin-bottom: 1.25rem;
      align-items: flex-start;
      gap: 0.75rem;
    }
    .form-status.visible {
      display: flex;
    }
    .form-status.success {
      background: #D1FAE5;
      color: #065F46;
      border: 0.0625rem solid #A7F3D0;
    }
    .form-status.error {
      background: #FFE4E6;
      color: #9F1239;
      border: 0.0625rem solid #FECDD3;
    }
    [data-theme="dark"] .form-status.success {
      background: rgba(16, 185, 129, 0.15);
      color: #6EE7B7;
      border-color: rgba(16, 185, 129, 0.3);
    }
    [data-theme="dark"] .form-status.error {
      background: rgba(225, 29, 72, 0.15);
      color: #FDA4AF;
      border-color: rgba(225, 29, 72, 0.3);
    }
    .form-status i {
      margin-top: 0.125rem;
      flex-shrink: 0;
    }

    /* ---- Footer ---- */
    .page-footer {
      background: var(--retire-surface);
      border-top: 0.0625rem solid var(--retire-border);
      padding: 2rem 1.5rem;
      text-align: center;
      color: var(--retire-text-muted);
      font-size: 0.875rem;
    }

    /* Desktop breakpoint */
    @media (min-width: 48rem) {
      .nav-links { display: flex; }
      .mobile-menu-btn { display: none; }
      .contact-grid {
        grid-template-columns: 1fr 1.5fr;
      }
      .form-row {
        grid-template-columns: 1fr 1fr;
      }
    }