/* Intro: text on the left, video on the right. On scroll the video grows to the
   container width and the text fades out. main.js sets --p (0 to 1) on .intro. */
.intro {
  position: relative;
  height: 300vh;
}

.intro-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.intro-copy {
  position: relative;
  z-index: 2;
  width: 45%;
  padding-left: var(--page-gutter);
  opacity: calc(1 - (var(--p, 0) * 2.2));
  transition: opacity 0.05s linear;
}

.intro-title {
  margin-bottom: calc(24 * var(--u));
}

/* "Our story" button */
.intro-copy .btn {
  margin-top: calc(24 * var(--u));
}

.intro-text {
  line-height: var(--body-r-line-height);
  max-width: calc(520 * var(--u));
}

.intro-media {
  position: absolute;
  top: 50%;
  /* grows to the container width, not the whole viewport */
  right: var(--page-gutter);
  transform: translateY(-50%);
  width: calc(46% + (var(--p, 0) * (54% - 2 * var(--page-gutter))));
  height: auto;
  border-radius: calc(40 * var(--u));
  overflow: hidden;
  z-index: 1;
  background: var(--color-pine-forest);
}

.intro-media video,
.intro-media .intro-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-placeholder {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-pine-forest);
  font-weight: var(--body-b-weight);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  padding: calc(24 * var(--u));
}

@media (max-width: 767px) {
  .intro {
    height: auto;
  }
  .intro-pin {
    position: relative;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: calc(100 * var(--u)) var(--page-gutter);
    gap: calc(40 * var(--u));
  }
  .intro-copy {
    width: 100%;
    padding-left: 0;
    opacity: 1;
  }
  .intro-media {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    height: auto;
    border-radius: calc(40 * var(--u));
  }
}

/* What We Do: header row, then one big shape that morphs between icons as
   you scroll, with its caption fading in. See home-morph.js. */
/* tall track: its height is the scroll distance (about one screen per shape) */
.services {
  position: relative;
  height: 500vh;
}

/* only the shape and caption stay pinned, the header scrolls away.
   Full viewport height + flex centering keeps the shape's centre on the
   screen's centre on every device, instead of a fixed offset from the top. */
.services-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 0 var(--page-gutter);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.services-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: calc(80 * var(--u)) var(--page-gutter) 0;
  box-sizing: border-box;
}

/* title = one third, text + button = two thirds (spacing is padding inside the
   side column so the thirds stay exact) */
.services-title {
  flex: 0 0 33.333%;
  min-width: 0;
}

.services-side {
  flex: 0 0 66.666%;
  min-width: 0;
  padding-top: calc(12 * var(--u));
  padding-left: calc(60 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
}

.services-text {
  line-height: 1.4;
}

.services-side .btn {
  align-self: flex-start;
}

.services-stage {
  position: relative;
  width: 100%;
}

/* 800px square at 1920, caption sits on top of it. Vertical centring comes
   from .services-pin's flex now, this only centres it side to side. */
:root .shape-box {
  position: relative;
  width: min(calc(800 * var(--u)), 100%);
  aspect-ratio: 1;
  margin: 0 auto;
}

.shape-list {
  position: absolute;
  inset: 0;
}

/* shapes stack on top of each other, only the active one shows */
.shape-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.shape-img.is-active {
  opacity: 1;
}

/* the morphing svg */
.shape-morph {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* caption sits over the shape, items fade in place */
.shape-caption {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.shape-caption-item {
  position: absolute;
  left: 50%;
  top: 57%; /* a bit below center */
  transform: translate(-50%, -50%) scale(0.85);
  width: min(calc(460 * var(--u)), 82%);
  text-align: center;
  opacity: 0;
  /* 0.65s matches the morph duration in home-morph.js, the 0.2s delay makes the
     text follow the shape */
  transition:
    opacity 0.65s ease 0.2s,
    transform 0.65s ease 0.2s;
}

.shape-caption-item.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.caption-title {
  font-weight: var(--body-b-weight);
  font-size: var(--h3-size); /* 48 at 1920 */
  text-transform: uppercase;
  color: var(--color-persian-plum);
  margin-bottom: calc(12 * var(--u));
}

.caption-text {
  font-size: max(var(--font-min), calc(32 * var(--fu)));
  line-height: var(--body-r-line-height);
  color: var(--color-persian-plum);
}

@media (max-width: 767px) {
  .services-pin {
    padding: calc(60 * var(--u)) var(--page-gutter);
  }
  .services-title,
  .services-side {
    flex: 1 1 100%;
  }
  .services-side {
    /* stacked: no indent */
    padding-left: 0;
    padding-top: calc(24 * var(--u));
  }
}

/* Hero */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: calc(260 * var(--u));
  padding-block: calc(130 / 6 * var(--u));
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(70 * var(--u));
  flex: 1 1 auto;
  min-width: 0;
  padding-left: var(--page-gutter);
}

.hero-text {
  line-height: var(--body-r-line-height);
  max-width: calc(878 * var(--u));
}

/* Icons: 5 per row, each one takes an equal share of the width left after the
   gaps, so no fixed icon size is needed. */
.hero-icons {
  display: flex;
  flex-wrap: wrap;
  column-gap: calc(50 * var(--u));
  row-gap: calc(20 * var(--u));
  justify-content: center;
  align-content: center;
  flex: 1 1 calc(940 * var(--u));
  min-width: 0;
  padding-right: calc(20 * var(--u));
}

.hero-icons .icon-mask {
  /* 5 columns = (width - 4 gaps) / 5 */
  flex: 1 1 calc((100% - 200 * var(--u)) / 5);
  max-width: calc((100% - 200 * var(--u)) / 5);
  width: auto;
  height: auto;
  aspect-ratio: 1;
  opacity: 0.4;
  transition: opacity 0.25s ease;
}

/* Icons are color masks so they can be tinted (40% opacity, full on hover).
   The svg data for each one is in icons.css (.icon-1 to .icon-25). */
.icon-mask {
  display: block;
  width: calc(140 * var(--u));
  height: calc(140 * var(--u));
  background-color: var(--icon-color, var(--color-sea-nymph));
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.hero-icons .icon-mask:hover {
  opacity: 1;
}

/* text left / icons right until 768, then one column */
@media (max-width: 767px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    gap: calc(60 * var(--u));
  }
  .hero-copy {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-right: var(--page-gutter);
  }
  .hero-icons {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    /* same side padding as .hero-copy */
    padding-inline: var(--page-gutter);
  }
}

@media (max-width: 600px) {
  .hero-text {
    overflow-wrap: anywhere;
  }
}

/* Different by Design: sage card, heading left, list right. */
.different {
  position: relative;
  overflow: hidden;
  margin: 0 var(--page-gutter) var(--section-space);
  padding: calc(var(--page-gutter) * 1.33) var(--page-gutter);
  border-radius: calc(24 * var(--u));
  background: var(--color-sage-20);
  display: flex;
  gap: calc(80 * var(--u));
  justify-content: space-between;
  flex-wrap: wrap;
}

/* two big blurred circles behind the content */
.different-blob {
  position: absolute;
  z-index: 0;
  border-radius: calc(520 * var(--u));
  background: var(--color-sea-nymph);
  filter: blur(calc(60 * var(--u)));
  pointer-events: none;
}

/* left */
.different-blob-1 {
  width: calc(1095 * var(--u));
  height: calc(1100 * var(--u));
  top: calc(-700 * var(--u));
  left: calc(-200 * var(--u));
}

/* right */
.different-blob-2 {
  width: calc(969 * var(--u));
  height: calc(972 * var(--u));
  top: calc(20 * var(--u));
  right: calc(-150 * var(--u));
}

.different-title,
.different-list {
  position: relative;
  z-index: 1;
}

.different-title {
  color: var(--color-pine-forest);
}

.different-list {
  display: flex;
  flex-direction: column;
  gap: calc(55 * var(--u));
  max-width: calc(590 * var(--u));
}

.feature-title {
  font-weight: var(--body-b-weight);
  font-size: var(--h3-size);
  text-transform: uppercase;
  margin-bottom: calc(12 * var(--u));
  color: var(--color-pine-forest);
}

.feature-text {
  line-height: var(--body-r-line-height);
  color: var(--color-pine-forest);
}

/* Testimonials */
.testimonials-title {
  margin-bottom: calc(60 * var(--u));
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(40 * var(--u));
}

.testimonial {
  margin: 0;
  padding: calc(40 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--color-rose-20);
/*   height: calc(409 * var(--u)); */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* mark on top, quote in the middle, name at the bottom */
}

.testimonial-mark {
  display: block;
  font-size: max(var(--font-min), calc(62 * var(--fu)));
  font-weight: var(--h1-weight);
  color: var(--color-sea-nymph);
  line-height: 1;
  margin-bottom: calc(20 * var(--u));
}

.testimonial-quote {
  line-height: 1.3;
  min-height: calc(90 * var(--u));
  color: var(--color-pine-forest);
}

.testimonial-footer {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  padding-top: calc(30 * var(--u));
}

.testimonial-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  border-radius: 50%;
  background: #f7f2ee99;
  color: var(--color-pine-forest);
  font-weight: var(--body-b-weight);
  font-size: max(var(--font-min), calc(14 * var(--fu)));
  flex-shrink: 0;
}

.testimonial-name {
  display: block;
  font-style: normal;
  font-weight: var(--body-b-weight);
  font-size: max(var(--font-min), calc(24 * var(--fu)));
  line-height: 0.85em;
  color: var(--color-pine-forest);
}

.testimonial-role {
  display: block;
  font-size: max(var(--font-min), calc(16 * var(--fu)));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-black);
  margin-top: calc(4 * var(--u));
}

@media (max-width: 767px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .testimonial {
    height: auto;
  }
}

/* Phones: hero image first, then the title, text and button */
@media (max-width: 767px) {
  .hero-icons {
    order: -1;
  }
  .hero-copy {
    order: 0;
  }
}