/* ═══════════════════════════════════════════════════════════════════════
   FLEXXBOTICS — SITE STYLESHEET
   ───────────────────────────────────────────────────────────────────────
   Single shared stylesheet for every page (Homepage, Solutions, Videos,
   News, Press Releases, Blog, and article/post templates). Every page
   links to this one file — nothing below should be duplicated locally
   inside a page's own <style> block. Change a value once here (e.g.
   --fs-body, or any colour) and it updates everywhere automatically.

   TYPE SCALE — updated tier sizes, one variable per level, used everywhere:
     Sub-Body 13 → Body 16 → H5 20 → H4 25 → H3 31 → H2 39 → H1 63
   All heading levels (hero titles, section headings, article headings)
   read their desktop max size from these same --fs-* variables, so a
   change to --fs-h2 here updates the Homepage/Solutions/Videos section
   headings, the video-teaser and CTA-band headlines, and every article's
   H2s in one edit — not eight. --fs-lead and --fs-card-title are kept as
   aliases of --fs-h5 / --fs-h4 respectively (rather than deleting them and
   editing every usage) so lead paragraphs and card titles automatically
   land on the correct tier without hunting down each reference.

   Responsive scaling: each heading's clamp() midpoint (the vw term) is
   proportioned to the same ratio as its fixed desktop size, so H1 > H2 >
   H3 > H4 holds true at every viewport width, not just at the fixed
   desktop maximum. (This fixes a real bug found on two article pages,
   where a flat "4vw" on every level made H1 and H2 render at an
   identical pixel size across most of the tablet/laptop range.)

   Colour note: the single muted/secondary text colour used throughout
   (body copy, lead paragraphs, hero subtext, captions, sub-headers) is
   #e9e9e9 — every other grey/translucent-white text shade site-wide has
   been consolidated onto this one value. A handful of very low-opacity
   whites remain by design, not oversight: decorative micro-labels/eyebrow
   kickers, icon glyphs, and the mobile-nav dimmed-state text, none of
   which are conventional reading text.
   ═══════════════════════════════════════════════════════════════════════ */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
    :root {
      --gr: 1.25; /* Major Third — Apple-style refined scale (historical reference; tiers below are now set explicitly) */
      --fs-subbody: 13px;
      --fs-small: 14px; /* secondary/smaller supporting paragraph — distinct from --fs-subbody (13px captions/bylines) */
      --fs-body: 16px;
      --fs-h5: 20px;
      --fs-h4: 25px;
      --fs-h3: 31px;
      --fs-h2: 39px;
      --fs-h1: 63px;
      --fs-lead: var(--fs-h5);
      --fs-card-title: var(--fs-h4);
    }
    body { background: #000; font-family: "Inter", sans-serif; color: #fff; font-size: var(--fs-body); max-width: 100%; }

    /* ═══════════════════════════════════════
       NAV
    ═══════════════════════════════════════ */
    .nav-wrap {
      background: #000; width: 100%; padding: 0 3.6rem;
      position: sticky; top: 0; z-index: 200;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .nav-bar {
      display: flex; align-items: center; gap: 2px;
      max-width: 1440px; width: 100%; height: 64px; margin: 0 auto;
    }
    .nav-logo { height: 22px; width: auto; display: block; flex-shrink: 0; margin-right: 2rem; }
    .nav-item {
      display: flex; align-items: center; gap: 6px; padding: 10px 14px; height: 64px;
      font-family: "Inter", sans-serif; font-size: 14px; font-weight: 500;
      letter-spacing: .03em; text-transform: uppercase; color: #fff; cursor: pointer;
      text-decoration: none; border: 1px solid transparent; border-radius: 0;
      transition: background 180ms ease, color 150ms ease; white-space: nowrap;
      position: relative; overflow: visible; user-select: none;
    }
    .nav-item i
    .nav-item:hover { color: #65b49c !important; background: #000; }
    .nav-item.active { border-color: transparent !important; background: #000 !important; }
    
    
    .nav-spacer { flex: 1; }
    .nav-cta {
      padding: 9px 20px; background: #24bd9f; color: #000; font-family: "Inter", sans-serif;
      font-size: 14px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; 
      border: 2px solid transparent; border-radius: 0; cursor: pointer;
      transition: background 200ms ease, border-color 200ms ease, color 200ms ease; flex-shrink: 0;
    }
    .nav-cta:hover { background: #000; border-color: #fff; color: #fff; }
    .nav-cta-yellow { background: #cba035; color: #000; border-color: #cba035; margin-right: 8px; }
    .nav-cta-yellow:hover { background: #000; border-color: #cba035; color: #cba035; }
    .has-dropdown { position: relative; }
    .has-dropdown:hover .dropdown {
      transform: scaleY(1); opacity: 1; visibility: visible;
      transition:
        transform 480ms cubic-bezier(0.22,1,0.36,1),
        opacity 270ms ease,
        visibility 0s;
      pointer-events: all;
    }
    
    .dropdown {
      position: fixed; top: 64px; left: 0; width: 100%;
      background: #000; border-bottom: 1px solid rgba(255,255,255,0.1);
      transform-origin: top center;
      transform: scaleY(0); opacity: 0; visibility: hidden;
      transition:
        transform 480ms cubic-bezier(0.22,1,0.36,1),
        opacity 300ms ease,
        visibility 0s 480ms;
      pointer-events: none; z-index: 300;
    }
    .page-overlay {
      position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.5);
      opacity: 0; pointer-events: none;
      transition: opacity 330ms ease;
      z-index: 150;
      /* Sits below .nav-wrap's own z-index (200). .nav-wrap creates its own
         stacking context (position:sticky + z-index), so anything nested inside
         it — including the dropdown, even at z-index:300 — is only ever compared
         against this overlay AS A WHOLE UNIT via nav-wrap's z-index, not directly.
         Keeping this below 200 means the entire nav (and its dropdown) always
         paints above the dim layer, so the menu itself never looks darkened. */
    }
    .page-overlay.active { opacity: 1; }
    .dropdown-inner {
      width: 100%;
      display: flex; gap: 4.5rem;
      /* padding-left is set dynamically by JS to match each trigger word's exact
         horizontal position, so the menu content lines up directly below the
         word that opened it rather than sitting in a fixed/centred position */
      padding: 3px 3.6rem 18px 3.6rem;
    }
    /* Single-section dropdowns (Resources, Company) wrap their links into two
       columns so the menu makes better use of the new full-width bar, without
       inventing new section labels that weren't there before. */
    
    .dropdown-section { padding: 8px 0 4px; }
    .dropdown-section + .dropdown-section { border-top: 1px solid rgba(255,255,255,0.08); }
    .dropdown-parent {
      display: block; padding: 5px 18px 3px; font-family: "Inter", sans-serif;
      font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
      color: #fff; cursor: default;
    }
    .dropdown-child {
      display: flex; align-items: center; gap: 9px; padding: 5px 18px;
      font-family: "Inter", sans-serif; font-size: 12px; font-weight: 400;
      letter-spacing: .02em; color: #e9e9e9; text-decoration: none;
      transition: background 150ms ease, color 150ms ease, padding-left 150ms ease;
    }
    .dropdown-child i { font-size: 14px; color: rgba(255,255,255,0.3); flex-shrink: 0; transition: color 150ms ease; }
    .dropdown-child:hover { background: #000000; color: #5bb9a0 !important; padding-left: 22px; }
    .dropdown-child:hover i { color: rgba(255,255,255,0.7); }
    .ripple { position: absolute; border-radius: 50%; transform: scale(0); pointer-events: none; animation: rpl 550ms cubic-bezier(0.4,0,0.2,1) forwards; }
    @keyframes rpl { to { transform: scale(4); opacity: 0; } }

    /* ═══════════════════════════════════════
       DIVIDERS — left-origin & right-origin
    ═══════════════════════════════════════ */
    .div-line {
      width: 100vw; margin-left: calc(-50vw + 50%);
      position: relative; height: 1px; overflow: hidden;
      margin-top: 0; margin-bottom: 0;
    }
    /* Left-origin: line sweeps from left edge, ends ~80% across */
    .div-left::before {
      content: ""; position: absolute; top: 0; left: 0;
      height: 1px; background: #24bd9f;
      width: 0; transition: width 1000ms cubic-bezier(0.22,1,0.36,1);
    }
    .div-left.animate::before { width: 80%; }
    /* Right-origin: line sweeps from right edge, ends ~65% across from right */
    .div-right::after {
      content: ""; position: absolute; top: 0; right: 0;
      height: 1px; background: #24bd9f;
      width: 0; transition: width 1000ms cubic-bezier(0.22,1,0.36,1);
    }
    .div-right.animate::after { width: 68%; }

    /* ═══════════════════════════════════════
       SHARED SECTION LAYOUT
    ═══════════════════════════════════════ */
    .section { width: 100%; padding: 0 3.6rem; }
    .section-inner {
      max-width: 1440px; margin: 0 auto;
      display: flex; flex-direction: column;
      padding: 14rem 0;
      position: relative; z-index: 1;
    }

    /* ═══════════════════════════════════════
       HEADINGS
    ═══════════════════════════════════════ */
    .heading-block {
      margin-bottom: 3.5rem;
      opacity: 0; transform: translateY(20px);
      transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22,1,0.36,1);
    }
    .heading-block.animate { opacity: 1; transform: translateY(0); }
    .heading-block h1 { font-size: clamp(30px,4.92vw,var(--fs-h1)); font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 1rem; }
    .heading-block h2 { font-size: clamp(24px,3.05vw,var(--fs-h2)); font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 1rem; }
    .heading-block p { font-size: var(--fs-body); font-weight: 400; color: #e9e9e9; line-height: 1.7; max-width: 50%; }

    /* ═══════════════════════════════════════
       CARD GRID (Sections 1 & 4)
    ═══════════════════════════════════════ */
    .card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
    .card {
      background: #000; border: 1px solid #24bd9f; padding: 2.5rem 2rem 2rem;
      display: flex; flex-direction: column; cursor: pointer; border-radius: 0;
      opacity: 0; transform: translateY(32px); height: 100%;
      transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22,1,0.36,1);
      position: relative;
    }
    .card.animate { opacity: 1; transform: translateY(0); }
    .card:nth-child(2) { transition-delay: 100ms; }
    .card:nth-child(3) { transition-delay: 200ms; }
    .icon-box {
      width: 72px;
      height: 72px;
      background: transparent;
      margin: 0 auto 1.75rem;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .icon-box i {
      font-size: 48px;
      color: #5ab99e;
    }
    .card-title { font-size: var(--fs-card-title); font-weight: 700; color: #fff; text-align: center; line-height: 1.25; margin-bottom: 1.5rem; }
    .card-subhead {
      font-size: var(--fs-body);
      font-weight: 700;
      color: #5ab99e;
      line-height: 1.4;
      margin-bottom: .5rem;
    }
    .bullet-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
    .bullet-list li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-body); color: #e9e9e9; line-height: 1.45; }
    .bullet { width: 10px; height: 10px; background: #24bd9f; flex-shrink: 0; margin-top: 3px; border-radius: 0; }

    /* Card hover: A — diagonal border wipe */
    .card-a { overflow: visible; border: 1px solid #24bd9f; }
    .card-a .bd-top, .card-a .bd-right, .card-a .bd-bottom, .card-a .bd-left {
      position: absolute; background: #24bd9f; pointer-events: none; z-index: 3; opacity: 0;
    }
    .card-a .bd-top    { top: -2px;    left: -2px;  height: 2px; width: 0; }
    .card-a .bd-left   { top: -2px;    left: -2px;  width: 2px;  height: 0; }
    .card-a .bd-right  { top: -2px;    right: -2px; width: 2px;  height: 0; }
    .card-a .bd-bottom { bottom: -2px; left: -2px;  height: 2px; width: 0; }
    .card-a.drawing .bd-top  { opacity:1; width:calc(100% + 4px); transition:width var(--bd-top-dur,420ms) cubic-bezier(0.4,0,0.15,1) 0ms, opacity 0ms 0ms; }
    .card-a.drawing .bd-left { opacity:1; height:calc(100% + 4px); transition:height var(--bd-left-dur,520ms) cubic-bezier(0.4,0,0.15,1) 0ms, opacity 0ms 0ms; }
    .card-a.drawing .bd-right  { opacity:1; height:calc(100% + 4px); transition:height var(--bd-left-dur,520ms) cubic-bezier(0.4,0,0.15,1) var(--bd-delay,420ms), opacity 0ms var(--bd-delay,420ms); }
    .card-a.drawing .bd-bottom { opacity:1; width:calc(100% + 4px);  transition:width var(--bd-top-dur,420ms)  cubic-bezier(0.4,0,0.15,1) var(--bd-delay,420ms), opacity 0ms var(--bd-delay,420ms); }
    .card-a.undrawn .bd-top,.card-a.undrawn .bd-right,.card-a.undrawn .bd-bottom,.card-a.undrawn .bd-left { opacity:0; width:0; height:0; transition:opacity 300ms ease, width 0ms 300ms, height 0ms 300ms; }
    .card-a:hover .icon-box { animation: pulse-box 500ms ease 900ms forwards; }
    .card-static:hover .icon-box { animation: none; }
    .card-b, .card-c { overflow: hidden; }
    .card-b::before, .card-c::before { content:""; position:absolute; inset:0; border:1px solid #24bd9f; opacity:0; transform:scale(1.05); transition:opacity 350ms ease,transform 350ms ease; pointer-events:none; }
    .card-b:hover::before, .card-c:hover::before { opacity:1; transform:scale(1); }
    .card-b:hover .icon-box, .card-c:hover .icon-box { animation:pulse-box 700ms ease forwards; }
    @keyframes pulse-box { 0%{transform:scale(1)} 40%{transform:scale(1.08)} 100%{transform:scale(1)} }

    /* Card hover: B, C — inner border zoom */
    

    /* ═══════════════════════════════════════
       CAPABILITY LIST — full-width numbered rows
       (Solutions page: Platform Capabilities. An editorial alternative
       to the icon card grid — each capability spans the full section
       width as a single row: ghost-outlined index number, title +
       description, and a bordered category tag, with a green accent
       bar that draws in on hover.)
    ═══════════════════════════════════════
    */
    .capability-list {
      display: flex; flex-direction: column;
      margin-top: 3rem;
      border-top: 1px solid rgba(255,255,255,0.12);
    }
    .capability-row {
      display: grid;
      grid-template-columns: 132px 1fr;
      align-items: center;
      padding: 2.5rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.12);
      position: relative;
      opacity: 0; transform: translateY(28px);
      transition: opacity 650ms ease, transform 650ms cubic-bezier(0.22,1,0.36,1), background 300ms ease;
    }
    .capability-row.animate { opacity: 1; transform: translateY(0); }
    .capability-row:nth-child(2) { transition-delay: 60ms; }
    .capability-row:nth-child(3) { transition-delay: 120ms; }
    .capability-row:nth-child(4) { transition-delay: 180ms; }
    .capability-row:nth-child(5) { transition-delay: 240ms; }
    .capability-row:nth-child(6) { transition-delay: 300ms; }
    .capability-row::before {
      content: ""; position: absolute; left: 0; top: 0; bottom: 0;
      width: 0; background: #24bd9f;
      transition: width 420ms cubic-bezier(0.4,0,0.15,1);
    }
    .capability-row:hover::before { width: 3px; }
    .capability-row:hover { background: rgba(255,255,255,0.025); }
    .capability-index {
      width: 24.5px; height: 24.5px; background: #5bbaa0;
      justify-self: center;
      transition: opacity 300ms ease;
    }
    .capability-row:hover .capability-index { opacity: .8; }
    .capability-title { font-size: var(--fs-h4); font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: .6rem; }
    .capability-desc { font-size: var(--fs-body); color: #e9e9e9; line-height: 1.65; max-width: 620px; }
    @media (max-width: 900px) {
      .capability-row {
        grid-template-columns: 80px 1fr;
        padding: 2rem 0;
      }
      .capability-index { width: 20px; height: 20px; }
    }
    @media (max-width: 640px) {
      .capability-row { grid-template-columns: 64px 1fr; }
      .capability-index { width: 17px; height: 17px; }
    }

    /* ── Deployment media rows (Solutions Overview page) ──
       Image sized to match the How It Works rail image on
       industrial-data-connectivity.html exactly: height: calc(50vh + 25px). */
    .deploy-media-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center;
    }
    .deploy-media-row .heading-block { max-width: none; }
    .deploy-media-row .heading-block p { max-width: 100%; }
    .deploy-media-image {
      position: relative; width: 100%; height: calc(50vh + 25px);
      overflow: hidden; border: 1px solid rgba(255,255,255,0.12); background: #000;
    }
    .deploy-media-image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85); }
    /* Second row: text + image both shifted toward the right side of the
       section via an empty leading column, image right-aligned, paragraph
       copy itself stays text-align:left within its own narrower column. */
    .deploy-media-row.reverse { grid-template-columns: 1fr 1fr; }
    .deploy-media-row.reverse .heading-block { order: 2; }
    .deploy-media-row.reverse .deploy-media-image { order: 1; }
    @media (max-width: 900px) {
      .deploy-media-row, .deploy-media-row.reverse { grid-template-columns: 1fr; gap: 2rem; }
      .deploy-media-row.reverse .heading-block, .deploy-media-row.reverse .deploy-media-image { order: initial; }
      .deploy-media-image { height: 280px; }
    }

    /* ── Impact grid — 2x2 image cards for "Connect. Detect. Correct. Act." ──
       A more visually impactful alternative to the plain numbered row list:
       each step gets its own photo, a numbered badge, and a title/description,
       arranged 2x2 rather than stacked. */
    .impact-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
      margin-top: 3.5rem;
    }
    .impact-card {
      border: 1px solid rgba(255,255,255,0.14);
      opacity: 0; transform: translateY(28px);
      transition: opacity 650ms ease, transform 650ms cubic-bezier(0.22,1,0.36,1);
    }
    .impact-card.animate { opacity: 1; transform: translateY(0); }
    .impact-card:nth-child(2) { transition-delay: 80ms; }
    .impact-card:nth-child(3) { transition-delay: 160ms; }
    .impact-card:nth-child(4) { transition-delay: 240ms; }
    .impact-card-media { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; }
    .impact-card-media img {
      width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55);
    }
    .impact-card-body { padding: 1.75rem 2rem 2rem; }
    .impact-card-title { font-size: var(--fs-h4); font-weight: 700; color: #fff; margin-bottom: .6rem; }
    .impact-card-desc { font-size: var(--fs-body); color: #e9e9e9; line-height: 1.65; }
    @media (max-width: 700px) {
      .impact-grid { grid-template-columns: 1fr; }
    }

    /* ── Standalone quote section (Solutions Overview page) ──
       A full section in its own right rather than a small inline quote
       block — large decorative quote mark, sizeable quote text, and a
       right-aligned attribution, echoing the supplied reference layout. */
    .quote-section-inner {
      min-height: 620px; display: flex; flex-direction: column; justify-content: center; align-items: center;
    }
    .quote-standalone-wrap { max-width: 70%; text-align: center; position: relative; }
    .quote-mark {
      font-family: Georgia, "Times New Roman", serif; font-size: 189px; font-weight: 700;
      line-height: .6; color: #82abd6; margin-bottom: 0; opacity: 1;
      position: absolute; left: -87.5px; top: -30px;
    }
    .quote-standalone-text {
      font-size: var(--fs-h2); font-weight: 700; color: #fff; line-height: 1.3;
    }
    .quote-standalone-attribution { margin-top: 2.5rem; text-align: center; }
    .quote-standalone-name { font-size: var(--fs-body); font-weight: 700; color: #fff; }
    .quote-standalone-role { font-size: var(--fs-subbody); color: #e9e9e9; margin-top: .3rem; }
    @media (max-width: 900px) {
      .quote-standalone-wrap { max-width: 85%; text-align: left; }
      .quote-mark {
        position: static; float: left; margin-right: 14px; margin-bottom: 0;
        font-size: 64px; line-height: .75;
      }
      .quote-standalone-text { text-align: left; }
      .quote-standalone-attribution { text-align: left; clear: both; }
    }
    @media (max-width: 640px) {
      .quote-section-inner { min-height: auto; }
      .quote-standalone-wrap { max-width: 100%; }
      .quote-mark { font-size: 52px; margin-right: 10px; }
    }

    /* ═══════════════════════════════════════
       PLATFORM OVERVIEW — new component styles
    ═══════════════════════════════════════ */
    /* Step-flow band: numbered circles joined by a connecting line —
       a fresh alternative to the plain numbered-row list used elsewhere. */
    .flow-band { display: flex; align-items: flex-start; margin-top: 3.5rem; }
    .flow-step {
      flex: 1; text-align: center; padding: 0 1.25rem; position: relative;
      opacity: 0; transform: translateY(24px);
      transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22,1,0.36,1);
    }
    .flow-step.animate { opacity: 1; transform: translateY(0); }
    .flow-step:nth-child(2) { transition-delay: 100ms; }
    .flow-step:nth-child(3) { transition-delay: 200ms; }
    .flow-step:nth-child(4) { transition-delay: 300ms; }
    .flow-step-circle {
      width: 64px; height: 64px; border-radius: 50%; border: 2px solid #24bd9f;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; font-weight: 700; color: #24bd9f; background: #000;
      margin: 0 auto 1.25rem; position: relative; z-index: 2;
    }
    .flow-step::before {
      content: ""; position: absolute; top: 32px; left: -50%; width: 100%;
      height: 1px; background: rgba(36,189,159,0.35); z-index: 1;
    }
    .flow-step:first-child::before { display: none; }
    .flow-step-title { font-size: var(--fs-h5); font-weight: 700; color: #fff; margin-bottom: .6rem; }
    .flow-step-desc { font-size: var(--fs-small); color: #e9e9e9; line-height: 1.6; }
    @media (max-width: 900px) {
      .flow-band { flex-direction: column; gap: 2.25rem; margin-top: 2.5rem; }
      .flow-step { padding: 0; text-align: left; display: flex; align-items: flex-start; gap: 1.25rem; }
      .flow-step-circle { margin: 0; flex-shrink: 0; }
      .flow-step::before {
        top: -1.25rem; left: 31px; width: 1px; height: 1.25rem;
      }
      .flow-step-title { margin-bottom: .4rem; }
    }

    /* Architecture cards — three linked cards for Control Plane / Edge
       Software / Drivers, each with an icon, description, and CTA link. */
    .arch-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 3.5rem; }
    .arch-card {
      display: block; text-decoration: none; color: inherit;
      border: 1px solid rgba(255,255,255,0.14); border-top: 3px solid #24bd9f;
      padding: 2.25rem 2rem; background: #000;
      opacity: 0; transform: translateY(28px);
      transition: opacity 650ms ease, transform 650ms cubic-bezier(0.22,1,0.36,1), border-color 250ms ease, background 250ms ease;
    }
    .arch-card.animate { opacity: 1; transform: translateY(0); }
    .arch-card:nth-child(2) { transition-delay: 100ms; }
    .arch-card:nth-child(3) { transition-delay: 200ms; }
    .arch-card:hover { background: rgba(36,189,159,0.05); border-color: rgba(255,255,255,0.28); }
    .arch-card-icon {
      width: 52px; height: 52px; border: 1px solid rgba(36,189,159,0.4);
      display: flex; align-items: center; justify-content: center;
      font-size: 24px; color: #24bd9f; margin-bottom: 1.5rem;
    }
    .arch-card-title { font-size: var(--fs-h4); font-weight: 700; color: #fff; margin-bottom: .75rem; }
    .arch-card-desc { font-size: var(--fs-body); color: #e9e9e9; line-height: 1.6; margin-bottom: 1.5rem; }
    .arch-card-link { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5bbaa0; display: inline-flex; align-items: center; gap: 6px; }
    .arch-card-link i { font-size: 14px; transition: transform 250ms ease; }
    .arch-card:hover .arch-card-link i { transform: translateX(4px); }
    @media (max-width: 900px) {
      .arch-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 2.5rem; }
    }

    /* Architecture rows — full-width stacked variant of the arch-card,
       used on the homepage: number + icon + title/desc + CTA in a single
       elegant row, each spanning the full section width. */
    .arch-row-list { display: flex; flex-direction: column; margin-top: 3.5rem; border-top: 1px solid rgba(255,255,255,0.14); }
    .arch-row {
      display: flex; align-items: center; gap: 2rem;
      padding: 2.75rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.14);
      text-decoration: none; color: inherit; position: relative;
      opacity: 0; transform: translateY(24px);
      transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22,1,0.36,1), background 250ms ease;
    }
    .arch-row.animate { opacity: 1; transform: translateY(0); }
    .arch-row:nth-child(2) { transition-delay: 100ms; }
    .arch-row:nth-child(3) { transition-delay: 200ms; }
    .arch-row:hover { background: rgba(36,189,159,0.045); }
    .arch-row-num {
      font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.3);
      font-variant-numeric: tabular-nums; width: 32px; flex-shrink: 0;
    }
    .arch-row-icon {
      width: 68px; height: 68px; border: 1px solid rgba(36,189,159,0.4);
      display: flex; align-items: center; justify-content: center;
      font-size: 28px; color: #24bd9f; flex-shrink: 0;
      transition: border-color 250ms ease, background 250ms ease;
    }
    .arch-row:hover .arch-row-icon { background: rgba(36,189,159,0.12); border-color: #24bd9f; }
    .arch-row-main { flex: 1; min-width: 0; }
    .arch-row-title { font-size: var(--fs-h3); font-weight: 700; color: #fff; margin-bottom: .5rem; }
    .arch-row-desc { font-size: var(--fs-body); color: #e9e9e9; line-height: 1.6; max-width: 620px; }
    .arch-row-link {
      font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
      color: #5bbaa0; display: inline-flex; align-items: center; gap: 6px;
      flex-shrink: 0; white-space: nowrap;
    }
    .arch-row-link i { font-size: 14px; transition: transform 250ms ease; }
    .arch-row:hover .arch-row-link i { transform: translateX(4px); }
    @media (max-width: 900px) {
      .arch-row-desc { max-width: none; }
      .arch-row-link span { display: none; }
    }
    @media (max-width: 700px) {
      .arch-row { flex-wrap: wrap; padding: 2rem 1rem; gap: 1rem 1.25rem; }
      .arch-row-num { display: none; }
      .arch-row-icon { width: 52px; height: 52px; font-size: 22px; }
      .arch-row-main { flex-basis: calc(100% - 52px - 1.25rem); }
      .arch-row-link { flex-basis: 100%; padding-left: calc(52px + 1.25rem); }
      .arch-row-link span { display: inline; }
    }

    /* Tag chips — compact pill badges for protocol/interface/device
       compatibility lists (Connector Drivers page), far more scannable
       than long comma-separated prose for this kind of reference content. */
    .tag-group { margin-bottom: 2rem; }
    .tag-group:last-child { margin-bottom: 0; }
    .tag-group-label {
      font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      color: #5bbaa0; margin-bottom: .9rem; display: block;
    }
    .tag-chips { display: flex; flex-wrap: wrap; gap: 10px; }
    .tag-chip {
      font-size: var(--fs-subbody); font-weight: 500; color: #e9e9e9;
      border: 1px solid rgba(255,255,255,0.18); padding: 7px 16px;
      transition: border-color 200ms ease, color 200ms ease;
      text-decoration: none;
    }
    .tag-chip:hover { border-color: #24bd9f; color: #fff; text-decoration: none; }

    /* ═══════════════════════════════════════
       HOMEPAGE — rotating hero phrase & newsletter form
    ═══════════════════════════════════════ */
    .hero-rotate {
      position: relative;
      display: block;
      overflow: hidden;
      height: 1.08em;
      line-height: 1.08;
    }

    .hero-rotate-word {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      white-space: nowrap;
      transform: translateY(-1.3em);
      transition: transform 650ms cubic-bezier(0.65, 0, 0.35, 1);
    }

    .hero-rotate-word.is-active {
      transform: translateY(0);
    }

    .hero-rotate-word.is-exiting {
      transform: translateY(1.3em);
    }

    @media (max-width: 600px) {

      .hero-rotate {
        height: 2.16em;
      }

      .hero-rotate-word {
        white-space: normal;
        transform: translateY(-2.5em);
      }

      .hero-rotate-word.is-active {
        transform: translateY(0);
      }

      .hero-rotate-word.is-exiting {
        transform: translateY(2.5em);
      }

    }

    @media (max-width: 340px) {

      .hero-rotate {
        height: 3.24em;
      }

      .hero-rotate-word {
        transform: translateY(-3.6em);
      }

      .hero-rotate-word.is-active {
        transform: translateY(0);
      }

      .hero-rotate-word.is-exiting {
        transform: translateY(3.6em);
      }

    }

    .newsletter-form {
      display: flex; gap: 12px; width: 100%; max-width: 480px; margin: 2rem auto 0;
    }
    .newsletter-input {
      flex: 1; background: #000; border: 1px solid #24bd9f;
      color: #fff; font-family: "Inter", sans-serif; font-size: 15px;
      padding: 14px 18px; outline: none; transition: border-color 200ms ease;
    }
    .newsletter-input::placeholder { color: #fff; }
    .newsletter-input:focus { border-color: #24bd9f; }
    .newsletter-submit {
      background: #24bd9f; color: #000; border: 2px solid #24bd9f;
      font-family: "Inter", sans-serif; font-size: 14px; font-weight: 700;
      letter-spacing: .04em; text-transform: uppercase; padding: 0 26px;
      cursor: pointer; flex-shrink: 0; transition: background 200ms ease, color 200ms ease;
    }
    .newsletter-submit:hover { background: #000; color: #24bd9f; }
    @media (max-width: 600px) {
      .newsletter-form { flex-direction: column; }
      .newsletter-submit { padding: 14px 26px; }
    }

    /* ═══════════════════════════════════════
       CAREERS — job listing cards
    ═══════════════════════════════════════ */
    .job-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 3.5rem; }
    .job-card {
      background: #000; border: 1px solid rgba(255,255,255,0.25);
      padding: 2.25rem 2rem; display: flex; flex-direction: column;
      opacity: 0; transform: translateY(28px);
      transition: opacity 650ms ease, transform 650ms cubic-bezier(0.22,1,0.36,1), border-color 250ms ease;
    }
    .job-card.animate { opacity: 1; transform: translateY(0); }
    .job-card:nth-child(2) { transition-delay: 80ms; }
    .job-card:nth-child(3) { transition-delay: 160ms; }
    .job-card:nth-child(5) { transition-delay: 80ms; }
    .job-card:nth-child(6) { transition-delay: 160ms; }
    .job-card:hover { border-color: #24bd9f; }
    .job-card-title {
      font-size: var(--fs-h4); font-weight: 700; color: #fff; line-height: 1.25;
      text-transform: uppercase; margin-bottom: 1.5rem;
    }
    .job-card-meta {
      font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
      color: #e9e9e9; margin-bottom: auto; padding-bottom: 1.75rem;
    }
    .job-card-btn { align-self: flex-start; }
    @media (max-width: 900px) {
      .job-grid { grid-template-columns: repeat(2,1fr); }
    }
    @media (max-width: 600px) {
      .job-grid { grid-template-columns: 1fr; }
    }

    /* Diagram image (How It Works) — aligns within the same margins as
       the rest of the page (matching the nav logo-to-CTA width). */
    .hiw-diagram-full {
      margin-top: 3rem;
      opacity: 0; transform: translateY(24px);
      transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22,1,0.36,1);
    }
    .hiw-diagram-full.animate { opacity: 1; transform: translateY(0); }
    .hiw-diagram-wrap { position: relative; }
    .hiw-diagram-wrap img { display: block; width: 100%; height: auto; }

    /* ═══════════════════════════════════════
      CAREERS — single job page
    ═══════════════════════════════════════ */

    .job-meta {
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: #e9e9e9;
    }

    .job-content-col {
      width: 100%;
      max-width: 820px;
      color: #e9e9e9;
    }

    .job-content-col p {
      font-size: var(--fs-body);
      line-height: 1.7;
      color: #e9e9e9;
      margin-bottom: 1.5rem;
    }

    .job-content-col h2,
    .job-section-title {
      font-size: clamp(24px, 3.05vw, var(--fs-h2));
      font-weight: 700;
      color: #fff;
      line-height: 1.15;
      margin: 3.5rem 0 1.25rem;
    }

    .job-content-col h2:first-child {
      margin-top: 0;
    }

    .job-content-col h3 {
      font-size: var(--fs-h4);
      font-weight: 700;
      color: #fff;
      line-height: 1.25;
      margin: 2.5rem 0 1rem;
    }

    .job-content-col ul,
    .job-list {
      padding-left: 1.25rem;
      margin: 0 0 2rem;
      color: #e9e9e9;
    }

    .job-content-col ul li,
    .job-list li {
      font-size: var(--fs-body);
      line-height: 1.7;
      margin-bottom: .75rem;
      padding-left: .25rem;
    }

    .job-content-col ul li::marker,
    .job-list li::marker {
      color: #24bd9f;
    }

    .job-content-col a {
      color: #5bbaa0;
      text-decoration: underline;
      transition: color 200ms ease;
    }

    .job-content-col a:hover {
      color: #82abd6;
    }

    /* Application form additions */

    .job-apply-form {
      width: 50%;
    }

    .form-radio-group {
      display: flex;
      align-items: center;
      gap: 2rem;
      margin-top: .4rem;
    }

    .form-radio-option {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .form-radio-option input[type="radio"] {
      width: 17px;
      height: 17px;
      accent-color: #24bd9f;
      cursor: pointer;
    }

    .form-radio-option label {
      margin: 0;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
      color: #e9e9e9;
      cursor: pointer;
    }

    .form-file-field {
      width: 100%;
      background: #000;
      border: 1px solid #24bd9f;
      color: #e9e9e9;
      font-family: "Inter", sans-serif;
      font-size: 14px;
      padding: 12px;
      cursor: pointer;
    }

    .form-file-field::file-selector-button {
      background: #24bd9f;
      color: #000;
      border: 0;
      font-family: "Inter", sans-serif;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 10px 16px;
      margin-right: 14px;
      cursor: pointer;
    }

    .form-file-field::file-selector-button:hover {
      background: #fff;
    }

    .form-file-hint {
      font-size: var(--fs-subbody);
      color: #e9e9e9;
      line-height: 1.5;
      margin-top: .25rem;
    }


    /* ═══════════════════════════════════════
      HubSpot careers form
    ═══════════════════════════════════════ */

    /* Remove HubSpot label margins */
    #hubspot-form-container .hsfc-FieldLabel {
      margin: 0;
      padding: 0;
    }


    /* Keep spacing consistent between labels and controls */
    #hubspot-form-container .hsfc-TextField,
    #hubspot-form-container .hsfc-EmailField,
    #hubspot-form-container .hsfc-PhoneField,
    #hubspot-form-container .hsfc-DropdownField,
    #hubspot-form-container .hsfc-RadioFieldGroup,
    #hubspot-form-container .hsfc-FileField,
    #hubspot-form-container .hsfc-TextareaField {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }


    /* ═══════════════════════════════════════
      HubSpot phone field
    ═══════════════════════════════════════ */

    #hubspot-form-container .hsfc-PhoneInput {
      display: flex;
      width: 100%;
    }

    #hubspot-form-container .hsfc-PhoneInput__FlagAndCaret {
      background: #000;
      border: 1px solid #24bd9f;
      border-right: 0;
      border-radius: 0;
      padding: 14px 12px;
      box-sizing: border-box;
      min-width: 52px;
    }

    #hubspot-form-container .hsfc-PhoneInput__FlagAndCaret:hover,
    #hubspot-form-container .hsfc-PhoneInput__FlagAndCaret:focus {
      filter: none;
      box-shadow: none;
    }

    #hubspot-form-container .hsfc-PhoneInput__FlagAndCaret__Caret {
      border-top-color: #5bbaa0;
    }

    #hubspot-form-container .hsfc-PhoneInput > .hsfc-TextInput {
      border-left: 1px solid #24bd9f;
      border-radius: 0;
      min-height: 50px;
    }


    /* ═══════════════════════════════════════
      HubSpot radio buttons
    ═══════════════════════════════════════ */

    #hubspot-form-container .hsfc-RadioFieldGroup__Options {
      display: flex;
      align-items: center;
      gap: 2rem;
      margin-top: .4rem;
    }

    #hubspot-form-container .hsfc-RadioFieldGroup__Options > div {
      margin: 0;
    }

    #hubspot-form-container .hsfc-RadioFieldGroup__Options label {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      cursor: pointer;
    }

    #hubspot-form-container .hsfc-RadioInput {
      width: 17px;
      height: 17px;
      padding: 0;
      margin: 0;
      flex: 0 0 17px;
      background: #000;
      border: 1px solid #24bd9f;
      border-radius: 50%;
      box-shadow: none;
      cursor: pointer;
    }

    #hubspot-form-container .hsfc-RadioInput:hover,
    #hubspot-form-container .hsfc-RadioInput:focus,
    #hubspot-form-container .hsfc-RadioInput:active {
      box-shadow: none;
    }

    #hubspot-form-container .hsfc-RadioInput:checked {
      background: #24bd9f;
    }

    #hubspot-form-container .hsfc-RadioInput:checked::after {
      background-color: #000;
    }

    #hubspot-form-container .hsfc-RadioFieldGroup__Options label > span > span {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
      color: #e9e9e9;
    }


    /* ═══════════════════════════════════════
      HubSpot resume upload
    ═══════════════════════════════════════ */

    #hubspot-form-container .hsfc-FileInput {
      width: 100%;
      background: #000;
      border: 1px dashed #24bd9f;
      color: #e9e9e9;
      font-family: "Inter", sans-serif;
      font-size: 14px;
      padding: 12px;
      cursor: pointer;
      box-sizing: border-box;
      border-radius: 0;
    }

    #hubspot-form-container .hsfc-FileInput::file-selector-button {
      background: #24bd9f;
      color: #000;
      border: 0;
      border-radius: 0;
      font-family: "Inter", sans-serif;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 10px 16px;
      margin-right: 14px;
      cursor: pointer;
    }

    #hubspot-form-container .hsfc-FileInput::file-selector-button:hover {
      background: #fff;
    }


    /* Firefox */
    #hubspot-form-container .hsfc-FileInput::-moz-file-upload-button {
      background: #24bd9f;
      color: #000;
      border: 0;
      border-radius: 0;
      font-family: "Inter", sans-serif;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 10px 16px;
      margin-right: 14px;
      cursor: pointer;
    }


    /* Resume support text */
    #hubspot-form-container .hsfc-FileField .hsfc-FieldDescription {
      font-family: "Inter", sans-serif;
      font-size: var(--fs-subbody);
      color: #e9e9e9;
      line-height: 1.5;
      margin: 0;
    }


    /* Validation */
    #hubspot-form-container .hsfc-ErrorAlert {
      font-family: "Inter", sans-serif;
      font-size: 13px;
      line-height: 1.4;
      color: #e65b5b;
      margin: 6px 0 0;
    }


    /* Responsive */
    @media (max-width: 900px) {

      .job-apply-form {
        width: 100%;
      }

    }

    @media (max-width: 600px) {

      #hubspot-form-container .hsfc-RadioFieldGroup__Options {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
      }

    }

    @media (max-width: 900px) {

      .job-content-col,
      .job-apply-form {
        max-width: 100%;
      }

    }

    @media (max-width: 600px) {

      .job-content-col h2,
      .job-section-title {
        margin-top: 2.75rem;
      }

      .form-radio-group {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
      }

    }
    
    /* WordPress editor content on Career pages */
    .job-content-col h2 {
      font-size: var(--fs-h4);
      font-weight: 700;
      color: #fff;
      margin: 2.5rem 0 1rem;
    }

    .job-content-col h2:first-child {
      margin-top: 0;
    }

    .job-content-col ul {
      margin: 0 0 1.5rem;
      padding: 0;
      list-style: none;
    }

    .job-content-col ul li {
      position: relative;
      padding-left: 26px;
      margin-bottom: .85rem;
      font-size: var(--fs-body);
      color: #e9e9e9;
      line-height: 1.65;
    }

    .job-content-col ul li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .55em;
      width: 8px;
      height: 8px;
      background: #24bd9f;
      border-radius: 50%;
    }

    /* ═══════════════════════════════════════
      PRIVACY POLICY
    ═══════════════════════════════════════ */

    /* Header */

    .privacy-header-inner {
      padding-top: 5.04rem;
      padding-bottom: 2.5rem;
    }

    .privacy-header .heading-block {
      margin-bottom: 0;
    }

    .privacy-header .heading-block h1 {
      font-size: var(--fs-h2);
      overflow-wrap: break-word;
    }

    .privacy-section-inner .heading-block h2 {
      font-size: var(--fs-h4);
    }

    .privacy-header .privacy-intro {
      color: #fff;
    }


    /* Sections */

    .privacy-section-inner {
      padding-top: 2.5rem;
      padding-bottom: 2.5rem;
    }

    .privacy-section-title {
      font-size: var(--fs-h4);
    }


    /* Personal Data columns */

    .privacy-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 4rem;
      margin-top: .5rem;
    }

    .privacy-col {
      display: flex;
      flex-direction: column;
    }

    .privacy-block {
      margin-bottom: 2rem;
    }

    .privacy-block:last-child {
      margin-bottom: 0;
    }

    .privacy-heading {
      font-size: var(--fs-body);
      font-weight: 700;
      color: #fff;
      line-height: 1.4;
      margin-bottom: .75rem;
    }

    .privacy-item {
      font-size: var(--fs-small);
      color: #e9e9e9;
      line-height: 1.6;
    }

    .privacy-item p {
      font-size: inherit;
      color: inherit;
      line-height: inherit;
      margin-bottom: .9rem;
    }

    .privacy-item p:last-child {
      margin-bottom: 0;
    }

    .privacy-item strong {
      color: #fff;
      font-weight: 600;
    }


    /* General Privacy Policy content */

    .privacy-content .privacy-rich-text,
    .privacy-content .privacy-rich-text p {
      font-size: var(--fs-body);
      color: #e9e9e9;
      line-height: 1.7;
    }

    .privacy-rich-text p {
      margin-bottom: 1rem;
    }

    .privacy-rich-text p:last-child {
      margin-bottom: 0;
    }

    .privacy-small-text,
    .privacy-small-text p {
      font-size: var(--fs-small);
    }

    .privacy-contact-address {
      margin-bottom: 1.5rem;
    }


    /* Links */

    .privacy-item a,
    .privacy-content a {
      color: #5bbaa0;
      text-decoration: underline;
      transition: color 200ms ease;
    }

    .privacy-item a:hover,
    .privacy-content a:hover {
      color: #82abd6;
    }


    /* Final policy CTA */

    .privacy-final-inner {
      padding-top: 2.5rem;
    }

    .privacy-final-cta {
      margin-top: 1.5rem;
    }


    /* Responsive */

    @media (max-width: 900px) {

      .privacy-grid {
        grid-template-columns: 1fr;
        gap: 0;
      }

    }

    /* ═══════════════════════════════════════
      CONTACT US — form fields & connect section
    ═══════════════════════════════════════ */
    .contact-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr;
      gap: 5rem;
      align-items: start;
    }

    .contact-connect-col {
      padding-top: 0;
    }

    .contact-form,
    #hubspot-form-container {
      max-width: none;
      margin-top: 2.5rem;
    }

    /* Form rows */
    .form-row,
    #hubspot-form-container .hsfc-Row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      gap: 20px;
    }

    /* Fields */
    .form-field,
    #hubspot-form-container .hsfc-TextField,
    #hubspot-form-container .hsfc-EmailField,
    #hubspot-form-container .hsfc-PhoneField,
    #hubspot-form-container .hsfc-DropdownField,
    #hubspot-form-container .hsfc-RadioFieldGroup,
    #hubspot-form-container .hsfc-FileField,
    #hubspot-form-container .hsfc-TextareaField {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .form-field {
      margin-bottom: 22px;
    }

    /* Labels */
    .form-field label,
    #hubspot-form-container .hsfc-FieldLabel {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #e9e9e9;
      font-family: "Inter", sans-serif;
    }

    .form-field label .req,
    #hubspot-form-container .hsfc-FieldLabel__RequiredIndicator {
      color: #5bbaa0;
    }

    /* Inputs */
    .form-input,
    .form-select,
    .form-textarea,
    #hubspot-form-container .hsfc-TextInput,
    #hubspot-form-container .hsfc-TextareaInput {
      background: #000;
      border: 1px solid #24bd9f;
      color: #fff;
      font-family: "Inter", sans-serif;
      font-size: 15px;
      padding: 14px 16px;
      outline: none;
      transition: border-color 200ms ease;
      width: 100%;
      border-radius: 0;
      box-shadow: none;
    }

    /* Placeholders */
    .form-input::placeholder,
    .form-textarea::placeholder,
    #hubspot-form-container .hsfc-TextInput::placeholder,
    #hubspot-form-container .hsfc-TextareaInput::placeholder {
      color: rgba(255,255,255,0.4);
    }

    /* Focus */
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus,
    #hubspot-form-container .hsfc-TextInput:focus,
    #hubspot-form-container .hsfc-TextareaInput:focus {
      border-color: #24bd9f;
      box-shadow: none;
      outline: none;
    }

    /* Textarea */
    .form-textarea,
    #hubspot-form-container .hsfc-TextareaInput {
      resize: vertical;
      min-height: 150px;
      font-family: inherit;
    }

    /* Dropdown */
    .form-select {
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235bbaa0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 18px;
      padding-right: 44px;
    }
    .form-select option {
      background: #000;
      color: #fff;
    }

    /* HubSpot dropdown */
    #hubspot-form-container .hsfc-DropdownInput__Caret > span {
      border-top-color: #5bbaa0;
    }

    #hubspot-form-container .hsfc-DropdownOptions {
      background: #000;
      border: 1px solid #24bd9f;
      border-radius: 0;
    }

    #hubspot-form-container .hsfc-DropdownOptions__Search {
      background: #000;
    }

    #hubspot-form-container .hsfc-DropdownOptions__List__ListItem {
      background: #000;
      color: #fff;
      font-family: "Inter", sans-serif;
    }

    #hubspot-form-container .hsfc-DropdownOptions__List__ListItem:hover,
    #hubspot-form-container .hsfc-DropdownOptions__List__ListItem:focus {
      background: #24bd9f;
      color: #000;
      filter: none;
    }

    /* Checkbox */
    .form-checkbox-row,
    #hubspot-form-container .hsfc-CheckboxField label {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 2.25rem;
    }

    .form-checkbox-row input[type="checkbox"],
    #hubspot-form-container .hsfc-CheckboxInput {
      margin-top: 3px;
      width: 17px;
      height: 17px;
      flex-shrink: 0;
      cursor: pointer;
    }

    .form-checkbox-row label,
    #hubspot-form-container .hsfc-CheckboxField label span {
      font-size: 14px;
      color: #e9e9e9;
      line-height: 1.5;
      font-family: "Inter", sans-serif;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
    }

    .form-checkbox-row label a,
    #hubspot-form-container .hsfc-CheckboxField a,
    #hubspot-form-container .hsfc-RichText a {
      color: #5bbaa0;
      text-decoration: underline;
    }

    .form-checkbox-row label a:hover,
    #hubspot-form-container .hsfc-CheckboxField a:hover,
    #hubspot-form-container .hsfc-RichText a:hover {
      color: #82abd6;
    }

    /* HubSpot container reset */
    #hubspot-form-container .hsfc-Step {
      background: transparent;
      border: 0;
    }

    #hubspot-form-container .hsfc-Step__Content {
      padding: 0;
    }

    /* Intro / supporting text */
    #hubspot-form-container .hsfc-RichText {
      font-family: "Inter", sans-serif;
      font-size: var(--fs-body);
      color: #e9e9e9;
      line-height: 1.7;
    }

    /* Submit button */
  .btn-primary,
  #hubspot-form-container .hsfc-Button {
    background: #24bd9f;
    color: #000;
    border: 2px solid #24bd9f;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 14px 36px;
    cursor: pointer;
    border-radius: 0;
    transition:
      background 220ms ease,
      border-color 220ms ease,
      color 220ms ease;
  }

  .btn-primary:hover,
  #hubspot-form-container .hsfc-Button:not([disabled]):hover {
    background: #000;
    border-color: #24bd9f;
    color: #24bd9f;
    transform: none;
  }


  /* HubSpot button layout */
  #hubspot-form-container .hsfc-Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }


  /* HubSpot button arrow */
  #hubspot-form-container .hsfc-Button::after {
    content: "\ea1c";
    font-family: "tabler-icons";
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    margin-left: 10px;

    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }


  /* HubSpot button arrow hover */
  #hubspot-form-container .hsfc-Button:not([disabled]):hover::after {
    transform: translateX(6px);
  }

    /* HubSpot submit row */
    #hubspot-form-container .hsfc-NavigationRow {
      margin-top: 0;
    }
    #hubspot-form-container .hsfc-NavigationRow__Buttons {
      justify-content: flex-start;
    }

    /* Validation */
    #hubspot-form-container .hsfc-ErrorAlert,
    #hubspot-form-container .hsfc-FieldDescription,
    #hubspot-form-container .hsfc-FieldFooter {
      font-family: "Inter", sans-serif;
    }


    /* Responsive */
    @media (max-width: 900px) {
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
      }
    }

    @media (max-width: 640px) {
      .form-row,
      #hubspot-form-container .hsfc-Row {
        grid-template-columns: 1fr;
      }

      #hubspot-form-container .hsfc-Button {
        width: 100%;
      }

    }

    .contact-connect-links {
      display: flex;
      gap: 22px;
      margin: 1.5rem 0 2rem;
    }

    .contact-connect-links a {
      color: #fff;
      font-size: 42px;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 200ms ease, transform 200ms ease;
    }

    .contact-connect-links a:hover {
      color: #24bd9f;
      transform: translateY(-2px);
    }
    .contact-info p { font-size: var(--fs-body); color: #e9e9e9; line-height: 1.8; }
    .contact-info a { color: #5bbaa0; text-decoration: underline; }
    .contact-info a:hover { color: #82abd6; }

    /* ═══════════════════════════════════════
       SECTION 2 — How Does Flexxbotics Work (image)
    ═══════════════════════════════════════ */
    .diagram-wrap {
      opacity: 0; transform: translateY(24px);
      transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22,1,0.36,1);
    }
    .diagram-wrap.animate { opacity: 1; transform: translateY(0); }
    .diagram-wrap img { width: 100%; height: auto; display: block; }

    /* ═══════════════════════════════════════
       SECTION 3 — What Problems (red X list)
    ═══════════════════════════════════════ */
    .problems-block {
      opacity: 0; transform: translateY(20px);
      transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22,1,0.36,1);
    }
    /* When a stat grid (e.g. Outcomes & Benefits) sits between the heading and
       the checklist, give the checklist the same top margin the grid itself
       uses below the heading, so the gap above and below the grid matches. */
    #outcomes-grid + #outcomes-second-heading { margin-top: 4rem; }
    #outcomes-second-heading + .problems-block { margin-top: -0.75rem; }
    .problems-block.animate { opacity: 1; transform: translateY(0); }
    .problems-subtitle { font-size: var(--fs-h5); font-weight: 700; color: #fff; margin-bottom: 1.5rem; }
    .problem-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
    .problem-list li { display: flex; align-items: flex-start; gap: 14px; font-size: var(--fs-body); color: #e9e9e9; line-height: 1.5; }
    .x-icon { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; color: #c0392b; font-size: 20px; }

    /* ═══════════════════════════════════════
    SECTION 5 — Logo marquee
  ═══════════════════════════════════════ */

  .logo-marquee-outer {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-top: 3rem;
    margin-bottom: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 800ms ease;
  }

  .logo-marquee-outer.animate {
    opacity: 1;
  }

  .logo-marquee-wrap {
    width: 100%;
    overflow: hidden;
  }

  .logo-track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: logo-marquee 28s linear infinite;
  }

.logo-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4rem;

  /*
   * Keeps the same gap between the final logo in one group
   * and the first logo in the duplicated group.
   */
  padding-right: 4rem;
  }

  .logo-item {
    flex-shrink: 0;
    white-space: nowrap;
    cursor: default;

    font-family: "Inter", sans-serif;
    font-size: clamp(13px, 1.5vw, 18px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: #e9e9e9;
    transition: color 250ms ease;
  }

  .logo-item:hover {
    color: #fff;
  }

  .logo-item.serif {
    font-style: italic;
    letter-spacing: 0.04em;
  }

  @keyframes logo-marquee {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      /*
      * JavaScript creates two identical groups, so moving by
      * half the track width produces a seamless loop.
      */
      transform: translate3d(-50%, 0, 0);
    }
  }

  .logo-marquee-outer:hover .logo-track {
    animation-play-state: paused;
  }

  /* Prevent animation for users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .logo-track {
      animation: none;
      transform: none;
    }
  }

    /* ═══════════════════════════════════════
       SECTION CTAs (buttons beneath each section)
    ═══════════════════════════════════════ */
    .section-cta-row {
      display: flex; gap: 16px; margin-top: 3rem;
      opacity: 0; transform: translateY(18px);
      transition: opacity 600ms ease 200ms, transform 600ms cubic-bezier(0.22,1,0.36,1) 200ms;
    }
    .section-cta-row.animate { opacity: 1; transform: translateY(0); }

    /* ═══════════════════════════════════════
       BUTTON GALLERY
    ═══════════════════════════════════════ */
    .btn-section {
      width: 100%; padding: 5.76rem 3rem 8.64rem;
      opacity: 0; transform: translateY(24px);
      transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22,1,0.36,1);
    }
    .btn-section-inner { max-width: 1440px; margin: 0 auto; }
    .btn-section.animate { opacity: 1; transform: translateY(0); }
    .btn-section-label {
      font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
      color: rgba(255,255,255,0.25); margin-bottom: 2.5rem; text-align: left;
    }
    .btn-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3rem 2rem; }
    .btn-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
    .btn-cell-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.22); }
    .btn {
      font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
      padding: 14px 36px; cursor: pointer; border-radius: 0; position: relative; overflow: hidden;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      user-select: none; min-width: 180px; font-family: "Inter", sans-serif;
      text-decoration: none;
    }
    .btn i { font-size: 14px; transition: transform 220ms ease; }
    .btn-1 { background:#24bd9f; color:#000; border:2px solid #24bd9f; transition:background 200ms ease,border-color 200ms ease,color 200ms ease; }
    .btn-1:hover { background:#000; border-color:#fff; color:#fff; }
    .btn-1 .ripple { background:rgba(255,255,255,0.2); }
    .btn-2 { background:#000; color:#fff; border:1px solid #fff; transition:background 220ms ease,color 220ms ease,border-color 220ms ease; }
    .btn-2:hover { background:#24bd9f; color:#000; border-color:#24bd9f; }
    .btn-2 .ripple { background:rgba(0,0,0,0.15); }
    .btn-3 { background:#82abd6; color:#fff; border:2px solid #82abd6; transition:background 200ms ease,border-color 200ms ease,color 200ms ease; }
    .btn-3:hover { background:#000; border-color:#fff; color:#fff; }
    .btn-3 .ripple { background:rgba(255,255,255,0.2); }
    .btn-4 { background:#000; color:#fff; border:1px solid #fff; transition:background 220ms ease,color 220ms ease,border-color 220ms ease; }
    .btn-4:hover { background:#82abd6; color:#fff; border-color:#82abd6; }
    .btn-4:hover i { transform:translateX(4px); }
    .btn-4 .ripple { background:rgba(255,255,255,0.2); }
    .btn-5 { background:#000; color:#24bd9f; border:1px solid #24bd9f; transition:background 220ms ease,color 220ms ease; }
    .btn-5:hover { background:#fff; color:#24bd9f; }
    .btn-5 .ripple { background:rgba(36,189,159,0.15); }
    .btn-6 { background:#000; color:#fff; border:1px solid #fff; transition:color 300ms ease,border-color 300ms ease; overflow:hidden; }
    .btn-6::before { content:""; position:absolute; bottom:0; left:0; right:0; height:0; background:#82abd6; transition:height 350ms cubic-bezier(0.22,1,0.36,1); z-index:0; }
    .btn-6:hover::before { height:100%; }
    .btn-6:hover { border-color:#82abd6; }
    .btn-6 span, .btn-6 i { position:relative; z-index:1; }
    .btn-6 .ripple { background:rgba(255,255,255,0.15); }

    /* ── NEWS TICKER — below hero, same max-width as sections ── */
    .ticker-wrap { width: 100%; padding: 2.5rem 3rem; }
    .ticker-inner {
      max-width: 1440px; margin: 0 auto;
    }
    .ticker-box {
      border: 1px solid #fff;
      padding: 1.5rem 2.5rem;
      display: flex; align-items: center; justify-content: space-between; gap: 3rem;
      opacity: 0; transform: translateY(12px);
      transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22,1,0.36,1);
    }
    .ticker-box.animate { opacity: 1; transform: translateY(0); }
    .ticker-text {
      font-size: var(--fs-h5); font-weight: 700;
      color: #fff; line-height: 1.5; flex: 1;
    }
    .ticker-cta { flex-shrink: 0; }


    /* ── 4-COLUMN CARD GRID (Section 1) ── */
    .card-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
    .card-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
    @media (max-width: 700px) {
      .card-grid-2 { grid-template-columns: 1fr; }
    }
    .card-grid-4 .card:nth-child(4) { transition-delay: 300ms; }

    /* ── PRIMARY BUTTON — green fill, green outline + sliding arrow on hover ── */
    .btn-primary {
      background: #24bd9f; color: #000; border: 2px solid #24bd9f;
      transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
    }
    .btn-primary:hover { background: #000; border-color: #24bd9f; color: #24bd9f; }
    .btn-primary i { transition: transform 300ms cubic-bezier(0.34,1.56,0.64,1); }
    .btn-primary:hover i { transform: translateX(6px); }
    .btn-primary .ripple { background: rgba(36,189,159,0.2); }

    /* ── SECONDARY BUTTON — white outline, white fill + sliding arrow on hover ── */
    .btn-secondary {
      background: transparent; color: #fff; border: 2px solid #fff;
      transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
    }
    .btn-secondary:hover { background: #fff; color: #000; border-color: #fff; }
    .btn-secondary i { transition: transform 300ms cubic-bezier(0.34,1.56,0.64,1); }
    .btn-secondary:hover i { transform: translateX(6px); }
    .btn-secondary .ripple { background: rgba(255,255,255,0.15); }

    /* Button number labels in gallery */
    .btn-num { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: rgba(255,255,255,0.2); }
    .btn-subsection-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.18); margin-top: 3rem; margin-bottom: 2rem; display: block; }
    .btn-grid-2 { grid-template-columns: repeat(2, 1fr); }

    @media (max-width: 900px) {
      .ticker-wrap { padding-left: 1.5rem; padding-right: 1.5rem; }
      .ticker-box { flex-direction: column; gap: 1.5rem; align-items: flex-start; }
      .section-inner { padding: 6rem 0; }
      .card-grid-4 { grid-template-columns: repeat(2,1fr); }
      .btn-grid-2 { grid-template-columns: 1fr; }
    }


    /* ═══════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════ */
    .footer-outer {
      width: 100%;
      background: #000;
      border-top: 1px solid rgba(255,255,255,0.07);
      margin-top: 0;
      padding: 0 3.6rem;
    }
    .footer-inner {
      max-width: 1440px; margin: 0 auto;
      padding: 5rem 0 4rem;
    }
    .footer-grid {
      display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem;
    }
    .footer-col { display: flex; flex-direction: column; }
    .footer-section { margin-bottom: 2.25rem; }
    .footer-heading {
      font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
      color: #fff; margin: 0 0 .85rem; font-family: "Inter", sans-serif;
      padding-bottom: .65rem;
      border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    .footer-links { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-direction: column; gap: 9px; }
    .footer-links li a {
      font-size: 13px; font-weight: 400; color: #e9e9e9;
      text-decoration: none; font-family: "Inter", sans-serif;
      transition: color 180ms ease;
    }
    .footer-links li a:hover { color: #5bbaa0; }
    .footer-bar {
      border-top: 1px solid rgba(255,255,255,0.07);
      padding: 1.5rem 0;
      text-align: center;
    }
    .footer-bar p {
      font-size: 12px; font-weight: 400; color: #e9e9e9;
      font-family: "Inter", sans-serif; margin: 0;
    }
    .footer-bar a { color: inherit; text-decoration: none; }
    .footer-bar a:hover { color: #5bbaa0; }
    /* Simplified footer link row (v2) */
    .footer-simple-links ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .footer-simple-links li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .footer-simple-links {
      display: flex; justify-content: center; align-items: center;
      gap: 2.5rem; flex-wrap: wrap; padding: 3.5rem 0 3rem;
    }
    .footer-simple-links a {
      font-size: 14px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase;
      color: #e9e9e9; text-decoration: none; font-family: "Inter", sans-serif;
      transition: color 180ms ease;
    }
    .footer-simple-links a:hover { color: #5bbaa0; }
    @media (max-width: 600px) {
      .footer-simple-links { gap: 1.5rem; padding: 2.5rem 0 2rem; }
    }
    @media (max-width: 900px) {
      .footer-outer { padding: 0 1.8rem; }
      .footer-grid { grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
      .footer-inner { padding: 3.5rem 0 2.5rem; }
    }


    /* ═══════════════════════════════════════
       SECTION 6 — Why is Flexxbotics Different?
    ═══════════════════════════════════════ */
    .s6-grid {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 5rem;
      align-items: center;
      margin-top: 4rem;
    }
    .s6-rows { display: flex; flex-direction: column; }
    .s6-row {
      display: grid;
      grid-template-columns: 88px 200px 1fr;
      align-items: center;
      gap: 2rem;
      padding: 2rem 2rem;
      border: 1px solid #24bd9f;
      margin-top: -1px;
      position: relative;
    }
    .s6-icon-wrap { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .s6-icon-wrap img { width: 100%; height: 100%; object-fit: contain; }
    .s6-label {
      font-size: clamp(16px, 1.8vw, 24px);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: #24bd9f;
      font-family: "Inter", sans-serif;
      line-height: 1;
    }
    .s6-bullets {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column; gap: 9px;
    }
    .s6-bullets li {
      font-size: var(--fs-body);
      color: #e9e9e9;
      font-family: "Inter", sans-serif;
      line-height: 1.5;
    }
    /* Design element */
    .s6-design {
      position: relative;
      display: flex; align-items: center; justify-content: center;
      height: 420px;
    }
    .s6-design svg { width: 100%; height: 100%; overflow: visible; }

    /* ── SVG animation keyframes ── */
    @keyframes para-pulse-a { 0%,100%{opacity:1;stroke-width:1.5} 50%{opacity:.55;stroke-width:.8} }
    @keyframes para-pulse-b { 0%,100%{opacity:.55;stroke-width:1} 50%{opacity:1;stroke-width:1.5} }
    @keyframes para-pulse-c { 0%,100%{opacity:.3} 50%{opacity:.7} }
    @keyframes node-glow    { 0%,100%{r:3;opacity:1} 50%{r:5;opacity:.4} }
    @keyframes node-glow-sm { 0%,100%{r:2;opacity:.8} 50%{r:3.5;opacity:.3} }
    @keyframes center-pulse { 0%,100%{r:4;opacity:1} 50%{r:6.5;opacity:.35} }
    @keyframes scan-drift   { 0%{opacity:0;transform:translateY(-200px)} 15%{opacity:.5} 85%{opacity:.4} 100%{opacity:0;transform:translateY(200px)} }
    @keyframes connect-fade { 0%,100%{opacity:.08} 50%{opacity:.25} }
    @keyframes halo-spin    { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

    .para-a { stroke:#24bd9f; stroke-width:1.5; fill:none; animation:para-pulse-a 3.8s ease-in-out infinite; }
    .para-b { stroke:#24bd9f; stroke-width:1;   fill:none; animation:para-pulse-b 3.8s ease-in-out infinite 0.6s; }
    .para-c { stroke:#82abd6; stroke-width:.8;  fill:none; animation:para-pulse-c 3.8s ease-in-out infinite 1.2s; }
    .corner-node { fill:#24bd9f; animation:node-glow 3s ease-in-out infinite; }
    .corner-node:nth-child(2){animation-delay:.5s}
    .corner-node:nth-child(3){animation-delay:1s}
    .corner-node:nth-child(4){animation-delay:1.5s}
    .mid-node { fill:#82abd6; animation:node-glow-sm 3s ease-in-out infinite; }
    .mid-node:nth-child(2){animation-delay:.75s}
    .center-dot { fill:#24bd9f; animation:center-pulse 2.4s ease-in-out infinite; }
    .scan-bar { stroke:rgba(36,189,159,.35); stroke-width:1; fill:none; animation:scan-drift 5s ease-in-out infinite; }
    .scan-bar-2 { stroke:rgba(36,189,159,.2); stroke-width:.6; fill:none; animation:scan-drift 5s ease-in-out infinite 2.5s; }
    .connect-line { stroke:rgba(36,189,159,.15); stroke-width:.6; fill:none; animation:connect-fade 4s ease-in-out infinite; }
    .connect-line:nth-child(2){animation-delay:.8s}
    .connect-line:nth-child(3){animation-delay:1.6s}
    .connect-line:nth-child(4){animation-delay:2.4s}

    /* ═══════════════════════════════════════
       SECTION 7 — Architecture Diagram HTML
    ═══════════════════════════════════════ */
    .s7-arch {
      margin-top: 3.5rem;
      display: flex; flex-direction: column; gap: 10px;
      padding-right: 64px;
    }
    .s7-upper {
      position: relative;
      display: flex; flex-direction: column; gap: 10px;
    }
    .s7-layer { display: flex; align-items: stretch; }
    .s7-lbl {
      width: 145px; min-width: 145px;
      font-size: 12px; line-height: 1.65;
      color: #e9e9e9;
      font-family: "Inter", sans-serif;
      display: flex; align-items: center;
      padding-right: 14px;
    }
    .s7-cells { flex: 1; display: grid; gap: 8px; }
    .s7-col3 { grid-template-columns: repeat(3,1fr); }
    .s7-col1 { grid-template-columns: 1fr; }
    .s7-col5 { grid-template-columns: repeat(5,1fr); }
    .s7-box {
      display: flex; align-items: center; justify-content: center;
      text-align: center;
      font-size: 13px; font-family: "Inter", sans-serif;
      color: #e9e9e9;
      line-height: 1.45; padding: 22px 16px; min-height: 78px;
    }
    .s7-gray { background: rgba(255,255,255,0.09); }
    .s7-teal { background: transparent; border: 1px solid #24bd9f; }
    .s7-xs   { font-size: 10.5px; }
    .s7-event-lbl {
      position: absolute; right: -64px; top: 0; bottom: 0;
      width: 60px;
      display: flex; flex-direction: column; align-items: center;
      padding: 6px 0;
    }
    .s7-evt-bar { width: 1px; background: rgba(255,255,255,0.22); flex: 1; }
    .s7-evt-text {
      writing-mode: vertical-lr; text-orientation: mixed;
      font-size: 11px; letter-spacing: .12em;
      color: #e9e9e9;
      font-family: "Inter", sans-serif; white-space: nowrap;
      padding: 14px 0;
    }
    .s7-cta-wrap { margin-top: 3rem; }
    .s7-cta-link {
      font-size: clamp(18px, 2.4vw, 26px); font-weight: 300;
      color: #e9e9e9; text-decoration: none;
      font-family: "Inter", sans-serif; letter-spacing: -.01em;
      display: inline-flex; align-items: center; gap: 6px;
      transition: color 200ms;
    }
    .s7-cta-link:hover { color: #fff; }
    @media (max-width: 900px) {
      .s7-arch { padding-right: 0; }
      .s7-event-lbl { display: none; }
      .s7-lbl { width: 90px; min-width: 90px; font-size: 10px; }
      .s7-col3 { grid-template-columns: 1fr; }
      .s7-col5 { grid-template-columns: repeat(2,1fr); }
      .s7-box  { min-height: 54px; padding: 14px 10px; font-size: 12px; }
    }

    /* Responsive */
    @media (max-width: 900px) {
      .s6-grid { grid-template-columns: 1fr; gap: 3rem; }
      .s6-design { height: 280px; }
      .s6-row { grid-template-columns: 60px 140px 1fr; gap: 1rem; padding: 1.25rem 1rem; }
    }
    @media (max-width: 600px) {
      .s6-row { grid-template-columns: 1fr; }
      .s6-icon-wrap { width:52px; height:52px; }
    }
    /* ═══════════════════════════════════════════════════════
       MOBILE NAV — hamburger + overlay menu
    ═══════════════════════════════════════════════════════ */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      cursor: pointer;
      padding: 14px 11px;
      background: transparent;
      border: none;
      margin-left: auto;
      flex-shrink: 0;
    }
    .nav-hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: #fff;
      border-radius: 1px;
      transition: transform 300ms ease, opacity 300ms ease;
    }
    .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .nav-mobile-menu {
      display: none;
      position: fixed;
      top: 64px;
      left: 0; right: 0; bottom: 0;
      background: #000;
      z-index: 199;
      overflow-y: auto;
      padding: 1.5rem 1.5rem 3rem;
      flex-direction: column;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .nav-mobile-menu.open { display: flex; }
    .nav-mobile-item {
      display: block;
      padding: .85rem 0 .85rem 34px;
      color: #fff;
      font-size: clamp(20px, 6vw, 26px);
      font-weight: 700;
      text-decoration: none;
      font-family: "Inter", sans-serif;
      letter-spacing: -.01em;
      transition: color 280ms ease;
    }

    /* ── Accordion groups (Solutions / Platform / Resources / Company) ──
       Modelled on brightmachines.com's mobile menu: a "+"/"×" toggle to the
       LEFT of the label (not a chevron on the right), and the child links
       open as a flyout column positioned beside the trigger's own row —
       not stacked underneath it — so the rest of the left-hand list never
       reflows while a group is open. While any group is open, every other
       top-level item and trigger dims to a muted grey so attention stays
       on the open group, exactly as it does on brightmachines.com. */
    .nav-mobile-group {
      position: relative;
    }
    .nav-mobile-group-trigger {
      display: flex; align-items: center; gap: 14px;
      width: 100%; padding: .85rem 0; background: none; border: none;
      color: #fff; font-size: clamp(20px, 6vw, 26px); font-weight: 700;
      font-family: "Inter", sans-serif; letter-spacing: -.01em; text-align: left;
      cursor: pointer; transition: color 280ms ease;
    }
    .nav-mobile-group-trigger .toggle-icon {
      flex-shrink: 0; width: 20px; height: 20px;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; color: rgba(255,255,255,0.4); line-height: 1;
      transition: color 280ms ease, transform 280ms cubic-bezier(0.22,1,0.36,1);
    }
    .nav-mobile-group-trigger .toggle-icon .ti-x { display: none; }
    .nav-mobile-group.open .toggle-icon .ti-plus { display: none; }
    .nav-mobile-group.open .toggle-icon .ti-x { display: inline-flex; }
    .nav-mobile-group.open .nav-mobile-group-trigger { color: #fff; }
    .nav-mobile-group.open .nav-mobile-group-trigger .toggle-icon { color: #24bd9f; }

    /* Dimming: applied to the container once any group is open, then the
       open group's own trigger and the flyout panel opt back out of it. */
    .nav-mobile-menu.has-open .nav-mobile-item,
    .nav-mobile-menu.has-open .nav-mobile-group-trigger { color: rgba(255,255,255,0.32); }
    .nav-mobile-menu.has-open .nav-mobile-group-trigger .toggle-icon { color: rgba(255,255,255,0.22); }
    .nav-mobile-menu.has-open .nav-mobile-group.open .nav-mobile-group-trigger { color: #fff; }
    .nav-mobile-menu.has-open .nav-mobile-group.open .nav-mobile-group-trigger .toggle-icon { color: #24bd9f; }

    .nav-mobile-panel {
      position: absolute; top: 0; left: 54%; right: 0; z-index: 5;
      opacity: 0; visibility: hidden; transform: translateX(8px);
      transition: opacity 280ms ease, transform 280ms cubic-bezier(0.22,1,0.36,1), visibility 0ms 280ms;
      padding-top: .85rem;
    }
    .nav-mobile-group.open .nav-mobile-panel {
      opacity: 1; visibility: visible; transform: translateX(0);
      transition: opacity 280ms ease, transform 280ms cubic-bezier(0.22,1,0.36,1), visibility 0ms 0ms;
    }
    .nav-mobile-sub-link {
      display: block; padding: 9px 0;
      color: #e9e9e9; font-size: clamp(15px, 4vw, 17px); font-weight: 400;
      text-decoration: none; font-family: "Inter", sans-serif;
    }
    .nav-mobile-sub-link:hover, .nav-mobile-sub-link:active { color: #5bb9a0; }
    .nav-mobile-sub-link.view-all {
      color: #e9e9e9; font-weight: 400;
      letter-spacing: normal; text-transform: none;
      margin-top: 0;
    }
    .nav-mobile-sub-link.view-all:hover, .nav-mobile-sub-link.view-all:active { color: #5bb9a0; }

    .nav-mobile-ctas {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 2rem;
    }

    /* ═══════════════════════════════════════════════════════
       RESPONSIVE — 1200 px breakpoint (nav only)
       The desktop nav (5 items + 2 CTA buttons) doesn't fit below
       ~1200px; switch to the mobile hamburger menu here rather than
       at 900px, so there's no gap where the nav silently overflows
       and the Contact button gets clipped off the edge of the screen.
    ═══════════════════════════════════════════════════════ */
    @media (max-width: 1200px) {
      .nav-item { display: none !important; }
      .nav-spacer { display: none; }
      .nav-cta { display: none; }
      .nav-hamburger { display: flex; }
    }

    /* ═══════════════════════════════════════════════════════
       RESPONSIVE — 1050 px breakpoint (card grids only)
       3- and 4-column card grids don't actually fit until ~1050px
       wide; below that they were overflowing the viewport. Placed
       here, before the 900px/600px blocks below, so those can still
       correctly narrow things down further to 1 column.
    ═══════════════════════════════════════════════════════ */
    @media (max-width: 1050px) {
      .card-grid-3 { grid-template-columns: repeat(2,1fr); }
      .card-grid-4 { grid-template-columns: repeat(2,1fr); }
      .s6-grid { grid-template-columns: 1fr; gap: 3rem; }
      .s6-design { height: 280px; }
    }

    /* ═══════════════════════════════════════════════════════
       RESPONSIVE — 900 px breakpoint
    ═══════════════════════════════════════════════════════ */
    @media (max-width: 900px) {
      .nav-wrap { padding: 0 1.8rem; }
      .hero-outer { padding: 4rem 1.8rem; min-height: 72vh; }
      .section { padding: 0 1.8rem; }
      .heading-block p { max-width: 100%; }
      .card-grid { grid-template-columns: repeat(2,1fr); }
      .section-cta-row { flex-wrap: wrap; gap: 12px; }
      .diagram-wrap img { width: 100%; height: auto; }
    }

    /* ═══════════════════════════════════════════════════════
       RESPONSIVE — 600 px breakpoint
    ═══════════════════════════════════════════════════════ */
    @media (max-width: 600px) {
      .nav-wrap { padding: 0 1.2rem; }
      .hero-outer { padding: 3rem 1.2rem; min-height: auto; }
      #solutions-hero { min-height: 620px; }
      .hero-sub { font-size: var(--fs-body); }
      .hero-cta { padding: 13px 26px; font-size: 16px; }
      .section { padding: 0 1.2rem; }
      .section-inner { padding: 5rem 0; }
      .card-grid { grid-template-columns: 1fr; }
      .card-grid-4 { grid-template-columns: 1fr; }
      .section-cta-row { flex-direction: column; align-items: flex-start; gap: 10px; }
      .ticker-wrap { padding-left: 1rem; padding-right: 1rem; }
      .s6-label { font-size: 14px; }
      .footer-outer { padding: 0 1.2rem; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-inner { padding: 3rem 0 2rem; }
      .footer-bar { flex-direction: column; gap: 8px; text-align: center; }
    }

    /* ═══════════════════════════════════════════════════════
       RESPONSIVE — 480 px breakpoint
    ═══════════════════════════════════════════════════════ */
    @media (max-width: 480px) {
      .hero-outer { padding: 2.5rem 1rem; }
      .hero-title { letter-spacing: -.01em; }
      .s7-lbl { display: none; }
      .s7-col5 { grid-template-columns: repeat(2,1fr); }
    }

    /* ═══════════════════════════════════════════════════════
       SOLUTIONS PAGE — additional CSS
    ═══════════════════════════════════════════════════════ */

    /* Section-level eyebrow (kicker label above an h2 in body sections) */
    .section-eyebrow {
      font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
      color: #24bd9f; margin-bottom: .9rem; display: block;
    }

    /* Allow two stacked body paragraphs inside a heading-block without margin collapse */
    .heading-block p + p { margin-top: 1rem; }

    /* Standalone punch-line beneath a heading-block (e.g. "Only FlexxCore technology...") */
    .section-tagline {
      font-size: var(--fs-card-title); font-weight: 700; color: #24bd9f;
      margin-top: 1.75rem;
      opacity: 0; transform: translateY(16px);
      transition: opacity 600ms ease 150ms, transform 600ms cubic-bezier(0.22,1,0.36,1) 150ms;
    }
    .section-tagline.animate { opacity: 1; transform: translateY(0); }

    /* Outcomes list — teal check icon (mirrors .problem-list / .x-icon, opposite polarity) */
    .check-icon { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; color: #24bd9f; font-size: 20px; }

    /* 3-column capability card grid (Platform Capabilities — 6 cards, no bullet list, single description) */
    .card-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
    .card-grid-3 .card-title { margin-bottom: .85rem; }
    .card-desc { font-size: var(--fs-body); color: #e9e9e9; line-height: 1.6; text-align: center; }

    /* ─────────────────────────────────────────────────────
       DEPLOYMENT STAT REVEAL — Bright-Machines-inspired
       scale + stagger reveal on scroll (reuses the existing
       data-animate / IntersectionObserver mechanism already
       wired site-wide; only the CSS transform differs here)
    ───────────────────────────────────────────────────── */
    .deploy-grid { display: grid;   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 3.5rem; }
    #outcomes-grid { margin-top: -0.5rem; }
    .deploy-stat {
      text-align: center; padding: 2.75rem 1.5rem;
      border: 1px solid #5bbaa0;
      opacity: 0; transform: scale(0.86);
      display: flex; flex-direction: column; align-items: center;
      transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22,1,0.36,1);
      min-width: 0;
    }
    .deploy-stat.animate { opacity: 1; transform: scale(1); }
    .deploy-grid .deploy-stat:nth-child(2) { transition-delay: 150ms; }
    .deploy-grid .deploy-stat:nth-child(3) { transition-delay: 300ms; }
    .deploy-stat-cap {
      font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
      color: #e9e9e9; margin-bottom: .75rem;
    }
    .deploy-stat-number {
      font-size: clamp(56px,7vw,84px); font-weight: 700; color: #24bd9f; line-height: 1;
      font-variant-numeric: tabular-nums; letter-spacing: -.02em;
      min-height: clamp(60px,7.2vw,88px); display: flex; align-items: center; justify-content: center;
    }
    .deploy-stat-number.is-word {
      font-size: 84px;
      letter-spacing: -.02em;
      line-height: 1;
      white-space: nowrap;
      max-width: 100%;
    }
    .deploy-stat-word {
      font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
      color: #e9e9e9; margin-top: .5rem;
    }
    .deploy-stat-source {
      font-size: var(--fs-subbody); font-weight: 500; color: #e9e9e9;
      margin-top: .6rem; letter-spacing: .02em;
    }
    .deploy-stat-logo {
      height: auto; width: auto; max-width: 150px; max-height: 50px;
      margin-top: .9rem; opacity: .85; display: block; margin-left: auto; margin-right: auto;
    }

    /* ── Solution-summary citation block ──
       A concise, quotable summary of the solution — written to be equally
       useful to a human skimming the page and to AI answer engines pulling
       a citable definition of what Flexxbotics does. Styled distinctly from
       the rest of the page (bordered, left accent) to read as a standalone
       reference rather than body copy. */
    .cite-block {
      padding: 0; max-width: 780px;
    }
    .cite-label {
      display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em;
      text-transform: uppercase; color: #24bd9f; margin-bottom: .9rem;
    }
    .cite-text { font-size: var(--fs-body); color: #e9e9e9; line-height: 1.7; }

    /* ─────────────────────────────────────────────────────
       HOW IT WORKS — pinned scrollytelling (desktop)
       Left: scrolling step copy. Right: sticky progress rail
       that tracks the step nearest viewport-centre via JS.
    ───────────────────────────────────────────────────── */
    .hiw-scroller { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 3.5rem; align-items: start; }

    .hiw-steps { display: flex; flex-direction: column; }
    .hiw-step {
      min-height: 40vh; display: flex; flex-direction: column; justify-content: center;
      padding: 2rem 0 2rem 2.25rem;
      border-left: 2px solid rgba(255,255,255,0.1);
      opacity: 0.32;
      transition: opacity 450ms ease, border-color 450ms ease;
    }
    .hiw-step.hiw-active { opacity: 1; border-color: #24bd9f; }
    /* all steps now share the same 40vh height — no special-case override needed */
    .hiw-step-num { display: none; }
    .hiw-step-title { font-size: var(--fs-card-title); font-weight: 700; color: #fff; margin-bottom: .75rem; line-height: 1.25; }
    .hiw-step-body { font-size: var(--fs-body); color: #e9e9e9; line-height: 1.6; max-width: 480px; }

    .hiw-title-sticky {
      position: sticky; top: 64px; z-index: 5;
      background: #000; padding-top: 20px; padding-bottom: 1.25rem;
    }
    .hiw-rail {
      position: sticky; top: 140px;
      display: flex; flex-direction: column; align-items: center; gap: 0;
      padding: 1rem 0;
    }
    .hiw-image-stack {
      position: relative; width: 100%; height: calc(50vh + 25px); /* base matches .hiw-step min-height, +25% applied to the whole expression */
      overflow: hidden; margin-bottom: 1rem;
      border: 1px solid rgba(255,255,255,0.12);
      background: #000;
    }
    .hiw-image-stack img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      will-change: opacity;
    }
    .hiw-image-credit { display: none; }
    /* Darkening fade removed — was only needed for caption text legibility,
       which is no longer shown over the image. */
    .hiw-image-fade { display: none; }
    .hiw-image-caption { display: none; }
    .hiw-image-num { display: none; }
    .hiw-image-title { display: none; }
    .hiw-rail-num {
      font-size: 56px; font-weight: 700; color: #24bd9f; line-height: 1; margin-bottom: .4rem;
      font-variant-numeric: tabular-nums;
    }
    .hiw-rail-label {
      font-size: 13px; font-weight: 600; color: #e9e9e9; text-align: center;
      letter-spacing: .03em; margin-bottom: 2rem; min-height: 36px;
    }
    .hiw-rail-track { display: flex; flex-direction: row; justify-content: center; gap: 10px; width: 100%; }
    .hiw-rail-dot-row { display: flex; align-items: center; }
    .hiw-rail-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
      background: rgba(255,255,255,0.18);
      transition: background 350ms ease, transform 350ms ease;
    }
    .hiw-rail-dot.hiw-dot-active { background: #24bd9f; transform: scale(1.5); }

    /* ─────────────────────────────────────────────────────
       MOBILE — image rail stays visible, sticky above the
       stacked steps, so the same scroll-driven crossfade
       effect still plays as each step becomes active.
    ───────────────────────────────────────────────────── */
    @media (max-width: 900px) {
      .hiw-scroller { grid-template-columns: 1fr; gap: 0; }
      .hiw-rail {
        display: flex; position: sticky; top: 150px; z-index: 4;
        order: -1; padding: 0; margin-bottom: 1.5rem;
        background: #000;
      }
      .hiw-image-stack { height: 190px; margin-bottom: .6rem; }
      .hiw-step { min-height: 300px; opacity: 1; padding: 1.75rem 0 1.75rem 1.5rem; border-left-color: rgba(255,255,255,0.18); }
      .hiw-step.hiw-active { border-color: rgba(255,255,255,0.18); }
      .hiw-step:last-child { min-height: 300px; }
      .deploy-grid { grid-template-columns: 1fr; }
      /* Decorative parallax layers off on mobile — desktop-first effect, keeps small screens lean */
      .px-bg, .px-shape, .px-orb { display: none; }
    }
    @media (max-width: 600px) {
      .card-grid-3 { grid-template-columns: 1fr; }
    }
    /* ═══════════════════════════════════════════════════════
       BLACK PARALLAX BACKGROUNDS — dark, on-brand line/dot
       patterns that drift at a different speed than the page
       scroll, giving a few sections visual depth. Background
       stays black; only faint teal/blue linework moves.
    ═══════════════════════════════════════════════════════ */
    .px-bg { position: absolute; inset: -25%; z-index: 0; pointer-events: none; overflow: hidden; will-change: transform; }
    .px-host { position: relative; overflow: hidden; }

    /* Hero — soft teal dot grid + a faint grey grid-mesh layer */
    .px-dotgrid {
      position: absolute; inset: 0;
      background-image: radial-gradient(circle, rgba(36,189,159,0.16) 1.4px, transparent 1.4px);
      background-size: 34px 34px;
    }

    /* Platform Capabilities — hex mesh + glow orbs */
    .px-orb { position: absolute; border-radius: 50%; will-change: transform; }

    /* Deployment — diagonal circuit lines, dual-axis drift */
    .px-circuit { position: absolute; inset: 0; }

    /* ═══════════════════════════════════════════════════════
       "THE DIFFERENCE" — scroll-scrubbed word reveal
       (Bright-Machines-style text build: words brighten in
       reading order as you scroll through the section, tied
       continuously to scroll position rather than a fixed
       fade-in-once transition)
    ═══════════════════════════════════════════════════════ */
    /* p text in this block stays solid white (not the usual translucent grey body
       colour) so per-word dimming below isn't compounded against an already-faded base */
    .tx-scrub-block p.tx-scrub { color: #fff; }
    .tx-scrub .tx-word { opacity: 0.28; transition: opacity 500ms ease; }
    .tx-scrub-block h2.tx-scrub .tx-word { color: #fff; }
    /* Triggered once when .heading-block scrolls into view and gets .animate — the
       exact same mechanism every other section on this page already uses reliably.
       Each word's own transition-delay (set inline, baked in at build time) staggers
       the build in reading order. */
    .heading-block.animate .tx-scrub .tx-word { opacity: 1; }

    /* ═══════════════════════════════════════════════════════
       VIDEO TEASER — full-bleed image, scroll-driven zoom
       (Bright-Machines-style: background scales up slowly as
       you scroll through the section — driven by JS below,
       same continuous scroll-progress pattern as the Hero H1)
    ═══════════════════════════════════════════════════════ */
    .video-teaser {
      position: relative; width: 100%; min-height: 78vh;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; background: #000;
    }
    .video-teaser-bg { position: absolute; inset: 0; will-change: transform; }
    .video-teaser-bg img {
      width: 100%; height: 100%; object-fit: cover;
      transform: scale(1); /* JS scales this up to ~1.18 as the section scrolls through */
      filter: grayscale(15%) brightness(0.62);
    }
    .video-teaser-fade {
      position: absolute; inset: 0; z-index: 1;
      background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.78) 100%);
    }
    .video-teaser-content {
      position: relative; z-index: 2; text-align: center;
      max-width: 720px; padding: 0 2rem;
      display: flex; flex-direction: column; align-items: center;
    }
    .video-teaser-title {
      font-size: clamp(18px,3.05vw,var(--fs-h2)); font-weight: 700; color: #fff;
      line-height: 1.15; margin-top: .75rem;
    }
    .video-teaser-sub {
      font-size: var(--fs-lead); color: #e9e9e9; margin-top: 1.1rem; max-width: 480px;
      line-height: 1.6;
    }
    .video-play-btn {
      width: 84px; height: 84px; border-radius: 50%; margin-top: 2.25rem;
      background: rgba(255,255,255,0.06); border: 2px solid #24bd9f;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: transform 250ms ease, background 250ms ease;
    }
    .video-play-btn:hover { transform: scale(1.08); background: rgba(36,189,159,0.18); }
    .video-play-btn i { font-size: 30px; color: #24bd9f; margin-left: 2px; }
    .video-teaser-link {
      margin-top: 1.5rem; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
      color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
      border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 4px;
      transition: color 200ms ease, border-color 200ms ease;
    }
    .video-teaser-link:hover { color: #24bd9f; border-color: #24bd9f; }
    .video-teaser-link i { font-size: 14px; }

    @media (max-width: 900px) {
      .video-teaser { min-height: 60vh; }
      .video-play-btn { width: 64px; height: 64px; }
      .video-play-btn i { font-size: 22px; }
    }

    /* ═══════════════════════════════════════════════════════
       NEWS ARTICLE PAGE
    ═══════════════════════════════════════════════════════ */
    .article-hero {
      position: relative; width: 100%; background: #000;
    }
    .article-hero-media {
      position: relative; width: 100%; height: 47.6vh; overflow: hidden; background: #000;
    }
    .article-hero-bg { position: absolute; inset: 0; }
    .article-hero-bg img {
      width: 100%; height: 100%; object-fit: cover; filter: brightness(0.75) saturate(1);
    }
    .article-hero-fade {
      position: absolute; inset: 0;
      background: linear-gradient(to top, #000 0%, transparent 50%);
    }
    .article-hero-content { position: relative; z-index: 2; width: 100%; background: #000; padding: 3rem 3.6rem 3.5rem; }
    .article-hero-inner { max-width: 1440px; margin: 0 auto; }
    .article-tag { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #24bd9f; margin-bottom: 1rem; display: block; }
    .article-title { font-size: clamp(29px,4.92vw,var(--fs-h1)); font-weight: 700; color: #fff; line-height: 1.15; }
    .article-byline { margin-top: 1.25rem; font-size: var(--fs-subbody); color: #e9e9e9; }

    .article-body {
      max-width: 1080px; margin: 0 auto; padding: 2rem 3.6rem 5rem;
    }
    .article-body p {
      font-size: var(--fs-body); line-height: 1.6; color: #e9e9e9; margin-bottom: 1.6rem;
    }
    .article-body p.lede {
      font-size: var(--fs-body); color: #e9e9e9; font-weight: 400; line-height: 1.6;
    }
    .article-quote {
      border-left: 3px solid #24bd9f; padding: .25rem 0 .25rem 1.5rem;
      margin: 2.5rem 0; font-size: 20px; line-height: 1.55; color: #fff; font-style: italic;
    }
    .article-quote cite {
      display: block; margin-top: .85rem; font-size: 13px; color: #e9e9e9;
      font-style: normal; letter-spacing: .02em;
    }
    /* Semantic heading scale within the article body — same ratio ladder
       (H1 61 / H2 49 / H3 39 / H4 31 / H5 25 / H6 20) used across the site.
       The vw coefficient in each clamp() is scaled to the same 61px H1
       baseline (61:49:39:31 ≈ 4 : 3.2 : 2.56 : 2.05 vw) so every level stays
       proportionally smaller than the one above it at every viewport width —
       not just at the fixed desktop maximum. Using a flat "4vw" on every
       level (the earlier version) made H1 and H2 render pixel-identical
       across most of the tablet/laptop range. */
    .article-h2 {
      font-size: clamp(18px, 3.05vw, var(--fs-h2)); font-weight: 700; color: #fff;
      line-height: 1.15; letter-spacing: 0; margin: 3.5rem 0 1rem;
    }
    .article-h3 {
      font-size: clamp(14px, 2.42vw, var(--fs-h3)); font-weight: 700; color: #fff;
      line-height: 1.2; letter-spacing: normal; margin: 2.5rem 0 1rem;
    }
    .article-h4 {
      font-size: clamp(11px, 1.95vw, var(--fs-h4)); font-weight: 700; color: #fff;
      line-height: 1.2; letter-spacing: normal; margin: 2rem 0 .75rem;
    }
    .article-h5 {
      font-size: var(--fs-card-title); font-weight: 700; color: #fff;
      line-height: 1.25; letter-spacing: normal; margin: 1.5rem 0 .6rem;
    }
    .article-h6 {
      font-size: var(--fs-lead); font-weight: 700; color: #e9e9e9;
      line-height: 1.3; letter-spacing: .01em; margin: 1.25rem 0 .5rem;
    }
    .article-list {
      color: #e9e9e9; padding-left: 1.2rem; margin-bottom: 1.6rem; line-height: 1.8;
    }
    .article-list li { margin-bottom: .25rem; }
    .article-emphasis {
      font-size: var(--fs-h5); font-weight: 600; color: #fff; line-height: 1.5;
      margin: 1.5rem 0; padding-left: 1.2rem; border-left: 3px solid #24bd9f;
    }

    .article-stats {
      display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
      margin: 3rem 0;
    }
    .article-stat { text-align: center; padding: 2rem 1rem; border: 1px solid rgba(255,255,255,0.12); }
    .article-stat-number { font-size: clamp(40px,5vw,56px); font-weight: 700; color: #24bd9f; line-height: 1; }
    /* Individual stat labels are marked up as H4s — the smallest tier in the
       article's heading ladder — so each figure reads as a distinct, named
       fact to search crawlers and answer engines (GEO), not just decorative
       text under a number. */
    .article-stat-label {
      font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
      color: #e9e9e9; margin-top: .6rem; line-height: 1.4;
    }

    .article-divider-line { border-top: 1px solid rgba(255,255,255,0.1); margin: 3rem 0; }
    /* "About X" boilerplate sections are marked up as H2s — they sit at the
       same document depth as the narrative section headings above — but kept
       visually compact on purpose, since inflating legal/company boilerplate
       to full 49px display type would overpower the actual story. Semantic
       level and visual size are deliberately decoupled here. */
    .article-boilerplate-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: .75rem; letter-spacing: .02em; text-transform: uppercase; }
    .article-boilerplate p { font-size: var(--fs-subbody); line-height: 1.75; color: #e9e9e9; }

    /* ── Inline text links ──
       Any hyperlink embedded within reading copy (article body, lede,
       boilerplate, section paragraphs, quotes) site-wide: green with an
       underline by default, turning white on hover. Distinct from nav
       items, buttons, card links, and footer utility links, which each
       have their own established treatment. */
    .article-body a, .heading-block p a, .cite-text a, .problem-list li a, .article-quote a, .capability-desc a, .capability-title a, .section-text a {
      color: #5bbaa0; text-decoration: underline; transition: color 200ms ease;
    }
    .article-body a:hover, .heading-block p a:hover, .cite-text a:hover, .problem-list li a:hover, .article-quote a:hover, .capability-desc a:hover, .capability-title a:hover, .section-text a:hover {
      color: #82abd6;
    }
    /* Retained as an alias — blue hover is now the site-wide default above,
       so this class no longer changes behaviour, but is kept so any
       existing markup using it continues to work unchanged. */
    .text-link-blue:hover { color: #82abd6 !important; }

    .article-back-row {
      max-width: 1080px; margin: 0 auto; padding: 0 3.6rem 4rem;
    }
    .article-back-link {
      display: inline-flex; align-items: center; gap: 8px; color: #5bbaa0; text-decoration: underline;
      font-size: var(--fs-subbody); font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
      transition: color 200ms ease; padding: 10px 0;
    }
    .article-back-link:hover { color: #82abd6; }

    @media (max-width: 900px) {
      .article-hero-content, .article-body, .article-back-row { padding-left: 1.8rem; padding-right: 1.8rem; }
      .article-stats { grid-template-columns: 1fr; }
    }

    /* ═══════════════════════════════════════════════════════
       VIDEOS PAGE — video card grid + closing CTA band
    ═══════════════════════════════════════════════════════ */
    .video-grid {
      display: grid; grid-template-columns: repeat(3,1fr); gap: 28px;
      margin-top: 3.5rem;
    }
    .video-card {
      position: relative; aspect-ratio: 16/9; overflow: hidden; cursor: pointer;
      border: 1px solid rgba(255,255,255,0.12); background: #000;
      opacity: 0; transform: translateY(28px);
      transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22,1,0.36,1);
    }
    .video-card.animate { opacity: 1; transform: translateY(0); }
    .video-grid .video-card:nth-child(2) { transition-delay: 90ms; }
    .video-grid .video-card:nth-child(3) { transition-delay: 180ms; }
    .video-grid .video-card:nth-child(4) { transition-delay: 90ms; }
    .video-grid .video-card:nth-child(5) { transition-delay: 180ms; }
    .video-grid .video-card:nth-child(6) { transition-delay: 270ms; }
    .video-card img {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
      transition: transform 550ms cubic-bezier(0.22,1,0.36,1);
      filter: brightness(0.78);
    }
    .video-card:hover img { transform: scale(1.08); }
    .video-card-fade {
      position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.25) 55%, transparent 80%);
    }
    .video-card-play {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(1);
      width: 56px; height: 56px; border-radius: 50%; z-index: 2;
      background: rgba(0,0,0,0.35); border: 2px solid rgba(255,255,255,0.7);
      display: flex; align-items: center; justify-content: center;
      transition: transform 300ms ease, border-color 300ms ease, background 300ms ease;
    }
    .video-card:hover .video-card-play {
      transform: translate(-50%,-50%) scale(1.12);
      border-color: #24bd9f; background: rgba(36,189,159,0.22);
    }
    .video-card-play i { font-size: 20px; color: #fff; margin-left: 2px; }
    .video-card-body {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
      padding: 1.25rem 1.4rem;
    }
    .video-card-cat {
      font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      color: #24bd9f; margin-bottom: .4rem;
    }
    .video-card-title { font-size: var(--fs-h5); font-weight: 700; color: #fff; line-height: 1.3; }
    .videos-cta-band {
      width: 100%; text-align: center; padding: 5rem 2rem; border-top: 1px solid rgba(255,255,255,0.07);
    }
    .videos-cta-band h2 { font-size: clamp(18px,3.05vw,var(--fs-h2)); font-weight: 700; color: #fff; }
    .videos-cta-band .btn { margin-top: 1.75rem; }
    @media (max-width: 900px) {
      .video-grid { grid-template-columns: repeat(2,1fr); gap: 18px; }
    }
    @media (max-width: 600px) {
      .video-grid { grid-template-columns: 1fr; }
    }

    /* ═══════════════════════════════════════════════════════
       NEWS / PRESS RELEASES / BLOG — filter tabs + card grid
    ═══════════════════════════════════════════════════════ */
    .news-filter-label {
      font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
      color: #e9e9e9; margin: 1.5rem 0 .9rem;
    }
    .news-filter-row {
      display: flex; gap: 12px; flex-wrap: wrap;
    }
    .news-filter-btn {
      padding: 8px 20px; border: 1px solid rgba(255,255,255,0.18); background: transparent;
      color: #e9e9e9; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600;
      letter-spacing: .06em; text-transform: uppercase; cursor: pointer; border-radius: 0;
      text-decoration: none; display: inline-block;
      transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
    }
    .news-filter-btn:hover { border-color: #24bd9f; color: #fff; }
    .news-filter-btn.active { background: #24bd9f; border-color: #24bd9f; color: #000; }
    @media (max-width: 600px) {
      .news-filter-btn { padding: 12px 20px; }
    }
    .news-grid {
      display: grid; grid-template-columns: repeat(3,1fr); gap: 28px;
      margin-top: 3rem;
    }
    .news-card {
      display: flex;
      flex-direction: column;
      background: #0a0a0a;
      border: 1px solid rgba(255,255,255,0.1);
      overflow: hidden;
      cursor: pointer;

      opacity: 0;
      transform: translateY(24px);

      transition:
        opacity 600ms ease,
        transform 600ms cubic-bezier(0.22,1,0.36,1),
        border-color 250ms ease;
    }

    .news-card.animate {
      opacity: 1;
      transform: translateY(0);
    }
    .news-grid .news-card:nth-child(2) { transition-delay: 80ms; }
    .news-grid .news-card:nth-child(3) { transition-delay: 160ms; }
    .news-grid .news-card:nth-child(5) { transition-delay: 80ms; }
    .news-grid .news-card:nth-child(6) { transition-delay: 160ms; }
    .news-card:hover {
      border-color: rgba(36,189,159,0.4);
    }
    .news-card-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; }
    .news-card-img-wrap img {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
      filter: brightness(0.82);
    }
    .news-card-tag {
      position: absolute; top: 12px; left: 12px; z-index: 2;
      padding: 5px 12px; font-size: 10px; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; border-radius: 0;
    }
    .news-card-tag.tag-press { background: #fff; color: #000; }
    .news-card-tag.tag-media { background: #fff; color: #000; }
    .news-card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
    .news-card-date { font-size: var(--fs-subbody); color: #e9e9e9; letter-spacing: .04em; margin-bottom: .6rem; }
    .news-card-title { font-size: var(--fs-h5); font-weight: 700; color: #fff; line-height: 1.35; margin-bottom: 1rem; }
    .news-card-source {
      margin-top: auto; font-size: 12px; font-weight: 600; color: #24bd9f;
      display: flex; align-items: center; gap: 6px;
    }