/*
Theme Name: Skillsonline
Theme URI: https://skillsonline.eu
Author: Jonathan D.
Author URI: https://skillsonline.eu
Description: Block theme for CRYONOMIC (ARTIMPEX nv). Page sections ship as named block patterns so they can be composed on any page.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
Version: 0.9.86
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skillsonline
Tags: block-theme, full-site-editing, block-patterns, one-column, wide-blocks, accessibility-ready
*/

/* ============================================================
   This file is the Cryonomic design stylesheet, carried over
   verbatim from the source project, followed by one adaptation
   layer at the bottom.

   Keep it that way. When the design changes, re-copy the design
   section and leave the adaptation layer alone — the adaptations
   only exist to map WordPress core-block markup onto the class
   names the design already expects.

   Design source: WebstormProjects/Cryonomic/styles.css
   ============================================================ */

:root {
  --blue-900: #00336c;
  --blue-800: #012d5d;
  --blue-700: #013a79;
  --blue-600: #05448b;
  --red:      #e63946;
  --periwinkle: #bac0e1;
  --ice:      #f1f8ff;
  --slate:    #64748b;
  --body:     #424751;
  --line:     #e2e8f0;
  --white:    #fff;

  --shadow-red:  0 20px 25px rgba(230, 57, 70, .2), 0 8px 10px rgba(230, 57, 70, .2);
  --shadow-blue: 0 20px 25px rgba(0, 51, 108, .2);

  --font: "Museo Sans", "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gutter: 79px;
  --max: 1440px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img    { max-width: 100%; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a      { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- shared type ---------- */

.eyebrow {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.4;
}
.eyebrow--red    { color: var(--red); }
.eyebrow--slate  { color: #00336c; }
.eyebrow--center { text-align: center; }
.eyebrow--sm     { font-size: 12px; letter-spacing: 5px; }

.section-title {
  margin: 0 0 48px;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 300;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--blue-900);
  text-align: center;
}
.section-title--left { text-align: left; }
.section-title--red  { color: var(--red); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 5px;
  line-height: 18px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--blue { background: var(--blue-900); color: var(--white); box-shadow: var(--shadow-blue); }
.btn--blue:hover { background: var(--blue-600); }

.btn--red  { background: var(--red); color: var(--white); box-shadow: var(--shadow-red); }
.btn--red:hover { background: #cf2f3c; }

.btn--periwinkle { background: var(--periwinkle); color: var(--blue-900); }
.btn--periwinkle:hover { background: #cdd2ec; }

/* Footer contact button uses its own light blue. */
.footer .btn--periwinkle { background: #a9c6e8; color: var(--blue-900); }
.footer .btn--periwinkle:hover { background: #97b8e0; }

.btn--sm    { padding: 15px 26px; letter-spacing: 5px; }
.btn--wide  { font-size: 16px; }
.btn--pill  { padding: 16px 32px; font-size: 12px; font-weight: 300; letter-spacing: 3px; }
.btn--stack { letter-spacing: 2px; line-height: 18px; }

/* ============================================================
   NAVIGATION
   ============================================================ */

/* The FSE template-part <header> wrapper is only as tall as the nav, which would
   bound the sticky nav and unstick it immediately. display:contents drops that
   wrapper box so the nav sticks against the page for the full scroll length. */
header.wp-block-template-part { display: contents; }

.nav {
  position: sticky;
  /* Stick with the 36px navy topbar pulled off-screen so only the light-blue
     main bar stays fixed while scrolling. */
  top: -36px;
  z-index: 60;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
}
.nav.is-stuck { box-shadow: 0 6px 24px rgba(0, 0, 0, .14); }

/* ---------- Navy utility bar ---------- */
.nav__topbar { background: #0a3161; }
.nav__topbar-inner {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--gutter);
  min-height: 36px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
}
.nav__utility {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #fff;
}
.nav__utility li { display: flex; align-items: center; }
.nav__utility li + li::before {
  content: "";
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .35);
  margin: 0 18px;
}
.nav__utility a { color: #fff; }
.nav__utility a:hover { opacity: .8; }

.nav__top-right {
  grid-column: 3;
  justify-self: end;
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav__search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  padding: 6px 12px;
  width: 219px;
  max-width: 38vw;
}
.nav__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  font-family: inherit;
  font-size: 14px;
  color: #0a3161;
  background: transparent;
}
.nav__search input::placeholder { color: #0a3161; opacity: .7; }
.nav__search button {
  border: 0;
  background: transparent;
  padding: 0;
  color: #0a3161;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.nav__search svg { width: 16px; height: 16px; }

.nav__lang {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #fff;
  cursor: pointer;
}
.nav__lang::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.6 2.7 2.6 15.3 0 18M12 3c-2.6 2.7-2.6 15.3 0 18'/%3E%3C/svg%3E");
}
.nav__lang svg { width: 9px; height: 5px; transition: transform .2s ease; }
.nav__lang svg path { stroke: #fff; }
.nav__lang[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(0, 51, 108, .15);
  min-width: 72px;
  z-index: 5;
}
.nav__lang-menu li { display: block; }
.nav__lang-menu a,
.nav__lang-menu button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  color: #0a3161;
  cursor: pointer;
}
.nav__lang-menu a:hover,
.nav__lang-menu button:hover,
.nav__lang-menu a:focus-visible,
.nav__lang-menu button:focus-visible { background: var(--ice); outline: 0; }

/* ---------- Light-blue main bar ---------- */
.nav__mainbar { background: #f1f8ff; }
.nav__mainbar-inner {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--gutter);
  min-height: 73px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 24px;
}
.nav__logo { flex: 0 0 auto; display: flex; align-items: center; }
.nav__logo img { width: 205px; height: auto; display: block; }

/* Desktop: the drawer is transparent to layout so the menu + contact sit
   directly in the main bar. Mobile turns it back into a real box. */
.nav__drawer,
.nav__drawer-inner { display: contents; }

.nav__main {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  text-transform: uppercase;
  color: #0a3161;
}
.nav__main a { white-space: nowrap; }
.nav__main a { position: relative; padding: 6px 0; }
.nav__main a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav__main a:hover::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 16px; }
.nav__contact { letter-spacing: 2px; box-shadow: none; }

/* ---------- Nav mega-menus (Products / Industry / Applications) ---------- */
.nav__row { display: inline-flex; align-items: center; gap: 6px; }
.nav__sub-toggle {
  display: inline-grid;
  place-items: center;
  padding: 3px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.nav__sub-toggle svg { width: 10px; height: 6px; transition: transform .25s ease; }
.nav__item--has-sub.is-open .nav__sub-toggle svg { transform: rotate(180deg); }
.nav__item--has-sub.is-open > .nav__row > a { font-weight: 700; }

.nav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 34px var(--gutter) 30px;
  background: var(--white);
  box-shadow: 0 24px 30px rgba(0, 51, 108, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.nav__item--has-sub:focus-within > .nav__submenu,
.nav__item--has-sub.is-open > .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.nav__mega-title { margin: 0 0 24px; font-size: 18px; font-weight: 900; color: var(--blue-900); }
.nav__mega-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--rows, 3), auto);
  gap: 18px 40px;
  margin-bottom: 26px;
}
.nav__mega-grid a {
  padding: 0;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--blue-900);
  transition: color .15s ease;
}
.nav__submenu a::after { display: none; }
.nav__mega-grid a:hover { color: var(--red); }
.nav__submenu .nav__mega-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 20px;
  background: var(--red);
  color: var(--white);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background .2s ease;
}
.nav__mega-all:hover { background: #a11f26; }
.nav__mega-all svg { width: 8px; height: 12px; flex-shrink: 0; }

@media (max-width: 1240px) {
  .nav__row { display: flex; align-items: center; justify-content: space-between; }
  .nav__sub-toggle { padding: 8px; margin: -8px 0; }
  .nav__submenu {
    position: static;
    padding: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
  }
  .nav__item--has-sub.is-open > .nav__submenu { grid-template-rows: 1fr; }
  .nav__mega-inner { overflow: hidden; min-height: 0; padding: 6px 0 6px 12px; }
  .nav__mega-title { margin: 6px 0 12px; font-size: 15px; }
  .nav__mega-grid {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 16px;
  }
  .nav__mega-grid a { white-space: normal; }
}

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--blue-900);
  transition: transform .25s ease, opacity .25s ease;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  background: var(--ice);
  padding: 30px 0 60px;
}

/* The colour bleeds full-width; the media, panel and controls stay contained. */
.hero__inner {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__media {
  height: 550px;
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__slides {
  position: absolute;
  left: var(--gutter);
  bottom: 0;
  width: min(734px, calc(100% - var(--gutter) * 2));
  min-height: 304px;
}

.hero__panel {
  background: #a9c6e8;
  padding: 34px 56px 40px;
  min-height: 304px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  animation: fade-up .5s ease both;
}
.hero__panel[hidden] { display: none; }

.hero__panel .eyebrow { letter-spacing: 2px; font-weight: 700; margin-bottom: 8px; }

.hero__panel h1 {
  margin: 0 0 16px;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 300;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--white);
  /* A single long word (e.g. "DROOGIJSSTRAALMACHINES.") must break rather
     than push the whole page wider than a phone viewport. */
  overflow-wrap: break-word;
  word-break: break-word;
}

.hero__lead {
  margin: 0 0 28px;
  max-width: 598px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--blue-900);
}

.hero__controls {
  position: absolute;
  right: var(--gutter);
  bottom: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  padding: 9px 14px;
}

.hero__arrow {
  border: 0;
  background: transparent;
  padding: 4px;
  color: var(--blue-900);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.hero__arrow svg { width: 6px; height: 11px; }
.hero__arrow:hover { color: var(--red); }

.hero__dots { display: flex; gap: 6px; }
.hero__dots button {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1px solid var(--blue-900);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .2s ease;
}
.hero__dots button[aria-selected="true"] { background: var(--blue-900); }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   PARTNER MARQUEE
   ============================================================ */

.marquee {
  background: var(--ice);
  padding: 30px 0 46px;
}

.marquee__viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 120px, #000 calc(100% - 120px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 120px, #000 calc(100% - 120px), transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee__viewport:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  flex-shrink: 0;
}

.marquee__item {
  display: grid;
  place-items: center;
  width: 180px;
  height: 80px;
  border-right: 1px solid var(--line);
  color: #b0bac8;
}
.marquee__item img {
  width: auto; height: auto; max-height: 36px; max-width: 130px; object-fit: contain;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.25s ease;
}
.marquee__item img:hover { filter: grayscale(0) opacity(1); }
.marquee__item--word {
  font-family: "Montserrat", var(--font);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

/* ============================================================
   PRODUCTS
   ============================================================ */

.products {
  background: var(--ice);
  padding: 40px 0 90px;
}

.products .eyebrow { margin-bottom: 8px; letter-spacing: 2px; }

/* Homepage blocks: tighter eyebrow tracking + smaller gap to the heading. */
.applications .eyebrow { letter-spacing: 2px; margin-bottom: 8px; }
.funnel .eyebrow { letter-spacing: 2px; }
.products .section-title { margin-bottom: 42px; }

.products__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}

.card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 581px;
  overflow: hidden;
  background: var(--white);
  isolation: isolate;
}

/* The photo lives in its own layer so its height can shrink on hover:
   it goes from filling the card to stopping exactly at the red bar. */
.card__media {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 0;
  height: 100%;
  background-image: var(--card-img);
  background-size: cover;
  background-position: center;
  transition: height .35s ease;
}

/* Resting state: a blue veil over the whole photo. */
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 51, 108, .25) 48%, var(--blue-900) 100%);
  transition: opacity .35s ease;
}

/* Hover: the veil lifts and a red block slides up behind the copy. */
.card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  height: 40%;
  background: var(--red);
  transform: translateY(100%);
  transition: transform .35s ease;
}

.card:hover .card__media,
.card:focus-visible .card__media { height: 60%; }

.card:hover .card__media::after,
.card:focus-visible .card__media::after { opacity: 0; }

.card:hover::after,
.card:focus-visible::after { transform: none; }

.card--flat { background: var(--blue-700); }
.card--flat .card__media::after {
  background: linear-gradient(180deg, rgba(0, 51, 108, 0) 48%, var(--blue-900) 100%);
}

.card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 40%;
  padding: 24px 24px 22px;
  color: var(--white);
  width: 100%;
}
.card__body h3 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 900;
  line-height: 26px;
  text-transform: uppercase;
}
.card__body p {
  margin: 0 0 15px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--white);
  color: var(--blue-900);
  padding: 8px 8px;
  font-size: 11px;
  text-transform: uppercase;
}
.card__cta svg { width: 4px; height: 7px; transition: transform .2s ease; }
.card:hover .card__cta svg { transform: translateX(3px); }

/* "Onze machines voor" (product-categories): compact CTA chip, no arrow. */
.products--overview .card__cta {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  justify-content: flex-start;
  gap: 0;
}
.products--overview .card__cta::after { content: none; }

/* ============================================================
   APPLICATIONS
   ============================================================ */

.applications {
  background: var(--ice);
  padding: 90px 0;
}
.applications .section-title { margin-bottom: 60px; }

.applications__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.panel {
  --panel-accent: var(--blue-900);
  background: var(--ice);
  padding: 39px 98px 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
  transition: background-color .35s ease;
}
.panel:nth-child(2) { --panel-accent: var(--red); }

/* Hover: the panel fills with its accent colour and the copy flips to white. */
.panel:hover,
.panel:focus-within { background: var(--panel-accent); }

.panel:hover .panel__title,
.panel:focus-within .panel__title,
.panel:hover .panel__cols ul,
.panel:focus-within .panel__cols ul { color: var(--white); }

.panel:hover .panel__cols a:hover { color: var(--white); text-decoration: underline; }

/* Keep the CTA legible once the panel behind it turns dark. */
.panel:hover .btn,
.panel:focus-within .btn {
  background: var(--white);
  color: var(--panel-accent);
  box-shadow: none;
}

.panel__title {
  margin: 0;
  text-align: center;
  color: var(--blue-900);
  line-height: 28px;
  transition: color .35s ease;
}
.panel__title span {
  display: block;
  font-size: 20px;
  font-weight: 300;
  text-transform: uppercase;
}
.panel__title strong {
  display: block;
  font-size: 25px;
  font-weight: 900;
}

.panel__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  width: 100%;
}
/* The colour is set on the ul but animated on the links themselves — put a
   transition on both and the inherited value fades twice, which reads as lag. */
.panel__cols ul {
  text-align: center;
  font-size: 18px;
  color: var(--blue-900);
}
.panel__cols li { line-height: 46px; }
.panel__cols a { transition: color .1s ease; }
.panel__cols a:hover { color: var(--red); }

.btn--stack { white-space: nowrap; }

/* ============================================================
   ABOUT
   ============================================================ */

.about {
  background: var(--white);
  padding: 60px 0 100px;
  text-align: center;
}

.about__text {
  max-width: 841px;
  margin: 0 auto 40px;
  font-size: 18px;
  font-weight: 300;
  line-height: 28px;
  color: var(--body);
}
.about__text strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 900;
  color: var(--red);
}

.about__cta { margin-bottom: 60px; }

.video {
  position: relative;
  margin: 0 auto;
  max-width: 628px;
  overflow: hidden;
}
.video img { width: 100%; filter: blur(1px); }

.video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 65px;
  height: 39px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform .25s ease;
}
.video__play:hover { transform: scale(1.1); }
.video__play img { width: 100%; filter: none; }

/* ============================================================
   PROCESS / ACCORDION
   ============================================================ */

.process { background: var(--white); padding: 40px 0 0; }
.process .section-title { margin-bottom: 55px; }

.accordion {
  max-width: 1064px;
  margin-inline: auto;
}

.accordion--process .accordion__item:nth-child(1) .accordion__trigger { background: var(--blue-800); }
.accordion--process .accordion__item:nth-child(2) .accordion__trigger { background: var(--blue-900); }
.accordion--process .accordion__item:nth-child(3) .accordion__trigger { background: var(--blue-700); }
.accordion--process .accordion__item:nth-child(4) .accordion__trigger { background: var(--blue-600); }

.accordion__trigger {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 60px;
  padding: 19px 31px 19px 28px;
  border: 0;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
  color: var(--white);
  text-align: left;
  cursor: pointer;
  transition: filter .2s ease;
}
.accordion__trigger:hover { filter: brightness(1.15); }

.accordion__label { flex-shrink: 0; }

.accordion__line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .4);
}

.accordion__chevron {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  transition: transform .3s ease;
}
.accordion__chevron svg { width: 22px; height: 11px; }
.accordion__trigger[aria-expanded="true"] .accordion__chevron { transform: rotate(180deg); }

.accordion__panel {
  overflow: hidden;
  background: var(--ice);
  transition: height .3s ease;
}
.accordion__panel[hidden] { display: block; height: 0; }

.accordion__content {
  padding: 28px;
  font-size: 16px;
  line-height: 26px;
  color: var(--body);
}
.accordion__content p { margin: 0 0 12px; }
.accordion__content p:last-child { margin-bottom: 0; }
.accordion__link { color: var(--red); font-weight: 700; }

/* ============================================================
   PAGE HEAD (inner pages)
   ============================================================ */

.page-head {
  background: var(--ice);
  padding-bottom: 29px;
}

.breadcrumb {
  padding: 9px 0;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--blue-900);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; line-height: 32px; }
.breadcrumb li { white-space: nowrap; }
.breadcrumb li[aria-current] { white-space: normal; }
.breadcrumb li + li::before { content: "> "; }
.breadcrumb li[aria-current] { font-weight: 900; }
.breadcrumb a:hover { color: var(--red); }

.page-head__title {
  margin: 24px 0 40px;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 300;
  line-height: 45px;
  text-transform: uppercase;
  color: var(--blue-900);
  text-align: center;
}

/* The jobs page puts the heading left and the CTA on the right. */
.page-head--split { padding-bottom: 56px; }

.page-head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.page-head__intro { max-width: 735px; }

.page-head__title--left {
  margin: 0 0 20px;
  text-align: left;
}

.page-head__lead {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--body);
}

/* ---------- Category tabs ---------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
}

.tabs__tab {
  padding: 20px 40px;
  border: 0;
  background: var(--white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 3px;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--blue-900);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.tabs__tab:hover { background: var(--periwinkle); }
.tabs__tab[aria-selected="true"] {
  background: var(--blue-900);
  color: var(--white);
}

/* ---------- Tab panel transition ----------
   The outgoing set fades out as a block, the incoming items are staggered
   in one by one. The delay is set per item from JS. */

.accordion--faq,
.downloads__grid {
  transition: opacity .16s ease, transform .16s ease;
}

.accordion--faq.is-swapping,
.downloads__grid.is-swapping {
  opacity: 0;
  transform: translateY(6px);
}

@keyframes tab-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.is-entering {
  animation: tab-enter .35s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--enter-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .is-swapping { opacity: 1; transform: none; }
  .is-entering { animation: none; }
}

.tabs__count {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  margin-left: 8px;
  padding: 0 6px;
  background: var(--ice);
  color: var(--blue-900);
  font-size: 14px;
  letter-spacing: 0;
}

/* ============================================================
   DOWNLOADS
   ============================================================ */

.downloads { background: var(--white); padding: 70px 0 100px; }

.downloads__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.dl-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 200px;
  padding: 28px;
  background: var(--ice);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* display:flex would otherwise beat the [hidden] attribute. */
.dl-card[hidden] { display: none; }
.dl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(0, 51, 108, .12);
}

.dl-card__tag {
  align-self: flex-start;
  margin: 0;
  padding: 0 10px;
  background: var(--white);
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  color: var(--blue-900);
}

.dl-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  color: var(--blue-900);
}

.tile-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding: 8px;
  background: var(--red);
  color: var(--white);
  font-size: 11px;
  text-transform: uppercase;
}
.tile-btn svg { width: 4px; height: 7px; transition: transform .2s ease; }
.dl-card:hover .tile-btn svg,
.job-card:hover .tile-btn svg { transform: translateX(3px); }

/* ============================================================
   FAQ LIST
   ============================================================ */

.faq { background: var(--white); padding: 60px 0 40px; }

.faq__heading { margin: 0; font-weight: inherit; }

/* The FAQ reuses the accordion behaviour but not its look: flat rows with a
   hairline rule, a number, and a plus that turns into a minus. */
.accordion--faq .accordion__item {
  border-top: 1px solid var(--periwinkle);
}
.accordion--faq .accordion__item:last-child {
  border-bottom: 1px solid var(--periwinkle);
}

.accordion--faq .accordion__trigger {
  gap: 25px;
  min-height: 75px;
  padding: 16px;
  background: var(--white);
  color: var(--blue-900);
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
  transition: background-color .25s ease;
}
.accordion--faq .accordion__trigger:hover { background: var(--ice); filter: none; }

.faq__num {
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 500;
  color: #747782;
}

.faq__question { flex: 1; color: #001a48; }

/* Two bars: the vertical one collapses, turning the plus into a minus. */
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 21px;
  height: 21px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  margin-top: -1px;
  background: var(--red);
  transition: transform .3s ease;
}
.faq__icon::after { transform: rotate(90deg); }

.accordion--faq .accordion__trigger[aria-expanded="true"] .faq__icon::after {
  transform: rotate(0deg);
}

.accordion--faq .accordion__panel { background: var(--white); }

.accordion--faq .accordion__content {
  padding: 0 16px 28px 60px;
  max-width: 900px;
  font-size: 16px;
  line-height: 26px;
}

/* ============================================================
   CORNERSTONE (long-form content page)
   ============================================================ */

.ds-hero { padding-bottom: 70px; }

.ds-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 584px) minmax(0, 626px);
  justify-content: space-between;
  gap: 60px;
  align-items: center;
}

.ds-hero__title {
  margin: 0 0 24px;
  font-size: clamp(28px, 3vw, 35px);
  font-weight: 300;
  line-height: 40px;
  color: var(--blue-900);
}
.ds-hero__lead {
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 28px;
  color: var(--body);
}
.ds-hero__media { margin: 0; }
.ds-hero__media img { width: 100%; height: 389px; object-fit: cover; }

/* Shared content blocks */
.ds-block { background: var(--white); padding: 70px 0; }

.ds-split {
  display: grid;
  grid-template-columns: minmax(0, 476px) minmax(0, 513px);
  justify-content: space-between;
  gap: 75px;
  align-items: center;
}
.ds-split--reverse .ds-split__text { order: 2; }

.ds-split__text h2,
.ds-cols h2 {
  margin: 0 0 24px;
  font-size: 30px;
  font-weight: 300;
  line-height: 35px;
  color: var(--blue-900);
}
.ds-split__text p,
.ds-cols p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 22px;
  color: var(--body);
}

.ds-media { height: 289px; }
.ds-media--tall { height: 470px; margin: 0; }
.ds-media img { width: 100%; height: 100%; object-fit: cover; }

/* Centered narrative blocks */
.ds-centered { background: var(--white); padding: 70px 0; text-align: center; }
.ds-centered--tight { padding-top: 0; }
.ds-centered--ice { background: var(--ice); }

.ds-centered__title {
  margin: 0 0 16px;
  font-size: 30px;
  font-weight: 300;
  line-height: 40px;
  text-transform: uppercase;
  color: var(--blue-900);
}
.ds-centered__title--left { text-align: left; text-transform: none; }

.ds-centered__text {
  max-width: 844px;
  margin: 0 auto 16px;
  font-size: 18px;
  line-height: 28px;
  color: var(--body);
}

.ds-steps {
  counter-reset: step;
  max-width: 843px;
  margin: 24px auto 0;
  text-align: left;
}
.ds-steps li {
  position: relative;
  padding: 0 0 16px 44px;
  font-size: 16px;
  line-height: 22px;
  color: var(--body);
}
.ds-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--red);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
}

/* Benefits grid */
.ds-benefits { background: var(--white); padding: 70px 0; text-align: center; }

.ds-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 33px 28px;
  background: var(--ice);
}
.benefit__icon { width: 45px; height: 45px; color: var(--red); }
.benefit h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--blue-900);
}
.benefit p {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  color: var(--blue-900);
}

/* Dark applications band */
.ds-band {
  background: var(--blue-900);
  padding: 80px 0;
  color: var(--white);
  text-align: center;
}
.ds-band__title {
  margin: 0 0 24px;
  font-size: 30px;
  font-weight: 300;
  line-height: 40px;
  text-transform: uppercase;
}
.ds-band__text {
  max-width: 844px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 24px;
}
.ds-band__cta { margin-top: 40px; }

/* Pollution list */
.ds-pollution { background: var(--ice); padding: 80px 0; }

.ticklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.ticklist li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  line-height: 26px;
  color: var(--blue-900);
}
.ticklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--red);
}

/* Two-column prose */
.ds-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 112px;
  align-items: start;
}
.ds-list {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}
.ds-cols ol.ds-list { list-style: decimal; }
.ds-list li {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 22px;
  color: var(--body);
}
.ds-list strong { color: var(--blue-900); }

/* FAQ */
.ds-faq { background: var(--white); padding: 70px 0; }
.ds-faq__accordion { max-width: 1064px; margin: 30px auto 0; }

/* Why Cryonomic */
.ds-why { padding: 90px 0; }
.ds-why__title {
  margin: 0 0 24px;
  font-size: 40px;
  font-weight: 300;
  line-height: 48px;
  color: var(--blue-900);
}
.ds-why__cta { margin-top: 30px; }

/* ============================================================
   ABOUT / COMPANY
   ============================================================ */

.about-head { padding-bottom: 60px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 687px) minmax(0, 547px);
  justify-content: space-between;
  gap: 60px;
  align-items: center;
}

.split__text p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 24px;
  color: var(--body);
}
.split__text a { color: #1e3a8a; font-weight: 900; text-decoration: underline; }
.split__text a:hover { color: var(--red); }
.split__text .btn { margin-top: 12px; color: var(--white); text-decoration: none; }

.lead-red {
  margin: 0 0 24px !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--red) !important;
}

.highlight { color: var(--red); font-weight: 900; }

.split__media { margin: 0; position: relative; }
.split__media img { width: 100%; height: auto; }

.placeholder--wide { height: 321px; }

.about-block { background: var(--white); padding: 80px 0; }

.about-block__title {
  margin: 0 0 24px;
  font-size: 30px;
  font-weight: 300;
  line-height: 40px;
  text-transform: uppercase;
  color: var(--blue-900);
}
.about-block .split__text p { color: var(--blue-900); }

.about-band {
  background: var(--ice);
  padding: 80px 0;
  text-align: center;
}

.about-band__title {
  margin: 0 0 30px;
  font-size: 30px;
  font-weight: 300;
  line-height: 40px;
  text-transform: uppercase;
  color: var(--blue-900);
}

.about-band__text {
  max-width: 844px;
  margin: 0 auto 20px;
  font-size: 16px;
  line-height: 24px;
  color: var(--blue-900);
}
.about-band__text a { font-weight: 900; text-decoration: underline; }
.about-band__text a:hover { color: var(--red); }

.about-band__cta { margin-top: 30px; }

/* ---------- History timeline ---------- */

.history {
  background: var(--blue-900);
  padding: 80px 0;
  color: var(--white);
}

.history__title {
  margin: 0 0 60px;
  font-size: 30px;
  font-weight: 300;
  line-height: 40px;
  text-transform: uppercase;
  text-align: center;
}

/* Scoped to .history so it outranks the base .carousel rule, which is
   defined later in this file and would otherwise re-centre the track. */
.history .carousel { flex-direction: column; align-items: stretch; }

/* Half-a-viewport of padding on both ends so the first and last entries can
   still be scrolled to the centre — otherwise they can never be selected. */
.timeline {
  display: flex;
  gap: 60px;
  padding: 0 calc(50% - 90px) 20px;
  align-items: flex-end;
}

/* Scoped to .history so it outranks .carousel__track, defined later in this
   file. Mandatory snapping fights the centre-selection — and with the snap
   points removed from the items it would freeze the track at scrollLeft 0.
   scroll-behavior is left to JS, which passes it per call. */
.history .carousel__track {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.timeline__item {
  flex: 0 0 180px;
  text-align: center;
  cursor: pointer;
  opacity: .5;
  transition: opacity .4s ease;
}
.timeline__item.is-active { opacity: 1; }
.timeline__item:focus-visible { outline: 2px solid var(--periwinkle); outline-offset: 6px; }

/* Alternate the height so neighbouring entries do not collide. */
.timeline__item:nth-child(even) { padding-bottom: 60px; }

.timeline__item img {
  width: 120px;
  height: auto;
  margin: 0 auto;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.timeline__item.is-active img { transform: scale(1.15); }

/* The label is only revealed for the entry the slider has landed on. Its
   space stays reserved so the row does not jump as you scroll. */
.timeline__label {
  margin: 14px 0 0;
  min-height: 60px;
  font-size: 14px;
  line-height: 20px;
  color: var(--white);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .4s ease, transform .4s ease;
}
.timeline__item.is-active .timeline__label {
  opacity: 1;
  transform: none;
}

/* Long at rest, and it retracts towards the label once the entry is selected. */
.timeline__stem {
  display: block;
  width: 1px;
  height: 44px;
  margin: 8px auto 0;
  background: rgba(255, 255, 255, .5);
  transform-origin: bottom;
  transition: transform .4s ease, background-color .4s ease;
}
.timeline__item.is-active .timeline__stem {
  background: var(--white);
  transform: scaleY(.45);
}

.timeline__year {
  margin: 6px 0 0;
  font-size: 30px;
  font-weight: 300;
  line-height: 40px;
  transition: font-weight .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}
.timeline__item.is-active .timeline__year {
  font-weight: 500;
  transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .timeline__item,
  .timeline__item img,
  .timeline__label,
  .timeline__stem,
  .timeline__year { transition: none; }
}

.history__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}
.history__controls .carousel__arrow { color: var(--white); }
.history__controls .carousel__arrow:hover { color: var(--periwinkle); }

.carousel__bar {
  position: relative;
  width: 320px;
  height: 11px;
  border-radius: 10px;
  background: var(--periwinkle);
}
.carousel__thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 10px;
  background: var(--white);
  transition: left .2s ease;
}

/* ---------- Dry ice principle ---------- */

.principle { background: var(--white); padding: 80px 0; }

.principle__grid {
  display: grid;
  grid-template-columns: 189px minmax(0, 1fr) 407px;
  gap: 40px;
  align-items: start;
}

.tabs--vertical {
  flex-direction: column;
  gap: 3px;
}
.tabs--vertical .tabs__tab {
  width: 100%;
  min-height: 50px;
  padding: 14px 20px;
  background: var(--ice);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}
/* Needs to outrank .tabs--vertical .tabs__tab, which sets the ice background. */
.tabs--vertical .tabs__tab[aria-selected="true"] {
  background: var(--blue-900);
  color: var(--white);
  font-weight: 900;
}

.principle__title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  text-transform: uppercase;
  color: var(--blue-900);
}

.principle__subtitle {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: var(--red);
}

.principle__panels p {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 24px;
  color: var(--blue-900);
}

.principle__media { height: 254px; }

/* ============================================================
   BLOG
   ============================================================ */

.posts { background: var(--white); padding: 70px 0 100px; }

.posts__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 40px;
}

.posts__title {
  margin: 0;
  font-size: 30px;
  font-weight: 300;
  line-height: 48px;
  text-transform: uppercase;
  color: var(--blue-900);
}

.posts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.post {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--periwinkle);
  background: var(--white);
  transition: transform .25s ease, box-shadow .25s ease;
}
.post:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(0, 51, 108, .12);
}

.post__media { display: block; overflow: hidden; }
.post__media img {
  width: 100%;
  height: 252px;
  object-fit: cover;
  transition: transform .4s ease;
}
.post:hover .post__media img { transform: scale(1.04); }

.post__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: 32px 32px 35px;
}

.post__tag {
  margin: 0 0 16px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 15px;
  text-transform: uppercase;
  color: #b6191d;
}

.post__title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 900;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--blue-900);
}
.post__title a:hover { color: var(--red); }

.post__excerpt {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 22.75px;
  color: #747782;
}

.post__link {
  margin-top: auto;
  padding: 4px;
  background: var(--red);
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--white);
}

/* ---------- Red call-to-action band ---------- */

.cta {
  background: var(--red);
  padding: 80px 0;
  color: var(--white);
  text-align: center;
}
.cta--contained { background: var(--white); padding: 40px 0 20px; }
.cta--contained .cta__box {
  max-width: 844px;
  margin-inline: auto;
  padding: 50px 40px;
  background: var(--red);
}

.cta__eyebrow {
  margin: 0 0 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 15px;
  text-transform: uppercase;
}

.cta__title {
  margin: 0 0 30px;
  font-size: 30px;
  font-weight: 300;
  line-height: 36px;
  text-transform: uppercase;
}
.cta__title strong { font-weight: 900; }

/* ---------- Article ---------- */

.article-head { padding-bottom: 50px; }

.article-head__title {
  max-width: 843px;
  margin: 20px auto 24px;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  line-height: 45px;
  text-align: center;
  color: var(--blue-900);
}

.article-head__lead {
  max-width: 844px;
  margin: 0 auto;
  font-size: 18px;
  font-weight: 900;
  line-height: 28px;
  text-align: center;
  color: var(--blue-900);
}

/* The hero straddles the ice band and the white body, so the band colour is
   painted here as a hard-stop gradient rather than by an overlapping margin. */
.article-hero {
  margin: 0;
  padding-inline: var(--gutter);
  background: linear-gradient(var(--ice) 55%, var(--white) 55%);
}
.article-hero img {
  max-width: 843px;
  width: 100%;
  height: 318px;
  margin-inline: auto;
  object-fit: cover;
}

.article { background: var(--white); padding: 70px 0 40px; }

.article__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: 844px;
  margin: 0 auto 60px;
}
.article__row--reverse .article__text { order: 2; }

.article__text h2 {
  margin: 0 0 20px;
  font-size: 25px;
  font-weight: 300;
  line-height: 30px;
  color: var(--blue-900);
}
.article__text p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 22px;
  color: var(--body);
}
.article__text p:last-child { margin-bottom: 0; }

.article__media { height: 227px; }

/* Stand-in for imagery the design has not supplied yet. */
.placeholder {
  background: repeating-conic-gradient(#e8eef6 0% 25%, #f7fafd 0% 50%) 50% / 24px 24px;
}
.placeholder--video { height: 475px; }

.quote {
  position: relative;
  max-width: 844px;
  margin: 0 auto 60px;
  padding: 42px 90px;
  background: var(--periwinkle);
}
.quote p {
  margin: 0 0 16px;
  font-size: 30px;
  font-weight: 300;
  line-height: 35px;
  color: var(--white);
}
.quote footer {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 36px;
  text-transform: uppercase;
  color: var(--slate);
}
/* Oversized typographic quotes, drawn with generated content. */
.quote::before,
.quote::after {
  position: absolute;
  font-size: 100px;
  line-height: 1;
  color: var(--blue-900);
}
.quote::before { content: "\201C"; top: 34px; left: 34px; }
.quote::after  { content: "\201D"; bottom: -8px; right: 34px; }

.article-video {
  position: relative;
  max-width: 844px;
  margin: 0 auto;
}

.tile-btn--wide { width: 308px; font-size: 18px; padding: 8px; }

/* ============================================================
   CONTACT
   ============================================================ */

.contact-head { padding-bottom: 40px; }

.contact-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 407px) minmax(0, 1fr);
  gap: 60px;
  align-items: end;
}

.contact-head__lead {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--body);
}

.contact-head__aside {
  margin: 0;
  font-size: 25px;
  font-weight: 300;
  line-height: 40px;
  color: var(--blue-900);
}

.contact { background: var(--white); padding: 60px 0 90px; }

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 407px) minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

.contact__subtitle {
  margin: 0 0 36px;
  font-size: 25px;
  font-weight: 500;
  line-height: 40px;
  text-transform: uppercase;
  color: var(--blue-900);
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 48px;
}
.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.contact-list__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--red);
}
.contact-list__icon svg { width: 26px; height: 26px; }

.contact-list h3 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 900;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--blue-900);
}
.contact-list p {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--blue-900);
}
.contact-list a { text-decoration: underline; }
.contact-list a:hover { color: var(--red); }

/* Red promo block under the contact details. */
.promo {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 193px;
  padding: 32px 38px;
  background: var(--red);
  color: var(--white);
  transition: background-color .2s ease;
}
.promo:hover { background: #cf2f3c; }
.promo p {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
}
.promo__arrow { flex-shrink: 0; }
.promo__arrow svg { width: 12px; height: 20px; transition: transform .2s ease; }
.promo:hover .promo__arrow svg { transform: translateX(4px); }

/* ---------- Contact form ---------- */

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 30px;
}

.field select {
  padding: 14px 16px;
  border: 0;
  outline: 0;
  background: var(--blue-900);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  cursor: pointer;
  /* Chevron drawn as a background image so the native arrow can go. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.field select.is-invalid { outline: 2px solid var(--red); }

.field--choices { border: 0; padding: 0; margin: 0; }
.field--choices legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  line-height: 16px;
  text-transform: uppercase;
  color: #001a48;
}

.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--blue-900);
  cursor: pointer;
}
.choice input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--blue-900);
}

.contact-form__footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 8px;
}
.contact-form__footer .btn { margin-left: auto; }

/* ============================================================
   DEALERS CAROUSEL
   ============================================================ */

.dealers { background: var(--ice); padding: 80px 0; }
.dealers .section-title { margin-bottom: 50px; font-size: 30px; line-height: 35px; }

.carousel {
  display: flex;
  align-items: center;
  gap: 24px;
}

.carousel__arrow {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--blue-900);
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}
.carousel__arrow:hover { color: var(--red); transform: scale(1.15); }
.carousel__arrow svg { width: 14px; height: 22px; }
.carousel__arrow[disabled] { opacity: .3; cursor: default; transform: none; }

.carousel__track {
  display: flex;
  gap: 24px;
  flex: 1;
  /* Without this the automatic minimum size keeps the track as wide as its
     content, so it never scrolls — and the page overflows sideways instead. */
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

.partner {
  flex: 0 0 189px;
  scroll-snap-align: start;
  background: var(--white);
}
.partner__thumb {
  height: 201px;
  background: repeating-conic-gradient(#e8eef6 0% 25%, #f7fafd 0% 50%) 50% / 24px 24px;
}
.partner__name {
  margin: 0;
  height: 50px;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 300;
  color: var(--blue-900);
}

.dealers__cta { margin-top: 50px; text-align: center; }

/* ============================================================
   WORLD MAP
   ============================================================ */

.world {
  background: var(--blue-900);
  padding: 90px 0 60px;
  color: var(--white);
}

.world__title {
  margin: 0 0 50px;
  font-size: 30px;
  font-weight: 300;
  line-height: 40px;
  text-transform: uppercase;
  text-align: center;
}

.worldmap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 40px;
  align-items: start;
}

/* The art and the pin layer share this box. Its aspect ratio matches the SVG
   viewBox exactly (2000 × 789), so a pin at x% lands on its true longitude. */
.worldmap__canvas {
  position: relative;
  aspect-ratio: 2000 / 789;
  overflow: hidden;            /* clip the map when zoomed in */
}

.worldmap__art,
.worldmap__pins {
  position: absolute;
  inset: 0;
}

/* The MAP zooms crisply by re-framing its SVG viewBox (vectors never
   rasterise). Only the PIN layer is transformed (translate + scale), so the
   markers travel with the map; each marker then counter-scales (--inv = 1/zoom)
   to keep its real pixel size instead of ballooning. */
.worldmap__pins { transform-origin: 0 0; }

/* Only grab the touch gestures once zoomed in — at rest the page scrolls
   normally when a finger passes over the (full-width) map on a phone. */
.worldmap__canvas.is-zoomed { cursor: grab; touch-action: none; }
.worldmap__canvas.is-grabbing { cursor: grabbing; }

.worldmap__art svg { width: 100%; height: 100%; }
/* Thin light border so each country is set apart from its neighbours — stays a
   hairline at every zoom level thanks to non-scaling-stroke. */
.worldmap__land path {
  fill: var(--white);
  stroke: rgba(255, 255, 255, .8);
  stroke-width: .75;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ---------- Zoom controls ---------- */
.worldmap__zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;                  /* above the pins (max z-index 5) */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.worldmap__zoombtn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 9px;
  background: rgba(0, 51, 108, .82);
  color: var(--white);
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 51, 108, .25);
  transition: background-color .15s ease, transform .1s ease, opacity .15s ease;
}
.worldmap__zoombtn svg { width: 20px; height: 20px; display: block; }
.worldmap__zoombtn:hover { background: var(--red); }
.worldmap__zoombtn:active { transform: scale(.93); }
.worldmap__zoombtn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.worldmap__zoombtn:disabled { opacity: .4; cursor: default; }
.worldmap__zoombtn:disabled:hover { background: rgba(0, 51, 108, .82); }

@media (max-width: 600px) {
  .worldmap__zoombtn { width: 34px; height: 34px; }
}

/* ---------- Pins ---------- */

.pin {
  position: absolute;
  width: 13px;
  height: 13px;
  padding: 0;
  margin: -6.5px 0 0 -6.5px;   /* centre the dot on its coordinate */
  border: 2px solid var(--blue-900);
  border-radius: 50%;
  background: var(--periwinkle);
  cursor: pointer;
  /* Cancel the pin layer's zoom so the dot keeps its true size. Its box centre
     sits exactly on the coordinate, so scaling about the centre stays put. */
  transform: scale(var(--inv, 1));
  transition: background-color .2s ease;
}
.pin:hover,
.pin:focus-visible {
  background: var(--white);
  transform: scale(calc(var(--inv, 1) * 1.35));
  outline: 0;
  /* Above every other pin — including the head office — so this pin's tooltip
     is never covered by a neighbour. */
  z-index: 4;
}
.pin:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .6); }

.pin.is-active {
  background: var(--red);
  border-color: var(--white);
  transform: scale(calc(var(--inv, 1) * 1.45));
  /* Above the head office (z-index 3) so the selected pin's tooltip is never
     covered by it. */
  z-index: 5;
}

/* Head office: bigger, red-ringed, and always on top of the regional pins. */
.pin--hq {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-width: 3px;
  border-color: var(--red);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(181, 35, 42, .3);
  z-index: 3;
}
.pin--hq:hover,
.pin--hq:focus-visible { background: var(--white); }
.pin--hq.is-active {
  background: var(--red);
  border-color: var(--white);
  box-shadow: 0 0 0 5px rgba(181, 35, 42, .45);
}

/* ---------- Legend ---------- */

.worldmap__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, .75);
}
.worldmap__legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.worldmap__legend i {
  width: 13px;
  height: 13px;
  border: 2px solid var(--blue-900);
  border-radius: 50%;
  background: var(--periwinkle);
}
.worldmap__legend .is-hq {
  width: 16px;
  height: 16px;
  border-width: 3px;
  border-color: var(--red);
  background: var(--white);
}
.worldmap__legend .is-area {
  border-radius: 2px;
  border-color: var(--blue-900);
}

/* Region name on hover / focus. */
.pin__tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: var(--white);
  color: var(--blue-900);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.pin:hover .pin__tip,
.pin:focus-visible .pin__tip,
.pin.is-active .pin__tip { opacity: 1; }

/* Ties a fanned-out pin back to the spot it really sits on. */
.pin__leader {
  position: absolute;
  height: calc(1px * var(--inv, 1));   /* stays hairline-thin at any zoom */
  background: rgba(255, 255, 255, .55);
  transform-origin: left center;
  pointer-events: none;
}

/* ---------- Detail panel ---------- */

.worldmap__panel {
  padding: 32px;
  background: #001a48;
  min-height: 220px;
}

.worldmap__hint {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: rgba(255, 255, 255, .8);
}

.worldmap__region {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--periwinkle);
}

.worldmap__badge {
  display: inline-block;
  margin: -12px 0 20px;
  padding: 3px 10px;
  background: var(--red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
}

.worldmap__company {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
  text-transform: uppercase;
}

.worldmap__details {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 20px;
}
.worldmap__details dt {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .6px;
  color: var(--periwinkle);
  padding-top: 2px;
}
.worldmap__details dd { margin: 0; }
.worldmap__details a { text-decoration: underline; }
.worldmap__details a:hover { color: var(--periwinkle); }

.worldmap__maps {
  font-size: 13px;
  font-weight: 500;
  color: var(--periwinkle);
}
.worldmap__maps:hover { color: var(--white); }

/* ---------- Country list ---------- */

.partner-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 30px;
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, .25);
}

.partner-list__country {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--periwinkle);
}

.partner-list__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  text-align: left;
  color: var(--white);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.partner-list__item:hover,
.partner-list__item:focus-visible {
  background: rgba(255, 255, 255, .08);
  outline: 0;
}
.partner-list__item.is-active {
  background: rgba(255, 255, 255, .12);
  border-left-color: var(--red);
}

.partner-list__region {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}
.partner-list__person { font-size: 12px; color: rgba(255, 255, 255, .65); }

.partner-list__hq {
  padding: 1px 6px;
  background: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.partner-list__item.is-hq { border-left-color: rgba(181, 35, 42, .45); }

/* ============================================================
   VACANCY DETAIL
   ============================================================ */

.vacancy-head { padding-bottom: 60px; }

.vacancy-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 625px) minmax(0, 516px);
  justify-content: space-between;
  gap: 60px;
  align-items: start;
}

.vacancy-head__lead {
  margin: 0 0 32px;
  font-size: 16px;
  font-weight: 900;
  line-height: 26px;
  color: var(--blue-900);
}

.meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
}
.meta-tags li {
  padding: 4px 12px;
  background: var(--periwinkle);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--white);
}

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

.callout {
  padding: 32px;
  background: #001a48;
  color: var(--white);
}

.callout__title {
  margin: 0 0 15px;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 1px;
  line-height: 28px;
  text-transform: uppercase;
}

.callout__text {
  margin: 0 0 15px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22.75px;
  color: rgba(255, 255, 255, .8);
}

.callout__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.callout__list li {
  display: flex;
  gap: 12px;
}
/* A check mark drawn in CSS so the card needs no image. */
.callout__list li::before {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 7px;
  margin: 4px 3px 0 0;
  border-left: 2px solid var(--periwinkle);
  border-bottom: 2px solid var(--periwinkle);
  transform: rotate(-45deg);
}

.btn--white { background: var(--white); color: var(--blue-900); letter-spacing: 2px; font-size: 12px; }
.btn--white:hover { background: var(--periwinkle); }

/* ---------- Vacancy body ---------- */

.vacancy { background: var(--white); padding: 70px 0 40px; }

.vacancy__body { max-width: 700px; }

.vacancy__body h2 {
  margin: 48px 0 20px;
  font-size: 25px;
  font-weight: 700;
  line-height: 30px;
  color: var(--blue-900);
}
.vacancy__body h2:first-child { margin-top: 0; }

.vacancy__body p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 26px;
  color: var(--body);
}

.bullets {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bullets li {
  display: flex;
  gap: 12px;
  font-size: 16px;
  line-height: 24px;
  color: #001a48;
}
.bullets li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  background: #b6191d;
}

/* ---------- Apply form ---------- */

.apply { background: var(--white); padding: 60px 0 110px; }

.apply__title {
  max-width: 1000px;
  margin: 0 auto 40px;
  font-size: 30px;
  font-weight: 300;
  line-height: 40px;
  text-transform: uppercase;
  color: var(--blue-900);
}

.apply-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 30px;
  max-width: 1000px;
  margin-inline: auto;
}

.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }

.field label,
.field__label {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  line-height: 16px;
  text-transform: uppercase;
  color: #001a48;
}

.field input,
.field textarea {
  padding: 14px 16px;
  border: 1px solid transparent;
  outline: 0;
  background: var(--ice);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--blue-900);
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder { color: #747782; }
.field input:focus,
.field textarea:focus { border-color: var(--blue-900); }
.field input.is-invalid,
.field textarea.is-invalid { border-color: var(--red); }

/* The real file input is hidden; the label acts as the button. */
.file-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--blue-900);
}
.file-field.is-invalid { border-color: var(--red); }

.file-field__name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  color: var(--blue-900);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-field__btn {
  flex-shrink: 0;
  padding: 5px 16px;
  background: #b6191d;
  font-size: 13px;
  color: var(--white);
  cursor: pointer;
  transition: background-color .2s ease;
}
.file-field__btn:hover { background: #cf2f3c; }
#cv:focus-visible + .file-field__btn { outline: 2px solid var(--blue-900); outline-offset: 2px; }

.apply-form__footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 8px;
}

.consent {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #747782;
  cursor: pointer;
}
.consent input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--blue-900);
}
.consent a { text-decoration: underline; }
.consent.is-invalid { color: var(--red); }

.form-error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  color: var(--red);
}
.form-error--ok { color: #1a7f4b; }

/* ============================================================
   JOBS
   ============================================================ */

.jobs { background: var(--white); padding: 70px 0 100px; }

.jobs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

.job-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-height: 298px;
  padding: 33px 35px;
  background: var(--ice);
  transition: transform .25s ease, box-shadow .25s ease;
}
.job-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(0, 51, 108, .12);
}

.job-card__tag {
  margin: 0;
  padding: 2px 14px;
  background: var(--periwinkle);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--white);
}

.job-card__title {
  margin: 0;
  font-size: 25px;
  font-weight: 500;
  line-height: 30px;
  color: var(--blue-900);
}

.job-card__text {
  font-size: 14px;
  line-height: 20px;
  color: var(--body);
}
.job-card__text p { margin: 0 0 12px; }
.job-card__text p:last-child { margin-bottom: 0; }

.job-card .tile-btn { width: 100%; margin-top: auto; }

/* ============================================================
   FUNNEL
   ============================================================ */

.funnel {
  background: var(--ice);
  padding: 150px 0;
}

.funnel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(194, 198, 211, .2);
}

.funnel__card {
  background: var(--white);
  padding: 84px 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 410px;
}

.funnel__card h3 {
  margin: 0;
  font-size: 30px;
  font-weight: 300;
  line-height: 35px;
  text-transform: uppercase;
  color: var(--blue-900);
}

.funnel__text {
  margin: 0;
  max-width: 471px;
  font-size: 16px;
  line-height: 26px;
  color: var(--body);
}

.funnel .eyebrow--sm { margin: 0; }

.funnel__form { display: flex; flex-direction: column; gap: 20px; }

.funnel__form input {
  width: 100%;
  max-width: 459px;
  padding: 16px 32px 16px 20px;
  border: .5px solid var(--blue-900);
  outline: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--blue-900);
  background: var(--white);
}
.funnel__form input::placeholder { color: var(--blue-900); }
.funnel__form input:focus { border-color: var(--red); }
.funnel__form input.is-invalid { border-color: var(--red); border-width: 1px; }

.funnel__form .btn { align-self: flex-start; }

.funnel__error {
  margin: -8px 0 0;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--red);
}
.funnel__error--ok { color: #1a7f4b; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: var(--blue-900);
  color: var(--white);
  padding: 60px 0 24px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 40px;
  padding-bottom: 48px;
}

.footer__logo { width: 190px; margin-bottom: 24px; }

.footer__address {
  margin: 0 0 32px;
  font-size: 11px;
  font-weight: 300;
  font-style: normal;
  line-height: 18px;
}
.footer__address a { text-decoration: underline; }

.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 8px;
}

.footer__col h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
}
.footer__col ul { font-size: 12px; font-weight: 500; text-transform: uppercase; line-height: 30px; }
.footer__col--plain { font-size: 14px; }
.footer__col a { transition: opacity .2s ease; }
.footer__col a:hover { opacity: .65; }

.footer__social { display: flex; gap: 10px; padding-top: 8px; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--white);
  transition: transform .2s ease;
}
.footer__social a:hover { transform: translateY(-3px); }
.footer__social img,
.footer__social svg { width: 19px; height: 19px; }

.footer__rule { border: 0; border-top: 1px solid rgba(255, 255, 255, .35); margin: 0; }

.footer__legal {
  margin: 26px 0 0;
  font-size: 11px;
  font-weight: 300;
  line-height: 18px;
  text-align: center;
}

/* ============================================================
   BACK TO TOP
   ============================================================ */

.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--red);
  color: var(--white);
  cursor: pointer;
  box-shadow: var(--shadow-red);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}
.to-top:not([hidden]) { opacity: 1; transform: none; }
.to-top svg { width: 14px; height: 14px; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }

  .nav__drawer,
  .nav__utilities,
  .nav__main li,
  .nav__actions { transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
  :root { --gutter: 40px; }

  .products__grid { grid-template-columns: repeat(3, 1fr); }
  .panel { padding: 32px 40px 48px; }
  .funnel__card { padding: 56px 40px; }
  .nav__main { gap: 18px; font-size: 13px; }
}

@media (max-width: 900px) {
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__burger { display: flex; grid-row: 1; grid-column: 2; justify-self: end; }

  /* Long accordion labels (e.g. the process rows) must be allowed to wrap;
     the design's flex-shrink:0 kept them on one line and overflowed the page
     sideways on narrow screens. */
  .accordion__label { flex-shrink: 1; min-width: 0; overflow-wrap: break-word; }

  /* The drawer becomes a real box that unfolds under the header bar.
     Animating grid-template-rows 0fr → 1fr lets it expand to its natural
     height without hard-coding a max-height. */
  .nav__drawer {
    display: grid;
    grid-template-rows: 0fr;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ice);
    box-shadow: 0 24px 30px rgba(0, 51, 108, .12);
    opacity: 0;
    visibility: hidden;
    transition:
      grid-template-rows .4s cubic-bezier(.22, 1, .36, 1),
      opacity .25s ease,
      visibility 0s linear .4s;
  }
  .nav.is-open .nav__drawer {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s, 0s;
  }

  /* The collapsing row needs one child to clip against. */
  .nav__drawer-inner {
    display: block;
    min-height: 0;
    overflow: hidden;
    padding-inline: var(--gutter);
  }

  .nav__utilities {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-top: 20px;
  }
  .nav__utility { flex-wrap: wrap; justify-content: center; }
  .nav__rule { margin: 4px 0; }
  .nav__bottom { flex-direction: column; align-items: stretch; gap: 20px; padding-bottom: 24px; }
  .nav__main { flex-direction: column; gap: 12px; }
  .nav__actions { justify-content: space-between; }

  /* Each row slides up into place, staggered, once the drawer is open. */
  .nav__utilities,
  .nav__main li,
  .nav__actions {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s ease;
  }
  .nav.is-open .nav__utilities,
  .nav.is-open .nav__main li,
  .nav.is-open .nav__actions {
    opacity: 1;
    transform: none;
  }
  .nav.is-open .nav__utilities   { transition-delay: .10s; }
  .nav.is-open .nav__main li:nth-child(1) { transition-delay: .16s; }
  .nav.is-open .nav__main li:nth-child(2) { transition-delay: .21s; }
  .nav.is-open .nav__main li:nth-child(3) { transition-delay: .26s; }
  .nav.is-open .nav__main li:nth-child(4) { transition-delay: .31s; }
  .nav.is-open .nav__main li:nth-child(5) { transition-delay: .36s; }
  .nav.is-open .nav__main li:nth-child(6) { transition-delay: .41s; }
  .nav.is-open .nav__actions     { transition-delay: .46s; }

  .hero { padding-bottom: 40px; }
  .hero__media { height: 380px; }
  .hero__slides {
    position: static;
    width: 100%;
    margin-top: -40px;
  }
  .hero__panel { padding: 28px 32px 32px; min-height: 0; }
  .hero__controls { position: static; margin: 20px 0 0 auto; width: max-content; }

  .products__grid { grid-template-columns: repeat(2, 1fr); }
  .card { min-height: 420px; }

  .applications__grid,
  .funnel__grid { grid-template-columns: 1fr; }
  .funnel { padding: 70px 0; }
  .funnel__card { min-height: 0; }

  .accordion__trigger { font-size: 15px; gap: 12px; padding: 16px 20px; }
  .accordion__line { display: none; }
  .accordion__label { flex: 1; }

  .downloads__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .jobs__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .posts__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .posts__head { flex-direction: column; align-items: flex-start; }
  .article__row { grid-template-columns: 1fr; gap: 24px; }
  .article__row--reverse .article__text { order: 0; }
  .quote { padding: 40px 30px; }
  .quote::before, .quote::after { display: none; }
  .article-hero { margin-top: 0; }
  .page-head__row { flex-direction: column; align-items: flex-start; gap: 28px; }
  .vacancy-head__grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-head__grid,
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .worldmap { grid-template-columns: 1fr; gap: 24px; }
  .ds-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .ds-split { grid-template-columns: 1fr; gap: 36px; }
  .ds-split--reverse .ds-split__text { order: 0; }
  .ds-cols { grid-template-columns: 1fr; gap: 48px; }
  .ds-benefits__grid { grid-template-columns: repeat(2, 1fr); }
  .principle__grid { grid-template-columns: 1fr; }
  .tabs--vertical { flex-direction: row; flex-wrap: wrap; }
  .tabs--vertical .tabs__tab { width: auto; flex: 1 1 auto; }

  .footer__top { grid-template-columns: 1fr; }
  .footer__nav { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; }

  .products__grid { grid-template-columns: 1fr; }
  .panel__cols { grid-template-columns: 1fr; gap: 0; }
  .panel { padding: 28px 20px 36px; }
  .btn--stack { white-space: normal; }
  /* Long uppercase labels made the inline-flex buttons wider than the phone
     viewport, pushing the whole page sideways. Cap them and let them wrap. */
  .btn {
    padding: 16px 22px;
    letter-spacing: 2px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .wp-block-button.btn { max-width: 100%; }
  .wp-block-button.btn .wp-block-button__link { white-space: normal; overflow-wrap: break-word; }
  .funnel__card { padding: 40px 24px; }
  .footer__nav { grid-template-columns: 1fr; }
  .eyebrow { letter-spacing: 2px; font-size: 13px; }

  .tabs__tab { flex: 1 1 100%; padding: 16px 20px; letter-spacing: 2px; }
  .accordion--faq .accordion__trigger { font-size: 17px; gap: 14px; }
  .accordion--faq .accordion__content { padding-left: 16px; }

  .downloads__grid,
  .jobs__grid,
  .posts__grid { grid-template-columns: 1fr; }
  .tile-btn--wide { width: 100%; }
  .ds-benefits__grid { grid-template-columns: 1fr; }

  .apply-form,
  .contact-form { grid-template-columns: 1fr; }
  .apply-form__footer,
  .contact-form__footer { flex-direction: column; align-items: stretch; gap: 16px; }
  .contact-form__footer .btn { margin-left: 0; }
}


/* ============================================================
   INDUSTRIES & APPLICATIONS  (synced from the design stylesheet)
   ============================================================ */
/* ============================================================
   INDUSTRY CATEGORY (applications within one industry)
   ============================================================ */

.cat-head { padding-bottom: 70px; }

.cat-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 624px) minmax(0, 592px);
  justify-content: space-between;
  gap: 60px;
  align-items: start;
}

.cat-head__title {
  margin: 6px 0 24px;
  font-size: 40px;
  font-weight: 300;
  line-height: 44px;
  text-transform: uppercase;
  color: var(--blue-900);
}

.cat-head__text p {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 22px;
  color: var(--body);
}

.cat-head__actions {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin-top: 32px;
}
.cat-head__actions .btn { flex: 0 1 auto; }

.cat-head__media { margin: 0; }
.cat-head__media img { width: 100%; height: 351px; object-fit: cover; }

/* White button with red text/outline — the "download leaflet" style. */
.btn--outline-red {
  background: var(--white);
  color: var(--red);
  letter-spacing: 3px;
  font-size: 14px;
}
.btn--outline-red:hover { background: var(--red); color: var(--white); }

/* ---------- Application card grid ---------- */

.appcats { background: var(--white); padding: 70px 0 90px; }

.appcats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.appcat {
  display: grid;
  grid-template-columns: 1fr 310px;
  min-height: 227px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.appcat:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(0, 51, 108, .12);
}

.appcat__text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 24px;
  background: var(--ice);
}

.appcat__title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 900;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--blue-900);
}

.appcat__excerpt {
  margin: 0 0 auto;
  font-size: 14px;
  font-weight: 300;
  line-height: 18px;
  color: var(--blue-900);
}

.appcat__link {
  margin-top: 20px;
  padding: 4px 9px;
  background: var(--red);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}

.appcat__media { overflow: hidden; }
.appcat__media img {
  width: 100%;
  height: 227px;
  object-fit: cover;
  transition: transform .4s ease;
}
.appcat:hover .appcat__media img { transform: scale(1.04); }

/* ---------- Industry detail — mobile ---------- */
@media (max-width: 900px) {
  .cat-head__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .appcats__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cat-head { padding-bottom: 48px; }
  .cat-head__title { font-size: 30px; line-height: 36px; }
  .cat-head__text p { font-size: 16px; line-height: 24px; }
  .cat-head__media img { height: 240px; }
  .cat-head__actions { flex-direction: column; align-items: stretch; }
  .appcats { padding: 48px 0 56px; }
  .appcat { grid-template-columns: minmax(0, 1fr); }
  .appcat__media { order: -1; min-height: 190px; }
  .appcat__media img { height: 190px; }
}

/* ============================================================
   APPLICATION DETAIL
   ============================================================ */

.app-head { padding-bottom: 70px; }

.app-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 624px) minmax(0, 594px);
  justify-content: space-between;
  gap: 60px;
  align-items: start;
}

.app-head__title {
  margin: 6px 0 24px;
  font-size: 40px;
  font-weight: 300;
  line-height: 44px;
  text-transform: uppercase;
  color: var(--blue-900);
}

.app-head__text p {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 24px;
  color: var(--body);
}

.app-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

.app-head__media {
  position: relative;
  margin: 0;
}
.app-head__media img { width: 100%; height: 400px; object-fit: cover; }

.app-head__note {
  position: absolute;
  left: 0;
  bottom: -20px;
  max-width: 420px;
  margin: 0;
  padding: 11px 15px;
  background: var(--white);
  box-shadow: 0 10px 25px rgba(0, 51, 108, .1);
  font-size: 14px;
  line-height: 18px;
  color: var(--blue-900);
}

/* Section head with carousel arrows on the right */
.app-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}
.app-section__title {
  margin: 0;
  font-size: 30px;
  font-weight: 300;
  line-height: 46px;
  text-transform: uppercase;
  color: var(--blue-900);
}
.carousel__nav { display: flex; gap: 8px; }

/* Videos */
.app-videos { background: var(--white); padding: 70px 0; }

/* The base .carousel lays its children in a row; here the head sits above the
   track, so switch to a column. */
.app-videos .carousel { flex-direction: column; align-items: stretch; gap: 0; }
.app-videos__track { gap: 30px; }

.videocard {
  position: relative;
  flex: 0 0 calc((100% - 60px) / 3);
  margin: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.videocard__media {
  position: relative;
  aspect-ratio: 405 / 263;
}
.videocard__frame {
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  filter: blur(1px);
}
.videocard .video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 65px;
  height: 44px;
}
.videocard__caption {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--blue-900);
}
.videocard__caption strong,
.videocard__caption b { font-weight: 700; }

/* Photos — a non-scrollable grid (same look as the videos, no carousel). */
.app-photos { background: var(--white); padding: 70px 0; }
.app-photos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.photocard { margin: 0; display: flex; flex-direction: column; }
.photocard__img {
  width: 100%;
  aspect-ratio: 405 / 263;
  object-fit: cover;
  display: block;
}
.photocard__caption {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--blue-900);
}
.photocard__caption strong,
.photocard__caption b { font-weight: 700; }
@media (max-width: 900px) { .app-photos__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .app-photos__grid { grid-template-columns: 1fr; } }

/* Equipment */
.app-equipment { background: var(--ice); padding: 80px 0; }

.app-equipment__title {
  max-width: 947px;
  margin: 0 auto 50px;
  font-size: 30px;
  font-weight: 300;
  line-height: 40px;
  text-transform: uppercase;
  text-align: center;
  color: var(--blue-900);
}
.app-equipment__title strong { font-weight: 900; }

.app-equipment__track { gap: 30px; }

.eqcard {
  flex: 0 0 295px;
  scroll-snap-align: start;
  background: var(--white);
}
.eqcard__media {
  height: 270px;
  padding: 40px;
  display: grid;
  place-items: center;
}
.eqcard__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.eqcard__name {
  margin: 0;
  padding: 12px 24px 28px 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  text-transform: none;
  color: var(--blue-900);
  transition: color .2s ease;
}
/* Title turns red when the card is hovered or keyboard-focused. */
.eqcard a:hover .eqcard__name,
.eqcard a:focus-visible .eqcard__name { color: var(--red); }

/* ---------- Application detail — mobile ---------- */
@media (max-width: 900px) {
  .app-head__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .videocard { flex-basis: calc((100% - 30px) / 2); }
}
@media (max-width: 560px) {
  .app-head__title { font-size: 30px; line-height: 36px; }
  .app-head__text p { font-size: 16px; line-height: 24px; }
  .app-head__media img { height: 260px; }
  .app-head__note { position: static; max-width: none; margin-top: 12px; box-shadow: none; padding: 12px 0 0; }
  .app-head__actions { flex-direction: column; align-items: stretch; }
  .app-videos, .app-equipment { padding: 48px 0; }
  .app-section__title { font-size: 24px; line-height: 30px; }
  .app-equipment__title { font-size: 24px; line-height: 30px; margin-bottom: 32px; }
  .videocard { flex-basis: 82%; }
  .eqcard { flex-basis: 78%; }
  .eqcard__media { height: 220px; padding: 28px; }
}

/* ============================================================
   INDUSTRIES (dry ice blasting for your industry)
   ============================================================ */

.ind-head { padding-bottom: 70px; }

.ind-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 624px) minmax(0, 588px);
  justify-content: space-between;
  gap: 60px;
  align-items: center;
}

.ind-head__title {
  margin: 0 0 24px;
  font-size: 40px;
  font-weight: 300;
  line-height: 46px;
  text-transform: uppercase;
  color: var(--blue-900);
}
.ind-head__title span { font-weight: 900; color: var(--red); }

.ind-head__text p {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 26px;
  color: var(--body);
}
.ind-head__text p:last-child { margin-bottom: 0; }

.ind-head__media {
  position: relative;
  margin: 0;
}
.ind-head__media img { width: 100%; height: 345px; object-fit: cover; }

.ind-head__tag {
  position: absolute;
  top: 25px;
  left: 25px;
  padding: 5px 14px;
  background: var(--white);
  border-radius: 2px;
  font-size: 12px;
  line-height: 15px;
  text-transform: uppercase;
  color: var(--blue-900);
}

/* ---------- Card grid ---------- */

.industries { background: var(--white); padding: 0 0 90px; }

.industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.industry {
  display: flex;
  align-items: flex-end;
  min-height: 175px;
  overflow: hidden;
  background: var(--ice);
  transition: transform .25s ease, box-shadow .25s ease;
}
.industry:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(0, 51, 108, .12);
}

/* Photo cards are taller and fill the first two rows. */
.industry--photo {
  position: relative;
  min-height: 272px;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.industry__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to top, rgba(1, 45, 93, .85) 0%, rgba(1, 45, 93, 0) 60%);
}

.industry__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 30px;
}
.industry--photo .industry__body { padding: 40px; }

.industry__name {
  font-size: 25px;
  font-weight: 900;
  line-height: 32px;
  text-transform: uppercase;
  color: var(--blue-900);
}
.industry--photo .industry__name { color: var(--white); }
.industry--red .industry__name { color: var(--white); }

.industry__label {
  padding: 6px 9px;
  background: var(--red);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  transition: padding-right .2s ease;
}
.industry:hover .industry__label { padding-right: 20px; }

.industry__label--invert { background: var(--ice); color: var(--red); }

.industry--red { background: var(--red); }

/* ---------- Applications page — mobile ---------- */
@media (max-width: 900px) {
  .ind-head__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .industries__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ind-head { padding-bottom: 48px; }
  .ind-head__title { font-size: 30px; line-height: 36px; margin-bottom: 18px; }
  .ind-head__text p { font-size: 16px; line-height: 24px; }
  .ind-head__media img { height: 240px; }
  .industries { padding-bottom: 56px; }
  .industries__grid { grid-template-columns: 1fr; gap: 16px; }
  .industry { min-height: 150px; }
  .industry--photo { min-height: 220px; }
  .industry--photo .industry__body { padding: 24px; }
  .industry__body { padding: 22px; }
  .industry__name { font-size: 21px; line-height: 27px; }
  .cta--contained .cta__box { padding: 32px 22px; }
  .cta__title { font-size: 24px; line-height: 30px; }
}



/* ============================================================
   APPLICATIONS OVERVIEW — appmini cards (synced from design)
   ============================================================ */

.appmini-section { background: var(--white); padding: 0 0 80px; margin-top: 40px; }

.appmini-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}

.appmini {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  transition: box-shadow .3s ease;
}
.appmini:hover,
.appmini:focus-visible {
  box-shadow: 0 20px 40px rgba(0, 51, 108, .16);
  z-index: 2;
}

/* No photo at rest, and the card never changes size — so hovering one leaves
   the others untouched. On hover the photo floats in just above the card. */
.appmini__media {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 138px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  box-shadow: 0 -10px 30px rgba(0, 51, 108, .16);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.appmini:hover .appmini__media,
.appmini:focus-visible .appmini__media { opacity: 1; transform: none; }

.appmini__media img {
  width: 100%;
  height: 138px;
  object-fit: cover;
}

.appmini__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: -moz-available;
  height: -webkit-fill-available;
  height: stretch;
  padding: 20px 24px 24px;
  /* Grey at rest; clears once the photo floats in on hover. */
  background: #f8f9fa;
  transition: background-color .3s ease;
}
.appmini:hover .appmini__body,
.appmini:focus-visible .appmini__body { background: var(--white); }

.appmini__tag {
  padding: 4px;
  background: var(--slate);
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--white);
}

/* A fixed two-line height keeps one- and two-line titles the same size, so
   every card matches without coupling their heights through the grid. */
.appmini__title {
  margin: 0;
  min-height: 48px;
  font-size: 22px;
  font-weight: 300;
  line-height: 24px;
  color: var(--blue-900);
}

.appmini__link {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration: underline;
  color: var(--red);
}

@media (max-width: 980px) { .appmini-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .appmini-grid { grid-template-columns: repeat(2, 1fr); } }


/* ============================================================
   PRODUCTS (overview + category + detail) — synced from design
   ============================================================ */
/* ============================================================
   PRODUCT CATEGORY DETAIL
   ============================================================ */

.prodcat-head { padding-bottom: 60px; }

.prodcat-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 695px) minmax(0, 517px);
  justify-content: space-between;
  gap: 60px;
  align-items: start;
}

.prodcat-head__tag {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 8px;
  background: var(--blue-900);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}

.prodcat-head__title {
  margin: 0 0 24px;
  font-size: 40px;
  font-weight: 300;
  line-height: 46px;
  text-transform: uppercase;
  color: var(--blue-900);
}

.prodcat-head__text p {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 28px;
  color: var(--body);
}
.prodcat-head__text a { font-weight: 900; color: var(--blue-900); text-decoration: underline; }
.prodcat-head__text a:hover { color: var(--red); }

.prodcat-head__list {
  margin: 0;
  padding-left: 27px;
  list-style: disc;
}
.prodcat-head__list li {
  margin-bottom: 6px;
  font-size: 18px;
  line-height: 28px;
  color: var(--body);
}
.prodcat-head__list strong { color: #b6191d; }

/* Promo boxes */
.prodcat-head__promos {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* On categories without the "Do the test" box, drop the lone contact box to the
   bottom of the column instead of leaving it at the top. */
.prodcat-head__promos:not(:has(.promo-box--ice)) {
  align-self: stretch;
  justify-content: flex-end;
}
.promo-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 28px;
}
.promo-box--ice { background: var(--ice); }
.promo-box--dark { background: var(--blue-900); }
.promo-box p {
  margin: 0;
  font-size: 18px;
  line-height: 23px;
  color: var(--blue-900);
}
.promo-box--dark p { color: var(--white); }
.promo-box .btn { min-width: 0; white-space: normal; text-align: center; }

/* Closing call-to-action band at the bottom of the dry-ice-machines category:
   a final nudge towards the blaster-selection test. */
.prodcat-cta { background: var(--ice); padding: 56px 0; }
.prodcat-cta__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  text-align: center;
}
.prodcat-cta__title {
  margin: 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  color: var(--blue-900);
}
@media (max-width: 600px) {
  .prodcat-cta { padding: 44px 0; }
  .prodcat-cta__inner { flex-direction: column; gap: 20px; }
}

/* Product groups */
.prodcat { background: var(--white); padding: 60px 0 90px; }

.prodcat__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}

.prodcat-group__label {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px;
  background: var(--blue-900);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--white);
}

.prodcat-group__title {
  margin: 0 0 24px;
  font-size: 25px;
  font-weight: 700;
  line-height: 36px;
  text-transform: uppercase;
  color: var(--blue-900);
}

.prodcat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 30px;
}
/* The two-up groups pack their cards two across. */
.prodcat__row .prodcat-cards { grid-template-columns: 1fr 1fr; }

/* Reuses the equipment card look from the application page. */
.prodcat-cards .eqcard { flex: none; }
.prodcat-cards .eqcard__media { background: var(--ice); }

/* Category page responsive. Placed AFTER the base rules above (media queries
   don't raise specificity, so an earlier @media block would lose to these). */
@media (max-width: 900px) {
  .prodcat-head__grid { grid-template-columns: 1fr; gap: 32px; }
  .prodcat__row { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .prodcat-head__title { font-size: 30px; line-height: 36px; }
  .promo-box { flex-direction: column; align-items: flex-start; gap: 16px; }
  .promo-box .btn { align-self: flex-start; }
  /* One card per row on phones so each product photo is shown large. The media
     box grows to fit the image (a fixed height let the image spill over the
     title), and the photo fills the card width. */
  .prodcat-cards,
  .prodcat__row .prodcat-cards { grid-template-columns: 1fr; gap: 24px; }
  .prodcat-cards .eqcard__media { height: auto; padding: 20px; }
  .prodcat-cards .eqcard__media img { width: 100%; height: auto; max-height: none; }
}

/* ============================================================
   PRODUCT OVERVIEW
   ============================================================ */

.prod-head { padding-bottom: 50px; }

.prod-head__title {
  margin: 24px 0 16px;
  font-size: 40px;
  font-weight: 300;
  line-height: 46px;
  text-transform: uppercase;
  color: var(--blue-900);
}

.prod-head__lead {
  max-width: 624px;
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  color: var(--body);
}

/* The overview reuses the home-page product cards on a plain white section. */
.products--overview { background: var(--white); padding: 60px 0 90px; }


/* ============================================================
   PRODUCT DETAIL
   ============================================================ */

/* Product label — small blue chip used over media and next to spec blocks */
.plabel {
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
  background: var(--blue-900);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}
.plabel--light { background: var(--white); color: var(--blue-900); }
.plabel--corner { position: absolute; top: 10px; left: 10px; z-index: 1; }

/* ---------- Hero ---------- */
.prod-detail-head { padding-bottom: 70px; }

.prod-detail-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 625px) minmax(0, 397px);
  justify-content: space-between;
  gap: 60px;
  align-items: center;
}

.prod-detail-head__sub {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--red);
}
.prod-detail-head__title {
  margin: 0 0 24px;
  font-size: 40px;
  font-weight: 300;
  line-height: 46px;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--blue-900);
}
.prod-detail-head__lead {
  margin: 0 0 36px;
  font-size: 18px;
  font-weight: 300;
  line-height: 28px;
  color: var(--body);
}
.prod-detail-head__actions { display: flex; flex-wrap: wrap; gap: 16px; }

.prod-detail-head__media {
  position: relative;
  margin: 0;
}
.prod-detail-head__media img { width: 100%; height: 378px; object-fit: contain; }

/* ---------- Gallery ---------- */
.prod-gallery { background: var(--white); padding: 60px 0; }
.prod-gallery__track { gap: 24px; }

.gallery-card {
  position: relative;
  flex: 0 0 406px;
  scroll-snap-align: start;
}
.gallery-card img { display: block; width: 100%; height: 275px; object-fit: cover; }
.gallery-card .plabel { position: absolute; left: 12px; bottom: 12px; }

/* Editor only: the block editor has no carousel, so lay the gallery out as a
   tidy grid of thumbnails instead of full-width images stacked under each
   other. These classes exist solely in the editor markup, so the front-end
   carousel above is unaffected. */
.so-ed-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
  align-items: start;
}
.so-ed-gallery-card {
  flex: none;
  margin: 0;
  border: 1px solid var(--ice, #e6ecf5);
  border-radius: 8px;
  overflow: hidden;
}
.so-ed-gallery-card img { height: 150px; }
.so-ed-gallery-card .plabel { left: 8px; bottom: 8px; }

/* ---------- Benefits ---------- */
.prod-benefits { background: var(--ice); padding: 80px 0; }

.prod-benefits__grid {
  display: grid;
  grid-template-columns: minmax(0, 586px) minmax(0, 626px);
  justify-content: space-between;
  gap: 60px;
  align-items: center;
}

.prod-benefits__title {
  margin: 0 0 36px;
  font-size: 30px;
  font-weight: 300;
  line-height: 36px;
  text-transform: uppercase;
  color: var(--blue-900);
}
.prod-benefits__title strong { font-weight: 900; }

.prod-benefits__list { margin: 0 0 40px; }
.prod-benefits__list li {
  position: relative;
  padding-left: 40px;
  min-height: 26px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 26px;
  color: var(--blue-900);
}
.prod-benefits__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Ccircle cx='12.5' cy='12.5' r='12.5' fill='%23b5232a'/%3E%3Cpath d='M6.5 12.8l3.7 3.7 8-8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.prod-benefits__media { margin: 0; }
.prod-benefits__media img { width: 100%; height: 470px; object-fit: cover; }

/* ---------- Video ---------- */
.prod-video { background: var(--white); padding: 80px 0; text-align: center; }
.prod-video__title {
  margin: 0 0 20px;
  font-size: 30px;
  font-weight: 300;
  line-height: 36px;
  text-transform: uppercase;
  color: var(--blue-900);
}
.prod-video__title strong { font-weight: 900; }
.prod-video__lead {
  max-width: 844px;
  margin: 0 auto 50px;
  font-size: 18px;
  font-weight: 300;
  line-height: 28px;
  color: var(--body);
}
.prod-video__frame { max-width: 844px; margin-inline: auto; }
/* Only the poster (a direct child) gets the fixed frame height; the play
   button's own image must not be stretched to it. */
.prod-video__frame > img { height: 475px; object-fit: cover; }

/* ---------- Components ---------- */
.components { background: #f8fafc; padding: 90px 0; }

.components__grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

.components__panels { display: grid; }
.comppanel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 60px;
  align-items: start;
}
.comppanel[hidden] { display: none; }
.comppanel.is-active { animation: comppanel-in .35s ease both; }
@keyframes comppanel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .comppanel.is-active { animation: none; }
}

.components__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--blue-900);
}
.components__label {
  margin: 0 0 32px;
  font-size: 12px;
  font-weight: 500;
  color: var(--slate);
}

.compnav { display: flex; flex-direction: column; gap: 8px; }
.compnav__item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 300;
  color: var(--slate);
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.compnav__item:hover { background: rgba(0, 51, 108, .06); }
.compnav__dot {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 50%;
  flex-shrink: 0;
}
.compnav__item.is-active {
  background: var(--blue-900);
  color: var(--white);
  font-weight: 500;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.compnav__item.is-active .compnav__dot { background: var(--white); border-color: var(--white); }
.compnav__item--download {
  margin-top: 25px;
  padding-top: 33px;
  border-top: 1px solid #e2e8f0;
  border-radius: 0;
  color: var(--red);
  font-weight: 700;
}
.compnav__item--download:hover { background: transparent; text-decoration: underline; }
.compnav__item--download svg { width: 16px; height: 16px; flex-shrink: 0; }

.components__body { display: flex; flex-direction: column; gap: 40px; }
.compblock .plabel { margin-bottom: 12px; }
.compblock__title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
  color: var(--blue-900);
}
.compblock__intro,
.compblock__note { margin: 0; font-size: 14px; line-height: 20px; color: var(--body); }
.compblock__intro { margin-bottom: 4px; }
.compblock__note { margin-top: 8px; }
.compblock__list {
  margin: 0;
  padding-left: 21px;
  list-style: disc;
}
.compblock__list li { font-size: 14px; line-height: 20px; color: var(--body); margin-bottom: 2px; }

.components__media {
  position: relative;
  margin: 0;
  background: var(--white);
  padding: 40px;
  display: grid;
  place-items: center;
  align-self: stretch;
}
.components__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.components__media-label { position: absolute; left: 12px; bottom: 12px; }

/* ---------- Applications ---------- */
.prod-apps { background: var(--white); padding: 20px 0 90px; }
.prod-apps__title {
  margin: 0 0 50px;
  font-size: 30px;
  font-weight: 300;
  line-height: 36px;
  text-transform: uppercase;
  text-align: center;
  color: var(--blue-900);
}
.prod-apps__title strong { font-weight: 900; }
.prod-apps__track { gap: 24px; }
.prod-apps__track > li { flex: 0 0 calc((100% - 72px) / 4); scroll-snap-align: start; display: flex; }
.prod-apps__card { flex: 1; min-height: 210px; }

@media (max-width: 980px) {
  .prod-detail-head__grid { grid-template-columns: 1fr; gap: 40px; }
  .prod-detail-head__media img { height: auto; max-height: 340px; }
  .prod-benefits__grid { grid-template-columns: 1fr; gap: 40px; }
  .prod-benefits__media { order: -1; }
  .prod-benefits__media img { height: 320px; }
  .prod-video__frame > img { height: auto; }
  .components__grid { grid-template-columns: 220px minmax(0, 1fr); }
  .comppanel { grid-template-columns: 1fr; }
  .components__media { min-height: 360px; }
  .prod-apps__track > li { flex: 0 0 70%; }
}

@media (max-width: 640px) {
  .prod-detail-head__title { font-size: 32px; line-height: 38px; }
  .prod-detail-head__actions .btn { flex: 1 1 auto; }
  .gallery-card { flex: 0 0 82%; }
  .gallery-card img { height: 220px; }
  .components__grid { grid-template-columns: 1fr; gap: 40px; }
  .components__media { min-height: 260px; padding: 24px; }
  .prod-apps__track > li { flex: 0 0 82%; }
}

@media (max-width: 480px) {
  /* Smaller title so long product names (e.g. "Droogijsstraalmachine") fit a
     phone line instead of breaking mid-word, and a tighter component photo box
     so the image shows larger with less empty space. */
  .prod-detail-head__title { font-size: 26px; line-height: 32px; letter-spacing: 0; }
  .components__media { min-height: 200px; padding: 16px; }
}


/* Product component "Downloads" tab — a list of the product's files. */
.comp-downloads { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.comp-download {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 16px;
	background: var(--ice);
	color: var(--blue-900);
	font-size: 14px; font-weight: 600; line-height: 20px;
	text-decoration: none;
	border-radius: 4px;
	transition: background .2s ease, color .2s ease;
}
.comp-download:hover { background: var(--periwinkle); color: var(--red); }
.comp-download__icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================
   WORDPRESS ADAPTATION LAYER
   Everything above is the design stylesheet, unchanged.

   Below: the design assumes hand-written markup, but some of this
   site is rendered by WordPress core blocks whose markup we do not
   control. These rules map that markup onto the design's classes.
   Nothing here introduces new design decisions.
   ============================================================ */

/* Each hero slide has its own photo now, so the media holds one <img> per
   slide stacked on top of each other; only the active one is shown, with a
   soft crossfade in step with the text panel. */
.hero__media { position: relative; }
.hero__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity .5s ease;
}
.hero__media-img[hidden] { display: block; opacity: 0; pointer-events: none; }

/* The applications panel CTAs take editable text (no hard-coded <br>), so the
   design's `white-space: nowrap` on .btn--stack would force one very wide line
   and overflow the grid. Let these buttons wrap, and let the grid tracks shrink
   to their share instead of to the button's intrinsic width. */
.applications__grid { min-width: 0; }
.applications__grid > .panel { min-width: 0; }
.applications .btn--stack { white-space: normal; }

/* Design tokens come from theme.json so they are also editable in the
   Site Editor. The design's raw hex values are re-pointed at them. */
:root {
	--blue-900: var(--wp--preset--color--blue-900, #00336c);
	--blue-800: var(--wp--preset--color--blue-800, #012d5d);
	--blue-700: var(--wp--preset--color--blue-700, #013a79);
	--blue-600: var(--wp--preset--color--blue-600, #05448b);
	--red: var(--wp--preset--color--red, #e63946);
	--periwinkle: var(--wp--preset--color--periwinkle, #bac0e1);
	--ice: var(--wp--preset--color--ice, #f1f8ff);
	--slate: var(--wp--preset--color--slate, #64748b);
	--body: var(--wp--preset--color--body, #424751);
	--line: var(--wp--preset--color--line, #e2e8f0);
}

/* --- core/button ---
   The design styles <a class="btn btn--blue">. core/button puts custom
   classes on the wrapper <div> and renders the <a> inside it, so the
   modifier is read from the wrapper and applied to the link. */
.wp-block-buttons { gap: 0; }

.wp-block-button.btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 20px 30px;
	border: 0;
	border-radius: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 5px;
	line-height: 18px;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.wp-block-button.btn .wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.btn--blue .wp-block-button__link { background: var(--blue-900); color: var(--white); box-shadow: var(--shadow-blue); }
.wp-block-button.btn--blue .wp-block-button__link:hover { background: var(--blue-600); }
.wp-block-button.btn--red .wp-block-button__link { background: var(--red); color: var(--white); box-shadow: var(--shadow-red); }
.wp-block-button.btn--red .wp-block-button__link:hover { background: #cf2f3c; }
.wp-block-button.btn--periwinkle .wp-block-button__link { background: var(--periwinkle); color: var(--blue-900); }
.wp-block-button.btn--sm .wp-block-button__link { padding: 15px 26px; }
.wp-block-button.btn--wide .wp-block-button__link { font-size: 16px; }
.wp-block-button.btn--pill .wp-block-button__link { padding: 16px 32px; font-size: 12px; font-weight: 300; letter-spacing: 3px; }
.wp-block-button.btn--stack .wp-block-button__link { letter-spacing: 2px; line-height: 18px; white-space: nowrap; }
.panel:hover .wp-block-button.btn .wp-block-button__link,
.panel:focus-within .wp-block-button.btn .wp-block-button__link {
	background: var(--white);
	color: var(--panel-accent);
	box-shadow: none;
}

/* --- core/query + core/post-template ---
   The design's product card is <a class="card">. A Query Loop renders
   <ul class="products__grid"><li class="wp-block-post">, so the card
   styles are re-hung on the list item. */
.products__grid { margin: 0; padding: 0; list-style: none; }

.products__grid > .wp-block-post {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 581px;
	overflow: hidden;
	background: var(--white);
	isolation: isolate;
	margin: 0;
}
.products__grid > .wp-block-post::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	height: 40%;
	background: var(--red);
	transform: translateY(100%);
	transition: transform .35s ease;
}
.products__grid > .wp-block-post:hover::after,
.products__grid > .wp-block-post:focus-within::after { transform: none; }
.products__grid > .wp-block-post:hover .card__media,
.products__grid > .wp-block-post:focus-within .card__media { height: 60%; }
.products__grid > .wp-block-post:hover .card__media::after,
.products__grid > .wp-block-post:focus-within .card__media::after { opacity: 0; }

/* The featured image is the card photo; a product without one gets the
   flat blue card the design uses for the repacker. */
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.products__grid > .wp-block-post:not(:has(.card__media img)) { background: var(--blue-700); }

.card__body .wp-block-post-title {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 900;
	line-height: 26px;
	text-transform: uppercase;
	color: var(--white);
}
/* Stretch the title link so the whole card is clickable, as the design's
   <a class="card"> wrapper was. */
.card__body .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}
.card__body .wp-block-post-excerpt { margin: 0 0 15px; font-size: 14px; font-weight: 500; line-height: 20px; }
.card__body .wp-block-post-excerpt p { margin: 0; }
.card__body .wp-block-post-excerpt__more-text { display: none; }

.card__cta::after {
	content: "";
	width: 4px;
	height: 7px;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transition: transform .2s ease;
	flex-shrink: 0;
}
.products__grid > .wp-block-post:hover .card__cta::after,
.card:hover .card__cta::after { transform: translateX(3px); }

/* Longer intros (e.g. the Dutch category descriptions) would run past the
   bottom of the card. Clamp the teaser to a few lines so it wraps and
   truncates inside the card, and let long single-word titles break. */
.card__body p,
.card__body .wp-block-post-excerpt p {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.card__body h3,
.card__body .wp-block-post-title {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Long compound words are common in Dutch (e.g. "droogijsoplossingen"). In a
   heading they would not break and pushed the whole page wider than a phone
   viewport. `anywhere` (not `break-word`) also shrinks the intrinsic min-width,
   so grid/flex tracks stop growing to the unbroken word. */
h1, h2, h3, h4,
.section-title, .panel__title, .funnel__card h3, .prod-detail-head__title {
	overflow-wrap: anywhere;
}

/* The design's hover red bar is a fixed 40% of the card, so a taller card
   body (longer titles/intros) sticks out above it. Anchor the red slide to the
   body itself instead, so it always covers the copy whatever its height. */
.card::after { display: none; }
.card__body::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--red);
	transform: translateY(100%);
	transition: transform .35s ease;
}
.card:hover .card__body::before,
.card:focus-visible .card__body::before { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.card__body::before { transition: none; }
}

/* --- core/image ---
   The design's video play button is a <button>; here it is a linked image
   so it still works without JavaScript. */
.video__poster { margin: 0; }
.video__play a { display: block; width: 100%; }

/* --- core/heading + core/paragraph ---
   The design's panel title is one <h3> with a <span> and a <strong>. The
   editor rejects raw inline tags it does not own, so it is two blocks. */
.panel__title-lead,
.panel__title-main { margin: 0; color: inherit; line-height: 28px; text-transform: uppercase; }
.panel__title-lead { font-size: 20px; font-weight: 300; }
.panel__title-main { font-size: 25px; font-weight: 900; }
.panel:hover .panel__title-lead,
.panel:hover .panel__title-main,
.panel:focus-within .panel__title-lead,
.panel:focus-within .panel__title-main { color: var(--white); }

/* --- editor-only ---
   Keep the Site Editor canvas from clipping full-bleed sections. */
.editor-styles-wrapper .hero,
.editor-styles-wrapper .marquee { max-width: none; }

/* --- FAQ answers ---
   Answers are authored in the block editor and contain real lists. The design
   resets list markers globally (it never had lists inside an answer), so they
   are restored just inside the accordion content. */
.accordion__content ul,
.accordion__content ol {
	list-style: disc;
	margin: 0 0 12px;
	padding-left: 20px;
}
.accordion__content ol { list-style: decimal; }
.accordion__content li { margin-bottom: 4px; }
.accordion__content > *:last-child { margin-bottom: 0; }

/* --- vacancy body ---
   The body is authored in the block editor, so lists come out as
   <ul class="wp-block-list">, not the design's .bullets. Give them the same
   red-square markers. h3 is a sub-head the design's static page never needed. */
.vacancy__body ul {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}
.vacancy__body ul li {
	display: flex;
	gap: 12px;
	font-size: 16px;
	line-height: 24px;
	color: #001a48;
}
.vacancy__body ul li::before {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	margin-top: 9px;
	background: #b6191d;
}

.vacancy__body h3 {
	margin: 28px 0 12px;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	color: var(--blue-900);
}
.vacancy__body h3:first-child { margin-top: 0; }

.vacancy__body a {
	color: var(--red);
	font-weight: 500;
	text-decoration: underline;
}

/* --- language switcher ---
   Polylang's switcher renders links; the design's static one used buttons.
   Give the links the same look. */
.nav__lang-menu a {
	display: block;
	width: 100%;
	padding: 8px 14px;
	font-size: 12px;
	color: var(--blue-900);
}
.nav__lang-menu a:hover,
.nav__lang-menu a:focus-visible { background: var(--ice); outline: 0; }
.nav__lang-menu a[aria-current="true"] { font-weight: 700; }

/* --- apply form: the file button ---
   The file button is a <label> inside .field--full, so the design's
   `.field label` (specificity 0,1,1) outranks `.file-field__btn` (0,1,0) and
   overrides its white with the blue field-label colour. Source order does not
   help — specificity wins. Bumping to a two-class selector restores the white.

   NOTE: the same bug exists in the design's own styles.css; fix it there too if
   you want the static pages to match. This override survives a design re-sync
   because the adaptation layer is appended after the design CSS. */
.field .file-field__btn {
	color: var(--white);
	text-transform: none;
	letter-spacing: normal;
	font-size: 13px;
	font-weight: 400;
	margin-bottom: 0;
}

/* --- blog: core/query renders the cards ---
   The design's card is <article class="post">. A Query Loop renders
   <ul class="posts__grid"><li class="wp-block-post">, so the card styles are
   re-hung on the list item. Same trick as the products grid. */
.posts__grid { margin: 0; padding: 0; list-style: none; }

.posts__grid > .wp-block-post {
	display: flex;
	flex-direction: column;
	margin: 0;
	border: 1px solid var(--periwinkle);
	background: var(--white);
	transition: transform .25s ease, box-shadow .25s ease;
}
.posts__grid > .wp-block-post:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 30px rgba(0, 51, 108, .12);
}
.posts__grid > .wp-block-post:hover .post__media img { transform: scale(1.04); }

.post__media { margin: 0; }
.post__media img {
	width: 100%;
	height: 252px;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

/* core/post-terms and core/post-title bring their own wrappers. */
.post__body .wp-block-post-terms { margin: 0 0 16px; }
.post__body .wp-block-post-terms a { color: inherit; }
.post__body .wp-block-post-excerpt { margin: 0 0 20px; }
.post__body .wp-block-post-excerpt p { margin: 0; }
.post__body .wp-block-post-excerpt__more-text { display: none; }

.posts__pagination {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 48px;
	font-size: 14px;
	color: var(--blue-900);
}
.posts__pagination .page-numbers.current { font-weight: 900; color: var(--red); }

/* --- article body ---
   The post content is authored in the block editor, so it arrives as plain
   blocks rather than the design's .article__row scaffolding. Give the blocks
   the article's typography, and let core/quote pick up the .quote look. */
.article__text > * { max-width: 843px; margin-inline: auto; }
.article__text .wp-block-image img { width: 100%; height: auto; }
.article__text ul,
.article__text ol { margin: 0 0 20px; padding-left: 20px; list-style: disc; }
.article__text ol { list-style: decimal; }
.article__text li { margin-bottom: 8px; line-height: 26px; }
.article__text a { color: var(--red); text-decoration: underline; }

/* --- blog card: make the whole card clickable ---
   In the design .post__link is a <span>, so only the image and the title were
   links and "Read more about this blog" did nothing. Stretch the title's link
   over the whole card instead — the same trick the product cards use. Covers
   both the Query Loop grid and the PHP-rendered related-posts grid. */
.posts__grid > .wp-block-post,
.posts__grid > .post {
	position: relative;
}
.posts__grid .wp-block-post-title a::after,
.posts__grid .post__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}
/* Keep the image link out of the way; the stretched link handles the click. */
.posts__grid .post__media a { pointer-events: none; }
.posts__grid .post__link { position: relative; z-index: 1; }

/* --- article body: core blocks ---
   The design hand-wrote <blockquote class="quote">. A post written in the block
   editor produces core/quote, so give .wp-block-quote the same pull-quote look.
   Without this the editor canvas would look better than the published page. */
.article__text .wp-block-quote {
	position: relative;
	max-width: 844px;
	margin: 0 auto 60px;
	padding: 42px 90px;
	border: 0;
	background: var(--periwinkle);
}
.article__text .wp-block-quote p {
	margin: 0 0 16px;
	font-size: 30px;
	font-weight: 300;
	line-height: 35px;
	color: var(--white);
}
.article__text .wp-block-quote cite {
	display: block;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	line-height: 36px;
	text-transform: uppercase;
	font-style: normal;
	color: var(--slate);
}
.article__text h2 {
	margin: 40px 0 20px;
	font-size: 25px;
	font-weight: 300;
	line-height: 30px;
	color: var(--blue-900);
}
.article__text h2:first-child { margin-top: 0; }
.article__text h3 {
	margin: 32px 0 12px;
	font-size: 20px;
	font-weight: 500;
	line-height: 26px;
	color: var(--blue-900);
}

/* --- article rows: core/columns ---
   The design hand-writes <div class="article__row"> with a text column and a
   media column, alternating sides. In the editor that is a core/columns block,
   so give .wp-block-columns inside the article the same shape. Reversing is the
   editor's own "Media on the right/left" — i.e. just the column order. */
.article__text .wp-block-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	max-width: 844px;
	margin: 0 auto 60px;
}
.article__text .wp-block-columns .wp-block-column { flex-basis: auto !important; }
.article__text .wp-block-columns .wp-block-image { margin: 0; }
.article__text .wp-block-columns .wp-block-image img {
	width: 100%;
	height: 227px;
	object-fit: cover;
	display: block;
}
.article__text .wp-block-columns h2 { margin-top: 0; }
.article__text .wp-block-columns p:last-child { margin-bottom: 0; }

/* The video: core/embed rather than the design's placeholder + play button. */
.article__text .wp-block-embed {
	max-width: 844px;
	margin: 0 auto 40px;
}
.article__text .wp-block-embed iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	display: block;
	border: 0;
}

@media (max-width: 900px) {
	.article__text .wp-block-columns { grid-template-columns: 1fr; gap: 24px; }
}

/* --- tile-btn: its own hover ---
   The design only moves the arrow when the surrounding card is hovered
   (.dl-card:hover / .job-card:hover). A standalone tile-btn — the "Overview of
   our blogs" button in the related-posts header — has no card, so nothing
   happened. Give the button itself a hover, using the same red as .btn--red. */
.tile-btn {
	transition: background-color .2s ease, transform .2s ease;
}
.tile-btn:hover,
.tile-btn:focus-visible {
	background: #cf2f3c;
	transform: translateY(-2px);
}
.tile-btn:hover svg,
.tile-btn:focus-visible svg {
	transform: translateX(3px);
}
/* Inside a card the card owns the lift, so only the arrow should move. */
.dl-card .tile-btn:hover,
.job-card .tile-btn:hover,
.posts__grid .tile-btn:hover {
	transform: none;
}

/* --- company page: core blocks ---
   The design hand-writes <div class="split"> with two children. In the editor
   that is a core/columns block, which is flex — so re-declare the grid, and let
   the column divs stand in for .split__text / .split__media. */
.wp-block-columns.split {
	display: grid;
	grid-template-columns: minmax(0, 687px) minmax(0, 547px);
	justify-content: space-between;
	gap: 60px;
	align-items: center;
	margin-bottom: 0;
}
.wp-block-columns.split > .wp-block-column { flex-basis: auto !important; margin: 0; }

/* The base .split rule above (.wp-block-columns.split, two classes) outranks the
   responsive .split{1fr}, so the columns must be collapsed at this specificity too. */
@media (max-width: 900px) {
  .wp-block-columns.split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

/* The media column holds either an image block or the Video block. */
.split__media .wp-block-image { margin: 0; }
.split__media .wp-block-image img { width: 100%; height: auto; display: block; }

/* The Video block renders the design's <figure class="video">. Inside a split
   column it should fill the column, not the 628px the home page uses. */
.split__media .video {
	position: relative;
	max-width: none;
	margin: 0;
	overflow: hidden;
}
.split__media .video img { width: 100%; height: auto; display: block; }
.split__media .video > img { filter: blur(1px); }
.split__media .video__play img { filter: none; }

/* --- editor previews for the company-page blocks ---
   These only render inside the editor. They imitate the published page on
   purpose: a block you cannot recognise is a block nobody dares touch. */

.so-ed-breadcrumb {
	padding: 8px 0;
	font-size: 12px;
	text-transform: uppercase;
	color: var(--blue-900);
}
.so-ed-breadcrumb__sep { margin: 0 6px; }

/* Video */
.so-ed-video { position: relative; margin: 0; }
.so-ed-video img { width: 100%; height: auto; display: block; }
.so-ed-video__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 16px 0 16px 26px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4));
	pointer-events: none;
}
.so-ed-video__warn {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--red);
}

/* Timeline — the blue band, as published */
.so-ed-timeline {
	padding: 20px 16px 24px;
	background: var(--blue-900);
	border-radius: 4px;
}
.so-ed-timeline__hint {
	margin: 0 0 14px;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}
.so-ed-timeline__track {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	align-items: flex-start;
	padding-bottom: 8px;
}
.so-ed-timeline__track > .block-editor-button-block-appender {
	flex: 0 0 auto;
	align-self: center;
	color: #fff;
	background: rgba(255, 255, 255, .12);
}

.so-ed-milestone {
	flex: 0 0 140px;
	text-align: center;
	color: #fff;
}
.so-ed-milestone__photo {
	display: block !important;
	width: 100%;
	height: 86px !important;
	padding: 0 !important;
	background: rgba(255, 255, 255, .1);
	border-radius: 2px;
	overflow: hidden;
}
.so-ed-milestone__photo img { width: 100%; height: 86px; object-fit: contain; }
.so-ed-milestone__pick {
	display: grid;
	place-items: center;
	height: 86px;
	font-size: 12px;
	color: rgba(255, 255, 255, .7);
}
.so-ed-milestone__label {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 16px;
	color: rgba(255, 255, 255, .85);
}
.so-ed-milestone__stem {
	display: block;
	width: 1px;
	height: 18px;
	margin: 8px auto;
	background: rgba(255, 255, 255, .4);
}
.so-ed-milestone__year {
	margin: 0;
	font-size: 20px;
	font-weight: 300;
	color: #fff;
}

/* Dry ice tabs — the strip beside its panels, as published */
.so-ed-tabs {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 24px;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: 4px;
}
.so-ed-tabs__hint {
	margin: 0 0 8px;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--slate);
}
.so-ed-tabs__strip { display: flex; flex-direction: column; gap: 2px; }
.so-ed-tabs__tab {
	padding: 12px 14px;
	border: 0;
	background: var(--ice);
	font: inherit;
	font-size: 13px;
	text-align: left;
	color: var(--blue-900);
	cursor: pointer;
}
.so-ed-tabs__tab:hover { background: var(--periwinkle); }
.so-ed-tabs__tab.is-active { background: var(--blue-900); color: #fff; }

.so-ed-tabs__panels { display: flex; flex-direction: column; gap: 12px; }

.so-ed-panel {
	padding: 12px 16px 4px;
	border: 1px solid var(--line);
	border-radius: 4px;
}
.so-ed-panel__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}
.so-ed-panel__badge {
	padding: 2px 8px;
	background: var(--ice);
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--slate);
}
.so-ed-panel__label { font-weight: 700; color: var(--blue-900); }

/* --- core/button: the wrapper must not become a second button ---
   core/button puts our custom classes on its wrapper <div>, not on the <a>.
   The design's `.btn { padding: 20px 30px }` and `.btn--red { background: red }`
   therefore match that wrapper as well as the link inside it — two nested red
   boxes, each with its own padding. That is why the buttons look fat, and why
   hovering only lit up the inner one.

   So: strip every button style back off the wrapper, and let the <a> be the
   button. [class*="btn"] outranks the design's single-class rules. */
.wp-block-button[class*="btn"] {
	display: inline-block;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	line-height: normal;
	text-transform: none;
	text-align: initial;
	transition: none;
	transform: none;
	cursor: auto;
}
.wp-block-button[class*="btn"]:hover,
.wp-block-button[class*="btn"]:active {
	background: none;
	box-shadow: none;
	transform: none;
}

/* The design underlines links inside body copy (.split__text a, .about-band__text a).
   A button is not body copy. */
.wp-block-button .wp-block-button__link {
	text-decoration: none;
}
.wp-block-button .wp-block-button__link:hover {
	text-decoration: none;
}

/* --- dry ice tabs: an image PER TAB ---
   The design has three grid columns (tabs | panels | image), with the image
   outside the panels — so it could never change when you switch tab. Each panel
   now carries its own image and is itself a two-column grid. The published
   layout is identical; the image just belongs to the tab now. */
.principle__grid--panels {
	grid-template-columns: 189px minmax(0, 1fr);
}
.principle__panels > [data-category] {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 407px;
	gap: 40px;
	align-items: start;
}
.principle__panels > [data-category][hidden] { display: none; }

.principle__media { margin: 0; }
.principle__media img {
	width: 100%;
	height: 254px;
	object-fit: cover;
	display: block;
}

@media (max-width: 900px) {
	.principle__grid--panels { grid-template-columns: 1fr; }
	.principle__panels > [data-category] { grid-template-columns: 1fr; gap: 24px; }
}

/* editor: the image sits beside each panel, as it does on the page */
.so-ed-tabs__media {
	display: block !important;
	width: 100%;
	height: auto !important;
	padding: 0 !important;
	background: var(--ice);
}
.so-ed-tabs__media img { width: 100%; height: 150px; object-fit: cover; display: block; }
.so-ed-tabs__media-pick {
	display: grid;
	place-items: center;
	height: 150px;
	font-size: 12px;
	color: var(--slate);
	border: 1px dashed var(--periwinkle);
}

/* editor: each panel shows its own image beside its content */
.so-ed-tabs { grid-template-columns: 200px minmax(0, 1fr); }
.so-ed-panel__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 180px;
	gap: 16px;
	align-items: start;
}
.so-ed-panel__media {
	display: block !important;
	width: 100%;
	height: auto !important;
	padding: 0 !important;
	background: var(--ice);
}
.so-ed-panel__media img { width: 100%; height: 120px; object-fit: cover; display: block; }
.so-ed-panel__pick {
	display: grid;
	place-items: center;
	height: 120px;
	padding: 8px;
	font-size: 11px;
	text-align: center;
	color: var(--slate);
	border: 1px dashed var(--periwinkle);
}

/* --- dealers carousel ---
   overflow-x:auto makes the browser compute overflow-y to auto too, so the
   track scrolled vertically when a tile was taller than the row. Pin it. */
.dealers .carousel__track { overflow-y: hidden; }

/* A partner logo, when one is uploaded; otherwise the design's checkerboard. */
.partner__thumb.has-logo {
	background: var(--white);
	display: grid;
	place-items: center;
	padding: 20px;
}
.partner__thumb.has-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* A default (brand) logo sits smaller than an uploaded partner logo, so it
   reads as a placeholder brand mark rather than the partner's own identity. */
.partner__thumb.is-default { padding: 40px 28px; }
.partner__thumb.is-default img { opacity: .85; }

/* A partner photo fills the thumb square. */
.partner__thumb.has-photo { background: var(--white); overflow: hidden; }
.partner__thumb.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* editor: dealer carousel slides */
.so-ed-dealers { display: flex; flex-wrap: wrap; gap: 12px; }
.so-ed-slide { width: 150px; }
.so-ed-slide__photo {
	display: block !important;
	width: 100%;
	height: 110px !important;
	padding: 0 !important;
	background: var(--ice);
	overflow: hidden;
}
.so-ed-slide__photo img { width: 100%; height: 110px; object-fit: cover; display: block; }
.so-ed-slide__pick { display: grid; place-items: center; height: 110px; font-size: 12px; color: var(--slate); }
.so-ed-slide__caption { margin: 6px 0 0; font-size: 13px; text-align: center; color: var(--blue-900); }

/* --- partner list: masonry ---
   The design lays the country groups out as a CSS grid, so every row is as tall
   as its tallest group and short countries leave gaps. CSS multi-column packs
   them tightly instead — each group flows into the shortest column, and
   break-inside keeps a country whole. Appended after the design, so it wins. */
.partner-list {
	display: block;
	column-width: 220px;
	column-gap: 30px;
}
.partner-list__group {
	break-inside: avoid;
	margin-bottom: 30px;
}

/* A partner with no contact person on record: hide the empty second line so it
   does not leave a phantom gap in the country list. */
.partner-list__person:empty { display: none; }

/* --- dry ice page FAQ: core/details as the blue accordion ---
   The design's FAQ uses the .accordion--process button/panel markup driven by
   cryonomic.js. Authored in the editor it is core/details instead, so style
   .wp-block-details to match: blue bars cycling four shades, a chevron that
   flips, and a light panel. Native, editable, no JS. */
.ds-faq__accordion .wp-block-details { margin: 0; }
.ds-faq__accordion .wp-block-details:nth-child(4n+1) > summary { background: var(--blue-800); }
.ds-faq__accordion .wp-block-details:nth-child(4n+2) > summary { background: var(--blue-900); }
.ds-faq__accordion .wp-block-details:nth-child(4n+3) > summary { background: var(--blue-700); }
.ds-faq__accordion .wp-block-details:nth-child(4n+4) > summary { background: var(--blue-600); }
.ds-faq__accordion summary {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 60px;
	padding: 19px 31px 19px 28px;
	font-size: 18px;
	font-weight: 500;
	line-height: 32px;
	color: var(--white);
	cursor: pointer;
	list-style: none;
	transition: filter .2s ease;
}
.ds-faq__accordion summary::-webkit-details-marker { display: none; }
.ds-faq__accordion summary::marker { content: ""; }
.ds-faq__accordion summary:hover { filter: brightness(1.15); }
.ds-faq__accordion summary::before { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.4); }
.ds-faq__accordion summary::after {
	content: "";
	flex-shrink: 0;
	width: 22px;
	height: 11px;
	background: currentColor;
	clip-path: polygon(0 0, 50% 100%, 100% 0, 92% 0, 50% 82%, 8% 0);
	transition: transform .3s ease;
}
.ds-faq__accordion details[open] > summary::after { transform: rotate(180deg); }
.ds-faq__accordion details > :not(summary) {
	background: var(--ice);
	margin: 0;
	padding: 28px;
	font-size: 16px;
	line-height: 26px;
	color: var(--body);
}
.ds-faq__accordion details > :not(summary) p { margin: 0; }

/* Media slider (skillsonline/media-slider) — the dry ice hero photo, and
   any other slider. One slide shows at a time; the others carry `hidden`.
   The wrapper carries any extra class (e.g. ds-hero__media) so it inherits
   that context's sizing. */
/* ticklist (pollution section) — a core/list carrying .ticklist. The design
   drew a red check SVG inside each <li>; on an editable core list we render it
   with a pseudo-element instead, so the items stay plain text. .ticklist li is
   already display:flex with a gap, so the ::before sits where the icon did. */
.ticklist { padding: 0; margin-top: 8px; list-style: none; }
.ticklist li::before {
	content: "";
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5232a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.so-slider { position: relative; }
.so-slider__slide { margin: 0; }
.so-slider__slide[hidden] { display: none; }

/* Reuse the homepage hero control bar (.hero__controls / .hero__arrow /
   .hero__dots), just re-anchored inside the slider's own box. */
.so-slider .hero__controls {
	right: 0;
	bottom: 0;
}
.so-slider--single .hero__controls { display: none; }

/* Component media slider — a gallery of photos inside one component tab. */
.components__media .so-slider { width: 100%; }
.components__media .so-slider__slide { display: block; margin: 0; }
.components__media .so-slider__slide[hidden] { display: none; }
.components__media .so-slider .hero__dots button { border-color: var(--blue-900); }

/* In the editor: show the chosen images in a row so they are visible at a
   glance; the real one-at-a-time slideshow is a front-end behaviour. */
.so-ed-slider {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.so-ed-slider img {
	width: 140px;
	height: 92px;
	object-fit: cover;
	border-radius: 4px;
}

/* ============================================================
   SEARCH RESULTS
   ============================================================ */

.search-head { padding-bottom: 40px; }
.search-head__term { color: var(--red); }

.search-head__count {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--body);
}

.search-head__form {
  display: flex;
  align-items: stretch;
  max-width: 520px;
  margin-top: 26px;
  border: 1px solid var(--line);
  background: var(--white);
}
.search-head__form input {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  border: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 16px;
  color: var(--blue-900);
}
.search-head__form input:focus { outline: none; }
.search-head__form button {
  display: grid;
  place-items: center;
  width: 54px;
  border: 0;
  background: var(--red);
  color: var(--white);
  cursor: pointer;
  transition: background .2s ease;
}
.search-head__form button:hover { background: #cf2f3c; }
.search-head__form button svg { width: 20px; height: 20px; }

.search-results { background: var(--white); padding: 0 0 90px; }

.search-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.search-card { background: var(--ice); }
.search-card__link {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  min-height: 156px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.search-card__link:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(0, 51, 108, .12);
}

.search-card__media {
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--white);
  overflow: hidden;
}
.search-card__media img { width: 100%; height: 100%; max-height: 140px; object-fit: cover; }
.search-card__media.is-empty { background: var(--ice); }
.search-card__placeholder { width: 92px; height: auto; max-height: none; object-fit: contain; opacity: .3; }

.search-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px 24px;
}
.search-card__type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red);
}
.search-card__title {
  font-size: 18px;
  font-weight: 900;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--blue-900);
  overflow-wrap: anywhere;
}
.search-card__excerpt {
  font-size: 14px;
  line-height: 20px;
  color: var(--body);
}
.search-card__cta {
  margin-top: auto;
  width: 22px;
  height: 12px;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M14 0l6 6-6 6-1.4-1.4L16.2 7H0V5h16.2l-3.6-3.6z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M14 0l6 6-6 6-1.4-1.4L16.2 7H0V5h16.2l-3.6-3.6z'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .2s ease;
}
.search-card__link:hover .search-card__cta { transform: translateX(5px); }

.search-empty {
  max-width: 560px;
  padding: 20px 0 10px;
}
.search-empty__title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--blue-900);
}
.search-empty p { font-size: 16px; line-height: 24px; color: var(--body); }
.search-empty .btn { margin-top: 20px; color: var(--white); text-decoration: none; }

.search-pagination { margin-top: 44px; }
.search-pagination ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.search-pagination a,
.search-pagination span {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  background: var(--ice);
  font-size: 15px;
  font-weight: 700;
  color: var(--blue-900);
  text-decoration: none;
}
.search-pagination a:hover { background: var(--blue-900); color: var(--white); }
.search-pagination .current { background: var(--red); color: var(--white); }

@media (max-width: 900px) {
  .search-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .search-head__title { font-size: 30px; line-height: 36px; }
  .search-results { padding-bottom: 56px; }
  .search-card__link { grid-template-columns: minmax(0, 1fr); }
  .search-card__media { height: 180px; padding: 20px; }
  .search-card__media img { max-height: none; }
  .search-card__placeholder { width: 110px; }
}


/* --- Application / category intro prose lists ---------------------------------
   Inline prose lists in the category and application hero intros reuse the
   .bullets marker, but should read as body copy: match the body text colour and
   add trailing spacing. Scoped so the standalone .bullets component is untouched. */
.cat-head__text ul.bullets,
.app-head__text ul.bullets {
  margin: 0 0 16px;
}
.cat-head__text ul.bullets li,
.app-head__text ul.bullets li {
  color: #424751;
}

/* --- Category intro: rich-text lists from the WYSIWYG editor ------------------
   Lists authored in the term intro editor come out as plain <ul>/<ol> (no
   .bullets class). Give bullets the brand red-square marker and ordered lists
   real numbers, matching the .bullets component and body text colour. */
.cat-head__text ul,
.cat-head__text ol {
  margin: 0 0 16px;
}
.cat-head__text ul:not(.bullets) {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cat-head__text ul:not(.bullets) li {
  position: relative;
  padding-left: 18px;
  color: #424751;
  line-height: 24px;
}
.cat-head__text ul:not(.bullets) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: #b6191d;
}
.cat-head__text ol {
  padding-left: 20px;
  list-style: decimal;
}
.cat-head__text ol li {
  color: #424751;
  line-height: 24px;
  margin-bottom: 4px;
}

/* Footer: company & service link columns at 14px (default footer list is 12px). */
.footer__col ul.footer__company,
.footer__col ul.footer__service {
  font-size: 14px;
}

/* ===== Blaster-finder survey (split panel) =================================== */
.survey { max-width: 1000px; margin: 0 auto; }
.survey .sv-grid { display: grid; grid-template-columns: minmax(0,380px) minmax(0,1fr); background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 18px 50px -24px rgba(1,25,60,.45); min-height: 520px; }
.survey .sv-aside { background: linear-gradient(160deg, var(--blue-900), #001a3a); color: #fff; padding: 42px 38px; display: flex; flex-direction: column; }
.survey .sv-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; color: var(--periwinkle); margin: 0 0 14px; }
.survey .sv-eyebrow--red { color: var(--red); }
.survey .sv-aside-title { font-size: 25px; font-weight: 300; text-transform: uppercase; line-height: 1.15; margin: 0 0 8px; }
.survey .sv-aside-sub { color: #c6d2e8; font-size: 13.5px; line-height: 1.5; max-width: 34ch; margin: 0; }
.survey .sv-steps { display: flex; flex-direction: column; gap: 2px; margin-top: 26px; }
.survey .sv-step { display: flex; align-items: center; gap: 14px; padding: 10px 0; color: #8ea4c8; font-size: 14px; font-weight: 600; border-top: 1px solid rgba(255,255,255,.12); }
.survey .sv-step:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.survey .sv-step .n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.32); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.survey .sv-step.on { color: #fff; }
.survey .sv-step.on .n { background: var(--red); border-color: var(--red); }
.survey .sv-step.done { color: #cfe0ff; }
.survey .sv-step.done .n { background: rgba(255,255,255,.16); border-color: transparent; }
.survey .sv-main { padding: 44px 44px; display: flex; flex-direction: column; color: var(--body); }
.survey .sv-steplbl { font-size: 11.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--slate); margin-bottom: 16px; }
.survey .sv-q { font-size: 27px; font-weight: 300; color: var(--blue-900); text-transform: uppercase; line-height: 1.14; margin: 0 0 14px; text-wrap: balance; }
.survey .sv-ex { color: var(--slate); font-size: 14.5px; line-height: 1.5; margin: 0 0 20px; }
.survey .sv-info { border-left: 3px solid var(--red); background: rgba(181,35,42,.05); padding: 12px 16px; border-radius: 0 6px 6px 0; font-size: 13.5px; line-height: 1.55; color: var(--body); margin: 0 0 22px; }
.survey .sv-photo { margin: 4px 0 22px; }
.survey .sv-photo img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; display: block; }
.survey .sv-ans { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.survey .sv-btn { appearance: none; cursor: pointer; font: inherit; font-weight: 700; letter-spacing: .02em; border-radius: 6px; transition: .16s; border: 2px solid transparent; text-decoration: none; display: inline-block; text-align: center; }
.survey .sv-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.survey .sv-ans .sv-btn { flex: 1; min-width: 120px; padding: 16px 20px; font-size: 15px; }
.survey .sv-yes { background: var(--blue-900); color: #fff; }
.survey .sv-yes:hover { background: #012d5d; }
.survey .sv-no { background: transparent; color: var(--blue-900); border-color: #cfd8e6; }
.survey .sv-no:hover { border-color: var(--blue-900); background: #f7f9fc; }
.survey .sv-backrow { margin-top: 22px; }
.survey .sv-back { appearance: none; background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--slate); letter-spacing: .03em; padding: 6px 2px; }
.survey .sv-back:hover { color: var(--blue-900); }
.survey .sv-result { justify-content: center; }
.survey .sv-pimg { width: 230px; height: auto; border-radius: 8px; margin: 0 0 20px; display: block; }
.survey .sv-model { font-size: 32px; font-weight: 300; color: var(--blue-900); line-height: 1.12; margin: 4px 0 12px; text-transform: uppercase; }
.survey .sv-tag { color: var(--body); font-size: 15px; line-height: 1.55; max-width: 46ch; margin: 0 0 26px; }
.survey .sv-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.survey .sv-cta .sv-btn { padding: 14px 26px; font-size: 14px; }
.survey .sv-btn--red { background: var(--red); color: #fff; }
.survey .sv-btn--red:hover { background: #cf2f3c; }
.survey .sv-btn--ghost { background: transparent; color: var(--blue-900); border-color: #cfd8e6; }
.survey .sv-btn--ghost:hover { border-color: var(--blue-900); }
@media (max-width: 820px) {
  .survey .sv-grid { grid-template-columns: 1fr; }
  .survey .sv-aside { padding: 30px; }
  .survey .sv-main { padding: 30px; }
  .survey .sv-q { font-size: 23px; }
}

/* ===== Industry photo-card grow-down hover (per Figma) =====================
   On hover the card GROWS DOWNWARD into a red panel (white title + outlined
   label). margin-bottom cancels the growth in the grid so nothing below
   reflows. The photo lives on ::before as a fixed 272px band and zooms in. */
.industries__grid { align-items: start; }
@media (min-width: 561px) {
  .industries__grid .industry { min-height: 272px; }
}
.industry--photo {
  background-image: none; /* photo moved to ::before so it can be zoomed */
  transition: min-height .3s ease, margin-bottom .3s ease, background-color .3s ease, box-shadow .25s ease;
}
.industry--photo::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 272px;
  z-index: -1;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: top center;
  transition: transform .5s ease;
}
.industry--photo .industry__scrim { transition: opacity .28s ease; }
.industry--photo:hover {
  min-height: 415px;
  margin-bottom: -143px; /* grows visually but stays 272 in the grid so nothing below reflows */
  z-index: 5;
  background-color: var(--red);
  transform: none;
}
.industry--photo:hover::before { transform: scale(1.08); }
.industry--photo:hover .industry__scrim { opacity: 0; }
.industry--photo:hover .industry__body  { background: transparent; }
.industry--photo:hover .industry__label {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .55);
}
/* Body spans the full card width so the title/label sit in the red panel. */
.industry__body { width: 100%; box-sizing: border-box; }
@media (max-width: 560px) {
  .industry--photo::before { height: 100%; } /* band follows the smaller mobile card */
}

/* ===== ROI comparison section (applications landing, Figma 142:13534) ====== */
.roi-section { padding: 20px 0 80px; }
.roi-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 30px;
  align-items: stretch;
}
/* video card (left) */
.roi-video {
  position: relative;
  overflow: hidden;
  min-height: 358px;
  background: #0b1f38;
}
.roi-video__frame {
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.03);
}
.roi-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,20,45,.15) 0%, rgba(0,20,45,.45) 100%);
  pointer-events: none;
}
.roi-video .video__play { z-index: 2; } /* keep the themes inset:0;margin:auto centering, just lift above the gradient */
/* navy stats panel (right) */
.roi-panel {
  background: var(--blue-900, #00336c);
  color: #fff;
  padding: 48px 40px 60px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  min-height: 358px;
}
.roi-panel__top { display: flex; flex-direction: column; gap: 25px; }
.roi-panel__title {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  line-height: 32px;
  text-transform: uppercase;
  color: #fff;
}
.roi-stats { display: flex; flex-direction: column; gap: 20px; }
.roi-stat { display: flex; flex-direction: column; gap: 8px; }
.roi-stat__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: .7;
}
.roi-bar {
  display: block;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.roi-bar__fill { display: block; height: 100%; }
.roi-bar__fill--muted { background: rgba(255, 255, 255, .3); }
.roi-bar__fill--red { background: var(--red, #e63946); }
.roi-stat__value { font-size: 16px; font-weight: 300; line-height: 24px; color: #fff; }
.roi-stat__value--accent { color: #ffdad7; }
.roi-saving {
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.roi-saving__figure { margin: 0; font-size: 24px; font-weight: 700; line-height: 40px; text-transform: uppercase; color: #fff; }
.roi-saving__caption { margin: 0; font-size: 14px; font-weight: 300; line-height: 20px; opacity: .7; }
@media (max-width: 900px) {
  .roi-grid { grid-template-columns: 1fr; gap: 0; }
  .roi-video { min-height: 260px; }
  .roi-panel { padding: 36px 28px 44px; }
}

/* Product head: category name as a chip ABOVE the title, subtitle UNDER it.
   The chip reuses the original .plabel look; the wrapper only adds spacing. */
.prod-detail-head__eyebrow { margin: 0 0 16px; line-height: 0; }
.prod-detail-head__title { margin: 0 0 14px; }
.prod-detail-head__sub { margin: 0 0 24px; }

/* ===== Two-bar header — mobile (overrides the old drawer rules) ========== */
@media (max-width: 1240px) {
  /* The topbar is relocated into the drawer on mobile, so the main bar is at the
     top of the header — stick it flush at top:0. */
  .nav { top: 0; }
  .nav__topbar-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 8px;
    padding-block: 8px;
  }
  .nav__utility { grid-column: 1; flex-wrap: wrap; justify-content: center; }
  .nav__top-right { grid-column: 1; justify-self: center; }
  .nav__search { width: 260px; max-width: 70vw; }

  .nav__mainbar-inner { min-height: 60px; }
  .nav__logo img { width: 200px; }
  .nav__burger { display: flex; }

  .nav__drawer {
    display: grid;
    grid-template-rows: 0fr;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    background: #f1f8ff;
    box-shadow: 0 24px 30px rgba(0, 51, 108, .12);
    opacity: 0;
    visibility: hidden;
    transition:
      grid-template-rows .4s cubic-bezier(.22, 1, .36, 1),
      opacity .25s ease,
      visibility 0s linear .4s;
  }
  .nav.is-open .nav__drawer {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s, 0s;
  }
  .nav__drawer-inner {
    display: block;
    min-height: 0;
    overflow: hidden;
    padding: 8px var(--gutter) 24px;
  }
  .nav__main {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 12px;
  }
  .nav__actions { padding-top: 16px; }
  .nav__contact { display: inline-flex; }

  /* The utility topbar is relocated by JS into the bottom of the drawer; keep
     it hidden while it still sits at the top of the markup (no flash). */
  .nav > .nav__topbar { display: none; }
  .nav__drawer .nav__topbar {
    display: block;
    margin: 24px calc(var(--gutter) * -1) -24px;
    background: #0a3161;
  }
  .nav__drawer .nav__topbar-inner { padding: 22px var(--gutter); row-gap: 14px; }
  .nav__drawer .nav__top-right { flex-direction: column; gap: 14px; width: 100%; }
  .nav__drawer .nav__search { width: 100%; max-width: none; }
  /* Open the language dropdown upward so it is not clipped by the drawer. */
  .nav__drawer .nav__lang-menu { top: auto; bottom: calc(100% + 8px); right: auto; left: 0; }
}

/* ===== Hero slider pagination — progress bar (same look as the history
   carousel: arrow · bar + thumb · arrow) instead of dashes. ================= */
.hero .hero__controls {
  background: transparent;
  padding: 0;
  left: calc(var(--gutter) + 734px);
  justify-content: center;
  gap: 20px;
}
.hero .hero__arrow {
  display: grid;
  place-items: center;
  padding: 4px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.hero .hero__arrow svg { width: 14px; height: 22px; }
.hero .hero__arrow:hover { color: var(--periwinkle); }
.hero__bar {
  position: relative;
  flex: 0 1 320px;
  height: 11px;
  border-radius: 10px;
  background: var(--periwinkle);
}
.hero__thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 10px;
  background: #fff;
  transition: left .3s ease, width .3s ease;
}

/* ===== Home applications — industries card grid (Figma 705:6702) ========= */
.appind__head { margin: 0 0 40px; }
.appind__title { margin: 0 0 16px; font-size: 30px; font-weight: 700; line-height: 1.15; color: #0a3161; }
.appind__sub { margin: 0; max-width: 840px; font-size: 18px; font-weight: 300; line-height: 1.55; color: #0a3161; }
.appind__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.appind__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 24px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--img) center / cover no-repeat;
  isolation: isolate;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.appind__card:hover { overflow: visible; z-index: 10; }
.appind__scrim { position: absolute; inset: 0; z-index: 0; background: rgba(0, 51, 108, .4); transition: background-color .25s ease; }
.appind__card:hover .appind__scrim,
.appind__card:hover .appind__label { opacity: 0; }
.appind__label { position: relative; z-index: 1; color: #fff; font-size: 18px; font-weight: 500; line-height: 1.2; transition: opacity .2s ease; }
.appind__cta { display: flex; width: fit-content; margin: 40px auto 0; letter-spacing: 2px; box-shadow: none; }

/* Hover-expand card: a white panel + before/after band grows downward over the
   row below without reflowing the grid (absolute overlay inside a 120px tile). */
.appind__hover {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  box-shadow: 0 20px 40px rgba(0, 51, 108, .18);
}
.appind__card:hover .appind__hover { opacity: 1; pointer-events: auto; }
.appind__panel { display: flex; flex-direction: column; gap: 16px; padding: 24px 24px 20px; text-align: left; }
.appind__phead { display: flex; flex-direction: column; gap: 4px; }
.appind__name { font-size: 18px; font-weight: 500; line-height: 1.2; color: #0a3161; }
.appind__desc { font-size: 11px; font-weight: 300; line-height: 16px; color: #424751; }
.appind__btn {
  align-self: flex-start;
  padding: 6px 12px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .5px;
  line-height: 1;
  text-transform: uppercase;
}
.appind__ba {
  display: none; /* before/after photo band hidden — hover shows only the text panel */
  position: relative;
  height: 128px;
  background: var(--img) center / cover no-repeat;
}
.appind__ba-badge {
  position: absolute; top: 0; z-index: 2;
  padding: 5px 10px;
  background: var(--blue-900);
  color: #fff;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
}
.appind__ba-badge--before { left: 0; }
.appind__ba-badge--after { right: 0; }
.appind__ba-line { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 1; width: 2px; background: #fff; transform: translateX(-50%); }
.appind__ba-handle {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; gap: 1px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  color: #0a3161; font-size: 9px; line-height: 1;
}
@media (max-width: 900px) {
  .appind__grid { grid-template-columns: repeat(2, 1fr); }
  .appind__title { font-size: 24px; line-height: 30px; }
  .appind__sub { font-size: 16px; }
}
@media (max-width: 560px) {
  .appind__grid { grid-template-columns: 1fr; }
}

/* ===== Home — "Dry ice cleaning" expanding before/after carousel =========
   A looping strip where the ACTIVE slide expands into a big before/after card
   (centre-right): the previous slides sit to its left (wrapping), the next one
   peeks on the right. JS triples the list so the wrap is seamless. */
.appclean { position: relative; margin-top: 70px; }
.appclean__title { margin: 0 0 16px; font-size: 30px; font-weight: 700; line-height: 1.2; color: #0a3161; }
.appclean__text { margin: 0; max-width: 516px; font-size: 14px; font-weight: 300; line-height: 22px; color: #0a3161; }
.appclean__discover { position: absolute; top: 0; right: 8.5%; margin: 0; letter-spacing: 2px; box-shadow: none; padding: 14px 24px; font-size: 14px; }
.appclean__nav { display: flex; align-items: center; gap: 16px; margin: 40px 0 18px; }
.appclean__arrow { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: #e63946; cursor: pointer; }
.appclean__arrow svg { width: 8px; height: 13px; }
.appclean__count { font-size: 20px; font-weight: 900; color: #e63946; letter-spacing: 1px; }

.appclean__viewport { overflow: hidden; height: 410px; }
.appclean__track { display: flex; gap: 30px; align-items: flex-end; height: 410px; padding-bottom: 120px; transition: transform .4s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.appclean__slide { position: relative; flex: 0 0 189px; cursor: pointer; transition: flex-basis .4s cubic-bezier(.4, 0, .2, 1); }
.appclean__slide.is-active { flex-basis: 461px; cursor: default; z-index: 2; }
.appclean__media { position: relative; height: 106px; overflow: hidden; background: var(--img) center / cover no-repeat; transition: height .4s cubic-bezier(.4, 0, .2, 1); }
.appclean__slide.is-active .appclean__media { height: 290px; }
.appclean__scrim { position: absolute; inset: 0; background: rgba(0, 51, 108, .4); transition: background-color .3s ease; }
.appclean__slide.is-active .appclean__scrim { background: transparent; }
.appclean__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #e63946; }
.appclean__slide.is-active .appclean__media::after { display: none; }
.appclean__label { position: absolute; left: 17px; right: 12px; bottom: 14px; z-index: 1; color: #fff; font-size: 16px; font-weight: 500; line-height: 1.2; }
.appclean__slide.is-active .appclean__label { display: none; }
.appclean__badge { position: absolute; top: 0; z-index: 1; background: #00336c; color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; padding: 6px 20px; opacity: 0; transition: opacity .25s ease .1s; }
.appclean__slide.is-active .appclean__badge { opacity: 1; }
.appclean__badge--before { left: 0; }
.appclean__badge--after { right: 0; }
.appclean__caption { position: absolute; top: 100%; left: 0; right: 0; background: #fff; padding: 20px 26px; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.appclean__slide.is-active .appclean__caption { opacity: 1; pointer-events: auto; }
.appclean__caption-title { margin: 0 0 12px; font-size: 20px; font-weight: 500; color: #0a3161; }
.appclean__caption-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 269px; padding: 9px 12px; background: #e63946; color: #fff; font-size: 11px; font-weight: 300; text-transform: uppercase; letter-spacing: .5px; }
.appclean__caption-cta svg { width: 5px; height: 9px; flex-shrink: 0; }
.appclean__caption-cta:hover { background: #cf2f3c; }

/* Tablet / mobile: drop the expand trick, show a plain scrollable thumb strip. */
@media (max-width: 1100px) {
  .appclean__discover { position: static; margin: 20px 0 0; }
  .appclean__viewport { overflow-x: auto; overflow-y: hidden; height: auto; -webkit-overflow-scrolling: touch; }
  .appclean__track { height: auto; padding-bottom: 0; align-items: flex-start; transform: none !important; transition: none; }
  .appclean__slide, .appclean__slide.is-active { flex: 0 0 189px; width: 189px; cursor: pointer; }
  .appclean__media, .appclean__slide.is-active .appclean__media { height: 120px; }
  .appclean__slide.is-active .appclean__scrim { background: rgba(0, 51, 108, .4); }
  .appclean__slide.is-active .appclean__media::after { display: block; }
  .appclean__slide.is-active .appclean__label { display: block; }
  .appclean__badge { display: none; }
  .appclean__caption { display: none; }
  .appclean__nav { display: none; }
}

/* ===== About block — 2-column with stat chips (Figma 616:4474) =========== */
.about { text-align: left; }
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 628px); gap: 56px; align-items: center; }
.about__body { min-width: 0; }
.about .section-title { text-align: left; margin: 0 0 24px; }
.about__text { max-width: 605px; margin: 0 0 32px; text-align: left; }
.about__chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 40px; padding: 0; list-style: none; }
.about__chip { background: var(--ice); color: var(--blue-900); font-size: 16px; font-weight: 500; line-height: 1; padding: 16px 24px; white-space: nowrap; }
.about__cta { margin: 0; }
.about__media { margin: 0; max-width: 628px; }
@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; gap: 32px; }
  .about .section-title { text-align: center; }
  .about__text { margin-inline: auto; }
  .about__chips { justify-content: center; }
  .about__cta { text-align: center; }
  .about__media { margin: 0 auto; }
}