.elementor-6586 .elementor-element.elementor-element-62f459b{--display:flex;--min-height:0vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10%;--padding-bottom:10%;--padding-left:2%;--padding-right:2%;}.elementor-6586 .elementor-element.elementor-element-62f459b:not(.elementor-motion-effects-element-type-background), .elementor-6586 .elementor-element.elementor-element-62f459b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://colorbydesign.noussdigital.website/wp-content/uploads/2025/12/wallpapercbd.jpg");background-size:cover;}.elementor-6586 .elementor-element.elementor-element-62f459b.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-6586 .elementor-element.elementor-element-3869987{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-6586 .elementor-element.elementor-element-62f459b{--width:100%;}}@media(min-width:2400px){.elementor-6586 .elementor-element.elementor-element-62f459b{--min-height:100vh;}}/* Start custom CSS for html, class: .elementor-element-3869987 *//* ========================================
   TOKENS
======================================== */
:root{
  --cq-green:#0A5534;
  --cq-paper:#f6efe6;

  /* Custom font from Elementor (use exact name shown in Elementor > Custom Fonts) */
  --cq-font:"Graphik Normal", Arial, Helvetica, sans-serif;

  /* Button states */
  --cq-hover:#F4EADF; /* hover + selected */

  /* Safe areas (tweakable) */
  --cq-top-safe: 92px;     /* space for back + info */
  --cq-bottom-safe: 84px;  /* space for mobile info icon */
}

/* ========================================
   PAGE BG + GLOBAL TYPE
======================================== */
body{
  background: var(--cq-paper);
  margin: 0;
  font-family: var(--cq-font);
}

/* Make images fluid by default */
#cq-form-container img{
  max-width: 100%;
  height: auto;
}

/* ========================================
   FORM CONTAINER
   Default: ~60vh
======================================== */
#cq-form-container{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical center */
  align-items: center;       /* horizontal center */
  min-height: 60vh;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
  text-align: center;
}

/* ========================================
   PROGRESS BAR
======================================== */
.cq-progress{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 6px;
  background: #eee;
  z-index: 9999;
}
.cq-progress-bar{
  height: 6px;
  width: 0%;
  background: var(--cq-green);
  transition: 0.3s ease;
}

/* ========================================
   TOP ROW OVERLAY (Back + Info)
======================================== */
.cq-top-row{
  display: none;                 /* JS toggles this */
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  z-index: 2000;
  pointer-events: none;
}

/* Back pinned top-left inside container */
.cq-back{
  position: absolute;
  top: 34px;
  left: 34px;
  pointer-events: auto;
}
.cq-back img{
  width: 100px;
  height: auto;
  max-width: 100px;
}

/* Info icon: Desktop top-right aligned with back */
#cq-info{
  display: none;                 /* JS enables from step 2+ */
  position: absolute;
  top: 34px;
  right: 34px;

  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;

  color: #12994B;
  border-radius: 50%;
  cursor: pointer;

  z-index: 99999;
  pointer-events: auto;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ========================================
   STEPS (base)
======================================== */
.cq-step{
  display: none;
  width: 100%;
}
.cq-step.active{ display: block; }

/* Loader logo (Step 0) */
.cq-logo--big img{
  max-height: 600px !important;
  width: auto !important;
}

/* Step 1 logo (smaller than Step 0) */
.cq-step[data-step="1"] .cq-logo img{
  max-height: 180px!important;
  width: auto;
}

/* Steps 2+ become centered “screen”
   Default desktop/tablet: ~60vh
   ✅ Add safe padding so content never overlaps top controls
*/
.cq-step.active[data-step]:not([data-step="0"]):not([data-step="1"]){
  min-height: calc(60vh - 6px); /* progress bar */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  /* ✅ safe padding to avoid overlap */
  padding: var(--cq-top-safe) 20px 24px;
}

/* ✅ Mobile override: Steps 2–6 = ~70vh + safe padding top/bottom */
@media (max-width: 600px){
  :root{
    --cq-top-safe: 88px;     /* slightly tighter on mobile */
    --cq-bottom-safe: 96px;  /* room for bottom-right info icon */
  }

  .cq-step.active[data-step="2"],
  .cq-step.active[data-step="3"],
  .cq-step.active[data-step="4"],
  .cq-step.active[data-step="5"],
  .cq-step.active[data-step="6"]{
    min-height: calc(70vh - 6px) !important;

    /* ✅ prevent overlap with back/info (top) + info icon (bottom) */
    padding: var(--cq-top-safe) 16px var(--cq-bottom-safe) !important;
  }

  /* Also apply safe padding to ANY active step 2+ on mobile */
  .cq-step.active[data-step]:not([data-step="0"]):not([data-step="1"]){
    padding: var(--cq-top-safe) 16px var(--cq-bottom-safe);
  }
}

/* ========================================
   STEP TRANSITIONS
======================================== */
.cq-step.fade-up{ animation: cqFadeUp .5s ease forwards; }
.cq-step.fade-down{ animation: cqFadeDown .5s ease forwards; }

@keyframes cqFadeUp{
  from{ opacity: 0; transform: translateY(30px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes cqFadeDown{
  from{ opacity: 0; transform: translateY(-30px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ========================================
   STEP 1 HERO
======================================== */
.cq-hero{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 16px 60px;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.cq-logo img{
  max-height: 300px !important;
  width: auto !important;
}

.cq-hero-title{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 600;
  color: var(--cq-green);
  font-size: clamp(36px, 5vw, 74px)!important;
  line-height: 1.05;
  margin: 0 0 26px;
}

.cq-price-row{
  display: grid;
  grid-template-columns: auto 1px minmax(240px, 420px);
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 0 auto 26px;
}
.cq-price{
  font-weight: 800;
  color: var(--cq-green);
  font-size: clamp(44px, 5vw, 54px);
  line-height: 1;
}
.cq-price-divider{
  width: 1px;
  height: 56px;
  background: rgba(10, 85, 52, 0.35);
}
.cq-price-note{
  font-size: 20px;
  line-height: 1.35;
  color: rgba(0,0,0,0.65);
  text-align: left;
  font-family: var(--cq-font);
}

.cq-email-wrap{
  width: 100%;
  max-width: 620px;
  margin: 0 auto 12px;
}

#cq-email{
  width: 100%;
  background: transparent;
  border: 1px solid var(--cq-green);
  border-radius: 6px;
  padding: 14px 14px;
  font-size: 14px;
  color: var(--cq-green);
  outline: none;
  box-sizing: border-box;
  font-family: var(--cq-font);
}
#cq-email::placeholder{ color: rgba(0,0,0,0.45); }
#cq-email:focus{ box-shadow: 0 0 0 2px rgba(10,85,52,0.12); }

.cq-accept{
  width: 100%;
  max-width: 650px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  margin: 10px auto 0;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(0,0,0,0.55);
  font-family: var(--cq-font);
  text-align: left;
}
.cq-accept input[type="checkbox"]{
  width: 14px;
  height: 14px;
  accent-color: var(--cq-green);
  margin: 2px 0 0;
}

.cq-submit-btn{
  background: var(--cq-green);
  color: #fff;
  border: 1px solid var(--cq-green);
  border-radius: 2px;
  padding: 12px 18px;
  min-width: 140px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--cq-font);
  margin-top: 18px;
}
.cq-submit-btn:hover{
  background: var(--cq-hover);
  color: var(--cq-green);
  border-color: var(--cq-green);
}
.cq-arrow{ font-size: 14px; line-height: 1; }

/* Mobile: Stack $30 + note */
@media (max-width: 720px){
  .cq-price-row{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 18px;
    text-align: center;
  }
  .cq-price-divider {
    width: 100%; /* full width horizontally */
    height: 1px; /* thickness of the line */
    background: rgba(10, 85, 52, 0.35);
}

  .cq-price{ text-align: center; }
  .cq-price-note{
    text-align: center !important;
    max-width: 520px;
    margin: 0 auto;
  }
}

/* ========================================
   QUESTIONS
======================================== */
.cq-question-title{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 500;
  color: var(--cq-green);
  letter-spacing: -0.01em;
  line-height: 1.3em;
  font-size: clamp(34px, 5.2vw, 74px);
  margin: 0 0 54px;
  text-align: center;
  max-width: 1400px;
}

/* ========================================
   BUTTON GRID
======================================== */
.cq-btn-row{
  display: grid;
  grid-template-columns: repeat(2, 400px);
  justify-content: center;
  column-gap: 20px;
  row-gap: 20px;
  width: 100%;
  margin: 0 auto;
}
.cq-btn-row > .cq-pill:nth-child(odd):last-child{
  grid-column: 1 / -1;
  justify-self: center;
}

/* ========================================
   BUTTON STYLING
======================================== */
.cq-pill{
  width: 400px;
  height: 50px;
  background: var(--cq-green);
  color: #ffffff;
  border: 1px solid var(--cq-green);
  border-radius: 0;
  padding: 0 22px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  font-family: var(--cq-font);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;

  transition: background 0.2s ease, color 0.2s ease, border 0.2s ease, transform 0.15s ease;
}
.cq-pill:hover{
  background: var(--cq-hover);
  color: var(--cq-green);
  border-color: var(--cq-green);
  transform: translateY(-1px);
}
.cq-pill.is-selected{
  background: var(--cq-hover);
  color: var(--cq-green);
  border-color: var(--cq-green);
}

.cq-pill-content{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.cq-pill-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cq-icon{
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
  fill: none;
}

/* ========================================
   TOOLTIP (BUTTON TOOLTIP ONLY - DESKTOP HOVER)
======================================== */
.cq-pill-tooltip{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #000;
  color: #fff;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  border-radius: 4px;

  width: 340px;
  max-width: 340px;
  box-sizing: border-box;

  white-space: normal;
  overflow-wrap: break-word;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 100;
  text-align: left;

  max-inline-size: min(340px, calc(100vw - 24px));
}
.cq-pill-tooltip.is-visible{ opacity: 1; }
.cq-pill-tooltip--left{ right: calc(100% + 12px); left: auto; }
.cq-pill-tooltip--right{ left: calc(100% + 12px); right: auto; }

/* ========================================
   FORCE ALL H1 COLOR
======================================== */
#cq-form-container h1,
#cq-form-container .cq-question-title,
#cq-form-container .cq-hero-title{
  color: #0a5534 !important;
}

/* ========================================
   TABLET RESPONSIVE
======================================== */
@media (max-width: 900px){
  .cq-btn-row{
    grid-template-columns: 1fr;
    row-gap: 18px;
    column-gap: 0;
  }
  .cq-pill{
    width: min(90vw, 400px);
    justify-self: center;
    font-size: 18px;
    height: 48px;
  }
  .cq-btn-row > .cq-pill:nth-child(odd):last-child{ grid-column: auto; }

  .cq-question-title{
    font-size: clamp(28px, 7vw, 54px);
    margin-bottom: 36px;
    max-width: 92vw;
  }

  .cq-hero-title{
    font-size: clamp(32px, 7vw, 56px);
  }

  .cq-price-note{
    font-size: 16px;
  }

  .cq-step[data-step="1"] .cq-logo img{
    max-height: 160px;
  }
}

/* ========================================
   MOBILE RESPONSIVE
======================================== */
@media (max-width: 600px){
  #cq-form-container{
    padding: 28px 16px;
  }

  .cq-logo--big img{
    max-height: 220px !important;
  }

  .cq-step[data-step="1"] .cq-logo img{
    max-height: 130px;
  }

  .cq-hero{
    padding: 28px 10px 44px;
  }

  .cq-hero-title{
    font-size: clamp(28px, 9vw, 44px);
    margin-bottom: 18px;
  }

  .cq-price{
    font-size: clamp(36px, 11vw, 56px);
  }

  .cq-price-note{
    font-size: 15px;
    text-align: center;
  }

  .cq-email-wrap{
    max-width: 92vw;
  }

  #cq-email{
    font-size:8px;
  }

  .cq-question-title{
    font-size: clamp(26px, 9vw, 44px);
    margin: 0 0 28px;
    max-width: 92vw;
  }

  .cq-pill{
    width: min(92vw, 360px);
    font-size: 16px;
    height: 46px;
  }

  .cq-pill-tooltip{
    top: 120%;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: min(92vw, 340px);
    max-width: 92vw;
  }

  .cq-accept{
    width: 100%;
    max-width: 650px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    margin: 10px auto 0;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(0,0,0,0.55);
    font-family: var(--cq-font);
    text-align: left;
  }
  .cq-accept input[type="checkbox"]{
    width: 14px;
    height: 14px;
    accent-color: var(--cq-green);
    margin: 2px 0 0;
  }
}

/* ========================================
   INFO ICON + MOBILE INFO PANEL (STEP 2+)
======================================== */

/* Always hide the old inline info tooltip span */
.cq-info-tooltip{
  display:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Mobile info panel (inside container, above icon) */
#cq-mobile-info{
  display:none;
  position:absolute;
  right: 18px;
  bottom: 76px;
  z-index: 99999;

  width: min(92vw, 360px);

  background: rgba(0,0,0,0.92);
  color: #fff;

  border-radius: 18px;
  padding: 16px 16px 14px;
  box-sizing: border-box;

  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  pointer-events: auto;
}
#cq-mobile-info.is-visible{ display:block; }

#cq-mobile-info .cq-mobile-info-content{
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}
#cq-mobile-info .cq-mobile-info-list{
  margin: 0;
  padding: 0;
  list-style: none;
}
#cq-mobile-info .cq-mobile-info-list li{ margin: 0 0 8px; }
#cq-mobile-info .cq-mobile-info-list strong{ font-weight: 800; }

#cq-mobile-info .cq-mobile-info-btn{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 16px;
  border-radius: 999px;

  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.75);

  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Mobile placement for Back + Info */
@media (max-width: 600px){
  .cq-back{
    top: 18px;
    left: 18px;
  }
  .cq-back img{
    width: 64px;
    max-width: 64px;
  }

  /* Info icon bottom-right inside container */
  #cq-info{
    top: auto;
    right: 18px;
    bottom: 20px;
  }
}

/* ========================================
   DESKTOP INFO POPOVER
======================================== */
.cq-info-popover{
  display: none;
  position: absolute;
  top: 80px;
  right: 34px;
  z-index: 99999;

  width: 360px;
  max-width: calc(100vw - 40px);

  background: rgba(0,0,0,0.92);
  color: #fff;
  border-radius: 18px;
  padding: 18px;
  box-sizing: border-box;

  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

.cq-info-popover.is-visible{
  display:block;
}

.cq-info-popover-content{
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

.cq-info-popover-btn{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 16px;
  border-radius: 999px;

  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.75);

  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

/* Never show desktop popover on mobile */
@media (max-width:600px){
  .cq-info-popover{
    display:none !important;
  }
}
/* Warm/Cozy: icon turns green on hover + selected */
.cq-pill[data-value="Warm and Cozy"]:hover .cq-pill-icon,
.cq-pill[data-value="Warm and Cozy"].is-selected .cq-pill-icon{
  color: var(--cq-green);
}

/* Optional: keep icon light by default (since button bg is green) */
.cq-pill[data-value="Warm and Cozy"] .cq-pill-icon{
  color: #FFF7EE;
}
/* Open/Airy: icon turns green on hover + selected */
.cq-pill[data-value="Open and Airy"]:hover .cq-pill-icon,
.cq-pill[data-value="Open and Airy"].is-selected .cq-pill-icon{
  color: var(--cq-green);
}

/* Optional: keep icon light by default (since button bg is green) */
.cq-pill[data-value="Open and Airy"] .cq-pill-icon{
  color: #FFF7EE;
}
/* Default icon color (light inside green button) */
.cq-pill[data-value="Balanced"] .cq-pill-icon{
  color: #FFF7EE;
}

/* Turn icon green on hover + selected */
.cq-pill[data-value="Balanced"]:hover .cq-pill-icon,
.cq-pill[data-value="Balanced"].is-selected .cq-pill-icon{
  color: var(--cq-green);
}
.cq-pill .cq-pill-icon{ color:#FFF7EE; }
.cq-pill:hover .cq-pill-icon,
.cq-pill.is-selected .cq-pill-icon{ color: var(--cq-green); }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-62f459b *//* Hide site header */
.site-header {
  display: none !important;
}/* End custom CSS */