@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
   --navy: #001337;
   --blue: #ff6500;
   --orange: #ff6500;
   --muted: #64748f;
   --pale: #f5f9fd;
   --line: #e4edf7
}

* {
   box-sizing: border-box
}

body {
   font-family: Inter, Arial, sans-serif;
   color: var(--navy);
   background: #fff
}

a {
   text-decoration: none
}

p {
   color: var(--muted);
   line-height: 1.65
}

h1,
h2,
h3,
h4,
h5 {
   font-weight: 750;
   letter-spacing: -.035em
}

.text-blue {
   color: var(--orange)
}

.text-navy {
   color: var(--navy)
}

.soft-card.question-panel .text-muted-custom {
   color: #212529 !important;
}

.text-muted-custom {
   color: var(--muted)
}

.eyebrow {
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--blue);
   font-size: .77rem;
   font-weight: 800
}

.page-shell {
   background: linear-gradient(180deg, #fff 0%, #f5faff 100%);
   min-height: 100vh;
}

.soft-card {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 17px
}

.btn-orange {
   background: var(--orange);
   border-color: var(--orange);
   color: #fff
}

.btn-orange:hover,
.btn-orange:focus {
   background: #e9540d;
   border-color: #e9540d;
   color: #fff
}

.btn-outline-blue {
   border: 1px solid #001337;
   color: #001337;
   background: #fff
}

.btn-outline-blue:hover {
   color: #fff;
   background: #001337;
   border: 1px solid #001337;
}

.btn {
   font-weight: 600;
   border-radius: 9px;
   padding: .72rem 1.3rem
}

.site-nav {
   background: #fff;
   border-bottom: 1px solid #e8edf4;
   min-height: 77px
}

.site-nav .nav-link {
   color: var(--navy);
   font-size: .91rem;
   font-weight: 500;
   margin: 0 .6rem
}

.site-nav .nav-link:hover {
   color: var(--blue)
}

.logo {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   font-weight: 800;
   font-size: 1.68rem;
   line-height: 1;
   letter-spacing: .055em;
   color: var(--navy)
}

.logo span span {
   color: var(--orange)
}

.logo small {
   font-size: .53rem;
   letter-spacing: .42em;
   margin-top: 4px;
   padding-left: 5px
}

.icon-tile {
   width: 54px;
   height: 54px;
   flex: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 15px;
   font-size: 1.5rem;
   background: #fff2e9;
   color: #ff6500
}

.icon-tile.orange {
   background: #fff0e6;
   color: #f66b14
}

.icon-tile.green {
   background: #e7f7eb;
   color: #0c9c4b
}

.icon-tile.purple {
   background: #f1ecff;
   color: #6942e9
}

.icon-tile.red {
   background: #fff0f1;
   color: #e91d44
}

.brand-footer {
   padding: 23px 0;
   text-align: center;
   color: #8a9ab2;
   font-size: .8rem
}

/* =========================================================
   Custom Responsive Container (user supplied)
   ========================================================= */
.container-custom {
   width: 92% !important;
   max-width: 1700px !important;
   margin-left: auto !important;
   margin-right: auto !important;
   padding-left: 0 !important;
   padding-right: 0 !important
}

@media (min-width:576px) and (max-width:991.98px) {
   .container-custom {
      width: 94% !important;
      max-width: none !important
   }
}

@media (min-width:992px) and (max-width:1399.98px) {
   .container-custom {
      width: 95% !important;
      max-width: none !important
   }
}

@media (min-width:1400px) and (max-width:1599.98px) {
   .container-custom {
      width: 92% !important;
      max-width: none !important
   }
}

@media (min-width:1600px) and (max-width:1799.98px) {
   .container-custom {
      width: 94% !important;
      max-width: none !important
   }
}

@media (min-width:1800px) {
   .container-custom {
      width: 94% !important;
      max-width: 1700px !important
   }
}

@media(max-width:575.98px) {
   .container-custom {
      width: 92% !important
   }

   .btn {
      padding: .68rem 1rem
   }

   .site-nav {
      min-height: 65px
   }

   .logo {
      font-size: 1.35rem
   }
}



/* =========================================
   Premium Minimal Timeline Stepper
========================================= */

.premium-stepper {
   padding: 22px 28px;
   margin: 22px 0 30px;
   background: #fff;
   border: 1px solid #e8edf5;
   border-radius: 16px;
}

.premium-stepper-eyebrow {
   display: block;
   color: var(--blue);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.5px;
   margin-bottom: 4px;
}

.premium-stepper-title {
   font-size: 19px;
   font-weight: 700;
   color: #001337;
}

.premium-stepper-count {
   font-size: 12px;
   font-weight: 600;
   color: #001337;
   background: #f1f5fa;
   padding: 7px 13px;
   border-radius: 30px;
   white-space: nowrap;
}

/* =========================================
   Stepper Layout
========================================= */

.premium-stepper-track {
   display: flex;
   padding: 0;
   margin: 0;
   list-style: none;
}

.premium-step {
   position: relative;
   flex: 1;
   min-width: 0;
   text-align: center;
}

/* =========================================
   Dashed Connector Lines
========================================= */

.premium-step:not(:last-child)::after {
   content: "";
   position: absolute;
   top: 19px;
   left: calc(50% + 25px);
   right: calc(-50% + 25px);
   height: 2px;

   background: repeating-linear-gradient(90deg,
         #d5dfea 0,
         #d5dfea 7px,
         transparent 7px,
         transparent 13px);
}

/* Completed dashed connectors */
.premium-step.is-complete:not(:last-child)::after {
   background: repeating-linear-gradient(90deg,
         #ff6500 0,
         #ff6500 7px,
         transparent 7px,
         transparent 13px);
   background-size: 26px 2px;
   animation: premiumDashMove 2.5s linear infinite;
}

@keyframes premiumDashMove {
   from {
      background-position: 0 0;
   }

   to {
      background-position: 26px 0;
   }
}

/* =========================================
   Step Circles
========================================= */

.premium-step-node {
   position: relative;
   z-index: 1;

   display: inline-flex;
   align-items: center;
   justify-content: center;

   width: 38px;
   height: 38px;

   border: 2px solid #dce5f3;
   border-radius: 50%;

   background: #fff;
   color: #8794aa;

   font-size: 14px;
   font-weight: 600;

   transition:
      background-color 0.3s ease,
      border-color 0.3s ease,
      color 0.3s ease,
      box-shadow 0.3s ease;

   animation: premiumStepAppear 0.45s ease-out both;
}

/* Completed Step */

/* Completed step circles */
.premium-step.is-complete .premium-step-node {
   background: #ff6500;
   border-color: #ff6500;
   color: #ffffff;
   box-shadow: 0 3px 12px rgba(255, 101, 0, 0.18);
}

.premium-step.is-complete .premium-step-node i {
   color: #fff;
   font-size: 17px;
   font-weight: 700;
}

/* Current Step */

.premium-step.is-current .premium-step-node {
   background: #001337;
   border-color: #001337;
   color: #fff;
   box-shadow: 0 0 0 5px rgba(0, 19, 55, 0.09);
}

/* =========================================
   Step Labels
========================================= */

.premium-step-name {
   display: block;
   margin-top: 12px;

   font-size: 13px;
   font-weight: 500;
   color: #8290a8;

   line-height: 1.4;
}

.premium-step.is-complete .premium-step-name {
   color: #52618e;
}

.premium-step.is-current .premium-step-name {
   color: #001337;
   font-weight: 700;
}

/* =========================================
   Entry Animation
========================================= */

@keyframes premiumStepAppear {
   from {
      opacity: 0;
      transform: scale(0.85);
   }

   to {
      opacity: 1;
      transform: scale(1);
   }
}

.premium-step:nth-child(2) .premium-step-node {
   animation-delay: 0.08s;
}

.premium-step:nth-child(3) .premium-step-node {
   animation-delay: 0.16s;
}

.premium-step:nth-child(4) .premium-step-node {
   animation-delay: 0.24s;
}

.premium-step:nth-child(5) .premium-step-node {
   animation-delay: 0.32s;
}

/* =========================================
   Tablet Responsiveness
========================================= */

@media (min-width: 576px) and (max-width: 991.98px) {
   .premium-stepper {
      padding: 20px;
   }

   .premium-step-name {
      font-size: 11px;
   }
}

/* =========================================
   Mobile Responsiveness
========================================= */

@media (max-width: 575.98px) {
   .premium-stepper {
      padding: 18px 12px;
      margin: 15px 0 24px;
      border-radius: 12px;
   }

   .premium-stepper-title {
      font-size: 16px;
   }

   .premium-stepper-eyebrow {
      font-size: 10px;
      letter-spacing: 1px;
   }

   .premium-stepper-count {
      font-size: 10px;
      padding: 6px 9px;
   }

   .premium-step-node {
      width: 30px;
      height: 30px;
      font-size: 12px;
   }

   .premium-step.is-complete .premium-step-node i {
      font-size: 14px;
   }

   .premium-step:not(:last-child)::after {
      top: 14px;
      left: calc(50% + 18px);
      right: calc(-50% + 18px);
   }

   .premium-step-name {
      font-size: 10px;
      line-height: 1.3;
      margin-top: 9px;
      overflow-wrap: anywhere;
   }
}

/* =========================================
   Accessibility
========================================= */

@media (prefers-reduced-motion: reduce) {

   .premium-step-node,
   .premium-step.is-complete:not(:last-child)::after {
      animation: none;
      transition: none;
   }
}

/* =========================================
   Sticky Assessment Stepper
========================================= */

.assessment-stepper-sticky {
   position: sticky;
   top: 0;
   z-index: 1020;
   background: #fff;
   padding: 8px 0;
   border-bottom: 1px solid #e8edf5;
}

.assessment-stepper-sticky .premium-stepper {
   margin: 0;
}

/* Mobile */
@media (max-width: 767.98px) {
   .assessment-stepper-sticky {
      padding: 5px 0;
   }
}

/* Deployment refinements: narrow screens and keyboard users */
html {
   scroll-behavior: smooth;
}

body {
   overflow-x: clip;
}

img {
   max-width: 100%;
}

:focus-visible {
   outline: 3px solid rgba(255, 101, 0, .65);
   outline-offset: 3px;
}

@media (max-width: 575.98px) {
   .premium-stepper {
      padding: 14px 10px;
      margin: 0;
   }

   .premium-stepper-track {
      width: 100%;
   }

   .premium-stepper-name {
      overflow-wrap: anywhere;
   }

   .premium-step-name {
      font-size: clamp(8px, 2.45vw, 10px);
   }

   .premium-stepper-title {
      font-size: 15px;
   }

   .premium-stepper-count {
      font-size: 10px;
   }

   .assessment-stepper-sticky {
      padding: 4px 0;
   }

   .container-custom {
      width: 92% !important;
   }

   .btn {
      white-space: normal;
   }
}

@media (max-width: 375px) {
   .premium-step-name {
      font-size: 8px;
   }

   .premium-step-node {
      width: 27px;
      height: 27px;
   }

   .premium-step:not(:last-child)::after {
      top: 13px;
      left: calc(50% + 17px);
      right: calc(-50% + 17px);
   }
}


/* =========================================================
   HAPUS LEAD MAGNET - TYPOGRAPHY AND TEXT COLOURS ONLY
   Source: supplied Hapus Bootstrap 5 typography prompt.
   Loaded LAST in flow_design; no layout/behaviour changes.
   Main colours: #071333 / #26345d / #34405c; blue #0d6efd.
   Keep existing Lead Magnet orange #ff6500 for established accents.
========================================================= */

:is(.hapus-assessment-landing, .hapus-assessment-wizard) {
   --lm-type-ink: #071333;
   --lm-type-secondary: #26345d;
   --lm-type-muted: #34405c;
   --lm-type-blue: #0d6efd;
   --lm-type-orange: #ff6500;
   font-family: "Inter", Arial, Helvetica, sans-serif;
   color: var(--lm-type-ink);
}

/* Stepper: UI heading and labels. Preserve progress sizing/layout. */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) .premium-stepper-title {
   color: #071333 !important;
   font-size: 26px !important;
}

:is(.hapus-assessment-landing, .hapus-assessment-wizard) .premium-stepper-eyebrow {
   color: #ff6500 !important;
   font-size: 16px !important;
}

:is(.hapus-assessment-landing, .hapus-assessment-wizard) .premium-stepper-count,
:is(.hapus-assessment-landing, .hapus-assessment-wizard) .premium-step-name {
   font-size: 14px !important;
}

/* Shared normal-inner page titles: 44 / 32 / 22 */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.lead-heading, .results-hero h2, .report-top h2, .hapus-complete-heading) {
   font-size: 44px !important;
   color: #071333 !important;
}

:is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.lead-heading, .results-hero h2, .report-top h2, .hapus-complete-heading) .text-blue {
   color: #ff6500 !important;
}

/* Normal-inner kickers: 16 / 14 / 12 */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.results-hero .eyebrow, .report-top .eyebrow, .priority-card .eyebrow) {
   font-size: 16px !important;
   color: #ff6500 !important;
}

/* Intro copy: 18 / 15 / 16 */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.lead-intro, .results-hero > .row p.fs-5, .report-top p.fs-5, .hapus-complete-screen > p.fs-5) {
   font-size: 18px !important;
   color: #26345d !important;
}

/* Normal inner card headings: 22 / 17 (dense) / 18 */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.tip-panel h2, .lead-card h2, .lead-side h2, .lead-side h3, .score-card h3, .results-bottom h3, .priority-card h3, .report-features-card h3, .report-download-intro h3, .report-side-card h3, .thanks-card h3) {
   font-size: 22px !important;
   color: #071333 !important;
}

/* Normal card paragraphs: 16 / 14 / 14 */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel, .tip-panel, .lead-card, .lead-side, .score-card, .results-bottom .soft-card, .priority-card, .report-feature, .report-download-intro, .thanks-card) p:not(.form-item--error-message) {
   font-size: 16px !important;
   color: #34405c !important;
}

/* Form prompts, options, labels: 16 / 14 / 14. No changes to input sizing. */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel label.option, .lead-card label:not(.form-check-label)) {
   font-size: 16px !important;
   color: #071333 !important;
}

/* Small reports/list labels: 15 / 14 / 14 */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.report-feature strong, .hapus-score-label, .report-answers summary, .results-breakdown-scroll .hapus-score-label) {
   font-size: 15px !important;
   color: #071333 !important;
}

/* Buttons: 16 / 14 / 14. Preserve all button colours and states. */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel, .lead-card, .hapus-results-screen, .hapus-report-screen, .hapus-complete-screen) :is(.btn, .button, input[type="submit"]) {
   font-size: 16px !important;
}

/* Dense supplementary content remains legible. */
:is(.hapus-assessment-landing, .hapus-assessment-wizard) .hapus-report-screen :is(.accordion-body .table, .report-answers .table) {
   font-size: 15px !important;
   color: #26345d !important;
}

@media (max-width: 1399.98px) {
   :is(.hapus-assessment-landing, .hapus-assessment-wizard) .premium-stepper-eyebrow {
      font-size: 14px !important;
   }

   :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.lead-heading, .results-hero h2, .report-top h2, .hapus-complete-heading) {
      font-size: 32px !important;
   }

   :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.results-hero .eyebrow, .report-top .eyebrow, .priority-card .eyebrow) {
      font-size: 14px !important;
   }

   :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.lead-intro, .results-hero > .row p.fs-5, .report-top p.fs-5, .hapus-complete-screen > p.fs-5) {
      font-size: 15px !important;
   }

   :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel h2, .tip-panel h2, .lead-card h2, .lead-side h2, .lead-side h3, .score-card h3, .results-bottom h3, .priority-card h3, .report-features-card h3, .report-download-intro h3, .report-side-card h3, .thanks-card h3) {
      font-size: 17px !important;
   }

   :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel, .tip-panel, .lead-card, .lead-side, .score-card, .results-bottom .soft-card, .priority-card, .report-feature, .report-download-intro, .thanks-card) p:not(.form-item--error-message) {
      font-size: 14px !important;
   }

   :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel label.option, .lead-card label:not(.form-check-label), .report-feature strong, .hapus-score-label, .report-answers summary) {
      font-size: 14px !important;
   }

   :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel, .lead-card, .hapus-results-screen, .hapus-report-screen, .hapus-complete-screen) :is(.btn, .button, input[type="submit"]) {
      font-size: 14px !important;
   }

   :is(.hapus-assessment-landing, .hapus-assessment-wizard) .hapus-report-screen :is(.accordion-body .table, .report-answers .table) {
      font-size: 14px !important;
   }
}

@media (max-width: 767.98px) {
   :is(.hapus-assessment-landing, .hapus-assessment-wizard) .premium-stepper-eyebrow {
      font-size: 12px !important;
   }

   :is(.hapus-assessment-landing, .hapus-assessment-wizard) .premium-stepper-title {
      font-size: 18px !important;
   }

   :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.lead-heading, .results-hero h2, .report-top h2, .hapus-complete-heading) {
      font-size: 22px !important;
   }

   :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.results-hero .eyebrow, .report-top .eyebrow, .priority-card .eyebrow) {
      font-size: 12px !important;
   }

   :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.lead-intro, .results-hero > .row p.fs-5, .report-top p.fs-5, .hapus-complete-screen > p.fs-5) {
      font-size: 16px !important;
   }

   :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel h2, .tip-panel h2, .lead-card h2, .lead-side h2, .lead-side h3, .score-card h3, .results-bottom h3, .priority-card h3, .report-features-card h3, .report-download-intro h3, .report-side-card h3, .thanks-card h3) {
      font-size: 18px !important;
   }

   :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel, .tip-panel, .lead-card, .lead-side, .score-card, .results-bottom .soft-card, .priority-card, .report-feature, .report-download-intro, .thanks-card) p:not(.form-item--error-message) {
      font-size: 14px !important;
   }

   :is(.hapus-assessment-landing, .hapus-assessment-wizard) :is(.question-panel label.option, .lead-card label:not(.form-check-label), .report-feature strong, .hapus-score-label, .report-answers summary) {
      font-size: 14px !important;
   }

   :is(.hapus-assessment-landing, .hapus-assessment-wizard) .premium-step-name {
      font-size: 10px !important;
   }
}

.health-hero {
   padding: 40px 0 36px;
}

.health-hero h2 {
   font-size: clamp(2.45rem, 4.8vw, 5rem);
   line-height: 1.05;
}

.hero-art {
   width: 100%;
   height: auto;
   mix-blend-mode: multiply;
}

.health-benefits {
   display: flex;
   flex-wrap: wrap;
   gap: 18px 28px;
}

.health-benefits i {
   color: var(--blue);
}

.health-panels {
   background: #f4f9fd;
   padding: 26px 0 45px;
}

.health-panels .soft-card {
   height: 100%;
   padding: 32px;
}

.steps {
   display: flex;
   gap: 15px;
   text-align: center;
}

.steps>div {
   flex: 1;
}

.step-icon {
   width: 76px;
   height: 76px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: #e6f3ff;
   color: var(--blue);
   font-size: 2rem;
   margin: 0 auto 12px;
}

.step-icon.purple {
   color: #6942e9;
   background: #f0eaff;
}

.step-icon.green {
   color: #078b44;
   background: #eaf8ee;
}

.consult-bar {
   padding: 22px 28px;
}

@media (max-width: 767.98px) {
   .health-hero {
      padding: 32px 0;
   }

   .health-panels .soft-card {
      padding: 24px;
   }

   .steps {
      flex-direction: column;
      text-align: left;
   }

   .steps>div {
      display: flex;
      align-items: center;
      gap: 14px;
   }

   .step-icon {
      width: 55px;
      height: 55px;
      font-size: 1.5rem;
      margin: 0;
   }

   .steps p {
      margin: 0;
   }
}

/* =========================================================
   HAPUS ASSESSMENT - STEP VISIBILITY
   Flow:
   1. Select Assessment
   2. Questions
   3. Client Details
   4. Results
   5. Report
   ========================================================= */

/* Hide client-details-only content by default. */
.hapus-assessment-landing .assessment-step-two {
   display: none;
}

/* Hide the landing-page introduction after Step 1. */
.hapus-assessment-landing:has(.premium-step:nth-child(n + 2).is-current) .assessment-step-one {
   display: none;
}

/* Show client details introduction only on Step 3. */
.hapus-assessment-landing:has(.premium-step:nth-child(3).is-current) .assessment-step-two {
   display: block;
}

/* Hide the consultation section on Steps 2 through 5. */
.hapus-assessment-landing:has(.premium-step:nth-child(n + 2).is-current) .assessment-final-cta {
   display: none;
}

/* Keep the wizard rendered for Drupal AJAX. */
.hapus-assessment-landing .assessment-wizard-section {
   position: relative;
   scroll-margin-top: 120px;
}

/*
 * Hide the redundant Step 1 wizard visually.
 * Do not use display:none because the form must remain
 * available for Drupal's existing AJAX Start action.
 */
.hapus-assessment-landing:not(.hapus-hero-starting):has(.premium-step:first-child.is-current) .assessment-wizard-section {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   overflow: hidden !important;
   clip-path: inset(50%) !important;
   white-space: nowrap !important;
   padding: 0 !important;
   margin: 0 !important;
}

/* Reveal the wizard when the hero Start button is clicked. */
.hapus-assessment-landing.hapus-hero-starting .assessment-wizard-section {
   position: relative !important;
   width: auto !important;
   height: auto !important;
   overflow: visible !important;
   clip-path: none !important;
   white-space: normal !important;
}

/* Keep the wizard visible from Question 1 onward. */
.hapus-assessment-landing:has(.premium-step:nth-child(n + 2).is-current) .assessment-wizard-section {
   position: relative !important;
   width: auto !important;
   height: auto !important;
   overflow: visible !important;
   clip-path: none !important;
   white-space: normal !important;
}

/* Preserve question legend layout. */
.hapus-quiz-answers legend {
   float: none !important;
}

.hapus-assessment-landing .lead-side {
   display: none;
}

/* Responsive wizard spacing. */
@media (max-width: 767px) {
   .hapus-assessment-landing .assessment-wizard-section {
      padding-top: 24px !important;
      padding-bottom: 24px !important;
   }


}