/* ==========================================================================
   Laboplex theme for the Dewi template
   Loads AFTER assets/css/main.css and overrides it. Dewi's own file is left
   untouched, so you can compare the two and see what changed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand tokens
   Swap --lab-forest / --lab-emerald for the exact greens in the client's logo.
   -------------------------------------------------------------------------- */
:root {
  --lab-forest: #064e3b;        /* headings, buttons, main text accents */
  --lab-emerald: #10b981;       /* highlights only: lines and underlines, never text */
  --lab-emerald-deep: #047857;  /* green that is safe for text, links and focus rings */
  --lab-ink: #2e3d39;           /* body text */
  --lab-muted: #56655f;         /* secondary text */
  --lab-mist: #f5f5f5;          /* alternate section background (same grey as Canva) */
  --lab-line: #dce3e0;          /* hairlines */
  --lab-field: #c9d4d0;         /* form borders */
  --lab-white: #ffffff;
  --header-h: 76px;
  --lab-radius: clamp(12px, 1.4vw, 20px);  /* rounded photo corners (About, Services, Industries) */
}

/* Dewi's font variables */
:root {
  --default-font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --heading-font: "Lora", Georgia, "Times New Roman", serif;
  --nav-font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Dewi's colour variables, pointed at the brand tokens */
:root {
  --background-color: var(--lab-white);
  --default-color: var(--lab-ink);
  --heading-color: var(--lab-forest);
  --accent-color: var(--lab-forest);
  --surface-color: var(--lab-white);
  --contrast-color: var(--lab-white);
  --nav-color: var(--lab-forest);
  --nav-hover-color: var(--lab-emerald);
  --nav-mobile-background-color: var(--lab-white);
  --nav-dropdown-background-color: var(--lab-white);
  --nav-dropdown-color: var(--lab-forest);
  --nav-dropdown-hover-color: var(--lab-emerald-deep);
  color-scheme: light; /* the client wants a light site only */
}

.light-background {
  --background-color: var(--lab-mist);
  --surface-color: var(--lab-white);
}

/* Keep content clear of phone notches and home bars */
:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
  background-color: var(--lab-white);
  color: var(--lab-ink);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-weight: 500;
  letter-spacing: -0.01em;
}

a {
  color: var(--lab-emerald-deep);
}

a:hover {
  color: var(--lab-forest);
}

:focus-visible {
  outline: 2px solid var(--lab-emerald-deep);
  outline-offset: 3px;
}

::selection {
  background: #d1fae5;
  color: var(--lab-forest);
}

img {
  max-width: 100%;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 10000;
  background: var(--lab-forest);
  color: var(--lab-white);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
}

.skip-link:focus {
  top: calc(12px + env(safe-area-inset-top, 0px));
  color: var(--lab-white);
}

/* Sections: roomier than Dewi's 60px */
.section {
  padding: clamp(72px, 9vw, 128px) 0;
  scroll-margin-top: calc(var(--header-h) + 12px);
}

.section-heading {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.4vw, 4.25rem);
  line-height: 1.08;
  color: var(--lab-forest);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   3. Header (Dewi's fixed header, made light)
   -------------------------------------------------------------------------- */
.header {
  --background-color: rgba(255, 255, 255, 0.86);
  --default-color: var(--lab-forest);
  --heading-color: var(--lab-forest);
  min-height: var(--header-h);
  padding: calc(12px + env(safe-area-inset-top, 0px)) 0 12px;
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}

.scrolled .header {
  --background-color: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--lab-line);
  box-shadow: none;
}

.header .logo .sitename {
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--lab-forest);
}

.header .cta-btn,
.header .cta-btn:focus {
  align-items: center;
  color: var(--lab-white);
  background: var(--lab-forest);
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  margin: 0 0 0 28px;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: none;
}

.header .cta-btn:hover,
.header .cta-btn:focus:hover {
  color: var(--lab-white);
  background: var(--lab-emerald-deep);
}

@media (max-width: 1200px) {
  .header .cta-btn,
  .header .cta-btn:focus {
    margin: 0 12px 0 0;
    padding: 8px 18px;
  }
}

/* Desktop menu: sentence case instead of Dewi's small caps, emerald underline kept */
@media (min-width: 1200px) {
  .navmenu > ul > li {
    padding: 15px 16px;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--lab-forest);
    font-size: 0.97rem;
    font-weight: 500;
    text-transform: none;
  }

  .navmenu li:hover > a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--lab-forest);
  }

  .navmenu > ul > li > a:before {
    bottom: -8px;
    background-color: var(--lab-emerald);
  }
}

/* Mobile menu: the full-screen white menu from the Canva design */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    color: var(--lab-forest);
    font-size: 30px;
    line-height: 0;
  }

  /* backdrop-filter would trap the fixed menu inside the header, so drop it while open */
  .mobile-nav-active .header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    inset: 0;
    background: var(--lab-white);
    overflow-y: auto;
  }

  .mobile-nav-active .navmenu > ul {
    display: flex;
    flex-direction: column;
    position: static;
    inset: auto;
    margin: 0;
    padding: calc(var(--header-h) + 28px + env(safe-area-inset-top, 0px)) 28px calc(40px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .navmenu a,
  .navmenu a:focus {
    font-family: var(--heading-font);
    font-size: clamp(2.25rem, 9vw, 3.5rem);
    font-weight: 400;
    line-height: 1.15;
    padding: 6px 0;
    color: var(--lab-forest);
    white-space: normal;
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--lab-emerald-deep);
  }

  .navmenu .nav-cta-item {
    margin-top: 32px;
  }

  .navmenu a.nav-cta,
  .navmenu a.nav-cta:focus {
    display: inline-flex;
    font-family: var(--default-font);
    font-size: 1rem;
    font-weight: 600;
    color: var(--lab-white);
    background: var(--lab-forest);
    border-radius: 999px;
    padding: 12px 26px;
  }

  .mobile-nav-active .mobile-nav-toggle {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top, 0px));
    right: 16px;
    color: var(--lab-forest);
    font-size: 34px;
    z-index: 9999;
  }
}

.hero {
  --hero-ink: #03241b;          /* deep forest, the colour of the overlay */
  --hero-mint: #6ee7b7;         /* light emerald, readable on the dark photo */
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 40px) 0 72px;
  background: var(--hero-ink);  /* shows while the photo loads */
  text-align: center;
}

.hero img {
  object-position: center 40%;
}

/* The background video fills the hero the same way Dewi's photo does */
.hero .hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dewi's grey overlay, tinted forest green and a little darker at top and bottom */
.hero:before {
  background: linear-gradient(
    180deg,
    rgba(3, 36, 27, 0.82) 0%,
    rgba(3, 36, 27, 0.66) 45%,
    rgba(3, 36, 27, 0.88) 100%
  );
}

.hero-content > * {
  animation: lab-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero-content > :nth-child(2) { animation-delay: 0.1s; }
.hero-content > :nth-child(3) { animation-delay: 0.25s; }
.hero-content > :nth-child(4) { animation-delay: 0.4s; }

.hero .hero-tagline {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hero-mint);
  text-wrap: balance;
}

.hero .hero-title {
  margin: 0;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: clamp(2.75rem, 7.5vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--lab-white);
  text-wrap: balance;
}

.hero .hero-lead {
  max-width: 38ch;
  margin: 1.25rem auto 0;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  text-wrap: balance;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2rem;
  margin-top: 2.25rem;
}

/* Dewi's solid "Get Started" button, as a white pill so it stands out on the green */
.btn-hero {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--lab-forest);
  background: var(--lab-white);
  border-radius: 999px;
  transition: background-color 0.25s, color 0.25s;
}

.btn-hero:hover,
.btn-hero:focus-visible {
  color: var(--lab-forest);
  background: #d1fae5;
}

/* Dewi's "Watch Video" link: icon in a ring, then the label */
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--lab-white);
}

.hero-link i {
  font-size: 2rem;
  line-height: 0;
  color: var(--hero-mint);
  transition: transform 0.25s;
}

.hero-link:hover,
.hero-link:focus-visible {
  color: var(--hero-mint);
}

.hero-link:hover i {
  transform: translateX(4px);
}

.hero :focus-visible {
  outline-color: var(--hero-mint);
}

@keyframes lab-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

@keyframes lab-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Header over the hero: see-through with white text, as in Dewi.
   It goes back to the white header as soon as the page scrolls
   (laboplex.js adds .scrolled) or the mobile menu opens. */
.index-page:not(.scrolled):not(.mobile-nav-active) .header {
  --background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.index-page:not(.scrolled):not(.mobile-nav-active) .header .logo .sitename,
.index-page:not(.scrolled):not(.mobile-nav-active) .mobile-nav-toggle {
  color: var(--lab-white);
}

.index-page:not(.scrolled):not(.mobile-nav-active) .header .cta-btn {
  color: var(--lab-forest);
  background: var(--lab-white);
}

.index-page:not(.scrolled):not(.mobile-nav-active) .header .cta-btn:hover {
  color: var(--lab-forest);
  background: #d1fae5;
}

@media (min-width: 1200px) {
  .index-page:not(.scrolled) .navmenu a,
  .index-page:not(.scrolled) .navmenu a:focus,
  .index-page:not(.scrolled) .navmenu li:hover > a,
  .index-page:not(.scrolled) .navmenu .active {
    color: var(--lab-white);
  }
}

@media (max-width: 575.98px) {
  .hero-actions {
    flex-direction: column;
    gap: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   5. About
   -------------------------------------------------------------------------- */
.about .lead-copy {
  max-width: 46ch;
  margin-bottom: 2.25rem;
  font-size: 1.15rem;
  line-height: 1.7;
}

.about .lead-copy strong {
  color: var(--lab-forest);
  font-weight: 600;
}

.brand-list {
  position: relative;
  padding-top: 1.25rem;
}

/* the line above the brands (a separate layer so it can draw itself in) */
.brand-list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--lab-line);
  transform-origin: left center;
}

.brand-list-label {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  color: var(--lab-muted);
}

.brand-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand-list li {
  font-family: var(--heading-font);
  font-size: 1.35rem;
  color: var(--lab-forest);
}

.about-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 6px;
}

.collage-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* the lower photo stretches so both columns end level */
.collage-col img:last-child {
  flex: 1;
  min-height: 0;
  object-fit: cover;
}

.about-collage img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--lab-radius);
}

/* About: scroll animations (laboplex.js block 7 adds .has-motion to the section)
   Everything here follows the scroll position directly: scroll down and it
   plays, scroll back up and it plays backwards, stop and it stops. No timers.
   - --t on each [data-scrub] element: 0 = hidden, 1 = in place. Its group
     (the text column, or the photo collage) plays through as the group's top
     rises from the bottom of the screen to 40% of the way down; data-scrub in
     the HTML sets when each element starts within that.
   - --enter on the section: its grey panel widens out of the dark hero colour
   - --drift on the section: the two photo columns drift in opposite directions */
.about.has-motion {
  --enter: 1;
  --drift: 0;
  position: relative;
  isolation: isolate;
  background: #03241b; /* the hero's dark green, showing either side of the panel */
}

.about.has-motion::before {
  content: "";
  position: absolute;
  inset: 0 calc((1 - var(--enter)) * clamp(12px, 5vw, 72px));
  z-index: -1;
  background: var(--lab-mist);
  border-radius: calc((1 - var(--enter)) * 56px) calc((1 - var(--enter)) * 56px) 0 0;
}

.has-motion [data-scrub] {
  --t: 0;
}

/* Heading: each word slides up out of its own mask */
.has-motion .reveal-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* room for letters that hang below the line, like the y in "Years" */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.has-motion .reveal-word > span {
  display: inline-block;
  transform: translateY(calc((1 - var(--t)) * 115%));
}

/* Text and brands rise and fade in; the line above the brands draws across */
.has-motion .lead-copy,
.has-motion .brand-list-label,
.has-motion .brand-list li {
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * 28px));
}

.has-motion .brand-list::before {
  transform: scaleX(var(--t));
}

/* Photos: wipe open (left column from the bottom, right column from the top)
   while zooming back to size. The side insets stop the zoomed photo spilling
   past its own box. --u is how much is still left to go. */
.has-motion .about-collage img {
  --u: calc(1 - var(--t));
  clip-path: inset(calc(var(--u) * 100%) calc(var(--u) * 5%) calc(var(--u) * 5%) round var(--lab-radius));
  transform: scale(calc(1 + var(--u) * 0.1));
}

.has-motion .collage-col:last-child img {
  clip-path: inset(calc(var(--u) * 5%) calc(var(--u) * 5%) calc(var(--u) * 100%) round var(--lab-radius));
}

/* While you scroll past, the columns drift in opposite directions */
.has-motion .collage-col {
  transform: translateY(calc(var(--drift) * 28px));
}

.has-motion .collage-col:last-child {
  transform: translateY(calc(var(--drift) * -28px));
}

/* --------------------------------------------------------------------------
   6. Services (Dewi's cards with the overlapping icon)
   -------------------------------------------------------------------------- */
.services .section-heading {
  max-width: 24ch;
  margin: 0 auto clamp(3rem, 5vw, 4.5rem);
}

.services .service-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.services .img {
  border-radius: var(--lab-radius);
}

.services .img img {
  display: block;
  width: 100%;
  aspect-ratio: 387 / 454;
  object-fit: cover;
}

.services .details {
  flex: 1;
  margin: -72px 16px 0;
  padding: 50px 22px 28px;
  border-radius: calc(var(--lab-radius) / 2); /* slightly rounder than square, softer than the photos */
  background: var(--lab-white);
  box-shadow: 0 26px 50px -30px rgba(6, 78, 59, 0.45);
}

.services .details .icon {
  width: 64px;
  height: 64px;
  top: -32px;
  left: calc(50% - 32px);
  font-size: 24px;
  background: var(--lab-forest);
  border: 5px solid var(--lab-white);
  transition-property: background-color, border-color, border-width;
}

.services .details h3 {
  margin: 6px 0 10px;
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--lab-forest);
  transition-property: color;
}

.services .details p {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--lab-ink);
}

.services .service-item:hover .details h3 {
  color: var(--lab-emerald-deep);
}

.services .service-item:hover .details .icon {
  background: var(--lab-white);
  border: 2px solid var(--lab-forest);
}

.services .service-item:hover .details .icon i {
  color: var(--lab-forest);
}

.services .service-item:hover .img img {
  transform: scale(1.06);
}

/* Hover: the photo and the white box lift together with a slow, springy
   bounce, and settle back the same way when the pointer leaves. The card
   itself stays put, so the pointer can't slip off its edge mid-bounce.
   The linear() curve is a spring (it overshoots, dips and settles); older
   browsers that don't know linear() get the simpler overshoot before it.
   Only `translate` is animated: the scroll animations below use `transform`. */
.services .img,
.services .details {
  transition: translate 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-timing-function: linear(0, 0.075, 0.26, 0.498, 0.741, 0.952, 1.111, 1.21, 1.251, 1.245, 1.206, 1.149, 1.087, 1.029, 0.984, 0.954, 0.938, 0.936, 0.943, 0.957, 0.973, 0.988, 1, 1.01, 1.015, 1.016, 1.015, 1.012, 1);
}

@media (hover: hover) {
  .services .service-item:hover .img,
  .services .service-item:hover .details {
    translate: 0 -12px;
  }
}

/* Show the keyboard focus on the whole card, not just the title, and lift it too */
.services .stretched-link:focus-visible {
  outline: none;
}

.services .service-item:has(.stretched-link:focus-visible) {
  outline: 2px solid var(--lab-emerald-deep);
  outline-offset: 6px;
}

.services .service-item:has(.stretched-link:focus-visible) .img,
.services .service-item:has(.stretched-link:focus-visible) .details {
  translate: 0 -12px;
}

/* Services: scroll animations (laboplex.js block 7 adds .has-motion, the same
   way as About, and the heading's words slide up the same way too)
   - --enter / --leave on the section: it fades in (rising a little) as it
     comes up the screen, and fades out (shrinking a little) as you move on
   - --t on each [data-scrub] element, as in About. Each card is a group of
     its own, and cards side by side start one after another.
   - The photo fades in with a soft edge that sweeps down it on odd cards and
     up it on even cards, sliding the same way into place. The white box
     follows from the same side, then the icon pops in and the text rises
     like About's. */
.services.has-motion {
  --enter: 1;
  --leave: 0;
}

.services.has-motion > .container {
  opacity: calc(var(--enter) * (1 - var(--leave)));
  transform: translateY(calc((1 - var(--enter)) * 48px)) scale(calc(1 - var(--leave) * 0.06));
  transform-origin: 50% 100%;
}

/* --from: -1 = comes down from above, 1 = comes up from below.
   --sweep: which way the soft edge travels (180deg = downwards, 0deg = upwards) */
.services.has-motion .row > :nth-child(odd) {
  --from: -1;
  --sweep: 180deg;
}

.services.has-motion .row > :nth-child(even) {
  --from: 1;
  --sweep: 0deg;
}

.services.has-motion .img {
  -webkit-mask-image: linear-gradient(var(--sweep), #000 calc(var(--t) * 150% - 50%), transparent calc(var(--t) * 150%));
  mask-image: linear-gradient(var(--sweep), #000 calc(var(--t) * 150% - 50%), transparent calc(var(--t) * 150%));
  transform: translateY(calc((1 - var(--t)) * var(--from) * 56px));
}

.services.has-motion .details {
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * var(--from) * 40px));
}

.services.has-motion .details .icon {
  opacity: var(--t);
  transform: scale(calc(0.5 + var(--t) * 0.5));
}

.services.has-motion .details h3,
.services.has-motion .details p {
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * 28px));
}

/* --------------------------------------------------------------------------
   7. Process
   -------------------------------------------------------------------------- */
.process-intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.process-intro .section-heading {
  max-width: 9ch;
  font-size: clamp(2.5rem, 5.2vw, 5rem);
  line-height: 1.05;
}

.starburst {
  width: clamp(88px, 9vw, 132px);
  height: auto;
  margin-top: 2rem;
  fill: var(--lab-forest);
}

.process-figure {
  margin: 0 0 2.5rem;
}

.process-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.process-subtitle {
  margin-bottom: 1.25rem;
  font-family: var(--heading-font);
  font-size: 1.6rem;
  font-weight: 500;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  position: relative;
  padding-top: 1rem;
  border-top: 2px solid var(--lab-line);
}

.steps li::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--lab-emerald);
}

.step-number {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--lab-emerald-deep);
}

.steps h4 {
  margin: 0 0 0.35rem;
  font-family: var(--heading-font);
  font-size: 1.25rem;
  font-weight: 500;
}

.steps p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

@media (max-width: 991.98px) {
  .process-intro .section-heading {
    max-width: none;
  }

  .starburst {
    width: 72px;
    margin-top: 0.5rem;
  }

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

@media (max-width: 575.98px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   8. Industries: photo collage with a slideshow in the middle tile
   Phones and tablets get a plain grid. Desktop gets the collage, and with
   .has-zoom (added by laboplex.js block 6) it pins while you scroll. The
   script sets the track's height (how long it stays pinned) and:
     --zoom  0 = collage, 1 = zoomed in around the slideshow
     --exit  0 = pinned, 1 = scrolled past and faded out
   -------------------------------------------------------------------------- */
.industries {
  --show-ink: #03241b;         /* deep forest behind and over the photos */
  --show-mint: #6ee7b7;        /* light emerald, readable on the dark photos */
  --slide-time: 6s;            /* how long each slide stays up */
  --tile-radius: var(--lab-radius);  /* rounded corners on the slideshow and tiles */
  --zoom-scale: 1.55;          /* how much bigger the collage gets when zoomed all the way in */
  --zoom: 0;
  --exit: 0;
}

.industries-heading {
  grid-area: head;
  max-width: 22ch;
  margin-bottom: clamp(0.5rem, 2vw, 1.25rem);
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "head head"
    "show show"
    "t1 t2"
    "t3 t4";
  gap: 10px;
}

/* The two extra collage photos only appear on desktop */
.industry-decor {
  display: none;
  overflow: hidden;
  border-radius: var(--tile-radius);
  background: var(--show-ink);
}

.industry-decor img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.industry-tile:nth-of-type(1) { grid-area: t1; }
.industry-tile:nth-of-type(2) { grid-area: t2; }
.industry-tile:nth-of-type(3) { grid-area: t3; }
.industry-tile:nth-of-type(4) { grid-area: t4; }

/* The slideshow */
.industries-show {
  grid-area: show;
  position: relative;
  z-index: 2;
  min-height: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate; /* keeps the zooming photos inside the rounded corners in Safari */
  border-radius: var(--tile-radius);
  color: var(--lab-white);
  background: var(--show-ink);
}

.industry-slide {
  position: absolute;
  inset: 0;
  isolation: isolate; /* keeps each slide's caption with its own photo when two overlap */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}

.industry-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s ease, visibility 0s;
}

.industry-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 7s ease-out;
}

.industry-slide.is-active img {
  transform: scale(1);
}

/* Darkens the bottom, behind the caption and the slide number */
.industry-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(3, 36, 27, 0.92) 0%, rgba(3, 36, 27, 0.5) 36%, rgba(3, 36, 27, 0) 64%);
}

/* Title, info and button, bottom left; they grow a little as the tile does */
.industry-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  max-width: calc(36rem + var(--zoom) * 12rem);
  padding: calc(clamp(20px, 2.4vw, 32px) + var(--zoom) * 20px);
  padding-bottom: calc(clamp(24px, 2.8vw, 36px) + var(--zoom) * 24px);
}

.industry-caption > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.is-active .industry-caption > * { opacity: 1; transform: none; }
.is-active .industry-caption > :nth-child(1) { transition-delay: 0.3s; }
.is-active .industry-caption > :nth-child(2) { transition-delay: 0.4s; }
.is-active .industry-caption > :nth-child(3) { transition-delay: 0.5s; }

.industry-caption h3 {
  margin: 0 0 0.4rem;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: calc(clamp(1.6rem, 2.3vw, 2.25rem) + var(--zoom) * 1rem);
  line-height: 1.1;
  color: var(--lab-white);
}

.industry-caption p {
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

.industry-caption .btn-hero {
  padding: 0.75rem 1.6rem;
  font-size: 0.95rem;
}

/* Slide number, bottom right, lined up with the caption. The previous, pause and next
   buttons stay hidden; they appear only for someone moving through the page with the
   Tab key, so keyboard users can still pause the slideshow. */
.industry-controls {
  position: absolute;
  right: calc(clamp(20px, 2.4vw, 32px) + var(--zoom) * 20px);
  bottom: calc(clamp(24px, 2.8vw, 36px) + var(--zoom) * 24px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.industry-controls:not(:has(:focus-visible)) .industry-btn {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.industry-count {
  margin: 0 6px 0 0;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.86);
}

.industry-count span {
  color: var(--lab-white);
}

.industry-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1.1rem;
  color: var(--lab-white);
  background: rgba(3, 36, 27, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.2s, color 0.2s;
}

.industry-btn:hover {
  color: var(--lab-forest);
  background: var(--lab-white);
}

.industries-show :focus-visible {
  outline-color: var(--show-mint);
}

/* While the page scroll is choosing the slide (desktop, zoomed in), the cross-fade follows
   the scroll too. laboplex.js sets on each slide:
     --mix      the photo: 0 = hidden, 1 = fully shown
     --caption  its text: the old caption fades out in the first half of the cross-fade and
                the new one rises in during the second half, so they never overlap */
.is-scrubbing .industry-slide,
.is-scrubbing .industry-slide img,
.is-scrubbing .industry-caption > * {
  transition: none;
}

.is-scrubbing .industry-slide {
  opacity: var(--mix, 0);
}

.is-scrubbing .industry-slide.is-mixing {
  visibility: visible;
}

.is-scrubbing .industry-slide img {
  transform: scale(calc(1.08 - var(--mix, 0) * 0.08));
}

.is-scrubbing .industry-caption > * {
  opacity: var(--caption, 1);
  transform: translateY(calc((1 - var(--caption, 1)) * 16px));
}

/* Thin bar along the bottom edge that fills while a slide is up.
   laboplex.js moves to the next slide when it finishes. */
.industry-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
}

.industry-progress span {
  display: block;
  height: 100%;
  background: var(--show-mint);
  transform-origin: left center;
  animation: lab-progress var(--slide-time) linear both;
}

.industries-show.is-paused .industry-progress span {
  animation-play-state: paused;
}

@keyframes lab-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* The other industries */
.industry-tile {
  position: relative;
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  text-align: left;
  color: var(--lab-white);
  background: var(--show-ink);
  border: 0;
  border-radius: var(--tile-radius);
  cursor: pointer;
}

.industry-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
}

.industry-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(3, 36, 27, 0.85) 0%, rgba(3, 36, 27, 0) 55%);
  transition: background-color 0.3s;
}

.industry-tile-label {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 1;
  font-family: var(--heading-font);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.2;
  transition: opacity 0.25s ease;
}

.industry-tile:hover img {
  transform: scale(1.06);
}

.industry-tile:hover::after {
  background-color: rgba(3, 36, 27, 0.25);
}

/* While a tile swaps to another industry */
.industry-tile.is-changing img,
.industry-tile.is-changing .industry-tile-label {
  opacity: 0;
}

@media (min-width: 576px) {
  .industries-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "head head head head"
      "show show show show"
      "t1 t2 t3 t4";
  }

  .industries-show {
    aspect-ratio: 16 / 10;
  }

  .industry-tile {
    aspect-ratio: 3 / 4;
  }
}

/* Desktop: the collage. Four columns; the slideshow spans the middle two.
   Every piece is placed by --x, --y (top-left corner) and --w, --h (size),
   all as percentages of the collage, so the whole thing scales together.
     column lefts: 0, 25.45, 50.9, 76.35 (each 23.65 wide) */
@media (min-width: 992px) {
  .industries {
    /* the slideshow's place; the zoom centres on it */
    --c-x: 25.45;
    --c-y: 18.6;
    --c-w: 48.2;
    --c-h: 47;
  }

  .industries-grid {
    display: block;
    position: relative;
    height: clamp(560px, 80vh, 760px);
  }

  .industries-grid > * {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: calc(var(--w) * 1%);
    height: calc(var(--h) * 1%);
    aspect-ratio: auto;
  }

  /* Heading: in the gap above the slideshow, sitting on its top edge */
  .industries-heading {
    --x: 25.45; --y: 0; --w: 31; --h: 16.6;
    display: flex;
    align-items: flex-end;
    max-width: none;
    margin: 0;
    font-size: clamp(1.6rem, 2.5vw, 2.6rem);
    line-height: 1.08;
  }

  .industries-show {
    --x: var(--c-x); --y: var(--c-y); --w: var(--c-w); --h: var(--c-h);
  }

  /* Left column, then right column; each pair staggered */
  .industry-tile:nth-of-type(1) { --x: 0;     --y: 9;    --w: 23.65; --h: 42; }
  .industry-tile:nth-of-type(2) { --x: 0;     --y: 53.6; --w: 23.65; --h: 28; }
  .industry-tile:nth-of-type(3) { --x: 76.35; --y: 9;    --w: 23.65; --h: 31; }
  .industry-tile:nth-of-type(4) { --x: 76.35; --y: 42.6; --w: 23.65; --h: 45; }

  /* Small photo above the slideshow's right half, and one below its left half */
  .industry-decor { display: block; }
  .industry-decor-top    { --x: 58;    --y: 0;    --w: 16.55; --h: 16; }
  .industry-decor-bottom { --x: 25.45; --y: 68.2; --w: 23.65; --h: 31.8; }
}

/* Desktop: the pinned scroll zoom. The collage gets the whole screen (wider
   than the usual container), then grows around the slideshow: every piece
   keeps its place in the collage, so the side photos move out towards the
   screen edges and get cut off there, while text and buttons keep their size. */
.industries.has-zoom {
  padding-bottom: 0;
}

.has-zoom .industries-stage {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  padding: clamp(12px, 2.5vh, 24px) 0;
  overflow: hidden;
  opacity: calc(1 - var(--exit));
  transform: scale(calc(1 - var(--exit) * 0.06));
}

.has-zoom .industries-inner {
  position: relative;
  width: min(1560px, 100% - 2 * clamp(16px, 2.5vw, 40px));
  max-width: none;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}

.has-zoom .industries-grid {
  --s: calc(1 + var(--zoom) * (var(--zoom-scale) - 1));
  /* centre of the slideshow, as a fraction of the collage */
  --fx: calc((var(--c-x) + var(--c-w) / 2) / 100);
  --fy: calc((var(--c-y) + var(--c-h) / 2) / 100);
  position: absolute;
  width: calc(var(--s) * 100%);
  height: calc(var(--s) * 100%);
  /* moves the slideshow's centre to the middle of the screen as it zooms */
  left: calc((var(--fx) + (0.5 - var(--fx)) * var(--zoom) - var(--fx) * var(--s)) * 100%);
  top: calc((var(--fy) + (0.5 - var(--fy)) * var(--zoom) - var(--fy) * var(--s)) * 100%);
}

.has-zoom .industries-heading {
  opacity: calc(1 - var(--zoom) * 1.6);
}

/* --------------------------------------------------------------------------
   9. Instruments / Sales (Dewi's filter row, plain JavaScript instead of Isotope)
   -------------------------------------------------------------------------- */
.instruments-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 3rem;
  margin-bottom: 2rem;
}

.instruments-header .section-heading {
  max-width: 16ch;
  margin: 0;
}

.instruments-header p {
  max-width: 42ch;
  margin: 0;
  font-size: 1.05rem;
}

.instrument-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  margin: 0 0 2.5rem;
  border-bottom: 1px solid var(--lab-line);
}

.filter-btn {
  margin-bottom: -1px;
  padding: 0.6rem 0 0.85rem;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--default-font);
  font-size: 1rem;
  font-weight: 500;
  color: var(--lab-muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.filter-btn:hover {
  color: var(--lab-forest);
}

.filter-btn.is-active {
  color: var(--lab-forest);
  border-bottom-color: var(--lab-emerald);
}

.instrument-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 3.2vw, 44px) clamp(20px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.instrument[hidden] {
  display: none;
}

.instrument.is-entering {
  animation: lab-fade 0.35s ease both;
}

.instrument img {
  display: block;
  width: 100%;
  aspect-ratio: 527 / 258;
  object-fit: cover;
  margin-bottom: 1.1rem;
}

.instrument h3 {
  margin: 0 0 0.3rem;
  font-family: var(--heading-font);
  font-size: 1.3rem;
  font-weight: 500;
}

.instrument p {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.instrument-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lab-emerald-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

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

@media (max-width: 575.98px) {
  .instrument-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   10. Service request
   -------------------------------------------------------------------------- */
.request-figure {
  margin: 0;
}

.request-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 992px) {
  /* The photo stays in view while the form scrolls past it */
  .request-figure {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }

  .request-figure img {
    aspect-ratio: auto;
    height: min(calc(100vh - var(--header-h) - 48px), 880px);
  }

  .request-content {
    padding-left: clamp(0px, 2.5vw, 40px);
  }
}

.request-subtitle {
  max-width: 480px;
  margin: 0;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--lab-forest);
  font-family: var(--heading-font);
  font-size: 1.3rem;
  color: var(--lab-forest);
}

.request-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin: 2.25rem 0 2.75rem;
}

.request-steps h3 {
  margin-bottom: 0.9rem;
  font-family: var(--heading-font);
  font-size: 1.35rem;
  font-weight: 500;
}

.request-steps ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.request-steps li {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--lab-line);
  font-size: 0.98rem;
  counter-increment: step;
}

.request-steps li::before {
  content: counter(step);
  min-width: 1.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--lab-emerald-deep);
}

@media (max-width: 575.98px) {
  .request-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Form */
.request-form {
  padding: clamp(22px, 3vw, 36px);
  background: var(--lab-mist);
}

.request-form .form-label {
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--lab-forest);
}

.request-form .form-control,
.request-form .form-select {
  padding: 0.7rem 0.85rem;
  font-size: 1rem;
  color: var(--lab-ink);
  background-color: var(--lab-white);
  border: 1px solid var(--lab-field);
  border-radius: 0;
  box-shadow: none;
}

.request-form .form-select {
  padding-right: 2.25rem;
}

.request-form .form-control:focus,
.request-form .form-select:focus {
  border-color: var(--lab-forest);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.28);
}

.urgency {
  margin: 0;
  padding: 0;
  border: 0;
}

.urgency legend {
  float: none;
  width: auto;
}

.urgency-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.urgency .btn-check + label {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.15rem;
  font-weight: 500;
  color: var(--lab-forest);
  background: var(--lab-white);
  border: 1px solid var(--lab-field);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.urgency .btn-check:checked + label {
  color: var(--lab-white);
  background: var(--lab-forest);
  border-color: var(--lab-forest);
}

.urgency .btn-check:focus-visible + label {
  outline: 2px solid var(--lab-emerald-deep);
  outline-offset: 3px;
}

.btn-lab {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--lab-white);
  background: var(--lab-forest);
  border: 0;
  border-radius: 999px;
  transition: background-color 0.25s;
}

.btn-lab:hover {
  background: var(--lab-emerald-deep);
}

.form-status {
  min-height: 1.5em;
  margin: 0.75rem 0 0;
  font-size: 0.92rem;
  color: var(--lab-forest);
}

/* --------------------------------------------------------------------------
   11. Contact
   -------------------------------------------------------------------------- */
.contact-kicker {
  margin: 0 0 0.75rem;
  font-family: var(--heading-font);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--lab-forest);
}

.contact .section-heading {
  max-width: 16ch;
  margin-bottom: 2rem;
  font-size: clamp(2.5rem, 5vw, 4.75rem);
}

.consult-form {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 560px;
  border-bottom: 2px solid var(--lab-forest);
}

.consult-form input {
  flex: 1;
  min-width: 0;
  padding: 1rem 0;
  font-size: 1.1rem;
  color: var(--lab-ink);
  background: transparent;
  border: 0;
}

.consult-form input::placeholder {
  color: #6b7b77;
}

.consult-form button {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  font-size: 1.25rem;
  color: var(--lab-white);
  background: var(--lab-forest);
  border: 0;
  border-radius: 50%;
  transition: background-color 0.25s;
}

.consult-form button:hover {
  background: var(--lab-emerald-deep);
}

.contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--lab-field);
}

.contact-list li:first-child {
  padding-top: 0;
}

/* Dewi's dotted icon rings */
.contact-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  font-size: 1.3rem;
  color: var(--lab-emerald-deep);
  border: 2px dotted rgba(4, 120, 87, 0.55);
  border-radius: 50%;
}

.contact-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lab-muted);
}

.contact-value {
  display: block;
  font-family: var(--heading-font);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--lab-forest);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   12. Footer (Dewi's columns, light)
   -------------------------------------------------------------------------- */
.footer {
  --background-color: var(--lab-white);
  --default-color: var(--lab-ink);
  --heading-color: var(--lab-forest);
  font-size: 0.95rem;
}

.footer .footer-top {
  padding-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--lab-line);
}

.footer .footer-about .logo {
  margin-bottom: 1rem;
}

.footer .footer-about .logo .sitename {
  font-family: var(--heading-font);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lab-forest);
}

.footer .footer-about p {
  max-width: 36ch;
  font-family: var(--default-font);
  font-size: 0.95rem;
}

.footer-heading {
  margin-bottom: 0.75rem;
  font-family: var(--default-font);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--lab-forest);
}

.footer .footer-links ul li {
  padding: 5px 0;
}

.footer .footer-links ul a {
  color: var(--lab-ink);
}

.footer .footer-links ul a:hover {
  color: var(--lab-emerald-deep);
}

.footer .footer-contact p {
  margin: 0;
}

.footer .copyright {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 2.5rem;
  padding: 1.75rem 12px calc(1.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--lab-line);
  font-size: 0.88rem;
  text-align: left;
}

.footer .copyright p {
  margin: 0;
}

.footer .credits {
  padding-top: 0;
  font-size: 0.85rem;
  color: var(--lab-muted);
}

/* --------------------------------------------------------------------------
   13. Back-to-top button
   -------------------------------------------------------------------------- */
.scroll-top {
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 44px;
  height: 44px;
  background-color: var(--lab-forest);
  border-radius: 999px;
}

.scroll-top:hover {
  background-color: var(--lab-emerald-deep);
}

/* --------------------------------------------------------------------------
   14. Page transition (laboplex.js block 10)
   The header's links sweep a row of tiles across the page from left to
   right, jump to the section while it's covered, then the tiles sweep away
   to the right. Each tile runs from very light green at the top to very
   dark at the bottom, and darkens a little sooner than the tile on its left
   (--i is its place in the row, 0 on the left). Swap the colours below to
   change the look; the timings are at the top of block 10 in laboplex.js.
   -------------------------------------------------------------------------- */
.page-cover {
  position: fixed;
  inset: 0;
  z-index: 100000; /* above the header, the phone menu and the back-to-top button */
  display: flex;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.page-cover.is-active {
  visibility: visible;
  pointer-events: auto; /* nothing underneath can be clicked mid-transition */
  touch-action: none;   /* and a finger can't scroll the page on phones */
}

.page-cover-tile {
  flex: 1;
  margin-right: -1px; /* overlap by a pixel, so no hairline of page shows between tiles */
  transform: scaleX(0);
  transform-origin: left center;
  /* each tile waits its turn (--i × --tile-delay), then eases in and out */
  transition: transform var(--tile-time, 600ms) cubic-bezier(0.7, 0, 0.3, 1) calc(var(--i) * var(--tile-delay, 120ms));
  background: linear-gradient(to bottom,
    #ecfdf5 0%,
    #a7f3d0 calc(18% - var(--i) * 2%),
    #10b981 calc(42% - var(--i) * 3%),
    #064e3b calc(72% - var(--i) * 3%),
    #03241b 100%);
}

.page-cover.is-active .page-cover-tile {
  will-change: transform;
}

/* Covering: each tile grows out from its left edge */
.page-cover.is-covering .page-cover-tile {
  transform: scaleX(1);
}

/* Uncovering: each tile shrinks away to its right edge */
.page-cover.is-revealing .page-cover-tile {
  transform: scaleX(0);
  transform-origin: right center;
}

/* The page transition moves focus to the new section for keyboard and
   screen reader users; the section itself doesn't need a focus ring */
.section[tabindex="-1"]:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   15. Respect "reduce motion" settings
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }

  /* The industries slideshow always plays (the client asked for it), so:
     its timer bar keeps its length, and the photos and captions still
     cross-fade (a fade isn't movement). The slow photo zoom stays off. */
  .industry-progress span {
    animation-duration: var(--slide-time) !important;
  }

  .industry-slide {
    transition-duration: 0.9s, 0s !important;
  }

  .industry-caption > * {
    transition-duration: 0.6s, 0s !important;
  }

  .industry-tile img {
    transition-duration: 0s, 0.25s !important;
  }

  .industry-tile-label {
    transition-duration: 0.25s !important;
  }

  /* The Services cards' hover bounce and photo zoom run for everyone too */
  .services .img,
  .services .details {
    transition-duration: 1.2s !important;
  }

  .services .img img {
    transition-duration: 0.6s !important;
  }

  /* The page transition's tiles run for everyone too */
  .page-cover-tile {
    transition-duration: var(--tile-time, 600ms) !important;
  }

  /* The About and Services scroll animations follow the scroll rather than
     a timer, so they aren't affected by the rule above and run for everyone. */
}