@charset "UTF-8";

/* =========================================================
   RH MEDIA LAYOUT SYSTEM
   STRUCTURE ONLY
   PREFIX: l-
========================================================= */

/* =========================================================
   PAGE
========================================================= */

.l-page{
  position: relative;
  min-height: 100%;
  background-image: var(--bg-grid-blueprint);
  background-size: var(--bg-grid-size-md);
}

.l-page > main{
  flex: 1 0 auto;
}

/* =========================================================
   CONTAINERS
========================================================= */

.l-container{
  width: min(100% - (var(--space-container-x) * 2), var(--container-max));
  margin-inline: auto;
}

.l-container-wide{
  width: min(100% - (var(--space-container-x) * 2), var(--container-wide));
  margin-inline: auto;
}

.l-center{
  width: min(100%, var(--content-max));
  margin-inline: auto;
}

/* =========================================================
   SECTION SURFACE SYSTEM
========================================================= */

.l-section{
  position: relative;
  padding-block: var(--space-section-y);
  background: transparent;
  z-index: 0;
}

.l-section-sm{
  padding-block: var(--space-section-y-sm);
}

.l-section-lg{
  padding-block: var(--space-section-y-lg);
}

/* =========================================================
   SECTION MODES
========================================================= */

.l-section--base{
  background: var(--bg-section);
}

.l-section--alt{
  background: var(--bg-card-alt);
}

.l-section--glass{
  background: var(--effect-glass-bg);
  border-block: var(--stroke-1) solid var(--effect-glass-border);
  backdrop-filter: blur(var(--effect-glass-blur));
}

.l-section--dark{
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.l-section--grid{
  background:
    var(--effect-grid-blueprint),
    var(--bg-section);
  background-size: var(--bg-grid-size-md);
}

.l-section--hero{
  overflow: hidden;
  background:
    radial-gradient(
      circle at 72% 28%,
      rgba(var(--brand-accent-rgb) / var(--a-08)) 0%,
      transparent 36%
    ),
    radial-gradient(
      circle at 18% 78%,
      rgba(var(--brand-primary-rgb) / var(--a-06)) 0%,
      transparent 34%
    ),
    var(--effect-grid-blueprint),
    var(--bg-section);
  background-size:
    auto,
    auto,
    var(--bg-grid-size-md),
    auto;
  padding-bottom: var(--space-10);
}

.l-section--cta{
  background:
    linear-gradient(
      180deg,
      rgba(var(--brand-primary-rgb) / var(--a-96)) 0%,
      rgba(17 24 29 / var(--a-100)) 100%
    );
  color: var(--text-on-dark);
}

/* =========================================================
   OPTIONAL SECTION FX
========================================================= */

.l-section--border-top{
  border-top: var(--stroke-1) solid var(--color-border);
}

.l-section--border-bottom{
  border-bottom: var(--stroke-1) solid var(--color-border);
}

.l-section--shadow{
  box-shadow: var(--shadow-sm);
}

.l-section--grid-soft::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--effect-grid-blueprint);
  background-size: var(--bg-grid-size-md);
  opacity: var(--a-06);
  pointer-events: none;
  z-index: -1;
}

.l-section--glow-accent::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(var(--brand-accent-rgb) / var(--a-10)) 0%,
      transparent 42%
    );
  pointer-events: none;
  z-index: -1;
}

.l-section--glow-primary::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 100%,
      rgba(var(--brand-primary-rgb) / var(--a-10)) 0%,
      transparent 48%
    );
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 639px){
  .l-section{
    padding-block: clamp(var(--space-6), 8vw, var(--space-section-y));
  }

  .l-section-sm{
    padding-block: clamp(var(--space-4), 6vw, var(--space-section-y-sm));
  }

  .l-section-lg{
    padding-block: clamp(var(--space-7), 10vw, var(--space-section-y-lg));
  }
}

/* =========================================================
   DIVIDER LAYOUT
========================================================= */

.l-divider{
  position: relative;
  margin-top: calc(var(--space-6) * -1);
  margin-bottom: calc(var(--space-6) * -1);
  padding-block: var(--space-4);
  z-index: 2;
}

.l-divider::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--brand-primary-rgb) / var(--a-03)) 0%,
    rgba(var(--brand-primary-rgb) / var(--a-06)) 50%,
    rgba(var(--brand-primary-rgb) / var(--a-03)) 100%
  );
  pointer-events: none;
}

.l-divider .l-container{
  position: relative;
  display: grid;
  justify-items: center;
  z-index: 1;
}

/* =========================================================
   FLOW
========================================================= */

.l-stack > * + *{
  margin-top: var(--space-stack-gap);
}

.l-stack-sm > * + *{
  margin-top: var(--space-3);
}

.l-stack-lg > * + *{
  margin-top: var(--space-6);
}

.l-cluster{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-inline-gap);
}

.l-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-inline-gap);
  margin-top: var(--space-2);
}

.l-inline{
  display: flex;
  align-items: center;
  gap: var(--space-inline-gap);
}

.l-inline-wrap{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-inline-gap);
}

@media (max-width: 639px){
  .l-actions{
    gap: var(--space-4);
  }

  .l-actions > *{
    width: 100%;
  }
}

/* =========================================================
   GRID FOUNDATIONS
========================================================= */

.l-grid,
.l-grid-2,
.l-grid-3,
.l-grid-4,
.l-cardGrid,
.l-gallery,
.l-gallery-grid,
.l-formRow,
.l-formStack,
.l-split,
.l-sidebar,
.l-mediaText,
.l-feature,
.l-centerItems{
  display: grid;
  min-width: 0;
}

.l-grid > *,
.l-grid-2 > *,
.l-grid-3 > *,
.l-grid-4 > *,
.l-cardGrid > *,
.l-gallery > *,
.l-gallery-grid > *,
.l-formRow > *,
.l-formStack > *,
.l-split > *,
.l-sidebar > *,
.l-mediaText > *,
.l-feature > *,
.l-centerItems > *{
  min-width: 0;
}

.l-grid,
.l-grid-2,
.l-grid-3,
.l-grid-4,
.l-cardGrid,
.l-gallery-grid,
.l-formRow,
.l-split,
.l-sidebar,
.l-mediaText,
.l-feature{
  gap: var(--gap-grid);
}

.l-gallery{
  gap: var(--space-8);
}

.l-formStack{
  gap: var(--space-card-gap);
}

.l-grid-auto{
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* =========================================================
   COMMON STRUCTURAL PATTERNS
========================================================= */

.l-split,
.l-sidebar,
.l-mediaText,
.l-feature{
  grid-template-columns: 1fr;
}

.l-grid-2,
.l-grid-3,
.l-grid-4,
.l-cardGrid,
.l-gallery-grid{
  grid-template-columns: 1fr;
}

.l-formRow{
  grid-template-columns: 1fr;
  align-items: start;
}

.l-formRow--tight{
  gap: var(--space-3);
}

.l-narrow{
  max-width: var(--content-max);
}

.l-measure{
  max-width: 70ch;
}

.l-centerBlock{
  margin-inline: auto;
}

.l-full{
  width: 100%;
}

/* =========================================================
   ALIGNMENT
========================================================= */

.l-centerItems{
  justify-items: center;
  align-items: center;
}

.l-start{
  justify-items: start;
  align-items: start;
}

.l-place-center{
  place-items: center;
}

.l-self-center{
  align-self: center;
}

.l-self-start{
  align-self: start;
}

.l-self-end{
  align-self: end;
}

/* =========================================================
   GLOBAL RESPONSIVE GRID
========================================================= */

@media (min-width: 640px){
  .l-grid-2{
    grid-template-columns: var(--cols-2);
  }

  .l-cardGrid{
    grid-template-columns: var(--cols-2);
  }

  .l-gallery-grid{
    grid-template-columns: var(--cols-2);
  }

  .l-formRow{
    grid-template-columns: var(--cols-2);
  }
}

@media (min-width: 768px){
  .l-sidebar{
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }

  .l-mediaText{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .l-feature{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
}

@media (min-width: 1024px){
  .l-grid-3{
    grid-template-columns: var(--cols-3);
  }

  .l-grid-4{
    grid-template-columns: var(--cols-4);
  }

  .l-cardGrid{
    grid-template-columns: var(--cols-3);
  }

  .l-gallery-grid{
    grid-template-columns: var(--cols-3);
  }

  .l-split{
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }

  .l-sidebar{
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: start;
  }

  .l-mediaText{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .l-feature{
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
  }
}

/* =========================================================
   HOME HERO
   LAYOUT ONLY
========================================================= */

.p-home-hero{
  position: relative;
}

.p-home-hero > .l-container{
  position: relative;
  z-index: 1;
}

.p-home-hero .l-split{
  align-items: center;
  gap: var(--space-8);
}

.p-home-hero__content,
.p-home-hero__visual{
  min-width: 0;
}

@media (min-width: 1024px){
  .p-home-hero .l-split{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }

  .p-home-hero__content{
    align-self: center;
  }

  .p-home-hero__visual{
    align-self: center;
    justify-self: end;
    width: 100%;
    max-width: var(--content-max);
  }
}

@media (max-width: 1023px){
  .p-home-hero .l-split{
    gap: var(--space-7);
  }

  .p-home-hero__visual{
    justify-self: stretch;
    width: 100%;
  }
}

/* =========================================================
   HOME SERVICES
   LAYOUT ONLY
========================================================= */

#services,
.p-home-services{
  position: relative;
}

.p-home-services::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-surface-glint-reverse);
  pointer-events: none;
  z-index: 0;
}

.c-services{
  display: grid;
  gap: var(--space-6);
}

.c-services__intro{
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
  max-width: var(--content-wide);
  margin-inline: auto;
}

.c-servicesCarousel{
  display: grid;
  gap: var(--space-5);
}

.c-servicesCarousel__viewport{
  overflow: hidden;
  min-width: 0;
}

.c-servicesCarousel__track{
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
  will-change: transform;
  transition: transform var(--motion-base);
}

.c-servicesCarousel__slide{
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
}

.c-servicesCarousel__head{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
}

@media (min-width: 768px){
  .c-services{
    gap: var(--space-7);
  }

  .c-servicesCarousel__slide{
    flex-basis: calc((100% - (var(--space-5) * 2)) / 3);
  }
}

@media (min-width: 1280px){
  .c-services{
    gap: var(--space-8);
  }
}

/* =========================================================
   BLUEPRINT SEAM
========================================================= */

.l-blueprint-seam{
  position: relative;
  width: 100%;
  padding-block: var(--space-4);
}

.l-blueprint-seam .l-container{
  display: flex;
  justify-content: center;
}

/* =========================================================
   STRUCTURE LAYOUT
========================================================= */

.l-structure{
  position: relative;
  width: 100%;
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
  background:
    var(--grad-aura-primary-sm),
    var(--grad-aura-accent-md),
    var(--effect-glass-bg-subtle);
  overflow: hidden;
}

.l-structure::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--effect-surface-glint-soft);
  pointer-events: none;
}

.l-structure__grid{
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-8);
}

.l-structure__content{
  min-width: 0;
}

.l-structure__media{
  min-width: 0;
  display: flex;
  justify-content: stretch;
}

@media (max-width: 980px){
  .l-structure__grid{
    grid-template-columns: 1fr;
  }

  .l-structure__media{
    justify-content: flex-start;
  }
}

/* =========================================================
   HOME STRUCTURE
   SCOPED LAYOUT
========================================================= */

.p-home-structure{
  position: relative;
}

.p-home-structure .l-structure__grid{
  align-items: start;
}

.p-home-structure .l-structure__content{
  align-self: start;
  min-width: 0;
}

.p-home-structure .l-structure__media{
  align-self: start;
  min-width: 0;
  display: flex;
  justify-content: stretch;
}

@media (min-width: 1024px){
  .p-home-structure .l-structure__media{
    margin-top: var(--space-7);
  }
}

/* =========================================================
   DIAGNOSTIC SECTION
   LAYOUT ONLY
========================================================= */

.p-diagnostic{
  position: relative;
}

.p-diagnostic__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-layout);
  align-items: start;
}

.p-diagnostic__context,
.p-diagnostic__tool,
.c-diagnostic-tool,
.c-diagnostic-tool__panel,
.c-diagnostic-tool__form,
.c-diagnostic-tool__stage,
.c-diagnostic-tool__step,
.c-diagnostic-tool__step-card,
.c-diagnostic-tool__fieldset,
.c-diagnostic-tool__options{
  min-width: 0;
}

.p-diagnostic__context{
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.p-diagnostic__tool{
  display: grid;
  align-content: start;
}

.c-diagnostic-tool{
  display: grid;
  gap: var(--space-component-gap);
  align-items: start;
}

.c-diagnostic-tool__panel{
  display: grid;
  gap: var(--space-component-gap);
  align-content: start;
}

.c-diagnostic-tool__header,
.c-diagnostic-tool__progress,
.c-diagnostic-tool__step-header{
  display: grid;
  gap: var(--space-stack-gap-sm);
  min-width: 0;
}

.c-diagnostic-tool__progress-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-stack-gap-sm);
  min-width: 0;
}

.c-diagnostic-tool__progress-bar{
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.c-diagnostic-tool__progress-fill{
  display: block;
  width: 25%;
}

.c-diagnostic-tool__form{
  display: grid;
  align-content: start;
}

.c-diagnostic-tool__stage{
  display: grid;
  gap: var(--space-component-gap);
}

.c-diagnostic-tool__step-card{
  display: grid;
  gap: var(--space-card-gap);
  min-width: 0;
}

.c-diagnostic-tool__options{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-stack-gap-sm);
  min-width: 0;
}

.c-diagnostic-tool__controls{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-stack-gap-sm);
  min-width: 0;
}

.c-diagnostic-tool__status{
  min-height: 1px;
  min-width: 0;
}

@media (min-width: 768px) and (max-width: 1199px){
  .p-diagnostic__grid{
    grid-template-columns: minmax(0, 1fr);
  }

  .c-diagnostic-tool{
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1200px){
  .p-diagnostic__grid{
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
    align-items: start;
  }

  .p-diagnostic__tool{
    grid-column: 2;
  }

  .c-diagnostic-tool__stage{
    gap: var(--space-stack-gap);
  }

  .c-diagnostic-tool__step-card{
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-component-gap);
    align-items: start;
  }

  .c-diagnostic-tool__step-header,
  .c-diagnostic-tool__fieldset{
    grid-column: 1 / -1;
    align-self: start;
  }

  .c-diagnostic-tool__options{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .c-diagnostic-tool__options .c-diagnostic-tool__option:last-child:nth-child(odd){
    grid-column: 1 / -1;
  }

  .c-diagnostic-tool__option-ui{
    height: 100%;
  }
}

@media (max-width: 767px){
  .p-diagnostic__grid{
    gap: var(--space-component-gap);
  }

  .c-diagnostic-tool{
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-card-gap);
  }

  .c-diagnostic-tool__panel{
    gap: var(--space-card-gap);
  }

  .c-diagnostic-tool__stage,
  .c-diagnostic-tool__step-card{
    gap: var(--space-card-gap-sm);
  }
}

/* =========================================================
   ANALYZER LAYOUT
========================================================= */

.c-analyzer{
  width: 100%;
  min-width: 0;
}

.c-analyzer__panel{
  display: grid;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  min-width: 0;
}

.c-analyzer__header{
  display: grid;
  gap: var(--space-3);
  width: 100%;
}

.c-analyzer__progress{
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.c-analyzer__stage,
.c-analyzer__form,
.c-analyzer__results,
.c-analyzer__score,
.c-analyzer__diagnosis,
.c-analyzer__recommendation,
.c-analyzer__logic,
.c-analyzer__logic-panel,
.c-analyzer__logic-list{
  width: 100%;
  min-width: 0;
}

.c-analyzer__card{
  display: grid;
  gap: var(--space-5);
  width: 100%;
  min-width: 0;
}

.c-analyzer__card-header{
  display: grid;
  gap: var(--space-3);
  width: 100%;
}

.c-analyzer__options{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  width: 100%;
}

.c-analyzer__option{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
}

.c-analyzer__score{
  display: grid;
  gap: var(--space-2);
}

.c-analyzer__diagnosis,
.c-analyzer__recommendation{
  display: grid;
  gap: var(--space-3);
}

.c-analyzer__logic{
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.c-analyzer__logic-panel,
.c-analyzer__logic-list{
  display: grid;
  gap: var(--space-4);
}

.c-analyzer__logic-step{
  margin: 0;
}

.c-analyzer [hidden]{
  display: none !important;
}

@media (min-width: 768px){
  .c-analyzer__options{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-analyzer__score{
    grid-template-columns: auto 1fr;
    align-items: end;
    column-gap: var(--space-4);
  }
}

@media (min-width: 1200px){
  .c-analyzer__panel{
    max-width: var(--container-wide);
  }
}

/* =========================================================
   PRICING LAYOUT
========================================================= */

.l-pricing__grid{
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--space-6);
  align-items: stretch;
  min-width: 0;
}

.l-pricing__grid > *{
  min-width: 0;
}

.l-pricing__grid > :nth-child(1){
  grid-column: 1;
  grid-row: 1;
}

.l-pricing__grid > :nth-child(2){
  grid-column: 2;
  grid-row: 1 / span 2;
}

.l-pricing__grid > :nth-child(3){
  grid-column: 1;
  grid-row: 2;
}

@media (max-width: 1024px){
  .l-pricing__grid{
    grid-template-columns: 1fr;
  }

  .l-pricing__grid > :nth-child(1),
  .l-pricing__grid > :nth-child(2),
  .l-pricing__grid > :nth-child(3){
    grid-column: auto;
    grid-row: auto;
  }
}



/* =========================================================
   HOME CONTACT
   LAYOUT ONLY
========================================================= */

.p-home-contact__grid{
  display: grid;
  justify-items: center;
  width: 100%;
}

.js-contact-form{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

.p-home-contact__timelineList{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 1024px){
  .p-home-contact__steps{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    align-items: start;
    width: 100%;
  }

  .p-home-contact__actions{
    grid-column: 2;
    justify-self: center;
    text-align: center;
    margin-top: var(--space-8);
    width: 100%;
    max-width: 360px;
  }

  .p-home-contact__timeline{
    grid-column: 1 / span 3;
    width: 100%;
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    border-top: var(--stroke-1) solid var(--color-border);
  }

  .p-home-contact__timelineList{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================================
   HOME / WORK PROOF
   LAYOUT ONLY
========================================================= */

.p-work-proof{
  padding-block: var(--space-8);
}

.p-work-proof .l-stack-lg > * + *{
  margin-top: var(--space-2);
}

.p-work-proof__shell{
  position: relative;
  z-index: var(--z-base);
}

.p-work-proof__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

.p-work-proof__topRow{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

.p-work-proof__spine,
.p-work-proof__stage,
.p-work-proof__spec{
  min-width: 0;
}

.p-work-proof__eyebrow{
  max-width: max-content;
}

.p-work-proof__title{
  max-width: 16ch;
}

.p-work-proof__intro{
  max-width: 72ch;
}

.p-work-proof__bgGrid,
.p-work-proof__bgOverlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

@media (min-width: 768px){
  .p-work-proof__topRow{
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
  }

  .p-work-proof__spine{
    grid-column: 1;
    grid-row: 1;
  }

  .p-work-proof__stage{
    grid-column: 2;
    grid-row: 1;
  }

  .p-work-proof__spec{
    grid-column: 1;
    grid-row: auto;
  }
}

@media (min-width: 1100px){
  .p-work-proof__topRow{
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: var(--space-7);
  }

  .p-work-proof__spine{
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  .p-work-proof__stage{
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .p-work-proof__spec{
    grid-column: 1;
    grid-row: auto;
    align-self: start;
  }
}

/* =========================================================
   SERVICES HERO LAYOUT
========================================================= */

.p-services-page__heroGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

.p-services-page__heroContent,
.p-services-page__heroMedia{
  min-width: 0;
}

.p-services-page__heroContent{
  align-self: center;
}

.p-services-page__heroMedia{
  align-self: center;
}

@media (min-width: 1024px){

  .p-services-page__heroGrid{
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    gap: var(--space-9);
  }
}

/* =========================================================
   MAIN SERVICES (TIER RAIL) LAYOUT
========================================================= */

.p-services-page__mainServicesIntro{
  max-width: var(--content-wide);
  margin-inline: auto;
  margin-bottom: var(--space-9);
}

.p-services-page__mainServicesRail{
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: 1fr;
  align-items: stretch;
}

.p-services-page__mainServicesRail > *{
  min-width: 0;
}

/* =========================================================
   CARD FLOW CONTROL
========================================================= */

.c-mainServiceCard{
  display: flex;
  flex-direction: column;
}

.c-mainServiceCard__head{
  flex: 0 0 auto;
}

.c-mainServiceCard__list{
  flex: 1 1 auto;
}

.c-mainServiceCard__foot{
  margin-top: auto;
}

/* =========================================================
   BRIDGE (CTA UNDER RAIL)
========================================================= */

.p-services-page__mainServicesBridge{
  margin-top: var(--space-9);
}

.c-mainServices__bridge{
  max-width: var(--content-narrow);
  margin-inline: auto;
  text-align: center;
}

.c-mainServices__bridgeActions{
  justify-content: center;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (min-width: 768px){

  .p-services-page__mainServicesRail{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px){

  .p-services-page__mainServicesRail{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px){

  .p-services-page__mainServicesIntro{
    margin-bottom: var(--space-8);
  }

  .p-services-page__mainServicesBridge{
    margin-top: var(--space-8);
  }
}

/* =========================================================
   SERVICES BUILD TOOL LAYOUT
========================================================= */

.p-services-page__toolGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

.p-services-page__toolIntro,
.p-services-page__toolEngine,
.p-services-page__toolOutput{
  min-width: 0;
}

.p-services-page__toolIntro{
  max-width: var(--content-wide);
}

/* =========================================================
   TOOL SHELL
========================================================= */

.c-buildTool{
  display: grid;
  gap: var(--space-6);
  
}

.c-buildTool__form{
  display: grid;
}

.c-buildTool__step{
  display: grid;
  gap: var(--space-6);
}

.c-buildTool__step.is-hidden{
  display: none;
}

.c-buildTool__group{
  display: grid;
  gap: var(--space-4);
}

.c-buildTool__options{
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: 1fr;
}

.c-buildTool__row{
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: 1fr;
}

.c-buildTool__field{
  min-width: 0;
}

.c-buildTool__actions{
  align-items: stretch;
}

/* =========================================================
   PROGRESS
========================================================= */

.c-buildTool__progress{
  display: grid;
  gap: var(--space-3);
}

.c-buildTool__progressBar{
  position: relative;
  width: 100%;
  min-height: var(--space-2);
  overflow: hidden;
}

.c-buildTool__progressFill{
  display: block;
  width: 0;
  height: 100%;
}

/* =========================================================
   PROCESSING
========================================================= */

.c-buildTool__processing{
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding-block: var(--space-7);
  text-align: center;
}

.c-buildTool__processing.is-hidden{
  display: none;
}

/* =========================================================
   RESULT ZONE
========================================================= */

.c-buildToolResultShell{
  display: grid;
  min-height: 100%;
}

.c-buildToolResultShell__placeholder{
  max-width: var(--content-narrow);
}

.c-buildToolResult{
  display: grid;
  gap: var(--space-5);
}

.c-buildToolResult__includesList,
.c-buildToolResult__addonsList{
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.c-buildToolResult__breakdown{
  display: grid;
  gap: var(--space-3);
}

.c-buildToolResult__row{
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
}

.c-buildToolResult__actions{
  justify-content: flex-start;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (min-width: 768px){

  .c-buildTool__options{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-buildTool__row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-buildToolResult__row{
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (min-width: 1024px){

  .p-services-page__toolGrid{
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-9);
  }

  .p-services-page__toolIntro{
    grid-column: 1 / -1;
    max-width: var(--content-max);
  }
}

@media (max-width: 767px){

  .p-services-page__toolGrid{
    gap: var(--space-7);
  }

  .c-buildTool{
    gap: var(--space-5);
  }

  .c-buildTool__step{
    gap: var(--space-5);
  }
}

/* =========================================================
   SERVICES CONTACT (FAQ + FORM) LAYOUT
========================================================= */

.p-services-page__contactGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

.p-services-page__contactIntro,
.p-services-page__contactFormWrap{
  min-width: 0;
}

/* =========================================================
   FAQ BLOCK
========================================================= */

.c-serviceContact__faq{
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.c-serviceContact__faqItem{
  display: grid;
  gap: var(--space-3);
}

.c-serviceContact__faqAnswer{
  display: none;
}

.c-serviceContact__faqItem.is-open .c-serviceContact__faqAnswer{
  display: block;
}

/* =========================================================
   FORM LAYOUT
========================================================= */

.c-serviceContactForm{
  display: grid;
  gap: var(--space-6);
}

.c-serviceContactForm__fields{
  display: grid;
  gap: var(--space-5);
}

.c-serviceContactForm__row{
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: 1fr;
}

.c-serviceContactForm__field{
  min-width: 0;
}

.c-serviceContactForm__actions{
  align-items: stretch;
}

/* =========================================================
   TOOL SUMMARY
========================================================= */

.c-serviceContact__toolSummary{
  margin-bottom: var(--space-5);
}

.c-serviceContact__toolSummary.is-hidden{
  display: none;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (min-width: 768px){

  .c-serviceContactForm__row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px){

  .p-services-page__contactGrid{
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-9);
  }
}

@media (max-width: 767px){

  .p-services-page__contactGrid{
    gap: var(--space-7);
  }

  .c-serviceContact__faq{
    margin-top: var(--space-5);
  }

  .c-serviceContactForm{
    gap: var(--space-5);
  }
}

/* =========================================================
   ADDITIONAL SERVICES / FILTER GALLERY LAYOUT
========================================================= */

.p-services-page__addonsIntro{
  max-width: var(--content-wide);
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.p-services-page__addonsFilters{
  margin-bottom: var(--space-7);
}

.p-services-page__addonsGallery{
  min-width: 0;
}

.c-addonFilters{
  width: 100%;
}

.c-addonFilters__list{
  width: 100%;
}

.c-addonGallery{
  min-width: 0;
}

.c-addonGallery__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-grid);
}

.c-addonGallery__grid > *{
  min-width: 0;
}

.p-services-page__addonsNote{
  margin-top: var(--space-9);
}

.c-addonsSection__note{
  max-width: var(--content-narrow);
  margin-inline: auto;
  text-align: center;
}

/* =========================================================
   CARD FLOW CONTROL
========================================================= */

.c-addonCard{
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.c-addonCard__head{
  flex: 0 0 auto;
}

.c-addonCard__text{
  flex: 1 1 auto;
}

/* =========================================================
   FILTERED STATES
========================================================= */

.c-addonCard.is-hidden{
  display: none;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (min-width: 768px){

  .c-addonGallery__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px){

  .c-addonGallery__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px){

  .p-services-page__addonsIntro{
    margin-bottom: var(--space-7);
  }

  .p-services-page__addonsFilters{
    margin-bottom: var(--space-6);
  }

  .p-services-page__addonsNote{
    margin-top: var(--space-8);
  }
}

/* Ensure l-divider in layout.css allows the beam to breathe */
.l-divider {
  position: relative;
  margin-block: calc(var(--space-6) * -1); /* Pulls sections together */
  z-index: var(--z-base);
  pointer-events: none;
  padding-top: var(--space-component-gap);
  padding-bottom: var(--space-component-gap);
}

.p-init-page__hero{
  display: flex;
  align-items: center;
  min-height: clamp(var(--space-18), 80vh, var(--space-24));
}

.p-init-page__heroInner{
  width: 100%;
}

.p-init-page__heroShell{
  max-width: var(--content-wide);
  margin-inline: auto;
}

.p-init-page__heroHeader{
  display: grid;
  gap: var(--space-3);
  text-align: center;
}

.p-init-page__heroActions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-inline-gap);
  margin-top: var(--space-5);
}

.p-init-page__modulesInner{
  width: 100%;
}

.p-init-page__modulesGrid{
  margin-top: var(--space-6);
}

.p-init-page__proofInner{
  max-width: var(--content-max);
  margin-inline: auto;
  text-align: center;
}
.p-init-page__footer{
  margin-top: var(--space-8);
}