/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-2274 {
    /* Top padding clears the floating nav (top: 2rem + nav height). Extra
       bottom padding lifts the centred content up, away from the
       accreditation card that overlaps the hero's lower edge. */
    padding: clamp(12rem, 27vw, 16rem) 1rem clamp(9rem, 17vw, 13rem);
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #f2ead5;
    position: relative;
    z-index: 1;
  }
  /* Decorative blob, top-right corner, behind the content -- same
     treatment as the Services section's blob */
  #hero-2274 .cs-blob {
    width: clamp(24rem, 55vw, 42rem);
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(30%, -35%);
    z-index: -1;
    pointer-events: none;
  }
  /* Second copy of the same blob, mirrored into the bottom-left corner --
     same file so the colour is an exact match */
  #hero-2274 .cs-blob-2 {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    transform: translate(-30%, 35%) scale(-1);
  }
  #hero-2274 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    position: relative;
  }
  #hero-2274 .cs-content {
    text-align: left;
    width: 100%;
    max-width: 39.375rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 10;
  }
  /* h1 is kept for SEO (it's still the page's real "Anxiety & Trauma
     Therapy in Nottingham" title) but displayed as a small eyebrow -- the
     h2 below carries the visual main heading instead. */
  #hero-2274 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--secondaryDark);
    margin: 0 0 1rem;
    display: block;
  }
  #hero-2274 .cs-title {
    /* 39px - 61px */
    font-family: 'Self Modern', serif;
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 300;
    line-height: 1.2em;
    width: 100%;
    max-width: 17ch;
    margin: 0 0 1rem;
    color: #223a4d;
    position: relative;
  }
  /* Last word: plain orange italic instead of the highlighter mark used
     elsewhere on the site */
  #hero-2274 .cs-title span {
    color: var(--secondaryDark);
    font-style: italic;
  }
  #hero-2274 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    line-height: 1.5em;
    width: 100%;
    max-width: 43.75rem;
    /* 28px - 40px */
    margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
    color: var(--bodyTextColor);
    opacity: 1;
  }
  #hero-2274 .cs-image-group {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 10;
  }
  #hero-2274 .cs-picture {
    width: 100%;
    max-width: 30rem;
    aspect-ratio: 4 / 3;
    border-radius: 0.75rem;
    overflow: hidden;
    display: block;
  }
  #hero-2274 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  /* Phone line under the button group */
  #hero-2274 .cs-phone-link {
    font-family: 'Gotham', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.04px;
    word-spacing: 0;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 0.5rem;
    color: var(--secondaryDark);
    margin-top: 1.5rem;
    display: block;
  }
}

/* Mobile/tablet (below the 64rem side-by-side layout): the image sits
   stacked above the button group instead of after it. cs-content is
   unwrapped with display:contents so its children become siblings of
   cs-image-group in the same flex column, letting them all be reordered
   together with the order property -- same trick used in About. */
@media only screen and (max-width: 63.9375rem) {
  #hero-2274 .cs-container {
    gap: 0;
  }
  #hero-2274 .cs-content {
    display: contents;
  }
  #hero-2274 .cs-topper {
    order: 1;
  }
  #hero-2274 .cs-title {
    order: 2;
  }
  #hero-2274 .cs-text {
    order: 3;
  }
  #hero-2274 .cs-image-group {
    order: 4;
    margin-bottom: 2rem;
  }
  #hero-2274 .cs-button-group {
    order: 5;
  }
  #hero-2274 .cs-phone-link {
    order: 6;
  }
}

/* Mobile only - below 48rem: the full-viewport-height + heavy padding
   above leaves a lot of empty space around the shorter amount of copy
   on small screens, so it's shortened here without touching the
   taller desktop hero. */
@media only screen and (max-width: 47.9375rem) {
  #hero-2274 {
    padding: clamp(9rem, 26vw, 11rem) 1rem clamp(5rem, 14vw, 7rem);
    min-height: 0;
  }
  #hero-2274 .cs-text {
    margin-bottom: clamp(2.25rem, 6vw, 3rem);
  }
}

/* Tablet - 768px: single-column content, so keep it left-aligned rather
   than letting the mobile rule's align-items:center centre the whole
   block in the middle of the (now empty) second half of the hero. */
@media only screen and (min-width: 48rem) {
  #hero-2274 .cs-container {
    align-items: flex-start;
  }
}

/* Desktop - 1024px: content and image side by side, image on the right */
@media only screen and (min-width: 64rem) {
  #hero-2274 .cs-container {
    flex-direction: row;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  #hero-2274 .cs-content {
    flex: 1;
  }
  #hero-2274 .cs-image-group {
    flex: 1;
    justify-content: flex-end;
  }
  #hero-2274 .cs-picture {
    max-width: 34rem;
  }
}