/*-- -------------------------- -->
<---        What to Expect       -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #what-to-expect-7134 {
    padding: var(--sectionPadding);
    background-color: #fff;
  }
  #what-to-expect-7134 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 4rem);
  }
  #what-to-expect-7134 .cs-content {
    width: 100%;
    max-width: 40rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* Short accent rule above the eyebrow (centred) -- same pattern as
     Services/Pricing */
  #what-to-expect-7134 .cs-topper {
    margin: 0 0 1rem;
    padding-top: 1rem;
    color: var(--accentText);
    position: relative;
  }
  #what-to-expect-7134 .cs-topper:before {
    content: "";
    width: 3rem;
    height: 2px;
    background-color: var(--accentText);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
  #what-to-expect-7134 .cs-title {
    font-weight: 400;
    margin: 0 0 1rem;
    color: var(--navy);
  }
  #what-to-expect-7134 .cs-text {
    margin: 0;
  }

  /* -- Journey wrapper -------------------------------------------------- */
  #what-to-expect-7134 .cs-expect-journey {
    width: 100%;
  }

  /* Overall progress across the 4 steps -- fills left to right as you move
     through, independent of whichever layout the steps/panels are in */
  #what-to-expect-7134 .cs-expect-progress {
    width: 100%;
    height: 3px;
    background-color: rgba(34, 58, 77, 0.12);
    margin-bottom: 1.5rem;
  }
  #what-to-expect-7134 .cs-expect-progress-fill {
    height: 100%;
    width: 0%;
    background-color: var(--accentText);
    transition: width 0.4s ease;
  }

  /* Step buttons -- numbers only on mobile (labels appear from tablet up,
     the active panel's own heading already carries the label at this
     width) */
  #what-to-expect-7134 .cs-expect-steps {
    width: 100%;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
  }
  #what-to-expect-7134 .cs-expect-step-item {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
  }
  #what-to-expect-7134 .cs-expect-step {
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  /* Same treatment as Getting Started's step numbers -- Self Modern
     italic, no frame -- rather than a filled circle badge */
  #what-to-expect-7134 .cs-expect-step-number {
    font-family: var(--headingFont);
    font-size: 1.5rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1em;
    color: rgba(34, 58, 77, 0.35);
    transition: color 0.3s;
  }
  #what-to-expect-7134 .cs-expect-step.cs-active .cs-expect-step-number {
    color: var(--accentText);
  }
  #what-to-expect-7134 .cs-expect-step-label {
    display: none;
    font-family: var(--bodyFont);
    font-size: 0.8125rem;
    line-height: 1.3em;
    text-align: center;
    color: rgba(34, 58, 77, 0.6);
    transition: color 0.3s;
  }
  #what-to-expect-7134 .cs-expect-step.cs-active .cs-expect-step-label {
    color: var(--navy);
    font-weight: 700;
  }

  /* Panel card -- white with a real border/shadow instead of a flat
     colour fill, so it reads as a card rather than a colour stripe.
     position:relative + overflow:hidden clips the decorative blob to the
     card's edges. */
  #what-to-expect-7134 .cs-expect-panels {
    width: 100%;
    padding: clamp(1.75rem, 5vw, 2.5rem);
    background-color: #fff;
    border: 1px solid rgba(34, 58, 77, 0.1);
    box-shadow: 0 1.5rem 3rem rgba(34, 58, 77, 0.08);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
  }
  /* Soft, low-opacity reuse of the site's existing blob motif -- texture
     rather than a second illustration to source/maintain. Bleeds off the
     bottom-right corner, clipped by the card's overflow:hidden. */
  #what-to-expect-7134 .cs-expect-decor {
    width: clamp(18rem, 60vw, 26rem);
    height: auto;
    opacity: 0.35;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(30%, 30%);
    pointer-events: none;
    z-index: 0;
  }
  /* Reserves the height for the tallest panel so the crossfade below
     doesn't jump the page around; sized generously for 3-line copy. */
  #what-to-expect-7134 .cs-expect-panel-stack {
    min-height: 15rem;
    position: relative;
    z-index: 1;
  }
  /* All four panels stack in the same box; only the active one is
     visible/interactive. Fade + slight rise, not a hard cut. */
  #what-to-expect-7134 .cs-expect-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(0.5rem);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  #what-to-expect-7134 .cs-expect-panel.cs-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
  }
  #what-to-expect-7134 .cs-expect-icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--accentText);
    margin-bottom: 1.25rem;
  }
  #what-to-expect-7134 .cs-expect-h3 {
    font-family: var(--headingFont);
    font-size: 1.375rem;
    font-weight: 300;
    line-height: 1.3em;
    margin: 0 0 0.75rem;
    color: var(--navy);
  }
  #what-to-expect-7134 .cs-expect-text {
    font-family: var(--bodyFont);
    font-size: 1rem;
    line-height: 1.5em;
    max-width: 30rem;
    margin: 0;
    color: rgba(34, 58, 77, 0.75);
  }

  /* Prev/Next -- plain text-and-arrow, not full buttons, so they read as
     wayfinding rather than another CTA competing with the real ones */
  #what-to-expect-7134 .cs-expect-nav {
    width: 100%;
    max-width: 30rem;
    margin: 1.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(34, 58, 77, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
  }
  #what-to-expect-7134 .cs-expect-nav button {
    font-family: var(--bodyFont);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: none;
    border: none;
    color: var(--navy);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s, opacity 0.3s;
  }
  #what-to-expect-7134 .cs-expect-nav button svg {
    width: 1rem;
    height: 1rem;
  }
  #what-to-expect-7134 .cs-expect-nav button:hover:not(:disabled) {
    color: var(--accentText);
  }
  #what-to-expect-7134 .cs-expect-nav button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
}

/* Tablet - 768px: show the text label under each step number */
@media only screen and (min-width: 48rem) {
  #what-to-expect-7134 .cs-expect-step-label {
    display: block;
  }
}

/* Desktop - 64rem: panel becomes a wide card (icon beside the text rather
   than stacked above it) with a fixed min-height so switching steps
   doesn't shift the page, and the Back/Next controls move into its
   bottom-right corner instead of below it */
@media only screen and (min-width: 64rem) {
  #what-to-expect-7134 .cs-expect-journey {
    display: flex;
    flex-direction: column;
  }
  #what-to-expect-7134 .cs-expect-steps {
    margin-bottom: 2.5rem;
  }
  /* Same capitalised/tracked treatment as the nav links (#cs-navigation
     .cs-li-link in styles.css) rather than the smaller plain-case label
     used at mobile/tablet widths */
  #what-to-expect-7134 .cs-expect-step-label {
    font-size: 13px;
    line-height: 21.45px;
    font-weight: 500;
    letter-spacing: 1.04px;
    word-spacing: 0;
    text-transform: uppercase;
  }
  #what-to-expect-7134 .cs-expect-step.cs-active .cs-expect-step-label {
    font-weight: 700;
  }
  #what-to-expect-7134 .cs-expect-panels {
    padding: 3rem 4rem;
  }
  #what-to-expect-7134 .cs-expect-panel-stack {
    min-height: 9rem;
  }
  /* Icon sits beside the text instead of stacked above it -- the absolute
     panel itself needs to be wide enough for that row to have room, sits
     flush against the (wider, white) card's left edge rather than centred
     within it, and is vertically centred within the panel-stack's height */
  #what-to-expect-7134 .cs-expect-panel {
    max-width: 34rem;
    left: 0;
    top: 50%;
    transform: translateY(calc(-50% + 0.5rem));
    flex-direction: row;
    align-items: center;
    text-align: left;
  }
  /* Overrides the mobile rule's position:relative -- that rule takes the
     active panel out of the stack's absolute positioning so its height
     pushes the page, which is fine for the mobile stacked layout, but here
     it defeats the top:50%/translateY centering above. Keeping it
     absolute lets it centre within the fixed-height stack instead. */
  #what-to-expect-7134 .cs-expect-panel.cs-active {
    position: absolute;
    transform: translateY(-50%);
  }
  #what-to-expect-7134 .cs-expect-icon {
    flex: none;
    margin-bottom: 0;
    margin-right: 2rem;
  }
  #what-to-expect-7134 .cs-expect-nav {
    max-width: none;
    margin: 0;
    padding: 0;
    border-top: none;
    position: absolute;
    right: 4rem;
    bottom: 2rem;
    width: auto;
    gap: 1.5rem;
  }
}