/* ==========================================================================
   PEGMA RESOURCES — site stylesheet
   Design system per Pegma_Website_Design_Build_Spec.docx
   Palette: ~90% white, ~8% ink/grey, ~2% red.
   ========================================================================== */

/* --- Fonts -----------------------------------------------------------------
   Paths here MUST be absolute. This stylesheet is inlined into every page at
   build time, so a relative url() would resolve against the page URL rather
   than against /assets/css/ — making the font 404 on every page except the
   root. That failure is near-invisible on macOS, where the fallback is
   Helvetica Neue. See the "no relative url()" check in audit.mjs.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Brand red, sampled from the supplied pegma logo. --red-dark is the same
     hue at lower lightness, for hover and pressed states. */
  --red: #ef402f;
  --red-dark: #cf2d1c;
  --red-rgb: 239, 64, 47;
  --ink: #1a1a1a;
  --body: #3d3d3d;
  --grey: #6b6b6b;
  --surface: #fff;
  --surface-alt: #f7f7f5;
  --border: #e5e5e5;

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --wrap: 1200px;
  --gutter: 24px;
  --section-y: 112px;
  --radius: 3px;
  --radius-glass: 10px;

  --header-h: 72px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 900px) {
  :root { --section-y: 72px; --gutter: 20px; --header-h: 64px; }
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 0.5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }
h4 { font-size: 1.06rem; letter-spacing: -0.01em; }
p { margin: 0 0 1.15em; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: 0.4em; }
strong { color: var(--ink); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--red); color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--red); color: #fff; padding: 12px 20px; font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

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

/* --- Layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 820px; }
main { display: block; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.section--alt { background: var(--surface-alt); }
.section--ink { background: var(--ink); color: #cfcfcf; }
.section--ink h2, .section--ink h3 { color: #fff; }

.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* --- Section heading block ------------------------------------------------ */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--red); margin: 0 0 14px;
}
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head p { color: var(--grey); font-size: 1.06rem; margin-bottom: 0; }
.section-head--center { margin-inline: auto; text-align: center; }
.lede { font-size: 1.16rem; line-height: 1.6; color: var(--body); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 600;
  padding: 14px 26px; border-radius: var(--radius); border: 1.5px solid transparent;
  cursor: pointer; transition: background 150ms var(--ease), color 150ms var(--ease),
    border-color 150ms var(--ease); text-align: center; line-height: 1.2;
}
.btn--primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn--primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--light { background: rgba(255,255,255,0.92); color: var(--ink); border-color: rgba(255,255,255,0.92); }
.btn--light:hover { background: #fff; color: var(--red); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--sm { padding: 10px 18px; font-size: 0.87rem; }
.btn--block { width: 100%; justify-content: center; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.tlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.95rem; color: var(--red);
}
.tlink::after { content: '→'; transition: transform 150ms var(--ease); }
.tlink:hover::after { transform: translateX(4px); }

/* --- Header --------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface); border-bottom: 1px solid transparent;
  transition: background 200ms var(--ease), border-color 200ms var(--ease),
    backdrop-filter 200ms var(--ease);
}
.header__inner {
  display: flex; align-items: center; gap: 28px;
  height: var(--header-h);
}
.header.is-stuck { border-bottom-color: var(--border); }

/* Home only: transparent over hero, frosted glass on scroll (glass spot #3) */
.header--over { position: fixed; left: 0; right: 0; background: transparent; }
.header--over .nav__link { color: #fff; }
.header--over .nav__toggle span { background: #fff; }
.header--over.is-stuck {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
.header--over.is-stuck .nav__link { color: var(--ink); }
.header--over.is-stuck .nav__toggle span { background: var(--ink); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header--over.is-stuck { background: rgba(255, 255, 255, 0.97); }
}

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* Never scaled beyond its intrinsic 108x96, so it stays sharp. */
.brand__mark { width: auto; height: 42px; }
.brand__tag {
  display: block; font-family: var(--font-body); font-size: 0.58rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--grey);
  font-weight: 600; line-height: 1.45;
}
.brand__dot { color: var(--red); }
.header--over .brand__tag { color: rgba(255, 255, 255, 0.78); }
.header--over.is-stuck .brand__tag { color: var(--grey); }
@media (max-width: 480px) {
  .brand__mark { height: 34px; }
  .brand__tag { display: none; }
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__list > li { margin: 0; position: relative; }
.nav__link {
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 9px 13px; font-size: 0.92rem; font-weight: 500; color: var(--body);
  border-radius: var(--radius); transition: color 150ms var(--ease);
  background: none; border: 0; font-family: inherit; cursor: pointer;
}
.nav__link:hover { color: var(--red); }
.nav__link[aria-current='page'], .nav__link.is-active { color: var(--red); font-weight: 600; }
.nav__caret { width: 9px; height: 9px; flex-shrink: 0; transition: transform 150ms var(--ease); }
.nav__link[aria-expanded='true'] .nav__caret { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  min-width: 268px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px; list-style: none; margin: 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 150ms var(--ease), visibility 150ms var(--ease);
}
.nav__item.is-open > .nav__panel { opacity: 1; visibility: visible; pointer-events: auto; }
.nav__panel li { margin: 0; }
.nav__panel a {
  display: block; padding: 9px 13px; font-size: 0.9rem; color: var(--body);
  border-radius: 2px; border-left: 2px solid transparent;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
.nav__panel a:hover { background: var(--surface-alt); color: var(--red); border-left-color: var(--red); }
.nav__panel a[aria-current='page'] { color: var(--red); border-left-color: var(--red); font-weight: 600; }

.header .btn { flex-shrink: 0; margin-left: 10px; }
.nav__toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 9px; margin-left: auto;
  background: none; border: 0; cursor: pointer;
}
.nav__toggle span {
  display: block; height: 2px; width: 100%; background: var(--ink);
  transition: transform 200ms var(--ease), opacity 150ms var(--ease);
}
.nav__toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1120px) {
  .nav__toggle { display: flex; }
  .header .btn--quote { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 auto; width: min(400px, 100%);
    background: #fff; border-left: 1px solid var(--border); margin: 0;
    padding: 22px var(--gutter) 48px; overflow-y: auto;
    transform: translateX(100%); transition: transform 240ms var(--ease);
    visibility: hidden;
  }
  .nav.is-open { transform: none; visibility: visible; box-shadow: -8px 0 40px rgba(0,0,0,0.12); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    width: 100%; justify-content: space-between; padding: 14px 4px;
    font-size: 1rem; border-bottom: 1px solid var(--border); border-radius: 0;
    color: var(--body);
  }
  .header--over .nav__link { color: var(--body); }
  .nav__panel {
    position: static; transform: none; opacity: 1; visibility: visible;
    pointer-events: auto; border: 0; box-shadow: none; padding: 4px 0 12px 14px;
    display: none; min-width: 0; background: transparent;
  }
  .nav__item.is-open > .nav__panel { display: block; }
  .nav__mobile-cta { display: block; margin-top: 26px; }
}
@media (min-width: 1121px) { .nav__mobile-cta { display: none; } }

/* --- Hero (glass spot #1 + #2) -------------------------------------------- */
.hero {
  position: relative; display: flex; align-items: center;
  min-height: min(88vh, 780px); padding-top: calc(var(--header-h) + 72px);
  padding-bottom: 132px; overflow: hidden; background: #14171a;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
/* Darkens the top strip so the white nav stays legible, and stays light
   through the middle so the frosted hero panel reads as glass, not grey. */
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,15,19,0.58) 0%, rgba(12,15,19,0.16) 24%,
    rgba(12,15,19,0.10) 62%, rgba(12,15,19,0.30) 100%);
}
.hero .wrap { position: relative; z-index: 1; }

.glass {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-glass);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
  color: var(--ink);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, 0.93); }
}

/* Widened and centred (rather than left-anchored) for a symmetrical
   composition, per Pegma_Home_Change_Review: "Make this glass effect
   symmetrical and longer". */
.hero__panel { max-width: 920px; margin-inline: auto; padding: 52px 56px 48px; }
.hero__panel h1 { margin-bottom: 20px; font-weight: 800; }
.hero__panel h1 em { font-style: normal; color: var(--red); }
.hero__panel p { color: var(--body); font-size: 1.1rem; margin-bottom: 30px; max-width: 60ch; }
@media (max-width: 640px) {
  .hero__panel { padding: 30px 24px 28px; }
  .hero { padding-bottom: 150px; }
}

/* Certification trust chips overlapping hero bottom edge (glass spot #2) */
.trust {
  position: relative; z-index: 2; margin-top: -76px; margin-bottom: 0;
}
.trust__inner { padding: 24px 30px; text-align: center; }
.trust__label {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--grey); margin: 0 0 16px;
}
.trust__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.trust__chips li { margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 0.83rem; font-weight: 600; color: var(--ink); white-space: nowrap;
  transition: border-color 150ms var(--ease), color 150ms var(--ease);
}
a.chip:hover { border-color: var(--red); color: var(--red); }
/* Certification logo chips (certstrip + home trust strip) — the mark
   replaces the old dot + name, per Pegma_Home_Change_Review "Replace the
   text chips with the actual certification logos". */
.chip--logo { padding: 8px 14px; }
.chip--logo img { display: block; height: 46px; width: auto; }

/* --- Pattern A: numbered feature rows ------------------------------------- */
.pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: 44px; }
.pillars--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pillars--3 { grid-template-columns: 1fr; gap: 34px; } }
.pillar { margin: 0; padding-top: 22px; border-top: 2px solid var(--border); }
.pillar__num {
  display: block; font-family: var(--font-display); font-size: 0.95rem;
  font-weight: 700; color: var(--red); letter-spacing: 0.06em; margin-bottom: 14px;
}
.pillar :is(h2, h3) { margin-bottom: 10px; }
.pillar p { color: var(--body); margin-bottom: 0; font-size: 0.98rem; }

/* --- Pattern B: photo/text split ------------------------------------------ */
.split {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 64px;
  align-items: center; margin-bottom: 88px;
}
.split:last-child { margin-bottom: 0; }
.split--flip .split__media { order: 2; }
.split__body :is(h2, h3) { margin-bottom: 14px; }
.split__body p { color: var(--body); }
.split__meta {
  list-style: none; padding: 0; margin: 0 0 20px;
  font-size: 0.87rem; color: var(--grey);
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 28px; margin-bottom: 56px; }
  .split--flip .split__media { order: 0; }
}

/* --- Cards ---------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px 28px; position: relative;
  transition: border-color 150ms var(--ease), transform 150ms var(--ease);
}
.card::before {
  content: ''; position: absolute; inset: -1px -1px auto -1px; height: 3px;
  background: var(--red); opacity: 0; transition: opacity 150ms var(--ease);
  border-radius: var(--radius) var(--radius) 0 0;
}
a.card:hover, .card--link:hover { border-color: #d5d5d5; transform: translateY(-2px); }
a.card:hover::before, .card--link:hover::before { opacity: 1; }
.section--alt .card { background: #fff; }
.card :is(h2, h3) { margin-bottom: 9px; font-size: 1.16rem; }
.card p { color: var(--body); font-size: 0.95rem; margin-bottom: 0; }
.card__num {
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 700;
  color: var(--red); letter-spacing: 0.08em; margin-bottom: 14px; display: block;
}
.card__icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
  background: var(--surface-alt); color: var(--ink); margin-bottom: 16px;
}
.card__foot { margin-top: auto; padding-top: 20px; }
.card__media { margin: -30px -28px 24px; border-bottom: 1px solid var(--border); }
.card--pad-sm { padding: 24px 22px; }

/* --- Photography -----------------------------------------------------------
   Every landscape source is 3:2, so this crops nothing — it just guarantees a
   uniform block whatever a future replacement's ratio turns out to be. */
.photo { width: 100%; height: auto; border-radius: 2px; }
.split__media .photo, .card__media .photo, .gallery .photo, .article .photo {
  aspect-ratio: 3 / 2; object-fit: cover;
}
.card__media .photo { border-radius: 0; }
.profile__photo .photo { aspect-ratio: 2 / 3; object-fit: cover; }
/* The product variant grids' placeholder illustration is square and must
   never be cropped — unlike the 3:2 photography above, the whole graphic
   needs to stay visible, so this shows it in full instead of covering a
   fixed box. */
.card__media .photo.photo--contain { aspect-ratio: 1; object-fit: contain; background: var(--surface-alt); }

/* --- Placeholder imagery -------------------------------------------------- */
.ph {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #ededea 0 12px, #e6e6e2 12px 24px);
  border: 1px solid var(--border); color: var(--grey);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  text-align: center; padding: 16px; aspect-ratio: 4 / 3; border-radius: 2px;
}
.ph::before {
  content: 'Placeholder'; position: absolute; top: 10px; left: 10px;
  background: var(--ink); color: #fff; font-size: 0.6rem; letter-spacing: 0.1em;
  padding: 3px 8px; border-radius: 2px; font-weight: 600;
}
.ph--wide { aspect-ratio: 16 / 9; }
.ph--square { aspect-ratio: 1; }
.ph--portrait { aspect-ratio: 3 / 4; }
.card__media .ph { border: 0; border-radius: 0; }

/* --- Breadcrumbs ---------------------------------------------------------- */
.crumbs { border-bottom: 1px solid var(--border); background: var(--surface); }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  list-style: none; margin: 0; padding: 15px 0; font-size: 0.82rem; color: var(--grey);
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: '›'; color: #bdbdbd; }
.crumbs a { color: var(--grey); }
.crumbs a:hover { color: var(--red); }
.crumbs [aria-current='page'] { color: var(--ink); font-weight: 500; }

/* --- Page header ---------------------------------------------------------- */
.pagehead { padding-block: 76px 60px; border-bottom: 1px solid var(--border); }
.pagehead .lede { max-width: 68ch; margin-bottom: 0; color: var(--grey); }
.pagehead h1 { max-width: 20ch; }
.pagehead--wide h1 { max-width: 26ch; }

/* --- Prose ---------------------------------------------------------------- */
.prose { max-width: 74ch; }
.prose h2 { margin-top: 2.4em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2em; margin-bottom: 0.5em; }
.prose > :last-child { margin-bottom: 0; }

/* --- Anchored long-form sections ------------------------------------------ */
.anchor-nav {
  position: sticky; top: var(--header-h); z-index: 20;
  background: rgba(255,255,255,0.96); border-bottom: 1px solid var(--border);
}
.anchor-nav ol {
  display: flex; gap: 4px; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.anchor-nav ol::-webkit-scrollbar { display: none; }
.anchor-nav li { margin: 0; }
.anchor-nav a {
  display: block; padding: 15px 16px; font-size: 0.87rem; font-weight: 500;
  color: var(--body); white-space: nowrap; border-bottom: 2px solid transparent;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.anchor-nav a:hover, .anchor-nav a.is-active { color: var(--red); border-bottom-color: var(--red); }

.longform > section { scroll-margin-top: calc(var(--header-h) + 60px); }
.longform > section + section { margin-top: 88px; padding-top: 88px; border-top: 1px solid var(--border); }
.longform .section-head { margin-bottom: 34px; }

.fillin {
  display: block; margin-top: 22px; padding: 14px 18px;
  background: #fffaf0; border: 1px dashed #e0b96a; border-radius: var(--radius);
  font-size: 0.85rem; color: #8a6212; line-height: 1.5;
}
.fillin strong { color: #6d4c0c; font-weight: 700; }
.todo {
  display: inline-block; padding: 1px 7px; border-radius: 2px;
  background: #fff3d6; border: 1px dashed #dcae55; color: #8a6212;
  font-size: 0.82em; font-weight: 600; white-space: nowrap;
}

/* --- Timeline ------------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; max-width: 800px; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 12px; bottom: 12px;
  width: 2px; background: var(--border);
}
.timeline li { position: relative; margin: 0 0 46px; padding-left: 44px; }
.timeline li:last-child { margin-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--red);
}
.timeline__year {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.16rem; color: var(--red); margin-bottom: 5px; letter-spacing: -0.01em;
}
.timeline :is(h2, h3) { font-size: 1.14rem; margin-bottom: 7px; }
.timeline p { margin-bottom: 0; font-size: 0.97rem; }

/* --- Stats / world map band ------------------------------------------------- */
.mapband { position: relative; background: var(--surface); overflow: hidden; border-block: 1px solid var(--border); }
.mapband__bg { position: absolute; inset: 0; opacity: 0.5; }
.mapband__bg svg, .mapband__bg img { width: 100%; height: 100%; object-fit: cover; }
.mapband .wrap { position: relative; z-index: 1; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; margin: 44px 0 0; padding: 0; }
.stats li { margin: 0; }
.stat { padding: 24px 22px; text-align: left; height: 100%; }
.stat__n {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem); color: var(--red);
  line-height: 1; letter-spacing: -0.03em; margin-bottom: 8px;
}
.stat__l { font-size: 0.85rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }
/* 3-stat variant (world-presence band, after "Accreditations held" was
   removed per Pegma_Home_Change_Review). */
.stats--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .stats--3 { grid-template-columns: 1fr; } }

/* --- Facts & figures: light-mode counters ----------------------------------
   Replaces the home page's product-family cards. Glass panels over a light
   tinted band (not the dark ink used elsewhere) per the confirmed reference:
   "background in light mode... text colour from white to black". Numbers
   count up on scroll via site.js; see figures() in blocks.mjs. */
.figures-band { position: relative; }
.figures {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
  list-style: none; margin: 0; padding: 0;
}
.figure {
  margin: 0; padding: 28px 20px; text-align: center;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border); border-radius: var(--radius-glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.figure__n {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); color: var(--red);
  line-height: 1; letter-spacing: -0.03em; margin-bottom: 8px;
}
.figure__l { font-size: 0.82rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
@media (max-width: 980px) { .figures { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .figures { grid-template-columns: repeat(2, 1fr); } }

/* --- "Latest from Pegma" bulletin row --------------------------------------- */
.latest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.latest__card {
  display: block; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; position: relative;
  transition: border-color 150ms var(--ease), transform 150ms var(--ease);
}
a.latest__card:hover { border-color: #d5d5d5; transform: translateY(-2px); }
.latest__media { border-bottom: 1px solid var(--border); }
.latest__card > :not(.latest__media) { padding-inline: 22px; }
.latest__date {
  margin: 18px 0 0; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--red);
}
.latest__card h3 { margin: 8px 0; font-size: 1.08rem; padding-inline: 22px; }
.latest__excerpt { font-size: 0.9rem; margin-bottom: 22px; color: var(--body); }
.latest__card--pending { opacity: 0.7; }
.latest__card--pending .latest__date { color: var(--grey); }
@media (max-width: 860px) { .latest { grid-template-columns: 1fr; } }

/* --- Interactive world map -------------------------------------------------
   Works with CSS alone: hover/focus highlighting and the accessible names are
   markup-driven. JS only adds the floating tooltip and the region filter.
   Light, dotted-map treatment: every landmass (served or not) renders in the
   same neutral dot texture via the <pattern id="wm-dots"> defined inline in
   worldMap() — only a small red marker per served country shows where Pegma
   actually ships. -------------------------------------------------------- */
.wm { margin: 0; }
.wm__filters { justify-content: center; margin-bottom: 26px; }

/* Stat cards on a light band — plain bordered tiles, icon above the number. */
.stat--flat { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); text-align: center; }
.stat--flat .stat__l { color: var(--grey); }
/* Global Presence band on the home page: same tile shape, brand-red fill. */
.mapband .stat--flat { background: var(--red); border-color: var(--red); }
.mapband .stat--flat .stat__n { color: #fff; }
.mapband .stat--flat .stat__l { color: rgba(255, 255, 255, 0.85); }
.stat__icon { display: block; margin: 0 auto 12px; color: var(--red); }
.wm__frame {
  position: relative; background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; overflow: hidden;
}
.wm__svg { display: block; width: 100%; height: auto; }
.wm__bg path, .wm__c path { fill: url(#wm-dots); }
.wm__c { cursor: pointer; outline: none; }
.wm__c:hover path, .wm__c:focus-visible path, .wm__c.is-active path { fill: url(#wm-dots-hover); }
.wm__c circle { fill: var(--red); stroke: var(--surface-alt); stroke-width: 1.5; transition: fill 150ms var(--ease); }
.wm__c:hover circle, .wm__c:focus-visible circle, .wm__c.is-active circle { fill: #ff6a4d; }
.wm__c:focus-visible circle { stroke: var(--ink); stroke-width: 2; }
/* Region filter: everything outside the chosen region recedes. */
.wm.is-filtered .wm__c { opacity: 0.22; }
.wm.is-filtered .wm__c.is-in-region { opacity: 1; }

.wm__tip {
  position: absolute; z-index: 5; pointer-events: none;
  transform: translate(-50%, -140%);
  background: #fff; color: var(--ink); border-radius: var(--radius);
  padding: 7px 12px; font-size: 0.82rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); border: 1px solid var(--border);
}
.wm__tip[hidden] { display: none; }
.wm__tip span { display: block; font-weight: 500; color: var(--grey); font-size: 0.74rem; }
.wm__hint {
  margin: 16px 0 0; text-align: center; font-size: 0.84rem; color: var(--grey);
}
@media (max-width: 640px) {
  .wm__frame { padding: 8px; }
  .wm__hint { font-size: 0.78rem; }
}

/* --- Region / country lists ----------------------------------------------- */
.regions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 40px; list-style: none; margin: 0; padding: 0; }
.regions > li { margin: 0; }
.region__name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink);
  padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid var(--red);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.region__name span { font-family: var(--font-body); font-size: 0.8rem; color: var(--grey); font-weight: 500; }
.region ul { list-style: none; margin: 0; padding: 0; }
.region li { margin: 0 0 7px; font-size: 0.93rem; color: var(--body); }
@media (max-width: 900px) { .regions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .regions { grid-template-columns: 1fr; } }

/* --- Certification cards -------------------------------------------------- */
.certgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 800px) { .certgrid { grid-template-columns: 1fr; } }
.cert { display: flex; flex-direction: column; }
.cert__top { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.cert__badge {
  flex-shrink: 0; width: 68px; height: 68px; border: 1px solid var(--border);
  border-radius: var(--radius); display: grid; place-items: center;
  background: var(--surface-alt); padding: 6px;
}
.cert__badge img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cert :is(h2, h3) { margin-bottom: 4px; font-size: 1.1rem; }
.cert__issuer { font-size: 0.84rem; color: var(--grey); margin: 0; }
.cert__scope { font-size: 0.94rem; margin-bottom: 16px; }
.cert__facts { list-style: none; margin: 0 0 22px; padding: 16px 0 0; border-top: 1px solid var(--border); }
.cert__facts li {
  display: flex; gap: 10px; font-size: 0.85rem; color: var(--grey); margin-bottom: 6px;
}
.cert__facts b { color: var(--ink); font-weight: 600; min-width: 108px; flex-shrink: 0; }
.cert .card__foot { padding-top: 0; }

/* --- Contact-details icon rows ---------------------------------------------- */
.cinfo__row { display: flex; align-items: flex-start; gap: 16px; }
.cinfo__row + .cinfo__row { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.cinfo__row--plain { padding-left: 56px; }
.cinfo__icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  background: var(--surface-alt); color: var(--ink); display: grid; place-items: center;
}
.cinfo b { font-size: 0.85rem; }
.cinfo p, .cinfo address { font-size: 0.94rem; color: var(--grey); }
.cinfo a { color: var(--ink); }
.cinfo a:hover { color: var(--red); }

.notice {
  border-left: 3px solid var(--red); background: var(--surface-alt);
  padding: 26px 30px; border-radius: 0 var(--radius) var(--radius) 0;
}
.notice h3 { font-size: 1.06rem; margin-bottom: 8px; }
.notice p:last-child { margin-bottom: 0; }
.notice p { font-size: 0.95rem; }

/* --- Profiles ------------------------------------------------------------- */
.profile { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
.profile + .profile { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--border); }
.profile__name { margin-bottom: 3px; font-size: 1.32rem; }
.profile__role {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red); margin: 0 0 18px;
}
.profile__quote {
  margin: 0 0 16px; padding-left: 18px; border-left: 2px solid var(--red);
  font-family: var(--font-display); font-size: 1.14rem; font-weight: 600;
  color: var(--ink); line-height: 1.35; letter-spacing: -0.01em;
}
.profile p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .profile { grid-template-columns: 1fr; gap: 24px; }
  .profile__photo { max-width: 200px; }
}

/* --- Department tiles ----------------------------------------------------- */
.tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  list-style: none; margin: 0; padding: 0;
}
.tiles > li { margin: 0; background: #fff; padding: 28px 26px; transition: background 150ms var(--ease); }
.tiles > li:hover { background: var(--surface-alt); }
.tile__n { font-family: var(--font-display); font-size: 0.76rem; font-weight: 700; color: var(--red); letter-spacing: 0.08em; }
.tile :is(h2, h3) { font-size: 1.04rem; margin: 8px 0 8px; }
.tile p { font-size: 0.9rem; margin: 0; color: var(--body); }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }

.banner { border-radius: var(--radius); aspect-ratio: 21 / 8; object-fit: cover; }
.banner--full { border-radius: 0; width: 100%; display: block; }

/* --- Fact sheet (label / value rows, e.g. About "Crafting Excellence") ----- */
.factsheet { list-style: none; margin: 0; padding: 0; }
.factsheet li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 10px 20px; padding: 15px 0; border-bottom: 1px solid var(--border);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink);
}
.factsheet li:first-child { padding-top: 0; }
.factsheet b {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--red);
  text-transform: none; letter-spacing: normal; text-align: right; white-space: nowrap;
}
.factsheet b small {
  display: block; font-family: var(--font-body); font-size: 0.68rem; font-weight: 600;
  color: var(--grey); text-align: right; white-space: normal;
}
@media (max-width: 720px) { .banner { aspect-ratio: 3 / 2; } }

/* --- Article list --------------------------------------------------------- */
.articles { list-style: none; margin: 0; padding: 0; }
.articles > li { margin: 0; padding: 34px 0; border-bottom: 1px solid var(--border); }
.articles > li:first-child { padding-top: 0; }
.article { display: grid; grid-template-columns: 280px 1fr; gap: 36px; align-items: start; }
.article__date {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red); margin: 0 0 10px;
}
.article :is(h2, h3) { font-size: 1.24rem; margin-bottom: 10px; }
.article p { margin-bottom: 0; font-size: 0.97rem; }
@media (max-width: 760px) { .article { grid-template-columns: 1fr; gap: 20px; } }

/* --- Gallery -------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 34px; }
.filter {
  padding: 9px 18px; font-size: 0.87rem; font-weight: 600; font-family: inherit;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--body); cursor: pointer; transition: all 150ms var(--ease);
}
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter[aria-pressed='true'] { background: var(--red); border-color: var(--red); color: #fff; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; }
.gallery > li { margin: 0; }
.gallery figure { margin: 0; }
.gallery figcaption { font-size: 0.83rem; color: var(--grey); margin-top: 9px; }
.gallery > li[hidden] { display: none; }
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } }

.videoblock { background: var(--surface-alt); border: 1px solid var(--border); padding: 20px; border-radius: var(--radius); }
.videoblock video { width: 100%; border-radius: 2px; background: #000; }
.videoblock figcaption { font-size: 0.86rem; color: var(--grey); margin-top: 14px; }

/* --- Division panels ------------------------------------------------------ */
.divisions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 800px) { .divisions { grid-template-columns: 1fr; } }
.division { display: flex; flex-direction: column; padding: 40px 38px; }
.division :is(h2, h3) { display: flex; align-items: center; gap: 9px; font-size: 1.36rem; }
.division :is(h2, h3) .ext { font-size: 0.8em; color: var(--red); }
.division p { font-size: 0.98rem; }

/* --- Forms ---------------------------------------------------------------- */
.form { display: grid; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .field--row { grid-template-columns: 1fr; } }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.field label .req { color: var(--red); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 0.96rem; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; transition: border-color 150ms var(--ease); width: 100%;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #cfcfcf; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--red); box-shadow: 0 0 0 3px rgba(var(--red-rgb), 0.14);
}
.field input[readonly] { background: var(--surface-alt); color: var(--grey); }
.field textarea { resize: vertical; min-height: 118px; }
.field__hint { font-size: 0.8rem; color: var(--grey); }
.hpot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__note { font-size: 0.82rem; color: var(--grey); margin: 0; }

.formstatus {
  padding: 14px 18px; border-radius: var(--radius); font-size: 0.92rem;
  border: 1px solid var(--border); background: var(--surface-alt);
}
.formstatus[data-state='ok'] { border-color: #b7ddb9; background: #f2f9f2; color: #1d5c22; }
.formstatus[data-state='err'] { border-color: #eec0c6; background: #fdf3f4; color: var(--red-dark); }
.formstatus[hidden] { display: none; }

/* --- Modal (glass spot #5) ------------------------------------------------ */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 24px;
  background: rgba(20, 20, 20, 0.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.modal__box {
  width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: var(--radius-glass);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3); padding: 34px 34px 30px; color: var(--ink);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .modal { background: rgba(20,20,20,0.7); }
  .modal__box { background: #fff; }
}
.modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 8px; }
.modal__head h2 { font-size: 1.34rem; margin: 0; }
.modal__close {
  flex-shrink: 0; width: 36px; height: 36px; border: 1px solid var(--border);
  background: #fff; border-radius: var(--radius); cursor: pointer; font-size: 1.1rem;
  line-height: 1; color: var(--body); transition: all 150ms var(--ease);
}
.modal__close:hover { border-color: var(--red); color: var(--red); }
.modal__intro { font-size: 0.93rem; color: var(--grey); margin-bottom: 22px; }
body.is-locked { overflow: hidden; }

/* --- CTA band ------------------------------------------------------------- */
.ctaband { background: var(--red); color: #fff; }
.ctaband .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; padding-block: 68px; flex-wrap: wrap;
}
.ctaband h2 { color: #fff; margin: 0 0 8px; max-width: 18ch; }
.ctaband p { color: rgba(255, 255, 255, 0.86); margin: 0; max-width: 52ch; }

/* --- Cert strip ----------------------------------------------------------- */
.certstrip { border-block: 1px solid var(--border); background: var(--surface-alt); }
.certstrip .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; padding-block: 26px; flex-wrap: wrap;
}
.certstrip__label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); margin: 0; }
.certstrip ul { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0; padding: 0; }
.certstrip li { margin: 0; }

/* --- Footer --------------------------------------------------------------- */
.footer { background: var(--ink); color: #a8a8a8; font-size: 0.9rem; }
.footer__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 44px; flex-wrap: wrap;
  padding-block: 68px 38px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* 5 columns: Company, Products, Divisions and Initiatives, Media, Contact. */
.footer__cols {
  display: grid; grid-template-columns: 1.05fr 0.85fr 1.25fr 0.85fr 1.3fr; gap: 32px;
  padding-block: 48px 56px;
}
@media (max-width: 1080px) { .footer__cols { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
@media (max-width: 640px) { .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (max-width: 420px) { .footer__cols { grid-template-columns: 1fr; } }

.footer__map { margin: 14px 0 16px; border-radius: 2px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); }
.footer__map iframe { display: block; filter: grayscale(0.3) invert(0.92) contrast(0.9); }

/* Social icon row, replacing the certification-name chips. */
.social { display: flex; justify-content: center; gap: 14px; list-style: none; margin: 0; padding: 0; }
.social li { margin: 0; }
.social__link, .social__pending {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%;
  transition: border-color 150ms var(--ease), transform 150ms var(--ease);
}
.social__link img, .social__pending img { height: 18px; width: auto; display: block; }
.social__link:hover { border-color: var(--red); transform: translateY(-2px); }
.social__pending { cursor: default; }
.social__pending img { opacity: 0.45; }
.social__item--pending { position: relative; }
.social__tag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 0.6rem;
}
.social__tag .todo { padding: 1px 5px; }

.footer__pending { color: #8a8a8a; }
.footer__pending .todo { margin-left: 2px; }
.nav__pending {
  display: block; padding: 9px 13px; font-size: 0.9rem; color: var(--grey);
  font-style: italic;
}
/* Semantically h2 (see base.mjs), styled as a small footer column label. */
.footer h2 {
  color: #fff; font-family: var(--font-body); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 20px;
  line-height: 1.4;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 11px; }
.footer a { color: #a8a8a8; transition: color 150ms var(--ease); }
.footer a:hover { color: #fff; }
.footer address { font-style: normal; line-height: 1.65; margin-bottom: 16px; }
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__brand img { height: 48px; width: auto; }
.footer__brand .brand__tag { color: #8a8a8a; }
.footer__blurb { font-size: 0.92rem; line-height: 1.6; max-width: 52ch; margin: 0; }
.footer__certs { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-block: 24px; }
.footer .cinfo__row { gap: 12px; }
.footer .cinfo__row + .cinfo__row { margin-top: 14px; padding-top: 14px; border-top-color: rgba(255, 255, 255, 0.1); }
.footer .cinfo__icon { width: 34px; height: 34px; background: rgba(255, 255, 255, 0.08); color: #fff; }
.footer .cinfo address { color: #a8a8a8; margin: 0; }
.footer .cinfo a { color: #a8a8a8; }
.footer .cinfo a:hover { color: #fff; }
.footer__bar {
  border-top: 1px solid rgba(255, 255, 255, 0.1); padding-block: 22px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 0.82rem; color: #7d7d7d;
}
.footer__bar p { margin: 0; }
.ext { font-size: 0.85em; }

/* --- 404 ------------------------------------------------------------------ */
.err { text-align: center; padding-block: 140px; }
.err__code {
  font-family: var(--font-display); font-size: clamp(4rem, 2rem + 9vw, 8rem);
  font-weight: 800; color: var(--red); line-height: 1; letter-spacing: -0.04em; margin: 0 0 12px;
}
.err .btn-row { justify-content: center; }
.err p { max-width: 46ch; margin-inline: auto; }

/* --- Motion --------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(12px); }
.js .reveal { transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

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

/* --- Print ---------------------------------------------------------------- */
@media print {
  .header, .footer, .ctaband, .modal, .anchor-nav, .nav__toggle { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   NSS ONE-PAGER — additions on top of the Pegma Resources design system.
   Everything above this line is copied verbatim from the main site's
   site.css so the two properties share one visual language. Rules below are
   specific to this single-page layout: a "division of Pegma" badge in the
   header/footer, and the process-flow step grid.
   ========================================================================== */

/* Fix: descendant rules like ".section-head p" and ".hero__panel p" carry
   higher specificity (0,1,1) than ".eyebrow" alone (0,1,0), so any eyebrow
   nested in those contexts silently rendered grey/body instead of red.
   "p.eyebrow" matches that same specificity and wins on source order. */
p.eyebrow { color: var(--red); }

/* --- Footer: 3 columns instead of the main site's 5 ------------------------- */
.footer__cols--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .footer__cols--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .footer__cols--3 { grid-template-columns: 1fr; } }

/* --- Division badge (header brand + footer) -------------------------------- */
.brand__division {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey);
  padding: 3px 9px 3px 0; border-left: 2px solid var(--red); padding-left: 9px;
  margin-left: 2px;
}
.header--over .brand__division { color: rgba(255, 255, 255, 0.78); }
.header--over.is-stuck .brand__division { color: var(--grey); }
@media (max-width: 760px) { .brand__division { display: none; } }

/* --- Simple one-page header (no dropdowns) ---------------------------------- */
.nav__link--simple { cursor: default; }

/* Fix: 7 flat nav items + an external link ran wider than the 1200px wrap at
   every desktop width — .wrap caps at 1200px permanently above ~1248px
   viewport, so there was never a width where the base site's nav padding
   fit. Overflow silently zeroed out the flex `margin-left: auto` that pushes
   .nav to the right, so brand + nav piled up on the left with the rest
   clipped off-screen by `overflow-x: hidden`. Tightening spacing here
   reclaims ~110px, comfortably clearing the ~70px measured deficit. */
@media (min-width: 1121px) {
  .header__inner { gap: 18px; }
  .nav__list { gap: 0; }
  .nav__link { padding: 9px 9px; font-size: 0.87rem; }
  .header .btn--quote { padding: 12px 18px; margin-left: 6px; }
}

/* --- Process flow: connected vertical timeline ------------------------------ */
.ptimeline { position: relative; list-style: none; margin: 0; padding: 0; }
.ptimeline::before {
  content: ''; position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px;
  background: var(--border); z-index: 0;
}
.ptimeline__item { position: relative; z-index: 1; display: grid; grid-template-columns: 56px 1fr; gap: 24px; margin-bottom: 40px; }
.ptimeline__item:last-child { margin-bottom: 0; }
.ptimeline__marker {
  position: relative; width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: var(--red); color: #fff; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 8px 20px rgba(var(--red-rgb), 0.28);
}
.ptimeline__content {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px;
}
.ptimeline__media { aspect-ratio: 4/3; border-radius: 2px; overflow: hidden; background: var(--surface-alt); }
.ptimeline__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptimeline__media--icon { display: grid; place-items: center; color: var(--red); }
.ptimeline__body h3 { margin-bottom: 6px; font-size: 1.05rem; }
.ptimeline__body p { margin: 0; color: var(--body); font-size: 0.92rem; }
.ptimeline__chevron {
  position: absolute; left: 0; width: 56px; bottom: -32px; z-index: 1;
  display: flex; justify-content: center; color: var(--red);
}
@media (max-width: 720px) {
  .ptimeline::before { left: 21px; }
  .ptimeline__item { grid-template-columns: 44px 1fr; gap: 16px; margin-bottom: 32px; }
  .ptimeline__marker { width: 44px; height: 44px; font-size: 0.92rem; }
  .ptimeline__content { grid-template-columns: 1fr; padding: 14px; }
  .ptimeline__media { aspect-ratio: 16/9; }
  .ptimeline__chevron { width: 44px; bottom: -26px; }
}

.flow__note {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; font-size: 0.92rem; color: var(--body); margin-top: 36px;
}
.flow__note strong { color: var(--ink); }
.flow__icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; color: var(--red); }

/* --- Product grid: contain product photography without cropping ------------ */
.card__media--contain { display: flex; align-items: center; justify-content: center; background: var(--surface-alt); aspect-ratio: 4/3; overflow: hidden; }
.card__media--contain img { width: 100%; height: 100%; object-fit: cover; }

/* --- Contact rows on the ink CTA band --------------------------------------- */
.contact-band { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 760px) { .contact-band { grid-template-columns: 1fr; } }
.contact-card {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius); padding: 26px 24px; display: flex; gap: 16px; align-items: flex-start;
}
.contact-card .cinfo__icon { background: rgba(255,255,255,0.14); color: #fff; }
.contact-card b { display: block; color: #fff; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.contact-card a { color: #fff; font-weight: 600; font-size: 1.02rem; }
.contact-card a:hover { color: rgba(255,255,255,0.8); }

.contact-form-card {
  background: #fff; color: var(--body); border-radius: var(--radius-glass);
  padding: 36px 36px 32px; margin-top: 28px;
}
.contact-form-card h3 { margin-bottom: 8px; }
.contact-form-card > p { color: var(--grey); margin-bottom: 24px; }
.contact-card p { color: rgba(255,255,255,0.75); font-size: 0.88rem; margin: 4px 0 0; }