/*-- -------------------------- -->
<---            Variants         -->
<--- -------------------------- -*/
/* Opt-in alternate layouts for reskinned client sites. Nothing in here
   runs by default -- each block only activates when its modifier class
   is added to the section in index.html, and this file is linked AFTER
   the section's own stylesheet so its rules win on equal specificity.
   See THEMING.md for how/when to reach for each one. */


/* ============================================ */
/* Hero -- Variant B: Centered, no photo         */
/* ============================================ */
/* For a client with no usable headshot/photo yet, or one who wants a
   quieter, editorial-feeling hero. Activate with:
   <section id="hero-2274" class="cs-hero-centered"> and remove/keep the
   .cs-image-group markup -- it's hidden either way. */
@media only screen and (min-width: 0rem) {
  #hero-2274.cs-hero-centered .cs-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #hero-2274.cs-hero-centered .cs-content {
    align-items: center;
    max-width: 43.75rem;
    text-align: center;
  }
  #hero-2274.cs-hero-centered .cs-title {
    max-width: 100%;
  }
  #hero-2274.cs-hero-centered .cs-text {
    max-width: 100%;
  }
  #hero-2274.cs-hero-centered .cs-button-group {
    justify-content: center;
  }
  #hero-2274.cs-hero-centered .cs-image-group {
    display: none;
  }
  /* Single blob, larger and centred behind the copy instead of two
     corner-peeking copies */
  #hero-2274.cs-hero-centered .cs-blob-2 {
    display: none;
  }
  #hero-2274.cs-hero-centered .cs-blob {
    width: clamp(30rem, 70vw, 50rem);
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
  }
}
@media only screen and (min-width: 64rem) {
  /* Undo the base desktop side-by-side layout */
  #hero-2274.cs-hero-centered .cs-container {
    flex-direction: column;
  }
  #hero-2274.cs-hero-centered .cs-content {
    flex: none;
  }
}


/* ============================================ */
/* Hero -- Full-bleed background try-outs        */
/* ============================================ */
/* Bespoke SVG backgrounds (see /hero-backgrounds) that replace the
   corner-blob treatment entirely -- one class per candidate, add ONE to
   #hero-2274 to preview it (works alongside cs-hero-centered). Hides the
   .cs-blob layers since the background now covers that role. All four
   files share a 900x600 canvas so the same cover/position rule fits them
   all -- add a new one by dropping the file in /hero-backgrounds and
   copying one of these blocks with its filename. */
@media only screen and (min-width: 0rem) {
  #hero-2274[class*="cs-hero-bg-"] .cs-blob {
    display: none;
  }
  #hero-2274.cs-hero-bg-wave1 {
    background-image: url('../hero-backgrounds/verticalwavebackground1.svg');
  }
  #hero-2274.cs-hero-bg-layeredwaves1 {
    background-image: url('../hero-backgrounds/verticallayeredwavesbackground1.svg');
  }
  #hero-2274.cs-hero-bg-blurrygradient1 {
    background-image: url('../hero-backgrounds/blurrygradientbackground1.svg');
  }
  #hero-2274.cs-hero-bg-cornerblobs1 {
    background-image: url('../hero-backgrounds/cornerblobsbackground1.svg');
  }
  #hero-2274[class*="cs-hero-bg-"] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}


/* ============================================ */
/* Services -- Variant B: Minimal numbered list  */
/* ============================================ */
/* Leaner alternative to the bordered art-cards -- reads closer to the
   Getting Started section's treatment. Good for a client whose brand is
   more understated/clinical than warm-and-illustrated. Activate with:
   <ul class="cs-card-group cs-services-minimal"> (the .cs-item-art
   images can stay in the markup -- this variant hides them). */
@media only screen and (min-width: 0rem) {
  #services-3312 .cs-card-group.cs-services-minimal {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  #services-3312 .cs-services-minimal .cs-item {
    width: 100%;
    padding: 1.75rem 0;
    background: none;
    border: none;
    border-top: 1px solid rgba(34, 58, 77, 0.15);
    border-radius: 0;
    transition: padding-left 0.3s ease, border-color 0.3s ease;
  }
  #services-3312 .cs-services-minimal .cs-item:last-child {
    border-bottom: 1px solid rgba(34, 58, 77, 0.15);
  }
  #services-3312 .cs-services-minimal .cs-item:hover {
    padding-left: 0.5rem;
    transform: none;
    box-shadow: none;
    border-top-color: var(--accentText);
  }
  #services-3312 .cs-services-minimal .cs-item-art {
    display: none;
  }
}
@media only screen and (min-width: 48rem) {
  #services-3312 .cs-card-group.cs-services-minimal {
    grid-template-columns: 1fr;
  }
}