/* Brochure product tiles: wide dark-plate artwork extracted from the PDF.
   The plate colour is baked into the image and repeated on the wrapper, so
   cards of differing artwork ratios all read as one box of the same size. */
.product-image-wrapper.tile-plate {
  align-items: center;
  background-color: #161c27;
  border-radius: 10px;
  padding: 12px;
  overflow: hidden;
}

.product-cover.brochure-tile {
  width: 100%;
  height: 100%;
  object-fit: contain;
  align-self: center;
}

/* The Knauf sacks are shot tighter in frame than the Saveto ones beside them,
   so at a shared 100% width they tower over the rest of the row. */
.product-cover.full.shrink-20 {
  width: 80%;
}

/* ---------------------------------------------------------------------------
   Homepage product slider (GSAP)

   Replaces the Webflow w-slider. The card is a fixed four-row stack — media,
   title, copy, arrow — so every title and every first line of body copy lands
   on the same baseline across the rail. Ragged baselines were what made the
   old version read as unfinished.

   Palette is the site's: #164e91 brand blue, #161c27 ink, #f3f6fb surface.
--------------------------------------------------------------------------- */
.gsap-slider {
  --slider-brand: #164e91;
  --slider-ink: #161c27;
  --slider-surface: #f8fafd;
  --slider-control-surface: #f3f6fb;
  --slider-media-h: 232px;
  --slider-title-h: 26px;
  --slider-body-lh: 26px;
  position: relative;
}

.gsap-slider_viewport {
  /* Before the script runs the rail is a plain scroller, so the section still
     works if the GSAP CDN is unreachable. */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 18px 0 30px;
  margin: -18px 0 -30px;
}

.gsap-slider.is-ready .gsap-slider_viewport {
  overflow: hidden;
  scroll-snap-type: none;
}

.gsap-slider_track {
  display: flex;
  align-items: stretch;
  position: relative;
  width: max-content;
  will-change: transform;
}

.gsap-slider_slide {
  flex: 0 0 auto;
  display: flex;
  width: var(--slide-w, 340px);
  margin-right: 40px;
  scroll-snap-align: start;
}

.gsap-slider.is-ready .gsap-slider_track {
  cursor: grab;
}

.gsap-slider.is-ready .gsap-slider_track.is-dragging {
  cursor: grabbing;
}

/* --- card ---------------------------------------------------------------- */

.gsap-slider .product-card.block.p {
  box-sizing: border-box;
  height: 100%;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 24px;
  padding: 28px 24px 26px;
  background-color: var(--slider-surface);
  border: 1px solid #164e910f;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color .32s cubic-bezier(.22, 1, .36, 1), border-color .32s cubic-bezier(.22, 1, .36, 1), box-shadow .32s cubic-bezier(.22, 1, .36, 1), transform .32s cubic-bezier(.22, 1, .36, 1);
}

.gsap-slider .product-card.block.p:hover {
  background-color: #fff;
  border-color: #164e911c;
  box-shadow: 0 12px 28px -20px #164e9138;
  transform: translateY(-2px);
}

/* Feedback belongs on the press, not the release. */
.gsap-slider .product-card.block.p:active {
  transform: translateY(0);
  transition-duration: .1s;
}

.gsap-slider .product-card.block.p:focus-visible {
  outline: 2px solid var(--slider-brand);
  outline-offset: 3px;
}

/* One fixed box for artwork of every aspect ratio, so the title below it never
   moves. The _60/_80/_90 modifiers still tune images shot tighter in frame. */
.gsap-slider .product-card_media {
  flex: 0 0 auto;
  height: var(--slider-media-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
}

.gsap-slider .product-card_media .illustration {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
}

.gsap-slider .product-card_media .illustration._90 { max-height: 100%; max-width: 100%; }
.gsap-slider .product-card_media .illustration._80 { max-height: 92%; max-width: 92%; }
.gsap-slider .product-card_media .illustration._60 { max-height: 84%; max-width: 78%; }

.gsap-slider .text-block-8 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* Exactly one line, always — a wrapped title would push the copy out of line
   with its neighbours. */
.gsap-slider .product-card_title {
  height: var(--slider-title-h);
  margin: 0 0 12px;
  overflow: hidden;
}

.gsap-slider .edu-title {
  display: block;
  padding: 0;
  color: var(--slider-ink);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: var(--slider-title-h);
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Three lines of reserved height whether the copy fills them or not. */
.gsap-slider .paragraph-large {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  height: calc(var(--slider-body-lh) * 3);
  margin: 0;
  overflow: hidden;
  color: #161c27b8;
  font-size: 15px;
  line-height: var(--slider-body-lh);
  letter-spacing: 0;
}

.gsap-slider .arrow {
  margin-top: auto;
  padding: 20px 0 0;
  color: var(--slider-brand);
}

.gsap-slider .line {
  background-color: currentColor;
  width: 28px;
  transition: width .25s cubic-bezier(.22, 1, .36, 1);
}

.gsap-slider .arrow-head {
  color: currentColor;
}

.gsap-slider .product-card.block.p:hover .line {
  width: 38px;
}

/* Dragging a rail of images: stop the browser from starting its own image drag
   or picking out text mid-throw. */
.gsap-slider.is-ready .gsap-slider_slide img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.gsap-slider.is-ready .gsap-slider_track.is-dragging .product-card {
  pointer-events: none;
}

/* --- controls ------------------------------------------------------------ */

.gsap-slider_arrow {
  appearance: none;
  padding: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slider-brand);
  background-color: var(--slider-control-surface);
  border: 1px solid #164e911f;
  border-radius: 100px;
  cursor: pointer;
  position: absolute;
  z-index: 3;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease-out, opacity .2s ease;
}

.gsap-slider_arrow svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gsap-slider_arrow:hover:not([disabled]) {
  color: #fff;
  background-color: var(--slider-brand);
  border-color: var(--slider-brand);
  box-shadow: 0 8px 18px -12px #164e9180;
}

.gsap-slider_arrow:active:not([disabled]) {
  transform: scale(.94);
}

.gsap-slider_arrow[disabled] {
  color: #161c2740;
  background-color: #f3f6fb;
  border-color: #161c2714;
  cursor: default;
}

.gsap-slider_arrow:focus-visible {
  outline: 2px solid var(--slider-brand);
  outline-offset: 3px;
}

/* Below the rail, left-aligned with the first card. The viewport's own bottom
   padding supplies the gap, so both rails sit the same distance from their
   cards regardless of how tall those cards are. */
.gsap-slider_arrow.is-prev { top: 100%; left: 0; margin-top: -6px; }
.gsap-slider_arrow.is-next { top: 100%; left: 60px; margin-top: -6px; }

/* --- projects rail ------------------------------------------------------- */

.gsap-slider.is-projects .link-project-tile {
  height: 100%;
}

.gsap-slider.is-projects .wrap-project-image {
  border-radius: 8px;
  overflow: hidden;
}

.gsap-slider.is-projects .image-project {
  display: block;
  width: 100%;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.gsap-slider.is-projects .link-project-tile:hover .image-project {
  transform: scale(1.03);
}

.gsap-slider.is-projects .link-project-tile:focus-visible {
  outline: 2px solid var(--slider-brand);
  outline-offset: 4px;
  border-radius: 8px;
}

/* --- breakpoints --------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .gsap-slider {
    --slider-media-h: 180px;
  }

  .gsap-slider.is-projects .image-project {
    height: 300px;
  }

  .gsap-slider_slide {
    margin-right: 24px;
  }

  /* The theme hides .illustration below 992px; the rail shows artwork at every
     width, the way the products page does. */
  .gsap-slider .product-card_media .illustration {
    display: block;
  }

  .gsap-slider .product-card.block.p {
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    min-height: 420px;
    padding: 22px 20px 22px;
    gap: 20px;
  }
}

@media screen and (max-width: 479px) {
  .gsap-slider {
    --slider-media-h: 164px;
  }

  .gsap-slider.is-projects .image-project {
    height: 240px;
  }

  .gsap-slider_slide {
    margin-right: 16px;
  }

  .gsap-slider .product-card.block.p {
    display: flex;
    min-height: 400px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gsap-slider .product-card.block.p,
  .gsap-slider.is-projects .image-project,
  .gsap-slider .line,
  .gsap-slider_arrow {
    transition-duration: .01ms;
  }

  .gsap-slider .product-card.block.p:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   About hero — image marquee

   The theme clips this hero with `.section-2.hero-about { overflow: hidden }`,
   but the page's markup is `class="section hero-about"`, so the rule never
   matched and the marquee widened the document by ~3200px. Clip the marquee
   itself rather than the whole section: `clip` contains the overflow without
   turning the element into a scroll container the way `hidden` would.
--------------------------------------------------------------------------- */
.hero-about .master-about-gallery {
  overflow: hidden;
  overflow: clip;
}

/* ---------------------------------------------------------------------------
   Office tiles — light treatment

   The theme ships these as solid #164e91 blocks with white text, which was
   built for a dark section. On the white "Our offices" section they read as
   two floating slabs. Swap to a light neutral fill with a hairline border and
   a soft shadow: separated from the page, still clearly a card.
--------------------------------------------------------------------------- */
.tile-elevation.office-tile {
  color: #171717;
  background-color: #f3f5f8;
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .06);
}

.tile-elevation.office-tile:hover {
  background-color: #eef1f6;
}

.tile-elevation.office-tile .no-margins-title.white {
  color: #171717;
}

.tile-elevation.office-tile .office-details-wrap-about div {
  color: #5c6470;
}

/* ---------------------------------------------------------------------------
   Values pillars — stacked cards

   Corner radius to match the contact and office tiles. The shadow only appears
   once value-stack.js has put the cards in the stack: without it the cards sit
   in ordinary flow and the drop shadow would read as clutter.
--------------------------------------------------------------------------- */
.tile-elevation.sticky-halves-tile {
  border-radius: 10px;
}

.master-sticky-tiles.is-stacked {
  /* Scroll runway after the last card lands, so the finished stack holds for a
     beat before value-stack.js releases it. */
  padding-bottom: 22vh;
}

.master-sticky-tiles.is-stacked .sticky-halves-tile {
  will-change: transform;
  backface-visibility: hidden;
  box-shadow: 0 -12px 32px rgba(16, 24, 40, .18);
}