/* ============================================================================
   AVION HYGIENE SOLUTIONS — style.css
   Static homepage prototype v1
   ----------------------------------------------------------------------------
   01  RESET & BASE
   02  DESIGN TOKENS (variables)
   03  TYPOGRAPHY
   04  UTILITIES & PRIMITIVES (buttons, links, eyebrows, icons)
   05  MEDIA / IMAGE PLACEHOLDER SYSTEM
   06  HEADER & NAVIGATION
   07  HERO
   08  POSITIONING STRIP
   09  ABOUT
   10  SOLUTIONS
   11  PRODUCTS
   12  WHY AVION
   13  ENVIRONMENTS
   14  BRAND STATEMENT
   15  INSIGHTS / BLOG
   16  CTA
   17  FOOTER
   18  FLOATING WHATSAPP
   19  ANIMATIONS / REVEAL
   20  RESPONSIVE
   ----------------------------------------------------------------------------
   PHASE 2 — appended, nothing above this line was changed
   21  INNER PAGE HERO / BREADCRUMB   (products + product detail)
   22  PRODUCTS PAGE
   23  PRODUCT DETAIL PAGE
   ----------------------------------------------------------------------------
   PHASE 3 — appended, nothing above this line was changed
   24  ABOUT PAGE
   25  CONTACT PAGE  (incl. contact form)
   ----------------------------------------------------------------------------
   PHASE 4 — appended, nothing above this line was changed
   26  BLOG LISTING
   27  BLOG ARTICLE
   28  ARTICLE TYPOGRAPHY  (prose, callouts, related)
   ----------------------------------------------------------------------------
   LEGAL — appended, nothing above this line was changed
   29  LEGAL PAGES  (privacy policy, terms & conditions)
   ----------------------------------------------------------------------------
   RESPONSIVE FIX — appended
   30  MOBILE OVERFLOW HARDENING  (see also overflow-x:hidden in section 01)
   ========================================================================== */


/* ==========================================================================
   01  RESET & BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  /* Guard the scroll root against horizontal scroll on mobile. `hidden` (not
     `clip`) is used deliberately: with overflow-x:hidden the other axis
     computes to `auto`, so vertical scrolling — and position:sticky — keep
     working. `clip` would force overflow-y to clip and freeze the page. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

::selection { background: var(--navy); color: #fff; }

:focus-visible {
  outline: 2px solid var(--green-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.on-dark :focus-visible,
.why :focus-visible,
.cta :focus-visible,
.footer :focus-visible { outline-color: var(--green-on-dark); }

.skip-link {
  position: absolute;
  left: 24px;
  top: -60px;
  z-index: 300;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
  font-weight: 700;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }

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


/* ==========================================================================
   02  DESIGN TOKENS
   Colours sampled directly from the supplied Avion logo:
     navy  #263369   |   green  #7ca735
   ========================================================================== */

:root {
  /* Brand */
  --navy:            #263369;   /* sampled from logo */
  --navy-dark:       #1d2853;
  --navy-deep:       #141c3c;
  --navy-ink:        #0f1530;
  --navy-tint:       #f2f4fa;
  --navy-tint-2:     #e7ebf5;

  --green:           #7ca735;   /* sampled from logo */
  --green-dark:      #6b9129;
  --green-ink:       #5a7d26;   /* AA-safe green on white (4.8:1) */
  --green-on-dark:   #9ec95a;   /* AA-safe green on navy   (6.2:1) */
  --green-tint:      #f0f5e6;

  /* Neutrals */
  --white:           #ffffff;
  --off-white:       #fafbfd;
  --light-bg:        #f4f6fa;
  --text:            #1a2036;
  --text-muted:      #59617a;
  --text-faint:      #8a90a3;
  --border:          #e4e8ef;
  --border-strong:   #d1d7e3;

  /* Type */
  --font: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --container: 1280px;
  --gutter: clamp(20px, 4.2vw, 48px);
  --section-y: clamp(68px, 8.5vw, 132px);
  --header-h: 88px;

  /* Radii — restrained, never pill-shaped */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .22s;
  --t-base: .38s;

  /* Elevation — used sparingly */
  --shadow-sm: 0 1px 2px rgba(20, 28, 60, .05);
  --shadow-md: 0 12px 32px -12px rgba(20, 28, 60, .16);
  --shadow-lg: 0 24px 60px -24px rgba(20, 28, 60, .26);
}

body.is-scrolled { --header-h: 68px; }

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

.section { padding-block: var(--section-y); }


/* ==========================================================================
   03  TYPOGRAPHY
   ========================================================================== */

h1, h2, h3 {
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.03em;
  line-height: 1.06;
}

.hero__title {
  font-size: clamp(38px, 5.9vw, 74px);
  line-height: 1.02;
  letter-spacing: -.038em;
}

.section-title {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.06;
  letter-spacing: -.032em;
}

p { text-wrap: pretty; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 22px;
}
.eyebrow__rule {
  width: 28px;
  height: 2px;
  background: var(--green);
  flex: none;
}
.eyebrow--light { color: var(--green-on-dark); }
.eyebrow--light .eyebrow__rule { background: var(--green-on-dark); }

/* Green underline mark, derived from the logo swoosh */
.u-mark { position: relative; display: inline-block; white-space: nowrap; }
.u-mark__arc {
  position: absolute;
  left: 0;
  bottom: -.02em;
  width: 100%;
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.u-accent { color: var(--green-ink); }
.u-accent-light { color: var(--green-on-dark); }

/* Shared section header: title left, supporting text right */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  padding-bottom: clamp(40px, 5vw, 68px);
}
.section-head__aside {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 42ch;
}
.section-head__aside p { margin-bottom: 18px; }
.section-head__aside p:last-child { margin-bottom: 0; }


/* ==========================================================================
   04  UTILITIES & PRIMITIVES
   ========================================================================== */

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--arrow {
  width: 18px;
  height: 18px;
  transition: transform var(--t-base) var(--ease);
}

/* --- Buttons: 3 reusable styles ------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding-inline: 28px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast) ease,
              border-color var(--t-fast) ease,
              color var(--t-fast) ease,
              transform var(--t-fast) ease;
}
.btn:hover .icon--arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-dark); }

.btn--accent { background: var(--green); color: var(--navy-deep); }
.btn--accent:hover { background: #8bb843; }

.btn--outline-light {
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
.btn--outline-light:hover {
  border-color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .06);
}

.btn--sm { height: 46px; padding-inline: 20px; font-size: 14px; border-radius: 7px; }
.btn--block { width: 100%; }

/* --- Text / arrow link --------------------------------------------------- */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-strong);
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.link-arrow:hover { border-color: var(--green); color: var(--green-ink); }
.link-arrow:hover .icon--arrow { transform: translateX(4px); }
.link-arrow--light { color: #fff; border-color: rgba(255, 255, 255, .3); }
.link-arrow--light:hover { color: var(--green-on-dark); border-color: var(--green-on-dark); }


/* ==========================================================================
   05  MEDIA / IMAGE PLACEHOLDER SYSTEM
   --------------------------------------------------------------------------
   Every image sits in a .media wrapper. Until a real photograph is dropped
   into /images, the wrapper renders a designed art-direction placeholder
   showing the intended shot (from data-media-note). JS adds .has-image once
   a file loads successfully — no code changes needed on handover.
   ========================================================================== */

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, var(--navy-tint) 0%, #e9edf6 55%, #dfe5f1 100%);
  isolation: isolate;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease, transform .7s var(--ease);
}
.media.has-image img { opacity: 1; }
html:not(.js) .media img { opacity: 1; }

/* Placeholder graphic — a swoosh-derived arc, restrained.
   Sized as an ellipse in % of the wrapper so it crosses the panel
   consistently at any aspect ratio. */
.media::before {
  content: "";
  position: absolute;
  left: -50%;
  bottom: -190%;
  width: 200%;
  height: 260%;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(124, 167, 53, .5);
  transform: rotate(-7deg);
  z-index: 0;
}

/* Optional placeholder caption — only rendered when a media wrapper
   explicitly carries a data-media-note art-direction brief. */
.media[data-media-note]::after {
  content: attr(data-media-note);
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 18px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.6;
  color: rgba(38, 51, 105, .5);
  border-top: 1px solid rgba(38, 51, 105, .1);
  background: rgba(255, 255, 255, .5);
  z-index: 1;
}

.media.has-image::before,
.media.has-image[data-media-note]::after { display: none; }

/* Tonal variants so placeholders never read as a repeated block */
.media--tone-b { background: linear-gradient(150deg, #eef1f8 0%, #e2e8f4 60%, #d7deee 100%); }
.media--tone-b::before {
  bottom: -212%; transform: rotate(-3deg);
  border-top-color: rgba(38, 51, 105, .2);
}

.media--tone-c { background: linear-gradient(200deg, #f4f6fb 0%, #e6ecf3 50%, #dde6ee 100%); }
.media--tone-c::before { bottom: -168%; left: -62%; transform: rotate(-11deg); }

.media--tone-d { background: linear-gradient(140deg, #eff3ec 0%, #e5ecf2 55%, #dbe3f0 100%); }
.media--tone-d::before {
  bottom: -205%; left: -38%; transform: rotate(5deg);
  border-top-color: rgba(38, 51, 105, .18);
}

/* Aspect variants */
.media--hero    { aspect-ratio: 4 / 5; border-radius: var(--r-lg); }
.media--tall    { aspect-ratio: 4 / 5; }
.media--stage   { aspect-ratio: 4 / 3; }
.media--product { aspect-ratio: 4 / 5; }
.media--post    { aspect-ratio: 4 / 3; }
.media--fill    { position: absolute; inset: 0; border-radius: 0; }


/* ==========================================================================
   06  HEADER & NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--t-base) ease,
              border-color var(--t-base) ease,
              box-shadow var(--t-base) ease;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 24px -12px rgba(20, 28, 60, .3);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  height: var(--header-h);
  transition: height var(--t-base) var(--ease);
}

.brand { flex: none; }
.brand__link { display: block; }
.brand img {
  width: auto;
  height: 40px;
  transition: height var(--t-base) var(--ease);
}
.site-header.is-scrolled .brand img { height: 33px; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 38px); }

.nav__link {
  position: relative;
  display: block;
  padding-block: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  transition: color var(--t-fast) ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-current::after { transform: scaleX(1); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: none;
}

.wa-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  transition: color var(--t-fast) ease;
}
.wa-inline .icon { color: var(--green-ink); }
.wa-inline:hover { color: var(--green-ink); }

/* --- Hamburger ----------------------------------------------------------- */

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  align-items: center;
  justify-content: center;
  color: var(--navy);
}
.nav-toggle .icon { width: 24px; height: 24px; stroke-width: 1.7; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* --- Mobile navigation panel --------------------------------------------- */

.mobile-nav {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  width: min(430px, 100%);
  z-index: 95;
  background: var(--white);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform .42s var(--ease), top var(--t-base) var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav.is-open { transform: translateX(0); }

.mobile-nav__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 12px var(--gutter) 36px;
}

.mobile-nav__list { border-top: 1px solid var(--border); }
.mobile-nav__list li { border-bottom: 1px solid var(--border); }
.mobile-nav__list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 20px 2px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--navy);
  opacity: 0;
  transform: translateX(14px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), color var(--t-fast) ease;
}
.mobile-nav.is-open .mobile-nav__list a { opacity: 1; transform: none; }
.mobile-nav.is-open li:nth-child(1) a { transition-delay: .08s; }
.mobile-nav.is-open li:nth-child(2) a { transition-delay: .13s; }
.mobile-nav.is-open li:nth-child(3) a { transition-delay: .18s; }
.mobile-nav.is-open li:nth-child(4) a { transition-delay: .23s; }
.mobile-nav.is-open li:nth-child(5) a { transition-delay: .28s; }
.mobile-nav__list a:hover { color: var(--green-ink); }

.mobile-nav__idx {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--green-ink);
}

.mobile-nav__foot { margin-top: auto; padding-top: 40px; }
.mobile-nav__tagline {
  margin-top: 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
}

.mobile-nav__arc {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  opacity: .16;
  pointer-events: none;
}

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(15, 21, 48, .38);
  opacity: 0;
  transition: opacity var(--t-base) ease;
}
.nav-scrim[hidden] { display: none; }
.nav-scrim.is-open { opacity: 1; }


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

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(44px, 5.5vw, 78px) clamp(60px, 7vw, 104px);
  background: linear-gradient(180deg, var(--white) 0%, var(--off-white) 60%, var(--light-bg) 100%);
}

.hero__bg {
  position: absolute;
  inset: 0;
  color: rgba(38, 51, 105, .1);
  pointer-events: none;
}
.hero__arc { width: 100%; height: 100%; }

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(40px, 5.5vw, 88px);
  align-items: center;
}

.hero__copy { max-width: 620px; }

.hero__lead {
  margin-top: 28px;
  max-width: 52ch;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.72;
  color: var(--text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

.hero__markers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.hero__markers li { display: flex; align-items: center; gap: 26px; }
.hero__markers li:not(:last-child)::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green);
  opacity: .8;
}

/* Hero visual composition */
.hero__visual { position: relative; }
.hero__visual .media--hero {
  max-height: min(72vh, 660px);
  box-shadow: var(--shadow-lg);
}

.hero__visual-arc {
  position: absolute;
  left: -46px;
  bottom: -34px;
  width: 62%;
  height: auto;
  overflow: visible;
  opacity: .9;
  pointer-events: none;
  z-index: 2;
}

.hero__chip {
  position: absolute;
  left: -28px;
  bottom: 46px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 268px;
  padding: 18px 22px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
}
.hero__chip-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.hero__chip-value {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--navy);
}


/* ==========================================================================
   08  POSITIONING STRIP
   ========================================================================== */

.strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.strip__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.strip__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 26px clamp(16px, 2vw, 32px);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--navy);
  border-left: 1px solid var(--border);
}
.strip__item:first-child { border-left: 0; padding-left: 0; }
.strip__item:last-child { padding-right: 0; }
.strip__item .icon { color: var(--green-ink); width: 22px; height: 22px; }


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

.about { background: var(--white); }

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(36px, 6vw, 100px);
  align-items: center;
}

.about__visual { position: relative; }
.about__visual .media { border-radius: var(--r-md); }

.about__stamp {
  position: absolute;
  top: -46px;
  right: -22px;
  font-size: clamp(96px, 11vw, 168px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(38, 51, 105, .16);
  pointer-events: none;
  user-select: none;
}

.about__title {
  font-size: clamp(30px, 3.9vw, 50px);
  line-height: 1.08;
  margin-bottom: 28px;
}

.about__copy > p {
  max-width: 54ch;
  margin-bottom: 20px;
  color: var(--text-muted);
  line-height: 1.75;
}

.about__points {
  display: grid;
  gap: 0;
  margin: 36px 0 40px;
  border-top: 1px solid var(--border);
}
.about__points li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.about__points-idx {
  grid-row: span 2;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--green-ink);
  padding-top: 4px;
}
.about__points strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
}
.about__points span:last-child {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
}


/* ==========================================================================
   10  SOLUTIONS
   ========================================================================== */

.solutions { background: var(--light-bg); }

.solutions__body {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}

.solutions__list { grid-column: 1; grid-row: 1; }

.solutions__stage {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 128px;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.solutions__stage .media--stage {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .6s var(--ease), transform .8s var(--ease);
}
.solutions__stage .media--stage.is-active { opacity: 1; transform: scale(1); }

.solutions__row { border-top: 1px solid var(--border-strong); }
.solutions__row:last-child { border-bottom: 1px solid var(--border-strong); }

.solutions__trigger {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 4px 8px;
  width: 100%;
  padding: 24px 20px;
  margin-inline: -20px;
  width: calc(100% + 40px);
  text-align: left;
  transition: background var(--t-base) ease;
}
.solutions__trigger::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--green);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-base) var(--ease);
}
.solutions__row.is-active .solutions__trigger { background: rgba(255, 255, 255, .78); }
.solutions__row.is-active .solutions__trigger::before { transform: scaleY(1); }

.solutions__idx {
  grid-row: span 2;
  align-self: start;
  padding-top: 5px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--text-faint);
  transition: color var(--t-fast) ease;
}
.solutions__row.is-active .solutions__idx { color: var(--green-ink); }

.solutions__name {
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.2;
  color: var(--text-muted);
  transition: color var(--t-fast) ease;
}
.solutions__row.is-active .solutions__name,
.solutions__trigger:hover .solutions__name { color: var(--navy); }

.solutions__desc {
  grid-column: 2;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-faint);
}

.solutions__arrow {
  grid-row: span 2;
  color: var(--text-faint);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--t-base) ease, transform var(--t-base) var(--ease), color var(--t-fast) ease;
}
.solutions__row.is-active .solutions__arrow,
.solutions__trigger:hover .solutions__arrow {
  opacity: 1;
  transform: none;
  color: var(--green-ink);
}


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

.products { background: var(--white); }

.products__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border-strong);
}

.product {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px clamp(18px, 2vw, 30px) 8px;
  border-left: 1px solid var(--border);
}
.product:first-child { border-left: 0; padding-left: 0; }
.product:last-child { padding-right: 0; }

/* Green indicator rides the section rule on hover */
.product::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.product:hover::before,
.product:focus-within::before { transform: scaleX(1); }

/* Fixed height rather than aspect-ratio: the first and last columns are wider
   (their outer padding is removed to meet the container edge), so a ratio-based
   height would make their images taller and knock the eyebrow/title baselines
   out of alignment across the row. */
.product .media--product {
  aspect-ratio: auto;
  height: clamp(230px, 23vw, 330px);
  background-color: var(--off-white);
  margin-bottom: 26px;
}
.product:hover .media img { transform: scale(1.045); }

.product__cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 12px;
}

.product__title {
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.22;
  letter-spacing: -.028em;
  margin-bottom: 12px;
}
.product__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.product__title a { transition: color var(--t-fast) ease; }
.product:hover .product__title a { color: var(--navy-dark); }

.product__desc {
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-muted);
  margin-bottom: 24px;
  max-width: 32ch;
}

.product__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

.product__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.product:hover .product__cta .icon--arrow { transform: translateX(4px); }

.product__wa {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--green-ink);
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.product__wa:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--navy-deep);
}


/* ==========================================================================
   12  WHY AVION
   ========================================================================== */

.why {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
  background: var(--navy);
  color: #fff;
}
.why__arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, .13);
  pointer-events: none;
}

.why__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.why__intro { position: sticky; top: 132px; }
.why__title {
  color: #fff;
  font-size: clamp(30px, 3.9vw, 50px);
  line-height: 1.06;
  margin-bottom: 24px;
}
.why__lead {
  max-width: 42ch;
  margin-bottom: 36px;
  color: rgba(255, 255, 255, .68);
  line-height: 1.75;
}

.why__list { border-top: 1px solid rgba(255, 255, 255, .16); }
.why__item {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 0 8px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  transition: background var(--t-base) ease;
}
.why__idx {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--green-on-dark);
  padding-top: 6px;
}
.why__item h3 {
  color: #fff;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.why__item p {
  color: rgba(255, 255, 255, .6);
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 46ch;
}


/* ==========================================================================
   13  ENVIRONMENTS
   ========================================================================== */

.environments { background: var(--white); }

.env__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.env {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--navy);
  isolation: isolate;
}
.env::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
              rgba(20, 28, 60, .18) 0%,
              rgba(20, 28, 60, .34) 42%,
              rgba(20, 28, 60, .84) 100%);
  transition: background var(--t-base) ease;
}
.env:hover::after {
  background: linear-gradient(180deg,
              rgba(20, 28, 60, .3) 0%,
              rgba(20, 28, 60, .5) 42%,
              rgba(20, 28, 60, .9) 100%);
}
.env:hover .media img { transform: scale(1.05); }

.env--feature { grid-column: span 6; grid-row: span 2; min-height: 604px; }
.env--md      { grid-column: span 3; min-height: 295px; }
.env--sm      { grid-column: span 2; min-height: 295px; }

.env__body {
  position: relative;
  z-index: 2;
  padding: clamp(20px, 2vw, 32px);
  color: #fff;
}
.env__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--green-on-dark);
  margin-bottom: 10px;
}
.env__name {
  color: #fff;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.25;
}
.env--feature .env__name { font-size: clamp(24px, 2.6vw, 34px); }
.env__desc {
  margin-top: 12px;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .74);
}

.env__arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--r-sm);
  color: #fff;
  transition: transform var(--t-base) var(--ease), background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.env:hover .env__arrow {
  transform: translateX(3px);
  background: var(--green);
  border-color: var(--green);
  color: var(--navy-deep);
}

/* Placeholder caption is muted inside dark tiles */
.env .media[data-media-note]::after { background: rgba(255, 255, 255, .34); }


/* ==========================================================================
   14  BRAND STATEMENT
   ========================================================================== */

.statement {
  padding-block: clamp(76px, 10vw, 152px);
  background: var(--white);
  border-top: 1px solid var(--border);
}

.statement__inner {
  position: relative;
  max-width: 960px;
  margin-inline: auto;
  padding-left: clamp(24px, 4vw, 52px);
}
.statement__rule {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 46px;
  width: 3px;
  background: linear-gradient(180deg, var(--green) 0%, rgba(124, 167, 53, .12) 100%);
}

.statement__quote p {
  font-size: clamp(26px, 3.5vw, 46px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.03em;
  color: var(--navy);
  text-wrap: balance;
}

.statement__sig {
  margin-top: 30px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
}


/* ==========================================================================
   15  INSIGHTS / BLOG
   ========================================================================== */

.insights { background: var(--off-white); }

.insights__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 48px);
}

.post {
  position: relative;
  padding-top: 24px;
  border-top: 1px solid var(--border-strong);
}
.post .media--post {
  margin-bottom: 22px;
  border-radius: 3px;
}
.post:hover .media img { transform: scale(1.04); }

.post__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.post__cat { color: var(--green-ink); }
.post__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}

.post__title {
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.28;
  letter-spacing: -.026em;
  margin-bottom: 12px;
  max-width: 22ch;
}
.post__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.post__excerpt {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 20px;
  max-width: 36ch;
}

.post__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.post:hover .post__cta .icon--arrow { transform: translateX(4px); }
.post:hover { border-top-color: var(--green); }
.post { transition: border-color var(--t-base) ease; }


/* ==========================================================================
   16  CTA
   ========================================================================== */

.cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 128px);
  background: var(--navy-deep);
  color: #fff;
}
.cta__arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, .14);
  pointer-events: none;
}

.cta__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

.cta__title {
  color: #fff;
  font-size: clamp(30px, 4.1vw, 54px);
  line-height: 1.05;
  margin-bottom: 20px;
}
.cta__lead {
  max-width: 46ch;
  color: rgba(255, 255, 255, .7);
  font-size: 17px;
  line-height: 1.7;
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.cta__panel {
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .03);
}
.cta__panel-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--green-on-dark);
  margin-bottom: 22px;
}
.cta__details li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: 15.5px;
  color: rgba(255, 255, 255, .88);
}
.cta__details li:first-child { padding-top: 0; }
.cta__details .icon { color: var(--green-on-dark); margin-top: 3px; }
.cta__details a { transition: color var(--t-fast) ease; }
.cta__details a:hover { color: var(--green-on-dark); }
.cta__panel-note {
  margin-top: 18px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .42);
}


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

.footer {
  background: var(--navy-ink);
  color: rgba(255, 255, 255, .72);
  padding-top: clamp(56px, 6vw, 88px);
  font-size: 15px;
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer__statement {
  color: #fff;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -.032em;
}
.footer__cta { margin-bottom: 8px; }

.footer__cols {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.35fr;
  gap: clamp(32px, 4vw, 64px);
  padding-block: clamp(44px, 5vw, 68px);
}

.footer__logo {
  width: 194px;
  height: auto;
  margin-bottom: 22px;
  /* Renders the supplied navy/green logo as a clean reversed mark.
     Replace with a dedicated white logo file when available. */
  filter: brightness(0) invert(1);
  opacity: .96;
}
.footer__about {
  max-width: 34ch;
  line-height: 1.7;
  color: rgba(255, 255, 255, .58);
  font-size: 14.5px;
}

.footer__social {
  display: flex;
  gap: 10px;
  margin-top: 26px;
}
.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, .8);
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.footer__social a:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--navy-deep);
}

.footer__heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  margin-bottom: 22px;
}

.footer__links li { margin-bottom: 13px; }
.footer__links a,
.footer__contact a {
  color: rgba(255, 255, 255, .78);
  transition: color var(--t-fast) ease;
}
.footer__links a:hover,
.footer__contact a:hover { color: var(--green-on-dark); }

.footer__contact li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 18px;
}
.footer__contact-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13.5px;
  color: rgba(255, 255, 255, .5);
}
.footer__legal { display: flex; gap: 26px; }
.footer__legal a { transition: color var(--t-fast) ease; }
.footer__legal a:hover { color: #fff; }


/* ==========================================================================
   18  FLOATING WHATSAPP
   ========================================================================== */

.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0;
  height: 54px;
  padding: 0 17px;
  background: var(--green);
  color: var(--navy-deep);
  border-radius: 27px;
  box-shadow: 0 10px 28px -8px rgba(20, 28, 60, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--t-base) ease,
              transform var(--t-base) var(--ease),
              visibility var(--t-base),
              background var(--t-fast) ease;
}
.wa-float.is-visible { opacity: 1; visibility: visible; transform: none; }
.wa-float:hover { background: #8bb843; }
.wa-float .icon { width: 24px; height: 24px; stroke-width: 1.7; }

.wa-float__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  transition: max-width var(--t-base) var(--ease), margin-left var(--t-base) var(--ease);
}
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label { max-width: 200px; margin-left: 10px; }


/* ==========================================================================
   19  ANIMATIONS / REVEAL
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .68s var(--ease), transform .68s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Content must never depend on JS */
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .mobile-nav__list a { opacity: 1; transform: none; }
}


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

/* --- Large laptop --------------------------------------------------------- */
@media (max-width: 1180px) {
  .site-header__inner { gap: 24px; }
  .nav__list { gap: 22px; }
  .wa-inline span { display: none; }
  .env--feature { min-height: 520px; }
  .env--md, .env--sm { min-height: 253px; }
}

/* --- Tablet landscape ----------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --header-h: 76px; }
  body.is-scrolled { --header-h: 64px; }

  .nav, .site-header__actions { display: none; }
  .nav-toggle { display: flex; margin-left: auto; }

  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero__copy { max-width: 640px; }
  .hero__visual { max-width: 620px; }
  .hero__visual .media--hero { aspect-ratio: 3 / 2; max-height: none; }
  .hero__chip { left: auto; right: 16px; bottom: -22px; }
  .hero__visual-arc { width: 46%; left: -24px; bottom: -24px; }

  .about__grid { grid-template-columns: 1fr; gap: 44px; }
  .about__visual { max-width: 520px; }
  .about__visual .media { aspect-ratio: 3 / 2; }
  .about__stamp { top: -34px; right: 0; }

  .solutions__body { grid-template-columns: 1fr; gap: 32px; }
  .solutions__stage { grid-column: 1; grid-row: 1; position: relative; top: 0; }
  .solutions__list { grid-column: 1; grid-row: 2; }

  .products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product { padding-inline: 24px; }
  .product:nth-child(odd) { border-left: 0; padding-left: 0; }
  .product:nth-child(even) { padding-right: 0; }
  .product:nth-child(n+3) { border-top: 1px solid var(--border); margin-top: 8px; }

  .why__grid { grid-template-columns: 1fr; gap: 44px; }
  .why__intro { position: relative; top: 0; }

  .env--feature { grid-column: span 12; grid-row: span 1; min-height: 400px; }
  .env--md { grid-column: span 6; min-height: 260px; }
  .env--sm { grid-column: span 4; min-height: 220px; }

  .insights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post:last-child { grid-column: span 2; }
  .post:last-child .media--post { aspect-ratio: 21 / 9; }

  .cta__grid { grid-template-columns: 1fr; gap: 40px; }

  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .footer__col--brand { grid-column: span 2; }
}

/* --- Tablet portrait / large phone ---------------------------------------- */
@media (max-width: 760px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }
  .section-head__aside { max-width: 52ch; }

  .strip__inner { grid-template-columns: repeat(2, 1fr); }
  .strip__item {
    padding: 20px 0;
    border-left: 0;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    letter-spacing: .09em;
  }
  .strip__item:nth-child(-n+2) { border-top: 0; }
  .strip__item:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--border); }

  .about__points li { grid-template-columns: 36px minmax(0, 1fr); }

  /* Meet the 44px minimum touch target on tablet/phone */
  .product__wa { width: 44px; height: 44px; }

  .insights__grid { grid-template-columns: 1fr; gap: 40px; }
  .post:last-child { grid-column: span 1; }
  .post:last-child .media--post { aspect-ratio: 4 / 3; }

  .env--md, .env--sm { grid-column: span 6; min-height: 200px; }
}

/* --- Phone ---------------------------------------------------------------- */
@media (max-width: 560px) {
  body { font-size: 16px; }

  .brand img { height: 34px; }
  .site-header.is-scrolled .brand img { height: 30px; }

  .hero { padding-bottom: 56px; }
  .hero__lead { margin-top: 22px; font-size: 16px; }
  .hero__actions { margin-top: 30px; gap: 10px; }
  .hero__actions .btn { width: 100%; }
  .hero__markers {
    margin-top: 36px;
    gap: 8px 18px;
    font-size: 10.5px;
    letter-spacing: .1em;
  }
  .hero__markers li { gap: 18px; }
  .hero__visual .media--hero { aspect-ratio: 4 / 3.4; border-radius: var(--r-md); }
  .hero__chip {
    position: relative;
    left: 0; right: 0; bottom: 0;
    max-width: none;
    margin-top: 18px;
    box-shadow: none;
  }
  .hero__visual-arc { width: 54%; left: -14px; bottom: -14px; }

  .about__stamp { display: none; }
  .about__visual .media { aspect-ratio: 4 / 3; }

  .solutions__trigger {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 20px 14px;
    margin-inline: -14px;
    width: calc(100% + 28px);
  }
  .solutions__arrow { display: none; }
  .solutions__desc { font-size: 14.5px; }

  .products__grid { grid-template-columns: 1fr; }
  .product {
    padding: 30px 0 8px;
    border-left: 0;
  }
  .product:nth-child(n+2) { border-top: 1px solid var(--border); margin-top: 0; }
  .product .media--product { aspect-ratio: 4 / 3; height: auto; }
  .product__desc { max-width: none; }

  .env__grid { gap: 10px; }
  .env--feature { min-height: 320px; }
  .env--md, .env--sm { grid-column: span 12; min-height: 172px; }

  .statement__inner { padding-left: 20px; }
  .statement__rule { bottom: 40px; }

  .footer__cols { grid-template-columns: 1fr; gap: 34px; }
  .footer__col--brand { grid-column: span 1; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

  .wa-float { right: 16px; bottom: 16px; height: 50px; padding: 0 15px; }
  .wa-float__label { display: none; }
}

/* --- Small phone ---------------------------------------------------------- */
@media (max-width: 380px) {
  .mobile-nav__list a { font-size: 22px; padding: 17px 2px; }
  .hero__markers li:not(:last-child)::after { display: none; }
  .hero__markers li { gap: 0; }
  .hero__markers { gap: 6px 16px; }
}

/* --- Very large screens --------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --container: 1340px; }
}


/* ==========================================================================
   21  INNER PAGE HERO / BREADCRUMB
   --------------------------------------------------------------------------
   Shared by products.html and product-detail.html.
   Deliberately shorter than the homepage hero — same gradient, same arc
   language, same eyebrow / title / lead rhythm, reduced vertical weight.
   ========================================================================== */

.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(26px, 3.2vw, 42px) clamp(48px, 5.6vw, 80px);
  background: linear-gradient(180deg, var(--white) 0%, var(--off-white) 62%, var(--light-bg) 100%);
  border-bottom: 1px solid var(--border);
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  color: rgba(38, 51, 105, .09);
  pointer-events: none;
}
.page-hero__arc { width: 100%; height: 100%; }

.page-hero__inner { position: relative; }

.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(22px, 5vw, 80px);
  align-items: end;
}

.page-hero__title {
  font-size: clamp(32px, 4.5vw, 58px);
  line-height: 1.04;
  letter-spacing: -.034em;
}

.page-hero__lead {
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--text-muted);
}

/* --- Breadcrumb ---------------------------------------------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 40px);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.breadcrumb li { display: flex; align-items: center; gap: 10px; }
.breadcrumb li:not(:last-child)::after {
  content: "/";
  color: var(--border-strong);
  font-weight: 600;
}
.breadcrumb a {
  color: var(--text-faint);
  transition: color var(--t-fast) ease;
}
.breadcrumb a:hover { color: var(--green-ink); }
.breadcrumb [aria-current="page"] { color: var(--navy); }


/* ==========================================================================
   22  PRODUCTS PAGE  (products.html)
   --------------------------------------------------------------------------
   A B2B catalogue, not a shop. The card is the homepage .product component
   re-used unchanged; only the grid wrapper and the filter bar are new.
   Row edges (no left rule / flush to the container) are set by main.js so
   they stay correct after filtering — see initProductFilters().
   ========================================================================== */

.catalogue { background: var(--white); }

/* --- Filter bar ---------------------------------------------------------- */

.catalogue__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 32px;
  padding-bottom: clamp(22px, 2.6vw, 32px);
}

.catalogue__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.catalogue__label strong {
  color: var(--navy);
  font-weight: 800;
}

.filters {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.filters::-webkit-scrollbar { display: none; }

.filters__btn {
  position: relative;
  flex: none;
  padding: 10px 0;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--text-faint);
  white-space: nowrap;
  transition: color var(--t-fast) ease;
}
.filters__btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.filters__btn:hover { color: var(--navy); }
.filters__btn.is-active { color: var(--navy); }
.filters__btn.is-active::after,
.filters__btn:hover::after { transform: scaleX(1); }

/* --- Catalogue grid ------------------------------------------------------ */

.catalogue__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border-strong);
}

/* Re-state the card edges so the homepage :first-child / :last-child rules
   never fight the JS row-edge classes below. */
.catalogue__grid .product {
  border-left: 1px solid var(--border);
  padding-inline: clamp(18px, 2vw, 30px);
}
.catalogue__grid .product.is-row-start { border-left: 0; padding-left: 0; }
.catalogue__grid .product.is-row-end   { padding-right: 0; }
.catalogue__grid .product.is-row-next  { border-top: 1px solid var(--border); }

/* .product sets display:flex, which would beat the UA [hidden] rule */
.product[hidden] { display: none; }

/* Category + index line inside the card */
.product__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.product__meta-row .product__cat { margin-bottom: 0; }

.product__idx {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--text-faint);
  transition: color var(--t-fast) ease;
}
.product:hover .product__idx { color: var(--green-ink); }

/* Filter transition — subtle fade + lift, staggered in JS.
   Content stays visible without JS. */
.js .catalogue__grid .product {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.js .catalogue__grid .product.is-in { opacity: 1; transform: none; }

.catalogue__empty {
  padding: clamp(48px, 6vw, 84px) 0;
  border-bottom: 1px solid var(--border);
  text-align: center;
  color: var(--text-muted);
  font-size: 16px;
}
.catalogue__empty[hidden] { display: none; }

.catalogue__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-faint);
}

/* --- Centred CTA variant (catalogue + product detail) -------------------- */

.cta--center .cta__grid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}
.cta--center .eyebrow { justify-content: center; }
.cta--center .cta__lead { margin-inline: auto; }
.cta--center .cta__actions { justify-content: center; }

/* --- Products page responsive -------------------------------------------- */

@media (max-width: 1024px) {
  .page-hero__grid { grid-template-columns: 1fr; gap: 24px; align-items: start; }

  .catalogue__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalogue__grid .product { padding-inline: 24px; }
}

@media (max-width: 760px) {
  .catalogue__bar { align-items: flex-start; flex-direction: column-reverse; }
  .filters {
    width: 100%;
    padding-bottom: 2px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
}

@media (max-width: 560px) {
  .catalogue__grid { grid-template-columns: minmax(0, 1fr); }
  .catalogue__grid .product { padding: 30px 0 8px; border-left: 0; }
  .catalogue__grid .product.is-row-start { padding-left: 0; }
  .breadcrumb { font-size: 10.5px; letter-spacing: .12em; gap: 8px; }
  .breadcrumb li { gap: 8px; }
}


/* ==========================================================================
   23  PRODUCT DETAIL PAGE  (product-detail.html)
   --------------------------------------------------------------------------
   A technical B2B presentation page: gallery + specification, never a shop.
   Every colour, radius, border and motion value below comes from the tokens
   in section 02 — no new design language is introduced.
   ========================================================================== */

/* --- 23.1  Product hero -------------------------------------------------- */

.pd-hero {
  padding-block: clamp(24px, 3vw, 40px) clamp(48px, 6vw, 88px);
  background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 58%);
}

.pd-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}

/* Gallery ----------------------------------------------------------------- */

.pd-gallery { position: sticky; top: calc(var(--header-h) + 28px); }

.pd-gallery__main {
  aspect-ratio: 1 / 1.1;
  border-radius: var(--r-md);
  background-color: var(--off-white);
  box-shadow: var(--shadow-md);
}

.pd-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.pd-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--off-white);
  transition: border-color var(--t-fast) ease;
}
.pd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.pd-thumb:hover { border-color: var(--border-strong); }
.pd-thumb:hover img { transform: scale(1.05); }
.pd-thumb.is-active { border-color: var(--green); }
.pd-thumb.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--green);
  border-radius: var(--r-sm);
  pointer-events: none;
}

/* Product information ----------------------------------------------------- */

.pd-info__cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 16px;
}

.pd-title {
  font-size: clamp(30px, 3.7vw, 50px);
  line-height: 1.06;
  letter-spacing: -.034em;
  margin-bottom: 22px;
}

.pd-intro {
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-muted);
}

.pd-highlights {
  margin: 34px 0 36px;
  border-top: 1px solid var(--border);
}
.pd-highlights li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy);
}
.pd-highlights .icon { color: var(--green-ink); width: 18px; height: 18px; }

.pd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.pd-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  max-width: 48ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
}
.pd-note .icon { color: var(--green-ink); margin-top: 2px; }

/* --- 23.2  Sticky section navigation ------------------------------------- */

.pd-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: top var(--t-base) var(--ease);
}

.pd-nav__list {
  display: flex;
  gap: clamp(18px, 2.3vw, 36px);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.pd-nav__list::-webkit-scrollbar { display: none; }

.pd-nav__link {
  position: relative;
  display: block;
  padding: 17px 0;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text-faint);
  white-space: nowrap;
  transition: color var(--t-fast) ease;
}
.pd-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.pd-nav__link:hover { color: var(--navy); }
.pd-nav__link.is-current { color: var(--navy); }
.pd-nav__link.is-current::after,
.pd-nav__link:hover::after { transform: scaleX(1); }

/* --- 23.3  Information section shells ------------------------------------ */

.pd-section {
  padding-block: clamp(54px, 6.4vw, 98px);
  scroll-margin-top: calc(var(--header-h) + 62px);
  background: var(--white);
}
.pd-section--off   { background: var(--off-white); }
.pd-section--light { background: var(--light-bg); }

.pd-section--dark {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
}
.pd-section--dark .section-title,
.pd-section--dark h3 { color: #fff; }
.pd-section--dark .section-head__aside { color: rgba(255, 255, 255, .66); }

.pd-head { max-width: 58ch; padding-bottom: clamp(34px, 4vw, 56px); }
.pd-head__lead {
  margin-top: 20px;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* Packaging + specifications share one band but stay separate anchor
   targets, so they carry the section offset without the section padding. */
.pd-data__block { scroll-margin-top: calc(var(--header-h) + 62px); }

/* Placeholder callout — the dashed rule signals "content not final" */
.data-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 26px;
  padding: 15px 18px;
  border: 1px dashed var(--border-strong);
  border-left: 2px solid var(--green);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 74ch;
}
.data-note .icon { width: 17px; height: 17px; color: var(--green-ink); margin-top: 2px; }
.pd-section--dark .data-note {
  border-color: rgba(255, 255, 255, .22);
  border-left-color: var(--green-on-dark);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .68);
}
.pd-section--dark .data-note .icon { color: var(--green-on-dark); }

/* --- 23.4  Overview ------------------------------------------------------ */

.pd-overview__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(30px, 5vw, 86px);
  align-items: start;
}
.pd-overview__body > p {
  max-width: 62ch;
  margin-bottom: 20px;
  color: var(--text-muted);
  line-height: 1.78;
}
.pd-overview__body > p:last-of-type { margin-bottom: 0; }

/* --- 23.5  Key features (numbered editorial rows) ------------------------ */

.pd-features { border-top: 1px solid var(--border-strong); }
.pd-features li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 6px 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  transition: border-color var(--t-base) ease;
}
.pd-features li:hover { border-bottom-color: var(--green); }
.pd-features__idx {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--green-ink);
}
.pd-features__title {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: -.024em;
  line-height: 1.25;
  color: var(--navy);
}
.pd-features__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 44ch;
}

/* --- 23.6  Benefits (dark band) ------------------------------------------ */

.pd-benefits__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.pd-benefits__item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 30px clamp(20px, 3vw, 44px) 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.pd-benefits__item:nth-child(even) {
  padding-left: clamp(20px, 3vw, 44px);
  padding-right: 0;
  border-left: 1px solid rgba(255, 255, 255, .16);
}
.pd-benefits__item .icon {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--green-on-dark);
}
.pd-benefits__item h3 {
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.pd-benefits__item p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .62);
  max-width: 42ch;
}

/* --- 23.7  Applications -------------------------------------------------- */

.pd-apps__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.pd-app { min-height: 330px; cursor: default; }
.pd-app .env__name { font-size: clamp(17px, 1.4vw, 20px); }

/* --- 23.8  Data tables (packaging + specifications) ---------------------- */

.pd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.pd-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.pd-table caption {
  padding-bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: left;
}
.pd-table thead th {
  padding: 0 24px 14px 0;
  border-bottom: 1px solid var(--border-strong);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.pd-table tbody th {
  width: 38%;
  padding: 18px 24px 18px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  vertical-align: top;
}
.pd-table tbody td {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  color: var(--text-muted);
  vertical-align: top;
}
.pd-table__tbd { color: var(--text-faint); }

.pd-data__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
}

/* --- 23.9  Usage steps --------------------------------------------------- */

.pd-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border-strong);
}
.pd-steps li {
  position: relative;
  padding: 30px clamp(20px, 2.4vw, 36px) 34px;
  border-left: 1px solid var(--border);
}
.pd-steps li:first-child { border-left: 0; padding-left: 0; }
.pd-steps li:last-child { padding-right: 0; }
.pd-steps li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.pd-steps li:hover::before { transform: scaleX(1); }
.pd-steps__idx {
  display: block;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.pd-steps__text {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--navy);
}

/* --- 23.10  Safety ------------------------------------------------------- */

.pd-safety__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border-strong);
}
.pd-safety__item {
  padding: 28px clamp(18px, 2.2vw, 32px) 30px;
  border-left: 1px solid var(--border);
}
.pd-safety__item:first-child { border-left: 0; padding-left: 0; }
.pd-safety__item:last-child { padding-right: 0; }
.pd-safety__item .icon { color: var(--green-ink); margin-bottom: 16px; }
.pd-safety__item h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.pd-safety__item p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-faint);
}

/* --- 23.11  Related products -------------------------------------------- */

.related { background: var(--white); }
.related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border-strong);
}
.related__grid .product {
  border-left: 1px solid var(--border);
  padding-inline: clamp(18px, 2vw, 30px);
}
.related__grid .product:first-child { border-left: 0; padding-left: 0; }
.related__grid .product:last-child { padding-right: 0; }

/* --- 23.12  Product detail responsive ------------------------------------ */

@media (max-width: 1024px) {
  /* Mobile order: category, title, main image, thumbnails, description,
     highlights, CTA buttons. .pd-info becomes display:contents so its two
     halves can sit either side of the gallery without duplicated markup. */
  .pd-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pd-gallery { position: relative; top: 0; order: 2; max-width: 560px; }
  .pd-info { display: contents; }
  .pd-info__head { order: 1; }
  .pd-info__body { order: 3; }
  .pd-gallery__main { aspect-ratio: 4 / 3.6; }

  .pd-overview__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  .pd-features li {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 8px 16px;
  }
  .pd-features__text { grid-column: 2; max-width: 56ch; }

  .pd-apps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-app { min-height: 280px; }

  .pd-data__grid { grid-template-columns: minmax(0, 1fr); gap: 46px; }

  .pd-safety__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-safety__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pd-safety__item:nth-child(even) { padding-right: 0; }
  .pd-safety__item:nth-child(n+3) { border-top: 1px solid var(--border); }

  .related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related__grid .product { padding-inline: 24px; }
  .related__grid .product:nth-child(odd) { border-left: 0; padding-left: 0; }
  .related__grid .product:nth-child(even) { padding-right: 0; }
  .related__grid .product:nth-child(n+3) {
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }
}

@media (max-width: 760px) {
  .pd-benefits__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-benefits__item,
  .pd-benefits__item:nth-child(even) {
    padding: 26px 0;
    border-left: 0;
  }

  .pd-steps { grid-template-columns: minmax(0, 1fr); }
  .pd-steps li {
    padding: 24px 0 26px;
    border-left: 0;
  }
  .pd-steps li:not(:first-child) { border-top: 1px solid var(--border); }

  /* Tables stack into label/value blocks — never a sideways scroll */
  .pd-table,
  .pd-table tbody,
  .pd-table tbody tr,
  .pd-table tbody th,
  .pd-table tbody td { display: block; width: 100%; }
  .pd-table thead { display: none; }
  .pd-table tbody tr {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
  }
  .pd-table tbody th {
    padding: 0 0 4px;
    border-bottom: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .pd-table tbody td {
    padding: 0;
    border-bottom: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
  }
}

@media (max-width: 560px) {
  .pd-gallery { max-width: none; }
  .pd-gallery__main { aspect-ratio: 4 / 3.8; }
  .pd-gallery__thumbs { gap: 8px; }
  .pd-actions .btn { width: 100%; }

  .pd-apps__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pd-app { min-height: 210px; }

  .pd-safety__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-safety__item,
  .pd-safety__item:nth-child(odd),
  .pd-safety__item:nth-child(even) {
    padding: 24px 0 26px;
    border-left: 0;
  }
  .pd-safety__item:not(:first-child) { border-top: 1px solid var(--border); }

  .related__grid { grid-template-columns: minmax(0, 1fr); }
  .related__grid .product,
  .related__grid .product:nth-child(odd),
  .related__grid .product:nth-child(even) {
    padding: 30px 0 8px;
    border-left: 0;
  }
  .related__grid .product:nth-child(n+2) {
    border-top: 1px solid var(--border);
    margin-top: 0;
  }
}


/* ==========================================================================
   24  ABOUT PAGE  (about.html)
   --------------------------------------------------------------------------
   Most of the About page is built from components already in this file —
   .about__grid (intro + hygiene approach), .pd-features (core values),
   .pd-section--dark + .pd-benefits (quality commitment), .env__grid
   (environments), .statement (brand statement) and .cta (contact CTA).
   Only the four blocks below are genuinely new, and every value resolves to
   the section-02 tokens — no new design language is introduced.
   ========================================================================== */

/* --- 24.1  About hero: page-hero copy + a wide cinematic banner ----------- */

.about-hero { border-bottom: 0; }
.about-hero .page-hero__lead {
  margin-top: 22px;
  max-width: 60ch;
}

.about-hero__figure {
  position: relative;
  margin-top: clamp(32px, 4.5vw, 60px);
}
.about-hero__figure .media {
  aspect-ratio: 21 / 9;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.about-hero__arc {
  position: absolute;
  left: -32px;
  bottom: -26px;
  width: 46%;
  height: auto;
  overflow: visible;
  opacity: .9;
  pointer-events: none;
  z-index: 2;
}
.about-hero__chip {
  position: absolute;
  right: clamp(18px, 3vw, 40px);
  bottom: clamp(18px, 3vw, 34px);
  z-index: 3;
  max-width: 260px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy);
}

/* --- 24.2  Brand philosophy manifesto ------------------------------------ */

.manifesto__list { border-top: 1px solid var(--border-strong); }
.manifesto__row {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(14px, 4vw, 64px);
  align-items: center;
  padding: clamp(28px, 4vw, 52px) 0;
  border-bottom: 1px solid var(--border);
  transition: border-color var(--t-base) ease;
}
.manifesto__row:hover { border-bottom-color: var(--green); }
.manifesto__word {
  font-size: clamp(28px, 4.2vw, 54px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.04;
  color: var(--navy);
}
.manifesto__text {
  max-width: 48ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.72;
  color: var(--text-muted);
}

/* --- 24.3  Mission + Vision ---------------------------------------------- */

.mv__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mv__item {
  padding: clamp(30px, 3.5vw, 52px) clamp(26px, 3vw, 52px);
  border-left: 1px solid var(--border-strong);
}
.mv__item:first-child { border-left: 0; padding-left: 0; }
.mv__item:last-child { padding-right: 0; }
.mv__idx {
  display: block;
  margin-bottom: clamp(18px, 2vw, 28px);
  font-size: clamp(46px, 6.5vw, 84px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--border-strong);
}
.mv__label {
  display: block;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.mv__text {
  max-width: 34ch;
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--navy);
}

/* --- 24.4  Why Avion / business strengths -------------------------------- */

.strengths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border-strong);
}
.strengths__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 4px 8px;
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 44px) clamp(26px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--border);
  transition: border-color var(--t-base) ease;
}
.strengths__item:nth-child(even) {
  padding-left: clamp(24px, 3vw, 44px);
  padding-right: 0;
  border-left: 1px solid var(--border);
}
.strengths__item:hover { border-bottom-color: var(--green); }
.strengths__idx {
  grid-row: span 2;
  padding-top: 5px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--green-ink);
}
.strengths__title {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 8px;
}
.strengths__text {
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* --- 24.5  About responsive ---------------------------------------------- */

@media (max-width: 1024px) {
  .about-hero__figure .media { aspect-ratio: 16 / 9; }
  .about-hero__chip { max-width: 220px; }
}

@media (max-width: 760px) {
  .manifesto__row {
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }

  .mv__grid { grid-template-columns: 1fr; }
  .mv__item {
    padding: clamp(26px, 6vw, 40px) 0;
    border-left: 0;
    border-top: 1px solid var(--border-strong);
  }
  .mv__item:first-child { border-top: 0; padding-top: 0; }

  .strengths { grid-template-columns: 1fr; }
  .strengths__item,
  .strengths__item:nth-child(even) {
    padding: 26px 0;
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .about-hero__figure .media { aspect-ratio: 4 / 3; }
  .about-hero__arc { width: 54%; left: -16px; bottom: -14px; }
  .about-hero__chip {
    position: static;
    max-width: none;
    margin-top: 16px;
    box-shadow: none;
  }
}


/* ==========================================================================
   25  CONTACT PAGE  (contact.html)
   ========================================================================== */

/* --- 25.1  Contact hero quick-channel accent ----------------------------- */

.contact-hero .page-hero__lead { margin-top: 22px; max-width: 52ch; }

.contact-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin-top: 30px;
}
.contact-hero__meta li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
}
.contact-hero__meta .icon { color: var(--green-ink); }

/* --- 25.2  Contact + form layout ----------------------------------------- */

.contact { background: var(--white); }

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: start;
}
.contact__intro { position: sticky; top: calc(var(--header-h) + 28px); }
.contact__intro > p {
  max-width: 42ch;
  margin-top: 4px;
  color: var(--text-muted);
  line-height: 1.75;
}
.contact__intro-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  max-width: 40ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
}
.contact__intro-note .icon { color: var(--green-ink); margin-top: 2px; }

/* --- 25.3  Form controls ------------------------------------------------- */

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
}

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

.field__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--navy);
}
.field__req { color: var(--green-ink); }
.field__opt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.field__control {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  font: inherit;
  font-size: 15.5px;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.field__control::placeholder { color: var(--text-faint); }

textarea.field__control {
  height: auto;
  min-height: 150px;
  padding: 14px 16px;
  line-height: 1.6;
  resize: vertical;
}

select.field__control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23263369' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
}

.field__control:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(124, 167, 53, .16);
}

/* Validation state — a single functional error colour, used nowhere else */
.field.has-error .field__control { border-color: #c0281f; }
.field.has-error .field__control:focus { box-shadow: 0 0 0 3px rgba(192, 40, 31, .14); }

.field__error {
  display: none;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: #c0281f;
}
.field.has-error .field__error { display: flex; }
.field__error .icon { width: 15px; height: 15px; stroke-width: 1.8; }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  margin-top: clamp(22px, 2.6vw, 32px);
}
.form__note {
  max-width: 42ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-faint);
}

.form.is-hidden { display: none; }

/* Success panel — replaces the form after a valid submit */
.form-success {
  display: none;
  gap: 16px;
  padding: clamp(28px, 3.4vw, 44px);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--r-md);
  background: var(--green-tint);
}
.form-success.is-visible { display: flex; }
.form-success__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--green);
  color: var(--navy-deep);
}
.form-success__icon .icon { width: 24px; height: 24px; stroke-width: 1.9; }
.form-success__title {
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy);
  margin-bottom: 8px;
}
.form-success__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 48ch;
}

/* --- 25.4  Direct contact options ---------------------------------------- */

.contact-methods { background: var(--off-white); }
.contact-methods__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border-strong);
}
.contact-method {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(30px, 3.2vw, 46px) clamp(24px, 2.6vw, 40px);
  border-left: 1px solid var(--border);
  transition: background var(--t-fast) ease;
}
.contact-method:first-child { border-left: 0; padding-left: 0; }
.contact-method:last-child { padding-right: 0; }
.contact-method::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.contact-method:hover::before,
.contact-method:focus-within::before { transform: scaleX(1); }

.contact-method__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--green-ink);
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.contact-method:hover .contact-method__icon {
  background: var(--green);
  border-color: var(--green);
  color: var(--navy-deep);
}
.contact-method__icon .icon { width: 24px; height: 24px; }

.contact-method__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contact-method__value {
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--navy);
}
.contact-method .link-arrow { margin-top: 6px; font-size: 14px; }

/* --- 25.5  Business information + map placeholder ------------------------- */

.contact-info__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: stretch;
}

.info-list { border-top: 1px solid var(--border); }
.info-list li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 8px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.info-list__k {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: 2px;
}
.info-list__v { font-size: 16px; font-weight: 600; color: var(--navy); }
.info-list__v a { transition: color var(--t-fast) ease; }
.info-list__v a:hover { color: var(--green-ink); }

/* Map placeholder — reuses the .media gradient language, never an embed */
.map-ph {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--navy-tint) 0%, #e9edf6 55%, #dfe5f1 100%);
  isolation: isolate;
}
.map-ph::before {
  content: "";
  position: absolute;
  left: -50%;
  bottom: -190%;
  width: 200%;
  height: 260%;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(124, 167, 53, .5);
  transform: rotate(-7deg);
  z-index: 0;
}
.map-ph__inner {
  position: relative;
  z-index: 1;
  max-width: 40ch;
  padding: 32px;
}
.map-ph__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--green-ink);
  box-shadow: var(--shadow-sm);
}
.map-ph__pin .icon { width: 26px; height: 26px; }
.map-ph__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 10px;
}
.map-ph__note {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* --- 25.6  Contact responsive -------------------------------------------- */

@media (max-width: 1024px) {
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .contact__intro { position: relative; top: 0; }

  .contact-methods__grid { grid-template-columns: 1fr; }
  .contact-method { padding-inline: 0; border-left: 0; }
  .contact-method:not(:first-child) { border-top: 1px solid var(--border); }
  .contact-method::before { display: none; }

  .contact-info__grid { grid-template-columns: 1fr; gap: 34px; }
  .map-ph { min-height: 300px; }
}

@media (max-width: 560px) {
  .form__grid { grid-template-columns: 1fr; }
  .form__foot .btn { width: 100%; }
  .form__note { max-width: none; }

  .info-list li { grid-template-columns: 1fr; gap: 4px; }
  .info-list__k { padding-top: 0; }
  .map-ph { min-height: 260px; }
  .map-ph__inner { padding: 26px 22px; }
}


/* ==========================================================================
   26  BLOG LISTING  (blog.html)
   --------------------------------------------------------------------------
   An editorial extension of the Avion system. The article card reuses the
   homepage .post component; only the featured lead, the filter bar, the
   horizontal "more" rows and the editorial break are new. Every value
   resolves to the section-02 tokens.
   ========================================================================== */

.blog { background: var(--white); }

/* --- 26.1  Featured lead article ----------------------------------------- */

.featured {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding-top: clamp(8px, 2vw, 20px);
}

.featured__media { position: relative; }
.featured__media .media {
  aspect-ratio: 16 / 11;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.featured:hover .media img { transform: scale(1.04); }

.featured__flag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 8px 14px;
  background: var(--white);
  border-left: 3px solid var(--green);
  border-radius: var(--r-sm);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--green-ink);
  box-shadow: var(--shadow-sm);
}

.featured__body { max-width: 44ch; }
.featured__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.featured__cat { color: var(--green-ink); }
.featured__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
.featured__title {
  font-size: clamp(26px, 3.1vw, 40px);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin-bottom: 18px;
}
.featured__title a { transition: color var(--t-fast) ease; }
.featured__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.featured:hover .featured__title a { color: var(--navy-dark); }
.featured__excerpt {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 26px;
}

/* --- 26.2  Topic filter bar (reuses the .filters pattern) ---------------- */

.blog-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 32px;
  padding-bottom: clamp(24px, 2.8vw, 34px);
}

/* --- 26.3  Insights grid (reuses homepage .post cards) ------------------- */

.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.2vw, 46px) clamp(24px, 2.6vw, 40px);
}

/* .post sets position:relative; the [hidden] filter needs to beat display */
.insights-grid .post[hidden] { display: none; }

.js .insights-grid .post {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.js .insights-grid .post.is-in { opacity: 1; transform: none; }

.blog-empty {
  padding: clamp(40px, 5vw, 72px) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
  color: var(--text-muted);
  font-size: 16px;
}
.blog-empty[hidden] { display: none; }

/* --- 26.4  Editorial break statement ------------------------------------- */

.editorial {
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 8vw, 128px);
  background: var(--navy);
  color: #fff;
}
.editorial__arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, .13);
  pointer-events: none;
}
.editorial__inner {
  position: relative;
  max-width: 940px;
}
.editorial__quote {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.032em;
  color: #fff;
  text-wrap: balance;
}
.editorial__quote .u-accent-light { color: var(--green-on-dark); }
.editorial__text {
  max-width: 52ch;
  margin-top: clamp(22px, 3vw, 34px);
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .68);
}

/* --- 26.5  "More from Avion" horizontal rows ----------------------------- */

.more-list { border-top: 1px solid var(--border-strong); }

.more-row {
  position: relative;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--border);
  transition: border-color var(--t-base) ease;
}
.more-row:hover { border-bottom-color: var(--green); }

.more-row__media {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-sm);
  background: var(--off-white);
}
.more-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.more-row:hover .more-row__media img { transform: scale(1.05); }

.more-row__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.more-row__cat { color: var(--green-ink); }
.more-row__title {
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.24;
  letter-spacing: -.026em;
  color: var(--navy);
}
.more-row__title a { transition: color var(--t-fast) ease; }
.more-row__title a::after { content: ""; position: absolute; inset: 0; }
.more-row:hover .more-row__title a { color: var(--navy-dark); }

.more-row__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--green-ink);
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-base) var(--ease);
}
.more-row:hover .more-row__arrow {
  background: var(--green);
  border-color: var(--green);
  color: var(--navy-deep);
  transform: translateX(3px);
}

/* --- 26.6  Blog listing responsive --------------------------------------- */

@media (max-width: 1024px) {
  .featured { grid-template-columns: 1fr; gap: 28px; }
  .featured__media .media { aspect-ratio: 16 / 9; }
  .featured__body { max-width: none; }

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

  .more-row { grid-template-columns: 128px minmax(0, 1fr) auto; }
}

@media (max-width: 560px) {
  .insights-grid { grid-template-columns: 1fr; }

  .more-row {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  .more-row__arrow { display: none; }
}


/* ==========================================================================
   27  BLOG ARTICLE  (blog-detail.html)
   ========================================================================== */

/* --- 27.1  Article header ------------------------------------------------ */

.article-hero {
  padding-block: clamp(24px, 3vw, 40px) clamp(30px, 3.4vw, 48px);
  background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 70%);
}
.article-hero__head { max-width: 820px; }
.article-hero__title {
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -.034em;
  margin-bottom: 24px;
}
.article-hero__deck {
  max-width: 62ch;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--text-muted);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}
.article-meta__item { display: flex; align-items: center; gap: 8px; }
.article-meta__item .icon { width: 16px; height: 16px; color: var(--green-ink); }
.article-meta__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }
.article-meta__author { font-weight: 700; color: var(--navy); }

/* --- 27.2  Wide anchor image --------------------------------------------- */

.article-figure { margin-bottom: clamp(36px, 4.5vw, 64px); }
.article-figure .media {
  aspect-ratio: 21 / 9;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.article-figure figcaption {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-faint);
  max-width: 70ch;
}

/* --- 27.3  Reading layout: content column + sticky rails ----------------- */

.article-body {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 220px);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.article-rail { position: sticky; top: calc(var(--header-h) + 28px); }
.article-rail--toc { grid-column: 1; }
.article-rail--aside { grid-column: 3; }

.article-content {
  grid-column: 2;
  max-width: 760px;
  width: 100%;
  justify-self: center;
}

/* --- 27.4  Table of contents --------------------------------------------- */

.toc__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 18px;
}
.toc__list { border-left: 1px solid var(--border); }
.toc__item > a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0 9px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-muted);
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.toc__idx { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--text-faint); padding-top: 2px; }
.toc__item > a:hover { color: var(--navy); }
.toc__item.is-current > a { color: var(--navy); border-left-color: var(--green); }
.toc__item.is-current .toc__idx { color: var(--green-ink); }

/* Mobile TOC = a <details> disclosure */
.toc-mobile { display: none; }
.toc-mobile {
  margin-bottom: 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--off-white);
}
.toc-mobile > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.toc-mobile > summary::-webkit-details-marker { display: none; }
.toc-mobile > summary .icon { transition: transform var(--t-fast) ease; }
.toc-mobile[open] > summary .icon { transform: rotate(180deg); }
.toc-mobile__list { padding: 4px 18px 18px; }
.toc-mobile__list li { padding: 8px 0; border-top: 1px solid var(--border); font-size: 15px; }
.toc-mobile__list a { color: var(--text-muted); }
.toc-mobile__list a:hover { color: var(--green-ink); }

/* --- 27.5  Share rail ---------------------------------------------------- */

.share__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.share__list { display: flex; gap: 10px; flex-wrap: wrap; }
.article-rail--aside .share__list { flex-direction: column; align-items: flex-start; }
.share__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.share__btn .icon { width: 18px; height: 18px; color: var(--green-ink); transition: color var(--t-fast) ease; }
.share__btn:hover { border-color: var(--green); background: var(--green-tint); }
.share__btn.is-copied { border-color: var(--green); background: var(--green-tint); color: var(--green-ink); }

/* --- 27.6  Aside product callout (sticky rail) --------------------------- */

.aside-card {
  margin-top: 28px;
  padding: 22px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--green);
  border-radius: var(--r-md);
  background: var(--off-white);
}
.aside-card__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 12px;
}
.aside-card__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 16px;
}
.aside-card .link-arrow { font-size: 14px; }


/* ==========================================================================
   28  ARTICLE TYPOGRAPHY  (the prose column)
   ========================================================================== */

.prose { font-size: clamp(17px, 1.2vw, 18.5px); line-height: 1.8; color: var(--text); }
.prose > * + * { margin-top: 1.5em; }
.prose p { color: #333a52; }
.prose strong { color: var(--navy); font-weight: 700; }

.prose h2 {
  font-size: clamp(23px, 2.3vw, 30px);
  line-height: 1.16;
  letter-spacing: -.028em;
  color: var(--navy);
  margin-top: 2em;
  scroll-margin-top: calc(var(--header-h) + 28px);
}
.prose h2 .prose__idx {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--green-ink);
  -webkit-text-fill-color: initial;
}
.prose h3 {
  font-size: clamp(19px, 1.6vw, 22px);
  letter-spacing: -.022em;
  color: var(--navy);
  margin-top: 1.7em;
}

.prose a:not(.btn):not(.link-arrow) {
  color: var(--green-ink);
  font-weight: 600;
  border-bottom: 1px solid var(--border-strong);
  transition: border-color var(--t-fast) ease;
}
.prose a:not(.btn):not(.link-arrow):hover { border-color: var(--green); }

.prose ul, .prose ol { padding-left: 0; }
.prose li {
  position: relative;
  padding-left: 30px;
  margin-top: .7em;
  line-height: 1.7;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}
.prose ol { counter-reset: prose-ol; }
.prose ol li { counter-increment: prose-ol; }
.prose ol li::before {
  content: counter(prose-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .05em;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--green-ink);
}

.prose blockquote {
  margin-top: 1.7em;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--green);
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--navy);
}

.prose figure { margin-top: 2em; }
.prose figure .media { border-radius: var(--r-md); aspect-ratio: 16 / 9; }
.prose figcaption { margin-top: 10px; font-size: 12.5px; color: var(--text-faint); }

/* Inline good-practice callout — an accent rule, not a giant card */
.callout {
  margin-top: 2em;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--r-sm);
  background: var(--green-tint);
}
.callout__label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 10px;
}
.callout__label .icon { width: 17px; height: 17px; }
.callout p { font-size: 15.5px; line-height: 1.7; color: var(--navy); margin: 0; }

/* In-flow product callout inside the article */
.article-cta {
  margin-top: 2.4em;
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--r-md);
  background: var(--navy);
  color: #fff;
}
.article-cta__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-on-dark);
  margin-bottom: 14px;
}
.article-cta__title {
  color: #fff;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.18;
  letter-spacing: -.022em;
  margin-bottom: 14px;
}
.article-cta__text {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 24px;
  max-width: 52ch;
}
.article-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- 28.1  Related insights (reuses .post) ------------------------------- */

.related-insights { background: var(--off-white); }
.related-insights__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 46px);
}

/* --- 28.2  Article responsive -------------------------------------------- */

@media (max-width: 1100px) {
  /* Drop the right aside first; keep the TOC rail */
  .article-body { grid-template-columns: minmax(0, 190px) minmax(0, 1fr); }
  .article-rail--aside { display: none; }
  .article-content { grid-column: 2; justify-self: start; }
}

@media (max-width: 860px) {
  .article-body { grid-template-columns: 1fr; gap: 0; }
  .article-rail--toc { display: none; }
  .article-content { grid-column: 1; max-width: 720px; margin-inline: auto; }
  .toc-mobile { display: block; }

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

@media (max-width: 560px) {
  .article-figure .media { aspect-ratio: 4 / 3; }
  .article-cta__actions .btn { width: 100%; }
  .related-insights__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   29  LEGAL PAGES  (privacy-policy.html, terms-conditions.html)
   --------------------------------------------------------------------------
   A constrained reading column reusing the article .prose typography, the
   .page-hero and the .data-note placeholder callout. No new type scale or
   colours are introduced.
   ========================================================================== */

.legal { padding-block: clamp(40px, 5vw, 78px); background: var(--white); }
.legal__col { max-width: 800px; margin-inline: auto; }

.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}
.legal__meta strong { color: var(--navy); font-weight: 700; }

/* Legal prose sections don't use the numbered index span, so their h2 keeps a
   plain top rhythm — nothing further needed; .prose handles the rest. */
.legal .prose h2:first-of-type { margin-top: 0; }


/* ==========================================================================
   30  MOBILE OVERFLOW HARDENING
   --------------------------------------------------------------------------
   Root cause of horizontal scroll on narrow phones (≤ ~365px): a .u-mark
   phrase such as "Hygiene Requirements." is kept on one line by white-space
   nowrap and can be wider than the viewport. On phones we let those phrases
   wrap and allow long headings to break, so nothing forces the page wider
   than the screen. Pairs with the overflow-x:hidden guard in section 01.
   ========================================================================== */

@media (max-width: 560px) {
  /* Marked hero phrases wrap instead of overflowing */
  .u-mark { white-space: normal; }

  /* Long headings may break rather than push the layout wide */
  h1, h2,
  .hero__title, .page-hero__title, .section-title, .about__title,
  .cta__title, .article-hero__title, .featured__title, .pd-title,
  .manifesto__word, .editorial__quote { overflow-wrap: break-word; }
}