@charset "UTF-8";
/*  PowerBase — single stylesheet, no build step.
    Sections in cascade order: tokens · base · layout · components · pages ·
    utilities. Plain rules on purpose: WordPress prints its theme.json
    `global-styles` block UNLAYERED, and unlayered CSS beats anything inside
    an @layer no matter the specificity — so wrapping this file in layers made
    every colour rule lose to core's `:root :where(a){color:…}`.             */

/* ========================================================================== *
 *  TOKENS
 * ========================================================================== */
:root {
  /* Brand — --brand-accent and --ink-900 are overridden by the Customizer. */
  --brand-accent: #70c500;
  --brand-accent-hover: color-mix(in srgb, var(--brand-accent) 84%, #000);
  --brand-accent-soft: color-mix(in srgb, var(--brand-accent) 12%, #fff);

  /* Contrast pair for the accent.
     The brand green is bright: white text on it is 2.17:1, and green text on
     white is also 2.17:1 — both fail WCAG AA. So on light surfaces the accent
     is only ever a FILL, never ink:
       --on-accent        ink placed ON an accent fill  (8.6:1)
       --brand-accent-ink accent used AS ink on light   (5.5:1 on #fff)
     On dark surfaces the raw accent is fine (8.6:1 on --ink-900) and is used
     directly. Swapping in a DARK brand colour means flipping --on-accent back
     to #fff and raising the --brand-accent-ink mix. */
  --on-accent: #111213;
  --brand-accent-ink: color-mix(in srgb, var(--brand-accent) 60%, #000);

  /* Hero base — deep navy behind the media, matching the banner artwork. */
  --hero-ink: #041626;
  --ink-900: #111213;
  --ink-800: #1b1e20;
  --ink-700: #2b2f31;
  --ink-600: #4a4f52;
  --ink-400: #7a7a7a;
  --line: #e3e5e6;
  --line-dark: #2c3033;
  --surface: #fff;
  --surface-alt: #f3f4f4;

  /* Type */
  --font-sans: Inter, "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-h1: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --fs-h2: clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem);
  --fs-h3: clamp(1.3rem, 1.12rem + 0.75vw, 1.75rem);
  --fs-h4: clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h5: 1.0625rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  --lh-tight: 1.18;
  --lh-body: 1.65;

  /* Space */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);

  /* Shape — reference design is flat and photo-led: no shadows. */
  --container: 1280px;
  --radius: 6px;
  --radius-btn: 5px;
  --header-h: 76px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Long, soft finish — used by the scroll reveal, which travels further. */
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --speed: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --speed: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================================================== *
 *  BASE
 * ========================================================================== */
@font-face {
  font-family: Inter;
  src: url("../fonts/inter-variable.woff2") format("woff2-variations"),
       url("../fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Thai. Inter carries no Thai glyphs, so without these faces Thai text falls
   back to whatever the visitor's OS supplies (Thonburi, Leelawadee, …) and the
   page renders in two unrelated typefaces.

   Each face is the Thai subset only (~8 KB) and is unicode-range limited, so
   Latin never matches it and the browser downloads nothing on a page with no
   Thai text. That is also why "IBM Plex Sans Thai" sits *after* Inter in
   --font-sans: the range decides, not the order.

   IBM Plex Sans Thai ships as static weights, not a variable font. The 600
   face is declared 600–650 because every heading and <strong> in this file is
   weight 650: without the range, 650 would resolve upwards to 700 and Thai
   headings would sit visibly heavier than the Latin ones beside them. */
@font-face {
  font-family: "IBM Plex Sans Thai";
  src: url("../fonts/ibm-plex-sans-thai-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  src: url("../fonts/ibm-plex-sans-thai-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  src: url("../fonts/ibm-plex-sans-thai-600.woff2") format("woff2");
  font-weight: 600 650;
  font-style: normal;
  font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  src: url("../fonts/ibm-plex-sans-thai-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-2);
  font-weight: 650;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }

p, ul, ol, dl, table, figure, pre, blockquote { margin: 0 0 var(--sp-2); }
p { text-wrap: pretty; }
:is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child { margin-bottom: 0; }

a { color: var(--brand-accent-ink); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

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

strong, b { font-weight: 650; }
small { font-size: var(--fs-sm); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }

blockquote {
  border-left: 3px solid var(--brand-accent-ink);
  padding-left: var(--sp-3);
  color: var(--ink-600);
  font-size: var(--fs-h5);
}

code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
pre { background: var(--surface-alt); padding: var(--sp-2); border-radius: var(--radius); overflow-x: auto; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); }
th { font-weight: 650; }

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

::selection { background: var(--brand-accent); color: var(--on-accent); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.pb-skip-link {
  position: absolute;
  top: -100px; left: var(--sp-2);
  z-index: 999;
  background: var(--brand-accent);
  color: var(--on-accent);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  transition: top var(--speed) var(--ease);
}
.pb-skip-link:focus { top: 0; text-decoration: none; }

/* ========================================================================== *
 *  LAYOUT
 * ========================================================================== */
.pb-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.pb-container--narrow { max-width: 820px; }

.pb-section { padding-block: var(--sp-6); }
.pb-section--tight { padding-block: var(--sp-5); }
.pb-section--alt { background: var(--surface-alt); }
.pb-section--dark { background: var(--ink-900); color: #fff; }
.pb-section--dark :is(h1, h2, h3, h4, h5) { color: #fff; }
.pb-section--dark p { color: #c9cdcf; }

.pb-section-head { max-width: 62ch; margin-bottom: var(--sp-4); }
.pb-section-head--center { margin-inline: auto; text-align: center; }
.pb-section-head p { color: var(--ink-600); font-size: 1.0625rem; }
/* Must come after .pb-section-head p, which has equal specificity and would
   otherwise leave --ink-600 (#4A4F52) on near-black at ~2.3:1 contrast. */
.pb-section--dark .pb-section-head p { color: #c9cdcf; }

.pb-eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-1);
  color: var(--brand-accent-ink);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* On dark bands the raw accent is the readable one (8.6:1); the ink variant
   is tuned for light surfaces and would drop to ~2.5:1 here. */
.pb-hero .pb-eyebrow,
.pb-pagehero .pb-eyebrow,
.pb-section--dark .pb-eyebrow { color: var(--brand-accent); }

/* Auto-fitting grid: --cols is the desktop maximum. */
.pb-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .pb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
}
@media (min-width: 900px) {
  .pb-grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--sp-4); }
  .pb-grid--2 { --cols: 2; }
  .pb-grid--3 { --cols: 3; }
  .pb-grid--4 { --cols: 4; }
}

.pb-split {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
}
@media (min-width: 900px) {
  .pb-split { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .pb-split--media-right > :first-child { order: 2; }
}

.pb-main { min-height: 40vh; }

/* ========================================================================== *
 *  COMPONENTS
 * ========================================================================== */

/* --- Buttons ----------------------------------------------------------- */
.pb-btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  border: 2px solid var(--brand-accent);
  border-radius: var(--radius-btn);
  background: var(--brand-accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.pb-btn:hover, .pb-btn:focus-visible,
.wp-block-button__link:hover {
  background: var(--brand-accent-hover);
  border-color: var(--brand-accent-hover);
  color: var(--on-accent);
  text-decoration: none;
}
.pb-btn--ghost { background: transparent; color: var(--ink-900); border-color: currentColor; }
.pb-btn--ghost:hover, .pb-btn--ghost:focus-visible { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.pb-btn--on-dark { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.55); }
.pb-btn--on-dark:hover, .pb-btn--on-dark:focus-visible { background: #fff; border-color: #fff; color: var(--ink-900); }
.pb-btn--sm { padding: 0.55rem 1.1rem; font-size: var(--fs-sm); }
.pb-btn[disabled], .pb-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Colour-only tie-break, and nothing else.
   Core's global-styles prints `:root :where(a:where(:not(.wp-element-button)))
   {color:…}` unlayered at specificity (0,1,0), which ties with `.pb-btn` and
   would otherwise be settled by stylesheet order. The type selector settles it.
   It is kept to `color` on purpose: raising the specificity of the whole button
   block would also outrank layout rules like `.pb-header__cta { display:none }`
   and break the mobile header. */
a.pb-btn { color: var(--on-accent); }
a.pb-btn:hover, a.pb-btn:focus-visible { color: var(--on-accent); }
a.pb-btn--ghost { color: var(--ink-900); }
a.pb-btn--ghost:hover, a.pb-btn--ghost:focus-visible { color: #fff; }
a.pb-btn--on-dark { color: #fff; }
a.pb-btn--on-dark:hover, a.pb-btn--on-dark:focus-visible { color: var(--ink-900); }

.pb-link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 600; font-size: var(--fs-sm);
}
.pb-link-arrow .pb-icon { transition: transform var(--speed) var(--ease); }
.pb-link-arrow:hover .pb-icon { transform: translateX(3px); }

.pb-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* --- Media placeholder ------------------------------------------------- */
.pb-image-placeholder {
  display: block;
  aspect-ratio: 3 / 2;
  background:
    repeating-linear-gradient(135deg, var(--surface-alt) 0 10px, #eceeee 10px 20px);
}

/* --- Cards ------------------------------------------------------------- */
.pb-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--speed) var(--ease);
}
.pb-card:hover { border-color: var(--brand-accent); }
.pb-card__media { position: relative; background: var(--surface-alt); }
.pb-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pb-card__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.pb-card__title { font-size: var(--fs-h5); margin: 0; }
.pb-card__title a { color: inherit; }
.pb-card__title a:hover { color: var(--brand-accent-ink); text-decoration: none; }
.pb-card__text { margin: 0; color: var(--ink-600); font-size: var(--fs-sm); }
.pb-card__meta { margin: 0; color: var(--ink-400); font-size: var(--fs-xs); }
.pb-card__foot { margin-top: auto; padding-top: 0.4rem; }

/* Whole card clickable without nesting interactive elements. */
.pb-card__link::after { content: ""; position: absolute; inset: 0; }
.pb-card { position: relative; }

/* --- Site header ------------------------------------------------------- */
.pb-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background: var(--ink-900);
  color: #fff;
  transition: background var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
/* The header is out of flow, so pages that do not have it overlaying a hero
   have to reserve its height themselves. */
.pb-header-solid { padding-top: var(--header-h); }
.pb-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--header-h);
}

/* Overlay variant sits on top of a dark hero — transparent until the page is
   scrolled past it, at which point `is-stuck` brings the bar back. */
.pb-header-overlay .pb-header { background: transparent; }
.pb-header.is-stuck {
  background: var(--ink-900);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.09);
}

.pb-brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.pb-brand img { max-height: 34px; width: auto; }
.pb-footer__brand .pb-brand img { max-height: 44px; }
.pb-brand:hover { text-decoration: none; }

/* --- Primary navigation ------------------------------------------------ */
.pb-nav { display: none; }
.pb-nav ul { list-style: none; margin: 0; padding: 0; }
.pb-nav > ul { display: flex; align-items: center; gap: 0.25rem; }
.pb-nav a {
  display: block;
  padding: 0.9rem 1rem;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--speed) var(--ease);
}
.pb-nav a:hover, .pb-nav a:focus-visible { color: var(--brand-accent); text-decoration: none; }
.pb-nav .current-menu-item > a,
.pb-nav .current-menu-parent > a,
.pb-nav .current-menu-ancestor > a { color: var(--brand-accent); }

.pb-nav .menu-item-has-children { position: relative; }
.pb-nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0.42em; height: 0.42em;
  margin-left: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
}
.pb-nav .sub-menu {
  position: absolute;
  top: 100%; left: 0;
  min-width: 250px;
  padding: 0.35rem 0;
  background: var(--ink-800);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility var(--speed);
}
.pb-nav .menu-item-has-children:hover > .sub-menu,
.pb-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.pb-nav .sub-menu a { padding: 0.6rem 1.1rem; font-weight: 500; }

@media (min-width: 1000px) {
  .pb-nav { display: block; }
}

.pb-header__tools { display: flex; align-items: center; gap: 0.25rem; }

.pb-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.pb-iconbtn:hover, .pb-iconbtn:focus-visible { color: var(--brand-accent); background: rgb(255 255 255 / 0.07); }

.pb-header__cta { display: none; }
@media (min-width: 1000px) {
  .pb-header__cta { display: inline-flex; margin-left: 0.5rem; }
  .pb-menu-toggle { display: none; }
}

/* --- Mobile drawer ----------------------------------------------------- */
.pb-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(380px, 88vw);
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--ink-900);
  color: #fff;
  transform: translateX(100%);
  transition: transform 260ms var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pb-drawer[data-open="true"] { transform: translateX(0); }
.pb-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-dark);
  min-height: var(--header-h);
}
.pb-drawer__body { padding: var(--sp-2) var(--sp-3) var(--sp-4); }
.pb-drawer ul { list-style: none; margin: 0; padding: 0; }
.pb-drawer .menu-item { border-bottom: 1px solid var(--line-dark); }
.pb-drawer .menu-item > a {
  display: block;
  padding: 0.95rem 0;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.pb-drawer .menu-item > a:hover { color: var(--brand-accent); }
.pb-drawer .sub-menu { display: none; padding-bottom: 0.5rem; }
.pb-drawer .menu-item-has-children[data-open="true"] > .sub-menu { display: block; }
.pb-drawer .sub-menu .menu-item { border: 0; }
.pb-drawer .sub-menu a { padding: 0.5rem 0 0.5rem 1rem; font-weight: 500; color: #c9cdcf; }

.pb-drawer__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pb-drawer__row > a { flex: 1; }
.pb-submenu-toggle {
  flex: none;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-btn);
  background: transparent; color: #fff; cursor: pointer;
}
.pb-submenu-toggle .pb-icon { transition: transform var(--speed) var(--ease); }
.pb-submenu-toggle[aria-expanded="true"] .pb-icon { transform: rotate(180deg); }

.pb-drawer__contact { margin-top: var(--sp-3); display: grid; gap: 0.6rem; font-size: var(--fs-sm); }
.pb-drawer__contact a { display: flex; align-items: center; gap: 0.55rem; color: #c9cdcf; }

.pb-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgb(0 0 0 / 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms var(--ease), visibility 260ms;
}
.pb-overlay[data-open="true"] { opacity: 1; visibility: visible; }
body[data-scroll-locked="true"] { overflow: hidden; }

/* --- Search modal ------------------------------------------------------ */
.pb-searchmodal {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: start center;
  padding: 12vh var(--gutter) var(--gutter);
  background: rgb(0 0 0 / 0.82);
  opacity: 0; visibility: hidden;
  transition: opacity var(--speed) var(--ease), visibility var(--speed);
}
.pb-searchmodal[data-open="true"] { opacity: 1; visibility: visible; }
.pb-searchmodal__panel { width: min(640px, 100%); }
.pb-searchmodal__close { position: absolute; top: var(--sp-2); right: var(--sp-2); color: #fff; }

/* --- Search form ------------------------------------------------------- */
.pb-searchform { display: flex; gap: 0.5rem; }
.pb-searchform input[type="search"] { flex: 1; }

/* --- Forms ------------------------------------------------------------- */
.pb-field { display: grid; gap: 0.35rem; }
.pb-field > label { font-size: var(--fs-sm); font-weight: 600; }
.pb-field .pb-req { color: #c62828; }

input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="search"], input[type="number"], input[type="password"], select, textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--ink-900);
  font: inherit;
  font-size: var(--fs-body);
}
textarea { min-height: 140px; resize: vertical; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-600) 50%),
                    linear-gradient(135deg, var(--ink-600) 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.75rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
:is(input, select, textarea):focus-visible { border-color: var(--brand-accent-ink); outline-offset: 0; }
:is(input, textarea)::placeholder { color: var(--ink-400); }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: #c62828; }

/* Honeypot: kept out of the layout and out of the a11y tree. */
.pb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pb-notice {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
}
.pb-notice--ok { border-color: var(--brand-accent); background: var(--brand-accent-soft); color: var(--ink-900); }
.pb-notice--error { border-color: #e0b4b4; background: #fdf3f3; color: #7f1d1d; }
.pb-notice ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }

/* --- Pagination -------------------------------------------------------- */
.pb-pagination { margin-top: var(--sp-4); }
.pb-pagination ul { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.pb-pagination :is(a, span) {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  color: var(--ink-900);
  font-size: var(--fs-sm); font-weight: 600;
  text-decoration: none;
}
.pb-pagination a:hover { border-color: var(--brand-accent); color: var(--brand-accent-ink); text-decoration: none; }
.pb-pagination .current { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.pb-pagination .dots { border-color: transparent; }

/* --- Breadcrumbs ------------------------------------------------------- */
.pb-breadcrumb { font-size: var(--fs-sm); color: var(--ink-400); }
.pb-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.pb-breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line); }
.pb-breadcrumb a { color: inherit; }
.pb-breadcrumb a:hover { color: var(--brand-accent-ink); }

/* --- Page hero (inner pages) ------------------------------------------- */
.pb-pagehero {
  position: relative;
  background: var(--ink-900);
  color: #fff;
  padding-block: var(--sp-5);
}
.pb-pagehero__bg { position: absolute; inset: 0; overflow: hidden; }
/* Bright photos (sky, grass) wash out the heading — keep the scrim heavy. */
.pb-pagehero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.25; }
.pb-pagehero__inner { position: relative; }
.pb-pagehero h1 { margin-bottom: 0.5rem; }
.pb-pagehero p { color: #c9cdcf; max-width: 62ch; }
.pb-pagehero .pb-breadcrumb { margin-top: var(--sp-2); color: #9aa0a3; }
.pb-pagehero .pb-breadcrumb li + li::before { color: #4a4f52; }

/* --- Site footer ------------------------------------------------------- */
.pb-footer { background: var(--ink-900); color: #b8bdbf; font-size: var(--fs-sm); }
.pb-footer a { color: #b8bdbf; }
.pb-footer a:hover { color: var(--brand-accent); text-decoration: none; }
.pb-footer__cols {
  display: grid;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
}
@media (min-width: 640px) { .pb-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .pb-footer__cols { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: var(--sp-4); } }
.pb-footer h2 {
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.pb-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.pb-footer__contact li { display: flex; gap: 0.6rem; align-items: flex-start; }
.pb-footer__contact .pb-icon { flex: none; margin-top: 0.2em; color: var(--brand-accent); }
.pb-footer__brand .pb-brand { margin-bottom: var(--sp-2); }
.pb-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  align-items: center; justify-content: space-between;
  padding-block: var(--sp-2);
  border-top: 1px solid var(--line-dark);
  font-size: var(--fs-xs);
}
.pb-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.pb-social { display: flex; gap: 0.4rem; }
.pb-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  color: var(--ink-600);
}
.pb-social a:hover { border-color: var(--brand-accent); color: var(--brand-accent-ink); }
/* The footer is the dark variant, not the default — .pb-social also appears
   on the light contact page, where footer greys are invisible. */
.pb-footer .pb-social a { border-color: var(--line-dark); color: #b8bdbf; }
.pb-footer .pb-social a:hover { border-color: var(--brand-accent); color: var(--brand-accent); }

/* ========================================================================== *
 *  PAGES
 * ========================================================================== */
/* --- Editor content ---------------------------------------------------- */
.pb-prose { font-size: 1.0625rem; }
.pb-prose > * { margin-bottom: var(--sp-3); }
.pb-prose > :last-child { margin-bottom: 0; }
.pb-prose :is(h2, h3, h4) { margin-top: var(--sp-4); }
.pb-prose img, .pb-prose figure { border-radius: var(--radius); }
.pb-prose ul, .pb-prose ol { padding-left: 1.3rem; }
.pb-prose li { margin-bottom: 0.4rem; }
.pb-prose .alignwide { width: min(100%, var(--container)); }

/* --- 404 / empty states ------------------------------------------------ */
.pb-empty { text-align: center; padding-block: var(--sp-6); }
.pb-empty p { color: var(--ink-600); max-width: 52ch; margin-inline: auto; }
.pb-empty .pb-actions { justify-content: center; margin-top: var(--sp-3); }

/* --- Search results ---------------------------------------------------- */
.pb-results { display: grid; gap: var(--sp-3); }
.pb-result { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-3); }
.pb-result h2 { font-size: var(--fs-h4); margin-bottom: 0.35rem; }
.pb-result p { color: var(--ink-600); font-size: var(--fs-sm); margin: 0; }

/* ========================================================================== *
 *  UTILITIES
 * ========================================================================== */
.pb-hidden { display: none !important; }
.pb-center { text-align: center; }
.pb-muted { color: var(--ink-600); }
.pb-stack { display: grid; gap: var(--sp-2); }
.pb-stack--lg { gap: var(--sp-3); }
.pb-mt-3 { margin-top: var(--sp-3); }
.pb-mt-4 { margin-top: var(--sp-4); }
.pb-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ========================================================================== *
 *  PAGES — Homepage
 * ========================================================================== */

/* --- Hero -------------------------------------------------------------- */
.pb-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 86vh, 880px);
  /* The header overlays this band, so reserve its height. */
  padding-block: calc(var(--header-h) + var(--sp-4)) var(--sp-5);
  background: var(--hero-ink);
  color: #fff;
  overflow: hidden;
}
.pb-hero__bg { position: absolute; inset: 0; }
.pb-hero__bg > img,
.pb-hero__bg > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
/* Video is attached by JS on desktop only and fades in over the still. */
.pb-hero__video { opacity: 0; transition: opacity 700ms var(--ease); }
.pb-hero.is-playing .pb-hero__video { opacity: 1; }

/* Legibility scrim: dark on the text side, clear over the subject. */
.pb-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(4 22 38 / 0.86) 0%, rgb(4 22 38 / 0.68) 38%, rgb(4 22 38 / 0.6) 70%, rgb(4 22 38 / 0.74) 100%);
}
/* Below this width the photo is cropped so tight that its bright half sits
   under the copy, so the whole frame keeps the flat veil. Only wide viewports
   get the artwork's composition: dark left column, clear product on the right. */
@media (min-width: 1200px) {
  .pb-hero__bg::after {
    /* Two layers: one down the text column, one up from the feature strip —
       the strip runs wider than the column on tablets, where the photo is
       cropped tight and its bright half lands right under the labels. */
    background:
      linear-gradient(100deg, rgb(4 22 38 / 0.92) 0%, rgb(4 22 38 / 0.76) 30%, rgb(4 22 38 / 0.34) 58%, rgb(4 22 38 / 0) 80%),
      linear-gradient(0deg, rgb(4 22 38 / 0.8) 0%, rgb(4 22 38 / 0.45) 20%, rgb(4 22 38 / 0) 46%);
  }
}
.pb-hero__inner { position: relative; width: 100%; }
.pb-hero__content { max-width: 34rem; }
@media (min-width: 768px) { .pb-hero__content { max-width: 44rem; } }

.pb-hero__brand { margin-bottom: clamp(var(--sp-3), 4vh, var(--sp-5)); }
.pb-hero__logo {
  display: block;
  width: clamp(200px, 20vw, 290px);
  height: auto;
}
.pb-hero__tagline {
  display: block;
  margin-top: 0.55em;
  font-size: clamp(0.75rem, 0.62rem + 0.45vw, 1.0625rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #e8eef2;
}

.pb-hero__title {
  color: #fff;
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-2);
  text-wrap: balance;
}
.pb-hero__hl { color: var(--brand-accent); }
.pb-hero__text {
  color: #dbe3e8;
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.25rem);
  max-width: 30ch;
}
.pb-hero__rule {
  display: block;
  width: 52px;
  height: 4px;
  border-radius: 2px;
  margin-top: var(--sp-3);
  background: var(--brand-accent);
}
.pb-hero .pb-actions { margin-top: var(--sp-3); }

/* Feature strip — icon + label + one-liner, hairline dividers between. */
.pb-hero__features {
  list-style: none;
  margin: clamp(var(--sp-3), 5vh, var(--sp-5)) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) 0;
}
.pb-hero__feature {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1 1 100%;
  min-width: 0;
  padding-inline: 0 var(--sp-2);
  line-height: 1.3;
}
.pb-hero__feature .pb-icon { flex: none; color: var(--brand-accent); }
.pb-hero__feature strong {
  display: block;
  font-size: clamp(0.8125rem, 0.75rem + 0.25vw, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.pb-hero__feature span span {
  display: block;
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  color: #c6d0d8;
}
@media (min-width: 560px) {
  .pb-hero__feature { flex: 0 1 auto; padding-inline: var(--sp-3) var(--sp-3); }
  .pb-hero__feature:first-child { padding-inline-start: 0; }
  .pb-hero__feature + .pb-hero__feature { border-inline-start: 1px solid rgb(255 255 255 / 0.28); }
}

/* --- Company overview --------------------------------------------------- */
/* Two prose columns top-aligned, unlike the centred .pb-split default. */
.pb-split--top { align-items: start; }

.pb-about__label {
  font-size: var(--fs-h5);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.pb-about__values {
  margin-top: var(--sp-2);
  font-weight: 600;
  color: var(--brand-accent-ink);
}

.pb-why {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
@media (min-width: 640px) { .pb-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pb-why { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pb-why__item { display: flex; gap: 0.65rem; align-items: flex-start; }
.pb-why__item .pb-icon { flex: none; margin-top: 0.15rem; color: var(--brand-accent-ink); }
.pb-why__item strong { display: block; }
.pb-why__item span { display: block; color: var(--ink-600); font-size: var(--fs-sm); }

/* --- Product showcase (tabs) ------------------------------------------- */
.pb-ess__heading { text-align: center; margin-bottom: var(--sp-4); }

.pb-ess__tabs {
  display: flex;
  /* One line, scrolled sideways when it does not fit, rather than wrapped. */
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pb-ess__tabs::-webkit-scrollbar { display: none; }
@media (min-width: 700px) {
  .pb-ess__tabs { justify-content: center; gap: var(--sp-5); overflow-x: visible; }
}
.pb-ess__tab {
  appearance: none;
  flex: none;
  white-space: nowrap;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0.75rem 0.25rem;
  font: inherit;
  font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
  color: var(--ink-400);
  border-bottom: 2px solid transparent;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.pb-ess__tab:hover { color: var(--ink-900); }
.pb-ess__tab[aria-selected="true"] {
  color: var(--ink-900);
  font-weight: 700;
  border-bottom-color: var(--brand-accent-ink);
}

.pb-ess__panel {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
}
@media (min-width: 900px) {
  .pb-ess__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-5); }
}
/* The panel is swapped with [hidden], which display:grid would otherwise win. */
.pb-ess__panel[hidden] { display: none; }
.pb-ess__panel:focus-visible { outline: none; }

.pb-ess__label {
  color: var(--brand-accent-ink);
  font-size: var(--fs-h5);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.pb-ess__text {
  font-size: clamp(1.375rem, 1rem + 1.4vw, 2.125rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink-700);
  text-wrap: balance;
}
.pb-ess__capacity { margin-top: var(--sp-2); font-weight: 700; color: var(--ink-900); }

.pb-ess__media {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
/* Fixed 16:9 frame so every tab has the same height and the section never
   jumps. Source shots are exported at 1600×900; cover handles any stray ratio. */
.pb-ess__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Featured products carousel ---------------------------------------- */
.pb-feat__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: var(--sp-3) 0 var(--sp-4);
}
.pb-pill {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-700);
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.pb-pill:hover { border-color: var(--ink-900); color: var(--ink-900); }
.pb-pill[aria-pressed="true"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

.pb-feat__viewport { position: relative; }

/* Native scroll-snap carousel — the arrows just scrollBy() one card. */
.pb-feat__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pb-feat__track::-webkit-scrollbar { display: none; }
.pb-feat__item {
  flex: 0 0 min(280px, 78vw);
  scroll-snap-align: start;
  display: flex;
}
.pb-feat__item[hidden] { display: none; }
.pb-feat__item > .pb-card { width: 100%; }

.pb-feat__nav {
  position: absolute;
  top: 34%;
  z-index: 2;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-900);
  cursor: pointer;
  box-shadow: 0 2px 10px rgb(17 18 19 / 0.12);
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
@media (min-width: 900px) { .pb-feat__nav { display: grid; } }
.pb-feat__nav:hover { background: var(--ink-900); color: #fff; }
.pb-feat__nav[disabled] { opacity: 0; pointer-events: none; }
.pb-feat__nav--prev { left: calc(-1 * var(--sp-3)); }
.pb-feat__nav--prev .pb-icon { transform: rotate(180deg); }
.pb-feat__nav--next { right: calc(-1 * var(--sp-3)); }

/* Card variant: image, title, button — and the whole body inverts on hover,
   the way the reference highlights the card under the pointer. */
.pb-card--feat .pb-card__media img { aspect-ratio: 4 / 3; object-fit: contain; }
.pb-card--feat .pb-card__media .pb-image-placeholder { aspect-ratio: 4 / 3; }
.pb-card--feat .pb-card__body {
  gap: var(--sp-3);
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.pb-card--feat .pb-card__title { font-size: var(--fs-h5); line-height: 1.35; }
.pb-card--feat .pb-card__cta { pointer-events: none; }
.pb-card--feat:hover,
.pb-card--feat:focus-within { border-color: var(--ink-900); }
.pb-card--feat:hover .pb-card__body,
.pb-card--feat:focus-within .pb-card__body { background: var(--ink-900); }
.pb-card--feat:hover .pb-card__title a,
.pb-card--feat:focus-within .pb-card__title a { color: #fff; }

/* --- Counters ---------------------------------------------------------- */
.pb-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .pb-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
}
.pb-stat { margin: 0; }
.pb-stat__value {
  font-size: clamp(1.85rem, 1.3rem + 2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--brand-accent-ink);
}
.pb-section--dark .pb-stat__value { color: var(--brand-accent); }
.pb-stat__label { margin: 0.35rem 0 0; color: var(--ink-600); font-size: var(--fs-sm); }
/* In a band of its own the rule and the top gap are redundant. */
.pb-section--dark .pb-stats { margin-top: 0; padding-top: 0; border-top: 0; }
.pb-section--dark .pb-stat__label { color: #b8bdbf; }

/* --- Icon feature cards ------------------------------------------------ */
.pb-feature {
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--speed) var(--ease);
}
.pb-feature:hover { border-color: var(--brand-accent); }
.pb-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: var(--sp-2);
  border-radius: var(--radius);
  background: var(--brand-accent-soft);
  color: var(--brand-accent-ink);
}
.pb-feature__title { font-size: var(--fs-h5); margin-bottom: 0.4rem; }
.pb-feature__text { margin: 0; color: var(--ink-600); font-size: var(--fs-sm); }

/* --- Numbered process list --------------------------------------------- */
.pb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.pb-step { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); align-items: start; }
.pb-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; height: 44px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  color: var(--brand-accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pb-step__title { font-size: var(--fs-h5); margin: 0 0 0.25rem; }
.pb-step__text { margin: 0; font-size: var(--fs-sm); }

/* --- Certification badges ---------------------------------------------- */
.pb-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.pb-badges li {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #d3d7d9;
}
.pb-section:not(.pb-section--dark) .pb-badges li { border-color: var(--line); color: var(--ink-600); }

/* --- Two-column media block -------------------------------------------- */
.pb-about__media img,
.pb-about__media .pb-image-placeholder { border-radius: var(--radius); width: 100%; }
.pb-about__media img { aspect-ratio: 16 / 11; object-fit: cover; }

/* ========================================================================== *
 *  PAGES — Products
 * ========================================================================== */

/* --- Category filter bar ------------------------------------------------- */
.pb-filter { margin-bottom: var(--sp-4); }
.pb-filter ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pb-filter a {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-600);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.pb-filter a:hover { border-color: var(--brand-accent); color: var(--brand-accent-ink); text-decoration: none; }
.pb-filter a[aria-current="page"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

/* --- Product detail layout ----------------------------------------------- */
.pb-product__top {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}
@media (min-width: 900px) {
  .pb-product__top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
}
.pb-product__tagline { color: var(--ink-600); font-size: 1.0625rem; }
.pb-product__intro { margin-top: var(--sp-2); color: var(--ink-600); }
.pb-product__intro > :last-child { margin-bottom: 0; }

/* --- Gallery -------------------------------------------------------------- */
.pb-gallery__main {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-alt);
}
.pb-gallery__main { background: var(--surface); }
.pb-gallery__main img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.pb-gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}
.pb-gallery__thumbs a {
  display: block;
  width: 76px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  overflow: hidden;
}
.pb-gallery__thumbs a[aria-current="true"],
.pb-gallery__thumbs a:hover { border-color: var(--brand-accent); }
.pb-gallery__thumbs img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--surface); }

/* --- Trade terms ---------------------------------------------------------- */
.pb-trade { margin: var(--sp-3) 0 0; border-top: 1px solid var(--line); }
.pb-trade__row {
  display: grid;
  grid-template-columns: minmax(9rem, 40%) 1fr;
  gap: var(--sp-2);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}
.pb-trade dt { margin: 0; color: var(--ink-400); font-size: var(--fs-sm); }
.pb-trade dd { margin: 0; font-size: var(--fs-sm); font-weight: 600; }

/* --- Key features --------------------------------------------------------- */
.pb-features {
  display: grid;
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) { .pb-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem var(--sp-4); } }
.pb-features li { display: grid; grid-template-columns: auto 1fr; gap: 0.65rem; align-items: start; }
.pb-features .pb-icon { color: var(--brand-accent-ink); margin-top: 0.15em; }

/* --- Spec table ----------------------------------------------------------- */
.pb-specs {
  min-width: 34rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.pb-specs th,
.pb-specs td { font-size: var(--fs-sm); }
.pb-specs thead th {
  background: var(--ink-900);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
}
.pb-specs tbody th { width: 42%; background: transparent; font-weight: 500; color: var(--ink-600); }
.pb-specs tbody td { font-weight: 600; }
.pb-specs tbody tr:nth-child(odd) :is(th, td) { background: var(--surface-alt); }
.pb-specs tbody tr:last-child :is(th, td) { border-bottom: 0; }

/* --- FAQ ------------------------------------------------------------------ */
.pb-faq { display: grid; gap: 0.6rem; max-width: 62rem; }
.pb-faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.pb-faq__item summary {
  padding: 0.95rem var(--sp-3);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.pb-faq__item summary::-webkit-details-marker { display: none; }
.pb-faq__item summary::after {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid var(--brand-accent-ink);
  border-bottom: 2px solid var(--brand-accent-ink);
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--speed) var(--ease);
}
.pb-faq__item[open] summary::after { transform: translateY(0.1em) rotate(-135deg); }
.pb-faq__answer { padding: 0 var(--sp-3) var(--sp-3); color: var(--ink-600); font-size: var(--fs-sm); }

/* Flat variant (homepage): no cards — hairline-separated rows in two columns,
   with a plus that turns into a cross. */
.pb-faq--flat { max-width: none; gap: 0; }
.pb-faq--flat .pb-faq__item {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.pb-faq--flat .pb-faq__col:last-child .pb-faq__item:last-child { border-bottom: 1px solid var(--line); }
.pb-faq--flat .pb-faq__item summary {
  align-items: start;
  gap: var(--sp-3);
  padding: 1.1rem 0;
  color: var(--ink-900);
  line-height: 1.35;
}
.pb-faq--flat .pb-faq__item summary:hover { color: var(--brand-accent-ink); }
.pb-faq--flat .pb-faq__item summary::after {
  content: "+";
  width: auto;
  height: auto;
  border: 0;
  color: var(--ink-400);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 0.9;
  transform: rotate(0deg);
}
.pb-faq--flat .pb-faq__item[open] summary::after { transform: rotate(45deg); }
.pb-faq--flat .pb-faq__item summary:hover::after { color: var(--brand-accent-ink); }
.pb-faq--flat .pb-faq__answer { padding: 0 var(--sp-4) 1.1rem 0; }

@media (min-width: 900px) {
  .pb-faq--flat { grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); }
  .pb-faq--flat .pb-faq__col .pb-faq__item:last-child { border-bottom: 1px solid var(--line); }
}

/* ========================================================================== *
 *  PAGES — Inquiry form & contact
 * ========================================================================== */
.pb-form__grid {
  display: grid;
  gap: var(--sp-2);
}
@media (min-width: 640px) {
  .pb-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); }
  .pb-field--message { grid-column: 1 / -1; }
}
.pb-field__error { color: #ff9a9a; font-size: var(--fs-xs); }
.pb-section:not(.pb-section--dark) .pb-field__error,
.pb-inquiry--bare .pb-field__error { color: #b3261e; }

.pb-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-3);
}
.pb-form__note { margin: 0; font-size: var(--fs-xs); color: var(--ink-400); max-width: 40ch; }
.pb-section--dark .pb-form__note { color: #9aa0a3; }

.pb-section--dark .pb-field > label { color: #e6e8e9; }
.pb-section--dark :is(input, select, textarea) {
  /* background-color, not the `background` shorthand: the shorthand resets
     background-image and takes the select's arrow with it. */
  background-color: rgb(255 255 255 / 0.05);
  border-color: var(--line-dark);
  color: #fff;
}
.pb-section--dark :is(input, textarea)::placeholder { color: #7d8386; }
.pb-section--dark select {
  background-image: linear-gradient(45deg, transparent 50%, #b8bdbf 50%),
                    linear-gradient(135deg, #b8bdbf 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.75rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.pb-section--dark select option { color: var(--ink-900); }
.pb-section--dark .pb-notice--ok { background: rgb(112 197 0 / 0.12); color: #fff; }
.pb-section--dark .pb-notice--error { background: rgb(198 40 40 / 0.14); border-color: #7f3232; color: #ffd9d9; }

/* --- Contact page --------------------------------------------------------- */
.pb-contact__intro { max-width: 62ch; margin: 0 auto var(--sp-4); text-align: center; }
.pb-contact__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4) var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  text-align: center;
}
.pb-contact__cards h2 { font-size: var(--fs-h4); margin: 0 0 var(--sp-2); }
.pb-contact__cards p { margin: 0; }
.pb-contact__social { justify-content: center; margin-top: var(--sp-4); }
.pb-contact__form :is(input, select, textarea) { background-color: var(--surface); }

.pb-hours { margin: 0; display: grid; gap: 0.2rem; }
.pb-hours > div { display: grid; grid-template-columns: minmax(6rem, auto) 1fr; gap: var(--sp-2); }
.pb-hours dt { margin: 0; color: var(--ink-400); }
.pb-hours dd { margin: 0; }

/* ========================================================================== *
 *  PAGES — Blog & About
 * ========================================================================== */
.pb-blog { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) {
  .pb-blog { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-6); align-items: start; }
}
.pb-blog__main { min-width: 0; }
.pb-blog__main .pb-stack--lg { gap: var(--sp-4); }

/* Wide archive card: media beside the text from tablet up.
   The archive reads as a list of articles, not a wall of tiles, so these carry
   no frame — spacing separates them instead. */
.pb-card--wide {
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.pb-card--wide:hover { border-color: transparent; }
.pb-card--wide .pb-card__media { border-radius: var(--radius); overflow: hidden; }

@media (min-width: 640px) {
  /* Fixed column, not a percentage, and the row does not stretch it: every
     thumbnail is the same size no matter how long its title runs. */
  .pb-card--wide {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: start;
  }
  .pb-card--wide .pb-card__media { aspect-ratio: 3 / 2; }
  .pb-card--wide .pb-card__media img,
  .pb-card--wide .pb-card__media .pb-image-placeholder {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .pb-card--wide .pb-card__body { padding: 0; justify-content: flex-start; }
}
.pb-card--wide .pb-card__title { font-size: var(--fs-h4); }
/* Clamp so a long title or excerpt cannot stretch one card past the others. */
.pb-card--wide .pb-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.pb-card--wide .pb-card__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* --- Sidebar --------------------------------------------------------------- */
.pb-blog__side { display: grid; gap: var(--sp-3); }
.pb-widget {
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pb-widget h2 {
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: var(--sp-2);
}
.pb-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pb-widget li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.pb-widget a { color: var(--ink-900); font-size: var(--fs-sm); font-weight: 500; }
.pb-widget a:hover { color: var(--brand-accent-ink); text-decoration: none; }
.pb-widget li > span { color: var(--ink-400); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.pb-widget__posts li { display: block; }
.pb-widget__posts a { display: grid; grid-template-columns: 64px 1fr; gap: 0.75rem; align-items: center; }
.pb-widget__posts img,
.pb-widget__posts .pb-image-placeholder { width: 64px; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-btn); }
.pb-widget--cta { background: var(--ink-900); border-color: var(--ink-900); color: #c9cdcf; }
.pb-widget--cta h2 { color: #fff; }
.pb-widget--cta p { font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.pb-widget .pb-searchform { flex-direction: column; }
.pb-widget .pb-searchform .pb-btn { width: 100%; justify-content: center; }

/* --- Tags & post navigation ------------------------------------------------ */
.pb-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.pb-tags a {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-600);
  font-size: var(--fs-xs);
}
.pb-tags a:hover { border-color: var(--brand-accent); color: var(--brand-accent-ink); text-decoration: none; }

.pb-postnav { display: grid; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
@media (min-width: 640px) { .pb-postnav { grid-template-columns: 1fr 1fr; gap: var(--sp-3); } }
.pb-postnav__link {
  display: grid;
  gap: 0.2rem;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-900);
}
.pb-postnav__link:hover { border-color: var(--brand-accent); text-decoration: none; }
.pb-postnav__link span { color: var(--ink-400); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; }
.pb-postnav__link strong { font-size: var(--fs-sm); font-weight: 600; }
.pb-postnav__link--next { text-align: right; }

/* --- About: facility gallery ----------------------------------------------- */
.pb-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 900px) { .pb-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); } }
.pb-figures li { display: grid; gap: 0.4rem; }
.pb-figures img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.pb-figures span { color: var(--ink-400); font-size: var(--fs-xs); }

/* --- Quality control / certification cards ------------------------------ */
.pb-qc {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  height: 100%;
}
.pb-qc__title { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.pb-qc__text { color: var(--ink-600); font-size: var(--fs-sm); }
.pb-qc__text + .pb-qc__text { margin-top: 0.6rem; }
/* .pb-step is tuned for the dark band; soften it on this light card. */
.pb-section:not(.pb-section--dark) .pb-step__num {
  border-color: var(--line);
  color: var(--brand-accent-ink);
}
.pb-certs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) { .pb-certs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pb-certs li {
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.pb-certs img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; }

/* --- Strength band ------------------------------------------------------ */
/* The photo bleeds to the viewport edge behind the cards, so this band owns
   its own rounding and shadow rather than the flat site-wide card tokens. */
.pb-strength-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #fff 0%, var(--surface-alt) 100%);
}
.pb-strength-band__title {
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-2);
}
.pb-hl { color: var(--brand-accent-ink); }
.pb-eyebrow--rule::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  margin-right: 0.7rem;
  vertical-align: 0.25em;
  background: var(--brand-accent);
}
.pb-strength-band__text {
  color: var(--ink-600);
  font-size: 1.0625rem;
  max-width: 44ch;
}
.pb-strength-grid { margin-top: var(--sp-4); }

.pb-strength {
  padding: var(--sp-3);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.82);
  box-shadow: 0 2px 14px rgb(17 18 19 / 0.06);
  transition: box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.pb-strength:hover { box-shadow: 0 6px 22px rgb(17 18 19 / 0.1); transform: translateY(-2px); }
.pb-strength__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: var(--sp-2);
  border-radius: 50%;
  background: var(--brand-accent-soft);
  color: var(--brand-accent-ink);
}
.pb-strength__title {
  font-size: var(--fs-h5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.pb-strength__text { margin: 0; color: var(--ink-600); font-size: var(--fs-sm); }

/* Mobile and tablet: photo sits below the cards. */
.pb-strength-band__media { margin-top: var(--sp-4); border-radius: 14px; overflow: hidden; }
.pb-strength-band__media img { display: block; width: 100%; height: auto; }

@media (min-width: 1100px) {
  /* Content stops short of where the photo starts, so the right-hand cards
     are never clipped by it. */
  .pb-strength-band__content { max-width: 50%; padding-right: var(--sp-4); }
  .pb-strength-band__media {
    position: absolute;
    inset: 0 0 0 53%;
    margin: 0;
    border-radius: 0;
  }
  .pb-strength-band__media :is(img, .pb-image-placeholder) {
    width: 100%; height: 100%;
    object-fit: cover;
  }
  /* Fades the photo into the gradient so the right-hand cards stay readable. */
  .pb-strength-band__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--surface-alt) 0%, rgb(243 244 244 / 0) 30%);
  }
  .pb-strength-band__inner { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-strength { transition: none; }
  .pb-strength:hover { transform: none; }
}

/* --- Products mega-menu ------------------------------------------------- */
/* Hidden below the desktop breakpoint — the drawer covers small screens. */
.pb-mega { display: none; }

@media (min-width: 1000px) {
  .pb-mega {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--ink-800);
    border-top: 1px solid var(--line-dark);
    box-shadow: 0 18px 40px rgb(0 0 0 / 0.35);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);
    will-change: opacity, transform;
  }
  /* An author `display: block` outranks the UA rule for [hidden], so the
     closed state has to be restated here. */
  .pb-mega[hidden] { display: none; }
  .pb-mega.is-open { opacity: 1; transform: translateY(0); }

  .pb-mega__inner {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: var(--sp-4);
    padding-block: var(--sp-3);
    max-height: calc(100vh - var(--header-h) - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .pb-mega__cats {
    list-style: none;
    margin: 0;
    padding: 0 var(--sp-3) 0 0;
    border-right: 1px solid var(--line-dark);
    display: grid;
    align-content: start;
    gap: 0.25rem;
  }
  .pb-mega__cat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    color: #e6e8e9;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background 180ms var(--ease), color 180ms var(--ease);
  }
  .pb-mega__cat:hover,
  .pb-mega__cat:focus-visible { color: #fff; text-decoration: none; background: rgb(255 255 255 / 0.06); }
  .pb-mega__cat.is-active { background: var(--brand-accent); color: var(--ink-900); }
  .pb-mega__cat-icon {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: var(--radius);
    overflow: hidden;
  }
  .pb-mega__cat-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Panes are stacked so a switch cross-fades in place instead of the panel
     collapsing to the height of the incoming pane. */
  .pb-mega__panes { display: grid; }
  .pb-mega__pane {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  }
  .pb-mega__pane.is-active { opacity: 1; transform: translateY(0); }

  .pb-mega__title { font-size: var(--fs-h5); color: #fff; margin: 0 0 var(--sp-3); }
  .pb-mega__title a { color: inherit; text-decoration: none; }
  .pb-mega__title a:hover { color: var(--brand-accent); }

  .pb-mega__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
  }
  .pb-mega__item {
    display: block;
    padding: 0.75rem;
    border-radius: var(--radius);
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: background 180ms var(--ease), transform 180ms var(--ease);
  }
  .pb-mega__item:hover,
  .pb-mega__item:focus-visible { background: rgb(255 255 255 / 0.06); text-decoration: none; transform: translateY(-3px); }
  .pb-mega__item-media {
    display: block;
    margin-bottom: 0.7rem;
    border-radius: var(--radius);
    overflow: hidden;
    background: rgb(255 255 255 / 0.04);
  }
  .pb-mega__item-media :is(img, .pb-image-placeholder) {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
  }
  .pb-mega__item-name { display: block; font-weight: 700; font-size: 0.9375rem; }
  .pb-mega__item-text { display: block; margin-top: 0.3rem; color: #b8bdbf; font-size: var(--fs-xs); line-height: 1.45; }

  /* The panel is the catalogue item's own submenu, so suppress the generic one. */
  .pb-nav .pb-menu-mega > .sub-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pb-mega, .pb-mega__pane, .pb-mega__item { transition-duration: 1ms; }
  .pb-mega__item:hover { transform: none; }
}

/* --- About: photo mosaic ------------------------------------------------ */
/* First image spans the row, the next two sit under it — a 1-up or 2-up set
   still fills the grid without any special casing. */
.pb-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.pb-mosaic__item { position: relative; margin: 0; overflow: hidden; }
.pb-mosaic__item:first-child { grid-column: 1 / -1; }
.pb-mosaic :is(img, .pb-image-placeholder) {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.pb-mosaic__item:not(:first-child) :is(img, .pb-image-placeholder) { aspect-ratio: 4 / 3; }
/* Caption sits on the photo, as a label strip like the reference layout. */
.pb-mosaic figcaption {
  position: absolute;
  left: 0; bottom: 0;
  max-width: 100%;
  padding: 0.35rem 0.7rem;
  background: var(--brand-accent);
  color: var(--ink-900);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* --- Location band ------------------------------------------------------ */
.pb-location { background: var(--brand-accent); color: var(--ink-900); }
.pb-location__inner {
  display: grid;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  align-items: center;
}
@media (min-width: 900px) {
  .pb-location__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sp-5); }
}
.pb-location__name { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); margin-bottom: var(--sp-2); }
.pb-location__address { margin: 0; font-size: 1.0625rem; line-height: 1.7; }
.pb-location__meta { margin: var(--sp-3) 0 0; display: grid; gap: 0.4rem; font-size: var(--fs-sm); }
.pb-location__meta > div { display: grid; grid-template-columns: minmax(10rem, auto) 1fr; gap: 0.75rem; }
.pb-location__meta dt { font-weight: 600; }
.pb-location__meta dd { margin: 0; }
.pb-location__meta a { color: inherit; text-decoration: underline; }
.pb-location__map {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 4 / 3;
}
.pb-location__map :is(iframe, .pb-image-placeholder) {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ========================================================================== *
 *  SCROLL REVEAL & PARALLAX
 * ========================================================================== */

/* The [data-reveal] hook is stamped on by main.js, never by the markup, so
   these rules can only hide what JS is also able to bring back: no script,
   no hidden content. Stagger comes from --reveal-delay, also set by JS. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
      opacity 700ms var(--ease-reveal) var(--reveal-delay, 0ms),
      transform 700ms var(--ease-reveal) var(--reveal-delay, 0ms);
  }
  [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* --- Parallax ------------------------------------------------------------
 * Scroll-driven animations: the compositor runs these off the main thread and
 * there is no scroll listener anywhere. Browsers without the feature simply
 * get the still frame, which is the design as it stands today. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    /* Hero sits at the top of the page, so it is driven by the document's own
       scroll over the first viewport rather than by its entry into one. */
    .pb-hero__bg > img,
    .pb-hero__bg > video {
      animation: pb-parallax-hero linear both;
      animation-timeline: scroll();
      animation-range: 0 100vh;
    }

    .pb-ess__media img,
    .pb-strength-band__media img,
    .pb-pagehero__bg img {
      animation: pb-parallax-media linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

/* The overscale is what the drift eats into — without it the frame edge would
   swing into view at either end. */
@keyframes pb-parallax-hero {
  from { transform: translate3d(0, -4%, 0) scale(1.12); }
  to   { transform: translate3d(0, 4%, 0) scale(1.12); }
}
@keyframes pb-parallax-media {
  from { transform: translate3d(0, -3.5%, 0) scale(1.09); }
  to   { transform: translate3d(0, 3.5%, 0) scale(1.09); }
}

/* Language switcher (Polylang) - tab pair.
   ponytail: pll_the_languages() returns bare <li>, so the theme supplies the
   <ul>. Colours assume a dark bar - the header and drawer are both --ink-900. */
.pb-langs__list {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 2px;
	list-style: none;
	border: 1px solid rgb(255 255 255 / 0.22);
	border-radius: 999px;
}
.pb-langs__list li { margin: 0; list-style: none; }
.pb-langs__list a {
	display: block;
	padding: 0.28rem 0.6rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: rgb(255 255 255 / 0.72);
	transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.pb-langs__list a:hover { color: #fff; }
.pb-langs__list .current-lang a { background: #fff; color: var(--ink-900); }
.pb-langs__list a:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.pb-drawer__langs { margin-top: 1rem; }