/* ============================================================
   BRIGHTSTAR IMPACT NETWORK — STYLES

   The BRAND block below is the only place colors are defined.
   Change a value there and it updates everywhere on the page.
   Everything after that block is layout. You can leave it alone.
   ============================================================ */

:root {
  /* ---------- BRAND COLORS — SAFE TO EDIT ---------- */
  --navy:        #374780;   /* logo navy — buttons, links, headings */

  /* THE SECTION BLUE. Every blue band on the page uses this one
     value, alternating with white. Change it here and every blue
     section follows. */
  --navy-deep:   #1A2145;

  /* Kept for accents. No longer used as a section background. */
  --navy-slate:  #2A3566;
  --navy-ink:    #0E1229;
  --green:       #54A257;   /* logo green — the "giving" color */
  --green-lift:  #6DC471;   /* brighter green for dark backgrounds */

  --paper:       #FFFFFF;
  --paper-warm:  #F4F6FB;   /* soft section background */
  --ink:         #131730;   /* body text on light */
  --muted:       #656C8C;   /* secondary text on light */
  --muted-dark:  #9AA2C4;   /* secondary text on dark */
  --line:        rgba(55, 71, 128, .14);
  --line-dark:   rgba(255, 255, 255, .12);

  /* ---------- TYPE ---------- */
  --display: "Archivo", system-ui, sans-serif;
  --body:    "Instrument Sans", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ---------- SPACING ---------- */
  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(48px, 7.5vw, 100px);
  --maxw: 1240px;
  --radius: 18px;
}

/* ============================ BASE ============================ */
* { box-sizing: border-box; }

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

/* Anchor jumps must clear the sticky nav, or the heading you
   clicked lands underneath it. --navh is the nav's height. */
:root { --navh: 62px; }
/* Applies to every section with an id, so a new section never gets
   forgotten and lands under the nav. */
section[id], [id="top"], [id="main"] {
  scroll-margin-top: calc(var(--navh) + 24px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(16px, 1.05vw, 17.5px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff;
  padding: 12px 20px; z-index: 999; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; top: 0; }

:focus-visible {
  outline: 2.5px solid var(--green-lift);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- shared type pieces ---------- */
.eyebrow {
  font-family: inherit;
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--green-lift);
  margin-bottom: 14px;
}
.eyebrow--center { text-align: center; }

.section-h {
  font-size: clamp(34px, 5.2vw, 62px);
  max-width: 17ch;
  margin-bottom: 56px;
}

.lede {
  font-size: clamp(17px, 1.35vw, 20px);
  color: var(--muted-dark);
  max-width: 46ch;
  line-height: 1.62;
}
.lede strong { color: var(--green-lift); font-weight: 600; }
/* "Swipe. Give. Impact." under the eyebrow — same size + color as the
   "The BrightStar Impact Network" strong text in the lede. */
/* Hero: "Process with purpose" and "Swipe. Give. Impact." as one matched
   green pair — same font + size, stacked tightly. */
.hero .eyebrow {
  font-family: inherit;
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--green-lift);
  margin-bottom: 3px;
}
.hero__tagline {
  color: var(--green-lift);
  font-weight: 600;
  font-size: clamp(17px, 1.35vw, 20px);
  margin: 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  background: var(--green);
  color: #fff;
  font-family: var(--body);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), background .22s, box-shadow .22s;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
@media (hover: hover) {
  .btn:hover { background: #479148; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(84,162,87,.28); }
  .btn--ghost:hover { background: rgba(255,255,255,.08); box-shadow: none; }
}
/* On touch there is no hover, and a tapped element can otherwise
   keep its hover state stuck until you tap elsewhere. */
.btn:active { background: #479148; transform: translateY(0); }
.btn--ghost:active { background: rgba(255,255,255,.12); }

.btn--sm { padding: 10px 22px; font-size: 14.5px; }

.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid var(--line-dark);
  box-shadow: none;
}

.btn--full { width: 100%; margin-top: 6px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15.5px;
  color: var(--navy);
  text-decoration: none;
  margin-top: 26px;
}
.link-arrow span { transition: transform .25s cubic-bezier(.2,.8,.3,1); }
.link-arrow:hover span { transform: translateX(6px); }

/* ============================ NAV ============================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
.nav.is-stuck { background: rgba(255,255,255,.95); border-bottom-color: var(--line); }

.nav__in {
  max-width: var(--maxw); margin-inline: auto;
  padding: 13px var(--gutter);
  display: flex; align-items: center; gap: 28px;
}

.nav__brand { flex: 0 0 auto; }
.nav__brand img { height: 34px; width: auto; }

/* Gap tightens as the window narrows, which buys enough room for
   seven tabs on a 1280px laptop before the hamburger takes over. */
.nav__links { display: flex; gap: clamp(15px, 1.7vw, 28px); margin-left: auto; }
.nav__links a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-size: 14.5px; font-weight: 500;
  padding-block: 4px;
  transition: color .2s;
  white-space: nowrap;
}
.nav__links a:hover { color: var(--green); }
/* underline grows from the left as you scroll into each section */
.nav__links a::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  height: 2px; width: 100%;
  background: var(--green);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s cubic-bezier(.2,.8,.3,1);
}
.nav__links a.is-active { color: var(--green); }
.nav__links a.is-active::after { transform: scaleX(1); }

/* Marks the page you're currently on — a different signal from
   is-active, which tracks the section you've scrolled to. */
.nav__links a.is-current { color: var(--green); font-weight: 600; }
.nav__links a.is-current::after { transform: scaleX(1); }
.nav__mobile a.is-current { color: var(--green); font-weight: 700; }

.nav__mobile a.is-active { color: var(--green); }

.nav__toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav__toggle span { display: block; width: 17px; height: 1.5px; background: var(--ink); transition: transform .25s, opacity .2s; }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.2px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.2px) rotate(-45deg); }

/* The call-to-action sits in its own row beneath the tabs. It's
   inside the sticky header, so it stays put while the page scrolls.
   Kept out of the tab row so it survives the hamburger breakpoint —
   this is the one thing that should never scroll away. */
.nav__cta {
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.55);
}
.nav__cta-in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 10px var(--gutter);
  display: flex;
  justify-content: center;
}

.nav__mobile {
  display: flex; flex-direction: column;
  padding: 6px var(--gutter) 22px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.97);
  /* Without a cap, the lower links are unreachable on a short
     screen — a phone held sideways, mainly. dvh accounts for the
     browser's collapsing address bar. */
  max-height: calc(100vh - var(--navh));
  max-height: calc(100dvh - var(--navh));
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Set on <body> while the menu is open so the page can't scroll
   away underneath it. The offset preserves scroll position. */
body.is-menu-open { position: fixed; width: 100%; overflow: hidden; }
/* The [hidden] attribute must beat the display:flex above. */
.nav__mobile[hidden] { display: none; }
.nav__mobile a {
  color: var(--ink); text-decoration: none;
  font-family: var(--display); font-size: 22px; font-weight: 600;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

/* ============================ HERO ============================ */
.hero {
  position: relative;
  background: var(--navy-deep);
  color: #fff;
  padding: clamp(64px, 9vw, 112px) 0 clamp(72px, 9vw, 120px);
  overflow: hidden;
}

.hero__glow {
  position: absolute; inset: -30% -10% auto -10%;
  height: 90%;
  background:
    radial-gradient(52% 60% at 22% 32%, rgba(55,71,128,.62), transparent 68%),
    radial-gradient(40% 52% at 78% 18%, rgba(84,162,87,.26), transparent 70%);
  pointer-events: none;
}

/* Single centered column. The statement that used to sit beside
   this copy now lives under step 4 in "How it works". */
.hero__in {
  position: relative;
  max-width: 940px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(42px, 6.6vw, 88px);
  font-variation-settings: "wdth" 108;
  margin-bottom: 30px;
}

.rotator {
  display: block;
  color: var(--green-lift);
  min-height: 1.05em;
}
.rotator span {
  display: inline-block;
  animation: rotIn .5s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes rotIn {
  from { opacity: 0; transform: translateY(.36em) rotate(1.5deg); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.hero .lede { margin-inline: auto; }
.hero__cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center;
  margin-top: 38px;
}

/* ========================== MARQUEES ==========================
   These are real scroll containers, not CSS animations. A script
   nudges scrollLeft each frame for the auto-scroll, which means a
   visitor can also swipe or drag through them at any time — touch
   gets native momentum, mouse gets click-and-drag. */
.marquee {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;              /* let the browser handle swipes */
  overscroll-behavior-x: contain;   /* don't trigger back-navigation */
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee::-webkit-scrollbar { display: none; }

.marquee__track { display: flex; flex: 0 0 auto; }
.marquee__set   { display: flex; align-items: center; flex: 0 0 auto; }

/* Mouse drag feedback */
.marquee.is-draggable { cursor: grab; }
.marquee.is-dragging  { cursor: grabbing; }
/* While dragging, don't let the pointer select text or open links. */
.marquee.is-dragging * { user-select: none; -webkit-user-select: none; pointer-events: none; }

.marquee-band {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 40px 0 46px;
}
.marquee-band__label {
  text-align: center;
  font-family: inherit; font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 30px;
}
/* Every logo gets an identical box and is fitted inside it. Sizing
   by height alone made wide logos huge and square ones tiny —
   BrightStar is 5:1, Clover is 1.8:1. object-fit keeps them all at
   the same visual weight regardless of shape. */
.marquee-band .marquee__set > * {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: clamp(140px, 14vw, 190px);
  height: clamp(42px, 4.2vw, 54px);
  margin-inline: clamp(12px, 1.8vw, 26px);
}
/* Static one-of-each row (no scrolling). Same logo box, spaced by gap. */
.marquee-band .partners-row {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: clamp(16px, 3vw, 48px);
}
.marquee-band .partners-row > * {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: clamp(140px, 14vw, 190px);
  height: clamp(42px, 4.2vw, 54px);
}
.marquee-band img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: filter .3s, opacity .3s;
}
/* Greyscale-until-hover only where hover exists. Phones have no
   hover, so on touch the logos are simply always in full color
   rather than permanently washed out. */
@media (hover: hover) {
  .marquee-band img { filter: grayscale(1); opacity: .55; }
  .marquee-band a:hover img { filter: none; opacity: 1; }
}

/* =========================== TWO PATHS ===========================
   The "For businesses" / "For organizations" cards. */
.paths { padding: var(--section) 0; }
.paths__h {
  font-size: clamp(30px, 4.4vw, 54px);
  text-align: center;
  max-width: 18ch;
  margin: 0 auto clamp(44px, 5vw, 66px);
}
/* The two cards scroll as a banner. Fixed width so the loop can
   measure cleanly; the set repeats because two cards alone are
   narrower than the container. */
.marquee--paths .marquee__track { align-items: stretch; padding: 6px 0; }
.marquee--paths .marquee__set   { align-items: stretch; }

/* Two audience cards, static and side by side. */
.paths__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
  max-width: 940px;
  margin-inline: auto;
}
@media (max-width: 760px) {
  .paths__grid { grid-template-columns: 1fr; }
}

.path {
  padding: clamp(30px, 3.2vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: box-shadow .4s, border-color .4s;
}
/* In the static grid each card fills its column (the fixed width and
   right margin below were only needed for the old scrolling row). */
.paths__grid .path { width: auto; margin: 0; }
.path--alt { background: var(--paper-warm); border-color: transparent; }

/* On desktop both cards sit at the same height, so clicking a nav
   tab would otherwise look like nothing happened. :target rings the
   card the visitor actually asked for. */
.path:target {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(84,162,87,.16), 0 20px 50px rgba(26,33,69,.12);
  transform: translateY(-3px);
}

.path h2 { font-size: clamp(26px, 2.9vw, 38px); margin-bottom: 18px; }
.path > p { color: var(--muted); }

.ticks { list-style: none; margin: 26px 0 0; padding: 0; }
.ticks li {
  position: relative;
  padding: 11px 0 11px 32px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
}
.ticks li::before {
  content: "";
  position: absolute; left: 4px; top: 19px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

/* text marquee (organization types) */
.orgband {
  background: var(--navy-deep);
  color: #fff;
  padding: 26px 0;
  overflow: hidden;
}
.marquee--text .marquee__set > span {
  display: inline-flex; align-items: center; gap: clamp(28px, 4vw, 52px);
  padding-right: clamp(28px, 4vw, 52px);
  font-family: var(--display);
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 600;
  font-variation-settings: "wdth" 105;
  white-space: nowrap;
}
.marquee--text .dot { color: var(--green-lift); font-size: .6em; }

/* =========================== THE 30% =========================== */
.split {
  background: var(--navy-deep);
  color: #fff;
  padding: var(--section) 0;
  text-align: center;
}
.split__h {
  font-size: clamp(30px, 4.4vw, 54px);
  max-width: 20ch;
  margin: 0 auto 52px;
}

/* ---- the split-flow diagram ---- */
.flow { margin-bottom: clamp(56px, 7vw, 86px); }
.flow__svg { width: 100%; height: auto; display: block; }

/* channels */
.flow__track {
  fill: none;
  stroke: rgba(55,71,128,.20);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.flow__track--give { stroke: rgba(84,162,87,.38); stroke-width: 3.5; }

/* nodes */
.flow__node { fill: var(--navy); }
.flow__node--give { fill: var(--green); }

/* travelling pulses */
.flow__dot { fill: var(--navy); }
.flow__dot--give { fill: var(--green); }

/* labels — sized against the 1000-wide viewBox. The longest label
   is about 223px starting at x=622, so it ends near 845 and has
   roughly 150px of clearance. SVG text can't wrap and won't push
   the viewBox, so it must fit by construction or it gets clipped. */
.flow__label {
  font-family: inherit;
  font-size: 14px;
  letter-spacing: .16em;
  fill: var(--muted);
}
.flow__label--mid { text-anchor: middle; }
.flow__end {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.015em;
  fill: var(--navy);
}
.flow__end--give { fill: var(--green); }
.flow__sub {
  font-family: var(--body);
  font-size: 15px;
  fill: var(--muted);
}

/* phone version — the diagram's labels are illegible below ~700px,
   so it swaps for a stacked list carrying the same information. */
/* On a tablet the section is still wide, so the stacked rows are
   held to a comfortable measure rather than stretching edge to
   edge with a dot marooned on the far left. */
.flow__stack {
  display: none;
  text-align: left;
  max-width: 460px;
  margin-inline: auto;
}
.flow__stack-top {
  font-family: inherit;
  font-size: 11px; letter-spacing: .16em;
  color: var(--muted);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.flow__stack-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.flow__stack-dot {
  flex: 0 0 auto;
  width: 11px; height: 11px; margin-top: 6px;
  border-radius: 50%;
  background: var(--navy);
}
.flow__stack-row--give .flow__stack-dot {
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(84,162,87,.16);
}
.flow__stack-row strong {
  display: block;
  font-family: var(--display);
  font-size: 19px; letter-spacing: -.015em;
  color: #fff;
}
.flow__stack-row--give strong { color: var(--green-lift); }
.flow__stack-row em {
  display: block; font-style: normal;
  font-size: 14.5px; color: var(--muted-dark); margin-top: 3px;
}

/* The diagram's labels are set against a 1000-wide viewBox, so they
   shrink with the container. Below ~900px the sub-labels drop under
   12px, which is too small to read — the stacked version takes over
   from there and carries the same information. */
@media (max-width: 900px) {
  .flow__svg { display: none; }
  .flow__stack { display: block; }
}

.split__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 52px);
  text-align: left;
}
.split__grid h3 {
  font-size: clamp(19px, 1.7vw, 23px);
  margin-bottom: 12px;
}
.split__grid p { color: var(--muted); font-size: 15.5px; }

/* ======================= FAMILY OF SOLUTIONS =======================
   The lightest of the three dark sections, so it separates cleanly
   from the statement above (deepest) and How it works below (mid).
   The old gradient started at #1B2242, which measured identical to
   --navy-deep — that duplicate is what made three sections read as
   one slab. */
.solutions {
  position: relative;
  padding: var(--section) 0 clamp(56px, 7vw, 92px);
  background: var(--paper);
  overflow: hidden;
}

.solutions__head { text-align: center; margin-bottom: clamp(40px, 5vw, 58px); }

.solutions__title {
  font-size: clamp(30px, 4.4vw, 54px);
  color: var(--ink);
  max-width: 18ch;
  margin-inline: auto;
}
.solutions__title span { display: block; color: var(--green-lift); }

/* Tile marquee. Spacing uses margin-right rather than gap, so the
   seam between the two duplicated tracks stays even. */
.marquee--tiles .marquee__track { align-items: stretch; padding: 6px 0; }
.marquee--tiles .marquee__set { align-items: stretch; }

.solution {
  flex: 0 0 auto;
  width: 268px;
  margin-right: 20px;
  padding: 26px 24px 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper-warm);
  transition: background .28s ease, border-color .28s ease, transform .28s ease;
}
/* The lift is hover-only; the pressed state is what touch gets, so
   tapping a tile still gives feedback. */
@media (hover: hover) {
  .solution:hover {
    background: var(--paper);
    border-color: rgba(84,162,87,.45);
    box-shadow: 0 14px 34px rgba(26,33,69,.10);
    transform: translateY(-4px);
  }
}
.solution:active {
  background: var(--paper);
  border-color: rgba(84,162,87,.45);
}

.solution__icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 20px;
  border-radius: 13px;
  background: rgba(84,162,87,.14);
  border: 1px solid rgba(84,162,87,.30);
  color: var(--green);
}
.solution__icon svg { width: 23px; height: 23px; }

.solution__name {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--navy);
  margin-bottom: 8px;
}
.solution__blurb { font-size: 14px; line-height: 1.55; color: var(--muted); }

@media (max-width: 640px) {
  .solution { width: 236px; padding: 22px 20px 24px; }
}

/* ========================== HOW IT WORKS ========================== */
.how {
  background: var(--navy-deep);
  color: #fff;
  padding: var(--section) 0;
}
.how .section-h { color: #fff; }

/* ---- the four steps, as a scrolling banner ---- */
.marquee--steps .marquee__track { align-items: stretch; padding: 6px 0; }
.marquee--steps .marquee__set   { align-items: stretch; }

/* Four steps stacked 2x2 (1 & 2 on top, 3 & 4 below). */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  max-width: 860px;
  margin-inline: auto;
}
@media (max-width: 640px) { .steps-grid { grid-template-columns: 1fr; } }
/* In the grid each card fills its column (the fixed width + right
   margin below were only needed for the old scrolling row). */
.steps-grid .step { width: auto; margin-right: 0; }

.step {
  flex: 0 0 auto;
  width: 320px;
  margin-right: 20px;
  padding: 32px 28px 36px;
  border: 1px solid var(--line-dark);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  transition: background .28s ease, border-color .28s ease;
}
@media (hover: hover) {
  .step:hover {
    background: rgba(255,255,255,.075);
    border-color: rgba(84,162,87,.45);
  }
}
.step__n {
  display: block;
  font-family: inherit;
  font-size: 11px; letter-spacing: .18em;
  color: var(--green-lift);
  margin-bottom: 22px;
}
.step__title {
  font-family: var(--display);
  font-size: 22px;
  color: #fff;
  margin-bottom: 12px;
}
.step__body { color: var(--muted-dark); font-size: 15.5px; }

/* ========================== EMAIL MENU ==========================
   Shown when an address is clicked. A bare mailto: does nothing for
   anyone on webmail, so this offers the common destinations plus a
   plain copy. */
.mailmenu {
  position: absolute;
  z-index: 200;
  min-width: 210px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(14,18,41,.22);
}
.mailmenu__addr {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 6px 10px 10px;
  margin: 0 0 6px;
  border-bottom: 1px solid var(--line);
  word-break: break-all;
}
.mailmenu__opt {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
@media (hover: hover) {
  .mailmenu__opt:hover { background: var(--paper-warm); color: var(--green); }
}
.mailmenu__opt:active { background: var(--paper-warm); }

/* ============================ CAROUSEL ============================
   Shared by the testimonials and the team. One card at a time, in a
   flex track that slides sideways. Track height follows the tallest
   slide, so moving between a short card and a long one doesn't make
   the page jump. */
.carousel { position: relative; }
.carousel__viewport { overflow: hidden; }
.carousel__track {
  display: flex;
  align-items: stretch;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 4px;
  display: flex;
}
/* A single card stretched across the full width reads badly, so the
   content is held to a comfortable measure and centred. */
.carousel__slide > * {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

.carousel__controls {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  margin-top: clamp(26px, 3vw, 36px);
}
.carousel__arrow {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s, color .2s;
}
.carousel__arrow svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: hover) {
  .carousel__arrow:hover {
    border-color: var(--green);
    color: var(--green);
    transform: scale(1.06);
  }
}
.carousel__arrow:active { transform: scale(.96); }

.carousel__dots { display: flex; align-items: center; gap: 9px; }
.carousel__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(55,71,128,.25);
  cursor: pointer;
  transition: background .25s, width .25s;
}
.carousel__dot.is-on { background: var(--green); width: 22px; border-radius: 100px; }

/* The carousel appears in testimonials (white) and the team (blue),
   so the controls need a dark-background variant. */
.team .carousel__arrow {
  background: rgba(255,255,255,.06);
  border-color: var(--line-dark);
  color: #fff;
}
@media (hover: hover) {
  .team .carousel__arrow:hover { border-color: var(--green-lift); color: var(--green-lift); }
}
.team .carousel__dot { background: rgba(255,255,255,.28); }
.team .carousel__dot.is-on { background: var(--green-lift); }

@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none; }
}

/* The quote cards carried bottom margin for the old column layout. */
.carousel .quote { margin: 0 auto; break-inside: auto; }

/* ========================== TESTIMONIALS ==========================
   Sits between the org band (navy) and the team (warm grey), on
   plain white so all three sections stay distinct. */
.quotes { background: var(--paper); padding: var(--section) 0; }
.section-h--center { margin-inline: auto; text-align: center; }

.quotes__grid { display: block; }

.quote {
  margin: 0;
  padding: clamp(28px, 3vw, 36px);
  background: var(--paper-warm);
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
@media (hover: hover) {
  .quote:hover {
    border-color: rgba(84,162,87,.35);
    box-shadow: 0 14px 38px rgba(26,33,69,.09);
  }
}

.quote__text {
  margin: 0;
  font-size: clamp(15.5px, 1.2vw, 16.5px);
  line-height: 1.62;
  color: var(--ink);
}
/* Opening quote mark as a graphic element, not a character in the
   text — keeps it out of the copy for screen readers. */
.quote__text::before {
  content: "\201C";
  display: block;
  font-family: var(--display);
  font-size: 46px;
  font-weight: 700;
  line-height: .8;
  color: var(--green);
  margin-bottom: 10px;
}

.quote__by {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.quote__name {
  font-family: var(--display);
  font-size: 16.5px; font-weight: 700; letter-spacing: -.01em;
  color: var(--navy);
}
.quote__role {
  font-family: inherit;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}

/* ============================== TEAM ============================== */
.team { padding: var(--section) 0; background: var(--navy-deep); color: #fff; }

/* ---- core values ---- */
.values { padding: var(--section) 0; background: var(--paper-warm); }
.values__intro {
  color: var(--muted);
  max-width: 64ch;
  margin: -18px auto clamp(36px, 5vw, 52px);
  text-align: center;
  font-size: 16.5px;
  line-height: 1.62;
}
.values__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
  max-width: 1040px;
  margin-inline: auto;
}
@media (max-width: 900px) { .values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .values__grid { grid-template-columns: 1fr; } }
.value {
  padding: clamp(24px, 2.4vw, 30px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: box-shadow .3s, border-color .3s, transform .3s;
}
.value:hover {
  border-color: var(--green);
  box-shadow: 0 14px 34px rgba(26,33,69,.08);
  transform: translateY(-2px);
}
.value__name {
  margin: 0 0 8px;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--navy);
}
.value__body { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15px; }

/* ---- culture: collapsible Core Values / Our Culture tabs ---- */
.culture { padding: var(--section) 0; background: var(--paper-warm); }
.ctabs { max-width: 1040px; margin-inline: auto; }
.ctabs__tablist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.ctabs__tab {
  appearance: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 22px 24px;
  font: inherit; font-size: clamp(17px, 1.6vw, 21px); font-weight: 700;
  letter-spacing: -.01em;
  color: var(--navy);
  background: linear-gradient(180deg, #ffffff, #F4F7FC);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 8px 20px rgba(27,34,66,.10), 0 2px 5px rgba(27,34,66,.06), inset 0 1px 0 rgba(255,255,255,.9);
  transition: background .2s, border-color .2s, color .2s,
              transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s;
}
.ctabs__tab:hover {
  border-color: var(--green);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(27,34,66,.16), 0 4px 9px rgba(27,34,66,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.ctabs__tab:active { transform: translateY(-1px); }
.ctabs__tab:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.ctabs__tab[aria-selected="true"] {
  background: linear-gradient(180deg, var(--navy), var(--navy-deep));
  border-color: var(--navy-deep); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(27,34,66,.26), 0 5px 11px rgba(27,34,66,.14);
}
@media (max-width: 560px) { .ctabs__tablist { grid-template-columns: 1fr; } }

.ctabs__panel[hidden] { display: none; }
.ctabs__panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(28px, 3.4vw, 44px);
  box-shadow: 0 10px 30px rgba(27,34,66,.06);
}
.ctabs__intro {
  color: var(--muted); max-width: 76ch;
  margin: 0 auto clamp(24px, 3vw, 34px);
  text-align: center; font-size: 16.5px; line-height: 1.62;
}

/* Items fade in and settle downward each time a tab is opened. */
@keyframes ctabsIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ctabs__panel:not([hidden]) .ctabs__intro,
.ctabs__panel:not([hidden]) .value,
.ctabs__panel:not([hidden]) .culture__block,
.ctabs__panel:not([hidden]) .culture__verse {
  animation: ctabsIn .5s cubic-bezier(.22,.61,.36,1) both;
}
.ctabs__panel:not([hidden]) .ctabs__intro { animation-delay: 0s; }
.ctabs__panel:not([hidden]) .value:nth-child(1),
.ctabs__panel:not([hidden]) .culture__block:nth-child(1) { animation-delay: .06s; }
.ctabs__panel:not([hidden]) .value:nth-child(2),
.ctabs__panel:not([hidden]) .culture__block:nth-child(2) { animation-delay: .12s; }
.ctabs__panel:not([hidden]) .value:nth-child(3),
.ctabs__panel:not([hidden]) .culture__block:nth-child(3) { animation-delay: .18s; }
.ctabs__panel:not([hidden]) .value:nth-child(4),
.ctabs__panel:not([hidden]) .culture__block:nth-child(4) { animation-delay: .24s; }
.ctabs__panel:not([hidden]) .value:nth-child(5),
.ctabs__panel:not([hidden]) .culture__block:nth-child(5) { animation-delay: .30s; }
.ctabs__panel:not([hidden]) .value:nth-child(6) { animation-delay: .36s; }
.ctabs__panel:not([hidden]) .culture__verse { animation-delay: .34s; }
@media (prefers-reduced-motion: reduce) {
  .ctabs__panel:not([hidden]) .ctabs__intro,
  .ctabs__panel:not([hidden]) .value,
  .ctabs__panel:not([hidden]) .culture__block,
  .ctabs__panel:not([hidden]) .culture__verse { animation: none; }
}
.culture__blocks {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
}
@media (max-width: 640px) { .culture__blocks { grid-template-columns: 1fr; } }
/* Tiles matching the Core Values cards. */
.culture__block {
  padding: clamp(24px, 2.4vw, 30px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: box-shadow .3s, border-color .3s, transform .3s;
}
.culture__block:hover {
  border-color: var(--green);
  box-shadow: 0 14px 34px rgba(26,33,69,.08);
  transform: translateY(-2px);
}
.culture__block-title { margin: 0 0 8px; font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; letter-spacing: -.01em; color: var(--navy); }
.culture__block-body  { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15px; }
.culture__verse { margin: clamp(28px, 3.4vw, 42px) auto 0; max-width: 62ch; text-align: center; }
.culture__verse blockquote {
  margin: 0 0 8px; font-size: clamp(18px, 1.9vw, 23px); font-style: italic;
  color: var(--navy); line-height: 1.5;
}
.culture__verse figcaption { color: var(--green-lift); font-weight: 600; font-size: 14px; letter-spacing: .04em; }
.team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
}
.member {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: clamp(28px, 3vw, 38px);
  display: flex; flex-direction: column;
}
.member__avatar {
  border: 1px solid rgba(255,255,255,.16);
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 20px;
  letter-spacing: .02em;
  margin-bottom: 22px;
  object-fit: cover;
}
.member h3 { font-size: 21px; margin-bottom: 5px; }
.member__role {
  font-family: inherit; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-lift);
  margin-bottom: 18px;
}
.member__bio { flex: 1; }
.member__bio p { color: var(--muted-dark); font-size: 15px; }
.member__bio p + p { margin-top: 12px; }

/* Long bios are cut off with a soft fade so every card in the row
   stays roughly the same height. The Read more button reveals the
   rest in place. */
.member__bio.is-clamped {
  max-height: 12.5em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
}
.member__more {
  align-self: flex-start;
  margin-top: 14px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.35);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.member__more:hover { color: var(--green-lift); border-color: var(--green-lift); }

.member a {
  margin-top: 22px;
  font-size: 14.5px; font-weight: 600;
  color: var(--green-lift);
  text-decoration: none;
  word-break: break-word;
}
.member a:hover { text-decoration: underline; }

/* ============================ CONTACT ============================ */
.contact {
  background: var(--navy-deep);
  color: #fff;
  padding: var(--section) 0;
}
.contact__in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.contact h2 { font-size: clamp(32px, 4.2vw, 52px); margin-bottom: 20px; }
.contact__copy > p { color: var(--muted-dark); max-width: 42ch; }

.contact__details { margin: 42px 0 0; }
.contact__details div {
  padding: 16px 0;
  border-top: 1px solid var(--line-dark);
}
.contact__details dt {
  font-family: inherit; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-dark);
  margin-bottom: 5px;
}
.contact__details dd { margin: 0; font-size: 16.5px; }
.contact__details a { color: #fff; text-decoration: none; }
.contact__details a:hover { color: var(--green-lift); }

/* ------------------------------ form ------------------------------ */
.form {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: clamp(26px, 3.2vw, 40px);
  display: grid; gap: 16px;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label {
  display: grid; gap: 8px;
  font-family: inherit; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-dark);
}
.form input, .form select, .form textarea {
  font-family: var(--body);
  /* 16px is a hard floor. iOS Safari force-zooms the whole page
     when you focus any field smaller than this, and it does not
     zoom back out. Do not lower this value. */
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  padding: 13px 15px;
  width: 100%;
  transition: border-color .2s, background .2s;
}
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--green);
  background: rgba(255,255,255,.09);
}
.form select option { color: var(--ink); }

/* The native arrow renders dark on this dark field, so it's hidden
   and drawn in CSS instead. */
.form select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted-dark) 50%),
    linear-gradient(135deg, var(--muted-dark) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
  cursor: pointer;
}

.form input::placeholder { color: rgba(255,255,255,.34); }
/* ---- optional attachment ---- */
.filefield {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  align-items: center;
}
.filefield__label {
  grid-column: 1 / -1;
  font-family: inherit;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-dark);
}
.filefield__label em {
  font-style: normal;
  letter-spacing: .1em;
  color: rgba(255,255,255,.34);
}
/* The native control is hidden and the label acts as the button —
   file inputs can't be styled directly. */
.filefield input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.filefield__btn {
  display: inline-flex; align-items: center;
  padding: 11px 18px;
  border: 1px solid var(--line-dark);
  border-radius: 100px;
  background: rgba(255,255,255,.06);
  font-family: var(--body);
  font-size: 14.5px; font-weight: 600;
  letter-spacing: normal; text-transform: none;
  color: #fff;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
@media (hover: hover) {
  .filefield__btn:hover { border-color: var(--green); background: rgba(255,255,255,.1); }
}
.filefield input[type="file"]:focus-visible + .filefield__name,
.filefield input[type="file"]:focus-visible ~ .filefield__btn { outline: 2px solid var(--green-lift); }

.filefield__name {
  font-size: 14px;
  color: var(--muted-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filefield__hint {
  grid-column: 1 / -1;
  font-size: 12px;
  color: rgba(255,255,255,.4);
}

.form__note {
  font-size: 12.5px; color: var(--muted-dark); text-align: center; margin-top: 2px;
}

/* Success / error message under the submit button */
.form__status {
  font-size: 14.5px;
  text-align: center;
  padding: 12px 14px;
  border-radius: 10px;
  margin-top: 2px;
}
.form__status.is-good {
  color: var(--green-lift);
  background: rgba(84,162,87,.12);
  border: 1px solid rgba(84,162,87,.3);
}
.form__status.is-bad {
  color: #FFB4B4;
  background: rgba(255,120,120,.1);
  border: 1px solid rgba(255,120,120,.28);
}
.form button[disabled] { opacity: .6; cursor: default; transform: none; }

/* Honeypot: off-screen rather than display:none, because some bots
   skip fields that are explicitly hidden. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================= FOOTER ============================= */
.foot { background: var(--navy-deep); color: #fff; padding-top: 8px; }
.foot__in {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: clamp(32px, 5vw, 70px);
  padding-block: clamp(48px, 6vw, 76px);
  border-top: 1px solid var(--line-dark);
}
/* The logo is navy on transparent, so it sits on a white chip
   rather than being filtered — filtering would erase the star. */
.foot__brand img {
  height: 38px; width: auto;
  background: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  box-sizing: content-box;
  margin-bottom: 22px;
}
.foot__brand p { color: var(--muted-dark); font-size: 15px; max-width: 34ch; }

.foot__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.foot__cols h4 {
  font-family: inherit; font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-lift);
  margin: 0 0 14px;
}
.foot__cols p, .foot__cols a {
  display: block;
  color: var(--muted-dark);
  font-size: 15px;
  text-decoration: none;
  margin-bottom: 6px;
}
.foot__cols a:hover { color: #fff; }

.foot__legal {
  padding-bottom: 40px;
  font-size: 12.5px;
  color: rgba(255,255,255,.4);
}
.foot__disclaimer { margin-top: 8px; max-width: 78ch; }

/* ====================== PRODUCTS & SERVICES PAGE ====================== */
.pp-intro {
  color: var(--muted);
  max-width: 58ch;
  margin: -32px 0 clamp(40px, 5vw, 56px);
  font-size: 16.5px;
}

/* ---- hardware ---- */
/* Warm grey, because this now follows "Two ways in", which is
   white — two white sections in a row read as one. */
.pp-hardware { background: var(--paper-warm); padding: var(--section) 0; }
/* Centered heading + intro over the brand-tab row. */
#hardware .section-h { text-align: center; margin-inline: auto; }
#hardware .pp-intro  { text-align: center; margin-inline: auto; }
/* Center the How-it-works and Team eyebrows + headings. */
#how .eyebrow,  #how .section-h,
#team .eyebrow, #team .section-h { text-align: center; margin-inline: auto; }
/* Center-align the customer testimonies under the centered heading. */
#testimonials .quote__text { text-align: center; }
#testimonials .quote__text::before { text-align: center; }
#testimonials .quote__by   { align-items: center; text-align: center; }
/* ---- brand title above a hardware group ---- */
.brandrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(22px, 2.6vw, 30px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.brandrow__logo {
  height: 30px;
  width: auto;
  flex: 0 0 auto;
}
.brandrow__label {
  font-family: var(--display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--navy);
}
/* A brand heading that follows another group needs room above it,
   or it reads as a caption for the rows it sits beneath. */
.brandrow--stacked { margin-top: clamp(48px, 6vw, 76px); }

/* ---- hardware strip ----
   Two stacked rows running opposite ways. Each scrolls on its own
   and can be dragged or swiped independently. Cards are standalone
   here rather than cells in a grid. */
.device-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
}
.marquee--devices .marquee__track { align-items: stretch; padding: 6px 0; }
.marquee--devices .marquee__set   { align-items: stretch; }

.device {
  flex: 0 0 auto;
  width: 244px;
  margin-right: 20px;
  padding: 26px 24px 30px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
@media (hover: hover) {
  .device:hover {
    background: var(--paper);
    border-color: rgba(84,162,87,.45);
    box-shadow: 0 14px 34px rgba(26,33,69,.10);
  }
}

/* Fixed-height photo area. The devices are all different shapes —
   a wide PIN pad, a tall handheld — so each is fitted inside an
   identical box. That keeps every product name on the same line
   across the row, and reserves the space even where no photo has
   been supplied yet, so nothing shifts up out of alignment. */
.device__shot {
  display: flex; align-items: center; justify-content: center;
  height: clamp(120px, 12vw, 150px);
  margin-bottom: 20px;
}
.device__shot img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
@media (hover: hover) {
  .device:hover .device__shot img { transform: scale(1.05); }
}

.device__name {
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: -.015em;
  color: var(--navy);
  margin-bottom: 10px;
}
.device__tagline { font-size: 15px; color: var(--muted); }
.device__blurb {
  font-size: 14.5px; color: var(--muted);
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* ---- services ---- */
.pp-services {
  background: var(--navy-deep);
  color: #fff;
  padding: var(--section) 0;
}
.pp-services .section-h { color: #fff; }
/* Services scroll in two opposing rows, same as the hardware strip.
   Cards are fixed width so the loop measures cleanly. */
.marquee--services .marquee__track { align-items: stretch; padding: 6px 0; }
.marquee--services .marquee__set   { align-items: stretch; }

.svc {
  flex: 0 0 auto;
  width: 300px;
  margin-right: 20px;
  padding: 28px 26px 32px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  transition: border-color .25s, box-shadow .25s;
}
.svc__eyebrow {
  font-family: inherit;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-lift);
  margin-bottom: 12px;
}
.svc__name { font-size: 22px; color: #fff; margin-bottom: 12px; }
.svc__body { font-size: 15px; color: var(--muted-dark); }

/* ---- services on the home page ----
   Pale section, so the cards invert: white on warm grey rather than
   translucent white on navy. The products page keeps the dark set. */
.home-services {
  background: var(--paper);
  padding: var(--section) 0;
}
.home-services .section-h { color: var(--ink); margin-bottom: clamp(40px, 5vw, 56px); }

.home-services .svc {
  background: var(--paper-warm);
  border-color: var(--line);
}
.home-services .svc__eyebrow { color: var(--green-lift); }
.home-services .svc__name    { color: var(--navy); }
.home-services .svc__body    { color: var(--muted); }
@media (hover: hover) {
  .home-services .svc:hover {
    border-color: rgba(84,162,87,.4);
    box-shadow: 0 14px 38px rgba(26,33,69,.09);
  }
}

/* ============================ SIGN IN ============================ */
.signin {
  background: var(--navy-deep);
  color: #fff;
  padding: clamp(56px, 7vw, 96px) 0 var(--section);
  min-height: 60vh;
}
.signin__in { max-width: 940px; }
.signin__head { text-align: center; margin-bottom: clamp(40px, 5vw, 60px); }
.signin__title {
  font-size: clamp(34px, 5vw, 58px);
  color: #fff;
  margin-bottom: 16px;
}
.signin__lede {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--muted-dark);
  max-width: 44ch;
  margin-inline: auto;
}

.signin__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}
.signin__card {
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 3.4vw, 42px);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
}
.signin__card--alt { background: rgba(255,255,255,.075); }

.signin__kicker {
  font-family: inherit;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-lift);
  margin-bottom: 12px;
}
.signin__card h2 {
  font-size: clamp(22px, 2.2vw, 27px);
  color: #fff;
  margin-bottom: 12px;
}
.signin__body { color: var(--muted-dark); font-size: 15.5px; margin-bottom: 24px; }
.signin__note {
  margin-top: 18px;
  font-size: 13px;
  color: rgba(255,255,255,.45);
}
.signin__setup {
  padding: 14px 16px;
  border: 1px dashed rgba(255,255,255,.25);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--muted-dark);
}
.signin__setup code {
  font-family: inherit;
  font-size: 12.5px;
  color: var(--green-lift);
}

.signin__form { display: grid; gap: 16px; }
.signin__form label {
  display: grid; gap: 8px;
  font-family: inherit; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-dark);
}
.signin__form input {
  font-family: var(--body);
  font-size: 16px;            /* 16px floor — stops iOS zooming on focus */
  letter-spacing: normal; text-transform: none;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  padding: 13px 15px;
  width: 100%;
  transition: border-color .2s, background .2s;
}
.signin__form input:focus {
  border-color: var(--green);
  background: rgba(255,255,255,.1);
  outline: none;
}
.signin__link {
  justify-self: center;
  padding: 4px;
  background: none; border: 0;
  font-family: var(--body); font-size: 13.5px;
  color: var(--muted-dark);
  text-decoration: underline;
  cursor: pointer;
}
.signin__link:hover { color: #fff; }

.signin__done { display: grid; gap: 16px; }
.signin__done-msg {
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(84,162,87,.12);
  border: 1px solid rgba(84,162,87,.3);
  color: var(--green-lift);
  font-size: 15px;
  text-align: center;
}

/* Outline variant, so Login reads as secondary to "Talk to us". */
.btn--outline {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--line);
  box-shadow: none;
}
@media (hover: hover) {
  .btn--outline:hover {
    background: var(--paper-warm);
    color: var(--green);
    border-color: var(--green);
    box-shadow: none;
  }
}

@media (max-width: 860px) {
  .signin__grid { grid-template-columns: 1fr; }
}

/* ======================== EMPLOYEE PORTAL ======================== */
.portal {
  background: var(--navy-deep);
  color: #fff;
  padding: clamp(48px, 6vw, 80px) 0 var(--section);
  min-height: 70vh;
}
.portal__in { max-width: 1100px; }
.portal__checking, .portal__empty {
  color: var(--muted-dark);
  font-size: 15.5px;
  padding: 32px 0;
}
.portal__empty code { font-family: var(--mono); font-size: 13px; color: var(--green-lift); }

.portal__gate {
  max-width: 480px;
  margin: clamp(40px, 6vw, 80px) auto;
  text-align: center;
}
.portal__gate h1 { font-size: clamp(28px, 3.4vw, 40px); color: #fff; margin-bottom: 14px; }
.portal__gate p { color: var(--muted-dark); margin-bottom: 28px; }

.portal__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line-dark);
}
.portal__head h1 { font-size: clamp(28px, 3.2vw, 38px); color: #fff; }
.portal__who {
  display: flex; align-items: center; gap: 16px;
  font-size: 14px;
  color: var(--muted-dark);
}

/* ---- leads table ---- */
.leads {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.leads th {
  text-align: left;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-dark);
  border-bottom: 1px solid var(--line-dark);
}
.leads td {
  padding: 16px 14px;
  vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.leads tbody tr:hover { background: rgba(255,255,255,.03); }
.leads a { color: var(--green-lift); text-decoration: none; }
.leads a:hover { text-decoration: underline; }
.leads__when { color: var(--muted-dark); white-space: nowrap; }
.leads__role {
  display: block;
  font-family: inherit;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-dark);
  margin-top: 3px;
}
.leads__msg {
  color: var(--muted-dark);
  max-width: 38ch;
  line-height: 1.5;
}

/* ============================ ANIMATION ============================
   One-way. Elements start low and transparent, then rise into place
   as they enter the viewport and stay there. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .5s cubic-bezier(.22,.61,.36,1),
    transform .5s cubic-bezier(.22,.61,.36,1);
}
.reveal.in { opacity: 1; transform: none; }

/* =========================== RESPONSIVE =========================== */
@media (max-width: 1000px) {
  .split__grid { grid-template-columns: 1fr; text-align: left; }
  .team__grid { grid-template-columns: 1fr; }
  .foot__in { grid-template-columns: 1fr; }
}

/* Six tabs need more room than five, so the nav collapses to the
   hamburger well before the rest of the layout needs to break. */
@media (max-width: 1240px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
}

@media (max-width: 860px) {
  .contact__in { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }

  /* SMIL animation isn't reachable from CSS, so the travelling
     pulses are hidden instead. The channels and labels still
     communicate the split without anything moving. */
  .flow__dot { display: none; }

  /* Marquees are already scroll containers, so under reduced motion
     the auto-scroll simply doesn't start (handled in script.js) and
     they stay swipeable. The duplicate copy is dropped since nothing
     is looping. */
  .marquee {
    -webkit-mask-image: none; mask-image: none;
    scroll-snap-type: x proximity;
    padding-inline: var(--gutter);
  }
  .marquee__set[aria-hidden="true"] { display: none; }
  .solution, .device { scroll-snap-align: start; }
}


/* ===== HARDWARE BRAND-TAB COMPONENT (namespaced .hwt / .hw__ / hwt-*) ===== */

  .hwt{
    --navy:#374780;
    --green:#54A257;
    --ink:#1B2242;
    --muted:#6B7392;
    --line:#E3E6F0;
    --surface:#FFFFFF;
    --page:#F4F6FA;
  }
  
  

  

  .hw__head{text-align:center;margin-bottom:34px}
  .hw__eyebrow{
    margin:0 0 12px;font-size:.78rem;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:var(--green);
  }
  .hw__title{margin:0;font-size:clamp(1.75rem,3.6vw,2.4rem);font-weight:700;letter-spacing:-.02em}

  /* ── Brand pills ─────────────────────────────────────────── */
  /* Three pills fill the row evenly beneath the heading. */
  .hw__tablist{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
  @media (max-width:560px){ .hw__tablist{grid-template-columns:1fr} }

  .hw__tab{
    --accent:var(--navy);
    appearance:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:14px;
    padding:22px 28px;font:inherit;font-size:1.08rem;font-weight:600;
    color:var(--navy);background:var(--surface);
    border:1.5px solid var(--line);border-radius:999px;
    box-shadow:0 1px 2px rgba(27,34,66,.05);
    transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
  }
  /* Company logo sits on the pill. Pills stay light in every state so
     dark wordmarks (Square) never wash out against a filled background. */
  .hw__tab-logo{
    height:24px;width:auto;max-width:120px;object-fit:contain;
    display:block;pointer-events:none;
  }
  .hw__tab:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 6px 16px rgba(27,34,66,.10)}
  .hw__tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  /* Open state: a soft tint of the brand accent, an accent ring, and an
     accent-colored count — logos stay dark on a light chip. */
  .hw__tab[aria-selected="true"]{
    background:color-mix(in srgb, var(--accent) 12%, #fff);
    border-color:var(--accent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),
               0 8px 20px rgba(27,34,66,.12);
  }

  .hw__tabcount{
    font-size:.75rem;font-weight:700;opacity:.7;
    color:var(--muted);
    font-variant-numeric:tabular-nums;
  }
  .hw__tab[aria-selected="true"] .hw__tabcount{color:var(--accent);opacity:1}

  /* ── Panels ──────────────────────────────────────────────── */
  /* display:none also halts the CSS animation inside, so hidden
     brands cost nothing — that's the whole point of the change. */
  .hw__panel[hidden]{display:none}

  .hw__panel{
    --accent:var(--navy);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, #fff), var(--surface) 60%);
    border:1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius:22px;padding:34px 0 38px;
    box-shadow:0 10px 30px rgba(27,34,66,.06);
  }

  .hwt-brandrow{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    margin-bottom:26px;padding:0 24px;
  }
  .hwt-brandrow__logo{height:30px;width:auto;object-fit:contain}
  .hwt-brandrow__label{font-size:clamp(18px,1.8vw,21px);font-weight:700;letter-spacing:-.015em;color:var(--accent,var(--navy))}

  /* ── Marquee rows ────────────────────────────────────────── */
  .hwt-rows{display:flex;flex-direction:column;gap:16px}

  .hwt-marquee{
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  }
  .hwt-marquee::-webkit-scrollbar{display:none}
  .hwt-track{display:flex;gap:16px;width:max-content}
  .hwt-marquee.is-draggable{cursor:grab}
  .hwt-marquee.is-dragging{cursor:grabbing}
  .hwt-marquee.is-dragging .hwt-device{pointer-events:none;user-select:none;-webkit-user-select:none}

  @keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

  .hwt-device{
    flex:0 0 auto;width:248px;padding:18px 16px 20px;
    background:#FBFCFE;border:1px solid var(--line);border-radius:16px;
    display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  }
  .hwt-device__shot{
    height:126px;width:100%;display:flex;align-items:center;justify-content:center;
  }
  .hwt-device__shot img{max-height:100%;max-width:100%;object-fit:contain}
  .hwt-device__shot svg{width:60px;height:60px;color:#C3CADE}
  .hwt-device__name{margin:0;font-size:.95rem;font-weight:650;letter-spacing:-.01em}
  .hwt-device__tagline{margin:0;font-size:.8rem;line-height:1.5;color:var(--muted)}

  @media (max-width:860px){
    .hw__panel{padding:26px 0 30px}
    .hwt-device{width:210px}
  }
  @media (prefers-reduced-motion:reduce){
    .hwt-track{animation:none}
    .hwt-marquee{overflow-x:auto}
    .hw__tab:hover{transform:none}
  }