/* Unify content width across the site so cards and text align on a single grid. */
:root {
  --site-max-width: 1290px;
  --site-gutter: 24px;
}

/* Section wrappers own the horizontal gutter, consistently everywhere. */
[class*="f-section-"],
.f-footer-regular,
.f-navigation,
[class*="rt-component-section"] {
  padding-left: var(--site-gutter);
  padding-right: var(--site-gutter);
}

/* Containers share one max width and add no extra inset. */
.w-layout-blockcontainer,
.rt-component-container,
.rt-component-container-2,
.rt-component-container-3,
.rt-component-container-4,
.rt-component-container-5,
.rt-component-container-6,
.rt-component-container-7,
.rt-container-small,
.rt-container-medium,
.rt-container-large,
.f-container-regular,
.f-container-regular-2,
.f-container-regular-3,
.f-navigation-container,
.uui-container-large,
.uui-container-large-6,
.container,
.container-6,
.container-7,
.container-small,
.container-regular {
  width: 100%;
  max-width: var(--site-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Inner grids/rows fill their unified container. */
.f-grid-two-column,
.f-paragraph-large-3 {
  max-width: 100%;
}

@media screen and (max-width: 767px) {
  :root {
    --site-gutter: 16px;
  }
}

/* Nested containers never add a second gutter. */
[class*="f-container-"] [class*="f-container-"],
.w-layout-blockcontainer .w-layout-blockcontainer {
  padding-left: 0;
  padding-right: 0;
}

[class*="f-container-x-small"],
[class*="f-container-small"],
[class*="f-container-medium"] {
  padding-left: 0;
  padding-right: 0;
}

/* A section nested inside a container already sits inside the gutter. */
[class*="f-container-"] [class*="f-section-"],
[class*="f-section-"] [class*="f-section-"],
.w-layout-blockcontainer [class*="f-section-"],
.w-layout-blockcontainer [class*="rt-component-section"] {
  padding-left: 0;
  padding-right: 0;
}

/* ---------------------------------------------------------------
   Card + media standardization
   One padding scale, no stray outer margins, predictable images.
   --------------------------------------------------------------- */
:root {
  --card-padding: 32px;
  --card-radius: 12px;
  --card-gap: 40px;
}

/* Every card uses the same padding, radius and box model. */
.f-feature-card-filled,
.f-feature-card-large,
[class*="f-feature-card"] {
  box-sizing: border-box;
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  margin: 0;
  width: 100%;
}

/* Cards stretch to fill their grid track so rows line up. */
.w-layout-grid > .f-feature-card-filled,
.w-layout-grid > .f-feature-card-large,
[class*="f-grid-"] > [class*="f-feature-card"] {
  height: auto;
  min-height: 0;
  align-self: stretch;
}

/* Large hero-style cards keep a consistent minimum height instead of a
   fixed one, so text never overflows or shrinks the card. */
.f-feature-card-large {
  min-height: 460px;
  height: auto;
}
.f-feature-card-large.auto {
  min-height: 0;
}

/* Grids fill the shared container edge to edge with one gap scale. */
[class*="f-grid-"],
[class*="f-gallery-two-column"],
.w-layout-grid {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
[class*="f-grid-two-column"],
[class*="f-grid-three-column"] {
  grid-column-gap: var(--card-gap);
  grid-row-gap: var(--card-gap);
}

/* Media inside cards and galleries: fill the slot, never overflow. */
.f-image-cover,
.f-image-cover-2,
[class*="f-gallery-image-"] img,
[class*="f-feature-card"] img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
[class*="f-gallery-image-"] {
  overflow: hidden;
  border-radius: 8px;
  width: 100%;
}

/* Standalone content images stay inside the grid. */
.rt-component-container img,
[class*="f-container-"] img {
  max-width: 100%;
}

/* Last card/text block in a stack shouldn't add trailing space. */
[class*="f-feature-card"] > :last-child,
[class*="f-title-wrapper-"] > :last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 991px) {
  :root {
    --card-padding: 28px;
    --card-gap: 32px;
  }
  .f-feature-card-large {
    min-height: 380px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --card-padding: 24px;
    --card-gap: 24px;
  }
  .f-feature-card-large {
    min-height: 320px;
  }
  [class*="f-gallery-image-"] {
    height: auto;
  }
}

/* Hero CTA boxes keep their generous Webflow padding, but stay on-grid. */
.rt-home-three-cta-main-box,
.rt-home-three-cta-main-box-3 {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

/* Nav container is a flex child; force it onto the shared grid width. */
.f-navigation-container {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--site-max-width);
}

/* The desktop brand link is empty (its logo is hidden); its 15px padding
   pushed the nav row off the shared grid. */
@media screen and (min-width: 992px) {
  .rt-brand-3,
  .rt-brand-3.w--current {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Loose text placed directly inside a section (no container wrapper) must sit
   on the shared grid instead of running full-bleed. */
[class*="f-section-"] > p,
[class*="f-section-"] > h1,
[class*="f-section-"] > h2,
[class*="f-section-"] > h3,
[class*="f-section-"] > h4,
[class*="f-section-"] > h5,
[class*="f-section-"] > h6,
[class*="f-section-"] > ul,
[class*="f-section-"] > ol,
[class*="f-section-"] > .w-richtext {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* ---------------------------------------------------------------
   Card typography: one scale for titles, body copy and meta text so
   baselines line up across every card in a row.
   --------------------------------------------------------------- */
:root {
  --card-title-size: 24px;
  --card-title-line: 32px;
  --card-body-size: 17px;
  --card-body-line: 28px;
  --card-meta-size: 14px;
  --card-meta-line: 22px;
  --card-text-gap: 12px;
}

.f-feature-card-filled,
.f-feature-card-large,
.rt-category-cards-text-4,
[class*="f-feature-card"] {
  --_card-scope: 1;
}

[class*="f-feature-card"] h1,
[class*="f-feature-card"] h2,
[class*="f-feature-card"] h3,
[class*="f-feature-card"] h4,
[class*="f-feature-card"] h5,
[class*="f-feature-card"] h6,
[class*="f-feature-card"] [class*="f-h3-heading"],
[class*="f-feature-card"] [class*="f-h5-heading"] {
  font-size: var(--card-title-size);
  line-height: var(--card-title-line);
  margin: 0 0 var(--card-text-gap);
  letter-spacing: -.02em;
}

[class*="f-feature-card"] p,
[class*="f-feature-card"] [class*="f-paragraph-large"],
[class*="f-feature-card"] [class*="f-paragraph-regular"],
[class*="f-feature-card"] .w-richtext > p {
  font-size: var(--card-body-size);
  line-height: var(--card-body-line);
  margin: 0 0 var(--card-text-gap);
  letter-spacing: -.02em;
}

[class*="f-feature-card"] [class*="f-paragraph-small"],
[class*="f-feature-card"] .rt-category-cards-text-4,
[class*="f-feature-card"] .f-subheading,
[class*="f-feature-card"] .fm {
  font-size: var(--card-meta-size);
  line-height: var(--card-meta-line);
  margin: 0 0 var(--card-text-gap);
}

/* Last text node in a card should not add trailing space below the stack. */
[class*="f-feature-card"] > *:last-child,
[class*="f-feature-card"] [class*="f-margin-bottom"]:last-child > *:last-child {
  margin-bottom: 0;
}

/* Uniform inner padding so text baselines start at the same offset. */
[class*="f-feature-card"] {
  padding: var(--card-padding);
}

@media screen and (max-width: 991px) {
  :root {
    --card-title-size: 22px;
    --card-title-line: 30px;
    --card-body-size: 16px;
    --card-body-line: 26px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --card-title-size: 20px;
    --card-title-line: 28px;
    --card-body-size: 16px;
    --card-body-line: 26px;
    --card-text-gap: 10px;
  }
}

/* ---------------------------------------------------------------
   Galleries: Webflow quick-stack grids sit on the shared grid and
   their images fill their cell edge-to-edge.
   --------------------------------------------------------------- */
[class*="f-section-"] > .w-layout-layout,
[class*="rt-component-section"] > .w-layout-layout {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Cells stretch so every image in a row shares the same height. */
.w-layout-layout > .w-layout-cell {
  align-items: stretch;
  justify-items: stretch;
  min-width: 0;
}

/* Images fill their cell instead of leaving a gap on one edge.
   Button/icon arrows are excluded — they must keep their intrinsic size. */
.w-layout-cell > img:not([class*="arrow"]):not([class*="icon"]),
.w-layout-cell > a > img:not([class*="arrow"]):not([class*="icon"]) {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  margin: 0;
}

/* Restore intrinsic sizing for button arrows anywhere on the site. */
img[class*="rt-button-arrow"],
a[class*="rt-button"] img,
[class*="w-button"] img {
  width: auto;
  height: auto;
  max-width: 24px;
  object-fit: contain;
  flex: none;
  align-self: center;
}


/* A container that is not wrapped in a padded section owns the gutter itself,
   so galleries never run edge-to-edge below 1290px. */
body > [class*="f-container-"],
body > .w-layout-blockcontainer,
body > [class*="rt-component-container"],
body > div:not([class]) > [class*="f-container-"],
body > div:not([class]) > .w-layout-blockcontainer,
body > div:not([class]) > [class*="rt-component-container"] {
  max-width: calc(var(--site-max-width) + (2 * var(--site-gutter)));
  padding-left: var(--site-gutter);
  padding-right: var(--site-gutter);
}

/* Button links inside quick-stack cells stay horizontally centred
   (cells are stretched for image alignment, which pushed them left). */
.w-layout-cell > a[class*="rt-button"] {
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}