/* ═══════════════════════════════════════════════════════════════════
   Steelshift Technologies

   Friendly, chunky, high-contrast. Rounded corners, thick borders,
   and controls that physically depress when pressed.

   The signature is one detail: buttons carry a hard, unblurred offset
   shadow and travel down by exactly that offset on :active, so they
   read as keys standing proud of the page rather than as rectangles
   that change colour. Blur that shadow, or let the travel and the
   offset disagree, and the whole character collapses.

   The primary colour is the blue from the company's own logo rather
   than the green this style is usually seen in — a green system with a
   black-and-blue wordmark sitting inside it would fight itself, and
   would read as an imitation rather than as this company.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Brand — taken from the logo */
  --brand:        #1E3FE0;
  --brand-hover:  #1834C4;
  --brand-shadow: #1229A0;   /* the hard shadow under a pressed control */
  --brand-wash:   rgba(30, 63, 224, 0.10);

  --dark:         #100F3E;   /* inverted panels */
  --sky:          #1CB0F6;   /* secondary accent, links on dark */

  /* The reference palette's greys are too light to read: its nav-grey #AFAFAF
     lands at 2.19:1 on white and its body grey #777777 at 4.48:1, both under
     the 4.5:1 floor. These are the nearest values that actually pass on white
     AND on the tint, so the light, airy feel survives but the text is legible.
     #E5E5E5 stays exactly as-is — it is only ever a border, never text. */
  --ink:          #3C3C3C;   /* 9.0:1  on white */
  --ink-2:        #6B6B6B;   /* 5.33:1 on white, 5.05:1 on tint */
  --muted:        #6E6E6E;   /* 5.10:1 on white, 4.83:1 on tint */
  --on-dark:      #A5A5BC;   /* 7.51:1 on the dark panels */
  --line:         #E5E5E5;
  --line-2:       #CFCFCF;

  --white:        #FFFFFF;
  --ground:       #FFFFFF;
  --tint:         #F7F9FC;

  --green:        #58CC02;
  --green-shadow: #46A302;
  --red:          #FF4B4B;
  --orange:       #FF9600;
  --golden:       #FFC800;
  --golden-ink:   #8A6D00;   /* golden is unreadable as text; this is its ink */

  --ff: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r-sm: 10px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 20px;

  --lift: 4px;               /* button shadow offset AND press travel */
  --pad:  20px;
  --maxw: 1240px;
}

@media (min-width: 700px)  { :root { --pad: 32px; } }
@media (min-width: 1100px) { :root { --pad: 48px; } }

/* ── base ────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ff);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 6px; }

.skip {
  position: absolute; left: 0; top: -100%; z-index: 300;
  padding: 14px 22px; background: var(--brand); color: #fff;
  font-weight: 800; text-decoration: none; border-radius: 0 0 var(--r) 0;
}
.skip:focus { top: 0; }

.shell { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

/* ── section rhythm ──────────────────────────────────────────────── */

.section { padding-block: clamp(48px, 8vw, 88px); }
.section--tint { background: var(--tint); border-block: 2px solid var(--line); }

.section__head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 44px); }
.section__title { font-size: clamp(28px, 4.6vw, 44px); font-weight: 900; color: var(--ink); }
.section__lede {
  margin-top: 14px; max-width: 52ch;
  font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--ink-2);
}

/* Section label with a rule running off to the right. The rule is what turns a
   caption into structure — a named divider rather than text floating above. */
.eyebrow {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 14px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); }
.section--tint .eyebrow::after { background: var(--line-2); }
.contact .eyebrow { color: var(--on-dark); }
.contact .eyebrow::after { background: rgba(255, 255, 255, 0.14); }

/* ── logo ────────────────────────────────────────────────────────── */

/* Sized by height. The mark is 5.19:1, so the long edge is what has to be held
   back; letting it size by width swallows a narrow header whole. */
.wm { display: block; width: auto; height: 34px; mix-blend-mode: multiply; }
.wm--nav  { height: 30px; }
.wm--foot { height: 46px; }

@media (min-width: 700px) {
  .wm--nav  { height: 38px; }
  .wm--foot { height: 58px; }
}

/* ── navbar ──────────────────────────────────────────────────────── */

.navwrap {
  position: sticky; top: 0; z-index: 90;
  background: var(--white);
  border-bottom: 2px solid var(--line);
}
.nav {
  display: flex; align-items: center; gap: 20px;
  height: 72px;
  max-width: var(--maxw); margin: 0 auto;
  padding-inline: var(--pad);
}
.nav__brand { display: flex; align-items: center; text-decoration: none; flex: none; }

.nav__links { display: none; gap: 28px; margin-left: auto; }
.nav__link {
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  padding: 8px 10px; border-radius: var(--r-sm);
  transition: color 160ms ease, background 160ms ease;
}
.nav__link:hover { color: var(--brand); background: var(--brand-wash); }

.nav__end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav__links + .nav__end { margin-left: 0; }
.nav__cta {
  display: none; align-items: center;
  height: 44px; padding: 0 20px;
  border-radius: var(--r);
  background: var(--brand); color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 var(--lift) 0 var(--brand-shadow);
  transition: background 140ms ease;
}
.nav__cta:hover { background: var(--brand-hover); }
.nav__cta:active { box-shadow: none; transform: translateY(var(--lift)); }

@media (min-width: 960px) { .nav__links { display: flex; } .nav__cta { display: inline-flex; } }

.burger {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 14px;
  background: transparent; border: 2px solid var(--line); border-radius: var(--r);
  font: inherit; font-size: 13px; font-weight: 800;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--ink-2); cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.burger:hover { border-color: var(--brand); color: var(--brand); }
.burger__box { position: relative; width: 18px; height: 12px; flex: none; }
.burger__line {
  position: absolute; left: 0; width: 100%; height: 2.5px;
  border-radius: 2px; background: currentColor;
  transition: transform 300ms ease, top 250ms ease;
}
.burger__line--a { top: 0; }
.burger__line--b { top: 9.5px; }
.burger--close .burger__line--a { top: 5px; transform: rotate(45deg); }
.burger--close .burger__line--b { top: 5px; transform: rotate(-45deg); }
@media (min-width: 960px) { #menu-open .burger__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* ── the pushable button ─────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px;
  border: 0; border-radius: var(--r);
  font-family: var(--ff); font-size: 15px; font-weight: 800;
  letter-spacing: 0.6px; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, filter 140ms ease;
}
/* Travel equals the shadow offset exactly: the control lands flush on the
   surface it was standing on. Any other number reads as a glitch. */
.btn:active { box-shadow: none !important; transform: translateY(var(--lift)); }

.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 var(--lift) 0 var(--brand-shadow); }
.btn--primary:hover { background: var(--brand-hover); }

.btn--secondary {
  background: var(--white); color: var(--brand);
  border: 2px solid var(--line-2);
  box-shadow: 0 var(--lift) 0 var(--line-2);
}
.btn--secondary:hover { border-color: var(--brand); box-shadow: 0 var(--lift) 0 var(--brand); }

.btn--onDark { background: var(--white); color: var(--dark); box-shadow: 0 var(--lift) 0 #88879F; }
.btn--onDark:hover { background: #EEF2FF; }

.btn--onDarkGhost {
  background: transparent; color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 var(--lift) 0 rgba(255, 255, 255, 0.22);
}
.btn--onDarkGhost:hover { border-color: #fff; }

.btn--sm { height: 42px; padding: 0 18px; font-size: 13px; border-radius: var(--r-sm); box-shadow: 0 3px 0 var(--brand-shadow); }

/* ── pills ───────────────────────────────────────────────────────── */

.pill {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
}
.pill--brand  { color: var(--brand);      background: rgba(30, 63, 224, 0.12); }
.pill--green  { color: #3E9101;           background: rgba(88, 204, 2, 0.14); }
.pill--sky    { color: #0B7FB8;           background: rgba(28, 176, 246, 0.14); }
.pill--orange { color: #A85F00;           background: rgba(255, 150, 0, 0.16); }
.pill--golden { color: var(--golden-ink); background: rgba(255, 200, 0, 0.22); }

/* ═══════════════  HERO  ═══════════════ */

.hero {
  padding-block: clamp(40px, 7vw, 76px) clamp(36px, 6vw, 64px);
  background: linear-gradient(180deg, var(--brand-wash) 0%, rgba(30, 63, 224, 0) 62%);
}
.hero--page { padding-block: clamp(28px, 4vw, 44px) clamp(28px, 5vw, 48px); }
.hero__inner { max-width: 900px; }

.hero__title {
  font-size: clamp(34px, 6.4vw, 62px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
}
.hero__title--page { font-size: clamp(28px, 5vw, 44px); }
.hero__title em { font-style: normal; color: var(--brand); }
.hero__lede {
  margin-top: 18px; max-width: 58ch;
  font-size: clamp(16px, 1.8vw, 19px); font-weight: 500; line-height: 1.6;
  color: var(--ink-2);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.crumbs {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 22px;
  font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted);
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }

/* four figures */
.figures {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin-top: clamp(36px, 6vw, 56px);
}
@media (min-width: 780px) { .figures { grid-template-columns: repeat(4, 1fr); } }
.figure {
  padding: 20px;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 200ms ease, transform 200ms ease;
}
.figure:hover { border-color: var(--brand); transform: translateY(-3px); }
.figure dt {
  font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted);
}
.figure dd {
  margin-top: 8px;
  font-size: clamp(28px, 3.6vw, 38px); font-weight: 900; line-height: 1;
  letter-spacing: -0.03em; color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.figure dd span { font-size: 14px; font-weight: 800; color: var(--muted); margin-left: 4px; }

/* ═══════════════  WORK  ═══════════════ */

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.chip {
  height: 44px; padding: 0 18px;
  background: var(--white);
  border: 2px solid var(--line); border-radius: var(--r);
  font: inherit; font-size: 13px; font-weight: 800;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--ink-2); cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.bento { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 620px)  { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(3, 1fr); } }
.tile { min-width: 0; }
.tile[hidden] { display: none; }
@media (min-width: 1024px) { .tile--wide { grid-column: span 2; } }
.bento--related { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

.card {
  margin: 0; height: 100%;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.card__core { display: flex; flex-direction: column; height: 100%; }
.card__core img {
  width: 100%; flex: 0 0 auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  max-height: 230px;
  background: var(--tint);
  border-bottom: 2px solid var(--line);
}
.tile--wide .card__core img { aspect-ratio: 21 / 9; max-height: 250px; }

.card__meta { padding: 16px 18px 20px; }
.card__cat {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 6px;
  background: var(--brand-wash); color: var(--brand);
  font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
}
.card__title { margin-top: 10px; font-size: 17px; font-weight: 800; color: var(--ink); }
.card__desc { margin-top: 6px; font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--ink-2); }

/* ═══════════════  CAPABILITIES  ═══════════════ */

.caps { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px)  { .caps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .caps { grid-template-columns: repeat(4, 1fr); } }

.cap {
  padding: 24px 22px 26px;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.cap:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); }
.cap__num {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--brand-wash); color: var(--brand);
  font-size: 14px; font-weight: 900;
}
.cap__title { margin-top: 16px; font-size: 18px; font-weight: 800; color: var(--ink); }
.cap__body { margin-top: 8px; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--ink-2); }
.cap__note {
  margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--line);
  font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--muted);
}

/* ═══════════════  SPLITS  ═══════════════ */

.split { display: grid; gap: clamp(32px, 5vw, 56px); }
@media (min-width: 940px) {
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .split--faq { grid-template-columns: 0.85fr 1.15fr; }
  .split__lead { position: sticky; top: 104px; }
}

.rows { display: grid; gap: 12px; }
.row {
  display: grid; gap: 4px;
  padding: 16px 18px;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--r);
}
@media (min-width: 560px) { .row { grid-template-columns: 160px 1fr; gap: 18px; align-items: baseline; } }
.row dt { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.row dd { font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--ink-2); }
.rows--tight .row { padding: 12px 14px; }
@media (min-width: 560px) { .rows--tight .row { grid-template-columns: 1fr; gap: 3px; } }

.about__body { margin-top: 16px; max-width: 56ch; font-size: 16px; font-weight: 500; line-height: 1.65; color: var(--ink-2); }
.about__body--fine { font-size: 14px; color: var(--muted); }

.stack { display: grid; gap: 16px; align-content: start; }
.panel {
  padding: 24px 22px;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
}
.panel--spec { display: grid; gap: 10px; }
.panel--spec .btn { margin-top: 6px; justify-self: start; }
.panel__h {
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 14px; border-bottom: 2px solid var(--line);
}
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tags li {
  padding: 6px 12px; border-radius: 999px;
  background: var(--tint); border: 2px solid var(--line);
  font-size: 13px; font-weight: 700; color: var(--ink-2);
}

/* ═══════════════  SERVICES  ═══════════════ */

.svc { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px)  { .svc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .svc { grid-template-columns: repeat(3, 1fr); } }
.svc__item {
  display: grid; align-content: start; gap: 8px;
  height: 100%; padding: 24px 22px 26px;
  background: var(--white);
  border: 2px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.svc__item:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); }
.svc__title { font-size: 19px; font-weight: 800; color: var(--ink); }
.svc__desc { font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--ink-2); }
.svc__go {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; margin-top: 6px;
  border-radius: 10px; background: var(--brand-wash); color: var(--brand);
  transition: transform 200ms ease;
}
.svc__go svg { width: 16px; height: 16px; }
.svc__item:hover .svc__go { transform: translateX(5px); }

/* ═══════════════  FAQ  ═══════════════ */

.faqs { display: grid; gap: 12px; }
.faq {
  background: var(--white);
  border: 2px solid var(--line); border-radius: var(--r);
  transition: border-color 200ms ease;
}
.faq[open] { border-color: var(--brand); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 18px;
  font-size: 16px; font-weight: 800; color: var(--ink);
  cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--brand); }
.faq__mark {
  position: relative; flex: none;
  width: 28px; height: 28px; border-radius: 8px; background: var(--tint);
}
.faq__mark::before, .faq__mark::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: var(--brand); border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 250ms ease, opacity 200ms ease;
}
.faq__mark::before { width: 12px; height: 2.5px; }
.faq__mark::after  { width: 2.5px; height: 12px; }
.faq[open] .faq__mark::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__a { padding: 0 18px 18px; max-width: 64ch; }
.faq__a p { font-size: 15px; font-weight: 500; line-height: 1.65; color: var(--ink-2); }

/* ═══════════════  ARTICLE  ═══════════════ */

.article { display: grid; gap: clamp(32px, 5vw, 48px); }
@media (min-width: 960px) { .article { grid-template-columns: 1fr 320px; align-items: start; } }
.article__sec + .article__sec { margin-top: 32px; }
.article__h { font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; margin-bottom: 12px; color: var(--ink); }
.article__body p { max-width: 68ch; font-size: 16px; font-weight: 500; line-height: 1.7; color: var(--ink-2); }
.article__body p + p { margin-top: 14px; }
.article__body a { color: var(--brand); font-weight: 700; }
@media (min-width: 960px) { .article__aside { position: sticky; top: 104px; } }

/* ═══════════════  CLOSER  ═══════════════ */

.closer {
  padding: clamp(36px, 6vw, 64px) clamp(24px, 5vw, 56px);
  border-radius: var(--r-xl);
  background: var(--dark); color: #fff;
  text-align: center;
}
.closer__title { font-size: clamp(24px, 4vw, 38px); font-weight: 900; }
.closer__body { margin: 16px auto 0; max-width: 48ch; font-size: 16px; font-weight: 500; color: #C3C3D4; }
.closer__body a { color: var(--sky); font-weight: 700; text-decoration: none; }
.closer__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }

/* ═══════════════  CONTACT  ═══════════════ */

.contact { background: var(--dark); color: #fff; }
.contact .section__title { color: #fff; }
.contact .section__lede { color: #C3C3D4; }
.contact__grid { display: grid; gap: clamp(32px, 5vw, 56px); }
@media (min-width: 960px) { .contact__grid { grid-template-columns: 1fr 1.05fr; align-items: start; } }

.direct { display: grid; gap: 18px; margin-top: 28px; }
.direct__label {
  display: block;
  font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--on-dark);
}
.direct__value {
  display: inline-flex; align-items: center; gap: 10px; min-height: 34px; margin-top: 3px;
  font-size: 20px; font-weight: 800; color: #fff; text-decoration: none;
  transition: color 160ms ease;
}
.direct__value:hover { color: var(--sky); }
.direct__value .ic { color: var(--on-dark); transition: color 160ms ease; }
.direct__value:hover .ic { color: var(--sky); }
.direct__value--wa:hover, .direct__value--wa:hover .ic { color: #58CC02; }

.contact__meta {
  display: grid; gap: 14px;
  margin-top: 28px; padding-top: 22px;
  border-top: 2px solid rgba(255, 255, 255, 0.12);
  font-size: 14px; font-weight: 500; color: #C3C3D4;
}
.contact__meta strong {
  display: block; margin-bottom: 3px;
  font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--on-dark);
}

/* ── form ────────────────────────────────────────────────────────── */

.formshell {
  padding: clamp(22px, 3.5vw, 32px);
  background: var(--white);
  border-radius: var(--r-xl);
}
.rfq { position: relative; display: grid; gap: 16px; }
/* Must outrank `.rfq input` below, which sizes every field. At lower
   specificity the honeypot kept that sizing and sat as an invisible full-width
   box over the first row, swallowing clicks. */
.rfq input.rfq__honey {
  position: absolute; width: 1px; height: 1px; min-height: 0;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  pointer-events: none;
}
.rfq__row { display: grid; gap: 16px; }
@media (min-width: 560px) { .rfq__row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 7px; }
.field__label { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.rfq input, .rfq select, .rfq textarea {
  width: 100%; min-height: 52px;
  padding: 12px 16px;
  background: var(--white);
  border: 2px solid var(--line); border-radius: var(--r);
  color: var(--ink); font-family: var(--ff); font-size: 15px; font-weight: 600;
  transition: border-color 160ms ease;
}
.rfq textarea { min-height: auto; resize: vertical; line-height: 1.55; }
.rfq input::placeholder, .rfq textarea::placeholder { color: var(--muted); font-weight: 500; }
.rfq input:focus, .rfq select:focus, .rfq textarea:focus { outline: none; border-color: var(--sky); }

.submit {
  justify-self: start;
  height: 52px; padding: 0 28px; margin-top: 4px;
  border: 0; border-radius: var(--r);
  background: var(--brand); color: #fff;
  font-family: var(--ff); font-size: 15px; font-weight: 800;
  letter-spacing: 0.6px; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 var(--lift) 0 var(--brand-shadow);
  transition: background 140ms ease;
}
.submit:hover { background: var(--brand-hover); }
.submit:active { box-shadow: none; transform: translateY(var(--lift)); }
.submit[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.submit__label, .submit__well { display: contents; }
.submit__well svg { display: none; }

.rfq__status { min-height: 1.3em; font-size: 14px; font-weight: 700; color: var(--brand); }
.rfq__status[data-state='error'] { color: var(--red); }
.rfq__fine { font-size: 13px; font-weight: 500; line-height: 1.55; color: var(--muted); }
.rfq__fine a { color: var(--brand); font-weight: 700; }

/* ═══════════════  FOOTER  ═══════════════ */

.foot { background: var(--white); border-top: 2px solid var(--line); padding: clamp(40px, 6vw, 64px) var(--pad) 28px; }
.foot__inner { display: grid; gap: clamp(32px, 5vw, 48px); max-width: var(--maxw); margin: 0 auto; }
@media (min-width: 940px) { .foot__inner { grid-template-columns: 1fr 1.35fr; } }

.foot__blurb { margin-top: 18px; max-width: 38ch; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--ink-2); }
.foot__exp {
  display: inline-flex; align-items: center; margin-top: 14px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--brand-wash); color: var(--brand);
  font-size: 12px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
}
.foot__cols { display: grid; gap: 32px; }
@media (min-width: 620px) { .foot__cols { grid-template-columns: repeat(3, 1fr); } }
.foot__h {
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 2px solid var(--line);
}
.foot__addr { font-style: normal; font-size: 15px; font-weight: 500; line-height: 1.7; color: var(--ink-2); }
.foot__hours { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--muted); }
.foot__list { display: grid; gap: 2px; }
.foot__list a {
  display: inline-flex; align-items: center; min-height: 34px;
  font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none;
  transition: color 160ms ease;
}
.foot__list a:hover { color: var(--brand); }

.foot__rule {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  max-width: var(--maxw); margin: clamp(32px, 5vw, 48px) auto 0;
  padding-top: 22px; border-top: 2px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--muted);
}
.foot__rule a { text-decoration: none; }
.foot__rule a:hover { color: var(--brand); }
.foot__addrline { flex: 1 1 100%; }
@media (min-width: 1040px) { .foot__addrline { flex: 0 1 auto; margin-left: auto; text-align: right; } }

/* ═══════════════  MENU  ═══════════════ */

.menu { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; transition: visibility 0s linear 300ms; }
.menu.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.menu__scrim { position: absolute; inset: 0; background: rgba(16, 15, 62, 0.45); opacity: 0; transition: opacity 300ms ease; }
.menu.is-open .menu__scrim { opacity: 1; }
.menu__sheet {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 0 var(--pad) 32px;
  background: var(--white);
  overflow-y: auto;
  transform: translateY(-12px); opacity: 0;
  transition: opacity 260ms ease, transform 300ms ease;
}
.menu.is-open .menu__sheet { transform: none; opacity: 1; }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: 72px; margin-bottom: 20px; border-bottom: 2px solid var(--line); }
.menu__nav { display: grid; gap: 10px; max-width: var(--maxw); width: 100%; margin: 0 auto; }
.menu__link {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--white);
  border: 2px solid var(--line); border-radius: var(--r);
  text-decoration: none;
  opacity: 0; transform: translateY(14px);
  transition: opacity 300ms ease, transform 300ms ease, border-color 160ms ease;
}
.menu.is-open .menu__link { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i) * 30ms); }
.menu__link:hover { border-color: var(--brand); }
.menu__link.is-current { border-color: var(--brand); background: var(--brand-wash); }
.menu__num { font-size: 12px; font-weight: 800; color: var(--muted); }
.menu__text { font-size: clamp(17px, 2.6vw, 21px); font-weight: 800; color: var(--ink); }
.menu__go { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--tint); color: var(--brand); }
.menu__go svg { width: 15px; height: 15px; }
.menu__foot {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  max-width: var(--maxw); width: 100%; margin: auto auto 0;
  padding-top: 28px;
}
.menu__contact { display: inline-flex; align-items: center; min-height: 36px; font-size: 16px; font-weight: 700; color: var(--brand); text-decoration: none; }

/* ═══════════════  QUICK CONTACT  ═══════════════ */

.quick {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 80;
  display: flex; flex-direction: column; gap: 10px;
}
.quick__btn {
  position: relative;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 16px;
  background: var(--white); color: var(--brand);
  border: 2px solid var(--line);
  box-shadow: 0 var(--lift) 0 var(--line-2);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.quick__btn:hover { border-color: var(--brand); }
.quick__btn:active { box-shadow: none; transform: translateY(var(--lift)); }
.quick__btn--wa { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 var(--lift) 0 var(--green-shadow); }
.quick__btn--wa:hover { background: #4FBB02; }

.quick__tip {
  position: absolute; right: calc(100% + 10px);
  white-space: nowrap;
  padding: 6px 12px; border-radius: 8px;
  background: var(--dark); color: #fff;
  font-size: 12px; font-weight: 700;
  opacity: 0; transform: translateX(6px); pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.quick__btn:hover .quick__tip, .quick__btn:focus-visible .quick__tip { opacity: 1; transform: none; }

@media (max-width: 640px) { .quick__btn { width: 50px; height: 50px; } .quick__tip { display: none; } }
@media (hover: none) { .quick__tip { display: none; } }

/* ═══════════════  MISC  ═══════════════ */

.ic { flex: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.progress { position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; overflow: hidden; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

.legal { max-width: 52rem; }
.legal .article__sec { margin-top: 28px; }
.legal p { max-width: 68ch; font-size: 16px; font-weight: 500; line-height: 1.7; color: var(--ink-2); }
.legal p + p { margin-top: 14px; }
.legal a { color: var(--brand); font-weight: 700; }

/* ═════════════════════════════════════════════════════════════════════
   MOTION

   Two engines, chosen per browser at zero cost to either.

   Where `animation-timeline: view()` exists — Chrome and Edge 115+,
   Safari 26+, Firefox 144+ — scroll entrances are pure CSS. The browser
   drives them off the compositor against the scroll position itself, so
   they cannot stutter when the main thread is busy and they add nothing
   to the bundle. Everywhere else, the IntersectionObserver in ui.js adds
   .is-in and the same keyframes play on a normal timeline.

   The base state everywhere is VISIBLE. Hiding is only ever applied
   inside a block that also guarantees something will un-hide it. That
   rule is why a stalled animation here degrades to "no animation"
   rather than to a blank page.
   ═════════════════════════════════════════════════════════════════════ */

/* Transform only — no opacity.
   An entrance that fades leaves its text part-transparent for as long as the
   element sits inside the animation's range, and an element just below the fold
   sits there indefinitely until you scroll. That is invisible text with a real
   contrast ratio of 1.17:1, which is a genuine legibility problem and not only
   an audit complaint. Sliding into place reads just as deliberate and the text
   is always at full strength. */
@keyframes rise-in {
  from { transform: translate3d(0, 30px, 0); }
  to   { transform: none; }
}
@keyframes rise-in-sm {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes line-up {
  from { transform: translate3d(0, 110%, 0); }
  to   { transform: none; }
}
@keyframes pop-in {
  0%   { transform: translate3d(0, 26px, 0) scale(0.965); }
  100% { transform: none; }
}
@keyframes drift {
  /* Parallax: the image is oversized inside its frame and slides across that
     slack as the frame crosses the viewport. Nothing is ever revealed empty. */
  from { transform: translate3d(0, -4%, 0) scale(1.12); }
  to   { transform: translate3d(0, 4%, 0)  scale(1.12); }
}
@keyframes marquee-run {
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes sheen {
  from { transform: translate3d(-120%, 0, 0) rotate(8deg); }
  to   { transform: translate3d(320%, 0, 0) rotate(8deg); }
}

/* ── hero: choreographed on load, not on scroll ─────────────────────
   The hero is on screen the instant the page opens, so it is timed from
   document load. `both` fill keeps the first frame in place through the
   delay; without it every line flashes at full opacity before dropping. */

.ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.ln__i { display: block; will-change: transform; }

.hero__title .ln__i { animation: line-up 900ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--d, 0ms); }
.rise { animation: rise-in-sm 700ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--d, 0ms); }

/* ── marquee ─────────────────────────────────────────────────────── */

.marquee {
  overflow: hidden;
  padding-block: 18px;
  background: var(--dark);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: 26px;
  width: max-content;
  animation: marquee-run 42s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-size: 13px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: #fff; white-space: nowrap;
}
.marquee__dot { color: var(--sky); font-size: 9px; }

/* ── card image parallax + sheen ─────────────────────────────────── */

.card__core { position: relative; }
.card__core img { will-change: transform; }

/* A light sweep that crosses the card once on hover. It is a pseudo-element on
   an overflow-hidden frame, so it costs one composited layer and no repaint. */
.card__core::after {
  content: '';
  position: absolute; inset: 0 auto 0 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translate3d(-120%, 0, 0) rotate(8deg);
  pointer-events: none;
  opacity: 0;
}
.card:hover .card__core::after { opacity: 1; animation: sheen 900ms cubic-bezier(0.32, 0.72, 0, 1); }

/* ── magnetic buttons ────────────────────────────────────────────── */

/* --mx/--my are written by ui.js while the pointer is inside the control and
   zeroed on leave. The transition applies only on the way back, so the pull
   tracks the cursor instantly and the release eases. */
.btn, .quick__btn {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: background 140ms ease, border-color 140ms ease,
              transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.btn.is-pulling, .quick__btn.is-pulling { transition: background 140ms ease, border-color 140ms ease; }
.btn:active { box-shadow: none !important; transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--lift)), 0); }
.quick__btn:active { box-shadow: none; transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--lift)), 0); }

/* ── nav condenses once you leave the top ────────────────────────── */

.navwrap { transition: box-shadow 300ms ease; }
.navwrap.is-stuck { box-shadow: 0 6px 24px -12px rgba(16, 15, 62, 0.28); }
.nav { transition: height 350ms cubic-bezier(0.16, 1, 0.3, 1); }
.navwrap.is-stuck .nav { height: 60px; }
.wm { transition: height 350ms cubic-bezier(0.16, 1, 0.3, 1); }
@media (min-width: 700px) { .navwrap.is-stuck .wm--nav { height: 30px; } }

/* ═══ ENGINE A — native scroll-driven (no JavaScript involved) ═══ */

@supports (animation-timeline: view()) {
  .section__head, .split__lead, .cap, .tile, .row, .panel,
  .svc li, .faq, .closer, .formshell, .article__sec {
    animation: rise-in 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-timeline: view();
    /* Completes while the element is still ENTERING, not while it crosses. A
       range that runs deep into `cover` leaves things part-transparent well
       inside the viewport — it reads as lag, and an accessibility checker
       sampling mid-flight cannot resolve the text contrast at all. Finishing
       at `entry 85%` means anything comfortably on screen is fully opaque. */
    animation-range: entry 5% entry 85%;
  }

  .cap, .tile, .svc li { animation-name: pop-in; }

  .card__core img {
    animation: drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }

  /* The figures are already on screen at load, so they are choreographed with
     the hero rather than tied to a scroll position they will never reach. */
  .figures { animation: none; }
}

/* ═══ ENGINE B — observer fallback ═══
   ui.js adds `.reveal` ONLY when engine A is unavailable, then `.is-in` when
   the element intersects. The hiding rule is therefore unreachable in a
   browser that cannot also un-hide it. */

.js .reveal { transform: translate3d(0, 30px, 0); }
.js .reveal.is-in {
  transform: none;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── reduced motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { transform: none; }
  .hero__title .ln__i, .rise { animation: none; opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .card__core img { animation: none; transform: none; }
  .btn, .quick__btn { transform: none; }
}