/* FiTECH Solutions v2: light corporate theme.
   Spacing uses only 0/2/4/8/12/16/24/32/40/48/64/80/96px.
   Type sizes and line heights follow the Tailwind scale.
   Radii follow Tailwind (4/6/8/12/16/24/full). Backgrounds are flat. */

/* Self-hosted Manrope (from the demo's woff files) */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/font-3.woff) format("woff"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/font-4.woff) format("woff"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/font-5.woff) format("woff"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/font-6.woff) format("woff"); }

:root {
  --navy: #18307d;
  --ink: #0f1a3a;
  --muted: #4b5a75;
  --blue: #1e5be0;
  --blue-hover: #1749b8;
  --red: #fa4152;
  --white: #ffffff;
  --off: #f5f7fb;
  --line: #e1e7f0;
  --dark: #0d1c4f;

  --s-25: 2px; --s-50: 4px; --s-75: 8px; --s-100: 12px; --s-200: 16px;
  --s-300: 24px; --s-400: 32px; --s-500: 40px; --s-600: 48px;
  --s-700: 64px; --s-800: 80px; --s-900: 96px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--font); font-size: 1rem; line-height: 1.5rem;
  font-style: normal; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; letter-spacing: -0.02em; color: var(--ink); }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }

.skip {
  position: fixed; top: var(--s-75); left: var(--s-75); z-index: 100;
  background: var(--ink); color: var(--white); font-size: 0.875rem; line-height: 1.25rem;
  font-weight: 600; padding: var(--s-75) var(--s-200); border-radius: 8px;
  transform: translateY(-200%); transition: transform 500ms var(--ease);
}
.skip:focus { transform: translateY(0); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--s-400)); margin-inline: auto; padding-inline: var(--s-400); }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-200);
  font-family: var(--mono); font-size: 0.75rem; line-height: 1rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before { content: ""; flex: none; width: 12px; height: 14px; background: url("logo-mark.svg") center / contain no-repeat; opacity: 0.85; }
.eyebrow.plain::before { display: none; }
.lead { font-size: 1.125rem; line-height: 1.75rem; color: var(--muted); max-width: 680px; }
h2 { font-size: 2.25rem; line-height: 2.5rem; }
h3 { font-size: 1.25rem; line-height: 1.75rem; }
.section-head { display: grid; gap: var(--s-200); max-width: 680px; }
.section-head h2 { margin-top: var(--s-100); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-100);
  min-height: var(--s-600); padding: var(--s-75) var(--s-300);
  font: inherit; font-size: 1rem; line-height: 1.5rem; font-weight: 600;
  border: 0; border-radius: 8px; cursor: pointer; white-space: nowrap;
  transition: transform 500ms var(--ease), background-color 300ms var(--ease), color 300ms var(--ease);
}
.btn svg { width: 20px; height: 20px; transition: transform 500ms var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-hover); }
.btn-sm { min-height: var(--s-500); padding: var(--s-75) var(--s-200); font-size: 0.875rem; line-height: 1.25rem; }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: var(--off); }
.link {
  position: relative; display: inline-flex; align-items: center; gap: var(--s-100);
  min-height: var(--s-600); font-weight: 600; font-size: 1rem; line-height: 1.5rem;
  transition: color 300ms var(--ease);
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: var(--s-75); height: var(--s-25);
  background: var(--line); transition: background-color 300ms var(--ease);
}
.link:hover { color: var(--blue); }
.link:hover::after { background: var(--blue); }
.link svg { width: 20px; height: 20px; transition: transform 500ms var(--ease); }
.link:hover svg { transform: translateX(4px); }

/* ---------- Navigation (floating pill) ---------- */
.site-header { position: fixed; top: var(--s-200); left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding-inline: var(--s-200); pointer-events: none; }
.nav {
  pointer-events: auto; display: flex; align-items: center; gap: var(--s-400);
  width: max-content; max-width: 100%;
  padding: var(--s-75) var(--s-75) var(--s-75) var(--s-300);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: 16px;
}
.brand { display: flex; align-items: center; }
.brand img { height: var(--s-500); width: auto; }
.nav-links { display: flex; align-items: center; gap: var(--s-100); }
.nav-links a:not(.btn) {
  position: relative; padding: var(--s-75) var(--s-100);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--muted);
  transition: color 300ms var(--ease);
}
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: var(--s-100); right: var(--s-100); bottom: var(--s-25); height: var(--s-25);
  background: var(--blue); transform: scaleX(0); transform-origin: left;
  transition: transform 500ms var(--ease);
}
.nav-links a:not(.btn):hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after, .nav-links a:not(.btn):hover::after { transform: scaleX(1); }

.menu-toggle {
  display: none; position: relative; width: var(--s-600); height: var(--s-600);
  border: 0; border-radius: 12px; background: transparent; cursor: pointer; color: var(--ink);
}
.menu-toggle span {
  position: absolute; left: 14px; right: 14px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform 500ms var(--ease);
}
.menu-toggle span:nth-child(1) { transform: translateY(-5px); }
.menu-toggle span:nth-child(2) { transform: translateY(5px); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }
.menu-toggle { top: 0; }
.menu-toggle span { top: 23px; }

.menu-panel {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: center;
  gap: var(--s-100); padding: var(--s-900) var(--s-400) var(--s-400);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px);
  opacity: 0; visibility: hidden;
  transition: opacity 500ms var(--ease), visibility 0s linear 500ms;
}
.menu-panel.open { opacity: 1; visibility: visible; transition: opacity 500ms var(--ease), visibility 0s; }
.menu-panel a:not(.btn) { font-size: 2.25rem; line-height: 2.5rem; font-weight: 600; letter-spacing: -0.02em; padding-block: var(--s-75); }
.menu-panel a[aria-current="page"] { color: var(--blue); }
.menu-panel > * { opacity: 0; transform: translateY(24px); transition: transform 500ms var(--ease), opacity 500ms var(--ease); }
.menu-panel.open > * { opacity: 1; transform: none; }
.menu-panel.open > *:nth-child(1) { transition-delay: 0ms; }
.menu-panel.open > *:nth-child(2) { transition-delay: 60ms; }
.menu-panel.open > *:nth-child(3) { transition-delay: 120ms; }
.menu-panel.open > *:nth-child(4) { transition-delay: 180ms; }
.menu-panel.open > *:nth-child(5) { transition-delay: 240ms; }
.menu-panel .btn { align-self: flex-start; margin-top: var(--s-200); }

/* ---------- Sections ---------- */
section { position: relative; }
.section { padding-block: var(--s-900); }
.section.off { background: var(--off); }
.section.dark { background: var(--dark); color: var(--white); }
.section.dark h2, .section.dark h3 { color: var(--white); }
.section.dark .lead, .section.dark p { color: #b9bcc6; }
.section.dark .eyebrow { color: #b9bcc6; }
.section.dark .eyebrow::before, .people .eyebrow::before, .cta-band .eyebrow::before { background-image: url("logo-mark-light.svg"); }

/* ---------- Hero ---------- */
.hero { padding-top: var(--s-900); padding-bottom: var(--s-800); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-700); align-items: center; padding-top: var(--s-800); }
.hero-copy { display: grid; gap: var(--s-300); justify-items: start; }
.hero h1 { max-width: 680px; font-size: 4.5rem; line-height: 1; font-weight: 600; letter-spacing: -0.04em; margin-top: var(--s-100); }
.hero h1 span { display: block; }
.hero h1 .accent { color: var(--blue); }
.hero .lead { margin-top: var(--s-75); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-300); margin-top: var(--s-200); }
.hero-note { display: flex; align-items: center; gap: var(--s-100); margin-top: var(--s-300); font-size: 0.75rem; line-height: 1rem; color: var(--muted); }
.hero-note::before { content: ""; width: var(--s-75); height: var(--s-75); background: var(--red); border-radius: 2px; }
.hero-art { width: 100%; height: auto; border-radius: 8px; }
.hero figcaption { margin-top: var(--s-100); font-size: 0.75rem; line-height: 1rem; color: var(--muted); }

.page-hero { padding-top: var(--s-900); padding-bottom: var(--s-700); }
.page-hero .inner { padding-top: var(--s-800); display: grid; gap: var(--s-200); justify-items: start; }
.page-hero h1 { max-width: 680px; font-size: 3rem; line-height: 1; letter-spacing: -0.03em; margin-top: var(--s-100); }

.strip { border-block: 1px solid var(--line); }
.strip-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); align-items: center; gap: var(--s-400); padding-block: var(--s-500); }
.strip-label { align-self: center; }
.strip-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.strip-list li { display: grid; gap: var(--s-50); padding-inline: var(--s-400); border-left: 1px solid var(--line); }
.strip-list strong { font-size: 1.5rem; line-height: 2rem; font-weight: 500; letter-spacing: -0.02em; color: var(--navy); text-wrap: balance; }
.strip-list span { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
.mark-divider { display: flex; align-items: center; gap: var(--s-300); padding-block: var(--s-700) 0; }
.mark-divider::before, .mark-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mark-divider i { flex: none; width: 12px; height: 14px; background: url("logo-mark.svg") center / contain no-repeat; opacity: 0.85; }

/* ---------- Split intro ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-700); align-items: start; }
.split .lead { padding-top: var(--s-400); }
.copy { display: grid; gap: var(--s-200); color: var(--muted); max-width: 680px; font-size: 1.125rem; line-height: 1.75rem; }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-300); margin-top: var(--s-700); }
.card {
  display: grid; gap: var(--s-200); align-content: start; padding: var(--s-400);
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  transition: transform 500ms var(--ease), border-color 300ms var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: #c5d1e6; }
.card p { color: var(--muted); }
.icon { display: grid; place-items: center; width: var(--s-600); height: var(--s-600); border-radius: 12px; background: var(--off); color: var(--blue); }
.section.off .icon { background: var(--white); }
.icon svg { width: 24px; height: 24px; }
.icon.red { color: var(--red); }

/* ---------- Tagline reveal ---------- */
.tagline { padding-block: var(--s-900); }
.tagline p {
  max-width: 920px; font-size: 3rem; line-height: 1; font-weight: 600; letter-spacing: -0.03em;
  color: var(--ink); text-wrap: balance;
}
.tagline .w { color: rgba(15, 26, 58, 0.28); transition: color 500ms var(--ease); }
.tagline .w.on { color: var(--ink); }

/* ---------- Team experience ---------- */
.org-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-300); margin-top: var(--s-700); }
.org { padding: var(--s-400) var(--s-300); background: var(--white); border: 1px solid var(--line); border-radius: 12px; font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.02em; color: var(--navy); transition: border-color 300ms var(--ease), transform 300ms var(--ease); }
.org:hover { border-color: var(--blue); transform: translateY(-2px); }
.note { margin-top: var(--s-400); max-width: 680px; font-size: 0.875rem; line-height: 1.25rem; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-300); margin-top: var(--s-700); counter-reset: step; }
.step { display: grid; gap: var(--s-200); align-content: start; padding: var(--s-400); background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.step .num { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: 0.16em; color: #b4232f; }
.step p { color: var(--muted); }

/* ---------- Final CTA ---------- */
.cta-band { background: var(--navy); border-radius: 24px; padding: var(--s-800) var(--s-700); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-400); align-items: center; color: var(--white); }
.cta-band h2 { color: var(--white); max-width: 680px; }
.cta-band p { color: #cdd6ee; margin-top: var(--s-200); max-width: 680px; font-size: 1.125rem; line-height: 1.75rem; }
.cta-actions { display: grid; gap: var(--s-200); justify-items: start; }
.cta-actions .phone { font-size: 0.875rem; line-height: 1.25rem; color: #cdd6ee; }
.cta-actions .phone a { color: var(--white); font-weight: 600; }
.cta-actions .phone a:hover { text-decoration: underline; }

/* ---------- Services page ---------- */
.service { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-700); padding-block: var(--s-700); border-top: 1px solid var(--line); }
.service:first-of-type { border-top: 0; }
.service-head { display: grid; gap: var(--s-200); align-content: start; }
.service-head .tag { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: 0.16em; color: #b4232f; }
.service-body { display: grid; gap: var(--s-300); }
.service-body > p { color: var(--muted); font-size: 1.125rem; line-height: 1.75rem; max-width: 680px; }
.items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-200); }
.items li { padding: var(--s-300); background: var(--off); border-radius: 12px; font-weight: 600; font-size: 1rem; line-height: 1.5rem; display: grid; gap: var(--s-50); }
.items li span { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }

/* ---------- About ---------- */
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-300); margin-top: var(--s-700); }
.t-item { display: grid; gap: var(--s-100); align-content: start; padding: var(--s-400) var(--s-300); background: var(--white); border: 1px solid var(--line); border-radius: 16px; position: relative; }
.t-item .when { font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.t-item h3 { font-size: 1.5rem; line-height: 2rem; }
.t-item p { color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; }
.t-item.now { background: var(--navy); border-color: var(--navy); }
.t-item.now h3 { color: var(--white); }
.t-item.now p, .t-item.now .when { color: #cdd6ee; }
.t-item .dot { width: var(--s-75); height: var(--s-75); border-radius: 2px; background: var(--blue); }
.t-item.now .dot { background: var(--red); }
.fields { display: flex; flex-wrap: wrap; gap: var(--s-100); margin-top: var(--s-300); }
.fields li { padding: var(--s-75) var(--s-200); border: 1px solid var(--line); border-radius: 9999px; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; background: var(--white); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-700); align-items: start; }
.info { display: grid; gap: var(--s-300); }
.info-item { display: grid; gap: var(--s-50); padding: var(--s-300); background: var(--off); border-radius: 16px; }
.info-item .k { font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.info-item .v { font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.02em; }
.info-item a.v:hover { color: var(--blue); }
.form { display: grid; gap: var(--s-300); padding: var(--s-500); background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-300); }
.field { display: grid; gap: var(--s-75); }
.field label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; line-height: 1.5rem; color: var(--ink);
  padding: var(--s-100) var(--s-200); background: var(--white);
  border: 1px solid #7a8aa8; border-radius: 8px;
  transition: border-color 300ms var(--ease);
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: #56688a; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-color: var(--blue); }
.field .err { display: none; font-size: 0.875rem; line-height: 1.25rem; color: #b4232f; }
.field.invalid input, .field.invalid textarea { border-color: #b4232f; }
.field.invalid .err { display: block; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-200); }
.status { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
.status.ok { color: var(--ink); }

/* ---------- 404 ---------- */
.nf { min-height: 100vh; display: grid; align-content: center; justify-items: start; gap: var(--s-300); padding-block: var(--s-900); }
.nf h1 { font-size: 3rem; line-height: 1; letter-spacing: -0.03em; max-width: 680px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--off); padding-block: var(--s-700) var(--s-400); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-600); }
.foot-grid img { height: var(--s-600); width: auto; }
.foot-grid p, .foot-grid li { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
.foot-grid h3 { font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: var(--s-200); }
.foot-grid ul { display: grid; gap: var(--s-100); }
.foot-grid nav li { display: flex; align-items: center; gap: var(--s-100); }
.foot-grid nav li::before { content: ""; flex: none; width: 8px; height: 9px; background: url("logo-mark.svg") center / contain no-repeat; opacity: 0.55; }
.foot-grid a { transition: color 300ms var(--ease); }
.foot-grid a:hover { color: var(--blue); }
.foot-bottom { margin-top: var(--s-600); padding-top: var(--s-300); border-top: 1px solid var(--line); font-size: 0.75rem; line-height: 1rem; color: var(--muted); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease) var(--d, 0ms), transform 700ms var(--ease) var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero h1 { font-size: 3.75rem; }
  .org-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .menu-toggle { display: block; }
  .nav { gap: var(--s-200); }
  .hero-grid, .split, .service, .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-500); }
  .split .lead { padding-top: 0; }
  .steps:not(.five) { grid-template-columns: minmax(0, 1fr); }
  .cta-band { grid-template-columns: minmax(0, 1fr); padding: var(--s-600) var(--s-400); }
  .strip-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-200); padding-block: var(--s-400); }
  .strip-list li:first-child { padding-left: 0; border-left: 0; }
  .strip-list li { padding-inline: var(--s-200); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-400); }
  .section, .tagline { padding-block: var(--s-800); }
}
@media (max-width: 640px) {
  .wrap { padding-inline: var(--s-200); }
  .hero h1 { font-size: 3rem; }
  .page-hero h1, .nf h1 { font-size: 2.25rem; line-height: 2.5rem; }
  .tagline p { font-size: 2.25rem; line-height: 2.5rem; }
  .cards, .items, .row, .timeline { grid-template-columns: minmax(0, 1fr); }
  .org-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip-list { grid-template-columns: minmax(0, 1fr); }
  .strip-list li { padding: var(--s-100) 0 var(--s-100) var(--s-200); }
  .strip-list li:first-child { padding-left: var(--s-200); border-left: 1px solid var(--line); }
  .form { padding: var(--s-300); }
  .brand img { height: var(--s-400); }
}

/* ---------- Tech layer: mono accents ---------- */
.step .num, .row-link .n, .tabs b, .kicker, .meta, .mono-tag, .info-item .k, .foot-grid h3, .req, .opt {
  font-family: var(--mono); letter-spacing: 0.08em;
}

/* ---------- Network canvas (hero) ---------- */
.hero, .page-hero { overflow: hidden; }
.net {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.55;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.hero > .wrap, .page-hero > .wrap { position: relative; z-index: 1; }
.mono-tag { font-size: 0.75rem; }
.hero figcaption { display: flex; justify-content: space-between; gap: var(--s-200); }

/* ---------- Logo animation (image untouched; second copy sweeps a brightness band) ---------- */
.brand { position: relative; display: inline-flex; }
.brand img.sheen {
  position: absolute; inset: 0; height: 100%; width: auto; pointer-events: none; opacity: 0;
  filter: brightness(2.4) saturate(0.7);
  -webkit-mask-image: linear-gradient(100deg, transparent 40%, #000 50%, transparent 60%);
  mask-image: linear-gradient(100deg, transparent 40%, #000 50%, transparent 60%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 120% 0; mask-position: 120% 0;
}
.js .brand img:not(.sheen) { animation: logo-in 900ms var(--ease) both; }
.js .brand img.sheen { animation: logo-sheen 1600ms var(--ease) 900ms 1 both; }
@keyframes logo-in {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(4px); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes logo-sheen {
  0% { opacity: 0.9; -webkit-mask-position: 120% 0; mask-position: 120% 0; }
  100% { opacity: 0.9; -webkit-mask-position: -20% 0; mask-position: -20% 0; }
}
.nf-brand img { height: var(--s-600); width: auto; }
.nf-brand img.sheen { height: var(--s-600); }

/* ---------- Header: sections shared by all pages ---------- */
.head-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--s-700); align-items: end; }
.head-split .side { color: var(--muted); font-size: 1.125rem; line-height: 1.75rem; max-width: 420px; justify-self: end; }
.head-split .side .big { font-size: 1.25rem; line-height: 1.75rem; }
.head-split .side p + p { margin-top: var(--s-200); font-size: 1rem; line-height: 1.5rem; }
.btn-gap { margin-top: var(--s-500); }
.section.dark .side, .section.dark .side p { color: #c9d0e6; }
.section.dark .side .big { color: var(--white); }

/* ---------- Home: capability rows ---------- */
.rows { margin-top: var(--s-700); border-top: 1px solid var(--line); }
.rows li { border-bottom: 1px solid var(--line); }
.row-link {
  display: grid; grid-template-columns: var(--s-800) minmax(0, 1fr) minmax(0, 0.8fr) var(--s-600); gap: var(--s-300); align-items: center;
  padding: var(--s-400) var(--s-200); margin-inline: calc(-1 * var(--s-200));
  border-radius: 12px; transition: background-color 300ms var(--ease);
}
.row-link .n { font-size: 0.75rem; line-height: 1rem; color: var(--muted); }
.row-link h3 { font-size: 1.5rem; line-height: 2rem; font-weight: 500; transition: color 300ms var(--ease), transform 300ms var(--ease); }
.row-link p { color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; max-width: 320px; }
.row-link .go { color: var(--blue); justify-self: end; }
.row-link .go svg { width: 24px; height: 24px; transition: transform 300ms var(--ease); }
.row-link:hover { background: var(--off); }
.row-link:hover h3 { color: var(--blue); transform: translateX(4px); }
.row-link:hover .go svg { transform: translate(4px, -4px); }

/* ---------- Home: people (dark) ---------- */
.people { overflow: hidden; background-color: var(--dark); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0v48' fill='none' stroke='%23ffffff' stroke-opacity='0.045' stroke-width='1'/%3E%3C/svg%3E"); background-size: 48px 48px; }
.people .deco { position: absolute; right: 0; top: 0; width: 480px; height: auto; color: rgba(255, 255, 255, 0.07); pointer-events: none; }
.people .wrap { position: relative; align-items: center; }

/* ---------- Steps tweak ---------- */
.step { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: var(--s-300) var(--s-300) 0 0; position: relative; }
.step::before { content: ""; position: absolute; top: -1px; left: 0; width: var(--s-500); height: var(--s-25); background: var(--blue); transition: width 500ms var(--ease); }
.step:hover::before { width: 100%; }

/* ---------- Flat CTA ---------- */
.cta-flat { background: var(--off); padding-block: var(--s-800); }
.cta-flat-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--s-700); align-items: center; }
.cta-flat h2 { margin-top: var(--s-200); font-size: 3rem; line-height: 1; letter-spacing: -0.03em; }
.cta-flat .cta-actions { justify-self: end; max-width: 420px; }
.cta-flat .cta-actions p { color: var(--muted); font-size: 1rem; line-height: 1.5rem; }

/* ---------- Page heroes ---------- */
.page-hero { background: var(--off); }
.page-hero h1 { max-width: 920px; font-size: 4.5rem; letter-spacing: -0.04em; }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-400); width: 100%; margin-top: var(--s-200); }
.meta { font-size: 0.75rem; line-height: 1rem; color: var(--muted); }

/* ---------- Services ---------- */
.tabs { border-block: 1px solid var(--line); background: var(--white); position: relative; z-index: 2; }
.tabs ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tabs a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-200); padding: var(--s-300) var(--s-200); font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); border-left: 1px solid var(--line); transition: color 300ms var(--ease), background-color 300ms var(--ease); }
.tabs li:first-child a { border-left: 0; padding-left: 0; }
.tabs b { font-size: 0.75rem; font-weight: 400; }
.tabs a:hover { color: var(--blue); background: var(--off); }
.svc { scroll-margin-top: var(--s-800); }
.svc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-700); align-items: start; }
.svc-grid h2 { margin-top: var(--s-200); font-size: 3rem; line-height: 1; letter-spacing: -0.03em; font-weight: 500; }
.svc-h3 { font-size: 1.5rem; line-height: 2rem; font-weight: 500; }
.svc-p { margin-top: var(--s-200); color: var(--muted); max-width: 520px; }
.svc-p.big { margin-top: 0; font-size: 1.25rem; line-height: 1.75rem; }
.bullets { display: grid; gap: var(--s-100); margin-block: var(--s-300); font-size: 0.875rem; line-height: 1.25rem; }
.bullets li { position: relative; padding-left: var(--s-300); }
.bullets li::before { content: ""; position: absolute; left: 0; top: 6px; width: var(--s-75); height: var(--s-75); background: var(--blue); border-radius: 2px; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--s-700); align-items: start; }
.about-grid .label { align-self: end; padding-bottom: var(--s-100); }
.about-grid h2 { font-size: 3rem; line-height: 1; letter-spacing: -0.03em; font-weight: 500; }
.lead.big { margin-top: var(--s-300); font-size: 1.25rem; line-height: 1.75rem; max-width: 720px; }
.about-grid .copy { margin-top: var(--s-300); font-size: 1rem; line-height: 1.5rem; }
.story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-400); margin-top: var(--s-700); }
.story li { border-top: 1px solid rgba(255, 255, 255, 0.25); padding-top: var(--s-300); display: grid; gap: var(--s-200); align-content: start; transition: border-color 300ms var(--ease); }
.story li:hover { border-top-color: var(--white); }
.kicker { font-size: 0.75rem; line-height: 1rem; color: #c9d0e6; }
.story h3 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 500; }
.story p { font-size: 0.875rem; line-height: 1.25rem; max-width: 320px; }
.story-note { display: flex; align-items: center; gap: var(--s-100); margin-top: var(--s-500); font-size: 0.875rem; line-height: 1.25rem; color: #c9d0e6; }
.sq { width: var(--s-75); height: var(--s-75); background: var(--red); border-radius: 2px; }
.defs { margin-top: var(--s-600); border-top: 1px solid var(--line); }
.defs li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-400); padding-block: var(--s-300); border-bottom: 1px solid var(--line); }
.defs h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; }
.defs p { color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; }

/* ---------- Contact ---------- */
.info { align-content: start; }
.info h2 { font-size: 3rem; line-height: 1; letter-spacing: -0.03em; font-weight: 500; }
.info .lead { font-size: 1rem; line-height: 1.5rem; }
.info-item { background: transparent; padding: 0; border-radius: 0; }
.info-item .h { font-size: 1.125rem; line-height: 1.75rem; color: var(--ink); }
.req { color: #b4232f; font-weight: 400; }
.field .opt { font-size: 0.75rem; }
.field input::placeholder, .field textarea::placeholder { color: #5f6b82; }
.field input, .field textarea { transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.field input:focus-visible, .field textarea:focus-visible { box-shadow: 0 0 0 4px rgba(30, 91, 224, 0.12); }
.form { border: 0; padding: 0; background: transparent; }
.preview-note { padding: var(--s-200); background: var(--off); border: 1px solid var(--line); border-radius: 8px; font-size: 0.75rem; line-height: 1rem; color: var(--muted); }
.preview-note b { color: var(--ink); }
.strip-line { background: var(--off); }
.strip-line .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--s-400); padding-block: var(--s-300); }
.strip-line p { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
.strip-line .link { color: var(--blue); font-size: 0.875rem; min-height: var(--s-500); }

/* ---------- Footer (demo layout) ---------- */
.foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
.foot-tag { margin-top: var(--s-200); }
.foot-phone { font-size: 1.25rem; line-height: 1.75rem; color: var(--blue); font-weight: 500; }
.foot-bottom { display: flex; justify-content: space-between; gap: var(--s-200); flex-wrap: wrap; }
.site-footer { background: var(--white); border-top: 1px solid var(--line); }

/* ---------- Demo parity: hero art, contact preview result ---------- */
.link.ext { color: var(--blue); font-size: 0.875rem; justify-self: start; }
.btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px #bcc9dc; }
.btn-outline:hover { background: var(--off); }
.form-result { padding: var(--s-300); background: var(--off); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: var(--s-100); }
.form-result[hidden] { display: none; }
.form-result p { color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; }
.result-actions { display: flex; flex-wrap: wrap; gap: var(--s-100); margin-top: var(--s-100); }
.copy-status { color: var(--blue); }
@media (max-width: 640px) { .result-actions .btn { width: 100%; } }

/* ---------- Micro-interactions ---------- */
.btn { box-shadow: 0 0 0 0 rgba(30, 91, 224, 0); transition: transform 300ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease), box-shadow 300ms var(--ease); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 16px -8px rgba(30, 91, 224, 0.6); }
.btn-light:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn svg, .link svg { transition: transform 300ms var(--ease); }

/* ---------- Responsive additions ---------- */
@media (max-width: 1100px) {
  .page-hero h1 { font-size: 3.75rem; }
  .row-link { grid-template-columns: var(--s-700) minmax(0, 1fr) minmax(0, 1fr) var(--s-500); }
}
@media (max-width: 900px) {
  .head-split, .svc-grid, .about-grid, .cta-flat-grid, .story, .defs li { grid-template-columns: minmax(0, 1fr); gap: var(--s-300); }
  .head-split .side, .cta-flat .cta-actions { justify-self: start; }
  .row-link { grid-template-columns: var(--s-600) minmax(0, 1fr) var(--s-500); }
  .row-link p { grid-column: 2 / 3; grid-row: 2; }
  .row-link .go { grid-row: 1; grid-column: 3; }
  .tabs ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs li:nth-child(3) a { border-left: 0; padding-left: 0; }
  .hero-row, .strip-line .wrap { flex-direction: column; align-items: flex-start; }
  .svc-grid h2, .about-grid h2, .info h2, .cta-flat h2 { font-size: 2.25rem; line-height: 2.5rem; }
  .page-hero h1 { font-size: 3rem; }
  .people .deco { width: 280px; }
}
@media (max-width: 640px) {
  .page-hero h1 { font-size: 2.25rem; line-height: 2.5rem; }
  .org-list { grid-template-columns: minmax(0, 1fr); }
  .net { opacity: 0.4; }
}

/* ---------- Phase 2: hero network visual ---------- */
.hero-visual { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 560px; }
.hero-visual .net {
  opacity: 1;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}

/* ---------- Phase 2: experience, steps, engagement, FAQ, roles, prose ---------- */
.org-list.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.org-list.four .org { font-size: 1.25rem; line-height: 1.75rem; }
.steps.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-300); }
.steps.five .step h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; }
.steps.five .step p { font-size: 0.875rem; line-height: 1.25rem; }
.cards.two { margin-top: var(--s-600); }
.card h3 { font-size: 1.5rem; line-height: 2rem; font-weight: 500; }
.faq { margin-top: var(--s-600); border-top: 1px solid var(--line); max-width: 920px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-300); cursor: pointer; list-style: none;
  padding: var(--s-300) var(--s-100); margin-inline: calc(-1 * var(--s-100)); border-radius: 8px;
  font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; transition: color 300ms var(--ease), background-color 300ms var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); background: var(--off); }
.faq summary::after {
  content: ""; flex: none; width: var(--s-100); height: var(--s-100);
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);
  transition: transform 500ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq .ans { padding: 0 var(--s-100) var(--s-300) 0; max-width: 680px; color: var(--muted); text-wrap: pretty; }
.roles { margin-top: var(--s-600); border-top: 1px solid var(--line); max-width: 920px; }
.roles li { display: flex; align-items: baseline; gap: var(--s-300); padding-block: var(--s-300); border-bottom: 1px solid var(--line); font-size: 1.5rem; line-height: 2rem; font-weight: 500; letter-spacing: -0.02em; }
.roles .n { font-family: var(--mono); font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.08em; color: var(--muted); min-width: var(--s-600); }
.prose { max-width: 680px; display: grid; gap: var(--s-200); }
.prose h2 { margin-top: var(--s-400); font-size: 1.5rem; line-height: 2rem; font-weight: 500; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--muted); text-wrap: pretty; }
.prose ul { display: grid; gap: var(--s-75); }
.prose a, .info a.mail, .ans a, .mail-link { color: var(--blue); font-weight: 600; }
.prose a:hover, .info a.mail:hover, .ans a:hover, .mail-link:hover { text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.foot-bottom a { transition: color 300ms var(--ease); }
.foot-bottom a:hover { color: var(--blue); }
.foot-links { display: flex; gap: var(--s-300); flex-wrap: wrap; }
.info-item a.mail { font-size: 1.125rem; line-height: 1.75rem; }
.note-line { margin-top: var(--s-300); max-width: 680px; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
@media (max-width: 1100px) {
  .org-list.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .steps.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-visual { max-height: 360px; }
}
@media (max-width: 640px) {
  .steps.five, .org-list.four { grid-template-columns: minmax(0, 1fr); }
  .roles li { font-size: 1.25rem; line-height: 1.75rem; }
}

/* ---------- Reduced motion: no animation, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .menu-panel > * { transform: none !important; }
  .brand img.sheen, .hero-logo img.sheen { display: none; }
  .js .home .site-header .brand { transform: none; }
  .btn:hover, .card:hover, .org:hover, .row-link:hover h3, .btn:hover svg, .link:hover svg, .row-link:hover .go svg { transform: none !important; }
}

/* ---------- Logo-led home hero: big logo stays put and scrolls away; header logo fades in after it leaves view ---------- */
.hero-lead { padding-top: var(--s-700); }
.inquiry-text { width: 100%; font: inherit; font-size: 0.875rem; line-height: 1.25rem; color: var(--ink); padding: var(--s-100) var(--s-200); background: var(--white); border: 1px solid #7a8aa8; border-radius: 8px; resize: vertical; }
.hero-logo { position: relative; display: inline-flex; width: min(560px, 82vw); }
.hero-logo img { width: 100%; height: auto; }
.hero-logo img.sheen {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  filter: brightness(2.4) saturate(0.7);
  -webkit-mask-image: linear-gradient(100deg, transparent 40%, #000 50%, transparent 60%);
  mask-image: linear-gradient(100deg, transparent 40%, #000 50%, transparent 60%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 120% 0; mask-position: 120% 0;
}
.js .hero-logo img:not(.sheen) { animation: logo-in 1100ms var(--ease) both; }
.js .hero-logo img.sheen { animation: logo-sheen 1800ms var(--ease) 1100ms 1 both; }
.js .home .site-header .brand {
  opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease), visibility 0s linear 500ms;
}
.js .home .site-header .brand.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.js .home .site-header .brand img { animation: none; }
.hero-logo { will-change: transform, opacity; }
.home .hero-grid { padding-top: var(--s-500); }
.home .hero h1 { font-size: 3.25rem; }
@media (max-width: 640px) {
  .hero-lead { padding-top: var(--s-600); }
  .home .hero h1 { font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -0.03em; }
  .home .hero-grid { padding-top: var(--s-400); }
}

/* Honeypot: off-screen for people, still present for bots */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }


/* ---------- Capability tags (hero) ---------- */
.tags { display: flex; flex-wrap: wrap; gap: var(--s-75); }
.tags li { font-size: 0.75rem; line-height: 1rem; font-weight: 500; letter-spacing: 0.02em; color: var(--muted); padding: var(--s-50) var(--s-100); border: 1px solid var(--line); border-radius: 9999px; }

/* ---------- Service cards: hover lift + accent line ---------- */
.card { position: relative; overflow: hidden; }
.card::before, .row-link::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--s-25); background: var(--blue);
  transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease);
}
.card::before { top: 0; }
.row-link { position: relative; transition: background-color 300ms var(--ease), transform 500ms var(--ease); }
.row-link::after { bottom: 0; left: var(--s-200); right: var(--s-200); }
.card:hover::before, .row-link:hover::after, .card:focus-within::before, .row-link:focus-visible::after { transform: scaleX(1); }
.row-link:hover { transform: translateY(-2px); }

/* ---------- Services: how we deliver diagram ---------- */
.flow-wrap { margin-top: var(--s-700); }
.flow { width: 100%; height: auto; overflow: visible; }
.flow-v { display: none; }
.flow .seg, .flow .ring { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round; }
.flow .ring { stroke: var(--navy); }
.flow .num { font-family: var(--font); font-size: 12px; font-weight: 600; fill: var(--muted); letter-spacing: 0.04em; }
.flow .lbl { font-family: var(--font); font-size: 20px; font-weight: 600; fill: var(--ink); }
.flow .sub { font-family: var(--font); font-size: 14px; fill: var(--muted); }
.flow .dot { fill: var(--red); }
.flow .tick { fill: var(--blue); }
.js .flow .seg, .js .flow .ring { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease); transition-delay: var(--d, 0ms); }
.js .flow .txt, .js .flow .tick, .js .flow .dot { opacity: 0; transition: opacity 500ms var(--ease); transition-delay: var(--d, 0ms); }
.js .flow-wrap.drawn .seg, .js .flow-wrap.drawn .ring { stroke-dashoffset: 0; }
.js .flow-wrap.drawn .txt, .js .flow-wrap.drawn .tick { opacity: 1; }
.js .flow-wrap.drawn .dot { opacity: 1; transition-delay: var(--dd, 0ms); }
.flow-note { margin-top: var(--s-400); }

/* ---------- Terminal card ---------- */
.term { margin-top: var(--s-700); max-width: 680px; background: #0b1740; border: 1px solid #22346f; border-radius: 12px; overflow: hidden; }
.term-bar { display: flex; align-items: center; gap: var(--s-75); padding: var(--s-100) var(--s-200); border-bottom: 1px solid #22346f; font-family: var(--mono); font-size: 0.75rem; line-height: 1rem; color: #9fb0dd; }
.term-bar i { width: var(--s-100); height: var(--s-100); border-radius: 50%; background: #22346f; }
.term-bar span { margin-left: var(--s-75); }
.term pre { margin: 0; padding: var(--s-300); overflow-x: auto; font-family: var(--mono); font-size: 0.875rem; line-height: 1.5rem; color: #dbe4ff; }
.term .c { color: #7f90c4; }
.term .k { color: #8fb3ff; }
.term .v { color: #ffb0b8; }

@media (max-width: 760px) {
  .flow-h { display: none; }
  .flow-v { display: block; max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .flow .seg, .js .flow .ring { stroke-dashoffset: 0 !important; }
  .js .flow .txt, .js .flow .tick { opacity: 1 !important; }
  .flow .dot { display: none; }
  .row-link:hover, .card:hover { transform: none !important; }
}

/* Footer: long email must wrap inside the column on small screens */
.foot-grid > * { min-width: 0; }
.site-footer a, .site-footer li { overflow-wrap: anywhere; }

/* ---------- Leadership ---------- */
.leader-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-400); margin-top: var(--s-600); }
.leader-card { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--s-300); align-items: start; padding: var(--s-300); border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.leader-card img { width: 160px; height: 160px; object-fit: cover; border-radius: 8px; background: var(--off); }
.leader-body { display: grid; gap: var(--s-75); min-width: 0; }
.leader-body h3 { font-size: 1.25rem; line-height: 1.75rem; }
.leader-body p { color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; text-wrap: pretty; }
.leader-body .leader-title { color: var(--ink); font-weight: 600; font-size: 1rem; line-height: 1.5rem; }
.leader-strip { padding-block: var(--s-500); background: var(--off); border-block: 1px solid var(--line); }
.leader-strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-300); }
.leader-strip ul { display: flex; flex-wrap: wrap; gap: var(--s-200); list-style: none; margin: 0; padding: 0; }
.leader-chip { display: flex; align-items: center; gap: var(--s-200); padding: var(--s-100); border: 1px solid var(--line); border-radius: 16px; background: var(--white); transition: transform 500ms var(--ease), border-color 300ms var(--ease); }
.leader-chip:hover { transform: translateY(-2px); border-color: var(--blue); }
.leader-chip:active { transform: translateY(1px); }
.leader-chip img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.leader-chip span { display: grid; min-width: 0; }
.leader-chip strong { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.leader-chip small { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); }
@media (max-width: 900px) { .leader-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .leader-card { grid-template-columns: minmax(0, 1fr); }
  .leader-strip ul, .leader-chip { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .leader-chip { transition: none; } .leader-chip:hover { transform: none; } }

/* ---------- Pass 7: hero logo load sequence and idle heartbeat ----------
   The artwork is unchanged: logo-base.png + logo-mark.png recomposite to fitech-logo.png pixel for pixel.
   Mark centre in the 1740x344 canvas is (766, 105), so transform origin is 44.0% 30.5%. */
.hero-logo { display: grid; --mx: 44%; --my: 30.5%; }
.hero-logo > img { grid-area: 1 / 1; display: block; width: 100%; height: auto; }
.hero-logo .mark-ring {
  position: absolute; left: var(--mx); top: var(--my); width: 14%; aspect-ratio: 1; margin: -7% 0 0 -7%;
  border: 2px solid var(--blue); border-radius: 50%; opacity: 0; pointer-events: none;
}
.js .hero-logo img.logo-base { animation: logo-wipe 1200ms var(--ease) 350ms both; }
.js .hero-logo img.logo-mark {
  transform-origin: var(--mx) var(--my);
  animation: mark-in 900ms var(--ease) 100ms both, mark-beat 6s var(--ease) 3.6s infinite;
}
.js .hero-logo .mark-ring { animation: mark-ring 1400ms var(--ease) 500ms 1 both; }
.js .hero-logo img.sheen { animation: logo-sheen 1500ms var(--ease) 1500ms 1 both; }
@keyframes logo-wipe {
  from { opacity: 0; clip-path: inset(0 56% 0 44%); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes mark-in {
  from { opacity: 0; transform: scale(0.35); }
  60% { opacity: 1; transform: scale(1.08); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes mark-ring {
  from { opacity: 0.45; transform: scale(0.6); }
  to { opacity: 0; transform: scale(3.4); }
}
/* Double beat in the first 0.8s of each 6s cycle, then a long rest */
@keyframes mark-beat {
  0%, 8.5%, 16%, 100% { transform: scale(1); }
  4% { transform: scale(1.025); }
  12% { transform: scale(1.012); }
}
.hero-logo.is-paused img.logo-mark { animation-play-state: running, paused; }
@media (prefers-reduced-motion: reduce) {
  .js .hero-logo img, .js .hero-logo .mark-ring { animation: none !important; }
  .hero-logo .mark-ring { display: none; }
}

/* ---------- Leadership heading (About) ---------- */
.leadership { padding-block: var(--s-900); }
.lead-head { display: grid; gap: var(--s-200); justify-items: start; max-width: 680px; }
.lead-head h2 { font-size: 3rem; line-height: 1; letter-spacing: -0.03em; }
.lead-head .lead { color: var(--muted); font-size: 1.125rem; line-height: 1.75rem; text-wrap: pretty; }
@media (max-width: 900px) { .lead-head h2 { font-size: 2.25rem; line-height: 2.5rem; } }

/* ---------- Pass 7: Services lending band ---------- */
.lend-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-300); margin-top: var(--s-600); }
.lend-grid li { display: grid; gap: var(--s-100); align-content: start; padding: var(--s-300); border: 1px solid #22346f; border-radius: 16px; background: #0b1740; }
.lend-grid .n { font-family: var(--mono); font-size: 0.75rem; line-height: 1rem; color: #9fb0dd; }
.lend-grid h3 { font-size: 1.25rem; line-height: 1.75rem; }
.lend-grid p { font-size: 0.875rem; line-height: 1.25rem; }
@media (max-width: 1000px) { .lend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lend-grid { grid-template-columns: minmax(0, 1fr); } }

/* Small type: Manrope's space is tight at 12px */
.tags li { word-spacing: 0.12em; }

/* ---------- Pass 8: third team member, strategic partner ---------- */
.partner { border-top: 1px solid var(--line); }
.partner-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-700); align-items: center; }
.partner-logo { display: grid; place-items: center; padding: var(--s-500); border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.partner-logo img { width: 100%; max-width: 240px; height: auto; }
.partner-body { display: grid; gap: var(--s-200); justify-items: start; }
.partner-body h2 { font-size: 1.875rem; line-height: 2.25rem; letter-spacing: -0.02em; }
.partner-body p { color: var(--muted); font-size: 1rem; line-height: 1.5rem; max-width: 600px; text-wrap: pretty; }
.partner-note { margin-top: var(--s-500); max-width: 680px; color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; text-wrap: pretty; }
.partner-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) { .partner-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-400); } }
.partner-logo { background: var(--dark); border-color: var(--dark); }

/* ---------- Team cards (About and Home) ---------- */
.leaders-home { padding-block: var(--s-900); background: var(--white); border-top: 1px solid var(--line); }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-300); margin-top: var(--s-600); list-style: none; padding: 0; }
.team-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-75); height: 100%;
  padding: var(--s-400); background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  transition: transform 500ms var(--ease), border-color 300ms var(--ease);
}
.team-card:hover { transform: translateY(-2px); border-color: var(--blue); }
.team-card img { width: 112px; height: 112px; flex: none; border-radius: 9999px; object-fit: cover; object-position: 50% 20%; background: var(--off); margin-bottom: var(--s-100); }
.team-card h3 { font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.01em; }
.team-title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--blue); }
.team-line { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--ink); text-wrap: pretty; }
.team-bio { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted); text-wrap: pretty; }
.team-foot { margin-top: auto; padding-top: var(--s-100); display: flex; align-items: flex-end; }
.team-li {
  flex: none; box-sizing: border-box; min-width: 40px; min-height: 40px;
  display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; color: var(--navy);
  transition: background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease);
}
.team-li:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
.team-li:active { transform: translateY(1px); }
.team-li:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.team-li svg { width: 20px; height: 20px; min-width: 20px; max-width: 20px; flex: none; display: block; }
.team-card .link { margin-top: auto; padding-top: var(--s-100); }
@media (max-width: 900px) { .team-grid { grid-template-columns: minmax(0, 1fr); } .team-card { padding: var(--s-300); } }
@media (prefers-reduced-motion: reduce) { .team-card, .team-li { transition: none; } .team-card:hover { transform: none; } }