/*
Theme Name: Reynard 2026
Theme URI: https://reynard.nl/
Author: Reynard
Description: Lightweight custom WordPress theme for the Reynard 2.0 website.
Version: 0.1.0
Text Domain: reynard
*/

/* Keep the licensed Reynard typeface on the same origin as the theme. This
   removes the extra DNS/TLS request to reynard.nl and lets the browser reuse
   the font cache across every page. */
@font-face {
  font-family: "ConfigRounded";
  src: url("assets/fonts/config-rounded-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "ConfigRounded";
  src: url("assets/fonts/config-rounded-bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "ConfigRounded";
  src: url("assets/fonts/config-rounded-extra-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "ConfigRounded";
  src: url("assets/fonts/config-rounded-black.woff") format("woff");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "ConfigRounded";
  src: url("assets/fonts/config-rounded-italic.woff") format("woff");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "ConfigRounded";
  src: url("assets/fonts/config-rounded-extra-bold-italic-remote.woff2") format("woff2");
  font-style: italic;
  font-weight: 800 900;
  font-display: swap;
}

:root {
  --color-orange: #ff6600;
  --color-black: #000000;
  --color-ink: #050505;
  --color-blue: #262262;
  --color-muted: #5c5e62;
  --color-soft: #f2f2f2;
  --color-page-soft: rgba(245, 245, 247, 0.93);
  --color-white: #ffffff;
  --font-display: "ConfigRounded", "Arial Rounded MT Bold", Arial, sans-serif;
  --font-body: "ConfigRounded", Arial, sans-serif;
  --container: min(100% - 3rem, 1349px);
  --content: min(100% - 3rem, 980px);
  --radius: 4px;
  /* Shared editorial system: use these instead of page-specific type sizes. */
  /* Homepage hero is the reference scale for every page-level H1. */
  --ry-type-hero: clamp(3.3rem, 5.7vw, 5.15rem);
  --ry-type-display: clamp(3rem, 5vw, 5.5rem);
  --ry-type-section-heading: clamp(2.5rem, 4vw, 4rem);
  --ry-type-story: clamp(1.65rem, 2.6vw, 3.125rem);
  --ry-type-body: clamp(1.125rem, 1.45vw, 1.5rem);
  --ry-type-article-title: clamp(2.5rem, 4.2vw, 3.75rem);
  --ry-type-article-h2: clamp(1.5rem, 2vw, 1.75rem);
  --ry-type-article-h3: clamp(1.3125rem, 1.7vw, 1.5625rem);
  --ry-type-article-body: clamp(1.0625rem, 1.4vw, 1.25rem);
  --ry-leading-display: 0.9;
  --ry-leading-story: 0.9;
  --ry-leading-body: 1.28;
  --ry-type-faq-heading: clamp(1.875rem, 2.8vw, 2.5rem);
  --ry-type-faq-question: clamp(1.125rem, 1.8vw, 1.5625rem);
  --ry-hero-block-size: min(78rem, 100svh);
  --ry-button-height: 40px;
  --ry-article-width: 1230px;
  /* Shared service-page component system. */
  --ry-service-content: 1128px;
  --ry-service-gutter: 48px;
  --ry-service-section-space: clamp(72px, 7vw, 112px);
  --ry-service-heading: clamp(2rem, 3.35vw, 3rem);
  --ry-service-card-heading: clamp(1.75rem, 2.2vw, 2.5rem);
  --ry-service-body: clamp(1.0625rem, 1.4vw, 1.25rem);
  --ry-service-leading: 1.22;
  --ry-service-radius: 5px;
  --ry-service-story-height: 100svh;
}

/* Shared service-page contact block */
.reynard-offshore-service-page .offshore-contact--service-standard {
  min-height: 0;
  padding: clamp(66px, 6vw, 84px) 48px clamp(64px, 6vw, 82px);
  background: var(--color-white);
}

.reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__panel {
  display: grid;
  grid-template-columns: minmax(270px, 360px) minmax(0, 827px);
  gap: clamp(48px, 6.4vw, 92px);
  align-items: start;
  width: min(100%, 1280px);
  max-width: none;
  margin: 0 auto;
}

.reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__intro,
.reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__form {
  width: 100%;
  max-width: none;
}

.reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__intro .eyebrow {
  display: block;
  margin: 0 0 14px;
  color: var(--color-orange);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__intro h2 {
  max-width: 370px;
  margin: 0;
  color: var(--color-black);
  font-family: var(--font-display);
  font-size: clamp(34px, 2.8vw, 44px);
  font-style: normal;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 0.96;
  text-transform: uppercase;
  text-wrap: balance;
}

.reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__intro p {
  max-width: 350px;
  margin: 20px 0 0;
  color: #242630;
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: pretty;
}

.reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__form {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.9fr);
  grid-template-areas:
    "fields details"
    "consent submit";
  gap: 0 clamp(24px, 2.6vw, 38px);
  margin-top: 0;
}

.reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 58px clamp(20px, 2.2vw, 32px);
}

.reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form label > span {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.05;
}

.reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form input[type="text"],
.reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form input[type="email"],
.reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form input[type="tel"] {
  height: 40px;
}

.reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form textarea {
  height: 139px;
  min-height: 139px;
}

.reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form__consent {
  align-items: flex-start;
  margin-top: 28px;
}

.reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form__consent span {
  font-size: 13px;
  line-height: 1.25;
}

.reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form__submit {
  width: 100%;
  min-height: 40px;
  margin-top: 28px;
}

@media (max-width: 920px) {
  .reynard-offshore-service-page .offshore-contact--service-standard {
    padding: 64px 32px 72px;
  }

  .reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__panel {
    grid-template-columns: 1fr;
    gap: 48px;
    width: min(100%, 760px);
  }

  .reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__intro h2 {
    max-width: 620px;
    font-size: clamp(34px, 6.8vw, 48px);
    line-height: 0.98;
  }

  .reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__intro p {
    max-width: 580px;
  }

  .reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__form {
    grid-template-columns: 1fr;
    grid-template-areas:
      "fields"
      "details"
      "consent"
      "submit";
    gap: 24px;
  }

  .reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form__fields {
    gap: 24px;
  }

  .reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form__consent,
  .reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form__submit {
    margin-top: 0;
  }

  .reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form__submit {
    width: min(100%, 316px);
    justify-self: start;
  }
}

/* Toolbox Suite landing page */
.toolbox-suite-page {
  overflow: hidden;
  overflow: clip;
  background: #edf5fa;
  color: var(--color-ink);
}

.toolbox-suite-hero {
  position: relative;
  overflow: clip;
  padding: clamp(4.5rem, 10vw, 9.5rem) max(1.5rem, calc((100vw - 1240px) / 2)) 0;
  background: #edf5fa;
}

.toolbox-suite-hero__heading {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
}

.toolbox-suite-hero__heading .eyebrow {
  margin-bottom: clamp(0.85rem, 1.5vw, 1.25rem);
}

.toolbox-suite-hero h1,
.toolbox-suite-overview h2,
.toolbox-suite-features h2,
.toolbox-suite-cta h2 {
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.86;
  text-transform: uppercase;
}

.toolbox-suite-hero h1 {
  max-width: 13ch;
  color: var(--color-orange);
  font-size: clamp(3.45rem, 8vw, 8.8rem);
  font-style: italic;
}

.toolbox-suite-hero__scroll {
  min-height: clamp(34rem, 74vw, 68rem);
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
}

.toolbox-suite-hero__sticky {
  position: sticky;
  top: clamp(4rem, 14vh, 9.5rem);
  display: grid;
  min-height: clamp(34rem, 42vw, 40rem);
  place-items: center;
}

.toolbox-suite-video {
  position: relative;
  width: min(84vw, 60rem);
  overflow: hidden;
  border: 1px solid rgba(31, 31, 41, 0.09);
  border-radius: 1.25rem;
  box-shadow: 0 2.25rem 4.75rem rgba(31, 31, 41, 0.16);
  transform: scale(var(--toolbox-video-scale, 0.42));
  transform-origin: center;
  will-change: transform;
}

.toolbox-suite-video::before {
  display: block;
  padding-top: 56.25%;
  content: "";
}

.toolbox-suite-video__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.toolbox-suite-overview {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(3rem, 9vw, 10rem);
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(5rem, 10vw, 10rem) 0;
}

.toolbox-suite-overview__visual {
  display: grid;
  place-items: center;
}

.toolbox-suite-device {
  position: relative;
  width: min(100%, 29rem);
  aspect-ratio: 0.76;
  overflow: hidden;
  border: clamp(0.55rem, 1.2vw, 0.9rem) solid #1f1f29;
  border-radius: clamp(1.7rem, 3vw, 2.7rem);
  background: #dceaf3;
  box-shadow: 1.5rem 1.8rem 0 #282262;
}

.toolbox-suite-device > img,
.toolbox-suite-device__spline {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.toolbox-suite-device > img {
  object-fit: cover;
  object-position: 70% center;
}

.toolbox-suite-device__spline {
  visibility: hidden;
  border: 0;
}

.toolbox-suite-device.is-interactive .toolbox-suite-device__spline {
  visibility: visible;
}

.toolbox-suite-overview__copy {
  max-width: 39rem;
}

.toolbox-suite-overview h2 {
  max-width: 8.5ch;
  font-size: clamp(3rem, 5.8vw, 6.25rem);
}

.toolbox-suite-overview p {
  max-width: 46ch;
  margin: clamp(1.5rem, 2.5vw, 2.25rem) 0;
  color: rgba(31, 31, 41, 0.76);
  font-size: clamp(1.02rem, 1.5vw, 1.23rem);
  line-height: 1.45;
}

.toolbox-suite-features {
  padding: clamp(5rem, 10vw, 9rem) max(1.5rem, calc((100vw - 1240px) / 2));
  background: #282262;
  color: var(--color-white);
}

.toolbox-suite-features__heading {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(17rem, 0.48fr);
  column-gap: clamp(3rem, 10vw, 10rem);
  align-items: end;
  max-width: 1240px;
  margin: 0 auto clamp(2.5rem, 5vw, 4.25rem);
}

.toolbox-suite-features .eyebrow {
  grid-column: 1 / -1;
  color: #ff8a45;
}

.toolbox-suite-features h2 {
  max-width: 9ch;
  font-size: clamp(3rem, 6.5vw, 7rem);
}

.toolbox-suite-features__heading p {
  max-width: 31ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.4vw, 1.16rem);
  line-height: 1.45;
}

.toolbox-suite-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 1240px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.2);
}

.toolbox-suite-feature-card {
  display: flex;
  flex-direction: column;
  min-height: 30rem;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: #282262;
}

.toolbox-suite-feature-card__number {
  display: block;
  margin-bottom: auto;
  color: #ff8a45;
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.toolbox-suite-feature-card h3 {
  max-width: 11ch;
  margin: 3.2rem 0 0.75rem;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
}

.toolbox-suite-feature-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.96rem;
  line-height: 1.43;
}

.toolbox-suite-feature-card ul {
  display: grid;
  gap: 0.35rem;
  padding: 0;
  margin: 1.4rem 0 1.6rem;
  list-style: none;
}

.toolbox-suite-feature-card li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.87rem;
  font-weight: 700;
}

.toolbox-suite-feature-card li::before {
  width: 0.45rem;
  height: 0.45rem;
  content: "";
  border-radius: 50%;
  background: var(--color-orange);
}

.toolbox-suite-feature-card__link {
  display: inline-flex;
  gap: 0.8rem;
  align-items: center;
  width: max-content;
  margin-top: auto;
  color: var(--color-white);
  font-size: 0.93rem;
  font-weight: 900;
  text-decoration: none;
}

.toolbox-suite-feature-card__link span {
  color: #ff8a45;
  font-size: 1.35rem;
  line-height: 0.8;
  transition: transform 180ms ease;
}

.toolbox-suite-feature-card__link:hover span,
.toolbox-suite-feature-card__link:focus-visible span {
  transform: translateX(0.25rem);
}

.toolbox-suite-cta {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  padding: clamp(4rem, 8vw, 7.5rem) max(1.5rem, calc((100vw - 1240px) / 2));
  background: var(--color-orange);
  color: var(--color-white);
}

.toolbox-suite-cta > div {
  max-width: 52rem;
}

.toolbox-suite-cta .eyebrow {
  color: var(--color-white);
}

.toolbox-suite-cta h2 {
  max-width: 18ch;
  font-size: clamp(2.7rem, 5.2vw, 5.75rem);
}

.toolbox-suite-cta .button--light {
  flex: 0 0 auto;
  background: var(--color-white);
  color: var(--color-orange);
}

@media (max-width: 1100px) {
  .toolbox-suite-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbox-suite-feature-card {
    min-height: 24rem;
  }
}

@media (max-width: 760px) {
  .toolbox-suite-hero {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .toolbox-suite-hero h1 {
    width: 100%;
    max-width: 11ch;
    font-size: clamp(2.85rem, 13vw, 5.4rem);
  }

  .toolbox-suite-hero__scroll {
    min-height: 34rem;
    margin-top: 1.5rem;
  }

  .toolbox-suite-hero__sticky {
    top: 5.6rem;
    min-height: 27rem;
  }

  .toolbox-suite-video {
    width: min(92vw, 32rem);
    border-radius: 0.9rem;
    transform: scale(var(--toolbox-video-scale, 0.68));
  }

  .toolbox-suite-overview {
    grid-template-columns: 1fr;
    gap: 3.6rem;
    width: min(100% - 32px, 37rem);
  }

  .toolbox-suite-overview__visual {
    order: 2;
  }

  .toolbox-suite-overview__copy {
    order: 1;
  }

  .toolbox-suite-device {
    width: min(78vw, 25rem);
  }

  .toolbox-suite-features {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .toolbox-suite-features__heading {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .toolbox-suite-feature-grid {
    grid-template-columns: 1fr;
  }

  .toolbox-suite-feature-card {
    min-height: 0;
  }

  .toolbox-suite-feature-card h3 {
    margin-top: 2.4rem;
  }

  .toolbox-suite-cta {
    align-items: flex-start;
    flex-direction: column;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (max-width: 360px) {
  .toolbox-suite-video {
    transform: scale(var(--toolbox-video-scale, 0.8));
  }
}

@media (prefers-reduced-motion: reduce) {
  .toolbox-suite-video,
  .toolbox-suite-feature-card__link span {
    transition: none;
  }
}

@media (max-width: 600px) {
  .reynard-offshore-service-page .offshore-contact--service-standard {
    padding: 56px 18px 64px;
  }

  .reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__panel {
    gap: 40px;
  }

  .reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__intro h2 {
    font-size: clamp(31px, 10.8vw, 42px);
  }

  .reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__intro p {
    font-size: 17px;
  }

  .reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form__fields {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form__submit {
    width: 100%;
  }
}

/* Toolbox Suite reference experience */
.toolbox-suite-page {
  overflow: clip;
  background: #e8f2f7;
  color: #1e1b4b;
}

.toolbox-suite-page .resource-wrapper {
  overflow: clip;
  background: #e8f2f7;
}

.scaling-element-header {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 3em;
  min-height: 100vh;
  padding: 25vh 5vw 20vh;
  overflow: clip;
  text-align: center;
  text-transform: uppercase;
  background: #e8f2f7;
}

.scaling-element-header__eyebrow {
  display: none;
}

.scaling-element-header__h1 {
  max-width: 16em;
  margin: 0 0 .25em;
  color: #ff6600;
  font-size: clamp(3.4rem, 8vw, 12rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: .8;
  text-transform: uppercase;
}

.toolbox-suite-intro-actions {
  margin: 0;
}

.scaling-element__small-box {
  position: relative;
  width: min(100%, 20em);
  aspect-ratio: 16 / 9;
  margin: 0;
}

.scaling-element-video {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 25vh;
  min-height: 0;
  padding: 0 5vw 25vh;
  overflow: clip;
  background: #e8f2f7;
}

.scaling-element__big-box {
  position: relative;
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 9;
}

.scaling-video__before {
  position: relative;
  inset: auto;
  padding-top: 56.25%;
  border-radius: 1em;
  background: transparent;
  transform: none;
}

.scaling-video__wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.scaling-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1em;
  background: #d2800f;
  box-shadow: none;
  will-change: transform, width, height;
}

.scaling-video__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.toolbox-suite-phonepreview {
  display: grid;
  grid-template-columns: minmax(17rem, 0.72fr) minmax(18rem, 0.7fr);
  gap: clamp(3.25rem, 10vw, 10rem);
  align-items: center;
  min-height: min(61rem, 100vh);
  padding: clamp(5rem, 10vw, 9rem) max(1.5rem, calc((100vw - 1220px) / 2));
  color: #1e1b4b;
  background: #e8f2f7;
}

.toolbox-suite-phonepreview__device {
  position: relative;
  justify-self: center;
  width: min(100%, 31rem);
  aspect-ratio: 0.66;
  overflow: hidden;
  border: clamp(0.5rem, 1.3vw, 0.9rem) solid #1e1b4b;
  border-radius: clamp(2rem, 4vw, 3.5rem);
  background: #dceaf3;
  box-shadow: 1.4rem 1.4rem 0 #ff6a00;
}

.toolbox-suite-phonepreview__device > img,
.toolbox-suite-phonepreview__spline,
.toolbox-suite-phonepreview__spline spline-viewer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.toolbox-suite-phonepreview__device > img {
  object-fit: cover;
  object-position: 68% center;
}

.toolbox-suite-phonepreview__spline {
  visibility: hidden;
}

.toolbox-suite-phonepreview__device.is-interactive .toolbox-suite-phonepreview__spline {
  visibility: visible;
}

.toolbox-suite-phonepreview__copy h2 {
  max-width: 8.4ch;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  color: #1e1b4b;
  font-size: clamp(3.3rem, 7.3vw, 7.6rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.86;
  text-transform: none;
}

.toolbox-suite-phonepreview .button--light {
  border-color: #1e1b4b;
  background: #1e1b4b;
  color: #fff;
}

.toolbox-suite-functions {
  padding: clamp(4.5rem, 9vw, 8rem) max(1rem, calc((100vw - 1240px) / 2));
  background: #e8f2f7;
}

.toolbox-suite-functions__heading {
  display: flex;
  gap: 1.5rem;
  align-items: end;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto clamp(2rem, 4vw, 3.25rem);
}

.toolbox-suite-functions__heading h2 {
  max-width: 10ch;
  margin: 0;
  color: #1e1b4b;
  font-size: clamp(3.3rem, 7.3vw, 7.7rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.82;
  text-transform: uppercase;
}

.toolbox-suite-demo {
  position: relative;
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  width: min(100%, 1200px);
  min-height: 41rem;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0.8rem;
  background: #fff;
  box-shadow: 0 1.2rem 3.75rem rgba(30, 27, 75, 0.14);
}

.toolbox-suite-demo__sidebar {
  min-height: 41rem;
  color: #fff;
  background: #1e1b4b;
}

.toolbox-suite-demo__brand {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  min-height: 4.7rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.toolbox-suite-demo__brand img {
  width: 5.5rem;
  height: auto;
  filter: brightness(0) invert(1);
}

.toolbox-suite-demo__brand span {
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.toolbox-suite-demo__menu {
  display: grid;
  padding: 0.7rem 0;
}

.toolbox-suite-demo__item {
  display: flex;
  gap: 0.72rem;
  align-items: center;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.18;
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.toolbox-suite-demo__item:hover,
.toolbox-suite-demo__item:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.11);
  outline: 0;
}

.toolbox-suite-demo__item.is-active {
  color: #1e1b4b;
  background: #fff;
}

.toolbox-suite-demo__item--sub {
  padding-left: 2.75rem;
  font-size: 0.81rem;
  font-weight: 500;
}

.toolbox-suite-demo__icon,
.toolbox-suite-demo__close {
  flex: 0 0 1.35rem;
  width: 1.35rem;
  height: 1.35rem;
  font-size: 1.25rem;
  line-height: 1.35rem;
  text-align: center;
}

.toolbox-suite-demo__panel {
  position: relative;
  display: grid;
  align-content: center;
  max-width: 34rem;
  min-height: 100%;
  padding: clamp(2rem, 5vw, 4.5rem);
  color: #313131;
  background: #fff;
}

.toolbox-suite-demo__panel h3 {
  max-width: 15ch;
  margin: 0 2rem 1rem 0;
  color: #1e1b4b;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.9;
  text-transform: uppercase;
}

.toolbox-suite-demo__panel p,
.toolbox-suite-demo__panel li {
  font-size: 1rem;
  line-height: 1.5;
}

.toolbox-suite-demo__panel p {
  max-width: 41ch;
  margin: 0;
}

.toolbox-suite-demo__panel ul {
  display: grid;
  gap: 0.35rem;
  padding-left: 1.2rem;
  margin: 1.25rem 0 1.6rem;
}

.toolbox-suite-demo__panel li::marker {
  color: #ff6a00;
}

.toolbox-suite-demo__learn {
  display: inline-flex;
  gap: 0.65rem;
  align-items: center;
  width: max-content;
  min-height: 2.7rem;
  padding: 0.7rem 1rem;
  border-radius: 0.2rem;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 900;
  text-decoration: none;
  background: #ff6a00;
}

.toolbox-suite-demo__learn:hover,
.toolbox-suite-demo__learn:focus-visible {
  color: #fff;
  background: #db5700;
}

.toolbox-suite-demo__learn span {
  font-size: 1.2rem;
  line-height: 0.8;
}

.toolbox-suite-demo__close {
  position: absolute;
  top: 1.35rem;
  right: 1.35rem;
  display: none;
  padding: 0;
  border: 0;
  color: #1e1b4b;
  background: transparent;
  cursor: pointer;
}

.toolbox-suite-demo__close:focus-visible {
  outline: 2px solid #ff6a00;
  outline-offset: 0.2rem;
}

@media (max-width: 760px) {
  .scaling-element-header {
    min-height: 100vh;
    gap: 2rem;
    padding: 19vh 5vw 16vh;
  }

  .scaling-element-header__h1 {
    width: 100%;
    max-width: 16em;
    padding-inline: 0;
    overflow-wrap: normal;
    font-size: 13.5vw;
    white-space: normal;
  }

  .scaling-element__small-box {
    width: min(100%, 15em);
  }

  .scaling-element-video {
    min-height: 0;
    gap: 18vh;
    padding: 0 5vw 18vh;
  }

  .scaling-element__big-box {
    aspect-ratio: 16 / 9;
  }

  .scaling-video {
    border-width: 0;
  }

  .toolbox-suite-phonepreview {
    grid-template-columns: 1fr;
    gap: 4rem;
    min-height: 0;
    padding: 4.75rem 1.2rem;
  }

  .toolbox-suite-phonepreview__device {
    width: min(70vw, 22rem);
    order: 2;
  }

  .toolbox-suite-phonepreview__copy {
    order: 1;
  }

  .toolbox-suite-phonepreview__copy h2 {
    max-width: 9.3ch;
    font-size: clamp(3rem, 13vw, 5.25rem);
  }

  .toolbox-suite-functions {
    padding: 4.7rem 1rem;
  }

  .toolbox-suite-functions__heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .toolbox-suite-functions__heading h2 {
    font-size: clamp(3.05rem, 13.2vw, 5.25rem);
  }

  .toolbox-suite-demo {
    display: block;
    min-height: 0;
    overflow: visible;
    box-shadow: none;
  }

  .toolbox-suite-demo__sidebar {
    min-height: 0;
    overflow: hidden;
    border-radius: 0.8rem 0.8rem 0 0;
  }

  .toolbox-suite-demo__brand {
    min-height: 4.4rem;
  }

  .toolbox-suite-demo__menu {
    display: flex;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .toolbox-suite-demo__item,
  .toolbox-suite-demo__item--sub {
    flex: 0 0 auto;
    min-height: 3rem;
    padding: 0.75rem 0.85rem;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .toolbox-suite-demo__item--sub {
    padding-left: 0.85rem;
  }

  .toolbox-suite-demo__panel {
    max-width: none;
    min-height: 29rem;
    padding: 2.25rem 1.4rem;
    border-radius: 0 0 0.8rem 0.8rem;
  }

  .toolbox-suite-demo__close {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toolbox-suite-demo__item {
    transition: none;
  }
}

/* Careers and High-Voltage Jointer */
.careers-page,
.hvj-page {
  overflow: clip;
  background: var(--color-white);
  color: var(--color-ink);
}

.career-shell {
  width: min(calc(100% - 96px), 1320px);
  margin-inline: auto;
}

.career-hero {
  position: relative;
  display: grid;
  min-height: clamp(700px, 100svh, 980px);
  place-items: center;
  overflow: hidden;
  background: var(--color-blue);
  isolation: isolate;
}

.career-hero__image,
.career-hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.career-hero__image {
  z-index: -2;
  object-fit: cover;
  object-position: center 52%;
}

.career-hero--jointer .career-hero__image {
  object-position: center 48%;
}

.career-hero__shade {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 7, 12, 0.13), rgba(7, 7, 12, 0.18) 36%, rgba(7, 7, 12, 0.62)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent 56%, rgba(0, 0, 0, 0.08));
}

.career-hero__content {
  width: min(calc(100% - 96px), 1180px);
  padding-top: 96px;
  color: var(--color-white);
  text-align: center;
}

.career-hero h1 {
  max-width: 1120px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: var(--ry-type-hero);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.86;
  text-transform: uppercase;
  text-wrap: balance;
}

.career-hero--jointer h1 {
  max-width: 1080px;
  font-size: var(--ry-type-hero);
}

.career-hero__actions,
.career-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(32px, 4vw, 52px);
}

.career-hero__actions .button,
.career-actions .button,
.career-vacancies .button {
  width: min(100%, 230px);
}

.career-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(48px, 8vw, 128px);
  align-items: start;
  padding-block: clamp(92px, 10vw, 160px);
}

.career-intro h2,
.career-pillars h2,
.career-jointer h2,
.career-expectations h2,
.hvj-craft h2,
.hvj-standard h2,
.hvj-pathway h2 {
  margin: 0;
  color: var(--color-blue);
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.4vw, 5.25rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.9;
  text-transform: uppercase;
  text-wrap: balance;
}

.career-intro__copy {
  max-width: 670px;
}

.career-intro__copy p,
.career-jointer__content p,
.hvj-standard p {
  margin: 0 0 1.15em;
  color: #4f5158;
  font-size: clamp(1.25rem, 1.85vw, 1.75rem);
  line-height: 1.25;
  text-wrap: pretty;
}

.career-pillars {
  padding-block: clamp(88px, 9vw, 148px);
  background: #f3f3f5;
}

.career-pillars h2 {
  max-width: 900px;
  margin-bottom: clamp(44px, 6vw, 76px);
}

.career-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
}

.career-pillar {
  min-width: 0;
}

.career-pillar img {
  width: 100%;
  aspect-ratio: 1 / 0.92;
  border-radius: var(--radius);
  object-fit: cover;
}

.career-pillar h3,
.career-expectations h3,
.hvj-pathway h3 {
  margin: 24px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2vw, 2.1rem);
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
}

.career-pillar p,
.career-expectations p,
.hvj-pathway p {
  margin: 0;
  color: #55575d;
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
  line-height: 1.35;
}

.career-jointer {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
  gap: clamp(56px, 8vw, 126px);
  align-items: center;
  padding-block: clamp(96px, 11vw, 172px);
}

.career-jointer__media img {
  width: 100%;
  min-height: 620px;
  border-radius: var(--radius);
  object-fit: cover;
  object-position: center;
}

.career-jointer__content h2 {
  margin-bottom: 40px;
}

.career-actions--left {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.career-expectations {
  padding-block: clamp(92px, 10vw, 160px);
  background: var(--color-blue);
  color: var(--color-white);
}

.career-expectations h2 {
  max-width: 900px;
  margin-bottom: clamp(48px, 6vw, 82px);
  color: var(--color-white);
}

.career-expectations__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.25);
}

.career-expectations article {
  min-height: 330px;
  padding: clamp(28px, 3vw, 44px);
  background: var(--color-blue);
}

.career-expectations article > span,
.hvj-pathway article > span {
  color: var(--color-orange);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
}

.career-expectations h3 {
  margin-top: 74px;
}

.career-expectations p {
  color: rgba(255, 255, 255, 0.76);
}

.career-vacancies {
  display: grid;
  min-height: clamp(520px, 68svh, 760px);
  padding: 72px 48px;
  place-items: center;
  background: var(--color-orange);
  color: var(--color-white);
  text-align: center;
}

.career-vacancies__inner {
  width: min(100%, 960px);
}

.career-vacancies h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 7rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.88;
  text-transform: uppercase;
  text-wrap: balance;
}

.career-vacancies p {
  max-width: 680px;
  margin: 30px auto 34px;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.3;
}

.hvj-craft {
  padding-block: clamp(88px, 9vw, 148px);
  background: #f3f3f5;
}

.hvj-craft__inner,
.hvj-standard__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(56px, 8vw, 126px);
  align-items: center;
}

.hvj-craft__media img,
.hvj-standard img {
  width: 100%;
  min-height: 650px;
  border-radius: var(--radius);
  object-fit: cover;
}

.hvj-craft__content h2 {
  margin-bottom: 42px;
}

.hvj-craft__content ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hvj-craft__content li {
  padding-block: 24px;
  border-top: 1px solid #cacbd0;
  color: #4f5158;
  font-size: clamp(1.0625rem, 1.35vw, 1.3rem);
  line-height: 1.35;
}

.hvj-craft__content li:last-child {
  border-bottom: 1px solid #cacbd0;
}

.hvj-craft__content strong {
  display: block;
  margin-bottom: 6px;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 1.12em;
}

.hvj-standard {
  padding-block: clamp(96px, 11vw, 172px);
}

.hvj-standard h2 {
  margin-bottom: 38px;
}

.hvj-standard .button {
  margin-top: 12px;
}

.hvj-pathway {
  padding-block: clamp(92px, 10vw, 160px);
  background: var(--color-blue);
  color: var(--color-white);
}

.hvj-pathway h2 {
  max-width: 900px;
  margin-bottom: clamp(50px, 6vw, 84px);
  color: var(--color-white);
}

.hvj-pathway__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
}

.hvj-pathway article {
  padding-top: 24px;
  border-top: 2px solid rgba(255, 255, 255, 0.34);
}

.hvj-pathway h3 {
  margin-top: 52px;
}

.hvj-pathway p {
  color: rgba(255, 255, 255, 0.76);
}

@media (max-width: 1050px) {
  .career-shell,
  .career-hero__content {
    width: min(calc(100% - 64px), 1120px);
  }

  .career-intro,
  .career-jointer,
  .hvj-craft__inner,
  .hvj-standard__inner {
    gap: 54px;
  }

  .career-expectations__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .career-expectations article {
    min-height: 270px;
  }
}

@media (max-width: 760px) {
  .career-shell,
  .career-hero__content {
    width: calc(100% - 36px);
  }

  .career-hero {
    min-height: max(660px, 100svh);
  }

  .career-hero__image {
    object-position: 55% center;
  }

  .career-hero--jointer .career-hero__image {
    object-position: 59% center;
  }

  .career-hero__content {
    padding-top: 72px;
  }

  .career-hero h1,
  .career-hero--jointer h1 {
    font-size: clamp(3.35rem, 15vw, 5rem);
    line-height: 0.88;
  }

  .career-hero--jointer h1 {
    font-size: clamp(2.8rem, 12.5vw, 4.15rem);
  }

  .career-hero__actions,
  .career-actions {
    align-items: center;
    flex-direction: column;
  }

  .career-hero__actions .button,
  .career-actions .button,
  .career-vacancies .button {
    width: 100%;
    max-width: 330px;
  }

  .career-intro,
  .career-jointer,
  .hvj-craft__inner,
  .hvj-standard__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .career-intro h2,
  .career-pillars h2,
  .career-jointer h2,
  .career-expectations h2,
  .hvj-craft h2,
  .hvj-standard h2,
  .hvj-pathway h2 {
    font-size: clamp(2.6rem, 12vw, 4rem);
  }

  .career-intro__copy p,
  .career-jointer__content p,
  .hvj-standard p {
    font-size: 1.125rem;
    line-height: 1.38;
  }

  .career-pillars__grid,
  .career-expectations__grid,
  .hvj-pathway__steps {
    grid-template-columns: 1fr;
  }

  .career-pillar img {
    aspect-ratio: 4 / 3;
  }

  .career-jointer__media img,
  .hvj-craft__media img,
  .hvj-standard img {
    min-height: 0;
    aspect-ratio: 4 / 4.5;
  }

  .career-jointer__content {
    order: -1;
  }

  .career-expectations__grid {
    border-right: 0;
    border-left: 0;
  }

  .career-expectations article {
    min-height: 240px;
  }

  .career-expectations h3 {
    margin-top: 52px;
  }

  .career-vacancies {
    min-height: 620px;
    padding-inline: 18px;
  }

  .career-vacancies h2 {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }

  .hvj-standard__inner > div {
    order: -1;
  }
}

/* Full-Service Subcontracting — Figma 654:3907 */
.service-page--full-service .offshore-hero__content {
  width: min(100% - 48px, 981px);
}

.service-page--full-service .offshore-hero__image {
  object-position: center center;
}

.service-page--full-service .offshore-stats-section {
  width: min(100% - 96px, 1224px);
  margin-top: 103px;
  margin-bottom: 84px;
}

.service-page--full-service .offshore-stats {
  gap: 12px;
}

.service-page--full-service .offshore-stat {
  min-height: 580px;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(24, 26, 35, 0.12);
}

.service-page--full-service .offshore-intro {
  width: min(100% - 96px, 1123px);
  padding-top: clamp(84px, 11svh, 118px);
}

.service-page--full-service .offshore-intro p {
  max-width: 1123px;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.03;
  text-wrap: pretty;
}

.service-page--full-service .service-feature--full-service {
  height: 155svh;
}

.service-page--full-service .service-feature--full-service .offshore-connection__stage {
  min-height: 680px;
}

.service-page--full-service .service-feature--full-service .offshore-connection__bg {
  object-position: center center;
}

.service-page--full-service .service-feature--full-service .offshore-connection__shade {
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.42));
}

body.reynard-offshore-service-page .service-page--full-service .service-feature--full-service .offshore-connection__content {
  top: 50%;
  z-index: 2;
  width: min(100% - 64px, 920px);
  transform: translate(-50%, -50%);
}

body.reynard-offshore-service-page .service-page--full-service .service-feature--full-service .rtt-feature__copy p {
  margin: 0 0 0.82em;
  color: var(--color-white);
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 400;
  line-height: 1.03;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72);
}

body.reynard-offshore-service-page .service-page--full-service .service-feature--full-service .offshore-connection__actions {
  margin-top: 10px;
}

.service-page--full-service .service-audience {
  padding-top: var(--ry-service-section-space);
  overflow: hidden;
}

.service-page--full-service .offshore-audience__intro {
  margin-bottom: var(--ry-service-section-space);
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.03;
}

.service-page--full-service .rtt-audience__carousel {
  --rtt-card-width: min(533px, calc((100vw - 144px) / 2.15));
}

.service-page--full-service .rtt-audience-card h3 {
  min-height: 58px;
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.02;
  font-weight: 800;
}

.service-page--full-service .offshore-deliverables {
  border-color: var(--color-blue);
}

.service-page--full-service .offshore-deliverables h2 {
  color: var(--color-orange);
}

.service-page--full-service .offshore-deliverables p {
  text-transform: none;
}

.service-page--full-service .offshore-why > img {
  height: min(42vw, 580px);
  object-fit: cover;
  object-position: center center;
}

.service-page--onshore .offshore-why > img {
  height: min(42vw, 580px);
  object-fit: cover;
  object-position: center center;
}

.service-page--full-service .offshore-contact--figma .offshore-contact__intro .eyebrow {
  display: none;
}

.service-page--full-service .offshore-contact--figma .offshore-contact__intro h2 {
  margin: 0;
  color: var(--color-black);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: none;
}

.service-page--full-service .offshore-contact--figma .offshore-contact__intro p {
  margin: 5px 0 0;
  color: var(--color-black);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.15;
}

@media (min-width: 921px) {
  .service-page--full-service .offshore-contact--figma {
    padding: 66px 49px 50px;
  }

  .service-page--full-service .offshore-contact--figma .offshore-contact__panel {
    display: block;
    width: min(100%, 1342px);
    max-width: none;
    margin: 0 auto;
  }

  .service-page--full-service .offshore-contact--figma .offshore-contact__intro,
  .service-page--full-service .offshore-contact--figma .offshore-contact__form {
    width: min(100%, 839px);
  }

  .service-page--full-service .offshore-contact--figma .offshore-contact__form {
    grid-template-columns: minmax(0, 486px) minmax(0, 316px);
    gap: 0 37px;
    margin-top: 48px;
  }

  .service-page--full-service .offshore-contact--figma .contact-page-form__fields {
    grid-template-columns: repeat(2, minmax(0, 221px));
    gap: 39px 38px;
  }
}

@media (max-width: 1120px) and (min-width: 761px) {
  .service-page--full-service .offshore-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-page--full-service .offshore-stat {
    min-height: 430px;
  }

  .service-page--full-service .offshore-stat h3 {
    right: 18px;
    bottom: 24px;
    left: 18px;
  }

  .service-page--full-service .rtt-audience__carousel {
    --rtt-card-width: calc((100vw - 124px) / 2);
  }

  body.reynard-offshore-service-page .service-page--full-service .service-feature--full-service .rtt-feature__copy p {
    font-size: clamp(22px, 2.7vw, 30px);
  }
}

@media (max-width: 920px) {
  .service-page--full-service .offshore-contact--figma .offshore-contact__intro h2 {
    font-size: clamp(25px, 7vw, 28px);
  }
}

@media (max-width: 760px) {
  .service-page--full-service .offshore-hero {
    min-height: 100svh;
  }

  .service-page--full-service .offshore-hero__content {
    width: min(100% - 16px, 520px);
  }

  .service-page--full-service .offshore-hero h1 {
    font-size: clamp(31px, 9.2vw, 38px);
    line-height: 0.92;
  }

  .service-page--full-service .offshore-hero__actions,
  .service-page--full-service .offshore-connection__actions {
    width: min(100%, 320px);
  }

  .service-page--full-service .offshore-hero__actions .button,
  .service-page--full-service .offshore-connection__actions .button {
    width: 100%;
  }

  .service-page--full-service .offshore-stats-section {
    width: min(100% - 32px, 520px);
    margin: 64px auto 56px;
  }

  .service-page--full-service .offshore-stats {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 16px;
  }

	.service-page--full-service .offshore-stat {
		height: min(132vw, 570px);
		min-height: 0;
	}

  .service-page--full-service .offshore-intro-scroll {
    height: 145svh;
  }

  .service-page--full-service .offshore-intro__stage {
    top: 64px;
    height: calc(100svh - 64px);
  }

  .service-page--full-service .offshore-intro {
    width: min(100% - 36px, 520px);
    padding: 12svh 0 130px;
  }

  .service-page--full-service .offshore-intro p {
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.08;
  }

  .service-page--full-service .offshore-intro__cable {
    right: -175px;
    bottom: -5px;
    width: 760px;
  }

  .service-page--full-service .service-feature--full-service {
    height: 150svh;
  }

  .service-page--full-service .service-feature--full-service .offshore-connection__stage {
    min-height: 720px;
  }

  body.reynard-offshore-service-page .service-page--full-service .service-feature--full-service .offshore-connection__content {
    width: min(100% - 34px, 520px);
  }

  body.reynard-offshore-service-page .service-page--full-service .service-feature--full-service .rtt-feature__copy p {
    margin-bottom: 0.85em;
    font-size: clamp(18px, 5.4vw, 22px);
    line-height: 1.14;
    text-wrap: pretty;
  }

  .service-page--full-service .offshore-audience__intro {
    width: min(100% - 36px, 520px);
    margin-bottom: var(--ry-service-section-space);
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.08;
  }

  .service-page--full-service .rtt-audience__carousel {
    --rtt-card-width: min(84vw, 420px);
  }

  .service-page--full-service .offshore-why > img {
    height: min(78vw, 420px);
  }

  .service-page--onshore .offshore-why > img {
    height: min(78vw, 420px);
  }
}

/* Services overview page */
.services-overview-page {
  overflow-x: clip;
  background: var(--color-white);
}

.services-overview-hero {
  position: relative;
  display: grid;
  min-height: clamp(680px, 100svh, 967px);
  overflow: hidden;
  padding: clamp(88px, 10svh, 132px) 24px clamp(32px, 5svh, 56px);
  color: var(--color-white);
  place-items: center;
}

.services-overview-hero__image,
.services-overview-hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.services-overview-hero__image {
  object-fit: cover;
  object-position: center 46%;
}

.services-overview-hero__shade {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.34)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 48%, rgba(0, 0, 0, 0.1));
}

.services-overview-hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.6svh, 28px);
  width: min(100%, 880px);
  text-align: center;
  transform: translateY(-1.5svh);
}

.services-overview-hero h1 {
  margin: 0;
  color: var(--color-white);
  font-size: var(--ry-type-hero);
  font-style: italic;
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
}

.services-overview-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.services-overview-hero__actions .button {
  width: 200px;
  min-width: 200px;
}

.services-grid--overview {
  padding-top: clamp(72px, 8vw, 116px);
  padding-bottom: clamp(70px, 7vw, 108px);
}

.services-grid .service-card h2 {
  max-width: none;
  font-size: clamp(1.125rem, 1.8vw, 2.15rem);
  line-height: 1.02;
}

.services-grid .service-card h2 span {
  display: block;
  white-space: nowrap;
}

@media (max-width: 920px) {
  .services-overview-hero {
    min-height: clamp(650px, 92svh, 820px);
  }

}

@media (max-width: 560px) {
  .services-overview-hero {
    min-height: 100svh;
    padding: 92px 16px 28px;
  }

  .services-overview-hero__image {
    object-position: 56% center;
  }

  .services-overview-hero__content {
    width: 100%;
    gap: 18px;
    transform: none;
  }

  .services-overview-hero h1 {
    font-size: clamp(42px, 12vw, 58px);
    line-height: 0.9;
  }

  .services-overview-hero__actions {
    width: 100%;
    margin-top: 4px;
  }

  .services-overview-hero__actions .button {
    width: min(100%, 300px);
    min-width: 0;
  }

  .services-grid--overview {
    padding-top: 64px;
    padding-bottom: 72px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.35;
  position: relative;
}

.ry-body-copy {
  font-size: var(--ry-type-body);
  font-weight: 400;
  line-height: var(--ry-leading-body);
}

.ry-story-copy {
  font-size: var(--ry-type-story);
  font-weight: 400;
  line-height: var(--ry-leading-story);
}

.ry-display-title {
  font-size: var(--ry-type-display);
  font-style: italic;
  font-weight: 900;
  line-height: var(--ry-leading-display);
  text-transform: uppercase;
}

.ry-section-title {
  font-size: var(--ry-type-section-heading);
  font-weight: 800;
  line-height: 1;
}

.service-section__inner {
  width: min(calc(100% - var(--ry-service-gutter) - var(--ry-service-gutter)), var(--ry-service-content));
  margin-inline: auto;
}

/* Page loading and internal navigation transition */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background: var(--color-white);
  opacity: 1;
  pointer-events: auto;
  will-change: opacity;
}

.page-transition__video,
.page-transition__end-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--color-white);
}

.page-transition__end-frame {
  display: none;
}

.page-transition.is-arrival .page-transition__video {
  display: none;
}

.page-transition.is-arrival .page-transition__end-frame {
  display: block;
}

.page-transition.is-exiting {
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.page-transition.is-idle {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: none;
}

.page-transition.is-preparing {
  visibility: visible;
  pointer-events: auto;
  opacity: 0;
  transition: none;
}

.page-transition.is-entering {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 140ms ease-out;
}

body.is-page-transitioning {
  overflow: hidden;
}

@media (max-width: 560px) {
  .page-transition__video,
  .page-transition__end-frame {
    object-position: 50% 50%;
  }
}

/* About page: interactive offshore project experience */
.reynard-about-page {
  background: #0b0b0d;
}

.reynard-about-page .site-footer {
  background: var(--color-white);
}

.project-visualizer {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - 56px);
  border-top: 2px solid var(--color-orange);
  background: #0b0b0d;
  color: var(--color-white);
  isolation: isolate;
}

.project-visualizer__rail {
  position: absolute;
  top: 34px;
  bottom: 34px;
  left: 18px;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  border-left: 1px solid rgba(255, 102, 0, 0.7);
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.project-visualizer__header {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(480px, 0.95fr);
  gap: clamp(48px, 7vw, 120px);
  width: min(100% - 112px, 1540px);
  margin: 0 auto;
  padding: clamp(62px, 7vw, 108px) 0 0;
}

.project-visualizer__copy {
  max-width: 720px;
}

.project-visualizer__eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--color-orange);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.project-visualizer h1 {
  max-width: 670px;
  margin: 0;
  font-size: var(--ry-type-hero);
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.94;
  text-transform: uppercase;
}

.project-visualizer__body {
  display: grid;
  gap: 9px;
  max-width: 660px;
  margin-top: 26px;
}

.project-visualizer__body p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

.project-visualizer__cta {
  min-width: 238px;
  margin-top: 26px;
}

.project-visualizer__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 0;
  margin: 24px 0 0;
}

.project-visualizer__stats > div {
  min-height: 132px;
  padding: 7px 24px 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.project-visualizer__stats > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.project-visualizer__stats dt {
  margin-bottom: 19px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-visualizer__stats dd {
  margin: 0;
  color: var(--color-orange);
  font-size: clamp(35px, 3vw, 52px);
  font-weight: 900;
  line-height: 0.9;
  white-space: nowrap;
}

.project-visualizer__stats dd span {
  color: var(--color-white);
  font-size: 0.55em;
}

.project-visualizer__stats dd small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.3em;
  text-transform: uppercase;
}

.project-visualizer__scene {
  position: relative;
  z-index: 1;
  min-height: clamp(640px, 54vw, 850px);
  margin-top: -54px;
  cursor: grab;
  touch-action: pan-y;
}

.project-visualizer__scene.is-dragging {
  cursor: grabbing;
}

.project-visualizer__scene canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.project-visualizer__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.project-visualizer__fallback[hidden] {
  display: none;
}

.project-visualizer__fallback img {
  width: 92px;
}

.project-marker {
  position: absolute;
  z-index: 2;
  top: var(--marker-y, 50%);
  left: var(--marker-x, 50%);
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 0 0 42px 18px;
  opacity: 0;
  pointer-events: none;
  transform: translate(0, -100%);
  transition: opacity 180ms ease;
}

.project-marker.is-visible {
  opacity: 1;
}

.project-marker.is-marker-left {
  padding-right: 18px;
  padding-left: 0;
  text-align: right;
  transform: translate(-100%, -100%);
}

.project-marker::before {
  position: absolute;
  bottom: 7px;
  left: 0;
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.62);
  content: "";
}

.project-marker::after {
  position: absolute;
  bottom: 0;
  left: -3px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--color-orange);
  border-radius: 50%;
  background: #0b0b0d;
  content: "";
}

.project-marker.is-marker-left::before {
  right: 0;
  left: auto;
}

.project-marker.is-marker-left::after {
  right: -3px;
  left: auto;
}

.project-marker span {
  color: var(--color-orange);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.project-marker strong {
  letter-spacing: 0;
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
}

.project-visualizer__hint {
  position: absolute;
  right: 36px;
  bottom: 30px;
  z-index: 2;
  display: flex;
  gap: 9px;
  align-items: center;
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  pointer-events: none;
}

.project-visualizer__hint span {
  width: 28px;
  height: 1px;
  background: var(--color-orange);
}

@media (max-width: 1100px) {
  .project-visualizer__header {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .project-visualizer__copy {
    max-width: 760px;
  }

  .project-visualizer__stats {
    width: min(100%, 720px);
    margin-top: 0;
  }

  .project-visualizer__scene {
    min-height: 740px;
    margin-top: -34px;
  }
}

@media (max-width: 700px) {
  .project-visualizer__rail {
    display: none;
  }

  .project-visualizer__header {
    width: min(100% - 32px, 640px);
    padding-top: 48px;
  }

  .project-visualizer h1 {
    font-size: 44px;
  }

  .project-visualizer__body p {
    font-size: 15px;
  }

  .project-visualizer__cta {
    width: 100%;
  }

  .project-visualizer__stats > div {
    min-height: 104px;
    padding: 4px 12px 12px;
  }

  .project-visualizer__stats dt {
    min-height: 30px;
    margin-bottom: 12px;
    font-size: 9px;
  }

  .project-visualizer__stats dd {
    font-size: 29px;
  }

  .project-visualizer__scene {
    min-height: 660px;
    margin-top: -16px;
  }

  .project-marker {
    min-width: 96px;
    padding-bottom: 32px;
    padding-left: 11px;
  }

  .project-marker.is-marker-left {
    padding-right: 11px;
  }

  .project-marker::before {
    height: 21px;
  }

  .project-marker span {
    font-size: 10px;
  }

  .project-marker strong {
    display: none;
  }

  .project-visualizer__hint {
    right: 16px;
    bottom: 18px;
  }
}

@media (max-width: 420px) {
  .project-visualizer h1 {
    font-size: 39px;
  }

  .project-visualizer__stats {
    grid-template-columns: 1fr 1fr;
  }

  .project-visualizer__stats > div:last-child {
    grid-column: 1 / -1;
    min-height: 92px;
  }

  .project-visualizer__scene {
    min-height: 620px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-visualizer__scene {
    cursor: default;
  }

  .project-visualizer__hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition * {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }

  .page-transition.is-entering,
  .page-transition.is-exiting {
    transition-duration: 180ms;
  }
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, 0);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    background-color 180ms ease;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Shared video controls ---------------------------------------------------- */
.has-video-control,
[data-video-control-container] {
  position: relative;
}

.video-control {
  position: absolute;
  z-index: 12;
  bottom: clamp(12px, 1.5vw, 22px);
  left: clamp(12px, 1.5vw, 22px);
  display: grid;
  width: clamp(42px, 3.25vw, 50px);
  height: clamp(42px, 3.25vw, 50px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  place-items: center;
  background: rgba(20, 22, 29, 0.32);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.video-control:hover {
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(20, 22, 29, 0.48);
  transform: scale(1.04);
}

.video-control:focus-visible {
  outline: 3px solid var(--color-orange);
  outline-offset: 3px;
}

.video-control__icon {
  position: relative;
  display: block;
  width: 15px;
  height: 16px;
}

.video-control[data-state="playing"] .video-control__icon::before,
.video-control[data-state="playing"] .video-control__icon::after {
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 4px;
  border-radius: 1px;
  background: currentColor;
  content: "";
}

.video-control[data-state="playing"] .video-control__icon::before {
  left: 2px;
}

.video-control[data-state="playing"] .video-control__icon::after {
  right: 2px;
}

.video-control[data-state="paused"] .video-control__icon::before {
  position: absolute;
  top: 1px;
  left: 3px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
  content: "";
}

@media (prefers-reduced-motion: reduce) {
  .video-control {
    transition: none;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-white);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  min-height: 56px;
  width: calc(100% - 28px);
  margin: 0 auto;
}

.site-logo img {
  width: 129px;
  height: auto;
}

.site-nav {
  justify-self: center;
}

.site-nav ul {
  display: flex;
  gap: 2rem;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-nav a {
  font-size: 14px;
  font-weight: 800;
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background: var(--color-ink);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 99px;
  min-height: var(--ry-button-height);
  padding: 0.72rem 1.45rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-orange);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
}

.button--light {
  background: var(--color-white);
  color: var(--color-orange);
}

.button--dark {
  background: var(--color-blue);
  color: var(--color-white);
}

.button--outline {
  border: 2px solid var(--color-orange);
  background: var(--color-white);
  color: var(--color-orange);
}

.hero {
  position: relative;
  min-height: calc(100svh - 56px);
  overflow: hidden;
  background: var(--color-ink);
  color: var(--color-white);
}

.hero-carousel {
  isolation: isolate;
}

.carousel-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  overflow: hidden;
}

.hero-carousel__track,
.hero-slide {
  min-height: calc(100svh - 56px);
}

.hero__image,
.panel-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide::after,
.panel-slide::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.55));
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: calc(100svh - 56px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(7rem, 10vw, 10rem) 1.5rem clamp(9rem, 12vw, 12rem);
  text-align: center;
}

.hero h1,
.hero h2 {
  max-width: 13ch;
  margin: 0;
  font-size: var(--ry-type-hero);
  font-style: italic;
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
}

.hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.panel-eyebrow {
  display: block;
  margin-bottom: 0.85rem;
  color: var(--color-orange);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.carousel-controls {
  position: absolute;
  right: 0;
  bottom: 1.2rem;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  pointer-events: none;
}

.hero-carousel__controls {
  bottom: 5.2rem;
}

.carousel-arrow,
.carousel-dot {
  pointer-events: auto;
}

.carousel-arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  color: var(--color-white);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.carousel-dots {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: rgba(255, 255, 255, 0.42);
  cursor: pointer;
}

.carousel-dot.is-active {
  background: var(--color-white);
}

.hero__proof {
  position: absolute;
  right: 0;
  bottom: 76px;
  left: 0;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.65);
  text-align: center;
}

.hero__proof p {
  margin: -2rem 0 0;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.client-strip {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 60px;
  overflow: hidden;
}

.client-strip img {
  width: 100%;
  height: 60px;
  object-fit: cover;
}

.cookie-card {
  position: absolute;
  right: max(1rem, calc((100% - 900px) / 2));
  bottom: 156px;
  left: max(1rem, calc((100% - 900px) / 2));
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: end;
  max-width: 900px;
  padding: 1.25rem;
  margin: 0 auto;
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
}

.cookie-card[hidden] {
  display: none;
}

.cookie-card h2 {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.cookie-card p {
  max-width: 62ch;
  margin: 0;
  color: #303030;
  font-size: 0.72rem;
}

.cookie-card__actions {
  display: flex;
  gap: 0.75rem;
}

.section {
  width: var(--container);
  margin: 0 auto;
}

.full-width-band,
.full-bleed-split {
  width: 100%;
}

.full-width-content {
  width: var(--container);
  margin-right: auto;
  margin-left: auto;
}

.feature-carousel {
  display: grid;
  grid-template-columns: minmax(0, 1024fr) minmax(220px, 341fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.image-card {
  position: relative;
  min-height: clamp(480px, 52vw, 720px);
  overflow: hidden;
  background: var(--color-ink);
  color: var(--color-white);
}

.image-card::after {
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
}

.image-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.image-card__content {
  position: absolute;
  right: clamp(1.5rem, 4vw, 4rem);
  bottom: clamp(2rem, 5vw, 4rem);
  left: clamp(1.5rem, 4vw, 4rem);
  z-index: 1;
}

.image-card h2,
.image-card h3 {
  max-width: 11ch;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
}

.card-actions {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

.dots {
  display: flex;
  gap: 0.45rem;
  justify-content: center;
  margin: 1.25rem 0 3rem;
}

.dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b7b7b7;
}

.dots span:first-child {
  background: #333333;
}

.promo-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 0;
}

.promo-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 39%);
  min-height: 218px;
  overflow: hidden;
  background: var(--color-white);
}

.promo-card__copy {
  padding: 1.8rem 1.4rem;
}

.promo-card h2 {
  max-width: 13ch;
  margin: 0 0 0.45rem;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.promo-card p {
  max-width: 23ch;
  margin: 0 0 1.3rem;
  color: var(--color-muted);
  font-size: 1.05rem;
}

.promo-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  object-fit: cover;
}

.promo-card--equipment h2 {
  max-width: none;
  white-space: nowrap;
}

.promo-card--equipment img {
  object-position: center bottom;
}

.promo-card--careers img {
  object-position: center bottom;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  padding-bottom: 3.2rem;
}

.service-card {
  min-height: 489px;
}

.service-card h2 {
  max-width: 12ch;
  font-size: clamp(1.85rem, 2vw, 2.35rem);
}

.map-section {
  margin-top: 0;
  background: var(--color-soft);
}

.map-canvas,
.map-canvas img,
.map-canvas .wpgmza_map {
  width: 100%;
  height: clamp(320px, 45vw, 633px);
}

.map-canvas img {
  object-fit: cover;
}

.map-intro {
  padding: 3.8rem 0 3rem;
}

.map-intro h2 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.25rem, 3.2vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.map-intro p {
  margin: 0 0 1.1rem;
  font-size: 1.05rem;
  font-weight: 900;
  text-transform: uppercase;
}

.section-heading {
  width: var(--container);
  margin: 0 auto;
  padding: 4.5rem 0 2rem;
}

.section-heading h2 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.4rem, 4vw, 4.7rem);
  font-weight: 900;
  line-height: 0.96;
  text-transform: uppercase;
}

.panel-carousel {
  position: relative;
  background: var(--color-ink);
  color: var(--color-white);
}

.panel-carousel .section-heading {
  position: relative;
  z-index: 2;
  color: var(--color-white);
}

.panel-carousel__track {
  min-height: clamp(620px, 72vw, 820px);
}

.panel-slide {
  min-height: clamp(620px, 72vw, 820px);
}

.panel-slide__content {
  position: absolute;
  right: clamp(1.5rem, 5vw, 5rem);
  bottom: clamp(5rem, 8vw, 7rem);
  left: clamp(1.5rem, 5vw, 5rem);
  z-index: 1;
}

.panel-slide h3 {
  max-width: 12ch;
  margin: 0 0 1.4rem;
  font-size: clamp(2.6rem, 5vw, 5.6rem);
  font-weight: 900;
  line-height: 0.95;
  text-transform: uppercase;
}

.news-section {
  width: 100%;
  margin: 0;
  padding: 0 0 5rem;
}

.news-section > .section-heading,
.news-section > .news-feature,
.news-section > .news-grid,
.news-more {
  width: var(--container);
  margin-right: auto;
  margin-left: auto;
}

.news-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  min-height: 420px;
  margin-bottom: 2rem;
  background: var(--color-white);
}

.news-feature__image,
.news-card__image {
  display: block;
}

.news-feature__image,
.news-feature img,
.news-card__image,
.news-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-feature__copy,
.news-card__copy {
  padding: 2rem;
}

.eyebrow {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--color-orange);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.news-feature h3,
.news-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.news-feature h3 a,
.news-card h3 a {
  text-decoration: none;
}

.news-feature p,
.news-card p {
  max-width: 24ch;
  margin: 0 0 1.2rem;
  color: var(--color-muted);
  font-size: 1.05rem;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
}

.news-card {
  min-height: 444px;
  background: var(--color-white);
}

.news-card__image {
  height: 226px;
}

.date {
  display: block;
  color: #929292;
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
}

.news-more {
  display: flex;
  justify-content: center;
  margin-top: 2.4rem;
}

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.1fr repeat(3, 1fr);
  gap: 4rem;
  width: var(--content);
  margin: 0 auto;
  padding: 5rem 0 4rem;
}

.site-footer img {
  width: 86px;
  margin-bottom: 1.1rem;
}

.site-footer p,
.site-footer a {
  color: #555555;
  font-size: 0.8rem;
}

.site-footer h2 {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 900;
}

.site-footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-footer li + li {
  margin-top: 0.35rem;
}

.site-footer__bottom {
  border-top: 1px solid #efefef;
  padding: 1.5rem 0;
  color: #9a9a9a;
  font-size: 0.75rem;
  text-align: center;
}

@media (max-width: 920px) {
  .site-header__inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .site-nav,
  .header-cta {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  .site-header.is-open .site-nav {
    display: block;
    grid-column: 1 / -1;
    justify-self: stretch;
    padding: 1rem 0 1.5rem;
  }

  .site-header.is-open .site-nav ul {
    display: grid;
    gap: 1rem;
  }

  .hero {
    min-height: 720px;
  }

  .cookie-card {
    grid-template-columns: 1fr;
    bottom: 96px;
  }

  .feature-carousel,
  .promo-row,
  .news-grid,
  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .image-card {
    min-height: 420px;
  }

  .promo-card {
    grid-template-columns: 1fr;
  }

  .promo-card img {
    height: 220px;
  }

  .news-feature {
    grid-template-columns: 1fr;
  }

  .news-feature img {
    height: 260px;
  }
}

@media (max-width: 560px) {
  .hero h1,
  .hero h2 {
    font-size: 3rem;
  }

  .hero__actions,
  .card-actions,
  .cookie-card__actions {
    flex-wrap: wrap;
  }

  .button {
    min-width: 128px;
  }

  .section,
  .news-section,
  .news-section > .section-heading,
  .news-section > .news-feature,
  .news-section > .news-grid,
  .news-more,
  .map-intro,
  .section-heading,
  .site-footer__inner {
    width: min(100% - 1rem, 100%);
  }

  .carousel-arrow {
    width: 34px;
    height: 34px;
  }

  .carousel-dot {
    width: 10px;
  }

  .image-card__content {
    right: 1.25rem;
    bottom: 1.4rem;
    left: 1.25rem;
  }
}

/* Reynard homepage design alignment */
:root {
  --container: min(100% - 88px, 1349px);
  --content: min(100% - 2rem, 900px);
  --radius: 0;
}

body {
  background: var(--color-soft);
}

.site-header__inner {
  width: calc(100% - 28px);
  min-height: 56px;
}

.button {
  min-width: 99px;
  min-height: 26px;
  padding: 0.45rem 1.05rem;
  border-radius: 0;
  font-size: 14px;
}

.hero {
  min-height: clamp(690px, 67vw, 950px);
}

.hero::after {
  display: none;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: start center;
  min-height: clamp(430px, 44vw, 720px);
  padding: clamp(5rem, 8vw, 8.75rem) 1rem 0;
  text-align: center;
}

.hero h1,
.hero h2 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(3.3rem, 5.7vw, 5.15rem);
  font-style: italic;
  font-weight: 900;
  line-height: 1.09;
  text-transform: uppercase;
}

.hero__actions {
  margin-top: 2rem;
}

.cookie-card {
  right: max(1rem, calc((100% - 900px) / 2));
  bottom: 156px;
  left: max(1rem, calc((100% - 900px) / 2));
  grid-template-columns: 1fr auto;
  max-width: 900px;
  padding: 1.25rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
}

.hero__proof {
  bottom: 76px;
}

.section {
  width: var(--container);
  margin-right: auto;
  margin-left: auto;
}

.feature-carousel {
  display: grid;
  grid-template-columns: minmax(0, 1024fr) minmax(220px, 341fr);
  gap: 30px;
  width: var(--container);
  padding: 5.4rem 0 2.2rem;
}

.image-card {
  min-height: 580px;
}

.image-card__content {
  right: 2rem;
  bottom: 2.2rem;
  left: 2rem;
}

.image-card h2,
.image-card h3 {
  max-width: 11ch;
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 0.98;
}

.dots {
  display: flex;
  gap: 0.45rem;
  justify-content: center;
  margin: 1.25rem 0 3rem;
}

.dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.promo-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  width: var(--container);
  margin-bottom: 3.3rem;
}

.promo-card {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 39%);
  min-height: 218px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  width: var(--container);
  padding-bottom: 3.2rem;
}

.service-card {
  min-height: 489px;
}

.service-card h2 {
  max-width: 12ch;
  font-size: clamp(1.85rem, 2vw, 2.35rem);
}

.map-canvas,
.map-canvas img,
.map-canvas .wpgmza_map {
  width: 100%;
  height: clamp(320px, 45vw, 633px);
}

.map-canvas img {
  object-fit: cover;
}

.map-intro {
  width: var(--container);
  padding: 3.8rem 0 3rem;
}

.projects {
  display: grid;
  grid-template-columns: minmax(0, 1024fr) minmax(220px, 340fr);
  gap: 31px;
  width: var(--container);
  overflow: hidden;
  padding-bottom: 0;
}

.project-card {
  min-height: 580px;
}

.project-card--narrow {
  min-width: 340px;
}

.news-section {
  width: var(--content);
  margin: 0 auto;
  padding: 4rem 0 4rem;
}

.news-section h2 {
  margin: 0 0 3rem;
  font-size: clamp(1.75rem, 2.2vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
}

.news-section > .section-heading,
.news-section > .news-feature,
.news-section > .news-grid,
.news-more {
  width: auto;
}

.news-feature {
  display: grid;
  grid-template-columns: 372px 1fr;
  min-height: 320px;
  margin-bottom: 2rem;
}

.news-feature__copy,
.news-card__copy {
  padding: 2rem;
}

.news-feature h3,
.news-card h3 {
  font-size: 1.75rem;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.news-card {
  min-height: 444px;
}

.news-more {
  display: flex;
  justify-content: center;
}

@media (max-width: 920px) {
  :root {
    --container: min(100% - 2rem, 100%);
  }

  .hero {
    min-height: 720px;
  }

  .feature-carousel,
  .promo-row,
  .services-grid,
  .projects,
  .news-grid {
    grid-template-columns: 1fr;
  }

  .image-card,
  .project-card,
  .service-card {
    min-height: 420px;
  }

  .news-feature {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  :root {
    --container: min(100% - 1rem, 100%);
  }

  .hero h1,
  .hero h2 {
    font-size: 3rem;
  }

  .cookie-card {
    grid-template-columns: 1fr;
    bottom: 96px;
  }

  .promo-card {
    grid-template-columns: 1fr;
  }
}

/* Hero component */
.hero--home {
  position: relative;
  min-height: clamp(690px, 67vw, 950px);
  overflow: hidden;
  background: #ff6600;
  color: var(--color-white);
}

.hero--home::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.hero--home .hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero--home .hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: start center;
  min-height: clamp(430px, 44vw, 720px);
  padding: clamp(5rem, 8vw, 8.75rem) 1rem 0;
  text-align: center;
}

.hero--home h1 {
  max-width: 11ch;
  margin: 0;
  font-size: var(--ry-type-hero);
  font-style: italic;
  font-weight: 900;
  line-height: 1.09;
  text-transform: uppercase;
}

.hero--home .hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.hero--home .button {
  width: 200px;
  min-height: 40px;
  height: 40px;
  padding: 0.72rem 1.45rem;
  border-radius: 3px;
  font-size: 14px;
}

.hero--home .hero__actions {
  gap: 32px;
}

.hero--home .cookie-card {
  position: absolute;
  right: max(1rem, calc((100% - 900px) / 2));
  bottom: 156px;
  left: max(1rem, calc((100% - 900px) / 2));
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: end;
  max-width: 900px;
  padding: 1.25rem;
  margin: 0 auto;
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
}

.hero--home .cookie-card[hidden] {
  display: none;
}

.hero--home .hero__proof {
  position: absolute;
  right: 0;
  bottom: 76px;
  left: 0;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.65);
  text-align: center;
}

.hero--home .hero__proof p {
  margin: -2rem 0 0;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hero--home .client-strip {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 60px;
  overflow: hidden;
}

.client-strip__track {
  --client-strip-gap: clamp(88px, 8vw, 150px);
  display: flex;
  align-items: center;
  width: max-content;
  height: 60px;
  margin: 0;
  animation: reynard-logo-marquee 50s linear infinite;
  will-change: transform;
}

.client-strip__set {
  display: flex;
  gap: var(--client-strip-gap);
  align-items: center;
  height: 60px;
  padding: 0 var(--client-strip-gap) 0 0;
  margin: 0;
  list-style: none;
}

.client-strip__set li {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 60px;
  background: transparent;
}

.client-strip__track img {
  width: auto;
  height: auto;
  max-width: 190px;
  max-height: 45px;
  object-fit: contain;
  background: transparent;
}

.site-header .header-cta {
  width: 200px;
  height: 40px;
  border-radius: 3px;
}

/* Polylang language toggle */
.site-header__actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 12px;
}

.language-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(5, 5, 5, 0.18);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.88);
}

.language-toggle a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 30px;
  padding: 0 6px;
  border-radius: 2px;
  color: var(--color-ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
}

.language-toggle a:hover,
.language-toggle a:focus-visible {
  background: #efefef;
}

.language-toggle a[aria-current="true"] {
  background: var(--color-ink);
  color: var(--color-white);
}

/* Header mega menu */
.site-header {
  isolation: isolate;
}

.site-nav__list {
  display: flex;
  gap: 2rem;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-nav__item > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 1rem;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
  transition: background 160ms ease;
}

.site-nav__item > a:hover,
.site-nav__item > a:focus-visible,
.site-nav__item--mega.is-active > a {
  background: #f0f0f0;
}

.mega-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 40;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  border-top: 1px solid #dddddd;
  background: var(--color-white);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  pointer-events: none;
}

.site-header.is-mega-open .mega-menu,
.site-header:focus-within .mega-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@supports selector(.site-header:has(.site-nav__item--mega:hover)) {
  .site-header:has(.site-nav__item--mega:hover) .mega-menu,
  .site-header:has(.mega-menu:hover) .mega-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-header:has(.site-nav__item--mega:hover) .site-nav__item--mega > a,
  .site-header:has(.mega-menu:hover) .site-nav__item--mega > a {
    background: #f0f0f0;
  }
}

.mega-menu__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 4rem;
  width: min(100% - 6rem, 1540px);
  min-height: 600px;
  margin: 0 auto;
  padding: 5rem 0 5.5rem;
}

.mega-menu__services {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 3rem 4.2rem;
  align-content: start;
}

.mega-service {
  text-align: center;
}

.mega-service__image {
  display: flex;
  align-items: end;
  justify-content: center;
  height: 138px;
  margin-bottom: 1.4rem;
}

.mega-service__image img {
  width: 100%;
  max-width: 235px;
  max-height: 138px;
  object-fit: contain;
}

.mega-service h2 {
  margin: 0 0 0.65rem;
  color: #1e2028;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.05;
}

.mega-service__actions {
  display: flex;
  gap: 2rem;
  justify-content: center;
}

.mega-service__actions a {
  color: #636363;
  font-size: 0.98rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mega-menu__links {
  display: grid;
  align-content: start;
  gap: 1.55rem;
  border-left: 1px dashed #a9a9a9;
  padding: 3.3rem 0 0 3rem;
}

.mega-menu__links a {
  color: var(--color-ink);
  font-size: 1.1rem;
  font-weight: 900;
}

body.mega-menu-open main,
body.mega-menu-open .site-footer {
  filter: blur(7px);
  transition: filter 160ms ease;
}

body.mega-menu-open::before {
  background: rgba(0, 0, 0, 0.18);
  opacity: 1;
}

body.mega-menu-open {
  overflow-x: hidden;
}

@media (max-width: 1120px) {
  :root {
    --ry-service-gutter: 24px;
  }

  .mega-menu__inner {
    grid-template-columns: 1fr;
    width: min(100% - 2rem, 100%);
    gap: 2rem;
  }

  .mega-menu__services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mega-menu__links {
    border-left: 0;
    border-top: 1px dashed #a9a9a9;
    padding: 2rem 0 0;
  }
}

@media (max-width: 920px) {
  .mega-menu {
    display: none;
  }

  body.mega-menu-open main,
  body.mega-menu-open .site-footer {
    filter: none;
  }
}

/* Feature carousel component */
.feature-carousel-block {
  position: relative;
  width: 100%;
  padding: 5.4rem 0 3rem;
  overflow: hidden;
}

.feature-carousel-block .feature-carousel {
  display: flex;
  gap: 30px;
  width: 100%;
  padding: 0 44px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-padding-left: 44px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.feature-carousel-block .feature-carousel::-webkit-scrollbar {
  display: none;
}

.feature-card {
  position: relative;
  flex: 0 0 calc((100vw - 88px - (30px * 1.25)) / 2.25);
  height: 580px;
  min-height: 580px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-ink);
  color: var(--color-white);
  scroll-snap-align: start;
}

.feature-carousel-block .carousel-slide {
  min-height: 580px;
}

.feature-card::after {
  position: absolute;
  inset: auto 0 0;
  height: 48%;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
}

.feature-card img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.feature-card__content {
  position: absolute;
  right: 2rem;
  bottom: 2.2rem;
  left: 2rem;
  z-index: 1;
}

.feature-card h2 {
  max-width: 11ch;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
}

.feature-carousel__arrow {
  position: absolute;
  top: calc(5.4rem + 290px);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 3px;
  background: rgba(245, 245, 245, 0.92);
  color: var(--color-ink);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.feature-carousel__arrow[hidden] {
  display: none;
}

.feature-carousel__arrow--prev {
  left: 58px;
}

.feature-carousel__arrow--next {
  right: 58px;
}

.feature-carousel__dots {
  display: flex;
  gap: 0.45rem;
  justify-content: center;
  margin-top: 1.25rem;
}

.feature-carousel__dots .carousel-dot {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #b7b7b7;
  cursor: pointer;
}

.feature-carousel__dots .carousel-dot.is-active {
  background: #333333;
}

@media (max-width: 920px) {
  .feature-carousel-block {
    padding: 2rem 0 2.5rem;
  }

  .feature-carousel-block .feature-carousel {
    gap: 16px;
    padding: 0 1rem;
    scroll-padding-left: 1rem;
  }

  .feature-card {
    flex-basis: calc(100vw - 2rem);
    height: 420px;
    min-height: 420px;
  }

  .feature-carousel-block .carousel-slide {
    min-height: 420px;
  }

  .feature-carousel__arrow {
    top: calc(2rem + 210px);
  }

  .feature-carousel__arrow--prev {
    left: 1.4rem;
  }

  .feature-carousel__arrow--next {
    right: 1.4rem;
  }
}

/* Radius system */
:root {
  --radius: 3px;
  --radius-card: 3px;
}

.button,
.site-header .header-cta,
.hero--home .button {
  border-radius: var(--radius);
}

.site-nav__item > a {
  border-radius: var(--radius);
}

.cookie-card,
.hero--home .cookie-card,
.image-card,
.promo-card,
.news-feature,
.news-card,
.map-canvas,
.mega-service__image {
  border-radius: var(--radius-card);
  overflow: hidden;
}

.image-card img,
.promo-card img,
.news-feature__image,
.news-feature img,
.news-card__image,
.news-card img,
.map-canvas img,
.mega-service__image img {
  border-radius: inherit;
}

@keyframes reynard-logo-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-strip__track {
    animation: none;
  }
}

@media (max-width: 920px) {
  .hero--home {
    min-height: 720px;
  }

  .hero--home .cookie-card {
    grid-template-columns: 1fr;
    bottom: 96px;
  }
}

@media (max-width: 560px) {
  .hero--home h1 {
    font-size: 3rem;
  }

  .client-strip__track {
    --client-strip-gap: 40px;
    animation-duration: 16s;
  }

  .client-strip__track img {
    max-width: 160px;
    max-height: 38px;
  }

  .hero--home .hero__actions,
  .hero--home .cookie-card__actions {
    flex-wrap: wrap;
  }

  .hero--home .button {
    min-width: 128px;
    width: 128px;
  }
}

/* Figma mega menu refinement: node 410:789 */
.button,
.site-header .header-cta,
.hero--home .button,
.site-nav a,
.site-nav__item > a {
  font-weight: 600;
}

.hero--home {
  min-height: clamp(760px, 82svh, 980px);
}

.hero--home .hero__content {
  min-height: clamp(520px, 58svh, 790px);
  padding-top: clamp(6rem, 10vh, 9.5rem);
}

.site-header__inner {
  min-height: 75px;
  width: calc(100% - 34px);
  gap: 2rem;
}

.site-logo img {
  width: 173px;
}

.site-nav__list {
  gap: 3rem;
}

.site-nav__item > a {
  min-height: 32px;
  padding: 0 20px;
  border-radius: 5px;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}

.site-nav__item > a:hover,
.site-nav__item > a:focus-visible,
.site-nav__item--mega.is-active > a {
  background: #f0f0f0;
}

.site-header .header-cta {
  width: clamp(200px, 14vw, 269px);
  height: 54px;
  min-height: 54px;
  font-size: 18px;
  border-radius: 3px;
}

.mega-menu {
  border-top: 1px solid #111111;
}

.mega-menu__inner {
  grid-template-columns: minmax(0, 1fr) 258px;
  gap: clamp(2rem, 2.55vw, 49px);
  width: calc(100% - 88px);
  max-width: 1846px;
  min-height: 640px;
  padding: 39px 0 86px;
}

.mega-menu__services {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 250px));
  gap: clamp(12px, 0.9vw, 17px);
  align-content: start;
}

.mega-service {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: center;
}

.mega-service__image {
  display: block;
  width: 100%;
  height: min(446px, 23.05vw);
  min-height: 330px;
  margin: 0 0 24px;
  overflow: hidden;
  border-radius: 8px;
}

.mega-service__image img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.mega-service:nth-child(1) .mega-service__image img {
  object-position: center;
}

.mega-service:nth-child(2) .mega-service__image img {
  object-position: 63% center;
}

.mega-service:nth-child(3) .mega-service__image img {
  object-position: 54% center;
}

.mega-service:nth-child(4) .mega-service__image img {
  object-position: 63% center;
}

.mega-service:nth-child(5) .mega-service__image img {
  object-position: 48% center;
}

.mega-service:nth-child(6) .mega-service__image img {
  object-position: 50% center;
}

.mega-service h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5em;
  padding: 0 4px;
  margin: 0 0 8px;
  color: #1f2129;
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.mega-service__actions {
  display: flex;
  gap: clamp(16px, 1.5vw, 30px);
  justify-content: center;
  margin-top: auto;
}

.mega-service__actions a {
  color: #5f6368;
  font-size: clamp(11px, 0.68vw, 13px);
  font-weight: 400;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mega-menu__links {
  display: grid;
  align-content: start;
  gap: 23px;
  min-height: 518px;
  padding: 38px 0 0 39px;
  border-left: 1px solid #d2d2d2;
}

.mega-menu__links a {
  color: var(--color-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width: 1500px) {
  .site-logo img {
    width: 150px;
  }

  .site-nav__list {
    gap: 2rem;
  }

  .site-nav__item > a,
  .site-header .header-cta {
    font-size: 16px;
  }

  .mega-menu__inner {
    width: calc(100% - 48px);
  }

  .mega-menu__services {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .mega-service__image {
    min-height: 280px;
  }
}

@media (max-width: 1120px) {
  .mega-menu__inner {
    grid-template-columns: 1fr;
    width: min(100% - 2rem, 100%);
    min-height: auto;
    gap: 2rem;
    padding: 2rem 0 3rem;
  }

  .mega-menu__services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mega-menu__links {
    min-height: auto;
    border-left: 0;
    border-top: 1px solid #d2d2d2;
    padding: 2rem 0 0;
  }
}

@media (max-width: 920px) {
  .site-header__inner {
    min-height: 64px;
  }

  .site-logo img {
    width: 130px;
  }

  .site-header .header-cta {
    width: 200px;
    height: 40px;
    min-height: 40px;
    font-size: 14px;
  }

  .hero--home {
    min-height: 780px;
  }
}

/* Global button and primary navigation normalization */
.button,
.site-header .header-cta,
.hero--home .button,
.cookie-card .button,
.card-actions .button,
.feature-card .button,
.promo-card .button,
.image-card .button,
.news-feature .button,
.news-more .button,
.search-submit,
input[type="submit"],
.wp-block-button__link {
  width: 200px;
  min-width: 200px;
  max-width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 0 24px;
  border: 0;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.button--outline,
.academy-program__actions .button--light,
.contact-location__actions > .button--light {
  border: 2px solid var(--color-orange);
  background: var(--color-white);
  color: var(--color-orange);
}

.site-nav a,
.site-nav__item > a {
  font-size: 14px;
  font-weight: 600;
}

.site-nav__item > a {
  min-height: 32px;
  padding: 0 16px;
  border-radius: 3px;
}

.site-header .header-cta {
  width: 200px;
  min-width: 200px;
  height: 40px;
  min-height: 40px;
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 560px) {
  .button,
  .site-header .header-cta,
  .hero--home .button,
  .cookie-card .button,
  .card-actions .button,
  .feature-card .button,
  .promo-card .button,
  .image-card .button,
  .news-feature .button,
  .news-more .button,
  .search-submit,
  input[type="submit"],
  .wp-block-button__link {
    width: 160px;
    min-width: 160px;
  }
}

/* Exact Figma image exports for mega menu */
.mega-menu__inner {
  grid-template-columns: minmax(0, 1620px) minmax(0, 212px);
  gap: 14px;
  min-height: 0;
  padding-bottom: 40px;
}

.mega-menu__services {
  grid-template-columns: repeat(6, 250px);
  gap: 17px;
  justify-content: start;
}

.mega-service__image {
  width: 250px;
  max-width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 250 / 446;
  margin-bottom: 24px;
  border-radius: 8px;
}

.mega-service__image img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.mega-menu__links {
  min-height: 0;
  padding-left: 39px;
}

@media (max-width: 1500px) {
  .mega-menu__inner {
    grid-template-columns: minmax(0, 1fr) 212px;
    gap: 14px;
  }

  .mega-menu__services {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .mega-service__image {
    width: 100%;
  }
}

@media (max-width: 1800px) {
  .mega-menu__inner {
    grid-template-columns: minmax(0, 1fr) 212px;
    width: min(100% - 48px, 1620px);
  }

  .mega-menu__services {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .mega-menu__services {
    grid-template-columns: repeat(3, minmax(0, 250px));
  }
}

/* Header polish */
.site-header {
  box-shadow: none;
}

.site-logo img {
  width: 173px;
  height: auto;
}

.mega-menu {
  border-top: 0;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 280ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 320ms;
  will-change: opacity, transform;
}

.mega-menu__inner {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 260ms ease 60ms,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1) 60ms;
}

.site-header.is-mega-open .mega-menu,
.site-header:focus-within .mega-menu {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

.site-header.is-mega-open .mega-menu__inner,
.site-header:focus-within .mega-menu__inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@supports selector(.site-header:has(.site-nav__item--mega:hover)) {
  .site-header:has(.site-nav__item--mega:hover) .mega-menu,
  .site-header:has(.mega-menu:hover) .mega-menu {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  .site-header:has(.site-nav__item--mega:hover) .mega-menu__inner,
  .site-header:has(.mega-menu:hover) .mega-menu__inner {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-menu,
  .mega-menu__inner {
    transition: none;
    transform: none;
  }
}

@media (max-width: 920px) {
  .site-logo img {
    width: 130px;
  }
}

/* Feature carousel Figma node 431:79 */
.feature-carousel-block {
  padding: 5.4rem 0 3.2rem;
}

.feature-carousel-block .feature-carousel {
  gap: 31px;
  padding: 0 44px;
  scroll-padding-left: 44px;
}

.feature-card {
  flex: 0 0 min(1024px, calc((100vw - 88px - 31px) / 1.25));
  height: 580px;
  min-height: 580px;
  border-radius: 3px;
}

.feature-carousel-block .carousel-slide {
  min-height: 580px;
}

.feature-card img {
  object-fit: cover;
}

.feature-card__content {
  right: 44px;
  bottom: 76px;
  left: 44px;
}

.feature-card h2 {
  max-width: 13ch;
  margin-bottom: 10px;
}

.feature-card .card-actions {
  gap: 14px;
}

.feature-card .button {
  width: 155px;
  min-width: 155px;
}

.feature-carousel__arrow {
  top: calc(5.4rem + 290px);
}

.feature-carousel__arrow--prev {
  left: 58px;
}

.feature-carousel__arrow--next {
  right: 58px;
}

.feature-carousel__dots {
  gap: 8px;
  margin-top: 15px;
}

.feature-carousel__dots .carousel-dot {
  width: 15px;
  height: 15px;
}

@media (min-width: 1800px) {
  .feature-card {
    flex-basis: 1024px;
  }
}

@media (max-width: 920px) {
  .feature-carousel-block {
    padding: 2rem 0 2.5rem;
  }

  .feature-carousel-block .feature-carousel {
    gap: 16px;
    padding: 0 1rem;
    scroll-padding-left: 1rem;
  }

  .feature-card {
    flex-basis: calc(100vw - 2rem);
    height: 420px;
    min-height: 420px;
  }

  .feature-carousel-block .carousel-slide {
    min-height: 420px;
  }

  .feature-card__content {
    right: 24px;
    bottom: 32px;
    left: 24px;
  }

  .feature-card .button {
    width: 155px;
    min-width: 155px;
  }

  .feature-carousel__arrow {
    top: calc(2rem + 210px);
  }
}

/* Homepage lower sections: Figma alignment pass */
.promo-row {
  width: calc(100% - 88px);
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin: 0 auto 53px;
}

.promo-card {
  height: 218px;
  min-height: 218px;
  border-radius: 3px;
}

.promo-card__copy {
  padding: 32px 30px;
}

.promo-card p {
  max-width: 29ch;
}

.services-grid {
  width: calc(100% - 90px);
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin: 0 auto;
  padding-bottom: 51px;
}

.service-card {
  min-height: 489px;
}

.service-card .button {
  width: 155px;
  min-width: 155px;
}

.project-carousel-block {
  position: relative;
  width: 100%;
  padding: 51px 0 42px;
  overflow: hidden;
}

.project-carousel {
  display: flex;
  gap: 31px;
  width: 100%;
  padding: 0 45px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-padding-left: 45px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.project-carousel::-webkit-scrollbar {
  display: none;
}

.project-card {
  flex: 0 0 min(1024px, calc((100vw - 90px - 31px) / 1.25));
  height: 580px;
  min-height: 580px;
  border-radius: 3px;
  scroll-snap-align: start;
}

.project-card img {
  min-height: 0;
}

.project-card .button {
  width: 155px;
  min-width: 155px;
}

.project-carousel-block .feature-carousel__arrow {
  top: calc(51px + 290px);
}

.project-carousel-block .feature-carousel__dots {
  margin-top: 15px;
}

.project-carousel-block .feature-carousel__dots .carousel-dot {
  width: 15px;
  height: 15px;
}

.project-carousel-block + .news-section {
  padding-top: 28px;
}

.site-footer {
  min-height: 503px;
  padding: 0;
  background: var(--color-white);
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(150px, 1.15fr) repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: clamp(28px, 4vw, 56px);
  row-gap: 30px;
  width: min(100% - 40px, 1100px);
  margin: 0 auto;
  padding: 39px 0 0;
}

.site-footer__contact {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.site-footer__group--services {
  grid-column: 2;
  grid-row: 1;
}

.site-footer__group--quick-links {
  grid-column: 3;
  grid-row: 1;
}

.site-footer__group--legal {
  grid-column: 4;
  grid-row: 1;
}

.site-footer__group--careers {
  grid-column: 2;
  grid-row: 2;
}

.site-footer__group--academy {
  grid-column: 3;
  grid-row: 2;
}

.site-footer__logo {
  width: 113px;
  height: auto;
  margin: 0 0 15px;
}

.site-footer .site-footer__logo {
  width: 113px;
  margin: 0 0 15px;
}

.site-footer p,
.site-footer a,
.site-footer li {
  color: #5f6368;
  font-size: 14px;
  line-height: 1.45;
}

.site-footer p {
  margin: 0 0 14px;
}

.site-footer h2 {
  margin: 0 0 5px;
  color: #5f6368;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.site-footer__subheading {
  padding-top: 27px;
}

.site-footer li + li {
  margin-top: 4px;
}

.site-footer__phone {
  font-weight: 800;
}

.site-footer__socials {
  display: flex;
  gap: 9px;
  align-items: center;
}

.site-footer__socials a {
  display: block;
  width: auto;
  height: 22px;
}

.site-footer__socials img {
  display: block;
  width: auto;
  height: 22px;
  margin: 0;
}

.site-footer__certs {
  position: relative;
  z-index: 1;
  display: block;
  width: 354px;
  height: auto;
  margin-top: 92px;
  margin-right: auto;
  margin-left: auto;
}

.site-footer .site-footer__certs {
  width: 354px;
  max-width: none;
  margin: 92px auto 0;
}

.site-footer__bottom {
  position: relative;
  z-index: 1;
  border-top: 0;
  padding: 45px 0 20px;
  color: #5f6368;
  font-size: 14px;
}

.site-footer__vector {
  position: absolute;
  z-index: 0;
  width: auto;
  max-width: none;
  margin: 0;
  pointer-events: none;
}

.site-footer__vector--left {
  bottom: 0;
  left: 0;
  width: 330px;
}

.site-footer__vector--right {
  right: 0;
  bottom: 0;
  width: 230px;
}

.site-footer .site-footer__vector--left {
  width: 330px;
  margin: 0;
}

.site-footer .site-footer__vector--right {
  width: 230px;
  margin: 0;
}

@media (max-width: 1180px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
    width: min(100% - 96px, 900px);
  }
}

@media (max-width: 920px) {
  .promo-row,
  .services-grid {
    width: min(100% - 2rem, 100%);
    grid-template-columns: 1fr;
  }

  .promo-card {
    height: auto;
  }

  .project-carousel {
    gap: 16px;
    padding: 0 1rem;
    scroll-padding-left: 1rem;
  }

  .project-card {
    flex-basis: calc(100vw - 2rem);
    height: 420px;
    min-height: 420px;
  }

  .project-carousel-block .feature-carousel__arrow {
    top: calc(51px + 210px);
  }

  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100% - 2rem, 720px);
    padding-top: 56px;
  }

  .site-footer__contact,
  .site-footer__group--services,
  .site-footer__group--quick-links,
  .site-footer__group--legal,
  .site-footer__group--careers,
  .site-footer__group--academy {
    grid-column: auto;
    grid-row: auto;
  }

  .site-footer__certs {
    width: min(100% - 2rem, 354px);
    margin: 56px auto 0;
  }

  .site-footer .site-footer__certs {
    width: min(100% - 2rem, 354px);
    margin: 56px auto 0;
  }

  .site-footer__vector--left {
    width: 230px;
    opacity: 0.6;
  }

  .site-footer__vector--right {
    width: 170px;
    opacity: 0.75;
  }

  .site-footer .site-footer__vector--left {
    width: 230px;
  }

  .site-footer .site-footer__vector--right {
    width: 170px;
  }
}

@media (max-width: 560px) {
  .site-footer {
    min-height: 0;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 0;
    width: calc(100% - 2.5rem);
    padding-top: 3rem;
  }

  .site-footer__contact {
    padding-bottom: 2rem;
  }

  .site-footer__group {
    padding: 1.75rem 0;
    border-top: 1px solid #e8e8e8;
  }

  .site-footer h2 {
    margin-bottom: 0.7rem;
    font-size: 1rem;
  }

  .site-footer p,
  .site-footer a,
  .site-footer li {
    font-size: 1rem;
    line-height: 1.5;
  }

  .site-footer li + li {
    margin-top: 0.45rem;
  }

  .site-footer__subheading {
    padding-top: 2rem;
  }

  .site-footer__vector--right,
  .site-footer .site-footer__vector--right {
    display: none;
  }

  .site-footer__vector--left,
  .site-footer .site-footer__vector--left {
    top: -0.5rem;
    right: -2.25rem;
    bottom: auto;
    left: auto;
    display: block;
    width: min(64vw, 250px);
    margin: 0;
    opacity: 1;
    transform: rotate(180deg);
    transform-origin: center;
  }

  .site-footer__certs,
  .site-footer .site-footer__certs {
    width: min(calc(100% - 2.5rem), 354px);
    margin: 1.75rem auto 0;
  }

  .site-footer__bottom {
    width: calc(100% - 2.5rem);
    margin: 1.75rem auto 0;
    padding: 1.5rem 0 1.75rem;
    border-top: 1px solid #e8e8e8;
  }
}

/* About mega menu and contact popup: Figma nodes 441:846 and 437:136 */
.site-header.is-mega-open .mega-menu:not(.is-active),
.site-header:focus-within .mega-menu:not(.is-active) {
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  pointer-events: none;
}

.site-header.is-mega-open .mega-menu.is-active,
.site-header:focus-within .mega-menu.is-active {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  transition-delay: 0s;
}

.site-header.is-mega-open .mega-menu:not(.is-active) .mega-menu__inner,
.site-header:focus-within .mega-menu:not(.is-active) .mega-menu__inner {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

.site-header.is-mega-open .mega-menu.is-active .mega-menu__inner,
.site-header:focus-within .mega-menu.is-active .mega-menu__inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@supports selector(.site-header:has(.site-nav__item--mega:hover)) {
  .site-header:has(.site-nav__item--mega:hover) .mega-menu:not(.is-active),
  .site-header:has(.mega-menu:hover) .mega-menu:not(.is-active) {
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    pointer-events: none;
  }

  .site-header:has(.site-nav__item--mega:hover) .mega-menu:not(.is-active) .mega-menu__inner,
  .site-header:has(.mega-menu:hover) .mega-menu:not(.is-active) .mega-menu__inner {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
}

.mega-menu__inner--about {
  grid-template-columns: minmax(0, 1548px) minmax(0, 247px);
  gap: 40px;
  width: calc(100% - 88px);
  max-width: 1846px;
  min-height: 0;
  padding: 40px 0 40px;
}

.mega-menu__about {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 500px));
  gap: 17px;
  align-content: start;
}

.mega-about-card {
  min-width: 0;
  text-align: center;
}

.mega-about-card__image {
  display: block;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 500 / 446;
  margin: 0 auto 24px;
  overflow: hidden;
  border-radius: 8px;
  background: #f3f3f3;
}

.mega-about-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mega-about-card h2 {
  min-height: 24px;
  margin: 0 0 8px;
  color: #1f2129;
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-transform: capitalize;
}

.mega-about-card__actions {
  display: flex;
  gap: clamp(16px, 1.5vw, 30px);
  justify-content: center;
}

.mega-about-card__actions a {
  color: #5f6368;
  font-size: clamp(11px, 0.68vw, 13px);
  font-weight: 400;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mega-menu__links--about {
  gap: 23px;
  min-height: 0;
  padding-top: 38px;
}

.mega-menu__inner--feature-cards,
.mega-menu__inner--news {
  grid-template-columns: minmax(0, 1fr) minmax(176px, 247px);
  gap: clamp(32px, 3.2vw, 56px);
  width: calc(100% - 88px);
  max-width: 1846px;
  min-height: 0;
  padding: 40px 0 40px;
}

.mega-menu__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 500px));
  gap: clamp(18px, 1.8vw, 34px);
  align-content: start;
}

.mega-feature-card {
  min-width: 0;
  text-align: center;
}

.mega-feature-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 500 / 446;
  margin: 0 0 24px;
  overflow: hidden;
  border-radius: 8px;
  background: #f3f3f3;
}

.mega-feature-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mega-feature-card h2 {
  min-height: 24px;
  margin: 0 0 8px;
  color: #1f2129;
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-transform: capitalize;
}

.mega-feature-card h2 a,
.mega-news-card h2 a {
  color: inherit;
  text-decoration: none;
}

.mega-feature-card__actions {
  display: flex;
  gap: clamp(16px, 1.5vw, 30px);
  justify-content: center;
}

.mega-feature-card__actions a {
  color: #5f6368;
  font-size: clamp(11px, 0.68vw, 13px);
  font-weight: 400;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mega-menu__links--feature-cards,
.mega-menu__links--news {
  gap: 23px;
  min-height: 0;
  padding-top: 38px;
}

.mega-news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 500px));
  gap: clamp(18px, 1.8vw, 34px);
}

.mega-news-card {
  min-width: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #f2f2f2;
}

.mega-news-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 500 / 235;
  overflow: hidden;
  background: #e7e7e7;
}

.mega-news-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mega-news-card__body {
  display: flex;
  min-height: 245px;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(18px, 1.5vw, 28px);
  text-align: left;
}

.mega-news-card__tag {
  margin: 0 0 8px;
  color: var(--color-orange);
  font-size: clamp(10px, 0.63vw, 12px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.mega-news-card h2 {
  margin: 0 0 10px;
  color: #111111;
  font-size: clamp(17px, 1.25vw, 24px);
  font-weight: 800;
  line-height: 0.98;
  text-transform: uppercase;
}

.mega-news-card__body p:not(.mega-news-card__tag) {
  max-width: 340px;
  margin: 0 0 18px;
  color: #5f6368;
  font-size: clamp(12px, 0.83vw, 16px);
  font-weight: 500;
  line-height: 1.25;
}

.mega-news-card time {
  margin-top: auto;
  color: #8c8c8c;
  font-size: clamp(11px, 0.78vw, 15px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.contact-modal[hidden] {
  display: none;
}

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow-y: auto;
  padding: 24px 0;
}

.contact-modal::before {
  position: absolute;
  inset: -24px;
  content: "";
  background: rgba(0, 0, 0, 0.08);
  filter: blur(12px);
  transform: scale(1.04);
}

.contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.24);
}

.contact-modal__stage {
  position: relative;
  z-index: 1;
  width: min(912px, calc(100vw - 48px));
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.985);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-modal.is-open .contact-modal__stage {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.contact-modal__panel {
  position: relative;
  height: auto;
  max-height: calc(100svh - 48px);
  padding: 27px 46px 20px 27px;
  border-radius: 3px;
  background: var(--color-white);
  overflow-y: auto;
}

.contact-modal.is-success .contact-modal__panel > h2,
.contact-modal.is-success .contact-modal__panel > p {
  visibility: hidden;
}

.contact-modal__intro[hidden] {
  display: none;
}

.contact-modal.is-success .contact-modal__intro {
  display: none;
}

.contact-modal.is-success .contact-modal__panel {
  display: grid;
  min-height: 360px;
  padding: 44px 46px 42px;
  overflow: visible;
}

.contact-modal__close {
  position: absolute;
  top: 9px;
  right: 10px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.contact-modal__close::before,
.contact-modal__close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #111111;
  content: "";
}

.contact-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.contact-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.contact-modal h2 {
  margin: 0 0 17px;
  color: var(--color-black);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: capitalize;
}

.contact-modal p {
  max-width: 588px;
  margin: 0 0 22px;
  color: var(--color-black);
  font-size: 20px;
  line-height: 0.95;
}

.contact-modal__form {
  display: grid;
  grid-template-columns: 486px 316px;
  grid-template-areas:
    "equipment equipment"
    "fields details"
    "operator details"
    "consent submit";
  gap: 0 37px;
}

.contact-modal__form[hidden] {
  display: none;
}

.contact-modal__form--academy[hidden] {
  display: none;
}

.contact-modal__form--brochure {
  display: block;
}

.contact-modal__form--brochure .wpforms-reskin {
  max-width: none;
  margin: 0;
}

.contact-modal__form-fallback {
  margin-bottom: 18px;
}

.contact-modal__equipment {
  display: grid;
  grid-area: equipment;
  gap: 6px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 3px dashed var(--color-blue);
  border-radius: 8px;
  background: var(--color-white);
}

.contact-modal__equipment[hidden] {
  display: none;
}

.contact-modal__equipment > span {
  margin: 0;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.contact-modal__equipment-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-modal__equipment-list li {
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.1;
}

.contact-modal__equipment-list li.contact-modal__equipment-empty {
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 700;
}

.contact-modal__equipment-add {
  justify-self: start;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-orange);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.contact-modal__equipment-options[hidden] {
  display: none;
}

.contact-modal__equipment-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed rgba(37, 31, 102, 0.3);
}

.contact-modal__equipment-options label,
.contact-modal__operator {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #5c5e62;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.contact-modal__equipment-options input,
.contact-modal__operator input {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--color-orange);
}

.contact-modal__equipment-options label span,
.contact-modal__operator span {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-transform: none;
}

.contact-modal__fields {
  display: grid;
  grid-area: fields;
  grid-template-columns: repeat(2, 221px);
  gap: 31px 38px;
}

.contact-modal label span {
  display: block;
  margin: 0 0 7px;
  color: #5c5e62;
  font-size: 15.6px;
  font-weight: 600;
  line-height: 1;
  text-transform: capitalize;
}

.contact-modal input[type="text"],
.contact-modal input[type="email"],
.contact-modal input[type="tel"],
.contact-modal textarea {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 4px;
  background: #ededed;
  color: var(--color-ink);
  font: inherit;
}

.contact-modal input[type="text"],
.contact-modal input[type="email"],
.contact-modal input[type="tel"] {
  height: 39px;
  padding: 0 12px;
}

.contact-modal textarea {
  height: 139px;
  min-height: 139px;
  padding: 10px 12px;
  resize: vertical;
}

.contact-modal__details {
  grid-area: details;
}

.contact-modal__operator {
  grid-area: operator;
  margin-top: 18px;
}

.contact-modal__operator[hidden] {
  display: none;
}

.contact-modal__consent {
  display: flex;
  grid-area: consent;
  align-items: center;
  gap: 13px;
  margin-top: 24px;
}

.contact-modal__consent input {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--color-orange);
}

.contact-modal__consent span {
  margin: 0;
  color: #5c5e62;
  font-size: 14.6px;
  font-weight: 600;
  line-height: 1.4;
}

.contact-modal__consent a {
  color: #5c5e62;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-modal__error[hidden] {
  display: none;
}

.contact-modal__error {
  margin: 0 0 12px;
  padding: 12px 16px;
  border-radius: 6px;
  background: #fdecea;
  color: #b3261e;
  font-size: 14px;
  font-weight: 600;
}

.contact-modal__submit {
  grid-area: submit;
  justify-self: start;
  margin-top: 21px;
  color: var(--color-white);
  background: var(--color-orange);
}

.contact-modal[data-contact-mode="academy"] .contact-modal__stage {
  width: min(920px, calc(100vw - 48px));
}

.contact-modal[data-contact-mode="brochure"] .contact-modal__stage {
  width: min(720px, calc(100vw - 48px));
}

.contact-modal[data-contact-mode="brochure"] .contact-modal__panel {
  padding: 34px 46px 34px;
}

.contact-modal[data-contact-mode="academy"] .contact-modal__panel {
  height: auto;
  min-height: 520px;
  padding: 34px 46px 34px;
}

.contact-modal__intro--academy h2 {
  margin-bottom: 26px;
  font-size: 32px;
  text-transform: uppercase;
}

.contact-modal__form--academy {
  display: block;
}

.academy-register__progress {
  display: flex;
  gap: 9px;
  margin: 0 0 25px;
}

.academy-register__progress span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #d7d7d7;
}

.academy-register__progress span.is-active {
  background: var(--color-blue);
}

.academy-register__progress span.is-complete {
  background: var(--color-orange);
}

.academy-register__step {
  min-height: 300px;
  margin: 0;
  padding: 0;
  border: 0;
}

.academy-register__step[hidden] {
  display: none;
}

.academy-register__step legend {
  margin: 0 0 23px;
  padding: 0;
  color: var(--color-black);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
}

.academy-register__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
}

.academy-register label span,
.academy-register__radio-group > span {
  text-transform: none;
}

.academy-register__choice,
.academy-register__radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--color-blue);
  font-size: 15px;
  font-weight: 700;
}

.academy-register__radio-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 18px;
  min-height: 64px;
}

.academy-register__radio-group > span {
  flex: 0 0 100%;
  margin: 0 0 1px;
  color: #5c5e62;
  font-size: 15.6px;
  font-weight: 600;
  line-height: 1.15;
}

.academy-register input[type="radio"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--color-orange);
}

.academy-register textarea {
  height: 150px;
  min-height: 150px;
}

.academy-register__actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 24px;
}

.academy-register__actions .button {
  min-width: 132px;
}

.academy-register__actions .button[hidden] {
  display: none;
}

.academy-register__actions .button--light {
  border: 1px solid var(--color-orange);
  color: var(--color-orange);
}

.academy-register__submit {
  margin-top: 0;
}

.contact-modal__success[hidden] {
  display: none;
}

.contact-modal__success {
  position: relative;
  min-height: 274px;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto auto;
  place-content: center;
  justify-items: center;
  gap: 16px;
  padding: 0 32px;
  background: var(--color-white);
  text-align: center;
}

.contact-modal__success-mark {
  position: relative;
  width: 112px;
  height: 112px;
  opacity: 0;
  transform: translate3d(var(--fox-start-x, 550px), var(--fox-start-y, 339px), 0) scale(0.2) rotate(-18deg);
  transform-origin: center;
  transform-style: preserve-3d;
}

.contact-modal__fox,
.contact-modal__check {
  position: absolute;
  inset: 0;
  display: block;
  width: 112px;
  height: 112px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.contact-modal__fox {
  width: 112px;
  height: 112px;
  object-fit: contain;
}

.contact-modal__check {
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-orange);
  opacity: 0;
  transform: none;
}

.contact-modal__check::before {
  width: 48px;
  height: 26px;
  border-bottom: 8px solid var(--color-white);
  border-left: 8px solid var(--color-white);
  content: "";
  transform: translateY(-4px) rotate(-45deg);
}

.contact-modal__success p {
  max-width: none;
  margin: 0;
  color: var(--color-black);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  opacity: 0;
  text-transform: none;
}

.contact-modal__back {
  width: 155px;
  min-width: 155px;
  height: 40px;
  min-height: 40px;
  margin-top: 18px;
  opacity: 0;
  pointer-events: none;
}

.contact-modal.is-success .contact-modal__success-mark {
  animation: reynard-fox-from-send 1200ms cubic-bezier(0.18, 0.9, 0.2, 1) forwards;
}

.contact-modal.is-success .contact-modal__fox {
  animation: reynard-fox-face 1200ms linear forwards;
}

.contact-modal.is-success .contact-modal__check {
  animation: reynard-check-face 1200ms linear forwards;
}

.contact-modal.is-success .contact-modal__success p {
  animation: reynard-success-copy 260ms ease 1240ms forwards;
}

.contact-modal.is-success .contact-modal__back {
  animation: reynard-success-copy 260ms ease 1540ms forwards;
  pointer-events: auto;
}

@keyframes reynard-fox-from-send {
  0% {
    opacity: 0;
    transform: translate3d(var(--fox-start-x, 550px), var(--fox-start-y, 339px), 0) scale(0.2) rotateZ(-18deg) rotateY(0);
  }

  30% {
    opacity: 1;
    transform: translate3d(86px, -58px, 0) scale(0.72) rotateZ(8deg) rotateY(0);
  }

  58% {
    opacity: 1;
    transform: translate3d(0, 8px, 0) scale(1.08) rotateZ(-3deg) rotateY(0);
  }

  72% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotateZ(0) rotateY(0);
  }

  84% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotateZ(0) rotateY(90deg);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotateZ(0) rotateY(360deg);
  }
}

@keyframes reynard-fox-face {
  0%,
  83% {
    opacity: 1;
  }

  84%,
  100% {
    opacity: 0;
  }
}

@keyframes reynard-check-face {
  0%,
  83% {
    opacity: 0;
  }

  84%,
  100% {
    opacity: 1;
  }
}

@keyframes reynard-success-copy {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.contact-modal-open {
  overflow: hidden;
}

@media (max-width: 1500px) {
  .mega-menu__inner--about {
    grid-template-columns: minmax(0, 1fr) 212px;
    gap: 20px;
  }

  .mega-menu__about {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .mega-menu__inner--about {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .mega-menu__about {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mega-menu__links--about {
    min-height: auto;
  }
}

@media (max-width: 920px) {
  .contact-modal {
    align-items: start;
    overflow-y: auto;
    padding: 24px 0;
  }

  .contact-modal__stage {
    width: min(100% - 32px, 560px);
  }

  .contact-modal__panel {
    height: auto;
    min-height: 407px;
    padding: 28px 20px 24px;
  }

  .contact-modal p {
    font-size: 16px;
    line-height: 1.15;
  }

  .contact-modal__form,
  .contact-modal__fields {
    grid-template-areas: none;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .contact-modal__equipment,
  .contact-modal__fields,
  .contact-modal__details,
  .contact-modal__operator,
  .contact-modal__consent,
  .contact-modal__submit {
    grid-area: auto;
    grid-column: auto;
    grid-row: auto;
  }

  .contact-modal__equipment-options {
    grid-template-columns: 1fr;
  }

  .contact-modal__form,
  .contact-modal__fields,
  .contact-modal__details,
  .contact-modal__operator,
  .contact-modal__consent,
  .contact-modal__submit {
    width: 100%;
  }

  .contact-modal[data-contact-mode="academy"] .contact-modal__panel {
    min-height: 0;
    padding: 28px 20px 24px;
  }

  .academy-register__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .academy-register__step {
    min-height: 0;
  }

  .academy-register__actions {
    justify-content: stretch;
  }

  .academy-register__actions .button {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Final interaction fixes */
.site-header.is-mega-open .site-nav__item--mega:not(.is-active) > a,
.site-header:focus-within .site-nav__item--mega:not(.is-active) > a {
  background: transparent;
}

.site-header.is-mega-open .site-nav__item--mega.is-active > a,
.site-header:focus-within .site-nav__item--mega.is-active > a {
  background: #f0f0f0;
}

@supports selector(.site-header:has(.site-nav__item--mega:hover)) {
  .site-header:has(.site-nav__item--mega:hover) .site-nav__item--mega:not(.is-active) > a,
  .site-header:has(.mega-menu:hover) .site-nav__item--mega:not(.is-active) > a {
    background: transparent;
  }

  .site-header:has(.site-nav__item--mega:hover) .site-nav__item--mega.is-active > a,
  .site-header:has(.mega-menu:hover) .site-nav__item--mega.is-active > a {
    background: #f0f0f0;
  }
}

.contact-modal::before {
  display: none;
  content: none;
  background: none;
}

.contact-modal__backdrop {
  background: rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body.contact-modal-open .site-header,
body.contact-modal-open main,
body.contact-modal-open .site-footer {
  filter: blur(10px);
}

.client-strip__track {
  --client-strip-gap: clamp(88px, 8vw, 150px);
}

.client-strip__set li {
  min-width: 190px;
}

/* Homepage color correction from Figma node 74:2 */
html,
body,
main {
  background: var(--color-white);
}

.feature-carousel-block,
.promo-row,
.services-grid {
  background: var(--color-white);
}

.promo-card {
  background: rgba(242, 242, 242, 0.9);
}

.map-section,
.project-carousel-block,
.news-section {
  background: var(--color-page-soft);
}

.map-canvas {
  background: var(--color-white);
}

/*
 * WP Go Maps writes `height: 100vh` inline on every shortcode instance.
 * That is appropriate for the standalone Experience page, but the shared
 * map component is deliberately contained on the homepage and content
 * pages. Without this override Google Maps creates a viewport-sized canvas
 * and the parent clips it, leaving an empty strip above the visible tiles.
 */
.map-canvas {
  position: relative;
  height: clamp(320px, 45vw, 633px);
}

.map-canvas .wpgmza_map,
.map-canvas [id^="wpgmza_map_"] {
  height: 100% !important;
  min-height: 0;
  max-height: none;
}

@media (max-width: 920px) {
  .map-canvas {
    height: clamp(320px, 62vw, 520px);
  }
}

@media (max-width: 600px) {
  .map-canvas {
    height: clamp(320px, 78vw, 440px);
  }
}

/* Homepage project map: keep WP Go Maps' project card and remove Google
 * Maps' empty title/close row. The default row was creating the large blank
 * white bar above every orange project title. */
.map-canvas[data-reynard-map-id="1"] .gm-style-iw-c {
  max-width: min(360px, calc(100vw - 32px)) !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: 0 10px 28px rgba(20, 20, 20, 0.2);
}

.map-canvas[data-reynard-map-id="1"] .gm-style-iw-chr,
.map-canvas[data-reynard-map-id="1"] .gm-ui-hover-effect,
.map-canvas[data-reynard-map-id="1"] .gm-style-iw-tc {
  display: none !important;
}

.map-canvas[data-reynard-map-id="1"] .gm-style-iw-d {
  max-height: none !important;
  overflow: visible !important;
}

.map-canvas[data-reynard-map-id="1"] .wpgmza-infowindow,
.map-canvas[data-reynard-map-id="1"] .wpgmza-infowindow > *:first-child {
  margin-top: 0 !important;
}

/* The fallback map is a single image, whereas Google Maps is composed from
 * many tile and marker images. Do not stretch those internal map images to
 * the canvas size: doing so repeated and distorted the world map. */
.map-canvas .wpgmza_map img,
.map-canvas [id^="wpgmza_map_"] img {
  /* Let Google Maps' inline dimensions control marker and tile images. */
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: initial;
}

.map-intro {
  width: 100%;
  margin: 0;
  padding: 30px 45px 50px;
  background: var(--color-page-soft);
}

.map-intro h2 {
  max-width: none;
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 0.98;
}

.map-intro p {
  margin: 0 0 20px;
  color: var(--color-muted);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.map-intro__actions {
  display: flex;
  gap: 9px;
}

.map-intro__actions .button {
  width: 155px;
  min-width: 155px;
  height: 40px;
  min-height: 40px;
  padding: 0 24px;
  border-radius: 3px;
  font-size: 14px;
}

.button--muted,
.map-intro__actions .button--muted {
  background: #c8c4c4;
  color: var(--color-white);
}

.news-section {
  width: 100%;
  margin: 0;
  padding: 58px 0 72px;
}

.news-section > h2,
.news-section > .news-feature,
.news-section > .news-grid,
.news-section > .news-more {
  width: min(100% - 48px, 900px);
  margin-right: auto;
  margin-left: auto;
}

.news-feature,
.news-card {
  background: var(--color-white);
}

.site-footer {
  background: var(--color-white);
}

/* Academy page header treatment lives with the rest of the academy-page
   header rules further down (see the .reynard-academy-page .site-header
   block near the is-scrolled state) — this used to be duplicated here with
   an older, non-is-scrolled-aware version. That duplicate had higher CSS
   specificity than the newer scrolled-state rule (one extra :not() clause),
   so it silently won and pinned the nav text to white forever, even once
   the page was scrolled past the hero onto a plain white section — nav
   links were only readable while still overlapping the dark hero photo.
   Removed 2026-08-28 rather than patched in place, since the later block
   already covers every case this one did (including the mega-menu hover
   state, via the JS-driven .is-mega-open class instead of a :has() rule). */

.academy-page {
  background: var(--color-white);
}

.academy-hero {
  position: relative;
  display: grid;
  min-height: clamp(680px, 100svh, 967px);
  overflow: hidden;
  color: var(--color-white);
  place-items: center;
  padding: clamp(88px, 10svh, 132px) 24px clamp(28px, 5svh, 53px);
}

.academy-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(0, 0, 0, 0.18);
}

.academy-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.academy-hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(20px, 3svh, 31px);
  width: min(100% - 48px, 690px);
  padding-top: 0;
  text-align: center;
  transform: translateY(-1.5svh);
}

.academy-hero h1 {
  margin: 0;
  color: var(--color-white);
  font-size: var(--ry-type-hero);
  font-style: italic;
  font-weight: 800;
  line-height: 0.89;
  text-transform: uppercase;
}

.academy-hero h1 span {
  display: block;
  white-space: nowrap;
}

.academy-hero__actions,
.academy-program__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.academy-hero__certs {
  position: absolute;
  bottom: clamp(24px, 4.6svh, 53px);
  left: 50%;
  z-index: 1;
  width: min(560px, 64vw);
  transform: translateX(-50%);
}

.academy-intro {
  width: min(100% - 48px, 672px);
  margin: 0 auto;
  padding: 59px 0 77px;
  text-align: center;
}

.academy-intro p {
  margin: 0;
  color: #474a50;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.03;
}

.academy-course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: min(100% - 96px, 1248px);
  margin: 0 auto 147px;
}

.academy-course-card {
  display: grid;
  grid-template-rows: 60px 58px 116px 58px 190px;
  min-height: 0;
  padding: 24px 28px 0;
  border: 3px dashed var(--color-blue);
  border-radius: 8px;
  align-content: start;
  overflow: hidden;
  background: var(--color-white);
}

.academy-course-card__icon {
  display: block;
  width: auto;
  height: 54px;
  max-width: 110px;
  margin-bottom: 17px;
  object-fit: contain;
  object-position: left center;
  align-self: start;
}

.academy-course-card--jointer .academy-course-card__icon {
  height: 60px;
  max-width: 87px;
}

.academy-course-card--nen .academy-course-card__icon {
  height: 52px;
  max-width: 52px;
}

.academy-course-card--skills .academy-course-card__icon {
  height: 53px;
  max-width: 93px;
}

.academy-course-card h2 {
  margin: 0 0 9px;
  color: var(--color-blue);
  font-size: clamp(20px, 1.75vw, 26px);
  font-weight: 800;
  line-height: 1.04;
  align-self: start;
}

.academy-course-card p {
  margin: 0 0 19px;
  color: var(--color-blue);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  align-self: start;
}

.academy-course-card a {
  width: fit-content;
  margin: 0;
  color: var(--color-blue);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.32em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  align-self: start;
}

.academy-course-card a::after {
  content: " ->";
  letter-spacing: 0;
}

.academy-course-card__image {
  width: calc(100% + 56px);
  max-width: none;
  height: 190px;
  margin: 0 -28px;
  object-fit: cover;
  align-self: end;
}

.academy-course-card--hv-jointer .academy-course-card__image,
.academy-course-card--jointer .academy-course-card__image {
  object-position: center bottom;
}

.academy-course-card--nen .academy-course-card__image {
  aspect-ratio: 394.67 / 187.47;
  height: auto;
  object-fit: cover;
  object-position: center 9%;
}

.academy-programs {
  display: grid;
  gap: 0;
}

.academy-program {
  display: grid;
  grid-template-columns: minmax(0, 1010fr) minmax(320px, 430fr);
  min-height: 778px;
  background: var(--color-white);
}

.academy-program--image-right {
  grid-template-columns: minmax(320px, 430fr) minmax(0, 1010fr);
}

.academy-program--image-right .academy-program__media {
  order: 2;
}

.academy-program__media {
  min-width: 0;
  min-height: 100%;
  /* Desktop rows relied on img width/height="1010"/"778" attributes to
     establish an intrinsic 1010:778 ratio during the row's auto-height
     layout pass — which is how every existing (image-based) program row
     ends up the same height regardless of how long its copy is. A <video>
     has no such attributes and browsers size it from its real encoded
     resolution instead (e.g. a 3840x2160 source resolves to 16:9), so a
     video-based row silently drifted to a different height than its
     image-based siblings. Setting the ratio explicitly makes every row's
     height deterministic and consistent across pages regardless of media
     type — matching the pattern the smaller breakpoints below already use. */
  aspect-ratio: 1010 / 778;
}

.academy-program__media img,
.academy-program__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.academy-program__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 64px 48px 64px 58px;
}

.academy-program__copy h2,
.academy-certificate h2,
.academy-investment h2 {
  margin: 0 0 20px;
  color: var(--color-ink);
  font-size: clamp(28px, 2.2vw, 40px);
  font-weight: 800;
  line-height: 1.03;
  text-transform: none;
}

.academy-program__copy p,
.academy-certificate p {
  margin: 0;
  color: #1e2028;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.16;
}

.academy-program__actions {
  justify-content: flex-start;
  margin-top: 32px;
}

.academy-program__actions .button,
.academy-hero__actions .button {
  width: 200px;
  min-width: 200px;
}

.academy-program__actions .button--light {
  border: 2px solid var(--color-orange);
  background: var(--color-white);
  color: var(--color-orange);
}

.academy-certificate {
  padding: 102px 50px 89px;
  background: var(--color-white);
}

.academy-certificate__media {
  /* Wraps the img/video so the play/pause button (appended into this box by
     main.js's video-control logic, which needs a container sized to match
     the media exactly) is positioned relative to the media itself, not the
     whole section — previously the button's container was the full
     .academy-certificate section (including the copy text below), so the
     button rendered floating near the bottom of the section instead of
     inside the video.
     aspect-ratio matches the section's original 1341x580 photo crop — a
     <video> with height:auto here settles at its own real encoded ratio
     (16:9 for the current clip) once metadata finishes loading, which is
     noticeably taller than the intended letterbox crop, so pin it
     explicitly rather than let it vary by clip/load-timing. */
  display: block;
  width: min(100%, 1341px);
  margin: 0 auto 41px;
  border-radius: 3px;
  aspect-ratio: 1341 / 580;
  overflow: hidden;
}

.academy-certificate__media > img,
.academy-certificate__media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.academy-certificate__copy {
  display: grid;
  grid-template-columns: minmax(260px, 321px) minmax(0, 888px);
  gap: 133px;
  width: min(100%, 1342px);
  margin: 0 auto;
}

.academy-trainers {
  width: min(100% - 100px, 1340px);
  margin: 0 auto;
  padding: 0 0 104px;
  background: var(--color-white);
}

.academy-trainers > h2 {
  margin: 0 0 56px;
  color: var(--color-ink);
  font-size: clamp(28px, 2.2vw, 40px);
  font-weight: 800;
  line-height: 1.03;
}

.academy-trainers__list {
  display: grid;
  gap: 26px;
}

.academy-trainer {
  display: grid;
  grid-template-columns: 360px minmax(0, 455px);
  gap: 53px;
  align-items: start;
}

.academy-trainer--right {
  grid-template-columns: minmax(0, 455px) 360px;
  justify-content: end;
  gap: 52px;
  margin-top: -230px;
}

.academy-trainer--right img {
  order: 2;
}

.academy-trainer--right .academy-trainer__copy {
  padding-top: 32px;
  text-align: right;
}

.academy-trainer img {
  width: 360px;
  height: 471px;
  border-radius: 3px;
  object-fit: cover;
}

.academy-trainer__copy {
  padding-top: 30px;
}

.academy-trainer h3 {
  margin: 0 0 10px;
  color: var(--color-ink);
  font-size: clamp(28px, 2.2vw, 40px);
  font-weight: 800;
  line-height: 1.03;
}

.academy-trainer p {
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: 1.03;
}

.academy-reasons {
  width: min(100% - 48px, 1006px);
  margin: 0 auto 85px;
  padding: 42px 31px 39px;
  border: 2px dashed var(--color-orange);
  border-radius: 3px;
  background: var(--color-white);
}

.academy-reasons h2 {
  margin: 0 0 18px;
  color: var(--color-blue);
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.academy-reasons ul {
  display: grid;
  gap: 8px;
  padding-left: 22px;
  margin: 0;
  color: var(--color-blue);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.2;
}

.academy-reasons li::marker {
  color: var(--color-orange);
}

/* Standalone academy course pages (e.g. /academy/nen-3840-training/) open
   straight from a full-bleed image/program block into .academy-reasons,
   without the .academy-trainers section that provides that breathing room
   on /academy/ — restore an equivalent gap here. */
.academy-course-page .academy-reasons {
  margin-top: 88px;
}

.academy-investment {
  padding: 50px clamp(24px, 3.5vw, 50px) 68px;
  background: var(--color-blue);
  color: var(--color-white);
}

.academy-investment h2,
.academy-investment h3,
.academy-investment p {
  color: var(--color-white);
}

.academy-investment > h2,
.academy-investment__modules,
.academy-investment__total,
.academy-investment__details,
.academy-investment__soon {
  width: min(100%, 1338px);
  margin-right: auto;
  margin-left: auto;
}

.academy-investment__modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 169px));
  gap: 50px;
  margin-top: 32px;
}

.academy-investment__modules p {
  display: grid;
  gap: 8px;
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
}

.academy-investment__modules strong {
  font-weight: 800;
}

.academy-investment__total {
  margin-top: 29px;
  margin-bottom: 66px;
  font-size: 20px;
}

.academy-investment__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 552px));
  gap: 100px;
  padding-top: 53px;
  border-top: 2px dashed rgba(255, 255, 255, 0.35);
}

.academy-investment__details h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
}

.academy-investment__details p,
.academy-investment__soon p {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.academy-investment__soon {
  margin-top: 53px;
}

.academy-investment__soon h2 {
  margin-bottom: 16px;
}

.academy-investment__cert-badge {
  display: inline-flex;
  align-items: center;
  padding: 14px 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  background: var(--color-white);
}

.academy-investment__cert-badge img {
  display: block;
  width: 92px;
  height: auto;
}

.academy-investment__cert-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.32em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.academy-investment__cert-link::after {
  content: " ->";
  letter-spacing: 0;
}

.academy-faq {
  padding: 89px 0 78px;
  background: var(--color-white);
}

.academy-faq h2 {
  width: min(100% - 48px, 797px);
  margin: 0 auto 37px;
  color: var(--color-ink);
  font-size: var(--ry-type-faq-heading);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.academy-faq__list {
  width: min(100% - 48px, 775px);
  margin: 0 auto;
}

.academy-faq details {
  border-bottom: 1px solid #d5d5d5;
}

.academy-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  color: #22242b;
  font-size: var(--ry-type-faq-question);
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  list-style: none;
}

.academy-faq summary::-webkit-details-marker {
  display: none;
}

.academy-faq summary::after {
  flex: 0 0 auto;
  margin-left: 20px;
  color: var(--color-ink);
  content: "▼";
  font-size: 13px;
  transition: transform 160ms ease;
}

.academy-faq details[open] summary::after {
  transform: rotate(180deg);
}

.academy-faq details p {
  max-width: 680px;
  margin: -14px 0 24px;
  color: var(--color-muted);
  font-size: 17px;
  line-height: 1.35;
}

.academy-news {
  background: var(--color-page-soft);
}

@media (min-width: 1441px) {
  .academy-hero {
    min-height: 967px;
  }
}

@media (min-width: 921px) and (max-height: 860px) {
  .academy-hero {
    min-height: 100svh;
    padding-top: 82px;
    padding-bottom: 22px;
  }

  .academy-hero__content {
    gap: 18px;
    transform: translateY(-3.5svh);
  }

  .academy-hero h1 {
    font-size: var(--ry-type-hero);
  }

  .academy-hero__certs {
    bottom: 18px;
    width: min(520px, 58vw);
  }
}

@media (max-width: 1120px) {
  .academy-course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100% - 48px, 820px);
    margin-bottom: 72px;
  }

  .academy-program,
  .academy-program--image-right {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .academy-program--image-right .academy-program__media {
    order: 0;
  }

  .academy-program__media {
    aspect-ratio: 1010 / 560;
  }

  .academy-program__copy {
    padding: 42px 48px 58px;
  }

  .academy-certificate__copy {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .academy-trainers {
    width: min(100% - 48px, 900px);
    padding-bottom: 72px;
  }

  .academy-trainer,
  .academy-trainer--right {
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    justify-content: start;
    gap: 32px;
    margin-top: 0;
  }

  .academy-trainer--right img {
    order: 0;
  }

  .academy-trainer--right .academy-trainer__copy {
    padding-top: 30px;
    text-align: left;
  }

  .academy-investment__details {
    gap: 48px;
  }
}

@media (max-width: 920px) {
  .reynard-academy-page .site-header {
    position: absolute;
    background: transparent;
  }

  .academy-hero {
    min-height: min(760px, 100svh);
    padding: 84px 20px 28px;
  }

  .academy-hero__content {
    width: min(100%, 640px);
    transform: translateY(-2svh);
  }

  .academy-hero__certs {
    bottom: 24px;
    width: min(500px, 74vw);
  }

  .academy-course-card {
    min-height: 0;
  }

  .academy-course-card p {
    min-height: 0;
  }

  .academy-certificate {
    padding: 64px 24px;
  }

  .academy-trainers {
    width: min(100% - 48px, 640px);
  }

  .academy-trainer,
  .academy-trainer--right {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .academy-trainer img {
    width: min(100%, 360px);
    height: auto;
  }

  .academy-trainer__copy,
  .academy-trainer--right .academy-trainer__copy {
    padding-top: 0;
  }

  .academy-investment__modules,
  .academy-investment__details {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

body.admin-bar .offshore-intro__stage,
body.admin-bar .offshore-deliverables__stage {
  top: 107px;
  height: calc(100svh - 107px);
}

@media (max-width: 920px) {
  body.admin-bar .offshore-intro__stage,
  body.admin-bar .offshore-deliverables__stage {
    top: 96px;
    height: calc(100svh - 96px);
  }
}

@media (max-width: 782px) {
  body.admin-bar .offshore-intro__stage,
  body.admin-bar .offshore-deliverables__stage {
    top: 110px;
    height: calc(100svh - 110px);
  }
}

@media (max-width: 760px) {
  .academy-course-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}

@media (max-width: 560px) {
  .academy-hero {
    min-height: 100svh;
    padding: 78px 16px 24px;
    align-content: center;
  }

  .academy-hero__content {
    width: 100%;
    gap: 18px;
    transform: translateY(-3svh);
  }

  .academy-hero h1 {
    font-size: clamp(42px, 14vw, 58px);
  }

  .academy-hero__certs {
    bottom: 20px;
    width: min(360px, 82vw);
  }

  .academy-hero__actions,
  .academy-program__actions {
    width: 100%;
  }

  .academy-hero__actions .button,
  .academy-program__actions .button {
    width: 100%;
    min-width: 0;
  }

  .academy-intro {
    padding: 44px 0 52px;
  }

  .academy-course-grid {
    width: min(100% - 32px, 520px);
    margin-bottom: 48px;
  }

  .academy-program__copy {
    padding: 34px 24px 44px;
  }

  .academy-program__media {
    aspect-ratio: 4 / 3;
  }

  .academy-reasons {
    width: min(100% - 32px, 1006px);
    padding: 30px 22px;
  }

  .academy-trainers {
    width: min(100% - 32px, 640px);
    padding-bottom: 48px;
  }

  .academy-faq h2,
  .academy-faq__list {
    width: min(100% - 32px, 797px);
  }

.academy-faq summary {
    min-height: 68px;
  }
}

/* Sticky header and refined mega-menu motion */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--color-white);
  box-shadow: none;
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

.site-header.is-scrolled {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

body.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

.site-nav__item > a {
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.mega-menu {
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, -16px, 0);
  transition:
    opacity 220ms ease 70ms,
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1) 70ms,
    visibility 0s linear 350ms;
  pointer-events: none;
  will-change: opacity, transform;
}

.site-header.is-mega-open .mega-menu,
.site-header:focus-within .mega-menu {
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, -16px, 0);
  pointer-events: none;
}

.site-header.is-mega-open .mega-menu.is-active,
.site-header:focus-within .mega-menu.is-active {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 70ms, 70ms, 0s;
  pointer-events: auto;
}

.site-header.is-mega-switching .mega-menu,
.site-header.is-mega-switching .mega-menu.is-active {
  transition:
    opacity 0s linear,
    transform 0s linear,
    visibility 0s linear;
  transition-delay: 0s;
}

.mega-menu__inner {
  opacity: 1;
  transform: none;
  transition: none;
}

.mega-service,
.mega-about-card,
.mega-feature-card,
.mega-news-card,
.mega-menu__links a {
  opacity: 0;
  transform: translate3d(0, -14px, 0);
  transition:
    opacity 220ms ease,
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.site-header.is-mega-open .mega-menu.is-active .mega-service,
.site-header.is-mega-open .mega-menu.is-active .mega-about-card,
.site-header.is-mega-open .mega-menu.is-active .mega-feature-card,
.site-header.is-mega-open .mega-menu.is-active .mega-news-card,
.site-header.is-mega-open .mega-menu.is-active .mega-menu__links a,
.site-header:focus-within .mega-menu.is-active .mega-service,
.site-header:focus-within .mega-menu.is-active .mega-about-card,
.site-header:focus-within .mega-menu.is-active .mega-feature-card,
.site-header:focus-within .mega-menu.is-active .mega-news-card,
.site-header:focus-within .mega-menu.is-active .mega-menu__links a {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.site-header.is-mega-open .mega-menu.is-active .mega-service:nth-child(1),
.site-header.is-mega-open .mega-menu.is-active .mega-about-card:nth-child(1),
.site-header.is-mega-open .mega-menu.is-active .mega-feature-card:nth-child(1),
.site-header.is-mega-open .mega-menu.is-active .mega-news-card:nth-child(1),
.site-header:focus-within .mega-menu.is-active .mega-service:nth-child(1),
.site-header:focus-within .mega-menu.is-active .mega-about-card:nth-child(1),
.site-header:focus-within .mega-menu.is-active .mega-feature-card:nth-child(1),
.site-header:focus-within .mega-menu.is-active .mega-news-card:nth-child(1) {
  transition-delay: 120ms;
}

.site-header.is-mega-open .mega-menu.is-active .mega-service:nth-child(2),
.site-header.is-mega-open .mega-menu.is-active .mega-about-card:nth-child(2),
.site-header.is-mega-open .mega-menu.is-active .mega-feature-card:nth-child(2),
.site-header.is-mega-open .mega-menu.is-active .mega-news-card:nth-child(2),
.site-header:focus-within .mega-menu.is-active .mega-service:nth-child(2),
.site-header:focus-within .mega-menu.is-active .mega-about-card:nth-child(2),
.site-header:focus-within .mega-menu.is-active .mega-feature-card:nth-child(2),
.site-header:focus-within .mega-menu.is-active .mega-news-card:nth-child(2) {
  transition-delay: 165ms;
}

.site-header.is-mega-open .mega-menu.is-active .mega-service:nth-child(3),
.site-header.is-mega-open .mega-menu.is-active .mega-about-card:nth-child(3),
.site-header.is-mega-open .mega-menu.is-active .mega-feature-card:nth-child(3),
.site-header.is-mega-open .mega-menu.is-active .mega-news-card:nth-child(3),
.site-header:focus-within .mega-menu.is-active .mega-service:nth-child(3),
.site-header:focus-within .mega-menu.is-active .mega-about-card:nth-child(3),
.site-header:focus-within .mega-menu.is-active .mega-feature-card:nth-child(3),
.site-header:focus-within .mega-menu.is-active .mega-news-card:nth-child(3) {
  transition-delay: 210ms;
}

.site-header.is-mega-open .mega-menu.is-active .mega-service:nth-child(4),
.site-header:focus-within .mega-menu.is-active .mega-service:nth-child(4) {
  transition-delay: 255ms;
}

.site-header.is-mega-open .mega-menu.is-active .mega-service:nth-child(5),
.site-header:focus-within .mega-menu.is-active .mega-service:nth-child(5) {
  transition-delay: 300ms;
}

.site-header.is-mega-open .mega-menu.is-active .mega-service:nth-child(6),
.site-header:focus-within .mega-menu.is-active .mega-service:nth-child(6) {
  transition-delay: 345ms;
}

.site-header.is-mega-open .mega-menu.is-active .mega-menu__links a:nth-child(1),
.site-header:focus-within .mega-menu.is-active .mega-menu__links a:nth-child(1) {
  transition-delay: 255ms;
}

.site-header.is-mega-open .mega-menu.is-active .mega-menu__links a:nth-child(2),
.site-header:focus-within .mega-menu.is-active .mega-menu__links a:nth-child(2) {
  transition-delay: 300ms;
}

.site-header.is-mega-open .mega-menu.is-active .mega-menu__links a:nth-child(3),
.site-header:focus-within .mega-menu.is-active .mega-menu__links a:nth-child(3) {
  transition-delay: 345ms;
}

.site-header.is-mega-open .mega-menu.is-active .mega-menu__links a:nth-child(4),
.site-header:focus-within .mega-menu.is-active .mega-menu__links a:nth-child(4) {
  transition-delay: 390ms;
}

@supports selector(.site-header:has(.site-nav__item--mega:hover)) {
  .site-header:not(.is-mega-open):has(.site-nav__item--mega:hover) .mega-menu,
  .site-header:not(.is-mega-open):has(.mega-menu:hover) .mega-menu,
  .site-header.is-mega-open:has(.site-nav__item--mega:hover) .mega-menu:not(.is-active),
  .site-header.is-mega-open:has(.mega-menu:hover) .mega-menu:not(.is-active) {
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, -16px, 0);
    pointer-events: none;
  }

  .site-header.is-mega-open:has(.site-nav__item--mega:hover) .mega-menu.is-active,
  .site-header.is-mega-open:has(.mega-menu:hover) .mega-menu.is-active {
    visibility: visible;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }
}

.reynard-academy-page .site-header {
  position: sticky;
  top: 0;
  right: auto;
  left: auto;
  margin-bottom: -75px;
  background: transparent;
  box-shadow: none;
}

.reynard-academy-page .site-header:not(.is-scrolled):not(.is-mega-open):not(.is-open) .site-nav__item > a {
  color: var(--color-white);
}

.reynard-academy-page .site-header:not(.is-scrolled):not(.is-mega-open):not(.is-open) .nav-toggle span {
  background: var(--color-white);
}

.reynard-academy-page .site-header.is-scrolled,
.reynard-academy-page .site-header.is-mega-open,
.reynard-academy-page .site-header.is-open {
  background: var(--color-white);
}

.reynard-academy-page .site-header.is-scrolled .site-nav__item > a,
.reynard-academy-page .site-header.is-scrolled:not(.is-mega-open):not(.is-open) .site-nav__item > a,
.reynard-academy-page .site-header.is-mega-open .site-nav__item > a,
.reynard-academy-page .site-header.is-open .site-nav__item > a {
  color: var(--color-ink);
}

.reynard-academy-page .site-header.is-scrolled .nav-toggle span,
.reynard-academy-page .site-header.is-scrolled:not(.is-mega-open):not(.is-open) .nav-toggle span,
.reynard-academy-page .site-header.is-mega-open .nav-toggle span,
.reynard-academy-page .site-header.is-open .nav-toggle span {
  background: var(--color-ink);
}

@media (max-width: 920px) {
  .reynard-academy-page .site-header {
    position: sticky;
    margin-bottom: -75px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .mega-menu,
  .mega-service,
  .mega-about-card,
  .mega-feature-card,
  .mega-news-card,
  .mega-menu__links a {
    transition: none;
    transform: none;
  }
}

/* Offshore termination and testing page */
.offshore-page {
  overflow-x: clip;
  overflow-y: visible;
  background: var(--color-white);
}

.offshore-hero {
  position: relative;
  display: grid;
  min-height: clamp(680px, 100svh, 967px);
  overflow: hidden;
  color: var(--color-white);
  place-items: center;
  padding: clamp(88px, 10svh, 132px) 24px clamp(28px, 5svh, 53px);
}

.offshore-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(0, 0, 0, 0.2);
}

.offshore-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.offshore-hero__content,
.offshore-connection__content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(20px, 3svh, 31px);
  width: min(100% - 48px, 690px);
  padding-top: 0;
  text-align: center;
}

.offshore-hero__content {
  transform: translateY(-1.5svh);
}

.offshore-hero h1 {
  width: 100%;
  margin: 0;
  color: var(--color-white);
  font-size: var(--ry-type-hero);
  font-style: italic;
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
}

.offshore-hero h1 span {
  display: block;
}

.offshore-hero__actions,
.offshore-connection__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.offshore-hero__actions .button,
.offshore-connection__actions .button {
  width: 200px;
  min-width: 200px;
  min-height: 40px;
}

.offshore-stats-section {
  width: min(100% - 96px, 1224px);
  margin: 128px auto 112px;
}

.offshore-stats-section > h2 {
  max-width: 240px;
  margin: 0 0 42px;
  color: var(--color-blue);
  font-size: 18px;
  font-style: italic;
  font-weight: 800;
  line-height: 1.05;
}

.offshore-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.offshore-stat {
  position: relative;
  min-height: 580px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-ink);
  color: var(--color-white);
}

.offshore-stat::after {
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.76));
}

.offshore-stat img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.offshore-stat h3 {
  position: absolute;
  right: 32px;
  bottom: 31px;
  left: 32px;
  z-index: 1;
  margin: 0;
  color: var(--color-white);
  font-weight: 800;
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
}

.offshore-stat h3 span,
.offshore-stat h3 strong {
  display: block;
}

.offshore-stat h3 span {
  font-size: clamp(13px, 1.2vw, 17px);
  font-style: italic;
}

.offshore-stat h3 strong {
  font-size: clamp(50px, 5.3vw, 78px);
  letter-spacing: 0;
}

.offshore-intro-scroll {
  --cable-draw: 0;
  --connector-draw: 0;
  --tip-draw: 0;
  position: relative;
  height: 185svh;
  background: var(--color-white);
}

.offshore-intro__stage {
  position: sticky;
  top: 75px;
  height: calc(100svh - 75px);
  overflow: hidden;
  background: var(--color-white);
}

.offshore-intro {
  position: relative;
  width: min(100% - 96px, 1123px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: clamp(105px, 14svh, 145px) 0 180px;
  box-sizing: border-box;
  isolation: isolate;
}

.offshore-intro__cable {
  position: absolute;
  right: -150px;
  bottom: -34px;
  z-index: -1;
  width: min(1120px, 92vw);
  height: auto;
  max-width: none;
  overflow: visible;
}

.offshore-intro__line {
  stroke-dasharray: 1;
  will-change: stroke-dashoffset;
}

.offshore-intro__line--cable {
  stroke-dashoffset: calc(-1 + var(--cable-draw));
}

.offshore-intro__line--connector {
  /* Draw from the blue cable's end toward the exposed conductor. */
  stroke-dashoffset: calc(1 - var(--connector-draw));
}

.offshore-intro__line--tip {
  /* Continue the reveal outward from the orange connector. */
  stroke-dashoffset: calc(1 - var(--tip-draw));
}

.offshore-intro p,
.offshore-audience__intro {
  margin: 0;
  color: #474a50;
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 400;
  line-height: 1.03;
  text-align: left;
}

.offshore-connection {
  --person-progress: 0;
  position: relative;
  height: 155svh;
  overflow: clip;
  color: var(--color-white);
}

.offshore-connection__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
}

.offshore-connection__bg,
.offshore-connection__person {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.offshore-connection__person {
  z-index: 1;
  pointer-events: none;
  transform: translate3d(0, calc((1 - var(--person-progress)) * 28svh), 0) scale(1.02);
  transform-origin: center bottom;
  will-change: transform;
}

.offshore-connection__shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background: rgba(0, 0, 0, 0.08);
}

.offshore-connection__content {
  position: absolute;
  top: 23.3%;
  left: 50%;
  z-index: 2;
  width: min(100% - 48px, 920px);
  transform: translateX(-50%);
}

.offshore-connection h2 {
  margin: 0;
  color: var(--color-white);
  font-size: clamp(35px, 3.5vw, 50px);
  font-weight: 400;
  line-height: 0.9;
}

.offshore-audience {
  padding: var(--ry-service-section-space) 0;
  background: var(--color-white);
}

.offshore-audience__intro {
  width: min(calc(100% - var(--ry-service-gutter) - var(--ry-service-gutter)), var(--ry-service-content));
  margin: 0 auto 64px;
  line-height: 1.03;
}

.offshore-audience__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(calc(100% - var(--ry-service-gutter) - var(--ry-service-gutter)), var(--ry-service-content));
  margin: 0 auto 38px;
}

.offshore-audience__heading .button {
  width: 200px;
  min-width: 200px;
  min-height: 40px;
}

.offshore-audience h2 {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--ry-service-heading);
  font-weight: 900;
  line-height: 0.94;
  text-transform: none;
}

.offshore-applications > h2 {
  width: min(calc(100% - var(--ry-service-gutter) - var(--ry-service-gutter)), var(--ry-service-content));
  margin: 0 auto 40px;
  color: var(--color-ink);
  font-size: var(--ry-service-heading);
  font-weight: 900;
  line-height: 0.94;
  text-transform: none;
}

.offshore-audience__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px 58px;
  width: min(calc(100% - var(--ry-service-gutter) - var(--ry-service-gutter)), var(--ry-service-content));
  margin: 0 auto;
}

.offshore-audience-card img,
.offshore-audience-card video {
  width: 100%;
  aspect-ratio: 533 / 384;
  border-radius: var(--ry-service-radius);
  object-fit: cover;
}

.service-video-media {
  position: relative;
  width: 100%;
  aspect-ratio: 533 / 403;
  overflow: hidden;
  border-radius: var(--ry-service-radius);
  background: #e9eaed;
}

.service-video-media video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.offshore-audience-card h3 {
  margin: 16px 0 0;
  color: var(--color-ink);
  font-size: clamp(16px, 1.45vw, 20px);
  font-weight: 800;
  line-height: 1.02;
  text-align: left;
}

.offshore-applications {
  padding-top: var(--ry-service-section-space);
  background: var(--color-white);
}

.service-audience + .service-applications {
  padding-top: 0;
}

.offshore-application {
  display: grid;
  grid-template-columns: minmax(0, 1010fr) minmax(320px, 430fr);
  height: var(--ry-service-story-height);
  min-height: var(--ry-service-story-height);
  background: var(--color-white);
  overflow: hidden;
}

.offshore-application--reverse {
  grid-template-columns: minmax(320px, 430fr) minmax(0, 1010fr);
}

.offshore-application--reverse .offshore-application__image {
  order: 2;
}

.offshore-application__image {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.offshore-application__image img,
.offshore-application__image video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.offshore-application__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 64px 48px 64px 58px;
}

.offshore-application__copy h3 {
  margin: 0 0 20px;
  color: var(--color-ink);
  font-size: var(--ry-service-card-heading);
  font-weight: 800;
  line-height: 1.03;
  text-transform: none;
}

.offshore-application__copy p {
  margin: 0;
  color: #1e2028;
  font-size: var(--ry-service-body);
  font-weight: 400;
  line-height: var(--ry-service-leading);
}

.service-actions .button {
  min-height: var(--ry-button-height);
}

.offshore-application__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-start;
  margin-top: 32px;
}

.offshore-application__actions .button {
  width: 200px;
  min-width: 200px;
  min-height: 40px;
  padding: 0 24px;
}

.offshore-deliverables-scroll {
  --draw-progress: 0;
  --blue-draw: 0;
  --orange-draw: 0;
  position: relative;
  height: 180svh;
  margin: 102px 0 89px;
}

.offshore-deliverables__stage {
  position: sticky;
  top: 75px;
  display: grid;
  place-items: center;
  height: calc(100svh - 75px);
  padding: 24px 0;
  box-sizing: border-box;
  background: var(--color-white);
}

.offshore-deliverables {
  position: relative;
  width: min(100% - 48px, 1006px);
  margin: 0 auto;
  min-height: 588px;
  padding: 35px 25px 28px;
  overflow: hidden;
  border: 4px dashed var(--color-orange);
  border-radius: 16px;
  background: #f6f6f8;
}

.offshore-deliverables__copy {
  position: relative;
  z-index: 1;
  width: min(100%, 812px);
}

.offshore-deliverables h2 {
  width: min(100%, 797px);
  margin: 0 0 10px;
  color: var(--color-blue);
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 800;
  line-height: 0.98;
  text-transform: uppercase;
  white-space: nowrap;
}

.service-page .offshore-deliverables h2 {
  white-space: normal;
  text-wrap: balance;
}

.offshore-deliverables p {
  width: min(100%, 812px);
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(17px, 1.55vw, 20px);
  font-weight: 400;
  line-height: 1.73;
  text-transform: capitalize;
}

.offshore-deliverables ul {
  width: min(100%, 540px);
  padding: 0 0 0 30px;
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(17px, 1.55vw, 20px);
  font-weight: 400;
  line-height: 1.73;
}

.offshore-deliverables li::marker {
  color: var(--color-ink);
}

.offshore-deliverables__graphic {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 500px;
  max-width: none;
  height: auto;
  overflow: visible;
}

.offshore-deliverables__graphic:not(.rtt-deliverables__graphic):not(.onshore-deliverables__graphic) path {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(-1 + var(--draw-progress));
  will-change: stroke-dashoffset;
}

.offshore-why {
  padding: 0 50px 104px;
  background: var(--color-white);
}

.offshore-why > :is(img, .offshore-why__media) {
  width: min(100%, 1341px);
  height: auto;
  margin: 0 auto 42px;
  border-radius: 4px;
}

.offshore-why__media {
  position: relative;
  overflow: hidden;
  line-height: 0;
}

.offshore-why__media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offshore-why__copy {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 888px);
  gap: 133px;
  width: min(100%, 1341px);
  margin: 0 auto;
}

.offshore-why h2 {
  margin: 0 0 20px;
  color: var(--color-ink);
  font-size: clamp(28px, 2.2vw, 40px);
  font-weight: 800;
  line-height: 1.03;
  text-transform: none;
}

.offshore-why p {
  margin: 0 0 16px;
  color: #1e2028;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.16;
}

.offshore-faq {
  width: min(100% - 48px, 797px);
  margin: 0 auto;
  padding: 89px 0 78px;
  background: var(--color-white);
}

.offshore-faq h2 {
  margin: 0 0 37px;
  color: var(--color-ink);
  font-size: var(--ry-type-faq-heading);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.offshore-faq__list {
  width: min(100%, 775px);
  margin: 0 auto;
}

.offshore-faq details {
  border-bottom: 1px solid #d5d5d5;
}

.offshore-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  color: #22242b;
  font-size: var(--ry-type-faq-question);
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  list-style: none;
}

.offshore-faq summary::-webkit-details-marker {
  display: none;
}

.offshore-faq summary::after {
  flex: 0 0 auto;
  margin-left: 20px;
  color: var(--color-ink);
  content: "▼";
  font-size: 13px;
  transition: transform 160ms ease;
}

.offshore-faq details[open] summary::after {
  transform: rotate(180deg);
}

.offshore-faq details p {
  max-width: 680px;
  margin: -14px 0 24px;
  color: var(--color-muted);
  font-size: 17px;
  line-height: 1.35;
}

.offshore-contact {
  padding: 66px 50px 50px;
  background: var(--color-white);
}

.offshore-contact__panel {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 827px);
  gap: 90px;
  width: min(100%, 1224px);
  margin: 0 auto;
}

.offshore-contact__intro h2 {
  margin: 0 0 16px;
  color: var(--color-ink);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 900;
  line-height: 0.96;
  text-transform: uppercase;
}

.offshore-contact__intro p {
  margin: 0;
  color: #1e2028;
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  line-height: 1.12;
}

.offshore-contact__form {
  width: 100%;
}

.offshore-contact__form .contact-page-form__submit {
  min-height: 40px;
}

@media (max-width: 1120px) {
  .offshore-stats,
  .offshore-stats-section,
  .offshore-audience__grid {
    width: min(100% - 48px, 900px);
  }

  .offshore-stats-section {
    margin-top: 82px;
    margin-bottom: 78px;
  }

  .offshore-stats {
    grid-template-columns: 1fr;
  }

  .offshore-stat {
    min-height: 430px;
  }

  .offshore-intro,
  .offshore-audience__intro {
    width: min(100% - 48px, 900px);
  }

  .offshore-application,
  .offshore-application--reverse {
    grid-template-columns: 1fr;
    height: auto;
    min-height: var(--ry-service-story-height);
  }

  .offshore-application--reverse .offshore-application__image {
    order: 0;
  }

  .offshore-application__image {
    height: clamp(340px, 52vw, 520px);
    aspect-ratio: auto;
  }

  .offshore-application__copy {
    padding: 42px 48px 58px;
  }

  .offshore-application__actions {
    margin-top: 32px;
  }

  .offshore-why__copy,
  .offshore-contact__panel {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .offshore-contact__panel {
    max-width: 827px;
  }
}

@media (max-width: 920px) {
  .offshore-intro__stage,
  .offshore-deliverables__stage {
    top: 64px;
    height: calc(100svh - 64px);
  }
}

@media (max-width: 760px) {
  :root {
    --ry-service-gutter: 16px;
    --ry-service-section-space: clamp(56px, 16vw, 76px);
    --ry-service-heading: clamp(2rem, 10vw, 2.75rem);
    --ry-service-card-heading: clamp(1.5rem, 7.2vw, 2rem);
    --ry-service-body: clamp(1rem, 4.6vw, 1.125rem);
  }

  .offshore-hero {
    min-height: 760px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .offshore-hero h1 {
    font-size: clamp(42px, 12vw, 58px);
  }

  .offshore-hero__content {
    width: min(100%, 520px);
    min-width: 0;
  }

  .offshore-hero__actions,
  .offshore-connection__actions {
    width: 100%;
    gap: 14px;
  }

  .offshore-hero__actions .button,
  .offshore-connection__actions .button {
    width: 100%;
    min-width: 0;
  }

  .offshore-stats,
  .offshore-stats-section,
  .offshore-intro,
  .offshore-audience__intro,
  .offshore-audience__heading,
  .offshore-applications > h2,
  .offshore-audience__grid,
  .offshore-deliverables,
  .offshore-faq {
    width: min(100% - 32px, 620px);
  }

  .offshore-stats-section > h2 {
    margin-bottom: 24px;
  }

  .offshore-stat {
    min-height: 360px;
  }

  .offshore-stat h3 {
    right: 22px;
    bottom: 24px;
    left: 22px;
  }

  .offshore-intro p,
  .offshore-audience__intro {
    font-size: clamp(24px, 7vw, 34px);
  }

  .offshore-intro {
    min-height: 0;
    padding: 56px 0 150px;
  }

  .offshore-intro__cable {
    right: -320px;
    bottom: -20px;
    width: 900px;
  }

  .offshore-connection {
    height: 145svh;
  }

  .offshore-connection__content {
    top: 22%;
    transform: translateX(-50%);
  }

  .offshore-audience {
    padding-top: var(--ry-service-section-space);
    padding-bottom: var(--ry-service-section-space);
  }

  .offshore-audience__intro {
    margin-bottom: 72px;
  }

  .offshore-audience__heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .offshore-audience__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .offshore-intro-scroll,
  .offshore-deliverables-scroll {
    height: 190svh;
  }

  .offshore-deliverables-scroll {
    margin-top: 72px;
    margin-bottom: 72px;
  }

  .offshore-deliverables {
    margin: 0 auto;
    min-height: 0;
    padding: 30px 22px 0;
  }

  .offshore-deliverables h2 {
    white-space: normal;
  }

  .offshore-deliverables p,
  .offshore-deliverables ul {
    width: 100%;
  }

  .offshore-deliverables ul {
    padding-left: 26px;
  }

  .offshore-deliverables__graphic {
    position: relative;
    right: auto;
    bottom: auto;
    display: block;
    width: min(360px, 82vw);
    margin: 16px auto 14px;
  }

  .offshore-why,
  .offshore-contact {
    padding-right: 16px;
    padding-left: 16px;
  }

  .offshore-why__copy {
    gap: 18px;
  }
}

@media (max-width: 560px) {
  .offshore-hero {
    min-height: 100svh;
  }

  .offshore-application__copy {
    padding: 34px 24px 44px;
  }

  .offshore-application__actions {
    flex-direction: column;
    margin-top: 36px;
  }

  .offshore-application__actions,
  .offshore-application__actions .button {
    width: 100%;
    min-width: 0;
  }

  .offshore-application__image {
    height: clamp(280px, 78vw, 360px);
    aspect-ratio: auto;
  }

  .offshore-intro {
    padding-top: 56px;
    padding-bottom: 80px;
  }

  .offshore-intro p {
    font-size: clamp(22px, 6.45vw, 25px);
  }

  .offshore-deliverables__stage {
    padding: 8px 0;
  }

  .offshore-deliverables {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100% - 16px);
    max-height: calc(100% - 16px);
    padding: 18px 18px 8px;
    box-sizing: border-box;
  }

  .offshore-deliverables h2 {
    margin-bottom: 8px;
    font-size: clamp(24px, 7.5vw, 29px);
  }

  .offshore-deliverables p,
  .offshore-deliverables ul {
    font-size: clamp(13px, 3.8vw, 15px);
    line-height: 1.34;
  }

  .offshore-deliverables ul {
    padding-left: 22px;
  }

  .offshore-deliverables__graphic {
    width: min(145px, 43vw);
    margin-top: 4px;
    margin-bottom: 0;
  }

  .offshore-faq summary {
    min-height: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offshore-intro-scroll,
  .offshore-deliverables-scroll {
    height: auto;
  }

  .offshore-intro__stage,
  .offshore-deliverables__stage {
    position: relative;
    top: auto;
    height: auto;
  }

  .offshore-intro {
    min-height: 713px;
  }

  .offshore-deliverables-scroll {
    margin: 102px 0 89px;
  }

  .offshore-deliverables {
    min-height: 588px;
  }

  .offshore-intro__line,
  .offshore-deliverables__graphic path {
    transition: none;
    stroke-dashoffset: 0;
  }

  .offshore-connection {
    height: auto;
  }

  .offshore-connection__stage {
    position: relative;
  }

  .offshore-connection__person {
    transform: none;
    will-change: auto;
  }
}

/* Onshore High-Voltage Connections — Figma 513:88 */
.service-page--onshore .offshore-hero__image {
  object-position: center center;
}

.service-page--onshore .offshore-intro__line--cable,
.service-page--onshore .offshore-intro__line--connector,
.service-page--onshore .offshore-intro__line--tip {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-page--onshore .service-feature--onshore .offshore-connection__shade {
  display: none;
}

.service-page--onshore .service-feature--onshore {
  height: 155svh;
}

.service-page--onshore .service-feature--onshore .offshore-connection__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 680px;
}

.service-page--onshore .service-feature--onshore .offshore-connection__person {
  object-position: center 80%;
  transform: translate3d(0, calc(4svh + ((1 - var(--person-progress)) * 24svh)), 0) scale(1.02);
}

.service-page--onshore .service-feature--onshore .offshore-connection__content {
  top: clamp(88px, 10svh, 132px);
}

.service-page--onshore .service-feature--onshore h2 {
  color: var(--color-white);
  font-size: clamp(34px, 3.45vw, 50px);
  line-height: 0.94;
}

.service-page--onshore .offshore-deliverables {
  border-color: var(--color-blue);
}

.service-page--onshore .offshore-deliverables h2 {
  color: var(--color-orange);
}

.service-page--onshore .offshore-contact--figma .offshore-contact__intro .eyebrow {
  display: none;
}

.service-page--onshore .offshore-contact--figma .offshore-contact__intro h2 {
  margin: 0;
  color: var(--color-black);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.5;
  text-transform: capitalize;
}

.service-page--onshore .offshore-contact--figma .offshore-contact__intro p {
  margin: 0;
  color: var(--color-black);
  font-size: 20px;
  font-weight: 400;
  line-height: 0.9;
}

@media (min-width: 921px) {
  .service-page--onshore .offshore-contact--figma {
    padding: 66px 49px 50px;
  }

  .service-page--onshore .offshore-contact--figma .offshore-contact__panel {
    display: block;
    width: min(100%, 1342px);
    max-width: none;
    margin: 0 auto;
  }

  .service-page--onshore .offshore-contact--figma .offshore-contact__intro,
  .service-page--onshore .offshore-contact--figma .offshore-contact__form {
    width: min(100%, 839px);
  }

  .service-page--onshore .offshore-contact--figma .offshore-contact__form {
    grid-template-columns: minmax(0, 486px) minmax(0, 316px);
    gap: 0 37px;
    margin-top: 48px;
  }

  .service-page--onshore .offshore-contact--figma .contact-page-form__fields {
    grid-template-columns: repeat(2, minmax(0, 221px));
    gap: 39px 38px;
  }
}

@media (max-width: 920px) {
  .service-page--onshore .offshore-contact--figma .offshore-contact__intro h2 {
    font-size: clamp(25px, 7vw, 28px);
    line-height: 1.08;
  }

  .service-page--onshore .offshore-contact--figma .offshore-contact__intro p {
    margin-top: 4px;
    line-height: 1.2;
  }
}

:is(.service-page--onshore, .service-page--full-service) .onshore-deliverables__graphic {
  right: -98px;
  bottom: -82px;
  width: min(610px, 58vw);
  aspect-ratio: 609.462 / 423.31;
  transform: rotate(90deg);
  transform-origin: center;
  transition: none;
}

@media (min-width: 761px) {
  /* The original scroll distance was only one viewport, so a mouse wheel
     could skip visibly through the drawing. Keep the visual panel pinned
     longer to give both cable layers a continuous, readable build. */
  :is(.service-page--onshore, .service-page--full-service) .offshore-deliverables-scroll {
    height: 260svh;
  }
}

:is(.service-page--onshore, .service-page--full-service) .onshore-deliverables__stroke {
  fill: none;
  stroke: #191a51;
  stroke-width: 56.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  visibility: hidden;
}

:is(.service-page--onshore, .service-page--full-service) .onshore-deliverables__stroke--orange,
:is(.service-page--onshore, .service-page--full-service) .onshore-deliverables__stroke--tip {
  stroke: #ff6600;
}

:is(.service-page--onshore, .service-page--full-service) .onshore-deliverables__stroke--connector {
  stroke-width: 28.35px;
}

:is(.service-page--onshore, .service-page--full-service) .onshore-deliverables__stroke--tip {
  stroke-width: 11.34px;
}

@media (max-width: 1120px) and (min-width: 761px) {
  .service-page--onshore .offshore-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-page--onshore .offshore-stat {
    min-height: 430px;
  }
}

@media (max-width: 760px) {
  .service-page--onshore .offshore-hero__image {
    object-position: 58% center;
  }

  .service-page--onshore .service-feature--onshore .offshore-connection__content {
    top: 10%;
  }

  .service-page--onshore .service-feature--onshore .offshore-connection__stage {
    height: max(100svh, 900px);
  }

  .service-page--onshore .service-feature--onshore h2 {
    font-size: clamp(27px, 7.5vw, 38px);
    line-height: 1;
  }

  :is(.service-page--onshore, .service-page--full-service) .onshore-deliverables__graphic {
    /* Keep the rotated cable entirely inside the pinned panel. At phone
       heights the former 125vw size left its lower curve outside the dashed
       deliverables card, even though the panel itself was still fixed. */
    --delivery-art-size: min(92vw, clamp(190px, calc(100svh - 390px), 360px));
    position: absolute;
    right: calc(var(--delivery-art-size) * -0.153);
    /* Rotation expands the SVG's visual bounds below its layout box. */
    bottom: calc(var(--delivery-art-size) * 0.12);
    width: var(--delivery-art-size);
    margin: 0;
  }

  /* Full-Service has the longest deliverables list. Reserving the upper
     part of the panel for copy prevents the animated cable from crossing
     the final list items on phones. */
  .service-page--full-service .offshore-deliverables {
    justify-content: flex-start;
    padding-bottom: 0;
  }

  .service-page--full-service .onshore-deliverables__graphic {
    /* Allow for the longer Full-Service list at short phone heights. */
    --delivery-art-size: min(70vw, clamp(150px, calc(100svh - 500px), 300px));
  }
}

@media (max-width: 560px) {
  .service-page--onshore .offshore-stats-section {
    margin-top: 56px;
    margin-bottom: 56px;
  }

  .service-page--onshore .offshore-stat {
    min-height: min(132vw, 520px);
  }

  .service-page--onshore .offshore-deliverables {
    justify-content: flex-start;
    padding-bottom: 0;
  }

}

/* Ready-Terminated & Tested HV Cables — Figma 652:55 */
.service-page--rtt .offshore-hero__content {
  width: min(100% - 48px, 982px);
}

.service-page--rtt .offshore-hero h1 {
  font-size: var(--ry-type-hero);
}

.service-page--rtt .offshore-hero__image {
  object-position: center center;
}

.service-page--rtt .offshore-stats-section {
  width: min(100% - 96px, 1224px);
  margin-top: 103px;
  margin-bottom: 112px;
}

.service-page--rtt .offshore-stats {
  gap: 12px;
}

.service-page--rtt .offshore-stat {
  min-height: 580px;
  border-radius: 8px;
  box-shadow: 0 16px 26px rgba(26, 27, 34, 0.12);
}

.service-page--rtt .offshore-stat h3 {
  right: 24px;
  bottom: 29px;
  left: 24px;
}

.rtt-intro-scroll {
  --rtt-cable-draw: 0;
  position: relative;
  height: 190svh;
  background: var(--color-white);
}

.rtt-intro__stage {
  position: sticky;
  top: 75px;
  height: calc(100svh - 75px);
  overflow: hidden;
  background: var(--color-white);
}

.rtt-intro {
  position: relative;
  width: min(100% - 96px, 1123px);
  height: 100%;
  margin: 0 auto;
  padding-top: clamp(84px, 11svh, 118px);
  box-sizing: border-box;
}

.rtt-intro__copy {
  position: relative;
  z-index: 2;
  max-width: 1123px;
}

.rtt-intro__copy p {
  margin: 0 0 0.9em;
  color: #474a50;
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 400;
  line-height: 1.03;
}

.rtt-intro__graphic-reveal {
  position: absolute;
  right: calc(50% - 50vw);
  bottom: 0;
  z-index: 1;
  width: min(760px, 54vw);
}

.rtt-cable-build {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 545 / 307;
}

.rtt-cable-build__line {
  fill: none;
  stroke: #ff723b;
  stroke-width: 56.69px;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--rtt-cable-draw, 0));
  stroke-linecap: butt;
  stroke-linejoin: round;
  will-change: stroke-dashoffset;
}

.rtt-cable-build__tip {
  opacity: 0;
  will-change: transform, opacity;
}

/* The termination is a solid outline; only the cable itself is drawn. */
.rtt-cable-build__tip path {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

.service-page--rtt .service-feature--rtt {
  height: 155svh;
}

.service-page--rtt .service-feature--rtt .offshore-connection__stage {
  min-height: 680px;
}

.service-page--rtt .service-feature--rtt .offshore-connection__bg,
.service-page--rtt .service-feature--rtt .offshore-connection__person {
  object-position: center center;
}

.service-page--rtt .service-feature--rtt .offshore-connection__person {
  transform: none;
  will-change: auto;
}

.service-page--rtt .service-feature--rtt .offshore-connection__shade {
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.38));
}

.service-page--rtt .service-feature--rtt .offshore-connection__content {
  top: 50%;
  z-index: 3;
  width: min(100% - 64px, 1010px);
  transform: translate(-50%, -50%);
}

.rtt-feature__copy p {
  margin: 0 0 1em;
  color: var(--color-white);
  font-size: clamp(24px, 1.9vw, 34px);
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.68);
}

.rtt-audience {
  overflow: hidden;
}

.rtt-audience__carousel {
  --rtt-card-width: min(680px, calc((100vw - 144px) / 2.15));
  --rtt-track-start: max(var(--ry-service-gutter), calc((100vw - var(--ry-service-content)) / 2));
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.rtt-audience__track {
  display: flex;
  gap: 28px;
  padding: 0 var(--ry-service-gutter) 0 var(--rtt-track-start);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--rtt-track-start);
  scroll-padding-inline-end: var(--ry-service-gutter);
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.rtt-audience__track::-webkit-scrollbar {
  display: none;
}

.rtt-audience-card {
  flex: 0 0 var(--rtt-card-width);
  scroll-snap-align: start;
}

.rtt-audience-card img,
.rtt-audience-card > video,
.rtt-audience-card .service-video-media {
  display: block;
  width: 100%;
  aspect-ratio: 533 / 403;
  border-radius: var(--ry-service-radius);
  background: #e9eaed;
  object-fit: cover;
}

.rtt-audience-card h3 {
  min-height: 68px;
  margin: 18px 0 0;
  font-size: var(--ry-service-card-heading);
  font-weight: 600;
  line-height: 1;
}

.rtt-audience__carousel .rtt-audience__arrow {
  top: calc(var(--rtt-card-width) * 0.378);
  box-shadow: 0 4px 12px rgba(30, 32, 40, 0.14);
}

.rtt-audience__carousel .rtt-audience__arrow--prev {
  left: 58px;
}

.rtt-audience__carousel .rtt-audience__arrow--next {
  right: 58px;
}

.rtt-audience__carousel .rtt-audience__dots {
  min-height: 15px;
  margin-top: 24px;
}

@media (min-width: 1800px) {
  .rtt-audience__carousel {
    --rtt-card-width: calc((100vw - 152px) / 3);
  }
}

.service-page--rtt .offshore-deliverables {
  border-color: var(--color-blue);
}

.service-page--rtt .offshore-deliverables h2 {
  color: var(--color-orange);
}

.service-page--rtt .offshore-deliverables p {
  text-transform: none;
}

.service-page--rtt .offshore-deliverables-scroll {
  --rtt-cable-draw: 0;
}

.service-page--rtt .rtt-deliverables__graphic {
  right: -12px;
  bottom: -8px;
  width: min(520px, 52%);
}

.service-page--rtt .offshore-why > :is(img, .offshore-why__media) {
  height: min(42vw, 580px);
  object-fit: cover;
  object-position: center 54%;
}

.service-page--rtt .offshore-contact--figma .offshore-contact__intro .eyebrow {
  display: none;
}

.service-page--rtt .offshore-contact--figma .offshore-contact__intro h2 {
  margin: 0;
  color: var(--color-black);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: none;
}

.service-page--rtt .offshore-contact--figma .offshore-contact__intro p {
  margin: 5px 0 0;
  color: var(--color-black);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.15;
}

@media (min-width: 921px) {
  .service-page--rtt .offshore-contact--figma {
    padding: 66px 49px 50px;
  }

  .service-page--rtt .offshore-contact--figma .offshore-contact__panel {
    display: block;
    width: min(100%, 1342px);
    max-width: none;
    margin: 0 auto;
  }

  .service-page--rtt .offshore-contact--figma .offshore-contact__intro,
  .service-page--rtt .offshore-contact--figma .offshore-contact__form {
    width: min(100%, 839px);
  }

  .service-page--rtt .offshore-contact--figma .offshore-contact__form {
    grid-template-columns: minmax(0, 486px) minmax(0, 316px);
    gap: 0 37px;
    margin-top: 48px;
  }

  .service-page--rtt .offshore-contact--figma .contact-page-form__fields {
    grid-template-columns: repeat(2, minmax(0, 221px));
    gap: 39px 38px;
  }
}

@media (max-width: 1120px) and (min-width: 761px) {
  .service-page--rtt .offshore-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-page--rtt .offshore-stat {
    min-height: 430px;
  }

  .rtt-audience__carousel {
    --rtt-card-width: calc((100vw - 124px) / 2);
  }
}

@media (max-width: 920px) {
  .rtt-intro__stage {
    top: 64px;
    height: calc(100svh - 64px);
  }

  .service-page--rtt .offshore-contact--figma .offshore-contact__intro h2 {
    font-size: clamp(25px, 7vw, 28px);
  }
}

@media (max-width: 760px) {
  .service-page--rtt .offshore-hero__content {
    width: min(100% - 8px, 520px);
  }

  .service-page--rtt .offshore-hero h1 {
    font-size: clamp(38px, 11.4vw, 54px);
    line-height: 0.92;
  }

  .service-page--rtt .offshore-stats-section {
    width: min(100% - 32px, 620px);
    margin-top: 64px;
    margin-bottom: 64px;
  }

  .service-page--rtt .offshore-stats {
    width: 100%;
  }

  .rtt-intro-scroll {
    height: 180svh;
  }

  .rtt-intro {
    width: min(100% - 32px, 620px);
    padding-top: 52px;
  }

  .rtt-intro__copy p {
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.03;
  }

  .rtt-intro__graphic-reveal {
    right: calc(50% - 50vw);
    bottom: 0;
    width: min(100%, 470px, 68svh);
  }

  .service-page--rtt .service-feature--rtt {
    height: 165svh;
  }

  .service-page--rtt .service-feature--rtt .offshore-connection__stage {
    min-height: 760px;
  }

  .service-page--rtt .service-feature--rtt .offshore-connection__content {
    top: 50%;
    width: calc(100% - 32px);
  }

  .rtt-feature__copy p {
    font-size: clamp(18px, 5vw, 22px);
    line-height: 1.08;
  }

  .rtt-audience__carousel {
    --rtt-card-width: min(86vw, 533px);
    width: 100%;
  }

  .rtt-audience__track {
    gap: 18px;
    padding: 0 16px;
    scroll-padding-inline: 16px;
  }

  .rtt-audience-card h3 {
    min-height: 48px;
    font-size: clamp(22px, 6.8vw, 29px);
  }

  .rtt-audience__carousel .rtt-audience__arrow--prev {
    left: 24px;
  }

  .rtt-audience__carousel .rtt-audience__arrow--next {
    right: 24px;
  }

  .service-page--rtt .rtt-deliverables__graphic {
    right: auto;
    bottom: auto;
    width: min(100%, 360px);
    margin: 22px 0 -24px auto;
  }

  .service-page--rtt .offshore-why > :is(img, .offshore-why__media) {
    height: 62vw;
  }
}

@media (max-width: 560px) {
  .service-page--rtt .offshore-stat {
    min-height: min(132vw, 520px);
  }

  .service-page--rtt .rtt-intro__copy p {
    font-size: clamp(22px, 6.45vw, 25px);
  }

  .service-page--rtt .offshore-stat h3 strong {
    font-size: clamp(54px, 18vw, 78px);
  }

  .rtt-intro__graphic-reveal {
    right: calc(50% - 50vw);
    bottom: 0;
    width: min(100%, 420px, 64svh);
  }

  .service-page--rtt .service-feature--rtt .offshore-connection__content {
    top: 50%;
  }

  .service-page--rtt .service-feature--rtt .offshore-connection__actions {
    gap: 10px;
  }

  .service-page--rtt .offshore-deliverables {
    justify-content: flex-start;
  }

  .service-page--rtt .rtt-deliverables__graphic {
    width: min(100%, 330px);
    margin: 28px 0 -20px auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rtt-intro-scroll {
    --rtt-cable-draw: 1;
    height: auto;
  }

  .service-page--rtt .rtt-deliverables__graphic {
    --rtt-cable-draw: 1;
  }

  .rtt-intro__stage {
    position: relative;
    top: auto;
    height: auto;
    min-height: 760px;
  }

  .rtt-intro__graphic-reveal {
    opacity: 1;
  }

  .rtt-audience__track {
    scroll-behavior: auto;
  }
}

/* Mobile High-Voltage Testing — Figma 653:835 */
.service-page--mobile-testing .offshore-hero__content {
  width: min(100% - 48px, 981px);
}

.service-page--mobile-testing .offshore-hero__image {
  object-position: center center;
}

.service-page--mobile-testing .offshore-stats-section {
  width: min(100% - 96px, 1224px);
  margin-top: 103px;
  margin-bottom: 84px;
}

.service-page--mobile-testing .offshore-stats {
  gap: 12px;
}

.service-page--mobile-testing .offshore-stat {
  min-height: 580px;
  border-radius: 8px;
  box-shadow: 0 16px 26px rgba(26, 27, 34, 0.12);
}

.service-page--mobile-testing .offshore-stat h3 {
  right: 24px;
  bottom: 29px;
  left: 24px;
}

.service-page--mobile-testing .mobile-testing-intro-scroll {
  height: 190svh;
}

.service-page--mobile-testing .rtt-intro__copy {
  max-width: 1123px;
  margin-left: 0;
}

.service-page--mobile-testing .rtt-intro__copy p {
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.03;
}

.service-page--mobile-testing .rtt-intro__graphic-reveal {
  right: calc(50% - 50vw);
  bottom: 0;
  width: min(760px, 54vw);
}

.service-page--mobile-testing .service-feature--mobile-testing {
  height: 155svh;
}

.service-page--mobile-testing .service-feature--mobile-testing .offshore-connection__stage {
  min-height: 680px;
}

.service-page--mobile-testing .service-feature--mobile-testing .offshore-connection__bg {
  object-position: center center;
}

.service-page--mobile-testing .service-feature--mobile-testing .offshore-connection__shade {
  background: rgba(0, 0, 0, 0.08);
}

body.reynard-offshore-service-page .service-page--mobile-testing .service-feature--mobile-testing .offshore-connection__content {
  top: 50%;
  bottom: auto;
  width: min(100% - 48px, 920px);
  height: auto;
  transform: translate(-50%, -50%);
}

body.reynard-offshore-service-page .service-page--mobile-testing .service-feature--mobile-testing h2 {
  position: static;
  width: 100%;
  margin: 0;
  color: var(--color-white);
  font-size: clamp(35px, 3.5vw, 50px);
  font-weight: 400;
  line-height: 1;
}

body.reynard-offshore-service-page .service-page--mobile-testing .service-feature--mobile-testing .offshore-connection__actions {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
  transform: none;
}

.service-page--mobile-testing .service-audience {
  overflow: hidden;
  padding-top: clamp(116px, 12vw, 172px);
}

.service-page--mobile-testing .service-audience .offshore-audience__heading {
  margin-bottom: 63px;
}

.service-page--mobile-testing .rtt-audience__carousel {
  --rtt-card-width: min(533px, calc(100vw - 128px));
  --rtt-track-start: max(64px, calc((100vw - 1128px) / 2));
}

.service-page--mobile-testing .rtt-audience__track {
  gap: 57px;
}

.service-page--mobile-testing .rtt-audience-card h3 {
  font-size: clamp(24px, 2.44vw, 35px);
  font-weight: 600;
}

.service-page--mobile-testing .rtt-audience__carousel .rtt-audience__arrow {
  top: 184px;
}

.service-page--mobile-testing .offshore-applications > h2 {
  margin-bottom: 63px;
}

.service-page--mobile-testing .offshore-application__copy h3 {
  font-size: 28px;
}

.service-page--mobile-testing .offshore-application__copy p {
  line-height: var(--ry-service-leading);
}

.service-page--mobile-testing .offshore-deliverables {
  border-color: var(--color-blue);
}

.service-page--mobile-testing .offshore-deliverables h2 {
  color: var(--color-orange);
}

.service-page--mobile-testing .offshore-deliverables p {
  text-transform: none;
}

.service-page--mobile-testing .offshore-deliverables__graphic {
  right: 18px;
  bottom: 0;
  width: 317px;
  max-height: 100%;
  object-fit: contain;
  object-position: right bottom;
  clip-path: inset(max(7px, calc((1 - var(--draw-progress)) * 100%)) 0 7px 0);
  will-change: clip-path;
}

.service-page--mobile-testing .offshore-why > img {
  height: min(42vw, 580px);
  object-fit: cover;
  object-position: center 67%;
}

.service-page--mobile-testing .offshore-contact--figma .offshore-contact__intro .eyebrow {
  display: none;
}

.service-page--mobile-testing .offshore-contact--figma .offshore-contact__intro h2 {
  margin: 0;
  color: var(--color-black);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: none;
}

.service-page--mobile-testing .offshore-contact--figma .offshore-contact__intro p {
  margin: 5px 0 0;
  color: var(--color-black);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.15;
}

.service-page--mobile-testing .offshore-faq {
  width: min(100% - 96px, 1123px);
}

@media (min-width: 921px) {
  .service-page--mobile-testing .offshore-contact--figma {
    padding: 66px 49px 50px;
  }

  .service-page--mobile-testing .offshore-contact--figma .offshore-contact__panel {
    display: block;
    width: min(100%, 1342px);
    max-width: none;
    margin: 0 auto;
  }

  .service-page--mobile-testing .offshore-contact--figma .offshore-contact__intro,
  .service-page--mobile-testing .offshore-contact--figma .offshore-contact__form {
    width: min(100%, 839px);
  }

  .service-page--mobile-testing .offshore-contact--figma .offshore-contact__form {
    grid-template-columns: minmax(0, 486px) minmax(0, 316px);
    gap: 0 37px;
    margin-top: 48px;
  }

  .service-page--mobile-testing .offshore-contact--figma .contact-page-form__fields {
    grid-template-columns: repeat(2, minmax(0, 221px));
    gap: 39px 38px;
  }
}

@media (max-width: 1120px) and (min-width: 761px) {
  .service-page--mobile-testing .offshore-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-page--mobile-testing .offshore-stat {
    min-height: 430px;
  }

  .service-page--mobile-testing .rtt-audience__carousel {
    --rtt-card-width: calc((100vw - 124px) / 2);
    --rtt-track-start: 48px;
  }

  .service-page--mobile-testing .rtt-audience__track {
    gap: 28px;
  }

  .service-page--mobile-testing .rtt-intro__copy {
    max-width: none;
    margin-left: 0;
  }

  .service-page--rtt .rtt-intro__graphic-reveal,
  .service-page--mobile-testing .rtt-intro__graphic-reveal {
    right: calc(50% - 50vw);
    width: min(700px, 62vw);
  }
}

@media (max-width: 920px) {
  .service-page--mobile-testing .offshore-contact--figma .offshore-contact__intro h2 {
    font-size: clamp(25px, 7vw, 28px);
  }
}

@media (max-width: 760px) {
  .service-page--mobile-testing .offshore-hero {
    min-height: 100svh;
  }

  .service-page--mobile-testing .offshore-hero__content {
    width: min(100% - 8px, 520px);
  }

  .service-page--mobile-testing .offshore-hero h1 {
    font-size: clamp(40px, 12vw, 56px);
    line-height: 0.92;
  }

  .service-page--mobile-testing .offshore-stats-section {
    width: min(100% - 32px, 620px);
    margin-top: 64px;
    margin-bottom: 64px;
  }

  .service-page--mobile-testing .offshore-stats {
    width: 100%;
  }

  .service-page--mobile-testing .mobile-testing-intro-scroll {
    height: 180svh;
  }

  .service-page--mobile-testing .rtt-intro {
    width: min(100% - 32px, 620px);
    padding-top: 52px;
  }

  .service-page--mobile-testing .rtt-intro__copy {
    max-width: none;
    margin-left: 0;
  }

  .service-page--mobile-testing .rtt-intro__copy p {
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.03;
  }

  .service-page--mobile-testing .rtt-intro__graphic-reveal {
    right: calc(50% - 50vw);
    bottom: 0;
    width: min(100%, 470px, 68svh);
  }

  .service-page--mobile-testing .service-feature--mobile-testing {
    height: 160svh;
  }

  .service-page--mobile-testing .service-feature--mobile-testing .offshore-connection__stage {
    min-height: 760px;
  }

  .service-page--mobile-testing .service-feature--mobile-testing .offshore-connection__bg {
    object-position: 48% center;
  }

  body.reynard-offshore-service-page .service-page--mobile-testing .service-feature--mobile-testing h2 {
    font-size: clamp(27px, 7.2vw, 36px);
    line-height: 1;
  }

  body.reynard-offshore-service-page .service-page--mobile-testing .service-feature--mobile-testing .offshore-connection__actions {
    width: min(100%, 400px);
  }

  .service-page--mobile-testing .service-audience {
    padding-top: var(--ry-service-section-space);
  }

  .service-page--mobile-testing .service-audience .offshore-audience__heading {
    margin-bottom: 36px;
  }

  .service-page--mobile-testing .rtt-audience__carousel {
    --rtt-card-width: min(86vw, 533px);
    --rtt-track-start: 16px;
  }

  .service-page--mobile-testing .rtt-audience__track {
    gap: 18px;
  }

  .service-page--mobile-testing .rtt-audience__carousel .rtt-audience__arrow {
    top: calc(var(--rtt-card-width) * 0.378);
  }

  .service-page--mobile-testing .rtt-audience-card h3 {
    font-size: clamp(22px, 6.8vw, 29px);
  }

  .service-page--mobile-testing .offshore-application__copy h3 {
    font-size: var(--ry-service-card-heading);
  }

  .service-page--mobile-testing .offshore-application__copy p {
    line-height: var(--ry-service-leading);
  }

  .service-page--mobile-testing .offshore-deliverables__graphic {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(210px, 58vw);
    margin: 16px -12px 0 auto;
  }

  .service-page--mobile-testing .offshore-deliverables-scroll {
    height: 145svh;
  }

  .service-page--mobile-testing .offshore-why > img {
    height: 62vw;
  }

  .service-page--mobile-testing .offshore-faq {
    width: min(100% - 32px, 620px);
  }
}

@media (max-width: 560px) {
  .service-page--mobile-testing .offshore-stat {
    min-height: min(132vw, 520px);
  }

  .service-page--mobile-testing .offshore-stat h3 strong {
    font-size: clamp(54px, 18vw, 78px);
  }

  .service-page--mobile-testing .rtt-intro__copy p {
    font-size: clamp(22px, 6.45vw, 25px);
  }

  .service-page--mobile-testing .rtt-intro__graphic-reveal {
    width: min(100%, 420px, 64svh);
  }

  .service-page--mobile-testing .service-feature--mobile-testing .offshore-connection__actions {
    gap: 10px;
  }

  .service-page--mobile-testing .offshore-deliverables {
    justify-content: flex-start;
  }

  .service-page--mobile-testing .offshore-deliverables__graphic {
    width: min(180px, 54vw);
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-page--mobile-testing .offshore-deliverables__graphic {
    clip-path: inset(7px 0 7px 0);
  }
}

/* Shared service feature: one scale, one layout and one scroll treatment. */
.offshore-page .service-feature.offshore-connection {
  --service-feature-copy-size: clamp(24px, 2.35vw, 34px);
  height: 155svh;
}

.offshore-page .service-feature .offshore-connection__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
}

.offshore-page .service-feature .offshore-connection__bg {
  z-index: 0;
  transform: translate3d(0, calc(4svh - (var(--person-progress) * 8svh)), 0) scale(1.08);
  transform-origin: center;
  will-change: transform;
}

.offshore-page .service-feature .offshore-connection__person {
  z-index: 1;
  transform: translate3d(0, calc(12svh - (var(--person-progress) * 12svh)), 0) scale(1.02);
  transform-origin: center bottom;
  will-change: transform;
}

.offshore-page .service-feature .offshore-connection__shade {
  z-index: 1;
  display: block;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.offshore-page .service-feature .offshore-connection__content {
  top: 50%;
  bottom: auto;
  left: 50%;
  width: min(calc(100% - 64px), 980px);
  height: auto;
  gap: clamp(18px, 2.4svh, 28px);
  transform: translate(-50%, -50%);
  text-align: center;
}

.offshore-page .service-feature .offshore-connection__content > h2:not(.screen-reader-text),
.offshore-page .service-feature .service-feature__copy p {
  width: 100%;
  max-width: none;
  margin-right: auto;
  margin-left: auto;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--service-feature-copy-size);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.offshore-page .service-feature .service-feature__copy {
  width: 100%;
  max-width: none;
}

.offshore-page .service-feature .service-feature__copy p {
  margin-top: 0;
  margin-bottom: 0.9em;
}

.offshore-page .service-feature .service-feature__copy p:last-child {
  margin-bottom: 0;
}

.offshore-page .service-feature .offshore-connection__actions {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
  margin-top: 2px;
  transform: none;
}

@media (max-width: 760px) {
  .offshore-page .service-feature.offshore-connection {
    --service-feature-copy-size: clamp(18px, 5.2vw, 22px);
    height: 150svh;
  }

  .offshore-page .service-feature .offshore-connection__stage {
    height: 100svh;
    min-height: 720px;
  }

  .offshore-page .service-feature .offshore-connection__bg {
    transform: translate3d(0, calc(3svh - (var(--person-progress) * 6svh)), 0) scale(1.08);
  }

  .offshore-page .service-feature .offshore-connection__person {
    transform: translate3d(0, calc(10svh - (var(--person-progress) * 10svh)), 0) scale(1.02);
  }

  .offshore-page .service-feature .offshore-connection__content {
    top: 50%;
    width: min(calc(100% - 32px), 520px);
    gap: 16px;
    transform: translate(-50%, -50%);
  }

  .offshore-page .service-feature .offshore-connection__content > h2:not(.screen-reader-text),
  .offshore-page .service-feature .service-feature__copy p {
    font-size: var(--service-feature-copy-size);
    line-height: 1.14;
    letter-spacing: -0.018em;
  }

  .offshore-page .service-feature .offshore-connection__actions {
    width: min(100%, 400px);
    gap: 10px;
    margin-right: auto;
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offshore-page .service-feature.offshore-connection {
    height: auto;
  }

  .offshore-page .service-feature .offshore-connection__stage {
    position: relative;
    min-height: 720px;
  }

  .offshore-page .service-feature .offshore-connection__bg,
  .offshore-page .service-feature .offshore-connection__person {
    transform: none;
    will-change: auto;
  }
}

/* Mobile navigation and mega-menu foundation */
body.mobile-nav-open {
  overflow: hidden;
}

@media (max-width: 920px) {
  .site-header {
    --mobile-header-height: 64px;
    z-index: 120;
  }

  .site-header.is-open {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    max-height: 100dvh;
    overflow-y: auto;
    background: var(--color-white);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
    -webkit-overflow-scrolling: touch;
  }

  body.admin-bar .site-header.is-open {
    top: 46px;
    max-height: calc(100dvh - 46px);
  }

  .site-header__inner {
    width: calc(100% - 32px);
    min-height: var(--mobile-header-height);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .site-logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .site-logo img {
    width: 132px;
  }

  .nav-toggle {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    border-radius: 3px;
    cursor: pointer;
  }

  .nav-toggle span:not(.screen-reader-text) {
    width: 24px;
    margin: 3px auto;
    transition:
      transform 180ms ease,
      opacity 180ms ease,
      background-color 180ms ease;
  }

  .site-header.is-open .nav-toggle span:not(.screen-reader-text) {
    background: var(--color-ink);
  }

  .site-header.is-open .nav-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .site-header.is-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  .site-header.is-open .nav-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .site-header.is-open .site-nav {
    display: block;
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    padding: 12px 0 6px;
  }

  .site-header.is-open .site-nav__list {
    display: grid;
    gap: 6px;
  }

  .site-header.is-open .site-nav__item > a {
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    color: var(--color-ink);
    border-radius: 3px;
    background: transparent;
    font-size: 18px;
    text-align: left;
  }

  .site-header.is-open .site-nav__item > a:hover,
  .site-header.is-open .site-nav__item > a:focus-visible,
  .site-header.is-open .site-nav__item--mega.is-active > a {
    background: #f0f0f0;
  }

  .site-header.is-open .site-nav__item--mega > a::after {
    content: "+";
    margin-left: auto;
    color: var(--color-orange);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
  }

  .site-header.is-open .site-nav__item--mega.is-active > a::after {
    content: "-";
  }

  .site-header.is-open .header-cta {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
    margin: 10px 0 18px;
  }

  .site-header.is-open .mega-menu {
    display: none;
    position: static;
    visibility: hidden;
    opacity: 0;
    transform: none;
    width: calc(100% - 32px);
    margin: 0 auto;
    border-top: 1px solid #eeeeee;
    background: var(--color-white);
    pointer-events: none;
  }

  .site-header.is-open .mega-menu.is-active {
    display: block;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .site-header.is-open .mega-menu__inner,
  .site-header.is-open .mega-menu__inner--about,
  .site-header.is-open .mega-menu__inner--feature-cards,
  .site-header.is-open .mega-menu__inner--news {
    display: grid;
    width: 100%;
    max-width: none;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px 0 28px;
    opacity: 1;
    transform: none;
  }

  .site-header.is-open .mega-menu__services,
  .site-header.is-open .mega-menu__about,
  .site-header.is-open .mega-menu__cards,
  .site-header.is-open .mega-news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .site-header.is-open .mega-service,
  .site-header.is-open .mega-about-card,
  .site-header.is-open .mega-feature-card,
  .site-header.is-open .mega-news-card {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
    /* Top-align (not center) so the thumbnail's top edge always lines up
       with the heading's top edge, regardless of whether the heading wraps
       to one or two lines — centering here made row height (and so the
       image and heading's vertical position) vary from card to card. */
    align-items: start;
    padding: 8px;
    border: 1px solid #eeeeee;
    border-radius: 8px;
    background: var(--color-white);
    text-align: left;
  }

  .site-header.is-open .mega-service__image,
  .site-header.is-open .mega-about-card__image,
  .site-header.is-open .mega-feature-card__image,
  .site-header.is-open .mega-news-card__image {
    grid-row: 1 / span 2;
    width: 84px;
    height: 84px;
    min-height: 0;
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
  }

  .site-header.is-open .mega-service__image img,
  .site-header.is-open .mega-about-card__image img,
  .site-header.is-open .mega-feature-card__image img,
  .site-header.is-open .mega-news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .site-header.is-open .mega-service h2,
  .site-header.is-open .mega-about-card h2,
  .site-header.is-open .mega-feature-card h2,
  .site-header.is-open .mega-news-card h2 {
    display: block;
    padding: 0;
    min-height: 0;
    margin: 0 0 8px;
    font-size: 19px;
    line-height: 1.2;
    text-align: left;
  }

  .site-header.is-open .mega-service__actions,
  .site-header.is-open .mega-about-card__actions,
  .site-header.is-open .mega-feature-card__actions {
    grid-column: 2;
    justify-content: flex-start;
    gap: 16px;
  }

  .site-header.is-open .mega-service__actions a,
  .site-header.is-open .mega-about-card__actions a,
  .site-header.is-open .mega-feature-card__actions a {
    font-size: 12px;
    line-height: 1.2;
  }

  .site-header.is-open .mega-news-card__body {
    min-height: 0;
    padding: 0;
  }

  .site-header.is-open .mega-news-card__tag,
  .site-header.is-open .mega-news-card__body p:not(.mega-news-card__tag),
  .site-header.is-open .mega-news-card time {
    font-size: 12px;
  }

  .site-header.is-open .mega-menu__links,
  .site-header.is-open .mega-menu__links--about,
  .site-header.is-open .mega-menu__links--feature-cards,
  .site-header.is-open .mega-menu__links--news {
    display: grid;
    min-height: 0;
    gap: 0;
    border-left: 0;
    border-top: 1px dashed #cfcfcf;
    padding: 10px 0 0;
  }

  .site-header.is-open .mega-menu__links a {
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    font-size: 15px;
  }

  body.mobile-nav-open main,
  body.mobile-nav-open .site-footer,
  body.mobile-nav-open.mega-menu-open main,
  body.mobile-nav-open.mega-menu-open .site-footer {
    filter: none;
  }

  body.mobile-nav-open.mega-menu-open::before {
    opacity: 0;
  }

  .reynard-academy-page .site-header.is-open {
    margin-bottom: 0;
  }
}

@media (max-width: 520px) {
  .site-header.is-open .mega-service,
  .site-header.is-open .mega-about-card,
  .site-header.is-open .mega-feature-card,
  .site-header.is-open .mega-news-card {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .site-header.is-open .mega-service__image,
  .site-header.is-open .mega-about-card__image,
  .site-header.is-open .mega-feature-card__image,
  .site-header.is-open .mega-news-card__image {
    width: 72px;
    height: 72px;
  }

  .site-header.is-open .mega-service h2,
  .site-header.is-open .mega-about-card h2,
  .site-header.is-open .mega-feature-card h2,
  .site-header.is-open .mega-news-card h2 {
    font-size: 17px;
  }
}

@media (min-width: 640px) and (max-width: 920px) {
  .site-header.is-open .mega-menu__services,
  .site-header.is-open .mega-menu__about,
  .site-header.is-open .mega-menu__cards,
  .site-header.is-open .mega-news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-header.is-open .mega-menu__links,
  .site-header.is-open .mega-menu__links--about,
  .site-header.is-open .mega-menu__links--feature-cards,
  .site-header.is-open .mega-menu__links--news {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}

/* Meet the Team page */
.reynard-transparent-header .site-header {
  position: sticky;
  top: 0;
  right: auto;
  left: auto;
  margin-bottom: -75px;
  background: transparent;
  box-shadow: none;
}

.reynard-transparent-header .site-header:not(.is-scrolled):not(.is-mega-open):not(.is-open) .site-nav__item > a {
  color: var(--color-white);
}

.reynard-transparent-header .site-header:not(.is-scrolled):not(.is-mega-open):not(.is-open) .nav-toggle span {
  background: var(--color-white);
}

.reynard-transparent-header .site-header.is-scrolled,
.reynard-transparent-header .site-header.is-mega-open,
.reynard-transparent-header .site-header.is-open {
  background: var(--color-white);
}

.reynard-transparent-header .site-header.is-scrolled .site-nav__item > a,
.reynard-transparent-header .site-header.is-mega-open .site-nav__item > a,
.reynard-transparent-header .site-header.is-open .site-nav__item > a {
  color: var(--color-ink);
}

.reynard-transparent-header .site-header.is-scrolled .nav-toggle span,
.reynard-transparent-header .site-header.is-mega-open .nav-toggle span,
.reynard-transparent-header .site-header.is-open .nav-toggle span {
  background: var(--color-ink);
}

.team-page {
  background: #f4f4f4;
}

.team-hero {
  position: relative;
  display: grid;
  min-height: clamp(640px, 67.15vw, 967px);
  overflow: hidden;
  place-items: center;
  background: #111111;
}

.team-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(0, 0, 0, 0.16);
  pointer-events: none;
}

.team-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 30px;
  width: min(100% - 32px, 720px);
  padding-top: 0;
  text-align: center;
}

.team-hero h1 {
  max-width: 690px;
  margin: 0;
  color: var(--color-white);
  font-size: var(--ry-type-hero);
  font-style: italic;
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
}

.team-hero h1 span {
  display: block;
}

.team-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
}

.team-hero__actions .button {
  width: 200px;
}

.team-intro {
  display: grid;
  min-height: 232px;
  place-items: center;
  padding: 56px 24px;
  background: #f4f4f4;
}

.team-intro p {
  max-width: 672px;
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(22px, 2.08vw, 30px);
  line-height: 0.95;
  text-align: center;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  background: #d8d8d8;
}

.team-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 360 / 471.3;
  margin: 0;
  overflow: hidden;
  background: #d8d8d8;
  outline: 0;
}

.team-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition:
    filter 220ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.team-card--anna {
  background: linear-gradient(194deg, #7b7b7b 8%, #848484 97%);
}

.team-card--anna img {
  height: 114.6%;
  object-fit: cover;
  object-position: center top;
  transform: translateY(-8.9%);
}

.team-card--gerard-meijster img {
  width: calc(100% + 3px);
  max-width: none;
}

.team-card::after {
  position: absolute;
  inset: 42% 0 0;
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.62));
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.team-card__overlay {
  position: absolute;
  right: 7.5%;
  bottom: 8%;
  left: 7.5%;
  z-index: 1;
  display: grid;
  gap: 2px;
  color: var(--color-white);
  opacity: 0;
  text-shadow: 0 4px 22.9px rgba(0, 0, 0, 0.5);
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 180ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.team-card__name {
  font-size: clamp(20px, 2.08vw, 30px);
  font-weight: 400;
  line-height: 1;
}

.team-card__role {
  color: var(--color-orange);
  font-size: clamp(14px, 1.39vw, 20px);
  font-weight: 700;
  line-height: 1;
}

.team-card:hover img,
.team-card:focus-visible img {
  filter: grayscale(100%) contrast(1.04);
  transform: scale(1.025);
}

.team-card--anna:hover img,
.team-card--anna:focus-visible img {
  transform: translateY(-8.9%) scale(1.025);
}

.team-card:hover::after,
.team-card:focus-visible::after,
.team-card:hover .team-card__overlay,
.team-card:focus-visible .team-card__overlay {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 1100px) {
  .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 921px) and (max-width: 1500px) {
  .team-hero__content {
    transform: translateY(-3vh);
  }
}

@media (max-width: 760px) {
  .reynard-transparent-header .site-header {
    margin-bottom: -64px;
  }

  .team-hero {
    min-height: 720px;
  }

  .team-hero__content {
    transform: none;
  }

  .team-hero__actions {
    gap: 14px;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-card__overlay {
    right: 8px;
    bottom: 10px;
    left: 8px;
  }

  .team-card__name {
    font-size: 18px;
  }

  .team-card__role {
    font-size: 12px;
  }

  .team-card::after,
  .team-card .team-card__overlay {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 520px) {
  .team-hero {
    min-height: 620px;
  }

  .team-hero h1 {
    font-size: 46px;
  }

  .team-hero__actions {
    width: min(100%, 280px);
  }

  .team-hero__actions .button {
    width: 100%;
  }

  .team-intro {
    min-height: 180px;
  }
}

/* Contact page */
.contact-page {
  background: var(--color-white);
}

.contact-hero {
  position: relative;
  display: grid;
  min-height: clamp(680px, 67.15vw, 967px);
  overflow: hidden;
  place-items: center;
  background: #111111;
  border-right: 12px solid var(--color-orange);
  border-bottom: 12px solid var(--color-orange);
}

.contact-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.contact-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.contact-hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 30px;
  width: min(100% - 32px, 860px);
  text-align: center;
  transform: translateY(-14svh);
}

.contact-hero h1 {
  max-width: 760px;
  margin: 0;
  color: var(--color-white);
  font-size: var(--ry-type-hero);
  font-style: italic;
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
}

.contact-hero h1 span {
  display: block;
  white-space: nowrap;
}

.contact-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.contact-hero__actions .button {
  width: 200px;
}

.contact-intro {
  display: grid;
  min-height: 344px;
  place-items: center;
  padding: 72px 24px;
  background: var(--color-white);
}

.contact-intro p {
  max-width: 888px;
  margin: 0;
  color: #50535a;
  font-size: clamp(25px, 2.1vw, 30px);
  line-height: 1.06;
  text-align: center;
}

.contact-panel {
  padding: 0 0 112px;
  background: var(--color-white);
}

.contact-panel__inner {
  width: min(100% - 80px, 1200px);
  margin: 0 auto;
}

.contact-panel__form-wrap h2 {
  margin: 0 0 20px;
  color: var(--color-black);
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 900;
  line-height: 1;
}

.brochure-download__panel {
  min-height: min(720px, calc(100vh - var(--header-height, 0px)));
  padding-top: clamp(72px, 12vw, 156px);
}

.brochure-download .contact-panel__form-wrap {
  max-width: 760px;
}

.brochure-download .contact-panel__form-wrap .eyebrow {
  display: block;
  margin: 0 0 12px;
  color: var(--color-orange);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.brochure-download .contact-panel__form-wrap h1 {
  margin: 0 0 20px;
  color: var(--color-black);
  font-size: clamp(38px, 4.8vw, 68px);
  font-weight: 900;
  line-height: .92;
}

.brochure-download__form {
  max-width: 620px;
  margin: 36px 0 0;
}

.brochure-download__fallback {
  margin: 36px 0 0;
}

.contact-panel__form-wrap > p {
  max-width: 646px;
  margin: 0 0 28px;
  color: var(--color-black);
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.02;
}

.contact-page-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 474px) minmax(236px, 316px);
  grid-template-areas:
    "fields details"
    "consent submit";
  gap: 0 37px;
}

.contact-page-form__fields {
  display: grid;
  grid-area: fields;
  grid-template-columns: repeat(2, minmax(0, 221px));
  gap: 31px 32px;
}

.contact-page-form label span {
  display: block;
  margin: 0 0 7px;
  color: #5c5e62;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.contact-page-form input[type="text"],
.contact-page-form input[type="email"],
.contact-page-form input[type="tel"],
.contact-page-form textarea {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 4px;
  background: #ededed;
  color: var(--color-ink);
  font: inherit;
}

.contact-page-form input[type="text"],
.contact-page-form input[type="email"],
.contact-page-form input[type="tel"] {
  height: 39px;
  padding: 0 12px;
}

.contact-page-form textarea {
  height: 139px;
  min-height: 139px;
  padding: 10px 12px;
  resize: vertical;
}

.contact-page-form__details {
  grid-area: details;
}

.contact-page-form__consent {
  display: flex;
  grid-area: consent;
  align-items: center;
  gap: 13px;
  margin-top: 24px;
}

.contact-page-form__consent input {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--color-orange);
}

.contact-page-form__consent span {
  margin: 0;
  color: #5c5e62;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.contact-page-form__consent a {
  color: #5c5e62;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-page-form__submit {
  grid-area: submit;
  justify-self: stretch;
  margin-top: 21px;
}

.contact-page-form__success[hidden] {
  display: none;
}

.contact-page-form__success {
  position: absolute;
  inset: -12px;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  background: var(--color-white);
  text-align: center;
}

.contact-page-form__success img {
  width: 86px;
  height: auto;
}

.contact-page-form__success p {
  margin: 0;
  color: var(--color-black);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
}

.contact-page-form__error[hidden] {
  display: none;
}

.contact-page-form__error {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 16px;
  border-radius: 6px;
  background: #fdecea;
  color: #b3261e;
  font-size: 14px;
  font-weight: 600;
}

/* Shared reskin for real WPForms forms embedded directly (not via the
   custom-form-plus-hidden-proxy pattern) — e.g. multi-step forms with
   conditional logic or file uploads, where reproducing WPForms' own field
   engine in custom markup isn't worth it. Wrap the [wpforms] shortcode
   output in <div class="wpforms-reskin"> to pick this up. */
.wpforms-reskin {
  --wpforms-field-border-radius: 4px;
  max-width: 620px;
  margin: 0 auto;
}

.wpforms-reskin .wpforms-container {
  max-width: none;
}

.wpforms-reskin .wpforms-field {
  padding: 0 0 24px;
}

.wpforms-reskin .wpforms-field-label {
  display: block;
  margin: 0 0 7px;
  color: #5c5e62;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.wpforms-reskin .wpforms-required-label {
  color: var(--color-orange);
}

.wpforms-reskin .wpforms-field-description,
.wpforms-reskin .wpforms-field-sublabel {
  margin-top: 6px;
  color: #5c5e62;
  font-size: 13px;
}

.wpforms-reskin input[type="text"],
.wpforms-reskin input[type="email"],
.wpforms-reskin input[type="tel"],
.wpforms-reskin input[type="number"],
.wpforms-reskin input[type="url"],
.wpforms-reskin select,
.wpforms-reskin textarea {
  display: block;
  width: 100%;
  height: 39px;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: #ededed;
  color: var(--color-ink);
  font: inherit;
  font-size: 15px;
}

.wpforms-reskin select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #5c5e62 50%), linear-gradient(135deg, #5c5e62 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.wpforms-reskin textarea {
  height: 139px;
  min-height: 139px;
  padding: 10px 12px;
  resize: vertical;
}

.wpforms-reskin ul.wpforms-field-required,
.wpforms-reskin ul.primary-input {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wpforms-reskin ul.wpforms-field-required li,
.wpforms-reskin ul.primary-input li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wpforms-reskin ul.wpforms-field-required input[type="radio"],
.wpforms-reskin ul.wpforms-field-required input[type="checkbox"],
.wpforms-reskin ul.primary-input input[type="radio"],
.wpforms-reskin ul.primary-input input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-orange);
}

.wpforms-reskin ul.wpforms-field-required label,
.wpforms-reskin ul.primary-input label {
  margin: 0;
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 500;
}

.wpforms-reskin .wpforms-uploader.dz-clickable {
  padding: 24px;
  border: 1.5px dashed #c7c7c7;
  border-radius: 4px;
  background: #f8f8f8;
  text-align: center;
}

.wpforms-reskin .wpforms-page-indicator.progress {
  margin: 0 0 32px;
}

.wpforms-reskin .wpforms-page-indicator.progress .wpforms-page-indicator-page-title,
.wpforms-reskin .wpforms-page-indicator.progress .wpforms-page-indicator-steps {
  color: #5c5e62;
  font-size: 13px;
  font-weight: 600;
}

.wpforms-reskin button.wpforms-page-button,
.wpforms-reskin button.wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 99px;
  min-height: var(--ry-button-height);
  padding: 0.72rem 1.45rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-orange);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.wpforms-reskin button.wpforms-page-button:hover,
.wpforms-reskin button.wpforms-submit:hover {
  transform: translateY(-1px);
}

.wpforms-reskin button.wpforms-page-button.wpforms-page-prev {
  background: var(--color-white);
  color: var(--color-orange);
  border: 2px solid var(--color-orange);
}

.wpforms-reskin .wpforms-field-label-inline,
.wpforms-reskin label.wpforms-error,
.wpforms-reskin .wpforms-error {
  color: #b3261e;
  font-size: 13px;
  font-weight: 600;
}

.contact-location {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  background: #dedede;
}

.contact-location__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(0.94) brightness(1.04);
}

.contact-location::after {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.contact-location__pin {
  position: absolute;
  z-index: 2;
  width: 31px;
  height: 31px;
  border: 7px solid var(--color-orange);
  border-radius: 999px 999px 999px 0;
  background: var(--color-white);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transform: rotate(-45deg);
}

.contact-location__pin::after {
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  background: var(--color-orange);
  content: "";
}

.contact-location__pin--netherlands {
  top: 32%;
  left: 48%;
}

.contact-location__pin--greece {
  top: 76%;
  left: 67%;
}

.contact-location__cards {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 28px;
  width: min(100% - 48px, 450px);
  margin-left: auto;
  padding: 86px clamp(24px, 5vw, 78px) 90px 0;
}

.contact-location-card {
  overflow: hidden;
  border-radius: 3px;
  background: var(--color-orange);
  color: var(--color-white);
}

.contact-location-card img {
  display: block;
  width: 100%;
  height: 212px;
  object-fit: cover;
}

.contact-location-card__body {
  display: grid;
  gap: 18px;
  padding: 28px 33px 32px;
}

.contact-location-card p {
  margin: 0;
  color: var(--color-white);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.04;
}

.contact-location-card a {
  color: inherit;
  text-decoration: none;
}

.contact-location-card .button {
  width: 155px;
  color: var(--color-orange);
}

.contact-location__actions {
  position: absolute;
  bottom: 80px;
  left: clamp(34px, 8vw, 116px);
  z-index: 3;
  display: grid;
  gap: 18px;
}

.contact-location__actions h2 {
  margin: 0;
  color: var(--color-black);
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
}

.contact-location__actions div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.contact-location__actions .button {
  width: 155px;
}

.contact-location__actions .button--light {
  color: var(--color-orange);
}

@media (min-width: 921px) and (max-width: 1500px) {
  .contact-hero__content {
    transform: translateY(-14svh);
  }
}

@media (max-width: 1180px) {
  .contact-page-form {
    max-width: 840px;
  }
}

@media (max-width: 920px) {
  .contact-hero {
    min-height: 720px;
    border-right-width: 8px;
    border-bottom-width: 8px;
  }

  .contact-intro {
    min-height: 260px;
    padding: 56px 20px;
  }

  .contact-panel {
    padding-bottom: 72px;
  }

  .contact-panel__inner {
    width: min(100% - 40px, 720px);
  }

  .contact-page-form {
    grid-template-columns: 1fr;
    grid-template-areas:
      "fields"
      "details"
      "consent"
      "submit";
    gap: 18px;
  }

  .contact-page-form__fields {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .contact-page-form__consent,
  .contact-page-form__submit {
    margin-top: 0;
  }

  .contact-location {
    display: grid;
    min-height: 0;
    padding: 360px 0 0;
  }

  .contact-location__map {
    height: 360px;
  }

  .contact-location__cards {
    width: min(100% - 40px, 450px);
    margin: 0 auto;
    padding: 34px 0 40px;
  }

  .contact-location__actions {
    position: relative;
    bottom: auto;
    left: auto;
    width: min(100% - 40px, 450px);
    margin: 0 auto;
    padding: 0 0 56px;
  }

  .contact-location__pin--netherlands {
    top: 126px;
    left: 45%;
  }

  .contact-location__pin--greece {
    top: 286px;
    left: 72%;
  }
}

@media (max-width: 560px) {
  .contact-hero {
    min-height: 620px;
  }

  .contact-hero h1 {
    font-size: clamp(34px, 11.5vw, 45px);
  }

  .contact-hero__actions {
    width: min(100%, 280px);
    gap: 12px;
  }

  .contact-hero__actions .button,
  .contact-location__actions .button {
    width: 100%;
  }

  .contact-panel__inner {
    width: min(100% - 32px, 520px);
  }

  .contact-location-card p {
    font-size: 18px;
  }
}

/* Contact page map refinement */
.contact-hero {
  border-right: 0;
  border-bottom: 0;
}

.contact-location {
  min-height: clamp(720px, 56.222vw, 1012px);
  background: #edf0ef;
}

.contact-location__map {
  height: 100%;
  filter: none;
  background: #e9ebe9;
}

.contact-location::after {
  display: none;
}

.contact-map-infowindow {
  display: grid;
  gap: 6px;
  min-width: 200px;
  padding: 2px;
}

.contact-map-infowindow strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-black);
}

.contact-map-infowindow p {
  margin: 0;
  color: var(--color-black);
  font-size: 13px;
  line-height: 1.35;
}

.contact-map-infowindow a {
  color: var(--color-orange);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.contact-map-infowindow a:hover,
.contact-map-infowindow a:focus-visible {
  text-decoration: underline;
}

.contact-location__cards {
  position: absolute;
  top: clamp(30px, 4vw, 44px);
  right: clamp(24px, 3.9vw, 70px);
  z-index: 3;
  display: grid;
  width: auto;
  grid-template-columns: repeat(2, minmax(240px, 280px));
  gap: clamp(24px, 2.6vw, 46px);
  margin: 0;
  padding: 0;
}

.contact-location-card {
  border-radius: 6px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
}

.contact-location-card img {
  height: 120px;
}

.contact-location-card__body {
  gap: 20px;
  padding: 27px 35px 22px;
  min-height: 258px;
}

.contact-location-card p {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}

.contact-location-card p + p {
  font-weight: 800;
}

.contact-location-card .button {
  width: 205px;
  min-width: 205px;
  height: 40px;
  justify-self: center;
  color: var(--color-orange);
  background: var(--color-white);
}

.contact-location__actions {
  position: absolute;
  bottom: clamp(36px, 4.4vw, 78px);
  left: clamp(22px, 1.2vw, 22px);
  z-index: 4;
  display: flex;
  align-items: flex-end;
  gap: clamp(38px, 2.2vw, 40px);
}

.contact-location__actions .button {
  width: 248px;
  min-width: 248px;
  height: 50px;
}

.contact-location__actions > .button--light {
  color: var(--color-orange);
  background: var(--color-white);
}

.contact-directions {
  position: relative;
  display: grid;
  gap: 12px;
}

.contact-directions__popover {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  width: 380px;
  padding: 26px 22px 24px;
  border: 1px solid var(--color-blue);
  border-radius: 3px;
  background: var(--color-white);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 160ms ease,
    transform 190ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.contact-directions__popover::after {
  position: absolute;
  right: 0;
  bottom: -14px;
  left: 0;
  height: 14px;
  content: "";
}

.contact-directions:hover .contact-directions__popover,
.contact-directions.is-open .contact-directions__popover,
.contact-directions:focus-within .contact-directions__popover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.contact-directions__popover p {
  margin: 0 0 16px;
  color: var(--color-black);
  font-size: 18px;
  font-style: italic;
  font-weight: 800;
  line-height: 1.15;
}

.contact-directions__popover div {
  display: flex;
  gap: 14px;
}

.contact-directions__popover a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 155px;
  min-height: var(--ry-button-height);
  padding: 0 14px;
  border-radius: 3px;
  background: var(--color-orange);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  transition: transform 180ms ease;
}

.contact-directions__popover a:hover,
.contact-directions__popover a:focus-visible {
  transform: translateY(-1px);
}

@media (max-width: 1180px) {
  .contact-location {
    min-height: 980px;
  }

  .contact-location__cards {
    right: 24px;
    grid-template-columns: repeat(2, minmax(220px, 260px));
    gap: 18px;
  }

  .contact-location-card .button {
    width: 190px;
    min-width: 190px;
  }
}

@media (max-width: 920px) {
  .contact-hero {
    border-right: 0;
    border-bottom: 0;
  }

  .contact-location {
    display: block;
    min-height: 0;
    padding: 0 0 40px;
  }

  .contact-location__map {
    position: relative;
    inset: auto;
    width: 100%;
    height: 320px;
  }

  .contact-location__cards {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: auto;
    grid-template-columns: 1fr;
    padding: 24px 20px 0;
  }

  .contact-location-card__body {
    min-height: 0;
  }

  .contact-location__actions {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    padding: 28px 20px 0;
    display: grid;
    gap: 14px;
  }

  .contact-location__actions .button {
    width: 100%;
    min-width: 0;
  }

  .contact-directions__popover {
    top: calc(100% + 12px);
    bottom: auto;
    width: 100%;
  }

  .contact-directions__popover::after {
    top: -14px;
    bottom: auto;
  }
}

@media (max-width: 560px) {
  .contact-location__map {
    height: 260px;
  }

  .contact-location-card img {
    height: 120px;
  }
}

@media (hover: none) {
  .team-card::after,
  .team-card .team-card__overlay {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Blog and legal pages */
.blog-page,
.article-page,
.privacy-page {
  background: var(--color-page-soft);
}

.blog-hero,
.privacy-hero {
  display: grid;
  place-items: end center;
  min-height: clamp(280px, 34vw, 430px);
  padding: 120px 24px 58px;
  background: var(--color-white);
  text-align: center;
}

.blog-hero__inner,
.privacy-hero__inner {
  width: min(100%, 820px);
}

.blog-hero h1,
.privacy-hero h1 {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--ry-type-hero);
  font-style: italic;
  font-weight: 900;
  line-height: 0.92;
  text-transform: uppercase;
}

.blog-hero p,
.privacy-hero p {
  max-width: 640px;
  margin: 18px auto 0;
  color: var(--color-muted);
  font-size: var(--ry-type-body);
  font-weight: 600;
  line-height: 1.12;
}

.blog-listing {
  width: min(100% - 48px, 900px);
  margin: 0 auto;
  padding: 64px 0 84px;
}

.blog-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.65fr) minmax(150px, 0.65fr) minmax(240px, 0.85fr);
  gap: 12px;
  align-items: end;
  margin-bottom: 34px;
  padding: 18px;
  background: var(--color-white);
  border-radius: var(--radius);
}

.blog-filters__field {
  display: grid;
  gap: 7px;
}

.blog-filters__field span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.blog-filters input,
.blog-filters select {
  width: 100%;
  min-height: 40px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-soft);
  color: var(--color-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  outline: 2px solid transparent;
  transition:
    background 160ms ease,
    outline-color 160ms ease;
}

.blog-filters select {
  cursor: pointer;
}

.blog-filters input:focus,
.blog-filters select:focus {
  background: var(--color-white);
  outline-color: var(--color-orange);
}

.blog-filters__actions {
  display: flex;
  gap: 10px;
}

.blog-filters__actions .button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 0 22px;
  font-size: 14px;
}

.blog-filters__reset {
  border: 1px solid rgba(255, 102, 0, 0.45);
}

.blog-feature {
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(320px, 1.05fr);
  min-height: 320px;
  margin-bottom: 30px;
  overflow: hidden;
  background: var(--color-white);
  border-radius: var(--radius);
}

.blog-feature__image,
.blog-card__image {
  display: block;
  background: #e8e8e8;
}

.blog-feature__image img,
.blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-feature__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(28px, 4vw, 48px);
}

.blog-feature h2,
.blog-card h2,
.article-hero h1,
.legal-article h2 {
  margin: 0;
  color: var(--color-ink);
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
}

.blog-feature h2 {
  max-width: 12ch;
  margin-bottom: 14px;
  font-size: clamp(30px, 3vw, 42px);
}

.blog-feature p,
.blog-card p {
  max-width: 30ch;
  margin: 0 0 22px;
  color: var(--color-muted);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.12;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.blog-card {
  min-height: 444px;
  overflow: hidden;
  background: var(--color-white);
  border-radius: var(--radius);
}

.blog-card__image {
  height: 226px;
}

.blog-card__copy {
  padding: 28px 30px 32px;
}

.blog-card h2 {
  margin-bottom: 12px;
  font-size: clamp(26px, 2.2vw, 34px);
}

.blog-card .date {
  margin-top: 18px;
}

.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 28px;
}

.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-blue);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers:focus-visible {
  background: var(--color-orange);
  color: var(--color-white);
}

.blog-pagination .page-numbers.dots {
  min-width: auto;
  padding: 0 4px;
  background: transparent;
  color: var(--color-muted);
  font-weight: 700;
  cursor: default;
  pointer-events: none;
}

.blog-pagination .page-numbers.dots:hover,
.blog-pagination .page-numbers.dots:focus-visible {
  background: transparent;
  color: var(--color-muted);
}

.blog-empty {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 64px 24px;
  background: var(--color-white);
  border-radius: var(--radius);
  text-align: center;
}

.blog-empty h2 {
  margin: 0;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
}

.blog-empty p {
  max-width: 34ch;
  margin: 0;
  color: var(--color-muted);
  font-size: 18px;
  font-weight: 600;
}

/* Glossary overview */
.glossary-page {
  background: var(--color-page-soft);
}

.glossary-hero h1 {
  max-width: 12ch;
  margin-inline: auto;
}

html[lang="nl-NL"] .glossary-hero h1 {
  max-width: 15ch;
  overflow-wrap: normal;
  hyphens: manual;
}

.glossary-directory {
  width: min(100% - 96px, var(--ry-article-width));
  margin: 0 auto;
  padding: clamp(58px, 6vw, 88px) 0 clamp(84px, 9vw, 132px);
}

.glossary-directory__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
  gap: clamp(36px, 7vw, 104px);
  align-items: end;
  margin-bottom: 34px;
}

.glossary-directory__header h2,
.glossary-empty h2 {
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(38px, 4.6vw, 68px);
  font-style: italic;
  font-weight: 900;
  line-height: 0.92;
  text-transform: uppercase;
}

.glossary-directory__header p {
  margin: 12px 0 0;
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.glossary-search {
  display: grid;
  gap: 9px;
}

.glossary-search > label {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.glossary-search__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 10px;
}

.glossary-search input {
  width: 100%;
  min-height: 46px;
  padding: 0 15px;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  outline: 2px solid transparent;
}

.glossary-search input:focus {
  outline-color: var(--color-orange);
}

.glossary-search .button {
  min-width: 0;
  min-height: 46px;
  padding-inline: 18px;
}

.glossary-search__reset {
  justify-self: start;
  color: var(--color-orange);
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.glossary-alphabet {
  display: grid;
  grid-template-columns: repeat(26, minmax(28px, 1fr));
  gap: 6px;
  margin-bottom: clamp(54px, 7vw, 88px);
  padding: 14px;
  overflow-x: auto;
  background: var(--color-white);
  border-radius: var(--radius);
}

.glossary-alphabet a,
.glossary-alphabet span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 38px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.glossary-alphabet a {
  background: var(--color-blue);
  color: var(--color-white);
  transition: background 160ms ease, color 160ms ease;
}

.glossary-alphabet a:hover,
.glossary-alphabet a:focus-visible {
  background: var(--color-orange);
}

.glossary-alphabet span {
  color: #b7b7bd;
}

.glossary-groups {
  display: grid;
  gap: clamp(62px, 8vw, 104px);
}

.glossary-group {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: start;
  scroll-margin-top: 110px;
}

.glossary-group > h2 {
  margin: 0;
  color: var(--color-orange);
  font-size: clamp(58px, 6vw, 82px);
  font-style: italic;
  font-weight: 900;
  line-height: 0.82;
  text-transform: uppercase;
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.glossary-card {
  display: flex;
  flex-direction: column;
  min-height: 226px;
  padding: 28px;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(28, 28, 34, 0.04);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.glossary-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(28, 28, 34, 0.09);
}

.glossary-card h3 {
  margin: 0 0 14px;
  color: var(--color-ink);
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
}

.glossary-card h3 a {
  color: inherit;
}

.glossary-card p {
  margin: 0 0 20px;
  color: var(--color-muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}

.glossary-card__link {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(32, 29, 98, 0.12);
  color: var(--color-orange);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.glossary-card__link span:last-child {
  font-size: 22px;
  line-height: 0.8;
}

.glossary-empty {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: clamp(48px, 7vw, 82px) 24px;
  background: var(--color-white);
  border-radius: var(--radius);
  text-align: center;
}

.glossary-empty p {
  max-width: 42ch;
  margin: 0;
  color: var(--color-muted);
  font-size: 18px;
  line-height: 1.3;
}

@media (max-width: 980px) {
  .glossary-directory {
    width: min(100% - 32px, 760px);
  }

  .glossary-directory__header {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .glossary-alphabet {
    grid-template-columns: repeat(13, minmax(32px, 1fr));
  }

  .glossary-group {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .glossary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .glossary-directory {
    width: min(100% - 20px, 100%);
    padding: 44px 0 70px;
  }

  .glossary-search__controls {
    grid-template-columns: 1fr;
  }

  .glossary-search .button {
    width: 100%;
  }

  .glossary-alphabet {
    grid-template-columns: repeat(7, minmax(32px, 1fr));
    margin-bottom: 52px;
    overflow: visible;
  }

  .glossary-group {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .glossary-grid {
    grid-template-columns: 1fr;
  }

  .glossary-card {
    min-height: 0;
    padding: 24px;
  }
}

.article-layout {
  width: 100%;
  margin: 0;
  padding: 0;
}

.article-hero {
  position: relative;
  display: grid;
  min-height: clamp(560px, 56.4vw, 812px);
  overflow: hidden;
  background: var(--color-ink);
}

.article-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.34)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.04) 64%);
  pointer-events: none;
}

.article-hero__copy {
  position: relative;
  z-index: 1;
  align-self: center;
  width: min(100% - 96px, 1230px);
  margin: 0 auto;
  padding-top: 24px;
}

.article-hero .eyebrow {
  color: var(--color-orange);
}

.article-hero h1 {
  max-width: 21ch;
  margin: 0;
  color: var(--color-white);
  font-size: var(--ry-type-hero);
  font-style: normal;
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
}

.article-shell {
  display: grid;
  grid-template-columns: minmax(0, 885px) minmax(220px, 287px);
  gap: clamp(48px, 7vw, 104px);
  align-items: start;
  width: min(100% - 96px, var(--ry-article-width));
  margin: 0 auto;
  padding: clamp(72px, 7vw, 108px) 0 clamp(92px, 9vw, 148px);
}

.article-content,
.legal-article {
  color: var(--color-ink);
  font-size: var(--ry-type-article-body);
  font-weight: 500;
  line-height: 1.35;
}

.article-content {
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.article-content > *:first-child,
.legal-article > *:first-child {
  margin-top: 0;
}

.article-content h2,
.article-content h3 {
  margin: 42px 0 14px;
  font-weight: 600;
  line-height: 1;
}

.article-content h2 {
  font-size: var(--ry-type-article-h2);
}

.article-content h3 {
  font-size: var(--ry-type-article-h3);
}

.article-content p,
.article-content li {
  color: var(--color-ink);
  font-size: var(--ry-type-article-body);
  font-weight: 300;
  line-height: 1.22;
}

.article-content p {
  margin: 0 0 18px;
}

.article-content ul,
.article-content ol {
  display: grid;
  gap: 8px;
  margin: 18px 0 28px;
  padding-left: 1.3em;
}

.article-issue {
  position: sticky;
  /* Keep the panel clear of the sticky site header while the article scrolls. */
  top: 136px;
  padding: 24px 22px;
  border: 1px solid rgba(5, 5, 5, 0.12);
  border-radius: var(--radius);
  background: var(--color-white);
  box-shadow: 0 12px 32px rgba(5, 5, 5, 0.06);
}

.article-issue h2 {
  margin: 0 0 18px;
  color: var(--color-ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

.article-issue nav {
  display: grid;
  gap: 0;
  counter-reset: article-issue;
}

.article-issue a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid rgba(5, 5, 5, 0.1);
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
  transition: color 160ms ease;
  counter-increment: article-issue;
}

.article-issue a::before {
  color: var(--color-orange);
  content: counter(article-issue, decimal-leading-zero);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.article-issue a:hover,
.article-issue a:focus-visible {
  color: var(--color-orange);
}

.article-signoff {
  display: grid;
  justify-items: center;
  gap: 28px;
  width: min(100% - 48px, 620px);
  margin: 0 auto;
  padding: 0 0 clamp(76px, 8vw, 116px);
  text-align: center;
}

.article-signoff img {
  width: min(221px, 54vw);
  height: auto;
}

.article-signoff p {
  margin: 0;
  color: var(--color-ink);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.18;
}

.article-more-stories {
  display: grid;
  justify-items: center;
  width: min(100% - 96px, 1040px);
  margin: 0 auto;
  padding: 0 0 84px;
}

.article-more-stories > h2 {
  justify-self: start;
  margin: 0 0 34px;
  color: var(--color-ink);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: capitalize;
}

.article-more-stories__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.article-more-stories .blog-card {
  min-height: 343px;
}

.article-more-stories .blog-card__image {
  height: 175px;
}

.article-more-stories .blog-card__copy {
  padding: 20px 22px 22px;
}

.article-more-stories .blog-card h3 {
  margin: 8px 0 10px;
  color: var(--color-ink);
  font-size: clamp(20px, 1.5vw, 22px);
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
}

.article-more-stories .blog-card p {
  max-width: 28ch;
  margin: 0 0 14px;
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
}

.article-more-stories .blog-card .date {
  color: #929292;
  font-size: 13px;
}

.article-more-stories > .button {
  margin-top: 44px;
}

.article-footer {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.privacy-content {
  width: min(100% - 48px, 900px);
  margin: 0 auto;
  padding: 64px 0 84px;
}

.legal-article {
  padding: clamp(32px, 5vw, 64px);
  background: var(--color-white);
  border-radius: var(--radius);
}

.legal-article__updated {
  color: var(--color-muted);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
}

.legal-article h2 {
  margin: 44px 0 12px;
  font-size: clamp(28px, 2.5vw, 38px);
}

.legal-article h3,
.legal-article h4 {
  margin: 34px 0 10px;
  color: var(--color-ink);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.legal-article h3 {
  font-size: clamp(22px, 2vw, 30px);
}

.legal-article h4 {
  font-size: clamp(18px, 1.6vw, 24px);
}

.legal-article p,
.legal-article li {
  color: var(--color-muted);
}

.legal-article ol,
.legal-article ul {
  display: grid;
  gap: 10px;
  margin: 12px 0 24px;
  padding-left: 1.4em;
}

.legal-article a {
  color: var(--color-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-article hr {
  height: 1px;
  margin: 52px 0;
  border: 0;
  background: rgba(0, 0, 0, 0.12);
}

/* Rent equipment catalogue */
.rent-equipment-page {
  background: var(--color-page-soft);
}

.equipment-hero {
  display: grid;
  place-items: end center;
  min-height: clamp(360px, 40vw, 520px);
  padding: 132px 24px 72px;
  background: var(--color-white);
  text-align: center;
}

.equipment-hero--compact {
  min-height: 430px;
}

.equipment-hero__inner {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(100%, 940px);
  min-width: 0;
}

.equipment-hero h1 {
  max-width: 14ch;
  min-width: 0;
  margin: 0;
  color: var(--color-ink);
  font-size: var(--ry-type-hero);
  font-style: italic;
  font-weight: 900;
  line-height: 0.92;
  text-transform: uppercase;
}

/* Dutch compound words can be much longer than their English counterparts.
   Keep this page's hero within its designed column at every breakpoint while
   allowing the browser to use Dutch hyphenation before an emergency break. */
html[lang="nl-NL"] .equipment-hero h1 {
  width: 100%;
  max-width: min(100%, 18ch);
  font-size: clamp(2.75rem, 3.8vw, 4.3rem);
  overflow-wrap: anywhere;
  hyphens: auto;
  text-wrap: balance;
}

html[lang="nl-NL"] h1,
html[lang="nl-NL"] h2,
html[lang="nl-NL"] h3,
html[lang="nl-NL"] .button,
html[lang="nl-NL"] .site-nav__item > a {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.equipment-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--color-muted);
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 600;
  line-height: 1.18;
}

.equipment-shop {
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
  padding: 64px 0 92px;
}

.equipment-shop__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: end;
  width: calc(100% - 252px);
  margin-left: 252px;
  margin-bottom: 28px;
}

.equipment-shop__header h2 {
  max-width: 13ch;
  margin: 6px 0 0;
  color: var(--color-ink);
  font-size: clamp(34px, 3.7vw, 56px);
  font-weight: 900;
  line-height: 0.95;
  text-transform: uppercase;
}

.equipment-shop__header p {
  margin: 0;
  color: var(--color-muted);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.22;
}

.equipment-catalogue {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.equipment-filters {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 3px dashed var(--color-blue);
  border-radius: 8px;
  background: var(--color-white);
}

.equipment-search {
  display: grid;
  gap: 7px;
}

.equipment-search span {
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.equipment-search input {
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-soft);
  color: var(--color-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}

.equipment-search input:focus {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

.equipment-filter-buttons {
  display: grid;
  gap: 7px;
}

.equipment-filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-soft);
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease;
}

.equipment-filter-button:hover,
.equipment-filter-button:focus-visible,
.equipment-filter-button.is-active {
  background: var(--color-orange);
  color: var(--color-white);
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.equipment-card {
  display: grid;
  overflow: hidden;
  background: var(--color-white);
  border-radius: var(--radius);
}

.equipment-card[hidden] {
  display: none;
}

.equipment-empty {
  margin: 28px 0 0;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-muted);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.equipment-empty[hidden] {
  display: none;
}

.equipment-card__image {
  display: block;
  aspect-ratio: 1.18;
  overflow: hidden;
  background: var(--color-white);
}

.equipment-card__image img {
  width: 100%;
  height: 100%;
  padding: clamp(4px, 0.6vw, 8px);
  object-fit: contain;
  transition: transform 220ms ease;
}

.equipment-card:hover .equipment-card__image img {
  transform: scale(1.02);
}

.equipment-card__image:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: -2px;
}

.equipment-card__body {
  display: grid;
  gap: 14px;
  padding: 22px;
}

.equipment-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.equipment-card__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.equipment-card__meta span {
  background: var(--color-soft);
  color: var(--color-muted);
}

.equipment-card h2 {
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(24px, 2vw, 31px);
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
}

.equipment-card__availability {
  margin: 0;
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;
}

.equipment-card__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 10px;
  margin-top: 4px;
}

.equipment-card__actions .button,
.equipment-detail__actions .button {
  min-width: 0;
  width: 100%;
  min-height: 40px;
  padding: 0 18px;
  font-size: 14px;
}

.equipment-card__actions .equipment-card__cart {
  width: 46px;
  min-width: 46px;
  padding: 0;
  background: var(--color-orange);
  color: var(--color-white);
}

.equipment-card__cart svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.equipment-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
  padding: 34px 0 0;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.equipment-breadcrumb a {
  color: var(--color-orange);
}

.equipment-breadcrumb span::before {
  content: "/";
  margin-right: 8px;
  color: rgba(0, 0, 0, 0.32);
}

.equipment-breadcrumb span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.equipment-detail {
  padding-bottom: 92px;
}

.equipment-detail__top-actions {
  width: min(100% - 48px, 1180px);
  margin: 16px auto 0;
}

.equipment-detail__top-actions .button {
  width: auto;
  min-width: 180px;
}

.equipment-detail__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: start;
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
  padding: 34px 0 52px;
}

.equipment-gallery {
  position: relative;
}

.equipment-gallery__viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-white);
  aspect-ratio: 1.42;
}

.equipment-gallery__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.equipment-gallery__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.equipment-gallery__open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.equipment-gallery img {
  width: 100%;
  height: 100%;
  padding: clamp(12px, 1.6vw, 20px);
  object-fit: contain;
}

.equipment-gallery__arrow,
.equipment-lightbox__arrow {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-ink);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

.equipment-gallery__arrow::before,
.equipment-lightbox__arrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.equipment-gallery__arrow--prev,
.equipment-lightbox__arrow--prev {
  left: 14px;
}

.equipment-gallery__arrow--next,
.equipment-lightbox__arrow--next {
  right: 14px;
}

.equipment-gallery__arrow--prev::before,
.equipment-lightbox__arrow--prev::before {
  transform: rotate(-135deg) translate(-1px, -1px);
}

.equipment-gallery__arrow--next::before,
.equipment-lightbox__arrow--next::before {
  transform: rotate(45deg) translate(-1px, 1px);
}

.equipment-gallery__arrow {
  top: 50%;
  transform: translateY(-50%);
}

.equipment-gallery__count {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.equipment-gallery--single .equipment-gallery__count,
.equipment-gallery--single .equipment-gallery__arrow {
  display: none;
}

.equipment-detail__summary {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 24px;
  min-width: 0;
  padding: clamp(36px, 5vw, 58px);
  background: var(--color-white);
  border-radius: var(--radius);
}

.equipment-detail__summary h1 {
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 900;
  line-height: 0.96;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.equipment-detail__summary p {
  margin: 0;
  color: var(--color-muted);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.28;
}

.equipment-detail__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.equipment-detail__actions .button:only-child {
  grid-column: 1 / -1;
}

.equipment-detail__content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
}

.equipment-panel,
.equipment-faq,
.equipment-legal-note,
.equipment-detail__cta {
  background: var(--color-white);
  border-radius: var(--radius);
}

.equipment-panel {
  padding: clamp(28px, 4vw, 42px);
}

.equipment-legal-note {
  width: min(100% - 48px, 1180px);
  margin: 18px auto 0;
  padding: 22px 24px;
  border: 3px dashed var(--color-blue);
  border-radius: 8px;
}

.equipment-legal-note strong {
  display: block;
  margin: 0 0 8px;
  color: var(--color-orange);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.equipment-legal-note p {
  max-width: 1020px;
  margin: 0;
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.equipment-panel h2,
.equipment-faq h2,
.equipment-detail__cta h2 {
  margin: 0 0 18px;
  color: var(--color-ink);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 900;
  line-height: 0.96;
  text-transform: uppercase;
}

.equipment-panel p,
.equipment-panel li,
.equipment-faq p {
  color: var(--color-muted);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
}

.equipment-panel p {
  margin: 0 0 14px;
}

.equipment-panel ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 1.2em;
}

.equipment-panel li::marker {
  color: var(--color-orange);
}

.equipment-spec-list {
  padding-left: 0 !important;
  list-style: none;
}

.equipment-spec-list li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.equipment-spec-list li:first-child {
  padding-top: 0;
}

.equipment-faq {
  width: min(100% - 48px, 1180px);
  margin: 18px auto 0;
  padding: clamp(28px, 4vw, 42px);
}

.equipment-faq__list {
  display: grid;
  gap: 10px;
}

.equipment-faq details {
  padding: 18px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.equipment-faq summary {
  cursor: pointer;
  color: var(--color-ink);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.1;
}

.equipment-faq p {
  max-width: 760px;
  margin: 14px 0 0;
}

.equipment-detail__cta {
  display: grid;
  justify-items: center;
  width: min(100% - 48px, 820px);
  margin: 56px auto 0;
  padding: clamp(34px, 5vw, 58px);
  text-align: center;
}

.equipment-detail__cta h2 {
  max-width: 12ch;
}

body.equipment-lightbox-open {
  overflow: hidden;
}

.equipment-lightbox[hidden] {
  display: none;
}

.equipment-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 32px;
  opacity: 0;
  transition: opacity 180ms ease;
}

.equipment-lightbox.is-open {
  opacity: 1;
}

.equipment-lightbox__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  cursor: zoom-out;
}

.equipment-lightbox__stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(100%, 1180px);
  height: min(100%, 780px);
}

.equipment-lightbox__image {
  max-width: 100%;
  max-height: 100%;
  padding: clamp(18px, 3vw, 34px);
  border-radius: var(--radius);
  background: var(--color-white);
  object-fit: contain;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.36);
}

.equipment-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-white);
  cursor: pointer;
}

.equipment-lightbox__close::before,
.equipment-lightbox__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 3px;
  background: var(--color-ink);
}

.equipment-lightbox__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.equipment-lightbox__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.equipment-lightbox__arrow {
  top: 50%;
  transform: translateY(-50%);
}

.equipment-lightbox__count {
  position: absolute;
  bottom: 16px;
  left: 50%;
  z-index: 3;
  min-height: 30px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  transform: translateX(-50%);
}

.equipment-lightbox.is-single .equipment-lightbox__arrow,
.equipment-lightbox.is-single .equipment-lightbox__count {
  display: none;
}

@media (max-width: 920px) {
  .blog-hero,
  .privacy-hero {
    min-height: 340px;
    padding-top: 104px;
  }

  .equipment-shop,
  .equipment-breadcrumb,
  .equipment-detail__top-actions,
  .equipment-detail__hero,
  .equipment-detail__content,
  .equipment-faq,
  .equipment-legal-note,
  .equipment-detail__cta {
    width: min(100% - 32px, 720px);
  }

  .equipment-shop__header,
  .equipment-detail__hero,
  .equipment-detail__content {
    grid-template-columns: 1fr;
  }

  .equipment-shop__header {
    align-items: start;
    gap: 16px;
    width: auto;
    margin-left: 0;
  }

  .equipment-catalogue {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .equipment-filters {
    position: static;
  }

  .equipment-filter-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .equipment-filter-button {
    justify-content: center;
  }

  .equipment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .equipment-detail__summary {
    position: static;
    gap: 16px;
  }

  .equipment-gallery__viewport {
    aspect-ratio: 1.35;
  }

  .equipment-lightbox {
    padding: 20px;
  }

  .equipment-lightbox__stage {
    height: min(100%, 680px);
  }

  .equipment-lightbox__arrow--prev {
    left: 8px;
  }

  .equipment-lightbox__arrow--next {
    right: 8px;
  }

  .blog-listing,
  .privacy-content {
    width: min(100% - 32px, 680px);
  }

  .article-hero {
    min-height: clamp(520px, 72vw, 660px);
  }

  .article-hero__copy,
  .article-shell,
  .article-more-stories {
    width: min(100% - 32px, 720px);
  }

  .article-shell {
    grid-template-columns: 1fr;
    gap: 42px;
    padding-top: 58px;
  }

  .article-issue {
    position: static;
    order: -1;
    padding: 22px;
    background: var(--color-white);
    border-left: 1px solid rgba(5, 5, 5, 0.12);
  }

  .article-issue nav {
    grid-template-columns: 1fr;
  }

  .article-more-stories__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-filters__field--search,
  .blog-filters__actions {
    grid-column: 1 / -1;
  }

  .blog-feature,
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-feature__image {
    height: 280px;
  }

  .blog-feature h2 {
    max-width: 15ch;
  }
}

@media (max-width: 560px) {
  .blog-hero,
  .privacy-hero {
    padding-right: 16px;
    padding-left: 16px;
  }

  .equipment-hero {
    min-height: 420px;
    padding: 112px 16px 48px;
  }

  .equipment-hero h1 {
    font-size: 46px;
  }

  .equipment-shop,
  .equipment-breadcrumb,
  .equipment-detail__top-actions,
  .equipment-detail__hero,
  .equipment-detail__content,
  .equipment-faq,
  .equipment-legal-note,
  .equipment-detail__cta {
    width: min(100% - 20px, 100%);
  }

  .equipment-shop {
    padding: 42px 0 64px;
  }

  .equipment-grid,
  .equipment-detail__actions {
    grid-template-columns: 1fr;
  }

  .equipment-grid {
    gap: 16px;
  }

  .equipment-gallery__viewport {
    aspect-ratio: 1.1;
  }

  .equipment-gallery img {
    padding: 16px;
  }

  .equipment-gallery__arrow,
  .equipment-lightbox__arrow {
    width: 38px;
    height: 38px;
  }

  .equipment-gallery__arrow--prev {
    left: 8px;
  }

  .equipment-gallery__arrow--next {
    right: 8px;
  }

  .equipment-gallery__count {
    right: 8px;
    bottom: 8px;
  }

  .equipment-card__actions {
    grid-template-columns: minmax(0, 1fr) 46px;
  }

  .equipment-detail__actions .button {
    width: 100%;
  }

  .equipment-card__body,
  .equipment-detail__summary,
  .equipment-panel,
  .equipment-faq,
  .equipment-legal-note,
  .equipment-detail__cta {
    padding: 24px;
  }

  .equipment-lightbox {
    padding: 12px;
  }

  .equipment-lightbox__image {
    padding: 16px;
  }

  .equipment-lightbox__close {
    top: 8px;
    right: 8px;
  }

  .equipment-lightbox__count {
    bottom: 8px;
  }

  .blog-hero h1,
  .privacy-hero h1,
  .article-hero h1 {
    font-size: 46px;
  }

  .blog-listing,
  .privacy-content {
    width: min(100% - 20px, 100%);
    padding-bottom: 60px;
  }

  .article-hero {
    min-height: 520px;
  }

  .article-hero__copy,
  .article-shell,
  .article-signoff,
  .article-more-stories {
    width: min(100% - 20px, 100%);
  }

  .article-hero__copy {
    padding-top: 0;
  }

  .article-shell {
    padding: 42px 0 66px;
  }

  .article-issue nav,
  .article-more-stories__grid {
    grid-template-columns: 1fr;
  }

  .article-more-stories {
    padding-bottom: 60px;
  }

  .blog-feature__copy,
  .blog-card__copy,
  .legal-article {
    padding: 24px;
  }

  .blog-filters {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .blog-filters__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .blog-filters__actions .button {
    width: 100%;
  }

  .blog-card {
    min-height: 0;
  }

  .blog-card__image {
    height: 210px;
  }
}

/* Shared hero composition */
.hero--home,
.team-hero,
.contact-hero {
  min-height: clamp(680px, 100svh, 967px);
}

.hero--home .hero__content,
.team-hero__content,
.contact-hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(20px, 3svh, 31px);
  width: min(100% - 48px, 760px);
  margin: 0 auto;
  padding-top: 0;
  text-align: center;
  transform: translateY(-1.5svh);
}

.hero--home .hero__content {
  min-height: inherit;
  padding: clamp(88px, 10svh, 132px) 24px clamp(180px, 22svh, 260px);
}

.team-hero__actions,
.contact-hero__actions,
.hero--home .hero__actions {
  gap: 14px;
}

.hero--home .cookie-card h2 {
  max-width: none;
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.1;
  text-transform: none;
}

@media (min-width: 921px) and (max-height: 860px) {
  .hero--home .hero__content,
  .team-hero__content,
  .contact-hero__content {
    transform: translateY(-3.5svh);
  }

  .hero--home .hero__content {
    padding-bottom: clamp(170px, 20svh, 230px);
  }
}

@media (max-width: 760px) {
  .hero--home,
  .team-hero,
  .contact-hero {
    min-height: min(760px, 100svh);
  }

  .hero--home .hero__content,
  .team-hero__content,
  .contact-hero__content {
    width: min(100% - 32px, 640px);
    transform: translateY(-2svh);
  }

  .academy-course-card {
    grid-template-rows: auto auto auto auto auto;
    min-height: 0;
  }

  .academy-course-card__image {
    height: auto;
  }
}

@media (max-width: 560px) {
  .hero--home,
  .team-hero,
  .contact-hero {
    min-height: 100svh;
  }

  /* The sticky mobile header occupies 64px in normal document flow. Reserve
     that space so the client strip remains visible in the first viewport. */
  .hero--home {
    min-height: calc(100svh - 64px);
  }

  .hero--home .hero__content,
  .team-hero__content,
  .contact-hero__content {
    width: 100%;
    gap: 18px;
    transform: translateY(-3svh);
  }

  .hero--home .hero__content {
    padding: 78px 16px 190px;
  }

  .team-hero__actions,
  .contact-hero__actions,
  .hero--home .hero__actions {
    width: min(100%, 280px);
    gap: 12px;
  }
}

/* FAQ page */
.faq-page {
  background: var(--color-page-soft);
}

.faq-hero__inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

.faq-hero h1 {
  max-width: 11ch;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.faq-hero p {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.faq-content {
  display: grid;
  gap: 28px;
  width: min(100% - 48px, 980px);
  margin: 0 auto;
  padding: 64px 0 88px;
}

.faq-group {
  display: grid;
  grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 4vw, 44px);
  background: var(--color-white);
  border-radius: var(--radius);
}

.faq-group h2 {
  min-width: 0;
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  color: var(--color-blue);
  font-size: clamp(27px, 2.5vw, 40px);
  font-weight: 900;
  line-height: 0.95;
  text-transform: uppercase;
}

.faq-group__list {
  display: grid;
}

.faq-group details {
  border-bottom: 1px solid #d8d8d8;
}

.faq-group details:first-child {
  border-top: 1px solid #d8d8d8;
}

.faq-group summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 74px;
  gap: 16px;
  padding: 14px 0;
  color: var(--color-ink);
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 900;
  line-height: 1.08;
  cursor: pointer;
  list-style: none;
  overflow-wrap: break-word;
  word-break: normal;
}

.faq-group summary::-webkit-details-marker {
  display: none;
}

.faq-group summary::after {
  flex: 0 0 auto;
  color: var(--color-orange);
  content: "+";
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  transition: transform 160ms ease;
}

.faq-group details[open] summary::after {
  transform: rotate(45deg);
}

.faq-answer {
  max-width: 720px;
  padding: 0 48px 28px 0;
}

.faq-answer p,
.faq-answer li {
  color: var(--color-muted);
  font-size: clamp(17px, 1.25vw, 20px);
  font-weight: 500;
  line-height: 1.35;
}

.faq-answer p {
  margin: 0;
}

.faq-answer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .14em;
}

.faq-answer ul {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 1.2em;
}

.faq-answer li::marker {
  color: var(--color-orange);
}

@media (max-width: 900px) {
  .faq-content {
    width: min(100% - 32px, 720px);
    padding: 44px 0 64px;
  }

  .faq-group {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .faq-answer {
    padding-right: 0;
  }
}

@media (max-width: 560px) {
  .faq-content {
    width: min(100% - 20px, 100%);
  }

  .faq-group {
    padding: 24px;
  }

  .faq-group summary {
    min-height: 68px;
  }
}

/* Certifications page */
.certifications-page {
  background: var(--color-page-soft);
}

.certifications-hero__inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

.certifications-hero h1 {
  display: block;
  width: min(100%, 980px);
  max-width: none;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.certifications-hero p {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.certifications-hero__marks {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: min(520px, 72vw);
  margin-top: 28px;
  padding: 18px 30px;
  box-sizing: border-box;
  border-radius: 3px;
  background: #282262;
  box-shadow: 0 16px 30px rgba(20, 17, 53, 0.14);
}

.certifications-hero__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.certifications-hero__logos-leading,
.certifications-hero__logos-dnv {
  position: relative;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  height: 37px;
}

.certifications-hero__logos-leading {
  width: 333px;
}

.certifications-hero__logos-dnv {
  width: 39px;
}

.certifications-hero__logos-leading img,
.certifications-hero__logos-dnv img {
  position: absolute;
  top: 0;
  display: block;
  width: auto;
  max-width: none;
  height: 37px;
  filter: brightness(0) invert(1);
}

.certifications-hero__logos-leading img {
  left: 0;
}

.certifications-hero__logos-dnv img {
  left: -333px;
}

.certifications-hero__nen-4400 {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 28px;
  filter: brightness(0) invert(1);
}

.certifications-intro {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 56px 24px;
  background: var(--color-white);
  text-align: center;
}

.certifications-intro p {
  max-width: 760px;
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 600;
  line-height: 1.05;
}

.certifications-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  width: min(100% - 48px, 1040px);
  margin: 0 auto;
  padding: 72px 0;
}

.certification-card {
  display: grid;
  grid-template-columns: minmax(210px, 0.34fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 64px);
  /* The accessible title is visually hidden but still participates in a grid
     item's automatic minimum size. Permit this card to shrink inside the
     320px certification list instead of widening the document. */
  min-width: 0;
  padding: clamp(30px, 4vw, 52px);
  background: var(--color-white);
  border-radius: var(--radius);
}

.certification-card__heading {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 10px;
}

.certification-card__heading span {
  color: var(--color-orange);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.certification-card h2 {
  margin: 0;
  color: var(--color-blue);
  font-size: clamp(38px, 5vw, 68px);
  font-style: italic;
  font-weight: 900;
  line-height: 0.92;
  text-transform: uppercase;
}

.certification-card__logo {
  display: block;
  width: min(176px, 100%);
  max-height: 128px;
  margin-top: 4px;
  object-fit: contain;
}

.certification-card:nth-child(4) .certification-card__logo,
.certification-card:nth-child(5) .certification-card__logo {
  width: min(92px, 100%);
}

.certification-card__body {
  color: var(--color-muted);
}

.certification-card__body p,
.certification-card__body li {
  font-size: clamp(17px, 1.25vw, 20px);
  font-weight: 500;
  line-height: 1.35;
}

.certification-card__body p {
  margin: 0 0 16px;
}

.certification-card__body p:last-child {
  margin-bottom: 0;
}

.certification-card h3 {
  margin: 28px 0 12px;
  color: var(--color-ink);
  font-size: clamp(19px, 1.6vw, 25px);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.certification-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.2em;
}

.certification-card li::marker {
  color: var(--color-orange);
}

@media (max-width: 820px) {
  .certifications-list {
    width: min(100% - 32px, 720px);
  }

  .certification-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .certifications-hero__marks {
    width: min(360px, 82vw);
    padding: 15px;
  }

  /* The Dutch heading ("Certificeringen") is longer than the English one.
     Keep both as a clean single line on narrow phones without widening the
     page or forcing an arbitrary word break. */
  .certifications-hero h1 {
    font-size: clamp(2.1rem, 9.25vw, 2.875rem);
  }

  .certifications-hero__logos {
    width: 442px;
    transform: translateX(-80px) scale(0.64);
    transform-origin: center;
  }

  .certifications-list {
    width: min(100% - 20px, 100%);
  }

  .certification-card {
    padding: 24px;
  }
}

/* Keep the longer About-page CTA on one line while retaining the global button system. */
.project-visualizer__cta {
  width: 260px;
  min-width: 260px;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .project-visualizer__cta {
    width: 100%;
    min-width: 0;
  }
}

/* About page: Reynard high-voltage system */
.project-visualizer__system {
  position: relative;
  z-index: 2;
  margin-top: 72px;
  border-top: 1px solid rgba(32, 29, 98, 0.18);
  background: #eef7fd;
  color: var(--color-blue);
}

.hv-system__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.55fr);
  gap: clamp(36px, 7vw, 110px);
  align-items: end;
  width: min(100% - 112px, 1540px);
  margin: 0 auto;
  padding: 46px 0 36px;
}

.hv-system__heading span {
  display: block;
  margin-bottom: 10px;
  color: var(--color-orange);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hv-system__heading h2 {
  max-width: 850px;
  margin: 0;
  color: var(--color-blue);
  font-size: clamp(34px, 4vw, 62px);
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.96;
  text-transform: uppercase;
}

.hv-system__heading p {
  max-width: 470px;
  margin: 0 0 2px;
  color: #4f5260;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

.hv-system__viewport {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(32, 29, 98, 0.15);
  border-bottom: 1px solid rgba(32, 29, 98, 0.15);
  background: #eef7fd;
  outline: none;
}

.hv-system__viewport:focus-visible {
  box-shadow: inset 0 0 0 3px var(--color-orange);
}

.hv-system__diagram {
  display: block;
  width: 100%;
  height: auto;
}

.hv-system__blueprint path,
.hv-system__blueprint circle {
  fill: none;
  stroke: rgba(32, 29, 98, 0.22);
  stroke-width: 2;
}

.hv-system__zone-label text {
  fill: var(--color-blue);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.hv-system__zone-label path {
  fill: none;
  stroke: var(--color-orange);
  stroke-width: 4;
}

.hv-system__route-underlay,
.hv-system__route-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hv-system__route-underlay {
  stroke: #fff;
  stroke-width: 17;
}

.hv-system__route-line {
  stroke: var(--color-orange);
  stroke-width: 8;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.8s cubic-bezier(0.55, 0, 0.15, 1);
}

.hv-system.is-active .hv-system__route-line {
  stroke-dashoffset: 0;
}

.hv-system__node {
  opacity: 0;
  transform: scale(0.35);
  transform-box: fill-box;
  transform-origin: center;
}

.hv-system.is-active .hv-system__node {
  animation: hv-node-in 420ms cubic-bezier(0.2, 0.85, 0.3, 1.3) var(--node-delay) forwards;
}

.hv-system__pulse {
  fill: #fff;
  stroke: var(--color-orange);
  stroke-width: 4;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255, 102, 0, 0.7));
}

.hv-system.is-active .hv-system__pulse {
  animation: hv-pulse-in 300ms ease 2.65s forwards;
}

.hv-system__callout-title,
.hv-system__callout-meta {
  letter-spacing: 0;
}

.hv-system__callout-title {
  fill: var(--color-blue);
  font-size: 18px;
  font-weight: 900;
}

.hv-system__callout-meta {
  fill: #565967;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.hv-system__legend {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100% - 112px, 1540px);
  margin: 0 auto;
  padding: 28px 0 34px;
  list-style: none;
}

.hv-system__legend li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  min-height: 62px;
  padding: 7px 22px;
  border-left: 1px solid rgba(32, 29, 98, 0.2);
}

.hv-system__legend li:first-child {
  padding-left: 0;
  border-left: 0;
}

.hv-system__legend span {
  grid-row: 1 / 3;
  color: var(--color-orange);
  font-size: 11px;
  font-weight: 900;
}

.hv-system__legend strong {
  color: var(--color-blue);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.hv-system__legend small {
  color: #5a5d69;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1.25;
}

@keyframes hv-node-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes hv-pulse-in {
  to {
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .hv-system__heading {
    grid-template-columns: 1fr;
    gap: 20px;
    width: min(100% - 48px, 760px);
  }

  .hv-system__heading p {
    max-width: 650px;
  }

  .hv-system__legend {
    width: min(100% - 48px, 760px);
  }
}

@media (max-width: 700px) {
  .project-visualizer__system {
    margin-top: 52px;
  }

  .hv-system__heading {
    width: min(100% - 32px, 640px);
    padding: 34px 0 28px;
  }

  .hv-system__heading h2 {
    font-size: 36px;
  }

  .hv-system__heading p {
    font-size: 15px;
  }

  .hv-system__viewport {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--color-orange) rgba(32, 29, 98, 0.1);
    scrollbar-width: thin;
  }

  .hv-system__diagram {
    width: 980px;
    max-width: none;
  }

  .hv-system__legend {
    grid-template-columns: 1fr 1fr;
    width: min(100% - 32px, 640px);
    padding: 24px 0 28px;
  }

  .hv-system__legend li,
  .hv-system__legend li:first-child {
    min-height: 68px;
    padding: 10px 12px;
    border-left: 1px solid rgba(32, 29, 98, 0.2);
  }

  .hv-system__legend li:nth-child(odd) {
    border-left: 0;
  }

  .hv-system__legend li:last-child {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(32, 29, 98, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hv-system__route-line {
    stroke-dashoffset: 0;
    transition: none;
  }

  .hv-system__node,
  .hv-system__pulse {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .hv-system__pulse {
    display: none;
  }
}

/* About page: premium offshore-to-grid system visual */
.about-system {
  position: relative;
  z-index: 2;
  margin-top: clamp(64px, 8vw, 118px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: #090c10;
  color: var(--color-white);
}

.about-system__header {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.55fr);
  gap: clamp(36px, 7vw, 118px);
  align-items: end;
  width: min(100% - 112px, 1540px);
  margin: 0 auto;
  padding: clamp(42px, 5vw, 70px) 0 30px;
}

.about-system__header span {
  display: block;
  margin-bottom: 11px;
  color: var(--color-orange);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.about-system__header h2 {
  max-width: 930px;
  margin: 0;
  color: var(--color-white);
  font-size: clamp(34px, 4vw, 60px);
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.98;
  text-transform: uppercase;
}

.about-system__header p {
  max-width: 470px;
  margin: 0 0 3px;
  color: rgba(255, 255, 255, 0.67);
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.about-system__viewport {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: #090c10;
  outline: none;
}

.about-system__viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-orange);
}

.about-system__canvas {
  position: relative;
  min-width: 920px;
  aspect-ratio: 1863 / 844;
  background: #090c10;
}

.about-system__canvas picture,
.about-system__canvas img {
  display: block;
  width: 100%;
  height: 100%;
}

.about-system__canvas img {
  object-fit: cover;
}

.about-system__labels,
.about-system__energy {
  position: absolute;
  inset: 0;
}

.about-system__labels {
  pointer-events: none;
}

.about-system__label {
  position: absolute;
  top: var(--label-top);
  left: var(--label-left);
  display: grid;
  gap: 3px;
  max-width: 190px;
  padding-left: 12px;
  opacity: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  transform: translateY(10px);
  transition: opacity 420ms ease var(--label-delay), transform 520ms cubic-bezier(0.2, 0.75, 0.2, 1) var(--label-delay);
}

.about-system__label::before {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  width: 2px;
  background: var(--color-orange);
  content: "";
}

.about-system.is-active .about-system__label {
  opacity: 1;
  transform: translateY(0);
}

.about-system__label span {
  color: var(--color-orange);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.about-system__label strong {
  color: rgba(255, 255, 255, 0.88);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

.about-system__label--turbines {
  --label-top: 13%;
  --label-left: 7%;
  --label-delay: 120ms;
}

.about-system__label--offshore {
  --label-top: 18%;
  --label-left: 33%;
  --label-delay: 240ms;
}

.about-system__label--export {
  --label-top: 77%;
  --label-left: 47%;
  --label-delay: 360ms;
}

.about-system__label--landfall {
  --label-top: 42%;
  --label-left: 59%;
  --label-delay: 480ms;
}

.about-system__label--onshore {
  --label-top: 22%;
  --label-left: 73%;
  --label-delay: 600ms;
}

.about-system__energy {
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.about-system__energy path {
  fill: none;
  stroke: rgba(255, 102, 0, 0.22);
  stroke-linecap: round;
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1900ms cubic-bezier(0.35, 0, 0.15, 1) 120ms;
}

.about-system.is-active .about-system__energy path {
  stroke-dashoffset: 0;
}

.about-system__energy circle {
  fill: #fff;
  stroke: var(--color-orange);
  stroke-width: 4;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(255, 102, 0, 0.9));
}

.about-system.is-active .about-system__energy circle {
  opacity: 1;
}

.about-system__index {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100% - 112px, 1540px);
  margin: 0 auto;
  padding: 25px 0 34px;
  list-style: none;
}

.about-system__index li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  min-height: 54px;
  padding: 5px 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.about-system__index li:first-child {
  padding-left: 0;
  border-left: 0;
}

.about-system__index span {
  grid-row: 1 / 3;
  color: var(--color-orange);
  font-size: 10px;
  font-weight: 900;
}

.about-system__index strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.about-system__index small {
  color: rgba(255, 255, 255, 0.48);
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .about-system__header {
    grid-template-columns: 1fr;
    gap: 20px;
    width: min(100% - 48px, 760px);
  }

  .about-system__header p {
    max-width: 680px;
  }

  .about-system__viewport {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--color-orange) rgba(255, 255, 255, 0.08);
    scrollbar-width: thin;
  }

  .about-system__index {
    width: min(100% - 48px, 760px);
  }
}

@media (max-width: 700px) {
  .about-system {
    margin-top: 58px;
  }

  .about-system__header {
    width: min(100% - 32px, 640px);
    padding: 36px 0 26px;
  }

  .about-system__header h2 {
    font-size: 34px;
  }

  .about-system__header p {
    font-size: 15px;
  }

  .about-system__canvas {
    min-width: 880px;
  }

  .about-system__index {
    grid-template-columns: 1fr 1fr;
    width: min(100% - 32px, 640px);
    padding: 21px 0 28px;
  }

  .about-system__index li,
  .about-system__index li:first-child {
    min-height: 62px;
    padding: 10px 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
  }

  .about-system__index li:nth-child(odd) {
    border-left: 0;
  }

  .about-system__index li:last-child {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-system__label {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .about-system__energy path {
    stroke-dashoffset: 0;
    transition: none;
  }

  .about-system__energy circle {
    display: none;
  }
}

/* About page: interactive HV cable signature */
.hv-track {
  position: relative;
  z-index: 2;
  width: calc(100% - 30px);
  min-height: clamp(650px, 54vw, 820px);
  margin: clamp(58px, 7vw, 104px) auto 16px;
  overflow: hidden;
  background: #0a0c0f;
  color: var(--color-white);
  isolation: isolate;
}

.hv-track__frame {
  position: absolute;
  inset: 0;
  z-index: 5;
  border: 1px solid rgba(255, 102, 0, 0.72);
  border-radius: 6px;
  pointer-events: none;
}

.hv-track__frame::before,
.hv-track__frame::after {
  position: absolute;
  width: 74px;
  height: 28px;
  border-color: var(--color-orange);
  content: "";
}

.hv-track__frame::before {
  top: -1px;
  left: -1px;
  border-top: 4px solid;
  border-left: 4px solid;
  border-top-color: var(--color-orange);
  border-left-color: var(--color-orange);
  border-radius: 6px 0 0;
}

.hv-track__frame::after {
  right: -1px;
  bottom: -1px;
  border-right: 4px solid;
  border-bottom: 4px solid;
  border-right-color: var(--color-orange);
  border-bottom-color: var(--color-orange);
  border-radius: 0 0 6px;
}

.hv-track__topline {
  position: absolute;
  top: 26px;
  right: clamp(28px, 4vw, 62px);
  left: clamp(52px, 5.5vw, 92px);
  z-index: 4;
  display: flex;
  gap: clamp(38px, 8vw, 130px);
  justify-content: space-between;
  pointer-events: none;
}

.hv-track__topline > div {
  display: grid;
  gap: 5px;
}

.hv-track__topline > div:last-child {
  text-align: right;
}

.hv-track__topline span {
  color: rgba(255, 255, 255, 0.42);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}

.hv-track__topline strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.hv-track__scene,
.hv-track__canvas {
  position: absolute;
  inset: 0;
}

.hv-track__scene {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

.hv-track__scene.is-dragging {
  cursor: grabbing;
}

.hv-track__canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hv-track__marker {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 2px;
  min-width: 116px;
  padding: 0 0 28px 12px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-8px, -100%);
  transition: opacity 240ms ease;
}

.hv-track__marker.is-visible {
  opacity: 1;
}

.hv-track__marker.is-marker-left {
  padding-right: 12px;
  padding-left: 0;
  text-align: right;
  transform: translate(calc(-100% + 8px), -100%);
}

.hv-track__marker::before {
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 1px;
  height: 19px;
  background: rgba(255, 255, 255, 0.55);
  content: "";
}

.hv-track__marker::after {
  position: absolute;
  bottom: 0;
  left: -3px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--color-orange);
  border-radius: 50%;
  background: #0a0c0f;
  box-shadow: 0 0 13px rgba(255, 102, 0, 0.65);
  content: "";
}

.hv-track__marker.is-marker-left::before {
  right: 0;
  left: auto;
}

.hv-track__marker.is-marker-left::after {
  right: -3px;
  left: auto;
}

.hv-track__marker span {
  color: var(--color-orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
  text-transform: uppercase;
}

.hv-track__marker strong {
  color: rgba(255, 255, 255, 0.86);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.hv-track__axis {
  position: absolute;
  bottom: 96px;
  left: 14px;
  z-index: 4;
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.hv-track__controls {
  position: absolute;
  right: 14px;
  bottom: 94px;
  z-index: 6;
  display: grid;
  gap: 8px;
}

.hv-track__controls button {
  display: grid;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 102, 0, 0.8);
  border-radius: 3px;
  background: var(--color-orange);
  color: var(--color-white);
  font-family: Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  transition: background-color 180ms ease, color 180ms ease;
}

.hv-track__controls button:hover,
.hv-track__controls button:focus-visible {
  background: var(--color-white);
  color: var(--color-orange);
}

.hv-track__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #0a0c0f;
}

.hv-track__fallback[hidden] {
  display: none;
}

.hv-track__fallback img {
  width: 94px;
  opacity: 0.72;
}

.hv-track__index {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: 82px;
  margin: 0;
  padding: 15px 66px 14px 46px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 12, 15, 0.82);
  list-style: none;
  backdrop-filter: blur(8px);
}

.hv-track__index li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 10px;
  align-content: center;
  padding: 0 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.13);
}

.hv-track__index li:first-child {
  border-left: 0;
}

.hv-track__index span {
  grid-row: 1 / 3;
  color: var(--color-orange);
  font-size: 9px;
  font-weight: 900;
}

.hv-track__index strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.hv-track__index small {
  color: rgba(255, 255, 255, 0.45);
  font-family: Arial, sans-serif;
  font-size: 10px;
  line-height: 1.1;
}

@media (max-width: 900px) {
  .hv-track {
    width: calc(100% - 16px);
    min-height: 650px;
  }

  .hv-track__index {
    grid-template-columns: repeat(3, 1fr);
    height: 126px;
    padding: 12px 54px 12px 38px;
  }

  .hv-track__index li:nth-child(4),
  .hv-track__index li:nth-child(5) {
    border-top: 1px solid rgba(255, 255, 255, 0.13);
  }

  .hv-track__axis,
  .hv-track__controls {
    bottom: 138px;
  }
}

@media (max-width: 600px) {
  .hv-track {
    min-height: 540px;
    margin-top: 54px;
  }

  .hv-track__topline {
    top: 19px;
    right: 18px;
    left: 28px;
  }

  .hv-track__topline > div:last-child {
    display: none;
  }

  .hv-track__marker {
    min-width: 88px;
  }

  .hv-track__marker span {
    font-size: 9px;
  }

  .hv-track__marker strong {
    display: none;
  }

  .hv-track__marker[data-hv-marker="offshore"],
  .hv-track__marker[data-hv-marker="test"],
  .hv-track__marker[data-hv-marker="export"] {
    display: none;
  }

  .hv-track__controls {
    right: 9px;
  }

  .hv-track__controls button {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  .hv-track__index {
    grid-template-columns: 1fr 1fr;
    height: 174px;
    padding: 9px 46px 9px 20px;
  }

  .hv-track__index li {
    padding: 4px 8px;
  }

  .hv-track__index li:nth-child(3) {
    border-top: 1px solid rgba(255, 255, 255, 0.13);
  }

  .hv-track__index li:nth-child(5) {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    border-left: 0;
  }

  .hv-track__axis,
  .hv-track__controls {
    bottom: 186px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hv-track__scene {
    cursor: default;
  }
}

/* About page */
.about-page {
  overflow: clip;
  background: #fff;
}

.about-page h1,
.about-page h2,
.about-page h3,
.about-page p {
  margin-top: 0;
}

.about-hero {
  position: relative;
  min-height: var(--ry-hero-block-size);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #6f9ad0;
}

.about-hero__image,
.about-hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.about-hero__image {
  max-width: none;
  object-fit: cover;
  object-position: center 58%;
}

.about-hero__shade {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.28));
}

.about-hero__content {
  position: relative;
  z-index: 1;
  width: min(100% - 2rem, 780px);
  text-align: center;
  color: #fff;
}

.about-hero h1 {
  margin-bottom: 2rem;
  color: inherit;
  font-size: var(--ry-type-hero);
  font-style: italic;
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
}

.about-hero__actions,
.about-scrub__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.about-hero__actions .button,
.about-scrub__actions .button {
  width: min(230px, 44vw);
}

/* Safety page ("Culture of Safety", /safety/). Reuses .about-hero for the
   photo hero and .academy-certificate for the Safety Culture Ladder block.
   The hero is scoped down to the shorter shared photo-hero height used by
   academy/offshore/team/contact/home (clamp(680px, 100svh, 967px), see the
   .safety-page .about-hero override below) rather than About Us's own
   taller --ry-hero-block-size — About Us itself is untouched. "Our
   commitment" is a bespoke numbered rule list (.safety-commitments) rather
   than the .academy-reasons bullet card, since the user explicitly asked
   for numbered rules, bigger text, and a scroll-linked colour reveal that
   .academy-reasons has no equivalent for. "Our certifications" is a compact
   logo grid, styled with the same white-card/radius language as
   .certification-card on page-certifications.php, linking through to that
   page rather than duplicating its long-form copy. */
.safety-page .about-hero {
  min-height: clamp(680px, 100svh, 967px);
}

.safety-page .about-hero__image {
  object-position: center 22%;
}

.safety-page .about-hero h1 {
  font-size: var(--ry-type-hero);
}

.safety-intro {
  width: min(100% - 48px, 760px);
  margin: 0 auto;
  padding: 48px 0 56px;
  text-align: center;
}

.safety-intro p {
  margin: 0;
  color: #474a50;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.15;
}

/* "Our commitment" — numbered rule list. Each rule's text is stacked as a
   grey base layer plus an orange overlay layer (identical text, absolutely
   positioned). Most rules wrap across 2-3 lines, so the overlay is split by
   assets/js/safety-page.js into one <span class="safety-commitments__line">
   per visual line (measured at runtime, since line breaks depend on
   viewport width) rather than clipping the whole multi-line paragraph as a
   single box — clipping the whole paragraph produced one diagonal-looking
   wipe across every line at once instead of a natural per-line reveal. Each
   line gets its own --line-fill (0 to 1). Each rule also *pins in place*
   while its lines fill and only releases into the next rule once fully
   done — .safety-commitments__item is the tall scroll "runway"
   (--item-runway, set by JS per rule from its line count) and
   .safety-commitments__stage (its only child) is `position: sticky`, the
   exact same tall-wrapper + sticky-first-child pattern
   .about-scrub/.about-scrub__stage already uses for the cable-draw
   sections — reused here via a plain page-scoped
   getPinnedProgress(element) helper copied from main.js's
   updateOffshoreMotion, since it's small, generic, and this page's JS stays
   isolated from the shared global scroll listener per the development
   contract. This whole staged/pinned/sticky mechanism only activates when
   JS adds .is-staged to the list (and never at all under
   prefers-reduced-motion, or if JS fails to run) — see the .is-staged rules
   and the reduced-motion override below for the plain-list fallback. */
.safety-commitments {
  width: min(100% - 48px, 1100px);
  margin: 0 auto;
  padding: 24px 0 96px;
}

.safety-commitments h2 {
  margin: 0 0 32px;
  color: var(--color-ink);
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 800;
  line-height: 1.03;
  text-transform: uppercase;
}

.safety-commitments__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px dashed var(--color-orange);
  counter-reset: safety-rule;
}

.safety-commitments__item {
  position: relative;
  border-bottom: 2px dashed var(--color-soft);
  counter-increment: safety-rule;
}

/* Pinned/"stuck until done" mode only: the JS sets --item-runway (a height
   tall enough to give this rule's line-by-line fill room to complete) and
   adds .is-staged once it has successfully built the sticky stage — without
   JS (or with prefers-reduced-motion, which the JS skips this for
   entirely), .safety-commitments__item stays a normal auto-height block and
   .safety-commitments__stage stays non-sticky, so the rules just read as a
   plain static list. */
.safety-commitments__list.is-staged .safety-commitments__item {
  height: var(--item-runway, auto);
}

.safety-commitments__stage {
  display: grid;
  grid-template-columns: clamp(56px, 6vw, 88px) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(16px, 2.5vw, 32px);
  padding: clamp(20px, 2.6vw, 32px) 0;
}

.safety-commitments__list.is-staged .safety-commitments__stage {
  position: sticky;
  top: clamp(88px, 12vh, 140px);
}

.safety-commitments__stage::before {
  content: counter(safety-rule, decimal-leading-zero);
  color: var(--color-orange);
  font-size: clamp(24px, 2.6vw, 36px);
  font-style: italic;
  font-weight: 800;
  line-height: 1;
}

.safety-commitments__text {
  position: relative;
  margin: 0;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 600;
  line-height: 1.28;
}

.safety-commitments__text-base {
  color: var(--color-muted);
}

.safety-commitments__text-fill {
  position: absolute;
  inset: 0;
  color: var(--color-orange);
  pointer-events: none;
}

.safety-commitments__line {
  display: block;
  overflow: hidden;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  clip-path: inset(0 calc((1 - var(--line-fill, 0)) * 100%) 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .safety-commitments__text-fill,
  .safety-commitments__line {
    clip-path: none;
    white-space: normal;
  }

  .safety-commitments__list.is-staged .safety-commitments__item {
    height: auto;
  }

  .safety-commitments__list.is-staged .safety-commitments__stage {
    position: static;
  }
}

@media (max-width: 560px) {
  .safety-commitments__stage {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .safety-commitments__stage::before {
    font-size: 22px;
  }

  .safety-commitments__text {
    font-size: 18px;
  }
}

.safety-ladder .academy-certificate__copy {
  align-items: start;
}

.safety-certifications {
  width: min(100% - 48px, 1100px);
  margin: 0 auto;
  padding: 24px 0 88px;
  text-align: center;
}

.safety-certifications h2 {
  margin: 0 0 12px;
  color: var(--color-ink);
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 800;
  line-height: 1.03;
  text-transform: uppercase;
}

.safety-certifications > p {
  width: min(100%, 620px);
  margin: 0 auto 40px;
  color: #474a50;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.35;
}

.safety-certifications__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.safety-certifications__item {
  display: flex;
}

.safety-certifications__link {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 120px;
  padding: 20px;
  background: var(--color-soft);
  border-radius: var(--radius);
  transition: background-color 0.2s ease;
}

.safety-certifications__link:hover,
.safety-certifications__link:focus-visible {
  background: #e7e7e7;
}

.safety-certifications__logo {
  display: block;
  width: 100%;
  max-width: 120px;
  height: auto;
  max-height: 70px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .safety-certifications__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .safety-certifications__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .safety-certifications__link {
    min-height: 96px;
    padding: 16px;
  }
}

.safety-approach {
  width: min(100% - 48px, 780px);
  margin: 0 auto;
  padding: 24px 0 100px;
  text-align: center;
}

.safety-approach h2 {
  margin: 0 0 20px;
  color: var(--color-ink);
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 800;
  line-height: 1.05;
}

.safety-approach p {
  margin: 0;
  color: #474a50;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.35;
}

.about-certainty {
  position: relative;
  z-index: 2;
  height: 270svh;
  background: #fff;
}

.about-certainty::after {
  content: "";
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(170px, 30svh, 320px);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.88) 42%,
    #000 50%,
    rgba(0, 0, 0, 0.88) 58%,
    rgba(0, 0, 0, 0) 100%
  );
  transform: translateY(50%);
  pointer-events: none;
}

.about-certainty__stage {
  position: sticky;
  top: var(--about-header-height, 75px);
  height: calc(100svh - var(--about-header-height, 75px));
  overflow: hidden;
  background: #fff;
}

.about-certainty h2,
.about-method__stage > h2,
.about-people__intro h2 {
  color: var(--color-orange);
  font-size: var(--ry-type-display);
  font-style: italic;
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
}

.about-certainty h2 {
  position: absolute;
  z-index: 3;
  top: clamp(2.25rem, 4svh, 3rem);
  left: clamp(2rem, 3.125vw, 2.8125rem);
  width: min(1007px, 70vw);
  margin: 0;
  color: var(--intro-title-color, var(--color-orange));
  font-size: clamp(3rem, 6.95vw, 6.25rem);
  line-height: 0.977;
  transform: translate3d(0, var(--intro-title-y, 0), 0);
  text-shadow: 0 2px 20px rgba(0, 0, 0, var(--intro-title-shadow, 0));
  will-change: transform, color;
}

.about-certainty__media {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--intro-radius, var(--radius));
  transform: translate3d(var(--intro-x, 21vw), var(--intro-y, 14svh), 0) scaleX(var(--intro-scale-x, 0.565)) scaleY(var(--intro-scale-y, 0.54));
  transform-origin: 0 0;
  will-change: transform, border-radius;
}

.about-certainty__media video,
.about-certainty__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.about-certainty__media video {
  max-width: none;
  object-fit: cover;
  background: #111;
}

.about-certainty__shade {
  z-index: 1;
  background: rgba(0, 0, 0, var(--intro-shade, 0));
  pointer-events: none;
}

.about-certainty__copy {
  position: absolute;
  z-index: 4;
  top: 79svh;
  left: clamp(2rem, 12.15vw, 10.9375rem);
  width: min(calc(100vw - 4rem), 1123px);
  margin: 0;
  color: var(--intro-copy-color, #4e5055);
  opacity: var(--intro-copy-opacity, 0);
  font-size: var(--ry-type-body);
  font-weight: 400;
  line-height: var(--ry-leading-body);
  transform: translate3d(0, var(--intro-copy-y, 0), 0);
  text-shadow: 0 2px 16px rgba(0, 0, 0, var(--intro-copy-shadow, 0));
  will-change: transform, color, opacity;
}

.about-certainty__copy p {
  margin: 0;
}

.about-certainty__copy p + p {
  margin-top: 1em;
}

.about-scrub {
  position: relative;
  height: 460svh;
  background: #111;
}

.about-scrub--chapter {
  height: 285svh;
}

.about-scrub--chapter + .about-scrub--chapter {
  z-index: 2;
}

.about-scrub--chapter + .about-scrub--chapter::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  left: 0;
  height: clamp(120px, 20svh, 210px);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.9) 40%,
    #000 50%,
    rgba(0, 0, 0, 0.9) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  transform: translateY(-20%);
  pointer-events: none;
}

.about-scrub__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: #111;
}

.about-scrub__video,
.about-scrub__end-frame,
.about-scrub__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.about-scrub__video {
  max-width: none;
  object-fit: cover;
  background: #111;
}

.about-scrub__end-frame {
  z-index: 1;
  max-width: none;
  object-fit: cover;
  background: #111;
  opacity: var(--end-frame-opacity, 0);
  pointer-events: none;
  will-change: opacity;
}

.about-scrub__overlay {
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.63), rgba(0, 0, 0, 0.12) 72%, rgba(0, 0, 0, 0.22));
}

.about-scrub__overlay--heavy {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.25) 70%, rgba(0, 0, 0, 0.48));
}

.about-scrub__rail,
.about-scrub__chapter-copy {
  position: absolute;
  z-index: 2;
  color: #fff;
  will-change: transform, opacity;
}

.about-scrub__rail--long {
  top: 0;
  left: clamp(1.5rem, 8.25vw, 7.5rem);
  width: min(1203px, calc(100% - 3rem));
  transform: translate3d(0, calc(96svh - (var(--copy-progress) * 2350px)), 0);
}

.about-scrub__rail p {
  margin-bottom: 2.5rem;
  font-size: var(--ry-type-story);
  font-weight: 400;
  line-height: var(--ry-leading-story);
}

.about-scrub__rail p:first-child {
  font-size: var(--ry-type-story);
  font-style: normal;
  font-weight: 400;
  text-transform: none;
}

.about-scrub__actions {
  justify-content: flex-start;
  padding-bottom: 5rem;
}

.about-scrub__chapter-copy {
  top: 50%;
  left: clamp(1.5rem, 8.25vw, 7.5rem);
  width: min(1203px, calc(100% - 3rem));
  opacity: var(--copy-progress, 0);
  transform: translate3d(0, calc(20svh - (var(--copy-progress) * 40svh)), 0);
}

.about-scrub__chapter-copy h2 {
  margin-bottom: 1.5rem;
  color: #fff;
  font-size: clamp(3.5rem, 7vw, 7.5rem);
  font-style: italic;
  font-weight: 900;
  line-height: 0.88;
  text-transform: uppercase;
}

.about-scrub__chapter-copy h3 {
  margin-bottom: 0.55rem;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1;
}

.about-scrub__chapter-copy p {
  max-width: 1203px;
  margin-bottom: 1.7rem;
  font-family: inherit;
  font-size: var(--ry-type-story);
  font-weight: 400;
  line-height: var(--ry-leading-story);
}

.about-scrub--history .about-scrub__chapter-copy .button {
  width: min(290px, 100%);
  min-height: var(--ry-button-height);
  margin-top: 0.4rem;
}

/* The history chapter has more copy, so it settles higher before the sticky frame releases. */
.about-scrub--history .about-scrub__chapter-copy {
  transform: translate3d(0, calc(5svh - (var(--copy-progress) * 45svh)), 0);
}

.about-scrub--stakes .about-scrub__chapter-copy h2,
.about-scrub--stakes .about-scrub__chapter-copy h3,
.about-scrub--safety .about-scrub__eyebrow,
.about-scrub--safety .about-scrub__chapter-copy h2 {
  margin: 0;
  color: #fff;
  font-size: var(--ry-type-story);
  font-style: normal;
  font-weight: 400;
  line-height: var(--ry-leading-story);
  text-transform: none;
}

.about-scrub--stakes .about-scrub__chapter-copy h2,
.about-scrub--stakes .about-scrub__chapter-copy h3 {
  margin-bottom: 0.15em;
}

.about-scrub--stakes .about-scrub__chapter-copy > div + div,
.about-scrub--safety .about-scrub__chapter-copy p + p {
  margin-top: 0.9em;
}

.about-scrub--safety .about-scrub__eyebrow,
.about-scrub--safety .about-scrub__chapter-copy h2 {
  display: inline;
}

.about-scrub--safety .about-scrub__chapter-copy h2::before {
  content: " ";
}

.about-scrub__chapter-copy--split {
  width: min(1203px, calc(100% - 3rem));
}

.about-scrub__chapter-copy--split > div {
  width: min(1203px, 100%);
}

.about-scrub__eyebrow {
  display: block;
  margin-bottom: 0.8rem;
  color: var(--color-orange);
  font-size: 0.95rem;
  font-weight: 900;
  text-transform: uppercase;
}

.about-method {
  position: relative;
  height: 360svh;
  background: #fff;
}

.about-method__stage {
  position: sticky;
  top: var(--about-header-height, 75px);
  height: calc(100svh - var(--about-header-height, 75px));
  min-height: 620px;
  overflow: hidden;
  background: #fff;
}

.about-method__stage > h2 {
  position: absolute;
  z-index: 5;
  top: clamp(2rem, 6svh, 4.75rem);
  left: clamp(1.5rem, 6.4vw, 7.5rem);
  width: min(650px, 48vw);
  margin: 0;
}

.about-method__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.about-method__scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 3440px;
  height: 100%;
  min-height: 620px;
  transform: translate3d(var(--method-scene-x, 18vw), 0, 0);
  will-change: transform;
}

.about-method__cable {
  position: absolute;
  z-index: 2;
  top: 6%;
  left: 0;
  width: 3440px;
  height: 88%;
  overflow: visible;
}

.about-method__cable-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--method-cable-progress, 0));
}

.about-method__cable-line {
  stroke: var(--color-orange);
  stroke-width: 50px;
}

.about-method__connector {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  display: block;
  width: 99px;
  height: auto;
  opacity: 1;
  filter: drop-shadow(0 7px 10px rgba(22, 21, 24, 0.22));
  pointer-events: none;
  transform-origin: 0 50%;
  will-change: transform;
}

.about-method__cards {
  position: absolute;
  inset: 0;
}

.about-method-card {
  position: absolute;
  z-index: 2;
  width: 360px;
  overflow: hidden;
  border-radius: var(--radius);
  background: #18181a;
  opacity: var(--method-card-opacity, 0);
  transform: translate3d(calc((1 - var(--method-card-enter, 0)) * 150px), calc((1 - var(--method-card-enter, 0)) * 24px), 0);
  box-shadow: 0 18px 45px rgba(22, 21, 24, 0.18);
  will-change: transform, opacity;
}

.about-method-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 34%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.about-method-card--prepare {
  top: 33%;
  left: 560px;
  z-index: 3;
}

.about-method-card--deploy {
  top: 47%;
  left: 1270px;
  z-index: 3;
}

.about-method-card--execute {
  top: 34%;
  left: 1990px;
  z-index: 3;
}

.about-method-card--deliver {
  top: 43%;
  left: 2700px;
  z-index: 1;
}

.about-method-card img {
  display: block;
  width: 360px;
  height: 480px;
  object-fit: cover;
}

.about-method-card h3 {
  position: absolute;
  z-index: 2;
  right: 0.65rem;
  bottom: 0.9rem;
  left: 0.65rem;
  margin: 0;
  color: #fff;
  font-size: 1.75rem;
  font-style: italic;
  font-weight: 900;
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

.about-record {
  position: relative;
  width: min(100% - 3rem, 1370px);
  min-height: 820px;
  margin: 0 auto 8rem;
  padding: clamp(3rem, 7vw, 7rem);
  overflow: hidden;
  border-radius: 5px 5px 150px 5px;
  background: #626367;
  color: #fff;
}

.about-record__stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.about-record__stats p {
  display: flex;
  flex-direction: column;
}

.about-record__stats strong {
  font-size: clamp(2.1rem, 4vw, 4.2rem);
  font-weight: 900;
  line-height: 0.9;
}

.about-record__stats span {
  margin-top: 0.55rem;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.about-record__copy {
  width: min(610px, 56%);
  margin: 8rem 0 5rem auto;
}

.about-record__copy h2 {
  margin-bottom: 1.2rem;
  color: #fff;
  font-size: clamp(3rem, 5vw, 5.6rem);
  font-style: italic;
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
}

.about-record__copy p {
  font-family: Arial, sans-serif;
  font-size: 1.1rem;
  line-height: 1.45;
}

.about-record__logos {
  position: absolute;
  right: 5%;
  bottom: 2.5rem;
  left: 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.about-record__logos img {
  width: auto;
  max-width: 130px;
  max-height: 42px;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.9;
}

.about-people {
  position: relative;
  height: 350svh;
  overflow: clip;
  background: #fff;
}

.about-people__stage {
  position: sticky;
  top: var(--about-header-height, 75px);
  height: calc(100svh - var(--about-header-height, 75px));
  min-height: 650px;
  overflow: hidden;
  background: #fff;
}

.about-people__intro {
  position: absolute;
  z-index: 6;
  top: clamp(2rem, 5svh, 4.5rem);
  left: clamp(1.5rem, 6.4vw, 7.5rem);
  width: min(1203px, calc(100% - 3rem));
}

.about-people__intro h2 {
  width: min(1007px, 76vw);
  margin-bottom: clamp(1.5rem, 3svh, 2.75rem);
}

.about-people__intro p {
  width: min(1203px, 83vw);
  margin: 0;
  color: #4e5055;
}

.about-people__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.about-people__scene {
  position: absolute;
  inset: 0 auto auto 0;
  width: 2700px;
  height: 100%;
  min-height: 650px;
  transform: translate3d(var(--people-scene-x, 10vw), 0, 0);
  will-change: transform;
}

.about-people__cable {
  position: absolute;
  top: 0;
  left: 0;
  width: 2700px;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.about-people__cable path {
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 74px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-people__cable--back {
  z-index: 1;
}

.about-people__cable--back path {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--people-cable-progress, 0));
}

.about-people__cable--front {
  display: none;
}

.about-people__cable--front path {
  stroke-dasharray: 0.075 0.185 0.085 0.205 0.07 0.38;
  stroke-dashoffset: -0.18;
}

.about-people__cards {
  position: absolute;
  inset: 0;
}

.about-person {
  position: absolute;
  z-index: 2;
  width: 360px;
  height: 500px;
  overflow: hidden;
  border-radius: var(--radius);
  background: #777;
  opacity: var(--people-card-opacity, 0);
  box-shadow: 0 18px 45px rgba(22, 21, 24, 0.16);
  transform: translate3d(calc((1 - var(--people-card-enter, 0)) * 150px), calc((1 - var(--people-card-enter, 0)) * 22px), 0);
  will-change: transform, opacity;
}

.about-person--jonne {
  top: 43%;
  left: 430px;
}

.about-person--maarten {
  top: 51%;
  left: 950px;
}

.about-person--gerard {
  top: 39%;
  left: 1470px;
}

.about-person--overview {
  top: 47%;
  left: 2010px;
  width: 400px;
  height: 520px;
}

.about-person::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 38%;
  background: linear-gradient(to top, rgba(15, 14, 30, 0.82), transparent);
  pointer-events: none;
}

.about-person img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(1);
}

.about-person--overview img {
  filter: none;
}

.about-person h3,
.about-person p {
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.about-person h3 {
  bottom: 2.15rem;
  padding-inline: 1rem;
  font-size: 1.35rem;
}

.about-person__caption {
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  height: 96px;
}

.about-person p {
  bottom: 1rem;
  padding-inline: 1rem;
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
}

.about-person--overview .button {
  position: absolute;
  z-index: 5;
  right: 50%;
  bottom: 1.5rem;
  width: 220px;
  min-height: var(--ry-button-height);
  transform: translateX(50%);
}

.about-faq {
  background: #fff;
}

.about-faq > h2 {
  font-style: italic;
}

.about-contact {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: end;
  width: min(100% - 3rem, 1180px);
  margin: 0 auto 7rem;
  padding: clamp(2.5rem, 6vw, 5rem);
  border: 3px dashed var(--color-orange);
  border-radius: var(--radius);
  background: #f5f5f7;
}

.about-contact__copy {
  max-width: 730px;
}

.about-contact__copy > span {
  color: var(--color-orange);
  font-size: 0.85rem;
  font-weight: 900;
  text-transform: uppercase;
}

.about-contact h2 {
  margin: 0.8rem 0 1rem;
  font-size: clamp(2.5rem, 4.5vw, 5rem);
  font-style: italic;
  font-weight: 900;
  line-height: 0.92;
  text-transform: uppercase;
}

.about-contact p {
  margin-bottom: 0;
  color: #55575c;
  font-family: Arial, sans-serif;
}

.about-contact > .button {
  width: 220px;
}

.about-map,
.about-projects,
.about-news {
  background: #f4f4f6;
}

@media (min-width: 981px) and (max-width: 1440px) {
  .about-certainty h2 {
    width: min(830px, 66vw);
    font-size: clamp(4rem, 6vw, 5.15rem);
  }

  .about-certainty__copy {
    top: 76svh;
    left: 8vw;
    width: min(76vw, 930px);
    font-size: var(--ry-type-body);
    line-height: var(--ry-leading-body);
  }

  .about-scrub__rail--long {
    left: 6vw;
    width: min(900px, 80vw);
    transform: translate3d(0, calc(95svh - (var(--copy-progress) * 2120px)), 0);
  }

  .about-scrub__rail p,
  .about-scrub__rail p:first-child,
  .about-scrub__chapter-copy p {
    font-size: var(--ry-type-story);
    line-height: var(--ry-leading-story);
  }

  .about-scrub__chapter-copy {
    left: 6vw;
    width: min(900px, 82vw);
  }

  .about-scrub__chapter-copy h2 {
    font-size: clamp(4rem, 6.3vw, 5.5rem);
  }

  .about-scrub--history .about-scrub__chapter-copy h2 {
    font-size: 4.5rem;
  }

  .about-scrub--stakes .about-scrub__chapter-copy h2,
  .about-scrub--stakes .about-scrub__chapter-copy h3,
  .about-scrub--safety .about-scrub__eyebrow,
  .about-scrub--safety .about-scrub__chapter-copy h2 {
    font-size: 2.25rem;
    line-height: 0.96;
  }

  .about-method {
    height: 340svh;
  }

  .about-method__stage > h2 {
    top: clamp(2rem, 4svh, 3rem);
    width: min(540px, 45vw);
    font-size: clamp(3.65rem, 5vw, 4.5rem);
  }

  .about-method__scene,
  .about-method__cable {
    width: 3000px;
  }

  .about-method__cable-line {
    stroke-width: 46px;
  }

  .about-method-card,
  .about-method-card img {
    width: 300px;
  }

  .about-method-card img {
    height: 400px;
  }

  .about-method-card--prepare {
    top: 34%;
    left: 470px;
  }

  .about-method-card--deploy {
    top: 40%;
    left: 1080px;
  }

  .about-method-card--execute {
    top: 33%;
    left: 1690px;
  }

  .about-method-card--deliver {
    top: 38%;
    left: 2300px;
  }

  .about-method-card h3 {
    font-size: 1.35rem;
  }

  .about-record {
    width: calc(100% - 2rem);
    min-height: 730px;
    margin-bottom: 6rem;
    padding: clamp(3rem, 5vw, 4.5rem);
  }

  .about-record__copy {
    margin: 6rem 0 4.5rem auto;
  }

  .about-record__copy h2 {
    font-size: clamp(3.5rem, 4.6vw, 4.6rem);
  }

  .about-people {
    height: 340svh;
  }

  .about-people__stage,
  .about-people__scene {
    min-height: 600px;
  }

  .about-people__intro {
    top: clamp(1.5rem, 3svh, 2.5rem);
  }

  .about-people__scene,
  .about-people__cable {
    width: 2350px;
  }

  .about-people__cable path {
    stroke-width: 58px;
  }

  .about-person {
    width: 270px;
    height: 354px;
  }

  .about-person--jonne {
    top: 50%;
    left: 370px;
  }

  .about-person--maarten {
    top: 54%;
    left: 820px;
  }

  .about-person--gerard {
    top: 48%;
    left: 1270px;
  }

  .about-person--overview {
    top: 50%;
    left: 1720px;
    width: 300px;
    height: 390px;
  }

  .about-contact {
    width: calc(100% - 2rem);
    margin-bottom: 6rem;
  }
}

@media (max-width: 980px) {
  .about-hero {
    min-height: 82svh;
  }

  .about-certainty {
    height: 250svh;
  }

  .about-certainty__media {
    width: 100%;
  }

  .about-scrub__rail--long {
    transform: translate3d(0, calc(95svh - (var(--copy-progress) * 2050px)), 0);
  }

  .about-scrub__rail p {
    font-size: var(--ry-type-story);
  }

  .about-method {
    height: 340svh;
  }

  .about-method__stage > h2 {
    width: min(570px, 70vw);
  }

  .about-method__scene,
  .about-method__cable {
    width: 2920px;
  }

  .about-method-card,
  .about-method-card img {
    width: 320px;
  }

  .about-method-card img {
    height: 427px;
  }

  .about-method-card--prepare {
    top: 34%;
    left: 410px;
  }

  .about-method-card--deploy {
    top: 36%;
    left: 1010px;
  }

  .about-method-card--execute {
    top: 33%;
    left: 1620px;
  }

  .about-method-card--deliver {
    top: 36%;
    left: 2230px;
  }

  .about-record__stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-record__copy {
    width: min(690px, 100%);
    margin: 5rem 0;
  }

  .about-record__logos img:nth-child(n + 6) {
    display: none;
  }

  .about-people__intro {
    top: 2rem;
  }

  .about-people__scene,
  .about-people__cable {
    width: 2300px;
  }

  .about-people__cable path {
    stroke-width: 56px;
  }

  .about-person {
    width: 280px;
    height: 367px;
  }

  .about-person--jonne {
    top: 45%;
    left: 340px;
  }

  .about-person--maarten {
    top: 50%;
    left: 770px;
  }

  .about-person--gerard {
    top: 42%;
    left: 1200px;
  }

  .about-person--overview {
    top: 47%;
    left: 1630px;
    width: 320px;
    height: 415px;
  }
}

@media (max-width: 700px) {
  .about-hero {
    min-height: 78svh;
  }

  .about-hero__image {
    object-position: 30% center;
  }

  .about-hero h1 {
    font-size: clamp(42px, 12vw, 58px);
  }

  .about-hero__actions,
  .about-scrub__actions {
    flex-direction: column;
    align-items: center;
  }

  .about-hero__actions .button,
  .about-scrub__actions .button {
    width: min(100%, 300px);
  }

  .about-certainty {
    width: 100%;
    height: 235svh;
    min-height: 0;
    padding: 0;
  }

  .about-certainty h2,
  .about-method__stage > h2,
  .about-people__intro h2 {
    width: 100%;
    font-size: clamp(2.5rem, 12vw, 4.1rem);
  }

  .about-certainty h2 {
    top: 11svh;
    left: 1.25rem;
    width: calc(100% - 2.5rem);
    margin: 0;
  }

  .about-certainty__media {
    width: 100%;
  }

  .about-certainty__copy {
    top: 67svh;
    left: 1.25rem;
    width: calc(100% - 2.5rem);
    font-size: var(--ry-type-body);
    line-height: var(--ry-leading-body);
  }

  .about-scrub {
    height: 400svh;
  }

  .about-scrub--chapter {
    height: 235svh;
  }

  .about-scrub__overlay {
    background: rgba(0, 0, 0, 0.48);
  }

  .about-scrub__overlay--heavy {
    background: rgba(0, 0, 0, 0.62);
  }

  .about-scrub__rail--long {
    left: 1.25rem;
    width: calc(100% - 2.5rem);
    transform: translate3d(0, calc(94svh - (var(--copy-progress) * 1750px)), 0);
  }

  .about-scrub__rail p {
    margin-bottom: 2rem;
    font-size: var(--ry-type-story);
  }

  .about-scrub__rail p:first-child {
    font-size: var(--ry-type-story);
  }

  .about-scrub__chapter-copy {
    top: 44%;
    left: 1.25rem;
    width: calc(100% - 2.5rem);
  }

  .about-scrub__chapter-copy h2 {
    font-size: clamp(3rem, 16vw, 5rem);
  }

  .about-scrub__chapter-copy p,
  .about-people__intro p {
    font-size: var(--ry-type-story);
    line-height: var(--ry-leading-story);
  }

  .about-method {
    height: 325svh;
  }

  .about-method__stage {
    min-height: 560px;
  }

  .about-method__stage > h2 {
    top: 2rem;
    left: 1.25rem;
    width: calc(100% - 2.5rem);
  }

  .about-method__scene {
    width: 2300px;
    min-height: 560px;
  }

  .about-method__cable {
    top: 10%;
    width: 2300px;
    height: 84%;
  }

  .about-method__cable-line {
    stroke-width: 42px;
  }

  .about-method__connector {
    width: 86px;
  }

  .about-method-card {
    width: 250px;
  }

  .about-method-card img {
    width: 250px;
    height: 333px;
  }

  .about-method-card--prepare {
    top: 34%;
    left: 280px;
  }

  .about-method-card--deploy {
    top: 39%;
    left: 760px;
  }

  .about-method-card--execute {
    top: 34%;
    left: 1240px;
  }

  .about-method-card--deliver {
    top: 38%;
    left: 1720px;
  }

  .about-method-card h3 {
    font-size: 1.15rem;
  }

  .about-record {
    width: calc(100% - 2rem);
    min-height: 850px;
    margin-bottom: 5rem;
    padding: 2rem;
    border-radius: 4px 4px 80px 4px;
  }

  .about-record__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-record__stats strong {
    font-size: 2.4rem;
  }

  .about-record__copy {
    margin: 3rem 0 7rem;
  }

  .about-record__copy h2 {
    font-size: 3.2rem;
  }

  .about-record__logos {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.25rem 2rem;
  }

  .about-record__logos img {
    max-width: 90px;
    max-height: 30px;
  }

  .about-people {
    height: auto;
    padding: 5rem 1rem 6rem;
    overflow: hidden;
  }

  .about-people__stage {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .about-people__intro {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-bottom: 3rem;
  }

  .about-people__intro h2,
  .about-people__intro p {
    width: 100%;
  }

  .about-people__intro p {
    font-size: var(--ry-type-body);
    line-height: var(--ry-leading-body);
  }

  .about-people__viewport,
  .about-people__scene,
  .about-people__cards {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    transform: none;
  }

  .about-people__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .about-people__cable {
    display: none;
  }

  .about-person,
  .about-person--jonne,
  .about-person--maarten,
  .about-person--gerard,
  .about-person--overview {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 0.76;
    opacity: 1;
    transform: none;
  }

  .about-person--overview {
    aspect-ratio: 4 / 3;
  }

  .about-person h3 {
    bottom: 1.65rem;
    padding-inline: 0.4rem;
    font-size: 0.8rem;
  }

  .about-person p {
    bottom: 0.65rem;
    padding-inline: 0.4rem;
    font-size: 0.62rem;
  }

  .about-contact {
    grid-template-columns: 1fr;
    gap: 2rem;
    width: calc(100% - 2rem);
    padding: 2rem;
  }

  .about-contact > .button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .about-person h3 {
    bottom: 2.2rem;
    padding-inline: 1rem;
    font-size: 1.15rem;
  }

  .about-person p {
    bottom: 1rem;
    padding-inline: 1rem;
    font-size: 0.8rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  .about-certainty {
    height: auto;
    padding: 5rem 1rem;
  }

  .about-certainty__stage {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .about-certainty h2 {
    position: relative;
    top: auto;
    left: auto;
    width: min(720px, 100%);
    margin: 0 auto 1.5rem;
    opacity: 1;
    transform: none;
  }

  .about-certainty__media {
    position: relative;
    width: min(100%, 980px);
    height: auto;
    aspect-ratio: 16 / 9;
    margin-inline: auto;
    transform: none;
  }

  .about-certainty__copy {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 980px);
    margin: 1.5rem auto 0;
    color: #4e5055;
    opacity: 1;
    transform: none;
    text-shadow: none;
  }

  .about-scrub,
  .about-scrub--chapter {
    height: auto;
  }

  .about-scrub__stage {
    position: relative;
    min-height: 100svh;
  }

  .about-scrub__rail--long,
  .about-scrub__chapter-copy {
    position: relative;
    top: auto;
    left: auto;
    width: min(100% - 2.5rem, 760px);
    margin-inline: auto;
    padding: 15svh 0;
    opacity: 1;
    transform: none;
  }

  .about-method {
    height: auto;
    padding: 5rem 1rem;
  }

  .about-method__stage {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .about-method__stage > h2 {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 720px);
    margin: 0 auto 2.5rem;
  }

  .about-method__viewport,
  .about-method__scene,
  .about-method__cards {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    transform: none;
  }

  .about-method__cable,
  .about-method__connector {
    display: none;
  }

  .about-method__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
  }

  .about-method-card,
  .about-method-card--prepare,
  .about-method-card--deploy,
  .about-method-card--execute,
  .about-method-card--deliver {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    opacity: 1;
    transform: none;
  }

  .about-method-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 0.75;
  }

  .about-people {
    height: auto;
    padding: 5rem 1rem;
  }

  .about-people__stage,
  .about-people__intro,
  .about-people__viewport,
  .about-people__scene,
  .about-people__cards {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    transform: none;
  }

  .about-people__intro {
    margin-bottom: 2.5rem;
  }

  .about-people__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
  }

  .about-people__cable {
    display: none;
  }

  .about-person,
  .about-person--jonne,
  .about-person--maarten,
  .about-person--gerard,
  .about-person--overview {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 0.76;
    opacity: 1;
    transform: none;
  }

}

/* Keep the shared contact layout authoritative over legacy per-service rules. */
.reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__panel {
  display: grid;
  grid-template-columns: minmax(270px, 360px) minmax(0, 827px);
  gap: clamp(48px, 6.4vw, 92px);
  width: min(100%, 1280px);
  max-width: none;
}

.reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__intro,
.reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__form {
  width: 100%;
  max-width: none;
}

.reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__intro .eyebrow {
  display: block;
}

.reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__intro h2 {
  max-width: 370px;
  margin: 0;
  font-size: clamp(34px, 2.8vw, 44px);
  font-weight: 900;
  line-height: 0.96;
  text-transform: uppercase;
}

.reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__intro p {
  max-width: 350px;
  margin: 20px 0 0;
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 600;
  line-height: 1.25;
}

.reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__form {
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.9fr);
  gap: 0 clamp(24px, 2.6vw, 38px);
  margin-top: 0;
}

.reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form__fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 58px clamp(20px, 2.2vw, 32px);
}

@media (max-width: 920px) {
  .reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__panel {
    grid-template-columns: 1fr;
    gap: 48px;
    width: min(100%, 760px);
  }

  .reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__intro h2 {
    max-width: 620px;
    font-size: clamp(34px, 6.8vw, 48px);
    line-height: 0.98;
  }

  .reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__intro p {
    max-width: 580px;
  }

  .reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__form {
    grid-template-columns: 1fr;
    grid-template-areas:
      "fields"
      "details"
      "consent"
      "submit";
    gap: 24px;
  }

  .reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form__fields {
    gap: 24px;
  }
}

@media (max-width: 600px) {
  .reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__intro h2 {
    font-size: clamp(30px, 9.2vw, 36px);
  }

  .reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form__fields {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Accessible hit areas keep the compact visual language while making the
   interactive controls practical on touch screens. */
.feature-carousel__dots {
  gap: 0;
}

.feature-carousel__dots .carousel-dot,
.project-carousel-block .feature-carousel__dots .carousel-dot {
  position: relative;
  width: 24px;
  height: 24px;
  background: transparent;
}

.feature-carousel__dots .carousel-dot::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b7b7b7;
  content: "";
  transform: translate(-50%, -50%);
}

.feature-carousel__dots .carousel-dot.is-active {
  background: transparent;
}

.feature-carousel__dots .carousel-dot.is-active::after {
  background: #333333;
}

.site-footer__socials a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
}

.site-footer a:not(.button) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.site-footer .site-footer__socials a {
  display: grid;
}

/* Homepage hero: keep the brand statement as the intended two-line lockup
   and present consent as a compact, unobtrusive overlay. */
.hero--home h1 {
  max-width: none;
}

.hero--home h1 span {
  display: block;
  white-space: nowrap;
}

.hero--home .cookie-card {
  top: clamp(20px, 3vw, 48px);
  right: clamp(20px, 3vw, 48px);
  bottom: auto;
  left: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
  width: min(170px, calc(100% - 40px));
  max-width: none;
  min-height: 308px;
  box-sizing: border-box;
  padding: 13px 12px;
  margin: 0;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 3px;
  background: rgba(8, 19, 35, 0.16);
  color: var(--color-white);
  box-shadow: none;
  backdrop-filter: blur(3px);
}

.hero--home .cookie-card h2 {
  margin: 0 0 12px;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.04;
  text-transform: uppercase;
}

.hero--home .cookie-card p {
  margin: 0;
  color: inherit;
  font-size: 11px;
  line-height: 1.08;
}

.hero--home .cookie-card__actions {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  min-width: 0;
  gap: 8px;
  margin-top: auto;
}

.hero--home .cookie-card .button {
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 30px;
  height: 30px;
  box-sizing: border-box;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-white);
  border-radius: 3px;
  background: transparent;
  color: var(--color-white);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.hero--home .cookie-card .button:hover,
.hero--home .cookie-card .button:focus-visible {
  background: var(--color-white);
  color: var(--color-ink);
}

@media (max-width: 760px) {
  .hero--home h1 span {
    white-space: nowrap;
  }

  .hero--home h1 {
    font-size: clamp(2.1rem, 10vw, 3rem);
  }

  .hero--home .cookie-card {
    top: 14px;
    right: 14px;
    left: auto;
    width: min(170px, calc(100% - 28px));
  }

  .hero--home:has(.cookie-card:not([hidden])) .hero__content {
    padding-top: 290px;
  }
}

/* Keep mobile service and project card headings on the same scale. */
@media (max-width: 560px) {
  .services-grid .service-card h2,
  .project-card h2 {
    font-size: clamp(2rem, 3vw, 2.75rem);
  }

  .services-grid .service-card h2 span {
    white-space: normal;
  }

  .client-strip__track {
    --client-strip-gap: 40px;
    animation-duration: 16s;
  }

  .client-strip__set li {
    min-width: 0;
  }

  /* Service heroes use the same compact mobile lockup as the homepage. */
  .offshore-hero h1,
  .service-page--rtt .offshore-hero h1,
  .service-page--mobile-testing .offshore-hero h1,
  .service-page--full-service .offshore-hero h1 {
    font-size: clamp(2.1rem, 10vw, 3rem);
    line-height: 1.09;
  }

  .offshore-hero__actions,
  .service-page--full-service .offshore-hero__actions {
    width: min(100%, 280px);
    gap: 12px;
    flex-wrap: nowrap;
  }

  .offshore-hero__actions .button,
  .service-page--full-service .offshore-hero__actions .button {
    width: 128px;
    min-width: 128px;
  }
}

/* Site-wide cookie consent: fixed in one predictable place instead of
   inheriting the footer's document flow. */
.cookie-consent {
  position: fixed;
  right: 24px;
  bottom: 24px;
  left: auto;
  z-index: 1000;
  width: min(440px, calc(100vw - 48px));
  color: var(--color-white);
}

.cookie-consent[hidden] {
  display: none;
}

.cookie-consent__panel {
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 3px;
  background: rgba(30, 32, 40, 0.72);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
}

.cookie-consent__summary h2,
.cookie-consent__preferences h3 {
  margin: 0 0 8px;
  color: inherit;
  font-size: 1.35rem;
  line-height: 1.05;
}

.cookie-consent__summary p,
.cookie-consent__preferences > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  line-height: 1.45;
}

.cookie-consent__summary a,
.cookie-consent__manage {
  color: var(--color-white);
  font-size: 0.85rem;
  text-underline-offset: 3px;
}

.cookie-consent__actions,
.cookie-consent__preference-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.cookie-consent__button {
  min-height: 40px;
  padding: 0.65rem 1rem;
  border: 1px solid var(--color-orange);
  border-radius: 3px;
  background: var(--color-orange);
  color: var(--color-white);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.cookie-consent__actions .cookie-consent__button + .cookie-consent__button {
  border-color: var(--color-white);
  background: transparent;
}

.cookie-consent__manage {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.cookie-consent__preferences {
  display: grid;
  gap: 16px;
}

.cookie-consent__preferences[hidden] {
  display: none;
}

.cookie-consent__category {
  display: grid;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.cookie-consent__category-toggle {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 0.9rem;
}

.cookie-consent__category small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.78rem;
  line-height: 1.4;
}

.cookie-consent__button:focus-visible,
.cookie-consent__manage:focus-visible,
.cookie-consent__summary a:focus-visible,
.cookie-settings-button:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .cookie-consent {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
  }

  .cookie-consent__panel {
    gap: 16px;
    padding: 20px;
  }

  .cookie-consent__actions,
  .cookie-consent__preference-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cookie-consent__button {
    width: 100%;
  }

  .cookie-consent__manage {
    justify-self: start;
  }
}

/* Mobile CTA pairs stay compact and equal. They use a second row only when
   the viewport cannot accommodate both fixed-width actions. */
@media (max-width: 700px) {
  :is(
    .offshore-hero__actions,
    .offshore-connection__actions,
    .services-overview-hero__actions,
    .academy-hero__actions,
    .academy-program__actions,
    .team-hero__actions,
    .contact-hero__actions,
    .contact-location__actions,
    .career-hero__actions,
    .career-actions,
    .hero--home .hero__actions
  ):has(> .button:nth-child(2)) {
    display: flex;
    width: auto;
    max-width: 100%;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }

  :is(
    .offshore-hero__actions,
    .offshore-connection__actions,
    .services-overview-hero__actions,
    .academy-hero__actions,
    .academy-program__actions,
    .team-hero__actions,
    .contact-hero__actions,
    .contact-location__actions,
    .career-hero__actions,
    .career-actions,
    .hero--home .hero__actions
  ):has(> .button:nth-child(2)) > .button {
    box-sizing: border-box;
    flex: 0 0 128px;
    width: 128px;
    min-width: 128px;
    max-width: calc(100vw - 32px);
  }
}

/* ==========================================================================
   Cookie consent — frosted glass panel, and no persistent post-consent UI
   ==========================================================================
   Requested by Tristan (11 Sept): the banner should read as translucent
   glass over the page, and once a choice is recorded nothing may remain on
   screen — no floating "Cookie preferences" pill. Consent can still be
   withdrawn from the Privacy & Cookie Policy page, which is where the
   `data-cookie-open` trigger now lives.
   ========================================================================== */

.cookie-consent__panel {
  /* Translucent ink rather than the solid #1e2028 block. Alpha is kept at
     0.55 so white body copy stays legible over a bright hero image. */
  background: rgba(20, 22, 29, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}

/* Safari <9 / Firefox with backdrop-filter disabled would otherwise render
   the panel as flat 55% ink over the page, which is unreadable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cookie-consent__panel {
    background: rgba(20, 22, 29, 0.94);
  }
}

/* The floating pill is removed from the template; this is a safety net so a
   cached or re-added instance cannot reappear after consent is recorded. */
.cookie-settings-button {
  display: none !important;
}

.legal-cookie-choice {
  margin-top: 32px;
}

.legal-cookie-choice__button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-orange);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Contact page — align this intro with the Academy reading measure, keep the
   map actions as an equal pair, and prevent the very wide Greek office source
   image from showing a white edge in its cropped card frame. */
.contact-page .contact-intro {
  min-height: 0;
  padding: 59px 24px 77px;
}

.contact-page .contact-intro p {
  width: min(100%, 672px);
  max-width: 672px;
  margin-inline: auto;
  text-wrap: pretty;
}

.contact-page .contact-location-card img {
  object-position: center center;
}

.contact-page .contact-location__actions {
  --contact-location-action-width: clamp(140px, calc((100vw - 68px) / 2), 200px);
  display: flex !important;
  flex-flow: row wrap;
  align-items: center;
  gap: 12px;
}

.contact-page .contact-location__actions > .contact-directions,
.contact-page .contact-location__actions > .button {
  flex: 0 0 var(--contact-location-action-width) !important;
  width: var(--contact-location-action-width) !important;
  min-width: 0 !important;
}

.contact-page .contact-location__actions .contact-directions__toggle {
  width: 100% !important;
  min-width: 0;
}

@media (max-width: 920px) {
  .contact-page .contact-intro {
    padding: 44px 24px 52px;
  }
}

/* ==========================================================================
   Shared action-group button sizing
   ==========================================================================
   Requested by Tristan (11 Sept): paired buttons must sit side by side, wrap
   underneath only when they genuinely do not fit, always share one width,
   and never stretch to the full width of the page.

   `--action-button-width` is a percentage of the group's own content box so
   two buttons always fit a phone (46% + 46% + 12px gap <= 100%), clamped so
   the width never collapses below a tappable size or grows past the desktop
   button width. Because every button in a group resolves the same value,
   widths stay equal regardless of label length.

   This block overrides the per-component `width: 100%` / `flex-direction:
   column` mobile rules scattered above. It is deliberately an override block
   rather than 30 edits in place, because those components are being worked
   on concurrently; fold it into the components when that settles.
   ========================================================================== */

.hero__actions,
.about-hero__actions,
.about-scrub__actions,
.academy-hero__actions,
.academy-program__actions,
.academy-register__actions,
.career-hero__actions,
.career-actions,
.career-ready__actions,
.contact-hero__actions,
.contact-location__actions,
.team-hero__actions,
.offshore-hero__actions,
.offshore-connection__actions,
.offshore-application__actions,
.services-overview-hero__actions,
.equipment-detail__actions,
.map-intro__actions,
.blog-filters__actions,
.card-actions,
.cookie-consent__actions,
.cookie-consent__preference-actions {
  /* Half the row minus the gap, so two buttons pair up whenever the container
     can hold them at a usable size, and are identical by construction. The
     group itself is width:100% below, so this percentage resolves against a
     width that is already settled - no circular sizing. Floor 140px, ceiling
     the 200px desktop button width; below the floor they wrap to a new row
     rather than stretching. */
  /* 14px, not the 12px gap: two pixels of slack absorb sub-pixel rounding,
     which otherwise tips a pair that mathematically fits onto a second row. */
  --action-button-width: clamp(140px, calc((100% - 14px) / 2), 200px);

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 100%;
}

/* Several of these groups are pinned to a narrow track further up the sheet
   (`width: min(100%, 280px)` and similar) purely to force the old stacked
   layout. Those selectors carry more classes than the ones here, so the width
   has to be reclaimed explicitly for the buttons to have room to sit side by
   side. `.contact-location__actions` is left out: it is absolutely positioned
   and its width is doing real layout work. */
.hero__actions,
.about-hero__actions,
.about-scrub__actions,
.academy-hero__actions,
.academy-program__actions,
.academy-register__actions,
.career-hero__actions,
.career-actions,
.career-ready__actions,
.contact-hero__actions,
.team-hero__actions,
.offshore-hero__actions,
.offshore-connection__actions,
.offshore-application__actions,
.services-overview-hero__actions,
.equipment-detail__actions,
.map-intro__actions,
.blog-filters__actions,
.card-actions {
  width: 100% !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

.hero__actions > .button,
.about-hero__actions > .button,
.about-scrub__actions > .button,
.academy-hero__actions > .button,
.academy-program__actions > .button,
.academy-register__actions > .button,
.career-hero__actions > .button,
.career-actions > .button,
.career-ready__actions > .button,
.contact-hero__actions > .button,
.contact-location__actions > .button,
.team-hero__actions > .button,
.offshore-hero__actions > .button,
.offshore-connection__actions > .button,
.offshore-application__actions > .button,
.services-overview-hero__actions > .button,
.equipment-detail__actions > .button,
.map-intro__actions > .button,
.blog-filters__actions > .button,
.card-actions > .button,
.cookie-consent__actions > .cookie-consent__button,
.cookie-consent__preference-actions > .cookie-consent__button {
  flex: 0 0 auto;
  width: var(--action-button-width);
  /* The global `.button` rule sets min-width: 200px, which would defeat the
     shared width and force a wrap on every phone. */
  min-width: 0;
  max-width: 100%;
  padding-right: 12px;
  padding-left: 12px;
  text-align: center;
}

/* Hero and section groups are centred in the design; in-card groups are not. */
.hero__actions,
.about-hero__actions,
.about-scrub__actions,
.academy-hero__actions,
.career-hero__actions,
.career-actions,
.career-ready__actions,
.contact-hero__actions,
.contact-location__actions,
.team-hero__actions,
.offshore-hero__actions,
.offshore-application__actions,
.services-overview-hero__actions,
/* The connection band is a full-width feature with a centred heading; its
   buttons were inheriting the left-aligned in-card treatment and sat 284px
   left of centre on every service page. */
.offshore-connection__actions {
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
}

.card-actions,
.blog-filters__actions,
.equipment-detail__actions,
.map-intro__actions,
.academy-program__actions,
.academy-register__actions,
.cookie-consent__actions,
.cookie-consent__preference-actions {
  justify-content: flex-start;
}

/* The consent panel is a fixed 440px box, so its two choices need a slightly
   tighter cap than the page buttons to sit on one row inside it. */
.cookie-consent__actions,
.cookie-consent__preference-actions {
  /* Same half-row rule as the rest of the site so the two choices sit side by
     side inside the 440px panel (189px each) instead of stacking. */
  --action-button-width: clamp(132px, calc((100% - 14px) / 2), 190px);
}

/* The labels are long; let them wrap inside the button rather than forcing a
   second row, and give the panel a little more room on small screens. */
.cookie-consent__actions > .cookie-consent__button,
.cookie-consent__preference-actions > .cookie-consent__button {
  height: auto;
  min-height: 40px;
  padding: 0.6rem 0.75rem;
  line-height: 1.2;
  white-space: normal;
}

@media (max-width: 420px) {
  .cookie-consent__panel {
    padding: 20px 18px;
  }
}

/* The "Manage preferences" link is not a button and should not be sized like
   one; keep it on its own line under the two real choices. */
.cookie-consent__actions > .cookie-consent__manage {
  flex: 1 0 100%;
  width: auto;
}

/* Equipment cards pair a button with a fixed 46px icon control — that grid is
   intentional and must not be flattened by the rules above. */
.equipment-card__actions {
  display: grid;
}


/* ==========================================================================
   Service pages - mobile corrections (11 Sept)
   ==========================================================================
   Reported by Tristan against the offshore page; every service page shares
   these .offshore-* components, so each fix lands on all six.
   ========================================================================== */

@media (max-width: 760px) {
  /* The stat cards sat off-centre (16px left, 48px right). Cause: the section
     AND the grid inside it both match `width: min(100% - 32px, 620px)`, so the
     gutter is applied twice, and the inner grid has no auto margin so it hugs
     the left edge. The RTT page already fixes this with `width: 100%` - apply
     the same treatment to every service page. */
  .offshore-stats-section > .offshore-stats {
    width: 100%;
    margin-inline: auto;
  }

  /* The decorative cable graphic was pinned at a hard 900px - 2.3x the width of
     a 390px phone - so most of the curve sat off-screen. On desktop it fits its
     column exactly (1120px inside 1123px, no bleed); give it the same treatment
     here so the whole shape is on screen. */
  .offshore-intro__cable,
  .offshore-intro__line {
    right: 0;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  /* "What Reynard delivers": the card was locked to the height of its sticky
     stage via `height: calc(100% - 16px)`, leaving roughly 270px of empty space
     under the content. Let it size to what is actually in it. */
  .offshore-deliverables {
    height: auto;
    max-height: none;
  }

  /* The list was clamped to ~15px while body copy on the same page runs at
     ~18px, so it read as a footnote rather than the point of the section.
     Desktop runs these bullets at 20px. */
  .offshore-deliverables p,
  .offshore-deliverables ul,
  .offshore-deliverables li {
    font-size: clamp(15px, 4.4vw, 17px);
    line-height: 1.45;
  }

  /* The graphic was 145px - 40% of the card, against 50% on desktop - and read
     as an afterthought. Pages that set their own size (mobile-testing) carry
     more specificity and keep theirs. */
  .offshore-deliverables__graphic {
    width: min(200px, 56vw);
    margin-top: 10px;
  }

  /* With the card no longer stretched to fill the stage, 190svh of scroll track
     was a long stretch of nothing moving. */
  .offshore-deliverables-scroll {
    height: 130svh;
  }
}

/* Footer decoration must not push the page wider than the viewport. The left
   vector overflowed by 8px on /certifications/ at 390px (pre-existing, spotted
   during the 11 Sept pass). Clipping at the footer is safer than chasing the
   individual vector widths, and `clip` does not create a scroll container the
   way `hidden` would. */
@media (max-width: 760px) {
  .site-footer {
    overflow-x: clip;
  }

  .site-footer__vector {
    max-width: 60vw;
  }
}


/* ==========================================================================
   Service pages - mobile vertical rhythm (11 Sept, second pass)
   ==========================================================================
   Section separations on mobile ranged from 0 to 160px (82 / 78 / 124 / 144 /
   153 / 160 measured on the offshore page), because most sections carry
   hard-coded margins and paddings instead of the spacing token that already
   exists. Route them all through --ry-service-section-space so the rhythm is
   consistent by construction, and tighten it for small screens.
   ========================================================================== */

@media (max-width: 760px) {
  :root {
    --ry-service-section-space: 44px;
  }

  /* One step between sections. Where a section sits directly against another
     padded section, each side contributes half the step so the pair reads as a
     single 44px gap instead of two stacked ones - that double-up was producing
     the 88 / 100 / 108px gaps. Sides that face an unpadded neighbour (the
     full-bleed scroll sections) keep the full step. */
  /* `.offshore-page` is on <main> for all six service pages, so these two-class
     selectors outrank the per-page `.service-page--onshore` / `--rtt` /
     `--mobile-testing` overrides that were re-introducing 56 / 64 / 0px values
     and breaking the rhythm on everything except the offshore page. */
  .offshore-page .offshore-stats-section,
  .offshore-page .offshore-deliverables-scroll {
    margin-top: var(--ry-service-section-space);
    margin-bottom: var(--ry-service-section-space);
  }

  .offshore-page .offshore-audience {
    padding-top: var(--ry-service-section-space);
    padding-bottom: calc(var(--ry-service-section-space) / 2);
  }

  .offshore-page .offshore-applications {
    padding-top: calc(var(--ry-service-section-space) / 2);
    padding-bottom: 0;
  }

  .offshore-why {
    padding-bottom: calc(var(--ry-service-section-space) / 2);
  }

  /* --figma variant carries its own 56/64px padding and needs the same
     specificity to be brought into the rhythm. */
  .offshore-contact,
  .offshore-contact.offshore-contact--figma {
    padding-top: calc(var(--ry-service-section-space) / 2);
    padding-bottom: calc(var(--ry-service-section-space) / 2);
  }

  .offshore-faq {
    padding-top: calc(var(--ry-service-section-space) / 2);
    padding-bottom: var(--ry-service-section-space);
  }

  /* Shared blocks reused at the foot of every service page. */
  .offshore-page .project-carousel-block {
    /* Full step at the top (the map above contributes nothing), half at the
       bottom against the news block's half. */
    padding-top: var(--ry-service-section-space);
    padding-bottom: calc(var(--ry-service-section-space) / 2);
  }

  .offshore-page .news-section {
    padding-top: calc(var(--ry-service-section-space) / 2);
  }

  /* The application stories were locked to `min-height: 100svh` while holding a
     340px image and ~300px of copy - roughly 200px of forced emptiness per
     card, three cards deep. Let them close around their content. */
  .offshore-application,
  .offshore-application--reverse {
    min-height: 0;
    height: auto;
  }

  .offshore-application__copy {
    padding: 28px 20px 32px;
  }
}

/* ==========================================================================
   2027 certification strip — academy heroes + /certifications/ hero
   Both now render the single shared asset assets/images/footer/certifications-2027.svg
   (NEN · SCL · VCA · ISO 9001 · ISO 45001 · ISO 14001 · DNV), whitened in CSS.
   NEN 4400-1 and VCU are retired, so the old split-window markup is gone.
   ========================================================================== */

/* Academy hero: whiten the grey strip and keep it legible over the photo. */
.academy-hero__certs {
  width: min(620px, 72vw);
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

@media (max-width: 1080px) {
  .academy-hero__certs {
    width: min(560px, 66vw);
  }
}

@media (max-width: 760px) {
  .academy-hero__certs {
    width: min(520px, 82vw);
  }
}

/* /certifications/ hero: one strip, centred in the navy plate. */
.certifications-hero__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
}

.certifications-hero__logos-strip {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

@media (max-width: 560px) {
  .certifications-hero__logos {
    width: 100%;
    transform: none;
  }
}

/* ==========================================================================
   Homepage client logo marquee

   Each set contains the same ten visible client logos. The trailing padding
   matches the inter-logo gap exactly, so Van Oord is followed by nSEA with
   the same spacing as every other pair as the duplicate set takes over.
   ========================================================================== */

@media (min-width: 561px) {
  .client-strip__track {
    animation-duration: 42s;
  }
}

/* The two identical logo sets meet at this exact gap. */
.client-strip__track {
  --client-strip-gap: clamp(64px, 5vw, 112px);
}

.client-strip__set {
  flex: 0 0 auto;
}

.client-strip__set li {
  min-width: 0;
}

@media (max-width: 560px) {
  .client-strip__track {
    --client-strip-gap: 32px;
    animation-duration: 12s;
  }
}

/* ==========================================================================
   HTML sitemap (/sitemap/)
   Generated page — see inc/sitemap.php. Sections are a responsive grid of
   link columns; the jump nav at the top is a chip row.
   ========================================================================== */

.sitemap-page {
  padding-bottom: clamp(64px, 8vw, 120px);
}

.sitemap-jump {
  width: min(1180px, calc(100% - 40px));
  margin: clamp(24px, 3vw, 40px) auto 0;
}

.sitemap-jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.sitemap-jump a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 9px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #282262;
  text-decoration: none;
  border: 1px solid rgba(40, 34, 98, 0.16);
  border-radius: 999px;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.sitemap-jump a:hover,
.sitemap-jump a:focus-visible {
  color: #fff;
  background: #282262;
  border-color: #282262;
}

.sitemap-jump__count {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.62;
}

.sitemap-content {
  width: min(1180px, calc(100% - 40px));
  margin: clamp(32px, 4vw, 56px) auto 0;
}

.sitemap-section {
  padding-top: clamp(28px, 3.4vw, 44px);
  border-top: 1px solid rgba(40, 34, 98, 0.12);
}

.sitemap-section + .sitemap-section {
  margin-top: clamp(28px, 3.4vw, 44px);
}

.sitemap-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.sitemap-section__intro h2 {
  margin: 0 0 6px;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

.sitemap-section__intro p {
  max-width: 62ch;
  margin: 0 0 clamp(16px, 2vw, 24px);
  color: rgba(31, 31, 41, 0.68);
}

.sitemap-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px 28px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.sitemap-list a {
  display: block;
  padding: 3px 0;
  color: #1f1f29;
  text-decoration: none;
  overflow-wrap: anywhere;
  border-bottom: 1px solid transparent;
}

.sitemap-list a:hover,
.sitemap-list a:focus-visible {
  color: #f36c21;
  border-bottom-color: currentcolor;
}

.sitemap-total,
.sitemap-empty {
  width: min(1180px, calc(100% - 40px));
  margin: clamp(28px, 3.4vw, 44px) auto 0;
  font-size: 0.9rem;
  color: rgba(31, 31, 41, 0.58);
}

@media (max-width: 560px) {
  .sitemap-jump,
  .sitemap-content,
  .sitemap-total,
  .sitemap-empty {
    width: calc(100% - 32px);
  }

  .sitemap-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  .site-header__actions {
    display: none;
  }

  .site-header.is-open .site-header__actions {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    gap: 12px;
    padding: 4px 0 18px;
  }

  .site-header.is-open .site-header__actions .language-toggle {
    justify-self: center;
  }

  .site-header.is-open .site-header__actions .header-cta {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    margin: 0;
  }
}

/* =======================================================================
   Dutch copy resilience

   Dutch technical terminology routinely contains long compound words. Never
   let a heading, label or button run outside its own column. `manual`
   preserves intentional dashes in the copy while avoiding automatic browser
   hyphenation such as "HOOGSPAN-NING".
   ======================================================================= */

html[lang="nl-NL"] body :is(h1, h2, h3, h4, p, li, summary, figcaption, .button) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: manual;
}

html[lang="nl-NL"] .equipment-hero h1 {
  overflow-wrap: anywhere;
  hyphens: manual;
}

/* Course names such as "HV-kabelmonteur" are wider than their English
   equivalent at the original desktop display scale. Keep the two-line hero
   treatment, while leaving enough room for the Dutch terms. */
html[lang="nl-NL"] .academy-hero h1 {
  font-size: clamp(3rem, 5vw, 4.6rem);
}

html[lang="nl-NL"] .academy-hero h1 span {
  white-space: normal;
}

@media (max-width: 760px) {
  /* These title lines are deliberately split in the markup on desktop. Let a
     translated line wrap when it needs to rather than clipping it. */
  html[lang="nl-NL"] :is(
    .contact-hero h1 span,
    .hero--home h1 span,
    .services-grid .service-card h2 span
  ) {
    white-space: normal;
  }

  html[lang="nl-NL"] :is(.career-hero h1, .article-hero h1) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* A grid item's automatic minimum width kept the service form at its
     desktop intrinsic width (427px) inside a 390px viewport. */
  .reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__panel,
  .reynard-offshore-service-page .offshore-contact--service-standard .offshore-contact__form,
  .reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form__fields,
  .reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form__details,
  .reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form__consent {
    min-width: 0;
    max-width: 100%;
  }

  .reynard-offshore-service-page .offshore-contact--service-standard .contact-page-form {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .reynard-offshore-service-page .offshore-contact--service-standard :is(input, textarea, .contact-page-form__submit) {
    box-sizing: border-box;
    max-width: 100%;
  }
}

/* =======================================================================
   Fibre Optics training — dedicated interest-registration page
   ======================================================================= */

.fo-training-page {
  overflow: clip;
  background: #f4f4f5;
  color: var(--color-ink);
}

.fo-training__eyebrow {
  margin: 0;
  color: var(--color-orange);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
}

.fo-training-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(112px, 14vw, 188px) 0 clamp(64px, 9vw, 116px);
  background: var(--color-blue);
  color: var(--color-white);
  isolation: isolate;
}

.fo-training-hero::before,
.fo-training-hero::after {
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  content: "";
  pointer-events: none;
}

.fo-training-hero::before {
  top: -35vw;
  right: -15vw;
  width: min(68vw, 960px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 min(4vw, 62px) rgba(255, 255, 255, 0.05), 0 0 0 min(8vw, 126px) rgba(255, 255, 255, 0.035);
}

.fo-training-hero::after {
  bottom: -11vw;
  left: -4vw;
  width: min(24vw, 350px);
  aspect-ratio: 1;
  background: var(--color-orange);
  opacity: 0.94;
}

.fo-training-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 350px);
  gap: clamp(42px, 9vw, 150px);
  align-items: end;
  width: min(100% - 96px, 1230px);
  margin: 0 auto;
}

.fo-training-hero__copy {
  max-width: 760px;
}

.fo-training-hero .fo-training__eyebrow {
  color: var(--color-orange);
}

.fo-training-hero h1 {
  max-width: 10.8ch;
  margin: 16px 0 26px;
  color: inherit;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7.2vw, 7.25rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.84;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.fo-training-hero h1 span {
  display: block;
}

.fo-training-hero h1 span:last-child {
  margin-top: 0.18em;
  color: var(--color-orange);
  font-size: 0.56em;
  letter-spacing: -0.035em;
  line-height: 0.96;
}

.fo-training-hero__copy > p:not(.fo-training__eyebrow) {
  max-width: 39rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.08rem, 1.7vw, 1.35rem);
  font-weight: 600;
  line-height: 1.22;
}

.fo-training-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.fo-training-hero__actions .button {
  min-width: 178px;
}

.fo-training-hero__pilot {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 3vw, 38px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(12px);
}

.fo-training-hero__pilot h2 {
  margin: 14px 0 10px;
  color: var(--color-white);
  font-size: clamp(1.8rem, 2.7vw, 2.7rem);
  font-weight: 900;
  line-height: 0.93;
  overflow-wrap: anywhere;
}

.fo-training-hero__pilot > p:last-child {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.98rem;
  font-weight: 700;
}

.fo-training-overview {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(340px, 1.16fr);
  gap: clamp(48px, 10vw, 160px);
  width: min(100% - 96px, 1230px);
  margin: 0 auto;
  padding: clamp(76px, 10vw, 144px) 0;
}

.fo-training-overview__intro h2,
.fo-training-register__heading h2,
.fo-training-contact h2 {
  margin: 13px 0 20px;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 4.3vw, 4.6rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.87;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.fo-training-overview__intro > p:last-child,
.fo-training-register__heading > p,
.fo-training-contact > p {
  max-width: 44rem;
  margin: 0;
  color: #53555d;
  font-size: clamp(1.05rem, 1.55vw, 1.28rem);
  font-weight: 600;
  line-height: 1.32;
}

.fo-training-overview__steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(38, 34, 98, 0.22);
}

.fo-training-overview__steps li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 20px;
  padding: 25px 0;
  border-bottom: 1px solid rgba(38, 34, 98, 0.22);
}

.fo-training-overview__steps span {
  color: var(--color-orange);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 900;
}

.fo-training-overview__steps h3 {
  margin: 0 0 6px;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
}

.fo-training-overview__steps p {
  max-width: 38rem;
  margin: 0;
  color: #53555d;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.fo-training-register {
  display: grid;
  grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(48px, 9vw, 144px);
  width: min(100% - 96px, 1230px);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 124px) 0;
  scroll-margin-top: 32px;
}

.fo-training-register__form {
  min-width: 0;
  padding: clamp(24px, 4vw, 48px);
  border-top: 6px solid var(--color-orange);
  background: var(--color-white);
  box-shadow: 0 18px 46px rgba(31, 31, 41, 0.09);
}

.fo-training-register__form .wpforms-reskin,
.fo-training-register__form .wpforms-container,
.fo-training-register__form .wpforms-form {
  width: 100%;
  max-width: none;
  margin: 0;
}

.fo-training-register__form .wpforms-page-indicator {
  margin: 0 0 26px !important;
}

.fo-training-register__form .wpforms-page-indicator-page-title {
  color: var(--color-orange) !important;
}

.fo-training-register__form .wpforms-submit-container {
  justify-content: flex-start;
}

.fo-training-register__fallback {
  max-width: 36rem;
}

.fo-training-register__fallback h3 {
  margin: 0 0 12px;
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  font-weight: 900;
  line-height: 1;
}

.fo-training-register__fallback p {
  margin: 0;
  color: #53555d;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.fo-training-register__fallback .button {
  margin-top: 24px;
}

.fo-training-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(54px, 7vw, 92px) max(48px, calc((100vw - 1230px) / 2));
  background: var(--color-orange);
}

.fo-training-contact .fo-training__eyebrow,
.fo-training-contact h2,
.fo-training-contact > p,
.fo-training-contact > p a {
  color: var(--color-white);
}

.fo-training-contact h2 {
  max-width: 15ch;
  margin-bottom: 0;
}

.fo-training-contact > p {
  max-width: 26rem;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
}

.fo-training-contact > p a {
  font-weight: 900;
  text-decoration-color: currentcolor;
  text-underline-offset: 0.16em;
}

@media (max-width: 920px) {
  .fo-training-hero__inner,
  .fo-training-overview,
  .fo-training-register {
    grid-template-columns: 1fr;
  }

  .fo-training-hero__inner,
  .fo-training-overview,
  .fo-training-register {
    gap: 42px;
    width: min(100% - 48px, 680px);
  }

  .fo-training-hero__pilot {
    max-width: 440px;
  }

  .fo-training-contact {
    padding-right: 24px;
    padding-left: 24px;
  }
}

@media (max-width: 600px) {
  .fo-training-hero {
    padding-top: 104px;
  }

  .fo-training-hero::before {
    top: -28vw;
    right: -35vw;
    width: 94vw;
  }

  .fo-training-hero::after {
    bottom: -16vw;
    left: -14vw;
    width: 44vw;
  }

  .fo-training-hero__inner,
  .fo-training-overview,
  .fo-training-register {
    width: calc(100% - 32px);
  }

  .fo-training-hero h1 {
    font-size: clamp(3.1rem, 15vw, 4.6rem);
  }

  .fo-training-hero__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .fo-training-hero__actions .button {
    min-width: 0;
    padding-right: 8px;
    padding-left: 8px;
  }

  .fo-training-overview__steps li {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
  }

  .fo-training-register__form {
    padding: 24px 18px;
  }

  .fo-training-contact {
    align-items: flex-start;
  }
}