/* GENERATED by build/rtl.py from template.css — do not edit.
   The right-to-left mirror of the stylesheet. Only physical properties are
   flipped; logical ones (flex order, grid order, text-align:start) already
   follow <html dir="rtl"> and are left alone. */
/* ==================================================================
   TOPCOOL-STYLE DESIGN SYSTEM  ·  template.css
   ------------------------------------------------------------------
   A reusable, framework-free component library reverse-engineered
   from the visual language of www.topcool.co and applied to the
   BARNEYE (Camhiech) content set.

   Sections
     01  Design tokens
     02  Base & typography
     03  Layout primitives
     04  Buttons & links
     05  Header / navigation / mega menu / drawer
     06  Hero & page hero
     07  Card grids
     08  Feature panel
     09  Split sections & stats
     10  Process / accordion
     11  CTA band
     12  Footer
     13  Tabs, chips, tables, spec lists
     14  Utilities
     15  Motion & reveal
     16  Responsive
   ================================================================== */

/* ------------------------------------------------------------------
   01  DESIGN TOKENS
   ------------------------------------------------------------------ */
:root {
  /* --- colour ------------------------------------------------ */--c-ground: #ffffff;--c-ink: #192841;   /* headings, nav, primary text      */--c-ink-soft: #4c5a70;   /* body copy                        */--c-ink-mute: #7d8a9c;   /* captions, meta                   */--c-accent: #1a6aff;   /* links, eyebrows, active state    */--c-accent-deep: #094bcc;   /* solid buttons                    */--c-accent-soft: #e0eff9;   /* accordion / highlight panels     */--c-tint: #eaf1f6;   /* card & panel wash (blue-grey)    */--c-tint-strong: #dbe6ef;--c-navy: #092f57;   /* footer                           */--c-navy-deep: #06223f;--c-white: #ffffff;--c-line: rgba(25, 40, 65, 0.12);--c-line-soft: rgba(25, 40, 65, 0.07);--c-shadow: 0 18px 40px -22px rgba(9, 47, 87, 0.35);

  /* accent palette for icon badges (topcool-style circles) */--c-badge-1: #1a6aff;--c-badge-2: #17a673;--c-badge-3: #f5820b;--c-badge-4: #8b5cf6;--c-badge-5: #e0455c;--c-badge-6: #0f9bb8;

  /* --- typography -------------------------------------------- */--f-sans: 'Montserrat', 'PingFang SC', 'Hiragino Sans GB',
            'Microsoft YaHei', system-ui, -apple-system, 'Segoe UI',
            Roboto, Helvetica, Arial, sans-serif;--fs-display: clamp(2.15rem, 1.1rem + 3.2vw, 4rem);    /* 34 → 64 */--fs-h1: clamp(1.95rem, 1.1rem + 2.6vw, 3.2rem);  /* 31 → 51 */--fs-h2: clamp(1.75rem, 1.05rem + 2.2vw, 3.2rem);--fs-h3: clamp(1.15rem, 0.95rem + 0.55vw, 1.42rem);--fs-h4: 1.0625rem;--fs-lead: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);--fs-body: 1rem;--fs-sm: 0.9375rem;--fs-xs: 0.8125rem;--ls-tight: -0.05em;   /* topcool applies -0.05em to every head */--ls-eyebrow: 0.09em;--lh-head: 1.18;--lh-body: 1.62;

  /* --- spacing & shape --------------------------------------- */--container: 1260px;--gutter: 40px;--section-y: clamp(56px, 5vw, 84px);--header-h: 82px;--r-sm: 10px;--r-md: 14px;--r-lg: 18px;--r-xl: 24px;--r-pill: 999px;--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Arabic pages: Montserrat carries no Arabic glyphs at all, so the browser
   was falling through the whole stack to whatever the OS offered. Name the
   Arabic families explicitly — Montserrat stays first so the product and
   brand names keep their Latin face — and open the leading a little, since
   Arabic sits on a deeper baseline than the Latin type this template was
   tuned for. */
html[lang="ar"] {--f-sans: 'Montserrat', 'SF Arabic', 'Geeza Pro', 'Noto Sans Arabic',
            'Segoe UI', Tahoma, system-ui, -apple-system, sans-serif;
}

html[lang="ar"] body {line-height: 1.78; }

html[lang="ar"] .display,
html[lang="ar"] .eyebrow {letter-spacing: normal; }

/* ------------------------------------------------------------------
   02  BASE & TYPOGRAPHY
   ------------------------------------------------------------------ */
*, *::before, *::after {box-sizing: border-box; }

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

body {margin: 0;background: var(--c-ground);color: var(--c-ink-soft);font-family: var(--f-sans);font-size: var(--fs-body);line-height: var(--lh-body);font-weight: 400;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

img, svg, video {max-width: 100%;display: block; }
a {color: var(--c-accent);text-decoration: none; }
a:hover {text-decoration: underline; }
button {font: inherit;color: inherit; }

/* The filter chips, the accordion and the tabs all toggle the `hidden`
   attribute. The UA rule for it is `[hidden] {display: none}`, which any
   rule that sets `display` on the same element outranks — `.card` sets
   `display: flex`, so the filtered-out cards would stay on screen. Re-assert
   it here so the attribute actually means something. */
[hidden] {display: none !important; }

h1, h2, h3, h4, h5 {margin: 0 0 0.5em;color: var(--c-ink);font-weight: 700;letter-spacing: var(--ls-tight);line-height: var(--lh-head);
}
h1 {font-size: var(--fs-h1); }
h2 {font-size: var(--fs-h2); }
h3 {font-size: var(--fs-h3); }
h4 {font-size: var(--fs-h4);letter-spacing: -0.02em; }
p  {margin: 0 0 1.1em; }
p:last-child {margin-bottom: 0; }

::selection {background: rgba(26, 106, 255, 0.16); }

/* ------------------------------------------------------------------
   03  LAYOUT PRIMITIVES
   ------------------------------------------------------------------ */
.container {width: 100%;max-width: calc(var(--container) + var(--gutter) * 2);margin-inline: auto;padding-inline: var(--gutter);
}

.section {padding-block: var(--section-y); }
.section--tight {padding-block: clamp(36px, 3.4vw, 56px); }
.section--tint {background: var(--c-tint); }
.section--soft {background: linear-gradient(180deg, #f7fafc 0%, #ffffff 100%); }

.section-lead {max-width: 46rem;font-size: var(--fs-lead);color: var(--c-ink-soft);
}
.section-lead--wide {max-width: 62rem; }

/* eyebrow — the small blue all-caps kicker used above section titles */
.eyebrow {display: block;margin: 0 0 0.85rem;color: var(--c-accent);font-size: var(--fs-sm);font-weight: 700;letter-spacing: var(--ls-eyebrow);text-transform: uppercase;
}
.eyebrow--center {text-align: center; }

.head-center {text-align: center; }
.head-center .section-lead {margin-inline: auto; }

/* big display heading, e.g. "How we work" */
.display {font-size: var(--fs-display);font-weight: 800;letter-spacing: -0.055em;color: var(--c-ink);line-height: 1.06;
}

/* ------------------------------------------------------------------
   Chinese (see build/i18n.py — the /zh/ pages carry lang="zh-CN")
   ------------------------------------------------------------------
   Only three tokens change, so every component keeps its size, spacing
   and rhythm; what changes is what the Latin settings get wrong for CJK.
   -0.05em tracking closes the gaps between square glyphs until a Chinese
   headline reads as one solid block, and 1.18 leading leaves no room
   between two lines of it. Chinese also needs slightly more air in body
   copy because every glyph is full-height.
   ------------------------------------------------------------------ */
html[lang="zh-CN"] {--ls-tight: -0.008em;--lh-head: 1.26;--lh-body: 1.72;
}

/* ------------------------------------------------------------------
   04  BUTTONS & LINKS
   ------------------------------------------------------------------ */
.btn {--btn-bg: var(--c-accent-deep);--btn-fg: #fff;--btn-bd: var(--c-accent-deep);display: inline-flex;align-items: center;justify-content: center;gap: 0.6em;min-height: 48px;padding: 0 1.7rem;border: 2px solid var(--btn-bd);border-radius: var(--r-pill);background: var(--btn-bg);color: var(--btn-fg);font-size: var(--fs-sm);font-weight: 600;letter-spacing: -0.01em;line-height: 1;white-space: nowrap;cursor: pointer;transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover {text-decoration: none;transform: translateY(-2px); }
.btn:active {transform: translateY(0); }

.btn--primary:hover {background: #0a3fa8;border-color: #0a3fa8; }
.btn--light {--btn-bg: #fff;--btn-fg: var(--c-ink);--btn-bd: #fff;
}
.btn--light:hover {--btn-bg: #eaf1f6;--btn-bd: #eaf1f6; }
.btn--ghost {--btn-bg: transparent;--btn-fg: #fff;--btn-bd: rgba(255, 255, 255, 0.75);
}
.btn--ghost:hover {--btn-bg: #fff;--btn-fg: var(--c-ink);--btn-bd: #fff; }
.btn--outline {--btn-bg: transparent;--btn-fg: var(--c-ink);--btn-bd: var(--c-line);
}
.btn--outline:hover {--btn-bd: var(--c-accent);--btn-fg: var(--c-accent);background: rgba(26, 106, 255, 0.06);
}
.btn--sm {min-height: 40px;padding: 0 1.25rem;font-size: var(--fs-xs); }
.btn--block {width: 100%; }

.btn-row {display: flex;flex-wrap: wrap;gap: 0.85rem;align-items: center;
}

/* the small blue "Explore This Solution" style text link */
.card__link,
.link-arrow {display: inline-flex;align-items: center;gap: 0.45em;color: var(--c-accent);font-size: var(--fs-sm);font-weight: 700;letter-spacing: -0.01em;
}
.card__link:hover, .link-arrow:hover {text-decoration: none; }
.card__link svg, .link-arrow svg {transition: transform .25s var(--ease); }
.card__link:hover svg, .link-arrow:hover svg {transform: translateX(-4px); }

/* ------------------------------------------------------------------
   05  HEADER / NAVIGATION
   ------------------------------------------------------------------ */
.site-header {position: sticky;top: 0;z-index: 90;background: var(--c-ground);border-bottom: 1px solid transparent;transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-stuck {box-shadow: 0 10px -30px -22px rgba(9, 47, 87, 0.55);border-bottom-color: var(--c-line-soft);
}
.site-header__inner {display: flex;align-items: center;gap: clamp(0.75rem, 1.6vw, 1.6rem);min-height: var(--header-h);
}

/* Brand lockup: one wordmark asset, recoloured per surface ---------- */
/* `flex: none` here is not cosmetic. The wordmark is a brand asset, so it
   must never be compressed on the X axis — a squashed logo is the first
   thing anyone who knows the brand notices. Before this rule the header row
   shrank the brand by up to 84 % (161 px → 26 px at 1180 px viewport) to
   make room for the nav, because the row needs ~1250 px of content width and
   the container only offers 1260 px. Now the nav and the actions give way
   instead, and the nav drops to the drawer before it runs out of room. */
.brand {display: inline-flex;align-items: center;flex: none; }
.brand:hover {text-decoration: none; }
.brand__logo {display: block;width: auto;height: 38px;
  /* Belt and braces: if some future rule does squeeze the box, the mark
     letterboxes inside it rather than distorting. */object-fit: contain;
}
.site-footer__brand .brand__logo {height: 33px; }

/* The full eight-label nav needs ~1220 px of content width. The header's
   content area tops out at 1260 px, so at wide sizes there is real air —
   but at 1280 px viewport it is only 1200 px, and below that it does not
   fit at all. See the max-width:1280px block further down, where the nav
   hands over to the drawer instead of squeezing anything. */
.nav {margin-right: auto;min-width: 0; }
.nav__list {display: flex;align-items: center;
  /* 11 px between labels left the row with nothing to spare: English fitted
     to the pixel, German was 3 px over and only looked right because the
     icon's right padding was being eaten. At 7 px every tree has room for a
     word to grow, which is the difference between a language that fits and
     one that silently loses a glyph. */gap: clamp(0.3rem, 0.5vw, 0.6rem);margin: 0;padding: 0;list-style: none;
}
.nav__link {display: inline-flex;align-items: center;gap: 0.35rem;padding: 0.55rem 0.05rem;color: var(--c-ink);font-size: var(--fs-sm);font-weight: 600;letter-spacing: -0.012em;white-space: nowrap;
}
.nav__link:hover {color: var(--c-accent);text-decoration: none; }
/* Live Barn is the only nav item that is a running thing rather than a page
   about something: a 6 px dot, half opaque, says "live" without a badge and
   without competing with the Contact button for attention. */
.nav__live {display: inline-block;width: 6px;height: 6px;margin-right: 0.1rem;border-radius: 50%;background: #17a673;box-shadow: 0 0 0 2px rgba(23, 166, 115, 0.18);vertical-align: 2px;
}
.nav__link[aria-current='page'],
.nav__item.is-open > .nav__link {color: var(--c-accent); }
.nav__caret {width: 10px;height: 10px;transition: transform .25s var(--ease); }
.nav__item.is-open .nav__caret {transform: rotate(180deg); }

/* The house sits before "BARNEYE OS" and is a little larger than the word
   baseline, because a 17 px glyph beside 0.8 rem capitals reads as a bullet
   otherwise. It takes the same padding box as a word link so the row keeps
   one rhythm; the negative start padding keeps the wordmark gap honest. */
.nav__link--home {padding: 0.4rem 0.2rem 0.4rem 0;color: var(--c-ink-soft);
  /* An icon-only link has nothing to give back: left to itself flexbox
     shrinks it to its 3 px of padding while every label beside it keeps its
     full width, which reads as a stray dot before "BARNEYE OS". */flex: none;
}
/* …and `flex: none` on the anchor is not enough on its own. The anchor, the
   `<li>` around it and the `<svg>` inside it are each a flex item of somebody,
   and every one of them shrinks to zero when the row comes up short: Spanish
   needs 829 px of a 768 px row, and the icon was the only thing that gave.
   Pinning all three means an over-long row shows up as clipped words — which
   somebody will report — instead of a silently missing icon, which nobody
   notices for weeks. */
.nav__item--home {flex: none; }
.nav__link--home svg {width: 18px;height: 18px;display: block;flex: none; }
.nav__link--home:hover {color: var(--c-accent); }

/* Spanish is the one tree whose labels outgrow their English originals by
   more than the row has to spare — "Nuestra tecnología" against "Our
   Technology", "Casos prácticos" against "Case Studies". Widening the header
   is not an option: the row is capped by the 1260 px container, so a 1600 px
   window gives the nav exactly the same 768 px as a 1440 px one. Rather than
   dropping the whole nav into the drawer at every desktop width, es pays the
   60 px in spacing: the gap between labels and the tracking come in, which
   is invisible at 15 px but buys back the overflow. Measured after the
   change: 749 px needed, 768 px available. */
html[lang='es'] .nav__list {column-gap: 0.25rem; }
html[lang='es'] .nav__link {font-size: 0.9rem;letter-spacing: -0.028em;padding-inline: 0; }
html[lang='es'] .nav__link--home {padding-inline: 0 0.15rem; }

/* --- mega menu ------------------------------------------------- */
.mega {position: absolute;right: 0;left: 0;top: 100%;padding: 0;background: var(--c-ground);border-top: 1px solid var(--c-line-soft);border-bottom: 1px solid var(--c-line-soft);box-shadow: 0 26px -50px -32px rgba(9, 47, 87, 0.6);display: grid;grid-template-columns: 260px 1fr 320px;gap: clamp(1rem, 2.4vw, 2.4rem);opacity: 0;visibility: hidden;transform: translateY(-8px);transition: opacity .22s var(--ease), transform .22s var(--ease),
              visibility .22s var(--ease);
}
.nav__item.is-open .mega {opacity: 1;visibility: visible;transform: none; }
.mega__inner {grid-column: 1 / -1;display: grid;grid-template-columns: 250px minmax(0, 1fr) 300px;gap: clamp(1rem, 2.4vw, 2.4rem);padding-block: 2rem 2.2rem;
}
.mega__col-title {margin: 0 0 0.9rem;color: var(--c-ink-mute);font-size: var(--fs-xs);font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;
}
.mega__species {margin: 0;padding: 0;list-style: none; }
.mega__species a {display: grid;grid-template-columns: 46px 1fr auto;align-items: center;gap: 0.75rem;padding: 0.5rem 0;color: var(--c-ink);font-size: var(--fs-sm);font-weight: 600;
}
.mega__species a:hover {color: var(--c-accent);text-decoration: none; }
.mega__species img {width: 46px;height: 46px;object-fit: cover;border-radius: 10px;
}
.mega__species i {width: 8px;height: 8px;border-left: 2px solid currentColor;border-top: 2px solid currentColor;transform: rotate(45deg);opacity: .45;
}
.mega__links {columns: 2;column-gap: 2rem;margin: 0;padding: 0;list-style: none;
}
.mega__links li {break-inside: avoid; }
/* Three or four links with a caption each turn into two ragged columns and
   the second one is half empty. The OS panel asks for one column. */
.mega__links--one {columns: 1; }
.mega__links + .mega__col-title {margin-top: 1.15rem; }
/* the one link above the thumbnails: the destination of the whole panel,
   so it reads as a heading rather than as a fourth series */
.mega__all {margin-bottom: 0.35rem; }
.mega__all a {color: var(--c-ink);font-weight: 650; }
.mega__links a {display: block;padding: 0.36rem 0;color: var(--c-ink-soft);font-size: var(--fs-sm);
}
.mega__links a:hover {color: var(--c-accent);text-decoration: none; }
.mega__feature {padding: 1.15rem;border-radius: var(--r-lg);background: var(--c-tint);
}
.mega__feature strong {display: block;color: var(--c-ink);font-size: var(--fs-sm); }
.mega__feature p {margin: 0.45rem 0 0.8rem;font-size: var(--fs-xs);line-height: 1.55; }
.mega__feature img {border-radius: var(--r-sm);margin-bottom: 0.8rem; }

/* --- header actions ------------------------------------------- */
.header-actions {display: flex;align-items: center;gap: 0.6rem;flex: none;
}
.lang-pill {display: inline-flex;align-items: center;gap: 0.4rem;height: 40px;padding: 0 0.9rem;border: 1px solid var(--c-line);border-radius: var(--r-pill);background: #fff;color: var(--c-ink);font-size: var(--fs-xs);font-weight: 600;cursor: pointer;text-decoration: none;
}
/* the global a:hover rule (0,1,1) outranks .lang-pill (0,1,0) and would
   underline the label — this is a pill, not a text link */
.lang-pill:hover {border-color: var(--c-accent);color: var(--c-accent);text-decoration: none; }
.lang-pill svg {flex: none; }
.lang-pill__label {white-space: nowrap; }

/* Three languages now, so the pill is the button of a small menu rather than
   a one-click toggle. It opens on hover and on focus-within — the latter is
   what makes it work with a tap, and neither needs a line of JavaScript. */
.lang-switch {position: relative; }
.lang-switch__menu {position: absolute;top: calc(100% + 8px);left: 0;z-index: 70;min-width: 152px;margin: 0;padding: 6px;list-style: none;background: #fff;border: 1px solid var(--c-line);border-radius: 12px;box-shadow: 0 18px -44px rgba(9, 47, 87, 0.16);opacity: 0;visibility: hidden;transform: translateY(-4px);transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.lang-switch__menu li {margin: 0; }
.lang-switch__menu a {display: block;padding: 0.48rem 0.7rem;border-radius: 8px;color: var(--c-ink);font-size: var(--fs-sm);font-weight: 500;white-space: nowrap;text-decoration: none;
}
.lang-switch__menu a:hover {background: var(--c-tint);color: var(--c-accent);text-decoration: none; }
.lang-switch__menu a[aria-current] {color: var(--c-accent);font-weight: 700; }
.lang-switch:hover .lang-switch__menu,
.lang-switch:focus-within .lang-switch__menu {opacity: 1;visibility: visible;transform: none;
}

/* the drawer carries the switch on its own below 1024 px, where the pill is
   hidden to make room for the hamburger */
.drawer__langs {display: flex;gap: 0.45rem;margin-top: 0.75rem; }
.drawer__lang {display: flex;flex: 1;align-items: center;justify-content: center;gap: 0.45rem;min-height: 42px;border: 1px solid var(--c-line);border-radius: var(--r-pill);color: var(--c-ink);font-size: var(--fs-sm);font-weight: 600;text-decoration: none;
}
.drawer__lang:hover {border-color: var(--c-accent);color: var(--c-accent);text-decoration: none; }
.drawer__lang[aria-current] {border-color: var(--c-accent);color: var(--c-accent); }
.drawer__lang svg {flex: none; }
.icon-btn {width: 42px;height: 42px;display: grid;place-items: center;border: 0;border-radius: 50%;background: transparent;color: var(--c-ink);cursor: pointer;transition: background .2s var(--ease);
}
.icon-btn:hover {background: var(--c-tint); }
.icon-btn svg {width: 19px;height: 19px; }

.hamburger {display: none;width: 44px;height: 44px;border: 0;border-radius: 12px;background: var(--c-tint);cursor: pointer;padding: 0;place-items: center;
}
.hamburger span {display: block;width: 20px;height: 2px;margin: 2.5px auto;background: var(--c-ink);border-radius: 2px;transition: transform .25s var(--ease), opacity .25s var(--ease);
}

/* --- mobile drawer -------------------------------------------- */
.drawer {position: fixed;inset: 0 auto 0 0;width: min(92vw, 400px);z-index: 120;background: #fff;border-right: 1px solid var(--c-line-soft);box-shadow: 20px 0 60px -30px rgba(9, 47, 87, 0.6);transform: translateX(-100%);transition: transform .32s var(--ease);display: flex;flex-direction: column;overflow-y: auto;padding: 1.1rem 1.4rem 2.2rem;
}
.drawer.is-open {transform: none; }
.drawer__top {display: flex;align-items: center;justify-content: space-between; }
.drawer__nav {margin-top: 1.2rem; }
.drawer__nav ul {margin: 0;padding: 0;list-style: none; }
.drawer__nav > ul > li {border-bottom: 1px solid var(--c-line-soft); }
.drawer__nav a, .drawer__group-btn {display: flex;width: 100%;align-items: center;justify-content: space-between;gap: 1rem;padding: 0.9rem 0.15rem;border: 0;background: none;text-align: right;color: var(--c-ink);font-size: 1rem;font-weight: 600;cursor: pointer;
}
.drawer__group-btn svg {width: 12px;height: 12px;transition: transform .25s var(--ease); }
.drawer__group.is-open .drawer__group-btn svg {transform: rotate(180deg); }
.drawer__sub {display: none;padding: 0 0 0.7rem 0.9rem; }
.drawer__group.is-open .drawer__sub {display: block; }
.drawer__sub a {font-size: var(--fs-sm);font-weight: 500;color: var(--c-ink-soft);padding: 0.5rem 0; }
.drawer__soon {display: flex;align-items: center;justify-content: space-between;gap: 0.6rem;padding: 0.5rem 0;font-size: var(--fs-sm);font-weight: 500;color: var(--c-ink-mute);
}
.drawer__cta {margin-top: 1.4rem; }
.scrim {position: fixed;inset: 0;z-index: 110;background: rgba(9, 47, 87, 0.42);opacity: 0;visibility: hidden;transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.scrim.is-open {opacity: 1;visibility: visible; }

/* ------------------------------------------------------------------
   06  HERO & PAGE HERO
   ------------------------------------------------------------------ */
.hero {position: relative;isolation: isolate;display: flex;align-items: center;min-height: clamp(460px, 46vw, 560px);padding-block: clamp(3.5rem, 5vw, 5rem);color: #fff;overflow: hidden;
}
.hero__bg {position: absolute;inset: 0;z-index: -2; }
.hero__bg img {width: 100%;height: 100%;object-fit: cover; }
/* the home photo is 3:1 with the Mini-C unit on the right; the crop follows
   the unit as the viewport narrows so the headline never lands on top of it */
.hero--home .hero__bg img {object-position: 64% 50%; }
@media (min-width: 1400px) {
  /* wide enough for the whole frame: keep the unit at the far right, clear
     of the headline's right edge */
  .hero--home .hero__bg img {object-position: 0% 50%; }
}
@media (max-width: 640px) {
  .hero--home .hero__bg img {object-position: 80% 50%; }
  /* on a phone the unit fills the frame behind the copy, so the scrim has to
     carry the contrast instead of the roof texture. Two classes deep so this
     wins over the base .hero::after that follows it in the file */
  .hero.hero--home::after {background: linear-gradient(180deg, rgba(6, 22, 40, 0.70) 0%,
                              rgba(6, 22, 40, 0.62) 38%,
                              rgba(6, 22, 40, 0.90) 100%),
      linear-gradient(90deg, rgba(6, 22, 40, 0.84) 0%,
                             rgba(6, 22, 40, 0.64) 100%);
  }
}
.hero::after {content: '';position: absolute;inset: 0;z-index: -1;background: linear-gradient(180deg, rgba(6, 22, 40, 0.55) 0%,
                            rgba(6, 22, 40, 0.30) 34%,
                            rgba(6, 22, 40, 0.62) 100%),
    linear-gradient(90deg, rgba(6, 22, 40, 0.92) 0%,
                           rgba(6, 22, 40, 0.76) 42%,
                           rgba(6, 22, 40, 0.34) 100%);
}
.hero__inner {max-width: 50rem; }
.hero h1, .hero .h1 {margin: 0 0 1.15rem;color: #fff;font-size: var(--fs-h1);font-weight: 700;text-shadow: 0 2px 24px rgba(4, 16, 30, 0.45);
}
.hero p {max-width: 38rem;margin: 0 0 2rem;color: rgba(255, 255, 255, 0.94);font-size: var(--fs-lead);text-shadow: 0 1px 16px rgba(4, 16, 30, 0.5);
}
.hero .eyebrow {color: #8fc0ff; }

/* ------------------------------------------------------------------
   The home hero hands over to the Live Barn band.
   The band used to climb up over the photograph and lay a gradient on
   it, which left a visible line: at the point the photo ended, the
   band's scrim was still ~30% transparent, so 30% of a fully lit photo
   stopped dead. Overlap plus a partial scrim can never be seamless.
   Instead the hero fades its own photograph to the band's navy inside
   its own box — the last 36 px are already flat #071321 — and the band
   starts on that same colour. Two flat blocks, one colour, no edge.
   ------------------------------------------------------------------ */
.hero.hero--home::after {background: linear-gradient(180deg,
      rgba(6, 22, 40, 0.55) 0%,
      rgba(6, 22, 40, 0.30) 32%,
      rgba(7, 19, 33, 0.52) 64%,
      rgba(7, 19, 33, 0.90) calc(100% - 76px),
      #071321 calc(100% - 36px),
      #071321 100%),
    linear-gradient(90deg,
      rgba(6, 22, 40, 0.92) 0%,
      rgba(6, 22, 40, 0.76) 42%,
      rgba(6, 22, 40, 0.34) 100%);
}

/* ------------------------------------------------------------------
   06a  HOME TOP — the live barn and the company line, one box
   Stacked, the hero (560) and the band (700) came to 1260 px under the
   header: taller than a laptop viewport, so the page never said what it
   was in one screen. Here they share a 700 px box and cross-fade, with
   the live frame underneath because it sets the height and shows first.
   The brand frame is the same `.hero--home` markup, absolutely laid
   over it — its photo keeps the same left-to-right scrim, and its
   bottom fade runs to #071321, the live frame's own colour, so the
   cross-fade never flashes a lighter edge.
   ------------------------------------------------------------------ */
.lbhero {position: relative;isolation: isolate;overflow: hidden;background: #071321;color: #fff;
}
.lbhero__stage {position: relative; }

/* Default, and what you get with JS off: the two frames simply stack —
   the hero first, then the band, exactly as they used to be. `is-run`
   is added by template.js only when the viewport can hold the slideshow,
   so nothing depends on script running to be readable. */
.lbhero__ctrl {display: none; }

/* --- slideshow on ------------------------------------------------ */
.lbhero.is-run .lbhero__frame--brand {position: absolute;inset: 0;z-index: 3;opacity: 0;visibility: hidden;transition: opacity 0.9s var(--ease), visibility 0.9s;
}
.lbhero.is-run .lbhero__frame--brand.is-on {opacity: 1;visibility: visible; }

/* The positioning frame's photo keeps moving while it is on: a slow push
   toward the Mini-C unit, not a pan. Three measurements decided that.
   At 1920 the photo (1920 x 640) sits in a 1920 x 600 box, so `cover`
   scales it by exactly 1.0 and there is no horizontal slack to pan with.
   The unit runs into the right edge at 1440, so any lateral drift either
   pushes it out of frame or drags it under the copy's scrim. And a 3:1
   roof shot has no near/far layers, so sliding it reads as the picture
   moving rather than as a camera. Scaling about the unit moves nothing.

   The cycle is the whole 32 s, not the 8 s the frame is visible: 0 % is
   it arriving at 1.00, 25 % is it leaving at 1.05, 100 % is the 1.00 it
   needs for the next arrival. The way back happens during the 24 s it
   is hidden, and because both ends hold the same value the loop never
   jumps — a reset at the start of the 0.9 s fade-out would be visible
   as the picture snapping smaller. template.js sets the phase on every
   frame change so the two clocks cannot drift apart. */
.lbhero.is-run .lbhero__frame--brand .hero__bg img {transform-origin: 16% 50%;animation: lbHeroPush 32s linear infinite;will-change: transform;
}
@keyframes lbHeroPush {
  0%   {transform: scale(1); }
  25%  {transform: scale(1.05); }
  100% {transform: scale(1); }
}

/* height comes from the frame's own box, not from the hero's min-height */
.lbhero.is-run .lbhero__frame--brand.hero {min-height: 0;padding-block: 0; }
/* in the slideshow the copy centres in the box and the control strip
   keeps its own line at the bottom, so the copy drops its bottom pad */
.lbhero.is-run .lbp__copy {padding: 60px 0 0; }
.lbhero.is-run .lbp__h2 {font-size: clamp(30px, 3vw, 42px); }
/* 700 was the band's own height when it stood alone; shared with the
   hero it makes the photo scale to 2100 px wide, which pushes the Mini-C
   unit off the right edge and leaves the headline over an empty roof.
   At 600 the 3:1 photo crops the way the hero's own rules expect. */
.lbhero.is-run .lbp {min-height: 600px; }
/* the control strip needs a lane at the bottom, but only the copy has to
   stay clear of it. The lane used to be the grid's bottom padding, which
   also pulled the instrument up: with the card now 464 px tall that left
   20 px above it and 116 below. As the copy's own bottom margin the lane
   keeps the words exactly where they were and lets the card centre in the
   whole band. */
.lbhero.is-run .lbp__in {padding-bottom: 0; }
.lbhero.is-run .lbp__copy {margin-bottom: 96px; }
.lbhero.is-run .lbhero__ctrl {display: block; }

/* --- the control strip ------------------------------------------- */
.lbhero__ctrl {position: absolute;right: 0;left: 0;bottom: 0;z-index: 5;pointer-events: none;
}
.lbhero__ctrl-in {display: flex;align-items: flex-end;gap: 26px;max-width: 1200px;margin: 0 auto;padding: 0 32px 40px;
}
.lbhero__seg {width: 138px;margin: 0;padding: 0;border: 0;background: none;text-align: right;cursor: pointer;pointer-events: auto;
}
.lbhero__seg-txt {display: flex;align-items: center;gap: 7px;color: rgba(226, 238, 250, 0.42);font-family: var(--f-sans);font-size: 9px;font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;transition: color 0.3s var(--ease);
}
.lbhero__seg-txt b {color: rgba(226, 238, 250, 0.30);font-weight: 700;font-variant-numeric: tabular-nums;
}
.lbhero__seg:hover .lbhero__seg-txt {color: rgba(255, 255, 255, 0.82); }
.lbhero__seg.is-on .lbhero__seg-txt {color: #fff; }
.lbhero__seg.is-on .lbhero__seg-txt b {color: #8fe8c4; }
.lbhero__seg-bar {display: block;height: 2px;margin-top: 10px;border-radius: 1px;background: rgba(255, 255, 255, 0.13);overflow: hidden;
}
.lbhero__seg-bar i {display: block;height: 100%;background: rgba(255, 255, 255, 0.50);transform: scaleX(0);transform-origin: right center;
}
.lbhero__seg.is-on .lbhero__seg-bar i {background: #8fe8c4;animation: lbheroBar linear forwards;animation-duration: var(--lb-hero-dur, 24s);
}
@keyframes lbheroBar {
  from {transform: scaleX(0); }
  to   {transform: scaleX(1); }
}

.lbhero__pause {display: grid;place-items: center;width: 26px;height: 26px;margin: 0;padding: 0;border: 1px solid rgba(180, 214, 240, 0.22);border-radius: 50%;background: rgba(8, 22, 37, 0.55);color: rgba(226, 238, 250, 0.62);cursor: pointer;pointer-events: auto;transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lbhero__pause:hover {color: #fff;border-color: rgba(180, 214, 240, 0.42); }
.lbhero__pause-on, .lbhero__pause-off {display: grid;place-items: center;grid-area: 1 / 1; }
.lbhero__pause-off {display: none; }
.lbhero__pause.is-paused .lbhero__pause-on {display: none; }
.lbhero__pause.is-paused .lbhero__pause-off {display: grid; }

/* Below 1080 there is no slideshow: the band switches to a stacked
   drawing-over-words layout there, and the two frames differ too much in
   height to share one box. template.js drops `is-run`, which puts the
   frames back in the default stack. */

@media (prefers-reduced-motion: reduce) {
  .lbhero.is-run .lbhero__frame--brand {transition: none; }
  /* the photo holds still: the frame still swaps, it just cuts */
  .lbhero.is-run .lbhero__frame--brand .hero__bg img {animation: none; }
  .lbhero__seg.is-on .lbhero__seg-bar i {animation: none;transform: scaleX(1); }
  .lbp__live i {animation: none; }
}

/* ------------------------------------------------------------------
   06b  LIVE BARN BAND
   The full-width dark band under the home hero. The plan drawing is the
   band's ground rather than a picture pasted onto it: the sheet is
   inverted to a dark plan before it reaches CSS (paper becomes #071321,
   ink becomes a pale cyan line), so there is no rectangle to blur away.
   ------------------------------------------------------------------ */
.lbp {position: relative;isolation: isolate;overflow: hidden;min-height: 700px;display: flex;align-items: center;background: #071321;color: #fff;
}
.lbp__bg {position: absolute;inset: -88px 0 -30px;z-index: 1; }
/* the asset is now cut from a DPR-2 capture of the same canvas (3196 px
   across instead of 1600), so it arrives at roughly 1:1 on a 1440 screen
   instead of being stretched 1.35x and then blurred on top of that */
.lbp__bg img {display: block;width: 100%;height: 100%;object-fit: cover;object-position: 52% 48%;-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 178px);mask-image: linear-gradient(180deg, transparent 0, #000 178px);
}
/* a 90° scrim for the words on the left, a 180° one to close the band
   into the white section below. It used to sit at 0.95/0.90 across the
   first third, which killed the drawing before it reached the middle —
   the copy only needs the scrim solid under itself, not that far out. */
.lbp__scrim {position: absolute;inset: 0;z-index: 2;pointer-events: none;background: linear-gradient(90deg,
      rgba(4, 13, 23, 0.88) 0%,
      rgba(4, 13, 23, 0.80) 28%,
      rgba(4, 13, 23, 0.42) 46%,
      rgba(4, 13, 23, 0.10) 68%,
      rgba(4, 13, 23, 0) 100%),
    linear-gradient(180deg,
      rgba(6, 18, 31, 0) 0%,
      rgba(6, 18, 31, 0) 60%,
      rgba(7, 19, 33, 0.40) 80%,
      rgba(7, 19, 33, 0.92) 95%,
      #071321 100%);
}
.lbp__in {position: relative;z-index: 3;width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 32px;display: grid;grid-template-columns: minmax(0, 1fr) auto;align-items: center;gap: 56px;
}
.lbp__copy {max-width: 540px;padding: 60px 0 96px; }

.lbp__live {display: inline-flex;align-items: center;gap: 9px;color: #8fe8c4;font-size: 10px;font-weight: 700;letter-spacing: 0.16em;text-transform: uppercase;
}
.lbp__live i {width: 6px;height: 6px;border-radius: 50%;background: #2ee59d;animation: lbppulse 2.6s infinite;
}
.lbp__live span {width: 22px;height: 1px;background: rgba(143, 232, 196, 0.35); }
@keyframes lbppulse {
  0%   {box-shadow: 0 0 0 0 rgba(46, 229, 157, 0.45); }
  70%  {box-shadow: 0 0 0 8px rgba(46, 229, 157, 0); }
  100% {box-shadow: 0 0 0 0 rgba(46, 229, 157, 0); }
}

.lbp__h2 {margin: 15px 0 0;color: #fff;font-size: clamp(27px, 2.5vw, 36px);font-weight: 700;line-height: 1.13;letter-spacing: -0.026em;text-shadow: 0 1px 22px rgba(0, 0, 0, 0.5);
}
.lbp__lead {margin: 14px 0 0;max-width: 44ch;color: rgba(230, 240, 250, 0.72);font-size: 14px;line-height: 1.64;
}
.lbp__row {display: flex;align-items: center;gap: 22px;margin: 26px 0 0;flex-wrap: wrap; }
.lbp__go {display: inline-flex;align-items: center;gap: 8px;padding: 11px 18px;border-radius: 4px;background: #fff;color: #0a2540;font-size: 12.5px;font-weight: 700;box-shadow: 0 12px -26px -16px rgba(0, 0, 0, 0.9);transition: transform 0.18s var(--ease);
}
.lbp__go:hover {transform: translateY(-1px);text-decoration: none; }
.lbp__link {display: inline-flex;align-items: center;gap: 7px;color: rgba(230, 240, 250, 0.78);font-size: 12px;font-weight: 600;
}
.lbp__link:hover {color: #fff; }

/* The instrument, sitting over the lit part of the drawing.
   400 px, not 306: at the old width the card could only hold a column of
   numbers, and a column of numbers next to a 115 m drawing reads as a
   caption. This one holds a trace, so it reads as an instrument. */
.lbp__hud {width: 400px;padding: 15px 20px 13px;border: 1px solid rgba(180, 214, 240, 0.17);border-radius: 10px;background: linear-gradient(180deg, rgba(10, 28, 44, 0.82), rgba(4, 12, 22, 0.74));-webkit-backdrop-filter: blur(18px) saturate(115%);backdrop-filter: blur(18px) saturate(115%);box-shadow: 0 40px -80px -50px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.lbp__hud-head {display: flex;align-items: center;justify-content: space-between;gap: 12px;padding-bottom: 10px;border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.lbp__hud-live {display: inline-flex;align-items: center;gap: 7px;color: rgba(226, 238, 250, 0.72);font-size: 9px;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;white-space: nowrap;
}
.lbp__hud-live i {width: 5px;height: 5px;border-radius: 50%;background: #2ee59d; }
/* the age ticks in JS; the digits are the only thing that changes, so the
   unit stays a text node the Chinese page can translate on its own */
.lbp__hud-age {display: inline-flex;align-items: baseline;gap: 3px;color: rgba(226, 238, 250, 0.30);font-size: 8.5px;letter-spacing: 0.10em;text-transform: uppercase;white-space: nowrap;
}
.lbp__hud-age b {color: rgba(226, 238, 250, 0.60);font-weight: 700;font-variant-numeric: tabular-nums;
}

/* the reading, and the reading's direction */
.lbp__hud-hero {display: flex;align-items: flex-start;justify-content: space-between;gap: 12px;padding: 13px 0 9px;
}
.lbp__hud-main b {color: #fff;font-size: 34px;font-weight: 700;line-height: 1;letter-spacing: -0.035em;font-variant-numeric: tabular-nums lining-nums;
}
.lbp__hud-main i {margin-right: 3px;color: rgba(226, 238, 250, 0.55);font-size: 13px;font-style: normal; }
.lbp__hud-main span {display: block;margin-top: 7px;color: rgba(226, 238, 250, 0.40);font-size: 8.5px;font-weight: 700;letter-spacing: 0.13em;text-transform: uppercase;
}
.lbp__hud-delta {display: inline-flex;align-items: center;gap: 3px;margin-top: 4px;padding: 3px 7px 3px 6px;border-radius: 99px;background: rgba(46, 229, 157, 0.10);color: #6fe3b4;font-size: 10px;font-weight: 700;font-variant-numeric: tabular-nums;white-space: nowrap;
}
.lbp__hud-delta i {color: rgba(111, 227, 180, 0.62);font-size: 8.5px;font-style: normal;letter-spacing: 0.04em; }

/* twenty-four hours of the same number */
.lbp__spark {display: block;width: 100%;height: 54px;overflow: visible; }
.lbp__spark-line {fill: none;stroke: #9ccbe6;stroke-width: 1.4;stroke-linecap: round;stroke-linejoin: round;opacity: 0.9;
}
.lbp__spark-dot {fill: #eaf5ff;stroke: rgba(150, 200, 228, 0.42);stroke-width: 4; }
.lbp__hud-axis {display: flex;justify-content: space-between;gap: 10px;margin-top: 3px;color: rgba(226, 238, 250, 0.30);font-size: 8.5px;letter-spacing: 0.10em;text-transform: uppercase;font-variant-numeric: tabular-nums;
}

.lbp__hud-fans {margin-top: 12px;padding-top: 12px;border-top: 1px solid rgba(255, 255, 255, 0.10); }
.lbp__hud-label {display: flex;align-items: baseline;justify-content: space-between;gap: 10px;color: rgba(226, 238, 250, 0.42);font-size: 8.5px;font-weight: 700;letter-spacing: 0.13em;text-transform: uppercase;
}
.lbp__hud-label b {color: #fff;font-size: 13px;font-weight: 700;letter-spacing: -0.01em;font-variant-numeric: tabular-nums;
}
.lbp__hud-label i {margin-right: 3px;color: rgba(226, 238, 250, 0.42);font-size: 10px;font-style: normal; }
/* 38 blocks of two fans — 76 hairlines would be a barcode */
.lbp__bars {display: flex;gap: 2px;margin-top: 8px; }
.lbp__bars i {flex: 1 1 0;height: 9px;border-radius: 1.5px;background: rgba(255, 255, 255, 0.09); }
.lbp__bars i.is-on {background: linear-gradient(180deg, #8ed6f7, #4a9fcb); }

.lbp__hud-stats {display: grid;grid-template-columns: 1fr 1fr;margin: 13px 0 0;padding: 12px 0 0;border-top: 1px solid rgba(255, 255, 255, 0.10);list-style: none;
}
.lbp__hud-stats li {display: grid;grid-template-columns: auto auto 1fr;align-items: baseline;gap: 0 4px; }
.lbp__hud-stats li + li {border-right: 1px solid rgba(255, 255, 255, 0.10);padding-right: 15px; }
.lbp__hud-stats b {color: #fff;font-size: 15px;font-weight: 700;letter-spacing: -0.015em;font-variant-numeric: tabular-nums lining-nums;
}
.lbp__hud-stats i {color: rgba(226, 238, 250, 0.5);font-size: 10.5px;font-style: normal; }
.lbp__hud-stats span {grid-column: 1 / -1;margin-top: 5px;color: rgba(226, 238, 250, 0.36);font-size: 8.5px;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;
}

.lbp__hud-systems {margin-top: 13px;padding-top: 12px;border-top: 1px solid rgba(255, 255, 255, 0.10); }
.lbp__hud-sect {display: block;color: rgba(226, 238, 250, 0.42);font-size: 8.5px;font-weight: 700;letter-spacing: 0.13em;text-transform: uppercase;
}
.lbp__hud-systems ul {display: grid;grid-template-columns: 1fr 1fr;gap: 7px 16px;margin: 9px 0 0;padding: 0;list-style: none;
}
.lbp__hud-systems li {display: grid;grid-template-columns: 6px 1fr auto;align-items: center;gap: 0 7px; }
.lbp__hud-systems li > i {width: 5px;height: 5px;border-radius: 50%;background: #2ee59d;box-shadow: 0 0 0 3px rgba(46, 229, 157, 0.12);
}
.lbp__hud-systems li.is-soon > i {background: transparent;border: 1px solid rgba(226, 238, 250, 0.38);box-shadow: none;
}
.lbp__hud-systems b {color: rgba(240, 247, 255, 0.92);font-size: 10.5px;font-weight: 600;letter-spacing: -0.005em;white-space: nowrap;
}
.lbp__hud-systems span {color: rgba(226, 238, 250, 0.34);font-size: 8px;font-weight: 700;letter-spacing: 0.10em;text-transform: uppercase;white-space: nowrap;
}
.lbp__hud-note {margin: 13px 0 0;padding-top: 9px;border-top: 1px solid rgba(255, 255, 255, 0.10);color: rgba(226, 238, 250, 0.30);font-size: 8.5px;letter-spacing: 0.05em;text-transform: uppercase;
}

/* Below 1080 the drawing becomes a band of its own above the words: a
   percentage scrim cannot line up with copy whose height changes with the
   headline. 46% is where it starts to let go, which keeps the sheet clear
   of the paragraph and off the instrument. */
@media (max-width: 1080px) {
  .lbp {min-height: 0;display: block; }
  .lbp__in {grid-template-columns: minmax(0, 1fr);gap: 0;padding: 0 24px; }
  .lbp__bg {inset: -24px 0 auto;height: 368px; }
  .lbp__bg img {object-position: 26% 42%;opacity: 0.9;-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 104px, #000 46%, transparent 88%);mask-image: linear-gradient(180deg, transparent 0, #000 104px, #000 46%, transparent 88%);
  }
  .lbp__scrim {display: none; }
  .lbp__copy {max-width: none;padding: 222px 0 30px; }
  .lbp__hud {width: auto;max-width: 460px;margin: 0 0 34px; }
}
@media (max-width: 620px) {
  .lbp__hud {max-width: none;padding: 14px 16px 12px; }
  .lbp__hud-main b {font-size: 28px; }
  .lbp__hud-systems ul {gap: 7px 12px; }
  .lbp__hud-systems b {font-size: 10px; }
}
/* On a phone the hero needs a much heavier scrim anyway, so it carries its
   own fade-to-navy and the band inherits an already flat colour. */
@media (max-width: 640px) {
  .hero.hero--home::after {background: linear-gradient(180deg,
        rgba(6, 22, 40, 0.70) 0%,
        rgba(6, 22, 40, 0.62) 38%,
        rgba(7, 19, 33, 0.78) 80%,
        #071321 calc(100% - 56px),
        #071321 100%),
      linear-gradient(90deg,
        rgba(6, 22, 40, 0.84) 0%,
        rgba(6, 22, 40, 0.64) 100%);
  }
}

/* shorter banner used on inner pages */
.page-hero {position: relative;isolation: isolate;display: flex;align-items: flex-end;min-height: clamp(280px, 26vw, 360px);padding-block: clamp(2.4rem, 4vw, 3.4rem);color: #fff;overflow: hidden;
}
.page-hero__bg {position: absolute;inset: 0;z-index: -2; }
.page-hero__bg img {width: 100%;height: 100%;object-fit: cover; }

/* FanPilot Basic opens on a wide ceiling shot. Cropped down to the height of
 * a small hero, the middle band is nothing but purlins and skylights, which
 * reads as an empty gradient. Pulling the crop down puts the hanging baffles
 * and the pens in frame instead. */
.page-hero--fan-barn .page-hero__bg img {object-position: center 74%; }
.page-hero::after {content: '';position: absolute;inset: 0;z-index: -1;background: linear-gradient(180deg, rgba(6, 22, 40, 0.5) 0%, rgba(6, 22, 40, 0.72) 100%),
    linear-gradient(90deg, rgba(6, 22, 40, 0.88) 0%, rgba(6, 22, 40, 0.6) 58%, rgba(6, 22, 40, 0.42) 100%);
}
.page-hero h1 {margin: 0 0 0.5rem;color: #fff;font-size: var(--fs-h1);text-shadow: 0 2px 20px rgba(4, 16, 30, 0.4); }
.page-hero p {max-width: 46rem;margin: 0;color: rgba(255, 255, 255, 0.92);text-shadow: 0 1px 14px rgba(4, 16, 30, 0.45); }
.page-hero .eyebrow {color: #8fc0ff; }

/* breadcrumb */
.breadcrumb {display: flex;flex-wrap: wrap;gap: 0.45rem;margin: 0 0 1rem;padding: 0;list-style: none;font-size: var(--fs-xs);color: rgba(255, 255, 255, 0.72);
}
.breadcrumb li::after {content: '/';margin-right: 0.45rem;opacity: .5; }
.breadcrumb li:last-child::after {content: none; }
.breadcrumb a {color: inherit; }
.breadcrumb a:hover {color: #fff; }

/* ------------------------------------------------------------------
   06c  FILM BAND — the introduction film
   ------------------------------------------------------------------ */
/* Sits directly under a dark photographic hero, so it keeps the hero's
   darkness instead of starting a light section and cutting the opening
   in two. The only interactive thing in the band is the film. */
.film {position: relative;padding: clamp(38px, 4.4vw, 64px) 0 clamp(42px, 4.8vw, 70px);background: radial-gradient(120% 130% at 50% -10%, rgba(26, 106, 255, 0.18) 0%, rgba(5, 18, 31, 0) 58%),
    linear-gradient(180deg, #071d33 0%, #05121f 100%);border-top: 1px solid rgba(255, 255, 255, 0.05);color: #fff;overflow: hidden;
}
.film__head {display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);gap: clamp(14px, 3vw, 56px);align-items: end;margin-bottom: clamp(22px, 2.8vw, 34px);
}
.film__eyebrow {display: inline-flex;align-items: center;gap: 8px;color: rgba(156, 203, 240, 0.85);font-size: 10.5px;font-weight: 700;letter-spacing: 0.18em;text-transform: uppercase;
}
.film__eyebrow::before {content: '';width: 18px;height: 1px;background: currentColor;opacity: .7;
}
.film__h2 {margin: 12px 0 0;font-size: clamp(1.5rem, 1.02rem + 1.5vw, 2.2rem);line-height: 1.14;letter-spacing: -0.022em;color: #fff;
}
.film__lead {margin: 0 0 3px;color: rgba(226, 238, 250, 0.64);font-size: clamp(.94rem, .9rem + .18vw, 1rem);line-height: 1.62;max-width: 46ch;
}

/* 16:9, and the poster is the frame the film opens on */
.film__stage {position: relative;margin: 0;aspect-ratio: 16 / 9;border-radius: 16px;overflow: hidden;background: #04101c;box-shadow: 0 60px -100px -66px rgba(0, 0, 0, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.film__video {width: 100%;height: 100%;object-fit: cover;display: block;background: #04101c; }

/* the cover: a scrim so the words survive a bright frame, a disc, a label */
.film__play {position: absolute;inset: 0;display: grid;place-items: center;align-content: center;gap: 14px;padding: 0;border: 0;background: radial-gradient(42% 52% at 50% 46%, rgba(4, 12, 22, 0.42) 0%, rgba(4, 12, 22, 0.10) 62%, rgba(4, 12, 22, 0.34) 100%),
    linear-gradient(180deg, rgba(4, 12, 22, 0.06), rgba(4, 12, 22, 0.22));color: #fff;cursor: pointer;transition: opacity .4s ease, visibility .4s;
}
.film__play:focus-visible {outline: 2px solid #fff;outline-offset: -6px; }
.film__disc {width: 104px;height: 104px;display: grid;place-items: center;border-radius: 50%;background: rgba(255, 255, 255, 0.95);color: #061a2c;box-shadow: 0 22px -50px -22px rgba(0, 0, 0, 0.85), 0 0 0 0 rgba(255, 255, 255, 0.35);transition: transform .35s cubic-bezier(.2,.7,.3,1), background .3s, box-shadow .35s;
}
.film__disc::after {content: '';display: block;margin-right: 6px;border-right: 24px solid currentColor;border-top: 14px solid transparent;border-bottom: 14px solid transparent;
}
.film__play:hover .film__disc {transform: scale(1.06);box-shadow: 0 26px -60px -22px rgba(0, 0, 0, .9), 0 0 0 12px rgba(255, 255, 255, .10); }
.film__label {font-size: 11.5px;font-weight: 700;letter-spacing: 0.18em;text-transform: uppercase;color: rgba(255, 255, 255, 0.96);text-shadow: 0 1px 14px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.5);
}
/* the length, because a 97 s film is a commitment and people like to know */
.film__len {position: absolute;left: 16px;bottom: 14px;display: inline-flex;align-items: center;gap: 6px;padding: 5px 10px;border-radius: 99px;background: rgba(4, 12, 22, 0.62);-webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px);color: rgba(255, 255, 255, 0.86);font-size: 10.5px;font-weight: 700;letter-spacing: 0.08em;font-variant-numeric: tabular-nums;
}
.film__len i {width: 5px;height: 5px;border-radius: 50%;background: #2ee59d;font-style: normal; }

.film__stage.is-playing .film__play {opacity: 0;visibility: hidden; }
.film__stage.is-loading .film__disc {opacity: .55; }
.film__note {display: flex;flex-wrap: wrap;gap: 6px 18px;margin: 16px 0 0;color: rgba(226, 238, 250, 0.52);font-size: 11px;letter-spacing: 0.06em;text-transform: uppercase;
}
.film__note span {display: inline-flex;align-items: center;gap: 8px; }
.film__note span + span::before {content: '';width: 3px;height: 3px;border-radius: 50%;background: currentColor;opacity: .6; }

@media (max-width: 900px) {
  .film__head {grid-template-columns: minmax(0, 1fr);gap: 12px;align-items: start; }
  .film__stage {border-radius: 12px; }
  .film__disc {width: 68px;height: 68px; }
  .film__disc::after {border-right-width: 16px;border-top-width: 10px;border-bottom-width: 10px; }
  .film__len {left: 10px;bottom: 10px; }
}

/* ------------------------------------------------------------------
   07  CARD GRIDS
   ------------------------------------------------------------------ */
.card-grid {display: grid;gap: 20px;grid-template-columns: repeat(4, minmax(0, 1fr));
}
.card-grid--3 {grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--2 {grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--wide-gap {gap: 28px; }
.section-head + .card-grid,
.section-head + .feature-panel,
.section-head + .split {margin-top: clamp(2rem, 3vw, 2.9rem); }

.card {display: flex;flex-direction: column;overflow: hidden;border-radius: var(--r-lg);background: var(--c-tint);box-shadow: 0 14px -30px -26px rgba(9, 47, 87, 0.5);transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover {transform: translateY(-4px);box-shadow: 0 26px -46px -28px rgba(9, 47, 87, 0.55);
}
.card__media {position: relative;aspect-ratio: 16 / 11;background: var(--c-tint-strong);overflow: hidden;
}
.card__media img {width: 100%;height: 100%;object-fit: cover;transition: transform .55s var(--ease); }

/* Product photographs on white: keep the whole device visible instead of
   cropping it. The plate is left off entirely — the cut-outs sit on the
   card's own wash, so no white tile shows up behind them. */
.card__media--contain {background: transparent; }
.card__media--contain img {object-fit: contain;padding: 1.1rem;filter: drop-shadow(0 14px 20px rgba(9, 47, 87, 0.13));
}
/* two of the family shots are still studio photographs with their backdrop
   intact; the shadow would trace their rectangle, so they go without */
.card__media--contain img.is-photo {filter: none; }
.card:hover .card__media img {transform: scale(1.045); }
.card__body {position: relative;display: flex;flex-direction: column;gap: 0.5rem;flex: 1;padding: 1.9rem 1.3rem 1.35rem;
}
.card__badge {position: absolute;top: -22px;right: 1.3rem;width: 44px;height: 44px;display: grid;place-items: center;border-radius: 50%;background: var(--c-badge-1);color: #fff;box-shadow: 0 8px -18px -10px rgba(9, 47, 87, 0.6);
}
.card__badge svg {width: 22px;height: 22px; }
.card__badge--2 {background: var(--c-badge-2); }
.card__badge--3 {background: var(--c-badge-3); }
.card__badge--4 {background: var(--c-badge-4); }
.card__badge--5 {background: var(--c-badge-5); }
.card__badge--6 {background: var(--c-badge-6); }
.card__title {margin: 0;font-size: var(--fs-h3);font-weight: 700;letter-spacing: var(--ls-tight);color: var(--c-ink);
}
/* the P/N line on a card that has one (Products → New hardware) */
.card__meta {margin-bottom: 0.35rem; }
.card__text {margin: 0;font-size: var(--fs-sm);line-height: 1.6;color: var(--c-ink-soft);
}
.card__link {margin-top: auto;padding-top: 0.7rem; }
.card--plain .card__body {padding-top: 1.4rem; }

/* --- solution-family card (FanPilot / TargetSoak / …) ---------- */
.card__eyebrow {display: block;font-size: var(--fs-xs);font-weight: 700;letter-spacing: 0.09em;text-transform: uppercase;color: var(--c-accent);
}
.card__title--lg {font-size: calc(var(--fs-h3) * 1.22);letter-spacing: -0.055em; }

/* --- one-glance fit statement on a grade card ----------------------
   A grade is chosen by situation, not by spec, so the card says which
   barn it is for before it says anything technical. Two lines share one
   block — the scene, then the reader it suits — so they read as a single
   judgement instead of two remarks.

   The block is washed in the family colour rather than just ruled: on a
   row of white cards a tinted patch is the thing the eye lands on first,
   which is the whole job here. The wash fades out to the right so the
   block has an edge at the rule and none at the text end — it reads as
   a mark in the margin, not as a panel stuck onto the card. The tint is
   kept below 15% so the title and the photograph still lead. */
.card__fit {margin-top: 0.15rem;padding: 0.6rem 0.7rem;border-right: 3px solid var(--c-accent);border-radius: 9px 0 0 9px;background: linear-gradient(to left, rgba(26, 106, 255, 0.13), rgba(26, 106, 255, 0.045));
}
.card__fit--soak {border-right-color: var(--c-badge-6);background: linear-gradient(to left, rgba(15, 155, 184, 0.15), rgba(15, 155, 184, 0.05));
}
.card__fit-scene {margin: 0;font-size: var(--fs-body);font-weight: 700;line-height: 1.38;letter-spacing: -0.01em;color: var(--c-ink);
}
.card__fit-best {margin: 0.2rem 0 0;font-size: 0.875rem;font-weight: 500;line-height: 1.45;color: #3a4a63;
}
/* on the soak wash the body ink needs a touch more weight to hold up
   against the teal, so it darkens rather than greys out */
.card__fit--soak .card__fit-best {color: #10485a; }

/* --- two-state family card (NutriTrack) ------------------------------
   The presence signal is shipping, the feed analytics are not. A single
   "Coming soon" pill would hide the half that works; a single "Available"
   would overclaim the half that does not. Two chips, each with its own
   dot, sit between the description and the link where a status belongs. */
.card__tags {display: flex;flex-wrap: wrap;gap: 0.3rem;margin-top: 0.15rem; }
.card__tag {display: inline-flex;align-items: center;gap: 0.3rem;padding: 0.2rem 0.45rem;border-radius: 5px;font-size: 0.55rem;font-weight: 700;letter-spacing: 0.055em;text-transform: uppercase;white-space: nowrap;
}
.card__tag::before {content: '';width: 5px;height: 5px;border-radius: 50%;background: currentColor;
}
.card__tag--live {background: rgba(15, 155, 184, 0.12);color: #0b6f84; }
.card__tag--soon {background: var(--c-tint-strong);color: var(--c-ink-mute); }

/* --- status strip under a half-shipped hero ------------------------- */
.status-strip {border-bottom: 1px solid var(--c-line-soft);background: var(--c-tint);
}
.status-strip__inner {display: flex;flex-wrap: wrap;align-items: center;gap: 0.7rem 1.2rem;padding-block: 0.95rem;
}
.status-strip__tags {display: flex;flex-wrap: wrap;gap: 0.4rem; }
.status-strip__note {flex: 1 1 26rem;margin: 0;font-size: var(--fs-xs);line-height: 1.6;color: var(--c-ink-mute);
}
.status-chip {display: inline-flex;align-items: center;gap: 0.4rem;padding: 0.28rem 0.62rem;border-radius: 999px;font-size: 0.6rem;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;white-space: nowrap;
}
.status-chip::before {content: '';width: 6px;height: 6px;border-radius: 50%;background: currentColor;
}
.status-chip--live {background: rgba(15, 155, 184, 0.13);color: #0b6f84; }
.status-chip--soon {background: var(--c-tint-strong);color: var(--c-ink-mute); }

/* --- "Coming Soon" state --------------------------------------
   Used for species that are announced but not open. The card is
   inert: no link, desaturated image, and the pill marks why.      */
.soon-pill {position: absolute;top: 0.85rem;left: 0.85rem;z-index: 1;
  /* The pill is a state flag, not a call to action: at 0.66 rem it was the
     loudest thing on an otherwise inert card. Half the type, half the
     padding, and it reads as a stamp on the picture rather than a button. */padding: 0.22rem 0.5rem;border-radius: 999px;background: rgba(9, 47, 87, 0.92);color: #fff;font-size: 0.52rem;font-weight: 700;letter-spacing: 0.1em;text-transform: uppercase;white-space: nowrap;
}
.card--soon {cursor: default; }
.card--soon:hover {transform: none;box-shadow: var(--c-shadow); }
.card--soon:hover .card__media img {transform: none; }
.card--soon .card__media img {filter: saturate(0.32); }
.card--soon .card__title {color: var(--c-ink-mute); }
.card__link--soon {color: var(--c-ink-mute);font-size: 0.72rem;font-weight: 700;letter-spacing: 0.1em;text-transform: uppercase;
}
.card__link--soon:hover {color: var(--c-ink-mute); }

/* slim inline variant, used in the species sections */
.soon-note {display: flex;flex-wrap: wrap;align-items: center;gap: 0.6rem;margin: 0;font-size: var(--fs-sm);color: var(--c-ink-mute);
}
.soon-note .soon-pill {position: static; }
.split.is-soon .split__media img {filter: saturate(0.4); }

/* small tag, used in the mega menu, the drawer and the footer */
.soon-tag {display: inline-block;padding: 0.12rem 0.45rem;border-radius: 999px;background: var(--c-tint-strong);color: var(--c-ink-mute);font-size: 0.58rem;font-style: normal;font-weight: 700;letter-spacing: 0.1em;text-transform: uppercase;white-space: nowrap;
}

/* --- mega-menu additions -------------------------------------- */
.mega__meta {font-size: 0.68rem;font-weight: 600;color: var(--c-ink-mute);
}
.mega__links--meta a {display: flex;flex-direction: column;gap: 0.05rem; }
/* the grades block sits under the families in the same mega column */
.mega__col-title--sub {margin-top: 1.15rem; }
.mega__species li.is-soon {display: grid;grid-template-columns: minmax(0, 1fr) auto;align-items: center;gap: 0.5rem;
}
.mega__soon {display: grid;grid-template-columns: 46px 1fr auto;align-items: center;gap: 0.75rem;padding: 0.5rem 0;color: var(--c-ink-mute);font-size: var(--fs-sm);font-weight: 600;
}
.mega__soon img {width: 46px;height: 46px;object-fit: cover;border-radius: 10px;opacity: 0.5; }
.mega__soon i {width: 8px;height: 8px;border-left: 2px solid currentColor;border-top: 2px solid currentColor;transform: rotate(45deg);opacity: 0.25;
}

/* the "two small cards + one large image" poultry row */
.card-row-split {display: grid;grid-template-columns: repeat(2, minmax(0, 300px)) minmax(0, 1fr);gap: 20px;
}
/* This card spans two columns, so the shared 16:11 plate would make its photo
   ~430 px tall — nine tenths of the card, with the copy squeezed into what is
   left. A wider plate suits the barn panorama it holds (5:1 before cropping)
   and puts the photograph back in proportion with the three lines under it. */
/* The wide card is the only one in the row holding a portrait photograph, so
   it needs its own frame. At the shared 16:11 the picture grew to 426 px and
   pushed the copy into a strip at the bottom; at 2.2:1 the crop sliced the
   cow's muzzle in half. 1.4:1 is the tallest frame the row can take before
   the two small cards start to look stretched — it fits the whole head, and
   the three cards still share one baseline (.card-row-split stretches them).
   The 0% anchor is deliberate: object-fit: cover on a 1.09:1 cutout in a 1.4:1
   window crops ~22% of the height, and centring that crop decapitates the
   ears. Anchoring to the top keeps the head whole and spends the crop on the
   chest, which the body panel is going to cover anyway. */
.card-row-split > .card-row-split__wide .card__media {aspect-ratio: 1.4 / 1; }
.card-row-split > .card-row-split__wide .card__media img {object-position: 50% 0; }

/* ------------------------------------------------------------------
   08  FEATURE PANEL  (3-up icon strip on a tinted slab)
   ------------------------------------------------------------------ */
.feature-panel {display: grid;gap: clamp(1.4rem, 3vw, 3rem);padding: clamp(1.8rem, 3vw, 2.6rem);border-radius: var(--r-xl);background: var(--c-tint);
}
.feature-panel--3 {grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-panel--2 {grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature {display: flex;flex-direction: column;gap: 0.55rem; }
.feature__icon {color: var(--c-ink); }
.feature__icon svg {width: 38px;height: 38px; }
.feature h3 {margin: 0;font-size: 1.0625rem;font-weight: 700;letter-spacing: -0.03em;
}
.feature p {margin: 0;font-size: var(--fs-sm);line-height: 1.6;color: var(--c-ink-soft);
}

/* ------------------------------------------------------------------
   09  SPLIT SECTIONS & STATS
   ------------------------------------------------------------------ */
.split {display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);gap: clamp(1.8rem, 4vw, 4rem);align-items: center;
}
.split--reverse .split__media {order: 2; }
.split__media {border-radius: var(--r-xl);overflow: hidden; }
.split__media img {width: 100%;aspect-ratio: 4 / 3;object-fit: cover;
}
.split__media--contain {background: var(--c-tint); }
.split__media--contain img {object-fit: contain;aspect-ratio: 4 / 3;padding: 1.6rem; }
/* a supplied composite keeps its own proportions: forced into 4:3 it loses
   the wordmark on one side and a dashboard column on the other */
.split__media--hero img {aspect-ratio: 1600 / 1142; }
/* portrait plate for upright product renders (DB2 / DB3 / DB7 cabinets).
   The renders are cut to transparency, so the plate carries the card wash
   instead of white — a white plate on a white page still reads as a white
   photo even when every pixel behind the device is transparent.
   The plate owns the ratio and the padding; the image is laid out at its own
   proportions and simply capped to the plate. Sizing the image instead made
   the plate height depend on the image while the image height depended on the
   plate, and the render spilled out of the crop. */
.split__media--product {background: var(--c-tint);border: 0;aspect-ratio: 4 / 5;position: relative;
}
.split__media--product img {position: absolute;inset: 1.6rem;width: calc(100% - 3.2rem);height: calc(100% - 3.2rem);aspect-ratio: auto;object-fit: contain;filter: drop-shadow(0 18px 26px rgba(9, 47, 87, 0.15));
}
/* "photo for reference only" — pinned to the foot of the product plate,
   under the render but inside the frame so it travels with the image. */
.split__media--product .product-note {position: absolute;right: 0;left: 0;bottom: 0.9rem;text-align: center;font-size: var(--fs-xs);color: var(--c-ink-mute);padding: 0 1rem;line-height: 1.4;z-index: 1;
}
/* a composite that is half white (a light dashboard beside a dark photo):
   without a hairline of its own, the pale corner dissolves into the page and
   the rounded frame only reads on one side. Inside the box, not around it,
   so the geometry does not shift. */
.split__media--plate {box-shadow: inset 0 0 0 1px rgba(16, 38, 63, 0.11); }
.split__media--tall img {aspect-ratio: 5 / 4; }
.split__body h2 {margin-bottom: 0.85rem; }

.media-frame {border-radius: var(--r-xl);overflow: hidden; }

.check-list {margin: 0 0 1.6rem;padding: 0;list-style: none; }
.check-list li {position: relative;padding-right: 1.9rem;margin-bottom: 0.55rem;font-size: var(--fs-sm);
}
.check-list li::before {content: '';position: absolute;right: 0;top: 0.35em;width: 1.05rem;height: 0.6rem;border-right: 2.5px solid var(--c-accent);border-bottom: 2.5px solid var(--c-accent);transform: rotate(-45deg);
}

.stats {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 1.4rem;padding: 0;margin: 0;list-style: none;
}
.stats--3 {grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat {padding-left: 1rem;border-right: 2px solid var(--c-accent);padding-right: 1rem; }
.stat b {display: block;font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.75rem);font-weight: 800;letter-spacing: -0.05em;color: var(--c-ink);line-height: 1.05;
}
.stat span {display: block;margin-top: 0.3rem;font-size: var(--fs-sm);color: var(--c-ink-soft); }

/* ------------------------------------------------------------------
   10  PROCESS / ACCORDION
   ------------------------------------------------------------------ */
.process-head {text-align: center;margin-bottom: clamp(2rem, 3.6vw, 3rem); }
.process-head .display {margin: 0 0 0.6rem; }
.process-head p {margin: 0;color: var(--c-ink-soft); }

.acc-stack {display: grid;gap: 14px; }
.acc {border-radius: var(--r-lg);background: var(--c-accent-soft);overflow: hidden;
}
.acc + .acc {margin-top: 0; }
.acc__head {display: flex;align-items: center;gap: 1rem;width: 100%;padding: 1.15rem clamp(1.1rem, 2vw, 1.6rem);border: 0;background: none;text-align: right;cursor: pointer;color: var(--c-ink);font-size: 1.0625rem;font-weight: 700;letter-spacing: -0.025em;
}
.acc__head span {flex: 1; }
.acc__head svg {width: 18px;height: 18px;flex: none;transition: transform .3s var(--ease); }
.acc.is-open .acc__head svg {transform: rotate(180deg); }
.acc__panel {display: grid;grid-template-rows: 0fr;transition: grid-template-rows .35s var(--ease);
}
.acc.is-open .acc__panel {grid-template-rows: 1fr; }
.acc__panel > div {overflow: hidden; }
.acc__body {display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);gap: clamp(1.4rem, 3vw, 2.6rem);padding: 0 clamp(1.1rem, 2vw, 1.6rem) clamp(1.3rem, 2.4vw, 1.9rem);
}
.acc__body img {width: 100%;aspect-ratio: 4 / 3;object-fit: cover;border-radius: var(--r-md); }
.acc__body p {font-size: var(--fs-sm);margin-bottom: 1.1rem; }
.acc__list {margin: 0;padding: 0;list-style: none; }
.acc__list li {display: grid;grid-template-columns: 42px 1fr;gap: 0.9rem;padding: 0.85rem 0;border-top: 1px solid rgba(25, 40, 65, 0.14);
}
.acc__list svg {width: 30px;height: 30px;color: var(--c-ink); }
.acc__list b {display: block;color: var(--c-ink);font-size: var(--fs-sm);font-weight: 700; }
.acc__list span {font-size: var(--fs-xs);color: var(--c-ink-soft); }

/* ------------------------------------------------------------------
   11  CTA BAND
   ------------------------------------------------------------------ */
.cta-band {display: grid;grid-template-columns: minmax(0, 1.15fr) auto;align-items: center;gap: clamp(1.6rem, 4vw, 3.4rem);padding: clamp(1.6rem, 3vw, 2.3rem) clamp(1.5rem, 3vw, 2.4rem);border-radius: var(--r-xl);background: var(--c-tint);
}
.cta-band--dark {background: var(--c-navy);color: rgba(255, 255, 255, 0.85); }
.cta-band--dark h2, .cta-band--dark h3, .cta-band--dark .cta__title {color: #fff; }
.cta__left {display: grid;grid-template-columns: 60px 1fr;gap: 1.2rem;align-items: start; }
.cta__left svg {width: 52px;height: 52px;color: var(--c-ink); }
.cta-band--dark .cta__left svg {color: #fff; }
.cta__title {margin: 0 0 0.35rem;font-size: var(--fs-h3);font-weight: 700;letter-spacing: -0.035em;color: var(--c-ink);
}
.cta__text {margin: 0 0 1.1rem;font-size: var(--fs-sm);max-width: 34rem; }
.cta__badges {display: grid;grid-template-columns: repeat(3, minmax(0, auto));gap: clamp(1rem, 2.4vw, 2rem);align-items: center;
}
.cta__badges .cta__badge {display: flex;align-items: flex-start;gap: 0.7rem;font-size: var(--fs-xs);font-weight: 600;color: var(--c-ink);line-height: 1.4;max-width: 12rem;
}
.cta__badges .cta__badge + .cta__badge {border-right: 1px solid var(--c-line);padding-right: clamp(1rem, 2.4vw, 2rem); }
/* a German compound — Verdrahtungsänderungen — is wider than the 12rem
   column, and a flex item will not shrink past its longest word, so the
   label painted over the badge beside it. Let the word break instead. */
.cta__badges .cta__badge > span {min-width: 0;overflow-wrap: anywhere;hyphens: auto; }
.cta__badges svg {width: 28px;height: 28px;flex: none;color: var(--c-ink); }
.cta-band--dark .cta__badge, .cta-band--dark .cta__badge svg {color: #fff; }
.cta-band--dark .cta__badge + .cta__badge {border-color: rgba(255, 255, 255, 0.22); }
.cta-band--dark .cta__text {color: rgba(255, 255, 255, 0.8); }

/* ------------------------------------------------------------------
   12  FOOTER
   ------------------------------------------------------------------ */
.site-footer {background: var(--c-navy);color: rgba(255, 255, 255, 0.72); }
.site-footer__main {display: grid;grid-template-columns: minmax(0, 1.25fr) minmax(0, 2.6fr);gap: clamp(2rem, 5vw, 5rem);padding-block: clamp(2.6rem, 4.4vw, 4rem);
}
.site-footer h3, .site-footer h4 {color: #fff; }
.footer-tagline {margin: 1.1rem 0 1.1rem;font-size: var(--fs-sm);line-height: 1.65;max-width: 30rem;
}
.footer-social {display: flex;gap: 0.65rem; }
.footer-social a {width: 38px;height: 38px;display: grid;place-items: center;border-radius: 50%;background: rgba(255, 255, 255, 0.12);color: #fff;
}
.footer-social a:hover {background: var(--c-accent);text-decoration: none; }
.footer-social svg {width: 17px;height: 17px; }

.footer-cols {display: grid;grid-template-columns: repeat(5, minmax(0, 1fr));gap: clamp(1rem, 1.9vw, 1.7rem);
}
.footer-col h4 {margin: 0 0 1rem;font-size: var(--fs-xs);font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;color: rgba(255, 255, 255, 0.55);
}
.footer-col ul {margin: 0;padding: 0;list-style: none; }
.footer-col li {margin-bottom: 0.5rem; }
.footer-col a {color: rgba(255, 255, 255, 0.78);font-size: var(--fs-sm); }
.footer-col a:hover {color: #fff; }
.footer-col li.is-soon {display: flex;align-items: center;gap: 0.45rem;color: rgba(255, 255, 255, 0.42);font-size: var(--fs-sm);
}
.footer-col li.is-soon .soon-tag {background: rgba(255, 255, 255, 0.13);color: rgba(255, 255, 255, 0.6);
}

.site-footer__bottom {border-top: 1px solid rgba(255, 255, 255, 0.14);padding-block: 1.15rem;font-size: var(--fs-xs);
}
.site-footer__bottom .container {display: flex;flex-wrap: wrap;gap: 0.8rem 1.6rem;align-items: center;justify-content: space-between;
}
.site-footer__bottom a {color: rgba(255, 255, 255, 0.78); }

/* ------------------------------------------------------------------
   13  TABS, CHIPS, TABLES, SPEC LISTS
   ------------------------------------------------------------------ */
.chips {display: flex;flex-wrap: wrap;gap: 0.55rem; }
.chip {display: inline-flex;align-items: center;gap: 0.45rem;padding: 0.6rem 1.05rem;border: 1px solid var(--c-line);border-radius: var(--r-pill);background: #fff;color: var(--c-ink);font-size: var(--fs-xs);font-weight: 600;cursor: pointer;transition: all .2s var(--ease);
}
.chip:hover {border-color: var(--c-accent);color: var(--c-accent); }
.chip.is-active {background: var(--c-accent);border-color: var(--c-accent);color: #fff;
}
.chip-note {margin: 0 0 0.7rem;font-size: var(--fs-xs);font-weight: 700;letter-spacing: .12em;text-transform: uppercase;color: var(--c-ink-mute); }

.table-wrap {overflow-x: auto;border-radius: var(--r-lg);background: var(--c-tint); }
table.data {width: 100%;min-width: 640px;border-collapse: collapse;font-size: var(--fs-sm);
}
table.data th, table.data td {padding: 0.95rem 1.1rem;text-align: right;vertical-align: top;border-bottom: 1px solid rgba(25, 40, 65, 0.09);
}
table.data thead th {color: var(--c-ink);font-size: var(--fs-xs);font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;background: rgba(25, 40, 65, 0.05);
}
table.data tbody tr:last-child td {border-bottom: 0; }
table.data tbody tr:hover {background: rgba(255, 255, 255, 0.65); }
table.data td:first-child {color: var(--c-ink);font-weight: 700; }
/* The first column of the FanPilot expansion table carries a one-word
   label. Auto layout gave it 40 px and broke "进风口" onto two lines, so
   pin the label column and let the prose column take the slack. */
table.data--addon th:first-child,
table.data--addon td:first-child {white-space: nowrap; }
/* The heating row carries an "in development" pill in that same first cell,
   so it needs to sit on the label's baseline rather than add a line. */
.pill--tag {padding: 0.2em 0.46em;font-size: 9px;letter-spacing: 0.07em;margin-right: 0.5em;vertical-align: 1px;
}
.pill--tag i {width: 5px;height: 5px; }

.spec-list {margin: 0;padding: 0;list-style: none;display: grid;gap: 0.5rem; }
.spec-list li {display: grid;grid-template-columns: 130px 1fr;gap: 1rem;padding: 0.6rem 0;border-bottom: 1px solid var(--c-line-soft);font-size: var(--fs-sm);
}
.spec-list dt, .spec-list b {color: var(--c-ink);font-weight: 700; }

.tag-list {display: flex;flex-wrap: wrap;gap: 0.45rem;margin: 0;padding: 0;list-style: none; }
.tag-list li {padding: 0.4rem 0.8rem;border-radius: var(--r-pill);background: rgba(25, 40, 65, 0.06);color: var(--c-ink);font-size: var(--fs-xs);font-weight: 600;
}
.section--tint .tag-list li, .card .tag-list li {background: rgba(255, 255, 255, 0.85); }

/* product showcase list (image + copy + spec) */
.product-list {display: grid;gap: 20px;grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product {display: grid;grid-template-columns: 180px 1fr;gap: 1.3rem;padding: 1.3rem;border-radius: var(--r-lg);background: var(--c-tint);
}
.product__media {display: grid;place-items: center;border-radius: var(--r-md);background: #fff;padding: 0.9rem;
}
.product__media img {max-height: 150px;object-fit: contain; }
.product h3 {margin: 0 0 0.25rem;font-size: 1.0625rem; }

/* ------------------------------------------------------------------
   THE PART NUMBER — one component for the whole site.

   Every page prints a product code through `content.pn()`, which emits
   exactly this markup; the words "P/N" come from ::before, so the label
   cannot be spelled differently on a card, a chip or a table row. The
   code itself stays in the accent colour, the way a spec sheet sets it.
   ------------------------------------------------------------------ */
.pn {display: inline-block;font-size: var(--fs-xs);font-weight: 700;letter-spacing: 0.06em;color: var(--c-accent);font-variant-numeric: tabular-nums;white-space: nowrap;
}
.pn::before {content: "P/N";margin-left: 0.5em;font-size: 9.5px;font-weight: 800;letter-spacing: 0.12em;color: var(--c-ink-mute);
}
.pn__role {margin-right: 0.7em;font-size: 12px;font-weight: 500;letter-spacing: 0;color: var(--c-ink-mute);
}
.product > div > .pn {margin-bottom: 0.6rem; }

.product p {font-size: var(--fs-sm); }
.product .spec-list {margin-top: 0.6rem; }
.product .spec-list li {grid-template-columns: 1fr;gap: 0;border-bottom: 0;padding: 0.15rem 0; }
/* Grouping inside a single product grid (the six Mini-C Plus modules).
   The grid stays a grid — no sub-headings cutting it into short lists —
   so the group is carried on the card: a one-word label above the title
   and a wash behind the card. Three tones, one per job. */
.product__tag {display: inline-block;margin-bottom: 0.4rem;padding: 0.12rem 0.5rem;border-radius: 999px;background: #fff;font-size: 10px;font-weight: 700;letter-spacing: 0.09em;text-transform: uppercase;color: var(--c-ink-mute);
}
.product--t1 {background: #e5eefb; }
.product--t1 .product__tag {color: #1a54c8; }
.product--t2 {background: #e3f1e9; }
.product--t2 .product__tag {color: #12775a; }
.product--t3 {background: #eee9fa; }
.product--t3 .product__tag {color: #693fc6; }

.series-grid {display: grid;gap: 20px;grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* generic prose block */
.prose {max-width: 50rem; }
.prose h2 {margin-top: 2.4rem; }
.prose h2:first-child {margin-top: 0; }
.prose h3 {margin-top: 1.8rem; }
.prose ul, .prose ol {padding-right: 1.15rem; }
.prose li {margin-bottom: 0.45rem;font-size: var(--fs-sm); }

/* simple icon + label + copy row (process sub-items, support cards) */
.ico-rows {margin: 0;padding: 0;list-style: none; }
.ico-rows li {display: grid;grid-template-columns: 44px 1fr;gap: 1rem;padding: 1rem 0;border-top: 1px solid var(--c-line-soft);
}
.ico-rows li:first-child {border-top: 0; }
.ico-rows svg {width: 30px;height: 30px;color: var(--c-ink); }
.ico-rows b {display: block;color: var(--c-ink);font-size: var(--fs-sm);font-weight: 700; }
.ico-rows span {font-size: var(--fs-sm); }

/* ------------------------------------------------------------------
   13b  SOLUTION & DEVICE DETAIL BLOCKS
        Used by the TargetSoak Basic page and the DB3 / DB7 hardware
        pages. Built from the same tokens as everything else.
   ------------------------------------------------------------------ */

/* --- introduction: copy left, barn photograph right --------------- */
.intro-split {display: grid;grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);gap: clamp(1.8rem, 4vw, 3.6rem);align-items: center;
}
.intro-figure {margin: 0; }
.intro-figure__frame {position: relative;display: block;overflow: hidden;
  /* The plate owns the shape, exactly as `.card__media` does.
   *
   * Putting `aspect-ratio: 4 / 3` on the <img> looked equivalent but did not
   * hold: the image kept its intrinsic height (1236×927), so the tile came out
   * as a 577×927 column and the copy beside it floated in a sea of white. It
   * also means the layout no longer depends on the photograph's proportions —
   * which matters, because this picture is meant to be swappable.
   *
   * `--fig-ratio` is set inline by `intro_split(ratio=…)` where a page needs
   * a different plate shape — the FanPilot page uses 16:9 for a panoramic
   * shot of a fan wall, whose whole point is the row of fans receding down
   * the building. */aspect-ratio: var(--fig-ratio, 4 / 3);border-radius: var(--r-xl);background: var(--c-tint);box-shadow: 0 16px -36px -26px rgba(9, 47, 87, 0.38);transition: transform .9s var(--ease), box-shadow .9s var(--ease);
}
.intro-figure__frame img {display: block;width: 100%;height: 100%;object-fit: cover;transition: transform 1.15s var(--ease), filter 1s var(--ease);
}
/* a gradient settles over the picture from the bottom-right */
.intro-figure__frame::after {content: '';position: absolute;inset: 0;background: linear-gradient(198deg,
              rgba(9, 47, 87, 0) 44%,
              rgba(9, 47, 87, 0.28) 100%);opacity: 0;transition: opacity .9s var(--ease);pointer-events: none;
}
.intro-figure__caption {display: grid;gap: 0.6rem;margin-top: 1.05rem;
}
.intro-figure__rule {display: block;width: 30px;height: 2px;border-radius: 2px;background: var(--c-accent);transition: width .95s var(--ease);
}
.intro-figure__text {color: var(--c-ink-mute);font-size: var(--fs-xs);line-height: 1.55;
}

/* every motion below runs on the same slow curve, so the tile reads as
   one object rather than four separate effects */
.intro-figure:hover .intro-figure__frame {transform: translateY(-6px);box-shadow: 0 34px -64px -34px rgba(9, 47, 87, 0.55);
}
.intro-figure:hover .intro-figure__frame img {transform: scale(1.055); }
.intro-figure:hover .intro-figure__frame::after {opacity: 1; }
.intro-figure:hover .intro-figure__rule {width: 100%; }

/* progressive appearance: the picture arrives soft and sharpens as the
   section scrolls in (`.is-in` is added by template.js) */
.intro-figure:not(.is-in) .intro-figure__frame img {filter: blur(9px) saturate(0.72);
}

/* --- hardware card: render on the left, role on the right -------- */
.equip-stack {display: grid;gap: 20px; }
.equip {display: grid;grid-template-columns: 300px minmax(0, 1fr);gap: clamp(1.4rem, 3vw, 2.6rem);align-items: center;padding: clamp(1.3rem, 2.4vw, 2rem);border-radius: var(--r-lg);background: var(--c-tint);
}
.equip__media {display: grid;place-items: center;border-radius: var(--r-md);background: transparent;padding: 1.1rem;min-height: 210px;
}
.equip__media img {max-height: 260px;width: auto;max-width: 100%;object-fit: contain;filter: drop-shadow(0 14px 20px rgba(9, 47, 87, 0.15));
}
/* the group shot of the sensor range is still a studio photograph on a grey
   sweep; keying it eats the white housings, so it keeps a plate of its own */
.equip__media:has(img[src$="sensor.png"]) {background: #fff; }
.equip__media img[src$="sensor.png"],
.equip__media img[src$="product-vision-counter.png"],
.equip__media img[src$="product-minic-pro.png"] {filter: none; }
.equip__media--contain img {max-height: 230px; }
.equip__meta {display: flex;flex-wrap: wrap;align-items: baseline;gap: 0.15rem 0;margin-bottom: 0.5rem;
}
.equip__title {margin: 0 0 0.65rem;font-size: 1.25rem; }
.equip__text {margin: 0 0 0.5rem;font-size: var(--fs-sm); }
.equip .check-list {margin: 1rem 0 1.3rem; }
.equip .check-list li:last-child {margin-bottom: 0; }

/* --- floor plan + numbered legend -------------------------------- */
.plan {margin: 0; }
/* The drawings are illustrations, not project documents: this sits above
   the frame so a visitor reads it before looking at the plan. */
.plan-notice {display: flex;flex-wrap: wrap;align-items: baseline;gap: 0.35rem 0.7rem;margin: 0 0 clamp(0.9rem, 1.6vw, 1.25rem);padding: 0.8rem 1rem;border: 1px solid var(--c-line);border-right: 3px solid var(--c-accent);border-radius: 10px;background: #f4f8fe;color: var(--c-ink-soft);font-size: var(--fs-sm);line-height: 1.62;
}
.plan-notice__tag {flex: 0 0 auto;color: var(--c-accent);font-size: 0.68rem;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;
}
.plan-notice > span:last-of-type {flex: 1 1 22rem; }
.plan-notice__cta {flex: 1 1 100%;color: var(--c-accent);font-weight: 600;text-decoration: underline;text-underline-offset: 2px;
}
.plan__frame {padding: clamp(0.5rem, 1.4vw, 1.1rem);border: 1px solid var(--c-line);border-radius: var(--r-lg);background: #fff;overflow-x: auto;
}
.plan__frame img {display: block;width: 100%;min-width: 720px;      /* keep the plan legible; the frame scrolls */height: auto;
}
/* the drawing is the editor's own SVG, so it can be opened at full size */
.plan__open {display: block;position: relative;width: 100%;
  /* matches the image's own floor, so the hit layer and the picture share
     one box when the frame has to scroll */min-width: 720px;padding: 0;border: 0;background: none;cursor: zoom-in;text-align: right;
}
.plan__open:focus-visible {outline: 2px solid var(--c-accent);outline-offset: 4px; }
/* transparent by design: the hit itself is resolved against the scheme
   data, and this layer only draws the ring around what was picked */
.plan__hits {position: absolute;right: 0;top: 0;width: 100%;height: 100%;overflow: visible;pointer-events: none;
}
.plan__pick {fill: rgba(26, 106, 255, 0.16);stroke: #1a6aff;stroke-width: 2.2;vector-effect: non-scaling-stroke;
}
/* the same blue as the ring around a picked device: a chosen cable should
   read as the cable, thicker and lit, not as a second line in a new colour */
.plan__pick--wire {fill: none;stroke: #1a6aff;stroke-width: 4;stroke-linecap: round;stroke-linejoin: round;opacity: 0.92;filter: drop-shadow(0 0 2.5px rgba(26, 106, 255, 0.6));
}
.plan__tip {margin: 0.7rem 0 0;color: var(--c-ink-mute);font-size: var(--fs-xs);line-height: 1.5;
}
.plan__tip::before {content: '';display: inline-block;width: 0.42rem;height: 0.42rem;margin-left: 0.45rem;border-radius: 50%;background: var(--c-accent);vertical-align: 0.12rem;
}
/* shown only when the maintenance editor has published this drawing and the
   page swapped in that newer version; the date is the publish time */
.plan__live {margin: 0.35rem 0 0;display: flex;align-items: center;gap: 0.4rem;color: var(--c-ok, #2f7d5e);font-size: var(--fs-xs);letter-spacing: 0.02em;
}
.plan__live[hidden] {display: none; }
.plan__live::before {content: '';width: 0.4rem;height: 0.4rem;border-radius: 50%;background: currentColor;box-shadow: 0 0 0 0.18rem rgba(47, 125, 94, 0.16);
}
/* the name that follows the cursor over a device or a cable; fixed, so the
   same element works inside the 1:1 overlay without a second copy */
.plan-tip {position: fixed;right: 0;top: 0;z-index: 520;max-width: min(72vw, 340px);padding: 0.32rem 0.58rem;border-radius: 7px;background: rgba(10, 22, 38, 0.94);color: #f3f8fd;font-size: var(--fs-xs);line-height: 1.35;letter-spacing: 0.01em;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;pointer-events: none;opacity: 0;transform: translateY(-2px);transition: opacity 0.12s ease, transform 0.12s ease;
}
.plan-tip.is-on {opacity: 1;transform: none; }
.plan__hint {position: absolute;left: 0.55rem;bottom: 0.55rem;padding: 0.28rem 0.6rem;border-radius: var(--r-pill);background: rgba(9, 22, 40, 0.72);color: #fff;font-size: 0.68rem;font-weight: 600;letter-spacing: 0.02em;opacity: 0;transition: opacity 0.18s ease;pointer-events: none;
}
.plan__open:hover .plan__hint,
.plan__open:focus-visible .plan__hint {opacity: 1; }
@media (hover: none) { .plan__hint {opacity: 1; } }

.plan-zoom {position: fixed;inset: 0;z-index: 400;display: flex;align-items: flex-start;justify-content: center;padding: 3.4vmin 1.6vmin;background: #091321;overflow: auto;overscroll-behavior: contain;
}
.plan-zoom[hidden] {display: none; }
.plan-zoom img {display: block;
  /* 1:1 with the drawing's own canvas. The floor plate is baked at 3200 px,
     so at 1600 CSS the overlay is pixel-exact on a 2x screen and never
     softer than the page — anything wider is just interpolation. */width: 1600px;max-width: none;height: auto;
  /* auto margins centre it when it fits and keep the left edge reachable
     when the viewport is narrower than the drawing */margin: auto;background: #fff;border-radius: 4px;
}
.plan-zoom__close {position: fixed;top: 1rem;left: 1rem;width: 2.4rem;height: 2.4rem;border: 1px solid rgba(255, 255, 255, 0.28);border-radius: 50%;background: rgba(9, 22, 40, 0.72);color: #fff;font-size: 1.1rem;line-height: 1;cursor: pointer;
}
.plan-zoom__close:hover {background: rgba(26, 106, 255, 0.85); }
/* one stage holds the 1:1 drawing and its hit layer, so both share a box */
.plan-zoom__stage {position: relative;flex: 0 0 auto;width: 1600px;max-width: none;margin: auto;background: #fff;border-radius: 4px;
}

/* --- what the drawing says when you click it --------------------- */
.plan-detail {position: fixed;inset: 0;z-index: 500;display: grid;place-items: center;padding: 1.2rem;background: rgba(5, 12, 22, 0.6);
}
.plan-detail[hidden] {display: none; }
.plan-detail__card {position: relative;width: min(30rem, 92vw);max-height: 84vh;overflow: auto;padding: 1.55rem 1.6rem 1.35rem;border-radius: 14px;background: var(--c-ground);box-shadow: 0 26px -64px -22px rgba(6, 22, 45, 0.6);text-align: right;
}
.plan-detail__eyebrow {margin: 0 0 0.25rem;color: var(--c-accent);font-size: 0.68rem;font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;
}
.plan-detail__title {margin: 0 0 1.1rem;font-size: 1.12rem;line-height: 1.32;padding-left: 2rem;
}
/* one product photo per device type, below the title and above the fields.
   A cable never renders this block at all. */
.plan-detail__photo {margin: 0 0 1.15rem;border: 1px solid var(--c-line);border-radius: 10px;background: #fff;overflow: hidden;
}
.plan-detail__photo[hidden] {display: none; }
.plan-detail__photo img {display: block;width: 100%;max-height: 13.5rem;aspect-ratio: 16 / 10;object-fit: contain;
}
.plan-detail__photo.is-loading {background: linear-gradient(100deg, #f1f4f9 30%, #e7ecf4 50%, #f1f4f9 70%);background-size: 220% 100%;animation: plan-photo-wait 1.1s linear infinite;min-height: 11rem;
}
@keyframes plan-photo-wait {
  from {background-position: 120% 0; }
  to   {background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-detail__photo.is-loading {animation: none; }
}
.plan-detail__rows {display: grid;grid-template-columns: auto minmax(0, 1fr);gap: 0.6rem 0.9rem;margin: 0;
}
.plan-detail__rows dt {color: var(--c-ink-mute);font-size: 0.76rem;line-height: 1.45;
}
.plan-detail__rows dd {margin: 0;color: var(--c-ink);font-size: 0.81rem;line-height: 1.45;word-break: break-word;
}
.plan-detail__close {position: absolute;top: 0.65rem;left: 0.65rem;width: 2rem;height: 2rem;border: 1px solid var(--c-line);border-radius: 50%;background: var(--c-ground);color: var(--c-ink-soft);font-size: 1rem;line-height: 1;cursor: pointer;
}
.plan-detail__close:hover {border-color: var(--c-accent);color: var(--c-accent);
}
.plan__caption {margin-top: 0.9rem;color: var(--c-ink-mute);font-size: var(--fs-xs);
}
.plan__legend {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 1.2rem 2rem;margin: 1.8rem 0 0;padding: 0;list-style: none;
}
.plan__legend li {display: grid;grid-template-columns: 30px minmax(0, 1fr);gap: 0.9rem;
}
.plan__legend b {display: grid;place-items: center;width: 30px;height: 30px;border-radius: var(--r-pill);background: var(--c-accent);color: #fff;font-size: var(--fs-xs);font-weight: 700;
}
.plan__legend strong {display: block;margin-bottom: 0.2rem;color: var(--c-ink);font-size: var(--fs-sm);font-weight: 700;
}
.plan__legend span {font-size: var(--fs-sm); }

/* --- process strip with connectors ------------------------------- */
.flow {display: grid;grid-template-columns: repeat(var(--flow-cols, 3), minmax(0, 1fr));gap: 1.5rem;margin: 0;padding: 0;list-style: none;
}
.flow--2 {--flow-cols: 2; }
.flow--4 {--flow-cols: 4; }
.flow__step {position: relative;display: grid;gap: 0.45rem;align-content: start;padding: 1.5rem 1.4rem;border-radius: var(--r-lg);background: var(--c-tint);
}
.flow__step:not(:first-child)::before {content: '';position: absolute;right: -1.06rem;top: 50%;width: 10px;height: 10px;border-left: 2px solid var(--c-accent);border-bottom: 2px solid var(--c-accent);transform: translateY(-50%) rotate(-45deg);opacity: .5;
}
.flow__num {position: absolute;top: 1.1rem;left: 1.2rem;color: var(--c-ink-mute);font-size: var(--fs-xs);font-weight: 700;letter-spacing: 0.08em;
}
.flow__icon {display: grid;place-items: center;width: 46px;height: 46px;border-radius: var(--r-pill);background: #fff;color: var(--c-accent);
}
.flow__step b {color: var(--c-ink);font-size: var(--fs-body); }
.flow__text {font-size: var(--fs-sm); }

/* --- bottom hardware jump cards ---------------------------------- */
.device-link {display: grid;grid-template-columns: 186px minmax(0, 1fr);gap: 1.3rem;align-items: center;padding: 1.3rem;border: 1px solid var(--c-line);border-radius: var(--r-lg);background: #fff;transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.device-link:hover {border-color: var(--c-accent);box-shadow: var(--c-shadow);transform: translateY(-3px);
}
.device-link__media {display: grid;place-items: center;min-height: 158px;border-radius: var(--r-md);background: #fff;border: 1px solid var(--c-line-soft);padding: 0.9rem;
}
.device-link__media img {max-height: 160px;width: auto;max-width: 100%;object-fit: contain; }
.device-link__body {display: grid;gap: 0.25rem; }
.device-link__meta {display: block;min-height: 1.1em;
}
.device-link__body b {color: var(--c-ink);font-size: 1.0625rem; }
.device-link__text {color: var(--c-ink-soft);font-size: var(--fs-sm); }
.device-link__cta {display: inline-flex;align-items: center;gap: 0.35rem;margin-top: 0.4rem;color: var(--c-accent);font-size: var(--fs-sm);font-weight: 700;
}

/* --- footer nav back into the solution set ----------------------- */
.related {display: flex;flex-wrap: wrap;align-items: center;gap: 0.8rem 1.2rem;padding-top: 1.6rem;border-top: 1px solid var(--c-line);
}
.related__label {color: var(--c-ink-mute);font-size: var(--fs-xs);font-weight: 700;letter-spacing: var(--ls-eyebrow);text-transform: uppercase;
}
.tag-list--links li {padding: 0;background: none; }
.tag-list--links a {display: inline-block;padding: 0.4rem 0.85rem;border: 1px solid var(--c-line);border-radius: var(--r-pill);color: var(--c-ink);font-size: var(--fs-xs);font-weight: 600;
}
.tag-list--links a:hover {border-color: var(--c-accent);color: var(--c-accent); }

/* ------------------------------------------------------------------
   14  UTILITIES
   ------------------------------------------------------------------ */
.text-center {text-align: center; }
.mt-0 {margin-top: 0; }
.mt-2 {margin-top: 1.2rem; }
.mt-3 {margin-top: 2rem; }
.mt-4 {margin-top: 3rem; }
.mb-0 {margin-bottom: 0; }
.mb-2 {margin-bottom: 1.2rem; }
.mb-3 {margin-bottom: 2rem; }
.grid-2 {display: grid;gap: 20px;grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 {display: grid;gap: 20px;grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 {display: grid;gap: 20px;grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack-2 > * + * {margin-top: 1.2rem; }
.sr-only {position: absolute;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;right: 1rem;top: -100px;z-index: 200;padding: 0.7rem 1.1rem;border-radius: var(--r-pill);background: var(--c-accent);color: #fff;font-size: var(--fs-sm);
}
.skip-link:focus {top: 1rem; }

/* ------------------------------------------------------------------
   15  MOTION & REVEAL
   ------------------------------------------------------------------ */
.reveal {opacity: 0;transform: translateY(18px);transition: opacity .7s var(--ease), transform .7s var(--ease);transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in {opacity: 1;transform: none; }

@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto; }
  *, *::before, *::after {animation-duration: .001ms !important;transition-duration: .001ms !important;
  }
  .reveal {opacity: 1;transform: none; }
  /* the blur-up is a motion effect too. Without this, anything that never
     receives `.is-in` would be left looking at a permanently blurred photo. */
  .intro-figure:not(.is-in) .intro-figure__frame img {filter: none; }
}

/* ------------------------------------------------------------------
   16  RESPONSIVE
   ------------------------------------------------------------------ */
/* The nav collapses on its own breakpoint, well above the 1024 px layout
   breakpoint. Its eight labels need ~1180 px of content width and the row
   offers 1088 px at 1152 px viewport — so between 1024 and 1280 the nav used
   to be squeezed into whatever was left, which is what crushed the wordmark.
   The language pill and the search/Contact actions stay, because they fit. */
/* The full row needs ~1300 px once the 38 px wordmark and the house icon are
   in it. Below that the nav hands over to the drawer rather than squeezing —
   the previous 1280 px cut left the nav 3 px short at 1281 px, which flexbox
   paid for out of the home icon. */
@media (max-width: 1330px) {
  .nav {display: none; }
  .hamburger {display: grid; }
  .header-actions {margin-right: auto; }
}

@media (max-width: 1180px) {
  :root {--gutter: 32px; }
  .mega__inner {grid-template-columns: 210px minmax(0, 1fr); }
  .mega__feature {display: none; }
}

@media (max-width: 1024px) {
  /* The switch is a wrapper around the pill, so hiding only the pill leaves an
     empty flex item in the header row that still eats a gap — 4 px of overflow
     at 360 px. Hide the wrapper; the drawer carries its own copy. */
  .lang-switch {display: none; }
  .card-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid--3, .series-grid, .product-list {grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-row-split {grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-row-split > .card-row-split__wide {grid-column: 1 / -1; }
  .feature-panel--3 {grid-template-columns: 1fr;gap: 1.6rem; }
  .feature-panel--2 {grid-template-columns: 1fr;gap: 1.6rem; }
  .split {grid-template-columns: 1fr; }
  .split--reverse .split__media {order: 0; }
  .intro-split {grid-template-columns: 1fr; }
  .stats, .stats--3 {grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__main {grid-template-columns: 1fr; }
  .footer-cols {grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band {grid-template-columns: 1fr; }
  .cta__badges {grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acc__body {grid-template-columns: 1fr; }
  .equip {grid-template-columns: 240px minmax(0, 1fr); }
  .flow {grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__step::before {display: none; }
}

@media (max-width: 720px) {
  :root {--gutter: 20px;--header-h: 70px; }
  .card-grid, .card-grid--3, .card-grid--2, .card-row-split,
  .series-grid, .product-list, .grid-2, .grid-3, .grid-4 {grid-template-columns: 1fr; }
  .stats, .stats--3 {grid-template-columns: 1fr; }
  .cta__badges {grid-template-columns: 1fr; }
  .cta__badges .cta__badge + .cta__badge {border-right: 0;padding-right: 0; }
  .product {grid-template-columns: 1fr; }
  .cta__left {grid-template-columns: 1fr; }
  .cta__left svg {width: 40px;height: 40px; }
  .hero {min-height: 74vh; }
  .btn {width: 100%; }
  /* The header's Contact button sits in a row beside the hamburger, not in a
     stacked .btn-row, so full width is wrong there. Left to itself the
     browser treats the percentage as indefinite and falls back to the content
     width — which happens to work, but only by accident. */
  .header-actions .btn {width: auto; }
  .btn-row {flex-direction: column;align-items: stretch; }
  .btn-row .btn {width: 100%; }
  .spec-list li {grid-template-columns: 1fr;gap: 0.15rem; }
  .brand__logo {height: 31px; }
  .site-footer__brand .brand__logo {height: 29px; }
  .equip {grid-template-columns: 1fr;padding: 1.3rem; }
  .equip__media {min-height: 0; }
  .equip__media img {max-height: 200px; }
  .flow {grid-template-columns: 1fr;gap: 1rem; }
  .plan__legend {grid-template-columns: 1fr; }
  .related {align-items: flex-start;flex-direction: column; }
  .device-link {grid-template-columns: 1fr; }
  .device-link__media {min-height: 0; }
}

/* 360–400 px phones: the header row is the tightest thing on the site and at
   360 px it only just stopped fitting. Reclaim the last ~25 px from the
   button padding and the action gaps rather than dropping the search button —
   search does not exist anywhere else, so hiding it there would remove a
   feature to buy 50 px we do not need. */
@media (max-width: 400px) {
  .brand__logo {height: 26px; }
  .header-actions {gap: 0.4rem; }
  .header-actions .btn {padding-inline: 0.85rem; }
}

/* ==================================================================
   LIVE BARN teaser — the one dark band on a light page
   ------------------------------------------------------------------
   Used on the home page and at the foot of every grade page that has a
   system in the model. It is an <a> wrapping spans, because the whole
   band is the target, not just the words at the end of it.
   ================================================================== */
.lb-teaser {position: relative;display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);align-items: center;gap: clamp(1.4rem, 3vw, 3rem);overflow: hidden;isolation: isolate;padding: clamp(1.6rem, 3.2vw, 2.7rem);border-radius: var(--r-lg);background: #04101e;color: #eaf1f7;text-decoration: none;
}
.lb-teaser__media {position: absolute;inset: 0 auto 0 0;z-index: -2;width: 54%;
  /* The image scales on hover. Without this, the scaled copy grows past the
     media box on its left edge — outside the ::after gradient that fades the
     plan into the card — so a bright wedge of floor plan appears over the
     copy. Clip the box instead, and grow from the right edge so the crop
     moves the way the eye expects. */overflow: hidden;
}
.lb-teaser__media img {width: 100%;height: 100%;object-fit: cover;object-position: 62% 50%;transform-origin: 0% 50%;opacity: 0.62;transition: transform 0.9s var(--ease), opacity 0.5s var(--ease);
}
.lb-teaser__media::after {content: '';position: absolute;inset: 0;background: linear-gradient(90deg, #04101e 0%, rgba(4, 16, 30, 0.86) 26%,
                              rgba(4, 16, 30, 0.24) 72%, rgba(4, 16, 30, 0.1) 100%);
}
.lb-teaser:hover .lb-teaser__media img {transform: scale(1.035);opacity: 0.76; }
/* the global a:hover rule (0,1,1) outranks .lb-teaser (0,1,0) and underlines
   the whole card — headline, body copy and all. The card is one big link, so
   the underline reads as a bug rather than as feedback. */
.lb-teaser:hover {text-decoration: none; }
.lb-teaser__cta {text-decoration: none; }

.lb-teaser__body {display: flex;flex-direction: column;gap: 0.55rem;max-width: 34rem;
}
.lb-teaser__eyebrow {display: inline-flex;align-items: center;gap: 0.5rem;color: #86b8ff;font-size: 0.68rem;font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;
}
.lb-teaser__eyebrow i {width: 7px;height: 7px;border-radius: 50%;background: #22c55e;box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);animation: lbTeaserPulse 2.6s var(--ease) infinite;
}
@keyframes lbTeaserPulse {
  0%   {box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70%  {box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% {box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.lb-teaser__title {margin: 0;color: #fff;font-size: clamp(1.35rem, 2.3vw, 1.9rem);font-weight: 800;letter-spacing: -0.035em;line-height: 1.12;
}
.lb-teaser__text {color: rgba(234, 241, 247, 0.7);font-size: var(--fs-sm);line-height: 1.6;
}
.lb-teaser__cta {display: inline-flex;align-items: center;gap: 0.45rem;margin-top: 0.5rem;color: #fff;font-size: 0.72rem;font-weight: 700;letter-spacing: 0.1em;text-transform: uppercase;
}
.lb-teaser__cta svg {transition: transform 0.3s var(--ease); }
.lb-teaser:hover .lb-teaser__cta svg {transform: translateX(-4px); }

@media (max-width: 860px) {
  .lb-teaser {grid-template-columns: 1fr; }
  .lb-teaser__media {position: static;width: 100%;margin-top: 0.4rem; }
  .lb-teaser__media img {height: 138px;opacity: 0.8;object-position: 50% 42%; }
  .lb-teaser__media::after {display: none; }
}

/* ------------------------------------------------------------------
   17  ENQUIRY FORM  ·  the one interactive component on the site
   ------------------------------------------------------------------
   Built from the same tokens as everything else: no new colour, no new
   radius. The card is white on white with a hairline border because the
   section around it is already white — a tinted panel here would read as
   a second hero instead of a form you are meant to fill in.
   ------------------------------------------------------------------ */
.enq-wrap {display: grid;grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);gap: clamp(2rem, 5vw, 4.6rem);align-items: start;
}
.enq-intro h2 {margin-bottom: 0.9rem; }
.enq-intro p {max-width: 34rem; }
.enq-intro .check-list {margin-top: 1.4rem; }
.enq-alt {margin-top: 1.2rem;font-size: var(--fs-sm);color: var(--c-ink-mute);
}
.enq-alt a {font-weight: 700; }

.enq {background: var(--c-white);border: 1px solid var(--c-line);border-radius: var(--r-xl);padding: clamp(1.25rem, 2.4vw, 2rem);box-shadow: var(--c-shadow);
}
.enq__grid {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 1rem 1.1rem;
}
.enq__field {margin: 0;display: flex;flex-direction: column;gap: 0.35rem; }
.enq__field--wide {grid-column: 1 / -1; }
.enq__label {font-size: var(--fs-xs);font-weight: 700;letter-spacing: 0.04em;color: var(--c-ink);
}
.enq__input {width: 100%;padding: 0.7rem 0.85rem;border: 1px solid var(--c-line);border-radius: var(--r-sm);background: var(--c-ground);color: var(--c-ink);font: inherit;font-size: var(--fs-sm);line-height: 1.4;transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.enq__input::placeholder {color: var(--c-ink-mute);opacity: 0.75; }
.enq__input:hover {border-color: var(--c-tint-strong); }
.enq__input:focus {outline: none;border-color: var(--c-accent);box-shadow: 0 0 0 3px rgba(26, 106, 255, 0.16);
}
/* .enq__input beats the UA `textarea {resize: vertical}` only because
   this rule is later; keep resize explicit so the field cannot be dragged
   over the button on a laptop trackpad. */
.enq__textarea {resize: vertical;min-height: 7.5rem; }
.enq__select {appearance: none;background-image: linear-gradient(45deg, transparent 50%, var(--c-ink-soft) 50%),
    linear-gradient(135deg, var(--c-ink-soft) 50%, transparent 50%);background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;background-size: 5px 5px, 5px 5px;background-repeat: no-repeat;padding-left: 2.2rem;
}
.enq__foot {display: flex;align-items: center;gap: 1rem;flex-wrap: wrap;margin-top: 1.3rem;
}
.enq__foot .btn {flex: none; }
.enq__foot .btn[disabled] {opacity: 0.55;pointer-events: none; }
.enq__status {margin: 0;font-size: var(--fs-sm);color: var(--c-ink-mute);flex: 1 1 14rem;
}
.enq__status.is-ok {color: #17a673; }
.enq__status.is-error {color: var(--c-badge-5); }
.enq__status.is-busy {color: var(--c-ink-soft); }
/* the honeypot: visually hidden rather than pushed off-canvas, so it can
   never contribute scrollable space on a narrow screen */
.enq__trap {position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap;border: 0;
}
@media (max-width: 960px) {
  .enq-wrap {grid-template-columns: 1fr; }
  .enq-intro p {max-width: none; }
}
@media (max-width: 620px) {
  .enq__grid {grid-template-columns: 1fr; }
}

/* the model named in ?product=, so an enquiry arrives already labelled */
.enq__product {margin: 0 0 14px;padding: 10px 14px;border-radius: var(--r-md);background: rgba(26, 106, 255, 0.07);font-size: 12.5px;font-weight: 700;color: #0d4fbf;
}

/* ======================================================================
   MINI-C SERIES — three grades, the comparison table and the two
   development pages.
   Block order below follows the page order, so a later rule that needs to
   override an earlier one is never more than a screen away.
   ====================================================================== */

/* ---------------------------------------------------------------- status */
.pill {display: inline-flex;align-items: center;gap: 0.42em;padding: 0.36em 0.68em;border-radius: 999px;font-size: 10px;font-weight: 800;letter-spacing: 0.1em;text-transform: uppercase;white-space: nowrap;
}
.pill i {width: 6px;height: 6px;border-radius: 50%;background: currentColor;flex: none; }
.pill--live {background: rgba(23, 166, 115, 0.12);color: #0d7a55; }
.pill--soon {background: rgba(245, 130, 11, 0.14);color: #a75a06; }
.pill--plan {background: rgba(26, 106, 255, 0.1);color: #0d4fbf; }

/* the availability strip on the one page whose unit ships today */
.ship-strip {background: #f2f8f5;border-bottom: 1px solid rgba(23, 166, 115, 0.22);padding: 11px 0;
}
.ship-strip .container {display: flex;align-items: center;gap: 14px;flex-wrap: wrap; }
.ship-strip p {margin: 0;font-size: 12.5px;line-height: 1.55;color: #14664a; }

/* ------------------------------------------------- certification (ETL) --
   Two places on a certified product page and one on its card. The roundel is
   an image; every standard number is page text, because the full ETL label is
   unreadable once scaled down and a real string can be selected and pasted
   into a tender document. Nothing here appears on an uncertified page: the
   build only emits these blocks for models registered in content.CERT. */
.cert-strip {background: #f6f8fb;border-bottom: 1px solid var(--c-line);padding: 11px 0;
}
.cert-strip .container {display: flex;align-items: center;gap: 13px;flex-wrap: wrap; }
.cert-item {display: flex;align-items: center;gap: 13px;min-width: 0; }
/* a hairline between certificates — `inline-start` so the Arabic tree mirrors it */
.cert-item + .cert-item {padding-inline-start: 22px;border-inline-start: 1px solid var(--c-line); }
.cert-strip__mark {width: 40px;height: auto;display: block;flex: none; }
/* the CE mark is 1.40:1, the ETL roundel 1.25:1 — matched on height, not width,
   so the two read as a pair rather than one small mark beside one large */
.cert-strip__mark--ce {width: auto;height: 32px; }
/* the FCC mark is 1.21:1, close to the ETL roundel's 1.25:1 — matched on
   height like CE so all three read at the same optical weight */
.cert-strip__mark--fcc {width: auto;height: 32px; }
.cert-strip__txt {min-width: 0;flex: 1 1 auto; }
.cert-strip__txt b {display: block;font-size: 12.5px;letter-spacing: 0.01em;color: var(--c-ink);line-height: 1.3; }
.cert-strip__txt span {display: block;font-size: 12px;color: var(--c-ink-soft);line-height: 1.5;margin-top: 2px; }
.cert-strip__file {font-size: 11.5px;letter-spacing: 0.02em;color: var(--c-ink-mute);padding: 3px 10px;border-radius: 20px;background: #fff;border: 1px solid var(--c-line);white-space: nowrap;
}

.cert-row {display: flex;align-items: center;gap: 18px;flex-wrap: wrap;margin-top: 22px;padding-top: 22px;border-top: 1px solid var(--c-line);
}
.cert-row__mark {width: 54px;height: auto;display: block;flex: none; }
.cert-row__mark--ce {width: auto;height: 43px; }
.cert-row__mark--fcc {width: auto;height: 43px; }
.cert-row__body {min-width: 0;font-size: 12.5px;line-height: 1.55;color: var(--c-ink-soft); }
.cert-row__body > b {display: block;font-size: 10px;letter-spacing: 0.12em;text-transform: uppercase;color: var(--c-ink-mute);font-weight: 600;margin-bottom: 5px;
}
.cert-row__name {display: block;color: var(--c-ink);font-weight: 650; }
.cert-row__file {display: block; }
.cert-pill-row {display: inline-flex;flex-wrap: wrap;gap: 6px;margin-top: 8px; }
.cert-pill {display: inline-block;padding: 3px 10px;border-radius: 20px;font-size: 11.5px;letter-spacing: 0.02em;white-space: nowrap;background: var(--c-accent-soft);color: var(--c-accent-deep);
}

/* the corner mark on a product card — the wrapper carries the position and
   `inset-inline-end` so the Arabic tree mirrors it without a second rule; the
   badges inside it flow from the corner inward */
.cert-flags {position: absolute;inset-block-start: 10px;inset-inline-end: 10px;z-index: 2;display: flex;gap: 6px;
}
.cert-flags .cert-flag {position: static;inset: auto; }
.cert-flag {position: absolute;inset-block-start: 10px;inset-inline-end: 10px;z-index: 2;display: inline-flex;align-items: center;gap: 5px;padding: 3px 10px 3px 4px;border-radius: 999px;background: rgba(255, 255, 255, 0.97);border: 1px solid var(--c-line);box-shadow: 0 8px -18px -12px rgba(9, 47, 87, 0.65);font-size: 10.5px;font-weight: 700;letter-spacing: 0.08em;color: var(--c-ink);
}
.cert-flag__mark {width: 24px;height: 24px;flex: none;display: block;background: url(../img/cert-etl.png) center / contain no-repeat;
}
/* CE is a wide mark: same optical weight in a 27 px box, centred */
.cert-flag__mark--ce {width: 27px;background-image: url(../img/cert-ce.png);
}
/* FCC is 1.21:1, near-square like the ETL roundel: a 24px box holds it cleanly */
.cert-flag__mark--fcc {width: 24px;background-image: url(../img/cert-fcc.png);
}
/* a badge that carries the mark only — no word beside it, so no uneven padding */
.cert-flag--solo {padding: 3px 5px; }
.cert-flag i {font-style: normal; }

/* -------------------------------------------------------- three cards */
.lineup {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 22px;align-items: stretch;
}
.mcard {display: flex;flex-direction: column;background: #fff;border: 1px solid var(--c-line);border-radius: var(--r-lg);overflow: hidden;box-shadow: 0 20px -44px -36px rgba(9, 47, 87, 0.55);transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.mcard:hover {transform: translateY(-4px);box-shadow: 0 28px -54px -34px rgba(9, 47, 87, 0.5); }
.mcard--live {border-color: rgba(26, 106, 255, 0.38);box-shadow: 0 26px -52px -34px rgba(26, 106, 255, 0.42); }
.mcard__media {position: relative;
  /* square, not 4:3 — the shipping unit's photograph is a tall floor-standing
     cabinet, and in a landscape frame it either shrank to a strip or was
     cropped by the frame's overflow */aspect-ratio: 1 / 1;background: var(--c-tint);display: grid;place-items: center;overflow: hidden;
}
/* absolute + contain: the frame's height comes from the aspect ratio, so a
   percentage max-height inside it resolves against an indefinite size and is
   ignored. Pinning the image to the frame and letterboxing it is the only way
   to guarantee the whole unit is visible, whatever the upload's proportions. */
.mcard__media > img {position: absolute;inset: 14px;width: calc(100% - 28px);height: calc(100% - 28px);object-fit: contain;object-position: center;filter: drop-shadow(0 18px 26px rgba(9, 47, 87, 0.16));
}
/* the renders are cut to transparency, so the frame keeps the card wash and
   the unit carries the shadow; a white frame would read as a white photo */
.mcard--live .mcard__media {background: var(--c-tint); }
.mcard--live .mcard__media > img {filter: drop-shadow(0 18px 26px rgba(9, 47, 87, 0.16)); }
.mcard__body {display: flex;flex-direction: column;gap: 9px;flex: 1;padding: 20px 22px 22px; }
.mcard__top {display: flex;align-items: center;justify-content: space-between;gap: 10px; }
.mcard__top h3 {margin: 0;font-size: 1.3rem;letter-spacing: -0.02em; }
.mcard__pos {margin: 0;font-size: var(--fs-sm);font-weight: 700;color: var(--c-ink); }
.mcard__copy {margin: 0;font-size: var(--fs-sm);line-height: 1.6;color: var(--c-ink-soft); }
.mcard__facts {display: grid;grid-template-columns: 1fr 1fr;gap: 11px 16px;margin: 6px 0 0;padding-top: 15px;border-top: 1px solid var(--c-line-soft);
}
.mcard__facts span {display: block;font-size: 9px;font-weight: 800;letter-spacing: 0.12em;text-transform: uppercase;color: var(--c-ink-mute);margin-bottom: 2px;
}
.mcard__facts b {font-size: 12.5px;font-weight: 700;color: var(--c-ink);line-height: 1.35; }
.mcard__cta {margin-top: auto;padding-top: 18px;display: flex;flex-direction: column;gap: 11px; }
.mcard__cta .btn {width: 100%;justify-content: center; }
.lineup-foot {margin: 18px 0 0;font-size: 11.5px;color: var(--c-ink-mute);max-width: 60rem; }

/* ------------------------------------------------- blueprint placeholder */
.bp {position: relative;width: 100%;height: 100%;overflow: hidden;display: grid;place-items: center;background-image: linear-gradient(rgba(126, 166, 201, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 166, 201, 0.1) 1px, transparent 1px),
    radial-gradient(120% 90% at 72% 8%, rgba(30, 92, 150, 0.5), transparent 62%),
    linear-gradient(160deg, #0a2a49, #061c33);background-size: 26px 26px, 26px 26px, 100% 100%, 100% 100%;
}
.bp svg {width: 100%;height: 100%;display: block; }
.bp__tag {position: absolute;right: 14px;bottom: 11px;font-size: 8.5px;font-weight: 700;letter-spacing: 0.18em;color: #7fa8cb;text-transform: uppercase;
}

/* ----------------------------------------------------- comparison table */
.cmp-scroll {overflow-x: auto;border: 1px solid var(--c-line);border-radius: var(--r-lg);background: #fff;
}
table.cmp {width: 100%;min-width: 980px;border-collapse: collapse;font-size: 13px; }
table.cmp th,
table.cmp td {padding: 15px 18px;text-align: right;vertical-align: top;border-bottom: 1px solid var(--c-line-soft);
}
table.cmp thead th {background: #f6f9fc;padding: 18px;vertical-align: bottom; }
table.cmp thead th.is-live {background: rgba(26, 106, 255, 0.07); }
table.cmp th[scope="row"] {position: sticky;right: 0;z-index: 2;background: #fff;width: 190px;min-width: 170px;font-size: 11.5px;font-weight: 800;color: var(--c-ink);border-left: 1px solid var(--c-line-soft);
}
table.cmp td {color: var(--c-ink-soft);line-height: 1.6; }
table.cmp td.is-live {background: rgba(26, 106, 255, 0.04); }
table.cmp tbody tr:hover td {background: #f8fbfe; }
table.cmp tbody tr:hover td.is-live {background: rgba(26, 106, 255, 0.06); }
table.cmp tr:last-child th,
table.cmp tr:last-child td {border-bottom: 0; }
.cmp__h {display: flex;flex-direction: column;gap: 7px;align-items: flex-start; }
.cmp__h b {font-size: 14px;letter-spacing: -0.01em;color: var(--c-ink); }
.cmp__corner {width: 190px;min-width: 170px; }
.cmp__corner span {font-size: 9px;font-weight: 800;letter-spacing: 0.16em;text-transform: uppercase;color: var(--c-ink-mute);
}
.cmp-notes {margin: 16px 0 0;padding: 0;list-style: none;display: grid;gap: 6px;max-width: 70rem; }
.cmp-notes li {font-size: 11.5px;line-height: 1.7;color: var(--c-ink-mute); }

/* ----------------------------------------------------- selection guide */
.guide {border: 1px solid var(--c-line);border-radius: var(--r-lg);overflow: hidden;background: #fff; }
.guide__row {display: grid;grid-template-columns: 1.15fr 34px 1fr;gap: 16px;align-items: center;padding: 17px 22px;border-top: 1px solid var(--c-line-soft);
}
.guide__row:first-child {border-top: 0; }
.guide__row:hover {background: #f7fbff; }
.guide__need {margin: 0;font-size: var(--fs-sm);color: var(--c-ink-soft); }
.guide__arrow {color: #9fb4ca;display: grid;place-items: center; }
.guide__rec {display: flex;align-items: center;gap: 10px;flex-wrap: wrap; }
.rec {display: inline-flex;align-items: center;gap: 0.5em;padding: 0.5em 0.85em;border-radius: 999px;border: 1px solid rgba(26, 106, 255, 0.28);background: rgba(26, 106, 255, 0.06);font-size: 12px;font-weight: 800;letter-spacing: -0.01em;color: #0d4fbf;text-decoration: none;
}
.rec:hover {background: rgba(26, 106, 255, 0.13);text-decoration: none; }
.rec--soon {border-color: rgba(245, 130, 11, 0.35);background: rgba(245, 130, 11, 0.09);color: #a75a06; }
.rec small {font-weight: 600;color: inherit;opacity: 0.72;font-size: 10.5px; }

/* a white panel on a tinted section — the tint alone gave it no edge */
.feature-panel--card {background: #fff;border: 1px solid var(--c-line);gap: 34px 48px;padding: 34px; }

/* ------------------------------------------------------- modules teaser */
.modline {display: grid;grid-template-columns: 1fr auto;gap: 22px;align-items: center;padding: 24px 26px;border: 1px dashed rgba(26, 106, 255, 0.3);border-radius: var(--r-lg);background: linear-gradient(120deg, rgba(224, 239, 249, 0.7), rgba(234, 241, 246, 0.35));
}
.modline h3 {margin: 0 0 4px;font-size: 1.05rem; }
.modline p {margin: 0;font-size: var(--fs-sm);color: var(--c-ink-soft);max-width: 56rem; }

/* ------------------------------------------------ development hero */
.page-hero--dev {background: linear-gradient(125deg, #0a2f55 0%, #072644 62%, #051d34 100%);
}
.page-hero--dev::after {content: "";position: absolute;inset: 0;z-index: -1;pointer-events: none;background-image: linear-gradient(rgba(126, 166, 201, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 166, 201, 0.1) 1px, transparent 1px);background-size: 48px 48px;-webkit-mask-image: radial-gradient(120% 125% at 76% 18%, #000 32%, transparent 76%);mask-image: radial-gradient(120% 125% at 76% 18%, #000 32%, transparent 76%);
}
.dev-art {position: absolute;left: 1%;top: 50%;transform: translateY(-50%);width: min(40vw, 540px);opacity: 0.92;pointer-events: none;
}
.dev-art svg {width: 100%;height: auto;display: block; }
.dev-rail {display: flex;flex-wrap: wrap;gap: 12px 38px;margin: 2rem 0 0;padding: 16px 0 0;border-top: 1px solid rgba(255, 255, 255, 0.18);list-style: none;
}
.dev-rail li {display: flex;flex-direction: column;gap: 3px; }
.dev-rail span {font-size: 9px;font-weight: 800;letter-spacing: 0.16em;text-transform: uppercase;color: #8fb6d6;
}
.dev-rail b {font-size: 12.5px;font-weight: 700;color: #eaf3fb; }
.dev-rail b.warn {color: #ffc46b; }

/* --------------------------------------------------- planned-product note */
.note-box {margin-top: 22px;padding: 16px 20px;border-right: 3px solid #f5820b;background: rgba(245, 130, 11, 0.075);border-radius: var(--r-md) 0 0 var(--r-md);font-size: 12.5px;line-height: 1.7;color: #6b5334;max-width: 70rem;
}
.note-box b {color: #8a5c14; }

/* ------------------------------------------------------ validation rows */
.valid {display: grid;border-top: 1px solid var(--c-line); }
.valid__row {display: grid;grid-template-columns: 230px 1fr auto;gap: 22px;align-items: baseline;padding: 18px 0;border-bottom: 1px solid var(--c-line);
}
.valid__row b {font-size: 14px; }
.valid__row p {margin: 0;font-size: var(--fs-sm);color: var(--c-ink-soft); }
.valid__tag {font-size: 9.5px;font-weight: 800;letter-spacing: 0.12em;text-transform: uppercase;color: #a75a06;background: rgba(245, 130, 11, 0.12);padding: 0.4em 0.7em;border-radius: 999px;white-space: nowrap;
}

/* --------------------------------------------------------- sibling strip */
.siblings {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 16px; }
.sib {display: flex;flex-direction: column;gap: 5px;padding: 16px 18px;border: 1px solid var(--c-line);border-radius: var(--r-md);background: #fff;text-decoration: none;transition: border-color 0.25s, background 0.25s;
}
.sib:hover {border-color: var(--c-accent);background: #fbfdff;text-decoration: none; }
.sib span {font-size: 9.5px;font-weight: 800;letter-spacing: 0.13em;text-transform: uppercase;color: var(--c-ink-mute);
}
.sib b {font-size: 14px;color: var(--c-ink);display: flex;align-items: center;justify-content: space-between;gap: 8px;
}
.sib i {font-style: normal;font-size: 11px;font-weight: 700;color: var(--c-ink-mute); }
.sib--here {border-color: rgba(26, 106, 255, 0.45);background: var(--c-accent-soft); }
.sib--here b {color: #0d4fbf; }

@media (max-width: 1080px) {
  .lineup {grid-template-columns: 1fr;max-width: 640px;margin-inline: auto; }
  .mcard__media {aspect-ratio: 4 / 3; }
  .siblings {grid-template-columns: 1fr; }
  .dev-art {display: none; }
}

/* mobile comparison: one block per model instead of a 980 px table */
.cmp-mobile {display: none; }
.cm {border: 1px solid var(--c-line);border-radius: var(--r-lg);background: #fff;overflow: hidden; }
.cm--live {border-color: rgba(26, 106, 255, 0.4); }
.cm__head {display: flex;align-items: center;justify-content: space-between;gap: 10px;padding: 15px 18px;background: #f6f9fc;
}
.cm--live .cm__head {background: rgba(26, 106, 255, 0.07); }
.cm__head b {font-size: 15px;letter-spacing: -0.02em; }
.cm__row {display: grid;grid-template-columns: 116px 1fr;gap: 10px;padding: 11px 18px;border-top: 1px solid var(--c-line-soft);
}
.cm__row span {font-size: 9.5px;font-weight: 800;letter-spacing: 0.08em;text-transform: uppercase;color: var(--c-ink-mute);line-height: 1.5;
}
.cm__row p {margin: 0;font-size: 12.5px;line-height: 1.55;color: var(--c-ink-soft); }

@media (max-width: 760px) {
  .cmp-scroll {display: none; }
  .cmp-mobile {display: grid;gap: 14px;margin-top: 6px; }
  .guide__row {grid-template-columns: 1fr;gap: 8px; }
  .guide__arrow {display: none; }
  .modline {grid-template-columns: 1fr; }
  .valid__row {grid-template-columns: 1fr;gap: 6px; }
}

/* ------------------------------------------------- brochure download card */
/* Sits beside the product render, inside the copy column, so the file is
   offered at the point where the reader is already looking at the unit. */
.dl-row {display: flex;flex-wrap: wrap;align-items: center;gap: 12px 14px;
}
/* a page with no specification table has nothing to hang the card from, so
   the row closes the section — and needs its own room above it */
main .section .container > .dl-row:last-child {margin-top: 1.15rem; }
.dl-stack {display: flex;flex-direction: column;align-items: flex-start;gap: 8px; }
.dl-card {display: inline-flex;align-items: center;gap: 12px;max-width: 100%;padding: 10px 13px 10px 11px;border: 1px solid var(--c-line);border-radius: 12px;background: #fff;text-decoration: none;transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.dl-card:hover {border-color: rgba(26, 106, 255, .45);box-shadow: 0 12px -26px -20px rgba(9, 47, 87, .55);transform: translateY(-1px);
}
.dl-card__ico {flex: none;width: 34px;height: 34px;border-radius: 9px;background: var(--c-accent-soft);color: #1a6aff;display: grid;place-items: center;
}
.dl-card__txt {min-width: 0; }
.dl-card__txt b {display: block;font-size: 13px;font-weight: 700;color: var(--c-ink);line-height: 1.3;
}
.dl-card__txt span {display: block;margin-top: 2px;font-size: 11px;line-height: 1.4;color: var(--c-ink-mute);
}
.dl-card__tag {flex: none;margin-right: 4px;padding: 3px 5px;border-radius: 4px;background: var(--c-accent-soft);color: #1a6aff;font-size: 9px;font-weight: 800;letter-spacing: .1em;
}
.dl-mini {display: inline-flex;align-items: center;gap: 7px;font-size: 12.5px;font-weight: 700;color: var(--c-ink-soft);text-decoration: none;
}
.dl-mini svg {flex: none;color: #1a6aff; }
.dl-mini i {font-style: normal;font-size: 11px;font-weight: 600;color: var(--c-ink-mute); }
.dl-mini:hover {color: #1a6aff; }
.intro-split .prose .dl-card {margin-top: 1.15rem; }
@media (max-width: 620px) {
  .dl-row {gap: 10px; }
  .dl-row .dl-card {width: 100%; }
  /* the one-line comparison link becomes a two-line block: label on the
     first row, size on the second, icon spanning both */
  .dl-mini {display: grid;grid-template-columns: 14px minmax(0, 1fr);gap: 2px 7px;align-items: start;
  }
  .dl-mini svg {grid-row: 1 / span 2;margin-top: 2px; }
  .dl-mini i {grid-column: 2; }
}

/* ------------------------------------------------- DB Series family page */
/* A light studio hero, because the family photograph is shot on white: a
   dark overlay would fight the image and hide the terminals. */
.hero-fam {position: relative;background: radial-gradient(120% 150% at 88% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, #f8fafc 0%, #e9eef5 100%);border-bottom: 1px solid var(--c-line);overflow: hidden;
}
.hero-fam__in {display: grid;
  /* 46/54 rather than 44/56: the photograph below is capped at 600 px, so
     the column it sits in no longer has to be the wider one — the extra
     width goes to the words, which keeps the two blocks reading as a
     pair instead of a caption hanging off a poster. */grid-template-columns: minmax(0, 46%) minmax(0, 1fr);gap: clamp(14px, 2.4vw, 38px);align-items: center;max-width: 1260px;margin-inline: auto;padding: clamp(26px, 3.4vw, 46px) 24px clamp(22px, 2.6vw, 34px);
}
.hero-fam__copy {max-width: 34rem; }
.hero-fam h1 {margin: 0 0 .7rem;font-size: clamp(1.85rem, 1.1rem + 2.2vw, 2.9rem);line-height: 1.1;letter-spacing: -.02em;color: var(--c-ink);
}
.hero-fam__lead {margin: 0;font-size: clamp(1rem, .94rem + .22vw, 1.08rem);line-height: 1.62;color: var(--c-ink-soft);max-width: 33rem;
}
.hero-fam .btn-row {margin-top: 1.5rem;display: flex;gap: 12px;flex-wrap: wrap; }
.hero-fam .breadcrumb {color: #6b7f96;margin-bottom: 1.1rem; }
.hero-fam .breadcrumb a {color: #6b7f96; }
.hero-fam .breadcrumb a:hover {color: var(--c-accent); }
.hero-fam__media {
  /* Used to pull a negative margin and bleed the photograph out to the
     viewport edge, which made it read as its own poster. It now stops on
     the container's content edge, lining up with the nav and the footer. */margin-left: 0;display: flex;align-items: center;justify-content: flex-end;
}
.hero-fam__figure {width: 100%;max-width: 600px;margin: 0 0 0 auto;
}
.hero-fam__figure figcaption {margin-top: 10px;text-align: left;font-size: 11px;line-height: 1.5;color: var(--c-ink-mute);
}
.hero-fam__frame {position: relative;width: 100%;
  /* taller crop than 4/2.72: at 600 wide that ratio still gave a 435 px
     block, which stood 5 px over the copy column and pushed the first
     screen down. 4/2.7 lands it level with the words. */aspect-ratio: 4 / 2.7;border-radius: 22px;overflow: hidden;background: #f1f4f8;border: 1px solid rgba(25, 40, 65, .07);box-shadow: 0 34px -70px -48px rgba(9, 47, 87, .45);
}
.hero-fam__media img {width: 100%;height: 100%;object-fit: cover;object-position: center; }
.hero-fam__facts {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 0;margin: 1.7rem 0 0;padding: 0;list-style: none;border-top: 1px solid var(--c-line);max-width: 31rem;
}
.hero-fam__facts li {padding: 12px 16px 0 0; }
.hero-fam__facts li + li {padding-right: 16px;border-right: 1px solid var(--c-line); }
.hero-fam__facts b {display: block;font-size: 1rem;letter-spacing: -.01em;color: var(--c-ink); }
.hero-fam__facts span {display: block;margin-top: 2px;font-size: 10px;font-weight: 700;letter-spacing: .1em;text-transform: uppercase;color: var(--c-ink-mute);
}

/* the family grid fills as the list grows — no hard-coded column count */
.lineup--fam {grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mcard--shop .mcard__media {background: var(--c-tint); }
.mcard--shop .mcard__cta {gap: 9px; }
.mcard--shop .mcard__cta .dl-mini {justify-content: center;font-size: 12px; }
.mcard--shop .mcard__facts b {font-size: 12px; }
.sib p {margin: 4px 0 0;font-size: 11.5px;line-height: 1.5;color: var(--c-ink-soft); }

/* range continues — chips, so more units can be added without reflowing copy */
.more-strip {display: grid;grid-template-columns: minmax(0, 1fr) auto auto;gap: 22px;align-items: center;margin-top: 22px;padding: 16px 22px;border: 1px dashed var(--c-line-strong, #cfdae6);border-radius: var(--r-lg);background: #fbfcfe;
}
.more-strip__head {display: flex;gap: 12px;align-items: flex-start; }
.more-strip__mark {width: 32px;height: 32px;border-radius: 50%;border: 1px solid var(--c-line);display: grid;place-items: center;color: var(--c-ink-mute);background: #fff;flex: none;
}
.more-strip__txt > b {display: block;font-size: 13px;color: var(--c-ink); }
.more-strip__txt p {margin: 3px 0 0;font-size: 11px;line-height: 1.55;color: var(--c-ink-mute);max-width: 34rem;
}
.more-strip__list {display: flex;flex-wrap: wrap;gap: 7px;margin: 0;padding: 0;list-style: none; }
.more-strip__list li {display: flex;flex-direction: column;gap: 1px;padding: 6px 11px;border: 1px solid var(--c-line);border-radius: 9px;background: #fff;
}
.more-strip__list b {font-size: 12px;letter-spacing: .01em;color: var(--c-ink); }
.more-strip__list span {font-size: 10px;font-weight: 600;letter-spacing: .04em;text-transform: uppercase;color: var(--c-ink-mute);
}
.more-strip__list .is-more {border-style: dashed;background: transparent; }
.more-strip__list .is-more b {color: var(--c-ink-mute);font-size: 14px;line-height: 1; }

/* comparison: columns come from the list; the label column stays put */
table.cmp--fam th, table.cmp--fam td {padding: 14px 15px; }
table.cmp--fam .cmp__h {gap: 4px; }
table.cmp--fam .cmp__h span {font-size: 10.5px;font-weight: 600;color: var(--c-ink-mute);line-height: 1.3; }
table.cmp--fam th[scope="row"] {position: sticky;right: 0;background: #fff;z-index: 1;box-shadow: -1px 0 0 var(--c-line-soft);
}
table.cmp--fam thead th.cmp__corner {position: sticky;right: 0;z-index: 3;background: #f6f9fc; }
.cmp-hint {display: none; }
.cm__role {font-size: 10.5px;font-weight: 600;color: var(--c-ink-mute);text-align: left; }

@media (max-width: 1080px) {
  .hero-fam__in {grid-template-columns: 1fr;padding-top: 26px; }
  .hero-fam__media {order: -1;margin-left: 0;justify-content: center; }
  /* once stacked, the 600 px cap would leave the picture pinned right with
     a lap of white on its left — centre it instead */
  .hero-fam__figure {margin-inline: auto; }
  .hero-fam__frame {aspect-ratio: 16 / 10; }
  .hero-fam__copy {max-width: none; }
  .lineup--fam {grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));max-width: none;margin-inline: 0; }
  .more-strip {grid-template-columns: minmax(0, 1fr);gap: 14px; }
  .more-strip .btn {justify-self: start; }
  .cmp-hint {display: block;margin: 8px 0 0;font-size: 11px;color: var(--c-ink-mute); }
}
@media (max-width: 760px) {
  .lineup--fam {grid-template-columns: 1fr;max-width: 640px;margin-inline: auto; }
  .cmp-hint {display: none; }
}
@media (max-width: 620px) {
  .hero-fam__frame {aspect-ratio: 4 / 3;border-radius: 16px; }
  .hero-fam__facts {max-width: none; }
  .hero-fam__facts li {padding-left: 12px; }
  .hero-fam__facts li + li {padding-right: 12px; }
  .hero-fam__facts b {font-size: .92rem; }
}

/* ------------------------------------ Cameras & Sensors family page */
/* The input family is shot 14:10, so its hero frame keeps that ratio
   instead of cropping the mast off the weather station. */
.hero-fam--input .hero-fam__frame {aspect-ratio: 14 / 10; }

/* Input-family renders are cut to transparency now, so they get the card wash
   and a shadow like every other card. The two concept drawings are opaque
   plates with their own dark ground: a shadow would trace their rectangle. */
.mcard--input .mcard__media {aspect-ratio: 4 / 3;background: var(--c-tint); }
.mcard--input .mcard__media > img[src$="product-vision-counter.png"],
.mcard--input .mcard__media > img[src$="product-minic-pro.png"] {filter: none; }

/* the part number is reference data, not a headline */
.mcard__sku {display: block;margin: 0;font-size: 10px;letter-spacing: .03em;color: var(--c-ink-mute);font-variant-numeric: tabular-nums;
}

/* one card, three part numbers — listed rather than hidden in a footnote */
.mcard__models {margin: 11px 0 0;padding: 10px 0 0;list-style: none;display: grid;gap: 5px;border-top: 1px dashed var(--c-line);
}
.mcard__models li {display: grid;gap: 0;font-size: 10.5px;line-height: 1.45;color: var(--c-ink-mute); }
.mcard__models b {font-weight: 600;color: var(--c-ink-soft);letter-spacing: .01em; }

/* a unit that cannot be ordered yet: dashed placeholder, no photograph */
.mcard__note {border: 1px dashed var(--c-line-strong, #cfdae6);background: #fbfcfe;border-radius: var(--r-lg);padding: 26px 24px;display: flex;
  /* stretch, not flex-start: the body has to fill the box before its own
     justify-content can centre the copy inside it */align-items: stretch;
}
.mcard__note .mcard__body {padding: 0;justify-content: center; }
.mcard__note h3 {font-size: 1.3rem;letter-spacing: -.02em; }

/* group headings inside the line-up — a rule, then the group's own note */
.grp {display: flex;align-items: baseline;gap: 14px;margin: 38px 0 18px;padding-top: 22px;border-top: 1px solid var(--c-line);
}
.grp:first-of-type {border-top: 0;padding-top: 0;margin-top: 0; }
.grp h3 {margin: 0;font-size: 1.02rem;letter-spacing: -.01em;color: var(--c-ink); }
.grp p {margin: 0;font-size: 12.5px;color: var(--c-ink-mute); }
.grp__n {margin-right: auto;font-size: 10px;font-weight: 700;letter-spacing: .1em;text-transform: uppercase;color: var(--c-ink-mute);white-space: nowrap;
}

/* explicit column counts: two cards read as a pair, four as a range */
.lineup--2 {grid-template-columns: repeat(2, minmax(0, 1fr));max-width: 760px; }
.lineup--4 {grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* three notes read as a footer row, not as a list */
.cmp-notes--cols {grid-template-columns: repeat(3, minmax(0, 1fr));gap: 14px 30px; }
/* the second comparison table gets its own heading inside the section */
.cmp-sub {display: flex;align-items: baseline;gap: 12px;margin: 36px 0 12px; }
.cmp-sub h3 {margin: 0;font-size: .94rem;color: var(--c-ink); }
.cmp-sub p {margin: 0;font-size: 12px;color: var(--c-ink-mute); }

@media (max-width: 1080px) {
  .lineup--4 {grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lineup--2 {max-width: none; }
  .grp {flex-wrap: wrap;gap: 6px; }
  .grp__n {margin-right: 0;width: 100%; }
}
@media (max-width: 900px) {
  .cmp-notes--cols {grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .lineup--2, .lineup--4 {grid-template-columns: minmax(0, 1fr); }
}

/* six chips do not fit beside the copy, so that strip puts them on a row of
   their own instead of squeezing the sentence it is explaining */
.more-strip--chips {grid-template-columns: minmax(0, 1fr) auto;grid-template-areas: "head btn" "list list";row-gap: 16px;
}
.more-strip--chips .more-strip__head {grid-area: head; }
.more-strip--chips .more-strip__list {grid-area: list; }
.more-strip--chips .btn {grid-area: btn;align-self: center; }
@media (max-width: 1080px) {
  .more-strip--chips {grid-template-columns: minmax(0, 1fr);grid-template-areas: "head" "list" "btn"; }
  .more-strip--chips .btn {justify-self: start; }
}

/* ------------------------------------------------------------------
   17  CASE ARTICLE — the pages behind "Read Full Article"
   ------------------------------------------------------------------ */
/* The head is deliberately light: the case list is a white page, and an
   article that opens on a photographic hero would read as a different site.
   The photograph arrives once, below the first two sentences, at 16:9. */

.article-head {padding: clamp(34px, 4.6vw, 64px) 0 0; }
.article-head .breadcrumb {color: var(--c-ink-mute);margin-bottom: 1.4rem; }
.article-head .breadcrumb a:hover {color: var(--c-accent); }
.article-head .eyebrow {margin-bottom: 0.6rem; }
.article-head h1 {max-width: 21ch;margin: 0;font-size: clamp(30px, 4.1vw, 46px);line-height: 1.06;letter-spacing: -0.028em;text-wrap: balance;
}
.article-head__lead {max-width: 58ch;margin: 1.15rem 0 0;color: var(--c-ink-soft);font-size: clamp(16px, 1.15vw, 18.5px);line-height: 1.62;
}

/* Three numbers, because the table further down is the only place they
   are explained — this is the summary a reader can leave with. */
.article-stats {display: flex;flex-wrap: wrap;gap: 0 2.4rem;margin: 1.9rem 0 0;padding: 0;list-style: none;
}
.article-stats li {display: grid;gap: 0.15rem;padding: 0.15rem 0 0.15rem 1.1rem;border-right: 2px solid var(--c-accent-soft); }
.article-stats li:first-child {padding-right: 0;border-right: 0; }
.article-stats b {color: var(--c-ink);font-size: clamp(24px, 2.2vw, 30px);font-weight: 700;line-height: 1;letter-spacing: -0.03em;font-variant-numeric: tabular-nums lining-nums;
}
.article-stats span {color: var(--c-ink-mute);font-size: 11px;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;
}

@media (max-width: 640px) {
  .article-stats {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 0.9rem;margin-top: 1.4rem;
  }
  .article-stats li {padding-right: 0.8rem; }
  .article-stats b {font-size: 21px; }
  .article-stats span {font-size: 9.5px;letter-spacing: 0.08em; }
}

.article-hero {padding: clamp(26px, 3.4vw, 44px) 0 0; }
.article-hero figure {margin: 0; }
.article-hero img {display: block;width: 100%;
  /* 16:10 is how the photographs are delivered: a 16:9 box would crop the
     ceiling off one frame and the animals off the next */aspect-ratio: 16 / 10;object-fit: cover;border-radius: var(--r-xl);background: var(--c-tint-strong);box-shadow: 0 30px -60px -46px rgba(9, 47, 87, 0.6);
}

/* --- the reading column ------------------------------------------- */
/* 720 px, but the table inside may run wider than the text: it is the one
   element that is a table in the source, and squeezing four short columns
   into 720 px would be worse than letting it scroll. */
.case-prose {max-width: 720px;margin-inline: auto;padding-block: clamp(30px, 4vw, 54px) 0;color: var(--c-ink-soft);font-size: 16.5px;line-height: 1.72;
}
.case-prose > h2 {margin: 2.3em 0 0.65em;color: var(--c-ink);font-size: clamp(20px, 1.7vw, 25px);line-height: 1.24;letter-spacing: -0.02em;
}
.case-prose > h2:first-child {margin-top: 0; }
.case-prose p {margin: 0 0 1.05em; }
.case-prose b, .case-prose strong {color: var(--c-ink);font-weight: 700; }

.case-list {margin: 0 0 1.3em;padding: 0;list-style: none;display: grid;gap: 0.7rem; }
.case-list li {position: relative;padding-right: 1.3rem; }
.case-list li::before {content: '';position: absolute;right: 0;top: 0.68em;width: 7px;height: 7px;border-radius: 2px;background: var(--c-accent);opacity: 0.55;transform: rotate(45deg);
}

.case-prose .table-wrap {margin: 1.5em 0 1.7em;background: var(--c-tint); }
.case-prose .table-wrap table.data {min-width: 620px; }
.case-prose .table-wrap table.data td:nth-child(2) {color: var(--c-ink-soft); }
/* on a phone the three columns become three lines with their own label */
@media (max-width: 700px) {
  .case-prose .table-wrap {background: transparent; }
  .case-prose .table-wrap table.data {min-width: 0;display: block; }
  .case-prose .table-wrap thead {display: none; }
  .case-prose .table-wrap tbody, .case-prose .table-wrap tr {display: block; }
  .case-prose .table-wrap tr {background: var(--c-tint);border-radius: var(--r-lg);padding: 0.95rem 1.05rem;margin-bottom: 0.7rem;
  }
  .case-prose .table-wrap td {display: block;padding: 0.15rem 0;border: 0;font-size: var(--fs-sm);
  }
  .case-prose .table-wrap td:first-child {margin-bottom: 0.35rem;color: var(--c-ink);font-weight: 700;
  }
}

.case-quote {margin: 2em 0 1.6em;padding: 0.2rem 0 0.2rem 1.5rem;border-right: 3px solid var(--c-accent);
}
.case-quote p {margin: 0;color: var(--c-ink);font-size: clamp(18px, 1.6vw, 21px);line-height: 1.55;letter-spacing: -0.012em;
}
.case-quote footer {margin-top: 0.8rem;color: var(--c-ink-mute);font-size: 11px;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;
}

/* --- what to do next --------------------------------------------- */
.article-foot {padding-block: clamp(18px, 2.4vw, 30px) var(--section-y); }
.article-foot__bar {display: flex;flex-wrap: wrap;align-items: center;gap: 1rem 1.6rem;padding: clamp(22px, 2.6vw, 32px);border-radius: var(--r-xl);background: linear-gradient(120deg, #0b2a4a, #0e3a63);color: #fff;
}
.article-foot__bar h2 {margin: 0;color: #fff;font-size: clamp(19px, 1.7vw, 24px);line-height: 1.3;letter-spacing: -0.02em;
}
.article-foot__bar p {margin: 0.35rem 0 0;color: rgba(226, 238, 250, 0.72);font-size: var(--fs-sm); }
.article-foot__bar .btn {margin-right: auto; }
@media (max-width: 760px) {
  .article-foot__bar .btn {margin-right: 0; }
}

.related {margin-top: clamp(30px, 3.4vw, 46px); }
.related h2 {margin: 0 0 1.1rem;color: var(--c-ink);font-size: 12px;font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;
}
.related__grid {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 1.1rem; }
@media (max-width: 900px) { .related__grid {grid-template-columns: minmax(0, 1fr); } }
.related a {display: grid;grid-template-columns: 92px minmax(0, 1fr);gap: 0.9rem;align-items: center;padding: 0.6rem;border-radius: var(--r-lg);background: var(--c-tint);color: inherit;text-decoration: none;transition: background .25s var(--ease), transform .25s var(--ease);
}
.related a:hover {background: var(--c-tint-strong);transform: translateY(-2px);text-decoration: none; }
.related img {width: 92px;height: 66px;object-fit: cover;border-radius: 8px;display: block; }
.related span {color: var(--c-ink);font-size: 13.5px;font-weight: 700;line-height: 1.35;letter-spacing: -0.01em;
}

/* --- the card that now behaves like a link ------------------------ */
a.card {color: inherit;text-decoration: none; }
a.card:hover {text-decoration: none; }
a.card:focus-visible {outline: 2px solid var(--c-accent);outline-offset: 3px; }
a.card .card__link {margin-top: auto; }

/* A supplied photograph that must keep its own 4:3 frame inside a split:
   without this the media column stretches to the height of the copy column
   and `object-fit: cover` shaves the sides — which cut a cow in half on the
   HerdFlow panel. Top-align instead, so the picture ends where it ends. */
.split__media--fit {align-self: start; }

/* The HerdFlow photograph is 16:10 and the inner-page hero only shows a
   thin band of it. Aim that band at the cows and the passage floor, not at
   the roof: a band of purlins reads as a texture, a band of cows reads as
   the product. */
.page-hero--herdflow .page-hero__bg img {object-position: 50% 64%; }

/* the grade list runs the coming-soon tag straight against the label */
.mega__links a .soon-tag {margin-right: 0.4rem; }
/* the add-on entry in the mega menu: name + status on one line, what it is
   on the next — deliberately smaller than a family or a grade */
.mega__addon a {display: flex;flex-wrap: wrap;align-items: center;gap: 0.35rem; }
.mega__addon .mega__meta {flex-basis: 100%; }

/* ---------------------------------------------------------------
   ADD-ON BAND — HerdFlow
   HerdFlow is not a solution family. It produces one input that two
   families consume, so it is presented as a band attached to them:
   a wide card under the family grid on Solutions, and the same block
   on the LyingLogix and NutriTrack pages. Landscape media on the
   left, one heading, one paragraph, three points — quieter than a
   family card on purpose.
   --------------------------------------------------------------- */
.addon {display: grid;grid-template-columns: minmax(0, 34%) minmax(0, 1fr);align-items: stretch;border: 1px solid var(--c-line);border-radius: var(--r-lg);background: var(--c-ground);overflow: hidden;
}
.addon__media {position: relative;overflow: hidden;background: var(--c-tint); }
.addon__media img {width: 100%;height: 100%;object-fit: cover;display: block; }
.addon__body {padding: clamp(1.35rem, 2.6vw, 2.35rem); }
.addon__eyebrow {display: flex;flex-wrap: wrap;align-items: center;gap: 0.55rem;font-size: 0.66rem;font-weight: 700;letter-spacing: var(--ls-eyebrow);text-transform: uppercase;color: var(--c-ink-mute);
}
.addon__eyebrow .soon-pill {position: static; }
.addon__title {margin: 0.55rem 0 0.7rem;font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);line-height: var(--lh-head);letter-spacing: var(--ls-tight);color: var(--c-ink);
}
.addon__lead {margin: 0;max-width: 64ch;color: var(--c-ink-soft);font-size: var(--fs-sm); }
.addon__points {list-style: none;margin: 1rem 0 1.15rem;padding: 0;display: grid;gap: 0.4rem;
}
.addon__points li {position: relative;padding-right: 1.1rem;font-size: var(--fs-sm);color: var(--c-ink-soft);
}
.addon__points li::before {content: '';position: absolute;right: 0;top: 0.62em;width: 6px;height: 6px;border-radius: 50%;background: var(--c-accent);
}
/* The add-on band lives on the LyingLogix and NutriTrack pages only; on
   Solutions the same idea is carried by a ninth card in the module grid
   (`.card__tag` marks it), so there is no grid-spanning rule here. */

@media (max-width: 820px) {
  .addon {grid-template-columns: 1fr; }
  .addon__media {aspect-ratio: 16 / 9; }
}

/* The same P/N line, for a line that names a set rather than a part
   ("per project" — the sensors, which are specified per barn). Same
   column, quieter colour, so a bill of materials has no visual hole. */
.pn--soft {color: var(--c-ink-soft);font-weight: 700; }

/* ==================================================================
   Site search — the header magnifier
   A sheet over the page rather than a separate results page: one query,
   one answer, no navigation. Rows are real links, so ⌘-click works.
   ================================================================== */
.sfind[hidden] {display: none !important; }
.sfind {position: fixed;inset: 0;z-index: 1200;display: flex;align-items: flex-start;justify-content: center;padding: clamp(3.4rem, 9vh, 6rem) 1rem 1rem;
}
html.sfind-open {overflow: hidden; }
.sfind__scrim {position: absolute;inset: 0;background: rgba(6, 16, 30, 0.42);backdrop-filter: blur(2px);
}
.sfind__panel {position: relative;width: min(46rem, 100%);max-height: min(72vh, 34rem);display: flex;flex-direction: column;background: var(--c-white, #fff);border-radius: 18px;border: 1px solid var(--c-line-soft, rgba(10, 26, 44, 0.1));box-shadow: 0 30px -70px rgba(8, 20, 36, 0.26);overflow: hidden;
}
.sfind__bar {display: flex;align-items: center;gap: 0.6rem;padding: 0.85rem 1rem;border-bottom: 1px solid var(--c-line-soft, rgba(10, 26, 44, 0.08));color: var(--c-ink-mute, #6b7c8f);
}
.sfind__bar > svg {flex: none; }
.sfind__input {flex: 1;min-width: 0;border: 0;outline: 0;background: transparent;font: inherit;font-size: 1.02rem;padding: 0.25rem 0;color: var(--c-ink, #0d1b2a);
}
.sfind__input::-webkit-search-cancel-button,
.sfind__input::-webkit-search-decoration {display: none; }
.sfind__close {flex: none;display: inline-flex;align-items: center;justify-content: center;width: 34px;height: 34px;border-radius: 50%;border: 0;background: rgba(10, 26, 44, 0.05);color: inherit;cursor: pointer;
}
.sfind__close:hover {background: rgba(10, 26, 44, 0.1); }
.sfind__hint {margin: 0;padding: 0.55rem 1.05rem;font-size: 0.78rem;color: var(--c-ink-mute, #6b7c8f);border-bottom: 1px solid var(--c-line-soft, rgba(10, 26, 44, 0.06));
}
.sfind.is-searched .sfind__hint {display: none; }
.sfind__list {list-style: none;margin: 0;padding: 0.35rem;overflow-y: auto;flex: 1;
}
.sfind__row {margin: 0; }
.sfind__hit {display: block;padding: 0.6rem 0.75rem;border-radius: 10px;text-decoration: none;color: inherit;
}
.sfind__hit:hover,
.sfind__hit:focus-visible {background: var(--c-tint, rgba(26, 106, 255, 0.07));outline: none; }
.sfind__top {display: flex;align-items: baseline;gap: 0.45rem;flex-wrap: wrap;
}
.sfind__top b {font-size: 0.92rem;font-weight: 650; }
.sfind__crumb {font-size: 0.74rem;color: var(--c-ink-mute, #6b7c8f); }
.sfind__snip {display: block;margin-top: 0.18rem;font-size: 0.8rem;line-height: 1.45;color: var(--c-ink-soft, rgba(13, 27, 42, 0.72));
}
.sfind__snip mark,
.sfind__top mark {background: var(--c-accent-soft, rgba(26, 106, 255, 0.16));color: inherit;border-radius: 3px;padding: 0 1px;
}
.sfind__empty {margin: 0;padding: 1.4rem 1.05rem 1.7rem;font-size: 0.88rem;text-align: center;color: var(--c-ink-mute, #6b7c8f);
}
@media (max-width: 640px) {
  .sfind {padding: 0.5rem; }
  .sfind__panel {max-height: 88vh;border-radius: 14px; }
}