/* PMW brand stylesheet -- one file, no framework, no jQuery.
   Tokens and component values are the "PMW Professional White Theme" sheet that was
   live on pmwus.com from 2026-04-13 until the site went down, read out of the inline
   <style> preserved in the archived markup. See design-reference/DESIGN-SYSTEM.md.

   Four documented defects of the original are deliberately NOT reproduced; each is
   marked FIX below. */

/* ---------- fonts: Roboto, self-hosted ----------
   Two variable files cover 400-700 in roman and italic, so the four weights the
   design uses (400 body, 500 buttons/h4, 600 headings/nav, 700 brand/CTA) cost two
   requests rather than eight. Roboto Slab was loaded by the original but the
   reference found nothing using it, so it is not shipped. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/roboto-latin-wght.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/roboto-latin-wght-italic.woff2") format("woff2");
}

:root {
  --pmw-bg:           #ffffff;
  --pmw-bg-alt:       #f5f7fa;
  --pmw-navy:         #0d2137;
  --pmw-navy-light:   #1a3a5c;
  --pmw-accent:       #1a5fa8;
  --pmw-accent-hover: #2574c9;
  --pmw-gold:         #c8960c;
  --pmw-gold-dark:    #b08300;
  --pmw-gold-hover:   #e0ab1e;
  --pmw-text:         #1a1a2e;
  --pmw-text-muted:   #5a6577;
  --pmw-border:       #dde3eb;

  /* used in the original but never declared as variables there */
  --pmw-nav-hover:    #7eb8f0;
  --pmw-footer-text:  #c8d6e5;

  --pmw-maxw:         1140px;
  --pmw-measure:      70ch;   /* FIX: original prose ran 1080px, ~150 chars/line */
}

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

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

body {
  margin: 0;
  background: var(--pmw-bg);
  color: var(--pmw-text);
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* ---------- headings ----------
   FIX: the original held h1 at 40px and h2 at 32px all the way down to 390px, and
   set both to line-height 1.0 so descenders collided the moment a heading wrapped.
   Sizes below match at desktop and scale down on narrow viewports. */
h1, h2, h3, h4, h5, h6 { color: var(--pmw-navy); margin: 0 0 .5em; }

h1 { font-size: clamp(28px, 2.4vw + 19px, 40px); line-height: 1.15; font-weight: 600; }
h2 { font-size: clamp(24px, 1.6vw + 18px, 32px); line-height: 1.2;  font-weight: 600; }
h3 { font-size: 21px; line-height: 1.2; font-weight: 600; }
h4 { font-size: 24px; line-height: 1.2; font-weight: 500; }
h5 { font-size: 18px; line-height: 1.3; font-weight: 600; }
h6 { font-size: 16px; line-height: 1.3; font-weight: 600; }

p { margin: 0 0 14.4px; }

a { color: var(--pmw-accent); text-decoration: underline; text-underline-offset: 2px; transition: color .25s ease; }
a:hover { color: var(--pmw-accent-hover); }

img { max-width: 100%; height: auto; }

.container { max-width: var(--pmw-maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- skip link ---------- */
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--pmw-navy); color: #fff; padding: 12px 18px; }
.skip:focus { left: 0; }

/* ================= HEADER =================
   Two rows: white brand row inside the container, then a full-bleed navy nav bar.
   Sticky on every breakpoint, as the original was. */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--pmw-bg); }

.brand-row {
  display: flex; align-items: center; gap: 22px;
  max-width: var(--pmw-maxw); margin: 0 auto; padding: 14px 24px;
}
.brand { display: flex; align-items: center; gap: 18px; text-decoration: none; flex: 1 1 auto; min-width: 0; }
.brand img { width: 131px; height: auto; display: block; flex: 0 0 auto; }

/* The bold italic uppercase lock-up is the site's most recognisable typographic
   signature -- company name, tagline, section headings and footer copyright. */
.brand-name {
  display: block; color: var(--pmw-navy);
  font-size: 30px; line-height: 1.5; font-weight: 700;
  font-style: italic; text-transform: uppercase;
}
.brand-tag {
  display: block; color: var(--pmw-text-muted);
  font-size: 18px; line-height: 1.5; font-weight: 700;
  font-style: italic; text-transform: uppercase;
}

/* ---------- social chips, in each network's own brand colour ----------
   Values taken from each platform's current first-party artwork, not from memory:
     Facebook #0866FF -- Meta's 2023 refresh. The widely-copied #1877F2 is superseded.
     LinkedIn #0A66C2
     YouTube  #FF0000
   Glyphs stay white, which is what all three brand guidelines specify on colour. */
.brand-social { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.social-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: #fff; text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.social-chip svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.social-chip:hover { color: #fff; transform: translateY(-2px); }
/* A ring that clears the circle, so it is visible against the white brand row. */
.social-chip:focus-visible {
  outline: 3px solid var(--pmw-gold);
  outline-offset: 3px;
}

.social-facebook { background: #0866FF; }
.social-facebook:hover { background: #0653CC; }
.social-linkedin { background: #0A66C2; }
.social-linkedin:hover { background: #084C92; }
.social-youtube  { background: #FF0000; }
.social-youtube:hover  { background: #CC0000; }

/* ---------- nav bar ---------- */
.site-nav { background: var(--pmw-navy); }
.nav-list {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: var(--pmw-maxw); display: flex; flex-wrap: wrap; align-items: center;
}
.nav-list > li { position: relative; }
.nav-list a {
  display: block; padding: 13px 20px; color: #fff; text-decoration: none;
  font-size: 16px; line-height: 20px; font-weight: 600; text-transform: uppercase;
  transition: color .25s ease;
}
.nav-list a:hover,
.nav-list a[aria-current="page"] { color: var(--pmw-nav-hover); }

.has-children > a::after { content: " \25BE"; font-size: 11px; }

.sub-menu {
  list-style: none; margin: 0; padding: 6px 0;
  position: absolute; top: 100%; left: 0; z-index: 110; min-width: 300px;
  background: var(--pmw-bg);
  border: 1px solid var(--pmw-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  display: none;
}
.has-children:hover > .sub-menu,
.has-children:focus-within > .sub-menu { display: block; }
.sub-menu a {
  padding: 9px 18px; color: var(--pmw-text);
  font-size: 13px; line-height: 1.4; font-weight: 500; text-transform: uppercase;
}
.sub-menu a:hover { color: var(--pmw-accent); background: var(--pmw-bg-alt); }

.nav-toggle {
  display: none; align-items: center; gap: 9px;
  background: none; border: 1px solid var(--pmw-border); border-radius: 5px;
  padding: 9px 14px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--pmw-navy); cursor: pointer; flex: 0 0 auto;
}
.nav-toggle:hover { border-color: var(--pmw-accent); color: var(--pmw-accent); }

/* ================= SECTIONS ================= */
.band { padding: 44px 0; }
.band-alt { background: var(--pmw-bg-alt); }
.band-tight { padding: 26px 0; }

/* The signature section divider: a heading with a hairline running from the end of
   the text to the right edge of the container. Section headings take it bold italic
   (.sec-head); the home and article h1 take the rule without the italic (.head-rule),
   which is how the original rendered them. Case is left to the content -- the original
   never used text-transform here, it shouted in the copy itself. */
.head-rule { display: flex; align-items: center; gap: 20px; }
.head-rule::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--pmw-border); }
.sec-head { font-weight: 700; font-style: italic; margin-bottom: 6px; }

.sec-sub {
  color: var(--pmw-text-muted); font-style: italic;
  text-decoration: underline; text-underline-offset: 3px;
  margin: 0 0 24px;
}

.rule { border: 0; border-top: 1px solid var(--pmw-border); margin: 0; }

/* ================= BUTTONS ================= */
.btn {
  display: inline-block; padding: 12px 24px; border: none; border-radius: 5px;
  font-family: inherit; font-size: 15px; line-height: 1.35; font-weight: 500;
  text-align: center; text-decoration: none; cursor: pointer;
  background: var(--pmw-accent); color: #fff;
  box-shadow: 0 2px 8px rgba(26, 95, 168, .2);
  transition: all .25s ease;
}
.btn:hover {
  background: var(--pmw-accent-hover); color: #fff;
  box-shadow: 0 4px 14px rgba(26, 95, 168, .35);
  transform: translateY(-1px);
}

/* The gold CTA is the only warm colour on the site and marks exactly the two
   destinations that make money: inventory and contact. The original selected it with
   a[href*="inventory"], which is fragile -- here it is an explicit class. */
.btn-cta {
  background: linear-gradient(135deg, var(--pmw-gold), var(--pmw-gold-dark));
  font-weight: 700; box-shadow: 0 2px 8px rgba(176, 131, 0, .25);
}
.btn-cta:hover {
  background: linear-gradient(135deg, var(--pmw-gold-hover), var(--pmw-gold));
  box-shadow: 0 4px 14px rgba(176, 131, 0, .4);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row.center { justify-content: center; }

/* ================= CARDS ================= */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--pmw-bg);
  border: 1px solid var(--pmw-border);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  padding: 22px 22px 18px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, .1); }
.card h3 { margin-bottom: .4em; }
.card h3 a { color: var(--pmw-navy); text-decoration: none; }
.card h3 a:hover { color: var(--pmw-accent); }
.card p { color: var(--pmw-text-muted); font-size: 14px; line-height: 21px; }
.card > :last-child { margin-bottom: 0; }

.read-more {
  display: inline-block; font-size: 12px; line-height: 18px; font-weight: 500;
  text-transform: uppercase; color: var(--pmw-accent); text-decoration: none;
}
.read-more:hover { text-decoration: underline; }

.card-meta {
  margin: 14px -22px -18px; padding: 10px 22px 0;
  border-top: 1px solid var(--pmw-border);
  color: var(--pmw-text-muted); font-size: 14px; line-height: 21px;
}

/* Card media. Images sit flush to the card edges, so they cancel the card padding
   and take the card's radius on their top two corners only. */
.card { overflow: hidden; }
.card-media {
  display: block; margin: -22px -22px 16px; background: var(--pmw-bg-alt);
  border-bottom: 1px solid var(--pmw-border);
}
.card-media img { display: block; width: 100%; height: auto; }

/* ---------- hero ----------
   450px band at the container width, as the original Elementor Slides widget.
   The five recovered slides cross-fade; only the first is eager, because it is the
   largest contentful paint and the other four must not compete with it. */
.hero {
  position: relative; height: 450px; overflow: hidden;
  border-radius: 8px; background: var(--pmw-navy);
}
.hero img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transition: opacity 1s ease;
}
/* With JS off the first slide just stays up -- the band is never blank. */
.hero img:first-child { opacity: 1; }
/* Once the rotator starts it owns visibility. Equal specificity to the rule above,
   so this has to stay below it. */
.hero.rotating img { opacity: 0; }
.hero.rotating img.on { opacity: 1; }

.feature-media { border: 1px solid var(--pmw-border); border-radius: 8px; overflow: hidden; background: var(--pmw-bg-alt); }
.feature-media img { display: block; width: 100%; height: auto; }

/* ---------- yard flyover video ---------- */
.flyover {
  position: relative; margin: 0;
  border: 1px solid var(--pmw-border); border-radius: 8px;
  overflow: hidden; background: var(--pmw-navy);
}
.flyover-video { display: block; width: 100%; height: auto; }

/* The toggle sits centred over the poster while paused, then shrinks into the corner
   so it stays reachable during playback without covering the footage. WCAG 2.2.2 wants
   a pause mechanism, so it must never disappear entirely. */
.flyover-toggle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%; cursor: pointer;
  border: 3px solid #fff; background: rgba(13, 33, 55, .72);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .25s ease, width .25s ease, height .25s ease,
              top .25s ease, left .25s ease, transform .25s ease;
}
.flyover-toggle:hover { background: var(--pmw-accent); }
.flyover-toggle:focus-visible { outline: 3px solid var(--pmw-gold); outline-offset: 3px; }

.flyover.is-playing .flyover-toggle {
  top: auto; bottom: 12px; left: 12px; transform: none;
  width: 42px; height: 42px; border-width: 2px;
}

/* Paused shows a play triangle; playing shows two pause bars. */
.flyover-glyph {
  width: 0; height: 0; margin-left: 6px;
  border-top: 14px solid transparent; border-bottom: 14px solid transparent;
  border-left: 23px solid #fff;
}
.flyover-toggle[data-state="playing"] .flyover-glyph {
  width: 15px; height: 17px; margin-left: 0; border: 0;
  border-left: 5px solid #fff; border-right: 5px solid #fff;
}

.flyover-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 26px 14px 9px; margin: 0;
  background: linear-gradient(to top, rgba(13, 33, 55, .78), rgba(13, 33, 55, 0));
  color: #fff; font-size: 13px; text-align: right;
}

/* ================= PROSE ================= */
.prose { max-width: var(--pmw-measure); }
.prose h2 { margin-top: 1.6em; }
.prose h4 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 14.4px; }
.prose li { margin-bottom: .35em; }

/* ================= FORMS ================= */
label { display: block; font-weight: 500; margin-bottom: 5px; }
label .req { color: #c0392b; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea {
  width: 100%; min-height: 40px; padding: 8px 16px;
  font-family: inherit; font-size: 15px; color: var(--pmw-text);
  background: var(--pmw-bg); border: 1px solid var(--pmw-border); border-radius: 5px;
}
textarea { min-height: 120px; padding-top: 10px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--pmw-accent);
  box-shadow: 0 0 0 3px rgba(26, 95, 168, .15);
}
.field { margin-bottom: 16px; }

/* ================= TABLES (inventory listings) ================= */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { font-size: 16px; font-weight: 700; text-align: center; padding: 8px 10px; border-bottom: 1px solid var(--pmw-border); }
.data-table td { font-size: 16px; font-weight: 400; text-align: left;   padding: 8px 10px; border-bottom: 1px solid var(--pmw-border); }
.table-scroll { overflow-x: auto; }

/* ================= FOOTER =================
   Certification band stays white -- the three marks are opaque artwork that reads
   wrong on navy, which is why the original forced this band white too. */
.cert-band { background: var(--pmw-bg); padding: 30px 0; border-top: 1px solid var(--pmw-border); }
/* The band originally looked right-justified because the three source files carried
   different amounts of white padding: their boxes were centred while the artwork was
   not. The files are now TRIMMED to the artwork bounding box and normalised to one
   height, which is the actual fix.

   Layout is a centred row with one fixed gap, NOT three equal columns. Equal columns
   were tried and measured perfectly even -- 348px each, every logo centred at offset 0 --
   and still looked wrong, because the trimmed artwork widths are 228 / 220 / 81px, so
   the narrow Soleir mark left 222px of air on one side against 148px on the other.
   Equal gaps between the artwork, with the row centred, is even to the eye as well as
   to the ruler. */
.cert-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 64px; }
.cert-mark { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.cert-mark img { display: block; height: 80px; width: auto; transition: opacity .2s ease; }
.cert-mark:hover img { opacity: .78; }
.cert-mark:focus-visible { outline: 3px solid var(--pmw-gold); outline-offset: 5px; }

.site-footer { background: var(--pmw-navy); color: var(--pmw-footer-text); }
.site-footer a { color: var(--pmw-footer-text); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h2 { color: #fff; font-size: 13px; line-height: 1.3; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px; }
.site-footer p, .site-footer li { color: var(--pmw-footer-text); font-size: 15px; line-height: 23px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 7px; }

.footer-cols { display: grid; gap: 30px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 40px 0 34px; }

.footer-legal { border-top: 1px solid rgba(255, 255, 255, .14); padding: 18px 0 22px; }
/* Roboto italic 700, as the original -- which declared Montserrat, a family it never
   loaded, so it silently fell back to Roboto anyway. Needs the .site-footer prefix to
   outrank the `.site-footer p` rule above, which otherwise held it at 15px/23px. */
.site-footer .copyright { font-size: 16px; line-height: 24px; font-weight: 700; font-style: italic; margin: 0; }
.footer-meta { font-size: 14px; margin: 6px 0 0; }

/* ---------- home-page logo intro ----------
   A tiny inline script on the home page adds .logo-intro to <html>, so with scripts
   blocked, or if anything throws before the class is removed, the header logo is simply
   visible in place. visibility rather than display, so the header never reflows and the
   animation cannot cause layout shift.

   The overlay is transparent and pointer-events:none: the page renders and stays fully
   usable underneath the whole time. There is no splash screen. */
.logo-intro .brand picture { visibility: hidden; }

.logo-intro-layer {
  position: fixed; inset: 0; z-index: 300;
  pointer-events: none;
  background: none;
  contain: layout style;
}
.logo-intro-layer img {
  position: fixed; left: 0; top: 0;
  display: block;
  transform-origin: center center;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  /* Belt and braces: the script also bails out, but if it somehow did not, the real
     logo must still be visible. */
  .logo-intro .brand picture { visibility: visible; }
  .logo-intro-layer { display: none; }
}

/* ================= INNER PAGES =================
   Shared furniture for everything below the home page: articles, archives, inventory,
   unit pages, company pages. Same tokens, same card and button language. */

/* Breadcrumb. PAGE-TEMPLATES sect.4: the rebuild gains a breadcrumb, a visible date
   and related links -- all three help ranking and none change the look. */
.crumbs { margin: 0 0 12px; font-size: 14px; line-height: 21px; color: var(--pmw-text-muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "\203A"; color: var(--pmw-text-muted); }
.crumbs a { color: var(--pmw-text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--pmw-accent); text-decoration: underline; }
.crumbs [aria-current] { color: var(--pmw-text); }

.page-title { margin-bottom: 14px; }
.page-title + .rule { margin-bottom: 22px; }
.post-meta { margin: 0 0 22px; color: var(--pmw-text-muted); font-size: 14px; line-height: 21px; }
.post-meta a { color: var(--pmw-text-muted); }
.post-meta a:hover { color: var(--pmw-accent); }

/* Article subheads were <h4> at 24px/500 on the original. They are <h2> now so the
   page has a real outline, and keep the original look. */
.article-body h2 { font-size: 24px; line-height: 1.2; font-weight: 500; margin: 1.5em 0 .5em; }
.article-body h3 { font-size: 20px; line-height: 1.25; font-weight: 500; margin: 1.4em 0 .45em; }
.article-body h4 { font-size: 18px; line-height: 1.3; font-weight: 600; margin: 1.3em 0 .4em; }
.article-body > :first-child { margin-top: 0; }

.legal h2 { font-size: 24px; line-height: 1.2; font-weight: 500; margin: 1.6em 0 .5em; }
.legal h3 { font-size: 19px; line-height: 1.3; font-weight: 600; margin: 1.4em 0 .45em; }
.legal li { margin-bottom: .5em; }

/* Call panel: the one place a page asks for the phone call. Gold edge, because the
   gold is reserved for the two destinations that make money. */
.call-panel {
  margin: 28px 0; padding: 22px 24px;
  background: var(--pmw-bg-alt); border: 1px solid var(--pmw-border);
  border-left: 4px solid var(--pmw-gold); border-radius: 8px;
}
.call-panel h2 { font-size: 21px; line-height: 1.25; font-weight: 600; margin: 0 0 8px; }
.call-panel p { margin: 0 0 10px; }
.call-panel .phone {
  display: inline-block; font-size: 26px; line-height: 1.2; font-weight: 700;
  color: var(--pmw-navy); text-decoration: none; white-space: nowrap;
}
.call-panel .phone:hover { color: var(--pmw-accent); }
.call-panel .btn-row { margin-top: 14px; }
.call-panel > :last-child { margin-bottom: 0; }

/* Inventory listing region. Holds the call panel today; the live inventory feed
   renders its table into this same region later. */
.listing { margin: 30px 0 10px; }

.archive-cats { margin: 0 0 24px; color: var(--pmw-text-muted); }
.archive-cats a { margin-left: 10px; }

/* Inventory tiles share one 4:3 frame even where a source photo is wider. */
.tile-4x3 img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Related articles */
.related { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--pmw-border); }
.related h2 { font-size: 21px; line-height: 1.25; margin-bottom: 14px; }

/* Archive cards take <h2> titles (they sit straight under the page <h1>), sized as
   the original's 21px card titles. */
.card h2 { font-size: 21px; line-height: 1.2; font-weight: 600; margin-bottom: .4em; }
.card h2 a { color: var(--pmw-navy); text-decoration: none; }
.card h2 a:hover { color: var(--pmw-accent); }
.card-tag {
  display: inline-block; margin-bottom: 8px; font-size: 12px; line-height: 18px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em; color: var(--pmw-text-muted);
}

/* Pagination: plain numbers, as the original, but with a visible current page. */
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 34px 0 0; }
.pager a, .pager span {
  display: inline-block; min-width: 40px; padding: 7px 12px; text-align: center;
  font-size: 15px; line-height: 20px; text-decoration: none;
  border: 1px solid var(--pmw-border); border-radius: 5px; background: var(--pmw-bg);
}
.pager a:hover { border-color: var(--pmw-accent); }
.pager [aria-current="page"] { background: var(--pmw-navy); border-color: var(--pmw-navy); color: #fff; }
.pager .gap { border-color: transparent; background: none; min-width: 0; padding: 7px 4px; }

/* Photograph beside text: /about and /services, a third and two thirds, as the
   original Elementor columns. */
.media-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 30px; align-items: start; margin: 0 0 36px; }
.media-row:last-child { margin-bottom: 0; }
.media-row h2 { margin-top: 0; }
.photo { margin: 0; border: 1px solid var(--pmw-border); border-radius: 8px; overflow: hidden; background: var(--pmw-bg-alt); }
.photo img { display: block; width: 100%; height: auto; }
.photo figcaption { padding: 8px 12px; font-size: 13px; line-height: 19px; color: var(--pmw-text-muted); }

.signoff { margin-top: 22px; font-style: italic; }
.signoff strong { display: block; font-style: italic; color: var(--pmw-navy); }

/* Unit gallery: 4:3 thumbnails, each opening the full photograph. No script. */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 26px 0; }
.gallery a { display: block; border: 1px solid var(--pmw-border); border-radius: 8px; overflow: hidden; background: var(--pmw-bg-alt); }
.gallery img { display: block; width: 100%; height: auto; transition: transform .25s ease; }
.gallery a:hover img { transform: scale(1.03); }
.gallery a:focus-visible { outline: 3px solid var(--pmw-gold); outline-offset: 3px; }

.spec-list { margin: 0 0 20px; padding-left: 22px; }
.spec-list li { margin-bottom: .35em; }

/* Industries: one card per sector. */
.sector-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sector-grid .card h2 { font-size: 21px; }
.aside-box { padding: 20px 22px; background: var(--pmw-bg-alt); border: 1px solid var(--pmw-border); border-radius: 8px; }
.aside-box h2 { font-size: 16px; line-height: 1.3; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; }
.aside-box ul { list-style: none; margin: 0; padding: 0; }
.aside-box li { margin: 0 0 8px; }
.two-col { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.industries-close { margin: 24px 0 0; max-width: var(--pmw-measure); }

/* Inventory index tiles */
.tile-label { font-size: 16px; line-height: 1.3; font-weight: 700; text-transform: uppercase; margin: 0 0 6px; }
.tile-label a { color: var(--pmw-navy); text-decoration: none; }
.tile-label a:hover { color: var(--pmw-accent); }
.sub-head { font-size: 20px; line-height: 1.3; font-weight: 700; font-style: italic; text-transform: uppercase; margin: 34px 0 16px; }
.sub-head:first-of-type { margin-top: 10px; }

.inline-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: start; }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { margin: 0 0 16px; }
.contact-list address { font-style: normal; margin-bottom: 4px; }
.contact-list .label { display: block; font-size: 13px; line-height: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--pmw-text-muted); }
.contact-list .big { font-size: 24px; line-height: 1.3; font-weight: 700; color: var(--pmw-navy); text-decoration: none; }
.contact-list .big:hover { color: var(--pmw-accent); }

/* Retired (410) and not-found (404) pages */
.status-note { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pmw-text-muted); margin-bottom: 8px; }

/* HTML sitemap */
.sitemap-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 40px; }
.sitemap-groups h2 { font-size: 20px; margin: 18px 0 8px; }
.sitemap-groups ul { margin: 0 0 10px; padding-left: 20px; }
.sitemap-groups li { margin-bottom: 4px; }
.sitemap-wide { grid-column: 1 / -1; }
.sitemap-wide ul { columns: 2; column-gap: 40px; }
.sitemap-wide li { break-inside: avoid; }

/* ================= UTILITY ================= */
.lead { font-size: 18px; line-height: 27px; color: var(--pmw-text-muted); }
.muted { color: var(--pmw-text-muted); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mb0 { margin-bottom: 0; }
.mt-lg { margin-top: 28px; }

/* ================= BREAKPOINTS =================
   1024 and 767, as the original. */
@media (max-width: 1024px) {
  .brand-name { font-size: 24px; }
  .brand-tag  { font-size: 15px; }
  .brand img { width: 108px; }
  .nav-list a { padding: 13px 14px; font-size: 15px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { height: 340px; }
}

@media (max-width: 767px) {
  .brand-row { flex-wrap: wrap; gap: 14px; padding: 12px 20px; }
  .brand { gap: 13px; }
  .brand img { width: 84px; }
  .brand-name { font-size: 19px; line-height: 1.25; }
  .brand-tag  { font-size: 12px; line-height: 1.35; }
  .brand-social { order: 3; }

  .nav-toggle { display: inline-flex; }
  .nav-list { display: none; flex-direction: column; padding: 4px 0 10px; }
  .site-nav.open .nav-list { display: flex; }
  .nav-list > li { width: 100%; }
  .nav-list a { padding: 12px 20px; }
  .sub-menu {
    display: block; position: static; min-width: 0; border: none; box-shadow: none;
    background: transparent; padding: 0 0 6px;
  }
  .sub-menu a { color: var(--pmw-footer-text); padding: 9px 20px 9px 38px; }
  .sub-menu a:hover { background: transparent; color: #fff; }
  .has-children > a::after { content: ""; }

  .band { padding: 32px 0; }
  .grid-2, .grid-3, .grid-4, .footer-cols { grid-template-columns: minmax(0, 1fr); }
  .media-row, .sector-grid, .contact-grid, .two-col, .sitemap-groups { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sitemap-wide ul { columns: 1; }
  .call-panel .phone { font-size: 22px; }
  .sec-head { gap: 14px; }
  .hero { height: 240px; }
  .cert-row { gap: 30px; }
  .cert-row img { max-height: 72px; }
}

/* ---------- inventory grid (Pages/Shared/_InventoryGrid.cshtml) ----------
   Rebuilds the wpDataTables "light" skin as the old site configured it: header
   #071041 with white text, table text #071041, every cell centred (wdtCustomCss),
   10px cell padding, filter box above the table. docs/INVENTORY-GRID-PARITY.md. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dt-grid { color: #071041; }
.dt-asof { font-size: 14px; color: var(--pmw-text-muted); margin: 0 0 12px; }
.dt-asof.dt-stale { color: #7a4a00; }
.dt-filterbox { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; margin-bottom: 14px; }
.dt-fsec { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.dt-flabel { font-weight: 600; font-size: 14px; }
.dt-range { display: flex; gap: 6px; }
.dt-range input { width: 96px; }
.dt-grid input[type=text], .dt-grid input[type=number], .dt-grid input[type=search], .dt-grid select {
  font: inherit; font-size: 14px; color: #071041; padding: 6px 8px; border: 1px solid var(--pmw-border); border-radius: 3px; background: #fff;
}
.dt-ms { position: relative; }
.dt-ms summary { list-style: none; cursor: pointer; font-size: 14px; padding: 6px 28px 6px 8px; border: 1px solid var(--pmw-border); border-radius: 3px; background: #fff; min-width: 180px; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.dt-ms summary::-webkit-details-marker { display: none; }
.dt-ms summary::after { content: "\25BE"; position: absolute; right: 9px; top: 6px; }
.dt-ms-list { position: absolute; z-index: 20; top: 100%; left: 0; min-width: 100%; background: #fff; border: 1px solid var(--pmw-border); box-shadow: 0 4px 12px rgba(0,0,0,.12); padding: 6px 0; }
.dt-ms-list label { display: block; padding: 4px 12px; font-size: 14px; white-space: nowrap; cursor: pointer; }
.dt-ms-list label:hover { background: var(--pmw-bg-alt); }
.dt-clearbtn { display: inline-block; font-size: 14px; font-weight: 500; color: #fff; background: #071041; padding: 7px 14px; border-radius: 3px; text-decoration: none; }
.dt-clearbtn:hover { background: var(--pmw-accent); color: #fff; }
.dt-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 6px 0 10px; font-size: 14px; }
.dt-top label { display: inline-flex; align-items: center; gap: 6px; }
.dt-apply { margin: 0 0 10px; }
.js .dt-apply { display: none; }
.dt-table { width: 100%; border-collapse: collapse; }
.dt-table th, .dt-table td { padding: 10px; text-align: center; border-bottom: 1px solid var(--pmw-border); font-size: 15px; color: #071041; }
.dt-table thead th { background: #071041; color: #fff; font-weight: 600; white-space: nowrap; position: relative; }
.dt-table thead th a { color: #fff; text-decoration: none; display: block; padding-right: 14px; }
.dt-table thead th.dt-sort a::after { content: "\21C5"; position: absolute; right: 8px; opacity: .45; font-size: 12px; }
.dt-table thead th.dt-asc a::after { content: "\25B2"; opacity: 1; }
.dt-table thead th.dt-desc a::after { content: "\25BC"; opacity: 1; }
.dt-table tbody tr:hover > td { background: var(--pmw-bg-alt); }
.dt-table tr > :first-child { position: sticky; left: 0; background: #fff; }
.dt-table thead tr > :first-child { background: #071041; }
.dt-empty { color: var(--pmw-text-muted); }
.dt-expand { display: none; width: 20px; height: 20px; margin-right: 8px; padding: 0; line-height: 18px; font-size: 16px; font-weight: 700; color: #fff; background: #1a5fa8; border: 0; border-radius: 50%; cursor: pointer; vertical-align: middle; }
.dt-child dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; text-align: left; }
.dt-child dt { font-weight: 600; }
.dt-child dd { margin: 0; }
.dt-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; }
.dt-pager { display: flex; flex-wrap: wrap; gap: 4px; }
.dt-pager a, .dt-pager span { display: inline-block; min-width: 34px; padding: 6px 10px; text-align: center; border: 1px solid var(--pmw-border); border-radius: 3px; text-decoration: none; color: #071041; }
.dt-pager a:hover { background: var(--pmw-bg-alt); }
.dt-pager .current { background: #071041; border-color: #071041; color: #fff; }
.dt-pager .disabled { color: #9aa3b0; }
.dt-pager .dt-ellipsis { border-color: transparent; }
.dt-grid[aria-busy=true] .dt-results { opacity: .55; }
@media (max-width: 767px) {
  .js .dt-table .dt-col-extra { display: none; }
  .js .dt-expand { display: inline-block; }
  .dt-table tr > :first-child { text-align: left; }
}
@media (max-width: 480px) {
  .dt-pager .dt-first, .dt-pager .dt-last, .dt-pager .dt-num { display: none; }
}