/* =========================================================
   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); } }


/* --- mockup-only additions --- */
.mockup-banner { font-family: var(--body); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  background: #1b2a42; color: #9fc6e8; text-align: center; padding: 6px 12px; }
/* --- hamburger dropdown nav --- */
.nav__right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.nav__dd { position: relative; }
.nav__burger { display: inline-flex; }
.nav__menu { display: none; position: absolute; top: calc(100% + 12px); right: 0; z-index: 60;
  min-width: 240px; padding: 10px; margin: 0; list-style: none;
  background: var(--ink-2); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
  box-shadow: 0 24px 48px rgba(4,10,20,0.45); }
.nav__dd.is-open .nav__menu { display: block; }
.nav__menu li + li { margin-top: 2px; }
.nav__menu a { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 14px; border-radius: 8px; color: rgba(255,255,255,0.82);
  font-family: var(--display); font-size: 15px; font-weight: 600; text-decoration: none; }
.nav__menu a:hover { background: rgba(0,158,224,0.14); color: #fff; }
.nav__menu a.is-active { background: rgba(0,158,224,0.2); color: #fff; }
@media (max-width: 1000px) { .nav__right { width: 100%; justify-content: flex-end; } }
.nav .nav__burger { display: inline-flex !important; color: #fff; background: none; border: none; cursor: pointer; }
.verticals3 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px; }
@media (max-width: 900px) { .verticals3 { grid-template-columns: 1fr !important; } }
.sec-head { margin-bottom: 48px; }
.vgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 48px; }
.vgrid .v3 { flex: 0 1 var(--colw); min-width: 240px; max-width: 420px; }
.vgrid.cols2 .v3 { --colw: calc((100% - 20px)/2); }
.vgrid.cols3 .v3 { --colw: calc((100% - 40px)/3); }
.vgrid.cols4 .v3 { --colw: calc((100% - 60px)/4); min-height: 280px; }
.bgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
.bgrid .proof-band { flex: 0 1 var(--colw); min-width: 220px; box-sizing: border-box; }
.bgrid.cols3 .proof-band { --colw: calc((100% - 28px)/3); }
.bgrid.cols4 .proof-band { --colw: calc((100% - 42px)/4); }
.workflow { margin-top: 48px !important; }
.workflow-item__label .wi-desc { display: block; font-family: var(--body); font-size: 14px; letter-spacing: 0;
  text-transform: none; color: var(--ink-2); margin-top: 4px; font-weight: 400; }



/* =========================================================
   v5 - header backdrop
   The city photograph is gone from the home hero and every
   page header. What is left is a CSS-only field: deep navy,
   a fine engineering grid, and a cyan horizon glow. The
   animated fiber paths stay as the brand signature.
   ========================================================= */
.hero__bg,
.page-head--hero .page-head__bg {
  background:
    radial-gradient(1100px 620px at 76% 4%, rgba(0,158,224,0.20), transparent 62%),
    radial-gradient(820px 400px at 8% 100%, rgba(0,158,224,0.10), transparent 70%),
    linear-gradient(178deg, #0C1A30 0%, #0A1526 56%, #06101F 100%);
}

/* Scrim only - no longer needs to fight a photograph */
.hero__bg::before,
.page-head--hero .page-head__bg::before {
  background: linear-gradient(180deg, rgba(11,23,42,0.35) 0%, rgba(9,18,33,0.14) 45%, rgba(6,16,31,0.72) 100%);
}

/* Grid + horizon, faded out toward the edges so it never looks tiled */
.hero__bg::after,
.page-head--hero .page-head__bg::after {
  top: 0; bottom: 0; height: auto;
  opacity: 1;
  background:
    repeating-linear-gradient(90deg, rgba(126,186,232,0.055) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg,  rgba(126,186,232,0.055) 0 1px, transparent 1px 92px),
    radial-gradient(ellipse 72% 58% at 50% 106%, rgba(0,158,224,0.18), transparent 72%);
  -webkit-mask-image: radial-gradient(135% 105% at 50% 0%, #000 18%, transparent 82%);
          mask-image: radial-gradient(135% 105% at 50% 0%, #000 18%, transparent 82%);
}
/* Page headers sit lower on the page, so ease the grid off a touch */
.page-head--hero .page-head__bg::after {
  background:
    repeating-linear-gradient(90deg, rgba(126,186,232,0.045) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg,  rgba(126,186,232,0.045) 0 1px, transparent 1px 92px),
    radial-gradient(ellipse 72% 58% at 50% 108%, rgba(0,158,224,0.14), transparent 72%);
}


/* =========================================================
   v5 - nav: hover to expand
   The menu now expands when the pointer enters the hamburger,
   and retracts as soon as a page is chosen or the pointer
   leaves. Click still toggles, so touch and keyboard work.
   ========================================================= */
.nav__menu {
  display: block;                 /* was display:none - now animated instead */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .16s ease, transform .2s cubic-bezier(.2,.75,.25,1), visibility .16s;
}
.nav__dd.is-open .nav__menu,
.nav__dd.is-hover .nav__menu {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
/* Invisible bridge across the 12px gap, so the menu doesn't
   close while the pointer travels from button to panel */
.nav__dd::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height: 12px;
}
/* Expanded state reads as "close": bars swap to X */
.nav__dd.is-hover .nav__burger .icon--open,
.nav__dd.is-hover .nav__burger .icon--close { display: none; }
.nav__dd.is-hover .nav__burger .icon--close { display: block; }
.nav__dd.is-hover .nav__burger { color: var(--accent); }

/* Stagger the items for a touch more life */
.nav__menu li {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .18s ease;
}
.nav__dd.is-open .nav__menu li,
.nav__dd.is-hover .nav__menu li { opacity: 1; transform: none; }
.nav__menu li:nth-child(1) { transition-delay: .02s; }
.nav__menu li:nth-child(2) { transition-delay: .035s; }
.nav__menu li:nth-child(3) { transition-delay: .05s; }
.nav__menu li:nth-child(4) { transition-delay: .065s; }
.nav__menu li:nth-child(5) { transition-delay: .08s; }
.nav__menu li:nth-child(6) { transition-delay: .095s; }
.nav__menu li:nth-child(7) { transition-delay: .11s; }
.nav__menu li:nth-child(8) { transition-delay: .125s; }
.nav__menu li:nth-child(9) { transition-delay: .14s; }
.nav__menu li:nth-child(10) { transition-delay: .155s; }

@media (prefers-reduced-motion: reduce) {
  .nav__menu, .nav__menu li { transition: none !important; }
}
/* Touch / small screens keep the plain tap-to-open behaviour */
@media (hover: none) {
  .nav__dd.is-hover .nav__menu { opacity: 0; visibility: hidden; pointer-events: none; }
}


/* =========================================================
   v6 - header: menu left | logo centre | search right
   ========================================================= */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.nav__left { display: flex; align-items: center; justify-self: start; }
.nav__right { justify-self: end; margin-left: 0; gap: 8px; }
.nav__brand { justify-self: center; }
/* The wordmark now sits centre stage, so give it a little more presence */
.nav__brand .mark { width: 42px; height: 42px; }
.nav__brand span { font-size: 17px; letter-spacing: 0.01em; }

.nav__burger {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 12px;
  border-radius: var(--r-btn);
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.16);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.nav__burger:hover,
.nav__dd.is-hover .nav__burger {
  background: rgba(0,158,224,0.16);
  border-color: rgba(0,158,224,0.55);
  color: #fff;
}
.nav__burger-label { line-height: 1; }
.nav__burger .icon { width: 17px; height: 17px; }

/* Menu drops from the left edge now */
.nav__menu {
  right: auto;
  left: 0;
  min-width: 268px;
  transform-origin: top left;
  padding: 8px;
  border-radius: 10px;
}
.nav__dd::after { right: auto; left: 0; width: 100%; }
.nav__menu-head {
  padding: 8px 12px 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.42);
}
.nav__menu-list { list-style: none; margin: 0; padding: 0; }
.nav__menu a { font-size: 14px; padding: 9px 12px; }
.nav__menu-cta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding: 11px 14px;
  border-radius: var(--r-btn);
  background: var(--accent); color: #fff;
  font-family: var(--display); font-size: 13px; font-weight: 700;
  text-decoration: none;
}
.nav__menu-cta:hover { background: var(--accent-2); }
.nav__menu-cta .arrow { width: 12px; height: 12px; }

/* Search trigger */
.nav__search {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px;
  border-radius: var(--r-btn);
  border: 1px solid rgba(255,255,255,0.16);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.nav__search:hover { background: rgba(0,158,224,0.16); border-color: rgba(0,158,224,0.55); }
.nav__search .icon { width: 16px; height: 16px; }
.nav__search-key {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.62);
}
.nav__search:hover .nav__search-key { color: #fff; }

@media (max-width: 1000px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav__brand { justify-self: center; }
  .nav__burger-label, .nav__search-key { display: none; }
  .nav__brand .mark { width: 38px; height: 38px; }
}
@media (max-width: 1000px) { .nav__right { width: auto; } }

/* =========================================================
   v6 - search panel
   ========================================================= */
.search { position: fixed; inset: 0; z-index: 200; }
.search[hidden] { display: none; }
.search__scrim {
  position: absolute; inset: 0;
  background: rgba(4,10,20,0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: searchFade .16s ease both;
}
.search__panel {
  position: relative;
  width: min(760px, calc(100vw - 32px));
  margin: 96px auto 0;
  max-height: calc(100vh - 140px);
  display: flex; flex-direction: column;
  background: #0E1B2E;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  box-shadow: 0 40px 90px rgba(2,7,16,0.6);
  overflow: hidden;
  animation: searchIn .2s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes searchFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes searchIn { from { opacity: 0; transform: translateY(-10px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .search__scrim, .search__panel { animation: none; } }

.search__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.search__icon { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.search__input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  color: #fff;
  font-family: var(--body); font-size: 16px;
}
.search__input::placeholder { color: rgba(255,255,255,0.4); }
.search__input::-webkit-search-cancel-button { display: none; }
.search__close {
  display: inline-flex; padding: 6px;
  border-radius: 6px; border: 0; background: transparent;
  color: rgba(255,255,255,0.55); cursor: pointer;
}
.search__close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.search__close .icon { width: 14px; height: 14px; }

.search__chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.search__chips-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
  margin-right: 4px;
}
.chip {
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: transparent; color: rgba(255,255,255,0.72);
  font-family: var(--body); font-size: 12px; cursor: pointer;
  transition: all .14s ease;
}
.chip:hover { border-color: var(--accent); color: #fff; background: rgba(0,158,224,0.14); }

.search__status {
  padding: 14px 18px;
  font-size: 12.5px; color: rgba(255,255,255,0.45);
}
.search__status:empty { display: none; }
.search__results { overflow-y: auto; padding: 0 10px 10px; }
.search__results::-webkit-scrollbar { width: 8px; }
.search__results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }

/* Horizontal rail of real page previews */
.search__panel { width: min(1040px, calc(100vw - 32px)); }
.search__results {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 18px 18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.search__results::-webkit-scrollbar { height: 8px; }
.search__results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 4px; }
.search__results::-webkit-scrollbar-track { background: transparent; }

.sr {
  flex: 0 0 268px;
  width: 268px;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: #0B1728;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: border-color .15s ease, transform .18s ease, box-shadow .18s ease;
}
.sr:hover, .sr.is-active {
  border-color: rgba(0,158,224,0.65);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(2,7,16,0.5);
}

/* The preview is a real, scaled-down clone of the destination section */
.sr__shot {
  position: relative;
  height: 148px;
  overflow: hidden;
  background: #08111F;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sr__shot-inner {
  position: absolute;
  top: 0; left: 0;
  width: 1120px;
  transform: scale(0.239);
  transform-origin: top left;
  pointer-events: none;
  filter: saturate(1.02);
}
.sr__shot-inner * { pointer-events: none !important; }
.sr__shot-inner .client-strip__track { animation: none !important; }
.sr__shot::after {   /* soft fade so the crop doesn't end on a hard edge */
  content: ""; position: absolute; inset: auto 0 0 0; height: 34px;
  background: linear-gradient(0deg, rgba(8,17,31,0.95), transparent);
  pointer-events: none;
}
.sr__tag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 3px 7px;
  border-radius: 3px;
  background: rgba(4,10,20,0.78);
  border: 1px solid rgba(0,158,224,0.5);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #fff;
}
.sr__body { padding: 12px 14px 14px; min-width: 0; }
.sr__eyebrow {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.sr__title {
  margin: 5px 0 6px;
  font-family: var(--display); font-size: 14px; font-weight: 700; line-height: 1.25;
  color: #fff; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sr__snip {
  font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.52);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sr mark { background: rgba(0,158,224,0.32); color: #fff; border-radius: 2px; padding: 0 1px; }
.sr__count {
  display: block; margin-top: 9px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.34);
}
.sr__open {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  font-family: var(--display); font-size: 11px; font-weight: 700;
  color: var(--accent); letter-spacing: 0.02em;
}
.sr__open .icon { width: 10px; height: 10px; }
.sr:hover .sr__open .icon { transform: translateX(2px); }
.sr__open .icon { transition: transform .16s ease; }

/* rail arrows */
.search__rail { position: relative; }
.search__nav {
  position: absolute; top: 60px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: rgba(11,23,42,0.92);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff; cursor: pointer;
  box-shadow: 0 6px 18px rgba(2,7,16,0.55);
}
.search__nav:hover { background: var(--accent); border-color: var(--accent); }
.search__nav .icon { width: 12px; height: 12px; }
.search__nav--prev { left: 2px; }
.search__nav--next { right: 2px; }
.search__rail.has-overflow .search__nav { display: flex; }
.search__nav[disabled] { opacity: 0.28; cursor: default; }
.search__nav[disabled]:hover { background: rgba(11,23,42,0.92); border-color: rgba(255,255,255,0.18); }

/* Flash the matched block so the user sees where the answer is */
.flash-hit {
  animation: flashHit 2.2s ease-out 1;
  outline: 2px solid rgba(0,158,224,0.0);
}
@keyframes flashHit {
  0%, 12% { outline-color: rgba(0,158,224,0.95); background: rgba(0,158,224,0.10); }
  100%    { outline-color: rgba(0,158,224,0); background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .flash-hit { animation: none; outline: 2px solid var(--accent); } }


/* =========================================================
   v7 - home hero: logo intro + image carousel
   Sequence on load: ring draws around the logo -> logo fades
   in -> tagline fades up -> the carousel is handed over.
   ========================================================= */
/* NOTE: the base rule is .shell.hero__inner (0,2,0), so the override has to
   match that specificity or align-items:flex-start wins and the stage
   collapses to the max-content width of all eight slides at once. */
.hero { padding: 96px 0 52px; }
.shell.hero__inner {
  gap: 26px;
  min-height: 0;
  align-items: stretch;      /* stage fills the shell width, not the slides' total */
}
.hero__stage { position: relative; width: 100%; max-width: 100%; min-width: 0; }
.carousel { width: 100%; min-width: 0; }

/* ---------- carousel shell ---------- */
.carousel { position: relative; }
.carousel__viewport {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
  border-radius: 8px;
  /* clip the neighbours' glow */
  isolation: isolate;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__viewport.is-locked { overflow-x: hidden; }
.carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  scroll-snap-align: center;
  position: relative;
  height: clamp(200px, 30vh, 380px);
  overflow: hidden;
  border-radius: 8px;
  opacity: 0.35;
  transform: scale(0.965);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.25,1);
}
.carousel__slide.is-active { opacity: 1; transform: none; }
.carousel__media {
  display: block;
  width: 100%;
  height: 100%;
  --slot-bg: #0C1A30;
  --slot-border: rgba(126,186,232,0.28);
}
.carousel__meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; gap: 14px;
  padding: 54px 24px 20px;
  background: linear-gradient(0deg, rgba(4,10,20,0.88) 0%, rgba(4,10,20,0.35) 55%, transparent 100%);
  pointer-events: none;
}
.carousel__num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--accent);
}
.carousel__name {
  font-family: var(--display); font-size: clamp(16px, 1.6vw, 21px);
  font-weight: 700; letter-spacing: -0.01em; color: #fff;
}

/* ---------- the logo plate (slide 1) ---------- */
.carousel__slide--logo {
  display: grid;
  place-items: center;
  background:
    radial-gradient(640px 420px at 50% 48%, rgba(0,158,224,0.13), transparent 70%),
    linear-gradient(178deg, #0C1A30 0%, #091426 60%, #06101F 100%);
  opacity: 1;
  transform: none;
}
.logo-plate { position: relative; display: grid; place-items: center; width: clamp(150px, 15vw, 210px); height: clamp(150px, 15vw, 210px); }
.logo-plate__ring {
  position: absolute; inset: -26%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 250deg, rgba(0,158,224,0.05) 300deg, #25B6FF 352deg, #8FE2FF 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  opacity: 0;
  transform: rotate(-90deg) scale(0.86);
  filter: drop-shadow(0 0 6px rgba(0,158,224,0.9));
}
.logo-plate__bloom {
  position: absolute; inset: -42%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,158,224,0.35), transparent 62%);
  opacity: .55;
}
.hero__logo {
  position: relative;
  width: 100%; height: auto; max-width: none;
  opacity: 1;
  transform: none;
  filter: drop-shadow(0 14px 34px rgba(2,7,16,0.55));
}

/* ---------- the intro sequence ----------
   The ring sweep is decorative CSS. The logo and copy reveal is driven by
   JS with transitions, and JS always ends by forcing them visible, so the
   hero can never be left blank if a timeline is throttled or a script is
   late. */
.logo-plate__ring { animation: ringSweep 1.05s cubic-bezier(.35,.1,.2,1) both,
                                ringPulse .9s ease-in-out 1.05s both; }
@keyframes ringSweep {
  0%   { opacity: 0; transform: rotate(-90deg) scale(0.86); }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(268deg) scale(1); }
}
@keyframes ringPulse {
  0%   { opacity: 1; filter: drop-shadow(0 0 6px rgba(0,158,224,0.9)); }
  55%  { opacity: 0.85; filter: drop-shadow(0 0 22px rgba(0,158,224,0.85)); }
  100% { opacity: 0; filter: drop-shadow(0 0 40px rgba(0,158,224,0)); transform: rotate(268deg) scale(1.06); }
}
.logo-plate__bloom { opacity: .55; animation: bloomBreath 6s ease-in-out infinite; }
@keyframes bloomBreath {
  0%, 100% { opacity: .42; transform: scale(1); }
  50%      { opacity: .72; transform: scale(1.05); }
}

/* Pre-intro state: hidden. Without the .is-intro class everything is
   already visible, so a dead script still leaves a complete hero. */
/* The logo and copy are always visible. The intro is carried entirely by
   the ring sweep and a soft glow pulse, so a throttled or blocked timeline
   can never leave the hero blank. */
.hero__stage.is-intro .hero__logo {
  animation: logoGlow 1.4s ease-out both;
}
@keyframes logoGlow {
  0%   { filter: drop-shadow(0 0 26px rgba(0,158,224,0.85)) brightness(1.3); }
  100% { filter: drop-shadow(0 12px 30px rgba(2,7,16,0.5)) brightness(1); }
}
.hero__stage.is-intro .hero__copy { animation: copyRise 1s cubic-bezier(.2,.8,.25,1) both; }
@keyframes copyRise {
  0%   { transform: translateY(8px); }
  100% { transform: none; }
}


@media (prefers-reduced-motion: reduce) {
  .logo-plate__ring { animation: none !important; opacity: .9; }
  .logo-plate__bloom { animation: none !important; }
  .hero__stage.is-intro .hero__logo,
  .hero__stage.is-intro .hero__copy { opacity: 1; transform: none; filter: none; }
  .hero__logo, .hero__copy { transition: none; }
}

/* ---------- arrows + dots ---------- */
.carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11,23,42,0.78);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff; cursor: pointer;
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s ease, background .16s ease, border-color .16s ease;
}
.carousel:hover .carousel__arrow,
.carousel__arrow:focus-visible,
.carousel__viewport.is-ready + .carousel__arrow { opacity: 1; }
.carousel__arrow:hover { background: var(--accent); border-color: var(--accent); }
.carousel__arrow .icon { width: 13px; height: 13px; }
.carousel__arrow--prev { left: 14px; }
.carousel__arrow--next { right: 14px; }

.carousel__dots {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 14px;
}
.carousel__dot {
  width: 26px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.22);
  border: 0; padding: 0; cursor: pointer;
  transition: background .2s ease, width .25s ease;
}
.carousel__dot:hover { background: rgba(255,255,255,0.45); }
.carousel__dot.is-active { background: var(--accent); width: 46px; }

/* Hand-over: the carousel starts advancing only once the intro is done */
.carousel__viewport { cursor: grab; }
.carousel__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
@media (hover: none) { .carousel__arrow { display: none; } }


/* ---------- hero type & spacing (kept compact so the band fits a laptop) ---------- */
.hero { padding: 96px 0 52px; }
.shell.hero__inner { gap: 26px; min-height: 0; align-items: stretch; }
.hero__tagline {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: clamp(10px, .95vw, 12px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex; align-items: center; gap: 14px;
}
.hero__tagline::before {
  content: ""; width: clamp(28px, 5vw, 64px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
  flex-shrink: 0;
}
.hero__title {
  max-width: 22ch;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.07;
  letter-spacing: -0.028em;
  margin: 0;
}
.hero__sub {
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.5;
  max-width: 52ch;
  color: rgba(255,255,255,0.82);
  margin: 14px 0 0;
}
.hero__cta-row { margin-top: 22px; gap: 12px; }
.hero .btn { padding: 13px 22px; font-size: 13.5px; }
.carousel__dots { margin-top: 14px; }


/* ---------- hero metrics: fit one screen on a laptop, no smaller than comfortable ---------- */
.hero { padding: 88px 0 40px; }
.shell.hero__inner { gap: 20px; min-height: 0; align-items: stretch; }
.hero__stage { width: 100%; max-width: 100%; min-width: 0; }
.carousel__slide { height: clamp(170px, 25vh, 300px); }
.hero__tagline {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: clamp(10px, .9vw, 12px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex; align-items: center; gap: 14px;
}
.hero__tagline::before {
  content: ""; width: clamp(26px, 4.5vw, 58px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
  flex-shrink: 0;
}
.hero__title {
  max-width: 22ch;
  font-size: clamp(24px, 3.1vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
}
.hero__sub {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.5;
  max-width: 52ch;
  color: rgba(255,255,255,0.82);
  margin: 12px 0 0;
}
.hero__cta-row { margin-top: 20px; gap: 12px; }
.hero .btn { padding: 12px 20px; font-size: 13.5px; }
.carousel__dots { margin-top: 12px; }


/* Empty carousel slides should still read as a designed panel, not a void.
   The moment a real photo is dropped in it covers this. */
.carousel__slide:not(.carousel__slide--logo) {
  background:
    radial-gradient(680px 380px at 78% 8%, rgba(0,158,224,0.17), transparent 64%),
    linear-gradient(178deg, #0E1F38 0%, #0A1626 62%, #071120 100%);
}
.carousel__slide:not(.carousel__slide--logo)::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(126,186,232,0.055) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg,  rgba(126,186,232,0.055) 0 1px, transparent 1px 74px);
  -webkit-mask-image: radial-gradient(120% 110% at 50% 0%, #000 10%, transparent 82%);
          mask-image: radial-gradient(120% 110% at 50% 0%, #000 10%, transparent 82%);
  pointer-events: none;
}
/* The drop target itself should not paint its own empty-state chrome over
   that panel - keep only a subtle dashed affordance. */
.carousel__media[data-empty] { background: transparent !important; }


/* =========================================================
   v8 - simple, robust hero (menu/logo/search header unchanged)
   Rows: copy block first, carousel beneath. No filters, masks or
   blend modes on text nodes; nothing hides content on load.
   ========================================================= */
.hero { padding: 92px 0 44px; background: var(--ink); }
.hero__bg { display: none; }
.shell.hero__inner {
  display: flex; flex-direction: column; gap: 26px;
  align-items: stretch; min-height: 0; max-width: 1480px;
}
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; opacity: 1; }
.hero__logowrap { position: relative; width: 108px; height: 108px; margin-bottom: 18px; }
.hero__logo { width: 108px; height: 108px; max-width: 108px; opacity: 1; transform: none; }
.hero__ring {
  position: absolute; inset: -14px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,158,224,0.55);
  box-shadow: 0 0 18px rgba(0,158,224,0.45), inset 0 0 14px rgba(0,158,224,0.30);
  opacity: 0;
}
.hero.is-intro .hero__ring { animation: ringOut 1.5s ease-out both; }
@keyframes ringOut {
  0%   { opacity: 0; transform: scale(.72) rotate(-40deg); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.28) rotate(180deg); }
}
.hero__tagline {
  margin: 0 0 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--accent);
}
.hero__title {
  margin: 0; max-width: 22ch;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(26px, 3.2vw, 40px); line-height: 1.08;
  letter-spacing: -0.025em; text-transform: uppercase; color: #fff;
}
.hero__sub {
  margin: 12px 0 0; max-width: 52ch;
  font-family: var(--display); font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.5; color: rgba(255,255,255,0.82);
}
.hero__cta-row { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero .btn { padding: 12px 20px; font-size: 13.5px; }

.hero__stage { width: 100%; min-width: 0; }
.carousel__viewport {
  display: flex; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 8px;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__slide {
  flex: 0 0 auto;
  width: min(560px, 78vw);
  height: clamp(160px, 22vh, 240px);
  scroll-snap-align: center;
  position: relative; overflow: hidden; border-radius: 8px;
  background: #0E1F38;
  border: 1px solid rgba(126,186,232,0.20);
}
.carousel__media { display: block; width: 100%; height: 100%; }
.carousel__meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; gap: 12px;
  padding: 40px 18px 14px;
  background: linear-gradient(0deg, rgba(4,10,20,0.88), transparent);
  pointer-events: none;
}
.carousel__num { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--accent); }
.carousel__name { font-family: var(--display); font-size: 15px; font-weight: 700; color: #fff; }
.carousel__dots { display: flex; gap: 8px; justify-content: flex-start; margin-top: 14px; }
.carousel__dot { width: 22px; height: 3px; border: 0; border-radius: 2px; background: rgba(255,255,255,0.22); cursor: pointer; transition: background .2s, width .2s; }
.carousel__dot.is-active { background: var(--accent); width: 40px; }
.carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11,23,42,0.85); border: 1px solid rgba(255,255,255,0.22);
  color: #fff; cursor: pointer;
}
.carousel__arrow:hover { background: var(--accent); border-color: var(--accent); }
.carousel__arrow .icon { width: 12px; height: 12px; }
.carousel__arrow--prev { left: 10px; }
.carousel__arrow--next { right: 10px; }
@media (hover: none) { .carousel__arrow { display: none; } }


/* Final hero fit: keep the whole band within one laptop screen */
.hero { padding: 84px 0 34px; }
.shell.hero__inner { gap: 20px; }
.hero__logowrap { width: 88px; height: 88px; margin-bottom: 12px; }
.hero__logo { width: 88px; height: 88px; max-width: 88px; }
.hero__tagline { margin-bottom: 10px; }
.hero__sub { margin-top: 10px; }
.hero__cta-row { margin-top: 16px; }
.carousel__slide { height: clamp(140px, 19vh, 200px); }
.carousel__dots { margin-top: 10px; }


/* =========================================================
   v9 - hero: background image track + verbiage on top
   The image layer is absolutely positioned behind everything, so
   the copy always sits over it. Transitions are slow crossfades.
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 96px 0 56px;
  min-height: clamp(520px, 76vh, 760px);
  display: flex; align-items: center;
  background: #081324;
}
.hero__inner { position: relative; z-index: 3; width: 100%; }
.shell.hero__inner {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0; min-height: 0;
}

/* --- image layer --- */
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(.4,0,.3,1);
  will-change: opacity;
  background:
    radial-gradient(900px 560px at 74% 16%, rgba(0,158,224,0.20), transparent 66%),
    linear-gradient(176deg, #0E2138 0%, #0A1728 58%, #06101F 100%);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide__media {
  display: block; width: 100%; height: 100%;
  --slot-bg: transparent; --slot-border: transparent;
}
.hero-slide__meta {
  position: absolute; right: 0; bottom: 74px;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 14px;
  background: rgba(4,10,20,0.62);
  border: 1px solid rgba(126,186,232,0.28);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.86);
  backdrop-filter: blur(8px);
  transition: opacity .9s ease;
}
.hero-slide__meta span { color: var(--accent); }

/* Readability veil between image and copy */
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(6,14,26,0.94) 0%, rgba(6,14,26,0.86) 34%, rgba(6,14,26,0.52) 62%, rgba(6,14,26,0.30) 100%),
    linear-gradient(0deg, rgba(6,14,26,0.88) 0%, transparent 44%);
  pointer-events: none;
}

/* --- verbiage --- */
.hero__copy { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; max-width: 640px; }
.hero__logowrap { position: relative; width: 176px; height: 176px; margin-bottom: 26px; display: grid; place-items: center; }
.hero__logo {
  position: relative; z-index: 2;
  width: 176px; height: 176px; max-width: 176px;
  opacity: 1; transform: none;
}
/* Two counter-rotating rings, drawn thin, that keep sweeping the
   circumference while the logo is still hidden. */
.hero__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg 232deg, rgba(0,158,224,0.10) 288deg, #2FBBFF 350deg, #B7ECFF 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity: 0;
}
.hero__ring--2 { inset: -22px; opacity: 0; }
.hero__ring { animation: ringSpin 1s linear infinite; }
.hero__ring--2 { animation: ringSpinRev 1.35s linear infinite; }
@keyframes ringSpin    { to { transform: rotate(360deg); } }
@keyframes ringSpinRev { to { transform: rotate(-360deg); } }

/* Intro: rings visible while the logo is hidden, then they fade.
   Logo lands at 2.5s; rings fade out 2.5-3.4s. */
.hero.is-intro .hero__ring   { animation: ringSpin 1s linear infinite, ringFade 1.2s ease 2.4s forwards; opacity: .9; }
.hero.is-intro .hero__ring--2{ animation: ringSpinRev 1.35s linear infinite, ringFade 1.2s ease 2.6s forwards; opacity: .65; }
@keyframes ringFade { to { opacity: 0; } }
/* The logo is on screen from the very first frame at low opacity and
   simply swells into full view - it is never hidden or held back. */
/* A long, even fade driven by a transition (not an animation), so it
   never resets and can never leave the logo stuck at zero opacity. */
.hero__logo {
  opacity: 1;
  transform: none;
  transition: opacity 5.5s cubic-bezier(.25,.1,.25,1), transform 5.5s cubic-bezier(.25,.1,.25,1);
}
.hero__logo.pre-fade { opacity: .04; transform: scale(.975); }
/* The verbiage is visible from the first frame - only the logo has an
   entrance, so the hero is never blank while the rings sweep. */
.hero__copy > * { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__ring { animation: none !important; opacity: .5; }
  .hero .hero__logo,
  .hero .hero__copy > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-slide { transition: none; }
}

.hero__tagline {
  margin: 0 0 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--accent);
}
.hero__title {
  margin: 0; max-width: 20ch;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.07;
  letter-spacing: -0.028em; text-transform: uppercase; color: #fff;
}
.hero__sub {
  margin: 14px 0 0; max-width: 46ch;
  font-family: var(--display); font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.55; color: rgba(255,255,255,0.84);
}
.hero__cta-row { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero .btn { padding: 13px 22px; font-size: 13.5px; }

/* --- pager --- */
.hero__pager {
  position: absolute; left: var(--gutter); bottom: 26px; z-index: 4;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hero-dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px;
  padding: 7px 10px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(4,10,20,0.42);
  color: rgba(255,255,255,0.6);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .5s ease, border-color .5s ease, background .5s ease;
  backdrop-filter: blur(8px);
}
.hero-dot span { display: none; }
.hero-dot:hover { color: #fff; border-color: rgba(0,158,224,0.5); }
.hero-dot.is-active {
  color: #fff; border-color: var(--accent);
  background: rgba(0,158,224,0.18);
}
.hero-dot.is-active span { color: var(--accent); }
@media (max-width: 780px) { .hero-dot { padding: 6px 8px; font-size: 9.5px; min-width: 26px; } }


/* =========================================================
   v10 - each slide needs to LOOK different while it is still an
   empty drop target, otherwise a working crossfade is invisible.
   Distinct panel wash + a large ghost numeral per slide.
   ========================================================= */
.hero-slide { background: linear-gradient(176deg, #0E2138 0%, #0A1728 58%, #06101F 100%); }
.hero-slide[data-slide="1"] { background: radial-gradient(760px 520px at 78% 14%, rgba(0,158,224,0.34), transparent 62%), linear-gradient(172deg, #12304F 0%, #0B1D33 58%, #06101F 100%); }
.hero-slide[data-slide="2"] { background: radial-gradient(760px 520px at 70% 22%, rgba(38,132,190,0.30), transparent 64%), linear-gradient(196deg, #0F2740 0%, #0A1829 60%, #050D18 100%); }
.hero-slide[data-slide="3"] { background: radial-gradient(800px 540px at 84% 8%, rgba(0,175,214,0.28), transparent 60%), linear-gradient(160deg, #14324C 0%, #0C1E32 62%, #071322 100%); }
.hero-slide[data-slide="4"] { background: radial-gradient(720px 500px at 66% 30%, rgba(0,140,205,0.32), transparent 66%), linear-gradient(186deg, #102943 0%, #091727 64%, #050E1A 100%); }
.hero-slide[data-slide="5"] { background: radial-gradient(820px 560px at 80% 18%, rgba(58,150,220,0.26), transparent 62%), linear-gradient(168deg, #0D2338 0%, #0A1A2C 60%, #06101C 100%); }
.hero-slide[data-slide="6"] { background: radial-gradient(760px 520px at 72% 12%, rgba(0,158,224,0.30), transparent 64%), linear-gradient(192deg, #112B45 0%, #0B1B2D 58%, #05101D 100%); }
.hero-slide[data-slide="7"] { background: radial-gradient(800px 540px at 86% 24%, rgba(46,168,232,0.28), transparent 62%), linear-gradient(174deg, #0F2841 0%, #091829 60%, #050D19 100%); }

/* Big ghost numeral so a slide change is unmistakable until photos land */
.hero-slide::after {
  content: attr(data-slide);
  position: absolute; right: 34px; top: 34px;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(72px, 11vw, 150px); line-height: .82;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.07);
  pointer-events: none;
  transition: color .8s ease;
}
.hero-slide.is-active::after { color: rgba(255,255,255,0.10); }

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide.is-active { opacity: 1; }
}


/* The drop-target chrome belongs in an artboard, not in the hero.
   Hide the slot's own empty-state caption and dashed ring, and let the
   slide's panel + ghost numeral show through instead. */
.hero-slide__media::part(empty) { opacity: 0; transition: opacity .25s ease; }
.hero-slide__media::part(ring)  { border: 0; }
.hero-slide:hover .hero-slide__media::part(empty) { opacity: 1; }
.hero-slide__media::part(frame) { background: transparent; }
.hero-slide__media::part(empty) { color: rgba(255,255,255,0.82); }

/* ghost numeral must sit above the image slot */
.hero-slide::after { z-index: 3; }
.hero-slide { display: block; }
.hero-slide__media { position: absolute; inset: 0; z-index: 1; }
.hero-slide__meta { z-index: 4; display: none; }


/* A filled slide loses its ghost numeral and panel wash - the photo carries it. */
.hero-slide:has(.hero-slide__media[data-filled])::after { display: none; }
.hero-slide:has(.hero-slide__media[data-filled]) {
  background: #081324;
}
/* Keep the photo crisp and cool against the navy copy side */
.hero-slide__media[data-filled]::part(image) {
  object-fit: cover;
  filter: saturate(1.02) contrast(1.02);
}
/* The slide itself must not scale on its own, or the paused frame would be
   doubled up by the parent's transform. */
.hero-slide { transform: none !important; }


/* Glow behind the hero logo - a plain radial gradient, no filter effects. */
.hero__logowrap::before {
  content: "";
  position: absolute; inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,158,224,0.30) 0%, rgba(0,158,224,0.10) 46%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero__logowrap { isolation: auto; }


/* =========================================================
   v11 - service map: two-line heading + pictogram cards
   ========================================================= */
.svc-head {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0; max-width: none;
}
.svc-head__a { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -0.03em; }
.svc-head__b { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -0.03em; }
.svc-head__b { color: var(--accent); }

.svc-grid { margin-top: 44px; align-items: stretch; }
.svc-card {
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  background: #fff;
  border: 1px solid rgba(11,23,42,0.10);
  border-radius: 8px;
  text-align: left;
}
/* pictogram panel occupies the top half of the card */
.svc-card .pic {
  flex: 0 0 auto;
  height: 168px;
  display: grid; place-items: center;
  background:
    radial-gradient(320px 200px at 50% 10%, rgba(0,158,224,0.13), transparent 70%),
    linear-gradient(178deg, #EEF3F8 0%, #E3EAF2 100%);
  border-bottom: 1px solid rgba(11,23,42,0.08);
  color: var(--accent);
}
.pic__svg { width: 84px; height: 84px; }
.svc-card__body {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding: 22px 22px 20px;
}
.svc-card__body h3 {
  margin: 0 0 10px;
  font-family: var(--display); font-weight: 800;
  font-size: 19px; letter-spacing: -0.015em; color: var(--ink);
}
.svc-card__body p {
  margin: 0 0 18px;
  font-size: 14px; line-height: 1.55; color: var(--muted);
}
.svc-card__body .v3__cta { margin-top: auto; }
@media (max-width: 900px) {
  .svc-card .pic { height: 140px; }
  .pic__svg { width: 66px; height: 66px; }
}


/* =========================================================
   v11 - carousel images drift slowly instead of sitting still.
   Each slide gets its own direction so the group never moves
   in lockstep, which would read as a glitch.
   ========================================================= */
.hero-slide__media {
  transform-origin: center center;
  will-change: transform;
  /* Infinite alternate so an animation never "ends" and can never be
     dropped mid-move. It runs always and is simply paused when the slide
     is off screen: a paused animation keeps its current transform, so the
     outgoing image holds its position and size through the crossfade
     instead of snapping back to 1.0. */
  animation: driftRight 22s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.hero-slide[data-slide="2"] .hero-slide__media { animation-name: driftLeft;  animation-duration: 24s; }
.hero-slide[data-slide="3"] .hero-slide__media { animation-name: driftRight; animation-duration: 26s; }
.hero-slide[data-slide="4"] .hero-slide__media { animation-name: zoomIn;     animation-duration: 24s; }
.hero-slide[data-slide="5"] .hero-slide__media { animation-name: driftLeft;  animation-duration: 26s; }
.hero-slide[data-slide="6"] .hero-slide__media { animation-name: zoomOut;    animation-duration: 24s; }
.hero-slide[data-slide="7"] .hero-slide__media { animation-name: driftRight; animation-duration: 24s; }
.hero-slide.is-active .hero-slide__media { animation-play-state: running; }

@keyframes driftRight {
  from { transform: scale(1.06) translate3d(-1.6%, 0, 0); }
  to   { transform: scale(1.10) translate3d(1.6%, -0.6%, 0); }
}
@keyframes driftLeft {
  from { transform: scale(1.10) translate3d(1.6%, -0.5%, 0); }
  to   { transform: scale(1.06) translate3d(-1.6%, 0, 0); }
}
@keyframes zoomIn {
  from { transform: scale(1.03); }
  to   { transform: scale(1.12); }
}
@keyframes zoomOut {
  from { transform: scale(1.12); }
  to   { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide .hero-slide__media { animation: none !important; }
}


/* =========================================================
   v12 - Turnkey heading hierarchy + News page
   ========================================================= */
.tk-head {
  margin: 0; max-width: 18ch;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.04; letter-spacing: -0.032em;
  color: var(--ink);
}
.tk-sub {
  margin: 16px 0 0; max-width: 34ch;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.4; color: var(--muted);
  letter-spacing: -0.01em;
}

/* ---------- News: press release list ---------- */
.news-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.news-item {
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 12px 36px;
  align-items: start;
}
.news-item__meta { display: flex; flex-direction: column; gap: 8px; }
.news-item__tag {
  display: inline-block; align-self: flex-start;
  padding: 4px 9px; border-radius: 3px;
  background: rgba(0,158,224,0.12);
  color: var(--accent-2);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.news-item__meta time {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--muted-2);
}
.news-item__title {
  margin: 0 0 10px; max-width: 30ch;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.22; letter-spacing: -0.018em;
}
.news-item__title a { color: var(--ink); transition: color .15s ease; }
.news-item__title a:hover { color: var(--accent-2); }
.news-item__lede {
  margin: 0 0 14px; max-width: 72ch;
  font-size: 15px; line-height: 1.6; color: var(--muted);
}
.news-item__link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--display); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.02em; color: var(--accent-2);
}
.news-item__link .icon { width: 11px; height: 11px; transition: transform .16s ease; }
.news-item__link:hover .icon { transform: translateX(3px); }
@media (max-width: 760px) {
  .news-item { grid-template-columns: 1fr; gap: 10px; }
  .news-item__meta { flex-direction: row; align-items: center; }
}

/* ---------- News: LinkedIn feed cards ---------- */
.feed-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px; margin-top: 34px;
}
@media (max-width: 860px) { .feed-grid { grid-template-columns: 1fr; } }
.feed-card {
  display: flex; flex-direction: column;
  padding: 22px 22px 20px;
  background: #fff;
  border: 1px solid rgba(11,23,42,0.10);
  border-radius: 8px;
}
.feed-card__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.feed-card__avatar {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 11px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.feed-card__bar strong {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 13.5px; color: var(--ink); line-height: 1.3;
}
.feed-card__bar span {
  display: block; font-size: 11.5px; color: var(--muted-2); margin-top: 1px;
}
.feed-card p {
  margin: 0 0 16px; font-size: 14px; line-height: 1.62; color: var(--muted);
}
.feed-card p em { font-style: normal; color: var(--ink); font-weight: 500; }
.feed-card__link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-weight: 700; font-size: 12px;
  color: var(--accent-2);
}
.feed-card__link .icon { width: 10px; height: 10px; transition: transform .16s ease; }
.feed-card__link:hover .icon { transform: translateX(3px); }


/* =========================================================
   v13 - eyebrow rules removed, news layout, team grid, pillrows
   ========================================================= */

/* --- C6: no leading rule before eyebrows anywhere --- */
.eyebrow::before { display: none !important; }
.eyebrow { gap: 0; }

/* --- C2: real logo in the feed avatar --- */
.feed-card__avatar {
  background: transparent; padding: 0; overflow: hidden;
  width: 44px; height: 44px;
}
.feed-card__avatar img { width: 44px; height: 44px; object-fit: contain; display: block; }

/* --- C3: LinkedIn call to action --- */
.feed-out { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.feed-out__link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 700; font-size: 14px;
  color: var(--accent-2);
}
.feed-out__link .icon { width: 12px; height: 12px; transition: transform .16s ease; }
.feed-out__link:hover .icon { transform: translateX(4px); }

/* --- C1: press release: title + link, description under it --- */
.news-item { grid-template-columns: 168px 1fr; gap: 4px 34px; padding: 26px 0; }
.news-item__body { min-width: 0; }
.news-item__title { margin: 0 0 8px; font-size: clamp(18px, 1.6vw, 22px); }
.news-item__title a { position: relative; }
.news-item__title a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.news-item__title a:hover::after { transform: scaleX(1); }
.news-item__lede { margin: 0; font-size: 14.5px; max-width: 78ch; }
@media (max-width: 760px) { .news-item { grid-template-columns: 1fr; } }

/* --- C4/C5: team grid, greyscale to colour, bio modal --- */
.team-note {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 4px 0 34px;
  padding: 8px 13px;
  border: 1px dashed rgba(11,23,42,0.22);
  border-radius: 4px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.team-note .icon { width: 12px; height: 12px; }

.team-sub {
  margin: 0 0 20px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-2);
}
.team-sub + .team-grid { margin-bottom: 56px; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 22px;
}
@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .team-grid { grid-template-columns: repeat(2, 1fr); } }

.tcard {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 0; border: 0; background: none; text-align: left;
  cursor: pointer;
}
.tcard__photo {
  display: block; width: 100%; aspect-ratio: 4 / 5;
  overflow: hidden; border-radius: 6px;
  background: var(--canvas-2);
}
.tcard__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  filter: grayscale(1) contrast(1.03) brightness(1.02);
  transition: filter .45s ease, transform .6s cubic-bezier(.2,.8,.25,1);
}
.tcard:hover .tcard__photo img,
.tcard:focus-visible .tcard__photo img { filter: none; transform: scale(1.035); }
.tcard__name {
  margin-top: 13px;
  font-family: var(--display); font-weight: 800; font-size: 16px;
  letter-spacing: -0.015em; color: var(--ink); line-height: 1.25;
}
.tcard__role {
  margin-top: 3px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted-2); line-height: 1.4;
}
.tcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

/* bio modal */
.bio-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; }
.bio-modal[hidden] { display: none; }
.bio-modal__scrim { position: absolute; inset: 0; background: rgba(4,10,20,0.72); backdrop-filter: blur(4px); }
.bio-modal__panel {
  position: relative;
  display: grid; grid-template-columns: 260px 1fr;
  width: min(880px, 100%); max-height: 86vh; overflow: auto;
  background: #fff; border-radius: 10px;
  box-shadow: 0 40px 90px rgba(2,7,16,0.45);
  animation: bioIn .22s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes bioIn { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.bio-modal__photo { background: var(--canvas); }
.bio-modal__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.bio-modal__body { padding: 38px 40px 40px; }
.bio-modal__role {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-2);
}
.bio-modal__body h3 {
  margin: 0 0 16px;
  font-family: var(--display); font-weight: 800; font-size: 27px;
  letter-spacing: -0.022em; color: var(--ink);
}
.bio-modal__body p { margin: 0; font-size: 15px; line-height: 1.66; color: var(--muted); }
.bio-modal__x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(11,23,42,0.12); background: #fff;
  color: var(--ink); cursor: pointer;
}
.bio-modal__x:hover { background: var(--ink); color: #fff; }
.bio-modal__x .icon { width: 12px; height: 12px; }
@media (max-width: 700px) {
  .bio-modal__panel { grid-template-columns: 1fr; }
  .bio-modal__photo { max-height: 240px; }
  .bio-modal__body { padding: 26px 24px 30px; }
}

/* --- C7: strategic strengths as stacked rows with bold pictograms --- */
.pilllist { display: flex; flex-direction: column; margin-top: 40px; border-top: 1px solid var(--line); }
.pillrow {
  display: grid; grid-template-columns: 1fr 210px;
  align-items: center; gap: 40px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.pillrow__text h3 {
  margin: 0 0 8px;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.1; letter-spacing: -0.028em; color: var(--ink);
}
.pillrow__text p { margin: 0; max-width: 54ch; font-size: 15px; line-height: 1.6; color: var(--muted); }
.pillrow__ico {
  justify-self: end;
  display: grid; place-items: center;
  width: 168px; height: 168px; border-radius: 10px;
  background: linear-gradient(160deg, #0C1A30 0%, #081324 70%, #06101F 100%);
  color: var(--accent);
  position: relative; overflow: hidden;
}
.pillrow__ico::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120px 120px at 70% 20%, rgba(0,158,224,0.30), transparent 70%);
}
.pill__svg { position: relative; width: 84px; height: 84px; }
@media (max-width: 760px) {
  .pillrow { grid-template-columns: 1fr; gap: 18px; }
  .pillrow__ico { justify-self: start; width: 130px; height: 130px; }
  .pill__svg { width: 64px; height: 64px; }
}


/* =========================================================
   v14 - interactive data hall / aerial hotspot diagrams
   ========================================================= */
.dhsec__lede {
  margin: 16px 0 0; max-width: 62ch;
  font-size: 16px; line-height: 1.6; color: var(--muted);
}
.dh-wrap {
  display: grid; grid-template-columns: 1.55fr 1fr;
  gap: 40px; align-items: center;
  margin-top: 44px;
}
.dh-wrap + .dh-wrap { margin-top: 64px; }
.dh-wrap--rev .dh-shot { order: 2; }
.dh-wrap--rev .dh-copy { order: 1; }
@media (max-width: 940px) {
  .dh-wrap { grid-template-columns: 1fr; gap: 24px; }
  .dh-wrap--rev .dh-shot { order: 1; }
  .dh-wrap--rev .dh-copy { order: 2; }
}

.dh-shot {
  position: relative; overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  background: #081324;
  box-shadow: 0 22px 60px rgba(4,10,20,0.22);
}
.dh-shot > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.2,.8,.25,1), filter .4s ease;
}
.dh-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 40%, transparent 30%, rgba(4,10,20,0.30) 100%);
  pointer-events: none;
  transition: opacity .35s ease;
}

/* --- hotspots --- */
.dh-hot {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  z-index: 3;
}
.dh-hot__dot {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(0,158,224,0.22);
  border: 1.5px solid rgba(255,255,255,0.92);
  box-shadow: 0 0 0 0 rgba(0,158,224,0.65);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.dh-hot__dot::after {
  content: ""; position: absolute; inset: 8px;
  border-radius: 50%; background: #fff;
  transition: background .25s ease, transform .25s ease;
}
.dh-hot__label {
  position: absolute;
  left: 50%; top: calc(100% + 9px);
  transform: translateX(-50%) translateY(-4px);
  padding: 5px 10px;
  border-radius: 3px;
  background: rgba(6,16,31,0.92);
  border: 1px solid rgba(0,158,224,0.45);
  color: #fff;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
/* a slow, calm pulse at rest */
.dh-hot__dot { animation: hotPulse 3.4s ease-in-out infinite; }
.dh-hot:nth-child(3n) .dh-hot__dot { animation-delay: .6s; }
.dh-hot:nth-child(3n+1) .dh-hot__dot { animation-delay: 1.2s; }
@keyframes hotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,158,224,0.55); }
  50%      { box-shadow: 0 0 0 9px rgba(0,158,224,0.00); }
}
.dh-hot:hover .dh-hot__dot,
.dh-hot:focus-visible .dh-hot__dot,
.dh-hot.is-on .dh-hot__dot {
  background: var(--accent);
  transform: scale(1.16);
  animation: none;
  box-shadow: 0 0 0 10px rgba(0,158,224,0.18);
}
.dh-hot:hover .dh-hot__dot::after,
.dh-hot:focus-visible .dh-hot__dot::after,
.dh-hot.is-on .dh-hot__dot::after { background: #fff; transform: scale(.86); }
.dh-hot:hover .dh-hot__label,
.dh-hot:focus-visible .dh-hot__label,
.dh-hot.is-on .dh-hot__label { opacity: 1; transform: translateX(-50%) translateY(0); }

/* the darkened-image + framed highlight effect */
.dh-shot.is-hovered > img { filter: brightness(.62) saturate(.9); transform: scale(1.02); }
.dh-shot.is-hovered .dh-scrim { opacity: 0; }
.dh-hit {
  position: absolute; z-index: 2;
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  background: rgba(0,158,224,0.10);
  box-shadow: 0 0 0 1px rgba(0,158,224,0.25), 0 0 34px rgba(0,158,224,0.35) inset;
  pointer-events: none;
  opacity: 0;
  transform: scale(.94);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.25,1);
  width: 34%; height: 52%;
  left: 50%; top: 50%;
  margin: -26% 0 0 -17%;
}
.dh-shot.is-hovered .dh-hit { opacity: 1; transform: none; }

/* --- side copy --- */
.dh-copy { padding-right: 8px; }
.dh-copy__kicker {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-2);
}
.dh-copy__title {
  margin: 0 0 12px;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.18; letter-spacing: -0.022em; color: var(--ink);
  min-height: 1.18em;
}
.dh-copy__body {
  margin: 0; max-width: 42ch;
  font-size: 14.5px; line-height: 1.62; color: var(--muted);
  min-height: 4.6em;
}
@media (prefers-reduced-motion: reduce) {
  .dh-hot__dot { animation: none; }
  .dh-shot > img { transition: none; }
}


/* Make the hotspot rings unmistakable on a busy photograph. */
.dh-hot { width: 34px; height: 34px; }
.dh-hot__dot {
  background: rgba(8, 20, 36, 0.55);
  border: 2px solid #fff;
  box-shadow: 0 0 0 6px rgba(0,158,224,0.20), 0 3px 12px rgba(2,7,16,0.5);
  backdrop-filter: blur(2px);
}
.dh-hot__dot::after { inset: 11px; background: var(--accent); }
.dh-hot:hover .dh-hot__dot,
.dh-hot:focus-visible .dh-hot__dot,
.dh-hot.is-on .dh-hot__dot {
  background: var(--accent);
  border-color: #fff;
  box-shadow: 0 0 0 9px rgba(0,158,224,0.28), 0 3px 14px rgba(2,7,16,0.6);
}
.dh-hot:hover .dh-hot__dot::after,
.dh-hot:focus-visible .dh-hot__dot::after,
.dh-hot.is-on .dh-hot__dot::after { background: #fff; inset: 12px; }

/* keep labels inside the frame */
.dh-hot[style*="--y:70%"] .dh-hot__label,
.dh-hot[style*="--y:74%"] .dh-hot__label { top: auto; bottom: calc(100% + 9px); }
/* labels on the right edge flip inward */
.dh-hot[style*="--x:86%"] .dh-hot__label,
.dh-hot[style*="--x:88%"] .dh-hot__label { left: auto; right: 50%; transform: translateX(0) translateY(-4px); }
.dh-hot[style*="--x:86%"]:hover .dh-hot__label,
.dh-hot[style*="--x:88%"]:hover .dh-hot__label { transform: translateX(0) translateY(0); }


/* =========================================================
   v15 - about heading, team grid, workflow labels, pictograms
   ========================================================= */

/* --- About: 30 in FBR cyan, larger heading --- */
.about-h2 {
  margin: 0; max-width: 20ch;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.05; letter-spacing: -0.032em;
  color: var(--ink);
}
.about-30 { color: var(--accent); }

/* --- Turnkey workflow: bigger labels, no numbers --- */
.workflow-item { grid-template-columns: 1fr; gap: 0; padding: 22px 24px; }
.workflow-item__label { display: block; }
.workflow-item__label strong {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.1; letter-spacing: -0.026em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 8px;
}
.wi-desc {
  display: block;
  font-family: var(--body); font-size: 14.5px;
  line-height: 1.55; color: var(--muted);
  letter-spacing: 0; text-transform: none;
  max-width: 46ch;
}
.workflow-item__bar { width: 40px; margin-top: 0; margin-bottom: 14px; }

/* --- Team: 4 across the top row, 3 on the second, centred --- */
.team-grid { grid-template-columns: repeat(4, 1fr); justify-items: center; }
.team-grid--lead { grid-template-columns: repeat(4, 1fr); }
.team-grid--lead .tcard { width: 100%; max-width: 260px; }
.team-grid--lead .tcard:nth-child(n+5) { grid-column: auto; }
/* second row of three, centred under the first four */
.team-grid--lead > .tcard:nth-child(5) { grid-column: 1 / span 1; }
@media (min-width: 1101px) {
  .team-grid--lead { grid-template-columns: repeat(12, 1fr); gap: 26px 18px; }
  .team-grid--lead .tcard { grid-column: span 3; }
  .team-grid--lead .tcard:nth-child(5) { grid-column: 2 / span 3; }
  .team-grid--lead .tcard:nth-child(6) { grid-column: 5 / span 3; }
  .team-grid--lead .tcard:nth-child(7) { grid-column: 8 / span 3; }
}
@media (max-width: 1100px) { .team-grid, .team-grid--lead { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .team-grid, .team-grid--lead { grid-template-columns: repeat(2, 1fr); } }

/* placeholder card for a headshot still to come */
.tcard__photo--pending {
  display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, #E9EEF3 0 10px, #DFE6EE 10px 20px);
  border: 1px dashed rgba(11,23,42,0.20);
}
.tcard__pending {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-2); text-align: center; line-height: 1.7;
}
.tcard--empty:hover .tcard__photo--pending { border-color: var(--accent); }

/* --- Service pictograms: bolder, solid --- */
.svc-card .pic { height: 190px; }
.svc-card .pic__svg { width: 92px; height: 92px; }
.svc-card .pic {
  background:
    radial-gradient(300px 200px at 50% 0%, rgba(0,158,224,0.16), transparent 72%),
    linear-gradient(178deg, #0C1A30 0%, #081324 100%);
  color: var(--accent);
  border-bottom: 1px solid rgba(0,158,224,0.22);
}


/* =========================================================
   v16 - turnkey 2x2, team rows, larger data-hall images
   ========================================================= */

/* --- Turnkey: no blue rules, 2 across then 2 beneath, centred text --- */
.workflow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 40px;
}
.workflow-item {
  display: block;
  padding: 30px 28px 32px;
  background: #fff;
  border: 1px solid rgba(11,23,42,0.09);
  border-radius: 8px;
  text-align: center;
}
.workflow-item__bar { display: none !important; }
.workflow-item__label { text-align: center; }
.workflow-item__label strong {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.08; letter-spacing: -0.028em;
  text-align: center;
  color: var(--ink);
  margin-bottom: 10px;
}
.wi-desc {
  display: block; margin: 0 auto;
  font-family: var(--body); font-size: 14.5px;
  line-height: 1.6; color: var(--muted);
  max-width: 34ch; text-align: center;
}
@media (max-width: 720px) { .workflow { grid-template-columns: 1fr; } }

/* --- Team: explicit 4 + 3 on the first section --- */
.team-grid--lead { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 20px; }
.team-grid--lead .tcard { max-width: none; width: 100%; }
.team-grid--lead .tcard:nth-child(5) { grid-column: 1; }
.team-grid--lead .tcard:nth-child(6) { grid-column: 2; }
.team-grid--lead .tcard:nth-child(7) { grid-column: 3; }
@media (max-width: 900px) { .team-grid--lead { grid-template-columns: repeat(2, 1fr); }
  .team-grid--lead .tcard:nth-child(n) { grid-column: auto; } }

/* --- Board: all four on one row --- */
#view-about .team-grid:not(.team-grid--lead) {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 20px;
}
@media (max-width: 900px) {
  #view-about .team-grid:not(.team-grid--lead) { grid-template-columns: repeat(2, 1fr); }
}

/* --- Data hall: bigger images, copy beneath --- */
.dh-wrap { grid-template-columns: 1fr; gap: 26px; }
.dh-wrap--rev .dh-shot { order: 1; }
.dh-wrap--rev .dh-copy { order: 2; }
.dh-copy { display: grid; grid-template-columns: 1fr; padding-right: 0; max-width: 78ch; }
.dh-copy__title { font-size: clamp(20px, 2vw, 26px); min-height: 0; }
.dh-copy__body { min-height: 0; max-width: 68ch; }
@media (min-width: 941px) {
  .dh-copy {
    grid-template-columns: 240px 1fr;
    gap: 4px 32px;
    align-items: start;
  }
  .dh-copy__kicker { grid-column: 1; }
  .dh-copy__title  { grid-column: 2; margin-top: -4px; }
  .dh-copy__body   { grid-column: 2; }
}


/* =========================================================
   v17 - hero pager: no numbers, just clean indicator bars
   ========================================================= */
.hero__pager { gap: 10px; align-items: center; }
.hero-dot {
  min-width: 0;
  width: 30px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255,255,255,0.30);
  font-size: 0;          /* hides the numeral text */
  line-height: 0;
  color: transparent;
  overflow: hidden;
  backdrop-filter: none;
  transition: background .3s ease, width .3s ease;
}
.hero-dot:hover { background: rgba(255,255,255,0.62); }
.hero-dot.is-active {
  background: var(--accent);
  width: 48px;
}
@media (max-width: 780px) { .hero-dot { width: 24px; height: 3px; } .hero-dot.is-active { width: 38px; } }


/* =========================================================
   v18 - leadership grid: exactly 4 on the first row
   Matt, Rob, Marcus, Jeff across the top; the last three wrap
   beneath and stay left-aligned with the first four.
   ========================================================= */
.team-grid--lead {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 20px;
}
.team-grid--lead .tcard { width: 100%; max-width: none; }
/* kill the earlier per-child column overrides */
.team-grid--lead .tcard:nth-child(n) { grid-column: auto; }
@media (max-width: 900px) {
  .team-grid--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =========================================================
   v19 - uniform colour across all seven carousel images
   Slides 1 and 2 were graded by hand; the rest are as-shot.
   A single filter chain applied to every image pulls them all
   toward the same cool, slightly-deep navy look without
   flattening them into one another.
   ========================================================= */
.hero-slide__media {
  filter: saturate(0.86) contrast(1.06) brightness(0.96) hue-rotate(-6deg);
}
/* the two graded slides need less correction, or they over-cool */
.hero-slide[data-slide="1"] .hero-slide__media,
.hero-slide[data-slide="2"] .hero-slide__media {
  filter: saturate(0.94) contrast(1.03) brightness(0.98);
}
/* a shared navy wash sits over every slide so the set reads as one */
.hero-slide::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background:
    linear-gradient(200deg, rgba(0,158,224,0.14) 0%, rgba(6,16,31,0.30) 55%, rgba(4,10,20,0.44) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* but let a dropped-in photo keep a little life */
.hero-slide.is-active::before { opacity: 1; }


/* =========================================================
   v20 - team blocks: big heading + italic hint, centred rows
   ========================================================= */
.team-block { margin: 0 0 26px; }
.team-head {
  margin: 0;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.1; letter-spacing: -0.028em;
  color: var(--ink);
}
.team-hint {
  margin: 8px 0 0;
  font-family: var(--body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted-2);
}
.team-sub { display: none; }

/* bottom three centred under the top four:
   7 cards on 8 columns -> each spans 2, rows offset by one column */
.team-grid--lead {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 26px 18px;
  justify-items: stretch;
}
.team-grid--lead .tcard { grid-column: span 2; width: 100%; }
.team-grid--lead .tcard:nth-child(1) { grid-column: 1 / span 2; }
.team-grid--lead .tcard:nth-child(2) { grid-column: 3 / span 2; }
.team-grid--lead .tcard:nth-child(3) { grid-column: 5 / span 2; }
.team-grid--lead .tcard:nth-child(4) { grid-column: 7 / span 2; }
.team-grid--lead .tcard:nth-child(5) { grid-column: 2 / span 2; }
.team-grid--lead .tcard:nth-child(6) { grid-column: 4 / span 2; }
.team-grid--lead .tcard:nth-child(7) { grid-column: 6 / span 2; }

@media (max-width: 900px) {
  .team-grid--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-grid--lead .tcard:nth-child(n) { grid-column: auto; }
}

/* board: 4 in one row */
#view-about .team-grid:not(.team-grid--lead) {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 20px;
}
@media (max-width: 900px) {
  #view-about .team-grid:not(.team-grid--lead) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =========================================================
   v21b - service cards: the card turns dark navy on hover
   (inherited from .v3:hover), so all its text must go light.
   ========================================================= */
.svc-card { transition: transform .28s cubic-bezier(.2,.8,.25,1),
                        background .25s ease,
                        border-color .28s ease,
                        box-shadow .28s ease; }
.svc-card:hover,
.svc-card:focus-within {
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(4,10,20,0.22);
}
/* everything inside flips to light */
.svc-card:hover .svc-card__body h3,
.svc-card:focus-within .svc-card__body h3 { color: #FFFFFF !important; }
.svc-card:hover .svc-card__body p,
.svc-card:focus-within .svc-card__body p { color: rgba(255,255,255,0.80); }
.svc-card:hover .v3__cta,
.svc-card:focus-within .v3__cta { color: #fff; }
/* pictogram tile brightens with a cyan glow */
.svc-card .pic { transition: background .3s ease, color .3s ease, border-color .3s ease; }
.svc-card:hover .pic {
  background:
    radial-gradient(320px 220px at 50% 0%, rgba(0,158,224,0.42), transparent 74%),
    linear-gradient(178deg, #12283F 0%, #0A1729 100%);
  border-bottom-color: rgba(0,158,224,0.40);
  color: #6FD2FA;
}

/* =========================================================
   v21 - turnkey boxes: non-interactive, thin blue rule under
   each title
   ========================================================= */
.workflow-item,
.workflow-item:hover {
  transform: none !important;
  box-shadow: none !important;
  cursor: default;
}
.workflow-item {
  transition: border-color .3s ease;
}
.workflow-item:hover { border-color: rgba(11,23,42,0.09); }

.workflow-item__label strong {
  position: relative;
  display: block;
  padding-bottom: 16px;
  margin-bottom: 14px;
}
.workflow-item__label strong::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 54px; height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transition: width .3s ease;
}


/* =========================================================
   v22 - "Turnkey delivery" heading in FBR blue
   ========================================================= */
.tk-head { color: var(--accent); }


/* =========================================================
   v23 - nav menu: lighter, more refined typography
   ========================================================= */
.nav__menu { min-width: 292px; padding: 12px; }
.nav__menu-head {
  font-family: var(--body);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.34);
  padding: 6px 14px 12px;
}
.nav__menu a {
  font-family: var(--body);
  font-weight: 400;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  line-height: 1.3;
  padding: 10px 14px;
  color: rgba(255,255,255,0.74);
  transition: color .16s ease, background .16s ease, padding-left .18s ease;
}
.nav__menu a:hover {
  color: #fff;
  background: rgba(255,255,255,0.055);
  padding-left: 18px;
}
.nav__menu a.is-active {
  color: #fff;
  font-weight: 500;
  background: rgba(0,158,224,0.14);
}
/* the "Start a project" CTA inside the panel keeps its weight */
.nav__menu-cta {
  font-family: var(--display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.03em;
}
/* menu trigger label: same lighter treatment */
.nav__burger {
  font-family: var(--body);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.20em;
}
.nav__search-key {
  font-family: var(--body);
  font-weight: 400;
  letter-spacing: 0.18em;
}


/* =========================================================
   v24 - nav menu: genuinely light weight
   The links still inherited 600 from the original .nav__menu a
   rule. Force a light face at a slightly larger size, which reads
   more refined than a bold face at a small one.
   ========================================================= */
.nav .nav__menu a,
.nav .nav__menu a.is-active {
  font-family: var(--body) !important;
  font-weight: 300 !important;
  font-size: 15px !important;
  letter-spacing: 0.015em;
  padding: 11px 15px !important;
  color: rgba(255,255,255,0.76) !important;
  background: transparent;
}
.nav .nav__menu a:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.06) !important;
  padding-left: 19px !important;
}
.nav .nav__menu a.is-active {
  color: #fff !important;
  background: rgba(0,158,224,0.16) !important;
  font-weight: 400 !important;
}
/* the letter-spaced micro-labels stay light too */
.nav .nav__menu-head { font-weight: 300 !important; letter-spacing: 0.26em; }
.nav .nav__burger { font-weight: 300 !important; }
.nav .nav__search-key { font-weight: 300 !important; }
.nav .nav__menu-cta { font-weight: 500 !important; letter-spacing: 0.02em; }


/* =========================================================
   v25 - page headers get a photographic backdrop, sized to
   match the home hero band exactly.
   ========================================================= */
.page-head--hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* same vertical rhythm as .hero: 96 top / 56 bottom, min 527 */
  padding: 96px 0 56px;
  min-height: clamp(527px, 76vh, 700px);
  background: #081324;
}
.page-head__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  z-index: 0;
  display: block;
  pointer-events: none;
  /* same cool grade as the home slides so every page matches */
  filter: saturate(0.86) contrast(1.06) brightness(0.96) hue-rotate(-6deg);
}
/* navy veil: heavy on the left where the type sits, lighter right */
.page-head__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-head--hero .page-head__bg::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(6,14,26,0.94) 0%, rgba(6,14,26,0.86) 34%, rgba(6,14,26,0.54) 64%, rgba(6,14,26,0.34) 100%),
    linear-gradient(0deg, rgba(6,14,26,0.92) 0%, rgba(6,14,26,0.30) 42%, transparent 68%),
    linear-gradient(180deg, rgba(0,158,224,0.10) 0%, transparent 40%);
  pointer-events: none;
}
.page-head--hero .page-head__bg::after { display: none; }
.page-head__inner { position: relative; z-index: 2; }

/* the logo/title block needs to breathe against a photo */
.page-head--hero .page-head__title { text-shadow: 0 2px 26px rgba(2,7,16,0.55); }
.page-head--hero .page-head__lede { color: rgba(255,255,255,0.86); }


/* =========================================================
   v26 - lock every page header to the home hero height.
   The headers were sizing to their own content (527-615px)
   while home sits at 665px. Fixing the height makes them all
   identical, with the photo filling the band.
   ========================================================= */
:root { --hero-band: clamp(560px, 74vh, 680px); }

.hero {
  min-height: var(--hero-band);
  height: var(--hero-band);
  padding: 0;
  display: flex;
  align-items: center;
}
.hero > .shell,
.hero > .hero__media,
.hero > .hero__veil { flex: none; }
.hero { position: relative; }
.hero > .shell.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

.page-head--hero {
  height: var(--hero-band);
  min-height: var(--hero-band);
  padding: 0;
  display: flex;
  align-items: center;
}
.page-head--hero .page-head__inner { width: 100%; }

/* keep the pager off the very bottom edge on short screens */
.hero__pager { bottom: 22px; }


/* =========================================================
   v27 - page-head photos drift + cool grade, VerithreadAI brand
   ========================================================= */

/* --- C3: page header photos get the same slow life as the home hero --- */
.page-head__photo {
  transform-origin: center center;
  will-change: transform;
  animation: phDrift 26s ease-in-out infinite alternate;
}
@keyframes phDrift {
  0%   { transform: scale(1.02) translate3d(-0.8%, 0.4%, 0); }
  100% { transform: scale(1.10) translate3d(1.0%, -0.8%, 0); }
}
/* alternate the direction per page so the site doesn't pulse in unison */
#view-engineering .page-head__photo,
#view-wireless .page-head__photo,
#view-utilities .page-head__photo,
#view-verithread .page-head__photo { animation-name: phDriftRev; }
@keyframes phDriftRev {
  0%   { transform: scale(1.10) translate3d(1.0%, -0.8%, 0); }
  100% { transform: scale(1.02) translate3d(-0.8%, 0.4%, 0); }
}
#view-about .page-head__photo { animation-duration: 30s; }
#view-construction .page-head__photo { animation-duration: 32s; }
#view-digital .page-head__photo { animation-duration: 28s; }

/* hue match: a touch cooler and deeper than the raw upload */
.page-head__photo {
  filter: saturate(0.80) contrast(1.08) brightness(0.92) hue-rotate(-8deg);
}
@media (prefers-reduced-motion: reduce) {
  .page-head__photo { animation: none !important; }
}

/* --- C4: VerithreadAI lockup, bottom right of the page header --- */
.page-head__brand {
  position: absolute;
  right: var(--gutter);
  bottom: 38px;
  z-index: 3;
  width: clamp(150px, 15vw, 224px);
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 22px rgba(2,7,16,0.55));
}
@media (max-width: 640px) {
  .page-head__brand { width: 132px; bottom: 26px; opacity: .92; }
}

/* --- C2: four pillars, four across --- */
.pillars4 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
.pillars4 .v3 { max-width: none; width: 100%; min-width: 0; }
.pillars4 .v3 h3 { font-size: 19px; line-height: 1.24; }
.pillars4 .v3 p { font-size: 13.5px; line-height: 1.55; }
@media (max-width: 1000px) { .pillars4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 620px)  { .pillars4 { grid-template-columns: 1fr !important; } }

/* --- C1: carousel crossfade - remove every other moving part for a clean blend --- */
.hero-slide { transition: opacity 1.6s cubic-bezier(.45,0,.35,1) !important; }
.hero-slide.is-active { z-index: 1; }
/* keep the drift but never let it restart between transitions */
.hero-slide:not(.is-active) .hero-slide__media { animation-play-state: paused; }


/* =========================================================
   v28 - seamless crossfade
   The outgoing slide stays fully opaque and sits beneath the
   incoming one, which fades in over it. Only ONE opacity is
   animating at any moment, so there is no midpoint dip.
   ========================================================= */
.hero-slide {
  opacity: 0;
  z-index: 1;
  transition: opacity 1.5s cubic-bezier(.4,0,.2,1) !important;
  will-change: opacity;
  backface-visibility: hidden;
}
.hero-slide.is-active { opacity: 1; z-index: 3; }
.hero-slide.is-leaving { opacity: 1; z-index: 2; }
/* the first slide needs no fade on initial paint */
.hero-slide:first-child { transition: opacity 1.5s cubic-bezier(.4,0,.2,1) !important; }


/* =========================================================
   v29 - spacing + nav CTA colour
   ========================================================= */

/* --- C1: halve the gap above "30+ years" --- */
/* the section sits directly after the turnkey block; trim its top padding */
#view-home > section.bg-light:nth-of-type(3) { padding-top: 40px; }
/* safer: target the track-record section by its heading */
#view-home section:has(.proof-bands) { padding-top: 40px; }

/* --- C2: hero copy clears the fixed header --- */
.hero { padding-top: 128px; }
.hero > .shell.hero__inner { padding-top: 22px; }
@media (max-width: 900px) { .hero { padding-top: 112px; } }

/* --- C3: menu CTA in FBR blue --- */
.nav__menu-cta,
.nav .nav__menu-cta {
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid var(--accent);
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(0,158,224,0.32);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.nav__menu-cta:hover,
.nav .nav__menu-cta:hover {
  background: var(--accent-2) !important;
  border-color: var(--accent-2);
  box-shadow: 0 8px 22px rgba(0,158,224,0.42);
  transform: translateY(-1px);
}


/* nav CTA text must be white, not the lighter menu-link colour */
.nav .nav__menu-cta,
.nav .nav__menu-cta:visited { color: #ffffff !important; }


/* The CTA lives inside .nav__menu, so the menu-link rule (.nav .nav__menu a,
   colour !important) was winning. Match and beat it. */
.nav .nav__menu a.nav__menu-cta,
.nav .nav__menu a.nav__menu-cta:hover,
.nav .nav__menu a.nav__menu-cta:visited {
  color: #ffffff !important;
  background: var(--accent) !important;
  font-weight: 500 !important;
  padding: 13px 16px !important;
}
.nav .nav__menu a.nav__menu-cta:hover {
  background: var(--accent-2) !important;
}
.nav .nav__menu a.nav__menu-cta .arrow { width: 12px; height: 12px; }


/* =========================================================
   v30 - hero vertical fit
   The copy block was overflowing the 560px band by 40px, so the
   CTA was being covered by the pager and the next section.
   Logo down a step, rhythm tightened, everything back inside.
   ========================================================= */
.hero { padding-top: 118px; padding-bottom: 0; }
.hero > .shell.hero__inner { padding-top: 0; padding-bottom: 0; }

.hero__logowrap { width: 132px; height: 132px; margin-bottom: 18px; }
.hero__logo { width: 132px; height: 132px; max-width: 132px; }

.hero__tagline { margin: 0 0 12px; }
.hero__title { font-size: clamp(24px, 3vw, 38px); line-height: 1.07; }
.hero__sub { margin: 12px 0 0; font-size: clamp(13px, 1.05vw, 15px); max-width: 48ch; }
.hero__cta-row { margin-top: 18px; }
.hero .btn { padding: 12px 20px; font-size: 13px; }

/* give the pager its own strip so it can never sit on the CTA */
.hero__pager { bottom: 18px; }
.hero .hero__copy { max-width: 620px; }

@media (max-width: 900px) {
  .hero { padding-top: 104px; }
  .hero__logowrap, .hero__logo { width: 104px; height: 104px; }
  .hero__logowrap { margin-bottom: 14px; }
}

/* on short viewports tighten type rather than shrinking the logo again */
@media (max-height: 700px) {
  .hero { padding-top: 106px; }
  .hero__title { font-size: clamp(22px, 2.8vw, 32px); }
  .hero__sub { margin-top: 10px; }
  .hero__cta-row { margin-top: 14px; }
}


/* final nudge: a little breathing room between the CTA and the pager */
.hero__logowrap { margin-bottom: 14px; }
.hero__tagline { margin-bottom: 10px; }
.hero__cta-row { margin-top: 16px; }


/* =========================================================
   v31 - hero logo: larger, and optically centred between the
   header bar and the verbiage (equal gaps above and below)
   ========================================================= */
.hero { padding-top: 80px; }
.hero__logowrap {
  width: 148px; height: 148px;
  margin-bottom: 58px;
}
.hero__logo { width: 148px; height: 148px; max-width: 148px; }

@media (max-width: 900px) {
  .hero { padding-top: 70px; }
  .hero__logowrap { width: 118px; height: 118px; margin-bottom: 40px; }
  .hero__logo { width: 118px; height: 118px; max-width: 118px; }
}
@media (max-height: 700px) {
  .hero { padding-top: 64px; }
  .hero__logowrap { width: 104px; height: 104px; margin-bottom: 30px; }
  .hero__logo { width: 104px; height: 104px; max-width: 104px; }
}


/* Height-specific tuning for ~700px viewports: keep the logo generous
   and put it optically midway between the header and the tagline. */
@media (max-height: 760px) {
  .hero { padding-top: 60px; }
  .hero__logowrap { width: 124px; height: 124px; margin-bottom: 52px; }
  .hero__logo { width: 124px; height: 124px; max-width: 124px; }
}
@media (max-height: 700px) {
  .hero { padding-top: 54px; }
  .hero__logowrap { width: 116px; height: 116px; margin-bottom: 46px; }
  .hero__logo { width: 116px; height: 116px; max-width: 116px; }
  .hero__tagline { margin-bottom: 10px; }
  .hero__cta-row { margin-top: 14px; }
}


/* final balance pass: equalise the optical gaps around the hero logo */
@media (max-height: 760px) {
  .hero { padding-top: 70px; }
  .hero__logowrap { width: 128px; height: 128px; margin-bottom: 52px; }
  .hero__logo { width: 128px; height: 128px; max-width: 128px; }
}
@media (max-height: 700px) {
  .hero { padding-top: 64px; }
  .hero__logowrap { width: 124px; height: 124px; margin-bottom: 48px; }
  .hero__logo { width: 124px; height: 124px; max-width: 124px; }
}


/* even out the logo's optical spacing: shave the top, add below */
@media (max-height: 760px) {
  .hero { padding-top: 62px; }
  .hero__logowrap { width: 132px; height: 132px; margin-bottom: 62px; }
  .hero__logo { width: 132px; height: 132px; max-width: 132px; }
}
@media (max-height: 700px) {
  .hero { padding-top: 56px; }
  .hero__logowrap { width: 132px; height: 132px; margin-bottom: 58px; }
  .hero__logo { width: 132px; height: 132px; max-width: 132px; }
}


/* =========================================================
   v32 - data hall images: sized so the copy below is visible
   in a full-page view. Capping the height and centring the
   figure keeps the copy above the fold.
   ========================================================= */
.dh-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  margin-top: 32px;
}
.dh-wrap + .dh-wrap { margin-top: 46px; }

.dh-shot {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  aspect-ratio: 16 / 8.4;
  max-height: 340px;
  border-radius: 8px;
}

.dh-copy {
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
}
.dh-copy__title { font-size: clamp(19px, 1.8vw, 23px); }
.dh-copy__body { font-size: 14px; line-height: 1.6; }

/* keep the whole interactive block compact on tall screens too */
@media (min-height: 900px) {
  .dh-shot { max-height: 380px; }
}
@media (max-width: 940px) {
  .dh-shot { max-width: none; max-height: none; aspect-ratio: 16 / 9; }
  .dh-copy { max-width: none; }
}


/* =========================================================
   v33 - Careers page
   ========================================================= */
.careers-intro {
  max-width: 74ch;
  margin: 0 0 56px;
}
.careers-intro p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
}
.careers-h2 {
  margin: 0 0 10px;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.careers-lede {
  margin: 0 0 36px;
  font-size: 15.5px;
  color: var(--muted);
}

/* --- job list --- */
.jobs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.job {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 6px 40px;
  padding: 30px 0 28px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.job__meta {
  display: flex; flex-direction: column; gap: 8px;
}
.job__dept {
  display: inline-block; align-self: flex-start;
  padding: 4px 9px; border-radius: 3px;
  background: rgba(0,158,224,0.12);
  color: var(--accent-2);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.job__loc {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.08em; color: var(--muted-2);
}
.job__title {
  margin: 0 0 10px;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.22; letter-spacing: -0.018em;
  color: var(--ink);
}
.job__desc {
  margin: 0 0 14px;
  max-width: 78ch;
  font-size: 14.5px; line-height: 1.62; color: var(--muted);
}
.job__link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--display); font-weight: 700; font-size: 12.5px;
  color: var(--accent-2);
}
.job__link .icon { width: 11px; height: 11px; transition: transform .16s ease; }
.job__link:hover .icon { transform: translateX(3px); }
@media (max-width: 760px) {
  .job { grid-template-columns: 1fr; gap: 10px; }
  .job__meta { flex-direction: row; align-items: center; gap: 10px; }
}

/* --- closing CTA --- */
.careers-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  margin-top: 48px; padding: 32px 34px;
  background: var(--ink);
  border-radius: 8px;
  color: #fff;
}
.careers-cta h3 {
  margin: 0 0 6px;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(19px, 1.8vw, 24px);
  letter-spacing: -0.02em; color: #fff;
}
.careers-cta p {
  margin: 0; max-width: 54ch;
  font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.72);
}
.careers-cta .btn { flex-shrink: 0; }


/* =========================================================
   v34 - job rows: title top-right, description beneath it
   ========================================================= */
.job {
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 0 40px;
  align-items: start;
}
/* the meta column keeps the whole left side */
.job__meta {
  grid-column: 1;
  grid-row: 1 / span 3;
}
/* title sits at the top of the right column, flush right */
.job__title {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 12px;
  text-align: right;
  max-width: none;
}
/* description and link follow directly beneath it */
.job__desc {
  grid-column: 2;
  grid-row: 2;
  margin: 0 0 14px;
  max-width: none;
}
.job__link {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
}

@media (max-width: 760px) {
  .job__title { text-align: left; margin-top: 4px; }
  .job__meta { grid-row: auto; }
  .job__title, .job__desc, .job__link { grid-column: 1; grid-row: auto; }
  .job__link { justify-self: start; }
}


/* =========================================================
   MULTI-PAGE BUILD
   ========================================================= */
.mockup-view { display: block !important; }
.mockup-banner { display: none !important; }