/*
Theme Name: IFOURNI Technology
Theme URI: https://ifourni.com/
Author: IFOURNI Technology
Description: Block theme (Full Site Editing) for IFOURNI Technology — agricultural sprayers and small farm machinery. Strong tools for better harvest.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
Version: 2.43.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ifourni
Tags: full-site-editing, block-patterns, business, one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, translation-ready
*/

/* ============================================================
   1. SOURCE PARITY LAYER
   Verbatim from the approved IFOURNI HTML build (styles.css).
   Do not hand-edit — regenerate from source to keep parity.
   ============================================================ */

/* ============================================================
   IFOURNI Technology — Homepage (clean production build)
   Design tokens + layout. Imagery = neutral placeholder blocks.
   ============================================================ */

:root {
  /* Brand palette */
  --blue: #0C89C6;
  --blue-700: #0a72a6;
  --blue-800: #095f8a;
  --blue-deep: #325E8E;
  --black: #0F1010;
  --bone: #F6F5F1;
  --white: #FFFFFF;

  /* Ink + lines */
  --fg1: #0F1010;
  --fg2: #4A4D4C;
  --fg3: #8B8E8D;
  --line: #E6E7E7;
  --line-bone: #D6D3CB;
  --line-dark: rgba(255,255,255,0.10);

  /* Placeholder image blocks */
  --img-gray: #E5E5E5;
  --img-black: #1A1A1A;

  /* Type */
  --font-display: "Merriweather Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Layout */
  --container: 1216px;
  --gutter: 32px;
  --section-y: 112px;

  /* Radius */
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(15,16,16,.06);
  --shadow-md: 0 8px 24px rgba(15,16,16,.08);
  --shadow-lg: 0 24px 48px rgba(15,16,16,.12);
  --shadow-brand: 0 12px 32px rgba(12,137,198,.28);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

#videos, #manuals, #guides, #help, #troubleshooting { scroll-margin-top: 92px; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--fg1);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

/* ---------- Shared primitives ---------- */

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

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

.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg2);
  margin: 0;
}
.eyebrow.on-dark { color: rgba(255,255,255,.66); }

.tick {
  width: 24px; height: 2px;
  background: var(--blue);
  border-radius: 2px;
  margin: 12px 0 18px;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
.h2.on-dark { color: var(--white); }

.lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg2);
  margin: 16px 0 0;
  max-width: 52ch;
}
.lede.on-dark { color: rgba(255,255,255,.78); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.section-head .copy { max-width: 560px; }
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.section-head--center .copy { max-width: 640px; }
.section-head--center .tick { margin-inline: auto; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -.01em;
  border-radius: var(--r-pill);
  padding: 11px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--ease) .15s, box-shadow var(--ease) .15s,
              color var(--ease) .15s, transform var(--ease) .15s, border-color var(--ease) .15s;
  white-space: nowrap;
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-700); box-shadow: var(--shadow-brand); }
.btn--primary:active { background: var(--blue-800); transform: translateY(1px); }

.btn--ghost-light {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.36);
  color: #fff;
}
.btn--ghost-light:hover { background: rgba(255,255,255,.26); }

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--fg1);
}
.btn--ghost:hover { background: var(--bone); }

.btn--dark { background: var(--black); border-color: var(--black); color: #fff; }
.btn--dark:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

.btn--outline-blue {
  background: transparent;
  border-color: var(--blue);
  color: var(--blue);
  font-size: 12px;
  padding: 8px 16px;
}
.btn--outline-blue:hover { background: rgba(12,137,198,.08); }

.btn--sm { font-size: 12px; padding: 8px 16px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--blue);
  transition: gap var(--ease) .15s;
}
.link-arrow:hover { gap: 10px; }
.link-arrow.on-dark { color: #fff; }

/* ---------- Placeholder image blocks ---------- */

.ph {
  background: var(--img-gray);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
.ph--black { background: var(--img-black); }
/* Nested user-fillable image slots fill their placeholder wrapper exactly */
image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ph__label {
  position: absolute;
  left: 16px; bottom: 14px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(0,0,0,.32);
  font-weight: 500;
}
.ph--black .ph__label { color: rgba(255,255,255,.4); }

/* Let image drops pass through full-bleed hero/banner text overlays to the
   image-slot beneath, while keeping links + buttons clickable. */
.dist-hero .container,
.why--hero .why__inner,
.ctp-banner__inner,
.featshow__inner,
.slideshow-full__cap { pointer-events: none; }
.dist-hero .container a, .dist-hero .container button,
.why--hero .why__inner a, .why--hero .why__inner button,
.ctp-banner__inner a, .ctp-banner__inner button,
.featshow__inner a, .featshow__inner button,
.slideshow-full__cap a, .slideshow-full__cap button { pointer-events: auto; }

/* ============================================================
   NAV
   ============================================================ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background var(--ease) .24s, box-shadow var(--ease) .24s,
              backdrop-filter var(--ease) .24s;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 24px;
}
.nav__logo { height: 26px; width: auto; }
.nav__links {
  flex: 1;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.86);
  padding: 6px 0;
  position: relative;
  transition: color var(--ease) .15s;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--blue);
  transition: width var(--ease) .2s;
}
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { width: 100%; }
.nav__right { display: flex; align-items: center; gap: 18px; }
.nav__lang { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.7); }
.lang { position: relative; }
.lang__btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 6px 4px;
  font-family: inherit; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.8);
  transition: color var(--ease) .15s;
}
.lang__btn:hover { color: #fff; }
.nav.scrolled .lang__btn { color: var(--fg2); }
.nav.scrolled .lang__btn:hover { color: var(--fg1); }
.lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; min-width: 96px;
  background: #fff; border: 1px solid var(--line-bone); border-radius: 14px;
  box-shadow: 0 24px 48px rgba(15,16,16,.12); overflow: hidden; padding: 6px;
}
.lang__opt {
  display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--fg2);
  padding: 8px 12px; border-radius: 9px;
}
.lang__opt:hover { background: var(--bone); color: var(--fg1); }
.lang__opt.is-active { color: var(--blue); font-weight: 600; }

/* scrolled state -> solid white bar */
.nav.scrolled {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}
.nav.scrolled .nav__logo { filter: none; }
.nav.scrolled .nav__links a { color: var(--fg2); }
.nav.scrolled .nav__links a:hover { color: var(--fg1); }
.nav .nav__links a.active, .nav.scrolled .nav__links a.active { color: var(--blue); font-weight: 600; }
.nav.scrolled .nav__lang { color: var(--fg2); }

.nav__toggle { display: none; }

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

.hero {
  position: relative;
  background: var(--img-black);
  color: #fff;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
}
.hero > .container { display: flex; width: 100%; }
.hero__bg {
  position: absolute; inset: 0;
  background: var(--img-black);
}
.hero__bg::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top right, rgba(15,16,16,.85) 0%, rgba(15,16,16,.5) 38%, rgba(15,16,16,.12) 72%, rgba(15,16,16,.04) 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero .container { pointer-events: none; }
.hero .container a, .hero .container button { pointer-events: auto; }
.hero__content {
  padding-top: 160px;
  padding-bottom: 72px;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -.03em;
  margin: 0 0 24px;
}
.hero p {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,.86);
  max-width: 460px;
  margin: 0 0 32px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   WHO WE ARE
   ============================================================ */

.who { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.who__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-xl);
}
.who__media .ph__label.heart {
  left: 16px; top: 16px; bottom: auto;
  background: #fff;
  color: var(--fg2);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
.who__list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.who__list li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.5; color: var(--fg2); }
.who__list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--blue); flex-shrink: 0;
}
.who__actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* ============================================================
   STATS
   ============================================================ */

.stats-section { background: var(--bone); }

/* ---------- Gallery carousel ---------- */
.carousel {
  position: relative;
  margin-top: 56px;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.carousel__track {
  display: flex;
  transition: transform 600ms var(--ease, cubic-bezier(0.22,0.61,0.36,1));
}
.carousel__slide { flex: 0 0 100%; }
.carousel__media {
  height: 460px;
  border-radius: 0;
}
.carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--ink, #0F1010);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  transition: background 150ms var(--ease);
}
.carousel__arrow svg { width: 20px; height: 20px; }
.carousel__arrow:hover { background: #fff; }
.carousel__arrow--prev { left: 16px; }
.carousel__arrow--prev svg { transform: scaleX(-1); }
.carousel__arrow--next { right: 16px; }
.carousel__dots {
  position: absolute; left: 0; right: 0; bottom: 16px;
  display: flex; justify-content: center; gap: 8px;
}
.carousel__dot {
  width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.5); padding: 0;
  transition: background 150ms var(--ease), width 150ms var(--ease);
}
.carousel__dot.is-active { background: #fff; width: 22px; border-radius: 999px; }
@media (max-width: 860px) {
  .carousel__media { height: 320px; }
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 8px;
}
.stat {
  padding: 18px 24px 18px 0;
  border-top: 1px solid var(--line-bone);
}
.stat__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.02em;
}
.stat:nth-child(2) .stat__value { color: var(--blue); }
.stats-section .stats .stat__value { color: var(--ink, #0F1010); transition: color var(--ease) .15s; }
.stats-section .stats .stat:hover .stat__value { color: var(--blue); }
.stat__label {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg3);
}

/* ============================================================
   GENERIC CARD GRIDS
   ============================================================ */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.icon-tile {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: rgba(12,137,198,.10);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.icon-tile svg { width: 22px; height: 22px; }

/* What we do cards */
.do-card {
  background: var(--bone);
  border-radius: var(--r-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform var(--ease) .24s, box-shadow var(--ease) .24s;
}
.do-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.do-card__label {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg3); margin: 0;
}
.do-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.01em;
  margin: 4px 0 0;
}
.do-card__body { font-size: 13px; line-height: 1.6; color: var(--fg2); margin: 0; }

/* ============================================================
   SOLUTIONS (dark)
   ============================================================ */

.dark-section { background: var(--black); color: #fff; }

.sol-card {
  background: #161717;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--ease) .24s, border-color var(--ease) .24s;
}
.sol-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.22); }
.sol-card__media {
  aspect-ratio: 16 / 10;
  background: var(--img-black);
  border-bottom: 1px solid var(--line-dark);
  position: relative;
}
.sol-card__pill {
  position: absolute; left: 16px; top: 16px;
  z-index: 2;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.18);
  padding: 5px 10px; border-radius: var(--r-pill);
}
.sol-card__icon {
  position: absolute; right: 16px; top: 16px;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,.08);
  display: grid; place-items: center; color: #fff;
}
.sol-card__icon svg { width: 20px; height: 20px; }
.sol-card__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sol-card__title {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  letter-spacing: -.01em; margin: 0;
}
.sol-card__text { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.66); margin: 0; flex: 1; }

/* ============================================================
   BUILT WITH HEART (dark CTA)
   ============================================================ */

.distributors__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}
.distributors__head .lede { max-width: 600px; margin-top: 12px; }
.distributors__head > div { max-width: 760px; }
.distributors__head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.distributors__head--center .tick { margin-inline: auto; }
.distributors__head--center .lede { margin-inline: auto; }
.distributors__cta { display: flex; justify-content: center; margin-top: 40px; }
.logo-cloud {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.logo-cloud__item {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-md, 12px);
  background: transparent;
}
.logo-cloud__img {
  max-width: 56%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: filter 150ms var(--ease), opacity 150ms var(--ease);
}
.logo-cloud__item:hover .logo-cloud__img { filter: none; opacity: 1; }
.logo-cloud__label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg3, #8A8D8A);
}
@media (max-width: 860px) {
  .distributors__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .logo-cloud { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   VALUES
   ============================================================ */

.values-section { background: var(--bone); }
.value-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform var(--ease) .24s, box-shadow var(--ease) .24s;
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.value-card .icon-tile { width: 44px; height: 44px; }
.value-card__title {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  letter-spacing: -.01em; margin: 4px 0 0;
}
.value-card__text { font-size: 12.5px; line-height: 1.55; color: var(--fg2); margin: auto 0 0; }

/* ============================================================
   FARMER STORIES
   ============================================================ */

.stories { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
.stories__media { border-radius: var(--r-xl); min-height: 420px; }
.stories__quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stories__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  line-height: .6;
  color: var(--blue);
  letter-spacing: -.05em;
  margin-bottom: 24px;
}
.stories__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -.01em;
  margin: 0 0 28px;
  text-wrap: pretty;
}
.stories__author { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0; }
.stories__role { font-size: 13px; color: var(--fg3); margin: 4px 0 0; }
.stories__nav { display: flex; gap: 10px; margin-top: 28px; }
.stories__btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--fg1);
  transition: background var(--ease) .15s, border-color var(--ease) .15s;
}
.stories__btn:hover { background: var(--bone); border-color: var(--line-bone); }
.stories__btn svg { width: 18px; height: 18px; }
.stories__count { font-size: 12px; color: var(--fg3); align-self: center; margin-left: 6px; }
.stories__head { display: flex; justify-content: space-between; align-items: flex-end; }

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

.faq { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item > summary {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
  color: var(--fg1);
  transition: color var(--ease) .15s;
}
.faq__item[open] > summary { color: var(--blue); }
.faq__item > summary:hover { color: var(--blue); }
.faq__sign {
  flex-shrink: 0;
  width: 22px; height: 22px;
  position: relative;
}
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; background: currentColor;
  left: 50%; top: 50%;
}
.faq__sign::before { width: 12px; height: 2px; transform: translate(-50%,-50%); }
.faq__sign::after { width: 2px; height: 12px; transform: translate(-50%,-50%); transition: transform var(--ease) .2s; }
.faq__item.open .faq__sign::after { transform: translate(-50%,-50%) scaleY(0); }
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ease) .3s;
}
.faq__a p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg2);
  margin: 0 0 22px;
  max-width: 54ch;
}

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

.contact-section { background: #EAF4FB; }
.contact { max-width: 640px; margin: 0 auto; text-align: center; }
.contact .tick { margin-inline: auto; }
.contact h2 { margin-bottom: 12px; }
.contact .lede { margin-inline: auto; text-align: center; }
.contact__form {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  text-align: left;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 500; color: var(--fg2); }
.field input, .field textarea {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg1);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 13px 18px;
  outline: none;
  transition: border-color var(--ease) .15s, box-shadow var(--ease) .15s;
}
.field textarea { border-radius: var(--r-lg); min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(12,137,198,.12);
}
.contact__submit { grid-column: 1 / -1; margin-top: 6px; }
.contact__submit .btn { width: 100%; justify-content: center; padding-block: 15px; }
.contact__divider {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg3);
  margin: 14px 0 2px;
}
.contact__divider::before, .contact__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.contact__reach { grid-column: 1 / -1; display: flex; gap: 12px; justify-content: center; }
.reach-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--r-pill);
  padding: 11px 22px;
  font-size: 14px; font-weight: 500;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  transition: transform var(--ease) .15s, box-shadow var(--ease) .15s;
}
.reach-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.reach-btn svg { width: 18px; height: 18px; }
.reach-btn--mail { color: var(--blue); }
.reach-btn--wa { color: #1FA855; }

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

.footer { background: var(--black); color: #fff; padding-block: 72px 28px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; }
.footer__logo { height: 30px; margin-bottom: 20px; }
.footer__desc { font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.72); margin: 0 0 20px; max-width: 30ch; }
.footer__contact { display: flex; flex-direction: column; gap: 8px; }
.footer__contact a {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: rgba(255,255,255,.82);
  transition: color var(--ease) .15s;
}
.footer__contact a:hover { color: #fff; }
.footer__contact svg { width: 15px; height: 15px; color: rgba(255,255,255,.5); flex-shrink: 0; }
.footer__col h4 {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin: 0 0 16px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer__col a { font-size: 13px; color: rgba(255,255,255,.82); transition: color var(--ease) .15s; }
.footer__col a:hover { color: var(--blue); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--line-dark);
}
.footer__bottom span { font-size: 11px; color: rgba(255,255,255,.5); }
.footer__bottom em { font-style: italic; }

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

@media (max-width: 960px) {
  :root { --section-y: 80px; --gutter: 24px; }
  .who, .stories, .faq { grid-template-columns: 1fr; gap: 40px; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-top: 1px solid var(--line-bone); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__brand { grid-column: 1 / -1; }
  .who__media { aspect-ratio: 4 / 3; }
  .stories__media { min-height: 300px; }

  .nav__links, .nav__lang, .lang { display: none; }
  .nav__toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    background: none; border: none; cursor: pointer; padding: 6px;
  }
  .nav__toggle span { width: 22px; height: 2px; background: #fff; transition: background var(--ease) .2s; }
  .nav.scrolled .nav__toggle span { background: var(--fg1); }
  .hero__content { padding-top: 150px; padding-bottom: 80px; }
}

@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat__value { font-size: 30px; }
  .contact__form { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
}

/* ============================================================
   MEGA MENU
   ============================================================ */
.nav__links a.has-mega { display: inline-flex; align-items: center; gap: 4px; }
.mega-caret { display: inline-flex; transition: transform var(--ease) .2s; }
.mega-caret svg { width: 16px; height: 16px; }
.mega-caret.up { transform: rotate(180deg); }
.nav.mega-open .nav__links a.has-mega { color: var(--blue); }

.mega {
  position: absolute;
  top: 76px; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--ease) .2s, transform var(--ease) .2s, visibility var(--ease) .2s;
}
.mega.show { opacity: 1; visibility: visible; transform: translateY(0); }
.mega__grid {
  display: grid;
  grid-template-columns: 340px 1fr 280px;
  gap: 48px;
  padding-block: 40px 48px;
}
.mega__feature { display: block; }
/* The block hides inactive feature cards with the `hidden` attribute, but an
   author `display` declaration outranks the browser's [hidden] rule — so
   without this every category's card shows at once. */
.mega__feature[hidden] { display: none; }
.mega__feature-media { aspect-ratio: 1 / .78; border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 18px; }
.mega__feature h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0 0 8px; letter-spacing: -.01em; }
.mega__feature p { font-size: 13px; line-height: 1.55; color: var(--fg2); margin: 0 0 14px; }
.mega__heading { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); margin: 0 0 16px; }
.mega__cats { display: flex; flex-direction: column; gap: 2px; }
.mega__cats .mega__heading { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mega__all {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--black); color: #fff;
  border-radius: var(--r-md); padding: 16px 18px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  margin: 8px 0;
}
.mega__all span { display: inline-flex; align-items: center; gap: 10px; }
.mega__all svg { width: 18px; height: 18px; }
.mega__cat {
  display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; cursor: pointer;
  padding: 14px 18px; border-radius: var(--r-md);
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  color: var(--fg1); text-align: left;
  transition: background var(--ease) .15s, color var(--ease) .15s;
}
.mega__cat svg { width: 18px; height: 18px; opacity: 0; transition: opacity var(--ease) .15s; }
.mega__cat:hover, .mega__cat.active { background: #EAF4FB; color: var(--blue); }
.mega__cat.active svg { opacity: 1; }
.mega__sub { display: flex; flex-direction: column; }
.mega__sub .mega__heading { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mega__sub-link { font-size: 15px; color: var(--fg1); padding: 14px 0; transition: color var(--ease) .15s; }
.mega__sub-link:hover { color: var(--blue); }
.mega__sub-all { margin-top: 16px; }

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

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.mdrawer { display: none; }

@media (max-width: 960px) {
  .mdrawer {
    display: block;
    position: fixed; inset: 0;
    z-index: 200;
    pointer-events: none;
  }
  .mdrawer.open { pointer-events: auto; }
  .mdrawer::before {
    content: "";
    position: absolute; inset: 0;
    background: rgba(15,16,16,.45);
    opacity: 0;
    transition: opacity var(--ease) .28s;
  }
  .mdrawer.open::before { opacity: 1; }

  .mdrawer__panel {
    position: absolute; top: 0; bottom: 0; left: 0;
    width: min(92vw, 420px);
    background: #fff;
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--ease) .32s;
    box-shadow: var(--shadow-lg);
  }
  .mdrawer.open .mdrawer__panel { transform: translateX(0); }

  /* Head */
  .mdrawer__head {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
  }
  .mdrawer__logo { height: 22px; width: auto; }
  .mdrawer__back {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: none; cursor: pointer; padding: 0;
    font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--fg1);
  }
  .mdrawer__back svg { width: 20px; height: 20px; }
  .mdrawer__close {
    flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--line); background: #fff;
    display: grid; place-items: center; cursor: pointer; color: var(--fg1);
  }
  .mdrawer__close svg { width: 18px; height: 18px; }

  /* Body */
  .mdrawer__body { flex: 1; overflow-y: auto; padding: 22px; }
  .mdrawer__eyebrow {
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--fg3); margin: 4px 0 6px;
  }
  .mdrawer__list { list-style: none; margin: 0; padding: 0; }

  .mdrawer__item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; text-align: left;
    background: none; border: none; cursor: pointer;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display); font-weight: 700; font-size: 19px;
    letter-spacing: -.01em; color: var(--fg1);
  }
  .mdrawer__item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--fg3); }

  .mdrawer__item--all { color: var(--blue); }
  .mdrawer__item--all svg { color: var(--blue); }
  .mdrawer__item--all > span { display: inline-flex; align-items: center; gap: 10px; }
  .mdrawer__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }

  .mdrawer__cat.is-open > .mdrawer__cat-head { color: var(--blue); border-bottom-color: transparent; }
  .mdrawer__cat.is-open > .mdrawer__cat-head svg { color: var(--blue); }
  .mdrawer__cat.is-open { border-bottom: 1px solid var(--line); }

  .mdrawer__sub { padding: 0 0 16px; }
  .mdrawer__sub-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0;
    font-size: 15px; font-weight: 500; color: var(--fg2);
  }
  .mdrawer__sub-item svg { width: 18px; height: 18px; color: var(--fg3); }
  .mdrawer__sub-all {
    display: inline-block; margin-top: 8px;
    font-size: 14px; font-weight: 600; color: var(--blue);
  }

  /* Foot */
  .mdrawer__foot {
    flex-shrink: 0;
    background: var(--bone);
    border-top: 1px solid var(--line);
    padding: 20px 22px;
  }
  .mdrawer__quote { width: 100%; justify-content: center; }
  .mdrawer__contact { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
  .mdrawer__contact a {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 14px; color: var(--fg1); font-weight: 500;
  }
  .mdrawer__contact svg { width: 18px; height: 18px; color: var(--fg3); flex-shrink: 0; }

  .mdrawer__utility {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 20px;
  }
  .mdrawer__socials { display: flex; gap: 8px; }
  .msoc {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--line-strong, var(--line));
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--fg1);
    background: #fff;
  }
  .mdrawer__lang {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--blue);
  }
  .mdrawer__lang svg { width: 18px; height: 18px; }
}

/* ============================================================
   INNER PAGE SHARED PRIMITIVES
   ============================================================ */
.page-top { padding-top: 76px; padding-bottom: 72px; }

.page-hero {
  background: var(--black);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; background: #141515; }
.page-hero .container { position: relative; z-index: 2; padding-block: 150px 88px; }
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.04; letter-spacing: -.03em;
  margin: 16px 0 20px; max-width: 16ch;
}
.page-hero p { font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.82); max-width: 52ch; margin: 0; }

/* Distributors — full-bleed image hero */
.dist-hero__bg { background: var(--img-black); }
.dist-hero__bg .ph__label { color: rgba(255,255,255,.4); }
.dist-hero__bg::after { content: none; }
.dist-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(15,16,16,.92) 0%, rgba(15,16,16,.64) 50%, rgba(15,16,16,.24) 100%); }
.dist-hero .container { z-index: 2; }
.dist-hero__eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.66); margin: 8px 0 14px; }
.dist-hero .lhero__actions { margin-top: 28px; }

/* Inside IFOURNI — 3-column image + copy */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.pillar__media { aspect-ratio: 3 / 2.4; border-radius: var(--r-lg); margin-bottom: 22px; }
.pillar__media .ph__label { max-width: 70%; line-height: 1.4; }
.pillar__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; margin: 0 0 10px; }
.pillar__text { font-size: 14.5px; line-height: 1.65; color: var(--fg2); margin: 0; }
@media (max-width: 860px) {
  .pillars { grid-template-columns: 1fr; gap: 40px; max-width: 460px; margin-inline: auto; }
}

/* Floating contact / back-to-top button */
.fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: none;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15,16,16,.18);
  transition: background var(--ease) .15s, transform var(--ease) .15s, box-shadow var(--ease) .15s, opacity var(--ease) .24s;
}
.fab:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(12,137,198,.28); }
.fab:active { transform: translateY(-1px); }
.fab--top { background: var(--ink, #0F1010); }
.fab--top:hover { background: #232525; box-shadow: 0 12px 32px rgba(15,16,16,.24); }
.fab--hidden { opacity: 0; pointer-events: none; }

/* The design draws this as a <button>; here it is an anchor, so it works as a
   link to the enquiry form before any script runs. */
.fab { text-decoration: none; }
.fab__icon { display: flex; }
.fab__icon svg { width: 22px; height: 22px; display: block; }
/* Without this the user-agent's [hidden] rule loses to .fab__icon's display,
   and both icons stack inside the circle. */
.fab__icon[hidden] { display: none; }

/* Product support search (resources) */
.psearch__head { max-width: 620px; margin: 0 auto 28px; text-align: center; }
.psearch__head .tick { margin-inline: auto; }
.psearch__head .lede { margin-top: 12px; }
.psearch__box { position: relative; max-width: 620px; margin: 0 auto; }
.psearch__field {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line, #C7C9C7);
  border-radius: 999px; padding: 0 20px; height: 54px;
  transition: border-color var(--ease) .15s, box-shadow var(--ease) .15s;
}
.psearch__field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(12,137,198,.12); }
.psearch__icon { color: var(--blue); display: flex; }
.psearch__field input {
  flex: 1; border: none; outline: none; background: transparent;
  font: inherit; font-size: 15px; color: inherit;
}
.psearch__clear {
  border: none; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: #888; padding: 4px;
}
.psearch__clear:hover { color: var(--blue); }
.psearch__drop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20;
  background: #fff; border: 1px solid var(--line, #C7C9C7);
  border-radius: 20px; overflow: hidden; box-shadow: 0 24px 48px rgba(15,16,16,.12);
}
.psearch__opt {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 18px; border: none; background: none; cursor: pointer;
  text-align: left; font: inherit;
}
.psearch__opt:hover { background: var(--bone, #F6F5F1); }
.psearch__opt + .psearch__opt { border-top: 1px solid var(--line-bone, #E6E7E7); }
.psearch__opt img { width: 44px; height: 44px; object-fit: contain; background: var(--bone, #F6F5F1); border-radius: 10px; flex-shrink: 0; }
.psearch__opt-name { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.psearch__opt-name strong { font-size: 14px; font-weight: 600; }
.psearch__opt-name span { font-size: 12px; color: #777; }
.psearch__opt-model { font-family: ui-monospace, monospace; font-size: 12px; color: var(--blue); flex-shrink: 0; }
.psearch__empty { padding: 16px 20px; font-size: 14px; color: #777; }
/* Suggested searches under the field. `.popular-tags` is the design's own pill
   row, written left-aligned for a sidebar; this band is centred, so the row is
   centred with it and given the width of the field it belongs to. */
.psearch__tags {
  justify-content: center;
  max-width: 620px;
  margin: 14px auto 0;
  row-gap: 8px;
}
.popular-tags__label { flex-shrink: 0; }
.popular-tags a { text-decoration: none; }
.psearch__result { margin-top: 36px; display: flex; flex-direction: column; gap: 36px; }
.psearch__prod {
  display: flex; align-items: center; gap: 24px;
  background: var(--bone, #F6F5F1); border-radius: 24px; padding: 20px 28px;
}
.psearch__prod img { width: 92px; height: 92px; object-fit: contain; background: #fff; border-radius: 16px; flex-shrink: 0; }
.psearch__prod > div { flex: 1; min-width: 0; }
.psearch__prod h3 { margin: 8px 0 4px; font-family: var(--font-display); font-size: 20px; letter-spacing: -.01em; }
.psearch__prod p { margin: 0; font-size: 14px; color: #666; }
.psearch__block h4 {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  margin: 0 0 16px; letter-spacing: -.01em;
}
.vid-grid.psearch__vids { grid-template-columns: repeat(4, 1fr); }
.psearch__vid-ph {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 10px 12px;
  background: repeating-linear-gradient(-45deg, #EDEEEC 0 12px, #F6F5F1 12px 24px);
}
.psearch__vid-ph span { font-family: ui-monospace, monospace; font-size: 11px; color: #555; position: relative; z-index: 2; }
.psearch__manual-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.psearch__manual-actions .btn { padding: 8px 18px; font-size: 13px; }
@media (max-width: 900px) {
  .vid-grid.psearch__vids { grid-template-columns: 1fr 1fr; }
  .psearch__prod { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .vid-grid.psearch__vids { grid-template-columns: 1fr; }
}

/* PDP product video */
.pdp__thumbs .pdp__thumb--video {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--black); color: #fff; border: 1px solid var(--black); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  transition: background var(--ease) .15s;
}
.pdp__thumb--video svg { width: 26px; height: 26px; }
.pdp__thumbs .pdp__thumb--video:hover { background: #232525; }
.pdp__thumbs .pdp__thumb--video.is-active { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(12,137,198,.25); }

/* A video thumbnail with a poster: the still fills the tile, the play mark
   sits over it. Without a poster the tile stays the plain black play square. */
.pdp__thumb--video { position: relative; overflow: hidden; padding: 0; }
.pdp__thumb--video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb-play {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(15,16,16,.62); color: #fff;
}
.pdp__thumb--video img + .pdp__thumb-play { backdrop-filter: blur(2px); }
/* Above the zoom lens (z-index 5), or the player's own controls would sit
   under a transparent overlay and the video could not be paused. */
.pdp-video { position: absolute; inset: 0; z-index: 6; background: var(--black); }
.pdp-video video, .pdp-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.pdp-video video { object-fit: contain; }
.pdp-video__play {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(15,16,16,.45); border: none; color: #fff; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  transition: background var(--ease) .15s;
}
.pdp-video__play:hover { background: rgba(15,16,16,.6); }
.pdp-video__play svg { width: 64px; height: 64px; stroke-width: 1.2; }

/* Brand-blue CTA band */
.cta-blue { background: var(--blue); color: #fff; padding-block: 64px; }
.cta-blue .eyebrow { color: rgba(255,255,255,.78); }
.cta-blue .help-band__copy h2 { color: #fff; }
.cta-blue .help-band__copy p { color: rgba(255,255,255,.9); }
.btn--white { background: #fff; color: var(--blue); }
.btn--white:hover { background: var(--bone); }

/* How it works — vertical step list */
.steplist { list-style: none; margin: 8px auto 0; padding: 0; max-width: 820px; }
.steplist__row { display: flex; align-items: flex-start; gap: 28px; padding: 28px 0; border-top: 1px solid var(--line); }
.steplist__row:last-child { border-bottom: 1px solid var(--line); }
.steplist__num { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1; color: var(--blue); letter-spacing: -.02em; flex-shrink: 0; min-width: 56px; }
.steplist__body { flex: 1; }
.steplist__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; margin: 2px 0 8px; }
.steplist__body p { font-size: 15px; line-height: 1.6; color: var(--fg2); margin: 0; max-width: 56ch; }
.steplist__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: rgba(12,137,198,.1); color: var(--blue); display: grid; place-items: center; }
.steplist__icon svg { width: 20px; height: 20px; }
@media (max-width: 560px) {
  .steplist__row { gap: 18px; }
  .steplist__icon { display: none; }
  .steplist__num { font-size: 26px; min-width: 44px; }
}

/* Full-width slideshow */
.slideshow-full { position: relative; overflow: hidden; }
.slideshow-full__track { display: flex; transition: transform 600ms var(--ease, cubic-bezier(0.22,0.61,0.36,1)); }
.slideshow-full__slide { flex: 0 0 100%; position: relative; }
.slideshow-full__media { height: 560px; border-radius: 0; }
.slideshow-full__media .ph__label { left: 24px; bottom: 18px; color: rgba(0,0,0,.3); }
.slideshow-full__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,16,16,.78) 0%, rgba(15,16,16,.4) 42%, transparent 70%); pointer-events: none; }
.slideshow-full__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-width: var(--container-max, 1280px); margin: 0 auto; padding: 0 var(--gutter, 32px) 64px; color: #fff; }
.slideshow-full__kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.slideshow-full__cap h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3.2vw, 40px); letter-spacing: -.02em; line-height: 1.06; margin: 12px 0 10px; max-width: 16ch; }
.slideshow-full__cap p { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.86); margin: 0; max-width: 44ch; }
@media (max-width: 860px) {
  .slideshow-full__media { height: 420px; }
  .slideshow-full__cap { padding-bottom: 48px; }
}

/* Featured products — full-bleed hero slideshow */
.featshow { position: relative; overflow: hidden; background: #0F1010; }
.featshow__track { display: flex; transition: transform 640ms var(--ease, cubic-bezier(0.22,0.61,0.36,1)); }
.featshow__slide { flex: 0 0 100%; position: relative; height: min(92vh, 820px); min-height: 560px; }
.featshow__media { position: absolute; inset: 0; height: 100%; border-radius: 0; }
.featshow__media .ph__label { left: 24px; bottom: 18px; color: rgba(255,255,255,.3); }
.featshow__slide::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(15,16,16,.86) 0%, rgba(15,16,16,.5) 40%, rgba(15,16,16,.08) 72%, transparent 100%); }
.featshow__inner { position: absolute; inset: 0; z-index: 2; box-sizing: border-box;
  max-width: var(--container-max, 1280px); margin: 0 auto;
  padding: 80px var(--gutter, 32px) 84px;
  display: flex; flex-direction: column; justify-content: space-between; color: #fff; }
.featshow__kicker { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.featshow__name { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(34px, 4.6vw, 62px); line-height: 1.02; margin: 18px 0 16px; max-width: 18ch; }
.featshow__tag { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: rgba(255,255,255,.88); margin: 0; max-width: 42ch; }
.featshow__bottom { display: flex; }
.featshow__nav { position: absolute; z-index: 3; right: var(--gutter, 32px); bottom: 80px;
  display: flex; align-items: center; gap: 14px; }
.featshow__nav .carousel__arrow { position: static; transform: none; top: auto; width: 44px; height: 44px; }
.featshow__nav .carousel__dots { position: static; left: auto; right: auto; bottom: auto; width: auto; justify-content: flex-end; }
@media (max-width: 860px) {
  .featshow__slide { height: auto; min-height: 0; }
  .featshow__inner { position: relative; padding: 56px var(--gutter, 32px) 120px; min-height: 78vh; }
  .featshow__media { height: 100%; }
  .featshow__nav { bottom: 32px; left: var(--gutter, 32px); right: auto; }
}

/* Distributors — centered stat band (no dividers), centered as a group */
.stats--center { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 64px; }
.stats--center .stat { border-top: none; padding: 18px 8px; text-align: center; flex: 0 0 auto; min-width: 150px; }

/* Dark (inverse) stat band */
.statband-dark { background: var(--black); color: #fff; }
.statband-dark .stat__value { color: #fff; }
.statband-dark .stat:nth-child(2) .stat__value { color: var(--blue); }
.statband-dark .stat__label { color: rgba(255,255,255,.66); }


.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--fg3);
  padding: 18px 0;
}
.breadcrumb a { color: var(--fg3); transition: color var(--ease) .15s; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb .cur { color: var(--fg1); }
.breadcrumb.on-dark, .breadcrumb.on-dark a { color: rgba(255,255,255,.6); }
.breadcrumb.on-dark .cur { color: #fff; }

/* Product cards */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.prod-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  display: flex; flex-direction: column;
  transition: transform var(--ease) .24s, box-shadow var(--ease) .24s;
}
.prod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.prod-card__media { aspect-ratio: 4 / 3; background: #fff; position: relative; }
.prod-card__tag {
  position: absolute; left: 14px; top: 14px;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  background: #fff; color: var(--fg2);
  padding: 5px 10px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
}
.prod-card__tag--new { background: var(--blue); color: #fff; }
.prod-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.prod-card__cat { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg3); margin: 0; }
.prod-card__name { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; margin: 0; }
.prod-card__desc { font-size: 13px; line-height: 1.55; color: var(--fg2); margin: 0; flex: 1; }
.prod-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.prod-card__sku { font-family: var(--font-body); font-size: 12px; color: var(--fg3); }

/* Category chips / filter bar */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  font-size: 13px; font-weight: 500;
  padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: #fff; color: var(--fg2);
  cursor: pointer;
  transition: all var(--ease) .15s;
}
.chip:hover { border-color: var(--line-bone); }
.chip.active { background: var(--black); color: #fff; border-color: var(--black); }
.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.result-count { font-size: 13px; color: var(--fg3); }

/* Category cards (overview) */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.cat-card {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column; background: #fff;
  transition: transform var(--ease) .24s, box-shadow var(--ease) .24s;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cat-card__media { aspect-ratio: 16 / 10; background: var(--img-gray); position: relative; }
.cat-card__icon { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 10px; background: #fff; display: grid; place-items: center; color: var(--blue); box-shadow: var(--shadow-sm); }
.cat-card__icon svg { width: 20px; height: 20px; }
.cat-card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cat-card__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; margin: 0; }
.cat-card__desc { font-size: 13.5px; line-height: 1.55; color: var(--fg2); margin: 0; flex: 1; }
.cat-card__meta { font-size: 12px; color: var(--fg3); margin-top: 6px; }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
.pdp__gallery { display: flex; flex-direction: column; gap: 14px; }
/* The main product frame is a fixed square and the photo is contained inside
   it. In the design this box is an empty placeholder whose height comes from
   the column, so the photo never sets it; here it is a real <img> in normal
   flow, and the catalogue is not shot to one ratio — most files are 800x800
   but a few are portrait (452x821, 683x1024, 646x1023). Those stretched their
   frame to 994px while a square one sat at 548, so the same page looked like
   two different templates depending on which photographer shot the product. */
.pdp__main-img { flex: none; aspect-ratio: 1 / 1; min-height: 0; background: #fff; border-radius: var(--r-xl); border: 1px solid var(--line); position: relative; overflow: hidden; cursor: zoom-in; }
.pdp__main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.pdp-lens { position: absolute; inset: 0; z-index: 5; pointer-events: none; background-repeat: no-repeat; background-color: #fff; }
@media (hover: none) { .pdp-lens { display: none; } .pdp__main-img { cursor: default; } }
.pdp__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.pdp__thumb { aspect-ratio: 1 / 1; background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); cursor: pointer; }
.pdp__thumb--btn { padding: 0; overflow: hidden; transition: border-color var(--ease) .18s, box-shadow var(--ease) .18s; }
.pdp__thumb--btn.is-active { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(12,137,198,.2); }
.pdp__thumb.active { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(12,137,198,.2); }
/* A video is playing in the frame: the lens is off and so is the invitation. */
.pdp__main-img.is-playing { cursor: default; }
.pdp__main-img.is-playing .pdp-lens { display: none; }

/* ── thumbnail strip past five slides ──────────────────────────────
   The design draws exactly five thumbnails, so five or fewer is left alone and
   renders as the grid above. Beyond that the strip turns into a single-row
   scroller: wrapping to a second row grows the gallery column and knocks the
   product's name and buttons out of vertical alignment with it.

   The vertical padding/negative-margin pair is not decoration: overflow-y
   clips, and the active thumbnail's ring is a 2px box-shadow that would be
   shaved off top and bottom. Only the block axis gets it — 3px of inline
   padding measured 3px of horizontal snap offset, which left the strip sitting
   3px to the left of the main frame it is supposed to line up with. */
.pdp__thumbs-wrap { position: relative; }
.pdp__thumbs.is-scroll {
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-block: 3px; margin-block: -3px;
}
.pdp__thumbs.is-scroll::-webkit-scrollbar { display: none; }
/* Five across, same as the grid, and the sixth is the one you scroll to. */
.pdp__thumbs.is-scroll > .pdp__thumb {
  flex: 0 0 calc((100% - 48px) / 5);
  scroll-snap-align: start;
}
.pdp__thumbs-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); color: var(--fg1);
  box-shadow: var(--shadow-md); cursor: pointer;
  transition: background var(--ease) .15s, border-color var(--ease) .15s, color var(--ease) .15s;
}
.pdp__thumbs-nav:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.pdp__thumbs-nav svg { width: 18px; height: 18px; }
/* display:grid beats the browser's own [hidden] rule, so restate it. */
.pdp__thumbs-nav[hidden] { display: none; }
/* Half outside the strip, so an arrow reads as a control beside the row rather
   than a badge stuck on top of a photograph. */
.pdp__thumbs-nav--prev { left: -17px; }
.pdp__thumbs-nav--next { right: -17px; }
.pdp__cat { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); font-weight: 600; margin: 0 0 12px; }
.pdp h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 16px; }
.pdp__lede { font-size: 16px; line-height: 1.6; color: var(--fg2); margin: 0 0 24px; }
.pdp__price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 24px; }
.pdp__price strong { font-family: var(--font-display); font-size: 26px; font-weight: 700; }
.pdp__price span { font-size: 13px; color: var(--fg3); }
.pdp__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.pdp__feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pdp__feats li { display: flex; gap: 12px; font-size: 14px; color: var(--fg1); align-items: flex-start; }
.pdp__feats svg { color: var(--blue); flex-shrink: 0; margin-top: 2px; width: 20px; height: 20px; }

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table th { text-align: left; font-weight: 500; font-size: 14px; color: var(--fg3); padding: 14px 0; width: 40%; }
.spec-table td { font-size: 14px; color: var(--fg1); padding: 14px 0; font-family: var(--font-body); }

/* ============================================================
   BLOG / NEWS
   ============================================================ */
.blog-feature { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.blog-feature__media { aspect-ratio: 16 / 11; background: var(--img-gray); }
.blog-feature__body { padding: 12px 44px 12px 0; }
.blog-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--fg3); margin-bottom: 14px; }
.blog-meta .tagm { color: var(--blue); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.blog-feature__body h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 14px; }
.blog-feature__body p { font-size: 15px; line-height: 1.6; color: var(--fg2); margin: 0 0 20px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card { display: flex; flex-direction: column; cursor: pointer; }
.blog-card__media { aspect-ratio: 16 / 10; background: var(--img-gray); border-radius: var(--r-lg); margin-bottom: 16px; transition: transform var(--ease) .24s; }
.blog-card:hover .blog-card__media { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 8px; }
.blog-card p { font-size: 13.5px; line-height: 1.55; color: var(--fg2); margin: 0; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-intro__media { aspect-ratio: 4 / 3.4; border-radius: var(--r-xl); }
.timeline { display: flex; flex-direction: column; gap: 0; }
.tl-item { display: grid; grid-template-columns: 120px 1fr; gap: 32px; padding: 28px 0; border-top: 1px solid var(--line); }
.tl-year { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--blue); letter-spacing: -.02em; }
.tl-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0 0 6px; letter-spacing: -.01em; }
.tl-body p { font-size: 14px; line-height: 1.6; color: var(--fg2); margin: 0; max-width: 60ch; }

/* ============================================================
   RESOURCES
   ============================================================ */
.res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.res-card {
  display: flex; gap: 18px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; background: #fff; cursor: pointer;
  transition: transform var(--ease) .24s, box-shadow var(--ease) .24s;
}
.res-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* The design's card is an icon beside a block of text, so a flex row was
   right — but only because the prototype wrapped the text in one element. In
   blocks the heading, the paragraph and the link are siblings of the icon, so
   the row laid all four out side by side and squeezed the copy into a 67px
   column. A two-column grid gives the same picture while leaving every part
   separately editable, which is the point of building it in blocks. */
.res-card { display: grid; grid-template-columns: 48px 1fr; column-gap: 18px; row-gap: 0; align-items: start; }
.res-card > .icon-tile { grid-column: 1; grid-row: 1 / span 20; }
.res-card > :not(.icon-tile) { grid-column: 2; }
.res-card .icon-tile { width: 48px; height: 48px; }
.res-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0 0 6px; letter-spacing: -.01em; }
.res-card p { font-size: 13.5px; line-height: 1.55; color: var(--fg2); margin: 0 0 8px; }
.res-card__meta { font-size: 12px; color: var(--fg3); display: flex; gap: 8px; align-items: center; }

/* Care guides — full-width rows */
.guide-list { display: flex; flex-direction: column; gap: 12px; }
.guide-row {
  display: flex; align-items: center; gap: 24px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 26px; background: #fff; cursor: pointer; text-decoration: none;
  transition: transform var(--ease) .24s, box-shadow var(--ease) .24s, border-color var(--ease) .24s;
}
.guide-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong, var(--line)); }
.guide-row__text { flex: 1; }
.guide-row__text h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0 0 5px; letter-spacing: -.01em; }
.guide-row__text p { font-size: 14px; line-height: 1.55; color: var(--fg2); margin: 0; }
.guide-row__dl { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--img-gray); color: var(--fg1); transition: background var(--ease) .24s, color var(--ease) .24s; }
.guide-row:hover .guide-row__dl { background: var(--blue); color: #fff; }
.guide-row__dl svg { width: 20px; height: 20px; }

/* Care guides — dark (IFOURNI black) variant */
.guides-dark { background: var(--black); color: #fff; }
.guides-dark .eyebrow { color: rgba(255,255,255,.66); }
.guides-dark .section-head h2, .guides-dark .copy h2 { color: #fff; }
.guides-dark .section-head .lede, .guides-dark .copy .lede { color: rgba(255,255,255,.74); }
.guides-dark .guide-row { background: #161717; border-color: var(--line-dark, rgba(255,255,255,.12)); }
.guides-dark .guide-row:hover { border-color: rgba(255,255,255,.28); }
.guides-dark .guide-row__text h3 { color: #fff; }
.guides-dark .guide-row__text p { color: rgba(255,255,255,.7); }
.guides-dark .guide-row__dl { background: rgba(255,255,255,.1); color: #fff; }
.guides-dark .guide-row:hover .guide-row__dl { background: var(--blue); color: #fff; }

/* Troubleshooting accordion */
.faq-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 22px 4px; font-family: var(--font-display); font-weight: 600;
  font-size: 18px; letter-spacing: -.01em; color: var(--fg1);
}
.faq-item__icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--img-gray); color: var(--fg1); transition: transform var(--ease) .26s, background var(--ease) .2s, color var(--ease) .2s; }
.faq-item__icon svg { width: 18px; height: 18px; transform: rotate(90deg); transition: transform var(--ease) .26s; }
.faq-item.open .faq-item__icon { background: var(--blue); color: #fff; }
.faq-item.open .faq-item__icon svg { transform: rotate(-90deg); }
.faq-item__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ease) .28s; }
.faq-item.open .faq-item__a { grid-template-rows: 1fr; }
.faq-item__a > p { overflow: hidden; margin: 0; font-size: 15px; line-height: 1.62; color: var(--fg2); max-width: 78ch; padding-right: 58px; }
.faq-item.open .faq-item__a > p { padding-bottom: 22px; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 28px; }
.contact-info__item { display: flex; gap: 16px; align-items: flex-start; }
.contact-info__item .icon-tile { width: 46px; height: 46px; }
.contact-info__item h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0 0 4px; }
.contact-info__item p { font-size: 14px; line-height: 1.55; color: var(--fg2); margin: 0; }
.contact-info__item a { color: var(--blue); }
.contact-card { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 36px; background: #fff; box-shadow: var(--shadow-sm); }
.contact-card .contact__form { margin-top: 0; }

@media (max-width: 960px) {
  .prod-grid, .cat-grid, .blog-grid { grid-template-columns: 1fr 1fr; }
  .pdp, .about-intro, .contact-split, .blog-feature { grid-template-columns: 1fr; gap: 36px; }
  .blog-feature__body { padding: 0 24px 28px; }
  .res-grid { grid-template-columns: 1fr; }
  .page-hero .container { padding-block: 120px 64px; }
}
@media (max-width: 600px) {
  .prod-grid, .cat-grid, .blog-grid { grid-template-columns: 1fr; }
  .pdp__thumbs { grid-template-columns: repeat(5, 1fr); }
  /* A phone swipes the strip; a 34px button would cover a third of a thumbnail
     on a 375px screen to duplicate a gesture the reader already has. */
  .pdp__thumbs-nav { display: none; }
  .tl-item { grid-template-columns: 1fr; gap: 8px; }
}

/* Light hero (inner pages) */
.lhero { padding-top: 130px; }
.lhero__eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg3); margin: 8px 0 14px; }
.lhero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 4.4vw, 50px); line-height: 1.05; letter-spacing: -.03em;
  margin: 0 0 18px; max-width: 18ch;
}
.lhero p { font-size: 16px; line-height: 1.6; color: var(--fg2); max-width: 56ch; margin: 0 0 28px; }
.lhero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Light hero with background image (right-weighted, light scrim left) */
.lhero--img { position: relative; overflow: hidden; }
.lhero--img .lhero__bg { position: absolute; inset: 0; z-index: 0; }
.lhero--img::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--bone, #fff) 0%, rgba(255,255,255,.82) 34%, rgba(255,255,255,.35) 58%, rgba(255,255,255,0) 78%); }
.lhero--img .container { position: relative; z-index: 2; }
.lhero--img { padding-top: 150px; padding-bottom: 56px; min-height: 56vh; display: flex; align-items: center; }

/* Numbered process cards */
.proc-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; position: relative;
  display: flex; flex-direction: column; gap: 10px;
}
.proc-card__num { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--blue); letter-spacing: -.02em; }
.proc-card__icon { position: absolute; right: 20px; top: 22px; width: 34px; height: 34px; border-radius: 9px; background: rgba(12,137,198,.1); color: var(--blue); display: grid; place-items: center; }
.proc-card__icon svg { width: 18px; height: 18px; }
.proc-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0; letter-spacing: -.01em; }
.proc-card p { font-size: 13px; line-height: 1.55; color: var(--fg2); margin: 0; }

/* Catalog layout (category page) */
.catalog { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
.filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.filters__head h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0; }
.filters__reset { font-size: 13px; color: var(--blue); background: none; border: none; cursor: pointer; }
.filter-group { padding: 20px 0; border-bottom: 1px solid var(--line); }
.filter-group:last-child { border-bottom: none; }
.filter-group h4 { font-family: var(--font-display); font-weight: 700; font-size: 14px; margin: 0 0 14px; }
.filter-opt { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 13.5px; color: var(--fg2); }
.filter-opt input { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }
.filter-opt:hover { color: var(--fg1); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.toolbar__count { font-size: 13px; color: var(--fg3); }
.toolbar__right { display: flex; align-items: center; gap: 10px; }

/* Sort control. The select and the button are one pill; the button is the
   fallback for anyone the script has not reached, so it is hidden only once
   the listener is actually attached rather than assumed away in CSS. */
.sortform { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-pill, 999px); padding: 6px 8px 6px 14px; background: #fff; }
.sortform__select { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--fg1); cursor: pointer; padding-right: 4px; }
.sortform__go { border: 0; border-radius: var(--r-pill, 999px); background: var(--black); color: #fff; font: inherit; font-size: 12.5px; padding: 5px 12px; cursor: pointer; }
.sortform__go:hover { background: var(--blue); }
.sortform.is-live .sortform__go { display: none; }

/* ---- Category header ------------------------------------------------
   The design opens the catalogue on white, not on the black photo band the
   other inner pages use: the products are the picture here, and a dark hero
   above a grid of white cards fights them. Breadcrumb, eyebrow, headline and
   description on the left; the quote button held to the top right. */
.cat-head { background: #fff; }
.cat-head .breadcrumb { margin-bottom: 18px; }
.cat-head__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.cat-head__text { max-width: 62ch; }
.cat-head__text h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.05; letter-spacing: -.03em;
  margin: 0 0 16px;
}
.cat-head__text p { font-size: 15px; line-height: 1.65; color: var(--fg2); margin: 0; }
.cat-head .lhero__actions { flex-shrink: 0; }

/* The grid section brings its own top padding, which after a header that
   already has some reads as a hole rather than a break. Both classes on both
   sides: the bridge rule that sets section padding is `.wp-block-group.section`
   and is printed later, so a two-class selector here only ties and loses. */
.wp-block-group.cat-head + .wp-block-group.section { padding-top: 0; }
.cat-head.page-top { padding-bottom: 40px; }

@media (max-width: 860px) {
  .cat-head__row { flex-direction: column; gap: 24px; }
}

/* ---- Product card, catalogue version --------------------------------
   Title, then a single spec line — the design deliberately does not run an
   excerpt here. Twelve cards of prose is a wall; twelve spec lines is a
   comparison. */
.prod-card__spec { font-size: 13px; line-height: 1.5; color: var(--fg3); margin: 6px 0 0; }
.prod-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.prod-card__actions .link-arrow { font-size: 13px; }
.prod-card__foot .btn { flex-shrink: 0; }

/* The quote links land on #quote. Without a scroll margin the browser puts the
   form's first pixel at the top of the viewport, which is underneath the fixed
   header — the visitor arrives looking at a field with no label above it. */
#quote { scroll-margin-top: calc(var(--sticky-top, 76px) + 24px); }

/* ---- Mobile drawer: only what the design's own rules leave open ------
   The drawer is fully styled above. These are the gaps between that CSS and
   the markup the block renders — nothing here restates a design decision. */
.mdrawer__item, .mdrawer__sub-item, .mdrawer__sub-all { text-decoration: none; }
.mdrawer__cat-head { font: inherit; }
.mdrawer__close { background: none; border: 0; padding: 0; cursor: pointer; color: var(--fg1); display: grid; place-items: center; }
.mdrawer__close svg { width: 18px; height: 18px; }
.mdrawer__logo { display: block; }

/* The two levels. Each view owns its own scrolling, so moving between them
   never inherits the other's scroll position. */
.mdrawer__body { padding: 0; overflow: hidden; }
.mdrawer__view { padding: 22px; overflow-y: auto; height: 100%; }

/* Every one of these is display:something in the design, which outranks the
   user-agent's [hidden] rule — the same trap as the FAB's two icons. */
.mdrawer__view[hidden],
.mdrawer__back[hidden],
.mdrawer__logo[hidden],
.mdrawer__sub[hidden] { display: none; }

/* The admin bar sits over the top of a fixed overlay, which hid the drawer's
   own logo and close button from the one person who edits the site. */
.admin-bar .mdrawer { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .mdrawer { top: 46px; }
}

/* Below 600px WordPress stops pinning the admin bar and lets it scroll away,
   so offsetting the fixed header by its height leaves a strip of the page
   showing through above the bar. */
@media screen and (max-width: 600px) {
  .admin-bar .nav { top: 0; }
  .admin-bar .mdrawer { top: 0; }
}

/* The hamburger is rendered by the block inside .nav__right, so it must not
   pick up the gap meant for the desktop controls. */
.nav__toggle { margin: 0; }
@media (min-width: 961px) {
  .nav__toggle { display: none !important; }
}
.sort-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; border: 1px solid var(--line); background: #fff; border-radius: var(--r-pill); padding: 8px 14px; cursor: pointer; }
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.view-toggle button { width: 34px; height: 34px; display: grid; place-items: center; background: #fff; border: none; cursor: pointer; color: var(--fg3); }
.view-toggle button.active { background: var(--bone); color: var(--fg1); }
.view-toggle svg { width: 16px; height: 16px; }

.pcard__foot2 { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; }
.pcard__view { font-size: 13px; font-weight: 500; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 7px 18px; background: #fff; cursor: pointer; transition: background var(--ease) .15s; }
.pcard__view:hover { background: var(--bone); }

.pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 48px; }
.pagination button {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-size: 14px; color: var(--fg2);
  display: grid; place-items: center;
  transition: all var(--ease) .15s;
}
.pagination button.active { background: var(--black); color: #fff; border-color: var(--black); }
.pagination button:hover:not(.active) { background: var(--bone); }
.pagination svg { width: 16px; height: 16px; }

@media (max-width: 960px) {
  .catalog { grid-template-columns: 1fr; gap: 28px; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .filters__head { grid-column: 1 / -1; }
}

/* PDP extras */
.pdp__badges { display: flex; gap: 8px; margin-bottom: 14px; }
.badge { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill); }
.badge--blue { background: #EAF4FB; color: var(--blue); }
.badge--line { border: 1px solid var(--line); color: var(--fg2); }
.pdp__meta { font-size: 13px; color: var(--fg3); margin: 0 0 10px; }
.pdp__price-box { border: none; border-top: 1px solid var(--line); border-radius: 0; padding: 18px 0 0; margin: 22px 0; }
.pdp__price-box h4 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg2); margin: 0 0 6px; }
.pdp__price-box p { font-size: 13px; color: var(--fg3); margin: 0; line-height: 1.5; }
.pdp__opt-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg2); margin: 0 0 10px; }
.pdp__opts { display: flex; gap: 8px; margin-bottom: 22px; }
.opt-pill { border: 1px solid var(--line); background: #fff; border-radius: var(--r-pill); padding: 8px 18px; font-size: 13px; cursor: pointer; transition: all var(--ease) .15s; }
.opt-pill:hover { border-color: var(--line-bone); }
.opt-pill.active { background: var(--black); color: #fff; border-color: var(--black); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; margin-bottom: 22px; }
.qty button { width: 40px; height: 40px; background: #fff; border: none; cursor: pointer; font-size: 18px; color: var(--fg2); }
.qty button:hover { background: var(--bone); }
.qty span { width: 48px; text-align: center; font-size: 15px; }
.pdp__cta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.pdp__cta .btn { justify-content: center; padding-block: 14px; }
.pdp__info { background: var(--bone); border-radius: var(--r-md); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.pdp__info-row { display: flex; gap: 12px; align-items: center; font-size: 13.5px; color: var(--fg1); }
.pdp__info-row svg { width: 18px; height: 18px; color: var(--fg2); flex-shrink: 0; }

.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin-bottom: 40px; flex-wrap: wrap; }
.tab { background: none; border: none; cursor: pointer; padding: 0 0 16px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg3); position: relative; transition: color var(--ease) .15s; }
.tab.active { color: var(--fg1); }
.tab.active::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--blue); }
.tab:hover { color: var(--fg1); }
.spec-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.spec-layout--full { grid-template-columns: 1fr; }
.spec-includes { margin-top: 28px; }
.spec-includes h4 { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin: 0 0 8px; color: var(--fg1); }
.spec-includes p { font-size: 14.5px; line-height: 1.7; color: var(--fg2); margin: 0; max-width: 72ch; }
.features { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature__tick { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(12,137,198,.1); color: var(--blue); display: grid; place-items: center; }
.feature__tick svg { width: 16px; height: 16px; }
.feature p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--fg1); padding-top: 2px; }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; background: #fff; display: flex; flex-direction: column; gap: 12px; }
.review__stars { color: var(--blue); letter-spacing: 2px; font-size: 15px; }
.review__text { color: var(--fg2); line-height: 1.55; }
.review__who { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.review__who strong { font-size: 14px; }
.review__who span { font-size: 12px; color: var(--fg3); }
.manuals { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.manuals--full { max-width: none; }
.manual { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; color: var(--fg1); text-decoration: none; transition: background var(--ease) .2s; }
.manual__label { display: flex; align-items: center; gap: 12px; }
.manual:hover { background: var(--bg2); }
.reviews__nav { display: flex; align-items: center; gap: 20px; margin-top: 28px; }
.reviews__count { font-size: 13px; color: var(--fg3); }
.opt-pill:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 960px) { .reviews { grid-template-columns: 1fr; } }

.pdesc .h2 { font-size: clamp(22px, 2.4vw, 30px); }
/* The clamp is opt-in. The design clips this stack from the start, but here
   the script decides — a product with one or two photos is shown whole and
   gets no button, and with JavaScript off nothing is ever hidden behind a
   control that cannot be pressed. --pdesc-clamp is read back by that script so
   the height is stated once, here, and not duplicated in JS. */
.pdesc__stack { --pdesc-clamp: 1180px; position: relative; display: flex; flex-direction: column; gap: 12px; transition: max-height var(--ease) .4s; }
.pdesc__stack.is-clamped { max-height: var(--pdesc-clamp); overflow: hidden; }
/* Full width, whatever height the photograph is. The design's slots are a fixed
   520px because they are empty placeholders; cropping real artwork to that box
   cut the top and bottom off every one — and these are marketing panels and
   spec diagrams where the cropped-off part is the text. Same width for all of
   them keeps the stack tidy; the height follows the file, so portrait and
   landscape both arrive whole. */
.pdesc__img { flex-shrink: 0; width: 100%; height: auto; border-radius: var(--r-lg); overflow: hidden; margin: 0; }
.pdesc__img img { width: 100%; height: auto; display: block; object-fit: fill; }
.pdesc__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(to top, var(--white) 12%, rgba(255,255,255,0)); pointer-events: none; }
.pdesc__more { display: flex; justify-content: center; margin-top: 28px; }

.related-card { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: transform var(--ease) .24s, box-shadow var(--ease) .24s; }
.related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.related-card__media { aspect-ratio: 1 / 1; background: var(--img-gray); }
.related-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.related-card__sku { font-family: var(--font-body); font-weight: 700; font-size: 15px; }
.related-card__desc { font-size: 13px; line-height: 1.5; color: var(--fg2); margin: 0; flex: 1; }
.related-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.related-card__foot span { font-size: 12px; color: var(--fg3); }

/* Related card, assembled from blocks. The design writes this card by hand;
   here the SKU is the product-model block, the description is core/post-excerpt
   and "View →" is core/read-more, so each part needs bridging to the class the
   design styles. The photo sits on white and is contained, not cropped — these
   are catalogue shots on a white sweep, and cropping them to a 4:3 box cuts the
   lance off the top. */
.wp-block-image.related-card__media,
.related-card__media { aspect-ratio: 1 / 1; background: #fff; border-radius: 0; margin: 0; overflow: hidden; }
.related-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.related-card .related-card__sku { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--fg1); }
.related-card__desc { font-size: 13px; line-height: 1.5; color: var(--fg2); margin: 0; flex: 1; }
.related-card__desc p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.related-card__foot p { font-size: 12px; color: var(--fg3); margin: 0; }
.related-card__foot .pcard__view { text-decoration: none; color: var(--fg1); white-space: nowrap; }

@media (max-width: 960px) { .spec-layout { grid-template-columns: 1fr; gap: 24px; } }

/* Blog hero (dark featured) */
.blog-hero { background: var(--img-black); color: #fff; position: relative; overflow: hidden; }
.blog-hero__bg { position: absolute; inset: 0; z-index: 0; }
.blog-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(15,16,16,.92) 0%, rgba(15,16,16,.74) 44%, rgba(15,16,16,.4) 72%, rgba(15,16,16,.2) 100%); }
.blog-hero .container { position: relative; z-index: 2; }
.blog-hero__inner { padding-top: 200px; padding-bottom: 56px; max-width: 720px; }
.blog-hero .tagm { color: var(--blue); }
.blog-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4vw, 46px); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 16px; }
.blog-hero p { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.78); max-width: 46ch; margin: 0 0 22px; }
.blog-hero__meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgba(255,255,255,.7); }
.blog-hero__avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 9px; letter-spacing: .06em; color: rgba(255,255,255,.7); }

/* Blog layout */
.blog-layout { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; }
.blog-list { display: flex; flex-direction: column; }
.blog-row { display: grid; grid-template-columns: 300px 1fr; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--line); align-items: center; }
.blog-row:first-of-type { padding-top: 0; }
.blog-row__media { aspect-ratio: 4 / 3.2; background: var(--img-gray); border-radius: var(--r-md); }
.tag-pill { display: inline-block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--blue); background: #EAF4FB; padding: 4px 10px; border-radius: var(--r-pill); }
.blog-row__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 12px; color: var(--fg3); }
.blog-row h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 10px; }
.blog-row p { font-size: 14px; line-height: 1.6; color: var(--fg2); margin: 0 0 16px; max-width: 56ch; }
.blog-row__foot { display: flex; align-items: center; justify-content: space-between; }
.blog-row__by { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg3); }
.blog-row__by .av { width: 22px; height: 22px; border-radius: 50%; background: var(--bone); border: 1px solid var(--line); }

/* Sidebar */
.side { display: flex; flex-direction: column; gap: 36px; }
.subscribe { background: var(--bone); border-radius: var(--r-lg); padding: 24px; }
.subscribe__eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); margin: 0 0 8px; }
.subscribe h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0 0 4px; letter-spacing: -.01em; }
.subscribe p { font-size: 13px; color: var(--fg2); margin: 0 0 16px; }
.subscribe__form { display: flex; gap: 8px; }
.subscribe__form input { flex: 1; min-width: 0; border: 1px solid var(--line); background: #fff; border-radius: var(--r-pill); padding: 10px 16px; font-size: 13px; font-family: var(--font-body); outline: none; }
.subscribe__form input:focus { border-color: var(--blue); }
.subscribe__form button { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--blue); border: none; color: #fff; cursor: pointer; display: grid; place-items: center; }
.subscribe__form button svg { width: 18px; height: 18px; }
.side h4 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0 0 16px; }
.popular-item { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.popular-item:first-of-type { border-top: none; }
.popular-item .num { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--blue); flex-shrink: 0; }
.popular-item p { font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 1.3; margin: 0; transition: color var(--ease) .15s; }
.popular-item:hover p { color: var(--blue); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a { font-size: 12px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; color: var(--fg2); transition: all var(--ease) .15s; }
.tag-cloud a:hover { border-color: var(--blue); color: var(--blue); }

@media (max-width: 960px) {
  .blog-layout { grid-template-columns: 1fr; gap: 48px; }
  .blog-row { grid-template-columns: 200px 1fr; gap: 24px; }
  .blog-hero__inner { padding-top: 150px; }
}
@media (max-width: 600px) { .blog-row { grid-template-columns: 1fr; gap: 16px; } }

/* ============================================================
   News page (blog.html) — hero, featured, filters, grid
   ============================================================ */
.news-hero { padding: 120px 0 32px; }
.news-hero .eyebrow { margin-bottom: 16px; }
.news-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -.03em; margin: 0; max-width: 20ch; text-wrap: pretty; }

/* Featured */
.featured { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; align-items: stretch; }
.fcard-lg { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; min-height: 460px; background: var(--img-black); color: #fff; }
.fcard-lg__bg { position: absolute; inset: 0; }
.fcard-lg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 70%); pointer-events: none; }
.fcard-lg__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 28px 32px; }
.fcard-lg__body .tag-pill { background: rgba(255,255,255,.16); color: #fff; }
.fcard-lg__body h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -.02em; margin: 12px 0 8px; max-width: 24ch; }
.fcard-lg__body p { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.85); margin: 0 0 14px; max-width: 52ch; }
.fcard-lg__meta { font-size: 12.5px; color: rgba(255,255,255,.7); }
.featured__side { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.fcard-sm { flex: 1; display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; border: 0; border-radius: var(--r-md); padding: 0; background: transparent; transition: opacity .15s; }
.fcard-sm:hover { opacity: .75; }
.fcard-sm__media { aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; }
.fcard-sm__body .meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fg3); margin: 10px 0 0; }
.fcard-sm__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.35; letter-spacing: -.01em; margin: 0; color: var(--fg1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fcard-sm__body p { font-size: 13.5px; line-height: 1.55; color: var(--fg2); margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Toolbar — search + sticky category filter */
.news-toolbar { position: sticky; top: var(--sticky-top, 76px); z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding: 14px 0; margin: 48px 0 40px; }
.news-toolbar__inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.news-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.news-tab { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--fg2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.news-tab:hover { background: var(--bone); }
.news-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.news-search { margin-left: auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; min-width: 220px; background: #fff; }
.news-search svg { width: 16px; height: 16px; color: var(--fg3); flex-shrink: 0; }
.news-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; width: 100%; color: var(--fg1); }

/* Article grid */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ncard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; transition: transform .24s cubic-bezier(.22,.61,.36,1), box-shadow .24s; }
.ncard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 8px 24px rgba(15,16,16,.08)); }
.ncard__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.ncard__media image-slot { display: block; width: 100%; height: 100%; }
.ncard__body { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.ncard__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fg3); margin-bottom: 12px; }
.ncard__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 8px; color: var(--fg1); }
.ncard__body p { font-size: 14px; line-height: 1.55; color: var(--fg2); margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ncard__body .link-arrow { margin-top: auto; }
.news-empty { text-align: center; color: var(--fg3); padding: 64px 0; font-size: 15px; }

/* Newsletter band */
.news-cta { background: var(--blue); color: #fff; border-radius: var(--r-xl); padding: 48px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; margin: 64px 0 96px; }
.news-cta h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.01em; margin: 0 0 6px; color: #fff; }
.news-cta p { font-size: 14.5px; color: rgba(255,255,255,.85); margin: 0; }
.news-cta form { display: flex; gap: 10px; }
.news-cta input { border: 0; border-radius: 999px; padding: 12px 20px; font: inherit; font-size: 14px; min-width: 260px; background: #fff; outline: 0; }
.news-cta input:focus { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.news-cta .btn--primary { background: var(--ifn-black, #0F1010); }

@media (max-width: 960px) {
  .featured { grid-template-columns: 1fr; }
  .fcard-lg { min-height: 340px; }
  .news-grid { grid-template-columns: 1fr 1fr; }
  .news-toolbar { top: var(--sticky-top, 76px); }
  .news-cta { grid-template-columns: 1fr; padding: 32px; }
}
@media (max-width: 600px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-search { margin-left: 0; width: 100%; }
  .fcard-sm { grid-template-columns: 72px 1fr; }
  .news-cta form { flex-direction: column; }
  .news-cta input { min-width: 0; }
}

/* ============================================================
   Article page (article.html) — WordPress-friendly semantic post
   ============================================================ */
.article-wrap { max-width: 760px; margin: 0 auto; padding: 140px var(--gutter) 0; }
.article-header .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg3); margin: 0 0 24px; }
.article-header .breadcrumb a { color: var(--fg3); text-decoration: none; }
.article-header .breadcrumb a:hover { color: var(--blue); }
.article-header__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--fg3); margin-bottom: 18px; }
.article-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4vw, 44px); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 28px; text-wrap: pretty; }
.article-byline { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 36px; }
.article-byline__who { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--fg2); }
.article-byline__who .av { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 12px; }
.article-share { display: flex; align-items: center; gap: 8px; }
.article-share span { font-size: 12px; color: var(--fg3); margin-right: 4px; }
.article-share a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); color: var(--fg2); transition: color .15s, border-color .15s, background .15s; }
.article-share a:hover { color: #fff; background: var(--blue); border-color: var(--blue); }
.article-share svg { width: 15px; height: 15px; }
.article-figure { margin: 0 0 28px; }
.article-figure .ph { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; }
.article-figure image-slot { position: absolute; inset: 0; }

/* Body typography — clean semantic flow, WP-migration friendly */
.article-body { font-size: 17px; line-height: 1.75; color: var(--fg1); }
.article-body p { margin: 0 0 24px; }
.article-body h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(21px, 2.4vw, 26px); line-height: 1.25; letter-spacing: -.015em; margin: 44px 0 16px; }
.article-body ul, .article-body ol { margin: 0 0 24px; padding-left: 24px; }
.article-body li { margin-bottom: 10px; }
.article-body li::marker { color: var(--blue); }
.article-body strong { font-weight: 650; }
.article-body a { color: var(--blue); }
.article-body blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--blue); font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.45; letter-spacing: -.01em; color: var(--fg1); }
.article-body figure { position: relative; aspect-ratio: 16 / 9; margin: 36px 0 56px; border-radius: var(--r-lg); overflow: hidden; background: var(--img-gray, #E9EAEA); }
.article-body figure image-slot { position: absolute; inset: 0; }
.article-body figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; font-size: 13px; color: #fff; margin: 0; padding: 24px 16px 12px; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); }

/* Prev / next */
.article-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 56px 0 0; padding-top: 32px; border-top: 1px solid var(--line); }
.article-pn a { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border: 0; text-decoration: none; }
.article-pn a:hover h4 { color: var(--blue); }
.article-pn .dir { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.article-pn h4 { font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1.35; margin: 0; color: var(--fg2); transition: color .15s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-pn a.next { text-align: right; align-items: flex-end; }

/* Related */
.article-related { margin-top: 72px; }
.article-related h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -.015em; margin: 0 0 24px; }

@media (max-width: 720px) {
  .article-wrap { padding-top: 110px; }
  .article-byline { flex-direction: column; align-items: flex-start; gap: 12px; }
  .article-body { font-size: 16px; }
  .article-pn { grid-template-columns: 1fr; }
  .article-pn a.next { text-align: left; align-items: flex-start; }
}

/* About — dark hero */
.dhero { position: relative; background: var(--black); color: #fff; overflow: hidden; }
.dhero__bg { position: absolute; inset: 0; z-index: 0; }
.dhero__bg::after { content: none; }
.dhero__blades { display: none; position: absolute; inset: 0; z-index: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0 26px, rgba(50,94,142,0) 26px, rgba(12,137,198,.85) 34px, rgba(50,94,142,0) 42px);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 42%, transparent 72%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 42%, transparent 72%);
  filter: blur(.6px); }
.dhero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(15,16,16,.45); }
.dhero::after { content: none; }
.dhero__inner { position: relative; z-index: 2; min-height: 82vh; display: flex; flex-direction: column; padding-block: 168px 56px; }
.dhero__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.6vw, 58px); line-height: 1.06; letter-spacing: -.03em; margin: 0; max-width: 17ch; }
.dhero__title em { font-style: italic; font-weight: 700; }
.dhero__foot { margin-top: auto; padding-top: 64px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.dhero__sub { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.72); max-width: 42ch; margin: 0; }
.dhero__chev { width: 30px; height: 30px; color: var(--ifn-blue); flex-shrink: 0; }

/* About — brand-blue statement */
.bintro { background: #fff; color: var(--fg1); text-align: center; padding: 104px 0 84px; }
.bintro__inner { display: flex; flex-direction: column; align-items: center; }
.bintro__eyebrow { background: var(--ifn-blue-50, #e8f4fb); color: var(--blue); font-family: var(--font-display); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; padding: 6px 14px; border-radius: var(--r-pill); }
.bintro__mark { display: block; width: 54px; height: auto; margin: 0 auto; }
.bintro__label { margin: 18px 0 0; font-size: 15px; color: var(--fg3); }
.bintro__statement { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4vw, 52px); line-height: 1.16; letter-spacing: -.02em; max-width: 19ch; margin: 44px auto; color: var(--blue); }
.bintro__statement em { font-style: normal; color: var(--blue); }
.bintro__chev { width: 28px; height: 28px; color: var(--blue); }

/* About — why / overview */
.pill-eyebrow { display: inline-block; white-space: nowrap; background: var(--bone); color: var(--fg3); font-family: var(--font-display); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; padding: 6px 14px; border-radius: var(--r-pill); }
.why { background: #fff; padding: 96px 0; }

/* Full-bleed image hero variant */
.why--hero { position: relative; padding: 120px 0; background: var(--img-black); color: #fff; overflow: hidden; }
.why--hero .why__bg { position: absolute; inset: 0; background: var(--img-black); }
.why--hero .why__bg::after { content: none; }
.why--hero .why__bg .ph__label { color: rgba(255,255,255,.4); }
.why--hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(15,16,16,.92) 0%, rgba(15,16,16,.78) 42%, rgba(15,16,16,.45) 72%, rgba(15,16,16,.25) 100%); }
.why--hero .why__inner { position: relative; z-index: 2; max-width: 640px; }
.why--hero .pill-eyebrow { background: rgba(255,255,255,.16); color: #fff; }
.why--hero .why__head { color: #fff; max-width: 22ch; }
.why--hero .why__head em { color: #fff; }
.why--hero .why__copy { color: rgba(255,255,255,.84); }
.why--hero .why__list li { color: rgba(255,255,255,.92); }
.why--hero .why__copy strong { color: #fff; }

.why__head { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3.1vw, 40px); line-height: 1.24; letter-spacing: -.02em; max-width: 26ch; margin: 26px 0 56px; text-wrap: pretty; }
.why__head em { color: var(--blue); font-style: italic; }
.why__arrow { width: 1em; height: 1em; color: var(--blue); vertical-align: -.12em; margin-right: .12em; }
.why__row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.why__img { width: 100%; aspect-ratio: 4 / 3; }
.why__copy { font-size: 15px; line-height: 1.7; color: var(--fg2); margin: 0 0 28px; }
.why__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.why__list li { display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--fg1); }
.why__list li::before { content: ""; flex-shrink: 0; width: 14px; height: 2px; background: var(--blue); margin-top: 11px; }
@media (max-width: 860px) { .why__row { grid-template-columns: 1fr; gap: 32px; } .dhero__foot { flex-direction: column; align-items: flex-start; } }

.about-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.about-split__body p { font-size: 15px; line-height: 1.7; color: var(--fg2); margin: 0 0 18px; }
.about-strategy { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: 17px; line-height: 1.5; color: var(--fg1); border-left: 2px solid var(--blue); padding-left: 18px; margin-top: 4px; text-wrap: pretty; }

/* About — reach / world map */
.reach-map { position: relative; width: 100%; aspect-ratio: 2 / 1; margin: 36px 0 18px; background: #eaf1f5; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.reach-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.reach-map__land { fill: #cfd8dd; stroke: #bcc6cc; stroke-width: .4; }
.reach-pt__lead { stroke: var(--blue); stroke-width: .6; opacity: .5; }
.reach-pt__halo { fill: var(--blue); opacity: .16; }
.reach-pt__dot { fill: var(--blue); stroke: #fff; stroke-width: 1.2; }
.reach-pt__label { font-family: var(--font-body); font-size: 11px; font-weight: 600; fill: var(--fg1); paint-order: stroke; stroke: #fff; stroke-width: 2.4px; stroke-linejoin: round; }
.reach-caption { text-align: center; font-size: 13px; color: var(--fg3); margin: 0; }
.event-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-top: 32px; }
.event-cta__text { margin: 0; font-size: 16px; color: var(--fg2); max-width: 56ch; }
@media (max-width: 640px) { .event-cta { flex-direction: column; align-items: flex-start; } }

/* About — certificates */
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cert-card { border: 0; border-radius: 0; overflow: hidden; display: flex; flex-direction: column; background: transparent; transition: transform var(--ease) .24s; }
.cert-card:hover { transform: translateY(-4px); }
.cert-card__seal { aspect-ratio: 1 / 1.35; border: none; border-radius: 0; background: transparent; }
.cert-card__meta { padding: 18px 20px; }
.cert-card__meta h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0 0 4px; letter-spacing: -.01em; }
.cert-card__meta span { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }

/* About — feature rows (durability / maintenance) */
.feat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
.feat-row + .feat-row { margin-top: 28px; }
.feat-row--rev .feat-row__media { order: 2; }
.feat-row--rev .feat-row__body { order: 1; }
.feat-row__media { border-radius: var(--r-lg); min-height: 440px; height: 100%; }
.feat-row__body { display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
.feat-row__body .eyebrow { color: var(--blue); margin: 0 0 20px; }
.feat-row__h { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; letter-spacing: -.02em; color: var(--fg1); margin: 0 0 16px; text-wrap: pretty; }
.feat-row__copy { font-size: 15.5px; line-height: 1.65; color: var(--fg2); margin: 0; max-width: 52ch; }
.feat-row__list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.feat-row__list li { position: relative; padding-left: 32px; font-size: 15px; line-height: 1.55; color: var(--fg1); }
.feat-row__list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); }
.feat-row__list li::after { content: ""; position: absolute; left: 5px; top: 8px; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
@media (max-width: 860px) {
  .feat-row, .feat-row--rev { grid-template-columns: 1fr; gap: 24px; }
  .feat-row--rev .feat-row__media { order: 0; }
  .feat-row--rev .feat-row__body { order: 0; }
  .feat-row__media { min-height: 280px; }
}

/* About — mission / vision */
.mv-section .mv-row + .mv-row { margin-top: 28px; }
.mv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
.mv-row--rev .mv-row__media { order: 2; }
.mv-row--rev .mv-row__body { order: 1; }
.mv-row__media { border-radius: var(--r-lg); min-height: 440px; height: 100%; }
.mv-row__body { display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
.mv-row__body .eyebrow { color: var(--blue); margin: 0 0 20px; }
.mv-row__quote { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.24; letter-spacing: -.02em; color: var(--fg1); margin: 0; text-wrap: pretty; }
.mv-row__cn { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--fg3); margin: 24px 0 0; }
@media (max-width: 860px) {
  .mv-row, .mv-row--rev { grid-template-columns: 1fr; gap: 24px; }
  .mv-row--rev .mv-row__media { order: 0; }
  .mv-row--rev .mv-row__body { order: 0; }
  .mv-row__media { min-height: 280px; }
}

/* About — legacy mission / vision cards */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; }
.mv-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; }
.mv-card__cn { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--blue); margin: 0 0 14px; }
.mv-card__text { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 2vw, 22px); line-height: 1.4; letter-spacing: -.01em; color: var(--fg1); margin: 0; text-wrap: pretty; }

/* About — values */
.values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.value-card__line { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--fg1); margin: 0 0 6px; }

/* About — services */
.services-sub { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); margin: 40px 0 14px; }

/* About — Our products (bento) */
.bento__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.stats-section .bento__head { align-items: center; }
.bento__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -.02em; margin: 0; }
.bento__head > .bento__title { flex-shrink: 0; }
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bento-card { position: relative; background: var(--bone); border-radius: var(--r-lg); overflow: hidden; padding: 32px; display: block; min-height: 320px; transition: transform var(--ease) .24s, box-shadow var(--ease) .24s; }
.bento-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.bento-card--hero { grid-column: 1 / -1; min-height: 420px; }
.bento-card__title { position: relative; z-index: 2; font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1.12; letter-spacing: -.02em; margin: 0; max-width: 11ch; }
.bento-card--hero .bento-card__title { font-size: clamp(26px, 2.6vw, 34px); max-width: 14ch; }
.bento-card__media { position: absolute; right: 18px; top: 46%; transform: translateY(-50%); width: 54%; height: 84%; border-radius: var(--r-md); background: transparent; }
.bento-card--hero .bento-card__media { width: 56%; height: 88%; top: 50%; }
.bento-card__media .ph__label { max-width: 80%; }
.bento-card__spec { position: absolute; left: 32px; bottom: 32px; z-index: 2; background: rgba(255,255,255,.66); backdrop-filter: blur(2px); border-radius: var(--r-sm); padding: 14px 16px; max-width: 240px; }
.bento-card__spec p { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--fg1); line-height: 1.32; }
.bento-card__links { display: flex; gap: 18px; }
.bento-card__links span { font-size: 13px; color: var(--fg1); text-decoration: underline; text-underline-offset: 3px; transition: color var(--ease) .15s; }
.bento-card:hover .bento-card__links span:first-child { color: var(--blue); }
@media (max-width: 760px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card, .bento-card--hero { min-height: 0; display: flex; flex-direction: column; gap: 18px; padding: 24px; }
  .bento-card__title, .bento-card--hero .bento-card__title { max-width: none; }
  .bento-card__media, .bento-card--hero .bento-card__media {
    position: static; transform: none; width: 100%; height: 240px;
    margin: 0 auto; flex-shrink: 0;
  }
  .bento-card__spec, .bento-card--hero .bento-card__spec {
    position: static; left: auto; bottom: auto; max-width: none;
    background: transparent; backdrop-filter: none; padding: 0; margin-top: auto;
  }
}

/* About — events horizontal rail */
.rail-nav { display: flex; gap: 10px; }
.rail-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--fg1); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--ease) .18s, border-color var(--ease) .18s, color var(--ease) .18s; }
.rail-btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.event-rail { display: flex; gap: 18px; overflow-x: auto; padding: 4px 0 12px; margin-top: 8px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 96px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 96px), transparent 100%); }
.event-rail::-webkit-scrollbar { display: none; }
.event-card { position: relative; flex: 0 0 340px; display: flex; flex-direction: column; border: 1px solid var(--line); background: #fff; border-radius: var(--r-lg); overflow: hidden; transition: transform var(--ease) .24s, box-shadow var(--ease) .24s; }
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 8px 24px rgba(15,16,16,.08)); }
.event-card__media { position: relative; height: 190px; flex-shrink: 0; border-radius: 0; }
.event-card__media image-slot { position: absolute; inset: 0; }
.event-card__media .ph__label { color: rgba(255,255,255,.5); }
.event-card__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 20px; }
.event-card__loc { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); }
.event-card__name { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.18; letter-spacing: -.01em; margin: 8px 0 8px; color: var(--fg1); }
.event-card__excerpt { font-size: 13.5px; line-height: 1.55; color: var(--fg2); margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.event-card__body .link-arrow { margin-top: auto; }
@media (max-width: 560px) { .event-card { flex-basis: 280px; } }


/* Dark stat boxes */
.stats-dark { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat-box { border: 1px solid var(--line-dark); border-radius: var(--r-md); padding: 22px; }
.stat-box__v { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.02em; color: #fff; }
.stat-box:nth-child(2) .stat-box__v { color: var(--blue); }
.stat-box__l { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 8px; line-height: 1.4; }
.about-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

/* QC flow — quality control steps */
.qc-flow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; }
.qc-step { border-top: 2px solid var(--line); padding-top: 16px; position: relative; }
.qc-step::before { content: ""; position: absolute; top: -10px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); }
.qc-step::after { content: ""; position: absolute; top: -5px; left: 5px; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.qc-step__num { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--blue); letter-spacing: .04em; margin: 0 0 6px; }
.qc-step__t { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; margin: 0 0 6px; }
.qc-step__d { font-size: 13px; line-height: 1.5; color: var(--fg2); margin: 0; }
@media (max-width: 1100px) { .qc-flow { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) {
  .qc-flow { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 12px 0 8px; scrollbar-width: none; }
  .qc-flow::-webkit-scrollbar { display: none; }
  .qc-step { scroll-snap-align: start; }
  .qc-step__d { font-size: 14px; }
}

/* Horizontal timeline */
.timeline-h { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.tl-h-item { border-top: 2px solid var(--line); padding-top: 18px; position: relative; }
.tl-h-item::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.tl-h-item .yr { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--blue); letter-spacing: -.01em; }
.tl-h-item h3 { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin: 6px 0 6px; }
.tl-h-item p { font-size: 12.5px; line-height: 1.5; color: var(--fg2); margin: 0; }

/* Workshop gallery */
.workshop { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.workshop__big { grid-row: 1 / 3; aspect-ratio: auto; }
.workshop .ph { min-height: 180px; border: 1px solid var(--line); }

/* Founder quote */
.founder { display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: start; }
.founder__mark { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: .6; color: var(--blue); letter-spacing: -.05em; }
.founder__quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.6vw, 28px); line-height: 1.35; letter-spacing: -.01em; margin: 0 0 28px; text-wrap: pretty; }
.founder__by { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.founder__av { width: 46px; height: 46px; border-radius: 50%; background: var(--img-gray); display: grid; place-items: center; font-size: 9px; letter-spacing: .08em; color: var(--fg3); }
.founder__by strong { font-family: var(--font-display); font-size: 15px; display: block; }
.founder__by span { font-size: 13px; color: var(--fg3); }

@media (max-width: 960px) {
  .about-split, .about-numbers, .founder { grid-template-columns: 1fr; gap: 32px; }
  .timeline-h { grid-template-columns: 1fr 1fr; }
  .workshop { grid-template-columns: 1fr 1fr; }
  .workshop__big { grid-row: auto; }
  .cert-grid { grid-template-columns: 1fr 1fr; }
  .mv-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) { .stats-dark, .timeline-h, .workshop, .cert-grid, .values-grid { grid-template-columns: 1fr; } }

/* Resources — search */
.search-bar { display: flex; gap: 10px; max-width: 560px; margin: 8px 0 18px; }
.search-bar__field { flex: 1; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 12px 20px; }
.search-bar__field svg { width: 18px; height: 18px; color: var(--fg3); flex-shrink: 0; }
.search-bar__field input { flex: 1; border: none; outline: none; font-family: var(--font-body); font-size: 14px; background: none; }
.popular-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--fg3); }
.popular-tags a { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; color: var(--fg2); transition: all var(--ease) .15s; }
.popular-tags a:hover { border-color: var(--blue); color: var(--blue); }

/* Quick-link cards */
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.quick-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: transform var(--ease) .24s, box-shadow var(--ease) .24s; }
.quick-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.quick-card .icon-tile { width: 42px; height: 42px; }
.quick-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 4px 0 0; }
.quick-card p { font-size: 13px; color: var(--fg2); margin: 0; flex: 1; }
.quick-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--fg3); }
.quick-card__foot .link-arrow { font-size: 12px; }

/* Featured tutorial */
.featured-tut { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.featured-tut__media { aspect-ratio: 16 / 10; background: var(--img-gray); border-radius: var(--r-lg); position: relative; display: grid; place-items: center; overflow: hidden; }
.featured-tut__media::after { content: ""; position: absolute; inset: 0; background: rgba(15,16,16,.22); pointer-events: none; z-index: 1; }
.featured-tut__play { position: relative; z-index: 2; width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-md); display: grid; place-items: center; color: var(--blue); }
.featured-tut__play svg { width: 26px; height: 26px; margin-left: 3px; }
.featured-tut__dur { position: absolute; right: 14px; bottom: 14px; z-index: 2; background: rgba(15,16,16,.8); color: #fff; font-size: 12px; padding: 4px 10px; border-radius: var(--r-pill); }
.featured-tut h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.01em; margin: 14px 0 12px; }
.featured-tut p { font-size: 14px; line-height: 1.6; color: var(--fg2); margin: 0 0 18px; }
.featured-tut ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.featured-tut li { display: flex; gap: 10px; font-size: 13.5px; color: var(--fg1); align-items: flex-start; }
.featured-tut li svg { color: var(--blue); flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.featured-tut__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Video cards */
.vid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vid-card { cursor: pointer; }
.vid-card__media { aspect-ratio: 16 / 10; background: var(--img-gray); border-radius: var(--r-md); position: relative; display: grid; place-items: center; margin-bottom: 14px; overflow: hidden; transition: transform var(--ease) .24s; }
.vid-card:hover .vid-card__media { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.vid-card__media::after { content: ""; position: absolute; inset: 0; background: rgba(15,16,16,.22); pointer-events: none; z-index: 1; }
.vid-card__media .play { position: relative; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; color: var(--blue); }
.vid-card__media .play svg { width: 20px; height: 20px; margin-left: 2px; }
.vid-card__dur { position: absolute; right: 10px; bottom: 10px; z-index: 2; background: rgba(15,16,16,.8); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: var(--r-pill); }
.vid-card__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11px; color: var(--fg3); }
.vid-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.3; margin: 0; }
.lang-chips { display: inline-flex; gap: 4px; }
.lang-chips span { font-size: 10px; color: var(--fg3); }

/* Manual rows */
.manual-list { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.manual-row { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.manual-row:last-child { border-bottom: none; }
.manual-row__icon { width: 34px; height: 34px; border-radius: 8px; background: var(--bone); display: grid; place-items: center; color: var(--fg2); flex-shrink: 0; }
.manual-row__icon svg { width: 18px; height: 18px; }
.manual-row__name { flex: 1; }
.manual-row__name strong { font-family: var(--font-display); font-weight: 700; font-size: 14px; display: block; }
.manual-row__name span { font-size: 12px; color: var(--fg3); }
.manual-row__langs { display: flex; gap: 5px; }
.manual-row__langs span { font-size: 11px; border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px; color: var(--fg2); }
.manual-row__dl { font-size: 12px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 7px 16px; background: #fff; cursor: pointer; white-space: nowrap; transition: background var(--ease) .15s; }
.manual-row__dl:hover { background: var(--bone); }

/* Help band */
.help-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.help-band__copy h2 { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -.01em; margin: 12px 0 8px; }
.help-band__copy p { font-size: 14px; color: var(--fg2); margin: 0; max-width: 48ch; }
.help-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.help-band--blue { background: transparent; border-radius: 0; padding: 0; color: #fff; }
.help-band--blue .eyebrow { color: rgba(255,255,255,.78); }
.help-band--blue .help-band__copy h2 { color: #fff; }
.help-band--blue .help-band__copy p { color: rgba(255,255,255,.92); }
.btn--ghost-on-blue { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.btn--ghost-on-blue:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ============================================================
   DISTRIBUTORS / PARTNERSHIP
   ============================================================ */
.dist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dist-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; display: flex; flex-direction: column; gap: 12px;
  transition: transform var(--ease) .24s, box-shadow var(--ease) .24s;
}
.dist-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.dist-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dist-card__flag {
  width: 42px; height: 42px; border-radius: 12px;
  background: #EAF4FB; color: var(--blue);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .02em;
}
.dist-card__tier { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill); }
.tier--premier { background: var(--black); color: #fff; }
.tier--authorized { background: #EAF4FB; color: var(--blue); }
.dist-card__name { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; margin: 2px 0 0; }
.dist-card__loc { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--fg2); margin: 0; }
.dist-card__loc svg { width: 16px; height: 16px; color: var(--fg3); flex-shrink: 0; }
.dist-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.dist-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.dist-card__meta { font-size: 12px; color: var(--fg3); }
.dist-card__foot .link-arrow { font-size: 13px; }

/* Apply split */
.apply { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.apply__lede { font-size: 15px; line-height: 1.65; color: var(--fg2); margin: 0 0 24px; max-width: 46ch; }
.apply__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.apply__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--fg1); }
.apply__list li svg { width: 18px; height: 18px; color: var(--blue); flex-shrink: 0; margin-top: 1px; }
.apply__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 32px; box-shadow: var(--shadow-sm); }
.apply__form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.apply__submit { grid-column: 1 / -1; margin-top: 6px; }
.apply__submit .btn { width: 100%; justify-content: center; }

@media (max-width: 960px) {
  .dist-grid { grid-template-columns: 1fr 1fr; }
  .apply { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .dist-grid { grid-template-columns: 1fr; }
  .apply__form { grid-template-columns: 1fr; }
}


@media (max-width: 960px) {
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .featured-tut { grid-template-columns: 1fr; gap: 28px; }
  .vid-grid { grid-template-columns: 1fr 1fr; }
  .manual-row { flex-wrap: wrap; }
}
@media (max-width: 600px) { .quick-grid, .vid-grid { grid-template-columns: 1fr; } }

/* Contact page form */
.qform { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.qform .field--full { grid-column: 1 / -1; }
.qform__chips { display: flex; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; }
.chip--sel { background: #EAF4FB; border-color: #BFE0F2; color: var(--blue); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.chip--plain { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.qform__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.qform__sub { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg2); cursor: pointer; }
.qform__sub input { width: 16px; height: 16px; accent-color: var(--blue); }
.captcha { grid-column: 1 / -1; width: 280px; height: 74px; border: 1px solid var(--line); border-radius: var(--r-sm, 8px); display: flex; align-items: center; gap: 10px; padding: 0 16px; font-size: 13px; color: var(--fg2); background: #f9f9f9; }
.captcha .box { width: 24px; height: 24px; border: 2px solid var(--line-bone); border-radius: 3px; background: #fff; }

.contact-info__box { border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; }
.contact-info__box h4 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); margin: 0 0 12px; }
.contact-info__box .big { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0 0 2px; }
.contact-info__box .small { font-size: 13px; color: var(--fg3); margin: 0 0 14px; }
.contact-info__box .small:last-child { margin-bottom: 0; }
.contact-info__box p { font-size: 14px; line-height: 1.55; color: var(--fg2); margin: 0 0 14px; }
.contact-info__map { aspect-ratio: 16 / 11; background: var(--img-gray); border-radius: var(--r-lg); }
.contact-info__addr { font-size: 14px; line-height: 1.6; color: var(--fg2); }
.contact-info__addr strong { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--fg1); display: block; margin-bottom: 8px; }

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

/* Contact page v2 */
.ctp-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; }
.ctp-intro__h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4vw, 46px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 16px; }
.ctp-intro__lede { font-size: 16px; line-height: 1.6; color: var(--fg2); margin: 0 0 32px; max-width: 46ch; }
.ctp-intro__img { min-height: 520px; }
.ctp-detail { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--line); }
.ctp-detail__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(12,137,198,.1); color: var(--blue); display: grid; place-items: center; }
.ctp-detail__icon svg { width: 19px; height: 19px; }
.ctp-detail strong { font-family: var(--font-display); font-weight: 700; font-size: 16px; display: block; }
.ctp-detail p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fg3); }
.ctp-social { display: flex; gap: 12px; margin-top: 24px; }
.ctp-social__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--fg2); transition: all var(--ease) .15s; }
.ctp-social__btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.ctp-social__btn svg { width: 19px; height: 19px; }

/* Contact intro — dark (IFOURNI black) variant */
.ctp-intro-dark { background: var(--black); color: #fff; }
.ctp-intro-dark .eyebrow { color: rgba(255,255,255,.66); }
.ctp-intro-dark .ctp-intro__h1 { color: #fff; }
.ctp-intro-dark .ctp-intro__lede { color: rgba(255,255,255,.78); }
.ctp-intro-dark .ctp-detail { border-top-color: rgba(255,255,255,.14); }
.ctp-intro-dark .ctp-detail strong { color: #fff; }
.ctp-intro-dark .ctp-detail p { color: rgba(255,255,255,.6); }
.ctp-intro-dark .ctp-detail__icon { background: rgba(12,137,198,.22); color: #fff; }
.ctp-intro-dark .ctp-social__btn { border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.82); }
.ctp-intro-dark .ctp-social__btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

.ctp-form-wrap { width: 100%; max-width: 720px; margin-inline: auto; }

.select-wrap { position: relative; }
.select-wrap select { width: 100%; appearance: none; font-family: var(--font-body); font-size: 14px; color: var(--fg1); border: 1px solid var(--line); background: #fff; border-radius: var(--r-pill); padding: 12px 44px 12px 18px; cursor: pointer; outline: none; }
.select-wrap select:focus { border-color: var(--blue); }
.select-wrap__icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--fg3); pointer-events: none; display: grid; }
.select-wrap__icon svg { width: 18px; height: 18px; }

.ctp-banner { position: relative; min-height: 420px; display: flex; align-items: center; overflow: hidden; }
.ctp-banner__bg { position: absolute; inset: 0; border-radius: 0; }
.ctp-banner__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(15,16,16,.7) 0%, rgba(15,16,16,.35) 60%, rgba(15,16,16,.15) 100%); }
.ctp-banner__inner { position: relative; z-index: 2; }
.ctp-banner__eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); margin: 0 0 14px; }
.ctp-banner__h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -.02em; color: #fff; margin: 0 0 14px; }
.ctp-banner__lede { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.82); max-width: 48ch; margin: 0 0 26px; }

.ctp-faq { width: 100%; }
.ctp-faq__list { display: flex; flex-direction: column; }
.ctp-acc { border-top: 1px solid var(--line); }
.ctp-acc:last-child { border-bottom: 1px solid var(--line); }
.ctp-acc__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: none; border: none; cursor: pointer; text-align: left; padding: 22px 0; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--fg1); }
.ctp-acc__icon { flex-shrink: 0; color: var(--blue); display: grid; transition: transform var(--ease) .24s; }
.ctp-acc.is-open .ctp-acc__icon { transform: rotate(180deg); }
.ctp-acc__icon svg { width: 20px; height: 20px; }
.ctp-acc__body { max-height: 0; overflow: hidden; transition: max-height var(--ease) .3s; }
.ctp-acc.is-open .ctp-acc__body { max-height: 260px; }
.ctp-acc__body p { margin: 0; padding: 0 40px 24px 0; font-size: 15px; line-height: 1.6; color: var(--fg2); }

@media (max-width: 960px) { .ctp-intro { grid-template-columns: 1fr; gap: 36px; } }

/* Services — alternating image / text rows */
.svc-rows { display: flex; flex-direction: column; gap: 96px; }
.svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.svc-row__media { aspect-ratio: 4 / 3.2; border-radius: var(--r-xl); }
.svc-row__media .ph__label { left: 20px; bottom: 16px; max-width: 78%; line-height: 1.4; }
.svc-row--rev .svc-row__media { order: 2; }
.svc-row__num {
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  letter-spacing: .14em; color: var(--blue);
}
.svc-row__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 2.4vw, 31px); line-height: 1.08; letter-spacing: -.025em;
  margin: 12px 0 14px; max-width: 18ch;
}
.svc-row__lede { font-size: 16px; line-height: 1.62; color: var(--fg2); margin: 0; max-width: 46ch; }
.svc-row__sub { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); margin: 26px 0 14px; }
.svc-row__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.svc-row__list li {
  position: relative; padding-left: 30px;
  font-size: 15px; line-height: 1.45; color: var(--fg1);
}
.svc-row__list li svg { position: absolute; left: 0; top: 1px; width: 19px; height: 19px; color: var(--blue); }
.svc-row__note { margin: 22px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--fg2); max-width: 46ch; }
@media (max-width: 880px) {
  .svc-rows { gap: 64px; }
  .svc-row { grid-template-columns: 1fr; gap: 32px; }
  .svc-row--rev .svc-row__media { order: 0; }
  .svc-row__media { aspect-ratio: 16 / 10; }
}

/* Mobile preview stage (tweak) */
.mobile-stage {
  min-height: 100vh;
  background: #1b1c1c;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
}
.phone {
  position: relative;
  width: 402px;
  max-width: 100%;
  height: calc(100vh - 80px);
  max-height: 880px;
  background: #0F1010;
  border-radius: 44px;
  padding: 12px;
  box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.06);
}
.phone__notch {
  position: absolute;
  top: 20px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 28px;
  background: #0F1010;
  border-radius: 0 0 16px 16px;
  z-index: 3;
}
.phone__screen {
  width: 100%; height: 100%;
  border: none;
  border-radius: 33px;
  background: #fff;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto; }
}

/* ---------- Catalog: full-width grid + slide-in Filters drawer ---------- */
.toolbar__left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.prod-grid--wide { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .prod-grid--wide { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .prod-grid--wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .prod-grid--wide { grid-template-columns: 1fr; } }

.filters-drawer-root { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.filters-drawer-root.is-open { visibility: visible; pointer-events: auto; }
.filters-drawer__backdrop { position: absolute; inset: 0; background: rgba(15,16,16,.42); opacity: 0; transition: opacity .24s var(--ease-out, ease); }
.filters-drawer-root.is-open .filters-drawer__backdrop { opacity: 1; }
.filters-drawer {
  position: absolute; top: 0; left: 0; height: 100%; width: 330px; max-width: 86vw;
  background: #fff; box-shadow: var(--shadow-lg); box-sizing: border-box;
  padding: 28px 28px 40px; overflow-y: auto;
  transform: translateX(-100%); transition: transform .3s var(--ease-out, ease);
}
.filters-drawer-root.is-open .filters-drawer { transform: translateX(0); }
.filters-drawer .filters { width: 100%; position: static; display: block; padding-top: 20px; }
.filters-drawer .filters__head { padding-right: 44px; }
.filters-drawer__close {
  position: absolute; top: 18px; right: 18px; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; color: var(--fg2);
}
.filters-drawer__close:hover { color: var(--fg1); background: var(--ifn-stone-100, #f4f4f2); }

/* Mobile drawer language picker */
.mdrawer__lang { display: inline-flex; align-items: center; gap: 10px; }
.mlang__opt {
  background: none; border: none; cursor: pointer; padding: 6px 2px;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--fg3);
  transition: color var(--ease) .15s;
}
.mlang__opt.is-on { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }


/* ============================================================
   2. WORDPRESS BRIDGE LAYER
   Maps core-block output onto the parity classes above so the
   editor canvas and the front end render identically.
   ============================================================ */

/* --- Root scaffolding ------------------------------------- */
.wp-site-blocks { display: block; }
.wp-site-blocks > * { margin-block: 0; }

/* Sections meet flush. WordPress gives every block in a flow container a 24px
   top margin (`:root :where(.is-layout-flow) > *`), which the page's own
   sections inherited — a 24px band of page background between each one. It is
   invisible where both neighbours are white, and reads as a white stripe
   wherever a photo or a colour block runs to the edge, which is why it showed
   under the hero and nowhere else. Every section on every page is alignfull,
   so keying on that clears the band without touching article prose, whose
   paragraphs are not full-bleed and still need their rhythm. */
:root .wp-block-post-content > .alignfull { margin-block: 0; }
.editor-styles-wrapper { background: var(--white); }

/* Full-bleed sections. The post content carries the theme's 32px root padding,
   and WordPress cancels it for .alignfull children with a negative margin. This
   used to zero that margin, which left every full-bleed band — heroes, the dark
   contact intro, the blue contact strip — stopping 32px short of the window on
   both sides, with a white sliver down each edge. The design's sections run to
   the viewport edge, so the negative margin has to stand. .wp-site-blocks has
   no root padding of its own, so it is left flush. */
.wp-site-blocks > .alignfull { margin-inline: 0; }

/* Groups carrying .section already own their vertical rhythm. */
.wp-block-group.section > :where(:not(.alignfull)) { margin-block: 0; }

/* --- Buttons ---------------------------------------------- */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -.01em;
  line-height: 1.2;
  border-radius: var(--r-pill);
  padding: 11px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  background: var(--blue);
  color: #fff;
  transition: background var(--ease) .15s, box-shadow var(--ease) .15s,
              color var(--ease) .15s, transform var(--ease) .15s, border-color var(--ease) .15s;
}
.wp-block-button__link:hover { background: var(--blue-700); box-shadow: var(--shadow-brand); color: #fff; }
.wp-block-button__link:active { background: var(--blue-800); transform: translateY(1px); }

.is-style-ifn-ghost-light .wp-block-button__link {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.36);
  color: #fff;
  box-shadow: none;
}
.is-style-ifn-ghost-light .wp-block-button__link:hover { background: rgba(255,255,255,.26); box-shadow: none; }

.is-style-ifn-ghost .wp-block-button__link {
  background: transparent;
  border-color: var(--line);
  color: var(--fg1);
  box-shadow: none;
}
.is-style-ifn-ghost .wp-block-button__link:hover { background: var(--bone); box-shadow: none; }

.is-style-ifn-dark .wp-block-button__link {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
  box-shadow: none;
}
.is-style-ifn-dark .wp-block-button__link:hover { background: var(--blue); border-color: var(--blue); box-shadow: none; }

.is-style-ifn-outline-blue .wp-block-button__link {
  background: transparent;
  border-color: var(--blue);
  color: var(--blue);
  font-size: 12px;
  padding: 8px 16px;
  box-shadow: none;
}
.is-style-ifn-outline-blue .wp-block-button__link:hover { background: rgba(12,137,198,.08); box-shadow: none; }

.is-style-ifn-link-arrow .wp-block-button__link {
  background: none;
  border: none;
  padding: 0;
  font-weight: 600;
  font-size: 13px;
  color: var(--blue);
  box-shadow: none;
  transition: gap var(--ease) .15s;
}
.is-style-ifn-link-arrow .wp-block-button__link:hover { gap: 10px; background: none; box-shadow: none; }

/* --- Header / nav ----------------------------------------- */
.wp-block-template-part:has(> .nav) { position: static; }
.nav .nav__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nav .nav__brand { display: flex; align-items: center; }
.nav .wp-block-site-logo { line-height: 0; }
.nav .wp-block-site-logo img { height: 26px; width: auto; transition: filter var(--ease) .24s; }
/* Transparent-over-hero state: the transparent-PNG wordmark inverts to white. */
/* The logo is knocked out to white only while the bar is genuinely see-through.
   Opening the mega menu makes the bar solid, exactly as scrolling does, so the
   white mark has to come off then too — otherwise it disappears into the panel.
   Stating it as a second :not() rather than a later override is deliberate:
   this selector scores four classes, and the reset further down scores three,
   so an override would have lost. */
body.has-transparent-nav .nav:not(.scrolled):not(.mega-open) .wp-block-site-logo img { filter: brightness(0) invert(1); }
.nav .wp-block-navigation.nav__links { flex: 1; justify-content: center; }
.nav .nav__links .wp-block-navigation__container { gap: 28px; }
.nav .nav__links .wp-block-navigation-item__content { padding: 6px 0; }
.nav .nav__links .wp-block-navigation-item__content:hover { color: #fff; }
.nav.scrolled .nav__links .wp-block-navigation-item__content:hover { color: var(--fg1); }
.nav .nav__links .current-menu-item > .wp-block-navigation-item__content { color: var(--blue); font-weight: 600; }
.nav .nav__right .wp-block-buttons { margin: 0; }
.nav .nav__right .wp-block-button__link { font-size: 13px; padding: 10px 18px; }

/* Core mobile overlay, restyled to the IFOURNI drawer language. */
.nav .wp-block-navigation__responsive-container-open,
.nav .wp-block-navigation__responsive-container-close { color: currentColor; }
.nav .wp-block-navigation__responsive-container-open svg,
.nav .wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; }
.nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--white);
  padding: 28px var(--gutter) 40px;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: 48px;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 4px; }
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--fg1);
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
  width: 100%;
}

/* --- Footer ----------------------------------------------- */
.footer .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.footer .wp-block-site-logo { line-height: 0; margin-bottom: 20px; }
.footer .wp-block-site-logo img { height: 30px; width: auto; filter: brightness(0) invert(1); }
.footer .wp-block-columns.footer__top { gap: 40px; margin-bottom: 0; }
.footer .footer__col .wp-block-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer .footer__col h4 { color: rgba(255,255,255,.5); }
.footer .footer__contact .wp-block-paragraph { margin: 0; }

/* --- Images ------------------------------------------------ */
.wp-block-image img { border-radius: inherit; }
.wp-block-cover { border-radius: 0; }
.wp-block-image.ph { background: var(--img-gray); }

/* --- Editor canvas parity ---------------------------------- */
.editor-styles-wrapper .nav { position: relative; }
.editor-styles-wrapper .hero { min-height: 640px; }
.editor-styles-wrapper .wp-block-navigation__responsive-container-open { display: none; }

/* --- Motion preference ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   3. PATTERN BRIDGE
   Block wrappers mapped onto the parity classes. Added last so
   it wins over core layout defaults without !important.
   ============================================================ */

/* Grid/flex parents own their own gaps — kill core's block margins. */
.stats > *, .grid-3 > *, .grid-4 > *, .logo-cloud > *,
.who > *, .stories > *, .faq > *, .section-head > *,
.hero__actions > *, .who__actions > *, .footer__top > * { margin-block: 0; }
.stat > *, .do-card > *, .value-card > *, .sol-card__body > *,
.copy > *, .stories__quote > *, .why__col > * { margin-block: 0; }

/* …except the lede, which the design spaces itself. Zeroing block margins on
   every child of .copy was aimed at WordPress's 24px block gap, but it also
   flattened `.lede { margin: 16px 0 0 }`, so the sub-heading sat hard against
   the headline instead of a line clear of it. */
:root .copy > .lede,
:root .section-head > .lede { margin-block: 16px 0; }

/* Empty tick rule survives WP's group reset. */
.wp-block-group.tick { width: 24px; height: 2px; background: var(--blue); border-radius: 2px; margin: 12px 0 18px; }
.section-head--center .wp-block-group.tick { margin-inline: auto; }

/* Section container: WP alignfull + root padding reproduces .container.
   Wrapped in :where() so it carries zero specificity. Without it the selector
   scores (0,2,0) and silently beats every narrower inner container defined
   earlier in this file as a plain class — .contact (640), .why__inner (640),
   .ctp-form-wrap (720) all rendered at the full 1216. In the prototype
   .container is a bare class, so the later, narrower rule wins; :where()
   restores that cascade order. */
:where(.wp-block-group.container) {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wp-site-blocks .wp-block-group.container { box-sizing: border-box; }

/* Full-bleed background images inside hero-style sections. */
.wp-block-image.hero__bg,
.wp-block-image.why__bg,
.wp-block-image.page-hero__bg { margin: 0; border-radius: 0; }
.wp-block-image.dhero__bg { margin: 0; border-radius: 0; }
.hero__bg img, .why__bg img, .page-hero__bg img, .dhero__bg img { width: 100%; height: 100%; object-fit: cover; }

/* Media blocks that stand in for .ph placeholder wells. */
.wp-block-image.ph { margin: 0; overflow: hidden; }
.wp-block-image.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Placeholders that sit above copy keep the gap the design gives them. Zeroing
   the margin on every .ph figure was aimed at the ones that fill a box on their
   own; where a figure is followed by a heading, it took the separation with it
   and the title ended up hard against the photo. */
.wp-block-image.pillar-card__media { margin: 0 0 22px; }
.wp-block-image.who__media, .wp-block-image.stories__media { margin: 0; }
.wp-block-image.sol-card__media { margin: 0; border-radius: 0; }
.wp-block-image.sol-card__media img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-image.carousel__media { margin: 0; border-radius: 0; }
.wp-block-image.featshow__media { margin: 0; border-radius: 0; }

/* Icon tiles hold an SVG file rather than an inline glyph. */
.wp-block-image.icon-tile { margin: 0; border-radius: 13px; }
.icon-tile img { width: 22px; height: 22px; }
.value-card .icon-tile img { width: 20px; height: 20px; }

/* Logo wall. */
.wp-block-image.logo-cloud__img { margin: 0; }
.logo-cloud__img img { object-fit: contain; }

/* Stat counter block output. */
.stat .stat__value { margin: 0; }

/* FAQ built on core/details, styled to the +/- design. */
.faq__list .wp-block-details { border-bottom: 1px solid var(--line); }
.faq__list .wp-block-details summary {
  list-style: none;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: none;
  padding: 20px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--fg1);
  transition: color var(--ease) .15s;
}
.faq__list .wp-block-details summary::-webkit-details-marker,
.faq__list .wp-block-details summary::marker { display: none; content: ""; }
.faq__list .wp-block-details summary:hover,
.faq__list .wp-block-details[open] summary { color: var(--blue); }
.faq__list .wp-block-details summary::after {
  content: "";
  flex-shrink: 0;
  width: 22px; height: 22px;
  position: relative;
  background:
    linear-gradient(currentColor, currentColor) center/12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center/2px 12px no-repeat;
  transition: transform var(--ease) .2s;
}
.faq__list .wp-block-details[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center/12px 2px no-repeat;
}
.faq__list .wp-block-details > :not(summary) {
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg2);
  margin: 0 0 20px;
  padding-right: 42px;
  max-width: 60ch;
}

/* ---- Troubleshooting accordion, built on core/details ------------
   The design draws each row as a button with a circular chevron that turns
   blue when the row is open — markup this theme cannot produce, because
   core/details gives you a <summary> and nothing inside it to hang an icon on.
   So the icon is two pseudo-elements: ::before is the disc, ::after is the
   chevron, masked so a single shape can be recoloured for both states. Left as
   core/details rather than a custom block deliberately — the client adds and
   edits questions with the block they already know, and it still opens with
   JavaScript off. */
.faq-list .faq-item > summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  display: block;
  padding: 22px 58px 22px 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: var(--fg1);
  transition: color var(--ease) .15s;
}
.faq-list .faq-item > summary::-webkit-details-marker,
.faq-list .faq-item > summary::marker { display: none; content: ""; }
.faq-list .faq-item > summary:hover { color: var(--blue); }

.faq-list .faq-item > summary::before,
.faq-list .faq-item > summary::after,
.ctp-acc > summary::before,
.ctp-acc > summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
}
.faq-list .faq-item > summary::before,
.ctp-acc > summary::before {
  border-radius: 50%;
  background: var(--img-gray);
  transition: background var(--ease) .2s;
}
.faq-list .faq-item > summary::after,
.ctp-acc > summary::after {
  background-color: var(--fg1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
  transition: background-color var(--ease) .2s, transform var(--ease) .26s;
}
.faq-list .faq-item[open] > summary::before,
.ctp-acc[open] > summary::before { background: var(--blue); }
.faq-list .faq-item[open] > summary::after,
.ctp-acc[open] > summary::after {
  background-color: #fff;
  transform: translateY(-50%) rotate(180deg);
}

.faq-list .faq-item > :not(summary) {
  font-size: 15px;
  line-height: 1.62;
  color: var(--fg2);
  margin: 0 0 22px;
  padding-right: 58px;
  padding-left: 4px;
  max-width: 78ch;
}

/* Contact band, dark section and bone section paddings sit on .section. */
.wp-block-group.section, .wp-block-group.dark-section { padding-block: var(--section-y); }
.wp-block-group.dark-section { background: var(--black); color: #fff; }

/* ============================================================
   4. PLUGIN BLOCK BRIDGE (ifourni-core)
   ============================================================ */

/* Honeypot — visually gone, still reachable by nothing but bots. */
.ifn-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Form notices. */
.contact__notice { border-radius: var(--r-md); padding: 14px 18px; font-size: 14px; margin: 0 0 20px; }
.contact__notice--ok { background: rgba(6,121,117,.08); color: var(--teal, #067975); }
.contact__notice--error { background: rgba(216,96,24,.08); color: var(--orange, #D86018); }

/* The form block wrapper must not break the grid the form lives in. */
.contact .wp-block-ifourni-contact-form { display: contents; }

/* Language switcher works without JS via focus-within. */
.lang__menu[hidden] { display: none; }
.lang:focus-within .lang__menu[hidden] { display: block; }

/* Carousel block wrapper keeps the source geometry. */
.wp-block-ifourni-carousel.carousel { position: relative; margin-top: 56px; border-radius: var(--r-lg); overflow: hidden; }
.wp-block-ifourni-carousel:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.stories-carousel {
  position: relative;
  /* Without this the flex track lays every slide out side by side and the
     document grows to slide-count x viewport wide, giving the whole site a
     horizontal scrollbar. The other two carousel variations already clip. */
  overflow: hidden;
}
.stories-carousel .carousel__track { display: flex; transition: transform 600ms var(--ease); }
.stories-carousel .carousel__slide { flex: 0 0 100%; }
.stories-carousel .stories__count { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--fg3); margin-right: auto; }

/* Story portrait. In the design this is an empty placeholder div, so the row
   height comes from the quote (min 420px) and the picture simply fills it. A
   real <img> has intrinsic height, so instead the tallest photo drove the row
   — one portrait 1024x1536 shot stretched its slide to 822px, and because the
   flex track equalises slide heights every other slide gained 400px of dead
   space below it. Taking the image out of flow restores the design's
   behaviour: the box is sized by the row, the photo fills and crops to it. */
.stories__media { position: relative; overflow: hidden; }
.stories__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Same defect in the mega menu's feature card: the design's placeholder is an
   empty box with aspect-ratio 1/.78, so a real photo has to be told to fill it
   or it sits at its own height inside the frame with 79px of white below. */
.mega__feature-media { overflow: hidden; }
.mega__feature-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Editor-only carousel preview: slides stack, no transform. */
.ifn-carousel-editor__hint {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg3); margin: 0 0 16px;
}
.ifn-carousel-editor__slides { display: grid; gap: 16px; }

/* Mega menu: the block renders the panel; the trigger is a normal menu link. */
.wp-block-ifourni-mega-nav.mega { position: absolute; top: 76px; left: 0; right: 0; }
.editor-styles-wrapper .ifn-meganav-editor {
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg3);
}


/* --- Logged-in admin bar ------------------------------------
   The nav is position:fixed at top:0, which puts it behind the admin bar for
   anyone signed in. Visitors never see this; editors otherwise think the
   header is broken. */
.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .nav { top: 46px; }
}

/* Anything that sticks below the header has to clear the header *and* the
   admin bar pushing it down, or it slides under the nav on scroll — visible
   only to signed-in editors, which is exactly who reviews the page. One
   variable so every sticky element stays in step with the nav. */
:root { --sticky-top: 76px; }
.admin-bar { --sticky-top: 108px; }
@media screen and (max-width: 782px) {
  .admin-bar { --sticky-top: 122px; }
}


/* ============================================================
   9. BLOCK MARKUP ↔ STYLESHEET BRIDGE

   The block templates and this stylesheet were authored separately, and they
   disagree on names for the same components: the markup asks for
   `.news-card__title`, the stylesheet defines `.ncard__body h3`. Nothing
   errors — the section just renders unstyled, which is what "the layout looks
   wrong" actually is when you see it in a browser.

   Aliasing here rather than renaming in the markup is deliberate: block HTML
   must byte-match its save() output or the editor flags every block as
   invalid, so the safe place to reconcile is CSS.
   ============================================================ */

/* ---- News / blog cards -> .ncard ------------------------------ */
.news-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.news-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; margin: 0; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.news-card__date {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--fg3); margin: 0 0 12px;
}
.news-card__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; line-height: 1.25; letter-spacing: -.01em;
  margin: 0 0 8px; color: var(--fg1);
}
.news-card__title a { color: inherit; text-decoration: none; }
.news-card__title a:hover { color: var(--blue); }
.news-card__excerpt {
  font-size: 14px; line-height: 1.55; color: var(--fg2); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- Product cards: markup says __title/__meta, CSS said __name/__cat ---- */
.prod-card__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; line-height: 1.3; letter-spacing: -.01em; margin: 0;
}
.prod-card__title a { color: inherit; text-decoration: none; }
.prod-card__title a:hover { color: var(--blue); }
.prod-card__meta {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg3); margin: 0;
}
.prod-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---- Query pagination -> .pagination ---------------------------- */
.pager {
  display: flex; justify-content: center; align-items: center;
  gap: 10px; margin-top: 48px; flex-wrap: wrap;
}
.pager a, .pager span {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff;
  font-size: 14px; color: var(--fg2); text-decoration: none;
  display: grid; place-items: center;
  transition: background var(--ease) .15s, color var(--ease) .15s, border-color var(--ease) .15s;
}
.pager a:hover { background: var(--bone); }
.pager .current { background: var(--black); color: #fff; border-color: var(--black); }
.pager .wp-block-query-pagination-previous,
.pager .wp-block-query-pagination-next { width: auto; border-radius: 999px; padding: 0 16px; }

/* ---- Distributor pillars -> .pillar ----------------------------- */
.pillar-card__media { aspect-ratio: 3 / 2.4; border-radius: var(--r-lg); margin: 0 0 22px; overflow: hidden; }
.pillar-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pillar-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; margin: 0 0 10px; }
.pillar-card p { font-size: 14.5px; line-height: 1.65; color: var(--fg2); margin: 0; }

/* ---- Single post ------------------------------------------------ */

/* ---- Product detail --------------------------------------------- */
.pdp-top { padding-top: 40px; }
.pdp__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.06; letter-spacing: -.02em;
  margin: 0 0 16px;
}

/* ---- Wrappers the markup adds that the stylesheet never knew about ---- */
/* Matches the design's own .svc-row__sub — small, uppercase, grey — rather
   than the bold heading the first pass guessed at. */
.svc-row__subhead {
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg3); margin: 26px 0 14px;
}
/* The design ticks each item with a blue SVG. core/list-item cannot carry one
   per item, so for these two lists the tick is drawn in CSS instead — same
   mark, same colour. .apply__list is deliberately NOT in here: that list comes
   from the apply-form block, which prints a real SVG tick per item, so adding
   a CSS one on top gave every benefit two ticks side by side. */
.svc-row__list, .feat-row__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.svc-row__list li, .feat-row__list li {
  position: relative; padding-left: 30px;
  font-size: 14.5px; line-height: 1.6; color: var(--fg2);
}
.svc-row__list li::before, .feat-row__list li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 17px; height: 9px;
  border-left: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue);
  transform: rotate(-45deg);
}
.svc-row__list li::marker, .feat-row__list li::marker { content: ""; }
.svc-row__body { display: flex; flex-direction: column; gap: 6px; }
.ctp-intro__info { display: flex; flex-direction: column; gap: 14px; }

/* Contact intro photo. The design's is an empty box with min-height 520 that
   stretches to whatever the details column needs; a real photo has to be told
   to fill it or it sits at its own height and the band goes half-empty. */
.ctp-intro__media { min-height: 520px; position: relative; overflow: hidden; border-radius: var(--r-lg); }
.ctp-intro__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Contact details and social row, built from image blocks so the client can
   swap an icon or a link without touching markup. The design draws these with
   inline SVG that inherits currentColor; an <img> cannot, so the dark band uses
   the white icon files in assets/icons/*-light.svg. */
.wp-block-image.ctp-detail__icon, .wp-block-image.ctp-social__btn { margin: 0; }
.ctp-detail__icon img { width: 19px; height: 19px; }
.ctp-detail__body { flex: 1; min-width: 0; }
.ctp-detail .ctp-detail__title { margin: 0; font-size: 16px; color: inherit; }
.ctp-social__btn { overflow: hidden; }
.ctp-social__btn a { display: grid; place-items: center; width: 100%; height: 100%; }
.ctp-social__btn img { width: 19px; height: 19px; }
.featshow__top { display: flex; flex-direction: column; gap: 10px; }
.distributors { background: var(--bone); }

/* ---- Navigation: core's underline vs the design's blue bar ------- */
/* WordPress core underlines navigation links on hover. The design uses the
   2px blue bar in `.nav__links a::after` instead, so core's rule has to go or
   you get a black underline that belongs to no design. */
.nav__links a,
.nav__links a:hover,
.nav__links a:focus,
.nav__links .wp-block-navigation-item__content,
.nav__links .wp-block-navigation-item__content:hover,
.nav__links .wp-block-navigation-item__content:focus { text-decoration: none; }

/* ---- Product-support search band -------------------------------- */
.ressearch { text-align: center; }
.ressearch__inner { max-width: 720px; }
.ressearch__eyebrow { justify-content: center; }
.ressearch__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(26px, 3.2vw, 36px); line-height: 1.12; letter-spacing: -.02em;
  color: var(--blue); margin: 0 0 14px;
}
.ressearch__lede { font-size: 16px; line-height: 1.6; color: var(--fg2); margin: 0 auto 28px; max-width: 46ch; }
.ressearch__form { position: relative; display: block; }
.ressearch__icon {
  position: absolute; left: 22px; top: 22px;
  width: 20px; height: 20px; color: var(--fg3); pointer-events: none;
}
.ressearch__icon svg { width: 100%; height: 100%; }
.ressearch__input {
  width: 100%; box-sizing: border-box;
  padding: 18px 24px 18px 56px;
  font-family: inherit; font-size: 15px; color: var(--fg1);
  background: #fff;
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--ease) .15s, box-shadow var(--ease) .15s;
}
.ressearch__input::placeholder { color: var(--fg3); }
.ressearch__input:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(12,137,198,.12);
}
.ressearch__count { font-size: 13px; color: var(--fg3); margin: 14px 0 0; min-height: 1em; }

/* ============================================================
   10. ABOUT PAGE — sections rebuilt as blocks

   The prototype held its photography in a custom <image-slot> element that
   sizes itself. Blocks use core/image inside the same `.ph` frames, so each
   one needs telling to fill its frame the way image-slot did.
   ============================================================ */
.cert-card__img,
.mv-row__img,
.feat-row__img,
.event-card__img,
.bento-card__img,
.ctp-banner__img { margin: 0; height: 100%; }
.cert-card__img img,
.mv-row__img img,
.feat-row__img img,
.event-card__img img,
.ctp-banner__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cert-card__img img,
.bento-card__img img { object-fit: contain; }
.bento-card__img img { width: 100%; height: 100%; display: block; }

/* The reach section. The prototype drew a world map from a topojson file
   fetched off a CDN at runtime — a network dependency that would fail behind
   the Great Firewall and cost a round trip everywhere else. The markets are
   listed instead: same information, no fetch, and every name is editable. */
.reach-list {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin: 40px 0 0;
}
.reach-market {
  margin: 0; padding: 9px 18px;
  font-size: 14px; color: var(--fg2);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  transition: border-color var(--ease) .15s, color var(--ease) .15s;
}
.reach-market:hover { border-color: var(--blue); color: var(--blue); }
.reach-cta { display: flex; justify-content: center; margin-top: 32px; }

/* ---- Distributors: sections rebuilt as blocks -------------------- */
.slideshow-full__img { margin: 0; height: 100%; }
.slideshow-full__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why-cta { display: flex; justify-content: center; margin-top: 32px; }

/* The application form's copy column. The prototype styles `.apply` as the
   two-column grid and `.apply__card` as the form panel, but never gave the
   left column a rule of its own. */
.apply__copy { display: flex; flex-direction: column; align-items: flex-start; }
.apply__notice {
  margin: 0 0 20px; padding: 14px 18px; border-radius: var(--r-md, 12px);
  font-size: 14px; line-height: 1.5;
}
.apply__notice--ok { background: #EAF7EF; color: #14663A; border: 1px solid #BFE5CF; }
.apply__notice--error { background: #FDECEC; color: #8C1D1D; border: 1px solid #F3C7C7; }

/* Honeypot — present for bots, never shown to or focusable by a person. */
.ifn-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Resources, Contact, News: sections rebuilt as blocks -------- */
.featured-tut__img { margin: 0; height: 100%; }
.featured-tut__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-tut__body { display: flex; flex-direction: column; align-items: flex-start; }

/* The play badge is a block group here rather than the design's bare <div>, so
   the image inside it needs sizing and the wrapper needs to stop being a
   layout container. Without it the thumbnail does not read as a video at all. */
.featured-tut__play { margin: 0; }
.featured-tut__play-icon { margin: 0; line-height: 0; }
.featured-tut__play-icon img { width: 26px; height: 26px; display: block; margin-left: 3px; }
.ctp-faq__title { text-align: center; margin-bottom: 36px; }
.news-cta__notice { color: var(--blue); font-weight: 600; margin: 12px 0 0; }

/* ============================================================
   11. FOOTER LAYOUT — reclaiming the grid from the columns block

   The footer is built from core/columns, which WordPress tags `is-layout-flex`
   and styles with a generated class of the same specificity as `.footer__top`.
   Those layout rules are printed inline in <head>, after this stylesheet, so
   on a tie they win — and the design's five-column grid silently became a flex
   row with the wrong proportions. Everything else about the footer was
   correct, which is exactly why it looked "wrong" without looking broken.

   Raising specificity to .footer .wp-block-columns.footer__top puts the design
   back in charge, at every breakpoint.
   ============================================================ */
.footer .wp-block-columns.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  align-items: start;
}
.footer .wp-block-columns.footer__top > .wp-block-column {
  flex-basis: auto !important;
  min-width: 0;
}

@media (max-width: 960px) {
  .footer .wp-block-columns.footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .footer .wp-block-columns.footer__top { grid-template-columns: 1fr; }
}

/* ============================================================
   12. CORE-BLOCK COMPATIBILITY

   Two structural mismatches between the design's CSS and what the block
   editor actually emits. Both were producing symptoms all over the site.
   ============================================================ */

/* ---- Buttons: the double-layer problem --------------------------
   core/button puts a custom className on the WRAPPER div, never on the <a>
   inside it. So `.btn .btn--primary` painted a blue pill on the wrapper while
   `.wp-block-button__link` painted a second blue pill inside it — two borders,
   two radii, two paddings. That is the "double layer / outline" seen on every
   button on the site.

   The wrapper keeps the design's colour and shape; the inner link is stripped
   back to nothing and given the padding, so the whole pill stays clickable. */
.wp-block-button.btn { padding: 0; overflow: hidden; }

.wp-block-button.btn > .wp-block-button__link {
  background: none;
  border: 0;
  border-radius: inherit;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  padding: 11px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.wp-block-button.btn > .wp-block-button__link:hover,
.wp-block-button.btn > .wp-block-button__link:focus { background: none; color: inherit; }

/* Variants that change padding have to pass that through too. */
.wp-block-button.btn--outline-blue > .wp-block-button__link { padding: 8px 16px; font-size: 12px; }

/* A row of buttons should not inherit the block gap twice. */
.wp-block-buttons { gap: 14px; }

/* ---- Navigation: the transparent header ------------------------
   core/navigation renders each item as `a.wp-block-navigation-item__content`
   and colours it from theme.json, which outranks `.nav__links a`. Over the
   hero the links were rendering near-black on a dark photo. */
.nav .wp-block-navigation-item__content { color: rgba(255,255,255,.86); }
.nav .wp-block-navigation-item__content:hover,
.nav .wp-block-navigation-item__content:focus { color: #fff; }

/* Once the bar turns solid — on scroll, and on every non-hero page — the
   links go back to ink on white. */
.nav.scrolled .wp-block-navigation-item__content { color: var(--fg2); }
.nav.scrolled .wp-block-navigation-item__content:hover,
.nav.scrolled .wp-block-navigation-item__content:focus { color: var(--fg1); }

/* Opening the mega menu makes the bar solid, exactly as it does on scroll,
   with the trigger held in blue. */
.nav.mega-open {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}
.nav.mega-open .wp-block-navigation-item__content { color: var(--fg2); }
.nav.mega-open .wp-block-navigation-item__content:hover { color: var(--fg1); }
.nav.mega-open .nav__links a.has-mega,
.nav.mega-open .wp-block-navigation-item__content.has-mega { color: var(--blue); }

/* ---- Navigation colour, one specificity step above core ----------
   WordPress prints its own navigation link colour as

     .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content

   — the class repeated on purpose, which scores three classes. Every rule
   above scores two, so core won and the value it sets is `inherit`: the links
   took the body's ink colour and rendered near-black over the hero photo on
   the home page. Repeating the class here too, under `.nav__links`, puts these
   one step clear. Anything that has to beat the transparent state carries the
   state class as well, so the order below is deliberate. */
.nav .nav__links .wp-block-navigation-item__content.wp-block-navigation-item__content { color: rgba(255,255,255,.86); }
.nav .nav__links .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.nav .nav__links .wp-block-navigation-item__content.wp-block-navigation-item__content:focus { color: #fff; }

.nav.scrolled .nav__links .wp-block-navigation-item__content.wp-block-navigation-item__content,
.nav.mega-open .nav__links .wp-block-navigation-item__content.wp-block-navigation-item__content { color: var(--fg2); }
.nav.scrolled .nav__links .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.nav.scrolled .nav__links .wp-block-navigation-item__content.wp-block-navigation-item__content:focus,
.nav.mega-open .nav__links .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.nav.mega-open .nav__links .wp-block-navigation-item__content.wp-block-navigation-item__content:focus { color: var(--fg1); }

/* The open mega trigger and the current page stay blue in every state. */
.nav .nav__links .wp-block-navigation-item__content.wp-block-navigation-item__content.active,
.nav.scrolled .nav__links .wp-block-navigation-item__content.wp-block-navigation-item__content.active,
.nav.mega-open .nav__links .wp-block-navigation-item__content.wp-block-navigation-item__content.has-mega { color: var(--blue); }
.nav.mega-open .wp-block-site-logo img { filter: none; }
.nav.mega-open .lang__btn { color: var(--fg2); }

/* ---- Product tabs ------------------------------------------------ */
.ptabs__panel[hidden] { display: none; }
.ptabs__lede { font-size: 15px; line-height: 1.65; color: var(--fg2); margin: 24px 0 20px; max-width: 56ch; }
.ptabs__empty { font-size: 15px; color: var(--fg3); margin: 28px 0 0; }
.ptabs__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.ptabs__cta .btn svg { width: 17px; height: 17px; }
.pdp__actions { margin-top: 22px; }

/* ---- Page heroes: fill the viewport width -----------------------
   The hero is an alignfull section, but its background image sits in a
   core/image whose figure defaults to the content width. Pinning it to the
   section makes the photo fill the band the way the design intends. */
.page-hero { position: relative; overflow: hidden; }
.page-hero__bg { position: absolute; inset: 0; margin: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The hero's dark scrim is a ::after at z-index 1. Giving the container the
   same value is not a tie the content wins: a pseudo-element paints after its
   siblings' content, so the scrim ends up over the headline and the buttons
   rather than over the photograph. */
.page-hero > .container,
.page-hero .container { position: relative; z-index: 2; }

/* ============================================================
   13. DISTRIBUTORS / NETWORK — layout corrections
   ============================================================ */

/* Logo wall. The design sizes the <img> to 56% of its grid cell and 44px tall,
   which is what keeps ten logos of different proportions reading as one row.
   In blocks the image sits inside a figure, and a figure shrink-wraps its
   contents — so "56%" resolved against the image's own width, which is
   circular. The figure has to become the cell before the percentage means
   anything; the caps then live on the <img> exactly as in the design. */
.logo-cloud__item .logo-cloud__img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-cloud__img img { max-width: 56%; max-height: 44px; width: auto; height: auto; object-fit: contain; }

/* "Inside IFOURNI" pillars sat flush against the section below them. */
.pillars { margin-bottom: 12px; }
.pillar-card { display: flex; flex-direction: column; }
.pillar-card p:last-child { margin-bottom: 0; }
.pillars + *, .section .pillars { margin-top: 8px; }

/* Partnership process: the number column and the copy were sitting on
   different baselines because the block wrapper added its own margins. */
.steplist__row > * { margin-block: 0; }
.steplist__num { line-height: 1; padding-top: 2px; }
.steplist__body > :first-child { margin-top: 0; }
.steplist__body > :last-child { margin-bottom: 0; }

/* A blue CTA band is the last thing on its page, so it should sit flush
   against the footer rather than leaving a gap. */
.cta-blue { margin-bottom: 0; }
.cta-blue + .wp-block-template-part,
.cta-blue:last-child { margin-block-end: 0; }
.help-band__copy > :first-child { margin-top: 0; }
.help-band__copy > :last-child { margin-bottom: 0; }
.help-band__actions .wp-block-buttons { margin: 0; }

/* ============================================================
   14. OUR SOLUTIONS — category cards
   ============================================================ */

/* The card image sat inside its frame instead of filling it: the frame carries
   the 16/10 ratio, but the block's <figure> and <img> default to intrinsic
   size, so the picture floated in a grey box. */
.cat-card__media { overflow: hidden; }
.cat-card__media .wp-block-image { margin: 0; height: 100%; }
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Body content aligns to a single column with the link pinned to the bottom,
   so cards of different copy length still line up along their base. */
.cat-card__body { display: flex; flex-direction: column; align-items: flex-start; }
.cat-card__body > * { margin-block: 0; }
.cat-card__desc { flex: 1; }
.cat-card__body .wp-block-buttons { margin-top: auto; padding-top: 4px; }

/* The count pill: black on white, matching the design. It was inheriting the
   product-card tag styling, which is a light chip. */
.cat-card .prod-card__tag {
  position: static;
  display: inline-flex;
  align-items: center;
  background: var(--black);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  margin: 0 0 4px;
}

/* The whole card is the target, not just the link at the bottom. The link keeps
   its own text for screen readers and keyboard users; the pseudo-element simply
   extends its hit area over the card. */
.cat-card { position: relative; }
.cat-card .wp-block-button__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cat-card__media,
.cat-card__body > :not(.wp-block-buttons) { position: relative; z-index: 0; }

/* ---- Icon tiles on cards ---------------------------------------
   The design draws these as inline SVG; blocks reference the theme's SVG files
   through an <img>, so the tile needs to size the image rather than a symbol. */
.proc-card__icon .wp-block-image,
.icon-tile .wp-block-image { margin: 0; line-height: 0; }
.proc-card__icon__img img { width: 18px; height: 18px; display: block; }
.icon-tile__img img { width: 22px; height: 22px; display: block; }
.value-card .icon-tile { margin-bottom: 14px; }

/* The card number was rendering grey at 13px instead of blue at 30px. The
   design's `.proc-card__num` is one class; `.proc-card p` — which sets the
   body copy — is a class plus an element, so it wins on specificity. In the
   prototype the number was a <div>, but core/paragraph can only emit a <p>,
   so the number rule has to name the element too. Same for the step list. */
.proc-card p.proc-card__num {
  font-family: var(--font-display); font-weight: 800; font-size: 30px;
  line-height: 1; color: var(--blue); letter-spacing: -.02em;
}
.steplist__row p.steplist__num {
  font-family: var(--font-display); font-weight: 800; font-size: 32px;
  line-height: 1; color: var(--blue); letter-spacing: -.02em;
}
.qc-step p.qc-step__num { color: var(--blue); }
.tl-h-item p.yr { color: var(--blue); }

/* ============================================================
   15. CONTACT PAGE
   ============================================================ */
.ctp-form__eyebrow { justify-content: center; }
.ctp-form__title { text-align: center; margin-bottom: 36px; }
.ctp-banner__img { margin: 0; height: 100%; }
.ctp-banner__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The FAQ accordion. The design draws each row as a button plus a panel;
   core/details gives a <summary> instead, so the summary has to take the
   button's styling and provide its own marker. */
/* Carries the same circular chevron as the troubleshooting accordion — the
   disc and mask are shared with it further up, so the two stay identical. Only
   the type scale differs, which is the design's own: contact questions are set
   a little smaller than troubleshooting ones. */
.ctp-faq__list { border-top: 1px solid var(--line); }

/* One rule draws each divider. The design gives .ctp-acc a border-top and the
   last row a border-bottom; this build closes the list with a border on the
   container instead, so the row's own top border has to go — with both, every
   boundary between two rows was drawn twice. */
.ctp-acc { border-top: 0; border-bottom: 1px solid var(--line); }
.ctp-acc > summary {
  position: relative;
  list-style: none; cursor: pointer;
  display: block;
  padding: 22px 58px 22px 0;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  letter-spacing: -.01em; line-height: 1.35; color: var(--fg1);
  transition: color var(--ease) .15s;
}
.ctp-acc > summary::-webkit-details-marker,
.ctp-acc > summary::marker { display: none; content: ""; }
.ctp-acc > summary:hover { color: var(--blue); }
.ctp-acc > summary::before,
.ctp-acc > summary::after { right: 0; }
.ctp-acc > p { margin: 0 0 22px; font-size: 14.5px; line-height: 1.7; color: var(--fg2); max-width: 68ch; padding-right: 58px; }

/* ============================================================
   16. NEWS INDEX
   ============================================================ */
/* The bar itself is the full-bleed sticky band; its contents belong in the
   same column as everything else on the page. Without the inner container the
   chips ran to the left edge of the screen and the search field to the right,
   which is what made it read as broken. */
.news-toolbar {
  display: block;
  margin: 40px 0;
}
.news-toolbar__inner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.news-tab { text-decoration: none; display: inline-flex; align-items: center; }
.news-tab.active { color: #fff; }
.news-toolbar.is-loading { opacity: .6; }
.wp-block-query[aria-busy="true"] { opacity: .45; transition: opacity .15s; }

/* The featured block and the grid below it are separate queries, so their
   containers need the same rhythm or the two halves read as unrelated. */
.featured { margin-bottom: 56px; }

/* The design drops each card straight into its grid cell. The editor wraps it
   in query > post-template > post first, and every one of those defaults to
   content height — which is why the tall card stopped 100px short of the three
   stacked beside it. The height has to be passed down the chain by hand. */
.featured > .wp-block-query,
.featured > .wp-block-query > .wp-block-post-template,
.featured > .wp-block-query > .wp-block-post-template > .wp-block-post,
.fcard-lg { height: 100%; }

/* Core's block gap puts a 24px margin-block-start on every sibling after the
   first. In a two-column grid that only pushes the right-hand column down and
   makes the row 24px taller than either card — the second selector beats the
   layout rule core prints later in <head>. */
.featured.container > * { margin-block: 0; }

/* Same wrappers on the other side, where "space-between" was being applied to
   a single child instead of to the three cards inside it. */
.featured__side { height: 100%; }
.featured__side > .wp-block-query { height: 100%; }
.featured__side .wp-block-post-template {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 20px; height: 100%; margin: 0;
}
.featured__side .wp-block-post { display: flex; flex: 1; }
.featured__side .fcard-sm { flex: 1; width: 100%; }

/* Featured images render as <figure><a><img>, and the img keeps its own
   proportions unless told otherwise — object-fit does nothing while the height
   is auto. That left a black band below the big photo and a grey one under
   each thumbnail, which is the "missing image" look rather than a real gap. */
.fcard-sm__media { margin: 0; }
.fcard-lg__bg,
.fcard-lg__bg a,
.fcard-lg__bg img,
.fcard-sm__media a,
.fcard-sm__media img { display: block; width: 100%; height: 100%; }
.fcard-lg__bg img,
.fcard-sm__media img { object-fit: cover; }

/* A hand-picked "Featured" article from another category, sitting directly
   above a grid the reader has just narrowed, contradicts the filter they set. */
.ifn-news-filtered .featured { display: none; }

/* Pagination sat left because the query block lays its children out in flow;
   the design centres it. */
.pager,
.wp-block-query-pagination.pager {
  display: flex; justify-content: center; align-items: center;
  gap: 10px; flex-wrap: wrap; margin-top: 48px;
}

/* Core wraps the page numbers in a plain block-level div, so the 40px circles
   below stacked vertically inside it however the pagination block itself was
   laid out. The row has to be flexed here, not on the parent. */
.pager .wp-block-query-pagination-numbers {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* Filtering makes an empty result a normal state rather than an edge case. */
.wp-block-query-no-results {
  text-align: center; color: var(--fg3); padding: 64px 0;
}
.wp-block-query-no-results p { margin: 0; font-size: 15px; }

/* The signup band is a full-bleed section in blocks but a contained card in
   the design, so it needs the container's gutters back. */
.news-cta { margin-inline: auto; max-width: var(--container, 1152px); }
@media (max-width: 900px) {
  .news-cta { grid-template-columns: 1fr; padding: 36px 28px; margin-inline: var(--gutter, 24px); }
}

/* ============================================================
   17. BLOCK GAP vs THE THEME'S OWN LAYOUTS

   WordPress prints this into <head>, after the stylesheet:

     :root :where(.is-layout-flow) > * { margin-block: 24px 0; }

   Every block left on the default layout carries .is-layout-flow, including
   the ones this stylesheet turns into a grid or a flex row. Those space their
   children with `gap`, so the inherited margin is a second, invisible gutter:
   it pushed the right-hand column of a two-column grid 24px below the left,
   dropped the second card of every news row, and shifted card bodies away
   from their thumbnails.

   The list is generated from the stylesheet — every container it lays out as
   a grid or a flex ROW and gives an explicit `gap`. Those children are cells,
   never prose, so a top margin on them can only ever be wrong.

   Flex COLUMNS are deliberately excluded even when they have a gap: their
   children are usually a heading, a paragraph and a list, and that margin is
   carrying the typographic rhythm. Removing it there closes the copy up.

   The `:root` prefix only exists to out-specify core's rule, which is printed
   later and would otherwise win the tie.
   ============================================================ */
:root .about-split > *,
:root .article-byline > *,
:root .article-byline__who > *,
:root .article-header__meta > *,
:root .article-share > *,
:root .bento > *,
:root .bento-card__links > *,
:root .bento__head > *,
:root .breadcrumb > *,
:root .cat-grid > *,
:root .cat-head__row > *,
:root .cert-grid > *,
:root .chips > *,
:root .contact-info__item > *,
:root .ctp-detail > *,
:root .ctp-detail__body > *,
:root .ctp-intro > *,
:root .ctp-social > *,
:root .dhero__foot > *,
:root .distributors__head > *,
:root .event-cta > *,
:root .event-rail > *,
:root .ctp-faq__list > *,
:root .faq > *,
:root .faq-list > *,
:root .fcard-sm > *,
:root .feat-row > *,
:root .featured > *,
:root .featured-tut > *,
:root .featured-tut__actions > *,
:root .filter-bar > *,
:root .footer__bottom > *,
:root .footer__top > *,
:root .grid-3 > *,
:root .grid-4 > *,
:root .guide-row > *,
:root .help-band > *,
:root .help-band__actions > *,
:root .hero__actions > *,
:root .lhero__actions > *,
:root .logo-cloud > *,
:root .mv-row > *,
:root .nav__inner > *,
:root .nav__links > *,
:root .nav__right > *,
:root .news-card__date > *,
:root .news-grid > *,
:root .pager > *,
:root .prod-card__actions > *,
:root .prod-card__foot > *,
:root .prod-grid > *,
:root .qc-flow > *,
:root .reach-list > *,
:root .res-card > *,
:root .section-head > *,
:root .sortform > *,
:root .stats > *,
:root .stats--center > *,
:root .steplist__row > *,
:root .stories > *,
:root .svc-row > *,
:root .timeline-h > *,
:root .toolbar__right > *,
:root .who > *,
:root .who__actions > *,
:root .workshop > * { margin-block: 0; }

/* The post-template inside the featured column is a block container this
   stylesheet flexes; its children are cards, so the same reasoning applies
   even though it is a column. */
:root .featured__side .wp-block-post-template > * { margin-block: 0; }