/*
 * Hand-maintained fixes on top of the Webflow export.
 *
 * Loaded after the generated stylesheets so that re-exporting from Webflow
 * never clobbers them. Every rule here corrects a layout defect caused by the
 * export using viewport-height (vh) units for horizontal sizing, which makes
 * widths track window height instead of window width.
 */

/* --- Heritage section: two-column grid -------------------------------------
 * The grid was `place-items: stretch start`, so the accordion column shrank to
 * its content and left a ragged gap on the right, while the row itself ran the
 * full width of .container and stopped just short of both screen edges.
 *
 * Every other content section on the page (see .rl-container-large and
 * .rl_content6_component, which the Contact section uses) sits in an 80rem
 * column centred in the viewport, split into two halves with a 5rem gutter.
 * Match that here so Heritage keeps the same left/right margins as its
 * neighbours instead of spanning nearly edge to edge.
 */
.grid-2-column.reverse.add-gap {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 5rem;
  justify-items: stretch;
}

/* --- Accordion body copy ---------------------------------------------------
 * Horizontal padding was 13vh/17vh, i.e. ~390px of padding on a 1410px-tall
 * window, which squeezed the paragraph into a narrow ribbon. Align the copy
 * with the row title instead and cap the measure for readability.
 */
.accordion-bottom-text {
  padding-left: 0;
  padding-right: clamp(16px, 4vw, 64px);
}

.accordion-bottom-text .p-accortion {
  max-width: 68ch;
}

/* --- Accordion hover thumbnail ---------------------------------------------
 * The hover interaction animates the wrapper's inline width from 0vh to 10vh
 * while the stylesheet fixed its height at 9vh, so the square 214x214 source
 * images were stretched horizontally by 10:9. Match the height to the width
 * the interaction lands on, drop the stray aspect-ratio padding that pushed
 * the box past its own height, and crop rather than distort while the reveal
 * animates.
 */
.services-image-wrapper {
  height: 10vh;
}

.services-image-aspect-ratio {
  padding-top: 0;
}

.image-background {
  object-fit: cover;
}

@media screen and (max-width: 991px) {
  .accordion-bottom-text {
    padding-left: 0;
    padding-right: clamp(16px, 4vw, 48px);
  }

  /* The export already sizes this box 7vh square; restated so the desktop
     height above does not leak down into the tablet layout. */
  .services-image-wrapper {
    height: 7vh;
  }
}

@media screen and (max-width: 479px) {
  .accordion-bottom-text {
    padding-left: 0;
    padding-right: 0;
  }
}

/* --- Split-text wrappers ----------------------------------------------------
 * js/interactions.js splits three headings into per-character spans so they
 * can be animated individually. Webflow's own engine did the same and set
 * these two properties inline on every wrapper; GSAP's SplitText only adds
 * them when it wraps in divs, so declare them here instead. Without
 * inline-block the transforms have nothing to move, and the text metrics
 * shift slightly against the original.
 */
.gsap_split_word,
.gsap_split_letter {
  position: relative;
  display: inline-block;
}