/* ── Reveal ── */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
                  transform 0.7s cubic-bezier(0.22,1,0.36,1);
    }
    .reveal.from-left  { transform: translateX(-28px); }
    .reveal.from-right { transform: translateX(28px); }
    .reveal.visible    { opacity: 1; transform: translate(0,0); }

    /* ══════════════════════════════
       01  GREETING HEADER
    ══════════════════════════════ */
    .greeting-word {
      display: inline-block;
      opacity: 0;
      transform: translateY(40px);
      animation: wordIn 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
    }
    @keyframes wordIn {
      to { opacity: 1; transform: translateY(0); }
    }

    /* ══════════════════════════════
       02  PATHWAY CARDS
    ══════════════════════════════ */
    .pathway-card {
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
      border: 2px solid transparent;
    }
    .pathway-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 48px rgba(28,58,42,0.12);
    }
    .pathway-card.selected {
      border-color: #C49A3C;
      box-shadow: 0 0 0 4px rgba(196,154,60,0.12);
    }
    .pathway-icon {
      transition: background 0.3s ease;
    }
    .pathway-card:hover .pathway-icon,
    .pathway-card.selected .pathway-icon {
      background: #C49A3C;
    }
    .pathway-card:hover .pathway-icon svg,
    .pathway-card.selected .pathway-icon svg {
      color: white;
    }

    /* ══════════════════════════════
       03  MULTI-STEP FORM
    ══════════════════════════════ */
    /* Step visibility */
    .form-step { display: none; }
    .form-step.active { display: block; }

    /* Step progress dots */
    .step-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: rgba(28,58,42,0.2);
      transition: background 0.3s ease, transform 0.3s ease;
    }
    .step-dot.active {
      background: #C49A3C;
      transform: scale(1.3);
    }
    .step-dot.done { background: #1C3A2A; }

    /* Step transition */
    @keyframes stepIn {
      from { opacity: 0; transform: translateX(24px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .form-step.active { animation: stepIn 0.38s cubic-bezier(0.22,1,0.36,1) both; }

    /* Form inputs */
    .f-input, .f-select, .f-textarea {
      width: 100%;
      background: rgba(255,255,255,0.7);
      border: 1.5px solid rgba(28,58,42,0.15);
      border-radius: 12px;
      padding: 12px 16px;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.875rem;
      color: #2C2C2C;
      transition: border-color 0.25s ease, background 0.25s ease;
      outline: none;
    }
    .f-input:focus, .f-select:focus, .f-textarea:focus {
      border-color: #C49A3C;
      background: white;
    }
    .f-input::placeholder, .f-textarea::placeholder { color: #7A7A6E; }

    /* Role radio buttons */
    .role-option {
      cursor: pointer;
      border: 1.5px solid rgba(28,58,42,0.15);
      border-radius: 14px;
      transition: border-color 0.25s ease, background 0.25s ease;
    }
    .role-option:hover { border-color: rgba(196,154,60,0.4); background: rgba(255,255,255,0.6); }
    .role-option.chosen {
      border-color: #C49A3C;
      background: white;
    }
    .role-option input { display: none; }

    /* Subject pills */
    .subject-pill {
      cursor: pointer;
      border: 1.5px solid rgba(28,58,42,0.15);
      border-radius: 50px;
      padding: 8px 16px;
      font-size: 0.75rem;
      font-family: 'DM Sans', sans-serif;
      transition: all 0.25s ease;
      background: rgba(255,255,255,0.6);
    }
    .subject-pill:hover { border-color: #C49A3C; }
    .subject-pill.selected {
      background: #1C3A2A;
      border-color: #1C3A2A;
      color: #F7F3ED;
    }
    .subject-pill input { display: none; }

    /* Progress bar */
    .form-progress-bar {
      height: 2px;
      background: rgba(28,58,42,0.1);
      border-radius: 1px;
      overflow: hidden;
    }
    .form-progress-fill {
      height: 100%;
      background: linear-gradient(to right, #C49A3C, #DDB96A);
      border-radius: 1px;
      transition: width 0.5s cubic-bezier(0.22,1,0.36,1);
    }

    /* ══════════════════════════════
       04  RESPONSE SLA STRIP
    ══════════════════════════════ */
    .sla-item {
      position: relative;
      transition: background 0.25s ease;
    }
    .sla-item:hover { background: rgba(196,154,60,0.06); }
    .sla-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* ══════════════════════════════
       05  OFFICE / MAP
    ══════════════════════════════ */
    .map-placeholder {
      background: linear-gradient(135deg, #1C3A2A 0%, #0E2019 100%);
      position: relative;
      overflow: hidden;
    }
    .map-grid-line {
      position: absolute;
      background: rgba(196,154,60,0.06);
    }

    /* ══════════════════════════════
       06  SOCIAL LINKS
    ══════════════════════════════ */
    .social-link {
      transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    }
    .social-link:hover {
      background: #C49A3C;
      color: white;
      transform: translateY(-3px);
    }

    /* ══════════════════════════════
       SUCCESS STATE
    ══════════════════════════════ */
    #form-success {
      display: none;
    }
    #form-success.visible { display: flex; }

    @keyframes checkIn {
      0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
      60%  { transform: scale(1.15) rotate(3deg); }
      100% { transform: scale(1) rotate(0); opacity: 1; }
    }
    .check-anim { animation: checkIn 0.6s cubic-bezier(0.22,1,0.36,1) both; }

    /* HR */
    .hr-sand { border: none; height: 1px; background: rgba(28,58,42,0.1); }
    .hr-gold  { border: none; height: 1px; background: linear-gradient(to right, #C49A3C, transparent); }