/* =========================================================
   FBR Solutions - site styles
   Navy + FBR Cyan Blue + Light Panel
   ========================================================= */

:root {
  /* Palette */
  --ink:        #0B172A;  /* deep navy background */
  --ink-2:      #122036;  /* elevated navy */
  --canvas:     #E2E6EA;  /* light gray right panel */
  --canvas-2:   #CCD2D9;
  --bone:       #FFFFFF;
  --line-soft:  rgba(11, 23, 42, 0.08);
  --line:       rgba(11, 23, 42, 0.14);
  --line-on-dark: rgba(255,255,255,0.10);

  --accent:     #009EE0;  /* FBR cyan blue */
  --accent-2:   #0080BA;

  --muted:      #5A6072;
  --muted-2:    #8A8F9F;

  /* Type - three roles for Montserrat */
  --display: 'Montserrat', system-ui, sans-serif;          /* 800 ExtraBold, tight tracking */
  --body:    'Montserrat', system-ui, sans-serif;          /* 400 Regular */
  --mono:    'Montserrat', system-ui, sans-serif;          /* 700 Bold Italic - labels/eyebrows */

  /* Type scale - fluid, and tuned so H1 > H2 > H3 holds at EVERY width.
     The previous scale peaked at 109-124px headings on desktop and inverted on
     mobile (section H2 40px sat above a 32px page H1). Tune sizing here. */
  --fs-h1:      clamp(30px, 5.2vw, 68px);   /* home hero headline */
  --fs-h1-sub:  clamp(28px, 4.6vw, 60px);   /* sub-page headers */
  --fs-h2:      clamp(26px, 3.4vw, 44px);   /* section headings (.display-l) */
  --fs-h3:      clamp(20px, 1.8vw, 26px);   /* card headings */
  --fs-lede:    clamp(16px, 1.25vw, 19px);  /* intro paragraphs */

  --gutter: clamp(20px, 4vw, 56px);
  --section: clamp(72px, 10vw, 140px);

  --r-btn: 4px;   /* buttons, nav links, CTAs: squared, never pill-shaped */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }   /* anchor jumps clear the fixed nav */
body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;   /* 1.02 was set for poster-sized type; too tight at this scale */
  margin: 0;
}
p { margin: 0 0 1em 0; }

.mono { font-family: var(--mono); font-style: italic; font-weight: 700; letter-spacing: 0.02em; }
.label {
  font-family: var(--mono);
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow--dark { color: var(--accent); }
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
}
.display-xl {
  font-family: var(--display);
  font-size: clamp(34px, 5.6vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.display-l {
  font-family: var(--display);
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.display-m {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  font-weight: 700;
}
.blue { color: var(--accent); }

/* ---------- Icons ----------
   Font Awesome Free, inlined as one hidden SVG sprite per page (no kit or CDN).
   Use: <svg class="icon"><use href="#fa-NAME"/></svg>. Sized in em so they track the text. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: inline-block; width: 1em; height: 1em; flex: none; fill: currentColor; }

/* ---------- Three-arc verticals (Home) ---------- */
.verticals3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.v3 { padding: 28px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 14px; min-height: 320px; transition: transform .25s ease, background .25s ease, color .25s ease; }
.v3:hover { transform: translateY(-4px); background: var(--ink); color: #fff; }
.v3 h3 { font-family: var(--display); font-size: var(--fs-h3); }
.v3__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-family: var(--display); font-size: 15px; }
.v3:hover .v3__cta { color: #fff; }
.v3__cta .arrow { width: 0.85em; height: 0.85em; transition: transform 0.2s ease; }
.v3__cta:hover .arrow { transform: translateX(3px); }

/* ---------- Proof bands ---------- */
.proof-bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.proof-band { padding: 20px 18px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 6px; }
.bg-ink .proof-band { background: rgba(255,255,255,0.05); border-color: var(--line-on-dark); color: #fff; }
.bg-ink .proof-band strong { color: #fff; }
.proof-band strong { font-family: var(--display); font-size: clamp(17px, 1.4vw, 21px); color: var(--accent); letter-spacing: -0.02em; }
.proof-band span { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.bg-ink .proof-band span { color: rgba(255,255,255,0.78); }

/* ---------- Client slider ----------
   Two identical sets of names; the track slides left by exactly one set, so the
   loop is seamless. Items carry their own trailing space (not flex gap) so one
   set is exactly half the track. Swap names for logo <img>s in the same <li>s. */
.client-strip { margin-top: 8px; }
#companies-we-serve .client-strip { margin-top: 40px; }
.client-strip__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.client-strip__track {
  display: flex; align-items: center;
  width: max-content;
  margin: 0; padding: 0; list-style: none;
  animation: client-scroll 36s linear infinite;
}
.client-strip:hover .client-strip__track,
.client-strip.is-paused .client-strip__track { animation-play-state: paused; }
.client-strip__item {
  flex: none;
  display: flex; align-items: center;
  min-height: 56px;
  padding-right: 72px;
}
/* Each logo carries its own optically balanced height in --h (set inline), so a
   square-ish mark and a long wordmark read at similar weight. */
.client-strip__item img { display: block; height: var(--h, 34px); width: auto; max-width: none; }
/* On navy the full-colour logos lose their black wordmarks, so render them as
   single-colour white there. Light backgrounds keep the brand colours. */
#companies-we-serve .client-strip__item img { filter: brightness(0) invert(1); opacity: 0.9; }
@media (max-width: 720px) {
  .client-strip__item { min-height: 44px; padding-right: 48px; }
  .client-strip__item img { height: calc(var(--h, 34px) * 0.75); }
}
.client-strip__toggle {
  margin-top: 14px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.client-strip__toggle:hover { color: var(--ink); border-color: var(--ink); }
#companies-we-serve .client-strip__toggle { color: rgba(255,255,255,0.72); border-color: rgba(255,255,255,0.28); }
#companies-we-serve .client-strip__toggle:hover { color: #fff; border-color: #fff; }
@keyframes client-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .client-strip__viewport { -webkit-mask-image: none; mask-image: none; }
  .client-strip__track { animation: none; flex-wrap: wrap; width: auto; }
  .client-strip__item[aria-hidden="true"], .client-strip__toggle { display: none; }
}

/* ---------- Three-row photo+text section ---------- */
.three-rows { display: grid; grid-template-columns: 1fr; gap: 24px; }
.three-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px; padding: 28px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg); align-items: center; transition: background .25s ease, color .25s ease; }
.three-row:hover { background: var(--ink); color: #fff; }
.three-row__media { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 5/4; background: var(--canvas); }
.three-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Text-only variant (no media column) - one column, or the grid would split
   the heading and its paragraph into separate columns. */
.three-row--text { grid-template-columns: 1fr; }
.three-row__body h3 { font-family: var(--display); font-size: var(--fs-h3); margin-bottom: 10px; }
.three-row__body p { color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.three-row:hover .three-row__body p { color: rgba(255,255,255,0.80); }

@media (max-width: 900px) {
  .verticals3 { grid-template-columns: 1fr; }
  .three-row { grid-template-columns: 1fr; }
  .three-row__media { aspect-ratio: 16/10; }
}

/* ---------- Companies-we-serve tile grid override on About ---------- */
#companies-we-serve { background: var(--ink); color: #fff; }
#companies-we-serve .eyebrow { color: var(--accent); }
#companies-we-serve .eyebrow::before { background: var(--accent); }
#companies-we-serve h2 { color: #fff; }
#companies-we-serve .company-tile { background: rgba(255,255,255,0.04); border-color: var(--line-on-dark); }
#companies-we-serve .company-tile__name { color: rgba(255,255,255,0.85); }
#companies-we-serve .company-tile:hover { background: var(--accent); border-color: var(--accent); }
#companies-we-serve .company-tile:hover .company-tile__name { color: #fff; }

/* ---------- Contact form on dark contact page ---------- */
.bg-canvas.contact { background: var(--canvas); }

/* ---------- Layout primitives ---------- */
.shell { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 var(--gutter); }
.grid { display: grid; gap: 24px; }
.section { padding: var(--section) 0; position: relative; }

/* ---------- Top navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--gutter);
  background: rgba(11, 23, 42, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-on-dark);
}
.nav__brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;   /* keep "FBR Solutions" on one line - never wrap or clip the brand */
  flex-shrink: 0;        /* flexbox: brand has floor width, links/cta absorb squeeze */
}
.nav__brand .mark { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.nav__brand span {
  display: inline-block;
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,0.25);
  margin-left: 6px;
  white-space: nowrap;   /* hard lock - span text never breaks across lines */
}
.nav__links {
  display: flex; align-items: center; gap: 4px;
  list-style: none;      /* it's a <ul>: drop the UA margin/padding, which was
                            inflating the nav height and indenting the links */
  margin: 0;
  padding: 0;
  flex-wrap: wrap;       /* if even narrower, links wrap before they vanish */
  justify-content: flex-end;
  min-width: 0;
}
.nav__links a {
  position: relative;
  padding: 8px 14px;
  font-family: var(--display);
  font-size: 14px;
  color: rgba(255,255,255,0.9);   /* bump slightly so labels never look faded */
  border-radius: var(--r-btn);
  white-space: nowrap;            /* each link label stays on one line */
  transition: background 0.2s ease, color 0.2s ease;
}
.nav__links a:hover { background: rgba(255,255,255,0.10); color: #fff; }
.nav__links a.is-active { background: var(--accent); color: #fff; }
.nav__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: var(--accent); color: #fff;
  border-radius: var(--r-btn);
  font-family: var(--display); font-size: 14px;
  white-space: nowrap;   /* keep "Start a project" on one line */
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}
.nav__cta:hover { transform: translateY(-1px); background: var(--accent-2); }
.nav__cta .arrow { width: 0.9em; height: 0.9em; transition: transform 0.2s ease; }
.nav__cta:hover .arrow { transform: translateX(2px); }
.nav__burger { display: none; }
/* The in-menu CTA duplicates .nav__cta, so it only exists inside the open mobile panel */
.nav__mobile-only { display: none; }
/* Menu toggle: bars when closed, an X when open */
.nav__burger { align-items: center; justify-content: center; }
.nav__burger .icon { width: 20px; height: 20px; }
.nav__burger .icon--close,
.nav__burger[aria-expanded="true"] .icon--open { display: none; }
.nav__burger[aria-expanded="true"] .icon--close { display: block; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 140px 0 80px;   /* clears the fixed nav (max ~90px) with room to spare */
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  z-index: 0;          /* sits behind hero__inner - the bg must NOT cover the content */
  background:
    radial-gradient(1200px 700px at 70% 30%, rgba(0,158,224,0.18), transparent 60%),
    linear-gradient(180deg, #0B172A 0%, #0B172A 60%, #06101F 100%);
  overflow: hidden;
}
/* Animated cityscape - slow Ken Burns pan + zoom */
.hero__city {
  position: absolute;
  inset: 0;
  width: 120%;
  max-width: none;   /* override the global img { max-width: 100% } reset, which
                        otherwise caps this at 100% and leaves a bare strip at the right */
  height: 120%;
  left: -10%;
  top: -10%;
  object-fit: cover;
  object-position: center 70%;
  z-index: 0;
  pointer-events: none;
  animation: kenburns 30s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  0%   { transform: scale(1.05) translate3d(0, 0, 0); }
  100% { transform: scale(1.18) translate3d(-3%, -2%, 0); }
}
/* Same pan/zoom, but for elements that are centred with left:50% + translateX(-50%).
   The centring has to be re-stated here or the animation would drop it. */
@keyframes kenburns-centered {
  0%   { transform: translateX(-50%) scale(1.05) translate3d(0, 0, 0); }
  100% { transform: translateX(-50%) scale(1.18) translate3d(-3%, -2%, 0); }
}
/* Fiber-optic SVG layer */
.hero__fibers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.95;
}
.hero__fibers .fiber { stroke-dasharray: 4 6; animation: fiberdash 6s linear infinite; }
@keyframes fiberdash {
  to { stroke-dashoffset: -200; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__city, .hero__fibers .fiber {
    animation: none !important;
  }
}
.hero__bg::before {
  /* Navy overlay on top of the photo to keep the headline readable */
  content: "";
  position: absolute; inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(11,23,42,0.72) 0%, rgba(11,23,42,0.55) 55%, rgba(6,16,31,0.85) 100%);
  pointer-events: none;
}
.hero__bg::after {
  /* faint diagonal line texture along the bottom edge */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 220px;
  z-index: 4;
  background: repeating-linear-gradient(110deg, transparent 0 60px, rgba(0,158,224,0.06) 60px 61px),
              radial-gradient(ellipse at 50% 100%, rgba(0,158,224,0.18), transparent 60%);
  opacity: 0.6;
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 0;
  align-items: stretch;
  min-height: 78vh;
}
/* Current hero markup uses .shell.hero__inner instead of .hero__grid; make sure it paints above .hero__bg */
.shell.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  min-height: 60vh;
  padding-top: 24px;
}
.hero__left {
  padding: 40px 40px 80px 0;
  display: flex; flex-direction: column; gap: 36px;
  justify-content: center;
}
.hero__logo {
  width: clamp(96px, 10vw, 140px); max-width: 80%;
}
.hero__title {
  font-family: var(--display);
  max-width: 20ch;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  overflow-wrap: break-word;
}
.hero__title .blue { color: var(--accent); }
.hero__sub {
  font-family: var(--display);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5;
  max-width: 56ch;
  color: rgba(255,255,255,0.85);
}
.hero__sub .blue { color: var(--accent); font-weight: 500; }
.hero__cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px;
  border-radius: var(--r-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--display); font-size: 15px; font-weight: 500;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: #fff; border: 1px solid rgba(255,255,255,0.4); }
.btn--ghost:hover { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--ink { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn--accent-light { --btn-bg: var(--accent); --btn-fg: #fff; }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn .arrow {
  width: 0.95em; height: 0.95em;
  transition: transform 0.25s ease;
}
.btn:hover .arrow { transform: translateX(3px); }

.hero__right {
  position: relative;
  background: var(--canvas);
  color: var(--ink);
  padding: 60px 40px;
  border-left: 8px solid var(--ink);
  /* angled cut on the top edge */
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}
.hero__right h3 {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -0.01em;
  font-weight: 500;
  margin-bottom: 28px;
  color: var(--ink);
}
.workflow { display: grid; gap: 12px; }
.workflow-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(11,23,42,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.workflow-item:hover { transform: translateX(4px); box-shadow: 0 8px 24px rgba(0,158,224,0.15); }
.workflow-item img { width: 56px; height: 56px; border-radius: 50%; }
.workflow-item__label {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.workflow-item__bar {
  display: block; height: 3px; background: var(--accent); margin-top: 4px;
  width: 60%;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.workflow-item:hover .workflow-item__bar { width: 100%; }

/* ---------- Section base ---------- */
.bg-canvas { background: var(--canvas); color: var(--ink); }
.bg-ink    { background: var(--ink); color: #fff; }
.bg-light  { background: #fff; color: var(--ink); }

/* ---------- Thesis ---------- */
.thesis { background: #fff; color: var(--ink); }
.thesis__head {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 56px; align-items: start;
  margin-bottom: 56px;
}
.thesis__title { font-size: clamp(36px, 5.2vw, 78px); }
.thesis__title .blue { color: var(--accent); }
.thesis__pull {
  font-family: var(--display);
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.32;
  color: var(--ink-2);
  border-left: 2px solid var(--accent);
  padding-left: 22px;
}

.thesis__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.diff-card {
  padding: 24px 22px 28px;
  border-radius: var(--r-lg);
  background: var(--canvas);
  border: 1px solid var(--line-soft);
  transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
  display: flex; flex-direction: column; gap: 14px;
  height: 460px;            /* fixed equal height for all four cards */
  position: relative;
  overflow: hidden;
}
.diff-card:hover { background: var(--ink); color: #fff; transform: translateY(-4px); }
.diff-card__num {
  font-family: var(--mono); font-size: 13px; color: var(--muted);
  letter-spacing: 0.18em;
}
.diff-card:hover .diff-card__num { color: var(--accent); }
.diff-card__title { font-family: var(--display); font-size: 24px; letter-spacing: -0.02em; }
.diff-card__body { color: inherit; }

/* Image slot inside every diff-card - identical on all four */
.diff-card__media {
  width: 100%;
  height: 160px;
  border-radius: 12px;
  margin: -4px 0 4px;
  flex-shrink: 0;
  background-color: var(--canvas-2);       /* solid letterbox behind every photo */
  background-repeat: no-repeat;
}
.diff-card > img {
  width: 100%;
  max-height: 180px;
  height: auto;
  object-fit: contain;                     /* shrink-to-fit so the whole picture fits */
  background: var(--canvas-2);
  border-radius: 12px;
  display: block;
  margin: -4px 0 4px;
}

.diff-card--feature {
  background: var(--ink);
  color: #fff;
}
.diff-card--feature .diff-card__num { color: var(--accent); }
.diff-card--feature .diff-card__media {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 18px, rgba(255,255,255,0.10) 18px 36px);
  border-color: rgba(255,255,255,0.30);
  color: rgba(255,255,255,0.80);
}

/* ---------- Market ---------- */
.market { background: var(--ink); color: #fff; }
.market__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 56px; }
.market__title { font-size: clamp(36px, 5.4vw, 80px); }
.market__title .blue { color: var(--accent); }
.market__lede { color: rgba(255,255,255,0.78); font-size: 18px; max-width: 50ch; }
.market__pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pillar {
  position: relative;
  padding: 32px 28px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-on-dark);
  overflow: hidden;
  min-height: 320px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform 0.3s ease, background 0.3s ease;
}
.pillar:hover { transform: translateY(-6px); background: rgba(0,158,224,0.10); border-color: rgba(0,158,224,0.30); }
.pillar__num {
  font-family: var(--mono); font-size: 14px; color: var(--accent);
  letter-spacing: 0.16em;
}
.pillar__title { font-family: var(--display); font-size: 28px; }
.pillar__body { color: rgba(255,255,255,0.80); font-size: 15px; }
.pillar__deco {
  position: absolute; right: -60px; bottom: -80px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,158,224,0.30), transparent 70%);
}

/* ---------- Verticals ---------- */
.verticals { background: var(--canvas); }
.verticals__head {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 40px; gap: 32px;
}
.vertical-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  padding: 32px;
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid var(--line-soft);
  transition: background 0.3s ease, color 0.3s ease;
  align-items: stretch;
  margin-bottom: 24px;
}
.vertical-card:hover { background: var(--ink); color: #fff; }
.vertical-card .vc__media {
  border-radius: var(--r-lg);
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--ink);
  display: grid; place-items: center;
}
.vertical-card .vc__media img { width: 100%; height: 100%; object-fit: cover; }
.vertical-card__body { padding: 12px; display: flex; flex-direction: column; gap: 18px; }
.vertical-card__title { font-family: var(--display); font-size: clamp(28px, 3.6vw, 52px); color: var(--accent); }
.vertical-card:hover .vertical-card__title { color: #fff; }
.vertical-card__copy { color: inherit; font-size: 16px; }
.vertical-card__units {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px;
}
.unit-pill {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--canvas);
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.vertical-card:hover .unit-pill { background: rgba(255,255,255,0.10); color: #fff; }
.vertical-card__cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display);
  font-size: 16px;
  color: var(--accent);
}
.vertical-card:hover .vertical-card__cta { color: #fff; }
.vertical-card__cta .arrow { transition: transform 0.25s ease; }
.vertical-card__cta:hover .arrow { transform: translate(4px, -4px); }

.vertical-card--alt { grid-template-columns: 1fr 1.1fr; }
.vertical-card--alt .vc__media { order: 2; }

/* ---------- Platform / ProWorks ---------- */
.platform { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.platform__bg {
  position: absolute; inset: 0;
  background: radial-gradient(900px 500px at 12% 10%, rgba(0,158,224,0.20), transparent 60%);
}
.platform__inner { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; }
.platform__title { font-size: clamp(36px, 5.6vw, 84px); }
.platform__title .blue { color: var(--accent); }
.platform__copy { color: rgba(255,255,255,0.78); font-size: 17px; max-width: 52ch; }
.platform__features { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 24px; }
.feat {
  padding: 18px 18px 16px;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.04);
}
.feat__title { font-family: var(--display); font-size: 20px; margin-bottom: 6px; color: var(--accent); }
.feat__body  { color: rgba(255,255,255,0.80); font-size: 14px; }
.platform__viz {
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
  border: 1px solid var(--line-on-dark);
  padding: 22px;
  display: grid; place-items: center;
}
.platform__viz svg { width: 100%; height: auto; }

/* Stack of headshots in About - one under another. */
.team { background: var(--canvas); }
.team__head { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: end; margin-bottom: 40px; }
.team__list { display: grid; grid-template-columns: 1fr; gap: 28px; max-width: 980px; }
.team-member {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  align-items: center;
}
.team-member__photo {
  width: 220px; height: 220px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #e9eef3;
  filter: grayscale(100%);
}
.team-member__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: grayscale(100%) contrast(1.05) brightness(0.96);
}
.team-member__name { font-family: var(--display); font-size: 20px; letter-spacing: -0.01em; }
.team-member__role { font-family: var(--mono); font-style: italic; font-weight: 700;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin: 4px 0 10px; }
.team-member__bio { font-size: 15px; color: var(--ink-2); max-width: 70ch; }

@media (max-width: 720px) {
  .team__head { grid-template-columns: 1fr; gap: 18px; }
  .team-member { grid-template-columns: 1fr; }
  .team-member__photo { width: 100%; height: 220px; }
}

/* ---------- Priorities ---------- */
.priorities { background: var(--canvas); }
.priorities__head { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-bottom: 48px; }
.priorities__title { font-size: clamp(36px, 5.4vw, 78px); }
.prio-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.prio {
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 220px;
}
.prio:hover { transform: translateY(-3px); background: var(--ink); color: #fff; }
.prio__num {
  font-family: var(--display);
  font-size: 56px; line-height: 1;
  color: var(--accent);
}
.prio__title { font-family: var(--display); font-size: 22px; }
.prio__body { font-size: 14.5px; color: inherit; opacity: 0.85; }

/* ---------- Closing CTA ---------- */
.closing {
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.closing__bg {
  position: absolute; inset: 0;
  background: radial-gradient(1100px 600px at 100% 0%, rgba(0,158,224,0.20), transparent 60%);
}
.closing__inner { position: relative; }
.closing__title {
  font-family: var(--display);
  font-size: clamp(28px, 4.4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 20ch;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
/* Sentence-length closing headlines (the service pages) need a smaller scale -
   at the full size they run to four lines and swamp the lede and button below.
   This has to be a real modifier: a `.display-l` class here would lose to
   `.closing__title` on source order, which is why those had no effect. */
.closing__title--sm {
  font-size: clamp(24px, 3.2vw, 42px);
  line-height: 1.1;
  max-width: 30ch;
}
.closing__title .blue { color: var(--accent); }
.closing__row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 56px;
}
.closing__row .cell {
  padding: 24px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-on-dark);
}
.closing__row .cell .label { color: var(--accent); }
.closing__row .cell strong {
  display: block; margin-top: 6px;
  font-family: var(--display); font-size: 24px; font-weight: 500;
}
.closing__cta { margin-top: 56px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer { background: #06101F; color: #fff; padding: 80px 0 32px; }
.footer__grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px; padding-bottom: 56px;
  border-bottom: 1px solid var(--line-on-dark);
}
.footer__brand { display: flex; flex-direction: column; gap: 16px; max-width: 32ch; }
.footer__brand img { width: 56px; height: 56px; border-radius: 50%; }
.footer__brand p { color: rgba(255,255,255,0.65); }
.footer h6 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer ul a { color: #fff; }
.footer ul a:hover { color: var(--accent); }
.footer__reach li { display: flex; align-items: center; gap: 10px; }
.footer__reach .icon { width: 14px; height: 14px; color: var(--accent); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ---------- Sub-page header ---------- */
.page-head {
  padding: 160px 0 80px;
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-head__bg {
  position: absolute; inset: 0;
  z-index: 0;          /* sits behind page-head__inner - the bg must NOT cover the content.
                          Also traps the ::before/::after overlays (z-index 3/4) inside this
                          stacking context, matching .hero__bg. */
  background: radial-gradient(900px 600px at 80% 0%, rgba(0,158,224,0.30), transparent 60%);
}

/* Sub-page headers - same animated cityscape + fiber-pulse treatment as the home hero */
.page-head--hero { padding: 160px 0 80px; }
.page-head--hero .page-head__bg {
  /* Flat sky fallback only. The photo itself is the .page-head__city <img> below -
     painting it here too produced a second, offset copy and a visible vertical seam. */
  background: #06101F;
}
.page-head--hero .page-head__city {
  position: absolute;
  inset: 0;
  width: 100vw;            /* pull past .shell gutter - full bleed edge-to-edge */
  max-width: none;          /* override the global img { max-width: 100% } reset */
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center 70%;
  z-index: 0;
  pointer-events: none;
  /* Must carry the -50% centring in every keyframe - a plain `kenburns` would
     replace the transform above and shove the image ~50vw to the right. */
  animation: kenburns-centered 30s ease-in-out infinite alternate;
  will-change: transform;
}
.page-head--hero .page-head__fibers {
  position: absolute; inset: 0;
  width: 100vw;
  max-width: none;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.95;
}
.page-head--hero .page-head__fibers .fiber { stroke-dasharray: 4 6; animation: fiberdash 6s linear infinite; }
.page-head--hero .page-head__bg::before {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(180deg, rgba(11,23,42,0.72) 0%, rgba(11,23,42,0.55) 55%, rgba(6,16,31,0.85) 100%);
  pointer-events: none;
}
.page-head--hero .page-head__bg::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 220px;
  z-index: 4;
  background: repeating-linear-gradient(110deg, transparent 0 60px, rgba(0,158,224,0.06) 60px 61px),
              radial-gradient(ellipse at 50% 100%, rgba(0,158,224,0.18), transparent 60%);
  opacity: 0.6;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .page-head--hero .page-head__city,
  .page-head--hero .page-head__fibers .fiber { animation: none !important; }
}
.page-head__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: end; }
/* Grid tracks default to min-width:auto, so a long unbreakable headline word would
   blow the track out and drag the lede past the viewport with it. */
.page-head__inner > * { min-width: 0; }
.page-head__crumbs {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}
.page-head__title { font-size: var(--fs-h1-sub); line-height: 1.06; text-transform: uppercase; letter-spacing: -0.03em; overflow-wrap: break-word; }
.page-head__title .blue { color: var(--accent); }
.page-head__logo { width: clamp(80px, 8vw, 104px); margin-bottom: 20px; border-radius: 50%; }
.page-head__lede { font-size: var(--fs-lede); line-height: 1.5; color: rgba(255,255,255,0.80); max-width: 42ch; }

/* ---------- Sub-page blocks ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.stack { display: grid; gap: 20px; }

.bullet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.bullet {
  padding: 22px;
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  display: grid; gap: 10px;
}
.bg-ink .bullet { background: rgba(255,255,255,0.04); border-color: var(--line-on-dark); color: #fff; }
.bullet h3 { font-family: var(--display); font-size: 24px; }
.bullet .label { color: var(--accent); }
.bg-canvas .bullet .label { color: var(--accent); }

.callout {
  display: grid; grid-template-columns: 0.3fr 1fr; gap: 32px;
  padding: 32px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-xl);
  align-items: center;
}
.callout__num {
  font-family: var(--display);
  font-size: 80px;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
}
.callout h3 { font-family: var(--display); font-size: 28px; color: #fff; }
.callout p  { color: rgba(255,255,255,0.85); max-width: 56ch; }

/* ---------- Contact ---------- */
.contact { background: var(--canvas); }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact__card {
  background: var(--ink); color: #fff;
  padding: 40px; border-radius: var(--r-xl);
  display: grid; gap: 18px;
}
.contact__card .label { color: var(--accent); }
.contact__card h2 { font-family: var(--display); font-size: clamp(26px, 3vw, 40px); text-transform: uppercase; letter-spacing: -0.025em; font-weight: 800; }
.contact__list { display: grid; gap: 14px; margin-top: 16px; }
.contact__list .row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0; border-top: 1px solid var(--line-on-dark);
}
.contact__list .row:last-child { border-bottom: 1px solid var(--line-on-dark); }
.contact__list .row span:first-child { color: var(--accent); font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.contact__list .row span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.contact__list .icon { width: 14px; height: 14px; }
.contact__list .row span:last-child { font-family: var(--display); font-size: 16px; }

.form { display: grid; gap: 14px; background: #fff; padding: 32px; border-radius: var(--r-xl); border: 1px solid var(--line-soft); }
.form .field { display: grid; gap: 6px; }
.form label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.form input, .form textarea, .form select {
  width: 100%;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font: inherit;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease;
}
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--accent); }
.form textarea { min-height: 140px; resize: vertical; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__submit { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__right { clip-path: none; border-left: none; border-top: 4px solid var(--ink); }
  .thesis__head,
  .market__head,
  .platform__inner,
  .page-head__inner,
  .priorities__head,
  .contact__grid { grid-template-columns: 1fr; gap: 32px; }
  .thesis__grid,
  .market__pillars,
  .prio-list,
  .closing__row { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
/* Nav collapses to the burger well before 720px: below ~1000px the six links + CTA
   no longer fit on one row and .nav__links would wrap, doubling the nav height. */
@media (max-width: 1000px) {
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; padding: 10px 14px; background: var(--accent); color: #fff; border-radius: var(--r-btn); font-family: var(--display); font-size: 14px; }
  .nav__cta { display: none; }

  /* Drop-down panel. Navy to match the nav - the previous inline-JS styling used a
     cream background behind white link text, which made the labels unreadable. */
  .nav__links.is-open {
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    right: var(--gutter);
    left: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    background: rgba(11, 23, 42, 0.97);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid var(--line-on-dark);
    border-radius: var(--r-md);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
  }
  .nav__links.is-open a { display: block; padding: 12px 14px; font-size: 15px; border-radius: var(--r-btn); }
  /* Keep the primary CTA reachable on mobile - it is hidden in the bar itself. */
  .nav__links.is-open .nav__mobile-only { display: block; margin-top: 6px; }
  .nav__links.is-open .nav__cta-mobile {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--accent); color: #fff;
  }
  .nav__links.is-open .nav__cta-mobile:hover { background: var(--accent-2); }
}
@media (max-width: 720px) {
  .thesis__grid,
  .market__pillars,
  .prio-list,
  .vertical-card,
  .vertical-card--alt,
  .platform__features,
  .bullet-grid,
  .closing__row,
  .footer__grid,
  .company-tiles { grid-template-columns: 1fr; }
  .vertical-card--alt .vc__media { order: 0; }
  .callout { grid-template-columns: 1fr; }
  .callout__num { font-size: 56px; }
  .footer__bottom { flex-direction: column; gap: 8px; }
  .form .row2 { grid-template-columns: 1fr; }
}

/* ---------- Companies We Serve tile grid ---------- */
.company-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.company-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 28px 20px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  text-align: center;
}
.company-tile:hover {
  transform: translateY(-3px);
  background: var(--ink);
  color: #fff;
  border-color: var(--accent);
}
.company-tile__name {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: inherit;
  line-height: 1.15;
}
.company-tile__logo {
  max-width: 70%;
  max-height: 56px;
  object-fit: contain;
  display: block;
  margin: 0 auto 10px;
  opacity: 0.9;
}
@media (max-width: 1100px) { .company-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .company-tiles { grid-template-columns: repeat(2, 1fr); } }