/* ==========================================================================
   LIQUID RUBBER WORLDWIDE -- Unified Global Stylesheet
   Covers: reset, tokens, header, slide-panel, side-rail, inner-page hero,
   buttons, cards, footer, scroll animations.
   All desktop styles for the entire site consolidated in one file.
   Responsive overrides live in responsive.css.
   ========================================================================== */

/* ===== FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

/* ===== CSS VARIABLES ===== */
:root {
  --black: #0E1414;
  --char: #1A2020;
  --line: #2F3838;
  --line-soft: #E2E5E0;
  --paper: #F4F5F1;
  --paper-2: #ECEEE7;
  --ink: #0E1414;
  --muted: #5C6363;        /* body grey on LIGHT bg  -- 5.61:1 on paper, AA pass */
  --muted-2: #646A66;      /* secondary grey on LIGHT bg -- 5.05:1 on paper, AA pass */
  --muted-dark: #B5B8B0;   /* body grey on DARK bg  -- 9.26:1 on ink, AA pass */

  /* ============================================================
     BRAND COLOUR SYSTEM (client change request, Section 0)
     Only THREE brand colours besides the grey paper background:
       • Black  -> --ink / --black
       • Green  -> MetLar(TM)   -> --green   (the OFFICIAL logo green)
       • Orange -> BaseLar(TM)  -> --orange
     Per client: the ENTIRE site uses ONE green only -- the logo green
     #39d51f. Every earlier green shade has been collapsed into it and no
     new variant may be introduced, including for contrast reasons. To
     rebrand the green later, change the single value in all three tokens.
     ============================================================ */

  /* MetLar(TM) green -- single logo green, no variations */
  /* CLIENT RULE, NON-NEGOTIABLE: exactly ONE green on the entire site --
     the logo green #39d51f. No darker or lighter variants, no shades, no
     "accessible" alternative for light backgrounds. All three tokens below
     are the same value and are kept only as names, so existing selectors
     keep working. To rebrand the green later, change all three here.
     Known trade-off, accepted by the client: #39d51f measures 1.79:1 on the
     light paper background, under the 4.5:1 WCAG AA minimum. It is 9.49:1
     on the dark backgrounds and passes there. */
  --green: #39d51f;       /* logo green */
  --green-dk: #39d51f;    /* same logo green (token alias) */
  --green-deep: #39d51f;  /* same logo green (token alias) */

  /* BaseLar(TM) orange (aligned to the existing #E5791A BaseLar tint) */
  --orange: #E5791A;      /* brand orange (fills, accents) */
  --orange-dk: #E5791A;   /* unified orange */
  --orange-deep: #B45A12; /* dark orange for small text/icons on light bg (readability) */

  --white: #ffffff;

  /* ============================================================
     ICON SYSTEM
     Three tile sizes for the whole site, nothing else. Every icon
     tile is a SQUARE (no border-radius anywhere -- client rule) and
     its glyph is sized by the tier, so inline width/height on the
     SVG never decides the size.
     ============================================================ */
  --icon-sm:        44px;   /* compact tiles; also the 44px tap-target minimum */
  --icon-sm-glyph:  20px;
  --icon-md:        56px;   /* the standard card icon */
  --icon-md-glyph:  24px;
  --icon-lg:        64px;   /* prominent: contact band, process steps, badges */
  --icon-lg-glyph:  28px;
  --avatar:         48px;   /* author / testimonial portraits */
  --icon-art:       64px;   /* bare illustration SVGs with no tile behind them */

  /* ============================================================
     TYPE SCALE
     One scale for the whole site, built on a 16px body minimum.
     Nothing goes below 12px. Body copy and every <p> sit at 16px
     or above at every breakpoint. Change a value here and it
     updates everywhere that references the token.
     ============================================================ */
  --fs-2xs:  12px;   /* badges, tiny uppercase labels (hard floor) */
  --fs-xs:   13px;   /* tags, chips, table meta */
  --fs-sm:   14px;   /* nav links, buttons, eyebrows, captions */
  --fs-base: 16px;   /* BODY COPY minimum */
  --fs-md:   18px;   /* lead paragraphs, intro text */
  --fs-lg:   20px;   /* h5, card titles */
  --fs-xl:   22px;   /* h4 */
  --fs-2xl:  26px;   /* h3 */
  --fs-3xl:  30px;
  --fs-4xl:  34px;   /* h2 small */
  --fs-5xl:  40px;
  --fs-6xl:  46px;   /* h2 large */
  --fs-7xl:  56px;   /* h1 */
  --fs-8xl:  64px;
  --fs-9xl:  76px;   /* display / stat numerals */

  --container: 1600px;

  /* Height of the fixed .top-nav. Anything that sticks or scrolls to an anchor
     has to clear it, so it lives here rather than being repeated as a magic
     number. The responsive stylesheet keeps this in step with the nav's own
     height at each breakpoint. */
  --header-h: 100px;
}


/* ==========================================================================
   RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

html { scroll-padding-top: calc(var(--header-h) + 20px); }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

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

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}


/* ==========================================================================
   GLOBAL HEADINGS
   ========================================================================== */
h1, h2, h3, h4, h5 {
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.02;
  text-transform: uppercase;
}


/* ==========================================================================
   GLOBAL UTILITY CLASSES
   ========================================================================== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 60px;
}

.eyebrow-tag {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 16px;
}

.eyebrow-tag--green {
  color: var(--green);
}

.section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
}

.section-head-row h2 {
  font-weight: 900;
  font-size: clamp(40px, 4.1vw, 56px);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1;
}

.section-subtitle {
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.65;
  max-width: 520px;
  margin-top: 18px;
}

.section-desc-right {
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.7;
  max-width: 480px;
}

/* Text color utilities */
.text-green      { color: var(--green); }
.text-green-deep { color: var(--green-deep); }
.text-muted      { color: var(--muted); }
.text-paper      { color: var(--paper); }


/* ==========================================================================
   HEADER / TOP NAV
   ========================================================================== */
.top-nav {
  background: var(--paper);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 260px 1fr 80px;
  align-items: stretch;
  height: 100px;
  border-bottom: 1px solid var(--line-soft);
}

.brand-cell {
  background: var(--paper);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-right: 1px solid var(--line-soft);
}

.logo-img {
  height: 72px;
  width: auto;
  display: block;
}

/* Logo shield (CSS-only logo variant from pages-shared) */
.logo-shield {
  background: var(--green);
  padding: 8px 14px 6px;
  border-radius: 0;
  position: relative;
  border: 2px solid var(--green-dk);
}
.logo-shield::before,
.logo-shield::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 18px;
  background: var(--green);
  border: 2px solid var(--green-dk);
}
.logo-shield::before { left: -8px; border-right: none; border-radius: 0; }
.logo-shield::after  { right: -8px; border-left: none; border-radius: 0; }
.logo-shield .lr-1 {
  font-weight: 900; font-size: var(--fs-lg); color: var(--black);
  line-height: 0.95; letter-spacing: -0.02em;
}
.logo-shield .lr-2 {
  font-weight: 700; font-size: var(--fs-2xs); color: var(--green);
  letter-spacing: 0.22em; text-align: center; margin-top: 2px;
  background: var(--black); padding: 2px 4px;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 38px;
}

.nav-links a {
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding: 8px 0;
  transition: color 0.2s;
}

.nav-links a.active,
.nav-links a:hover {
  color: var(--green-deep);
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 0;
}

/* Brand-coloured nav items: MetLar hovers green (site default),
   BaseLar hovers orange with an orange active dot */
.nav-links a.nav-link--orange.active,
.nav-links a.nav-link--orange:hover {
  color: var(--orange-deep);
}

.nav-links a.nav-link--orange.active::after {
  background: var(--orange);
}

.menu-cell {
  border-left: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.menu-cell:hover {
  background: var(--paper-2);
}

.menu-cell .lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.menu-cell .lines span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  display: block;
  transition: all 0.3s ease;
}

.menu-cell .lines span:nth-child(2) {
  width: 16px;
}


/* ==========================================================================
   SLIDE PANEL (Desktop contact + Mobile nav & contact)
   ========================================================================== */
/* SLIDE PANEL - Redesigned compact mobile menu */
.slide-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 460px;
  height: 100vh;
  height: 100dvh;
  background: var(--char);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
}

.slide-panel.is-open {
  right: 0;
}

/* Panel header */
.slide-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.slide-panel__logo {
  height: 32px;
  width: auto;
}

.slide-panel__close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  cursor: pointer;
  border-radius: 0;
  border: 1px solid var(--line);
  transition: all 0.2s;
}

.slide-panel__close:hover {
  background: var(--green);
  color: var(--ink);
  border-color: var(--green);
}

/* Navigation */
.slide-panel__nav {
  display: none;
  flex-direction: column;
  padding: 16px 28px;
  flex: 1;
}

.slide-panel__nav > a {
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s;
  display: block;
}

.slide-panel__nav > a:hover,
.slide-panel__nav > a.active {
  color: var(--green);
}

/* Collapsible group (Products, About) */
.panel-group {
  border-bottom: 1px solid var(--line);
}

.panel-group__toggle {
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 13px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.2s;
  user-select: none;
}

.panel-group__toggle:hover,
.panel-group__toggle.active {
  color: var(--green);
}

.panel-toggle-arrow {
  transition: transform 0.3s ease;
}

.panel-group.is-expanded .panel-toggle-arrow {
  transform: rotate(90deg);
}

.panel-group__sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 0 0 16px;
}

.panel-group.is-expanded .panel-group__sub {
  max-height: 300px;
  padding: 0 0 10px 16px;
}

.panel-group__sub a {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 8px 0;
  color: var(--muted-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s, padding-left 0.2s;
}

.panel-group__sub a:hover {
  color: var(--green);
  padding-left: 8px;
}

/* ==========================================================================
   SLIDE PANEL -- DESKTOP CONTACT BLOCK
   Shown only on desktop (where .slide-panel__nav is hidden). Hidden on mobile.
   Also: hide the bottom quick-icon row on desktop since the rich block
   above replaces it (keep socials visible).
   ========================================================================== */
@media (min-width: 992px) {
  /* Scoped with .slide-panel so it beats the later base .slide-panel__quick rule. */
  .slide-panel .slide-panel__quick { display: none; }
  .slide-panel__bottom { padding-top: 18px; padding-bottom: 22px; }
}

.slide-panel__contact {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px 32px;
  overflow-y: auto;
}
.slide-panel__contact .sp-eyebrow {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.slide-panel__contact .sp-heading {
  font-size: var(--fs-3xl);
  font-weight: 900;
  color: var(--paper);
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}
.slide-panel__contact .sp-acc { color: var(--green); }
.slide-panel__contact .sp-lede {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #B5B8B0;
  margin-bottom: 22px;
}
.sp-contact-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.sp-contact-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 14px;
  align-items: start;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 0;
  color: var(--paper);
  transition: all 0.25s;
}
.sp-contact-card:hover {
  background: rgba(57,213,31,0.08);
  border-left-color: var(--green);
  transform: translateX(2px);
}
.sp-cc-ic {
  width: var(--icon-sm);
  height: var(--icon-sm);
  background: var(--ink);
  color: var(--green);
  border-radius: 0;
  display: grid;
  place-items: center;
}
.sp-cc-ic svg { width: 18px; height: 18px; }
.sp-cc-label {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.sp-cc-val {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--paper);
  line-height: 1.3;
  word-break: break-word;
}
.sp-cc-meta {
  font-size: var(--fs-2xs);
  color: var(--muted-dark);
  margin-top: 3px;
  line-height: 1.4;
}
.sp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--green);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.25s;
  margin-top: auto;
  border: 2px solid var(--green);
}
.sp-cta:hover {
  background: transparent;
  color: var(--green);
}
.sp-cta-arrow { transition: transform 0.25s; }
.sp-cta:hover .sp-cta-arrow { transform: translateX(4px); }


/* Bottom area - quick contacts + socials */
.slide-panel__bottom {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  padding: 20px 28px 24px;
  margin-top: auto;
}

.slide-panel__quick {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.sq-icon {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--paper);
  transition: all 0.25s;
  text-decoration: none;
}

.sq-icon:hover {
  background: var(--green);
  color: var(--ink);
  border-color: var(--green);
}

.sq-icon span {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Socials row */
.slide-panel__socials {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.slide-panel__socials a {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,0.06);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  transition: all 0.2s;
}

.slide-panel__socials a:hover {
  background: var(--green);
  color: var(--ink);
}

/* Menu overlay */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 20, 20, 0.6);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.menu-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}


/* ==========================================================================
   SIDE RAIL
   ========================================================================== */
.side-rail {
  position: fixed;
  left: 0;
  top: 100px;
  width: 60px;
  bottom: 0;
  border-right: 1px solid var(--line-soft);
  background: var(--paper);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 40px 0;
}

.side-rail .socials {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.side-rail .socials a {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--fs-2xs);
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.2s;
}

.side-rail .socials a:hover {
  color: var(--green-deep);
}

.side-rail .socials a::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--green);
  border-radius: 0;
}

.side-rail .scroll-down {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--fs-2xs);
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 14px;
}

.side-rail .scroll-down::after {
  content: '';
  display: block;
  width: 1px;
  height: 50px;
  background: var(--ink);
}


/* ==========================================================================
   MAIN
   ========================================================================== */
main {
  padding-left: 60px;
  padding-top: 100px;
}


/* ==========================================================================
   INNER PAGE HERO (banner for all inner pages)
   ========================================================================== */
.page-hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding: 96px 0 80px;
  overflow: hidden;
  border-bottom: 4px solid var(--green);
  min-height: 420px;
  display: flex;
  align-items: flex-end;
}

/* Hero background image (via <img> tag for per-page flexibility) */
.page-hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}/* square grid pattern removed per client request */


.page-hero::after {
  content: '';
  position: absolute;
  right: -100px;
  top: -100px;
  width: 480px;
  height: 480px;
  border-radius: 0;
  background: radial-gradient(circle, rgba(57,213,31,0.18), transparent 60%);
  pointer-events: none;
}

.page-hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.page-hero .breadcrumbs {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-bottom: 28px;
}

.page-hero .breadcrumbs a:hover {
  color: var(--green);
}

.page-hero .breadcrumbs .sep {
  color: var(--green);
}

.page-hero .breadcrumbs .current {
  color: var(--green);
}

.page-hero h1 {
  font-weight: 900;
  font-size: clamp(40px, 5.0vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 1000px;
  margin-bottom: 24px;
}

.page-hero h1 .acc {
  color: var(--green);
}

.page-hero .lede {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: #C7CCC0;
  max-width: 720px;
  font-weight: 500;
}

.page-hero .ph-meta {
  margin-top: 40px;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.page-hero .ph-meta .m .l {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--green);
  text-transform: uppercase;
}

.page-hero .ph-meta .m .v {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: #fff;
  margin-top: 8px;
  letter-spacing: -0.01em;
  line-height: 1;
}


/* ==========================================================================
   BUTTONS (global system)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all 0.2s;
  cursor: pointer;
  border: 2px solid transparent;
}

.btn-green {
  background: var(--green);
  color: var(--ink);
  border-color: var(--green);
}
.btn-green:hover {
  background: var(--ink);
  color: var(--green);
}

.btn-dark {
  background: var(--ink);
  color: var(--green);
  border-color: var(--ink);
}
.btn-dark:hover {
  background: var(--green);
  color: var(--ink);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--green);
}

.btn-outline-green {
  background: transparent;
  color: var(--green);
  border-color: var(--green);
}
.btn-outline-green:hover {
  background: var(--green);
  color: var(--ink);
}


/* ==========================================================================
   CARDS (utility)
   ========================================================================== */
.card {
  background: #fff;
  border: 1px solid var(--line-soft);
  padding: 32px;
  transition: all 0.25s;
}

.card:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
}


/* ==========================================================================
   FOOTER (original homepage design -- used across all pages)
   ========================================================================== */
footer {
  background: var(--black);
  color: #B5B8B0;
  padding: 0 0 30px;
  position: relative;
}

/* Green line at top */
.footer-green-line {
  height: 5px;
  background: var(--green);
}

/* Footer grid -- 5 columns */
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding: 70px 0 50px;
  border-bottom: 1px solid var(--line);
}

.footer-grid h4 {
  font-size: var(--fs-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 22px;
  font-weight: 800;
}

.footer-grid ul {
  list-style: none;
}

.footer-grid ul li {
  margin-bottom: 13px;
}

.footer-grid ul li a {
  font-size: var(--fs-base);
  color: #B5B8B0;
  transition: color 0.2s;
  font-weight: 500;
}

.footer-grid ul li a:hover {
  color: var(--green);
}

/* Footer brand block */
.footer-brand .tag {
  color: #B5B8B0;
  font-size: var(--fs-base);
  line-height: 1.7;
  margin: 0 0 28px;
  max-width: 360px;
  font-weight: 500;
}

/* Footer socials -- rounded squares */
.footer-socials {
  display: flex;
  gap: 10px;
}

.footer-socials a {
  width: 40px;
  height: 40px;
  background: var(--char);
  border: none;
  border-radius: 0;
  display: grid;
  place-items: center;
  color: #B5B8B0;
  transition: all 0.2s;
}

.footer-socials a:hover {
  background: var(--green);
  color: var(--ink);
}

/* Footer address block */
.footer-addr {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: #B5B8B0;
}

.footer-addr .addr-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  color: var(--green);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.footer-addr .addr-block {
  margin-bottom: 24px;
}

.footer-addr .addr-val {
  color: var(--paper);
  font-weight: 500;
}

/* Footer bottom bar */
.footer-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  font-size: var(--fs-xs);
  color: var(--muted-dark);
  font-weight: 500;
}

.footer-bot .right {
  display: flex;
  gap: 32px;
}


/* ==========================================================================
   HEADER DROPDOWN (Products sub-menu)
   ========================================================================== */

.has-dropdown { position: relative; }

.dd-arrow {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 4px;
  vertical-align: middle;
  transition: transform 0.3s ease;
}
.dd-arrow svg { width: 100%; height: 100%; }

.has-dropdown:hover .dd-arrow { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 220px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 1000;
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

.has-dropdown:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Invisible bridge so mouse can travel from nav-link to dropdown */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.nav-dropdown .dd-label {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 6px 12px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.nav-dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.2s ease;
}
.nav-dropdown a:hover {
  background: var(--paper-2);
  color: var(--green-deep);
}


/* ==========================================================================
   FILTER BAR (shared) -- used by applications, blog, careers,
   case-studies, downloads, events pages
   ========================================================================== */
.filter-bar {
  display: flex;
  gap: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
  width: max-content;
  max-width: 100%;
  flex-wrap: wrap;
  overflow: hidden;
}

.filter-bar button {
  background: transparent;
  border: none;
  padding: 14px 22px;
  font-family: inherit;
  font-weight: 800;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink);
  border-right: 1px solid var(--ink);
  transition: all 0.2s;
}

.filter-bar button:last-child {
  border-right: none;
}

.filter-bar button:hover,
.filter-bar button.active {
  background: var(--green);
  color: var(--ink);
}

/* Native select (mobile only) -- created by custom.js
   Desktop: hidden. Mobile (<= 767px): shown, buttons hidden. */
.filter-bar .filter-select {
  display: none;
  width: 100%;
  padding: 14px 44px 14px 18px;
  border: 1px solid var(--ink);
  background-color: var(--white);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'><path d='M1 1l6 6 6-6' stroke='%230E1414' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px 8px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  border-radius: 0;
}

.filter-bar .filter-select:focus {
  border-color: var(--green-deep);
  box-shadow: 0 0 0 3px rgba(57,213,31,0.25);
}


/* ==========================================================================
   HOMEPAGE -- HERO
   ========================================================================== */
.hero {
  position: relative;
  /* min-height keeps the banner substantial on short content, while the
     vertical padding guarantees breathing room above the eyebrow and below
     the slider dots no matter how tall the copy runs. Mobile already uses
     this padding-based model further down in responsive.css. */
  min-height: 820px;
  padding: 120px 0;
  background: #0a0a0a;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Hero Slider */
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.hero-slide.active {
  opacity: 1;
}

.hero .hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Hero Slider Nav */
.hero-slider-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 0;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: all 0.3s;
}

.hero-dot.active {
  background: var(--green);
  width: 32px;
  border-radius: 0;
}

.hero-slider-label {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--green);
  margin-left: 10px;
  text-transform: uppercase;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14,20,20,0.85) 0%, rgba(14,20,20,0.55) 50%, rgba(14,20,20,0.2) 100%);
  z-index: 1;
}/* square grid pattern removed per client request */


.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 60px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 28px;
}

.hero-eyebrow .bar {
  width: 32px;
  height: 2px;
  background: var(--green);
}

.hero h1 {
  font-weight: 900;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--white);
  max-width: 920px;
  margin-bottom: 36px;
}

.hero h1 .accent {
  color: var(--green);
  font-style: normal;
}

.hero-desc {
  color: #cfd2c8;
  font-size: var(--fs-md);
  line-height: 1.65;
  max-width: 820px;
  margin-bottom: 36px;
  font-weight: 500;
}

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

/* Play button (small -- hero) */
.play-btn {
  width: 60px;
  height: 60px;
  background: var(--green);
  color: var(--ink);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.play-btn::before,
.play-btn::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(57,213,31,0.5);
  border-radius: 0;
  animation: ripple 2.4s infinite;
}

.play-btn::after {
  animation-delay: 1.2s;
}

@keyframes ripple {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

.play-btn svg {
  margin-left: 3px;
}


/* ==========================================================================
   HOMEPAGE -- CONTACT BAND (3 Info Cards)
   ========================================================================== */
.contact-band {
  position: relative;
  z-index: 5;
  background: var(--char);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.contact-bar {
  background: var(--char);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  color: var(--paper);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 60px;
}

.contact-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 26px;
  padding: 64px 44px;
  transition: background 0.35s ease;
}

.contact-cell + .contact-cell {
  border-left: 1px solid var(--line);
}

.contact-cell:hover {
  background: rgba(255, 255, 255, 0.025);
}

.contact-cell .icn {
  width: var(--icon-lg);
  height: var(--icon-lg);
  min-width: var(--icon-lg);
  background: rgba(57, 213, 31, 0.08);
  border: 1px solid rgba(57, 213, 31, 0.32);
  color: var(--green);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.35s ease, border-color 0.35s ease,
    color 0.35s ease, transform 0.35s ease;
}

.contact-cell:hover .icn {
  background: var(--green);
  border-color: var(--green);
  color: var(--ink);
  transform: translateY(-4px);
}

.contact-cell .info h4 {
  font-weight: 800;
  font-size: var(--fs-xl);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--paper);
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.contact-cell .info h4::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 36px;
  height: 3px;
  background: var(--green);
  transition: width 0.35s ease;
}

.contact-cell:hover .info h4::after {
  width: 64px;
}

.contact-cell .info p {
  font-size: var(--fs-base);
  line-height: 1.75;
  color: #B5B8B0;
  font-weight: 500;
  max-width: 40ch;
  margin: 0 auto;
}


/* ==========================================================================
   HOMEPAGE -- SERVICES / PRODUCT CATEGORIES
   ========================================================================== */
.services {
  padding: 100px 0;
  background: var(--paper);
}

.services-header {
  text-align: center;
  margin-bottom: 60px;
}

.services-header h2 {
  font-weight: 900;
  font-size: clamp(40px, 4.1vw, 56px);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1;
  margin-bottom: 20px;
}

.services-header p {
  font-size: var(--fs-base);
  color: var(--muted);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
}

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

.service {
  background: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.service-img {
  position: relative;
  background: #eee;
  overflow: hidden;
}

.service-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: transform 0.6s ease;
}

.service:hover .service-img img {
  transform: scale(1.04);
}

.service-body {
  padding: 28px 30px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service .s-tag {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.service .s-name {
  font-weight: 800;
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  line-height: 1.25;
}

.service .s-desc {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--muted);
  flex: 1;
}

.service .s-btn {
  background: var(--green);
  color: var(--ink);
  margin: 24px -30px -28px;
  padding: 18px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.service:hover .s-btn {
  background: var(--green-dk);
}


/* ==========================================================================
   HOMEPAGE -- ECO-FRIENDLY BAND
   ========================================================================== */
.eco-band {
  background: var(--green);
  padding: 56px 0;
}

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

.eco-cell {
  padding: 0 32px;
  border-left: 2px solid rgba(14,20,20,0.12);
}

.eco-cell:first-child {
  border-left: none;
  padding-left: 0;
}

.eco-cell:last-child {
  padding-right: 0;
}

.eco-ic {
  margin-bottom: 18px;
  line-height: 0;
}

.eco-ic svg {
  width: var(--icon-art);
  height: var(--icon-art);
}

.eco-label {
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.eco-cell p {
  font-size: var(--fs-md);
  color: rgba(14,20,20,0.88);
  line-height: 1.65;
  max-width: 290px;
}


/* ==========================================================================
   UNIQUE PRODUCT FEATURES  (.upf)
   Reusable dark feature band used on the homepage and the MetLar / BaseLar
   product pages. The accent is var(--green); inside .prod-theme--orange it
   resolves to orange automatically (BaseLar). Square tiles only (client rule).
   Reveal uses the existing .fade-up IntersectionObserver hook.
   ========================================================================== */
.upf {
  background: var(--ink);
  padding: 100px 0;
}
.upf-head {
  max-width: 720px;
  margin-bottom: 54px;
}
.upf-head h2 {
  color: var(--paper);
  font-weight: 900;
  font-size: var(--fs-6xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.upf-head h2 .acc { color: var(--green); }
.upf-lead {
  color: var(--muted-dark);
  font-size: var(--fs-md);
  line-height: 1.65;
  margin-top: 18px;
}

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

.upf-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  background: var(--char);
  border: 1px solid var(--line);
  transition: background-color .32s ease, border-color .32s ease;
}
/* accent bar grows from the top edge on hover */
.upf-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--green);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .32s ease;
}
.upf-item:hover {
  border-color: var(--green);
  background: rgba(57, 213, 31, 0.06);
}
.upf-item:hover::before { transform: scaleY(1); }

.upf-ic {
  flex: 0 0 auto;
  width: var(--icon-md);
  height: var(--icon-md);
  display: grid;
  place-items: center;
  background: rgba(57, 213, 31, 0.12);
  color: var(--green);
  transition: background-color .32s ease, color .32s ease, transform .32s ease;
}
.upf-ic svg {
  width: var(--icon-md-glyph);
  height: var(--icon-md-glyph);
  display: block;
}
.upf-item:hover .upf-ic {
  background: var(--green);
  color: var(--ink);
  transform: translateY(-2px);
}

.upf-label {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--paper);
  line-height: 1.3;
}

/* Orange theme (BaseLar): flip the hardcoded green rgba tints to orange,
   matching the established .prod-theme--orange override pattern elsewhere. */
.prod-theme--orange .upf-ic { background: rgba(229, 121, 26, 0.14); }
.prod-theme--orange .upf-item:hover { background: rgba(229, 121, 26, 0.07); }

/* Staggered reveal. Armed only when scripting is enabled, so the tiles are
   never left invisible if JS is off/unsupported (the JS adds .is-visible).
   Delay list matches the transition list so hover colour stays instant. */
@media (scripting: enabled) {
  .upf-item.fade-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .5s ease, background-color .32s ease, border-color .32s ease;
    transition-delay: calc(var(--upf-i, 0) * 26ms), calc(var(--upf-i, 0) * 26ms), 0s, 0s;
  }
  .upf-item.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .upf-head.fade-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .upf-head.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .upf-item.fade-up,
  .upf-head.fade-up { opacity: 1; transform: none; transition: none; }
}

/* .upf responsive (kept with the component; responsive.css defines no .upf) */
@media (max-width: 1199px) {
  .upf-grid { grid-template-columns: repeat(3, 1fr); }
  .upf-head h2 { font-size: var(--fs-5xl); }
}
@media (max-width: 991px) {
  .upf { padding: 74px 0; }
  .upf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .upf { padding: 56px 0; }
  .upf-head { margin-bottom: 34px; }
  .upf-head h2 { font-size: var(--fs-4xl); }
  .upf-lead { font-size: var(--fs-base); }
}
@media (max-width: 479px) {
  .upf-grid { grid-template-columns: 1fr; }
  .upf-item { padding: 18px 18px; }
}


/* ==========================================================================
   HOMEPAGE -- ABOUT BLOCK (Photo + Dark Panel)
   ========================================================================== */
.about-block {
  background: var(--paper);
  padding-top: 0;
  padding-bottom: 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.about-photo {
  position: relative;
  /* Solid fill matching .about-dark (right column) so the whole about
     section reads as one background colour — gradient/green glow removed
     per client request. */
  background: var(--ink);
  min-height: 540px;
  overflow: hidden;
}

/* Homepage about section: hide the animated green glow blobs so the left
   column stays a flat solid colour, same as the right column. */
.about-photo .living-logo .blob {
  display: none;
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  filter: grayscale(0.6) contrast(1.05);
}

/* ==========================================================================
   LIVING LOGO -- animated brand mark (replaces static photos)
   Used inside .about-photo (homepage) and .plant-photo (manufacturing).
   The GSAP timeline lives in custom.js; without JS the logo shows static.
   ========================================================================== */
.living-logo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.living-logo.light .blob {
  display: none;
}

.living-logo .blob {
  position: absolute;
  border-radius: 0;
  background: var(--green);
  filter: blur(70px);
  opacity: 0.14;
  will-change: transform;
}

.living-logo .blob-one {
  width: 300px;
  height: 300px;
  left: -80px;
  top: -60px;
  animation: living-logo-drift-one 16s ease-in-out infinite;
}

.living-logo .blob-two {
  width: 260px;
  height: 260px;
  right: -70px;
  bottom: -50px;
  animation: living-logo-drift-two 19s ease-in-out infinite;
}

@keyframes living-logo-drift-one {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(50px, 45px) scale(1.15); }
}

@keyframes living-logo-drift-two {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-45px, -50px) scale(1.1); }
}

.living-logo .logo-wrap {
  position: relative;
  z-index: 3;
  width: min(72%, 480px);
  will-change: transform;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45));
}

.living-logo.light .logo-wrap {
  filter: drop-shadow(0 20px 40px rgba(20, 40, 15, 0.22));
}

.living-logo .logo-wrap svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .living-logo .blob { animation: none; display: none; }
}

/* Play button (big -- about section) */
.play-btn-big {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  background: rgba(255,255,255,0.9);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.play-btn-big:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

.play-btn-big svg {
  margin-left: 5px;
}

.play-btn-big::before {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 0;
  animation: ripple 2.4s infinite;
}

.about-dark {
  background: var(--ink);
  color: var(--paper);
  padding: 80px 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}/* square grid pattern removed per client request */


.about-dark > * {
  position: relative;
}

.about-dark h2 {
  font-weight: 900;
  font-size: var(--fs-6xl);
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 22px;
}

.about-dark p {
  color: #B5B8B0;
  font-size: var(--fs-base);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 480px;
}

.about-dark p + p {
  margin-top: -20px;
}

.ab-cta {
  display: inline-block;
  border: 2px solid var(--green);
  color: var(--green);
  padding: 18px 32px;
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  align-self: flex-start;
  transition: all 0.2s ease;
}

.ab-cta:hover {
  background: var(--green);
  color: var(--ink);
}


/* ==========================================================================
   HOMEPAGE -- STATS BAND (authoritative -- shared with about page)
   Note: about.css redeclares .stats-band/.stat-cell with a slightly
   different padding pattern. This homepage version is the source of truth;
   about page uses the same selectors.
   ========================================================================== */
.stats-band {
  background: var(--green);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}/* square grid pattern removed per client request */


.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}

.stats-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

.stat-cell {
  padding: 50px 40px;
  border-right: 1px dashed rgba(14,20,20,0.18);
}

.stat-cell:last-child {
  border-right: none;
}

.stat-cell .num {
  font-weight: 900;
  font-size: var(--fs-8xl);
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
}

.stat-cell .num .plus {
  color: var(--ink);
}

/* About-page-specific stat sub-elements (kept here so about doesn't need its own .stat-cell block) */
.stat-cell .num .pl {
  font-size: var(--fs-4xl);
  color: var(--ink);
}

.stat-cell .lbl {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.stat-cell .lbl::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--ink);
}

.stat-cell .lab {
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 10px;
}

.stat-cell .sub {
  font-size: var(--fs-sm);
  color: rgba(14,20,20,0.75);
  margin-top: 10px;
  line-height: 1.55;
  max-width: 240px;
}


/* ==========================================================================
   HOMEPAGE -- PROJECTS / OUR WORKS
   ========================================================================== */
.projects {
  background: var(--paper);
  padding: 100px 0;
}

.proj-tabs {
  display: flex;
  align-items: center;
  gap: 28px;
}

.proj-tabs .tab {
  font-weight: 800;
  font-size: var(--fs-base);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 0;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}

.proj-tabs .tab.active {
  color: var(--green-deep);
}

.proj-tabs .tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--green);
}

.proj-tabs .tab:hover {
  color: var(--ink);
}

.projects-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 280px 280px;
  gap: 16px;
  margin-top: 44px;
}

/* Second project group — same bento layout, mirrored (featured tile on the right) */
.projects-grid--rev {
  grid-template-columns: 1fr 1fr 2fr;
  grid-auto-flow: dense;
  margin-top: 16px;
}
.projects-grid--rev .project-1 {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.project {
  position: relative;
  overflow: hidden;
  background-color: #1a1a1a;
}

.project img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.project:hover img {
  transform: scale(1.05);
}

.project::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,20,20,0.05) 30%, rgba(14,20,20,0.9));
  transition: all 0.3s;
}

.project:hover::after {
  background: linear-gradient(180deg, rgba(57,213,31,0.3) 0%, rgba(14,20,20,0.95));
}

.project .meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 24px;
  color: var(--paper);
}

.project .num {
  position: absolute;
  top: 18px;
  left: 18px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  background: var(--green);
  color: var(--ink);
  padding: 5px 10px;
  z-index: 2;
}

.project .ttl {
  font-weight: 800;
  font-size: var(--fs-xl);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: 6px;
}

.project .cat {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--green);
  text-transform: uppercase;
}

.project-1 {
  grid-row: span 2;
}

.project-1 .ttl {
  font-size: var(--fs-4xl);
}


/* ==========================================================================
   HOMEPAGE -- WHY CHOOSE US
   ========================================================================== */
.why-choose {
  background: var(--paper-2);
  padding: 100px 0;
}

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

.feature-card {
  background: var(--white);
  padding: 36px 28px;
  border-left: 4px solid var(--green);
}

.feature-card--dark {
  background: var(--ink);
  color: var(--paper);
}

.feature-card--dark .feature-num { color: var(--green); }
.feature-card--dark .feature-label { color: var(--paper); }
.feature-card--dark .feature-desc { color: var(--muted-dark); }

.feature-card .feature-icon {
  margin-bottom: 16px;
}

.feature-card .feature-icon svg {
  width: var(--icon-art);
  height: var(--icon-art);
}

.feature-card .feature-num {
  font-weight: 900;
  font-size: var(--fs-6xl);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.feature-card .feature-num .unit {
  color: var(--green-deep);
  font-size: var(--fs-4xl);
}

.feature-card .feature-label {
  font-weight: 800;
  font-size: var(--fs-base);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 8px 0 12px;
}

.feature-card .feature-desc {
  font-size: var(--fs-base);
  color: var(--muted);
  line-height: 1.6;
}

.features-bottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.features-bottom .feature-card {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.features-bottom-img {
  grid-column: 2 / 5;
  overflow: hidden;
  border-left: 4px solid var(--green);
}

/* When the Seamless box is moved into the top grid, the bottom row holds only the image */
.features-bottom--single {
  grid-template-columns: 1fr;
}
.features-bottom--single .features-bottom-img {
  grid-column: 1 / -1;
}

.features-bottom-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ==========================================================================
   HOMEPAGE -- CLIENTS / LOGO GRID (authoritative -- shared with testimonials)
   ========================================================================== */
.clients {
  background: var(--paper-2);
  padding: 100px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.clients-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}

.clients-head h3 {
  font-weight: 900;
  font-size: var(--fs-6xl);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.015em;
  max-width: 540px;
}

.clients-head .meta {
  color: var(--muted);
  font-size: var(--fs-base);
  max-width: 360px;
  line-height: 1.6;
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
  background: var(--paper);
}

.logo-cell {
  aspect-ratio: 3/2;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  transition: background 0.3s, transform 0.3s;
}

.logo-cell img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(0) opacity(0.35);
  transition: filter 0.3s;
}

.logo-cell:hover {
  background: var(--ink);
}

.logo-cell:hover img {
  filter: brightness(100) opacity(1);
}


/* ==========================================================================
   HOMEPAGE -- CTA SECTION (Partner)
   ========================================================================== */
.cta-section {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: 100px 0;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14,20,20,0.95) 0%, rgba(14,20,20,0.7) 60%, rgba(14,20,20,0.4) 100%),
    url('../images/metal-roof-turbo-ventilator-sealing.webp') center/cover no-repeat;
}

.cta-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: center;
}

.cta-left .eyebrow-tag { color: var(--green); }
.cta-left h2 {
  font-size: var(--fs-7xl);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 16px 0;
}
.cta-left h2 .acc { color: var(--green); }
.cta-left p { color: rgba(255,255,255,0.75); max-width: 440px; line-height: 1.7; }

.cta-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--paper);
  color: var(--ink);
  padding: 20px 28px;
  text-decoration: none;
  transition: transform 0.2s;
}

.cta-card:hover { transform: translateY(-2px); }
.cta-card .cc-label { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.cta-card .cc-title { font-size: var(--fs-md); font-weight: 800; text-transform: uppercase; }
.cta-card .cc-arrow {
  width: var(--icon-sm); height: var(--icon-sm);
  border-radius: 0;
  background: var(--green);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}


/* ==========================================================================
   ABOUT PAGE -- story, pillars, leadership, R&D, about-cta
   (NOTE: about.css redeclaration of .stats-band / .stat-cell skipped --
    use authoritative version above in HOMEPAGE -- STATS BAND section)
   ========================================================================== */

/* Story */
.story { padding: 100px 0; background: var(--paper); }
.story-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }
.story h2 { font-size: clamp(34px, 3.9vw, 56px); margin-bottom: 24px; }
.story h2 .acc { color: var(--green-deep); }
.story p { font-size: var(--fs-md); line-height: 1.75; color: var(--muted); margin-bottom: 22px; max-width: 600px; }
.story p strong { color: var(--ink); font-weight: 700; }
.story-photo {
  position: relative; aspect-ratio: 4/5;
  background: #0a0a0a url('../images/peb-metal-roof-waterproofing-application.webp') center/cover no-repeat;
}
.story-photo .stamp {
  position: absolute; left: -20px; top: 40px;
  background: var(--green); color: var(--ink);
  padding: 18px 22px; font-weight: 900; font-size: var(--fs-xl);
  text-transform: uppercase; letter-spacing: -0.01em;
  line-height: 1.1; max-width: 200px;
}
.story-photo .stamp small { font-size: var(--fs-2xs); letter-spacing: 0.18em; font-weight: 700; display: block; margin-top: 6px; }

/* Pillars */
.pillars { padding: 100px 0; background: var(--ink); color: var(--paper); }
.pillars h2 { color: var(--paper); font-size: clamp(34px, 3.5vw, 46px); margin-bottom: 50px; max-width: 760px; }
.pillars h2 .acc { color: var(--green); }
.pillar-lead { font-size: var(--fs-md); line-height: 1.7; color: #B5B8B0; max-width: 720px; margin-bottom: 50px; }
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.pillar { padding: 40px 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; }
.pillar .num { font-size: var(--fs-xs); letter-spacing: 0.22em; color: var(--green); font-weight: 800; margin-bottom: 18px; }
.pillar h3 { font-size: var(--fs-xl); color: var(--paper); letter-spacing: -0.01em; margin-bottom: 14px; line-height: 1.1; }
.pillar p { font-size: var(--fs-base); line-height: 1.65; color: #B5B8B0; }
.pillar .ic { color: var(--green); margin-bottom: 22px; }

.pillars--light {
  background: var(--paper-2);
  color: var(--ink);
}

.pillars--light h2 {
  color: var(--ink);
}

.pillars--light h2 .acc,
.pillars--light .pillar .num,
.pillars--light .pillar .ic {
  color: var(--green-deep);
}

.pillars--light .pillar-lead,
.pillars--light .pillar p {
  color: var(--muted);
}

.pillars--light .pillar-grid {
  border-color: rgba(14,20,20,0.18);
}

.pillars--light .pillar {
  border-color: rgba(14,20,20,0.18);
}

.pillars--light .pillar h3 {
  color: var(--ink);
}

/* Leadership */
.leadership { padding: 100px 0; background: var(--paper-2); }
.lead-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 60px; }
.lead-head h2 { font-size: clamp(34px, 3.6vw, 46px); max-width: 600px; }
.lead-head h2 .acc { color: var(--green-deep); }
.leaders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); background: var(--paper); }
.leader { padding: 32px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.leader .photo { aspect-ratio: 1/1; background: var(--paper-2); margin-bottom: 24px; position: relative; overflow: hidden; }
.leader .photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4); transition: filter 0.3s; }
.leader:hover .photo img { filter: grayscale(0); }
.leader .photo .tag { position: absolute; left: 14px; bottom: 14px; background: var(--green); color: var(--ink); padding: 5px 10px; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.18em; }
.leader h3 { font-size: var(--fs-xl); letter-spacing: -0.015em; text-transform: none; font-weight: 800; margin-bottom: 4px; }
.leader .role { font-size: var(--fs-xs); font-weight: 700; color: var(--green-deep); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 14px; }
.leader p { font-size: var(--fs-base); color: var(--muted); line-height: 1.65; }

/* R&D split */
.rnd { padding: 100px 0; background: var(--paper); }
.rnd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ink); }
.rnd-copy { padding: 56px 48px; }
.rnd-photo { background: var(--ink); position: relative; min-height: 460px; background-image: linear-gradient(rgba(14,20,20,0.5), rgba(14,20,20,0.5)), url('../images/storage-tanks-and-silos-protection.webp'); background-size: cover; background-position: center; }
.rnd-copy h2 { font-size: clamp(30px, 2.8vw, 40px); margin-bottom: 18px; }
.rnd-copy h2 .acc { color: var(--green-deep); }
.rnd-copy p { font-size: var(--fs-base); line-height: 1.7; color: var(--muted); margin-bottom: 20px; }
.rnd-points { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.rnd-point { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--paper-2); border-left: 3px solid var(--green); }
.rnd-point .n { font-weight: 900; color: var(--green-deep); min-width: 40px; font-size: var(--fs-lg); }
.rnd-point .t { font-weight: 800; font-size: var(--fs-base); letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 4px; }
.rnd-point .d { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }

/* Join Team */
.join-team {
  padding: 100px 0;
  background: var(--green);
  color: var(--ink);
}

.join-team-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 60px;
  align-items: center;
}

.join-team .eyebrow-tag {
  color: var(--ink);
  margin-bottom: 16px;
}

.join-team h2 {
  font-size: var(--fs-6xl);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.08;
  max-width: 780px;
  margin-bottom: 22px;
}

.join-team h2 .acc {
  color: var(--paper);
}

.join-team p {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: rgba(14,20,20,0.78);
  max-width: 720px;
  margin-bottom: 32px;
}

.join-team-points {
  border-top: 1px solid rgba(14,20,20,0.24);
  border-left: 1px solid rgba(14,20,20,0.24);
}

.join-team-points div {
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 86px;
  padding: 20px 22px;
  border-right: 1px solid rgba(14,20,20,0.24);
  border-bottom: 1px solid rgba(14,20,20,0.24);
  font-size: var(--fs-base);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.join-team-points span {
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  font-weight: 900;
  color: rgba(14,20,20,0.55);
}

/* About CTA */
.about-cta {
  padding: 100px 0;
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.about-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/metal-roof-turbo-ventilator-sealing.webp') center/cover no-repeat;
  opacity: 0.06;
}
.about-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.about-cta-inner .eyebrow-tag { color: var(--green); margin-bottom: 16px; }
.about-cta-inner h2 { font-size: var(--fs-6xl); font-weight: 900; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 20px; }
.about-cta-inner h2 .acc { color: var(--green); }
.about-cta-inner p { font-size: var(--fs-md); line-height: 1.7; color: rgba(255,255,255,0.65); margin-bottom: 36px; }
.about-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }


/* ==========================================================================
   APPLICATIONS PAGE -- apps-intro, areas, lightbox, matrix, page-cta
   (NOTE: .filter-bar shared definition above in FILTER BAR section)
   ========================================================================== */

.apps-intro { padding: 80px 0 0; background: var(--paper); }
/* Centre-aligned intro block (eyebrow, heading, lede, filter bar) */
.apps-intro .container { text-align: center; }
.apps-intro h2 { font-size: clamp(34px, 3.6vw, 46px); max-width: 720px; margin: 0 auto 24px; }
.apps-intro h2 .acc { color: var(--green-deep); }
.apps-intro p { font-size: var(--fs-md); line-height: 1.7; color: var(--muted); max-width: 640px; margin: 0 auto 28px; }
/* Apps-intro filter bar -- centred, modest gap to the .areas section below */
.apps-intro .filter-bar { margin: 0 auto; }

/* Areas grid - fixed 3 columns */
.areas { padding: 50px 0 100px; background: var(--paper); }
.areas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.area-card {
  overflow: hidden; background: var(--ink); position: relative;
  aspect-ratio: 4/3;
  cursor: pointer;
  transition: opacity 0.3s;
}
.area-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.area-card:hover img { transform: scale(1.05); }
.area-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,20,20,0.1) 30%, rgba(14,20,20,0.92) 100%);
}
.area-card .meta {
  position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2; color: #fff;
}
.area-card .num {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  background: var(--green); color: var(--ink); padding: 6px 10px;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.2em;
}
.area-card .product {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  background: rgba(14,20,20,0.7); backdrop-filter: blur(8px);
  color: var(--green); padding: 6px 10px;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.16em;
}
.area-card .title {
  font-weight: 900; font-size: var(--fs-xl); line-height: 1.1;
  letter-spacing: -0.015em; margin-bottom: 8px;
  text-transform: uppercase;
}
.area-card .desc {
  font-size: var(--fs-base); color: rgba(255,255,255,0.8); line-height: 1.5;
}


/* Image Lightbox Popup */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  cursor: pointer;
}

.lightbox-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.lightbox-inner {
  position: relative;
  max-width: 900px;
  width: 90%;
  cursor: default;
}

.lightbox-inner img {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  display: block;
}

.lightbox-caption {
  background: var(--ink);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lightbox-caption .lb-title {
  font-weight: 900;
  font-size: var(--fs-lg);
  color: var(--paper);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.lightbox-caption .lb-product {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--green);
  text-transform: uppercase;
  white-space: nowrap;
}

.lightbox-close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 0;
  transition: all 0.2s;
  background: transparent;
}

.lightbox-close:hover {
  background: var(--green);
  color: var(--ink);
  border-color: var(--green);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: var(--fs-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}
.lightbox-nav:hover {
  background: var(--green);
  color: var(--ink);
  border-color: var(--green);
}
.lb-prev { left: 20px; }
.lb-next { right: 20px; }


/* Application Matrix Table */
.matrix {
  padding: 100px 0;
  background: var(--paper);
}
.matrix .eyebrow-tag { margin-bottom: 16px; }
.matrix h2 {
  font-size: clamp(34px, 4.1vw, 56px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.matrix h2 .acc { color: var(--green); font-style: italic; }
.matrix .lead {
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.7;
  max-width: 680px;
  margin-bottom: 48px;
}

.matx {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
.matx thead th {
  text-align: left;
  padding: 16px 20px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  white-space: nowrap;
}
.matx thead th:first-child { border-radius: 0; }
.matx thead th:last-child { border-radius: 0; }
.matx tbody td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
  color: var(--muted);
}
.matx tbody td:first-child {
  font-weight: 700;
  color: var(--ink);
}
.matx tbody td.y {
  color: var(--green-deep);
  font-weight: 800;
  font-size: var(--fs-md);
}
.matx tbody td.n {
  color: var(--muted-2);
}
.matx tbody td:last-child {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-style: italic;
}
.matx tbody tr:hover {
  background: var(--paper-2);
}

/* Page CTA */
.page-cta {
  padding: 100px 0;
  background: var(--paper-2);
}
.page-cta .cta-inner {
  max-width: 640px;
}
.page-cta h2 {
  font-size: clamp(30px, 3.5vw, 40px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.page-cta h2 .acc { color: var(--green); }
.page-cta p {
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 32px;
}
.page-cta .cta-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}


/* ==========================================================================
   BLOG PAGE -- blog-list, featured-post, post-grid, pager
   (NOTE: .filter-bar skipped -- use shared definition above)
   ========================================================================== */
.blog-list { padding: 100px 0; background: var(--paper); }

/* Featured */
.featured-post {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 0;
  border: 1px solid var(--ink); background: var(--paper);
  margin-bottom: 60px;
}
.featured-post .img {
  aspect-ratio: 4/3; background: url('../images/peb-metal-roof-waterproofing-application.webp') center/cover no-repeat;
  position: relative;
}
.featured-post .img .stamp {
  position: absolute; top: 20px; left: 20px;
  background: var(--green); color: var(--ink); padding: 8px 12px;
  font-size: var(--fs-2xs); letter-spacing: 0.18em; font-weight: 800;
}
.featured-post .body { padding: 44px; display: flex; flex-direction: column; justify-content: space-between; }
.featured-post .meta { display: flex; gap: 14px; font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--green-deep); font-weight: 800; text-transform: uppercase; margin-bottom: 18px; }
.featured-post .meta .dot { width: 4px; height: 4px; background: var(--ink); border-radius: 0; align-self: center; }
.featured-post h2 { font-size: clamp(30px, 2.9vw, 40px); letter-spacing: -0.02em; text-transform: none; margin-bottom: 16px; line-height: 1.1; }
.featured-post p { font-size: var(--fs-base); line-height: 1.65; color: var(--muted); margin-bottom: 14px; }
.featured-post .author { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.featured-post .author .av { width: var(--avatar); height: var(--avatar); border-radius: 0; background: var(--ink); color: var(--green); display: grid; place-items: center; font-weight: 900; font-size: var(--fs-base); }
.featured-post .author .name { font-size: var(--fs-sm); font-weight: 800; }
.featured-post .author .role { font-size: var(--fs-2xs); color: var(--muted); }

/* Grid */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.post {
  background: var(--paper); padding: 28px;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  display: flex; flex-direction: column;
  transition: all 0.3s;
}
.post:hover { background: var(--ink); color: var(--paper); }
.post:hover .meta { color: var(--green); }
.post:hover h3 { color: var(--green); }
.post:hover p { color: rgba(255,255,255,0.8); }
.post:hover .arr { color: var(--green); }
.post .img { aspect-ratio: 16/10; overflow: hidden; background: var(--paper-2); margin-bottom: 20px; }
.post .img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.post:hover .img img { transform: scale(1.04); }
.post .meta {
  display: flex; gap: 14px; font-size: var(--fs-2xs); letter-spacing: 0.18em;
  font-weight: 800; color: var(--green-deep); text-transform: uppercase; margin-bottom: 12px;
}
.post .meta .dot { width: 4px; height: 4px; background: var(--ink); border-radius: 0; align-self: center; }
.post:hover .meta .dot { background: var(--green); }
.post h3 { font-size: var(--fs-lg); letter-spacing: -0.015em; text-transform: none; margin-bottom: 10px; transition: color 0.3s; flex: 0; line-height: 1.2; }
.post p { font-size: var(--fs-base); line-height: 1.6; color: var(--muted); margin-bottom: 16px; flex: 1; transition: color 0.3s; }
.post .footer { display: flex; justify-content: space-between; align-items: end; font-size: var(--fs-2xs); color: var(--muted); font-weight: 700; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.post:hover .footer { border-color: var(--line); }
.post .arr { color: var(--ink); transition: color 0.3s; }

/* Pagination */
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 50px; }
.pager a, .pager span {
  width: 44px; height: 44px; border: 1px solid var(--ink);
  display: grid; place-items: center;
  font-weight: 800; font-size: var(--fs-base);
  transition: all 0.2s;
}
.pager a:hover, .pager .current { background: var(--green); }
.pager .next { width: auto; padding: 0 22px; font-size: var(--fs-xs); letter-spacing: 0.18em; }


/* ==========================================================================
   BLOG DETAIL PAGE -- article-hero, article-body, related
   (NOTE: .article-hero kept as-is so HTML pages don't break.)
   ========================================================================== */
.article-hero { padding: 60px 0 0; background: var(--paper); }
.article-hero .container > .breadcrumbs { display: flex; gap: 12px; align-items: center; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }
.article-hero .breadcrumbs a { color: var(--muted); }
.article-hero .breadcrumbs a:hover { color: var(--green-deep); }
.article-hero .breadcrumbs .sep { color: var(--green); }
.article-meta { display: flex; gap: 14px; font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--green-deep); font-weight: 800; text-transform: uppercase; margin-bottom: 18px; }
.article-meta .dot { width: 4px; height: 4px; background: var(--green); border-radius: 0; align-self: center; }
.article-hero h1 {
  font-size: clamp(34px, 4.5vw, 64px); line-height: 1.05;
  letter-spacing: -0.025em; max-width: 880px; margin-bottom: 30px;
  text-transform: uppercase;
}
.article-hero h1 .acc { color: var(--green-deep); }
.article-author { display: flex; align-items: center; gap: 18px; padding: 24px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.article-author .av { width: var(--avatar); height: var(--avatar); border-radius: 0; background: var(--ink); color: var(--green); display: grid; place-items: center; font-weight: 900; font-size: var(--fs-lg); }
.article-author .by { flex: 1; }
.article-author .by .name { font-size: var(--fs-base); font-weight: 800; }
.article-author .by .role { font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; }
.article-author .share { display: flex; gap: 8px; }
.article-author .share a { width: 36px; height: 36px; background: var(--paper-2); display: grid; place-items: center; transition: all 0.2s; }
.article-author .share a:hover { background: var(--green); color: var(--ink); }

.hero-image { aspect-ratio: 16/8; margin: 50px 0 0; background: url('../images/peb-metal-roof-waterproofing-application.webp') center/cover no-repeat; }

/* Article body */
.article-body { padding: 100px 0; background: var(--paper); }
.article-grid { display: grid; grid-template-columns: 240px 1fr 240px; gap: 60px; align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 24px); }
.toc h4 { font-size: var(--fs-2xs); letter-spacing: 0.22em; color: var(--green-deep); margin-bottom: 14px; font-weight: 800; }
.toc ul { list-style: none; border-left: 2px solid var(--line-soft); }
.toc a {
  display: block; padding: 8px 14px; font-size: var(--fs-xs); font-weight: 600;
  color: var(--muted); margin-left: -2px; border-left: 2px solid transparent;
}
.toc a:hover, .toc a.active { color: var(--ink); border-left-color: var(--green); }

.article-content section { margin-bottom: 36px; }
.article-content h2 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.015em; margin-bottom: 16px; text-transform: uppercase; }
.article-content h2 .num { color: var(--green-deep); margin-right: 12px; }
.article-content h3 { font-size: var(--fs-lg); text-transform: none; letter-spacing: -0.01em; margin-bottom: 12px; margin-top: 28px; }
.article-content p { font-size: var(--fs-md); line-height: 1.78; color: var(--ink); margin-bottom: 16px; }
.article-content p strong { font-weight: 700; }
.article-content blockquote {
  border-left: 4px solid var(--green); padding: 18px 24px;
  margin: 28px 0; background: var(--paper-2);
  font-size: var(--fs-lg); line-height: 1.6; color: var(--ink); font-weight: 600;
}
.article-content ul { margin: 16px 0 24px; list-style: none; }
.article-content ul li {
  font-size: var(--fs-md); line-height: 1.7; color: var(--ink);
  padding-left: 28px; position: relative; margin-bottom: 8px;
}
.article-content ul li::before { content: '\2192'; color: var(--green-deep); font-weight: 900; position: absolute; left: 0; top: 0; }

/* Aside */
.article-aside .card {
  background: var(--ink); color: var(--paper); padding: 26px;
  margin-bottom: 20px;
}
.article-aside .card .l { font-size: var(--fs-2xs); letter-spacing: 0.22em; color: var(--green); font-weight: 800; margin-bottom: 12px; text-transform: uppercase; }
.article-aside .card h4 { color: var(--green); font-size: var(--fs-md); margin-bottom: 10px; text-transform: none; }
.article-aside .card p { font-size: var(--fs-base); line-height: 1.55; color: #B5B8B0; margin-bottom: 14px; }
.article-aside .card a { display: block; font-size: var(--fs-xs); letter-spacing: 0.18em; font-weight: 800; color: var(--green); }

/* Related */
.related { padding: 100px 0; background: var(--paper-2); }
.related h2 { font-size: clamp(30px, 3.0vw, 40px); margin-bottom: 32px; }
.related h2 .acc { color: var(--green-deep); }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.rel-card { background: var(--paper); padding: 26px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transition: all 0.3s; }
.rel-card:hover { background: var(--ink); color: var(--paper); }
.rel-card .img { aspect-ratio: 16/10; background: var(--paper-2); margin-bottom: 16px; overflow: hidden; }
.rel-card .img img { width: 100%; height: 100%; object-fit: cover; }
.rel-card .meta { font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--green-deep); font-weight: 800; margin-bottom: 10px; text-transform: uppercase; }
.rel-card h3 { font-size: var(--fs-md); text-transform: none; letter-spacing: -0.01em; line-height: 1.25; transition: color 0.3s; }
.rel-card:hover h3 { color: var(--green); }

.blockquote-attr {
  font-size: var(--fs-sm); color: var(--muted); font-weight: 500;
}


/* ==========================================================================
   CAREERS PAGE -- values, jobs, perks
   (NOTE: .filter-bar skipped -- use shared definition above)
   ========================================================================== */
.values { padding: 100px 0; background: var(--paper); }
.values h2 { font-size: clamp(34px, 3.5vw, 46px); margin-bottom: 24px; }
.values h2 .acc { color: var(--green-deep); }
.values .lead { font-size: var(--fs-md); color: var(--muted); max-width: 600px; margin-bottom: 50px; line-height: 1.7; }
/* Careers values grid -- scoped to .val-grid > .val so it doesn't collide
   with .ch .val (contact channel value), .summary .row .v patterns, etc. */
.val-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.val-grid > .val { padding: 28px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.val-grid > .val .ic { width: var(--icon-md); height: var(--icon-md); background: var(--green); color: var(--ink); border-radius: 0; margin-bottom: 18px; display: grid; place-items: center; }
.val-grid > .val h4 { font-size: var(--fs-md); text-transform: none; letter-spacing: -0.01em; margin-bottom: 8px; }
.val-grid > .val p { font-size: var(--fs-base); line-height: 1.6; color: var(--muted); }

/* Jobs */
.jobs { padding: 100px 0; background: var(--paper-2); }
.jobs-head {
  display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 32px;
  margin-bottom: 40px;
}
.jobs-head h2 { font-size: clamp(34px, 3.5vw, 46px); }
.jobs-head h2 .acc { color: var(--green-deep); }

.jobs-list { display: flex; flex-direction: column; gap: 16px; }
.job {
  background: var(--paper); border: 1px solid var(--ink);
  padding: 28px 32px;
  display: grid; grid-template-columns: 1fr auto auto; gap: 28px; align-items: center;
  transition: all 0.3s;
}
.job:hover { background: var(--ink); color: var(--paper); transform: translateX(4px); }
.job:hover h3 { color: var(--green); }
.job:hover .tags span { background: rgba(57,213,31,0.15); color: var(--green); }
.job:hover .arr { background: var(--green); color: var(--ink); }
.job .tag { font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--green-deep); font-weight: 800; margin-bottom: 8px; text-transform: uppercase; }
.job:hover .tag { color: var(--green); }
.job h3 { font-size: var(--fs-xl); text-transform: none; letter-spacing: -0.015em; transition: color 0.3s; }
.job .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.job .tags span {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--paper-2); color: var(--ink); padding: 5px 10px;
  transition: all 0.3s;
}
.job .location { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.job:hover .location { color: #B5B8B0; }
.job .arr {
  width: 48px; height: 48px; background: var(--ink); color: var(--green);
  display: grid; place-items: center; font-size: var(--fs-md); transition: all 0.3s;
}

/* Perks */
.perks { padding: 100px 0; background: var(--paper); }
.perks h2 { font-size: clamp(30px, 2.9vw, 40px); margin-bottom: 32px; }
.perks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.perk {
  padding: 24px; background: var(--paper-2);
  border-left: 4px solid var(--green);
}
.perk h4 { font-size: var(--fs-md); text-transform: none; letter-spacing: -0.01em; margin-bottom: 8px; }
.perk p { font-size: var(--fs-base); line-height: 1.5; color: var(--muted); }


/* ==========================================================================
   CAREER DETAIL PAGE -- job-body, summary, hero-badges
   ========================================================================== */
.job-body { padding: 100px 0; background: var(--paper); }
.job-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
.job-content section { margin-bottom: 36px; }
.job-content h2 { font-size: var(--fs-xl); text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 14px; }
.job-content h2 .num { color: var(--green-deep); margin-right: 12px; font-weight: 900; }
.job-content p { font-size: var(--fs-base); line-height: 1.75; color: var(--muted); margin-bottom: 14px; }
.job-content p strong { color: var(--ink); font-weight: 700; }
.job-content ul { list-style: none; margin: 14px 0 18px; }
.job-content ul li {
  font-size: var(--fs-base); line-height: 1.7; color: var(--muted);
  padding-left: 28px; position: relative; margin-bottom: 10px;
}
.job-content ul li::before {
  content: '\2713'; color: var(--ink); font-weight: 900;
  background: var(--green); width: 18px; height: 18px;
  display: grid; place-items: center; font-size: var(--fs-2xs);
  position: absolute; left: 0; top: 4px;
}

/* Side rail */
.job-side { position: sticky; top: calc(var(--header-h) + 24px); }
.summary {
  background: var(--ink); color: var(--paper); padding: 28px;
  margin-bottom: 20px;
}
.summary .tag { font-size: var(--fs-2xs); letter-spacing: 0.22em; color: var(--green); font-weight: 800; margin-bottom: 12px; text-transform: uppercase; }
.summary h3 { font-size: var(--fs-xl); text-transform: none; letter-spacing: -0.015em; color: var(--paper); margin-bottom: 18px; line-height: 1.15; }
.summary .row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.summary .row:last-of-type { border-bottom: none; }
.summary .row .l { font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--muted-2); font-weight: 800; text-transform: uppercase; }
.summary .row .v { font-size: var(--fs-sm); font-weight: 700; color: var(--paper); }
.summary .apply { display: block; margin-top: 22px; padding: 16px; background: var(--green); color: var(--ink); font-weight: 800; letter-spacing: 0.16em; font-size: var(--fs-sm); text-align: center; }

.iframe-note {
  padding: 18px; border: 1px dashed var(--ink); background: var(--paper-2);
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.6;
}
.iframe-note strong { color: var(--ink); display: block; margin-bottom: 4px; }

.hero-badges { display: flex; gap: 12px; margin-bottom: 22px; }
.hero-badge-green {
  background: var(--green); color: var(--ink); padding: 6px 12px;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
}
.hero-badge-dark {
  background: rgba(255,255,255,0.1); padding: 6px 12px;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
}


/* ==========================================================================
   CASE STUDIES PAGE -- case-list, featured-case, case-grid
   (NOTE: .filter-bar skipped -- use shared definition above)
   ========================================================================== */
.case-list { padding: 100px 0; background: var(--paper); }
.case-head {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 50px; gap: 32px; flex-wrap: wrap;
}
.case-head h2 { font-size: clamp(34px, 3.6vw, 46px); max-width: 600px; }
.case-head h2 .acc { color: var(--green-deep); }

/* Featured case */
.featured-case {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  border: 1px solid var(--ink); background: var(--paper);
  margin-bottom: 80px;
}
.featured-case .img {
  aspect-ratio: 4/3;
  background: url('../images/peb-metal-roof-waterproofing-application.webp') center/cover no-repeat;
  position: relative;
}
.featured-case .img .stamp {
  position: absolute; left: 22px; top: 22px;
  background: var(--green); color: var(--ink);
  padding: 8px 12px; font-size: var(--fs-2xs); letter-spacing: 0.22em; font-weight: 800;
}
.featured-case .body { padding: 48px 40px; display: flex; flex-direction: column; justify-content: space-between; }
.featured-case .meta-row {
  display: flex; gap: 24px; flex-wrap: wrap; padding-bottom: 22px;
  margin-bottom: 22px; border-bottom: 1px solid var(--line-soft);
}
.featured-case .meta-row .m .l { font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--green-deep); font-weight: 800; text-transform: uppercase; }
.featured-case .meta-row .m .v { font-size: var(--fs-base); font-weight: 800; margin-top: 4px; }
.featured-case h3 { font-size: clamp(30px, 2.8vw, 40px); letter-spacing: -0.02em; text-transform: none; margin-bottom: 16px; }
.featured-case h3 .acc { color: var(--green-deep); }
.featured-case p { font-size: var(--fs-base); line-height: 1.65; color: var(--muted); margin-bottom: 14px; }
.featured-case .audit-note { font-size: var(--fs-sm); color: var(--muted-2); margin-top: 18px; }
.featured-case .featured-cta { margin-top: 24px; }

/* Grid */
.case-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--ink); border-left: 1px solid var(--ink);
}
.case {
  background: #fff; padding: 28px;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  display: flex; flex-direction: column;
  transition: all 0.25s;
}
.case:hover { background: var(--ink); color: #fff; }
.case:hover h4 { color: var(--green); }
.case:hover .l, .case:hover .v { color: var(--paper); }
.case:hover p { color: rgba(255,255,255,0.8); }
.case-img { aspect-ratio: 16/10; background: var(--paper-2); overflow: hidden; margin-bottom: 20px; position: relative; }
.case-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.case:hover .case-img img { transform: scale(1.04); }
.case-img .product-tag {
  position: absolute; left: 14px; top: 14px;
  background: var(--green); color: var(--ink);
  padding: 5px 10px; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.18em;
}
.case h4 { font-size: var(--fs-lg); letter-spacing: -0.01em; text-transform: none; margin-bottom: 10px; transition: color 0.3s; }
.case .scope { font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--green-deep); font-weight: 800; text-transform: uppercase; margin-bottom: 10px; transition: color 0.3s; }
.case p { font-size: var(--fs-base); line-height: 1.55; color: var(--muted); margin-bottom: 16px; flex: 1; transition: color 0.3s; }
.case .footer {
  display: flex; justify-content: space-between; align-items: end;
  padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.case:hover .footer { border-color: var(--line); }
.case .footer .loc { font-size: var(--fs-2xs); color: var(--muted); font-weight: 700; transition: color 0.3s; }
.case .footer .arr { color: var(--ink); transition: color 0.3s; }
.case:hover .arr { color: var(--green); }


/* ==========================================================================
   CERTIFICATIONS PAGE -- quality, certs, qc, lab
   ========================================================================== */
.quality { padding: 100px 0; background: var(--paper); }
.quality-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.quality h2 { font-size: clamp(34px, 3.6vw, 46px); margin-bottom: 24px; }
.quality h2 .acc { color: var(--green-deep); }
.quality p { font-size: var(--fs-md); line-height: 1.7; color: var(--muted); margin-bottom: 18px; }
.quality-photo { aspect-ratio: 4/5; background: url('../images/storage-tanks-and-silos-protection.webp') center/cover no-repeat; }

/* Cert grid */
.certs { padding: 100px 0; background: var(--paper-2); }
.certs h2 { font-size: clamp(34px, 3.6vw, 46px); margin-bottom: 14px; }
.certs h2 .acc { color: var(--green-deep); }
.certs .lead { font-size: var(--fs-base); color: var(--muted); max-width: 600px; margin-bottom: 50px; line-height: 1.65; }
.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); background: var(--paper); }
.cert {
  padding: 32px 28px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  min-height: 280px; display: flex; flex-direction: column;
  transition: all 0.25s;
}
.cert:hover { background: var(--ink); color: var(--paper); }
.cert:hover h3 { color: var(--green); }
.cert .badge {
  width: var(--icon-lg); height: var(--icon-lg);
  background: var(--green); color: var(--ink);
  border-radius: 0;
  display: grid; place-items: center;
  margin-bottom: 22px; font-weight: 900; font-size: var(--fs-base);
  letter-spacing: -0.01em; text-align: center; line-height: 1; padding: 6px;
  transition: all 0.3s;
}
.cert:hover .badge { background: var(--green); }
.cert h3 { font-size: var(--fs-lg); letter-spacing: -0.01em; text-transform: none; margin-bottom: 10px; transition: color 0.3s; }
.cert .scope { font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--green-deep); font-weight: 800; text-transform: uppercase; margin-bottom: 12px; }
.cert:hover .scope { color: var(--green); }
.cert p { font-size: var(--fs-base); line-height: 1.6; color: var(--muted); margin-bottom: 14px; flex: 1; }
.cert:hover p { color: #C7CCC0; }
.cert .more { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-deep); }

/* The certification cards are now links to the PDFs, so they need the anchor
   reset. Kept as a separate rule because the .cert block above is also used
   for non-linked cards elsewhere. */
a.cert { color: inherit; text-decoration: none; }
a.cert:hover .more { color: var(--green); }

/* Two documents rather than the original eight certifications, so this variant
   runs the grid two-up instead of leaving half the row empty. */
.cert-grid--two { grid-template-columns: repeat(2, 1fr); }

/* QC Process */
.qc { padding: 100px 0; background: var(--ink); color: var(--paper); }
.qc h2 { color: var(--paper); font-size: clamp(34px, 3.6vw, 46px); max-width: 700px; margin-bottom: 50px; }
.qc h2 .acc { color: var(--green); }
.qc-steps {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.qc-step {
  padding: 30px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  min-height: 240px;
}
.qc-step .n { font-size: var(--fs-4xl); color: var(--green); font-weight: 900; letter-spacing: -0.04em; line-height: 1; margin-bottom: 16px; }
.qc-step h4 { font-size: var(--fs-base); color: var(--paper); text-transform: none; margin-bottom: 10px; }
.qc-step p { font-size: var(--fs-base); line-height: 1.55; color: #B5B8B0; }

/* QC eyebrow green variant */
.qc .eyebrow-tag--green { color: var(--green); }

/* Lab reports -- scoped to section.lab so it doesn't collide with
   .stat-cell .lab on the About page (which is a stat label, not a section). */
section.lab { padding: 100px 0; background: var(--paper); }
section.lab h2 { font-size: clamp(34px, 3.6vw, 46px); margin-bottom: 14px; }
section.lab h2 .acc { color: var(--green-deep); }
section.lab .lead { font-size: var(--fs-base); color: var(--muted); max-width: 600px; margin-bottom: 36px; line-height: 1.65; }
.lab-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lab-card {
  background: var(--paper-2); padding: 24px;
  border-left: 4px solid var(--green);
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
}
.lab-card .meta .tag { font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--green-deep); font-weight: 800; text-transform: uppercase; margin-bottom: 6px; }
.lab-card .meta h4 { font-size: var(--fs-md); text-transform: none; letter-spacing: -0.01em; margin-bottom: 4px; }
.lab-card .meta p { font-size: var(--fs-base); color: var(--muted); }
.lab-card .dl {
  width: 48px; height: 48px; background: var(--ink); color: var(--green);
  display: grid; place-items: center;
}


/* ==========================================================================
   CONTACT PAGE -- channels, csplit, form-card, map-band
   ========================================================================== */
.channels { padding: 100px 0; background: var(--paper); }
.channels h2 { font-size: clamp(34px, 3.6vw, 46px); margin-bottom: 14px; }
.channels h2 .acc { color: var(--green-deep); }
.channels .lead { font-size: var(--fs-base); color: var(--muted); max-width: 600px; margin-bottom: 50px; line-height: 1.65; }
.ch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.ch {
  padding: 36px 28px; background: var(--paper);
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  display: flex; flex-direction: column; gap: 14px;
  transition: all 0.3s;
}
.ch:hover { background: var(--ink); color: var(--paper); }
.ch:hover .label { color: var(--green); }
.ch:hover .val { color: #fff; }
.ch .ic { width: var(--icon-md); height: var(--icon-md); background: var(--green); color: var(--ink); border-radius: 0; display: grid; place-items: center; }
.ch .label { font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--green-deep); font-weight: 800; text-transform: uppercase; transition: color 0.3s; }
.ch h4 { font-size: var(--fs-lg); text-transform: none; letter-spacing: -0.01em; margin-bottom: 4px; }
.ch .val { font-size: var(--fs-base); font-weight: 700; color: var(--ink); line-height: 1.45; word-break: break-word; transition: color 0.3s; }
.ch .meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; }
.ch:hover .meta { color: #B5B8B0; }
.ch .arr { margin-top: auto; padding-top: 14px; font-size: var(--fs-2xs); letter-spacing: 0.2em; font-weight: 800; color: var(--ink); }
.ch:hover .arr { color: var(--green); }

/* Contact split */
.csplit { padding: 100px 0; background: var(--paper-2); }
.csplit-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: start; }
.csplit h2 { font-size: clamp(34px, 3.6vw, 46px); margin-bottom: 22px; }
.csplit h2 .acc { color: var(--green-deep); }
.csplit-side p { font-size: var(--fs-base); line-height: 1.7; color: var(--muted); margin-bottom: 18px; }
.csplit-cards { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 22px; }

/* The left column stays in view while the form scrolls past it. Same pattern
   as .job-side, .ev-side and .faq-side elsewhere on the site. Desktop only:
   below 991px the grid is a single column and there is nothing to stick to. */
@media (min-width: 992px) {
  .csplit-side {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    align-self: start;
  }
}
/* Clean rows — no box background or side-bar, just a thin divider between items. */
.csc {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 14px;
  align-items: start;   /* icon aligns with label at top, not vertically centered */
}
.csc:last-child { border-bottom: none; padding-bottom: 0; }
.csc .ic {
  width: var(--icon-sm);
  height: var(--icon-sm);
  background: var(--ink);
  color: var(--green);
  display: grid;
  place-items: center;
  border-radius: 0;
  margin-top: 0;
}
.csc .ic svg { width: 16px; height: 16px; }
.csc .label { font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--green-deep); font-weight: 800; text-transform: uppercase; line-height: 1.2; }
.csc .val { font-size: var(--fs-base); font-weight: 700; margin-top: 6px; line-height: 1.4; }

/* Social row — no heading, no left icon; just the icons in a left-aligned row. */
.csc--social { display: block; }
.csc--social .social-links {
  display: flex;
  gap: 8px;
  margin-top: 0;
  flex-wrap: wrap;
}
.csc--social .social-links a {
  width: 42px;
  height: 42px;
  background: var(--ink);
  color: var(--green);
  border-radius: 0;
  display: grid;
  place-items: center;
  transition: all 0.25s;
}
.csc--social .social-links a:hover {
  background: var(--green);
  color: var(--ink);
  transform: translateY(-2px);
}

.form-card { background: var(--paper); border: 1px solid var(--ink); padding: 36px; }
.form-card .head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; gap: 14px; flex-wrap: wrap; }
.form-card .head h3 { font-size: var(--fs-2xl); text-transform: none; letter-spacing: -0.015em; }
.form-card .iframe-note {
  padding: 18px; border: 1px dashed var(--ink); background: var(--paper-2);
  margin-bottom: 24px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6;
}
.form-card .iframe-note strong { color: var(--ink); display: block; margin-bottom: 4px; }
.ifield { margin-bottom: 16px; }
.ifield label { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); display: block; margin-bottom: 8px; }
.ifield input, .ifield select, .ifield textarea {
  background: var(--paper); border: 1px solid var(--line-soft);
  padding: 13px 14px; font: inherit; font-size: var(--fs-base);
  color: var(--ink); width: 100%;
}
.ifield input:focus, .ifield select:focus, .ifield textarea:focus { outline: none; border-color: var(--green-deep); background: #fff; }
.iform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ifield textarea { resize: vertical; min-height: 100px; }

/* Map */
.map-band { padding: 100px 0; background: var(--ink); color: var(--paper); }
.map-band h2 { color: var(--paper); font-size: clamp(34px, 3.6vw, 46px); max-width: 720px; margin-bottom: 14px; }
.map-band h2 .acc { color: var(--green); }
.map-band .lead { color: #C7CCC0; font-size: var(--fs-base); max-width: 600px; margin-bottom: 40px; }
.map-wrap {
  aspect-ratio: 16/7; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 65% 55%, rgba(57,213,31,0.18), transparent 50%),
    linear-gradient(180deg, #1A2020, #0E1414);
  border: 1px solid var(--line);
}
/* Map card now uses an <img> as a full-bleed photo
   (the old SVG dot map + pin was removed -- replace the image
   in manufacturing.html to change the visual). */
.map-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.form-card .head .responds-badge {
  font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--green-deep); font-weight: 800;
}

.btn-full-width { width: 100%; justify-content: center; }


/* ==========================================================================
   DOWNLOADS PAGE -- dl-search, dl-cats, file cards
   (NOTE: .filter-bar skipped -- use shared definition above.
    Downloads-page centering override below.)
   ========================================================================== */
.dl-search { padding: 100px 0; background: var(--paper); border-bottom: 1px solid var(--line-soft); }
.dl-search .row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; max-width: 800px; margin: 0 auto; }
.dl-search input {
  background: var(--paper-2); border: 1px solid var(--line-soft);
  padding: 18px 22px; font-family: inherit; font-size: var(--fs-base);
  color: var(--ink); width: 100%;
}
.dl-search input:focus { outline: none; border-color: var(--ink); background: #fff; }

/* Downloads filter-bar variant: centered + top spacing */
.dl-search .filter-bar { margin: 30px auto 0; }

/* Cats */
.dl-cats { padding: 100px 0; background: var(--paper); }
.cat-row {
  background: var(--paper); border: 1px solid var(--ink); margin-bottom: 28px;
  overflow: hidden;
}
.cat-row .cat-head {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 24px; align-items: center;
  padding: 22px 28px; background: var(--ink); color: var(--paper);
}
.cat-row .cat-head .ic {
  width: var(--icon-md); height: var(--icon-md); background: var(--green); color: var(--ink); border-radius: 0; display: grid; place-items: center;
}
.cat-row .cat-head .title { font-weight: 900; font-size: var(--fs-xl); letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.05; }
.cat-row .cat-head .meta { font-size: var(--fs-2xs); color: var(--green); letter-spacing: 0.18em; font-weight: 800; margin-top: 4px; text-transform: uppercase; }
.cat-row .cat-head .count { color: var(--green); font-weight: 900; font-size: var(--fs-xl); letter-spacing: -0.02em; }
.cat-row .cat-head .count small { display: block; font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--muted-2); margin-top: 4px; }

.files {
  display: grid; grid-template-columns: 1fr 1fr;
}
.file {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  padding: 22px 28px;
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  transition: background 0.2s;
}
.file:hover { background: var(--paper-2); }
.file:nth-child(2n) { border-right: none; }
.file .fic {
  width: 48px; height: 48px;
  background: var(--paper-2); color: var(--ink);
  display: grid; place-items: center;
  font-family: inherit; font-weight: 900; font-size: var(--fs-2xs); letter-spacing: 0.04em;
}
.file h4 { font-size: var(--fs-base); letter-spacing: -0.01em; text-transform: none; margin-bottom: 4px; }
.file .sub { font-size: var(--fs-2xs); color: var(--muted); letter-spacing: 0.06em; }
.file .sub .pill {
  background: var(--green); color: var(--ink); padding: 2px 6px;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.14em; margin-right: 6px;
}
.file .dl {
  width: 42px; height: 42px;
  background: var(--ink); color: var(--green);
  display: grid; place-items: center;
  transition: all 0.2s;
}
.file:hover .dl { background: var(--green); color: var(--ink); }


/* ==========================================================================
   EVENTS PAGE -- ev-list, event cards, past events
   (NOTE: .filter-bar skipped -- use shared definition above.
    Margin-bottom override below for events.)
   ========================================================================== */
.ev-list { padding: 100px 0; background: var(--paper); }
.ev-list .filter-bar { margin-bottom: 40px; }

.ev-section { margin-bottom: 60px; }
.ev-section h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 24px; text-transform: uppercase; letter-spacing: -0.015em; }
.ev-section h2 .acc { color: var(--green-deep); }

.ev-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.event {
  background: var(--paper); border: 1px solid var(--ink);
  overflow: hidden; display: grid; grid-template-columns: 200px 1fr;
  transition: all 0.3s;
}
.event:hover { transform: translateY(-2px); }
.event .date-block {
  background: var(--ink); color: var(--paper);
  padding: 28px 20px; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center;
  position: relative;
}
.event .date-block .month { font-size: var(--fs-xs); letter-spacing: 0.22em; color: var(--green); font-weight: 800; }
.event .date-block .day { font-size: var(--fs-7xl); font-weight: 900; line-height: 1; color: var(--paper); margin: 8px 0; letter-spacing: -0.04em; }
.event .date-block .year { font-size: var(--fs-xs); color: var(--muted-2); font-weight: 700; letter-spacing: 0.18em; }
.event .date-block .badge {
  position: absolute; top: 14px; right: 14px;
  background: var(--green); color: var(--ink); padding: 4px 8px;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.18em;
}
.event .body { padding: 24px 28px; display: flex; flex-direction: column; }
.event .tag { font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--green-deep); font-weight: 800; margin-bottom: 10px; text-transform: uppercase; }
.event h3 { font-size: var(--fs-xl); text-transform: none; letter-spacing: -0.015em; margin-bottom: 10px; }
.event p { font-size: var(--fs-base); line-height: 1.6; color: var(--muted); margin-bottom: 14px; }
.event .meta-row {
  display: flex; gap: 24px; padding-top: 14px; margin-top: auto;
  border-top: 1px solid var(--line-soft); flex-wrap: wrap;
}
.event .meta-row .m { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; }
.event .meta-row .m svg { color: var(--green-deep); }

/* Past events as a compact row */
.past-list { display: flex; flex-direction: column; }
.past-row {
  display: grid; grid-template-columns: auto 1fr auto auto auto;
  gap: 24px; align-items: center;
  padding: 20px 24px;
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  transition: background 0.2s;
}
.past-row:last-child { border-bottom: 1px solid var(--line-soft); }
.past-row:hover { background: var(--paper-2); }
.past-row .date { font-family: inherit; font-weight: 800; font-size: var(--fs-sm); color: var(--green-deep); letter-spacing: 0.06em; min-width: 100px; }
.past-row .title { font-size: var(--fs-md); font-weight: 800; letter-spacing: -0.01em; }
.past-row .loc { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }
.past-row .gal { font-size: var(--fs-2xs); color: var(--green-deep); font-weight: 800; letter-spacing: 0.18em; }
.past-row .arr { color: var(--ink); }


/* ==========================================================================
   EVENT DETAIL PAGE -- ev-hero, ev-details, ev-body, ev-gallery
   (NOTE: .ev-hero kept as-is so HTML pages don't break.)
   ========================================================================== */
.ev-hero { padding: 60px 0 0; background: var(--paper); }
.ev-hero .breadcrumbs { display: flex; gap: 12px; align-items: center; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; }
.ev-hero .breadcrumbs a:hover { color: var(--green-deep); }
.ev-hero .breadcrumbs .sep { color: var(--green); }
.ev-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.ev-meta span { padding: 6px 12px; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; background: var(--paper-2); }
.ev-meta span.featured { background: var(--green); color: var(--ink); }
.ev-hero h1 {
  font-size: clamp(34px, 4.5vw, 64px); line-height: 1.04;
  letter-spacing: -0.025em; max-width: 880px; margin-bottom: 28px;
  text-transform: uppercase;
}
.ev-hero h1 .acc { color: var(--green-deep); }
.ev-hero .lede { color: var(--muted); font-size: var(--fs-md); max-width: 780px; margin-bottom: 0; }

.ev-details { padding: 50px 0 0; background: var(--paper); }
.ev-key { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--ink); }
.ev-key .cell { padding: 22px 24px; border-right: 1px solid var(--ink); }
.ev-key .cell:last-child { border-right: none; }
.ev-key .cell .l { font-size: var(--fs-2xs); letter-spacing: 0.22em; color: var(--green-deep); font-weight: 800; text-transform: uppercase; }
.ev-key .cell .v { font-size: var(--fs-md); font-weight: 800; margin-top: 6px; letter-spacing: -0.01em; }

/* Body */
.ev-body { padding: 100px 0; background: var(--paper); }
.ev-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: start; }
.ev-content section { margin-bottom: 36px; }
.ev-content h2 { font-size: var(--fs-2xl); text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 14px; }
.ev-content h2 .num { color: var(--green-deep); margin-right: 12px; font-weight: 900; }
.ev-content p { font-size: var(--fs-md); line-height: 1.75; color: var(--muted); margin-bottom: 14px; }
.ev-content p strong { color: var(--ink); font-weight: 700; }
.ev-content ul { list-style: none; margin: 14px 0 18px; }
.ev-content ul li {
  font-size: var(--fs-base); line-height: 1.7; color: var(--muted);
  padding-left: 28px; position: relative; margin-bottom: 8px;
}
.ev-content ul li::before { content: '\2192'; color: var(--green-deep); font-weight: 900; position: absolute; left: 0; top: 0; }

/* Sidebar */
.ev-side { position: sticky; top: calc(var(--header-h) + 24px); }
.ev-card { background: var(--ink); color: var(--paper); padding: 28px; margin-bottom: 18px; }
.ev-card .l { font-size: var(--fs-2xs); letter-spacing: 0.22em; color: var(--green); font-weight: 800; margin-bottom: 12px; text-transform: uppercase; }
.ev-card h3 { font-size: var(--fs-lg); color: var(--paper); text-transform: none; letter-spacing: -0.01em; margin-bottom: 14px; }
.ev-card .row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ev-card .row:last-child { border-bottom: none; }
.ev-card .row .l-row { font-size: var(--fs-2xs); letter-spacing: 0.14em; color: var(--muted-2); text-transform: uppercase; font-weight: 700; }
.ev-card .row .v-row { font-size: var(--fs-sm); color: #fff; font-weight: 700; }
.ev-card a.cta {
  display: block; margin-top: 18px; padding: 14px;
  background: var(--green); color: var(--ink);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.18em; text-align: center;
}

/* Card description text */
.ev-card-desc { color: #B5B8B0; font-size: var(--fs-base); line-height: 1.55; margin-bottom: 18px; }

/* Green variant card */
.ev-card--green { background: var(--green); color: var(--ink); }
.ev-card--green .l { color: var(--ink); opacity: 0.7; }
.ev-card--green h3 { color: var(--ink); }
.ev-card--green p { color: rgba(14,20,20,0.8); font-size: var(--fs-base); line-height: 1.55; margin-bottom: 14px; }
.ev-card--green a.cta { background: var(--ink); color: var(--green); }

/* Gallery */
.ev-gallery { padding: 100px 0; background: var(--paper-2); }
.ev-gallery h2 { font-size: clamp(30px, 2.9vw, 40px); margin-bottom: 32px; }
.ev-gallery h2 .acc { color: var(--green-deep); }
.gal-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 200px; gap: 12px;
}
.gtile { overflow: hidden; background: var(--ink); position: relative; }
.gtile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.gtile:hover img { transform: scale(1.05); }
.gtile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(14,20,20,0.7) 100%); }
.gtile .lbl {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  color: #fff; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
}
.gg1 { grid-column: span 7; grid-row: span 2; }
.gg2 { grid-column: span 5; grid-row: span 1; }
.gg3 { grid-column: span 5; grid-row: span 1; }
.gg4 { grid-column: span 4; grid-row: span 1; }
.gg5 { grid-column: span 4; grid-row: span 1; }
.gg6 { grid-column: span 4; grid-row: span 1; }


/* ==========================================================================
   FAQ PAGE -- faq-body, faq-side, faq-list
   ========================================================================== */
.faq-body { padding: 100px 0; background: var(--paper); }
.faq-grid { display: grid; grid-template-columns: 280px 1fr; gap: 60px; align-items: start; }
.faq-side { position: sticky; top: calc(var(--header-h) + 24px); }
.faq-side h3 { font-size: var(--fs-xs); letter-spacing: 0.22em; color: var(--green-deep); margin-bottom: 18px; font-weight: 800; }
.faq-side ul { list-style: none; display: flex; flex-direction: column; gap: 4px; border-left: 2px solid var(--line-soft); }
.faq-side ul li a {
  display: block; padding: 12px 16px;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink); transition: all 0.2s;
  border-left: 2px solid transparent; margin-left: -2px;
}
.faq-side ul li a:hover, .faq-side ul li a.active { background: var(--paper-2); border-left-color: var(--green); color: var(--green-deep); }
.faq-side .help {
  margin-top: 28px; padding: 22px; background: var(--ink); color: var(--paper);
}
.faq-side .help h4 { font-size: var(--fs-md); text-transform: none; color: var(--green); margin-bottom: 10px; }
.faq-side .help p { font-size: var(--fs-base); color: #B5B8B0; line-height: 1.5; margin-bottom: 16px; }
.faq-side .help a { display: block; padding: 10px 14px; background: var(--green); color: var(--ink); font-weight: 800; font-size: var(--fs-xs); letter-spacing: 0.14em; text-align: center; }

.faq-section { margin-bottom: 56px; }
.faq-section h2 { font-size: clamp(30px, 2.8vw, 40px); margin-bottom: 24px; text-transform: uppercase; letter-spacing: -0.015em; }
.faq-section h2 .acc { color: var(--green-deep); }
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: var(--paper-2); border: 1px solid var(--line-soft);
  padding: 22px 24px; cursor: pointer; transition: all 0.25s;
}
.faq-item.open { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.faq-q .t { font-size: var(--fs-md); font-weight: 800; letter-spacing: -0.01em; text-transform: none; }
.faq-q .ck {
  width: 32px; height: 32px; background: var(--green); color: var(--ink);
  display: grid; place-items: center; font-size: var(--fs-md); font-weight: 900; flex-shrink: 0;
}
.faq-a {
  overflow: hidden; max-height: 0; transition: max-height 0.3s, padding-top 0.3s;
  font-size: var(--fs-base); line-height: 1.65; color: #C7CCC0;
}
.faq-item.open .faq-a { max-height: 300px; padding-top: 14px; }


/* ==========================================================================
   MANUFACTURING PAGE -- plant, cap-band, process, plant-gal, location
   ========================================================================== */

/* Plant Overview */
.plant { padding: 100px 0; background: var(--paper); }
.plant-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.plant h2 { font-size: clamp(34px, 3.6vw, 46px); margin-bottom: 22px; }
.plant h2 .acc { color: var(--green-deep); }
.plant p { font-size: var(--fs-md); line-height: 1.7; color: var(--muted); margin-bottom: 18px; }
.plant-cta { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.plant-feature {
  background: var(--ink); color: var(--paper);
  aspect-ratio: 4/3;
  background-image: linear-gradient(rgba(14,20,20,0.55), rgba(14,20,20,0.55)), url('../images/industrial-metal-roofing-corrosion-protection.webp');
  background-size: cover; background-position: center;
  position: relative; overflow: hidden;
}
.plant-feature .play {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.plant-feature .play .btn {
  width: 88px; height: 88px;
  background: var(--green); color: var(--ink);
  border-radius: 0;
  display: grid; place-items: center;
  cursor: pointer; position: relative;
}
.plant-feature .play .btn::before, .plant-feature .play .btn::after {
  content: ''; position: absolute; inset: -10px;
  border: 1px solid rgba(57,213,31,0.5); border-radius: 0;
  animation: ripple 2.4s infinite;
}
.plant-feature .play .btn::after { animation-delay: 1.2s; }
.plant-feature .stamp {
  position: absolute; left: 20px; bottom: 20px;
  background: var(--green); color: var(--ink);
  padding: 12px 16px; font-weight: 900; font-size: var(--fs-2xs);
  letter-spacing: 0.22em; text-transform: uppercase;
}


/* Capacity Band */
.cap-band {
  background: var(--green); padding: 100px 0;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.cap-cell { padding: 0 40px; border-right: 1px solid rgba(14,20,20,0.15); }
.cap-cell:last-child { border-right: none; }
.cap-cell .num { font-weight: 900; font-size: var(--fs-8xl); letter-spacing: -0.03em; line-height: 0.95; color: var(--ink); white-space: nowrap; }
.cap-cell .num .pl { font-size: var(--fs-4xl); color: var(--ink); }
.cap-cell .lab { font-size: var(--fs-xs); letter-spacing: 0.22em; font-weight: 800; text-transform: uppercase; color: var(--ink); margin-top: 10px; }
.cap-cell p { font-size: var(--fs-base); color: rgba(14,20,20,0.75); margin-top: 10px; line-height: 1.55; max-width: 240px; }


/* Process Flow */
.process { padding: 100px 0; background: var(--paper-2); }
.process h2 { font-size: clamp(34px, 3.6vw, 46px); margin-bottom: 14px; }
.process h2 .acc { color: var(--green-deep); }
.process .lead { font-size: var(--fs-base); color: var(--muted); max-width: 600px; margin-bottom: 50px; line-height: 1.65; }
.proc-rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; position: relative; }
.proc-rail::before {
  content: ''; position: absolute; left: 5%; right: 5%; top: 38px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 16px);
}
.proc-step { text-align: center; position: relative; }
.proc-step .n {
  width: var(--icon-lg); height: var(--icon-lg); background: var(--ink); color: var(--green);
  display: grid; place-items: center; font-weight: 900; font-size: var(--fs-xl);
  border-radius: 0; margin: 0 auto 18px; position: relative; z-index: 2;
  border: 4px solid var(--paper-2);
}
.proc-step:nth-child(2n) .n { background: var(--green); color: var(--ink); }
.proc-step h4 { font-size: var(--fs-base); text-transform: none; letter-spacing: -0.01em; margin-bottom: 8px; }
.proc-step p { font-size: var(--fs-base); line-height: 1.5; color: var(--muted); }


/* Photo Gallery - 3-col grid (scoped to plant-gal so it doesn't conflict
   with event-detail .gal-grid which is 12-col grid) */
.plant-gal { padding: 100px 0; background: var(--paper); }
.plant-gal h2 { font-size: clamp(34px, 3.6vw, 46px); margin-bottom: 14px; }
.plant-gal .lead { font-size: var(--fs-base); color: var(--muted); max-width: 600px; margin-bottom: 40px; }
.plant-gal .gal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 12px;
}
.gal-tile {
  overflow: hidden; background: var(--ink); position: relative;
  aspect-ratio: 4/3;
}
.gal-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.gal-tile:hover img { transform: scale(1.05); }
.gal-tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(14,20,20,0.8) 100%);
}
.gal-tile .lab {
  position: absolute; left: 14px; bottom: 14px; z-index: 2; color: #fff;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
}


/* Location -- scoped to section.location so it doesn't collide with
   .job .location (the job-card location text on the Careers page). */
section.location { padding: 100px 0; background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
section.location::before {
  content: ''; position: absolute; right: -200px; bottom: -200px;
  width: 600px; height: 600px; border-radius: 0;
  background: radial-gradient(circle, rgba(57,213,31,0.15), transparent 60%);
}
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; }
.loc h2 { color: var(--paper); font-size: clamp(34px, 3.6vw, 46px); margin-bottom: 22px; }
.loc h2 .acc { color: var(--green); }
.loc p { color: #C7CCC0; font-size: var(--fs-base); line-height: 1.7; margin-bottom: 24px; }
.loc-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.loc-info .cell {
  padding: 18px; background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
}
.loc-info .cell .l { font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--green); font-weight: 800; text-transform: uppercase; }
.loc-info .cell .v { font-size: var(--fs-base); color: #fff; font-weight: 800; margin-top: 6px; line-height: 1.3; }

.map-card {
  aspect-ratio: 1/1;
  position: relative;
  overflow: hidden;
  background: var(--char);
}


/* ==========================================================================
   PARTNER PAGE -- pitch, programs, benefits, form-sect, confid
   ========================================================================== */

/* Pitch */
.pitch { padding: 100px 0; background: var(--paper); }
.pitch-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.pitch h2 { font-size: clamp(34px, 3.6vw, 46px); margin-bottom: 24px; }
.pitch h2 .acc { color: var(--green-deep); }
.pitch p { font-size: var(--fs-md); line-height: 1.75; color: var(--muted); margin-bottom: 18px; }
.pitch p strong { color: var(--ink); font-weight: 700; }
.pitch-visual {
  aspect-ratio: 4/5;
  background: url('../images/warehouse-roof-valley-gutter-waterproofing.webp') center/cover no-repeat;
  position: relative;
}
.pitch-visual .stamp {
  position: absolute; bottom: -20px; left: -20px;
  background: var(--green); color: var(--ink);
  padding: 22px 26px; max-width: 240px;
}
.pitch-visual .stamp .b { font-weight: 900; font-size: var(--fs-4xl); letter-spacing: -0.025em; line-height: 1.05; }
.pitch-visual .stamp .s { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.18em; margin-top: 8px; text-transform: uppercase; }

/* Pitch CTA */
.pitch-cta { margin-top: 24px; }

/* Programs */
.programs { padding: 100px 0; background: var(--paper-2); }
.programs h2 { font-size: clamp(34px, 3.6vw, 46px); margin-bottom: 14px; }
.programs h2 .acc { color: var(--green-deep); }
.programs .lead { font-size: var(--fs-base); color: var(--muted); max-width: 600px; margin-bottom: 50px; line-height: 1.65; }
.prog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); background: var(--paper); }
.prog {
  padding: 32px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  min-height: 360px; display: flex; flex-direction: column; transition: all 0.3s;
}
.prog:hover { background: var(--ink); color: var(--paper); }
.prog:hover h3 { color: var(--green); }
.prog:hover p { color: rgba(255,255,255,0.8); }
.prog:hover li { color: rgba(255,255,255,0.85); }
.prog .ic { width: var(--icon-md); height: var(--icon-md); background: var(--green); color: var(--ink); display: grid; place-items: center; margin-bottom: 26px; }
.prog .tag { font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--green-deep); font-weight: 800; margin-bottom: 10px; text-transform: uppercase; }
.prog:hover .tag { color: var(--green); }
.prog h3 { font-size: var(--fs-xl); text-transform: none; letter-spacing: -0.015em; margin-bottom: 12px; transition: color 0.3s; }
.prog p { font-size: var(--fs-base); line-height: 1.65; color: var(--muted); margin-bottom: 20px; transition: color 0.3s; }
.prog ul { list-style: none; }
.prog ul li {
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink);
  display: flex; gap: 10px; padding: 6px 0;
  border-top: 1px dashed var(--line-soft);
  transition: all 0.3s;
}
.prog ul li::before { content: '\2713'; color: var(--green-deep); font-weight: 900; flex-shrink: 0; }
.prog:hover li { border-top-color: var(--line); }
.prog:hover li::before { color: var(--green); }

/* Benefits Number Strip */
.benefits { padding: 100px 0; background: var(--green); }
.ben-head h2 { font-size: clamp(34px, 3.6vw, 46px); margin-bottom: 40px; max-width: 700px; color: var(--ink); }
.ben-head .eyebrow-tag { color: var(--ink); }
.ben-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.ben { padding: 32px 24px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--green); }
.ben .ic { color: var(--ink); margin-bottom: 18px; }
.ben h4 { font-size: var(--fs-md); text-transform: none; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--ink); }
.ben p { font-size: var(--fs-base); line-height: 1.55; color: rgba(14,20,20,0.75); }

/* The partner form section now uses the contact page's .csplit markup, so
   the old .form-sect / .form-grid rules are gone. This one survives: the
   email link inside the partner contact card still carries it. */
.form-email-link { color: var(--green-deep); font-weight: 700; }

/* Confidentiality */
.confid { padding: 100px 0; background: var(--ink); color: var(--paper); }
.confid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.confid h2 { color: var(--paper); font-size: clamp(34px, 3.6vw, 46px); margin-bottom: 22px; }
.confid h2 .acc { color: var(--green); }
.confid p { color: #C7CCC0; font-size: var(--fs-base); line-height: 1.7; margin-bottom: 18px; }
.confid .eyebrow-tag { color: var(--green); }
.confid .seal {
  aspect-ratio: 1/1; background: linear-gradient(135deg, var(--green) 0%, #39d51f 100%);
  display: grid; place-items: center; color: var(--ink); font-weight: 900;
  font-size: var(--fs-9xl); letter-spacing: -0.04em; position: relative;
}
.confid .seal::before {
  content: 'STRICT NDA'; position: absolute; top: 24px; left: 24px;
  font-size: var(--fs-xs); letter-spacing: 0.2em; font-weight: 800;
}
.confid .seal small { display: block; font-size: var(--fs-2xs); letter-spacing: 0.2em; margin-top: 14px; font-weight: 800; }


/* ==========================================================================
   PRODUCTS PAGE (category listings) -- cat-block, prod-grid, all-products,
   compare table, prod-cta
   ========================================================================== */
.cat-block { padding: 100px 0 0; background: var(--paper); }
.cat-block + .cat-block { padding-top: 60px; }
.cat-block:last-of-type { padding-bottom: 100px; }
.cat-head {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 50px; gap: 40px;
}
.cat-head .cat-num {
  font-size: var(--fs-xs); letter-spacing: 0.22em; color: var(--green-deep);
  font-weight: 800; margin-bottom: 14px;
}
.cat-head h2 { font-size: clamp(34px, 3.9vw, 56px); }
.cat-head h2 .acc { color: var(--green-deep); }
.cat-head p { font-size: var(--fs-base); color: var(--muted); max-width: 380px; line-height: 1.65; }

.cat-banner {
  position: relative; aspect-ratio: 16/5;
  overflow: hidden; margin-bottom: 0;
}
.cat-banner img { width: 100%; height: 100%; object-fit: cover; }
.cat-banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,20,20,0.85) 0%, rgba(14,20,20,0.4) 60%, transparent 100%);
}
.cat-banner .overlay {
  position: absolute; left: 60px; bottom: 50px; right: 60px; z-index: 2;
  display: flex; justify-content: space-between; align-items: end; gap: 40px;
}
.cat-banner .overlay h3 {
  color: #fff; font-size: clamp(34px, 3.3vw, 46px); max-width: 600px;
}
.cat-banner .overlay .badge {
  background: var(--green); color: var(--ink);
  padding: 8px 14px; font-weight: 800; font-size: var(--fs-2xs);
  letter-spacing: 0.22em; display: inline-block; margin-bottom: 18px;
}
.cat-banner .overlay .meta { color: rgba(255,255,255,0.85); font-size: var(--fs-sm); max-width: 280px; text-align: right; }

.prod-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  background: var(--ink);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.prod-grid.solo { grid-template-columns: 1fr; }
.prod {
  background: #fff;
  padding: 36px 32px;
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  position: relative; min-height: 480px;
  transition: all 0.3s;
}
.prod:hover { background: var(--ink); color: #fff; }
.prod:hover .pname { color: var(--green); }
.prod:hover .pcode { background: var(--green); color: var(--ink); border-color: var(--green); }
.prod:hover .pdesc { color: rgba(255,255,255,0.8); }
.prod:hover .pbtn { background: var(--green); color: var(--ink); }
.prod .pcode {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.22em;
  color: var(--ink); border: 1px solid var(--ink);
  padding: 6px 10px; margin-bottom: 28px; align-self: flex-start;
  transition: all 0.3s;
}
.prod .pcode::before { content: ''; width: 6px; height: 6px; background: var(--green); border-radius: 0; }
.prod .pimg {
  aspect-ratio: 16/9; background: var(--paper-2);
  overflow: hidden; margin-bottom: 24px;
}
.prod .pimg img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.prod:hover .pimg img { transform: scale(1.04); }
.prod .pname {
  font-size: var(--fs-3xl); font-weight: 900; letter-spacing: -0.02em;
  margin-bottom: 6px; line-height: 1; text-transform: none;
  transition: color 0.3s;
}
.prod .pname sup { color: var(--green-deep); font-size: var(--fs-base); }
.prod:hover .pname sup { color: var(--green); }
.prod .psub {
  font-size: var(--fs-2xs); letter-spacing: 0.16em; font-weight: 700;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 16px;
}
.prod .pdesc {
  font-size: var(--fs-base); line-height: 1.65; color: var(--muted);
  margin-bottom: 24px; flex: 1; transition: color 0.3s;
}
.prod .ptags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.prod .ptags span {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; background: var(--paper-2); color: var(--ink);
  padding: 6px 10px;
}
.prod:hover .ptags span { background: rgba(57,213,31,0.15); color: var(--green); }
.prod .pbtn {
  background: var(--ink); color: var(--paper);
  margin: 0 -32px -36px; padding: 22px 32px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; transition: all 0.3s; margin-top: auto;
}

/* All Products - 2-col grid */
.all-products {
  padding: 100px 0;
}

.all-products h2 {
  font-size: clamp(34px, 4.0vw, 56px);
  margin-bottom: 16px;
}

.all-products h2 .acc { color: var(--green-deep); }

.section-lead {
  font-size: var(--fs-base);
  color: var(--muted);
  max-width: 640px;
  line-height: 1.7;
  margin-bottom: 50px;
}

.prod-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.prod-block {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  overflow: hidden;
  background: var(--white);
  transition: box-shadow 0.3s, transform 0.3s;
  text-decoration: none;
  color: inherit;
}

.prod-block:hover {
  box-shadow: 0 16px 48px rgba(14,20,20,0.10);
  transform: translateY(-4px);
}

.prod-block .pb-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-2);
}

.prod-block .pb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.prod-block:hover .pb-img img {
  transform: scale(1.04);
}

.prod-block .pb-img .pb-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--green);
  color: var(--black);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 6px 14px;
  border-radius: 0;
}

.prod-block .pb-body {
  padding: 28px 30px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* pin VIEW PRODUCT to the card bottom so both cards align */
.prod-block .pb-link {
  margin-top: auto;
}

.prod-block .pb-code {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}

.prod-block .pb-name {
  font-size: var(--fs-3xl);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.1;
}

.prod-block .pb-name sup {
  color: inherit; /* TM mark follows its brand colour */
  font-size: var(--fs-xs);
}

.prod-block .pb-sub {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.prod-block .pb-desc {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 18px;
}

.prod-block .pb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.prod-block .pb-tags span {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(57, 213, 31, 0.08);
  color: var(--green-deep);
  border: 1px solid rgba(57, 213, 31, 0.28);
  padding: 5px 10px;
  border-radius: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.prod-block:hover .pb-tags span {
  background: var(--green);
  color: var(--black);
}

/* BaseLar card -- orange brand accents (tags + link) */
.prod-block--orange .pb-tags span {
  background: rgba(229, 121, 26, 0.08);
  color: var(--orange-deep);
  border-color: rgba(229, 121, 26, 0.3);
}

.prod-block--orange:hover .pb-tags span {
  background: var(--orange);
  color: var(--white);
}

.prod-block--orange .pb-link {
  color: var(--orange-deep);
}

.prod-block--orange:hover .pb-link {
  color: var(--orange);
}

.prod-block .pb-link {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
  transition: color 0.2s;
}

.prod-block:hover .pb-link {
  color: var(--green-dk);
}

/* Coming soon placeholder */
.prod-block.coming-soon {
  opacity: 0.5;
  pointer-events: none;
}
.prod-block.coming-soon .pb-img.placeholder {
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.cs-badge {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 20px;
  border: 1px dashed var(--border);
  border-radius: 0;
}

/* Compare Table */
.compare { padding: 100px 0; }
.compare h2 { font-size: var(--fs-6xl); font-weight: 900; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 16px; }
.compare h2 .acc { color: var(--green); font-style: italic; }
.compare-lead { font-size: var(--fs-md); color: var(--muted); max-width: 560px; line-height: 1.7; margin-bottom: 48px; }

.comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.comp-table th {
  text-align: left;
  padding: 14px 18px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
}
.comp-table th:first-child {
  border-radius: 0;
}
.comp-table th:last-child {
  border-radius: 0;
}
.comp-table td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
  color: var(--muted);
}
.comp-table td:first-child {
  font-weight: 700;
  color: var(--ink);
}
.comp-table td.y {
  color: var(--green-deep);
  font-weight: 700;
}
/* BaseLar column: orange affirmative, matching its brand accent */
.comp-table td.y--orange {
  color: var(--orange);
}

/* Products CTA */
.prod-cta {
  padding: 100px 0;
  background: var(--ink);
  color: var(--paper);
}
.prod-cta-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.prod-cta h3 {
  font-size: var(--fs-3xl);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.prod-cta h3 .acc { color: var(--green); font-style: italic; }
.prod-cta p {
  color: rgba(255,255,255,0.6);
  font-size: var(--fs-base);
  line-height: 1.7;
  max-width: 480px;
}
.prod-cta-buttons {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

/* ==========================================================================
   CENTERED SINGLE-COLUMN SECTIONS (after photo/section removal)
   ========================================================================== */
/* About — "Our Story" */
.story-grid.story-centered {
  grid-template-columns: 1fr;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.story-grid.story-centered p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Manufacturing — "One Roof. One Standard." */
.plant-grid.plant-centered {
  grid-template-columns: 1fr;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.plant-grid.plant-centered .plant-cta {
  justify-content: center;
}

/* Manufacturing — Location ("Gujarat") */
.loc-grid.loc-centered {
  grid-template-columns: 1fr;
  max-width: 1040px;
  margin: 0 auto;
}
.loc-grid.loc-centered .loc {
  text-align: center;
}
.loc-grid.loc-centered .loc p {
  margin-left: auto;
  margin-right: auto;
  max-width: 880px;
}
.loc-grid.loc-centered .loc-info {
  grid-template-columns: repeat(4, 1fr);
  text-align: left;
}
@media (max-width: 880px) {
  .loc-grid.loc-centered .loc-info { grid-template-columns: 1fr 1fr; }
}


/* ==========================================================================
   PRODUCT DETAIL PAGE (Daclar / Drylar / Vezlar / Zavlar) --
   prod-intro, prod-specs, prod-details, prod-packaging, prod-applications,
   prod-others
   ========================================================================== */

/* PRODUCT INTRO (image + copy) */
.prod-intro {
  padding: 100px 0;
  background: var(--paper);
  overflow-x: clip;
}

.prod-intro-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}

.prod-intro-img {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prod-intro-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.prod-intro-img .stamp {
  position: absolute;
  left: -20px;
  top: 40px;
  background: var(--green);
  color: var(--ink);
  padding: 18px 22px;
  font-weight: 900;
  font-size: var(--fs-xl);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  max-width: 200px;
}

.prod-intro-img .stamp small {
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  font-weight: 700;
  display: block;
  margin-top: 6px;
}

.prod-intro-copy h2 {
  font-size: clamp(34px, 3.9vw, 56px);
  margin-bottom: 10px;
}

.prod-intro-copy h2 .acc,
.prod-intro-copy h2 sup {
  color: var(--green-deep);
  font-size: 60%;
}

.prod-intro-copy .pd-sub {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 24px;
}

.prod-intro-copy p {
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 22px;
  max-width: 600px;
}

.prod-intro-copy p strong {
  color: var(--ink);
  font-weight: 700;
}

.prod-intro-copy .pd-actions {
  display: flex;
  gap: 14px;
  margin-top: 14px;
}


/* SPECS BAND (same pattern as stats-band) */
.prod-specs {
  background: var(--green);
  padding: 0;
}

.prod-specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.prod-specs-grid .spec {
  padding: 40px 40px;
  border-right: 1px solid rgba(14,20,20,0.15);
}

.prod-specs-grid .spec:last-child {
  border-right: none;
}

.prod-specs-grid .spec .sl {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}

.prod-specs-grid .spec .sv {
  font-weight: 900;
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  color: var(--ink);
}


/* BENEFITS & FEATURES (pillars-style grid) */
.prod-details {
  padding: 100px 0;
  background: var(--paper);
}

.prod-details-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 50px;
}

.prod-details-head h2 {
  font-size: clamp(34px, 3.5vw, 46px);
  max-width: 600px;
}

.prod-details-head h2 .acc {
  color: var(--green-deep);
}

.prod-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
  background: var(--white);
}

.prod-detail-col {
  padding: 40px 36px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.prod-detail-col h3 {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 24px;
}

.prod-detail-col ul {
  list-style: none;
}

.prod-detail-col ul li {
  position: relative;
  padding-left: 24px;
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 14px;
}

.prod-detail-col ul li:last-child {
  margin-bottom: 0;
}

.prod-detail-col ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: var(--green);
}


/* PACKAGING (card-style) */
.prod-packaging {
  padding: 100px 0;
  background: var(--paper-2);
}

.prod-packaging h3 {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 28px;
}

.pack-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.pack-grid .pack-item {
  background: var(--white);
  padding: 28px 32px;
  border-left: 4px solid var(--green);
  min-width: 160px;
  flex: 1;
}

.pack-item .pack-text {
  font-weight: 900;
  font-size: var(--fs-4xl);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.pack-item .pack-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 4px;
}


/* APPLICATION AREAS (projects grid pattern) */
.prod-applications {
  padding: 100px 0;
  background: var(--paper);
}

.prod-applications .section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 44px;
}

.prod-applications .section-head h2 {
  font-size: clamp(34px, 3.6vw, 46px);
  max-width: 600px;
}

.prod-applications .section-head h2 .acc {
  color: var(--green-deep);
}

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

/* Inline product cross-links inside product descriptions */
.prod-intro-copy p a {
  color: var(--green-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prod-intro-copy p a:hover { color: var(--green); }

.app-card {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: #fff;
  border: 1px solid #EAEAEA;
  display: flex;
  flex-direction: column;
}

.app-card .app-card-img {
  overflow: hidden;
  position: relative;
  background: #fff;
  padding: 10px;
  aspect-ratio: 1 / 1;       /* photographs, so every card crops to one ratio */
}

/* The where-to-use cards used to carry a per-product brand tint here, a
   'color' blend layer over each image. That was right when these were flat
   icons; with real project photography it turned every shot orange or green,
   so it is gone. The images are shown as they are. */

.app-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* fill the square without distorting the photo */
  display: block;
  border-radius: 0;
  transition: transform 0.4s;
}

.app-card:hover img {
  transform: scale(1.03);
}

.app-card .app-num {
  display: none;
}

.app-card .app-label {
  padding: 16px 20px 14px;
  font-weight: 800;
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #fff;
  background: var(--ink);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.app-card .app-cat {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--green);
  text-transform: uppercase;
  display: block;
  margin-top: 6px;
}


/* OTHER PRODUCTS (services grid pattern - 3 col cards) */
.prod-others {
  padding: 100px 0;
  background: var(--paper-2);
}

.prod-others-head {
  text-align: center;
  margin-bottom: 60px;
}

.prod-others-head h2 {
  font-weight: 900;
  font-size: clamp(40px, 4.1vw, 56px);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1;
  margin-bottom: 20px;
}

.prod-others-head h2 .acc {
  color: var(--green-deep);
}

.prod-others-head p {
  font-size: var(--fs-base);
  color: var(--muted);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
}

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

.other-card {
  background: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s;
}

.other-card .oc-img {
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.other-card .oc-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.6s ease;
}

.other-card:hover .oc-img img {
  transform: scale(1.04);
}

.other-card .oc-body {
  padding: 28px 30px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.other-card .oc-code {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}

.other-card .oc-name {
  font-weight: 800;
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  line-height: 1.25;
  color: var(--ink);
}

.other-card .oc-sub {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--muted);
  flex: 1;
  margin-bottom: 0;
}

.other-card .oc-link {
  background: var(--green);
  color: var(--ink);
  margin: 0;
  padding: 18px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  margin-top: auto;
}

.other-card:hover .oc-link {
  background: var(--green-dk);
}


/* ==========================================================================
   TESTIMONIALS PAGE -- featured-quote, quotes, recognition, logos-band
   (NOTE: testimonials.css redeclaration of .logo-grid / .logo-cell skipped
    -- use authoritative version above in HOMEPAGE -- CLIENTS section.)
   ========================================================================== */

.featured-quote { padding: 100px 0; background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
.featured-quote::before {
  content: '\201C'; position: absolute; left: 0; top: -40px;
  font-size: 380px; color: var(--green); opacity: 0.18;
  font-family: Georgia, serif; line-height: 1;
}
.featured-quote .container { position: relative; }
.featured-quote .q {
  font-size: clamp(30px, 3.0vw, 40px); line-height: 1.25;
  letter-spacing: -0.015em; color: #fff;
  max-width: 1000px; margin-bottom: 32px;
  font-weight: 700;
}
.featured-quote .q .acc { color: var(--green); }
.featured-quote .by { display: flex; align-items: center; gap: 18px; }
.featured-quote .by .av {
  width: var(--avatar); height: var(--avatar); border-radius: 0; background: var(--green); color: var(--ink);
  display: grid; place-items: center; font-weight: 900; font-size: var(--fs-xl);
}
.featured-quote .by .name { font-size: var(--fs-lg); font-weight: 800; }
.featured-quote .by .role { font-size: var(--fs-sm); color: var(--muted-2); margin-top: 4px; letter-spacing: 0.06em; }

/* Quote grid */
.quotes { padding: 100px 0; background: var(--paper); }
.quotes h2 { font-size: clamp(34px, 3.6vw, 46px); margin-bottom: 14px; }
.quotes h2 .acc { color: var(--green-deep); }
.quotes .lead { font-size: var(--fs-base); color: var(--muted); max-width: 600px; margin-bottom: 50px; }
.q-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.q-card {
  background: #fff; padding: 32px;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  display: flex; flex-direction: column; gap: 18px;
  transition: all 0.3s;
}
.q-card:hover { background: var(--green); }
.q-card .stars { color: var(--green); font-size: var(--fs-lg); letter-spacing: 2px; }
.q-card:hover .stars { color: var(--ink); }
.q-card .quote { font-size: var(--fs-base); line-height: 1.65; color: var(--ink); font-weight: 500; flex: 1; }
.q-card .by { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.q-card:hover .by { border-color: rgba(14,20,20,0.15); }
.q-card .by .av { width: var(--avatar); height: var(--avatar); background: var(--ink); color: var(--green); display: grid; place-items: center; border-radius: 0; font-weight: 900; font-size: var(--fs-base); }
.q-card:hover .by .av { background: var(--ink); }
.q-card .by .name { font-size: var(--fs-base); font-weight: 800; text-transform: none; letter-spacing: -0.01em; }
.q-card .by .role { font-size: var(--fs-2xs); color: var(--muted-2); margin-top: 2px; letter-spacing: 0.08em; }
.q-card:hover .by .role { color: rgba(14,20,20,0.65); }

/* Recognition */
.recognition { padding: 100px 0; background: var(--paper-2); }
.recognition h2 { font-size: clamp(34px, 3.6vw, 46px); margin-bottom: 14px; }
.recognition h2 .acc { color: var(--green-deep); }
.recognition .lead { font-size: var(--fs-base); color: var(--muted); max-width: 600px; margin-bottom: 40px; }
.rec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); background: var(--paper); }
.rec {
  padding: 32px 24px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  text-align: center;
}
.rec .ic { width: var(--icon-lg); height: var(--icon-lg); background: var(--green); color: var(--ink); border-radius: 0; margin: 0 auto 18px; display: grid; place-items: center; }
.rec h4 { font-size: var(--fs-base); text-transform: none; letter-spacing: -0.01em; margin-bottom: 6px; }
.rec .yr { font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--green-deep); font-weight: 800; text-transform: uppercase; margin-bottom: 10px; }
.rec p { font-size: var(--fs-base); color: var(--muted); line-height: 1.5; }

/* Logos band (testimonials variant -- shares .logo-grid from homepage section) */
.logos-band { padding: 100px 0; background: var(--paper); }
.logos-band h3 { text-align: center; font-size: var(--fs-base); letter-spacing: 0.22em; color: var(--muted); margin-bottom: 36px; font-weight: 800; text-transform: uppercase; }
/* Testimonials-page logo cells use text content; small visual tweak */
.logos-band .logo-cell {
  aspect-ratio: 4/3;
  font-weight: 800; font-size: var(--fs-md); color: var(--muted-2);
  text-align: center; padding: 10px; text-transform: uppercase;
}
.logos-band .logo-cell:hover { background: var(--ink); color: var(--green); }


/* ==========================================================================
   LEGAL PAGES -- privacy & terms (shared .legal block)
   (NOTE: terms.css is a near-duplicate of privacy.css -- skipped.)
   ========================================================================== */
.legal { padding: 100px 0; background: var(--paper); }
.legal-grid { display: grid; grid-template-columns: 260px 1fr; gap: 60px; align-items: start; }
.legal-toc { position: sticky; top: calc(var(--header-h) + 24px); }
.legal-toc h3 { font-size: var(--fs-xs); letter-spacing: 0.22em; color: var(--green-deep); margin-bottom: 16px; font-weight: 800; }
.legal-toc ul { list-style: none; border-left: 2px solid var(--line-soft); }
.legal-toc a {
  display: block; padding: 10px 14px; font-size: var(--fs-sm); font-weight: 600;
  color: var(--muted); margin-left: -2px; border-left: 2px solid transparent;
  transition: all 0.2s;
}
.legal-toc a:hover, .legal-toc a.active { color: var(--ink); border-left-color: var(--green); background: var(--paper-2); }
.legal-body section { margin-bottom: 52px; }
.legal-body h2 { font-size: var(--fs-xl); text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 16px; }
.legal-body h2 .num { color: var(--green-deep); margin-right: 12px; font-weight: 900; }
.legal-body p { font-size: var(--fs-base); line-height: 1.75; color: var(--muted); margin-bottom: 14px; }
.legal-body p strong { color: var(--ink); font-weight: 700; }
.legal-body ul { list-style: none; margin: 14px 0 18px; }
.legal-body ul li {
  font-size: var(--fs-base); line-height: 1.7; color: var(--muted);
  padding-left: 24px; position: relative; margin-bottom: 8px;
}
.legal-body ul li::before {
  content: '\2192'; color: var(--green-deep); font-weight: 900;
  position: absolute; left: 0; top: 0;
}
.updated-bar {
  padding: 18px 22px; background: var(--paper-2);
  border-left: 4px solid var(--green); margin-bottom: 40px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
}
.updated-bar .l { font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--green-deep); font-weight: 800; text-transform: uppercase; }
.updated-bar .v { font-size: var(--fs-base); font-weight: 800; }


/* ==========================================================================
   404 PAGE -- err-wrap, err-grid, err-num, err-links
   ========================================================================== */
.err-wrap {
  min-height: calc(100vh - 90px);
  display: grid; align-items: center;
  background: var(--ink); color: var(--paper);
  position: relative; overflow: hidden;
  padding: 100px 0;
}
.err-wrap::before {
  content: ''; position: absolute; right: -200px; top: -100px;
  width: 600px; height: 600px; border-radius: 0;
  background: radial-gradient(circle, rgba(57,213,31,0.2), transparent 60%);
}/* square grid pattern removed per client request */

.err-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }

.err-num {
  font-size: clamp(180px, 22.0vw, 360px);
  font-weight: 900; letter-spacing: -0.05em;
  line-height: 0.85; color: var(--green);
  text-shadow:
    6px 6px 0 var(--ink),
    6px 6px 0 1px var(--green);
}
.err-num .crack {
  color: transparent; -webkit-text-stroke: 2px var(--green);
  display: inline-block; transform: rotate(-6deg) translateY(-12px);
}

.err-body .tag { font-size: var(--fs-xs); letter-spacing: 0.22em; color: var(--green); font-weight: 800; margin-bottom: 18px; }
.err-body h1 {
  font-size: clamp(34px, 3.9vw, 56px); line-height: 1; color: #fff;
  margin-bottom: 22px; letter-spacing: -0.025em;
}
.err-body h1 .acc { color: var(--green); }
.err-body p { font-size: var(--fs-md); line-height: 1.7; color: #C7CCC0; max-width: 480px; margin-bottom: 32px; }

.err-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }

.err-links {
  border-top: 1px solid var(--line);
  padding-top: 28px; margin-top: 28px;
}
.err-links .l { font-size: var(--fs-2xs); letter-spacing: 0.22em; color: var(--green); font-weight: 800; margin-bottom: 16px; text-transform: uppercase; }
.err-links .row { display: flex; flex-wrap: wrap; gap: 0; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.err-links .row a {
  flex: 1 1 50%; padding: 16px 18px;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.06em;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--paper); transition: all 0.2s;
}
.err-links .row a:hover { background: var(--green); color: var(--ink); }


/* ==========================================================================
   CLIENT CHANGE REQUESTS -- 2026-07-21 (client walkthrough feedback)
   Consolidated, reviewable overrides. Grouped by change-request section.
   Colour codes above in :root are placeholders pending client's exact hex.
   ========================================================================== */

/* ---- S0: brand-word highlights (MetLar green / BaseLar orange) ---------- */
.brand-green  { color: var(--green-deep); }   /* MetLar on light backgrounds  */
.brand-orange { color: var(--orange-deep); }  /* BaseLar on light backgrounds */
/* bright variants for dark / photographic backgrounds */
.brand-green--bright,  .on-dark .brand-green  { color: var(--green); }
.brand-orange--bright, .on-dark .brand-orange { color: var(--orange); }

/* ---- S0: remove numbered badges from repeating grids sitewide ---------- */
.project .num { display: none !important; }   /* project / case-study tiles   */

/* ---- S0 / S1: hide video play buttons until intro video is ready -------- */
.play-btn,
.play-btn-big { display: none !important; }

/* ---- S1: hero heading -- slightly looser spacing between the two lines --- */
.hero h1 { line-height: 1.08; }

/* ---- S2: product / stat section heading -- a touch more line spacing ----- */
.services-header h2 { line-height: 1.08; }

/* ---- S3: MetLar / BaseLar "View Product" buttons ----------------------- */
/* MetLar: green default, invert to BLACK on hover (was green-dk) */
.service:hover .s-btn { background: var(--ink); color: var(--green); }
/* BaseLar: ORANGE button, invert to BLACK on hover
   (scoped with .service to beat the base ".service .s-btn" specificity) */
.service .s-btn--orange       { background: var(--orange); color: var(--ink); }
.service:hover .s-btn--orange { background: var(--ink);   color: var(--orange); }

/* ---- S3 / S5: product tin -- padded, fully contained, never clipped ---- */
.service-img {
  background: var(--white);
  padding: 34px 48px 26px;          /* breathing room around the tin */
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-img img {
  width: auto;
  max-width: 100%;
  max-height: 320px;                /* keep the tin a sensible size */
  object-fit: contain;
  transform: none;                  /* no zoom -> lid is no longer cut off */
  filter: drop-shadow(0 12px 16px rgba(14,20,20,0.18));
}
.service:hover .service-img img { transform: translateY(-6px); }  /* gentle lift, no clipping */

/* ---- S4: secondary (slide-panel) logo -- enlarge toward header size ----- */
/* Header logo is 72px; the compact menu logo was 32px. Bumped for a more
   consistent brand size. NOTE: the home FOOTER currently has no logo image
   (it uses the "Our Philosophy" text block) -- add one at header size once the
   brand SVG is supplied if a footer logo mark is wanted. */
.slide-panel__logo { height: 44px; }

/* ---- S5: product pages -- hero heading spacing + product tin treatment --- */
.page-hero h1 { line-height: 1.04; }        /* was 0.98 -- a touch more air */
.prod-intro-img {                            /* let the tin sit centred with breathing room */
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.prod-intro-img img {
  width: auto;
  max-width: 100%;
  max-height: 430px;                         /* contained -- no clipping */
  object-fit: contain;
  transform: none;
  filter: drop-shadow(0 16px 24px rgba(14,20,20,0.22));
}

/* ---- S6: BaseLar page -- flip the BODY green theme to ORANGE -------------
   Scoped token remap: every body element that used --green now resolves to
   --orange. Header + footer live OUTSIDE this wrapper (in the layout), so
   they correctly stay green. Logo is untouched. -------------------------- */
.prod-theme--orange {
  --green:      var(--orange);
  --green-dk:   var(--orange-dk);
  --green-deep: var(--orange-deep);
}
/* hero grid + glow use hardcoded green rgba -> orange within the theme *//* square grid pattern removed per client request */

.prod-theme--orange .page-hero::after {
  background: radial-gradient(circle, rgba(229,121,26,0.18), transparent 60%);
}

/* ---- S7: Applications page --------------------------------------------- */
/* remove numbered badges on application tiles */
.area-card .num { display: none !important; }
/* per-product colour logic: MetLar green, BaseLar orange (labels on tiles) */
.area-card[data-cat="metlar"]  .product { color: var(--green); }
.area-card[data-cat="baselar"] .product { color: var(--orange); }
/* filter tabs adopt the product colour when active / hovered */
.filter-bar button[data-filter="metlar"]:hover,
.filter-bar button[data-filter="metlar"].active  { background: var(--green);  color: var(--ink); }
.filter-bar button[data-filter="baselar"]:hover,
.filter-bar button[data-filter="baselar"].active { background: var(--orange); color: var(--ink); }
/* bottom CTA: keep copy left, stack both buttons on the RIGHT (fills the gap) */
.page-cta--split .cta-inner {
  max-width: 1040px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
}
.page-cta--split .cta-copy   { max-width: 620px; }
.page-cta--split .cta-copy p { margin-bottom: 0; }
.page-cta--split .cta-actions {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 12px;
}
.page-cta--split .cta-actions .btn { justify-content: center; }
@media (max-width: 860px) {
  .page-cta--split .cta-inner   { flex-direction: column; align-items: flex-start; gap: 28px; }
  .page-cta--split .cta-actions { width: 100%; min-width: 0; }
  .page-cta--split .cta-actions .btn { flex: 1 1 auto; }
}

/* ---- S8: About -- "What We Stand For" head block shifted right ---------- */
.pillars-head { max-width: none; text-align: left; }
.pillars-head .pillar-lead { margin-left: 0; max-width: 760px; }

/* ---- S9: Manufacturing page ------------------------------------------- */
/* facility/process photo (right column of the plant intro) */
.plant-photo {
  position: relative;
  aspect-ratio: 4/3;
  background: transparent;
  overflow: hidden;
}
/* green capacity banner -- drop the black rule lines above & below */
.cap-band { border-top: none; border-bottom: none; }
/* process heading reflowed + shifted to the right-hand side */
.process-head { max-width: none; text-align: left; }
.process-head .lead { margin-left: 0; max-width: 760px; }

/* ---- S10: Careers -- shift "Who We're Hiring" head block to the right --- */
.jobs-head--right { flex-direction: row; }
.jobs-head--right > div:first-child { text-align: left; }

/* ---- S11: Certifications -- right-shift the two heading blocks ---------- */
.certs-head { max-width: none; text-align: left; }
.certs-head .lead { margin-left: 0; max-width: 760px; }
.lab-head { max-width: none; text-align: left; }
.lab-head .lead { margin-left: 0; max-width: 760px; }
/* downloadable report rows -- green hover/rollover (matches .job / .ch) */
.lab-card { transition: all 0.3s; }
.lab-card:hover           { background: var(--ink); border-left-color: var(--green); }
.lab-card:hover .meta h4  { color: var(--green); }
.lab-card:hover .meta .tag{ color: var(--green); }
.lab-card:hover .meta p   { color: #B5B8B0; }
.lab-card:hover .dl       { background: var(--green); color: var(--ink); }

/* ---- S12: Contact -- "Four Channels. One Team." head block shifted right */
.channels-head { max-width: none; text-align: left; }
.channels-head .lead { margin-left: 0; max-width: 760px; }
/* NOTE (S12): the green "glow bulb" the client flagged lived in the old map
   section, which has already been removed from this page. No contact-unique
   glow remains; the only green radial left is the shared .page-hero::after
   used on every inner page (site pattern, not the one to remove). */

/* ---- Products listing: contain + pad the tin (match homepage), no crop --- */
.prod-block .pb-img {
  aspect-ratio: auto;
  background: var(--white);
  padding: 32px 46px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod-block .pb-img img {
  width: auto; height: auto;
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(14,20,20,0.18));
}
.prod-block:hover .pb-img img { transform: translateY(-6px); }

/* ---- Section-head blocks: full width + compact line spacing (consistent sitewide) --- */
.pillars-head h2, .process-head h2, .certs-head h2, .lab-head h2, .channels-head h2 { line-height: 1.04; margin-bottom: 16px; }
.pillars-head, .process-head, .certs-head, .lab-head, .channels-head { width: 100%; }

/* ---- S4: footer logo (white-text variant for the dark footer, header scale) --- */
.footer-logo-link { display: inline-block; }
.footer-logo { height: 64px; width: auto; display: block; margin-bottom: 26px; }


/* ==========================================================================
   HOVER-INVERTED CARDS -- .post and .case flip to a dark background on
   hover, so their grey body text has to lift to the light grey or it
   drops to ~3:1 and becomes unreadable mid-interaction.
   ========================================================================== */
.post:hover .footer,
.post:hover p,
.case:hover .footer .loc,
.case:hover p {
  color: var(--muted-dark);
}


/* ==========================================================================
   ICON SYSTEM -- glyph sizing
   The SVGs are written with inline width/height attributes that vary from
   14px to 44px across the site. These rules give every glyph the size its
   tier calls for, so the tiles look identical page to page.
   All tiles are square: the no-border-radius rule is enforced sitewide.
   ========================================================================== */
.sp-cc-ic svg,
.csc .ic svg,
.cta-card .cc-arrow svg {
  width: var(--icon-sm-glyph);
  height: var(--icon-sm-glyph);
}

.val-grid > .val .ic svg,
.cat-row .cat-head .ic svg,
.ch .ic svg,
.prog .ic svg {
  width: var(--icon-md-glyph);
  height: var(--icon-md-glyph);
}

.contact-cell .icn svg,
.rec .ic svg {
  width: var(--icon-lg-glyph);
  height: var(--icon-lg-glyph);
}

/* every icon tile is a square, centred, and never squashed by flex */
.sp-cc-ic, .csc .ic, .cta-card .cc-arrow,
.val-grid > .val .ic, .cat-row .cat-head .ic, .ch .ic, .prog .ic,
.contact-cell .icn, .rec .ic, .proc-step .n, .cert .badge {
  border-radius: 0;
  flex-shrink: 0;
}

/* ==========================================================================
   COGNITO FORMS -- Become a Partner
   Two adjustments only: drop the white panel the embed draws behind itself so
   the card colour shows through, and put the input boxes on our own chrome.

   This deliberately sets nothing but Cognito's own theme variables. An earlier
   version targeted their internal classes directly and broke the country
   dropdown, because those class names belong to Cognito's JavaScript, not to
   us, and they are free to change. Variables are the supported surface. If
   something here is not enough, change it in Cognito's own Styles panel rather
   than adding selectors below.
   ========================================================================== */
.cognito-form .cog-cognito,
.cognito-form .cog-form {
  /* No white panel, no fixed width, no inset -- sit flat on the card. */
  --form__background-color: transparent;
  --form__margins: 0px;
  --form__width: 100%;

  /* Input boxes in our style: square, our border, our padding, our grey. */
  --input__background-color: #ffffff;
  --input__border-color: #E2E5E0;
  --input__border-radius: 0px;
  --input__color: #0E1414;
  --input__padding-h: 14px;
  --input__padding-v: 13px;
  --placeholder__color: #646A66;
  --border-radius: 0px;

  /* Cognito keeps a separate family variable per role, and its theme sets the
     labels and headings in Open Sans Condensed, so --font-family alone only
     changed the typed text. All of them have to be named. */
  --font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --heading__font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --header__font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --label__font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --button-primary__font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --button-secondary__font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Labels were running at 1.12em, noticeably larger than anything around
     them. Down to 13px so they sit under the type scale, not above it. */
  --label__font-size: 13px;

  /* Submit button on our own colours and weight. */
  --button-primary__background-color: #0E1414;
  --button-primary__color: #39d51f;
  --button-primary__border-radius: 0px;
  --button-primary__font-size: 13px;
  --button-primary__font-weight: 700;
}

/* The rest of our button style has no Cognito variable behind it -- there is
   no theme setting for full width, uppercase, tracking or a hover state. This
   is the one place that addresses the markup directly, and a button is safe to
   touch: unlike the dropdown, nothing in Cognito's JavaScript depends on how
   it is painted.

   The declarations carry !important because Cognito's own button rules are
   several classes deep and were winning on specificity, which is why the
   button kept sizing to its text instead of filling the row. */

/* Cognito prints its own title and standfirst above the fields. The page
   already carries that heading in "TELL US ABOUT YOUR BUSINESS", so this is a
   duplicate and comes out. */
.cognito-form .cog-header,
.cognito-form .cog-form__header,
.cognito-form .cog-form__title,
.cognito-form .cog-form__description {
  display: none !important;
}

/* The button can only stretch if what holds it stretches too. */
.cognito-form .cog-page__navigation,
.cognito-form .cog-form__navigation,
.cognito-form [class*="navigation"],
.cognito-form [class*="navigation"] > * {
  display: block !important;
  width: 100% !important;
  float: none !important;
}
.cognito-form .cog-page__navigation,
.cognito-form .cog-form__navigation {
  margin-top: 6px !important;
  padding-top: 0 !important;
}

/* Matched to .btn / .btn-dark, declaration for declaration. */
.cognito-form .cog-button--primary,
.cognito-form button[type="submit"],
.cognito-form input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  padding: 16px 28px !important;
  font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  background-color: #0E1414 !important;
  color: #39d51f !important;
  border: 2px solid #0E1414 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center !important;
}

.cognito-form .cog-button--primary *,
.cognito-form button[type="submit"] * {
  text-align: center !important;
  width: auto !important;
  display: inline !important;
}

.cognito-form .cog-button--primary:hover,
.cognito-form button[type="submit"]:hover,
.cognito-form input[type="submit"]:hover {
  background-color: #39d51f !important;
  color: #0E1414 !important;
  border-color: #39d51f !important;
}

.cognito-form .cog-button--primary:focus-visible,
.cognito-form button[type="submit"]:focus-visible {
  outline: 2px solid #39d51f;
  outline-offset: 2px;
}

.cognito-form .cog-button--primary[disabled],
.cognito-form button[type="submit"][disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Contact form only: Country and ISD Code share their space evenly.
   Cognito assigns each field a percentage width in its form builder, which left
   Country too narrow to show a country name ("American S...") while ISD Code sat
   in a much wider column with a four-character value in it. The two leading
   columns of the row holding the select are equalised, and the select itself is
   made to fill whatever column it lands in.

   Scoped to #contact-form so the partner form, whose row is laid out
   differently, is untouched. Note this is a presentation patch over a setting
   that really lives in Cognito: if the field widths are ever adjusted in the
   form builder, take this out rather than have the two fight. */
#contact-form .cognito-form .cog-row:has(select) > *:nth-child(1),
#contact-form .cognito-form .cog-row:has(select) > *:nth-child(2) {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
}

#contact-form .cognito-form select {
  width: 100% !important;
}