/*
 * Shared Growth in Practice experience
 * v6.0.0-beta.5.28
 * Template-level so legacy and Runtime v2 stories share one completion model.
 */
.ds-growth-story-page:has(.se-growth-experience),
.se-growth-experience,
.se-growth-experience__story{
  overflow:visible!important;
}
.se-growth-experience{
  --se-story-progress:0;
  position:relative;
  isolation:isolate;
}

/* Progress rail */
.se-story-progress{
  position:fixed;
  right:clamp(10px,1.2vw,18px);
  top:15vh;
  height:70vh;
  width:11px;
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}
.se-growth-experience[data-story-progress-active="1"] .se-story-progress{opacity:.82}
.se-story-progress__track{
  position:relative;
  display:block;
  width:3px;
  flex:1;
  background:rgba(153,217,217,.18);
  border-radius:99px;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(153,217,217,.05);
}
.se-story-progress__fill{
  position:absolute;
  inset:0;
  background:rgba(153,217,217,.92);
  transform-origin:50% 0;
  transform:scaleY(var(--se-story-progress,0));
  border-radius:99px;
  will-change:transform;
}
.se-story-progress__start,
.se-story-progress__end{
  width:8px;
  height:8px;
  border:1px solid rgba(153,217,217,.62);
  border-radius:50%;
  background:#061219;
  flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(6,18,25,.72);
}
.se-story-progress__start{margin-bottom:5px}
.se-story-progress__end{margin-top:5px}

/* One-time orientation cue */
.se-story-scroll-cue{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:60;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(255,255,255,.66);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
}
.se-growth-experience[data-story-progress-active="1"]:not([data-story-has-scrolled="1"]) .se-story-scroll-cue{opacity:1}
.se-story-scroll-cue i{
  display:block;
  width:1px;
  height:22px;
  background:linear-gradient(to bottom,rgba(153,217,217,.2),rgba(153,217,217,.95));
  animation:seStoryCue 1.5s ease-in-out infinite;
}
@keyframes seStoryCue{0%,100%{transform:scaleY(.45);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/*
 * Shared CTA runway.
 * The CTA remains pinned through the end of the document. The site footer is
 * pulled upward by its measured height so it enters the viewport during the
 * CTA hold instead of forcing the CTA to release and slide upward.
 */
.se-growth-experience > .se-growth-cta{
  position:relative!important;
  z-index:20!important;
  display:block!important;
  width:100%!important;
  height:150svh!important;
  min-height:150svh!important;
  padding:0!important;
  margin:0!important;
  background:#061219!important;
  overflow:visible!important;
  scroll-margin-top:0!important;
}
.se-growth-experience > .se-growth-cta > .se-growth-cta__viewport{
  position:sticky!important;
  top:0!important;
  width:min(var(--max), calc(100% - 40px))!important;
  max-width:var(--max)!important;
  min-height:100svh!important;
  height:100svh!important;
  margin:0 auto!important;
  padding:clamp(84px,10vh,112px) 0 clamp(34px,5vh,58px)!important;
  display:grid!important;
  grid-template-columns:minmax(250px,.76fr) minmax(470px,1.24fr)!important;
  gap:clamp(34px,4.8vw,72px)!important;
  align-items:center!important;
  box-sizing:border-box!important;
  background:
    radial-gradient(circle at 72% 18%,rgba(153,217,217,.10),transparent 38%),
    linear-gradient(180deg,rgba(3,11,16,.2),#061219 24%,#061219 100%)!important;
  overflow:hidden!important;
}
.se-growth-cta__intro{
  align-self:center!important;
  padding:0!important;
  min-width:0;
}
.se-growth-cta__eyebrow{
  margin:0 0 12px!important;
  color:#99D9D9!important;
  text-transform:uppercase!important;
  letter-spacing:.16em!important;
  font-size:11px!important;
  font-weight:800!important;
}
.se-growth-cta__intro h2{
  margin:0!important;
  max-width:460px!important;
  color:#fff!important;
  font-size:clamp(38px,3.9vw,60px)!important;
  line-height:.98!important;
  letter-spacing:-.045em!important;
}
.se-growth-cta__intro>p:last-child{
  margin:18px 0 0!important;
  max-width:470px!important;
  color:rgba(255,255,255,.72)!important;
  font-size:clamp(16px,1.25vw,20px)!important;
  line-height:1.43!important;
}
.se-growth-cta__card{
  align-self:center!important;
  position:relative!important;
  min-width:0!important;
  padding:clamp(22px,2.3vw,32px)!important;
  min-height:0!important;
  background:rgba(17,32,40,.84)!important;
  border-color:rgba(153,217,217,.22)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.32)!important;
  backdrop-filter:blur(18px);
}
.se-growth-cta__card .ds-contact-form-heading{
  margin-bottom:14px!important;
  padding-bottom:16px!important;
}
.se-growth-cta__card .ds-contact-form-heading>span{font-size:10px!important}
.se-growth-cta__card .ds-contact-form-heading h2{
  margin:5px 0 0!important;
  max-width:620px!important;
  font-size:clamp(30px,2.8vw,44px)!important;
  line-height:.96!important;
  letter-spacing:-.04em!important;
}
.se-growth-cta__card .ds-contact-fields{gap:10px 14px!important}
/* Keep labels in the accessibility tree while using them as visible in-field hints. */
.se-growth-cta__card .se-growth-cta__placeholder-field > label,
.se-growth-cta__card .se-growth-cta__placeholder-field > .hs-form-field > label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.se-growth-cta__card .ds-contact-field legend{margin-bottom:5px!important;font-size:11px!important}
.se-growth-cta__card input,
.se-growth-cta__card select{
  min-height:44px!important;
  padding:10px 14px!important;
}
.se-growth-cta__card textarea{
  min-height:78px!important;
  height:78px!important;
  padding:13px 14px!important;
  resize:vertical!important;
}
.se-growth-cta__card input::placeholder,
.se-growth-cta__card textarea::placeholder{
  color:rgba(235,244,248,.58)!important;
  opacity:1!important;
}
.se-growth-cta__card .ds-contact-form-actions{margin-top:12px!important}
.se-growth-cta__card .ds-contact-submit{min-height:44px!important}

/*
 * Footer handoff: overlap the footer into the final CTA runway by exactly its
 * rendered height. This lets the footer enter while the CTA viewport remains
 * sticky and vertically centered all the way to the bottom of the page.
 */
body.single-growth_story .ds-site-footer,
body.single-growth_story .site-footer,
body.single-growth_story footer.site-footer,
body.single-growth_story #colophon{
  position:relative!important;
  z-index:80!important;
}
body.single-growth_story[data-se-footer-overlap="1"] .ds-site-footer{
  margin-top:calc(-1 * var(--se-growth-footer-height, 0px))!important;
  padding:18px 0 22px!important;
  border-top:0!important;
}
body.single-growth_story[data-se-footer-overlap="1"] .ds-site-footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:calc((100% - clamp(34px,4.8vw,72px)) * .38);
  height:1px;
  background:rgba(255,255,255,.12);
  pointer-events:none;
}
body.single-growth_story[data-se-footer-overlap="1"] .ds-site-footer p{
  margin:0!important;
}

/* Once complete, the rail deliberately stays visible at 100% through footer. */
.se-growth-experience[data-story-progress-complete="1"] .se-story-progress{
  opacity:.82!important;
}


/*
 * v5.27 CTA completion refinement
 * The CTA form is intentionally compact enough that, at the document bottom,
 * the footer's compact final line lands below the form card instead of across
 * its controls. The sticky composition itself remains centered.
 */
@media(min-width:861px){
  .se-growth-cta__card .ds-native-contact-form{margin:0!important}
  .se-growth-cta__card .ds-contact-form-message:empty{display:none!important}
  body.single-growth_story[data-se-footer-overlap="1"] .ds-site-footer{
    min-height:0!important;
  }
}

@media(max-height:820px) and (min-width:861px){
  .se-growth-experience > .se-growth-cta > .se-growth-cta__viewport{
    padding:74px 0 30px!important;
  }
  .se-growth-cta__intro h2{font-size:clamp(34px,3.4vw,48px)!important}
  .se-growth-cta__intro>p:last-child{margin-top:14px!important;font-size:16px!important}
  .se-growth-cta__card{padding:20px!important}
  .se-growth-cta__card .ds-contact-form-heading{margin-bottom:12px!important;padding-bottom:14px!important}
  .se-growth-cta__card .ds-contact-form-heading h2{font-size:clamp(28px,2.7vw,38px)!important}
  .se-growth-cta__card input,.se-growth-cta__card select{min-height:42px!important}
  .se-growth-cta__card textarea{min-height:72px!important;height:72px!important}
  .se-growth-cta__card .ds-contact-fields{gap:8px 12px!important}
}


/* v5.28: the footer height variable is now measured after compact styling is
 * active, so this negative margin equals the footer's real rendered height.
 * Keep the compact footer text low in its band, leaving a clean gap beneath
 * the centered form card at the end of the scroll. */
@media(min-width:861px){
  body.single-growth_story[data-se-footer-overlap="1"] .ds-site-footer{
    padding:16px 0 18px!important;
  }
}

@media(max-width:860px){
  body.single-growth_story[data-se-footer-overlap="1"] .ds-site-footer{
    margin-top:0!important;
    padding:36px 0!important;
    border-top:1px solid rgba(255,255,255,.12)!important;
  }
  body.single-growth_story[data-se-footer-overlap="1"] .ds-site-footer::before{display:none!important}
  .se-growth-experience > .se-growth-cta{
    height:auto!important;
    min-height:0!important;
  }
  .se-growth-experience > .se-growth-cta > .se-growth-cta__viewport{
    position:relative!important;
    top:auto!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:92px 6vw 70px!important;
    grid-template-columns:1fr!important;
    gap:34px!important;
    overflow:visible!important;
  }
}

@media(max-width:520px){
  .se-story-progress{right:7px;top:13vh;height:72vh}
  .se-growth-cta__card{padding:20px!important}
}

@media(prefers-reduced-motion:reduce){
  .se-story-progress,.se-story-scroll-cue{transition:none}
  .se-story-scroll-cue i{animation:none}
}
