/* Innovation — structure and imagery follow Figma frame 74:1629. */
.xyl-page--innovation {
  --home-content-width: var(--xyl-container);
  --innovation-gutter: 55px;
  --innovation-content: min(var(--xyl-container), calc(100% - 2 * var(--innovation-gutter)));
  --innovation-ink: #1a1a1a;
  --innovation-muted: #666;
  color: var(--innovation-ink);
}

.innovation-hero {
  position: relative;
  isolation: isolate;
  height: 670px;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  color: #fff;
  background: var(--xyl-green);
}
.innovation-hero__media,
.innovation-collaboration__media,
.innovation-quote__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.innovation-hero__media img,
.innovation-collaboration__media img,
.innovation-quote__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.innovation-hero__media img {
  position: absolute;
  bottom: -30%;
  left: 0;
  width: 150%;
  max-width: none;
  height: auto;
  object-position: center;
}
.innovation-hero__shade,
.innovation-collaboration__shade,
.innovation-quote__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.innovation-hero__shade { background: linear-gradient(90deg, rgba(0, 12, 8, .76), rgba(0, 12, 8, .3) 48%, rgba(0, 12, 8, .04) 78%); }
.innovation-hero__inner {
  position: relative;
  z-index: 1;
  width: min(var(--xyl-container), calc(100% - 80px));
  height: 100%;
  margin: 0 auto;
  padding: 131px 0 66px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.innovation-hero__copy { width: min(680px, 100%); }.innovation-hero .eyebrow {
    color: #fff;
    letter-spacing: 0;
    margin: 0 0 var(--hero-eyebrow-gap);
    line-height: var(--leading-body);
    font-size: var(--type-lead);
}.innovation-hero h1 {
    max-width: 690px;
    font-size: var(--type-display);
    letter-spacing: 0;
    font-weight: 700;
    text-wrap: balance;
    margin: 0 0 var(--hero-title-gap);
    line-height: var(--leading-display);
}
.innovation-hero h1 span { display: block; }
.innovation-hero h1 .is-accent { color: var(--xyl-lime); }.innovation-hero__intro {
    max-width: 616px;
    margin: 0 0 var(--hero-intro-gap);
    line-height: var(--leading-body);
    white-space: normal;
    font-size: var(--type-lead);
}.innovation-hero__button {
    width: auto;
    display: inline-flex;
    justify-content: space-between;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 999px;
    background: rgba(0,0,0,.2);
    color: #fff;
    font-weight: 500;
    letter-spacing: 0;
    position: relative;
    margin: 0;
    height: 46px;
    min-height: 46px;
    padding: 9px 25px;
    gap: 12px;
    line-height: var(--leading-body);
    font-size: var(--type-lead);
}
.xyl-page--innovation .button__arrow { width: 12px; height: 12px; display: inline-block; flex: none; object-fit: contain; filter: brightness(0) invert(1); }
.innovation-focus h2 { margin-bottom: 38px; }

.innovation-tabs {
  height: 70px;
  width: min(100%, var(--home-content-width));
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  background: #f8f8f8;
}
.innovation-tabs a {
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 10px 12px;
  color: #666;
  font-size: var(--type-label);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.innovation-tabs a.is-active { background: #b8ff0c; color: #4f5b39; }

.innovation-focus {
  width: min(100%, var(--home-content-width));
  margin-inline: auto;
  padding: 63px 0 90px 0 ;
  background: #fff;
}
.innovation-focus h2,
.innovation-process h2,
.innovation-cases__heading h2 {
  margin: 0;
  color: var(--innovation-ink);
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -.025em;
  font-weight: 700;
}
.innovation-focus h2 { margin-bottom: 38px; }
.innovation-focus__grid {
  width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}
.innovation-focus__grid article { min-width: 0; }
.innovation-image-wrap {
  min-width: 0;
  overflow: hidden;
  background: #eee;
}
.innovation-focus__grid .innovation-image-wrap { width: 100%; height: 230px; }
.innovation-focus__grid .innovation-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.innovation-focus__grid article p { margin: 18px 0 0; color: #1a1a1a; font-size: var(--type-lead); line-height: 1.3; font-weight: 500; }

.innovation-process {
  width: min(100%, var(--home-content-width));
  margin-inline: auto;
  padding: 0 0 87px;
  background: #fff;
}
.innovation-process h2 {  margin: 0 auto 35px; }
.innovation-process__steps {
  min-height: 150px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--xyl-green-deep);
}
.innovation-process__step {
  min-width: 0;
  min-height: 150px;
  padding: 18px 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-right: 2px solid #fff;
  background: transparent;
  color: #fff;
  text-align: center;
  cursor: pointer;
}
.innovation-process__step:last-child { border-right: 0; }
.innovation-process__step.is-active { background: #b8ff0c; color: #101310; }
.innovation-process__step b { font-size: 28px; line-height: 1; font-weight: 700; }
.innovation-process__step strong { font-size: var(--type-label); line-height: 1.25; font-weight: 700; }
.innovation-process__step span { color: #adadad; font-size: var(--type-label); line-height: 1.25; }
.innovation-process__step.is-active span { color: #4f5b39; }
.innovation-process__step:focus-visible { outline: 3px solid var(--xyl-lime); outline-offset: -4px; }
.innovation-process__detail {
  min-height: 70px;
  margin: 24px auto 0;
  padding: 20px 30px;
  display: flex;
  align-items: center;
  background: #f0f0f0;
  color: #444;
  font-size: var(--type-lead);
  line-height: 1.35;
}

.innovation-collaboration {
  position: relative;
  isolation: isolate;
  min-height: 480px;
  overflow: hidden;
  display: flex;
  color: #fff;
  background: #193c35;
}
.innovation-collaboration__media img {
  position: absolute;
  top: -35%;
  left: 0;
  width: 123.72%;
  max-width: none;
  height: 180%;
  object-fit: fill;
}
.innovation-collaboration__shade { background: linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.14) 65%), linear-gradient(0deg, rgba(0,0,0,.24), transparent 58%); }
.innovation-collaboration__inner {
  position: relative;
  z-index: 1;
  width: min(var(--xyl-container), calc(100% - 80px));
  min-height: 530px;
  margin: 0 auto;
  padding: 76px 0 78px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.innovation-collaboration__copy { max-width: 560px; }
.innovation-collaboration__copy h2 { margin: 0 0 8px; font-size: 45px; line-height: 1.07; letter-spacing: -.025em; font-weight: 700; }
.innovation-collaboration__copy p { margin: 0; font-size: var(--type-lead); line-height: 1.35; }
.innovation-collaboration__button { width: auto; min-height: 45px; padding: 9px 25px; white-space: nowrap; border-radius: 999px; border: 1px solid rgba(255,255,255,.9); color: #fff; background: rgba(0,0,0,.12); font-size: var(--type-lead); font-weight: 400; letter-spacing: 0; white-space: nowrap; }

.innovation-cases {
  width: min(100%, var(--home-content-width));
  margin-inline: auto;
  padding: 70px 0 80px 0;
  background: #fff;
}
.innovation-cases__heading {
  width: 100%;
  margin: 0 auto 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.innovation-cases__heading a { flex: none; color: #777; font-size: var(--type-label); line-height: 1.3; text-decoration: none; }
.innovation-cases__grid {
  width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px;
}
.innovation-cases__grid article { min-width: 0; }
.innovation-cases__grid .innovation-image-wrap { width: 100%; aspect-ratio: 39 / 28; }
.innovation-cases__grid .innovation-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.innovation-cases__copy { margin-top: 18px; display: flex; flex-direction: column; gap: 4px; }
.innovation-cases__copy h3 { margin: 0; font-size: var(--type-lead); line-height: 1.3; font-weight: 500; }
.innovation-cases__copy p { margin: 0; color: #666; font-size: var(--type-label); line-height: 1.35; }

.innovation-quote {
  position: relative;
  isolation: isolate;
  min-height: 500px;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  color: #fff;
  text-align: center;
  background: #4f4d45;
}
.innovation-quote__media img {
  position: absolute;
  bottom: 0%;
  left: -.29%;
  width: 103.86%;
  max-width: none;
  height: 129.25%;
  object-position: center 78%;
}
.innovation-quote__shade { background: rgba(0,0,0,.2); }
.innovation-quote__copy {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.innovation-quote__copy h2 { margin: 0 0 10px; font-size: 28px; line-height: 1.25; font-weight: 600; }
.innovation-quote__copy p { margin: 0 0 26px; font-size: var(--type-label); line-height: 1.35; letter-spacing: .02em; }
.innovation-quote__copy .button { width: auto; min-height: 45px; padding: 9px 25px; border: 1px solid rgba(255,255,255,.95); border-radius: 999px; color: #fff; background: rgba(0,0,0,.14); font-size: 19px; font-weight: 400; letter-spacing: 0; white-space: nowrap; }

@media (min-width: 2100px) {
  .innovation-focus { padding-inline: max(var(--innovation-gutter), calc((100% - var(--xyl-container)) / 2)); }
  .innovation-cases { padding-inline: max(var(--innovation-gutter), calc((100% - var(--xyl-container)) / 2)); }
}

@media (max-width: 1000px) {
  .innovation-hero { height: min(670px, 74vw); min-height: 540px; }
  .innovation-focus { padding-bottom: 74px; }
  .innovation-focus__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; }
  .innovation-focus__grid .innovation-image-wrap { height: auto; aspect-ratio: 30 / 23; }
  .innovation-process { padding-bottom: 74px; }
  .innovation-process__steps,
  .innovation-process__detail { width: min(100% - 2 * var(--innovation-gutter), 900px); }
  .innovation-process__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .innovation-process__step { padding-inline: 6px; }
  .innovation-process__step strong { font-size: 12px; }
  .innovation-process__step span { font-size: 12px; }
  .innovation-cases__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

@media (max-width: 700px) {
  .innovation-hero { height: auto; min-height: 620px; align-items: flex-end; }
  .innovation-hero__media img { top: 0; right: 0; bottom: auto; left: -35%; width: 150%; max-width: none; height: 100%; object-position: 72% center; }
  .innovation-hero__shade { background: linear-gradient(0deg, rgba(0,12,8,.86), rgba(0,12,8,.35) 64%, rgba(0,12,8,.08)); }
  .innovation-hero__inner { width: calc(100% - 44px); margin: 0 auto; padding: 80px 0 48px;
  justify-content: flex-start;
}.innovation-hero .eyebrow {
    letter-spacing: 0;
    margin: 0 0 var(--hero-eyebrow-gap);
    line-height: var(--leading-body);
    font-size: var(--type-lead);
}.innovation-hero h1 {
    font-size: clamp(var(--type-feature), 12vw, var(--type-section));
    letter-spacing: 0;
    margin: 0 0 var(--hero-title-gap);
    line-height: var(--leading-display);
}.innovation-hero__intro {
    max-width: 35ch;
    margin: 0 0 var(--hero-intro-gap);
    line-height: var(--leading-body);
    white-space: normal;
    font-size: var(--type-lead);
}.innovation-hero__button {
    position: relative;
    margin: 0;
    height: 46px;
    min-height: 46px;
    padding: 9px 25px;
    gap: 12px;
    line-height: var(--leading-body);
    font-size: var(--type-lead);
}
  .innovation-tabs { width: 100%; height: 58px; overflow-x: auto; display: flex; }
  .innovation-tabs a { min-width: 190px; padding-inline: 18px; font-size: 12px; }
  .innovation-focus { padding: 44px 22px 58px; }
  .innovation-focus h2,
  .innovation-process h2,
  .innovation-cases__heading h2 { font-size: var(--type-feature); }
  .innovation-focus h2 { margin-bottom: 24px; }
  .innovation-focus__grid { width: 100%; gap: 22px 14px; }
  .innovation-focus__grid .innovation-image-wrap { aspect-ratio: 1.15; }
  .innovation-focus__grid article p { margin-top: 8px; font-size: var(--type-body); }
  .innovation-process { padding: 0 0 58px; }
  .innovation-process h2 { width: calc(100% - 44px); margin-bottom: 22px; }
  .innovation-process__steps { width: calc(100% - 44px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .innovation-process__step { min-height: 124px; border-top: 1px solid #fff; border-right: 1px solid #fff; }
  .innovation-process__step:nth-child(-n+2) { border-top: 0; }
  .innovation-process__step:nth-child(even) { border-right: 0; }
  .innovation-process__step:last-child { grid-column: 1 / -1; border-right: 0; }
  .innovation-process__step b { font-size: var(--type-component); }
  .innovation-process__detail { width: calc(100% - 44px); min-height: 70px; margin-top: 16px; padding: 16px 18px; font-size: var(--type-body); }
  .innovation-collaboration { min-height: 430px; }
  .innovation-collaboration__media img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 57% center; }
  .innovation-collaboration__inner { width: calc(100% - 44px); min-height: 430px; padding: 52px 0 42px; }
  .innovation-collaboration__copy h2 { font-size: clamp(34px, 9vw, 45px); }
  .innovation-collaboration__copy p { font-size: var(--type-body); }
  .innovation-cases { padding: 48px 22px 58px; }
  .innovation-cases__heading { width: 100%; margin-bottom: 24px; align-items: end; gap: 12px; }
  .innovation-cases__heading h2 { font-size: var(--type-component); }
  .innovation-cases__grid { width: 100%; grid-template-columns: 1fr; gap: 28px; }
  .innovation-cases__grid .innovation-image-wrap { aspect-ratio: 1.4; }
  .innovation-cases__copy { margin-top: 12px; }
  .innovation-cases__copy h3 { font-size: var(--type-body); }
  .innovation-quote { min-height: 340px; }
  .innovation-quote__copy h2 { font-size: var(--type-component); }
}

@media (prefers-reduced-motion: reduce) {
  .innovation-tabs { scroll-behavior: auto; }
}