/* Homepage page tokens (moved from index.html inline) */
:root {
    --font-sans: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --brand: #1E4ED8;
    --brand-hover: #1B46C4;
    --brand-light: #BFDBFE;
    --ink: #0F172A;
    --body: #1F2937;
    --muted: #475569;
    --line: #CBD5E1;
    --surface: #FFFFFF;
    --surface-soft: #F1F5F9;
    --canvas: var(--pwi-canvas-bottom);
}
html,
body {
margin: 0;
padding: 0;
}

html {
background: var(--pwi-canvas-top);
font-size: 17px;
}

body {
font-family: var(--font-sans);
overflow-x: hidden;
background: var(--canvas);
color: var(--body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.bg-canvas {
background: var(--canvas) !important;
}

.bg-surface {
background: var(--surface) !important;
}
.bg-surface-soft {
    background: var(--surface-soft) !important;
}
.text-ink {
    color: var(--ink) !important;
}
.text-body {
    color: var(--body) !important;
}
.text-muted {
    color: var(--muted) !important;
}
.border-line {
    border-color: var(--line) !important;
}
.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.btn-primary:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
}
.btn-secondary {
    background: var(--surface);
    border-color: var(--line);
    color: var(--body);
}
.btn-secondary:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.soft-elev {
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}
.section-pop {
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
}
.card-pop {
    background: linear-gradient(180deg, #ffffff 0%, #F8FAFC 100%);
    border-color: color-mix(in oklab, var(--brand) 20%, var(--line));
}

/* ================================================
   Homepage layout (moved from index.html inline)
   ================================================ */

:root {
  --home-hero-height: clamp(400px, 38vh, 480px);
  --home-card-strip-height: clamp(300px, 24vw, 380px);
  /* Neutral navy scrim — matches --pwi-canvas-bottom, no blue mid-stop */
  --pwi-overlay-gradient: linear-gradient(105deg, rgba(11, 26, 56, 0.88) 0%, rgba(11, 26, 56, 0.68) 55%, rgba(11, 26, 56, 0.50) 100%);
  --pwi-overlay-flat: rgba(11, 26, 56, 0.72);
  /* Hero: diagonal scrim — strong upper-left and lower-right content anchors */
  --pwi-hero-overlay-gradient:
    linear-gradient(137deg, rgba(4, 13, 34, 0.95) 0%, rgba(5, 16, 40, 0.76) 31%, rgba(5, 16, 40, 0.10) 60%),
    linear-gradient(318deg, rgba(4, 13, 34, 0.92) 0%, rgba(5, 16, 40, 0.66) 25%, rgba(5, 16, 40, 0) 56%),
    linear-gradient(rgba(4, 13, 34, 0.12), rgba(4, 13, 34, 0.12));
  --pwi-hero-overlay-flat: rgba(11, 26, 56, 0.88);
  /* Fold overlay: near-horizontal angle (92deg) so the tint reads the same at
     every row height — no darker/lighter band appears behind the cards. */
  --pwi-fold-overlay-gradient: linear-gradient(92deg, rgba(4, 13, 34, 0.88) 0%, rgba(4, 13, 34, 0.62) 40%, rgba(4, 13, 34, 0.6) 64%, rgba(4, 13, 34, 0.78) 100%);
  /* Shared shell: the hero content and the capability card row center
     inside the same max-width box with the same responsive side gutter,
     so the headline and the first/last cards share left/right boundaries
     at every breakpoint. ~20px on phones, growing with the viewport to
     64px on large desktop. */
  --home-hero-pad-x: clamp(1.25rem, 5vw, 4rem);
  --home-shell-max: 1560px;
}
@media (min-width: 1024px) {
  :root {
    /* Tracks viewport height so the card row and the (now taller,
       single-column) hero both fit above the fold on short laptop
       screens — the cards must be fully visible on entry. */
    --home-card-strip-height: clamp(206px, 26vh, 300px);
  }
}
@media (min-width: 1600px) {
  :root {
    --home-card-strip-height: clamp(260px, 24vh, 320px);
  }
}

/* ---- Above-the-fold group: hero + capability cards ----
   The wrapper's min-height guarantees the dark hero/card group fills at
   least the viewport beneath the sticky header. hero-home is the flex
   child that grows to absorb any remaining space, so the card row never
   needs a guessed height reservation and the next (light) section can
   never peek through on load. On narrow/short viewports the group's
   natural content height already exceeds the min-height, so this is a
   no-op there and nothing gets squeezed to fit.

   The background slideshow, static mobile photo, and dark overlay are
   direct children of .hp-fold (not .hero-home) so a single image + a
   single overlay layer stretch continuously behind the hero AND the
   capability cards, with no seam where the cards begin. .hero-home and
   .cap-strip carry no background of their own — they're positioned,
   z-indexed content layers that sit above the shared image/overlay. */
.hp-fold {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .hp-fold {
    min-height: calc(100svh - var(--header-h, 5rem));
  }
  .hp-fold > .hero-home {
    flex: 1 1 auto;
    min-height: var(--home-hero-height);
  }
  .hp-fold > .cap-strip {
    flex: 0 0 auto;
  }
}

.hero-home {
  position: relative;
  z-index: 2;
  color: #e2e8f0;
  padding: 0 !important;
  display: flex;
  align-items: stretch;
  min-height: var(--home-hero-height);
}
.hp-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--pwi-fold-overlay-gradient);
  pointer-events: none;
}
.hp-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: var(--home-shell-max);
  min-height: var(--home-hero-height);
  margin-inline: auto;
  align-items: center;
}
.hp-hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem var(--home-hero-pad-x) 2.5rem;
  text-align: left;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}
.hp-hero-left .hero-lede { text-align: left !important; }
/* Search sits inside the single content column, directly under the CTAs —
   one alignment edge for the whole hero, no second column to center
   against. */
.hp-hero-actions {
  position: relative;
  width: 100%;
  max-width: 32rem;
  margin: 1.35rem 0 0;
  box-sizing: border-box;
}
.hp-hero-search-label {
  display: block;
  margin: 0 0 0.45rem;
  color: #93c5fd;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-align: left;
  text-transform: uppercase;
}
.hp-hero-actions .hero-search-form {
  width: 100%;
  max-width: none;
  margin: 0;
}
/* The finder pill lives with the search field, not between the lede and the
   search box — both are "find your product" affordances, so they read as one
   action cluster instead of a lone button floating in the gap. */
.hp-hero-actions .hero-ctas {
  margin-top: 0.7rem;
}
@media (min-width: 1024px) {
  .hp-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding: clamp(1.75rem, 3vw, 3rem) var(--home-hero-pad-x);
    box-sizing: border-box;
  }
  .hp-hero-left {
    padding: 0;
    text-align: left;
    align-items: flex-start;
    max-width: 42rem;
    align-self: center;
  }
  .hp-hero-actions {
    max-width: 31rem;
    margin-top: 2rem;
  }
  /* Scoped so it beats the later unscoped .hero-lede rule in the "refined
     homepage layer" below. Three lines instead of four — that saved height
     is what buys the gap between the search bar and the card row. */
  .hp-hero-left .hero-lede {
    max-width: 36rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hp-hero-left {
    padding: 3rem var(--home-hero-pad-x) 2rem;
  }
  .hp-hero-actions {
    margin-top: 1.5rem;
  }
}
.hp-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0a1930;
  cursor: pointer;
}
.hp-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s ease;
  text-decoration: none;
  color: inherit;
}
.hp-slide.hp-active {
  opacity: 1;
  pointer-events: auto;
}
.hp-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.02);
}
/* Per-slide, per-breakpoint object-position.
   The shared background now spans the hero AND the card row below it
   (see .hp-fold), and the card row's height relative to the hero shrinks
   as the viewport widens (2-col -> 4-col cards, taller nav pad, etc.),
   so the fraction of each image that stays visible above the cards is
   different at every width. Each image's focal subject sits at a
   different point in the source photo (checked individually, not a
   single global crop), so each one needed its own value solved for the
   1366 / 1536 / 1920 tiers rather than one shared rule. X is left at
   50%/center throughout: at every tested width these images are wider
   (in aspect ratio) than the container needs, so object-fit:cover scales
   to fill the full width with zero horizontal crop — only the vertical
   position has any visible effect. */
.hp-slide--cabin img { object-position: 50% 15%; }
.hp-slide--exterior img { object-position: 50% 90%; }
.hp-slide--entry-door img { object-position: 50% 65%; }
.hp-slide--reading img { object-position: 50% 0%; }
.hp-slide--fluorescent img { object-position: center 100%; }
.hp-slide--signs img { object-position: center 100%; }
@media (min-width: 1536px) {
  .hp-slide--cabin img { object-position: 50% 5%; }
  .hp-slide--exterior img { object-position: 50% 80%; }
  .hp-slide--entry-door img { object-position: 50% 55%; }
  .hp-slide--reading img { object-position: 50% 0%; }
  .hp-slide--fluorescent img { object-position: center 100%; }
  .hp-slide--signs img { object-position: center 100%; }
}
@media (min-width: 1920px) {
  .hp-slide--cabin img { object-position: 50% 0%; }
  .hp-slide--exterior img { object-position: 50% 65%; }
  .hp-slide--entry-door img { object-position: 50% 45%; }
  .hp-slide--reading img { object-position: 50% 0%; }
  .hp-slide--fluorescent img { object-position: center 80%; }
  .hp-slide--signs img { object-position: center 90%; }
}
.hp-slide.hp-active img {
  animation: hp-pan 8s ease-in-out forwards;
}
.hp-fold.hp-slideshow-paused .hp-slide.hp-active img {
  animation: none !important;
  transform: scale(1.02);
}
@keyframes hp-pan {
  /* Scale must always outrun the translate offset on every edge, or the
     image's edge lifts off the container and exposes the slider's
     background color. At 1.02 scale the translate(1%) exactly cancels
     the 1% overflow margin, leaving zero buffer at the start of every
     cycle (worst-case, since ease-in-out lingers near 0%). Starting at
     1.03/ending at 1.07 keeps a comfortable positive buffer on every
     edge for the whole 0%-100% range, so the photo fully covers the
     hero (and the cap-strip below it) throughout the pan, not just at
     rest. */
  0% { transform: scale(1.03) translate(1%, 0.5%); }
  100% { transform: scale(1.07) translate(-1%, -0.5%); }
}
.hp-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(4,10,28,0.75) 0%, rgba(4,10,28,0.2) 40%, transparent 65%),
    linear-gradient(to left, rgba(4,10,28,0.5) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 2.25rem 2.75rem;
  pointer-events: none;
}
.hp-text {
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(.22,1,.36,1) 0.3s, opacity 0.7s ease 0.3s;
  text-align: right;
}
.hp-slide.hp-active .hp-text { transform: translateY(0); opacity: 1; }
.hp-tag {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #93c5fd;
  margin-bottom: 0.5rem;
  display: block;
}
.hp-title {
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-transform: uppercase;
  display: block;
  max-width: 18ch;
}
@media (max-width: 1023px) {
  .hp-text { display: none; }
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(147, 197, 253, 0.14);
  border: 1px solid rgba(147, 197, 253, 0.32);
  border-radius: 9999px;
  padding: 4px 14px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #93c5fd;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.hero-kicker::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: 50%;
  flex-shrink: 0;
}
.hero-heading {
  font-size: clamp(2.45rem, 4.2vw, 3.75rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.4);
  margin: 0 0 0.75rem;
}
.hero-heading span {
  display: block;
  color: #93c5fd;
}
@media (min-width: 640px) {
  .hero-heading span {
    white-space: nowrap;
  }
}
.hero-search-form {
  margin-top: 1.15rem;
  margin-bottom: 1.75rem;
  max-width: min(32rem, 100%);
  position: relative;
}
.hero-search-input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.64rem 6.35rem 0.64rem 2.65rem;
  border-radius: 9999px;
  /* Dark, mostly-opaque navy instead of a translucent brand-blue tint —
     the old low-opacity fill let bright slideshow frames wash the field
     out. This stays legible over every slide, light or dark. */
  border: 1.5px solid rgba(147,197,253,0.55) !important;
  background: rgba(6,13,30,0.72) !important;
  color: #f8fafc !important;
  font-size: 0.88rem;
  outline: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 20px -8px rgba(0,0,0,0.6) !important;
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-search-input::placeholder {
  color: rgba(226,232,240,0.85);
}
.hero-search-icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #bfdbfe;
}
.hero-search-submit {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(100% - 0.4rem);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* Solid, not translucent, so the arrow never disappears against a
     light part of the slideshow. */
  background: #1e4ed8;
  color: #fff;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}
.hero-search-submit:hover {
  background: #1b46c4;
  transform: translateY(-50%) translateX(1px);
}
/* Native clear-x varies by browser (Chrome/Edge draw one, Firefox mostly
   doesn't) — suppress it everywhere so the custom .hero-search-clear button
   below is the only clear affordance, consistent across browsers. */
.hero-search-input::-webkit-search-cancel-button,
.hero-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.hero-search-clear {
  position: absolute;
  right: 3.05rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(226,232,240,0.55);
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}
.hero-search-clear[hidden] { display: none; }
.hero-search-clear:hover,
.hero-search-clear:focus-visible {
  color: #f8fafc;
  background: rgba(147,197,253,0.16);
  outline: none;
}
.hero-ctas {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.hero-search-form {
  width: 100%;
  max-width: min(32rem, 100%);
  margin-top: 1rem;
}
@media (min-width: 768px) { .hero-raq-mobile { display: none !important; } }
@media (max-width: 767px) { .hero-desktop-cta { display: none !important; } }
.hero-search-input:hover {
  border-color: rgba(147,197,253,0.72) !important;
  background: rgba(6,13,30,0.8) !important;
}
.hero-search-input:focus,
.hero-search-input:focus-visible {
  border-color: rgba(147,197,253,0.8) !important;
  background: rgba(6,13,30,0.82) !important;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 3px rgba(99,152,255,0.28) !important;
}
.hero-search-input:not(:placeholder-shown) {
  color: #f8fafc;
}
.hero-lede {
  margin-top: 1.15rem;
  margin-bottom: 1.5rem;
  font-size: 0.97rem;
  line-height: 1.62;
  color: rgba(226,232,240,0.9);
  text-align: left;
  max-width: 30rem;
  width: 100%;
}
/* ---- Tablet: remove full-height lock ---- */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero-home { min-height: auto; }
}
/* ---- Mobile breathing room ---- */
@media (max-width: 639px) {
  .hero-heading {
    font-size: clamp(2.15rem, 11vw, 3rem) !important;
    line-height: 1.05 !important;
  }
  .hero-search-form {
    max-width: 100% !important;
  }
  .hero-lede {
    display: block;
    overflow: visible;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
  }
}
@media (max-width: 374px) {
  .hero-heading {
    font-size: 1.95rem !important;
  }
  .hero-lede {
    font-size: 0.875rem !important;
  }
}

@media (max-width: 767px) {
.pwi-footer-newsletter-col { display: none !important; }

.hero-heading { margin-bottom: 0.5rem !important; }
.hero-lede { margin-top: 0.5rem !important; margin-bottom: 1.25rem !important; text-align: left !important; }
}
@media (max-width: 767px) {
.pwi-nl-section { padding: 1.5rem 0 !important; }
.pwi-nl-inner { gap: 1rem !important; }
}

/* ---- Hero: laptop ---- */
@media (min-width: 1024px) and (max-width: 1599px) {
.hero-home {
  min-height: var(--home-hero-height) !important;
  max-height: none;
}
.hp-hero-grid {
  min-height: var(--home-hero-height);
  max-height: none;
}
.hp-hero-left {
  padding: 0;
  gap: 0.15rem;
}
.hero-kicker {
  margin-bottom: 0.6rem;
}
.hero-heading {
  /* Smaller than the large-desktop clamp so the headline stays proportional
     at laptop widths instead of jumping to the big-desktop size right at
     1440px — but ~10% larger than the first pass, which read too small
     next to the description/search column at 1366-1536px. Bumped again
     (~8-9%) since the headline was reading thin relative to desktop's
     proportionally larger heading. */
  font-size: clamp(2.4rem, 3.4vw, 3.05rem);
  line-height: 1.04;
  margin-bottom: 0.55rem;
}
.hero-lede {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.62;
  max-width: 36rem;
  margin-bottom: 0;
}
.hero-ctas {
  margin-top: 1.35rem;
}
.hero-search-form {
  margin-top: 0.85rem;
}
}
/* Bridge zone: the laptop clamp above is already flat at its 3.05rem
   ceiling well before 1599px, while the desktop clamp below starts at
   4vw (64px) right at 1600px — a ~12px jump at the seam. Ramp linearly
   from the laptop clamp's exact value at 1440px to the desktop clamp's
   exact value at 1600px so the two rules meet with no discontinuity,
   without touching the (already correct) sizes at 1024/1280/1440/1920. */
@media (min-width: 1440px) and (max-width: 1599px) {
.hero-heading {
  font-size: clamp(2.88rem, calc(-5.13rem + 9.46vw), 3.7647rem);
}
}
@media (min-width: 1440px) {
.hero-home {
  min-height: var(--home-hero-height) !important;
  max-height: none;
}
.hp-hero-grid {
  min-height: var(--home-hero-height);
  max-height: none;
}
.hp-hero-left {
  padding: 0;
}
.hero-lede {
  margin-top: 0.75rem;
}
.hero-ctas {
  margin-top: 0.75rem;
}
.hero-search-form {
  margin-top: 0.75rem;
}
}

/* ---- Capability image strip ----
   Shares the hero's shell: same responsive side gutter
   (--home-hero-pad-x) and, on wide viewports, the same centered
   max-width — the first/last cards align with the headline's left/right
   boundaries. */
.cap-strip {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
min-height: 0;
height: auto;
padding: 1.75rem var(--home-hero-pad-x) 1.5rem !important;
background: transparent;
box-shadow: none;
position: relative;
z-index: 3;
}
/* The card grid itself is capped to the shell max-width (below) so the
   cards align with the hero column, but the background behind them needs
   to run edge-to-edge — otherwise it reads as a floating card instead of a
   continuation of the page. Full-bleed via a pseudo-element sized to the
   viewport and clipped by .hp-fold's overflow:hidden, rather than
   constraining it to .cap-strip's own (intentionally narrower) box.

   Matches the body navy so the strip continues the fold above and the
   newsletter/footer below — it was the only light surface on the page, and
   the white surround was competing with the card photos. */
.cap-strip::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #0b1a38;
  z-index: -1;
}
.cap-tile {
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
border-radius: 0.75rem;
border: 1px solid rgba(147, 197, 253, 0.26);
background: rgba(147, 197, 253, 0.08);
box-shadow: none;
transition: transform 280ms cubic-bezier(0.22,1,0.36,1), border-color 220ms ease, background 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .cap-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(147, 197, 253, 0.4);
    background: rgba(147, 197, 253, 0.12);
    box-shadow: none;
  }
}
.cap-tile-photo {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 2;
min-height: 0;
border-radius: inherit;
background: #060e22;
}
.cap-tile img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 400ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .cap-tile:hover img { transform: scale(1.05); }
}
.cap-tile-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: 0.4rem;
padding: 1.1rem 1.15rem 1.2rem;
/* Anchored to the bottom, so the scrim rises from the bottom edge and the
   top of the photo stays completely clear. Touch devices keep the
   description visible at rest, so this reaches further up than the
   hover-capable variant below. */
background: linear-gradient(to top, rgba(11,26,56,0.96) 0%, rgba(11,26,56,0.82) 32%, rgba(11,26,56,0.35) 58%, transparent 78%);
pointer-events: none;
}
.cap-tile-tag {
display: block;
margin: 0;
padding: 0;
border: none;
background: transparent;
border-radius: 0;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #93c5fd;
line-height: 1.2;
/* Carries contrast where the scrim is deliberately thin, so the photo can
   stay visible behind the heading. */
text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 2px 12px rgba(0,0,0,0.4);
}
.cap-tile-title {
display: block;
font-size: clamp(1rem, 1.1vw, 1.15rem);
font-weight: 500;
color: #fff;
line-height: 1.3;
letter-spacing: -0.02em;
margin: 0;
font-family: var(--font-sans);
text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 2px 14px rgba(0,0,0,0.45);
}
.cap-tile-desc {
display: -webkit-box;
/* 4 lines, not 3: the overlay is absolutely positioned over the photo, so
   an extra line costs no tile height — and 3 lines was clipping copy the
   cards are meant to carry. min-height reserves all four lines even when
   the copy runs short, so the bottom-aligned overlays put every card's
   title on the same baseline regardless of description length. */
-webkit-line-clamp: 4;
min-height: calc(4 * 1.5em);
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.8125rem;
color: rgba(226,232,240,0.78);
line-height: 1.5;
font-family: var(--font-sans);
margin: 0;
text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.35);
}
/* Hover-capable pointers only: description stays collapsed until the card
   is hovered or focused, so the resting card reads as just tag + title.
   Touch devices have no hover state, so this never applies there — the
   description stays visible by default, same as it always has, since a
   phone/tablet user can't "hover" to reveal it. Text stays in the DOM
   either way, so screen readers read it regardless of visual state. */
@media (hover: hover) and (pointer: fine) {
  .cap-tile-desc {
    max-height: 0;
    min-height: 0;
    opacity: 0;
    margin-top: -0.4rem;
    transition: max-height 260ms ease, opacity 200ms ease, margin-top 260ms ease;
  }
  .cap-tile:hover .cap-tile-desc,
  .cap-tile:focus-visible .cap-tile-desc {
    max-height: calc(4 * 1.5em);
    opacity: 1;
    margin-top: 0;
  }
  /* At rest only tag + title are showing, so the scrim pulls back to the
     bottom and clears the top half of the photo entirely. */
  .cap-tile-overlay {
    background: linear-gradient(to top, rgba(11,26,56,0.94) 0%, rgba(11,26,56,0.72) 24%, rgba(11,26,56,0.24) 44%, transparent 62%);
  }
  /* Second scrim fades in with the description so the revealed copy keeps
     its contrast. Separate layer because gradients themselves don't
     interpolate — opacity does. */
  .cap-tile-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to top, rgba(11,26,56,0.20) 0%, rgba(11,26,56,0.44) 34%, rgba(11,26,56,0.56) 62%, rgba(11,26,56,0.28) 85%, transparent 100%);
    opacity: 0;
    transition: opacity 260ms ease;
  }
  .cap-tile:hover .cap-tile-overlay::before,
  .cap-tile:focus-visible .cap-tile-overlay::before {
    opacity: 1;
  }
  /* Positioned so they paint after the ::before scrim, which is otherwise
     laid over static text. */
  .cap-tile-tag,
  .cap-tile-title,
  .cap-tile-desc {
    position: relative;
  }
}
@media (max-width: 767px) {
:root {
  --home-hero-height: auto;
  --home-card-strip-height: 260px;
}
.cap-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.35rem var(--home-hero-pad-x) 1.35rem !important;
}
/* Square, not 3:4 portrait — four 443px-tall cards made the strip 1868px
   (2.3 phone screens) for the same content. */
.cap-tile-photo { aspect-ratio: 1 / 1; }
.cap-tile-desc {
  -webkit-line-clamp: 4;
  font-size: 0.875rem;
  line-height: 1.55;
}
.cap-tile-title { font-size: 1.1rem; }
.cap-strip .cap-tile:nth-child(3) img {
  object-position: 30% 40% !important;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
:root {
  --home-hero-height: 340px;
  --home-card-strip-height: 280px;
}
}
@media (min-width: 1280px) {
/* Was 1400px — that put the breakpoint right in the middle of the
   1366-1536 laptop band, so cards looked like a completely different
   (2x2, much taller) layout there vs. large desktop. Four equal-height
   columns now start at laptop widths too. */
.cap-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
  padding: 1.15rem var(--home-hero-pad-x) !important;
  width: 100%;
  max-width: var(--home-shell-max);
  box-sizing: border-box;
  margin: -0.75rem auto 0;
}
.cap-tile-photo {
  height: var(--home-card-strip-height);
  min-height: 0;
  aspect-ratio: auto;
}
}
@media (min-width: 1600px) {
.hp-hero-grid {
  /* Inherits the shared shell max-width + centering from the base rule,
     so the hero box and the card row share outer boundaries on wide
     viewports. */
  grid-template-columns: minmax(0, 46rem);
  /* start, not center: the column keeps the shell's left padding edge
     instead of drifting to the middle of the shell box. */
  justify-content: start;
}
.hp-hero-left {
  max-width: 46rem;
  padding: 0;
}
.hero-kicker {
  font-size: clamp(0.68rem, 0.5vw, 0.78rem);
  padding: 4px 14px;
  margin-bottom: 0.85rem;
}
.hero-heading {
  font-size: clamp(3rem, 4vw, 4.5rem);
  line-height: 0.98;
}
.hero-lede {
  max-width: 620px !important;
  font-size: clamp(1rem, 0.82vw, 1.12rem) !important;
  line-height: 1.6 !important;
  margin-top: 0.8rem !important;
}
.hp-hero-actions {
  width: min(100%, 33rem);
  margin-top: 2.25rem;
}
.hero-ctas {
  gap: 0.75rem !important;
  margin-top: 1.5rem !important;
}
.hero-search-form {
  max-width: min(32rem, 100%) !important;
  margin-top: 0.75rem !important;
}
.hp-hero-actions .hero-search-form {
  max-width: 100% !important;
  margin-top: 0 !important;
}
.hero-search-input {
  min-height: 3rem;
  font-size: clamp(0.92rem, 0.58vw, 1.02rem);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}
}

/* ---- Stats strip (glass cards) ---- */
.pwi-stats-strip {
padding: 2.5rem 4rem 2.75rem;
background:
  radial-gradient(ellipse 80% 60% at 18% 50%, rgba(30,78,216,0.16) 0%, transparent 55%),
  radial-gradient(ellipse 55% 45% at 88% 35%, rgba(96,165,250,0.1) 0%, transparent 50%),
  var(--pwi-canvas-top);
border-top: 1px solid rgba(148, 163, 184, 0.1);
}
.pwi-stats-inner {
max-width: 80rem;
margin: 0 auto;
}
.pwi-stats-kicker {
margin: 0 0 1.25rem;
font-size: 0.92rem;
font-weight: 400;
color: rgba(226, 232, 240, 0.72);
letter-spacing: 0.01em;
line-height: 1.45;
}
.pwi-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.pwi-stat-card {
position: relative;
padding: 1.35rem 1.25rem 1.2rem;
border-radius: 1rem;
background: rgba(147, 197, 253, 0.10);
border: 1px solid rgba(147, 197, 253, 0.26);
backdrop-filter: none;
box-shadow: none;
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, background 220ms ease;
}
@media (min-width: 768px) {
.pwi-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(147, 197, 253, 0.4);
  background: rgba(147, 197, 253, 0.14);
  box-shadow: none;
}
}
.pwi-stat-icon {
width: 2.25rem;
height: 2.25rem;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(147, 197, 253, 0.22);
border: 1px solid rgba(147, 197, 253, 0.28);
color: #93c5fd;
margin-bottom: 0.85rem;
}
.pwi-stat-icon svg {
width: 1.05rem;
height: 1.05rem;
flex-shrink: 0;
}
.pwi-stat-value {
display: block;
font-size: clamp(1.35rem, 1.85vw, 1.75rem);
font-weight: 500;
color: #fff;
letter-spacing: -0.025em;
line-height: 1.15;
font-variant-numeric: tabular-nums;
}
.pwi-stat-value .pwi-stat-suffix { color: #93c5fd; }
.pwi-stat-label {
display: block;
margin-top: 0.4rem;
font-size: 0.8125rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: rgba(148, 163, 184, 0.95);
line-height: 1.45;
}
.pwi-stats-grid .pwi-stat-card:nth-child(1) { transition-delay: 0ms; }
.pwi-stats-grid .pwi-stat-card:nth-child(2) { transition-delay: 80ms; }
.pwi-stats-grid .pwi-stat-card:nth-child(3) { transition-delay: 160ms; }
@media (max-width: 767px) {
.pwi-stats-strip { padding: 2rem 1.25rem 2.25rem; }
.pwi-stats-grid { grid-template-columns: 1fr; gap: 0.75rem; }
.pwi-stats-kicker { font-size: 0.875rem; margin-bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
.pwi-stat-card { transition: none; }
.pwi-stat-card:hover { transform: none; }
}

/* ---- Hero search autocomplete ---- */
.hero-home { overflow: visible; }
.hero-search-form { position: relative; }
.hero-suggest {
/* fixed, not absolute — top/left/width are set by JS (positionPanel() in
   the inline script below) from the input's real viewport position, so
   the panel can escape .hp-fold's overflow:hidden instead of being
   clipped at "the fold" once results run long. */
position: fixed;
z-index: 50;
background: var(--pwi-canvas-gradient-header);
border: 1px solid rgba(148,163,184,0.25);
border-radius: 1rem;
box-shadow: 0 18px 48px -12px rgba(0,0,0,0.65);
/* y scrolls (JS caps max-height to the room left below the input); x stays
   hidden so scrolling never breaks the rounded corners. Fixed positioning
   means the panel doesn't move when the page scrolls, so without this cap
   a tall result list could run past the bottom of the window with no way
   to reach the rest of it. */
overflow-x: hidden;
overflow-y: auto;
display: none;
}
.hero-suggest.is-open { display: block; }
.hero-suggest-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 1rem;
text-decoration: none;
color: #e2e8f0;
font-size: 0.85rem;
line-height: 1.35;
border-bottom: 1px solid rgba(148,163,184,0.1);
transition: background 140ms ease;
cursor: pointer;
}
.hero-suggest-item:last-child { border-bottom: none; }
.hero-suggest-item:hover,
.hero-suggest-item.is-selected { background: rgba(30,78,216,0.28); }
.hero-suggest-item svg { flex-shrink: 0; color: #93c5fd; }
.hero-suggest-item mark {
background: none;
color: #93c5fd;
font-weight: 600;
}
.hero-suggest-footer {
display: block;
padding: 0.6rem 1rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #93c5fd;
text-decoration: none;
background: rgba(255,255,255,0.04);
cursor: pointer;
}
.hero-suggest-footer:hover,
.hero-suggest-footer.is-selected { background: rgba(30,78,216,0.28); color: #bfdbfe; }
@media (max-width: 767px) {
.hero-suggest { border-radius: 0.75rem; }
.hero-suggest-item { padding: 0.8rem 0.9rem; }
}
/* Suggestions extend below hero; sit above cap-strip (z-index 3) */
.hero-home:has(.hero-suggest.is-open) {
  z-index: 20;
}

@media (min-width: 1024px) {
  .cap-strip {
    /* Was -3.5rem. The hero's content column is taller now that the search
       sits inside it, and that deep overlap was consuming the hero's bottom
       padding — the search bar ended up ~20px off the card tops. A light
       overlap still reads as one continuous dark field. */
    margin-top: -1rem;
    border-top: none;
  }
}

/* ---- Refined homepage layer ---- */
.hero-lede {
font-size: 1.02rem;
line-height: 1.7;
color: rgba(226, 232, 240, 0.92);
max-width: 30rem;
}
.cap-tile-title {
font-weight: 500;
letter-spacing: -0.022em;
}
.pwi-nl-label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.14em;
}
.pwi-nl-heading {
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.35;
}
.pwi-nl-btn {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.8125rem;
  font-weight: 550;
}
.hero-home .hero-ctas .hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0.55rem 1.5rem;
  border-radius: 9999px;
  text-decoration: none;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.hero-home .hero-ctas .hero-cta-primary {
  box-shadow: none;
}
.hero-home .hero-ctas .hero-cta-primary:hover {
  transform: none;
  box-shadow: none;
}
.hero-home .hero-ctas .hero-cta-secondary {
  /* More opaque than the search field's fill so the button reads as a
     solid control (not glass) against light slideshow frames — it was
     washing out even more than the search bar at low opacity. */
  color: #eaf2ff !important;
  background: rgba(8, 15, 32, 0.55) !important;
  border: 1.5px solid rgba(147, 197, 253, 0.6) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero-home .hero-ctas .hero-cta-secondary:hover {
  background: #1E4ED8 !important;
  border-color: #1E4ED8 !important;
  color: #fff !important;
  transform: none;
}
.cap-strip { gap: 1rem; }
@media (max-width: 767px) {
.hero-home { min-height: auto; }
}
main a:focus-visible,
main button:focus-visible,
main input:focus-visible:not(.hero-search-input) {
outline: 2px solid #93c5fd;
outline-offset: 2px;
border-radius: 4px;
}
.hp-slide:focus-visible {
outline: none;
box-shadow: inset 0 0 0 3px #93c5fd;
}
.hero-search-input:focus,
.hero-search-input:focus-visible {
outline: none;
}
.hero-home .hero-ctas .hero-cta:focus-visible,
.pwi-nl-btn:focus-visible { border-radius: 9999px; }
.cap-tile:focus-visible {
outline: 3px solid #93c5fd;
outline-offset: 3px;
}
.pwi-nl-note { color: #9fb0c8; }
@media (prefers-reduced-motion: reduce) {
.hero-home .hero-ctas .hero-cta,
.cap-tile img, .cap-tile, .cap-tile-desc { transition: none !important; }
.hero-home .hero-ctas .hero-cta-primary:hover,
.hero-home .hero-ctas .hero-cta-secondary:hover { transform: none; }
.cap-tile:hover { transform: none; }
}

/* ---- Scroll reveal ---- */
.scroll-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 400ms cubic-bezier(.22,1,.36,1), transform 400ms cubic-bezier(.22,1,.36,1);
}
.scroll-reveal.in-view {
opacity: 1;
transform: translateY(0);
}
.cap-strip .cap-tile:nth-child(1) { transition-delay: 0ms; }
.cap-strip .cap-tile:nth-child(2) { transition-delay: 60ms; }
.cap-strip .cap-tile:nth-child(3) { transition-delay: 120ms; }
.cap-strip .cap-tile:nth-child(4) { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
.scroll-reveal { opacity: 1; transform: none; transition: none; }
.hp-slide.hp-active img { animation: none !important; transform: scale(1.02); }
.hp-slideshow-toggle { display: none !important; }
}

/* Hero slideshow pause control */
.hp-slideshow-toggle {
position: absolute;
z-index: 3;
top: 1rem;
right: 1rem;
bottom: auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
min-width: 44px;
min-height: 44px;
padding: 0.5rem;
border-radius: 9999px;
border: 1px solid rgba(255,255,255,0.22);
background: rgba(7,16,30,0.72);
color: rgba(226,232,240,0.95);
font-family: var(--font-sans);
cursor: pointer;
backdrop-filter: blur(6px);
transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.hp-slideshow-toggle:hover {
background: rgba(7,16,30,0.88);
border-color: rgba(147,197,253,0.45);
color: #fff;
}
.hp-slideshow-toggle:focus-visible {
outline: 2px solid rgba(147,197,253,0.75);
outline-offset: 2px;
}
.hp-slideshow-toggle svg {
flex-shrink: 0;
width: 14px;
height: 14px;
}
.hp-slideshow-toggle[aria-pressed="true"] .hp-slideshow-icon-pause { display: none; }
.hp-slideshow-toggle[aria-pressed="true"] .hp-slideshow-icon-play { display: block; }
.hp-slideshow-toggle[aria-pressed="false"] .hp-slideshow-icon-play { display: none; }
.hp-slideshow-toggle[aria-pressed="false"] .hp-slideshow-icon-pause { display: block; }
.hp-slideshow-toggle-text { display: none; }
@media (max-width: 767px) {
.hp-slideshow-toggle {
  top: 0.75rem;
  right: 0.75rem;
}
}

/* ---- Newsletter section ---- */
.pwi-nl-section {
background: var(--pwi-canvas-top);
padding: 2.5rem 0 1.5rem;
border-top: 1px solid rgba(148, 163, 184, 0.14);
}
.pwi-nl-inner {
max-width: 80rem;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
padding-left: var(--pwi-footer-pad-x, clamp(1.5rem, 4vw, 4rem));
padding-right: var(--pwi-footer-pad-x, clamp(1.5rem, 4vw, 4rem));
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1.25rem;
}
.pwi-nl-copy {
min-width: 0;
}
.pwi-nl-signup {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.pwi-nl-label {
font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em;
text-transform: uppercase; color: #94a3b8; margin: 0 0 0.75rem;
}
.pwi-nl-heading {
font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 600;
color: #f1f5f9; line-height: 1.4; margin: 0; letter-spacing: -0.015em;
}
.pwi-nl-form {
display: flex; border-radius: 9999px; overflow: hidden;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 16px 40px -12px rgba(0, 0, 0, 0.45);
background: #ffffff;
width: 100%;
}
.pwi-nl-input {
flex: 1; min-width: 0; background: transparent; border: none; outline: none;
color: #0f172a; font-size: 0.875rem; padding: 0.75rem 1.25rem;
font-family: var(--font-sans);
}
.pwi-nl-input::placeholder {
color: #64748b;
opacity: 1;
}
.pwi-nl-input:focus {
outline: none;
}
.pwi-nl-input:focus-visible {
box-shadow: inset 0 0 0 2px #93c5fd;
}
.pwi-nl-btn {
flex-shrink: 0; background: #1e4ed8; border: none; color: #fff;
font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em;
padding: 0.75rem 1.5rem; cursor: pointer; font-family: var(--font-sans);
transition: background 180ms ease;
}
.pwi-nl-btn:hover { background: #1b46c4; }
.pwi-nl-btn:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px #93c5fd;
}
.pwi-nl-note { font-size: 0.75rem; color: #94a3b8; margin: 0.75rem 0 0; line-height: 1.5; }
@media (min-width: 768px) {
.pwi-nl-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 22rem);
gap: 2rem;
align-items: center;
}
.pwi-nl-signup {
width: 100%;
max-width: 22rem;
justify-self: end;
}
.pwi-nl-form {
min-height: 3rem;
}
.pwi-nl-input {
padding: 0.9rem 1.35rem;
font-size: 0.9375rem;
}
.pwi-nl-btn {
padding: 0.9rem 1.65rem;
font-size: 0.875rem;
}
.pwi-nl-heading {
font-size: clamp(1.15rem, 1.35vw, 1.45rem);
line-height: 1.35;
}
.pwi-home-site-bottom .pwi-footer-grid {
padding-top: 1.5rem;
}
}
@media (min-width: 1600px) {
.pwi-nl-inner {
padding-left: var(--pwi-footer-pad-x, clamp(3rem, 4vw, 5rem));
padding-right: var(--pwi-footer-pad-x, clamp(3rem, 4vw, 5rem));
}
}
@media (max-width: 767px) {
.pwi-nl-section { padding: 2rem 0; }
.pwi-nl-inner {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.pwi-nl-form { border-radius: 0.5rem; flex-direction: column; background: transparent; box-shadow: none; gap: 0.75rem; min-height: 0; }
.pwi-nl-input {
  border-radius: 9999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  background: #ffffff;
}
.pwi-nl-btn { border-radius: 9999px; min-height: 44px; }
}

@media (max-width: 767px) {
.hero-home {
  min-height: clamp(360px, 72svh, 420px) !important;
  height: auto !important;
  --hp-pill-h: 44px;
  --hp-pill-h-sm: 36px;
  --hp-pill-gap: 0.625rem;
  --hp-pill-text: 0.8125rem;
  --hp-pill-text-sm: 0.625rem;
  --hp-accent: #1e4ed8;
  --hp-accent-hover: #1b46c4;
  /* Darker/more opaque than before so the search field and "Get in
     Touch" button stay legible over bright parts of the hero photo. */
  --hp-glass-bg: rgba(8, 15, 32, 0.55);
  --hp-glass-border: rgba(147, 197, 253, 0.6);
  --hp-glass-text: #eaf2ff;
  --hp-search-bg: rgba(6, 13, 30, 0.72);
  --hp-search-border: rgba(147, 197, 253, 0.55);
}
/* Slideshow hidden on mobile; photo uses hp-hero-mobile-bg + hp-bg-overlay */
.hp-slider,
.hp-slideshow-toggle {
  display: none !important;
}
.hp-hero-grid {
  min-height: clamp(360px, 72svh, 420px) !important;
  align-items: flex-start !important;
  gap: 0 !important;
}
.hp-hero-left {
  position: relative;
  min-height: auto !important;
  justify-content: flex-start !important;
  padding-top: clamp(2.75rem, 6svh, 3.25rem) !important;
  padding-bottom: 0.65rem !important;
  padding-left: var(--home-hero-pad-x) !important;
  padding-right: var(--home-hero-pad-x) !important;
}
.hp-hero-actions {
  width: 100%;
  max-width: none;
  /* No horizontal margin: the actions block now sits inside .hp-hero-left,
     which already carries the page's side padding. */
  margin: 1.1rem 0 1.9rem;
  padding: 0;
}
.hero-kicker {
  background: rgba(147, 197, 253, 0.14);
  border-color: rgba(147, 197, 253, 0.32);
  color: #93c5fd;
}
.hero-heading {
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.hero-heading span {
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.hero-home .hero-lede {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  color: #f8fafc !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 14px rgba(0,0,0,0.35);
}
.hero-ctas {
  margin-top: var(--hp-pill-gap) !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: var(--hp-pill-gap) !important;
}
.hero-home .hero-ctas .hero-cta {
  /* Content-sized rather than forced 50/50 — an even split left
     "Product Information" with zero padding slack while "Get in
     Touch" sat with room to spare. */
  flex: 0 1 auto !important;
  min-width: 0;
  min-height: var(--hp-pill-h) !important;
  height: var(--hp-pill-h) !important;
  width: auto !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  padding: 0 0.85rem !important;
  font-size: var(--hp-pill-text) !important;
  line-height: 1.2 !important;
}
.hero-home .hero-ctas .hero-cta-primary {
  color: #fff !important;
  background: var(--hp-accent) !important;
  border: 1px solid var(--hp-accent) !important;
  box-shadow: none !important;
}
.hero-home .hero-ctas .hero-cta-secondary {
  color: var(--hp-glass-text) !important;
  background: var(--hp-glass-bg) !important;
  border: 1px solid var(--hp-glass-border) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero-search-form {
  margin-top: var(--hp-pill-gap) !important;
  max-width: 100% !important;
}
.hp-hero-actions .hero-search-form {
  margin-top: 0 !important;
}
.hero-search-input {
  min-height: var(--hp-pill-h) !important;
  height: var(--hp-pill-h) !important;
  padding: 0 calc(6px + 38px + 26px + 0.75rem) 0 2.45rem !important;
  font-size: var(--hp-pill-text) !important;
  line-height: 1.2 !important;
  background: var(--hp-search-bg) !important;
  color: #f8fafc !important;
  border: 1.5px solid var(--hp-search-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(6px);
}
.hero-search-input::placeholder {
  color: rgba(226, 232, 240, 0.85) !important;
}
.hero-search-input:hover {
  background: rgba(6, 13, 30, 0.8) !important;
  border-color: rgba(147, 197, 253, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
.hero-search-input:focus,
.hero-search-input:focus-visible {
  background: rgba(6, 13, 30, 0.82) !important;
  border-color: rgba(147, 197, 253, 0.8) !important;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 3px rgba(99, 152, 255, 0.28) !important;
}
.hero-search-icon {
  color: #bfdbfe !important;
}
.hero-search-submit {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  flex: none !important;
  background: var(--hp-accent) !important;
  border: 1px solid var(--hp-accent) !important;
}
.hero-search-submit svg {
  width: 14px !important;
  height: 14px !important;
}
.hero-search-submit:hover {
  background: var(--hp-accent-hover) !important;
  border-color: var(--hp-accent-hover) !important;
  transform: translateY(-50%) !important;
}
.hero-search-clear {
  right: calc(6px + 38px + 0.35rem) !important;
  width: 26px !important;
  height: 26px !important;
}
.hero-hints {
  flex-wrap: nowrap !important;
  gap: 0.45rem !important;
  margin-top: 0.65rem !important;
  max-width: 100% !important;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 0.125rem;
  padding-right: 0.25rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hero-hints::-webkit-scrollbar {
  display: none;
}
.hero-hints-label,
.hero-hint-chip {
  flex: 0 0 auto;
  white-space: nowrap;
}
.hero-hint-chip:nth-of-type(n+2) {
  display: none !important;
}
}
/* Below ~340px the 50/50 split leaves no room for "Product Information"
   without clipping against the pill edge — stack the two CTAs into full-
   width rows instead of shrinking the label. */
@media (max-width: 340px) {
.hero-ctas {
  flex-direction: column !important;
}
.hero-home .hero-ctas .hero-cta {
  flex: 1 1 100% !important;
  width: 100% !important;
}
}
@media (max-width: 374px) {
.pwi-footer-bottom {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  overflow: hidden !important;
}
.pwi-footer-bottom img {
  width: min(100%, 220px) !important;
  max-width: 100% !important;
}
.pwi-footer-copy,
.pwi-footer-legal-links {
  max-width: 100% !important;
}
.pwi-footer-bottom .pwi-footer-legal-links a {
  min-height: 0 !important;
  padding: 0.1rem 0.05rem !important;
  white-space: nowrap !important;
  font-size: 0.75rem !important;
  line-height: 1.35 !important;
}
}

/* Below-fold sections — skip layout/paint until near viewport.
   .cap-strip is intentionally excluded: it's always part of the initial
   viewport now, and deferring its layout left the shared hero/card
   background (sized to .hp-fold) briefly too short, exposing a solid-
   color gap beneath the cards until it scrolled into view. */
main > section:not(.hero-home) {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}
/* ---- Mobile hero: static photo, full lede (phones only) ---- */
.hp-hero-mobile-bg { display: none; }
@media (max-width: 767px) {
  .hp-hero-mobile-bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .hp-hero-mobile-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
    display: block;
  }
  .hp-slider,
  .hp-slideshow-toggle { display: none !important; }
  .hp-bg-overlay {
    display: block !important;
    /* Flat, uniform tint — consistent top-to-bottom over the hero photo
       and the stacked cards beneath it, no fade-to-solid seam. */
    background: var(--pwi-hero-overlay-flat);
  }
  .hero-heading span {
    background: linear-gradient(100deg, #93c5fd 20%, #e8f2ff 40%, #93c5fd 60%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hp-hero-sweep 4.5s ease-in-out infinite;
  }
}
@keyframes hp-hero-sweep {
  0%, 100% { background-position: 110% 0; }
  50% { background-position: -10% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-heading span { animation: none !important; }
}

/* ---- Hero browse chips ----
   Replaces the finder pill: three quiet outlined paths under the search
   field, so nothing competes with the field's solid-blue submit and no
   single airframe gets top billing. */
.hero-browse {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.hero-browse-label {
  color: #93c5fd;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-right: 0.1rem;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 0.9rem;
  border: 1px solid rgba(147, 197, 253, 0.4);
  border-radius: 9999px;
  background: rgba(6, 13, 30, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #dbeafe;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.hero-chip:hover {
  background: #1e4ed8;
  border-color: #1e4ed8;
  color: #fff;
}
@media (max-width: 767px) {
  .hero-browse {
    margin-top: 0.75rem;
    gap: 0.4rem;
  }
  .hero-chip {
    min-height: 40px;
    padding: 0 0.7rem;
    font-size: 0.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-chip { transition: none; }
}
@media (min-width: 1024px) {
  /* 31rem left the browse row ~15px short of holding the label plus all
     three chips, wrapping "STC / PMA data" onto its own line. */
  .hp-hero-actions {
    width: min(100%, 36rem) !important;
    max-width: 36rem !important;
  }
}