/* ===================================================================
   HOMEPAGE
   Mirrors the Cascade platform design system (Cascade.Platform.Web.Shared):
   Montserrat, sentence case, weight 300 body / 500 headings, navy text,
   teal subtitles, muted overline eyebrows, hairline borders, 12px surfaces,
   "Quick actions" cards and the "At a glance" insights strip.
   =================================================================== */

main.home {

     background: var(--md-sys-color-surface);
     background-image: none;
     color: var(--md-sys-color-on-surface);
     font-family: var(--md-sys-typescale-body-large-font);
     font-size: var(--md-sys-typescale-body-large-size);
     line-height: var(--md-sys-typescale-body-large-line-height);
     font-weight: var(--md-sys-typescale-body-large-weight);
     letter-spacing: var(--md-sys-typescale-body-large-tracking);
     scroll-snap-type: none;
}

main.home *,
main.home *::before,
main.home *::after {
     box-sizing: border-box;
}

/* Reset the marketing site's global type rules inside the homepage */
main.home h1,
main.home h2,
main.home h3,
main.home p {
     margin: 0;
     padding: 0;
     text-transform: none;
     text-align: left;
}

main.home ul,
main.home ol {
     list-style: none;
     margin: 0;
     padding: 0;
     font-size: inherit;
     line-height: inherit;
     font-weight: inherit;
     text-align: left;
}

main.home img {
     display: block;
     max-width: 100%;
}

.home-container {
     width: 100%;
     max-width: var(--md-comp-content-max-width);
     margin-inline: auto;
     padding-inline: var(--md-comp-page-padding);  /* 16px at compact, 24px from medium */
}

/* ---------- Type ---------- */

.home-eyebrow {
     display: block;
     margin-bottom: var(--md-sys-space-100) !important;
     font-family: var(--md-sys-typescale-label-medium-font);
     font-size: var(--md-sys-typescale-label-medium-size);
     line-height: var(--md-sys-typescale-label-medium-line-height);
     font-weight: var(--md-sys-typescale-label-medium-weight);
     letter-spacing: var(--md-sys-typescale-label-medium-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

.home-eyebrow--light {
     color: var(--md-sys-color-on-primary-container);
}

main.home .home-h1 {
     font-family: var(--md-sys-typescale-display-medium-font);
     font-size: var(--md-sys-typescale-display-medium-size);
     line-height: var(--md-sys-typescale-display-medium-line-height);
     font-weight: var(--md-sys-typescale-display-medium-weight);
     letter-spacing: var(--md-sys-typescale-display-medium-tracking);
     color: var(--md-sys-color-on-surface);
     text-wrap: balance;
}

main.home .home-h2 {
     font-family: var(--md-sys-typescale-headline-large-font);
     font-size: var(--md-sys-typescale-headline-large-size);
     line-height: var(--md-sys-typescale-headline-large-line-height);
     font-weight: var(--md-sys-typescale-headline-large-weight);
     letter-spacing: var(--md-sys-typescale-headline-large-tracking);
     color: inherit;
     text-wrap: balance;
}

main.home .home-subtitle {
     margin-top: var(--md-sys-space-200);
     font-family: var(--md-sys-typescale-title-medium-font);
     font-size: var(--md-sys-typescale-title-medium-size);
     line-height: var(--md-sys-typescale-title-medium-line-height);
     font-weight: var(--md-sys-typescale-title-medium-weight);
     letter-spacing: var(--md-sys-typescale-title-medium-tracking);
     color: var(--md-sys-color-tertiary);
}

main.home .home-subtitle--light {
     color: var(--md-sys-color-on-primary-container);
     margin-top: var(--md-sys-space-100);  /* n */
}

main.home .home-lede,
main.home .home-section-lede {
     margin-top: var(--md-sys-space-200);
     max-width: 34rem;  /* one-off: a reading or image measure */
     font-family: var(--md-sys-typescale-body-large-font);
     font-size: var(--md-sys-typescale-body-large-size);
     line-height: var(--md-sys-typescale-body-large-line-height);
     font-weight: var(--md-sys-typescale-body-large-weight);
     letter-spacing: var(--md-sys-typescale-body-large-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

main.home .home-section-lede {
     max-width: 40rem;  /* one-off: a reading or image measure */
     margin-bottom: var(--md-sys-space-500);
}

/* ---------- Buttons (style guide, Buttons; DEV-233) ----------
   As Admin's buttons.css: S (40px) by default and M (56px, title medium) for a view's
   primary action and the button beside it; fully rounded, no shadow; filled in primary,
   outlined with a primary label on outline variant. They are links that navigate, styled as
   buttons (a site departure, style guide). The press morph is in reset.css; content.css
   has the same rules for .cp-btn. */

.home-actions {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--md-sys-space-150);
     margin-top: var(--md-sys-space-400);
}

.home-btn {
     --btn-height: var(--md-comp-button-s-height);
     --btn-padding: var(--md-comp-button-s-padding);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--md-sys-space-100);
     min-height: var(--btn-height);
     padding: 0 var(--btn-padding);
     border: var(--md-comp-hairline-width) solid transparent;
     border-radius: calc(var(--btn-height) / 2);  /* full, as a length the press morph can ease from (reset.css) */
     font-family: var(--md-sys-typescale-label-large-font);
     font-size: var(--md-sys-typescale-label-large-size);
     line-height: var(--md-sys-typescale-label-large-line-height);
     font-weight: var(--md-sys-typescale-label-large-weight);
     letter-spacing: var(--md-sys-typescale-label-large-tracking);
     text-decoration: none;
     text-transform: none;
     text-align: center;  /* the label wraps at large text sizes rather than overflowing (DEV-237) */
     transition: background-color var(--md-sys-motion-spring-fast-effects),
                 border-color var(--md-sys-motion-spring-fast-effects),
                 color var(--md-sys-motion-spring-fast-effects),
                 border-radius var(--md-sys-motion-spring-fast-spatial);
     /* The state layer is in states.css */
}

.home-btn--m {
     --btn-height: var(--md-comp-button-m-height);
     --btn-padding: var(--md-comp-button-m-padding);
     font-family: var(--md-sys-typescale-title-medium-font);
     font-size: var(--md-sys-typescale-title-medium-size);
     line-height: var(--md-sys-typescale-title-medium-line-height);
     font-weight: var(--md-sys-typescale-title-medium-weight);
     letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}

.home-btn--primary {
     background-color: var(--md-sys-color-primary);
     color: var(--md-sys-color-on-primary);
}

.home-btn--outlined {
     background-color: transparent;
     border-color: var(--md-sys-color-outline-variant);
     color: var(--md-sys-color-primary);
}

/* Navigation that isn't a call to action is an underlined link (style guide, Buttons) */
.home-link {
     display: inline-block;
     font-family: var(--md-sys-typescale-label-large-font);
     font-size: var(--md-sys-typescale-label-large-size);
     line-height: var(--md-sys-typescale-label-large-line-height);
     font-weight: var(--md-sys-typescale-label-large-weight);
     letter-spacing: var(--md-sys-typescale-label-large-tracking);
     color: var(--md-sys-color-primary);
     text-decoration: underline;
     text-underline-offset: 0.2em;
}

.home-link:hover {
     text-decoration-thickness: var(--md-comp-indicator-height);
}

/* ---------- Sections ---------- */

.home-section {
     padding-block: var(--md-sys-space-900);
}

.home-section--tight {
     padding-block: var(--md-sys-space-700) var(--md-sys-space-800);
}

/* Matches the app's .page-layout-band */
.home-band {
     background: var(--md-sys-color-surface-container-low);
}

/* ---------- Hero ---------- */

.home-hero {
     padding-top: calc(var(--app-bar-current-height, var(--md-comp-app-bar-height)) + var(--md-sys-space-900));
     padding-bottom: var(--md-sys-space-900);
     background: var(--md-sys-color-surface);
}

.home-hero-grid {
     display: grid;
     grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
     align-items: center;
     gap: var(--md-sys-space-800);
}

.home-hero-media {
     justify-self: end;
     width: 100%;
     max-width: 440px;  /* one-off: a reading or image measure */
}

.home-hero-media img {
     width: 100%;
     aspect-ratio: 4 / 5;
     object-fit: cover;
     object-position: center 55%;
     border-radius: var(--md-sys-shape-corner-large-increased);
     /* Hero moment (style guide): its own deeper shadow, on the shadow role */
     box-shadow: 0 5px 12px color-mix(in srgb, var(--md-sys-color-shadow) 9%, transparent), 0 24px 48px color-mix(in srgb, var(--md-sys-color-shadow) 18%, transparent);  /* one-off: the hero moment */
}

/* ---------- At a glance (app .home-insight) ---------- */

main.home .home-insights {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
     gap: var(--md-sys-space-400);
     margin-top: var(--md-sys-space-400);
}

.home-insight {
     display: flex;
     flex-direction: column;
     padding-top: var(--md-sys-space-300);
     border-top: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
}

.home-insight__value {
     font-family: var(--md-sys-typescale-headline-medium-font);
     font-size: var(--md-sys-typescale-headline-medium-size);
     line-height: var(--md-sys-typescale-headline-medium-line-height);
     font-weight: var(--md-sys-typescale-headline-medium-weight);
     letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
     color: var(--md-sys-color-on-surface);
}

.home-insight__label {
     margin-top: var(--md-sys-space-100);
     font-family: var(--md-sys-typescale-body-large-font);
     font-size: var(--md-sys-typescale-body-large-size);
     line-height: var(--md-sys-typescale-body-large-line-height);
     font-weight: var(--md-sys-typescale-body-large-weight);
     letter-spacing: var(--md-sys-typescale-body-large-tracking);
     color: var(--md-sys-color-on-surface);
}

.home-insight__sub {
     margin-top: var(--md-sys-space-50);
     font-family: var(--md-sys-typescale-body-small-font);
     font-size: var(--md-sys-typescale-body-small-size);
     line-height: var(--md-sys-typescale-body-small-line-height);
     font-weight: var(--md-sys-typescale-body-small-weight);
     letter-spacing: var(--md-sys-typescale-body-small-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

/* ---------- Quick-action cards (style guide, Containment; DEV-233) ----------
   Outlined cards, as they act: 12px corners, 16px padding, 8px apart, and hover, focus and
   pressed state layers with no ripple. The icon is Admin's quick action's: 40px in primary. */

.home-actions-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: var(--md-comp-card-gap);
}

.home-action {
     display: flex;
     align-items: center;
     gap: var(--md-sys-space-200);
     height: 100%;
     padding: var(--md-comp-card-padding);
     background-color: var(--md-sys-color-surface);
     border: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
     border-radius: var(--md-sys-shape-corner-medium);
     color: inherit;
     text-decoration: none;
     transition: background var(--md-sys-motion-spring-fast-effects),
                 border-color var(--md-sys-motion-spring-fast-effects);
}

/* Material Symbols Rounded, unfilled */
.home-action__icon,
.home-action__chevron {
     flex-shrink: 0;
     fill: currentColor;
}

.home-action__icon {
     width: var(--md-comp-icon-large);
     height: var(--md-comp-icon-large);
     color: var(--md-sys-color-primary);
}

/* The arrow's nudge follows --lift (0 at rest, 1 on hover): CSS without JavaScript, the site
   script's spring with it (DEV-240) */
.home-action__chevron {
     width: var(--md-comp-icon-medium);
     height: var(--md-comp-icon-medium);
     color: var(--md-sys-color-on-surface-variant);
     transform: translateX(calc(var(--lift, 0) * 2px));
     transition: color var(--md-sys-motion-spring-fast-effects),
                 transform var(--md-sys-motion-spring-standard-fast-spatial);
}

@media (hover: hover) {
     .home-action:hover {
          --lift: 1;
     }

     .home-action:hover .home-action__chevron {
          color: var(--md-sys-color-primary);
     }
}

html[data-springs] .home-action__chevron {
     transition-property: color;
}

.home-action__body {
     display: flex;
     flex-direction: column;
     flex: 1;
     min-width: 0;
}

/* An email address breaks rather than pushing the card past a narrow screen (DEV-69: 320px with
   a reader's own text spacing) */
.home-action__title {
     overflow-wrap: anywhere;
     font-family: var(--md-sys-typescale-title-medium-font);
     font-size: var(--md-sys-typescale-title-medium-size);
     line-height: var(--md-sys-typescale-title-medium-line-height);
     font-weight: var(--md-sys-typescale-title-medium-weight);
     letter-spacing: var(--md-sys-typescale-title-medium-tracking);
     color: var(--md-sys-color-on-surface);
}

.home-action__description {
     margin-top: var(--md-sys-space-50);
     font-family: var(--md-sys-typescale-body-medium-font);
     font-size: var(--md-sys-typescale-body-medium-size);
     line-height: var(--md-sys-typescale-body-medium-line-height);
     font-weight: var(--md-sys-typescale-body-medium-weight);
     letter-spacing: var(--md-sys-typescale-body-medium-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

/* ---------- How it works ---------- */

.home-split {
     display: grid;
     grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
     align-items: center;
     gap: var(--md-sys-space-900);
}

.home-split-media img {
     width: 100%;
     aspect-ratio: 4 / 5;
     object-fit: cover;
     object-position: center 60%;
     border-radius: var(--md-sys-shape-corner-large-increased);
     box-shadow: var(--md-sys-elevation-level2);
}

.home-split-copy .home-section-lede {
     margin-bottom: var(--md-sys-space-400);
}

.home-steps {
     counter-reset: step;
     display: grid;
     gap: 0;
}

/* The prose list's numbered circle (content.css), on the title's first line */
.home-steps li {
     counter-increment: step;
     display: grid;
     grid-template-columns: var(--md-comp-prose-number) 1fr;
     grid-template-rows: auto auto;
     column-gap: var(--md-sys-space-150);
     padding-block: var(--md-sys-space-200);
     border-top: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
}

.home-steps li:last-child {
     border-bottom: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
}

.home-steps li::before {
     content: counter(step);
     grid-row: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     width: var(--md-comp-prose-number);
     height: var(--md-comp-prose-number);
     border-radius: var(--md-sys-shape-corner-full);
     background: var(--md-sys-color-tertiary-container);
     color: var(--md-sys-color-on-tertiary-container);
     font-family: var(--md-sys-typescale-label-medium-font);
     font-size: var(--md-sys-typescale-label-medium-size);
     line-height: var(--md-sys-typescale-label-medium-line-height);
     font-weight: var(--md-sys-typescale-label-medium-weight);
     letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}

.home-steps__text {
     grid-column: 2;
}

.home-steps__title {
     font-family: var(--md-sys-typescale-title-medium-font);
     font-size: var(--md-sys-typescale-title-medium-size);
     line-height: var(--md-sys-typescale-title-medium-line-height);
     font-weight: var(--md-sys-typescale-title-medium-weight);
     letter-spacing: var(--md-sys-typescale-title-medium-tracking);
     color: var(--md-sys-color-on-surface);
}

.home-steps__text {
     margin-top: var(--md-sys-space-25);
     font-family: var(--md-sys-typescale-body-medium-font);
     font-size: var(--md-sys-typescale-body-medium-size);
     line-height: var(--md-sys-typescale-body-medium-line-height);
     font-weight: var(--md-sys-typescale-body-medium-weight);
     letter-spacing: var(--md-sys-typescale-body-medium-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

/* ---------- Calculator call to action ---------- */

.home-cta {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--md-sys-space-400);
     padding: var(--md-sys-space-600) var(--md-sys-space-700);
     border-radius: var(--md-sys-shape-corner-large-increased);
     color: var(--md-sys-color-on-primary-container);
     background: var(--md-sys-color-primary-container);
     box-shadow: var(--md-sys-elevation-level2);
}

/* The ring takes the band's own content colour: at medium and high contrast the container darkens
   and the secondary ring fell to 2:1 against it (DEV-69, WCAG 1.4.11) */
.home-cta :focus-visible {
     outline-color: var(--md-sys-color-on-primary-container);
}

/* ---------- People and contact ---------- */

.home-people {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     align-items: center;
     gap: var(--md-sys-space-800);
}

main.home .home-avatars {
     display: flex;
     margin-bottom: var(--md-sys-space-300);
}

.home-avatars li + li {
     margin-left: calc(-1 * var(--md-sys-space-150));
}

.home-avatars img {
     width: 3.5rem;  /* one-off: the avatar stack */
     height: 3.5rem;  /* one-off */
     border-radius: var(--md-sys-shape-corner-full);
     object-fit: cover;
     object-position: center 25%;
     filter: grayscale(100%);
     border: 3px solid var(--md-sys-color-surface-container-low);  /* one-off: the ring between avatars */
}

.home-contact {
     display: grid;
     gap: var(--md-comp-card-gap);
}

/* ---------- Footer sits flush under the last band ---------- */

main.home + .site-footer {
     margin-top: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 839px) {
     .home-section {
          padding-block: var(--md-sys-space-700);
     }

     .home-hero {
          padding-top: calc(var(--app-bar-current-height, var(--md-comp-app-bar-height)) + var(--md-sys-space-500));
          padding-bottom: var(--md-sys-space-600);
     }

     .home-hero-grid,
     .home-split,
     .home-people {
          grid-template-columns: minmax(0, 1fr);
          gap: var(--md-sys-space-500);
     }

     .home-hero-media {
          justify-self: start;
          max-width: 640px;  /* one-off: a reading or image measure */
     }

     .home-hero-media img {
          aspect-ratio: 4 / 3;
          object-position: center 45%;
     }

     .home-split-media {
          order: 2;
          max-width: 640px;  /* one-off: a reading or image measure */
     }

     .home-split-media img {
          aspect-ratio: 4 / 3;
     }

     .home-cta {
          flex-direction: column;
          align-items: flex-start;
          padding: var(--md-sys-space-500) var(--md-sys-space-400);
     }
}

@media (max-width: 599px) {
     main.home .home-h1 {
          font-family: var(--md-sys-typescale-display-small-font);
          font-size: var(--md-sys-typescale-display-small-size);
          line-height: var(--md-sys-typescale-display-small-line-height);
          font-weight: var(--md-sys-typescale-display-small-weight);
          letter-spacing: var(--md-sys-typescale-display-small-tracking);
     }

     .home-actions-grid {
          grid-template-columns: minmax(0, 1fr);
     }

     main.home .home-insights {
          grid-template-columns: minmax(0, 1fr);
          gap: var(--md-sys-space-300);
     }

     .home-actions .home-btn {
          flex: 1 1 auto;
     }
}

/* People column: keep the team link close to its paragraph */
main.home .home-people__copy .home-section-lede {
     margin-bottom: 0;
}

main.home .home-people__copy .home-link {
     margin-top: var(--md-sys-space-200);
}

/* <picture> wrappers for the pre-cropped photos */
.home-hero-media picture,
.home-split-media picture {
     display: block;
}