/* --- Redesign Colors & Variables --- */
      :root {
        --primary-yellow: #ecb51d;
        --primary-yellow-rgb: 236, 181, 29;
        --dark-blue: #345182;
        --dark-blue-rgb: 52, 81, 130;
        --bg-slate-50: #f8fafc;
        --bg-slate-100: #f1f5f9;
        --text-slate-600: #64748b;
        --text-slate-800: #1e293b;
        --border-slate-200: #e2e8f0;
      }

      /* --- Bilingual Typography System (HCI Alignment for zh/en) --- */
      html[lang="zh"] body {
        font-family: "Inter", "Microsoft JhengHei", "PMingLiU", sans-serif;
      }

      html[lang="zh"] h1,
      html[lang="zh"] h2,
      html[lang="zh"] h3,
      html[lang="zh"] h4 {
        line-height: 1.35;
        letter-spacing: 0px !important;
        /* Prevent compressed strokes in Chinese characters */
      }

      html[lang="zh"] p,
      html[lang="zh"] li,
      html[lang="zh"] span {
        line-height: 1.75;
        letter-spacing: 0.03em;
        /* Slightly wider spacing for comfortable reading */
      }

      /* =========================================================
         SERVICES HERO REDESIGN (Aesthetic-Usability Effect)
      ========================================================= */
      .service-hero {
        position: relative;
        overflow: hidden;
        padding: 100px 0 90px;
        background: radial-gradient(circle at 80% 20%, rgba(236, 181, 29, 0.08), transparent 45%),
          radial-gradient(circle at 10% 80%, rgba(52, 81, 130, 0.05), transparent 45%),
          #f8fafc;
      }

      .service-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(100, 116, 139, 0.06) 1px, transparent 1px);
        background-size: 24px 24px;
        pointer-events: none;
        opacity: 0.8;
      }

      .service-hero-content {
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
        position: relative;
        z-index: 2;
      }

      .service-eyebrow {
        color: var(--primary-yellow);
        font-size: 0.95rem;
        font-weight: 800;
        letter-spacing: 4px;
        margin-bottom: 20px;
        text-transform: uppercase;
      }

      .service-hero h1 {
        font-size: 4rem;
        line-height: 1.1;
        color: var(--dark-blue);
        margin-bottom: 25px;
        letter-spacing: -2px;
        font-weight: 900;
      }

      .service-hero-description {
        max-width: 720px;
        margin: 0 auto 40px;
        color: var(--text-slate-600);
        line-height: 1.8;
        font-size: 1.15rem;
      }

      .service-hero-buttons {
        display: flex;
        justify-content: center;
        margin-top: 10px;
      }

      #explore-services-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        background: transparent !important;
        border: none !important;
        color: var(--dark-blue) !important; /* Highly legible, high-contrast brand dark blue */
        font-weight: 600 !important;
        font-size: 0.95rem !important;
        letter-spacing: 0.5px !important;
        padding: 10px 0 !important;
        text-decoration: none !important;
        box-shadow: none !important;
        transition: color 0.3s ease !important;
      }

      #explore-services-btn span:first-child {
        border-bottom: 1px solid rgba(52, 81, 130, 0.35) !important; /* Premium brand blue underline matching text contrast */
        padding-bottom: 2px !important;
        transition: border-color 0.3s ease !important;
      }

      #explore-services-btn:hover {
        color: var(--primary-yellow) !important; /* Turns brand yellow to match the arrow on hover */
        background: transparent !important;
        transform: translateY(0) !important;
        box-shadow: none !important;
      }

      #explore-services-btn:hover span:first-child {
        border-color: var(--primary-yellow) !important; /* Underline matches brand yellow on hover */
      }

      #explore-services-btn .material-symbols-outlined {
        color: var(--primary-yellow) !important;
        font-size: 22px !important;
        animation: none !important; /* Override continuous bounce for a refined, low-key look */
        transition: transform 0.3s ease !important;
      }

      #explore-services-btn:hover .material-symbols-outlined {
        transform: translateY(3px) !important;
      }

      /* =========================================================
         INTERACTIVE SERVICES HUB (Hick's Law / Switcher Layout)
      ========================================================= */
      .services-hub-section {
        padding: 90px 0;
        background: #ffffff;
        position: relative;
      }

      .services-hub-container {
        display: grid;
        grid-template-columns: 1fr 1.3fr;
        gap: 50px;
        align-items: stretch;
        margin-top: 50px;
      }

      .services-selector-pane {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      /* Custom Mobile Dropdown Selector (visible under 991px) */
      .services-mobile-dropdown-container {
        display: none;
        position: relative;
        z-index: 100;
        width: 100%;
        margin-bottom: 5px;
      }

      .services-mobile-dropdown-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        background: #ffffff;
        border: 2px solid var(--dark-blue);
        border-radius: 12px;
        cursor: pointer;
        font-weight: 700;
        color: var(--text-slate-800);
        box-shadow: 0 4px 12px rgba(52, 81, 130, 0.06);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      }

      .services-mobile-dropdown-trigger:hover {
        border-color: var(--primary-yellow);
        background: var(--bg-slate-50);
        box-shadow: 0 6px 16px rgba(52, 81, 130, 0.1);
      }

      .services-mobile-dropdown-current {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .services-mobile-dropdown-current .trigger-icon {
        color: var(--dark-blue);
        font-size: 22px;
      }

      .services-mobile-dropdown-current .trigger-text {
        font-size: 1.05rem;
      }

      .services-mobile-dropdown-trigger .arrow-icon {
        color: var(--text-slate-600);
        transition: transform 0.3s ease;
        font-size: 22px;
      }

      .services-mobile-dropdown-container.open .services-mobile-dropdown-trigger .arrow-icon {
        transform: rotate(180deg);
        color: var(--dark-blue);
      }

      .services-mobile-dropdown-options {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        background: #ffffff;
        border: 1.5px solid var(--border-slate-200);
        border-radius: 18px;
        box-shadow: 0 15px 40px rgba(52, 81, 130, 0.12);
        display: none;
        flex-direction: column;
        overflow: hidden;
        z-index: 110;
        transform: translateY(-10px);
        opacity: 0;
        transition: transform 0.25s ease, opacity 0.25s ease;
      }

      .services-mobile-dropdown-container.open .services-mobile-dropdown-options {
        display: flex;
        transform: translateY(0);
        opacity: 1;
      }

      .mobile-dropdown-option {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 20px;
        cursor: pointer;
        font-weight: 600;
        color: var(--text-slate-800);
        font-size: 1rem;
        transition: all 0.2s ease;
        border-bottom: 1px solid rgba(226, 232, 240, 0.6);
      }

      .mobile-dropdown-option:last-child {
        border-bottom: none;
      }

      .mobile-dropdown-option .material-symbols-outlined {
        color: var(--text-slate-600);
        font-size: 20px;
        transition: color 0.2s ease;
      }

      .mobile-dropdown-option:hover {
        background: rgba(236, 181, 29, 0.05);
        color: var(--dark-blue);
      }

      .mobile-dropdown-option:hover .material-symbols-outlined {
        color: var(--dark-blue);
      }

      .mobile-dropdown-option.active {
        background: rgba(52, 81, 130, 0.04);
        color: var(--dark-blue);
        font-weight: 700;
      }

      .mobile-dropdown-option.active .material-symbols-outlined {
        color: var(--dark-blue);
      }

      .service-selector-btn {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        padding: 20px 24px;
        background: var(--bg-slate-50);
        border: 1px solid var(--border-slate-200);
        border-radius: 18px;
        cursor: pointer;
        text-align: left;
        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        position: relative;
        overflow: hidden;
        width: 100%;
      }

      .service-selector-btn::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 5px;
        background: var(--primary-yellow);
        transform: scaleY(0);
        transition: transform 0.3s ease;
      }

      .service-selector-btn:hover {
        transform: translateX(8px);
        background: #ffffff;
        border-color: rgba(52, 81, 130, 0.3);
        box-shadow: 0 10px 25px rgba(52, 81, 130, 0.05);
      }

      .service-selector-btn.active {
        background: #ffffff;
        border-color: var(--dark-blue);
        box-shadow: 0 12px 30px rgba(52, 81, 130, 0.08);
      }

      .service-selector-btn.active::before {
        transform: scaleY(1);
      }

      .service-selector-icon {
        width: 54px;
        height: 54px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: transform 0.3s ease;
      }

      .service-selector-icon .material-symbols-outlined {
        font-size: 26px;
      }

      .service-selector-btn:hover .service-selector-icon {
        transform: scale(1.08);
      }

      .service-selector-btn.active .service-selector-icon {
        transform: scale(1.08);
      }

      .service-selector-info {
        flex: 1;
        min-width: 0;
        /* Prevents overflow */
      }

      .service-selector-info h3 {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--dark-blue);
        margin-bottom: 4px;
        font-family: 'Montserrat', sans-serif;
      }

      .service-selector-info p {
        font-size: 0.88rem;
        color: var(--text-slate-600);
        line-height: 1.45;
        margin-top: 4px;
        white-space: normal;
        /* Allow wrapping cleanly in different languages */
      }

      /* Detail Display Dock */
      .services-detail-dock {
        background: linear-gradient(135deg, #ffffff 0%, rgba(248, 250, 252, 0.95) 100%);
        border: 1px solid rgba(226, 232, 240, 0.8);
        border-radius: 28px;
        padding: 50px;
        box-shadow: 0 30px 70px rgba(52, 81, 130, 0.07);
        position: sticky;
        top: 130px;
        min-height: 520px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
      }

      .services-detail-dock::after {
        content: "";
        position: absolute;
        bottom: -60px;
        right: -60px;
        width: 250px;
        height: 250px;
        background: radial-gradient(circle, rgba(236, 181, 29, 0.07) 0%, transparent 70%);
        pointer-events: none;
        z-index: 1;
      }

      .detail-content-wrapper {
        opacity: 0;
        transform: translateY(15px);
        transition: opacity 0.4s ease, transform 0.4s ease;
        display: none;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        flex: 1;
        position: relative;
        z-index: 2;
      }

      .detail-content-wrapper.active {
        display: flex;
        opacity: 1;
        transform: translateY(0);
      }

      .detail-header {
        display: flex;
        align-items: center;
        gap: 25px;
        margin-bottom: 25px;
      }

      .detail-large-icon {
        width: 82px;
        height: 82px;
        border-radius: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 12px 30px rgba(52, 81, 130, 0.08);
        background: #ffffff;
        border: 1px solid rgba(226, 232, 240, 0.8);
      }

      .detail-large-icon .material-symbols-outlined {
        font-size: 36px;
      }

      .detail-title h2 {
        font-size: 2.3rem;
        font-weight: 900;
        background: linear-gradient(135deg, var(--dark-blue) 0%, #1e293b 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        line-height: 1.15;
      }

      .detail-body p {
        font-size: 1.05rem;
        line-height: 1.75;
        color: var(--text-slate-800);
        margin-bottom: 30px;
      }

      .feature-pill-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-bottom: 30px;
      }

      .feature-pill-item {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 18px 24px;
        background: #ffffff;
        border: 1px solid rgba(148, 163, 184, 0.12);
        border-radius: 16px;
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--text-slate-800);
        line-height: 1.45;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
        transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
      }

      .feature-pill-item:hover {
        background: rgba(236, 181, 29, 0.04);
        border-color: rgba(236, 181, 29, 0.35);
        transform: translateY(-4px);
        box-shadow: 0 12px 25px rgba(236, 181, 29, 0.08);
      }

      .feature-check-icon {
        color: #10b981;
        background: rgba(16, 185, 129, 0.1);
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 900;
        flex-shrink: 0;
        margin-top: 1px;
      }

      .detail-cta-btn {
        align-self: flex-start;
        margin-top: 20px;
      }

      /* =========================================================
         PROCESS SECTION (Chronological Timeline Architecture)
      ========================================================= */
      .process-section {
        padding: 90px 0;
        background: var(--dark-blue);
        position: relative;
        overflow: hidden;
      }

      .process-section .services-main-title {
        color: white;
      }

      .process-section .services-subtitle {
        color: #cbd5e1;
      }

      .process-timeline {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 30px;
        margin-top: 70px;
        position: relative;
      }

      .process-timeline::before {
        content: "";
        position: absolute;
        top: 45px;
        left: 50px;
        right: 50px;
        height: 2px;
        background: linear-gradient(to right, rgba(236, 181, 29, 0.1), rgba(236, 181, 29, 0.8) 50%, rgba(236, 181, 29, 0.1));
        z-index: 1;
      }

      .process-step-node {
        position: relative;
        z-index: 2;
        text-align: center;
        transition: transform 0.3s ease;
      }

      .process-step-node:hover {
        transform: translateY(-5px);
      }

      .process-number-badge {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: #253a5f;
        border: 4px solid var(--dark-blue);
        box-shadow: 0 0 0 1px rgba(236, 181, 29, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-yellow);
        font-size: 1.6rem;
        font-weight: 900;
        margin: 0 auto 30px;
        position: relative;
        transition: all 0.4s ease;
      }

      .process-step-node:hover .process-number-badge {
        background: var(--primary-yellow);
        color: var(--dark-blue);
        box-shadow: 0 0 25px rgba(236, 181, 29, 0.4);
      }

      .process-step-node h3 {
        color: #ffffff;
        font-size: 1.25rem;
        margin-bottom: 12px;
        font-weight: 800;
        font-family: 'Montserrat', sans-serif;
      }

      .process-step-node p {
        color: #cbd5e1;
        font-size: 0.92rem;
        line-height: 1.7;
        padding: 0 10px;
      }

      /* =========================================================
         INTERACTIVE PROJECT PLANNER (Gulf of Execution Reducer)
      ========================================================= */
      .planner-section {
        padding: 90px 0;
        background: var(--bg-slate-50);
        border-top: 1px solid var(--border-slate-200);
      }

      .planner-container {
        max-width: 1150px;
        margin: 50px auto 0;
        background: #ffffff;
        border: 1px solid var(--border-slate-200);
        border-radius: 28px;
        padding: 60px;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.03);
      }

      .planner-step-group {
        margin-bottom: 45px;
      }

      .planner-step-group h3 {
        font-size: 1.45rem;
        font-weight: 800;
        color: var(--dark-blue);
        margin-bottom: 28px;
        font-family: 'Montserrat', sans-serif;
      }

      .planner-pills-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }

      .planner-pill-card {
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 22px 28px;
        background: #ffffff;
        border: 1.5px solid var(--border-slate-200);
        border-radius: 18px;
        cursor: pointer;
        font-size: 1.12rem;
        font-weight: 700;
        color: var(--text-slate-800);
        transition: all 0.3s ease;
        user-select: none;
      }

      .planner-pill-card:hover {
        border-color: rgba(52, 81, 130, 0.5);
        background: var(--bg-slate-50);
      }

      .planner-pill-card.selected {
        background: rgba(52, 81, 130, 0.05);
        border-color: var(--dark-blue);
        color: var(--dark-blue);
      }

      .planner-pill-card .planner-check-box {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        border: 2px solid var(--border-slate-200);
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        transition: all 0.2s ease;
        flex-shrink: 0;
      }

      .planner-pill-card.selected .planner-check-box {
        background: var(--dark-blue);
        border-color: var(--dark-blue);
        color: #ffffff;
      }

      .planner-pill-card .planner-check-box .material-symbols-outlined {
        font-size: 16px;
        display: none;
        font-weight: bold;
      }

      .planner-pill-card.selected .planner-check-box .material-symbols-outlined {
        display: block;
      }

      /* Project Scale Options */
      .planner-scales-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }

      .planner-scale-card {
        border: 1.5px solid var(--border-slate-200);
        border-radius: 24px;
        padding: 32px;
        cursor: pointer;
        background: #ffffff;
        transition: all 0.3s ease;
        user-select: none;
      }

      .planner-scale-card:hover {
        border-color: rgba(52, 81, 130, 0.5);
        transform: translateY(-3px);
      }

      .planner-scale-card.selected {
        border-color: var(--primary-yellow);
        background: rgba(236, 181, 29, 0.03);
        box-shadow: 0 8px 25px rgba(236, 181, 29, 0.06);
      }

      .planner-scale-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
      }

      .planner-scale-header h4 {
        font-size: 1.35rem;
        font-weight: 800;
        color: var(--dark-blue);
        font-family: 'Montserrat', sans-serif;
      }

      .planner-radio-circle {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 2px solid var(--border-slate-200);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        flex-shrink: 0;
      }

      .planner-scale-card.selected .planner-radio-circle {
        border-color: var(--primary-yellow);
      }

      .planner-scale-card.selected .planner-radio-circle::after {
        content: "";
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--primary-yellow);
      }

      .planner-scale-card p {
        font-size: 1.02rem;
        line-height: 1.65;
        color: var(--text-slate-600);
      }

      /* Planner Summary Panel */
      .planner-summary-panel {
        margin-top: 40px;
        background: var(--bg-slate-50);
        border: 1px solid var(--border-slate-200);
        border-radius: 20px;
        padding: 35px;
      }

      .planner-summary-header {
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--dark-blue);
        margin-bottom: 20px;
        border-bottom: 1px solid var(--border-slate-200);
        padding-bottom: 15px;
        font-family: 'Montserrat', sans-serif;
      }

      .planner-output-empty {
        color: var(--text-slate-600);
        text-align: center;
        padding: 20px 0;
        font-style: italic;
      }

      .planner-output-content {
        display: none;
      }

      .planner-output-content.active {
        display: block;
      }

      .planner-output-row {
        display: flex;
        align-items: baseline;
        gap: 15px;
        margin-bottom: 25px;
      }

      .planner-output-label {
        font-weight: 800;
        color: var(--dark-blue);
        min-width: 180px;
      }

      .planner-output-value {
        font-size: 1.25rem;
        font-weight: 900;
        color: var(--primary-yellow);
      }


      .planner-action-box {
        margin-top: 35px;
        display: flex;
        justify-content: center;
      }

      /* =========================================================
         CTA SECTION & GLOBAL REDESIGN elements
      ========================================================= */
      .services-cta-section {
        padding: 90px 0;
        background: #f8fafc;
      }

      .services-cta-box {
        max-width: 850px;
        margin: 0 auto;
        text-align: center;
      }

      .services-cta-box h2 {
        font-size: 3.2rem;
        color: var(--dark-blue);
        margin-bottom: 20px;
        line-height: 1.2;
        font-weight: 900;
      }

      .services-cta-box p {
        color: #64748b;
        line-height: 1.8;
        margin-bottom: 35px;
        font-size: 1.05rem;
      }

      /* --- Circular Icon Wrapper Styles --- */
      .service-icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        flex-shrink: 0;
      }

      .service-icon-wrapper .material-symbols-outlined {
        font-size: 28px;
      }

      /* Icon Color Combinations */
      .icon-blue {
        background-color: #edf2f7;
        color: #2b6cb0;
      }

      .icon-green {
        background-color: #e6fffa;
        color: #234e52;
      }

      .icon-purple {
        background-color: #faf5ff;
        color: #553c9a;
      }

      .icon-orange {
        background-color: #fffaf0;
        color: #dd6b20;
      }

      .icon-yellow {
        background-color: #fefcbf;
        color: #744210;
      }

      .icon-teal {
        background-color: #e6fffa;
        color: #008080;
      }

      /* =========================================================
         RESPONSIVE STYLING (Jakob's Law Adaptation)
      ========================================================= */
      @media (max-width: 1100px) {
        .process-timeline {
          grid-template-columns: repeat(3, 1fr);
        }

        .process-timeline::before {
          display: none;
        }
      }

      @media (max-width: 991px) {
        .services-hub-section {
          padding: 45px 0;
        }

        .services-hub-container {
          grid-template-columns: 1fr;
          gap: 12px;
          margin-top: 25px;
        }

        .services-selector-pane {
          display: none !important;
        }

        .services-mobile-dropdown-container {
          display: block;
          margin-bottom: 0;
        }

        .services-detail-dock {
          position: relative;
          top: auto;
          min-height: auto;
          padding: 28px 20px;
          border-radius: 20px;
          box-shadow: 0 15px 40px rgba(52, 81, 130, 0.04);
        }

        .detail-header {
          gap: 14px;
          margin-bottom: 16px;
        }

        .detail-large-icon {
          width: 52px;
          height: 52px;
          border-radius: 12px;
        }

        .detail-large-icon .material-symbols-outlined {
          font-size: 24px;
        }

        .detail-title h2 {
          font-size: 1.45rem;
        }

        .detail-body p {
          font-size: 0.95rem;
          line-height: 1.6;
          margin-bottom: 20px;
        }

        .feature-pill-grid {
          grid-template-columns: 1fr;
          gap: 10px;
          margin-bottom: 20px;
        }

        .feature-pill-item {
          padding: 12px 16px;
          font-size: 0.9rem;
          border-radius: 12px;
        }

        .planner-pills-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .planner-scales-grid {
          grid-template-columns: 1fr;
          gap: 16px;
        }

        .process-timeline {
          grid-template-columns: repeat(2, 1fr);
        }

        .detail-cta-btn {
          align-self: center;
        }
      }

      @media (max-width: 768px) {
        .service-hero {
          padding: 50px 0;
        }

        .service-hero h1 {
          font-size: 2.8rem;
        }

        .process-timeline {
          grid-template-columns: 1fr;
          gap: 40px;
        }

        .planner-container {
          padding: 20px 15px;
          border-radius: 16px;
        }

        .planner-step-group {
          margin-bottom: 20px;
        }

        .planner-step-group h3 {
          font-size: 1.1rem;
          margin-bottom: 12px;
        }

        .planner-pills-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 8px;
        }

        .planner-pill-card {
          padding: 10px;
          gap: 8px;
          font-size: 0.85rem;
          border-radius: 12px;
        }

        .planner-pill-card .planner-check-box {
          width: 18px;
          height: 18px;
        }

        .planner-scales-grid {
          grid-template-columns: 1fr;
          gap: 8px;
        }

        .planner-scale-card {
          padding: 12px;
          border-radius: 14px;
        }

        .planner-scale-header {
          margin-bottom: 4px;
        }

        .planner-scale-header h4 {
          font-size: 1rem;
        }

        .planner-scale-card p {
          font-size: 0.8rem;
          line-height: 1.4;
          margin: 0;
        }

        .planner-summary-panel {
          margin-top: 20px;
          padding: 15px;
          border-radius: 12px;
        }

        .planner-summary-header {
          font-size: 1.1rem;
          margin-bottom: 12px;
          padding-bottom: 10px;
        }

        .planner-output-row {
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;
          gap: 10px;
        }

        .planner-output-label {
          min-width: auto;
          font-size: 0.9rem;
        }

        .planner-output-value {
          font-size: 1rem;
        }

        .planner-checklist-grid {
          grid-template-columns: 1fr;
          gap: 8px;
        }

        .planner-action-box {
          margin-top: 20px;
        }

        .planner-action-box a {
          width: 100%;
          text-align: center;
          padding: 12px;
          font-size: 0.9rem;
        }

        .services-cta-box h2 {
          font-size: 2.2rem;
        }

        .detail-cta-btn {
          align-self: center;
          margin-top: 20px;
        }
      }

      /* Accessibility focus styles */
      .service-selector-btn:focus-visible,
      .services-mobile-dropdown-trigger:focus-visible,
      .mobile-dropdown-option:focus-visible,
      .planner-pill-card:focus-visible,
      .planner-scale-card:focus-visible {
        outline: 3px solid var(--primary-yellow);
        outline-offset: 2px;
      }

      /* =========================================================
         PLANNER INLINE FORM STYLES
      ========================================================= */
      .planner-form-container {
        padding: 20px;
      }

      .planner-form-container .planner-summary-panel {
        margin-top: 15px;
        margin-bottom: 35px;
      }

      .planner-form-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid var(--border-slate-200);
      }

      .planner-back-btn {
        background: #ffffff;
        border: 1px solid var(--border-slate-200);
        border-radius: 30px;
        color: var(--dark-blue);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        margin-right: 15px;
        transition: all 0.2s ease;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
        flex-shrink: 0;
      }

      .planner-back-btn:hover {
        background: var(--bg-slate-50);
        border-color: var(--dark-blue);
        transform: translateX(-3px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
      }

      .planner-back-btn .material-symbols-outlined {
        font-size: 20px;
        font-weight: 600;
      }

      .planner-form-header h3 {
        font-size: 1.5rem;
        color: var(--dark-blue);
        font-weight: 800;
        font-family: 'Montserrat', sans-serif;
        margin: 0;
      }

      .planner-form {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .planner-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }

      .planner-form-group {
        display: flex;
        flex-direction: column;
      }

      .planner-form-group label {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text-slate-800);
        margin-bottom: 10px;
      }

      .planner-form-group input {
        width: 100%;
        padding: 16px 18px;
        border-radius: 12px;
        border: 1px solid #dbe2ea;
        font-size: 1rem;
        font-family: "Inter", sans-serif;
        background: #fff;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
      }

      .planner-form-group input:focus {
        outline: none;
        border-color: var(--dark-blue);
        box-shadow: 0 0 0 4px rgba(52, 81, 130, 0.08);
      }

      .planner-success-view {
        text-align: center;
        padding: 40px 20px;
      }

      .planner-success-icon {
        font-size: 72px;
        color: #0046ad;
        margin-bottom: 20px;
      }

      .planner-success-view h3 {
        font-size: 1.8rem;
        font-weight: 800;
        color: var(--text-slate-800);
        margin-bottom: 14px;
        font-family: 'Montserrat', sans-serif;
      }

      .planner-success-view p {
        color: var(--text-slate-600);
        line-height: 1.8;
        font-size: 1rem;
      }

      @media (max-width: 768px) {
        .planner-form-row {
          grid-template-columns: 1fr;
        }

        .planner-form-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 15px;
        }
      }

      @keyframes spin {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }

      @keyframes bounce-subtle {

        0%,
        100% {
          transform: translateY(0);
        }

        50% {
          transform: translateY(4px);
        }
      }



      @media (max-width: 1280px) {
        .services-hero-title {
          font-size: 3rem;
          line-height: 1.15;
        }

        .services-hero-description {
          font-size: 1.05rem;
        }
      }

      @media (max-width: 768px) {
        .services-hero {
          padding: 80px 0 70px;
        }

        .services-hero-title {
          font-size: 2.25rem;
          line-height: 1.3;
        }

        .services-hero-description {
          font-size: 0.95rem;
          line-height: 1.7;
          max-width: 90%;
        }

        .hero-btn {
          padding: 12px 28px;
          font-size: 0.9rem;
        }
      }