:root {

  --forest: #123f32;

  --forest-deep: #0b2d24;

  --orange: #f36b16;

  --orange-dark: #d9570b;

  --cream: #fffaf0;

  --cream-soft: #f7ead5;

  --white: #ffffff;

  --text: #20352e;

  --muted: #68766f;

  --border: rgba(18, 63, 50, 0.13);

  --shadow: 0 24px 60px rgba(30, 53, 45, 0.14);

}

* {

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

}

body {

  margin: 0;

  min-height: 100vh;

  font-family: Arial, Helvetica, sans-serif;

  color: var(--text);

  background:

    radial-gradient(

      circle at top left,

      rgba(255, 255, 255, 0.98),

      transparent 36%

    ),

    linear-gradient(

      180deg,

      #fffdf7 0%,

      #f4ead7 100%

    );

}

button {

  font: inherit;

}

.host-onboarding-page {

  min-height: auto;

}

/* WELCOME HERO */

.onboarding-hero {

  position: relative;

  min-height: 650px;

  overflow: hidden;

  background:

    radial-gradient(

      circle at top left,

      rgba(255, 255, 255, 1),

      rgba(255, 250, 240, 0.96) 54%,

      rgba(244, 234, 215, 0.82) 100%

    );

}

.onboarding-copy {

  position: relative;

  z-index: 2;

  width: min(1120px, calc(100% - 48px));

  margin: 0 auto;

  padding: 52px 0 135px;

}

.onboarding-logo {

  display: block;

  width: min(310px, 72vw);

  height: auto;

  margin-bottom: 54px;

}

.onboarding-greeting {

  margin: 0 0 10px;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(27px, 3vw, 39px);

  font-weight: 700;

  color: var(--forest);

}

.onboarding-copy h1 {

  max-width: 860px;

  margin: 0;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(56px, 7vw, 94px);

  line-height: 0.96;

  letter-spacing: -0.04em;

  color: var(--forest);

}

.onboarding-copy h1 span {

  display: block;

}

.orange-accent {

  width: 66px;

  height: 5px;

  margin: 30px 0;

  border-radius: 999px;

  background: var(--orange);

}

.onboarding-copy h2 {

  max-width: 650px;

  margin: 0 0 13px;

  font-size: clamp(23px, 2.5vw, 32px);

  line-height: 1.25;

  color: #17271f;

}

.onboarding-intro {

  max-width: 650px;

  margin: 0;

  font-size: clamp(18px, 1.8vw, 23px);

  line-height: 1.62;

}

.onboarding-intro strong {

  white-space: nowrap;

}

/* LIGHT BRAND WATERMARK */

.onboarding-photo {

  position: absolute;

  z-index: 1;

  top: 10px;

  right: -190px;

  bottom: 0;

  width: 118%;

  min-height: 0;

  background:

    url("image copy 4.png")

    center / contain

    no-repeat;

  opacity: 0.055;

  filter: grayscale(1);

  pointer-events: none;

}

/* JOURNEY PANEL */

.journey-panel {

  position: relative;

  z-index: 4;

  width: min(1120px, calc(100% - 32px));

  margin: -74px auto 48px;

  padding: 30px;

  border: 1px solid rgba(18, 63, 50, 0.09);

  border-radius: 34px;

  background: rgba(255, 255, 255, 0.96);

  box-shadow: var(--shadow);

  backdrop-filter: blur(14px);

}

.journey-heading {

  display: flex;

  align-items: center;

  gap: 18px;

  margin-bottom: 28px;

}

.journey-heading span {

  flex: 1;

  height: 1px;

  background: rgba(18, 63, 50, 0.17);

}

.journey-heading h2 {

  margin: 0;

  white-space: nowrap;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(28px, 3vw, 39px);

  color: var(--forest);

}

/* JOURNEY STEPS */

.journey-steps {

  position: relative;

  display: grid;

  grid-template-columns: repeat(7, minmax(82px, 1fr));

  gap: 12px;

  margin-bottom: 32px;

}

.journey-steps::before {

  content: "";

  position: absolute;

  top: 28px;

  left: 7%;

  right: 7%;

  height: 3px;

  border-radius: 999px;

  background:

    repeating-linear-gradient(

      90deg,

      rgba(18, 63, 50, 0.18) 0 18px,

      transparent 18px 25px

    );

}

.journey-step {

  position: relative;

  z-index: 2;

  display: grid;

  justify-items: center;

  gap: 10px;

  text-align: center;

  color: #344941;

}

.journey-icon {

  width: 56px;

  height: 56px;

  display: grid;

  place-items: center;

  border: 2px solid rgba(18, 63, 50, 0.17);

  border-radius: 50%;

  background: #fffdf8;

  font-size: 24px;

  filter: grayscale(1);

  opacity: 0.62;

}

.journey-step strong {

  font-size: 14px;

}

.journey-step.active {

  color: var(--orange-dark);

}

.journey-step.active .journey-icon {

  border-color: var(--orange);

  background: #fff7ee;

  filter: none;

  opacity: 1;

  box-shadow: 0 10px 22px rgba(243, 107, 22, 0.16);

}

/* CURRENT STEP CARD */

.current-step-card {

  max-width: 860px;

  margin: 0 auto;

  padding: 38px 36px 30px;

  text-align: center;

  border: 1px solid var(--border);

  border-radius: 28px;

  background:

    radial-gradient(

      circle at top,

      rgba(255, 246, 231, 0.92),

      rgba(255, 255, 255, 0.98) 56%

    );

  box-shadow: 0 15px 38px rgba(31, 55, 46, 0.09);

}

.step-count {

  margin: 0;

  font-size: 18px;

  font-weight: 800;

  color: var(--forest);

}

.step-accent {

  width: 54px;

  height: 3px;

  margin: 12px auto 20px;

  border-radius: 999px;

  background: var(--orange);

}

.current-step-icon {

  width: 84px;

  height: 84px;

  display: grid;

  place-items: center;

  margin: 0 auto 16px;

  border-radius: 50%;

  background: linear-gradient(180deg, #fff9ef, #f7ead5);

  box-shadow: 0 13px 26px rgba(243, 107, 22, 0.12);

  font-size: 43px;

}

.current-step-card h2 {

  margin: 0 0 12px;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(40px, 5vw, 60px);

  line-height: 1;

  color: var(--forest);

}

.step-lead {

  margin: 0;

  font-size: 20px;

  line-height: 1.5;

}

.step-divider {

  display: flex;

  align-items: center;

  gap: 14px;

  width: min(440px, 90%);

  margin: 22px auto;

  color: var(--forest);

}

.step-divider span:first-child,

.step-divider span:last-child {

  flex: 1;

  height: 1px;

  background: rgba(18, 63, 50, 0.18);

}

.step-description {

  max-width: 570px;

  margin: 0 auto 28px;

  font-size: 19px;

  line-height: 1.58;

}

.continue-button {

  width: min(520px, 100%);

  min-height: 66px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  border: 0;

  border-radius: 15px;

  color: var(--white);

  background:

    linear-gradient(

      135deg,

      var(--orange),

      var(--orange-dark)

    );

  box-shadow: 0 15px 30px rgba(225, 86, 10, 0.26);

  font-size: 23px;

  font-weight: 800;

  cursor: pointer;

  transition:

    transform 180ms ease,

    box-shadow 180ms ease;

}

.continue-button:hover {

  transform: translateY(-2px);

  box-shadow: 0 19px 36px rgba(225, 86, 10, 0.31);

}

.continue-button:active {

  transform: translateY(0);

}

.save-message {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 9px;

  margin: 22px 0 0;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.45;

}

.save-message strong {

  color: var(--forest);

}

/* MOBILE */

@media (max-width: 760px) {

  .onboarding-hero {

    min-height: 650px;

  }

  .onboarding-copy {

    width: 100%;

    padding: 34px 22px 105px;

  }

  .onboarding-logo {

    width: 230px;

    margin-bottom: 54px;

  }

  .onboarding-greeting {

    font-size: 25px;

  }

  .onboarding-copy h1 {

    max-width: 620px;

    font-size: clamp(48px, 13vw, 66px);

    line-height: 0.98;

  }

  .onboarding-copy h2 {

    max-width: 540px;

    font-size: 23px;

  }

  .onboarding-intro {

    max-width: 540px;

    font-size: 18px;

  }

  .onboarding-photo {

  top: 20px;

  left: 50%;

  right: auto;

  width: 112%;

  opacity: 0.15;

  background-position: center;

  transform: translateX(-50%);

}

  .journey-panel {

    width: calc(100% - 22px);

    margin-top: -36px;
margin-bottom: 20px;
    padding: 24px 14px;

    border-radius: 25px;
  

  }

  .journey-heading {

    margin-bottom: 22px;

  }

  .journey-heading h2 {

    font-size: 31px;

  }

  .journey-steps {

    grid-template-columns: repeat(7, 72px);

    justify-content: start;

    gap: 8px;

    overflow-x: auto;

    padding: 4px 4px 14px;

    scrollbar-width: none;

  }

  .journey-steps::-webkit-scrollbar {

    display: none;

  }

  .journey-steps::before {

    left: 36px;

    right: auto;

    width: 440px;

  }

  .journey-icon {

    width: 50px;

    height: 50px;

    font-size: 21px;

  }

  .journey-step strong {

    font-size: 12px;

  }

  .current-step-card {

    padding: 30px 18px 24px;

    border-radius: 23px;

  }

  .current-step-card h2 {

    font-size: 42px;

  }

  .step-lead,

  .step-description {

    font-size: 17px;

  }

  .continue-button {

    min-height: 61px;

    font-size: 21px;

  }

  .save-message {

    align-items: flex-start;

    font-size: 13px;

  }

}

@media (max-width: 390px) {

  .onboarding-copy h1 {

    font-size: 43px;

  }

  .current-step-card h2 {

    font-size: 37px;

  }

}
/* ==========================================

   PAGE 3 - SERVICES

========================================== */

.journey-step.completed {

  color: var(--forest);

}

.journey-step.completed .journey-icon {

  border-color: rgba(18, 63, 50, 0.28);

  background: rgba(18, 63, 50, 0.1);

  color: var(--forest);

  filter: none;

  opacity: 1;

}

.service-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin: 34px 0 20px;

}

.service-card {

  position: relative;

  min-height: 170px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 22px 18px;

  border: 2px solid rgba(18, 63, 50, 0.12);

  border-radius: 22px;

  background:

    linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.98),

      rgba(247, 234, 213, 0.5)

    );

  color: var(--forest);

  text-align: center;

  cursor: pointer;

  box-shadow: 0 12px 28px rgba(31, 55, 46, 0.07);

  transition:

    transform 180ms ease,

    border-color 180ms ease,

    background 180ms ease,

    box-shadow 180ms ease;

}

.service-card::after {

  content: "✓";

  position: absolute;

  top: 12px;

  right: 12px;

  width: 30px;

  height: 30px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--orange);

  color: white;

  font-size: 16px;

  font-weight: 900;

  opacity: 0;

  transform: scale(0.7);

  transition:

    opacity 180ms ease,

    transform 180ms ease;

}

.service-card:hover {

  transform: translateY(-3px);

  border-color: rgba(243, 107, 22, 0.55);

  box-shadow: 0 18px 38px rgba(243, 107, 22, 0.12);

}

.service-card.selected {

  border-color: var(--orange);

  background:

    linear-gradient(

      180deg,

      rgba(255, 247, 237, 1),

      rgba(255, 231, 204, 0.72)

    );

  box-shadow:

    0 18px 38px rgba(243, 107, 22, 0.17),

    inset 0 0 0 1px rgba(243, 107, 22, 0.12);

  transform: translateY(-3px);

}

.service-card.selected::after {

  opacity: 1;

  transform: scale(1);

}

.service-icon {

  font-size: 42px;

  line-height: 1;

}

.service-card strong {

  font-size: 19px;

  line-height: 1.2;

}

.service-card small {

  max-width: 240px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.45;

}

.selected-count {

  margin: 18px 0 0;

  color: var(--forest);

  font-size: 15px;

  font-weight: 800;

  text-align: center;

}

.service-actions {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  margin-top: 34px;

}

.back-button {

  min-height: 58px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0 24px;

  border: 1px solid rgba(18, 63, 50, 0.16);

  border-radius: 14px;

  background: white;

  color: var(--forest);

  font-weight: 800;

  text-decoration: none;

  transition:

    transform 180ms ease,

    border-color 180ms ease,

    box-shadow 180ms ease;

}

.back-button:hover {

  transform: translateY(-2px);

  border-color: rgba(18, 63, 50, 0.38);

  box-shadow: 0 12px 24px rgba(31, 55, 46, 0.08);

}

.continue-button:disabled {

  opacity: 0.45;

  cursor: not-allowed;

  transform: none;

  box-shadow: none;

}

@media (max-width: 760px) {

  .service-grid {

    grid-template-columns: 1fr;

    gap: 14px;

  }

  .service-card {

    min-height: 150px;

    padding: 22px 18px;

  }

  .service-card strong {

    font-size: 20px;

  }

  .service-actions {

    flex-direction: column-reverse;

  }

  .back-button,

  .service-actions .continue-button {

    width: 100%;

  }

}
.map-reminder {

  max-width: 680px;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  gap: 10px;

  margin: 24px auto 8px;

  padding: 16px 18px;

  border: 1px solid rgba(18, 63, 50, 0.12);

  border-radius: 16px;

  background: rgba(18, 63, 50, 0.055);

  color: var(--forest);

  font-size: 15px;

  font-weight: 700;

  line-height: 1.5;

  text-align: left;

}

.map-reminder span {

  flex: 0 0 auto;

  font-size: 22px;

  line-height: 1.2;

}

@media (max-width: 760px) {

  .map-reminder {

    font-size: 14px;

  }

}