:root {
    /* Deep ocean blues pulled from the pier-at-dusk photo */
    --navy-900: #052338;
    --navy-800: #0a3a59;
    --navy-700: #0f4d72;
    --navy-600: #156592;
    --navy-500: #1d86c4;
    /* Vibrant ocean teal-blue */
    --tide:      #1485b8;
    --tide-dark: #0e6c98;
    --tide-soft: #62cfe6;
    /* Sunset coral — the warm pop from the sky */
    --coral:     #f0784a;
    --coral-dark: #d95f30;
    --coral-soft: #f7a07a;
    /* accent role (eyebrows, CTAs, markers) = sunset coral */
    --red:      var(--coral);
    --red-dark: var(--coral-dark);
    --ink:      #10222e;
    --gray-900: #1f2a33;
    --gray-700: #4d5760;
    --gray-500: #828a8f;
    --gray-300: #cdcabf;
    --gray-200: #e7e1d4;
    --gray-100: #efe9dc;
    --paper:    #f7efe1;
    --sand-200: #efe3cf;
    --bg:       #ffffff;

    --maxw: 1680px;
    --gutter: clamp(24px, 5vw, 96px);
    --radius: 8px;

    --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: 90px; }
  body {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 16px;
    line-height: 1.55;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; }

  .container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* ---------- Top utility bar ---------- */
  .utility {
    background: var(--navy-900);
    color: #cfd6e3;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
  }
  .utility .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 34px;
  }
  .utility .left { display: flex; gap: 24px; }
  .utility .right { display: flex; gap: 20px; align-items: center; }
  .utility a:hover { color: #fff; }
  .utility .dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: #57c785; margin-right: 8px; vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(87,199,133,0.18);
  }

  /* ---------- Nav ---------- */
  .nav {
    position: sticky; top: 0; z-index: 50;
    background: linear-gradient(180deg, rgba(232,246,251,0.70), rgba(255,255,255,0.66));
    backdrop-filter: saturate(120%) blur(14px);
    -webkit-backdrop-filter: saturate(120%) blur(14px);
    border-bottom: 1px solid rgba(20,133,184,0.18);
    box-shadow: inset 0 2px 0 var(--tide);
  }
  .nav.scrolled { background: linear-gradient(180deg, rgba(232,246,251,0.86), rgba(255,255,255,0.82)); }
  .nav .container {
    display: flex; align-items: center; justify-content: space-between;
    height: 78px;
    transition: height 200ms ease;
  }
  .nav.scrolled .container { height: 64px; }
  .nav.scrolled { box-shadow: inset 0 2px 0 var(--tide), 0 8px 24px -16px rgba(11,37,69,0.18); }
  .nav-logo img { height: 56px; width: auto; display: block; background: transparent; }
  .nav-menu { display: flex; gap: 6px; align-items: center; }
  .nav-link {
    padding: 10px 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--gray-900);
    border-radius: 8px;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background 120ms ease, color 120ms ease;
    position: relative;
  }
  .nav-link:hover { background: rgba(20,133,184,0.10); color: var(--tide-dark); }
  .nav-link svg { opacity: 0.55; }

  /* Persistent portal buttons */
  .nav-portals {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 6px 0 10px;
    padding-left: 14px;
    border-left: 1px solid var(--gray-200);
  }
  .portal-link {
    padding: 8px 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--gray-700);
    border-radius: 8px;
    white-space: nowrap;
    transition: background 120ms ease, color 120ms ease;
  }
  .portal-link:hover { background: var(--gray-100); color: var(--navy-800); }

  .nav-cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--navy-800);
    color: #fff;
    padding: 11px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 120ms ease, transform 120ms ease;
  }
  .nav-cta:hover { background: var(--navy-700); }
  .nav-cta .arr { transition: transform 160ms ease; }
  .nav-cta:hover .arr { transform: translateX(3px); }

  /* Megamenu */
  .mega-wrap { position: relative; }
  .mega {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: 920px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 24px 60px -20px rgba(11,37,69,0.25), 0 4px 12px -4px rgba(11,37,69,0.08);
    opacity: 0; pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px;
  }
  /* Invisible bridge across the 6px gap so the pointer never leaves the hover area */
  .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .mega-wrap:hover .mega,
  .mega-wrap.open .mega,
  .mega-wrap:focus-within .mega {
    opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
  }
  .mega-card {
    display: block;
    padding: 16px;
    border-radius: 12px;
    background: var(--paper);
    transition: background 140ms ease;
    border: 1px solid transparent;
  }
  .mega-card:hover { background: #fff; border-color: var(--gray-200); }
  .mega-card .badge {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--red);
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .mega-card h4 { margin: 0 0 4px; font-size: 17px; color: var(--navy-800); font-weight: 600; letter-spacing: -0.01em; }
  .mega-card p { margin: 0; font-size: 13px; color: var(--gray-700); line-height: 1.45; }
  .mega-card .swatch {
    height: 56px; border-radius: 8px; margin-bottom: 12px;
    background: linear-gradient(135deg, var(--navy-800), var(--navy-500));
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .mega-card.connected .swatch { background: linear-gradient(135deg, #0a2236, #1f6f8b); }
  .mega-card.water .swatch { background: linear-gradient(135deg, #0a2236, #2a93ad); }
  .mega-card.store {
    background: var(--gray-100);
    border: 1px dashed var(--navy-500);
    border-radius: 10px;
  }
  .mega-card.store:hover { background: #eef7fd; border-style: solid; }
  .mega-card.store h4 { color: var(--navy-500); }
  .mega-card.store .badge { color: var(--navy-500); }
  .mega-card.store .swatch { background: #0a3a59; border: none; }
  .mega-card.store .swatch::after { display: none; }
  .mega-card .swatch::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image: radial-gradient(60% 80% at 50% 110%, rgba(255,255,255,0.18), transparent 60%);
  }
  .mega-card .swatch svg { position: relative; z-index: 1; }

  .mega-wrap.mini .mini-mega {
    display: flex; flex-direction: column; min-width: 200px; width: max-content;
    padding: 8px; gap: 2px;
  }
  .mega-wrap.mini .mini-mega .portal-link {
    border-left: none; padding: 10px 14px; text-align: left; width: 100%; box-sizing: border-box;
  }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    color: #fff;
    overflow: hidden;
    background: var(--navy-900);
    isolation: isolate;
  }
  .hero-media {
    position: absolute; inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--navy-900);
  }

  /* flowing current lines — water signal */
  .hero-waves {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    opacity: 0.22;
    mix-blend-mode: screen;
  }
  .hero-waves svg { position: absolute; top: 0; left: 0; width: 200%; height: 100%; }
  .hero-waves .wline { fill: none; stroke: rgba(122,214,232,0.55); stroke-width: 1.1; }
  @media (prefers-reduced-motion: no-preference) {
    .hero-waves svg { animation: current-drift 32s linear infinite; will-change: transform; }
  }
  @keyframes current-drift { to { transform: translateX(-50%); } }
  .hero-media::after {
    /* depth overlay so type stays readable over the photo */
    content: "";
    position: absolute; inset: 0;
    z-index: 2;
    background:
      linear-gradient(180deg, rgba(5,30,52,0.30) 0%, rgba(5,28,48,0.46) 50%, rgba(4,20,36,0.94) 100%),
      linear-gradient(90deg, rgba(5,26,46,0.95) 0%, rgba(5,26,46,0.78) 32%, rgba(5,26,46,0.42) 56%, rgba(5,26,46,0.06) 80%, rgba(5,26,46,0) 100%);
    pointer-events: none;
  }
  /* Subtle horizon lines as visual texture */
  .hero-lines { display: none; }
  .hero-inner {
    position: relative;
    z-index: 2;
    padding: 92px 0 124px;
    padding-left: clamp(16px, 4.5vw, 84px);
    min-height: 660px;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--coral-soft);
    margin-bottom: 22px;
    display: inline-flex; align-items: center; gap: 10px;
  }
  .eyebrow .bar { width: 28px; height: 1px; background: var(--coral); }
  h1.hero-h {
    font-size: clamp(42px, 5.6vw, 74px);
    line-height: 1.0;
    letter-spacing: -0.022em;
    font-weight: 600;
    margin: 0 0 22px;
    max-width: 14ch;
  }
  h1.hero-h em {
    font-style: normal;
    color: var(--tide-soft);
    font-weight: 600;
  }
  .hero-sub {
    font-size: clamp(17px, 1.4vw, 20px);
    color: #cfd6e3;
    max-width: 56ch;
    line-height: 1.5;
    margin: 0 0 36px;
    font-weight: 300;
  }
  .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: all 140ms ease;
    border: 1px solid transparent;
  }
  .btn-primary { background: var(--red); color: #fff; }
  .btn-primary:hover { background: var(--red-dark); }
  .btn-ghost {
    background: rgba(255,255,255,0.06);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
  }
  .btn-ghost:hover { background: rgba(255,255,255,0.12); }
  .btn .arr { transition: transform 160ms ease; }
  .btn:hover .arr { transform: translateX(3px); }

  /* Hero meta strip */
  .hero-meta {
    position: relative; z-index: 2;
    border-top: 1px solid rgba(255,255,255,0.12);
    background: rgba(6,26,53,0.55);
    backdrop-filter: blur(2px);
  }
  .hero-meta .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .meta-cell {
    padding: 22px 24px;
    border-left: 1px solid rgba(255,255,255,0.10);
    color: #cfd6e3;
  }
  .meta-cell:first-child { border-left: none; padding-left: 0; }
  .meta-cell .k {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: #8ca3c4; margin-bottom: 8px;
  }
  .meta-cell .v {
    font-size: 22px; font-weight: 500; color: #fff; letter-spacing: -0.01em;
  }
  .meta-cell .v small { color: #9fb6d8; font-weight: 400; font-size: 13px; margin-left: 6px; }

  /* ---------- Word reveal on section titles ---------- */
  .section-title .word, .hero-h .word {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 60%, 0);
    transition: opacity 900ms cubic-bezier(.16,.84,.28,1), transform 900ms cubic-bezier(.16,.84,.28,1);
    will-change: opacity, transform;
  }
  .reveal.in .section-title .word,
  .hero-rise .hero-h .word { opacity: 1; transform: none; }
  /* hero h1 fade via hero-rise; individual words staggered by JS-set --d */
  .hero-rise .hero-h .word { animation: word-rise 900ms cubic-bezier(.16,.84,.28,1) both; animation-delay: var(--d, 0ms); }
  @keyframes word-rise {
    from { opacity: 0; transform: translate3d(0, 60%, 0); }
    to   { opacity: 1; transform: none; }
  }

  /* ---------- Horizontal scroll-jack (Solutions) ---------- */
  .hscroll-section {
    position: relative;
    background: var(--paper);
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    /* outer height defines how much vertical scroll the horizontal panels consume */
    height: 400vh;
  }
  .hscroll-pin {
    position: sticky; top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .hscroll-track {
    display: flex;
    flex: 1;
    width: 400vw;
    will-change: transform;
    transform: translate3d(0,0,0);
  }
  .h-panel {
    width: 100vw;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 60px 0 80px;
    position: relative;
  }
  .h-panel .container {
    width: 100%;
    max-width: var(--maxw);
  }
  /* Intro panel */
  .h-panel-intro .intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end;
  }
  .h-panel-intro .lede-block { padding-bottom: 12px; }
  .h-panel-intro .preview-stack {
    display: flex; gap: 12px;
    align-items: flex-end;
  }
  .h-panel-intro .preview {
    flex: 1;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    border: 1px solid var(--gray-200);
    background: linear-gradient(135deg, var(--navy-800), var(--navy-500));
    color: #fff;
    padding: 18px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
    transform: translateY(0);
    transition: transform 400ms cubic-bezier(.16,.84,.28,1);
  }
  .h-panel-intro .preview:nth-child(2) {
    background: linear-gradient(135deg, #143058, #2a558f 60%, #4d8ed0);
    transform: translateY(-20px);
  }
  .h-panel-intro .preview:nth-child(3) {
    background: linear-gradient(135deg, #0b2545, #1b6f9a 60%, #4fb6d6);
    transform: translateY(-40px);
  }
  .h-panel-intro .preview::before {
    content: ""; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 10px);
  }
  .h-panel-intro .preview .tag {
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.7); position: relative;
  }
  .h-panel-intro .preview .ttl {
    font-size: 20px; font-weight: 500; letter-spacing: -0.01em;
    color: #fff; position: relative;
  }
  .hscroll-hint {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 32px;
    font-family: var(--font-mono);
    font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--red);
  }
  .hscroll-hint .arr {
    display: inline-block;
    animation: arrow-pulse 1.6s ease-in-out infinite;
  }
  @keyframes arrow-pulse {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
  }

  /* Product panel */
  .h-panel-product .pp-grid {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px;
    align-items: center;
  }
  .h-panel-product .pp-visual {
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, var(--navy-800), var(--navy-500));
    color: #fff;
  }
  .h-panel-product.connected .pp-visual { background: linear-gradient(135deg, #143058, #2a558f 60%, #4d8ed0); }
  .h-panel-product.water .pp-visual { background: linear-gradient(135deg, #0b2545, #1b6f9a 60%, #4fb6d6); }
  .h-panel-product .pp-visual::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 14px),
      radial-gradient(70% 100% at 50% 110%, rgba(255,255,255,0.18), transparent 60%);
  }
  .h-panel-product .pp-icon {
    position: absolute;
    top: 24px; left: 24px;
    width: 56px; height: 56px;
    border-radius: 14px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    display: grid; place-items: center;
    backdrop-filter: blur(4px);
  }
  .h-panel-product .pp-icon svg { width: 28px; height: 28px; }
  .h-panel-product .pp-stamp {
    position: absolute;
    bottom: 24px; left: 24px;
    font-family: var(--font-mono);
    font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.7);
  }
  .h-panel-product .pp-number {
    position: absolute;
    top: 24px; right: 28px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.1em;
  }
  .h-panel-product .pp-tag {
    font-family: var(--font-mono);
    font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--red); margin-bottom: 18px;
    display: inline-flex; align-items: center; gap: 10px;
  }
  .h-panel-product .pp-tag .bar { width: 22px; height: 1px; background: var(--red); }
  .h-panel-product .pp-title {
    font-size: clamp(36px, 4vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    font-weight: 500;
    color: var(--navy-800);
    margin: 0 0 22px;
  }
  .h-panel-product .pp-lede {
    font-size: 18px; color: var(--gray-700);
    line-height: 1.55; margin: 0 0 26px;
    max-width: 44ch;
  }
  .h-panel-product .pp-feats {
    list-style: none; padding: 0; margin: 0 0 32px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px;
  }
  .h-panel-product .pp-feats li {
    display: flex; gap: 10px;
    font-size: 14.5px;
    color: var(--gray-900);
  }
  .h-panel-product .pp-feats li::before {
    content: ""; flex-shrink: 0;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--red); margin-top: 8px;
  }

  /* Bottom progress bar inside the pin */
  .hscroll-progress {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 18px var(--gutter) 22px;
    display: flex; align-items: center; gap: 18px;
    background: linear-gradient(180deg, transparent, rgba(247,247,244,0.85));
    pointer-events: none;
  }
  .hscroll-progress .lbl {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gray-500);
  }
  .hscroll-progress .track {
    flex: 1;
    height: 2px;
    background: var(--gray-200);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }
  .hscroll-progress .fill {
    position: absolute; top: 0; bottom: 0; left: 0;
    background: var(--red);
    width: 0%;
    transition: width 80ms linear;
  }
  .hscroll-progress .ticks {
    display: flex; gap: 8px;
  }
  .hscroll-progress .ticks span {
    width: 26px; height: 2px;
    background: var(--gray-300);
    transition: background 240ms ease, transform 240ms ease;
    transform-origin: left;
  }
  .hscroll-progress .ticks span.on {
    background: var(--navy-800);
    transform: scaleX(1.15);
  }

  /* ---------- Vertical scrollytell timeline ---------- */
  .scrollytell-v {
    position: relative;
    background: var(--paper);
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    height: 360vh;
  }
  .scrollytell-v .timeline-pin {
    position: sticky; top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .scrollytell-v .timeline-stage {
    width: 100%;
    padding: 80px 0 100px;
  }
  .scrollytell-v .section-head { margin-bottom: 48px; }
  .timeline-canvas {
    position: relative;
    padding-top: 70px;
  }
  .timeline-rail-bg {
    position: absolute;
    top: 38px;
    left: 0; right: 0;
    height: 2px;
    background: var(--gray-300);
    border-radius: 2px;
  }
  .timeline-rail-fill {
    position: absolute;
    top: 38px;
    left: 0;
    height: 2px;
    background: var(--red);
    width: 0%;
    border-radius: 2px;
    transition: width 80ms linear;
    box-shadow: 0 0 12px rgba(12,122,147,0.4);
  }
  .timeline-boat {
    position: absolute;
    top: -4px;
    left: 0%;
    width: 80px;
    height: 80px;
    transform: translate3d(-50%, 0, 0);
    transition: left 80ms linear;
    pointer-events: none;
    z-index: 3;
  }
  .timeline-boat svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 14px rgba(11,37,69,0.25)); }
  /* gentle bobbing */
  .timeline-boat .boat-inner {
    animation: bob 3.4s ease-in-out infinite;
    transform-origin: 50% 80%;
    display: block;
    width: 100%; height: 100%;
  }
  @keyframes bob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-3px) rotate(2deg); }
  }
  .scrollytell-v .timeline-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
  }
  .scrollytell-v .milestone {
    position: relative;
    padding-top: 0;
    opacity: 0.32;
    transform: translateY(28px);
    transition: opacity 700ms cubic-bezier(.16,.84,.28,1), transform 700ms cubic-bezier(.16,.84,.28,1);
  }
  .scrollytell-v .milestone.active {
    opacity: 1;
    transform: translateY(0);
  }
  .scrollytell-v .milestone .dot {
    position: absolute;
    top: 30px; left: 0;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--gray-300);
    box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--gray-300);
    transition: background 400ms ease, box-shadow 400ms ease, transform 400ms ease;
    z-index: 2;
  }
  .scrollytell-v .milestone.active .dot {
    background: var(--red);
    box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--red), 0 0 0 12px rgba(12,122,147,0.15);
    transform: scale(1.05);
  }
  .scrollytell-v .milestone .yr-row {
    position: absolute; top: 0; left: 32px; right: 0;
    display: flex; align-items: center; gap: 14px;
    height: 56px;
  }
  .scrollytell-v .milestone .year {
    font-size: clamp(34px, 3.4vw, 46px);
    font-weight: 500;
    color: var(--navy-800);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .scrollytell-v .milestone .tag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
    padding: 4px 8px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    background: #fff;
    white-space: nowrap;
  }
  .scrollytell-v .milestone.active .tag {
    color: var(--red);
    border-color: var(--red);
    background: rgba(12,122,147,0.06);
  }
  .scrollytell-v .milestone h4 {
    margin: 75px 0 8px;
    font-size: 19px;
    color: var(--navy-800);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.25;
    padding-right: 24px;
  }
  .scrollytell-v .milestone p {
    margin: 0;
    color: var(--gray-700);
    font-size: 14px;
    line-height: 1.55;
    padding-right: 24px;
  }

  /* Mobile fallback for both scroll-jack sections */
  @media (max-width: 900px) {
    .hscroll-section { height: auto; }
    .hscroll-pin { position: static; height: auto; overflow: visible; }
    .hscroll-track {
      display: block;
      width: 100%;
      transform: none !important;
    }
    .h-panel { width: 100%; padding: 60px 0; }
    .h-panel-intro .intro-grid,
    .h-panel-product .pp-grid {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .h-panel-product .pp-feats { grid-template-columns: 1fr; }
    .hscroll-progress { display: none; }

    .scrollytell-v { height: auto; }
    .scrollytell-v .timeline-pin { position: static; height: auto; }
    .scrollytell-v .timeline-stage { padding: 80px 0; }
    .timeline-rail-bg, .timeline-rail-fill, .timeline-boat { display: none; }
    .scrollytell-v .timeline-grid { grid-template-columns: 1fr; gap: 40px; }
    .scrollytell-v .milestone { opacity: 1; transform: none; padding-top: 0; }
    .scrollytell-v .milestone .dot {
      position: relative; top: 0; margin-bottom: 18px;
      background: var(--red);
      box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--red);
    }
    .scrollytell-v .milestone .yr-row { position: relative; left: 0; height: auto; margin-bottom: 16px; }
    .scrollytell-v .milestone h4 { margin-top: 0; }
  }

  /* ---------- Scroll reveal ---------- */
  .reveal {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition: opacity 900ms cubic-bezier(.16,.84,.28,1), transform 900ms cubic-bezier(.16,.84,.28,1);
    will-change: opacity, transform;
  }
  .reveal.in { opacity: 1; transform: translate3d(0,0,0); }
  .reveal-stagger > * {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 800ms cubic-bezier(.16,.84,.28,1), transform 800ms cubic-bezier(.16,.84,.28,1);
  }
  .reveal-stagger.in > *  { opacity: 1; transform: translate3d(0,0,0); }
  .reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
  .reveal-stagger.in > *:nth-child(2) { transition-delay: 70ms; }
  .reveal-stagger.in > *:nth-child(3) { transition-delay: 140ms; }
  .reveal-stagger.in > *:nth-child(4) { transition-delay: 210ms; }
  .reveal-stagger.in > *:nth-child(5) { transition-delay: 280ms; }
  .reveal-stagger.in > *:nth-child(6) { transition-delay: 350ms; }
  .reveal-stagger.in > *:nth-child(7) { transition-delay: 420ms; }
  .reveal-stagger.in > *:nth-child(8) { transition-delay: 490ms; }

  /* Hero text rise on load */
  .hero-rise > * {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    animation: hero-rise 1100ms cubic-bezier(.16,.84,.28,1) forwards;
  }
  .hero-rise > *:nth-child(1) { animation-delay: 200ms; }
  .hero-rise > *:nth-child(2) { animation-delay: 320ms; }
  .hero-rise > *:nth-child(3) { animation-delay: 460ms; }
  .hero-rise > *:nth-child(4) { animation-delay: 580ms; }
  @keyframes hero-rise {
    to { opacity: 1; transform: translate3d(0,0,0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-stagger > *, .hero-rise > * {
      opacity: 1 !important; transform: none !important; animation: none !important;
    }
    .hero-media img { transform: none !important; }
    html { scroll-behavior: auto; }
  }

  /* ---------- Section scaffolding ---------- */
  section { padding: 110px 0; }
  .section-head { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; margin-bottom: 56px; align-items: end; }
  .section-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 18px;
  }
  .section-eyebrow .bar { width: 22px; height: 1px; background: var(--red); }
  .section-title {
    font-size: clamp(33px, 4vw, 54px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 0;
    color: var(--navy-800);
  }
  .section-lede {
    font-size: 18px;
    color: var(--gray-700);
    margin: 0;
    line-height: 1.55;
    max-width: 52ch;
  }

  /* ---------- Products row ---------- */
  .products {
    background: var(--paper);
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
  }
  .product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
  .product {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    min-height: 440px;
    position: relative;
    overflow: hidden;
  }
  .product:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -20px rgba(11,37,69,0.25);
    border-color: var(--navy-500);
  }
  .product .visual {
    height: 196px;
    border-radius: 8px;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
    background: var(--navy-800);
  }
  .product .visual .shot {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 600ms cubic-bezier(.16,.84,.28,1);
  }
  .product:hover .visual .shot { transform: scale(1.05); }
  .product .visual::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(6,38,62,0) 30%, rgba(5,30,50,0.82) 100%);
  }
  .product .visual::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(135deg, rgba(20,133,184,0.30) 0%, rgba(20,133,184,0) 55%);
    mix-blend-mode: multiply;
  }
  .product.connected .visual::after { background: linear-gradient(135deg, rgba(15,77,114,0.30) 0%, rgba(15,77,114,0) 55%); }
  .product.water .visual::after { background: linear-gradient(135deg, rgba(98,207,230,0.26) 0%, rgba(98,207,230,0) 55%); }
  .product.store .visual::after { background: linear-gradient(135deg, rgba(240,120,74,0.28) 0%, rgba(240,120,74,0) 55%); }
  .product.store .visual:has(image-slot:not([data-filled])) { background: var(--gray-100); }
  .product.store .visual:has(image-slot:not([data-filled]))::before, .product.store .visual:has(image-slot:not([data-filled]))::after { display: none; }
  .product.store .visual:has(image-slot:not([data-filled])) .icon { background: rgba(20,133,184,0.90); border-color: rgba(20,133,184,0.9); }
  .product.store .visual:has(image-slot:not([data-filled])) .label { color: var(--navy-900); text-shadow: none; }
  .product .lines {
    list-style: none; margin: -8px 0 22px; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--gray-700);
  }
  .product .lines li { display: flex; align-items: center; gap: 8px; }
  .product .lines li::before { content: ""; width: 5px; height: 5px; flex: none; background: var(--tide); border-radius: 50%; }
  .product h3 { min-height: 0; }
  .product .visual .icon {
    position: absolute; top: 20px; left: 20px; z-index: 2;
    width: 38px; height: 38px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    display: grid; place-items: center; color: #fff;
    backdrop-filter: blur(3px);
  }
  .product .visual .label {
    position: absolute; bottom: 18px; left: 20px; z-index: 2;
    color: rgba(255,255,255,0.95);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(4,20,36,0.5);
  }
  .product .tag {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--gray-500);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .product h3 {
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--navy-800);
  }
  .product p {
    margin: 0 0 22px;
    color: var(--gray-700);
    font-size: 15px;
    line-height: 1.55;
    flex: 1;
  }
  .product .more {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--navy-800);
    font-weight: 500;
    font-size: 14px;
    align-self: flex-start;
  }
  .product .more .arr { transition: transform 160ms ease; }
  .product:hover .more .arr { transform: translateX(4px); }

  .services-grid:has(.service:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
  @media (max-width: 720px) { .services-grid:has(.service:nth-child(4):last-child) { grid-template-columns: 1fr; } }
  /* ---------- Solutions / Services ---------- */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--gray-200);
    border-left: 1px solid var(--gray-200);
  }
  .service {
    border-right: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    padding: 32px 28px;
    background: #fff;
    transition: background 180ms ease;
  }
  .service:hover { background: var(--paper); }
  .service .num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--gray-500);
    letter-spacing: 0.12em;
    margin-bottom: 22px;
  }
  .service h4 {
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 500;
    color: var(--navy-800);
    letter-spacing: -0.01em;
  }
  .service p { margin: 0; color: var(--gray-700); font-size: 14.5px; line-height: 1.6; }

  /* ---------- Stats / Why ---------- */
  .why {
    background: var(--navy-800);
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  .why::before {
    content: "";
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 80px);
    pointer-events: none;
  }
  .why .section-title { color: #fff; }
  .why .section-lede { color: #cfd6e3; }
  .why .section-eyebrow { color: #74d2e6; }
  .why .section-eyebrow .bar { background: #74d2e6; }

  .stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    border-top: 1px solid rgba(255,255,255,0.15);
  }
  .stat { padding: 36px 28px 0; border-right: 1px solid rgba(255,255,255,0.12); }
  .stat:last-child { border-right: none; }
  .stat .num {
    font-size: clamp(46px, 5vw, 72px);
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 14px;
  }
  .stat .num sup { font-size: 0.5em; vertical-align: super; color: #9fb6d8; margin-left: 2px; font-weight: 400; }
  .stat .lab {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9fb6d8;
  }

  /* ---------- Timeline ---------- */
  .timeline {
    background: var(--paper);
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
  }
  .timeline { padding: 88px 0; }
  .timeline .section-head { margin-bottom: 34px; }
  .timeline-rail {
    position: relative;
    margin-top: 8px;
  }
  .timeline-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 84px 28px;
    position: relative;
    padding-top: 34px;
  }
  .milestone:nth-child(4)::before { right: 0; }
  .milestone:nth-child(n+5) { transition-delay: 90ms; }
  .milestone::before {
    content: "";
    position: absolute;
    top: calc(var(--tl-offset) * -1); left: 0; right: -28px;
    height: 1px;
    background: var(--gray-300);
  }
  .milestone:last-child::before { right: 0; }
  .milestone {
    --tl-offset: 26px;
    position: relative;
    padding: 0 8px 0 0;
    opacity: 0;
    transform: translate3d(48px, 0, 0);
    transition: opacity 620ms cubic-bezier(.16,.84,.28,1), transform 620ms cubic-bezier(.16,.84,.28,1);
  }
  .milestone.in { opacity: 1; transform: translate3d(0,0,0); }
  .milestone:nth-child(2) { transition-delay: 90ms; }
  .milestone:nth-child(3) { transition-delay: 180ms; }
  .milestone:nth-child(4) { transition-delay: 270ms; }
  .milestone .dot {
    position: absolute;
    top: calc(var(--tl-offset) * -1 - 8px); left: 0;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--gray-300);
    box-shadow: 0 0 0 4px var(--paper);
    z-index: 1;
  }
  .milestone.current .dot {
    background: var(--red);
    box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--red),
                0 0 0 10px rgba(240,120,74,0.18);
  }
  .milestone .yr-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .milestone .year {
    font-size: clamp(28px, 2.4vw, 36px);
    font-weight: 500;
    color: var(--navy-800);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .milestone .tag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
    padding: 4px 8px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    background: #fff;
    white-space: nowrap;
  }
  .milestone.current .tag {
    color: var(--red);
    border-color: var(--red);
    background: rgba(240,120,74,0.08);
  }
  .milestone h4 {
    margin: 0 0 8px;
    font-size: 19px;
    color: var(--navy-800);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }
  .milestone p {
    margin: 0;
    color: var(--gray-700);
    font-size: 13.5px;
    line-height: 1.55;
    text-wrap: pretty;
  }
  @media (prefers-reduced-motion: reduce) {
    .milestone { opacity: 1 !important; transform: none !important; }
  }
  @media (max-width: 1024px) {
    .timeline-grid { grid-template-columns: repeat(2, 1fr); gap: 58px 28px; }
  }
  @media (max-width: 720px) {
    .timeline-grid { grid-template-columns: 1fr; gap: 52px; }
    .milestone { transition-delay: 0ms !important; }
  }

  .industries-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  }
  .industry {
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    cursor: default;
    display: flex; flex-direction: column;
  }
  .industry:hover {
    border-color: var(--navy-500);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -22px rgba(11,37,69,0.28);
  }
  .industry .photo {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--navy-800), var(--navy-500));
    overflow: hidden;
    color: #fff;
  }
  /* Subtle texture so each placeholder reads as imagery, not flat color */
  .industry .photo::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 9px),
      radial-gradient(70% 90% at 50% 110%, rgba(255,255,255,0.22), transparent 60%);
  }
  .industry .photo::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6,26,53,0) 40%, rgba(6,26,53,0.55) 100%);
  }
  .industry .ico {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    z-index: 1;
  }
  .industry .ico svg { width: 56px; height: 56px; opacity: 0.95; }
  .industry .stamp {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
  }
  .industry .body {
    padding: 20px 20px 22px;
    display: flex; flex-direction: column; gap: 4px;
  }
  .industry .name {
    font-size: 19px;
    font-weight: 500;
    color: var(--navy-800);
    letter-spacing: -0.01em;
  }
  .industry .desc {
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.45;
  }
  .industry .meta {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-500);
  }
  .industry .meta .num { color: var(--navy-800); font-weight: 500; }
  /* Color variants for visual rhythm */
  .industry.v2 .photo { background: linear-gradient(135deg, #0b2545, #1b6f9a); }
  .industry.v3 .photo { background: linear-gradient(135deg, #143058, #3a4a6b); }
  .industry.v4 .photo { background: linear-gradient(135deg, #1b3a6b, #2a558f); }

  /* ---------- Process ---------- */
  .process {
    background: var(--paper);
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
  }
  .process-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
    position: relative;
  }
  .step .step-num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--red);
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 10px;
  }
  .step .step-num::after {
    content: ""; flex: 1; height: 1px; background: var(--gray-300);
  }
  .step h5 {
    margin: 0 0 8px;
    font-size: 19px;
    color: var(--navy-800);
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .step p { margin: 0; color: var(--gray-700); font-size: 14px; line-height: 1.55; }

  /* ---------- Testimonial ---------- */
  .testimonial {
    background: #fff;
  }
  .quote-card {
    background: var(--paper);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 56px 56px 44px;
    display: grid; grid-template-columns: 1fr 280px; gap: 50px; align-items: end;
  }
  .quote-card .mark {
    font-family: var(--font-mono);
    color: var(--red);
    font-size: 13px;
    letter-spacing: 0.14em;
    margin-bottom: 24px;
  }
  .quote-card blockquote {
    margin: 0;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--navy-800);
    font-weight: 400;
  }
  .quote-card .who {
    text-align: left;
    border-left: 1px solid var(--gray-300);
    padding-left: 22px;
  }
  .quote-card .who .name { font-weight: 500; color: var(--navy-800); font-size: 15px; }
  .quote-card .who .role { color: var(--gray-700); font-size: 13.5px; margin-top: 4px; }
  .quote-card .who .co {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--gray-500);
    text-transform: uppercase;
    margin-top: 14px;
  }

  .mini-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
  .mini-quote { background: var(--paper); border: 1px solid var(--gray-200); padding: 28px; }
  .mini-quote .stars { color: var(--red); font-size: 13px; letter-spacing: 1px; margin-bottom: 14px; }
  .mini-quote blockquote { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--navy-800); font-style: normal; font-weight: 400; }
  .mini-quote .who .name { font-weight: 500; color: var(--navy-800); font-size: 14px; }
  .mini-quote .who .role { color: var(--gray-700); font-size: 12.5px; margin-top: 3px; }
  @media (max-width: 860px) { .mini-quotes { grid-template-columns: 1fr; } }

  .clients-strip {
    margin-top: 60px;
    padding-top: 36px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 56px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .clients-strip .lbl {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-500);
  }
  .client-logo {
    color: var(--gray-500);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    opacity: 0.75;
  }

  /* ---------- CTA ---------- */
  .cta {
    background: var(--navy-900);
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  .cta::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(70% 100% at 100% 0%, rgba(12,122,147,0.18), transparent 60%),
                radial-gradient(60% 80% at 0% 100%, rgba(80,150,216,0.16), transparent 60%);
    pointer-events: none;
  }
  .cta-inner {
    position: relative;
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: center;
  }
  .cta-inner.cta-split { grid-template-columns: 1.15fr 1fr; gap: 72px; max-width: none; }
  .cta-split .cta-copy p { max-width: 46ch; }
  @media (max-width: 900px) { .cta-inner.cta-split { grid-template-columns: 1fr; gap: 32px; } }
  .cta h2 {
    font-size: clamp(34px, 4.2vw, 60px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    font-weight: 600;
    color: #fff;
  }
  .cta p { color: #cfd6e3; max-width: 48ch; margin: 0 0 32px; font-size: 17px; }
  .cta .form-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    padding: 28px;
    backdrop-filter: blur(6px);
  }
  .form-card label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9fb6d8;
    margin-bottom: 8px;
  }
  .form-card input, .form-card select, .form-card textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 8px 0 12px;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    margin-bottom: 22px;
    outline: none;
    transition: border-color 140ms ease;
  }
  .form-card input::placeholder, .form-card textarea::placeholder { color: rgba(255,255,255,0.35); }
  .form-card input:focus, .form-card select:focus, .form-card textarea:focus { border-bottom-color: #fff; }
  .form-card textarea { font-family: inherit; resize: vertical; min-height: 76px; }
  .form-card .req { color: #74d2e6; }
  .form-card .form-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #9fb6d8; margin: 14px 0 0; }
  .form-card select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #9fb6d8 50%), linear-gradient(135deg, #9fb6d8 50%, transparent 50%); background-position: calc(100% - 14px) 18px, calc(100% - 9px) 18px; background-size: 5px 5px; background-repeat: no-repeat; }
  .form-card select option { color: #0e1623; }
  .form-card .btn { width: 100%; justify-content: center; }

  /* ---------- Footer ---------- */
  footer {
    background: #04132a;
    color: #cfd6e3;
    padding: 70px 0 28px;
    font-size: 14px;
  }
  .foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 56px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .foot-grid .brand .foot-logo {
    display: inline-block;
    background: #fff;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 22px;
  }
  .foot-grid .brand .foot-logo img {
    height: 40px;
    width: auto;
    display: block;
  }
  .foot-grid .brand p { margin: 0 0 24px; color: #9fb6d8; font-size: 13.5px; line-height: 1.6; max-width: 36ch; }
  .foot-grid .brand .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: #6f86a8; }
  .foot-grid .brand .foot-contact { margin-top: 8px; }
  .foot-grid .brand .foot-contact a { color: #9fb6d8; transition: color 120ms ease; }
  .foot-grid .brand .foot-contact a:hover { color: #fff; }

  /* ---------- Page hero (interior pages) ---------- */
  .page-hero {
    position: relative;
    background: linear-gradient(165deg, var(--navy-900) 0%, var(--navy-700) 100%);
    color: #fff;
    padding: clamp(120px, 16vh, 180px) 0 clamp(70px, 9vh, 110px);
    overflow: hidden;
  }
  .page-hero::after {
    content: "";
    position: absolute;
    right: -10%;
    top: -30%;
    width: 70%;
    height: 160%;
    background: radial-gradient(closest-side, rgba(116,210,230,0.18), transparent 70%);
    pointer-events: none;
  }
  .page-hero .container { position: relative; z-index: 2; }
  .page-hero .hero-map{position:absolute;inset:0 0 0 auto;width:min(78%,1400px);z-index:1;pointer-events:none;background:url("hero-team-map.webp") 70% 45%/cover no-repeat;mix-blend-mode:luminosity;opacity:.5;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 55%),linear-gradient(180deg,transparent 0%,#000 22%,#000 72%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 55%),linear-gradient(180deg,transparent 0%,#000 22%,#000 72%,transparent 100%);mask-composite:intersect}
  .page-hero .hero-map-tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--navy-900) 0%,rgba(5,35,56,.55) 38%,rgba(15,77,114,.12) 100%)}
  @media (max-width:720px){.page-hero .hero-map{width:100%;opacity:.3}}
  .page-hero.hero-water .hero-photo{position:absolute;inset:0 0 0 auto;width:min(72%,1300px);z-index:1;pointer-events:none;background:url("hero-water-kitchen.webp") 62% 50%/cover no-repeat;filter:saturate(.75) brightness(.8);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 30%,#000 62%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 30%,#000 62%)}
  .page-hero.hero-water .hero-photo-tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--navy-900) 0%,var(--navy-900) 26%,rgba(10,58,89,.45) 46%,rgba(15,77,114,.08) 70%),linear-gradient(165deg,rgba(5,35,56,.35) 0%,transparent 40%)}
  @media (max-width:720px){.page-hero.hero-water .hero-photo{width:100%;opacity:.35}}
  .page-hero.hero-connect .hero-photo{position:absolute;inset:0 0 0 auto;width:min(80%,1500px);z-index:1;pointer-events:none;background:url("hero-connect-desk.webp") 68% 50%/cover no-repeat;filter:saturate(.85) brightness(.85);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.2) 26%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.2) 26%,#000 55%)}
  .page-hero.hero-connect .hero-photo-tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--navy-900) 0%,var(--navy-900) 24%,rgba(10,58,89,.4) 42%,rgba(15,77,114,.05) 68%)}
  @media (max-width:720px){.page-hero.hero-connect .hero-photo{width:100%;opacity:.35}}
  .page-hero.hero-copy .hero-photo{position:absolute;inset:0;z-index:1;pointer-events:none;background:url("hero-copy-printer.webp") 68% 50%/cover no-repeat;filter:saturate(.9);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 30%,#000 58%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 30%,#000 58%)}
  .page-hero.hero-copy .hero-photo-tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--navy-900) 0%,var(--navy-900) 22%,rgba(10,58,89,.35) 40%,rgba(15,77,114,.05) 65%)}
  @media (max-width:720px){.page-hero.hero-copy .hero-photo{opacity:.4}}
  .page-hero.hero-insights .hero-photo{position:absolute;inset:0;z-index:1;pointer-events:none;background:url("hero-insights-office.webp") 62% 50%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 28%,#000 52%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 28%,#000 52%)}
  .page-hero.hero-insights .hero-photo-tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--navy-900) 0%,var(--navy-900) 18%,rgba(10,58,89,.3) 36%,rgba(15,77,114,.03) 60%)}
  @media (max-width:720px){.page-hero.hero-insights .hero-photo{opacity:.4}}
  .page-hero.hero-contact .hero-photo{position:absolute;inset:0;z-index:1;pointer-events:none;background:url("hero-contact-meeting.webp") 60% 50%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 26%,#000 50%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 26%,#000 50%)}
  .page-hero.hero-contact .hero-photo-tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--navy-900) 0%,var(--navy-900) 16%,rgba(10,58,89,.28) 32%,rgba(15,77,114,.03) 55%)}
  @media (max-width:720px){.page-hero.hero-contact .hero-photo{opacity:.4}}
  .page-hero .crumbs {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
    text-transform: uppercase; color: #6f86a8; margin-bottom: 26px;
  }
  .page-hero .crumbs a { color: #9fb6d8; }
  .page-hero .crumbs a:hover { color: #fff; }
  .page-hero .crumbs .sep { margin: 0 8px; opacity: 0.5; }
  .page-hero .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--tide-soft); margin-bottom: 22px;
  }
  .page-hero .eyebrow .bar { width: 26px; height: 2px; background: var(--tide-soft); display: inline-block; }
  .page-hero h1 {
    font-size: clamp(40px, 6vw, 80px); line-height: 1.03; letter-spacing: -0.02em;
    margin: 0 0 26px; font-weight: 600; max-width: 16ch; text-wrap: balance;
  }
  .page-hero h1 em { font-style: normal; color: var(--tide-soft); }
  .page-hero .lead { font-size: clamp(17px, 1.4vw, 21px); color: #c6d6e6; max-width: 58ch; margin: 0; line-height: 1.6; }
  @media (max-width: 720px) {
    .page-hero { padding: 120px 0 64px; }
  }
  .foot-col h6 {
    margin: 0 0 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6f86a8;
    font-weight: 500;
  }
  .foot-col ul { list-style: none; padding: 0; margin: 0; }
  .foot-col li { margin-bottom: 10px; }
  .foot-col a { color: #cfd6e3; transition: color 120ms ease; }
  .foot-col a:hover { color: #fff; }

  .foot-bottom {
    margin-top: 24px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.08em; color: #6f86a8;
    flex-wrap: wrap; gap: 16px;
  }
  .foot-bottom .links { display: flex; gap: 22px; }


  /* ---------- Flip cards (Office Technologies) ---------- */
  .flip-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .flipcard { display: block; perspective: 1200px; min-height: 0; height: 342px; background: none; border: 0; padding: 0; }
  .flipcard .flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 620ms cubic-bezier(.2,.8,.25,1); }
  .flipcard:hover .flip-inner, .flipcard:focus-visible .flip-inner { transform: rotateY(180deg); }
  .flip-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; padding: 22px; border-radius: 12px; border: 1px solid var(--gray-200); background: #fff; }
  .flip-face .card-media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.05); opacity: .16; }
  .flip-face .media-fade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(165deg, rgba(247,239,225,0) 0%, rgba(247,239,225,.45) 30%, rgba(247,239,225,.95) 62%, var(--paper) 82%); }
  .flip-face > :not(.card-media):not(.media-fade) { position: relative; z-index: 1; }
  .flip-back .badge { color: var(--tide-soft); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.16); }
  .flip-back .lines li::before { background: var(--tide-soft); }
  /* Front face: real product photo band + copy below */
  .flip-front { padding: 0; }
  .flip-front .card-photo { position: relative; flex: none; height: 152px; background-size: cover; background-position: center; border-radius: 11px 11px 0 0; overflow: hidden; }
  .flip-front .photo-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,35,56,.10) 0%, rgba(5,35,56,.42) 100%); }
  .flipcard.store .flip-front .card-photo { background-size: 118%; background-position: 50% 45%; }
  .flipcard.store .flip-front .photo-tint { background: linear-gradient(180deg, rgba(5,35,56,.04) 0%, rgba(5,35,56,.26) 100%); }
  .flip-front .card-photo .swatch { position: absolute; left: 14px; bottom: 14px; height: 36px; width: 36px; margin: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(5,35,56,.78); border: 1px solid rgba(255,255,255,.22); }
  .flip-front .card-photo .swatch svg { width: 19px; height: 19px; }
  .flip-front .card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; }
  .flip-front { opacity: 1; transition: opacity 200ms 200ms; }
  .flip-back { transform: rotateY(180deg); background: var(--navy-900); border-color: rgba(255,255,255,.1); opacity: 0; transition: opacity 200ms 200ms; padding: 24px 22px 22px; }
  .flip-back .card-media { opacity: .34; filter: grayscale(.4) contrast(1.05); }
  .flip-back .media-fade { background: linear-gradient(165deg, rgba(5,35,56,.6) 0%, rgba(5,35,56,.88) 45%, rgba(5,35,56,.96) 100%); }
  .flipcard:hover .flip-front, .flipcard:focus-visible .flip-front { opacity: 0; }
  .flipcard:hover .flip-back, .flipcard:focus-visible .flip-back { opacity: 1; }
  .flipcard:hover .flip-face { border-color: var(--navy-500); box-shadow: 0 18px 40px -22px rgba(11,37,69,0.28); }
  .flip-face .swatch { position: relative; height: 66px; border-radius: 8px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--navy-800), var(--navy-500)); }
  .flip-face .swatch svg { width: 26px; height: 26px; position: relative; z-index: 1; }
  .flipcard.connected .flip-face .swatch { background: linear-gradient(135deg, #0a2236, #1f6f8b); }
  .flipcard.water .flip-face .swatch { background: linear-gradient(135deg, #0a2236, #2a93ad); }
  .flipcard.store .flip-face .swatch { background: linear-gradient(135deg, #0a2236, #2b5f7a); }
  .flip-face .badge { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-500); margin-bottom: 10px; }
  .flip-face h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--navy-800); line-height: 1.25; min-height: 0; }
  .flip-face p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--gray-700); }
  .flip-back .lines { list-style: none; margin: 0 0 auto; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.92); }
  .flip-back .lines li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
  .flip-back .lines li::before { content: ""; width: 5px; height: 5px; flex: none; margin-top: 6px; background: var(--tide); border-radius: 50%; }
  .flip-back .more { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16); font-size: 13px; font-weight: 600; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  .flip-back .more .arr { color: var(--tide-soft); }
  @media (prefers-reduced-motion: reduce) { .flipcard .flip-inner { transition: none; } }
  @media (max-width: 1120px) { .flipcard { height: 400px; } }
  @media (max-width: 900px) { .flip-grid { gap: 10px; } .flipcard { height: 392px; } .flip-back { padding: 16px; } .flip-front .card-photo { height: 132px; } .flip-front .card-body { padding: 15px 16px 16px; } .flip-face h3 { font-size: 16px; } }
  @media (max-width: 620px) { .flip-grid { grid-template-columns: repeat(2, 1fr); } .flipcard { height: 368px; } }

  /* ---------- Responsive ---------- */
  @media (max-width: 1024px) {
    .product-grid:not(.flip-grid) { grid-template-columns: repeat(2, 1fr); }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .industries-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .quote-card { grid-template-columns: 1fr; gap: 30px; padding: 40px; }
    .cta-inner { grid-template-columns: 1fr; gap: 40px; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .section-head { grid-template-columns: 1fr; gap: 20px; }
    .hero-meta .container { grid-template-columns: repeat(2, 1fr); }
    .meta-cell:nth-child(2n+1) { border-left: none; padding-left: 0; }
    .meta-cell:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.10); }
  }
  @media (max-width: 720px) {
    section { padding: 80px 0; }
    .product-grid:not(.flip-grid) { grid-template-columns: 1fr; }
    .nav-menu { gap: 2px; }
    .nav-menu .nav-link.hide-md { display: none; }
    .nav-portals { display: none; }
    .nav-menu .nav-link:not(.cta-link) { display: none; }
    .utility .left .pipe { display: none; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .industries-grid { grid-template-columns: repeat(2, 1fr); }
    .services-grid { grid-template-columns: 1fr; }
    .process-grid { grid-template-columns: 1fr; }
    .hero-inner { padding: 64px 0 90px; min-height: 540px; }
  }

  /* Images (formerly <image-slot>): plain <img> in a framed box. */
  .islot { display: inline-block; position: relative; vertical-align: top; width: 240px; height: 160px; overflow: hidden; border-radius: 12px; background: rgba(0,0,0,.04); }
  .islot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .islot[data-fit="contain"] > img { object-fit: contain; }
  /* ---------- Meet the team ---------- */
  .people { background: var(--paper); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
  .team-photo { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--gray-200); background: var(--gray-100); }
  .team-photo image-slot { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; }
  .team-photo .islot { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; }
  .team-photo image-slot::part(image) { transform: translate(-50%,-50%) scale(1.4); transform-origin: 50% 72%; }
  .team-photo .islot > img { inset: auto; left: 50%; top: 50%; width: 100%; height: auto; max-width: none; transform: translate(-50%,-50%) scale(1.4); transform-origin: 50% 72%; }
  @media (max-width: 1200px) { .team-photo image-slot { position: static !important; width: 100% !important; height: auto !important; left: auto !important; top: auto !important; } }
  @media (max-width: 1200px) { .team-photo .islot { width: 100%; height: auto; } }
  @media (max-width: 900px) { .team-photo image-slot { aspect-ratio: 4 / 3 !important; } .team-photo image-slot::part(image) { transform: translate(-50%,-50%) scale(1) !important; object-fit: contain; } }
  @media (max-width: 900px) { .team-photo .islot { aspect-ratio: 4 / 3 !important; } .team-photo .islot > img { transform: translate(-50%,-50%) scale(1) !important; width: 100% !important; height: 100% !important; inset: auto !important; left: 50% !important; top: 50% !important; object-fit: contain; } }
  .team-photo .cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); padding: 12px 16px; background: #fff; border-top: 1px solid var(--gray-200); }
  .values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
  .value { background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; padding: 24px; }
  .value .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--tide); margin-bottom: 12px; }
  .value h4 { margin: 0 0 8px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--navy-800); }
  .value p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--gray-700); text-wrap: pretty; }

  /* ---------- Management team / sales reps ---------- */
  .mgmt { background: var(--paper); }
  .reps { background: #fff; border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
  .team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: stretch; }
  .team-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
  .team-card image-slot { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; flex: none; }
  .team-card .islot { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; flex: none; }
  .tc-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
  .tc-body h4 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--navy-800); }
  .tc-role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tide); margin-bottom: 6px; }
  .tc-body p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--gray-700); text-wrap: pretty; flex: 1; }
  .tc-link { margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--navy-800); display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
  .tc-link .arr { color: var(--tide); transition: transform 140ms ease; }
  .tc-link:hover .arr { transform: translateX(3px); }
  .rep-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: stretch; }
  .rep-card { background: var(--paper); border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
  .rep-card image-slot { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; flex: none; }
  .rep-card .islot { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; flex: none; }
  .rc-body { padding: 16px 18px 20px; display: flex; flex-direction: column; height: 100%; }
  .rc-quote { margin: 0 0 14px; font-size: 12.5px; line-height: 1.55; color: var(--gray-700); font-style: italic; text-wrap: pretty; flex: 1; }
  .rc-meta { margin-bottom: 10px; }
  .rc-name { font-size: 15px; font-weight: 600; color: var(--navy-800); letter-spacing: -0.01em; }
  .rc-region { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tide); margin-top: 2px; }
  @media (max-width: 1120px) { .team-grid, .rep-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 700px) { .team-grid, .rep-grid { grid-template-columns: repeat(2, 1fr); } }

  /* ---------- Industries (visual tiles) ---------- */
  .ind-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
  .ind-tile { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--gray-200); background: var(--gray-100); }
  .ind-tile image-slot { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; }
  .ind-tile .islot { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; }
  .ind-tile .ind-stamp { position: absolute; top: 10px; left: 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--gray-500); }
  .ind-tile .ind-name { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 14px 12px; font-size: 15px; font-weight: 500; color: var(--navy-900); background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.94) 45%); }
  .ind-tile image-slot[data-filled] ~ .ind-name { color: #fff; background: linear-gradient(180deg, rgba(6,26,53,0), rgba(6,26,53,0.78) 60%); }
  .ind-tile .islot ~ .ind-name { color: #fff; background: linear-gradient(180deg, rgba(6,26,53,0), rgba(6,26,53,0.78) 60%); }
  .ind-tile image-slot[data-filled] ~ .ind-stamp { color: rgba(255,255,255,0.75); }
  .ind-tile .islot ~ .ind-stamp { color: rgba(255,255,255,0.75); }

  /* ---------- Community logo wall ---------- */
  .logo-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
  .logo-cell { border: 1px solid var(--gray-200); border-radius: 10px; background: #fff; padding: 20px; display: flex; align-items: center; justify-content: center; min-height: 150px; }
  .logo-cell image-slot { display: block; width: 100%; height: 100%; }
  .logo-cell .islot { display: block; width: 100%; height: 100%; }


  /* ---------- Careers ---------- */
  .job-list { display: flex; flex-direction: column; gap: 14px; }
  .job { display: flex; align-items: center; justify-content: space-between; gap: 28px; background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; padding: 26px 28px; }
  .job:hover { border-color: var(--navy-500); }
  .job-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tide); margin-bottom: 10px; }
  .job h3 { margin: 0 0 8px; font-size: 24px; font-weight: 500; letter-spacing: -0.015em; color: var(--navy-800); }
  .job p { margin: 0 0 14px; max-width: 70ch; font-size: 14px; line-height: 1.6; color: var(--gray-700); text-wrap: pretty; }
  .job-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
  .job-meta li { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--gray-500); border: 1px solid var(--gray-300); border-radius: 4px; padding: 4px 8px; }
  .job .btn { flex: none; }
  .job-open { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border: 1px dashed var(--gray-300); border-radius: 10px; padding: 24px 28px; background: var(--paper); }
  .job-open h4 { margin: 0 0 6px; font-size: 18px; font-weight: 500; color: var(--navy-800); }
  .job-open p { margin: 0; font-size: 13.5px; color: var(--gray-700); max-width: 62ch; }

  /* ---------- Division pages: category cards ---------- */
  .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .cat { background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
  .cat .cat-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--gray-100); }
  .cat .cat-media image-slot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; z-index: 1; }
  .cat .cat-media .islot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; z-index: 1; }
  .cat .cat-media image-slot::part(frame) { background: none; border-radius: 0; }
  .cat .cat-media .islot { background: none; border-radius: 0; }
  .cat .cat-media image-slot::part(ring) { border: none; }
  .cat .cat-media image-slot::part(empty) { opacity: 0; transition: opacity .12s; }
  .cat .cat-media image-slot:hover::part(empty) { opacity: 1; }
  .cat .cat-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 18px; background-image: repeating-linear-gradient(135deg, rgba(10,58,89,0.07) 0 2px, rgba(10,58,89,0) 2px 9px); }
  .cat .cat-media image-slot[data-filled] ~ .cat-ph { display: none; }
  .cat .cat-media .islot ~ .cat-ph { display: none; }
  .cat .cat-ph .cat-ph-mark { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; color: #fff; background: var(--navy-800); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  .cat .cat-ph .cat-ph-cap { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-700); }
  .cat .cat-media.t02 { background: #eef1ee; }
  .cat .cat-media.t03 { background: #f1eeea; }
  .cat .cat-media.t04 { background: #eceff3; }
  .cat .cat-media.t05 { background: #f0f0ec; }
  .cat .cat-body { padding: 22px 24px 24px; }
  .cat .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--tide); margin-bottom: 10px; }
  .cat h4 { margin: 0 0 8px; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: var(--navy-800); }
  .cat p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--gray-700); text-wrap: pretty; }
  .cat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .cat ul li { font-size: 13px; color: var(--gray-700); padding-left: 14px; position: relative; }
  .cat ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--tide); }

  /* ---------- Brand wall ---------- */
  .brand-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 0; }
  .brand-cell { padding: 26px 26px 26px 0; display: flex; flex-direction: column; gap: 16px; min-height: 120px; border-top: 1px solid rgba(255,255,255,0.16); }
  .why.brands-light { background: #fff; color: var(--gray-900); }
  .why.brands-light .section-title, .why.brands-light h2 { color: var(--navy-800); }
  .why.brands-light .section-lede { color: var(--gray-700); }
  .why.brands-light .section-eyebrow { color: var(--gray-500); }
  .why.brands-light .section-eyebrow .bar { background: var(--tide); }
  .why.brands-light .brand-cell { border-top: 1px solid var(--gray-200); }
  .why.brands-light .brand-cell .bname { color: var(--navy-800); }
  .why.brands-light .brand-cell .brole { color: var(--gray-500); }
  .why.brands-light .pill { border-color: var(--gray-300); color: var(--gray-700); background: transparent; }
  .brand-lock { display: flex; align-items: center; min-height: 58px; }
  .brand-lock .blogo-img { display: block; width: auto; max-width: 100%; height: 38px; object-fit: contain; object-position: 0 50%; }
  .brand-lock.b-hp .blogo-img { height: 54px; }
  .brand-lock.b-fujitsu .blogo-img { height: 46px; }
  .brand-lock.b-kyocera .blogo-img { height: 32px; }
  .brand-lock.b-ricoh .blogo-img { height: 30px; }
  .brand-lock.b-sato .blogo-img { height: 30px; }
  .brand-lock.b-zebra .blogo-img { height: 34px; }
  .brand-lock.b-papercut .blogo-img { height: 36px; }
  .brand-lock.b-goldfax .blogo-img { height: 34px; }
  .brand-cell .bname { font-size: 27px; line-height: 1; font-weight: 600; letter-spacing: -0.012em; color: #fff; }
  .brand-cell .bname.caps { letter-spacing: 0.025em; }
  .brand-cell .brole { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.68); line-height: 1.55; margin-top: auto; }

  /* ---------- Split feature block ---------- */
  .split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
  .split image-slot { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--gray-200); }
  .split .islot { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--gray-200); }
  .split h3 { margin: 0 0 16px; font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--navy-900); }
  .split p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.65; color: var(--gray-700); max-width: 54ch; text-wrap: pretty; }

  /* ---------- Dark-section overrides ---------- */
  .why .split h3 { color: #fff; }
  .why .split p { color: #d3dfec; }
  .why .split image-slot { background: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.22); }
  .why .split .islot { background: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.22); }
  .why .step .step-num { color: var(--tide-soft); }
  .why .step .step-num::after { background: rgba(255,255,255,0.22); }
  .why .step h5 { color: #fff; }
  .why .step p { color: #d3dfec; }

  /* ---------- Pills ---------- */
  .pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .pill { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-700); border: 1px solid var(--gray-300); border-radius: 999px; padding: 7px 13px; background: #fff; }

  /* ---------- Outbound link card ---------- */
  .link-card { display: flex; align-items: center; justify-content: space-between; gap: 32px; background: linear-gradient(150deg, var(--navy-900), var(--navy-700)); border-radius: 12px; padding: 40px 44px; color: #fff; }
  .link-card h3 { margin: 0 0 10px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
  .link-card p { margin: 0; color: #c6d6e6; font-size: 15px; line-height: 1.6; max-width: 52ch; }
  .link-card .url { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tide-soft); margin-bottom: 16px; }

  @media (max-width: 1024px) {
    .values { grid-template-columns: repeat(2, 1fr); }
    .ind-grid { grid-template-columns: repeat(3, 1fr); }
    .logo-wall { grid-template-columns: repeat(3, 1fr); }
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .split { grid-template-columns: 1fr; gap: 28px; }
    .link-card { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px; }
  }
  @media (max-width: 720px) {
    .values { grid-template-columns: 1fr; }
    .ind-grid { grid-template-columns: repeat(2, 1fr); }
    .logo-wall { grid-template-columns: repeat(2, 1fr); }
    .job, .job-open { flex-direction: column; align-items: flex-start; gap: 18px; }
    .cat-grid { grid-template-columns: 1fr; }
    .brand-wall { grid-template-columns: repeat(2, 1fr); }
  }

  /* ---------- Legal / policy body ---------- */
  .legal { padding: 88px 0 100px; }
  .legal .container { max-width: 74ch; }
  .legal .updated { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 40px; }
  .legal h2 { font-size: 15px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--tide-dark); margin: 44px 0 14px; }
  .legal h2:first-of-type { margin-top: 0; }
  .legal p { font-size: 15.5px; line-height: 1.7; color: var(--gray-700); margin: 0 0 18px; text-wrap: pretty; }
  .legal ul { margin: 0 0 18px; padding-left: 22px; }
  .legal li { font-size: 15.5px; line-height: 1.7; color: var(--gray-700); margin-bottom: 6px; }
  .legal a { color: var(--tide-dark); }
  .legal a:hover { color: var(--navy-900); }
  .legal code { font-family: var(--font-mono); font-size: 0.88em; background: var(--gray-100); padding: 1px 5px; border-radius: 4px; }


  /* ---------- Mobile / tablet navigation + polish ---------- */
  .nav-toggle{display:none;width:46px;height:46px;border-radius:10px;align-items:center;justify-content:center;flex-direction:column;gap:5px;color:var(--navy-800);-webkit-tap-highlight-color:transparent}
  .nav-toggle span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform 200ms ease,opacity 150ms ease}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  @media (max-width: 980px) {
    .nav-toggle{display:inline-flex}
    .nav .container{height:64px}
    .nav-logo img{height:44px}
    .nav-menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:12px var(--gutter) 22px;background:#fff;border-bottom:1px solid var(--gray-200);box-shadow:0 24px 40px -20px rgba(11,37,69,.3);max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto}
    body.nav-open .nav-menu{display:flex}
    .nav .nav-menu .nav-link:not(.cta-link){display:flex;justify-content:space-between;min-height:48px;padding:12px 10px;font-size:16px}
    .nav-link svg{display:none}
    .mega-wrap{position:static}
    .mega,.mega-wrap:hover .mega,.mega-wrap.open .mega,.mega-wrap:focus-within .mega{position:static;transform:none;opacity:1;pointer-events:auto;width:auto;display:flex;flex-direction:column;gap:2px;padding:0 0 8px 12px;border:none;border-left:2px solid var(--gray-200);border-radius:0;box-shadow:none;background:none;margin:0 0 6px 10px}
    .mega::before{display:none}
    .mega-card,.mega-card.store{display:block;padding:11px 12px;min-height:44px;border-radius:8px;background:none;border:none}
    .mega-card .swatch,.mega-card p{display:none}
    .mega-card .badge{margin-bottom:2px}
    .mega-card h4{font-size:16px;margin:0}
    .mega-wrap.mini .mini-mega{width:auto;min-width:0;padding:0 0 8px 12px}
    .mega-wrap.mini .mini-mega .portal-link{min-height:44px;display:flex;align-items:center;font-size:15px}
    .nav-cta.cta-link{justify-content:center;margin-top:10px;min-height:48px}
  }
  @media (max-width: 720px) {
    .utility .container{height:auto;min-height:34px;padding-top:6px;padding-bottom:6px;gap:12px}
    .utility .left{gap:0;font-size:10.5px;line-height:1.35}
    .utility .right{flex:none}
    .hero-inner{padding-left:0;min-height:0}
    h1.hero-h{max-width:none}
    .hero-ctas .btn,.btn{min-height:46px}
    .hero-ctas{flex-direction:column;align-items:stretch}
    .hero-ctas .btn{justify-content:center}
    .hero-meta .container{grid-template-columns:1fr 1fr}
    .meta-cell{padding:16px 14px}
    .meta-cell .v{font-size:18px}
    .section-head{margin-bottom:36px}
    .section-lede{font-size:16.5px}
    .quote-card{padding:28px 22px}
    .quote-card .who{border-left:none;padding-left:0;border-top:1px solid var(--gray-300);padding-top:18px}
    .link-card,.newsletter-card{padding:26px 22px}
    .service{padding:26px 22px}
    .stat{padding:26px 16px 0}
    .stats-grid .stat:nth-child(2n){border-right:none}
    .clients-strip{gap:20px 28px}
    .h-panel-product .pp-visual{aspect-ratio:16/10}
    .form-card input,.form-card select,.form-card textarea,.newsletter-form input{font-size:16px}
    .newsletter-form{flex-direction:column}
    .cta .form-card{padding:22px 18px}
    .page-hero .crumbs{font-size:11px}
    .foot-bottom .links{gap:18px}
  }
  @media (max-width: 560px) {
    .foot-grid{grid-template-columns:1fr;gap:32px}
    footer{padding-top:52px}
    .brand-wall{grid-template-columns:1fr 1fr}
    .team-grid,.rep-grid{gap:12px}
    .tc-body,.rc-body{padding-left:14px;padding-right:14px}
    .logo-cell{min-height:110px;padding:14px}
    .legal{padding:56px 0 70px}
  }
  @media (max-width: 420px) {
    .flip-grid{grid-template-columns:1fr}
    .flipcard{height:auto;min-height:0}
    .flipcard .flip-inner{height:auto;transform:none!important}
    .flip-face{position:relative;inset:auto}
    .flip-back{display:none}
    .flip-front{opacity:1!important}
    .flip-front .card-photo{height:150px}
  }
  @media (hover: none) {
    .flipcard:hover .flip-inner{transform:none}
    .flipcard:hover .flip-front{opacity:1}
    .flipcard:hover .flip-back{opacity:0}
  }
  .nav-toggle:focus-visible,.nav-link:focus-visible{outline:2px solid var(--tide);outline-offset:2px}

  /* ---------- Form submission states (assets/forms.js) ---------- */
  .cc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
  .form-status { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5; margin: 14px 0 0; color: #9fb6d8; }
  .form-status:empty { display: none; }
  .form-status.is-error { color: #f0784a; }
  .contact-form .form-status { color: var(--gray-700); }
  .contact-form .form-status.is-error { color: #c4441a; }
  .cc-turnstile:not(:empty) { margin: 0 0 18px; }
  form[data-form] button[disabled] { cursor: default; opacity: 0.9; }

  /* ---------- Download Center: manufacturer tiles ---------- */
  .dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .dl-card { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 220px; padding: 36px 32px 28px; background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; text-decoration: none; color: var(--navy-800); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
  .dl-card:hover, .dl-card:focus-visible { border-color: var(--tide); box-shadow: 0 14px 34px rgba(5,35,56,0.10); transform: translateY(-2px); outline: none; }
  .dl-card:focus-visible { box-shadow: 0 0 0 3px rgba(20,133,184,0.35); }
  /* One identical box per logo; object-fit keeps each logo's proportions (no stretching). */
  .dl-logo { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 84px; }
  .dl-logo .blogo-img { display: block; width: 100%; max-width: 220px; height: 64px; object-fit: contain; object-position: center; }
  .dl-go { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--gray-200); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-700); }
  .dl-go .arr { color: var(--tide); font-size: 16px; transition: transform 160ms ease; }
  .dl-card:hover .dl-go .arr { transform: translate(2px, -2px); }
  @media (max-width: 900px) { .dl-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .dl-grid { grid-template-columns: 1fr; gap: 16px; } .dl-card { min-height: 0; padding: 28px 24px 22px; } }
  @media (prefers-reduced-motion: reduce) { .dl-card, .dl-go .arr { transition: none; } .dl-card:hover { transform: none; } }

  /* ---------- Mobile refinements (touch targets, readable text, no sideways scroll) ---------- */
  html { overflow-x: clip; }
  @media (max-width: 720px) {
    /* The hero kept no side gutter on phones: text touched the screen edge. */
    .hero-inner { padding-left: var(--gutter); padding-right: var(--gutter); min-height: 0; }
    /* 16px+ form text stops iOS from zooming the page when a field is focused. */
    input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
    /* Small labels: keep them legible. */
    .badge, .tag, .k, .step-num, h6, .req, .form-note, .meta, .lbl, .co, .crumbs, .crumbs a, .crumbs .sep, .utility .left,
    .foot-col h6 { font-size: 12px; }
    /* Tap targets of at least ~44px for plain text links. */
    .utility .right a { display: inline-block; padding: 12px 0; }
    .crumbs a { display: inline-block; padding: 12px 4px 12px 0; }
    .foot-bottom .links { display: flex; flex-wrap: wrap; gap: 0 6px; }
    .foot-bottom .links a { display: inline-block; padding: 13px 8px 13px 0; }
    .foot-bottom a[href*="santabarbaraai"] { display: inline-block; padding: 8px 0; }
    .tc-link, .contact-line a, .legal a[href^="tel:"] { display: inline-block; padding: 12px 0; }
    .foot-col a { display: inline-block; padding: 11px 0; }
    .foot-col li { margin-bottom: 0; }
    .foot-contact a, .big a, .opt a, p a[href^="tel:"] { display: inline-block; padding: 12px 0; }
  }
  /* Connect category cards: the picture fills the card (it stayed a small 240x160 box before). */
  .cat > .islot { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 0; }
  .cat:has(> .islot) { overflow: hidden; }