/*!
 * Theme Name: Upton Industries Dev
 * Version: 1.0-dev
 */

/* ==========================================================================
   Fonts — self-hosted, latin subset (IBM Plex Sans + Lilex, SIL OFL 1.1)
   ========================================================================== */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-400.woff2") format("woff2");
  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: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-500.woff2") format("woff2");
  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: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-600.woff2") format("woff2");
  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: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-700.woff2") format("woff2");
  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;
}
/* Metric-matched fallback shown until IBM Plex Sans arrives: local Arial (or
   its metric twin Liberation Sans) scaled per weight to Plex's average glyph
   width and line metrics, so text doesn't rewrap or change height on swap.
   Values computed with fontTools from the woff2 files above against Arial;
   400 is tuned to the site's body copy (measured Plex/Arial width 101.2%;
   it halved the font-swap layout shift across key pages at 320-1440px) and
   500 to the nav, breadcrumb and catalog chip labels (the wrapped chip rows
   on /applications/ are the most sensitive to width). size-adjust also
   scales the ascent/descent overrides, so they are divided by it.
   Same unicode-range as the Plex faces, so glyphs Plex's latin subset lacks
   (arrows, for example) keep falling through to the system font instead of
   rendering in Arial for the life of the page. */
@font-face {
  font-family: "IBM Plex Sans Fallback";
  font-style: normal;
  font-weight: 400;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
  size-adjust: 101.2%;
  ascent-override: 101.3%;
  descent-override: 27.2%;
  line-gap-override: 0%;
  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: "IBM Plex Sans Fallback";
  font-style: normal;
  font-weight: 500;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
  size-adjust: 103%;
  ascent-override: 99.5%;
  descent-override: 26.7%;
  line-gap-override: 0%;
  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: "IBM Plex Sans Fallback";
  font-style: normal;
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
  size-adjust: 96.4%;
  ascent-override: 106.3%;
  descent-override: 28.5%;
  line-gap-override: 0%;
  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: "IBM Plex Sans Fallback";
  font-style: normal;
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
  size-adjust: 97.7%;
  ascent-override: 104.9%;
  descent-override: 28.1%;
  line-gap-override: 0%;
  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: "Lilex";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/lilex-400.woff2") format("woff2");
  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: "Lilex";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/lilex-500.woff2") format("woff2");
  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;
}

/* ==========================================================================
   CSS CUSTOM PROPERTIES — Design Tokens
   KDL v1.1 — Roseville variant. See /KDL_v1.md for full spec.
   ========================================================================== */
:root {
  /* ----------------------------------------------------------------------
     KDL §1.1 — Color scales
     ---------------------------------------------------------------------- */

  /* Blue (Kolene/Detroit reference scale — not used as primary in upton-dev,
     but defined so kolene-targeted markup can render correctly if ever pasted
     into this theme). */
  --kdl-blue-50:  #e6f4fb;
  --kdl-blue-100: #c0e1f4;
  --kdl-blue-200: #7ec3e8;
  --kdl-blue-300: #3fa5db;
  --kdl-blue-400: #1789c8;
  --kdl-blue-500: #0078b9;
  --kdl-blue-600: #015e92;
  --kdl-blue-700: #0d4e73;
  --kdl-blue-800: #093753;
  --kdl-blue-900: #061f33;

  /* Red (Roseville/Upton — primary brand) */
  --kdl-red-50:  #fbeaeb;
  --kdl-red-100: #f4c4c7;
  --kdl-red-200: #e89096;
  --kdl-red-300: #d95c64;
  --kdl-red-400: #d23740;
  --kdl-red-500: #CE2029;  /* Primary red — Upton brand */
  --kdl-red-600: #B51B23;  /* Hover */
  --kdl-red-700: #8b1318;
  --kdl-red-800: #5e0c10;
  --kdl-red-900: #310608;

  /* KDL canonical neutral scale (cooler than upton's legacy --gray-*).
     Kept under the --kdl-gray-* namespace so the legacy --gray-* values
     below continue resolving to their original hex values. */
  --kdl-gray-0:   #ffffff;
  --kdl-gray-50:  #f4f6f8;
  --kdl-gray-100: #e7ebef;
  --kdl-gray-200: #cfd6dd;
  --kdl-gray-300: #a3aeb8;
  --kdl-gray-400: #6c7682;
  --kdl-gray-500: #444c56;
  --kdl-gray-600: #2f353d;
  --kdl-gray-700: #1f242b;
  --kdl-gray-800: #14181d;
  --kdl-gray-900: #0a0d11;

  /* Copper — signal/hover/active state. Does NOT flip with brand accent. */
  --kdl-copper-300: #f0a370;
  --kdl-copper-500: #c2632a;
  --kdl-copper-700: #7e3d14;

  /* Status (do NOT flip with brand) */
  --kdl-success: #1f8a4c;
  --kdl-warn:    #c98a05;
  --kdl-danger:  #b3261e;
  --kdl-info:    var(--kdl-blue-500);

  /* ----------------------------------------------------------------------
     Brand accent layer — Roseville maps accent → red.
     Component CSS references --kdl-accent-* (never --kdl-red-* directly)
     so the same primitives can render in the Detroit/blue variant by
     swapping the four lines below.
     ---------------------------------------------------------------------- */
  --kdl-accent-50:  var(--kdl-red-50);
  --kdl-accent-200: var(--kdl-red-200);
  --kdl-accent-500: var(--kdl-red-500);
  --kdl-accent-600: var(--kdl-red-600);
  --kdl-accent-700: var(--kdl-red-700);

  /* ----------------------------------------------------------------------
     KDL §1.2 — Semantic colors
     ---------------------------------------------------------------------- */
  --kdl-surface-base:    var(--kdl-gray-0);
  --kdl-surface-raised:  var(--kdl-gray-50);
  --kdl-surface-sunken:  var(--kdl-gray-100);
  --kdl-surface-inverse: var(--kdl-gray-800);
  --kdl-surface-accent:  var(--kdl-accent-700);

  --kdl-text-strong:  var(--kdl-gray-800);
  --kdl-text-default: var(--kdl-gray-600);
  --kdl-text-muted:   var(--kdl-gray-400);
  --kdl-text-on-dark: var(--kdl-gray-50);
  --kdl-text-accent:  var(--kdl-accent-600);

  --kdl-border-subtle:  var(--kdl-gray-100);
  --kdl-border-default: var(--kdl-gray-200);
  --kdl-border-strong:  var(--kdl-gray-400);
  --kdl-border-accent:  var(--kdl-accent-500);

  /* ----------------------------------------------------------------------
     KDL §1.3 — Typography
     Roseville/Upton uses the canonical KDL typography stack: IBM Plex Sans
     for body/headings, Lilex for mono labels. Both are self-hosted
     (@font-face at the top of this file). The body rule below applies the
     IBM Plex stylistic sets ("ss01", "cv02") per KDL spec.
     ---------------------------------------------------------------------- */
  --kdl-font-sans: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kdl-font-mono: "Lilex", ui-monospace, SFMono-Regular, Menlo, monospace;

  --kdl-fs-caption: 12px;
  --kdl-fs-small:   14px;
  --kdl-fs-body:    16px;
  --kdl-fs-lead:    19px;
  --kdl-fs-h4:      22px;
  --kdl-fs-h3:      28px;
  --kdl-fs-h2:      38px;
  --kdl-fs-h1:      52px;
  --kdl-fs-display: 72px;
  --kdl-fs-eyebrow: 12px;
  --kdl-fs-mono-sm: 13px;
  --kdl-fs-mono:    14px;

  /* ----------------------------------------------------------------------
     KDL §1.4 — Spacing (4px base)
     ---------------------------------------------------------------------- */
  --kdl-space-0:  0;
  --kdl-space-1:  4px;
  --kdl-space-2:  8px;
  --kdl-space-3:  12px;
  --kdl-space-4:  16px;
  --kdl-space-5:  24px;
  --kdl-space-6:  32px;
  --kdl-space-7:  48px;
  --kdl-space-8:  64px;
  --kdl-space-9:  96px;
  --kdl-space-10: 128px;

  /* ----------------------------------------------------------------------
     KDL §1.5 — Radius
     ---------------------------------------------------------------------- */
  --kdl-radius-none: 0;
  --kdl-radius-xs:   2px;
  --kdl-radius-sm:   4px;
  --kdl-radius-md:   6px;
  --kdl-radius-pill: 999px;

  /* ----------------------------------------------------------------------
     KDL §1.6 — Elevation
     ---------------------------------------------------------------------- */
  --kdl-elev-0: none;
  --kdl-elev-1: 0 1px 0 0 var(--kdl-border-default);
  --kdl-elev-2: 0 1px 2px rgba(10,13,17,.06), 0 0 0 1px var(--kdl-border-subtle);
  --kdl-elev-3: 0 4px 12px rgba(10,13,17,.08), 0 0 0 1px var(--kdl-border-subtle);
  --kdl-elev-4: 0 12px 32px rgba(10,13,17,.12);

  /* ----------------------------------------------------------------------
     KDL §1.7 — Motion
     ---------------------------------------------------------------------- */
  --kdl-dur-fast: 120ms;
  --kdl-dur-base: 200ms;
  --kdl-dur-slow: 360ms;

  --kdl-ease-standard:   cubic-bezier(.2, 0, .2, 1);
  --kdl-ease-emphasized: cubic-bezier(.2, 0,  0, 1);
  --kdl-ease-decel:      cubic-bezier( 0, 0, .2, 1);

  /* ----------------------------------------------------------------------
     KDL §1.8 — Chevron icon token (data-URI, painted via mask + currentColor)
     ---------------------------------------------------------------------- */
  --kdl-chev-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>");

  /* ======================================================================
     Legacy upton-dev tokens — kept for backward compat with the pre-KDL
     CSS below this block. Where the legacy value matches a KDL
     token, the alias points at the KDL token (single source of truth).
     Where values diverge (grays, shadows, easing, durations), the legacy
     value is preserved as a literal so existing rules resolve identically.
     New rules should reference the --kdl-* tokens above instead.
     ====================================================================== */

  /* Brand red — identical values; alias to KDL */
  --upton-red:       var(--kdl-red-500);
  --upton-red-hover: var(--kdl-red-600);
  --upton-red-light: rgba(206, 32, 41, 0.08);
  --upton-red-focus: rgba(206, 32, 41, 0.15);

  /* Legacy gray scale — preserved as literals (warmer than KDL grays) */
  --gray-50:  #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;

  /* Typography — font-sans aliases to KDL (now IBM Plex Sans, per KDL spec);
     leading values are upton-specific, KDL has no equivalent. */
  --font-sans:       var(--kdl-font-sans);
  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* Shadows — preserved as literals (KDL elevations add a 1px outline that
     would visibly change existing shadow consumers). */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Transitions — preserved as literals (curve + durations differ from KDL) */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   150ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;

  /* Radius — sm/md identical to KDL → alias; lg has no KDL equivalent */
  --radius-sm: var(--kdl-radius-sm);
  --radius-md: var(--kdl-radius-md);
  --radius-lg: 8px;

  /* Footer (upton-dev specific), on KDL tokens. */
  --footer-bg:         var(--kdl-surface-raised);
  --footer-text:       var(--kdl-text-default);
  --footer-text-muted: var(--kdl-gray-500);
  --footer-accent:     var(--kdl-copper-500);
  --footer-border:     var(--kdl-border-subtle);
  --footer-spacing:    clamp(40px, 5vw, 64px);
  --footer-column-gap: clamp(24px, 3vw, 48px);

  /* Page rhythm (upton-dev) — the vertical distances every template shares,
     so the gap under the page header, between blocks and above the footer
     reads the same on every page. */
  --upton-page-top:    clamp(40px, 5vw, 64px);   /* page header → first content */
  --upton-page-end:    clamp(64px, 8vw, 104px);  /* last content → footer or CTA band */
  --upton-block-gap:   clamp(40px, 4.5vw, 56px); /* between blocks inside a page */
  --upton-section-gap: clamp(64px, 8vw, 104px);  /* between homepage sections */

  /* Long-form copy: ~75 characters a line at the prose size. */
  --upton-prose-size:  1.0625rem;
  --upton-measure:     42rem;
  --upton-rail:        15rem;                    /* data-sheet heading column */
  --upton-rail-gap:    clamp(40px, 4vw, 64px);

  /* ----------------------------------------------------------------------
     Heat ramp (Roseville addendum to KDL §1.1). Red is a temperature, not a
     highlighter: Upton red is step 3, cherry heat, and KDL copper sits
     between cherry and orange. Rules: heat steps 4-8 are never text on a
     light surface (heat-5 is 3.67:1 on white); heat is never status UI; it
     marks temperature, hover/focus and one hot moment per page. Red is for
     primary actions and the brand mark, copper is the interactive signal,
     Kolene blue marks the salt handoff only.
     ---------------------------------------------------------------------- */
  --upton-heat-1: var(--kdl-red-800);      /* dull red */
  --upton-heat-2: var(--kdl-red-700);      /* blood red */
  --upton-heat-3: var(--kdl-red-500);      /* cherry = Upton red */
  --upton-heat-4: var(--kdl-copper-500);   /* copper */
  --upton-heat-5: #e8541e;                 /* orange */
  --upton-heat-6: #f5a13a;                 /* yellow-orange */
  --upton-heat-7: #ffd98a;                 /* yellow */
  --upton-heat-8: #fff6e5;                 /* white heat */
  --upton-heat-bar: linear-gradient(90deg, var(--upton-heat-1), var(--upton-heat-3) 45%, var(--upton-heat-4) 70%, var(--upton-heat-5) 85%, var(--upton-heat-6));
  --upton-heat-bar-y: linear-gradient(180deg, var(--upton-heat-3), var(--upton-heat-4) 55%, var(--upton-heat-6));

  /* Temper colours, for process scales. */
  --upton-temper-straw:  var(--kdl-warn);
  --upton-temper-bronze: var(--kdl-copper-700);
  --upton-temper-blue:   var(--kdl-blue-700);

  /* Surfaces: warm black for the footer bar, Kolene blue for salt. */
  --upton-furnace-900: #120d0b;
  --upton-salt:        var(--kdl-blue-600);
  /* KDL 48px grid, for dark surfaces. */
  --upton-grid-dark:
    linear-gradient(to right, rgba(163, 174, 184, 0.075) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(to bottom, rgba(163, 174, 184, 0.075) 1px, transparent 1px) 0 0 / 48px 48px;

  /* Heat motion: steel heats up fast and cools slowly. */
  --upton-heat-rise:      360ms;
  --upton-heat-rise-ease: cubic-bezier(.2, .6, .35, 1);
  --upton-heat-cool:      650ms;
  --upton-heat-cool-ease: cubic-bezier(.3, .7, .3, 1);
}

/* One registered number drives every hot surface: 0 = cold, 1 = hot.
   Components set --heat: 1 on hover (real pointers only) and keyboard
   focus, and transition it: fast up, slow down. Without @property support
   the value snaps, which is fine. */
@property --heat {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Colours derived from --heat along the same stops as --upton-heat-bar:
   dull red (0) -> cherry (.45) -> copper (.7) -> orange (.85) ->
   yellow-orange (1). Pale yellow is left out: it vanishes on white. */
.upton-heat,
.product-card,
.applications-finder__link,
.catalog-toolbar__chip,
.kdl-btn {
  --heat-c: color-mix(in oklab, var(--upton-heat-6) clamp(0%, calc((var(--heat) - .85) * 666.7%), 100%),
            color-mix(in oklab, var(--upton-heat-5) clamp(0%, calc((var(--heat) - .7) * 666.7%), 100%),
            color-mix(in oklab, var(--upton-heat-4) clamp(0%, calc((var(--heat) - .45) * 400%), 100%),
            color-mix(in oklab, var(--upton-heat-3) clamp(0%, calc(var(--heat) * 222.3%), 100%), var(--upton-heat-1)))));
  /* Bars stay full length while they glow, then retract as they dull. */
  --heat-len: min(1, calc(var(--heat) * 1.5));
  --heat-glow: color-mix(in srgb, var(--heat-c) calc(var(--heat) * 35%), transparent);
  /* A copper edge that climbs to orange and yellow-orange. */
  --heat-edge: color-mix(in oklab, var(--upton-heat-6) clamp(0%, calc((var(--heat) - .5) * 200%), 100%),
               color-mix(in oklab, var(--upton-heat-5) clamp(0%, calc(var(--heat) * 200%), 100%), var(--kdl-copper-500)));
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Author display rules must never un-hide [hidden] elements. Scripts remove
   the attribute before animating (mega panel, drawer, catalog empty state). */
[hidden] {
  display: none !important;
}
html {
  /* Keep focused elements and anchor targets clear of the fixed/sticky header. */
  scroll-padding-top: 64px;
}
@media screen and (min-width: 992px) {
  html {
    scroll-padding-top: 136px;
  }
  html:has(> body.admin-bar) {
    scroll-padding-top: 168px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: #fff;
  color: var(--gray-900);
  font: 1rem/var(--leading-relaxed) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  margin: 0 0 1rem;
}
h1 {
  font-size: 1.75rem;
  line-height: var(--leading-tight);
}
h2 {
  font-size: 1.25rem;
}
address {
  font-style: normal;
}
hr {
  background: var(--kdl-border-default);
  border: none;
  clear: both;
  display: block;
  height: 1px;
  margin: var(--upton-block-gap) 0;
}
img {
  height: auto;
  max-width: 100%;
}
img.aligncenter {
  display: block;
  margin: 0 auto;
}
ol ol li {
  list-style-type: lower-alpha;
}
p {
  margin: 25px 0;
}
a img {
  border: none;
}
/* Base link colours stay at element specificity so component rules win. */
a {
  color: var(--upton-red);
}
a:where(:hover, :active, :focus) {
  color: var(--gray-900);
}

/* Global focus states: KDL §5.1 copper, the interactive signal. Red and
   dark surfaces override this with white or copper-300. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--kdl-copper-500);
  outline-offset: 2px;
}
a.button {
  display: inline-block;
}
.aligncenter {
  text-align: center;
}
.aligncenter div,
.aligncenter table {
  margin: 0 auto;
}
.alignleft {
  float: left;
  margin: 0 25px 25px 0;
}
.alignright {
  float: right;
  margin: 0 0 25px 25px;
}
.clear {
  clear: both;
}
.entry-content > p:first-child,
.entry-content > ul:first-child {
  margin-top: 0;
}
.entry-content > p:last-child,
.entry-content > ul:last-child {
  margin-bottom: 0;
}
.entry-content iframe {
  max-width: 100%;
}
.entry-footer {
  clear: both;
  display: block;
  font-size: 12px;
}
.entry-title {
  margin-bottom: 0;
}
.icon:not(.fa) {
  fill: currentColor; /* SVG icons (pagination arrows) take the link colour. */
  height: 20px;
  width: 20px;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.skip-link.screen-reader-text:focus {
  background: var(--kdl-surface-base);
  border-radius: var(--kdl-radius-sm);
  box-shadow: var(--kdl-elev-3);
  clip: auto;
  clip-path: none;
  color: var(--kdl-text-strong);
  font: 600 var(--kdl-fs-small) / 1.2 var(--kdl-font-sans);
  height: auto;
  left: var(--kdl-space-2);
  margin: 0;
  outline: 2px solid var(--kdl-copper-500);
  outline-offset: 2px;
  overflow: visible;
  padding: var(--kdl-space-3) var(--kdl-space-4);
  position: fixed !important;
  text-decoration: none;
  top: var(--kdl-space-2);
  width: auto;
  z-index: 100000;
}
.admin-bar .skip-link.screen-reader-text:focus {
  top: calc(32px + var(--kdl-space-2));
}
@media screen and (max-width: 782px) {
  .admin-bar .skip-link.screen-reader-text:focus {
    top: calc(46px + var(--kdl-space-2));
  }
}
/* The skip-link target is focused programmatically; it needs no ring. */
#main:focus {
  outline: none;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap {
  display: flow-root;
  margin: 0 auto;
  max-width: 1320px;
  /* Clip (not hidden) so fixed-width third-party widgets such as the
     300px Turnstile box can't widen the page, without making .wrap a
     scroll container. Layout itself must not rely on this. */
  overflow-x: hidden;
  overflow-x: clip;
  padding: 0 24px;
}
/* The footer sits at the bottom of the window even when a page is short
   (404, empty search). */
#page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  width: 100%;
}
#content {
  clear: both;
  flex: 1 0 auto;
}
/* Every content template opens and closes with the same distances: page
   header → content, content → footer. Blocks inside set no outer margins. */
#primary {
  padding: var(--upton-page-top) 0 var(--upton-page-end);
}

/* ==========================================================================
   Site header — mobile bar (<992px). Desktop bar, mega panel and drawer live
   in assets/css/components/mega-menu.css.
   ========================================================================== */
#masthead {
  background: #fff;
  width: 100%;
}
@media screen and (max-width: 991px) {
  /* Reserve the height of the fixed mobile bar. */
  #masthead {
    padding-top: 48px;
  }
}
/* White like the desktop header, with the U monogram and a 3px heat bar
   along its bottom edge. */
#mobile-bar {
  background: var(--kdl-surface-base);
  box-shadow: 0 1px 0 rgba(10, 13, 17, 0.06);
  color: var(--kdl-text-strong);
  font-weight: 600;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
}
#mobile-bar::after {
  background: var(--upton-heat-bar);
  bottom: 0;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
}
.admin-bar #mobile-bar {
  top: var(--wp-admin--admin-bar--height, 0px);
}
@media (min-width: 992px) {
  #mobile-bar {
    display: none;
  }
}
#mobile-bar .wrap {
  align-items: center;
  display: flex;
  gap: 16px;
  height: 48px;
  justify-content: space-between;
  max-width: 100%;
  padding: 0 12px 3px 20px;
}
#mobile-bar .mobile-wordmark {
  align-items: center;
  color: var(--kdl-text-strong);
  display: inline-flex;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
}
#mobile-bar .mobile-wordmark__u {
  flex: none;
  height: 26px;
  width: auto;
}
#mobile-bar .mobile-wordmark__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}
#mobile-bar .mobile-wordmark:hover .mobile-wordmark__name {
  text-decoration: underline;
  text-decoration-color: var(--kdl-copper-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
#mobile-bar .mobile-bar__actions {
  align-items: center;
  display: flex;
  gap: 4px;
}
#mobile-bar .mobile-bar__search,
#mobile-bar .menu-icon {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--kdl-radius-sm);
  color: var(--kdl-text-strong);
  cursor: pointer;
  display: inline-flex;
  font: 600 14px/1 var(--kdl-font-sans);
  gap: 8px;
  justify-content: center;
  letter-spacing: 0.04em;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  text-transform: uppercase;
}
#mobile-bar .mobile-bar__search:hover,
#mobile-bar .menu-icon:hover {
  background: var(--kdl-gray-50);
}

/* ==========================================================================
   Content — prose rhythm and the data-sheet layout
   Page bodies are long runs of <h2> + <p> product literature. A heading sits
   closer to its own text than to the section before it, copy keeps a
   readable measure, and from 1000px each section's heading moves into a
   left rail beside its text, the way a manufacturer's data sheet is set.
   Flow containers: the content itself and Column Shortcodes columns
   (.content-column only renders inside .entry-content).
   ========================================================================== */
.entry-content {
  color: var(--kdl-text-default);
  font-size: var(--upton-prose-size);
  line-height: 1.65;
}
:is(.entry-content, .content-column) > :where(p, ul, ol, dl, blockquote, pre, table, figure, .wp-caption) {
  margin: 0 0 1.1em;
}
:is(.entry-content, .content-column) > :where(p, ul, ol, dl, blockquote) {
  max-width: var(--upton-measure);
}
:is(.entry-content, .content-column) > :where(h1, h2, h3, h4) {
  color: var(--kdl-text-strong);
  margin: 2em 0 0.5em;
  max-width: var(--upton-measure);
  text-wrap: balance;
}
:is(.entry-content, .content-column) > :where(h2) {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
:is(.entry-content, .content-column) > :where(h3) {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  margin-top: 1.6em;
}
:is(.entry-content, .content-column) > :where(h1, h2, h3, h4):first-child {
  margin-top: 0;
}
/* Each section after the first opens with a hairline. A [divider] already
   draws one, so the heading straight after it doesn't. */
:is(.entry-content, .content-column) > h2:not(:first-child, hr + h2) {
  border-top: 1px solid var(--kdl-border-default);
  padding-top: 1.25rem;
}
:is(.entry-content, .content-column) > hr + h2 {
  margin-top: 0;
}
:is(.entry-content, .content-column) > :last-child {
  margin-bottom: 0;
}
:is(.entry-content, .content-column) > :is(ul, ol) {
  padding-left: 1.25em;
}
:is(.entry-content, .content-column) > :is(ul, ol) > li + li {
  margin-top: 0.35em;
}
.entry-content :is(p, li) a:not([class]) {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.entry-content .alignright {
  margin: 0.35em 0 1em 2rem;
  max-width: 45%;
}
.entry-content .alignleft {
  margin: 0.35em 2rem 1em 0;
  max-width: 45%;
}
@media (max-width: 599px) {
  .entry-content :is(.alignleft, .alignright) {
    display: block;
    float: none;
    margin: 0.75em 0 1em;
    max-width: 100%;
  }
}

@media (min-width: 1000px) {
  .entry-content:has(> h2) {
    align-items: start;
    column-gap: var(--upton-rail-gap);
    display: grid;
    grid-template-columns:
      [rail-start] minmax(0, var(--upton-rail))
      [rail-end text-start] minmax(0, var(--upton-measure))
      [text-end] minmax(0, 1fr)
      [full-end];
  }
  .entry-content:has(> h2) > * {
    grid-column: text;
  }
  /* Two rows: a heading taller than the line beside it (a sub-heading, a
     one-line paragraph) spills into the next row instead of pushing the
     following paragraph down. */
  .entry-content:has(> h2) > :is(h1, h2) {
    grid-column: rail;
    grid-row: span 2;
    margin: 0;
    max-width: none;
  }
  /* Catalogs, dividers, columns and tables keep the full page width. */
  .entry-content:has(> h2) > :is(.upton-catalog, hr, .content-column, .clear_column, .gallery, .wp-block-table, table, .alignwide, .alignfull) {
    grid-column: rail-start / full-end;
  }
  /* The section rule runs unbroken across the rail, the gutter and the text:
     the heading reaches into the gutter, and the text beside it carries the
     same rule. */
  .entry-content:has(> h2) > h2:not(:first-child, hr + h2),
  .entry-content:has(> h2) > h2:not(:first-child, hr + h2) + * {
    border-top: 1px solid var(--kdl-border-default);
    margin-top: 1.5rem;
    padding-top: 1.25rem;
  }
  .entry-content:has(> h2) > h2:not(:first-child, hr + h2) {
    margin-right: calc(-1 * var(--upton-rail-gap));
    padding-right: var(--upton-rail-gap);
  }
}

/* ==========================================================================
   Content — legacy editor content, shortcodes, core output
   ========================================================================== */
.wp-caption {
  margin: 0 auto 1.1em;
  max-width: 100%;
}
.wp-caption img {
  display: block;
  margin: 0 auto;
}
.wp-caption .wp-caption-text {
  color: var(--kdl-text-muted);
  font-size: var(--kdl-fs-small);
  line-height: 1.45;
  margin: 0.6em 0 0;
  text-align: center;
}

/* Card title links (catalog cards, taxonomy cards) */
.product-card__link {
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.product-card__link:hover {
  color: inherit;
  text-decoration: none;
}

/* [downloads] / [videos] shortcodes — a document register: heading, then
   one ruled row per file. Inside the data-sheet layout the block becomes
   one more section (heading in the rail, rows in the text column). */
.downloads,
.videos {
  clear: both;
  display: flow-root;
  margin: var(--upton-block-gap) 0 0;
}
:is(.entry-content, .content-column) > :is(.downloads, .videos):first-child {
  margin-top: 0;
}
.downloads > p:first-child,
.videos > p:first-child {
  margin: 0;
}
.downloads > p:last-child,
.videos > p:last-child {
  margin: 0;
}
.downloads h2,
.videos h2 {
  align-items: center;
  color: var(--kdl-text-strong);
  display: flex;
  font-size: 1.25rem;
  font-weight: 600;
  gap: 0.5em;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 0.75rem;
}
.downloads h2:before,
.videos h2:before {
  color: var(--kdl-accent-500);
  content: "\f019";
  font: normal normal normal 18px/1 FontAwesome;
}
.downloads ul,
.videos ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.downloads ul {
  border-top: 1px solid var(--kdl-border-default);
}
.downloads ul li {
  border-bottom: 1px solid var(--kdl-border-subtle);
  margin: 0;
}
.downloads ul li a {
  align-items: baseline;
  color: var(--kdl-text-strong);
  display: flex;
  font-weight: 500;
  gap: 0.6em;
  line-height: 1.4;
  padding: 0.75em 0;
  text-decoration: none;
}
.downloads ul li a:hover,
.downloads ul li a:focus-visible {
  color: var(--kdl-accent-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.downloads ul li a[href$=".pdf"]:before,
.videos ul li a[href$=".pdf"]:before {
  color: var(--kdl-accent-500);
  content: "\f1c1";
  flex-shrink: 0;
  font: normal normal normal 15px/1 FontAwesome;
}
/* The file type, right-aligned: the list says what each link opens. */
.downloads ul li a[href$=".pdf"]:after {
  color: var(--kdl-text-muted);
  content: "PDF";
  flex-shrink: 0;
  font: 500 var(--kdl-fs-caption) / 1 var(--kdl-font-mono);
  letter-spacing: 0.08em;
  margin-left: auto;
  padding-left: 1em;
}
@media (min-width: 1000px) {
  .entry-content:has(> h2) > :is(.downloads, .videos) {
    align-items: start;
    border-top: 1px solid var(--kdl-border-default);
    column-gap: var(--upton-rail-gap);
    display: grid;
    grid-column: rail-start / text-end;
    grid-template-columns: subgrid;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
  }
  .entry-content:has(> h2) > :is(.downloads, .videos) > * {
    grid-column: text;
  }
  .entry-content:has(> h2) > :is(.downloads, .videos) > h2 {
    grid-column: rail;
    margin: 0;
  }
  .entry-content:has(> h2) > .downloads > ul {
    border-top: 0;
  }
  .entry-content:has(> h2) > .downloads > ul li:first-child a {
    padding-top: 0;
  }
}
/* [gallery] — captioned tiles. Hover warms the tile's rim to copper
   instead of zooming (and cropping) the photo. The spare parts gallery
   renders as the Parts Counter instead (inc/datasheet-parts.php). */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kdl-space-5) 4%;
  justify-content: flex-start;
}
.gallery.gallery-columns-3 .gallery-item {
  flex-basis: 100%;
}
@media (min-width: 600px) {
  .gallery.gallery-columns-3 .gallery-item {
    flex-basis: 30.66%;
  }
}
.gallery .gallery-caption {
  color: var(--kdl-text-strong);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  padding: var(--kdl-space-2) var(--kdl-space-1) var(--kdl-space-1);
}
.gallery .gallery-item {
  background: var(--kdl-surface-base);
  border: 1px solid var(--kdl-border-default);
  border-radius: var(--kdl-radius-sm);
  margin: 0;
  padding: var(--kdl-space-1);
  text-align: center;
  transition: border-color var(--upton-heat-cool) var(--upton-heat-cool-ease), box-shadow var(--upton-heat-cool) var(--upton-heat-cool-ease);
}
@media (hover: hover) {
  .gallery .gallery-item:hover {
    border-color: var(--kdl-copper-500);
    box-shadow: 0 0 0 1px var(--kdl-copper-500), 0 0 12px 1px color-mix(in srgb, var(--upton-heat-5) 25%, transparent);
    transition-duration: var(--upton-heat-rise);
  }
}
.gallery .gallery-item:focus-within {
  border-color: var(--kdl-copper-500);
  box-shadow: 0 0 0 1px var(--kdl-copper-500);
}
.gallery .gallery-item .gallery-icon {
  display: block;
}
.gallery .gallery-item .gallery-icon img {
  border-radius: 2px;
  display: block;
  margin: 0 auto;
  width: 100%;
}

/* [videos] — a reel of labelled frames (videos_func, inc/shortcodes.php):
   16:9 tiles, each with a Lilex caption ("REEL 03 · BRIDGECRANE HOIST
   TRAVEL"). On phones the reel is a sideways strip that snaps frame by
   frame, with a "03 / 07" counter (site.js). Clicking a frame opens the
   screening room (reel.css). */
.videos {
  color: var(--kdl-text-muted);
  font-size: var(--kdl-fs-small);
  line-height: 1.45;
}
.videos > p {
  margin: 0 0 var(--kdl-space-5);
}
.videos h2 {
  text-align: left;
}
.videos h2:before {
  content: "\f03d";
}
.videos__reel:focus-visible {
  outline: 2px solid var(--kdl-copper-500);
  outline-offset: 4px;
}
.videos__list {
  display: grid;
  gap: var(--kdl-space-5) var(--kdl-space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.videos__frame {
  margin: 0;
  min-width: 0;
}
.videos__caption {
  color: var(--kdl-text-strong);
  font: 500 var(--kdl-fs-caption) / 1.45 var(--kdl-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  margin: var(--kdl-space-2) 0 0;
  text-transform: uppercase;
}
.videos__no,
.videos__sep {
  color: var(--kdl-text-muted);
}
.videos__count {
  display: none;
}
@media (max-width: 599px) {
  .videos__reel {
    margin: 0 -24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0 24px 6px;
    scroll-padding-inline: 24px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .videos__list {
    grid-auto-columns: 82%;
    grid-auto-flow: column;
    grid-template-columns: none;
  }
  .videos__frame {
    scroll-snap-align: start;
  }
  .videos__count {
    color: var(--kdl-text-muted);
    display: block;
    font: 500 var(--kdl-fs-caption) / 1 var(--kdl-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    margin: var(--kdl-space-3) 0 0;
  }
}

/* Responsive 16:9 player (YouTube facade target, legacy embeds) */
.video-container {
  aspect-ratio: 16 / 9;
  background: var(--kdl-gray-900);
  border-radius: var(--kdl-radius-sm);
  overflow: hidden;
  position: relative;
  width: 100%;
}
.video-container iframe,
.video-container object,
.video-container embed {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* YouTube click-to-load facade — the player loads only after a click.
   Rendered as a link to the video (works without JS); site.js turns it
   into a button. The poster is local, so nothing loads from Google first. */
.yt-facade {
  aspect-ratio: 16 / 9;
  background: var(--kdl-gray-900);
  border: 0;
  border-radius: var(--kdl-radius-sm);
  color: #fff;
  cursor: pointer;
  display: block;
  font: inherit;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-decoration: none;
  width: 100%;
}
/* No local poster and no caption under the video: the tile names it
   (one line, top left, clear of the centred play button). */
.yt-facade__title {
  color: #fff;
  font-size: var(--kdl-fs-small);
  font-style: normal;
  font-weight: 600;
  left: var(--kdl-space-4);
  line-height: 1.3;
  overflow: hidden;
  position: absolute;
  right: var(--kdl-space-4);
  text-align: left;
  text-overflow: ellipsis;
  top: var(--kdl-space-3);
  white-space: nowrap;
}
.yt-facade__thumb {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.yt-facade__icon {
  background: var(--kdl-accent-500);
  border-radius: var(--kdl-radius-md);
  box-shadow: 0 4px 12px rgba(10, 13, 17, 0.35);
  height: 44px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background-color var(--kdl-dur-base) var(--kdl-ease-standard);
  width: 64px;
}
.yt-facade__icon::before {
  border-color: transparent transparent transparent #fff;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-40%, -50%);
}
.yt-facade:hover .yt-facade__icon,
.yt-facade:focus-visible .yt-facade__icon {
  background: var(--kdl-accent-700);
}
.yt-facade:focus-visible {
  outline: 2px solid var(--kdl-copper-500);
  outline-offset: 2px;
}
.button {
  background: var(--upton-red);
  border-radius: var(--radius-md);
  color: #fff;
  display: inline-block;
  font-weight: 600;
  min-height: 50px;
  min-width: 150px;
  padding: 12.5px 25px;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-normal) var(--ease-out);
}
.button:hover {
  background: var(--upton-red-hover);
}
.button:focus-visible {
  outline: 2px solid var(--kdl-copper-500);
  outline-offset: 2px;
}
/* Search form (404, empty search): one field with the submit button joined
   to its right edge. */
.search-form > div {
  display: flex;
  max-width: 28rem;
}
.search-form .search-field {
  background: var(--kdl-surface-base);
  border: 1px solid var(--kdl-border-default);
  border-radius: var(--kdl-radius-sm) 0 0 var(--kdl-radius-sm);
  color: var(--kdl-text-strong);
  flex: 1 1 auto;
  font: 400 1rem / 1.4 var(--kdl-font-sans);
  min-height: 48px;
  min-width: 0;
  padding: var(--kdl-space-3) var(--kdl-space-4);
}
.search-form .search-field::placeholder {
  color: var(--kdl-text-muted);
}
.search-form .search-field:focus {
  border-color: var(--kdl-accent-500);
  box-shadow: inset 0 0 0 1px var(--kdl-accent-500);
  outline: none;
}
.search-form .search-submit {
  align-items: center;
  background: var(--kdl-accent-500);
  border: 1px solid var(--kdl-accent-500);
  border-radius: 0 var(--kdl-radius-sm) var(--kdl-radius-sm) 0;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  min-width: 48px;
  padding: 0 var(--kdl-space-3);
  transition: background-color var(--kdl-dur-base) var(--kdl-ease-standard);
}
.search-form .search-submit:hover {
  background: var(--kdl-accent-600);
}
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-item {
  display: inline-block;
  position: relative;
}
.sub-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Site footer — KDL §2.11: raised surface under a 3px copper rule. Four
   columns: the company (address, phone, email), Equipment, Processes and
   Company. The bottom bar is warm black with a heat bar along its top edge.
   ========================================================================== */
#colophon {
  background: var(--footer-bg);
  border-top: 3px solid var(--kdl-copper-500);
  clear: both;
  color: var(--footer-text);
  line-height: 1.5;
}
#colophon a {
  color: var(--footer-text);
  text-decoration: none;
}
#colophon a:hover {
  text-decoration: underline;
  text-decoration-color: var(--kdl-copper-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
#colophon .footer-main {
  background: var(--footer-bg);
  padding: var(--footer-spacing) 0;
}
#colophon .footer-grid {
  display: grid;
  gap: var(--kdl-space-7) var(--footer-column-gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  #colophon .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  #colophon .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
#colophon .footer-column {
  min-width: 0;
}

/* Column headings read as KDL eyebrows, pilot light included. */
#colophon .footer-heading,
#colophon .footer-column .widget-title {
  align-items: center;
  color: var(--kdl-gray-500);
  display: flex;
  font: 500 var(--kdl-fs-eyebrow) / 1.3 var(--kdl-font-mono);
  letter-spacing: 0.14em;
  margin: 0 0 var(--kdl-space-3);
  text-transform: uppercase;
}
#colophon .footer-heading::before {
  background: var(--upton-heat-3);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(206, 32, 41, 0.12);
  content: "";
  flex: none;
  height: 6px;
  margin-right: 0.75em;
  width: 6px;
}

#colophon .footer-nav .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
#colophon .footer-nav .menu-item {
  display: block;
  margin: 0;
  position: static;
}
#colophon .footer-nav .menu-item a {
  color: var(--footer-text);
  display: inline-block;
  font-size: 15px;
  line-height: 1.35;
  padding: 5px 0;
}
#colophon .footer-nav .footer-nav__more a {
  color: var(--kdl-text-accent);
  font-weight: 600;
}

#colophon .footer-address {
  display: grid;
  font-size: 15px;
  font-style: normal;
  gap: var(--kdl-space-2);
  justify-items: start;
  line-height: 1.5;
  margin: 0;
  padding-top: 5px;
}
#colophon .footer-tagline {
  color: var(--kdl-gray-500);
  font-size: var(--kdl-fs-small);
  line-height: 1.5;
  margin: var(--kdl-space-4) 0 0;
}

/* Widgets an editor may add to the footer areas. */
#colophon .footer-column .widget {
  margin: var(--kdl-space-5) 0 0;
}
#colophon .textwidget p:first-child {
  margin-top: 0;
}
#colophon .textwidget p:last-child {
  margin-bottom: 0;
}

/* Bottom bar: warm black, a heat bar along its top edge. */
#colophon .site-info {
  background: var(--upton-furnace-900);
  color: var(--kdl-gray-300);
  font-size: 14px;
  line-height: 1.6;
  padding: 20px 0;
  position: relative;
  text-align: left;
}
#colophon .site-info::before {
  background: var(--upton-heat-bar);
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
#colophon .site-info .wrap {
  overflow: visible;
}
#colophon .site-info-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
  text-align: center;
}
@media (min-width: 768px) {
  #colophon .site-info-inner {
    flex-direction: row;
    text-align: left;
  }
}
#colophon .site-info .copyright {
  margin: 0;
}
#colophon .site-info a {
  color: var(--kdl-gray-50);
  text-decoration: none;
}
#colophon .site-info a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--kdl-copper-300);
}
#colophon .site-info a:focus-visible {
  outline-color: var(--kdl-copper-300);
}
#colophon .legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}
@media (min-width: 768px) {
  #colophon .legal-links {
    justify-content: flex-end;
  }
}
#colophon .legal-links .separator {
  color: var(--kdl-gray-400);
  margin: 0 5px;
}

/* Glove mode: 44px targets in the footer on touch screens. */
@media (pointer: coarse) {
  #colophon .footer-nav .menu-item a,
  #colophon .site-info a,
  #colophon .footer-address a {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }
  #colophon .footer-nav .menu-item a {
    padding: 0;
  }
}

@media (forced-colors: active) {
  #colophon .site-info::before {
    background: CanvasText;
  }
}

/* ==========================================================================
   Pendant Dock (template-parts/pendant-dock.php) — phones and tablets only.
   Four 60px keys under the thumb, named like the pendant control station
   that hangs from an Upton hoist: CALL · DATA SHEET · QUOTE · MENU. Flat
   gray-800 with a 3px copper top edge; QUOTE is the one red key. It tucks
   away while scrolling down (chrome.js), hides while typing and while the
   drawer is open, and never prints.
   ========================================================================== */
.upton-dock {
  display: none;
}
@media screen and (max-width: 991px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  html {
    scroll-padding-bottom: 80px;
  }
  .upton-dock {
    background: var(--kdl-surface-inverse);
    border-top: 3px solid var(--kdl-copper-500);
    bottom: 0;
    display: block;
    left: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    position: fixed;
    right: 0;
    z-index: 60;
  }
  .upton-dock__keys {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .upton-dock__keys > li {
    display: flex;
    min-width: 0;
  }
  .upton-dock__keys > li + li {
    border-left: 1px solid rgba(163, 174, 184, 0.18);
  }
  .upton-dock__key {
    align-items: center;
    background: none;
    border: 0;
    color: var(--kdl-gray-50);
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    font: inherit;
    gap: 5px;
    justify-content: center;
    min-height: 61px;
    padding: 8px 4px 7px;
    position: relative;
    text-decoration: none;
  }
  a.upton-dock__key:hover,
  .upton-dock__key:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
  }
  .upton-dock__key:focus-visible {
    outline: 2px solid var(--kdl-copper-300);
    outline-offset: -4px;
  }
  .upton-dock__icon {
    flex: none;
  }
  .upton-dock__label {
    font: 500 11px/1 var(--kdl-font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .upton-dock__key--quote,
  a.upton-dock__key--quote:hover {
    background: var(--kdl-accent-500);
    color: #fff;
  }
  .upton-dock__key--quote:focus-visible {
    outline-color: #fff;
  }
  .upton-dock__key[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 3px 0 var(--kdl-copper-300);
  }
  .upton-dock__count {
    background: var(--kdl-copper-300);
    border-radius: 999px;
    color: var(--kdl-gray-900);
    font: 600 10px/16px var(--kdl-font-mono);
    min-width: 16px;
    padding: 0 4px;
    position: absolute;
    right: calc(50% - 22px);
    top: 6px;
  }
  /* The drawings register rises above the dock. */
  .upton-dock__register {
    background: var(--kdl-surface-base);
    border-top: 1px solid var(--kdl-border-default);
    bottom: 100%;
    box-shadow: 0 -12px 32px rgba(10, 13, 17, 0.16);
    left: 0;
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--kdl-space-4) var(--kdl-space-4) var(--kdl-space-3);
    position: absolute;
    right: 0;
  }
  .upton-dock__register-title {
    color: var(--kdl-gray-500);
    font: 500 var(--kdl-fs-eyebrow) / 1.3 var(--kdl-font-mono);
    letter-spacing: 0.14em;
    margin: 0 0 var(--kdl-space-2);
    text-transform: uppercase;
  }
  .upton-dock__register ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .upton-dock__register li + li {
    border-top: 1px solid var(--kdl-border-subtle);
  }
  .upton-dock__register a {
    align-items: baseline;
    color: var(--kdl-text-strong);
    display: flex;
    font-weight: 500;
    gap: 10px;
    line-height: 1.35;
    min-height: 48px;
    padding: 12px 0;
    text-decoration: none;
  }
  .upton-dock__model {
    color: var(--kdl-text-accent);
    flex: none;
    font: 500 13px/1.35 var(--kdl-font-mono);
    font-variant-numeric: tabular-nums;
  }
  .upton-dock__type {
    color: var(--kdl-text-muted);
    font: 500 var(--kdl-fs-caption) / 1.35 var(--kdl-font-mono);
    letter-spacing: 0.08em;
    margin-left: auto;
  }
  .upton-dock.is-tucked {
    transform: translateY(calc(100% + 4px));
  }
  /* Typing: the keyboard needs the room. Drawer open: the drawer has the keys. */
  html:has(:is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), textarea, select):focus) .upton-dock,
  html.drawer-open .upton-dock {
    transform: translateY(calc(100% + 4px));
    visibility: hidden;
  }
  /* The cookie settings button (fixed, bottom-left) sits above the dock,
     not under it. Outer styles beat the element's own :host rules. */
  pressidium-floating-button {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}
@media screen and (max-width: 991px) and (prefers-reduced-motion: no-preference) {
  .upton-dock {
    transition: transform 240ms var(--kdl-ease-emphasized), visibility 0s linear 0s;
  }
}

/* ==========================================================================
   Forms
   ========================================================================== */
input,
select,
textarea {
  background: #fff;
  border: 1px solid var(--kdl-border-default);
  font: 16px/1.4 var(--kdl-font-sans);
}
input[type="button"]:not(.woocommerce-Button),
input[type="reset"]:not(.woocommerce-Button),
input[type="submit"]:not(.woocommerce-Button) {
  background: linear-gradient(#f7f6f7, #dfdbdf);
  border: 1px solid #c7c0c7;
  border-radius: 2px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
  color: #5e5e5e;
  cursor: pointer;
  text-indent: 0;
  text-shadow: 0 1px 0 #fff;
}

/* ==========================================================================
   Page templates
   ========================================================================== */
/* Contact page: assets/css/components/contact.css. */

/* Search results: assets/css/components/search.css (loaded on search only). */

/* Paged lists (search, archives). Lilex numbers; the current page is ink
   (red stays on primary actions), hover is the copper signal. */
.navigation.pagination {
  border-top: 1px solid var(--kdl-border-default);
  margin-top: var(--kdl-space-5);
  padding-top: var(--kdl-space-5);
}
.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kdl-space-2);
}
.navigation.pagination .page-numbers {
  align-items: center;
  border: 1px solid var(--kdl-border-default);
  border-radius: var(--kdl-radius-sm);
  color: var(--kdl-text-strong);
  display: inline-flex;
  font-family: var(--kdl-font-mono);
  font-size: var(--kdl-fs-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--kdl-space-3);
  text-decoration: none;
}
.navigation.pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:focus-visible {
  border-color: var(--kdl-copper-500);
  color: var(--kdl-text-strong);
}
.navigation.pagination .page-numbers.current {
  background: var(--kdl-gray-800);
  border-color: var(--kdl-gray-800);
  color: #fff;
}
.navigation.pagination .page-numbers.dots {
  border-color: transparent;
}

/* Empty search: the field, then the message and the process directory.
   (404: assets/css/components/desludger.css.) */
.search-no-results .search-empty__message {
  margin: 0 0 var(--kdl-space-5);
  max-width: var(--upton-measure);
}

/* [sitemap] — the page tree as a directory: sections in bold, deeper
   levels indented along a hairline guide. */
.slug-sitemap .entry-content ul {
  list-style: none;
  margin: 0;
  max-width: none;
  padding: 0;
}
.slug-sitemap .entry-content > ul > li {
  margin: 0 0 var(--kdl-space-3);
}
.slug-sitemap .entry-content > ul > li + li {
  margin-top: 0;
}
.slug-sitemap .entry-content ul ul {
  border-left: 1px solid var(--kdl-border-default);
  margin: var(--kdl-space-1) 0 var(--kdl-space-2) 0.35em;
  padding-left: var(--kdl-space-4);
}
.slug-sitemap .entry-content li a {
  color: var(--kdl-text-default);
  display: inline-block;
  padding: 0.2em 0;
  text-decoration: none;
}
.slug-sitemap .entry-content > ul > li > a {
  color: var(--kdl-text-strong);
  font-weight: 600;
}
.slug-sitemap .entry-content li a:hover,
.slug-sitemap .entry-content li a:focus-visible {
  color: var(--kdl-accent-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.page-template-panels .panel {
  clear: both;
  overflow: hidden;
  padding: 50px 0;
  text-align: center;
}
.page-template-panels .panel > .wrap > p:first-child {
  margin-top: 0;
}
.page-template-panels .panel > .wrap > p:last-child {
  margin-bottom: 0;
}
.page-template-panels .site-main > .wrap {
  padding: 50px 0;
}
.page-template-panels #primary {
  float: none;
  width: 100%;
}

/* ==========================================================================
   Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
   License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)

   Subset: assets/fonts/fontawesome-subset.woff2 contains only the glyphs
   below (templates, Customizer defaults, [icon] shortcodes in content and
   the legacy content rules above). To add an icon, add its rule here and
   rebuild the subset from the full 4.7.0 font with pyftsubset.
   ========================================================================== */
@font-face {
  font-display: block;
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  src: url("assets/fonts/fontawesome-subset.woff2") format("woff2");
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-bars:before {
  content: "\f0c9";
}
.fa-phone:before {
  content: "\f095";
}
.fa-envelope:before {
  content: "\f0e0";
}
.fa-map-marker:before {
  content: "\f041";
}
.fa-external-link:before {
  content: "\f08e";
}
.fa-download:before {
  content: "\f019";
}
.fa-file-pdf-o:before {
  content: "\f1c1";
}
.fa-video-camera:before {
  content: "\f03d";
}
.fa-gears:before,
.fa-cogs:before {
  content: "\f085";
}
.fa-flash:before,
.fa-bolt:before {
  content: "\f0e7";
}
.fa-fire:before {
  content: "\f06d";
}
.fa-wrench:before {
  content: "\f0ad";
}

/* ==========================================================================
   KDL v1.1 — Component primitives (Roseville variant)
   All "primary accent" references resolve to red via --kdl-accent-* tokens
   (see :root above). Copper (--kdl-copper-*) handles signal/hover.
   Spec: /KDL_v1.md §2–§5. Only the primitives the theme renders are kept.
   ========================================================================== */

/* --------------------------------------------------------------------------
   KDL §1.3 — Body defaults (IBM Plex Sans stylistic sets)
   -------------------------------------------------------------------------- */
body {
  font-feature-settings: "ss01", "cv02";
}

/* --------------------------------------------------------------------------
   KDL §5.1 — Focus ring (copper)
   -------------------------------------------------------------------------- */
.kdl-btn:focus-visible {
  outline: 2px solid var(--kdl-copper-500);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   KDL §2.1 — Buttons
   -------------------------------------------------------------------------- */
.kdl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kdl-space-2);
  min-height: 44px;
  padding: var(--kdl-space-3) var(--kdl-space-5);
  border: 1px solid var(--kdl-accent-500);
  border-radius: var(--kdl-radius-sm);
  background: var(--kdl-accent-500);
  color: #fff;
  font-family: var(--kdl-font-sans);
  font-size: var(--kdl-fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  transition:
    background   var(--kdl-dur-base) var(--kdl-ease-emphasized),
    border-color var(--kdl-dur-base) var(--kdl-ease-emphasized),
    color        var(--kdl-dur-base) var(--kdl-ease-standard),
    box-shadow   var(--upton-heat-cool) var(--upton-heat-cool-ease),
    --heat       var(--upton-heat-cool) var(--upton-heat-cool-ease);
}
/* Hot: hover (real pointers) and keyboard focus heat the same way. */
.kdl-btn:focus-visible {
  --heat: 1;
  transition-duration: var(--kdl-dur-base), var(--kdl-dur-base), var(--kdl-dur-base), var(--upton-heat-rise), var(--upton-heat-rise);
  transition-timing-function: var(--kdl-ease-emphasized), var(--kdl-ease-emphasized), var(--kdl-ease-standard), var(--upton-heat-rise-ease), var(--upton-heat-rise-ease);
}
@media (hover: hover) {
  .kdl-btn:hover {
    --heat: 1;
    transition-duration: var(--kdl-dur-base), var(--kdl-dur-base), var(--kdl-dur-base), var(--upton-heat-rise), var(--upton-heat-rise);
    transition-timing-function: var(--kdl-ease-emphasized), var(--kdl-ease-emphasized), var(--kdl-ease-standard), var(--upton-heat-rise-ease), var(--upton-heat-rise-ease);
  }
}
.kdl-btn {
  box-shadow: 0 0 calc(var(--heat) * 16px) calc(var(--heat) * 1px) var(--heat-glow);
}
a.kdl-btn,
a.kdl-btn:link,
a.kdl-btn:visited { color: #fff; }
.kdl-btn:hover,
a.kdl-btn:hover {
  background: var(--kdl-accent-600);
  border-color: var(--kdl-accent-600);
  color: #fff;
}
.kdl-btn::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  mask: var(--kdl-chev-right) center / contain no-repeat;
  -webkit-mask: var(--kdl-chev-right) center / contain no-repeat;
}
.kdl-btn::after {
  content: "";
  position: absolute;
  left: var(--kdl-space-5);
  right: var(--kdl-space-5);
  bottom: 8px;
  height: 2px;
  /* The underline is a heating element: it runs out along the ramp as the
     button heats and retracts as it cools (driven by --heat, no own
     transition). */
  background: var(--heat-c);
  transform: scaleX(var(--heat-len));
  transform-origin: left center;
}
.kdl-btn:has(.kdl-btn__chev)::before { display: none; }

.kdl-btn--secondary {
  background: var(--kdl-surface-base);
  color: var(--kdl-text-accent);
  border-color: var(--kdl-accent-500);
}
a.kdl-btn--secondary,
a.kdl-btn--secondary:link,
a.kdl-btn--secondary:visited { color: var(--kdl-text-accent); }
.kdl-btn--secondary:hover,
a.kdl-btn--secondary:hover {
  background: var(--kdl-accent-50);
  border-color: var(--kdl-accent-600);
  color: var(--kdl-accent-700);
}

/* --------------------------------------------------------------------------
   KDL §2.2 — Cards
   -------------------------------------------------------------------------- */
.kdl-card {
  --card-pad: var(--kdl-space-5);
  display: grid;
  gap: var(--kdl-space-3);
  padding: var(--card-pad);
  background: var(--kdl-surface-base);
  border: 0;
  border-radius: var(--kdl-radius-sm);
  box-shadow: var(--kdl-elev-2);
  transition: box-shadow var(--kdl-dur-base) var(--kdl-ease-standard);
}
.kdl-card:hover { box-shadow: var(--kdl-elev-3); }

.kdl-card__media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--kdl-gray-100), var(--kdl-gray-200));
  overflow: hidden;
  border-radius: var(--kdl-radius-sm);
}
.kdl-card__media > img,
.kdl-card__media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kdl-card > .kdl-card__media:first-child {
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 0;
  border-radius: var(--kdl-radius-sm) var(--kdl-radius-sm) 0 0;
}
.kdl-card__media--ar-4x3  { aspect-ratio: 4 / 3; }
.kdl-card__title {
  font-size: var(--kdl-fs-h4);
  font-weight: 700;
  line-height: 1.3;
  color: var(--kdl-text-strong);
  margin: 0;
}
.kdl-card__body {
  font-size: var(--kdl-fs-small);
  color: var(--kdl-text-default);
  margin: 0;
}

.kdl-card--linked { transition: box-shadow var(--kdl-dur-base) var(--kdl-ease-standard), transform var(--kdl-dur-base) var(--kdl-ease-standard); }
.kdl-card--linked:hover { transform: translateY(-2px); box-shadow: var(--kdl-elev-3); }

/* --------------------------------------------------------------------------
   KDL §3 — Eyebrow
   -------------------------------------------------------------------------- */
.kdl-eyebrow {
  font-family: var(--kdl-font-mono);
  font-size: var(--kdl-fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--kdl-text-muted);
}

/* ==========================================================================
   CTA band — homepage, catalog, applications and application archives
   ========================================================================== */
.cta-band {
  position: relative;
  padding: clamp(48px, 8vw, 96px) 24px;
  background: var(--kdl-gray-900, #0a0d11);
  color: #fff;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.cta-band--with-image .cta-band__overlay {
  background: linear-gradient(180deg, rgba(6, 10, 16, 0.72), rgba(6, 10, 16, 0.88));
}

.cta-band__image {
  display: block;
  height: 100%;
  inset: 0;
  max-width: none;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.cta-band__overlay {
  position: absolute;
  inset: 0;
}

.cta-band__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.cta-band__heading {
  margin: 0;
  font-family: var(--kdl-font-sans, "IBM Plex Sans", sans-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
}

.cta-band__subhead {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.84);
}

.cta-band__btn {
  margin-top: 4px;
}

/* ==========================================================================
   Furnace + Salt family card (template-parts/family-card.php)
   Upton red builds the furnace, Kolene blue makes the salt, joined by a KDL
   notch. White on red-500 is 5.4:1, on blue-500 4.8:1. Flat: two fields of
   colour and type, no texture.
   ========================================================================== */
.family-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin: var(--upton-block-gap) 0 0;
  max-width: 52rem;
}
.family-card__half {
  display: grid;
  align-content: start;
  gap: var(--kdl-space-2);
  padding: clamp(20px, 2.6vw, 28px);
  color: #fff;
  position: relative;
}
.family-card__half--upton {
  background: var(--kdl-red-500);
  border-radius: var(--kdl-radius-sm) 0 0 var(--kdl-radius-sm);
}
.family-card__half--kolene {
  background: var(--kdl-blue-500);
  border-radius: 0 var(--kdl-radius-sm) var(--kdl-radius-sm) 0;
}
/* The notch: a red tooth that locks into the blue half. */
.family-card__half--upton::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -13px;
  z-index: 1;
  width: 14px;
  height: 28px;
  background: var(--kdl-red-500);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateY(-50%);
}
.family-card__maker {
  margin: 0;
  font: 500 var(--kdl-fs-eyebrow) / 1.3 var(--kdl-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.family-card__title {
  margin: 0;
  max-width: none;
  font: 700 clamp(19px, 1.8vw, 22px) / 1.2 var(--kdl-font-sans);
  letter-spacing: -0.01em;
  color: #fff;
  border: 0;
  padding: 0;
}
.family-card__line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kdl-space-2) var(--kdl-space-4);
  margin: var(--kdl-space-2) 0 0;
  font-size: var(--kdl-fs-small);
}
.family-card a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.family-card a:hover {
  color: #fff;
  text-decoration-thickness: 2px;
}
.family-card a:focus-visible {
  outline-color: #fff;
}
.family-card__phone {
  font-family: var(--kdl-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.family-card__caption {
  grid-column: 1 / -1;
  margin: var(--kdl-space-3) 0 0;
  font: 500 var(--kdl-fs-eyebrow) / 1.4 var(--kdl-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kdl-gray-500);
}
@media (max-width: 599px) {
  .family-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .family-card__half--upton {
    border-radius: var(--kdl-radius-sm) var(--kdl-radius-sm) 0 0;
  }
  .family-card__half--kolene {
    border-radius: 0 0 var(--kdl-radius-sm) var(--kdl-radius-sm);
  }
  .family-card__half--upton::after {
    top: auto;
    right: auto;
    bottom: -13px;
    left: clamp(20px, 2.6vw, 28px);
    width: 28px;
    height: 14px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: none;
  }
}
@media (forced-colors: active) {
  .family-card__half {
    border: 1px solid CanvasText;
  }
}

/* ==========================================================================
   SEARCHABLE APPLICATIONS LIST
   ========================================================================== */
.applications-list-section {
  background: var(--kdl-surface-base, #fff);
  padding: clamp(36px, 5vw, 72px) 0;
}

.applications-list-section__inner {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 clamp(20px, 4vw, 40px);
}

.applications-list-section__header {
  margin-bottom: clamp(24px, 4vw, 40px);
}

.applications-list-search {
  align-items: end;
  border-bottom: 1px solid var(--kdl-border-default, #cfd6dd);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: clamp(28px, 4vw, 48px);
  padding-bottom: 20px;
}

.applications-list-search__label {
  display: grid;
  gap: 8px;
  margin: 0;
}

.applications-list-search__label span {
  color: var(--kdl-text-muted, #6c7682);
  font-family: var(--kdl-font-mono, monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.applications-list-search__input {
  background: var(--kdl-surface-base, #fff);
  border: 1px solid var(--kdl-border-default, #cfd6dd);
  border-radius: var(--kdl-radius-sm, 4px);
  color: var(--kdl-text-strong, #14181d);
  font: 600 18px/1.35 var(--kdl-font-sans, sans-serif);
  min-height: 52px;
  padding: 12px 16px;
  width: 100%;
}

.applications-list-search__input::placeholder {
  color: var(--kdl-text-muted, #6c7682);
  font-weight: 400;
}

.applications-list-search__input:focus {
  border-color: var(--kdl-accent-500, #CE2029);
  box-shadow:
    inset 0 0 0 1px var(--kdl-accent-500, #CE2029),
    inset 0 -2px 0 0 var(--kdl-copper-500, #c2632a);
  outline: none;
}

.applications-list-search__clear {
  background: transparent;
  border: 0;
  color: var(--kdl-text-accent, #B51B23);
  cursor: pointer;
  font: 600 14px/1 var(--kdl-font-sans, sans-serif);
  min-height: 52px;
  padding: 0 4px;
}

.applications-list-search__clear:hover,
.applications-list-search__clear:focus {
  color: var(--kdl-accent-700, #8b1318);
  text-decoration: underline;
}

.applications-list {
  column-gap: clamp(36px, 6vw, 72px);
}

@media (min-width: 700px) {
  .applications-list {
    column-count: 2;
  }
}

.applications-list__application {
  break-inside: avoid;
  margin: 0 0 clamp(28px, 4vw, 44px);
  page-break-inside: avoid;
}

.applications-list__heading {
  border-bottom: 2px solid var(--kdl-border-subtle, #e7ebef);
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.2;
  margin: 0 0 14px;
  padding-bottom: 10px;
}

.applications-list__heading a {
  background-image: none;
  color: var(--kdl-text-strong, #14181d);
  text-decoration: none;
}

.applications-list__heading a:hover,
.applications-list__heading a:focus {
  color: var(--kdl-accent-500, #CE2029);
  text-decoration: underline;
}

.applications-list__products {
  list-style: none;
  margin: 0;
  padding: 0;
}

.applications-list__product {
  margin: 0;
  padding: 6px 0 6px 16px;
  position: relative;
}

.applications-list__product::before {
  background: var(--kdl-copper-500, #c2632a);
  content: "";
  height: 6px;
  left: 0;
  position: absolute;
  top: 16px;
  transform: rotate(45deg);
  width: 6px;
}

.applications-list__product a {
  background-image: none;
  color: var(--kdl-text-default, #2f353d);
  font-weight: 500;
  text-decoration: none;
}

.applications-list__product a:hover,
.applications-list__product a:focus {
  color: var(--kdl-accent-500, #CE2029);
  text-decoration: underline;
}

.applications-list__empty {
  color: var(--kdl-text-muted, #6c7682);
  font-size: 18px;
  margin: 0;
  padding: 28px 0;
  text-align: center;
}
@media (max-width: 640px) {
  .applications-list-search {
    grid-template-columns: 1fr;
  }

  .applications-list-search__clear {
    justify-self: start;
    min-height: 32px;
  }
}

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

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  body {
    background: #fff;
    color: #000;
    padding-bottom: 0 !important;
  }

  #mobile-bar,
  .main-navigation,
  .site-header-actions,
  .upton-dock,
  .mega-panel,
  .mobile-drawer,
  .mobile-drawer-backdrop,
  .skip-link,
  #cc--main,
  .catalog-toolbar,
  .catalog-empty,
  .cta-band,
  .equipment-cta,
  .hero__background,
  .hero__overlay,
  .yt-facade__icon,
  #colophon .site-info {
    display: none !important;
  }

  #masthead {
    box-shadow: none !important;
    padding-top: 0 !important;
    position: static !important;
  }

  #masthead .site-header-bar {
    display: flex !important;
    height: auto !important;
    padding: 0 24px 12pt !important;
  }

  #masthead .site-header-bar .custom-logo,
  #masthead .site-header-bar .custom-logo-link img {
    height: 48pt !important;
    max-height: none !important;
    transform: none !important;
  }

  /* !important: the component files that set these load after style.css. */
  .hero,
  .page-header {
    min-height: 0 !important;
    padding-bottom: 12pt !important;
  }

  /* .footer-main carries the footer's grey panel; with "Background
     graphics" on it would print as a grey block. */
  #colophon,
  #colophon .footer-main {
    background: #fff !important;
    color: #000 !important;
  }

  #colophon {
    padding: 20px 0;
  }

  a {
    color: #000 !important;
    text-decoration: underline;
  }

  .kdl-card,
  .applications-list__application,
  img {
    break-inside: avoid;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }
}