/* ==========================================================================
   JRP Smart Energy — Core stylesheet
   Author: Ashin Iqbal from PBIS LLC
   Order: tokens > reset > typography > layout > components > header > footer > utils
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS — self-hosted Nunito variable.
   Two subsets only (latin, latin-ext). font-display:swap keeps LCP text visible
   during the ~35KB fetch instead of blocking on it.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('../fonts/nunito-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('../fonts/nunito-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS
   Restrained industrial palette: white/off-white ground, graphite ink,
   deep blue as the single primary, green reserved for energy/status cues only.
   -------------------------------------------------------------------------- */
:root {
  /* -- Surfaces -- */
  --c-white:        #ffffff;
  --c-surface:      #f7f8fa;   /* off-white page ground */
  --c-surface-2:    #eef1f5;   /* alternating band */
  --c-surface-3:    #e7ebf1;

  /* -- Ink (graphite) -- */
  --c-ink:          #0f1319;   /* headings */
  --c-ink-2:        #1e252f;   /* strong body */
  --c-body:         #454f5d;   /* body copy */
  --c-muted:        #6b7785;   /* secondary */
  --c-faint:        #98a2b3;   /* meta, captions */

  /* -- Hairlines: this theme leans on 1px rules, not shadows -- */
  --c-line:         #e3e7ed;
  --c-line-2:       #d3d9e2;
  --c-line-strong:  #b9c2cf;

  /* -- Primary: deep blue -- */
  --c-pri-900:      #062458;
  --c-pri-800:      #0b3d91;   /* deep — headings on dark, gradients */
  --c-pri:          #1157c7;   /* the primary action colour */
  --c-pri-600:      #2b7be4;   /* hover / bright */
  --c-pri-300:      #8fbaf4;
  --c-pri-100:      #dbe8fc;
  --c-pri-50:       #eef4fe;

  /* -- Accent: energy green. Used sparingly: status, eco cues, diagram highlights -- */
  --c-grn-800:      #0b6b2f;
  --c-grn:          #15a34a;
  --c-grn-600:      #22b356;
  --c-grn-100:      #dcf3e5;
  --c-grn-50:       #eefaf2;

  /* -- Signal (safety / warning callouts on a battery site) -- */
  --c-amber:        #b45309;
  --c-amber-50:     #fdf5e9;
  --c-red:          #c0342b;
  --c-red-50:       #fdefee;

  /* -- Dark ground (footer, technical bands) -- */
  --c-dark:         #0d1117;
  --c-dark-2:       #151b24;
  --c-dark-3:       #1e2733;
  --c-dark-line:    #2a3542;
  --c-dark-ink:     #f2f5f9;
  --c-dark-body:    #a9b4c2;

  /* -- Typography -- */
  --f-sans: 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --t-display: clamp(2.3rem, 1.5rem + 3.5vw, 3.95rem);
  --t-h1:      clamp(2.05rem, 1.48rem + 2.45vw, 3.3rem);
  --t-h2:      clamp(1.72rem, 1.34rem + 1.62vw, 2.55rem);
  --t-h3:      clamp(1.28rem, 1.14rem + 0.6vw, 1.62rem);
  --t-h4:      clamp(1.09rem, 1.03rem + 0.28vw, 1.25rem);
  --t-lead:    clamp(1.05rem, 0.99rem + 0.28vw, 1.22rem);
  --t-body:    1.0425rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;
  --t-label:   0.75rem;

  --lh-tight: 1.1;
  --lh-head:  1.18;
  --lh-body:  1.72;

  /* -- Space scale (4px base) -- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-7: 2rem;     --s-8: 2.5rem;
  --s-9: 3rem;     --s-10: 4rem;    --s-11: 5rem;    --s-12: 6.5rem;

  /* Vertical rhythm for full-bleed sections */
  --section-y:  clamp(3.5rem, 2rem + 6vw, 7rem);
  --section-y-lg: clamp(4.5rem, 2.4rem + 8vw, 9rem);

  /* -- Geometry: small radii read as engineered, not consumer-app -- */
  --r-xs: 3px;  --r-sm: 5px;  --r: 8px;  --r-lg: 12px;  --r-xl: 16px;

  /* -- Elevation: hairline-first, shadows are a whisper -- */
  --sh-1: 0 1px 2px rgba(15,19,25,.04), 0 1px 1px rgba(15,19,25,.03);
  --sh-2: 0 2px 4px rgba(15,19,25,.05), 0 4px 12px rgba(15,19,25,.045);
  --sh-3: 0 8px 20px rgba(15,19,25,.07), 0 2px 6px rgba(15,19,25,.05);
  --sh-pri: 0 6px 18px rgba(17,87,199,.22);

  /* -- Motion. Every duration flows through these so reduced-motion can zero them -- */
  --e-out:  cubic-bezier(.22,.61,.36,1);
  --e-in-out: cubic-bezier(.65,.05,.36,1);
  --e-spring: cubic-bezier(.34,1.4,.5,1);
  --d-fast:  .16s;
  --d:       .28s;
  --d-slow:  .48s;

  /* -- Layout -- */
  --wrap:      1240px;
  --wrap-wide: 1440px;
  --wrap-text: 74ch;
  --gutter:    clamp(1.15rem, 0.7rem + 2vw, 2.5rem);
  --header-h:  76px;
}

@media (min-width: 1024px) { :root { --header-h: 88px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets (the Technology nav jump) must clear the fixed header */
  scroll-padding-top: calc(var(--header-h) + 1.25rem);
}

body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--c-body);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums lining-nums;
  overflow-x: hidden;
}

img, svg, video, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }
/* Deliberately NOT `svg { fill: currentColor }`. That would be a declaration on
   the <svg> element, which beats the fill="none" presentation attribute the icon
   library sets there — every stroke icon would inherit a fill and render solid.
   Icons carry their own fill/stroke; brand marks set fill on their paths. */

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p, li { overflow-wrap: break-word; }

ul[class], ol[class] { list-style: none; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; }

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

:target { scroll-margin-top: calc(var(--header-h) + 1.25rem); }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  color: var(--c-ink);
  font-weight: 800;
  line-height: var(--lh-head);
  letter-spacing: -0.021em;
}

.t-display { font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: -0.031em; font-weight: 900; }
h1, .h1 { font-size: var(--t-h1); letter-spacing: -0.027em; }
h2, .h2 { font-size: var(--t-h2); letter-spacing: -0.024em; }
h3, .h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.016em; }
h4, .h4 { font-size: var(--t-h4); font-weight: 700; letter-spacing: -0.012em; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.62;
  color: var(--c-muted);
  font-weight: 400;
}

.t-sm { font-size: var(--t-sm); }
.t-xs { font-size: var(--t-xs); }

/* Eyebrow — the numbered section label ("01 — Products").
   Letterspaced small caps is the single strongest "technical document" signal. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-pri);
  line-height: 1;
}
.eyebrow::before {
  content: '';
  width: 26px; height: 2px;
  background: currentColor;
  flex: none;
  border-radius: 2px;
}
.eyebrow--green { color: var(--c-grn-800); }
.eyebrow--light { color: var(--c-pri-300); }

/* Numeric index used beside section headings */
.sec-index {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--c-faint);
}

a { color: var(--c-pri); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--c-pri-600); }

strong, b { font-weight: 700; color: var(--c-ink-2); }

::selection { background: var(--c-pri-100); color: var(--c-pri-900); }

/* --------------------------------------------------------------------------
   5. FOCUS + A11Y
   -------------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-pri);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.on-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--c-pri-300); }

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

.skip-link {
  position: absolute;
  left: var(--s-4); top: var(--s-4);
  z-index: 200;
  transform: translateY(-160%);
  background: var(--c-pri);
  color: #fff;
  padding: .7rem 1.15rem;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: var(--t-sm);
  text-decoration: none;
  transition: transform var(--d) var(--e-out);
}
.skip-link:focus-visible { transform: translateY(0); color: #fff; }

/* --------------------------------------------------------------------------
   6. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: calc(var(--wrap-wide) + var(--gutter) * 2); }
.wrap--text { max-width: calc(var(--wrap-text) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); position: relative; }
.section--lg { padding-block: var(--section-y-lg); }
.section--tight { padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem); }
.section--surface { background: var(--c-surface); }
.section--surface-2 { background: var(--c-surface-2); }
.section--dark { background: var(--c-dark); color: var(--c-dark-body); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--c-dark-ink); }
.section--dark .lead { color: var(--c-dark-body); }

/* Hairline separators between same-coloured stacked sections */
.section--ruled { border-top: 1px solid var(--c-line); }

.stack > * + * { margin-top: var(--flow, 1rem); }

.grid { display: grid; gap: var(--s-6); }
@media (min-width: 640px)  { .g-sm-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px)  { .g-md-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
                             .g-md-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1080px) { .g-lg-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
                             .g-lg-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* Section heading block */
.sec-head { max-width: 62ch; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head .eyebrow { margin-bottom: var(--s-4); }
.sec-head h2 + p, .sec-head h2 + .lead { margin-top: var(--s-4); }
.sec-head--center .eyebrow { justify-content: center; }

/* Blueprint grid — a whisper-faint engineering drawing texture.
   Kept at 2% alpha so it reads as paper stock, never as decoration. */
.bg-grid { position: relative; isolation: isolate; }
.bg-grid::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(17,87,199,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,87,199,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
  pointer-events: none;
}
.section--dark.bg-grid::before {
  background-image:
    linear-gradient(to right, rgba(143,186,244,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(143,186,244,.07) 1px, transparent 1px);
}

/* --------------------------------------------------------------------------
   7. BUTTONS
   One base, four variants. The hover is a left-to-right fill sweep plus a 1px
   lift and an arrow nudge — three small synchronised moves rather than one big
   one, which is what separates "engineered" from "bouncy".
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-pri);
  --btn-bg-hover: var(--c-pri-600);
  --btn-fg: #fff;
  --btn-bd: transparent;
  --btn-py: .85rem;
  --btn-px: 1.5rem;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-sm);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--d) var(--e-out),
    box-shadow var(--d) var(--e-out),
    border-color var(--d) var(--e-out),
    background-color var(--d) var(--e-out),
    color var(--d) var(--e-out);
}

/* The sweep. A separate layer so it can animate transform (compositor-only)
   instead of background-position, which would repaint every frame. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-bg-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-slow) var(--e-out);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }

.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-pri); }
.btn:active { transform: translateY(0); box-shadow: none; transition-duration: .06s; }

.btn .btn-ico { flex: none; width: 1.05em; height: 1.05em; }
.btn .btn-ico--arrow { transition: transform var(--d) var(--e-out); }
.btn:hover .btn-ico--arrow { transform: translateX(3px); }

/* Variants ---------------------------------------------------------------- */
.btn--green   { --btn-bg: var(--c-grn); --btn-bg-hover: var(--c-grn-600); }
.btn--green:hover { box-shadow: 0 6px 18px rgba(21,163,74,.24); }

.btn--dark    { --btn-bg: var(--c-ink); --btn-bg-hover: var(--c-ink-2); }
.btn--dark:hover { box-shadow: 0 6px 18px rgba(15,19,25,.22); }

/* Outline — hairline that fills with ink on hover */
.btn--outline {
  --btn-bg: transparent;
  --btn-bg-hover: var(--c-ink);
  --btn-fg: var(--c-ink);
  --btn-bd: var(--c-line-2);
}
.btn--outline:hover, .btn--outline:focus-visible { color: #fff; border-color: var(--c-ink); box-shadow: var(--sh-2); }

/* Outline on dark grounds */
.btn--outline-light {
  --btn-bg: transparent;
  --btn-bg-hover: #fff;
  --btn-fg: #fff;
  --btn-bd: rgba(255,255,255,.34);
}
.btn--outline-light:hover, .btn--outline-light:focus-visible { color: var(--c-ink); border-color: #fff; }

/* Quiet text button with an underline that grows from the left */
.btn--link {
  --btn-py: 0; --btn-px: 0;
  background: none; color: var(--c-pri); border: 0; overflow: visible;
}
.btn--link::before { display: none; }
.btn--link:hover { transform: none; box-shadow: none; color: var(--c-pri-600); }
.btn--link .btn-ico--arrow { transition: transform var(--d) var(--e-out); }
.btn--link:hover .btn-ico--arrow { transform: translateX(4px); }

/* Sizes ------------------------------------------------------------------- */
.btn--lg { --btn-py: 1.05rem; --btn-px: 1.9rem; font-size: var(--t-body); }
.btn--sm { --btn-py: .6rem;  --btn-px: 1.05rem; font-size: var(--t-xs); }
.btn--block { width: 100%; }

/* Below 420px stacked CTAs should fill the row rather than sit half-width */
@media (max-width: 460px) {
  .btn-row .btn { width: 100%; white-space: normal; text-align: center; }
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   8. BADGES / PILLS / TAGS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .34rem .68rem;
  border-radius: 999px;
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1;
  background: var(--c-pri-50);
  color: var(--c-pri-800);
  border: 1px solid var(--c-pri-100);
}
.badge--green { background: var(--c-grn-50); color: var(--c-grn-800); border-color: var(--c-grn-100); }
.badge--neutral { background: var(--c-surface-2); color: var(--c-muted); border-color: var(--c-line); }
.badge--dark { background: rgba(255,255,255,.08); color: var(--c-dark-ink); border-color: rgba(255,255,255,.16); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* Spec chip — the "48V / 30A" data pill */
.chip {
  display: inline-flex; align-items: baseline; gap: .3rem;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .02em;
  padding: .3rem .55rem;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-xs);
  background: var(--c-white);
  color: var(--c-ink-2);
}

/* --------------------------------------------------------------------------
   9. CARDS
   Hairline border, tiny radius, corner tick marks on the technical variant.
   The hover raises the card 3px and deepens the border — no colour splash.
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    transform var(--d) var(--e-out),
    box-shadow var(--d) var(--e-out),
    border-color var(--d) var(--e-out);
}
.card__body { padding: var(--s-6); display: flex; flex-direction: column; flex: 1; gap: var(--s-3); }
.card__title { font-size: var(--t-h4); font-weight: 800; color: var(--c-ink); letter-spacing: -.014em; }
.card__text { font-size: var(--t-sm); color: var(--c-muted); line-height: 1.65; }
.card__foot { margin-top: auto; padding-top: var(--s-4); }

.card--link:hover, .card--link:focus-within {
  transform: translateY(-3px);
  border-color: var(--c-line-strong);
  box-shadow: var(--sh-3);
}

/* Full-card click target that keeps the real link keyboard-focusable */
.card__stretch::after { content: ''; position: absolute; inset: 0; z-index: 1; }

/* Accent rule that draws across the card top on hover */
.card--rule::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-pri), var(--c-grn));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--e-out);
  z-index: 2;
}
.card--link.card--rule:hover::before,
.card--link.card--rule:focus-within::before { transform: scaleX(1); }

/* Engineering corner ticks — reads as a drawing callout box */
.card--ticked .tick {
  position: absolute; width: 9px; height: 9px; z-index: 2;
  border-color: var(--c-line-strong);
  transition: border-color var(--d) var(--e-out);
  pointer-events: none;
}
.card--ticked .tick--tl { top: 7px; left: 7px;  border-top: 1.5px solid; border-left: 1.5px solid; }
.card--ticked .tick--tr { top: 7px; right: 7px; border-top: 1.5px solid; border-right: 1.5px solid; }
.card--ticked .tick--bl { bottom: 7px; left: 7px;  border-bottom: 1.5px solid; border-left: 1.5px solid; }
.card--ticked .tick--br { bottom: 7px; right: 7px; border-bottom: 1.5px solid; border-right: 1.5px solid; }
.card--ticked:hover .tick { border-color: var(--c-pri); }

/* Icon plate inside cards */
.ico-plate {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  background: var(--c-pri-50);
  color: var(--c-pri);
  border: 1px solid var(--c-pri-100);
  flex: none;
  transition: background-color var(--d) var(--e-out), color var(--d) var(--e-out), border-color var(--d) var(--e-out);
}
.ico-plate svg { width: 22px; height: 22px; }
.ico-plate--green { background: var(--c-grn-50); color: var(--c-grn-800); border-color: var(--c-grn-100); }
.ico-plate--dark  { background: rgba(255,255,255,.06); color: var(--c-pri-300); border-color: rgba(255,255,255,.12); }
.card--link:hover .ico-plate { background: var(--c-pri); color: #fff; border-color: var(--c-pri); }
.card--link:hover .ico-plate--green { background: var(--c-grn); color: #fff; border-color: var(--c-grn); }

/* --------------------------------------------------------------------------
   10. TABLES — technical comparison
   -------------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  background: var(--c-white);
}
.spec-table { width: 100%; min-width: 620px; font-size: var(--t-sm); }
.spec-table th, .spec-table td {
  padding: .85rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  vertical-align: middle;
}
.spec-table thead th {
  background: var(--c-surface-2);
  color: var(--c-ink);
  font-weight: 800;
  font-size: var(--t-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--c-line-2);
}
/* First column is the spec name — sticky so the row stays identifiable while
   scrolling a wide table sideways on a phone. */
.spec-table tbody th {
  font-weight: 700;
  color: var(--c-ink-2);
  white-space: nowrap;
  background: var(--c-white);
  position: sticky; left: 0;
  border-right: 1px solid var(--c-line);
}
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table tbody tr:hover td,
.spec-table tbody tr:hover th { background: var(--c-pri-50); }
.spec-table td { font-family: var(--f-mono); font-size: .875rem; color: var(--c-body); }
.spec-table td.is-key { font-weight: 700; color: var(--c-pri-800); }

/* Definition list used on product spec sheets */
.dl-spec { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.dl-spec > div {
  display: grid;
  grid-template-columns: minmax(9rem, 40%) 1fr;
  gap: var(--s-4);
  padding: .8rem 0;
  border-bottom: 1px solid var(--c-line);
}
.dl-spec dt { font-size: var(--t-sm); font-weight: 700; color: var(--c-muted); }
.dl-spec dd { margin: 0; font-size: var(--t-sm); font-weight: 700; color: var(--c-ink); font-family: var(--f-mono); }

/* --------------------------------------------------------------------------
   11. FORMS
   -------------------------------------------------------------------------- */
.field { display: grid; gap: .4rem; }
.field > label, .form-label {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-ink-2);
}
.field .req { color: var(--c-red); }
.field .hint { font-size: var(--t-xs); color: var(--c-faint); }

.input, .select, .textarea,
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], input[type="search"], textarea, select {
  width: 100%;
  padding: .78rem .9rem;
  font-size: var(--t-sm);
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
  appearance: none;
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7785' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 16px;
  padding-right: 2.4rem;
}
input:hover, textarea:hover, select:hover { border-color: var(--c-line-strong); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--c-pri);
  box-shadow: 0 0 0 3px var(--c-pri-100);
}
::placeholder { color: var(--c-faint); opacity: 1; }

/* --------------------------------------------------------------------------
   12. SITE HEADER
   Fixed, white, hairline base. On scroll it gains a shadow and the bar tightens
   by 8px — a small "settled" cue rather than a hide/show jump.
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow var(--d) var(--e-out), background-color var(--d) var(--e-out);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: #fff; } }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--c-line), 0 6px 20px rgba(15,19,25,.06); }

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: var(--header-h);
  transition: height var(--d) var(--e-out);
}
.site-header.is-scrolled .header-bar { height: calc(var(--header-h) - 8px); }

/* Brand ------------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand img, .brand svg { height: 38px; width: auto; transition: height var(--d) var(--e-out); }
@media (min-width: 1024px) { .brand img, .brand svg { height: 40px; } }
.site-header.is-scrolled .brand img { height: 34px; }
@media (min-width: 1024px) { .site-header.is-scrolled .brand img { height: 40px; } }

/* Primary nav ------------------------------------------------------------- */
.nav-primary { display: none; }
@media (min-width: 1280px) { .nav-primary { display: block; } }

/* No gap: each link's own horizontal padding already separates the items, and
   nine 2px gaps was the last 18px standing between a 1280 laptop and the full
   desktop nav. */
.nav-primary > ul { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav-primary li { position: relative; }

.nav-primary a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .48rem .42rem;
  border-radius: var(--r-xs);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--c-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.nav-primary a:hover { color: var(--c-pri); background: var(--c-pri-50); }

/* Active-page underline that wipes in from the left */
.nav-primary > ul > li > a::after {
  content: '';
  position: absolute;
  left: .42rem; right: .42rem; bottom: -2px;
  height: 2px;
  background: var(--c-pri);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d) var(--e-out);
}
.nav-primary > ul > li.current-menu-item > a::after,
.nav-primary > ul > li.current-menu-ancestor > a::after,
.nav-primary > ul > li.current-page-ancestor > a::after,
.nav-primary > ul > li.is-active > a::after { transform: scaleX(1); }
.nav-primary > ul > li.current-menu-item > a,
.nav-primary > ul > li.current-menu-ancestor > a { color: var(--c-pri); }

.nav-caret { width: 12px; height: 12px; flex: none; margin-left: -.1rem; opacity: .55; transition: transform var(--d) var(--e-out); }
.nav-primary li:hover > a > .nav-caret,
.nav-primary li:focus-within > a > .nav-caret { transform: rotate(180deg); opacity: 1; }

/* Dropdown ---------------------------------------------------------------- */
.nav-primary .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -.35rem;
  min-width: 252px;
  padding: .5rem;
  margin: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--d) var(--e-out), transform var(--d) var(--e-out), visibility 0s linear var(--d);
  z-index: 10;
}
/* Invisible bridge so the pointer can cross the 10px gap without the menu closing */
.nav-primary .menu-item-has-children::after {
  content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 12px;
}
/* :focus-within also matches when the PARENT link itself has focus, which is what
   lets a keyboard user open the dropdown before tabbing into it. */
.nav-primary li:hover > .sub-menu,
.nav-primary li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity var(--d) var(--e-out), transform var(--d) var(--e-out), visibility 0s;
}
.nav-primary .sub-menu a {
  display: block;
  width: 100%;
  padding: .58rem .7rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-body);
  border-radius: var(--r-xs);
}
.nav-primary .sub-menu a:hover { color: var(--c-pri); background: var(--c-pri-50); transform: translateX(2px); }
.nav-primary .sub-menu a { transition: color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out); }

/* Header actions ---------------------------------------------------------- */
.header-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }
/* No arrow on the header CTA: it costs ~24px in the tightest row on the site,
   and the button already reads as an action. Body CTAs keep theirs. */
.header-actions .btn .btn-ico--arrow { display: none; }
.header-actions .btn { --btn-px: 1.15rem; gap: 0; }
.header-actions .btn { display: none; }
@media (min-width: 1280px) { .header-actions .btn { display: inline-flex; } }

.header-phone {
  display: none;
  align-items: center; gap: .45rem;
  font-size: .9rem; font-weight: 700;
  color: var(--c-ink-2); text-decoration: none;
  padding: .5rem .6rem; border-radius: var(--r-xs);
  transition: color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.header-phone:hover { color: var(--c-pri); background: var(--c-pri-50); }
.header-phone svg { width: 16px; height: 16px; flex: none; }
@media (min-width: 1500px) { .header-phone { display: inline-flex; } }

/* Hamburger --------------------------------------------------------------- */
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--c-ink);
  flex: none;
  transition: border-color var(--d) var(--e-out), background-color var(--d) var(--e-out);
}
.nav-toggle:hover { border-color: var(--c-line-strong); background: var(--c-surface); }
@media (min-width: 1280px) { .nav-toggle { display: none; } }

.nav-toggle .bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-toggle .bars span {
  position: absolute; left: 0; height: 2px; width: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform var(--d) var(--e-out), opacity var(--d-fast) var(--e-out), width var(--d) var(--e-out);
}
.nav-toggle .bars span:nth-child(1) { top: 0; }
.nav-toggle .bars span:nth-child(2) { top: 6px; width: 74%; }
.nav-toggle .bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   13. MOBILE DRAWER — slides in from the right
   -------------------------------------------------------------------------- */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(13,17,23,.5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d) var(--e-out), visibility 0s linear var(--d);
}
.drawer-scrim.is-open { opacity: 1; visibility: visible; transition: opacity var(--d) var(--e-out), visibility 0s; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 120;
  width: min(400px, 88vw);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--c-line);
  box-shadow: -18px 0 44px rgba(15,19,25,.16);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--d-slow) var(--e-in-out), visibility 0s linear var(--d-slow);
  overscroll-behavior: contain;
}
.drawer.is-open { transform: translateX(0); visibility: visible; transition: transform var(--d-slow) var(--e-in-out), visibility 0s; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-line);
  flex: none;
  min-height: var(--header-h);
}
.drawer__head img { height: 34px; width: auto; }
.drawer__close {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  transition: border-color var(--d) var(--e-out), background-color var(--d) var(--e-out), transform var(--d) var(--e-out);
}
.drawer__close:hover { background: var(--c-surface); border-color: var(--c-line-strong); transform: rotate(90deg); }
.drawer__close svg { width: 18px; height: 18px; }

.drawer__body { flex: 1; overflow-y: auto; padding: var(--s-4) var(--s-5) var(--s-7); -webkit-overflow-scrolling: touch; }

.drawer-nav, .drawer-nav ul { list-style: none; margin: 0; padding: 0; }
.drawer-nav > li { border-bottom: 1px solid var(--c-line); }
.drawer-nav > li:last-child { border-bottom: 0; }

.drawer-nav a {
  display: block;
  padding: .95rem .25rem;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--c-ink);
  text-decoration: none;
  transition: color var(--d-fast) var(--e-out), padding-left var(--d-fast) var(--e-out);
}
.drawer-nav a:hover, .drawer-nav a:focus-visible { color: var(--c-pri); padding-left: .6rem; }
.drawer-nav .current-menu-item > a, .drawer-nav .current-menu-ancestor > a { color: var(--c-pri); }

/* Row that pairs a link with its own expand toggle, so a parent page stays
   reachable instead of being hijacked into a pure accordion trigger. */
.drawer-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.drawer-row > a { flex: 1; }
.drawer-sub-toggle {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border-radius: var(--r-xs);
  color: var(--c-muted);
  transition: background-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.drawer-sub-toggle:hover { background: var(--c-surface-2); color: var(--c-pri); }
.drawer-sub-toggle svg { width: 16px; height: 16px; transition: transform var(--d) var(--e-out); }
.drawer-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.drawer-nav .sub-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d) var(--e-out);
}
.drawer-nav .sub-menu.is-open { grid-template-rows: 1fr; }
.drawer-nav .sub-menu > div { overflow: hidden; }
.drawer-nav .sub-menu a {
  padding: .62rem .25rem .62rem 1.05rem;
  font-size: .96rem;
  font-weight: 600;
  color: var(--c-muted);
  border-left: 2px solid var(--c-line);
}
.drawer-nav .sub-menu a:hover { color: var(--c-pri); border-left-color: var(--c-pri); padding-left: 1.35rem; }
.drawer-nav .sub-menu li:last-child a { padding-bottom: .95rem; }

.drawer__foot {
  flex: none;
  padding: var(--s-5);
  border-top: 1px solid var(--c-line);
  background: var(--c-surface);
  display: grid;
  gap: var(--s-3);
}
.drawer__contact { display: grid; gap: .55rem; }
.drawer__contact a {
  display: flex; align-items: center; gap: .55rem;
  font-size: var(--t-sm); font-weight: 700;
  color: var(--c-ink-2); text-decoration: none;
}
.drawer__contact a:hover { color: var(--c-pri); }
.drawer__contact svg { width: 16px; height: 16px; flex: none; color: var(--c-muted); }

/* Locks background scroll while the drawer is open */
body.drawer-open { overflow: hidden; }

/* Push page content clear of the fixed header */
.site-main { padding-top: var(--header-h); }
.site-main--flush { padding-top: 0; }

/* --------------------------------------------------------------------------
   14. SITE FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--c-dark);
  color: var(--c-dark-body);
  font-size: var(--t-sm);
  position: relative;
}
.site-footer a { color: var(--c-dark-body); text-decoration: none; }
.site-footer a:hover { color: #fff; }

/* Thin brand rule across the very top of the footer */
.site-footer::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--c-pri-800) 0%, var(--c-pri) 42%, var(--c-grn) 100%);
}

.footer-top { padding-block: clamp(2.75rem, 1.8rem + 4vw, 4.5rem); }

.footer-grid {
  display: grid;
  gap: var(--s-8) var(--s-7);
  grid-template-columns: 1fr;
}
@media (min-width: 560px)  { .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px)  { .footer-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1120px) { .footer-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1280px) { .footer-grid { grid-template-columns: 1.5fr repeat(5, minmax(0,1fr)); gap: var(--s-7) var(--s-6); } }

.footer-brand { display: grid; gap: var(--s-4); align-content: start; }
/* The logo is full-colour artwork on a light ground, so on the dark footer it
   sits on its own white plate — the same treatment the printed brochure uses. */
.footer-logo {
  display: inline-flex;
  background: #fff;
  padding: .6rem .8rem;
  border-radius: var(--r-sm);
  width: fit-content;
}
.footer-logo img { height: 40px; width: auto; }
.footer-brand p { color: var(--c-dark-body); line-height: 1.7; max-width: 38ch; }

.footer-col h3 {
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--s-4);
}
.footer-col ul { display: grid; gap: .55rem; list-style: none; padding: 0; margin: 0; }
.footer-col a {
  display: inline-block;
  position: relative;
  transition: color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.footer-col a:hover { transform: translateX(3px); }

.footer-contact { display: grid; gap: .8rem; }
.footer-contact li { display: flex; gap: .65rem; align-items: flex-start; }
.footer-contact svg { width: 16px; height: 16px; flex: none; margin-top: .25rem; color: var(--c-pri-300); }
.footer-contact .phones { display: grid; gap: .2rem; }

/* Certification strip */
.footer-certs {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding-block: var(--s-6);
  border-top: 1px solid var(--c-dark-line);
  border-bottom: 1px solid var(--c-dark-line);
  align-items: center;
}
.footer-certs .label {
  font-size: var(--t-label); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-faint); margin-right: var(--s-3);
}
.cert-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .75rem;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .03em;
  color: var(--c-dark-ink);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--c-dark-line);
  border-radius: var(--r-xs);
  transition: border-color var(--d) var(--e-out), background-color var(--d) var(--e-out);
}
.cert-chip:hover { border-color: var(--c-pri); background: rgba(17,87,199,.14); }

/* Social */
.footer-social { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.social-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--c-dark-line);
  border-radius: var(--r-sm);
  color: var(--c-dark-body);
  transition: transform var(--d) var(--e-out), border-color var(--d) var(--e-out), background-color var(--d) var(--e-out), color var(--d) var(--e-out);
}
.social-btn svg { width: 17px; height: 17px; }
.social-btn:hover { color: #fff; border-color: var(--c-pri); background: var(--c-pri); transform: translateY(-2px); }

.footer-bottom {
  padding-block: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  align-items: center; justify-content: space-between;
  font-size: var(--t-xs);
  color: var(--c-faint);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); list-style: none; margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   15. CONTEXTUAL WHATSAPP / FLOATING ACTIONS
   Not a bare floating icon — it expands to offer the intent-specific messages.
   -------------------------------------------------------------------------- */
.wa-dock {
  position: fixed;
  right: clamp(.85rem, 2vw, 1.5rem);
  bottom: clamp(.85rem, 2vw, 1.5rem);
  z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
}
.wa-panel {
  width: min(290px, calc(100vw - 2rem));
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: var(--s-3);
  display: grid; gap: .3rem;
  transform-origin: bottom right;
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.96);
  transition: opacity var(--d) var(--e-out), transform var(--d) var(--e-spring), visibility 0s linear var(--d);
}
.wa-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity var(--d) var(--e-out), transform var(--d) var(--e-spring), visibility 0s; }
.wa-panel__head { padding: .5rem .6rem .35rem; }
.wa-panel__head strong { display: block; font-size: var(--t-sm); color: var(--c-ink); }
.wa-panel__head span { font-size: var(--t-xs); color: var(--c-faint); }
.wa-opt {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600;
  color: var(--c-ink-2); text-decoration: none;
  transition: background-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.wa-opt:hover { background: var(--c-grn-50); color: var(--c-grn-800); }
.wa-opt svg { width: 16px; height: 16px; flex: none; color: var(--c-grn); }

.wa-fab {
  display: inline-flex; align-items: center; gap: .55rem;
  height: 54px; padding: 0 1.05rem;
  border-radius: 999px;
  background: var(--c-grn);
  color: #fff;
  font-size: var(--t-sm); font-weight: 800;
  box-shadow: 0 8px 22px rgba(21,163,74,.34);
  transition: transform var(--d) var(--e-out), box-shadow var(--d) var(--e-out), background-color var(--d) var(--e-out);
}
.wa-fab:hover { transform: translateY(-2px); background: var(--c-grn-600); box-shadow: 0 12px 28px rgba(21,163,74,.4); }
.wa-fab svg { width: 24px; height: 24px; flex: none; }
.wa-fab .wa-fab__label { display: none; }
@media (min-width: 640px) { .wa-fab .wa-fab__label { display: inline; } }

/* --------------------------------------------------------------------------
   16. UTILITIES
   -------------------------------------------------------------------------- */
.u-center { text-align: center; }
.u-mono { font-family: var(--f-mono); }
.u-nowrap { white-space: nowrap; }
.u-hide { display: none !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-4 { margin-top: var(--s-4); }
.u-mt-6 { margin-top: var(--s-6); }
.u-mt-7 { margin-top: var(--s-7); }
.u-mt-8 { margin-top: var(--s-8); }
.u-mt-9 { margin-top: var(--s-9); }
.u-measure { max-width: 68ch; }
.u-measure-sm { max-width: 54ch; }

/* Accent word inside a heading */
.u-accent { color: var(--c-pri); }
.u-accent-grn { color: var(--c-grn-800); }
/* Underscore-marked keyword — a drawn highlight rather than a highlighter block */
.u-mark {
  background-image: linear-gradient(transparent 62%, var(--c-grn-100) 62%);
  padding-inline: .1em;
}

/* --------------------------------------------------------------------------
   17. SCROLL REVEAL
   GSAP drives these when it loads. The pre-state lives behind .js-anim so that
   without JS (or if GSAP fails) content is simply visible — never stranded at
   opacity 0. jrp-anim.js adds .js-anim to <html> only once GSAP is confirmed.
   -------------------------------------------------------------------------- */
.js-anim [data-anim] { opacity: 0; will-change: transform, opacity; }
.js-anim [data-anim="up"]    { transform: translateY(26px); }
.js-anim [data-anim="fade"]  { transform: none; }
.js-anim [data-anim="scale"] { transform: scale(.96); }

/* Below 900px the sideways variants stage vertically instead. A -26px/+26px
   pre-reveal offset on a full-width panel sits outside the viewport and gives
   the page a few pixels of horizontal scroll until the reveal fires. */
.js-anim [data-anim="left"],
.js-anim [data-anim="right"] { transform: translateY(20px); }
@media (min-width: 900px) {
  .js-anim [data-anim="left"]  { transform: translateX(-26px); }
  .js-anim [data-anim="right"] { transform: translateX(26px); }
}
[data-anim].is-revealed { will-change: auto; }

/* --------------------------------------------------------------------------
   18. REDUCED MOTION
   Two layers of defence: this block flattens every CSS transition/animation,
   and jrp-anim.js checks the same media query before creating any GSAP tween.
   Transitions are neutralised rather than removed so state changes still land
   instantly and nothing is left mid-animation.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Anything staged for a GSAP reveal must be visible immediately */
  .js-anim [data-anim] { opacity: 1 !important; transform: none !important; }
  /* Suppress purely decorative movement */
  .btn:hover, .card--link:hover, .social-btn:hover, .wa-fab:hover,
  .footer-col a:hover, .drawer__close:hover { transform: none !important; }
  .btn::before { transition: none !important; }
  .marquee__track { animation: none !important; }
}

/* --------------------------------------------------------------------------
   19. PRINT — datasheets and spec tables should print cleanly
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .drawer, .drawer-scrim, .wa-dock, .skip-link, .site-footer .footer-certs { display: none !important; }
  .site-main { padding-top: 0; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  .table-scroll { overflow: visible; border: 0; }
  .spec-table { min-width: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .bg-grid::before { display: none; }
}

/* --------------------------------------------------------------------------
   20. INTERIOR PAGE FURNITURE
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: clamp(2.25rem, 1.4rem + 3.4vw, 4rem) clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}
.page-hero__inner { max-width: 62ch; }
.page-hero h1 { margin-top: var(--s-3); }
.page-hero .lead { margin-top: var(--s-4); }

/* Breadcrumbs */
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .3rem .1rem;
  list-style: none; margin: 0; padding: 0;
  font-size: var(--t-xs);
  color: var(--c-faint);
}
.crumbs li { display: inline-flex; align-items: center; }
.crumbs a { color: var(--c-muted); text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--c-pri); }
.crumbs .crumb-sep { margin-inline: .28rem; opacity: .5; }
.crumbs [aria-current="page"] { color: var(--c-ink-2); font-weight: 700; }

/* Long-form content */
.prose { max-width: var(--wrap-text); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2.2em; font-size: var(--t-h2); }
.prose h3 { margin-top: 1.8em; font-size: var(--t-h3); }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: .45em; }
.prose img { border-radius: var(--r); border: 1px solid var(--c-line); }
.prose blockquote {
  border-left: 3px solid var(--c-pri);
  padding: .35rem 0 .35rem 1.15rem;
  color: var(--c-ink-2);
  font-size: var(--t-lead);
}
.prose table { width: 100%; font-size: var(--t-sm); }
.prose th, .prose td { padding: .7rem .9rem; border-bottom: 1px solid var(--c-line); text-align: left; }

/* Coming-soon placeholder */
.soon { max-width: 60ch; }
.soon__badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: var(--c-amber-50);
  border: 1px solid #f3e2c6;
  color: var(--c-amber);
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: var(--s-5);
}
.soon h2 { font-size: var(--t-h2); }
.soon .lead { margin-top: var(--s-4); }

.soon-related__title {
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-faint);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: var(--s-6);
}
.soon-link { text-decoration: none; }
.soon-link .card__body { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5); }
.soon-link .card__title { font-size: 1rem; }
.soon-link__ico { color: var(--c-faint); flex: none; transition: transform var(--d) var(--e-out), color var(--d) var(--e-out); }
.soon-link:hover .soon-link__ico { color: var(--c-pri); transform: translate(3px, -3px); }

/* Empty states */
.empty-state { max-width: 56ch; margin-inline: auto; text-align: center; }
.empty-state > svg { margin: 0 auto var(--s-5); color: var(--c-faint); }
.empty-state .lead { margin-top: var(--s-4); }

/* Search form */
.search-form__row {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .35rem .35rem .85rem;
  background: #fff;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r);
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.search-form__row:focus-within { border-color: var(--c-pri); box-shadow: 0 0 0 3px var(--c-pri-100); }
.search-form__ico { color: var(--c-faint); flex: none; }
.search-form input[type="search"] { border: 0; padding: .5rem 0; background: none; flex: 1; min-width: 0; }
.search-form input[type="search"]:focus { box-shadow: none; }

/* Pagination */
.pagination { margin-top: var(--s-9); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.pagination .page-numbers {
  display: inline-grid; place-items: center;
  min-width: 42px; height: 42px; padding-inline: .7rem;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 700; color: var(--c-ink-2); text-decoration: none;
  transition: border-color var(--d) var(--e-out), background-color var(--d) var(--e-out), color var(--d) var(--e-out);
}
.pagination .page-numbers:hover { border-color: var(--c-pri); color: var(--c-pri); background: var(--c-pri-50); }
.pagination .page-numbers.current { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

/* Placeholder spec value */
.spec-tbc {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: var(--t-xs);
  color: var(--c-amber);
  background: var(--c-amber-50);
  padding: .12rem .45rem;
  border-radius: var(--r-xs);
  border: 1px solid #f3e2c6;
  cursor: help;
}

/* Card media */
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-surface-2); border-bottom: 1px solid var(--c-line); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--e-out); }
.card--link:hover .card__media img { transform: scale(1.035); }

/* Alpine: hide templated regions until the component has initialised, so the
   page never flashes every tab panel at once on a slow connection. */
[x-cloak] { display: none !important; }